/* ══════════════════════════════════════════
   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;
}

/* Die Tokens (:root) stehen in css/tokens.css, geladen vor dieser Datei. */

*, *::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; }

/* [hidden] muss stärker sein als jede eigene display-Regel.

   Der Browser setzt [hidden] auf display:none, aber das steht in SEINEM
   Stylesheet und verliert gegen jede Regel von uns. `.blog-post` steht auf
   display:block — damit lief das `c.hidden = true` in js/neuigkeiten-liste.js
   ins Leere und der Themenfilter blendete nichts aus: „wenn ich Info auswähle,
   werden trotzdem die Newsletter angezeigt."

   Die Falle betrifft jedes Element mit eigener display-Regel, das per
   .hidden = true versteckt wird. Deshalb einmal global statt einzeln. */
[hidden] { display: none !important; }


/* ── GRAIN OVERLAY ──
   `top: 60px` statt `inset: 0` ist keine Gestaltungsfrage. Diese Schicht war
   die Ursache des Streifens über der Navbar auf iPhones, und zwar belegt:

   Safari 26 färbt die Fläche um die Statusleiste nach der `background-color`
   eines fixierten Elements im 4px-Band am oberen Rand. Diese Schicht liegt dort,
   ist volle Breite, hat z-index 9997 über allem — und hat gar keine
   `background-color`. Safari tastet also eine durchsichtige Fläche ab, und die
   Statusleiste zeigt den Seiteninhalt.

   Zwei Messreihen am Gerät (Janis, 06.08.) tragen das:
     · Ein Kandidat mit `opacity: .97` HAT gefärbt. `opacity` unter 1
       disqualifiziert also nicht — die 3 % hier ändern nichts daran, dass diese
       Schicht ein vollwertiger Kandidat ist. Genau das hatte ich zwischendurch
       falsch angenommen und den Fix zurückgenommen.
     · Auf einer Testseite mit Navbar-Nachbau färbte schon die Navbar allein.
       Dort gibt es dieses Overlay nicht. Es ist der einzige Unterschied.

   Ein erster Versuch stand auf `top: 4px`, also genau AUF der Bandgrenze, und
   war damit wirkungslos. 60 px sind klar draußen. Bei 3 % Deckkraft sieht
   niemand, dass die obersten 60 px kein Korn tragen — dort liegt ohnehin die
   deckende Kopfzeile darüber.

   NICHT auf `inset: 0` zurückdrehen. Es waren sieben Anläufe. */
body::before {
    content: '';
    position: fixed; top: 60px; right: 0; bottom: 0; left: 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;
}
/* Auf Touch-Geräten ohne Korn: Bei 3 % sieht man es auf dem Handy nicht,
   aber Safari muss eine bildschirmgroße Ebene über allem bei jedem
   Scroll-Frame mitverrechnen (06.10.2026). Das löst nebenbei auch das
   Statusleisten-Problem oben für immer: kein fixiertes Element, kein Abtasten. */
@media (pointer: coarse) { body::before { content: none; } }

/* ══════════════════════════════════════════
   LANGE WÖRTER BRECHEN, STATT AUSZULAUFEN
   ──────────────────────────────────────────
   Deutsche Komposita sind der Dauerbrenner: „Stammesvorständekonferenz" lief
   aus der Termin-Karte, „Pfadfindertechniken" schob die Modul-Zeile unter den
   Aufklapp-Pfeil. Beides dieselbe Ursache — ein Wort ohne Trennstelle ist die
   kleinste unteilbare Einheit einer Zeile, und ist die breiter als der Kasten,
   laeuft sie hinaus.

   BEIDES zusammen, und die Reihenfolge im Kopf behalten: hyphens:auto trennt
   nach Silben und setzt dabei einen Bindestrich („Stammesvorstände-konferenz"),
   und genau so gehört es im Deutschen. Das braucht <html lang="de">, das steht
   in default.php. overflow-wrap:break-word ist nur der Rückfall für Wörter, für
   die der Browser keine Trennstelle kennt — dort bricht es ohne Strich, was
   hässlich, aber immer noch besser als ein Überlauf ist.

   break-word statt anywhere: es greift NUR, wenn ein Wort sonst überliefe. Bei
   allem anderen bleibt der Umbruch unverändert, die Regel ist also unsichtbar,
   bis sie gebraucht wird.

   Mindestens drei Buchstaben vor und nach dem Strich (02.10.2026): Ohne die
   Grenze trennte Chrome „Arbeitskrei-se" und „Gruppen-stunde" nur deshalb
   verschieden, weil die Breite zufaellig passte. Mit 3/3 bleibt kein
   Zwei-Buchstaben-Rest am Zeilenanfang stehen. Safari kennt nur die alten
   Einzelwerte, deshalb beide Schreibweisen.
   ══════════════════════════════════════════ */
:is(h1, h2, h3, h4, h5, h6, .sec-title, .kl-value, .ev-modal-title, .ev-modal-desc, .card-popup-body) {
    overflow-wrap: break-word; hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3;
}
/* Icons nie trennen. Mit hyphens:auto sucht Chrome im Icon-Font den
   Trennstrich, findet ihn im Subset nicht und lädt dafür die volle
   fa-solid-900.woff2 (134 KB) nach. Jedes Icon in einer Überschrift tat das. */
:is(.fa-solid, .fas, .fa-classic, .fa-brands, .fab) { hyphens: manual; -webkit-hyphens: manual; }

/* ── HEADER ── */
header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 22px 52px;
    /* env(...) liefert seit dem 03.08.2026 überall 0: der Viewport steht wieder
       auf Vorgabe, ohne viewport-fit=cover. Die Fläche unter der Dynamic Island
       legt damit Safari selbst an und färbt sie nach theme-color, statt dass wir
       sie bemalen (Begründung in snippets/head.php). Die Zeile bleibt, weil sie
       dann wieder greift, falls cover je zurückkommt. */
    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.

   Seit Safari 26 hat das einen zweiten, wichtigeren Grund: Der Browser färbt
   die Statusleiste nach dem obersten fixierten Element und liest dabei
   `background-color` UND `backdrop-filter`. Durchscheinend plus Weichzeichner
   heißt für Safari „Glas", und dann kommt dort Seiteninhalt durch. Deckend und
   ohne Weichzeichner ist also Pflicht, nicht Geschmack.

   Dasselbe gilt für die Mobilnavigation: sie ist fixed über den ganzen Schirm
   und würde im geöffneten Zustand abgetastet. */
@media (pointer: coarse) {
    header, header.solid { background: rgb(var(--hbg)); -webkit-backdrop-filter: none; backdrop-filter: none; transition: none; }
    .mobile-nav { background: rgb(var(--hbg)); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

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

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

nav { display: flex; gap: 2px; align-items: center; }
nav a {
    color: var(--text-sub); font-size: 1rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    padding: 8px 14px; cursor: pointer; text-decoration: none;
    transition: color .25s; position: relative;
    white-space: nowrap;
}
nav a::after {
    content: ''; position: absolute; bottom: 5px; left: 14px; right: 14px;
    height: 1px; background: var(--sc, var(--primary));
    transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
nav a:hover, nav a.active { color: var(--text); }
nav a:hover::after, nav a.active::after { transform: scaleX(1); }
.nav-cta {
    /* Akzentfarbe der Seite: auf AK- und Stufenseiten setzt das Template
       --sc-btn am <body>, ohne Tint bleibt das rote --cta. */
    background: var(--sc-btn, 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; }
/* Getönte Seiten dunkeln aus der Akzentfarbe ab, statt --cta-hover zu nehmen.
   Zwei Gründe: --cta-hover ist ein Rotton und würde die Akzentfarbe beim Hover
   wegwischen, und --sc-btn-hover taugt nicht (nur für 2 der 9 Tints definiert,
   sonst identisch mit der Füllung = kein sichtbarer Hover). Über .tinted
   getrennt, damit ungetönte Seiten ihren aufhellenden Rot-Hover behalten. */
body.tinted .nav-cta:hover { background: color-mix(in srgb, var(--sc-btn, var(--cta)) 84%, #000) !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;
    background: rgba(var(--hbg), .98); backdrop-filter: blur(20px);
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px;
    /* Die Safe-Area muss IN die Kurzschreibweise. Vorher stand darüber ein
       eigenes padding-top: env(...), das die Zeile hier stillschweigend
       überschrieben hat — mit viewport-fit=cover liefe das Menü sonst unter
       die Statusleiste. */
    overflow-y: auto;
    padding: calc(72px + env(safe-area-inset-top)) 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); }
/* top rechnet die Safe-Area mit, sonst liegt die Leiste auf iPhones mit Dynamic
   Island teilweise darunter. Gilt fuer beide Lightboxen, sie teilen sich diese
   Klassen. */
.lb-actions { position: fixed; top: calc(16px + env(safe-area-inset-top)); right: 16px; display: flex; gap: 10px; z-index: 3001; }
.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); }
.lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* 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); }
.lb-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.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;
    /* Akzentfarbe der Seite, wie .btn-fire und .dl-btn-primary: auf AK- und
       Stufenseiten setzt das Template --sc-btn am <body>, sonst greift das rote
       --cta. Der Button hängt per position:fixed am body, erbt also mit. */
    background: var(--sc-btn, 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; }
/* Hover NICHT über --sc-btn-hover, siehe .dl-btn-primary weiter unten: die
   Variable ist nur für 2 der 9 Tints definiert und fiele sonst auf die
   Füllfarbe zurück, also gar kein sichtbarer Hover. Abdunkeln klappt überall. */
.to-top:hover { background: color-mix(in srgb, var(--sc-btn, var(--cta)) 84%, #000); }
.to-top:focus-visible { outline: 2px solid var(--sc, var(--primary)); outline-offset: 3px; }
.to-top .wz { width: 26px; height: 26px; transform: rotate(-90deg); }
@media (max-width: 768px) { .to-top { width: 46px; height: 46px; bottom: 20px; } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: opacity .2s ease, visibility .2s ease; transform: none; } }
.lb-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(10px); background: #16242e; color: #fff; padding: 11px 18px; border-radius: 999px; font-size: .95rem; box-shadow: 0 8px 24px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 3001; }
.lb-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .lightbox, .lb-btn, .lb-toast { transition: none; } }

/* ── Wegzeichen-Lightbox (Zeichen groß anzeigen, js/wegzeichen.js) ── */
.wz-item { cursor: pointer; }
.wz-item:focus-visible { outline: 2px solid var(--sc, var(--primary)); outline-offset: 4px; border-radius: 8px; }
/* Kurzes Wackeln beim Überfahren, dieselbe Bewegung wie die Karten-Icons
   (@keyframes icon-twist weiter unten). Sitzt auf dem Rahmen, nicht auf dem SVG:
   die Hintergrund-Doodles bringen eigene transform-Animationen mit, die sich
   sonst gegenseitig überschreiben. */
.wz-item:is(:hover, :focus-visible) .wz-item-sign { animation: icon-twist .5s ease forwards; }
@media (prefers-reduced-motion: reduce) {
    .wz-item:is(:hover, :focus-visible) .wz-item-sign { animation: none; transform: scale(1.06); }
}
/* Ein Doodle in der Lightbox: .dood-svg ist für den Hintergrund gebaut (absolut
   positioniert, eigene Farbe über --dood-c) und muss hier die Fläche füllen und
   die Farbe der Lightbox erben. */
.wz-lb-sign .dood-svg { position: static; width: 100%; height: 100%; color: inherit; opacity: 1; }
/* Grosse Ansicht braucht ein feineres Kreide-Korn, sonst wirkt sie glatt: die
   Filterwerte gelten in viewBox-Einheiten und wachsen mit der Anzeigegroesse
   mit, aus Faserung werden lange Wellen. Begruendung steht in js/wegzeichen.js
   beim Filter #wz-chalk-gross. */
.wz-lb-sign .wz,
.wz-lb-sign .dood-svg .dood { filter: url(#wz-chalk-gross); }
.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; }
/* Bedienelemente: die Wegzeichen-Lightbox nutzt seit dem 03.08. dieselben
   Klassen wie die Bilder-Lightbox (.lb-actions, .lb-btn, .lb-nav, siehe oben).
   Vorher standen hier eigene Regeln mit denselben Werten in Kopie — eine
   Doodle-Regel hat dann position:relative daruebergelegt und alle drei Knoepfe
   aus ihrer Verankerung gerissen. Zwei Stellen fuer dieselbe Sache, das war die
   eigentliche Ursache. */
.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; } }
/* Theme-Anpassung: Light-Mode = helle Flaeche + Navy-Zeichen, Dark-Mode = dunkel + weiss */
html:not([data-theme="dunkel"]) .wz-lightbox { background: rgba(245,245,241,.96); }
html:not([data-theme="dunkel"]) .wz-lb-inner { color: var(--text); }
html:not([data-theme="dunkel"]) .wz-lb-sign { color: var(--sc, var(--primary)); }
html:not([data-theme="dunkel"]) .wz-lb-name { color: var(--text); }
html:not([data-theme="dunkel"]) .wz-lb-hint { color: var(--text-sub); }
/* Im Hellmodus ist die Lightbox-Fläche hell, die geteilten .lb-Knöpfe sind aber
   auf Weiß-auf-Dunkel ausgelegt. Deshalb hier umgedreht — inklusive der
   Umrandung von .lb-nav, die sonst weiß auf hell und damit unsichtbar wäre. */
html:not([data-theme="dunkel"]) .wz-lightbox :is(.lb-btn, .lb-nav) { background: rgba(0,32,58,.1); color: var(--text); border-color: rgba(0,32,58,.22); }
html:not([data-theme="dunkel"]) .wz-lb-close, html:not([data-theme="dunkel"]) .wz-lb-nav, html:not([data-theme="dunkel"]) .wz-lb-dl { 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, html:not([data-theme="dunkel"]) .wz-lb-dl:hover, html:not([data-theme="dunkel"]) .wz-lb-dl:focus-visible { background: rgba(0,32,58,.18); }
.mobile-nav a {
    color: var(--text-sub); font-size: 1.1rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    padding: 11px 0; text-decoration: none;
    transition: color .25s;
}
.mobile-nav a:hover, .mobile-nav a.active { color: var(--text); }
/* Unterseiten-Gruppe: eingerückt mit Führungslinie */
.mnav-group { display: flex; flex-direction: column; }
.mnav-subs {
    display: flex; flex-direction: column;
    margin: 0 0 6px 4px; padding-left: 16px;
    border-left: 2px solid color-mix(in srgb, var(--text) 16%, transparent);
}
.mobile-nav .nav-cta {
    background: var(--sc, var(--primary)); color: var(--on-accent);
    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. */
/* Kurz und knapp (06.10.2026): vorher .55 s plus bis zu .3 s Verzögerung, 24px
   Weg. Beim zügigen Scrollen kam der Inhalt fast eine Sekunde nach dem Daumen,
   und die Seite wirkte langsam. js/reveal.js löst dazu etwas VOR dem Rand aus. */
.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity .3s ease-out, transform .3s ease-out; }
.js .reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .05s; }
.reveal-delay-2 { transition-delay: .1s; }
.reveal-delay-3 { transition-delay: .15s; }
@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; }
/* 90px waren zu viel: auf /ak/ausbildung/woodbadge summierten sich die
   Sektionspolster auf 1710px, also 21% der Seitenhöhe, und damit auf mehr als
   alle neun Trennlinien zusammen. Die 72px hier wirken auf allen 97 Seiten;
   für die 74 ohne Kasten-Abschnitt sind sie am Desktop die einzige Änderung,
   denn dort erreicht das clamp() der Trennlinie fast wieder ihre alte Größe.
   Tablet (60px) und Handy (48px) bleiben, wie sie sind: dort war es nie zu
   luftig, und die Trennlinie ist mobil schon von 114 auf 64px geschrumpft. */
.sec { padding: 72px 0; }
/* Ein Kasten, den der Satz davor ankündigt, gehört an diesen Satz. Ohne das
   standen 90px Polster, eine Trennlinie und noch einmal 90px dazwischen, die
   doodles.js zum Zentrieren setzt — rund 300 Pixel zwischen einem Doppelpunkt
   und dem, worauf er zeigt. :has() greift auf den VORIGEN Abschnitt zu,
   deshalb keine negativen Außenabstände. */
.sec:has(+ .sec--anschluss) { padding-bottom: 28px; }
.sec--anschluss { padding-top: 0; }
.sec-sm { padding: 60px 0; }

/* ── ANBAU: ein Abschnitt, der nur aus einem Kasten besteht ──────────────────
   Ein solcher Abschnitt macht kein neues Thema auf, er hängt an dem, was
   darüber steht. Die volle Zeremonie — 90px Polster, Trennlinie, 90px Polster
   — behandelt ihn aber wie eines. Auf /ak/ausbildung/woodbadge standen fünf
   davon hintereinander: 213 Wörter auf 2380px, also fast drei Bildschirme.
   Gemessen am 29.08.2026, dieselbe Seite kam auf 8027px bei 1440×900.

   Die Trennlinie davor entfällt; das übernimmt js/doodles.js, weil CSS keine
   Elemente einfügen kann. Dort steht dieselbe Bedingung noch einmal, ohne
   :has() — beide Stellen zeigen aufeinander. Wer eine ändert, ändert beide.

   Ob ein Kasten wirklich am Thema darüber hängt, weiß nur, wer den Text
   geschrieben hat. Deshalb ist es im Panel einstellbar (fields/naehe.yml):
   `.sec--thema` nimmt den Abschnitt hier wieder heraus und holt die Linie
   zurück. „Häufige Fragen" gefolgt von „Das Friedenslicht" ist so ein Fall.

   Das !important ist nötig und nicht bequem: die Block-Snippets schreiben
   `style="padding-top:0"` direkt ins Markup, damit ein Block oben anstößt.
   Bisher hat doodles.js das beim Setzen der Trennlinie wieder hochgezogen —
   fällt die Linie weg, fällt auch der Ausgleich weg, und der Kasten klebte
   am vorigen Abschnitt. Im CSS gelöst hält es auch ohne JavaScript.
 */
.sec:not(.sec--thema):has(> .wrap > .bleed-card:only-child) { padding-top: 34px !important; }
/* Nach unten wird nur da eng, wo direkt der nächste Kasten folgt. Steht
   danach ein neues Thema, kommt dort wieder eine Trennlinie, und die braucht
   ihren Anlauf — sonst spart man am falschen Ende. Der Nachbarschafts-
   Selektor erledigt das von selbst: liegt eine Trennlinie dazwischen, ist die
   nächste Sektion nicht mehr der direkte Nachbar und die Regel greift nicht. */
.sec:not(.sec--thema):has(> .wrap > .bleed-card:only-child):has(+ .sec:not(.sec--thema) > .wrap > .bleed-card:only-child) { padding-bottom: 34px; }

/* ── 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; }
/* Im Seitenkopf mehr Luft zwischen Krume und Titel: 20px wirkten gedrängt, und
   weil .page-hero seine Höhe aus dem Inhalt zieht (min-height ist nur die
   Untergrenze), bekommt das Hero-Foto dadurch gleich mehr Fläche. Skaliert mit,
   damit es auf dem Handy nicht auseinanderfällt. */
:is(.page-hero, .ak-hero, .pg-header) .breadcrumbs { margin-bottom: clamp(26px, 3vw, 38px); }
.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; }

/* KEINE eigene Farbe: der Pfeil ist ein Wegzeichen-SVG und zeichnet mit
   currentColor. Setzte er hier --text-muted (#566A7D, ein Schieferblau), erbte
   er NICHT das Weiss, das .page-hero .breadcrumbs li setzt — auf dem dunklen
   Hero-Foto stand dann ein blauer Pfeil zwischen weissen Woertern, mit
   entsprechend schlechtem Kontrast. So nimmt er immer die Farbe des <li>, also
   dieselbe wie das Wort links davon. */
.breadcrumbs .bc-sep { display: inline-flex; align-items: center; }
/* Kein opacity-Abschlag: der Pfeil erbt die Farbe des <li> und war mit .55
   dunkler als die Wegmarken, zwischen denen er steht — er sah aus wie ein
   deaktiviertes Element statt wie ein Trennzeichen. */
.breadcrumbs .bc-wz { width: 16px; height: 16px; }
.breadcrumbs a {
    color: inherit; text-decoration: none; transition: color .2s;
    text-transform: none; font-weight: 400; font-size: inherit; letter-spacing: 0; padding: 0;
}
.breadcrumbs a::after { display: none; }
.breadcrumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs [aria-current="page"] { color: var(--text-sub); font-weight: 700; }

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

/* Auf Foto-/Farb-Heroes hell (page-hero UND ak-hero) */
.page-hero .breadcrumbs li, .ak-hero .breadcrumbs li { color: rgba(255,255,255,.9); }
.page-hero .breadcrumbs a:hover, .ak-hero .breadcrumbs a:hover { color: #fff; }
.page-hero .breadcrumbs [aria-current="page"], .ak-hero .breadcrumbs [aria-current="page"] { color: rgba(255,255,255,.95); }
/* Typo-Skala: h1 (Seitentitel) klar über h2 (Abschnittstitel) —
   Unterseiten sollen ruhig wirken, nicht jede Sektion gleich laut. */
h1.sec-title {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem,4.6vw,3.6rem);
    color: var(--text); line-height: 1.06; margin-bottom: 14px;
}
h2.sec-title {
    font-family: var(--font-heading);
    font-size: clamp(1.55rem,2.6vw,2.15rem);
    color: var(--text); line-height: 1.14; margin-bottom: 12px;
}
.sec-title em { color: var(--sc, var(--primary)); font-style: italic; }
.ak-hero .sec-title em { color: inherit; } /* Foto-Hero: Akzent = Titelweiß statt grellem Ton auf Dunkel */
.sec-sub {
    color: var(--text-sub); font-size: 1rem; line-height: 1.72;
    max-width: 560px; margin-bottom: 44px;
}
/* Die 44px sind fuer einen echten Abschnittswechsel gedacht: Vorspann, dann
   Karten, Listen oder ein Termin-Gitter. Folgt darauf aber nur WEITERER Text,
   liest sich der Abstand wie zwei Leerzeilen mitten im Absatz — der Vorspann
   ist dann optisch vom Text abgeschnitten, zu dem er gehoert. In dem Fall der
   normale Absatzabstand (18px, wie .article-prose p). */
.sec-sub:has(+ .article-prose) { margin-bottom: 18px; }
/* Und derselbe Fall braucht auch denselben Satzspiegel. Der Vorspann brach bei
   560px um, der Absatz direkt darunter erst bei 1136 — eine Spalte, zwei
   Zeilenlaengen, und der Text sprang beim Weiterlesen nach rechts weg. Auf
   /spiritualitaet gemeldet (Janis, 07.08.2026), betrifft sechs Abschnitte plus
   den AK-Vorspann. Abschnitte OHNE Vorspann bleiben so breit wie bisher. */
.sec-sub + .article-prose,
.sec-sub + .article-prose.is-narrow { max-width: 560px; }
/* Die schmale Variante des Fliesstext-Blocks. Stand vorher als inline-style im
   Snippet und haette jede Regel hier ueberstimmt — auch die Zeile darueber. */
.article-prose.is-narrow { max-width: 780px; }

.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;
    /* Durchsichtiger Rahmen statt keinem: .btn-outline hat 1px Rahmen, .btn-fire
       hatte keinen. Bei gleicher Polsterung war der gefuellte Knopf dadurch 2px
       niedriger (50 gegen 52, klein 42 gegen 44), und nebeneinander sassen die
       Kanten versetzt. */
    border: 1px solid transparent;
    transition: all .25s; text-transform: uppercase; text-decoration: none;
    /* Zeilenhöhe MUSS hier stehen, sonst sind <a class="btn"> und
       <button class="btn"> unterschiedlich hoch: der Link erbt die 1.5 vom
       Body, der Button bekommt vom Browser "normal" (ca. 1.2). Das sind rund
       5px Unterschied, sichtbar sobald beide nebeneinander stehen. Mit einem
       festen Wert hängt die Komponente nicht mehr am Umfeld. */
    line-height: 1.5;
}
.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-width: 0 0 1px;
    border-bottom: 1px solid color-mix(in srgb, var(--text-sub) 35%, transparent);
    font-size: 1rem; letter-spacing: .08em;
}
/* Auf getönten Seiten die Akzentfarbe statt Rot, sonst bleibt der Ghost-Button
   der einzige Bauteil, der beim Hover aus der Seitenfarbe fällt. */
.btn-ghost:hover { color: var(--sc, var(--link-hover)); border-color: var(--sc, var(--link-hover)); }
.btn-sm { padding: 9px 18px; font-size: 1rem; }
/* Gefuellter Knopf in der Akzentfarbe eines Blocks (Splitcard). Vorher inline
   background, im Dunkelmodus dann weiss auf hellem Gold (2,19:1). */
.btn-fire.btn-akzent { background: var(--ac); }
/* Ganze Karte als Link mit Knopf darin (AK-Verweis auf den Stufenseiten). Die
   Buehne selbst hebt bewusst nicht ab (KARTEN-HOVER-SYSTEM), also zeigt der Knopf,
   dass die Flaeche reagiert. Vorher tat sich beim Ueberfahren der Karte nichts. */
a.bleed-card:is(:hover, :focus-visible) .btn-fire { background: var(--sc-btn-hover, var(--cta-hover)); transform: translateY(var(--btn-lift)); }

/* ── FOCUS STATES (WCAG) ── */
/* Grundregel fuer alles ohne eigenen Fokusstil. Vorher trugen Kopf, Footer,
   Galerie, Brotkrumen und Textlinks den Standardring des Browsers, Karten und
   Knoepfe 2px in --sc: sichtbar beides, einheitlich nicht. Niedrigste
   Spezifitaet (0-1-0), damit jede vorhandene Regel gewinnt. Kontrast des
   Rings gegen die Seite: hell Navy auf Creme 13:1, dunkel Hellblau 7,6:1. */
:focus-visible { outline: 2px solid var(--sc, var(--primary)); outline-offset: 2px; }
.btn-fire:focus-visible, .btn-outline:focus-visible, .btn-ghost:focus-visible,
.nf-chip:focus-visible, .ev-view-btn:focus-visible, .ev-cal-nav-btn:focus-visible,
.dl-btn:focus-visible {
    outline: 2px solid var(--sc, var(--primary)); outline-offset: 3px;
}
a.news-card:focus-visible, a.srv-card:focus-visible, a.ak-card:focus-visible,
a.int-card:focus-visible, a.blog-post:focus-visible,
a.stat-c:focus-visible, a.qc:focus-visible, a.hero-door:focus-visible,
a.stufe-mini:focus-visible, a.mat-card:focus-visible, a.ak-member:focus-visible,
a.dl-person:focus-visible, .card-popup-close:focus-visible { outline: 2px solid var(--sc, var(--primary)); outline-offset: 2px; }

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

.chip {
    display: inline-block; padding: 4px 11px; border-radius: 2px;
    font-family: var(--font-ui); font-size: .8rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
}
/* Chip-Farben aus den Tokens (--chip-x, --chip-x-flaeche), hell und dunkel,
   geprueft in wcag-check. Vorher hier und in themes.css als feste Werte. */
.chip-blue { background: var(--chip-blue-flaeche); color: var(--chip-blue); }
.chip-green { background: var(--chip-green-flaeche); color: var(--chip-green); }
.chip-orange { background: var(--chip-orange-flaeche); color: var(--chip-orange); }
.chip-purple { background: var(--chip-purple-flaeche); color: var(--chip-purple); }
.chip-teal { background: var(--chip-teal-flaeche); color: var(--chip-teal); }
.chip-red { background: var(--chip-red-flaeche); color: var(--chip-red); }
.chip-leiter { background: var(--chip-leiter-flaeche); color: var(--chip-leiter); }
.chip-white { background: var(--chip-white-flaeche); color: var(--chip-white); }
.chip-stamm { background: var(--chip-stamm-flaeche); color: var(--chip-stamm); }

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

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

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

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

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

/* ── MARQUEE ── */
.marquee-bar { background: var(--sc, var(--primary)); position: relative; overflow: hidden; }
.marquee-bar::before, .marquee-bar::after { content: ''; position: absolute; top: 0; bottom: 0; width: 64px; z-index: 2; pointer-events: none; }
.marquee-bar::before { left: 0;  background: linear-gradient(to right, var(--sc, var(--primary)), transparent); }
.marquee-bar::after  { right: 0; background: linear-gradient(to left,  var(--sc, var(--primary)), transparent); }
.marquee-scroll { overflow-x: auto; overflow-y: hidden; padding: 16px 0; cursor: grab; touch-action: pan-x; scrollbar-width: none; -ms-overflow-style: none; }
.marquee-scroll::-webkit-scrollbar { display: none; }
/* Mobil hat der Banner keinen sichtbaren Scrollbalken und (im Doodle-Look)
   keine seitlichen Fades. Ein beidseitiger Rand-Fade zeigt, dass er scrollt. */
@media (max-width: 760px) {
    .marquee-scroll {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    }
}
.marquee-scroll.is-grabbing { cursor: grabbing; }
.marquee-scroll:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.marquee-inner { display: flex; gap: 0; width: max-content; white-space: nowrap; }
.mq-item {
    display: flex; align-items: center; gap: 18px;
    margin-right: 50px;
    font-family: var(--font-heading); font-size: 1rem;
    color: var(--on-accent); 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; }
/* Raster der Wegekarten (Block wegekarten). Die Spaltenzahl folgt der
   Kartenzahl, nicht nur der Breite: Mit auto-fit standen vier Karten bei
   mittlerer Breite als 3 + 1 da, eine Karte allein in der zweiten Reihe
   (Janis, 06.10.2026). Jetzt: 4 Karten = 4, 2 oder 1 Spalte; 3 Karten = 3
   oder 1; 2 Karten = 2 oder 1. Andere Zahlen wie bisher automatisch. */
.qc-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.qc-grid:is(.qc-n2, .qc-n3, .qc-n4) { grid-template-columns: 1fr; }
@media (min-width: 600px) {
    .qc-grid:is(.qc-n2, .qc-n4) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
    .qc-grid.qc-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Vier Spalten erst ab 1180 px: darunter waren es je 214 px, und die Titel
   „Für Kinder & Eltern“ und „Leiter*in werden“ brachen zweizeilig um
   (gemessen am 06.10.2026, ab 1180 px einzeilig). */
@media (min-width: 1180px) {
    .qc-grid.qc-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Vier schmale Spalten: Innenabstand etwas knapper, sonst bricht der Titel */
/* Kacheln sind normale Karten (Hover kommt zentral aus dem Karten-System) */
.qc {
    background: var(--bg-mid); padding: 38px 32px;
    border: 1px solid var(--card-border); border-radius: var(--radius-lg);
}

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

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

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

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

/* ── GLOBALE SUCHE (Overlay) ── */
.nav-search { background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid var(--card-border); color: var(--text); cursor: pointer; font-size: 1.02rem; width: 38px; height: 38px; justify-content: center; border-radius: 10px; display: inline-flex; align-items: center; margin-left: 2px; transition: color .2s, background .2s, border-color .2s; }
.nav-search:hover { color: #fff; background: var(--sc, var(--primary)); border-color: var(--sc, var(--primary)); }
#search-overlay { position: fixed; inset: 0; height: 100dvh; z-index: 1400; display: none; padding: 12vh 20px 20px; background: color-mix(in srgb, #000 55%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#search-overlay.is-open { display: block; animation: search-fade .18s ease; }
@keyframes search-fade { from { opacity: 0; } to { opacity: 1; } }
.search-box { max-width: 600px; margin: 0 auto; background: var(--bg-mid); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,.4); overflow: hidden; animation: search-pop .22s cubic-bezier(.22,.61,.36,1); }
@keyframes search-pop { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.search-bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--card-border); color: var(--text-sub); }
.search-bar > i { font-size: 1.1rem; }
.search-bar input { flex: 1; background: none; border: 0; outline: none; color: var(--text); font: inherit; font-size: 1.15rem; }
#search-input::-webkit-search-cancel-button, #search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-close { background: none; border: 0; color: var(--text-sub); cursor: pointer; font-size: 1.15rem; padding: 4px 9px; border-radius: 8px; line-height: 1; transition: color .2s, background .2s; }
.search-close:hover { color: var(--sc, var(--primary)); background: color-mix(in srgb, var(--sc, var(--primary)) 12%, transparent); }
.search-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; padding: 13px 22px; border-top: 1px solid var(--card-border); color: var(--text-muted); font-size: .82rem; }
.sf-item { display: inline-flex; align-items: center; gap: 7px; }
.sf-keys { display: inline-flex; align-items: center; gap: 3px; }
.search-foot kbd { display: inline-flex; align-items: center; justify-content: center; height: 26px; min-width: 26px; padding: 0 7px; font-size: .82rem; color: var(--text-sub); border: 1px solid var(--card-border); border-radius: 6px; line-height: 1; }
/* Symbol-Tasten (Pfeile/⌘): quadratisch & ohne Seitenpolster → Glyph sitzt
   optisch mittig. Etwas Kopffreiheit (kleinerer Glyph), weil Unicode-Pfeile
   tief im Em-Feld sitzen und sonst nach unten versetzt wirken. */
.search-foot .ksym, .search-foot .kcmd { width: 26px; min-width: 26px; padding: 0; }
.search-foot .ksym { font-size: 1rem; }
.search-foot .kcmd { font-size: 1.2rem; }
/* Enter-Taste ist keine quadratische Symboltaste, sondern eine breitere,
   rechteckige „echte" Enter-Taste (wie auf einer Tastatur). */
.search-foot .kenter { width: auto; min-width: 44px; padding: 0 12px; }
.kplus { color: var(--text-muted); font-size: .82rem; }
@media (max-width: 700px) { .search-foot { display: none; } }
.search-results { max-height: 56vh; overflow-y: auto; padding: 8px; }
.search-hint { padding: 24px 16px; color: var(--text-sub); text-align: center; }
.search-group { padding: 12px 14px 4px; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
/* Markierung in --text: im Ausschnitt geerbtes --text-muted kam auf der Toenung
   auf 2,8:1. Die Regel stand ausserdem doppelt (zweite Kopie unter .search-result-snip). */
.search-result-title mark, .search-result-snip mark { background: color-mix(in srgb, var(--sc, var(--primary)) 22%, transparent); color: var(--text); 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-type { font-size: .8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
/* Auf der getoenten aktiven Zeile reicht --text-muted nicht (3,1:1). */
.search-result:is(.is-active, :hover) .search-result-type { color: var(--text-sub); }
.search-result.is-active, .search-result:hover { background: color-mix(in srgb, var(--sc, var(--primary)) 16%, transparent); }
/* „alle N zeigen" und die „Meintest du …?"-Wörter: Knöpfe, die wie Text
   aussehen. Kein Button-Stil, damit sie in der Liste nicht wichtiger wirken als
   die Treffer selbst. */
.search-mehr { display: block; width: 100%; text-align: left; padding: 8px 14px 12px 44px; border: 0;
    background: none; color: var(--text-muted); font: inherit; font-size: .84rem; cursor: pointer; }
.search-mehr:hover, .search-mehr:focus-visible { color: var(--sc, var(--primary)); text-decoration: underline; }
.search-meinte { display: inline-block; margin-top: 8px; font-size: .9rem; }
.search-vorschlag { border: 0; background: none; padding: 0 2px; font: inherit; cursor: pointer;
    color: var(--sc, var(--primary)); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { #search-overlay.is-open, .search-box { animation: none; } }

/* ── COOKIE-CONSENT-BANNER ── */
#consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; display: none; padding: 16px; }
#consent-banner.is-open { display: block; animation: consent-up .3s cubic-bezier(.22,.61,.36,1); }
@keyframes consent-up { from { transform: translateY(110%); } to { transform: translateY(0); } }
.consent-inner { max-width: 940px; margin: 0 auto; background: var(--bg-mid); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: 0 14px 44px rgba(0,0,0,.4); padding: 20px 24px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.consent-text { flex: 1; min-width: 260px; color: var(--text-sub); font-size: .95rem; line-height: 1.6; }
.consent-text strong { color: var(--text); }
.consent-text a { color: var(--sc, var(--primary)); }
/* ── Einstellungen: dieselbe Schale wie das Banner, aber mittig und mit einer
   Zeile je Dienst. Deshalb erbt #consent-prefs die Banner-Regeln ueber die
   gemeinsame .consent-inner und setzt hier nur die Abweichungen. */
#consent-prefs { position: fixed; inset: 0; z-index: 1110; display: none; padding: 16px;
    background: rgba(0,0,0,.45); overflow-y: auto; }
#consent-prefs.is-open { display: flex; align-items: center; justify-content: center; }
#consent-prefs .consent-inner { flex-direction: column; align-items: stretch; max-width: 560px; gap: 16px; }
/* Die Zeilen sind <label> um eine Checkbox: damit schaltet auch der Text, nicht
   nur das kleine Kaestchen — auf dem Handy der Unterschied zwischen benutzbar
   und nicht. */
.consent-row { display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
    color: var(--text-sub); font-size: .92rem; line-height: 1.55; }
.consent-row input { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--cta); cursor: pointer; }
.consent-row strong { color: var(--text); }
#consent-prefs .consent-btns { display: flex; gap: 10px; justify-content: flex-end; }
.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 { border-bottom-color: var(--sc, var(--primary)); }
/* Glossarbegriffe sind mit tabIndex=0 anspringbar, also Bedienelemente. Hier stand
   `outline: none`, und sichtbar blieb allein eine andere FARBE an der gepunkteten
   Linie — eine reine Farbunterscheidung, und die genügt für einen Fokus nicht
   (2.4.7, Stufe AA). Dazu :focus statt :focus-visible, es griff also auch bei der
   Maus. Jetzt derselbe Ring wie überall sonst auf der Seite. */
.gloss:focus-visible {
    border-bottom-color: var(--sc, var(--primary));
    outline: 2px solid var(--sc, var(--primary)); outline-offset: 3px; border-radius: 3px;
}
/* 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 :is(h2, h4) { font-family: var(--font-heading); font-size: 1.15rem; color: var(--text); margin-bottom: 14px; }
.sidebar-box p { color: var(--text-sub); font-size: 1rem; line-height: 1.65; margin-bottom: 16px; }

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

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

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

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

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

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

/* ── AK ÜBERSICHT ── */
.ak-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.ak-card {
    background: var(--bg-mid); border-radius: var(--radius-lg);
    padding: 26px; border: 1px solid var(--card-border); transition: all .3s;
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
}
/* „Mehr erfahren" an der Kartenunterkante halten — sonst klebt der Button je
   nach Textlänge unterschiedlich hoch am Absatz (Reihe wirkt unruhig).
   align-self, damit der Button nicht auf Kartenbreite gezogen wird. */
.ak-card .qc-link { margin-top: auto; align-self: flex-start; }
/* Titel in der AK-Farbe. --akc ist im Panel immer ein --ak-*-Ton, und die sind als
   Textfarbe in beiden Modi auf AA geprueft: gemessen 4,96 bis 9,38 auf der Karte
   (02.10.2026). Eine --stufe-*-Farbe haette hier nichts zu suchen (DESIGN-SYSTEM.md §8). */
.ak-card :is(h2, h3) { font-family: var(--font-heading); font-size: 1.3rem; color: var(--akc, 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; }
/* Ueberschrift im Infokasten. Sie ersetzt seit dem 23.08. den Kicker „Auf einen
   Blick": ohne ihn waere der Kasten eine Liste aus drei Zeilen ohne Anlass.
   Masse wie bei .sidebar-box, damit Kaesten gleich aussehen. */
.ak-info-card :is(h2, h3, h4) {
    font-family: var(--font-heading); font-size: 1.15rem; color: var(--text);
    margin-bottom: 14px;
}
.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; }
/* Kurzer Text unter dem Titel der Info-Karte (Feld sidecardtext im Personen-
   Baustein), z. B. „Kommt gerne vorbei" neben der Anschrift des DiBü. */
.ak-info-text { font-size: 1rem; line-height: 1.55; color: var(--text-sub); margin: 0 0 8px; }
.ak-info-row i { width: 16px; text-align: center; color: var(--sc, var(--primary)); flex-shrink: 0; }
/* Aufgaben als Lilien-Aufzählung (zweispaltig), nicht als Kästchen-Reihe: als
   Einzelkarten wirkte die Liste unruhig und die Kästen versprachen Interaktion,
   die es nicht gibt. */
.ak-tasks { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px 44px; }
.ak-task { display: flex; align-items: flex-start; gap: 12px; padding: 0; background: none; border: 0; font-size: 1rem; color: var(--text-sub); line-height: 1.62; }
.ak-task i { color: var(--sc, var(--primary)); margin-top: .34em; flex-shrink: 0; }
/* Größe in rem, NICHT in em: das Element hatte font-size:0 (um die FA-Glyphe zu
   unterdrücken), womit .85em = 0px ergab — die Lilie war unsichtbar. Die Glyphe
   blendet ohnehin ::before aus, also braucht es font-size:0 nicht. */
.ak-task .fa-check { width: .8rem; height: .8rem; display: inline-block; background-color: var(--sc, var(--primary)); -webkit-mask: var(--lilie-mask) center/contain no-repeat; mask: var(--lilie-mask) center/contain no-repeat; }
.ak-task .fa-check::before { display: none; }
.ak-members { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.ak-member { background: var(--bg-mid); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--card-border); transition: all .3s; }
.ak-mimg { height: 140px; overflow: hidden; position: relative; }
.ak-mimg img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; filter: grayscale(15%); transition: filter .3s, transform .4s; }
.ak-member:hover .ak-mimg img { filter: grayscale(0%); transform: scale(1.05); }
.ak-member:hover { transform: translateY(var(--card-lift)); }   /* leichtes Anheben wie die Aktuelles-Karten (ak-member ist kein Link) */
.ak-mbody { padding: 14px; }
.ak-mname { font-family: var(--font-heading); font-size: 1rem; color: var(--text); margin-bottom: 3px; }
.ak-mrole { font-family: var(--font-ui); font-size: 1rem; color: var(--akc,var(--sc, var(--primary))); letter-spacing: .07em; text-transform: uppercase; }
.ak-dls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.ak-dl { background: var(--bg-mid); border-radius: var(--radius-lg); padding: 18px; border: 1px solid var(--card-border); display: flex; align-items: center; gap: 12px; cursor: pointer; transition: all .25s; }
.ak-dl-ico { width: 40px; height: 40px; border-radius: 8px; background: color-mix(in srgb,var(--sc, var(--primary)) 12%,transparent); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--sc, var(--primary)); flex-shrink: 0; }
.ak-dl-name { font-size: 1rem; font-weight: 700; color: var(--text); }
.ak-dl-meta { font-size: 1rem; color: var(--text-muted); }
/* Optionale Beschreibung unter Name und Groesse. Sobald eine Kachel mehrzeilig
   wird, sitzt das Icon oben statt mittig — sonst schwebt es neben dem Text. */
.ak-dl-desc { font-size: .94rem; color: var(--text-sub); line-height: 1.5; margin-top: 5px; }
.ak-dl:has(.ak-dl-desc) { align-items: flex-start; }

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

/* ── STÄMME ── */
.stamm-search {
    /* --ctl-h ist die Hoehe JEDES Bedienelements (DESIGN-SYSTEM.md §6). Das Feld
       stand auf 13px Innenabstand und war damit 47px hoch, drei Pixel ueber dem
       Biber-Chip daneben — in der breiten Leiste kaum zu sehen, in der schmalen
       Spalte des Finders sofort. */
    width: 100%; height: var(--ctl-h); padding: 0 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;
    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-visible {
    /* Vorher outline:none, sichtbar war nur eine andere Rahmenfarbe auf 1px.
       Der Ring kommt dazu, die weiche Färbung bleibt. */
    outline: 2px solid var(--sc, var(--primary)); outline-offset: 2px;
    border-color: var(--sc, var(--primary));
    background: color-mix(in srgb, var(--sc, var(--primary)) 5%, transparent);
}
.stamm-search::placeholder { color: var(--text-muted); }
/* ── STAMMESFINDER: Suchspalte und Karte nebeneinander ───────────────────────
   Vorher lag die Karte oben ueber die volle Breite und darunter ein Raster aus
   32 Kacheln — Suche und Karte waren nie gleichzeitig zu sehen. Jetzt teilen
   sie sich eine feste Hoehe: die Liste scrollt in sich, die Karte steht.

   Die Hoehe ist bewusst an den Bildschirm gebunden und nach oben gedeckelt.
   Ohne 74vh waere die Liste auf einem Laptop laenger als das Fenster, ohne die
   680px waere die Karte auf einem grossen Monitor ein Plakat. */
.stammfinder {
    display: grid;
    grid-template-columns: minmax(290px, 370px) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "kopf karte" "liste karte";
    gap: 16px 22px;
    height: min(74vh, 680px);
}
/* Suche immer auf voller Breite, Filter darunter. Nebeneinander passt es in der
   schmalen Spalte nur knapp — und „knapp" heisst, dass es je nach Beschriftung
   des Filters mal umbricht und mal nicht. */
.sf-kopf { grid-area: kopf; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sf-kopf .stamm-search-wrap { flex: 1 1 100%; }
/* Der Filter neben einem 44px-Suchfeld in einer 370er-Spalte war zu wuchtig.
   Kleiner und mit demselben runden Abschluss wie das Feld darueber — er ist
   ein Zusatz zur Suche, keine zweite Hauptsache. Nur hier: die vier anderen
   Filterleisten der Seite behalten die Systemhoehe. */
.sf-kopf .nf-chip-klein {
    height: 34px; padding: 0 14px; font-size: .88rem; font-weight: 600;
    border-radius: 999px;
}
.sf-karte { grid-area: karte; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
/* Quellenangabe unter der Karte statt in ihrer Ecke — Begruendung im Template. */
.sf-quelle { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--text-muted); }
.sf-quelle a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sf-quelle a:hover { color: var(--sc, var(--primary)); }

/* „Wo bin ich" — sitzt unter der Zoom-Leiste und uebernimmt deren Form, damit
   die drei Knoepfe als eine Gruppe gelesen werden. Leaflet liefert Rahmen und
   Groesse ueber .leaflet-bar; hier kommt nur das Icon dazu. */
.sf-ortung a { display: flex !important; align-items: center; justify-content: center; }
/* color: inherit, nicht --primary. Sonst steht ein blaues Fadenkreuz neben
   einem weissen Plus und Minus — im Doodle-Look faerbt --dood-ink alle drei. */
.sf-ortung i { font-size: .95rem; color: inherit; }
.sf-ortung.is-suchend i { animation: sf-ortung-dreh 1s linear infinite; }
@keyframes sf-ortung-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    /* Ohne Drehung braucht es trotzdem ein Zeichen, dass gerade gesucht wird. */
    .sf-ortung.is-suchend i { animation: none; opacity: .45; }
}
/* FLEX, NICHT GRID — und das ist keine Geschmacksfrage.

   Als Grid mit fester Hoehe schrumpften die 32 Zeilen auf 5,65px zusammen:
   (429 − 31×8 Abstand) / 32. Sichtbar blieb von jeder Karte ein Strich, der
   Rest lag unter `overflow: hidden`. Genau so hat Janis es gemeldet.

   Der Grund ist eine Kombination aus zwei Dingen, die einzeln richtig sind:
   die Liste hat eine feste Hoehe (sie soll ja in sich scrollen), und `.stamm`
   erbt `overflow: hidden` aus dem Karten-Hover-System. Ein Grid-Item mit
   overflow ungleich visible hat die automatische Mindesthoehe 0 — es DARF
   unter seinen Inhalt schrumpfen, und bei knappem Platz tut es das auch.

   Flex hat dieselbe Falle (flex-shrink ist standardmaessig 1), deshalb steht
   unten `flex: none`. Wer hier wieder auf Grid geht, braucht
   `grid-auto-rows: min-content`. */
.sf-liste {
    grid-area: liste;
    list-style: none; margin: 0; padding: 0 2px 0 0;
    overflow-y: auto; min-height: 0;
    display: flex; flex-direction: column; gap: 8px;
    /* scrollbar-gutter haelt die Breite konstant: ohne ihn ruckt die Liste beim
       Filtern seitlich, sobald sie kurz genug fuer keinen Balken wird. */
    scrollbar-gutter: stable;

    /* Weicher Rand statt harter Kante. Die beiden Werte setzt js/staemme.js je
       nach Scrollstand: oben nur, wenn schon gescrollt wurde, unten nur,
       solange noch etwas kommt. Steht die Liste am Ende, ist der Verlauf weg —
       sonst sieht die letzte Karte dauerhaft angeschnitten aus. */
    --fade-oben: 0px;
    --fade-unten: 0px;
    mask-image: linear-gradient(to bottom,
        transparent 0, #000 var(--fade-oben),
        #000 calc(100% - var(--fade-unten)), transparent 100%);
}
.sf-liste > li { flex: none; }

/* ══════════════════════════════════════════
   ROLLBALKEN IN EIGENEN SCROLL-FLAECHEN (zentral)
   ──────────────────────────────────────────
   Der Doodle-Look laesst sich hier nicht nachbauen: Kreide braucht einen
   SVG-Filter, und den nimmt kein Scrollbar-Teil an. Also das Naechstbeste —
   schmal, in der Tinte der Seite, ohne eigene Rinne.

   Gilt fuer jede eigene Scroll-Flaeche UND fuer das Fenster (`html`).
   NEUE SCROLL-FLAECHE? → hier mit eintragen.

   DAS FENSTER HAT EINEN PREIS, und der ist eine bewusste Entscheidung: sobald
   ein Rollbalken ueberhaupt gestaltet wird, macht Chrome/Safari aus dem
   macOS-Overlay-Balken (der sich nur beim Scrollen einblendet und keine Breite
   kostet) einen dauerhaft sichtbaren, der Platz wegnimmt. Das laesst sich
   nicht trennen — entweder eigenes Aussehen oder Overlay. Janis wollte das
   einheitliche Aussehen; zurueck geht es, indem `html` aus den Listen fliegt.

   HINTERGRUND AUF DER FLAECHE SELBST, nicht nur auf der Rinne: Safari malt
   `::-webkit-scrollbar` sonst weiss aus. In Chrome faellt das nicht auf, dort
   ist die Vorgabe durchsichtig — in der Suche war deshalb ein weisser Streifen
   zu sehen, von Janis gemeldet.

   Zwei Schreibweisen, und ausdruecklich NICHT beide gleichzeitig: sobald
   `scrollbar-width` gesetzt ist, ignorieren Chrome und neuere Safari die
   ::-webkit-Regeln. Die alte deckt Safari bis 18 mit ab, die neue kommt
   deshalb nur dort zum Zug, wo es die alte nicht gibt (Firefox).
   ══════════════════════════════════════════ */
:is(html, .sf-liste, .search-results, .mobile-nav, #consent-prefs, .ev-modal,
    .card-popup.is-on, .marquee-scroll)::-webkit-scrollbar {
    width: 10px; height: 10px; background: transparent;
}
:is(html, .sf-liste, .search-results, .mobile-nav, #consent-prefs, .ev-modal,
    .card-popup.is-on, .marquee-scroll)::-webkit-scrollbar-track { background: transparent; }
:is(html, .sf-liste, .search-results, .mobile-nav, #consent-prefs, .ev-modal,
    .card-popup.is-on, .marquee-scroll)::-webkit-scrollbar-corner { background: transparent; }
:is(html, .sf-liste, .search-results, .mobile-nav, #consent-prefs, .ev-modal,
    .card-popup.is-on, .marquee-scroll)::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--dood-ink, var(--primary)) 30%, transparent);
    border-radius: 999px;
    border: 3px solid transparent;   /* Abstand zum Rand, ohne eigene Rinne */
    background-clip: content-box;
}
:is(html, .sf-liste, .search-results, .mobile-nav, #consent-prefs, .ev-modal,
    .card-popup.is-on, .marquee-scroll)::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--dood-ink, var(--primary)) 55%, transparent);
    background-clip: content-box;
}
@supports not selector(::-webkit-scrollbar) {
    :is(html, .sf-liste, .search-results, .mobile-nav, #consent-prefs, .ev-modal,
        .card-popup.is-on, .marquee-scroll) {
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--dood-ink, var(--primary)) 40%, transparent) transparent;
    }
}
.sf-leer { color: var(--text-sub); padding: 8px 2px; }

/* Karten-Tor: fuellt die Kartenspalte, solange keine Kacheln geladen sind.
   flex:1 statt height:100% — unter beiden steht noch die Quellenzeile, und
   die soll sich ihren Platz nehmen duerfen, statt aus der Spalte zu ragen. */
.sf-gate {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    gap: 14px; padding: 32px 24px;
    border: 1px solid var(--card-border, rgba(255,255,255,.12));
    border-radius: var(--radius-lg); background: var(--bg-mid);
}
.sf-gate-icon { font-size: 2rem; color: var(--primary); }
.sf-gate-text { color: var(--text-sub); font-size: 1rem; line-height: 1.6; margin: 0; max-width: 470px; }
/* Ein Klick in der Liste, bevor die Karte da ist, fuehrt hierher statt die
   Kacheln still nachzuladen — der Hinweis unter dem Knopf will gelesen werden.
   Deshalb muss das Tor sichtbar antworten. */
.sf-gate.is-gefragt { border-color: var(--sc, var(--primary)); animation: sf-gate-puls 1.1s ease 2; }
@keyframes sf-gate-puls {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc, var(--primary)) 28%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .sf-gate.is-gefragt { animation: none; } }

#staemme-map { flex: 1 1 auto; min-height: 0; border-radius: var(--radius-lg); overflow: hidden; }

/* Ein Treffer.

   DIE KLASSE HEISST WEITER `.stamm`, obwohl aus der Kachel eine Listenzeile
   geworden ist. Sie steht naemlich in zwei Sammel-Listen: im KARTEN-HOVER-
   SYSTEM weiter unten in dieser Datei und im Kreide-Rahmen in doodles.css.
   Beide tragen den Hinweis „NEUE KARTEN-KLASSE? → hier eintragen", und beim
   Umbenennen auf `.sf-item` war die Karte genau deshalb ohne Doodle-Rahmen —
   von Janis gemeldet. Ein Name statt zweier Nachtraege.

   Der Knopf traegt Name und Ort und ist die Karten-Aktion, die Kontakt-Icons
   stehen darunter: Links gehoeren nicht in einen Button. Vorher war die ganze
   Kachel ein <div> mit Klick-Handler — mit der Maus bedienbar, mit der
   Tastatur gar nicht (WCAG 2.1.1, Stufe A). */
.stamm {
    background: var(--bg-mid); border: 1px solid var(--card-border);
    border-radius: 8px; transition: border-color .25s;
}
.stamm:hover { border-color: color-mix(in srgb, var(--sc, var(--primary)) 45%, transparent); }
.stamm.is-active { border-color: var(--sc, var(--primary)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sc, var(--primary)) 35%, transparent); }
.stamm-btn {
    display: block; width: 100%; text-align: left;
    background: none; border: 0; cursor: pointer;
    padding: 12px 16px 6px; font-family: inherit;
    border-radius: 8px 8px 0 0;
}
.stamm-btn:focus-visible { outline: 2px solid var(--sc, var(--primary)); outline-offset: -2px; }
/* Name und Ort MUESSEN block sein. Es sind <span> — in einem <button> ist nur
   Phrasing Content erlaubt, ein <div> waere ungueltiges HTML. Als inline
   liefen sie in einer Zeile zusammen („Aarbergen, Paloma Aarbergen /
   Michelbach"), genau das hatte Janis als gestaucht gemeldet. */
.stamm-name { display: block; font-size: 1rem; color: var(--text); font-weight: 600; margin-bottom: 2px; }
.stamm-ort  { display: block; font-size: .95rem; color: var(--text-muted); line-height: 1.4; }
.stamm-fuss { display: flex; align-items: center; gap: 16px; padding: 0 16px 12px; flex-wrap: wrap; }
.stamm-fuss .stamm-more { margin-top: 0; margin-left: auto; }
.stamm-fuss .stamm-nokontakt { margin-top: 0; }

@media (max-width: 900px) {
    /* Am Handy untereinander, in der Reihenfolge des Quelltexts: Karte, Suche,
       Liste. Die Liste bekommt ihre natuerliche Hoehe zurueck — ein
       Scrollbereich im Scrollbereich ist am Finger eine Falle. */
    .stammfinder { display: block; height: auto; }
    /* Die Hoehe gehoert der Karte, nicht der Spalte: die Quellenzeile darunter
       braucht ihren eigenen Platz, sonst frisst sie ihn der Karte weg. */
    .sf-karte { margin-bottom: 18px; }
    .sf-karte > :is(#staemme-map, .sf-gate) { flex: none; height: 340px; }
    .sf-kopf { margin-bottom: 14px; }
    .sf-liste { overflow: visible; padding-right: 0; }
    .sf-gate { padding: 30px 20px; }
}

.stamm-links { display: flex; gap: 16px; }
.stamm-ico { color: var(--text-sub); font-size: 1.15rem; line-height: 1; text-decoration: none; transition: color .2s, transform .2s; }
.stamm-ico:hover { color: var(--sc, var(--primary)); transform: translateY(-2px); }
.leaflet-popup-content .stamm-links { margin-top: 8px; }
.leaflet-popup-content .stamm-ico { color: var(--sc, var(--primary)); font-size: 1.2rem; }

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

/* ── INTERESSIERTE (Homepage) ── */
.int-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
/* Spaltenblock mit Foto: engere Bildspalte. Bei 1fr 1fr wurde das Foto so breit
   wie der ganze Text daneben und zog die Aufmerksamkeit vom Fließtext weg.
   Betrifft die Startseite und die ISK-Seite, die beide Text links und Foto rechts
   haben. Unter 760px stapelt die Mobil-Regel weiter unten sowieso. */
.int-split-media { grid-template-columns: 1.25fr 0.75fr; }
.int-right { display: flex; flex-direction: column; gap: 14px; }
.int-card {
    display: flex; gap: 18px; align-items: stretch;
    background: var(--bg-mid); border: 1px solid var(--card-border);
    border-radius: var(--radius-lg); padding: 22px 24px;
    transition: all .3s; position: relative; overflow: hidden;
}
/* Textspalte füllt die Kartenhöhe, damit der Link unten sitzt (Beschreibungen
   sind sehr unterschiedlich lang — sonst flattern die Links auf halber Höhe). */
.int-card > div:last-child { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.int-card .int-link { margin-top: auto; align-self: flex-start; }
.int-icon {
    width: 42px; height: 42px; flex-shrink: 0;
    background: color-mix(in srgb, var(--sc, var(--primary)) 12%, transparent); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--sc, var(--primary)); font-size: 1rem;
}
.int-title { font-family: var(--font-heading); font-size: 1.05rem; color: var(--text); margin-bottom: 6px; }
.int-desc { color: var(--text-sub); font-size: 1rem; line-height: 1.62; margin-bottom: 10px; }
.int-link { color: var(--sc, var(--primary)); font-size: 1rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
/* Linktext ist hier oft eine nackte Adresse („gegen-missbrauch.bistumlimburg.de“).
   In Versalien und gesperrt passt die bei 375px nicht in die Karte und lief über
   den Rand. `anywhere` statt `break-word`, weil nur das die Mindestbreite senkt,
   auf die es im inline-flex der Touch-Regel ankommt. */
.int-link { overflow-wrap: anywhere; }
.int-link i { font-size: 1rem; }

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

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

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

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

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

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

/* ── Doodle-Select: eigenes Dropdown (ersetzt <select data-doodle>, js/doodle-select.js) ── */
.ds { position: relative; display: inline-block; font-family: var(--font-ui); }
/* !important, weil doodles.css mit `.doodle .ff-box :is(input, textarea, select)`
   spezifischer ist UND spaeter laedt. Ohne das steht im Kontaktformular das
   native Select sichtbar ueber dem gezeichneten Dropdown. */
.ds > select { display: none !important; }
.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 { background: color-mix(in srgb, var(--sc, var(--primary)) 12%, transparent); color: var(--text); }
.ds-opt:focus-visible { background: color-mix(in srgb, var(--sc, var(--primary)) 12%, transparent); color: var(--text); outline: 2px solid var(--sc, var(--primary)); outline-offset: -2px; }
.ds-opt.is-selected { color: var(--sc, var(--primary)); font-weight: 700; }
/* Pflichtfeld nicht gewaehlt (js/doodle-select.js faengt das invalid-Event ab,
   weil der Browser seine Meldung am versteckten <select> nicht zeigen kann). */
/* Icon im getoenten Kreis (Splitcard-Seitenspalte, Danke-Meldung im
   Kontaktformular). Stand vorher inline, mit einem glatten 2px-Ring, an den
   doodles.css nicht herankam. Farbe per --ac. */
.ic-ring {
    --ac: var(--sc, var(--primary));
    width: 64px; height: 64px; border-radius: 50%; position: relative;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--ac) 15%, transparent);
    border: 2px solid color-mix(in srgb, var(--ac) 30%, transparent);
    font-size: 1.6rem; color: var(--ac); margin-bottom: 8px;
}
/* Danke-Meldung im Kontaktformular: Wegzeichen statt Haken */
.kf-danke-zeichen { margin: 0 auto 18px; color: var(--sc, var(--primary)); }
.kf-danke-zeichen .wz { width: 96px; height: 96px; }
.kf-danke-an { color: var(--text); font-size: 1rem; line-height: 1.7; margin: 0 auto 6px; }
/* Abschluss der Stufenseiten. Ohne eigene Linie: davor steht schon die
   Wellen-Trennlinie (Janis, 06.10.2026: doppelt gemoppelt). */
.stufe-cta { text-align: center; position: relative; }
.ds-fehler { display: block; margin-top: 8px; color: var(--cta-text); font-size: 1rem; line-height: 1.4; }
.ds.is-invalid .ds-btn { border-color: var(--cta-text); }
.article-hero-meta { position: absolute; bottom: 24px; left: 28px; right: 28px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* ── TEILEN-BEREICH UNTER EINEM BEITRAG ──
   Abgesetzt durch eine Linie, damit klar ist: hier endet der Text. Die Knöpfe
   umbrechen, weil vier davon auf einem Handy nicht in eine Zeile passen. */
.beitrag-teilen { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--card-border); }
.beitrag-teilen h2 { font-family: var(--font-heading); font-size: 1.3rem; color: var(--text); margin: 0 0 6px; }
.beitrag-teilen h2 em { font-style: normal; color: var(--sc, var(--primary)); }
.beitrag-teilen > p { color: var(--text-sub); font-size: .98rem; line-height: 1.6; margin: 0 0 16px; }
.teilen-row { display: flex; flex-wrap: wrap; gap: 10px; }

.article-prose { max-width: none; }
.article-prose h2 { font-family: var(--font-heading); font-size: 1.55rem; color: var(--text); margin: 32px 0 12px; }
.article-prose p { color: var(--text-sub); font-size: 1rem; line-height: 1.72; margin-bottom: 18px; }
.article-prose ul { color: var(--text-sub); font-size: 1rem; line-height: 1.72; margin-bottom: 18px; padding-left: 22px; }
.article-prose ul li { margin-bottom: 6px; }
.article-prose strong { color: var(--text); }
.article-prose a { color: var(--sc, var(--primary)); }
.article-infobox { background: color-mix(in srgb, var(--sc, var(--primary)) 8%, transparent); border: 1px solid color-mix(in srgb, var(--sc, var(--primary)) 20%, transparent); border-radius: var(--radius-lg); padding: 24px 28px; margin: 28px 0; }
.article-infobox p { margin: 0; }
.article-share { display: flex; align-items: center; gap: 12px; padding: 20px 0; border-top: 1px solid rgba(20,34,46,.12); border-bottom: 1px solid rgba(20,34,46,.12); margin: 32px 0; flex-wrap: wrap; }
.article-share-label { font-family: var(--font-ui); font-weight: 700; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.blog-post { display: block; text-decoration: none; background: var(--bg-mid); border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 20px; transition: all .3s; }
.bp-img { height: 190px; overflow: hidden; position: relative; }
/* Datum-Badge auf Termin-Karten im Aktuelles-Feed */
.bp-evdate {
    position: absolute; left: 14px; bottom: 14px; z-index: 2;
    display: flex; flex-direction: column; align-items: center; line-height: 1;
    background: rgba(var(--overlay-rgb), .88); color: #fff;
    border-radius: 10px; padding: 9px 13px 8px;
    font-family: var(--font-ui); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
}
.bp-evdate strong { font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 3px; }
.bp-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform .4s; }
.blog-post:hover .bp-img img { transform: scale(1.03); }
.bp-body { padding: 26px; }
/* Hinweis über Archiv-Beiträgen. Lag als Inline-Style im Template und hatte
   deshalb keine Klasse, an der der Doodle-Look ansetzen konnte — der Kasten war
   der letzte mit glattem Rahmen. Kreide-Rahmen in css/doodles.css.
   Icon und Text über flex + gap, nicht über margin plus Leerzeichen. */
.archiv-hinweis {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--bg-mid); border: 1px solid var(--card-border);
    border-radius: var(--radius); padding: 14px 18px;
    font-size: .92rem; color: var(--text-sub); margin-bottom: 28px;
}
.archiv-hinweis > i { color: var(--text-muted); flex-shrink: 0; margin-top: .15em; }

/* Kopfzeile einer Beitragsseite (Datum · Autor · Chip). Lag als vier Inline-Styles
   im Template. Der Abstand zwischen Icon und Text kommt über gap, nicht über ein
   Leerzeichen im Markup: neben dem Kalender-Glyph fiel das zu knapp aus und beides
   klebte aneinander. */
.pg-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.pg-meta-item { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 1rem; color: var(--text-muted); }
.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 :is(h2, 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-visible { outline: 2px solid var(--sc, var(--primary)); outline-offset: 2px; border-color: var(--sc, var(--primary)); }

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

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

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

/* ── GLOSSAR: Begriffsliste (/glossar) ──
   Lag im Seiten-<style>; dort erreicht es die Kirby-Seite nie. */
.gloss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; margin-top: 30px; }
.gl-item { background: var(--bg-mid); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 18px 20px; scroll-margin-top: 96px; }
/* ── Sprungziele sichtbar machen ────────────────────────────────────────────
   Die Suche schickt an drei Arten von Zielen: einen Glossarbegriff, einen
   Abschnitt mit Anker, oder eine Textstelle per #:~:text=. Beim dritten macht
   der Browser die Markierung selbst (::target-text). Die anderen beiden sahen
   aus wie ein ganz normaler Seitenaufruf.

   Erste Fassung war ein kurzes Aufleuchten. Janis hat nichts gesehen — und das
   ist auch bei perfekter Technik der Normalfall: die Animation läuft, während
   die Seite noch aufbaut und man noch gar nicht hinschaut. Eine Markierung, die
   BLEIBT, bis man weiterklickt, ist nicht nur robuster, sie ist auch richtiger:
   sie beantwortet die Frage „welcher von den 61 war gemeint?" noch nach zehn
   Sekunden. */

/* Die browsereigene Markierung der Textstelle auf unsere Akzentfarbe bringen,
   damit alle drei Fälle gleich aussehen. */
/* Nur background-color, nicht die Kurzform `background`: die Spezifikation
   lässt für ::target-text bloß eine Handvoll Eigenschaften zu, und die Kurzform
   gehört nicht dazu — sie wäre still ignoriert worden. */
::target-text { background-color: color-mix(in srgb, var(--sc, var(--primary)) 28%, transparent); color: inherit; }

.gl-item:target {
    border-color: var(--sc, var(--primary));
    background: color-mix(in srgb, var(--sc, var(--primary)) 14%, var(--bg-mid));
    box-shadow: inset 4px 0 0 var(--sc, var(--primary));
}
/* Abschnitte mit eigener Anker-ID (/ak/praevention#anlaufstellen). Nicht die
   ganze Fläche einfärben — das wären schnell 2000 Zeichen in Farbe. Markiert
   wird die Überschrift, genau wie es der Browser bei der Textstelle tut. */
section.sec:target { scroll-margin-top: 96px; }
section.sec:target .sec-title {
    /* inline-block, damit die Färbung den Text umschließt und nicht als Balken
       über die ganze Spaltenbreite läuft. Die Überschrift steht allein in ihrer
       Zeile, der Umbruch darunter bleibt also, wie er war. */
    display: inline-block;
    background: color-mix(in srgb, var(--sc, var(--primary)) 28%, transparent);
    border-radius: 6px; padding: 2px 10px; margin-left: -10px;
}
.gl-term { font-family: var(--font-heading); color: var(--text); font-size: 1.08rem; margin-bottom: 6px; }
.gl-abbr { color: var(--sc, var(--primary)); font-weight: 700; }
.gl-name { color: var(--text); }
.gl-abbr + .gl-name { color: var(--text-muted); font-family: var(--font-ui); font-size: .95rem; margin-left: 4px; }
.gl-erk { color: var(--text-sub); font-size: 1rem; line-height: 1.6; }

/* ── DOODLE-GALERIE (/doodles) ──
   Die Galerie nutzt seit 30.07.2026 dieselbe Darstellung wie die
   Wegzeichen-Legende (.wz-legend / .wz-item), damit beide Seiten gleich
   aussehen und der Doodle-Look sie rahmenlos zeichnet. Die eigenen
   Karten-Regeln (.dg-grid, .dg-card, .dg-box) sind deshalb entfallen,
   geblieben ist nur der Einleitungstext. */
.dg-note { color: var(--text-sub); font-size: 1rem; line-height: 1.7; max-width: 720px; }
.dg-note #dg-count { color: var(--text); }
.dg-note a { color: var(--sc, var(--primary)); }

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

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

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

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

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

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

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

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

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

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

/* ── NEWS FILTER ── */
.news-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
/* Schriftschnitt, Groesse und Hoehe kommen aus der gemeinsamen Bedienleiste
   weiter unten (--ctl-h). Vorher stand der Chip auf 700/.08em/Grossbuchstaben
   und war damit das einzige Bedienelement, das anders aussah als das
   Dropdown daneben — und „STUFEN-AKS" liest sich in Kapitälchen schlecht. */
.nf-chip {
    font-family: var(--font-ui); font-size: 1rem; font-weight: 600;
    letter-spacing: 0; text-transform: none;
    height: var(--ctl-h); padding: 0 16px; border-radius: 50px;
    white-space: nowrap; flex: 0 0 auto;
    border: 1px solid rgba(20,34,46,.22);
    background: transparent; color: var(--text-sub); cursor: pointer; transition: all .2s;
}
.nf-chip:hover { border-color: var(--sc, var(--primary)); color: var(--text); }
.nf-chip.active { background: var(--sc, var(--primary)); border-color: var(--sc, var(--primary)); color: #fff; }
/* Termine-Filter: jeder Chip in seiner Stufen-/AK-Farbe (--cc inline gesetzt; "Alle" ohne --cc bleibt neutral) */
.ev-toolbar .nf-chip[style*="--cc"] { color: var(--cc); border-color: color-mix(in srgb, var(--cc) 42%, transparent); }
.ev-toolbar .nf-chip[style*="--cc"]:hover { border-color: var(--cc); color: var(--cc); }
.ev-toolbar .nf-chip[style*="--cc"].active { background: color-mix(in srgb, var(--cc) 20%, transparent); border-color: var(--cc); color: var(--cc); }

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

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

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

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

/* ── TERMIN-SHARE-CARD (Popup) ── */
/* Die Termin-Karte scrollt als GANZES, nicht innen. Vorher hatte .ev-modal-card
   max-height plus overflow-y:auto, und daran hingen zwei Fehler zusammen:

   1. Der gezeichnete Rahmen (.ev-modal-card::after in doodles.css, absolut) lag
      damit im Koordinatensystem des Scroll-Inhalts. Er umschloss nur den
      sichtbaren Ausschnitt, und darunter lief der Text ohne Rahmen weiter.
   2. Die Toenung lag auf .ev-modal selbst. Auf iOS deckt eine fixe Box mit
      inset:0 nur den kleinen Viewport ab, also blieb oben unter der Dynamic
      Island und unten unter der schwebenden Adressleiste ein heller Streifen.

   Die Toenung liegt jetzt auf ::before und malt vertikal ueber den Rand hinaus.
   Sie traegt AUCH den backdrop-filter — der darf nicht auf .ev-modal bleiben:
   ein Filter macht das Element zum Bezugsrahmen fuer fixe Kinder, und genau
   das braucht das Schliessen-Kreuz weiter unten nicht. */
.ev-modal {
    position: fixed; inset: 0; z-index: 1300;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 20px;
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
}
.ev-modal::before {
    content: ''; position: fixed; inset: -20vh 0; pointer-events: none;
    background: color-mix(in srgb, #000 55%, transparent);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.ev-modal[hidden] { display: none; }
/* margin:auto zentriert, solange Platz da ist, und kappt nichts, wenn nicht.
   align-items:center wuerde bei hoher Karte den Anfang abschneiden. */
.ev-modal-card {
    position: relative; z-index: 1; width: 100%; max-width: 560px; margin: 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); } }
/* Fest im Schirm statt in der Karte: seit die Karte als Ganzes scrollt, waere
   das Kreuz bei einer langen Beschreibung nach oben aus dem Bild gewandert. */
.ev-modal-close {
    position: fixed; top: calc(14px + env(safe-area-inset-top)); right: 14px; z-index: 2;
    width: 40px; height: 40px;
    border-radius: 9px; border: 1px solid var(--card-border, rgba(0,0,0,.1));
    background: color-mix(in srgb, var(--surface, var(--bg-mid)) 88%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    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); }
/* Datum UNTER dem Titel (vorher Kicker-Zeile darueber, Janis 02.10.2026).
   Das padding-right haelt jetzt der Titel frei, er steht neben dem X. */
.ev-modal-title { font-family: var(--font-heading); font-size: 1.6rem; line-height: 1.2; color: var(--text); margin: 0 0 6px; padding-right: 44px; }
.ev-modal-date { font-family: var(--font-ui); font-weight: 700; font-size: 1rem; color: var(--sc, var(--primary)); margin-bottom: 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; }
/* Mehrere Absätze und Listen, seit der Import die Zeilenstruktur aus ScoutNet
   erhält. Vorher war die Beschreibung immer ein einziger Absatz, weshalb
   `margin: 0` genügte. */
.ev-modal-desc p { margin: 0 0 10px; }
.ev-modal-desc p:last-child { margin-bottom: 0; }
.ev-modal-desc ul { margin: 0 0 10px; padding-left: 20px; list-style: disc; }
.ev-modal-desc ul:last-child { margin-bottom: 0; }
.ev-modal-desc li { margin: 0 0 3px; }
.ev-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Anhänge am Termin ───────────────────────────────────────────────────────
   Ausschreibungen und Fotos, die im Panel an der ScoutNet-ID hängen (Tab
   „Anhänge" auf /termine). Sie stehen zwischen Beschreibung und Buttons, weil
   sie zum Termin gehören und nicht zu den Aktionen: das PDF ist Information,
   „Anmelden" ist der Schritt danach. */
.ev-anh { margin-bottom: 20px; }
.ev-anh-titel {
    font-family: var(--font-ui); font-weight: 700; font-size: .78rem;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-sub); margin-bottom: 10px;
}
.ev-anh-bilder { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.ev-anh-bilder:last-child { margin-bottom: 0; }
.ev-anh-bild {
    display: block; width: 118px; height: 88px; border-radius: var(--radius-sm, 10px);
    overflow: hidden; border: 1px solid var(--card-border, rgba(255,255,255,.12));
}
.ev-anh-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-anh-bild:hover img { transform: scale(1.04); }
.ev-anh-bild img { transition: transform .18s ease; }
@media (prefers-reduced-motion: reduce) { .ev-anh-bild img { transition: none; } }

.ev-anh-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ev-anh-liste a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--radius-sm, 10px);
    border: 1px solid var(--card-border, rgba(255,255,255,.12));
    color: var(--text); text-decoration: none; font-size: .95rem;
}
.ev-anh-liste a:hover { border-color: var(--primary); }
.ev-anh-liste i { color: var(--primary); flex: 0 0 auto; }
.ev-anh-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* Die Größe ist Nebeninformation: sie soll nicht mit dem Namen um Platz
   streiten, aber vor dem Klick dastehen — 8 MB am Handy sind eine Entscheidung. */
.ev-anh-groesse { flex: 0 0 auto; color: var(--text-sub); font-size: .82rem; font-variant-numeric: tabular-nums; }

/* Büroklammer auf der Terminzeile. Nur ein Hinweis, dass es etwas zu holen
   gibt — der Klick geht wie überall auf die Zeile. */
.ev-ov-anhang { display: inline-flex; align-items: center; color: var(--text-sub); font-size: .9rem; }

@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; }
}
/* Schmale Karten (Block-Option „Breite: schmal") bleeden NICHT. Der Bleed geht
   davon aus, dass die Karte in die .wrap-Polster wachsen darf; bei max-width:780px
   kann sie das nicht, der negative Margin schiebt sie dann nur nach links. Folge:
   links stand sie ueber, rechts blieb eine Luecke, und der Rahmen fluchtete mit
   nichts. Buendig auf der Textspalte ist fuer einen Infokasten ohnehin richtig.
   Zwei Klassen, damit die !important-Regeln der Media Queries oben nicht gewinnen. */
.bleed-card.bleed-card--flush {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 30px 34px !important;
}
/* Auf schmalen Schirmen frisst das Polster sonst ein Fuenftel der Zeilenbreite. */
@media (max-width: 760px) {
    .bleed-card.bleed-card--flush { padding: 24px 22px !important; }
}

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

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

/* ── STUFEN-DETAILSEITEN (nach außen) ── */
.stufe-grid2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; }
.stufe-lead { font-size: 1.15rem; color: var(--text); line-height: 1.7; margin-bottom: 18px; }
.stufe-body p { color: var(--text-sub); line-height: 1.75; font-size: 1rem; margin-bottom: 16px; }
.steckbrief { background: var(--bg-mid); border: 1px solid var(--card-border); border-left: 3px solid var(--sc); border-radius: var(--radius-lg); padding: 24px 28px; }
.steckbrief :is(h2, 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 :is(h3, 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 :is(h2, 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; }
/* Rechts oben sitzt im Doodle-Look die Lilie (doodles.css, 18px bei right:12px).
   „Jungpfadfinder“ lief bei 320, 375 und 768px in sie hinein, um bis zu 33px.
   Platz freihalten und das Wort trennen lassen, statt die Kachel aufzudruecken. */
.stufe-nav .nm { padding-right: 20px; hyphens: auto; overflow-wrap: break-word; }
.stufe-nav .ag { color: var(--text-muted); font-size: 1rem; }
/* Gefuellte Kachel: Fuellung und Schriftfarbe sind ueberschreibbar. Gelb ist
   eine HELLE Farbe — dort gehoert dunkle Schrift drauf, nicht weisse. Mit
   Weiss musste das Gelb so weit abgedunkelt werden, dass es braun wurde. */
.stufe-nav .is-current { background: var(--snc-fill, color-mix(in srgb, var(--snc) 65%, #16242e)); }
.stufe-nav .is-current .nm, .stufe-nav .is-current .ag { color: var(--snc-fg, #fff); text-shadow: var(--snc-shadow, 0 1px 4px rgba(0,0,0,.4)); }
/* Leitende: reines Gelb mit dunkler Schrift (8,79 Kontrast statt 5,62). */
.stufe-nav [data-stufe="leitende"] {
    --snc-fill: var(--stufe-leitende);
    --snc-fg: #14222E;
    --snc-shadow: none;
    --snc-line: color-mix(in srgb, var(--stufe-leitende) 90%, var(--text));
}
@media (max-width: 760px) {
    .stufe-grid2 { grid-template-columns: 1fr; gap: 26px; }
    .stufe-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* minmax: sonst drueckt das laengste Wort seine Spalte breiter */
}

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

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

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

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

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

.gcap {
    position: absolute; z-index: 2;
    left: 0; right: 0; margin: 0 auto;
    width: 100%; max-width: 1240px;
    padding: 0 60px;                 /* mehr Luft zum Bildrand (vorher 52 = Flucht zur .wrap) */
    bottom: clamp(62px, 8vh, 88px);  /* deutlich über den Slide-Punkten (gdots) */
    opacity: 0; transform: translateY(12px);
}
.gcap-text { max-width: 640px; }
.gslide.is-active .gcap { animation: gcapIn .8s .25s ease both; }
@keyframes gcapIn { to { opacity: 1; transform: translateY(0); } }
.gcap-jahr { font-size: .62em; white-space: nowrap; }
.gcap-jahr::before { content: '·'; content: '·' / ''; margin: 0 .45em; }   /* Trennpunkt nicht vorlesen */
.gcap-text {
    display: block; margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 3.1vw, 2.3rem); line-height: 1.12;
    color: var(--gal-fg); text-shadow: var(--gal-shadow);
}

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

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

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

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

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

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

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

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

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


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

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

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

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

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

/* ── Leaflet-Popups sind immer hell → Text fest dunkel (auch im Dunkelmodus) ── */
.leaflet-popup-content .stamm-name { color: #14222E; }
.leaflet-popup-content .stamm-ort { color: #566A7D; }
.leaflet-popup-content .stamm-nokontakt { color: #566A7D; }
.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; }
/* Dunkler Schleier (gilt im Dunkelmodus, der helle steht weiter unten).
   Oben .64 statt .28, Mitte .80 statt .55: auf hellen Fotos kamen Brotkrumen
   auf 2,4:1 und das hellblaue Titelwort auf 2,1:1. Gemessen an 18 Seiten in
   vier Breiten: 37 Befunde vorher, keiner danach (02.10.2026). */
.ph-img::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(to top, rgba(var(--overlay-rgb),var(--hero-wash-unten)) 0%, rgba(var(--overlay-rgb),var(--hero-wash-mitte)) 44%, rgba(var(--overlay-rgb),var(--hero-wash-oben)) 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 h1.sec-title { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.page-hero h1.sec-title em { color: #8FC0E4; }   /* hellblauer Akzent wie auf der Startseite */
.page-hero .sec-sub { color: rgba(255,255,255,.85); margin-bottom: 10px; max-width: 620px; }
.page-hero .btn-ghost {
    color: rgba(255,255,255,.85); border-bottom-color: rgba(255,255,255,.35);
}
.page-hero .btn-ghost:hover { color: #fff; border-bottom-color: #fff; }
.page-hero .btn-outline { border-color: rgba(255,255,255,.45); color: rgba(255,255,255,.92); }
.page-hero .btn-outline:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.8); color: #fff; }
/* ── Light-Mode: Bild-Heroes freundlich wie die Startseite (helle Transparenz +
      dunkle Schrift). Dark-Mode bleibt unveraendert (dunkles Overlay + helle Schrift).
      --sc ist auf getönten Seiten die Stufen-/AK-Farbe, sonst Fallback. ── */
/* Schleier oben .64 statt .34, Mitte .82 statt .72 (Janis, 02.10.2026). Mit dem
   duennen Schleier lagen Brotkrumen in allen Breiten unter AA (2,5 bis 4,4:1),
   am Handy auch Untertitel und das farbige Titelwort. Gemessen an den echten
   Fotos von 22 Seiten in vier Breiten: 168 Befunde vorher, einer danach. */
html:not([data-theme="dunkel"]) .ph-img::after {
    background:
      linear-gradient(to top, rgba(245,245,241,var(--hero-wash-unten)) 0%, rgba(245,245,241,var(--hero-wash-mitte)) 44%, rgba(245,245,241,var(--hero-wash-oben)) 100%),
      linear-gradient(105deg, rgba(245,245,241,.5) 0%, rgba(245,245,241,0) 52%);
}
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: color-mix(in srgb, var(--sc, var(--primary)) 85%, var(--text)); text-shadow: none; }   /* pur: Friedenslicht-Blau 2,81:1 auf Foto */
html:not([data-theme="dunkel"]) .page-hero .sec-sub { color: var(--text); }   /* --text-sub kam auf Foto nur auf 3,6 bis 4,4:1 */
html:not([data-theme="dunkel"]) .page-hero .btn-ghost { color: var(--text-sub); border-bottom-color: color-mix(in srgb, var(--text-sub) 40%, transparent); }
html:not([data-theme="dunkel"]) .page-hero .btn-ghost:hover { color: var(--text); border-bottom-color: var(--text); }
html:not([data-theme="dunkel"]) .page-hero .breadcrumbs li { color: var(--text); }   /* --text-sub: 2,5 bis 4,4:1 auf Foto */
html:not([data-theme="dunkel"]) .page-hero .breadcrumbs [aria-current="page"] { color: var(--text); }
html:not([data-theme="dunkel"]) .page-hero .breadcrumbs a:hover { color: var(--text); }
html:not([data-theme="dunkel"]) .page-hero .breadcrumbs { text-shadow: 0 0 8px rgba(255,255,255,.92), 0 1px 3px rgba(255,255,255,.72); }
html:not([data-theme="dunkel"]) .page-hero .btn-outline { border-color: color-mix(in srgb, var(--sc, var(--primary)) 45%, transparent); color: var(--sc, var(--primary)); }
html:not([data-theme="dunkel"]) .page-hero .btn-outline:hover { background: color-mix(in srgb, var(--sc, var(--primary)) 8%, transparent); border-color: var(--sc, var(--primary)); color: var(--sc, var(--primary)); }
/* Getönte Seiten: die bestehenden Eyebrow-/Titel-Regeln sind aufgehellt (fuer dunkles
   Foto) + !important. Im Light-Mode volle Stufenfarbe (--sc), sonst zu blass auf Creme. */
html:not([data-theme="dunkel"]) .tinted .page-hero h1.sec-title em { color: color-mix(in srgb, var(--sc) 85%, var(--text)) !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);
}
/* 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 h1.sec-title { color: var(--text) !important; text-shadow: none !important; }
html:not([data-theme="dunkel"]) .ak-hero h1.sec-title em { color: var(--sc) !important; filter: none !important; text-shadow: none !important; }
html:not([data-theme="dunkel"]) .ak-hero .breadcrumbs li { color: var(--text); }
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; }
/* Kleingedrucktes unter einer Splitcard (z. B. Spendenkonto beim Förderverein).
   Lag als Inline-Style im Snippet. Der Absatz-Fall stand mit margin:0 direkt an
   der Button-Reihe, und .dl-row bringt keinen Abstand nach unten mit — deshalb
   klebte die Kontonummer an den Buttons. Die Variante in .card-split-side braucht
   keinen eigenen Abstand, dort sorgt der flex-gap der Spalte dafür. */
.sc-note { font-size: 1rem; color: var(--text-muted); }
p.sc-note { margin: 18px 0 0; }
.card-split-side { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; align-items: flex-end; }
@media (max-width: 760px) {
    .card-split, .card-split.lead-left { grid-template-columns: 1fr; gap: 26px; }
    .card-split-side { align-items: flex-start; }
    /* 100x100-Zahlenblock (erstes Kind der lead-left-Karte) auf Mobile mittig */
    .card-split.lead-left > :first-child { text-align: center; }
}

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



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


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


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


/* AK-Detail-Hero: Eyebrow ebenfalls weiß (liegt auf dunklem Farb-Gradient) */


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


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

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


/* Mail-Button rechts neben Name/Rolle (platzsparend, alle Personen-Karten) */
.ak-mbody { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
.ak-mbody .ak-mname, .ak-mbody .ak-mrole { grid-column: 1; }
/* Lange Rollen („DIÖZESANVORSITZENDE“, gesperrte Versalien) waren breiter als
   ihre Spalte und liefen unter den Mail-Knopf, gemessen bei 768px. minmax(0,1fr)
   erlaubt der Spalte, schmaler als das laengste Wort zu werden; dann muss das
   Wort umbrechen duerfen. */
.ak-mbody .ak-mname, .ak-mbody .ak-mrole { min-width: 0; hyphens: auto; overflow-wrap: anywhere; }
.ak-mbody .card-mail { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }

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

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

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

/* Ausgeblendete Karten: Service-Filter (.srv-hidden) und AK-Filter
   (.ak-hidden). display:none nimmt sie auch aus der Vorlesereihenfolge. */
.srv-hidden, .ak-hidden { display: none; }

/* ── Karten/Listen-Umschalter + Karten-Popup (Service & Tools) ── */
.view-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    height: var(--ctl-h); padding: 0 16px; border-radius: 999px; cursor: pointer;
    font-family: var(--font-ui); font-weight: 600; font-size: 1rem; letter-spacing: 0;
    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;
}
/* Der Knopf darf beim Umschalten NICHT die Breite wechseln.

   Grund ist der gezeichnete Rahmen: der ist ein ::after mit
   filter:url(#chalkf), und Safari zeichnet einen SVG-Filter nach einer
   Groessenaenderung nicht zuverlaessig neu — der Rahmen blieb in der alten
   Groesse stehen, bis ein Scrollen ein Neuzeichnen erzwang. Genau so hat Janis
   es gemeldet: „kaputt, wenn man das erste Mal vor dem Scrollen drauf klickt".

   Deshalb stehen beide Beschriftungen uebereinander in derselben Rasterzelle.
   Die Breite ist damit immer die des laengeren Wortes, die Geometrie aendert
   sich nie, und es gibt nichts nachzuzeichnen. Das Icon bekommt eine feste
   Laufweite, damit der Wechsel von Liste auf Raster nicht doch verschiebt. */
.view-toggle > i { width: 1.05em; text-align: center; flex: 0 0 auto; }
.vt-label { display: grid; }
.vt-label .vt-w { grid-area: 1 / 1; visibility: hidden; white-space: nowrap; text-align: left; }
.vt-label .vt-w.is-on { visibility: visible; }
.view-toggle:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 48%, transparent); }
.view-toggle:focus-visible { outline: 2px solid var(--sc, var(--primary)); outline-offset: 2px; }

/* Listen-Ansicht: Karten werden zu kompakten, klickbaren Zeilen (Popup zeigt die volle Karte) */
.service-grid.as-list { grid-template-columns: 1fr !important; gap: 8px; }   /* Liste immer einspaltig, auch im breitesten Fenster */

/* Abfolge-Raster: drei Karten, die aufeinander aufbauen (erst Grenzverletzung,
   dann Uebergriff, dann Gewalt). Feste Reihe statt auto-fit, weil drei Karten im
   normalen Raster als 2+1 landen und die Steigerung damit unsichtbar wird.
   Der Pfeil sitzt in der Luecke: am Handy nach unten gedreht, ab Tablet nach
   rechts. Eigenes Element statt ::after, weil .srv-card overflow:hidden hat und
   ihr ::after im Doodle-Look den Kreide-Rahmen zeichnet. */
.service-grid--abfolge { grid-template-columns: 1fr; gap: 42px; }
.abfolge-schritt { position: relative; display: flex; }
.abfolge-schritt > .srv-card { flex: 1; }
.abfolge-pfeil {
    position: absolute; left: 50%; top: 100%;
    transform: translate(-50%, 10px) rotate(90deg);
    color: var(--text-sub); font-size: 1.3rem; line-height: 1; pointer-events: none;
}
@media (min-width: 900px) {
    .service-grid--abfolge { grid-template-columns: repeat(3, 1fr); gap: 34px; }
    .abfolge-pfeil { left: 100%; top: 50%; transform: translate(8px, -50%); }
}
.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 :is(h2, 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; }

/* Das Popup scrollt als GANZES, nicht innen. Vorher hatte .card-popup-inner
   max-height plus overflow-y:auto, und daran hingen zwei Fehler zusammen:

   1. Der gezeichnete Rahmen (.card-popup-inner::after, position:absolute) lag
      damit im Koordinatensystem des Scroll-Inhalts. Er umschloss nur den
      sichtbaren Ausschnitt und wanderte beim Scrollen weg, waehrend der Text
      darunter ohne Rahmen weiterlief.
   2. Der Backdrop lag absolut im Popup. Auf iOS deckt eine fixe Box mit inset:0
      nur den kleinen Viewport ab, also blieb oben unter der Dynamic Island und
      unten unter der schwebenden Adressleiste ein ungetoenter Streifen.

   Jetzt scrollt der Container, der Rahmen umschliesst den vollen Inhalt, und der
   Backdrop ist fix und malt vertikal ueber den Rand hinaus. */
.card-popup { position: fixed; inset: 0; z-index: 1500; display: none; }
.card-popup.is-on {
    display: flex; align-items: flex-start; justify-content: center; padding: 20px;
    overflow-y: auto; overscroll-behavior: contain;
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.card-popup-backdrop {
    position: fixed; inset: -20vh 0;   /* Ueberschuss oben und unten, s. o. */
    background: color-mix(in srgb, #000 62%, transparent);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
/* margin:auto zentriert, solange Platz da ist, und kappt nichts, wenn nicht.
   align-items:center wuerde bei hohem Inhalt den Anfang abschneiden. */
.card-popup-inner { position: relative; z-index: 1; width: min(440px, 100%); margin: 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); }
/* Das Kreuz sitzt fest im Schirm, nicht in der Karte. Seit das Popup als Ganzes
   scrollt, waere es bei einer langen Karte (etwa der Modulwoche mit ihrer
   Themenliste) nach oben aus dem Bild gewandert. Gleiche Stelle wie in der
   Lightbox, damit es sich ueberall gleich anfuehlt. */
.card-popup-close {
    position: fixed; top: calc(14px + env(safe-area-inset-top)); right: 14px; z-index: 2;
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: color-mix(in srgb, var(--bg-mid) 88%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: var(--text); font-size: 1.05rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.card-popup-close:hover, .card-popup-close:focus-visible { background: var(--bg-mid); }
.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; }

/* --primary wird für die globale Chrome auf das Markenblau zurückgesetzt, damit
   Bauteile ohne Tint-Bezug nicht an der Seitenfarbe hängen.

   --sc dagegen NUR noch im Footer. Navbar und Mobilmenü ziehen seit 30.07.2026
   bewusst die Akzentfarbe der Seite mit (sie erben --sc vom <body>), damit AK-
   und Stufenseiten durchgängig in ihrer Farbe sind: „DV Limburg" im Logo, die
   Aktiv-Markierung und der Kontakt-Button. Vorher stand hier ein Reset auf allen
   drei, mit der Begründung, die Aktiv-Markierung solle sich nicht in der
   AK-Farbe färben — genau das ist jetzt erwünscht. Der Footer bleibt neutral,
   er steht auf jeder Seite gleich und trägt das Markenblau.
   Kontrast ist dabei abgedeckt: themes.css definiert die ak-Farben im
   Dunkelmodus heller (z. B. --ak-jupfi #2F53A7 → #6E92E8). */
#hdr, .mobile-nav, #site-footer { --primary: #003056; }
#site-footer { --sc: var(--primary); }
html[data-theme="dunkel"] :is(#hdr, .mobile-nav, #site-footer) { --primary: #6FA8D2; }

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

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

/* Drei Phasen bis zum Woodbadge */
.weg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.weg-step {
    background: var(--bg-mid); border: 1px solid var(--card-border);
    border-radius: var(--radius-lg); padding: 26px 24px 24px;
}
.weg-nr {
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--sc, var(--primary)) 12%, transparent);
    /* Akzent leicht zur Textfarbe gezogen: pur kam er auf der eigenen Toenung
       nur auf 4,22:1 (Ausbildungslila). Im Dunkelmodus hellt dieselbe Mischung auf. */
    color: color-mix(in srgb, var(--sc, var(--primary)) 78%, var(--text)); font-family: var(--font-heading); font-size: 1.25rem;
    margin-bottom: 16px;
}
.weg-step :is(h2, h3) { font-family: var(--font-heading); font-size: 1.26rem; color: var(--text); margin-bottom: 8px; }
.weg-step p { color: var(--text-sub); font-size: 1rem; line-height: 1.62; }

/* Baustein-Gruppen (Farbe je Modul via --mc) */
.mod-gruppe { margin-bottom: 26px; }
.mod-gruppe:last-of-type { margin-bottom: 0; }
.mod-gruppe-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.mod-pill {
    font-family: var(--font-ui); font-weight: 700; font-size: .82rem;
    letter-spacing: .14em; text-transform: uppercase;
    background: var(--mc, var(--sc, var(--primary))); color: #fff;
    border-radius: 999px; padding: 5px 14px;
}
.mod-gruppe-head span:not(.mod-pill) { color: var(--text-sub); font-size: 1rem; }
.mod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 10px; align-items: start; }
.mod-card {
    background: var(--bg-mid); border: 1px solid var(--card-border);
    border-radius: 10px; overflow: hidden;
    transition: border-color .25s;
}
.mod-card.is-open { border-color: color-mix(in srgb, var(--mc, var(--sc, var(--primary))) 55%, transparent); }
.mod-head {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 13px 46px 13px 16px; background: none; border: 0; cursor: pointer;
    text-align: left; font: inherit; color: inherit; position: relative;
}
.mod-nr {
    flex-shrink: 0; min-width: 42px; height: 34px; padding: 0 7px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--mc, var(--sc, var(--primary))) 13%, transparent);
    /* Die Modulfarben schaffen 4,5:1 gegen Karte und Seite, aber nicht gegen
       ihre eigene Toenung hier (4,27 bis 4,46). Leicht zur Textfarbe gezogen. */
    color: color-mix(in srgb, var(--mc, var(--sc, var(--primary))) 78%, var(--text));
    font-family: var(--font-heading); font-size: 1rem; border-radius: 8px;
}
/* Titel, Etikett und Zeitangabe teilen sich eine eigene Flex-Ebene.
   min-width:0 ist hier das Entscheidende: ohne das kann ein Flex-Kind nicht
   unter seine breiteste unteilbare Einheit schrumpfen, und ein deutsches
   Kompositum ("Pfadfindertechniken") ist genau das. Die Zeile wurde dadurch
   breiter als ihr Kasten und schob sich unter den Pfeil. hyphens:auto trennt
   sauber nach Silben (das <html lang="de"> dafuer steht in default.php),
   overflow-wrap ist der Rueckfall fuer Woerter ohne Trennstelle. */
.mod-headtext {
    flex: 1; min-width: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
}
.mod-title {
    flex: 1 1 auto; min-width: 0;
    font-family: var(--font-ui); font-weight: 700; font-size: 1.02rem;
    color: var(--text); line-height: 1.35;
    hyphens: auto; overflow-wrap: anywhere;
}
.mod-meta { flex-shrink: 0; font-size: .88rem; color: var(--text-muted); white-space: nowrap; }
.mod-tag {
    flex-shrink: 0;
    font-family: var(--font-ui); font-size: .72rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--mc, var(--sc, var(--primary)));
    border: 1px solid color-mix(in srgb, var(--mc, var(--sc, var(--primary))) 45%, transparent);
    border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.mod-caret { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--mc, var(--sc, var(--primary))); font-size: .8rem; transition: transform .3s; }
.mod-card.is-open .mod-caret { transform: translateY(-50%) rotate(180deg); }
.mod-desc { display: none; padding: 0 16px 15px 72px; overflow: hidden; }
.mod-card.is-open .mod-desc { display: block; }
.mod-desc p { color: var(--text-sub); font-size: .98rem; line-height: 1.62; margin: 0; }
.mod-desc .int-link { display: inline-block; margin-top: 9px; }
@media (max-width: 760px) {
    .mod-desc { padding-left: 16px; }
    .mod-meta { display: none; }
}

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Legende (Erklär-Bereich): alle 12 Zeichen mit Namen ── */
.wz-legend {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.wz-item {
    margin: 0; padding: 20px 12px 16px; text-align: center;
    border-radius: 12px; background: var(--surface); border: 1px solid var(--card-border);
}
.wz-item-sign { display: flex; align-items: center; justify-content: center; height: 62px; margin-bottom: 10px; color: var(--sc, var(--primary)); }
.wz-item-sign .wz { width: 54px; height: 54px; }
.wz-item-sign .dood-svg { position: static; width: 54px; height: 54px; color: inherit; opacity: 1; }
.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; }

/* ══════════════════════════════════════════
   BEDIENLEISTEN: FILTER, SUCHE, ANSICHTSWECHSEL
   ──────────────────────────────────────────
   Eine Leiste für alle vier Stellen: Neuigkeiten, Service, Arbeitskreise,
   Termine. Vorher hatte jede ihre eigene Höhe, Schriftgröße und teils
   Großbuchstaben. Auf dem Handy brachen die Pillen in drei Zeilen um, bis der
   Ansichtswechsel allein darunter stand.

   Die Regel, die Janis vorgegeben hat: Die Chips stehen in EINER Zeile. Passen
   sie nicht, klappt js/filterleiste.js sie in ein Dropdown, und zwar in
   dasselbe, das die Neuigkeiten schon benutzen (js/doodle-select.js). Kein
   Umbruch, keine zweite Bauart.

   --ctl-h ist die gemeinsame Höhe. Wer ein neues Bedienelement dazubaut, nimmt
   sie, sonst geht das Nebeneinander wieder auseinander.
   ══════════════════════════════════════════ */
/* --ctl-h (44px) steht in css/tokens.css. */

.filterbar, .filterbar.news-filter, .filterbar.ev-toolbar {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: nowrap; margin-bottom: 24px;
}
/* nowrap plus overflow:hidden ist die Messgrundlage für filterleiste.js:
   scrollWidth > clientWidth heißt „passt nicht in die Zeile". */
.fb-chips { display: flex; gap: 8px; flex-wrap: nowrap; overflow: hidden; min-width: 0; }
.fb-drop { flex: 0 1 auto; min-width: 0; }
.fb-drop:empty { display: none; }

/* Kein Durchblitzen: Bis filterleiste.js entschieden hat, ob Chips oder
   Dropdown, bleibt die Leiste unsichtbar. `visibility` statt `display`, damit
   der Platz erhalten bleibt und nichts springt — und damit die Chips messbar
   bleiben, denn versteckt per display hätten sie keine Breite.

   Die Animation ist die Reißleine: Fällt das Skript aus, wird die Leiste nach
   400 ms trotzdem sichtbar, dann eben mit umbrechenden Chips. Eine dauerhaft
   unsichtbare Bedienleiste wäre der schlimmere Fehler.

   `html.js` setzt das Anti-Flash-Skript im Kopf. Ohne JavaScript greift die
   Regel also gar nicht erst. */
html.js .filterbar:not(.fb-ready) {
    visibility: hidden;
    animation: fb-reissleine 0s linear .4s forwards;
}
@keyframes fb-reissleine { to { visibility: visible; } }
.filterbar.fb-collapsed .fb-chips { display: none; }
.filterbar:not(.fb-collapsed) .fb-drop { display: none; }
.fb-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.fb-actions .view-toggle, .fb-actions .ev-view-toggle { margin-left: 0; }

/* Suchfeld. Höhe und Schrift wie alles andere in der Leiste, damit die
   Oberkanten stimmen — das war Janis' erste Meldung an den Neuigkeiten. */
.fb-search { position: relative; flex: 1 1 220px; min-width: 0; }
.fb-search > i {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); font-size: .9rem; pointer-events: none;
}
.fb-search > input {
    width: 100%; height: var(--ctl-h); padding: 0 16px 0 40px;
    border: 1px solid var(--card-border); border-radius: 999px;
    background: var(--bg-mid); color: var(--text);
    font-family: var(--font-ui); font-size: 1rem; font-weight: 400;
}
/* Das Dropdown der Neuigkeiten wird von js/doodle-select.js zu .ds-btn. Beide
   Zustände brauchen dieselbe Höhe, sonst springt die Zeile beim Laden. */
.filterbar select, .filterbar .ds-btn {
    height: var(--ctl-h); padding: 0 16px; border-radius: 999px;
    font-family: var(--font-ui); font-size: 1rem; font-weight: 600;
    border: 1px solid var(--card-border); background: var(--bg-mid); color: var(--text);
    cursor: pointer;
}
.filterbar .ds { display: inline-flex; }

/* ── Handy: Suche über die ganze Breite, Filter darunter zu gleichen Teilen ──
   Zwei Bedienelemente nebeneinander auf 360px sind je 170px breit, und darin
   steht kein „Alle Themen" mehr. Deshalb bekommt die Suche Zeile eins allein
   und die Filter teilen sich Zeile zwei. Nur mobil, am Desktop ist eine Zeile
   richtig. */
@media (max-width: 760px) {
    .filterbar, .filterbar.news-filter, .filterbar.ev-toolbar {
        display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    }
    /* Nur die Suche wird gesetzt, den Rest verteilt das Raster von selbst:
       Neuigkeiten bekommen Thema und Sortierung nebeneinander, Service und
       Termine den Filter links und den Ansichtswechsel rechts. */
    .fb-search { grid-column: 1 / -1; flex: none; }
    /* Der Umschalter gehört an den rechten Rand, nicht in die Mitte des
       Schirms. grid-column erzwingt die letzte Spalte unabhängig davon, was
       davor steht, width:max-content verhindert das Dehnen über die halbe
       Breite, und justify-content fängt den Rest ab. */
    .fb-actions {
        grid-column: 2 / -1; justify-self: end; justify-content: flex-end;
        width: max-content; max-width: 100%; margin-left: 0;
    }
    .fb-chips, .fb-drop, .fb-sel { min-width: 0; }
    .fb-drop > select, .fb-sel > select { width: 100%; }
    .filterbar .ds { display: flex; width: 100%; }
    .filterbar .ds-btn { width: 100%; justify-content: space-between; }
}

/* ══════════════════════════════════════════
   FLÄCHE ÜBER DER NAVBAR (iOS-Safari)
   ──────────────────────────────────────────
   Vorgeschichte: Erst hatten wir viewport-fit=cover und einen Streifen, in dem
   die Seite durchkam. Dann kam cover raus, in der Annahme, Safari färbe die
   Fläche selbst nach theme-color. Genau das tut das neue Safari-Design nicht
   mehr — es zeigt dort Seiteninhalt, egal was theme-color sagt. Drei Versuche
   sind daran gescheitert.

   Also der umgekehrte Weg: cover ist zurück (snippets/head.php), damit
   env(safe-area-inset-top) wieder einen Wert liefert und wir die Fläche selbst
   bemalen können. Der Kopf reicht durch sein padding-top schon hinein; hier
   kommt nur noch eine VOLL DECKENDE Lage darüber. Der Kopf selbst ist mit .97
   plus Weichzeichner absichtlich durchscheinend, und genau das war oben
   sichtbar.
   ══════════════════════════════════════════ */
/* Hier stand ein header::before, das die Safe-Area übermalen sollte. Es ist
   raus: absolut positionierte Kinder tastet Safari gar nicht ab, und die
   Kopfzeile deckt die Fläche durch ihr padding-top ohnehin selbst. Die
   eigentliche Ursache war das Korn-Overlay, siehe body::before ganz oben. */

/* ══════════════════════════════════════════
   HANDY: KARTEN OHNE RAHMEN WERDEN RANDBÜNDIG
   ──────────────────────────────────────────
   Im Doodle-Look haben genau zwei Kartenarten keinen gezeichneten Rahmen: die
   Neuigkeiten-Karten der Startseite (.news-card) und die Beitragsliste
   (.blog-post). Bei beiden steht das Bild randbündig, der Text darunter aber
   eingerückt — auf dem Handy sieht das nach einem Versehen aus, weil kein
   Rahmen die Einrückung erklärt.

   Also links und rechts auf 0. Oben bleibt Luft, sonst klebt das Datum am Bild.

   Gilt auf ALLEN Breiten, nicht nur mobil: Janis wollte es am Desktop
   probeweise genauso. Wenn es dort nicht überzeugt, kommt hier ein
   @media (max-width: 760px) darum und der Rest bleibt.
   ══════════════════════════════════════════ */
.news-body { padding: 16px 0 0; }
.bp-body { padding: 18px 0 0; }

/* Treffpunkt im Stammes-Steckbrief verlinkt auf Google Maps. Unterstrichen,
   damit erkennbar ist, dass es ein Link ist, und mit kleinem Aussen-Pfeil, weil
   das Ziel die Seite verlässt. */
.stamm-karte-link { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--sc, var(--primary)) 45%, transparent); }
.stamm-karte-link:hover { color: var(--sc, var(--primary)); text-decoration-color: currentColor; }
.stamm-karte-link i { font-size: .72em; opacity: .65; margin-left: 2px; }

/* ══════════════════════════════════════════
   SAFARI-26-TINT: die Fläche über der Navbar
   ──────────────────────────────────────────
   Safari 26 färbt die Fläche um die Statusleiste nicht mehr nach
   theme-color, sondern liest die background-color eines fixierten Elements am
   oberen Rand. Diese Fläche liegt AUSSERHALB des Layout-Viewports:
   env(safe-area-inset-top) ist auf dem Gerät 0 (gemessen), top:0 sitzt also
   schon unter der Statusleiste. Wir können dort nichts hinmalen — wir können
   Safari nur eine Farbe zum Abtasten hinlegen.

   AM GERÄT AUSGEMESSEN (iPhone mit Dynamic Island, iOS 26, Janis am 06.08.).
   Fünf Kandidaten, jeder in eigener Farbe, jeder nur in einer Eigenschaft
   verschieden:

     4 px hoch, deckend, sichtbar       färbt NICHT
     4 px hoch, visibility: hidden      färbt NICHT
     64 px hoch, deckend                färbt
     64 px hoch, opacity .97            färbt
     64 px hoch, backdrop-filter        färbt NICHT (fällt auf die Seitenfarbe zurück)

   DIE HÖHE ENTSCHEIDET. Die Dokumentation nennt „mindestens 3 Pixel hoch";
   für diese iOS-Version stimmt das nicht. Genau daran sind meine ersten
   Versuche gescheitert: das Element war 4 px hoch, also die nachweislich
   wirkungslose Variante. Zwei weitere Annahmen der Quelle gelten hier
   ebenfalls nicht: visibility:hidden wird NICHT abgetastet, und opacity unter
   1 disqualifiziert NICHT. backdrop-filter disqualifiziert.

   Ebenfalls belegt wirkungslos, alles selbst probiert: theme-color,
   viewport-fit=cover mit Safe-Area-Variablen, ein erzwungener Repaint per
   translateZ(0), die Hintergrundfarbe von body, und das Verschieben des
   Korn-Overlays (das trägt opacity .03 und war ohnehin nie Kandidat).

   WARUM NICHT EINFACH DIE KOPFZEILE: Sie erfüllt alle Bedingungen — 64 px
   hoch, volle Breite, top:0, deckend, ohne backdrop-filter (gemessen) — und
   wird trotzdem nicht abgetastet. Woran das liegt, ist offen; ein nackter div
   derselben Geometrie funktioniert (Variante C der Messreihe). Deshalb dieser
   div.

   56 px, nicht 64: klar über der wirkungslosen Grenze und unter der Höhe der
   Kopfzeile an jedem Breakpoint. Er liegt ohne z-index hinter der Kopfzeile
   (z-index 1000) und trägt dieselbe Farbe — unsichtbar, und welches der
   beiden Elemente Safari nimmt, ist damit gleichgültig.

   NICHT hinzufügen: backdrop-filter, filter, visibility, transition. Nicht
   verkleinern. Es waren sieben Anläufe.

   Quellen: github.com/andesco/safari-color-tinting (Regeln, teils überholt),
   1ar.io/updates/safari-26-liquid-glass-web/, jahir.dev/blog/safari-toolbar
   ══════════════════════════════════════════ */
.safari-tint {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 56px;
    background-color: rgb(var(--hbg));
    pointer-events: none;
}

/* ══════════════════════════════════════════
   KOPIERBLOCK: Textvorlagen zum Übernehmen
   ──────────────────────────────────────────
   Jeder ```-Codeblock im Fließtext wird von js/components.js zu einem Kasten
   mit Kopfzeile und Kopierknopf. Gebaut für die Unfallmeldung auf
   /service/versicherung: Dort steht eine Mailvorlage, die man kopiert und aus
   dem eigenen Mailprogramm schickt.

   Warum kein Formular: Eine Unfallmeldung enthält Gesundheitsdaten, also eine
   besondere Kategorie nach § 4 Nr. 2 KDG. Eine Vorlage wird nur angezeigt, die
   Daten entstehen erst im Mailprogramm und berühren unseren Server nie. Der
   Kasten muss deshalb auf den ersten Blick nach „zum Mitnehmen" aussehen, nicht
   nach Formular.
   ══════════════════════════════════════════ */
.kopierblock {
    margin: 24px 0;
    background: var(--bg-mid);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.kopierblock-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px 10px 16px;
    border-bottom: 1px solid var(--card-border);
    background: color-mix(in srgb, var(--text) 4%, transparent);
}
.kopierblock-titel {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-ui); font-size: .78rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--text-sub);
}
.kopierblock-titel i { color: var(--sc, var(--primary)); font-size: .9rem; }
.kopierblock pre { margin: 0; padding: 16px; overflow-x: auto; }
.kopierblock code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: .9rem; line-height: 1.7; color: var(--text);
    /* pre-wrap statt pre: am Handy musste man die Vorlage seitlich schieben,
       um sie zu lesen. Kopiert wird weiter der Originaltext. */
    white-space: pre-wrap; overflow-wrap: anywhere; background: none; padding: 0;
}
/* Der Knopf ist bewusst Outline: er verlässt die Seite nicht, und der gefüllte
   Knopf gehört auf dieser Seite dem Kontakt zum Diözesanbüro. */
.kopierblock-btn { flex: 0 0 auto; }

@media (max-width: 560px) {
    .kopierblock-kopf { flex-wrap: wrap; }
    .kopierblock-btn { width: 100%; justify-content: center; }
    .kopierblock code { font-size: .84rem; }
}

/* Gruppenüberschrift im Doodle-Dropdown (aus <optgroup label="…">).
   Nicht anklickbar, nur Gliederung. Deshalb kein Zeiger und kein Hover.

   Sie ersetzt die Standarddarstellung des Browsers, und genau daher kam der
   weiße Balken hinter „Arbeitskreise" im Dunkelmodus: Ein natives <optgroup>
   zeichnet der Browser selbst, und seine Farben lassen sich nicht zuverlässig
   überschreiben. */
.ds-gruppe {
    padding: 12px 14px 5px;
    font-family: var(--font-ui); font-size: .74rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-muted); cursor: default; user-select: none;
}
.ds-gruppe + .ds-opt, .ds-menu .ds-gruppe ~ .ds-opt { padding-left: 22px; }
.ds-opt.is-disabled { color: var(--text-muted); cursor: default; opacity: .6; }
.ds-opt.is-disabled:hover { background: none; }

/* Im Formular so breit wie die uebrigen Felder. Ausserhalb (Filterleisten,
   Neuigkeiten) bleibt .ds inline und richtet sich nach seinem Inhalt. */
.ff-box .ds { display: block; width: 100%; }
.ff-box .ds-btn { width: 100%; justify-content: space-between; }
.ff-box .ds-menu { width: 100%; }

/* ══════════════════════════════════════════
   METHODEN UND SPIELE
   ──────────────────────────────────────────
   Übersicht (.meth-liste) und Einzelseite (.meth-detail). Die Filterleiste
   kommt in Phase 3 und arbeitet client-seitig wie der Stammesfinder; bis
   dahin trägt die Liste sich selbst.

   .meth steht in beiden Karten-Sammellisten weiter oben (Hover-System und
   Doodle-Rahmen), deshalb hier nur, was die Karte eigenes hat.
   ══════════════════════════════════════════ */
.meth-liste {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.meth {
    background: var(--bg-mid); border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
}
.meth > a { display: block; padding: 24px 26px; text-decoration: none; color: inherit; }
.meth-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.meth-titel { font-size: 1.25rem; margin: 0; }
.meth-kurz { color: var(--text-sub); margin: 0 0 14px; line-height: 1.55; }
.meth-stufen { font-family: var(--font-ui); font-size: .82rem; color: var(--text-sub); margin: 12px 0 0; }

/* Marken: Art als Akzent, alles Messbare (Dauer, kontaktlos) still daneben.
   Sonst konkurrieren acht gleich laute Kästchen um dieselbe Aufmerksamkeit. */
.meth-marken { display: flex; flex-wrap: wrap; gap: 6px; }
.meth-marke {
    font-family: var(--font-ui); font-size: .75rem; line-height: 1;
    padding: 6px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}
.meth-marke--still { background: var(--bg-subtle); color: var(--text-sub); }

/* ── Entwurf: sichtbar für Angemeldete und auf der Testinstanz ──
   Muss auf den ersten Blick auffallen, sonst hält jemand einen ungelesenen
   Entwurf für veröffentlicht. Deshalb die CTA-Farbe, die sonst nur Notfall-
   und Hilfe-Kästen tragen. */
.meth-entwurf-chip {
    font-family: var(--font-ui); font-size: .7rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    padding: 4px 9px; border-radius: 999px;
    background: color-mix(in srgb, var(--cta) 15%, transparent); color: var(--cta-text);   /* --cta als Text: dunkel 2,29:1 */
}
.meth--entwurf { border-style: dashed; border-color: color-mix(in srgb, var(--cta) 45%, transparent); }
.doodle .meth--entwurf::after { border-color: color-mix(in srgb, var(--cta) 55%, transparent) !important; }
.meth-entwurf-band {
    background: color-mix(in srgb, var(--cta) 10%, var(--bg-mid));
    border-bottom: 1px solid color-mix(in srgb, var(--cta) 30%, transparent);
    padding: 12px 0; font-family: var(--font-ui); font-size: .9rem;
}
.meth-entwurf-band i { color: var(--cta-text); margin-right: 8px; }

/* ── Einzelseite ── */
.meth-detail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.meth-text > h2 { font-size: 1.35rem; margin: 32px 0 10px; }
.meth-text > h2:first-child { margin-top: 0; }
.meth-steckbrief dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 22px; }
.meth-steckbrief dt { font-family: var(--font-ui); font-size: .8rem; color: var(--text-sub); }
.meth-steckbrief dd { margin: 0; font-size: .92rem; }
.meth-quelle { font-size: .85rem; color: var(--text-sub); margin-top: 28px; }

/* „Worauf achten" ist der Absatz, den man beim Überfliegen finden können
   muss, deshalb abgesetzt statt als weitere Zwischenüberschrift. */
.meth-achtung {
    margin-top: 32px; padding: 20px 24px;
    background: var(--bg-subtle); border-radius: var(--radius-lg);
    border-left: 3px solid var(--highlight);
}
.meth-achtung h2 { font-size: 1.1rem; margin: 0 0 8px; }
.meth-achtung h2 i { color: var(--highlight); margin-right: 6px; }
.meth-achtung p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
    .meth-detail { grid-template-columns: 1fr; gap: 28px; }
}

/* ── Filterleiste der Methodensammlung ──────────────────────────────────────
   Am Desktop eine Seitenspalte links, am Handy hinter einem Knopf neben der
   Suche. Grund für beides ist derselbe: Die Leiste hat vier Gruppen und über
   zwanzig Chips. Über der Liste ausgebreitet schiebt sie am Desktop die
   Einträge unter die Falz und nimmt am Handy zwei Bildschirme weg, bevor der
   erste Eintrag kommt.

   Die Suche steht IMMER sichtbar darüber, auch am Handy. Sie ist der
   schnellste Weg, wenn jemand den Namen kennt, und gehört nicht hinter einen
   Aufklapper.

   Chips statt Aufklappmenüs: So sieht man auf einen Blick, wonach sich
   filtern lässt. Welche Achsen es gibt und warum nicht mehr, steht in
   docs/METHODEN-PLAN.md §5. */
.meth-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px 40px; align-items: start; }
.meth-suchzeile { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; }
.meth-filter { grid-column: 1; position: sticky; top: 90px; }
.meth-ergebnis { grid-column: 2; }
.meth-filter[hidden] { display: none; }

.meth-filter-suche { position: relative; flex: 1; max-width: 460px; }
.meth-filter-suche i {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); pointer-events: none;
}
.meth-filter-suche input {
    width: 100%; height: var(--ctl-h); padding: 0 16px 0 40px;
    font-family: var(--font-ui); font-size: .95rem;
    background: var(--bg-mid); color: var(--text);
    border: 1px solid var(--card-border); border-radius: var(--radius);
}
.meth-filter-suche input::-webkit-search-cancel-button { filter: grayscale(1); }

/* Der Aufklapp-Knopf gehört dem Handy. Am Desktop steht die Leiste offen. */
.meth-auf { display: none; flex-shrink: 0; }
.meth-auf-zahl {
    display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 4px;
    border-radius: 999px; background: var(--primary); color: #fff;
    font-size: .75rem; line-height: 1.5;
}

.meth-filter-gruppen { display: flex; flex-direction: column; gap: 20px; }
.meth-fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.meth-fs legend {
    font-family: var(--font-ui); font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-muted); padding: 0; margin-bottom: 8px;
}
.meth-fs > label { margin: 0 5px 5px 0; }

/* Der Haken ist unsichtbar, aber fokussierbar: Der Chip ist das Label, und
   :has() färbt ihn. Ein display:none am Input nähme ihm die Tastatur. */
.meth-chip { display: inline-block; cursor: pointer; }
.meth-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.meth-chip span {
    display: inline-block;
    font-family: var(--font-ui); font-size: .82rem; line-height: 1;
    padding: 8px 13px; border-radius: 999px;
    background: var(--bg-mid); border: 1px solid var(--card-border);
    color: var(--text-sub); transition: background .2s, color .2s, border-color .2s;
}
.meth-chip:hover span { border-color: var(--primary); color: var(--text); }
.meth-chip:has(input:checked) span {
    background: var(--primary); border-color: var(--primary); color: #fff;
}
.meth-chip:has(input:focus-visible) span { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Stufen-Chips in den Stufenfarben ──
   Erst trug nur ein kleiner Punkt die Farbe, der Chip selbst blieb grau. Das
   war zu zurückhaltend: Wer nach seiner Stufe filtert, sucht die Farbe, nicht
   den Text daneben (Janis, 31.08.). Jetzt trägt der ganze Chip sie.

   Zwei Farbfassungen je Stufe, und das ist kein Zierrat: --stufe-* ist die
   kräftige Verbandsfarbe und füllt den gewählten Chip, --ak-* ist ihre
   abgedunkelte Fassung für Text und Rahmen. Wölflingen-Orange käme als Text
   sonst auf 2,3:1 und Leitenden-Gelb auf 1,8:1. */
.meth-chip--stufe[data-stufe=biber]   { --sf: var(--stufe-biber); --sf-fg: var(--on-stufe-biber);    --sk: var(--ak-biber); }
.meth-chip--stufe[data-stufe=woe]     { --sf: var(--stufe-woe); --sf-fg: var(--on-stufe-woe);      --sk: var(--ak-woe); }
.meth-chip--stufe[data-stufe=jupfi]   { --sf: var(--stufe-jupfi); --sf-fg: var(--on-stufe-jupfi);    --sk: var(--ak-jupfi); }
.meth-chip--stufe[data-stufe=pfadi]   { --sf: var(--stufe-pfadi); --sf-fg: var(--on-stufe-pfadi);    --sk: var(--ak-pfadi); }
.meth-chip--stufe[data-stufe=rover]   { --sf: var(--stufe-rover); --sf-fg: var(--on-stufe-rover);    --sk: var(--ak-rover); }
.meth-chip--stufe[data-stufe=leitung] { --sf: var(--stufe-leitende); --sf-fg: var(--on-stufe-leitende); --sk: var(--ak-leitende); }

.meth-chip--stufe span {
    color: var(--sk); border-color: color-mix(in srgb, var(--sk) 45%, transparent);
    background: color-mix(in srgb, var(--sk) 8%, var(--bg-mid));
    font-weight: 600;
}
.meth-chip--stufe:hover span { border-color: var(--sk); background: color-mix(in srgb, var(--sk) 14%, var(--bg-mid)); }
.meth-chip--stufe:has(input:checked) span {
    background: var(--sf); border-color: var(--sf); color: var(--sf-fg, #fff);
}
/* Schrift auf der gefuellten Stufenflaeche: --on-stufe-* aus tokens.css, je nach
   Kontrast hell oder dunkel. Woelflingen-Orange und Leitenden-Gelb tragen keine
   weisse Schrift (2,97:1 und 1,84:1), Biber im Dunkelmodus auch nicht (2,43:1).
   Vorher stand fuer Leitung und Woe #1a1a1a von Hand, Biber blieb weiss. */

/* ── Icons in den Chips ──
   Dreizehn Arten untereinander sind dreizehn gleich aussehende Textpillen. Das
   Icon gibt jeder eine Form, die man beim Überfliegen wiedererkennt, ohne zu
   lesen. Es steht im span, nicht davor: So wandert es beim Umbruch mit. */
.meth-chip span i { width: 1em; margin-right: 7px; opacity: .75; font-size: .92em; }
.meth-chip:has(input:checked) span i { opacity: 1; }

.meth-zahlzeile { margin: 0 0 14px; font-family: var(--font-ui); font-size: .88rem; color: var(--text-sub); }
.meth-filter-fuss { margin: 18px 0 0; }
.meth-reset {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--font-ui); font-size: .85rem; color: var(--primary);
    text-decoration: underline; text-underline-offset: 3px;
}
.meth-liste--leer::after {
    content: 'Keine Methode passt auf alles zusammen. Nimm einen Filter weg.';
    grid-column: 1 / -1; padding: 34px 0;
    color: var(--text-sub); font-family: var(--font-ui);
}

/* Schmaler als 1100px trägt die Seitenspalte nicht mehr: Die Liste bekäme
   eine einzige Kartenspalte. Ab hier klappt die Leiste hinter den Knopf. */
@media (max-width: 1100px) {
    .meth-layout { grid-template-columns: 1fr; gap: 0; }
    .meth-filter, .meth-ergebnis { grid-column: 1; }
    .meth-auf { display: inline-flex; }
    .meth-filter { position: static; display: none; margin: 18px 0 6px; }
    .meth-filter.is-offen { display: block; }
    .meth-filter-gruppen { flex-direction: row; flex-wrap: wrap; gap: 16px 26px; }
}

/* Am Handy werden die Chips angetippt, nicht angeklickt. 33px erfüllen zwar
   das AA-Kriterium (24px), liegen aber unter den 44px, die als Trefferfläche
   empfohlen sind, und diese Leiste bedient jemand im Gruppenraum mit einer
   Hand. Das Suchfeld hat die Höhe über --ctl-h ohnehin. */
@media (max-width: 760px) {
    .meth-chip span { padding: 13px 16px; font-size: .88rem; }
    .meth-filter-gruppen { gap: 16px 20px; }
}

/* ══════════════════════════════════════════
   DRUCKANSICHT
   ──────────────────────────────────────────
   Anleitungen liest man auf dem Zeltplatz vom Papier, nicht vom Display.
   Der Ausdruck soll deshalb die Methode enthalten und sonst nichts: keine
   Navigation, keine Fußzeile, keine Filterleiste, keine Hintergrund-Doodles,
   keine Knöpfe, die auf Papier nichts tun.

   Zwei Dinge, die auf Papier anders funktionieren als am Bildschirm:
   die Adresse wird hinter Links ausgeschrieben (sonst zeigt ein Ausdruck
   „Juleica-Portal" ohne Ziel), und der Steckbrief wandert unter den Text
   statt daneben, weil eine 300px-Spalte auf A4 den Satzspiegel zerreißt.

   Gilt für jeden Ausdruck, ob über den Knopf oder über Strg+P.
   ══════════════════════════════════════════ */
@media print {
    /* Alles weg, was Bedienung ist und kein Inhalt */
    #site-header, #site-footer, .safari-tint, .dood-layer, .dood-divider,
    .meth-filter, .meth-suchzeile, .meth-aktionen, .meth-zahlzeile, .breadcrumbs,
    #consent-banner, .to-top, .marquee-bar { display: none !important; }

    /* Der Entwurfs-Hinweis bleibt, und zwar mit Absicht: Wer einen ungelesenen
       Entwurf ausdruckt und ins Lager mitnimmt, soll das auf dem Blatt sehen.
       Ohne ihn liegt ein Zettel im Materialkeller, der aussieht wie ein
       fertiger. Auf Papier ohne Farbfläche, aber mit Rahmen. */
    .meth-entwurf-band {
        background: none !important; border: 2px solid #000 !important;
        padding: 3mm !important; margin-bottom: 6mm; font-size: 10pt;
    }
    .meth-entwurf-band i { display: none; }

    /* Papier ist weiß und Tinte teuer: keine Flächen, keine Schatten, kein Korn */
    html, body { background: #fff !important; color: #000 !important; }
    body::before, body::after { display: none !important; }
    .sec, .sec-sm, .page-hero { padding: 0 !important; }
    .wrap { max-width: none !important; padding: 0 !important; }

    /* Steckbrief unter den Text statt daneben */
    .meth-detail { display: block !important; }
    .meth-steckbrief {
        margin-top: 18mm; border: 1px solid #999 !important;
        background: none !important; padding: 6mm !important;
        break-inside: avoid;
    }
    .meth-steckbrief::after { display: none !important; }
    .meth-steckbrief dl { grid-template-columns: auto 1fr; gap: 3px 10mm; }

    /* „Worauf achten" behält seinen Rahmen, verliert aber die Tönung */
    .meth-achtung {
        background: none !important; border: 1px solid #999 !important;
        border-left-width: 3px !important; break-inside: avoid;
    }
    .meth-achtung::after { display: none !important; }

    h1 { font-size: 22pt !important; margin: 0 0 3mm !important; }
    .meth-text h2 { font-size: 13pt !important; margin: 7mm 0 2mm !important; break-after: avoid; }
    .sec-sub { font-size: 11pt !important; color: #333 !important; }
    body { font-size: 10.5pt; line-height: 1.45; }

    /* Marken als Text, nicht als farbige Pillen */
    .meth-marke {
        background: none !important; color: #000 !important;
        border: 1px solid #999; padding: 1px 5px; font-size: 8pt;
    }

    /* Ein Ausdruck ohne Ziel ist eine Sackgasse: Adressen ausschreiben.
       Interne Links bekommen die volle Adresse, damit man sie abtippen kann. */
    .meth-text a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 8.5pt; color: #444; word-break: break-all; }

    /* Woher der Ausdruck stammt. Ohne das liegt ein Zettel im Materialkeller,
       von dem niemand weiß, wo die aktuelle Fassung steht. */
    main::after {
        content: 'dpsg-limburg.de/methoden';
        display: block; margin-top: 12mm; padding-top: 3mm;
        border-top: 1px solid #ccc; font-size: 8.5pt; color: #666;
    }

    @page { margin: 18mm 16mm; }
}

/* ── Knöpfe auf der Einzelseite ──
   Die beiden standen mit 0 Abstand übereinander und wirkten wie ein Block
   (von Janis gemeldet). Sie stehen jetzt nebeneinander, solange Platz ist,
   und untereinander mit Abstand, wenn nicht. */
.meth-aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.meth-aktionen .btn { flex: 1 1 auto; justify-content: center; }
.meth-aktionen--fuss {
    margin-top: 40px; padding-top: 26px;
    border-top: 1px solid var(--card-border);
}
.doodle .meth-aktionen--fuss {
    border-top: 1.5px dashed color-mix(in srgb, var(--dood-ink) 35%, transparent);
}
/* Am Handy steht der Steckbrief ohnehin unter dem Text. Zwei gleiche
   Knopfleisten im Abstand von wenigen Zentimetern sind dort Dopplung. */
@media (max-width: 900px) { .meth-aktionen--fuss { display: none; } }

/* ── Stufen als farbige Marken in Liste und Steckbrief ──
   Dieselben Farben wie im Filter, nur kleiner. In der Kartenliste standen die
   Stufen als graue Aufzählung mit Mittelpunkten, im Steckbrief als Textzeile.
   Beides las sich wie Kleingedrucktes, obwohl es die Angabe ist, nach der als
   Erstes gesucht wird. */
.meth-stufe-punkt {
    display: inline-block; margin: 0 4px 4px 0; padding: 3px 9px;
    border-radius: 999px; font-size: .75rem; font-weight: 600;
    font-family: var(--font-ui); line-height: 1.35;
    /* Zur Textfarbe gezogen wie .weg-nr: pur kamen Woe, Pfadi, Biber und
       Leitende auf der eigenen Toenung nur auf 4,2 bis 4,4:1. */
    color: color-mix(in srgb, var(--sk, var(--text-sub)) 78%, var(--text));
    background: color-mix(in srgb, var(--sk, var(--text-muted)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--sk, var(--text-muted)) 30%, transparent);
}
.meth-stufe-punkt[data-stufe=biber]   { --sk: var(--ak-biber); }
.meth-stufe-punkt[data-stufe=woe]     { --sk: var(--ak-woe); }
.meth-stufe-punkt[data-stufe=jupfi]   { --sk: var(--ak-jupfi); }
.meth-stufe-punkt[data-stufe=pfadi]   { --sk: var(--ak-pfadi); }
.meth-stufe-punkt[data-stufe=rover]   { --sk: var(--ak-rover); }
.meth-stufe-punkt[data-stufe=leitung] { --sk: var(--ak-leitende); }
.meth-stufen { display: flex; flex-wrap: wrap; margin-top: 12px; }

/* ── Steckbrief-Zeilen mit Icon ──
   Die Beschriftung führt jetzt ein Icon an. Es sitzt in der dt-Spalte und ist
   gedämpft: Es soll das Auge führen, nicht mit dem Wert konkurrieren. */
.meth-steckbrief dt { display: flex; align-items: baseline; gap: 7px; }
.meth-steckbrief dt i { width: 1em; font-size: .9em; color: var(--text-muted); flex-shrink: 0; }
.meth-sb-stufen { display: flex; flex-wrap: wrap; }

/* Die Art-Marken auf Karten und im Hero bekommen dasselbe Icon wie im Filter */
.meth-marke i { margin-right: 6px; opacity: .8; font-size: .92em; }

/* ══════════════════════════════════════════
   Touch-Ziele: mindestens 44px auf Touch-Geraeten
   ──────────────────────────────────────────
   Janis, 02.10.2026: nur bei pointer: coarse, damit der Desktop mit Maus
   kompakt bleibt. Gemessen vorher (375px): Kopf-Icons 36x36, Footer-Links
   24px hoch, Brotkrumen 23px, Social-Icons 16x24, Kontakt-Icons im
   Stammesfinder 18x19, Download-Knoepfe 38px, Biber-Filter 34px.
   Wo der Platz fehlt, waechst die Trefferflaeche unsichtbar (Brotkrumen),
   sonst das Element selbst.
   Bewusst NICHT dabei: Links im Fliesstext (WCAG 2.5.8 nimmt sie aus) und
   die Galerie-Punkte. Die sind eine Zweitbedienung neben den Pfeilen, und
   zehn 44er-Punkte passen nicht in 375px.
   ══════════════════════════════════════════ */
@media (pointer: coarse) {
    /* Kopf */
    .nav-actions-mobile .nav-search,
    .nav-actions-mobile .nav-toggle { width: 44px; height: 44px; }
    header .logo { min-height: 44px; }
    .mobile-nav .nav-sub { padding: 11px 0; }   /* Unterpunkte im Handy-Menue waren 36px */
    nav.nav-main .nav-link { display: inline-flex; align-items: center; min-height: 44px; }
    nav.nav-main .nav-search { width: 44px; height: 44px; }

    /* Brotkrumen: Zeile bleibt, die Trefferflaeche waechst */
    .breadcrumbs a, .breadcrumbs .bc-more button { position: relative; }
    .breadcrumbs a::before, .breadcrumbs .bc-more button::before {
        content: ''; position: absolute; left: -6px; right: -6px; top: 50%;
        height: 44px; transform: translateY(-50%);
    }
    .breadcrumbs .bc-more button::before { left: -13px; right: -13px; }

    /* Footer */
    .ft-col a { padding: 10px 0; margin-bottom: 0; }
    .ft-brand .logo { min-height: 44px; }
    .ft-social { gap: 4px; }
    .ft-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }

    /* Bedienelemente in Inhalten */
    .dl-btn { min-height: 44px; }
    .sf-kopf .nf-chip-klein { height: 44px; }
    .stamm-links { gap: 2px; margin-left: -13px; }
    .stamm-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -12px 0; }
    .stamm-more { min-height: 44px; }
    .card-mail { width: 44px; height: 44px; }
    .int-link, .ak-info-row a, .blog-sidebar-sub a { display: inline-flex; align-items: center; min-height: 44px; }
    .gnav, .art-carousel .acx-nav { width: 44px; height: 44px; }
    .ev-cal-nav-btn { width: 44px; height: 44px; }   /* Monatspfeile, erst in der Kalenderansicht sichtbar: die Pruefung hatte sie nie gesehen */
}