/* ==========================================================================
   Bescheid — bescheid-news.de
   Schwarz ist die Fläche, Gelb das Band — Gelb als Akzent, nicht als Wand.
   Wer will, schaltet auf die gelbe Ansicht (Gelb als Fläche, Schwarz als Band).
   Alle Werte stehen als Token oben; Komponenten benutzen nur Token.
   Dokumentation: DESIGNSYSTEM.md
   ========================================================================== */

/* ---------- Schriften (vom eigenen Server, auf den deutschen Zeichensatz gekürzt) */
@font-face { font-family: "Archivo Black"; src: url(../schriften/archivo-black.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Archivo"; src: url(../schriften/archivo-variabel.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(../schriften/barlow-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(../schriften/barlow-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(../schriften/barlow-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(../schriften/barlow-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- Token ---------------------------------------------------------- */
:root {
  /* Marke (brand/tokens.json) */
  --gelb: #FFD400;
  --schwarz: #0A0A0A;
  --weiss: #FFFFFF;
  --eil: #C8102E;
  --ausland: #1F5FBF;

  /* Rollen — Standard: dunkel. Kontraste auf Schwarz: tinte 19,4:1 · tinte-2 13:1 · tinte-3 7,6:1 */
  --grund: var(--schwarz);
  --grund-2: #171715;
  --grund-3: #222220;
  --tinte: var(--weiss);
  --lesetext: #ECE9E1;
  --dach: var(--gelb);
  --tinte-2: #D9D5C9;
  --tinte-3: #A3A097;
  --linie: rgb(255 255 255 / .16);
  --band: var(--gelb);
  --band-tinte: var(--schwarz);
  --band-tinte-2: #3B3305;
  --band-linie: rgb(10 10 10 / .18);
  --marker: var(--gelb);
  --marker-tinte: var(--schwarz);
  --wortmarke-grund: var(--schwarz);
  --wortmarke-tinte: var(--gelb);
  --fokus: var(--gelb);
  --signatur: var(--schwarz);

  /* Schrift */
  --display: "Archivo Black", "Arial Black", sans-serif;
  --lesen: "Barlow", system-ui, sans-serif;
  --werkzeug: "Archivo", "Barlow", system-ui, sans-serif;

  --t-riesig: clamp(2.6rem, 1.2rem + 5.6vw, 7rem);
  --t-1: clamp(2.2rem, 1.4rem + 3.4vw, 4.6rem);
  --t-2: clamp(1.6rem, 1.15rem + 1.9vw, 2.75rem);
  --t-3: clamp(1.25rem, 1.05rem + .85vw, 1.75rem);
  --t-4: 1.125rem;
  --t-text: 1.125rem;
  --t-klein: .9375rem;
  --t-etikett: .78rem;

  /* Raum */
  --a-1: 4px; --a-2: 8px; --a-3: 12px; --a-4: 16px; --a-5: 24px; --a-6: 32px; --a-7: 48px; --a-8: 72px; --a-9: 104px;
  --kante: 1px;
  --kante-dick: 2px;
  --rahmen: 1320px;
  --rand: clamp(16px, 4vw, 40px);
  --band-hoehe: 64px;

  /* Bewegung — führt das Lesen, zappelt nicht */
  --kurve: cubic-bezier(.2, .7, .2, 1);
  --kurz: .2s;
  --mittel: .32s;

  color-scheme: dark;
}

/* Gelbe Ansicht (wählbar): Gelb ist die Fläche wie die Tafel, Schwarz das Band.
   Kontraste auf Gelb: tinte 13,8:1 · tinte-2 8,8:1 · tinte-3 5,5:1 */
:root[data-ansicht="gelb"] {
  --grund: var(--gelb);
  --grund-2: #F5C900;
  --grund-3: #EBBF00;
  --tinte: var(--schwarz);
  --lesetext: #17150A;
  --dach: #5E5106;
  --tinte-2: #3B3305;
  --tinte-3: #5E5106;
  --linie: rgb(10 10 10 / .2);
  --band: var(--schwarz);
  --band-tinte: var(--gelb);
  --band-tinte-2: #D9D5C9;
  --band-linie: rgb(255 255 255 / .16);
  --marker: var(--schwarz);
  --marker-tinte: var(--gelb);
  --wortmarke-grund: var(--gelb);
  --wortmarke-tinte: var(--schwarz);
  --fokus: var(--schwarz);
  --signatur: var(--weiss);
  color-scheme: light;
}

/* ---------- Grundlagen ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--band-hoehe) + 16px); }
body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font: 400 var(--t-text)/1.6 var(--lesen);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .7s var(--kurve), color .7s var(--kurve);
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .2em; }
p, figure, ol, ul, dl { margin: 0; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display); font-weight: 400; line-height: 1.06; letter-spacing: -.01em;
  text-wrap: balance;
  -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4;
}
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
::selection { background: var(--tinte); color: var(--grund); }
main:focus { outline: none; }
[hidden] { display: none !important; }

.rahmen { max-width: var(--rahmen); margin-inline: auto; padding-inline: var(--rand); }
.unsichtbar {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.springen {
  position: fixed; left: var(--a-3); top: -80px; z-index: 100;
  background: var(--tinte); color: var(--grund); padding: var(--a-3) var(--a-4);
  font-weight: 700; text-decoration: none; transition: top var(--kurz);
}
.springen:focus { top: var(--a-3); }

/* ---------- Kleinteile ------------------------------------------------------ */

/* Etikett = Rubrikzeile aus dem Video: Balken + Großbuchstaben. */
.etikett, .typ, .meta, .zaehler, .uhr, .knopf, .mehr, .quelle, .teilen, .im-video,
.unbestaetigt, .teaser-meta, .sendungen a, .band-ressorts a, .filter a, .kopf-chip span, .einbettung-start,
.einbettung-wahl button, .leiste-zahl, .marke-chip, .poster-dauer, .naechste-zeit, .kalender-wochentag {
  font-family: var(--werkzeug);
  font-stretch: 82%;
  font-variant-numeric: tabular-nums;
}
.etikett {
  display: inline-flex; align-items: center; gap: var(--a-2);
  font-weight: 760; font-size: var(--t-etikett); line-height: 1; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinte); text-decoration: none;
}
.etikett::before { content: ""; flex: none; width: 7px; height: 13px; background: var(--marker); }
a.etikett:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.etikett--leise { color: var(--tinte-3); }
.etikett-zusatz { font-weight: 600; color: var(--tinte-3); letter-spacing: .06em; }

.meta { font-weight: 640; font-size: .8rem; letter-spacing: .04em; color: var(--tinte-3); }
.zaehler { font-weight: 800; font-size: .82rem; letter-spacing: .04em; }

/* Typ einer Ausgabe in der Kennfarbe aus dem Video. */
.typ {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 760; font-size: var(--t-etikett); line-height: 1; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 8px 5px; white-space: nowrap; text-decoration: none;
}
.typ--morgen, .typ--abend { padding-inline: 0; color: var(--tinte); }
.typ--morgen::before, .typ--abend::before { content: ""; width: 7px; height: 13px; background: var(--marker); }
.typ--eil { background: var(--eil); color: var(--weiss); }
.typ--ausland { background: var(--ausland); color: var(--weiss); }
.typ--spezial { background: var(--tinte); color: var(--grund); }
a.typ:hover { filter: brightness(1.1); }

.unbestaetigt {
  display: inline-block; font-weight: 720; font-size: .72rem; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px currentColor; padding: 5px 7px 4px; color: var(--tinte-2);
}

/* Untertitel-Marker: Wie das aktive Wort in den Untertiteln — der Balken fährt
   beim Zeigen unter die Schlagzeile. */
.marker {
  background: linear-gradient(var(--marker), var(--marker)) no-repeat 0 0 / 0% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size var(--mittel) var(--kurve), color var(--mittel) var(--kurve);
  padding-inline: .04em;
}
a:hover .marker, a:focus-visible .marker, .ist-dran .marker {
  background-size: 100% 100%; color: var(--marker-tinte);
}
/* Der Balken ist höher als der Zeilenabstand (Archivo Black: 1,35 em Inhaltsfläche); ohne eigene Ebene malt
   der Balken der nächsten Zeile über die Unterlängen der vorigen (Pepe 13.10.: „g“ angeschnitten).
   Positioniert malt der Browser die Schrift erst nach allen Balken. */
.marker > span { position: relative; }

.knopf {
  display: inline-flex; align-items: center; gap: var(--a-3);
  background: var(--marker); color: var(--marker-tinte);
  font-weight: 760; font-size: .875rem; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
  padding: 16px 20px 15px; text-decoration: none; border: 0; cursor: pointer;
  transition: transform var(--kurz) var(--kurve);
}
.knopf svg { width: 18px; height: 18px; transition: transform var(--kurz) var(--kurve); }
.knopf:hover svg { transform: translateX(4px); }
.knopf--klein { padding: 12px 14px 11px; font-size: .78rem; }

.mehr {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font-weight: 720; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte);
}
.mehr svg { width: 16px; height: 16px; transition: transform var(--kurz) var(--kurve); }
.mehr:hover svg { transform: translateX(3px); }

.teilen, .im-video {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: none; border: 0; padding: 8px 0; color: var(--tinte);
  font-weight: 720; font-size: .78rem; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
}
.teilen svg, .im-video svg { width: 17px; height: 17px; }
.teilen:hover, .im-video:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.teilen[data-kopiert]::after { content: "Link kopiert"; margin-left: 4px; color: var(--tinte-3); }

.quellen, .plattform-links, .personen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2) var(--a-3); }
.quellen ul, .plattform-links ul { display: contents; list-style: none; }
.quelle {
  display: inline-block; font-weight: 650; font-size: .82rem; line-height: 1.2; letter-spacing: .02em;
  color: var(--tinte-2); text-decoration: none; background: var(--grund-2); padding: 8px 10px 7px;
  transition: background-color var(--kurz), color var(--kurz);
}
.quelle::after { content: " ↗"; }
.quelle:hover { background: var(--grund-3); color: var(--tinte); }

.bildnachweis { font-size: .8rem; line-height: 1.55; color: var(--tinte-3); }
.bildnachweis span { font-weight: 600; }
.bildnachweis a { color: inherit; text-decoration-thickness: 1px; }

.korrektur { background: var(--tinte); color: var(--grund); padding: var(--a-4) var(--a-5); margin-bottom: var(--a-5); display: grid; gap: var(--a-2); }
.korrektur strong { display: block; font: 760 var(--t-etikett)/1.2 var(--werkzeug); font-stretch: 82%; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; }
.korrektur a { color: inherit; font-weight: 600; font-size: .875rem; }

/* ---------- Band (Kopf) ----------------------------------------------------- */
.band {
  position: sticky; top: 0; z-index: 60;
  background: var(--band); color: var(--band-tinte);
  transition: background-color .7s var(--kurve), color .7s var(--kurve);
}
.band-reihe { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 36px); min-height: var(--band-hoehe); }
.wortmarke {
  flex: none; text-decoration: none;
  font: 400 1.35rem/1 var(--display); letter-spacing: .02em;
  background: var(--wortmarke-grund); color: var(--wortmarke-tinte);
  padding: 8px 11px 7px;
}
/* Was nicht ganz in die Zeile passt, rutscht in eine zweite Zeile, die nicht zu sehen ist — so fällt ein Ressort
   ganz weg statt mitten im Wort abgeschnitten (bescheid.js blendet es dann ganz aus; das Menü hat alle). */
.band-ressorts { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0 clamp(14px, 1.8vw, 26px); flex: 1; min-width: 0; height: var(--band-hoehe); overflow: clip; }
.band-ressorts a {
  font-weight: 660; font-size: .84rem; line-height: 1; letter-spacing: .07em; text-transform: uppercase;
  color: var(--band-tinte-2); text-decoration: none; white-space: nowrap;
  padding: 25px 0 21px; border-bottom: 3px solid transparent;
}
.band-ressorts a.ist-weg { visibility: hidden; }
.band-ressorts a:hover, .band-ressorts a[aria-current] { color: var(--band-tinte); border-bottom-color: currentColor; }
.band-werkzeuge { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.uhr {
  display: grid; justify-items: end; gap: 3px; text-decoration: none; color: var(--band-tinte);
  padding: 0 var(--a-3) 0 0; margin-right: var(--a-2); border-right: 1px solid var(--band-linie);
}
.uhr-zeit { font: 400 1.2rem/1 var(--display); }
.uhr-text { font-weight: 660; font-size: .66rem; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--band-tinte-2); white-space: nowrap; }
.knopf-symbol {
  width: 44px; height: 44px; display: grid; place-items: center; flex: none;
  background: none; border: 0; color: var(--band-tinte); cursor: pointer;
}
.knopf-symbol svg { width: 22px; height: 22px; }
.knopf-symbol:hover { background: var(--band-linie); }
.band :focus-visible { outline-color: var(--band-tinte); }
/* Schalter zeigt, wohin er führt: Sonne = gelbe Ansicht, Mond = dunkle. */
.ansicht-zu-dunkel { display: none; }
[data-ansicht="gelb"] .ansicht-zu-gelb { display: none; }
[data-ansicht="gelb"] .ansicht-zu-dunkel { display: block; }
.menue-knopf { display: none; }

/* Sendungsleiste unter dem Band */
.sendungen { border-bottom: 1px solid var(--linie); }
.sendungen-reihe { display: flex; gap: clamp(16px, 2.4vw, 30px); overflow-x: auto; scrollbar-width: none; }
.sendungen-reihe::-webkit-scrollbar { display: none; }
.sendungen a {
  font-weight: 740; font-size: .8rem; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; padding: 15px 0 11px; border-bottom: 4px solid transparent;
}
.sendungen a:hover { border-bottom-color: var(--linie); }
.sendungen a[aria-current] { border-bottom-color: var(--marker); }

/* Ebenen: Suche und Menü */
.ebene {
  width: 100%; max-width: none; height: auto; max-height: 100dvh; margin: 0; padding: 0; border: 0;
  background: var(--band); color: var(--band-tinte);
  /* Fokusring in Tintenfarbe des Bandes — gelb auf gelbem Band wäre unsichtbar (12.10.2026). */
  --fokus: var(--band-tinte);
}
.ebene::backdrop { background: rgb(10 10 10 / .55); }
.ebene .rahmen { position: relative; padding-block: var(--a-6) var(--a-7); }
.ebene-zu { position: absolute; top: var(--a-3); right: var(--rand); }
.ebene--menue { height: 100dvh; }
.menue-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a-6); padding-top: var(--a-6); }
.ebene .etikett { color: var(--band-tinte-2); margin-bottom: var(--a-3); }
.menue-gross { list-style: none; padding: 0; display: grid; gap: 2px; }
.menue-gross a { font: 400 clamp(1.6rem, 1rem + 2.4vw, 2.6rem)/1.15 var(--display); text-decoration: none; }
.menue-gross a:hover { text-decoration: underline; text-decoration-thickness: 4px; }
.suchfeld label { display: block; font: 400 var(--t-2)/1.1 var(--display); margin-bottom: var(--a-4); padding-right: 56px; }
.suchfeld-reihe { display: flex; gap: 0; border: var(--kante) solid currentColor; }
.suchfeld input {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 16px 18px; font-size: 1.25rem; font-weight: 500;
}
.suchfeld input::placeholder { color: currentColor; opacity: .55; }
.suchfeld input:focus { outline: none; }
.suchfeld-reihe:focus-within { outline: 3px solid currentColor; outline-offset: 3px; }
.suchfeld button {
  border: 0; cursor: pointer; padding: 0 22px; background: currentColor;
  font: 760 .82rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .1em; text-transform: uppercase;
}
.suchfeld button { color: var(--band); }
.suchfeld--seite button { color: var(--grund); }
.suchfeld--seite { max-width: 760px; margin: var(--a-4) 0 var(--a-3); }

/* ---------- Abschnitte ------------------------------------------------------ */
.abschnitt-kopf {
  display: flex; justify-content: space-between; align-items: center; gap: var(--a-4);
  padding-top: var(--a-2); margin-bottom: var(--a-4);
}
.abschnitt-kopf--abstand { margin-top: var(--a-8); }
.abschnitt-titel { font: inherit; }
.abschnitt-titel .etikett { font-size: .9rem; }
.abschnitt-text { color: var(--tinte-2); margin: calc(-1 * var(--a-2)) 0 var(--a-5); font-size: var(--t-klein); max-width: 60ch; }

/* ---------- Aufmacher ------------------------------------------------------- */
.aufmacher { padding: clamp(28px, 5vw, 64px) 0 clamp(36px, 5vw, 72px); }
.aufmacher-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-3) var(--a-4); margin-bottom: clamp(16px, 2.6vw, 28px); }
.aufmacher-kopf time, .aufmacher-kopf > span { font: 650 .82rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-2); }
.aufmacher-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); gap: clamp(28px, 5vw, 80px); align-items: start; }
/* Aufmacher (Pepe 13.10.: auf großen Monitoren zu wuchtig): ein Drittel kleiner, breiter gesetzt — zwei, drei ruhige
   Zeilen statt fünf. „Wer: Frage“ teilt sich in Dachzeile und Schlagzeile wie auf den Meldungsseiten. */
.aufmacher-titel { font-size: clamp(2.3rem, 1rem + 3.6vw, 4.6rem); line-height: .96; letter-spacing: -.022em; max-width: 17ch; text-wrap: balance; }
.aufmacher-titel .dachzeile { font-size: clamp(1rem, .85rem + .45vw, 1.35rem); letter-spacing: .005em; margin-bottom: .55em; }
.aufmacher-titel a { text-decoration: none; }
.aufmacher-titel a:hover { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .08em; }
.aufmacher-meldungen { list-style: none; padding: 0; margin: clamp(28px, 4vw, 48px) 0 var(--a-6); display: grid; gap: var(--a-6); }
.aufmacher-meldungen a { display: block; text-decoration: none; }
.aufmacher-zeile { display: flex; align-items: center; gap: var(--a-3); margin-bottom: var(--a-2); }
.aufmacher-meldungen h2 { font-size: var(--t-3); line-height: 1.12; max-width: 30ch; }
.aufmacher-meldungen p { margin-top: var(--a-2); color: var(--tinte-2); font-size: 1.02rem; line-height: 1.5; max-width: 62ch; }
.teaser-ressort { font: 720 var(--t-etikett)/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-3); }
.aufmacher-video { position: sticky; top: calc(var(--band-hoehe) + 24px); display: grid; gap: var(--a-4); }

/* Eil und Ausland färben den Aufmacher wie die Tafel im Video. */
.aufmacher--eil, .aufmacher--ausland, .ausgabe--eil .ausgabe-kopf, .ausgabe--ausland .ausgabe-kopf {
  --grund: var(--eil); --tinte: var(--weiss); --tinte-2: rgb(255 255 255 / .88); --tinte-3: rgb(255 255 255 / .78);
  --linie: rgb(255 255 255 / .32); --marker: var(--weiss); --marker-tinte: var(--eil); --fokus: var(--weiss); --dach: var(--weiss);
  background: var(--grund); color: var(--tinte);
}
.aufmacher--ausland, .ausgabe--ausland .ausgabe-kopf { --grund: var(--ausland); --marker-tinte: var(--ausland); }
.aufmacher--eil .typ--eil, .ausgabe--eil .ausgabe-kopf .typ--eil { background: var(--weiss); color: var(--eil); }
.aufmacher--ausland .typ--ausland, .ausgabe--ausland .ausgabe-kopf .typ--ausland { background: var(--gelb); color: var(--schwarz); }

/* ---------- Poster (Frame 1 im Hochformat) --------------------------------- */
.poster {
  position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden;
  background: var(--schwarz);
}
.poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--kurve); }
a.poster:hover img, a:hover > .poster img { transform: scale(1.03); }
.poster-dauer {
  position: absolute; right: 8px; bottom: 8px; background: var(--schwarz); color: var(--gelb);
  font-weight: 760; font-size: .74rem; line-height: 1; padding: 5px 6px;
}
.poster-leer { display: grid; place-items: end start; height: 100%; padding: 16px; background: var(--gelb); color: var(--schwarz); font: 400 1.2rem/1.05 var(--display); }
.poster-start {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--gelb); color: var(--schwarz); padding: 14px; font: 760 .85rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .1em; text-transform: uppercase;
}
.poster-start svg { width: 16px; height: 16px; }

/* Zwei-Klick-Spieler aus „Bescheid Einbettung“ im Markengewand */
.einbettung { --einbettung-akzent: var(--gelb); --einbettung-tinte: var(--schwarz); --einbettung-rahmenbreite: 0px; }
:root[data-ansicht="gelb"] .einbettung-flaeche { box-shadow: 0 0 0 1px rgb(10 10 10 / .22); }
.einbettung-start { font-family: var(--werkzeug); font-weight: 780; font-size: .86rem; letter-spacing: .1em; padding: 17px 14px; background: var(--gelb); color: var(--schwarz); }
.einbettung-start:hover { background: var(--weiss); color: var(--schwarz); }
.einbettung-start:focus-visible { outline: 3px solid var(--schwarz); outline-offset: -7px; }
.einbettung-wahl button { font-weight: 700; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; padding: 8px 10px 7px; border: 0; box-shadow: inset 0 0 0 1px var(--tinte); color: var(--tinte); }
.einbettung-wahl button[aria-pressed="true"] { background: var(--tinte); color: var(--grund); }
.einbettung-hinweis { font-size: .8rem; color: var(--tinte-2); opacity: 1; }
.einbettung-hinweis a { color: inherit; }

/* ---------- Sendetag -------------------------------------------------------- */
.sendetag { padding: clamp(36px, 5vw, 72px) 0; background: var(--grund-2); }
.sendetag-kopf h2 { font-size: var(--t-1); line-height: .95; letter-spacing: -.02em; margin: var(--a-3) 0 var(--a-3); }
.sendetag-zeile { color: var(--tinte-2); font-size: 1.1rem; font-weight: 500; }

/* Sendeleiste: der Tag als Fortschrittsbalken wie oben im Video */
.leiste { position: relative; height: 118px; margin: var(--a-6) 0 var(--a-2); --jetzt: 0%; }
.leiste--klein { height: 92px; margin-top: var(--a-4); }
.leiste-skala { position: absolute; inset: 0; }
.leiste-linie, .leiste-fuellung { position: absolute; left: 0; bottom: 26px; height: 3px; }
.leiste-linie { right: 0; background: var(--linie); }
.leiste-fuellung { width: var(--jetzt); background: var(--marker); transition: width 1.2s var(--kurve); }
.leiste-stunde { position: absolute; bottom: 20px; width: 1px; height: 8px; background: var(--linie); }
.leiste-stunde--voll { height: 14px; bottom: 16px; width: 2px; background: var(--tinte-3); }
.leiste-zahl { position: absolute; bottom: 0; transform: translateX(-50%); font-weight: 650; font-size: .72rem; line-height: 1; color: var(--tinte-3); }
.leiste-zahl:first-of-type { transform: none; }
.leiste-zahl--ende { transform: translateX(-100%); }
.leiste-jetzt { position: absolute; left: var(--jetzt); bottom: 16px; width: 2px; height: 22px; background: var(--tinte); transition: left 1.2s var(--kurve); }
.leiste-jetzt span {
  position: absolute; top: 26px; left: 50%; transform: translateX(-50%); padding: 0 4px; background: var(--grund);
  font: 760 .72rem/1 var(--werkzeug); font-stretch: 82%; white-space: nowrap;
}
.marke {
  position: absolute; left: var(--pos); bottom: 30px;
  display: flex; flex-direction: column; align-items: flex-start;
  text-decoration: none; color: var(--marker); transform: translateX(-1.5px);
}
.marke-chip {
  font-weight: 780; font-size: .74rem; line-height: 1; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  padding: 7px 8px 6px; background: var(--marker); color: var(--marker-tinte);
  transition: transform var(--kurz) var(--kurve);
}
.marke-name { font-weight: 640; }
.marke-stiel { width: 2px; height: 20px; background: currentColor; }
.marke--reihe-1 .marke-stiel { height: 50px; }
.marke--links { align-items: flex-end; transform: translateX(calc(-100% + 1.5px)); }
.marke--eil { color: var(--eil); } .marke--eil .marke-chip { background: var(--eil); color: var(--weiss); }
.marke--ausland { color: var(--ausland); } .marke--ausland .marke-chip { background: var(--ausland); color: var(--weiss); }
.marke--spezial { color: var(--tinte); }
.marke--spezial .marke-chip { background: var(--grund); color: var(--tinte); box-shadow: inset 0 0 0 2px var(--tinte); }
.marke:hover .marke-chip, .marke.ist-hervorgehoben .marke-chip { transform: translateY(-3px); }

.sendetag-reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--a-4); margin-top: var(--a-5); }
.mini {
  display: grid; grid-template-columns: 64px 1fr; gap: var(--a-4); align-items: start;
  padding: 10px; text-decoration: none; background: var(--grund);
  transition: background-color var(--kurz);
}
.mini:hover { background: var(--linie); }
.mini-bild img, .mini-bild .poster-leer { width: 64px; aspect-ratio: 9 / 16; object-fit: cover; }
.mini-text { display: grid; gap: 6px; padding-top: 4px; min-width: 0; }
.mini-titel { font: 700 1.02rem/1.25 var(--lesen); }
.naechste {
  display: grid; align-content: end; gap: 6px; min-height: 134px; padding: var(--a-4);
  background: var(--grund);
}
.naechste-zeit { font: 400 1.6rem/1.05 var(--display); font-variant-numeric: tabular-nums; }
.naechste-name { font-weight: 600; font-size: .95rem; color: var(--tinte-2); }

/* ---------- Dachzeile, Zeitmarke ------------------------------------------- */
/* Dachzeile wie bei den großen Portalen: klein, farbig, nicht versal. Sie ordnet
   ein, die Schlagzeile darunter trägt. */
.dachzeile {
  display: block; margin-bottom: .32em;
  font: 700 .875rem/1.2 var(--lesen); letter-spacing: .01em; color: var(--dach);
  -webkit-hyphens: manual; hyphens: manual;
}
h1 > .dachzeile { font-size: clamp(.95rem, .85rem + .3vw, 1.1rem); }
.schlagzeile { display: block; }
.zeitmarke { white-space: nowrap; }
.zeitmarke.ist-frisch { color: var(--dach); }

/* ---------- Eil-Leiste ------------------------------------------------------ */
.eil-leiste { display: block; background: var(--eil); color: var(--weiss); text-decoration: none; --fokus: var(--weiss); }
.eil-leiste-reihe { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--a-3); padding-block: 13px 12px; font: 600 1.05rem/1.3 var(--lesen); }
.eil-leiste strong { font: 400 1.05rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.eil-leiste .zeitmarke { font: 650 .74rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .85); }
.eil-leiste:hover span:not(.zeitmarke) { text-decoration: underline; text-decoration-thickness: 2px; }

/* ---------- Teaser ---------------------------------------------------------- */
/* Größensprünge statt Gleichmaß: lead > gross > mittel > liste > zeile.
   Keine Rahmen; Abstand und Flächen gliedern. */
.teaser-verweis { display: block; text-decoration: none; }
.teaser-text { display: flex; flex-direction: column; }
.teaser-bild { position: relative; display: block; overflow: hidden; background: var(--bildfarbe, var(--grund-2)); margin-bottom: var(--a-3); aspect-ratio: 16 / 10; }
.teaser-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--kurve); }
.teaser-verweis:hover .teaser-bild img { transform: scale(1.03); }
.teaser-titel { font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem); line-height: 1.1; }
.teaser-kontext { margin-top: var(--a-2); color: var(--tinte-2); font-size: 1rem; line-height: 1.5; }
.teaser-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: var(--a-3); font-weight: 650; font-size: .72rem; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-3); }
.teaser-meta:empty { display: none; }
.teaser-meta .typ { font-size: .66rem; padding: 4px 6px 3px; }
.bild-einordnung {
  position: absolute; left: 0; bottom: 0; background: var(--schwarz); color: var(--weiss);
  font: 700 .64rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .1em; text-transform: uppercase; padding: 5px 6px 4px;
}

/* Lead: Foto groß, die Schlagzeile auf einer Fläche in der Farbe des Fotos, die
   ins Bild hineinragt. Die Fläche ist in beiden Ansichten dunkel. */
.teaser--lead {
  --tinte: var(--weiss); --tinte-2: rgb(255 255 255 / .86); --tinte-3: rgb(255 255 255 / .74);
  --dach: var(--gelb); --marker: var(--gelb); --marker-tinte: var(--schwarz); --fokus: var(--gelb);
}
.teaser--lead .teaser-bild { aspect-ratio: 16 / 9; margin: 0; }
.teaser--lead .teaser-text {
  position: relative; z-index: 1; margin: -64px clamp(16px, 6%, 64px) 0 0;
  padding: clamp(18px, 2.2vw, 30px) clamp(18px, 2.4vw, 34px) clamp(20px, 2.4vw, 30px);
  background: #1C1C1A; background: color-mix(in srgb, var(--bildfarbe, #2A2A28) 72%, #000);
  color: var(--tinte);
}
.teaser--lead:not(.hat-bild) .teaser-text { margin: 0; }
.teaser--lead .teaser-titel { font-size: var(--t-2); line-height: 1.02; letter-spacing: -.012em; }
.teaser--lead .teaser-kontext { font-size: 1.08rem; max-width: 56ch; }

.teaser--gross .teaser-titel { font-size: var(--t-2); line-height: 1.04; }

/* Liste: kleines Foto rechts. */
.teaser--liste .teaser-verweis { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: var(--a-4); align-items: start; }
.teaser--liste .teaser-bild { order: 2; margin: 0; aspect-ratio: 1; }
.teaser--liste .teaser-titel { font: 700 1.1rem/1.28 var(--lesen); letter-spacing: 0; }
.teaser--liste .teaser-meta { margin-top: var(--a-2); }

/* Zeile: nur Text, die Zeit zuerst wie in einem Ticker. */
.teaser--zeile .teaser-meta { order: -1; margin: 0 0 4px; font-size: .7rem; }
.teaser--zeile .teaser-titel { font: 700 1.05rem/1.3 var(--lesen); letter-spacing: 0; }
.teaser--zeile .dachzeile { font-size: .8rem; margin-bottom: 2px; }

/* ---------- Nachrichten (Startseite) ---------------------------------------- */
.nachrichten { padding-top: clamp(40px, 6vw, 80px); }
.nachrichten-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: clamp(28px, 3.4vw, 52px); align-items: start; }
.nachrichten-haupt { display: grid; gap: clamp(32px, 4vw, 48px); }
.nachrichten-mittel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-6) clamp(20px, 2.6vw, 36px); }
.neueste { background: var(--grund-2); padding: var(--a-5) var(--a-5) var(--a-4); display: grid; gap: var(--a-4); align-content: start; }
.neueste .abschnitt-titel { margin-bottom: var(--a-2); }
.neueste-liste { display: grid; gap: var(--a-5); }
.neueste .werbung { margin-bottom: 0; }

/* ---------- Ressorts -------------------------------------------------------- */
.ressorts { padding: clamp(40px, 6vw, 80px) 0; }
.ressorts-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(48px, 6vw, 80px) clamp(24px, 3vw, 44px); }
.ressort-block { display: grid; gap: var(--a-5); align-content: start; }
.ressort-block .abschnitt-kopf { margin-bottom: 0; }
.ressorts-werbung { grid-column: 1 / -1; }
.ressorts-werbung .werbung { margin-block: 0; }

/* ---------- Spezial-Band ---------------------------------------------------- */
.spezialband { background: var(--band); color: var(--band-tinte); padding: clamp(44px, 6vw, 84px) 0; transition: background-color .7s var(--kurve); }
.spezialband .abschnitt-kopf { border-top-color: var(--band-tinte); }
.spezialband .etikett, .spezialband .mehr { color: var(--band-tinte); }
.spezialband .etikett::before { background: var(--band-tinte); }
.spezialband .abschnitt-text { color: var(--band-tinte-2); }
.spezial-reihe {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 210px); gap: var(--a-5);
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--a-4); scrollbar-color: var(--band-tinte) transparent;
}
.spezial-karte { scroll-snap-align: start; display: grid; gap: var(--a-3); text-decoration: none; }

.spezial-meta { display: flex; align-items: center; gap: var(--a-2); font: 650 .74rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .06em; color: var(--band-tinte-2); }
.spezial-meta .typ--spezial { background: var(--band-tinte); color: var(--band); }
.spezial-titel { font: 700 1rem/1.3 var(--lesen); }
.spezial-karte:hover .spezial-titel { text-decoration: underline; text-decoration-thickness: 2px; }

/* ---------- Unten: Köpfe und Kalender --------------------------------------- */
.unten { padding: clamp(44px, 6vw, 84px) 0; }
.unten-raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.koepfe { display: flex; flex-wrap: wrap; gap: var(--a-2); list-style: none; padding: 0; }
.kopf-chip {
  display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none;
  font: 600 1.02rem/1 var(--lesen); padding: 10px 12px; background: var(--grund-2);
  transition: background-color var(--kurz), color var(--kurz);
}
.kopf-chip span { font-weight: 800; font-size: .74rem; color: var(--tinte-3); }
.kopf-chip:hover { background: var(--marker); color: var(--marker-tinte); }
.kopf-chip:hover span { color: var(--marker-tinte); }

.kalender-titel { font-size: 1.3rem; margin-bottom: var(--a-3); }
.kalender-raster { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.kalender-wochentag { font-weight: 740; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-3); padding-bottom: 4px; }
.kalender-tag { min-height: 46px; padding: 5px; display: grid; align-content: space-between; gap: 4px; }
.kalender-tag.hat-sendung { background: var(--grund-2); }
.kalender-tag.ist-heute { background: var(--tinte); color: var(--grund); }
.kalender-zahl { font: 700 .8rem/1 var(--werkzeug); font-stretch: 82%; }
.kalender-marken { display: flex; flex-wrap: wrap; gap: 3px; }
.kalender-marke { display: inline-block; width: 10px; height: 10px; background: var(--tinte); }
.ist-heute .kalender-marke--morgen, .ist-heute .kalender-marke--spezial { background: var(--grund); }
.ist-heute .kalender-marke--abend { box-shadow: inset 0 0 0 2px var(--grund); }
.kalender-marke--abend { background: transparent; box-shadow: inset 0 0 0 2px var(--tinte); }
.kalender-marke--spezial { background: var(--tinte); border-radius: 50%; }
.kalender-marke--eil { background: var(--eil); }
.kalender-marke--ausland { background: var(--ausland); }
a.kalender-marke:hover { transform: scale(1.4); }
.kalender-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: var(--a-4); font: 650 .74rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-2); }
.kalender-legende .kalender-marke { margin-right: -8px; }
.kalender-raster + .kalender-raster { margin-top: 0; }
.rahmen > .kalender-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--a-7) var(--a-6); margin-top: var(--a-6); }

/* ---------- Ausgabe --------------------------------------------------------- */
.ausgabe-kopf { padding: clamp(28px, 5vw, 60px) 0 clamp(24px, 4vw, 48px); }
.ausgabe-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2) var(--a-4); }
.ausgabe-meta time, .ausgabe-meta > span { font: 650 .82rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-2); white-space: nowrap; }
.ausgabe-titel { font-size: var(--t-1); line-height: .94; letter-spacing: -.022em; margin-top: var(--a-4); max-width: 18ch; }
.ausgabe-raster { display: grid; grid-template-columns: minmax(250px, 360px) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); padding-block: clamp(28px, 4vw, 56px) clamp(48px, 7vw, 96px); align-items: start; }
.ausgabe-spalte { position: sticky; top: calc(var(--band-hoehe) + 24px); display: grid; gap: var(--a-4); }
.ausgabe-teilen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-3) var(--a-5); }
.mitlesen { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; padding: var(--a-3) var(--a-4); background: var(--tinte); color: var(--grund); font-weight: 600; }
.mitlesen .etikett { color: var(--grund); }

.meldung { padding: var(--a-7) 0 var(--a-5); transition: background-color var(--mittel); }
.meldung:first-of-type { border-top: 0; padding-top: 0; }
.meldung-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-3); margin-bottom: var(--a-3); }
.meldung h2 { font-size: var(--t-2); line-height: 1.04; max-width: 24ch; }
.meldung h2 a { text-decoration: none; }
.meldung-kontext { margin-top: var(--a-4); font: 500 1.22rem/1.45 var(--lesen); color: var(--tinte-2); max-width: 60ch; }
.meldung-text { margin: var(--a-4) 0 var(--a-5); color: var(--lesetext); font-size: 1.15rem; line-height: 1.65; max-width: 62ch; }
.meldung-text p + p, .meldungsseite-text p + p { margin-top: 1em; }
.meldung-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2) var(--a-5); margin: var(--a-4) 0 var(--a-3); }
.meldung.ist-dran { box-shadow: -14px 0 0 var(--tinte); }
.meldung.ist-dran .zaehler::after { content: " · läuft"; }

.transparenz { margin-top: var(--a-6); padding: var(--a-5); background: var(--grund-2); display: grid; gap: var(--a-3); }
.transparenz p:not(.etikett) { color: var(--tinte-2); font-size: 1rem; max-width: 64ch; }
.blaettern { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a-4); margin-top: var(--a-6); }
.blaettern a { display: grid; gap: var(--a-2); padding: var(--a-4); text-decoration: none; background: var(--grund-2); transition: background-color var(--kurz); }
.blaettern a:hover { background: var(--linie); }
.blaettern strong { font: 700 1.05rem/1.3 var(--lesen); }
.blaettern-danach { grid-column: 2; text-align: right; }

/* ---------- Meldungsseite --------------------------------------------------- */
.meldungsseite-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: clamp(32px, 6vw, 96px); padding-block: clamp(28px, 5vw, 64px) clamp(40px, 6vw, 80px); align-items: start; }
.meldungsseite-haupt { max-width: 780px; }
.meldungsseite-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2) var(--a-4); font: 640 .82rem/1.3 var(--werkzeug); font-stretch: 82%; letter-spacing: .04em; color: var(--tinte-2); }
.meldungsseite-meta a { font-weight: 760; }
.meldungsseite-aktualisiert { color: var(--dach); font-weight: 700; }
.meldungsseite-titel { font-size: var(--t-1); line-height: .98; letter-spacing: -.02em; margin: var(--a-4) 0 var(--a-5); }
.meldungsseite-kontext { font: 500 clamp(1.25rem, 1.05rem + .7vw, 1.6rem)/1.4 var(--lesen); color: var(--tinte); max-width: 40ch; }
.meldungsseite-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-3) var(--a-4); margin: var(--a-5) 0 var(--a-6); }
.meldungsseite-bild { margin: 0 0 var(--a-6); }
.meldungsseite-bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--schwarz); }
.meldungsseite-bild figcaption { margin-top: var(--a-2); font-size: .8rem; color: var(--tinte-3); }
.meldungsseite-bild figcaption a { color: inherit; text-decoration-thickness: 1px; }
.meldungsseite-text { color: var(--lesetext); font-size: clamp(1.15rem, 1.05rem + .3vw, 1.3rem); line-height: 1.68; max-width: 62ch; margin-bottom: var(--a-6); }
.meldungsseite .quellen, .meldungsseite .personen { margin-bottom: var(--a-5); }
.meldungsseite-seite { position: sticky; top: calc(var(--band-hoehe) + 24px); }
.im-video-kasten { display: grid; gap: var(--a-4); }
.geschwister { list-style: none; padding: 0; display: grid; gap: 2px; }
.geschwister li { display: grid; grid-template-columns: 34px 1fr; gap: 4px; padding: var(--a-2) 0; font: 600 .95rem/1.35 var(--lesen); }
.geschwister li[aria-current] { font-weight: 700; }
.geschwister li[aria-current] span:last-child { background: var(--tinte); color: var(--grund); padding: 0 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.geschwister a { text-decoration: none; }
.geschwister a:hover { text-decoration: underline; }
.mehr-aus { padding-bottom: clamp(48px, 7vw, 96px); }
.mehr-aus-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a-6) var(--a-5); }

/* ---------- Rubrikseiten ---------------------------------------------------- */
.rubrik-kopf { padding: clamp(32px, 5vw, 72px) 0 clamp(24px, 4vw, 48px); }
.rubrik-kopf h1 { font-size: var(--t-riesig); line-height: .9; letter-spacing: -.028em; margin: var(--a-4) 0 var(--a-4); }
.rubrik-text { max-width: 58ch; font: 500 1.15rem/1.5 var(--lesen); color: var(--tinte-2); }
.filter { display: flex; flex-wrap: wrap; gap: var(--a-2); margin-top: var(--a-5); }
.filter a {
  font-weight: 740; font-size: .76rem; line-height: 1; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  padding: 10px 12px 9px; background: var(--grund-2);
}
.filter a:hover { background: var(--grund-3); }
.filter a[aria-current] { background: var(--marker); color: var(--marker-tinte); box-shadow: none; }
.filter .filter-eilmeldung[aria-current] { background: var(--eil); color: var(--weiss); box-shadow: none; }
.filter .filter-auslandsspezial[aria-current] { background: var(--ausland); color: var(--weiss); box-shadow: none; }

.ausgaben-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--a-7) var(--a-5); padding-block: var(--a-6) var(--a-7); }
.karte { display: grid; gap: var(--a-3); align-content: start; min-width: 0; }
.karte-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; }
.karte-kopf time { font: 650 .76rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .04em; color: var(--tinte-3); white-space: nowrap; }
.karte-meldungen { list-style: none; padding: 0; display: grid; gap: var(--a-2); }
.karte-meldungen li { display: grid; grid-template-columns: 30px 1fr; gap: 4px; }
.karte-meldungen .zaehler { font-size: .74rem; line-height: 1.8; }
.karte-meldungen a { font: 600 .98rem/1.32 var(--lesen); text-decoration: none; }

.meldungsliste { padding-bottom: clamp(48px, 7vw, 96px); }
.tagesgruppe { padding-top: var(--a-6); }
.tagesgruppe-titel { display: flex; align-items: baseline; gap: var(--a-3); font-size: var(--t-3); padding-top: var(--a-2); margin-bottom: var(--a-4); }
.tagesgruppe-titel span { font: 650 .82rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-3); }
.tagesgruppe-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-6) var(--a-5); }
.tagesgruppe-liste .teaser--lead { grid-column: span 2; grid-row: span 2; }
.treffer-liste { list-style: none; padding: 0; }
.treffer-liste a { display: grid; gap: 4px; padding: var(--a-3) 0; text-decoration: none; }
.treffer-liste a:hover strong { text-decoration: underline; }

.seitenzahlen { margin-top: var(--a-7); }
.seitenzahlen ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--a-2); }
.seitenzahlen a, .seitenzahlen span {
  display: inline-block; min-width: 44px; padding: 12px 14px; text-align: center; text-decoration: none;
  font: 740 .82rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .06em; background: var(--grund-2);
}
.seitenzahlen .current { background: var(--marker); color: var(--marker-tinte); }
.seitenzahlen a:hover { background: var(--grund-3); }

/* ---------- Textseiten ------------------------------------------------------ */
.textseite { padding-block: clamp(32px, 5vw, 72px) clamp(48px, 7vw, 104px); }
.textseite-kopf h1 { font-size: var(--t-1); line-height: .96; letter-spacing: -.02em; margin: var(--a-4) 0 var(--a-6); max-width: 16ch; }
.textseite-inhalt { max-width: 720px; color: var(--lesetext); font-size: 1.12rem; line-height: 1.68; }
.textseite-inhalt > * + * { margin-top: 1em; }
.textseite-inhalt h2 { font-size: var(--t-3); margin-top: 2.2em; }
.textseite-inhalt .vorspann { font: 500 1.35rem/1.45 var(--lesen); }
.textseite-inhalt ul, .textseite-inhalt ol { padding-left: 1.2em; }
.textseite-inhalt li + li { margin-top: .4em; }
.textseite-inhalt a { font-weight: 600; }
.textseite-zahlen { max-width: 720px; margin-top: var(--a-6); padding: var(--a-5); background: var(--tinte); color: var(--grund); font-size: 1.1rem; }
.entwurf-hinweis { box-shadow: inset 0 0 0 2px var(--eil); padding: var(--a-3) var(--a-4); color: var(--tinte); font-weight: 600; }
.korrekturen-liste { list-style: none; padding: 0 !important; }
.korrekturen-liste li { padding: var(--a-4) 0; display: grid; gap: 6px; }
.korrekturen-liste time { font: 740 .78rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .1em; text-transform: uppercase; }
.korrekturen-leer { font-weight: 500; }

.leer { padding-block: var(--a-8); font-size: 1.2rem; }
.leer h1 { font-size: var(--t-1); margin-bottom: var(--a-4); }
.nichts { padding-block: clamp(48px, 8vw, 120px); }
.nichts h1 { font-size: var(--t-riesig); line-height: .9; letter-spacing: -.028em; margin: var(--a-4) 0 var(--a-5); max-width: 12ch; }
.nichts .rubrik-text { margin-bottom: var(--a-5); }

/* ---------- Fuß ------------------------------------------------------------- */
.fuss { background: var(--band); color: var(--band-tinte); padding: clamp(56px, 8vw, 112px) 0 var(--a-6); transition: background-color .7s var(--kurve), color .7s var(--kurve); }
.signatur { font: 400 clamp(2.4rem, 1.2rem + 5.4vw, 6.6rem)/.95 var(--display); letter-spacing: -.025em; color: var(--signatur); }
.signatur q { quotes: "„" "“"; }
.signatur q::before, .signatur q::after { color: var(--band-tinte); }
/* Reichweite: große Zahlen, ehrlich abgerundet („über 490.000“). */
.reichweite { margin-top: var(--a-7); }
.reichweite-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--a-5) var(--a-6); margin: 0; }
.reichweite-zahlen div { display: flex; flex-direction: column-reverse; gap: 6px; }
.reichweite-zahlen dt { font: 700 .78rem/1.2 var(--werkzeug); font-stretch: 82%; letter-spacing: .12em; text-transform: uppercase; color: var(--band-tinte-2); }
.reichweite-zahlen dd { margin: 0; font: 400 clamp(2rem, 1.3rem + 2.6vw, 3.6rem)/1 var(--display); letter-spacing: -.02em; color: var(--band-tinte); font-variant-numeric: tabular-nums; }
.reichweite-zahlen small { display: block; font: 700 .8rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; }
.meistgesehen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: var(--a-6); font: 700 clamp(1.1rem, 1rem + .5vw, 1.4rem)/1.3 var(--lesen); }
.meistgesehen a { color: inherit; }
.meistgesehen-etikett { font: 760 .78rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .12em; text-transform: uppercase; background: var(--band-tinte); color: var(--band); padding: 6px 8px 5px; }
.meistgesehen-zahl { font: 650 .9rem/1.3 var(--werkzeug); font-stretch: 82%; letter-spacing: .04em; color: var(--band-tinte-2); }
.reichweite-stand { margin-top: var(--a-3); font-size: .82rem; color: var(--band-tinte-2); }
.fuss-spalten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a-6); margin-top: var(--a-8); }
.fuss-titel { font: 760 var(--t-etikett)/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .12em; text-transform: uppercase; color: var(--band-tinte-2); margin-bottom: var(--a-4); }
.fuss ul { list-style: none; padding: 0; display: grid; gap: var(--a-2); }
.fuss li a { text-decoration: none; font-weight: 600; }
.fuss li a:hover { text-decoration: underline; }
.fuss-ki { margin-top: var(--a-7); max-width: 70ch; color: var(--band-tinte-2); font-size: .9rem; }
.fuss-powered { margin-top: var(--a-6); font: 650 .78rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .08em; text-transform: uppercase; color: var(--band-tinte-2); }
.fuss-powered a { color: var(--band-tinte); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.fuss-powered a:hover { text-decoration-thickness: 2px; }
.fuss :focus-visible { outline-color: var(--band-tinte); }

/* ---------- Newsletter ------------------------------------------------------ */
.newsletter {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--a-4) var(--a-7); align-items: end;
  margin-block: var(--a-7); padding: var(--a-6); background: var(--grund-2);
}
.newsletter-titel { font-size: var(--t-2); line-height: 1.02; margin: var(--a-2) 0 var(--a-3); }
.newsletter-vorspann { color: var(--tinte-2); max-width: 46ch; }
.newsletter-label { display: block; font: 700 .78rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-3); margin-bottom: var(--a-2); }
.newsletter-reihe { display: flex; background: var(--grund); box-shadow: inset 0 0 0 1px var(--linie); }
.newsletter-reihe:focus-within { box-shadow: inset 0 0 0 2px var(--marker); }
.newsletter-reihe input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 15px 16px; font-size: 1.05rem; }
.newsletter-reihe input:focus { outline: none; }
.newsletter-reihe button {
  border: 0; cursor: pointer; padding: 0 22px; background: var(--marker); color: var(--marker-tinte);
  font: 760 .82rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .1em; text-transform: uppercase;
}
.newsletter-klein { margin-top: var(--a-3); font-size: .8rem; line-height: 1.5; color: var(--tinte-3); }
.newsletter-klein a { color: inherit; }
.newsletter-weg { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.newsletter-meldung { grid-column: 1 / -1; padding: var(--a-3) var(--a-4); background: var(--marker); color: var(--marker-tinte); font-weight: 600; }
.newsletter-meldung--fehler, .newsletter-meldung--langsam { background: var(--eil); color: var(--weiss); }
/* Im gelben Fuß: Farben des Bandes. */
.newsletter--fuss { --grund-2: transparent; --grund: var(--weiss); --tinte-2: var(--band-tinte-2); --tinte-3: var(--band-tinte-2); --linie: var(--band-linie); --marker: var(--band-tinte); --marker-tinte: var(--band); padding-inline: 0; color: var(--band-tinte); }
.newsletter--fuss .etikett { color: var(--band-tinte); }
.newsletter--fuss .newsletter-reihe input { color: var(--schwarz); }
/* Am Handy untereinander statt gequetscht nebeneinander; unter 420 px auch Feld und Knopf. */
@media (max-width: 760px) {
  .newsletter { grid-template-columns: minmax(0, 1fr); padding: var(--a-5) var(--a-4); gap: var(--a-4); }
  .newsletter--fuss { padding-inline: 0; }
}
@media (max-width: 420px) {
  .newsletter-reihe { flex-direction: column; }
  .newsletter-reihe button { padding: 15px 18px; }
}

/* ---------- Kommentare (Plugin „Bescheid Kommentare“) ---------------------- */
/* Flächen statt Linien: jeder Kommentar eine Mulde, das Formular eine Fläche.
   Felder tragen nur eine Grundlinie — die Grenze eines Eingabefelds muss
   sichtbar sein (WCAG 1.4.11), sonst gliedert Abstand. */
.kommentare { margin-block: var(--a-7); }
.kommentare-kopf { display: grid; gap: var(--a-2); margin-bottom: var(--a-5); }
.kommentare-titel { font-size: var(--t-2); line-height: 1.02; }
.kommentare-hinweis { color: var(--tinte-2); font-size: var(--t-klein); line-height: 1.5; max-width: 62ch; }
.kommentare-hinweis a, .kommentar-klein a, .melde-einleitung a { color: inherit; font-weight: 600; }
.kommentare-meldung { padding: var(--a-3) var(--a-4); background: var(--marker); color: var(--marker-tinte); font-weight: 600; line-height: 1.45; margin-bottom: var(--a-4); }
.kommentar .kommentare-meldung { margin: var(--a-3) 0 var(--a-2); font-size: var(--t-klein); }
.kommentare-fehler { padding: var(--a-3) var(--a-4); background: var(--eil); color: var(--weiss); --fokus: var(--weiss); font-weight: 600; line-height: 1.45; }
.kommentare-fehler ul { margin-top: 4px; padding-left: 1.1em; font-weight: 500; }
.kommentare-fehler a { color: inherit; }
.kommentare-leer { color: var(--tinte-2); margin-bottom: var(--a-4); }
.kommentare-zu { padding: var(--a-4) var(--a-5); background: var(--grund-2); color: var(--tinte-2); font-size: var(--t-klein); }

.kommentar-liste { list-style: none; padding: 0; display: grid; gap: var(--a-2); margin-bottom: var(--a-5); }
.kommentar { background: var(--grund-2); padding: var(--a-4) var(--a-5) var(--a-2); scroll-margin-top: calc(var(--band-hoehe) + 16px); }
.kommentar:target { box-shadow: -6px 0 0 var(--marker); }
.kommentar-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--a-3); margin-bottom: var(--a-2); }
.kommentar-name { font: 700 1.02rem/1.3 var(--lesen); color: var(--tinte); overflow-wrap: anywhere; }
.kommentar-kopf time { font: 650 .74rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-3); }
.kommentar-kopf time.ist-frisch { color: var(--dach); }
.kommentar-text { color: var(--lesetext); font-size: 1.05rem; line-height: 1.6; overflow-wrap: anywhere; }
.kommentar-text p + p { margin-top: .8em; }

.kommentar-melden { margin-top: var(--a-1); }
.kommentar-melden summary {
  display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; list-style: none;
  font: 720 .72rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-3);
}
.kommentar-melden summary::-webkit-details-marker { display: none; }
.kommentar-melden summary:hover { color: var(--tinte); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.kommentar-melden[open] summary { color: var(--tinte); }
.melde-formular { display: grid; gap: var(--a-4); margin: var(--a-2) 0 var(--a-3); padding: var(--a-4); background: var(--grund-3); }
.melde-formular > .knopf { justify-self: start; }
.melde-einleitung { font-size: var(--t-klein); color: var(--tinte-2); line-height: 1.5; }
.melde-gruende { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }

.kommentar-formular { display: grid; gap: var(--a-5); padding: var(--a-6); background: var(--grund-2); }
.kommentar-formular-titel { font-size: var(--t-3); }
.kommentar-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-4); }
.feldgruppe { display: grid; gap: 6px; align-content: start; }
.feldgruppe label, .melde-gruende legend {
  font: 700 .78rem/1.2 var(--werkzeug); font-stretch: 82%; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2);
}
.melde-gruende legend { padding: 0; margin-bottom: 4px; }
.freiwillig { font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--tinte-3); }
.kommentare input[type="text"], .kommentare input[type="email"], .kommentare textarea,
.kontakt-formular input[type="text"], .kontakt-formular input[type="email"], .kontakt-formular textarea {
  width: 100%; border: 0; border-radius: 0; background: var(--grund); color: var(--tinte);
  box-shadow: inset 0 -2px 0 var(--tinte-3); padding: 13px 14px 12px; font: 400 1.05rem/1.5 var(--lesen);
}
.kommentare textarea, .kontakt-formular textarea { min-height: 9.5rem; resize: vertical; }
.melde-formular textarea { min-height: 5.5rem; }
.kommentare input:focus, .kommentare textarea:focus,
.kontakt-formular input:focus, .kontakt-formular textarea:focus { box-shadow: inset 0 -3px 0 var(--marker); }
.kommentare [aria-invalid="true"], .kontakt-formular [aria-invalid="true"] { box-shadow: inset 0 -3px 0 var(--eil); }
/* Kontaktformular (/kontakt/): dieselben Bausteine wie das Kommentarformular */
.kontakt { margin-block: var(--a-6); }
.kontakt-danke { margin-bottom: var(--a-5); padding: var(--a-4) var(--a-5); background: var(--grund-2); font-weight: 600; box-shadow: inset 4px 0 0 var(--marker); }
.kontakt-formular .kommentar-klein a { font-weight: 600; }
.feldhilfe { font-size: .85rem; line-height: 1.45; color: var(--tinte-3); }
.feld-fehler { font-weight: 600; font-size: .9rem; line-height: 1.4; color: var(--tinte); padding-left: 10px; box-shadow: inset 3px 0 0 var(--eil); }
.wahl { display: flex; gap: 10px; align-items: flex-start; font-size: .98rem; line-height: 1.4; cursor: pointer; }
.wahl input { flex: none; width: 18px; height: 18px; margin: .12em 0 0; accent-color: var(--marker); }
.wahl--haken { font-size: .92rem; color: var(--tinte-2); }
.kommentar-absenden { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-3) var(--a-5); }
.kommentar-klein { flex: 1 1 260px; font-size: .82rem; line-height: 1.5; color: var(--tinte-3); max-width: 56ch; }
.kommentar-weg { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.textseite-inhalt h3 { font-size: 1.3rem; line-height: 1.15; margin-top: 1.6em; }
.kommentarregeln-stand { font-size: .9rem; color: var(--tinte-3); }

/* ---------- Mittelbreit ----------------------------------------------------- */
@media (max-width: 1100px) {
  .band-ressorts { display: none; }
  .menue-knopf { display: grid; }
  .ressorts-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mehr-aus-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tagesgruppe-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .nachrichten-raster { grid-template-columns: 1fr; }
  .aufmacher-raster, .ausgabe-raster, .meldungsseite-raster, .unten-raster { grid-template-columns: 1fr; }
  .aufmacher-video, .ausgabe-spalte, .meldungsseite-seite { position: static; }
  .aufmacher-video, .ausgabe-spalte { max-width: 380px; width: 100%; }
  .im-video-kasten { grid-template-columns: 150px 1fr; align-items: start; }
  .im-video-kasten .etikett, .im-video-kasten .knopf { grid-column: 1 / -1; justify-self: start; }
  .im-video-kasten .einbettung-leiste { display: none; }
  .im-video-kasten .einbettung-start { font-size: .66rem; letter-spacing: .05em; padding: 10px 4px; gap: 6px; }
  .im-video-kasten .einbettung-start svg { width: 13px; height: 13px; }
  .im-video-kasten .einbettung-dauer { display: none; }
}

/* ---------- Handy ----------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --band-hoehe: 56px; --t-text: 1.06rem; }
  .wortmarke { font-size: 1.15rem; padding: 7px 9px 6px; }
  /* Die Sendungsleiste läuft rechts aus: Hier geht es weiter. */
  .sendungen-reihe { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); padding-right: 40px; }
  .uhr { padding-right: var(--a-2); margin-right: 0; }
  .uhr-text .uhr-rest { display: none; }
  .band .knopf-symbol { width: 40px; }
  .ressorts-raster, .mehr-aus-raster, .tagesgruppe-liste, .nachrichten-mittel { grid-template-columns: 1fr; }
  .teaser--lead .teaser-text { margin: -40px var(--a-4) 0 0; }
  .neueste { margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand); }
  .tagesgruppe-liste .teaser--lead { grid-column: auto; grid-row: auto; }
  .ausgaben-raster { grid-template-columns: 1fr 1fr; gap: var(--a-6) var(--a-3); }
  .karte-meldungen li { grid-template-columns: 1fr; gap: 0; }
  .karte-meldungen a { font-size: .92rem; }
  .sendetag-reihe { grid-template-columns: 1fr; }
  .marke-name { display: none; }
  .leiste-zahl:not(.leiste-zahl--haupt) { display: none; }
  .aufmacher-video { max-width: 300px; margin-inline: auto; }
  .ausgabe-spalte { max-width: 320px; margin-inline: auto; }
  .blaettern { grid-template-columns: 1fr; }
  .blaettern-danach { grid-column: 1; text-align: left; }
  .menue-spalten { grid-template-columns: 1fr; gap: var(--a-5); }
  .fuss-spalten { grid-template-columns: 1fr 1fr; gap: var(--a-5); }
  .meldung.ist-dran { box-shadow: -8px 0 0 var(--tinte); }
  .im-video-kasten { grid-template-columns: 120px 1fr; }
  .kommentar-felder { grid-template-columns: 1fr; }
  .kommentar { padding-inline: var(--a-4); }
  .kommentar-formular { padding: var(--a-5) var(--a-4); margin-inline: calc(-1 * var(--a-2)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .band, .sendungen, .fuss, .aufmacher-video, .ausgabe-spalte, .meldung-fuss, .ebene, .kommentar-formular, .kommentar-melden { display: none !important; }
  :root, :root[data-ansicht="gelb"] { --grund: #fff; --tinte: #000; --tinte-2: #222; --tinte-3: #444; }
  .quelle::after { content: " (" attr(href) ")"; font-weight: 400; }
}

/* ---------- Teilen ----------------------------------------------------------
   <details>: ohne Skript klappt die Liste von selbst auf; bescheid.js ersetzt das,
   wo das Gerät ein eigenes Teilen-Menü hat. Flächen statt Linien, wie die Quellen. */
.teilen-gruppe { display: inline-block; }
.teilen-gruppe > summary { list-style: none; }
.teilen-gruppe > summary::-webkit-details-marker { display: none; }
.teilen-gruppe > summary::marker { content: ""; }
.teilen-gruppe[open] > .teilen { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.teilen-leiste { display: flex; flex-wrap: wrap; gap: var(--a-2); list-style: none; margin: var(--a-2) 0 var(--a-3); padding: 0; }
.teilen-weg {
  display: inline-flex; align-items: center; min-height: 40px; margin: 0; cursor: pointer;
  appearance: none; border: 0; background: var(--grund-2); color: var(--tinte); padding: 4px 14px 3px; text-decoration: none;
  font: 720 .78rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .1em; text-transform: uppercase;
  transition: background-color var(--kurz), color var(--kurz);
}
.teilen-weg:hover { background: var(--grund-3); }

/* ---------- Folgen (Kanäle) -------------------------------------------------
   Aus Lesern Abonnenten machen — mit reinen Links, ohne Skripte der Plattformen
   (inc/folgen.php). Das erste Element der Liste ist die Empfehlung und trägt den
   Akzent; am Handy ordnet bescheid.js um (Facebook, Instagram, YouTube, TikTok).
   Flächen statt Linien, Gelb nur für das, was wir uns wünschen. */
.folgen { margin-block: var(--a-7); }
.folgen-liste { list-style: none; padding: 0; margin: 0; }
.folgen-kanal { position: relative; }
.folgen-symbol { display: block; flex: none; }
.folgen-symbol svg { width: 30px; height: 30px; }
.folgen-name { font: 400 1.4rem/1 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.folgen-nutzen { color: var(--tinte-2); font-size: 1rem; line-height: 1.45; }
/* Der ganze Kasten ist der Link: Das Pseudo-Element spannt ihn auf; der Fokusring sitzt am Kasten. */
.folgen-link { display: inline-flex; align-items: center; color: inherit; text-decoration: none; line-height: 1; }
.folgen-link::after { content: ""; position: absolute; inset: 0; }
.folgen-link:focus-visible { outline: none; }
.folgen-link:focus-visible::after { outline: 3px solid var(--fokus); outline-offset: 3px; }
.folgen-aktion {
  display: inline-flex; align-items: center; gap: var(--a-3);
  font: 760 .82rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .1em; text-transform: uppercase;
}
.folgen-aktion svg { width: 16px; height: 16px; transition: transform var(--kurz) var(--kurve); }
.folgen-kanal:hover .folgen-aktion svg { transform: translateX(4px); }

.folgen-frage { font: 400 var(--t-3)/1.1 var(--display); letter-spacing: -.005em; text-wrap: balance; }
.folgen-nutzen-zeile { color: var(--tinte-2); font-size: var(--t-klein); line-height: 1.5; max-width: 52ch; }

/* Voll (Startseite): vier Kacheln, die erste in Akzentfarbe. */
.folgen--voll { margin-block: var(--a-8); }
.folgen-kopf { display: grid; justify-items: start; gap: var(--a-3); margin-bottom: var(--a-5); }
.folgen-titel { font-size: var(--t-2); line-height: 1.02; letter-spacing: -.015em; }
.folgen-text { color: var(--tinte-2); font-size: 1.1rem; line-height: 1.5; max-width: 52ch; }
.folgen--voll .folgen-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a-3); }
.folgen--voll .folgen-kanal {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--a-3);
  min-height: 236px; padding: var(--a-5); background: var(--grund-2);
  transition: background-color var(--kurz), color var(--kurz);
}
.folgen--voll .folgen-kanal:hover { background: var(--grund-3); }
.folgen--voll .folgen-nutzen { max-width: 26ch; }
.folgen--voll .folgen-link { margin-top: auto; padding-top: var(--a-3); }
.folgen--voll .folgen-kanal:first-child { background: var(--marker); color: var(--marker-tinte); }
.folgen--voll .folgen-kanal:first-child .folgen-nutzen { color: inherit; }
.folgen--voll .folgen-kanal:first-child:hover { background: var(--tinte); color: var(--grund); }
.folgen-zahl { margin-top: var(--a-4); color: var(--tinte-3); font-size: .9rem; line-height: 1.5; }

/* Kompakt (unter dem Video, am Ende von Ausgabe und Meldung): eine Frage, ein Satz, die Kanäle. */
.folgen--kompakt { display: grid; gap: var(--a-6); margin-block: var(--a-6); padding: var(--a-5); background: var(--grund-2); }
.folgen-folgen { display: grid; gap: var(--a-3); justify-items: start; }
.folgen--kompakt .folgen-liste { display: flex; flex-wrap: wrap; gap: var(--a-2); margin-top: var(--a-2); }
.folgen--kompakt .folgen-kanal {
  display: flex; align-items: center; gap: var(--a-2); min-height: 48px; padding: 0 var(--a-4);
  background: var(--grund-3); transition: background-color var(--kurz), color var(--kurz);
}
.folgen--kompakt .folgen-kanal:hover { background: var(--tinte); color: var(--grund); }
.folgen--kompakt .folgen-symbol svg { width: 20px; height: 20px; }
.folgen--kompakt .folgen-name { font: 760 .8rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .1em; }
.folgen--kompakt .folgen-nutzen { display: none; } /* steht in der Zeile darüber, für den ersten Kanal */
.folgen--kompakt .folgen-kanal:first-child { min-height: 52px; padding: 0 var(--a-5); background: var(--marker); color: var(--marker-tinte); }
.folgen--kompakt .folgen-kanal:first-child:hover { background: var(--tinte); color: var(--grund); }
.folgen--kompakt .folgen-kanal:first-child .folgen-aktion { margin-left: var(--a-3); }
/* Die übrigen Kanäle: Name genügt; „Folgen“ bleibt für Screenreader im Linktext. */
.folgen--kompakt .folgen-kanal:not(:first-child) .folgen-aktion {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Mitdiskutieren auf Facebook — dort läuft die Diskussion. Steht sie im Block, trägt ihr Knopf das Gelb;
   die Kanäle darunter werden leiser (Frage klein, erster Kanal in Tintenfarbe). */
.folgen-diskussion { display: grid; justify-items: start; gap: var(--a-3); }
.folgen-diskussion .knopf svg:first-child { width: 20px; height: 20px; transition: none; }
.folgen-diskussion .knopf:hover svg:first-child { transform: none; }
.folgen--diskussion .folgen-folgen .folgen-frage { font: 400 1.2rem/1.2 var(--display); }
.folgen--diskussion .folgen-kanal:first-child { background: var(--tinte); color: var(--grund); }
.folgen--diskussion .folgen-kanal:first-child:hover { background: var(--marker); color: var(--marker-tinte); }

/* Ausgabe: derselbe Aufruf zweimal, je eine Fassung sichtbar. Am Handy direkt unter dem Spieler (die Spalte steht
   dort über dem Text); am Desktop klebt die Spalte und ist unten abgeschnitten — dort steht der Aufruf am Textanfang. */
.folgen--lage-spalte { margin: 0; }
.folgen--lage-text { display: none; margin-top: 0; }
@media (min-width: 861px) {
  .folgen--lage-spalte { display: none; }
  .folgen--lage-text { display: grid; }
}

/* Gelbe Ansicht: Die Akzentfläche ist schwarz — beim Zeigen wird sie nicht weiß, sondern ein helles Oliv. */
:root[data-ansicht="gelb"] .folgen--voll .folgen-kanal:first-child:hover,
:root[data-ansicht="gelb"] .folgen--kompakt .folgen-kanal:first-child:hover { background: var(--tinte-2); color: var(--grund); }

/* Dieses Video auf … — dezent, nur Text. */
.video-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-1) var(--a-4); margin-bottom: var(--a-5); }
.video-links ul { display: contents; list-style: none; padding: 0; }
.video-link {
  display: inline-flex; align-items: center; min-height: 32px;
  font: 700 .8rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinte-2); text-decoration: none;
}
.video-link::after { content: " ↗"; white-space: pre; }
.video-link:hover { color: var(--tinte); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.video-ab { color: var(--tinte-3); font-weight: 600; white-space: pre; }

@media (max-width: 860px) {
  .folgen--voll .folgen-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .folgen--voll .folgen-kanal { min-height: 0; }
}
@media (max-width: 640px) {
  .folgen--voll { margin-block: var(--a-7); }
  .folgen--voll .folgen-liste { grid-template-columns: 1fr; gap: var(--a-2); }
  /* Am Handy eine Zeile je Kanal: Symbol, Name und Aufruf, darunter der Nutzen. */
  .folgen--voll .folgen-kanal {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "symbol name aktion" "symbol nutzen nutzen";
    column-gap: var(--a-3); row-gap: 4px; align-items: center; padding: var(--a-4);
  }
  .folgen--voll .folgen-symbol { grid-area: symbol; align-self: start; padding-top: 2px; }
  .folgen--voll .folgen-name { grid-area: name; font-size: 1.2rem; }
  .folgen--voll .folgen-link { grid-area: aktion; margin: 0; padding: 0; }
  .folgen--voll .folgen-nutzen { grid-area: nutzen; font-size: .95rem; max-width: none; }
  .folgen--kompakt { padding: var(--a-5) var(--a-4); }
  .folgen-diskussion .knopf { gap: 10px; padding: 15px 14px 14px; font-size: .8rem; letter-spacing: .08em; }
  .folgen--kompakt .folgen-folgen, .folgen--kompakt .folgen-liste { width: 100%; }
  .folgen--kompakt .folgen-kanal:first-child { flex: 1 1 100%; justify-content: center; }
  .folgen--diskussion .folgen-kanal:first-child { flex: 0 1 auto; justify-content: flex-start; } /* neben dem gelben Knopf nicht noch eine Breitseite */
  .folgen--lage-spalte { margin: 0; padding-inline: var(--a-4); }
}

@media print {
  .folgen, .video-links { display: none !important; }
}