Portal: Zahlenkreise, Typografie und eine echte Farblogik fuer Phasen

Drei Rueckmeldungen vom 22.08.2026, alle drei berechtigt.

1) "die kisten sollen auch eine spezielle farbe bekommen wenn sie fertig
   sind" -- das war inhaltlich der wichtigste Punkt. Vorher sahen
   erledigte und gerade laufende Phase fast gleich blau aus. Damit ging
   die einzige Aussage verloren, die die Leiste ueberhaupt traegt:
   naemlich WO man steht. Jetzt drei klar getrennte Zustaende:
     erledigt     gruen, ruhig
     laeuft grad  leuchtendes Blau mit langsamem Puls
     kommt noch   gedaempft
   Die Vorschau erklaert die Logik gleich mit: ihre Leiste wandert von
   blau nach gruen, statt nur an- und auszugehen.
   Dazu eine Legende in Worten. Farbe allein ist nie Information -- wer
   sie nicht unterscheiden kann, liest hier trotzdem, was sie bedeutet.

2) "die zahlen sollen besser im kreis sein" -- vorher ein flacher Kreis
   mit Zahl. Jetzt ein doppelter Ring: aussen ein Farbverlauf als Rand,
   innen die dunkle Flaeche, dazu ein weicher Schein. Derselbe Kniff wie
   bei den Karten (Verlauf ueber border-box); der Kreis wirkt dadurch
   plastisch statt aufgemalt. Jede der vier Kacheln hat ihre eigene
   Farbe -- vier gleiche Kacheln wirken wie eine Aufzaehlung, vier
   unterscheidbare wie ein System.

3) "schrift soll spezieller sein" -- die Kachel-Ueberschrift war so gross
   wie der Text darunter und ging unter. Jetzt groesser, in der
   Headline-Schrift, enger gesetzt mit leicht negativer Laufweite. Die
   Ueberschrift "Gleich geht es los" bekommt einen Farbverlauf.

45/45 Handy-Abnahme, i18n vollstaendig, prefers-reduced-motion beachtet.

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

assets/js/wd-portal.js

@@ -196,6 +196,13 @@
             "</div>" +
             '<p class="po-vorschau-schritt"><strong>' + s(window.WD.t("po_naechster_schritt")) +
               ":</strong> " + s(window.WD.t("po_vorschau_schritt")) + "</p>" +
+            /* Legende: Farbe allein ist nie Information. Wer sie nicht
+               unterscheiden kann, liest hier trotzdem, was sie bedeutet. */
+            '<div class="po-legende">' +
+              '<span><i class="po-l-fertig"></i>' + s(window.WD.t("po_l_fertig")) + "</span>" +
+              '<span><i class="po-l-jetzt"></i>' + s(window.WD.t("po_l_jetzt")) + "</span>" +
+              '<span><i class="po-l-offen"></i>' + s(window.WD.t("po_l_offen")) + "</span>" +
+            "</div>" +
           "</div>" +
 
           '<div class="po-leer-liste">' +