/* ══════════════════════════════════════════
   DPSG DV Limburg — Editorial, DPSG-CD-basiert
   ──────────────────────────────────────────
   :root = HELLES Design (Default).
   Dunkles Design: [data-theme="dunkel"] in themes.css.
   Farben nach DPSG CD: Blau #003056 (Marke/Struktur),
   Rot #810A1A→web (CTA), Gelb/Cyan als warme Akzente.
   ══════════════════════════════════════════ */

@import url('themes.css?v=134');
@import url('custom-icons.css?v=120');

/* ── A11y-Basics: Skip-Link + Screenreader-Utility ──────────
   Der Skip-Link ist das erste fokussierbare Element (components.js setzt ihn
   vor den <header>), springt zu <main id="inhalt"> und ist nur bei Tastatur-
   Fokus sichtbar. Farben aus var(--text)/var(--bg) → garantiert kontrastreich
   in hell UND dunkel. */
.skip-link {
    position: fixed; top: -60px; left: 12px; z-index: 1000;
    background: var(--text); color: var(--bg);
    padding: 10px 16px; border-radius: var(--radius-sm);
    font-family: var(--font-ui); font-weight: 700; text-decoration: none;
    transition: top .18s ease;
}
.skip-link:focus { top: 12px; }
main:focus { outline: none; }   /* programmatischer Sprungfokus → kein sichtbarer Ring */
.sr-only {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

:root {
    color-scheme: light;          /* native Controls (Selects etc.) hell rendern */
    --bg: #F5F5F1;                /* neutrales Papierweiß (zwischen warm und kühl) */
    --bg-mid: #ECEDE7;            /* Karten / Flächen */
    --bg-subtle: #DFE1D8;
    --bg-card: #F1F1EC;
    --primary: #003056;           /* DPSG-Blau — Marke, Struktur, Links */
    --secondary: #135E96;         /* helleres Blau — Hover/Verlauf */
    --cta: #A8112A;               /* DPSG-Rot (webtauglich) — Buttons, Signale */
    --cta-hover: #C41834;
    /* Rot als TEXT, getrennt vom Button-Rot. Im Hellen dasselbe; im Dunkeln
       muss es aufgehellt werden, siehe themes.css. Warum getrennt: weiss auf
       --cta ergibt 7,56:1, der Button ist also korrekt — dieselbe Farbe als
       Text auf dunklem Grund kam nur auf 2,39:1. Ein Wert kann nicht beides. */
    --cta-text: var(--cta);
    --highlight: #8F6400;         /* Honig-Gold (aus DPSG-Gelb) — warme Akzente, AA-fest auf hellem Grund */
    --accent-cyan: #0087C4;       /* DPSG-Cyan (abgedunkelt) — Info-Akzente */
    --text: #14222E;
    --text-sub: #41566A;
    --text-muted: #5C7184;
    --radius: 3px;
    --radius-lg: 14px;
    --radius-sm: 6px;
    --surface: var(--bg-mid);
    --card-border: rgba(20,34,46,.13);
    /* Footer folgt dem Modus: im hellen Design eine helle Flaeche, deutlich
       genug vom Seitenhintergrund abgesetzt (1,21 Helligkeitsverhaeltnis).
       Die Schriftfarben liegen als eigene Tokens daneben, weil sie im dunklen
       Footer aus Weiss-Abstufungen bestehen und im hellen aus den Textfarben —
       eine Umrechnung gibt es dafuer nicht. */
    --bg-footer: #DFE1D8;
    --ft-head:   var(--text);        /* Spaltentitel: Struktur, am dunkelsten */
    --ft-link:   var(--text-sub);    /* Links + Fliesstext (5,75 auf der Flaeche) */
    --ft-border: var(--card-border);
    --ft-lilie:  rgba(20,34,46,.05); /* Wasserzeichen-Lilie */

    /* Hover und Auswahl von Links — einheitlich Rot, in beiden Modi. Vorher war
       das Honig-Gold, das im hellen Design zu Braun abgedunkelt werden musste,
       und der Hover in Markenblau war vom Grundton der Links kaum zu
       unterscheiden. Rot ist unverwechselbar und ist die Signalfarbe der Marke.
       Im dunklen Modus reicht das tiefe #A8112A nicht (2,4 auf der Seite),
       deshalb dort derselbe Farbton aufgehellt — siehe themes.css. */
    --link-hover: var(--cta);

    /* Lesbarkeits-Overlay der Galerie: im hellen Design ein Creme-Schleier mit
       dunkler Schrift, im dunklen ein neutral dunkler mit weisser.
       --gal-overlay haelt den GANZEN Verlauf, weil sich zwischen den Modi nicht
       nur die Farbe unterscheidet, sondern auch die Deckungsstufen: hell muss
       der Schleier deutlich kraeftiger sein, damit dunkle Schrift auf einem
       hellen Foto (Wiese, Himmel) noch traegt. Unten laeuft er in die
       Footer-Flaeche aus, oben bleibt ein Hauch, damit das Foto Foto bleibt. */
    --gal-scrim:  245,245,241;
    --gal-fg:     var(--text);
    --gal-shadow: 0 0 10px rgba(255,255,255,.92), 0 2px 22px rgba(255,255,255,.72);
    --gal-overlay:
        /* Band an der Unterkante: Uebergang in die Footer-Flaeche, und
           Mindest-Deckung, falls eine Bildunterschrift laenger wird. */
        linear-gradient(to top,
            var(--bg-footer) 0%,
            rgba(245,245,241,.66) 14%,
            rgba(245,245,241,.32) 30%,
            rgba(245,245,241,0)   46%),
        /* Hauptschleier aus der unteren linken Ecke — nur dort steht Schrift.
           Radial und in Prozent der Box, damit die Form bei jeder Fenstergroesse
           gleich zum Text passt (ein schraeger linear-gradient kippt mit dem
           Seitenverhaeltnis weg: bei 1024px lag die Deckung am Text nur noch
           bei 13%). Nachgerechnet ueber sechs Breiten: am Text mindestens 58%
           Deckung (Kontrast 4,98 auf einem schwarzen Foto), rechts und oben
           bleibt das Bild mit 0-10% praktisch unangetastet. */
        radial-gradient(170% 155% at 0% 100%,
            rgba(245,245,241,.90) 0%,
            rgba(245,245,241,.70) 26%,
            rgba(245,245,241,.18) 48%,
            rgba(245,245,241,0)   66%);
    --sh: 0 2px 20px rgba(15,30,45,0.10);
    --overlay-rgb: 0,32,58;       /* Navy-Overlay auf Fotos (Hero, Galerie, Strips) */
    --hbg: 245,245,241;           /* Header-BG als R,G,B für rgba() */

    /* AK- & Stufenfarben (nur in Stufen-/AK-Kontexten verwenden!)
       Im hellen Modus leicht abgedunkelt für Lesbarkeit;
       Original-Töne im Dunkel-Theme. */
    /* Stufen-Navigation (.stufe-nav, .stufe-mini): kraeftige Stufentoene fuer
       Rahmen, Lilie und gefuellte Kachel. Bewusst getrennt von den --ak-*-Toenen:
       die sind fuer TEXT abgedunkelt, hier geht es um Deko-Flaechen.
       Leitende: sattes Gold statt pales Gelb — abgedunkeltes Gelb wird oliv, und
       weisse Schrift auf der gefuellten Kachel erreichte nur 3,04 (AA verfehlt);
       mit Gold sind es 5,62. */
    /* Biber: das offizielle Stufen-Weiss bleibt der LILIE. Als Flaechenfarbe war
       es unbrauchbar — gemischt ergab es Grau (weisse Schrift auf der gefuellten
       Kachel nur 2,14, Rahmen 1,83 = fast unsichtbar) und Grau liest sich wie
       „ausgegraut". Daher das warme Biber-Braun, wie schon als Seiten-Tint. */
    --stufe-biber: var(--ak-biber);
    --stufe-woe: #FF6400;
    --stufe-jupfi: #2F53A7;
    --stufe-pfadi: #00823C;
    --stufe-rover: #CC1F2F;
    --stufe-leitende: #E8B92E;
    --ak-biber: #856848;          /* Biber-Braun; ggü. #8A6D4B minimal abgedunkelt für AA als Akzenttext */
    --ak-woe: #B44800;
    --ak-jupfi: #2F53A7;
    --ak-pfadi: #007A38;
    --ak-rover: #C0182A;
    --ak-ausbildung: #7A4BDC;
    --ak-drachen: #0D7481;
    /* Praevention: derselbe Farbton wie im Dunkelmodus (330°, siehe themes.css)
       statt der bisherigen 342° — die lasen sich als Rot, nicht als Pink. Die
       Helligkeit bleibt fast gleich (42% statt 44%), die Seite wirkt also nicht
       dunkler, nur eindeutig pink. Geprueft als Text auf Seite/Karte/Footer und
       als Flaeche unter weisser Schrift, alles ueber 4,5. */
    --ak-prev: #B81E6B;
    --fl: #006BB2;                /* Friedenslicht-Offiziellblau (Akzent, hell) */
    --fl-btn: #006BB2;           /* als Button-Fill (weiße Schrift AA in beiden Modi) */
    --fl-btn-hover: #0E7CC6;
    --ak-oeko: #097954;
    --ak-stamm: #9F5804;
    --ak-leitende: #856509;

    /* Lilie-Maske (data-URI für zuverlässiges CSS-Masking) */
    --lilie-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20809%20796'%3E%3Cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M404.649%200.037C410.608%200.037%20470.394-1.606%20494.918%2015.401%20519.18%2032.239%20501.866%2098.604%20499.083%20101.441%20490.94%20109.711%20670.487%20104.727%20673.961%20105.231%20677.435%20105.716%20751.454%20183.002%20743.572%20186.511%20713.259%20199.971%20500.783%20207.905%20495.329%20210.873%20489.875%20213.86%20479.322%20335.294%20479.322%20343.415%20479.322%20350.807%20635.317%20230.997%20714.772%20227.375%20769.105%20224.911%20790.042%20280.616%20794.338%20296.185%20799.138%20313.584%20812.96%20359.563%20807.917%20431.584%20805.563%20465.354%20782.665%20598.064%20712.157%20655.767%20693.815%20670.757%20654.63%20688.977%20625.306%20671.634%20600.185%20656.756%20491.556%20569.446%20494.918%20569.073%20513.801%20567.038%20545.03%20578.519%20559.823%20568.457%20582.217%20553.224%20583.879%20455.31%20587.111%20421.652%20587.652%20416.014%20512.68%20440.507%20499.289%20449.934%20485.897%20459.361%20468.639%20478.141%20464.137%20494.998%20459.393%20512.789%20467.985%20539.447%20460.327%20539.447H348.972C341.314%20539.447%20349.905%20512.77%20345.161%20494.998%20340.66%20478.16%20323.402%20459.361%20310.01%20449.934%20296.618%20440.507%20221.647%20416.014%20222.188%20421.652%20225.438%20455.31%20227.082%20553.224%20249.476%20568.457%20264.288%20578.519%20295.516%20567.057%20314.381%20569.073%20317.743%20569.427%20209.095%20656.756%20183.993%20671.634%20154.688%20688.977%20115.483%20670.757%2097.161%20655.767%2026.653%20598.045%203.754%20465.354%201.382%20431.565-3.642%20359.544%205.996%20324.411%2014.681%20296.166%2019.481%20280.541%2040.213%20224.874%2094.546%20227.357%20174.019%20230.978%20329.995%20350.789%20329.995%20343.396%20329.995%20335.294%20319.442%20213.841%20313.989%20210.854%20308.535%20207.886%2096.059%20199.952%2065.726%20186.492%2057.826%20183.002%20131.864%20105.716%20135.356%20105.212%20138.83%20104.708%20318.378%20109.693%20310.234%20101.423%20307.451%2098.604%20290.119%2032.221%20314.381%2015.382%20338.904-1.606%20398.691%200.037%20404.649%200.037Z'%20fill='white'/%3E%3Cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M404.649%20561.456S398.15%20561.27%20456.087%20561.251C466.902%20561.251%20581.376%20733.462%20591.257%20746.623%20595.459%20752.205%20560.663%20765.198%20550.092%20764.731%20530.984%20763.854%20480.424%20714.832%20474.354%20708.765%20468.284%20702.679%20483.637%20781.738%20479.285%20786.927%20474.952%20792.136%20404.631%20795.981%20404.631%20795.981S334.328%20792.136%20329.976%20786.927C325.643%20781.719%20340.996%20702.679%20334.926%20708.765%20328.856%20714.832%20278.277%20763.854%20259.189%20764.731%20248.636%20765.198%20213.821%20752.205%20218.023%20746.623%20227.904%20733.462%20342.21%20561.064%20353.043%20561.251%20404.631%20561.251%20404.631%20561.456%20404.631%20561.456H404.649Z'%20fill='white'/%3E%3C/svg%3E");

    /* Karten-Hover (Token) — angewendet im Block
       "KARTEN-HOVER-SYSTEM" am Dateiende.
       Look = Stufen-Karten: Eckverlauf für alle, Anheben nur für Klickbares. */
    --card-lift: -3px;
    --card-glow: 18%;             /* Stärke des Eckverlaufs beim Hover */

    /* Button-System (Token) — DREI Varianten, mehr nicht:
       .btn-fire    = gefüllter Primär-CTA (rot)
       .btn-outline = Sekundär (Rahmen)
       .btn-ghost   = Tertiär (Unterstrich-Link)
       Geometrie/Hover zentral hier; Looks (auch Doodle) überschreiben NUR Tokens. */
    --btn-radius: var(--radius);
    --btn-lift: -2px;

    /* Schriften — final: Arvo (Headlines, slab) + Carlito (UI/Body) */
    --font-heading: 'Arvo', 'Georgia', serif;
    --font-ui:      'Carlito', 'Segoe UI', sans-serif;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 108px; }   /* Anker-Sprünge stoppen unter der fixen Navbar → Eyebrow + Überschrift bleiben sichtbar */
@media (max-width: 560px) { html { scroll-padding-top: 84px; } }
/* Transitions während des initialen Theme-Ladens deaktivieren → kein FOUC */
html.no-transition *, html.no-transition *::before, html.no-transition *::after { transition: none !important; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    line-height: 1.5;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }


/* ── GRAIN OVERLAY ── */
body::before {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .03;
    pointer-events: none;
    z-index: 9997;
}

/* ── HEADER ── */
header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 22px 52px;
    /* Dynamic Island / Notch: Header deckt die Safe-Area oben mit ab, statt darunter
       zu schweben (sonst blitzt beim Scrollen Seiteninhalt oben durch). */
    padding-top: calc(22px + env(safe-area-inset-top));
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(var(--hbg), .97);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(20,34,46,.09);
    transition: background .4s;
}
header.solid {
    background: rgba(var(--hbg), .97);
    backdrop-filter: blur(14px);
}
/* Touch/Safari: backdrop-filter auf fixed = Repaint-Lag beim Scrollen (Navbar
   „schwebt"/scheint durch). Auf Touch-Geräten deshalb voll deckend, ohne Blur. */
@media (pointer: coarse) {
    header, header.solid { background: rgb(var(--hbg)); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ── LILIE LOGO ── */
.logo-lilie {
    display: block;
    width: 18px; height: 18px;
    filter: brightness(0) invert(1);
    object-fit: contain;
    transform: translateY(12%);
}

.logo { display: flex; align-items: center; gap: 11px; cursor: pointer; text-decoration: none; }
/* DV-Limburg-Logo (Gebietsumriss mit Lilie) — ersetzt das alte Hex-Placeholder-Logo */
.logo-dv {
    height: 38px; width: auto; display: block; flex-shrink: 0;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.logo:hover .logo-dv { transform: scale(1.05); }
.logo-hex {
    width: 36px; height: 36px; background: var(--sc, var(--primary));
    clip-path: polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: #fff;
    transition: transform .4s cubic-bezier(.34,1.56,.64,1);
    flex-shrink: 0;
}
.logo:hover .logo-hex { transform: rotate(72deg) scale(1.08); }
/* Wortmarke im Navbar-Kleid: gleiche Schrift/Versalien/Sperrung wie die Nav-Links */
.logo-text { font-family: var(--font-heading); font-weight: 700; font-size: 1.04rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.logo-text span { font-weight: 400; color: var(--sc, var(--primary)); }

nav { display: flex; gap: 2px; align-items: center; }
nav a {
    color: var(--text-sub); font-size: 1rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    padding: 8px 14px; cursor: pointer; text-decoration: none;
    transition: color .25s; position: relative;
    white-space: nowrap;
}
nav a::after {
    content: ''; position: absolute; bottom: 5px; left: 14px; right: 14px;
    height: 1px; background: var(--sc, var(--primary));
    transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
nav a:hover, nav a.active { color: var(--text); }
nav a:hover::after, nav a.active::after { transform: scaleX(1); }
.nav-cta {
    background: var(--cta); color: #fff !important;
    padding: 9px 20px !important; border-radius: 2px; margin-left: 10px;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover { background: var(--cta-hover) !important; }

/* Mobile hamburger */
.nav-toggle {
    display: none; background: none; border: none;
    color: var(--text); font-size: 1.4rem; cursor: pointer;
    padding: 8px; z-index: 1001;
}
/* Suche + Hell/Dunkel sichtbar neben dem Burger (nur mobil) */
.nav-actions-mobile { display: none; align-items: center; gap: 8px; }
.mobile-nav {
    display: none; position: fixed; inset: 0; z-index: 1002;
    padding-top: env(safe-area-inset-top);
    background: rgba(var(--hbg), .98); backdrop-filter: blur(20px);
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px;
    overflow-y: auto; padding: 72px clamp(28px, 9vw, 80px) 28px;
}
/* Spacer oben/unten: zentriert, wenn alles passt — scrollt sauber, wenn nicht */
.mobile-nav::before, .mobile-nav::after { content: ''; margin: auto; flex-shrink: 0; }
.mobile-nav.open { display: flex; }
.mobile-nav-close { position: fixed; top: 22px; right: 24px; }
/* Seite hinter offenem Menü nicht mitscrollen */
/* Scroll-Sperre: Mobil-Menue (nav-locked), Termin-Popup (modal-locked) und
   Lightbox (lb-locked) nutzen getrennte Klassen, damit das Schliessen des
   einen nicht die Sperre der anderen aufhebt. Gesperrt wird, sobald eine
   aktiv ist. */
html.nav-locked, html.modal-locked, html.lb-locked { overflow: hidden; }

/* ── LIGHTBOX (globale Bildansicht) ── */
.lb-zoomable { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 5vmin; background: rgba(8,16,22,.93); opacity: 0; transition: opacity .2s ease; }
.lightbox.is-open { display: flex; opacity: 1; }
.lightbox img { max-width: 92vw; max-height: 86vh; width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 14px 50px rgba(0,0,0,.55); }
.lb-actions { position: fixed; top: 16px; right: 16px; display: flex; gap: 10px; }
.lb-btn { width: 46px; height: 46px; border-radius: 50%; border: none; background: rgba(255,255,255,.15); color: #fff; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.lb-btn:hover, .lb-btn:focus-visible { background: rgba(255,255,255,.32); transform: translateY(-2px); outline: none; }
/* Lightbox-Blaettern (nur bei Bildgruppen: Collage, Karussell, Material-Grid) */
.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.15); color: #fff; font-size: 1.1rem; display: grid; place-items: center; cursor: pointer; transition: background .2s ease; z-index: 3001; }
.lb-nav:hover, .lb-nav:focus-visible { background: rgba(255,255,255,.34); outline: none; }
.lb-prev { left: clamp(12px, 3vw, 34px); }
.lb-next { right: clamp(12px, 3vw, 34px); }
.lb-nav[hidden] { display: none; }
.lb-count { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.82); font-family: var(--font-ui); font-size: .92rem; z-index: 3001; }
.lb-count[hidden] { display: none; }

/* ── Zurueck-nach-oben-Button (js/to-top.js), unten rechts in der Ecke ── */
.to-top {
    position: fixed; right: 20px; bottom: 24px; z-index: 200;
    width: 50px; height: 50px; border: none; border-radius: 50%; cursor: pointer;
    background: var(--cta); color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 10px 26px rgba(0,0,0,.24);
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: color-mix(in srgb, var(--cta) 84%, #000); }
.to-top:focus-visible { outline: 2px solid var(--sc, var(--primary)); outline-offset: 3px; }
.to-top .wz { width: 26px; height: 26px; transform: rotate(-90deg); }
@media (max-width: 768px) { .to-top { width: 46px; height: 46px; bottom: 20px; } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: opacity .2s ease, visibility .2s ease; transform: none; } }
.lb-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(10px); background: #16242e; color: #fff; padding: 11px 18px; border-radius: 999px; font-size: .95rem; box-shadow: 0 8px 24px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 3001; }
.lb-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .lightbox, .lb-btn, .lb-toast { transition: none; } }

/* ── Wegzeichen-Lightbox (Zeichen groß anzeigen, js/wegzeichen.js) ── */
.wz-item { cursor: pointer; }
.wz-item:focus-visible { outline: 2px solid var(--sc, var(--primary)); outline-offset: 4px; border-radius: 8px; }
.wz-lightbox { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 7vmin; background: rgba(8,16,22,.93); opacity: 0; transition: opacity .2s ease; }
.wz-lightbox.is-open { display: flex; opacity: 1; }
.wz-lb-close { position: fixed; top: 16px; right: 16px; width: 46px; height: 46px; border-radius: 50%; border: none; background: rgba(255,255,255,.15); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; transition: background .2s ease; }
.wz-lb-close:hover, .wz-lb-close:focus-visible { background: rgba(255,255,255,.32); outline: none; }
.wz-lb-inner { text-align: center; color: #fff; max-width: 440px; }
.wz-lb-sign { width: min(64vw, 300px); height: min(64vw, 300px); margin: 0 auto 20px; color: #fff; }
.wz-lb-sign .wz { width: 100%; height: 100%; }
.wz-lb-name { display: block; font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 6px; }
.wz-lb-hint { color: rgba(255,255,255,.82); font-family: var(--font-ui); font-size: 1.02rem; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .wz-lightbox { transition: none; } }
/* Blaettern */
.wz-lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: none; background: rgba(255,255,255,.15); color: #fff; font-size: 1.1rem; display: grid; place-items: center; cursor: pointer; z-index: 3001; transition: background .2s ease; }
.wz-lb-nav:hover, .wz-lb-nav:focus-visible { background: rgba(255,255,255,.32); outline: none; }
.wz-lb-prev { left: clamp(10px, 3vw, 30px); }
.wz-lb-next { right: clamp(10px, 3vw, 30px); }
/* Theme-Anpassung: Light-Mode = helle Flaeche + Navy-Zeichen, Dark-Mode = dunkel + weiss */
html:not([data-theme="dunkel"]) .wz-lightbox { background: rgba(245,245,241,.96); }
html:not([data-theme="dunkel"]) .wz-lb-inner { color: var(--text); }
html:not([data-theme="dunkel"]) .wz-lb-sign { color: var(--sc, var(--primary)); }
html:not([data-theme="dunkel"]) .wz-lb-name { color: var(--text); }
html:not([data-theme="dunkel"]) .wz-lb-hint { color: var(--text-sub); }
html:not([data-theme="dunkel"]) .wz-lb-close, html:not([data-theme="dunkel"]) .wz-lb-nav { background: rgba(0,32,58,.1); color: var(--text); }
html:not([data-theme="dunkel"]) .wz-lb-close:hover, html:not([data-theme="dunkel"]) .wz-lb-close:focus-visible, html:not([data-theme="dunkel"]) .wz-lb-nav:hover, html:not([data-theme="dunkel"]) .wz-lb-nav:focus-visible { background: rgba(0,32,58,.18); }
.mobile-nav a {
    color: var(--text-sub); font-size: 1.1rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    padding: 11px 0; text-decoration: none;
    transition: color .25s;
}
.mobile-nav a:hover, .mobile-nav a.active { color: var(--text); }
/* Unterseiten-Gruppe: eingerückt mit Führungslinie */
.mnav-group { display: flex; flex-direction: column; }
.mnav-subs {
    display: flex; flex-direction: column;
    margin: 0 0 6px 4px; padding-left: 16px;
    border-left: 2px solid color-mix(in srgb, var(--text) 16%, transparent);
}
.mobile-nav .nav-cta {
    background: var(--sc, var(--primary)); color: #fff;
    padding: 13px 26px; border-radius: 2px; margin: 14px 0 0;
    align-self: flex-start;
}

/* ── PAGE SYSTEM ── */
.page { display: none; min-height: 100vh; animation: pfIn .45s ease both; }
.page.active { display: block; }
@keyframes pfIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }

/* ── SCROLL REVEAL ──
   Verstecken nur wenn JS aktiv ist (html.js wird im <head>-Inline-Script gesetzt).
   Ohne JS bleiben alle .reveal-Inhalte sichtbar → kein "leerer" Inhalt bei JS-Fehler. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s ease; }
.js .reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ── UTILITY ── */
/* iOS/Safari bläht Text in breiten Blöcken (z.B. Marquee) automatisch auf → aus */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 52px; }
.sec { padding: 90px 0; }
.sec-sm { padding: 60px 0; }
.sec-label {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-ui); font-size: .8rem; font-weight: 700;
    color: var(--cta-text); letter-spacing: .16em; text-transform: uppercase;
    margin-bottom: 16px;
}
.sec-label::before { content: ''; width: 22px; height: 1px; background: var(--cta-text); display: block; }

/* ── BREADCRUMBS ("Du bist hier", injiziert von components.js) ──
   Die a-Overrides neutralisieren die globale nav-a-Regel (uppercase/
   bold/padding/Unterstrich-Animation) — sonst sähen die Links anders
   aus als die aktuelle Seite. */
.breadcrumbs { font-family: var(--font-ui); font-size: .88rem; margin-bottom: 20px; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 0; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 10px; color: var(--text-muted); }
/* „Freund/Feind"-Wegzeichen rahmen verspielte Seiten ein: Spielbeginn oben,
   Spielende unten. Dezente, mittige Kreide-Marke. */
.wz-frame { text-align: center; padding: 12px 0 2px; }
.wz-frame .wz { width: 44px; height: 44px; opacity: .38; color: var(--text-muted); }
.wz-frame-end { padding: 26px 0 12px; }

.breadcrumbs .bc-sep { display: inline-flex; align-items: center; color: var(--text-muted); }
/* Kein opacity-Abschlag: der Pfeil erbt die Farbe des <li> und war mit .55
   dunkler als die Wegmarken, zwischen denen er steht — er sah aus wie ein
   deaktiviertes Element statt wie ein Trennzeichen. */
.breadcrumbs .bc-wz { width: 16px; height: 16px; }
.breadcrumbs a {
    color: inherit; text-decoration: none; transition: color .2s;
    text-transform: none; font-weight: 400; font-size: inherit; letter-spacing: 0; padding: 0;
}
.breadcrumbs a::after { display: none; }
.breadcrumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs [aria-current="page"] { color: var(--text-sub); font-weight: 700; }

/* ── Schmale Schirme: Mitte einklappen ──────────────────────────────────────
   Sichtbar bleiben Start, die direkte Elternebene und die aktuelle Seite. Was
   dazwischen liegt, steckt hinter einem „…"-Knopf — antippen zeigt den ganzen
   Pfad. Der Trenner sitzt IM <li>, verschwindet also mit seiner Krume und
   hinterlässt kein einzelnes Wegzeichen in der Luft. */
.breadcrumbs .bc-more { display: none; }
.breadcrumbs .bc-more button {
    font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
    padding: 0 4px; line-height: 1; letter-spacing: .06em;
}
.breadcrumbs .bc-more button:hover { color: var(--text); }
@media (max-width: 560px) {
    /* Beides ist Kleinschrift in Grossbuchstaben mit weiter Laufweite — auf dem
       Handy zusammen mit dem geringeren Kontrast von Grau auf Foto zu wenig.
       Ein Schritt hoch, nicht zwei: die Brotkrume soll die h1 nicht bedraengen. */
    .breadcrumbs { font-size: .95rem; }
    .sec-label   { font-size: .88rem; letter-spacing: .13em; }
    .hero-tag    { font-size: .9rem;  letter-spacing: .12em; }
    .breadcrumbs .bc-wz { width: 18px; height: 18px; }
    .breadcrumbs:not(.bc-offen) .bc-mid  { display: none; }
    .breadcrumbs:not(.bc-offen) .bc-more { display: inline-flex; }
    /* Lange Titel (Beitragsüberschriften) kappen statt umbrechen — der voll-
       ständige Titel steht direkt darunter als Überschrift. */
    .breadcrumbs [aria-current="page"] { max-width: 58vw; }
    .breadcrumbs [aria-current="page"] > span {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
}

/* Auf Foto-/Farb-Heroes hell (page-hero UND ak-hero) */
.page-hero .breadcrumbs li, .ak-hero .breadcrumbs li { color: rgba(255,255,255,.75); }
.page-hero .breadcrumbs a:hover, .ak-hero .breadcrumbs a:hover { color: #fff; }
.page-hero .breadcrumbs [aria-current="page"], .ak-hero .breadcrumbs [aria-current="page"] { color: rgba(255,255,255,.95); }
/* Typo-Skala: h1 (Seitentitel) klar über h2 (Abschnittstitel) —
   Unterseiten sollen ruhig wirken, nicht jede Sektion gleich laut. */
h1.sec-title {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem,4.6vw,3.6rem);
    color: var(--text); line-height: 1.06; margin-bottom: 14px;
}
h2.sec-title {
    font-family: var(--font-heading);
    font-size: clamp(1.55rem,2.6vw,2.15rem);
    color: var(--text); line-height: 1.14; margin-bottom: 12px;
}
.sec-title em { color: var(--sc, var(--primary)); font-style: italic; }
.ak-hero .sec-title em { color: inherit; } /* Foto-Hero: Akzent = Titelweiß statt grellem Ton auf Dunkel */
.sec-sub {
    color: var(--text-sub); font-size: 1rem; line-height: 1.72;
    max-width: 560px; margin-bottom: 44px;
}
/* Die 44px sind fuer einen echten Abschnittswechsel gedacht: Vorspann, dann
   Karten, Listen oder ein Termin-Gitter. Folgt darauf aber nur WEITERER Text,
   liest sich der Abstand wie zwei Leerzeilen mitten im Absatz — der Vorspann
   ist dann optisch vom Text abgeschnitten, zu dem er gehoert. In dem Fall der
   normale Absatzabstand (18px, wie .article-prose p). */
.sec-sub:has(+ .article-prose) { margin-bottom: 18px; }

.btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 26px; border-radius: var(--btn-radius);
    font-family: var(--font-ui); font-weight: 700; font-size: 1rem;
    letter-spacing: .04em; cursor: pointer; border: none;
    transition: all .25s; text-transform: uppercase; text-decoration: none;
}
.btn-fire { background: var(--sc-btn, var(--cta)); color: #fff; }
.btn-fire:hover { background: var(--sc-btn-hover, var(--cta-hover)); transform: translateY(var(--btn-lift)); box-shadow: 0 8px 28px color-mix(in srgb, var(--sc-btn, var(--cta)) 35%, transparent); }
.btn-outline { background: transparent; color: var(--text); border: 1px solid color-mix(in srgb, var(--text) 28%, transparent); }
.btn-outline:hover { background: color-mix(in srgb, var(--text) 7%, transparent); border-color: color-mix(in srgb, var(--text) 50%, transparent); transform: translateY(var(--btn-lift)); }
/* Outline-Buttons IM Hero liegen auf dunklem Foto → hell */
.hero .btn-outline { border-color: rgba(255,255,255,.45); color: rgba(255,255,255,.9); }
.hero .btn-outline:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.8); color: #fff; }
.btn-ghost {
    background: transparent; color: var(--text-sub);
    padding: 9px 0; border-radius: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text-sub) 35%, transparent);
    font-size: 1rem; letter-spacing: .08em;
}
.btn-ghost:hover { color: var(--link-hover); border-color: var(--link-hover); }
.btn-sm { padding: 9px 18px; font-size: 1rem; }

/* ── FOCUS STATES (WCAG) ── */
.btn-fire:focus-visible, .btn-outline:focus-visible, .btn-ghost:focus-visible,
.nf-chip:focus-visible, .ev-view-btn:focus-visible, .ev-cal-nav-btn:focus-visible,
.dl-btn:focus-visible {
    outline: 2px solid var(--sc, var(--primary)); outline-offset: 3px;
}
a.news-card:focus-visible, a.srv-card:focus-visible, a.ak-card:focus-visible,
a.stamm:focus-visible, a.int-card:focus-visible, a.blog-post:focus-visible,
a.stat-c:focus-visible, a.qc:focus-visible, a.hero-door:focus-visible,
a.stufe-mini:focus-visible, a.mat-card:focus-visible, a.ak-member:focus-visible,
a.dl-person:focus-visible, .card-popup-close:focus-visible { outline: 2px solid var(--sc, var(--primary)); outline-offset: 2px; }

/* Globaler reduced-motion-Fallback: kürzt ALLE Animationen/Transitions/Scroll
   für bewegungsempfindliche Nutzer (deckt auch neue Elemente wie Popup und
   Doodle-Wackeln ab; komponentenspezifische Regeln bleiben zusätzlich bestehen). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

.chip {
    display: inline-block; padding: 4px 11px; border-radius: 2px;
    font-family: var(--font-ui); font-size: .8rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
}
/* Chip-Farben: lesbar auf hellem Grund (Dunkel-Werte in themes.css) */
.chip-blue { background: rgba(47,83,167,.12); color: #2F53A7; }
.chip-green { background: rgba(0,130,60,.12); color: #00702F; }
.chip-orange { background: rgba(224,90,0,.13); color: #C24E00; }
.chip-purple { background: rgba(124,77,224,.12); color: #6633CC; }
.chip-teal { background: rgba(13,148,136,.12); color: #0B7268; }
.chip-red { background: rgba(192,24,42,.12); color: #B0182A; }
.chip-leiter { background: rgba(148,112,10,.14); color: #7A5C08; }
.chip-white { background: rgba(20,34,46,.10); color: var(--text-sub); }
.chip-stamm { background: rgba(0,48,86,.11); color: #003056; }   /* Sammel-Chip: ganzer Stamm */

.dl-row { display: flex; flex-wrap: wrap; gap: 7px; }
.dl-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: var(--radius);
    font-size: 1rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; cursor: pointer; border: none;
    background: rgba(20,34,46,.07); color: var(--text);
    transition: background .2s, transform .2s, box-shadow .2s;
}
.dl-btn:hover { background: var(--sc, var(--primary)); color: #fff; transform: translateY(var(--btn-lift)); }
/* Roter Primär-Download-Button: für Karten, die auf eine eigene DV-Seite führen */
.dl-btn-primary { background: var(--sc-btn, var(--cta)); color: #fff; }
/* Hover NICHT über --sc-btn-hover: diese Variable ist nur für 2 der 9 Tints und
   nur im Dunkelmodus definiert. Sonst fiel sie auf dieselbe Farbe wie die
   Füllung zurück → gar kein sichtbarer Hover (Bug bis 07/2026). Stattdessen aus
   der tatsächlichen Füllfarbe abdunkeln — klappt für jeden Tint, hell + dunkel. */
.dl-btn-primary:hover {
    background: color-mix(in srgb, var(--sc-btn, var(--cta)) 82%, #000); color: #fff;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--sc-btn, var(--cta)) 32%, transparent);
}

/* ── HERO ── */
.hero {
    position: relative; height: 100vh; height: 100svh; min-height: 580px;
    overflow: hidden; display: flex; align-items: flex-end;
}
.hero-inner {
    position: relative; z-index: 2;
    width: 100%; max-width: 1240px; margin: 0 auto;
    padding: 0 52px 80px;
    display: grid; grid-template-columns: 1fr 1fr;
    align-items: flex-end; gap: 40px;
}
.hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(120deg, rgba(var(--overlay-rgb),.94) 0%, rgba(var(--overlay-rgb),.72) 55%, rgba(var(--overlay-rgb),.38) 100%),
    url('../img/hero-campfire.jpeg') center/cover;
}
.hero-bg::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 72% 50%,
        color-mix(in srgb, var(--highlight) 15%, transparent) 0%, transparent 68%);
}
.hero-lines {
    position: absolute; right: 0; top: 0; width: 52%; height: 100%;
    z-index: 1; pointer-events: none; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.hero-lilie-wm {
    width: 90%; height: 90%;
    object-fit: contain;
    opacity: .07;
    transform: translateX(8%);
    filter: brightness(0) invert(1);
}
/* Auf dem Handy stand die Lilie mittig genau hinter der Zeile
   „Diözesanverband Limburg" — heller Umriss unter hellgrauer Kleinschrift, das
   war kaum zu lesen. Kleiner und nach oben aus dem Textbereich heraus. */
@media (max-width: 760px) {
    .hero-lilie-wm {
        width: 58%; height: 58%;
        opacity: .05;
        transform: translate(10%, -26%);
    }
}
.hero-left { position: relative; z-index: 2; }
/* Hero-Text immer hell — der Hero liegt in beiden Modi auf dunklem Foto-Overlay */
.hero-tag {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-ui); font-size: .85rem; font-weight: 700;
    color: rgba(255,255,255,.72); letter-spacing: .15em; text-transform: uppercase;
    margin-bottom: 22px;
}
.hero-tag::before { content: ''; width: 28px; height: 1px; background: rgba(255,255,255,.72); }
.hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.7rem,4.8vw,4.3rem); line-height: 1.06;
    color: #fff; margin-bottom: 22px;
}
/* Ortsname: gleiche Größe, Hellblau; sehr lange Orte trennen per Silbentrennung */
.hero h1 em { color: #8FC0E4; font-style: italic; hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 430px) { .hero h1 { font-size: 2.45rem; } }
.hero-p { font-size: 1rem; color: rgba(255,255,255,.78); max-width: 460px; line-height: 1.72; margin-bottom: 36px; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-right {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}
.stat-c {
    background: color-mix(in srgb, var(--bg-mid) 75%, transparent); backdrop-filter: blur(18px);
    border: 1px solid color-mix(in srgb, var(--highlight) 22%, transparent); border-radius: 12px;
    padding: 18px 26px; text-align: right;
    animation: floatY 6s ease-in-out infinite;
}
.stat-c:nth-child(2) { animation-delay: -2s; }
.stat-c:nth-child(3) { animation-delay: -4s; }
a.stat-c { transition: transform .25s, border-color .25s, box-shadow .25s; }
/* Die Karten liegen in beiden Modi auf dunklem Foto -> Hover-Akzent fest hell
   (var(--sc, var(--primary)) war im hellen Modus Navy-auf-Navy und kaum sichtbar) */
a.stat-c:hover {
    border-color: #8FC0E4;
    background: color-mix(in srgb, var(--bg-mid) 94%, transparent);
    transform: translateY(-6px) scale(1.045);
    box-shadow: 0 18px 40px rgba(0, 12, 24, .5);
}
.stat-n { font-family: var(--font-heading); font-size: 2.6rem; color: var(--sc, var(--primary)); line-height: 1; }
.stat-l { font-size: 1rem; color: var(--text-sub); text-transform: uppercase; letter-spacing: .1em; margin-top: 3px; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
/* Eckverlauf auch hier — fest hell, da die Karten auf dunklem Foto liegen */
.stat-c { position: relative; overflow: hidden; }
.stat-c::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top right, rgba(255,255,255,.12) 0%, transparent 46%);
    opacity: 0; transition: opacity .5s ease; pointer-events: none;
}
a.stat-c:hover::before { opacity: 1; }

/* ── Startseiten-Hero freundlicher im Light-Mode: helle Transparenz + dunkle Schrift.
      Dark-Mode bleibt unveraendert (dunkles Overlay + helle Schrift). ── */
html:not([data-theme="dunkel"]) .hero-bg {
    background: linear-gradient(120deg, rgba(245,245,241,.95) 0%, rgba(245,245,241,.74) 50%, rgba(245,245,241,.30) 100%),
    url('../img/hero-campfire.jpeg') center/cover;
}
html:not([data-theme="dunkel"]) .hero-tag { color: var(--cta); }
html:not([data-theme="dunkel"]) .hero-tag::before { background: var(--cta); }
html:not([data-theme="dunkel"]) .hero h1 { color: var(--text); }
html:not([data-theme="dunkel"]) .hero h1 em { color: var(--sc, var(--primary)); }
html:not([data-theme="dunkel"]) .hero-p { color: var(--text-sub); }
html:not([data-theme="dunkel"]) .scroll-cue { color: var(--text-sub); }
html:not([data-theme="dunkel"]) .scroll-cue i { color: var(--text-muted); }
html:not([data-theme="dunkel"]) .hero .btn-outline { border-color: color-mix(in srgb, var(--sc, var(--primary)) 45%, transparent); color: var(--sc, var(--primary)); }
html:not([data-theme="dunkel"]) .hero .btn-outline:hover { background: color-mix(in srgb, var(--sc, var(--primary)) 8%, transparent); border-color: var(--sc, var(--primary)); color: var(--sc, var(--primary)); }
html:not([data-theme="dunkel"]) .hero .stat-c { background: color-mix(in srgb, var(--bg-mid) 92%, transparent); border-color: var(--card-border); box-shadow: 0 10px 28px rgba(0,32,58,.10); }
/* Mobile: der 120deg-Verlauf laesst den Text auf dem transparenten Teil liegen.
   Darum hochkant ein nach unten deckendes Overlay (dort sitzt der Hero-Text). */
@media (max-width: 768px) {
    html:not([data-theme="dunkel"]) .hero-bg {
        background: linear-gradient(to bottom, rgba(245,245,241,.72) 0%, rgba(245,245,241,.90) 52%, rgba(245,245,241,.97) 100%),
        url('../img/hero-campfire.jpeg') center/cover;
    }
}
.scroll-cue {
    position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
    z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 7px;
    font-family: var(--font-ui); font-size: .85rem;
    color: rgba(255,255,255,.5); letter-spacing: .15em; text-transform: uppercase;
    animation: bounce 2.2s ease-in-out infinite;
}
.scroll-cue i { color: rgba(255,255,255,.65); font-size: 1rem; }
.tw-caret { display: inline-block; width: 3px; height: 1em; margin-left: 3px; background: currentColor; vertical-align: -0.08em; animation: tw-blink 1.05s step-end infinite; }
@keyframes tw-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tw-caret { display: none; } }
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(7px)} }

/* ── HERO: Zwei Türen (Startseite) ── */
.hero--split { height: auto; min-height: 100vh; align-items: center; }
.hero-split-inner {
    position: relative; z-index: 2;
    width: 100%; max-width: 1240px; margin: 0 auto;
    padding: 124px 52px 92px;
}
.hero-intro { max-width: 640px; margin-bottom: 44px; }
.hero--split h1 { font-size: clamp(2.4rem, 4.6vw, 3.7rem); line-height: 1.05; }
.hero-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.hero-door {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    background: color-mix(in srgb, var(--bg-mid) 72%, transparent);
    backdrop-filter: blur(16px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 36px 34px 32px;
    transition: transform .3s, border-color .3s, background .3s, box-shadow .3s;
}
.hero-door::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top right, color-mix(in srgb, var(--hd-c, var(--sc, var(--primary))) 16%, transparent) 0%, transparent 46%);
    opacity: 0; transition: opacity .5s ease; pointer-events: none;
}
.hero-door--join   { --hd-c: var(--sc, var(--primary)); }
.hero-door--portal { --hd-c: var(--highlight); }
.hero-door:hover { transform: translateY(var(--card-lift)); background: color-mix(in srgb, var(--bg-mid) 88%, transparent); }
.hero-door--join:hover   { border-color: color-mix(in srgb, var(--sc, var(--primary)) 55%, transparent); }
.hero-door--portal:hover { border-color: color-mix(in srgb, var(--highlight) 55%, transparent); }
.hero-door:hover::before { opacity: 1; }
.hero-door-icon { font-size: 30px; margin-bottom: 18px; display: block; width: fit-content; transition: transform .25s ease; }
.hero-door--join .hero-door-icon   { color: var(--sc, var(--primary)); }
.hero-door--portal .hero-door-icon { color: var(--highlight); }
.hero-door-eyebrow { font-family: var(--font-ui); font-size: 1rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.hero-door h2 { font-family: var(--font-heading); font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.1; color: var(--text); margin-bottom: 12px; }
.hero-door p { font-size: 1rem; color: var(--text-sub); line-height: 1.6; margin-bottom: 26px; max-width: 40ch; }
.hero-door-actions { margin-top: auto; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero-door-more { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 1rem; color: var(--text-sub); transition: color .25s; }
.hero-door-more:hover { color: var(--text); }
.hero-door--join .hero-door-more:hover   { color: var(--sc, var(--primary)); }
.hero-door--portal .hero-door-more:hover { color: var(--highlight); }

@media (max-width: 860px) {
    .hero-doors { grid-template-columns: 1fr; gap: 16px; }
    .hero-split-inner { padding: 104px 24px 64px; }
    .hero-intro { margin-bottom: 30px; }
}

/* ── MARQUEE ── */
.marquee-bar { background: var(--sc, var(--primary)); position: relative; overflow: hidden; }
.marquee-bar::before, .marquee-bar::after { content: ''; position: absolute; top: 0; bottom: 0; width: 64px; z-index: 2; pointer-events: none; }
.marquee-bar::before { left: 0;  background: linear-gradient(to right, var(--sc, var(--primary)), transparent); }
.marquee-bar::after  { right: 0; background: linear-gradient(to left,  var(--sc, var(--primary)), transparent); }
.marquee-scroll { overflow-x: auto; overflow-y: hidden; padding: 16px 0; cursor: grab; touch-action: pan-x; scrollbar-width: none; -ms-overflow-style: none; }
.marquee-scroll::-webkit-scrollbar { display: none; }
/* Mobil hat der Banner keinen sichtbaren Scrollbalken und (im Doodle-Look)
   keine seitlichen Fades. Ein beidseitiger Rand-Fade zeigt, dass er scrollt. */
@media (max-width: 760px) {
    .marquee-scroll {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    }
}
.marquee-scroll.is-grabbing { cursor: grabbing; }
.marquee-scroll:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.marquee-inner { display: flex; gap: 0; width: max-content; white-space: nowrap; }
.mq-item {
    display: flex; align-items: center; gap: 18px;
    margin-right: 50px;
    font-family: var(--font-heading); font-size: 1rem;
    color: #fff; flex-shrink: 0;
}
.mq-item::before {
    content: '';
    display: block;
    width: .8em; height: .8em;
    flex-shrink: 0;
    background: url('../img/lilie-fill.svg') center/contain no-repeat;
    filter: brightness(0) invert(1);
    opacity: .5;
}
/* ── QUICK NAV ── */
/* Karten-Raster brechen nach fester Mindestbreite um (auto-fit) —
   mobil dadurch automatisch einspaltig, ganz ohne Media-Query.
   min(100%, Xpx) verhindert Überlauf auf sehr schmalen Geräten. */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
/* Kacheln sind normale Karten (Hover kommt zentral aus dem Karten-System) */
.qc {
    background: var(--bg-mid); padding: 38px 32px;
    border: 1px solid var(--card-border); border-radius: var(--radius-lg);
}

.qc-icon {
    font-size: 26px; color: var(--sc, var(--primary)); margin-bottom: 18px; display: block;
    width: fit-content;   /* Box = Glyphe -> scale/rotate um die eigene Mitte, kein Links-Wandern */
    transition: transform .25s ease;
}
.qc-title { font-family: var(--font-heading); font-size: 1.45rem; color: var(--text); margin-bottom: 9px; }
.qc-desc { color: var(--text-sub); font-size: 1rem; line-height: 1.62; margin-bottom: 26px; }
.qc-link {
    color: var(--sc, var(--primary)); font-size: 1rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 8px;
    transition: color .2s;
}
.qc:hover .qc-link { color: var(--secondary); }

/* ── NEWS STRIP / CARDS ── */
.news-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.news-card {
    background: var(--bg-mid); border: 1px solid var(--card-border);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: transform .3s, border-color .3s; cursor: pointer;
}
.news-img { height: 160px; overflow: hidden; position: relative; }
.news-img img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
    transition: transform .4s;
}
.news-card:hover .news-img img { transform: scale(1.04); }
.news-body { padding: 20px 22px; }
.news-date { font-family: var(--font-ui); font-size: 1rem; color: var(--text-muted); letter-spacing: .1em; margin-bottom: 7px; }
.news-title { font-family: var(--font-heading); font-size: 1.05rem; color: var(--text); margin-bottom: 7px; line-height: 1.25; }
.news-excerpt { font-size: 1rem; color: var(--text-sub); line-height: 1.6; }
/* Reihen-Label auf der Startseite: trennt sichtbar „Aktuelles" (Blog) von „Termine" */
.home-row-label { font-family: var(--font-ui); font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-sub); margin: 4px 0 16px; display: flex; align-items: center; gap: 9px; }
.home-row-label i { color: var(--sc, var(--primary)); font-size: .95rem; }

/* ── PHOTO STRIP ── */
.photo-strip { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 3px; height: 320px; border-radius: var(--radius-lg); overflow: hidden; }
.ps-item { position: relative; overflow: hidden; cursor: pointer; }
.ps-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s, filter .4s; }
.ps-item:hover img { transform: scale(1.05); filter: brightness(1.1); }
.ps-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--overlay-rgb),.72) 0%, transparent 55%); }
.ps-cap span, .ps-cap small { color: #fff; }
.ps-cap small { color: rgba(255,255,255,.75); }
.ps-cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 16px; z-index: 2; }
.ps-cap span { font-family: var(--font-heading); font-size: 1.05rem; color: var(--text); }
.ps-cap small { display: block; font-family: var(--font-ui); font-size: 1rem; color: var(--text-sub); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; }

/* ── VERANSTALTUNGEN ── */
.events-layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; }
.event-row {
    display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 24px;
    align-items: start; padding: 26px 0;
    border-bottom: 1px solid rgba(20,34,46,.08); transition: border-color .3s;
}
.event-row:first-child { border-top: 1px solid rgba(20,34,46,.08); }
.event-row:hover { border-bottom-color: color-mix(in srgb, var(--sc, var(--primary)) 25%, transparent); }
.ev-date { text-align: center; background: var(--bg-mid); border-radius: 10px; padding: 10px 6px; }
.ev-day { font-family: var(--font-heading); font-size: 2.4rem; color: var(--sc, var(--primary)); line-height: 1; }
.ev-month { font-family: var(--font-ui); font-size: 1rem; color: var(--text-sub); letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; }
.ev-name { font-family: var(--font-heading); font-size: 1.52rem; color: var(--text); margin-bottom: 6px; }
.ev-meta { font-size: 1rem; color: var(--text-sub); display: flex; gap: 18px; flex-wrap: wrap; }
.ev-meta span { display: flex; align-items: center; gap: 5px; }
/* Orts-Link → Google Maps (Liste + Modal). Klick öffnet Maps, nicht das Popup. */
.ev-loc { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; transition: color .2s; cursor: pointer; }
.ev-loc:hover { color: var(--sc, var(--primary)); text-decoration: underline; text-underline-offset: 2px; }
/* Status als Text statt Pill — hebt sich klar von Buttons/Chips ab */
.ev-status { font-family: var(--font-ui); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ev-status-cancelled { color: #CC1F2F; }
[data-theme="dunkel"] .ev-status-cancelled { color: #FF8A93; }
.ev-status-full { color: var(--text-muted); }
.ev-desc { color: var(--text-sub); font-size: 1rem; line-height: 1.55; margin-top: 8px; max-width: 64ch; }
/* Einklappbare Beschreibung: sanfte Hoehen-Animation + Fade am unteren Rand */
.ev-desc-collapsible .ev-desc-text {
    overflow: hidden; max-height: 4.9em;
    transition: max-height .42s cubic-bezier(.22,.61,.36,1);
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
            mask-image: linear-gradient(to bottom, #000 62%, transparent);
}
.ev-desc-collapsible.is-open .ev-desc-text { max-height: 60em; -webkit-mask-image: none; mask-image: none; }
.ev-more {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
    padding: 0; border: 0; background: none; color: var(--sc, var(--primary));
    font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
}
.ev-more:hover { text-decoration: underline; text-underline-offset: 2px; }
.ev-more-ic { font-size: .8em; transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.ev-desc-collapsible.is-open .ev-more-ic { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
    .ev-desc-collapsible .ev-desc-text, .ev-more-ic { transition: none; }
}

/* ── GLOBALE SUCHE (Overlay) ── */
.nav-search { background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid var(--card-border); color: var(--text); cursor: pointer; font-size: 1.02rem; width: 38px; height: 38px; justify-content: center; border-radius: 10px; display: inline-flex; align-items: center; margin-left: 2px; transition: color .2s, background .2s, border-color .2s; }
.nav-search:hover { color: #fff; background: var(--sc, var(--primary)); border-color: var(--sc, var(--primary)); }
#search-overlay { position: fixed; inset: 0; height: 100dvh; z-index: 1400; display: none; padding: 12vh 20px 20px; background: color-mix(in srgb, #000 55%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#search-overlay.is-open { display: block; animation: search-fade .18s ease; }
@keyframes search-fade { from { opacity: 0; } to { opacity: 1; } }
.search-box { max-width: 600px; margin: 0 auto; background: var(--bg-mid); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,.4); overflow: hidden; animation: search-pop .22s cubic-bezier(.22,.61,.36,1); }
@keyframes search-pop { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.search-bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--card-border); color: var(--text-sub); }
.search-bar > i { font-size: 1.1rem; }
.search-bar input { flex: 1; background: none; border: 0; outline: none; color: var(--text); font: inherit; font-size: 1.15rem; }
#search-input::-webkit-search-cancel-button, #search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-close { background: none; border: 0; color: var(--text-sub); cursor: pointer; font-size: 1.15rem; padding: 4px 9px; border-radius: 8px; line-height: 1; transition: color .2s, background .2s; }
.search-close:hover { color: var(--sc, var(--primary)); background: color-mix(in srgb, var(--sc, var(--primary)) 12%, transparent); }
.search-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; padding: 13px 22px; border-top: 1px solid var(--card-border); color: var(--text-muted); font-size: .82rem; }
.sf-item { display: inline-flex; align-items: center; gap: 7px; }
.sf-keys { display: inline-flex; align-items: center; gap: 3px; }
.search-foot kbd { display: inline-flex; align-items: center; justify-content: center; height: 26px; min-width: 26px; padding: 0 7px; font-size: .82rem; color: var(--text-sub); border: 1px solid var(--card-border); border-radius: 6px; line-height: 1; }
/* Symbol-Tasten (Pfeile/⌘): quadratisch & ohne Seitenpolster → Glyph sitzt
   optisch mittig. Etwas Kopffreiheit (kleinerer Glyph), weil Unicode-Pfeile
   tief im Em-Feld sitzen und sonst nach unten versetzt wirken. */
.search-foot .ksym, .search-foot .kcmd { width: 26px; min-width: 26px; padding: 0; }
.search-foot .ksym { font-size: 1rem; }
.search-foot .kcmd { font-size: 1.2rem; }
/* Enter-Taste ist keine quadratische Symboltaste, sondern eine breitere,
   rechteckige „echte" Enter-Taste (wie auf einer Tastatur). */
.search-foot .kenter { width: auto; min-width: 44px; padding: 0 12px; }
.kplus { color: var(--text-muted); font-size: .82rem; }
@media (max-width: 700px) { .search-foot { display: none; } }
.search-results { max-height: 56vh; overflow-y: auto; padding: 8px; }
.search-hint { padding: 24px 16px; color: var(--text-sub); text-align: center; }
.search-group { padding: 12px 14px 4px; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.search-result-title mark, .search-result-snip mark { background: color-mix(in srgb, var(--sc, var(--primary)) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
.search-result { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; text-decoration: none; color: var(--text); }
.search-result > i { color: var(--text-sub); width: 18px; text-align: center; }
.search-result-main { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.search-result-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-snip { font-size: .82rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-snip mark { background: color-mix(in srgb, var(--sc, var(--primary)) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
.search-result-type { font-size: .8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.search-result.is-active, .search-result:hover { background: color-mix(in srgb, var(--sc, var(--primary)) 16%, transparent); }
@media (prefers-reduced-motion: reduce) { #search-overlay.is-open, .search-box { animation: none; } }

/* ── COOKIE-CONSENT-BANNER ── */
#consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; display: none; padding: 16px; }
#consent-banner.is-open { display: block; animation: consent-up .3s cubic-bezier(.22,.61,.36,1); }
@keyframes consent-up { from { transform: translateY(110%); } to { transform: translateY(0); } }
.consent-inner { max-width: 940px; margin: 0 auto; background: var(--bg-mid); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: 0 14px 44px rgba(0,0,0,.4); padding: 20px 24px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.consent-text { flex: 1; min-width: 260px; color: var(--text-sub); font-size: .95rem; line-height: 1.6; }
.consent-text strong { color: var(--text); }
.consent-text a { color: var(--sc, var(--primary)); }
.consent-btns { display: flex; gap: 10px; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { #consent-banner.is-open { animation: none; } }

/* ── GLOSSAR (Abkürzungs-Tooltips) ── */
.gloss { border-bottom: 1px dotted var(--text-muted); cursor: help; position: relative; }
.gloss:hover, .gloss:focus { border-bottom-color: var(--sc, var(--primary)); outline: none; }
/* Der Tooltip liegt als EINZELNES Element am <body> (js/glossar.js portiert den
   Inhalt dorthin), damit ihn weder overflow:hidden NOCH ein transform der Karten
   (Hover-Lift macht die Karte zum Containing-Block für position:fixed)
   abschneiden kann. .gloss-pop im Wort ist nur versteckter Datenhalter. */
.gloss .gloss-pop { display: none; }
.gloss-tip {
    position: fixed; z-index: 2000; width: max-content; max-width: 280px;
    background: var(--bg-mid); color: var(--text);
    border: 1px solid var(--card-border); border-radius: 10px; padding: 9px 13px;
    font-size: .85rem; line-height: 1.45; font-weight: 400; box-shadow: 0 10px 30px rgba(0,0,0,.32);
    opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none;
}
.gloss-tip strong { font-weight: 700; }   /* Begriff fett, Erklärung normal */
.gloss-tip.is-on { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .gloss-tip { transition: none; } }
.sidebar-box {
    background: var(--bg-mid); border: 1px solid rgba(20,34,46,.08);
    border-radius: var(--radius-lg); padding: 28px; margin-bottom: 18px;
}
.sidebar-box h4 { font-family: var(--font-heading); font-size: 1.15rem; color: var(--text); margin-bottom: 14px; }
.sidebar-box p { color: var(--text-sub); font-size: 1rem; line-height: 1.65; margin-bottom: 16px; }

/* ── AUSBILDUNG ── */
.ab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: var(--radius-lg); overflow: hidden; }
.ab-block { background: var(--bg-mid); padding: 46px 40px; position: relative; overflow: hidden; }
.ab-block.dark { background: var(--bg); }
.ab-glow { display: none; }
.ab-block h3 { font-family: var(--font-heading); font-size: 1.7rem; color: var(--text); margin-bottom: 12px; }
.ab-block p { color: var(--text-sub); font-size: 1rem; line-height: 1.68; margin-bottom: 22px; }
.step-list { display: flex; flex-direction: column; gap: 12px; margin: 22px 0; }
.step { display: flex; align-items: center; gap: 14px; }
.step-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; flex-shrink: 0; }
.step-dot.on { background: var(--sc, var(--primary)); color: #fff; }
.step-dot.soon { background: color-mix(in srgb, var(--sc, var(--primary)) 25%, transparent); color: var(--sc, var(--primary)); }
.step-dot.off { background: rgba(20,34,46,.09); color: var(--text-muted); }
.step-label { font-size: 1rem; }
.step-label.on { color: var(--text); }
.step-label.soon { color: var(--text-sub); }
.step-label.off { color: var(--text-muted); }

/* ── ACCORDION (Prävention) ── */
.accord { margin-bottom: 12px; background: var(--bg-mid); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--card-border); }
.accord-head { padding: 20px 26px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.accord-head h4 { font-family: var(--font-heading); font-size: 1.22rem; color: var(--text); }
.accord-head i { color: var(--sc, var(--primary)); transition: transform .3s; font-size: 1rem; }
.accord.open .accord-head i { transform: rotate(180deg); }
.accord-body { display: none; padding: 0 26px 24px; color: var(--text-sub); font-size: 1rem; line-height: 1.68; }
.accord.open .accord-body { display: block; }

/* ── SERVICE ── */
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
/* Genau 4 Karten: sauber 2×2 statt 3+1 (keine einzelne Karte allein in der
   letzten Zeile). Ab 5 Karten greift wieder das normale auto-fit.
   :not(.as-list) ist Pflicht — die Listenansicht ist IMMER einspaltig, und
   diese Regel gewinnt sonst gegen .service-grid.as-list (:has zaehlt bei der
   Spezifitaet mit). */
@media (min-width: 700px) {
    .service-grid:not(.as-list):has(> .srv-card:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Festes 2-Spalten-Raster (z.B. Mehrwert-Karten), einspaltig auf schmal */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 680px) { .grid-2 { grid-template-columns: 1fr; } }
.srv-card {
    background: var(--bg-mid); border: 1px solid var(--card-border);
    border-radius: var(--radius-lg); padding: 30px 28px;
    transition: all .3s; position: relative; overflow: hidden;
    display: flex; flex-direction: column;
}
/* Button-Reihe unten in der Karte, mit Abstand zum Text (statt direkt drunter) */
.srv-card .dl-row { margin-top: auto; padding-top: 20px; }
.srv-icon {
    transition: transform .25s ease;
    width: 50px; height: 50px; background: color-mix(in srgb, var(--sc, var(--primary)) 12%, transparent); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--sc, var(--primary)); margin-bottom: 18px;
}
.srv-card h3 { font-family: var(--font-heading); font-size: 1.38rem; color: var(--text); margin-bottom: 10px; }
.srv-card p { color: var(--text-sub); font-size: 1rem; line-height: 1.62; margin-bottom: 22px; }

/* ── DV (ÜBER UNS) ── */
.dv-split { display: grid; grid-template-columns: 1fr 1fr; }
.dv-left { background: var(--bg-mid); padding: 80px 52px; display: flex; flex-direction: column; justify-content: center; }
.dv-right { position: relative; padding: 80px 52px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; cursor: pointer; min-height: 480px; }
.dv-right-bg { position: absolute; inset: 0; background: url('../img/fotos/lagerplatz.jpg') center/cover; opacity: .22; transition: opacity .4s; }
.dv-right:hover .dv-right-bg { opacity: .38; }
.dv-right-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--overlay-rgb),.95) 30%, rgba(var(--overlay-rgb),.4) 100%); }
.dv-right-content { position: relative; z-index: 2; }
.dv-ak-list {
    list-style: none; margin-top: 16px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 13px 28px;
}
.dv-ak-list li {
    font-size: 1rem; color: var(--text-sub);
    display: flex; align-items: center; gap: 9px;
}
.contact-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.contact-row i { width: 22px; color: var(--sc, var(--primary)); font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.contact-row span { color: var(--text-sub); font-size: 1rem; line-height: 1.6; }
.contact-row a { color: var(--text-sub); text-decoration: none; transition: color .2s; }
.contact-row a:hover { color: var(--sc, var(--primary)); }

/* Vorstand cards */
.vorstand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 18px; margin-top: 40px; }
.vs-card {
    background: var(--bg-mid); border-radius: var(--radius-lg);
    padding: 26px 24px; border: 1px solid var(--card-border); text-align: center;
}
.vs-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--bg-card); border: 2px solid color-mix(in srgb, var(--sc, var(--primary)) 30%, transparent);
    margin: 0 auto 14px; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading); font-size: 1.4rem; color: var(--sc, var(--primary));
}
.vs-name { font-family: var(--font-heading); font-size: 1.05rem; color: var(--text); margin-bottom: 5px; }
.vs-role { font-family: var(--font-ui); font-size: 1rem; color: var(--text-muted); letter-spacing: .1em; text-transform: uppercase; }
.vs-email { font-size: 1rem; color: var(--sc, var(--primary)); margin-top: 8px; display: block; text-decoration: none; }
.vs-email:hover { color: var(--link-hover); }

/* DiLei grid */
.dilei-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; margin-top: 28px; }
.dl-person { background: var(--bg-mid); border-radius: 10px; padding: 18px 16px; border: 1px solid var(--card-border); text-align: center; }
.dl-person .vs-avatar { width: 48px; height: 48px; font-size: 1rem; }
.dl-person .vs-name { font-size: 1rem; }

/* ── AK ÜBERSICHT ── */
.ak-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.ak-card {
    background: var(--bg-mid); border-radius: var(--radius-lg);
    padding: 26px; border: 1px solid var(--card-border); transition: all .3s;
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
}
/* „Mehr erfahren" an der Kartenunterkante halten — sonst klebt der Button je
   nach Textlänge unterschiedlich hoch am Absatz (Reihe wirkt unruhig).
   align-self, damit der Button nicht auf Kartenbreite gezogen wird. */
.ak-card .dl-btn { margin-top: auto; align-self: flex-start; }
.ak-badge {
    font-family: var(--font-ui); font-size: 1rem;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--akc,var(--sc, var(--primary))); margin-bottom: 12px;
    display: flex; align-items: center; gap: 7px;
}
.ak-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--akc,var(--sc, var(--primary))); flex-shrink: 0; }
.ak-card h3 { font-family: var(--font-heading); font-size: 1.3rem; color: var(--text); margin-bottom: 7px; }
.ak-card p { color: var(--text-sub); font-size: 1rem; line-height: 1.6; margin-bottom: 18px; }

/* ── AK DETAIL ── */
.ak-hero { position: relative; height: 48vh; min-height: 320px; overflow: hidden; display: flex; align-items: flex-end; }
.ak-hero::after {
    content: '';
    position: absolute;
    right: -4%; top: -8%;
    width: 340px; height: 340px;
    background: url('../img/lilie-fill.svg') center/contain no-repeat;
    opacity: .04;
    pointer-events: none;
    z-index: 1;
}
.ak-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .5s; }
.ak-hero:hover .ak-hero-bg { transform: scale(1.03); }
.ak-hero-ov { position: absolute; inset: 0; background: linear-gradient(to right, rgba(var(--overlay-rgb),.95) 0%, rgba(var(--overlay-rgb),.5) 100%); }
.ak-hero-c { position: relative; z-index: 2; width: 100%; padding-bottom: 40px; }
.ak-intro-grid { display: grid; grid-template-columns: 1fr 280px; gap: 48px; align-items: start; }
.ak-info-card { background: var(--bg-mid); border: 1px solid rgba(20,34,46,.12); border-radius: var(--radius-lg); padding: 24px; }
.ak-info-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(20,34,46,.09); font-size: 1rem; color: var(--text-sub); }
.ak-info-row:last-child { border-bottom: none; padding-bottom: 0; }
.ak-info-row i { width: 16px; text-align: center; color: var(--sc, var(--primary)); flex-shrink: 0; }
/* Aufgaben als Lilien-Aufzählung (zweispaltig), nicht als Kästchen-Reihe: als
   Einzelkarten wirkte die Liste unruhig und die Kästen versprachen Interaktion,
   die es nicht gibt. */
.ak-tasks { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px 44px; }
.ak-task { display: flex; align-items: flex-start; gap: 12px; padding: 0; background: none; border: 0; font-size: 1rem; color: var(--text-sub); line-height: 1.62; }
.ak-task i { color: var(--sc, var(--primary)); margin-top: .34em; flex-shrink: 0; }
/* Größe in rem, NICHT in em: das Element hatte font-size:0 (um die FA-Glyphe zu
   unterdrücken), womit .85em = 0px ergab — die Lilie war unsichtbar. Die Glyphe
   blendet ohnehin ::before aus, also braucht es font-size:0 nicht. */
.ak-task .fa-check { width: .8rem; height: .8rem; display: inline-block; background-color: var(--sc, var(--primary)); -webkit-mask: var(--lilie-mask) center/contain no-repeat; mask: var(--lilie-mask) center/contain no-repeat; }
.ak-task .fa-check::before { display: none; }
.ak-members { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.ak-member { background: var(--bg-mid); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--card-border); transition: all .3s; }
.ak-mimg { height: 140px; overflow: hidden; position: relative; }
.ak-mimg img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; filter: grayscale(15%); transition: filter .3s, transform .4s; }
.ak-member:hover .ak-mimg img { filter: grayscale(0%); transform: scale(1.05); }
.ak-member:hover { transform: translateY(var(--card-lift)); }   /* leichtes Anheben wie die Aktuelles-Karten (ak-member ist kein Link) */
.ak-mbody { padding: 14px; }
.ak-mname { font-family: var(--font-heading); font-size: 1rem; color: var(--text); margin-bottom: 3px; }
.ak-mrole { font-family: var(--font-ui); font-size: 1rem; color: var(--akc,var(--sc, var(--primary))); letter-spacing: .07em; text-transform: uppercase; }
.ak-dls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.ak-dl { background: var(--bg-mid); border-radius: var(--radius-lg); padding: 18px; border: 1px solid var(--card-border); display: flex; align-items: center; gap: 12px; cursor: pointer; transition: all .25s; }
.ak-dl-ico { width: 40px; height: 40px; border-radius: 8px; background: color-mix(in srgb,var(--sc, var(--primary)) 12%,transparent); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--sc, var(--primary)); flex-shrink: 0; }
.ak-dl-name { font-size: 1rem; font-weight: 700; color: var(--text); }
.ak-dl-meta { font-size: 1rem; color: var(--text-muted); }
/* Optionale Beschreibung unter Name und Groesse. Sobald eine Kachel mehrzeilig
   wird, sitzt das Icon oben statt mittig — sonst schwebt es neben dem Text. */
.ak-dl-desc { font-size: .94rem; color: var(--text-sub); line-height: 1.5; margin-top: 5px; }
.ak-dl:has(.ak-dl-desc) { align-items: flex-start; }

/* ── STUFEN ── */
.stufen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 16px; }
.stufen-card { border-radius: var(--radius-lg); padding: 30px 24px; border: 1px solid var(--card-border); border-bottom: 3px solid var(--sc); overflow: hidden; position: relative; transition: transform .3s, box-shadow .3s; cursor: pointer; }
.stufen-card-bg { position: absolute; inset: 0; background: color-mix(in srgb, var(--sc) 6%, var(--bg-mid)); }
.stufen-card-content { position: relative; z-index: 1; }
.stufen-card h3 { font-family: var(--font-heading); font-size: 1.22rem; color: var(--text); margin-bottom: 6px; hyphens: auto; overflow-wrap: break-word; }
.stufen-card .age { font-family: var(--font-ui); font-size: .8rem; font-weight: 700; text-transform: uppercase; color: var(--sc); letter-spacing: .12em; margin-bottom: 10px; }
.stufen-card p { color: var(--text-sub); font-size: 1rem; line-height: 1.6; }

/* ── STÄMME ── */
.stamm-search {
    width: 100%; padding: 13px 22px;
    background: rgba(20,34,46,.08); border: 1px solid rgba(20,34,46,.16);
    border-radius: 999px; color: var(--text);
    font-family: var(--font-ui); font-size: 1rem;
    margin-bottom: 28px; transition: border-color .3s;
}
/* Suche mit Treffer-Zähler im Feld (Stammesfinder) */
.stamm-search-wrap { position: relative; flex: 1; min-width: 240px; display: flex; align-items: center; }
.stamm-search-wrap .stamm-search { margin: 0; padding-right: 105px; }
.stamm-count {
    position: absolute; right: 20px;
    color: var(--text-muted); font-size: .92rem; white-space: nowrap;
    pointer-events: none;
}
.stamm-search:focus { outline: none; border-color: var(--sc, var(--primary)); background: color-mix(in srgb, var(--sc, var(--primary)) 5%, transparent); }
.stamm-search::placeholder { color: var(--text-muted); }
.stamme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.stamm { background: var(--bg-mid); border-radius: 8px; padding: 14px 18px; border: 1px solid var(--card-border); transition: border-color .25s; }
.stamm-name { font-size: 1rem; color: var(--text); font-weight: 600; margin-bottom: 3px; }
.stamm-ort { font-size: 1rem; color: var(--text-muted); }
.stamm { cursor: pointer; }
.stamm.is-active { border-color: var(--sc, var(--primary)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sc, var(--primary)) 35%, transparent); }
.stamm-links { margin-top: 12px; display: flex; gap: 16px; }
.stamm-ico { color: var(--text-sub); font-size: 1.15rem; line-height: 1; text-decoration: none; transition: color .2s, transform .2s; }
.stamm-ico:hover { color: var(--sc, var(--primary)); transform: translateY(-2px); }
.leaflet-popup-content .stamm-links { margin-top: 8px; }
.leaflet-popup-content .stamm-ico { color: var(--sc, var(--primary)); font-size: 1.2rem; }

/* ── KONTAKT ── */
.kontakt-wrap { display: grid; grid-template-columns: 1fr 1fr; min-height: 85vh; }
.kl {
    background: var(--bg-mid); padding: 80px 60px;
    display: flex; flex-direction: column; justify-content: center;
    border-right: 1px solid rgba(20,34,46,.08);
}
.kl h2 { font-family: var(--font-heading); font-size: 2.6rem; color: var(--text); margin-bottom: 14px; line-height: 1.1; }
.kl h2 em { color: var(--sc, var(--primary)); font-style: italic; }
.kl > p { color: var(--text-sub); line-height: 1.7; font-size: 1rem; margin-bottom: 36px; }
.kl-contacts { display: flex; flex-direction: column; gap: 2px; }
.kl-row {
    display: flex; align-items: center; gap: 16px;
    padding: 12px 14px; border-radius: var(--radius-lg);
    text-decoration: none; color: inherit;
    transition: background .2s;
}
.kl-row:hover { background: rgba(20,34,46,.07); }
.kl-icon {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    background: color-mix(in srgb, var(--sc, var(--primary)) 12%, transparent);
    display: flex; align-items: center; justify-content: center;
    color: var(--sc, var(--primary)); font-size: 15px;
    transition: background .2s;
}
.kl-row:hover .kl-icon { background: color-mix(in srgb, var(--sc, var(--primary)) 22%, transparent); }
.kl-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.kl-label { font-size: 1rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.kl-value { font-size: 1rem; color: var(--text-sub); transition: color .2s; }
.kl-row:hover .kl-value { color: var(--text); }
.kl-ext { font-size: 1rem; color: var(--text-muted); opacity: 0; transition: opacity .2s; }
.kl-row:hover .kl-ext { opacity: 1; }
.kl-divider { height: 1px; background: rgba(20,34,46,.09); margin: 10px 14px; }
.kr { background: var(--bg); padding: 80px 60px; display: flex; flex-direction: column; justify-content: center; }
.f-field { margin-bottom: 22px; }
.f-field label { display: block; font-family: var(--font-ui); font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-sub); margin-bottom: 9px; }
/* Feld-Wrapper: nur Positionierungs-/Layout-Kontext (der Doodle-Look
   hängt daran seinen gezeichneten Rahmen; im Normal-Look unsichtbar) */
.ff-box { display: block; position: relative; }
.f-field input, .f-field textarea, .f-field select {
    width: 100%; padding: 13px 17px;
    background: rgba(20,34,46,.07); border: 1px solid rgba(20,34,46,.16);
    border-radius: var(--radius); color: var(--text);
    font-family: var(--font-ui); font-size: 1rem;
    transition: border-color .3s, background .3s;
}
.f-field input:focus, .f-field textarea:focus, .f-field select:focus { outline: none; border-color: var(--sc, var(--primary)); background: color-mix(in srgb, var(--sc, var(--primary)) 5%, transparent); }
.f-field select option { background: var(--bg-mid); color: var(--text); }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── INTERESSIERTE (Homepage) ── */
.int-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.int-right { display: flex; flex-direction: column; gap: 14px; }
.int-card {
    display: flex; gap: 18px; align-items: stretch;
    background: var(--bg-mid); border: 1px solid var(--card-border);
    border-radius: var(--radius-lg); padding: 22px 24px;
    transition: all .3s; position: relative; overflow: hidden;
}
/* Textspalte füllt die Kartenhöhe, damit der Link unten sitzt (Beschreibungen
   sind sehr unterschiedlich lang — sonst flattern die Links auf halber Höhe). */
.int-card > div:last-child { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.int-card .int-link { margin-top: auto; align-self: flex-start; }
.int-icon {
    width: 42px; height: 42px; flex-shrink: 0;
    background: color-mix(in srgb, var(--sc, var(--primary)) 12%, transparent); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--sc, var(--primary)); font-size: 1rem;
}
.int-title { font-family: var(--font-heading); font-size: 1.05rem; color: var(--text); margin-bottom: 6px; }
.int-desc { color: var(--text-sub); font-size: 1rem; line-height: 1.62; margin-bottom: 10px; }
.int-link { color: var(--sc, var(--primary)); font-size: 1rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.int-link i { font-size: 1rem; }

/* ── Doodle-Platzhalterrahmen: gerahmter Bildplatz neben Textblöcken (im
      .int-split-Grid), bis echte Fotos nachkommen. ── */
.ph-doodle {
    margin: 0; position: relative; border-radius: var(--radius-lg);
    aspect-ratio: 4 / 3; min-height: 200px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 24px; text-align: center;
    background: color-mix(in srgb, var(--sc, var(--primary)) 5%, transparent);
    border: 2px dashed color-mix(in srgb, var(--text-sub) 42%, transparent);
}
.ph-doodle i { font-size: 2.4rem; color: var(--sc, var(--primary)); opacity: .5; }
.ph-doodle figcaption { font-family: var(--font-ui); font-weight: 700; letter-spacing: .04em; color: var(--text-sub); }
.ph-doodle figcaption small { display: block; margin-top: 3px; font-weight: 400; font-size: .82rem; opacity: .8; }

/* ── BLOG ── */
.blog-layout { display: grid; grid-template-columns: 1fr 300px; gap: 32px; }

/* ── ARTICLE (news post pages) ── */
.article-hero { position: relative; height: clamp(240px, 40vw, 420px); overflow: hidden; border-radius: var(--radius-lg); margin-bottom: 36px; }
.article-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.article-hero-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 60%); pointer-events: none; }
/* Foto-Platzhalter in Artikeln (bis echte Bilder eingesetzt sind) */
.foto-ph { margin: 20px 0; padding: 34px 20px; border: 2px dashed var(--card-border); border-radius: var(--radius-lg); text-align: center; color: var(--text-muted); font-family: var(--font-ui); font-size: .95rem; background: var(--bg-mid); }
.foto-ph i { display: block; font-size: 1.6rem; margin-bottom: 8px; opacity: .55; }
/* Bilder in Artikeln: Rahmen (.art-frame) + Collage (bis 3) + Karussell (ab 4).
   Breite == Textbreite == Hero-Breite. Doodle-Kreiderahmen greift auf .art-frame,
   Lightbox greift automatisch. Aufbau von Collage/Karussell: js/article-media.js */
.art-frame { position: relative; display: block; border-radius: var(--radius); overflow: hidden; }
.art-frame img { width: 100%; display: block; }
.art-figure { margin: 22px 0; }
.art-figure figcaption { color: var(--text-muted); font-size: .9rem; margin-top: 8px; font-family: var(--font-ui); }

/* Fallback vor JS-Init (Collage-Optik) */
.art-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0; }
.art-gallery > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 20%; border-radius: var(--radius); display: block; }

/* Collage: max 3 Bilder, drei nur im breitesten Viewport */
.art-collage { display: grid; gap: 10px; margin: 22px 0; grid-template-columns: 1fr; }
.art-collage.cols-2 { grid-template-columns: 1fr 1fr; }
.art-collage.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.art-collage .art-frame img { aspect-ratio: 4 / 3; object-fit: cover; object-position: center 20%; }
@media (max-width: 900px) { .art-collage.cols-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .art-collage.cols-2, .art-collage.cols-3 { grid-template-columns: 1fr; } }

/* Karussell: ab 4 Bildern, spaltenbreit (nicht das grosse .gallery-Hero-Karussell) */
.art-carousel { position: relative; margin: 22px 0; }
.art-carousel .acx-viewport { overflow: hidden; border-radius: var(--radius); }
.art-carousel .acx-track { display: flex; transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.art-carousel .acx-slide { flex: 0 0 100%; }
.art-carousel .acx-slide .art-frame { border-radius: 0; }
.art-carousel .acx-slide img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 20%; }
.art-carousel .acx-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
    background: rgba(15,25,35,.55); color: #fff; cursor: pointer; display: grid; place-items: center;
    transition: background .2s, border-color .2s;
}
.art-carousel .acx-nav:hover { background: var(--sc, var(--primary)); border-color: var(--sc, var(--primary)); }
.art-carousel .acx-nav:disabled { opacity: .3; cursor: default; }
.art-carousel .acx-prev { left: 12px; }
.art-carousel .acx-next { right: 12px; }
/* Fortschrittspunkte als Overlay unten AUF dem Bild (wie das Startseiten-Karussell),
   nicht mehr als Zeile darunter. */
.art-carousel .acx-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 3; display: flex; gap: 8px; }
.art-carousel .acx-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.4); cursor: pointer; transition: width .3s, background .3s; }
.art-carousel .acx-dot.is-active { width: 26px; background: var(--sc, var(--primary)); }

/* ── Doodle-Select: eigenes Dropdown (ersetzt <select data-doodle>, js/doodle-select.js) ── */
.ds { position: relative; display: inline-block; font-family: var(--font-ui); }
.ds > select { display: none; }
.ds-btn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border: 1px solid var(--card-border); border-radius: 999px; background: var(--bg-mid); color: var(--text); font-family: var(--font-ui); font-size: 1rem; line-height: 1.2; cursor: pointer; }
.ds-caret { font-size: .78rem; color: var(--text-muted); transition: transform .2s ease; }
.ds.is-open .ds-caret { transform: rotate(180deg); }
.ds-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 100%; margin: 0; padding: 6px; list-style: none; background: var(--bg-mid); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: 0 14px 34px rgba(10,20,30,.22); display: none; }
.ds.is-open .ds-menu { display: block; }
.ds-opt { padding: 9px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap; color: var(--text-sub); font-size: .98rem; }
.ds-opt:hover, .ds-opt:focus { background: color-mix(in srgb, var(--sc, var(--primary)) 12%, transparent); color: var(--text); outline: none; }
.ds-opt.is-selected { color: var(--sc, var(--primary)); font-weight: 700; }
.article-hero-meta { position: absolute; bottom: 24px; left: 28px; right: 28px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.article-prose { max-width: none; }
.article-prose h2 { font-family: var(--font-heading); font-size: 1.55rem; color: var(--text); margin: 32px 0 12px; }
.article-prose p { color: var(--text-sub); font-size: 1rem; line-height: 1.72; margin-bottom: 18px; }
.article-prose ul { color: var(--text-sub); font-size: 1rem; line-height: 1.72; margin-bottom: 18px; padding-left: 22px; }
.article-prose ul li { margin-bottom: 6px; }
.article-prose strong { color: var(--text); }
.article-prose a { color: var(--sc, var(--primary)); }
.article-infobox { background: color-mix(in srgb, var(--sc, var(--primary)) 8%, transparent); border: 1px solid color-mix(in srgb, var(--sc, var(--primary)) 20%, transparent); border-radius: var(--radius-lg); padding: 24px 28px; margin: 28px 0; }
.article-infobox p { margin: 0; }
.article-share { display: flex; align-items: center; gap: 12px; padding: 20px 0; border-top: 1px solid rgba(20,34,46,.12); border-bottom: 1px solid rgba(20,34,46,.12); margin: 32px 0; flex-wrap: wrap; }
.article-share-label { font-family: var(--font-ui); font-weight: 700; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.blog-post { display: block; text-decoration: none; background: var(--bg-mid); border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 20px; transition: all .3s; }
.bp-img { height: 190px; overflow: hidden; position: relative; }
/* Datum-Badge auf Termin-Karten im Aktuelles-Feed */
.bp-evdate {
    position: absolute; left: 14px; bottom: 14px; z-index: 2;
    display: flex; flex-direction: column; align-items: center; line-height: 1;
    background: rgba(var(--overlay-rgb), .88); color: #fff;
    border-radius: 10px; padding: 9px 13px 8px;
    font-family: var(--font-ui); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
}
.bp-evdate strong { font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 3px; }
.bp-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform .4s; }
.blog-post:hover .bp-img img { transform: scale(1.03); }
.bp-body { padding: 26px; }
.bp-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; flex-wrap: wrap; }
.bp-date { font-family: var(--font-ui); font-size: 1rem; color: var(--text-muted); letter-spacing: .1em; }
.bp-author { font-size: 1rem; color: var(--text-sub); }
.bp-title { font-family: var(--font-heading); font-size: 1.45rem; color: var(--text); margin-bottom: 10px; line-height: 1.2; }
.bp-excerpt { font-size: 1rem; color: var(--text-sub); line-height: 1.68; margin-bottom: 16px; }
.blog-sidebar-sub { background: var(--bg-mid); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 16px; border: 1px solid var(--card-border); }
.blog-sidebar-sub h4 { font-family: var(--font-heading); font-size: 1.1rem; color: var(--text); margin-bottom: 10px; }
.blog-sidebar-sub p { font-size: 1rem; color: var(--text-sub); line-height: 1.6; margin-bottom: 14px; }
.nl-form { display: flex; gap: 8px; }
.nl-input { flex: 1; padding: 11px 14px; background: rgba(20,34,46,.08); border: 1px solid rgba(20,34,46,.16); border-radius: 8px; color: var(--text); font-family: var(--font-ui); font-size: 1rem; }
.nl-input:focus { outline: none; border-color: var(--sc, var(--primary)); }

/* ── PAGE HERO (Prävention etc.) ── */
.page-hero-img { position: relative; height: 38vh; min-height: 260px; overflow: hidden; display: flex; align-items: flex-end; padding: 38px 52px; }
.phi-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.phi-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(var(--overlay-rgb),.95) 0%, rgba(var(--overlay-rgb),.5) 100%); }
.phi-content { position: relative; z-index: 2; }

/* Page header utility */
.pg-header {
    padding-top: 132px; padding-bottom: 30px;
    position: relative;
}
.pg-header::after {
    content: '';
    position: absolute;
    right: 2%; top: 148px;
    width: 240px; height: 240px;
    background: url('../img/lilie-fill.svg') center/contain no-repeat;
    filter: brightness(0);   /* dunkles Wasserzeichen auf hellem Grund */
    opacity: .05;
    pointer-events: none;
}
/* Hero-Untertitel im schlichten Kopf enger an den Inhalt (sonst großer Leerraum,
   da .sec-sub sein volles 44px-Bottom behält + pg-header noch 30px Padding). */
.pg-header .sec-sub { margin-bottom: 10px; }

/* ── NEUIGKEITEN-ARCHIV: kompakte Jahresliste (/neuigkeiten) ──
   Lag im Seiten-<style>; dort erreicht es die Kirby-Seite nie. */
.arch-year { margin-bottom: 22px; }
.arch-year-h { font-family: var(--font-heading); font-size: 1.05rem; color: var(--text-muted); border-bottom: 1px solid var(--card-border); padding-bottom: 6px; margin: 0 0 8px; }
.arch-list { list-style: none; padding: 0; margin: 0; max-width: 820px; }
.arch-list a { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; padding: 8px 0; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent); transition: color .15s ease, padding-left .15s ease; }
.arch-list a:hover, .arch-list a:focus-visible { color: var(--sc, var(--primary)); padding-left: 6px; }
.arch-list .at { color: var(--text); font-size: .98rem; line-height: 1.35; }
.arch-list a:hover .at, .arch-list a:focus-visible .at { color: var(--sc, var(--primary)); }
.arch-list .ad { color: var(--text-muted); font-size: .82rem; white-space: nowrap; }

/* ── GLOSSAR: Begriffsliste (/glossar) ──
   Lag im Seiten-<style>; dort erreicht es die Kirby-Seite nie. */
.gloss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; margin-top: 30px; }
.gl-item { background: var(--bg-mid); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 18px 20px; }
.gl-term { font-family: var(--font-heading); color: var(--text); font-size: 1.08rem; margin-bottom: 6px; }
.gl-abbr { color: var(--sc, var(--primary)); font-weight: 700; }
.gl-name { color: var(--text); }
.gl-abbr + .gl-name { color: var(--text-muted); font-family: var(--font-ui); font-size: .95rem; margin-left: 4px; }
.gl-erk { color: var(--text-sub); font-size: 1rem; line-height: 1.6; }

/* ── DOODLE-GALERIE (/doodle-vorschau) ──
   Lag als <style>-Block in doodle-vorschau.html. Hierher gezogen, damit der
   Kirby-Baustein dieselben Klassen nutzen kann. */
.dg-note { color: var(--text-sub); font-size: 1rem; line-height: 1.7; max-width: 720px; }
.dg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; margin-top: 30px; }
.dg-card { margin: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 16px; background: var(--bg-mid); border: 1px solid var(--card-border); border-radius: var(--radius-lg); }
.dg-box { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }
.dg-box .dood-svg { width: 92px; height: 92px; }
.dg-card figcaption { font-family: var(--font-ui); font-weight: 700; font-size: .92rem; letter-spacing: .03em; color: var(--text); }
.dg-card small { color: var(--text-sub); font-weight: 400; font-size: .78rem; }
.dg-note #dg-count { color: var(--text); }
.dg-note a { color: var(--sc, var(--primary)); }
/* Doodle-Look: gekreidelter Rahmen statt glatter Border, wie die Karten sonst auf der Seite */
.doodle .dg-card { border-color: transparent; background: color-mix(in srgb, var(--dood-ink) 4%, transparent); }
.doodle .dg-card::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg); border: var(--dood-stroke-fine) solid var(--dood-ink); filter: url(#chalkf); opacity: .55; pointer-events: none; }

/* ── MATERIALAUSLEIHE: Material-Raster ──
   Lag früher als <style>-Block in materialausleihe.html. Hierher gezogen, weil
   der material-Block in Kirby dieselben Klassen nutzt — dort fehlten die Regeln
   und die Karten richteten sich nach der Bildgröße statt zuzuschneiden. */
.mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 18px; margin-top: 30px; }
.mat-card { background: var(--bg-mid); border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease; }
.mat-card:hover { transform: translateY(-6px); }
.mat-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }   /* schneidet zu, statt sich anzupassen */
.mat-img img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--bg-subtle); transition: transform .45s ease; }
.mat-card:hover .mat-img img { transform: scale(1.06); }
.mat-card-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--bg-subtle); color: var(--text-muted); font-size: 2rem; }
.mat-card-body { padding: 16px 18px; }
.mat-card h3 { font-family: var(--font-heading); font-size: 1.1rem; color: var(--text); margin-bottom: 4px; }
.mat-card p { color: var(--text-sub); font-size: .95rem; line-height: 1.55; margin: 0; }

/* ── LILIE BULLET POINTS ── */
.article-prose ul, .accord-body ul { list-style: none; padding-left: 0; }
.article-prose ul li, .accord-body ul li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: .35em;
}
.article-prose ul li::before, .accord-body ul li::before {
    content: '';
    position: absolute;
    left: 0; top: .55em;
    width: .75em; height: .75em;
    background-color: var(--sc, var(--primary));
    -webkit-mask: var(--lilie-mask) center/contain no-repeat;
    mask: var(--lilie-mask) center/contain no-repeat;
}

/* Nummerierte Liste mit Kreis-Badge (blauer Kreis + Zahl, wie die Gerüst-Schritte) */
.article-prose ol { list-style: none; padding-left: 0; counter-reset: li; display: grid; gap: 10px; margin-bottom: 20px; }
.article-prose ol li { counter-increment: li; display: flex; gap: 12px; align-items: baseline; color: var(--text-sub); font-size: 1rem; line-height: 1.6; }
.article-prose ol li::before {
    content: counter(li); flex: none; width: 26px; height: 26px; border-radius: 50%;
    background: var(--sc, var(--primary)); color: #fff; display: grid; place-items: center;
    font-family: var(--font-heading); font-size: .85rem; font-weight: 700;
}

/* Lilie als Aufzählungszeichen in Flex-Listen (Ersatz für fa-check) */
.lilie-tick { flex-shrink: 0; width: .9em; height: .9em; margin-top: .55em; background-color: var(--sc, var(--primary)); -webkit-mask: var(--lilie-mask) center/contain no-repeat; mask: var(--lilie-mask) center/contain no-repeat; }
/* 2x2-Punkteraster mit Lilien-Bullet (z.B. "Mehr als ein Ehrenamt") */
.give-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 44px; margin-top: 14px; }
.give-item { display: flex; gap: 13px; align-items: flex-start; }
.give-item .lilie-tick { width: 1.05em; height: 1.05em; margin-top: .55em; }
.give-h { font-family: var(--font-heading); font-size: 1.08rem; color: var(--text); margin-bottom: 6px; }
.give-p { color: var(--text-sub); font-size: 1rem; line-height: 1.7; }
@media (max-width: 620px) { .give-grid { grid-template-columns: 1fr; gap: 22px; } }

/* ── AK MITMACHEN-PLATZHALTER ── */
.ak-member-cta {
    background: transparent; border: 2px dashed rgba(20,34,46,.22);
    border-radius: var(--radius-lg); display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 32px 20px; text-align: center; cursor: pointer;
    transition: all .3s; min-height: 160px; text-decoration: none;
}
.ak-member-cta:hover { border-color: var(--sc, var(--primary)); background: color-mix(in srgb, var(--sc, var(--primary)) 5%, transparent); }
.ak-cta-icon {
    width: 52px; height: 52px; border-radius: 50%;
    border: 2px dashed rgba(20,34,46,.28);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: var(--text-muted); margin-bottom: 12px; transition: all .3s;
}
.ak-member-cta:hover .ak-cta-icon { border-color: var(--sc, var(--primary)); color: var(--sc, var(--primary)); }
.ak-cta-label { font-family: var(--font-heading); font-size: 1rem; color: var(--text-sub); margin-bottom: 4px; }
.ak-cta-sub { font-size: 1rem; color: var(--text-muted); line-height: 1.5; }
/* AKs ohne Mitglieder: die "Du?"-Karte ist der einzige Grid-Eintrag und
   würde über auto-fit die volle Breite füllen → auf Standard-Kartengröße
   begrenzen, links ausgerichtet. */
.ak-members > .ak-member-cta:only-child { width: 260px; max-width: 100%; justify-self: start; }

/* "Du?"-Mitmach-Karte: nutzt den normalen Personenkarten-Rahmen (.ak-member),
   führt aber ins Kontaktformular statt zu einer Person. */
.ak-join .ak-mbody { display: block; }
.ak-join-sub { font-size: .92rem; color: var(--text-muted); line-height: 1.45; margin-top: 3px; }
.ak-members > .ak-member.ak-join:only-child { width: 260px; max-width: 100%; justify-self: start; }

/* Leerer Termin-Filter: freundlicher Hinweis statt leerer Liste */
/* Hinweis auf AK-/Stufenseiten, wenn gerade nichts ansteht. Bewusst in der
   Akzentfarbe der Seite und fett: sonst liest man ueber die Aussage hinweg und
   haelt den leeren Bereich fuer einen Ladefehler. --sc gilt nur auf getoenten
   Seiten, sonst greift der Fallback auf --primary. Beide Toene sind als
   Akzenttext auf AA geprueft. */
/* Datenschutzhinweis am Formular: gedaempft, aber lesbar — er soll informieren,
   nicht mit dem Absende-Button konkurrieren. */
.f-datenschutz { color: var(--text-sub); font-size: .92rem; line-height: 1.6; margin: 0 0 16px; }
.f-datenschutz a { color: var(--sc, var(--primary)); text-decoration: underline; text-underline-offset: 2px; }

/* Fehlermeldungen im Kontaktformular. In der CTA-Farbe, weil es um etwas geht,
   das der Mensch beheben muss — nicht in der ruhigen Akzentfarbe. */
.f-fehler { background: color-mix(in srgb, var(--cta) 8%, var(--bg-mid)); border: 1px solid color-mix(in srgb, var(--cta) 35%, transparent); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 22px; color: var(--text); font-size: 1rem; line-height: 1.6; }
.f-fehler p { margin: 0 0 6px; }
.f-fehler ul { margin: 0; padding-left: 1.1em; }
.f-fehler a { color: var(--cta-text); text-decoration: underline; text-underline-offset: 2px; }

.ev-none { font-weight: 700; color: var(--sc, var(--primary)); font-size: 1.02rem; line-height: 1.65; margin: 0; }
.ev-none a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ev-none .fa-calendar-xmark { margin-right: .5em; opacity: .85; }

.ev-empty { padding: 48px 4px 12px; color: var(--text-sub); text-align: center; }
.ev-empty-ico { width: 60px; height: 60px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--sc, var(--primary)) 12%, transparent); color: var(--sc, var(--primary)); font-size: 1.5rem; }
.ev-empty h3 { font-family: var(--font-heading); font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: var(--text); margin-bottom: 8px; }
.ev-empty p { font-size: 1.02rem; line-height: 1.7; max-width: 520px; margin: 0 auto 24px; }
.ev-empty p a { color: var(--sc, var(--primary)); text-decoration: underline; text-underline-offset: 2px; }
.ev-empty-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ── NEWS FILTER ── */
.news-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.nf-chip {
    font-family: var(--font-ui); font-size: 1rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 7px 16px; border-radius: 50px;
    border: 1px solid rgba(20,34,46,.22);
    background: transparent; color: var(--text-sub); cursor: pointer; transition: all .2s;
}
.nf-chip:hover { border-color: var(--sc, var(--primary)); color: var(--text); }
.nf-chip.active { background: var(--sc, var(--primary)); border-color: var(--sc, var(--primary)); color: #fff; }
/* Termine-Filter: jeder Chip in seiner Stufen-/AK-Farbe (--cc inline gesetzt; "Alle" ohne --cc bleibt neutral) */
.ev-toolbar .nf-chip[style*="--cc"] { color: var(--cc); border-color: color-mix(in srgb, var(--cc) 42%, transparent); }
.ev-toolbar .nf-chip[style*="--cc"]:hover { border-color: var(--cc); color: var(--cc); }
.ev-toolbar .nf-chip[style*="--cc"].active { background: color-mix(in srgb, var(--cc) 20%, transparent); border-color: var(--cc); color: var(--cc); }

/* ── TERMINE FILTER ── */
.ev-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; align-items: center; }
.ev-view-toggle { margin-left: auto; display: flex; gap: 4px; }
.ev-view-btn {
    width: 34px; height: 34px; border-radius: 6px;
    background: transparent; border: 1px solid rgba(20,34,46,.22);
    color: var(--text-sub); cursor: pointer; transition: all .2s;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.ev-view-btn.active, .ev-view-btn:hover { background: var(--sc, var(--primary)); border-color: var(--sc, var(--primary)); color: #fff; }
.event-row.ev-hidden { display: none; }
.event-row.is-flash, .ev-ov-row.is-flash { animation: ev-flash 2.2s ease; border-radius: 10px; }
@keyframes ev-flash { 0% { background: color-mix(in srgb, var(--sc, var(--primary)) 20%, transparent); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .event-row.is-flash, .ev-ov-row.is-flash { animation: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sc, var(--primary)) 45%, transparent); } }

/* ── MONATSRASTER ── */
.ev-cal-grid-wrap { background: var(--surface); border: 1px solid var(--card-border, rgba(0,0,0,.08)); border-radius: 16px; padding: 24px; }
.ev-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ev-cal-nav-title { font-family: var(--font-heading); font-size: 1.4rem; color: var(--text); }
.ev-cal-nav-btn { background: none; border: 1px solid var(--card-border, rgba(0,0,0,.1)); border-radius: 8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); transition: background .2s, border-color .2s, color .2s; }
.ev-cal-nav-btn:hover { background: color-mix(in srgb,var(--sc, var(--primary)) 8%,transparent); border-color: var(--sc, var(--primary)); color: var(--sc, var(--primary)); }
.ev-cal-nav-lead { display: flex; align-items: center; gap: 8px; }
.ev-cal-today { font-family: var(--font-ui); font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--card-border, rgba(0,0,0,.14)); background: none; color: var(--text-sub); cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.ev-cal-today:hover { border-color: var(--sc, var(--primary)); color: var(--sc, var(--primary)); background: color-mix(in srgb, var(--sc, var(--primary)) 8%, transparent); }
.ev-cal-dow-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 3px; }
.ev-grid-dow { text-align: center; font-family: var(--font-ui); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); padding: 4px 0; }
.ev-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
/* min-width:0 → lange Termin-Titel (nowrap) blähen die 1fr-Spalten NICHT mehr auf */
.ev-grid-cell { min-width: 0; min-height: 54px; border-radius: 6px; padding: 6px 5px 4px; display: flex; flex-direction: column; gap: 3px; background: color-mix(in srgb,var(--text) 3%,transparent); transition: background .2s; }
.ev-grid-empty { background: transparent !important; }
.ev-grid-dn { font-family: var(--font-ui); font-size: .8rem; color: var(--text-sub); line-height: 1; }
.ev-grid-today { background: color-mix(in srgb, var(--sc, var(--primary)) 12%, transparent) !important; outline: 1px solid color-mix(in srgb, var(--sc, var(--primary)) 35%, transparent); }
.ev-grid-today .ev-grid-dn { color: var(--sc, var(--primary)); font-weight: 700; }
.ev-grid-has-ev { background: color-mix(in srgb,var(--text) 5%,transparent); }
/* Event bars inside cells — Fallback-Farbe (Primary), damit auch Termine
   ohne Stufen-Chip (Stämme/DV/Leitende) sichtbar sind */
.ev-bar { max-width: 100%; box-sizing: border-box; border-radius: 3px; padding: 1px 5px; font-size: .62rem; font-family: var(--font-ui); font-weight: 700; line-height: 1.5; overflow: hidden; min-height: 14px; background: color-mix(in srgb, var(--sc, var(--primary)) 88%, transparent); }
.ev-bar-name { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.ev-bar.chip-orange { background: rgba(224,94,20,.88); }
.ev-bar.chip-blue   { background: rgba(47,83,167,.88); }
.ev-bar.chip-green  { background: rgba(0,130,60,.88); }
.ev-bar.chip-purple { background: rgba(139,92,246,.88); }
.ev-bar.chip-teal   { background: rgba(20,184,166,.88); }
.ev-bar.chip-red    { background: rgba(204,31,47,.88); }
.ev-bar.chip-leiter { background: rgba(148,112,10,.9); }
.ev-bar.chip-white  { background: rgba(120,140,155,.9); }
/* Tage mit Terminen sind antippbar → Tages-Panel */
.ev-grid-cell[data-day] { cursor: pointer; }
.ev-grid-cell[data-day]:hover { background: color-mix(in srgb, var(--sc, var(--primary)) 10%, transparent); }
/* Tage MIT Terminen: beim Hover Balken aufhellen + leicht anheben → klar klickbar */
.ev-grid-has-ev { transition: background .18s, box-shadow .18s; }
.ev-grid-has-ev:hover { background: color-mix(in srgb, var(--sc, var(--primary)) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc, var(--primary)) 40%, transparent); }
.ev-grid-has-ev:hover .ev-bar { filter: brightness(1.12) saturate(1.1); }
.ev-grid-sel { outline: 2px solid var(--sc, var(--primary)); outline-offset: -1px; }
.ev-cal-day-panel { margin-top: 14px; background: color-mix(in srgb, var(--sc, var(--primary)) 6%, transparent); border: 1px solid color-mix(in srgb, var(--sc, var(--primary)) 18%, transparent); border-radius: 12px; padding: 14px 16px 6px; }
.ev-cal-month-evs, .ev-cal-tba-section { margin-top: 22px; border-top: 1px solid var(--card-border, rgba(0,0,0,.08)); padding-top: 18px; }
.ev-cal-sec-title { font-family: var(--font-ui); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sc, var(--primary)); margin-bottom: 14px; }
.ev-cal-sec-tba { color: var(--text-muted); }
.ev-cal-ev-item { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb,var(--text) 6%,transparent); }
.ev-cal-ev-item:last-child { border-bottom: none; }
/* Feste Datums-Spalte → Titel starten immer an derselben Position,
   egal ob 1-Tages-Termin ("5. September") oder Zeitraum ("11. – 13. September") */
.ev-cal-ev-day { flex: 0 0 130px; font-family: var(--font-ui); font-size: 1rem; font-weight: 600; color: var(--sc, var(--primary)); line-height: 1.4; white-space: normal; }
.ev-cal-ev-day.tba { color: var(--text-muted); }
.ev-cal-ev-name { font-family: var(--font-heading); font-size: 1.05rem; color: var(--text); margin-bottom: 5px; }
.ev-cal-empty { color: var(--text-muted); font-size: .95rem; padding: 22px 0; text-align: center; }

/* ── MONATS-GRUPPIERUNG (Liste + Schnellübersicht) ──
   Großer Monats-Header über jeder Gruppe → die große Tageszahl je Termin
   genügt darunter (Monat-Kästchen in der Liste ausgeblendet). */
.ev-month-head {
    font-family: var(--font-heading); font-size: 1.7rem; color: var(--text);
    letter-spacing: .01em; margin: 6px 0 4px;
    padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--sc, var(--primary)) 30%, transparent);
}
.ev-month-head span { color: var(--text-muted); font-weight: 400; }
.ev-month-group + .ev-month-group { margin-top: 40px; }
.ev-ov-group + .ev-ov-group { margin-top: 32px; }
.ev-month-group.ev-hidden, .ev-ov-group.ev-hidden, .ev-ov-row.ev-hidden { display: none; }
/* In der gruppierten Liste steht der Monat schon im Header → im Datums-Kästchen weg */
.events-grouped .ev-month { display: none; }
.events-grouped .ev-date { display: flex; align-items: center; justify-content: center; }
/* Klick auf eine Termin-Zeile öffnet die Share-Card (gilt überall:
   Termine-Seite UND AK-/Stufen-Seiten). In der gruppierten Liste liegt
   die Beschreibung nur im Popup — die Liste bleibt scanbar. */
.events-grouped .ev-desc { display: none; }
/* Hover: Bewegung + Titel-Farbwechsel statt Karten-Fläche (ruhiger, passt zu beiden Looks) */
.event-row[data-id] { cursor: pointer; border-radius: 8px; transition: transform .25s; }
.event-row[data-id]:hover { transform: translateX(6px); }
/* Termin-Titel beim Hovern in der SEITEN-Akzentfarbe (--sc), nicht im
   Markenblau: auf einer getoenten Seite ist Blau ein Fremdton, und auf den
   blauen Seiten (Jupfi) war ueberhaupt kein Wechsel zu sehen. Ohne --sc, also
   auf den ungetoenten Seiten, bleibt es Markenblau. */
.event-row[data-id]:hover .ev-name { color: var(--sc, var(--primary)); }
/* Klare Klick-Affordanz für Termine in der Monatsliste + Tages-Panel:
   Zeile hebt sich an, verschiebt sich leicht, Chevron erscheint. */
.ev-cal-ev-item {
    cursor: pointer; border-radius: 10px;
    padding-left: 10px; padding-right: 34px; margin: 0 -10px;
    position: relative; transition: background .18s, transform .18s;
}
.ev-cal-ev-item::after {
    content: '\f054'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%) translateX(-4px);
    color: var(--sc, var(--primary)); font-size: .8rem; opacity: 0; transition: opacity .18s, transform .18s;
}
.ev-cal-ev-item:hover { transform: translateX(6px); }
.ev-cal-ev-item:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.ev-cal-ev-item:hover .ev-cal-ev-name { color: var(--sc, var(--primary)); }
@media (prefers-reduced-motion: reduce) {
    .ev-cal-ev-item, .ev-cal-ev-item::after { transition: none; }
    .ev-cal-ev-item:hover { transform: none; }
}

/* ── SCHNELLÜBERSICHT (kompakte, scanbare Zeilen) ── */
.ev-ov-row {
    display: flex; align-items: center; gap: 18px;
    padding: 13px 8px; text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    transition: background .15s;
}
.ev-ov-row { transition: transform .25s; }
.ev-ov-row:hover { transform: translateX(6px); }
.ev-ov-row:hover .ev-ov-name { color: var(--sc, var(--primary)); }
.ev-ov-day {
    font-family: var(--font-heading); font-size: 1.9rem; line-height: 1;
    color: var(--sc, var(--primary)); min-width: 44px; text-align: center; flex-shrink: 0;
}
.ev-ov-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ev-ov-name { font-family: var(--font-heading); font-size: 1.12rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ev-ov-ctx { font-family: var(--font-ui); font-size: .9rem; color: var(--text-sub); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ev-ov-row .chip { flex-shrink: 0; }
.ev-ov-row.is-cancelled .ev-ov-name { text-decoration: line-through; opacity: .6; }
/* Versteckte Labels (Ausgebucht / Abgesagt) + Stufen-Chip, rechtsbündig */
.ev-ov-tags { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; row-gap: 5px; }
.ev-ov-tags .ev-status { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
@media (max-width: 560px) {
    .ev-ov-tags .ev-status { font-size: 0; gap: 0; }        /* Text weg, Icon bleibt */
    .ev-ov-tags .ev-status i { font-size: .95rem; }
}

/* ── TERMIN-SHARE-CARD (Popup) ── */
.ev-modal {
    position: fixed; inset: 0; z-index: 1300;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: color-mix(in srgb, #000 55%, transparent);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    /* Overlay-Hintergrund immer sofort sichtbar (keine Opacity-Animation) —
       nur die Karte bekommt ein dezentes Aufsteigen. So bleibt das Modal
       auch sichtbar, falls die Animation nie startet/einfriert. */
}
.ev-modal[hidden] { display: none; }
.ev-modal-card {
    position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
    background: var(--surface, var(--bg-mid)); border: 1px solid var(--card-border, rgba(0,0,0,.1));
    border-radius: 16px; padding: 30px 30px 26px; box-shadow: 0 24px 60px rgba(10,25,40,.35);
    animation: ev-modal-rise .2s ease;
}
@keyframes ev-modal-rise { from { transform: translateY(10px); } to { transform: translateY(0); } }
.ev-modal-close {
    position: absolute; top: 14px; right: 14px; width: 36px; height: 36px;
    border-radius: 9px; border: 1px solid var(--card-border, rgba(0,0,0,.1));
    background: none; color: var(--text); cursor: pointer; font-size: 1rem;
    display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.ev-modal-close:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.ev-modal-date { font-family: var(--font-ui); font-weight: 700; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sc, var(--primary)); margin-bottom: 8px; padding-right: 44px; }
.ev-modal-title { font-family: var(--font-heading); font-size: 1.6rem; line-height: 1.2; color: var(--text); margin: 0 0 14px; }
.ev-modal-meta { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 16px; color: var(--text-sub); font-size: .95rem; }
.ev-modal-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ev-modal-desc { color: var(--text-sub); font-size: 1rem; line-height: 1.7; margin-bottom: 20px; }
.ev-modal-desc p { margin: 0; }
.ev-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (prefers-reduced-motion: reduce) { .ev-modal, .ev-modal-card { animation: none; } }

/* ── BLEED CARD — ragt in den .wrap-Padding hinein,
      damit Card-Inhalt auf Überschriften-Ebene bleibt ── */
.bleed-card {
    margin-left: -52px;
    margin-right: -52px;
    padding-left: 52px !important;
    padding-right: 52px !important;
}
/* Zwischenbreiten (Tablet bis kleiner Laptop): unter ~1340px gibt es keine
   Zentrier-Marge mehr, der Bleed wuerde die Karte bis an den Viewport-Rand
   ziehen. Dort den Bleed aufheben -> die Karte bekommt den normalen .wrap-Rand
   (52px), klebt also nicht mehr am Rand. Mobile (<=760px) regelt eine eigene Regel. */
@media (min-width: 761px) and (max-width: 1339px) {
    .bleed-card { margin-left: 0; margin-right: 0; padding-left: 34px !important; padding-right: 34px !important; }
}

/* ── STICKY SIDEBAR ── */
.sidebar-sticky { position: sticky; top: 100px; }

/* ── CUSTOM SELECT ── */
.f-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke="%2341566A" stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
    cursor: pointer;
}
/* ── FOOTER ── */
footer {
    background: var(--bg-footer);
    border-top: 1px solid var(--ft-border);
    position: relative;
}
/* Wasserzeichen-Lilie ueber die Maske, nicht als fertig gefaerbtes SVG: die
   Datei ist weiss und waere auf der hellen Flaeche unsichtbar. --lilie-mask ist
   dasselbe Token, mit dem doodles.css die Lilien zeichnet. */
footer::before {
    content: '';
    position: absolute;
    left: 2%; bottom: 10px;
    width: 280px; height: 280px;
    background: var(--ft-lilie);
    -webkit-mask: var(--lilie-mask) center/contain no-repeat;
            mask: var(--lilie-mask) center/contain no-repeat;
    pointer-events: none;
}
/* Auf dem Handy haengt die Lilie zur Haelfte aus dem Bild: -140px ist genau die
   halbe Breite der 280px, unabhaengig von der Schirmbreite. Der Footer muss
   dafuer clippen — ohne overflow waechst die Seite nach links und laesst sich
   horizontal schieben. Gefahrlos, weil im Footer nur footer::after liegt (die
   Doodle-Kante) und die sitzt vollstaendig innerhalb. */
@media (max-width: 760px) {
    footer { overflow: hidden; }
    footer::before { left: -140px; }
}
.ft-inner {
    max-width: 1240px; margin: 0 auto;
    padding: 56px 52px 36px;
    display: grid; grid-template-columns: 260px 1fr; gap: 60px;
}
/* Logo im Footer: im hellen Modus in seinen eigenen Farben (wie im Header),
   im dunklen auf Weiss gestanzt. Stand vorher als Inline-Style im Markup und
   war damit fuer keine Theme-Regel erreichbar. */
.ft-logo { height: 32px; opacity: .9; }
[data-theme="dunkel"] .ft-logo { filter: brightness(0) invert(1); }
.ft-brand p { color: var(--ft-link); font-size: 1rem; line-height: 1.65; margin-top: 12px; max-width: 230px; }
.ft-links { display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; }
.ft-col h4 { font-family: var(--font-ui); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ft-head); margin-bottom: 14px; }
.ft-col a { display: block; color: var(--ft-link); font-size: 1rem; margin-bottom: 9px; cursor: pointer; transition: color .2s; text-decoration: none; }
.ft-col a:hover { color: var(--link-hover); }
.ft-bottom {
    background: var(--bg-footer);
    border-top: 1px solid var(--ft-border);
}
.ft-bottom-inner {
    max-width: 1240px; margin: 0 auto;
    padding: 20px 52px;
    display: flex; justify-content: space-between; align-items: center;
}
.ft-bottom p { color: var(--ft-link); font-family: var(--font-ui); font-size: 1rem; }
.ft-social { display: flex; gap: 16px; }
.ft-social a { color: var(--ft-link); font-size: 1rem; cursor: pointer; transition: color .2s, transform .15s; text-decoration: none; }
.ft-social a:hover { color: var(--link-hover); transform: scale(1.25); }

/* ── STUFEN-DETAILSEITEN (nach außen) ── */
.stufe-grid2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; }
.stufe-lead { font-size: 1.15rem; color: var(--text); line-height: 1.7; margin-bottom: 18px; }
.stufe-body p { color: var(--text-sub); line-height: 1.75; font-size: 1rem; margin-bottom: 16px; }
.steckbrief { background: var(--bg-mid); border: 1px solid var(--card-border); border-left: 3px solid var(--sc); border-radius: var(--radius-lg); padding: 24px 28px; }
.steckbrief h3 { font-family: var(--font-heading); font-size: 1.15rem; color: var(--text); margin-bottom: 14px; }
.steckbrief dl { display: grid; grid-template-columns: auto 1fr; gap: 11px 18px; margin: 0; }
.steckbrief dt { color: var(--text-muted); font-size: 1rem; }
.steckbrief dd { color: var(--text); font-size: 1rem; font-weight: 600; text-align: right; }
.stufe-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.stufe-feat { background: var(--bg-mid); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 24px; transition: transform .25s, border-color .25s; }
.stufe-feat:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--sc) 55%, transparent); }
.stufe-feat i { font-size: 22px; color: var(--sc); margin-bottom: 12px; display: block; }
.stufe-feat h4 { font-family: var(--font-heading); font-size: 1.1rem; color: var(--text); margin-bottom: 7px; }
.stufe-feat p { color: var(--text-sub); font-size: 1rem; line-height: 1.6; }
.stufe-note { background: color-mix(in srgb, var(--sc) 12%, var(--bg-mid)); border: 1px solid color-mix(in srgb, var(--sc) 32%, transparent); border-radius: var(--radius-lg); padding: 28px 30px; }
.stufe-note h3 { font-family: var(--font-heading); font-size: 1.3rem; color: var(--text); margin-bottom: 10px; }
.stufe-note p { color: var(--text-sub); line-height: 1.7; font-size: 1rem; margin-bottom: 18px; }
.stufe-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.stufe-nav > * { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px; background: var(--bg-mid); border: 1px solid var(--card-border); border-top: 3px solid var(--snc, var(--card-border)); border-radius: var(--radius-sm); }
.stufe-nav a { transition: transform .2s, background .2s; }
.stufe-nav a:hover { transform: translateY(-3px); background: var(--bg-card); }
.stufe-nav .nm { font-family: var(--font-heading); color: var(--text); font-size: 1.05rem; }
.stufe-nav .ag { color: var(--text-muted); font-size: 1rem; }
/* Gefuellte Kachel: Fuellung und Schriftfarbe sind ueberschreibbar. Gelb ist
   eine HELLE Farbe — dort gehoert dunkle Schrift drauf, nicht weisse. Mit
   Weiss musste das Gelb so weit abgedunkelt werden, dass es braun wurde. */
.stufe-nav .is-current { background: var(--snc-fill, color-mix(in srgb, var(--snc) 65%, #16242e)); }
.stufe-nav .is-current .nm, .stufe-nav .is-current .ag { color: var(--snc-fg, #fff); text-shadow: var(--snc-shadow, 0 1px 4px rgba(0,0,0,.4)); }
/* Leitende: reines Gelb mit dunkler Schrift (8,79 Kontrast statt 5,62). */
.stufe-nav [data-stufe="leitende"] {
    --snc-fill: var(--stufe-leitende);
    --snc-fg: #14222E;
    --snc-shadow: none;
    --snc-line: color-mix(in srgb, var(--stufe-leitende) 90%, var(--text));
}
@media (max-width: 760px) {
    .stufe-grid2 { grid-template-columns: 1fr; gap: 26px; }
    .stufe-nav { grid-template-columns: repeat(2, 1fr); }
}

/* ── RESPONSIVE ── */
/* Zwischenzone: volle Navigation braucht ~1340px — erst kompakter, dann Burger */
@media (max-width: 1380px) and (min-width: 1201px) {
    header { padding: 20px 30px; padding-top: calc(20px + env(safe-area-inset-top)); }
    nav a { font-size: .92rem; padding: 8px 9px; letter-spacing: .06em; }
    nav a::after { left: 9px; right: 9px; }
    .nav-cta { padding: 8px 15px !important; margin-left: 6px; }
    .nav-search { width: 35px; height: 35px; }
    .logo-text { font-size: 1rem; letter-spacing: .07em; }
}
/* Darunter passt auch die kompakte Navigation nicht mehr → Burger-Menü */
@media (max-width: 1200px) {
    .nav-main { display: none; }
    .nav-toggle { display: block; }
    .nav-actions-mobile { display: flex; }
}
@media (max-width: 960px) {
    header { padding: 18px 24px; padding-top: calc(18px + env(safe-area-inset-top)); }
    .hero-inner { grid-template-columns: 1fr; padding: 100px 24px 72px; }
    .hero-right { display: none; }
    /* Karten-Grids (quick/news/service/ak/vorstand/…) brauchen hier nichts mehr —
       sie brechen über auto-fit + minmax von selbst um */
    .ab-grid, .dv-split, .kontakt-wrap, .events-layout, .blog-layout, .int-split { grid-template-columns: 1fr; }
    .ak-intro-grid, .ak-tasks { grid-template-columns: 1fr; }
    .wrap { padding: 0 24px; }
    .sec, .sec-sm { padding: 60px 0; }
    .pg-header { padding: 112px 0 26px; }
    /* Auf Mobile NICHT bis an den Rand bleeden — etwas Luft lassen wie bei den
       normalen Karten (Startseite/AKs). Kein negativer Margin mehr. */
    .bleed-card { margin-left: 0; margin-right: 0; padding-left: 26px !important; padding-right: 26px !important; }
    .ft-inner { grid-template-columns: 1fr; padding: 48px 24px 28px; }
    .ft-links { grid-template-columns: 1fr 1fr; }
    .ft-bottom-inner { padding: 18px 24px; flex-direction: column; gap: 12px; }
    /* Copyright-Zeile: DV / Adresse / Links als eigene Zeilen, mittig */
    .ft-copy { text-align: center; line-height: 1.9; }
    .ft-copy-line { display: block; }
    .ft-copy-sep { display: none; }
    .kl, .kr { padding: 60px 32px; }
    .dv-left, .dv-right { padding: 60px 32px; }
    .ak-hero { min-height: 260px; }
    .photo-strip { grid-template-columns: 1fr; height: auto; }
    .photo-strip .ps-item { height: 200px; }
    .f-row { grid-template-columns: 1fr; }
}

/* ── TOAST NOTIFICATIONS ─────────────────────────── */
#toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: var(--bg-card);
    border: 1px solid var(--sc, var(--primary));
    color: var(--text);
    padding: 12px 24px;
    border-radius: var(--radius-lg);
    font-family: var(--font-ui);
    font-size: 1rem;
    opacity: 0;
    transition: opacity .3s, transform .3s;
    pointer-events: none;
    z-index: 9999;
    max-width: min(92vw, 440px);
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0,0,0,.4);
}
#toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── FOTO-KARUSSELL (.gallery, wiederverwendbar) ──── */
.impr { overflow: hidden; }
.impr .wrap { margin-bottom: 32px; }

.gallery {
    position: relative;
    width: 100%;
    height: clamp(420px, 64vh, 660px);
    background: var(--bg-mid);
    overflow: hidden;
    isolation: isolate;
    touch-action: pan-y;
}
.gallery-track { position: absolute; inset: 0; }
.gslide {
    position: absolute; inset: 0; margin: 0;
    opacity: 0; pointer-events: none;
    transition: opacity .5s ease;
}
.gslide.is-active { opacity: 1; pointer-events: auto; }
.gslide img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transform: scale(1.02);
}
.gslide.is-active img { animation: kenburns 7s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.1); } }

/* Lesbarkeits-Overlay. Der Verlauf steckt in --gal-overlay (siehe :root) und
   folgt damit dem Modus. */
.gslide::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: var(--gal-overlay);
}
/* Galerie und Footer verschmelzen: Trennlinie dazwischen weg */
.impr + #site-footer footer { border-top: none; }

.gcap {
    position: absolute; z-index: 2;
    left: 0; right: 0; margin: 0 auto;
    width: 100%; max-width: 1240px;
    padding: 0 60px;                 /* mehr Luft zum Bildrand (vorher 52 = Flucht zur .wrap) */
    bottom: clamp(62px, 8vh, 88px);  /* deutlich über den Slide-Punkten (gdots) */
    opacity: 0; transform: translateY(12px);
}
.gcap-text { max-width: 640px; }
.gslide.is-active .gcap { animation: gcapIn .8s .25s ease both; }
@keyframes gcapIn { to { opacity: 1; transform: translateY(0); } }
.gcap-eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-ui); font-size: .82rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--gal-fg) 88%, transparent);
    margin-bottom: 10px;
}
.gcap-eyebrow::before { content: ''; width: 22px; height: 1px; background: color-mix(in srgb, var(--gal-fg) 88%, transparent); display: block; }
.gcap-text {
    display: block; margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 3.1vw, 2.3rem); line-height: 1.12;
    color: var(--gal-fg); text-shadow: var(--gal-shadow);
}

.gnav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: rgba(var(--gal-scrim),.62); border: 1px solid color-mix(in srgb, var(--gal-fg) 18%, transparent); color: var(--gal-fg);
    font-size: 1rem;
    transition: background .25s, border-color .25s, transform .25s;
}
.gnav:hover { background: var(--sc, var(--primary)); border-color: var(--sc, var(--primary)); color: #fff; }
.gprev { left: clamp(14px, 2vw, 26px); }
.gnext { right: clamp(14px, 2vw, 26px); }
.gprev:hover { transform: translateY(-50%) translateX(-2px); }
.gnext:hover { transform: translateY(-50%) translateX(2px); }

.gdots {
    position: absolute; z-index: 3; bottom: 18px;
    right: max(24px, calc((100% - 1240px) / 2 + 52px));  /* an der .wrap-Kante */
    display: flex; gap: 8px;
}
.gdot {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; cursor: pointer;
    background: color-mix(in srgb, var(--gal-fg) 35%, transparent); transition: width .3s, background .3s;
}
.gdot.is-active { width: 26px; background: var(--sc, var(--primary)); }
.gdot:hover { background: color-mix(in srgb, var(--gal-fg) 70%, transparent); }

@media (max-width: 768px) {
    .gallery { height: clamp(320px, 56vh, 460px); }
    .gnav { width: 40px; height: 40px; }
    .gdots { bottom: 14px; }
    .gcap { padding: 0 28px; }
    /* Ken-Burns aus auf Touch: die dauerhafte Scale-Animation ruckelt auf Mobil */
    .gslide.is-active img { animation: none; transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
    .gslide { transition: opacity .35s ease; }
    .gslide.is-active img { animation: none; transform: scale(1.02); }
    .gslide.is-active .gcap { animation: none; opacity: 1; transform: none; }
}
/* Ohne JS: nur das erste Bild, keine Bedienelemente */
html:not(.js) .gslide:not(:first-child) { display: none; }
html:not(.js) .gslide:first-child { opacity: 1; }
html:not(.js) .gnav, html:not(.js) .gdots { display: none; }

/* ── STUFEN-MINI-KARTEN (mit echten Stufen-Lilien) ── */
.stufe-mini {
    background: var(--bg-mid); border: 1px solid var(--card-border);
    border-bottom: 3px solid var(--sc, var(--card-border));
    border-radius: var(--radius-lg); padding: 26px 24px;
    transition: transform .25s, box-shadow .25s;
}
.stufe-mini-logo { height: 48px; width: auto; display: block; margin-bottom: 14px; }
/* Maskottchen mit festem weißem Hintergrund → runder "Aufnäher"-Look */
.stufe-mini-logo.is-sticker {
    width: 48px; object-fit: cover; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 1px var(--card-border);
}
.stufe-mini-age {
    font-family: var(--font-ui); font-size: .8rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--sc, var(--text-sub)); margin-bottom: 6px;
}
.stufe-mini h3 { font-family: var(--font-heading); font-size: 1.26rem; color: var(--text); margin-bottom: 8px; hyphens: auto; overflow-wrap: break-word; }
.stufe-mini p { color: var(--text-sub); font-size: 1rem; line-height: 1.62; }

/* Bild statt Font-Icon in int-cards (z. B. Regenbogen-Lilie) */
.int-icon img { width: 26px; height: 26px; object-fit: contain; display: block; }

/* ── "Bald verfügbar"-Badge (Service-Karten) ─────── */
.soon-badge {
    font-family: var(--font-ui); font-weight: 700; font-size: .8rem;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 5px 12px; border-radius: 50px;
    background: color-mix(in srgb, var(--highlight) 15%, transparent);
    color: var(--highlight);
    border: 1px solid color-mix(in srgb, var(--highlight) 30%, transparent);
}

/* ── FAQ (details/summary, ohne JS bedienbar) ──────
   Kein Kachel-in-Kachel: schlichte Liste mit Trennlinien,
   Antwort klappt direkt unter der Frage aus (Animation via app.js). */
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq {
    background: transparent; border: 0;
    border-bottom: 1px solid var(--card-border);
    border-radius: 0; overflow: hidden;
}
.faq:first-child { border-top: 1px solid var(--card-border); }
.faq summary {
    list-style: none; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 19px 4px;
    font-family: var(--font-heading); font-size: 1.1rem; color: var(--text);
    transition: color .2s;
}
.faq summary:hover, .faq[open] summary { color: var(--sc, var(--primary)); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '\2b'; /* + */
    font-family: var(--font-ui); font-weight: 400; font-size: 1.3rem;
    color: var(--sc, var(--primary)); flex-shrink: 0; line-height: 1;
    transition: transform .25s;
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--sc, var(--primary)); outline-offset: -2px; }
.faq-a { padding: 2px 4px 22px; margin: 0; color: var(--text-sub); font-size: 1rem; line-height: 1.7; max-width: 70ch; }
.faq-a a { color: var(--sc, var(--primary)); text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ── STAMMES-EINZELSEITEN (generiert) ────────────── */
.foto-band {
    border-radius: var(--radius-lg); overflow: hidden;
    height: clamp(220px, 38vw, 380px); position: relative;
}
.foto-band::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(var(--overlay-rgb),.35) 0%, transparent 40%); }
.foto-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stamm-detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
.stamm-kontakt-box h4 i, .stamm-detail-grid h4 i { margin-right: 8px; }
.stamm-kanaele { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.stamm-fallback-note { font-size: .92rem; color: var(--text-muted); margin-top: 16px !important; margin-bottom: 0 !important; }
.stamm-fallback-note a { color: var(--sc, var(--primary)); text-decoration: underline; text-underline-offset: 2px; }
.stamm-fakten { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; margin: 0; }
.stamm-fakten dt { color: var(--text-muted); font-size: .95rem; }
.stamm-fakten dd { color: var(--text); font-size: .95rem; font-weight: 600; }
.stamm-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .9rem; font-weight: 700; color: var(--sc, var(--primary)); }
.stamm-more:hover { color: var(--secondary); }
.stamm-more i { font-size: .75em; }
.stamm-nokontakt { margin-top: 10px; font-size: .88rem; color: var(--text-muted); }
.stamm-nokontakt a { color: var(--sc, var(--primary)); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 860px) { .stamm-detail-grid { grid-template-columns: 1fr; } }

/* ── STUFEN-MASKOTTCHEN & KARTEN-LOGOS ───────────── */
.steckbrief-mascot {
    display: block; height: 104px; width: auto; max-width: 100%;
    margin-bottom: 16px; object-fit: contain;
}
.steckbrief-mascot.is-sticker {
    width: 104px; object-fit: cover; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 1px var(--card-border);
}
.steckbrief-mascot.is-wide { height: auto; width: 78%; }
.steckbrief-mascot.is-line { opacity: .85; }
[data-theme="dunkel"] .steckbrief-mascot.is-line { filter: invert(1); }
.stufen-card-logo {
    display: block; height: 54px; width: auto;
    margin-bottom: 14px; object-fit: contain;
}
.stufen-card-logo.is-sticker {
    width: 40px; object-fit: cover; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 1px var(--card-border);
}
.stufen-card-logo.is-line { opacity: .8; }
[data-theme="dunkel"] .stufen-card-logo.is-line { filter: invert(1); }


/* ── TINTED: Stufen-/AK-Seiten färben Akzente in ihrer Farbe (--sc) ── */
.tinted .sec-label { color: var(--sc); }
.tinted .sec-label::before { background: var(--sc); }
.tinted .btn-fire { background: var(--sc-btn, var(--sc)); }
.tinted .btn-fire:hover { background: color-mix(in srgb, var(--sc-btn, var(--sc)) 82%, #000); box-shadow: 0 8px 28px color-mix(in srgb, var(--sc-btn, var(--sc)) 35%, transparent); }
/* .ev-day und .ev-ov-day tragen die Akzentfarbe inzwischen selbst
   (var(--sc, var(--primary))) — eine Sonderregel dafuer braucht es nicht mehr. */
.tinted .ev-more { color: var(--sc); }
.tinted .int-link { color: var(--sc); }
.tinted .btn-ghost:hover { color: var(--sc); border-color: var(--sc); }
/* Akzent (--sc) durchgängig auf getinteten Seiten: Section-em (Hero-em wird von
   der spezifischeren !important-Regel weiter unten bedient) + Karten-Icons/Links,
   damit Prävention/Ausbildung/AK-Seiten wie die Stufen-Seiten voll durchgefärbt sind. */
.tinted .sec-title em { color: var(--sc); }
.tinted .srv-icon, .tinted .int-icon { background: color-mix(in srgb, var(--sc) 12%, transparent); color: var(--sc); }
.tinted .int-link { color: var(--sc); }

/* ── NAVBAR-DROPDOWNS ── */
.nav-drop { position: relative; display: inline-flex; }
.nav-drop > .nav-link .drop-caret { font-size: .6em; margin-left: 6px; opacity: .55; transition: transform .2s; }
.nav-drop:hover > .nav-link .drop-caret, .nav-drop:focus-within > .nav-link .drop-caret { transform: rotate(180deg); }
.nav-drop-menu {
    position: absolute; top: calc(100% + 2px); left: 6px; z-index: 1200;
    min-width: 218px; padding: 8px;
    background: rgba(var(--hbg), .98); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--card-border); border-radius: 12px;
    box-shadow: 0 16px 40px rgba(10,25,40,.16);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .18s, transform .18s, visibility .18s;
}
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-drop-menu a {
    display: block; padding: 11px 14px; border-radius: 8px;
    font-size: .95rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--text-sub); transition: background .15s, color .15s;
}
.nav-drop-menu a:hover, .nav-drop-menu a.active { background: color-mix(in srgb, var(--sc, var(--primary)) 9%, transparent); color: var(--text); }
.nav-drop-menu a::after { display: none; }
/* Unterpunkte im Mobilmenü */
.mobile-nav .nav-sub { font-size: .92rem; opacity: .85; padding: 7px 0; letter-spacing: .07em; }

/* ── AKTUELLES: einheitliche Kalender-Kachel für Termine ── */
.bp-cal {
    height: 150px; position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: linear-gradient(135deg, #0B2D4E 0%, #1A4E7C 100%);
    color: #fff;
}
.bp-cal::after {
    content: ''; position: absolute; right: -34px; top: 50%; transform: translateY(-50%);
    width: 190px; height: 190px;
    background: url('../img/lilie-fill.svg') center/contain no-repeat;
    filter: brightness(0) invert(1); opacity: .1; pointer-events: none;
}
.bp-cal-day { font-family: var(--font-heading); font-size: 3rem; line-height: 1; }
.bp-cal-mon { font-family: var(--font-ui); font-size: .85rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.75); }

/* ── Karussell schließt direkt am Footer ab ── */
.sec.impr { padding-bottom: 0; }

/* ── Weiße Lilie (Biber) braucht Kontur auf hellen Karten ── */
.stufen-card-logo.is-white { filter: drop-shadow(0 0 1.5px rgba(20,34,46,.45)); }

/* ── Leaflet-Popups sind immer hell → Text fest dunkel (auch im Dunkelmodus) ── */
.leaflet-popup-content .stamm-name { color: #14222E; }
.leaflet-popup-content .stamm-ort { color: #5C7184; }
.leaflet-popup-content .stamm-nokontakt { color: #5C7184; }
.leaflet-popup-content .stamm-nokontakt a, .leaflet-popup-content .stamm-more { color: #003056; }

/* ── Stufen-Seiten: Maskottchen sitzt auf dem Foto-Band ──
   (verzahnt Logo + Bild, statt dass beide einzeln "kleben") */
.tinted .pg-header { position: relative; }
.tinted .pg-header::after { display: none; }
.band-wrap { position: relative; }
.band-mascot {
    position: absolute; right: 3.5%; top: -44px; z-index: 2;
    height: clamp(92px, 11vw, 150px); width: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(10,25,40,.28));
    pointer-events: none;
}
.band-mascot.is-sticker {
    width: clamp(92px, 11vw, 150px); height: clamp(92px, 11vw, 150px);
    object-fit: cover; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 5px #fff, 0 10px 22px rgba(10,25,40,.25);
}
@media (max-width: 760px) {
    .band-mascot { top: -30px; height: 86px; }
    .band-mascot.is-sticker { width: 86px; height: 86px; }
}


/* ── Icon-Twist (Hover): kurz eindrehen + größer, gerade landen ── */
@keyframes icon-twist {
    0% { transform: scale(1) rotate(0); }
    40% { transform: scale(1.2) rotate(-9deg); }
    70% { transform: scale(1.12) rotate(6deg); }
    100% { transform: scale(1.12) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
    .qc:hover .qc-icon, .hero-door:hover .hero-door-icon, a.srv-card:hover .srv-icon {
        animation: none; transform: scale(1.06);
    }
}


/* ── PAGE-HERO: Foto ganz oben, Titel auf dem Bild (wie Startseite) ──
   Ersetzt pg-header + Foto-Band auf Unterseiten: keine Scroll-Hürde mehr. */
.page-hero {
    position: relative;
    min-height: clamp(340px, 48vh, 500px);
    display: flex; align-items: flex-end;
    margin-bottom: 54px;
}
.ph-img { position: absolute; inset: 0; overflow: hidden; }
.ph-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-img::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(to top, rgba(var(--overlay-rgb),.94) 0%, rgba(var(--overlay-rgb),.55) 42%, rgba(var(--overlay-rgb),.28) 100%),
      linear-gradient(105deg, rgba(var(--overlay-rgb),.45) 0%, rgba(var(--overlay-rgb),0) 50%);
}
.page-hero .wrap { position: relative; z-index: 2; width: 100%; padding-top: 128px; padding-bottom: 32px; }
/* Eyebrows AUF FOTOS/dunklen Flächen: weiß (Rot/Stufenfarbe wäre zu kontrastarm) */
.page-hero .sec-label,
.tinted .page-hero .sec-label { color: rgba(255,255,255,.88); }
.page-hero .sec-label::before,
.tinted .page-hero .sec-label::before { background: rgba(255,255,255,.88); }
.page-hero h1.sec-title { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.page-hero h1.sec-title em { color: #8FC0E4; }   /* hellblauer Akzent wie auf der Startseite */
.page-hero .sec-sub { color: rgba(255,255,255,.85); margin-bottom: 10px; max-width: 620px; }
.page-hero .btn-ghost {
    color: rgba(255,255,255,.85); border-bottom-color: rgba(255,255,255,.35);
}
.page-hero .btn-ghost:hover { color: #fff; border-bottom-color: #fff; }
.page-hero .btn-outline { border-color: rgba(255,255,255,.45); color: rgba(255,255,255,.92); }
.page-hero .btn-outline:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.8); color: #fff; }
/* ── Light-Mode: Bild-Heroes freundlich wie die Startseite (helle Transparenz +
      dunkle Schrift). Dark-Mode bleibt unveraendert (dunkles Overlay + helle Schrift).
      --sc ist auf getönten Seiten die Stufen-/AK-Farbe, sonst Fallback. ── */
html:not([data-theme="dunkel"]) .ph-img::after {
    background:
      linear-gradient(to top, rgba(245,245,241,.95) 0%, rgba(245,245,241,.72) 44%, rgba(245,245,241,.34) 100%),
      linear-gradient(105deg, rgba(245,245,241,.5) 0%, rgba(245,245,241,0) 52%);
}
html:not([data-theme="dunkel"]) .page-hero .sec-label { color: var(--sc, var(--primary)); text-shadow: 0 0 9px rgba(255,255,255,.9), 0 1px 3px rgba(255,255,255,.75); }
html:not([data-theme="dunkel"]) .page-hero .sec-label::before { background: var(--sc, var(--primary)); }
html:not([data-theme="dunkel"]) .page-hero h1.sec-title { color: var(--text); text-shadow: none; }
html:not([data-theme="dunkel"]) .page-hero h1.sec-title em,
html:not([data-theme="dunkel"]) .tinted .page-hero h1.sec-title em { color: var(--sc, var(--primary)); text-shadow: none; }
html:not([data-theme="dunkel"]) .page-hero .sec-sub { color: var(--text-sub); }
html:not([data-theme="dunkel"]) .page-hero .btn-ghost { color: var(--text-sub); border-bottom-color: color-mix(in srgb, var(--text-sub) 40%, transparent); }
html:not([data-theme="dunkel"]) .page-hero .btn-ghost:hover { color: var(--text); border-bottom-color: var(--text); }
html:not([data-theme="dunkel"]) .page-hero .breadcrumbs li { color: var(--text-sub); }
html:not([data-theme="dunkel"]) .page-hero .breadcrumbs [aria-current="page"] { color: var(--text); }
html:not([data-theme="dunkel"]) .page-hero .breadcrumbs a:hover { color: var(--text); }
html:not([data-theme="dunkel"]) .page-hero .breadcrumbs { text-shadow: 0 0 8px rgba(255,255,255,.92), 0 1px 3px rgba(255,255,255,.72); }
html:not([data-theme="dunkel"]) .page-hero .btn-outline { border-color: color-mix(in srgb, var(--sc, var(--primary)) 45%, transparent); color: var(--sc, var(--primary)); }
html:not([data-theme="dunkel"]) .page-hero .btn-outline:hover { background: color-mix(in srgb, var(--sc, var(--primary)) 8%, transparent); border-color: var(--sc, var(--primary)); color: var(--sc, var(--primary)); }
/* Getönte Seiten: die bestehenden Eyebrow-/Titel-Regeln sind aufgehellt (fuer dunkles
   Foto) + !important. Im Light-Mode volle Stufenfarbe (--sc), sonst zu blass auf Creme. */
html:not([data-theme="dunkel"]) .tinted .page-hero .sec-label { color: var(--sc) !important; text-shadow: 0 0 9px rgba(255,255,255,.9), 0 1px 3px rgba(255,255,255,.75) !important; }
html:not([data-theme="dunkel"]) .tinted .page-hero .sec-label::before { background: var(--sc) !important; }
html:not([data-theme="dunkel"]) .tinted .page-hero h1.sec-title em { color: var(--sc) !important; text-shadow: none !important; }
/* Maskottchen sitzt auf der Hero-Unterkante und ragt in den Inhalt */
.ph-mascot {
    position: absolute; right: 4%; bottom: -30px; z-index: 4;   /* vor dem Doodle-Strich der Hero-Unterkante (z-index 3) */
    height: clamp(96px, 12vw, 160px); width: auto; object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(10,25,40,.35));
    pointer-events: none;
}
/* Dunkle Maskottchen/Wortmarken (Rover, Jupfi-Kobold): weißer Schein in beiden Modi */
.ph-mascot-glow {
    filter: drop-shadow(0 10px 22px rgba(10,25,40,.35)) drop-shadow(0 0 13px rgba(255,255,255,.6));
}
/* Wortmarke (Rover) ist breit, daher deutlich kleiner als ein quadratisches Maskottchen */
.ph-mascot-wordmark { height: clamp(42px, 5.5vw, 72px); bottom: -14px; }
.ph-mascot.is-sticker {
    width: clamp(96px, 12vw, 160px); height: clamp(96px, 12vw, 160px);
    object-fit: cover; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 5px #fff, 0 10px 22px rgba(10,25,40,.3);
}
@media (max-width: 760px) {
    .page-hero { min-height: 300px; margin-bottom: 40px; }
    .page-hero .wrap { padding-top: 104px; }
    .ph-mascot { height: 86px; bottom: -20px; }
    .ph-mascot.is-sticker { width: 86px; height: 86px; }
    /* Breite Wortmarke (Rover) NICHT auf 86px hochziehen, sonst wird sie zu breit */
    .ph-mascot-wordmark { height: 40px; bottom: -10px; }
    /* „Schutzzone": auf schmalen Screens den Text-Block über dem Maskottchen halten,
       damit die letzten Zeilen nicht hinter der Grafik verschwinden. Nur wo ein
       kompaktes Maskottchen sitzt — die schmale Rover-Wortmarke liegt ohnehin frei. */
    .page-hero:has(.ph-mascot:not(.ph-mascot-wordmark)) .wrap { padding-bottom: 80px; }
}
/* Friedenslicht-Emblem: Desktop groß & rechts-mittig; mobil kleiner unten rechts
   (die Hero-Schutzzone oben hält den Text frei darüber). */
.ph-mascot-fl { height: clamp(112px, 14vw, 188px); right: 15%; bottom: -34px; }
@media (max-width: 760px) {
    .ph-mascot-fl { height: 72px; right: 6%; bottom: -16px; top: auto; }
}

/* ── Karten im Dunkelmodus: Voyager-Tiles invertiert ──
   (volle Orientierung bleibt, Optik wird dunkel)
   Gilt für Stammesfinder (#staemme-map) UND die Mini-Karten der
   Stammes-Seiten (#stamm-map) — an die .map-dark-Klasse gebunden. */
/* .leaflet-container mitnehmen, damit der dunkle Hintergrund Leaflets
   Standard-Grau schlägt (leaflet.css lädt nach style.css) */
.map-dark.leaflet-container { background: #0A1820; }
.map-dark .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(.91) contrast(.88) saturate(.72);
}

/* Getintete Seiten (Stufen-Detail, body.tinted): em/Label nutzen inline die
   Stufenfarbe (--sc) — auf dunklem Foto zu kontrastarm. Rettung: Pastell-
   Variante (Stufenfarbe mit Weiß gemischt, !important schlägt das Inline-
   color) + dunkler Schein dahinter. Bleibt erkennbar "die blaue Stufe",
   wird aber lesbar. Reguläre page-hero behalten das feste Hellblau (oben). */
.tinted .page-hero h1.sec-title em {
    color: var(--sc) !important;   /* voller Body-Ton statt Pastell — Kontrast macht das Overlay */
    text-shadow: 0 2px 20px rgba(0,10,22,.85), 0 1px 4px rgba(0,10,22,.65);
}
.tinted .page-hero .sec-label {
    color: var(--sc) !important;   /* voller Body-Ton statt Pastell */
    text-shadow: 0 1px 10px rgba(0,10,22,.85), 0 1px 3px rgba(0,10,22,.7);
}
.tinted .page-hero .sec-label::before { background: var(--sc) !important; }   /* Strich in Akzentfarbe */
/* Getönte Bild-Heroes (dunkel): Overlay stark genug, dass die VOLLE Akzentfarbe
   (--sc) bei Eyebrow + Titel auch über HELLEN Bildern lesbar bleibt. Getestet
   gegen Solid-Weiß (Worst-Case): Content sitzt durchs 128px-Top-Padding im
   unteren ~50%, dort deckt das Overlay >=.90. Bild bleibt oben sichtbar. */
html[data-theme="dunkel"] .tinted .ph-img::after {
    background:
      linear-gradient(to top, rgba(var(--overlay-rgb),.96) 0%, rgba(var(--overlay-rgb),.93) 55%, rgba(var(--overlay-rgb),.35) 100%),
      linear-gradient(105deg, rgba(var(--overlay-rgb),.4) 0%, rgba(var(--overlay-rgb),0) 55%);
}

/* AK-Detailseiten (.ak-hero): em-Teil des Titels in der AK-Akzentfarbe (--sc),
   auf dunklem Foto aufgehellt — gilt für ALLE AKs, auch die ohne --primary-Override */
.ak-hero h1.sec-title em { color: var(--sc); }   /* voller Body-Ton; ak-hero-ov deckt links .95 */

/* ── Light-Mode AK-Detailseiten: gleiche freundliche Optik wie die page-hero-Bilder
      (helle Creme-Transparenz + dunkle Schrift, AK-Farbe als Akzent). Overlay, Titel
      und Zurueck-Link sind inline gesetzt -> !important noetig. Dark bleibt unveraendert. */
html:not([data-theme="dunkel"]) .ak-hero-ov {
    background:
      linear-gradient(to top, rgba(245,245,241,.95) 0%, rgba(245,245,241,.72) 44%, rgba(245,245,241,.34) 100%),
      linear-gradient(135deg, color-mix(in srgb, var(--sc) 20%, rgba(245,245,241,.55)) 0%, rgba(245,245,241,0) 55%) !important;
}
html:not([data-theme="dunkel"]) .ak-hero .sec-label { color: var(--sc, var(--primary)) !important; text-shadow: 0 0 9px rgba(255,255,255,.9), 0 1px 3px rgba(255,255,255,.75) !important; }
html:not([data-theme="dunkel"]) .ak-hero .sec-label::before { background: var(--sc, var(--primary)) !important; }
html:not([data-theme="dunkel"]) .ak-hero h1.sec-title { color: var(--text) !important; text-shadow: none !important; }
html:not([data-theme="dunkel"]) .ak-hero h1.sec-title em { color: var(--sc) !important; filter: none !important; text-shadow: none !important; }
html:not([data-theme="dunkel"]) .ak-hero .breadcrumbs li { color: var(--text-sub); }
html:not([data-theme="dunkel"]) .ak-hero .breadcrumbs [aria-current="page"] { color: var(--text); }
html:not([data-theme="dunkel"]) .ak-hero .breadcrumbs a:hover { color: var(--text); }
html:not([data-theme="dunkel"]) .ak-hero .breadcrumbs { text-shadow: 0 0 8px rgba(255,255,255,.92), 0 1px 3px rgba(255,255,255,.72); }


/* ── MOBILE-HÄRTUNG ──────────────────────────────── */
/* Nichts darf die Seite seitlich aufreißen */
html { overflow-x: clip; }
.ev-name { overflow-wrap: break-word; }
/* Lange Wörter in Titeln (Diözesanverband …) nicht anschneiden */
.sec-title { overflow-wrap: break-word; }
@media (max-width: 520px) {
    .page-hero h1.sec-title, .pg-header h1 { hyphens: auto; }
}

/* ── SPLIT-KARTEN (Text + CTA-Spalte) ─────────────
   Zwei Spalten am Desktop, untereinander auf Mobil.
   .lead-left: schmale Spalte (Zahl/Grafik) links. */
.card-split { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.card-split.lead-left { grid-template-columns: auto 1fr; gap: 48px; }
.card-split-side { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; align-items: flex-end; }
@media (max-width: 760px) {
    .card-split, .card-split.lead-left { grid-template-columns: 1fr; gap: 26px; }
    .card-split-side { align-items: flex-start; }
    /* 100x100-Zahlenblock (erstes Kind der lead-left-Karte) auf Mobile mittig */
    .card-split.lead-left > :first-child { text-align: center; }
}

/* Termine-Liste auf schmalen Screens: Datum + Text, Button in eigener Zeile */
@media (max-width: 700px) {
    .event-row { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 20px 0; }
    .event-row > div { min-width: 0; }
    .event-row > div:last-child:not(.ev-date) { grid-column: 1 / -1; justify-self: end; }
    .ev-date { padding: 8px 4px; }
    .ev-day { font-size: 1.7rem; }
    .ev-name { font-size: 1.22rem; }
    .ev-meta { gap: 8px 14px; font-size: .95rem; }
}
/* Monatsraster auf schmalen Screens: Punkte unterm Tag wie in Kalender-Apps,
   Termin-Details kommen per Antippen ins Tages-Panel */
@media (max-width: 560px) {
    .ev-cal-grid-wrap { padding: 14px; }
    .ev-cal-grid, .ev-cal-dow-row { gap: 2px; }
    .ev-grid-cell {
        min-height: 46px; padding: 6px 2px 5px;
        flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 3px;
    }
    .ev-grid-dn { width: 100%; text-align: center; font-size: .88rem; }
    .ev-bar { width: 7px; height: 7px; min-height: 0; padding: 0; border-radius: 50%; flex: none; }
    .ev-bar-name { display: none; }
    /* Termin-Einträge: Datum über dem Namen statt daneben (zu eng) */
    .ev-cal-ev-item { flex-direction: column; gap: 3px; }
    .ev-cal-ev-day { min-width: 0; font-size: .88rem; white-space: normal; }
}



/* Scroll-Hinweis: mobil ausblenden (zu nah an den Hero-Elementen) */
@media (max-width: 760px) { .scroll-cue { display: none; } }


/* Stufen-Karten als Links (interessiert.html) */
a.stufe-mini { display: block; text-decoration: none; }


/* ── PERSONEN-KARTEN: Initialen-Platzhalter bis echte Fotos da sind ── */
.ak-mimg-ph {
    height: 140px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading); font-size: 2.1rem; color: var(--sc, var(--primary));
    background: linear-gradient(135deg, color-mix(in srgb, var(--sc, var(--primary)) 12%, var(--bg-card)) 0%, var(--bg-card) 100%);
    position: relative; overflow: hidden;
}
.ak-mimg-ph::after {
    content: ''; position: absolute; right: -16px; bottom: -20px;
    width: 104px; height: 104px;
    background: var(--sc, var(--primary)); opacity: .12;
    -webkit-mask: var(--lilie-mask) center/contain no-repeat;
            mask: var(--lilie-mask) center/contain no-repeat;
}
.ak-member .vs-email { font-size: .92rem; margin-top: 7px; }


/* AK-Detail-Hero: Eyebrow ebenfalls weiß (liegt auf dunklem Farb-Gradient) */
.ak-hero .sec-label { color: rgba(255,255,255,.88); }
.ak-hero .sec-label::before { background: rgba(255,255,255,.88); }


/* ── MAIL-BUTTON auf Personen-Karten (Icon, öffnet persönliche Adresse) ── */
.card-mail {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 34px; margin-top: 10px;
    border-radius: 9px; font-size: .95rem;
    background: color-mix(in srgb, var(--sc, var(--primary)) 11%, transparent);
    color: var(--sc, var(--primary));
    transition: background .2s, color .2s, transform .2s;
}
.card-mail:hover { background: var(--sc, var(--primary)); color: #fff; transform: translateY(-1px); }
.card-mail:focus-visible { outline: 2px solid var(--sc, var(--primary)); outline-offset: 2px; }


/* ── "Offen für alle": Regenbogen-Verlauf + helles Lilien-Feld ── */
.int-card--regenbogen {
    background:
      linear-gradient(120deg,
        rgba(228,3,3,.10) 0%, rgba(255,140,0,.10) 20%, rgba(255,237,0,.10) 40%,
        rgba(0,128,38,.10) 60%, rgba(0,77,255,.10) 80%, rgba(117,7,135,.10) 100%),
      var(--bg-mid);
}
.int-card--regenbogen .int-icon { background: #EAF2FA; }  /* Lilie (navy + Regenbogen) braucht hellen Grund */

/* Weiße Biber-Lilie auf den Stufen-Kacheln: Kontur für den hellen Modus */
.stufe-mini-logo.is-white { filter: drop-shadow(0 0 1.5px rgba(20,34,46,.45)); }


/* Mail-Button rechts neben Name/Rolle (platzsparend, alle Personen-Karten) */
.ak-mbody { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
.ak-mbody .ak-mname, .ak-mbody .ak-mrole { grid-column: 1; }
.ak-mbody .card-mail { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }

/* ══════════════════════════════════════════
   KARTEN-HOVER-SYSTEM (zentral, Token-gesteuert)
   ──────────────────────────────────────────
   EIN Look für alle Karten (Vorbild: Stufen-Karten auf "Mitmachen"):
   • ALLE Karten: sanfter Farbverlauf aus der Ecke unten links,
     ab der Kartenmitte ausgelaufen. Farbe = Akzent der Karte
     (--akc Arbeitskreis / --sc Stufe / --mc Modul), sonst DPSG-Blau.
   • NUR KLICKBARE Karten (<a> oder [onclick]): zusätzlich leichtes
     Anheben (--card-lift). Nicht klickbar = nur Verlauf.
   • Icons in Karten machen den Twist von der Startseite mit.
   Bewusste Ausnahme: große Inhalts-Bühnen (.bleed-card, FAQ,
   Akkordeons); außerdem hebt .stat-c nicht ab (floatY besitzt
   das transform), den Verlauf hat sie trotzdem.
   NEUE KARTEN-KLASSE? → in die Listen hier eintragen, fertig.
   ══════════════════════════════════════════ */
.qc, .sidebar-box, .weg-step, .ak-member-cta, .srv-card, .int-card, .ak-card, .ak-member, .ak-dl,
.ak-info-card, .vs-card, .dl-person, .blog-sidebar-sub, .stamm,
.stufe-mini, .stufen-card, .mod-card, .news-card, .blog-post {
    position: relative; overflow: hidden;
    transition: transform .3s, border-color .3s, background .3s;
}
:is(.qc, .sidebar-box, .weg-step, .ak-member-cta, .srv-card, .int-card, .ak-card, .ak-member, .ak-dl,
    .ak-info-card, .vs-card, .dl-person, .blog-sidebar-sub, .stamm,
    .stufe-mini, .stufen-card, .mod-card, .news-card, .blog-post)::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top right,
        color-mix(in srgb, var(--akc, var(--sc, var(--mc, var(--sc, var(--primary))))) var(--card-glow, 18%), transparent) 0%,
        transparent 46%);
    opacity: 0; transition: opacity .5s ease; pointer-events: none;
}
.stufen-card::before { z-index: 1; }   /* über der Tönungsfläche der Karte */
:is(.qc, .sidebar-box, .weg-step, .ak-member-cta, .srv-card, .int-card, .ak-card, .ak-member, .ak-dl,
    .ak-info-card, .vs-card, .dl-person, .blog-sidebar-sub, .stamm,
    .stufe-mini, .stufen-card, .mod-card, .news-card, .blog-post):hover::before { opacity: 1; }

/* Klickbar = Link oder onclick → leichtes Anheben */
:is(a, [onclick]):is(.qc, .sidebar-box, .weg-step, .ak-member-cta, .srv-card, .int-card, .ak-card, .ak-member, .ak-dl,
    .ak-info-card, .vs-card, .dl-person, .blog-sidebar-sub, .stamm,
    .stufe-mini, .stufen-card, .mod-card, .news-card, .blog-post):hover { transform: translateY(var(--card-lift)); }

/* Icon-Twist beim Karten-Hover (eine Regel für alle Karten-Icons) */
:is(.qc, .hero-door, .sidebar-box, .srv-card, .int-card, .ak-card, .ak-member, .ak-dl,
    .ak-info-card, .vs-card, .dl-person, .blog-sidebar-sub, .stamm,
    .stufe-mini, .stufen-card, .mod-card, .news-card, .blog-post):hover :is(.qc-icon, .hero-door-icon, .srv-icon, .int-icon, .ak-dl-ico) {
    animation: icon-twist .5s ease forwards;
}

/* Service-Filter: ausgeblendete Karten */
.srv-hidden { display: none; }

/* ── Karten/Listen-Umschalter + Karten-Popup (Service & Tools) ── */
.view-toggle {
    margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 999px; cursor: pointer;
    font-family: var(--font-ui); font-weight: 700; font-size: .92rem; letter-spacing: .02em;
    background: transparent; color: var(--text-sub);
    border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
    transition: color .2s, border-color .2s, background .2s;
}
.view-toggle:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 48%, transparent); }
.view-toggle:focus-visible { outline: 2px solid var(--sc, var(--primary)); outline-offset: 2px; }

/* Listen-Ansicht: Karten werden zu kompakten, klickbaren Zeilen (Popup zeigt die volle Karte) */
.service-grid.as-list { grid-template-columns: 1fr !important; gap: 8px; }   /* Liste immer einspaltig, auch im breitesten Fenster */
.as-list .srv-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; padding: 14px 20px; cursor: pointer; }
.as-list .srv-card .srv-icon { width: 42px; height: 42px; font-size: 1.1rem; margin: 0; }
.as-list .srv-card h3 { margin: 0; font-size: 1.12rem; }
.as-list .srv-card > p, .as-list .srv-card .dl-row, .as-list .srv-card .soon-badge { display: none; }

.card-popup { position: fixed; inset: 0; z-index: 1500; display: none; }
.card-popup.is-on { display: flex; align-items: center; justify-content: center; padding: 20px; }
.card-popup-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, #000 62%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.card-popup-inner { position: relative; z-index: 1; width: min(440px, 100%); max-height: 88vh; overflow-y: auto; background: var(--bg-mid); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 34px 32px; box-shadow: 0 24px 64px rgba(0,0,0,.5); }
.card-popup-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: none; background: transparent; color: var(--text-sub); font-size: 1.05rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.card-popup-close:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.card-popup-body .srv-icon { margin-bottom: 14px; }
.card-popup-body h3 { font-family: var(--font-heading); font-size: 1.42rem; color: var(--text); margin-bottom: 10px; }
.card-popup-body p { color: var(--text-sub); font-size: 1rem; line-height: 1.62; margin-bottom: 18px; }
.card-popup-body .dl-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Navbar/Mobilmenü dürfen die --primary-Übersteuerung getönter Seiten (AK/Stufen,
   body[style*=--primary]) NICHT erben — sonst färbt sich z.B. die Aktiv-Markierung
   in der AK-Farbe. Auf Theme-Standard zurücksetzen. */
/* Globale Chrome bleibt neutral, auch auf getoenten Seiten: --primary wird hier
   auf das Markenblau zurueckgesetzt und --sc gleich mit, sonst zoegen die
   Bauteile ueber var(--sc, …) doch die Seitenakzentfarbe herein. */
#hdr, .mobile-nav, #site-footer { --primary: #003056; --sc: var(--primary); }
html[data-theme="dunkel"] :is(#hdr, .mobile-nav, #site-footer) { --primary: #6FA8D2; }

/* ══════════════════════════════════════════
   FOTO-COLLAGEN (Mitmach-Strecken)
   .foto-trio  = 1 großes Bild links, 2 kleine rechts
   .foto-duo   = 2 Bilder nebeneinander
   ══════════════════════════════════════════ */
.foto-trio, .foto-duo { display: grid; gap: 14px; }
.foto-trio { grid-template-columns: 1.55fr 1fr; grid-template-rows: repeat(2, 205px); }
.foto-trio figure:first-child { grid-row: 1 / span 2; }
.foto-duo { grid-template-columns: 1fr 1fr; grid-template-rows: 260px; }
.foto-trio figure, .foto-duo figure {
    margin: 0; position: relative; overflow: hidden;
    border-radius: var(--radius-lg); border: 1px solid var(--card-border);
}
.foto-trio img, .foto-duo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s ease;
}
.foto-trio figure:hover img, .foto-duo figure:hover img { transform: scale(1.045); }
/* Intro-Split-Bild (Startseite „Und was macht man da eigentlich?"): sanfter Hover-Zoom */
.int-split figure img { transition: transform .5s ease; }
.int-split figure:hover img { transform: scale(1.05); }
.foto-trio figcaption, .foto-duo figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 26px 16px 11px; color: #fff; font-size: .95rem;
    background: linear-gradient(to top, rgba(var(--overlay-rgb), .62), transparent);
}
@media (max-width: 700px) {
    .foto-trio { grid-template-columns: 1fr; grid-template-rows: 230px 170px 170px; }
    .foto-trio figure:first-child { grid-row: auto; }
    .foto-duo { grid-template-columns: 1fr; grid-template-rows: repeat(2, 200px); }
}

/* ══════════════════════════════════════════
   AUSBILDUNG: Weg zum Woodbadge + Bausteine
   ══════════════════════════════════════════ */
/* Zitat-Baustein / wiederverwendbare Komponente (z. B. Baden-Powell).
   Streifen nimmt die Seitenakzentfarbe: --sc (Stufen-/AK-/Leitenden-Seiten),
   sonst Fallback auf das DPSG-Blau --primary. Über --quote-accent pro Stelle
   überschreibbar. Doodle-Look: Kreidestreifen in css/doodles.css. */
.quote {
    border-left: 3px solid var(--quote-accent, var(--sc, var(--primary)));
    padding: 4px 0 4px 20px; margin: 22px 0 0;
    font-family: var(--font-heading); font-size: 1.18rem; line-height: 1.65;
    color: var(--text); max-width: 640px;
}
.quote cite { display: block; font-style: normal; font-family: var(--font-ui); font-size: .95rem; color: var(--text-muted); margin-top: 8px; }

/* Drei Phasen bis zum Woodbadge */
.weg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.weg-step {
    background: var(--bg-mid); border: 1px solid var(--card-border);
    border-radius: var(--radius-lg); padding: 26px 24px 24px;
}
.weg-nr {
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--sc, var(--primary)) 12%, transparent);
    color: var(--sc, var(--primary)); font-family: var(--font-heading); font-size: 1.25rem;
    margin-bottom: 16px;
}
.weg-step h3 { font-family: var(--font-heading); font-size: 1.26rem; color: var(--text); margin-bottom: 8px; }
.weg-step p { color: var(--text-sub); font-size: 1rem; line-height: 1.62; }

/* Baustein-Gruppen (Farbe je Modul via --mc) */
.mod-gruppe { margin-bottom: 26px; }
.mod-gruppe:last-of-type { margin-bottom: 0; }
.mod-gruppe-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.mod-pill {
    font-family: var(--font-ui); font-weight: 700; font-size: .82rem;
    letter-spacing: .14em; text-transform: uppercase;
    background: var(--mc, var(--sc, var(--primary))); color: #fff;
    border-radius: 999px; padding: 5px 14px;
}
.mod-gruppe-head span:not(.mod-pill) { color: var(--text-sub); font-size: 1rem; }
.mod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 10px; align-items: start; }
.mod-card {
    background: var(--bg-mid); border: 1px solid var(--card-border);
    border-radius: 10px; overflow: hidden;
    transition: border-color .25s;
}
.mod-card.is-open { border-color: color-mix(in srgb, var(--mc, var(--sc, var(--primary))) 55%, transparent); }
.mod-head {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 13px 46px 13px 16px; background: none; border: 0; cursor: pointer;
    text-align: left; font: inherit; color: inherit; position: relative;
}
.mod-nr {
    flex-shrink: 0; min-width: 42px; height: 34px; padding: 0 7px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--mc, var(--sc, var(--primary))) 13%, transparent);
    color: var(--mc, var(--sc, var(--primary)));
    font-family: var(--font-heading); font-size: 1rem; border-radius: 8px;
}
.mod-title { flex: 1; font-family: var(--font-ui); font-weight: 700; font-size: 1.02rem; color: var(--text); line-height: 1.35; }
.mod-meta { font-size: .88rem; color: var(--text-muted); white-space: nowrap; }
.mod-tag {
    font-family: var(--font-ui); font-size: .72rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--mc, var(--sc, var(--primary)));
    border: 1px solid color-mix(in srgb, var(--mc, var(--sc, var(--primary))) 45%, transparent);
    border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.mod-caret { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--mc, var(--sc, var(--primary))); font-size: .8rem; transition: transform .3s; }
.mod-card.is-open .mod-caret { transform: translateY(-50%) rotate(180deg); }
.mod-desc { display: none; padding: 0 16px 15px 72px; overflow: hidden; }
.mod-card.is-open .mod-desc { display: block; }
.mod-desc p { color: var(--text-sub); font-size: .98rem; line-height: 1.62; margin: 0; }
.mod-desc .int-link { display: inline-block; margin-top: 9px; }
@media (max-width: 760px) {
    .mod-desc { padding-left: 16px; }
    .mod-meta { display: none; }
}

/* ================================================================
   RESPONSIVE HARDENING
   Verhindert, dass Grid-Kinder ihre Spalte durch lange Toolbars oder
   absolut positionierte Hilfstexte verbreitern. Die Regeln stehen am
   Dateiende, damit sie auch die seitenspezifischen Blöcke absichern.
   ================================================================ */
img, svg, video { max-width: 100%; }

/* Grid-Items haben standardmaessig min-width:auto. Dadurch bestimmte die
   Termin-Toolbar bislang auf kleinen Screens eine ~750px breite Spalte. */
:is(.events-layout, .blog-layout, .kontakt-wrap, .dv-split, .ab-grid, .int-split) > * {
    min-width: 0;
}
.events-layout :is(.ev-toolbar, #events-list, .ev-ov-group, .ev-ov-row) {
    min-width: 0;
    max-width: 100%;
}

/* Die zweispaltige Terminansicht wird schon im kleinen Laptop-/Tabletbereich
   zu eng: Filter, Liste und 320px-Sidebar bekommen dann jeweils volle Breite. */
@media (max-width: 1100px) {
    .events-layout { grid-template-columns: minmax(0, 1fr); }
    .events-layout .sidebar-sticky { position: static; top: auto; }
}

/* Auf Touch-/Tabletbreiten ist eine am Wort verankerte 280px-Sprechblase
   unzuverlaessig. Als Bottom-Card bleibt sie immer voll im Viewport. */
@media (max-width: 960px) {
    .gloss-tip.is-mobile {
        left: 16px; right: 16px; top: auto !important; bottom: 16px;
        width: auto; max-width: none;
    }
}

@media (max-width: 560px) {
    /* Kompakter, aber weiterhin gut bedienbarer Header ab 320px Breite. */
    header { padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top)); }
    .logo { gap: 8px; min-width: 0; }
    header .logo-dv { height: 34px; }
    header .logo-text { font-size: .92rem; line-height: 1.15; letter-spacing: .065em; }
    .nav-actions-mobile { gap: 4px; flex-shrink: 0; }
    .nav-actions-mobile .nav-search { width: 36px; height: 36px; margin-left: 0; }
    .nav-actions-mobile .nav-toggle { width: 36px; height: 36px; padding: 4px; }

    .wrap { padding-left: 18px; padding-right: 18px; }
    .hero-inner { padding-left: 18px; padding-right: 18px; padding-bottom: 46px; }
    .page-hero .wrap { padding-top: 92px; }
    .sec, .sec-sm { padding-top: 48px; padding-bottom: 48px; }
    .ft-inner { padding-left: 18px; padding-right: 18px; }
    .ft-bottom-inner { padding-left: 18px; padding-right: 18px; }
    .bleed-card { margin-left: -18px; margin-right: -18px; padding-left: 18px !important; padding-right: 18px !important; }

    .kl, .kr { padding: 48px 18px; }
    .kl-row { gap: 12px; padding-left: 0; padding-right: 0; }
    .kl-info { min-width: 0; }
    .kl-value { overflow-wrap: anywhere; }
    .kl-ext { display: none; }

    .dl-btn {
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .mod-head { gap: 10px; padding-left: 12px; padding-right: 40px; }
    .mod-title { min-width: 0; overflow-wrap: anywhere; }
    .mod-tag { display: none; }

    /* Kategorie steht bereits im Kontexttext. Auf sehr schmalen Screens
       bleibt deshalb nur ein eventuell wichtiger Status rechts sichtbar. */
    .ev-ov-row { gap: 12px; padding-left: 2px; padding-right: 2px; }
    .ev-ov-row .chip { display: none; }
    .ev-ov-tags { gap: 6px; }
    .ev-ov-day { min-width: 38px; font-size: 1.65rem; }
    .ev-month-head { font-size: 1.45rem; }

    #consent-banner { padding: 10px; }
    .consent-inner { padding: 16px; gap: 14px; }
    .consent-text { min-width: 0; flex-basis: 100%; }
    .consent-btns { width: 100%; flex-wrap: wrap; }
}

/* ══════════════════════════════════════════
   WEGZEICHEN — Pfadfinder-Zeichen als Inline-SVG
   Quelle: js/wegzeichen.js (ein <symbol>-Sprite, hier nur referenziert).
   Normal-Look: saubere Linie. Doodle-Look: Kreide-Kante (siehe doodles.css).
   Größe skaliert per em → passt sich der Umgebung an; Farbe = currentColor.
   ══════════════════════════════════════════ */
.wz {
    display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.24em;
    flex: none; color: inherit;
    fill: none; stroke: currentColor; stroke-width: 4.2;
    stroke-linecap: round; stroke-linejoin: round;
}
.wz use { pointer-events: none; }

/* ── Legende (Erklär-Bereich): alle 12 Zeichen mit Namen ── */
.wz-legend {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.wz-item {
    margin: 0; padding: 20px 12px 16px; text-align: center;
    border-radius: 12px; background: var(--surface); border: 1px solid var(--card-border);
}
.wz-item-sign { display: flex; align-items: center; justify-content: center; height: 62px; margin-bottom: 10px; color: var(--sc, var(--primary)); }
.wz-item-sign .wz { width: 54px; height: 54px; }
.wz-item figcaption { font-family: var(--font-ui); font-size: .85rem; font-weight: 700; color: var(--text); line-height: 1.25; }
.wz-item figcaption small { display: block; font-weight: 400; font-size: .76rem; color: var(--text-sub); margin-top: 3px; }