Leere Seiten sehen nicht mehr kaputt aus

Die vier Aufgaben-Spalten waren vier graue Kaesten mit je einem
Gedankenstrich darin. Das sieht aus, als sei die Seite kaputt -- dabei
ist eine leere Spalte ein voellig normaler, oft sogar guter Zustand.

Jetzt hat jede Spalte ihre eigene Farbe nach STATUS (offen blaugrau,
in Arbeit blau, Review gold, erledigt gruen), einen auslaufenden
Streifen oben in dieser Farbe und eine Zeile, die erklaert, was die
Spalte ueberhaupt bedeutet -- "Review" allein sagt einem Neuen nichts.
Statt des Gedankenstrichs steht ein Satz, der die AUSSAGE des
Leerseins traegt: eine leere Review-Spalte bedeutet etwas anderes als
eine leere Erledigt-Spalte.

NEUN KOPIEN DERSELBEN REGEL. .leer-hinweis war in neun CSS-Dateien
definiert -- neunmal fast dasselbe, mit Abstaenden von 22, 26 und 30 px,
weil beim Kopieren jedes Mal etwas anders wurde. Genau davor warnt ein
Kommentar in start.css seit August ("Was auf mehreren Seiten benutzt
wird, gehoert hierher"). Jetzt einmal zentral, und jede Seite hat sie.

Und sie sieht anders aus: Der gestrichelte Rand ist weg. Gestrichelte
Raender sagen "hier fehlt etwas", grau auf grau sagt "unwichtig" --
zusammen also "kaputte Seite". Stattdessen eine ruhige, geschlossene
Flaeche im Farbton der Seite (aus data-ton, also aus der Kachelfarbe)
mit einem leuchtenden Ring. Ein Zeichen waere hier zu laut: Es geht ja
gerade darum, dass nichts da ist -- der Ring markiert die Stelle, ohne
etwas zu behaupten.

Kontrast danach nachgemessen: 4,85:1 im schlechtesten Fall.

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

workspace/assets/css/aufgaben.css

@@ -72,13 +72,38 @@
   align-items: start;
 }
 
+/* Die vier Spalten bekommen dieselbe Behandlung wie die Kacheln auf der
+   Startseite: eine eigene Farbe je Status, ein Streifen oben in dieser
+   Farbe, ein sehr weicher Verlauf darunter. Vorher unterschied sie nur
+   ein 8 px grosser Punkt -- vier gleiche graue Kaesten nebeneinander.
+
+   Die Farbe folgt dem STATUS, nicht dem Rang: Offen blaugrau (noch
+   nichts passiert), In Arbeit blau (laeuft), Review gold (jemand muss
+   hinsehen), Erledigt gruen (fertig). */
 .spalte {
-  background: rgba(255, 255, 255, .022);
-  border: 1px solid var(--rand);
+  --sfarbe: #6f89a8;
+  position: relative; overflow: hidden;
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--sfarbe) 8%, transparent), transparent 42%),
+    rgba(255, 255, 255, .022);
+  border: 1px solid color-mix(in srgb, var(--sfarbe) 20%, var(--rand));
   border-radius: var(--radius);
-  padding: 14px 12px 16px;
+  padding: 16px 13px 18px;
   min-height: 120px;
 }
+/* Der Streifen oben laeuft nach rechts aus -- eine durchgezogene Kante
+   wirkt wie eine Trennwand, eine auslaufende wie eine Markierung. */
+.spalte::before {
+  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
+  background: linear-gradient(90deg, var(--sfarbe),
+    color-mix(in srgb, var(--sfarbe) 20%, transparent) 70%, transparent);
+}
+/* Was die Spalte bedeutet -- steht immer da, nicht nur wenn sie leer
+   ist. "Review" allein sagt einem Neuen nichts. */
+.spalte__unter {
+  margin: 2px 0 12px 17px;
+  font-size: .76rem; color: var(--text-still);
+}
 
 .spalte__kopf {
   display: flex; align-items: center; gap: 8px;
@@ -94,10 +119,15 @@
   font-size: .74rem; color: var(--text-still); letter-spacing: normal;
 }
 
-.spalte[data-status="offen"]    .spalte__punkt { background: #6f89a8; }
-.spalte[data-status="arbeit"]   .spalte__punkt { background: var(--akzent); }
-.spalte[data-status="review"]   .spalte__punkt { background: #e0a33c; }
-.spalte[data-status="erledigt"] .spalte__punkt { background: #4dab77; }
+.spalte[data-status="offen"]    { --sfarbe: #6f89a8; }
+.spalte[data-status="arbeit"]   { --sfarbe: #3fbdf5; }
+.spalte[data-status="review"]   { --sfarbe: #e0a33c; }
+.spalte[data-status="erledigt"] { --sfarbe: #4dab77; }
+.spalte__punkt {
+  background: var(--sfarbe);
+  box-shadow: 0 0 9px color-mix(in srgb, var(--sfarbe) 70%, transparent);
+}
+.spalte .spalte__zahl { color: var(--sfarbe); }
 
 .karte {
   padding: 12px 13px;
@@ -122,7 +152,19 @@
 
 .karte__schritte { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
 
-.spalte__leer { margin: 4px 2px; font-size: .82rem; color: var(--text-still); }
+/* Der leere Zustand einer Spalte. Vorher stand hier in allen vier
+   Spalten ein Gedankenstrich -- vier graue Striche nebeneinander sehen
+   aus, als sei die Seite kaputt. Jetzt sagt jeder Satz, was das
+   Leersein BEDEUTET (siehe SPALTEN in aufgaben.js), auf einer eigenen
+   ruhigen Flaeche statt im Nichts. */
+.spalte__leer {
+  margin: 4px 0 0; padding: 16px 12px;
+  text-align: center;
+  font-size: .82rem; color: var(--text-still); line-height: 1.5;
+  border: 1px solid color-mix(in srgb, var(--sfarbe) 14%, transparent);
+  border-radius: var(--radius-klein);
+  background: color-mix(in srgb, var(--sfarbe) 5%, transparent);
+}
 
 @media (max-width: 1080px) { .brett { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 @media (max-width: 620px)  { .brett { grid-template-columns: 1fr; } }