Workspace: Aufgabenbrett und Dashboard-Zahlen

Erster echter Arbeitsbereich aus dem Konzept. Kanban mit offen / in
Arbeit / Review / erledigt, dazu Prioritaet, Frist, Verantwortlicher und
Zuordnung zu einem Creator-Bereich.

Kern ist die Datentrennung, und die sitzt AUSSCHLIESSLICH im Server --
in jeder einzelnen Abfrage, an einer Stelle definiert (sichtbar()):
  admin   sieht alles
  creator sieht seinen Bereich und was ihm zugewiesen ist
  scout   sieht nur, was ihm zugewiesen ist

Geprueft mit vier Testkonten:
- Chef sieht 4, Luna 2, Mika 1, Sam 1 Aufgaben
- Luna auf Mikas Aufgabe: 404 (nicht 403 -- sonst liesse sich durch
  Ausprobieren herausfinden, welche Nummern es gibt)
- Luna legt Aufgabe mit creator_id=Mika an: wird still auf ihren eigenen
  Bereich umgebogen, Mika sieht sie nicht
- Anfrage mit fremdem Origin: 403
- ohne Anmeldung: 401, ungueltiger Status/leerer Titel: 400
- Scout bekommt in der Personenliste nur sich selbst
- Dashboard-Zahlen je Rolle korrekt eingegrenzt

Weitere Punkte:
- Texte werden im Browser nur ueber textContent gesetzt, nie innerHTML --
  ein Aufgabentitel darf keine Auszeichnung einschleusen
- ueberfaellig = Frist vorbei UND nicht erledigt; die Kachel faerbt sich
  nur, wenn wirklich etwas ansteht
- erledigt_am wird gesetzt bzw. wieder geleert, wenn eine Aufgabe
  zurueckgeholt wird
- Erledigtes verschwindet nicht, wie im Konzept gefordert

workspace/assets/css/start.css

@@ -66,6 +66,32 @@ body.start {
 .willkommen { margin-bottom: 38px; }
 .willkommen .titel { margin-bottom: 6px; }
 
+/* ---------- Zahlen ---------------------------------------------------- */
+
+.zahlen-block { margin-bottom: 34px; }
+
+.zahlen {
+  list-style: none; margin: 0; padding: 0;
+  display: grid; gap: 10px;
+  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
+}
+
+.zahl {
+  padding: 14px 16px;
+  background: rgba(255, 255, 255, .03);
+  border: 1px solid var(--rand);
+  border-radius: var(--radius-klein);
+}
+.zahl__wert { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
+.zahl__name { display: block; margin-top: 2px; font-size: .78rem; color: var(--text-still); }
+
+/* Nur wenn wirklich etwas überfällig ist, wird die Kachel hervorgehoben --
+   sonst stumpft die Farbe ab und man übersieht sie im Ernstfall. */
+.zahl[data-warn="ja"] { border-color: rgba(255, 154, 162, .42); background: rgba(255, 154, 162, .07); }
+.zahl[data-warn="ja"] .zahl__wert { color: var(--warn); }
+
+/* ---------- Bereiche --------------------------------------------------- */
+
 .bereiche {
   list-style: none; margin: 0; padding: 0;
   display: grid; gap: 10px;
@@ -93,6 +119,24 @@ body.start {
 .bereich[data-phase="1"] { border-color: rgba(63, 189, 245, .34); }
 .bereich[data-phase="1"] .bereich__stand { color: var(--akzent); }
 
+/* Fertige Bereiche sind anklickbar und heben sich deutlich ab. */
+.bereich[data-fertig="ja"] {
+  padding: 0;
+  border-color: rgba(63, 189, 245, .5);
+  background: linear-gradient(100deg, rgba(63, 189, 245, .10), rgba(138, 118, 255, .07));
+  transition: border-color var(--tempo), background var(--tempo);
+}
+.bereich[data-fertig="ja"]:hover { border-color: rgba(63, 189, 245, .8); }
+
+.bereich__link {
+  display: flex; align-items: baseline; gap: 10px; width: 100%;
+  padding: 13px 15px;
+  color: inherit; text-decoration: none;
+  border-radius: var(--radius-klein);
+}
+.bereich__link:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
+.bereich[data-fertig="ja"] .bereich__stand { color: var(--akzent); font-weight: 600; }
+
 .inhalt .fuss { margin-top: 40px; text-align: left; }
 
 @media (max-width: 520px) {