Das Foyer: eine Seite vor dem Saal, mit Plan, Eintritt und Vorschlägen

Filipe: „diese kachel soll nicht mehr geschlossen sein, ABER wenn man
drauf drückt geht zuerst eine seite auf mit reihen/kategorien. links
eine reihe wo die nächsten geplanten videos schon bereit stehen. wan
und umd wie viel uhr … und das soll geschlossen sein außer für vanvan
und dogfather. in der mitte sollen die leute dan wenn eine sendung
läuft drauf drücken können und der sendung beitreten. auch bei der
vorschau schon und dan rechts will ich die letzte reihe/kategorie, da
sollen die leute alle mir videos anraten können … und nur ich und
vanvan sehen sie."

Haus: Team Dogi (crew.dogfather-universe.com). Die Agentur ist nicht
berührt -- pruef-haus-trennung 107/0, pruef-workspace-seiten 37/0.

WARUM EINE EIGENE SEITE UND KEIN VIERTER ZUSTAND DES SAALS

Der Saal meldet jeden an, der ihn öffnet („dabei"), baut Verbindungen
auf und hält den Ereignisstrom offen. Das ist richtig für jemanden,
der zusieht -- und falsch für jemanden, der nur nachsehen will, ob
heute Abend etwas läuft. Wäre das Foyer der vierte Zustand derselben
Seite, zählte jeder Blick als Zuschauer, und die Zahl im Regiepult
sähe nach Publikum aus, wo niemand zusieht.

Im Foyer wird nur gelesen: Stand holen, zeichnen, alle 20 Sekunden
nachfragen -- und nicht, solange der Reiter im Hintergrund liegt. Kein
Ereignisstrom: Der hielte eine Verbindung offen, und manche Browser
geben je Adresse nur sechs her; im Saal wird jede davon gebraucht.

DREI REIHEN

  LINKS   die Warteschlange, nach TERMIN sortiert statt nach Platz.
          Was keinen hat, steht unten; was vorbei ist, bekommt
          „· überfällig". Nur admin und rechte Hand -- und für alle
          anderen steht sie gar nicht erst da, statt leer oder
          gesperrt zu sein. Ein Kasten mit Schloss erzählt, dass es
          etwas zu sehen gäbe. Entschieden wird das am Server; die
          Seite fragt nicht nach der Rolle, sondern danach, ob die
          Auskunft gekommen ist.
  MITTE   Lampe (Geschlossen / Gleich / Auf Sendung), Vorschaubild,
          Titel, Satz -- und der Knopf, der NUR dasteht, wenn er auch
          hineinführt. Er ist ein Link und kein Button: Wer ihn mit
          der mittleren Maustaste antippt, bekommt einen neuen Reiter.
  RECHTS  Video anraten. Jeder darf schicken, niemand sieht fremde,
          jeder sieht seine eigenen mit Stand. Vier Sperren, und jede
          beantwortet etwas anderes: zu schnell (45 s), zu viele offen
          (5 je Person), schon angeraten, steht schon bereit.

Am Telefon steht die MITTE oben. Dort ist „links" nur noch „vor allem
anderen", und das wäre die falsche Reihenfolge.

WAS SONST NOCH DAZUGEHÖRT

* Jede Zeile der Warteschlange im Saal hat jetzt ein Terminfeld.
* Die Kachel sagt nicht mehr „geschlossen" -- das Foyer ist immer
  offen. „gleich" und „● live" bleiben: Sie sagen etwas, das man ohne
  sie nicht weiß.
* reaktion.html steht in OHNE_KACHEL_UEBERALL. Die erlaubten Seiten
  werden aus den Kachelzielen abgeleitet; als die Kachel aufs Foyer
  zeigte, war der Saal plötzlich von keiner mehr genannt und
  antwortete mit einer Umleitung.

DREI DOPPELTE ANTWORTEN BESEITIGT

* „Wie viele Vorschläge darf einer offen haben" stand VIERMAL:
  dreimal als `je_person_max || 5` und einmal als Wort „fünf" im Satz
  (plus ein fünftes Mal in meldung.js). Kommt jetzt vom Server.
* `maxlength="200"` im Formular neben VORSCHLAG_NOTIZ_MAX im Server.
  Das Feld lernt die Grenze von der Auskunft.
* Die drei Foyer-Tafeln hatten eine eigene Fläche (Weiß mit 4,5 %) und
  eine eigene Form. Beides gibt es im Haus längst: Material in
  start.css (45 Klassen, gemessen), Form in module.css. Die eigene
  Fläche war dazu fast durchsichtig -- über einem hellen
  Hintergrundbild stand der Text ohne deckenden Grund. Gefunden hat
  das nicht eine Prüfung, sondern das Bildschirmfoto.

EINE LÜCKE IN DER PRÜFUNG GESCHLOSSEN

In module.css steht dieselbe 48er-Klassenliste ACHTMAL. Sieben trugen
die Marke MODULLISTE und wurden verglichen; die achte -- die Umrandung
beim Tabben (:focus-visible) -- nicht. Sie war damit die Einzige, die
still hätte abweichen können, ausgerechnet bei der Regel, die nur
sieht, wer mit der Tastatur bedient. pruef-css-klassen erwartet jetzt
acht. Eine steigende Prüfzahl, und sie ist begründet.

UND EINER, DEN KEIN WERKZEUG FINDEN KANN

Der Satz oben lautete „Links steht, was ansteht; rechts kannst du
etwas anraten." Für die Community gibt es „links" gar nicht, und am
Telefon stehen die Reihen untereinander. Eine Richtung im Text ist
eine Aussage über das Aussehen -- und das ändert sich mit dem
Bildschirm und mit der Rolle. Jetzt steht dort, WAS geht, nicht WO.

GEMESSEN

  mess-foyer (neu)        70 Messungen, 0 Fehler, 9 Bildschirmfotos
  pruef-reaktion          538, 0 Fehler (vorher 478)
  pruef-handy-teamdogi    263 Seitenaufrufe, 0 Befunde (vorher 244)
  pruef-sackgassen        14, 0 Fehler
  pruef-crew-adresse      173, 0 Fehler
  pruef-haus-trennung     107, 0 Fehler
  pruef-struktur          102, 0 Fehler
  pruef-neue-seiten       109, 0 Fehler
  pruef-portnummern        41, 0 Fehler
  pruef-haus-seiten        38, 0 Fehler
  pruef-workspace-seiten   37, 0 Fehler
  pruef-breiten           45 Seiten auf fünf Breiten, 0 beanstandet
  pruef-community-sicht    10, 0 Fehler
  pruef-deutsche-texte     12, 0 Fehler
  pruef-css-klassen       grün

mess-foyer klickt den ganzen Weg durch: Ein Gast schickt ein Video,
DogFather sieht es mit Namen, nimmt es, und es muss links im Plan
stehen. Zum Schluss macht es sechs seiner Messungen absichtlich kaputt
und prüft, dass sie das merken.

NICHT BEHOBEN, WEIL NICHT MEINS: pruef-meldungen ist rot (28
Kennungen ohne Satz, 3 Rohanzeigen) -- gemessen im worktree auf dem
letzten Commit schon vorher, Zeichen für Zeichen dieselbe Liste. Die
Dateien gehören überwiegend der Agentur; das gehört in einen eigenen
Durchgang.

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

workspace/assets/css/foyer.css

@@ -0,0 +1,478 @@
+/* =====================================================================
+   DAS FOYER (08.10.2026)
+
+   Die Seite vor dem Saal. Drei Reihen nebeneinander: links der Plan,
+   in der Mitte der Weg hinein, rechts die Vorschläge.
+
+   ---------------------------------------------------------------------
+   SIE SIEHT AUS WIE DAS HAUS UND NICHT WIE DER SAAL
+
+   Der Saal ist absichtlich anders gebaut als jede andere Seite — fast
+   schwarz, ohne Scrollen, mit eigener Höhensprache. Das ist richtig
+   für einen Raum, in dem man eine Stunde sitzt und auf EINE Sache
+   schaut.
+
+   Das Foyer ist das Gegenteil: Man kommt, liest, entscheidet und geht
+   weiter. Also trägt es die Oberfläche des Hauses (`gate.css`,
+   `start.css`) wie jede andere Seite auch. Eine zweite Höhensprache
+   hier hätte bedeutet, dieselben Werte ein zweites Mal zu pflegen —
+   und beim nächsten Umbau sähe eine der beiden anders aus.
+
+   ---------------------------------------------------------------------
+   DIE MITTE IST BREITER, UND DAS IST DIE GANZE GLIEDERUNG
+
+   `1fr 1.3fr 1fr`. Wer hier ist, will meistens EINS wissen: läuft
+   etwas? Die Antwort darauf bekommt den größten Platz und die einzige
+   Farbe. Drei gleich breite Spalten wären drei gleich wichtige
+   Dinge — und dann sucht man.
+   ===================================================================== */
+
+/* ==== DIE DREI TAFELN SIND GLEICH HOCH (08.10.2026) ================
+
+   Hier stand `align-items: start`. Die Folge war auf dem ersten
+   Bildschirmfoto zu sehen: drei Tafeln mit drei verschiedenen
+   Unterkanten (572 / 672 / 680 px), als waere die Seite aus drei
+   Zetteln zusammengelegt. Das ist genau die Sorte Kleinigkeit, bei
+   der ein Blick „irgendwie unfertig" sagt, ohne benennen zu koennen,
+   woran es liegt.
+
+   `stretch` ist die Vorgabe des Rasters -- die Zeile hat sie
+   aufgehoben. Jetzt sind alle drei so hoch wie die hoechste, und der
+   Fusssatz jeder Tafel steht unten statt mitten im Nichts (siehe
+   `.foyer-reihe__fuss`). */
+.foyer-reihen {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
+  gap: 16px;
+}
+
+/* ==== WENN DER PLAN FEHLT, BLEIBT KEINE LÜCKE =====================
+   Die Community bekommt die linke Reihe gar nicht erst (`hidden`).
+   Ohne diese Regel stünden zwei Reihen in einem Raster für drei, und
+   die Mitte läge an der falschen Stelle — als fehlte etwas. Mit
+   `:has()` misst das Raster, was wirklich da ist, statt eine zweite
+   Zahl zu pflegen. */
+.foyer-reihen:has(> .foyer-reihe--plan[hidden]) {
+  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
+}
+
+/* =====================================================================
+   EINE REIHE
+   ===================================================================== */
+/* FLEX UND NICHT GRID -- und zwar wegen EINER Zeile: `margin-top:
+   auto` am Fusssatz. In einem Raster wirkt die nur innerhalb der
+   zugeteilten Zeile und schiebt nichts an den unteren Rand; in einer
+   Spalte schluckt sie den ganzen Rest. Dieselbe Darstellung, aber
+   der Fusssatz steht da, wo er hingehoert. */
+/* ==== KEINE EIGENE FLAECHE MEHR (08.10.2026) ======================
+
+   Hier standen Rundung, Kante, Verlauf und Schatten -- eine eigene
+   Gestalt fuer drei Tafeln, waehrend 45 andere Karten im Haus eine
+   gemeinsame haben. Zwei Schaeden daran, und der zweite ist der
+   schwerere:
+
+     * Die Flaeche war fast durchsichtig (Weiss mit 4,5 %). Auf dem
+       Bildschirmfoto schien die Tapete durch die Tafeln, und ueber
+       einem hellen Hintergrundbild stand Text ohne deckenden Grund.
+       Die Kontrastmessung des Hauses nennt das „liegt auf der
+       Buehne“ und zaehlt es als Befund -- zu Recht: Was dahinter
+       liegt, entscheidet jeder Nutzer selbst mit seiner Wandwahl.
+     * Und es war eine zweite Antwort auf die Frage, wie eine Karte
+       in diesem Haus aussieht. Filipe am 07.09.2026: „DU HAST WIEDER
+       EINE KLEINE AENDERUNG UEBERALL GEMACHT ANSTATT EINE RIESEN
+       AENDERUNG.“
+
+   Flaeche kommt jetzt aus start.css (das gemessene Material), Form
+   aus module.css (Schraege, Kantenlicht, Eckwinkel, Raster) --
+   `.foyer-reihe` steht in beiden Listen. Hier bleibt nur, was diese
+   Tafeln von anderen Karten unterscheidet: Spaltenfluss und
+   Polsterung. */
+.foyer-reihe {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 16px 16px 18px;
+}
+.foyer-reihe[hidden] { display: none; }
+
+.foyer-reihe__kopf {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 10px; min-width: 0;
+  /* ==== DREI UEBERSCHRIFTEN AUF EINER LINIE =====================
+     Die Kopfzeile ist so hoch wie das, was in ihr steht -- und das
+     ist links ein Schild, in der Mitte eine Lampe und rechts
+     zeitweise gar nichts. Gemessen lagen die drei Ueberschriften
+     dadurch auf 310, 314 und 316 px: kein Mensch nennt das, aber
+     jeder sieht es.
+
+     Die Zahl ist nicht geraten, sondern die hoechste der drei
+     Marken: Lampe = 11,52 px Schrift + 2x5 px Polster + 2x1 px
+     Linie = 26 px. 28 gibt zwei Pixel Luft, damit eine Schrift, die
+     im Browser des Nutzers minimal groesser faellt, nichts
+     verschiebt. */
+  min-height: 28px;
+}
+.foyer-reihe__ueber {
+  margin: 0;
+  font-size: .78rem; font-weight: 800;
+  letter-spacing: .14em; text-transform: uppercase;
+  color: var(--text-leise, #a9a3bd);
+}
+/* „nur ihr zwei" — ein Schild und kein Schloss. Ein Schloss sagt
+   „hier ist etwas verborgen"; dieses Schild sagt, dass die Reihe für
+   niemanden sonst existiert, und das ist der Unterschied. */
+.foyer-reihe__nur,
+.foyer-reihe__zahl {
+  /* .72rem sind 11,52 px — die Untergrenze des Hauses ist 11,5, und
+     sie ist kein Geschmack: `pruef-css-klassen` misst sie. Der erste
+     Versuch stand auf .68 (10,88 px) und war damit eine Andeutung
+     statt einer Auskunft. */
+  font-size: .72rem; font-weight: 800;
+  letter-spacing: .08em; text-transform: uppercase;
+  padding: 3px 9px 4px;
+  border-radius: 999px;
+  white-space: nowrap;
+  color: #cfe0ff;
+  background: rgba(154, 183, 255, .12);
+  border: 1px solid rgba(154, 183, 255, .3);
+}
+.foyer-reihe__zahl { color: #ffd9a0; background: rgba(224, 161, 58, .14); border-color: rgba(224, 161, 58, .34); }
+.foyer-reihe__zahl[hidden], .foyer-reihe__nur[hidden] { display: none; }
+
+.foyer-reihe__satz {
+  margin: 0;
+  font-size: .84rem; line-height: 1.5;
+  color: var(--text-leise, #a9a3bd);
+}
+.foyer-reihe__fuss {
+  /* NACH UNTEN, NICHT HINTER DEN TEXT. `auto` nimmt den Platz, den
+     die gleich hohen Tafeln uebrig lassen -- dadurch steht der
+     Fusssatz in jeder Tafel auf derselben Hoehe statt dort, wo der
+     Inhalt darueber zufaellig endet. */
+  margin: auto 0 0;
+  padding-top: 6px;
+  font-size: .76rem; line-height: 1.45;
+  color: var(--text-still, #8b93a4);
+}
+
+/* =====================================================================
+   LINKS: DER PLAN
+   ===================================================================== */
+.plan-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
+.plan-zeile {
+  display: flex; align-items: center; gap: 10px;
+  min-width: 0;
+  padding: 8px 10px 8px 8px;
+  border-radius: 12px;
+  border: 1px solid var(--linie, rgba(150, 160, 190, .14));
+  background: rgba(255, 255, 255, .03);
+}
+/* Ein Termin, der schon vorbei ist, wird nicht ausgeblendet — er wird
+   MARKIERT. Ausblenden hiesse, dass eine Vorbereitung verschwindet,
+   ohne dass jemand etwas getan hat. */
+.plan-zeile[data-termin="vorbei"] { border-color: rgba(224, 161, 58, .34); }
+.plan-zeile[data-termin="vorbei"] .plan-zeile__wann { color: #e0a13a; }
+
+.plan-zeile__bild {
+  flex: none;
+  width: 64px; aspect-ratio: 16 / 9;
+  border-radius: 7px; object-fit: cover;
+  background: #12101a;
+  border: 1px solid var(--linie, rgba(150, 160, 190, .14));
+}
+.plan-zeile__text { display: grid; gap: 2px; min-width: 0; }
+.plan-zeile__titel {
+  font-size: .84rem; font-weight: 600;
+  color: var(--text, #e9e6f2);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+/* Holt YouTube den Namen nicht heraus, steht dort die Kennung — kein
+   erfundener Titel. Sie sieht dann auch danach aus. */
+.plan-zeile__titel[data-roh="ja"] {
+  color: var(--text-leise, #a9a3bd);
+  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
+  font-size: .78rem;
+}
+.plan-zeile__wann {
+  font-size: .74rem; font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-leise, #a9a3bd);
+}
+.plan-leer, .raten-leer {
+  list-style: none;
+  margin: 0; padding: 10px 2px;
+  font-size: .82rem;
+  color: var(--text-leise, #a9a3bd);
+}
+
+/* =====================================================================
+   MITTE: DER WEG HINEIN
+   ===================================================================== */
+/* ==== DIE MITTE TRÄGT FARBE AN DER KANTE, NICHT AUF DER FLÄCHE ====
+
+   Hier standen zwei `background`-Regeln mit halbdurchsichtigen
+   Verläufen. Sie haben das gemessene Material des Hauses wieder
+   überschrieben — also genau das zurückgeholt, was zwanzig Zeilen
+   weiter oben gerade abgeschafft wurde. Eine Reparatur, die sich
+   selbst aufhebt, ist keine.
+
+   `--ton` ist der Weg, den das Haus dafür schon hat: module.css legt
+   damit ein Kantenlicht auf die Silhouette — oben und über die
+   Schräge, der Form folgend. Eine beleuchtete Oberkante statt einer
+   getönten Fläche: Der Text darüber bleibt auf demselben deckenden
+   Grund wie überall, und die Mitte ist trotzdem die, die auffällt.
+
+   NUR DIE MITTE BEKOMMT EINEN. Plan und Anraten lassen `--ton` leer
+   und erben den Hausakzent. Wenn alles leuchtet, leuchtet nichts. */
+.foyer-reihe--saal { --ton: #9ab7ff; }
+
+/* Auf Sendung die Farbe des Hauses für „live“ — rot, gedeckt, und
+   nur dann. */
+.foyer-reihe--saal:has(.foyer-lampe[data-stand="live"]) { --ton: #d8404a; }
+
+.foyer-lampe {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 5px 12px 5px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--linie-hell, rgba(170, 180, 210, .26));
+  background: rgba(255, 255, 255, .04);
+  /* Auch hier 11,52 px und nicht 10,88 — siehe oben. */
+  font-size: .72rem; font-weight: 800;
+  letter-spacing: .1em; text-transform: uppercase;
+  color: #8b93a4;
+  white-space: nowrap;
+}
+.foyer-lampe__punkt {
+  width: 8px; height: 8px; border-radius: 50%;
+  background: currentColor;
+  flex: none;
+}
+.foyer-lampe[data-stand="vorbereitung"] {
+  color: #e0a13a;
+  border-color: rgba(224, 161, 58, .4);
+  background: rgba(224, 161, 58, .12);
+}
+.foyer-lampe[data-stand="live"] {
+  color: #ff8b92;
+  border-color: rgba(216, 64, 74, .5);
+  background: rgba(216, 64, 74, .16);
+}
+/* Der Punkt atmet, er blinkt nicht: vier Sekunden auf und ab. Ein
+   Blinken wäre dasselbe Signal mit doppelter Belastung für die
+   Augen — und diese Seite steht manchmal eine Stunde offen. */
+.foyer-lampe[data-stand="live"] .foyer-lampe__punkt {
+  box-shadow: 0 0 10px -1px currentColor;
+  animation: foyer-atmen 4s ease-in-out infinite;
+}
+@keyframes foyer-atmen { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
+
+.saal-karte {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  border-radius: 13px;
+  overflow: hidden;
+  background: #0a0812;
+  border: 1px solid var(--linie, rgba(150, 160, 190, .16));
+  display: grid; place-items: center;
+  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .6);
+}
+.saal-karte img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.saal-karte[data-bild="nein"] img { display: none; }
+.saal-karte__leer {
+  position: absolute;
+  padding: 0 18px; text-align: center;
+  font-size: .82rem; line-height: 1.45;
+  color: var(--text-leise, #a9a3bd);
+}
+.saal-karte[data-bild="ja"] .saal-karte__leer { display: none; }
+
+.saal-titel {
+  font-size: 1.02rem; font-weight: 800;
+  line-height: 1.3;
+  color: var(--text, #e9e6f2);
+  /* Zwei Zeilen, dann Schluss. Ein langer Videotitel darf die Reihe
+     nicht aufziehen — daneben stehen zwei andere. */
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.saal-titel[data-leer="ja"] { color: var(--text-leise, #a9a3bd); font-weight: 600; }
+.saal-satz {
+  margin: 0;
+  font-size: .84rem; line-height: 1.5;
+  color: var(--text-leise, #a9a3bd);
+}
+
+/* ---- Der Knopf hinein ----------------------------------------------
+   Er ist das Größte auf der Seite. Nicht aus Geschmack: Wer das Foyer
+   öffnet, während etwas läuft, hat genau eine Absicht — und soll sie
+   nicht suchen müssen. */
+.saal-knopf {
+  display: flex; align-items: center; justify-content: center;
+  min-height: 52px;
+  margin-top: 2px;
+  padding: 0 20px;
+  border-radius: 14px;
+  text-decoration: none;
+  font-size: .98rem; font-weight: 800;
+  letter-spacing: .01em;
+  color: #cfe0ff;
+  border: 1px solid rgba(154, 183, 255, .44);
+  background: linear-gradient(180deg, rgba(154, 183, 255, .22), rgba(154, 183, 255, .09));
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .16),
+    0 14px 30px -18px rgba(154, 183, 255, .8);
+  transition: transform .14s cubic-bezier(.2, .7, .3, 1), box-shadow .14s ease;
+}
+.saal-knopf:hover { transform: translateY(-1px); }
+.saal-knopf:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5); }
+.saal-knopf[hidden] { display: none; }
+/* Auf Sendung wird er rot — dieselbe Farbe, die im ganzen Haus
+   „jetzt gerade" bedeutet. */
+.saal-knopf[data-stand="live"] {
+  color: #ffe9ea;
+  border-color: rgba(216, 64, 74, .56);
+  background: linear-gradient(180deg,
+    color-mix(in srgb, #d8404a 74%, #000),
+    color-mix(in srgb, #d8404a 46%, #000));
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .2),
+    0 16px 34px -18px #d8404a;
+}
+.saal-zahl {
+  margin: 0;
+  font-size: .78rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-leise, #a9a3bd);
+  text-align: center;
+}
+.saal-zahl[hidden] { display: none; }
+
+/* =====================================================================
+   RECHTS: ANRATEN
+   ===================================================================== */
+.raten-form { display: grid; gap: 9px; }
+.raten-feld { display: grid; gap: 4px; }
+.raten-feld > span {
+  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
+  font-size: .72rem; font-weight: 700;
+  letter-spacing: .03em;
+  color: var(--text-leise, #a9a3bd);
+}
+.raten-feld input {
+  min-height: 44px; padding: 0 12px;
+  border-radius: 11px;
+  border: 1px solid var(--linie, rgba(150, 160, 190, .18));
+  background: linear-gradient(180deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .26));
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
+  color: var(--text, #e9e6f2);
+  font: inherit; font-size: .88rem;
+  min-width: 0;
+}
+.raten-feld input:focus {
+  outline: none;
+  border-color: rgba(154, 183, 255, .5);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5), 0 0 0 3px rgba(154, 183, 255, .16);
+}
+/* Die Zahl steht erst da, wenn es eng wird — vorher ist sie eine
+   Aufsicht und keine Hilfe. */
+.raten-rest { font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; }
+
+.raten-liste { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
+.raten-zeile {
+  display: flex; align-items: flex-start; gap: 10px;
+  min-width: 0;
+  padding: 8px 10px 9px 8px;
+  border-radius: 12px;
+  border: 1px solid var(--linie, rgba(150, 160, 190, .14));
+  background: rgba(255, 255, 255, .03);
+}
+/* Der Zustand steht im WORT und nicht nur in der Farbe — rund acht
+   Prozent der Männer unterscheiden Rot und Grün schlecht, und hier
+   hängt an der Unterscheidung etwas: Kommt mein Video dran? */
+.raten-zeile[data-stand="uebernommen"] { border-color: rgba(95, 201, 154, .34); }
+.raten-zeile[data-stand="abgelehnt"] { opacity: .66; }
+.raten-zeile__bild {
+  flex: none;
+  width: 56px; aspect-ratio: 16 / 9;
+  border-radius: 6px; object-fit: cover;
+  background: #12101a;
+  border: 1px solid var(--linie, rgba(150, 160, 190, .14));
+}
+.raten-zeile__text { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
+.raten-zeile__titel {
+  font-size: .82rem; font-weight: 600;
+  color: var(--text, #e9e6f2);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.raten-zeile__titel[data-roh="ja"] {
+  color: var(--text-leise, #a9a3bd);
+  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
+  font-size: .76rem;
+}
+.raten-zeile__unter {
+  font-size: .72rem; font-weight: 700;
+  letter-spacing: .02em;
+  color: var(--text-leise, #a9a3bd);
+}
+.raten-zeile[data-stand="uebernommen"] .raten-zeile__unter { color: #86d7b4; }
+.raten-zeile__notiz {
+  margin: 3px 0 0;
+  font-size: .78rem; line-height: 1.4;
+  color: var(--text-leise, #a9a3bd);
+  overflow-wrap: anywhere;
+}
+.raten-zeile__knoepfe { display: flex; flex-wrap: wrap; gap: 5px; flex: none; }
+.raten-knopf {
+  appearance: none; cursor: pointer;
+  /* 36 und nicht 44: Diese Knöpfe stehen in einer schmalen Spalte an
+     der Zeile. Sie sind dafür BREIT — gemessen wird ein Tippziel an
+     der Fläche, nicht an einer Kante. Das × daneben ist quadratisch
+     und bekommt deshalb seine vollen 36 in beide Richtungen. */
+  min-height: 36px; min-width: 36px; padding: 0 10px;
+  border-radius: 9px;
+  border: 1px solid var(--linie, rgba(150, 160, 190, .2));
+  background: rgba(255, 255, 255, .05);
+  color: var(--text-leise, #a9a3bd);
+  font: inherit; font-size: .76rem; font-weight: 700;
+  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
+}
+.raten-knopf:hover { background: rgba(255, 255, 255, .09); color: var(--text, #e9e6f2); }
+.raten-knopf--ja {
+  border-color: rgba(95, 201, 154, .4);
+  color: #86d7b4;
+  background: rgba(95, 201, 154, .12);
+}
+.raten-knopf--weg { padding: 0; }
+.raten-knopf--weg:hover { color: #ff8b92; border-color: rgba(216, 64, 74, .4); }
+
+/* =====================================================================
+   AM HANDY: DIE MITTE ZUERST
+
+   Aus drei Spalten wird ein Stapel. Die Reihenfolge dreht sich dabei:
+   Wer am Telefon nachsieht, ob etwas läuft, soll es in der ersten
+   Zeile sehen und nicht nach zwei Bildschirmhöhen Plan.
+
+   `order` und nicht eine andere Reihenfolge im Dokument: Am Rechner
+   steht links der Plan, und das soll so bleiben. Eine zweite Fassung
+   derselben Seite wäre die, die beim nächsten Umbau vergessen wird.
+   ===================================================================== */
+@media (max-width: 900px) {
+  .foyer-reihen,
+  .foyer-reihen:has(> .foyer-reihe--plan[hidden]) {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 12px;
+  }
+  .foyer-reihe--saal  { order: 1; }
+  .foyer-reihe--raten { order: 2; }
+  .foyer-reihe--plan  { order: 3; }
+  .foyer-reihe { padding: 14px 13px 16px; border-radius: 16px; }
+  .saal-knopf { min-height: 52px; }
+}
+
+/* Wer weniger Bewegung eingestellt hat, bekommt alles — nur ohne das
+   Atmen und das Heben. Die Auskunft ist wichtiger als der Weg. */
+@media (prefers-reduced-motion: reduce) {
+  .foyer-lampe[data-stand="live"] .foyer-lampe__punkt { animation: none; }
+  .saal-knopf { transition: none; }
+  .saal-knopf:hover, .saal-knopf:active { transform: none; }
+}

workspace/assets/css/module.css

@@ -20,12 +20,17 @@
    Als letzte Datei gewinnt die Form ueberall.
 
    WER EINE NEUE KARTE BAUT, traegt ihren Klassennamen in die Listen
-   unten ein. Die Liste steht siebenmal in dieser Datei (Grundform,
-   Kantenlicht, Raster, Handy und dreimal Kontrastmodus) -- das ist die
-   schwache Stelle dieser Bauart, denn eine vergessene Kopie faellt
-   niemandem auf. Deshalb steht vor jeder Kopie die Marke
-   MODULLISTE, und `pruef-css-klassen.mjs` vergleicht alle sieben
-   Vorkommen miteinander: Weicht eines ab, wird die Pruefung rot.
+   unten ein. Die Liste steht ACHTMAL in dieser Datei (Grundform,
+   Kantenlicht, Raster, Umrandung beim Tabben, Handy und dreimal
+   Kontrastmodus) -- das ist die schwache Stelle dieser Bauart, denn
+   eine vergessene Kopie faellt niemandem auf. Deshalb steht vor jeder
+   Kopie die Marke MODULLISTE, und `pruef-css-klassen.mjs` vergleicht
+   alle acht Vorkommen miteinander: Weicht eines ab, wird die Pruefung
+   rot.
+
+   DIE ACHTE KAM ERST AM 08.10.2026 DAZU -- nicht als neue Regel,
+   sondern weil sie seit dem 07.09. unmarkiert danebenstand und als
+   einzige nie verglichen wurde.
    ===================================================================== */
 
 /* =====================================================================
@@ -135,7 +140,7 @@
 }
 
 /* MODULLISTE */
-:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl) {
+:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl, .foyer-reihe) {
   position: relative;
   clip-path: polygon(var(--fase) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase));
   border-radius: 0;
@@ -163,7 +168,7 @@
    was übrig bleibt, ist eine Linie, die exakt der Form folgt, Schräge
    inklusive. Ein `border` könnte das nicht: Er folgt dem Rechteck. */
 /* MODULLISTE */
-:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl)::before {
+:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl, .foyer-reihe)::before {
   content: "";
   position: absolute; inset: 0;
   pointer-events: none;
@@ -186,7 +191,7 @@
 /* RASTER UND ECKWINKEL. Beides auf ::after -- ein drittes Element gibt
    es nicht, und beides ist reine Optik ohne Klicks. */
 /* MODULLISTE */
-:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl)::after {
+:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl, .foyer-reihe)::after {
   content: "";
   position: absolute; inset: 0;
   pointer-events: none;
@@ -380,7 +385,20 @@
    wandert) wuerde die Form von 45 Bauteilen auf 38 Seiten neu
    entscheiden. Das ohne Messgeraet zu tun, waere Raten mit viel
    Einsatz. */
-:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl):focus-visible {
+/* ==== DIE ACHTE KOPIE WAR NICHT MARKIERT (08.10.2026) =============
+
+   Sieben Kopien trugen die Marke und wurden von `pruef-css-klassen`
+   miteinander verglichen. Diese hier -- die Umrandung beim Tabben --
+   trug sie nicht, obwohl sie dieselbe Liste enthaelt. Sie war damit
+   die einzige, die still haette abweichen koennen: Wer eine Karte
+   eintraegt und sie uebersieht, baut ein Bauteil, das aussieht wie
+   alle anderen und beim Tabben keine Umrandung bekommt -- und das
+   faellt niemandem auf, weil nichts kaputtgeht.
+
+   Gefunden beim Eintragen von `.foyer-reihe`: acht Vorkommen der
+   Liste, sieben Marken. Die Pruefung erwartet jetzt acht. */
+/* MODULLISTE */
+:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl, .foyer-reihe):focus-visible {
   outline: 2px solid var(--akzent);
   outline-offset: -4px;
 }
@@ -389,7 +407,7 @@
   /* Dieselbe Form, kleiner -- keine zweite Gestaltung. */
   :root { --fase: 12px; }
   /* MODULLISTE */
-  :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl) {
+  :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl, .foyer-reihe) {
     filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .7));
   }
 }
@@ -403,15 +421,15 @@
   /* Im Kontrastmodus zählt die Kante, und die muss ein echter `border`
      sein. Die Schräge bleibt: Sie ist Geometrie, keine Farbe. */
   /* MODULLISTE */
-  :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl) {
+  :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl, .foyer-reihe) {
     filter: none; border: 1px solid CanvasText;
   }
   /* MODULLISTE */
-  :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl)::after {
+  :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl, .foyer-reihe)::after {
     display: none;
   }
   /* MODULLISTE */
-  :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl)::before {
+  :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl, .foyer-reihe)::before {
     display: none;
   }
 }

workspace/assets/css/reaktion.css

@@ -2207,6 +2207,44 @@ body.reaktion-seite > .kopfleiste { flex: none; }
   font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
   font-size: .78rem;
 }
+/* ==== DER TERMIN AN DER ZEILE (08.10.2026) ========================
+   Er steht zwischen Titel und Knöpfen und ist bewusst schmal: Die
+   meisten Zeilen haben keinen, und ein breites Feld in jeder Zeile
+   machte aus einer Liste ein Formular.
+
+   `flex: none` und eine feste Breite — ein Datumsfeld, das mit der
+   Spalte wächst, ist in einer 327 Pixel schmalen Regie breiter als
+   der Titel daneben. */
+.warte-zeile__wann {
+  flex: none;
+  width: 11.5rem;
+  min-height: 34px; padding: 0 8px;
+  border-radius: 9px;
+  border: 1px solid var(--rand);
+  background: linear-gradient(180deg, rgba(0, 0, 0, .46), rgba(0, 0, 0, .3));
+  box-shadow: var(--w-tief);
+  color: var(--schrift-leise);
+  font: inherit; font-size: .76rem;
+  font-variant-numeric: tabular-nums;
+}
+/* ==== STEHT EIN TERMIN DARIN, WIRD DAS FELD DEUTLICH ===========
+   Sonst sieht eine Liste aus zehn Zeilen gleich aus, egal ob etwas
+   verabredet ist.
+
+   `data-gesetzt` UND NICHT `:not([value=""])`. Das war der erste
+   Versuch und wäre eine Regel gewesen, die aussieht, als täte sie
+   etwas: Ein `value`, das das Programm als EIGENSCHAFT setzt, taucht
+   im Attribut gar nicht auf -- der Selektor hätte auf jede Zeile
+   gepasst, auch auf die leeren. Was das Programm weiss, muss das
+   Programm auch hinschreiben. */
+.warte-zeile__wann[data-gesetzt="ja"] { color: var(--schrift); }
+.warte-zeile__wann:hover { border-color: var(--rand-hell); }
+.warte-zeile__wann:focus {
+  outline: none;
+  border-color: rgba(154, 183, 255, .5);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55), 0 0 0 3px rgba(154, 183, 255, .16);
+}
+
 .warte-zeile__knoepfe { display: flex; gap: 5px; flex: none; }
 .warte-zeile__knoepfe button {
   appearance: none; cursor: pointer;

workspace/assets/css/start.css

@@ -7679,7 +7679,16 @@ body[data-fremde-sicht="ja"]::after {
   .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .schulung__neu,
   .nachricht, .creator, .summe, .wert, .pdf, .pdf-ablage, .suchleiste,
   .person, .kk, .fortschritt, .punkt, .nur-lesen, .todo-liste li,
-  .unterweisung, .warnkarte
+  .unterweisung, .warnkarte, .foyer-reihe
+  /* `.foyer-reihe` sind die drei Tafeln im Foyer der Reaction. Sie
+     hatten bis zum 08.10.2026 ihre eigene Flaeche
+     (`rgba(255,255,255,.045)`) -- also eine zweite Antwort auf die
+     Frage, wie eine Karte in diesem Haus aussieht, und eine
+     schlechtere: Auf dem Bildschirmfoto schien die Tapete durch, und
+     ueber einem hellen Hintergrundbild stand der Text ohne deckende
+     Flaeche darunter. Genau das meldet die Kontrastmessung als
+     „liegt auf der Buehne" -- nicht nachsehbar, nicht in Ordnung.
+     Jetzt tragen sie dasselbe Material wie die uebrigen 45. */
   /* `.profil-gruppe` stand hier und existiert nirgends -- ich hatte den
      Namen aus dem Kopf geschrieben statt aus der Datei. pruef-struktur
      hat es als totes CSS gemeldet. Die Karten auf profil.html heissen
@@ -9446,8 +9455,29 @@ body[data-ton] .kopfleiste__rechts > *:hover {
 /* Das Schild oben rechts. Es steht IN der Kachel und nicht daneben:
    Eine Marke, die neben der Kachel schwebt, verrutscht auf jedem
    zweiten Geraet. */
+/* ==== „GESCHLOSSEN" STEHT NICHT MEHR DA (08.10.2026) ==============
+
+   Filipe: „diese kachel soll nicht mehr geschlossen sein."
+
+   Und er hat recht, seit es das Foyer gibt: Die Kachel führt nicht
+   mehr in den Saal, sondern auf die Seite davor — und die ist IMMER
+   offen. Dort steht, was ansteht, und dort kann jeder ein Video
+   anraten, auch um drei Uhr nachts. Ein Schild „geschlossen" auf
+   einer Tür, hinter der etwas zu tun ist, hält Leute davon ab,
+   hineinzusehen.
+
+   DIE BEIDEN ANDEREN SCHILDER BLEIBEN. „gleich" und „● live" sagen
+   etwas, das man ohne sie nicht weiss, und zwar genau dann, wenn es
+   zählt. Das Schild ist deshalb an den Zustand gebunden statt an die
+   Kachel: `[data-stand="zu"]` bekommt gar keins mehr.
+
+   `content: ""` UND NICHT DIE GANZE REGEL WEG: Das `::after` trägt
+   auch die Fläche, auf der die beiden anderen Schilder stehen. Zwei
+   getrennte Regeln daraus zu machen hiesse, dieselben zwölf Zeilen
+   zweimal zu pflegen. */
 .kachel[data-sendung="ja"] .kachel__link::after {
-  content: "geschlossen";
+  content: "";
+  display: none;
   position: absolute;
   top: 12px; right: 12px;
   padding: 3px 9px 4px;
@@ -9461,6 +9491,10 @@ body[data-ton] .kopfleiste__rechts > *:hover {
   border: 1px solid color-mix(in srgb, var(--ton) 38%, transparent);
   backdrop-filter: blur(6px);
 }
+/* Und die beiden Zustaende, die etwas zu sagen haben, holen das
+   Schild zurueck. */
+.kachel[data-sendung="ja"][data-stand="vorbereitung"] .kachel__link::after,
+.kachel[data-sendung="ja"][data-stand="live"] .kachel__link::after { display: block; }
 .kachel[data-sendung="ja"][data-stand="vorbereitung"] .kachel__link::after { content: "gleich"; }
 .kachel[data-sendung="ja"][data-stand="live"] .kachel__link::after {
   content: "● live";

workspace/assets/js/meldung.js

@@ -325,6 +325,27 @@
     sendest_nicht:
       'Kamera und Mikro schaltet nur, wer gerade sendet – '
       + 'der Host oder ein Gast auf der Bühne.',
+    /* ---- Das Foyer: Termin und Vorschläge (08.10.2026) ---- */
+    termin_unklar:
+      'Das ist kein Datum. Nimm das Feld daneben — oder lass es leer, '
+      + 'dann liegt das Video einfach ohne Termin bereit.',
+    /* OHNE ZAHL, UND ZWAR ABSICHTLICH. Hier stand „fünf Vorschläge" —
+       dieselbe Zahl, die im Server `VORSCHLAEGE_JE_PERSON` heißt und
+       die diese Tafel nicht kennen kann. Wer sie dort ändert, hätte
+       hier einen Satz stehen lassen, der etwas anderes behauptet als
+       die Sperre, die gerade zugeschnappt ist. Wie viele es sind,
+       steht ohnehin im Foyer unter dem Formular — von dort, wo die
+       Zahl herkommt. */
+    zu_viele_vorschlaege:
+      'Du hast gerade zu viele Vorschläge offen. Warte, bis einer davon dran war — '
+      + 'eine Liste, die niemand mehr durchsieht, hilft keinem.',
+    vorschlag_doppelt:
+      'Dieses Video hat schon jemand angeraten. Es liegt bei DogFather und VanVan.',
+    steht_schon_bereit:
+      'Das liegt schon in der Warteschlange — es kommt also sowieso.',
+    nicht_deiner:
+      'Das ist nicht deiner. Zurückziehen kannst du nur, was du selbst '
+      + 'geschickt hast und worüber noch nicht entschieden ist.',
     /* ---- Die Einladung (08.10.2026) ---- */
     keine_einladung:
       'Für dich liegt gerade keine Einladung vor. '

workspace/assets/js/reaktion-foyer.js

@@ -0,0 +1,540 @@
+/* =====================================================================
+   DAS FOYER (08.10.2026)
+
+   Die Seite vor dem Saal. Drei Reihen:
+
+     LINKS   was ansteht -- nur fuer DogFather und VanVan
+     MITTE   der Weg hinein, sobald etwas laeuft oder gleich losgeht
+     RECHTS  Videos anraten -- jeder darf, niemand sieht fremde
+
+   ---------------------------------------------------------------------
+   HIER WIRD NUR GELESEN
+
+   Der Saal meldet jeden an, der ihn oeffnet, baut Verbindungen auf
+   und haelt den Ereignisstrom offen. Diese Seite tut nichts davon:
+   Sie holt den Stand, zeichnet ihn und fragt alle 20 Sekunden nach.
+   Erst der Knopf in der Mitte fuehrt hinein.
+
+   WARUM 20 SEKUNDEN UND KEIN EREIGNISSTROM: Ein Strom haelt eine
+   Verbindung offen, und manche Browser lassen nur sechs je Adresse
+   zu -- im Saal wird jede davon gebraucht. Das Foyer ist der
+   ruhigste Zustand des Hauses: kein Video, keine Kamera, kein Chat.
+   Eine Abfrage alle zwanzig Sekunden kostet dort nichts und kann
+   nicht haengenbleiben.
+   ===================================================================== */
+(() => {
+  'use strict';
+
+  const $ = (id) => document.getElementById(id);
+  const el = (art, klasse, text) => {
+    const n = document.createElement(art);
+    if (klasse) n.className = klasse;
+    if (text !== undefined) n.textContent = text;
+    return n;
+  };
+
+  let lage = null;
+  let raten = null;
+
+  async function hole(pfad, einstellungen) {
+    return fetch(pfad, { credentials: 'same-origin', ...(einstellungen || {}) });
+  }
+
+  function sagFehler(text) {
+    const f = $('fehler');
+    if (!f) return;
+    f.textContent = text;
+    f.hidden = false;
+    clearTimeout(sagFehler.uhr);
+    sagFehler.uhr = setTimeout(() => { f.hidden = true; }, 6000);
+  }
+
+  /** Maschinenworte werden uebersetzt -- dieselbe Tafel wie im ganzen
+   *  Haus. Wo sie nichts kennt, steht ein Satz und kein Schluessel. */
+  function melde(antwort, ersatz) {
+    const wort = antwort && antwort.fehler;
+    const satz = (window.sagWas && wort) ? window.sagWas(wort) : null;
+    sagFehler(satz || ersatz || 'Das hat gerade nicht geklappt.');
+  }
+
+  /* =================================================================
+     ZEIT UND DATUM -- IMMER DEUTSCH, IMMER DIESELBE FORM
+
+     „Do, 9. Okt, 20:30". Nicht „09.10.2026 20:30": Wer einen Plan
+     ueberfliegt, sucht den WOCHENTAG, nicht die Jahreszahl -- und
+     das Jahr steht ohnehin nur dann dabei, wenn es ein anderes ist.
+     ================================================================= */
+  function alsTermin(wert) {
+    if (!wert) return '';
+    const d = new Date(wert);
+    if (Number.isNaN(d.getTime())) return '';
+    const heute = new Date();
+    const gleichesJahr = d.getFullYear() === heute.getFullYear();
+    try {
+      return new Intl.DateTimeFormat('de-DE', {
+        weekday: 'short', day: 'numeric', month: 'short',
+        ...(gleichesJahr ? {} : { year: 'numeric' }),
+        hour: '2-digit', minute: '2-digit',
+      }).format(d);
+    } catch {
+      return d.toLocaleString('de-DE');
+    }
+  }
+
+  /** Ist dieser Termin schon vorbei? */
+  const vorbei = (wert) => {
+    const d = wert ? new Date(wert) : null;
+    return !!(d && !Number.isNaN(d.getTime()) && d.getTime() < Date.now());
+  };
+
+  const vorschaubild = (video) => `https://i.ytimg.com/vi/${video}/mqdefault.jpg`;
+
+  /* =================================================================
+     DIE MITTE
+     ================================================================= */
+  const WORTE = {
+    zu: 'Geschlossen',
+    vorbereitung: 'Gleich',
+    live: 'Auf Sendung',
+  };
+
+  function mitteZeichnen() {
+    const stand = lage?.stand || 'zu';
+    const lampe = $('lampe');
+    lampe.dataset.stand = stand;
+    $('lampe-wort').textContent = WORTE[stand] || '…';
+
+    /* ---- Das Bild ---- */
+    const kasten = $('saal-karte');
+    const bild = $('saal-bild');
+    const quelle = String(lage?.vorschau || '').trim()
+      || (lage?.video ? vorschaubild(lage.video) : '');
+    if (quelle) {
+      if (bild.getAttribute('src') !== quelle) bild.setAttribute('src', quelle);
+      kasten.dataset.bild = 'ja';
+      /* Ein Bild, das 404 antwortet, steht genauso im Dokument wie
+         eines, das laedt -- auf dem Bildschirm ist an seiner Stelle
+         nichts. Dann lieber der Platzhaltersatz. */
+      bild.onerror = () => { kasten.dataset.bild = 'nein'; };
+    } else {
+      bild.removeAttribute('src');
+      kasten.dataset.bild = 'nein';
+    }
+
+    /* ---- Titel und Satz ---- */
+    const titel = lage?.titel || lage?.video_titel || '';
+    $('saal-titel').textContent = stand === 'zu' && !titel
+      ? 'Gerade ist nichts angesetzt'
+      : (titel || 'Ohne Titel');
+    $('saal-titel').dataset.leer = (stand === 'zu' && !titel) ? 'ja' : 'nein';
+
+    const beginn = lage?.beginnt_am ? alsTermin(lage.beginnt_am) : '';
+    const satz = $('saal-satz');
+    if (stand === 'live') {
+      satz.textContent = 'Es läuft gerade. Du kannst jederzeit dazukommen — '
+        + 'alle sehen dieselbe Stelle.';
+    } else if (stand === 'vorbereitung') {
+      satz.textContent = beginn
+        ? `Der Wartebereich ist offen, Start um ${beginn}. Der Chat läuft schon.`
+        : 'Der Wartebereich ist offen. Der Chat läuft schon.';
+    } else {
+      satz.textContent = beginn
+        ? `Angesetzt: ${beginn}. Vorher geht hier nichts auf — schau später noch mal rein.`
+        : 'Sobald DogFather oder VanVan aufmachen, kannst du hier hinein.';
+    }
+    $('saal-leer').textContent = stand === 'zu'
+      ? 'Gerade läuft nichts.'
+      : 'Für diese Sendung gibt es kein Vorschaubild.';
+
+    /* ---- Der Knopf ----
+       ER STEHT NUR DA, WENN ER AUCH HINEINFUEHRT. Filipe: „in der
+       mitte sollen die leute dan wenn eine sendung läuft drauf
+       drücken können und der sendung beitreten. auch bei der
+       vorschau schon." Bei „zu" gibt es nichts zu betreten -- und
+       ein Knopf, der auf eine geschlossene Tuer fuehrt, ist
+       schlimmer als keiner. */
+    const knopf = $('saal-knopf');
+    const offen = stand === 'live' || stand === 'vorbereitung';
+    knopf.hidden = !offen;
+    $('saal-knopf-wort').textContent = stand === 'live'
+      ? 'Jetzt beitreten' : 'In den Wartebereich';
+    knopf.dataset.stand = stand;
+
+    /* ---- Wie viele dabei sind ----
+       NUR DIE ZAHL, nie die Namen -- dieselbe Regel wie im Saal: Wer
+       zusieht, soll nicht ablesen koennen, wer sonst noch zusieht.
+       Und nur, wenn ueberhaupt jemand da ist: „0 dabei" ist keine
+       Auskunft, sondern eine Enttaeuschung. */
+    const zahl = $('saal-zahl');
+    const wie = Number(lage?.dabei) || 0;
+    zahl.hidden = !(offen && wie > 0);
+    zahl.textContent = wie === 1 ? '1 ist schon dabei' : `${wie} sind schon dabei`;
+  }
+
+  /* =================================================================
+     LINKS: DER PLAN  (nur fuer die zwei)
+     ================================================================= */
+  function planZeichnen() {
+    const reihe = $('reihe-plan');
+    /* `liste` bekommt nur, wer die Sendung fuehrt -- das entscheidet
+       der Server. Diese Seite fragt deshalb nicht nach der Rolle,
+       sondern danach, ob die Auskunft ueberhaupt gekommen ist. Eine
+       zweite Rollenliste im Browser waere die, die irgendwann von
+       der echten abweicht. */
+    const liste = Array.isArray(lage?.liste) ? lage.liste : null;
+    reihe.hidden = !liste;
+    if (!liste) return;
+
+    /* ==== NACH TERMIN, NICHT NACH PLATZ =========================
+       Im Pult ist die Reihenfolge die Aussage („was kommt als
+       Naechstes im Live"), hier der Termin („Donnerstag um acht").
+       Was keinen hat, steht hinten -- es liegt bereit, aber es ist
+       noch nichts verabredet. */
+    const sortiert = [
+      ...liste.filter((z) => z.wann).sort((a, b) => String(a.wann).localeCompare(b.wann)),
+      ...liste.filter((z) => !z.wann),
+    ];
+
+    const kasten = $('plan-liste');
+    kasten.textContent = '';
+    if (!sortiert.length) {
+      kasten.append(el('li', 'plan-leer',
+        'Noch nichts vorbereitet. Im Saal unter „Warteschlange“ anhängen.'));
+      return;
+    }
+    for (const z of sortiert) {
+      const zeile = el('li', 'plan-zeile');
+      if (z.wann) zeile.dataset.termin = vorbei(z.wann) ? 'vorbei' : 'ja';
+
+      const b = document.createElement('img');
+      b.className = 'plan-zeile__bild';
+      b.src = vorschaubild(z.video);
+      b.alt = '';
+      b.loading = 'lazy';
+      b.decoding = 'async';
+      zeile.append(b);
+
+      const text = el('div', 'plan-zeile__text');
+      const name = el('span', 'plan-zeile__titel', z.titel || z.video);
+      /* Holt YouTube den Namen nicht heraus, steht dort die Kennung --
+         kein erfundener Titel. Dieselbe Regel wie in der
+         Warteschlange. */
+      name.dataset.roh = z.titel ? 'nein' : 'ja';
+      name.title = z.titel || ('Kennung ' + z.video);
+      text.append(name);
+
+      const wann = el('span', 'plan-zeile__wann',
+        z.wann ? alsTermin(z.wann) : 'noch ohne Termin');
+      if (z.wann && vorbei(z.wann)) wann.textContent += ' · überfällig';
+      text.append(wann);
+      zeile.append(text);
+
+      kasten.append(zeile);
+    }
+  }
+
+  /* =================================================================
+     RECHTS: ANRATEN
+     ================================================================= */
+  const STAND_WORT = {
+    offen: 'wartet',
+    uebernommen: 'kommt dran',
+    abgelehnt: 'diesmal nicht',
+  };
+
+  function ratenZeichnen() {
+    if (!raten) return;
+    notizGrenze();
+    const darf = !!raten.darf_entscheiden;
+    const liste = raten.vorschlaege || [];
+
+    const zahl = $('raten-zahl');
+    zahl.hidden = !(darf && raten.offen > 0);
+    zahl.textContent = raten.offen === 1 ? '1 offen' : `${raten.offen} offen`;
+
+    $('raten-satz').textContent = darf
+      ? 'Was das Rudel euch anträgt. Nur ihr zwei seht das hier.'
+      : 'Schick uns ein Video, das wir zusammen schauen sollen. '
+        + 'Sehen tun das nur DogFather und VanVan.';
+
+    const kasten = $('raten-liste');
+    kasten.textContent = '';
+    if (!liste.length) {
+      kasten.append(el('li', 'raten-leer', darf
+        ? 'Noch nichts angeraten.'
+        : 'Von dir ist noch nichts dabei.'));
+    }
+
+    for (const v of liste) {
+      const zeile = el('li', 'raten-zeile');
+      zeile.dataset.stand = v.stand;
+
+      const b = document.createElement('img');
+      b.className = 'raten-zeile__bild';
+      b.src = vorschaubild(v.video);
+      b.alt = '';
+      b.loading = 'lazy';
+      b.decoding = 'async';
+      zeile.append(b);
+
+      const text = el('div', 'raten-zeile__text');
+      const name = el('span', 'raten-zeile__titel', v.titel || v.video);
+      name.dataset.roh = v.titel ? 'nein' : 'ja';
+      name.title = v.titel || ('Kennung ' + v.video);
+      text.append(name);
+
+      const unter = el('span', 'raten-zeile__unter');
+      /* Beim Host steht, WER es war; beim Einsender waere das er
+         selbst -- und eine Zeile, die einem den eigenen Namen
+         vorliest, ist Platz ohne Auskunft. */
+      unter.textContent = [
+        darf && v.name ? v.name : '',
+        STAND_WORT[v.stand] || v.stand,
+      ].filter(Boolean).join(' · ');
+      text.append(unter);
+
+      if (v.notiz) text.append(el('p', 'raten-zeile__notiz', v.notiz));
+      zeile.append(text);
+
+      const knoepfe = el('div', 'raten-zeile__knoepfe');
+      if (darf && v.stand === 'offen') {
+        const ja = el('button', 'raten-knopf raten-knopf--ja', 'Nehmen');
+        ja.type = 'button';
+        ja.title = 'In die Warteschlange legen';
+        ja.addEventListener('click', () => entscheiden(v.id, 'uebernehmen'));
+        const nein = el('button', 'raten-knopf', 'Diesmal nicht');
+        nein.type = 'button';
+        nein.addEventListener('click', () => entscheiden(v.id, 'ablehnen'));
+        knoepfe.append(ja, nein);
+      }
+      /* ==== WER DAS × BEKOMMT =================================
+         Die Leitung bei den ENTSCHIEDENEN (die offenen haben ihre
+         zwei Knoepfe), der Einsender bei seinen OFFENEN.
+
+         Der Einsender darf nur zurueckziehen, was noch nicht
+         entschieden ist: Was entschieden ist, ist Geschichte -- auch
+         fuer ihn. Koennte er einen abgelehnten loeschen, verschwaende
+         die Spur, dass ueberhaupt entschieden wurde, und derselbe
+         Vorschlag saehe beim naechsten Mal aus wie der erste. */
+      const wegErlaubt = darf ? v.stand !== 'offen' : v.stand === 'offen';
+      if (wegErlaubt) {
+        const weg = el('button', 'raten-knopf raten-knopf--weg', '×');
+        weg.type = 'button';
+        weg.title = darf ? 'Aus der Liste nehmen' : 'Zurückziehen';
+        weg.addEventListener('click', () => zurueckziehen(v.id));
+        knoepfe.append(weg);
+      }
+      if (knoepfe.children.length) zeile.append(knoepfe);
+
+      kasten.append(zeile);
+    }
+
+    /* ==== DIE GRENZE KOMMT VOM SERVER, UND ZWAR EINMAL =============
+       Hier stand sie VIERMAL: dreimal als `raten.je_person_max || 5`
+       und einmal als ausgeschriebenes Wort „fünf“ im Satz. Das sind
+       vier Antworten auf eine Frage. Wer die Grenze im Server auf
+       drei setzt, hat danach einen Knopf, der bei drei sperrt, und
+       einen Satz, der von fünf redet -- und niemand merkt es, weil
+       beides fuer sich genommen stimmig aussieht.
+
+       Gerechnet wird mit dem, was angekommen ist. Ist nichts
+       angekommen, steht hier auch keine Zahl: Eine erfundene Grenze
+       waere schlimmer als gar keine, weil man ihr glaubt.
+
+       Dass man sie VORHER erfaehrt, bleibt der Punkt -- eine
+       Grenze, von der man erst beim Anstossen erfaehrt, ist eine
+       Falle. */
+    const grenze = Number(raten.je_person_max) || 0;
+    const offenEigene = liste.filter((v) => v.stand === 'offen').length;
+    const rest = grenze ? Math.max(0, grenze - offenEigene) : null;
+
+    const fuss = $('raten-fuss');
+    if (darf) {
+      fuss.textContent = 'Was du nimmst, landet unten in der Warteschlange.';
+    } else if (rest === null) {
+      fuss.textContent = '';
+    } else if (rest > 0) {
+      fuss.textContent = `Du kannst noch ${rest} ${rest === 1 ? 'Video' : 'Videos'} anraten.`;
+    } else {
+      fuss.textContent = `Du hast gerade ${grenze} offene Vorschläge — `
+        + 'warte, bis einer dran war.';
+    }
+    $('raten-los').disabled = !darf && rest === 0;
+  }
+
+  function restZeigen() {
+    const feld = $('raten-notiz');
+    const wort = $('raten-rest');
+    /* ==== KEINE ERSATZZAHL MEHR ====================================
+       Hier stand `feld.maxLength || 200`. Die 200 war eine Abschrift
+       von `VORSCHLAG_NOTIZ_MAX` im Server -- die dritte Stelle, an
+       der dieselbe Zahl stand. Jetzt lernt das Feld sie vom Server
+       (siehe `notizGrenze()`), und diese Funktion liest nur noch ab.
+       Ist sie noch nicht angekommen, meldet `maxLength` -1; dann
+       steht hier NICHTS. „noch -1“ waere schlimmer als keine Zahl. */
+    const max = feld.maxLength;
+    if (!(max > 0)) { wort.textContent = ''; return; }
+    const rest = max - feld.value.length;
+    /* DIE ZAHL STEHT ERST DA, WENN ES ENG WIRD. Ein Zaehler, der von
+       Anfang an mitlaeuft, macht aus einem Satz eine Aufgabe. */
+    wort.textContent = rest <= 40 ? `noch ${rest}` : '';
+  }
+
+  /** Die Laenge der Notiz kommt vom Server und wird dem Feld
+   *  angelegt. Einmal, und nur wenn sie sich geaendert hat -- ein
+   *  `maxLength`, das bei jedem Zeichnen neu gesetzt wird, setzt in
+   *  manchen Browsern den Einfuegezeiger zurueck. */
+  function notizGrenze() {
+    const grenze = Number(raten?.notiz_max) || 0;
+    if (!grenze) return;
+    const feld = $('raten-notiz');
+    if (feld.maxLength === grenze) return;
+    feld.maxLength = grenze;
+    restZeigen();
+  }
+
+  async function abschicken(e) {
+    e.preventDefault();
+    const video = $('raten-video').value.trim();
+    if (!video) { sagFehler('Trag erst eine YouTube-Adresse ein.'); return; }
+    const knopf = $('raten-los');
+    knopf.disabled = true;
+    try {
+      const a = await hole('/workspace/api/reaktion/vorschlag', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ video, notiz: $('raten-notiz').value.trim() }),
+      });
+      if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging gerade nicht.'); return; }
+      $('raten-video').value = '';
+      $('raten-notiz').value = '';
+      restZeigen();
+      sagFehler('Danke — angekommen. DogFather und VanVan sehen es.');
+      await ratenHolen();
+    } catch { sagFehler('Das ging gerade nicht.'); }
+    finally { knopf.disabled = false; }
+  }
+
+  async function entscheiden(id, was) {
+    /* ==== DIE ZWEI WEGE STEHEN AUSGESCHRIEBEN DA ===================
+       Vorher hiess es `/vorschlag/${id}/${was}` -- eine Zeile fuer
+       beide Wege, und im Quelltext stand nirgends, welche Woerter
+       fuer `was` ueberhaupt erlaubt sind. `pruef-struktur` hat
+       daraufhin „…/vorschlag/1/1“ gemeldet: Sie setzt in jeden
+       Platzhalter eine 1 ein und kann nicht wissen, dass der zweite
+       „uebernehmen“ oder „ablehnen“ heisst.
+       Das war zu Recht ein Fehler -- ein naechster Leser weiss es
+       genauso wenig. Jetzt stehen beide Adressen vollstaendig da,
+       ein Schreibfehler faellt beim Lesen auf, und die Pruefung
+       findet wieder, was sie pruefen soll. */
+    const weg = was === 'uebernehmen'
+      ? `/workspace/api/reaktion/vorschlag/${id}/uebernehmen`
+      : `/workspace/api/reaktion/vorschlag/${id}/ablehnen`;
+    const a = await hole(weg, { method: 'POST' });
+    if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
+    /* Beim Uebernehmen wandert es in die Warteschlange -- also muss
+       auch der Plan links nachziehen. Eine der beiden Reihen allein
+       zu zeichnen hiesse, dass links ein Video fehlt, das rechts
+       eben angenommen wurde. */
+    await Promise.all([standHolen(), ratenHolen()]);
+  }
+
+  async function zurueckziehen(id) {
+    const a = await hole(`/workspace/api/reaktion/vorschlag/${id}`, { method: 'DELETE' });
+    if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
+    await ratenHolen();
+  }
+
+  /* =================================================================
+     HOLEN
+     ================================================================= */
+  async function standHolen() {
+    try {
+      const a = await hole('/workspace/api/reaktion');
+      if (!a.ok) return;
+      lage = await a.json();
+      mitteZeichnen();
+      planZeichnen();
+      kopfSatz();
+    } catch { /* beim naechsten Takt wieder */ }
+  }
+
+  async function ratenHolen() {
+    try {
+      const a = await hole('/workspace/api/reaktion/vorschlaege');
+      if (!a.ok) return;
+      raten = await a.json();
+      ratenZeichnen();
+    } catch { /* die Reihe bleibt stehen, wie sie war */ }
+  }
+
+  /* ==== DER SATZ OBEN NENNT KEINE RICHTUNGEN MEHR ==================
+
+     Hier stand: „Gerade läuft nichts. Links steht, was ansteht;
+     rechts kannst du etwas anraten.“ Zwei Fehler in einem Satz, und
+     beide derselbe:
+
+       * „Links“ gibt es für die Community überhaupt nicht — der
+         Plan ist nur für DogFather und VanVan da. Der Satz zeigte
+         also ALLEN außer DogFather und VanVan auf einen leeren Rand.
+       * Und am Telefon stehen die Reihen übereinander. Dort ist
+         „links“ und „rechts“ auch für die zwei falsch.
+
+     Eine Richtung im Text ist eine Aussage über das Aussehen — und
+     das Aussehen ändert sich mit dem Bildschirm und mit der Rolle.
+     Das ist dieselbe Falle wie eine feste Pixelzahl: Sie stimmt, bis
+     jemand etwas verschiebt, und wird dann still falsch. Gesagt wird
+     deshalb, WAS geht, nicht WO es steht.
+
+     Dass der Plan da ist, wird nicht aus der Rolle geschlossen,
+     sondern daran gemessen, ob die Auskunft gekommen ist — dieselbe
+     Frage wie in `planZeichnen()`, und nur eine Antwort darauf. */
+  function kopfSatz() {
+    const stand = lage?.stand || 'zu';
+    const mitPlan = Array.isArray(lage?.liste);
+    $('kopf-satz').textContent = stand === 'live'
+      ? 'Es läuft gerade — du kannst jederzeit dazukommen.'
+      : stand === 'vorbereitung'
+        ? 'Gleich geht es los. Der Wartebereich ist schon offen.'
+        : mitPlan
+          ? 'Gerade läuft nichts. Was ansteht, steht im Plan — und was '
+            + 'das Rudel anträgt, wartet auf euch.'
+          : 'Gerade läuft nichts. Du kannst uns aber jederzeit ein Video anraten.';
+  }
+
+  /* =================================================================
+     LOS
+     ================================================================= */
+  function los() {
+    $('raten-form').addEventListener('submit', abschicken);
+    $('raten-notiz').addEventListener('input', restZeigen);
+    restZeigen();
+
+    standHolen();
+    ratenHolen();
+
+    /* ==== ALLE ZWANZIG SEKUNDEN NACHFRAGEN ====================
+       Damit jemand, der das Foyer offen stehen laesst, den Start
+       mitbekommt. Ein Ereignisstrom waere genauer und haelt dafuer
+       eine Verbindung offen -- im Saal wird jede davon gebraucht
+       (manche Browser lassen nur sechs je Adresse zu).
+
+       UND NICHT, WENN DER REITER IM HINTERGRUND LIEGT. Ein Foyer,
+       das jemand seit gestern offen hat, soll den Server nicht alle
+       zwanzig Sekunden fragen. Beim Zurueckkommen wird sofort
+       einmal geholt -- dann steht der Stand von JETZT da und nicht
+       der von gestern. */
+    setInterval(() => {
+      if (document.visibilityState === 'visible') standHolen();
+    }, 20000);
+    document.addEventListener('visibilitychange', () => {
+      if (document.visibilityState === 'visible') { standHolen(); ratenHolen(); }
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', los);
+  } else {
+    los();
+  }
+})();

workspace/assets/js/reaktion.js

@@ -1601,7 +1601,7 @@
             audio: { ...tonVorgaben(), deviceId: undefined },
           });
           sagFehler('Das eingestellte Gerät ist gerade nicht da — es läuft über '
-            + 'das Standardgerät. Im Register „Ton" kannst du es neu wählen.');
+            + 'das Standardgerät. Im Register „Ton“ kannst du es neu wählen.');
           await geraeteHolen();
           geraeteZeichnen();
           kamerasZeichnen();
@@ -1624,7 +1624,7 @@
     if (!istPult(name)) return;
     const h = $('geraete-hinweis');
     if (h) {
-      h.textContent = `Es sieht aus, als hinge ein Mischpult dran („${name}"). `
+      h.textContent = `Es sieht aus, als hinge ein Mischpult dran („${name}“). `
         + 'Mit dem Pultmodus lässt die Seite den Ton so, wie das Pult ihn liefert.';
       h.dataset.vorschlag = 'ja';
     }
@@ -3716,7 +3716,7 @@
       tausch.textContent = lage.video
         ? 'Jetzt wechseln'
         : 'Erst ein Video eintragen';
-      tausch.title = lage.video ? `Umschalten auf „${kurz}"` : '';
+      tausch.title = lage.video ? `Umschalten auf „${kurz}“` : '';
     }
   }
 
@@ -3735,7 +3735,7 @@
        einer Sendung drückt man dann ein zweites Mal. Jetzt steht
        einen Augenblick lang da, was bereitliegt. */
     sagKurz(lage.zweit && lage.zweit.video
-      ? 'Bereitgelegt. Mit „Jetzt wechseln" springst du hin und zurück.'
+      ? 'Bereitgelegt. Mit „Jetzt wechseln“ springst du hin und zurück.'
       : 'Der zweite Platz ist jetzt leer.');
     /* Der Name kommt von YouTube nach -- nach anderthalb Sekunden
        steht er da, ohne dass jemand neu laden muss. */
@@ -4530,6 +4530,61 @@
       name.title = z.titel || ('Kennung ' + z.video);
       zeile.append(name);
 
+      /* ==== WANN ES LAUFEN SOLL (08.10.2026) ====================
+
+         Filipe: „links eine reihe wo die nächsten geplanten videos
+         schon bereit stehen. wan und umd wie viel uhr."
+
+         DER TERMIN STEHT AN DER ZEILE UND NICHT IN EINER ZWEITEN
+         LISTE. Die Warteschlange ist ohnehin die Liste der Dinge,
+         die anstehen -- sie überlebt das Beenden einer Sendung
+         ausdrücklich. Eine eigene Tabelle „Sendeplan" daneben wären
+         zwei Antworten auf „was schauen wir als Nächstes", und
+         spätestens beim ersten Verschieben liefen sie auseinander.
+
+         LEER IST GÜLTIG und der Normalfall: „liegt bereit, aber noch
+         ohne Termin". Ein Pflichtfeld hätte aus einer Vorbereitung
+         eine Verabredung gemacht.
+
+         GESPEICHERT WIRD BEI `change`, NICHT BEI `input`. Ein
+         Datumsfeld meldet jeden Tastendruck -- beim Tippen von
+         „09.10.2026" wären das sechs Aufrufe mit sechs Zuständen,
+         von denen fünf Unsinn sind (Jahr 0009). `change` kommt
+         einmal, wenn der Wert fertig ist. */
+      const wann = document.createElement('input');
+      wann.type = 'datetime-local';
+      wann.className = 'warte-zeile__wann';
+      wann.title = 'Wann es laufen soll — leer heißt „noch ohne Termin“';
+      wann.setAttribute('aria-label', 'Termin für ' + (z.titel || z.video));
+      if (z.wann) {
+        const d = new Date(z.wann);
+        if (!Number.isNaN(d.getTime())) {
+          const p = (n) => String(n).padStart(2, '0');
+          wann.value = `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`
+            + `T${p(d.getHours())}:${p(d.getMinutes())}`;
+        }
+      }
+      /* Das Stilblatt kann an einem Eingabefeld nicht ablesen, ob
+         etwas darin steht: Ein `value`, das das Programm als
+         Eigenschaft setzt, taucht im Attribut nicht auf. Also
+         hinschreiben. */
+      wann.dataset.gesetzt = wann.value ? 'ja' : 'nein';
+      wann.addEventListener('change', async () => {
+        wann.dataset.gesetzt = wann.value ? 'ja' : 'nein';
+        const a = await hole(`/workspace/api/reaktion/liste/${z.id}/wann`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ wann: wann.value ? new Date(wann.value).toISOString() : '' }),
+        });
+        if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
+        lage = { ...(await a.json()) };
+        zeichnen();
+        sagKurz(wann.value
+          ? 'Termin gesetzt — er steht jetzt im Foyer.'
+          : 'Termin weg. Das Video bleibt bereitgelegt.');
+      });
+      zeile.append(wann);
+
       const knoepfe = el('div', 'warte-zeile__knoepfe');
       const jetzt = el('button', null, 'Jetzt');
       jetzt.type = 'button';