/* Selbst gehostete Schriften — kein Kontakt zu Google.
   Bewusst in dieselbe Datei wie das übrige CSS: Zwei blockierende
   Stylesheets verzögern das erste Rendern nacheinander. */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/archivo-black-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/archivo-black-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  /* Inter ist eine variable Schrift: Eine einzige Datei traegt die ganze
     Gewichtsachse von 100 bis 900. Genau das sagt `font-weight: 100 900`.
     Vorher standen hier drei Bloecke mit den festen Werten 400, 500 und 700 —
     dieselbe Datei, nur dreimal angemeldet. Fuer diese drei Gewichte kam
     dabei das Richtige heraus, fuer jedes andere nicht: Gewicht 600 (die
     Mail-Zeile, der Menueknopf) fiel auf 700 zurueck und war damit zu fett.
     Mit dem Bereich trifft der Browser jeden Wert genau. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =========================================================
   SchauSchau – schauschau.show
   Farbwelt direkt aus dem Logo (Bernstein/Glühbirne) und
   der Himmel-Illustration (Nachtblau) abgeleitet.
   ========================================================= */

:root {
  /* Nacht */
  --nacht-900: #080c14;
  --nacht-800: #0d1320;
  --nacht-700: #131c2d;
  --nacht-600: #1b283e;
  --nacht-500: #26364f;

  /* Leuchtreklame */
  --gold:      #f5b014;
  --gold-hell: #ffd863;
  --gold-glut: #ff8a1f;
  --gold-tief: #8a4a0c;

  /* Himmel */
  --himmel:      #2d4161;
  --himmel-hell: #6d8fbd;

  /* Text */
  --text:       #f4efe4;
  --text-leise: #a3b0c4;
  --text-still: #7b8aa1;

  --linie: color-mix(in srgb, var(--himmel-hell) 22%, transparent);

  --display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1180px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 18px;
  --radius-lg: 28px;

  --schatten: 0 18px 50px -20px rgb(0 0 0 / 0.75);
  --glow: 0 0 34px -6px color-mix(in srgb, var(--gold) 55%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--nacht-800);
  color: var(--text);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Sternenstaub über der ganzen Seite, sehr dezent */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1.5px 1.5px at 18% 22%, rgb(255 255 255 / .25), transparent 60%),
    radial-gradient(1.5px 1.5px at 72% 12%, rgb(255 255 255 / .18), transparent 60%),
    radial-gradient(1.5px 1.5px at 41% 68%, rgb(255 255 255 / .14), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 54%, rgb(255 255 255 / .2), transparent 60%),
    radial-gradient(1.5px 1.5px at 8% 78%, rgb(255 255 255 / .16), transparent 60%);
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--gold-hell); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--gold); }

:focus-visible {
  outline: 3px solid var(--gold-hell);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 1.3rem + 4.4vw, 4.4rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); }
p  { margin: 0 0 1.1em; text-wrap: pretty; }

.wrap {
  width: min(100% - (2 * var(--gutter)), var(--wrap));
  margin-inline: auto;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--gold); color: var(--nacht-900);
  padding: .7rem 1.2rem; border-radius: 0 0 12px 0; font-weight: 700; z-index: 200;
}
.skip:focus { left: 0; top: 0; }

main { position: relative; z-index: 1; }

/* ---------- Glühbirnen-Leiste, das Hausmotiv ---------- */
.bulbs {
  height: 14px;
  background-image: radial-gradient(circle, var(--gold-hell) 0 22%, color-mix(in srgb, var(--gold) 45%, transparent) 38%, transparent 62%);
  background-size: 34px 14px;
  background-repeat: repeat-x;
  background-position: center;
  opacity: .85;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 60%, transparent));
}
@media (prefers-reduced-motion: no-preference) {
  .bulbs { animation: flimmer 3.4s ease-in-out infinite; }
  @keyframes flimmer { 0%, 100% { opacity: .85 } 47% { opacity: .55 } 52% { opacity: .95 } }
}

/* ---------- Kopf ---------- */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--nacht-900) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--linie);
}
.site-head__in {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 74px;
  flex-wrap: wrap;
}
.site-head__logo { flex: 0 0 auto; display: block; }
.site-head__marke { display: flex; align-items: center; gap: clamp(.7rem, 2vw, 1.4rem); margin-right: auto; }
.site-head__logo img {
  width: clamp(150px, 20vw, 210px);
  filter: drop-shadow(0 3px 14px color-mix(in srgb, var(--gold-glut) 35%, transparent));
  transition: filter .3s ease, transform .3s ease;
}
.site-head__logo:hover img { filter: drop-shadow(0 3px 22px color-mix(in srgb, var(--gold) 55%, transparent)); transform: translateY(-1px); }

.nav ul { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: .45rem .1rem;
  color: var(--text); text-decoration: none;
  font-weight: 500; letter-spacing: .01em;
  position: relative;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--gold-hell); }

.burger { display: none; }

@media (max-width: 760px) {
  .site-head__in { min-height: 62px; }
  .burger {
    display: inline-flex; align-items: center; gap: .55rem;
    background: none; border: 1px solid var(--linie); border-radius: 999px;
    color: var(--text); font: inherit; font-weight: 600; font-size: .9rem;
    padding: .45rem .9rem; cursor: pointer;
  }
  .burger__box { width: 16px; height: 10px; position: relative; display: block; }
  .burger__box, .burger__box span, .burger__box::before, .burger__box::after { }
  .burger__box span, .burger__box::before, .burger__box::after {
    content: ''; position: absolute; left: 0; right: 0; height: 2px;
    background: var(--gold); border-radius: 2px; transition: transform .25s ease, opacity .2s ease;
  }
  .burger__box::before { top: 0; }
  .burger__box span { top: 4px; }
  .burger__box::after { bottom: 0; }
  .burger[aria-expanded="true"] .burger__box::before { transform: translateY(4px) rotate(45deg); }
  .burger[aria-expanded="true"] .burger__box span { opacity: 0; }
  .burger[aria-expanded="true"] .burger__box::after { transform: translateY(-4px) rotate(-45deg); }

  .nav { flex-basis: 100%; display: none; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding-bottom: .8rem; }
  .nav li { border-top: 1px solid var(--linie); }
  .nav a { padding: .85rem .2rem; }
  .nav a::after { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.6rem;
  border: 0; border-radius: 999px;
  /* Grundfarben, damit ein .btn ohne Variante nicht auf die Browsergestaltung
     zurückfällt — ein <button> ohne Hintergrund wird sonst hellgrau mit
     blauer Schrift und sticht am Ende ausgerechnet den wichtigen Knopf aus.
     Alle Varianten überschreiben beides. */
  background: color-mix(in srgb, var(--nacht-600) 70%, transparent);
  color: var(--text);
  font: inherit; font-weight: 700; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease;
}
.btn--gold {
  background: linear-gradient(165deg, var(--gold-hell), var(--gold) 48%, var(--gold-glut));
  color: #2a1403;
  box-shadow: 0 10px 28px -12px var(--gold-glut), inset 0 1px 0 rgb(255 255 255 / .45);
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px var(--gold-glut), inset 0 1px 0 rgb(255 255 255 / .55); color: #2a1403; }
.btn--geist {
  background: color-mix(in srgb, var(--nacht-600) 70%, transparent);
  color: var(--text); border: 1px solid var(--linie);
}
.btn--geist:hover { border-color: var(--gold); color: var(--gold-hell); transform: translateY(-2px); }
.btn svg { width: 1.15em; height: 1.15em; fill: currentColor; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 9vw, 7.5rem) clamp(3rem, 7vw, 6rem);
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center 35%;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 8%, transparent 20%, color-mix(in srgb, var(--nacht-900) 72%, transparent) 72%),
    linear-gradient(to bottom, color-mix(in srgb, var(--nacht-900) 55%, transparent) 0%, color-mix(in srgb, var(--nacht-800) 92%, transparent) 78%, var(--nacht-800) 100%);
}
.hero__in { position: relative; text-align: center; }
.hero__logo {
  width: min(88%, 640px); margin: 0 auto clamp(1.2rem, 3vw, 2rem);
  filter: drop-shadow(0 10px 40px color-mix(in srgb, var(--gold-glut) 45%, transparent));
}
.hero__claim {
  font-family: var(--display);
  font-size: clamp(1.25rem, .9rem + 1.7vw, 2.15rem);
  line-height: 1.15;
  margin: 0 auto .8rem;
  max-width: 18ch;
  color: var(--text);
  text-shadow: 0 2px 20px rgb(0 0 0 / .6);
}
.hero__sub {
  max-width: 54ch; margin: 0 auto clamp(1.6rem, 4vw, 2.4rem);
  color: var(--text-leise); font-size: clamp(1rem, .95rem + .3vw, 1.2rem);
  text-shadow: 0 1px 12px rgb(0 0 0 / .7);
}
.hero__actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Sektionen ---------- */
.sektion { padding-block: clamp(3rem, 7vw, 6rem); position: relative; }
.sektion--dunkel { background: var(--nacht-900); }
/* Sektionen, die direkt unter einem Seitenkopf mit Fließtext stehen */
.sektion--anschluss { padding-block-start: clamp(1.8rem, 4vw, 2.8rem); }
.sektion__kopf { max-width: 60ch; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.sektion__kopf--mitte { margin-inline: auto; text-align: center; }
.sektion__kicker {
  display: inline-block;
  font-family: var(--display); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .9rem;
}
.sektion__kopf p { color: var(--text-leise); margin-bottom: 0; }

/* ---------- Umfrage: Wie sollen wir Euch nennen? ---------- */
.umfrage { padding-block: clamp(2rem, 5vw, 3rem); }
.umfrage__karte {
  max-width: 720px; margin-inline: auto; text-align: center;
  background: linear-gradient(150deg, var(--nacht-700), var(--nacht-800) 65%);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--linie));
  border-radius: var(--radius-lg);
  box-shadow: var(--schatten), var(--glow);
  padding: clamp(1.6rem, 4vw, 2.6rem);
}
.umfrage__kicker {
  display: inline-block;
  font-family: var(--display); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .7rem;
}
.umfrage__text { color: var(--text-leise); max-width: 52ch; margin-inline: auto; }

.umfrage__form { display: grid; gap: 1.1rem; margin-top: 1.6rem; text-align: left; }
.umfrage__form[hidden] { display: none; }
.umfrage__freitext { max-width: 420px; margin-inline: auto; width: 100%; }
.umfrage__form > .btn { justify-self: center; }
.umfrage__dank { color: var(--text-leise); margin-top: 1.4rem; margin-bottom: 0; }

/* ---------- Aktuelle Folge, groß ---------- */
.neueste {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: center;
  background: linear-gradient(150deg, var(--nacht-700), var(--nacht-800) 65%);
  border: 1px solid var(--linie);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3.5vw, 2.6rem);
  box-shadow: var(--schatten);
}
@media (max-width: 720px) { .neueste { grid-template-columns: 1fr; text-align: center; } }
.neueste__cover {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--linie);
  box-shadow: 0 20px 45px -22px #000;
}
.neueste__meta { color: var(--gold); font-weight: 600; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .6rem; }
.neueste h3 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem); margin-bottom: .6rem; }
.neueste p { color: var(--text-leise); }
.neueste__actions { display: flex; gap: .8rem; flex-wrap: wrap; }
@media (max-width: 720px) { .neueste__actions { justify-content: center; } }

/* ---------- Folgenliste ---------- */
.folgen { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.folge {
  display: grid; gap: clamp(.9rem, 2.5vw, 1.6rem);
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  padding: clamp(1.1rem, 2.4vw, 1.5rem) clamp(.9rem, 2vw, 1.3rem);
  background: var(--nacht-700);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.folge:hover { border-color: color-mix(in srgb, var(--gold) 55%, transparent); transform: translateY(-2px); background: var(--nacht-600); }
.folge__cover { width: 92px; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.folge__meta { color: var(--text-still); font-size: .85rem; letter-spacing: .04em; margin-bottom: .1rem; }
.folge__meta b { color: var(--gold); font-weight: 700; }
.folge h3 { margin: 1rem 0 .5rem; font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); }
.folge h3 a { color: var(--text); text-decoration: none; }
.folge h3 a:hover { color: var(--gold-hell); }
.folge p { color: var(--text-leise); font-size: .95rem; margin: 0; }
@media (max-width: 620px) {
  /* Knopf bleibt in der Reihe, sonst entsteht eine halbleere Zeile darunter */
  .folge { grid-template-columns: 60px minmax(0, 1fr) auto; gap: .8rem; }
  .folge__cover { width: 60px; }
  .folge__play { --size: 44px; }
  .folge h3 { font-size: 1.02rem; }
  .folge__anriss { display: none; }
}

/* Abspiel-Knopf */
.playbtn {
  --size: 54px;
  width: var(--size); height: var(--size);
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: linear-gradient(165deg, var(--gold-hell), var(--gold) 50%, var(--gold-glut));
  color: #2a1403;
  box-shadow: 0 8px 22px -10px var(--gold-glut), inset 0 1px 0 rgb(255 255 255 / .5);
  transition: transform .2s ease, box-shadow .25s ease;
  flex: 0 0 auto;
}
.playbtn:hover { transform: scale(1.07); box-shadow: 0 12px 28px -10px var(--gold-glut), inset 0 1px 0 rgb(255 255 255 / .6); }
.playbtn svg { width: 55%; height: 55%; fill: currentColor; }
.playbtn--lg { --size: 60px; }

/* Icon-Wechsel gilt für jedes Abspielelement: runder Knopf, breiter Button, Playerleiste */
[data-audio] .i-pause,
#pl-play .i-pause,
[data-audio].is-playing .i-play,
#pl-play.is-playing .i-play { display: none; }
[data-audio].is-playing .i-pause,
#pl-play.is-playing .i-pause { display: block; }

/* ---------- Personen ---------- */
.leute { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.person {
  background: linear-gradient(170deg, var(--nacht-700), var(--nacht-800));
  border: 1px solid var(--linie);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .3s ease, transform .3s ease;
}
.person:hover { border-color: color-mix(in srgb, var(--gold) 45%, transparent); transform: translateY(-3px); }
.person__bild { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--nacht-600); }
/* --fokus bestimmt, welcher Teil des Hochformats im Ausschnitt landet. */
.person__bild img { width: 100%; height: 100%; object-fit: cover; object-position: center var(--fokus, 20%); filter: saturate(.92) contrast(1.05); }
.person__bild--ingo { --fokus: 22%; }
.person__bild--lars { --fokus: 22%; }
.person__bild::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 35%, color-mix(in srgb, var(--nacht-800) 92%, transparent) 100%),
              linear-gradient(115deg, color-mix(in srgb, var(--gold-glut) 16%, transparent), transparent 55%);
}
.person__rolle {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 1;
  font-family: var(--display); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--nacht-900); background: var(--gold);
  padding: .35rem .8rem; border-radius: 999px;
}
.person__text { padding: clamp(1.2rem, 3vw, 1.8rem); display: flex; flex-direction: column; flex: 1; }
.person__text h3 { margin-bottom: .5rem; }
.person__text p { color: var(--text-leise); }
.person__text .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Formular ---------- */
.form { display: grid; gap: 1.1rem; max-width: 680px; }
.feld { display: grid; gap: .45rem; }
.feld label { font-weight: 600; font-size: .95rem; }
.feld .hinweis { color: var(--text-still); font-size: .85rem; }
.feld input, .feld textarea, .feld select {
  width: 100%;
  font: inherit; color: var(--text);
  background: var(--nacht-700);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: .8rem 1rem;
  transition: border-color .2s ease, background .2s ease;
}
.feld textarea { min-height: 170px; resize: vertical; }
.feld input:focus, .feld textarea:focus, .feld select:focus { border-color: var(--gold); background: var(--nacht-600); }
.feld input::placeholder, .feld textarea::placeholder { color: var(--text-still); }
.feld--fehler input, .feld--fehler textarea, .feld--fehler select { border-color: #ff6b6b; }
.fehlertext { color: #ff9c9c; font-size: .88rem; }

/* Empfängerauswahl als Kacheln */
.empfaenger { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.empfaenger input { position: absolute; opacity: 0; pointer-events: none; }
.empfaenger label {
  display: block; cursor: pointer; text-align: center;
  padding: .9rem .8rem;
  background: var(--nacht-700); border: 1px solid var(--linie); border-radius: 14px;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.empfaenger label:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.empfaenger input:checked + label {
  border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--nacht-700));
  box-shadow: inset 0 0 0 1px var(--gold);
}
.empfaenger input:focus-visible + label { outline: 3px solid var(--gold-hell); outline-offset: 3px; }

.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.meldung { border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-bottom: 1.6rem; border: 1px solid; }
.meldung--gut { background: color-mix(in srgb, #2fbf71 14%, var(--nacht-700)); border-color: #2fbf71; }
.meldung--schlecht { background: color-mix(in srgb, #ff6b6b 12%, var(--nacht-700)); border-color: #ff6b6b; }
.meldung p:last-child { margin-bottom: 0; }

/* ---------- Fließtext (Rechtstexte, Folgentext) ---------- */
.prosa { max-width: 72ch; }
.prosa h2 { margin-top: 2.2em; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); }
.prosa h3 { margin-top: 1.8em; }
/* Der große Vorabstand trennt Abschnitte voneinander — am Anfang des Textes
   steht aber schon der Seitenkopf darüber. */
.prosa > :first-child { margin-top: 0; }
.prosa ul, .prosa ol { padding-left: 1.3em; margin-bottom: 1.2em; }
.prosa li { margin-bottom: .45em; }
.prosa a { color: var(--gold-hell); }
.prosa--leise { color: var(--text-leise); }
.prosa--leise h2, .prosa--leise h3 { color: var(--text); }

/* ---------- Plattform-Links ---------- */
.plattformen { display: flex; gap: .7rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.plattformen a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.15rem; border-radius: 999px;
  background: var(--nacht-700); border: 1px solid var(--linie);
  color: var(--text); text-decoration: none; font-weight: 600; font-size: .92rem;
  transition: border-color .2s ease, transform .2s ease, color .2s ease;
}
.plattformen a:hover { border-color: var(--gold); color: var(--gold-hell); transform: translateY(-2px); }

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem);
  background: linear-gradient(to bottom, var(--nacht-900), var(--nacht-800));
  border-bottom: 1px solid var(--linie);
}
.seitenkopf p { color: var(--text-leise); max-width: 58ch; margin-bottom: 0; }
.zurueck { display: inline-flex; align-items: center; gap: .4rem; color: var(--text-leise); text-decoration: none; font-size: .92rem; margin-bottom: 1rem; }
.zurueck:hover { color: var(--gold-hell); }

/* ---------- Fuß ---------- */
.site-foot { background: var(--nacht-900); border-top: 1px solid var(--linie); padding-top: clamp(2.5rem, 6vw, 4rem); position: relative; z-index: 1; }
.site-foot__in { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); padding-bottom: 2.5rem; }
@media (max-width: 720px) { .site-foot__in { grid-template-columns: 1fr 1fr; } .site-foot__brand { grid-column: 1 / -1; } }
.site-foot__brand img { width: 170px; margin-bottom: 1rem; }
.site-foot__brand p { color: var(--text-leise); font-size: .95rem; max-width: 34ch; }
.site-foot__nav h2 { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: .9rem; }
.site-foot__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-foot__nav a { color: var(--text-leise); text-decoration: none; font-size: .95rem; }
.site-foot__nav a:hover { color: var(--gold-hell); }
.site-foot__legal {
  border-top: 1px solid var(--linie); padding-block: 1.3rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  color: var(--text-still); font-size: .85rem;
}
.site-foot__legal p { margin: 0; }
.site-foot__note { color: var(--text-still); }

/* ---------- Abo-Kacheln (Startseite) und Abo-Leiste (unten, klebt) ----------
   Markenfarben stehen nur hier; die Symbole selbst kommen aus dem Sprite
   (partials/abo-symbole.svg.php) und färben sich über currentColor. */
.abo--apple    { --marke: #d56dfb; }
.abo--spotify  { --marke: #1ed760; }
.abo--amazon   { --marke: #25d1da; }
.abo--deezer   { --marke: #a238ff; }
.abo--podcastde{ --marke: var(--gold); }
.abo--rss      { --marke: #ff8a1f; }
.abo--youtube  { --marke: #ff3b3b; }

.abo-symbol { width: 1em; height: 1em; fill: currentColor; display: block; }
.abo-kamera {
  position: absolute; right: -.18em; bottom: -.12em;
  width: .5em; height: .5em; padding: .07em;
  background: var(--nacht-700); border-radius: 50%;
  color: var(--text); fill: currentColor;
  box-sizing: content-box;
}

.abo-kacheln {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(.7rem, 2vw, 1.1rem);
  /* Neun Kacheln: dreimal drei geht auf, vier oder zwei pro Reihe lassen eine allein. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 720px; margin-inline: auto;
}
@media (max-width: 520px) {
  .abo-kachel { padding: 1.1rem .5rem .9rem; }
  .abo-kachel__zeichen { font-size: 2.6rem; margin-bottom: .5rem; }
  .abo-kachel__name { font-size: .88rem; }
  .abo-kachel__tag { font-size: .68rem; letter-spacing: .05em; }
}
.abo-kachel {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  height: 100%; padding: 1.5rem 1rem 1.2rem; text-align: center;
  background: var(--nacht-700); border: 1px solid var(--linie); border-radius: var(--radius);
  color: var(--text); text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .25s ease;
}
.abo-kachel:hover, .abo-kachel:focus-visible {
  border-color: var(--marke); transform: translateY(-3px);
  box-shadow: 0 14px 30px -18px var(--marke);
}
.abo-kachel__zeichen {
  position: relative; font-size: 3.4rem; line-height: 1; color: var(--marke);
  margin-bottom: .7rem;
}
.abo-kachel__name { font-weight: 700; font-size: 1.02rem; }
.abo-kachel__tag { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-still); }

.abo-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.abo-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: color-mix(in srgb, var(--nacht-900) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}
.abo-leiste__in { display: flex; align-items: center; justify-content: center; gap: clamp(.8rem, 2.5vw, 1.6rem); min-height: 54px; }
.abo-leiste__label { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.abo-leiste ul { display: flex; gap: clamp(.15rem, 1.2vw, .6rem); list-style: none; margin: 0; padding: 0; }
.abo-leiste__knopf {
  position: relative; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 1.45rem; color: var(--text-leise); text-decoration: none;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.abo-leiste__knopf .abo-symbol { position: relative; }
.abo-leiste__knopf:hover, .abo-leiste__knopf:focus-visible { color: var(--marke); background: color-mix(in srgb, var(--marke) 14%, transparent); transform: translateY(-2px); }
.abo-leiste__knopf .abo-kamera { right: 6px; bottom: 6px; background: var(--nacht-900); }
body.hat-abo { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
@media (max-width: 520px) {
  .abo-leiste__label { display: none; }
  .abo-leiste ul { gap: 0; }
  .abo-leiste__knopf { width: 38px; }
}
/* Läuft der Player, gehört ihm der untere Rand. */
body.hat-player .abo-leiste { display: none; }

/* ---------- Player ---------- */
.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: color-mix(in srgb, var(--nacht-900) 94%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  border-top: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  box-shadow: 0 -16px 40px -22px #000;
  padding-block: .7rem;
  padding-bottom: max(.7rem, env(safe-area-inset-bottom));
}
.player[hidden] { display: none; }
body.hat-player { padding-bottom: 120px; }
.player__in { display: flex; align-items: center; gap: clamp(.7rem, 2vw, 1.3rem); }
.player__cover { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.player__meta { flex: 1; min-width: 0; }
.player__title {
  margin: 0 0 .3rem; font-weight: 700; font-size: .95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player__bar { display: flex; align-items: center; gap: .7rem; }
.player__time { font-variant-numeric: tabular-nums; font-size: .78rem; color: var(--text-still); flex: 0 0 auto; }
.player__seek {
  flex: 1; min-width: 60px; height: 6px; -webkit-appearance: none; appearance: none;
  background: linear-gradient(to right, var(--gold) var(--fortschritt, 0%), var(--nacht-500) var(--fortschritt, 0%));
  border-radius: 999px; cursor: pointer;
}
.player__seek::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold-hell); border: 0; box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 70%, transparent); cursor: pointer;
}
.player__seek::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; border: 0;
  background: var(--gold-hell); box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 70%, transparent); cursor: pointer;
}
.player__ctrl { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.iconbtn {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: none; border: 1px solid var(--linie); border-radius: 50%;
  color: var(--text-leise); cursor: pointer; transition: color .2s ease, border-color .2s ease;
}
.iconbtn:hover { color: var(--gold-hell); border-color: var(--gold); }
.iconbtn svg { width: 20px; height: 20px; fill: currentColor; }
.ratebtn {
  min-width: 44px; height: 40px; padding: 0 .6rem;
  background: none; border: 1px solid var(--linie); border-radius: 999px;
  color: var(--text-leise); font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: color .2s ease, border-color .2s ease;
}
.ratebtn:hover { color: var(--gold-hell); border-color: var(--gold); }

@media (max-width: 720px) {
  .player__cover { width: 44px; height: 44px; }
  #pl-back, #pl-fwd, #pl-rate { display: none; }
  body.hat-player { padding-bottom: 104px; }
}

/* ---------- Auftritt beim Scrollen ---------- */
@media (prefers-reduced-motion: no-preference) {
  .auftritt { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .auftritt.ist-da { opacity: 1; transform: none; }
}

/* ---------- Kleine Hilfsklassen (halten das Markup frei von Inline-Styles,
   damit die Content-Security-Policy ohne 'unsafe-inline' auskommt) ---------- */
.abstand-oben { margin-top: clamp(2.5rem, 6vw, 4rem); }
.abstand-oben-klein { margin-top: 1.6rem; }
.abstand-unten-klein { margin-bottom: 1.4rem; }
.schlicht { color: inherit; text-decoration: none; }
.schlicht:hover { color: var(--gold-hell); }
.mitte { text-align: center; }
.prosa--mitte { margin-inline: auto; text-align: center; max-width: 64ch; }
.plattformen--mitte { justify-content: center; }
.rhythmus {
  font-family: var(--display);
  color: var(--gold-hell);
  font-size: 1.15rem;
  margin-top: 2rem;
}
.feldgruppe { border: 0; padding: 0; margin: 0; }
.feldgruppe > legend { font-weight: 600; font-size: .95rem; margin-bottom: .6rem; padding: 0; }
.kleingedrucktes { color: var(--text-still); font-size: .88rem; margin: 0; }
.hero__actions--links { justify-content: flex-start; }

/* ---------- Doppelporträt auf der Startseite ----------
   Bewusst anders gebaut als die Karten auf /wir: runde Köpfe, ein Satz
   statt Biografie, direkter Maillink. Die Seite /wir bleibt der Ort für
   die ausführlichen Texte. */
.duo {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3.5rem);
}
/* Spalte, damit der Maillink bei beiden auf derselben Linie sitzt,
   auch wenn der eine Satz eine Zeile länger läuft. */
.kopf { flex: 0 1 300px; text-align: center; display: flex; flex-direction: column; }

.kopf__bild {
  display: block;
  width: min(100%, 230px);
  margin: 0 auto 1.2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 3px solid color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 9%, transparent),
              0 20px 45px -22px #000;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.kopf__bild img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  filter: saturate(.95) contrast(1.04);
}
.kopf__bild::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(150deg, color-mix(in srgb, var(--gold-glut) 20%, transparent), transparent 55%);
}
.kopf__bild:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 16%, transparent),
              0 26px 55px -22px #000;
}

.kopf__rolle {
  font-family: var(--display);
  font-size: .7rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 .35rem;
}
.kopf__name { margin: 0 0 .6rem; font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); }
.kopf__satz { color: var(--text-leise); font-size: .97rem; margin: 0 0 1.1rem; }
.kopf__mail { margin-top: auto; align-self: center; }

.kopf__mail {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--text); text-decoration: none;
  font-weight: 600; font-size: .95rem;
  padding: .5rem .3rem;
  border-bottom: 2px solid color-mix(in srgb, var(--gold) 45%, transparent);
  transition: color .2s ease, border-color .2s ease;
}
.kopf__mail svg { width: 1.1em; height: 1.1em; fill: var(--gold); }
.kopf__mail:hover { color: var(--gold-hell); border-color: var(--gold); }

.duo__und {
  font-family: var(--display);
  font-size: clamp(.8rem, .6rem + .7vw, 1.05rem);
  letter-spacing: .2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--gold) 70%, transparent);
  align-self: flex-start;
  margin-top: clamp(70px, 9vw, 105px);
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .duo { flex-direction: column; align-items: center; gap: 1.2rem; }
  .duo__und { margin: 0; align-self: center; }
  .kopf { flex: 1 1 auto; max-width: 320px; }
  .kopf__bild { width: 180px; margin-bottom: .9rem; }
}


/* ---------- Leuchtender Schriftzug im Hero ----------
   Die Birnen im Schriftzug sind bereits fast weiß gezeichnet — aufhellen
   bringt dort nichts. Die Lichtebene regelt sie deshalb herunter und lässt
   nur die laufende Welle voll leuchten. logo-schauschau.webp bleibt
   unverändert. Erzeugt mit werkzeug/birnen.py. */
.marquee {
  position: relative;
  width: min(88%, 640px);
  margin: 0 auto clamp(1.2rem, 3vw, 2rem);
}
.marquee .hero__logo { width: 100%; margin: 0; }

.marquee__licht {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Auf die Buchstabenform beschränken: Der Alphakanal des Schriftzugs dient
     als Maske, sonst läge der Lichthof auch über dem Himmel dahinter.
     Eigene, kleine Datei (11 KB) statt des Schriftzugs selbst — der wäre
     hier ein zweiter Download von 81 KB. Erzeugt von werkzeug/bildgroessen.py. */
  -webkit-mask-image: url('/assets/img/marquee-maske.webp');
  mask-image: url('/assets/img/marquee-maske.webp');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.birne__aus,
.birne__schein {
  animation-duration: 2.4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* Dimmer über der Birne: gedämpft, solange die Welle woanders steht */
.birne__aus {
  opacity: .5;
  animation-name: birne-aus;
}
@keyframes birne-aus {
  0%        { opacity: .5; }
  6%, 17%   { opacity: 0; }
  42%       { opacity: .4; }
  100%      { opacity: .5; }
}

/* Lichthof, wenn die Welle die Birne erreicht */
.birne__schein {
  opacity: 0;
  animation-name: birne-schein;
}
@keyframes birne-schein {
  0%        { opacity: 0; }
  6%, 17%   { opacity: .85; }
  42%       { opacity: .1; }
  100%      { opacity: 0; }
}

/* Zwölf Stufen nach Position: das Licht läuft durch den Schriftzug.
   Die Verzögerung steht ausdrücklich an den Kreisen, nicht vererbt an der
   Gruppe — das ist unabhängig davon, wie ein Browser `inherit` behandelt. */
.birne--0 .birne__aus,
.birne--0 .birne__schein { animation-delay: 0s; }
.birne--1 .birne__aus,
.birne--1 .birne__schein { animation-delay: -2.2s; }
.birne--2 .birne__aus,
.birne--2 .birne__schein { animation-delay: -2.0s; }
.birne--3 .birne__aus,
.birne--3 .birne__schein { animation-delay: -1.8s; }
.birne--4 .birne__aus,
.birne--4 .birne__schein { animation-delay: -1.6s; }
.birne--5 .birne__aus,
.birne--5 .birne__schein { animation-delay: -1.4s; }
.birne--6 .birne__aus,
.birne--6 .birne__schein { animation-delay: -1.2s; }
.birne--7 .birne__aus,
.birne--7 .birne__schein { animation-delay: -1.0s; }
.birne--8 .birne__aus,
.birne--8 .birne__schein { animation-delay: -0.8s; }
.birne--9 .birne__aus,
.birne--9 .birne__schein { animation-delay: -0.6s; }
.birne--10 .birne__aus,
.birne--10 .birne__schein { animation-delay: -0.4s; }
.birne--11 .birne__aus,
.birne--11 .birne__schein { animation-delay: -0.2s; }

/* Wer keine Bewegung möchte, bekommt den Schriftzug ohne Lichtebene —
   er leuchtet ja von sich aus schon. */
@media (prefers-reduced-motion: reduce) {
  .marquee__licht { display: none; }
}

/* ---------- Videofassung einer Folge ----------
   Der Player lädt vor dem Klick nichts (preload="none"). Danach holt der
   Browser über Teilabrufe nur den Abschnitt, der gerade gebraucht wird —
   die MP4-Dateien haben ihren Index vorne (Faststart), sonst ginge das nicht. */

.videokasten {
  position: relative;
  background: var(--nacht-900);
  border: 1px solid var(--linie);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--schatten);
}
.videokasten__spieler {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--nacht-900);
  /* Das Vorschaubild ist quadratisch (Folgencover). „contain“ stellt es
     mittig hinein, statt Kopf oder Schriftzug abzuschneiden. */
  object-fit: contain;
}
.videokasten__spieler:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.videokasten__buehne { position: relative; container-type: inline-size; }
/* Großer Startknopf über dem Vorschaubild, solange nichts läuft */
.videokasten__start {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  --size: clamp(64px, 9vw, 84px);
  box-shadow: 0 12px 40px -8px #000, 0 0 0 10px color-mix(in srgb, var(--nacht-900) 45%, transparent);
}
.videokasten__start:hover { transform: translate(-50%, -50%) scale(1.07); }
.videokasten__start[hidden] { display: none; }
.videokasten__spieler::cue {
  background: color-mix(in srgb, var(--nacht-900) 78%, transparent);
  color: var(--text); font-family: var(--body); font-size: clamp(.9rem, 2.4vw, 1.35rem); line-height: 1.35;
}
/* Eigene Untertitel über dem Bild */
.videokasten__untertitel {
  /* Auf der Höhe, auf der auch die fest eingebrannten Untertitel der Folgen
     sitzen (Unterkante rund 11,5 % über dem Bildrand) */
  position: absolute; left: 8%; right: 8%; bottom: 11.5%; pointer-events: none;
  display: flex; justify-content: center; text-align: center;
  transition: bottom .3s ease;
}
.videokasten__untertitel[hidden] { display: none; }
/* Größe wächst mit dem Bild (Container-Einheiten), also auch im Vollbild;
   der Umbruch steht schon im Text (zwei Zeilen à rund 40 Zeichen) */
.videokasten__untertitel span {
  display: inline-block; padding: .15em .55em; border-radius: .25em;
  background: color-mix(in srgb, var(--nacht-900) 78%, transparent);
  color: var(--text); font-size: clamp(.85rem, 2.2cqw, 3.2rem); line-height: 1.3; font-weight: 500;
  white-space: pre-line; text-shadow: 0 1px 2px #000;
}

/* ---------- Steuerleiste unter dem Bild ----------
   Play, Zeit, Zeitleiste mit Kapitelabschnitten, Restzeit, Untertitel,
   Tempo, Qualität, Vollbild. Sichtbar erst, wenn spieler.js übernommen hat. */
.leiste {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .75rem clamp(.8rem, 2vw, 1.2rem);
  border-top: 1px solid var(--linie);
  background: linear-gradient(180deg, var(--nacht-800), var(--nacht-900));
}
.leiste[hidden] { display: none; }
.leiste__play { --size: 42px; }
.leiste__zeit {
  font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--text-leise);
  flex: 0 0 auto; min-width: 3.1rem;
}
.leiste__zeit--rest { text-align: right; }
.leiste__play.is-playing .i-play, .leiste__play:not(.is-playing) .i-pause { display: none; }

/* Zeitleiste: ein Abschnitt je Kapitel, dazwischen 3 Pixel Luft mit geraden
   Kanten; nur die beiden Enden der Leiste sind rund. Die Lücke ist ein
   durchsichtiger Rand, der Hintergrund endet davor (background-clip) — deshalb
   unten background-color statt der Kurzform background. */
.zeitleiste {
  position: relative; flex: 1 1 140px; min-width: 120px; height: 26px;
  display: flex; align-items: center; cursor: pointer; user-select: none; touch-action: none;
  border-radius: 999px;
}
.zeitleiste:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.zeitleiste__abschnitt {
  position: relative; flex: 1 1 0; height: 6px; overflow: hidden;
  background-color: var(--nacht-500); background-clip: padding-box;
  border-right: 3px solid transparent;
  transition: height .15s ease;
}
.zeitleiste__abschnitt:first-child { border-radius: 3px 0 0 3px; }
.zeitleiste__abschnitt:nth-last-child(2) { border-right: 0; border-radius: 0 3px 3px 0; }
.zeitleiste__abschnitt:only-of-type { border-right: 0; border-radius: 3px; }
.zeitleiste__abschnitt--aktiv { background-color: var(--himmel); }
.zeitleiste:hover .zeitleiste__abschnitt, .zeitleiste.ist-am-ziehen .zeitleiste__abschnitt { height: 8px; }
.zeitleiste__fuellung { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-hell)); }
.zeitleiste__marke {
  position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--gold-hell); pointer-events: none;
  box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 70%, transparent);
  transform: scale(0); transition: transform .15s ease;
}
.zeitleiste:hover .zeitleiste__marke, .zeitleiste:focus-visible .zeitleiste__marke,
.zeitleiste.ist-am-ziehen .zeitleiste__marke { transform: scale(1); }

/* Kleine Knöpfe: Untertitel, Tempo, Qualität, Vollbild, Kapitel, Transkript */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-width: 42px; height: 36px; padding: 0 .65rem;
  background: none; border: 1px solid var(--linie); border-radius: 999px;
  color: var(--text-leise); font: inherit; font-weight: 700; font-size: .8rem; cursor: pointer;
  font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.knopf:hover { color: var(--gold-hell); border-color: var(--gold); }
.knopf[aria-pressed="true"], .knopf[aria-expanded="true"] {
  color: var(--nacht-900); background: var(--gold); border-color: var(--gold);
}
.knopf svg { width: 18px; height: 18px; fill: currentColor; }
.knopf--icon { min-width: 36px; padding: 0; }
.auswahl { position: relative; flex: 0 0 auto; }
.auswahl[hidden] { display: none; }
.auswahl__menue {
  position: absolute; right: 0; bottom: calc(100% + .5rem); z-index: 5; min-width: 12rem;
  padding: .3rem; border-radius: 14px;
  background: color-mix(in srgb, var(--nacht-700) 96%, transparent);
  border: 1px solid var(--linie); box-shadow: 0 16px 40px -18px #000;
}
.auswahl__menue[hidden] { display: none; }
.auswahl__menue button {
  display: flex; justify-content: space-between; gap: 1rem; width: 100%;
  padding: .5rem .7rem; border: 0; border-radius: 10px; background: none;
  color: var(--text); font: inherit; font-size: .85rem; text-align: left; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.auswahl__menue button:hover { background: var(--nacht-600); }
.auswahl__menue button[aria-checked="true"] { color: var(--gold-hell); font-weight: 700; }
.auswahl__menue small { color: var(--text-still); font-weight: 400; }

/* Kapitel und Transkript: Leiste mit den beiden Schaltern, darunter die Tafeln */
.tafeln {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .6rem clamp(.8rem, 2vw, 1.2rem);
  border-top: 1px solid var(--linie); background: var(--nacht-900);
}
.tafeln__aktuell {
  flex: 1 1 10rem; min-width: 0; text-align: right; font-size: .8rem; color: var(--text-still);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tafeln__aktuell:empty { display: none; }
.tafel { border-top: 1px solid var(--linie); background: var(--nacht-900); padding: .5rem clamp(.8rem, 2vw, 1.2rem) 1rem; }
.tafel[hidden] { display: none; }
.tafelkasten {
  background: var(--nacht-900); border: 1px solid var(--linie); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--schatten);
}
.tafelkasten .tafeln { border-top: 0; }

.kapitel { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow: auto; overscroll-behavior: contain; }
.kapitel__knopf {
  display: grid; grid-template-columns: 2rem 1fr auto; align-items: baseline; gap: .6rem; width: 100%;
  padding: .5rem .6rem; border: 0; border-radius: 10px; background: none;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.kapitel__knopf:hover { background: var(--nacht-700); color: var(--gold-hell); }
.kapitel__eintrag--aktiv .kapitel__knopf { color: var(--gold-hell); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.kapitel__nr, .kapitel__zeit { color: var(--text-still); font-size: .8rem; font-variant-numeric: tabular-nums; }
.kapitel__eintrag--aktiv .kapitel__nr { color: var(--gold); }

.tafel__folgt { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--text-leise); cursor: pointer; margin: .2rem 0 .5rem; }
.tafel__folgt input { accent-color: var(--gold); width: 15px; height: 15px; margin: 0; }
.transkript {
  max-height: min(52vh, 560px); overflow: auto; overscroll-behavior: contain;
  padding-right: .4rem; scroll-behavior: smooth; line-height: 1.7;
}
.transkript:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
.transkript__kapitel { font-size: 1rem; margin: 1.3rem 0 .4rem; }
.transkript__kapitel:first-child { margin-top: .2rem; }
.transkript__kapitel button {
  padding: 0; border: 0; background: none; color: var(--gold); font: inherit; font-weight: 700; text-align: left; cursor: pointer;
}
.transkript__kapitel button:hover { color: var(--gold-hell); }
.transkript__absatz { margin: 0 0 .55rem; padding: .25rem .5rem; border-radius: 10px; color: var(--text); }
.transkript__zeit {
  margin-right: .5rem; padding: 0 .35rem; border: 0; border-radius: 6px;
  background: var(--nacht-700); color: var(--text-still); font: inherit; font-size: .72rem; font-variant-numeric: tabular-nums; cursor: pointer;
  vertical-align: .1em;
}
.transkript__zeit:hover { color: var(--gold-hell); }
.transkript__satz { cursor: pointer; border-radius: 5px; padding: 0 .1em; transition: color .3s ease, background-color .2s ease; }
.transkript__satz:hover { background: var(--nacht-600); }
.transkript__satz--gelesen { color: var(--text-still); }
.transkript__satz--aktiv { background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--gold-hell); }

/* Vollbild: der ganze Kasten, damit Leiste und Tafeln dabeibleiben. Sie
   liegen dann als Schicht über dem unteren Bildrand und fahren nach drei
   Sekunden ohne Bewegung nach unten weg (Klasse ist-ruhig, setzt spieler.js). */
.videokasten:fullscreen { border: 0; border-radius: 0; background: #000; }
.videokasten:fullscreen .videokasten__buehne { position: absolute; inset: 0; }
.videokasten:fullscreen .videokasten__spieler { width: 100%; height: 100%; aspect-ratio: auto; }
.videokasten__unten { transition: transform .35s ease, opacity .35s ease; }
.videokasten:fullscreen .videokasten__unten {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: color-mix(in srgb, var(--nacht-900) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
}
.videokasten:fullscreen .leiste { background: none; border-top: 0; }
.videokasten:fullscreen .tafeln, .videokasten:fullscreen .tafel { background: none; }
.videokasten:fullscreen .tafel { max-height: 40vh; overflow: auto; }
.videokasten:fullscreen .kapitel, .videokasten:fullscreen .transkript { max-height: 34vh; }
.videokasten:fullscreen:not(.ist-ruhig) .videokasten__untertitel { bottom: max(11.5%, calc(var(--unten-hoehe, 110px) + 1.2rem)); }
.videokasten:fullscreen.ist-ruhig { cursor: none; }
.videokasten:fullscreen.ist-ruhig .videokasten__unten { transform: translateY(100%); opacity: 0; pointer-events: none; }

@media (max-width: 640px) {
  /* Zeitleiste in eine eigene Zeile, damit die Knöpfe daneben Platz haben */
  .leiste { gap: .5rem .45rem; }
  .zeitleiste { order: 10; flex-basis: 100%; }
  .leiste__zeit { min-width: 0; }
  .leiste__zeit--rest { margin-right: auto; }
  .knopf { min-width: 38px; height: 34px; padding: 0 .5rem; font-size: .75rem; }
}
/* Das Hören als ruhige zweite Möglichkeit unter dem Text — der Film führt. */
.nur-hoeren {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: clamp(1.5rem, 4vw, 2.2rem);
  padding-top: clamp(1.2rem, 3vw, 1.8rem);
  border-top: 1px solid var(--linie);
  color: var(--text-leise);
  font-weight: 600;
}
.nur-hoeren .playbtn { --size: 46px; }

/* Markierung in den Folgenlisten */
.marke-video {
  display: inline-block;
  font-family: var(--display);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nacht-900);
  background: var(--gold);
  padding: .16rem .45rem;
  border-radius: 999px;
  vertical-align: .08em;
}

/* ---------- Zahlentabellen im Kontrollraum ---------- */
.kr-tabelle {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.4rem;
  font-variant-numeric: tabular-nums;
}
.kr-tabelle th,
.kr-tabelle td {
  text-align: right;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--linie);
}
.kr-tabelle th:first-child,
.kr-tabelle td:first-child { text-align: left; }
.kr-tabelle th {
  font-family: var(--display);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom-color: color-mix(in srgb, var(--gold) 40%, transparent);
}
.kr-tabelle td { color: var(--text-leise); }
.kr-tabelle td strong { color: var(--text); font-size: 1.05rem; }
.kr-tabelle--links td:last-child { text-align: left; }

/* Die Zahlen oben auf einen Blick. */
.kr-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .8rem;
  margin: 1rem 0 1.6rem;
}
.kr-kachel {
  background: color-mix(in srgb, var(--gold) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  border-radius: 12px;
  padding: .9rem 1rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.kr-kachel--leise {
  background: none;
  border-color: var(--linie);
}
.kr-kachel__zahl {
  font-family: var(--display);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  color: var(--gold-hell);
  line-height: 1.1;
}
.kr-kachel--leise .kr-kachel__zahl { color: var(--text-leise); }
.kr-kachel__wort { font-size: .82rem; color: var(--text-leise); }

/* Balken je Tag. Alles Formgebende steckt als Attribut im SVG — ein
   style-Attribut waere von der Content-Security-Policy verboten. */
.kr-diagramm { margin: .6rem 0 1.4rem; }
.kr-diagramm svg { display: block; width: 100%; height: auto; }
.kr-achse { stroke: var(--linie); stroke-width: 1; }
.kr-balken { fill: var(--gold); opacity: .75; transition: opacity .15s ease; }
.kr-balken:hover { opacity: 1; }
.kr-tag { fill: var(--text-leise); font-size: 10px; font-family: var(--body); }

.kr-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.4rem 2.2rem;
  align-items: start;
}
.kr-spalten h3 { margin-top: 0; }
.kr-mini { display: inline; }

.kr-ip-form { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.kr-ip-form label { font-size: .9rem; color: var(--text-leise); }
.kr-ip-form input {
  background: color-mix(in srgb, var(--nacht-900) 70%, transparent);
  border: 1px solid var(--linie); border-radius: 8px;
  color: var(--text); font: inherit; font-size: .92rem;
  padding: .45rem .7rem; width: 12rem;
}
.kr-ip-form input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ---------- Hinweis auf die Videofassung, neben dem Schriftzug ----------
   Leicht schräg gestellt wie ein aufgeklebter Zettel. Erscheint nur, wenn es
   überhaupt eine Videofolge gibt, und führt zur neuesten davon. */
/* Kein CSS-Filter an dieser Pille — siehe die Erklaerung im Kopfbereich von
   view.php. Der Schein liegt im SVG und braucht dort Rand. Damit die Kopfzeile
   davon nichts merkt, behaelt der Verweis den Platz der blossen Pille
   (216:56) und das groessere SVG-Feld (288:128) wird mittig darueber gelegt.
   Die Prozente sind ausgerechnet: (128/56 - 1) / 2 = 64,286 % der Hoehe und
   der gleiche Ueberstand geteilt durch die Breite = 16,667 %. */
.kopf-pille {
  position: relative;
  display: block;
  flex: 0 0 auto;
  height: clamp(38px, 3.6vw, 50px);
  aspect-ratio: 216 / 56;
}
.kopf-pille svg {
  position: absolute;
  top: -64.286%;
  left: -16.667%;
  height: 228.571%;
  width: 133.333%;   /* 288/216 — beide Masse gesetzt, sonst staucht das SVG */
  max-width: none;   /* der Reset in Zeile 148 wuerde sonst auf 100 % kappen */
}
.kopf-pille .pille-schein { opacity: .5; transition: opacity .25s ease; }
.kopf-pille .pille-licht  { opacity: 0;  transition: opacity .25s ease; }
.kopf-pille:hover .pille-schein { opacity: .85; }
.kopf-pille:hover .pille-licht  { opacity: .16; }

@media (max-width: 860px) {
  .kopf-pille { height: 34px; }
}
@media (max-width: 560px) {
  /* Ganz schmal wird es neben Schriftzug und Menueknopf zu eng. */
  .kopf-pille { display: none; }
}
}