/* vatersorgen.de — Startseite.
   Dieselben Farb- und Schriftmarken wie die Chronik (chronik.css:2-23). Wer von
   hier in die Akte klickt, darf keinen Bruch spueren. Weiter, ruhiger, mit mehr
   Luft: die Chronik ist ein Werkzeug, diese Seite ist ein Raum. */
:root{
  --plane:#0d0917; --surface-1:#181228; --surface-2:#1e1733; --surface-3:#261d40;
  --ink:#f4f1fa; --ink-2:#b9b0d0; --ink-3:#7d7594;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --accent:#9085e9; --accent-2:#b6a6ff; --gold:#e8c877;
  --crit:#d03b3b; --good:#0ca30c;
  --r:16px; --r-s:10px;
  --font-d:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --font-u:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --luft:clamp(72px,10vw,152px);       /* Abstand zwischen den Kapiteln */
}
:root[data-theme="light"]{
  --plane:#f7f6fa; --surface-1:#ffffff; --surface-2:#ffffff; --surface-3:#f1eef8;
  --ink:#1a1526; --ink-2:#4a4360; --ink-3:#6f6885;
  --line:rgba(26,21,38,.13); --line-2:rgba(26,21,38,.24);
  --accent:#5b4bd6; --accent-2:#5941c9; --gold:#9a6b00;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--plane);color:var(--ink);font-family:var(--font-u);
  font-size:16px;line-height:1.65;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* Ruhiger Schimmer im Hintergrund, wie in der Chronik - haelt die grossen
   dunklen Flaechen davon ab, tot zu wirken. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 8% -10%, rgba(144,133,233,.20), transparent 62%),
    radial-gradient(900px 560px at 96% 6%, rgba(213,81,129,.10), transparent 60%),
    radial-gradient(900px 900px at 50% 112%, rgba(57,135,229,.09), transparent 62%);
}
:root[data-theme="light"] body::before{
  background:
    radial-gradient(1200px 700px at 8% -10%, rgba(144,133,233,.18), transparent 62%),
    radial-gradient(900px 560px at 96% 6%, rgba(213,81,129,.09), transparent 60%);
}

.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr-only:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;clip:auto;
  background:var(--accent);color:#fff;padding:10px 16px;border-radius:var(--r-s);z-index:99}
.muted{color:var(--ink-3)}
.klein{font-size:13px;color:var(--ink-3);line-height:1.6}
.nowrap{white-space:nowrap}
a{color:var(--accent-2);text-decoration:none}
a:hover{color:var(--gold)}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:4px}

.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600}

/* ------------------------------------------------------------- Kopfzeile */
.top{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--plane) 82%, transparent);
  border-bottom:1px solid var(--line)}
.top-inner{display:flex;align-items:center;gap:20px;height:66px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);
  font-weight:600;font-size:16px;letter-spacing:-.01em}
/* Dasselbe runde Medaillon wie in der Chronik (chronik.css:422). Scheibe und
   Zeichnung stecken im Bild — deshalb wird es hier NICHT umgedreht: wer von der
   Startseite in die Akte klickt, soll dasselbe Zeichen sehen. Die freigestellte
   Schablone `finn-marke.png` bleibt fuer den Schlussteil, wo sie als grosses,
   blasses Wasserzeichen liegt und die Umkehr braucht. */
.brand .mark{width:32px;height:32px;border-radius:50%;flex:none;display:block;
  overflow:hidden;box-shadow:0 0 18px -6px rgba(144,133,233,.9)}
.brand .mark img{width:32px;height:32px;border-radius:50%;display:block}
:root[data-theme="dark"] .schluss-marke,
:root[data-theme="dark"] .fuss-signatur{filter:invert(1)}
/* Der Tageszaehler in der Kopfzeile. Erscheint erst, wenn der Hero durchgescrollt
   ist — dann ist die Zahl weg, um die es geht, und sie soll praesent bleiben. */
.top-tage{margin-left:14px;padding-left:14px;border-left:1px solid var(--line);
  font-variant-numeric:tabular-nums;font-size:13.5px;color:var(--ink-2);
  white-space:nowrap;opacity:0;transform:translateY(-4px);
  transition:opacity .25s ease, transform .25s ease;pointer-events:none}
.top-tage.an{opacity:1;transform:none}
.top-tage b{color:var(--gold);font-weight:650;font-size:15px}
.top-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2vw,28px);font-size:14px}
.top-nav a{color:var(--ink-2)}
.top-nav a:hover{color:var(--ink)}
.btn-mini{padding:7px 14px;border-radius:999px;border:1px solid var(--line-2);
  color:var(--ink)!important}
.btn-mini:hover{border-color:var(--accent);background:rgba(144,133,233,.12)}
#theme{background:none;border:1px solid var(--line);color:var(--ink-2);
  width:36px;height:36px;border-radius:10px;cursor:pointer;display:grid;place-items:center;flex:none}
#theme:hover{color:var(--ink);border-color:var(--line-2)}
#theme .sun{display:none}
:root[data-theme="light"] #theme .sun{display:block}
:root[data-theme="light"] #theme .moon{display:none}

/* ------------------------------------------------------------------ Hero */
.hero{padding:clamp(48px,7vw,96px) 0 var(--luft)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{font-family:var(--font-d);font-weight:400;line-height:.92;
  letter-spacing:-.03em;margin:14px 0 22px;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:.18em}
.hero h1 .zahl{font-size:clamp(72px,13vw,168px);color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums}
.hero h1 .einheit{font-size:clamp(40px,6.5vw,84px);color:var(--ink-2)}
.lede{font-size:clamp(18px,2.1vw,23px);line-height:1.5;color:var(--ink-2);max-width:30ch}
.lede b{color:var(--ink);font-weight:600}

/* Die vier Etiketten. Das letzte kippt die Aussage - deshalb kommt es spaeter
   und in Gold. Ohne Bewegungswunsch erscheint es einfach mit. */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 30px}
.chips li{font-size:13px;padding:6px 13px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap}
.chips li.kippt{border-color:rgba(232,200,119,.45);color:var(--gold);
  background:rgba(232,200,119,.07)}
@media (prefers-reduced-motion: no-preference){
  .chips li{opacity:0;transform:translateY(6px);animation:auf .5s ease forwards}
  .chips li:nth-child(1){animation-delay:.15s}
  .chips li:nth-child(2){animation-delay:.28s}
  .chips li:nth-child(3){animation-delay:.41s}
  .chips li.kippt{animation-delay:.86s}
}
@keyframes auf{to{opacity:1;transform:none}}

.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 24px}
.btn{display:inline-block;padding:13px 26px;border-radius:999px;font-weight:600;
  font-size:15px;background:var(--accent);color:#fff!important;
  border:1px solid transparent;transition:.16s}
.btn:hover{background:var(--accent-2);transform:translateY(-1px);
  box-shadow:0 12px 28px -14px var(--accent)}
.btn.ghost{background:transparent;color:var(--ink)!important;border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--accent);background:rgba(144,133,233,.10);box-shadow:none}
.hero-note{font-size:14px;color:var(--ink-3);max-width:44ch}

.hero-bild{position:relative}
.hero-bild picture,.hero-bild img{display:block;width:100%;height:auto;border-radius:var(--r)}
/* Der aeusserste Rand wird hier ausgeblendet, nicht im Bild: so taugt derselbe
   Dateistand fuer helle und dunkle Darstellung. */
.hero-bild img{
  -webkit-mask-image:radial-gradient(115% 105% at 50% 44%, #000 55%, transparent 100%);
  mask-image:radial-gradient(115% 105% at 50% 44%, #000 55%, transparent 100%);
}

/* ------------------------------------------------------------- Der Satz */
.satz{padding:var(--luft) 0;border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.022), transparent 60%)}
:root[data-theme="light"] .satz{background:linear-gradient(180deg, rgba(26,21,38,.025), transparent 60%)}
/* Breite mit Bedacht: 19ch las sich als schmale Saeule und zerhackte den Satz in
   Zweiwortzeilen. Um die 26 Zeichen bleibt der Zusammenhang lesbar und die
   Zeilen behalten trotzdem Gewicht. */
.gross{font-family:var(--font-d);font-weight:400;
  font-size:clamp(24px,3.4vw,46px);line-height:1.26;letter-spacing:-.015em;
  margin:18px 0 26px;max-width:26ch;color:var(--ink-2)}
.gross p::before{content:"„";color:var(--ink-3)}
.gross p::after{content:"“";color:var(--ink-3)}
/* Die entscheidende Passage. Sie bekommt die Textfarbe und eine Unterlegung,
   die beim Hereinscrollen von links aufzieht - der einzige Effekt auf der
   ganzen Seite, der etwas behauptet, und er behauptet nur: lies das hier. */
/* Die Unterlegung muss in BEIDEN Darstellungen tragen. Gold auf Weiss bei 16 %
   war praktisch unsichtbar - deshalb je Thema ein eigener Wert. */
:root{--mark:rgba(232,200,119,.20)}
:root[data-theme="light"]{--mark:rgba(154,107,0,.20)}
.gross mark{background:none;color:var(--ink);font-weight:500;
  box-shadow:inset 0 -.44em 0 var(--mark);padding:0 .06em}
@media (prefers-reduced-motion: no-preference){
  .gross mark{background:linear-gradient(90deg, var(--mark) 0 100%) no-repeat;
    background-size:0% .44em;background-position:0 90%;box-shadow:none;
    transition:background-size 1.1s cubic-bezier(.2,.7,.2,1) .25s}
  .satz.sichtbar .gross mark{background-size:100% .44em}
}
.quelle{font-size:14.5px;color:var(--ink-3);max-width:52ch}
.dazu{margin-top:26px;font-size:clamp(16px,1.7vw,19px);color:var(--ink-2);
  max-width:56ch;line-height:1.6}
.link-pfeil{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;margin-top:20px}
.link-pfeil::after{content:"→";transition:transform .18s}
.link-pfeil:hover::after{transform:translateX(4px)}

/* ------------------------------------------------------------ Die Kippfigur */
/* Zwei Spalten, bewusst gleich schwer gesetzt. Waere die rechte optisch
   staerker, waere sie ein Vorwurf; waere sie schwaecher, waere sie eine
   Verharmlosung. Der Unterschied soll aus dem Inhalt kommen, nicht aus der
   Gestaltung — deshalb hier keine Farbe ausser der Trennlinie in der Mitte. */
.kippe{padding:var(--luft) 0;border-top:1px solid var(--line)}
.kipp-spalten{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px)}
/* Die Mittellinie. Sie ist der ganze Effekt des Abschnitts: zwei Haelften, die
   nicht ineinanderlaufen. */
.kipp-sp+.kipp-sp{border-left:1px solid var(--line);padding-left:clamp(26px,4vw,64px)}
.kipp-sp h3{font-family:var(--font-d);font-weight:400;
  font-size:clamp(19px,2.3vw,27px);line-height:1.2;letter-spacing:-.015em;color:var(--ink)}
.kipp-sp h3 em{font-style:italic;color:var(--accent-2)}
.kipp-zahl{margin-top:10px;font-size:13.5px;color:var(--ink-3);
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.kipp-zahl b{font-family:var(--font-d);font-size:22px;color:var(--ink);
  font-variant-numeric:tabular-nums;margin-right:4px}

.kipp-liste{list-style:none;counter-reset:none}
.kipp-liste li{padding:clamp(18px,2.2vw,26px) 0;border-bottom:1px solid var(--line)}
.kipp-liste blockquote p{font-family:var(--font-d);
  font-size:clamp(15.5px,1.75vw,19px);line-height:1.45;color:var(--ink-2)}
.kipp-liste blockquote p::before{content:"„";color:var(--ink-3)}
.kipp-liste blockquote p::after{content:"“";color:var(--ink-3)}
/* Die als `stark` markierte Aussage traegt die Spalte — sie bekommt die
   Textfarbe, sonst nichts. */
.kipp-liste li.stark blockquote p{color:var(--ink)}
.kipp-quelle{display:block;margin-top:11px;font-size:13px;color:var(--ink-3);line-height:1.45}
.kipp-quelle b{display:block;color:var(--ink-2);font-weight:600}
.kipp-quelle:hover b,.kipp-quelle:hover{color:var(--gold)}
.kipp-quelle::after{content:" →";color:var(--accent-2)}

.kipp-mitte{margin:clamp(30px,4vw,52px) 0 0;max-width:62ch;
  font-size:clamp(17px,1.9vw,21px);line-height:1.5;color:var(--ink)}

/* Der Vorhalt. Kein Rot, kein Ausrufezeichen, kein Name: der Satz wirkt allein,
   und jede Einordnung schwaecht ihn. Was ihn traegt, steht in `.dazu` — nicht
   das Zitat ist der Beleg, sondern das Schweigen danach. */
/* Breite bewusst in Pixeln, nicht in `ch`: das Zitat steht in der
   Auszeichnungsschrift und laeuft bei 78ch auf fuenf kurze Zeilen — der Satz
   zerfaellt dabei in Bruchstuecke. Um die 880 px traegt er drei bis vier. */
.vorhalt{margin-top:clamp(34px,4.5vw,60px);padding:clamp(24px,3.2vw,42px);
  border-radius:var(--r);border:1px solid var(--line-2);max-width:min(880px,100%);
  background:color-mix(in srgb, var(--surface-1) 62%, transparent)}
:root[data-theme="light"] .vorhalt{background:#fff;
  box-shadow:0 2px 16px -8px rgba(26,21,38,.2)}
.vorhalt[hidden]{display:none}
.vorhalt blockquote p{margin-top:14px;font-family:var(--font-d);font-weight:400;
  font-size:clamp(20px,2.6vw,32px);line-height:1.3;letter-spacing:-.015em;color:var(--ink-2)}
.vorhalt blockquote p::before{content:"„";color:var(--ink-3)}
.vorhalt blockquote p::after{content:"“";color:var(--ink-3)}
.vorhalt mark{background:none;color:var(--ink);font-weight:500;
  box-shadow:inset 0 -.42em 0 var(--mark);padding:0 .06em}
@media (prefers-reduced-motion: no-preference){
  .vorhalt mark{background:linear-gradient(90deg, var(--mark) 0 100%) no-repeat;
    background-size:0% .42em;background-position:0 90%;box-shadow:none;
    transition:background-size 1.1s cubic-bezier(.2,.7,.2,1) .25s}
  .vorhalt.sichtbar mark{background-size:100% .42em}
}
/* Wann der Satz gefallen ist. Steht zwischen Zitat und Quellenangabe und ist
   deutlich gesetzt: „in der letzten Verhandlung" ist für einen fremden Leser
   keine Angabe, ein Datum schon. */
/* Zwei Beleglinks nebeneinander, auf schmalen Geraeten untereinander. */
.v-belege{display:flex;flex-wrap:wrap;gap:8px clamp(20px,3vw,38px)}
.v-termin{margin-top:20px;font-size:15px;font-weight:600;color:var(--ink-2)}
.v-termin a{color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.v-termin a:hover{color:var(--gold);border-color:var(--gold)}
.vorhalt figcaption{margin-top:10px;font-size:13.5px;color:var(--ink-3);max-width:58ch}
.vorhalt .dazu{margin-top:20px;font-size:15.5px;line-height:1.6;
  color:var(--ink-2);max-width:62ch;
  padding-top:18px;border-top:1px solid var(--line)}

/* Auf dem Telefon steht keine Spalte neben der anderen. Die Trennlinie wandert
   nach oben, sonst haengt die zweite Spalte im Nichts. */
@media (max-width:760px){
  .kipp-spalten{grid-template-columns:1fr;gap:clamp(30px,6vw,46px)}
  .kipp-sp+.kipp-sp{border-left:0;padding-left:0;
    border-top:1px solid var(--line-2);padding-top:clamp(26px,5vw,38px)}
}

/* -------------------------------------------------- Was nicht drinsteht */
.nicht{padding:var(--luft) 0;border-top:1px solid var(--line)}
.sec-kopf{max-width:64ch;margin-bottom:clamp(30px,4vw,54px)}
.sec-kopf h2,.akte h2,.thema h2{font-family:var(--font-d);font-weight:400;
  font-size:clamp(30px,4.4vw,58px);line-height:1.08;letter-spacing:-.025em}
.sec-kopf h2 em,.akte h2 em,.thema h2 em{font-style:italic;color:var(--accent-2)}
.sec-kopf p{margin-top:16px;color:var(--ink-2);font-size:clamp(16px,1.7vw,18px)}

/* Fuenf Zeilen, jede mit einem leeren Kaestchen davor. Die Leere ist die
   Aussage - deshalb kein Haken, kein Kreuz, kein Symbol. */
.leerzeilen{list-style:none;display:grid;gap:0;border-top:1px solid var(--line)}
.leerzeilen li{display:flex;align-items:flex-start;gap:clamp(14px,2vw,26px);
  padding:clamp(16px,2.2vw,24px) 0;border-bottom:1px solid var(--line);
  font-size:clamp(16px,1.9vw,21px);color:var(--ink-2);line-height:1.45}
.leerzeilen li::before{content:"";flex:none;width:19px;height:19px;margin-top:.28em;
  border:1.5px solid var(--line-2);border-radius:5px}
.leerzeilen li b{color:var(--ink);font-weight:600}

.gegenstimme{margin-top:clamp(34px,4.5vw,60px);padding:clamp(24px,3vw,38px);
  border-radius:var(--r);border:1px solid var(--line);
  background:color-mix(in srgb, var(--surface-1) 62%, transparent);max-width:74ch}
:root[data-theme="light"] .gegenstimme{background:#fff;
  box-shadow:0 2px 16px -8px rgba(26,21,38,.2)}
.gegenstimme blockquote p{font-family:var(--font-d);font-size:clamp(18px,2.2vw,25px);
  line-height:1.4;color:var(--ink)}
.gegenstimme blockquote p::before{content:"„"}
.gegenstimme blockquote p::after{content:"“"}
.gegenstimme figcaption{margin-top:14px;font-size:13.5px;color:var(--ink-3)}

/* ---------------------------------------------------------- Vier Zahlen */
.zahlen{padding:var(--luft) 0;border-top:1px solid var(--line)}
.zahl-reihe{display:grid;gap:clamp(14px,1.6vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.zk{display:block;padding:clamp(22px,2.6vw,32px);border-radius:var(--r);
  border:1px solid var(--line);color:inherit;
  background:color-mix(in srgb, var(--surface-1) 55%, transparent);transition:.18s}
:root[data-theme="light"] .zk{background:#fff;box-shadow:0 2px 14px -8px rgba(26,21,38,.16)}
.zk:hover{border-color:var(--accent);transform:translateY(-3px);
  box-shadow:0 18px 40px -22px var(--accent);color:inherit}
.zk .n{font-family:var(--font-d);font-size:clamp(38px,4.6vw,58px);line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.zk .n.rot{color:var(--crit)}
.zk .t{margin-top:12px;font-size:15.5px;color:var(--ink);font-weight:600;line-height:1.35}
.zk .s{margin-top:7px;font-size:13.5px;color:var(--ink-3);line-height:1.55}
.zk .beleg{margin-top:16px;font-size:12.5px;color:var(--accent-2);font-weight:600}
.zk:hover .beleg{color:var(--gold)}

/* --------------------------------------------------------------- Akte */
.akte{padding:var(--luft) 0;border-top:1px solid var(--line)}
.akte-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.7fr);
  gap:clamp(32px,5vw,72px);align-items:start}
.akte p{margin-top:18px;color:var(--ink-2);font-size:clamp(16px,1.7vw,18px);max-width:56ch}
.akte p b{color:var(--ink)}
.akte-fakten{list-style:none;display:grid;gap:2px;
  border-top:1px solid var(--line)}
.akte-fakten li{display:flex;align-items:baseline;gap:16px;padding:15px 0;
  border-bottom:1px solid var(--line)}
.akte-fakten b{font-family:var(--font-d);font-size:30px;line-height:1;
  min-width:3.4ch;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.akte-fakten span{font-size:14px;color:var(--ink-3);line-height:1.4}

/* ------------------------------------------------------------ Wandlung */
/* Vier Bildschirmhöhen Scrollweg, eine klebende Bühne. Ohne WebGL bleibt die
   Bühne leer; die vier Texte stehen dann untereinander und lesen sich als
   normaler Abschnitt. Deshalb hängt NICHTS Inhaltliches am Canvas. */
/* Der Ausklang. Ohne ihn ist der Abschnitt exakt so lang wie die sechs
   Zustände: Finn steht im letzten Bild, eine Radumdrehung später endet der
   Abschnitt, die klebende Bühne löst sich, und das Bild ist weg — abgeschnitten,
   nicht beendet. Diese 80 % Bildschirmhöhe sind der Weg, auf dem Finn zu Sand
   zerfällt (`uZerstieben` in wandlung.js läuft genau hier von 0 auf 1).
   Wer die Zahl ändert, ändert die Dauer des Zerfalls, nicht die Zustände. */
.wandlung{position:relative;border-top:1px solid var(--line);
  padding-bottom:80vh;padding-bottom:80svh}
.wandlung-buehne{position:sticky;top:0;height:100vh;height:100svh;
  display:grid;place-items:center;pointer-events:none;z-index:0}
/* Feste Kantenlängen statt 100 %: ein Canvas trägt aus seinen width/height-
   Attributen ein Seitenverhältnis, und in einem zentrierten Raster zieht sich
   die Höhe danach — bei einem 1×1-Puffer wurde daraus ein Quadrat von
   Fensterbreite. `inset:0` bindet die Fläche stattdessen ans Elternelement. */
#c-wandlung{display:block;position:absolute;inset:0;width:100%;height:100%}
/* Jahresmarken im Zustand „Die Tage". Die Lage rechnet wandlung.js je Bild
   aus — hier steht nur, wie sie aussehen. `will-change` ist Absicht: die
   Marken bewegen sich mit der Drehung des Feldes mit. */
.w-jahre{position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .25s linear;z-index:2}
.w-jahr{position:absolute;top:0;left:0;will-change:transform;
  font-size:11px;letter-spacing:.14em;font-weight:600;
  color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.w-jahr-linie{position:absolute;top:0;left:0;height:1px;will-change:transform,width;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ink-3) 45%,transparent),transparent)}
@media (max-width:620px){ .w-jahr{font-size:10px;letter-spacing:.1em} }
/* Ein sehr weicher Schein hinter der Wolke, damit sie nicht im Nichts hängt. */
.wandlung-buehne::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 48%, rgba(144,133,233,.10), transparent 70%)}

/* Der negative Anfangsabstand ist der Kern des Aufbaus: ein klebendes Element
   belegt seinen Platz im normalen Fluss weiter. Ohne ihn beginnt der Text ERST
   unter der Bühne, und man scrollt vier Bildschirme an einer stummen Wolke
   vorbei, bevor das erste Wort kommt. */
.wandlung-text{position:relative;z-index:1;margin-top:-100vh;margin-top:-100svh;
  max-width:1240px;margin-left:auto;margin-right:auto;padding:0 clamp(20px,4vw,44px)}
.w-schritt{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;max-width:34ch;
  opacity:.22;transition:opacity .5s ease}
.w-schritt.an{opacity:1}
.w-schritt h2{font-family:var(--font-d);font-weight:400;
  font-size:clamp(34px,5vw,64px);line-height:1.04;letter-spacing:-.025em;margin:10px 0 18px}
.w-schritt h2 em{font-style:italic;color:var(--accent-2)}
.w-schritt p:last-child{color:var(--ink-2);font-size:clamp(16px,1.8vw,19px);line-height:1.6}
.w-schritt b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
/* Der letzte Schritt gehört Finn — deshalb Gold statt Violett. */
.w-schritt:last-child h2 em{color:var(--gold)}

/* Ohne WebGL: keine leere Bühne stehen lassen, keine vier Bildschirme Leerlauf. */
/* Ohne Bühne gibt es auch nichts zu zerstieben — der Ausklang wäre dann ein
   dreiviertel leerer Bildschirm zwischen zwei Textabschnitten. */
.wandlung:not([data-webgl="an"]){padding-bottom:0}
.wandlung:not([data-webgl="an"]) .wandlung-buehne{display:none}
.wandlung:not([data-webgl="an"]) .w-schritt{min-height:0;opacity:1;
  padding:clamp(30px,5vw,54px) 0;border-bottom:1px solid var(--line);max-width:60ch}
.wandlung:not([data-webgl="an"]) .w-schritt:last-child{border-bottom:0}

@media (max-width:900px){
  /* Auf schmalen Geräten steht der Text ÜBER der Wolke, nicht daneben —
     34ch neben einer Punktwolke wären auf 390 px beides zu klein. */
  .w-schritt{max-width:none;justify-content:flex-end;padding-bottom:7vh}
  /* Scrollweg von 4 × 100 svh auf 4 × 85 svh. Auf dem Telefon sind vier volle
     Bildschirmhöhen gefühlt endlos — man scrollt und scrollt, und die Wolke
     bewegt sich kaum. Die drei Höhen müssen dabei IMMER zusammenpassen:
     Bühne, negativer Anfangsabstand und Schritthöhe. Weicht eine ab,
     verschiebt sich der Text gegen die Zustände. */
  .wandlung-buehne{height:85svh}
  .wandlung-text{margin-top:-85svh}
  .w-schritt{min-height:85svh}
  /* Kürzerer Ausklang, aus demselben Grund wie die kürzeren Schritte: auf dem
     Telefon ist ein Scrollweg von vier Fünftel Bildschirm gefühlt lang. */
  .wandlung{padding-bottom:60svh}
  .wandlung-buehne::after{content:"";position:absolute;inset:auto 0 0 0;height:52%;
    background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--plane) 88%,transparent) 62%)}
  /* Ein Verlauf allein reicht über einer bewegten Wolke nicht: Punkte wandern
     durch die Textzeilen und zerhacken sie. Der Text bekommt deshalb eine
     eigene Fläche mit weichem Rand — lesbar, ohne die Wolke zuzudecken. */
  .w-schritt > *{position:relative;z-index:1}
  .w-schritt h2,.w-schritt p{padding:0 14px}
  .w-schritt h2{padding-top:14px;border-radius:14px 14px 0 0}
  .w-schritt p:last-child{padding-bottom:16px;border-radius:0 0 14px 14px}
  .w-schritt h2,.w-schritt p:last-child{
    background:color-mix(in srgb, var(--plane) 82%, transparent);
    backdrop-filter:blur(6px)}
}

/* --------------------------------------------- Straßburg gegen Ludwigsburg */
/* Zwei Spalten, absichtlich gleich schwer gesetzt und in derselben Reihenfolge
   nummeriert: der Leser soll Zeile gegen Zeile lesen koennen. Die einzige
   Ungleichheit steht am Ende — links ein Urteil, rechts ein Wort. Sie kommt aus
   der Sache, nicht aus der Gestaltung, und wird deshalb auch nicht betont. */
.gegen{display:grid;grid-template-columns:1fr 1fr;gap:0;
  margin:clamp(26px,3.5vw,40px) 0;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.gegen[hidden]{display:none}
.gegen-sp{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column}
.gegen-hier{border-left:1px solid var(--line);
  background:color-mix(in srgb, var(--surface-1) 45%, transparent)}
:root[data-theme="light"] .gegen-hier{background:rgba(26,21,38,.028)}
.gegen-sp h3{font-family:var(--font-d);font-weight:400;margin-top:10px;
  font-size:clamp(17px,2vw,22px);line-height:1.2;color:var(--ink)}
.gegen-sp h3 a{color:inherit;border-bottom:1px solid var(--line-2)}
.gegen-sp h3 a:hover{color:var(--gold);border-color:var(--gold)}
.gegen .eyebrow{display:block;margin:0}
.g-az{margin-top:6px;font-size:12.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
/* Nummern statt Aufzaehlungspunkte: sie sind der Faden zwischen den Spalten. */
.g-liste{list-style:none;counter-reset:g;margin:16px 0 0;flex:1}
.g-liste li{counter-increment:g;position:relative;padding:10px 0 10px 30px;
  border-top:1px solid var(--line);font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.g-liste li:first-child{border-top:0}
.g-liste li::before{content:counter(g);position:absolute;left:0;top:11px;
  width:19px;height:19px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;font-size:11px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.g-liste a{color:var(--ink-2)}
.g-liste a:hover{color:var(--gold)}
.g-liste a::after{content:" →";color:var(--accent-2)}
.g-ende{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2);
  font-size:15px;font-weight:600;color:var(--ink)}
/* Das eine Wort. Gross genug, dass es die Zeile links aufwiegt — und in Gold,
   weil es das einzige Offene auf dieser Seite ist. */
.g-offen{font-family:var(--font-d);font-weight:400;
  font-size:clamp(22px,2.8vw,32px);color:var(--gold);letter-spacing:-.01em}
@media (max-width:760px){
  .gegen{grid-template-columns:1fr}
  .gegen-hier{border-left:0;border-top:1px solid var(--line-2)}
}

/* -------------------------------------------------------------- Thema */
.thema{padding:var(--luft) 0;border-top:1px solid var(--line)}
.thema-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.6fr);
  gap:clamp(32px,5vw,64px);align-items:start}
.thema p{margin-top:18px;color:var(--ink-2);font-size:clamp(16px,1.7vw,18px);max-width:60ch}
.buch{padding:clamp(22px,2.6vw,30px);border-radius:var(--r);
  border:1px solid rgba(232,200,119,.3);background:rgba(232,200,119,.06)}
/* Das Cover steht leicht angehoben und wirft einen Schatten - ein Buch liegt
   nicht flach auf der Seite, es steht darauf. */
.buch-bild{display:block;width:min(260px,100%);margin:16px 0 4px;
  border-radius:6px;overflow:hidden;transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 14px 34px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07)}
.buch-bild img{display:block;width:100%;height:auto}
.buch-bild:hover{transform:translateY(-3px) rotate(-.6deg);
  box-shadow:0 22px 46px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(232,200,119,.35)}
:root[data-theme="light"] .buch-bild{
  box-shadow:0 12px 30px -16px rgba(26,21,38,.45), 0 0 0 1px rgba(26,21,38,.12)}
.buch-titel{font-family:var(--font-d);font-size:21px;line-height:1.3;margin-top:14px;color:var(--ink)}
.buch-meta{margin-top:12px;font-size:13.5px;color:var(--ink-3);line-height:1.6}

/* --------------------------------------------------------------- Mann */
.mann{padding:var(--luft) 0;border-top:1px solid var(--line)}
.stationen{display:grid;gap:0;border-top:1px solid var(--line)}
.stationen>div{display:grid;grid-template-columns:5.5ch 1fr;gap:clamp(16px,3vw,40px);
  padding:clamp(15px,2vw,22px) 0;border-bottom:1px solid var(--line);align-items:baseline}
.stationen .j{font-family:var(--font-d);font-size:clamp(20px,2.4vw,28px);
  color:var(--gold);font-variant-numeric:tabular-nums;line-height:1}
.stationen p{color:var(--ink-2);font-size:clamp(15px,1.6vw,17px);max-width:62ch}
.stationen p b{color:var(--ink);font-weight:600}
.mann-fuss{margin-top:28px;font-size:clamp(16px,1.7vw,18px);color:var(--ink-2)}
.mann-fuss .link-pfeil{margin-top:0}

/* ------------------------------------------------------------ Presse */
.presse{padding:var(--luft) 0;border-top:1px solid var(--line)}
.presse-grid{display:grid;gap:clamp(14px,1.6vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.karte{padding:clamp(24px,2.8vw,34px);border-radius:var(--r);
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--surface-1) 55%, transparent)}
:root[data-theme="light"] .karte{background:#fff;box-shadow:0 2px 14px -8px rgba(26,21,38,.16)}
.karte h3{font-size:17px;font-weight:650;margin-bottom:16px;letter-spacing:-.01em}
.karte p{color:var(--ink-2);font-size:14.5px;line-height:1.65}
.karte p+p{margin-top:12px}
.anlass dt{font-weight:650;color:var(--ink);font-size:14.5px;margin-top:14px}
.anlass dt:first-child{margin-top:0}
.anlass dd{color:var(--ink-2);font-size:14px;line-height:1.6;margin-top:3px}
.regeln{list-style:none;display:grid;gap:11px}
.regeln li{font-size:14px;color:var(--ink-2);line-height:1.6;padding-left:16px;position:relative}
.regeln li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--accent)}
.regeln b{color:var(--ink)}
.kontakt{border-color:var(--line-2)}
.kontakt-zeile{margin-top:6px}
.kontakt-zeile a{font-size:clamp(17px,2vw,21px);font-weight:600;
  font-family:var(--font-d);letter-spacing:-.01em}
.kontakt .klein{margin-top:16px}

/* ------------------------------------------------------------ Schluss */
.schluss{position:relative;padding:var(--luft) 0 calc(var(--luft) * .8);
  border-top:1px solid var(--line);overflow:hidden;isolation:isolate}
/* Finns Gesicht, gross und sehr schwach, hinter dem Text. Dasselbe Zeichen, das
   auf den Briefkoepfen steht. */
.schluss-marke{position:absolute;right:2%;top:50%;transform:translateY(-50%);
  height:min(96%,720px);width:auto;opacity:.05;pointer-events:none;z-index:-1;
  filter:none}
:root[data-theme="dark"] .schluss-marke{opacity:.07}
.schluss-text{font-family:var(--font-d);font-size:clamp(24px,3.4vw,46px);
  line-height:1.24;letter-spacing:-.02em;max-width:22ch;color:var(--ink)}
.schluss-klein{margin-top:22px;font-size:clamp(16px,1.8vw,19px);color:var(--ink-2);max-width:40ch}
.schluss .hero-cta{margin-top:32px}

/* ------------------------------------------------------------ Fusszeile */
.fuss{border-top:1px solid var(--line);padding:44px 0 56px;
  background:color-mix(in srgb, var(--surface-1) 40%, transparent)}
.fuss-inner{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(24px,4vw,54px);
  align-items:center}
.fuss-signatur{height:auto;width:200px;opacity:.85}
.fuss-text p{font-size:14px;color:var(--ink-2)}
.fuss-text p+p{margin-top:9px}
.fuss-nav{display:flex;flex-direction:column;gap:7px;font-size:14px;text-align:right}

/* ═══════════════════════════════════════════════════════════════════════
   Schmale Bildschirme.
   Bewusst KEIN gestauchtes Desktop: die Startseite wird auf dem Telefon
   gelesen, und dort erzaehlt sie in Kapiteln statt in Spalten. Jeder
   Gedanke bekommt seine eigene Flaeche, der Tageszaehler bleibt oben
   stehen, und der Kontakt ist immer einen Daumen weit entfernt.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .hero-grid,.akte-grid,.thema-grid{grid-template-columns:1fr}
  .fuss-inner{grid-template-columns:1fr;text-align:left}
  .fuss-nav{flex-direction:row;flex-wrap:wrap;gap:18px;text-align:left}
  .top-nav a:not(.btn-mini){display:none}

  /* Das Bild kommt zuerst, aber schmal und mittig - es soll den Satz
     ankuendigen, nicht die halbe erste Seite fuellen. */
  .hero-grid{gap:26px}
  .hero-bild{order:-1;max-width:340px;margin:0 auto}
  .hero h1{margin:10px 0 18px}
  .lede,.hero-note{max-width:none}

  .stationen>div{grid-template-columns:1fr;gap:4px}
  .stationen .j{color:var(--gold)}

  .schluss-marke{right:-18%;height:80%;opacity:.05}
}

@media (max-width:620px){
  body{font-size:15.5px}
  :root{--luft:clamp(56px,14vw,84px)}

  /* Erster Versuch war ein klebendes h1. Das ueberlagert beim Scrollen den
     Text darunter, weil der Hero als umgebender Block frueh endet - und auf
     einem 390er Bildschirm frisst es ein Drittel der Flaeche. Die Zahl wandert
     stattdessen in die Kopfzeile (siehe .top-tage), sobald der Hero durch ist. */
  .hero h1{margin:6px 0 16px}
  .hero h1 .zahl{font-size:clamp(56px,17vw,92px)}

  /* Die Kopfzeile hat auf 390 px Platz fuer drei Dinge: Zeichen, Zahl, Schalter.
     Der Schriftzug "vatersorgen.de" faellt weg - die Adresse steht ohnehin in
     der Leiste des Browsers, die Zahl nirgends sonst. */
  .brand span{display:none}
  .top-tage{margin-left:12px;padding-left:12px;font-size:12.5px;
    white-space:normal;line-height:1.15;max-width:11ch}
  .top-tage b{display:block;font-size:14.5px}
  .hero h1 .einheit{font-size:clamp(28px,9vw,46px)}

  .hero-cta{flex-direction:column;align-items:stretch}
  .btn{text-align:center;padding:15px 22px}

  /* Karten als volle Breite mit klarer Trennung statt eines Rasters, das
     auf 360 px ohnehin einspaltig faellt - so ohne den Zwischenraum, der
     dort nur Scrollweg kostet. */
  .zahl-reihe,.presse-grid{gap:12px}
  .leerzeilen li{font-size:16.5px;gap:13px}
  .leerzeilen li::before{width:16px;height:16px}
  .gross{max-width:none;font-size:clamp(22px,6.4vw,30px)}
  .schluss-text{max-width:none}

  /* Kontakt immer erreichbar. Erscheint erst, wenn der Hero durch ist -
     sofort sichtbar waere es aufdringlich. */
  .daumen{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;
    gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--plane) 92%, transparent);
    backdrop-filter:blur(14px);border-top:1px solid var(--line);
    transform:translateY(110%);transition:transform .25s ease}
  .daumen.an{transform:none}
  .daumen a{flex:1;text-align:center;padding:12px 10px;border-radius:12px;
    font-size:14px;font-weight:600}
  .daumen .m{background:var(--accent);color:#fff!important}
  .daumen .a{border:1px solid var(--line-2);color:var(--ink)!important}
  .fuss{padding-bottom:96px}   /* Platz fuer die Leiste */
}
@media (min-width:621px){ .daumen{display:none} }

/* Wer keine Bewegung will, bekommt keine. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}