Reaction: Material statt Kaesten, Spende in der Mitte, Gaeste werden gefragt

Nach Filipes sieben Bildschirmfotos vom 07.10.2026. Sieben Wuensche,
und einer davon ("alles viel hochwertiger") betrifft alle anderen --
deshalb steht das Fundament zuerst und nicht am Ende.

DAS AUSSEHEN HAT EINEN WERKSTOFF. Jede Flaeche sagt jetzt, ob sie oben
oder unten liegt: Was obenauf liegt, bekommt oben eine helle Kante und
darunter einen Schatten; was vertieft ist, genau umgekehrt. Dazwischen
gibt es nichts mehr. Vorher stand im ganzen Pult zweimal eine
Lichtkante und sonst nirgends -- genau deshalb sahen diese zwei Stellen
gut aus und alles daneben danebengestellt. Dazu: jeder Knopf senkt sich
beim Druecken, jedes Feld ist ein Loch und kein Kasten, und wer mit der
Tastatur bedient, wird zum ersten Mal ueberhaupt gesehen.

UND EIN FUND DABEI: Die drei Kacheln des Regieplatzes hiessen in der
HTML anders als im Stilblatt (kachel--laeuft gegen regiekachel--laeuft,
regieregiekachel__kopf gegen regiekachel__kopf). Die Aufteilung "links
was laeuft, rechts was man eintraegt" hat damit NIE gegriffen -- und
mess-reaktion hat den falschen Zustand gemessen und gruen gemeldet,
weil sie gegen die HTML geschrieben war.

DIE SPENDENKARTE STEHT IN DER MITTE und kommt aus der Tiefe nach vorn.
Das dreht eine Entscheidung vom 28.09. um ("sie deckt nie die Mitte
zu"); die Begruendung war richtig und ist es noch -- sie schuetzt das
Video, und Filipe sieht die Spende als das, was in dem Augenblick
zaehlt. Der alte Platz bleibt einen Knopf weit weg und gilt fuer Saal
UND OBS-Tafel. Die Karte besteht dafuer aus zwei Teilen: `opacity`
unter 1 zwingt ein Element auf `transform-style: flat`, eine Karte mit
Deckkraft-Uebergang waere also genau waehrend des Hereinkommens flach
und spraenge am Ende in einem Bild in die Tiefe.

FERTIGE SAETZE GEHEN SOFORT INS BILD. Der Browser schickt nur die
Kennung, den Text holt der Server -- deshalb darf hier die Bestaetigung
entfallen und beim freien Text nicht. Zwei Schranken bleiben: sofort
nur mit einem der vier Knopfbetraege (Filipes Ansage galt dem SATZ,
nicht der Summe), und GEZEIGT IST NICHT GEBUCHT -- die Dogen gibt es
erst nach dem Tipp der Leitung, sonst stellt sich jeder seine eigene
Waehrung aus.

WER GESPENDET HAT, GLAENZT IM CHAT -- je nach Hoehe. Die Dauer haengt
an der Stufe und nicht an einer zweiten Leiter; 0 heisst "gar nicht".

GAESTE WERDEN GEFRAGT, NICHT GEHOLT. Vorher sprang die Kamera eines
Zuschauers an, sobald jemand "Dazuholen" drueckte -- er hat es daran
gemerkt, dass er sich selbst sah. Jetzt gibt es einen Vorraum: eigenes
Bild, Pegel, Kamera und Mikro vorwaehlen, Geraete waehlen, dann "Dabei
sein" oder "Lieber nicht". Zwei Minuten Frist, und sie verfaellt
SICHTBAR -- eine verschwundene Zeile sieht fuer den Host aus wie ein
Verklicker.

DAS MISCHPULT. Hier stand fest `echoCancellation: true,
noiseSuppression: true`. Fuer ein Laptopmikrofon richtig, ueber einem
RODECaster falsch: Das Pult hat Gate, Kompressor und EQ schon gemacht,
und die Echo-Unterdrueckung legt sich danach als zweite Automatik
darueber und duckt, sobald von der Gegenseite Ton kommt -- genau das
Pumpen vom 14.09. Jetzt: Geraetewahl fuer Mikro, Kamera und Ausgabe
(auch fuer Gaeste), ein Pultmodus, und darunter GEMESSEN, was wirklich
ankommt. Mit und ohne Pult.

DAS ZWEITE VIDEO war nie gesperrt -- es war nur unsichtbar. Jetzt
stehen Vorschaubild, Titel und die gemerkte Stelle da, "Jetzt wechseln"
auch von hier aus, und aus der Warteschlange legt ein Knopf eines
bereit.

UND EIN FUND AUF DEM BILDSCHIRMFOTO: Das Band "Ton einschalten" lag auf
derselben Hoehe wie die Senderleiste. Bei vier Knoepfen reichte die
Leiste bis zur Mitte -- vom Mikro-Knopf war nur noch ein "t" zu sehen.
Das war schon vorher so; der fuenfte Knopf hat es sichtbar gemacht.
Dieselbe Lehre wie am 06.09.: keine neue Zahl suchen, sondern die
Begegnung unmoeglich machen. mess-reaktion misst das jetzt als
UEBERLAPPUNG.

GEPRUEFT: pruef-reaktion 423 -> 478 (0 Fehler), pruef-spenden 172 -> 215
(0), pruef-reaktion-schmal 44 (0), pruef-tippziele 13 (0), dazu gruen:
pruef-css-klassen, pruef-alle-wege, pruef-haus-trennung, pruef-agentur,
pruef-deutsche-texte. Keine Zahl ist gefallen.

Drei Doppelungen hat erst das Pruefen gefunden: `satz_unbekannt` gab es
zweimal (Muenzsatz), `saetze` im Spendenstand war belegt (ebenfalls
Muenzsaetze), und `glanz_minuten` waere in einem frischen Haus immer 0
geblieben -- die Spalte kam per ALTER TABLE, und das laeuft VOR dem
Anlegen der Werksstufen.

Co-Authored-By: Claude Opus 5 <[email protected]>

workspace/reaktion.html

@@ -7,15 +7,15 @@
 <meta name="robots" content="noindex, nofollow" />
 <link rel="manifest" href="/workspace/app.webmanifest" />
 <meta name="theme-color" content="#06090f" />
-<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202610072346" />
-<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202610072346" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202610072346" />
-<link rel="stylesheet" href="assets/css/start.css?v=202610072346" />
-<link rel="stylesheet" href="assets/css/reaktion.css?v=202610072346" />
-<link rel="stylesheet" href="assets/css/spendenkarte.css?v=202610072346" />
-<link rel="stylesheet" href="assets/css/werbung.css?v=202610072346" />
-<link rel="stylesheet" href="assets/css/module.css?v=202610072346" />
-<link rel="stylesheet" href="assets/css/haus.css?v=202610072346" />
+<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202610080131" />
+<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202610080131" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202610080131" />
+<link rel="stylesheet" href="assets/css/start.css?v=202610080131" />
+<link rel="stylesheet" href="assets/css/reaktion.css?v=202610080131" />
+<link rel="stylesheet" href="assets/css/spendenkarte.css?v=202610080131" />
+<link rel="stylesheet" href="assets/css/werbung.css?v=202610080131" />
+<link rel="stylesheet" href="assets/css/module.css?v=202610080131" />
+<link rel="stylesheet" href="assets/css/haus.css?v=202610080131" />
 </head>
 
 <body class="start reaktion-seite" data-stand="laedt">
@@ -270,6 +270,29 @@
             <span id="s-mikro-wort">Mikro</span><kbd class="sender-taste">M</kbd>
           </button>
           <span class="sender-pegel" id="s-pegel" aria-hidden="true"><i></i></span>
+          <!-- ==== GERÄTE AUCH FÜR GÄSTE (08.10.2026) ============
+               Filipe: „auch bei den gästen."
+
+               Das Regiepult sehen nur die zwei, die die Sendung
+               führen — ein Gast käme also nach dem Vorraum nie mehr
+               an seine Gerätewahl. Genau dann braucht er sie aber:
+               wenn mitten in der Sendung auffällt, dass der falsche
+               Weg läuft. Der Knopf steht deshalb in der
+               Senderleiste, bei Kamera und Mikro, denn er gehört zu
+               derselben Frage.
+
+               Er steht auch beim Host da. Zwei Wege zur selben
+               Einstellung sind hier kein Widerspruch, sondern
+               derselbe Bauplan an zwei Griffen — dahinter liegt
+               dieselbe Funktion. -->
+          <button type="button" class="sender-knopf sender-knopf--klein" id="s-geraete"
+                  title="Mikrofon, Kamera und Mischpult">
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M5 4v16M12 4v16M19 4v16" />
+              <path d="M2.5 9.5h5M9.5 14.5h5M16.5 7.5h5" />
+            </svg>
+            <span class="sender-knopf__wort">Geräte</span>
+          </button>
         </div>
 
         <button type="button" class="ton-an" id="ton-an" hidden>
@@ -365,8 +388,26 @@
               <input type="text" id="geben-name" maxlength="40"
                      autocomplete="off" placeholder="So wie du dastehen willst" />
             </label>
+
+            <!-- ==== DIE FERTIGEN SÄTZE (08.10.2026) ===============
+                 Filipe: „es soll fertige sätze geben und wenn jemand
+                 die auswählt muss keiner es bestätigen dan wird es
+                 sofort angezeigt und wenn jemand selber was schreibt
+                 dan muss bestätigt werden damit es angezeigt wird."
+
+                 SIE STEHEN VOR DEM FREIEN FELD und nicht daneben.
+                 Das ist der ganze Punkt: Der schnelle Weg soll der
+                 naheliegende sein. Wer tippen will, tippt darunter
+                 weiter — nur dauert es dann, bis es im Bild steht,
+                 und genau das steht auch dort. -->
+            <div class="geben__saetze" id="geben-saetze" hidden>
+              <span class="geben__saetze-wort">Ein fertiger Satz — steht sofort im Bild</span>
+              <div class="geben__satzreihe" id="geben-satzreihe" role="group"
+                   aria-label="Fertige Sätze"></div>
+            </div>
+
             <label class="geben__feld">
-              <span>Dein Text <span class="geben__rest" id="geben-rest"></span></span>
+              <span>Oder selbst schreiben <span class="geben__rest" id="geben-rest"></span></span>
               <textarea id="geben-text" rows="2" maxlength="140"
                         placeholder="Was soll im Bild stehen?"></textarea>
             </label>
@@ -477,9 +518,9 @@
                auch bevor etwas eingetragen ist. Vorher stand hier
                nur ein Titel, und wenn keiner da war, ein schwarzes
                Loch neben einer vollen Spalte. -->
-          <section class="regiekachel kachel--laeuft" id="spur">
-            <div class="regieregiekachel__kopf">
-              <h4 class="regieregiekachel__ueber">Was läuft</h4>
+          <section class="regiekachel regiekachel--laeuft" id="spur">
+            <div class="regiekachel__kopf">
+              <h4 class="regiekachel__ueber">Was läuft</h4>
               <span class="spur__marke" id="spur-marke">Läuft</span>
             </div>
 
@@ -498,15 +539,15 @@
           </section>
 
           <!-- ==== RECHTS OBEN: DIE SENDUNG ==================== -->
-          <section class="regiekachel kachel--sendung">
-            <div class="regieregiekachel__kopf">
-              <h4 class="regieregiekachel__ueber">Die Sendung</h4>
+          <section class="regiekachel regiekachel--sendung">
+            <div class="regiekachel__kopf">
+              <h4 class="regiekachel__ueber">Die Sendung</h4>
             </div>
             <label class="pult__feld">
               <span>Titel der Sendung</span>
               <input type="text" id="p-titel" maxlength="120" placeholder="Worum geht es?" />
             </label>
-            <div class="regieregiekachel__paar">
+            <div class="regiekachel__paar">
               <label class="pult__feld">
                 <span>YouTube</span>
                 <input type="text" id="p-video" placeholder="Adresse oder Kennung" />
@@ -516,6 +557,18 @@
                 <input type="datetime-local" id="p-beginn" />
               </label>
             </div>
+            <!-- ==== DAS VORSCHAUBILD GEHÖRT ZUR SENDUNG ========
+                 Es stand bis zum 08.10.2026 unter „Bereitlegen",
+                 direkt neben dem zweiten Video — und sah damit aus,
+                 als gehöre es dazu. Es ist aber das Bild der
+                 WARTETAFEL, also eine Eigenschaft dieser Sendung wie
+                 Titel und Beginn. Zwei Felder nebeneinander, von
+                 denen eines etwas ganz anderes meint, sind eine
+                 Falle, die man nur einmal braucht. -->
+            <label class="pult__feld">
+              <span>Vorschaubild (freiwillig)</span>
+              <input type="text" id="p-vorschau" placeholder="Adresse eines Bildes" />
+            </label>
             <div class="pult__zeile pult__zeile--ende">
               <button type="button" class="knopf-still knopf-still--haupt"
                       id="p-sichern">Übernehmen</button>
@@ -523,22 +576,47 @@
           </section>
 
           <!-- ==== RECHTS UNTEN: BEREITLEGEN =================== -->
-          <section class="regiekachel kachel--bereit">
-            <div class="regieregiekachel__kopf">
-              <h4 class="regieregiekachel__ueber">Bereitlegen</h4>
+          <section class="regiekachel regiekachel--bereit">
+            <div class="regiekachel__kopf">
+              <h4 class="regiekachel__ueber">Bereitlegen</h4>
             </div>
-            <div class="regieregiekachel__paar">
-              <label class="pult__feld">
-                <span>Zweites Video</span>
-                <input type="text" id="p-zweit" placeholder="Adresse — leer räumt es weg" />
-              </label>
-              <label class="pult__feld">
-                <span>Vorschaubild</span>
-                <input type="text" id="p-vorschau" placeholder="Adresse eines Bildes" />
-              </label>
+            <!-- ==== WAS BEREITLIEGT, SIEHT MAN JETZT (08.10.2026)
+                 Filipe: „perfektioniere das ganze system auch für das
+                 zweite video. auch so dass ich während einer sendung
+                 auch immer ein zweites vorbereiten kann oder ändern
+                 kann."
+
+                 Vorher stand hier nur ein Textfeld mit einer
+                 YouTube-Kennung darin. Ob das Richtige bereitlag,
+                 wusste man erst nach dem Umschalten — also vor
+                 Publikum. Jetzt stehen Bild, Titel und die GEMERKTE
+                 STELLE da, und die ist der eigentliche Grund für das
+                 zweite Video: Man schaltet mittendrin weg und später
+                 dort weiter. -->
+            <div class="laufbild" id="zweitbild" data-bild="nein">
+              <img id="zweit-bild" alt="" />
+              <span class="laufbild__leer" id="zweit-leer">
+                Noch kein zweites Video — trag unten eine Adresse ein
+                oder nimm eines aus der Warteschlange.
+              </span>
+              <span class="laufbild__stelle" id="zweit-stelle" hidden></span>
             </div>
+            <strong class="spur__titel" id="zweit-titel">Nichts bereitgelegt</strong>
+
+            <label class="pult__feld">
+              <span>Zweites Video</span>
+              <input type="text" id="p-zweit" placeholder="Adresse — leer räumt es weg" />
+            </label>
             <div class="pult__zeile pult__zeile--ende">
               <button type="button" class="knopf-still" id="p-zweit-sichern">Bereitlegen</button>
+              <!-- Derselbe Tausch wie in der Transportleiste, nur von
+                   hier aus. Er steht an BEIDEN Stellen, weil man ihn
+                   an beiden braucht: unten, während man sendet, und
+                   hier, während man einrichtet. Dahinter liegt
+                   dieselbe Funktion — zwei wären zwei, die
+                   auseinanderlaufen. -->
+              <button type="button" class="knopf-still" id="p-zweit-tausch"
+                      disabled>Jetzt wechseln</button>
               <!-- ==== ALLES ZURÜCKSETZEN ====================
                    Filipe: „brauch ich auch noch einen button wo ich
                    alles easy zurücksetzen kann."
@@ -577,6 +655,21 @@
                id="tafel-ton" aria-labelledby="reiter-ton">
         <div class="regler-reihe" id="regler"></div>
         <p class="pult__klein" id="ton-hinweis"></p>
+
+        <!-- ==== DIE GERÄTE (08.10.2026) ========================
+             Filipe: „ich will dass du das auch mit meinem
+             mischpult, also meinen rodeduo verbindest. also soll
+             mit und ohne gehen bitte."
+
+             Bis heute nahm diese Seite immer das, was Windows
+             gerade für den Standard hielt — bei fünfzehn
+             RØDE-Einträgen ist das Glückssache. Und sie schaltete
+             Echo- und Rauschunterdrückung fest EIN, also genau die
+             zwei Automatiken, die über einem Pult nichts zu suchen
+             haben. Beides steht jetzt hier. -->
+        <h3 class="pult__ueber">Geräte &amp; Mischpult</h3>
+        <div class="geraete" id="geraete"></div>
+        <p class="pult__klein" id="geraete-hinweis"></p>
       </section>
 
       <!-- ==== Gäste ========================================== -->
@@ -586,7 +679,7 @@
         <div class="gast-reihe" id="gast-reihe"></div>
         <div class="pult__zeile">
           <select id="p-wen" class="pult__wahl" aria-label="Wen holen?"></select>
-          <button type="button" class="knopf-still" id="p-holen">Dazuholen</button>
+          <button type="button" class="knopf-still" id="p-holen">Einladen</button>
         </div>
       </section>
 
@@ -693,12 +786,31 @@
           in Drittel geteilt.
         </p>
 
+        <!-- ==== WO DIE KARTE STEHT (08.10.2026) ================
+             Filipe: „die spende soll auch in der mitte vom bild
+             angezeigt werden."
+
+             Der Knopf bleibt trotzdem: Bei einem Film, bei dem ein
+             Deckel in der Mitte stört, ist der alte Platz der
+             bessere — und eine Festlegung, die man nicht
+             zurücknehmen kann, ist keine Einstellung. Er gilt für
+             den Saal UND für die Tafel in OBS. -->
+        <h3 class="pult__ueber">Wo die Karte steht</h3>
+        <div class="platzwahl" id="platzwahl" role="group"
+             aria-label="Wo die Spendenkarte im Bild steht"></div>
+        <p class="pult__klein">
+          In der Mitte steht sie als Aufsteller und kommt aus der
+          Tiefe nach vorn — am Rand liegt sie flach unten links und
+          lässt das Bild frei. Beides gilt auch für die Tafel in OBS.
+        </p>
+
         <h3 class="pult__ueber">Wie eine Spende aussieht</h3>
         <p class="pult__klein">
           Je Stufe: ab wie vielen Dogen sie gilt, wie sie heißt,
-          welches Zeichen, welche Farbe, wie lange sie steht und wie
-          groß. Eine Spende bekommt immer die höchste Stufe, die auf
-          sie passt.
+          welches Zeichen, welche Farbe, wie lange sie steht, wie
+          groß — und wie lange der Spender danach im Chat besonders
+          aussieht. Eine Spende bekommt immer die höchste Stufe, die
+          auf sie passt.
         </p>
         <div class="stufen" id="stufen"></div>
         <div class="pult__zeile">
@@ -711,6 +823,28 @@
           „Ausprobieren“ zeigt dir eine Karte — nur bei dir, und es wird
           keine Spende daraus. Im Saal sieht das niemand.
         </p>
+
+        <!-- ==== DIE FERTIGEN SÄTZE (08.10.2026) ================
+             Was hier steht, kann ein Zuschauer beim Spenden
+             auswählen — und was er auswählt, geht OHNE Bestätigung
+             sofort ins Bild. Das ist der Grund, warum die Liste
+             hier steht und nicht irgendwo: Wer sie schreibt, hat
+             damit vorher entschieden, was später ungesehen im
+             Stream erscheinen darf. -->
+        <h3 class="pult__ueber">Fertige Sätze</h3>
+        <p class="pult__klein">
+          Wählt jemand einen davon aus, läuft seine Karte
+          <strong>sofort</strong> — niemand muss sie bestätigen. Nur
+          selbst geschriebene Texte warten im Register „Spenden" auf
+          dich. Ein leeres Feld nimmt den Satz weg.
+        </p>
+        <div class="saetze" id="saetze"></div>
+        <div class="pult__zeile">
+          <button type="button" class="knopf-still" id="satz-neu">Satz dazu</button>
+          <button type="button" class="knopf-still knopf-still--haupt"
+                  id="saetze-sichern">Übernehmen</button>
+          <span class="pult__klein" id="saetze-stand"></span>
+        </div>
       </section>
 
       <!-- ==== Spenden ======================================= -->
@@ -903,17 +1037,110 @@
 
 </main>
 
+<!-- ======================================================================
+     DIE ZWEI VORHAENGE STEHEN AUSSERHALB DES SAALS (08.10.2026)
+
+     Sie lagen zuerst in `<main class="saal">` -- und kamen damit nie
+     ueber die Kopfleiste des Hauses. Der Grund ist ein STAPELKONTEXT
+     und keine zu kleine Zahl: `body.start > main` traegt `position:
+     relative; z-index: 1`, die Kopfleiste steht bei 6. Alles INNERHALB
+     von main wird mit main zusammen eingeordnet -- ein `z-index: 500`
+     darin bleibt unter der 6 daneben. Gemessen: An der Stelle, an der
+     der Vorhang liegen sollte, fand `elementFromPoint` die Kopfleiste.
+
+     Das ist dieselbe Falle wie eine zweite CSS-Regel fuer dieselbe
+     Frage: Man dreht an der Zahl und wundert sich, dass nichts
+     passiert. Hier steht der Vorhang jetzt dort, wo ein Vorhang
+     hingehoert -- als letztes Kind des Dokuments, neben main und
+     Kopfleiste statt darin.
+     ====================================================================== -->
+  <!-- ============ GERÄTE WÄHREND DER SENDUNG ====================
+       Dieselbe Oberfläche wie im Vorraum und im Register „Ton" —
+       gebaut von derselben Stelle im Programm (`geraeteBauen`).
+       Dreimal nachgebaut hiesse: Beim nächsten Umbau sieht eine
+       davon anders aus, und gemerkt würde es mitten in einer
+       Sendung. -->
+  <div class="vorraum" id="geraetefenster" hidden role="dialog" aria-modal="true"
+       aria-labelledby="geraetefenster-titel">
+    <div class="vorraum__karte">
+      <h2 class="vorraum__titel" id="geraetefenster-titel">Mikrofon, Kamera, Mischpult</h2>
+      <p class="vorraum__satz">
+        Die Umstellung gilt sofort — die Verbindungen bleiben dabei
+        stehen, es wird nichts neu aufgebaut.
+      </p>
+      <div class="geraete" id="geraetefenster-inhalt"></div>
+      <div class="vorraum__knoepfe">
+        <button type="button" class="knopf-still knopf-still--haupt"
+                id="geraetefenster-zu">Fertig</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ============ DER VORRAUM FÜR EINGELADENE GÄSTE ============
+       Filipe: „wenn gäste eingeladen werden, sollen die akzeptieren
+       oder ablehnen können. bevor die auch angezeigt werden sollen
+       die auswählen können ob die kamera an ist oder aus ist. also
+       iohre eigene."
+
+       ER LIEGT ÜBER ALLEM UND IST NICHT WEGZUKLICKEN — aber er hat
+       immer zwei Ausgänge: „Dabei sein" und „Lieber nicht". Ein
+       Vorhang ohne zweiten Ausgang wäre eine Falle, und zwar
+       ausgerechnet für den, der gerade nur zuschauen wollte.
+
+       DAS BILD LÄUFT DARIN, BEVOR ES HINAUSGEHT. Das ist der ganze
+       Sinn: Man sieht sich selbst, bevor einen jemand anderes sieht
+       — und entscheidet dann, ob die Kamera an sein soll. -->
+  <div class="vorraum" id="vorraum" hidden role="dialog" aria-modal="true"
+       aria-labelledby="vorraum-titel">
+    <div class="vorraum__karte">
+      <h2 class="vorraum__titel" id="vorraum-titel">Du bist eingeladen</h2>
+      <p class="vorraum__satz" id="vorraum-satz">
+        Du sollst mit auf die Bühne. Du entscheidest, ob deine Kamera
+        und dein Mikro dabei an sind.
+      </p>
+
+      <div class="vorraum__bild">
+        <!-- Stumm, und zwar für immer: Sich selbst mit Verzögerung zu
+             hören ist der schnellste Weg, dass jemand aufhört zu
+             reden. -->
+        <video id="vorraum-video" autoplay playsinline muted></video>
+        <span class="vorraum__aus" id="vorraum-aus" hidden>Kamera aus</span>
+        <span class="vorraum__pegel" id="vorraum-pegel" aria-hidden="true"><i></i></span>
+      </div>
+
+      <div class="vorraum__schalter">
+        <button type="button" class="vorraum__schalt" id="vorraum-kamera"
+                aria-pressed="true">Kamera an</button>
+        <button type="button" class="vorraum__schalt" id="vorraum-mikro"
+                aria-pressed="true">Mikro an</button>
+      </div>
+
+      <!-- Dieselbe Geräteauswahl wie im Register „Ton" — gebaut von
+           derselben Stelle im Programm. Filipe: „auch bei den
+           gästen." -->
+      <div class="geraete vorraum__geraete" id="vorraum-geraete"></div>
+
+      <p class="vorraum__frist" id="vorraum-frist" aria-live="polite"></p>
+      <div class="vorraum__knoepfe">
+        <button type="button" class="knopf-still knopf-still--haupt"
+                id="vorraum-ja">Dabei sein</button>
+        <button type="button" class="knopf-still knopf-still--leise"
+                id="vorraum-nein">Lieber nicht</button>
+      </div>
+    </div>
+  </div>
+
 <!-- bereiche.js VOR kopf.js: Dort steht `window.Bereiche`, und kopf.js
      liest daraus die Leitungsrollen. -->
-<script src="assets/js/bereiche.js?v=202610072346" defer></script>
-<script src="assets/js/wahl.js?v=202610072346" defer></script>
-<script src="assets/js/nachfrage.js?v=202610072346" defer></script>
-<script src="assets/js/meldung.js?v=202610072346" defer></script>
-<script src="assets/js/installieren.js?v=202610072346" defer></script>
-<script src="assets/js/kopf.js?v=202610072346" defer></script>
-<script src="assets/js/glocke.js?v=202610072346" defer></script>
-<script src="assets/js/spendenkarte.js?v=202610072346" defer></script>
-<script src="assets/js/werbung.js?v=202610072346" defer></script>
-<script src="assets/js/reaktion.js?v=202610072346" defer></script>
+<script src="assets/js/bereiche.js?v=202610080131" defer></script>
+<script src="assets/js/wahl.js?v=202610080131" defer></script>
+<script src="assets/js/nachfrage.js?v=202610080131" defer></script>
+<script src="assets/js/meldung.js?v=202610080131" defer></script>
+<script src="assets/js/installieren.js?v=202610080131" defer></script>
+<script src="assets/js/kopf.js?v=202610080131" defer></script>
+<script src="assets/js/glocke.js?v=202610080131" defer></script>
+<script src="assets/js/spendenkarte.js?v=202610080131" defer></script>
+<script src="assets/js/werbung.js?v=202610080131" defer></script>
+<script src="assets/js/reaktion.js?v=202610080131" defer></script>
 </body>
 </html>