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]>
This commit is contained in:
2026-09-09 00:26:48 +02:00
co-authored by Claude Opus 5
parent 8fcc9de1bb
commit 41108d6c3c
22 changed files with 339 additions and 203 deletions
+44 -5
View File
@@ -59,11 +59,43 @@
/* ---------- Entscheidung ------------------------------------------------ */
/* =====================================================================
DER ENTSCHEIDUNGSBLOCK (screen14, 09.09.2026)
Filipe: "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 HIER -- 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. Wer sie liest,
sucht die abgerundete Ecke im Bild und findet sie nicht.
ER IST DIE HANDLUNG DER SEITE, nicht einer von vier Abschnitten:
Alles darueber ist Auskunft, hier wird etwas entschieden und sofort
als Aufgabe angelegt. Deshalb bekommt er einen EIGENEN Ton fuers
Kantenlicht (die Modulliste faerbt es ueber `--ton`) statt des
Seitentons -- und eine kraeftigere Flaeche als die Sammelkacheln
darueber. Er soll auffallen, ohne zu blenden: Der Ton ist dasselbe
Babyblau des Hauses, nur bekommt hier die Kante ihn voll.
Warum kein Rot: Rot heisst in diesem Haus "ueberfaellig". Eine
Entscheidung ist kein Alarm. */
.entscheidung {
--ton: #7ec8f2;
margin-top: 8px; padding: 22px 24px;
background: linear-gradient(100deg, rgba(63, 189, 245, .09), rgba(138, 118, 255, .05));
border: 1px solid rgba(63, 189, 245, .35);
border-radius: var(--radius);
background:
var(--raster),
linear-gradient(100deg, rgba(63, 189, 245, .10), transparent 46%),
linear-gradient(178deg, rgba(21, 30, 44, .93), rgba(11, 16, 25, .96));
}
.entscheidung__titel { margin: 2px 0 6px; font-size: 1.15rem; font-weight: 700; }
.entscheidung__text { margin: 0 0 18px; font-size: .88rem; color: var(--text-leise); max-width: 62ch; }
@@ -71,11 +103,18 @@
display: grid; gap: 14px; margin-bottom: 6px;
grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}
/* Die Felder sind EINGELASSEN, nicht aufgesetzt: Schatten von oben
nach innen. Dieselbe Sprache wie das Codefeld auf der Anmeldeseite --
wo man etwas hineinschreibt, ist eine Vertiefung. */
.entscheidung input {
width: 100%; padding: 11px 13px;
background: rgba(255, 255, 255, .05);
border: 1px solid var(--rand); border-radius: var(--radius-klein);
background: rgba(0, 0, 0, .34);
border: 1px solid rgba(150, 186, 220, .16); border-radius: var(--radius-klein);
box-shadow: inset 0 2px 5px -2px rgba(0, 0, 0, .9);
color: var(--text); font: inherit;
/* Sonst zeichnet Chrome den Datumswaehler hell in eine dunkle
Flaeche -- ein weisses Kaestchen mitten im Feld. */
color-scheme: dark;
}
.entscheidung input:focus {
outline: none; border-color: rgba(63, 189, 245, .7);