/* =======================================================
   Tokens & Globals
   ======================================================= */
:root {
    /* Farben */
    --accent-strong: #447604; /* Grün für Header/Hero-Buttons */
    --cta-bg: #deffb3; /* Absenden-Button Hintergrund */
    --cta-text: #315503; /* Absenden-Button Text */
    --cta-text-button: #ffffff; /* Header/Hero-Button Text (weiß) */

    /* Größen */
    --logo-header-max-h: 4rem; /* Hauptlogo oben */
    --logo-footer-max-h: 2rem; /* Footer-Logo */
    --logo-school-max-h: 9rem; /* Max-Höhe des Schul-Logos (Fallback) */
    --photo-border-width: 0.25rem;

    /* HvB-Bereich */
    --school-logo-h: calc(var(--radius) * 16);
    --school-bar-py: 0.75rem; /* vertikales Padding im HvB-Kasten */
    --school-bar-px: clamp(
        0.5rem,
        2vw,
        0.875rem
    ); /* seitl. Padding im HvB-Kasten */

    /* Schatten */
    --shadow-elevated: 0 6px 22px color-mix(in srgb, black 18%, transparent),
        0 1px 2px color-mix(in srgb, black 12%, transparent);

    /* Sonstiges */
    --shadow-accent: 0 10px 28px
        color-mix(in srgb, var(--accent-strong) 68%, transparent);
    --radius-sm: calc(var(--radius) * 0.5);
}

/* =======================================================
   Buttons
   ======================================================= */
/* Header/Hero – grün auf weißer Schrift */
.btn-accent {
    --bs-btn-bg: var(--accent-strong);
    --bs-btn-border-color: var(--accent-strong);
    --bs-btn-color: var(--cta-text-button);
    --bs-btn-hover-bg: color-mix(in srgb, var(--accent-strong) 90%, black);
    --bs-btn-hover-border-color: color-mix(
        in srgb,
        var(--accent-strong) 92%,
        black
    );
    --bs-btn-active-bg: color-mix(in srgb, var(--accent-strong) 85%, black);
    --bs-btn-active-border-color: color-mix(
        in srgb,
        var(--accent-strong) 87%,
        black
    );
}

/* Kontakt – hellgrüner Absenden-Button */
.btn-absenden {
    --bs-btn-bg: var(--cta-bg);
    --bs-btn-border-color: var(--cta-bg);
    --bs-btn-color: var(--cta-text);
    --bs-btn-hover-bg: color-mix(in srgb, var(--cta-bg) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--cta-bg) 85%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--cta-bg) 80%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--cta-bg) 80%, black);
    font-weight: 700;
    font-size: 1.0625rem; /* leicht größer */
}

/* Allgemein: Buttons innen breiter */
.btn {
    --bs-btn-padding-x: 1.25rem;
}
.btn-lg {
    --bs-btn-padding-x: 1.5rem;
}

/* Leicht eckiger Look */
.btn-accent,
.btn-absenden {
    border-radius: var(--radius-sm);
}

/* Akzent-Textfarbe */
.u-text-accent {
    color: var(--accent-strong);
}

/* Kompakter, intensiver grüner Glow (optional nutzbar) */
.u-glow-accent {
    box-shadow: var(--shadow-accent);
}

/* =======================================================
   Logos & Bildrahmen
   ======================================================= */
.u-logo--header {
    max-height: var(--logo-header-max-h);
    width: auto;
}
.u-logo--footer {
    max-height: var(--logo-footer-max-h);
    width: auto;
}

.u-photo-frame {
    border: var(--photo-border-width) solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-bg);
}

/* =======================================================
   HVB-Sektion – nur der große Kasten bekommt Schatten
   (Markup: .section--alt > .container > .card-body ...)
   ======================================================= */

/* A) „Wir fördern:“ wieder dezent */
.section--alt .card-body h3 {
    font-size: 1.125rem; /* klein & unaufgeregt */
    font-weight: 600; /* etwas kräftiger als normaler Text */
    margin-bottom: 0.5rem; /* Abstand bleibt kurz */
}

/* Großer Kasten */
.section--alt .card-body {
    padding-inline: var(--school-bar-px);
    padding-block: var(--school-bar-py);
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-elevated);
}

/* Innen-Wrapper um das Logo: kein eigener Kasten mehr, nur Zentrierung */
.u-portrait {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    width: 100%;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo-Größe steuerbar */
.u-logo-school {
    height: var(--school-logo-h);
    max-height: var(--logo-school-max-h);
    width: auto;
    display: block;
    max-width: 100%;
}

/* =======================================================
   Benefits (6 Elemente)
   ======================================================= */

/* B) H2 über den 6 Icons: mittig + etwas Luft, nicht übergroß */
.section .container > h2 {
    text-align: center; /* mittig */
    margin-bottom: 3rem; /* mehr Lücke zu den 6 Kacheln */
    font-size: clamp(2.25rem, 2.8vw, 2.5rem); /* moderat, nicht „hero“ */
    font-weight: 700;
}

/* Gesamtes Feld kompakter (Icon + Texte) */
.c-benefit {
    font-size: 0.9rem;
    line-height: 1.35;
    text-align: center;
}
.c-benefit__img {
    display: block;
    margin-inline: auto;
    max-width: 5.5rem; /* kompakter als vorher */
    height: auto;
    margin-bottom: 0.25rem;
}
.c-benefit p,
.c-benefit h3,
.c-benefit h4 {
    margin-bottom: 0.25rem;
}

/* =======================================================
   Mobile Header: oberster Button kompakter, kollidiert
   nicht mit dem Logo
   ======================================================= */
@media (max-width: 576px) {
    header .btn-accent {
        --bs-btn-padding-x: 0.75rem;
        --bs-btn-padding-y: 0.375rem;
        font-size: 0.9rem;
        line-height: 1.1;
    }
    .u-logo--header {
        max-height: 3.25rem;
    } /* etwas Luft ums Logo */
}

/* Optionale Burger-Schaltfläche, falls im Markup vorhanden */
@media (max-width: 576px) {
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 0.5rem;
        border: 1px solid var(--border-color);
        background: var(--surface-bg);
    }
}
@media (min-width: 577px) {
    .nav-toggle {
        display: none;
    }
}

/* Einheitliche Message-Box (Info, Erfolg, Fehler) */
.form-msg {
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    margin-top: 0.5rem;
}
.form-msg[hidden] {
    display: none !important;
}

.form-msg--error {
    background: #ffe7e7;
    color: #8c1d1d;
    border: 1px solid #f2b8b8;
}
.form-msg--success {
    background: #e8f7eb;
    color: #0f5c2e;
    border: 1px solid #bfe5c7;
}

/* Stabiler Submit-Button + optionaler Spinner */
.btn-absenden {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
}
.btn-absenden.is-loading {
    pointer-events: none;
    opacity: 0.85;
}
.btn-absenden .spinner-border {
    width: 1rem;
    height: 1rem;
}

/* =======================================================
   Ergänzungen: Breite/Overflow & Burger-Menü
   ======================================================= */

/* 1) Seitliches Scrollen sicher verhindern, ohne Layout zu verschieben */
html,
body {
    max-width: 100%;
    overflow-x: clip; /* moderne Browser */
}
@supports not (overflow-x: clip) {
    html,
    body {
        overflow-x: hidden;
    } /* Fallback */
}
/* Medien nie breiter als der Viewport */
img,
video,
svg,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}
/* Lange Wörter/URLs umbrechen, statt Breite zu sprengen */
body {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 2) Burger: Icon-Wechsel & Mobile-Menü */
.nav-toggle {
    color: inherit;
    gap: 0;
}
.nav-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
}
.nav-toggle .icon-close {
    display: none;
}
.nav-toggle[aria-expanded="true"] .icon-bars {
    display: none;
}
.nav-toggle[aria-expanded="true"] .icon-close {
    display: block;
}

/* Mobile: Logo links, Burger rechts; CTA oben verstecken */
@media (max-width: 576px) {
    header {
        position: relative;
    }

    /* Mobile-Menü Panel */
    .nav-menu {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 0.5rem);
        padding: 0.75rem 1rem;
        background: var(--surface-bg, #fff);
        border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
        box-shadow: var(--shadow-elevated);
        z-index: 1000;
    }
    /* [hidden] von HTML steuert Sichtbarkeit */
    .nav-menu[hidden] {
        display: none !important;
    }

    /* Buttons im Panel fühlen sich „nativ“ an */
    .nav-menu .btn {
        width: 100%;
    }
}

/* Desktop: Burger aus, Menü aus, Header-CTA sichtbar */
@media (min-width: 577px) {
    .nav-menu {
        display: none !important;
    }
    header .container > a.btn {
        display: inline-flex;
    }
}

/* Header: CTA gezielt steuern, Burger bleibt unberührt */
@media (max-width: 576px) {
    /* Nur den Desktop-CTA im Header ausblenden */
    header .container > .header-cta {
        display: none;
    }

    /* Sicherheit: Burger immer sichtbar */
    header .container > .nav-toggle {
        display: inline-flex;
    }
}

@media (min-width: 577px) {
    /* CTA auf Desktop sichtbar */
    header .container > .header-cta {
        display: inline-flex;
    }
}