Pipeline: die Stufenfarbe kommt endlich auf dem Bildschirm an

Filipe: "zuerst will ich dass du die kategorien und die kacheln viel
krasser geiler machst."

Beim Nachmessen stand fest, warum die Pipeline flach aussah: Drei
Regeln in scouting.css kamen gar nicht an, seit es den Baukasten
(module.css) gibt -- und module.css NENNT zwei davon im eigenen Text.

  --ton                  war an JEDER Karte #db4b66, dem Rot der Seite.
                         Daraus nimmt der Baukasten Kantenlicht, die
                         drei Eckwinkel und das Licht beim Zeigen. Sechs
                         Stufenfarben in der Datei, eine auf dem Schirm.
  .kk::before (3px)      gemessen 560px breit -- das ist das Kantenlicht
                         des Baukastens, das dasselbe Pseudoelement
                         belegt. Die farbige Pipeline-Kante gab es nicht.
  .kk { border } /:hover module.css setzt `border: 0`, gleich stark und
                         spaeter im Ladeweg.

Das Haus hatte die Lehre schon: aufgaben.css setzt `--ton` an fuenf
Spalten mit genau dieser Begruendung. Hierher uebertragen hat es nie
jemand.

WAS JETZT ANDERS IST
 * Jede Stufe traegt ihren Ton -- Eckwinkel, Kantenlicht und Hover
   laufen damit von kuehl (neu entdeckt) zu gruen (uebergeben).
 * Die Farbkante der Karte liegt im HINTERGRUND statt auf einem
   Pseudoelement (beide gehoeren dem Baukasten). 6px, weil das
   Kantenlicht 1,6px davon verdeckt -- bei 3px blieb nichts Sichtbares.
 * Etappennummern 01-05, abgeleitet aus WEITER statt daneben
   geschrieben. "Abgelehnt" bekommt keine: keine Etappe nach vorn.
 * Stufentitel in der eigenen Farbe (vorher einheitlich --akzent),
   mit Weiss aufgehellt -- 4,3:1 waeren bei fett-versal 12,5px zu wenig.
 * Faellig-Saum als inset-Schatten wie bei .kachel[data-warn], mit
   (0,3,0) gegen die Modulliste; vorher border-color und damit wirkungslos.
 * Karte: Plattform als Schild, Handle in gleichbreiter Schrift,
   Haarlinie zwischen "wer" und "lohnt sich", Reichweite deutlicher.

DAS MESSGERAET, DAS GEFEHLT HAT: module.css notiert "NICHT
MITREPARIERT, weil es kein Messgeraet dafuer gibt ... Hover laesst sich
nicht pruefen." Doch -- pruef-scouting-felder faehrt den Zeiger jetzt
auf die Karte und liest nach (6px -> 9px).

DREI FUNDE IN DEN EIGENEN WERKZEUGEN, alle von Hauswachen oder der
eigenen Messung:
 * bild-arten hatte keine Notbremse; page.hover() blieb haengen und
   liess beim Abbrechen einen Server auf Port 4336 zurueck. Jetzt
   notbremse(240s) und mouse.move statt hover().
 * color-mix(in srgb, var(--rand)) -- mit EINER Farbe ungueltig; der
   ganze Verlauf fiel aus, uebrig blieb Abstand ohne Linie.
 * Im Pruefausdruck steckte ein Backspace-Byte (0x08), das die
   Kommandozeile aus einer Zeichenfolge gemacht hatte. Sah im
   Quelltext richtig aus, traf nie. Jetzt startsWith.

pruef-scouting-felder: 64 -> 72 Pruefungen, gruen. Gegenprobe gefahren
(einer Stufe den Ton genommen -> rot, mit #db4b66 als Beleg). Statt des
226-Sekunden-Hauslaufs pruef-handy misst die Datei jetzt selbst auf
320px: 97 Teile, keines ueber dem Rand, kein seitliches Schieben.
Dazu gruen: css-klassen, lesbarkeit, tippziele, fingermass,
haus-trennung, leerzustand, deutsche-texte, zeichen (der eine Rest dort
ist bereich.css und aelter).

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

workspace/assets/css/scouting.css

@@ -37,52 +37,216 @@
 
 /* ---------- Stufen -------------------------------------------------------- */
 
-.stufe { margin-bottom: 30px; }
+.stufe { margin-bottom: 34px; }
 .stufe__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
+/* DER TITEL TRUG DEN SEITENAKZENT, NICHT SEINE STUFE (bis 06.10.2026).
+   Hier stand `color: var(--akzent)` -- sechs Stufen, ein Blau. Jetzt
+   die eigene Farbe, aber mit Weiss aufgehellt: #4c7fa8 direkt auf dem
+   dunklen Grund kaeme nur auf rund 4,3:1, und fett-versal bei 12,5 px
+   ist KEIN grosser Text im Sinne der Richtlinie -- 4,5:1 waere die
+   Schwelle. Aufgehellt liegt jede der sechs Stufen weit darueber.
+   Nachgemessen von pruef-lesbarkeit. */
 .stufe__titel {
-  margin: 0; font-size: .78rem; font-weight: 700;
-  letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
+  margin: 0; font-size: .82rem; font-weight: 800;
+  letter-spacing: .1em; text-transform: uppercase;
+  color: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 68%, #ffffff);
 }
 .stufe__zahl {
-  min-width: 22px; padding: 1px 7px; text-align: center;
-  font-size: .74rem; font-weight: 700; color: var(--text-still);
-  background: rgba(255, 255, 255, .06);
+  min-width: 22px; padding: 1px 8px; text-align: center;
+  font-size: .76rem; font-weight: 800;
+  font-variant-numeric: tabular-nums;
+  color: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 55%, #ffffff);
+  background: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 14%, transparent);
+  border: 1px solid color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 30%, transparent);
   border-radius: 999px;
 }
+
+/* ---- DIE ETAPPENNUMMER (06.10.2026) --------------------------------
+   Die Pipeline hat eine RICHTUNG -- das stand bisher nur im Text der
+   Datei und nirgends auf dem Bildschirm. Sechs Ueberschriften
+   untereinander lesen sich wie eine Liste; "01" bis "05" lesen sich
+   wie ein Weg.
+
+   "Abgelehnt" bekommt KEINE Nummer, sondern einen Strich: Eine Absage
+   ist keine Etappe auf dem Weg nach vorn. Dieselbe Entscheidung wie im
+   leeren Zustand der Seite, wo die Aufzaehlung ebenfalls bei fuenf
+   aufhoert -- und sie steht jetzt nur noch an EINER Stelle im Code
+   (STUFE_NR in scouting.js). */
+.stufe__nr {
+  flex: none;
+  display: grid; place-items: center;
+  min-width: 30px; height: 30px; padding: 0 6px;
+  font-size: .78rem; font-weight: 800;
+  font-variant-numeric: tabular-nums; letter-spacing: .02em;
+  color: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 45%, #ffffff);
+  background: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 15%, transparent);
+  border: 1px solid color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 42%, transparent);
+  /* Dieselbe Fase wie die Bauteile des Hauses, nur klein -- das Zeichen
+     gehoert zur selben Formensprache und ist kein fremder Kreis. */
+  clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px);
+}
+.stufe[data-stufe="abgelehnt"] .stufe__nr { opacity: .7; }
+
 .stufe__karten { display: grid; gap: 10px; }
 
-/* Farbverlauf entlang der Pipeline. */
-.stufe[data-stufe="neu"]           { --stufe-farbe: #4c7fa8; }
-.stufe[data-stufe="angesprochen"]  { --stufe-farbe: #5b8fd4; }
-.stufe[data-stufe="gespraech"]     { --stufe-farbe: #7d84e0; }
-.stufe[data-stufe="interessiert"]  { --stufe-farbe: #8ab8a0; }
-.stufe[data-stufe="uebergeben"]    { --stufe-farbe: #79d1a2; }
-.stufe[data-stufe="abgelehnt"]     { --stufe-farbe: #55606f; }
+/* ===== FARBVERLAUF ENTLANG DER PIPELINE ==============================
+
+   `--ton` WIRD MITGESETZT (06.10.2026) -- und das ist die eigentliche
+   Reparatur dieser Seite.
+
+   Gemessen am 06.10.2026: An JEDER Karte der Pipeline stand
+   `--ton: #db4b66` -- das Rot der Seite, bei „Neu entdeckt" genauso wie
+   bei „Übergeben". Aus `--ton` nimmt der ganze Baukasten in module.css
+   seine Farbe: das Kantenlicht, die drei Eckwinkel und das Licht beim
+   Zeigen. Die Pipeline hatte also sechs Stufenfarben in der Datei und
+   genau eine auf dem Bildschirm.
+
+   DAS HAUS HAT DIESE LEHRE SCHON EINMAL GEZOGEN. In aufgaben.css steht
+   seit dem Aufgabenbrett wörtlich: „--ton mitgesetzt: Das Licht unter
+   dem Zeiger nimmt seine Farbe von dort. Ohne diese Zeile leuchtete die
+   gruene Erledigt-Spalte orange (der Farbton der SEITE), was aussah wie
+   ein Fehler und einer war." Dort steht es an fünf Spalten -- hierher
+   übertragen hat es nie jemand.
+
+   Die Töne bleiben dieselben wie bisher: kühl bei „neu entdeckt", warm
+   und grün bei „übergeben", stumpf bei „abgelehnt". Gedeckt, nicht
+   neon -- augenschonend ist Vorgabe, nicht Geschmack. */
+.stufe[data-stufe="neu"]           { --stufe-farbe: #4c7fa8; --ton: #4c7fa8; }
+.stufe[data-stufe="angesprochen"]  { --stufe-farbe: #5b8fd4; --ton: #5b8fd4; }
+.stufe[data-stufe="gespraech"]     { --stufe-farbe: #7d84e0; --ton: #7d84e0; }
+.stufe[data-stufe="interessiert"]  { --stufe-farbe: #8ab8a0; --ton: #8ab8a0; }
+.stufe[data-stufe="uebergeben"]    { --stufe-farbe: #79d1a2; --ton: #79d1a2; }
+.stufe[data-stufe="abgelehnt"]     { --stufe-farbe: #55606f; --ton: #55606f; }
 .stufe[data-stufe="abgelehnt"] .kk { opacity: .62; }
 .stufe[data-stufe="abgelehnt"] .kk:hover { opacity: 1; }
 
 /* ---------- Karte --------------------------------------------------------- */
 
+/* ===== DIE KARTE (neu gefasst am 06.10.2026) =========================
+
+   WAS HIER VORHER STAND UND NICHTS TAT -- drei Dinge, alle gemessen:
+
+     `border: 1px solid var(--rand)`   module.css setzt `border: 0`
+     `.kk::before` (3 px Farbkante)    module.css belegt ::before mit
+                                       dem Kantenlicht (gemessen: 560 px
+                                       breit statt 3)
+     `.kk:hover { border-color }`      dasselbe
+
+   Keine davon war falsch geschrieben -- sie kamen nur nicht mehr an,
+   seit es den Baukasten gibt. module.css sagt es im eigenen Text:
+   „`.kk:hover` in scouting.css ... setzt border-color -- und die
+   Grundregel oben setzt `border: 0`, gleich stark und spaeter im
+   Ladeweg. Diese vier Regeln tun also vermutlich nichts." Und daneben:
+   „NICHT MITREPARIERT, weil es kein Messgeraet dafuer gibt ... Hover
+   laesst sich nicht pruefen."
+
+   DAS MESSGERAET GIBT ES JETZT: pruef-scouting-felder faehrt mit der
+   Maus auf eine Karte und liest nach, was sich wirklich aendert.
+
+   WARUM `background` UND NICHT WIEDER EIN PSEUDOELEMENT: ::before und
+   ::after gehoeren beide dem Baukasten (Kantenlicht, Raster,
+   Eckwinkel). Ein Hintergrund mit mehreren Ebenen braucht keines von
+   beiden -- und er wird vom `clip-path` der Fase sauber beschnitten,
+   die Kante folgt also der Schraege statt sie zu durchstossen. */
 .kk {
   position: relative;
-  padding: 15px 18px 15px 21px;
-  background: var(--flaeche);
-  border: 1px solid var(--rand);
-  border-radius: var(--radius-klein);
-  transition: border-color .18s ease, background .18s ease, opacity .18s ease;
+  /* Links mehr: Dort laeuft jetzt die 6px-Stufenkante, und Text, der
+     direkt daran klebt, laesst sie wie einen Fehler aussehen. */
+  padding: 17px 20px 17px 26px;
+  /* Wie breit die Farbkante ist. Als Wert, weil sie beim Zeigen
+     waechst -- zwei Zahlen an zwei Stellen waeren zwei Zahlen.
+
+     6px UND NICHT 3px (nachgemessen am 06.10.2026): Das Kantenlicht des
+     Baukastens liegt mit 1,6px DARUEBER (::before, z-index 2) und
+     verdeckt genau so viel von links. Von drei Pixeln blieben gut
+     eineinhalb uebrig -- in der Nahaufnahme nicht mehr als Kante zu
+     erkennen. Von sechs bleiben viereinhalb, und die sieht man. */
+  --kante: 6px;
+  background:
+    /* 1. Die Stufenkante links. Oben hell, nach unten auslaufend:
+          eine durchgezogene Kante wirkt wie eine Trennwand, eine
+          auslaufende wie eine Markierung (dieselbe Ueberlegung wie
+          beim Streifen der Aufgabenspalten). */
+    linear-gradient(180deg,
+      color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 92%, #ffffff) 0%,
+      color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 70%, transparent) 45%,
+      color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 14%, transparent) 100%)
+      left top / var(--kante) 100% no-repeat,
+    /* 2. Ein Hauch der Stufenfarbe in der Ecke, aus der die Kante
+          kommt. 11 % -- man soll es spueren, nicht lesen. */
+    radial-gradient(135% 115% at 0% 0%,
+      color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 11%, transparent) 0%,
+      transparent 62%),
+    var(--flaeche);
+  transition: background-size var(--tempo, .18s) ease, opacity .18s ease;
 }
-.kk::before {
-  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
-  border-radius: 0 3px 3px 0;
-  background: var(--stufe-farbe, var(--akzent));
-  opacity: .8;
+/* Beim Zeigen wird die Kante breiter. Den Rest (Anheben, farbiges
+   Licht) macht der Baukasten schon -- und seit `--ton` je Stufe steht,
+   leuchtet er in der Farbe DIESER Stufe statt im Rot der Seite. */
+.stufe .kk:hover { --kante: 9px; }
+
+/* ---- Follow-up ueberfaellig ----------------------------------------
+   Ein Saum im gedaempften Warnton, genau wie ihn module.css fuer
+   `.kachel[data-warn]` fuehrt -- inklusive des Faseschattens, der in
+   derselben Liste stehen MUSS: `box-shadow` ist eine Liste und keine
+   Ergaenzung, wer ihn weglaesst nimmt der Karte ihre Fase.
+
+   SPEZIFITAET IST HIER KEIN DETAIL: Die Modulliste in module.css ist
+   (0,2,0) und wird SPAETER geladen. `.kk[data-faellig="ja"]` waere
+   gleich stark und verloere deshalb -- genau der Unfall, der die alte
+   Regel unsichtbar gemacht hat. `.stufe .kk[...]` ist (0,3,0) und
+   gewinnt. Beim Zeigen nimmt der Baukasten den Schatten ganz weg und
+   arbeitet mit `filter`; der Saum muss dort also eigens wiederkommen,
+   sonst verschwaende die Warnung in dem Moment, in dem jemand
+   hinsieht. */
+.stufe .kk[data-faellig="ja"] {
+  box-shadow:
+    inset 0 0 0 1.5px rgba(240, 196, 138, .42),
+    inset 7px 7px 14px -10px rgba(0, 0, 0, .95);
+}
+.stufe .kk[data-faellig="ja"]:hover {
+  box-shadow: inset 0 0 0 1.5px rgba(240, 196, 138, .66);
+}
+@media (prefers-contrast: more) {
+  .stufe .kk[data-faellig="ja"] { box-shadow: inset 0 0 0 2px #f0c48a; }
 }
-.kk:hover { border-color: rgba(255, 255, 255, .16); }
-.kk[data-faellig="ja"] { border-color: rgba(255, 190, 120, .34); }
 
 .kk__kopf { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
-.kk__name { margin: 0; font-size: 1.02rem; font-weight: 650; }
-.kk__unter { margin: 2px 0 0; font-size: .82rem; color: var(--text-still); }
+/* DER NAME IST DIE UEBERSCHRIFT DER KARTE und sah aus wie Fliesstext
+   (06.10.2026): 1,02rem bei Gewicht 650, keinen halben Schritt ueber
+   dem, was darunter steht. Jetzt deutlich darueber -- in einer Spalte
+   mit zwoelf Karten sucht das Auge zuerst den Namen. */
+.kk__name {
+  margin: 0; font-size: 1.12rem; font-weight: 700;
+  line-height: 1.25; letter-spacing: -.006em;
+}
+.kk__unter {
+  margin: 6px 0 0;
+  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
+  font-size: .8rem; color: var(--text-still);
+}
+/* Die Plattform ist eine EINORDNUNG -- davon gibt es eine Handvoll, und
+   man vergleicht sie. Deshalb ein Schild in der Farbe der Stufe. */
+.kk__plattform {
+  padding: 1px 8px; border-radius: 999px;
+  /* .74rem = 11,8px. Unter 11,5px gilt Text im Grosscheck als zu klein;
+     .72rem laegen bei 11,52 und damit auf dem Zehntel genau an der
+     Schwelle -- eine Zahl, die bei der naechsten Schriftaenderung
+     kippt. */
+  font-size: .74rem; font-weight: 700;
+  letter-spacing: .06em; text-transform: uppercase;
+  color: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 42%, #ffffff);
+  background: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 13%, transparent);
+  border: 1px solid color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 30%, transparent);
+}
+/* Das Handle ist eine KENNUNG -- einmalig, und man liest sie Zeichen
+   fuer Zeichen. In gleichbreiter Schrift verwechselt man l und 1 nicht,
+   und genau darum geht es bei einem @namen, den jemand abtippt. */
+.kk__handle {
+  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
+  font-size: .8rem; letter-spacing: -.01em;
+  color: var(--text-leise);
+}
 
 .kk__marken { display: flex; gap: 6px; flex-wrap: wrap; }
 .marke-punkt, .marke-still, .marke-fertig {
@@ -98,7 +262,28 @@
   color: #79d1a2; border-color: rgba(121, 209, 162, .35); background: rgba(121, 209, 162, .09);
 }
 
-.kk__info { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: .78rem; }
+/* EINE HAARLINIE ZWISCHEN KOPF UND ZAHLEN (06.10.2026).
+   Oben steht, WER es ist, darunter, ob es sich lohnt. Das sind zwei
+   Fragen, und ohne eine Trennung liest sich die Karte als ein Block
+   aus sieben gleich grossen Schnipseln. Die Linie traegt die
+   Stufenfarbe und laeuft nach rechts aus -- dieselbe Sprache wie der
+   Strich unter der Stufenueberschrift. */
+.kk__info {
+  display: flex; flex-wrap: wrap; align-items: center;
+  gap: 7px 14px;
+  margin-top: 13px; padding-top: 12px;
+  font-size: .78rem;
+  border-top: 1px solid transparent;
+  /* `color-mix(in srgb, var(--rand))` stand hier beim ersten Anlauf --
+     color-mix braucht ZWEI Farben. Ein ungueltiger Farbwert macht den
+     ganzen Verlauf ungueltig, die Erklaerung faellt weg, und uebrig
+     bleibt `1px solid transparent`: Abstand ohne Linie. Im Bild war
+     nichts zu sehen, im Quelltext sah alles richtig aus. */
+  border-image: linear-gradient(90deg,
+    color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 34%, transparent) 0%,
+    color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 14%, transparent) 45%,
+    transparent 92%) 1;
+}
 .kk__still { color: var(--text-still); }
 .kk__followup { color: var(--text-leise); }
 .kk__followup[data-faellig="ja"] { color: #f0c48a; font-weight: 600; }
@@ -269,9 +454,20 @@
 /* Eine feine Kante in der Farbe der Stufe -- sie trennt die Abschnitte,
    ohne dass eine durchgehende Linie die Seite zerschneidet. */
 .stufe__kopf {
-  align-items: flex-start;
-  padding-bottom: 9px;
-  border-bottom: 1px solid color-mix(in srgb, var(--stufe-farbe, var(--rand)) 34%, transparent);
+  align-items: center;
+  padding-bottom: 10px;
+  /* AUSLAUFEND STATT DURCHGEZOGEN (06.10.2026). Eine Linie, die quer
+     ueber die ganze Breite laeuft, wirkt wie eine Trennwand; eine, die
+     nach rechts ausgeht, wie eine Markierung. Dieselbe Ueberlegung wie
+     beim Streifen der Aufgabenspalten, dort schon ausgeschrieben.
+     `border-image` statt `border-bottom`, weil ein Rand keinen Verlauf
+     tragen kann -- die Breite steht deshalb getrennt davor. */
+  border-style: solid;
+  border-width: 0 0 1.5px;
+  border-image: linear-gradient(90deg,
+    color-mix(in srgb, var(--stufe-farbe, var(--rand)) 75%, transparent) 0%,
+    color-mix(in srgb, var(--stufe-farbe, var(--rand)) 30%, transparent) 38%,
+    transparent 92%) 1;
 }
 .stufe__zahl { margin-left: auto; flex: none; }
 
@@ -287,10 +483,16 @@
   color: var(--text-leise);
   white-space: nowrap;
 }
+/* DIE REICHWEITE IST DIE ZAHL, NACH DER SORTIERT WIRD -- sie darf
+   etwas lauter sein als „Deutschland" daneben. Gleichbreite Ziffern,
+   damit 12k und 184k untereinander vergleichbar stehen. */
 .kk__fakt[data-art="follower"] {
   font-variant-numeric: tabular-nums;
-  border-color: color-mix(in srgb, var(--akzent) 34%, transparent);
-  color: color-mix(in srgb, var(--akzent) 62%, #ffffff);
+  font-size: .8rem; font-weight: 700;
+  padding: 3px 11px;
+  border-color: color-mix(in srgb, var(--akzent) 40%, transparent);
+  background: color-mix(in srgb, var(--akzent) 10%, transparent);
+  color: color-mix(in srgb, var(--akzent) 55%, #ffffff);
 }
 
 /* ---- „Schon im Netzwerk" ------------------------------------------