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]>

workspace/assets/css/team.css

@@ -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; } }