Formularzeilen gerade geruckt, Pipeline erklaert sich selbst

DIE VERZOGENE FORMULARZEILE hatte drei Ursachen, nicht eine -- und jede
einzelne haette gereicht, damit es schief aussieht:

1. Die Rasterregel galt nur fuer Kinder mit der Klasse .feld. Der
   Kalender benutzt schlichte <div> ohne Klasse; die fielen hindurch,
   bekamen von zwoelf Spalten je EINE und wurden nur so breit, wie ihr
   Inhalt sie zwang. Daher "Art" schmal und "Beginn" breit.
2. "Dauer (Minuten)" brach in der schmalen Spalte auf zwei Zeilen um --
   und schob das Feld darunter tiefer als seine Nachbarn. Die Klammer
   ist jetzt ein leiser Zusatz, die Beschriftung hat feste Hoehe.
3. Die letzten drei Pixel: Mit grid-template-rows: 1fr auto bestimmte
   jedes Element die Zeilenhoehe selbst. Ein <select> mass sich 3 px
   kleiner als ein <input> und sass dadurch hoeher. Gemessen: Container
   beider Felder identisch (652+71), Eingabe aber 676..720 gegen
   679..723. Drei Pixel klingen nach nichts und sind genau das, was man
   als "verzogen" sieht. Jetzt hat die Zeile feste Hoehe und das Feld
   fuellt sie ganz.

Ergebnis, gemessen statt betrachtet: alle Felder 44 px hoch, alle 362 px
breit, alle Unterkanten auf einer Linie. Auf dem Handy untereinander --
zwei Felder auf 300 px sind zwei Streifen, in die nichts hineinpasst.

NEUE PRUEFUNG pruef-formulare.mjs. Sie prueft nicht "sieht gut aus",
sondern misst: gleiche Hoehe, Unterkanten auf einer Linie, kein Feld
absurd schmal, keine Beschriftung mehrzeilig -- auf fuenf Seiten und
zwei Geraetegroessen. Zwei Messfehler darin selbst gefunden und behoben
(Teilpixel-Rundung, und eine Ausgabe ueber mehrere Zeilen, die die Datei
zerschossen hat).

DIE SCOUT-PIPELINE ERKLAERT SICH JETZT SELBST. Vorher stand im leeren
Zustand ein Satz, der nur wiederholte, was man ohnehin sieht: dass
nichts da ist. Wer die Seite zum ersten Mal oeffnet, wusste danach
weiterhin nicht, wofuer es sie gibt.

Der leere Zustand ist der EINZIGE Moment, in dem jemand garantiert
liest, was dort steht -- spaeter ist die Flaeche von Daten belegt.
Deshalb steht die Erklaerung genau dort und nicht in einer Hilfe, die
niemand aufmacht. Erklaert wird der NUTZEN, nicht die Bedienung: nicht
"hier klicken", sondern warum ein Scout ohne diese Liste Leute verliert
-- naemlich die Interessierten, bei denen drei Wochen nichts passiert
ist, und nicht die, die Nein sagen. Dazu die fuenf Stufen mit je einem
Satz, was sie bedeuten.

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

workspace/assets/css/scouting.css

@@ -176,3 +176,64 @@
 @media (prefers-reduced-motion: reduce) {
   .kk { transition: none; }
 }
+
+/* ---------- Die Erklaerung im leeren Zustand ---------------------------
+   Der leere Zustand ist der einzige Moment, in dem jemand garantiert
+   liest, was dort steht -- spaeter ist die Flaeche von Daten belegt.
+   Deshalb steht hier keine Meldung, sondern die Erklaerung, wofuer die
+   Pipeline ueberhaupt gut ist. Sie ist laenger als ein Hinweis und
+   bekommt deshalb linksbuendigen Text statt zentrierten. */
+.leer-hinweis--erklaerung {
+  text-align: left;
+  max-width: 62ch;
+  margin: 0 auto;
+  padding: 30px 28px 26px;
+}
+.erklaerung__satz {
+  margin: 0 0 14px;
+  font-size: 1.02rem; color: var(--text); line-height: 1.55;
+}
+.erklaerung__warum {
+  margin: 0 0 20px;
+  font-size: .9rem; color: var(--text-leise); line-height: 1.65;
+}
+.erklaerung__stufen {
+  display: grid; gap: 10px;
+  margin: 0 0 20px; padding: 0; list-style: none;
+  counter-reset: none;
+}
+.erklaerung__stufe {
+  display: flex; align-items: flex-start; gap: 12px;
+  font-size: .88rem;
+}
+/* Die Nummer als eigener Koerper: Die fuenf Stufen sind eine REIHENFOLGE,
+   und die soll man sehen, ohne die Ueberschriften zu lesen. */
+.erklaerung__nr {
+  flex: none;
+  display: grid; place-items: center;
+  width: 24px; height: 24px; border-radius: 50%;
+  font-size: .74rem; font-weight: 700;
+  color: var(--ton, var(--akzent));
+  border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 40%, transparent);
+  background: color-mix(in srgb, var(--ton, var(--akzent)) 12%, transparent);
+}
+.erklaerung__stufe strong { display: block; color: var(--text); }
+.erklaerung__was {
+  display: block; margin-top: 1px;
+  font-size: .83rem; color: var(--text-still); line-height: 1.5;
+}
+.erklaerung__fuss {
+  margin: 0 0 16px; padding-top: 16px;
+  border-top: 1px solid var(--rand);
+  font-size: .86rem; color: var(--text-leise); line-height: 1.6;
+}
+.erklaerung__los {
+  margin: 0;
+  font-size: .88rem; color: var(--ton, var(--akzent));
+}
+/* Der Ring des leeren Zustands passt hier nicht -- es ist ja Text da. */
+.leer-hinweis--erklaerung::before { display: none; }
+
+@media (max-width: 560px) {
+  .leer-hinweis--erklaerung { padding: 22px 16px 20px; }
+}