/* 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;
  /* 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;
  --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;
    --warnung: #e0b657;
    --warnung-flaeche: #332a12;
    --filler: #e09277;
    --filler-flaeche: #33221c;
    --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; }
nav.reiter button {
  border: 0; background: transparent; color: var(--schrift-still);
  padding: .4rem .7rem; border-radius: var(--radius); cursor: pointer;
  font: inherit; font-size: .93rem;
}
nav.reiter button:hover { background: var(--flaeche-still); color: var(--schrift); }
nav.reiter button[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); }
.knopf.gefahr { background: transparent; color: var(--filler); border: 1px solid currentColor; }
.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%;
  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; }
.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); }
.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; }
.suchleiste input { flex: 1; min-width: 12rem; }

.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; }
td input { min-width: 5rem; }

.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; }
.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%; }
}

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

.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; }
}

/* 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 { flex-shrink: 0; }

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

.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%);
}
.kachel .text { position: absolute; inset: auto 0 0 0; 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; }

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

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