Die Personenkacheln: aus drei Zahlen wird ein Bild

Filipe: "ich will dass das alles viel anders und krasser und geiler gestaltet ist. mal was krass modernes ... viel viel viel uebersichtlicher." WAS AUF SEINEM BILDSCHIRMFOTO STAND: sechs Kacheln, jede mit drei gleich grossen Zahlenkaesten -- und bei fuenf davon exakt dasselbe: "0 angesehen, 68 noch offen, 0 verschieden gesehen". Achtzehn Kaesten fuer eine einzige Auskunft: Hier ist noch nichts passiert. DREI ZAHLEN MUSS MAN LESEN UND VERRECHNEN. Einen Balken sieht man. Und die Frage, die man an diese Liste stellt, ist nicht "wie viele genau", sondern "wer ist wie weit". Darum liegt unter jedem Namen jetzt eine schmale Spur, vier Bildpunkte hoch, die genau das zeigt. 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 sagt, WIE WEIT -- er urteilt nicht. Und er traegt die Akzentfarbe der Seite, nicht Gruen oder Rot. EINE NULL IST KEINE WARNUNG. "Verschieden gesehen" ist die einzige der drei Zahlen, die zu einer Handlung fuehrt: Dort lohnt das Gespraech. Steht dort eine Null -- der Normalfall --, tritt der Kasten zurueck. Gleiche Groesse, gleicher Platz, nur leiser. Sonst waeren es sechs gelbe Nullen, und die eine echte siebte faellt dann nicht mehr auf. NICHTS WURDE WEGGENOMMEN. Alle drei Zahlen stehen weiter da, gemessen: drei Kaesten je Kachel, auf Rechner und Handy. Und ein Vorleseprogramm bekommt den Balken als Satz ("0 von 68 angesehen, 0 Prozent") -- eine Breite allein sagt ihm nichts. Augenschonend nach Hausregel: kein Leuchten, kein blendender Verlauf, und die kurze Bewegung beim Neuzeichnen faellt bei prefers-reduced-motion ganz weg. Gemessen: 16 Messungen auf beiden Groessen, 0 Befunde. pruef-entwicklung-kacheln, pruef-entwicklung (48) und pruef-css-klassen alle in Ordnung. Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-23 23:28:13 +02:00
parent 03220b3924
commit d868bb1e35
41 changed files with 697 additions and 589 deletions
@@ -2332,3 +2332,64 @@
@media (max-width: 380px) {
  .e-person { flex: 1 1 100%; }
 }
+
+
+/* =====================================================================
+   DER FORTSCHRITT EINER PERSON (23.09.2026)
+   =====================================================================
+
+   Filipe: "mal was krass modernes ... viel viel viel uebersichtlicher."
+
+   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.
+
+   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.
+
+   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.
+
+   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; }
+}
+
+/* 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;
+}