Die Regie wird eine Regie -- und das Video lief bei niemandem

Filipe: "perfektionier das auch mit den videoos. pefektionier auch das
aussehen und das layout von der regie. ich will dass du das viel
hochwertiger und profissioneller machst."

DAS VIDEO LIEF BEI NIEMANDEM -- AUCH NICHT BEIM HOST

Gemessen ueber ein neues Merkmal am Rahmen: `onStateChange` ist nie
ausgeloest worden, bei keinem der drei Browser. Zwei Ursachen, die
sich gegenseitig verdeckt haben:

  Ein Player mit Ton darf ohne Handlung des Menschen nicht losgehen.
  Ohne `mute: 1` greift `playVideo()` nicht -- und ein Zuschauer hat
  keine Bedienung (mit Absicht), haette also NIE eine Moeglichkeit
  gehabt, es zu starten. Eine Stunde Standbild.

  `onReady` tat `if (host) takt(); else folgen();`. Der Host hat damit
  nur GEMELDET, wo er steht, und nie selbst begonnen. Er meldete
  "laeuft nicht", und alle anderen folgten ihm brav ins Stehen.

Die Messung bricht ab jetzt ab, wenn der Player nicht bei beiden
laeuft. Ein gruener Haken ueber einem Standbild ist wertlos.

DIE WARTESCHLANGE

Vorher gab es genau EIN Videofeld. Wer zwei Sachen hintereinander
schauen wollte, tippte mitten in der Sendung eine YouTube-Adresse ein
-- vor Publikum, mit laufender Kamera, ein Tippfehler von einem
schwarzen Rechteck entfernt. Jetzt wird vorher eingeraeumt und im Live
nur weitergeschaltet: anhaengen, schieben, "Jetzt", "Naechstes".

Die Titel kommen von YouTube selbst (oEmbed, kein Schluessel, kein
Kontingent) und werden EINMAL geholt und hingelegt. Klappt der Abruf
nicht, steht dort die Kennung -- kein erfundener Name. Die Grenze ist
ueber die Umgebung veraenderbar, damit die Pruefung den vollen Fall in
Sekunden erreicht statt dreissig Videos anzuhaengen.

DIE REGIE

Vorher fuenf Kaesten untereinander in einem Bereich, der hoechstens
die halbe Bildschirmhoehe hat -- man sah fuenf halbe Dinge. Die drei
grossen Knoepfe lagen ganz unten, hinter acht Feldern und vier
Reglern. Wer mitten in der Sendung "Beenden" drueckt, drueckt es, weil
etwas passiert ist; das darf nicht hinter einer Bewegung liegen.

  Eine Leiste, die IMMER steht: Lampe, Laufzeit, Zuschauer, wie viele
  davon Bild bekommen, Gaeste, gemessener Upload -- und rechts die
  drei Knoepfe.

  Register statt Stapel: Sendung, Warteschlange, Ton, Gaeste, Bild.

  Eine Videospur mit echter Bedienung: Pause, +/-10 s, Positionsband,
  Restzeit, "Naechstes". Vorher musste man ins YouTube-Bild fassen --
  und was dort passiert, passiert nur bei einem selbst.

  PEGEL an den Reglern, aus einer echten Messung (AnalyserNode). Sie
  beantworten die Frage, die man sich sonst erst nach der Sendung
  stellt: "War mein Mikro ueberhaupt an?" Ein Regler auf 100 sagt
  darueber nichts. Beim YouTube-Regler steht dabei, dass dort nichts
  zu messen ist -- Ton aus einem fremden Rahmen laesst sich nicht
  abgreifen, und ein erfundener Ausschlag waere schlimmer als keiner.

  Der Upload wird an der Verbindung gemessen (`getStats`), nicht aus
  "zwoelf mal 350 kbit/s" gerechnet.

  Tastaturkuerzel -- und die Legende steht darunter. Ein Kuerzel, das
  niemand kennt, ist keins.

VIER FEHLER, DIE NUR DIE MESSUNG GEZEIGT HAT

1. `.tafel` WAR SCHON VERGEBEN. Die Anmeldeseite hat diese Klasse und
   setzt sie `position: absolute`; reaktion.html laedt beide
   Stilvorlagen. Die Register-Tafel trug damit NICHTS zur Hoehe bei
   (114 px Raster, 294 px Inhalt) und malte quer ueber Register und
   Kuerzel -- 197 Pixel, um die die Seite ueberlief. Auf dem Bild sah
   es aus wie ein Anzeigefehler; es war ein Namensstreit. Dritter
   Fall dieser Art nach .knopf-still und .schalter, deshalb steht er
   ab jetzt in einer Pruefung: keine Klasse aus reaktion.css darf in
   gate/start/module/haus.css vorkommen.

2. `node:sqlite` kennt kein `.transaction()`. Von Hand geklammert.

3. Das Schild war auf dem Handy 10,24 px gross -- unter der
   Hausgrenze von 11,5 px. Gefunden von `pruef-handy`, das die
   GEZEICHNETE Groesse misst; die Stilvorlagen-Pruefung haette die
   Zeile in der Medienabfrage durchgelassen.

4. Die Messung klickte blind auf den Griff des Pults ("umschalten")
   und machte es damit ZU, seit es aufgeklappt startet. Sie stellt
   den Zustand jetzt her, statt ihn umzuschalten.

UND DIE HARTNAECKIGSTE: DAS BILD DES GASTES KAM BEIM HOST NICHT AN

Erst in einem von drei Laeufen, dann in drei von drei -- und zwar
SCHLIMMER, nachdem ich einen Wachhund dagegen gebaut hatte. Vier
Ursachen, hintereinander gemessen statt geraten:

  a) `kameraHolen()` wurde beim Host FUENFMAL betreten. Die Wache
     `if (meinStrom) return` wirkt erst, wenn die Kamera DA ist --
     solange die erste Anfrage laeuft, geht jede weitere als zweite
     Anfrage an dasselbe Geraet. Eine blieb liegen, und mit ihr der
     Anruf, der darauf wartete. Der Platz in `ruftGerade` blieb
     belegt, und damit kam nie wieder eine Leitung zustande. Jetzt
     bekommen alle dasselbe Versprechen zurueck.

  b) Der Wachhund riss Leitungen ab, die gerade verhandelt wurden --
     zwischen "Leitung angelegt" und "Angebot abgeschickt" liegen
     drei await.

  c) "Ruf mich an" brach dasselbe ab: Der Bittende weiss nicht, dass
     es schon laeuft, und fragt alle drei Sekunden weiter.

  d) Meine Reparatur von (b) und (c) war "signalingState !== stable
     heisst: in Arbeit" -- ohne Uhr. Damit war eine Leitung, deren
     Antwort nie ankommt, vor BEIDEN Aufraeumwegen sicher, dauerhaft.
     Der Zuschauer bekam daraufhin gar nichts mehr; ich hatte den
     Fehler nur von einer Seite auf die andere geschoben. "Wird
     verhandelt" ist ein Zustand MIT DAUER und steht jetzt an genau
     einer Stelle.

Dazu ein eigener Fehler beim Aufraeumen: Mit der Messspur ist
`ruftGerade` mit herausgefallen. Vier Laeufe ohne jedes Bild -- und
`node --check` sieht das nicht, eine fehlende Variable ist
syntaktisch tadellos.

GEMESSEN

  mess-reaktion   fuenf Laeufe hintereinander ohne Beanstandung;
                  beide Kameras 640 px bei Host UND Zuschauerin,
                  Video laeuft bei beiden, Upload 0,9 Mbit/s,
                  Warteschlange 2 Zeilen mit Vorschaubildern,
                  kein Ueberlauf (4 px statt 197)
  pruef-reaktion  132 Punkte, 0 Fehler (vorher 88)
  pruef-handy     180 Punkte, 0 Fehler
  dazu gruen      css-klassen 33, struktur 35, tippziele 11,
                  meldungen 8, kamera-richtlinie 10

SCHEMA: neue Tabelle `reaktion_liste`, neue Spalte
`reaktion.video_titel` (ALTER TABLE, keine Abschrift der Spalten).

workspace/assets/css/reaktion.css

@@ -213,6 +213,20 @@
   text-wrap: balance;
 }
 .warte__satz { margin: 14px 0 0; color: var(--schrift-leise); font-size: .92rem; }
+/* Was nach dem ersten Stück kommt. Eine Zeile, kein Programmheft --
+   der Abend soll nicht vorher im Netz stehen. */
+.warte__danach {
+  margin: 12px 0 0;
+  display: inline-block;
+  padding: 6px 13px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, .05);
+  border: 1px solid var(--rand);
+  color: var(--schrift-leise);
+  font-size: .78rem;
+  max-width: 100%;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
 
 .countdown {
   display: inline-flex; align-items: baseline; gap: 10px;
@@ -461,7 +475,25 @@
 
 
 /* =====================================================================
-   DAS REGIEPULT
+   DIE REGIE
+
+   Sie ist nach dem Vorbild eines echten Regieplatzes gebaut und
+   nicht nach dem eines Formulars. Drei Dinge machen den Unterschied:
+
+   1. EINE LEISTE, DIE IMMER STEHT. Lampe, Laufzeit, Zahlen und die
+      drei grossen Knoepfe liegen ausserhalb des einklappbaren
+      Teils. Wer mitten in der Sendung „Beenden" drueckt, drueckt es,
+      weil etwas passiert ist -- das darf nicht hinter einer
+      Bewegung liegen.
+
+   2. REGISTER STATT STAPEL. Vorher lagen fuenf Kaesten untereinander
+      in einem Bereich, der hoechstens die halbe Bildschirmhoehe hat.
+      Man sah fuenf halbe Dinge. Jetzt eines ganz.
+
+   3. RUHIGE FLAECHEN. Ein Regieplatz, der selbst leuchtet, kaempft
+      mit dem Bild um die Aufmerksamkeit. Farbe gibt es nur dort, wo
+      sie etwas SAGT: rot heisst auf Sendung, bernstein heisst
+      gleich, alles andere ist grau.
    ===================================================================== */
 /* ==== DAS PULT SCHIEBT, ES DECKT NICHT ZU =========================
    (28.09.2026, gefunden im ersten Bild.)
@@ -475,150 +507,486 @@
    mit `1fr auto`; klappt das Pult auf, wird der Kinosaal darueber
    von selbst kleiner. Nichts wird verdeckt, und niemand muss eine
    Hoehe ausrechnen, die spaeter nicht mehr stimmt. */
-.saal { grid-template-rows: 1fr auto; }
+/* 197 PIXEL ZUM SCROLLEN -- gemessen am 28.09.2026, sobald die Regie
+   aufgeklappt war.
+
+   `1fr` heisst nicht „nimm, was uebrig ist", sondern
+   `minmax(auto, 1fr)`: Die Zeile darf nie kleiner werden als ihr
+   Inhalt. Der Kinosaal hat aber einen Mindestinhalt, und mit
+   aufgeklapptem Pult passte beides nicht mehr in die Hoehe -- also
+   wuchs die Seite nach unten. Wer sendet, scrollte dann mitten in
+   der Sendung, um an das Bild oder an die Knoepfe zu kommen.
+
+   `minmax(0, 1fr)` erlaubt der Zeile zu schrumpfen. Der Kinosaal
+   wird kleiner, der Chat rollt in sich -- was er ohnehin tut. */
+.saal { grid-template-rows: minmax(0, 1fr) auto; }
 
 .pult {
   z-index: 60;
-  background: rgba(7, 6, 13, .94);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 90px),
+    rgba(7, 6, 13, .95);
   backdrop-filter: blur(18px) saturate(1.2);
   -webkit-backdrop-filter: blur(18px) saturate(1.2);
   border-top: 1px solid var(--rand-hell);
   box-shadow: 0 -30px 70px -40px #000;
 }
-.pult__griff {
-  width: 100%;
-  appearance: none; border: 0; background: none;
-  display: flex; align-items: center; justify-content: center; gap: 10px;
-  padding: 9px 0 8px;
-  min-height: 44px;
-  cursor: pointer;
-  color: var(--schrift-leise);
+
+/* ---- Die Leiste, die immer steht ------------------------------------- */
+.pult__leiste {
+  display: flex; align-items: center; flex-wrap: wrap;
+  gap: 10px 16px;
+  padding: 11px 16px;
+  border-bottom: 1px solid var(--rand);
+}
+
+/* Die Lampe. In jedem Studio haengt sie ueber der Tuer, und sie ist
+   dort das Erste, was man sieht -- deshalb steht sie hier ganz
+   links und ist das Einzige, was Farbe traegt. */
+.lampe {
+  display: inline-flex; align-items: center; gap: 9px;
+  padding: 7px 14px 7px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--rand-hell);
+  background: rgba(255, 255, 255, .04);
   font-size: .74rem; font-weight: 800;
-  letter-spacing: .2em; text-transform: uppercase;
+  letter-spacing: .14em; text-transform: uppercase;
+  color: var(--zu);
+  white-space: nowrap;
 }
-.pult__griff-strich {
-  width: 34px; height: 3px; border-radius: 3px;
-  background: var(--rand-hell);
+.lampe__punkt {
+  width: 9px; height: 9px; border-radius: 50%;
+  background: currentColor;
+  flex: none;
 }
+.pult[data-stand="vorbereitung"] .lampe {
+  color: color-mix(in srgb, var(--gleich) 26%, #ffffff);
+  border-color: color-mix(in srgb, var(--gleich) 44%, transparent);
+  background: color-mix(in srgb, var(--gleich) 10%, transparent);
+}
+.pult[data-stand="live"] .lampe {
+  color: #ffe2e4;
+  border-color: color-mix(in srgb, var(--an) 62%, transparent);
+  background: color-mix(in srgb, var(--an) 22%, transparent);
+  box-shadow: 0 0 26px -12px var(--an);
+}
+.pult[data-stand="live"] .lampe__punkt {
+  background: var(--an-hell);
+  box-shadow: 0 0 10px 1px var(--an);
+  animation: lampe-puls 4s ease-in-out infinite;
+}
+/* Vier Sekunden, und nur zwischen zwei nahen Werten. Ein schnelles
+   Blinken waere auf einem dunklen Bild ein Stroboskop. */
+@keyframes lampe-puls {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: .45; }
+}
+
+/* Die Laufzeit. Der Grund, warum in Regieraeumen ueberall Uhren
+   haengen: Ohne sie verschaetzt man sich um Viertelstunden. */
+.laufzeit { display: flex; align-items: baseline; gap: 7px; }
+.laufzeit__zahl {
+  /* Tabellenziffern -- sonst wackelt die Zeile bei jeder Sekunde. */
+  font-variant-numeric: tabular-nums;
+  font-size: 1.06rem; font-weight: 800;
+  letter-spacing: .01em;
+  color: var(--schrift);
+}
+.laufzeit__wort {
+  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
+  color: var(--schrift-leise);
+}
+
+/* Die Zahlen. Vier Werte, jeder in zwei Zeilen -- Wort klein
+   darueber, Zahl gross darunter. So liest man sie im Vorbeisehen. */
+.messwerte {
+  display: flex; flex-wrap: wrap; gap: 4px 18px;
+  margin: 0;
+}
+.messwerte__paar { display: grid; gap: 1px; }
+.messwerte dt {
+  font-size: .72rem; letter-spacing: .06em;
+  color: var(--schrift-leise);
+  white-space: nowrap;
+}
+.messwerte dd {
+  margin: 0;
+  font-size: .95rem; font-weight: 800;
+  font-variant-numeric: tabular-nums;
+  color: var(--schrift);
+}
+/* Wenn die Kameraplaetze voll sind, ist das keine Warnung, sondern
+   eine Tatsache -- aber eine, die man sehen muss, bevor jemand
+   fragt, warum er kein Bild hat. */
+.messwerte dd[data-eng="ja"] { color: color-mix(in srgb, var(--gleich) 22%, #ffffff); }
+.messwerte dd[data-eng="voll"] { color: var(--an-hell); }
+
+/* Die drei Knoepfe. Sie stehen rechts und wachsen in die Luecke --
+   auf einem breiten Schirm liegen sie damit am rechten Rand, auf
+   einem schmalen in einer eigenen Zeile. Keine Schwelle noetig:
+   `flex-wrap` misst, statt zu rechnen. */
+.pult__tun { display: flex; gap: 9px; margin-left: auto; flex-wrap: wrap; }
+.tun {
+  appearance: none; cursor: pointer;
+  min-height: 44px; padding: 0 18px;
+  border-radius: 12px;
+  border: 1px solid var(--rand-hell);
+  background: rgba(255, 255, 255, .05);
+  color: var(--schrift);
+  font-size: .86rem; font-weight: 800;
+  letter-spacing: .01em;
+  white-space: nowrap;
+}
+.tun--vor {
+  border-color: color-mix(in srgb, var(--gleich) 44%, transparent);
+  background: color-mix(in srgb, var(--gleich) 13%, transparent);
+  color: color-mix(in srgb, var(--gleich) 24%, #ffffff);
+}
+.tun--live {
+  border-color: color-mix(in srgb, var(--an) 56%, transparent);
+  background: linear-gradient(180deg,
+    color-mix(in srgb, var(--an) 74%, #000),
+    color-mix(in srgb, var(--an) 46%, #000));
+  color: #fff3f3;
+  box-shadow: 0 14px 30px -20px var(--an);
+}
+.tun--aus { color: var(--schrift-leise); }
+.tun[disabled] { opacity: .38; cursor: default; box-shadow: none; }
+
+.pult__klapp {
+  appearance: none; cursor: pointer;
+  width: 44px; height: 44px;
+  display: grid; place-items: center;
+  border-radius: 12px;
+  border: 1px solid var(--rand);
+  background: rgba(255, 255, 255, .03);
+  color: var(--schrift-leise);
+}
+.pult__klapp svg {
+  width: 20px; height: 20px;
+  fill: none; stroke: currentColor; stroke-width: 2;
+  stroke-linecap: round; stroke-linejoin: round;
+  transition: transform .18s ease;
+}
+.pult[data-auf="ja"] .pult__klapp svg { transform: rotate(180deg); }
+
+/* ---- Der einklappbare Teil ------------------------------------------- */
 .pult__innen {
   display: none;
-  gap: 18px;
-  padding: 4px 18px 18px;
+  gap: 14px;
+  padding: 13px 16px 16px;
   /* Hoechstens die halbe Hoehe -- darueber bleibt vom Saal nichts
      mehr uebrig, und wer sendet, schaut auf das Bild und nicht auf
      die Knoepfe. Was nicht hineinpasst, rollt. */
-  max-height: min(46dvh, 26rem);
+  /* KLEINER ALS DAS BILD. Gemessen mit 46dvh: Kinosaal 372 Pixel,
+     Regie 459 -- die Knoepfe waren groesser als das, worum es geht.
+     Mit 19rem bleibt das Bild der groessere Teil, und die
+     Sendungs-Tafel (264 Pixel) passt trotzdem ohne Rollen hinein. */
+  max-height: min(40dvh, 19rem);
   overflow-y: auto;
 }
 .pult[data-auf="ja"] .pult__innen { display: grid; }
 
-.pult__block {
-  display: grid; gap: 10px;
-  padding: 14px 15px 15px;
-  border-radius: 14px;
-  background: rgba(255, 255, 255, .03);
+/* ---- Die Register ----------------------------------------------------- */
+.reiter {
+  display: flex; gap: 4px; flex-wrap: wrap;
+  padding: 4px;
+  border-radius: 13px;
+  background: rgba(0, 0, 0, .35);
   border: 1px solid var(--rand);
 }
-.pult__ueber {
-  margin: 0;
-  font-size: .74rem; font-weight: 800;
-  letter-spacing: .2em; text-transform: uppercase;
+.reiter__knopf {
+  appearance: none; cursor: pointer;
+  display: inline-flex; align-items: center; gap: 7px;
+  min-height: 38px; padding: 0 14px;
+  border: 0; border-radius: 10px;
+  background: none;
   color: var(--schrift-leise);
-  display: flex; align-items: baseline; gap: 10px;
+  font-size: .82rem; font-weight: 700;
 }
-.pult__klein { font-size: .72rem; letter-spacing: .04em; text-transform: none; opacity: .8; }
-.pult__zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
-.pult__feld { display: grid; gap: 5px; flex: 1 1 14rem; min-width: 0; }
-.pult__feld--kurz { flex: 0 1 12rem; }
-.pult__feld > span {
-  font-size: .72rem; font-weight: 700;
-  color: var(--schrift-leise); letter-spacing: .04em;
+.reiter__knopf[aria-selected="true"] {
+  background: rgba(255, 255, 255, .08);
+  color: var(--schrift);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
 }
-.pult__feld input, .pult__wahl {
-  appearance: none;
-  padding: 10px 12px; min-height: 44px;
+.reiter__zahl {
+  min-width: 20px; padding: 1px 6px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, .09);
+  font-size: .72rem; font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+.reiter__zahl[data-leer="ja"] { opacity: .45; }
+
+.pult-tafel { display: grid; gap: 12px; align-content: start; }
+/* AUSDRUECKLICH. `display: grid` auf einer Klasse schlaegt die
+   eingebaute Regel `[hidden] { display: none }` des Browsers --
+   je nach Browser und Reihenfolge. Genau so ist in dieser Datei
+   schon einmal eine Chatschiene aufgegangen, die zu sein sollte.
+   Eine Zeile ist billiger als die Frage, wer gewinnt. */
+.pult-tafel[hidden] { display: none; }
+
+/* ---- Die Videospur ----------------------------------------------------
+   Vorher gab es fuer das laufende Video im Pult ueberhaupt keine
+   Bedienung. Wer spulen wollte, musste in das YouTube-Bild fassen --
+   und was dort passiert, passiert nur bei einem selbst, waehrend
+   alle anderen weiterlaufen.
+   --------------------------------------------------------------------- */
+.spur {
+  display: grid; gap: 11px;
+  padding: 13px 14px 14px;
+  border-radius: 14px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
+  border: 1px solid var(--rand);
+}
+.spur__kopf { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
+.spur__marke {
+  flex: none;
+  padding: 3px 9px;
+  border-radius: 7px;
+  border: 1px solid var(--rand);
+  background: rgba(255, 255, 255, .05);
+  font-size: .72rem; font-weight: 800;
+  letter-spacing: .1em; text-transform: uppercase;
+  color: var(--schrift-leise);
+}
+.spur[data-laeuft="ja"] .spur__marke {
+  color: #ffe2e4;
+  border-color: color-mix(in srgb, var(--an) 50%, transparent);
+  background: color-mix(in srgb, var(--an) 18%, transparent);
+}
+.spur__titel {
+  min-width: 0;
+  font-size: .94rem; font-weight: 700;
+  color: var(--schrift);
+  /* Ein Videotitel kann sehr lang sein. Eine Zeile mit Auslassung
+     ist hier richtig: Die Spur soll nicht wachsen, nur weil jemand
+     ein Video mit langem Namen eingetragen hat. */
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.spur__titel[data-roh="ja"] {
+  color: var(--schrift-leise);
+  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
+  font-size: .82rem;
+}
+.spur__band { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
+.spur__knopf {
+  appearance: none; cursor: pointer;
+  min-height: 40px; min-width: 44px; padding: 0 12px;
   border-radius: 11px;
   border: 1px solid var(--rand);
-  background: rgba(255, 255, 255, .04);
-  color: var(--schrift); font: inherit; font-size: .88rem;
-  min-width: 0;
+  background: rgba(255, 255, 255, .05);
+  color: var(--schrift);
+  font-size: .8rem; font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+}
+.spur__knopf--gross {
+  min-width: 52px;
+  background: rgba(255, 255, 255, .1);
+}
+.spur__knopf--gross svg { width: 18px; height: 18px; fill: currentColor; }
+.spur__knopf--weiter {
+  border-color: rgba(154, 183, 255, .34);
+  background: rgba(154, 183, 255, .12);
+  color: #cfe0ff;
+}
+.spur__knopf[disabled] { opacity: .35; cursor: default; }
+.spur__zeit {
+  font-size: .78rem; font-variant-numeric: tabular-nums;
+  color: var(--schrift-leise);
+  white-space: nowrap;
+}
+.spur__schiene {
+  appearance: none; -webkit-appearance: none;
+  flex: 1 1 10rem; min-width: 8rem;
+  height: 30px; background: none; cursor: pointer;
+}
+.spur__schiene::-webkit-slider-runnable-track {
+  height: 5px; border-radius: 3px;
+  background: linear-gradient(90deg, var(--an) var(--fortschritt, 0%),
+    rgba(255, 255, 255, .12) var(--fortschritt, 0%));
+}
+.spur__schiene::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 15px; height: 15px; margin-top: -5px;
+  border-radius: 50%;
+  background: #f4f1fb;
+  border: 1px solid rgba(0, 0, 0, .4);
+}
+.spur__schiene::-moz-range-track {
+  height: 5px; border-radius: 3px;
+  background: rgba(255, 255, 255, .12);
+}
+.spur__schiene::-moz-range-progress {
+  height: 5px; border-radius: 3px; background: var(--an);
+}
+.spur__schiene::-moz-range-thumb {
+  width: 15px; height: 15px; border-radius: 50%;
+  background: #f4f1fb; border: 1px solid rgba(0, 0, 0, .4);
 }
-.pult__wahl { flex: 1 1 12rem; }
 
-/* ---- Die Regler ------------------------------------------------------
-   Vier Tonquellen nebeneinander: Host, Gast 1, Gast 2, YouTube. Sie
-   stehen SENKRECHT wie an einem Mischpult und nicht waagerecht wie
-   ein Formularregler -- vier waagerechte Regler untereinander liest
-   man als Liste, vier senkrechte nebeneinander sieht man auf einen
-   Blick.
-   --------------------------------------------------------------------- */
-.regler-reihe { display: flex; gap: 12px; flex-wrap: wrap; }
-.regler {
-  display: grid; justify-items: center; gap: 8px;
-  padding: 12px 10px 10px;
+/* ---- Die Warteschlange ------------------------------------------------ */
+.warteliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
+.warte-zeile {
+  display: flex; align-items: center; gap: 10px;
+  padding: 7px 9px 7px 7px;
   border-radius: 12px;
-  background: rgba(0, 0, 0, .3);
   border: 1px solid var(--rand);
-  min-width: 5.4rem;
+  background: rgba(255, 255, 255, .03);
+}
+.warte-zeile__nr {
+  flex: none;
+  width: 22px; text-align: center;
+  font-size: .78rem; font-weight: 800;
+  font-variant-numeric: tabular-nums;
+  color: var(--schrift-leise);
+}
+/* Das Vorschaubild kommt von YouTube selbst -- ohne es sind zehn
+   Zeilen Text kaum auseinanderzuhalten. */
+.warte-zeile__bild {
+  flex: none;
+  width: 68px; aspect-ratio: 16 / 9;
+  border-radius: 7px; object-fit: cover;
+  background: #12101a;
+  border: 1px solid var(--rand);
+}
+.warte-zeile__titel {
+  flex: 1 1 8rem; min-width: 0;
+  font-size: .84rem; color: var(--schrift);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.warte-zeile__titel[data-roh="ja"] {
+  color: var(--schrift-leise);
+  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
+  font-size: .78rem;
+}
+.warte-zeile__knoepfe { display: flex; gap: 5px; flex: none; }
+.warte-zeile__knoepfe button {
+  appearance: none; cursor: pointer;
+  min-height: 34px; min-width: 34px; padding: 0 9px;
+  border-radius: 9px;
+  border: 1px solid var(--rand);
+  background: rgba(255, 255, 255, .04);
+  color: var(--schrift-leise);
+  font-size: .78rem; font-weight: 700;
+}
+.warte-zeile__knoepfe button[data-was="jetzt"] {
+  border-color: rgba(154, 183, 255, .34);
+  color: #cfe0ff;
+}
+.warte-zeile__knoepfe button[disabled] { opacity: .3; cursor: default; }
+.warte-leer {
+  margin: 0; padding: 14px 4px;
+  font-size: .82rem; color: var(--schrift-leise);
+}
+
+/* ---- Die Regler -------------------------------------------------------
+   Senkrecht, nebeneinander, mit Pegel daneben. Ein Mischpult sieht
+   so aus, und das ist kein Zitat: Vier waagerechte Regler
+   untereinander liest man als Formular, vier senkrechte nebeneinander
+   als EINEN Zustand.
+
+   DER PEGEL IST DAS EIGENTLICHE. Er beantwortet die Frage, die man
+   sich sonst erst nach der Sendung stellt: „War mein Mikro
+   ueberhaupt an?" Ein Regler auf 100 sagt darueber nichts.
+   --------------------------------------------------------------------- */
+.regler-reihe { display: flex; gap: 10px; flex-wrap: wrap; }
+.regler {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-areas: "wort wort" "schieber pegel" "zahl zahl" "stumm stumm";
+  justify-items: center; align-items: center;
+  gap: 7px 6px;
+  padding: 11px 11px 10px;
+  border-radius: 13px;
+  border: 1px solid var(--rand);
+  background: rgba(255, 255, 255, .03);
 }
 .regler__wort {
-  font-size: .74rem; font-weight: 800;
-  letter-spacing: .08em; text-transform: uppercase;
+  grid-area: wort;
+  font-size: .72rem; font-weight: 800;
+  letter-spacing: .05em;
   color: var(--schrift-leise);
-  max-width: 5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  white-space: nowrap;
 }
 .regler input[type="range"] {
+  grid-area: schieber;
   appearance: none; -webkit-appearance: none;
-  writing-mode: vertical-lr;
-  direction: rtl;
-  width: 26px; height: 104px;
-  background: none;
+  writing-mode: vertical-lr; direction: rtl;
+  width: 26px; height: 92px;
+  background: none; cursor: pointer;
 }
+/* DER FADER IST GRAU, DER PEGEL IST FARBIG -- so herum, und nicht
+   umgekehrt. Ein roter Fader steht bei jedem auf 100 und schreit
+   dauerhaft „Achtung", ohne etwas zu sagen. Die Farbe gehoert
+   dorthin, wo sie eine Auskunft ist: an den gemessenen Ausschlag. */
 .regler input[type="range"]::-webkit-slider-runnable-track {
-  width: 6px; border-radius: 6px;
-  background: linear-gradient(180deg, var(--an), #3a3550);
+  width: 5px; border-radius: 3px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .08));
 }
 .regler input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
-  width: 22px; height: 14px; border-radius: 4px;
-  background: #e9e6f2;
-  border: 1px solid #0b0a12;
-  box-shadow: 0 2px 8px -2px #000;
-  margin-left: -8px;
+  width: 22px; height: 13px; margin-left: -9px;
+  border-radius: 4px;
+  background: linear-gradient(180deg, #f6f3fc, #b9b3cc);
+  border: 1px solid rgba(0, 0, 0, .45);
 }
 .regler input[type="range"]::-moz-range-track {
-  width: 6px; border-radius: 6px;
-  background: linear-gradient(180deg, var(--an), #3a3550);
+  width: 5px; border-radius: 3px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .08));
 }
 .regler input[type="range"]::-moz-range-thumb {
-  width: 22px; height: 14px; border-radius: 4px;
-  background: #e9e6f2; border: 1px solid #0b0a12;
+  width: 22px; height: 13px; border-radius: 4px;
+  background: linear-gradient(180deg, #f6f3fc, #b9b3cc);
+  border: 1px solid rgba(0, 0, 0, .45);
 }
+
+/* Der Pegel. Er waechst von unten und faellt langsam zurueck --
+   ein Balken, der sofort abfaellt, flackert und ist unlesbar. */
+.pegel {
+  grid-area: pegel;
+  position: relative;
+  width: 7px; height: 92px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, .07);
+  overflow: hidden;
+}
+.pegel i {
+  position: absolute; left: 0; right: 0; bottom: 0;
+  height: var(--stand, 0%);
+  border-radius: 4px;
+  background: linear-gradient(0deg, #4fb27a 0%, #4fb27a 62%, var(--gleich) 84%, var(--an) 100%);
+  transition: height .09s linear;
+}
+.pegel[data-still="ja"] i { background: rgba(255, 255, 255, .16); }
 .regler__zahl {
-  font-size: .72rem; font-variant-numeric: tabular-nums;
+  grid-area: zahl;
+  font-size: .74rem; font-variant-numeric: tabular-nums;
   color: var(--schrift-leise);
 }
 .regler__stumm {
+  grid-area: stumm;
   appearance: none; cursor: pointer;
-  min-height: 30px; padding: 4px 10px;
-  border-radius: 8px;
+  width: 100%; min-height: 32px; padding: 0 9px;
+  border-radius: 9px;
   border: 1px solid var(--rand);
   background: rgba(255, 255, 255, .04);
   color: var(--schrift-leise);
-  font-size: .72rem; font-weight: 700;
+  font-size: .74rem; font-weight: 700;
 }
 .regler[data-stumm="ja"] .regler__stumm {
   background: color-mix(in srgb, var(--an) 30%, transparent);
   border-color: color-mix(in srgb, var(--an) 50%, transparent);
-  color: #ffd9db;
+  color: #ffe2e4;
 }
 
 /* ---- Gäste ----------------------------------------------------------- */
 .gast-reihe { display: flex; flex-wrap: wrap; gap: 9px; }
 .gast-karte {
   display: flex; align-items: center; gap: 9px;
-  padding: 8px 10px 8px 12px;
-  border-radius: 999px;
+  padding: 8px 9px 8px 12px;
+  border-radius: 12px;
   background: rgba(255, 255, 255, .04);
   border: 1px solid var(--rand);
   font-size: .82rem; color: var(--schrift);
@@ -629,14 +997,14 @@
 }
 .gast-karte button {
   appearance: none; cursor: pointer;
-  min-width: 34px; min-height: 34px;
-  border-radius: 999px;
+  min-height: 32px; padding: 0 10px;
+  border-radius: 9px;
   border: 1px solid var(--rand);
-  background: rgba(255, 255, 255, .05);
+  background: rgba(255, 255, 255, .04);
   color: var(--schrift-leise);
-  font-size: .72rem; font-weight: 700;
+  font-size: .74rem; font-weight: 700;
 }
-.gast-leer { font-size: .8rem; color: var(--schrift-leise); }
+.gast-leer { font-size: .8rem; color: var(--schrift-leise); margin: 0; }
 
 /* ---- Anordnung ------------------------------------------------------- */
 .layout-reihe { display: flex; gap: 9px; flex-wrap: wrap; }
@@ -655,35 +1023,55 @@
   color: #cfe0ff;
 }
 
-/* ---- Die drei großen Knöpfe ------------------------------------------ */
-.pult__block--tun {
-  display: flex; flex-wrap: wrap; gap: 10px;
-  background: none; border: 0; padding: 0;
+/* ---- Die Kürzel ------------------------------------------------------- */
+.kuerzel {
+  margin: 0;
+  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
+  font-size: .72rem; color: var(--schrift-leise);
 }
-.tun {
-  appearance: none; cursor: pointer;
-  flex: 1 1 10rem;
-  min-height: 52px;
-  border-radius: 14px;
+.kuerzel kbd {
+  display: inline-block;
+  padding: 1px 6px; margin-right: 2px;
+  border-radius: 6px;
   border: 1px solid var(--rand-hell);
+  border-bottom-width: 2px;
   background: rgba(255, 255, 255, .05);
+  font-family: inherit; font-size: .72rem; font-weight: 700;
   color: var(--schrift);
-  font-size: .94rem; font-weight: 800;
-  letter-spacing: .01em;
 }
-.tun--vor {
-  border-color: color-mix(in srgb, var(--gleich) 44%, transparent);
-  background: color-mix(in srgb, var(--gleich) 14%, transparent);
-  color: color-mix(in srgb, var(--gleich) 24%, #ffffff);
+
+/* ---- Felder im Pult --------------------------------------------------- */
+.pult__block {
+  display: grid; gap: 10px;
+  padding: 13px 14px 14px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, .03);
+  border: 1px solid var(--rand);
 }
-.tun--live {
-  border-color: color-mix(in srgb, var(--an) 56%, transparent);
-  background: linear-gradient(180deg, color-mix(in srgb, var(--an) 74%, #000), color-mix(in srgb, var(--an) 46%, #000));
-  color: #fff3f3;
-  box-shadow: 0 16px 34px -20px var(--an);
+.pult__ueber {
+  margin: 0;
+  display: flex; align-items: baseline; gap: 9px;
+  font-size: .74rem; font-weight: 800;
+  letter-spacing: .12em; text-transform: uppercase;
+  color: var(--schrift-leise);
 }
-.tun--aus { color: var(--schrift-leise); }
-.tun[disabled] { opacity: .4; cursor: default; }
+.pult__klein { margin: 0; font-size: .72rem; letter-spacing: .02em; text-transform: none; opacity: .85; }
+.pult__zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
+.pult__feld { display: grid; gap: 5px; flex: 1 1 14rem; min-width: 0; }
+.pult__feld--kurz { flex: 0 1 12rem; }
+.pult__feld > span {
+  font-size: .72rem; font-weight: 700;
+  color: var(--schrift-leise); letter-spacing: .04em;
+}
+.pult__feld input, .pult__wahl {
+  min-height: 44px; padding: 0 12px;
+  border-radius: 11px;
+  border: 1px solid var(--rand);
+  background: rgba(0, 0, 0, .34);
+  color: var(--schrift); font: inherit; font-size: .88rem;
+  min-width: 0;
+}
+.pult__wahl { flex: 1 1 12rem; }
 
 /* =====================================================================
    DAS HANDY
@@ -740,7 +1128,13 @@
   .buehne-schild {
     top: 8px;
     padding: 5px 11px 6px;
-    font-size: .64rem;
+    /* NICHT KLEINER ALS .72rem -- das sind 11,52 px, die Untergrenze
+       des Hauses. Gemessen wurden hier .64rem = 10,24 px. Den Platz
+       holt sich die engere Sperrung zurueck: Bei Grossbuchstaben
+       kostet .14em Abstand mehr Breite als die zwei fehlenden
+       Zehntel Schriftgroesse. */
+    font-size: .72rem;
+    letter-spacing: .06em;
     gap: 7px;
     white-space: nowrap;
   }
@@ -758,12 +1152,35 @@
 
   .warte__buehne { gap: 18px; }
   .pult__innen { max-height: 62dvh; }
+
+  /* ==== DIE REGIE AM HANDY ======================================
+     Die Leiste bleibt -- sie ist der Teil, den man im Notfall
+     braucht. Sie wird nur kleiner und legt die Knöpfe in eine
+     eigene Zeile, sobald es eng wird. Das macht `flex-wrap` von
+     selbst; hier steht nur, was dabei schrumpfen darf. */
+  .pult__leiste { gap: 8px 12px; padding: 9px 12px; }
+  .messwerte { gap: 3px 13px; }
+  .messwerte dd { font-size: .88rem; }
+  .laufzeit__zahl { font-size: .98rem; }
+  .tun { padding: 0 13px; font-size: .8rem; }
+  .pult__innen { padding: 11px 12px 14px; }
+  /* Die Register rollen waagerecht statt umzubrechen: Fünf Reiter in
+     zwei Zeilen sehen aus wie zehn Knöpfe. */
+  .reiter { flex-wrap: nowrap; overflow-x: auto; }
+  .reiter__knopf { white-space: nowrap; }
+  .regler-reihe { gap: 8px; }
+  .regler { padding: 9px 9px 8px; }
+  .regler input[type="range"], .pegel { height: 76px; }
+  .warte-zeile__bild { width: 54px; }
 }
 
 /* Wer weniger Bewegung eingestellt hat, bekommt keinen Puls. Die
    Aussage bleibt -- der Punkt steht dann einfach da. */
 @media (prefers-reduced-motion: reduce) {
-  .buehne-schild__punkt { animation: none !important; }
+  .buehne-schild__punkt,
+  .lampe__punkt { animation: none !important; }
+  .pult__klapp svg,
+  .pegel i { transition: none !important; }
 }
 
 /* ---- Der Ton-Knopf ---------------------------------------------------