Auf dem Brett steht jetzt Deutsch, nicht ASCII

Unter jeder Kategorie stand eine Erklaerung ohne Umlaute:
"Was im Livechat passiert, waehrend gesendet wird. Loeschen,
stummschalten, begruessen, deeskalieren." Elf der vierzehn Kategorien
und alle drei Stufen waren betroffen, dazu vier Stellen mit zwei
Bindestrichen statt eines Gedankenstrichs.

Entstanden ist es beim Schreiben ueber Hilfsskripte, die an Umlauten
scheitern -- fuer einen Kommentar gleichgueltig, fuer einen Satz, den
ein Mensch liest, ein Fehler. Gesehen hat es keine Pruefung: Der Text
war inhaltlich richtig, der Katalog vollstaendig, alles gruen.
Aufgefallen ist es auf einem Bildschirmfoto.

NEU: pruef-deutsche-texte (9 Pruefungen)
Sieht 174 Katalogtexte und 28 ausgelieferte Seiten durch. Bewusst eine
Liste von Wortstuecken statt eines Musters aus Buchstabenfolgen: "ue"
ist in "Feuer" und "neue" richtig, "ss" in jedem zweiten Wort. Die
Liste ist ein Netz, kein Beweis, und der Kopf der Datei sagt das.

Die Skripte bleiben absichtlich aussen vor. Ausprobiert: Dieselbe
Liste schlaegt dort 71 Mal an und kein einziges Mal zu Recht -- es
sind Feldnamen, Stilklassen und Adressen, die ASCII sein MUESSEN.
Eine Warnung, die immer kommt, ist keine Warnung mehr. Ihr sichtbarer
Text wird deshalb am fertigen Bildschirm geprueft, ueber innerText.

AUSSERDEM, auf demselben Bildschirmfoto gefunden:
Die Fusszeile der Vorlagenkarten war eine starre Flex-Zeile. Bei einer
schon uebernommenen Aufgabe stehen dort drei Dinge statt zwei, und
"Frist: in 2 Tagen" brach mitten im Wort auf drei Zeilen um. Keine
neue feste Breite dagegen, sondern flex-wrap plus nowrap -- eine
Regel, die misst, statt einer Zahl, die beim naechsten Element wieder
faellig waere.

UND EINE LEHRE ZUM MESSEN: Die erste Fassung dieser Pruefung zaehlte
element.getClientRects(). Sie blieb gruen, auch mit dem Fehler wieder
eingebaut -- ein Flex-Kind wird zum Block und liefert immer genau ein
Rechteck. Gefunden hat das nur die Gegenprobe. Gemessen wird jetzt
ueber einen Bereich um den Textknoten.

Das Bildschirmfoto landet ausserdem dort, wo die Zeile darunter es
ansagt (server/), nicht im Arbeitsverzeichnis.

pruef-modi-katalog 49 (vorher 45), pruef-deutsche-texte 9,
pruef-css-klassen, pruef-struktur, pruef-vorlagen,
pruef-aufgaben-vorlagen: alle ohne Fehler.

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

workspace/assets/js/aufgaben.js

@@ -1340,7 +1340,7 @@ Das laesst sich nicht rueckgaengig machen. Erledigte Aufgaben sollten normalerwe
        etwas liegt, bevor man klickt. */
     const reihe = el('div', 'stufenleiter');
     reihe.setAttribute('role', 'group');
-    reihe.setAttribute('aria-label', 'Etappe wählen');
+    reihe.setAttribute('aria-label', 'Kategorie wählen');
     for (const g of katalog.gruppen) {
       const n = katalog.aufgaben.filter((v) => v.gruppe === g.schluessel).length;
       if (!n) continue;
@@ -1355,8 +1355,19 @@ Das laesst sich nicht rueckgaengig machen. Erledigte Aufgaben sollten normalerwe
     }
     koerper.append(reihe);
 
+    /* DERSELBE BAUSTEIN WIE BEIM ANDEREN BRETT (16.09.2026).
+
+       Filipe: "ich will dass es vom aussehen auch genau gleich
+       aussieht und so geil wie bei den anderen kategorien."
+
+       Hier stand `vorlagenbrett__stand` -- das ist die Zeile fuer
+       ZAHLEN ("3 von 11 noch nicht uebernommen"), kleiner und mit
+       Ziffern in Tabellenbreite. Die Erklaerung unter der Auswahl
+       heisst drueben `stufenleiter__hilfe` und sieht anders aus.
+       Zwei Bretter, die dasselbe tun und verschieden aussehen, wirken
+       wie zwei verschiedene Sachen. */
     const gruppe = katalog.gruppen.find((g) => g.schluessel === kGruppe);
-    if (gruppe?.text) koerper.append(el('p', 'vorlagenbrett__stand', gruppe.text));
+    if (gruppe?.text) koerper.append(el('p', 'stufenleiter__hilfe', gruppe.text));
 
     /* ---- Die Stufe (16.09.2026) ---------------------------------------
 
@@ -1373,7 +1384,9 @@ Das laesst sich nicht rueckgaengig machen. Erledigte Aufgaben sollten normalerwe
        veraltet -- und ausgeliefert wird sie an jeden. */
     const inGruppe = katalog.aufgaben.filter((v) => v.gruppe === kGruppe);
     if (Array.isArray(katalog.stufen) && katalog.stufen.length) {
-      const sr = el('div', 'stufenleiter stufenleiter--fein');
+      /* VOLLE GROESSE, nicht `--fein`: Drueben ist die zweite Reihe
+         (die Stufen) genauso gross wie die erste. */
+      const sr = el('div', 'stufenleiter');
       sr.setAttribute('role', 'group');
       sr.setAttribute('aria-label', 'Stufe wählen');
       const alle = el('button', 'stufenleiter__knopf');
@@ -1398,9 +1411,7 @@ Das laesst sich nicht rueckgaengig machen. Erledigte Aufgaben sollten normalerwe
       }
       koerper.append(sr);
       const gewaehlt = katalog.stufen.find((x) => x.schluessel === kStufe);
-      if (gewaehlt?.text) {
-        koerper.append(el('p', 'vorlagenbrett__stand', gewaehlt.text));
-      }
+      if (gewaehlt?.text) koerper.append(el('p', 'stufenleiter__hilfe', gewaehlt.text));
     }
 
     /* Was schon auf dem Brett liegt -- aus den Aufgaben, die ohnehin
@@ -1428,8 +1439,13 @@ Das laesst sich nicht rueckgaengig machen. Erledigte Aufgaben sollten normalerwe
        ist: dass etwas überfällig liegt. Nur das wird markiert. */
     const zielbar = personenListe.filter((p) => p.rolle === 'modi' || p.rolle === 'hand');
     if (zielbar.length && $('feld-verant') && !$('feld-verant').hidden) {
+      /* DIE DRITTE REIHE IST ETWAS ANDERES als die zwei darueber: Sie
+         waehlt keinen Ausschnitt des Katalogs, sondern einen MENSCHEN.
+         Deshalb bleibt sie etwas kleiner -- gleich aussehende Reihen,
+         die Verschiedenes tun, sind schlechter als zwei, die man
+         unterscheiden kann. */
       koerper.append(el('p', 'feldschild', 'An wen'));
-      const wer = el('div', 'stufenleiter stufenleiter--fein');
+      const wer = el('div', 'stufenleiter stufenleiter--wer');
       wer.setAttribute('role', 'group');
       wer.setAttribute('aria-label', 'Person wählen');
       for (const p of zielbar) {
@@ -1454,7 +1470,7 @@ Das laesst sich nicht rueckgaengig machen. Erledigte Aufgaben sollten normalerwe
       }
       koerper.append(wer);
       const gewaehlt = zielbar.find((p) => String(p.id) === String(kZiel));
-      koerper.append(el('p', 'vorlagenbrett__stand', gewaehlt
+      koerper.append(el('p', 'stufenleiter__hilfe', gewaehlt
         ? `Übernommene Aufgaben gehen an ${gewaehlt.name}.`
         : 'Niemand gewählt – es gilt die Person aus dem Formular oben.'));
     }