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/js/scouting.js

@@ -247,8 +247,59 @@
     }
 
     if (!liste.length) {
-      ziel.append(el('p', 'leer-hinweis',
-        'Noch niemand in der Pipeline. „Neuer Kontakt" legt den ersten an.'));
+      /* WOFUER IST DAS GUT? (Wunsch vom 01.09.2026)
+
+         Vorher stand hier ein Satz, der nur wiederholte, was man
+         ohnehin sieht: dass nichts da ist. Wer die Seite zum ersten
+         Mal oeffnet, weiss danach immer noch nicht, warum 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 hier 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. */
+      const kasten = el('div', 'leer-hinweis leer-hinweis--erklaerung');
+
+      kasten.append(el('p', 'erklaerung__satz',
+        'Hier steht jeder, den ihr entdeckt habt – von der ersten Nachricht '
+        + 'bis zur Übergabe an einen Manager.'));
+
+      kasten.append(el('p', 'erklaerung__warum',
+        'Wozu das gut ist: Ein Scout spricht viele an. Ohne Liste erinnert '
+        + 'sich niemand, wer schon gefragt wurde, wer zugesagt hat und bei '
+        + 'wem seit drei Wochen nichts passiert ist. Genau die gehen '
+        + 'verloren – nicht die, die Nein sagen.'));
+
+      const stufenListe = el('ol', 'erklaerung__stufen');
+      for (const [nr, name, was] of [
+        ['1', 'Neu', 'Entdeckt. Noch nicht angeschrieben.'],
+        ['2', 'Angesprochen', 'Erste Nachricht ist raus. Jetzt läuft die Uhr.'],
+        ['3', 'Gespräch', 'Ihr seid im Austausch – Fragen, Bedingungen, Termine.'],
+        ['4', 'Interessiert', 'Grundsätzlich dabei. Jetzt zählt, dass es nicht liegen bleibt.'],
+        ['5', 'Übergeben', 'Ein Manager übernimmt. Ab hier ist es Betreuung, kein Scouting mehr.'],
+      ]) {
+        const z = el('li', 'erklaerung__stufe');
+        z.append(el('span', 'erklaerung__nr', nr));
+        const t = el('div', null);
+        t.append(el('strong', null, name));
+        t.append(el('span', 'erklaerung__was', was));
+        z.append(t);
+        stufenListe.append(z);
+      }
+      kasten.append(stufenListe);
+
+      kasten.append(el('p', 'erklaerung__fuss',
+        'Zu jedem Kontakt gehört ein Datum für den nächsten Schritt. Ist es '
+        + 'überfällig, erscheint der Kontakt auf deiner Startseite – du musst '
+        + 'also nicht daran denken, die Seite denkt für dich.'));
+
+      kasten.append(el('p', 'erklaerung__los',
+        '„Neuer Kontakt" oben rechts legt den ersten an.'));
+
+      ziel.append(kasten);
       return;
     }