Die Regie steht links neben dem Video, nicht nur unten

Filipe, 28.09.2026: "anstatt alles nur unten zu haben wieso nicht
rechts und links noch ausnutzen um mehr ueberblick zu haben."

ICH HATTE IHN ZWEIMAL FALSCH VERSTANDEN. Beim ersten Mal baute ich
zwei Spalten INNERHALB der unteren Leiste, beim zweiten Mal Kacheln
darin. Gemeint war der BILDSCHIRM: Die Regie klebte als 272 Pixel
hoher Streifen unten, waehrend darueber das ganze Bild frei war. Man
sah entweder das Video oder die Bedienung.

AUFGEKLAPPT steht sie jetzt LINKS neben dem Video, ueber die volle
Hoehe. Rechts der Chat, unten die Senderleiste und der Transport --
die Anordnung jedes Sendepults: Was man bedient, liegt neben dem, was
man dabei ansieht.

ZUGEKLAPPT bleibt alles wie vorher, eine schmale Leiste unten. Wer
die Regie zumacht, will das Bild gross; eine leere Spalte daneben
waere das Gegenteil.

WAS DAS NEBENBEI LOEST: Die Kacheln hatten unten 272 Pixel fuer sich
-- drei Felder untereinander passten nicht hinein, und die
Transportleiste verdeckte den Rest. In einer Spalte stehen rund 700
Pixel zur Verfuegung. Die Enge war nie eine Frage der Gestaltung,
sondern des Platzes.

DER TRANSPORT VERLAESST DAS REGISTER. Er lag in "Sendung" und war
damit weg, sobald jemand auf "Ton" oder "Spenden" ging. Jetzt ist er
eine eigene Zeile unter dem Saal -- und damit auch bei zugeklappter
Regie da. Der Play-Knopf ist der eine, den man mitten in einer
Sendung blind treffen muss.

`:has(.pult[data-auf="ja"])` UND KEINE KLASSE AM KOERPER: Der Zustand
steht schon am Pult; ein zweiter Merker waere die zweite Antwort auf
dieselbe Frage. Erst ab 1100 px -- darunter bleibt fuer das Video
keine Breite: 26rem Regie plus 23rem Chat sind 784 Pixel. Gerechnet,
nicht geraten.

=======================================================================
DREI BEFUNDE GEGEN DIE EIGENEN PRUEFUNGEN -- UND EINER IST ERNST

1. "GENAU EINE REGEL DARF DIE ZEILEN DES SAALS SETZEN" war die
   Faustregel zum Befund vom Nachmittag, aber nicht die Frage, um
   die es geht. Eine zweite FASSUNG (Handy, aufgeklappte Regie) ist
   richtig und noetig -- sie setzt die Zeilen neu UND verteilt die
   Kinder neu. Der Fehler war eine zweite ANGABE, die die Zeilenzahl
   VERKLEINERT und die Kinder stehen laesst. Geprueft wird jetzt
   genau das: Jede Fassung, deren Gegenstand der Saal IST, muss
   gleich viele Zeilen haben.

2. DER ERNSTE: Dieselbe Pruefung hatte einen BLINDFLECK. Ihr Muster
   liess den Regelrumpf ueber eine oeffnende Klammer hinweg laufen
   (`[^}]*` statt `[^{}]*`) -- damit fiel jede Regel INNERHALB eines
   `@media` heraus. Gemessen: Sie meldete "alle 1 Fassungen",
   obwohl zwei dastanden. Ein Fehler im Medienblock -- und genau
   dort steht die ganze Handyansicht -- waere unbemerkt
   durchgegangen. Die Gegenprobe beweist jetzt, dass eine Fassung
   mit weniger Zeilen wirklich auffaellt.

3. Auch beim Regieplatz zaehlte sie Fassungen statt Wirkung und
   schlug an, sobald eine dritte dazukam. Jetzt prueft sie, ob eine
   Fassung eine KACHEL VERGISST -- dann verschwindet die in genau
   dieser Ansicht, und gemerkt haette es niemand.

pruef-reaktion 374/0 - pruef-css-klassen ok - pruef-tippziele 11/0

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-09-28 20:45:34 +02:00
co-authored by Claude Opus 5
parent 6033d1b6f2
commit a6d55d939a
48 changed files with 895 additions and 749 deletions
+87 -7
View File
@@ -85,7 +85,7 @@
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;
grid-template-rows: auto minmax(0, 1fr) auto auto;
/* Die Kopfleiste ist 69 px hoch (gemessen, nicht geschätzt -- siehe
pruef-handy, das sie über alle Breiten abmisst). */
height: calc(100dvh - 69px);
@@ -95,6 +95,85 @@
.regieleiste { grid-row: 1; }
#teil-zu, #teil-warte, #teil-live { grid-row: 2; }
.pult { grid-row: 3; }
.transport { grid-row: 4; }
.transport[hidden] { display: none; }
/* =====================================================================
DIE REGIE STEHT LINKS -- NICHT NUR UNTEN (28.09.2026)
Filipe: „anstatt alles nur unten zu haben wieso nicht rechts und
links noch ausnutzen um mehr ueberblick zu haben."
Die Regie klebte als 272 Pixel hoher Streifen unten, waehrend
darueber das ganze Bild frei war. Man sah entweder das Video oder
die Bedienung.
AUFGEKLAPPT steht sie jetzt LINKS neben dem Video, ueber die volle
Hoehe. Rechts der Chat, unten die Senderleiste und der Transport.
Das ist die Anordnung jedes Sendepults: Was man bedient, liegt
neben dem, was man dabei ansieht.
ZUGEKLAPPT bleibt alles, wie es war -- eine schmale Leiste unten.
Wer die Regie zumacht, will das Bild gross, und dann waere eine
leere Spalte daneben genau das Gegenteil.
`:has()` UND KEINE KLASSE AM KOERPER. Der Zustand steht schon am
Pult (`data-auf`); ein zweiter Merker am `body` waere die zweite
Antwort auf dieselbe Frage -- und die laeuft irgendwann von der
ersten weg.
ERST AB 1100 PIXELN. Darunter bliebe fuer das Video keine Breite
mehr uebrig: 26rem Regie plus 23rem Chat sind schon 784 Pixel. Die
Zahl ist gerechnet, nicht geraten. */
@media (min-width: 1100px) {
.saal:has(.pult[data-auf="ja"]) {
grid-template-columns: clamp(21rem, 25vw, 27rem) minmax(0, 1fr);
grid-template-areas:
"leiste leiste"
"pult kino"
"pult kino"
"transport transport";
grid-template-rows: auto minmax(0, 1fr) auto auto;
}
.saal:has(.pult[data-auf="ja"]) .regieleiste { grid-area: leiste; }
.saal:has(.pult[data-auf="ja"]) #teil-zu,
.saal:has(.pult[data-auf="ja"]) #teil-warte,
.saal:has(.pult[data-auf="ja"]) #teil-live { grid-area: kino; }
.saal:has(.pult[data-auf="ja"]) .transport { grid-area: transport; }
.saal:has(.pult[data-auf="ja"]) .pult {
grid-area: pult;
display: grid;
/* Der Kopf oben, der Inhalt darunter -- und der Inhalt nimmt,
was uebrig ist. `minmax(0, 1fr)` und nicht `1fr`: Sonst kann
die Spalte von ihrem Inhalt aufgezogen werden, statt zu
rollen. Genau diese Falle hat am selben Tag der Regieleiste
null Pixel gegeben. */
grid-template-rows: auto minmax(0, 1fr);
border-top: 0;
border-right: 1px solid var(--rand);
}
/* ENDLICH PLATZ. Unten waren es 272 Pixel fuer drei Felder
untereinander -- sie passten nicht, und der Transport verdeckte
den Rest. Hier ist die Hoehe die des Saals. */
.saal:has(.pult[data-auf="ja"]) .pult__innen {
max-height: none;
height: 100%;
overflow-y: auto;
}
/* In einer schmalen Spalte stehen die Kacheln UNTEREINANDER. Zwei
nebeneinander waeren auf 21rem je 10rem breit -- dort passt kein
Videotitel und kein Datumsfeld hinein. */
.saal:has(.pult[data-auf="ja"]) .regieplatz {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "laeuft" "sendung" "bereit";
}
/* Die Senderleiste des Pults bleibt oben in der Spalte stehen,
damit „Auf Sendung" nicht wegrollt. */
.saal:has(.pult[data-auf="ja"]) .pult__leiste {
position: sticky; top: 0; z-index: 2;
}
}
/* =====================================================================
DIE REGIELEISTE — über dem Saal (28.09.2026)
@@ -1584,8 +1663,7 @@
die unten ausfranst. So schliessen beide auf derselben Linie ab. */
grid-template-areas:
"laeuft sendung"
"laeuft bereit"
"leiste leiste";
"laeuft bereit";
gap: 12px;
align-items: stretch;
}
@@ -1665,7 +1743,6 @@
Sie ist die einzige Fläche im Pult mit eigenem Grund -- weil sie
die einzige ist, die im Live gebraucht wird. */
.transport {
grid-area: leiste;
display: grid; gap: 10px;
padding: 12px 14px 13px;
border-radius: 15px;
@@ -1687,8 +1764,11 @@
Der Grund muss dafuer DICHT sein. Eine halbdurchsichtige Leiste,
durch die Text scrollt, ist genau die Art Flaeche, auf der man
sich im Live verliest. */
position: sticky;
bottom: 0;
/* Er ist seit dem 28.09. eine eigene Zeile UNTER dem Saal und
nicht mehr das letzte Kind einer rollenden Tafel -- damit
braucht er kein `sticky` mehr, er steht ohnehin immer unten.
Ein `sticky`, das nichts mehr klebt, ist eine Regel, die man
beim naechsten Umbau falsch versteht. */
z-index: 3;
background:
linear-gradient(180deg, rgba(23, 20, 34, .95), rgba(15, 13, 24, .98));
@@ -2388,7 +2468,7 @@
aendert sich mit der Bildschirmbreite nicht. */
.regieplatz {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "laeuft" "sendung" "bereit" "leiste";
grid-template-areas: "laeuft" "sendung" "bereit";
gap: 12px;
}
/* Die drei gleich breiten Teile der Leiste gehen auf; uebrig