@charset "UTF-8";

/* ============================================================
   Freiwillige Feuerwehr Colbitz — zentrales Stylesheet
   Struktur: Tokens → Basis → Komponenten (mobile zuerst, Desktop
   je Komponente in einer nested Media Query).
   Desktop-Breakpoint überall identisch: [breakpoint-desktop] 1400px
   ============================================================ */

/* ---------- Design-Tokens ---------- */
:root {
    /* Farben */
    --c-primary: #2b5ca8;       /* Dunkelblau der Menüleiste */
    --c-primary-dark: #234b89;  /* Hover/aktiv */
    --c-accent: #c6d76f;        /* Lindgrün des Suchfelds */
    --c-on-accent: #1d1d1d;     /* Text auf Grün */
    --c-text: #222;
    --c-surface: #f4f6ea;       /* heller Fond der Inhaltssektionen */

    /* Trennlinien im Menü */
    --nav-hairline: rgb(255 255 255 / 0.35);
    --nav-hairline-soft: rgb(255 255 255 / 0.15);

    /* Maße */
    --header-h: 110px;          /* Höhe der Menüleiste (Desktop) */
    --header-h-mobile: 68px;    /* Kopfzeile mobil: Brand-Padding (2×0.5rem) + Wappen (46px breit → ~52px hoch). Bei Änderung dort mitziehen! */
    --brand-overlap: 46px;      /* Überstand des Logo-Blocks ins Hero */
    --tap-target: 44px;         /* Mindestgröße interaktiver Flächen */

    /* Sticky-Shrink-Kopfzeile: .site-header.is-scrolled schaltet --header-h /
       --header-h-mobile lokal auf diese Kompaktwerte um (Scoping nur im
       Header-Teilbaum — .hero rechnet weiter mit den vollen Werten) */
    --header-h-scrolled: 72px;         /* kompakte Menüleiste (Desktop) */
    --header-h-mobile-scrolled: 56px;  /* obere Schranke mobil; real ~53px (2×0.25rem Padding + Wappen 40px breit → ~45px hoch) */
    --header-scroll-threshold: 48px;   /* Scroll-Offset, ab dem geschrumpft wird (= Höhe der Messlatte aus header.js) */

    /* Animationsdauern. Achtung: --dur-panel und --dur-mega stecken
       jeweils AUCH im visibility-Delay der zugehörigen Transition —
       bei Änderung bleibt die Kopplung über den Token erhalten. */
    --dur-micro: 0.15s;         /* Hover-Farbwechsel */
    --dur-arrow: 0.18s;         /* Pfeil der Untermenü-Links */
    --dur-chevron: 0.2s;        /* Chevron-Rotation mobil */
    --dur-bar: 0.22s;           /* grüner Balken unterm Menüpunkt */
    --dur-burger: 0.25s;        /* Burger-Icon ⇄ X */
    --dur-header: 0.3s;         /* Sticky-Kopfzeile: Wechsel voll ⇄ kompakt (steckt auch im visibility-Delay des Slogans) */
    --dur-mega-fade: 0.28s;     /* Fade des Mega-Panels */
    --dur-panel: 0.3s;          /* Akkordeon mobil (grid-rows) */
    --dur-mega: 0.32s;          /* Vorhang (clip-path) des Mega-Panels */
    --dur-slide: 1s;            /* Crossfade der Hero-Slideshow (steckt auch im visibility-Delay) */

    /* Schriften */
    --font-sans: system-ui, "Segoe UI", Arial, sans-serif;
    --font-script: "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;
    /* Überschriften: DIN-1451-artig (Bahnschrift = Windows-DIN, Fallbacks je Plattform) */
    --font-title: "Bahnschrift", "DIN Alternate", "Franklin Gothic Medium", "Arial Narrow", system-ui, sans-serif;
    /* Wortmarke im Logo: humanistisch, rundere Formen (Nutzerwahl 21.07.2026 per Vergleich) */
    --font-logo: "Candara", "Corbel", "Optima", "Segoe UI", system-ui, sans-serif;
}

/* ---------- Basis ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Sticky-Shrink: Browser-Scroll-Anchoring würde beim Schrumpfen der
       Kopfzeile den Scrollwert zurückkorrigieren → Endlos-Toggle an der
       Schwelle. Unkritisch abschaltbar: alle Bilder haben width/height,
       es gibt keine nachladenden Layout-Shift-Quellen. */
    overflow-anchor: none;
    /* Ankerziele (z. B. Skip-Link → #inhalt) nie unter der Sticky-Kopfzeile
       verstecken — bewusst die vollen :root-Höhen, nicht die kompakten */
    scroll-padding-block-start: var(--header-h-mobile);

    /* Ankersprünge (z. B. „Nach oben" im Footer) gleiten sanft — außer der
       Nutzer wünscht reduzierte Bewegung */
    @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
    }

    /* [breakpoint-desktop] */
    @media (min-width: 1400px) {
        scroll-padding-block-start: var(--header-h);
    }
}

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--c-text);
    background: #fff;
    line-height: 1.5;
}

img {
    max-width: 100%;
    height: auto;
}

:focus-visible {
    outline: 3px solid var(--c-primary);
    outline-offset: 2px;
}

/* Skip-Link-Ziel: Fokusring auf dem nicht-interaktiven main unterdrücken */
#inhalt:focus-visible {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        animation-duration: 0.01ms !important;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    inset-block-start: 0;
    z-index: 100;
    background: #fff;
    color: var(--c-primary);
    font-weight: 700;
    padding: 0.75rem 1.25rem;
    text-decoration: none;

    &:focus {
        inset-inline-start: 0;
    }
}

/* ============================================================
   Kopfbereich
   ============================================================ */

/* Unsichtbare Scroll-Messlatte (fügt header.js an den Body-Anfang ein):
   verlässt sie den Viewport, wird .site-header kompakt (.is-scrolled) */
.header-sentinel {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 1px;
    height: var(--header-scroll-threshold);
    pointer-events: none;
}

.site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: #fff;
    /* Startwert mit Alpha 0, damit der Schatten weich einblenden kann */
    box-shadow: 0 6px 18px rgb(0 0 0 / 0);
    transition: box-shadow var(--dur-header) ease;

    /* Kompakt-Zustand: Höhen-Tokens NUR im Header-Teilbaum umschalten —
       Brand, Menüleiste, Suche, Mega-Panel-Offset und Panel-max-height
       folgen automatisch; .hero (Sibling) behält die vollen Werte,
       die Hero-Höhe bleibt also beim Scrollen exakt stehen */
    &.is-scrolled {
        --header-h: var(--header-h-scrolled);
        --header-h-mobile: var(--header-h-mobile-scrolled);
        --brand-overlap: 0px;
        box-shadow: 0 6px 18px rgb(0 0 0 / 0.15);
    }

    /* [breakpoint-desktop] 3-Zonen-Grid wie Vorlage; Logo- und Suchspalte
       wachsen mit dem Viewport mit, damit die Menüleiste am unteren
       Desktop-Rand nicht gequetscht wird */
    @media (min-width: 1400px) {
        display: grid;
        grid-template-columns: minmax(280px, min(21vw, 400px)) minmax(0, 1fr) minmax(250px, min(20vw, 380px));
        grid-template-rows: var(--header-h);
        align-items: start;
        background: transparent;
        transition: box-shadow var(--dur-header) ease, grid-template-rows var(--dur-header) ease;
    }
}

/* ---------- Logo-Block ---------- */
.brand {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    flex: 1 1 auto;
    min-width: 0; /* Wortmarke darf schrumpfen, statt den Menü-Button umzubrechen */
    transition: padding var(--dur-header) ease;

    /* Kompakt (mobil): flachere Leiste — ergibt real ~53px Kopfzeilenhöhe */
    .site-header.is-scrolled & {
        padding-block: 0.25rem;
    }

    /* [breakpoint-desktop] */
    @media (min-width: 1400px) {
        position: relative;
        z-index: 2; /* liegt wie in der Vorlage über dem Mega-Panel */
        flex-direction: column;
        justify-content: center;
        gap: 0.4rem;
        width: 100%;
        height: calc(var(--header-h) + var(--brand-overlap));
        padding-block: 0.75rem 2.5rem;
        padding-inline: 1.75rem;
        background: #fff;
        /* Unterkante: sanft geschwungener Bogen wie in der Vorlage;
           die gerade Diagonale bleibt als Fallback für Browser ohne shape() */
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), 0 100%);
        clip-path: shape(from 0 0, line to 100% 0, line to 100% calc(100% - 34px), curve to 0 100% with 55% 100%);
        transition: height var(--dur-header) ease, padding var(--dur-header) ease,
            gap var(--dur-header) ease, clip-path var(--dur-header) ease;

        /* Kompakt (Desktop): kein Überhang, flache Unterkante. WICHTIG:
           gleiche Kommandostruktur wie oben — shape()/polygon → none wäre
           nicht animierbar, degenerierte Kurve/Punkte interpolieren weich */
        .site-header.is-scrolled & {
            padding-block: 0.5rem 0.6rem;
            gap: 0;
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0px), 0 100%);
            clip-path: shape(from 0 0, line to 100% 0, line to 100% calc(100% - 0px), curve to 0 100% with 55% 100%);
        }
    }
}

.brand__link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    flex: 1;
    min-width: 0;

    /* [breakpoint-desktop] */
    @media (min-width: 1400px) {
        width: 100%;
    }
}

.brand__wappen {
    width: 46px;
    transition: width var(--dur-header) ease;

    /* Kompakt (mobil) */
    .site-header.is-scrolled & {
        width: 40px;
    }

    /* [breakpoint-desktop] */
    @media (min-width: 1400px) {
        width: 72px;

        /* Kompakt (Desktop) */
        .site-header.is-scrolled & {
            width: 44px;
        }
    }
}

/* Wortmarke als skalierendes Gesamtbild: textLength sperrt beide Zeilen
   auf exakt gleiche Breite — plattformunabhängig, egal welcher Font greift.
   aspect-ratio ist nötig, weil ein <svg> ohne width/height-Attribute
   sonst keine intrinsische Größe hat und kollabiert. */
.brand__wordmark {
    flex: 1;
    min-width: 0;
    max-width: 165px;
    height: auto;
    aspect-ratio: 240 / 58;
    transition: max-width var(--dur-header) ease;

    /* [breakpoint-desktop] */
    @media (min-width: 1400px) {
        /* endlicher Wert (nicht none): none → <Länge> wäre nicht animierbar.
           230px begrenzt die Wortmarke auch auf breiten Desktops (Nutzerwunsch
           „etwas kleiner", 21.07.2026) */
        max-width: 230px;

        /* Kompakt (Desktop) */
        .site-header.is-scrolled & {
            max-width: 170px;
        }
    }
}

.brand__wordmark-sub {
    font-family: var(--font-logo);
    font-size: 13px; /* viewBox-Einheiten */
    font-weight: 700;
    fill: var(--c-primary);
}

.brand__wordmark-main {
    font-family: var(--font-logo);
    font-size: 46px; /* viewBox-Einheiten */
    font-weight: 700;
    fill: var(--c-primary-dark);
}

.brand__slogan {
    display: none;
    margin: 0;
    font-family: var(--font-script);
    font-size: clamp(0.8rem, 0.05rem + 0.8vw, 1.05rem);
    white-space: nowrap;
    color: var(--c-primary);

    /* [breakpoint-desktop] */
    @media (min-width: 1400px) {
        display: block;
        /* Großzügige Zeilenhöhe: Segoe Script ragt über die normale Zeilenbox
           hinaus — ohne die Extra-Luft schneidet overflow:hidden die
           Unterlängen ab. height:1lh (= line-height) bleibt dadurch
           animierbar UND beschnittfrei. */
        line-height: 1.9;
        height: 1lh;
        overflow: hidden;
        transition: height var(--dur-header) ease, opacity var(--dur-header) ease, visibility 0s;

        /* Kompakt (Desktop): ausblenden und aus dem Accessibility-Tree nehmen;
           visibility kippt erst NACH dem Ausblenden (Delay), beim Einblenden sofort */
        .site-header.is-scrolled & {
            height: 0;
            opacity: 0;
            visibility: hidden;
            transition: height var(--dur-header) ease, opacity var(--dur-header) ease,
                visibility 0s linear var(--dur-header);
        }
    }
}

/* ---------- Burger-Button (nur mobil sichtbar): dezenter Icon-Button,
   Accessible Name „Menü" liegt im visually-hidden-Span ---------- */
.nav-toggle {
    display: inline-grid;
    place-items: center;
    margin-inline: auto 1rem;
    width: var(--tap-target);
    height: var(--tap-target);
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--c-primary);
    cursor: pointer;
    transition: background-color var(--dur-micro) ease;

    &:hover {
        background: color-mix(in srgb, var(--c-primary) 10%, transparent);
    }

    /* [breakpoint-desktop] display:none ist zugleich die Moduserkennung
       von nav.js — hier niemals einen anderen Wert verwenden */
    @media (min-width: 1400px) {
        display: none;
    }
}

.nav-toggle__icon {
    display: block;
    position: relative;
    width: 22px;
    height: 2px;
    background: currentColor;
    transition: background-color var(--dur-burger) ease;

    &::before,
    &::after {
        content: "";
        position: absolute;
        left: 0;
        width: 22px;
        height: 2px;
        background: currentColor;
        transition: top var(--dur-burger) ease, rotate var(--dur-burger) ease;
    }

    &::before { top: -7px; }
    &::after { top: 7px; }

    /* Offenes Panel → X. Zustand hängt am aria-expanded, das nav.js ohnehin
       pflegt. transparent statt visibility: das Alpha bleibt auch im
       Windows-Kontrastmodus erhalten, der Mittelbalken verschwindet dort mit */
    .nav-toggle[aria-expanded="true"] & {
        background-color: transparent;

        &::before {
            top: 0;
            rotate: 45deg;
        }

        &::after {
            top: 0;
            rotate: -45deg;
        }
    }

    /* Windows-Kontrastmodus: currentColor-Balken würden sonst verschwinden */
    @media (forced-colors: active) {
        &,
        &::before,
        &::after {
            background: ButtonText;
        }
    }
}

/* ---------- Aufklapp-Panel mit Menü + Suche (mobil) ----------
   Liegt als Overlay ÜBER dem Hero (absolut unter der Kopfzeile),
   statt den Seiteninhalt nach unten zu schieben; gleitet sanft ein.
   Geschlossen via visibility → auch aus der Tab-Reihenfolge raus. */
.header-panel {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    display: block;
    visibility: hidden;
    opacity: 0;
    translate: 0 -0.5rem;
    max-height: calc(100dvh - var(--header-h-mobile));
    overflow-y: auto;
    box-shadow: 0 12px 24px rgb(0 0 0 / 0.25);
    transition: opacity var(--dur-panel) ease, translate var(--dur-panel) ease, visibility 0s linear var(--dur-panel);

    &.is-open {
        visibility: visible;
        opacity: 1;
        translate: 0 0;
        transition: opacity var(--dur-panel) ease, translate var(--dur-panel) ease, visibility 0s;
    }

    /* [breakpoint-desktop] Panel löst sich auf, Nav + Suche werden Grid-Zellen.
       visibility MUSS hier explizit auf visible, weil es vererbt wird und der
       display:contents-Knoten sonst Nav + Suche unsichtbar machen würde. */
    @media (min-width: 1400px) {
        display: contents;
        visibility: visible;
    }
}

/* ---------- Hauptmenü ---------- */
.main-nav {
    background: var(--c-primary);

    /* [breakpoint-desktop] */
    @media (min-width: 1400px) {
        height: var(--header-h);
        transition: height var(--dur-header) ease;
    }
}

.main-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;

    > li + li {
        border-block-start: 1px solid var(--nav-hairline);
    }

    /* [breakpoint-desktop] */
    @media (min-width: 1400px) {
        flex-direction: row;
        height: 100%;

        > li + li {
            border-block-start: 0;
            border-inline-start: 1px solid var(--nav-hairline);
        }
    }
}

.main-nav__item {
    display: flex;
    flex-wrap: wrap;

    /* [breakpoint-desktop] */
    @media (min-width: 1400px) {
        flex: 1 1 0;
        min-width: 0;
    }
}

.main-nav__link {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: var(--tap-target);
    padding-block: 0.9rem;
    padding-inline: 1.25rem;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.25;
    transition: background-color var(--dur-micro) ease;

    &:hover,
    &[aria-current="page"] {
        background: var(--c-primary-dark);
    }

    &:focus-visible {
        outline-color: #fff;
        outline-offset: -4px;
    }

    /* Windows-Kontrastmodus: Hintergrund-Markierung entfällt dort */
    @media (forced-colors: active) {
        &[aria-current="page"] {
            text-decoration: underline;
        }
    }

    /* [breakpoint-desktop] */
    @media (min-width: 1400px) {
        min-width: 0;
        position: relative;
        justify-content: center;
        text-align: center;
        padding: 0.5rem 0.75rem;
        font-size: clamp(0.8125rem, 0.55rem + 0.45vw, 1rem);
        overflow-wrap: break-word;
        hyphens: auto;

        /* Dynamischer Balken: wächst beim Hover/Fokus von links */
        &::after {
            content: "";
            position: absolute;
            inset-inline: 0;
            inset-block-end: 0;
            height: 6px;
            background: var(--c-accent);
            transform: scaleX(0);
            transform-origin: left center;
            transition: transform var(--dur-bar) ease;

            @media (forced-colors: active) {
                background: Highlight;
            }
        }

        .main-nav__item:hover > &::after,
        .main-nav__item.is-open > &::after,
        &:focus-visible::after {
            transform: scaleX(1);
        }
    }
}

/* ---------- Untermenü-Toggle (nur mobil; Desktop öffnet per Hover/Fokus) ---------- */
.submenu-toggle {
    width: 56px;
    min-height: var(--tap-target);
    border: 0;
    border-inline-start: 1px solid var(--nav-hairline);
    background: transparent;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &:focus-visible {
        outline-color: #fff;
        outline-offset: -4px;
    }

    svg {
        transition: transform var(--dur-chevron) ease;
    }

    .main-nav__item.is-open > & svg {
        transform: rotate(180deg);
    }

    /* [breakpoint-desktop] */
    @media (min-width: 1400px) {
        display: none;
    }
}

/* ---------- Untermenü ----------
   Mobil: eingerückte Liste auf dunklerem Blau, gleitet per
   0fr→1fr-Grid-Animation auf. Desktop: vollbreites Mega-Panel,
   öffnet als sanfter Vorhang (Fade + clip-path von oben).
   Geschlossene Panels sind immer gerendert und werden über visibility
   unsichtbar UND unfokussierbar gehalten — nicht auf display:none umstellen. */
.submenu {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    flex-basis: 100%;
    background: var(--c-primary-dark);
    transition: grid-template-rows var(--dur-panel) ease, visibility 0s linear var(--dur-panel);

    .main-nav__item.is-open > & {
        grid-template-rows: 1fr;
        visibility: visible;
        transition: grid-template-rows var(--dur-panel) ease, visibility 0s;
    }

    /* [breakpoint-desktop] */
    @media (min-width: 1400px) {
        position: absolute;
        inset-inline: 0;
        inset-block-start: var(--header-h);
        z-index: 1;
        display: block;
        opacity: 0;
        clip-path: inset(0 0 100% 0);
        flex-basis: auto;
        background: rgb(255 255 255 / 0.93);
        backdrop-filter: blur(6px);
        box-shadow: 0 18px 30px rgb(0 0 0 / 0.18);
        padding-block: 4.5rem 2.75rem;
        padding-inline: clamp(1.5rem, 5vw, 6rem);
        transition: opacity var(--dur-mega-fade) ease, clip-path var(--dur-mega) ease,
            inset-block-start var(--dur-header) ease, visibility 0s linear var(--dur-mega);

        .main-nav__item.is-open > & {
            opacity: 1;
            clip-path: inset(0 0 0 0);
            transition: opacity var(--dur-mega-fade) ease, clip-path var(--dur-mega) ease,
                inset-block-start var(--dur-header) ease, visibility 0s;
        }
    }
}

.submenu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    min-height: 0;
    overflow: hidden;

    /* Luft über dem ersten/unter dem letzten Punkt als Margin der Kinder,
       NICHT als Padding der Liste: Padding ließe die geschlossene 0fr-Liste
       8px hoch bleiben — sichtbar als Streifen unter dem aktiven Punkt */
    > li:first-child {
        margin-block-start: 0.25rem;
    }

    > li:last-child {
        margin-block-end: 0.25rem;
    }

    li + li {
        border-block-start: 1px solid var(--nav-hairline-soft);
    }

    a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        min-height: var(--tap-target);
        padding-block: 0.6rem;
        padding-inline: 2rem 1.25rem;
        color: #fff;
        text-decoration: none;
        font-weight: 600;

        &::after {
            content: "\2192";
            transition: transform var(--dur-arrow) ease;
        }

        &:focus-visible {
            outline-color: #fff;
            outline-offset: -4px;
        }
    }

    /* [breakpoint-desktop] */
    @media (min-width: 1400px) {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        column-gap: clamp(1.5rem, 4vw, 4.5rem);
        row-gap: 1.35rem;
        padding: 0;

        > li:first-child {
            margin-block-start: 0;
        }

        > li:last-child {
            margin-block-end: 0;
        }

        li + li {
            border-block-start: 0;
        }

        a {
            min-height: 0;
            padding-block: 0.4rem 0.8rem;
            padding-inline: 0;
            color: #232323;
            font-size: 1.0625rem;
            border-block-end: 1px solid #cfcfcf;
            transition: color var(--dur-micro) ease;

            &::after {
                color: #6f8f1f;
                font-weight: 700;
            }

            &:hover {
                color: var(--c-primary);
                border-color: var(--c-primary);
            }

            &:hover::after {
                transform: translateX(4px);
            }

            &:focus-visible {
                outline-color: var(--c-primary);
                outline-offset: 2px;
            }
        }
    }
}

/* ---------- Suchfeld ---------- */
.site-search {
    display: block;
    background: var(--c-accent);
    padding: 0.5rem 1rem;

    form {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }

    input {
        flex: 1;
        min-width: 0;
        min-height: var(--tap-target);
        border: 0;
        background: transparent;
        font: inherit;
        font-weight: 700;
        font-size: 1.0625rem;
        color: var(--c-on-accent);

        &::placeholder {
            color: var(--c-on-accent);
            opacity: 1;
        }

        &:focus-visible {
            outline-color: var(--c-on-accent);
        }
    }

    button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--tap-target);
        min-height: var(--tap-target);
        border: 0;
        background: transparent;
        color: var(--c-on-accent);
        cursor: pointer;

        &:focus-visible {
            outline-color: var(--c-on-accent);
        }
    }

    /* [breakpoint-desktop] */
    @media (min-width: 1400px) {
        display: flex;
        align-items: center;
        height: var(--header-h);
        padding-block: 0;
        padding-inline: 1.5rem;
        transition: height var(--dur-header) ease;
    }
}

/* ============================================================
   Hero („Superview"): füllt den Viewport immer exakt bis zur
   Unterkante — Höhe = Viewport minus Kopfzeile. dvh berücksichtigt
   ein-/ausblendende Browserleisten auf Mobilgeräten (vh = Fallback).
   Der Himmel-Verlauf bleibt als Platzhalter, bis das Bild geladen ist.
   ============================================================ */
.hero {
    position: relative;
    z-index: 1;
    height: calc(100vh - var(--header-h-mobile));
    height: calc(100dvh - var(--header-h-mobile));
    /* KEIN overflow:hidden hier — die Kontakt-Box ragt bewusst über die
       Unterkante hinaus; die Bilder clippt stattdessen .hero__slides */
    background: linear-gradient(to bottom, #5f9ad8 0%, #8db9e6 45%, #c9def4 100%);

    /* [breakpoint-desktop] */
    @media (min-width: 1400px) {
        height: calc(100vh - var(--header-h));
        height: calc(100dvh - var(--header-h));
    }
}

.hero__slides,
.hero__slide {
    position: absolute;
    inset: 0;
}

.hero__slides {
    overflow: hidden;
}

/* Crossfade; inaktive Folien via visibility auch aus dem Accessibility-Tree */
.hero__slide {
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--dur-slide) ease, visibility 0s linear var(--dur-slide);

    &.is-active {
        visibility: visible;
        opacity: 1;
        transition: opacity var(--dur-slide) ease, visibility 0s;
    }
}

.hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Schnellzugriffe (BITV-Pflichtangebote): in JEDER Viewport-Größe sichtbar —
   mobil als 2×2-Raster gleich breiter Chips, Desktop als Reihe rechts oben.
   Die Kontakt-Box dagegen ist nur im Desktop-Modus da (Nutzerentscheidung). */
.hero__quicklinks {
    /* Chip-Farbtokens (Austauschpunkt für die Farbvariante): dunkles Glas.
       Kontrast-Wache WCAG 1.4.3: Alpha des Fonds nie unter 0.75 senken,
       sonst reißt 4.5:1 für weiße Schrift über hellem Himmel */
    --chip-bg: rgb(15 20 30 / 0.88); /* Fallback ohne backdrop-filter: fast deckend */
    --chip-fg: #fff;
    --chip-border: rgb(255 255 255 / 0.25);
    --chip-bg-hover: var(--c-accent);

    position: absolute;
    z-index: 2;
    inset-block-start: 0.75rem;
    inset-inline: 0.75rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    /* Tablet-Breiten: Raster bleibt kompakt rechts statt bildschirmbreit */
    max-width: 30rem;
    margin-inline-start: auto;

    /* Mit Blur darf der Fond etwas transparenter werden */
    @supports (backdrop-filter: blur(1px)) {
        --chip-bg: rgb(15 20 30 / 0.78);
    }

    a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        min-height: 40px;
        padding: 0.4rem clamp(0.5rem, 2.5vw, 0.9rem);
        border: 1px solid var(--chip-border);
        border-radius: 999px;
        background: var(--chip-bg);
        color: var(--chip-fg);
        font-weight: 600;
        font-size: 0.85rem;
        text-decoration: none;
        box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
        transition: background-color var(--dur-micro) ease, color var(--dur-micro) ease;

        @supports (backdrop-filter: blur(1px)) {
            backdrop-filter: blur(8px) saturate(1.4);
        }

        svg {
            width: 16px;
            height: 16px;
            flex: none;
        }

        &:hover {
            background: var(--chip-bg-hover);
            color: var(--c-on-accent);
        }

        /* Kontrastmodus: opaker Fond — das Alpha der Autorenfarbe bliebe
           sonst erhalten und das Foto schiene durch den Chip */
        @media (forced-colors: active) {
            background: Canvas;
            border-color: ButtonText;
            backdrop-filter: none;
        }
    }

    /* [breakpoint-desktop] einzeilige Reihe rechts oben */
    @media (min-width: 1400px) {
        inset-block-start: 1.25rem;
        inset-inline: auto 1.5rem;
        display: flex;
        flex-wrap: nowrap;
        gap: 0.6rem;
        max-width: none;

        a {
            justify-content: flex-start;
        }
    }
}

.hero__contact {
    display: none;

    /* [breakpoint-desktop] Box „angeflanscht": bündig rechts, ragt unten
       über die Hero-Kante hinaus und schließt abgerundet ab (wie Vorlage) */
    @media (min-width: 1400px) {
        display: block;
        position: absolute;
        z-index: 2;
        inset-block-start: 5.5rem;
        inset-inline-end: 0;
        width: min(400px, 30vw);
        min-block-size: calc(100% - 5.5rem + 6rem);
        padding: 1.75rem 2rem 2.5rem;
        background: var(--c-primary);
        border: 2px solid var(--c-accent);
        border-inline-end: 0;
        /* Unterkante wie Vorlage: links kleine Rundung, rechts großer
           asymmetrischer Schwung hinauf zur Viewport-Kante (elliptischer Radius) */
        border-end-start-radius: 3rem;
        border-end-end-radius: 55% 7rem;
        box-shadow: 0 14px 28px rgb(0 0 0 / 0.22);
        color: #fff;

        h2 {
            margin: 0 0 0.75rem;
            font-size: 1.4rem;
        }

        address {
            font-style: normal;
        }

        a {
            color: #fff;

            &:focus-visible {
                outline-color: #fff;
            }
        }

        hr {
            border: 0;
            border-block-start: 1px solid rgb(255 255 255 / 0.4);
            margin-block: 1.25rem;
        }
    }
}

.hero__contact-emergency {
    margin: 0;
    font-size: 1.35rem;
}

/* Social-Links in der Kontakt-Box: untereinander, Icon + Name,
   Hover färbt Icon und Text akzentgrün (Icon nutzt currentColor) */
.hero__contact-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;

    a {
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        min-height: 2.75rem;
        font-weight: 600;
        text-decoration: none;
        transition: color var(--dur-micro) ease;

        svg {
            flex: none;
        }

        &:hover {
            color: var(--c-accent);
        }
    }
}

/* ============================================================
   Inhaltssektionen unter dem Hero
   ============================================================ */
.section-heading {
    margin: 0 0 2.5rem;
    text-align: center;
    text-transform: uppercase;
    color: var(--c-primary);
    font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem);
    letter-spacing: 0.04em;

    /* grüner Akzentstrich wie in der Vorlage */
    &::after {
        content: "";
        display: block;
        width: 64px;
        height: 4px;
        margin: 0.75rem auto 0;
        background: var(--c-accent);
    }
}

/* Schnellzugriff: moderne Kachel-Leiste (gleiche Formensprache wie .news) */
.quick-access {
    background: #fff;
    padding-block: 3rem;
    padding-inline: 1.25rem;

    /* [breakpoint-desktop] Platz für den Überhang der Kontakt-Box lassen */
    @media (min-width: 1400px) {
        padding-block-start: 7.5rem;
    }
}

.quick-access__list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 75rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.25rem;

    li {
        display: flex;
    }
}

/* Gradient-Action-Cards: Glas-Icon-Chip oben, Label unten, Eck-Pfeil ↗ */
.quick-access__card {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    min-height: 155px;
    padding: 1.3rem;
    border-radius: 1.5rem;
    background: linear-gradient(140deg, #3a71c9 0%, var(--c-primary) 45%, var(--c-primary-dark) 100%);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    box-shadow: 0 6px 18px rgb(35 75 137 / 0.25);
    transition: translate var(--dur-chevron) ease, box-shadow var(--dur-chevron) ease;

    &:hover {
        translate: 0 -4px;
        box-shadow: 0 14px 30px rgb(35 75 137 / 0.4);

        .quick-access__arrow {
            translate: 3px -3px;
            background: var(--c-accent);
            color: #1d1d1d;
        }
    }
}

.quick-access__label {
    line-height: 1.25;
}

.quick-access__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 1rem;
    background: rgb(255 255 255 / 0.16);
    backdrop-filter: blur(4px);
    color: #fff;
}

.quick-access__arrow {
    position: absolute;
    inset-block-start: 1.1rem;
    inset-inline-end: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.16);
    transition: translate var(--dur-chevron) ease, background-color var(--dur-micro) ease, color var(--dur-micro) ease;
}

/* CTA-Karte („Mitglied werden"): Akzentgrün, dunkle Zeichen */
.quick-access__card--cta {
    background: linear-gradient(140deg, #d6e48b 0%, var(--c-accent) 50%, #aabf52 100%);
    color: #1d1d1d;
    box-shadow: 0 6px 18px rgb(140 160 60 / 0.35);

    .quick-access__icon,
    .quick-access__arrow {
        background: rgb(0 0 0 / 0.12);
        backdrop-filter: none;
        color: #1d1d1d;
    }

    &:hover {
        box-shadow: 0 14px 30px rgb(140 160 60 / 0.5);

        .quick-access__arrow {
            background: var(--c-primary);
            color: #fff;
        }
    }
}

/* Aktuelles: redaktionelles Layout — große Top-Meldung + Meldungsliste */
.news {
    background: var(--c-surface);
    padding-block: 5rem 6rem;
    padding-inline: 1.25rem;
}

.news__inner {
    max-width: 75rem;
    margin-inline: auto;
}

.news__header {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem 2rem;
    margin-block-end: 2.75rem;

    h2 {
        margin: 0;
        font-family: var(--font-title);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        line-height: 1;
        font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
        color: var(--c-primary);
    }
}

.news__kicker {
    flex-basis: 100%;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.8rem;
    font-weight: 700;
    color: #5d7717;
}

.news__all {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.3rem;
    border: 2px solid var(--c-primary);
    border-radius: 999px;
    color: var(--c-primary);
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--dur-micro) ease, color var(--dur-micro) ease;

    span {
        transition: translate var(--dur-chevron) ease;
    }

    &:hover {
        background: var(--c-primary);
        color: #fff;

        span {
            translate: 4px 0;
        }
    }
}

.news__layout {
    display: grid;
    gap: 2.5rem;

    @media (min-width: 900px) {
        grid-template-columns: 1.25fr 1fr;
        align-items: start;
    }
}

/* Große Top-Meldung */
.news-feature {
    a {
        display: block;
        color: var(--c-text);
        text-decoration: none;

        &:hover {
            img {
                scale: 1.04;
            }

            h3 {
                color: var(--c-primary);
            }

            .news-more span {
                translate: 4px 0;
            }
        }
    }

    h3 {
        margin: 1.25rem 0 0.5rem;
        font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem);
        line-height: 1.3;
        color: #1d1d1d;
        transition: color var(--dur-micro) ease;
    }

    p {
        margin: 0 0 0.85rem;
        max-width: 60ch;
    }
}

.news-feature__media {
    display: block;
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;

    img {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        transition: scale 0.45s ease;
    }
}

.news-badge {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    padding: 0.35rem 0.95rem;
    border-radius: 999px;
    background: var(--c-accent);
    color: #1d1d1d;
    font-size: 0.85rem;
    font-weight: 700;
}

.news-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    color: var(--c-primary);

    span {
        transition: translate var(--dur-chevron) ease;
    }
}

/* Kompakte Meldungsliste */
.news-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;

    a {
        display: grid;
        grid-template-columns: 110px 1fr;
        gap: 1.1rem;
        align-items: center;
        padding: 0.6rem;
        border-radius: 1rem;
        background: #fff;
        color: var(--c-text);
        text-decoration: none;
        box-shadow: 0 1px 4px rgb(0 0 0 / 0.06);
        transition: box-shadow var(--dur-chevron) ease, translate var(--dur-chevron) ease;

        &:hover {
            translate: 0 -2px;
            box-shadow: 0 8px 20px rgb(0 0 0 / 0.12);

            h3 {
                color: var(--c-primary);
            }
        }
    }

    img {
        display: block;
        width: 110px;
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: 0.75rem;
    }

    h3 {
        margin: 0.2rem 0 0;
        font-size: 1.05rem;
        line-height: 1.35;
        transition: color var(--dur-micro) ease;
    }
}

.news-list__date {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #5d7717;
}

/* ---------- Inhaltsseiten & Footer ---------- */
.page {
    max-width: 60rem;
    margin-inline: auto;
    padding: 2.5rem 1.25rem;

    h1,
    h2 {
        font-family: var(--font-title);
        line-height: 1.2;
        text-wrap: balance;
    }

    h1 {
        font-size: clamp(1.9rem, 4vw, 2.5rem);
        margin-block: 0 1.25rem;
    }

    h2 {
        font-size: clamp(1.3rem, 2.5vw, 1.6rem);
        margin-block: 2.25rem 0.75rem;
    }

    /* Lesbare Zeilenlänge für Fließtext, volle Breite bleibt Überschriften vorbehalten */
    p,
    ul,
    address {
        max-width: 65ch;
    }

    address {
        font-style: normal;
    }

    li + li {
        margin-block-start: 0.35rem;
    }
}

/* Hinweiskasten auf Inhaltsseiten (z. B. Notruf-Hinweis im Impressum) */
.page-note {
    padding: 0.85rem 1.1rem;
    background: var(--c-surface);
    border-inline-start: 4px solid var(--c-accent);
    border-start-end-radius: 0.75rem;
    border-end-end-radius: 0.75rem;
}

/* Footer: Notruf-Band, 4 Spalten (Marke / Kontakt / Platzhalter-Links /
   Pflicht-Links), Bottom-Bar. Spalten fließen ohne Media Query über
   auto-fit von 1 (mobil) bis 4 (Desktop). Die Spalte .site-footer__nav
   MUSS erhalten bleiben (BITV: Erklärung + Barriere melden von jeder
   Seite erreichbar, siehe CLAUDE.md). */
.site-footer {
    background: linear-gradient(160deg, var(--c-primary) 0%, var(--c-primary-dark) 70%);
    color: #fff;
    font-size: 0.95rem;

    a {
        color: #fff;

        &:focus-visible {
            outline-color: #fff;
        }
    }
}

.site-footer__emergency {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 0.4rem;
    margin: 0;
    padding: 0.6rem 1.25rem;
    background: var(--c-accent);
    color: var(--c-on-accent);
    text-align: center;
}

.site-footer__grid {
    max-width: 75rem;
    margin-inline: auto;
    padding: 2.75rem 1.25rem 2.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 2.25rem 2.5rem;

    address {
        font-style: normal;
        line-height: 1.7;
        margin-block-end: 0.4rem;
    }
}

.site-footer__brand {
    display: grid;
    gap: 0.9rem;
    justify-items: start;
    align-content: start;
}

.footer-wordmark {
    width: 180px;
    height: auto;
    aspect-ratio: 240 / 58;
}

.footer-wordmark__sub {
    font-family: var(--font-logo);
    font-size: 13px; /* viewBox-Einheiten */
    font-weight: 700;
    fill: rgb(255 255 255 / 0.85);
}

.footer-wordmark__main {
    font-family: var(--font-logo);
    font-size: 46px; /* viewBox-Einheiten */
    font-weight: 700;
    fill: #fff;
}

.site-footer__slogan {
    margin: 0;
    font-family: var(--font-script);
    font-size: 1rem;
    color: var(--c-accent);
}

.site-footer__heading {
    margin: 0 0 0.9rem;
    font-family: var(--font-title);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-accent);
}

.site-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;

    a {
        display: inline-flex;
        align-items: center;
        min-height: 2.5rem;
        text-decoration: underline;
        text-decoration-color: transparent;
        text-underline-offset: 0.2em;
        transition: color var(--dur-micro) ease, text-decoration-color var(--dur-micro) ease;

        &:hover {
            color: var(--c-accent);
            text-decoration-color: currentColor;
        }
    }
}

.site-footer__bottom {
    border-block-start: 1px solid var(--nav-hairline-soft);
}

.site-footer__bottom-inner {
    max-width: 75rem;
    margin-inline: auto;
    padding: 0.9rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem 1.5rem;

    p {
        margin: 0;
    }
}

.site-footer__social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.6rem;

    a {
        display: grid;
        place-items: center;
        width: var(--tap-target);
        height: var(--tap-target);
        border: 1px solid var(--nav-hairline);
        border-radius: 50%;
        transition: background-color var(--dur-micro) ease, color var(--dur-micro) ease,
            border-color var(--dur-micro) ease;

        &:hover {
            background: var(--c-accent);
            border-color: transparent;
            color: var(--c-on-accent);
        }
    }
}

.site-footer__top {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: var(--tap-target);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--dur-micro) ease;

    &:hover {
        color: var(--c-accent);
    }
}