/* ==========================================================================
   FUNKE · LW-Fassung · Lesbarkeit auf der dunklen Seite
   12.08.2026, Andys Befund: "Dein Wort im Herzraum in magenta auf blau
   verletzt die Regeln zur Sichtbarkeit" und "Katastrophe wie der Kasten
   aussieht" auf Doppelseite 9.

   Ursache, gemessen: lw-journal.css faerbt seine Bauteile fuer PAPIER
   (color: var(--ink), var(--magenta)). Die Dunkel-Fassungen existieren dort
   zwar, haengen aber an konkreten Seitennummern des LW-Journals, etwa
   .spread[data-spread="9"] .companion-quote. Unsere Doppelseiten tragen
   andere Nummern, also greift keine dieser Regeln - 61 Stellen auf 22
   Doppelseiten standen in Ink oder Magenta auf Nacht.

   Hier haengen dieselben Werte an .page-companion statt an einer Nummer.
   Damit gilt die Regel fuer jede dunkle Seite, heute und bei jeder neuen.

   Farbwahl nach Andys Typografie-Gesetz: auf dunklem Grund grosse Schrift
   in Gold oder warm-weiss, niemals Magenta; Sekundaertext nie unter 0.86
   Deckkraft. Magenta bleibt der hellen Seite und den Knoepfen vorbehalten.
   Diese Datei wird NACH lw-journal.css geladen und beruehrt das
   LW-Journal nicht, weil sie nur unter .page-companion greift.
   ========================================================================== */

/* ── Akzente: Gold statt Magenta ───────────────────────────────────────── */
.page-companion .heartbeat,
.page-companion .page-turn-arrow,
.page-companion .jrn-chat-eyebrow,
.page-companion .jrn-chat-cta-eyebrow,
.page-companion .subscribe-eyebrow,
.page-companion .paywall-choice-eyebrow {
  color: #E4B56A;
}
/* Der Herzschlag-Akzent traegt bei LW zusaetzlich eine Magenta-Animation.
   Auf Nacht wuerde sie kurz aufblitzen und wieder verschwinden. */
.page-companion .heartbeat .ink-char {
  color: #E4B56A;
  animation: none;
}

/* ── Fliesstext und Ueberschriften: warm-weiss statt Ink ───────────────── */
.page-companion .companion-quote,
.page-companion .jrn-chat-cta-word,
.page-companion .paywall-choice-title,
.page-companion .paywall-choice-amount,
.page-companion .subscribe-title {
  color: #F7F3E9;
}
/* 19.08. abends, Andys Befund: "ne Treppe rechts", weisser und gelber Satz
   sassen nicht auf derselben Kante. Ursache war nie unser CSS, sondern der
   Browser: .companion-quote ist ein <blockquote>-Tag, Chrome setzt darauf
   von sich aus 40px Rand links UND rechts, wenn niemand ihn zuruecksetzt.
   .companion-quote-cite ist ein <div> ohne diesen Standardrand, darum ging
   nur die gelbe Zeile bis an die echte Kante. */
.page-companion .companion-quote {
  margin-left: 0;
  margin-right: 0;
}

/* ── Sekundaertext: mindestens 0.86 Deckkraft (Andys Kontrast-Gesetz) ──── */
.page-companion .jrn-chat-cta-hint,
.page-companion .jrn-chat-disclaimer,
.page-companion .paywall-choice-deck,
.page-companion .paywall-choice-fine,
.page-companion .subscribe-trust,
.page-companion .page-turn {
  color: rgba(255, 253, 248, 0.86);
}
/* Die Blaetter-Knoepfe traegt LW auf der dunklen Seite in Gold. */
.page-companion .page-turn { color: #E4B56A; }
.page-companion .page-turn:hover { color: #FFFDF8; }

/* ── Kaesten und Felder: Nacht-Karte statt Papier-Karte ────────────────── */
.page-companion .fk-box,
.page-companion .jrn-chat-box,
.page-companion .jrn-chat-cta,
.page-companion .subscribe-card {
  background: linear-gradient(160deg, rgba(38, 46, 92, 0.55) 0%, rgba(21, 26, 49, 0.75) 100%);
  border: 1px solid rgba(228, 181, 106, 0.28);
  border-radius: 16px;
  color: #F7F3E9;
}
.page-companion .fk-msg-sevi {
  background: rgba(255, 253, 248, 0.08);
  color: #F7F3E9;
}
.page-companion .fk-msg-meta {
  color: rgba(255, 253, 248, 0.7);
}
/* Eingabefeld: auf Nacht darf es nicht als weisser Block herausbrechen. */
.page-companion .jrn-chat-box .fk-box-input,
.page-companion .fk-box .fk-box-input {
  background: rgba(255, 253, 248, 0.07);
  border: 1px solid rgba(255, 253, 248, 0.22);
  color: #FFFDF8;
  caret-color: #E4B56A;
}
.page-companion .jrn-chat-box .fk-box-input::placeholder,
.page-companion .fk-box .fk-box-input::placeholder { color: rgba(255, 253, 248, 0.5); }
.page-companion .jrn-chat-box .fk-box-input:focus,
.page-companion .fk-box .fk-box-input:focus { outline: none; border-color: #E4B56A; }
/* Absenden bleibt Glut: Knoepfe sind die eine Stelle, an der Magenta auf
   Nacht richtig ist, weil es eine Flaeche ist und kein Text. */
.page-companion .fk-box-submit {
  background: #B31F66;
  color: #FFFDF8;
  border: 0;
}
.page-companion .fk-box-submit:hover { background: #9E1759; }
.page-companion .fk-box-error { color: #F3B7CE; }

/* ── Kaufkarten ────────────────────────────────────────────────────────── */
.page-companion .paywall-choice {
  background: linear-gradient(180deg, rgba(179, 31, 102, 0.14) 0%, rgba(21, 26, 49, 0.5) 100%);
  border: 1px solid rgba(228, 181, 106, 0.3);
}
.page-companion .paywall-choice-cta--buy {
  background: #B31F66;
  color: #FFFDF8;
  border-color: #B31F66;
}
.page-companion .paywall-choice-cta--buy:hover {
  background: #9E1759;
  border-color: #9E1759;
}
/* Die Nebenwahl bleibt eine Kontur, damit der Kauf der eine Held bleibt. */
.page-companion .paywall-choice-cta--ask,
.page-companion .paywall-choice-cta--leave {
  background: transparent;
  color: #F7F3E9;
  border: 1px solid rgba(255, 253, 248, 0.34);
}
.page-companion .paywall-choice-cta--ask:hover,
.page-companion .paywall-choice-cta--leave:hover {
  border-color: #E4B56A;
  color: #FFFDF8;
}

/* ==========================================================================
   Videos: ein Format, eine Groesse - HOCHFORMAT 4/5 wie im LW-Journal
   12.08.2026, Andys Entscheid nach dem Vergleich mit Lebendige Weiblichkeit.

   Gemessen an derselben Seitenposition: LWs Video ist 656px hoch und fuellt
   55 Prozent der rechten Seite, FUNKEs war 295px und fuellte 31 Prozent.
   Darunter blieben 397px leer (LW: 125 bis 186). Das war der Grund, warum
   FUNKE neben LW leer wirkte.

   Der frueher hier stehende Einwand - 16:9-Material bekommt im 4:5-Rahmen
   Balken - ist mit Andys Entscheid vom 12.08. erledigt: die Videos werden
   in der Nacht auf den 13.08. aus dem Rohmaterial neu auf 4:5 gerendert,
   inklusive neu gesetzter Untertitel. Die alten Fassungen waren nicht
   umschneidbar, weil die Untertitel eingebrannt sind und breiter liefen
   als der 4:5-Ausschnitt (gemessen am Poster von 3dd842b3, der Untertitel
   ragte links und rechts heraus).

   SOLANGE die neuen Fassungen nicht hochgeladen sind, zeigt object-fit:cover
   vom alten 16:9-Material den mittleren Ausschnitt: Sévérine sitzt darin,
   die eingebrannten Untertitel werden seitlich angeschnitten. Das ist der
   erwartete Zwischenzustand, kein Fehler.

   Der zweite Teil: LW gibt einigen Videos einen staerkeren Glow-Schatten,
   gebunden an seine eigenen Seitennummern (1, 6, 9, 10, 12, 13, 18). Bei
   uns treffen die zufaellig - manche Videos leuchteten, andere nicht.
   Hier bekommt jedes Video auf Nacht denselben Schatten.
   ========================================================================== */
/* ══ RAHMEN 16:9 (17.08.2026, Andys Befund "sehen zum Teil richtig scheiss
   und verzogen aus") ══════════════════════════════════════════════════════
   Der Rahmen stand auf 4/5, alle sieben Kursfilme sind aber 16:9 (an der
   Quelle gemessen: 1776x1000 bei jedem einzelnen). Folge:
     - das Startbild wurde von 16:9 in 4:5 hineingeschnitten, also links und
       rechts weggeschnitten und dabei mehr als doppelt hochskaliert , daher
       weich und angeschnitten
     - beim Abspielen legte der Player zwei fette schwarze Balken oben und
       unten hinein, rund 40 Prozent des Rahmens waren tote Flaeche
   Der Kommentar darunter behauptete "formatgleich, ohne Beschnitt". Das war
   zum Zeitpunkt des Schreibens vielleicht wahr, gemessen war es falsch.
   Nebenwirkung, die uns entgegenkommt: der Rahmen wird flacher, die
   Companion-Seiten werden kuerzer.
   ═══════════════════════════════════════════════════════════════════════ */
.page-companion .video-frame {
  aspect-ratio: 16/9;
  box-shadow: 0 0 0 1px rgba(228, 181, 106, 0.22),
    0 0 60px -10px rgba(179, 31, 102, 0.24),
    0 32px 100px -20px rgba(0, 0, 0, 0.6),
    0 8px 24px -8px rgba(0, 0, 0, 0.38);
}
/* Poster und Rahmen sind jetzt wirklich formatgleich, cover schneidet
   damit nichts mehr weg. */
.page-companion .video-poster {
  background-size: cover;
  background-position: center;
}

/* ── Preishinweis auf den fruehen Seiten ───────────────────────────────────
   Doppelseite 3 und 4 tragen keinen Kaufabschluss, sondern einen Hinweis.
   Er sitzt am Seitenende und nimmt so wenig Hoehe wie moeglich, damit die
   Seite nicht laenger wird als ihre Nachbarn. Der volle Kasten steht auf
   Doppelseite 8, wo wirklich entschieden wird. */
.page-companion .paywall-choices--hinweis {
  margin-top: auto;
  padding-top: clamp(21px, 3vh, 34px);
}
.page-companion .paywall-choices--hinweis .paywall-choice {
  padding: 21px 21px;
  background: linear-gradient(180deg, rgba(179, 31, 102, 0.16) 0%, rgba(21, 26, 49, 0.42) 100%);
}
.page-companion .paywall-choices--hinweis .paywall-choice-title {
  font-size: 20px;
  line-height: 1.25;
  margin-bottom: 5px;
}
.page-companion .paywall-choices--hinweis .paywall-choice-price {
  margin: 8px 0 13px;
}

/* ── Situationswahl auf der HELLEN Seite ───────────────────────────────────
   Andys Vorgabe 12.08.: "die Boxen ins helle nehmen". Die Wahl steht jetzt
   links bei der Frage, zu der sie gehoert. Die Nacht-Fassung aus
   funke-lw-bausteine.css gilt nur rechts; hier die Papier-Fassung.
   Text-Gold statt hellem Gold, weil helles Gold auf Papier unter AA faellt. */
.page-severine .fk-sit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 16.08. abends: 8px klebten (Andy: "lass doch Platz zwischen den boxen").
     Naechste Stufen der Fibonacci-Skala des Kanons. */
  gap: clamp(8px, 1.1vw, 13px);
  margin-top: clamp(13px, 2vh, 21px);
}
.page-severine .fk-sit-b {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 13px 10px 15px;
  text-align: left;
  background: #FFFFFF;
  border: 1px solid rgba(22, 26, 46, 0.12);
  /* 19.08. abends: Goldkante links, dieselbe Marke wie die Familien-Stimmen
     auf Doppelseite 3 und die Weg-Karten der Weiche. Vorher waren es
     schmucklose weisse Kaesten, die wie ein Formular wirkten. Auf Papier
     das ruhigere #C9A468 statt #E4B56A. */
  border-left: 2px solid #C9A468;
  border-radius: 13px;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.page-severine .fk-sit-b:hover {
  border-color: #B31F66;
  border-left-color: #B31F66;
  transform: translateY(-1px);
}
.page-severine .fk-sit-b.gewaehlt,
.page-severine .fk-sit-b[aria-pressed="true"] {
  border-color: #B31F66;
  border-left-color: #B31F66;
  background: rgba(179, 31, 102, 0.06);
}
.page-severine .fk-sit-b .s-k {
  font-size: 15px;
  /* Der Kindersatz ist ein Zitat, kein Etikett: Weight 500 statt 600,
     damit er spricht statt zu etikettieren.
     🛑 text-transform MUSS hier zurueckgesetzt werden: funke-lw-bausteine.css
     setzt .s-k auf uppercase + 0.18em Sperrung (dort ist es ein Kicker auf
     Nacht). Ein Kindersatz in Grossbuchstaben schreit statt zu sprechen und
     wird ausserdem so breit, dass jede Kachel zweizeilig umbricht. */
  text-transform: none;
  letter-spacing: -0.012em;
  font-weight: 500;
  color: #161A2E;
  line-height: 1.3;
  margin-bottom: 0;
}
.page-severine .fk-sit-b .s-v {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: #4B5168;
}
@media (max-width: 880px) {
  .page-severine .fk-sit { grid-template-columns: 1fr; }
}

/* ── Nachtraege ────────────────────────────────────────────────────────────
   subscribe-deck kommt in FUNKEs Kaufseite vor, hat in lw-journal.css aber
   keine Regel: ohne diese Zeile faellt der Satz auf Browser-Standard. */
.page-companion .subscribe-deck {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 253, 248, 0.86);
  margin: 0;
}

/* Video und Grafik nehmen die volle Spaltenbreite, wie bei LW. Ein frueherer
   Versuch mit 78 Prozent nahm sie aus der Flucht mit Chat-Box und Zitat: drei Breiten auf einer Seite. Flacher werden sie durch 16/9 statt 4/5,
   nicht durch weniger Breite. */

/* Der Weiter-Knopf traegt auf Nacht keine Flaeche hinter dem Wort. LWs
   ::after ist dort eine duenne Linie; ohne dessen Groessenangabe wurde
   daraus ein grauer Kasten (Andys Befund 12.08.). */
.page-companion .page-turn::after,
.page-severine .page-turn::after {
  background: transparent;
}

/* ── Video-Beschriftung unter den Rahmen ───────────────────────────────────
   12.08., Andys Bild: die Zeile lag AUF dem Video und ueberlagerte die
   eingebrannten Untertitel - drei Schriften auf einem Fleck.

   Bei LW sitzt .video-meta absolut im Rahmen (bottom), weil dort ein
   Standbild ohne Text liegt. FUNKEs Videos tragen eingebrannte Untertitel,
   deshalb gehoert die Zeile hier UNTER den Rahmen. Der Rahmen wird dafuer
   zum Traeger mit Platz darunter. */
.page-companion .video-frame { overflow: visible; }
.page-companion .video-frame > .video-poster,
.page-companion .video-frame > iframe {
  border-radius: 18px;
}
.page-companion .video-meta {
  position: static;
  left: auto; right: auto; bottom: auto;
  display: flex;
  align-items: baseline;
  gap: 13px;
  margin-top: 13px;
  padding: 0 2px;
}
.page-companion .video-meta-label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #F7F3E9;
}
.page-companion .video-meta-duration {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 253, 248, 0.62);
}

/* Der Zitat-Nachsatz stand in Magenta auf Nacht - dieselbe Regel wie ueberall:
   auf dunklem Grund Gold, nie Magenta als Schrift. */
.page-companion .companion-quote-cite {
  color: #E4B56A;
}

/* ── Inhaltsverzeichnis: der Sperr-Hinweis steht EINMAL, nicht 17 Mal ──────
   12.08., Andys Befund: "nach Kauf viel zu viel Platz, macht die Navi VIEL
   zu breit". LW haengt per ::after an jede gesperrte Zeile das Wort
   "nach Kauf" plus ein Schloss. Bei LW betrifft das wenige Zeilen, bei FUNKE
   siebzehn: die Zeile wird auseinandergezogen und der Hinweis wiederholt
   sich sinnlos. Er steht bei uns bereits am Etappen-Kopf ("Freischalten").
   Dazu: LW dimmt gesperrte Zeilen auf 0.62 - unter Andys Mindestwert. */
body:not(.has-access) .toc-row[data-status="paid"]::after,
body:not(.has-access) .toc-row[data-status="paid"] .toc-row-mode::before {
  content: none;
}
body:not(.has-access) .toc-row[data-status="paid"] {
  opacity: 0.86;
}
body:not(.has-access) .toc-row[data-status="paid"]:hover {
  opacity: 1;
}

/* ── Grafik-Seiten sitzen wie Video-Seiten ─────────────────────────────────
   Andys Entscheid 12.08.: FUNKE hat neun Doppelseiten mit SVG-Grafik, wofuer
   LW kein Vorbild kennt. Sie bekommen denselben Rahmen wie ein Video: gleiche
   Breite, gleicher Radius, gleicher Schatten, Beschriftung darunter. Damit
   stehen alle dreizehn Bausteinseiten in einer Flucht.
   Der Unterschied zum Video: kein festes Seitenverhaeltnis, die Grafik
   bestimmt ihre Hoehe selbst, und kein Beschnitt. */
.page-companion .video-frame.fk-grafik {
  aspect-ratio: auto;
  background: linear-gradient(160deg, rgba(38, 46, 92, 0.42) 0%, rgba(21, 26, 49, 0.68) 100%);
  border: 1px solid rgba(228, 181, 106, 0.22);
  overflow: hidden;
}
.page-companion .fk-grafik-in {
  padding: clamp(21px, 2.6vh, 34px);
}
/* Der Videorahmen legt unten einen Abdunkler ueber sein Standbild, damit
   Untertitel lesbar bleiben (lw-journal.css, .video-frame::after). Auf einer
   Zeichnung verdunkelt er nur ihr unteres Drittel und sieht aus wie ein
   zweiter Kasten im Kasten. Gefunden 20.08.2026 beim Umbau von Doppelseite 2. */
.page-companion .video-frame.fk-grafik::after { content: none; }
.page-companion .fk-grafik-in > svg,
.page-companion .fk-grafik-in svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Grafik im Video-Rahmen: der Baustein bringt aus funke-lw-bausteine.css
   seinen eigenen Rahmen mit (Hintergrund, Radius, Polster) und begrenzt sein
   SVG auf 460px. Innerhalb des Video-Rahmens waere das ein Rahmen im Rahmen
   mit einer Grafik, die ihn nicht fuellt (Andys Bild 12.08.). Hier tritt der
   innere Rahmen zurueck, und die Grafik nimmt die volle Breite. */
.page-companion .fk-grafik .sp-gfx {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  width: 100%;
  max-width: none;
}
.page-companion .fk-grafik .sp-gfx svg {
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
}


/* ── Zuordnung unter einer Grafik (20.08.2026) ─────────────────────────────
   Beschriftungen gehoeren nicht als <text> in die Zeichnung. Eine SVG skaliert
   mit ihrer Breite: auf einem 390px-Fenster lief die Wetter-Grafik auf 60
   Prozent, ein 14px-Schriftzug darin waere als 8px angekommen. Als HTML unter
   der Zeichnung bleibt er bei 13px und folgt dem Typo-System.
   Gebaut fuer Doppelseite 21, gedacht als Baustein fuer alle Grafikseiten. */
.page-companion .fk-gfx-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 34px;
  margin: 21px 0 0;
  padding: 0;
  list-style: none;
}
.page-companion .fk-gfx-legende li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 300;
  color: rgba(255, 253, 248, 0.74);
}
.page-companion .fk-gfx-legende .fk-gfx-marke {
  flex: 0 0 26px;
  height: 1px;
  border-top: 1.6px dashed rgba(255, 253, 248, 0.4);
}
.page-companion .fk-gfx-legende li.is-gold { color: #E4B56A; }
.page-companion .fk-gfx-legende li.is-gold .fk-gfx-marke {
  border-top: 2.2px solid #E4B56A;
}


/* Ein Satz unter der Zeichnung (20.08.2026). Gegenstueck zu
   .fk-gfx-legende: was frueher als <text> im SVG stand und deshalb mit der
   Bildbreite schrumpfte, steht jetzt hier und folgt dem Typo-System. */
.page-companion .fk-gfx-satz {
  margin: 21px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(15px, 1.25vw, 17px);
  font-weight: 300;
  line-height: 1.45;
  color: #FFFDF8;
}
.page-companion .fk-gfx-satz + .fk-gfx-satz { margin-top: 8px; }
.page-companion .fk-gfx-satz--klein {
  font-size: clamp(13px, 1.05vw, 14.5px);
  color: rgba(255, 253, 248, 0.74);
}
.page-companion .fk-gfx-satz--gold {
  color: #E4B56A;
  font-weight: 400;
  margin-top: 21px;
}

/* ── Die zwei Pfeile stehen auf EINER Hoehe, ganz unten ────────────────────
   12.08., Andys Vorgabe nach den drei LW-Bildern: "zurueck und weiter nicht
   auf einer Hoehe, zu weit im Bild, nicht am Rand unten. GENAU SO baust du."

   Beide Seiten sind im Raster gleich hoch und beide sind Flex-Spalten, also
   schiebt margin-top:auto den Pfeil ans Seitenende. Damit das aufgeht, muss
   der Inhalt gestapelt sein (flex-start) und beide Seiten denselben
   Fussabstand haben. Genau daran hatte es gefehlt. */
.spread .page-severine,
.spread .page-companion {
  justify-content: flex-start;
  padding-bottom: clamp(21px, 3.5vh, 55px);
}
.spread .page-severine > .page-turn-wrap,
.spread .page-companion > .page-turn-wrap {
  margin-top: auto;
  padding-top: clamp(21px, 3vh, 34px);
}


/* ── Checkliste auf der hellen Seite ───────────────────────────────────────
   Andys Vorgabe 12.08.: die Checkliste gehoert nach links auf Papier, rechts
   stehen nur die Videos. Etwas, das man abhakt, waehrend man liest, gehoert
   zum Text. funke-lw-bausteine.css gibt ihr eine Nacht-Fassung; hier die
   Papier-Fassung. Text-Gold statt hellem Gold, das auf Papier unter AA faellt. */
.page-severine .sp-gate {
  margin-top: clamp(21px, 3vh, 34px);
  padding: clamp(21px, 2.4vh, 21px) clamp(21px, 2vw, 21px);
  background: #FFFFFF;
  border: 1px solid rgba(22, 26, 46, 0.12);
  border-radius: 14px;
}
.page-severine .sp-gate .gt-k {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #845A0B;
  margin-bottom: 13px;
  display: block;
}
.page-severine .sp-gate .gt-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 8px 0;
  font-size: 16px;
  font-weight: 400;
  color: #161A2E;
  cursor: pointer;
}
.page-severine .sp-gate .gt-item input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  accent-color: #B31F66;
  cursor: pointer;
}
.page-severine .sp-gate .gt-item:hover { color: #B31F66; }

/* ── Das Zitat steht rechtsbuendig, auf JEDER Seite ────────────────────────
   Andy 12.08.: "rechtsbuendig muss auf allen seiten sein, der fehler ist
   ueberall". LWs Regel dafuer steht in einem @media-Block ganz am Ende von
   lw-journal.css und trifft nur .companion-quote mit einer Klasse. Sobald
   irgendeine Regel mit zwei Klassen dazwischenfunkt, verliert sie. Hier
   steht sie mit derselben Spezifitaet wie unsere anderen Nacht-Regeln,
   damit sie sicher gilt.
   Warum rechtsbuendig: das Zitat ist der Nachhall der Seite, kein
   Fliesstext. Es lehnt sich mit feinem Strich an den Bund. */
@media (min-width: 881px) {
  .page-companion .companion-quote {
    text-align: right;
    border-top: none;
    border-right: 1px solid rgba(228, 181, 106, 0.32);
    padding: 0 clamp(13px, 1.6vw, 21px) 0 0;
  }
  /* 19.08. abends, Andys Befund: der Strich sass nur an "Drei Familien, drei
     Woerter", brach ab und liess den Nachsatz ohne Linie stehen. Zitat und
     Nachsatz sind zwei Elemente mit eigener Box, die Linie muss an beiden
     stehen, damit sie als EINE durchgehende Linie ueber beide Saetze liest. */
  .page-companion .companion-quote-cite {
    text-align: right;
    border-right: 1px solid rgba(228, 181, 106, 0.32);
    padding-right: clamp(13px, 1.6vw, 21px);
  }
}

/* ── Doppelseite 11 · der Abschluss der ersten Etappe ──────────────────────
   Einzeln gestaltet (Andys Vorgabe 12.08.). Diese Seite traegt keinen
   Lehrstoff, sondern einen Moment: die erste Etappe ist geschafft. Statt
   Zitat und Grafik nebeneinander steht der Satz gross in der Mitte, der
   Funke darunter, der Nachsatz leise. So ist der wenige Text die Seite,
   statt in ihr zu verschwinden. */
.page-companion.s11-moment { justify-content: center; }
.s11-mitte {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(21px, 4vh, 34px);
}
.s11-satz {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #F7F3E9;
}
.s11-satz .heartbeat { color: #E4B56A; }
.s11-funke { width: min(340px, 62%); }
.s11-funke .sp-gfx {
  margin: 0; padding: 0; border: 0; background: none; max-width: none; width: 100%;
}
.s11-funke .sp-gfx svg { width: 100%; height: auto; display: block; max-width: none; }
.s11-nach {
  margin: 0;
  max-width: 34ch;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 253, 248, 0.86);
}

/* ── Moment-Seiten ─────────────────────────────────────────────────────────
   Manche Doppelseiten tragen keinen Lehrstoff, sondern einen Moment: die
   erste Etappe ist geschafft, ihr sitzt zum ersten Mal nebeneinander, sag
   jetzt nichts. Auf diesen Seiten IST der eine Satz der Inhalt. Er steht
   gross und mittig, darunter hoechstens ein leiser Nachsatz. Sonst nichts. */
.page-companion.fk-moment { justify-content: center; }
/* 17.08.2026: justify-content allein reichte nicht. Der Weiter-Knopf sitzt in
   einem .page-turn-wrap mit margin-top:auto; dieses auto gewinnt gegen das
   Zentrieren und drueckt den Satz an den oberen Rand. Auf den Seiten, die
   ausser dem Moment nichts tragen (Spread 28 und 32, beide neu aus dem
   Schnitt), stand darunter eine leere halbe Seite. Zwei auto-Raender halten
   den Satz jetzt in der Mitte des freien Raums.
   🛑 Der .spread-Praefix ist noetig: die Gegenregel
   `.page-companion > :first-child:not(.page-turn-wrap) { margin-top: 18px }`
   wiegt durch das :not() ebenfalls (0,3,0) und steht spaeter im Blatt, also
   gewinnt sie bei Gleichstand. Mit .spread davor sind es (0,4,0). */
/* 🛑 KORREKTUR 19.08. abends: hier stand `margin-block: auto`, also ZWEI
   Auto-Raender - der Blaetter-Knopf darunter traegt aber selbst schon
   margin-top:auto. Drei Auto-Raender teilen den freien Raum zu DRITT, der
   Satz landete dadurch im oberen Drittel statt in der Mitte (gemessen auf
   Doppelseite 28: 209px oben, 430px Loch darunter). Nur noch der obere
   Rand ist auto, zusammen mit dem des Turn-Wraps sind es die zwei, die es
   fuer echte Mitte braucht. */
.spread .page-companion.fk-moment .fk-moment-in {
  margin-top: auto;
  margin-bottom: 0;
}
.fk-moment-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(21px, 3vh, 34px);
}
.fk-moment-satz {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: #F7F3E9;
}
.fk-moment-satz .heartbeat { color: #E4B56A; }
.fk-moment-nach {
  margin: 0;
  max-width: 36ch;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 253, 248, 0.86);
}

/* ── Karten-Seiten in derselben Flucht wie Video und Grafik ────────────────
   Familien-Stimmen, Notfallnummern und Satzkarten sind FUNKEs eigene
   Bausteine. Sie bekommen denselben Rahmen wie Video und Grafik, damit auf
   keiner Doppelseite eine andere Kante entsteht. */
.page-companion .sp-famc,
.page-companion .sp-nummern,
.page-companion .sp-satzk {
  display: grid;
  gap: 13px;
  margin: 0;
}
.page-companion .sp-famc .fam,
.page-companion .sp-nummern .num-karte,
.page-companion .sp-satzk .szk {
  background: linear-gradient(160deg, rgba(38, 46, 92, 0.5) 0%, rgba(21, 26, 49, 0.72) 100%);
  border: 1px solid rgba(228, 181, 106, 0.22);
  border-radius: 16px;
  padding: clamp(21px, 2.4vh, 21px) clamp(21px, 2vw, 21px);
}
/* Die Karte, auf die es ankommt (20.08.2026, Doppelseite 25).
   Drei Karten im selben Systemrahmen sehen gleich wichtig aus. Die dritte
   traegt die Aufloesung ("Woerter, die beides sein koennen"), sie bekommt
   den goldenen Grund. Muss hier stehen: der Systemrahmen darueber ist
   spezifischer als eine Modifier-Klasse im Bausteinkasten. */
.page-companion .sp-satzk .szk.is-ziel {
  background: linear-gradient(160deg, rgba(228, 181, 106, 0.1) 0%, rgba(228, 181, 106, 0.04) 100%);
  border-color: rgba(228, 181, 106, 0.42);
}
.page-companion .sp-satzk .szk.is-ziel .szk-k { color: #E4B56A; }
.page-companion .sp-satzk .szk.is-ziel .szk-n { color: rgba(255, 253, 248, 0.8); }

/* Sekundaertext nach Andys Kontrast-Gesetz, nicht unter 0.86. */
.page-companion .fam-vor,
.page-companion .num-fuer,
.page-companion .szk-t {
  color: rgba(255, 253, 248, 0.86);
}
.page-companion .fam-wer {
  color: rgba(255, 253, 248, 0.86);
  font-size: 14px;
}
.page-companion .fam-wort,
.page-companion .num-gross,
.page-companion .szk-k {
  color: #E4B56A;
}

/* ── Der Umschalter der drei Session-Fassungen ─────────────────────────────
   Doppelseite 18. Die Chips sitzen ueber der Buehne, die gewaehlte Fassung
   traegt die Gold-Kante. Die Buehne hat dasselbe Format wie jedes andere
   Video, damit die Seite in der Flucht bleibt. */
.page-companion .sp-cfswap { display: flex; flex-direction: column; gap: 13px; }
.page-companion .cfs-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.page-companion .cfs-chip {
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 253, 248, 0.24);
  background: none;
  color: rgba(255, 253, 248, 0.86);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.page-companion .cfs-chip:hover { border-color: rgba(228, 181, 106, 0.6); color: #FFFDF8; }
.page-companion .cfs-chip.on {
  border-color: #E4B56A;
  color: #E4B56A;
  background: rgba(228, 181, 106, 0.08);
}
.page-companion .cfv-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 18px;
  overflow: hidden;
  background: #0D1021;
  box-shadow: 0 0 0 1px rgba(228, 181, 106, 0.22),
    0 32px 100px -20px rgba(0, 0, 0, 0.6);
}
.page-companion .cfv-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.page-companion .cfv-cap {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 253, 248, 0.86);
}

/* Die Familien-Karten tragen nur noch Situation und Kind, kein gefundenes
   Wort mehr (Andys Entscheid 12.08.). Ohne die grosse Wortzeile in der Mitte
   brauchen sie weniger Hoehe und die Situation traegt die Karte. */
.page-companion .sp-famc .fam-vor {
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 400;
  line-height: 1.45;
  color: #F7F3E9;
  margin-bottom: 8px;
}
.page-companion .sp-famc .fam-wer {
  font-size: 14px;
  letter-spacing: 0.02em;
  color: rgba(255, 253, 248, 0.86);
}

/* ── Etappen klappen auf ───────────────────────────────────────────────────
   Beim Oeffnen des Verzeichnisses stehen fuenf Etappen da, nicht 23 Zeilen.
   Wer FUNKE als "eine Session fuer zuhause" gekauft hat, soll keinen
   Lehrgang sehen. Die eigene Etappe steht offen. */
.toc-akt--klapp .toc-akt-head {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 13px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(22, 26, 46, 0.1);
  cursor: pointer;
  text-align: left;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.toc-akt--klapp .toc-akt-pfeil {
  margin-left: auto;
  width: 10px; height: 10px;
  border-right: 1.5px solid rgba(22, 26, 46, 0.4);
  border-bottom: 1.5px solid rgba(22, 26, 46, 0.4);
  transform: rotate(45deg);
  transition: transform .25s ease;
}
.toc-akt--klapp.is-offen .toc-akt-pfeil { transform: rotate(-135deg); }
.toc-akt--klapp .toc-rows {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.toc-akt--klapp.is-offen .toc-rows { max-height: 1400px; }

/* ── Der Satz, der die Seite traegt ────────────────────────────────────────
   Andys Punkt: Content, der ins Herz trifft. Auf jeder Doppelseite gibt es
   einen Satz, der alles sagt - "Es lag nie an dir", "Ein Nein heisst: nicht
   jetzt", "Es ist alles". Sie standen mitten in einem Absatz und gingen
   darin unter.

   Vorbild ist LWs Held-Zeile (.severine-line[data-line="4"], dort groesser
   gesetzt). Die Groessen stehen auf der phi-Leiter: 21 auf 26.
   Kein Wort ist geaendert, nur der Umbruch. */
.page-severine .severine-line.fk-held {
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #161A2E;
  margin-top: clamp(21px, 3vh, 34px);
  margin-bottom: clamp(21px, 3vh, 34px);
  max-width: 26ch;
}

/* ── Zeitangabe je Etappe und Session-Kennzeichnung ────────────────────────
   Andys Vorgabe: man soll sehen, wie lange eine Etappe dauert und wo eine
   echte Session laeuft. Die Zeiten stammen aus den Videolaengen, nicht aus
   dem Gefuehl. Die Angabe steht leise unter dem Etappen-Namen; die
   Session-Pille traegt Gold, weil dort Zeit und Ruhe gebraucht werden. */
.toc-akt-head { flex-wrap: wrap; }
.toc-akt-zeit {
  flex-basis: 100%;
  padding-left: 34px;
  margin-top: 2px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(22, 26, 46, 0.55);
}
.toc-row-mode--session {
  color: #845A0B;
  font-weight: 600;
}

/* ==========================================================================
   LW-Regeln aushebeln, die an SEITENNUMMERN haengen
   12.08.2026, Andys Fund auf Doppelseite 4: "zitat nicht rechtsbuendig" und
   "das weiter ist am falschen ort".

   Ursache: lw-journal.css bindet 104 Regeln an .spread[data-spread="N"].
   Bei Lebendige Weiblichkeit gehoeren die zu bestimmten Inhalten, bei FUNKE
   treffen sie voellig andere. Drei Gruppen richten Schaden an:

     LW-Seite 3  text-align:center auf die Quote          -> traf "Du gehst zuerst"
     LW-Seite 3  justify-content:center + 160px Fusspolster -> schob den
                 Weiter-Pfeil aus der Flucht mit dem Zurueck-Pfeil
     LW-Seite 2  zusaetzliches Kopfpolster + center        -> traf "Der Funke"

   Die LW-Selektoren haben Spezifitaet 0,3,0 und schlagen damit die frueheren
   FUNKE-Regeln (0,2,0). Darum steht hier `.book` davor: 0,4,0 gewinnt, ohne
   dass irgendwo !important noetig ist.
   ========================================================================== */
.book .spread[data-spread="2"] .page,
.book .spread[data-spread="2"] .page-severine,
.book .spread[data-spread="2"] .page-companion,
.book .spread[data-spread="3"] .page,
.book .spread[data-spread="3"] .page-severine,
.book .spread[data-spread="3"] .page-companion {
  justify-content: flex-start;
  padding-top: clamp(34px, 5vh, 55px);
  padding-bottom: clamp(21px, 3.5vh, 55px);
}
/* 19.08. abends: Doppelseite 2 traegt nur zwei kurze Saetze links, kein
   Merksatz. Die rechte Grafik zieht die Zeilenhoehe der Doppelseite auf ueber
   800px, links blieb darum ein Loch von 450px vor Zurueck. Gleicher Trick
   wie bei 1/3/4: Titel bekommt margin-top:auto, teilt sich den freien Raum
   mit dem Turn-Wrap (der hat es schon), der Textblock haengt mittig. */
.book .spread[data-spread="2"] .page-severine-title {
  margin-top: auto;
}

/* 19.08. abends, Andys Befund: "Drei Familien, drei Woerter" war zu maechtig
   (20-26px), der Nachsatz darunter kaum lesbar klein und golden - auf einer
   Seite mit drei goldenen Wort-Chips («mutig» «offen» «geborgen») ist das
   zu viel Gelb. Beide Saetze jetzt gleich gross und beide weiss, der
   Nachsatz nur leichter im Gewicht statt in Farbe/Grosse abgestuft.
   Ausrichtung (rechts/links) steht NICHT mehr hier - siehe die Ausnahme
   direkt nach der globalen "rechtsbuendig auf jeder Seite"-Regel, dort
   haengt das Zitat wieder links an der Zeitlinie. */
.book .spread[data-spread="3"] .companion-quote,
.book .spread[data-spread="4"] .companion-quote {
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
  color: #F7F3E9;
}
.book .spread[data-spread="3"] .companion-quote-cite,
.book .spread[data-spread="4"] .companion-quote-cite {
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  color: #F7F3E9;
}

/* ==========================================================================
   Die drei Familien-Stimmen als EINE Erzaehlung
   12.08.2026, Andys Vorgabe zu Doppelseite 6: "rechts fehlt platz zum atmen
   und die boxen koennten schoener sein! mit gold an der seite wie im screen
   davor! die 3 boxen sind eine Story und der text darunter."

   Vorher: drei gleich aussehende Kaesten ohne Kante, 12px Abstand, und das
   Zitat darunter stand fuer sich. Kein Zusammenhang sichtbar.

   Jetzt: dieselbe Goldkante links wie bei den Weg-Karten der Weiche, damit
   die Marke ueber die Seiten hinweg dieselbe Sprache spricht. Dazu eine
   durchgehende senkrechte Linie hinter den drei Karten - sie macht aus drei
   Kaesten sichtbar EINE Reihe. Das Zitat haengt an derselben Linie und
   schliesst die Erzaehlung ab, statt danach neu anzufangen.
   ========================================================================== */
.page-companion .sp-famc {
  position: relative;
  gap: clamp(13px, 2.2vh, 21px);
  padding-left: clamp(13px, 2vw, 21px);
}
/* Die Linie, die die drei Stimmen zu einer Reihe bindet. Sie beginnt und
   endet weich, damit sie fuehrt statt zu trennen. */
.page-companion .sp-famc::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(228, 181, 106, 0) 0%,
    rgba(228, 181, 106, 0.38) 14%,
    rgba(228, 181, 106, 0.38) 86%,
    rgba(228, 181, 106, 0) 100%);
}
.page-companion .sp-famc .fam {
  position: relative;
  padding: clamp(21px, 2.4vw, 34px) clamp(21px, 2.6vw, 34px) clamp(21px, 2.2vw, 21px);
  border-left: 2px solid #E4B56A;
  border-radius: 14px;
}
/* Der Punkt auf der Linie, auf Hoehe jeder Stimme. */
.page-companion .sp-famc .fam::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(17px, 2vw, 24px) - 3px);
  top: clamp(26px, 3vw, 34px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #151A31;
  border: 1.5px solid rgba(228, 181, 106, 0.75);
}
/* Das Zitat gehoert zur Erzaehlung, also haengt es an derselben Linie und
   ruecht mit ein. Ohne die obere Trennlinie, die es sonst abschneidet. */
.page-companion .sp-famc + .companion-quote {
  margin-top: clamp(21px, 3.4vh, 34px);
  padding-left: clamp(13px, 2vw, 21px);
}

/* ==========================================================================
   Luft um die Session-Bausteine
   12.08.2026, Andys Befund zu Doppelseite 18: "lass die box rechts oben
   atmen: video weiter nach unten rutschen".

   Die Zusicherungs-Box, die Fassungs-Chips und die Video-Buehne standen
   dicht aufeinander, obwohl sie drei verschiedene Dinge sind: eine
   Bedingung, eine Wahl und der Inhalt. Fibonacci 21/34.
   ========================================================================== */
.page-companion .sp-gate {
  margin-bottom: clamp(21px, 2.8vh, 34px);
  padding: clamp(21px, 2.4vw, 34px) clamp(21px, 2.4vw, 34px) clamp(13px, 2vw, 21px);
}
.page-companion .cfs-chips,
.page-companion .cfs-chip-row {
  margin-bottom: clamp(13px, 2.2vh, 21px);
}
.page-companion .cfv-stage {
  margin-top: clamp(13px, 2.2vh, 21px);
}
/* Die Checkbox-Zeilen selbst brauchen Zeilenluft, sonst kleben sie. */
.page-companion .sp-gate .gate-k {
  padding: clamp(8px, 1vh, 8px) 0;
}

/* Abstand zwischen Video und dem Baustein darunter (Andy 12.08. zu
   Doppelseite 20: "Euer funken glas box - mit abstand zu video"). Der
   Anker-Kasten klebte am Rahmen, als waere er Teil des Videos. */
.page-companion .video-frame + .fk-anker,
.page-companion .video-meta + .fk-anker,
.page-companion .fk-anker {
  margin-top: clamp(21px, 2.8vh, 34px);
}

/* ==========================================================================
   Luft auf der ganzen rechten Seite
   12.08.2026. Andy hat "lass atmen" auf vier verschiedenen Doppelseiten
   gemeldet (5, 18, 20, 21). Das war kein Einzelfall, sondern ein Muster:
   die Bausteine standen ueberall zu dicht, weil jeder seinen eigenen
   kleinen Abstand mitbrachte statt einem gemeinsamen Rhythmus zu folgen.

   Hier steht der Rhythmus EINMAL, nach Fibonacci: 21 zwischen verwandten
   Dingen, 34 zwischen verschiedenen, 42 vor dem Zitat, das die Seite
   abschliesst. Alles per clamp, damit es auf kleinen Flaechen mitgeht.
   ========================================================================== */
.page-companion > * + * {
  margin-top: clamp(13px, 2.2vh, 21px);
}
/* Zwischen Karten-Gruppen und dem, was danach kommt, mehr Raum. */
.page-companion .sp-track + *,
.page-companion .sp-satzk + *,
.page-companion .szk + *,
.page-companion .fk-weiche + *,
.page-companion .sp-famc + *,
.page-companion .sp-nummern + * {
  margin-top: clamp(21px, 3.4vh, 34px);
}
/* Das Zitat schliesst die Seite ab und braucht davor eine Zaesur. */
.page-companion .companion-quote {
  margin-top: clamp(21px, 3.4vh, 34px);
}
/* Beschriftung gehoert zum Bild darueber, also eng. */
.page-companion .video-frame + .video-meta {
  margin-top: clamp(8px, 1.3vh, 13px);
}
/* Karten innerhalb einer Gruppe atmen auch. */
.page-companion .sp-satzk,
.page-companion .szk {
  display: flex;
  flex-direction: column;
  gap: clamp(13px, 1.8vh, 21px);
}

/* ==========================================================================
   ALLE LW-Seitennummern-Regeln aushebeln, die FUNKEs Bauteile treffen
   12.08.2026, Andy: "und so gehst du nun ALLE ALLE durch und lernst aus
   deinen fehler und fixt das ganze".

   Gemessen: lw-journal.css bindet 104 Regeln an .spread[data-spread="N"].
   25 davon greifen Bauteile, die FUNKE auch hat. Bei Lebendige Weiblichkeit
   gehoeren sie zu bestimmten Inhalten, bei uns treffen sie voellig andere
   Seiten. Bisher habe ich sie einzeln gefixt, sobald Andy einen Fehler
   gesehen hat: das Zitat mittig, der Weiter-Pfeil zu hoch, der graue Kasten
   unter dem Weiter. Das war jedes Mal dieselbe Ursache.

   Hier stehen sie EINMAL zusammen, nach Bauteil sortiert. Alle Selektoren
   tragen `.book` (0,4,0) und schlagen damit LWs 0,3,0, ohne !important.
   ========================================================================== */

/* 1. Seitengeometrie: FUNKEs Seiten beginnen oben und enden unten.
      LW zentriert einzelne Seiten vertikal und gibt ihnen bis zu 160px
      Fusspolster - das schob den Weiter-Pfeil aus der Flucht mit Zurueck. */
.book .spread[data-spread] .page,
.book .spread[data-spread] .page-severine,
.book .spread[data-spread] .page-companion {
  justify-content: flex-start;
}

/* 2. Der Blaetter-Knopf: LW faerbt ihn je Seite anders und legt eine helle
      Linie darunter (::after). Auf Nacht wurde daraus ein grauer Balken. */
.book .spread[data-spread] .page-companion .page-turn { color: #E4B56A; }
.book .spread[data-spread] .page-companion .page-turn:hover { color: #FFFDF8; }
.book .spread[data-spread] .page-companion .page-turn::after {
  background: rgba(228, 181, 106, 0.32);
}
.book .spread[data-spread] .page-severine .page-turn::after {
  background: rgba(132, 90, 11, 0.28);
}

/* 3. Das Zitat steht rechtsbuendig, auf JEDER Seite. Andys Vorgabe, und
      LW setzt es auf einzelnen Seiten mittig oder linksbuendig. */
.book .spread[data-spread] .page-companion .companion-quote {
  text-align: right;
}
.book .spread[data-spread] .page-companion .companion-quote-cite {
  text-align: right;
}
/* AUSNAHME Doppelseite 3 (19.08. abends, Andys Befund "wirkt unruhig",
   dann "mach das ANDERS"): auf dieser Seite haengt das Zitat nicht frei,
   sondern schliesst die Drei-Karten-Zeitlinie ab (sp-famc + companion-quote
   weiter unten in dieser Datei, padding-left auf denselben Wert wie die
   Zeitlinie selbst). Rechtsbuendig hat dort gegen die linke Goldlinie der
   Karten gearbeitet, zwei Fluchtlinien in einer Spalte. Selbe Spezifitaet
   wie die Regel oben (.book + [data-spread] + .page-companion + Klasse),
   steht aber SPAETER im Blatt und gewinnt darum bei Gleichstand. */
.book .spread[data-spread="3"] .page-companion .companion-quote,
.book .spread[data-spread="3"] .page-companion .companion-quote-cite,
.book .spread[data-spread="4"] .page-companion .companion-quote,
.book .spread[data-spread="4"] .page-companion .companion-quote-cite {
  text-align: left;
  border-right: none;
  border-top: none;
  padding-right: 0;
  padding-top: 0;
}
/* companion-quote-cite folgt NICHT direkt auf .sp-famc (companion-quote
   steht dazwischen), kriegt darum den Zeitlinien-Einzug unten nicht via
   Geschwister-Selektor ab. Gleicher Wert, direkt gesetzt, damit beide
   Zeilen auf derselben Kante wie die Karten stehen. */
.book .spread[data-spread="3"] .page-companion .companion-quote-cite,
.book .spread[data-spread="4"] .page-companion .companion-quote-cite {
  padding-left: clamp(13px, 2vw, 21px);
}

/* 4. Hintergrund-Effekte, die LW an einzelne Seiten haengt (Magenta-Glow,
      Streifenmuster, Papierton auf der Begleiterseite). Sie kamen bei uns
      auf zufaelligen Seiten und nur dort. */
.book .spread[data-spread] .page-companion::before,
.book .spread[data-spread] .page-companion::after {
  background-image: none;
}

/* ==========================================================================
   Der Blaetter-Pfeil braucht IMMER Luft nach oben
   12.08.2026. Nach dem Einbau der Erklaerungen und Anleitungen sind zwoelf
   Doppelseiten randvoll geworden: gemessen 0 bis 18px zwischen letztem
   Inhalt und Pfeil. Vorher war das Gegenteil das Problem.

   margin-top:auto (aus lw-journal.css) schiebt den Pfeil ans Seitenende,
   sorgt aber nicht fuer Abstand, wenn der Inhalt bis dorthin reicht. Das
   padding hier ist der Mindestabstand, den er in jedem Fall behaelt.
   Fibonacci 34 bis 55.
   ========================================================================== */
.book .spread .page-companion > .page-turn-wrap,
.book .spread .page-severine > .page-turn-wrap {
  margin-top: auto;
  padding-top: clamp(34px, 4.5vh, 55px);
}

/* Der Magenta-Strich auf der Zugangs-Karte (Andy 12.08.: "farbfehler in der
   box, da ist ein magenta strich"). LW setzt ihn als Deko auf .subscribe-card,
   96x2px. Nach dem Marken-Kanon ist Magenta Handlung, nie Deko oder Flaeche:
   auf Nacht kroent Gold. Der Strich bleibt, er markiert den Kartenkopf. */
.page-companion .subscribe-card::before {
  background: linear-gradient(90deg, #E4B56A, rgba(228, 181, 106, 0));
}

/* ==========================================================================
   Vier Einblicke in die Session (12.08.)
   Die Original-Cuts der Erwachsenen-Session zeigen, wie die Moves klingen,
   statt sie nur zu benennen. Klein gesetzt: sie sind ein Angebot, keine
   Station. Wer sie nicht braucht, blaettert weiter.
   ========================================================================== */
.fk-einblicke {
  margin-top: clamp(21px, 2.8vh, 34px);
  padding-top: clamp(13px, 2.2vh, 21px);
  border-top: 1px solid rgba(228, 181, 106, 0.18);
}
.fk-einblicke-label {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(228, 181, 106, 0.8);
  margin-bottom: 13px;
  text-align: right;
}
.fk-einblick { margin-bottom: clamp(13px, 1.8vh, 21px); }
.fk-einblick:last-child { margin-bottom: 0; }
.fk-einblick-kopf { text-align: right; margin-bottom: 8px; }
.fk-einblick-move {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #E4B56A;
}
.fk-einblick-was {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: rgba(255, 253, 248, 0.62);
}
/* Kleiner als die Hauptvideos: ein Einblick, keine Station. */
.page-companion .fk-einblick-film {
  aspect-ratio: 16/9;
  max-width: 62%;
  margin-left: auto;
  box-shadow: 0 0 0 1px rgba(228, 181, 106, 0.18), 0 12px 34px -12px rgba(0,0,0,.5);
}

/* Sévérines Gesicht auf der ersten Kind-Seite (12.08.). Auf jeder Elternseite
   steht ihr Portrait, auf der Kind-Strecke sah das Kind sie nirgends. Das
   Standbild stammt aus der Kids-Session, also aus genau dem Video, das es
   spaeter hoert. Bewusst ohne Play-Knopf: die Session setzt das Funke-Wort
   voraus und kaeme hier zu frueh. */
.fk-sevi-bild {
  display: flex;
  align-items: center;
  gap: clamp(13px, 2vw, 21px);
  margin-bottom: clamp(13px, 2.2vh, 21px);
  padding-bottom: clamp(13px, 1.8vh, 21px);
  border-bottom: 1px solid rgba(228, 181, 106, 0.18);
}
.fk-sevi-foto {
  flex: 0 0 auto;
  width: clamp(64px, 9vw, 88px);
  height: clamp(64px, 9vw, 88px);
  border-radius: 50%;
  background-size: cover;
  background-position: center 22%;
  box-shadow: 0 0 0 2px rgba(228, 181, 106, 0.45), 0 10px 26px -10px rgba(0,0,0,.6);
}
.fk-sevi-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(16px, 1.6vw, 16px);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 253, 248, 0.86);
  margin: 0;
}

/* ==========================================================================
   FUNKE Journal - Cover-Fit (Sockel + Portrait-Deckel), 15.08.2026
   --------------------------------------------------------------------------
   Andys Befund: "die Seite ist VIEL zu gross fuer eine Screen seite."
   Gemessen: das Cover ragte in JEDEM Fenster unten raus (1920x1080 104px,
   1440x900 266px, 1512x860 290px, 1280x720 379px), der Startknopf lag
   immer unter der Kante.

   Der Patch liegt bewusst HIER und nicht in lw-journal.css: diese Datei
   laedt nur FUNKE. Lebendige Weiblichkeit teilt sich lw-journal.css und
   bleibt dadurch garantiert unberuehrt.

   Alles hier ist reine Geometrie. KEINE font-size, kein transform: scale,
   keine eigene Groessenlogik. Nachgemessen: die berechneten Schriftgroessen
   sind vor und nach dem Patch deckungsgleich, die phi-Skala
   11/14/16/20/26/34/42/55 bleibt unangetastet, kleinste Schrift 11px.
   Abstaende auf den Fibonacci-Ankern 21/34/55.
   ========================================================================== */

/* 1) Die Buehne. .book steht auf 100dvh; das Polster 55/55 geht auf die
      Fibonacci-Stufe darunter, damit die volle Fensterhoehe nutzbar wird. */
.book {
  padding-top: 21px;
  padding-bottom: 21px;
}

/* 2) Der eigentliche Fehler. LWs Wunschwert von 900px bleibt stehen, wird
      aber von der Fensterhoehe ueberstimmt statt umgekehrt: unter rund
      947px Fensterhoehe zog clamp(900px, 95vh, 1280px) jede Seite ueber
      die Fensterkante HOCH, auch wenn ihr Inhalt laengst hineingepasst
      haette. Darum war 1512x860 schlimmer als das groessere 1440x900. */
.page {
  min-height: min(clamp(900px, 95vh, 1280px), calc(100dvh - 42px));
  padding-top: clamp(21px, 3.4dvh, 55px);
  padding-bottom: clamp(21px, 3.4dvh, 55px);
}

/* 3) Portrait-Deckel auf der Coverseite.
      Der Rahmen ist mit aspect-ratio 4/5 und width 100% rein
      breiten-abgeleitet und damit hoehenblind: auf einem breiten, flachen
      Schirm wurde er hoeher statt flacher. Gedeckelt wird ueber max-width,
      NICHT ueber aspect-ratio, damit das Format 4/5 exakt erhalten bleibt.
      44dvh haelt das Bild auf der LW-Referenz von rund 56 Prozent
      Seitenhoehe; calc(80dvh - 304px) reserviert auf flachen Schirmen den
      Platz, den Folio, Zitat, Startknopf und Fusszeile konstant brauchen.
      ACHTUNG: die 304px sind gemessen, nicht hergeleitet. Wird der
      Cover-Text laenger, muss dieser Wert neu gemessen werden.

      Die Filme bleiben unangetastet. Sie zu schrumpfen kostet den
      Video-Kanon (Andy hat das am 12.08. zweimal zurueckgenommen) und
      braechte nichts, weil die Inhaltsseiten ohnehin scrollen. */
/* Portrait-Deckel ZURUECKGEBAUT (16.08., Andys Befund "was ist mit meinem
   schoenen design passiert"): der Deckel schrumpfte Sévérine von 467x584
   (LW-Mass) auf 396x495 und drueckte sie nach rechts. Das Cover wirkt dann
   leer. Es gilt LW: volle Breite, und das Cover darf wie bei LW leicht
   unter die Kante laufen (LW-Cover: +214px bei 1440x900). */

/* 4) Schmale Fenster. Unter 880px stapelt lw-journal.css den .spread auf
      eine Spalte, die Doppelseite wird zur Lesespalte. Mobile scrollt nach
      Bauart, darum Deckel und Untergrenze hier zurueck. */
@media (max-width: 880px) {
  .page { min-height: 0; }
  .cover-portrait-frame { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   WAS DIESER PATCH BEWUSST NICHT TUT

   Er bringt NICHT alle 24 Inhaltsseiten ins Fenster. Das ist mit Geometrie
   nicht erreichbar und auch nicht der LW-Standard:
   - Seite 9 ist bei 1280x720 rund 2270px hoch. Um sie ins Fenster zu
     zwingen, braeuchte es Faktor 0.38, die 11px-Schrift landete bei 4.2px.
   - Das LW-Original selbst laeuft auf JEDER Doppelseite in JEDEM Fenster
     ueber (nachgemessen: LW-Cover 213px bei 1440x900, LW-Seite 5 394px).
     LW ist ein scrollendes Journal, kein Fenster-Fit.
   Die vier Schwergewichte S5, S9, S10 und S17 sind redaktionell zu lang
   und muessen geteilt werden, nicht per CSS gestaucht.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   Mehrere Filme auf einer Seite: flaches Format statt Hochformat
   --------------------------------------------------------------------------
   Der 4/5-Rahmen (Video-Kanon 12.08.) ist dafuer gebaut, dass EIN Film die
   Seite fuellt, rund 55 Prozent Seitenhoehe wie bei Lebendige Weiblichkeit.
   Stehen zwei oder vier Filme uebereinander, ergibt dieselbe Regel 110 oder
   220 Prozent, und die Doppelseite laeuft aus dem Bildschirm. Gemessen:
   s09 (zwei Filme) 789px zuviel, s16 (vier Filme) 930px zuviel.

   Darum bekommen NUR gestapelte Filme das Format, das ihr Material ohnehin
   hat: 16/9. Das ist kein Bruch des Kanons, sondern seine richtige Anwendung
   auf eine Seite mit mehr als einem Film. Nebenwirkung, die uns entgegenkommt:
   im 16/9-Rahmen wird nichts mehr seitlich beschnitten, die eingebrannten
   Untertitel stehen wieder vollstaendig im Bild.

   Ein Film auf der Seite bleibt unangetastet bei 4/5.
   ========================================================================== */
.page-companion:has(.video-frame ~ .video-frame) .video-frame {
  aspect-ratio: 16 / 9;
}

/* Die vier Einblick-Filme ins Raster statt untereinander.
   Gemessen: als Stapel 995px auf einer Seite, die ohnehin Vorspann,
   Wegwahl und Handreichung traegt. Zwei mal zwei nimmt die halbe Hoehe
   und laesst die vier trotzdem als Gruppe lesen. Der Abstand 21px ist
   Fibonacci, wie die uebrigen Abstaende der Seite. */
.fk-einblicke-filme,
.fk-einblicke:not(:has(.fk-einblicke-filme)) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 21px;
  align-items: start;
}
.fk-einblicke:not(:has(.fk-einblicke-filme)) > .fk-einblicke-label {
  grid-column: 1 / -1;
}
.fk-einblick { margin-bottom: 0; }

/* Der Abspiel-Knopf sitzt auf allen Filmen in derselben Groesse. Im Raster
   sind die Rahmen halb so breit, dort erschlaegt der Knopf das Bild. Er
   folgt jetzt der Rahmenbreite. */
.fk-einblicke .video-play {
  width: clamp(44px, 4.4vw, 64px);
  height: clamp(44px, 4.4vw, 64px);
}
.fk-einblicke .video-play svg { width: 44%; height: 44%; }

/* Auf schmalen Schirmen zurueck in eine Spalte: im Raster waere ein Film
   dort nur 93px breit, gemessen bei 390px Fensterbreite. Mobile stapelt
   ohnehin und scrollt nach Bauart. */
@media (max-width: 880px) {
  .fk-einblicke-filme,
  .fk-einblicke:not(:has(.fk-einblicke-filme)) {
    grid-template-columns: 1fr;
  }
  .fk-einblicke .video-play { width: 64px; height: 64px; }
}

/* Rechte Spalte: Inhalt schwebt mittig statt oben zu kleben (16.08.).
   Befund (Kontrollgang ueber alle 26 Seiten): auf elf Seiten lag der ganze
   Restraum als Loch zwischen letztem Inhalt und dem Weiter-Knopf, 253 bis
   353px, LW-Korridor ist 125 bis 186. Die Spalte ist flex-column, der
   Knopf traegt margin-top:auto. Bekommt der ERSTE Inhaltsblock ebenfalls
   margin-top:auto, teilt sich der freie Raum haelftig auf oben und unten:
   aus 318px Loch werden 159 oben und 159 unten, beides im LW-Korridor.
   Alle Abstaende INNERHALB des Inhalts (Film + Beschriftung, Zitat +
   Quelle) bleiben unangetastet. Auf vollen Seiten ist der freie Raum
   nahe null, die Regel aendert dort nichts. */
.page-companion > :first-child:not(.page-turn-wrap) {
  /* 16.08. ZURUECKGENOMMEN. margin-top:auto liess den rechten Inhalt mittig
     schweben und zerstoerte damit die gemeinsame Oberkante der Doppelseite:
     gemessen wanderte der rechte Start je nach Seite zwischen 94 und 564px
     unter die Folio-Linie links. Beide Spalten beginnen jetzt oben auf
     derselben Hoehe. Das Loch, das die Regel kaschieren sollte, entsteht
     ohnehin nur auf zu hohen Seiten - und die sind das eigentliche Problem.

     16.08. abends: statt 0 jetzt 18px. Das ist der gemessene Abstand, um den
     die rechte Spalte zu hoch begann; die Folio-Linie links ist damit die
     gemeinsame Oberkante der Doppelseite (Andys Vorgabe). Der Wert haengt am
     ersten Inhaltsblock statt am Polster, weil Doppelseite 2 und 3 eigene
     Polster-Regeln haben. */
  margin-top: 18px;
}

/* Gemeinsame Oberkante der Doppelseite: links sitzt die Folio-Zeile mit ihrer
   Linie, rechts beginnt der Inhalt exakt darunter, statt jede Seite anders
   anzusetzen.

   16.08.2026 abends NACHGEMESSEN und korrigiert (Andy: "rechts darf doch
   nicht so hoch anfangen, die Linie geht doch imaginaer nach rechts weiter,
   und der Content muss drunter sein").
   Die alte Fassung rechnete calc(30.6px + 72px). Beide Zahlen waren geraten
   statt gemessen: 30.6px ist die Grundpolsterung NUR bei 900px Fensterhoehe
   (sie ist clamp(21px, 3.4dvh, 55px), also hoehenabhaengig), und 72px sind
   fast doppelt so viel wie noetig. Ergebnis war 54px ZU TIEF.
   Gemessen ueber vier Fenstergroessen (720/820/900/1050) ist die Folio-Zeile
   konstant rund 39px hoch (Schriftgroesse fix 11px). Genau diese 39px
   braucht die rechte Spalte zusaetzlich, damit ihr Inhalt buendig unter der
   Linie beginnt.

   NACHTRAG, zweite Messung: der Zuschlag gehoert NICHT ans Polster.
   Zwei Doppelseiten (2 und 3) tragen eigene Polster-Regeln aus
   lw-journal.css, die jede Polster-Aenderung hier ueberstimmen - sie blieben
   dadurch als einzige falsch stehen. Der Zuschlag sitzt darum am ERSTEN
   Inhaltsblock der Begleitspalte (Regel weiter oben, margin-top). Das wirkt
   unabhaengig davon, woher das Polster kommt, und damit auf allen Seiten.
   Gemessener Bedarf: exakt 18px, konstant ueber 720/820/900/1050px
   Fensterhoehe. */

/* 2) WAS DU BEKOMMST: Leistungsliste auf der hellen Kaufseite.
      Andys Befund: "Hier muss hin was du bekommst." Die Aufzaehlung stand
      vorher nur in der Kaufkarte auf der dunklen Seite; auf dem Handy steht
      die weit unten, die Kaufseite war oben also inhaltsleer. Auf einer
      Verkaufsseite ist diese Wiederholung Absicht, keine Doppelung.
      Farben nach Branding Kit: Text-Gold auf Papier ist #845A0B (NIE das
      helle #E4B56A, das ist fuer dunklen Grund). */
.fk-leistung {
  margin: 0 0 clamp(21px, 3vh, 34px);
  padding: 0;
  list-style: none;
  max-width: 38ch;
}
.fk-leistung-label {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #845A0B;
  margin-bottom: clamp(10px, 1.4vh, 14px);
}
/* 16.08.2026 nach Andys Befund korrigiert: die Zeilen hatten eine eigene
   Schriftgroesse (17px), eigenes Gewicht (400), eigene Farbe (#161A2E) und
   Aufzaehlungspunkte. Der Kurs schreibt seinen Fliesstext ueberall in
   clamp(16px,1.4vw,20px), Gewicht 300, Farbe var(--ink-2), ohne Punkte
   (siehe .severine-line in lw-journal.css). Die Kaufseite folgt jetzt
   demselben Mass; getrennt wird wie in der Vita-Karte durch eine Haarlinie. */
.fk-leistung-zeile {
  padding: clamp(7px, 1vh, 11px) 0;
  border-bottom: 1px solid rgba(22, 26, 46, 0.09);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ink-2);
}
.fk-leistung-zeile:last-child { border-bottom: 0; }
.fk-leistung-zeile b { font-weight: 500; color: var(--ink); }

/* ── Luft zwischen den Kaesten (16.08.2026 abends, Andy: "lass doch Platz
      zwischen den boxen") ──────────────────────────────────────────────────
   Gemessen war: die zwei Kaufkarten standen 13px auseinander, die vier
   Situations-Knoepfe 8px. Beides klebte. Neue Werte aus der Fibonacci-Skala
   des Kanons (8 / 13 / 21 / 34 / 55), je zwei Stufen hoeher, mit clamp
   damit es auf flachen Schirmen nicht die Seite sprengt. */
.page-companion .paywall-choices { gap: clamp(21px, 3vh, 34px); }

/* Zweiter Leistungsblock auf der Kaufseite (Altersinfo, 16.08.2026): etwas
   ruhiger als der erste, damit "Was du bekommst" der Held bleibt. */
.fk-leistung--alter { margin-top: clamp(13px, 2vh, 21px); }
.fk-leistung--alter .fk-leistung-zeile { font-size: clamp(14px, 1.1vw, 15.5px); }
.fk-leistung--alter .fk-leistung-zeile::before { background: rgba(132, 90, 11, 0.55); }
/* Beschriftung ueber der Situationswahl (16.08.): dieselbe Optik wie die
   Leistungs-Bloecke, damit die Kaufseite drei gleich gebaute Bloecke hat. */
.fk-sit-label { display: block; margin-top: clamp(21px, 3vh, 34px); margin-bottom: 6px; }
.fk-sit-label + .severine-line { margin-top: 0; }

/* ── Weiter-Knopf: kein Kasten dahinter (16.08.2026, Andys Fund auf Spread 22)
   lw-journal.css setzt fuer 27 aufgezaehlte Seitennummern ein
   `.page-companion .page-turn::after { background: rgba(247,243,233,.6) }`
   (eine Unterstreichung, die im LW-Journal zum dortigen Layout gehoert).
   Die Nummern gelten fuer LW, treffen bei FUNKE aber andere Seiten und
   erzeugen dort einen grauen Kasten hinter dem Wort "Weiter".
   Gleiche Krankheit wie die Polster-Regeln fuer Doppelseite 2 und 3:
   LW-Regeln haengen an Seitennummern, FUNKE traegt andere Inhalte darunter.
   Hier fuer ALLE FUNKE-Seiten neutralisiert, statt Nummer fuer Nummer. */
.spread[data-spread] .page-companion .page-turn,
.spread[data-spread] .page-companion .page-turn:hover {
  background: transparent;
}

/* ── Gate-Hinweis und Weiter-Knopf ueberlappen (16.08.2026, Andys Bild von
      Etappe 4) ──────────────────────────────────────────────────────────────
   funke-journal.js haengt den Hinweis "Setz die Haken, dann geht es weiter."
   per insertBefore in den .page-turn-wrap. Der ist flex-row mit
   justify-content:flex-end, also standen Hinweis und Knopf nebeneinander und
   ueberschnitten sich (gemessen: Hinweis endet bei x=1223, Knopf beginnt bei
   x=1223). Der Wrap bekommt darum eine Zeilenumbruch-Erlaubnis und der
   Hinweis eine eigene Zeile ueber dem Knopf. */
.page-turn-wrap:has(.fk-gate-hinweis) {
  flex-wrap: wrap;
  row-gap: 6px;
}
.fk-gate-hinweis {
  flex: 1 0 100%;
  margin-bottom: 0;
}

/* ── Checkboxen auf der HELLEN Seite waren unsichtbar (16.08.2026, Andy: "hab
      ich schon 5 mal reklamiert") ────────────────────────────────────────────
   Gemessen auf Doppelseite 10: Rahmen rgba(255,253,248,.5), also fast weiss,
   auf cremefarbenem Grund rgb(247,243,233). Die Regel dafuer gilt fuer die
   dunkle Seite und griff mangels heller Gegenregel auch links.
   Hier bekommt die helle Seite einen Ink-Rahmen und eine sichtbare
   Haken-Farbe aus dem Kanon (Glut-Magenta). */
.page-severine .sp-gate .gt-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid rgba(22, 26, 46, 0.42);
  border-radius: 6px;
  background: #FFFFFF;
  display: inline-grid;
  place-content: center;
}
.page-severine .sp-gate .gt-item input[type="checkbox"]::before {
  content: "";
  width: 11px; height: 11px;
  transform: scale(0);
  transition: transform 140ms ease;
  box-shadow: inset 11px 11px #B31F66;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.page-severine .sp-gate .gt-item input[type="checkbox"]:checked::before { transform: scale(1); }
.page-severine .sp-gate .gt-item input[type="checkbox"]:checked { border-color: #B31F66; }

/* ══════════════════════════════════════════════════════════════════════════
   ZWEITE EBENE · die Wenn-dann-Schublade (Muster 17.08.2026)
   God-Level-Kriterium 12: alles, was nur im Ausnahmefall gilt (Alters-
   Randfaelle, Mehrere-Kinder-Regel, Rueckgabe, Zugangsfragen), lebt in einer
   ausklappbaren Ebene, die der lineare Weg ueberspringt. Ohne sie tragen
   Seiten Gewicht, das 90 Prozent der Leserinnen nie brauchen.
   Gebaut mit <details>/<summary>: kein JavaScript, tastaturbedienbar,
   funktioniert auch wenn Skripte scheitern.
   ══════════════════════════════════════════════════════════════════════════ */
.fk-schublade {
  margin-top: clamp(13px, 2vh, 21px);
  border-top: 1px solid rgba(228, 181, 106, 0.22);
}
.page-severine .fk-schublade { border-top-color: rgba(22, 26, 46, 0.12); }

.fk-schublade > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: clamp(10px, 1.6vh, 14px) 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(228, 181, 106, 0.85);
}
.page-severine .fk-schublade > summary { color: #845A0B; }
.fk-schublade > summary::-webkit-details-marker { display: none; }
.fk-schublade > summary::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 180ms ease;
  margin-left: 2px;
}
.fk-schublade[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.fk-schublade > summary:hover { color: #B31F66; }
.page-companion .fk-schublade > summary:hover { color: #FFFDF8; }

.fk-schublade-inhalt { padding-bottom: clamp(8px, 1.2vh, 13px); }
.fk-schublade-inhalt p {
  margin: 0 0 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(14px, 1.1vw, 15.5px);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 253, 248, 0.78);
}
.page-severine .fk-schublade-inhalt p { color: var(--ink-2); }
.fk-schublade-inhalt p:last-child { margin-bottom: 0; }
.fk-schublade-inhalt strong { font-weight: 500; color: #E4B56A; }
.page-severine .fk-schublade-inhalt strong { color: #845A0B; }

/* ══════════════════════════════════════════════════════════════════════════
   DER SÉVI CHAT (17.08.2026, Andys Entwurf abgenommen: "das ist perfekt so")

   Andys Auftrag woertlich: "links im linken 1/4 der seite die instruktion wie
   man mit dem Chat umgeht, dann grosses Chatfenster in der Mitte. Wir bauen
   noch einen Filter am Anfang ein und fragen: Wie alt ist dein Kind. wir
   nennen das den Sevi Chat."

   🛑 Diese Form BRICHT das Buch, und zwar mit Absicht. Alle anderen 33
   Doppelseiten stehen exakt halb auf Papier, halb auf Nacht. Hier sind es
   26 zu 74 Prozent: der Chat ist kein Kapitel, sondern der Ort, an dem
   gearbeitet wird. Die schmale helle Schiene traegt nur noch die Regie.

   Betrifft Doppelseite 9 (Elternteil sucht sein Wort) und 15 (das Kind
   sucht seins). Dasselbe Bauteil, zwei Fassungen.
   ══════════════════════════════════════════════════════════════════════════ */

.spread[data-mode="sevichat"].is-active { grid-template-columns: 26% 74%; }
@media (max-width: 900px) {
  .spread[data-mode="sevichat"].is-active { grid-template-columns: 1fr; }
}

/* ── Die Schiene: helle Regiespalte ──────────────────────────────────────── */
.spread[data-mode="sevichat"] .sevi-schiene {
  padding: clamp(34px, 5vh, 55px) clamp(21px, 2.2vw, 34px);
  gap: 21px;
}
.sevi-schiene-titel {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(23px, 2vw, 31px);
  line-height: 1.16;
  letter-spacing: -0.026em;
  color: var(--ink);
  margin: 0 0 5px;
}
.sevi-schritte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.sevi-schritte li { display: flex; gap: 11px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.sevi-schritte b { display: block; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
.sevi-pkt {
  flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%; margin-top: 1px;
  background: rgba(179,31,102,0.1); color: #B31F66;
  font-size: 11px; font-weight: 600; display: grid; place-items: center;
}
/* Die Fussnote sitzt am Seitenende, ueber dem Zurueck-Pfeil. */
.sevi-schiene-fuss {
  margin-top: auto; padding-top: 13px;
  border-top: 1px solid rgba(22,26,46,0.1);
  font-size: 12px; line-height: 1.55; color: var(--ink-2);
}
.sevi-schiene-fuss strong { font-weight: 600; color: #845A0B; }

/* ── Die Buehne: dunkle Arbeitsflaeche ───────────────────────────────────── */
.spread[data-mode="sevichat"] .sevi-buehne {
  padding: clamp(34px, 5vh, 55px) clamp(26px, 3vw, 47px);
}
.sevi-marke {
  display: flex; align-items: center; gap: 9px;
  font-size: 10.5px; letter-spacing: 0.2em; font-weight: 500;
  color: #E4B56A; margin-bottom: 21px;
}
.sevi-marke::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #E4B56A; box-shadow: 0 0 12px rgba(228,181,106,0.8);
}

/* ── Vertrauens-Block: was Sévi ist, was mit dem Gespraech passiert ───────
   🛑 Der Satz "es werden keine Daten uebertragen" steht hier BEWUSST NICHT.
   Der Chat schickt den Text an ein Sprachmodell (LeuchtenController Zeile 43),
   ohne diese Uebertragung gaebe es keine Antwort. Was hier steht, ist am Code
   geprueft: die Chat-Endpunkte schreiben nichts in die Datenbank, gespeichert
   wird nur, welche Doppelseite offen war und wie lange. */
.sevi-vertrauen {
  border: 1px solid rgba(255,253,248,0.16); border-radius: 12px;
  background: rgba(255,253,248,0.035);
  padding: 15px 18px; margin-bottom: 21px; max-width: 62ch;
}
.sevi-vertrauen-kopf { font-size: 10px; letter-spacing: 0.2em; color: #E4B56A; margin-bottom: 8px; }
.sevi-vertrauen p { margin: 0 0 7px; font-size: 13px; line-height: 1.55; color: rgba(255,253,248,0.78); }
.sevi-vertrauen p:last-child { margin-bottom: 0; }
.sevi-vertrauen strong { color: #FFFDF8; font-weight: 500; }
.sevi-punkte {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255,253,248,0.1);
}
.sevi-punkte span { font-size: 11.5px; color: rgba(255,253,248,0.6); display: flex; align-items: center; gap: 6px; }
.sevi-punkte span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #E4B56A; }

/* ── Der Filter ──────────────────────────────────────────────────────────── */
.sevi-filter { margin: auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; }
.sevi-filter-frage {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 300;
  font-size: clamp(24px, 2.6vw, 36px); line-height: 1.14; letter-spacing: -0.02em;
  color: #FFFDF8;
}
.sevi-filter-frage .heartbeat { color: #E4B56A; }
.sevi-filter-hint { margin: -14px 0 0; font-size: 13px; color: rgba(255,253,248,0.55); }
.sevi-baender { display: flex; gap: 13px; flex-wrap: wrap; justify-content: center; }
.sevi-band {
  appearance: none; -webkit-appearance: none; cursor: pointer; text-align: left;
  font-family: inherit;
  background: rgba(255,253,248,0.045);
  border: 1px solid rgba(255,253,248,0.16); border-radius: 12px;
  padding: 15px 20px; min-width: 138px;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.sevi-band:hover, .sevi-band:focus-visible { border-color: #E4B56A; background: rgba(228,181,106,0.08); transform: translateY(-1px); }
.sevi-band-alter { display: block; font-size: 19px; font-weight: 500; color: #FFFDF8; }
.sevi-band-was { display: block; font-size: 11.5px; color: rgba(255,253,248,0.5); margin-top: 3px; }
.sevi-band-tag { display: block; font-size: 9.5px; letter-spacing: 0.14em; color: #E4B56A; margin-top: 7px; }
.sevi-band.is-vorgewaehlt { border-color: #E4B56A; background: rgba(228,181,106,0.1); }
.sevi-band.is-vorgewaehlt .sevi-band-alter { color: #E4B56A; }

/* Zustandswechsel: solange gefiltert wird, ist das Gespraech weg und
   umgekehrt. Kein JS-Umbau noetig, nur zwei Klassen am Spread. */
.spread[data-mode="sevichat"] .sevi-gespraech { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Nur die Kind-Fassung hat den Alters-Filter davor. Auf der Eltern-Seite gibt
   es nichts zu filtern (du bist es selbst), darum steht dort das Gespraech
   sofort da und der Vertrauens-Block bleibt daneben stehen. */
.spread[data-sevi="kind"]:not(.sevi-offen) .sevi-gespraech { display: none; }
.spread[data-sevi="kind"].sevi-offen .sevi-filter { display: none; }
.spread[data-sevi="kind"].sevi-offen .sevi-vertrauen { display: none; }
/* Zwei Schritte vor dem Gespraech: erst das Alter, dann der Arbeitsweg. Beide
   nutzen dasselbe Baender-Bauteil, nur eines ist gleichzeitig sichtbar. */
.spread[data-sevi="kind"].sevi-schritt2 .sevi-filter:not(.sevi-filter--weg) { display: none; }
.sevi-filter--weg[hidden] { display: none; }
.spread[data-sevi="kind"].sevi-schritt2 .sevi-filter--weg { display: flex; }
.sevi-filter--weg .sevi-band-alter { font-size: 17px; }

/* Das Chatfenster fuellt jetzt die Flaeche, statt in einer Karte zu sitzen. */
.spread[data-mode="sevichat"] .jrn-chat-box { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.spread[data-mode="sevichat"] .jrn-chat-box .fk-box-chat { flex: 1; min-height: clamp(240px, 34vh, 420px); }

/* Der Buchfalz sitzt in lw-journal.css fest auf left:50% (Zeile 929). Auf der
   Sévi-Chat-Form liegt die Naht aber bei 26 Prozent, sonst laeuft der
   Lichtstreifen mitten durchs Chatfenster. Am 17.08. genau so gemessen. */
.spread[data-mode="sevichat"]::before { left: 26%; }
@media (max-width: 900px) {
  .spread[data-mode="sevichat"]::before { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SÉVI CHAT AUF SCHMALEN GERAETEN (17.08.2026)

   Andys Frage: "hast du das mobile design durchdacht?" Antwort war nein, und
   die Messung danach war eindeutig. iPhone SE, 375x667, Stand vorher:
     Doppelseite 9  , Eingabefeld erst nach 1339px  = zweimal wischen
     Doppelseite 15 , erstes Altersband nach 1277px, letztes nach 1557px
     Regieschiene allein 578px, bevor ueberhaupt etwas kommt
   Auf dem Desktop ist die Schiene ein Viertel der Flaeche, gestapelt frisst
   sie die erste Haelfte des Weges.

   Drei Eingriffe, ALLE nur unter 900px. Die 26-zu-74-Form auf dem Desktop
   bleibt unangetastet.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Die Regie klappt zu ─────────────────────────────────────────────── */
.sevi-klapp > summary { display: none; }        /* breit: kein Griff, immer offen */
.sevi-klapp[open] > .sevi-klapp-inhalt { display: block; }

@media (max-width: 900px) {
  .sevi-klapp {
    border-top: 1px solid rgba(22,26,46,0.12);
    border-bottom: 1px solid rgba(22,26,46,0.12);
    margin: 13px 0;
  }
  .sevi-klapp > summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: 13px; cursor: pointer; list-style: none;
    padding: 11px 0; font-size: 13.5px; font-weight: 500; color: #845A0B;
  }
  .sevi-klapp > summary::-webkit-details-marker { display: none; }
  .sevi-klapp > summary::after {
    content: ""; flex: 0 0 auto; width: 9px; height: 9px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease;
  }
  .sevi-klapp[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .sevi-klapp > summary:hover { color: #B31F66; }
  .sevi-klapp-inhalt { padding-bottom: 13px; }

  /* Die Schiene traegt jetzt nur noch Titel, Griff und die Fussnote. */
  .spread[data-mode="sevichat"] .sevi-schiene { padding-bottom: 21px; gap: 8px; }
  .sevi-schiene-fuss { margin-top: 0; border-top: 0; padding-top: 0; }

  /* ── 2 · Die vier Baender als Raster ───────────────────────────────────── */
  .sevi-baender { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; width: 100%; }
  .sevi-band { min-width: 0; padding: 12px 13px; }
  .sevi-band-alter { font-size: 16px; }
  .sevi-band-was { font-size: 10.5px; }
  .sevi-filter { gap: 16px; margin: 21px 0 0; }
  .sevi-filter-frage { font-size: clamp(21px, 6.5vw, 27px); }

  /* Vertrauens-Block enger, er ist Beipackzettel und nicht der Inhalt. */
  .sevi-vertrauen { padding: 12px 13px; margin-bottom: 16px; }
  .sevi-vertrauen p { font-size: 12px; }
  .sevi-punkte { gap: 11px; }
  .sevi-punkte span { font-size: 10.5px; }

  /* ── 3 · Die Eingabe klebt unten ───────────────────────────────────────── */
  /* 🛑 Das ist die einzige Stelle im Journal, an der sich die Seite wie eine
     App verhaelt statt wie ein Buch. Bewusst, und nur hier: an dieser Stelle
     wird wirklich getippt, und vorher hiess das schreiben, hochwischen,
     lesen, runterwischen, schreiben. Andys Go vom 17.08. */
  .spread[data-mode="sevichat"] .jrn-chat-box .fk-box-form {
    position: sticky; bottom: 13px; z-index: 4;
    background: #151A31;
    padding-top: 9px;
    box-shadow: 0 -13px 21px -8px #151A31;
  }
  .spread[data-mode="sevichat"] .jrn-chat-box .fk-box-chat { min-height: 34vh; }
}

/* Der Vertrauens-Block auf der Nachtseite: eigener Griff, eigene Farben. */
.sevi-zusage { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(255,253,248,0.78); }
.sevi-zusage strong { color: #FFFDF8; font-weight: 500; }

@media (max-width: 900px) {
  /* Auf dem Handy ersetzt der Griff die Ueberschrift des Blocks. */
  .sevi-vertrauen-kopf { display: none; }
  .sevi-klapp--nacht {
    border-top: 0; border-bottom: 1px solid rgba(255,253,248,0.14);
    margin: 0 0 9px;
  }
  .sevi-klapp--nacht > summary { color: #E4B56A; padding: 4px 0 9px; font-size: 12.5px; }
  .sevi-klapp--nacht > summary:hover { color: #FFFDF8; }
  .sevi-klapp--nacht .sevi-klapp-inhalt { padding-bottom: 9px; }
  .sevi-zusage { font-size: 12px; }

  /* Der Zurueck-Knopf sass auf dem Handy MITTEN in der Seite, zwischen Regie
     und Chat, und kostete dort 82px. Er gehoert ans Ende der Doppelseite,
     dorthin, wo auch Weiter steht. */
  .spread[data-mode="sevichat"] .sevi-schiene .page-turn-wrap {
    margin-top: 9px; padding-top: 0; min-height: 0;
  }
  .spread[data-mode="sevichat"] .sevi-schiene .page-turn--back { padding-block: 4px; }
}

/* Feinschliff schmal (17.08.2026, nach der zweiten Messung auf iPhone SE).
   Der erste Bildschirm hatte noch 814px bis zum ersten Altersband. Aufgeteilt
   war das: Schiene 359, Vertrauens-Block 176, Polster 55+34, Folio-Abstand 34.
   Hier kommen die Polster runter, nicht der Inhalt. */
@media (max-width: 900px) {
  .spread[data-mode="sevichat"] .page-folio { margin-bottom: 13px; }
  .spread[data-mode="sevichat"] .sevi-schiene { padding-top: 21px; padding-bottom: 13px; }
  .spread[data-mode="sevichat"] .sevi-buehne { padding-top: 21px; }
  .sevi-marke { margin-bottom: 13px; }
  .sevi-vertrauen { padding: 10px 12px; margin-bottom: 13px; }
  .sevi-punkte { gap: 8px 13px; margin-top: 8px; padding-top: 8px; }
  .sevi-punkte span { font-size: 10px; }
  .sevi-filter { margin-top: 13px; gap: 13px; }
  .sevi-filter-hint { margin-top: -9px; }
}

/* ── Schmal: die Frage kommt VOR den Beipackzettel (Andys Entscheid 17.08.) ──
   Nach dem Umbau standen auf dem iPhone SE nur zwei der vier Altersbaender
   ueber der Kante, weil der Vertrauens-Block 176px davor lag. Andy: "ja du
   musst das unbedingt umbauen!"

   🛑 Nur die REIHENFOLGE auf schmalen Geraeten aendert sich, nichts am Inhalt
   und nichts am Zeitpunkt: der Vertrauens-Block steht weiterhin auf derselben
   Flaeche und wird gelesen, bevor ein einziges Wort getippt wird. Die
   Altersfrage beantwortet ohnehin das Elternteil, nicht das Kind, und dabei
   verlaesst kein Zeichen das Geraet.
   Auf dem Desktop bleibt die abgenommene Reihenfolge unveraendert.
   .sevi-buehne ist eine .page und damit flex column, darum reicht order. */
@media (max-width: 900px) {
  .spread[data-sevi="kind"] .sevi-marke     { order: 1; }
  .spread[data-sevi="kind"] .sevi-filter    { order: 2; margin-top: 0; }
  .spread[data-sevi="kind"] .sevi-vertrauen { order: 3; margin: 21px 0 0; }
  .spread[data-sevi="kind"] .sevi-gespraech { order: 4; }
  .spread[data-sevi="kind"] .page-companion .page-turn-wrap,
  .spread[data-sevi="kind"] .sevi-buehne .page-turn-wrap { order: 5; }
}

/* ── Filter mit DREI Baendern (17.08.2026, nach der Messung) ───────────────
   Der Wechsel von vier auf drei Baender hat das Layout verschlechtert statt
   verbessert: auf dem iPhone SE endete das letzte Band bei 918px statt 661px,
   auf dem Desktop bei 956px statt 614px. Zwei Ursachen, beide gemessen:

   1. `.sevi-filter { margin: auto 0 }` zentriert den Block im freien Raum der
      Buehne. Solange das Gespraech ausgeblendet ist, ist dieser Raum riesig,
      und der Filter rutschte in die Mitte statt unter den Vertrauens-Block.
   2. Das Zwei-Spalten-Raster liess bei drei Baendern die Spalten auf 61px
      zusammenfallen, jeder Knopf brach auf fuenf Zeilen um. Drei gestapelte
      Knoepfe sind kuerzer als zwei zerknautschte Reihen.
   ──────────────────────────────────────────────────────────────────────── */
.sevi-filter { margin: 21px 0 0; }
.sevi-baender { align-self: stretch; }

@media (max-width: 900px) {
  /* Zwei Spalten bleiben, drei gestapelte Knoepfe waren 80px hoeher (gemessen).
     Der eigentliche Fehler war nicht das Raster, sondern dass es mangels
     align-self auf 61px Spaltenbreite zusammenfiel. Das dritte Band nimmt die
     ganze Zeile, sonst steht es allein und schief. */
  /* Gemessen: im Zwei-Spalten-Raster brach der Untertitel um und jeder Knopf
     wurde 159px hoch, drei Knoepfe also fast 400px. Einspaltig mit Alter und
     Untertitel NEBENEINANDER ist jeder Knopf eine Zeile. */
  .sevi-baender { grid-template-columns: 1fr; gap: 7px; }
  .sevi-band {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: 4px 10px; padding: 10px 13px;
  }
  .sevi-band-alter { flex: 0 0 auto; font-size: 15px; }
  .sevi-band-was { margin-top: 0; font-size: 11px; }
  .sevi-band-tag { margin: 0 0 0 auto; }
  .sevi-filter-hint { font-size: 11.5px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   NAVIGATION: aus der halben Seite wird eine Schiene (17.08.2026)

   Andys Befund: "die navigation ist so maechtig und BREIT". Live gemessen auf
   fivemoves.org, und es war schlimmer als breit:
     Lade 720px = exakt die halbe Seite
     erstes Kapitel begann bei 1208px
     Kapitel ohne Scrollen sichtbar: NULL von 33
     Panel-Inhalt 2165px in einem 900px-Fenster
   Wer die Navigation oeffnet, will springen. Er sah zuerst einen ganzen
   Bildschirm Erklaerung: fuenf Etappen, Zeitangaben, Altershinweis.

   Die laengste Zeile im Verzeichnis ist "Ab hier gehoert FUNKE euch". Dafuer
   braucht es keine halbe Bildschirmbreite. Schmal hat einen zweiten Nutzen:
   das Journal bleibt daneben sichtbar, man verliert den Ort nicht.
   ══════════════════════════════════════════════════════════════════════════ */

.toc-panel {
  width: min(100%, 380px);
  padding: clamp(34px, 5vh, 47px) 21px clamp(21px, 4vh, 34px);
}
/* Auf schmalen Geraeten die volle Breite: dort ist die Lade kein Seitenstreifen
   neben dem Journal, sondern die ganze Ansicht. 380px haetten dort einen
   sinnlosen Rand gelassen. */
@media (max-width: 640px) {
  .toc-panel { width: 100%; }
}

/* ── Fortschritt: beantwortet die Frage, wegen der die meisten oeffnen ──── */
.toc-fortschritt { margin-bottom: 21px; }
.toc-fortschritt-text {
  display: block; font-size: 11.5px; letter-spacing: 0.02em; color: var(--ink-2);
}
.toc-fortschritt-balken {
  display: block; height: 3px; border-radius: 2px; margin-top: 7px;
  background: rgba(22,26,46,0.1); overflow: hidden;
}
.toc-fortschritt-balken i {
  display: block; height: 100%; width: 0; background: #B31F66;
  transition: width 420ms var(--ease);
}

/* ── Kapitelzeilen kompakter, damit viele auf einen Schirm passen ───────── */
/* Etappen-Ueberschriften: in einer 380px-Schiene ist die grosse Ziffer plus
   der grosse Name zu wuchtig, das war im ersten Durchgang sofort sichtbar.
   Sie sind Trenner, nicht Ueberschriften. */
.toc-panel .toc-akt-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 15px 0 7px;
  border-bottom: 1px solid rgba(22,26,46,0.1);
  margin-bottom: 5px;
}
.toc-panel .toc-akt-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  color: #845A0B; line-height: 1;
}
.toc-panel .toc-akt-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-2); line-height: 1;
}
.toc-panel .toc-akt-zeit {
  margin-left: auto; font-size: 9.5px; color: var(--ink-3); letter-spacing: 0;
}
.toc-panel .toc-akt-pfeil { display: none; }   /* Etappen sind offen, kein Griff noetig */
.toc-panel .toc-row { padding-block: 7px; gap: 9px; }
.toc-panel .toc-row-name { font-size: 13px; line-height: 1.3; }
.toc-panel .toc-row-sub { font-size: 10.5px; line-height: 1.35; }
.toc-panel .toc-row-mode { font-size: 9.5px; }
.toc-panel .toc-row-num { font-size: 10.5px; }

/* ── Die aktuelle Seite: markiert und beim Oeffnen angesprungen ─────────── */
.toc-row.is-jetzt {
  background: rgba(179,31,102,0.08);
  box-shadow: inset 2px 0 0 #B31F66;
  border-radius: 6px;
}
.toc-row.is-jetzt .toc-row-name { color: #B31F66; font-weight: 600; }

/* ── Der Erklaerblock, jetzt unten in der Schublade ─────────────────────── */
.toc-schublade {
  margin-top: 21px;
  border-top: 1px solid rgba(22,26,46,0.12);
}
.toc-schublade > summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 13px; cursor: pointer; list-style: none;
  padding: 13px 0; font-size: 12.5px; font-weight: 500; color: #845A0B;
}
.toc-schublade > summary::-webkit-details-marker { display: none; }
.toc-schublade > summary::after {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease;
}
.toc-schublade[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.toc-schublade > summary:hover { color: #B31F66; }
.toc-schublade .toc-header-title { font-size: clamp(21px, 2.4vw, 27px); }
.toc-schublade .toc-wegweiser svg { width: 100%; height: auto; }

/* ══ KAUFBAND ═══════════════════════════════════════════════════════════
   Ruhige Zeile am unteren Rand der freien Strecke. Sie soll den Kurs nicht
   zudecken, darum liegt der Grund auf der dunkelsten Nacht-Stufe und nur
   der Knopf traegt Glut. Gold kommt hier nicht vor: Gold kroent, und ein
   Preisschild ist keine Kroenung.
   Hoehe bewusst klein , die Doppelseiten sind ohnehin schon knapp, jeder
   Pixel hier fehlt oben.
   ═══════════════════════════════════════════════════════════════════ */
.fk-kaufband {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: #0D1021;
  border-top: 1px solid rgba(228, 181, 106, .22);
  box-shadow: 0 -8px 34px rgba(0, 0, 0, .38);
  animation: fkKaufbandRein .45s ease both;
}
@keyframes fkKaufbandRein {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.fk-kaufband[hidden] { display: none; }

.fk-kaufband-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 13px 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 21px;
}

.fk-kaufband-text {
  display: flex;
  align-items: baseline;
  gap: 13px;
  min-width: 0;
}
.fk-kaufband-preis {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #FFFDF8;
  white-space: nowrap;
}
.fk-kaufband-dazu {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 253, 248, .68);
}

.fk-kaufband-cta {
  flex: none;
  border: 0;
  cursor: pointer;
  background: #B31F66;
  color: #FFFDF8;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 26px;
  border-radius: 999px;
  transition: background .2s ease, transform .2s ease;
}
.fk-kaufband-cta:hover { background: #9E1759; transform: translateY(-1px); }
.fk-kaufband-cta:focus-visible { outline: 2px solid #E4B56A; outline-offset: 3px; }

/* Die Zeile darf den Weiter-Knopf der Doppelseite nicht zudecken. */
body.hat-kaufband .spread-stage { padding-bottom: 76px; }

/* Handy: der Satz zum Preis faellt weg, der Knopf bekommt die Breite.
   Was bleibt, ist die Frage, wegen der jemand hier unten hinschaut:
   was kostet es und wie komme ich hin. */
@media (max-width: 640px) {
  .fk-kaufband-inner {
    padding: 11px 16px;
    gap: 13px;
  }
  .fk-kaufband-dazu { display: none; }
  .fk-kaufband-cta {
    flex: 1 1 auto;
    padding: 12px 18px;
    font-size: 14px;
  }
  body.hat-kaufband .spread-stage { padding-bottom: 68px; }
}

/* ==========================================================================
   FUNKE · Kaufseite Redesign v3 (19.08.2026)
   Freigegebene Mockups: web/_shotgun/funke-kaufseite/v3.html (links) und
   v3-rechts.html (rechts). Ersetzt auf data-spread="5" die reine
   Leistungsliste links durch einen Zeitfaden ("So sieht euer Weg aus") und
   macht rechts die Kaufkarte zum klaren Held neben einer kleinen,
   untergeordneten Zweitwahl. ALLE Regeln in diesem Block sind auf
   .spread[data-spread="5"] gescopt, sie beruehren keine andere Doppelseite
   und keine andere Datei. Die alten .fk-leistung-Regeln weiter oben bleiben
   unangetastet stehen (Label-Klasse fk-leistung-label wird unten
   weiterverwendet, sonst nichts).
   ========================================================================== */

/* ── LINKS: Kopf ("Was du bekommst" + Claim) ───────────────────────────── */
.spread[data-spread="5"] .page-severine .fk-kauf-kopf {
  margin: 0 0 13px;
}
.spread[data-spread="5"] .page-severine .fk-kauf-claim {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 250;
  font-size: clamp(32px, 2.9vw, 41px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #161A2E;
  margin: 13px 0 0;
}

/* ── LINKS: der Weg als Zeitfaden ────────────────────────────────────────
   flex:1 auf der Liste selbst macht sie zum wachsenden Mittelteil der
   Spalte: sie zieht sich den Leerraum, der sonst unter der Alters-Insel vor
   dem Zurueck-Knopf haengen bliebe (page-turn-wrap hat margin-top:auto,
   siehe weiter oben in dieser Datei , sobald ein Geschwister flex-grow
   traegt, bleibt fuer das auto-margin nichts mehr uebrig).

   19.08.2026, Sicht-Pruefung: der Faden steckte in einer weissen Karte mit
   Magenta-Kante. Ursache war eine Namenskollision, keine Fehlfarbe , die
   Klasse .fk-weg existiert schon in funke-lw-bausteine.css fuer die
   "Weiche" (Alters-Auswahlkarten, Zeile ~774/810 dort) und traegt dort
   bewusst background:#FFFFFF + border-left:#B31F66 + border-radius:14px.
   Diese Regel hier ist zwar spezifischer und gewinnt bei flex/margin/
   padding, setzt aber weder background noch border, darum schlugen genau
   diese zwei Werte aus der fremden Komponente durch. Hier explizit
   neutralisiert, damit der Faden frei auf dem Papier liegt wie im Mockup. */
.spread[data-spread="5"] .page-severine .fk-weg {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  list-style: none;
  /* 19.08. abends: 21px oben und unten auf 13px, letzter Schritt, damit die
     Kaufseite auch auf 1440x900 ganz ins Fenster passt (Zurueck-Knopf lag
     15px darunter). */
  margin: 13px 0;
  padding: 0 0 0 8px;
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
}
.spread[data-spread="5"] .page-severine .fk-weg::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: #C9A468;
  opacity: 0.55;
}
.spread[data-spread="5"] .page-severine .fk-weg li {
  position: relative;
  padding: 19px 0 19px 40px;
}
.spread[data-spread="5"] .page-severine .fk-weg li::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 26px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #FFFDF8;
  border: 2px solid #C9A468;
}
.spread[data-spread="5"] .page-severine .fk-weg li:first-child::before {
  background: #E4B56A;
  border-color: #E4B56A;
}
.spread[data-spread="5"] .page-severine .fk-weg-wann {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #845A0B;
  margin: 0 0 4px;
}
.spread[data-spread="5"] .page-severine .fk-weg-titel {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.3vw, 18px);
  color: #161A2E;
  margin: 0 0 3px;
}
.spread[data-spread="5"] .page-severine .fk-weg-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(14px, 1.1vw, 15.5px);
  line-height: 1.55;
  color: #4B5168;
  margin: 0;
}

/* ── LINKS: Alters-Insel ──────────────────────────────────────────────────
   Warm-Insel statt Haarlinien-Liste, mit den drei Faellen der Weiche
   (Doppelseite 8) vorgezogen. Label bewusst .fk-leistung-label
   (identische Optik, keine Dopplung der Regel). */
.spread[data-spread="5"] .page-severine .fk-alter {
  background: #FAF6EC;
  border: 1px solid #E6DDCB;
  border-radius: 20px;
  /* 19.08. abends eine Stufe enger: die Kaufseite lag auf Desktop ueber der
     Fensterkante, der Zurueck-Knopf stand darunter. Der Kasten liest sich
     mit 18px Polster genauso ruhig. */
  padding: clamp(16px, 1.9vh, 20px) clamp(20px, 1.9vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spread[data-spread="5"] .page-severine .fk-alter-zeile {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.55;
  color: #4B5168;
}
.spread[data-spread="5"] .page-severine .fk-alter-zeile b {
  font-weight: 500;
  color: #161A2E;
}

/* ── RECHTS: Relogin-Hint, linksbuendig statt Pillen-Kasten ─────────────── */
.spread[data-spread="5"] .page-companion .paywall-relogin-hint {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 0 34px;
  max-width: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 13px;
}
.spread[data-spread="5"] .page-companion .paywall-relogin-hint-text {
  font-weight: 300;
  color: rgba(255, 253, 248, 0.55);
}
.spread[data-spread="5"] .page-companion .paywall-relogin-hint-cta {
  color: #E4B56A;
  font-weight: 500;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.spread[data-spread="5"] .page-companion .paywall-relogin-hint-cta:hover {
  background: transparent;
  color: #FFFDF8;
}

/* ── RECHTS: Intro-Zeile ──────────────────────────────────────────────── */
.spread[data-spread="5"] .page-companion .paywall-choices-intro {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #E4B56A;
  text-align: left;
  margin: 0 0 21px;
}

/* ── RECHTS: Karten-Stack vertikal zentriert im Restraum ─────────────────
   Gleicher Trick wie links bei .fk-weg: flex:1 auf dem Stack selbst zieht
   sich den Leerraum zwischen Intro-Zeile und Weiter-Knopf, damit die Karten
   in der Mitte der Nachtseite stehen statt oben zu kleben. */
.spread[data-spread="5"] .page-companion .paywall-choices {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 21px;
  margin: 0;
}

/* ── RECHTS: Weg-1-Karte, der Held ───────────────────────────────────────── */
.spread[data-spread="5"] .page-companion .paywall-choice--buy {
  background: #1B2147;
  border: 1px solid rgba(228, 181, 106, 0.32);
  border-radius: 24px;
  padding: 34px 34px 28px;
}
.spread[data-spread="5"] .page-companion .paywall-choice--buy .paywall-choice-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #C9A468;
  margin: 0 0 14px;
}
.spread[data-spread="5"] .page-companion .paywall-choice--buy .paywall-choice-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 250;
  font-size: clamp(27px, 2.5vw, 33px);
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: #FFFDF8;
  margin: 0 0 13px;
}
.spread[data-spread="5"] .page-companion .paywall-choice--buy .fk-jahr-gold {
  color: #E4B56A;
}
.spread[data-spread="5"] .page-companion .paywall-choice--buy .paywall-choice-deck {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 253, 248, 0.72);
  margin: 0 0 21px;
}
.spread[data-spread="5"] .page-companion .paywall-choice--buy .paywall-choice-price {
  display: flex;
  align-items: baseline;
  gap: 13px;
  margin: 0 0 21px;
}
.spread[data-spread="5"] .page-companion .paywall-choice--buy .paywall-choice-amount {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 200;
  font-size: clamp(38px, 3.4vw, 46px);
  letter-spacing: -0.02em;
  color: #FFFDF8;
}
.spread[data-spread="5"] .page-companion .paywall-choice--buy .paywall-choice-period {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: rgba(255, 253, 248, 0.55);
}
.spread[data-spread="5"] .page-companion .paywall-choice--buy .paywall-choice-cta--buy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  border-radius: 999px;
  border: 0;
  background: #B31F66;
  color: #FFFDF8;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 4px 24px rgba(179, 31, 102, 0.35);
}
.spread[data-spread="5"] .page-companion .paywall-choice--buy .paywall-choice-cta--buy:hover {
  background: #9E1759;
}
.spread[data-spread="5"] .page-companion .paywall-choice--buy .paywall-choice-fine {
  margin-top: 16px;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 253, 248, 0.55);
}
.spread[data-spread="5"] .page-companion .paywall-choice--buy .paywall-choice-fine b {
  font-weight: 500;
  color: rgba(255, 253, 248, 0.8);
}
.spread[data-spread="5"] .page-companion .paywall-choice--buy .paywall-choice-fine a {
  color: #C9A468;
}

/* ── RECHTS: Weg-2-Karte, klein und untergeordnet ────────────────────────── */
.spread[data-spread="5"] .page-companion .paywall-choice--leave {
  background: transparent;
  border: 1px solid #3A4278;
  border-radius: 20px;
  padding: 21px 26px;
  text-align: left;
}
.spread[data-spread="5"] .page-companion .paywall-choice--leave .paywall-choice-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 253, 248, 0.9);
  margin: 0 0 8px;
}
.spread[data-spread="5"] .page-companion .paywall-choice--leave .paywall-choice-deck {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 253, 248, 0.6);
  margin: 0 0 13px;
}
.spread[data-spread="5"] .page-companion .paywall-choice--leave .paywall-choice-cta--leave {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 253, 248, 0.3);
  border-radius: 999px;
  padding: 11px 21px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #FFFDF8;
  background: transparent;
  /* 19.08.2026, Sicht-Pruefung: weder .paywall-choice-cta (lw-journal.css)
     noch diese Regel setzten text-decoration , es gibt in diesem Projekt
     keinen globalen a{text-decoration:none}-Reset, jede Link-Komponente
     muss es selbst tun. Ohne das lief die Browser-Standardunterstreichung
     durch und liess die Kontur-Pille wie ein Textlink aussehen. */
  text-decoration: none;
}
.spread[data-spread="5"] .page-companion .paywall-choice--leave .paywall-choice-cta--leave:hover {
  border-color: #E4B56A;
  color: #FFFDF8;
  text-decoration: none;
}

/* ── MOBIL (<=560px): Kartenpolster knapper, sonst identisch ────────────── */
@media (max-width: 560px) {
  .spread[data-spread="5"] .page-companion .paywall-choice--buy {
    padding: 26px 24px 24px;
  }
  .spread[data-spread="5"] .page-companion .paywall-choice--leave {
    padding: 18px 21px;
  }
}

/* ==========================================================================
   FUNKE · Innentitel-Aufwertung + Merksatz-Insel + Satzspiegel (19.08.2026,
   Andys Entscheid). Ausschliesslich diese Datei betroffen, sie laedt nur
   fuer FUNKE (journal-lw.twig). lw-journal.css (gehoert auch dem Kurs
   Lebendige Weiblichkeit) bleibt unangetastet.
   ========================================================================== */

/* ── Teil 2 · Innentitel (19.08. abends ZURUECK auf Jakarta) ──────────────────────────────────
   lw-journal.css setzt .page-severine-title in Plus Jakarta Sans, Weight 200
   - das ist das EDLE Vorbild, an dem Andy FUNKE misst. Ich hatte hier
   zwischenzeitlich auf 450 erhoeht, aus der falschen Annahme, die Seite
   brauche mehr Titel-Gewicht gegen den Merksatz. Live gegen LW verglichen
   (19.08., Andys Befund "wirkt billig"): schwerer macht es nicht edel,
   es macht es zur Powerpoint-Folie. Die Groesse (fast doppelt so gross wie
   der Merksatz) traegt die Hierarchie bereits, das Gewicht bleibt leicht
   wie im Vorbild. */
.page-severine-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 200;
  font-size: clamp(29px, 3.6vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  max-width: 17ch;
}
/* Akzentwort: Magenta traegt den Akzent, nicht das Gewicht. */
.page-severine-title .heartbeat {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #B31F66;
  font-weight: 400;
}

/* ── Teil 3 · Der Merksatz wird eine Insel ──────────────────────────────────
   .fk-held traegt ab Zeile 687 bereits eine allgemeine Regel (Groesse 20-26,
   Weight 400, Ink), die fuer JEDE Doppelseite mit dieser Klasse gilt, auch
   fuer die spaeteren, bezahlten Seiten. Andys Auftrag heute gilt nur den
   vier freien Doppelseiten (data-spread 1, 2, 3, 4): dort soll der Merksatz
   groesser und mit Luft stehen, OHNE Deko-Linie (19.08. abends zurueckgenommen:
   Andy sah die Haarlinie als "optische Katastrophe", der Abstand um sie riss
   den Lesefluss auseinander). Der Satz traegt seine Betonung jetzt allein
   durch Groesse und Luft. Eigene,
   getrennte Regel statt Umbau der bestehenden: die alte bleibt fuer alle
   anderen Doppelseiten unveraendert gueltig. Vier Selektoren + Klasse
   .fk-held = hoehere Spezifitaet als die alte Regel (.page-severine
   .severine-line.fk-held), gewinnt also unabhaengig von der Position im
   Blatt.
   🛑 Gemessen: s05.twig (data-spread 3) traegt ZWEI Zeilen mit .fk-held
   (data-line 3 und 5), nicht wie im Auftrag beschrieben genau eine. Diese
   Regel ist eine Textzeilen-Klasse, kein Verweis auf eine bestimmte Zeile,
   darum wirkt sie auf beide. Am Twig-Markup wurde nichts geaendert (keine
   Textaenderung ohne Auftrag), siehe Bericht. */
.spread[data-spread="1"] .page-severine .fk-held,
.spread[data-spread="2"] .page-severine .fk-held,
.spread[data-spread="3"] .page-severine .fk-held,
.spread[data-spread="4"] .page-severine .fk-held {
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 400;
  color: #161A2E;
  margin-top: 34px;
  margin-bottom: 34px;
}

/* ── Teil 4 · Satzspiegel: Blaetter-Knopf ans Seitenende ────────────────────
   Bereits vorhanden (Zeile 398-401): .spread .page-severine > .page-turn-wrap
   und .spread .page-companion > .page-turn-wrap tragen margin-top:auto ,
   FUNKE-weit, nicht auf einzelne Doppelseiten begrenzt. Kein neuer Zusatz
   noetig, das Gesetz gilt bereits auf allen betroffenen Doppelseiten. */

/* ==========================================================================
   Feste Seitenhoehe: der 900px-Boden faellt weg (19.08.2026)
   --------------------------------------------------------------------------
   Andys Entscheid: "keine geteilten Designs" - lw-journal.css setzt
   .page { min-height: clamp(900px, 95vh, 1280px) }. Das Minimum von 900px
   ist hoeher als ein iPad quer (rund 690 nutzbare CSS-Pixel): die
   Doppelseite passt nicht ins Fenster, man muss innerhalb einer Doppelseite
   scrollen statt zu blaettern, und auf Seiten mit wenig Inhalt entstehen
   mehrere hundert Pixel tote Flaeche.

   lw-journal.css gehoert FUNKE und Lebendige Weiblichkeit gemeinsam und wird
   NICHT angefasst. Diese Datei laedt laut Template als LETZTE nach
   lw-journal.css und nur fuer FUNKE, darum steht der Fix hier: bei gleicher
   Selektor-Spezifitaet (0,1,0 gegen 0,1,0) gewinnt die spaeter geladene
   Regel ohne dass irgendwo !important noetig ist.

   Der 900px-Boden faellt weg. Die Doppelseite orientiert sich an der
   Fensterhoehe: bleibt der Inhalt darunter, schrumpft die Seite mit und die
   tote Flaeche verschwindet; braucht der Inhalt mehr, waechst die Seite wie
   bisher (min-height, kein max-height).

   Transparenz-Hinweis: web/css/funke-lw-nacht.css traegt bereits seit dem
   15.08.2026 einen aelteren Fix an .page (Abschnitt "Cover-Fit", weiter
   oben in dieser Datei): min-height: min(clamp(900px, 95vh, 1280px),
   calc(100dvh - 42px)). Diese neue, spaeter im Blatt stehende Regel gewinnt
   bei gleicher Spezifitaet und ersetzt jene fuer .page vollstaendig - der
   alte Kommentar dort bleibt als Herleitung stehen, seine min-height-Zeile
   wird ab hier nicht mehr wirksam. Gemessen bei 1024x690 unterscheiden sich
   beide Formeln nur um rund 7px (alt 648px, neu 655px), das Ergebnis fuer
   die Sichtbarkeit der Doppelseiten ist praktisch identisch; siehe Bericht.

   Gestapelte Doppelseite (<=880px, LW-Regel): dort setzt lw-journal.css UND
   der aeltere Cover-Fit-Abschnitt bereits min-height:0, weil das Journal auf
   dem Handy als Lesespalte scrollt (Bauart-Entscheid, keine Fenster-Fit-
   Anforderung). Ohne diese Zeile wuerde die neue, spaeter stehende
   unconditional-Regel oben genau das wieder aushebeln und auf dem Handy
   einen sinnlosen Mindestwert erzwingen. Darum hier erneut min-height:0. */
.page {
  min-height: min(95vh, 1280px);
}

@media (max-width: 880px) {
  .page {
    min-height: 0;
  }
}

/* ==========================================================================
   FUNKE · Statische Seiten, kein Getippe (19.08.2026, Andys Entscheid:
   "ich will statische geile screens ohne dieses getippe")

   lw-journal.css baut jede Doppelseite mit Buchstaben-Tippanimation
   (.severine-line .ink-char, animation: ink-bloom), einem endlos
   pulsierenden Akzentwort (.heartbeat, animation: heartbeat) und diversen
   Ein-/Ausblend-Uebergaengen (transition: opacity/transform) auf Zitate,
   Videorahmen, Karten und Knoepfen. Ausserdem stehen alle diese Bauteile
   ohne die vom JS gesetzte Klasse is-revealed auf opacity:0 , ohne JS
   blieben die Seiten leer.

   Hier: alle Animationen/Uebergaenge auf Nachkommen einer Doppelseite aus,
   UND alle betroffenen Bauteile fest sichtbar, unabhaengig von JS-Klassen.
   Nur der einmalige Blatt-Wechsel selbst (.spread.is-active/.is-leaving,
   page-arrive/page-leave) bleibt unangetastet, darum zielt der Universal-
   Selektor auf NACHKOMMEN von .spread, nie auf .spread selbst. */
.book .spread *,
.book .spread *::before,
.book .spread *::after {
  animation: none !important;
  transition: none !important;
}

/* Alle Bauteile, die im Original per JS-Klasse is-revealed/is-ready ODER
   per Animation mit fill-mode "both" erst sichtbar werden (opacity:0 als
   Startwert, siehe lw-journal.css). Liste durch Sichtung jeder
   "opacity: 0;"-Deklaration im Journal erstellt (grep, 19.08.2026).
   Bewusst ausgelassen: Tooltips, Overlays, Consent-Honeypot und
   Backdrop-Klassen, die weiterhin per Zustand ein-/ausgeblendet werden
   sollen (.toc-backdrop, .tiefer-overlay, .subscribe-consent-input,
   .thumb-register-dot-tooltip, .video-play::before, .page-folio-journal::after). */
.book .bandeau,
.book .severine-line,
.book .severine-line .ink-char,
.book .heartbeat .ink-char,
.book .page-severine-signature,
.book .video-frame,
.book .paths-card,
.book .lesson-mode-card,
.book .subscribe-card,
.book .subscribe-preview,
.book .subscribe-alt,
.book .jrn-chat-cta,
.book .jrn-story-card,
.book .cover-journal-head,
.book .cover-journal-rule,
.book .cover-journal-eyebrow,
.book .cover-severine-byline,
.book .cover-left-footnote,
.book .cover-right-folio,
.book .cover-portrait-frame,
.book .cover-quote,
.book .cover-page-turn-wrap,
.book .cover-rebel-eyebrow,
.book .cover-rebel-line,
.book .cover-q-line,
.book .cover-q-hint,
.book .cover-q-footnote,
.book .page-turn,
.book .page-orient,
.book .fk-held {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* ==========================================================================
   FUNKE · Cover + Doppelseiten 1/3/4: kein Inhalt-oben-Rest-leer mehr
   (19.08.2026, Andys Entscheid, freie Gestaltung)
   Betrifft ausschliesslich data-spread 0/1/3/4. Die Kaufseite
   (data-spread="5") ist fertig und wird hier nicht beruehrt.
   ========================================================================== */

/* ── Cover: die Frage mittig ins Feld statt oben in der Ecke ─────────────
   lw-journal.css setzt .page-cover-left ab 881px eigentlich bereits auf
   justify-content:center, gemessen setzt sich diese Regel live aber nicht
   durch (Cascade-Befund unklar, vermutlich eine weitere, nicht auffindbare
   Fremdregel oder ein Browser-Sonderfall bei dieser Kombination). Hier
   deshalb explizit und mit !important erzwungen, unter .book also nur fuer
   FUNKE. Schriftgroesse, Farbe, Umbruch und Wortlaut der Frage bleiben
   unangetastet, nur die Ausrichtung des Feldes aendert sich. Die Fusszeile
   bleibt am unteren Rand (margin-top:auto). Rechte Cover-Seite unangetastet. */
.book .page-cover-left {
  justify-content: center !important;
}
.book .cover-left-footnote {
  margin-top: auto !important;
  padding-top: clamp(34px, 6vh, 55px);
}

/* ── Doppelseiten 1/3/4 links: Text im Satzspiegel statt oben klebend ────
   Groesserer Absatzabstand (Andys Vorgabe: bis hoechstens 55px) verteilt
   den Text ueber die Hoehe statt oben zu kleben. */
.book .spread[data-spread="1"] .page-severine .severine-line,
.book .spread[data-spread="3"] .page-severine .severine-line,
.book .spread[data-spread="4"] .page-severine .severine-line {
  margin-bottom: clamp(15px, 2.4vh, 30px);
}
.book .spread[data-spread="1"] .page-severine-title,
.book .spread[data-spread="3"] .page-severine-title,
.book .spread[data-spread="4"] .page-severine-title {
  margin-bottom: clamp(20px, 3vh, 36px);
}
.book .spread[data-spread="1"] .page-severine > .page-turn-wrap,
.book .spread[data-spread="3"] .page-severine > .page-turn-wrap,
.book .spread[data-spread="4"] .page-severine > .page-turn-wrap {
  margin-top: auto;
}
/* 19.08. abends: der groessere Absatzabstand allein reichte nicht, unter dem
   letzten Absatz blieb noch ein Loch (~200px) vor Zurueck. Turn-Wrap hat
   bereits margin-top:auto (zieht sich den GESAMTEN Rest, siehe oben). Der
   Titel bekommt jetzt selbst margin-top:auto: beide Auto-Raender teilen
   sich den freien Platz, der Textblock haengt mittig statt oben zu kleben.
   19.08. abends, zweite Runde (Andys Auftrag "ganzer Kurs God Level",
   Doppelseite 1 ist der Massstab): gilt jetzt fuer JEDE Doppelseite mit
   einem Innentitel, nicht mehr nur 1/3/4. Die Regel ist selbstbegrenzend,
   ein Auto-Rand wird 0, sobald die Seite voll ist, sie kann also keine
   volle Seite verschieben. 🛑 Trotzdem nach dieser Aenderung ALLE Seiten
   auf Ueberlauf und Kanten gemessen, nicht blind ausgerollt (Lehre aus der
   Rechtsbuendig-Pauschalregel, die die Zeitlinie auf 3 zerlegt hat). */
.book .spread[data-spread] .page-severine-title {
  margin-top: auto;
}
/* Doppelseite 3 rechts: die drei Familien-Karten + Zitat haengen ebenso
   mittig statt oben zu kleben (sp-famc ist der erste Inhalt nach der
   Bereits-vorhandenen page-companion-Regel weiter unten in dieser Datei,
   die flex-direction:column setzt). */
.book .spread[data-spread="3"] .page-companion .sp-famc,
.book .spread[data-spread="4"] .page-companion .sp-famc {
  margin-top: auto;
}

/* ── Doppelseite 1 rechts: Videorahmen waechst statt oben zu haengen ───── */
.book .spread[data-spread="1"] .page-companion {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.book .spread[data-spread="1"] .page-companion .video-frame {
  /* 19.08.2026: vorher stand hier flex:1. Der Rahmen wuchs damit unbegrenzt
     und schob die Doppelseite ueber die Fensterkante (1055px bei 1024px
     Fenster). Jetzt eine gebundene Obergrenze, den Rest des Raums verteilt
     die Seite selbst. */
  display: flex;
  min-height: 0;
  max-height: min(46vh, 560px);
}
.book .spread[data-spread="1"] .page-companion .video-frame .video-poster,
.book .spread[data-spread="1"] .page-companion .video-frame video,
.book .spread[data-spread="1"] .page-companion .video-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 19.08. abends: space-between plus Turn-Wraps eigenes margin-top:auto
   ziehen den GESAMTEN Leerraum vor den Weiter-Knopf (Auto-Rand gewinnt
   gegen space-between, siehe Kommentar oben an .page-companion). Video,
   Meta und Zitat klebten dadurch oben, darunter ein Loch. Video-Frame
   bekommt selbst margin-top:auto: beide Auto-Raender (hier + Turn-Wrap)
   teilen sich den Rest, der Videoblock haengt jetzt MITTIG statt oben. */
.book .spread[data-spread="1"] .page-companion .video-frame {
  margin-top: auto;
}

/* ── Doppelseite 3 rechts: die drei Familien-Karten ueber die Hoehe ─────── */
.book .spread[data-spread="3"] .page-companion .paths-card,
.book .spread[data-spread="3"] .page-companion [class*="familie"],
.book .spread[data-spread="3"] .page-companion ul,
.book .spread[data-spread="3"] .page-companion ol {
  flex: 1;
}
.book .spread[data-spread="3"] .page-companion {
  display: flex;
  flex-direction: column;
}

/* ── Doppelseite 4 rechts: Portrait waechst, Kennzahlen bleiben unten ──── */
.book .spread[data-spread="4"] .page-companion {
  display: flex;
  flex-direction: column;
}
.book .spread[data-spread="4"] .page-companion .cover-portrait-frame,
.book .spread[data-spread="4"] .page-companion .video-frame {
  flex: 1;
  min-height: 0;
}

/* ── COVER-ZITAT LINKSBUENDIG (19.08.2026, Andys Entscheid) ─────────────────
   Andys Befund: "passt der text unter dem Bild WIRKLICH? ist das
   verkaufsfoerdernd" - nein. Der alte Wortlaut erklaerte die Methode ("Sie
   wohnt im Koerper"), bevor der Leser ein Beduerfnis formuliert hatte, und
   klang fuer Neulinge esoterisch. Neuer Wortlaut beantwortet die Cover-Frage
   direkt und nimmt die Schuld weg (Text aus Doppelseite 1, Wiederholung vor
   dem Kauf ist Absicht).
   Dazu die Ausrichtung: lw-journal.css setzt das Zitat ab 1024px rechtsbuendig
   mit Rahmen rechts. Das bricht die Linkskante gegen die linksbuendige Frage
   auf der Papierseite. Gilt nur fuer FUNKE, LW bleibt unberuehrt. */
.book .cover-quote {
  text-align: left;
  border-left: 1px solid rgba(228, 181, 106, 0.32);
  border-right: none;
  padding-left: clamp(13px, 1.6vw, 21px);
  padding-right: 0;
}

/* Cover-Fuss freihalten (19.08.2026): seit das Kaufband auch auf dem Cover
   steht ("der schnellkauf fehlt"), lag es ueber dem Knopf und der Zeile
   "Kostenloser Einblick. Ohne Anmeldung." Das Band ist 70px hoch. */
/* zurueckgenommen 19.08.2026: war nur noetig, solange das Kaufband
   waagrecht am Fensterboden klebte. Mit dem Lesezeichen am Rand entfaellt es. */

/* Cover auf flachen Fenstern (19.08.2026): Auf einem iPad quer stehen nur rund
   690 CSS-Pixel Hoehe zur Verfuegung, der Cover-Inhalt brauchte 746. Folge:
   der Knopf "Zeig mir den Weg" und die Zeile darunter fielen unter die Kante,
   zusaetzlich verdeckt vom Kaufband. Das Portrait ist das einzige Element mit
   Spielraum, es bekommt eine an die Fensterhoehe gebundene Obergrenze. */
@media (max-height: 860px) {
  .book .spread[data-spread="0"] .page {
    padding-top: clamp(28px, 4vh, 48px);
    padding-bottom: clamp(28px, 4vh, 48px);
  }
  .book .page-cover-right .cover-portrait-frame {
    max-height: min(40vh, 480px);
    overflow: hidden;
  }
  .book .page-cover-right .cover-portrait-poster {
    height: 100%;
    background-size: cover;
    background-position: center 22%;
  }
}

/* Doppelseite 1: Obergrenze fuer die Seite (19.08.2026). Der Videorahmen
   waechst per flex, ohne Deckel wuchs die Doppelseite mit und lief unter die
   Fensterkante (gemessen 1055px bei 1024px Fenster, 841px bei 664px). Mit
   Deckel schrumpft der Rahmen und die Seite bleibt im Bild. 86px sind das
   Kaufband plus Luft. */
/* zurueckgenommen 19.08.2026: war nur noetig, solange das Kaufband
   waagrecht am Fensterboden klebte. Mit dem Lesezeichen am Rand entfaellt es. */


/* ══ SCHNELLKAUF-LESEZEICHEN (19.08.2026) ══════════════════════════════════
   Nachbau der bewaehrten LW-Loesung (.journal-ribbon in lw-journal.css):
   senkrechtes Leseband am rechten Frame-Rand statt waagrechtem Band am
   Fensterboden. Es sitzt im Seitenrand und ueberlappt keinen Inhalt, dadurch
   entfallen saemtliche Hoehen-Korrekturen, die das alte Band noetig machte.
   FUNKE-Unterschied zu LW: der Preis steht mit drauf, er ist hier das
   Verkaufsargument. */
.fk-lesezeichen {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 45;
  display: flex; flex-direction: column; align-items: center; gap: 13px;
  width: 46px; padding: 21px 0;
  border: 0; border-radius: 15px 0 0 15px;
  background: linear-gradient(180deg, #B31F66 0%, #9E1759 100%);
  color: #FFFDF8; cursor: pointer;
  box-shadow: -10px 0 30px -10px rgba(179, 31, 102, .55),
              0 1px 0 rgba(255, 255, 255, .22) inset;
  transition: transform 340ms cubic-bezier(.22,.61,.36,1), box-shadow 340ms cubic-bezier(.22,.61,.36,1);
}
.fk-lesezeichen[hidden] { display: none; }
.fk-lesezeichen-label {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600; font-size: 14px; letter-spacing: .05em; white-space: nowrap;
}
.fk-lesezeichen-preis {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400; font-size: 12.5px; letter-spacing: .08em; white-space: nowrap;
  color: rgba(255, 253, 248, .82);
}
.fk-lesezeichen:hover { transform: translateY(-50%) translateX(-5px); box-shadow: -16px 0 38px -10px rgba(179,31,102,.7); }
.fk-lesezeichen:focus-visible { outline: 2px solid #E4B56A; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .fk-lesezeichen { transition: none; } }

/* Flache Fenster (19.08.2026): Auf einem iPad quer oder einem kleinen
   Browserfenster stehen nur rund 660 bis 690 CSS-Pixel Hoehe zur Verfuegung.
   Die Doppelseite brauchte dort 733. Rand und Zeilenabstand geben den noetigen
   Spielraum, ohne dass Schriftgroessen angetastet werden. */
@media (max-height: 860px) {
  .book .spread .page {
    /* 19.08. abends: Titel klebte am oberen Rand (24px), waehrend unten auf
       den meisten Seiten 80-200px frei blieben. Ein Fibonacci-Schritt mehr
       oben (34px statt 24px), unten unangetastet. */
    padding-top: clamp(34px, 5vh, 55px);
    padding-bottom: clamp(24px, 3.6vh, 44px);
  }
  .book .spread .page-folio { margin-bottom: clamp(18px, 3vh, 30px); }
  .book .spread .severine-line { line-height: 1.55; }
  .book .spread .page-turn-wrap { padding-top: clamp(13px, 2vh, 21px); }
  /* 19.08. abends: der Briefkopf kostet auch in seiner kompakten Fassung
     Hoehe. In flachen Fenstern (Andys 890x664, iPad quer) eine Stufe kleiner,
     damit er keine Doppelseite ueber die Kante schiebt. */
  .book .page-severine .severine-byline-portrait {
    width: clamp(40px, 5.6vh, 48px);
    height: clamp(40px, 5.6vh, 48px);
  }
  .book .page-severine .severine-byline { margin-bottom: clamp(13px, 2vh, 18px); }
  /* Sechs Blockade-Kacheln (Doppelseite 28) brauchen in flachen Fenstern
     enger gesetzte Zeilen, sonst steht der Zurueck-Knopf unter der Kante. */
  .book .page-severine .fk-sit { gap: 8px; margin-top: 13px; }
  .book .page-severine .fk-sit-b { padding: 8px 11px 8px 13px; }
  .book .page-severine .fk-sit-b .s-k { font-size: 14px; }
  .book .page-severine .fk-sit-b .s-v { font-size: 12.5px; }
}

/* Initiale ganz raus (19.08.2026, zweite Runde): Andys Befund zum Gold-
   Fix von heute Nachmittag - "wie ein Layout-Rest, weil es nur einmal pro
   Seite passiert". lw-journal.css setzt den ersten Buchstaben in Magenta,
   diese Regel nimmt ihm jede Sonderfarbe: gleiche Farbe wie der Rest vom
   Absatz, keine Initiale mehr, auf JEDER Seite. */
.book .severine-line.is-first::first-letter,
.book .severine-line.is-first.is-revealed::first-letter {
  color: inherit;
}

/* Doppelseite 3 (19.08.2026): Die Seite trug zwei Merksaetze mit Goldlinie,
   damit hebt sich der Held auf. Der Beweis-Satz bleibt der Merksatz, weil er
   zur Ueberschrift "Ihr seid nicht die Ersten" gehoert. Der Deal-Satz zum
   Schluss bleibt betont, aber ohne Marke, er ist die Pointe, nicht der Kern. */
.book .spread[data-spread="3"] .page-severine .fk-schluss {
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 400;
  color: #161A2E;
}

/* Doppelseite 3 auf flachen Fenstern (19.08.2026): Die drei Familien-Karten
   sind das Schwergewicht der Seite und bleiben, aber sie brauchten zusammen
   703px bei 664px Fensterhoehe. Kompaktere Polster und Abstaende holen die
   fehlenden Pixel, ohne dass eine Karte wegfaellt oder Schrift schrumpft. */
@media (max-height: 860px) {
  .book .spread[data-spread="3"] .page-companion .sp-famc { gap: 8px; }
  .book .spread[data-spread="3"] .page-companion .sp-famc .fam {
    padding-top: 13px;
    padding-bottom: 13px;
  }
  .book .spread[data-spread="3"] .page-companion .companion-quote { margin-top: 13px; }
}

/* Doppelseite 4 auf flachen Fenstern (19.08.2026): Portrait plus drei
   Kennzahlen plus Zitat brauchten 757px bei 664px Fensterhoehe. Das Portrait
   ist wie auf dem Cover das Element mit Spielraum, der Text bleibt unangetastet. */
@media (max-height: 860px) {
  .book .spread[data-spread="4"] .page-companion .fk-vita-portrait {
    max-height: min(34vh, 300px);
    background-size: cover;
    background-position: center 20%;
  }
  .book .spread[data-spread="4"] .page-companion .fk-vita-zeile { padding-top: 9px; padding-bottom: 9px; }
  .book .spread[data-spread="4"] .page-companion .companion-quote { margin-top: 13px; }
}

/* Vita-Zahlen auf Doppelseite 4 (19.08.2026, Andy: "die zahlen rechts sehen
   ultra komisch aus"). Sie standen rechtsbuendig in einer 74px-Spalte: die
   "9" klebte weit rechts mit einem Loch davor, "25+" fuellte die Spalte, die
   linke Kante flatterte. Dazu wirkten 34px grosse Goldzahlen in einer Spalte
   wie eine Kennzahlen-Kachel, also nach Firmenbilanz statt nach einem
   Menschen, der sich vorstellt.
   Neu: keine Spalte mehr, Zahl und Beschriftung laufen als eine Zeile,
   linksbuendig auf derselben Kante wie alles andere. Die Zahl bleibt Gold und
   bleibt groesser, aber sie fuehrt den Satz an, statt daneben zu stehen. */
.book .spread[data-spread="4"] .page-companion .fk-vita-zeile {
  display: block;
  text-align: left;
}
.book .spread[data-spread="4"] .page-companion .fk-vita-wert {
  display: inline;
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 500;
  line-height: 1.5;
  margin-right: .34em;
  min-width: 0;
  text-align: left;
}
.book .spread[data-spread="4"] .page-companion .fk-vita-was {
  display: inline;
  text-align: left;
}

/* ══ KEINE BEWEGUNG (19.08.2026, Andys Entscheid) ══════════════════════════
   "brauchen wir denn bewegung? das ist eine legacy die nicht mehr notwendig
   ist. ich will statische geile screens ohne dieses getippe."
   Die Textzeilen bauten sich Buchstabe fuer Buchstabe auf (4 bis 5 Sekunden
   pro Doppelseite), das Akzentwort pulsierte endlos zwischen Magenta und Gold
   (in der Goldphase nur 1.85:1 Kontrast auf Papier), die Doppelseite atmete.
   🛑 Die Falle: die Zeilen stehen auf opacity:0 und werden nur per JS-Klasse
   sichtbar. Das blosse Abschalten der Animation ergaebe LEERE Seiten. Darum
   werden sie hier ausdruecklich sichtbar gestellt, unabhaengig vom Skript.
   Der einmalige Blaetter-Uebergang bleibt, er zeigt den Seitenwechsel. */
.book .severine-line,
.book .companion-quote,
.book .companion-quote-cite,
.book .video-frame,
.book .page-orient,
.book .page-severine-signature,
.book .cover-quote,
.book .cover-portrait-frame,
.book .page-turn,
.book .fk-held,
.book .fk-schluss,
.book .bandeau {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
}
.book .severine-line .ink-char {
  /* 🛑 FEHLER 19.08.2026, Andy hat ihn live gesehen: .ink-char traegt in
     lw-journal.css als GRUNDFARBE var(--magenta) (das ist der "noch nicht
     getippte" Zustand vor der Animation). Erst die Animation ink-bloom faerbt
     am Ende auf color:inherit um. Wer nur animation:none setzt, ohne die
     Farbe selbst zu setzen, friert jeden Buchstaben auf Magenta ein, statt
     auf die normale Lesefarbe. Fix: color explizit setzen, nicht nur die
     Animation abschalten. */
  animation: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  color: inherit !important;
}
.book .severine-line.is-revealed .heartbeat,
.book .heartbeat,
.book .spread-breathing {
  animation: none !important;
  opacity: 1 !important;
}
.book .heartbeat { color: #B31F66; }
.book .page-companion .heartbeat,
.book .page-cover-right .heartbeat { color: #E4B56A; }

/* Kaufseite auf flachen Fenstern (19.08.2026): Andys eigenes Fenster ist
   890x664, das ist flacher als das iPad-Testmass 1024x690, das ich zuvor
   benutzt hatte. Dort ragten Zurueck- und Weiter-Knopf unter die Kante.
   Gleiches Rezept wie bei Cover/Seite 1/3/4: Rand und Kartenpolster auf
   flachen Fenstern zurueckdrehen, Text und Preis bleiben unangetastet. */
@media (max-height: 860px) {
  .book .spread[data-spread="5"] .page {
    padding-top: clamp(20px, 3vh, 36px);
    padding-bottom: clamp(20px, 3vh, 36px);
  }
  .book .spread[data-spread="5"] .page-companion .paywall-relogin-hint { margin-bottom: 8px; }
  .book .spread[data-spread="5"] .page-companion .paywall-choices-intro {
    margin: 0 0 clamp(10px, 1.6vh, 16px);
  }
  .book .spread[data-spread="5"] .page-companion .paywall-choices {
    gap: clamp(10px, 1.6vh, 16px);
  }
  .book .spread[data-spread="5"] .page-companion .paywall-choice--buy {
    padding: clamp(16px, 2.4vh, 24px) clamp(18px, 2.6vh, 26px) clamp(13px, 1.8vh, 18px);
  }
  .book .spread[data-spread="5"] .page-companion .paywall-choice--buy .paywall-choice-eyebrow { margin-bottom: 8px; }
  .book .spread[data-spread="5"] .page-companion .paywall-choice--buy .paywall-choice-title { margin-bottom: 8px; }
  .book .spread[data-spread="5"] .page-companion .paywall-choice--buy .paywall-choice-deck { margin-bottom: 11px; }
  .book .spread[data-spread="5"] .page-companion .paywall-choice--buy .paywall-choice-price { margin-bottom: 11px; }
  .book .spread[data-spread="5"] .page-companion .paywall-choice--buy .paywall-choice-cta--buy { min-height: 44px; }
  .book .spread[data-spread="5"] .page-companion .paywall-choice--buy .paywall-choice-fine { margin-top: 9px; }
  .book .spread[data-spread="5"] .page-companion .paywall-choice--leave { padding: clamp(13px, 2vh, 18px) clamp(16px, 2.2vh, 21px); }
}

/* Kaufseite links auf flachen Fenstern (19.08.2026): der Zeitfaden ist mit
   vier Stationen a 19px Polster oben/unten plus der Alters-Insel intrinsisch
   hoeher als 664px Fensterhoehe zulassen. Kein Text faellt weg, nur das
   Polster zwischen den Stationen wird enger. */
@media (max-height: 860px) {
  .book .spread[data-spread="5"] .page-severine .fk-kauf-kopf { margin-bottom: 8px; }
  .book .spread[data-spread="5"] .page-severine .fk-kauf-claim { margin-top: 6px; font-size: clamp(23px, 2.4vw, 30px); line-height: 1.1; }
  .book .spread[data-spread="5"] .page-severine .fk-weg { margin: 6px 0; }
  .book .spread[data-spread="5"] .page-severine .fk-weg li { padding: 5px 0 5px 40px; }
  .book .spread[data-spread="5"] .page-severine .fk-weg-wann { margin-bottom: 1px; font-size: 10px; }
  .book .spread[data-spread="5"] .page-severine .fk-weg-titel { font-size: 15px; margin-bottom: 1px; }
  .book .spread[data-spread="5"] .page-severine .fk-weg-text { line-height: 1.3; font-size: 13px; }
  .book .spread[data-spread="5"] .page-severine .fk-alter { padding: 10px 16px; gap: 3px; }
  .book .spread[data-spread="5"] .page-severine .fk-alter-zeile { line-height: 1.3; font-size: 13px; }
}

/* ══ FLACHE FENSTER: EINE REGEL FUER ALLE DOPPELSEITEN (19.08.2026) ════════
   Gemessen live an allen 33 Doppelseiten: auf 1366x1024 laeuft keine einzige
   ueber. Auf 890x664 (Andys Fenster, der Grenzfall knapp oberhalb des
   Umbruchs bei 860px) liefen 19 von 28 bezahlten Seiten ueber, 11 bis 189px.
   Statt 19 Einzelfixes hier eine Regel fuer alle: Polster, Zeilenabstaende
   und Karten-Innenraeume geben nach, sobald das Fenster flach ist. KEIN Text
   faellt weg, KEINE Schriftgroesse aendert sich ausser bei den Bausteinen,
   die als Kachel gesetzt sind und dort ohnehin ueberdimensioniert waren. */
@media (max-height: 860px) {
  /* Fliesstext und Merksatz */
  .book .spread .severine-line { margin-bottom: clamp(11px, 1.8vh, 21px); }
  /* 🛑 Andys Befund 21.08.: "warum ist der Abstand zum Satz vorher etwas
     groesser als der darunter?" Gemessen auf Doppelseite 6 bei 1440x800:
     oben 24px, unten 14.4px. Ursache ist die Zeile darueber. Der Merksatz
     bekommt in .page-severine .severine-line.fk-held oben UND unten
     clamp(21px,3vh,34px), symmetrisch. Die Sparregel hier hat dieselbe
     Spezifitaet (0,3,0), steht spaeter im Blatt und setzt NUR margin-bottom,
     also kappte sie einseitig den unteren Abstand. Auf Fenstern ueber 860px
     stand der Satz immer symmetrisch, nur auf flachen nicht.
     Loesung: die Held-Zeile spart auf beiden Seiten gleich viel. */
  .book .spread .severine-line.fk-held {
    margin-top: clamp(16px, 2.6vh, 28px);
    /* 🛑 NACHGEMESSEN, erster Anlauf war falsch: gleiche Margins ergeben hier
       KEINE gleichen Luecken. Die Seite ist ein Flex-Container, dort
       kollabieren Margins nicht, sie addieren sich. Ueber der Held-Zeile
       liegen also margin-bottom des Vorgaengers PLUS ihr eigenes margin-top
       (14.4 + 20.8 = 35px), unter ihr nur ihr eigenes margin-bottom (20.8),
       weil die Folgezeile margin-top 0 hat. Live gemessen: oben 35, unten 21.
       Damit beide Luecken gleich sind, traegt sie unten die Summe. */
    margin-bottom: calc(clamp(16px, 2.6vh, 28px) + clamp(11px, 1.8vh, 21px));
  }
  .book .spread .page-severine-title { margin-bottom: clamp(14px, 2.4vh, 28px); }
  .book .spread .fk-held { font-size: clamp(17px, 1.5vw, 21px); }
  .book .spread .fk-held::before { margin-bottom: 13px; }

  /* Rechte Seite: Zitat, Bildunterschrift, Regie-Kaesten */
  .book .spread .companion-quote { margin-top: clamp(10px, 1.6vh, 18px); font-size: clamp(16px, 1.5vw, 20px); }
  .book .spread .companion-quote-cite { margin-top: 6px; }
  .book .spread .video-meta { margin-top: 8px; }
  .book .spread .fk-tun { margin-top: clamp(10px, 1.6vh, 18px); padding: 12px 16px; }
  .book .spread .fk-vorspann { margin-bottom: clamp(10px, 1.6vh, 16px); padding-bottom: clamp(8px, 1.4vh, 14px); }

  /* 🛑 KORREKTUR 20.08.2026. Sévi hat es auf ihrem 13-Zoll-Mac gefunden, ich
     habe es live an allen 33 Doppelseiten nachgemessen: bei 1440x800 waren
     16 Stellen beschnitten und 10 lagen uebereinander, bei 1440x900 keine
     einzige. Der Satz "KEIN Text faellt weg" im Kommentar unten war falsch.

     Ein max-height auf einer BOX laesst kein Polster nach, es kappt. Der
     Grafikrahmen wurde auf 416px gedeckelt, die Zeichnung darin blieb 442px
     hoch. Auf Doppelseite 21 lag darum "Beides zaehlt. Kein Beweis noetig."
     halb abgeschnitten auf der Zeile "Veraenderung kommt in Wellen".

     Der Widerspruch: weiter unten in dieser Datei stand fuer die Grafiken
     laengst die richtige Loesung (SVG selbst deckeln, width:auto, skaliert
     proportional), nur mit einem anderen Wert. Zwei Deckel, 58vh gegen 52vh,
     der kleinere schnitt den groesseren ab. Hier bleibt darum kein Boxdeckel
     mehr stehen; den Wert setzt die SVG-Regel weiter unten, an EINER Stelle.
     Videos behalten ihren Rahmendeckel: festes Seitenverhaeltnis, kein Text. */
  .book .spread .video-frame:not(.fk-grafik) { max-height: min(52vh, 620px); }

  /* Aufzaehlungen und Karten-Bausteine */
  .book .spread .fk-leistung-zeile { padding-top: 8px; padding-bottom: 8px; }
  .book .spread .fk-moment,
  .book .spread .fk-regie { padding: 12px 16px; margin-top: 10px; }
}

/* Grosse Bausteine auf flachen Fenstern (19.08.2026, zweiter Durchgang).
   Nach der allgemeinen Regel blieben einzelne Seiten uebrig, bei denen ein
   einzelner Baustein die Doppelseite aufschiebt. Gemessen bei 890x664:
   sp-satzk 504px (Spread 22), sp-cfswap 349px (18), sp-track 226px (17),
   fk-regie 231px (32), fk-tun bis 150px (17). Sie bekommen eine an die
   Fensterhoehe gebundene Obergrenze und engere Innenpolster. Kein Text faellt
   weg. Die Chat-Seiten 9 und 15 sind bewusst ausgenommen: sie stapeln bei
   dieser Breite ohnehin, dort ist Scrollen seit Andys Entscheid vom 16.08. in
   Ordnung. */
@media (max-height: 860px) {
  /* 🛑 Deckel zurueckgenommen 20.08.2026. Hier standen Karten mit Text drin,
     ein Deckel schneidet den ab: auf Doppelseite 22 fehlten 72px, die dritte
     Satzkarte endete mitten im Satz und das Zitat lag 51px darauf. Auf 8
     fehlten 133px. Text kann man nicht schrumpfen, nur weglassen oder
     scrollen lassen. Gemessen kostet das Zuruecknehmen 32px (Seite 22)
     bzw. 63px (Seite 8) unter der Fensterkante. Das ist der bessere Handel:
     ein bezahlter Kurs darf scrollen, aber keine halben Saetze zeigen.
     Die engeren Innenabstaende darunter bleiben, die geben wirklich nach. */
  .book .spread .sp-satzk > *,
  .book .spread .sp-track > * { margin-top: 0; margin-bottom: 8px; }

  .book .spread .fk-regie {
    padding: 12px 16px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .book .spread .fk-tun { padding: 10px 14px; margin-top: 10px; }
  .book .spread .fk-tun-text { line-height: 1.4; }
  .book .spread .fk-schublade { margin-top: 8px; }
  .book .spread .fk-moment-in { padding: 12px 16px; }

  /* Fliesstext-Zeilen auf sehr textreichen Seiten enger fuehren */
  .book .spread .severine-line { line-height: 1.5; }
}

/* ══ SCHNELLKAUF AUF DEM HANDY: BAND UNTEN, NICHT SEITLICH ════════════════
   🛑 FEHLER 19.08.2026, Andy hat ihn auf dem iPhone gesehen: Das seitliche
   Lesezeichen loest das Hoehenproblem im Buchlayout, ist auf dem Handy aber
   falsch. Dort gibt es kein Buch, die Seiten liegen untereinander, und ein
   senkrechter Balken klebt permanent mitten im Bild.
   Unter der Umbruchbreite (860px, dort stapelt das Spread) wird daraus
   wieder das, was es vorher war: ein waagrechtes Band, fest am unteren
   Fensterrand, das beim Scrollen stehen bleibt. Der Preis steht mit drauf,
   die Schrift laeuft wieder normal statt senkrecht. */
@media (max-width: 860px) {
  .fk-lesezeichen {
    position: fixed;
    top: auto; bottom: 0; left: 0; right: 0;
    transform: none;
    width: auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
    box-shadow: 0 -8px 26px -12px rgba(21, 26, 49, .6),
                0 1px 0 rgba(255, 255, 255, .22) inset;
    min-height: 56px;
  }
  .fk-lesezeichen-label,
  .fk-lesezeichen-preis {
    writing-mode: horizontal-tb;
    text-orientation: initial;
  }
  .fk-lesezeichen-label { font-size: 15px; }
  .fk-lesezeichen-preis { font-size: 14px; }
  .fk-lesezeichen:hover { transform: none; }

  /* Platz schaffen, damit das Band nichts verdeckt */
  body.hat-kaufband .spread-stage { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* Inhalt-Knopf ueberlagert die Kolumnenzeile (19.08.2026, gemessen auf
   Pixel 412x915, Galaxy Z Flip 344x882 und 320x658): Der Knopf liegt fest
   oben rechts, die Doppelseite beginnt darunter mit dem Folio bzw. der
   ersten Klappzeile. Auf schmalen Geraeten reicht die Zeile bis unter den
   Knopf und wird verdeckt.
   Loesung: die Seite bekommt oben so viel zusaetzliches Polster, dass der
   Knopf frei steht. Der Knopf selbst bleibt, wo er ist. */
@media (max-width: 860px) {
  .book .spread .page:first-child {
    padding-top: calc(clamp(24px, 3.6vh, 44px) + 34px);
  }
  .book .spread .page-folio,
  .book .spread .sevi-schiene-titel {
    padding-right: 104px;
  }
}

/* Blaetter-Knopf-Bereich auf flachen Fenstern (19.08.2026, dritter Durchgang).
   Gemessen: .page-turn-wrap ist 78 bis 102px hoch, auf jeder Doppelseite,
   also der groesste Einzelposten nach den Bausteinen. Auf flachen Fenstern
   reicht die halbe Hoehe, die Tippflaeche des Knopfes bleibt ueber 44px. */
@media (max-height: 860px) {
  .book .spread .page-turn-wrap {
    padding-top: 8px;
    padding-bottom: 0;
    min-height: 0;
  }
  .book .spread .page-turn { min-height: 44px; }
  .book .spread .fk-tun { padding: 8px 13px; margin-top: 8px; }
  .book .spread .fk-tun-label { margin-bottom: 2px; }
}

/* Ablauf-Grafik auf Doppelseite 2 (19.08.2026): Der Grafikrahmen ist auf
   1366x1024 mit 738px hoeher als die Doppelseite (973px minus Polster und
   Blaetter-Knopf) erlaubt, dadurch lief sie 38px unter die Kante. Die Grafik
   traegt vier Schritte plus Alters-Tabelle, sie bleibt vollstaendig, wird aber
   an die Fensterhoehe gebunden und skaliert mit. */
.book .spread[data-spread="2"] .page-companion .video-frame {
  max-height: min(64vh, 700px);
}
.book .spread[data-spread="2"] .page-companion .sp-gfx,
.book .spread[data-spread="2"] .page-companion .sp-gfx svg {
  max-height: min(62vh, 660px);
  height: auto;
  width: auto;
  max-width: 100%;
}

/* ==========================================================================
   BRIEFKOPF (severine-byline) auf FUNKE-Mass
   19.08.2026 abends. LWs Original ist clamp(64px, 6vw, 88px) gross; das
   passt dort, weil LW-Seiten weniger Text tragen. Bei FUNKE kostete der
   Block gemessene 120px pro Seite (86px Foto + 34px Abstand) und schob
   drei Doppelseiten der Etappe 2 ueber die Fensterkante (Spread 6: +123px,
   Spread 7: +97px, Spread 10 in Andys Fenster: +75px). Genau der Betrag,
   den der Briefkopf mitbringt.
   Foto auf 56px, Abstand auf 21px: der Block bleibt klar als Absender
   lesbar, kostet aber nur noch rund 77px statt 120.
   ========================================================================== */
.book .page-severine .severine-byline {
  margin-bottom: clamp(16px, 2.4vh, 21px);
}
.book .page-severine .severine-byline-portrait {
  width: clamp(44px, 3.9vw, 56px);
  height: clamp(44px, 3.9vw, 56px);
}
.book .page-severine .severine-byline-name {
  font-size: clamp(16px, 1.5vw, 19px);
}

/* Videoblock haengt mittig statt oben zu kleben, auf JEDER Doppelseite
   (19.08. abends). Auf Doppelseite 1 stand diese Regel schon einzeln; das
   Loch darunter war auf allen Video-Seiten dasselbe (Spread 6 gemessen:
   rund 450px unter der Bildunterschrift). Der Blaetter-Knopf traegt bereits
   margin-top:auto, mit diesem zweiten Auto-Rand teilen sich beide den
   freien Raum. Nur wenn der Rahmen wirklich der erste Inhalt der Spalte
   ist, sonst wuerde er einen Vorspann oder eine Ueberschrift ueber sich
   wegdruecken. */
.book .spread[data-spread] .page-companion > .video-frame:first-child {
  margin-top: auto;
}

/* Vorspann linksbuendig (19.08. abends, Andys Befund am Beispiel "Du gehst
   zuerst"). funke-lw-bausteine.css setzt ihn rechtsbuendig, mit der eigenen
   Einschraenkung im Kommentar dort: "Der Text ist kurz genug dafuer; waere
   er laenger, waere Lesbarkeit wichtiger als Flucht." Genau der Fall ist
   eingetreten: der Satz bricht um und die zweite Zeile haengt als Rest an
   der rechten Kante. Mehrzeiliger Flattersatz-links ist ausserdem schwerer
   zu lesen, weil das Auge den Zeilenanfang jedes Mal neu suchen muss.
   Die ZITATE bleiben rechtsbuendig, das ist Andys Vorgabe vom 12.08. und
   betrifft den Nachhall der Seite, nicht diese Erklaerzeile. */
.book .spread[data-spread] .page-companion .fk-vorspann {
  text-align: left;
}
.book .spread[data-spread] .page-companion .fk-vorspann-text {
  margin-left: 0;
  margin-right: auto;
}

/* Kolumnenzeile + Briefkopf: EIN Abstand statt zwei (19.08. abends).
   .page-folio traegt margin-bottom bis 55px, gedacht als Abstand zur
   Ueberschrift. Seit der Briefkopf dazwischen steht, stapeln sich zwei
   Abstaende: 54px unter der Kolumnenzeile, dann 56px Foto, dann nochmal
   21px. Gemessen auf Doppelseite 32 kostete allein das 72px, und die Seite
   lag 96px ueber der Fensterkante.
   :has() greift nur, wenn wirklich ein Briefkopf folgt; Seiten ohne
   (Chat-Seiten) behalten ihren alten Abstand. */
.book .page-severine .page-folio:has(+ .severine-byline) {
  margin-bottom: clamp(16px, 2.4vh, 21px);
}

/* Grafik-Rahmen an die Fensterhoehe binden (19.08. abends). Bisher war die
   Deckelung nur im @media (max-height:860px)-Block; auf grossen Schirmen
   wuchs die Grafik unbegrenzt aus ihrem eigenen Seitenverhaeltnis. Gemessen
   auf Doppelseite 24 (Fuenf Moves, fuenf Stationen): 614px Rahmenhoehe, die
   Doppelseite lag damit 96px ueber der Fensterkante, obwohl links nur zwei
   Textzeilen stehen. Die Grafik behaelt ihr Verhaeltnis, sie wird nur nicht
   mehr hoeher als das Fenster erlaubt. */
/* 🛑 KORREKTUR, noch am selben Abend: der erste Versuch deckelte den RAHMEN
   (max-height plus display:flex auf dem Innenteil). Sofort nachgemessen und
   zwei Schaeden gefunden: auf Doppelseite 24 stand das SVG 7px ueber der
   Rahmenkante und wurde von dessen overflow:hidden abgeschnitten, und auf
   Doppelseite 2 kollabierte der Zeitstrahl komplett auf 0px Hoehe, weil ein
   SVG mit height:auto in einem Flex-Container keine Hoehe mehr hat.
   Richtig ist, das SVG selbst zu deckeln: mit viewBox und width:auto
   skaliert es proportional auf die erlaubte Hoehe, der Rahmen folgt ihm.
   Kein Beschnitt, keine Verzerrung. */
.book .spread[data-spread] .page-companion .fk-grafik-in > svg,
.book .spread[data-spread] .page-companion .fk-grafik .sp-gfx svg {
  max-height: min(58vh, 620px);
  width: auto;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/* Flache Fenster: derselbe Deckel, nur strenger (20.08.2026). Er steht hier,
   weil nur an dieser Stelle die Spezifitaet der Regel darueber erreicht wird.
   58vh liessen auf einem 13-Zoll-Mac (rund 780px Fensterhoehe) eine Zeichnung
   von 442px zu, waehrend der Rahmen bei 416px kappte. 44vh sind live an den
   sieben Grafikseiten gemessen: null Beschnitt, null Ueberlappung, und die
   Doppelseite bleibt auf sechs von sieben im Bild. Der Deckel wirkt auf das
   SVG, nicht auf seinen Rahmen, es skaliert also proportional mit. */
@media (max-height: 860px) {
  .book .spread[data-spread] .page-companion .fk-grafik-in > svg,
  .book .spread[data-spread] .page-companion .fk-grafik .sp-gfx svg {
    max-height: min(40vh, 560px);
  }
  .book .spread .sp-gfx svg {
    max-height: min(40vh, 560px);
    width: auto;
    max-width: 100%;
    height: auto;
  }

  /* Was hier nachgibt, sind Polster, nicht Inhalt (20.08.2026). Nach dem
     Zuruecknehmen der Deckel standen vier Doppelseiten 36 bis 69px unter der
     Fensterkante. Engere Innenraeume im Grafikrahmen und in den Satzkarten
     holen das zurueck, ohne dass ein Wort verschwindet. */
  .page-companion .fk-grafik-in { padding: clamp(13px, 1.8vh, 24px); }
  .page-companion .fk-gfx-satz { margin-top: 13px; }
  .page-companion .fk-gfx-legende { margin-top: 13px; }
  .book .spread .szk { padding: 10px 17px; }
  .book .spread .sp-satzk { gap: 8px; }
  .book .spread .sp-cfswap,
  .book .spread .sp-track,
  .book .spread .sp-gate { gap: 8px; }
}