Der Eingang: Mitglieder-Kachel, drei Stufen -- und lesbar statt leer

Zwei Auftraege in einem Zug: "mach weiter" (Blueprint Kapitel 4/4.1) und, zum Bildschirmfoto der Seite, "das muss viel krasser sein". KAPITEL 4 -- DIE MITGLIEDER-KACHEL Der Blueprint nennt: "Name & Foto · Rolle(n)/Kategorie(n) · Status (aktiv/pausiert) · Anzahl offener Aufgaben · Datum 'Modi seit' · Schnellaktionen". Name, Foto und Zahlen standen schon; Status, "dabei seit", Stufe und ein Knopf zum Schreiben kommen dazu. KAPITEL 4.1 -- DIE DREI STUFEN Probe, Standard, Senior. Sie sind eine ARBEITSEINTEILUNG, keine Rechtegrenze -- was ein Modi darf, haengt an der Rolle; die Stufe sagt, wo er im Team steht. Gesetzt werden sie nur von DogFather: Der Blueprint gibt der rechten Hand den gleichen UEBERBLICK, aber "Verwaltungsrechte optional durch Owner freischaltbar", also aus. NULL heisst "Probe" und nicht "unbekannt" -- ein dritter Zustand waere eine Frage, die niemand beantworten kann. ZWEI ECHTE FEHLER, BEIDE VON DER NEUEN PRUEFUNG GEFUNDEN 1. PAUSIERTE VERSCHWANDEN KOMPLETT. In der Abfrage stand `AND aktiv = 1`. Wer jemanden pausierte, bei dem verschwand er samt seiner OFFENEN RUECKMELDUNGEN aus dem Eingang -- die warteten weiter auf eine Antwort, nur sah sie niemand mehr. 2. DER EINGANG HAETTE AUF FRISCHER ANLAGE 503 GELIEFERT. Die Checklisten-Tabellen entstehen beim ersten Aufruf einer Checkliste; diese Seite liest sie aber auch. Wer sie oeffnete, bevor je jemand eine Checkliste angesehen hatte, bekam einen Fehler ohne Erklaerung -- auf einer neuen Anlage also beim allerersten Blick. Das Schema hat jetzt einen Besitzer, der es herausgibt; ein zweites CREATE TABLE waere der Anfang von zwei Schemata gewesen. "VIEL KRASSER" -- UND ZWAR MIT INFORMATION, NICHT MIT LAERM * ZWEI REIHEN STATT EINER. Alle fuenf Kaesten lagen in EINEM Raster mit 150 px Mindestbreite: Im Bildschirmfoto stand "Community 12 von" -- abgeschnitten mitten in der Zahl -- und die laengste Liste machte die ganze Reihe so hoch wie sich selbst. Jetzt oben, was eine Antwort braucht, darunter das Team; 300 px Mindestbreite. * DIE KARTE WAR FAHL, und das war ein Fehler: `--r` fiel auf ein helles Grau zurueck, aus dem das Kantenlicht einen Nebel ueber die ganze Karte legte. Sie traegt jetzt die Farbe der Stufe -- kein Nebel, und man sieht am Rand, wer wo steht. * SECHS ZAHLENKAESTEN WURDEN DREI BALKEN. "40 offen" beantwortet nicht, wie weit man ist: 40 von 40 ist etwas anderes als 40 von 100. Gruen (in Ordnung) und Bernstein (zu besprechen) fuellen den Balken; die ganze Zeile ist der Weg dorthin. * DIE DREI ZAHLEN DER SEITE stehen oben als Zahlen statt in einem Satz. Die Warnfarbe erscheint NUR, wenn wirklich etwas wartet -- eine Null in Bernstein waere ein Alarm ohne Anlass, und ab dem dritten Mal sieht man ihn nicht mehr. GEMESSEN pruef-team-stufen (neu) 24, mit Gegenprobe: hoch- und zurueckstufen, und dieselbe Stufe zweimal zu setzen darf keine zweite Protokollzeile erzeugen pruef-rollen 274 pruef-modi-checkliste 59 pruef-zwischenspeicher 21 Ansicht: Rechner 1440 und Handy 412 -- keine Skriptfehler, nichts ragt seitlich heraus (0 px). Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-10 16:27:44 +02:00
parent cdddf32183
commit 449fe35c0a
30 changed files with 1184 additions and 284 deletions
@@ -316,3 +316,251 @@
  .tz, .tl, .tperson { border: 1px solid CanvasText; }
  .tperson::after { background: CanvasText; }
 }
+
+/* =======================================================================
+   DIE MITGLIEDER-KACHEL AUS KAPITEL 4 (10.09.2026)
+
+   Der Blueprint verlangt dort neben Name, Foto und Zahlen auch Status
+   (aktiv/pausiert), das Datum "dabei seit" und -- nach 4.1 -- die
+   Stufe. Drei kurze Angaben, die zusammen in eine Zeile gehoeren:
+   Einzeln untereinander waeren sie drei Zeilen fuer neun Woerter.
+
+   ALLE DREI IM SELBEN GEWAND wie `tperson__zuletzt` daneben (Pille,
+   999px, .74rem). Ein zweites Gewand fuer dieselbe Sorte Angabe waere
+   der Anfang davon, dass die Karte nach Baustelle aussieht.
+   ==================================================================== */
+.tperson__merkmale {
+  display: flex; flex-wrap: wrap; gap: 6px;
+  margin-top: 10px;
+}
+.tmerkmal {
+  padding: 4px 10px; border-radius: 999px;
+  font-size: .74rem; font-weight: 600;
+  color: var(--text-leise);
+  background: rgba(255, 255, 255, .05);
+  border: 1px solid var(--rand);
+}
+/* "dabei seit" ist die leiseste der drei -- sie beantwortet keine
+   Frage, sie gibt nur Zusammenhang. */
+.tmerkmal--leise { opacity: .78; }
+
+/* PAUSIERT FAELLT AUF, aber warm und nicht alarmierend: Eine Pause ist
+   kein Fehler. Derselbe Ton wie die Warnung daneben, nur ruhiger --
+   sonst liest man "pausiert" als "kaputt". */
+.tmerkmal--pause {
+  color: color-mix(in srgb, var(--warn, #ff9aa2) 70%, #ffffff);
+  border-color: color-mix(in srgb, var(--warn, #ff9aa2) 38%, transparent);
+  background: rgba(255, 154, 162, .1);
+}
+
+/* DIE DREI STUFEN steigern sich sichtbar, ohne dass eine davon nach
+   Rang aussieht: gleiche Form, nur mehr Farbe. Probe bleibt bewusst
+   das ruhigste Schild -- wer neu ist, soll nicht markiert wirken. */
+.tmerkmal--probe {
+  color: color-mix(in srgb, #9fb6c6 82%, #ffffff);
+  border-color: rgba(159, 182, 198, .3);
+  background: rgba(159, 182, 198, .08);
+}
+.tmerkmal--standard {
+  color: color-mix(in srgb, #7fc4e8 82%, #ffffff);
+  border-color: rgba(127, 196, 232, .34);
+  background: rgba(127, 196, 232, .1);
+}
+.tmerkmal--senior {
+  color: color-mix(in srgb, #8fd6a6 84%, #ffffff);
+  border-color: rgba(143, 214, 166, .38);
+  background: rgba(143, 214, 166, .12);
+}
+
+/* ---------- Die Stufe setzen (nur DogFather) --------------------------- */
+.tstufen {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
+  margin-top: 12px; padding-top: 11px;
+  border-top: 1px solid var(--rand);
+}
+/* DAS SCHILD NIMMT DIE GANZE ZEILE.
+
+   Ohne `flex-basis: 100%` teilt es sich die erste Zeile mit der ersten
+   Stufe -- im Bildschirmfoto stand "STUFE  Probe" oben und darunter
+   "Standard  Senior". Drei gleichwertige Knoepfe, ungleich verteilt:
+   Man liest sie dann als zwei Gruppen statt als eine Reihe. */
+.tstufen__schild {
+  flex-basis: 100%;
+  margin-bottom: 2px;
+  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
+  text-transform: uppercase; color: var(--text-still);
+}
+.tstufen__knopf {
+  padding: 6px 12px; border-radius: 999px;
+  font: inherit; font-size: .78rem; font-weight: 600;
+  color: var(--text-leise);
+  background: rgba(255, 255, 255, .04);
+  border: 1px solid var(--rand);
+  cursor: pointer;
+  transition: background .15s ease, color .15s ease, border-color .15s ease;
+}
+.tstufen__knopf:hover:not([disabled]) {
+  color: var(--text); background: rgba(255, 255, 255, .08);
+}
+.tstufen__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
+/* Die gewaehlte Stufe ist gefuellt, nicht bloss umrandet: Bei drei
+   gleich aussehenden Pillen erkennt man einen Rahmenwechsel zu
+   langsam, gerade auf einem hellen Bildschirm. */
+.tstufen__knopf[data-an="ja"] {
+  color: #0a121e;
+  background: color-mix(in srgb, var(--akzent, #7fc4e8) 82%, #ffffff);
+  border-color: transparent;
+}
+.tstufen__knopf[disabled] { opacity: .55; cursor: default; }
+@media (prefers-reduced-motion: reduce) { .tstufen__knopf { transition: none; } }
+
+/* =======================================================================
+   DER EINGANG WIRD LESBAR STATT LEER (10.09.2026)
+
+   Filipe zum Bildschirmfoto: "das muss viel krasser sein."
+
+   Er hatte recht, und der Grund war nicht Geschmack: Auf der Seite
+   standen drei gleich hohe Spalten, von denen zwei leer waren und
+   trotzdem ueber den halben Bildschirm gingen. Die einzige Karte mit
+   Inhalt lag darin wie ein Zettel in einem Umzugskarton -- und war
+   ausserdem fahl, weil ihre Rollenfarbe auf ein helles Grau zurueckfiel.
+
+   Vier Aenderungen, und jede loest etwas Konkretes:
+     1. Leere Spalten schrumpfen (`align-items: start`).
+     2. Die Karte traegt die Farbe der Stufe -- kein Nebel mehr, und
+        man sieht am Rand, wer wo steht.
+     3. Aus sechs Zahlenkaesten je Person werden drei Balken: "wie
+        weit" statt "wie viele offen".
+     4. Die drei Zahlen der Seite stehen oben als Zahlen, nicht in
+        einem Satz.
+   ==================================================================== */
+
+/* 1. ZWEI REIHEN, UND LEERE KAESTEN SCHRUMPFEN.
+
+      `.t-lage` war ein Raster mit `auto-fit, minmax(150px, 1fr)` fuer
+      ALLES: die zwei Wartelisten und jede Person. Bei fuenf Kaesten
+      nebeneinander blieben rund 150 px je Spalte, und im
+      Bildschirmfoto stand "Community 12 von" -- abgeschnitten mitten
+      in der Zahl. Ausserdem machte die laengste Liste die ganze Reihe
+      so hoch wie sich selbst.
+
+      Jetzt untereinander: erst was eine Antwort braucht, dann das
+      Team. `align-items: start` haelt leere Kaesten kurz -- `stretch`
+      ist die Vorgabe und zieht sonst jeden auf die Hoehe des
+      hoechsten. */
+.t-lage {
+  display: grid; gap: 18px;
+  grid-template-columns: 1fr;
+  align-items: start;
+}
+/* 300 px ist nachgemessen und nicht geraten: Darunter bricht
+   "Community" von der Zahl daneben ab, und die Stufenknoepfe fallen in
+   drei Zeilen. Auf einem Handy bleibt es bei einer Spalte. */
+.t-wartet, .t-leute {
+  display: grid; gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
+  align-items: start;
+}
+
+/* 2. DIE STUFE ALS FARBE DER KARTE.
+      Dieselben drei Toene wie die Schilder darin -- ein vierter waere
+      eine zweite Sprache fuer dieselbe Sache. */
+.tperson[data-stufe="probe"]    { --r: #9fb6c6; }
+.tperson[data-stufe="standard"] { --r: #7fc4e8; }
+.tperson[data-stufe="senior"]   { --r: #8fd6a6; }
+/* Pausiert wird leiser, nicht ausgegraut: 0,72 statt 0,6 (das ist der
+   Wert fuer GESPERRT). Eine Pause ist kein Entzug. */
+.tperson[data-pause="ja"] { opacity: .72; }
+
+/* 3. DIE BEREICHE ALS BALKEN --------------------------------------- */
+.tfort {
+  display: grid; gap: 8px;
+  margin-top: 14px; padding-top: 13px;
+  border-top: 1px solid var(--rand);
+}
+.tfort__zeile {
+  display: grid; gap: 6px;
+  padding: 10px 12px; border-radius: 12px;
+  text-decoration: none; color: inherit;
+  background: rgba(255, 255, 255, .028);
+  border: 1px solid var(--rand);
+  transition: background .15s ease, border-color .15s ease;
+}
+.tfort__zeile:hover {
+  background: rgba(255, 255, 255, .06);
+  border-color: color-mix(in srgb, var(--r) 40%, transparent);
+}
+.tfort__zeile:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
+.tfort__kopf {
+  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
+}
+.tfort__name { font-size: .88rem; font-weight: 650; color: var(--text); }
+.tfort__zahl {
+  flex: none;
+  font-size: .78rem; font-weight: 700; color: var(--text-leise);
+  font-variant-numeric: tabular-nums;
+}
+/* DIE BAHN. 8 px hoch -- hoch genug, um die Farbe zu erkennen, flach
+   genug, um nicht wie ein Ladebalken zu wirken. Der leere Teil bleibt
+   sichtbar dunkel: Ein Balken ohne Bahn zeigt nur, was da ist, nicht
+   wie viel fehlt. */
+.tfort__bahn {
+  display: flex; overflow: hidden;
+  height: 8px; border-radius: 999px;
+  background: rgba(255, 255, 255, .07);
+}
+.tfort__bahn > i { display: block; height: 100%; }
+/* GRUEN = besprochen und in Ordnung. BERNSTEIN = besprochen, da ist
+   was. Beide fuellen den Balken, denn beide heissen "angesehen" --
+   der Unterschied liegt im Ergebnis, nicht im Fortschritt. */
+.tfort__gut { background: color-mix(in srgb, #8fd6a6 78%, #5f8a9f); }
+.tfort__verbessern { background: color-mix(in srgb, #ffc978 82%, #b07a3a); }
+.tfort__unter {
+  font-size: .76rem; color: var(--text-still); line-height: 1.5;
+}
+
+/* 4. DIE DREI ZAHLEN DER SEITE -------------------------------------- */
+.tkopfzahlen {
+  grid-column: 1 / -1;          /* ueber die ganze Breite, keine vierte Spalte */
+  display: grid; gap: 10px;
+  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
+  margin-bottom: 4px;
+}
+.tkz {
+  display: grid; gap: 3px; align-content: start;
+  padding: 15px 17px; border-radius: 14px;
+  background:
+    linear-gradient(160deg, rgba(127, 196, 232, .07), transparent 60%),
+    linear-gradient(178deg, rgba(10, 14, 22, .95), rgba(5, 8, 14, .98));
+  border: 1px solid var(--rand);
+}
+.tkz__wert {
+  font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 750;
+  line-height: 1.05; color: var(--text);
+  font-variant-numeric: tabular-nums;
+}
+.tkz__schild {
+  font-size: .8rem; color: var(--text-leise); line-height: 1.4;
+}
+/* WAS WARTET, FAELLT AUF -- aber nur, wenn wirklich etwas wartet. Eine
+   Null in Warnfarbe waere ein Alarm ohne Anlass, und ab dem dritten Mal
+   sieht man ihn nicht mehr. */
+.tkz[data-dran="ja"] {
+  border-color: color-mix(in srgb, #ffc978 42%, transparent);
+  background:
+    linear-gradient(160deg, rgba(255, 201, 120, .12), transparent 62%),
+    linear-gradient(178deg, rgba(10, 14, 22, .95), rgba(5, 8, 14, .98));
+}
+.tkz[data-dran="ja"] .tkz__wert { color: color-mix(in srgb, #ffc978 78%, #ffffff); }
+.tkz__bahn {
+  display: block; overflow: hidden;
+  height: 8px; margin-top: 8px; border-radius: 999px;
+  background: rgba(255, 255, 255, .07);
+}
+.tkz__bahn > i {
+  display: block; height: 100%;
+  background: linear-gradient(90deg,
+    color-mix(in srgb, #5f8a9f 80%, #ffffff),
+    color-mix(in srgb, #8fd6a6 76%, #5f8a9f));
+}
+@media (prefers-reduced-motion: reduce) { .tfort__zeile { transition: none; } }
@@ -30,6 +30,13 @@
  };
  const melde = (t) => { const f = $('fehler'); if (f) f.textContent = t || ''; };

+  let ich = null;
+  /* Die Stufen kommen mit der Antwort des Servers -- eine eigene Liste
+     hier waere die zweite, und die zweite laeuft irgendwann auseinander. */
+  let STUFEN = [];
+  const stufenName = (wert) =>
+    STUFEN.find((s) => s.wert === wert)?.name || STUFEN[0]?.name || '';
+
  async function hole(pfad, optionen = {}) {
    const a = await fetch(pfad, { credentials: 'same-origin', ...optionen });
    if (a.status === 401) { location.assign('/workspace/'); throw new Error('abgemeldet'); }
@@ -62,6 +69,18 @@

  function karte(m) {
    const k = el('article', 'tperson');
+    /* DIE KARTE TRAEGT DIE FARBE DER STUFE (10.09.2026).
+
+       Vorher fiel `--r` auf `--text-still` zurueck -- ein helles Grau,
+       aus dem das Kantenlicht einen fahlen Schleier ueber die ganze
+       Karte legte. Auf dem Bildschirmfoto sah sie neben den beiden
+       dunklen Spalten daneben aus wie ueberbelichtet.
+
+       Die Stufe als Farbe zu nehmen loest zwei Dinge auf einmal: Der
+       Schleier wird zu einem klaren Ton, und man sieht schon am Rand
+       der Karte, wer wo steht -- ohne das Schild zu lesen. */
+    k.dataset.stufe = m.stufe || 'probe';
+    if (!m.aktiv) k.dataset.pause = 'ja';

    const kopf = el('div', 'tperson__kopf');
    const zeichen = el('span', 'tperson__zeichen');
@@ -87,30 +106,128 @@
    kopf.append(text);
    k.append(kopf);

+    /* ===================================================================
+       DIE MITGLIEDER-KACHEL AUS KAPITEL 4 (10.09.2026)
+
+       Der Blueprint nennt dort: "Name & Foto · Rolle(n)/Kategorie(n) ·
+       Status (aktiv/pausiert) · Anzahl offener Aufgaben · Datum 'Modi
+       seit' · Schnellaktionen". Name, Foto und die Zahlen standen
+       schon; Status, "dabei seit" und die Stufe kommen hier dazu.
+       ================================================================ */
+    const merkmale = el('div', 'tperson__merkmale');
+
+    /* PAUSIERT ZUERST. Wer pausiert ist, erklaert jede andere Zahl
+       darunter -- null Aufgaben sind dann kein Grund nachzufragen. */
+    if (!m.aktiv) merkmale.append(el('span', 'tmerkmal tmerkmal--pause', 'pausiert'));
+
+    merkmale.append(el('span', `tmerkmal tmerkmal--${m.stufe || 'probe'}`,
+      stufenName(m.stufe)));
+
+    if (m.seit) {
+      const tage = tageHer(m.seit);
+      merkmale.append(el('span', 'tmerkmal tmerkmal--leise',
+        tage === null ? 'dabei'
+          : tage < 1 ? 'seit heute dabei'
+            : tage < 31 ? `seit ${tage} Tagen dabei`
+              : `seit ${Math.round(tage / 30.4)} Monaten dabei`));
+    }
+    k.append(merkmale);
+
+    /* DIE STUFE SETZEN -- nur DogFather. Die rechte Hand sieht sie,
+       aendert sie aber nicht: Wer im Team auf welcher Stufe steht, ist
+       eine Personalentscheidung (Blueprint 4.1, "Rechte anpassen"
+       liegt beim Owner). Der Server sagt dasselbe noch einmal. */
+    if (ich?.rolle === 'admin') {
+      const wahl = el('div', 'tstufen');
+      wahl.append(el('span', 'tstufen__schild', 'Stufe'));
+      for (const st of STUFEN) {
+        const b = el('button', 'tstufen__knopf', st.name);
+        b.type = 'button';
+        b.dataset.stufe = st.wert;
+        if ((m.stufe || STUFEN[0]?.wert) === st.wert) b.dataset.an = 'ja';
+        b.addEventListener('click', () => stufeSetzen(wahl, m, st.wert));
+        wahl.append(b);
+      }
+      k.append(wahl);
+    }
+
+    /* SCHNELLAKTION: schreiben. `?mit=` legt das Gespraech beim ersten
+       Mal an und findet beim zweiten dasselbe wieder -- der Weg gibt es
+       seit dem 06.09. und wird hier nur benutzt, nicht neu gebaut.
+       Nachgemessen: Die rechte Hand und die Modis duerfen einander
+       schreiben, ein Manager ist fuer beide nicht erreichbar. */
+    const aktionen = el('div', 'tpipe__reihe');
+    const schreiben = el('a', 'schritt', `${m.name} schreiben`);
+    schreiben.href = `chat.html?mit=${m.id}`;
+    aktionen.append(schreiben);
+    k.append(aktionen);
+
    const zahlen = el('div', 'tperson__zahlen');
    zahlen.append(zahl(m.aufgaben.offen, 'Aufgaben offen'));
    zahlen.append(zahl(m.aufgaben.ueberfaellig, 'überfällig'));
    zahlen.append(zahl(m.ideen, 'Ideen'));
    zahlen.append(zahl(m.nachrichten, 'Rückmeldungen'));
+    k.append(zahlen);
+
+    /* ===================================================================
+       DIE DREI BEREICHE ALS BALKEN (10.09.2026)
+
+       Hier standen bis eben drei weitere Zahlenkaesten ("40 Live-Ablauf:
+       offen") und darunter noch einmal drei Verweise mit denselben
+       Zahlen in Klammern. Sechs Kaesten fuer drei Aussagen -- und die
+       wichtigste stand in keinem davon: WIE WEIT sind wir?
+
+       "40 offen" beantwortet das nicht. Vierzig von vierzig ist nicht
+       dasselbe wie vierzig von hundert, und genau das ist die Frage,
+       die man beim Hinsehen hat.
+
+       Ein Balken beantwortet sie ohne Rechnen: gut und "verbessern"
+       fuellen ihn von links, der Rest ist offen. Zwei Farben, weil es
+       zwei verschiedene Dinge sind -- "besprochen und in Ordnung" und
+       "besprochen, da ist was". Beide sind ERLEDIGT im Sinne von
+       "angesehen", und deshalb fuellen beide den Balken.
+
+       Die ganze Zeile ist der Verweis. Vorher war es ein eigener Knopf
+       darunter; ein Balken, der aussieht wie eine Anzeige, aber klickbar
+       ist, muss auch wie ein Ziel aussehen -- deshalb Rahmen und
+       Hover. */
+    const fortschritt = el('div', 'tfort');
    for (const b of BEREICHE) {
      const z = m.bereiche[b.schluessel];
-      if (z) zahlen.append(zahl(z.offen, `${b.name}: offen`));
+      if (!z) continue;
+      const gesamt = Math.max(z.gesamt || 0, 1);
+      const beurteilt = (z.gut || 0) + (z.verbessern || 0);
+
+      const a = el('a', 'tfort__zeile');
+      a.href = `bereich.html?b=${b.schluessel}&creator_id=${m.id}`;
+
+      const kopfz = el('span', 'tfort__kopf');
+      kopfz.append(el('span', 'tfort__name', b.name));
+      kopfz.append(el('span', 'tfort__zahl', `${beurteilt} von ${z.gesamt}`));
+      a.append(kopfz);
+
+      const bahn = el('span', 'tfort__bahn');
+      const gut = el('i', 'tfort__gut');
+      gut.style.width = `${((z.gut || 0) / gesamt) * 100}%`;
+      const schlecht = el('i', 'tfort__verbessern');
+      schlecht.style.width = `${((z.verbessern || 0) / gesamt) * 100}%`;
+      bahn.append(gut, schlecht);
+      a.append(bahn);
+
+      /* Die Aufschluesselung in Worten -- fuer alle, die den Balken
+         nicht sehen koennen, und fuer die Faelle, in denen zwei
+         Prozentpunkte Unterschied nicht auffallen. */
+      a.append(el('span', 'tfort__unter',
+        z.verbessern
+          ? `${z.gut} in Ordnung · ${z.verbessern} zu besprechen · ${z.offen} offen`
+          : `${z.gut} in Ordnung · ${z.offen} offen`));
+      fortschritt.append(a);
    }
-    k.append(zahlen);
+    if (fortschritt.children.length) k.append(fortschritt);

    /* UND HIER WIRD BEHANDELT. Ein Verweis je Bereich, der die Person
       mitnimmt -- ohne sie muesste man dort noch einmal auswaehlen,
       und beim zweiten Mal weiss man nicht mehr, warum man hier war. */
-    const wege = el('div', 'tpipe__reihe');
-    for (const b of BEREICHE) {
-      const z = m.bereiche[b.schluessel];
-      if (!z) continue;
-      const a = el('a', 'schritt',
-        `${b.name} ansehen (${z.gut} gut · ${z.verbessern} verbessern)`);
-      a.href = `bereich.html?b=${b.schluessel}&creator_id=${m.id}`;
-      wege.append(a);
-    }
-    k.append(wege);
    return k;
  }

@@ -125,6 +242,52 @@
     die nichts folgt, sieht fuer ihn aus wie eine, die niemand gelesen
     hat -- und beim dritten Mal meldet er nichts mehr.
     ===================================================================== */
+  /* ===================================================================
+     DIE STUFE SETZEN
+
+     Sofort sichtbar, dann speichern. Andersherum -- erst der Server,
+     dann die Anzeige -- fuehlt sich bei jedem Druck traege an, obwohl
+     nichts langsam ist. Schlaegt es fehl, springt die Auswahl zurueck
+     UND es steht eine Meldung da: Eine Anzeige, die sich lautlos
+     zurueckdreht, sieht wie ein Wackelkontakt aus.
+     ================================================================ */
+  async function stufeSetzen(wahl, m, stufe) {
+    const knoepfe = [...wahl.querySelectorAll('.tstufen__knopf')];
+    const vorher = knoepfe.find((b) => b.dataset.an === 'ja')?.dataset.stufe || null;
+    if (vorher === stufe) return;
+
+    const zeigen = (wert) => {
+      for (const b of knoepfe) {
+        if (b.dataset.stufe === wert) b.dataset.an = 'ja';
+        else delete b.dataset.an;
+      }
+    };
+    zeigen(stufe);
+    for (const b of knoepfe) b.disabled = true;
+    try {
+      const a = await hole('/workspace/api/teamlage/stufe', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ person_id: m.id, stufe }),
+      });
+      if (!a.ok) throw new Error('abgelehnt');
+      m.stufe = stufe;
+      /* Das Schild oben in derselben Karte zieht mit -- sonst stuende
+         dort die alte Stufe neben der neuen Auswahl. */
+      const schild = wahl.parentElement?.querySelector('[class*="tmerkmal--"]:not(.tmerkmal--pause):not(.tmerkmal--leise)');
+      if (schild) {
+        schild.className = `tmerkmal tmerkmal--${stufe}`;
+        schild.textContent = stufenName(stufe);
+      }
+      melde('');
+    } catch {
+      zeigen(vorher);
+      melde('Die Stufe konnte nicht gespeichert werden.');
+    } finally {
+      for (const b of knoepfe) b.disabled = false;
+    }
+  }
+
  function eingangBauen(liste) {
    const k = el('section', 'tperson');
    k.append(el('p', 'feldschild', 'Rückmeldungen aus dem Team'));
@@ -279,6 +442,11 @@
      const a = await hole('/workspace/api/teamlage');
      if (!a.ok) { melde('Die Lage konnte nicht geladen werden.'); return; }
      const daten = await a.json();
+      /* VOR dem Bauen der Karten: Sie fragen die Liste ab. Stuende
+         diese Zeile darunter, waere die Stufe beim ersten Aufbau leer
+         und erst nach dem naechsten Laden da -- ein Fehler, den man
+         beim Entwickeln nie sieht, weil man ohnehin neu laedt. */
+      STUFEN = Array.isArray(daten.stufen) && daten.stufen.length ? daten.stufen : STUFEN;
      ziel.textContent = '';
      ziel.setAttribute('aria-busy', 'false');

@@ -289,14 +457,85 @@
         deshalb steht hier auch, was zu tun waere. */
      const wartend = (daten.eingang || []).length + (daten.angebote || []).length;
      $('kopf-unter').textContent = leute.length
-        ? `${leute.length} ${leute.length === 1 ? 'Person' : 'Personen'} · `
-          + `${wartend} ${wartend === 1 ? 'Rückmeldung wartet' : 'Rückmeldungen warten'} · `
-          + `${offenGesamt} Punkte noch nicht beurteilt`
+        ? `${leute.length} ${leute.length === 1 ? 'Person' : 'Personen'} im Team`
        : 'Noch niemand im Team. Zugänge legst du unter „Personen & Zugänge“ an.';

-      ziel.append(eingangBauen(daten.eingang || []));
-      ziel.append(angeboteBauen(daten.angebote || []));
-      for (const m of leute) ziel.append(karte(m));
+      /* ===================================================================
+         DIE DREI ZAHLEN, DIE DIE SEITE BEANTWORTET (10.09.2026)
+
+         Sie standen als Fliesstext in einer Zeile: "1 Person · 0
+         Rueckmeldungen warten · 101 Punkte noch nicht beurteilt".
+         Genau das sind aber die drei Fragen, wegen derer man diese
+         Seite ueberhaupt aufmacht -- und in einem Satz muss man sie
+         lesen statt zu sehen.
+
+         DIE DRITTE BEKOMMT EINEN BALKEN. "101 noch nicht beurteilt"
+         beantwortet nicht, wie weit man ist: Hundertein von hundertzwei
+         ist etwas anderes als hundertein von dreihundert. Der Balken
+         beantwortet es ohne Rechnen.
+
+         BEI NIEMANDEM IM TEAM bleibt die Leiste ganz weg. Drei Nullen
+         mit Balken auf null sehen aus wie ein Fehler; der Satz oben
+         sagt dann, was zu tun ist. */
+      const punkteGesamt = leute.reduce((sum, m) =>
+        sum + Object.values(m.bereiche).reduce((x, b) => x + (b.gesamt || 0), 0), 0);
+      const beurteilt = Math.max(punkteGesamt - offenGesamt, 0);
+      const pausiert = leute.filter((m) => !m.aktiv).length;
+
+      if (leute.length) {
+        const leiste = el('div', 'tkopfzahlen');
+
+        const eins = el('div', 'tkz');
+        eins.append(el('strong', 'tkz__wert', String(leute.length)));
+        eins.append(el('span', 'tkz__schild',
+          pausiert ? `im Team · ${pausiert} pausiert` : 'im Team'));
+        leiste.append(eins);
+
+        const zwei = el('div', 'tkz');
+        if (wartend) zwei.dataset.dran = 'ja';
+        zwei.append(el('strong', 'tkz__wert', String(wartend)));
+        zwei.append(el('span', 'tkz__schild',
+          wartend === 1 ? 'wartet auf dich' : 'warten auf dich'));
+        leiste.append(zwei);
+
+        const drei = el('div', 'tkz');
+        drei.append(el('strong', 'tkz__wert', `${beurteilt}`));
+        drei.append(el('span', 'tkz__schild', `von ${punkteGesamt} Punkten besprochen`));
+        const bahn = el('span', 'tkz__bahn');
+        const voll = el('i', '');
+        voll.style.width = `${punkteGesamt ? (beurteilt / punkteGesamt) * 100 : 0}%`;
+        bahn.append(voll);
+        drei.append(bahn);
+        leiste.append(drei);
+
+        ziel.append(leiste);
+      }
+
+      /* ===================================================================
+         ZWEI REIHEN STATT EINER (10.09.2026)
+
+         Vorher lagen alle fuenf Kaesten in EINEM Raster: die beiden
+         Wartelisten und je eine Karte pro Person. Zwei Folgen, beide
+         schlecht:
+
+           * DIE SPALTEN WURDEN ZU SCHMAL. Bei fuenf nebeneinander blieb
+             jeder rund 150 px, und im Bildschirmfoto stand "Community
+             12 von" -- abgeschnitten mitten in der Zahl.
+           * DIE LAENGSTE BESTIMMTE DIE HOEHE ALLER. Zehn Rueckmeldungen
+             machten die Reihe so hoch wie zehn Rueckmeldungen; daneben
+             standen drei kurze Karten in sehr viel Luft.
+
+         Es sind auch zwei verschiedene Dinge: oben, was eine ANTWORT
+         braucht, unten, wer im Team ist. Getrennte Reihen sagen das,
+         ohne es hinzuschreiben. */
+      const wartet = el('div', 't-wartet');
+      wartet.append(eingangBauen(daten.eingang || []));
+      wartet.append(angeboteBauen(daten.angebote || []));
+      ziel.append(wartet);
+
+      const runde = el('div', 't-leute');
+      for (const m of leute) runde.append(karte(m));
+      ziel.append(runde);
    } catch { /* umgeleitet */ }
  }

@@ -304,7 +543,15 @@
    try {
      const a = await hole('/workspace/api/ich');
      if (!a.ok) { location.assign('/workspace/'); return; }
-      window.werZeigen?.(await a.json());
+      /* Wer zusieht, entscheidet, ob die Stufenwahl erscheint. Die
+         Antwort wurde bisher nur weitergereicht -- gemerkt wird sie
+         erst, seit es hier etwas gibt, das nicht jeder darf.
+
+         DER SERVER ENTSCHEIDET TROTZDEM: Diese Zeile blendet nur aus.
+         Wer den Aufruf von Hand nachbaut, bekommt 404 -- das steht in
+         workspace-teamlage.js und nicht hier. */
+      ich = await a.json();
+      window.werZeigen?.(ich);
    } catch { return; }
    $('abmelden')?.addEventListener('click', async () => {
      try { await fetch('/workspace/api/abmelden', { method: 'POST', credentials: 'same-origin' }); }