/* ── teil-06-rollbalken.css ── */
/* ══════════════════════════════════════════
   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(--filz-tinte, 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(--filz-tinte, 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(--filz-tinte, var(--primary)) 40%, transparent) transparent;
    }
}
.sf-leer { color: var(--text-secondary); 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(--border-card, rgba(var(--weiss-rgb), .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-secondary); 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(--border-card);
    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: 1rem; 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-secondary); 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; }


/* ── teil-07-inhaltsseiten.css ── */
/* ── 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(var(--tinte-rgb), .08);
}
.kl h2 { font-family: var(--font-heading); font-size: var(--font-size-h2); color: var(--text); margin-bottom: 14px; line-height: 1.1; }
.kl h2 em { color: var(--sc, var(--akzent)); font-style: italic; }
.kl > p { color: var(--text-secondary); line-height: 1.7; font-size: var(--font-size-reading); 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(var(--tinte-rgb), .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-secondary); 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(var(--tinte-rgb), .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-secondary); 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(var(--tinte-rgb), .07); border: 1px solid rgba(var(--tinte-rgb), .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(--border-card);
    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.125rem; color: var(--text); margin-bottom: 6px; }
.int-desc { color: var(--text-secondary); 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-secondary) 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-secondary); }
.ph-doodle figcaption small { display: block; margin-top: 3px; font-weight: 400; font-size: .9rem; opacity: .8; }
/* Als Band über dem Team (ak.php): flach statt 4:3, sonst stünde ein leerer
   Kasten so hoch wie ein Foto über den Namen. */
.ph-doodle.foto-ph { aspect-ratio: auto; min-height: 0; height: clamp(120px, 16vw, 170px); margin-bottom: 18px; flex-direction: row; }
/* Mit Bild: das Lagerfeuer als abgedunkelter Hintergrund hinter „Gruppenfoto
   folgt“, bis die AKs echte Gruppenfotos haben (Janis, 05.11.2026). Als
   Hintergrund und nicht als <img>, damit die Bildansicht es nicht als Foto
   des Arbeitskreises aufmacht. Etwas hoeher als der leere Platzhalter, sonst
   bliebe vom Bild nur ein Streifen Rauch. */
.ph-doodle.foto-ph.mit-bild {
    height: clamp(170px, 24vw, 280px); overflow: hidden;
    background:
        linear-gradient(rgba(var(--overlay-rgb), .5), rgba(var(--overlay-rgb), .5)),
        url('../img/fotos/lagerfeuer-kreis.webp') center 58% / cover no-repeat;
}
.ph-doodle.foto-ph.mit-bild i,
.ph-doodle.foto-ph.mit-bild figcaption { color: var(--on-photo); opacity: 1; }

/* ── 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(var(--schwarz-rgb), .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(--border-card); border-radius: var(--radius-lg); text-align: center; color: var(--text-muted); font-family: var(--font-ui); font-size: 1rem; 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(var(--weiss-rgb), .25);
    background: rgba(15,25,35,.55); color: var(--on-photo); 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(var(--weiss-rgb), .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/auswahl.js aus dem
      Designsystem, eingestellt in js/bausteine-start.js) ── */
.ds { position: relative; display: inline-block; font-family: var(--font-ui); }
/* !important, weil doodles.css mit `:root .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; min-height: var(--control-height); box-sizing: border-box; padding: 11px 16px; border: 1px solid var(--border-card); 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(--border-card); 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-secondary); font-size: 1rem; }
.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/auswahl.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(--border-card); }
.beitrag-teilen h2 { font-family: var(--font-heading); font-size: 1.375rem; color: var(--text); margin: 0 0 6px; }
.beitrag-teilen h2 em { font-style: italic; color: var(--sc, var(--akzent)); }
.beitrag-teilen > p { color: var(--text-secondary); font-size: 1rem; 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.8rem; color: var(--text); margin: 32px 0 12px; }
/* Zwischenüberschriften unter einem Abschnitt (11.11.2026). Vorher standen
   dort fett gesetzte Absätze, die für Screenreader keine Überschriften waren
   (WCAG 1.3.1): /datenschutz, /ak/praevention/hilfe. */
.article-prose h3 { font-family: var(--font-heading); font-size: 1.25rem; color: var(--text); margin: 26px 0 8px; }
.article-prose > h3:first-child { margin-top: 0; }
.article-prose p { color: var(--text-secondary); font-size: 1rem; line-height: 1.72; margin-bottom: 18px; }
.article-prose ul { color: var(--text-secondary); 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(var(--tinte-rgb), .12); border-bottom: 1px solid rgba(var(--tinte-rgb), .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(--border-card); 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: var(--on-fill);
    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(--border-card);
    border-radius: var(--radius); padding: 14px 18px;
    font-size: .9rem; color: var(--text-secondary); 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-secondary); }
.bp-title { font-family: var(--font-heading); font-size: 1.375rem; color: var(--text); margin-bottom: 10px; line-height: 1.2; }
.bp-excerpt { font-size: 1rem; color: var(--text-secondary); 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(--border-card); }
.blog-sidebar-sub :is(h2, h4) { font-family: var(--font-heading); font-size: 1.125rem; color: var(--text); margin-bottom: 10px; }
.blog-sidebar-sub p { font-size: 1rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 14px; }
.nl-form { display: flex; gap: 8px; }
.nl-input { flex: 1; padding: 11px 14px; background: rgba(var(--tinte-rgb), .08); border: 1px solid rgba(var(--tinte-rgb), .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.125rem; color: var(--text-muted); border-bottom: 1px solid var(--border-card); 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(--border-card) 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: 1rem; 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: .9rem; 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(--border-card); 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.125rem; 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: 1rem; margin-left: 4px; }
.gl-erk { color: var(--text-secondary); font-size: var(--font-size-reading); 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-secondary); font-size: var(--font-size-reading); 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(--border-card); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease; }
.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-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.125rem; color: var(--text); margin-bottom: 4px; }
.mat-card p { color: var(--text-secondary); font-size: 1rem; 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; }
/* Block statt flex (04.11.2026): Mit flex wurde ein fettes „AK Prävention:“ am
   Anfang eines Punkts zur eigenen schmalen Spalte und brach in zwei Zeilen um,
   der Rest stand als zweite Spalte daneben. Die Nummer sitzt jetzt absolut links. */
.article-prose ol li { counter-increment: li; display: block; position: relative; padding-left: 38px; color: var(--text-secondary); font-size: 1rem; line-height: 1.6; }
.article-prose ol li::before {
    position: absolute; left: 0; top: 0;
    content: counter(li); flex: none; width: 26px; height: 26px; border-radius: 50%;
    background: var(--sc, var(--primary)); color: var(--on-accent); display: grid; place-items: center;
    font-family: var(--font-heading); font-size: .85rem; font-weight: 700;
}
/* ── Kreis mittig zur ersten Zeile (Janis, 12.11.2026, Juleica-Schritte) ──
   Mit top: 0 saß der 26px-Kreis oben bündig, die Zeile ist aber höher
   (Zeilenhöhe 1.6, mit Absätzen im Punkt 1.72, jeweils auf die Lesegröße
   --font-size-reading, die in main .sec für p und li gilt). Die Mitte des
   Kreises lag so 1–2px über der Schrift. Jetzt halbe Zeilenhöhe minus halber
   Kreis, gerechnet auf dieselbe Variable, damit es mit jeder Schriftgröße passt. */
.article-prose ol li::before { top: calc(var(--font-size-reading, 1.125rem) * .8 - 13px); }
.article-prose ol li:has(> p:first-child)::before { top: calc(var(--font-size-reading, 1.125rem) * .86 - 13px); }
/* ── Ende Kreis mittig ── */

/* 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.125rem; color: var(--text); margin-bottom: 6px; }
.give-p { color: var(--text-secondary); 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(var(--tinte-rgb), .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(var(--tinte-rgb), .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-secondary); 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: .9rem; 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-secondary); font-size: .9rem; line-height: 1.6; margin: 0 0 16px; }
.f-hinweis { color: var(--text-secondary); font-size: .9rem; line-height: 1.6; margin: 0 0 18px; }
.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; }

/* Laden und Fehler (Designsystem, Laden): ein Satz, der sagt, was passiert.
   Beim Laden füllt sich daneben die „Warten“-Batterie, Strich für Strich, ohne
   bekannten Fortschritt in einer Schleife. Beim Fehler steht das Wegzeichen
   „Hindernis“ in --cta-text davor. Bewegung nur über Deckkraft; auf Touch und
   bei reduzierter Bewegung steht sie still, der Satz trägt die Nachricht. */
.laden { display: flex; align-items: center; gap: 12px; padding: 18px 0; }
.laden-satz { margin: 0; max-width: 52ch; color: var(--text-secondary); }
.laden--fehler .laden-satz { color: var(--text); }
.laden--fehler .wz { width: 36px; height: 36px; color: var(--cta-text); }
.laden + .btn { margin-bottom: 18px; }
.batterie { flex: none; width: 72px; height: 44px; overflow: visible; color: var(--filz-tinte); }
.batterie .strich { opacity: .15; }
.batterie.laeuft .strich { animation: batterie-fuellen 2.4s steps(1, end) infinite; }
.batterie.laeuft .strich:nth-child(2) { animation-delay: .35s; }
.batterie.laeuft .strich:nth-child(3) { animation-delay: .7s; }
.batterie.laeuft .strich:nth-child(4) { animation-delay: 1.05s; }
.batterie.laeuft .strich:nth-child(5) { animation-delay: 1.4s; }
@keyframes batterie-fuellen { 0% { opacity: .15; } 1% { opacity: 1; } 75% { opacity: 1; } 76%, 100% { opacity: .15; } }
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
    .batterie.laeuft .strich { animation: none; }
    .batterie.laeuft .strich:nth-child(-n+3) { opacity: 1; }
}
.ev-none { font-weight: 700; color: var(--sc, var(--primary)); font-size: 1rem; 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-secondary); 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: 1rem; 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; }


/* ── teil-08-termine.css ── */
/* ── 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 (--control-height). 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(--control-height); padding: 0 16px; border-radius: 50px;
    white-space: nowrap; flex: 0 0 auto;
    border: 1px solid rgba(var(--tinte-rgb), .22);
    background: transparent; color: var(--text-secondary); 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: var(--on-accent); }
/* 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(--control-height); height: var(--control-height); border-radius: 12px;
    background: transparent; border: 1px solid rgba(var(--tinte-rgb), .22);
    color: var(--text-secondary); 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: var(--on-accent); }
.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(--bg-mid); border: 1px solid var(--border-card, rgba(var(--schwarz-rgb), .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.375rem; color: var(--text); }
.ev-cal-nav-btn { background: none; border: 1px solid var(--border-card, rgba(var(--schwarz-rgb), .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(--border-card, rgba(var(--schwarz-rgb), .14)); background: none; color: var(--text-secondary); 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-secondary); 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-leitende); }
.ev-bar.chip-white  { background: var(--chip-neutral); }
/* 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(--border-card, rgba(var(--schwarz-rgb), .08)); padding-top: 18px; }
.ev-cal-sec-title { font-family: var(--font-ui); font-weight: 700; font-size: .8rem; 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.125rem; color: var(--text); margin-bottom: 5px; }
.ev-cal-empty { color: var(--text-muted); font-size: 1rem; 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: Zeile rutscht leicht nach rechts, der Titel wechselt die Farbe. Die
   Ausnahme von „nichts schiebt sich“ ist gewollt (Janis, 05.11.2026). */
.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 verschiebt sich leicht, Titel in der Seitenfarbe, 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:hover { transform: translateX(6px); }
.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::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.125rem; 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-secondary); 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; }
/* ── Ausbildungstermine aller Diözesen (/termine/ausbildung) ──
   Dasselbe Zeilen-Markup wie die Terminlisten, aber mit vielen Marken je
   Termin („1a 1b 1d 2b 2d“). Titel und Kontext dürfen deshalb umbrechen,
   statt abgeschnitten zu werden, und am Handy rutschen die Marken unter den
   Titel. Jede Zeile öffnet die Termin-Karte (js/termin-popup.js). */
.ausb-row .ev-ov-name, .ausb-row .ev-ov-ctx { white-space: normal; }
.ausb-row .ev-ov-tags { max-width: 45%; }
.chip-baustein { background: transparent; color: var(--text-secondary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-secondary) 45%, transparent); letter-spacing: .04em; text-transform: none; }
.chip-eigener { background: var(--chip-leitende-surface); color: var(--chip-leitende); }
.ausb-quelle { margin-top: 26px; font-size: .9rem; color: var(--text-secondary); }
.ausb-quelle a { color: var(--sc, var(--primary)); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 560px) {
    .ausb-row { flex-wrap: wrap; row-gap: 8px; }
    .ausb-row .ev-ov-tags { max-width: none; width: 100%; margin-left: 50px; justify-content: flex-start; }
}
/* Die Terminlisten blenden Chips am Handy aus (Stufenfarbe reicht dort nicht
   für den Platz). Hier SIND die Marken der Inhalt: welche Bausteine ein Kurs
   abdeckt. Deshalb bleiben sie, unter dem Titel. */
@media (max-width: 760px) { .ev-ov-row.ausb-row .chip { display: inline-block; } }
/* Suche und Filter darüber (js/ausbildung.js). Ohne JavaScript tun sie nichts,
   also stehen sie dann gar nicht erst da. */
html:not(.js) .ausb-filter { display: none; }
.ausb-filter { margin-bottom: 30px; }
.ausb-filter .filterbar { margin-bottom: 14px; }
.ausb-such .fb-search { flex: 1 1 260px; }
/* „Dir fehlt ein Baustein?“: kleine Umschalter, die umbrechen dürfen. Es sind
   bis zu 15, und anders als die Arten will man mehrere zugleich wählen. */
.ausb-bausteine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 16px; }
/* Die Frage steht über den Chips, sonst rutscht neben der Seitenleiste der
   letzte Baustein allein in eine zweite Zeile */
.ausb-b-titel { width: 100%; font-family: var(--font-ui); font-size: 1rem; font-weight: 600; color: var(--text-secondary); }
/* Die Umschalter sind Filter-Chips (.nf-chip) wie die Arten darüber, damit
   sie den gezeichneten Rahmen aus doodles.css bekommen. Nur kleiner, weil es
   bis zu 15 sind. Gewählt heißt .active, wie bei jedem Chip. */
.nf-chip.ausb-b { height: 34px; min-width: 42px; padding: 0 12px; font-size: 1rem; font-weight: 700; }
.ausb-zahl { display: flex; align-items: center; gap: 14px; margin: 0; font-family: var(--font-ui); font-size: 1rem; color: var(--text-secondary); }
.ausb-reset { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--primary); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ausb-reset[hidden] { display: none; }
.ausb-liste .ist-aus { display: none !important; }
/* Gewählte Bausteine in den Zeilen: getönt und kräftig, die übrigen treten
   zurück. Der Doodle-Look nimmt Chips sonst jede Füllung (doodles.css), daher
   das !important. */
:root .chip-baustein.treffer { background: color-mix(in srgb, var(--primary) 18%, transparent) !important; color: var(--text); font-weight: 700; }
.ausb-liste.b-aktiv .chip-baustein:not(.treffer) { opacity: .45; }
.ausb-leer { text-align: left; }
.ausb-leer[hidden] { display: none; }
.ausb-leer p { margin: 0 0 14px; }
.ausb-leer p i { margin-right: 8px; }
@media (max-width: 760px) {
    /* Eingeklappt ist die Art das einzige Element ihrer Zeile */
    .ausb-arten .fb-drop { grid-column: 1 / -1; }
}
/* 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(--bg-mid); border: 1px solid var(--border-card, rgba(var(--schwarz-rgb), .1));
    border-radius: 16px; padding: 30px 30px 26px; box-shadow: 0 24px 60px rgba(var(--shadow-rgb), .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(--border-card, rgba(var(--schwarz-rgb), .1));
    background: color-mix(in srgb, 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.8rem; 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-secondary); font-size: 1rem; }
.ev-modal-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ev-modal-desc { color: var(--text-secondary); 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; }
/* Die zwei Kalender-Wege stehen wie eigene Knöpfe in der Reihe */
.ev-kal-wahl { display: contents; }
.ev-kal-wahl[hidden], .ev-modal-actions .btn[hidden] { display: none; }

/* ── 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: .8rem;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-secondary); 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(--border-card, rgba(var(--weiss-rgb), .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(--border-card, rgba(var(--weiss-rgb), .12));
    color: var(--text); text-decoration: none; font-size: 1rem;
}
.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-secondary); font-size: .9rem; 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-secondary); font-size: .9rem; }

@media (prefers-reduced-motion: reduce) { .ev-modal, .ev-modal-card { animation: none; } }

/* Am Handy dieselben Angaben als Schublade von unten (js/schublade.js aus dem
   Designsystem, css/bausteine.css). Lage, Bewegung, Griff und Schleier kommen
   von dort; hier nur, was der Inhalt der Karte braucht. Das X steht im
   Dialog statt fest im Schirm: Die Schublade scrollt in sich, nicht die Seite. */
.ev-schublade { background: var(--bg-mid); }
.ev-schublade .ev-modal-close { position: absolute; top: 8px; right: 8px; }
.ev-schublade .ev-modal-title { font-size: 1.5rem; }


/* ── teil-09-footer-responsive.css ── */
/* ── 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; }
}
/* Schmal und mittig ausgerichtet (Instagram-Kasten auf der Startseite, Janis
   08.11.2026): der Kasten steht dann auch mittig in der Spalte, sonst klebt
   zentrierter Text in einem links stehenden Kasten. */
.bleed-card.bleed-card--flush.bleed-card--mitte {
    margin-left: auto !important;
    margin-right: auto !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;
}
/* Die Wasserzeichen-Lilie hinter dem Logo ist am 05.11.2026 entfallen
   (Janis): eine Deko-Ebene weniger. --ft-lilie bleibt im Designsystem. */
.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: .9rem; 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(--ziel, var(--sc-seite, var(--link-hover))); }
/* Link zur aktuellen Seite bzw. zum Bereich (snippets/footer.php), Farbe wie
   der aktive Punkt in der Navigation */
.ft-col a.aktiv { color: var(--sc-aktiv, var(--cta-text)); font-weight: 700; }   /* --sc-aktiv vom <body>: der Fuss setzt --sc auf Blau */
.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(--sc-seite, 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; }
/* Die Einleitung steht so groß wie der übrige Lesetext, nur dunkler. Vorher
   drückte `.stufe-body p` sie auf 16 px, während der Rest 18 px hatte (Janis,
   07.11.2026: „ein Textblock hat immer eine andere Schriftgröße“). */
.stufe-body p { color: var(--text-secondary); line-height: 1.75; font-size: var(--font-size-reading, 1.125rem); margin-bottom: 16px; }
.stufe-body .stufe-lead { margin-bottom: 18px; }   /* Farbe wie der übrige Lesetext: dunkler bzw. im Dunkeln weiß fiel er heraus (Janis, 12.11.2026) */
.steckbrief { background: var(--bg-mid); border: 1px solid var(--border-card); 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.125rem; 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(--border-card); 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.125rem; color: var(--text); margin-bottom: 7px; }
.stufe-feat p { color: var(--text-secondary); font-size: 1rem; line-height: 1.6; }
/* Ohne Hintergrund wie die übrigen Kästen, nur der Filzstift-Rahmen (Janis, 11.11.2026) */
.stufe-note { background: transparent; border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: 28px 30px; }
.stufe-note :is(h2, h3) { font-family: var(--font-heading); font-size: 1.375rem; color: var(--text); margin-bottom: 10px; }
.stufe-note p { color: var(--text-secondary); 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(--border-card); border-top: 3px solid var(--snc, var(--border-card)); 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.125rem; }
/* 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(var(--schwarz-rgb), .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 ~1450px — erst kompakter, dann Burger.
   Bis 04.11.2026 reichten 1380px; seit Prävention und Ausbildung ebenfalls
   Aufklappmenüs haben (zwei Pfeile mehr), stieß die Navigation zwischen 1380
   und 1440px ans Logo (gemessen: 0px Abstand). */
@media (max-width: 1480px) and (min-width: 1251px) {
    header { padding: 20px 30px; padding-top: calc(20px + env(safe-area-inset-top)); }
    nav a { font-size: .9rem; padding: 8px 9px; letter-spacing: .06em; }
    .nav-cta { padding: 8px 15px !important; margin-left: 6px; }
    .nav-search { width: 35px; height: 35px; }
    .nav-main .nav-search:not(.js-mode-toggle) { margin-left: 15px; }
    .logo-text { font-size: 1rem; letter-spacing: .07em; }
}
/* Darunter passt auch die kompakte Navigation nicht mehr → Burger-Menü.
   1250 statt 1200px: zwischen 1200 und 1240px stieß die kompakte Navigation
   mit den Pfeilen von Prävention und Ausbildung ans Logo (gemessen 4px). */
@media (max-width: 1250px) {
    .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 { grid-template-columns: 1fr; }
    .ak-tasks { columns: 1; }
    .wrap { padding: 0 24px; }
    .sec, .sec-sm { padding: 60px 0 48px; }
    /* Nur oben und unten: die Kurzform „112px 0 26px“ nahm .wrap den Seitenrand,
       der Seitenkopf klebte zwischen 561 und 960px am Fensterrand (Janis, 04.11.2026). */
    .pg-header { padding-top: 112px; padding-bottom: 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; }
}

/* ── MELDUNGEN (js/meldung.js aus dem Designsystem, css/bausteine.css) ──
   Aussehen kommt aus bausteine.css. Hier nur die Ebene: Der Stapel muss über
   der Bilder-Lightbox (3000) liegen, die „Bildlink kopiert“ meldet. Liegt ein
   modaler <dialog> offen, wandert er hinein (js/bausteine-start.js). */
.bs-stapel { z-index: 9999; }


/* ── teil-10-karussell-stufen.css ── */
/* ── 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);
    /* Oben gerundet, parallel zum weißen Innenrahmen (14px eingerückt, Radius
       --dood-radius): außen also beides zusammen (Janis, 06.11.2026). */
    border-radius: calc(var(--filz-radius, 14px) + 14px) calc(var(--filz-radius, 14px) + 14px) 0 0;
    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);
}
/* Ohne Bildunterschrift fällt der Schleier weg, das Foto soll man sehen. Es
   bleibt ein schmales Band an der Unterkante, damit die Punkte auf jedem Bild
   lesbar sind. --gal-scrim folgt dem Modus (tokens.css). */
.gslide.ohne-text::after {
    background: linear-gradient(to top, rgba(var(--gal-scrim), .6) 0%, rgba(var(--gal-scrim), 0) 16%);
}
/* Galerie und Footer verschmelzen: Trennlinie dazwischen weg */
.impr + #site-footer footer { border-top: none; }

/* Unterschriften im Galeriebild (.gcap) sind raus: kein Text auf Fotos
   (Janis, 11.11.2026). */

.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: var(--on-accent); }
.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; }
    /* 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); }
}
/* 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(--border-card);
    border-bottom: 3px solid var(--sc, var(--border-card));
    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: var(--abzug); box-shadow: 0 0 0 1px var(--border-card);
}
.stufe-mini :is(h2, h3) { font-family: var(--font-heading); font-size: 1.375rem; 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-secondary)); margin: -4px 0 8px;
}
.stufe-mini p { color: var(--text-secondary); font-size: 1rem; line-height: 1.62; margin-bottom: 18px; }
/* Lilie in der Stufenfarbe (blocks/stufenmini.php), Link-Hinweis unten bündig
   wie in den AK-Karten */
.stufe-mini-zeichen {
    display: block; width: 48px; height: 48px; margin-bottom: 14px;
    background-color: var(--sc, var(--primary)); transform-origin: left center;
    -webkit-mask: url('/img/logo/lilie-filz.svg') left center/contain no-repeat; mask: url('/img/logo/lilie-filz.svg') left center/contain no-repeat;
}
a.stufe-mini { display: flex; flex-direction: column; }
.stufe-mini .qc-link { margin-top: auto; align-self: flex-start; color: var(--primary); }   /* wie in den AK-Karten: blau, beim Hover die Stufenfarbe */

/* 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(--border-card);
    border-radius: 0; overflow: hidden;
}
.faq:first-child { border-top: 1px solid var(--border-card); }
.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.125rem; color: var(--text);
    transition: color .2s;
}
.faq summary:hover, .faq[open] summary { color: var(--sc, var(--primary)); }
/* Dunkel nimmt die offene Frage das hellere Blau: Das DPSG-Blau für dunklen
   Grund stand zu nah am Fließtext, die gewählte Frage hob sich kaum ab
   (Janis, 07.11.2026). */
html[data-theme="dunkel"] :is(.faq summary:hover, .faq[open] summary) { color: var(--sc, var(--secondary)); }
.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-secondary); 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; }
/* Mit nur einem Foto steckt das Bild in einem <figure> (ak.php, Block „Bilder“).
   Ohne eigene Hoehe richtete der sich nach dem Seitenverhaeltnis des Bildes, und
   am Handy stand ein 150px-Foto in einem 220px-Rahmen (Janis, 05.11.2026). */
.foto-band > figure { margin: 0; height: 100%; }
.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: .9rem; 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: 1rem; }
.stamm-fakten dd { color: var(--text); font-size: 1rem; 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: .9rem; 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: var(--abzug); box-shadow: 0 0 0 1px var(--border-card);
}
.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: var(--abzug); box-shadow: 0 0 0 1px var(--border-card);
}
.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); }
/* 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(--border-card); border-radius: 12px;
    box-shadow: 0 16px 40px rgba(var(--shadow-rgb), .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;
    /* Gleiche Schrift wie die Navbar selbst (.9rem, .06em), vorher eine Stufe
       größer (Janis, 11.11.2026). Der Abstand bleibt, damit man gut trifft. */
    font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-secondary); transition: background .15s, color .15s;
}
.nav-drop-menu a:hover, .nav-drop-menu a.active { background: color-mix(in srgb, var(--ziel, var(--sc, var(--primary))) 9%, transparent); color: var(--text); }
.nav-drop-menu a.active:not(:hover) { background: color-mix(in srgb, var(--sc, var(--primary)) 9%, transparent); }
.nav-drop-menu a::after { display: none; }
/* Unterpunkte im Mobilmenü */
.mobile-nav .nav-sub { font-size: .9rem; 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: var(--on-fill);
}
.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(var(--weiss-rgb), .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(var(--tinte-rgb), .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(var(--shadow-rgb), .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: var(--abzug); box-shadow: 0 0 0 5px var(--abzug), 0 10px 22px rgba(var(--shadow-rgb), .25);
}
@media (max-width: 760px) {
    .band-mascot { top: -30px; height: 86px; }
    .band-mascot.is-sticker { width: 86px; height: 86px; }
}





/* ── teil-11-seitenkopf-karten.css ── */
/* ── 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(400px, 62vh, 640px);
    display: flex; align-items: flex-end;
}
.ph-img { position: absolute; inset: 0; overflow: hidden; }
.ph-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ── Schleier: ein Verlauf von unten, sonst nichts (Janis, 04.11.2026) ──
   Im Kopf stehen nur noch Brotkrumen und Titel, die Einleitung steht darunter
   (snippets/page-hero.php). Hinter der Schrift deckt der Schleier so stark wie
   seit dem 02.10.2026 gemessen (--hero-wash-unten bis -mitte, damals: auf
   hellen Fotos Brotkrumen bei 2,4:1 und das Titelwort bei 2,1:1, danach keine
   Befunde mehr). Wie hoch die Schrift reicht, misst page-hero.php und setzt
   --titel-oben (Schrift plus 40px Luft); ohne Messung gelten 55 %.

   Darüber läuft er über 220px in einer S-Kurve aus: sanft am Anfang und am
   Ende, damit nirgends eine Kante steht (Janis, 10.11.2026: vorher 260px mit
   steilem Abfall direkt über der Schrift, dann kurz 120px, das sah wie eine
   Kante aus). Hinter der Schrift deckt er so stark wie gemessen.
   Ein linearer Auslauf zeichnet an Anfang und Ende sichtbare Kanten, das
   Auge liest dort einen Rand. Oben bleibt das Foto frei.

   Davor lagen hier zwei Verläufe übereinander, einer nach oben und einer
   nach rechts. Das gab eine schräge Nebelwolke über dem Bild. */
.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)) var(--titel-oben, 55%),
            rgba(var(--overlay-rgb),calc(var(--hero-wash-mitte) * 0.985)) calc(var(--titel-oben, 55%) + 16px),
            rgba(var(--overlay-rgb),calc(var(--hero-wash-mitte) * 0.945)) calc(var(--titel-oben, 55%) + 31px),
            rgba(var(--overlay-rgb),calc(var(--hero-wash-mitte) * 0.882)) calc(var(--titel-oben, 55%) + 47px),
            rgba(var(--overlay-rgb),calc(var(--hero-wash-mitte) * 0.802)) calc(var(--titel-oben, 55%) + 63px),
            rgba(var(--overlay-rgb),calc(var(--hero-wash-mitte) * 0.708)) calc(var(--titel-oben, 55%) + 79px),
            rgba(var(--overlay-rgb),calc(var(--hero-wash-mitte) * 0.606)) calc(var(--titel-oben, 55%) + 94px),
            rgba(var(--overlay-rgb),calc(var(--hero-wash-mitte) * 0.500)) calc(var(--titel-oben, 55%) + 110px),
            rgba(var(--overlay-rgb),calc(var(--hero-wash-mitte) * 0.394)) calc(var(--titel-oben, 55%) + 126px),
            rgba(var(--overlay-rgb),calc(var(--hero-wash-mitte) * 0.292)) calc(var(--titel-oben, 55%) + 141px),
            rgba(var(--overlay-rgb),calc(var(--hero-wash-mitte) * 0.198)) calc(var(--titel-oben, 55%) + 157px),
            rgba(var(--overlay-rgb),calc(var(--hero-wash-mitte) * 0.118)) calc(var(--titel-oben, 55%) + 173px),
            rgba(var(--overlay-rgb),calc(var(--hero-wash-mitte) * 0.055)) calc(var(--titel-oben, 55%) + 189px),
            rgba(var(--overlay-rgb),calc(var(--hero-wash-mitte) * 0.015)) calc(var(--titel-oben, 55%) + 204px),
            rgba(var(--overlay-rgb),0) calc(var(--titel-oben, 55%) + 220px));
}
.page-hero .wrap { position: relative; z-index: 2; width: 100%; padding-top: 128px; padding-bottom: 36px; }
/* Eyebrows AUF FOTOS/dunklen Flächen: weiß (Rot/Stufenfarbe wäre zu kontrastarm) */
.page-hero h1.sec-title { color: var(--on-photo); text-shadow: 0 2px 24px rgba(var(--schwarz-rgb), .35); }
.page-hero h1.sec-title em { color: #8FC0E4; }   /* hellblauer Akzent wie auf der Startseite */
.page-hero .btn-outline { border-color: rgba(var(--weiss-rgb), .45); color: rgba(var(--weiss-rgb), .92); }
.page-hero .btn-outline:hover { background: rgba(var(--weiss-rgb), .14); border-color: rgba(var(--weiss-rgb), .8); color: var(--on-photo); }
/* ── 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. ── */
/* Hell derselbe Verlauf in Creme. Die Stärken hinter der Schrift sind die vom
   02.10.2026: mit dünnerem Schleier lagen Brotkrumen unter AA (2,5 bis 4,4:1),
   gemessen an den Fotos von 22 Seiten in vier Breiten. */
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)) var(--titel-oben, 55%),
            rgba(245,245,241,calc(var(--hero-wash-mitte) * 0.985)) calc(var(--titel-oben, 55%) + 16px),
            rgba(245,245,241,calc(var(--hero-wash-mitte) * 0.945)) calc(var(--titel-oben, 55%) + 31px),
            rgba(245,245,241,calc(var(--hero-wash-mitte) * 0.882)) calc(var(--titel-oben, 55%) + 47px),
            rgba(245,245,241,calc(var(--hero-wash-mitte) * 0.802)) calc(var(--titel-oben, 55%) + 63px),
            rgba(245,245,241,calc(var(--hero-wash-mitte) * 0.708)) calc(var(--titel-oben, 55%) + 79px),
            rgba(245,245,241,calc(var(--hero-wash-mitte) * 0.606)) calc(var(--titel-oben, 55%) + 94px),
            rgba(245,245,241,calc(var(--hero-wash-mitte) * 0.500)) calc(var(--titel-oben, 55%) + 110px),
            rgba(245,245,241,calc(var(--hero-wash-mitte) * 0.394)) calc(var(--titel-oben, 55%) + 126px),
            rgba(245,245,241,calc(var(--hero-wash-mitte) * 0.292)) calc(var(--titel-oben, 55%) + 141px),
            rgba(245,245,241,calc(var(--hero-wash-mitte) * 0.198)) calc(var(--titel-oben, 55%) + 157px),
            rgba(245,245,241,calc(var(--hero-wash-mitte) * 0.118)) calc(var(--titel-oben, 55%) + 173px),
            rgba(245,245,241,calc(var(--hero-wash-mitte) * 0.055)) calc(var(--titel-oben, 55%) + 189px),
            rgba(245,245,241,calc(var(--hero-wash-mitte) * 0.015)) calc(var(--titel-oben, 55%) + 204px),
            rgba(var(--papier-rgb), 0) calc(var(--titel-oben, 55%) + 220px));
}
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(--akzent)) 85%, var(--text)); text-shadow: none; }   /* pur: Friedenslicht-Blau 2,81:1 auf Foto */
html:not([data-theme="dunkel"]) .page-hero .breadcrumbs li { color: var(--text); }   /* --text-secondary: 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(var(--weiss-rgb), .92), 0 1px 3px rgba(var(--weiss-rgb), .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(var(--shadow-rgb), .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(var(--shadow-rgb), .35)) drop-shadow(0 0 13px rgba(var(--weiss-rgb), .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: var(--abzug); box-shadow: 0 0 0 5px var(--abzug), 0 10px 22px rgba(var(--shadow-rgb), .3);
}
@media (max-width: 760px) {
    .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; }
}
/* Stufenseiten: Maskottchen mittig über der Steckbrief-Spalte (Janis, 06.11.2026).
   Die Spalte ist 1/2,6 der Inhaltsbreite abzüglich 40px Abstand (.stufe-grid2),
   die Mitte rechnet sich deshalb ohne JavaScript aus Seitenbreite, 1240px-Wrap
   und dessen Polster. Damit bei keiner Breite Text unter die Grafik läuft,
   enden Titel und Einleitung an der linken Spalte, wie der Inhalt darunter.
   Unter 761px liegen die Spalten untereinander, dort gilt die Handy-Regel oben. */
/* Dieselbe Stelle für Zeichen auf allen Kopfbildern, auch Aufarbeitung und
   Friedenslicht (Janis, 10.11.2026). Titel und Einleitung enden dann überall
   vor dem Zeichen, nicht nur auf Stufenseiten, damit nie Text darunter läuft. */
@media (min-width: 761px) {
    .page-hero { --ph-pad: 52px; --ph-inhalt: calc(min(100%, 1240px) - 2 * var(--ph-pad)); }
    .page-hero .ph-mascot {
        right: calc((100% - min(100%, 1240px)) / 2 + var(--ph-pad) + (var(--ph-inhalt) - 40px) / 5.2);
        transform: translateX(50%);
    }
    .page-hero:has(.ph-mascot) h1.sec-title { max-width: calc((var(--ph-inhalt) - 40px) * 1.6 / 2.6); }
    .page-hero:has(.ph-mascot) ~ .hero-einleitung .sec-sub { max-width: min(720px, calc((min(100vw, 1240px) - 2 * 52px - 40px) * 1.6 / 2.6)); }
}
@media (min-width: 761px) and (max-width: 960px) {
    .page-hero { --ph-pad: 24px; }
    .page-hero:has(.ph-mascot) ~ .hero-einleitung .sec-sub { max-width: calc((100vw - 2 * 24px - 40px) * 1.6 / 2.6); }
}
/* AK-Seiten: Zeichen als runder Aufnäher auf der Hero-Kante, mittig über der
   rechten Spalte (.ak-intro-grid: 1fr 280px, Abstand 48px), wie das
   Maskottchen der Stufenseiten. Papierfarbener Grund, damit es auf Foto und
   Papier gleich steht; Zeichen in der AK-Farbe. Der Titel endet an der linken
   Spalte. Unter 961px liegen die Spalten untereinander: dann rechts am Rand,
   und der Titel hält Abstand. */
.ak-zeichen {
    --ak-pad: 52px; --ak-z: clamp(88px, 8vw, 116px);
    position: absolute; z-index: 4; bottom: calc(var(--ak-z) / -2.4);
    right: calc((100% - min(100%, 1240px)) / 2 + var(--ak-pad) + 140px); transform: translateX(50%);
    width: var(--ak-z); height: var(--ak-z); border-radius: 50%;
    display: grid; place-items: center;
    background: var(--bg); color: var(--sc, var(--primary));
    box-shadow: 0 0 0 5px var(--bg), 0 10px 22px rgba(var(--shadow-rgb), .3);
    pointer-events: none;
}
.ak-zeichen i { font-size: calc(var(--ak-z) * .44); line-height: 1; }
.ak-zeichen-lilie {
    width: 56%; height: 56%; background-color: var(--sc, var(--primary));
    -webkit-mask: url('/img/logo/lilie-filz.svg') center/contain no-repeat; mask: url('/img/logo/lilie-filz.svg') center/contain no-repeat;
}
@media (min-width: 961px) {
    .ak-hero:has(.ak-zeichen) h1.sec-title { max-width: calc(min(100vw, 1240px) - 2 * 52px - 280px - 48px); }
}
@media (max-width: 960px) {
    .ak-zeichen { --ak-pad: 24px; --ak-z: 80px; right: var(--ak-pad); transform: none; }
    .ak-hero:has(.ak-zeichen) h1.sec-title { max-width: calc(100% - 80px - 16px); }
}
/* 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); bottom: -34px; }   /* Stelle wie alle Zeichen, siehe .page-hero .ph-mascot */
@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 Seiten im Dunkeln: Die Akzentfarbe (--sc) steht voll im Titel und
   braucht hinter sich mehr Deckung, .93 statt der Mitte. Getestet gegen
   reines Weiß als schlimmsten Fall. */
html[data-theme="dunkel"] .tinted .ph-img::after {
    background: linear-gradient(to top,
            rgba(var(--overlay-rgb),.96) 0,
            rgba(var(--overlay-rgb),.93) var(--titel-oben, 55%),
            rgba(var(--overlay-rgb),calc(.93 * 0.985)) calc(var(--titel-oben, 55%) + 16px),
            rgba(var(--overlay-rgb),calc(.93 * 0.945)) calc(var(--titel-oben, 55%) + 31px),
            rgba(var(--overlay-rgb),calc(.93 * 0.882)) calc(var(--titel-oben, 55%) + 47px),
            rgba(var(--overlay-rgb),calc(.93 * 0.802)) calc(var(--titel-oben, 55%) + 63px),
            rgba(var(--overlay-rgb),calc(.93 * 0.708)) calc(var(--titel-oben, 55%) + 79px),
            rgba(var(--overlay-rgb),calc(.93 * 0.606)) calc(var(--titel-oben, 55%) + 94px),
            rgba(var(--overlay-rgb),calc(.93 * 0.500)) calc(var(--titel-oben, 55%) + 110px),
            rgba(var(--overlay-rgb),calc(.93 * 0.394)) calc(var(--titel-oben, 55%) + 126px),
            rgba(var(--overlay-rgb),calc(.93 * 0.292)) calc(var(--titel-oben, 55%) + 141px),
            rgba(var(--overlay-rgb),calc(.93 * 0.198)) calc(var(--titel-oben, 55%) + 157px),
            rgba(var(--overlay-rgb),calc(.93 * 0.118)) calc(var(--titel-oben, 55%) + 173px),
            rgba(var(--overlay-rgb),calc(.93 * 0.055)) calc(var(--titel-oben, 55%) + 189px),
            rgba(var(--overlay-rgb),calc(.93 * 0.015)) calc(var(--titel-oben, 55%) + 204px),
            rgba(var(--overlay-rgb),0) calc(var(--titel-oben, 55%) + 220px));
}

/* Die Einleitung unter dem Foto: Schrift wie jeder Vorspann (.sec-sub), nur
   breiter. Größer gesetzt stach sie aus allen anderen heraus (Janis,
   04.11.2026). Nach oben 24px, sie gehört zum Kopf. Unten dieselben 54px, die
   der Kopf vorher als Abstand mitbrachte: der erste Abschnitt rechnet damit und
   hat oben kein eigenes Polster. Ohne Einleitung hält der Kopf den Abstand
   selbst. */
.hero-einleitung { padding-top: 24px; padding-bottom: 54px; }
.hero-einleitung .sec-sub { max-width: 720px; margin-bottom: 0; }
.page-hero:not(:has(~ .hero-einleitung)) { margin-bottom: 54px; }
/* Köpfe ohne Foto (Methoden, einzelne Methode) behalten ihre alte Höhe, dort
   gibt es kein Bild, das Platz bräuchte */
.page-hero:not(:has(> .ph-img)) { min-height: clamp(340px, 48vh, 500px); }
@media (max-width: 760px) {
    .page-hero:not(:has(> .ph-img)) { min-height: 300px; }
    .page-hero:not(:has(~ .hero-einleitung)) { margin-bottom: 40px; }
}

/* 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 */
/* Dunkelmodus: Überlagerung im Standard-Dunkelblau wie auf allen Seiten (vorher
   in der AK-Farbe getönt, Janis 11.11.2026). Die reine AK-Farbe ist für dunkle
   Töne zu schwach, halb ins Weiß gemischt bleibt sie erkennbar. */
html[data-theme="dunkel"] .ak-hero h1.sec-title em { color: color-mix(in srgb, var(--sc) 50%, var(--on-photo)); }

/* ── 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(var(--papier-rgb), .95) 0%, rgba(var(--papier-rgb), .72) 44%, rgba(var(--papier-rgb), .34) 100%),
      linear-gradient(135deg, color-mix(in srgb, var(--sc) 20%, rgba(var(--papier-rgb), .55)) 0%, rgba(var(--papier-rgb), 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(var(--weiss-rgb), .92), 0 1px 3px rgba(var(--weiss-rgb), .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.375rem; }
    .ev-meta { gap: 8px 14px; font-size: 1rem; }
}
/* 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; }
    /* flex: none, sonst wird aus den 130 px Breite der Desktop-Fassung in der
       Spalte eine Höhe: zwischen Datum und Titel klafften 130 px (Janis,
       07.11.2026: „riesige Terminkarte“). */
    .ev-cal-ev-day { flex: none; min-width: 0; font-size: .88rem; white-space: normal; }
    .ev-cal-ev-name { margin-bottom: 4px; }
}



/* 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 { text-decoration: none; }


/* ── PERSONEN-KARTEN: Initialen-Platzhalter bis echte Fotos da sind ── */
/* Platzhalter genauso quadratisch, sonst stehen Namen in einer Reihe aus
   Foto- und Platzhalter-Karten auf unterschiedlicher Höhe. */
.ak-mimg-ph {
    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: .9rem; 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: 1rem;
    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: var(--on-accent); 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(var(--tinte-rgb), .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; }
/* Oben neben dem Namen, nicht mittig: Mit zweizeiligem Namen oder einer
   DV-Funktion als dritter Zeile rutschte der Knopf sonst von Karte zu Karte
   in eine andere Höhe (Janis, 15.11.2026). */
.ak-mbody .card-mail { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; align-self: start; }


/* ── teil-12-karten-hover-collagen.css ── */
/* ══════════════════════════════════════════
   KARTEN-HOVER-SYSTEM (zentral)
   ──────────────────────────────────────────
   Bewegung nur, wo man etwas tun kann (Janis, 05.11.2026):
   • LINKKARTEN (<a>, [onclick], Stammeskarte mit Knopf): Eckverlauf, Titel
     und „Mehr“-Link in der Akzentfarbe, der Pfeil rückt 5 px. Icons wachsen
     um 8 %, Fotos und das Datum in Terminkarten zoomen. Die Karte selbst
     steht still, nichts wackelt, kein Balken.
   • ALLE ANDEREN Karten reagieren gar nicht. Was darin klickbar ist (Knöpfe,
     Links), reagiert für sich.
   Akzent = Farbe der Karte (--akc Arbeitskreis / --sc Stufe / --mc Modul),
   sonst DPSG-Blau.
   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: 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(a, [onclick], .stamm, .ak-dl):is(.qc, .sidebar-box, .weg-step, .ak-member-cta, .srv-card, .int-card, .ak-card, .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; }

/* Titel und „Mehr“-Link in der Akzentfarbe, der Pfeil rückt */
:is(.qc-title, .bp-title, .news-title, .stamm-name) { transition: color .25s; }
:is(.qc-link, .int-link, .stamm-more) i { display: inline-block; transition: transform .25s ease; }
:is(a, [onclick], .stamm, .ak-dl):is(.qc, .sidebar-box, .weg-step, .ak-member-cta, .srv-card, .int-card, .ak-card, .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-title, .bp-title, .news-title, .stamm-name, h2, h3, h4, .qc-link, .int-link, .stamm-more) {
    color: var(--akc, var(--sc, var(--primary)));
}
:is(a, [onclick], .stamm):hover :is(.qc-link, .int-link, .stamm-more) i { transform: translateX(5px); }

/* Icons wachsen, das Datum in Terminkarten zoomt wie ein Foto (der Rahmen
   der Kachel bleibt stehen) */
:is(.qc-icon, .srv-icon, .int-icon, .ak-dl-ico, .stufe-mini-logo, .stufe-mini-zeichen, .ak-card-icon) { transition: transform .3s ease; }
.ak-card-icon { transform-origin: left center; }   /* steht links bündig, wächst nach rechts */
:is(a, [onclick], .stamm, .ak-dl):is(.qc, .srv-card, .int-card, .ak-card, .ak-dl, .vs-card, .stufe-mini, .stufen-card, .mod-card):hover
    :is(.qc-icon, .srv-icon, .int-icon, .ak-dl-ico, .stufe-mini-logo, .stufe-mini-zeichen, .ak-card-icon) { animation: none; transform: scale(1.08); }
/* Stufenkarten: Titel und Link-Hinweis in der Textfassung der Stufenfarbe
   (--sk), wie die Altersangabe. Die Flächenfarbe (--sc) bleibt der Lilie: als
   Schrift kam Wölflings-Orange auf 2,7:1, Leitenden-Gold auf 1,7:1. */
:is(a, [onclick], .stamm).stufe-mini:hover :is(h2, h3, .qc-link) { color: var(--sk, var(--sc, var(--primary))); }
.bp-cal-day, .bp-cal-mon { transition: transform .4s ease; }
a:is(.news-card, .blog-post):hover :is(.bp-cal-day, .bp-cal-mon) { transform: scale(1.06); }

/* 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 (js/ansicht.js) ── */
.view-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    height: var(--control-height); 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-secondary);
    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 war der gezeichnete Rahmen: damals ein ::after mit Kreidefilter, und
   Safari zeichnete den 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". Der Filzstift zeichnet
   bei jeder Groessenaenderung neu (js/filz.js); ein Knopf, der gleich breit
   bleibt, springt trotzdem nicht.

   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; }

.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-secondary); font-size: 1.375rem; 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%); }
}


/* --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: var(--primary-dpsg); }
#site-footer { --sc: var(--primary); }
/* Hover im Fuss in der Farbe der Seite, nicht im CTA-Rot (Janis, 05.11.2026).
   Der Fuss setzt --sc oben auf das Markenblau, deshalb reicht der <body> seine
   Farbe unter eigenem Namen durch. Ohne Seitenfarbe gilt das Blau der Seite. */
body { --sc-seite: var(--sc, var(--primary)); --sc-aktiv: var(--sc, var(--cta-text)); }
html[data-theme="dunkel"] :is(#hdr, .mobile-nav, #site-footer) { --primary: var(--primary-dpsg); }
/* „DV Limburg“ im Fuss-Logo in der Farbe der Seite wie oben in der Navbar
   (Janis, 11.11.2026). --sc-tint ist nur auf getönten Seiten gesetzt, sonst
   ungültig, und dann greift das Markenblau des Fusses. */
body { --sc-tint: var(--sc); }
#site-footer .logo-text span { color: var(--sc-tint, var(--primary)); }

/* ══════════════════════════════════════════
   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(--border-card);
}
.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); }
@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); }
}

/* Hochformate (Janis, 11.11.2026): In den Querrahmen von Duo und Trio wurden
   sie nur hineingezoomt. dpsgFotoAnordnung() (plugins/dpsg-bilder) wählt
   diese beiden Varianten, sobald Hochformate dabei sind.

   .foto-trio-hoch = das Hochformat groß links, zwei Querformate rechts
   übereinander. Die rechten Bilder haben 3:2, das linke wird so hoch wie
   beide zusammen und landet damit etwa bei 3:4. Bleibt auch am Handy
   nebeneinander, untereinander wäre das Hochformat zu groß. */
.foto-trio.foto-trio-hoch { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; max-width: 980px; }
.foto-trio-hoch figure:not(:first-child) { aspect-ratio: 3 / 2; }

/* .foto-reihe = alle Bilder nebeneinander, jedes in seinem Format
   (hoch 3:4, quer 3:2), alle gleich hoch. Das geht mit Flex: Wächst jedes
   Bild im Verhältnis seines Formats, ergibt sich überall dieselbe Höhe.
   Die Höchstbreite setzt das Snippet, damit die Reihe nicht höher als
   520px wird. */
.foto-duo.foto-reihe { display: flex; align-items: flex-start; gap: 14px; }
.foto-reihe figure { flex: 1.5 1 0; aspect-ratio: 3 / 2; min-width: 0; }
.foto-reihe figure.ist-hoch { flex-grow: .75; aspect-ratio: 3 / 4; }
@media (max-width: 700px) {
    .foto-trio.foto-trio-hoch { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
    .foto-trio.foto-trio-hoch figure:first-child { grid-row: 1 / span 2; }
    /* Drei nebeneinander wären am Handy zu klein: zwei Spalten, ein
       Querformat nimmt die ganze Breite. „dense“ zieht die Hochformate
       zusammen in eine Zeile, sonst stünde bei hoch–quer–hoch jedes
       Hochformat allein neben einer leeren Spalte. Zwei Bilder bleiben
       nebeneinander wie am Desktop. */
    .foto-duo.foto-reihe.reihe-3 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-flow: row dense; }
    .foto-reihe.reihe-3 figure.ist-quer { grid-column: 1 / -1; }
    .foto-duo.foto-reihe:not(.reihe-3) { grid-template-rows: none; }
}


/* ── Kartensammlungen: gekürzter Text und „Mehr anzeigen“ ──
   Verhalten in js/karten-mehr.js, angeschaltet über data-mehr-text und
   data-mehr-liste (Downloads, Service, Anlaufstellen; Janis 15.11.2026).
   Gekürzt wird erst mit JavaScript (.mehr-js), sonst gäbe es keinen Knopf
   zum Aufklappen. Die Zeilenzahl setzt die Sammlung über --mehr-zeilen. */
/* Abgeschnitten mit „…“ am Ende der letzten Zeile. Ein Ausblenden nach unten
   verschluckte die letzte Zeile fast ganz, dann sah ein Text mit drei Zeilen
   aus wie einer mit zwei. */
.mehr-js [data-mehr-text]:not(.ist-offen) {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--mehr-zeilen, 3); overflow: hidden;
}
/* Gibt es mehr, wird die letzte sichtbare Zeile leicht durchsichtig. Nur
   leicht: Ganz ausgeblendet sah ein Text mit drei Zeilen aus wie einer mit
   zwei (siehe oben). */
.mehr-js [data-mehr-text].ist-gekuerzt { mask-image: linear-gradient(to bottom, #000 calc(100% - 1lh), rgb(0 0 0 / 35%)); }
.mehr-knopf {
    position: relative; z-index: 2;   /* über dem Link, der die Download-Kachel abdeckt */
    display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 0;
    background: none; border: 0; font: inherit; font-size: 1rem; font-weight: 700;
    color: var(--sc, var(--primary)); cursor: pointer;
}
.mehr-knopf::after { content: '↓'; transition: transform .2s; }
.mehr-knopf[aria-expanded="true"]::after { transform: rotate(180deg); }
.mehr-knopf:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
:root.mehr-js [data-mehr-weg] { display: none; }
/* Alle Karten einer Sammlung gleich hoch: --karten-hoehe misst
   js/karten-mehr.js über alle Raster des Bereichs. Mindesthöhe statt fester
   Höhe und kein Strecken der Reihe, damit eine aufgeklappte Karte allein
   wächst. */
.mehr-js [data-mehr-liste]:not(.as-list, [data-mehr-hoehe="frei"]) { align-items: start; }
.mehr-js [data-mehr-liste]:not(.as-list, [data-mehr-hoehe="frei"]) > * { min-height: var(--karten-hoehe, 0); }
.mehr-liste-fuss { display: flex; justify-content: center; margin-top: 20px; }
/* In der Listenansicht (Umschalter Karten/Liste) wird nichts gekürzt */
/* Nur das Kürzen aufheben, kein display: Ob der Text in der Liste steht,
   entscheidet die Liste selbst (teil-16 blendet den Service-Text aus). Ein
   display: block hier war stärker und ließ ihn Wort für Wort in die
   Zeichen-Spalte brechen (15.11.2026). */
.mehr-js .as-list [data-mehr-text]:not(.ist-offen) { -webkit-line-clamp: unset; mask-image: none; }
.as-list .mehr-knopf { display: none; }