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]>

server/pruef-reaktion.mjs

@@ -1946,9 +1946,27 @@ melde("=== 20. Regieplatz und Bildschirm ===");
   }
 
   /* ---- LINKS, RECHTS UND EINE LEISTE UNTEN ---- */
-  ok(/grid-template-areas:\s*"links rechts"\s*"leiste leiste"/.test(regeln.replace(/\s+/g, " ")
-    .replace(/" "/g, '" "')) || /links rechts[\s\S]{0,40}leiste leiste/.test(regeln),
+  ok(/laeuft sendung[\s\S]{0,60}laeuft bereit[\s\S]{0,60}leiste leiste/.test(regeln),
     "der Regieplatz hat links, rechts und eine Leiste unten");
+  /* ==== ES MUESSEN KACHELN SEIN UND KEINE SPALTEN ==============
+     Filipe hat die erste Fassung zerrissen: „ich wollte was hoch
+     professionelles wo rechts links und unten kacheln sind wo alles
+     drin ist." Zwei Spalten mit einer Trennlinie sind eine Teilung,
+     keine Gliederung -- und das sieht man einer CSS-Regel an:
+     Rahmen, eigener Grund, ein Kopf. */
+  const kachel = regeln.match(/\.regiekachel \{[^}]*\}/);
+  ok(!!kachel && /border:/.test(kachel[0]) && /background:/.test(kachel[0]),
+    "eine Regiekachel hat Rahmen und eigenen Grund");
+  ok((html.match(/class="regiekachel/g) || []).length >= 3,
+    `es gibt ${(html.match(/class="regiekachel/g) || []).length} Kacheln`);
+  /* ==== UND DIE LINKE IST NIE LEER ==============================
+     Sie zeigte nur einen Titel; ohne Video stand dort ein schwarzes
+     Loch neben einer vollen Spalte. Das Vorschaubild fuellt sie --
+     und wenn auch das fehlt, der Satz, der sagt, was zu tun ist. */
+  ok(html.includes('id="laufbild"') && html.includes('id="spur-bild"'),
+    "die linke Kachel hat ein Vorschaubild");
+  ok(/laufbild-leer/.test(js) && /trag rechts eine YouTube-Adresse ein/.test(html),
+    "und ohne Video sagt sie, was zu tun ist");
   const platz = [...regeln.matchAll(/([^{}]*\.regieplatz[^{}]*)\{([^}]*)\}/g)]
     .filter((m) => /grid-template-areas/.test(m[2]));
   /* ZWEI REGELN FUER DIESELBE FRAGE SIND DIE GARANTIE, DASS EINE