Hinweisliste "Was ist dran": Zeichen, Zahl und Farbe der Zielkachel

Die Zeilen waren die letzten schmucklosen Elemente der Startseite. Jetzt
traegt jede das Zeichen UND die Farbe der Kachel, zu der sie fuehrt --
Hinweis und Ziel gehoeren dadurch sichtbar zusammen, ohne dass die
Zuordnung ein zweites Mal irgendwo steht (sie kommt aus derselben
Tabelle wie die Zahl auf der Kachel). Die Anzahl steht vorn, getrennt vom
Satz und in gleicher Zeichenbreite; beim Ueberfliegen von sieben Zeilen
liest man genau sie zuerst. Ueberfaellig schlaegt Bereichsfarbe und
bleibt rot -- wenn etwas brennt, zaehlt zuerst, DASS es brennt.

Dabei gefunden und behoben: Die Farbtoene hingen an .kachel[data-ton=n].
Um sie fuer die Hinweiszeilen mitzunutzen, wurde .kachel entfernt --
damit gewann aber die Voreinstellung ".kachel { --ton: var(--akzent) }"
weiter unten in der Datei den Wettstreit der Regeln, und alle siebzehn
Kacheln waeren blau gewesen. Die Voreinstellung steht jetzt in :where()
und zaehlt dabei als nicht vorhanden. Die Browserpruefung hat das
gemeldet ("1 Farbe auf 17 Kacheln"), nicht das Auge.

"Nichts offen" ist kein gestrichelter Kasten mehr, sondern eine gute
Nachricht mit ruhigem Gruen und Haken. Weil er jetzt display:flex hat,
war er staerker als das hidden des Browsers und haette IMMER dagestanden
-- eigene Regel dafuer plus eine Pruefung, die beide Richtungen misst.

Neue Pruefungen (pruef-start-ansicht): Zeichen, vorangestellte Zahl,
keine doppelte Zahl im Satz, ganzer Satz fuer Vorleseprogramme, Farbe
gleich der Kachelfarbe an echten Bildpunkten, rot nur bei ueberfaellig.

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

workspace/assets/js/start.js

@@ -169,6 +169,18 @@
     ohne_profil:           'Creator-Profile',
   };
 
+  /* Findet einen Bereich über seinen Namen -- damit Hinweis und Kachel
+     dasselbe Zeichen und denselben Farbton benutzen, ohne dass die
+     Zuordnung ein zweites Mal irgendwo stünde. */
+  const bereichZu = (name) => {
+    if (!name) return null;
+    for (const g of GRUPPEN) {
+      const b = g.bereiche.find((x) => x.name === name);
+      if (b) return b;
+    }
+    return null;
+  };
+
   const $ = (id) => document.getElementById(id);
   const el = (tag, klasse, text) => {
     const k = document.createElement(tag);
@@ -177,11 +189,11 @@
     return k;
   };
 
-  function zeichenBauen(name) {
+  function zeichenBauen(name, klasse = 'kachel__svg') {
     const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
     svg.setAttribute('viewBox', '0 0 24 24');
     svg.setAttribute('aria-hidden', 'true');
-    svg.setAttribute('class', 'kachel__svg');
+    svg.setAttribute('class', klasse);
     for (const d of (ZEICHEN[name] || [])) {
       const p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
       p.setAttribute('d', d);
@@ -392,15 +404,40 @@
       const li = el('li', 'dran__punkt');
       li.dataset.stufe = h.stufe;
 
-      /* Jeder Hinweis fuehrt irgendwohin -- ein Hinweis ohne Ziel ist
+      /* Ein Hinweis trägt ZEICHEN UND FARBE der Kachel, zu der er führt.
+         Dadurch gehört sichtbar zusammen, was zusammengehört: Wer die
+         rote Zeile „2 Aufgaben sind überfällig" sieht, erkennt weiter
+         unten dieselbe Farbe und dasselbe Zeichen auf der Kachel
+         wieder -- und weiß, wohin er muss, bevor er den Text zu Ende
+         gelesen hat. Beides kommt aus derselben Zuordnung wie die Zahl
+         auf der Kachel, es gibt also keine zweite Liste. */
+      const kachel = bereichZu(HINWEIS_ZU_KACHEL[h.art]);
+      if (kachel) li.dataset.ton = String(kachel.ton);
+
+      /* Jeder Hinweis führt irgendwohin -- ein Hinweis ohne Ziel ist
          nur ein schlechtes Gewissen. */
       const a = el('a', 'dran__link');
       a.href = h.ziel;
-      a.append(el('span', 'dran__text',
-        (EINZAHL[h.art] || ((n) => `${n} × ${h.text}`))(h.anzahl)));
+
+      if (kachel) {
+        const zeichen = el('span', 'dran__zeichen');
+        zeichen.append(zeichenBauen(kachel.zeichen, 'dran__svg'));
+        a.append(zeichen);
+      }
+
+      /* Die Zahl steht vorn und getrennt vom Satz. Man liest sie zuerst,
+         und beim Überfliegen von sieben Zeilen zählt genau das. */
+      a.append(el('span', 'dran__zahl', String(h.anzahl)));
+
+      const satz = (EINZAHL[h.art] || ((n) => `${n} × ${h.text}`))(h.anzahl);
+      /* Die Zahl steht schon davor -- im Satz wäre sie doppelt. */
+      a.append(el('span', 'dran__text', satz.replace(/^\d+\s+(×\s+)?/, '')));
+
       const pfeil = el('span', 'dran__pfeil', '→');
       pfeil.setAttribute('aria-hidden', 'true');
       a.append(pfeil);
+      /* Vorleseprogramme bekommen den ganzen Satz, nicht die Bruchstücke. */
+      a.setAttribute('aria-label', satz);
       li.append(a);
       liste.append(li);
     }