Der Regieplatz sind jetzt Kacheln

Filipe, 28.09.2026, zum ersten Versuch: "ich wollte was hoch
professionelles wo rechts links und unten kacheln sind wo alles drin
ist, schoen verteilt. wieso so einen kleinen scheiss."

Er hat recht, und es steht auf seinem Bildschirmfoto:

  DIE LINKE SPALTE WAR LEER. "Was laeuft" zeigte nur einen Titel --
  und wenn nichts laeuft, steht dort nichts. Ein grosses schwarzes
  Loch neben einer vollen Spalte sieht nicht nach Aufteilung aus,
  sondern nach Fehler.

  ES WAREN KEINE KACHELN. Zwei Spalten mit einer Trennlinie sind eine
  Teilung, keine Gliederung. Ohne Rahmen, ohne Kopf, ohne eigenen
  Grund fehlt genau das, was eine Flaeche aufgeraeumt aussehen
  laesst.

  DIE LEISTE WAR EIN KASTEN MIT LUFT. `1fr auto 1fr` schiebt drei
  kleine Knopfgruppen an die Raender eines 1400 Pixel breiten
  Kastens. Leere zwischen Knoepfen liest sich als "hier fehlt noch
  etwas".

WAS JETZT DASTEHT

  LINKS   Eine Kachel "Was laeuft" mit VORSCHAUBILD -- damit ist sie
          immer gefuellt. Ohne Video steht der Satz darin, der sagt,
          was zu tun ist; ein leerer Kasten sagt nur, dass etwas
          fehlt. Sie geht ueber beide Zeilen der rechten Seite,
          sonst franste eine Seite unten aus.
  RECHTS  Zwei Kacheln: "Die Sendung" (Titel, YouTube, Beginn) und
          "Bereitlegen" (zweites Video, Vorschaubild, Zuruecksetzen).
  UNTEN   Die Transportleiste, dichter: jede Gruppe beschriftet
          ("Tempo", "Weiter"), und der Umschalter ist aus der linken
          Kachel hierher gewandert. Er ist ein Handgriff IM Live wie
          "Naechstes" -- und fuellt die rechte Seite, die vorher leer
          war.

Das Vorschaubild nimmt ein eigenes, wenn eines eingetragen ist, sonst
YouTubes. Laedt keines, tritt der Platzhaltersatz ein: Ein Bild, das
404 antwortet, steht genauso im Dokument wie eines, das laedt -- auf
dem Bildschirm ist an seiner Stelle nichts.

UND EIN FUND DER HAUSPRUEFUNG: `kachel` gibt es bereits in start.css
und module.css. Ein Namensstreit ueber Stilblaetter hinweg ist genau
die Sorte Fehler, die spaeter irgendwo ganz anders etwas verschiebt
-- und den niemand dort suchen wuerde. Heisst jetzt `regiekachel`.

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

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

workspace/assets/css/reaktion.css

@@ -1579,30 +1579,83 @@
 .regieplatz {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  /* DIE LINKE KACHEL GEHT UEBER BEIDE ZEILEN. Ohne das waere sie so
+     hoch wie ihr Inhalt, und daneben staenden zwei -- eine Seite,
+     die unten ausfranst. So schliessen beide auf derselben Linie ab. */
   grid-template-areas:
-    "links rechts"
+    "laeuft sendung"
+    "laeuft bereit"
     "leiste leiste";
-  gap: 16px 20px;
-  align-items: start;
+  gap: 12px;
+  align-items: stretch;
 }
-.regieplatz__seite { grid-area: links; display: grid; gap: 10px; align-content: start; }
-.regieplatz__seite--rechts {
-  grid-area: rechts;
-  /* Eine ruhige Linie statt eines Kastens. Zwei Kästen nebeneinander
-     wären zwei Rahmen mehr auf einer Fläche, die ohnehin voll ist. */
-  border-left: 1px solid var(--rand);
-  padding-left: 20px;
+.regiekachel--laeuft { grid-area: laeuft; }
+.regiekachel--sendung { grid-area: sendung; }
+.regiekachel--bereit { grid-area: bereit; }
+
+/* ==== EINE KACHEL ==================================================
+
+   Filipe: „wo rechts links und unten kacheln sind wo alles drin ist,
+   schoen verteilt."
+
+   Rahmen, Kopf, eigener Grund. Vorher standen hier zwei Spalten mit
+   einer Trennlinie dazwischen -- das ist eine Teilung, keine
+   Gliederung, und ohne Rahmen fehlt genau das, was eine Flaeche
+   aufgeraeumt aussehen laesst.
+
+   AUGENSCHONEND: kein Leuchten, kein harter Kontrast. Der Grund ist
+   wenige Prozent heller als die Umgebung; das reicht, damit das Auge
+   eine Flaeche sieht, und blendet niemanden, der abends sendet. */
+.regiekachel {
+  display: grid; gap: 9px; align-content: start;
+  padding: 11px 13px 13px;
+  border-radius: 14px;
+  border: 1px solid var(--rand);
+  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
+  min-width: 0;
 }
-.regieplatz__ueber {
+.regiekachel__kopf {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 8px; min-width: 0;
+}
+.regiekachel__ueber {
   margin: 0;
-  /* .72rem und nicht .68: 11,52 px ist die Untergrenze des Hauses,
-     10,88 waere darunter. Die Zahl ist nicht Geschmack -- sie steht
-     in `pruef-css-klassen`, und genau dort ist diese Zeile
-     aufgefallen. */
+  /* .72rem und nicht weniger: 11,52 px ist die Untergrenze des
+     Hauses. Die Zahl ist nicht Geschmack -- sie steht in
+     `pruef-css-klassen`. */
   font-size: .72rem; font-weight: 800;
   letter-spacing: .14em; text-transform: uppercase;
   color: var(--schrift-leise);
 }
+/* Zwei Felder nebeneinander, solange Platz ist -- und untereinander,
+   sobald keiner mehr da ist. Das entscheidet `wrap` und nicht eine
+   Zahl, die man beim naechsten Feld vergisst. */
+.regiekachel__paar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
+.regiekachel__paar > .pult__feld { flex: 1 1 11rem; }
+
+/* ==== DAS VORSCHAUBILD ============================================
+   Es ist der Grund, warum die linke Kachel nie leer aussieht. Steht
+   noch kein Video da, liegt darin der Satz, der sagt, was zu tun ist
+   -- ein leerer Kasten sagt nur, dass etwas fehlt. */
+.laufbild {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  border-radius: 11px;
+  overflow: hidden;
+  background: #07060d;
+  border: 1px solid var(--rand);
+  display: grid; place-items: center;
+}
+.laufbild img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.laufbild[data-bild="nein"] img { display: none; }
+.laufbild__leer {
+  position: absolute;
+  padding: 0 16px;
+  text-align: center;
+  font-size: .78rem; line-height: 1.45;
+  color: var(--schrift-leise);
+}
+.laufbild[data-bild="ja"] .laufbild__leer { display: none; }
 
 /* ---- Die Transportleiste --------------------------------------------
    Aufgebaut wie jeder Videospieler, den man kennt: Schiene über die
@@ -1657,6 +1710,18 @@
 .transport__teil { display: flex; align-items: center; gap: 8px; min-width: 0; }
 .transport__teil--mitte { justify-content: center; gap: 10px; }
 .transport__teil--rechts { justify-content: flex-end; }
+/* ==== JEDE GRUPPE HAT EINEN NAMEN =================================
+   Auf Filipes Bildschirmfoto standen drei kleine Knopfgruppen in
+   einem 1400 Pixel breiten Kasten, und dazwischen war Luft. Leere
+   zwischen Knoepfen liest sich als „hier fehlt noch etwas". Ein Wort
+   davor bindet die Gruppe zusammen und fuellt den Raum mit Auskunft
+   statt mit Abstand. */
+.transport__wort {
+  flex: none;
+  font-size: .72rem; font-weight: 800;
+  letter-spacing: .12em; text-transform: uppercase;
+  color: var(--schrift-leise);
+}
 
 .spur {
   display: grid; gap: 11px;
@@ -2323,14 +2388,8 @@
      aendert sich mit der Bildschirmbreite nicht. */
   .regieplatz {
     grid-template-columns: minmax(0, 1fr);
-    grid-template-areas: "links" "rechts" "leiste";
-    gap: 14px;
-  }
-  .regieplatz__seite--rechts {
-    border-left: 0;
-    border-top: 1px solid var(--rand);
-    padding-left: 0;
-    padding-top: 14px;
+    grid-template-areas: "laeuft" "sendung" "bereit" "leiste";
+    gap: 12px;
   }
   /* Die drei gleich breiten Teile der Leiste gehen auf; uebrig
      bleibt: Transport in der Mitte, alles andere darunter. */