Die Personenkacheln der Entwicklung im Hausstil

Filipe, mit zwei Bildschirmfotos nebeneinander: "wieso ist diese seite
noch nicht im stil und perfektioniert wie die auf screen2 ... aber so
dass ich die leute in einer kachel aussuchen kann alle einzel."

Der Unterschied lag NICHT im Aufbau -- der stimmte -- und auch nicht
am Inhalt: Die 28 Punkte sind laengst ganz auf Modi-Arbeit gebaut (Im
Chat 8, Wenn es eng wird 7, Im Team 7, Wie viel von selbst 6, dazu
sechs Fragen an einen selbst). Es waren zwei andere Dinge:

1. DIE ZAHLEN WAREN GRAUE TEXTZEILEN
Drueben stehen sie als abgesetzte Kaesten mit grosser Ziffer und
eigenem Ton. `bilanz-zahl` liegt in start.css und gehoert dem ganzen
Haus -- es wird jetzt benutzt statt nachgebaut. Ein Nachbau laeuft
auseinander, sobald jemand eins von beiden anfasst.

Aus "0 von 28 angesehen" werden drei Kaesten wie auf der Checkliste:
angesehen / noch offen / verschieden gesehen. Die ersten beiden teilen
dasselbe Ganze, die dritte ist das Ergebnis dieser Seite -- wo zwei
Leute dasselbe sehen, gibt es nichts zu besprechen.

2. EINE ANGEKLICKTE PERSON SAH AUS WIE EINE NICHT ANGEKLICKTE
Die Kachel war ein Knopf ohne Zustand. Man klickte jemanden an, die
Karte ging auf -- und oben blieb alles gleich. Wer scrollte, wusste
nicht mehr, wen er offen hat. Jetzt `aria-pressed`, damit es auch ein
Vorleseprogramm sagen kann, und eine gedaempfte Umrandung. Die Reihe
heisst "Person waehlen" wie auf dem Aufgabenbrett.

Nebenbei: Der Ton des ersten Kastens springt auf gruen, sobald nichts
mehr offen ist -- sonst saehe eine fertig angesehene Person aus wie
eine halbe.

NEU: pruef-entwicklung-kacheln (15 Pruefungen)
Nicht "sieht gleich aus" -- das laesst sich nicht messen -- sondern
was das Aussehen traegt: Benutzt die Kachel den Hausbaustein oder
einen Nachbau (und steht nichts Selbstgebautes daneben)? Ergibt
angesehen + noch offen die Gesamtzahl, die die Auskunft selbst nennt?
Und die Gegenprobe zur Auswahl: VOR dem ersten Klick darf keine
Kachel gewaehlt sein, danach genau eine, und beim naechsten Klick
wandert sie, statt sich zu sammeln.

pruef-entwicklung 43 und pruef-css-klassen unveraendert gruen.

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

workspace/assets/js/entwicklung.js

@@ -99,7 +99,14 @@
     const kopf = document.querySelector('#karte .e-karte__stand');
     if (kopf) kopf.textContent = satz;
     const kachel = personZahlen.get(letzteKarte.id);
-    if (kachel) kachel.textContent = satz;
+    if (kachel) {
+      /* Zwei Ziffern statt eines Satzes -- und der Ton wechselt auf
+         gruen, sobald nichts mehr offen ist. Ohne das bliebe eine
+         fertig angesehene Person blaugrau wie eine halbe. */
+      kachel.angesehen.textContent = String(gesetzt);
+      kachel.offen.textContent = String(Math.max(0, r.gesamt - gesetzt));
+      kachel.kasten.dataset.stufe = gesetzt >= r.gesamt ? 'gut' : 'offen';
+    }
 
     /* Und die Köpfe der Kategorien -- sonst steht zugeklappt „0 / 7“
        über sieben beantworteten Fragen. */
@@ -164,35 +171,65 @@
   }
 
   /* ---- Die Personen --------------------------------------------------- */
+  /* EIN BILANZ-KASTEN, wie ihn die Checkliste benutzt (17.09.2026).
+
+     Filipe, mit zwei Bildschirmfotos nebeneinander: "wieso ist diese
+     seite noch nicht im stil und perfektioniert wie die auf screen2".
+
+     Der Unterschied war nicht der Aufbau -- der stimmte -- sondern die
+     Zahlen: Hier standen sie als graue Textzeilen, drueben als
+     abgesetzte Kaesten mit grosser Ziffer und eigenem Ton. Zwei
+     Bretter, die dasselbe tun und verschieden aussehen, wirken wie
+     zwei verschiedene Sachen.
+
+     `bilanz-zahl` steht in start.css und gehoert damit dem ganzen Haus,
+     nicht der Checkliste. Nachbauen waere eine zweite Wahrheit ueber
+     dasselbe Aussehen gewesen. */
+  function bilanzZahl(n, text, stufe, hinweis) {
+    const kasten = el('div', 'bilanz-zahl');
+    kasten.dataset.stufe = stufe;
+    if (hinweis) kasten.title = hinweis;
+    const ziffer = el('span', 'bilanz-zahl__n', String(n));
+    kasten.append(ziffer);
+    kasten.append(el('span', 'bilanz-zahl__text', text));
+    return { kasten, ziffer };
+  }
+
   function personKarte(p, lage) {
     const k = el('button', 'e-person');
     k.type = 'button';
+    /* JEDE PERSON IST EINZELN WAEHLBAR -- UND MAN SIEHT ES.
+       Vorher war die Kachel ein Knopf ohne Zustand: Man klickte jemanden
+       an, die Karte ging auf, und die Kachel sah aus wie vorher. Wer
+       dann scrollte, wusste nicht mehr, wen er offen hat. */
+    k.setAttribute('aria-pressed', 'false');
+    k.dataset.person = String(p.id);
     k.append(el('span', 'e-person__name', p.name));
     k.append(el('span', 'e-person__rolle', p.rolle_name));
 
-    const zahlen = el('span', 'e-person__zahlen');
-    const wieViele = el('span', 'e-person__zahl',
-      `${p.gesetzt} von ${lage.gesamt_fremd} angesehen`);
-    /* Die Kachel merkt sich ihr Zahlenfeld -- daran zieht
-       zaehlerNachziehen() sie nach, ohne die Liste neu zu holen. */
-    personZahlen.set(p.id, wieViele);
-    zahlen.append(wieViele);
-    /* DIE ABWEICHUNG STEHT VORNE UND NICHT IM DETAIL. Sie ist das
-       Ergebnis dieser Seite: Wo zwei Leute dasselbe sehen, gibt es
+    const gesamt = Number(lage.gesamt_fremd) || 0;
+    const gesetzt = Number(p.gesetzt) || 0;
+    const zahlen = el('div', 'e-person__bilanz');
+    /* DIESELBEN DREI WIE DRUEBEN, und die ersten beiden teilen dasselbe
+       Ganze: angesehen + noch offen = alle Punkte. Die dritte ist das
+       Ergebnis dieser Seite -- wo zwei Leute dasselbe sehen, gibt es
        nichts zu besprechen. */
-    if (p.abweichungen) {
-      const z = el('span', 'e-person__zahl e-person__zahl--wichtig',
-        `${p.abweichungen} × verschieden gesehen`);
-      z.title = 'Hier lohnt das Gespräch – nicht dort, wo ihr einig seid.';
-      zahlen.append(z);
-    }
+    const a = bilanzZahl(gesetzt, 'angesehen',
+      gesamt && gesetzt >= gesamt ? 'gut' : 'offen');
+    const o = bilanzZahl(Math.max(0, gesamt - gesetzt), 'noch offen', 'offen');
+    const v = bilanzZahl(Number(p.abweichungen) || 0, 'verschieden gesehen',
+      'verbessern', 'Hier lohnt das Gespräch – nicht dort, wo ihr einig seid.');
+    zahlen.append(a.kasten, o.kasten, v.kasten);
+    /* Die Kachel merkt sich ihre Ziffern -- daran zieht
+       zaehlerNachziehen() sie nach, ohne die Liste neu zu holen. */
+    personZahlen.set(p.id, { angesehen: a.ziffer, offen: o.ziffer, kasten: a.kasten });
+    k.append(zahlen);
     if (p.veraltet) {
       const z = el('span', 'e-person__zahl e-person__zahl--alt',
         `${p.veraltet} älter als ${lage.verblasst_nach} Tage`);
       z.title = 'Eine alte Einschätzung ist keine Einschätzung mehr.';
-      zahlen.append(z);
+      k.append(z);
     }
-    k.append(zahlen);
     /* NUR HIER WIRD GESPRUNGEN: Wer eine Person anklickt, will zu ihrer
        Karte. Überall sonst bleibt die Seite stehen, wo sie steht. */
     k.addEventListener('click', () => karte(p.id, true));
@@ -220,6 +257,13 @@
      alles darunter weg. */
   async function karte(id, springen = false) {
     offen = id;
+    /* WER IST GERADE OFFEN? Die Antwort gehoert auf die Kacheln, nicht
+       nur in eine Variable. `aria-pressed` sagt es zugleich einem
+       Vorleseprogramm -- eine Umrandung allein kann das nicht. */
+    for (const kachel of document.querySelectorAll('#personen .e-person')) {
+      kachel.setAttribute('aria-pressed',
+        kachel.dataset.person === String(id) ? 'true' : 'false');
+    }
     const ziel = $('karte');
     const vorherY = window.scrollY;
     ziel.hidden = false;