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

/* ── 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(19, 24, 52, 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(19, 24, 52, 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.
   ========================================================================== */
.page-companion .video-frame {
  aspect-ratio: 4/5;
  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);
}
/* Das Poster fuellt den Rahmen jetzt formatgleich, ohne Beschnitt. */
.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(19, 24, 52, 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;
  gap: 8px;
  margin-top: clamp(21px, 3vh, 34px);
}
.page-severine .fk-sit-b {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 13px;
  text-align: left;
  background: #FFFFFF;
  border: 1px solid rgba(22, 26, 46, 0.12);
  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;
  transform: translateY(-1px);
}
.page-severine .fk-sit-b.gewaehlt,
.page-severine .fk-sit-b[aria-pressed="true"] {
  border-color: #B31F66;
  background: rgba(179, 31, 102, 0.06);
}
.page-severine .fk-sit-b .s-k {
  font-size: 16px;
  font-weight: 600;
  color: #161A2E;
  letter-spacing: -0.01em;
}
.page-severine .fk-sit-b .s-v {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  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(19, 24, 52, 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);
}
.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;
}

/* ── 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;
  }
  .page-companion .companion-quote-cite {
    text-align: right;
    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; }
.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(19, 24, 52, 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);
}
/* 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);
}

.book .spread[data-spread="3"] .companion-quote {
  text-align: right;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.3;
  letter-spacing: normal;
}

/* ==========================================================================
   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: #131834;
  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;
}

/* 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. */
.cover-portrait-frame {
  max-width: min(100%, 44dvh, calc(80dvh - 304px));
  margin-left: auto;
}

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