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

@@ -2,19 +2,9 @@
    Aufgabenbrett. Baut auf gate.css und start.css auf.
    =================================================================== */
 
-.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; }
+/* .inhalt--breit, .zurueck, .kopf-zeile und .leise sind am 31.08.2026 nach
+   start.css gewandert -- sie werden auf jeder Seite gebraucht, aber nicht
+   jede Seite laedt diese Datei hier. */
 
 /* ---------- Formular -------------------------------------------------- */
 

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

workspace/assets/css/uebersicht.css

@@ -0,0 +1,193 @@
+/* ===================================================================
+   Dashboard -- die Gesamtuebersicht je Creator.
+
+   Grundgedanke: eine Karte je Person, in der Reihenfolge des Drucks.
+   Ruhige Karten fuer alles, was laeuft; nur was Handlung braucht,
+   bekommt Farbe. Waere jede Zahl bunt, waere keine mehr auffaellig --
+   und die Augen haetten nichts, worauf sie sich ausruhen koennen.
+   =================================================================== */
+
+/* ---------- Summen oben ---------------------------------------------------- */
+
+.summen {
+  display: grid; gap: 8px; margin-bottom: 26px;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+}
+.summe {
+  display: grid; gap: 2px; padding: 14px 16px;
+  border: 1px solid var(--rand); border-radius: var(--radius-klein);
+  background: rgba(255, 255, 255, .028);
+}
+.summe[data-warn="ja"] {
+  border-color: rgba(255, 154, 162, .32);
+  background: rgba(255, 154, 162, .05);
+}
+.summe__zahl {
+  font-size: 1.6rem; font-weight: 700; line-height: 1.1;
+  font-variant-numeric: tabular-nums; color: var(--text);
+}
+.summe[data-warn="ja"] .summe__zahl { color: var(--warn); }
+.summe__name {
+  font-size: .72rem; font-weight: 600; letter-spacing: .06em;
+  text-transform: uppercase; color: var(--text-still);
+}
+
+/* ---------- Karten --------------------------------------------------------- */
+
+.creator-liste {
+  display: grid; gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
+}
+.creator {
+  position: relative; overflow: hidden;
+  padding: 18px 20px 16px;
+  border: 1px solid var(--rand); border-radius: var(--radius);
+  background: rgba(255, 255, 255, .026);
+}
+/* Ein schmaler Streifen an der Kante statt einer eingefaerbten Karte:
+   sichtbar genug zum Ueberfliegen, ruhig genug zum Lesen. */
+.creator::before {
+  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
+  background: linear-gradient(180deg, var(--akzent), transparent 85%);
+  opacity: .35;
+}
+.creator[data-achtung="ja"] {
+  border-color: rgba(255, 154, 162, .26);
+}
+.creator[data-achtung="ja"]::before {
+  background: linear-gradient(180deg, var(--warn), transparent 85%);
+  opacity: .75;
+}
+
+.creator__kopf {
+  display: flex; gap: 18px; align-items: flex-start;
+  justify-content: space-between; flex-wrap: wrap;
+  margin-bottom: 15px;
+}
+.creator__wer { min-width: 0; }
+.creator__name {
+  margin: 0 0 3px; font-size: 1.14rem; font-weight: 700;
+  letter-spacing: -.01em; color: var(--text);
+}
+.creator__unter { margin: 0; font-size: .8rem; color: var(--text-still); }
+.creator__unter[data-kalt="ja"] { color: var(--warn); opacity: .82; }
+
+.naechstes { display: grid; gap: 2px; justify-items: end; text-align: right; flex: none; }
+.naechstes__schild {
+  font-size: .66rem; font-weight: 700; letter-spacing: .08em;
+  text-transform: uppercase; color: var(--text-still);
+}
+.naechstes__wert {
+  font-size: .92rem; font-weight: 650; color: var(--text);
+  text-decoration: none; font-variant-numeric: tabular-nums;
+  border-bottom: 1px solid transparent;
+}
+a.naechstes__wert:hover { color: var(--akzent); border-bottom-color: rgba(63, 189, 245, .45); }
+.naechstes__wert--leer { color: var(--text-still); font-weight: 500; }
+
+/* ---------- Zahlenreihe ---------------------------------------------------- */
+
+.werte {
+  display: grid; gap: 6px;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+.wert {
+  display: grid; gap: 1px; padding: 9px 4px 8px;
+  text-align: center; text-decoration: none;
+  border: 1px solid transparent; border-radius: var(--radius-klein);
+  background: rgba(255, 255, 255, .03);
+  transition: border-color var(--tempo), background var(--tempo);
+}
+a.wert:hover { border-color: var(--rand-hell); background: rgba(255, 255, 255, .06); }
+.wert__zahl {
+  font-size: 1.22rem; font-weight: 700; line-height: 1.15;
+  font-variant-numeric: tabular-nums; color: var(--text);
+}
+/* Eine Zeile, ohne Umbruch: "ERLEDIGT 30 T." brach sonst als einziges
+   Feld um und zog die ganze Reihe in die Hoehe. Lieber eine Spur
+   kleiner als sechs Kaesten, von denen einer aus der Reihe faellt. */
+.wert__name {
+  font-size: .6rem; font-weight: 600; letter-spacing: .03em;
+  text-transform: uppercase; color: var(--text-still);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+/* Eine Null ist eine gute Nachricht -- sie darf zuruecktreten. */
+.wert[data-leer="ja"] { background: rgba(255, 255, 255, .016); }
+.wert[data-leer="ja"] .wert__zahl { color: var(--text-still); font-weight: 600; }
+.wert[data-warn="ja"] {
+  border-color: rgba(255, 154, 162, .3); background: rgba(255, 154, 162, .07);
+}
+.wert[data-warn="ja"] .wert__zahl { color: var(--warn); }
+.wert[data-warn="ja"] .wert__name { color: rgba(255, 154, 162, .8); }
+
+/* ---------- Start-Check ---------------------------------------------------- */
+
+.fortschritt {
+  display: block; margin-top: 13px; padding: 11px 13px 12px;
+  text-decoration: none;
+  border: 1px solid var(--rand); border-radius: var(--radius-klein);
+  background: rgba(255, 255, 255, .02);
+  transition: border-color var(--tempo);
+}
+.fortschritt:hover { border-color: var(--rand-hell); }
+.fortschritt__zeile {
+  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
+  margin: 0 0 8px;
+}
+.fortschritt__schild {
+  font-size: .66rem; font-weight: 700; letter-spacing: .08em;
+  text-transform: uppercase; color: var(--text-still);
+}
+.fortschritt__text { font-size: .8rem; color: var(--text-leise); font-variant-numeric: tabular-nums; }
+.fortschritt__warn {
+  margin-left: auto; padding: 1px 8px;
+  font-size: .7rem; font-weight: 650; color: var(--warn);
+  background: rgba(255, 154, 162, .1);
+  border: 1px solid rgba(255, 154, 162, .26); border-radius: 999px;
+}
+.fortschritt__balken {
+  display: block; height: 5px; border-radius: 999px; overflow: hidden;
+  background: rgba(255, 255, 255, .07);
+}
+.fortschritt__fuellung {
+  display: block; height: 100%; border-radius: 999px;
+  background: linear-gradient(90deg, var(--akzent-tief), var(--akzent));
+  transition: width .4s cubic-bezier(.4, 0, .2, 1);
+}
+.fortschritt__fuellung[data-warn="ja"] {
+  background: linear-gradient(90deg, rgba(255, 154, 162, .55), var(--warn));
+}
+.fortschritt[data-fertig="ja"] .fortschritt__text { color: var(--akzent); }
+
+.creator__luecke {
+  display: block; margin: 10px 0 0; padding: 8px 12px;
+  font-size: .78rem; color: var(--text-leise); text-decoration: none;
+  border: 1px dashed var(--rand); border-radius: var(--radius-klein);
+}
+.creator__luecke:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .35); }
+
+/* ---------- Rest ----------------------------------------------------------- */
+
+.leer-hinweis {
+  padding: 30px; text-align: center; color: var(--text-still); font-size: .9rem;
+  border: 1px dashed var(--rand); border-radius: var(--radius);
+}
+.stand {
+  margin: 20px 0 0; font-size: .74rem; color: var(--text-still); text-align: right;
+}
+
+@media (max-width: 620px) {
+  .creator-liste { grid-template-columns: 1fr; }
+  .creator { padding: 16px 15px 14px; }
+  /* Sechs Spalten waeren auf dem Handy je 45 px breit -- die Beschriftung
+     bricht dann mitten im Wort. Zwei Reihen zu dritt lesen sich sauber. */
+  .werte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .creator__kopf { gap: 10px; }
+  .naechstes { justify-items: flex-start; text-align: left; }
+  .summen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .stand { text-align: left; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wert, .fortschritt, .fortschritt__fuellung { transition: none; }
+}

workspace/assets/js/start.js

@@ -17,10 +17,14 @@
      `rollen` steuert, wem ein Bereich überhaupt angezeigt wird - schon
      jetzt, damit die Trennung von Anfang an sichtbar ist.
 
-     "Dashboard" stand hier als Kachel, die man nicht öffnen kann -- man
-     ist ja schon darauf. Ein Eintrag, der nirgendwohin führt, sieht aus
-     wie etwas Unfertiges. Raus. */
+     "Dashboard" führte lange nirgendwohin -- man stand ja schon auf
+     dieser Seite. Statt die Kachel zu streichen, hat sie jetzt ein
+     Ziel: die Gesamtübersicht je Creator, die das Konzept auf Seite 1
+     als "ÜBERSICHT -- alles zentral" verspricht und die es bisher
+     nirgends gab. Diese Seite hier ist der Einstieg, die andere der
+     Überblick. */
   const BEREICHE = [
+    { name: 'Dashboard',        phase: 1, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'uebersicht.html' },
     { name: 'Personen & Zugänge', phase: 1, rollen: ['admin', 'manager'], ziel: 'personen.html' },
     { name: 'Creator-Profile',  phase: 1, rollen: ['admin', 'manager', 'scout'], ziel: 'profil.html' },
     { name: 'Mein Profil',      phase: 1, rollen: ['creator'], ziel: 'profil.html' },

workspace/assets/js/uebersicht.js

@@ -0,0 +1,241 @@
+/* ===================================================================
+   Dashboard -- die Gesamtuebersicht je Creator.
+
+   Das Konzept verspricht auf Seite 1 "UEBERSICHT -- alles zentral" und
+   auf Seite 2 "Die Admin-Rolle behaelt den Gesamtueberblick". Genau das
+   fehlte: Die Startseite ist ein Einstieg (was ist dran, wohin gehe
+   ich), aber sie beantwortet nicht "wie steht es um MEINE CREATOR".
+
+   Fuehrt keine eigenen Daten. Jede Zahl kommt aus Aufgaben, Terminen,
+   Bereichen, Profil und Start-Check -- und jede ist anklickbar, damit
+   man von der Zahl direkt zur Sache kommt. Eine Zahl ohne Weg dahin
+   waere nur ein schlechtes Gewissen.
+   =================================================================== */
+(() => {
+  'use strict';
+
+  const $ = (id) => document.getElementById(id);
+  const el = (tag, klasse, text) => {
+    const k = document.createElement(tag);
+    if (klasse) k.className = klasse;
+    if (text !== undefined) k.textContent = text;
+    return k;
+  };
+  const melde = (t) => { $('fehler').textContent = t || ''; };
+
+  async function hole(pfad) {
+    const a = await fetch(pfad, { credentials: 'same-origin' });
+    if (a.status === 401) { location.assign('/workspace/'); throw new Error('abgemeldet'); }
+    return a;
+  }
+
+  const WOCHENTAG = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
+
+  const datum = (iso) => (iso ? iso.slice(0, 10).split('-').reverse().join('.') : '');
+
+  /* Ein Datum allein sagt wenig -- "Do, 04.09. · 18:00" ist die Angabe,
+     nach der man den Tag plant. */
+  function zeitpunkt(iso) {
+    if (!iso) return '';
+    const [d, z] = String(iso).split('T');
+    const [j, m, t] = d.split('-');
+    const tag = new Date(Number(j), Number(m) - 1, Number(t));
+    const w = Number.isNaN(tag.getTime()) ? '' : WOCHENTAG[tag.getDay()] + ', ';
+    return `${w}${t}.${m}.` + (z ? ' · ' + z.slice(0, 5) : '');
+  }
+
+  /* Wie lange ist die letzte Anmeldung her? Ab zwei Wochen wird die
+     Angabe gedaempft hervorgehoben -- das ist der Punkt, an dem jemand
+     abzudriften droht. */
+  function herLetzte(iso) {
+    if (!iso) return { text: 'noch nie angemeldet', kalt: true };
+    const tage = Math.floor((Date.now() - Date.parse(iso)) / 86400000);
+    if (!Number.isFinite(tage)) return { text: '' };
+    if (tage <= 0) return { text: 'heute da gewesen' };
+    if (tage === 1) return { text: 'gestern da gewesen' };
+    return { text: `seit ${tage} Tagen nicht da`, kalt: tage >= 14 };
+  }
+
+  function wert(anzahl, name, ziel, warn) {
+    const a = el(ziel ? 'a' : 'span', 'wert');
+    if (ziel) a.href = ziel;
+    if (warn && anzahl > 0) a.dataset.warn = 'ja';
+    if (!anzahl) a.dataset.leer = 'ja';
+    a.append(el('span', 'wert__zahl', String(anzahl)));
+    a.append(el('span', 'wert__name', name));
+    return a;
+  }
+
+  function karte(c, checkGesamt, eigen) {
+    const k = el('article', 'creator');
+    if (c.ueberfaellig > 0 || c.dringend > 0) k.dataset.achtung = 'ja';
+
+    const kopf = el('div', 'creator__kopf');
+
+    const links = el('div', 'creator__wer');
+    links.append(el('h2', 'creator__name', c.name));
+    const unter = el('p', 'creator__unter');
+    const her = herLetzte(c.letzter_login);
+    const teile = [];
+    if (!eigen && c.betreuer) teile.push('betreut von ' + c.betreuer);
+    if (!eigen && !c.betreuer) teile.push('noch niemand zuständig');
+    if (her.text) teile.push(her.text);
+    unter.textContent = teile.join(' · ');
+    if (her.kalt || (!eigen && !c.betreuer)) unter.dataset.kalt = 'ja';
+    links.append(unter);
+    kopf.append(links);
+
+    /* Die einzige Angabe, die nach vorn zeigt -- deshalb steht sie
+       abgesetzt oben rechts und nicht zwischen den Zaehlungen. */
+    const rechts = el('div', 'naechstes');
+    if (c.naechster_termin) {
+      rechts.append(el('span', 'naechstes__schild', 'Nächster Termin'));
+      const a = el('a', 'naechstes__wert', zeitpunkt(c.naechster_termin));
+      a.href = 'kalender.html';
+      rechts.append(a);
+    } else if (c.naechster_review) {
+      rechts.append(el('span', 'naechstes__schild', 'Nächster Review'));
+      const a = el('a', 'naechstes__wert', datum(c.naechster_review));
+      a.href = 'report.html';
+      rechts.append(a);
+    } else {
+      rechts.append(el('span', 'naechstes__schild', 'Nächster Termin'));
+      rechts.append(el('span', 'naechstes__wert naechstes__wert--leer', 'keiner geplant'));
+    }
+    kopf.append(rechts);
+    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'));
+    k.append(werte);
+
+    /* Start-Check als Balken statt als Zahl -- "4 von 16" liest man,
+       ein Viertel gefuellt sieht man. */
+    const check = el('a', 'fortschritt');
+    check.href = 'startcheck.html';
+    const geprueft = c.check_geprueft || 0;
+    const anteil = checkGesamt ? Math.round((geprueft / checkGesamt) * 100) : 0;
+    if (geprueft >= checkGesamt && checkGesamt) check.dataset.fertig = 'ja';
+
+    const zeile = el('p', 'fortschritt__zeile');
+    zeile.append(el('span', 'fortschritt__schild', 'Start-Check'));
+    zeile.append(el('span', 'fortschritt__text',
+      geprueft ? `${geprueft} von ${checkGesamt} geprüft` : 'noch nicht begonnen'));
+    if (c.check_handlung > 0) {
+      zeile.append(el('span', 'fortschritt__warn',
+        `${c.check_handlung} × Handlungsbedarf`));
+    }
+    check.append(zeile);
+
+    const balken = el('span', 'fortschritt__balken');
+    const fuellung = el('span', 'fortschritt__fuellung');
+    fuellung.style.width = anteil + '%';
+    if (c.check_handlung > 0) fuellung.dataset.warn = 'ja';
+    balken.append(fuellung);
+    check.append(balken);
+    k.append(check);
+
+    if (!c.hat_profil) {
+      const a = el('a', 'creator__luecke', eigen
+        ? 'Dein Profil ist noch leer – jetzt ausfüllen'
+        : 'Profil noch nicht ausgefüllt');
+      a.href = 'profil.html';
+      k.append(a);
+    }
+    return k;
+  }
+
+  function summenZeigen(liste) {
+    const s = $('summen');
+    s.textContent = '';
+    if (liste.length < 2) { s.hidden = true; return; }
+    const summe = (feld) => liste.reduce((n, c) => n + (c[feld] || 0), 0);
+    const felder = [
+      [liste.length, 'Creator', false],
+      [summe('ueberfaellig'), 'überfällig', true],
+      [summe('dringend'), 'dringende Punkte', true],
+      [summe('offen') + summe('arbeit'), 'offen & in Arbeit', false],
+      [summe('review'), 'im Review', false],
+      [summe('erledigt30'), 'erledigt · 30 Tage', false],
+    ];
+    for (const [zahl, name, warn] of felder) {
+      const k = el('div', 'summe');
+      if (warn && zahl > 0) k.dataset.warn = 'ja';
+      k.append(el('span', 'summe__zahl', String(zahl)));
+      k.append(el('span', 'summe__name', name));
+      s.append(k);
+    }
+    s.hidden = false;
+  }
+
+  (async () => {
+    let ich;
+    try {
+      const a = await hole('/workspace/api/ich');
+      if (!a.ok) { location.assign('/workspace/'); return; }
+      ich = await a.json();
+    } catch { return; }
+    $('wer').textContent = ich.name + ' · ' + (ich.rolle_name || ich.rolle);
+
+    let d;
+    try {
+      const a = await hole('/workspace/api/uebersicht/creator');
+      if (!a.ok) { melde('Die Übersicht konnte gerade nicht geladen werden.'); return; }
+      d = await a.json();
+    } catch { return; }
+
+    const ziel = $('liste');
+    ziel.textContent = '';
+    ziel.setAttribute('aria-busy', 'false');
+
+    const creator = d.creator || [];
+    const eigen = !!d.eigen;
+
+    if (eigen) {
+      $('titel').textContent = 'Mein Stand';
+      $('unterzeile').textContent = 'Wo du gerade stehst – aus deinen Aufgaben, Terminen und dem Start-Check.';
+    } else if (!creator.length) {
+      $('unterzeile').textContent = ich.rolle === 'scout'
+        ? 'Dir ist noch kein Creator zugeteilt.'
+        : 'Es gibt noch keinen Creator.';
+      ziel.append(el('p', 'leer-hinweis', ich.rolle === 'scout'
+        ? 'DogFather legt unter „Personen & Zugänge“ fest, wen du betreust.'
+        : 'Lege unter „Personen & Zugänge“ den ersten Creator an.'));
+      return;
+    } else {
+      $('unterzeile').textContent = creator.length === 1
+        ? 'Ein Creator – mit einem Blick sehen, wo es hakt und wo es läuft.'
+        : `${creator.length} Creator – mit einem Blick sehen, wo es hakt und wo es läuft.`;
+    }
+
+    summenZeigen(creator);
+
+    /* Wo etwas brennt, steht oben. Sortiert wird nach dem, was Handlung
+       verlangt -- nicht alphabetisch. Bei Gleichstand dann doch nach
+       Namen, damit die Reihenfolge stabil bleibt. */
+    const sortiert = creator.slice().sort((a, b) =>
+      (b.ueberfaellig + b.dringend) - (a.ueberfaellig + a.dringend)
+      || String(a.name).localeCompare(String(b.name), 'de'));
+
+    const box = el('div', 'creator-liste');
+    for (const c of sortiert) box.append(karte(c, d.check_gesamt || 16, eigen));
+    ziel.append(box);
+
+    if (d.stand) {
+      /* Der Server schickt UTC. zeitpunkt() darf hier NICHT genommen
+         werden -- das schneidet die Zeichenkette nur auf und zeigte im
+         Sommer zwei Stunden zu wenig an. */
+      const t = new Date(d.stand);
+      const p = (n) => String(n).padStart(2, '0');
+      const s = $('stand');
+      s.textContent = `Stand: ${p(t.getHours())}:${p(t.getMinutes())} Uhr · `
+        + 'wird bei jedem Aufruf neu ermittelt';
+      s.hidden = false;
+    }
+  })();
+})();

workspace/aufgaben.html

@@ -7,9 +7,9 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/start.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311245" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/start.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311315" />
 </head>
 
 <body class="start">
@@ -134,8 +134,8 @@
   </form>
 </dialog>
 
-<script src="assets/js/wahl.js?v=202608311245" defer></script>
-<script src="assets/js/kopf.js?v=202608311245" defer></script>
-<script src="assets/js/aufgaben.js?v=202608311245" defer></script>
+<script src="assets/js/wahl.js?v=202608311315" defer></script>
+<script src="assets/js/kopf.js?v=202608311315" defer></script>
+<script src="assets/js/aufgaben.js?v=202608311315" defer></script>
 </body>
 </html>

workspace/automation.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/start.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/automation.css?v=202608311245" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/start.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/automation.css?v=202608311315" />
 </head>
 
 <body class="start">
@@ -93,8 +93,8 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202608311245" defer></script>
-<script src="assets/js/kopf.js?v=202608311245" defer></script>
-<script src="assets/js/automation.js?v=202608311245" defer></script>
+<script src="assets/js/wahl.js?v=202608311315" defer></script>
+<script src="assets/js/kopf.js?v=202608311315" defer></script>
+<script src="assets/js/automation.js?v=202608311315" defer></script>
 </body>
 </html>

workspace/bereich.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/start.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/bereich.css?v=202608311245" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/start.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/bereich.css?v=202608311315" />
 </head>
 
 <body class="start">
@@ -98,8 +98,8 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202608311245" defer></script>
-<script src="assets/js/kopf.js?v=202608311245" defer></script>
-<script src="assets/js/bereich.js?v=202608311245" defer></script>
+<script src="assets/js/wahl.js?v=202608311315" defer></script>
+<script src="assets/js/kopf.js?v=202608311315" defer></script>
+<script src="assets/js/bereich.js?v=202608311315" defer></script>
 </body>
 </html>

workspace/calls.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/start.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/calls.css?v=202608311245" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/start.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/calls.css?v=202608311315" />
 </head>
 
 <body class="start">
@@ -49,9 +49,9 @@
 
 </main>
 
-<script src="assets/js/ki.js?v=202608311245" defer></script>
-<script src="assets/js/wahl.js?v=202608311245" defer></script>
-<script src="assets/js/kopf.js?v=202608311245" defer></script>
-<script src="assets/js/calls.js?v=202608311245" defer></script>
+<script src="assets/js/ki.js?v=202608311315" defer></script>
+<script src="assets/js/wahl.js?v=202608311315" defer></script>
+<script src="assets/js/kopf.js?v=202608311315" defer></script>
+<script src="assets/js/calls.js?v=202608311315" defer></script>
 </body>
 </html>

workspace/dateien.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/start.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/dateien.css?v=202608311245" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/start.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/dateien.css?v=202608311315" />
 </head>
 
 <body class="start">
@@ -88,8 +88,8 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202608311245" defer></script>
-<script src="assets/js/kopf.js?v=202608311245" defer></script>
-<script src="assets/js/dateien.js?v=202608311245" defer></script>
+<script src="assets/js/wahl.js?v=202608311315" defer></script>
+<script src="assets/js/kopf.js?v=202608311315" defer></script>
+<script src="assets/js/dateien.js?v=202608311315" defer></script>
 </body>
 </html>

workspace/index.html

@@ -25,7 +25,7 @@
       type="image/webp" media="(max-width: 899px)" />
 
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202608311245" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202608311315" />
 </head>
 
 <body class="gate">
@@ -143,6 +143,6 @@
   </p>
 </main>
 
-<script src="assets/js/gate.js?v=202608311245" defer></script>
+<script src="assets/js/gate.js?v=202608311315" defer></script>
 </body>
 </html>

workspace/kalender.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/start.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/kalender.css?v=202608311245" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/start.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/kalender.css?v=202608311315" />
 </head>
 
 <body class="start">
@@ -94,8 +94,8 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202608311245" defer></script>
-<script src="assets/js/kopf.js?v=202608311245" defer></script>
-<script src="assets/js/kalender.js?v=202608311245" defer></script>
+<script src="assets/js/wahl.js?v=202608311315" defer></script>
+<script src="assets/js/kopf.js?v=202608311315" defer></script>
+<script src="assets/js/kalender.js?v=202608311315" defer></script>
 </body>
 </html>

workspace/personen.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/start.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/personen.css?v=202608311245" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/start.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/personen.css?v=202608311315" />
 </head>
 
 <body class="start">
@@ -93,8 +93,8 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202608311245" defer></script>
-<script src="assets/js/kopf.js?v=202608311245" defer></script>
-<script src="assets/js/personen.js?v=202608311245" defer></script>
+<script src="assets/js/wahl.js?v=202608311315" defer></script>
+<script src="assets/js/kopf.js?v=202608311315" defer></script>
+<script src="assets/js/personen.js?v=202608311315" defer></script>
 </body>
 </html>

workspace/profil.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/start.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/profil.css?v=202608311245" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/start.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/profil.css?v=202608311315" />
 </head>
 
 <body class="start">
@@ -127,8 +127,8 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202608311245" defer></script>
-<script src="assets/js/kopf.js?v=202608311245" defer></script>
-<script src="assets/js/profil.js?v=202608311245" defer></script>
+<script src="assets/js/wahl.js?v=202608311315" defer></script>
+<script src="assets/js/kopf.js?v=202608311315" defer></script>
+<script src="assets/js/profil.js?v=202608311315" defer></script>
 </body>
 </html>

workspace/report.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/start.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/report.css?v=202608311245" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/start.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/report.css?v=202608311315" />
 </head>
 
 <body class="start">
@@ -86,9 +86,9 @@
 
 </main>
 
-<script src="assets/js/ki.js?v=202608311245" defer></script>
-<script src="assets/js/wahl.js?v=202608311245" defer></script>
-<script src="assets/js/kopf.js?v=202608311245" defer></script>
-<script src="assets/js/report.js?v=202608311245" defer></script>
+<script src="assets/js/ki.js?v=202608311315" defer></script>
+<script src="assets/js/wahl.js?v=202608311315" defer></script>
+<script src="assets/js/kopf.js?v=202608311315" defer></script>
+<script src="assets/js/report.js?v=202608311315" defer></script>
 </body>
 </html>

workspace/scouting.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/start.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/scouting.css?v=202608311245" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/start.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/scouting.css?v=202608311315" />
 </head>
 
 <body class="start">
@@ -124,8 +124,8 @@
   </div>
 </div>
 
-<script src="assets/js/wahl.js?v=202608311245" defer></script>
-<script src="assets/js/kopf.js?v=202608311245" defer></script>
-<script src="assets/js/scouting.js?v=202608311245" defer></script>
+<script src="assets/js/wahl.js?v=202608311315" defer></script>
+<script src="assets/js/kopf.js?v=202608311315" defer></script>
+<script src="assets/js/scouting.js?v=202608311315" defer></script>
 </body>
 </html>

workspace/start.html

@@ -7,8 +7,8 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/start.css?v=202608311245" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/start.css?v=202608311315" />
 </head>
 
 <body class="start">
@@ -56,8 +56,8 @@
   </p>
 </main>
 
-<script src="assets/js/wahl.js?v=202608311245" defer></script>
-<script src="assets/js/kopf.js?v=202608311245" defer></script>
-<script src="assets/js/start.js?v=202608311245" defer></script>
+<script src="assets/js/wahl.js?v=202608311315" defer></script>
+<script src="assets/js/kopf.js?v=202608311315" defer></script>
+<script src="assets/js/start.js?v=202608311315" defer></script>
 </body>
 </html>

workspace/startcheck.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/start.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/startcheck.css?v=202608311245" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/start.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/startcheck.css?v=202608311315" />
 </head>
 
 <body class="start">
@@ -65,9 +65,9 @@
 
 </main>
 
-<script src="assets/js/ki.js?v=202608311245" defer></script>
-<script src="assets/js/wahl.js?v=202608311245" defer></script>
-<script src="assets/js/kopf.js?v=202608311245" defer></script>
-<script src="assets/js/startcheck.js?v=202608311245" defer></script>
+<script src="assets/js/ki.js?v=202608311315" defer></script>
+<script src="assets/js/wahl.js?v=202608311315" defer></script>
+<script src="assets/js/kopf.js?v=202608311315" defer></script>
+<script src="assets/js/startcheck.js?v=202608311315" defer></script>
 </body>
 </html>

workspace/uebersicht.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+<title>Dashboard · Creator Workspace</title>
+<meta name="robots" content="noindex, nofollow" />
+<meta name="theme-color" content="#05070d" />
+<link rel="icon" href="assets/img/favicon.png" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/start.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/uebersicht.css?v=202608311315" />
+</head>
+
+<body class="start">
+
+<header class="kopfleiste">
+  <button type="button" class="zurueck-knopf" id="zurueck" hidden>
+    <svg class="zurueck-knopf__pfeil" viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M14.5 5.5 8 12l6.5 6.5" />
+    </svg>
+    <span class="zurueck-knopf__text">Zurück</span>
+  </button>
+  <p class="marke"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Dashboard</p>
+  <div class="kopfleiste__rechts">
+    <span class="wer" id="wer">…</span>
+    <button type="button" class="abmelden" id="abmelden">Abmelden</button>
+  </div>
+</header>
+
+<main class="inhalt inhalt--breit">
+
+  <section class="kopf-zeile">
+    <div>
+      <p class="marke">Alles zentral</p>
+      <h1 class="titel" id="titel">Dashboard</h1>
+      <p class="unterzeile" id="unterzeile">
+        Eine Karte je Creator – mit einem Blick sehen, wo es hakt und wo es läuft.
+      </p>
+    </div>
+  </section>
+
+  <p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
+
+  <!-- Summen über alle sichtbaren Creator. Steht oben, weil die Frage
+       "wie steht es insgesamt" vor der Frage "bei wem" kommt. -->
+  <section class="summen" id="summen" hidden></section>
+
+  <div id="liste" aria-busy="true"><p class="leise">Übersicht wird geladen …</p></div>
+
+  <p class="stand" id="stand" hidden></p>
+
+</main>
+
+<script src="assets/js/kopf.js?v=202608311315" defer></script>
+<script src="assets/js/uebersicht.js?v=202608311315" defer></script>
+</body>
+</html>

workspace/wissen.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/start.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311245" />
-<link rel="stylesheet" href="assets/css/wissen.css?v=202608311245" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/start.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311315" />
+<link rel="stylesheet" href="assets/css/wissen.css?v=202608311315" />
 </head>
 
 <body class="start">
@@ -170,8 +170,8 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202608311245" defer></script>
-<script src="assets/js/kopf.js?v=202608311245" defer></script>
-<script src="assets/js/wissen.js?v=202608311245" defer></script>
+<script src="assets/js/wahl.js?v=202608311315" defer></script>
+<script src="assets/js/kopf.js?v=202608311315" defer></script>
+<script src="assets/js/wissen.js?v=202608311315" defer></script>
 </body>
 </html>