Die Personenkachel wird eine Standkarte -- mit den Aufgaben darauf

Filipe: "mach das bitte viel krasser und viel geiler. die aufgaben die
wir verteilen sollen da auch zu sehen sein und so. viel
uebersichtlicher, viel moderner. nicht so banal und einfach."

VORHER: Name, Rolle, ein flacher Balken und drei Zahlenkaesten. Auf
seinem Bildschirmfoto standen in fuenf von sechs Kacheln exakt
dieselben drei Zahlen (0 / 68 / 0) -- achtzehn Kaesten fuer eine
einzige Auskunft. Und die Aufgaben, die er eine Handbreit darunter
verteilt, kamen auf der Kachel derselben Person gar nicht vor.

JETZT drei Zonen in der Reihenfolge, in der man fragt:
  KOPF     Ring mit dem Anteil in der Mitte, Name, Rolle.
  AUFTRAG  Wie viele offen, wie viele ueberfaellig, und die naechste
           mit Namen und Frist ("seit gestern ueberfaellig").
  FUSS     "46 von 68 angesehen" -- und "verschieden gesehen" nur
           dann, wenn es dort etwas gibt.

Der Ring rechnet mit stroke-dasharray auf einem Kreis vom Umfang 100:
der Anteil in Prozent ist damit buchstaeblich die Strichlaenge. Keine
Ampelfarbe -- was "genug" ist, haengt davon ab, wie lange jemand dabei
ist. Gewarnt wird nur an einem Massstab, der nicht geraten ist: einer
ueberschrittenen Frist.

Die Aufgabenzeile wird aus derselben Liste gerechnet wie das
Verteil-Band und der Katalog (alleAufgabenV) und in aufgabenHolen()
nachgezogen -- an EINER Stelle, damit es keine gibt, die es vergisst.

GITTER STATT FLIESSREIHE: Bei sieben Leuten stand die letzte Kachel
allein in ihrer Zeile und wuchs auf 1160 px neben 379 px der anderen.
Eine Person sah dreimal so wichtig aus, weil die Teamgroesse ungerade
ist.

Drei Funde nebenbei, alle durch die neuen Messungen:

  - pruef-schritt verlangte seit dem 23.09. einen Sprung, der an dem
    Tag ABSICHTLICH entfernt wurde. Sie war seither rot, ohne dass
    etwas kaputt war. Neu gefasst auf den Sprung, den es noch gibt:
    den Weg von aussen ueber "?zeigen=person-...".
  - Und der war kaputt. Gesprungen wurde, waehrend in der Karte nur
    "wird geladen ..." stand -- die Seite war zu kurz zum Scrollen,
    der Browser klemmte bei 0 ab. Wer der Talentseite folgte, landete
    oben auf der Liste. Gesprungen wird jetzt, wenn die Karte steht.
  - Auf demselben Weg rief karte() das Vorlagenbrett, bevor es
    eingerichtet war ("zeigen() vor einrichten()"). Das Einrichten ist
    vorgezogen. Ueber "?zeigen=" ging vorher KEINE Pruefung.

Gemessen: pruef-entwicklung-kacheln 31 (vorher 16), pruef-schritt 68
(vorher 65), pruef-entwicklung 48, pruef-modi-katalog 133,
pruef-bewerbung-aufgaben 101, pruef-zuteilung, pruef-css-klassen --
alle gruen. Schriftgroessen unter 11,5 px: 40 statt 42.

Neu: server/mess-entwicklung-kacheln.mjs. Die Pruefung braucht einen
kargen Bestand und zeigt deshalb den Sonderfall (alles auf null); diese
Datei legt sieben Leute mit verschiedenen Staenden und Aufgaben an und
macht Bilder fuer 1280 und 390 px. Sie prueft nichts.

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

workspace/assets/css/entwicklung.css

@@ -61,60 +61,264 @@
   margin: 7px 0 0; font-size: .8rem; line-height: 1.55; color: var(--text-still);
 }
 
-/* ---------------------------------------------------------------------
-   Die Personenreihe
+/* =====================================================================
+   DIE PERSONENREIHE — DIE STANDKARTE (24.09.2026)
+   =====================================================================
+
+   Filipe: „mach das bitte viel krasser und viel geiler. die aufgaben
+   die wir verteilen sollen da auch zu sehen sein und so. viel
+   übersichtlicher, viel moderner."
+
+   VORHER: Name, Rolle, ein flacher Balken und drei Zahlenkästen —
+   bei sechs Leuten also achtzehn Kästen, und auf Filipes Bildschirm-
+   foto stand in fünfen davon dasselbe (0 / 68 / 0). Viel Fläche für
+   eine einzige Auskunft, und die Aufgaben, die eine Handbreit
+   darunter verteilt werden, kamen gar nicht vor.
+
+   JETZT drei Zonen, von oben nach unten in der Reihenfolge, in der
+   man fragt:
+
+     KOPF    Ring + Name + Rolle. Der Ring trägt seinen Anteil in der
+             Mitte — Form und Zahl an derselben Stelle. Sechs Ringe
+             untereinander vergleicht man, ohne zu lesen.
+     AUFTRAG Was bei der Person liegt: wie viele offen, wie viele
+             überfällig, und die nächste mit Namen und Frist. Als
+             abgesetzter Streifen mit farbiger Kante — das ist die
+             Zone, die sich ändert, während man arbeitet.
+     FUSS    „46 von 68 angesehen", und nur wenn es etwas gibt:
+             „3 verschieden gesehen".
+
+   AUGENSCHONEND (Hausregel): kein Leuchten, kein Farbverlauf, der
+   blendet, keine Ampel auf dem Ring. Die einzige warme Farbe der
+   Kachel steht an der Kante des Auftragsstreifens, und auch nur
+   dann, wenn wirklich eine Frist überschritten ist — ein Maßstab,
+   der nicht geraten ist. Bewegung gibt es allein beim Ring, und die
+   fällt bei „prefers-reduced-motion" weg.
+
+   WARUM SPANS UND KEINE DIVS: Die Kachel ist ein <button>, und der
+   darf laut HTML nur Fließtext enthalten. Ein <div> darin wird zwar
+   angezeigt, ist aber ungültig — und ungültige Verschachtelung ist
+   genau die Sorte Fehler, die erst irgendwann und dann in einem
+   einzigen Browser auffällt. Die Spans stehen hier auf display:flex.
    ------------------------------------------------------------------- */
-.e-personen { display: flex; flex-wrap: wrap; gap: 10px; }
+/* GITTER STATT FLIESSREIHE (gemessen am 24.09.2026).
+
+   Vorher standen die Kacheln in einer umbrechenden Reihe mit
+   „flex: 1 1 340px“. Das sieht bei sechs Leuten gut aus und bei sieben
+   falsch: Die letzte Kachel steht allein in ihrer Zeile und WÄCHST auf
+   die volle Breite — gemessen 1160 px neben 379 px der anderen. Eine
+   Person sah dadurch dreimal so wichtig aus wie die davor, und zwar
+   aus dem einzigen Grund, dass die Teamgröße ungerade ist.
+
+   Ein Gitter mit „auto-fill“ legt feste Spalten an. Die letzte Kachel
+   bleibt dann so breit wie jede andere, und die Zeile endet mit Luft
+   statt mit einer aufgeblähten Person.
+
+   „minmax(320px, 1fr)“ statt einer Spaltenzahl: Wie viele hineinpassen,
+   rechnet der Browser aus der Breite aus — eine feste Zahl wäre wieder
+   eine Rechnung von gestern, und beim siebten Teammitglied falsch. */
+.e-personen {
+  display: grid; gap: 12px;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+}
 
 .e-person {
-  display: flex; flex-direction: column; gap: 3px;
-  /* Seit die drei Bilanz-Kaesten darin stehen, braucht die Kachel
-     mehr Grundbreite -- bei 210px wurde jeder Kasten einzeilig
-     gequetscht und die Ziffer rutschte unter ihr Wort. */
-  min-width: 260px; flex: 1 1 300px;
-  padding: 13px 15px; text-align: left; cursor: pointer;
+  display: flex; flex-direction: column; gap: 11px;
+  /* Ohne das sprengt ein langer Aufgabentitel die Spalte, statt
+     abgeschnitten zu werden: Ein Gitterfeld ist von Haus aus mindestens
+     so breit wie sein Inhalt. */
+  min-width: 0;
+  padding: 14px 16px 13px; text-align: left; cursor: pointer;
   font: inherit;
   background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
   border: 1px solid var(--rand);
-  transition: border-color .16s ease;
+  border-radius: var(--radius-klein, 12px);
+  transition: border-color .16s ease, background-color .16s ease;
 }
 .e-person:hover, .e-person:focus-visible {
   border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
 }
-.e-person__name { font-size: .98rem; font-weight: 640; color: var(--text); }
-.e-person__rolle { font-size: .78rem; color: var(--text-still); }
-.e-person__zahlen { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 6px; }
-.e-person__zahl { font-size: .77rem; color: var(--text-leise); }
-/* Die Abweichung ist das Ergebnis dieser Seite — sie darf als Einzige
-   auffallen. */
-.e-person__zahl--wichtig { color: var(--text); font-weight: 620; }
-.e-person__zahl--alt { color: var(--text-still); margin-top: 8px; }
 
-/* ---------------------------------------------------------------------
-   DIE DREI ZAHLEN AUF DER KACHEL (17.09.2026)
-
-   Filipe, mit zwei Bildschirmfotos nebeneinander: „wieso ist diese seite
-   noch nicht im stil und perfektioniert wie die auf screen2". Der
-   Unterschied lag an den Zahlen: hier graue Textzeilen, drüben die
-   abgesetzten Kästen mit großer Ziffer.
-
-   `.bilanz-zahl` kommt aus start.css und wird hier nur gesetzt — nicht
-   nachgebaut. Ein zweites Aussehen für dieselbe Sache läuft auseinander,
-   sobald jemand eins davon anfasst.
-
-   AUTO-FIT STATT DREI SPALTEN: Auf dem Handy ist eine Kachel schmal,
-   am Rechner breit. `minmax` bricht genau dann um, wenn der Platz nicht
-   reicht — eine feste Spaltenzahl wäre wieder eine Rechnung von gestern.
-   ------------------------------------------------------------------- */
-.e-person__bilanz {
-  display: grid; gap: 8px; margin-top: 10px;
-  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
+/* ---- Kopf: Ring, Name, Rolle -------------------------------------- */
+.e-person__kopf { display: flex; align-items: center; gap: 12px; }
+.e-person__wer {
+  display: flex; flex-direction: column; gap: 2px;
+  /* Ohne das schiebt ein langer Name den Ring aus der Kachel. */
+  min-width: 0;
+}
+.e-person__name {
+  font-size: .99rem; font-weight: 640; color: var(--text);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.e-person__rolle { font-size: .78rem; color: var(--text-still); }
+
+/* DER RING.
+
+   Der Kreis im SVG hat den Umfang 100 (r = 15,9155) — deshalb ist
+   stroke-dasharray: 68 100 buchstäblich „68 Prozent", ohne
+   Umrechnung im Kopf und ohne eine Grafik je Stand.
+
+   Gedreht wird die ganze Zeichnung um eine Vierteldrehung nach
+   links, damit der Bogen oben beginnt und im Uhrzeigersinn läuft.
+   Ein Fortschritt, der auf drei Uhr anfängt, liest sich falsch.
+
+   KEINE AMPELFARBE. Was „genug" ist, hängt davon ab, wie lange
+   jemand dabei ist; eine Schwelle wäre geraten und bei der nächsten
+   Person falsch. Der Ring sagt WIE WEIT und urteilt nicht. */
+.e-ring {
+  position: relative; flex: 0 0 auto;
+  width: 54px; height: 54px;
+  display: flex; align-items: center; justify-content: center;
+  line-height: 1;
+}
+.e-ring__bild {
+  position: absolute; inset: 0; width: 100%; height: 100%;
+  transform: rotate(-90deg);
+}
+/* Die Spur muss man SEHEN — sonst ist ein Ring bei 0 % gar kein Ring,
+   sondern eine leere Stelle neben dem Namen, und die Kachel sieht aus,
+   als fehle dort etwas. Gemessen am ersten Bildschirmfoto: bei 70 %
+   Rand war sie auf dem dunklen Grund praktisch weg. */
+.e-ring__spur {
+  stroke: color-mix(in srgb, var(--rand-hell) 62%, transparent);
+  stroke-width: 3;
+}
+.e-ring__bogen {
+  stroke: color-mix(in srgb, var(--akzent) 72%, transparent);
+  stroke-width: 3.2; stroke-linecap: round;
+  transition: stroke-dasharray .38s ease;
+}
+/* Runde Enden zeichnen schon bei „0 100" einen Punkt auf zwölf Uhr —
+   der sieht aus wie ein Fehler, nicht wie ein Anfang. */
+.e-ring[data-leer="ja"] .e-ring__bogen { stroke-linecap: butt; }
+/* Wer alles angesehen hat, bekommt einen ruhigen vollen Ring — kein
+   Grün, keine Feier: Es ist der Normalzustand, nicht ein Preis. */
+.e-ring[data-voll="ja"] .e-ring__bogen {
+  stroke: color-mix(in srgb, var(--akzent) 88%, transparent);
+}
+.e-ring__zahl {
+  font-size: 1.04rem; font-weight: 660; color: var(--text);
+  font-variant-numeric: tabular-nums;
+}
+/* NICHT UNTER 0,72 rem — das sind 11,52 px, die Untergrenze des
+   Hauses (siehe pruef-css-klassen). Mein erster Entwurf hatte hier
+   .62rem, weil das Prozentzeichen neben der Ziffer nur ein Beiwerk
+   ist. Das stimmt gestalterisch und ist trotzdem falsch: Augenschonung
+   ist Pflicht, nicht Geschmack, und „ist ja nur ein Zeichen" gilt
+   nicht für den, der es nicht lesen kann. Klein genug bleibt es
+   ohnehin — die Ziffer daneben ist 16,6 px. */
+.e-ring__prozent {
+  margin-left: 1px; font-size: .72rem; color: var(--text-leise);
+  align-self: center;
+}
+@media (prefers-reduced-motion: reduce) {
+  .e-ring__bogen { transition: none; }
+}
+
+/* ---- Der Auftragsstreifen ----------------------------------------- */
+/* DAS IST DER TEIL, DEN FILIPE VERMISST HAT. Er verteilt die Aufgaben
+   eine Handbreit weiter unten; die Kachel darüber wusste nichts davon.
+
+   Abgesetzt, mit eigener Kante: Es ist die einzige Zone der Kachel,
+   die sich ändert, während man arbeitet. Alles andere ist Stand. */
+.e-person__auftrag {
+  display: flex; flex-direction: column; gap: 3px;
+  padding: 9px 11px;
+  border: 1px solid var(--rand);
+  border-left: 3px solid color-mix(in srgb, var(--akzent) 52%, transparent);
+  border-radius: 9px;
+  background: color-mix(in srgb, #ffffff 3.5%, transparent);
+}
+/* „Nichts offen" ist auch eine Antwort — und zwar die, nach der man
+   beim Verteilen sucht. Sie bleibt stehen, nur leise: Wäre der
+   Streifen ganz weg, sähe die Kachel aus, als fehle dort etwas. */
+.e-person__auftrag[data-leer="ja"] {
+  /* OHNE KASTEN, ABER MIT DERSELBEN KANTE.
+
+     Mit vollem Rahmen sah die Zeile auf dem ersten Bildschirmfoto aus
+     wie ein leeres Eingabefeld — man greift hin und kann nichts
+     eintippen. Ein Rahmen verspricht, dass man etwas tun kann.
+
+     Die linke Kante bleibt trotzdem stehen, nur gedämpft. Dadurch
+     liegen alle Auftragsstreifen der Reihe auf derselben senkrechten
+     Linie, und die KANTE wird zur eigentlichen Auskunft: gedämpft =
+     nichts offen, blau = es liegt etwas an, warm = eine Frist ist
+     vorbei. Das liest man, ohne eine Zeile zu lesen. */
+  border: none; background: none;
+  border-left: 3px solid color-mix(in srgb, var(--rand) 60%, transparent);
+  border-radius: 0;
+  padding: 2px 0 2px 11px;
+}
+.e-person__auftrag[data-spaet="ja"] {
+  border-left-color: color-mix(in srgb, var(--warn) 58%, transparent);
+}
+.e-person__auftrag-kopf {
+  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px;
+}
+.e-person__auftrag-zahl {
+  font-size: 1.16rem; font-weight: 680; color: var(--text);
+  font-variant-numeric: tabular-nums;
+}
+.e-person__auftrag-wort { font-size: .8rem; color: var(--text-still); }
+/* Das Einzige auf der Kachel, das warnt — und nur, wenn eine Frist
+   wirklich vorbei ist. Ein Maßstab, der nicht geraten ist. */
+.e-person__auftrag-spaet {
+  margin-left: auto;
+  font-size: .72rem; font-weight: 620;
+  padding: 2px 9px; border-radius: 999px;
+  color: color-mix(in srgb, var(--warn) 50%, #ffffff);
+  border: 1px solid color-mix(in srgb, var(--warn) 42%, transparent);
+  background: color-mix(in srgb, var(--warn) 9%, transparent);
+}
+/* Untereinander, nicht nebeneinander: Ein langer Aufgabentitel würde
+   die Frist sonst auf eine zweite Zeile drücken und dort allein
+   stehen lassen — man liest sie dann als eigene Angabe. */
+.e-person__auftrag-naechste {
+  display: flex; flex-direction: column; gap: 1px; min-width: 0;
+}
+.e-person__auftrag-titel {
+  font-size: .82rem; color: var(--text);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.e-person__auftrag-frist { font-size: .74rem; color: var(--text-leise); }
+.e-person__auftrag-frist[data-spaet="ja"] {
+  color: color-mix(in srgb, var(--warn) 48%, #ffffff); font-weight: 600;
+}
+.e-person__auftrag-leer { font-size: .79rem; color: var(--text-leise); }
+
+/* ---- Der Fuß ------------------------------------------------------- */
+.e-person__fuss {
+  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px;
+  font-size: .76rem; color: var(--text-leise);
+  /* NACH UNTEN GESCHOBEN. Kacheln in einer Reihe sind gleich hoch, die
+     Inhalte verschieden lang — ohne das hing die feine Zeile bei der
+     einen mittendrin und bei der anderen unten, und dazwischen stand
+     ein Loch. Jetzt liegen sie auf einer Linie, und das Auge liest die
+     Reihe quer statt jede Kachel einzeln. */
+  margin-top: auto; padding-top: 2px;
+}
+.e-person__stand-zahl {
+  color: var(--text-still); font-weight: 650;
+  font-variant-numeric: tabular-nums;
+}
+.e-person__stand[data-voll="ja"] .e-person__stand-zahl {
+  color: color-mix(in srgb, var(--gut, #79d1a2) 45%, #ffffff);
+}
+/* „verschieden gesehen" ist die einzige Zahl dieser Seite, die zu
+   einer Handlung führt — dort lohnt das Gespräch. Steht dort eine
+   Null, steht sie gar nicht erst da (siehe entwicklung.js). */
+.e-person__abw {
+  font-weight: 620;
+  color: color-mix(in srgb, #e0a33c 42%, #ffffff);
+}
+.e-person__alt { color: var(--text-still); }
+
+/* WER BRAUCHT AUFMERKSAMKEIT? Liegt bei jemandem etwas Überfälliges,
+   sieht man das an der ganzen Kachel, nicht erst am Streifen darin —
+   gedämpft, kein Signalrot: Es ist ein Hinweis, kein Alarm. */
+.e-person:has(.e-person__auftrag[data-spaet="ja"]) {
+  border-color: color-mix(in srgb, var(--warn) 32%, var(--rand));
 }
-/* Die Kästen sitzen in einem Knopf und dürfen ihn nicht abfangen —
-   sonst trifft ein Tippen auf die Zahl die Kachel nicht. */
-.e-person__bilanz .bilanz-zahl { pointer-events: none; padding: 9px 11px; }
-.e-person__bilanz .bilanz-zahl__n { font-size: 1.35rem; }
-.e-person__bilanz .bilanz-zahl__text { font-size: .74rem; }
 
 /* WEN HABE ICH GERADE OFFEN? Vorher sah die Kachel nach dem Klick aus
    wie vorher; wer scrollte, verlor den Faden. Gedämpft hell statt
@@ -126,6 +330,9 @@
     linear-gradient(180deg, color-mix(in srgb, var(--akzent) 11%, transparent), transparent 62%),
     color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
 }
+.e-person[aria-pressed="true"] .e-ring__bogen {
+  stroke: color-mix(in srgb, var(--akzent) 90%, transparent);
+}
 
 /* ---------------------------------------------------------------------
    Die Karte
@@ -2273,123 +2480,86 @@
 
 
 /* =====================================================================
-   DIE PERSONENWAHL AUF DEM HANDY (23.09.2026)
+   DIE PERSONENWAHL AUF DEM HANDY (23.09.2026, neu gefasst 24.09.2026)
    =====================================================================
 
-   Filipe: "ich will dass du die so krass uebersichtlich machst."
+   Filipe: „ich will dass du die so krass uebersichtlich machst."
 
-   Gemessen vorher: sechs Kacheln, 1176 px, alle untereinander. Das ist
-   anderthalb Bildschirme nur fuer die Frage "wen nehme ich mir vor" --
-   und danach faengt die eigentliche Arbeit erst an.
+   Gemessen damals: sechs Kacheln, 1176 px, alle untereinander — 
+   anderthalb Bildschirme nur für die Frage „wen nehme ich mir vor".
+   Antwort war und bleibt: zwei nebeneinander.
 
-   ZWEI NEBENEINANDER STATT EINE. Der Grund fuer die alte Mindestbreite
-   von 260 px steht oben: Die drei Bilanz-Kaesten wurden sonst
-   gequetscht, und die Ziffer rutschte unter ihr Wort. Das stimmt --
-   solange die Kaesten NEBENEINANDER stehen. Am Handy stehen sie hier
-   untereinander, jeder eine Zeile: Ziffer links, Wort rechts. So
-   braucht keiner mehr Breite als eine Zeile Text, und die Kachel
-   kommt mit der halben Bildschirmbreite aus.
+   NEU GEFASST, WEIL DIE KACHEL EINE ANDERE IST. Hier stand bis
+   heute eine Regel, die die drei Bilanz-Kästen am Handy
+   untereinander legte. Die Kästen gibt es nicht mehr; die Regel
+   hätte nichts mehr getroffen und beim nächsten Lesen erklärt,
+   wie eine Kachel aussieht, die es nicht mehr gibt.
 
-   KEINE ZAHL FAELLT WEG. Wer verteilt, muss sehen, wer schon wie viel
-   hat -- das ist der ganze Zweck dieser Kaesten (siehe
-   entwicklung.js). Sie werden kleiner, nicht weniger. */
+   WAS AM HANDY KLEINER WIRD: der Ring (54 → 44 px) und die
+   Innenabstände. WAS NICHT WEGFÄLLT: der Auftragsstreifen. Er ist
+   der Grund, warum diese Kachel neu gebaut wurde — wer am Handy
+   verteilt, braucht ihn genauso. Die „überfällig"-Marke rutscht
+   bei Platzmangel von selbst in die zweite Zeile (flex-wrap),
+   statt den Text zu quetschen. */
 @media (max-width: 620px) {
+  /* Zwei je Zeile — ausdrücklich, nicht über „auto-fill“: 390 px
+     Handybreite liegen unter der 320-px-Spalte, der Browser würde also
+     von selbst eine einzige Spalte legen. Genau das war der Zustand,
+     über den Filipe sich beschwert hat („anderthalb Bildschirme nur für
+     die Frage, wen ich mir vornehme"). */
+  .e-personen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .e-person {
-    /* Zwei je Zeile: die halbe Breite minus der Luecke dazwischen. */
-    min-width: 0;
-    flex: 1 1 calc(50% - 10px);
-    padding: 11px 12px;
+    padding: 11px 12px 10px; gap: 9px;
   }
-  /* Ziffer und Wort in EINER Zeile statt uebereinander -- das spart
-     die Haelfte der Hoehe je Kasten, und drei Kaesten sind drei
-     Zeilen. */
-  .e-person__bilanz {
-    grid-template-columns: 1fr;
-    gap: 4px; margin-top: 8px;
-  }
-  .e-person__bilanz .bilanz-zahl {
-    display: flex; align-items: baseline; gap: 7px;
-    padding: 5px 9px;
-  }
-  .e-person__bilanz .bilanz-zahl__n {
-    font-size: 1rem; min-width: 1.4em;
-  }
-  /* NICHT UNTER 11,5 px -- das ist die Grenze des Hauses, und sie
-     steht dort aus einem Grund: Augenschonung ist Pflicht, nicht
-     Geschmack. Mein erster Entwurf hatte .7rem (11,2 px) und wurde
-     von pruef-css-klassen gefangen: "43 Stellen unter 11,5 px, eine
-     mehr als die Grundlinie 42". Genau dafuer zaehlt sie mit. */
-  .e-person__bilanz .bilanz-zahl__text {
-    font-size: .75rem; line-height: 1.25;
-  }
-  .e-person__name { font-size: .95rem; }
+  .e-person__kopf { gap: 9px; }
+  .e-ring { width: 44px; height: 44px; }
+  .e-ring__zahl { font-size: .9rem; }
+  .e-person__name { font-size: .93rem; }
   .e-person__rolle { font-size: .72rem; }
+  .e-person__auftrag { padding: 7px 9px; }
+  .e-person__auftrag-zahl { font-size: 1.05rem; }
+  /* NICHT UNTER 11,5 px — das ist die Grenze des Hauses, und sie
+     steht dort aus einem Grund: Augenschonung ist Pflicht, nicht
+     Geschmack. Ein früherer Entwurf hatte hier .7rem (11,2 px) und
+     wurde von pruef-css-klassen gefangen. */
+  .e-person__auftrag-wort,
+  .e-person__auftrag-titel { font-size: .78rem; }
+  .e-person__auftrag-frist,
+  .e-person__auftrag-spaet,
+  .e-person__fuss { font-size: .73rem; }
 }
-
 /* Ganz schmal (320 px) wieder eine je Zeile: Zwei Kacheln haetten dort
    je 145 px, und "verschieden gesehen" braucht mehr. Eine Zahl, die
    man nicht lesen kann, ist keine. */
 @media (max-width: 380px) {
-  .e-person { flex: 1 1 100%; }
+  .e-personen { grid-template-columns: 1fr; }
 }
 
 
-/* =====================================================================
-   DER FORTSCHRITT EINER PERSON (23.09.2026)
-   =====================================================================
+/* DER FORTSCHRITTSBALKEN IST WEG (24.09.2026).
 
-   Filipe: "mal was krass modernes ... viel viel viel uebersichtlicher."
+   Hier stand seit dem 23.09. eine schmale Spur unter dem Namen —
+   der Vorgänger des Rings. Sie beantwortete dieselbe Frage (wer
+   ist wie weit), brauchte dafür aber die ganze Kachelbreite und
+   ließ offen, wovon der Anteil ist; die Zahl dazu stand in einem
+   Kasten darunter.
 
-   Eine schmale Spur unter dem Namen. Sie beantwortet die Frage, die
-   man an diese Liste stellt -- wer ist wie weit -- ohne dass man drei
-   Zahlen lesen und im Kopf verrechnen muss.
+   Der Ring weiter oben trägt beides an derselben Stelle und gibt
+   die Breite für die Aufgaben frei, die Filipe hier sehen will.
 
-   KEINE AMPELFARBEN. Was "genug" ist, haengt davon ab, wie lange
-   jemand dabei ist; eine Schwelle waere geraten und bei der naechsten
-   Person falsch. Der Balken traegt die Akzentfarbe der Seite und sagt
-   nur, WIE WEIT -- nicht, ob das gut ist.
+   ENTFERNT STATT STEHENGELASSEN: Eine Regel, die nichts mehr
+   trifft, liest man beim nächsten Mal als den Weg, wie ein
+   Fortschritt auf dieser Seite aussieht — und baut ihn neben den
+   Ring ein zweites Mal. */
 
-   VIER BILDPUNKTE HOCH. Hoeher waere ein Balken, der mit dem Namen um
-   Aufmerksamkeit ringt; niedriger sieht man ihn nicht mehr. Die Spur
-   darunter bleibt sichtbar, auch bei 0 % -- sonst sieht die Kachel
-   aus, als fehle dort etwas.
+/* EINE NULL IST KEINE WARNUNG — und steht seit dem 24.09.2026 gar
+   nicht mehr da.
 
-   AUGENSCHONEND (Hausregel): kein Leuchten, kein Verlauf, der
-   blendet. Der Balken ist gedeckt und liegt auf einer dunklen Spur.
-   Die Bewegung beim Neuzeichnen ist kurz und faellt bei
-   "prefers-reduced-motion" ganz weg. */
-.e-fortschritt {
-  position: relative;
-  height: 4px; margin: 9px 0 2px;
-  background: color-mix(in srgb, var(--rand) 55%, transparent);
-  border-radius: 2px;
-  overflow: hidden;
-}
-.e-fortschritt__balken {
-  height: 100%;
-  background: color-mix(in srgb, var(--akzent) 72%, transparent);
-  border-radius: inherit;
-  transition: width .32s ease;
-}
-/* Wer alles angesehen hat, bekommt einen ruhigen vollen Balken --
-   kein Gruen, keine Feier: Es ist der Normalzustand, nicht ein Preis. */
-.e-fortschritt[data-voll="ja"] .e-fortschritt__balken {
-  background: color-mix(in srgb, var(--akzent) 88%, transparent);
-}
-@media (prefers-reduced-motion: reduce) {
-  .e-fortschritt__balken { transition: none; }
-}
+   Hier wurde der Kasten „verschieden gesehen" gedämpft, wenn eine
+   Null darin stand: gleiche Größe, gleicher Platz, nur leiser. Das
+   war der halbe Schritt. Der ganze steht jetzt in entwicklung.js —
+   bei null erscheint die Angabe überhaupt nicht.
 
-/* EINE NULL IST KEINE WARNUNG.
-
-   "verschieden gesehen" ist die einzige der drei Zahlen, die zu einer
-   Handlung fuehrt. Steht dort eine Null -- und das ist der Normalfall
-   --, tritt der Kasten zurueck: gleiche Groesse, gleicher Platz, nur
-   leiser. Bei sechs Leuten waeren es sonst sechs gelbe Nullen, und
-   die echte siebte faellt dann nicht mehr auf. */
-.e-person__bilanz .bilanz-zahl[data-still="ja"] {
-  opacity: .5;
-}
-.e-person__bilanz .bilanz-zahl[data-still="ja"] .bilanz-zahl__n {
-  font-weight: 500;
-}
+   Der Grund ist derselbe geblieben: Bei sechs Leuten wären es sechs
+   Nullen, die aussehen wie Warnungen, und die echte siebte fällt
+   dann nicht mehr auf. */