Feste Checklisten statt Vorschlaege - in allen vier Bereichen

"Die neuen Sachen in der LIVE-Analyse soll der Creator FEST sehen, auch
schoen kategorisiert, und der Ansprechpartner soll anklicken koennen,
wenn er findet, dass der Creator was verbessern sollte."

DER UMBAU. Vorher waren die Punkte Vorschlaege zum Uebernehmen: Man
holte sie sich und bekam einen eigenen Eintrag. Das war falsch gedacht.
Eine Checkliste, die man erst anfordern muss, ist keine Checkliste --
und schlimmer: Zwei Creator haetten unterschiedliche Listen gehabt, je
nachdem wer sich was geholt hat. Genau das macht einen Vergleich
unmoeglich, und um Vergleich geht es bei einer Betreuung.

Jetzt stehen dieselben Punkte fuer JEDEN fest da, gruppiert:

  LIVE       21 Punkte -- vor, waehrend, nach der Sendung
  Community  14 Punkte -- Moderation vorbereiten, aufbauen, wenn es kippt
  Technik    12 Punkte -- Einrichtung, Ausfall, was geholfen hat
  Content    13 Ideen  -- nach Saeule (70/20/10) statt nach Ablauf

Jede Gruppe hat einen Satz, der erklaert, wofuer sie da ist. Eine
Ueberschrift allein sagt das nicht.

Was sich je Creator unterscheidet, ist nur der STAND -- und den setzt
die Betreuung: "Passt so" oder "Verbessern". Ein Creator kann sich nicht
selbst bewerten; koennte er es, stuende alles auf gruen. "Verbessern"
verlangt einen Satz, WAS zu verbessern ist -- eine Bewertung, mit der er
nichts anfangen kann, ist nicht streng, sondern nur entmutigend.

Der Creator sieht alles: die Stufe, den Grund, den Namen und den
Zeitpunkt. Und er kann an JEDEM Punkt antworten -- das ist der Kanal,
ueber den er ueberhaupt etwas sagen kann.

Oben steht eine Bilanz in einer Zeile: wie viele passen, wie viele sind
zu verbessern, wie viele hat noch niemand angesehen. Das ist die Frage,
die beide Seiten zuerst haben.

STABILE SCHLUESSEL statt Positionen. Ein Stand haengt am Schluessel des
Punktes ("ton-geprueft"), nicht an seiner Nummer. Haenge er an der
Position, waere beim Einfuegen eines Punktes in der Mitte jede Bewertung
dahinter am falschen Punkt -- und niemand wuerde es merken, weil beides
plausibel aussieht. 64 Punkte haben jetzt einen.

"Offen" loescht den Stand, statt ihn auf "offen" zu setzen: Ein
Datensatz, der nichts aussagt, ist Ballast.

ZWEI EIGENE FEHLER, VON DEN PRUEFUNGEN GEFUNDEN:

1. DAS CSS LAG IN DER FALSCHEN DATEI. Ich hatte es in content.css
   geschrieben -- bereich.html laedt die gar nicht. Die Punkte standen
   auf drei von vier Seiten nackt und ohne Flaeche da. Es ist derselbe
   Fehler wie im August bei .knopf-still, .schalter und .kopf-zeile, und
   es gibt seitdem eine Warnung dazu in start.css. Sie hat nichts
   genutzt, solange keine Pruefung sie nachhielt.

   Jetzt gibt es eine: Sie misst, ob eine Karte wirklich eine Kante und
   Polsterung hat -- nicht nur, ob das Element existiert. Gegenprobe
   gemacht: Klasse umbenannt, Pruefung meldet "STIL FEHLT".

2. Ein Betreuer sah beim Oeffnen keine Bewertungsknoepfe, weil noch kein
   Creator gewaehlt war -- und musste erst raten, dass er oben jemanden
   auswaehlen soll. Jetzt nimmt der Server den ersten betreuten Creator,
   wenn keiner angegeben ist.

Die alte Oberflaechenpruefung fuer den Vorschlaege-Block wurde entfernt
statt angepasst: Sie verlangte etwas, das es nicht mehr gibt. Eine
dauerhaft rote Pruefung ist schlimmer als keine -- man gewoehnt sich
daran, und beim naechsten echten Fehler sieht niemand hin.

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

workspace/assets/css/start.css

@@ -1818,3 +1818,206 @@ body.start #protokoll {
   text-transform: none; letter-spacing: normal;
   font-weight: 400; color: var(--text-still);
 }
+
+/* Die Checkliste steht auf VIER Seiten (LIVE, Community, Technik,
+   Content-Ideen). Ihr Stil gehoert deshalb hierher und nicht in eine
+   Seitendatei -- genau diesen Fehler habe ich beim ersten Anlauf
+   gemacht: Der Block lag in content.css, und bereich.html laedt die
+   gar nicht. Die Punkte standen dort nackt und ohne Flaeche da.
+
+   Es ist derselbe Fehler wie im August bei .knopf-still, .schalter und
+   .kopf-zeile. Deshalb steht die Warnung weiter oben in dieser Datei --
+   und deshalb hat sie nichts genutzt, solange keine Pruefung sie
+   nachhaelt. Jetzt gibt es eine (pruef-checkliste.mjs misst, ob die
+   Punkte wirklich eine Kante haben). */
+/* =====================================================================
+   DIE FESTE CHECKLISTE
+
+   Steht auf jeder der vier Seiten (LIVE, Community, Technik,
+   Content-Ideen) und sieht ueberall gleich aus -- es ist dieselbe Sache.
+
+   Drei Zustaende, drei Farben. "Verbessern" ist bewusst warnend und
+   nicht rot: Es ist eine Aufgabe, kein Fehler. Rot waere eine
+   Beschuldigung.
+   ===================================================================== */
+
+.liste-fest { margin: 20px 0 30px; }
+.liste-fest__kopf {
+  display: flex; align-items: flex-end; justify-content: space-between;
+  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
+}
+.liste-fest__unter {
+  margin: 4px 0 0; max-width: 70ch;
+  font-size: .87rem; line-height: 1.55; color: var(--text-leise);
+}
+.liste-fest__wahl { display: grid; gap: 4px; min-width: 0; }
+
+/* ---------- Die Bilanz oben ---------------------------------------------
+   Wie viele Punkte passen, wie viele sind zu verbessern, wie viele hat
+   noch niemand angesehen. Das ist die Frage, die beide Seiten zuerst
+   haben -- deshalb steht sie vor der Liste und nicht darunter. */
+.liste-fest__bilanz {
+  display: grid; gap: 9px;
+  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+  margin-bottom: 20px;
+}
+.bilanz-zahl {
+  --b-ton: #6f89a8;
+  display: flex; align-items: baseline; gap: 9px;
+  padding: 12px 15px;
+  border: 1px solid color-mix(in srgb, var(--b-ton) 26%, var(--rand));
+  border-radius: var(--radius-klein);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--b-ton) 9%, transparent), transparent 60%),
+    var(--flaeche);
+}
+.bilanz-zahl[data-stufe="gut"]        { --b-ton: #4dab77; }
+.bilanz-zahl[data-stufe="verbessern"] { --b-ton: #e0a33c; }
+.bilanz-zahl[data-stufe="offen"]      { --b-ton: #6f89a8; }
+.bilanz-zahl__n {
+  font-size: 1.6rem; font-weight: 700; line-height: 1;
+  color: var(--b-ton); font-variant-numeric: tabular-nums;
+}
+.bilanz-zahl__text { font-size: .82rem; color: var(--text-leise); }
+
+/* ---------- Die Gruppen -------------------------------------------------- */
+.fest-gruppe { margin-bottom: 24px; }
+.fest-gruppe__kopf { display: flex; align-items: baseline; gap: 10px; }
+.fest-gruppe__name {
+  margin: 0; font-size: .96rem; font-weight: 650; color: var(--text);
+}
+.fest-gruppe__zahl {
+  padding: 1px 8px;
+  border: 1px solid var(--rand); border-radius: 999px;
+  font-size: .72rem; color: var(--text-still);
+  font-variant-numeric: tabular-nums;
+}
+.fest-gruppe__text {
+  margin: 4px 0 12px; max-width: 68ch;
+  font-size: .84rem; line-height: 1.5; color: var(--text-still);
+}
+.fest-punkte { display: grid; gap: 9px; }
+
+/* ---------- Ein Punkt ---------------------------------------------------- */
+.fest-punkt {
+  --p-ton: #6f89a8;
+  position: relative; overflow: hidden;
+  padding: 13px 15px 12px;
+  border: 1px solid color-mix(in srgb, var(--p-ton) 22%, var(--rand));
+  border-radius: var(--radius-klein);
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--p-ton) 7%, transparent), transparent 52%),
+    var(--flaeche);
+}
+.fest-punkt::before {
+  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
+  background: linear-gradient(180deg, var(--p-ton),
+    color-mix(in srgb, var(--p-ton) 30%, transparent));
+}
+.fest-punkt[data-stufe="gut"]        { --p-ton: #4dab77; }
+/* Warnend, nicht rot: Es ist eine Aufgabe, kein Fehler. Rot waere eine
+   Beschuldigung. */
+.fest-punkt[data-stufe="verbessern"] { --p-ton: #e0a33c; }
+.fest-punkt[data-stufe="offen"]      { --p-ton: #6f89a8; }
+
+.fest-punkt__kopf {
+  display: flex; align-items: flex-start; justify-content: space-between;
+  gap: 13px;
+}
+.fest-punkt__text { min-width: 0; }
+.fest-punkt__titel {
+  margin: 0 0 5px; font-size: .93rem; font-weight: 650; color: var(--text);
+}
+.fest-punkt__beschreibung {
+  margin: 0; font-size: .84rem; line-height: 1.5; color: var(--text-leise);
+}
+/* Der Aufhaenger bei Content-Ideen -- die ersten Sekunden entscheiden,
+   deshalb steht er hervorgehoben und nicht im Fliesstext. */
+.fest-punkt__hook {
+  margin: 0 0 7px; padding: 8px 11px;
+  border-left: 2px solid var(--ton, var(--akzent));
+  border-radius: 0 6px 6px 0;
+  background: color-mix(in srgb, var(--ton, var(--akzent)) 9%, transparent);
+  font-size: .87rem; line-height: 1.45; color: var(--text);
+}
+.fest-punkt__hookschild {
+  display: block; margin-bottom: 2px;
+  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
+  color: var(--ton, var(--akzent));
+}
+.fest-punkt__marke {
+  display: inline-block; margin-top: 8px; padding: 2px 9px;
+  border: 1px solid var(--rand); border-radius: 999px;
+  font-size: .72rem; color: var(--text-still);
+}
+.fest-punkt__marke-stufe {
+  flex: none; padding: 3px 11px;
+  border: 1px solid color-mix(in srgb, var(--p-ton) 36%, transparent);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--p-ton) 12%, transparent);
+  color: var(--p-ton);
+  font-size: .73rem; font-weight: 600; white-space: nowrap;
+}
+
+/* Der Grund in voller Breite -- "verbessern" ohne Grund ist nicht
+   umsetzbar, nur entmutigend. Er darf nicht in eine Ecke. */
+.fest-punkt__grund {
+  margin-top: 10px; padding: 9px 12px;
+  border-left: 2px solid var(--p-ton);
+  border-radius: 0 6px 6px 0;
+  background: color-mix(in srgb, var(--p-ton) 9%, transparent);
+}
+.fest-punkt__grund p { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--text); }
+.fest-punkt__von {
+  display: block; margin-top: 4px;
+  font-size: .74rem; color: var(--text-still);
+}
+
+.fest-punkt__fuss {
+  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
+  margin-top: 11px;
+}
+.stufe-knopf {
+  padding: 6px 13px;
+  border: 1px solid var(--rand); border-radius: 999px;
+  background: rgba(0, 0, 0, .2);
+  color: var(--text-still);
+  font: inherit; font-size: .8rem; cursor: pointer;
+  transition: border-color .18s ease, color .18s ease, background .18s ease;
+}
+.stufe-knopf[data-stufe="gut"]:hover,
+.stufe-knopf[data-stufe="gut"][data-an="ja"] {
+  border-color: rgba(77, 171, 119, .5); color: #6fbd95;
+  background: rgba(77, 171, 119, .13);
+}
+.stufe-knopf[data-stufe="verbessern"]:hover,
+.stufe-knopf[data-stufe="verbessern"][data-an="ja"] {
+  border-color: rgba(224, 163, 60, .5); color: #e0b45c;
+  background: rgba(224, 163, 60, .13);
+}
+.fest-punkt__fuss .schritt { margin-left: auto; }
+
+.punkt-gespraech {
+  margin-top: 11px; padding: 12px 13px;
+  border: 1px solid var(--rand); border-radius: var(--radius-klein);
+  background: rgba(0, 0, 0, .2);
+}
+
+@media (max-width: 560px) {
+  .liste-fest__kopf { flex-direction: column; align-items: stretch; }
+  .fest-punkt__kopf { flex-direction: column; }
+  .fest-punkt__marke-stufe { align-self: flex-start; }
+  .fest-punkt__fuss .schritt { margin-left: 0; }
+  .stufe-knopf { flex: 1 1 auto; text-align: center; }
+}
+
+/* Die neuen Klassen der festen Checkliste in der Mindestgroesse fuer
+   das Handy -- gemeldet von der Geraetepruefung (10,56 px beim
+   Aufhaenger-Schild). Wer kuenftig eine kleine Marke baut, faellt ihr
+   ebenfalls auf und landet hier. */
+@media (max-width: 760px) {
+  body.start .fest-punkt__hookschild,
+  body.start .fest-punkt__marke,
+  body.start .fest-punkt__von,
+  body.start .fest-gruppe__zahl { font-size: .75rem; }
+}