/* =====================================================================
   ohr.saetzerei.com · die Bühne

   Ein Bildschirm, hell: der Titel gross, darunter der Spieler mit der
   Wellenform der Folge als Bild, dann das Mailfeld, dann alle zwölf
   Folgen als Reihe, je Staffel eine Liste. Statt Cover trägt jede Folge
   ihre Nummer, gross in der Ruf-Schrift, und einen Teaser
   (folgen.json → teaser): Ort, Jahr, Mensch, Gegenstand, dann die Frage. Die Wellenform ist echt: 96 Balken aus der Lautheit
   der gemischten Folge (folgen.json → welle). Jede Folge hat damit ihre
   eigene Gestalt, und man tippt hinein, um zu springen.

   Alle Farben kommen aus tokens.css; hier steht nur Anordnung.
   ===================================================================== */

.buehne {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--r8) var(--r6) var(--r16);
}

/* -- Kopf --------------------------------------------------------------- */
.kopf { margin-bottom: var(--r8); }
.kopf .titel {
  font-size: clamp(2.4rem, 11vw, 3.6rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.kopf .unterzeile {
  font-size: clamp(1.25rem, 5vw, 1.6rem);
  line-height: 1.25;
  color: var(--ink-soft);
  margin-top: var(--r3);
  max-width: var(--measure);
  text-wrap: balance;
}

/* -- Spieler ------------------------------------------------------------ */
.spieler {
  background: var(--paper-hoch);
  border: var(--linie) solid var(--rule-soft);
  border-radius: var(--radius-g);
  padding: var(--r6);
}
.spieler-oben { display: flex; gap: var(--r4); align-items: center; }
/* Die Nummer ist das Bild: schmal und hoch, wie auf den Covern. */
.spieler-ziffer {
  flex: 0 0 auto;
  min-width: 0.9em;
  font-family: var(--schrift-ruf);
  font-size: 4.5rem;
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.spieler-mitte { display: flex; gap: var(--r4); align-items: center; margin-top: var(--r6); }
.spieler-mitte .welle { flex: 1 1 auto; margin-top: 0; min-width: 0; gap: 1px; }

.spiel {
  flex: 0 0 auto;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: var(--auf-akzent);
  display: grid; place-items: center;
  cursor: pointer;
}
.spiel svg { width: 1.5rem; height: 1.5rem; }
.spiel .zeichen-halt { display: none; }
.spiel.laeuft .zeichen-spiel { display: none; }
.spiel.laeuft .zeichen-halt { display: block; }
.spiel:disabled { background: var(--rule); color: var(--ink-faint); cursor: default; }
.spiel:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.spieler-text { min-width: 0; }
.spieler-nr { font-size: var(--grad-fein); color: var(--ink-faint); }
.spieler-titel { font-size: var(--grad-gross); font-weight: 400; line-height: var(--zeile-eng); margin-top: var(--r1); }
.spieler-teaser { color: var(--ink-soft); margin-top: var(--r4); max-width: var(--measure); }
.spieler-teaser:empty { display: none; }

/* Die Welle: Balken als Flexzeile, die gespielten im Akzent. Höhe je
   Balken kommt als Inline-Stil aus dem Skript (Prozent). */
.welle {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 4.5rem;
  margin-top: var(--r6);
  cursor: pointer;
  touch-action: none;
  border-radius: var(--radius-s);
}
.welle span {
  flex: 1 1 0;
  min-width: 0;
  background: var(--ink-faint);
  opacity: 0.38;
  border-radius: 1px;
}
.welle span.gespielt { background: var(--accent); opacity: 1; }
.welle.gesperrt { cursor: default; opacity: 0.6; }
.welle:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.spieler-zeit {
  display: flex;
  justify-content: space-between;
  margin-top: var(--r2);
  font-size: var(--grad-fein);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* -- Abonnieren --------------------------------------------------------- */
.abo { margin-top: var(--r12); }
.abo h2 { font-size: var(--grad-gross); font-weight: 400; line-height: var(--zeile-eng); }
.abo-form { margin-top: var(--r4); }
.abo-zeile { display: flex; flex-wrap: wrap; gap: var(--r2); }
.abo-zeile input {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: var(--ziel-min);
  font: inherit;
  padding: var(--r2) var(--r3);
  border: var(--linie) solid var(--rule);
  border-radius: var(--radius-s);
  background: var(--paper-hoch);
  color: var(--ink);
}
.abo-zeile input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.abo-zeile .knopf { min-height: var(--ziel-min); }
.abo-falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.abo-klein { font-size: var(--grad-fein); color: var(--ink-faint); margin-top: var(--r3); max-width: var(--measure); }
#abo-stand:empty { display: none; }
#abo-stand { margin-top: var(--r3); }
#abo-stand.gut { color: var(--ink); }
#abo-stand.fehler {
  color: var(--warn-fg);
  background: var(--warn-bg);
  border-radius: var(--radius-s);
  padding: var(--r2) var(--r3);
  display: inline-block;
}

/* -- Die Reihe: alle zwölf, je Staffel eine Liste --------------------- */
.reihe { margin-top: var(--r12); }
.staffel-titel {
  font-size: var(--grad-fein);
  font-weight: 400;
  color: var(--ink-faint);
  margin: var(--r8) 0 var(--r2);
}
.staffel-titel:first-child { margin-top: 0; }
.folgen { list-style: none; margin: 0; padding: 0; border-top: var(--linie) solid var(--rule-soft); }
.folgen li { border-bottom: var(--linie) solid var(--rule-soft); }
.folgen a {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--r3);
  align-items: start;
  padding: var(--r3) 0;
  min-height: var(--ziel-min);
  color: var(--ink);
  text-decoration: none;
}
.folgen .f-nr {
  font-family: var(--schrift-ruf);
  font-size: 2.25rem;
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--accent);
}
.folgen .f-teaser { font-size: var(--grad-klein); color: var(--ink-soft); margin-top: var(--r1); }
.folgen .f-text { display: flex; flex-direction: column; min-width: 0; }
.folgen a:hover .f-titel { text-decoration: underline; }
.folgen a[aria-current="true"] .f-titel { color: var(--accent); }
.folgen .f-meta { font-size: var(--grad-fein); color: var(--ink-faint); display: inline-flex; align-items: center; gap: var(--r1); margin-top: var(--r1); }
.folgen .f-haken { width: 1em; height: 1em; color: var(--ok-fg); }
.folgen .f-fort {
  display: block; height: 3px; margin-top: var(--r1); border-radius: 2px;
  background: linear-gradient(to right, var(--accent) var(--fort), var(--rule-soft) var(--fort));
}
.folgen .zu .f-titel { color: var(--ink-soft); }
.folgen .zu .f-nr { color: var(--ink-faint); }

/* -- Rückmeldung -------------------------------------------------------- */
.rueck {
  margin-top: var(--r6);
  background: var(--paper-hoch);
  border: var(--linie) solid var(--rule-soft);
  border-radius: var(--radius-g);
  padding: var(--r6);
}
.rueck h2 { font-size: var(--grad-gross); font-weight: 400; line-height: var(--zeile-eng); }
.rueck-zu { color: var(--ink-soft); margin-top: var(--r2); max-width: var(--measure); }
.rueck-zu:empty { display: none; }
.rueck-wahl { display: flex; flex-wrap: wrap; gap: var(--r2); margin-top: var(--r4); }
.rueck-wahl .knopf { min-height: var(--ziel-min); font-size: var(--grad-klein); }
.rueck-satz { margin-top: var(--r4); display: flex; flex-direction: column; gap: var(--r2); align-items: flex-start; }
.rueck-satz label { font-size: var(--grad-fein); color: var(--ink-soft); }
.rueck-satz textarea {
  width: 100%;
  font: inherit;
  padding: var(--r2) var(--r3);
  border: var(--linie) solid var(--rule);
  border-radius: var(--radius-s);
  background: var(--paper);
  color: var(--ink);
}
.rueck-satz textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
#rueck-stand:empty { display: none; }
#rueck-stand { margin-top: var(--r3); }

/* -- Mit Zugang --------------------------------------------------------- */
.dabei { margin-top: var(--r12); }
.dabei h2 { font-size: var(--grad-gross); font-weight: 400; line-height: var(--zeile-eng); }
.dabei p { color: var(--ink-soft); margin-top: var(--r2); max-width: var(--measure); }
.leiser-knopf {
  font: inherit; font-size: var(--grad-fein); color: var(--ink-faint);
  background: none; border: 0; padding: var(--r2) 0; min-height: var(--ziel-min);
  text-decoration: underline; cursor: pointer;
}

.fusszeile p + p { margin-top: var(--r1); }

/* -- Gesperrt: kommt per Mail ------------------------------------------- */
.spieler.gesperrt .spiel { background: var(--rule); color: var(--ink-faint); }
.spieler.gesperrt .spieler-ziffer { color: var(--ink-faint); }
.spieler-zeit a { color: var(--accent); }
.folgen .zu .f-titel { color: var(--ink-soft); }
.folgen .zu .f-meta { color: var(--ink-faint); }