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/start.css

@@ -338,6 +338,59 @@ body.start > main { position: relative; z-index: 1; }
 
 .leise { color: var(--text-still); font-weight: 400; }
 
+/* ---------- Wenn nichts da ist -------------------------------------------
+
+   Diese Regel stand in NEUN Dateien -- neunmal fast dasselbe, mit
+   Abständen von 22, 26 und 30 px, weil beim Kopieren jedes Mal etwas
+   anders wurde. Genau davor warnt der Kommentar weiter oben. Jetzt
+   einmal hier, und jede Seite hat sie.
+
+   Wichtiger als das Aufräumen ist aber, WIE der leere Zustand aussieht.
+   Vorher: ein gestrichelter Kasten mit einem grauen Satz. Gestrichelte
+   Ränder sagen "hier fehlt etwas", und grau auf grau sagt "unwichtig" --
+   zusammen also: eine kaputt wirkende Seite, obwohl gar nichts kaputt
+   ist. Eine leere Liste ist ein normaler Zustand, oft sogar ein guter.
+
+   Jetzt: eine ruhige, geschlossene Fläche im Farbton der Seite (der
+   kommt aus data-ton am body, gesetzt von kopf.js), mit einem
+   leuchtenden Ring darüber. Sie sieht aus wie ein fertiges Bauteil und
+   nicht wie ein Loch. */
+.leer-hinweis {
+  position: relative; overflow: hidden;
+  padding: 34px 26px 32px;
+  text-align: center;
+  color: var(--text-leise); font-size: .92rem; line-height: 1.6;
+  border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 20%, var(--rand));
+  border-radius: var(--radius);
+  background:
+    radial-gradient(120% 90% at 50% -10%,
+      color-mix(in srgb, var(--ton, var(--akzent)) 9%, transparent), transparent 68%),
+    rgba(255, 255, 255, .022);
+}
+/* Der Ring: ein Kreis in der Seitenfarbe, hohl, weich leuchtend. Ein
+   Zeichen wäre hier zu laut -- es geht ja gerade darum, dass NICHTS da
+   ist. Der Ring markiert die Stelle, ohne etwas zu behaupten. */
+.leer-hinweis::before {
+  content: "";
+  display: block;
+  width: 34px; height: 34px;
+  margin: 0 auto 14px;
+  border-radius: 50%;
+  border: 1.5px solid color-mix(in srgb, var(--ton, var(--akzent)) 40%, transparent);
+  background: radial-gradient(circle,
+    color-mix(in srgb, var(--ton, var(--akzent)) 22%, transparent), transparent 70%);
+  box-shadow: 0 0 22px -6px color-mix(in srgb, var(--ton, var(--akzent)) 60%, transparent);
+}
+/* Ein zweiter Satz darin ist der Tipp, was man jetzt tun kann. Wenn
+   schon nichts dasteht, soll wenigstens dastehen, wie etwas hinkommt. */
+.leer-hinweis__tipp {
+  display: block; margin-top: 7px;
+  font-size: .82rem; color: var(--text-still);
+}
+@media (forced-colors: active) {
+  .leer-hinweis::before { border-color: CanvasText; background: none; }
+}
+
 /* ---------- Auf- und Zuklappen ------------------------------------------
    Lange Listen (Protokoll, Verlauf) stehen zugeklappt da und zeigen nur
    die neuesten Zeilen. Der Pfeil dreht sich beim Aufklappen -- er zeigt