diff --git a/workspace/assets/css/report.css b/workspace/assets/css/report.css
index d80d9a6c..5211495a 100644
--- a/workspace/assets/css/report.css
+++ b/workspace/assets/css/report.css
@@ -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);
diff --git a/workspace/assets/css/uebersicht.css b/workspace/assets/css/uebersicht.css
index ec5d2d81..2353e1fa 100644
--- a/workspace/assets/css/uebersicht.css
+++ b/workspace/assets/css/uebersicht.css
@@ -364,3 +364,80 @@ a.wert:hover { border-color: var(--rand-hell); background: rgba(255, 255, 255, .
overflow-wrap: anywhere;
user-select: all; -webkit-user-select: all;
}
+
+/* =====================================================================
+ SECHS SORTEN, SECHS FARBEN (screen16, 09.09.2026)
+
+ Filipe: "das ist schon richtig gut aber ich will alles noch viel
+ spezieller, auch gerne mit mehreren farben arbeiten oder so damit
+ die wichtigsten sachen auch auffallen bitte."
+
+ DIE FARBE FOLGT DER BEDEUTUNG, NICHT DER REIHENFOLGE. Sie haengt an
+ `data-sorte` (einem Schluessel aus uebersicht.js), nicht an
+ `:nth-child`: Wer morgen ein siebtes Feld dazwischenschiebt, soll
+ nicht sechs Farben verrutschen lassen.
+
+ DIE WICHTIGE ENTSCHEIDUNG IST 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:
+
+ NULL bleibt grau. Eine Null ist eine gute Nachricht, sie darf
+ zuruecktreten (die Regel dafuer stand hier schon).
+ >0 bekommt ihre Farbe -- am Zahlenwert, an einer feinen
+ Oberkante und an einem sehr leisen Flaechenton.
+
+ Auf einer Karte, auf der alles auf Null steht, aendert sich damit
+ 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.
+
+ ROT UND BERNSTEIN SIND JETZT ZWEI FARBEN. Vorher faerbte `data-warn`
+ ueberfaellig UND dringend in dasselbe Rot -- das eine ist eine
+ versaeumte Frist, das andere eine Sache, die schnell muss. Zwei
+ verschiedene Alarme, die gleich aussehen, sind ein Alarm.
+
+ AUGENSCHONEND: Alle sechs Toene sind gedeckt (keiner ueber 78 %
+ Saettigung), die Flaeche traegt hoechstens 9 Prozent, und nichts
+ pulsiert. Die Beschriftung bleibt in jedem Fall lesbar -- sie ist
+ der eigentliche Traeger, die Farbe verstaerkt nur.
+ ================================================================== */
+.wert[data-sorte="ueberfaellig"] { --wton: #ff6b78; } /* versaeumt */
+.wert[data-sorte="dringend"] { --wton: #e8a94e; } /* eilt */
+.wert[data-sorte="offen"] { --wton: #7ec8f2; } /* liegt an */
+.wert[data-sorte="arbeit"] { --wton: #a78bfa; } /* laeuft */
+.wert[data-sorte="review"] { --wton: #cbd7e6; } /* wartet auf */
+.wert[data-sorte="erledigt"] { --wton: #5fc99a; } /* geschafft */
+
+/* Nur wenn wirklich etwas da ist. `:not([data-leer])` statt einer
+ zweiten Klasse: Der Zustand steht schon im Baum, er muss nicht
+ doppelt gefuehrt werden. */
+.wert[data-sorte]:not([data-leer="ja"]) {
+ background:
+ linear-gradient(180deg, color-mix(in srgb, var(--wton) 9%, transparent), transparent 70%),
+ var(--flaeche);
+ box-shadow: inset 0 1.5px 0 color-mix(in srgb, var(--wton) 62%, transparent);
+}
+.wert[data-sorte]:not([data-leer="ja"]) .wert__zahl {
+ color: color-mix(in srgb, var(--wton) 86%, #ffffff);
+}
+.wert[data-sorte]:not([data-leer="ja"]) .wert__name {
+ color: color-mix(in srgb, var(--wton) 52%, #c9d6e4);
+}
+/* Beim Zeigen kommt die Kante voll -- naeherkommen statt aufleuchten,
+ dieselbe Sprache wie ueberall im Haus. */
+a.wert[data-sorte]:not([data-leer="ja"]):hover {
+ border-color: color-mix(in srgb, var(--wton) 45%, transparent);
+ box-shadow: inset 0 2px 0 var(--wton);
+}
+/* Die alte Warnregel faerbte ueberfaellig und dringend gleich rot.
+ Sie tritt zurueck, wo eine Sorte steht -- sonst gaebe es fuer
+ dieselben zwei Felder zwei Wahrheiten, und die spaetere gaebe still
+ den Ausschlag. Genau dieses Muster hat mich in dieser Nacht
+ siebenmal aufgehalten. */
+.wert[data-warn="ja"][data-sorte] .wert__zahl,
+.wert[data-warn="ja"][data-sorte] .wert__name {
+ color: color-mix(in srgb, var(--wton) 86%, #ffffff);
+}
+.wert[data-warn="ja"][data-sorte] {
+ border-color: color-mix(in srgb, var(--wton) 34%, transparent);
+}
diff --git a/workspace/assets/js/uebersicht.js b/workspace/assets/js/uebersicht.js
index 3eba1a3f..1a3ecc53 100644
--- a/workspace/assets/js/uebersicht.js
+++ b/workspace/assets/js/uebersicht.js
@@ -56,9 +56,29 @@
return { text: `seit ${tage} Tagen nicht da`, kalt: tage >= 14 };
}
- function wert(anzahl, name, ziel, warn) {
+ /* JEDE SORTE HAT IHRE FARBE (screen16, 09.09.2026).
+
+ Filipe: "auch gerne mit mehreren farben arbeiten oder so damit die
+ wichtigsten sachen auch auffallen bitte."
+
+ Vorher trugen alle sechs Felder dasselbe Blau, und `data-warn`
+ faerbte zwei davon in DASSELBE Rot -- "ueberfaellig" und
+ "dringend" sahen identisch aus, obwohl das eine eine versaeumte
+ Frist ist und das andere eine Sache, die schnell muss. Zwei
+ verschiedene Alarme, die gleich aussehen, sind ein Alarm.
+
+ `sorte` ist ein SCHLUESSEL, kein Text: Die Beschriftung heisst
+ "erledigt 30 T." und koennte sich morgen aendern; die Farbe soll
+ das nicht mitmachen. Welcher Ton wohin gehoert, steht in
+ uebersicht.css an einer Stelle.
+
+ DIE FARBE IST NIE DER EINZIGE TRAEGER -- die Beschriftung steht
+ darunter, in Grossbuchstaben und ausgeschrieben. Wer Farben
+ schlecht unterscheidet, liest dasselbe wie alle anderen. */
+ function wert(anzahl, name, ziel, warn, sorte) {
const a = el(ziel ? 'a' : 'span', 'wert');
if (ziel) a.href = ziel;
+ if (sorte) a.dataset.sorte = sorte;
if (warn && anzahl > 0) a.dataset.warn = 'ja';
if (!anzahl) a.dataset.leer = 'ja';
a.append(el('span', 'wert__zahl', String(anzahl)));
@@ -164,12 +184,12 @@
k.append(kopf);
const werte = el('div', 'werte');
- werte.append(wert(c.ueberfaellig, 'überfällig', 'aufgaben.html', true));
- werte.append(wert(c.dringend, 'dringend', 'bereich.html?b=live', true));
- werte.append(wert(c.offen, 'offen', 'aufgaben.html'));
- werte.append(wert(c.arbeit, 'in Arbeit', 'aufgaben.html'));
- werte.append(wert(c.review, 'im Review', 'aufgaben.html'));
- werte.append(wert(c.erledigt30, 'erledigt 30 T.', 'aufgaben.html'));
+ werte.append(wert(c.ueberfaellig, 'überfällig', 'aufgaben.html', true, 'ueberfaellig'));
+ werte.append(wert(c.dringend, 'dringend', 'bereich.html?b=live', true, 'dringend'));
+ werte.append(wert(c.offen, 'offen', 'aufgaben.html', false, 'offen'));
+ werte.append(wert(c.arbeit, 'in Arbeit', 'aufgaben.html', false, 'arbeit'));
+ werte.append(wert(c.review, 'im Review', 'aufgaben.html', false, 'review'));
+ werte.append(wert(c.erledigt30, 'erledigt 30 T.', 'aufgaben.html', false, 'erledigt'));
k.append(werte);
k.append(zahlenZeile(zahlen, c.id));
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index a8b2ebbc..4d8cadf2 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -14,10 +14,10 @@
-
-
-
-
+
+
+
+
@@ -217,10 +217,10 @@
-
-
-
-
-
+
+
+
+
+