/* =========================================================================
   AKTIEN2GO — Website, Entwurf D "Redaktion" (25.09.2026)

   Was diese Fassung von den Vorgaengern unterscheidet, und warum:
   - Vorbilder waren Finanztip (dieselbe Farbwelt Orange/Blau, Relaunch von
     Make Studio), Finanzfluss, Morningstar, Stiftung Warentest und
     Dimensional: helle Grundflaeche, EINE Markenfarbe fuer Handlung und
     Akzent, die zweite fuer Struktur, echte Inhalte mit Datum direkt unter
     dem Kopf, Tabellen mit Stichtag, Haarlinien statt Karten.
   - Lesetext in Barlow (Normalbreite), Ueberschriften in Barlow Condensed.
     Beides lokal. Keine Systemschrift: die ist die Handschrift jedes
     Generators. Keine Serife: die ist bei uns den Beleg-Dokumenten
     vorbehalten (BRANDING 5.2, "Grundentscheidung Serifen").
   - Alle elf gesperrten Muster aus BRANDING 5.2 sind gemieden: kein dunkler
     Einstieg mit Schein, eine Schlagzeile in einer Farbe, kein Kicker-
     Ornament, ein Knopf, kein Kennzahlen-Band, echtes Material ueber der
     Falz (der Aufmacher), kein Kasten mit Farbrand links, keine Karten in
     Serie, kein Fett-plus-Doppelpunkt, keine Zahlen ueber uns selbst.

   Keine externen Ressourcen. Tools/website_check.py misst das nach.
   ========================================================================= */

/* ---------- Schriften, lokal --------------------------------------------- */
@font-face { font-family: "Barlow Condensed"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/BarlowCondensed-Regular.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/BarlowCondensed-Medium.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/BarlowCondensed-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/BarlowCondensed-Bold.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/Barlow-Regular.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-style: italic; font-display: swap; src: url("/assets/fonts/Barlow-Italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/Barlow-Medium.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/Barlow-SemiBold.woff2") format("woff2"); }

:root {
  --orange:     #fd6404;
  --orange-ink: #c94f02;   /* Orange als Text auf Weiss, besteht AA */
  --navy:       #1e4d78;
  --navy-2:     #163b5c;

  --paper:      #ffffff;
  --paper-2:    #f5f4f0;   /* warmes Hellgrau fuer ruhige Abschnitte */
  --ink:        #17160f;
  --ink-2:      #45423c;
  --ink-3:      #6b675f;
  --rule:       #d9d6ce;
  --rule-2:     #e9e7e1;

  --display: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  --text: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1180px;
  --gutter: 24px;
}

/* ---------- Grundlagen --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--orange-ink); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--ink);
}
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* Rubrik-Label: Marineblau, Versalien, ohne Strichlein.
   ⛔ Nur, wo es etwas anderes sagt als die Überschrift darunter (BRANDING §5.2 Regel 3, seit
   27.09.2026). „Kontakt“ über „Schreib uns“ oder „Zielgruppe“ über „Wen du bei uns erreichst“
   wiederholte nur und ist entfernt: Startseite alle sechs, Werbepartner-Seite vier von fünf. */
.label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 14px;
}

.skip { position: absolute; left: -9999px; top: 0; background: var(--orange); color: #fff; padding: 12px 18px; z-index: 100; }
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* ---------- Kopfzeile ---------------------------------------------------- */
/* Hell, mit Haarlinie. Der Markenstreifen ganz oben ist das einzige
   Farbelement des Kopfes: flach, geometrisch, zwei Farben ohne Verlauf. */
.top {
  background: var(--paper);
  border-top: 4px solid var(--orange);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 50;
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand img { width: 36px; height: 36px; border-radius: 5px; }
.brand span { font-family: var(--display); font-weight: 700; font-size: 27px; letter-spacing: 0.02em; }
.brand span b { color: var(--orange); font-weight: 700; }

nav.main { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
nav.main a {
  font-family: var(--display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.015em;
  color: var(--ink-2);
  text-decoration: none;
  padding: 10px 13px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
nav.main a:hover { color: var(--ink); }
nav.main a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--orange); }

/* Menue-Knopf nur am Handy (siehe unten). Am Bildschirm steht die Navigation
   offen neben dem Logo, Knopf und Schalter sind unsichtbar. */
.menu-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }
.menu-btn { display: none; }

/* ---------- Knopf: einer, orange ----------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 0.02em;
  padding: 14px 26px;
  border-radius: 4px;
  text-decoration: none;
  background: var(--orange);
  color: #fff;
  border: 2px solid var(--orange);
  transition: background-color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--orange-ink); border-color: var(--orange-ink); color: #fff; }
.btn:active { transform: translateY(1px); }

/* Textlink mit Pfeil fuer Nebenwege. Kein zweiter Knopf. */
.more {
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid var(--rule);
  padding-bottom: 2px;
  white-space: nowrap;
}
.more:hover { color: var(--orange-ink); border-bottom-color: var(--orange); }

/* ---------- Einstieg ----------------------------------------------------- */
.hero { padding: 64px 0 56px; }
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 56px;
  align-items: start;
}
.hero h1 {
  /* Obergrenze so, dass "Entscheiden musst du selbst." in der 7/11-Spalte in
     eine Zeile passt; bei 68 px stand "selbst." allein in der dritten Zeile. */
  font-size: clamp(40px, 5vw, 60px);
  margin-bottom: 20px;
  max-width: none;
}
/* Seiten ohne Tabelle rechts (Werbepartner): eine Spalte, sonst klafft rechts
   ein leeres Feld. */
.hero.solo .wrap { grid-template-columns: 1fr; }
.hero.solo .lead { max-width: 60ch; }
.hero h1 span { display: block; }
.hero .lead { font-size: clamp(19px, 2.2vw, 22px); line-height: 1.55; color: var(--ink-2); max-width: 54ch; margin-bottom: 30px; }
.hero .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; }

/* Auf einen Blick: eine kleine Tabelle mit Stichtag statt eines Bandes aus
   drei gleich grossen Zahlen. Tabellenziffern, Haarlinien, Beschriftung. */
.facts { margin: 6px 0 0; }
.facts caption {
  text-align: left;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  padding-bottom: 10px;
}
.facts table { width: 100%; border-collapse: collapse; }
.facts th, .facts td { padding: 11px 0; border-top: 1px solid var(--rule); text-align: left; vertical-align: baseline; }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 1px solid var(--rule); }
.facts th { font-weight: 400; color: var(--ink-3); font-size: 17px; }
.facts td { font-family: var(--display); font-weight: 600; font-size: 24px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.facts .stand { margin: 10px 0 0; font-size: 15px; color: var(--ink-3); }

/* ---------- Abschnitte --------------------------------------------------- */
section.band { padding: 88px 0; }
section.band.tint { background: var(--paper-2); }
.band h2 { font-size: clamp(32px, 4.2vw, 46px); max-width: 20ch; margin-bottom: 16px; }
.band .intro { max-width: 60ch; color: var(--ink-2); font-size: 20px; line-height: 1.55; margin-bottom: 44px; }
.band-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; margin-bottom: 40px; }
.band-head h2, .band-head .intro { margin-bottom: 0; }

/* Zwei Spalten: links die Ueberschrift, rechts die Eintraege. So liest sich
   ein Abschnitt wie eine Seite im Magazin, nicht wie ein Block auf einer
   Vorlage. */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 72px; align-items: start; }
.split .intro { margin-bottom: 0; }

/* ---------- Folgen: Aufmacher plus Verzeichnis --------------------------- */
.episodes {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
}
.episodes li.lead { grid-column: 1 / 3; grid-row: 1 / 3; }
.episodes a { display: block; text-decoration: none; color: inherit; }
.episodes .shot {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
}
.episodes .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.episodes a:hover .shot img { transform: scale(1.02); }
.episodes .meta {
  display: flex; align-items: baseline; gap: 12px;
  margin: 14px 0 6px;
  font-size: 15px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.episodes .tag {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}
.episodes li.lead .tag { color: var(--orange-ink); }
.episodes h3 { font-size: 23px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.episodes li.lead h3 { font-size: clamp(28px, 3vw, 38px); font-weight: 700; max-width: 24ch; }
.episodes a:hover h3 { color: var(--navy); }

/* ---------- Aussage ------------------------------------------------------ */
/* Kein farbiger Rand links (BRANDING 5.2 Nr. 7). Zwei Haarlinien reichen. */
.statement {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 44px 0;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 24px 64px;
  align-items: start;
}
.statement p { margin: 0; }
.statement .q {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 22ch;
}
.statement .by { font-size: 18px; color: var(--ink-2); max-width: 44ch; padding-top: 8px; }

/* ---------- Nummerierte Eintraege (Regeln, Formate) ---------------------- */
.rules { list-style: none; margin: 0; padding: 0; }
.rules li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
}
.rules li:last-child { border-bottom: 1px solid var(--rule); }
.rules .n {
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}
.rules h3 { font-size: 26px; font-weight: 600; margin-bottom: 8px; }
.rules p { color: var(--ink-2); font-size: 18px; margin: 0; max-width: 58ch; }

/* ---------- Themen ------------------------------------------------------- */
.topics { list-style: none; margin: 0; padding: 0; }
.topics li {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 24px;
  padding: 30px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.topics li:last-child { border-bottom: 1px solid var(--rule); }
.topics .k {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  padding-top: 8px;
}
.topics h3 { font-size: 26px; font-weight: 600; margin-bottom: 8px; }
.topics p { color: var(--ink-2); font-size: 18px; margin: 0; max-width: 62ch; }

/* ---------- Abgrenzung --------------------------------------------------- */
.nots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.nots li { padding: 22px 0; border-top: 1px solid var(--rule); }
.nots h3 { font-size: 24px; font-weight: 600; margin-bottom: 6px; }
.nots p { color: var(--ink-2); font-size: 18px; margin: 0; }

/* ---------- Kontakt ------------------------------------------------------ */
.contact-line { font-family: var(--display); font-size: clamp(30px, 4.6vw, 44px); font-weight: 600; margin: 0; }
.contact-line a { color: var(--orange-ink); text-decoration: none; border-bottom: 2px solid var(--rule); display: inline-block; padding: 6px 0; }
.contact-line a:hover { border-bottom-color: var(--orange); }

/* ---------- Werbepartner: Zielgruppen-Tabelle ---------------------------- */
.data { width: 100%; border-collapse: collapse; margin: 0; }
.data th, .data td { padding: 13px 0; border-top: 1px solid var(--rule); text-align: left; vertical-align: top; font-size: 18px; }
.data tr:last-child th, .data tr:last-child td { border-bottom: 1px solid var(--rule); }
.data th { font-weight: 400; color: var(--ink-3); width: 44%; padding-right: 20px; }
.data td { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.data td b { font-family: var(--display); font-weight: 600; font-size: 22px; }
.stand-line { margin: 14px 0 0; font-size: 15px; color: var(--ink-3); }

/* ---------- Fliesstext-Seiten (Impressum, Datenschutz) ------------------- */
.doc { padding: 64px 0 96px; }
.doc .wrap { max-width: 760px; }
.doc h1 { font-size: clamp(38px, 5.6vw, 54px); margin-bottom: 10px; }
.doc .stand { color: var(--ink-3); font-size: 16px; margin-bottom: 40px; }
.doc h2 { font-size: 28px; font-weight: 600; margin: 44px 0 12px; padding-top: 24px; border-top: 1px solid var(--rule); }
.doc h2.first { border-top: 0; padding-top: 0; margin-top: 0; }
.doc p, .doc li { font-size: 18px; color: var(--ink-2); }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc .kv { margin: 0 0 22px; }
.doc .kv div { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--rule-2); flex-wrap: wrap; }
.doc .kv dt { font-weight: 600; min-width: 220px; color: var(--ink); }
.doc .kv dd { margin: 0; color: var(--ink-2); }
.doc .kv dd a { display: inline-block; padding: 11px 0; }
/* Kein Hinweis-Kasten mit Farbrand: der Hinweis ist ein normaler Absatz. */
.doc .note { font-size: 18px; color: var(--ink-2); }

/* ---------- Fussbereich -------------------------------------------------- */
footer.foot { background: var(--paper-2); border-top: 1px solid var(--rule); padding: 56px 0 36px; font-size: 16px; color: var(--ink-2); }
footer.foot .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid var(--rule); }
footer.foot h4 { font-family: var(--display); font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); margin: 0 0 14px; font-weight: 600; }
footer.foot ul { list-style: none; margin: 0; padding: 0; }
footer.foot li { margin-bottom: 8px; }
footer.foot a { color: var(--ink-2); text-decoration: none; }
footer.foot a:hover { color: var(--orange-ink); text-decoration: underline; }
footer.foot .risk { padding: 26px 0 0; color: var(--ink-3); font-size: 15px; line-height: 1.6; max-width: 84ch; }
/* BRANDING §5.2 Regel 9 (seit 27.09.2026): Hier stand „Risikohinweis:“ fett mit Doppelpunkt vor dem
   Satz, das Muster, das Wikipedias Fundliste als stärksten Textverräter führt. Jetzt eine Überschrift
   wie „Kanal“ und „Rechtliches“ daneben, der Hinweis selbst ist wortgleich geblieben. */
footer.foot .risk h4 { margin-bottom: 8px; }
footer.foot .risk p { margin: 0; }
footer.foot .copy { padding-top: 18px; color: var(--ink-3); font-size: 15px; }

/* ---------- Tablet ------------------------------------------------------- */
@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; }
  .facts { max-width: 480px; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .episodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .episodes li.lead { grid-column: 1 / 3; grid-row: auto; }
  .statement { grid-template-columns: 1fr; }
  .topics li { grid-template-columns: 130px minmax(0, 1fr); }
  footer.foot .cols { grid-template-columns: 1fr 1fr; }
}

/* ---------- Handy -------------------------------------------------------- */
@media (max-width: 720px) {
  body { font-size: 18px; }
  p, li, dd { hyphens: auto; -webkit-hyphens: auto; }

  .top { position: static; }
  .top .wrap { flex-wrap: wrap; min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
  /* Die fuenf Eintraege brachen am Handy in zwei unruhige Zeilen um (Rashos
     Fund 26.09.2026). Jetzt: Logo links, Knopf "Menue" rechts, die Liste
     klappt darunter auf. Ohne JavaScript, ueber den unsichtbaren Schalter. */
  .menu-btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: 0.02em;
    color: var(--ink); padding: 10px 2px; min-height: 44px; cursor: pointer; user-select: none;
  }
  .menu-btn .bars { display: block; width: 22px; height: 12px; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); position: relative; }
  .menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 2px; background: var(--ink); }
  .menu-toggle:focus-visible + .menu-btn { outline: 3px solid var(--orange); outline-offset: 3px; }
  nav.main { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 6px 0 0; }
  .menu-toggle:checked ~ nav.main { display: flex; }
  nav.main a { display: block; width: 100%; text-align: left; font-size: 21px; padding: 13px 0; border-top: 1px solid var(--rule-2); border-bottom: 0; white-space: normal; }
  nav.main a[aria-current="page"] { color: var(--orange-ink); border-bottom: 0; }

  .hero { padding: 44px 0 40px; }
  /* Am Handy passt "Dividenden-Aktien und ETFs" bei 40 px nicht in eine Zeile,
     und der erzwungene Umbruch vor "im Vergleich." machte daraus drei Zeilen.
     Etwas kleiner und frei fliessend sind es zwei (Rashos Fund 26.09.2026). */
  .hero h1 { font-size: 34px; line-height: 1.06; }
  .hero h1 span { display: inline; }
  .hero .actions { display: block; }
  .btn { display: block; text-align: center; }
  .more { display: inline-block; padding: 8px 0; }
  .hero .actions .more { margin-top: 18px; }
  .facts td { font-size: 22px; }

  /* Am Handy nichts unter 16 px: iOS zoomt sonst, und die Zielgruppe liest
     ohnehin lieber gross. Am Bildschirm bleiben Label und Stichtag feiner. */
  .label, .facts caption, .facts .stand, .episodes .meta, .episodes .tag,
  .topics .k, .stand-line, footer.foot .risk, footer.foot .copy { font-size: 16px; }

  section.band { padding: 52px 0; }
  .band .intro, .band-head { margin-bottom: 28px; }
  .band-head { display: block; }
  .band-head .more { display: inline-block; margin-top: 16px; padding: 8px 0; }

  .episodes { grid-template-columns: 1fr; gap: 30px; }
  .episodes li.lead { grid-column: auto; }
  .episodes h3 { font-size: 22px; }
  .episodes li.lead h3 { font-size: 27px; }

  .statement { padding: 32px 0; }
  .rules li { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 22px 0; }
  .rules .n { font-size: 24px; }
  .topics li { grid-template-columns: 1fr; gap: 4px; padding: 24px 0; }
  .topics .k { padding-top: 0; }
  .nots { grid-template-columns: 1fr; }

  .data th { width: 100%; display: block; padding-bottom: 0; border-top: 1px solid var(--rule); }
  .data td { display: block; padding-top: 4px; border-top: 0; }
  .data tr:last-child th { border-bottom: 0; }

  footer.foot .cols { grid-template-columns: 1fr; gap: 26px; }
  footer.foot li { margin-bottom: 2px; }
  footer.foot li a { display: inline-block; padding: 10px 0; }
  footer.foot .risk, footer.foot .copy { font-size: 16px; }

  .doc { padding: 40px 0 64px; }
  .doc .kv dt { min-width: 0; width: 100%; }
  .doc .kv div { gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .episodes a:hover .shot img { transform: none; }
}

@media print {
  .top, footer.foot .cols, .hero .actions { display: none; }
  body { font-size: 12pt; color: #000; background: #fff; }
}