Der Supportverlauf: eine Zeitachse, eine Farbe je Runde

Filipe: „ich will diese komplette seite vom support viel
uebersichtlicher, profissioneller, jede runde soll auch immer eine
spezielle farbe haben und anders aufgestellt aufgeteilt sein damit
man einen viel besseren und krasseren ueberblick hat."

WAS VORHER DASTAND -- an einem Bild mit zwei Runden nachgesehen,
bevor eine Zeile angefasst wurde: vier Textzeilen untereinander,
alle in derselben Farbe. „RUNDE 1", Antwort, „Ging noch nicht · …",
„RUNDE 2". Bei fuenf Runden muss man die Runden ZAEHLEN, statt sie
zu sehen -- und wer spricht, stand nur als kleiner Name daneben.

VIER TEILE SIND NEU

 1. EINE LEISTE OBEN. Ein Punkt je Runde, in ihrer Farbe, mit ihrer
    Nummer -- und der Rand sagt, wie sie ausgegangen ist. Damit ist
    „wie oft ging es schon hin und her?" eine Frage des Hinsehens.
    Erst ab zwei Runden: bei einer waere sie ein Punkt neben nichts.

 2. EINE ZEITACHSE statt einer Liste. Jede Runde haengt mit einem
    Punkt an einer Linie in IHRER Farbe. Die Linie ist ein Rand an
    der Runde selbst, nicht am Behaelter -- so traegt jede ihr
    eigenes Stueck Achse.

 3. ZWEI SPRECHRICHTUNGEN je Runde, als getrennte Kaesten:
    „GEANTWORTET" in der Rundenfarbe, darunter „GING NOCH NICHT"
    (Bernstein) oder „GEHT WIEDER" (gruen) oder „WARTET AUF
    ANTWORT". Vorher standen beide Saetze als Absaetze untereinander
    und sahen gleich aus; man musste lesen, um zu wissen, von wem
    sie sind. Jetzt sagt es die Form.

 4. DIE LETZTEN ZWEI OFFEN, aeltere hinter „3 fruehere Runden
    zeigen". Die Leiste sagt ohnehin, wie viele es gab; im Wortlaut
    braucht es nicht alle. Zwei und nicht eine: Die letzte sagt, wo
    es steht, die vorletzte, woran es davor lag.

DIE FARBE WIRD GERECHNET, NICHT GEPFLEGT

`rundenTon(nr)` gibt 200 + ((nr-1) mod 4) * 32 Grad. Eine Liste mit
fuenf Farben waere die naheliegende Loesung und die falsche: Runde
sechs bekaeme keine. Diese Sorte Liste hat im Haus schon dreimal
etwas gekostet.

DER BEREICH IST ENG UND ABSICHTLICH: 200 bis 296 Grad, Blau ueber
Indigo nach Violett -- die Palette der Seite (babyblau mit lila) und
der Bereich, in dem KEINE Farbe nach „gut" oder „schlecht" aussieht.
Gruen und Bernstein sind fuer den AUSGANG reserviert; waere eine
Rundenfarbe rot, stuenden zwei Aussagen in einer Farbe.

AUGENSCHONEND: 52 % Saettigung, 64 % Helligkeit -- fuer alle Toene
gleich, und nur im CSS. Sonst waere Runde drei blasser als Runde
eins, und augenschonend ist das Gegenteil von zufaellig. Kein Neon,
kein Gluehen. Die Farbe ordnet Zeilen zu; sie schreit nicht.

UND DIE FARBE ALLEIN TRAEGT NICHTS: Die Nummer steht daneben, der
Ausgang in Worten. Fuer Vorleseprogramme gibt es statt elf Punkten
einen Satz.

EIN FUND UNTERWEGS: DIE MESSUNG MASS SEIT ZWEI TAGEN NICHTS

`mess-support-runde.mjs` schickte die Rueckmeldung noch als JSON.
Am 02.10. ist die Route auf den Kopf-Weg umgestellt worden
(`x-geht`, `x-text`); seither antwortete sie mit 400. Gemerkt hat es
niemand, weil diese Datei Bilder macht und keine Rueckgabewerte
prueft: Auf dem Bild stand danach EINE Runde statt vier, und das
sieht aus wie ein Ergebnis. Aufgefallen ist es erst, als die Bilder
vier Rundenfarben zeigen sollten.

Eine Messung, die nach einem Umbau stillschweigend etwas anderes
misst, ist schlimmer als keine -- man glaubt ihr. Sie meldet den
Fehlschlag jetzt mit Code und Text.

GEPRUEFT -- pruef-support-bilder 39 -> 52 ok

    die Leiste zeigt jede Runde (5 Punkte) · mit ihrer Nummer
    die ersten vier Runden haben vier verschiedene Farben (4)
    und die fuenfte faengt die Reihe wieder von vorn an
    Gegenprobe: sie sind nicht alle gleich (4 Farben)
    auch die Rundennummern tragen ihre Farbe (2 von 2)
    offen stehen die letzten zwei Runden (2)
    und die aelteren sind einen Griff entfernt
    jede Runde zeigt beide Seiten
    aufgeklappt stehen alle da (5) · und wieder zu
    auf 390 px ragt nichts heraus (0 px)
    bei einer einzigen Runde gibt es keine Leiste (0)

Die Gegenprobe „sie sind nicht alle gleich" ist die wichtigste:
Waere `--ton` nicht angekommen, waeren alle Punkte grau -- und „vier
Punkte" waere gruen gewesen, ohne dass eine Farbe zu sehen ist.
Gemessen wird die ANGEZEIGTE Farbe, nicht die Zahl im Attribut.

Dazu gruen: pruef-support 104 · pruef-css-klassen · pruef-zeichen 7 ·
pruef-fingermass 5.

Eine Schriftgroesse musste nachgebessert werden: .7rem sind 11,2 px,
und unter 11,5 px faengt im Haus die Grenze an, ab der man
zusammenkneift.

NUR DAS AGENTURHAUS: Die Supportseite liegt unter `/workspace`.

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

workspace/assets/css/support.css

@@ -660,41 +660,189 @@
     0 0 0 3px color-mix(in srgb, var(--s-blau) 14%, transparent);
 }
 
-/* ---- DER VERLAUF: EINE RUNDE JE ZEILE (25.09.2026) ----------------
+/* =====================================================================
+   DER VERLAUF ALS ZEITACHSE -- EINE FARBE JE RUNDE (03.10.2026)
+   =====================================================================
 
-   Filipe: „mit dem gedanken das manchmal sachen mehrmal nicht sofort
-   perfekt sein werden."
+   Filipe: „ich will diese komplette seite vom support viel
+   uebersichtlicher, profissioneller, jede runde soll auch immer eine
+   spezielle farbe haben und anders aufgestellt aufgeteilt sein damit
+   man einen viel besseren und krasseren ueberblick hat."
 
-   Die Runden stehen untereinander an einer Linie -- die Form, in der
-   man seit jeher einen VERLAUF liest. Ein Kasten je Runde waere bei
-   vier Runden ein Stapel Kaesten; die Linie haelt sie zusammen. */
+   WAS VORHER DASTAND, an einem Bild mit zwei Runden gemessen: vier
+   Textzeilen untereinander, alle in derselben Farbe. Bei fuenf Runden
+   muss man die Runden zaehlen, statt sie zu sehen.
+
+   DREI TEILE:
+     · `.s-rundenleiste`  alle Runden auf einen Blick, ein Punkt je
+                          Runde in ihrer Farbe, mit ihrem Ausgang
+     · `.s-verlauf`       die Zeitachse: eine Linie, Punkte darauf
+     · `.s-schritt`       zwei Sprechrichtungen je Runde, getrennt
+
+   DIE FARBE KOMMT ALS ZAHL (`--ton`) aus support.js und wird hier zu
+   einer Farbe gemacht. Saettigung und Helligkeit stehen NUR hier und
+   sind fuer alle Toene gleich -- sonst waere Runde drei blasser als
+   Runde eins, und augenschonend ist das Gegenteil von zufaellig.
+
+   AUGENSCHONEND HEISST HIER: 52 % Saettigung, 64 % Helligkeit. Kein
+   Neon, kein Gluehen. Die Farbe ordnet Zeilen zu; sie schreit nicht.
+   ===================================================================== */
+
+/* ---- Die Leiste: wie oft ging es schon hin und her? --------------- */
+.s-rundenleiste {
+  display: flex; flex-wrap: wrap; gap: 6px;
+  margin: 12px 0 10px;
+}
+.s-rundenleiste__punkt {
+  --farbe: hsl(var(--ton, 250) 52% 64%);
+  display: grid; place-items: center;
+  width: 26px; height: 26px;
+  border-radius: 999px;
+  font-size: .72rem; font-weight: 800;
+  color: color-mix(in srgb, var(--farbe) 40%, #ffffff);
+  background: color-mix(in srgb, var(--farbe) 16%, transparent);
+  border: 1px solid color-mix(in srgb, var(--farbe) 46%, transparent);
+}
+/* DER AUSGANG STEHT AM RAND, nicht in der Fuellung: Die Fuellung
+   gehoert der RUNDE, der Rand dem ERGEBNIS. Zwei Aussagen, zwei
+   Stellen -- in eine Farbe gemischt waere keine mehr zu lesen. */
+.s-rundenleiste__punkt[data-urteil="geht"] {
+  border-color: color-mix(in srgb, var(--gut, #55d6a0) 60%, transparent);
+}
+.s-rundenleiste__punkt[data-urteil="nicht"] {
+  border-color: color-mix(in srgb, #c99a62 62%, transparent);
+}
+
+/* NUR FUER VORLESEPROGRAMME. Die Leiste ist ein Bild; was sie sagt,
+   steht als Satz daneben -- sichtbar waere er eine Dopplung. */
+.s-nurlesen {
+  position: absolute;
+  width: 1px; height: 1px;
+  margin: -1px; padding: 0; border: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* ---- Die Zeitachse ----------------------------------------------- */
 .inhalt.support-seite .s-verlauf {
   margin: 12px 0 0;
-  padding-left: 14px;
-  border-left: 2px solid color-mix(in srgb, var(--s-lila) 32%, transparent);
-  display: grid; gap: 12px;
+  display: grid; gap: 14px;
+}
+
+/* JEDE RUNDE HAENGT AN DER LINIE. Die Linie ist ein Rand an der
+   Runde selbst und nicht am Behaelter: So traegt jede Runde ihr
+   eigenes Stueck Achse in ihrer eigenen Farbe -- genau das, was
+   „jede Runde eine spezielle Farbe" auf dem Bildschirm bedeutet. */
+.s-runde {
+  --farbe: hsl(var(--ton, 250) 52% 64%);
+  position: relative;
+  padding-left: 20px;
+  border-left: 2px solid color-mix(in srgb, var(--farbe) 34%, transparent);
+}
+/* DER PUNKT AUF DER ACHSE. `inset 0 0 0 2px` statt eines zweiten
+   Elements: ein Knoten ohne eigenes Markup. */
+.s-runde::before {
+  content: "";
+  position: absolute;
+  left: -6px; top: 4px;
+  width: 10px; height: 10px;
+  border-radius: 999px;
+  background: var(--farbe);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--farbe) 18%, transparent);
+}
+.s-runde__kopf {
+  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
 }
-.s-runde__kopf { display: flex; align-items: baseline; gap: 8px; }
 .s-runde__nr {
   font-size: .72rem; font-weight: 800; letter-spacing: .08em;
   text-transform: uppercase;
-  color: color-mix(in srgb, #b9a7ff 30%, #ffffff);
+  color: color-mix(in srgb, var(--farbe) 42%, #ffffff);
 }
 .s-runde__von { font-size: .78rem; color: var(--text-still); }
-.s-runde__antwort {
+.s-runde__zeit { font-size: .74rem; color: var(--text-leise); margin-left: auto; }
+
+/* ---- „Fruehere Runden zeigen" ------------------------------------
+
+   Er steht OBEN im Verlauf, nicht unten: Dort, wo die aelteren
+   Runden waeren. Ein Knopf am Ende der Liste wuerde bedeuten, dass
+   das Fehlende unten fehlt -- es fehlt aber oben.
+
+   44 Pixel hoch, wie jeder Knopf im Haus. Leise gestaltet: Er ist
+   ein Weg, keine Nachricht. */
+.s-verlauf__mehr {
+  display: flex; align-items: center; gap: 8px;
+  min-height: 44px;
+  padding: 0 4px;
+  font: inherit; font-size: .82rem;
+  color: var(--text-still);
+  background: transparent; border: 0;
+  cursor: pointer;
+  text-align: left;
+}
+.s-verlauf__mehr:hover,
+.s-verlauf__mehr:focus-visible { color: var(--text); }
+.s-verlauf__pfeil { font-size: .8rem; line-height: 1; }
+
+/* ---- Zwei Sprechrichtungen je Runde ------------------------------- */
+
+/* WER SPRICHT, STEHT AM RAND. Vorher standen beide Saetze als
+   Absaetze untereinander und sahen gleich aus -- man musste lesen, um
+   zu wissen, von wem sie sind. Jetzt sagt es die Form. */
+.s-schritt {
+  margin-top: 8px;
+  padding: 8px 12px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, .025);
+  box-shadow: inset 2px 0 0 rgba(255, 255, 255, .12);
+}
+.s-schritt__schild {
+  display: block;
+  /* .74rem = 11,84 px. Unter 11,5 px faengt im Haus die Grenze an,
+     ab der man zusammenkneift -- `pruef-css-klassen` setzt sie durch.
+     Mein erster Entwurf hatte .7rem (11,2 px) und waere rot geworden. */
+  font-size: .74rem; font-weight: 800; letter-spacing: .06em;
+  text-transform: uppercase;
+  color: var(--text-still);
+}
+.s-schritt__text {
   margin: 4px 0 0;
   font-size: .9rem; line-height: 1.5; color: var(--text-leise);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
-/* DAS URTEIL DES MELDERS STEHT EINGERUECKT DARUNTER -- es ist die
-   ANTWORT auf die Zeile darueber, nicht eine zweite Meldung. */
-.s-runde__urteil {
-  margin: 6px 0 0; padding-left: 12px;
-  border-left: 2px solid rgba(255, 255, 255, .1);
-  font-size: .86rem; line-height: 1.45; color: var(--text-still);
+/* DIE LEITUNG HAT DIE FARBE DER RUNDE -- sie hat sie eroeffnet. */
+.s-schritt[data-wer="leitung"] {
+  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--farbe) 55%, transparent);
 }
-.s-runde__urteil-wort { font-weight: 750; }
-.s-runde__urteil[data-urteil="geht"] .s-runde__urteil-wort { color: #8fe3b0; }
-.s-runde__urteil[data-urteil="nicht"] .s-runde__urteil-wort { color: #ffb3a7; }
+.s-schritt[data-wer="leitung"] .s-schritt__schild {
+  color: color-mix(in srgb, var(--farbe) 38%, #ffffff);
+}
+/* DER MELDER TRAEGT DEN AUSGANG. Gruen fuer „geht wieder" --
+   der einzige gruene Punkt auf dieser Seite. Bernstein fuer „ging
+   noch nicht": KEIN ROT. Eine Absage ist kein Fehler und nichts, was
+   jemand falsch gemacht hat (siehe die Begruendung weiter oben bei
+   den Bewerbungsantworten); rot laese sich wie ein Urteil ueber den
+   Menschen. */
+.s-schritt[data-urteil="geht"] {
+  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--gut, #55d6a0) 62%, transparent);
+  background: color-mix(in srgb, var(--gut, #55d6a0) 5%, transparent);
+}
+.s-schritt[data-urteil="geht"] .s-schritt__schild { color: #8fe3b0; }
+.s-schritt[data-urteil="nicht"] {
+  box-shadow: inset 2px 0 0 color-mix(in srgb, #c99a62 62%, transparent);
+  background: color-mix(in srgb, #c99a62 5%, transparent);
+}
+.s-schritt[data-urteil="nicht"] .s-schritt__schild { color: #e8c49a; }
+/* WARTET: kein Kasten mit Inhalt, nur ein Vermerk. Er steht da,
+   damit eine Runde ohne Rueckmeldung nicht aussieht wie eine, bei
+   der etwas fehlt. */
+.s-schritt[data-wer="warte"] {
+  background: transparent;
+  box-shadow: inset 2px 0 0 rgba(255, 255, 255, .08);
+  padding-top: 6px; padding-bottom: 6px;
+}
+.s-schritt[data-wer="warte"] .s-schritt__schild { color: var(--text-leise); }
 
 /* „Geht wieder" ist der Knopf, den man drueckt, wenn alles gut ist --
    er darf als Einziger auf dieser Seite gruen sein. */