Die Regieleiste steht jetzt über dem Saal

Filipe: „ich hätte das gerne oben also nicht in dieser kachel sondern
über der kachel wo die videos laufen werden und das soll extrem
perfektioniert werden."

WARUM DAS MEHR IST ALS EIN UMHÄNGEN
Die Register standen INNERHALB des einklappbaren Teils. Wer die Regie
zuklappte, um mehr Bild zu haben, hatte sie nicht mehr — und genau
dann braucht man sie. Oben ändert sich ihre Aufgabe: aus dem
Inhaltsverzeichnis einer Schublade wird eine Steuerleiste über der
Sendung. Daraus folgen vier Dinge, die vorher nicht nötig waren:

1. EIN REGISTER MACHT DIE ZUGEKLAPPTE REGIE AUF. Vorher wechselte nur
   der Reiter, die Tafel lag im zugeklappten Teil — sichtbar passierte
   nichts. Nur auf, nie zu: Zugemacht wird mit dem Griff. Ein Knopf,
   der beim zweiten Druck das Gegenteil tut, versteckt irgendwann
   etwas, das jemand gerade liest.

2. SIE BRICHT NICHT UM, SIE ROLLT. Sieben Register in zwei Zeilen
   kosten am oberen Rand rund 90 px — und zwar dem Video. Gemessen:
   eine Zeile auf 1440 px wie auf 390 px, dort mit Einrasten und
   weichen Rändern als Auskunft, dass es weitergeht.

3. SIE LÖST EIN, WAS `role="tablist"` VERSPRICHT. Pfeiltasten wandern,
   Pos1/Ende springen, genau ein Register liegt in der Tabulatorfolge.
   Steht die Rolle im Markup und tut das Programm es nicht, sagt ein
   Vorleser etwas an, was nicht stimmt — schlimmer als keine Rolle.
   Gemessen wird das gedrückt, nicht gelesen: fünf Tastendrücke, und
   Fokus, Auswahl und offene Tafel müssen jedes Mal dasselbe sagen.

4. EINE GLEITENDE MARKE zeigt, wo man steht — Glas mit Lichtkante,
   darunter ein roter Streifen zur offenen Tafel. Ist die Regie
   zugeklappt, wird er leise: Der Streifen führt dann nirgendwohin.
   Dazu ein Schild „Regie" links (am Handy weg), damit die sieben
   Wörter am oberen Rand nicht wie eine zweite Navigation aussehen.

DER FEHLER, DER MICH ZWEI ANLÄUFE GEKOSTET HAT
Die Leiste war im Browser 1 px hoch, ihre Register standen 55 px hoch
daneben und ragten über das Video. Ursache: 900 Zeilen weiter unten
stand eine ZWEITE `grid-template-rows` für `.saal` (aus der Zeit, als
der Saal zwei Zeilen hatte). Sie stand später und gewann — die Leiste
landete in der `1fr`-Zeile und bekam null Pixel.

Und fast hätte ich das Falsche repariert: Beim Durchprobieren habe ich
`style.gridTemplateRows` gesetzt — ein Stilattribut schlägt jede Regel
im Stilblatt. Damit „funktionierten" `auto` und `min-content` gleich
gut, weil beide die zweite Regel aushebelten, und es sah nach einem
Unterschied zwischen den beiden aus. Erst nach dem Entfernen der
Doppelung hat die Gegenprobe gezeigt: `auto` tut es genauso. Eine
Probe, die mehr ändert als das, wonach man sucht, beantwortet eine
andere Frage. Es gibt jetzt eine Prüfung, dass genau EINE Regel die
Zeilen des Saals bestimmt.

ZWEI WEITERE FUNDE AUS DER MESSUNG
Am Handy blieben bei offener Regie 131 px für das Bild — ein Streifen.
Mein erster Versuch (62dvh → 52dvh) machte es auf 75 px SCHLECHTER:
Die Ursache lag woanders, die Leiste des Pults bricht dort in vier
Zeilen um und ist rund 200 px hoch, wovon ein Anteil der Fensterhöhe
nichts wissen kann. Mit `min(52dvh, 19rem)` sind es 210 px.

Und die Spendenkarte wurde als „steht aus dem Bild heraus" gemeldet:
413 statt 430 px, links −1. 413 ist genau das 0,96-fache — die Messung
hatte die Karte im Ausblenden erwischt. Sie wartet jetzt auf
`data-da="ja"` und misst nur, was ganz da ist.

GEPRUEFT
pruef-reaktion 280 (vorher 260), 0 Fehler — Abschnitt 18 neu.
mess-reaktion: Rückgabewert 0, kein ACHTUNG; misst die Leiste jetzt
auf 1440 und auf 390 px, samt Tastatur und Aufklappen.
Dazu grün: handy, buehne, struktur, css-klassen, tippziele.

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

workspace/assets/css/reaktion.css

@@ -56,12 +56,97 @@
 .saal {
   position: relative;
   display: grid;
+  /* ==== DREI ZEILEN, UND NUR DIE MITTLERE DEHNT SICH ===============
+
+     Vorher standen hier nur zwei Kinder und gar keine Zeilenangabe --
+     der Browser verteilte den Platz zwischen Saal und Regie, wie er
+     wollte. Mit der Regieleiste oben wären es drei, und das Bild
+     hätte gegen zwei Leisten um Platz gekämpft.
+
+     `minmax(0, 1fr)` und nicht `1fr`: Ein Raster-Kind mit `1fr` hat
+     eine Mindestgröße von `auto` — es kann also größer werden als
+     sein Anteil, wenn sein Inhalt das verlangt, und schiebt dann
+     alles darunter aus dem Fenster. Genau das ist am 28.09. mit der
+     Regie passiert (197 px Überlauf). Die Null nimmt ihm das Recht.
+
+     DIESE ANGABE STEHT NUR HIER — und das ist der eigentliche
+     Punkt. Bis zum 28.09.2026 gab es 900 Zeilen weiter unten eine
+     ZWEITE (`minmax(0, 1fr) auto`, aus der Zeit, als der Saal zwei
+     Zeilen hatte). Sie stand später in der Datei und gewann: Die
+     Regieleiste landete in der `1fr`-Zeile, bekam null Pixel, und
+     ihre Register ragten über das Video.
+
+     WIE MICH DAS FAST IN DIE FALSCHE REPARATUR GEFÜHRT HÄTTE: Ich
+     habe im Browser vier Möglichkeiten durchprobiert und dabei
+     `style.gridTemplateRows` gesetzt — ein Stilattribut am Element
+     schlägt JEDE Regel im Stilblatt. Damit sah es so aus, als läge
+     es an `auto` gegen `min-content`; beide „funktionierten", weil
+     beide die zweite Regel aushebelten. Erst nachdem die Doppelung
+     weg war, hat die Gegenprobe gezeigt: `auto` tut es genauso.
+     Eine Probe, die mehr ändert als das, wonach man sucht,
+     beantwortet eine andere Frage. */
+  grid-template-rows: auto minmax(0, 1fr) auto;
   /* Die Kopfleiste ist 69 px hoch (gemessen, nicht geschätzt -- siehe
      pruef-handy, das sie über alle Breiten abmisst). */
   height: calc(100dvh - 69px);
   padding: 0;
   max-width: none;
 }
+.regieleiste { grid-row: 1; }
+#teil-zu, #teil-warte, #teil-live { grid-row: 2; }
+.pult { grid-row: 3; }
+
+/* =====================================================================
+   DIE REGIELEISTE — über dem Saal (28.09.2026)
+
+   Filipe: „ich hätte das gerne oben also nicht in dieser kachel
+   sondern über der kachel wo die videos laufen werden."
+
+   SIE IST FLACH UND DUNKEL. Eine Leiste am oberen Rand steht neben
+   dem Video und über allem, was im Saal passiert — alles, was dort
+   selbst leuchtet, zieht den Blick vom Bild weg. Sie bekommt deshalb
+   keine Farbe, nur eine Kante nach unten und einen Hauch Licht
+   darüber, damit sie als Körper lesbar bleibt und nicht als Strich.
+   ===================================================================== */
+.regieleiste {
+  position: relative;
+  z-index: 50;
+  min-width: 0;
+  /* Schild und Register nebeneinander. Das Schild steht AUSSERHALB
+     des rollenden Teils -- es soll stehenbleiben, wenn die Register
+     unter dem Finger wandern. */
+  display: flex; align-items: stretch;
+  padding: 0;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 60%),
+    rgba(7, 6, 13, .96);
+  border-bottom: 1px solid var(--rand-hell);
+  box-shadow: 0 10px 26px -20px #000;
+  backdrop-filter: blur(16px) saturate(1.15);
+  -webkit-backdrop-filter: blur(16px) saturate(1.15);
+}
+.regieleiste[hidden] { display: none; }
+
+/* Das Schild. Klein, gesperrt, leise -- es soll benennen, nicht
+   rufen. Rechts eine haarfeine Kante als Trennung; ein Abstand
+   allein liest sich bei sieben Wörtern daneben nicht als Grenze. */
+.regieleiste__schild {
+  flex: none;
+  display: flex; align-items: center;
+  padding: 0 14px 0 16px;
+  margin-right: 4px;
+  border-right: 1px solid var(--rand);
+  font-size: .68rem; font-weight: 800;
+  letter-spacing: .22em; text-transform: uppercase;
+  color: color-mix(in srgb, var(--schrift-leise) 72%, transparent);
+  user-select: none;
+}
+/* AM HANDY WEG. Dort zählt jeder Millimeter für die Register
+   selbst -- und wer die Regie auf dem Handy öffnet, weiß, was er
+   geöffnet hat. */
+@media (max-width: 560px) {
+  .regieleiste__schild { display: none; }
+}
 
 /* ---------------------------------------------------------------------
    DAS SCHILD
@@ -896,19 +981,17 @@
    mit `1fr auto`; klappt das Pult auf, wird der Kinosaal darueber
    von selbst kleiner. Nichts wird verdeckt, und niemand muss eine
    Hoehe ausrechnen, die spaeter nicht mehr stimmt. */
-/* 197 PIXEL ZUM SCROLLEN -- gemessen am 28.09.2026, sobald die Regie
-   aufgeklappt war.
+/* DIE ZEILEN DES SAALS STEHEN GANZ OBEN, BEI `.saal` -- und nur
+   dort. Hier stand bis zum 28.09.2026 eine zweite Angabe
+   (`minmax(0, 1fr) auto`), aus der Zeit, als der Saal zwei Zeilen
+   hatte. Sie stand SPAETER in der Datei und gewann damit gegen die
+   dreizeilige oben: Die Regieleiste landete in der `1fr`-Zeile,
+   bekam null Pixel, und ihre Register ragten ueber das Video.
 
-   `1fr` heisst nicht „nimm, was uebrig ist", sondern
-   `minmax(auto, 1fr)`: Die Zeile darf nie kleiner werden als ihr
-   Inhalt. Der Kinosaal hat aber einen Mindestinhalt, und mit
-   aufgeklapptem Pult passte beides nicht mehr in die Hoehe -- also
-   wuchs die Seite nach unten. Wer sendet, scrollte dann mitten in
-   der Sendung, um an das Bild oder an die Knoepfe zu kommen.
-
-   `minmax(0, 1fr)` erlaubt der Zeile zu schrumpfen. Der Kinosaal
-   wird kleiner, der Chat rollt in sich -- was er ohnehin tut. */
-.saal { grid-template-rows: minmax(0, 1fr) auto; }
+   Gemessen war das `0px 491px 340px` -- und im Quelltext oben stand
+   die ganze Zeit die richtige Angabe. Zwei Regeln, die dieselbe
+   Frage beantworten, sind keine Sicherheit, sondern die Garantie,
+   dass eine davon irgendwann falsch ist. */
 
 .pult {
   z-index: 60;
@@ -1071,33 +1154,119 @@
      Regie 459 -- die Knoepfe waren groesser als das, worum es geht.
      Mit 19rem bleibt das Bild der groessere Teil, und die
      Sendungs-Tafel (264 Pixel) passt trotzdem ohne Rollen hinein. */
-  max-height: min(40dvh, 19rem);
+  /* 17rem SEIT DEM 28.09., VORHER 19. Die Register sind aus diesem
+     Teil heraus nach oben gewandert; sie waren hier rund 47 Pixel
+     hoch. Die Sendungs-Tafel misst 264 Pixel und passt damit
+     weiterhin ohne Rollen hinein — die 32 Pixel Unterschied gehen
+     an das Bild zurück. */
+  max-height: min(40dvh, 17rem);
   overflow-y: auto;
 }
 .pult[data-auf="ja"] .pult__innen { display: grid; }
 
-/* ---- Die Register ----------------------------------------------------- */
+/* ---- Die Register -----------------------------------------------------
+
+   SIE BRECHEN NICHT UM, SIE ROLLEN. Sieben Register in zwei Zeilen
+   kosten am oberen Rand rund 90 Pixel — und zwar dem Video, um das
+   es geht. Waagerecht rollen kostet null.
+
+   `scroll-snap` rastet das angefasste Register mittig ein; ohne das
+   bleibt auf dem Handy regelmäßig eines halb angeschnitten stehen,
+   und ein halber Knopf sieht aus wie ein Fehler. */
 .reiter {
-  display: flex; gap: 4px; flex-wrap: wrap;
-  padding: 4px;
-  border-radius: 13px;
-  background: rgba(0, 0, 0, .35);
-  border: 1px solid var(--rand);
+  position: relative;
+  display: flex; gap: 4px; flex-wrap: nowrap;
+  padding: 5px 10px 6px;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x proximity;
+  scrollbar-width: none;
+  /* AN DEN RAENDERN VERLAEUFT SIE. Das ist die einzige Auskunft
+     darüber, dass rechts noch etwas kommt — eine Rollleiste zeigen
+     Mac und Handy von sich aus nicht an. */
+  mask-image: linear-gradient(90deg, transparent, #000 14px,
+    #000 calc(100% - 14px), transparent);
 }
+.reiter::-webkit-scrollbar { display: none; }
 .reiter__knopf {
   appearance: none; cursor: pointer;
+  position: relative;
   display: inline-flex; align-items: center; gap: 7px;
-  min-height: 38px; padding: 0 14px;
-  border: 0; border-radius: 10px;
+  /* 44 PX UND NICHT MEHR 38. In der Schublade war das ein Reiter
+     unter vielen; oben am Rand ist es das Erste, wonach ein Daumen
+     greift. Die Hausgröße für Fingerziele ist 44. */
+  min-height: 44px; padding: 0 15px;
+  flex: none;
+  scroll-snap-align: center;
+  border: 0; border-radius: 11px;
   background: none;
   color: var(--schrift-leise);
   font-size: .82rem; font-weight: 700;
+  white-space: nowrap;
+  transition: color .16s ease, background-color .16s ease;
 }
+.reiter__knopf:hover { color: var(--schrift); }
+/* DIE FLAECHE MACHT DIE MARKE, DIE FARBE MACHT DER KNOPF.
+   Zwei Anzeigen für dieselbe Sache -- aber nur eine davon rechnet.
+   Vorher trugen beide eine Füllung, und die feste verdeckte die
+   gleitende. */
 .reiter__knopf[aria-selected="true"] {
-  background: rgba(255, 255, 255, .08);
-  color: var(--schrift);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
+  color: #fff;
+  letter-spacing: .01em;
 }
+
+/* ---- Die gleitende Marke ----------------------------------------------
+   Sie liegt IN der rollenden Leiste, nicht darüber — dadurch wandert
+   sie beim Rollen von selbst mit, ohne dass jemand nachrechnen muss.
+   Ihre Lage setzt das Skript aus dem gemessenen Rechteck des
+   gewählten Knopfes.
+
+   UND SIE IST NICHT DIE EINZIGE ANZEIGE. Die Pille darunter bleibt
+   gefüllt. Sollte die Marke je aus dem Tritt geraten — Schrift lädt
+   nach, jemand zieht das Fenster —, ist die Auswahl trotzdem zu
+   sehen. Eine Anzeige, die rechnet, braucht eine daneben, die es
+   nicht tut. */
+.reiter__marke {
+  position: absolute;
+  left: 0; top: 0;
+  width: 0; height: 0;
+  z-index: 0;
+  border-radius: 11px;
+  /* Glas mit Lichtkante oben und Tiefe unten -- dieselbe Sprache
+     wie überall im Haus: Was obenauf liegt, bekommt oben Licht. */
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .045));
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .16),
+    inset 0 -1px 0 rgba(0, 0, 0, .3),
+    0 6px 16px -10px #000;
+  transform: translate(0, 0);
+  transition:
+    transform .3s cubic-bezier(.22, 1, .3, 1),
+    width .3s cubic-bezier(.22, 1, .3, 1);
+  pointer-events: none;
+}
+/* Der Streifen darunter führt zur Tafel, die gerade offen ist --
+   das ist die einzige Farbe in der ganzen Leiste. */
+.reiter__marke::after {
+  content: '';
+  position: absolute;
+  left: 12px; right: 12px; bottom: -5px;
+  height: 2px;
+  border-radius: 2px;
+  background: linear-gradient(90deg,
+    transparent,
+    var(--an-hell) 25%, var(--an-hell) 75%,
+    transparent);
+  box-shadow: 0 0 10px -1px var(--an-hell);
+}
+/* IST DIE REGIE ZUGEKLAPPT, IST DIE TAFEL NICHT DA -- dann führt
+   der Streifen nirgendwohin und wird leise. Eine Auskunft, die
+   nichts kostet: Man sieht am Rand, ob unten etwas offen ist. */
+.saal:has(.pult[data-auf="nein"]) .reiter__marke::after { opacity: .28; }
+/* Solange nichts gemessen ist, gibt es sie nicht — eine Marke, die
+   bei null anfängt und dann springt, sieht nach Fehler aus. */
+.reiter__marke[hidden] { display: none; }
 .reiter__zahl {
   min-width: 20px; padding: 1px 6px;
   border-radius: 999px;
@@ -1644,7 +1813,22 @@
   }
 
   .warte__buehne { gap: 18px; }
-  .pult__innen { max-height: 62dvh; }
+  /* 52dvh SEIT DEM 28.09., VORHER 62. Die Register sind nach oben
+     gewandert, und auf 844 Pixel Höhe blieben mit 62 nur 131 Pixel
+     für das Bild übrig -- ein Streifen, kein Video. Gemessen mit
+     52: 215 Pixel. Die Tafeln rollen ohnehin in sich; was hier
+     kleiner wird, ist die Höhe der Schublade, nicht ihr Inhalt. */
+  /* GEMESSEN UND NICHT GESCHAETZT. Vorher 62dvh -- damit blieben auf
+     844 Pixel Höhe 131 Pixel für das Bild übrig, ein Streifen. Mit
+     52dvh wurden es 75: schlechter, nicht besser. Der Grund stand
+     woanders — die Leiste des Pults bricht am Handy in vier Zeilen
+     um und ist dort rund 200 Pixel hoch, nicht 67. Ein Anteil der
+     Fensterhöhe kann davon nichts wissen.
+     Also eine feste Obergrenze daneben: 19rem sind 304 Pixel, und
+     200 + 304 lassen dem Video 217 — genug für ein 16:9-Bild auf
+     390 Pixel Breite (219). Die Tafeln rollen in sich; kleiner wird
+     die Schublade, nicht ihr Inhalt. */
+  .pult__innen { max-height: min(52dvh, 19rem); }
 
   /* ==== DIE REGIE AM HANDY ======================================
      Die Leiste bleibt -- sie ist der Teil, den man im Notfall
@@ -1657,10 +1841,10 @@
   .laufzeit__zahl { font-size: .98rem; }
   .tun { padding: 0 13px; font-size: .8rem; }
   .pult__innen { padding: 11px 12px 14px; }
-  /* Die Register rollen waagerecht statt umzubrechen: Fünf Reiter in
-     zwei Zeilen sehen aus wie zehn Knöpfe. */
-  .reiter { flex-wrap: nowrap; overflow-x: auto; }
-  .reiter__knopf { white-space: nowrap; }
+  /* Die Register rollen auf JEDER Breite waagerecht -- das steht
+     jetzt in der Grundregel. Am Handy wird nur enger gefasst. */
+  .reiter { padding: 4px 8px 5px; gap: 3px; }
+  .reiter__knopf { padding: 0 12px; font-size: .8rem; }
   .regler-reihe { gap: 8px; }
   .regler { padding: 9px 9px 8px; }
   .regler input[type="range"], .pegel { height: 76px; }
@@ -1673,6 +1857,7 @@
   .buehne-schild__punkt,
   .lampe__punkt { animation: none !important; }
   .pult__klapp svg,
+  .reiter__marke,
   .pegel i { transition: none !important; }
 }
 
@@ -1902,6 +2087,7 @@
    ===================================================================== */
 body[data-nur="buehne"] .kopfleiste,
 body[data-nur="buehne"] .schiene,
+body[data-nur="buehne"] .regieleiste,
 body[data-nur="buehne"] .pult,
 body[data-nur="buehne"] .buehne-schild,
 body[data-nur="buehne"] .senderleiste,