/* Grundgestaltung. Hell und dunkel folgen der Systemeinstellung. */

:root {
  --grund: #f7f7f9;
  --flaeche: #ffffff;
  --flaeche-still: #f0f0f4;
  --rand: #dcdce4;
  --schrift: #1c1c22;
  --schrift-still: #62626e;
  --akzent: #1f6f4a;
  --akzent-schrift: #ffffff;
  /* Akzent als Fläche hinter kleiner Schrift — ein Grün, auf dem das Grün
     oben noch zu lesen ist. */
  --akzent-flaeche: #e2efe8;
  /* Markiert, was gerade aufgeklappt ist. Grün wie alles Ausgewählte auf der
     Seite; Orange stünde neben den gelben Hinweisen und läse sich als Warnung.
     Wer es anders will: nur diese Zeile ändern, etwa auf #e07a1f. */
  --hervorhebung: var(--akzent);
  --warnung: #8a5a00;
  --warnung-flaeche: #fdf3dd;
  --filler: #9a4a2f;
  --filler-flaeche: #fbeee9;
  /* Die Striche über den Folgen, die ein Streamingdienst nicht führt. */
  --luecke: #d98b76;
  /* Was der Zugang kostet: grün für umsonst, rot für ein Abo. Zwei Farben,
     die niemand verwechselt — die Marke soll aus dem Augenwinkel wirken. */
  --frei: #1f6f4a;
  --frei-flaeche: #e2efe8;
  --bezahlt: #a72b22;
  --bezahlt-flaeche: #fbe9e7;
  /* Die Originalfassung mit Untertiteln. Nicht Grau: Grau ist auf dieser Seite
     die leere Schiene und liest sich als „gibt es hier nicht“ — dabei ist es
     für viele die Fassung, die sie suchen. Und nicht Grün: Das ist die
     gesprochene Fassung, und der Unterschied ist die ganze Auskunft. Blau
     steht daneben, ohne mit Warnung (Gelb) oder Abo (Rot) verwechselt zu
     werden. */
  --untertitel: #2f6cab;
  --untertitel-flaeche: #e6eefa;
  /* Partnerlinks. Kein eigener Farbton, sondern das Grün der Seite eine Stufe
     zurückgenommen: Der Knopf soll zeigen, dass man hier kaufen kann, und
     nicht dazu auffordern. Ein zweites Rot oder Orange daneben läse sich wie
     eine Werbeanzeige — und die Kennzeichnung darunter sagt ohnehin, was es
     ist. */
  --kauf-flaeche: #e6f1eb;
  --kauf-flaeche-stark: #d4e8dd;
  --kauf-rand: #a9cdba;
  --kauf-schrift: #1a6243;
  /* Gefüllte Sterne. Dunkler als ein reines Gelb, damit sie sich auf Weiß
     noch abheben. */
  --stern: #b87d00;
  --stern-leer: #c4c4ce;
  --radius: 10px;
  --schatten: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #16161a;
    --flaeche: #1e1e24;
    --flaeche-still: #26262e;
    --rand: #33333d;
    --schrift: #ececf1;
    --schrift-still: #9a9aa8;
    --akzent: #4bbd85;
    --akzent-schrift: #10261c;
    --akzent-flaeche: #1b332a;
    --warnung: #e0b657;
    --warnung-flaeche: #332a12;
    --filler: #e09277;
    --filler-flaeche: #33221c;
    --luecke: #8c4d3a;
    --frei: #4bbd85;
    --frei-flaeche: #1b332a;
    --bezahlt: #f1948c;
    --bezahlt-flaeche: #35201e;
    --untertitel: #7ab3ea;
    --untertitel-flaeche: #1b2b3c;
    --kauf-flaeche: #1c3429;
    --kauf-flaeche-stark: #244335;
    --kauf-rand: #356048;
    --kauf-schrift: #7fd3a9;
    --stern: #f2c14e;
    --stern-leer: #4a4a56;
    --schatten: none;
  }
}

* { box-sizing: border-box; }

/* Muss den eigenen display-Regeln vorgehen, sonst bleibt hidden wirkungslos. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.rumpf { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem 4rem; }

header.kopf {
  border-bottom: 1px solid var(--rand);
  background: var(--flaeche);
  position: sticky; top: 0; z-index: 10;
}
.kopf-innen {
  max-width: 68rem; margin: 0 auto; padding: .75rem 1.25rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.marke { font-weight: 650; letter-spacing: -.01em; margin-right: auto; }
.marke a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
/* Das Logo ist breit und flach. Die Höhe gibt den Ton an, die Breite ergibt
   sich — und auf schmalen Bildschirmen darf es nie den Kopf sprengen.
   Soll es größer oder kleiner sein: nur diese beiden Höhen ändern. */
.marke img { height: 4.5rem; width: auto; max-width: min(26rem, 62vw); display: block; }
@media (max-width: 40rem) {
  .marke img { height: 3.4rem; max-width: 62vw; }
}

nav.reiter { display: flex; gap: .25rem; flex-wrap: wrap; }

/* Leisten, die seitlich geschoben werden: Menüzeile, Serienleiste,
   Filterleisten, die Knöpfe unter den Countdowns.
 *
 * Wo es weitergeht, läuft der Rand aus — der angeschnittene Eintrag dahinter
 * ist das Signal. Nur dort, wo wirklich noch etwas liegt: Die Klassen setzt
 * die Oberfläche beim Schieben (G.schiebbar). Am Anfang eines Streifens
 * behauptete ein Verlauf sonst, links stünde noch etwas.
 *
 * Gearbeitet wird mit einer Maske statt mit einem aufgelegten Verlauf: Sie
 * braucht kein zusätzliches Element, kennt die Farbe darunter nicht und
 * funktioniert deshalb auch vor einem Bild und im dunklen Modus. */
.schiebbar {
  --rand-links: 0rem;
  --rand-rechts: 0rem;
  -webkit-mask-image: linear-gradient(to right, transparent 0,
    #000 var(--rand-links), #000 calc(100% - var(--rand-rechts)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0,
    #000 var(--rand-links), #000 calc(100% - var(--rand-rechts)), transparent 100%);
  transition: -webkit-mask-image .2s linear, mask-image .2s linear;
  scroll-behavior: smooth;
}
.schiebbar.mehr-links { --rand-links: 1.6rem; }
.schiebbar.mehr-rechts { --rand-rechts: 1.6rem; }
@media (prefers-reduced-motion: reduce) {
  .schiebbar { scroll-behavior: auto; transition: none; }
}
/* Im Hauptmenü stehen Verweise, innerhalb der Ansichten Schaltflächen: Das
   Menü führt zu eigenen Adressen, ein Filter bleibt auf derselben. Aussehen
   soll beides gleich. */
nav.reiter button, nav.reiter a {
  border: 0; background: transparent; color: var(--schrift-still);
  padding: .4rem .7rem; border-radius: var(--radius); cursor: pointer;
  font: inherit; font-size: .93rem; text-decoration: none;
}
nav.reiter button:hover, nav.reiter a:hover {
  background: var(--flaeche-still); color: var(--schrift);
}
nav.reiter button[aria-current="true"], nav.reiter a[aria-current="true"] {
  background: var(--akzent); color: var(--akzent-schrift);
}

/* Eine Filterleiste, in der mehrere Schalter zugleich an sein können. Ein
   eingeschalteter Filter ist hervorgehoben, ein ausgeschalteter bleibt
   lesbar, aber tritt zurück — er soll als Schalter erkennbar sein und nicht
   als Verbotsschild. Die durchgestrichene Schrift sagt, was fehlt. */
nav.reiter.filterleiste button[aria-pressed="true"] {
  background: var(--flaeche-still); color: var(--schrift);
  box-shadow: inset 0 0 0 1px var(--rand);
}
nav.reiter.filterleiste button[aria-pressed="false"] {
  color: var(--schrift-still); text-decoration: line-through;
  text-decoration-thickness: 1px; opacity: .75;
}

/* Die Suche im Seitenkopf. Am Schreibtisch eine eigene Zeile unter dem Menü,
   auf dem Telefon hinter dem Lupenknopf — dort ist der Platz oben zu knapp,
   um eine dritte Zeile dauerhaft dafür herzugeben. */
.suchkopf { border-top: 1px solid var(--rand); background: var(--flaeche); }
.suchkopf-innen {
  max-width: 68rem; margin: 0 auto; padding: .5rem 1.25rem .6rem;
  display: flex; gap: .5rem; align-items: center;
}
.suchkopf input { flex: 1; min-width: 0; }
.suchknopf {
  display: none; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex: 0 0 auto;
  border: 1px solid var(--rand); background: var(--grund); color: var(--schrift);
  border-radius: 8px; cursor: pointer;
}
.suchknopf[aria-expanded="true"] { background: var(--akzent); color: var(--akzent-schrift); border-color: var(--akzent); }

/* Die Sprache der Titel, oben rechts: drei Kürzel in einer Pille. Bewusst
   klein und still — sie ist eine Einstellung, kein Menüpunkt, und soll neben
   dem Logo nicht um Aufmerksamkeit bitten. */
.sprachwahl {
  display: inline-flex; gap: 1px; flex: 0 0 auto; padding: 2px;
  border: 1px solid var(--rand); border-radius: 999px; background: var(--grund);
  /* Immer an den rechten Rand, gleich in welcher Zeile des Kopfes sie landet:
     Auf einem breiten Schirm steht sie neben dem Menü in der Ecke, auf einem
     schmalen rückt sie unter das Menü — rechtsbündig bleibt sie in beiden
     Fällen, statt am linken Rand zu stranden. */
  margin-left: auto;
}
.sprachwahl a {
  padding: .22rem .5rem; border-radius: 999px; line-height: 1.35;
  text-decoration: none; font-size: .72rem; font-weight: 600; letter-spacing: .05em;
  color: var(--schrift-still);
}
.sprachwahl a:hover { color: var(--schrift); }
.sprachwahl a[aria-current="true"] {
  background: var(--akzent); color: var(--akzent-schrift);
}

h1 { font-size: 1.65rem; letter-spacing: -.02em; margin: 2rem 0 .35rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 .75rem; }
p.lead { color: var(--schrift-still); margin: 0 0 1.5rem; max-width: 46rem; }

.karte {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--schatten);
}

.hinweis {
  background: var(--warnung-flaeche); color: var(--warnung);
  border: 1px solid currentColor; border-radius: var(--radius);
  padding: .6rem .8rem; font-size: .9rem; margin: 0 0 1.25rem;
}

label { display: block; font-size: .85rem; color: var(--schrift-still); margin-bottom: .25rem; }
input, select, textarea, button { font: inherit; }
input, select, textarea {
  width: 100%; padding: .5rem .6rem; border-radius: 8px;
  border: 1px solid var(--rand); background: var(--grund); color: var(--schrift);
}
textarea { min-height: 5rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }

.knopf {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  background: var(--akzent); color: var(--akzent-schrift); border: 0;
  padding: .55rem 1rem; border-radius: 8px; font-weight: 550; width: auto;
  /* Auch als Verweis: Ein Knopf mit Unterstreichung sieht falsch aus. */
  text-decoration: none;
}
.knopf.still { background: var(--flaeche-still); color: var(--schrift); border: 1px solid var(--rand); }
/* Ein Knopf, der einen Zustand hält — ausgewählter Wochentag, gewählte
   Woche —, muss ihn auch zeigen. Ohne diese Regel klickte man die Wochentage
   an und nichts geschah sichtbar; gemerkt hat sich die Seite es trotzdem. */
.knopf[aria-current="true"] {
  background: var(--akzent); color: var(--akzent-schrift); border-color: var(--akzent);
}
.knopf.gefahr { background: transparent; color: var(--filler); border: 1px solid currentColor; }
/* Ein Partnerlink: erkennbar als Knopf, an dem etwas zu kaufen ist, aber
   keine Aufforderung. Deshalb getönt statt gefüllt — der volle Akzentknopf
   bleibt dem vorbehalten, was die Seite selbst anbietet. */
.knopf.kaufen {
  background: var(--kauf-flaeche); color: var(--kauf-schrift);
  border: 1px solid var(--kauf-rand);
}
.knopf.kaufen:hover, .knopf.kaufen:focus-visible {
  background: var(--kauf-flaeche-stark); border-color: var(--kauf-schrift);
}
.knopf:disabled { opacity: .5; cursor: not-allowed; }

.raster { display: grid; gap: .9rem; }
.raster.zwei { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.raster.drei { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.reihe { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

/* Aufklappbare Liste ------------------------------------------------------ */

.liste { border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; background: var(--flaeche); }
.liste-zeile { border-bottom: 1px solid var(--rand); }
.liste-zeile:last-child { border-bottom: 0; }
.liste-kopf {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  /* Die Polsterung steht auch als Variable da: Der Sprung zur Einzelseite
     holt sie sich, um seine Trefferfläche hineinwachsen zu lassen. */
  --zeilenpolster: .55rem;
  padding: .55rem .8rem; background: transparent; border: 0; cursor: pointer;
  color: inherit; text-align: left;
}
.liste-kopf:hover { background: var(--flaeche-still); }
.liste-kopf[aria-expanded="true"] { background: var(--flaeche-still); font-weight: 600; }
/* Der Balken läuft über Kopf UND Inhalt: So ist zu sehen, wo ein
   aufgeklappter Band anfängt und wo er aufhört — auch wenn darin eine weitere
   Liste steht, die sonst aussähe wie die Fortsetzung der äußeren. Als
   Schatten nach innen statt als Rahmen, damit beim Aufklappen nichts
   springt. */
.liste-kopf[aria-expanded="true"],
.liste-kopf[aria-expanded="true"] + .liste-inhalt {
  box-shadow: inset 4px 0 0 var(--hervorhebung);
}
.liste-kopf[aria-expanded="true"] + .liste-inhalt { padding-left: 1.2rem; }
/* Eine Ebene tiefer — ein Kapitel innerhalb eines Bands — dieselbe Farbe,
   aber schmaler: zwei Ebenen, auf einen Blick auseinanderzuhalten. */
.liste .liste .liste-kopf[aria-expanded="true"],
.liste .liste .liste-kopf[aria-expanded="true"] + .liste-inhalt {
  box-shadow: inset 2px 0 0 var(--hervorhebung);
}
.nummer { font-variant-numeric: tabular-nums; min-width: 3.6rem; color: var(--schrift-still); }
.liste-kopf[aria-expanded="true"] .nummer { color: var(--akzent); }
.zeilentitel { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Der Titel führt zur Einzelseite, sieht aber nicht aus wie ein Verweis:
   Tausend unterstrichene Zeilen untereinander sind keine Liste mehr, sondern
   ein Flickenteppich. Beim Überfahren zeigt er sich. */
/* Der Sprung zur Einzelseite: am Zeilenende, zurückhaltend, aber groß genug
   zum Treffen — auf dem Handy sind 2,2rem knapp die empfohlene Fläche. */
/* Wo ein Zeilentitel doch ein Verweis ist — etwa in den Folgen- und
   Kapitellisten eines Handlungsbogens —, soll er wie Text aussehen und sich
   erst beim Überfahren zeigen. Sonst stünde eine Liste voller blauer,
   unterstrichener Zeilen da. */
a.zeilentitel { color: inherit; text-decoration: none; }
a.zeilentitel:hover, a.zeilentitel:focus-visible { text-decoration: underline; }

.zeilensprung {
  flex: 0 0 auto; min-width: 2.75rem;
  /* Die Trefferfläche wächst in die Polsterung der Zeile hinein statt auf sie
     drauf: So ist das Ziel auf dem Handy bequem zu treffen, ohne dass elfhundert
     Zeilen höher werden. Gestreckt allein reichte nicht — der Inhaltsbereich
     einer Zeile ist nur textgroß. */
  margin: calc(-1 * var(--zeilenpolster, .6rem)) 0 calc(-1 * var(--zeilenpolster, .6rem)) .4rem;
  padding: var(--zeilenpolster, .6rem);
  display: flex; align-items: center; justify-content: center;
  align-self: stretch; border-radius: 8px;
  color: var(--schrift-still); text-decoration: none; font-size: .95rem;
}
.zeilensprung:hover, .zeilensprung:focus-visible {
  background: var(--flaeche-still); color: var(--akzent);
}
.merkmal {
  font-size: .72rem; padding: .1rem .45rem; border-radius: 99px;
  background: var(--filler-flaeche); color: var(--filler); white-space: nowrap;
}
.merkmal.neutral { background: var(--flaeche-still); color: var(--schrift-still); }
.merkmal.zugang.kostenlos { background: var(--frei-flaeche); color: var(--frei); }
.merkmal.zugang.abo { background: var(--bezahlt-flaeche); color: var(--bezahlt); }
.liste-inhalt { padding: 1rem .8rem 1.3rem; background: var(--grund); }

.suchleiste { display: flex; gap: .6rem; margin-bottom: .9rem; flex-wrap: wrap; }

/* Sprungmarken je Hundert. Kleiner als gewöhnliche Knöpfe — es sind viele,
   und sie sollen die Liste nicht nach unten drücken. */
.sprungmarken { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .9rem; }
.sprungmarken .knopf {
  padding: .28rem .55rem; font-size: .82rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.sprungmarken .knopf:disabled { opacity: .35; }
/* Eine Zeile je zusätzlichem Bereich in der Pflege: Medium, von, bis,
   Anmerkung, weg. Auf schmalen Bildschirmen bricht sie um, statt aus dem
   Kästchen zu laufen. */
.zusatzzeile {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  margin-bottom: .5rem;
}
.zusatzzeile input[type="text"] { flex: 1; min-width: 8rem; }

/* Brotkrume auf den Einzelseiten: klein, über der Überschrift. Wer aus einem
   Suchergebnis mitten hineinspringt, sieht damit sofort, wo er ist. */
.krume {
  font-size: .85rem; color: var(--schrift-still); margin: 0 0 .6rem;
}
.krume a { color: inherit; }
.krume a:hover { color: var(--akzent); }

/* Die Bereiche im Seitenfuß. */
.fusswege {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: 0 0 .8rem;
}
.fusswege a { font-size: .88rem; }

/* „Passt dazu" — die Wege am Seitenende. Kein Aufzählungspunkt davor: Es sind
   Wege, keine Aufzählung. */
ul.verwandtes { list-style: none; padding: 0; margin: .4rem 0 0; }
ul.verwandtes li { margin: .35rem 0; }
ul.verwandtes a { font-weight: 500; }

/* Schwebende Sammelaktion -------------------------------------------------- */

/* Wo reihenweise gearbeitet wird, gehört der Speicherknopf nicht ans Ende der
   Tabelle, sondern in Reichweite: eine eigene Ebene über dem Inhalt, die beim
   Scrollen stehen bleibt. Der Schatten ist kräftiger als sonst auf der Seite
   — er soll die Leiste sichtbar abheben und nicht bloß andeuten. */
.mit-schwebeleiste { padding-bottom: 5rem; }

.schwebeleiste {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 30;
  display: flex; align-items: center; gap: .75rem;
  padding: .45rem .45rem .45rem 1rem;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18), 0 3px 8px rgba(0, 0, 0, .12);
}
/* Sobald etwas offen ist, tritt die Leiste hervor. */
.schwebeleiste.offen { border-color: var(--akzent); }
.schwebestand {
  font-size: .85rem; color: var(--schrift-still); white-space: nowrap;
}
.schwebeleiste.offen .schwebestand { color: var(--schrift); font-weight: 550; }

/* Ein schwarzer Schatten trägt auf dunklem Grund nicht. Dort hebt sich die
   Leiste über eine hellere Fläche und einen feinen Lichtrand ab. */
@media (prefers-color-scheme: dark) {
  .schwebeleiste {
    background: var(--flaeche-still);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
  }
}

/* Eine Zeile, die beim Sammelspeichern hängen geblieben ist — und eine, die
   angelegt wurde und bis zum Neuladen nichts mehr annimmt. */
tr.zeile-fehler td { background: var(--filler-flaeche); }
tr.zeile-gespeichert td { opacity: .55; }
/* Eine Zeile, in der etwas umgelegt wurde, das noch niemand gesichert hat.
   Der Streifen an der Kante reicht: Die Zeile selbst soll lesbar bleiben. */
tr.zeile-offen td:first-child { box-shadow: inset 3px 0 0 var(--akzent); }

@media (max-width: 40rem) {
  .schwebeleiste { right: .9rem; bottom: .9rem; padding-left: .8rem; gap: .5rem; }
  .schwebestand { font-size: .78rem; }
  .mit-schwebeleiste { padding-bottom: 4.5rem; }
}


.suchleiste input { flex: 1; min-width: 12rem; }
.suchleiste select { flex: 0 1 auto; }

/* Suchergebnis ------------------------------------------------------------ */

/* Jeder Treffer ein Kästchen und ein Verweis: Anders als in den Listen klappt
   hier nichts auf — wer sucht, will zu genau diesem einen Eintrag. */
.treffer-liste { display: grid; gap: .5rem; }
a.treffer {
  display: block; text-decoration: none; color: inherit;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: .65rem .85rem;
}
a.treffer:hover, a.treffer:focus-visible {
  border-color: var(--akzent); background: var(--flaeche-still);
}
.treffer-kopf { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.treffer-art {
  font-size: .74rem; font-weight: 600; letter-spacing: .02em;
  color: var(--akzent); white-space: nowrap;
}
.treffer-titel { font-weight: 550; }
.treffer-zusatz {
  color: var(--schrift-still); font-size: .85rem; margin-top: .15rem;
}
/* Der Titel, in dem der Begriff tatsächlich stand — wenn das eine andere
   Sprache war als die eingestellte. */
.treffer-fremd { color: var(--schrift-still); font-size: .85rem; margin-top: .1rem; }
.treffer mark {
  background: var(--warnung-flaeche); color: inherit;
  padding: 0 .12em; border-radius: 3px;
}

/* Sternebewertung --------------------------------------------------------- */

.bewertung { display: flex; align-items: center; gap: .3rem .8rem; flex-wrap: wrap; margin-bottom: .9rem; }
.sterne { display: inline-flex; }
.stern {
  background: transparent; border: 0; padding: .15rem; cursor: pointer;
  font-size: 1.7rem; line-height: 1; color: var(--stern-leer);
}
.stern.voll { color: var(--stern); }
/* Gesperrt heißt hier „schon bewertet", nicht „kaputt" — nicht ausgrauen. */
.stern:disabled { cursor: default; }
.stern:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; border-radius: 4px; }

.leer { padding: 2rem; text-align: center; color: var(--schrift-still); }
.still { color: var(--schrift-still); font-size: .88rem; }

/* Rechnerergebnis --------------------------------------------------------- */

.ergebnis { margin-top: 1.25rem; display: grid; gap: 1rem; }
.kennzahl { display: grid; gap: .15rem; }
.kennzahl .wert { font-size: 1.8rem; font-weight: 650; letter-spacing: -.02em; }
.kennzahl .bezeichnung { font-size: .82rem; color: var(--schrift-still); }

.band-hinweis { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.band-hinweis img { width: 5.5rem; border-radius: 6px; border: 1px solid var(--rand); }

.balken { display: flex; height: .55rem; border-radius: 99px; overflow: hidden; background: var(--flaeche-still); }
.balken span { display: block; height: 100%; }
.balken .handlung { background: var(--akzent); }
.balken .fuellung { background: var(--filler); }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--rand); }
th { color: var(--schrift-still); font-weight: 550; font-size: .82rem; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
td .reihe { flex-wrap: nowrap; }
/* Eingabefelder in einer Tabelle brauchen eine Mindestbreite, sonst quetscht
   sie die Spalte auf wenige Zeichen zusammen. */
td input { min-width: 5rem; }
/* Kästchen nicht: Dort schob die Mindestbreite die Beschriftung fünf
   Zentimeter nach rechts, und niemand sah mehr, wozu der Haken gehört. */
td input[type="checkbox"], td input[type="radio"] { min-width: 0; }
/* Und die Beschriftung bleibt beim Kästchen, statt unter ihm umzubrechen:
   eng daneben und in einer Zeile. Die Spalte wird dadurch etwas breiter —
   die Tabelle scrollt ohnehin waagerecht, und ein Haken, dessen Beschriftung
   zwei Zeilen weiter steht, ist die schlechtere Wahl. */
td label.reihe { gap: .35rem; white-space: nowrap; }

.werbekennzeichnung { font-size: .78rem; color: var(--schrift-still); }
footer.fuss { border-top: 1px solid var(--rand); margin-top: 3rem; padding: 1.5rem 0; color: var(--schrift-still); font-size: .85rem; }

/* Beiträge -------------------------------------------------------------- */

.beitrag { max-width: 46rem; }
.beitrag h2 { font-size: 1.3rem; margin: 2rem 0 .6rem; }
.beitrag h3 { font-size: 1.05rem; margin: 1.6rem 0 .5rem; }
.beitrag p { margin: 0 0 1rem; }
.beitrag a { color: var(--akzent); }
.beitrag ul, .beitrag ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.beitrag li { margin-bottom: .3rem; }
.beitrag::after { content: ""; display: block; clear: both; }

.baustein-bild { margin: 0 0 1.2rem; }
.baustein-bild img { display: block; width: 100%; border-radius: 8px; }
.baustein-bild.rahmen img { border: 1px solid var(--rand); padding: .3rem; background: var(--flaeche); }
.baustein-bild figcaption { font-size: .84rem; color: var(--schrift-still); margin-top: .4rem; }
/* Bildnachweis: kleiner als die Unterschrift, aber lesbar. Er steht sichtbar
   unter dem Bild, nicht nur im Quelltext — sonst erfüllt er seinen Zweck nicht. */
.bildnachweis { display: block; font-size: .76rem; color: var(--schrift-still); opacity: .85; }
figcaption > span + .bildnachweis { margin-top: .15rem; }
.bildnachweis a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Der Aufmacher noch einmal über dem Text des Beitrags. */
.beitragsaufmacher { margin: 0 0 1.5rem; max-width: 46rem; }
.beitragsaufmacher img { display: block; width: 100%; border-radius: 8px; }
.beitragsaufmacher figcaption { margin-top: .4rem; }
/* Bildbühne: das Bild groß über allem. Dunkler Grund in beiden Themen — es
   geht um das Bild, nicht um die Seite darunter. */
.vergroesserbar { cursor: zoom-in; }
body.buehne-offen { overflow: hidden; }
.bildbuehne {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: clamp(.8rem, 4vw, 2.5rem);
  background: rgba(0, 0, 0, .86);
}
.bildbuehne figure { margin: 0; max-width: min(1100px, 100%); max-height: 100%;
  display: flex; flex-direction: column; gap: .6rem; }
.bildbuehne img {
  max-width: 100%; max-height: 80vh; margin: 0 auto;
  border-radius: 8px; background: #000; object-fit: contain;
}
.bildbuehne figcaption { color: #f3f3f3; font-size: .88rem; text-align: center; }
.bildbuehne figcaption .bildnachweis { color: #cfcfcf; }
.bildbuehne .buehne-zaehler { display: block; margin-top: .25rem; color: #bdbdbd; }
.bildbuehne .knopf { background: rgba(255, 255, 255, .12); color: #fff;
                     border-color: rgba(255, 255, 255, .25); }
.buehne-schliessen, .buehne-blaettern {
  border: 0; background: rgba(255, 255, 255, .12); color: #fff;
  border-radius: 999px; cursor: pointer; line-height: 1;
}
.buehne-schliessen { position: absolute; top: .8rem; right: .9rem;
                     width: 2.4rem; height: 2.4rem; font-size: 1.6rem; }
.buehne-blaettern { width: 2.6rem; height: 3.4rem; font-size: 1.8rem; flex: none; }
.buehne-schliessen:hover, .buehne-blaettern:hover { background: rgba(255, 255, 255, .25); }

@media (max-width: 40rem) {
  .bildbuehne { gap: .2rem; }
  .bildbuehne img { max-height: 68vh; }
  .buehne-blaettern { width: 2.1rem; height: 3rem; font-size: 1.5rem; }
}

/* Vorschau im Editor: Bild und Video lassen sich anfassen. Der Griff sitzt an
   der Kante, die zum Text zeigt, die Knöpfe oben links schalten die
   Ausrichtung. Beides gibt es nur hier — auf der Seite selbst hängt an den
   Bausteinen nichts davon. */
.anfassbar { position: relative; }
.anfassbar .groessengriff {
  position: absolute; right: -7px; bottom: 28%;
  width: 14px; height: 44px; border-radius: 7px;
  background: var(--akzent); border: 2px solid var(--flaeche);
  cursor: ew-resize; touch-action: none; opacity: 0; transition: opacity .12s;
}
.anfassbar.griff-links .groessengriff { right: auto; left: -7px; }
.anfassbar:hover .groessengriff,
.anfassbar.wird-gezogen .groessengriff { opacity: 1; }
.anfassbar.wird-gezogen { outline: 2px dashed var(--akzent); outline-offset: 3px; }
.anfassbar .bildwerkzeuge {
  position: absolute; top: .35rem; left: .35rem; z-index: 2;
  display: flex; gap: .15rem; padding: .15rem;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 7px;
  opacity: 0; transition: opacity .12s;
}
.anfassbar:hover .bildwerkzeuge, .anfassbar:focus-within .bildwerkzeuge { opacity: .96; }
.anfassbar .bildwerkzeuge button {
  border: 0; background: none; cursor: pointer; border-radius: 5px;
  padding: .1rem .3rem; font-size: .95rem; line-height: 1.2; color: var(--schrift);
}
.anfassbar .bildwerkzeuge button[aria-current="true"] {
  background: var(--akzent); color: #fff;
}
/* Ohne Maus gibt es kein Überfahren — auf dem Tablet stehen Griff und Knöpfe
   deshalb von vornherein da. */
@media (pointer: coarse) {
  .anfassbar .groessengriff { opacity: .9; }
  .anfassbar .bildwerkzeuge { opacity: .96; }
}

.baustein-bild.links { float: left; max-width: 45%; margin: .3rem 1.2rem .8rem 0; }
.baustein-bild.rechts { float: right; max-width: 45%; margin: .3rem 0 .8rem 1.2rem; }
.baustein-bild.mitte { margin-left: auto; margin-right: auto; max-width: 70%; }

/* Video im Beitrag. Der Rahmen hält das Seitenverhältnis, damit beim Laden
   nichts springt — bei einer eigenen Datei genauso wie bei YouTube. */
.baustein-video { margin: 0 0 1.2rem; }
.baustein-video figcaption { font-size: .84rem; color: var(--schrift-still); margin-top: .4rem; }
.baustein-video.links { float: left; width: 45%; margin: .3rem 1.2rem .8rem 0; }
.baustein-video.rechts { float: right; width: 45%; margin: .3rem 0 .8rem 1.2rem; }
.baustein-video.mitte { margin-left: auto; margin-right: auto; width: 70%; }

.videorahmen {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 8px; overflow: hidden; background: #000;
  container-type: inline-size;
}
.videorahmen video, .videorahmen iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  object-fit: contain; display: block;
}

/* Zweistufiges Einbetten: Bis zum Klick steht hier nur ein Bild vom eigenen
   Server. Der Hinweis sagt, was der Klick auslöst. */
.videostart {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0;
  border: 0; background: none; cursor: pointer; display: block;
}
/* Am Rahmen, nicht am Schalter: Dasselbe Standbild samt Hinweis steht auch
   dort, wo ein Browser das Videoformat nicht abspielen kann. */
.videorahmen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.videorahmen .ohnevorschau {
  position: absolute; inset: 0;
  background: linear-gradient(140deg, var(--flaeche-still), #000);
}
.videorahmen .datenhinweis {
  position: absolute; inset: auto 0 0 0; padding: .5rem .7rem;
  background: rgba(0, 0, 0, .68); color: #fff; font-size: .75rem;
  text-align: left; line-height: 1.35;
}
.videorahmen .datenhinweis .kurz { display: none; }
/* Schmaler Rahmen — etwa ein rechts schwebendes Video: kurzer Hinweis, sonst
   bliebe vom Bild nichts übrig. */
@container (max-width: 24rem) {
  .videorahmen .datenhinweis { font-size: .68rem; padding: .35rem .5rem; }
  .videorahmen .datenhinweis .lang { display: none; }
  .videorahmen .datenhinweis .kurz { display: inline; }
  .videostart .abspielen { width: 2.4rem; height: 2.4rem; }
  .videostart .abspielen::after { border-width: .4rem 0 .4rem .68rem; }
}
/* Das Abspielzeichen: ein Kreis mit Dreieck, ohne Bilddatei. */
.abspielen {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 3.6rem; height: 3.6rem; border-radius: 50%;
  background: rgba(0, 0, 0, .55); border: 2px solid rgba(255, 255, 255, .9);
  pointer-events: none;
}
.abspielen::after {
  content: ''; position: absolute; top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid; border-width: .6rem 0 .6rem 1rem;
  border-color: transparent transparent transparent #fff;
}
.videostart:hover .abspielen { background: rgba(0, 0, 0, .75); }

.baustein-galerie { display: grid; gap: .6rem; margin: 0 0 1.2rem; clear: both; }
.baustein-galerie figure { margin: 0; }
.baustein-galerie img { display: block; width: 100%; border-radius: 6px; }
.baustein-galerie.rahmen img { border: 1px solid var(--rand); }
.baustein-galerie figcaption { font-size: .8rem; color: var(--schrift-still); margin-top: .3rem; }
.baustein-galerie .bildnachweis { font-size: .72rem; }

.baustein-slideshow { position: relative; margin: 0 0 1.2rem; clear: both; }
.baustein-slideshow .buehne { position: relative; border-radius: 8px; overflow: hidden; }
.baustein-slideshow img { display: block; width: 100%; }
.baustein-slideshow .steuerung {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-top: .5rem; font-size: .85rem; color: var(--schrift-still);
}
.baustein-slideshow button {
  border: 1px solid var(--rand); background: var(--flaeche); color: var(--schrift);
  border-radius: 6px; padding: .3rem .7rem; cursor: pointer; font: inherit;
}

.baustein-kasten {
  border: 1px solid var(--rand); border-radius: var(--radius);
  padding: .9rem 1.1rem; margin: 0 0 1.2rem; background: var(--flaeche-still); clear: both;
}
.baustein-kasten.hinweis { border-color: var(--akzent); }
.baustein-kasten.warnung { background: var(--warnung-flaeche); border-color: var(--warnung); color: var(--warnung); }
.baustein-kasten .kastentitel { font-weight: 600; margin-bottom: .3rem; }

.baustein-zitat {
  border-left: 3px solid var(--akzent); padding-left: 1rem;
  margin: 0 0 1.2rem; color: var(--schrift-still); font-style: italic; clear: both;
}
.baustein-zitat .quelle { display: block; font-style: normal; font-size: .84rem; margin-top: .3rem; }

.baustein-trenner { border: 0; border-top: 1px solid var(--rand); margin: 2rem 0; clear: both; }

.beitragsliste { display: grid; gap: 1rem; }
.beitragskarte { display: flex; gap: 1rem; align-items: flex-start; }
.beitragskarte img { width: 8rem; border-radius: 8px; flex-shrink: 0; }
.beitragskarte h2 { font-size: 1.1rem; margin: 0 0 .3rem; }
.beitragskarte a { color: inherit; text-decoration: none; }
.beitragskarte a:hover { color: var(--akzent); }

@media (max-width: 40rem) {
  .baustein-bild.links, .baustein-bild.rechts { float: none; max-width: 100%; margin: 0 0 1.2rem; }
  .baustein-video.links, .baustein-video.rechts,
  .baustein-video.mitte { float: none; width: 100% !important; margin: 0 0 1.2rem; }
  .baustein-galerie { grid-template-columns: 1fr 1fr !important; }
  .beitragskarte { flex-direction: column; }
  .beitragskarte img { width: 100%; }
}

/* Streaming --------------------------------------------------------------- */

/* Je Anbieter eine Karte. Auf dem Schreibtisch nebeneinander, auf dem Telefon
   untereinander — in beiden Fällen ist die Karte die Einheit, die man
   überfliegt: Logo, Abdeckung, Bereiche, Knopf. */
.anbieterliste {
  display: grid; gap: 1rem; margin: 1.2rem 0;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}
.anbieterkarte {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 1rem; box-shadow: var(--schatten);
  display: flex; flex-direction: column; gap: .7rem;
  /* Die Hausfarbe des Dienstes als schmaler Streifen — erkennbar, ohne dass
     die Karte das Aussehen der Seite übernimmt. */
  border-top: 3px solid var(--anbieterfarbe, var(--akzent));
}
.anbieterkopf { display: flex; align-items: center; gap: .8rem; }
.anbietertitel {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; min-width: 0;
}
.anbieterkopf img { height: 1.9rem; width: auto; max-width: 9rem; object-fit: contain; }
.anbietername { font-weight: 650; font-size: 1.05rem; }
.anbieterzahl { margin-left: auto; text-align: right; line-height: 1.15; }
/* „100 %" bleibt zusammen: Zwischen Zahl und Zeichen umzubrechen sieht aus
   wie ein Fehler, und Platz spart es nicht. */
.anbieterzahl strong { font-size: 1.15rem; display: block; white-space: nowrap; }
.anbieterzahl .still { font-size: .72rem; }
/* Welche Reihe diese Karte zeigt — nur da, wo es mehr als eine gibt. Die
   Karte der Serie selbst bleibt ohne Zeile: Dort steht der Name schon über
   der Seite. */
.anbieterreihe {
  margin: -.3rem 0 0; font-size: .82rem; color: var(--schrift-still);
}
/* Die Überschrift über den Karten einer Reihe — nur da, wo eine Serie mehr
   als eine hat. Die Folgenzahl steht daneben, weil die Prozentzahlen in den
   Karten sich darauf beziehen. */
.anbieterreihen { display: grid; gap: .4rem; }
.reihentitel {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  margin: 1.1rem 0 0; font-size: 1.05rem;
}
.reihentitel .still { font-size: .8rem; font-weight: 400; }

/* Die Abdeckung über der ganzen Serie: eine Schiene, darauf je Bereich ein
   Balken an seiner Stelle. Zwei Bereiche eines Dienstes zeigen damit von
   selbst, ob sie aneinander anschließen oder eine Lücke lassen. */
.abdeckung {
  position: relative; height: 10px; border-radius: 99px;
  background: var(--flaeche-still); border: 1px solid var(--rand);
  overflow: hidden;
}
.abdeckung .abschnitt {
  position: absolute; top: 0; bottom: 0;
  background: var(--untertitel); opacity: 1;
}
.abdeckung .abschnitt.gesprochen { background: var(--akzent); opacity: 1; }
/* Dieselben zwei Farben wie im Balken, damit Zeile und Streifen ohne
   Zahlenvergleich zusammenfinden: Grün, was in der Sprache dieser Fassung
   gesprochen wird, Blau die Fassung mit Untertiteln. Grau wäre hier falsch —
   es ist die Farbe der leeren Schiene und sagte „hier gibt es nichts“. */
.anbieterbereiche .merkmal.fassung {
  background: var(--untertitel-flaeche); color: var(--untertitel);
}
.anbieterbereiche .merkmal.fassung.gesprochen {
  background: var(--akzent-flaeche); color: var(--akzent);
}
/* Folgen, die dieser Dienst nicht führt. Schraffur statt Grau: Grau ist die
   leere Schiene und sagt nur „hier ist nichts gezeichnet"; die Striche sagen
   „hier gibt es nichts". Dünn und hell, denn bei einem Anbieter mit wenigen
   Folgen ist fast die ganze Leiste Lücke — das soll auffallen, aber nicht
   schreien. */
.abdeckung .luecke {
  position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(
    45deg, transparent 0 3px, var(--luecke) 3px 4.5px);
}

.anbieterbereiche { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.anbieterbereiche li {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  font-size: .9rem;
}
/* „Folgen 1–516" bricht nicht um — das ist eine Angabe und keine zwei.
   Steht dort aber ausnahmsweise ein freier Text (oder, nach einem
   Pflegefehler, eine lange Adresse), darf er umbrechen, statt aus der Karte
   zu laufen. */
.anbieterbereiche .umfang { font-weight: 600; white-space: nowrap; }
.anbieterbereiche .umfang.frei {
  white-space: normal; overflow-wrap: anywhere; font-weight: 600;
}
/* Folgenbereich und Marke gehören zusammen und sollen in einer Zeile bleiben.
   Umbricht etwas, dann die Anmerkung dahinter — sie darf eine eigene Zeile
   bekommen, die Marke nicht. */
.anbieterbereiche li > .still { flex-basis: 100%; }
.anbieterkarte .knopf { align-self: flex-start; margin-top: auto; }

@media (max-width: 40rem) {
  .anbieterliste { grid-template-columns: 1fr; }
}

/* Bausteineditor -------------------------------------------------------- */

.bausteinliste { display: grid; gap: .8rem; }
.baustein { padding: .8rem; }
.bausteinkopf { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.bausteinkopf .knopf { padding: .25rem .55rem; }

.schreibleiste { margin-bottom: .4rem; }
/* Im Feld, in dem gerade geschrieben wird, setzt sich die Leiste unter dem
   Seitenkopf fest — sie bleibt sichtbar, solange der Baustein im Bild ist.
   --kopfhoehe misst die Oberfläche beim Start und bei jeder Breitenänderung;
   ohne den Wert klebte die Leiste hinter dem Kopf. */
.schreibgruppe.schreibt .schreibleiste {
  /* Unter dem Seitenkopf, nie darüber: Der Kopf liegt auf z-index 10, die
     Leiste darunter. Stimmt die gemessene Kopfhöhe einmal nicht, schiebt sich
     die Leiste hinter den Kopf statt über ihn — das ist das kleinere Übel. */
  position: sticky; top: calc(var(--kopfhoehe, 0px) + .3rem); z-index: 5;
  padding: .3rem; margin: -.3rem -.3rem .25rem;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 999px; box-shadow: var(--schatten);
}

.schreibfeld {
  min-height: 4rem; padding: .6rem; border: 1px solid var(--rand);
  border-radius: 8px; background: var(--grund); line-height: 1.5;
}
.schreibfeld:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.schreibfeld a { color: var(--akzent); }

.bilderliste { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
/* Der Hinweis auf die noch leere Liste steht über die ganze Breite. */
.bilderliste > .hinweis { grid-column: 1 / -1; margin: 0; }
/* Aufmacherpflege: links die Einstellungen, rechts die Kachel so, wie sie
   auf der Startseite aussehen wird. */
.aufmacherpflege { display: grid; gap: 1.2rem; grid-template-columns: 1fr 20rem; align-items: start; }
.kachelvorschau .kachel { aspect-ratio: 16 / 10; pointer-events: none; }
.kachelvorschau .kachel.gross { grid-column: auto; grid-row: auto; }
.kachelvorschau .kachel h2 { font-size: 1.15rem; }
@media (max-width: 55rem) {
  .aufmacherpflege { grid-template-columns: 1fr; }
}

/* Datum in drei Feldern: Tag, Monat, Jahr -------------------------------- */

.datumfeld input { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
/* Eine halbe Eingabe ist kein Datum — das soll man sehen, bevor gespeichert
   wird. Rot wie alles, was hier nicht stimmt. */
.datumfeld input.fehlt { border-color: var(--filler); background: var(--filler-flaeche); }

/* Schnipsel-Werkstatt ---------------------------------------------------- */

.werkstatt {
  border: 1px dashed var(--rand); border-radius: var(--radius);
  padding: .9rem; background: var(--grund);
}
.werkstattbuehne { margin: .7rem 0; }
.werkstattbuehne video { max-width: 100%; max-height: 16rem; border-radius: 8px; display: block; }
.werkstatt input[type="range"] { padding: 0; }

.bildkarte { border: 1px solid var(--rand); border-radius: 8px; padding: .4rem; display: grid; gap: .4rem; }
.bildkarte img { width: 100%; border-radius: 4px; display: block; }
.bildkarte input, .bildkarte select { font-size: .82rem; padding: .3rem; }
.bildkarte label { font-size: .76rem; margin-bottom: .1rem; }
.bildkarte .raster.zwei { grid-template-columns: 1fr; gap: .4rem; }
.bildkarte .knopf { padding: .2rem .5rem; }

.schluessel {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.15rem; letter-spacing: .08em; word-break: break-all;
  background: var(--flaeche-still); border: 1px solid var(--rand);
  border-radius: 8px; padding: .7rem .9rem; user-select: all;
}
.codeliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .5rem; }
.codeliste code {
  background: var(--flaeche-still); border: 1px solid var(--rand);
  border-radius: 6px; padding: .4rem .6rem; text-align: center;
  font-size: .95rem; letter-spacing: .05em; user-select: all;
}

.qr { background: #fff; display: inline-block; padding: .5rem; border-radius: 8px; }
.qr svg { display: block; }

/* Beschriftungsspalte in den Detailtabellen */
.feldname { width: 16rem; }

/* Schmale Bildschirme ---------------------------------------------------- */

@media (max-width: 40rem) {
  /* Die Reiterleiste wird eine einzige, seitlich schiebbare Zeile. Umgebrochen
     verbraucht sie auf dem Telefon mehr als die halbe Höhe, bevor der erste
     Inhalt kommt. */
  /* Zeile 1: das Zeichen. Zeile 2: die Reiter, seitlich schiebbar — wie die
     Serienleiste darüber. */
  .kopf-innen { flex-wrap: wrap; gap: .5rem; padding: .55rem .9rem; }
  .marke { font-size: .95rem; }
  #sprachwahl { max-width: 7rem; }
  nav.reiter {
    order: 3; flex-basis: 100%; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 -.9rem; padding: 0 .9rem .1rem;
  }
  nav.reiter::-webkit-scrollbar { display: none; }
  nav.reiter button, nav.reiter a { flex-shrink: 0; }

  /* Der Lupenknopf steht in der ersten Zeile neben dem Logo; die Suchzeile
     erscheint erst, wenn er gedrückt wurde — oder wenn ein Suchergebnis
     offen ist. */
  .suchknopf { display: inline-flex; order: 2; }
  .suchkopf { display: none; }
  body.suche-offen .suchkopf { display: block; }
  .suchkopf-innen { padding: .5rem .9rem .55rem; }

  /* Beschriftung über den Wert statt daneben — sonst bleiben für den Wert
     keine 90 Pixel übrig. */
  table.felder, table.felder tbody, table.felder tr,
  table.felder th, table.felder td { display: block; width: auto; }
  table.felder th { border-bottom: 0; padding: .5rem .2rem 0; }
  table.felder td { padding: 0 .2rem .5rem; border-bottom: 1px solid var(--rand); }

  .rumpf { padding: 0 .9rem 3rem; }
  h1 { font-size: 1.4rem; }
  .karte { padding: .9rem; }
  .raster.drei { grid-template-columns: 1fr 1fr; }
  .kennzahl .wert { font-size: 1.45rem; }
  .liste-kopf { padding: .6rem .6rem; --zeilenpolster: .6rem; flex-wrap: wrap; }
  /* Auf dem Handy hat der Titel Vorrang: Lieber bricht die Bereichsangabe in
     die zweite Zeile, als dass aus „Baratie Arc" ein „B" wird. Die 8rem sind
     die Grenze, ab der ein Titel noch etwas aussagt. */
  .zeilentitel { min-width: 8rem; }
  /* Und wenn etwas umbricht, dann diese Angaben — nicht der Sprungpfeil, der
     rechts in der ersten Zeile stehen bleiben soll. */
  .liste-kopf .zeilenzusatz { order: 1; }
  .nummer { min-width: 2.8rem; }
  .band-hinweis img { width: 4.5rem; }
}

/* Startseite: Countdowns und Kacheln ------------------------------------- */

.countdownreihe {
  display: flex; gap: .7rem; margin: 0 0 2rem; overflow-x: auto;
  scrollbar-width: none; padding-bottom: .2rem;
}
.countdownreihe::-webkit-scrollbar { display: none; }
.countdown {
  flex: 1 1 0; min-width: 11rem; background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: var(--radius);
  padding: .8rem .9rem; box-shadow: var(--schatten);
}
.countdown .was { font-size: .78rem; color: var(--schrift-still); margin-bottom: .35rem; }
.countdown .uhr {
  display: flex; gap: .5rem; font-variant-numeric: tabular-nums;
  align-items: baseline;
}
.countdown .zahl { font-size: 1.5rem; font-weight: 650; letter-spacing: -.02em; line-height: 1; }
.countdown .einheit { font-size: .7rem; color: var(--schrift-still); }
.countdown .wann { font-size: .75rem; color: var(--schrift-still); margin-top: .45rem; }

/* Die Leiste mit dem Aktuellsten, direkt unter den Uhren. Eine Zeile, die auf
   schmalen Schirmen seitlich wegscrollt statt umzubrechen — sonst schöbe jede
   weitere Serie die Neuigkeiten ein Stück tiefer. */
.aktuellleiste {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: -1.4rem 0 2rem;
}
.aktuellknoepfe {
  display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none;
  padding-bottom: .2rem;
}
.aktuellknoepfe::-webkit-scrollbar { display: none; }
.aktuellknoepfe .knopf { white-space: nowrap; }
.aktuellleiste .werbekennzeichnung { margin: 0; }
@media (max-width: 40rem) {
  /* Auf dem Handy steht die Beschriftung über den Knöpfen: Nebeneinander
     bliebe für die Knöpfe selbst kaum Platz. */
  .aktuellleiste { gap: .3rem; }
  .aktuellknoepfe { width: 100%; }
}
/* Steht kein Termin fest, tritt ein Satz an die Stelle der Ziffern. Er darf
   umbrechen — „Neue Folgen erscheinen erst wieder 2027" passt in keine Zeile. */
/* Je Format eine Zeile an einer Box: Marke, Termin und, wo einer gepflegt ist,
   der Kaufknopf. Auf schmalen Schirmen bricht sie um, statt den Knopf aus dem
   Bild zu schieben. */
.boxformat {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.boxformat .knopf { padding: .15rem .55rem; font-size: .8rem; }

/* Der Weiterlesen-Hinweis auf einer Folgenseite: die Antwort, wegen der die
   meisten hier sind. Abgesetzt, damit sie nicht zwischen den Feldern untergeht. */
.weiterlesen {
  margin: 0 0 1rem; padding: .7rem .9rem; border-radius: var(--radius);
  background: var(--flaeche-still); border-left: 3px solid var(--akzent);
  line-height: 1.5;
}

.countdown .mitteilung {
  font-size: .95rem; font-weight: 600; line-height: 1.35; hyphens: auto;
}

.kachelgitter { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.kachel {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); background: var(--flaeche);
  border: 1px solid var(--rand); text-decoration: none; color: inherit;
  aspect-ratio: 4 / 3; isolation: isolate;
}
.kachel.gross { grid-column: span 2; grid-row: span 2; aspect-ratio: 16 / 10; }
.kachel img, .kachel video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .35s ease;
}
.kachel:hover img, .kachel:hover video { transform: scale(1.04); }
/* Kleiner als im Beitrag — die Kachel lebt von der Überschrift. */
.kachel .abspielen { width: 2.8rem; height: 2.8rem; top: 42%; }
.kachel .abspielen::after { border-width: .45rem 0 .45rem .78rem; }
.kachel.gross .abspielen { width: 3.6rem; height: 3.6rem; }
.kachel.gross .abspielen::after { border-width: .6rem 0 .6rem 1rem; }
/* Der Verlauf sorgt dafür, dass die Überschrift auf jedem Bild lesbar bleibt. */
.kachel .schleier {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 38%,
                              rgba(0,0,0,0) 68%);
}
/* Über Glut und Dampf: Die Überschrift bleibt die Hauptsache. */
.kachel .text {
  position: absolute; inset: auto 0 0 0; z-index: 2; padding: 1rem; color: #fff;
}
.kachel .kopfzeile {
  display: flex; gap: .5rem; align-items: center;
  font-size: .74rem; margin-bottom: .35rem; opacity: .85;
}
.kachel h2 {
  margin: 0; font-size: 1.02rem; line-height: 1.3; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.kachel.gross h2 { font-size: 1.5rem; }
.kachel .rubrik {
  background: var(--akzent); color: var(--akzent-schrift);
  border-radius: 99px; padding: .1rem .5rem; font-weight: 600;
}
/* Ohne Bild: farbige Fläche statt leerer Kasten. */
.kachel.ohnebild { background: linear-gradient(140deg, var(--akzent), var(--flaeche-still)); }
.kachel.ohnebild .schleier { background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.1)); }

.nachladen { text-align: center; padding: 1.5rem 0; color: var(--schrift-still); }

@media (max-width: 62rem) {
  .kachelgitter { grid-template-columns: repeat(2, 1fr); }
  .kachel.gross { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 40rem) {
  /* Ein durchgehender Strom von Kacheln — zum Weiterscrollen gemacht. */
  .kachelgitter { grid-template-columns: 1fr; gap: .8rem; }
  .kachel, .kachel.gross { aspect-ratio: 3 / 2; grid-column: auto; }
  .kachel.gross h2 { font-size: 1.25rem; }
  .countdown { min-width: 9.5rem; padding: .7rem .8rem; }
  .countdown .zahl { font-size: 1.25rem; }
}

/* Fernsehprogramm -------------------------------------------------------- */

.sendetag { margin-bottom: 1.8rem; }
.sendetag h2 {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1.05rem; margin: 0 0 .6rem;
}
.sendetag .wochentag { font-weight: 650; }
.sendetag.heute .wochentag { color: var(--akzent); }
.sendungen {
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--flaeche); overflow: hidden;
}
.sendung {
  display: grid; grid-template-columns: 5.5rem 1fr auto;
  gap: 1rem; align-items: start; padding: .8rem 1rem;
  border-bottom: 1px solid var(--rand);
}
.sendung:last-child { border-bottom: 0; }
.sendung.laeuft { background: var(--flaeche-still); }
.sendung .zeit { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.sendung .zeit strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.sendung .zeile { display: flex; gap: .5rem; align-items: center; margin-bottom: .15rem; }
.sendung .folge { font-size: .8rem; color: var(--schrift-still); }
.sendung .titel { font-weight: 550; }
.sendung .sender { font-size: .8rem; color: var(--schrift-still); white-space: nowrap; }
/* Abrufbarkeit und Verweise unter einer Sendung: kleiner als der Titel und
   auf dem Telefon umbrechend.

   Zwei Gruppen, die nicht ineinanderlaufen dürfen: die Mediathek mit ihrer
   Frist und die dauerhaften Streamingangebote. Innerhalb einer Gruppe stehen
   die Zeilen eng beieinander, zwischen den Gruppen ist mehr Luft — so bleibt
   auch im schmalen Fenster erkennbar, dass „noch bis …" zum Verweis darüber
   gehört und nicht zum nächsten Angebot. */
.sendung .angebot {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .15rem .6rem; font-size: .82rem; margin-top: .25rem;
}
/* Deutlich mehr Luft zwischen den Gruppen als innerhalb: Das ist der
   einzige verlässliche Hinweis, wenn beide umbrechen. */
/* Die Wege zu einer Folge: einer je Zeile. Nebeneinander rutschte bei zwei
   Diensten der zweite Knopf neben die Marken des ersten, und welche Fassung
   zu welchem Weg gehört, war nicht mehr zu erkennen. */
.angebotsliste { display: grid; gap: .5rem; justify-items: start; }
.angebotszeile {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
}

/* Bogen und Box unter dem Titel: eine Zeile, die beim Überfliegen nicht
   mit den Angeboten darunter verschwimmt. */
.sendung .einordnung {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin-top: .15rem; font-size: .85rem;
}
.sendung .einordnung a { color: var(--schrift-still); }
.sendung .einordnung a:hover { color: var(--akzent); }

.sendung .angebot + .angebot { margin-top: .7rem; }
.sendung .angebot a { color: var(--akzent); }
/* Die Frist bricht nicht in sich um — ein Datum über zwei Zeilen liest
   niemand gern. */
.sendung .angebot .frist { white-space: nowrap; }
.sendung .angebot .gruppenname { white-space: nowrap; }

@media (max-width: 40rem) {
  .sendung { grid-template-columns: 4rem 1fr; gap: .7rem; padding: .7rem .8rem; }
  .sendung .sender { grid-column: 2; font-size: .75rem; }
}

/* Wochenplan in der Pflege --------------------------------------------------
   Der Kalender zum Anklicken: eine Woche je Knopf, mit Nummer und Tagen. Er
   liegt waagerecht und scrollt, statt über den halben Bildschirm zu wachsen —
   ein Jahr sind zweiundfünfzig davon. */
.wochenstreifen {
  display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .5rem;
  margin-bottom: 1rem;
}
.wochenstreifen .knopf {
  display: grid; gap: .1rem; justify-items: center; white-space: nowrap;
  padding: .4rem .7rem; line-height: 1.2;
}
.wochenstreifen .knopf .still { font-size: .72rem; }
.wochenstreifen .knopf[aria-current="true"] .still { color: inherit; opacity: .85; }
/* Die laufende Woche bleibt erkennbar, auch wenn eine andere gewählt ist. */
.wochenstreifen .knopf.laufend { border-color: var(--akzent); }

.wochentage { display: grid; gap: .7rem; }
.tageskarte {
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--flaeche); padding: .7rem .9rem;
}
.tageskarte.heute { border-color: var(--akzent); }
.tageskarte h3 {
  display: flex; align-items: center; gap: .5rem;
  font-size: .95rem; margin: 0 0 .5rem;
}
.tagessendungen { display: grid; gap: .4rem; margin-bottom: .5rem; }
.planzeile {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .35rem .5rem; border-radius: var(--radius);
  background: var(--flaeche-still);
}
.planzeile .zeit { font-variant-numeric: tabular-nums; min-width: 3.5rem; }
.planzeile .zeilentitel { flex: 1 1 12rem; }
.planzeile input { width: auto; }
.planzeile.neu { background: transparent; border: 1px dashed var(--rand); }
.planzeile.faellt-aus .zeit { text-decoration: line-through; opacity: .7; }

/* Adressen je Folge: eine Zeile je Folge, das Feld nimmt den Rest. Geändert
   und noch nicht gesichert wird hervorgehoben — nach fünfzig Feldern weiß
   sonst niemand mehr, was schon sicher ist. */
.adresszeile {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .3rem 0; border-bottom: 1px solid var(--rand);
}
.adresszeile:last-child { border-bottom: 0; }
.adresszeile .nummer { min-width: 3.5rem; font-variant-numeric: tabular-nums; }
.adresszeile .zeilentitel { flex: 1 1 14rem; }
.adresszeile input { flex: 2 1 20rem; width: auto; }
.adresszeile input.geaendert { border-color: var(--akzent); background: var(--akzent-flaeche); }

/* Anbieter in der Pflege: eine Kachel je Dienst, drei bis vier nebeneinander.
   Das Raster passt sich der Breite an — auf dem Telefon bleiben zwei. */
.anbieterkacheln {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.anbieterkachel {
  display: grid; gap: .3rem; justify-items: center; text-align: center;
  padding: .8rem .6rem; cursor: pointer;
  background: var(--flaeche); color: var(--schrift);
  border: 1px solid var(--rand); border-radius: var(--radius);
  /* Die Hausfarbe oben als schmaler Streifen — wie auf der öffentlichen
     Seite, damit man denselben Dienst wiedererkennt. */
  border-top: 3px solid var(--anbieterfarbe, var(--rand));
  font: inherit;
}
.anbieterkachel img { max-height: 2.2rem; max-width: 100%; object-fit: contain; }
.anbieterkachel .still { font-size: .75rem; }
.anbieterkachel[aria-expanded="true"] { border-color: var(--akzent); background: var(--akzent-flaeche); }
.anbieterkachel.ruht { opacity: .6; }
@media (max-width: 30rem) {
  .anbieterkacheln { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
}

/* Auswahlseite des Portals --------------------------------------------------
   Eine Kachel je Serie. Sie ist als Ganzes ein Verweis: Wer auf einem Handy
   irgendwo darauf tippt, kommt an — nicht nur auf dem Namen. */
.serienauswahl { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.serienkachel {
  display: grid; gap: .35rem; justify-items: center; text-align: center;
  color: inherit; text-decoration: none;
  padding: 1.4rem 1.1rem;
  transition: border-color .15s, transform .15s;
}
.serienkachel:hover, .serienkachel:focus-visible {
  border-color: var(--akzent); transform: translateY(-2px);
}
.serienkachel .serienlogo { height: 4.5rem; width: auto; max-width: 100%; }
/* Ohne Logodatei trägt der Name die Kachel — dann darf er größer sein. */
.serienkachel .serientitel { font-size: 1.6rem; font-weight: 650; letter-spacing: -.02em; }
.serienkachel .bezeichnung { font-weight: 550; }

@media (prefers-reduced-motion: reduce) {
  .serienkachel { transition: none; }
  .serienkachel:hover, .serienkachel:focus-visible { transform: none; }
}

/* Serienleiste -------------------------------------------------------------
   Die schmale Zeile ganz oben, in der die Serie gewechselt wird.

   Kein Auswahlfeld: Auf dem Handy verlangt eines drei Bewegungen und zeigt
   vorher nicht, was zur Wahl steht. Hier steht alles nebeneinander, ein Tipp
   genügt. Werden es mehr Serien, als in eine Zeile passen, schiebt sich die
   Leiste seitwärts — der Kopf bleibt gleich hoch, und das ist auf einem
   Telefon das Knappste, was es gibt. */
.serienleiste {
  background: var(--flaeche-still);
  border-bottom: 1px solid var(--rand);
  overflow-x: auto;
  /* Der Balken darunter wäre bei zwei Zeilen Text mehr im Weg als hilfreich. */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.serienleiste::-webkit-scrollbar { display: none; }
.serienleiste-innen {
  max-width: 68rem; margin: 0 auto; padding: .3rem 1.25rem;
  display: flex; align-items: center; gap: .25rem; white-space: nowrap;
}
.serienleiste-titel {
  font-size: .78rem; color: var(--schrift-still);
  margin-right: .35rem; flex: 0 0 auto;
}
.serienleiste a {
  flex: 0 0 auto; padding: .25rem .7rem; border-radius: 99px;
  font-size: .85rem; color: var(--schrift-still); text-decoration: none;
}
.serienleiste a:hover { color: var(--schrift); background: var(--flaeche); }
.serienleiste a[aria-current="true"] {
  background: var(--akzent); color: var(--akzent-schrift); font-weight: 550;
}
/* In der Pflege stehen auch abgeschaltete Serien zur Wahl — sie sollen als
   solche zu erkennen sein, ohne dass man sie anklicken muss. */
.serienleiste a.abgeschaltet { font-style: italic; opacity: .75; }

@media (max-width: 40rem) {
  .serienleiste-innen { padding: .3rem .9rem; }
}

/* Statistik ---------------------------------------------------------------- */

.stat { display: grid; gap: 1rem; }
.stat-leiste { justify-content: space-between; align-items: center; }
.stat-zeitraum { gap: .4rem; }
.stat-zeitraum .knopf { padding: .35rem .7rem; font-size: .85rem; }
.stat-zeitraum .knopf[aria-current="true"] {
  background: var(--akzent); color: var(--akzent-schrift); border-color: var(--akzent);
}
.stat-zeitraum input[type="date"], .stat-zeitraum select { width: auto; padding: .35rem .5rem; }

.stat-abschnitt {
  font-size: 1.05rem; margin: 1.4rem 0 0; padding-top: 1rem;
  border-top: 1px solid var(--rand);
}

/* Gerade jetzt: ein Puls, damit auf den ersten Blick klar ist, dass diese
   eine Zahl sich von selbst weiterbewegt. */
.stat-jetzt { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.stat-jetzt-wert { font-weight: 650; }
.stat-punkt {
  width: .6rem; height: .6rem; border-radius: 50%; background: var(--akzent);
  animation: stat-puls 2.4s ease-in-out infinite;
}
@keyframes stat-puls { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .stat-punkt { animation: none; } }

.stat-kacheln { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.stat-kachel { display: grid; gap: .15rem; align-content: start; }
.stat-wert { font-size: 1.7rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; }
.stat-name { font-size: .82rem; color: var(--schrift-still); }
.stat-frage { cursor: help; }
.stat-wandel { font-size: .8rem; font-weight: 600; }
.stat-wandel.gut { color: var(--akzent); }
.stat-wandel.schlecht { color: var(--filler); }
.stat-gleich, .stat-neu { font-size: .8rem; color: var(--schrift-still); }

.stat-kopfzeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem;
}
.stat-kopfzeile h3 { margin: 0; font-size: .98rem; }
.stat-kopfzeile select { width: auto; padding: .3rem .5rem; font-size: .85rem; }
.stat-ausgabe { text-decoration: none; white-space: nowrap; }

.stat-kurve { width: 100%; height: 15rem; display: block; }
.stat-ablesung { margin: .4rem 0 0; min-height: 1.2em; }
.stat-legende { display: flex; align-items: center; gap: .4rem; font-size: .82rem;
  color: var(--schrift-still); }
.stat-marke { display: inline-block; width: 1.3rem; height: 2px; }
.stat-marke.akzent { background: var(--akzent); }
.stat-marke.filler { background: var(--filler); }
.stat-marke.gestrichelt { margin-left: .5rem; }

.stat-stunden { display: flex; align-items: flex-end; gap: 2px; height: 6rem; }
.stat-stunde { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%; text-align: center; }
.stat-stunde small { font-size: .68rem; color: var(--schrift-still); }
.stat-saeule { display: block; background: var(--akzent); border-radius: 2px 2px 0 0;
  opacity: .8; }

.stat-raster { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); align-items: start; }

/* Die Ranglisten: Der Balken liegt HINTER dem Text, nicht daneben. So bleibt
   für die Beschriftung die volle Breite, und die Größenverhältnisse sind
   trotzdem auf einen Blick zu sehen. */
.stat-liste { list-style: none; margin: 0; padding: 0; counter-reset: rang; }
.stat-liste li {
  position: relative; display: flex; align-items: center; gap: .5rem;
  padding: .35rem .5rem; border-radius: 5px; font-size: .88rem;
  overflow: hidden;
}
.stat-balken {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
  background: var(--akzent); opacity: .13; border-radius: 5px;
}
.stat-balken.heiss { background: var(--filler); opacity: .18; }
.stat-bezeichnung {
  position: relative; z-index: 1; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stat-anzahl {
  position: relative; z-index: 1;
  font-variant-numeric: tabular-nums; color: var(--schrift-still);
}

/* Klickkarte über der echten Seite ----------------------------------------- */

.klickkarte-schicht {
  position: absolute; inset: 0; z-index: 40;
  pointer-events: none;   /* Die Seite darunter bleibt bedienbar. */
}
.klickkarte-fleck {
  position: absolute; border-radius: 50%;
  pointer-events: auto;   /* Ausgenommen die Flecken selbst — wegen des Titels. */
  mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) {
  .klickkarte-fleck { mix-blend-mode: screen; }
}
.klickkarte-leiste {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 1rem; z-index: 41;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  max-width: calc(100vw - 2rem);
  padding: .55rem .8rem; border-radius: 999px;
  background: var(--flaeche); border: 1px solid var(--rand);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .18);
  font-size: .84rem;
}
.klickkarte-leiste .knopf { padding: .3rem .7rem; font-size: .8rem; }
.klickkarte-text { color: var(--schrift-still); }

/* Abschnitte ---------------------------------------------------------------
   Die Unterteilung einer Serie, die unterwegs den Namen wechselt. */
.reiter.abschnitte { margin-bottom: .9rem; }
/* Die fortlaufende Nummer neben der des Abschnitts: leise, aber lesbar. Der
   Rechner arbeitet mit ihr, deshalb darf sie nicht ganz verschwinden. */
.nummer-gesamt {
  font-size: .72rem; color: var(--schrift-still);
  font-variant-numeric: tabular-nums; margin-left: -.4rem;
}
@media (max-width: 40rem) {
  .reiter.abschnitte { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .reiter.abschnitte::-webkit-scrollbar { display: none; }
}

/* Suchanfragen aus der Search Console -------------------------------------- */

/* Drei Zahlen je Zeile brauchen eine Tabelle, keine Liste. Der Balken liegt
   wie in den Ranglisten hinter dem Text — er zeigt hier die Impressionen,
   weil die sagen, wie oft die Seite überhaupt angeboten wurde. */
.stat-anfragen { margin-top: .4rem; }
.stat-anfragen td, .stat-anfragen th { padding: .35rem .5rem; }
.stat-anfragen td:first-child { position: relative; overflow: hidden; max-width: 0; }
.stat-anfragen th:not(:first-child), .stat-anfragen td:not(:first-child) {
  text-align: right; white-space: nowrap;
}
.stat-anfragen .stat-balken { border-radius: 3px; }

.stat-verbindung { margin-top: .8rem; gap: .5rem; }
.stat-verbindung .knopf { padding: .3rem .7rem; font-size: .82rem; }

.stat-einrichtung { display: grid; gap: .9rem; }
.stat-schritt { display: flex; gap: .7rem; align-items: flex-start; }
.stat-schritt p { margin: .2rem 0 .4rem; }
.stat-schritt .reihe { margin-top: .4rem; }
.stat-schritt input[type="text"], .stat-schritt input[type="password"] {
  width: auto; min-width: 14rem; flex: 1;
}
.stat-schrittzahl {
  flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--akzent); color: var(--akzent-schrift);
  display: grid; place-items: center; font-size: .8rem; font-weight: 650;
}
.stat-rueckruf {
  display: block; padding: .4rem .6rem; border-radius: 6px;
  background: var(--flaeche-still); border: 1px solid var(--rand);
  font-size: .82rem; word-break: break-all;
}

/* Welche Angebote eine Sprachfassung außerdem zeigt. Eine Spalte voller
   Kästchen würde die Sprachtabelle sprengen, darum eingeklappt: Zu sehen ist
   die Auswahl, aufgeklappt wird nur, wer sie ändert. */
.streamingsprachen summary {
  cursor: pointer; font-size: .82rem; white-space: nowrap;
}
.streamingsprachen label { font-size: .82rem; white-space: nowrap; }
.streamingsprachen[open] { min-width: 14rem; }

/* Stand, Mitlauf und Selbstauskunft ---------------------------------------- */

.stat-stand { gap: .4rem; align-items: center; }
.stat-stand .knopf { padding: .2rem .5rem; font-size: .9rem; line-height: 1; }
.stat-mitlauf {
  display: inline-flex; align-items: center; gap: .3rem; margin: 0;
  font-size: .82rem; color: var(--schrift-still);
}
.stat-mitlauf input { width: auto; margin: 0; }

/* Noch nicht angebrochene Stunden: Die Säule bleibt in voller Höhe stehen,
   aber nur als Andeutung. So ist zu sehen, wie weit der Tag ist, ohne dass
   eine leere Stunde wie ein Einbruch aussieht. */
.stat-stunde.kuenftig .stat-saeule {
  background: repeating-linear-gradient(
    135deg, var(--rand) 0 2px, transparent 2px 5px);
  opacity: .5;
}

.stat-auskunft p { margin: .4rem 0; }
.stat-ampel {
  display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
  margin-right: .45rem; vertical-align: baseline;
}
.stat-ampel.ja { background: var(--akzent); }
.stat-ampel.nein { background: var(--filler); }
.stat-auskunft code {
  padding: .1rem .35rem; border-radius: 4px;
  background: var(--flaeche-still); border: 1px solid var(--rand);
}

/* Wie sehr ein Beitrag interessiert — ein Grad an der Kachel, keine Zahl.
   Drei Stufen, von warm nach heiß; unterhalb der untersten steht nichts. */
.kachel .hitze {
  position: absolute; top: .6rem; right: .6rem; z-index: 2;
  padding: .15rem .5rem; border-radius: 999px;
  font-size: .72rem; font-weight: 650; letter-spacing: .01em;
  background: rgba(255, 255, 255, .92); color: #7a4a00;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.kachel .hitze.gefragt { color: #a13a00; }
.kachel .hitze.heiss { background: #c2410c; color: #fff; }

/* Ein heißer Beitrag kocht — Glut unter der Kachel, Dampf darüber.
   Der Topf steht auf dem Feuer: Nach außen glüht ein Schein, der langsam
   heller und wieder dunkler wird; innen flackert der untere Rand, und sechs
   Schwaden steigen darüber auf und zerfallen.

   Animiert werden nur Deckkraft, Schatten und Verschiebung — nichts, was den
   Browser zwingt, die Seite neu zu rechnen. Darum läuft das auch auf einem
   älteren Telefon ruhig durch. */
.kachel.kocht {
  border-color: rgba(194, 65, 12, .55);
  animation: kachelglut 3.4s ease-in-out infinite;
}
@keyframes kachelglut {
  0%, 100% { box-shadow: 0 0 10px -3px rgba(194, 65, 12, .55); }
  50%      { box-shadow: 0 0 22px -1px rgba(234, 88, 12, .85); }
}
/* Liegt über dem Bild und unter der Schrift: Der Titel bleibt lesbar, was
   auch für eine kochende Kachel noch die Hauptsache ist. */
.kachel .kochen {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden; pointer-events: none; border-radius: inherit;
}
.kachel .kochen::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 48%;
  background: linear-gradient(to top, rgba(234, 88, 12, .68),
                              rgba(249, 115, 22, .26) 45%, transparent);
  animation: kachelfeuer 1.9s ease-in-out infinite;
}
@keyframes kachelfeuer {
  0%, 100% { opacity: .6; }
  40%      { opacity: 1; }
  70%      { opacity: .5; }
}
/* Die Schwaden. Sie starten über der Glut, steigen schräg auf und sind weg,
   bevor sie den oberen Rand erreichen — Dampf, der an der Kante abgeschnitten
   wird, sieht aus wie ein Zeichenfehler.

   Sechs Stück, jede mit eigener Dauer, eigenem Versatz und eigener Richtung:
   Liefen sie gleich schnell, wäre es ein Takt und kein Kochen. Wohin und wie
   schnell, steht als Variable an der einzelnen Schwade, die Bewegung selbst
   nur einmal weiter unten. */
.kachel .kochen i {
  position: absolute; bottom: 14%; width: 2.6rem; height: 2.6rem;
  border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255, 252, 248, 1), rgba(255, 245, 235, 0) 70%);
  filter: blur(7px);
  /* Dampf verwischt, was hinter ihm liegt. Das macht ihn auch auf einem
     hellen Aufmacher sichtbar, auf dem weißer Nebel sonst verschwindet —
     und wo der Browser es nicht kann, bleibt es beim weißen Schwaden. */
  backdrop-filter: blur(3px) brightness(1.12);
  animation: kacheldampf var(--dauer, 3s) ease-in infinite;
}
.kachel .kochen i:nth-of-type(1) { left: 16%; --dauer: 3.1s; --drift: -.9rem; animation-delay: .3s; }
.kachel .kochen i:nth-of-type(2) { left: 33%; --dauer: 2.6s; --drift: .6rem;  animation-delay: 1s; }
.kachel .kochen i:nth-of-type(3) { left: 50%; --dauer: 3.4s; --drift: -.5rem; animation-delay: 1.7s; }
.kachel .kochen i:nth-of-type(4) { left: 67%; --dauer: 2.8s; --drift: 1rem;   animation-delay: 2.3s; }
.kachel .kochen i:nth-of-type(5) { left: 82%; --dauer: 3.2s; --drift: -.7rem; animation-delay: 2.9s; }
@keyframes kacheldampf {
  0%   { transform: translate3d(0, 0, 0) scale(.5); opacity: 0; }
  15%  { opacity: .95; }
  55%  { opacity: .6; }
  100% { transform: translate3d(var(--drift, -.9rem), -7.5rem, 0) scale(1.9); opacity: 0; }
}
.kachel.gross .kochen i { width: 3.2rem; height: 3.2rem; }

/* Das Brodeln: Direkt über der Glut arbeitet es. Keine gezeichneten Blasen
   mit Rand — das sähe nach Seifenschaum aus —, sondern Stellen, an denen das
   Bild dahinter unscharf wird, jede ein Stück anders stark. Dazu ein leichtes
   Wandern nach links und rechts und sehr wenig Deckkraft: Man sieht es, wenn
   man hinschaut, und übersieht es beim Lesen der Überschrift.

   Die Unschärfe ist der ganze Effekt; das bisschen Weiß darin gibt ihm nur
   eine Kante. Wo ein Browser backdrop-filter nicht kann, bleibt ein kaum
   sichtbarer heller Fleck — und das ist in Ordnung. */
.kachel .kochen b {
  position: absolute; bottom: 7%; width: var(--weite, .8rem); height: var(--weite, .8rem);
  border-radius: 50%; opacity: 0;
  background: rgba(255, 250, 245, .07);
  backdrop-filter: blur(var(--schaerfe, 2px));
  animation: kachelblase var(--dauer, 2s) ease-in-out infinite;
}
.kachel .kochen b:nth-of-type(1) { left: 11%; --dauer: 2.3s; --weite: .9rem;  --schaerfe: 3px;   --hoch: 1.7rem; animation-delay: 0s; }
.kachel .kochen b:nth-of-type(2) { left: 20%; --dauer: 1.7s; --weite: .55rem; --schaerfe: 1.5px; --hoch: 1.2rem; animation-delay: .6s; }
.kachel .kochen b:nth-of-type(3) { left: 29%; --dauer: 2.6s; --weite: 1.1rem; --schaerfe: 4px;   --hoch: 2rem;   animation-delay: 1.1s; }
.kachel .kochen b:nth-of-type(4) { left: 38%; --dauer: 1.9s; --weite: .7rem;  --schaerfe: 2px;   --hoch: 1.5rem; animation-delay: .25s; }
.kachel .kochen b:nth-of-type(5) { left: 48%; --dauer: 2.2s; --weite: .85rem; --schaerfe: 3.5px; --hoch: 1.9rem; animation-delay: 1.5s; }
.kachel .kochen b:nth-of-type(6) { left: 58%; --dauer: 1.6s; --weite: .5rem;  --schaerfe: 1px;   --hoch: 1.1rem; animation-delay: .9s; }
.kachel .kochen b:nth-of-type(7) { left: 67%; --dauer: 2.4s; --weite: 1rem;   --schaerfe: 3px;   --hoch: 1.8rem; animation-delay: .4s; }
.kachel .kochen b:nth-of-type(8) { left: 77%; --dauer: 2s;   --weite: .65rem; --schaerfe: 2.5px; --hoch: 1.4rem; animation-delay: 1.8s; }
.kachel .kochen b:nth-of-type(9) { left: 87%; --dauer: 2.8s; --weite: .8rem;  --schaerfe: 2px;   --hoch: 2.1rem; animation-delay: 1.2s; }
/* Aufsteigen und dabei pendeln: zweimal hin, zweimal her, nie weit. Oben
   löst sich die Stelle auf, statt zu platzen — dort übernimmt der Dampf. */
@keyframes kachelblase {
  0%   { transform: translate3d(0, 0, 0) scale(.5); opacity: 0; }
  20%  { transform: translate3d(.15rem, calc(var(--hoch, 1.6rem) * -.2), 0) scale(.8);
         opacity: .75; }
  45%  { transform: translate3d(-.2rem, calc(var(--hoch, 1.6rem) * -.45), 0) scale(1); }
  70%  { transform: translate3d(.18rem, calc(var(--hoch, 1.6rem) * -.7), 0) scale(1.05);
         opacity: .6; }
  100% { transform: translate3d(-.1rem, calc(var(--hoch, 1.6rem) * -1), 0) scale(1.25);
         opacity: 0; }
}
.kachel.gross .kochen b { bottom: 9%; }
/* Ohne Bewegung bleibt die Glut — sie trägt die Aussage, der Dampf ist
   Schmuck. */
.kachel .kochen.ruhig i, .kachel .kochen.ruhig b { display: none; }
.kachel .kochen.ruhig::before { animation: none; opacity: .7; }
@media (prefers-reduced-motion: reduce) {
  .kachel.kocht { animation: none; box-shadow: 0 0 16px -3px rgba(194, 65, 12, .7); }
  .kachel .kochen i, .kachel .kochen b { display: none; }
  .kachel .kochen::before { animation: none; opacity: .7; }
}
.interessezeile { margin-top: 1.6rem; gap: .6rem; flex-wrap: wrap; }
.knopf.interesse[aria-pressed="true"] { border-color: var(--akzent); color: var(--akzent); }

/* Quiz ---------------------------------------------------------------------- */

.quiz-karte { display: flex; flex-direction: column; gap: .9rem; margin-bottom: 1rem; }
.quiz-gruppenname { font-weight: 600; font-size: .9rem; color: var(--schrift-still); }
.quiz-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.quiz-chip {
  font: inherit; cursor: pointer; padding: .45rem .9rem; border-radius: 999px;
  background: var(--flaeche-still); color: var(--schrift); border: 1px solid var(--rand);
}
.quiz-chip[aria-pressed="true"] {
  background: var(--akzent-flaeche); border-color: var(--akzent); color: var(--akzent); font-weight: 600;
}
.quiz-chip:disabled { opacity: .45; cursor: not-allowed; }
.quiz-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.quiz-rest { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.quiz-zeit { height: .45rem; border-radius: 999px; background: var(--flaeche-still); overflow: hidden; }
.quiz-zeit > div { height: 100%; width: 100%; background: var(--akzent); transition: width .25s linear; }
.quiz-zeit.knapp > div { background: var(--bezahlt); }
.quiz-tafel { display: flex; gap: .6rem; flex-wrap: wrap; }
.quiz-spieler {
  flex: 1 1 8rem; display: flex; justify-content: space-between; gap: .6rem;
  padding: .4rem .7rem; border-radius: var(--radius); background: var(--flaeche-still);
}
.quiz-spieler.ich { outline: 2px solid var(--akzent); }
.quiz-spieler.weg { opacity: .55; }
.quiz-spielername { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quiz-punkte { font-variant-numeric: tabular-nums; font-weight: 600; }
.quiz-frage { margin: 0; font-size: 1.25rem; line-height: 1.35; }
.quiz-panel { margin: 0; text-align: center; }
.quiz-panel img {
  max-width: 100%; max-height: 60vh; border-radius: var(--radius); border: 1px solid var(--rand);
  background: #fff;
}
.quiz-antworten { display: grid; gap: .6rem; }
.quiz-antwort {
  font: inherit; text-align: left; padding: .85rem 1rem; min-height: 3rem; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  background: var(--flaeche); color: var(--schrift); border: 2px solid var(--rand);
  border-radius: var(--radius);
}
button.quiz-antwort:hover:not(:disabled) { border-color: var(--akzent); }
button.quiz-antwort:disabled { opacity: .6; cursor: not-allowed; }
div.quiz-antwort { cursor: default; }
.quiz-antwort.richtig { background: var(--frei-flaeche); border-color: var(--frei); color: var(--frei); font-weight: 600; }
.quiz-antwort.falsch { background: var(--bezahlt-flaeche); border-color: var(--bezahlt); color: var(--bezahlt); }
.quiz-wer { font-size: .8rem; font-weight: 600; }
.quiz-schaetzen { display: grid; gap: .7rem; }
.quiz-schaetzen input[type="range"] { width: 100%; accent-color: var(--akzent); }
.quiz-schaetzen input[type="number"] { width: 9rem; }
.quiz-spanne { display: flex; justify-content: space-between; font-size: .85rem; }
.quiz-urteil { padding: .7rem 1rem; border-radius: var(--radius); background: var(--flaeche-still); }
.quiz-urteil.richtig { background: var(--frei-flaeche); color: var(--frei); }
.quiz-ergebnisse { margin: 0; padding-left: 1.2rem; }
.quiz-erklaerung { margin: 0; color: var(--schrift-still); }
.quiz-warten { margin: 0; color: var(--schrift-still); }
.quiz-code {
  font-size: 2.4rem; font-weight: 700; letter-spacing: .25em; text-align: center;
  font-variant-numeric: tabular-nums; padding: .6rem 0 .6rem .25em;
  background: var(--akzent-flaeche); color: var(--akzent); border-radius: var(--radius);
  user-select: all;
}
.quiz-code-eingabe { text-transform: uppercase; letter-spacing: .15em; max-width: 12rem; }
.quiz-endstand { font-size: 1.4rem; font-weight: 700; margin: 0; }
.quiz-rueckblick { margin: 0; padding-left: 1.3rem; display: grid; gap: .6rem; }
@media (prefers-reduced-motion: reduce) { .quiz-zeit > div { transition: none; } }
.quiz-standnummer { max-width: 9rem; }
.quiz-jokerleiste { display: grid; gap: .4rem; }
.quiz-joker-info { font-variant-numeric: tabular-nums; opacity: .8; }