/* =========================================================================
   KOPFKINO – Designsystem
   Farben und Schriften aus der bisherigen CI (Nachtblau, Papier, Kupfer,
   warmes Leinwandlicht; Newsreader + Jost, lokal eingebunden).
   ========================================================================= */

@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-variable.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-italic-300.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/jost-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/jost-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --nacht: #12132c;
  --nacht-2: #1b2142;
  --tief: #23265b;
  --royal: #2e348a;
  --akzent: #3742b8;
  --akzent-licht: #9aa6fb;
  --papier: #f4f1ea;
  --papier-2: #ece6d8;
  --papier-3: #fbf9f3;
  --tinte: #17150f;
  --tinte-2: #55514a;
  --linie: #d8d2c6;
  --kupfer: #70503d;
  --warm: #ead3b6;
  --warm-hell: #f3e3cc;
  --bronze: #b8ad9c;
  --fehler: #a3322a;

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Jost", "Avenir Next", system-ui, -apple-system, sans-serif;

  --fscale: 1;
  --radius: 18px;
  --radius-gross: 28px;
  --kopf-h: 72px;
  --schatten: 0 1px 2px rgba(18, 19, 44, .05), 0 18px 40px -22px rgba(18, 19, 44, .28);

  /* semantische Werte (hell) */
  --bg: var(--papier);
  --bg-2: var(--papier-2);
  --karte: var(--papier-3);
  --fg: var(--tinte);
  --fg-2: var(--tinte-2);
  --linie-s: var(--linie);
  --link: var(--akzent);
  --eyebrow: var(--akzent);
  color-scheme: light;
}

[data-theme="dunkel"] {
  --bg: #14152e;
  --bg-2: #1b1d3d;
  --karte: #20234a;
  --fg: #ece6d8;
  --fg-2: #c2bfba;
  --linie-s: rgba(236, 230, 216, .14);
  --link: #a9b3fc;
  --eyebrow: #9aa6fb;
  color-scheme: dark;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: calc(100% * var(--fscale)); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 16px); }
/* overflow-x am body, nicht am html: sonst bleibt die Kopfzeile beim Scrollen nicht mehr stehen. clip statt hidden,
   weil manche Handybrowser die Seite mit hidden trotzdem seitlich verschieben lassen. */
/* overflow-wrap: Ein Wort, das nicht in seine Spalte passt, bricht um, statt über den Bildschirmrand zu ragen.
   Schönere Trennstellen für bekannte lange Wörter setzt der Generator (build/lib/html.js, trennstellen). */
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1.0625rem/1.65 var(--sans); font-feature-settings: "kern", "liga"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; overflow-wrap: break-word; }
@media (min-width: 900px) { body { font-size: 1.125rem; } }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
main { display: block; outline: none; }
::selection { background: var(--warm); color: var(--nacht); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 6px; }
.sek--nacht :focus-visible, .sek--tief :focus-visible, .hero :focus-visible, .kopf :focus-visible, .fuss :focus-visible, .menue :focus-visible, .film-hero :focus-visible { outline-color: var(--warm); }

.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--warm); color: var(--nacht); padding: 10px 16px; border-radius: 999px; font-weight: 500; text-decoration: none; }
.skip:focus { top: 12px; }

/* Seitenrand: am Handy 20px (Entscheid Deborah, 12.10.2026: 16px wirkte zu knapp), ab rund 500px Breite 4vw */
.mass { width: 100%; margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.mass--breit { max-width: 1320px; }
.mass--text { max-width: 860px; }

/* ---------- Typografie ---------- */
.h1 { font-family: var(--serif); font-weight: 360; font-size: clamp(2.35rem, 1.5rem + 3.7vw, 4.6rem); line-height: 1.04; letter-spacing: -.018em; text-wrap: balance; }
.h2 { font-family: var(--serif); font-weight: 380; font-size: clamp(1.85rem, 1.35rem + 2.1vw, 3.1rem); line-height: 1.1; letter-spacing: -.012em; text-wrap: balance; }
.h3 { font-family: var(--serif); font-weight: 420; font-size: clamp(1.45rem, 1.25rem + .8vw, 1.95rem); line-height: 1.18; text-wrap: balance; }
.eyebrow { font: 500 .78rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--eyebrow); margin: 0 0 1.1rem; text-wrap: balance; }
.eyebrow--licht { color: var(--akzent-licht); }
.nachsatz { margin-top: 2rem; color: var(--fg-2); max-width: 70ch; }
/* Zweiteilige Überschrift (freigegebene Liste in site.js): Der zweite Satz steht kursiv in Kupfer,
   auf dunklem Grund in Sand. Beide Sätze bleiben je als Einheit zusammen: Passt der zweite nicht mehr ganz
   neben den ersten, beginnt er auf der nächsten Zeile; ist ein Satz länger als eine Zeile, bricht er in sich um. */
.h2-eins, .h2-zwei { display: inline-block; max-width: 100%; }
.h2-zwei { font-style: italic; color: var(--zweitsatz, var(--kupfer)); }
[data-theme="dunkel"], .sek--nacht, .sek--tief, .artikel-abschnitt--angebot, .hero, .video-band, .film-hero { --zweitsatz: var(--warm); }
/* Übergangssatz am Abschnittsende (Feld «uebergang» an einem Block): feine Linie, Satz kursiv, Sprunglink */
.uebergang { margin-top: clamp(2rem, 3vw, 2.6rem); padding-top: 1.4rem; border-top: 1px solid var(--linie-s); max-width: 62ch; }
.uebergang-satz { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); line-height: 1.4; color: var(--fg); margin: 0; }
.uebergang-link { display: inline-block; margin-top: .4rem; padding-block: .35rem; font: 500 .8rem/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--eyebrow); text-decoration: none; }
.uebergang-link:hover { text-decoration: underline; text-underline-offset: .25em; }
.uebergang-link:focus-visible { outline-color: var(--eyebrow); }
/* Abgrenzungskasten ohne eigenen Text: drei Zusagen und der Krisenhinweis */
.zusagen { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: 18px; }
@media (min-width: 900px) { .zusagen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zusage { padding-top: .9rem; border-top: 1px solid var(--linie-s); }
.zusage h3 { font-family: var(--serif); font-weight: 420; font-size: 1.2rem; line-height: 1.25; margin: 0 0 .45rem; text-wrap: balance; }
.zusage p { margin: 0; color: var(--fg-2); font-size: .95rem; line-height: 1.6; }
.zusagen-krise { margin: 0; color: var(--fg-2); font-size: .95rem; }
/* Steckbrief «Kurz erklärt» (Feld «steckbrief»): Faktenzeilen in einem ruhigen Kasten */
.steckbrief { margin-top: clamp(2.4rem, 4vw, 3.4rem); background: var(--karte); border: 1px solid var(--linie-s); border-radius: var(--radius); padding: clamp(22px, 3vw, 36px); }
.steckbrief-titel { font: 500 .72rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--eyebrow); margin: 0 0 .9rem; }
.steckbrief dl { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: .6rem 1.4rem; margin: 0; }
.steckbrief dt { font: 500 .82rem/1.55 var(--sans); letter-spacing: .04em; color: var(--fg-2); }
.steckbrief dd { margin: 0; line-height: 1.55; }
@media (max-width: 639px) { .steckbrief dl { grid-template-columns: minmax(0, 1fr); gap: .1rem; } .steckbrief dd { margin-bottom: .7rem; } }
/* Zwei Lesarten derselben Szene (Feld «lesarten») */
.lesarten { margin-top: clamp(2rem, 4vw, 3rem); }
.lesarten-label, .lesart-label { font: 500 .72rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--eyebrow); margin: 0 0 .6rem; }
.lesarten-titel { font-family: var(--serif); font-weight: 420; font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); line-height: 1.2; margin: 0 0 .5rem; }
.lesarten-szene { color: var(--fg-2); margin: 0 0 1.1rem; }
.lesarten-raster { display: grid; gap: 16px; }
@media (min-width: 700px) { .lesarten-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lesart { background: var(--karte); border: 1px solid var(--linie-s); border-radius: var(--radius); padding: clamp(20px, 3vw, 30px); }
.lesart-satz { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.2rem, 1.1rem + .4vw, 1.45rem); line-height: 1.35; color: var(--fg-2); }
.lesart--betont .lesart-satz { color: var(--zweitsatz, var(--kupfer)); }
.lesarten-hinweis { font-size: .85rem; color: var(--fg-2); margin: .8rem 0 0; }
.lesart-fall-titel { font: 500 .72rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-2); margin: 0 0 .4rem; }
.lesart-film { display: inline-block; margin-top: .8rem; padding-block: .3rem; font: 500 .9rem/1.4 var(--sans); color: var(--link); text-decoration: underline; text-underline-offset: .25em; }
.lesarten-mehr { margin-top: 1.4rem; border-top: 1px solid var(--linie-s); }
.lesarten-mehr > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .6rem; padding: 1rem 0; font: 500 .95rem/1.4 var(--sans); color: var(--fg); }
.lesarten-mehr > summary::-webkit-details-marker { display: none; }
.lesarten-mehr > summary::before { content: "+"; display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1px solid var(--linie-s); border-radius: 50%; font-size: 1rem; line-height: 1; }
.lesarten-mehr[open] > summary::before { content: "–"; }
.lesarten-fall + .lesarten-fall { margin-top: 1.6rem; }
.lesarten-mehr .lesarten-fall:first-of-type { margin-top: .6rem; }
.lesarten-mehr .lesarten-fall:last-child { margin-bottom: .6rem; }
/* Auffangzeile unter einer Auswahl (Feld «auffang») */
.auffang { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; }
.auffang p { margin: 0; color: var(--fg-2); }

/* ---------- Knöpfe ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 50px; padding: .8em 1.55em; border-radius: 999px; border: 1px solid transparent; font: 500 1rem/1.2 var(--sans); letter-spacing: .01em; text-decoration: none; text-align: center; transition: background-color .2s, color .2s, border-color .2s, transform .2s; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: none; }
.btn-primaer { background: var(--tief); color: var(--papier); }
.btn-primaer:hover { background: var(--royal); color: #fff; }
[data-theme="dunkel"] .btn-primaer { background: var(--warm); color: var(--nacht); }
[data-theme="dunkel"] .btn-primaer:hover { background: var(--warm-hell); }
.btn-licht { background: var(--warm); color: var(--nacht); }
.btn-licht:hover { background: var(--warm-hell); color: var(--nacht); }
.btn-geist { border-color: rgba(244, 241, 234, .42); color: var(--papier); background: transparent; }
.btn-geist:hover { border-color: var(--papier); background: rgba(244, 241, 234, .06); color: #fff; }
.btn-geist-dunkel { border-color: var(--linie-s); color: var(--fg); background: transparent; }
.btn-geist-dunkel:hover { border-color: var(--fg); }
.btn-text { min-height: 0; padding: .2em 0; border-radius: 0; color: var(--link); border: 0; border-bottom: 1px solid currentColor; }
.btn-text::after { content: "→"; transition: transform .2s; }
.btn-text:hover { transform: none; }
.btn-text:hover::after { transform: translateX(3px); }
.btn-breit { width: 100%; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: 2rem; }
.knopf-reihe--mitte { justify-content: center; }
.mehr-link { margin-top: 1.6rem; }

/* ---------- Kopfzeile ---------- */
.kopf { position: sticky; top: 0; z-index: 60; background: rgba(18, 19, 44, .9); color: var(--papier); border-bottom: 1px solid rgba(244, 241, 234, .08); }
@supports (backdrop-filter: blur(1px)) { .kopf { background: rgba(18, 19, 44, .78); backdrop-filter: blur(16px) saturate(140%); } }
/* Touch-Geräte: keine Unschärfe hinter der Kopfzeile. Sie muss beim Scrollen in jedem Bild neu berechnet werden,
   über Videos und grossen Bildern ruckelt das am Handy. Stattdessen ein fast deckender Grund. */
@media (hover: none) { .kopf { background: rgba(18, 19, 44, .94); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.kopf-innen { max-width: 1440px; margin: 0 auto; height: var(--kopf-h); display: flex; align-items: center; gap: 20px; padding-inline: clamp(20px, 3vw, 36px); }
.marke { display: flex; flex-direction: column; gap: 2px; color: var(--papier); text-decoration: none; flex-shrink: 0; }
.marke-wort { font: 500 1.02rem/1 var(--sans); letter-spacing: .34em; }
.marke-zeile { font-size: .66rem; letter-spacing: .06em; opacity: .66; white-space: nowrap; }
.hauptnav { display: none; margin-left: auto; }
.hn-liste { position: relative; display: flex; align-items: center; gap: 2px; list-style: none; padding: 0; }
.hn-punkt { position: relative; display: flex; align-items: center; }
.hn-link { display: block; padding: 10px 11px; color: rgba(244, 241, 234, .86); text-decoration: none; font-size: .93rem; border-radius: 999px; white-space: nowrap; }
.hn-link:hover, .hn-link[aria-current="page"], .ist-aktiv > .hn-link { color: #fff; background: rgba(244, 241, 234, .07); text-decoration: none; }
.hn-auf { width: 22px; height: 30px; margin-left: -8px; border: 0; background: none; display: grid; place-items: center; opacity: .7; }
.hn-auf::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.hn-unter { position: absolute; top: calc(100% + 6px); left: -8px; max-width: calc(100vw - 32px); background: var(--nacht-2); border: 1px solid rgba(244, 241, 234, .1); border-radius: 16px; padding: 10px; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; }
.hn-unter--breit { width: 700px; }
.hn-unter--schmal { width: 364px; }
.hn-rechts > .hn-unter { left: auto; right: -8px; }
/* Breite Felder öffnen sich alle an derselben Stelle, bündig mit dem Anfang der Navigation: Sie springen nicht und bleiben in jeder Fensterbreite und Schriftgrösse im Fenster */
.hn-weit { position: static; }
.hn-weit > .hn-unter { left: -8px; right: auto; }
.hn-unter::before { content: ""; position: absolute; inset: -7px 0 auto; height: 7px; }
.hn-unter ul { list-style: none; padding: 0; }
/* Breites Feld: Einträge zweispaltig, Gruppen (Coaching, Orientierung) als Spalten mit kleiner Überschrift */
.hn-unter--breit .hn-raster, .hn-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; align-items: start; }
.hn-teil { font: 500 .68rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--akzent-licht); padding: 10px 14px 6px; }
/* Gruppen untereinander (Wissen: Einstieg, darunter Orientierung), dazwischen eine feine Linie */
.hn-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; align-items: start; }
.hn-stapel > div + div { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(244, 241, 234, .12); }
.hn-unter li a { display: block; padding: 10px 14px 11px; color: rgba(244, 241, 234, .9); text-decoration: none; border-radius: 12px; }
.hn-unter li a:hover, .hn-unter li a[aria-current="page"] { background: rgba(154, 166, 251, .12); }
.hn-unter li a[aria-current="page"] .nav-name { font-weight: 550; }
/* Seitenname deutlich, Kurzzeile kleiner und zurückhaltend */
.nav-name { display: block; font-weight: 450; font-size: 1rem; line-height: 1.3; color: #fff; }
.nav-kurz { display: block; margin-top: 2px; font-size: .86rem; line-height: 1.4; color: rgba(244, 241, 234, .7); }
.hn-hilfe { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 8px; padding: 14px 14px 8px; border-top: 1px solid rgba(244, 241, 234, .12); font-size: .9rem; color: rgba(244, 241, 234, .7); }
.hn-hilfe a, .mm-hilfe a { color: var(--warm); text-decoration: none; }
.hn-hilfe a::after, .mm-hilfe a::after { content: "→"; margin-left: .4em; }
.hn-hilfe a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hn-mit-unter:hover .hn-unter, .hn-mit-unter:focus-within .hn-unter, .hn-mit-unter.ist-offen .hn-unter { opacity: 1; visibility: visible; transform: none; }
/* Kurzes Zögern beim Überfahren, damit die Felder nicht aufspringen, wenn die Maus nur vorbeizieht */
.hn-mit-unter:hover .hn-unter { transition-delay: .09s; }
/* Immer nur ein Feld: Zeigt die Maus auf einen anderen Punkt, weicht das per Tastatur oder Klick geöffnete */
.hn-liste:has(.hn-mit-unter:hover) .hn-mit-unter:not(:hover) > .hn-unter, .hn-mit-unter.hn-zu > .hn-unter { opacity: 0; visibility: hidden; transform: translateY(6px); transition-delay: 0s; }
.kopf-aktionen { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.btn-kopf { min-height: 42px; padding: .55em 1.15em; font-size: .92rem; }
.nur-breit { display: none; }
.ansicht-knopf { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(244, 241, 234, .22); background: transparent; display: grid; place-items: center; }
.ansicht-knopf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.ansicht-knopf .gefuellt { fill: currentColor; stroke: none; }
.menue-knopf { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(244, 241, 234, .22); background: transparent; font-size: .9rem; }
.menue-striche { width: 16px; height: 10px; position: relative; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transition: transform .2s; }
.menue-knopf[aria-expanded="true"] .menue-striche { border-bottom-color: transparent; transform: rotate(45deg) translate(2px, 2px); }
.menue-knopf[aria-expanded="true"] .menue-striche::after { content: ""; position: absolute; left: 0; right: 0; top: 2.5px; border-top: 1.5px solid currentColor; transform: rotate(-90deg); }
@media (max-width: 520px) { .menue-knopf-text { display: none; } .marke-zeile { display: none; } .btn-kopf { padding: .5em .95em; } }
@media (min-width: 760px) { .nur-breit { display: inline; } }
@media (min-width: 1280px) {
  .hauptnav { display: block; }
  .menue-knopf { display: none; }
  .kopf-aktionen { margin-left: 8px; }
  .nur-breit { display: none; }
}
@media (min-width: 1420px) { .nur-breit { display: inline; } .hn-link { padding-inline: 13px; } }

/* Mobiles Menü */
.menue { position: fixed; inset: var(--kopf-h) 0 0; z-index: 55; background: var(--nacht); color: var(--papier); overflow-y: auto; overscroll-behavior: contain; }
.menue[hidden] { display: none; }
.menue-innen { max-width: 720px; margin: 0 auto; padding: 10px clamp(20px, 4vw, 40px) 48px; }
.mm-liste { list-style: none; padding: 0; }
.mm-gruppe { border-bottom: 1px solid rgba(244, 241, 234, .12); }
.mm-gruppe:last-child { border-bottom: 0; }
.mm-gruppe ul { list-style: none; padding: 0; }
/* Bereichszeile: ganze Zeile antippbar, Pfeil zeigt offen oder zu */
.mm-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 56px; padding: 6px 4px 6px 0; border: 0; background: none; color: var(--papier); font: 400 1.16rem/1.3 var(--sans); text-align: left; text-decoration: none; }
button.mm-kopf::after { content: ""; flex-shrink: 0; width: 8px; height: 8px; margin: 0 4px 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .75; transition: transform .2s; }
button.mm-kopf[aria-expanded="true"] { color: #fff; }
button.mm-kopf[aria-expanded="true"]::after { margin: 4px 4px 0; transform: rotate(-135deg); }
/* Bereich der aktuellen Seite: feine Linie unter dem Namen */
.mm-gruppe.ist-aktiv > .mm-kopf span { padding-bottom: 2px; border-bottom: 1px solid var(--akzent-licht); }
.mm-feld { padding-bottom: 14px; }
.mm-feld[hidden] { display: none; }
.mm-teil { font: 500 .68rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--akzent-licht); margin: 12px 0 4px; }
.mm-teil:first-child { margin-top: 2px; }
.mm-feld--stapel .mm-teil:not(:first-child) { margin-top: 10px; padding-top: 16px; border-top: 1px solid rgba(244, 241, 234, .12); }
.mm-feld li a { display: block; min-height: 44px; padding: 8px 0; text-decoration: none; }
.mm-feld .nav-name { font-size: 1.04rem; line-height: 1.35; color: var(--papier); }
/* Aktuelle Seite: Farbe und Strich am linken Rand */
.mm-feld li a[aria-current="page"] { margin-left: -12px; padding-left: 10px; border-left: 2px solid var(--warm); }
.mm-feld li a[aria-current="page"] .nav-name { color: var(--warm); }
.mm-hilfe { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(244, 241, 234, .12); font-size: .95rem; color: rgba(244, 241, 234, .7); }
.mm-hilfe a { display: inline-flex; align-items: center; min-height: 44px; }
.menue-fuss { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(244, 241, 234, .12); display: grid; gap: 14px; color: rgba(244, 241, 234, .76); font-size: .95rem; }
.menue-fuss a:not(.btn) { color: var(--warm); }
.menue-offen { overflow: hidden; }

/* Ansicht-Panel */
.ansicht { position: absolute; right: clamp(20px, 3vw, 36px); top: calc(var(--kopf-h) - 4px); width: min(340px, calc(100vw - 40px)); background: var(--nacht-2); color: var(--papier); border: 1px solid rgba(244, 241, 234, .12); border-radius: 18px; padding: 18px; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .55); }
.ansicht[hidden] { display: none; }
.ansicht-titel { font: 500 .75rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--akzent-licht); margin-bottom: 12px; }
.ansicht-zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid rgba(244, 241, 234, .08); font-size: .95rem; }
.ansicht-zeile small { display: block; font-size: .78rem; opacity: .65; }
.schalter { width: 46px; height: 26px; border-radius: 999px; border: 1px solid rgba(244, 241, 234, .3); background: rgba(244, 241, 234, .08); position: relative; flex-shrink: 0; }
.schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--papier); transition: transform .2s; }
.schalter[aria-checked="true"] { background: var(--akzent); border-color: var(--akzent); }
.schalter[aria-checked="true"]::after { transform: translateX(20px); }
.schrift-wahl { display: flex; gap: 4px; }
.schrift-wahl button { min-width: 40px; height: 34px; border-radius: 10px; border: 1px solid rgba(244, 241, 234, .2); background: transparent; }
.schrift-wahl button[aria-pressed="true"] { background: var(--warm); color: var(--nacht); border-color: var(--warm); }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; background: var(--nacht); color: var(--papier); overflow: hidden; display: flex; flex-direction: column; }
.hero-medien { position: relative; order: 2; aspect-ratio: 16 / 10; margin: 0 clamp(20px, 4vw, 40px) 32px; border-radius: 20px; overflow: hidden; }
.hero-medien .hero-bild, .hero-medien .film-video, .hero-medien video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Dunkle Hero-Bilder aufhellen (Feld «bildHell» im Hero, zum Beispiel 1.3) */
.hero-medien .hero-bild { filter: var(--hero-hell, none); }
.hero-text { order: 1; padding-block: 48px 32px; }
/* Handy und Tablet: Das Bild liegt nicht als Karte auf der Seite, sondern läuft randlos bis zum unteren Rand des Heros
   und wächst oben weich aus dem dunklen Grund heraus. Die Knöpfe sind gleich breit. */
@media (max-width: 899px) {
  .hero-medien { margin: 0; border-radius: 0; aspect-ratio: 4 / 3; }
  .hero-medien .hero-bild { object-position: var(--hero-lage-m, 50% 50%); filter: var(--hero-hell-m, var(--hero-hell, none)); }
  .hero-medien::before { content: ""; position: absolute; inset: 0 0 auto; height: 46%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, var(--nacht) 0%, rgba(18, 19, 44, .72) 34%, rgba(18, 19, 44, 0) 100%); }
  .hero-text { padding-block: 40px 8px; }
  .hero .knopf-reihe { display: inline-grid; gap: 12px; margin-top: 1.6rem; }
  .hero-punkte { margin-top: 1.3rem; }
}
@media (max-width: 639px) { .hero .hero-punkte--ab-tablet { display: none; } }
/* Startseite am Handy und Tablet: wie am Desktop liegt die Linse hinter dem Text, rechts angeschnitten. Der Hero füllt
   den ersten Bildschirm. Am Handy ist die Linse 190vw gross (--linse), ihr Ring steht bei 80 % der Breite und fest
   490px unter der Kopfzeile (--lx, --ly): Die helle Blende leuchtet rechts zwischen den Knöpfen, Ring und Ziffern
   laufen rechts aus dem Bild. Tablet: siehe «Linse im blauen Raum». Ein Schleier von links und oben hält Titel und
   Text lesbar. */
@media (max-width: 899px) {
  /* --fenster-h setzt site.js beim Laden einmal fest. Ohne das ändert sich die Höhe in Browsern, die beim Scrollen
     ihre Leisten einziehen und der Seite eine neue Fensterhöhe melden (Chrome auf dem iPhone): Die Linse sprang. */
  .hero--linse { min-height: calc(var(--fenster-h, 100svh) - var(--kopf-h) - 1px); }
  .hero--linse .hero-text { position: relative; padding-block: 24px 32px; }
  .hero--linse .hero-lead { margin-top: 1.1rem; }
  .hero--linse .knopf-reihe { margin-top: 1.3rem; gap: 10px; }
  .hero--linse .hero-medien { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; }
  /* Mitte des Rings im Foto: 49,8 % / 48,8 % */
  .hero--linse .hero-medien .hero-bild { inset: auto; max-width: none; width: var(--linse); height: var(--linse); left: calc(var(--lx) - var(--linse) * .498); top: calc(var(--ly) - var(--linse) * .488); }
  .hero--linse .hero-medien::before { content: none; }
  .hero--linse .hero-medien::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(18, 24, 72, .88) 0%, rgba(18, 24, 72, .66) 55%, rgba(18, 24, 72, .2) 100%), linear-gradient(180deg, rgba(18, 24, 72, .5) 0%, rgba(18, 24, 72, 0) 45%); }
}
/* Startseite: Linse im blauen Raum. Das Foto ist genau am äusseren Objektivring ausgeschnitten, rundherum liegt der
   Raum aus dem früheren Linsenfahrt-Hero (Verläufe von .hero-stage, Stand 05.09.2026 bis zur Stilllegung): warmes
   Leinwandlicht, Royalblau-Schein direkt um die Fassung, gesättigtes Blauviolett. Farben und Stufen sind unverändert
   übernommen; Grösse und Lage der Verläufe sind am Objektivring gemessen (früher Ring 243 px bei 1440 × 900) und
   wachsen mit dem Ring mit (--r = Ringradius). Den damaligen fast schwarzen Grund (#070a1b) und die Randabdunkelung
   gibt es hier nicht: Wo das Blau ausläuft, bleibt das tiefe Blau #121848, in das der Blauviolett-Verlauf damals
   auslief. Derselbe Ton dunkelt am Desktop hinter dem Text ab (Objektiv und Raum), mit derselben Deckkraft wie zuvor.
   Maske = Umriss des Rings im Foto (1024 × 1024: Mitte 510/500, Radien 407/390, 3 px weich); als SVG mit «cover»
   liegt sie genau wie das Foto mit object-fit: cover. */
.hero--linse {
  --ly: calc(50% - var(--r) * .03);
  --linse-maske: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' width='1024' height='1024'%3E%3Cfilter id='w'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3Cellipse cx='510' cy='500' rx='407' ry='390' filter='url(%23w)'/%3E%3C/svg%3E");
  background:
    var(--linse-raum-schleier, none),
    radial-gradient(calc(var(--r) * 2.84) calc(var(--r) * 1.48) at var(--lx, 50%) calc(var(--ly) - var(--r) * .23), rgba(132, 114, 84, .38) 0%, rgba(132, 114, 84, 0) 70%),
    radial-gradient(calc(var(--r) * 3.56) calc(var(--r) * 1.93) at var(--lx, 50%) calc(var(--ly) - var(--r) * .16), rgba(64, 84, 214, .3) 14%, rgba(48, 64, 180, .1) 44%, rgba(40, 54, 150, 0) 66%),
    radial-gradient(calc(var(--r) * 5.21) calc(var(--r) * 2.74) at var(--lx, 50%) calc(var(--ly) - var(--r) * .16), rgba(34, 46, 138, .9) 8%, rgba(26, 34, 102, .55) 42%, rgba(18, 24, 72, 0) 74%),
    #121848;
}
@media (max-width: 899px) {
  /* Ring: 39,75 % der Linsengrösse */
  .hero--linse { --linse: 190vw; --lx: 80%; --ly: 490px; --r: calc(var(--linse) * .3975); }
  /* Tablet: Text senkrecht mittig wie am Desktop, Linse kleiner; die Blende steht neben den Knöpfen (120px unter der Mitte) */
  @media (min-width: 640px) { .hero--linse { justify-content: center; --linse: 120vw; --ly: calc(50% + 120px); } }
  /* Handy: Text mit Luft unter der Kopfzeile; die Knöpfe stehen dann bei 380–560px, die Blende (490px) dazwischen */
  @media (max-width: 639px) { .hero--linse .hero-text { padding-top: 88px; } }
  .hero--linse .hero-medien .hero-bild { -webkit-mask: var(--linse-maske) center / 100% 100% no-repeat; mask: var(--linse-maske) center / 100% 100% no-repeat; }
}
@media (min-width: 900px) {
  /* Links liegt derselbe Schleier hinter dem Text auch auf dem Raum: Der Text beginnt neben dem Ring */
  .hero--linse { --r: 39.75vw; --linse-raum-schleier: linear-gradient(90deg, rgba(18, 24, 72, .95) 0%, rgba(18, 24, 72, .82) 34%, rgba(18, 24, 72, 0) 66%); }
  .hero--linse .hero-medien .hero-bild, .hero--linse .hero-medien::after { -webkit-mask: var(--linse-maske) center / cover no-repeat; mask: var(--linse-maske) center / cover no-repeat; }
  .hero--linse .hero-medien::after { background: linear-gradient(90deg, rgba(18, 24, 72, .95) 0%, rgba(18, 24, 72, .82) 34%, rgba(18, 24, 72, .3) 66%, rgba(18, 24, 72, .12) 100%), linear-gradient(0deg, rgba(18, 24, 72, .7) 0%, rgba(18, 24, 72, 0) 30%); }
}
.hero-satz { max-width: 680px; }
.hero .h1 { color: #fff; }
.hero-lead { font-size: clamp(1.08rem, 1rem + .45vw, 1.32rem); line-height: 1.6; color: rgba(244, 241, 234, .86); max-width: 58ch; margin-top: 1.4rem; }
/* Motto direkt unter dem Titel (Feld «motto» im Hero) und Lead in mehreren Absätzen */
.hero-motto { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.15rem); line-height: 1.25; color: var(--warm-hell); margin: 1.1rem 0 0; text-wrap: balance; }
.hero-lead + .hero-lead { margin-top: .9em; }
/* Feld «leadHandy» im Hero: eigener Einleitungstext bis 639px, darüber gilt «lead» */
.hero-lead-handy { display: none; }
@media (max-width: 639px) { .hero-lead-breit { display: none; } .hero-lead-handy { display: inline; } }
/* «Kurz gesagt» im Hero (Feld «kurz»): Die Antwort auf «Was ist das?» steht im ersten Bildschirm.
   Am Handy und Tablet direkt unter Titel und Motto, ab 1100px als Kasten rechts neben dem Text. */
.hero-kurz { margin-top: 1.6rem; max-width: 520px; padding: clamp(20px, 2.2vw, 32px); border: 1px solid rgba(244, 241, 234, .2); border-radius: var(--radius); background: rgba(255, 255, 255, .07); color: var(--papier); }
.hero-kurz .kurz-titel { color: var(--akzent-licht); }
.hero-kurz .kurz-intro { font-family: var(--serif); font-size: clamp(1.25rem, 1.15rem + .5vw, 1.55rem); line-height: 1.25; color: #fff; margin-bottom: .7em; }
.hero-kurz ul { padding-left: 1.15em; display: grid; gap: 8px; line-height: 1.5; }
.hero-kurz li::marker { color: var(--akzent-licht); }
@media (max-width: 899px) { .hero--ohne-bild .hero-text:has(.hero-kurz) { padding-top: 48px; } }
/* Aufbau: .hero-haupt (Zeile über dem Titel, Titel, Motto, Lead, Knöpfe) und daneben der Kasten.
   Unter 1100px löst sich .hero-haupt auf (display: contents), und der Kasten rückt per order zwischen Motto und Lead.
   Ab 1100px stehen beide Spalten senkrecht mittig: Der Titel sitzt wie auf den anderen Heros ohne Bild in der Mitte. */
@media (max-width: 1099px) {
  .hero-satz--kurz { display: flex; flex-direction: column; }
  .hero-haupt { display: contents; }
  .hero-satz--kurz .hero-kurz { order: 1; }
  .hero-satz--kurz .hero-lead, .hero-satz--kurz .knopf-reihe, .hero-satz--kurz .hero-punkte { order: 2; }
  /* In der Spalte fallen Abstände nicht mehr zusammen */
  .hero-satz--kurz .hero-lead { margin-bottom: 0; }
  .hero-satz--kurz .hero-lead + .hero-lead { margin-top: 1em; }
  .hero-satz--kurz .knopf-reihe { align-self: flex-start; }
}
@media (min-width: 1100px) {
  .hero-satz--kurz { width: 100%; max-width: none; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 96px); align-items: center; }
  .hero-satz--kurz > .hero-kurz { justify-self: end; width: 100%; max-width: 460px; margin-top: 0; }
}
.hero-punkte { list-style: none; padding: 0; margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .92rem; color: rgba(244, 241, 234, .74); }
.hero-punkte li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--akzent-licht); margin-right: 8px; transform: translateY(-2px); }
.hero--ohne-bild { background: radial-gradient(120% 90% at 85% 0%, #2e348a 0%, rgba(46, 52, 138, 0) 55%), var(--nacht); }
.hero--ohne-bild .hero-text { padding-block: 72px 64px; }
.hero--schlicht .hero-text { padding-block: 56px 48px; }
@media (min-width: 900px) {
  .hero { display: block; min-height: min(calc(100vh - var(--kopf-h) - 1px), 880px); }
  .hero--artikel { min-height: min(calc(100vh - var(--kopf-h) - 1px), 760px); }
  .hero-medien { position: absolute; inset: 0; margin: 0; border-radius: 0; aspect-ratio: auto; z-index: -1; }
  /* Bild am Desktop seitlich versetzen («bildVersatz») und nach oben rücken («bildZoom», wächst vom unteren Rand aus),
     wenn das Motiv sonst hinter dem Text liegt */
  .hero-medien .hero-bild { transform: translateX(var(--hero-versatz, 0)) scale(var(--hero-zoom, 1)); transform-origin: 50% 100%; }
  .hero-medien::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 19, 44, .95) 0%, rgba(18, 19, 44, .82) 34%, rgba(18, 19, 44, .3) 66%, rgba(18, 19, 44, .12) 100%), linear-gradient(0deg, rgba(18, 19, 44, .7) 0%, rgba(18, 19, 44, 0) 30%); }
  /* Niedrige Fenster: Abstände und Titel geben nach, damit Knöpfe und Punkte im ersten Bildschirm bleiben */
  .hero-text { min-height: inherit; display: flex; align-items: center; padding-block: clamp(28px, 30vh - 158px, 112px) clamp(40px, 22vh - 94px, 104px); }
  .hero .h1 { font-size: clamp(2.35rem, min(1.5rem + 3.7vw, 8.6vh), 4.6rem); }
  .hero--ohne-bild, .hero--schlicht { min-height: 0; }
  .hero--ohne-bild .hero-text, .hero--schlicht .hero-text { min-height: 0; padding-block: 112px 88px; }
}

.brotkrumen { background: var(--bg); border-bottom: 1px solid var(--linie-s); font-size: .84rem; color: var(--fg-2); }
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 0; }
.brotkrumen li:not(:last-child)::after { content: "/"; margin-left: 6px; opacity: .5; }
.brotkrumen a { color: var(--fg-2); text-decoration: none; }
.brotkrumen a:hover { color: var(--fg); text-decoration: underline; }
/* Sprungziel direkt unter den Brotkrumen (z. B. «Filme entdecken», «Film
   starten»): Der Sprung endet so, dass die Brotkrumen unter der Kopfzeile
   sichtbar bleiben, statt dahinter zu verschwinden. */
/* Sprungziele, die ein ganzer Abschnitt mit eigener Hintergrundfarbe sind,
   schliessen bündig an die Kopfzeile an. Sonst bleibt darüber ein 16px hoher
   Streifen des vorherigen Abschnitts sichtbar (scroll-padding-top oben).
   Steht bewusst VOR der Brotkrumen-Regel: Folgt der Abschnitt direkt auf die
   Brotkrumen, gewinnt jene Regel und die Brotkrumen bleiben sichtbar. */
.sek[id] { scroll-margin-top: -16px; }
.brotkrumen + [id] { scroll-margin-top: 32px; }

/* ---------- Sektionen ---------- */
.sek { padding-block: clamp(64px, 3.5rem + 4vw, 136px); background: var(--bg); color: var(--fg); position: relative; }
.sek--warm { background: var(--bg-2); }
.sek--nacht, .sek--tief { --fg: #ece6d8; --fg-2: rgba(236, 230, 216, .76); --linie-s: rgba(236, 230, 216, .14); --karte: rgba(255, 255, 255, .04); --link: #b7bffd; --eyebrow: var(--akzent-licht); color: var(--fg); }
.sek--nacht { background: var(--nacht-2); }
.sek--tief { background: radial-gradient(90% 120% at 100% 0%, rgba(55, 66, 184, .35) 0%, rgba(55, 66, 184, 0) 60%), var(--tief); }
[data-theme="dunkel"] .sek--nacht { background: #10112a; }
.sek-kopf { max-width: 780px; margin-bottom: clamp(32px, 2rem + 2vw, 60px); }
.sek-kopf--mitte { text-align: center; margin-inline: auto; }
.sek-intro { margin-top: 1.2rem; font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); color: var(--fg-2); }
.sek-kopf + .prosa { margin-top: -.5rem; }

/* Prosa */
.prosa { max-width: 70ch; }
.prosa > * + * { margin-top: 0; }
.prosa p { margin: 0 0 1.05em; }
.prosa h3 { font-family: var(--serif); font-weight: 450; font-size: 1.32rem; line-height: 1.25; margin: 1.8em 0 .55em; text-wrap: balance; }
.prosa h4 { font-weight: 600; margin: 1.4em 0 .4em; }
.prosa ul, .prosa ol { padding-left: 1.25em; margin: 0 0 1.2em; }
.prosa li { margin-bottom: .45em; padding-left: .2em; }
.prosa li::marker { color: var(--eyebrow); }
.prosa strong, .prosa b { font-weight: 600; }
.prosa blockquote { margin: 1.6em 0; padding: .2em 0 .2em 1.2em; border-left: 2px solid var(--eyebrow); font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.28rem; line-height: 1.45; }
.prosa > a, .prosa li > a { display: inline-block; margin: .35em 1.4em .35em 0; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; line-height: 1.4; }
.prosa table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .95rem; }
.prosa th, .prosa td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linie-s); vertical-align: top; }
.prosa th { font-weight: 600; }
.prosa--licht { color: rgba(244, 241, 234, .82); }
.prosa--recht h2 { font-family: var(--serif); font-size: 1.6rem; margin: 2em 0 .6em; }
.prosa--recht h3 { font-size: 1.2rem; }

/* Listen mit Haken */
.haken-liste { list-style: none; padding: 0; display: grid; gap: 12px; }
.haken-liste li { position: relative; padding-left: 34px; }
.haken-liste li::before { content: ""; position: absolute; left: 0; top: .32em; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--eyebrow) 16%, transparent); }
.haken-liste li::after { content: ""; position: absolute; left: 7px; top: calc(.32em + 5px); width: 5px; height: 9px; border-right: 1.6px solid var(--eyebrow); border-bottom: 1.6px solid var(--eyebrow); transform: rotate(40deg); }
.haken-liste--breit { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px 32px; }
.haken-liste h3 { text-wrap: balance; }
.passung-nein .haken-liste li::before { background: color-mix(in srgb, var(--fg-2) 14%, transparent); }
.passung-nein .haken-liste li::after { left: 6px; top: calc(.32em + 9.5px); width: 8px; height: 0; border-right: 0; border-bottom: 1.6px solid var(--fg-2); transform: none; }

.punkt-karten { list-style: none; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Sechs Karten: am Desktop drei Spalten, damit zwei volle Reihen entstehen statt vier und zwei */
@media (min-width: 1100px) { .punkt-karten--3 { grid-template-columns: repeat(3, 1fr); } }
/* Vier Karten mit längeren Texten (spalten: 2): zwei mal zwei statt drei und eine */
@media (min-width: 640px) { .punkt-karten--2 { grid-template-columns: repeat(2, 1fr); } }
.punkt-karten li { background: var(--karte); border: 1px solid var(--linie-s); border-radius: var(--radius); padding: 26px; }
.punkt-karten h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 450; margin-bottom: .5em; text-wrap: balance; }
.punkt-karten p { color: var(--fg-2); }
/* Handy: schlichte Absätze mit Trennlinie statt Kästen, das ist ruhiger und kürzer */
@media (max-width: 639px) {
  .punkt-karten { gap: 0; }
  .punkt-karten li { background: none; border: 0; border-top: 1px solid var(--linie-s); border-radius: 0; padding: 18px 0 20px; }
  .punkt-karten li:last-child { padding-bottom: 0; }
  .punkt-karten h3 { font-size: 1.22rem; margin-bottom: .35em; }
}

/* Szenen */
.szenen-raster { list-style: none; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
/* Sechs Szenen: am Desktop drei Spalten, damit zwei volle Reihen entstehen statt vier und zwei */
@media (min-width: 1100px) { .szenen-raster--3 { grid-template-columns: repeat(3, 1fr); } }
.szene { background: var(--karte); border: 1px solid var(--linie-s); border-radius: var(--radius); padding: clamp(22px, 2vw, 30px); }
.szene-nr { font: 500 .74rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 14px; }
.szene-titel { font-family: var(--serif); font-size: 1.3rem; line-height: 1.25; margin-bottom: .55em; font-weight: 420; text-wrap: balance; }
.szene p:not(.szene-nr) { color: var(--fg-2); }
/* Handy: Szenen-Karten etwas enger, sie stehen dort alle untereinander */
@media (max-width: 639px) {
  .szenen-raster { gap: 12px; }
  .szene { padding: 18px 18px 20px; }
  .szene-nr { margin-bottom: 10px; }
  .szene-titel { font-size: 1.22rem; margin-bottom: .45em; }
}

/* Anwählbare Szenen (Startseite): «Was dazu passt» öffnet unter der Reihe einen Kasten mit Film, Orientierung und Coaching.
   Der Listenpunkt selbst zeichnet keinen Kasten (display: contents), damit Karte und Vorschläge je einen eigenen Platz im
   Raster bekommen; dense füllt die Reihe über dem Kasten wieder auf. Ohne JavaScript stehen alle Vorschläge offen, der Knopf fehlt. */
.szenen-raster--wahl { grid-auto-flow: dense; }
.szene--wahl { display: contents; }
.szene-karte { display: flex; flex-direction: column; background: var(--karte); border: 1px solid var(--linie-s); border-radius: var(--radius); padding: clamp(22px, 2vw, 30px); transition: border-color .3s; }
.js .szene-karte { cursor: pointer; }
.js .szene-karte:not(.ist-gewaehlt):hover { border-color: color-mix(in srgb, var(--eyebrow) 55%, var(--linie-s)); }
/* Angewählte Szene und ihr Kasten tragen dasselbe hellere Indigo, damit man sieht, was zusammengehört. Schrift und Linien
   sind darauf etwas kräftiger, damit der Kontrast auf dem helleren Grund hält. */
.szene-karte.ist-gewaehlt, .szene-passt { --fg-2: rgba(236, 230, 216, .86); --eyebrow: #c3caff; --linie-s: rgba(236, 230, 216, .24); background: #343b7c; border-color: #8490ea; }
.szene-wahl { display: none; align-self: flex-start; align-items: center; gap: .6em; margin: auto 0 -10px; padding: 18px 0 10px; background: none; border: 0; font: 500 .95rem/1.3 var(--sans); color: var(--link); cursor: pointer; }
.js .szene-wahl { display: inline-flex; }
.szene-wahl::after { content: ""; width: .5em; height: .5em; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-25%) rotate(45deg); transition: transform .3s; }
.szene-wahl[aria-expanded="true"]::after { transform: translateY(15%) rotate(-135deg); }
.szene-passt { grid-column: 1 / -1; border-width: 1px; border-style: solid; border-radius: var(--radius); padding: clamp(20px, 2vw, 30px); scroll-margin-bottom: 20px; }
.js .szene-passt:not(.ist-offen) { display: none; }
.js .szene-passt.ist-offen { animation: passt-ein .45s ease both; }
@keyframes passt-ein { from { opacity: 0; transform: translateY(-6px); } }
.szene-passt-titel { font-family: var(--serif); font-size: 1.3rem; line-height: 1.25; font-weight: 420; margin-bottom: 1.1rem; }
.passt-karten { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.passt-karte a { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; align-items: start; height: 100%; padding: 14px; background-color: rgba(255, 255, 255, .06); border: 1px solid var(--linie-s); border-radius: 14px; color: var(--fg); text-decoration: none; transition: border-color .3s, background-color .3s; }
.passt-karte a:hover { border-color: color-mix(in srgb, var(--eyebrow) 55%, var(--linie-s)); background-color: rgba(255, 255, 255, .11); text-decoration: none; }
.passt-bild { display: block; border-radius: 10px; overflow: hidden; }
/* Ausschnitt und Helligkeit je Bild kommen als --nah-… aus PASST_BILD (site.js) */
.passt-bild img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: var(--nah-lage, 50% 50%); transform: scale(var(--nah, 1)); transform-origin: var(--nah-ort, 50% 50%); filter: brightness(var(--nah-hell, 1)); }
.passt-text { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.passt-text .karte-kicker { line-height: 1.35; }
.passt-titel { font-family: var(--serif); font-size: 1.2rem; line-height: 1.2; font-weight: 420; }
.passt-beschreibung { color: var(--fg-2); font-size: .93rem; }
.szene-passt-gespraech { margin-top: 1.1rem; }
@media (max-width: 639px) {
  .szene-karte { padding: 18px 18px 20px; }
  .szene-passt { padding: 18px; }
  /* Am Handy steht der Kasten direkt unter seiner Szene, die Nummer braucht es dort nicht nochmals */
  .szene-passt > .szene-nr { display: none; }
  .passt-karte a { grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; padding: 12px; }
}

/* Split */
.split-raster { display: grid; gap: clamp(28px, 4vw, 72px); align-items: center; }
.split-medien img, .split-medien .film-video { border-radius: var(--radius-gross); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bild-text { font-size: .85rem; color: var(--fg-2); margin-top: 10px; }
@media (min-width: 900px) {
  .split-raster { grid-template-columns: 1fr 1fr; }
  .split--umgekehrt .split-medien { order: 2; }
}

/* Passung */
.passung-raster { display: grid; gap: 16px; }
.passung-karte { background: var(--karte); border: 1px solid var(--linie-s); border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); }
.passung-karte h3 { font-family: var(--serif); font-size: 1.4rem; margin-bottom: 1.2rem; font-weight: 420; }
.passung-ja { border-top: 3px solid var(--eyebrow); }
@media (min-width: 900px) { .passung-raster { grid-template-columns: 1fr 1fr; } }

/* Angebot und Preis */
.angebot-raster { display: grid; gap: clamp(32px, 5vw, 80px); align-items: start; }
.angebot-text .haken-liste { margin-top: 8px; }
@media (min-width: 980px) { .angebot-raster { grid-template-columns: 1.15fr .85fr; } .angebot-preis { position: sticky; top: calc(var(--kopf-h) + 24px); } }
.preis-karte { background: var(--nacht-2); color: var(--papier); border-radius: var(--radius-gross); padding: clamp(26px, 3vw, 40px); box-shadow: var(--schatten); background-image: radial-gradient(120% 80% at 100% 0%, rgba(55, 66, 184, .45), rgba(55, 66, 184, 0) 60%); }
.preis-name { font-family: var(--serif); font-size: 1.35rem; line-height: 1.25; margin-bottom: 1.4rem; }
.preis-label { font: 500 .72rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--akzent-licht); margin-bottom: .6rem; }
.preis-betrag { font-family: var(--serif); font-size: clamp(2.4rem, 2rem + 1.6vw, 3.3rem); line-height: 1; margin-bottom: .5rem; color: #fff; }
.preis-betrag--klein { font-size: 1.65rem; }
.preis-rate { font-size: .93rem; color: rgba(244, 241, 234, .78); }
.preis-hinweis { font-size: .82rem; color: rgba(244, 241, 234, .64); margin-top: .6rem; }
.preis-paket { margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px solid rgba(244, 241, 234, .14); }
.preis-liste { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 8px; font-size: .94rem; color: rgba(244, 241, 234, .86); }
.preis-liste li { padding-left: 24px; position: relative; }
.preis-liste li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 5px; height: 9px; border-right: 1.6px solid var(--akzent-licht); border-bottom: 1.6px solid var(--akzent-licht); transform: rotate(40deg); }
.preis-fuss { font-size: .8rem; color: rgba(244, 241, 234, .6); margin-top: 1rem; }
.preis-karte--anfrage .knopf-reihe { margin-top: 1.4rem; }
.preis-karte--anfrage .btn { margin-top: 1.6rem; }
/* Nicht enthalten (Preiskarte): wie die Liste darüber, aber mit kurzem Strich statt Haken */
.preis-nicht { margin: -.4rem 0 1.5rem; padding-top: 1.1rem; border-top: 1px solid rgba(244, 241, 234, .14); }
.preis-nicht .minus-liste { font-size: .94rem; color: rgba(244, 241, 234, .86); }
.minus-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.minus-liste li { position: relative; padding-left: 24px; }
.minus-liste li::before { content: ""; position: absolute; left: 1px; top: .72em; width: 10px; border-top: 1.6px solid currentColor; opacity: .7; }

/* Ablauf: Schritte untereinander an einer Linie. Ohne Skript, im Ruhemodus und bei reduzierter Bewegung
   ist die Linie ganz gefüllt; sonst setzt site.js je Schritt --f (0 bis 1) und .ist-erreicht. */
/* Ablauf: links ein breites Band, das sich beim Scrollen füllt, daneben grosse Ziffern. Band und Ziffern tragen die
   Farbe des Knopfs «Erstgespräch vereinbaren» darunter (hell Tiefblau, dunkel Sand). Noch nicht erreichte Schritte
   sind an Ziffer und Titel gedämpft, der Fliesstext bleibt immer voll lesbar. Ziffer, Titel und Fliesstext stehen auf
   einer gemeinsamen Grundlinie. */
.ablauf-liste { --band: 10px; --spalte: clamp(72px, 9.5vw, 126px); --oben: clamp(26px, 3vw, 40px); --strahl: var(--tief); list-style: none; padding: 0; position: relative; display: grid; max-width: 1040px; }
[data-theme="dunkel"] .ablauf-liste { --strahl: var(--warm); }
.ablauf-schritt { --f: 1; position: relative; display: grid; grid-template-columns: var(--spalte) 1fr; align-content: start; align-items: baseline; padding: var(--oben) 0; }
.ablauf-schritt::before, .ablauf-schritt::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--band); }
.ablauf-schritt::before { background: color-mix(in srgb, var(--fg) 16%, transparent); }
.ablauf-schritt::after { background: var(--strahl); transform: scaleY(var(--f)); transform-origin: top; }
.ablauf-schritt:first-child::before, .ablauf-schritt:first-child::after { border-radius: 5px 5px 0 0; }
.ablauf-schritt:last-child::before, .ablauf-schritt:last-child::after { border-radius: 0 0 5px 5px; }
.ablauf-nr { justify-self: start; margin-left: clamp(24px, 3vw, 40px); font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 1.6rem + 1.5vw, 2.9rem); line-height: .85; color: var(--strahl); transition: color .5s ease; }
html:not([data-ruhe="an"]) .ablauf-liste.ist-lauf .ablauf-schritt:not(.ist-erreicht) .ablauf-nr { color: color-mix(in srgb, var(--fg) 24%, transparent); }
html:not([data-ruhe="an"]) .ablauf-liste.ist-lauf .ablauf-schritt:not(.ist-erreicht) h3 { color: color-mix(in srgb, var(--fg) 60%, transparent); }
[data-ruhe="an"] .ablauf-schritt::after { transform: none; }
/* Der Knopf unter dem Ablauf ist das Ziel des Bandes: Er füllt sich erst, wenn es nach dem letzten Schritt bei ihm
   ankommt. Unter dem Mauszeiger und mit Tastaturfokus ist er sofort gefüllt, ebenso im Ruhemodus und ohne Skript. */
.ablauf-liste + .knopf-reihe .btn { transition: background-color .5s ease, border-color .5s ease, color .5s ease, transform .2s; }
html:not([data-ruhe="an"]) .ablauf-liste.ist-lauf:not(.ist-am-ziel) + .knopf-reihe .btn:not(:hover):not(:focus-visible) { background: transparent; border-color: color-mix(in srgb, var(--fg) 30%, transparent); color: var(--fg); }
.ablauf-schritt h3 { font-family: var(--serif); font-size: clamp(1.32rem, 1.2rem + .5vw, 1.6rem); font-weight: 450; margin-bottom: .45em; transition: color .5s ease; }
.ablauf-schritt p { color: var(--fg-2); }
@media (min-width: 980px) {
  .ablauf-schritt > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: baseline; }
  .ablauf-schritt h3 { margin-bottom: 0; }
}
/* Module */
.modul-liste { list-style: none; padding: 0; display: grid; gap: clamp(20px, 3vw, 32px); }
.modul { display: grid; gap: 0; background: rgba(255, 255, 255, .035); border: 1px solid rgba(244, 241, 234, .1); border-radius: var(--radius-gross); overflow: hidden; }
.modul-bild img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.modul-text { padding: clamp(22px, 3vw, 40px); }
.modul-nr { font: 500 .74rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--akzent-licht); margin-bottom: 12px; }
.modul-titel { font-family: var(--serif); font-size: clamp(1.55rem, 1.3rem + 1vw, 2.2rem); line-height: 1.12; color: #fff; }
.modul-sub { color: rgba(236, 230, 216, .78); margin-top: .5rem; }
.modul-details { margin-top: 1.2rem; }
.modul-details summary { cursor: pointer; list-style: none; display: inline-flex; gap: 10px; align-items: center; color: var(--warm); font-weight: 500; padding: 6px 0; }
.modul-details summary::-webkit-details-marker { display: none; }
.modul-details summary::before { content: "+"; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid currentColor; border-radius: 50%; font-size: 1rem; line-height: 1; }
.modul-details[open] summary::before { content: "–"; }
.modul-feld { margin-top: 1.2rem; }
/* Handy: Das Bild eines Moduls erscheint erst beim Aufklappen, zugeklappt bleiben alle sieben Module im Überblick.
   Gilt nur für Module mit «Mehr zu Modul …»; ohne :has()-Unterstützung bleiben die Bilder einfach sichtbar. */
@media (max-width: 639px) {
  .modul:has(.modul-details:not([open])) .modul-bild { display: none; }
  /* Kurzfassung ohne Aufklappen: kleines Bild links, damit alle sieben Module auf gut anderthalb Bildschirme passen */
  .modul--kompakt { grid-template-columns: 92px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 14px; }
  .modul--kompakt .modul-bild { border-radius: 10px; overflow: hidden; }
  .modul--kompakt .modul-bild img { aspect-ratio: 1; }
  /* Im kleinen Bild näher ans Motiv und die dunklen Räume aufgehellt (Werte je Modul: bildKlein in _module.json).
     !important, weil der Desktop-Ausschnitt als object-position direkt am Bild steht. */
  .modul--kompakt .modul-bild img[style*="--k-ort"] { object-position: var(--k-lage) !important; transform: scale(var(--k-zoom)); transform-origin: var(--k-ort); filter: brightness(var(--k-hell)); }
  .modul--kompakt .modul-text { padding: 0; }
  .modul--kompakt .modul-nr { margin-bottom: 8px; }
  .modul--kompakt .modul-titel { font-size: 1.35rem; }
  .modul--kompakt .modul-sub { font-size: .93rem; }
}
.modul-feld-label { font: 500 .72rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--akzent-licht); margin-bottom: .7rem; }
.modul-feld .prosa { font-size: .98rem; color: rgba(236, 230, 216, .86); }
/* Ausgeklappt wächst das Bild nicht mehr mit dem Text mit (das vergrösserte es bis zur Unschärfe).
   Es ist höchstens 720px hoch und bleibt beim Lesen unter der Kopfzeile stehen. */
@media (min-width: 900px) { .modul { grid-template-columns: .9fr 1.1fr; overflow: clip; } .modul-bild img { aspect-ratio: auto; height: 100%; max-height: min(calc(100vh - var(--kopf-h) - 1px), 720px); position: sticky; top: calc(var(--kopf-h) + 1px); } .modul:nth-child(even) .modul-bild { order: 2; } }

/* Deborah */
.deborah-raster { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; }
.deborah-bild { margin: 0; max-width: 460px; }
.deborah-bild img { border-radius: var(--radius-gross); aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.quali-liste { list-style: none; padding: 0; margin-top: 1.8rem; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.quali-liste li { border-top: 1px solid var(--linie-s); padding-top: 12px; display: grid; gap: 2px; }
.quali-liste strong { font-family: var(--serif); font-weight: 450; font-size: 1.2rem; line-height: 1.25; }
.quali-liste span { font-size: .9rem; color: var(--fg-2); }
@media (min-width: 900px) { .deborah-raster { grid-template-columns: .8fr 1.2fr; } }
/* Langer Text neben dem Porträt (Feld «bildFest»): Das Foto bleibt unter der Kopfzeile stehen, der Text läuft daneben weiter.
   Auf niedrigen Fenstern wird das Foto schmaler, damit es ganz im Bild bleibt. */
@media (min-width: 900px) {
  .deborah--fest .deborah-raster { align-items: start; }
  .deborah--fest .deborah-bild { position: sticky; top: calc(var(--kopf-h) + 40px); width: 100%; max-width: min(460px, calc((100vh - var(--kopf-h) - 80px) * .75)); }
}
/* Textteil vor dem Deborah-Text (Feld «davor»): am Desktop rechts neben dem Porträt, das über beide Teile reicht. Am Handy steht er vor dem Porträt.
   Als Sprungziel landet er auf der Höhe, auf der das stehende Porträt hält. */
.deborah-davor { scroll-margin-top: 24px; }
@media (min-width: 900px) {
  .deborah--davor .deborah-bild { grid-column: 1; grid-row: 1 / span 2; }
  .deborah--davor .deborah-davor { grid-column: 2; grid-row: 1; }
  .deborah--davor .deborah-text { grid-column: 2; grid-row: 2; }
}

/* Wege (Besucherwege) und Karten */
.wege-raster, .karten-raster { list-style: none; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
@media (min-width: 1100px) { .wege-raster { grid-template-columns: repeat(4, 1fr); } .karten-raster--3 { grid-template-columns: repeat(3, 1fr); } .karten-raster--2 { grid-template-columns: repeat(2, 1fr); } .karten-raster--4 { grid-template-columns: repeat(4, 1fr); } }
/* Zwei Spalten schon ab 800px fest (sonst drei plus eins bei vier Karten); Bild im Querformat, sonst werden die grossen Karten sehr hoch */
@media (min-width: 800px) { .karten-raster--2 { grid-template-columns: repeat(2, 1fr); } .karten-raster--2 .karte-bild img { aspect-ratio: 16 / 9; } }
/* Eine einzelne Karte: breit, Bild links und Text rechts */
.karten-raster--1 { grid-template-columns: 1fr; }
@media (min-width: 800px) {
  .karten-raster--1 .karte-link { flex-direction: row; }
  .karten-raster--1 .karte-bild { flex: 0 0 46%; }
  .karten-raster--1 .karte-bild img { height: 100%; aspect-ratio: 16 / 9; }
  .karten-raster--1 .karte-text { justify-content: center; padding: clamp(24px, 3.5vw, 48px); }
  .karten-raster--1 .karte-titel { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
  .karten-raster--1 .karte-mehr { margin-top: 8px; }
}
.weg-link, .karte-link { display: flex; flex-direction: column; height: 100%; background: var(--karte); border: 1px solid var(--linie-s); border-radius: var(--radius); overflow: hidden; color: var(--fg); text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s; }
.weg-link:hover, .karte-link:hover { transform: translateY(-3px); box-shadow: var(--schatten); border-color: color-mix(in srgb, var(--eyebrow) 40%, var(--linie-s)); text-decoration: none; }
.weg-bild img, .karte-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s; }
.weg-link:hover img, .karte-link:hover img { transform: scale(1.03); }
.weg-bild, .karte-bild { overflow: hidden; display: block; }
.weg-text, .karte-text { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; flex: 1; }
.weg-label, .karte-kicker { font: 500 .72rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--eyebrow); }
/* Etwas engere Sperrung, damit «Für Eltern · teilweise buchbar» in vier Spalten auf eine Zeile passt */
.weg-label { letter-spacing: .14em; }
.weg-titel, .karte-titel { font-family: var(--serif); font-size: 1.38rem; line-height: 1.2; font-weight: 420; }
.weg-beschreibung, .karte-beschreibung { color: var(--fg-2); font-size: .97rem; }
.weg-mehr, .karte-mehr { margin-top: auto; padding-top: 8px; font-weight: 500; color: var(--link); font-size: .95rem; }
.weg-mehr::after, .karte-mehr::after { content: "\00a0→"; }
/* Handy: Wege-Karten kompakt, kleines Bild links neben dem Text (spart auf der Startseite rund anderthalb Bildschirme).
   Der Link «Zum …» läuft unter Bild und Text über die ganze Kartenbreite, damit er auf einer Zeile bleibt. */
@media (max-width: 639px) {
  .weg-link { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 18px 16px; }
  /* Die Zeile «Für … · buchbar» läuft über die ganze Kartenbreite, sonst bricht «teilweise buchbar» um */
  .weg-label { grid-column: 1 / -1; grid-row: 1; margin-bottom: 12px; }
  .weg-bild { grid-column: 1; grid-row: 2 / span 2; border-radius: 10px; }
  .weg-bild img { aspect-ratio: 1; }
  /* Kinobilder (Feld bildNah: Ort der Leinwand): im kleinen Bild näher heran, sonst ist die Szene nicht zu erkennen */
  .weg-bild img[style*="--nah-ort"], .weg-link:hover .weg-bild img[style*="--nah-ort"] { transform: scale(var(--nah, 1.6)); transform-origin: var(--nah-ort); object-position: var(--nah-lage, 50% 50%); filter: brightness(var(--nah-hell, 1)); }
  .weg-text { display: contents; }
  .weg-titel, .weg-beschreibung { grid-column: 2; }
  .weg-titel { font-size: 1.2rem; margin-bottom: 6px; }
  .weg-beschreibung { font-size: .93rem; }
  /* Fusszeile der Karte: Linktext links, Pfeil am rechten Rand, feine Linie darüber */
  .weg-link { padding-bottom: 14px; }
  .weg-mehr { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie-s); }
  .weg-mehr::after { content: "\2192"; }

  /* Karten als schlichte Liste (Feld mobil: "liste"): ohne Bild und Beschreibung, nur Thema, Titel und Pfeil */
  .karten-raster--liste-mobil { gap: 0; border-top: 1px solid var(--linie-s); }
  .karten-raster--liste-mobil .karte-bild, .karten-raster--liste-mobil .karte-beschreibung { display: none; }
  .karten-raster--liste-mobil .karte-link { background: none; border: 0; border-bottom: 1px solid var(--linie-s); border-radius: 0; }
  .karten-raster--liste-mobil .karte-link:hover { transform: none; box-shadow: none; }
  .karten-raster--liste-mobil .karte-text { position: relative; gap: 7px; padding: 16px 34px 16px 0; }
  .karten-raster--liste-mobil .karte-titel { font-size: 1.2rem; }
  .karten-raster--liste-mobil .karte-mehr { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; font-size: 0; }
  .karten-raster--liste-mobil .karte-mehr::after { content: "\2192"; font-size: 1.05rem; }

  /* Karten kompakt (Feld mobil: "kompakt"): kleines Bild links, daneben Titel und Beschreibung.
     Kinobilder rücken näher an die Leinwand; der Ort lässt sich je Karte mit bildNah einstellen. */
  .karten-raster--kompakt-mobil { gap: 12px; }
  .karten-raster--kompakt-mobil .karte-link { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 16px; }
  .karten-raster--kompakt-mobil .karte-bild { grid-column: 1; grid-row: 1 / span 3; border-radius: 10px; }
  .karten-raster--kompakt-mobil .karte-bild img, .karten-raster--kompakt-mobil .karte-link:hover .karte-bild img { aspect-ratio: 1; transform: scale(var(--nah, 1.6)); transform-origin: var(--nah-ort, 50% 30%); object-position: var(--nah-lage, 50% 50%); filter: brightness(var(--nah-hell, 1)); }
  .karten-raster--kompakt-mobil .karte-text { display: contents; }
  .karten-raster--kompakt-mobil .karte-kicker, .karten-raster--kompakt-mobil .karte-titel, .karten-raster--kompakt-mobil .karte-beschreibung { grid-column: 2; }
  .karten-raster--kompakt-mobil .karte-kicker { margin-bottom: 6px; line-height: 1.35; }
  .karten-raster--kompakt-mobil .karte-titel { font-size: 1.2rem; margin-bottom: 6px; }
  .karten-raster--kompakt-mobil .karte-beschreibung { font-size: .93rem; }
  .karten-raster--kompakt-mobil .karte-mehr { display: none; }
  /* Karten mit eigener Handy-Fassung (bildNah.bild, als <picture>): Ausschnitt und Aufhellung aus bildStil gelten nur ab Tablet */
  .weg-bild picture img, .karte-bild picture img { object-position: var(--nah-lage, 50% 50%) !important; filter: brightness(var(--nah-hell, 1)) !important; }
}

/* Telefonnummern am Handy: als getönte Fläche mit grösserer Tippfläche, damit sich 143, 144 oder 147 sicher antippen lassen */
@media (max-width: 639px) {
  main a[href^="tel:"] { display: inline-block; padding: 4px 12px; margin: 3px 1px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--eyebrow) 13%, transparent); text-decoration: none; font-weight: 500; line-height: 1.35; white-space: nowrap; }
}

/* Filmplakate */
.plakat-raster { list-style: none; padding: 0; display: grid; gap: 18px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .plakat-raster { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .plakat-raster { grid-template-columns: repeat(6, 1fr); } .plakat-raster--artikel { grid-template-columns: repeat(3, 1fr); } .plakat-raster--alle { grid-template-columns: repeat(4, 1fr); } }
/* Handy: wenige Plakate als eine Reihe zum seitlichen Wischen statt drei Reihen untereinander.
   Die Reihe läuft bis an den Bildschirmrand, das angeschnittene dritte Plakat zeigt, dass es weitergeht. */
@media (max-width: 639px) {
  .plakat-raster--reihe, .plakat-raster--artikel { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: calc(-1 * clamp(20px, 4vw, 40px)); padding-inline: clamp(20px, 4vw, 40px); scroll-padding-inline: clamp(20px, 4vw, 40px); padding-bottom: 6px; }
  .plakat-raster--reihe::-webkit-scrollbar, .plakat-raster--artikel::-webkit-scrollbar { display: none; }
  .plakat-raster--reihe > .plakat, .plakat-raster--artikel > .plakat { flex: 0 0 42%; scroll-snap-align: start; }
  /* Die Reihe darf sich nur seitlich bewegen. Plakate ausserhalb des Bildschirms warten sonst 16px tiefer
     auf ihr Einblenden und machen die Reihe auch senkrecht verschiebbar. */
  .plakat-raster--reihe, .plakat-raster--artikel { overflow-y: hidden; }
  .js .plakat-raster--reihe > .plakat.zeigen, .js .plakat-raster--artikel > .plakat.zeigen { transform: none; }
  /* Im Artikel gelten sonst Einzug und Abstände der Textlisten (.prosa ul, .prosa li) */
  .prosa .plakat-raster--artikel { margin-inline: calc(-1 * clamp(20px, 4vw, 40px)); padding-inline: clamp(20px, 4vw, 40px); margin-bottom: 1.6em; }
  .prosa .plakat-raster--artikel > .plakat { padding-left: 0; margin-bottom: 0; }
}
/* Filmübersicht mit 28 Plakaten: vier bzw. sieben Spalten, damit keine Reihe unvollständig bleibt */
@media (min-width: 640px) { .plakat-raster--7 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .plakat-raster--7 { grid-template-columns: repeat(7, 1fr); } .plakat-raster--7 .plakat-titel { font-size: 1.06rem; } .plakat-raster--7 .plakat-tagline { font-size: .88rem; } }
.plakat a { display: grid; gap: 6px; color: inherit; text-decoration: none; }
/* Im Artikel gilt sonst die Regel für Linklisten (.prosa li > a): Titel und Motto klebten aneinander und waren unterstrichen */
.prosa .plakat > a { display: grid; border-bottom: 0; padding: 0; }
.plakat-bild { position: relative; display: block; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .6); }
.plakat-bild img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; transition: transform .6s; }
.plakat a:hover img { transform: scale(1.04); }
.plakat-video { position: absolute; left: 10px; top: 10px; font: 500 .66rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; background: rgba(18, 19, 44, .7); color: var(--papier); padding: 6px 8px; border-radius: 999px; }
.plakat-video::before { content: "▶ "; font-size: .6rem; }
.plakat-titel { font-family: var(--serif); font-size: 1.18rem; line-height: 1.2; margin-top: 6px; }
.plakat-tagline { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: .95rem; color: var(--fg-2); line-height: 1.35; }
.plakat--klein .plakat-titel { font-size: 1.02rem; }

/* FAQ */
.faq-liste { border-top: 1px solid var(--linie-s); }
.faq-eintrag { border-bottom: 1px solid var(--linie-s); }
.faq-eintrag summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-family: var(--serif); font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); line-height: 1.3; }
.faq-eintrag summary::-webkit-details-marker { display: none; }
.faq-eintrag summary::after { content: ""; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--linie-s); background: linear-gradient(var(--fg), var(--fg)) center / 10px 1.5px no-repeat, linear-gradient(var(--fg), var(--fg)) center / 1.5px 10px no-repeat; transition: transform .2s; }
.faq-eintrag[open] summary::after { background: linear-gradient(var(--fg), var(--fg)) center / 10px 1.5px no-repeat; }
.faq-eintrag .prosa { padding: 0 0 24px; color: var(--fg-2); }

/* CTA-Band */
.cta-band .sek-kopf { margin-bottom: 0; }
.cta-innen { max-width: 820px; margin: 0 auto; }
.cta-schluss { margin: 2.2rem 0 0; text-align: center; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.2rem, 1.1rem + .5vw, 1.5rem); color: var(--fg-2); }

/* Grenzen */
.grenzen-box { border: 1px solid var(--linie-s); border-radius: var(--radius-gross); padding: clamp(24px, 4vw, 48px); background: var(--karte); }
.grenzen-box .sek-kopf { margin-bottom: 1.4rem; }
.grenzen-box .h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2.1rem); }

/* Zitat */
.zitat { margin: 0; text-align: center; }
.zitat blockquote { margin: 0; }
.zitat p { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1.3; color: #fff; text-wrap: balance; }
.zitat figcaption { margin-top: 1.4rem; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent-licht); }
.zitat-sek { padding-block: clamp(64px, 8vw, 120px); }

/* Fakten */
.fakten-liste { list-style: none; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.fakten-liste li { border-top: 2px solid var(--eyebrow); padding-top: 14px; display: grid; gap: 4px; }
.fakten-liste strong { font-family: var(--serif); font-weight: 420; font-size: 1.45rem; line-height: 1.2; }
.fakten-liste span { color: var(--fg-2); font-size: .95rem; }
/* Zusatz in Klammern (z. B. «(Diploma of Advanced Studies)»): steht neben dem Titel, wenn er ganz Platz hat, sonst als Ganzes auf der nächsten Zeile */
.fakten-liste strong .zusatz, .quali-liste strong .zusatz { display: inline-block; color: inherit; font-size: inherit; }

/* Video */
.film-video { position: relative; overflow: hidden; background: var(--nacht); }
.film-video video { width: 100%; height: 100%; object-fit: cover; }
/* Standbild unter dem Video; das Video blendet erst ein, wenn sein erstes Bild gezeichnet ist (site.js setzt .bereit).
   isolation hält das Standbild (z-index -1) innerhalb des Kastens, der dunkle Verlauf (::after) bleibt über beiden. */
.film-video { isolation: isolate; }
.film-video-standbild { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.film-video video { display: block; opacity: 0; transition: opacity .7s ease; }
.film-video.bereit video { opacity: 1; }
.film-video-pause { position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(244, 241, 234, .4); background: rgba(18, 19, 44, .55); color: var(--papier); display: none; place-items: center; }
.film-video.laeuft .film-video-pause, .film-video.pausiert .film-video-pause { display: grid; }
.pause-zeichen { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.film-video.pausiert .pause-zeichen { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.film-video-hinweis { position: absolute; left: 14px; bottom: 14px; z-index: 2; font: 500 .66rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 241, 234, .82); background: rgba(18, 19, 44, .5); padding: 6px 9px; border-radius: 999px; }
.hero .film-video-hinweis { left: auto; right: 64px; }
@media (min-width: 900px) { .hero .film-video-pause { bottom: 24px; right: 24px; } .hero .film-video-hinweis { bottom: 34px; right: 76px; } }
.split-video { border-radius: var(--radius-gross); aspect-ratio: 4 / 3; }

.video-band { position: relative; isolation: isolate; min-height: min(80vh, 720px); display: flex; align-items: flex-end; color: var(--papier); background: var(--nacht); }
.video-band .film-video { position: absolute; inset: 0; z-index: -1; }
.video-band .film-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18, 19, 44, .94) 0%, rgba(18, 19, 44, .45) 55%, rgba(18, 19, 44, .2) 100%); pointer-events: none; }
.video-band .film-video-hinweis { top: 18px; bottom: auto; }
.video-band-text { padding-block: 120px 72px; max-width: 1320px; }
/* Feld textAbTablet: Am Handy stehen nur Zeile, Titel und Knopf über dem Film. Der Absatz entfällt, der dunkle
   Verlauf endet schon bei 42 Prozent der Höhe, damit Gesicht und Bildmitte frei bleiben. */
@media (max-width: 639px) {
  .video-band--text-ab-tablet .film-video::after { background: linear-gradient(0deg, rgba(18, 19, 44, 1) 0%, rgba(18, 19, 44, .9) 26%, rgba(18, 19, 44, 0) 42%); }
  .video-band--text-ab-tablet .video-band-text { padding-block: 40px 44px; }
  .video-band--text-ab-tablet .video-band-text > p:not(.eyebrow) { display: none; }
}
.video-band-text .h2 { max-width: 20ch; color: #fff; }
.video-band-text p { max-width: 56ch; color: rgba(244, 241, 234, .84); margin-top: 1rem; font-size: 1.1rem; }

/* Teaser */
.teaser-raster { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
.teaser-bild img { border-radius: var(--radius-gross); aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
@media (min-width: 900px) { .teaser-raster { grid-template-columns: 1fr 1fr; } }

/* ---------- Wissensseiten (Artikel) ---------- */
.artikel-wrap { background: var(--bg); padding-block: clamp(40px, 6vw, 88px); }
.artikel-raster { display: grid; gap: 40px; }
.artikel { max-width: 760px; min-width: 0; }
.artikel-seite { display: none; }
@media (min-width: 1080px) {
  .artikel-raster { grid-template-columns: 270px minmax(0, 1fr); gap: 72px; }
  /* Seitenleiste: Bei langem Inhaltsverzeichnis rollt nur die Liste, der Kasten «Passendes Angebot» bleibt darunter sichtbar */
  .artikel-seite { display: flex; flex-direction: column; position: sticky; top: calc(var(--kopf-h) + 28px); align-self: start; max-height: calc(100vh - var(--kopf-h) - 56px); }
  .artikel-seite .toc { display: flex; flex-direction: column; min-height: 0; }
  .artikel-seite .toc ol { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .artikel-seite .seite-angebot { flex: none; margin-top: 20px; }
}
.toc-titel { font: 500 .72rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 12px; }
.toc ol { list-style: none; padding: 0; display: grid; gap: 2px; border-left: 1px solid var(--linie-s); }
.toc a { display: flex; gap: 10px; padding: 6px 12px; margin-left: -1px; border-left: 2px solid transparent; color: var(--fg-2); text-decoration: none; font-size: .9rem; line-height: 1.35; }
.toc a:hover { color: var(--fg); }
.toc a.ist-aktiv { color: var(--fg); border-left-color: var(--eyebrow); }
.toc-nr { font-variant-numeric: tabular-nums; opacity: .9; font-size: .8rem; padding-top: 1px; }
/* Inhaltsverzeichnis zum Aufklappen, solange die Seitenleiste ausgeblendet ist (unter 1080px) */
.toc-mobil { border: 1px solid var(--linie-s); border-radius: var(--radius); background: var(--karte); margin: 0 0 44px; }
.kurz-box + .toc-mobil { margin-top: calc(16px - clamp(40px, 5vw, 64px)); }
.toc-mobil summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; min-height: 56px; cursor: pointer; font: 500 .74rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--eyebrow); }
.toc-mobil summary::-webkit-details-marker { display: none; }
.toc-mobil-zahl { display: flex; align-items: center; gap: 10px; letter-spacing: .02em; text-transform: none; font-size: .9rem; color: var(--fg-2); }
.toc-mobil-zahl::after { content: "+"; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--linie-s); border-radius: 50%; font-size: 1rem; line-height: 1; color: var(--fg); }
.toc-mobil[open] .toc-mobil-zahl::after { content: "–"; }
.toc-mobil ol { list-style: none; margin: 0; padding: 0 18px 10px; display: grid; }
.toc-mobil li { border-top: 1px solid var(--linie-s); }
.toc-mobil a { display: flex; gap: 12px; padding: 11px 0; color: var(--fg); text-decoration: none; font-size: .98rem; line-height: 1.35; }
.toc-mobil .toc-nr { color: var(--eyebrow); font-size: .82rem; padding-top: 2px; }
@media (min-width: 1080px) { .toc-mobil { display: none; } }
.seite-angebot { margin-top: 28px; padding: 20px; border-radius: var(--radius); background: var(--bg-2); display: grid; gap: 10px; }
.seite-angebot-label { font: 500 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--eyebrow); margin: 0; }
.seite-angebot-titel { font-family: var(--serif); font-size: 1.15rem; line-height: 1.25; margin: 0 0 6px; }
.seite-angebot .btn-primaer { min-height: 44px; font-size: .92rem; }
.seite-angebot .btn-text { justify-self: start; font-size: .9rem; }
.kurz-box { background: var(--bg-2); border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); margin-bottom: clamp(40px, 5vw, 64px); }
.kurz-titel { font: 500 .74rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 14px; }
.kurz-box ul { padding-left: 1.2em; display: grid; gap: 6px; }
.kurz-box li::marker { color: var(--eyebrow); }
.artikel-abschnitt { margin-bottom: clamp(48px, 6vw, 80px); }
.artikel-abschnitt .h3 { margin-bottom: 1.1rem; font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.2rem); }
.kicker { display: flex; gap: 12px; align-items: baseline; font: 500 .74rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 12px; text-wrap: balance; }
.kicker span { font-variant-numeric: tabular-nums; opacity: .88; }
.artikel-abschnitt--angebot { background: var(--nacht-2); color: #ece6d8; --fg: #ece6d8; --fg-2: rgba(236, 230, 216, .8); --link: #b7bffd; --eyebrow: var(--akzent-licht); --linie-s: rgba(236, 230, 216, .16); padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-gross); }
.artikel-abschnitt--angebot .btn-primaer { background: var(--warm); color: var(--nacht); }
.artikel-abschnitt--grenzen { border: 1px solid var(--linie-s); border-radius: var(--radius-gross); padding: clamp(22px, 3.5vw, 40px); }
.inline-angebot { margin: 0 0 clamp(48px, 6vw, 80px); padding: 24px 26px; border-radius: var(--radius); border: 1px solid var(--linie-s); border-left: 3px solid var(--eyebrow); background: var(--karte); }
.inline-angebot-label { font: 500 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 8px; }
.inline-angebot-titel { font-family: var(--serif); font-size: 1.3rem; line-height: 1.25; margin-bottom: .4em; text-wrap: balance; }
.inline-angebot-titel a { color: var(--fg); text-decoration: none; }
.inline-angebot p { color: var(--fg-2); }
.inline-angebot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: .6em; }
.inline-angebot-links a { font-weight: 500; }
.link-liste { list-style: none; padding: 0; display: grid; gap: 8px; margin-top: 1.2rem; }
/* Im Artikel gilt sonst der Einzug der Textlisten (.prosa ul, .prosa li): Die Liste steht bündig mit Überschrift und Filmreihe */
.prosa .link-liste { padding-left: 0; }
.prosa .link-liste li { padding-left: 0; margin-bottom: 0; }
/* Lange Linklisten am Desktop zweispaltig */
@media (min-width: 900px) { .link-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } }
.link-liste a { font-weight: 500; }
.link-liste a::after { content: " →"; }

/* ---------- Filmseiten ---------- */
.film-hero { position: relative; isolation: isolate; background: var(--nacht); color: var(--papier); overflow: hidden; }
.film-hero > .film-video { position: absolute; inset: 0; z-index: -2; }
.film-hero > .film-video::after, .film-hero-grund::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 19, 44, .96) 10%, rgba(18, 19, 44, .76) 60%, rgba(18, 19, 44, .55)); }
.film-hero-grund { position: absolute; inset: -40px; z-index: -2; background-size: cover; background-position: center; filter: blur(30px) saturate(.9); opacity: .55; }
.film-hero-raster { display: grid; gap: 32px; align-items: center; padding-block: 48px 56px; }
.film-hero-plakat { max-width: 260px; }
.film-hero-plakat img { border-radius: 14px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); aspect-ratio: 2 / 3; object-fit: cover; }
.film-hero .h1 { color: #fff; }
.film-tagline { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.3; color: var(--warm); margin-top: 1rem; }
.film-vorspann { font-size: .95rem; color: rgba(244, 241, 234, .74); margin-top: 1rem; }
.film-vorspann span { font: 500 .72rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--akzent-licht); margin-right: 6px; }
.film-hero .film-video-hinweis { left: auto; right: 64px; }
@media (min-width: 900px) { .film-hero-raster { grid-template-columns: minmax(220px, 340px) 1fr; gap: 64px; padding-block: 96px 104px; } .film-hero-plakat { max-width: none; } }
/* Filmseiten mit Video unter 900px: Der Film steht oben über die ganze Breite, unbeschnitten im Querformat und
   ohne dunklen Schleier. Das Plakat sitzt klein neben dem Titel, statt den Film zu verdecken. Im Ruhemodus läuft
   kein Video, dort bleibt das grosse Plakat. */
@media (max-width: 899px) {
  :root:not([data-ruhe="an"]) .film-hero--video > .film-video { position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 9; }
  :root:not([data-ruhe="an"]) .film-hero--video > .film-video::after { content: none; }
  :root:not([data-ruhe="an"]) .film-hero--video .film-video-hinweis { top: 14px; bottom: auto; left: 14px; right: auto; }
  :root:not([data-ruhe="an"]) .film-hero--video .film-hero-raster { display: block; padding-block: 20px 56px; }
  :root:not([data-ruhe="an"]) .film-hero--video .film-hero-plakat { float: left; width: 72px; margin: 4px 18px 14px 0; }
  :root:not([data-ruhe="an"]) .film-hero--video .film-hero-plakat img { border-radius: 6px; box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .8); }
  :root:not([data-ruhe="an"]) .film-hero--video .film-tagline { clear: both; margin-top: 0; }
}
/* Erster Bildschirm (ab 900px): Der Film-Hero füllt genau das Fenster unter
   der Kopfzeile. Polster und Plakat richten sich nach der Fensterhöhe, damit
   Plakat, Text und der Hinweis «Szenische Darstellung» auch bei flachen
   Fenstern (z. B. 1370 x 750) ganz sichtbar bleiben. Wird der Inhalt trotzdem
   höher als das Fenster, bleiben Hinweis und Pausenknopf am unteren Rand des
   ersten Bildschirms statt am Ende des Heros. */
@media (min-width: 900px) {
  .film-hero { --hero-fenster: calc(100vh - var(--kopf-h) - 1px); min-height: var(--hero-fenster); display: grid; align-items: center; }
  .film-hero-raster { grid-template-columns: minmax(200px, min(340px, calc((var(--hero-fenster) - 180px) * 2 / 3))) 1fr; padding-block: clamp(40px, 7vh, 96px) clamp(56px, 9vh, 104px); width: 100%; }
  .film-hero > .film-video .film-video-pause, .film-hero > .film-video .film-video-hinweis { bottom: calc(14px + max(0px, 100% - var(--hero-fenster))); }
  .hero--voll { min-height: calc(100vh - var(--kopf-h) - 1px); }
}
@supports (height: 100svh) { @media (min-width: 900px) { .film-hero { --hero-fenster: calc(100svh - var(--kopf-h) - 1px); } .hero--voll { min-height: calc(100svh - var(--kopf-h) - 1px); } } }
.film-kapitel { padding-block: clamp(48px, 6vw, 88px); background: var(--bg); }
/* Trennlinie nur so breit wie der Text, damit sie am Desktop nicht durch die Kapitelliste läuft (Entscheid Deborah 01.11.2026, Variante A) */
.film-kapitel > .mass { position: relative; }
.film-kapitel:not(:first-of-type) > .mass::before { content: ""; position: absolute; top: calc(-1 * clamp(48px, 6vw, 88px)); left: clamp(20px, 4vw, 40px); right: clamp(20px, 4vw, 40px); border-top: 1px solid var(--linie-s); }
.film-kapitel .h2 { margin-bottom: 1.2rem; }
.film-kapitel--warm { background: var(--bg-2); }
.kicker .kicker-von { opacity: .62; }
.film-abgrenzung { margin-top: 1.8rem; padding-top: 1.1rem; border-top: 1px solid var(--linie-s); font-size: .95rem; line-height: 1.55; color: var(--fg-2); max-width: 62ch; }

/* Orientierung beim Lesen (Variante C, Entscheid Deborah 01.11.2026): Lesezeit im Hero,
   ab 1100px Kapitelliste links, darunter schmale Leiste. Beide kleben nur innerhalb der Kapitel. */
.film-lesezeit { margin-top: .9rem; font: 500 .72rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 241, 234, .74); }
.film-lesezeit strong { font-weight: 500; color: #fff; }
.film-kapitel-liste { position: relative; }
.film-kapitel { scroll-margin-top: 64px; }
.film-nav { display: none; }
.film-nav ol, .film-uebersicht ol { list-style: none; margin: 0; padding: 0; }
.film-nav-nr { flex: none; min-width: 1.6em; font-variant-numeric: tabular-nums lining-nums; opacity: .7; }
@media (min-width: 1100px) {
  .film-kapitel { scroll-margin-top: 0; }
  .film-kapitel-liste .mass--text { margin-left: max(272px, calc(50% - 430px)); margin-right: auto; }
  /* bottom = unteres Polster des letzten Kapitels: Die Liste hört mit der letzten Frage auf, nicht erst am Ende der leeren Fläche darunter */
  .film-nav { display: block; position: absolute; top: 0; bottom: clamp(48px, 6vw, 88px); left: max(24px, calc(50% - 430px - 252px)); width: 216px; z-index: 2; pointer-events: none; }
  .film-nav-innen { position: sticky; top: calc(var(--kopf-h) + 40px); padding-top: clamp(48px, 6vw, 88px); pointer-events: auto; }
  .film-leiste { display: none; }
}
.film-nav-titel { margin: 0 0 .25rem; font: 500 .72rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--eyebrow); }
.film-nav-zeit { margin: 0 0 1rem; font-size: .88rem; line-height: 1.4; color: var(--fg-2); }
.film-nav ol { border-left: 1px solid var(--linie-s); }
.film-nav-link, .film-uebersicht-link { display: flex; gap: .55rem; align-items: baseline; padding: .4rem .5rem .4rem .9rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--fg-2); font: 400 .9rem/1.3 var(--sans); text-decoration: none; }
.film-nav-link:hover, .film-uebersicht-link:hover { color: var(--fg); }
.film-nav-link[aria-current], .film-uebersicht-link[aria-current] { border-left-color: var(--eyebrow); color: var(--fg); font-weight: 500; }
.film-nav-link:focus-visible, .film-uebersicht-link:focus-visible, .film-leiste-knopf:focus-visible { outline: 2px solid var(--eyebrow); outline-offset: 2px; }
/* Leiste unter 1100px: klebt unter der Kopfzeile, randlos mit weichem Schatten (wie am Akku-Check-in am Handy) */
.film-leiste { position: sticky; top: var(--kopf-h); z-index: 20; }
.film-leiste-innen { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px clamp(10px, 3vw, 28px) 6px clamp(20px, 4vw, 40px); background: var(--bg); box-shadow: 0 8px 14px -12px rgba(18, 19, 44, .35); }
[data-theme="dunkel"] .film-leiste-innen { box-shadow: 0 8px 14px -12px rgba(0, 0, 0, .7); }
.film-leiste-stand { flex: 1; min-width: 0; margin: 0; display: grid; gap: 2px; }
.film-leiste-zahl { font: 500 .68rem/1.25 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--eyebrow); }
.film-leiste-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .95rem; line-height: 1.3; color: var(--fg); }
.film-leiste-knopf { flex: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .4rem 0 .6rem; border: 0; border-radius: 8px; background: none; color: var(--link); font: 600 .92rem/1 var(--sans); cursor: pointer; }
.film-leiste-knopf:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.film-leiste-pfeil { width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.film-leiste-knopf[aria-expanded="true"] .film-leiste-pfeil { transform: translateY(1px) rotate(-135deg); }
.film-leiste-stand-linie { position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--eyebrow); }
.film-uebersicht { position: absolute; left: 12px; right: 12px; top: calc(100% + 6px); max-height: calc(100vh - var(--kopf-h) - 90px); overflow-y: auto; padding: 8px; border: 1px solid var(--linie-s); border-radius: 12px; background: var(--karte-voll, var(--bg)); box-shadow: 0 18px 36px -18px rgba(18, 19, 44, .45); }
.film-uebersicht[hidden] { display: none; }
.film-uebersicht-link { min-height: 44px; align-items: center; border-radius: 0 10px 10px 0; }
@media (prefers-reduced-motion: no-preference) { .film-leiste-stand-linie { transition: width .2s linear; } }
@media print { .film-nav, .film-leiste { display: none !important; } }

/* ---------- Kontakt / Formular ---------- */
.kontakt-raster { display: grid; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (min-width: 980px) { .kontakt-raster { grid-template-columns: .9fr 1.1fr; } }
.kontakt-fakten { list-style: none; padding: 0; display: grid; gap: 10px; margin: 1.6rem 0; }
.kontakt-fakten li { position: relative; padding-left: 30px; }
.kontakt-fakten li::before { content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--akzent-licht); }
.kontakt-mail, .kontakt-sie { color: var(--fg-2); font-size: .95rem; }
.kontakt-mail a { color: var(--warm); }
.kontakt-formular { background: var(--papier); color: var(--tinte); --link: var(--akzent); border-radius: var(--radius-gross); padding: clamp(22px, 3.5vw, 44px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55); }
[data-theme="dunkel"] .kontakt-formular { background: #1d2046; color: #ece6d8; --link: #b7bffd; }
.ff { --ff-linie: #cfc8ba; --ff-fokus: var(--akzent); }
[data-theme="dunkel"] .ff { --ff-linie: rgba(236, 230, 216, .25); --ff-fokus: var(--akzent-licht); }
.ff-pflicht { font-size: .85rem; color: inherit; opacity: .72; margin-bottom: 1rem; }
.ff-gruppe { border: 0; padding: 0; margin: 0 0 1.4rem; display: grid; gap: 8px; }
.ff-gruppe legend { font-weight: 500; margin-bottom: 10px; padding: 0; }
.ff-stern { color: var(--fehler); margin-left: 2px; }
[data-theme="dunkel"] .ff-stern { color: #f0a49c; }
.ff-wahl { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--ff-linie); border-radius: 14px; cursor: pointer; font-size: .97rem; line-height: 1.4; transition: border-color .2s, background-color .2s; }
.ff-wahl:hover { border-color: var(--ff-fokus); }
.ff-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ff-wahl-punkt { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--ff-linie); display: grid; place-items: center; }
.ff-wahl input:checked + .ff-wahl-punkt { border-color: var(--ff-fokus); }
.ff-wahl input:checked + .ff-wahl-punkt::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ff-fokus); }
.ff-wahl:has(input:checked) { border-color: var(--ff-fokus); background: color-mix(in srgb, var(--ff-fokus) 7%, transparent); }
.ff-wahl:has(input:focus-visible) { outline: 2px solid var(--ff-fokus); outline-offset: 2px; }
.ff-reihe { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .ff-reihe { grid-template-columns: 1fr 1fr; } }
.ff-feld { display: grid; gap: 6px; margin-bottom: 1.1rem; }
.ff-feld label { font-weight: 500; font-size: .97rem; }
.ff input[type="text"], .ff input[type="email"], .ff textarea { width: 100%; font: inherit; font-size: 1rem; color: inherit; background: transparent; border: 1px solid var(--ff-linie); border-radius: 12px; padding: 12px 14px; min-height: 50px; transition: border-color .2s, box-shadow .2s; }
.ff textarea { resize: vertical; min-height: 130px; line-height: 1.5; }
.ff input:focus, .ff textarea:focus { outline: none; border-color: var(--ff-fokus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ff-fokus) 22%, transparent); }
.ff [aria-invalid="true"] { border-color: var(--fehler) !important; }
.ff-hilfe, .ff-hinweis { font-size: .86rem; opacity: .75; margin: 0; }
.ff-fehler { color: var(--fehler); font-size: .88rem; font-weight: 500; margin: 0; }
[data-theme="dunkel"] .ff-fehler { color: #f0a49c; }
.ff-honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ff-senden { display: grid; gap: 12px; margin-top: .6rem; }
.ff-senden .btn { justify-self: start; min-width: 220px; }
.ff-senden .btn[disabled] { opacity: .6; cursor: progress; }
/* Gedämpfter Text über die Farbe statt über die Deckkraft, sonst verliert auch der Link darin an Kontrast */
.ff-datenschutz { font-size: .82rem; color: color-mix(in srgb, currentColor 78%, transparent); margin: 0; }
.ff-datenschutz a { color: var(--link); }
.ff-status { margin-top: 1rem; font-size: .95rem; }
.ff-status:empty { display: none; }
.ff-status.ist-fehler { color: var(--fehler); }
.ff-erfolg { padding: 12px 0; }
.ff-erfolg-titel { font-family: var(--serif); font-size: 1.8rem; line-height: 1.2; margin-bottom: .4em; }

/* ---------- Fusszeile ---------- */
.fuss { background: var(--nacht); color: rgba(244, 241, 234, .78); padding-top: clamp(56px, 7vw, 96px); font-size: .95rem; }
.fuss a { color: rgba(244, 241, 234, .9); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss-raster { display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding-bottom: 48px; }
.fuss-marke .marke-wort { color: var(--papier); margin-bottom: 1.1rem; font-size: 1.05rem; }
.fuss-marke p { max-width: 36ch; }
/* Instagram und YouTube: schlichtes Linien-Icon vor dem Wort, nebeneinander, mit gut treffbarer Tippfläche */
.fuss-sozial { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.fuss-sozial a { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; }
.fuss-sozial svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fuss-sozial svg .voll { fill: currentColor; stroke: none; }
.fuss-sozial a:hover { text-decoration: none; color: #fff; }
.fuss-titel { font: 500 .72rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--akzent-licht); margin-bottom: 14px; }
.fuss-spalte ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.fuss-unten { border-top: 1px solid rgba(244, 241, 234, .1); padding-block: 22px 28px; display: grid; gap: 8px; font-size: .84rem; color: rgba(244, 241, 234, .6); }
.fuss-krise a { color: var(--warm); }
@media (min-width: 1000px) { .fuss-raster { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }


/* ---------- Werkzeuge: Farben (Seiten /akku-check-in/ und /gedanken-sortierer/) ----------
   Rauchindigo bis klares Royalblau, nie Ampelfarben. Leere Felder haben einen Rand mit 3:1 zum Grund. */
:root {
  --akku-rauch: #6a6d97;
  --akku-klar: var(--akzent);
  --akku-leer-rand: #7d80a4;
  --akku-vorschau: #dfdde9;
  --akku-fokus: var(--tinte);
  --akku-feld-rand: #86817a;
  --akku-ruhe: var(--papier-2);
  --akku-wahl: #dfdde9; /* gewählte Idee */
}
[data-theme="dunkel"] {
  /* Entscheid Deborah 23.10.2026: Akku B (leere Felder in neutralem, hellerem Ton) */
  --akku-rauch: #8a8db8;
  --akku-klar: var(--akzent-licht);
  --akku-leer-rand: #c4bfcf;
  --akku-vorschau: #4a4d72;
  --akku-fokus: var(--warm);
  --akku-feld-rand: #7d81ad;
  --akku-ruhe: #1a1c3f;
  --akku-wahl: #474d93;
}

/* ---------- Kostenlose Alltagswerkzeuge: zwei Karten nebeneinander (Startseite) ----------
   Typografisch (Variante T): Werkzeugname gross, Frage darunter, feine Linie oben. Handy untereinander,
   ab 760px zwei gleich hohe Karten in einer Reihe, Knöpfe auf einer Linie. */
.werkzeuge-band { padding-block: clamp(56px, 3rem + 3vw, 104px); }
.werkzeuge-liste { list-style: none; margin: clamp(28px, 3vw, 44px) 0 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 760px) { .werkzeuge-liste { grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 32px); } }
.werkzeug-karte { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--linie-s); border-top: 3px solid var(--tief); border-radius: var(--radius-gross); background: var(--karte); box-shadow: var(--schatten); }
[data-theme="dunkel"] .werkzeug-karte { border-top-color: var(--warm); }
/* Heller Modus: Linie und Knöpfe in hellem Indigo mit Violett statt Nachtblau, damit es nicht düster wirkt
   (Entscheid Deborah 25.10.2026, Farbton B). Weiss auf #5444c8: 6,9:1. */
:root:not([data-theme="dunkel"]) .werkzeug-karte { --werkzeug-indigo: #5444c8; border-top-color: var(--werkzeug-indigo); }
:root:not([data-theme="dunkel"]) .werkzeug-karte .btn-primaer { background: var(--werkzeug-indigo); border-color: var(--werkzeug-indigo); color: #fff; }
:root:not([data-theme="dunkel"]) .werkzeug-karte .btn-primaer:hover { background: #4536b3; border-color: #4536b3; }
:root:not([data-theme="dunkel"]) .werkzeug-karte .btn-primaer:active { background: #372a92; border-color: #372a92; }
.werkzeug-karte .h3 { margin: 0; font-size: clamp(1.7rem, 1.4rem + 1.1vw, 2.3rem); }
.werkzeug-frage { margin: .45rem 0 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); line-height: 1.35; color: var(--fg-2); }
.werkzeug-karte .knopf-reihe { margin-top: auto; padding-top: 1.5rem; }

/* ---------- Bewegung ---------- */
.js .zeigen { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; }
.js .zeigen.ist-da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .zeigen { opacity: 1; transform: none; }
}
[data-ruhe="an"] { scroll-behavior: auto; }
[data-ruhe="an"] *, [data-ruhe="an"] *::before, [data-ruhe="an"] *::after { animation: none !important; transition: none !important; }
[data-ruhe="an"] .zeigen { opacity: 1 !important; transform: none !important; }
[data-ruhe="an"] .film-video video { display: none; }
[data-ruhe="an"] .film-video-pause { display: none !important; }

@media print {
  .kopf, .menue, .fuss, .kontakt-formular, .film-video { display: none !important; }
  .hero, .sek--nacht, .sek--tief { background: none !important; color: #000 !important; }
}

/* Nachträge */
.angebot-text .prosa { margin-top: 1.4rem; color: var(--fg-2); }
.prosa--rollen { max-width: none; }
.prosa--rollen > p { max-width: 70ch; }
.prosa--rollen ul { list-style: none; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-top: 2rem; }
.prosa--rollen li { background: var(--karte); border: 1px solid var(--linie-s); border-radius: var(--radius); padding: 26px; margin: 0; }
.prosa--rollen li h3 { margin-top: 0; }
.prosa--rollen li p { color: var(--fg-2); }
.prosa--spalten { max-width: none; columns: 2 320px; column-gap: 64px; }
.prosa--spalten h3 { break-after: avoid; margin-top: 0; padding-top: 1.2em; }
.prosa--spalten p { break-inside: avoid; }

/* Kleine Bildschirme: Kopfzeile verdichten, CTA-Leiste einzeilig */
@media (max-width: 520px) {
  .kopf-innen { gap: 8px; padding-inline: 14px; }
  .marke-wort { letter-spacing: .22em; font-size: .95rem; }
  .kopf-aktionen { gap: 6px; }
  .ansicht-knopf { width: 36px; height: 36px; }
  .btn-kopf { min-height: 36px; padding: .45em .8em; font-size: .84rem; }
  .menue-knopf { height: 36px; padding: 0 10px; }
}
@media (max-width: 359px) { .marke-wort { letter-spacing: .14em; font-size: .88rem; } .btn-kopf { padding: .45em .65em; } }

/* Menü-Symbol: zwei Striche, offen als × */
.menue-knopf .menue-striche, .menue-knopf[aria-expanded="true"] .menue-striche { border: 0; transform: none; width: 16px; height: 10px; position: relative; }
.menue-knopf .menue-striche::before, .menue-knopf .menue-striche::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border: 0; transition: transform .2s, top .2s; }
.menue-knopf .menue-striche::before { top: 0; transform: none; }
.menue-knopf .menue-striche::after { top: 8.5px; transform: none; }
.menue-knopf[aria-expanded="true"] .menue-striche::before { top: 4.25px; transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-striche::after { top: 4.25px; transform: rotate(-45deg); }