/* ===== Box Components ===== */

/* === HIGHLIGHT BOX === */
.highlight-box {
    background: var(--color-bg-elevated-2);
    padding: var(--spacing-2xl) var(--spacing-xl);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    margin: var(--spacing-3xl) 0;
}

.highlight-box .text-lead,
.highlight-box p {
    color: var(--color-text-light);
}

@media (max-width: 768px) {
    .highlight-box {
        padding: var(--spacing-xl) var(--spacing-lg);
        margin: var(--spacing-2xl) 0;
    }
}

/* === INFO BOX === */
.info-box {
    background: var(--color-bg-elevated-2);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-primary);
    border: 1px solid var(--color-border-light);
    border-left: 4px solid var(--color-primary);
    margin: var(--spacing-lg) 0;
}

.info-box p {
    font-size: var(--font-size-sm);
    color: var(--color-text-light-muted);
    margin-bottom: var(--spacing-sm);
}

.info-box p:last-child {
    margin-bottom: 0;
}

.info-box h3 {
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
}

.info-box ul {
    padding-left: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.info-box li {
    color: var(--color-text-light-muted);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
}

.info-box strong {
    color: var(--color-text-light);
}

/* === WARNING BOX === */
.warning-box {
    background: var(--color-bg-elevated-2);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-warning);
    border: 1px solid var(--color-border-light);
    border-left: 4px solid var(--color-warning);
    margin: var(--spacing-lg) 0;
}

.warning-box p {
    color: var(--color-text-light-muted);
    margin-bottom: var(--spacing-sm);
}

.warning-box p:last-child {
    margin-bottom: 0;
}

/* === SUCCESS BOX === */
.success-box {
    background: var(--color-bg-elevated-2);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-success);
    border: 1px solid var(--color-border-light);
    border-left: 4px solid var(--color-success);
    margin: var(--spacing-lg) 0;
}

.success-box p {
    color: var(--color-text-light-muted);
    margin-bottom: var(--spacing-sm);
}

.success-box p:last-child {
    margin-bottom: 0;
}

/* === ERROR BOX === */
.error-box {
    background: var(--color-bg-elevated-2);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-error);
    border: 1px solid var(--color-border-light);
    border-left: 4px solid var(--color-error);
    margin: var(--spacing-lg) 0;
}

.error-box p {
    color: var(--color-text-light-muted);
    margin-bottom: var(--spacing-sm);
}

.error-box p:last-child {
    margin-bottom: 0;
}

/* === CONTENT SECTION === */
/* Reusable content section wrapper with proper spacing */
.content-section {
    padding: var(--spacing-4xl) 0;
}

.content-section p {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-lg);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-light);
}

.content-section p:last-child {
    margin-bottom: 0;
}

.content-section h2 {
    color: var(--color-text-light);
    margin-bottom: var(--spacing-lg);
}

.content-section h3 {
    color: var(--color-text-light);
}

.content-section ul {
    padding-left: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.content-section li {
    color: var(--color-text-light);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-xs);
}

@media (max-width: 768px) {
    .content-section {
        padding: var(--spacing-3xl) 0;
    }

    .content-section p {
        font-size: var(--font-size-base);
    }

    .content-section li {
        font-size: var(--font-size-base);
    }
}

/* === SERVICE LIST === */
.service-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm) var(--spacing-xl);
    margin-top: var(--spacing-lg);
}

.service-list li {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    color: var(--color-text-light);
    font-size: var(--font-size-lg);
}

.service-list li::before {
    content: '●';
    color: var(--color-secondary-light);
    font-size: 0.85em;
    line-height: 1.6;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .service-list {
        grid-template-columns: 1fr;
    }
}

/* Background variants for content sections */
.bg-elevated {
    background-color: var(--color-bg-elevated);
}

.bg-dark {
    background-color: var(--color-bg-primary);
}

.bg-darker {
    background-color: var(--color-bg-dark);
}

/* === SECTION BACKGROUND SYSTEM === */
/* Explizite, alternierende Backgrounds für <section>-Elemente.
   Immer mit .bg-section-primary starten, dann alternierend.
   Ausnahmen: .final-cta, .service-cta, .section-cta */
.bg-section-primary {
    background-color: var(--color-bg-dark-primary);
}

.bg-section-elevated {
    background-color: var(--color-bg-dark-elevated);
}