/* ══════════════════════════════════════════
   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;
    --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);
    --bg-footer: #0B1F30;         /* Footer bleibt dunkel-navy — Markenanker */
    --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. */
    --ak-woe: #B44800;
    --ak-jupfi: #2F53A7;
    --ak-pfadi: #007A38;
    --ak-rover: #C0182A;
    --ak-ausbildung: #7A4BDC;
    --ak-drachen: #0D7481;
    --ak-prev: #D0124B;
    --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(--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(--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(--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(--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(--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(--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(--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); letter-spacing: .16em; text-transform: uppercase;
    margin-bottom: 16px;
}
.sec-label::before { content: ''; width: 22px; height: 1px; background: var(--cta); 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); }
.breadcrumbs .bc-wz { width: 16px; height: 16px; opacity: .55; }
.page-hero .breadcrumbs .bc-wz, .ak-hero .breadcrumbs .bc-wz { opacity: .7; }
.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; }
/* 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(--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;
}

.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(--highlight); border-color: var(--highlight); }
.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(--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(--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;
}
.dl-btn:hover { background: var(--primary); color: #fff; }
/* 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; }
.dl-btn-primary:hover { background: var(--sc-btn-hover, var(--cta-hover)); color: #fff; }

/* ── 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);
}
.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(--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(--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(--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(--primary) 45%, transparent); color: var(--primary); }
html:not([data-theme="dunkel"]) .hero .btn-outline:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); border-color: var(--primary); color: 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(--primary)) 16%, transparent) 0%, transparent 46%);
    opacity: 0; transition: opacity .5s ease; pointer-events: none;
}
.hero-door--join   { --hd-c: 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(--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(--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(--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(--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(--primary), transparent); }
.marquee-bar::after  { right: 0; background: linear-gradient(to left,  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(--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(--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(--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(--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(--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(--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(--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(--primary); border-color: 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(--primary); background: color-mix(in srgb, 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(--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(--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(--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(--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(--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(--primary); color: #fff; }
.step-dot.soon { background: color-mix(in srgb, var(--primary) 25%, transparent); color: 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(--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; }
/* 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(--primary) 12%, transparent); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: 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(--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(--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(--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(--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(--primary); margin-top: 8px; display: block; text-decoration: none; }
.vs-email:hover { color: var(--highlight); }

/* 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;
}
.ak-badge {
    font-family: var(--font-ui); font-size: 1rem;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--akc,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(--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(--primary); flex-shrink: 0; }
.ak-tasks { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.ak-task { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; background: var(--bg-mid); border-radius: var(--radius-sm); border: 1px solid var(--card-border); font-size: 1rem; color: var(--text-sub); line-height: 1.55; transition: border-color .25s; }
.ak-task i { color: var(--primary); margin-top: 2px; flex-shrink: 0; }
.ak-task .fa-check { font-size: 0; width: .85em; height: .85em; display: inline-block; background-color: 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(--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(--primary) 12%,transparent); display: flex; align-items: center; justify-content: center; font-size: 16px; color: 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); }

/* ── 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(--primary); background: color-mix(in srgb, 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(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, 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(--primary); transform: translateY(-2px); }
.leaflet-popup-content .stamm-links { margin-top: 8px; }
.leaflet-popup-content .stamm-ico { color: 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(--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(--primary) 12%, transparent);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary); font-size: 15px;
    transition: background .2s;
}
.kl-row:hover .kl-icon { background: color-mix(in srgb, 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(--primary); background: color-mix(in srgb, 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: flex-start;
    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;
}
.int-icon {
    width: 42px; height: 42px; flex-shrink: 0;
    background: color-mix(in srgb, var(--primary) 12%, transparent); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: 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(--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(--primary) 5%, transparent);
    border: 2px dashed color-mix(in srgb, var(--text-sub) 42%, transparent);
}
.ph-doodle i { font-size: 2.4rem; color: 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(--primary); border-color: 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(--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(--primary) 12%, transparent); color: var(--text); outline: none; }
.ds-opt.is-selected { color: 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: 1.08rem; line-height: 1.78; margin-bottom: 20px; }
.article-prose ul { color: var(--text-sub); font-size: 1.08rem; line-height: 1.78; margin-bottom: 20px; padding-left: 22px; }
.article-prose ul li { margin-bottom: 6px; }
.article-prose strong { color: var(--text); }
.article-prose a { color: var(--primary); }
.article-infobox { background: color-mix(in srgb, var(--primary) 8%, transparent); border: 1px solid color-mix(in srgb, 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(--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;
}
.back-btn { display: block; width: fit-content; margin-bottom: 20px; }

/* ── 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: .3em;
    width: .75em; height: .75em;
    background-color: var(--primary);
    -webkit-mask: var(--lilie-mask) center/contain no-repeat;
    mask: var(--lilie-mask) center/contain no-repeat;
}

/* Lilie als Aufzählungszeichen in Flex-Listen (Ersatz für fa-check) */
.lilie-tick { flex-shrink: 0; width: .9em; height: .9em; margin-top: .3em; background-color: 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: .3em; }
.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(--primary); background: color-mix(in srgb, 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(--primary); color: 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 */
.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(--primary) 12%, transparent); color: 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(--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(--primary); color: var(--text); }
.nf-chip.active { background: var(--primary); border-color: 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(--primary); border-color: 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(--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(--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(--primary) 8%,transparent); border-color: var(--primary); color: 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(--primary); color: var(--primary); background: color-mix(in srgb, 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(--primary) 12%, transparent) !important; outline: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); }
.ev-grid-today .ev-grid-dn { color: 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(--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(--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(--primary) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, 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(--primary); outline-offset: -1px; }
.ev-cal-day-panel { margin-top: 14px; background: color-mix(in srgb, var(--primary) 6%, transparent); border: 1px solid color-mix(in srgb, 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(--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(--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(--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); }
.event-row[data-id]:hover .ev-name { color: 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(--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(--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(--primary); }
.ev-ov-day {
    font-family: var(--font-heading); font-size: 1.9rem; line-height: 1;
    color: 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(--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 rgba(255,255,255,.07); /* Footer ist in beiden Modi dunkel */
    position: relative;
}
footer::before {
    content: '';
    position: absolute;
    left: 2%; bottom: 10px;
    width: 280px; height: 280px;
    background: url('../img/lilie-fill.svg') center/contain no-repeat;
    opacity: .06;
    pointer-events: none;
}
.ft-inner {
    max-width: 1240px; margin: 0 auto;
    padding: 56px 52px 36px;
    display: grid; grid-template-columns: 260px 1fr; gap: 60px;
}
/* Footer ist in beiden Modi dunkel-navy → Textfarben hier fest hell */
footer .logo-text { color: #EAF2F8; }
footer .logo-text span { color: #7AB3DC; }
footer .logo-hex { background: #2C5F8A; }
.ft-brand p { color: rgba(255,255,255,.45); 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: rgba(255,255,255,.55); margin-bottom: 14px; }
.ft-col a { display: block; color: rgba(255,255,255,.5); font-size: 1rem; margin-bottom: 9px; cursor: pointer; transition: color .2s; text-decoration: none; }
.ft-col a:hover { color: #D9A82F; }
.ft-bottom {
    background: var(--bg-footer);
    border-top: 1px solid rgba(255,255,255,.05); /* dunkler Footer */
}
.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: rgba(255,255,255,.35); font-family: var(--font-ui); font-size: 1rem; }
.ft-social { display: flex; gap: 16px; }
.ft-social a { color: rgba(255,255,255,.5); font-size: 1rem; cursor: pointer; transition: color .2s, transform .15s; text-decoration: none; }
.ft-social a:hover { color: #D9A82F; 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; }
.stufe-nav .is-current { background: color-mix(in srgb, var(--snc) 65%, #16242e); }
.stufe-nav .is-current .nm, .stufe-nav .is-current .ag { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
@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(--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 (unten + links dunkel, wie im Hero) */
.gslide::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(to top, var(--bg-footer) 0%, rgba(var(--overlay-rgb),.45) 32%, rgba(var(--overlay-rgb),0) 58%),
      linear-gradient(105deg, rgba(var(--overlay-rgb),.55) 0%, rgba(var(--overlay-rgb),0) 44%);
}
/* 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: rgba(255,255,255,.88);
    margin-bottom: 10px;
}
.gcap-eyebrow::before { content: ''; width: 20px; height: 1px; background: rgba(255,255,255,.88); }
.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: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.5);
}

.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(--overlay-rgb),.62); border: 1px solid rgba(255,255,255,.18); color: #fff;
    font-size: 1rem;
    transition: background .25s, border-color .25s, transform .25s;
}
.gnav:hover { background: var(--primary); border-color: var(--primary); }
.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: rgba(255,255,255,.35); transition: width .3s, background .3s;
}
.gdot.is-active { width: 26px; background: var(--primary); }
.gdot:hover { background: rgba(255,255,255,.7); }

@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(--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(--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(--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(--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(--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(--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(--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); }
.tinted .btn-fire:hover { background: color-mix(in srgb, var(--sc) 82%, #000); box-shadow: 0 8px 28px color-mix(in srgb, var(--sc) 35%, transparent); }
.tinted .ev-day { color: var(--sc); }
.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(--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 .back-btn, .page-hero .btn-ghost {
    color: rgba(255,255,255,.85); border-bottom-color: rgba(255,255,255,.35);
}
.page-hero .back-btn:hover, .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(--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(--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 .back-btn, 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 .back-btn:hover, 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(--primary) 45%, transparent); color: var(--primary); }
html:not([data-theme="dunkel"]) .page-hero .btn-outline:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); border-color: var(--primary); color: 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(--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(--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 .back-btn { color: var(--text-sub) !important; border-bottom-color: color-mix(in srgb, var(--text-sub) 40%, transparent) !important; }
html:not([data-theme="dunkel"]) .ak-hero .back-btn:hover { color: var(--text) !important; border-bottom-color: var(--text) !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(--primary);
    background: linear-gradient(135deg, color-mix(in srgb, 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(--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(--primary) 11%, transparent);
    color: var(--primary);
    transition: background .2s, color .2s, transform .2s;
}
.card-mail:hover { background: var(--primary); color: #fff; transform: translateY(-1px); }
.card-mail:focus-visible { outline: 2px solid 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-task, .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-task, .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(--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-task, .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-task, .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-task, .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(--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; gap: 8px; }
.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. */
#hdr, .mobile-nav { --primary: #003056; }
html[data-theme="dunkel"] :is(#hdr, .mobile-nav) { --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(--primary) 12%, transparent);
    color: 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(--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(--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(--primary)) 13%, transparent);
    color: var(--mc, 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(--primary));
    border: 1px solid color-mix(in srgb, var(--mc, 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(--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(--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; }