Workspace: Dashboard gebaut, Kopfleiste auf dem Handy repariert

Die Kachel "Dashboard" fuehrte nirgendwohin -- man stand ja schon auf der
Startseite. Statt sie zu streichen bekommt sie ein Ziel: die
Gesamtuebersicht je Creator, die das Konzept auf Seite 1 als "UEBERSICHT
-- alles zentral" verspricht und die es bisher nirgends gab. Die
Startseite bleibt der Einstieg (was ist dran, wohin gehe ich), das
Dashboard ist der Ueberblick (wie steht es um wen).

Eine Karte je Creator: ueberfaellig, dringend, offen, in Arbeit, im
Review, erledigt in 30 Tagen, dazu der naechste Termin, der Start-Check
als Balken und wie lange die Person nicht mehr da war. Jede Zahl ist ein
Verweis -- eine Zahl ohne Weg dorthin waere nur ein schlechtes Gewissen.
Sortiert nach dem, was Handlung verlangt, nicht alphabetisch.

Sichtbarkeit serverseitig wie ueberall: Creator sieht sich selbst
("Mein Stand"), Scout nur seine zugeteilten, DogFather und Manager alle.
Der naechste Review-Termin faellt fuer alle ausser der Leitung weg.

Nebenbei zwei alte Fehler gefunden und behoben:

1. Die Kopfleiste schob auf einem 390px-Handy 214 px aus dem Bild -- der
   Abmelden-Knopf war dort auf JEDER Seite unerreichbar. Ursache: In der
   Flex-Zeile fehlte min-width: 0, also konnte nichts schrumpfen. Auf
   kleinen Schirmen weicht jetzt die Marke (steht direkt darunter noch
   einmal als Ueberschrift) und der Zurueck-Knopf zeigt nur den Pfeil.
   Geprueft von 320 bis 1440 px auf 14 Seiten.

2. .inhalt--breit, .kopf-zeile, .zurueck und .leise standen in
   aufgaben.css -- einer Datei, die eine neue Seite gar nicht laden muss.
   Derselbe Fehler wie frueher bei .knopf-still und .schalter. Jetzt in
   start.css, die jede Seite laedt.

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

workspace/assets/css/start.css

@@ -36,7 +36,22 @@ body.start {
   border-bottom: 1px solid var(--rand);
 }
 
-.kopfleiste .marke { margin: 0; font-size: .72rem; }
+/* Damit in einer Flex-Zeile ueberhaupt etwas schrumpfen KANN, braucht es
+   min-width: 0. Ohne diese eine Zeile behielt jedes Teil seine volle
+   Wunschbreite -- Zurueck (118) + Marke (141) + rechte Gruppe (297)
+   ergaben 556 px auf einem 390 px breiten Handy. Die Kopfleiste schob
+   214 px aus dem Bild und der Abmelden-Knopf war dort nicht mehr zu
+   erreichen. Auf JEDER Seite, seit es die Kopfleiste gibt; aufgefallen
+   erst beim Messen, weil man am Rechner nie danebengreift. */
+.kopfleiste > * { min-width: 0; }
+
+.kopfleiste .marke {
+  margin: 0; font-size: .72rem;
+  /* Die Marke gibt als Erstes nach: Ihr Inhalt steht direkt darunter
+     noch einmal als Ueberschrift, der Abmelden-Knopf dagegen nirgends. */
+  flex: 1 1 auto;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
 
 /* Zurück-Knopf. Steht ganz links, weil dort jeder ihn erwartet -- gleiche
    Stelle wie im Browser. Auf der Startseite gibt es ihn gar nicht: Dort
@@ -106,11 +121,14 @@ body.start {
   .zurueck-knopf:hover .zurueck-knopf__pfeil { transform: none; }
 }
 
-.kopfleiste__rechts { display: flex; align-items: center; gap: 12px; }
+.kopfleiste__rechts { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; }
+.kopfleiste__rechts > * { flex: 0 0 auto; }
 
 .wer {
   font-size: .86rem; color: var(--text-leise);
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw;
+  /* Der Name darf kuerzer werden -- der Knopf daneben nicht. */
+  flex: 0 1 auto; min-width: 0;
 }
 
 
@@ -122,6 +140,25 @@ body.start {
   padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 40px) 64px;
 }
 
+/* Diese vier standen bis zum 31.08.2026 in aufgaben.css -- also in einer
+   Datei, die eine neue Seite gar nicht laden muss. Genau dadurch war das
+   Dashboard beim ersten Aufbau schmal und ohne Kopfzeilen-Layout: die
+   Klassen im HTML gab es, die Regeln dazu nicht. Derselbe Fehler ist
+   vorher schon zweimal passiert (.knopf-still, .schalter). Was auf
+   mehreren Seiten benutzt wird, gehoert hierher, wo jede Seite es hat. */
+.inhalt--breit { max-width: 1240px; }
+
+.zurueck { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
+.zurueck:hover { border-bottom-color: currentColor; }
+
+.kopf-zeile {
+  display: flex; align-items: flex-end; justify-content: space-between;
+  gap: 20px; flex-wrap: wrap; margin-bottom: 24px;
+}
+.kopf-zeile .titel { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
+
+.leise { color: var(--text-still); font-weight: 400; }
+
 .willkommen { margin-bottom: 38px; }
 .willkommen .titel { margin-bottom: 6px; }
 
@@ -199,9 +236,30 @@ body.start {
 .inhalt .fuss { margin-top: 40px; text-align: left; }
 
 @media (max-width: 520px) {
-  .kopfleiste { padding: 12px 16px; }
-  .kopfleiste .marke { font-size: .64rem; }
-  .wer { max-width: 34vw; }
+  .kopfleiste { padding: 12px 16px; gap: 10px; }
+  /* Die Marke wich zwar zurueck, nahm aber immer noch so viel Platz,
+     dass vom Namen nur noch drei Pixel uebrig blieben. Auf dem Handy
+     verschwindet sie deshalb -- genau derselbe Text steht zwei Zeilen
+     tiefer als Ueberschrift, der Name des Angemeldeten dagegen
+     nirgends sonst.
+
+     Aber nur dort, wo der Zurueck-Knopf sichtbar ist: Auf der
+     Startseite gibt es ihn nicht, dort waere die linke Haelfte sonst
+     leer und die Leiste saehe kaputt aus. */
+  .kopfleiste:has(.zurueck-knopf:not([hidden])) .marke { display: none; }
+  .kopfleiste__rechts { margin-left: auto; }
+  .wer { max-width: none; }
+  /* Der Pfeil allein sagt "zurueck" -- das Wort daneben kostet auf dem
+     Handy 65 px, die dem Abmelden-Knopf fehlen. Vorlesende Programme
+     verlieren nichts: Der Text bleibt im Dokument und wird nur
+     unsichtbar gerechnet. */
+  .zurueck-knopf { padding: 9px 12px 9px 11px; }
+  .zurueck-knopf__text {
+    position: absolute; width: 1px; height: 1px;
+    margin: -1px; padding: 0; overflow: hidden;
+    clip-path: inset(50%); white-space: nowrap;
+  }
+  .zurueck-knopf { gap: 0; }
 }
 
 /* Zurueckhaltender Zweitknopf. Gehoert bewusst hierher und nicht in eine