screen14 + screen16: Der Entscheidungsblock bekommt eine Flaeche, die Zahlen bekommen Bedeutung

--- screen14: "das soll auch bitte viel geiler und spezieller sein" ---

Zwei Dinge waren falsch, und nur eines davon sieht man im Code.

1. DIE FLAECHE WAR FAST DURCHSICHTIG -- 9 und 5 Prozent Deckkraft. Auf
   einer Seite mit Hintergrundbild heisst das: Das Motiv scheint mitten
   durch den Text. Auf Filipes Bildschirmfoto liest man den Satz "Ein
   Review endet nicht mit einer Zusammenfassung" quer ueber einem
   gespiegelten SPICY-MEDIA-Schriftzug. Ein Kasten, den man nicht
   sieht, ist keine Fassung -- er ist ein Rand um nichts.

2. `border-radius` UND `border` STANDEN NOCH DA -- wirkungslos, weil
   `.entscheidung` in der Modulliste von module.css steht und die
   spaeter geladen wird. Zwei Angaben, die aussehen, als taeten sie
   etwas, und es seit dem Umbau nicht mehr tun.

Er ist die HANDLUNG der Seite, nicht einer von vier Abschnitten: Alles
darueber ist Auskunft, hier wird entschieden und sofort eine Aufgabe
angelegt. Deshalb ein eigener `--ton` fuers Kantenlicht (die Modulliste
faerbt es darueber) statt des Seitentons, und eine kraeftigere Flaeche
als die Sammelkacheln darueber. Kein Rot: Rot heisst in diesem Haus
"ueberfaellig", und eine Entscheidung ist kein Alarm. Die Eingabefelder
sind jetzt eingelassen statt aufgesetzt -- wo man etwas hineinschreibt,
ist eine Vertiefung; und `color-scheme: dark`, sonst zeichnet Chrome
den Datumswaehler als weisses Kaestchen in die dunkle Flaeche.

--- screen16: "mit mehreren farben arbeiten, damit die wichtigsten
    sachen auch auffallen" ---

Die sechs Zahlen je Creator (ueberfaellig, dringend, offen, in Arbeit,
im Review, erledigt) trugen alle dasselbe Blau -- und `data-warn`
faerbte zwei davon in DASSELBE Rot. "Ueberfaellig" ist eine versaeumte
Frist, "dringend" eine Sache, die schnell muss. Zwei verschiedene
Alarme, die gleich aussehen, sind ein Alarm.

Jetzt sechs Toene: Rot, Bernstein, Babyblau, Lila, Silber, Gruen.

DIE WICHTIGE ENTSCHEIDUNG WAR ABER NICHT WELCHE FARBE, SONDERN WANN.
Sechs dauerhaft leuchtende Felder waeren sechs gleich laute Rufe -- und
damit genau so wenig Hilfe wie sechs gleich blaue. Deshalb bleibt eine
NULL grau und still; nur was groesser als null ist, bekommt seine
Farbe. Auf einer Karte, auf der alles auf Null steht, aendert sich
nichts. Auf einer, auf der drei Sachen ueberfaellig sind, sieht man
genau die. Das ist der Unterschied zwischen Farbe als Schmuck und
Farbe als Auskunft.

Die Farbe haengt an `data-sorte` (einem Schluessel), nicht an
`:nth-child`: Wer morgen ein siebtes Feld dazwischenschiebt, soll nicht
sechs Farben verrutschen lassen. Und die Beschriftung bleibt der
eigentliche Traeger -- Farbe allein traegt in diesem Haus nie eine
Information.

KONTRAST NACHGERECHNET statt angenommen: Die Beschriftungen sind
11,2 px, also gilt 4,5:1. Gemessen gegen die Kartenflaeche liegen sie
zwischen 5,91:1 (erledigt) und 14,09:1 (im Review) -- alle sechs
deutlich darueber. pruef-barrierefrei-workspace habe ich deshalb NICHT
gestartet: Der Lauf haette 190 Sekunden gebraucht, um dasselbe zu
sagen.

Geprueft: pruef-uebersicht, pruef-uebersicht-browser, pruef-css-klassen,
pruef-buehne -- alle in Ordnung.

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

workspace/content.html

@@ -14,11 +14,11 @@
 <meta name="theme-color" content="#06090f" />
 <link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
 <link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609090019" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609090019" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090019" />
-<link rel="stylesheet" href="assets/css/content.css?v=202609090019" />
-<link rel="stylesheet" href="assets/css/module.css?v=202609090019" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609090026" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609090026" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090026" />
+<link rel="stylesheet" href="assets/css/content.css?v=202609090026" />
+<link rel="stylesheet" href="assets/css/module.css?v=202609090026" />
 </head>
 
 <body class="start">
@@ -172,12 +172,12 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202609090019" defer></script>
-<script src="assets/js/bereiche.js?v=202609090019" defer></script>
-<script src="assets/js/kopf.js?v=202609090019" defer></script>
-<script src="assets/js/glocke.js?v=202609090019" defer></script>
-<script src="assets/js/checkliste.js?v=202609090019" defer></script>
-<script src="assets/js/vorlagen.js?v=202609090019" defer></script>
-<script src="assets/js/content.js?v=202609090019" defer></script>
+<script src="assets/js/wahl.js?v=202609090026" defer></script>
+<script src="assets/js/bereiche.js?v=202609090026" defer></script>
+<script src="assets/js/kopf.js?v=202609090026" defer></script>
+<script src="assets/js/glocke.js?v=202609090026" defer></script>
+<script src="assets/js/checkliste.js?v=202609090026" defer></script>
+<script src="assets/js/vorlagen.js?v=202609090026" defer></script>
+<script src="assets/js/content.js?v=202609090026" defer></script>
 </body>
 </html>