Profilfotos im Chat, rechte Hand zuerst, Karten lesbar

---- SCREEN 9: DIE FOTOS -------------------------------------------

Filipe: "da soll man im chat auch die profilfotos von den leuten sehen
wenn die schon eins drin haben."

ZWEI Luecken, beide an Stellen, wo ein Feld weggeworfen wurde:

1. Die GESPRAECHSLISTE bekam kein Bild. `teilnehmerVon` liest es aus
   der Datenbank, die Detailansicht nimmt es mit -- die Zeile fuer die
   Liste warf es weg. Folge: im offenen Gespraech ein Gesicht, in der
   Liste daneben ein Buchstabe. Vom selben Menschen.

2. Eine FRISCH GESENDETE Nachricht trug kein Bild. Der Verlauf beim
   Laden schon. Folge: Wer gerade zusieht, bekommt einen Buchstaben;
   wer neu laedt, ein Gesicht -- der Unterschied haengt nur daran, wann
   man geschaut hat.

Der Buchstabe bleibt als Unterlage LIEGEN und wird nicht ersetzt: Laedt
das Bild nicht, steht dort weiterhin etwas Sinnvolles statt eines
kaputten Bildsymbols. Vier Stellen, ein Verhalten.

---- SCREEN 3: REIHENFOLGE UND AUSSEHEN ----------------------------

Filipe: "ich will dass hier wie ueberall die reihenfolge immer rechte
hand und dan erst die modis."

Die Abfrage sortierte nach `aktiv DESC, name` -- die ROLLE wurde nicht
einmal mitgelesen. Die Seite konnte gar nicht wissen, wer rechte Hand
ist; sie sortierte alphabetisch, und damit stand Diene vor Funny, weil
D vor F kommt. Jetzt mit ROLLEN_SORTIERUNG -- derselben Regel, die auch
Personenliste, Chat und Rechtetafel benutzen.

"die kiste von rechte hand soll auch noch vieeeeeel krasser und
spezieller aussehen ... der hintergrund von den kacheln soll auch viel
krasser und geiler sein und so dass man texte und so besser erkennt.
weil gerade ist es schwer lesbar."

ZUERST DAS LESEN: Der Grund fuer die schlechte Lesbarkeit war der
durchscheinende Untergrund -- die Karten lagen auf dem Buehnenbild, und
ein Foto wird stellenweise hell. Sie bekommen jetzt eine DECKENDE
Unterlage und erst darueber die Verlaeufe. Die Verlaeufe sieht man
weiterhin, nur nicht mehr das Bild dahinter.

DANN DAS BESONDERE: Die rechte Hand bekommt einen goldenen Ton, eine
deutlich hellere Kante und eine schmale Leiste an der linken Seite --
man sieht den Rang aus zwei Metern, ohne ein Wort zu lesen. KEIN
zweiter Bauplan: dieselbe Karte, dieselben Felder, nur ein Merkmal am
Element. Zwei Karten zu bauen hiesse, jede kuenftige Aenderung zweimal
zu machen.

---- EINE PRUEFUNG, DIE EINE POSITION FESTNAGELTE ------------------

`ok(leute[0]?.id === idMarina, "die Aktiven stehen oben")` wurde rot,
sobald die rechte Hand nach vorn sortierte. Richtig wurde sie dadurch
nicht: Die Aussage "die Aktiven stehen oben" hat mit Marinas Platz
nichts zu tun. Jetzt prueft sie die EIGENSCHAFT (keine Pause vor einer
Aktiven) -- eine Pruefung, die eine Position festnagelt, verbietet jede
Umsortierung, auch die gewollte.

GEPRUEFT: pruef-team-stufen 28/0 (zwei Aussagen mehr),
pruef-erwaehnung 69/0 (zwei mehr: das Bild kommt in der Liste an, und
wer keines hat, bekommt auch keines vorgegaukelt), pruef-css-klassen.

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

workspace/assets/css/module.css

@@ -932,3 +932,93 @@
 @media (forced-colors: active) {
   .ladefehler { border: 1px solid CanvasText; }
 }
+
+/* =====================================================================
+   DIE TEAMKARTEN (20.09.2026)
+
+   Filipe: „die kiste von rechte hand soll auch noch vieeeeeel krasser
+   und spezieller aussehen wie die von den modis. aber auch die von den
+   modis soll viel besser aussehen bitte. der hintergrund von den
+   kacheln soll auch viel krasser und geiler sein und so dass man texte
+   und so besser erkennt. weil gerade ist es schwer lesbar."
+
+   ---------------------------------------------------------------------
+   ZUERST DAS LESEN, DANN DAS AUSSEHEN
+
+   Der Grund für die schlechte Lesbarkeit steht im Bildschirmfoto: Die
+   Karten liegen auf dem Bühnenbild der Seite, und ihr Untergrund war
+   stellenweise durchscheinend. Text auf einem Foto ist immer dann
+   schwer zu lesen, wenn das Foto stellenweise hell wird — und das tut
+   es, weil es ein Foto ist und keine Fläche.
+
+   Deshalb bekommt die Karte zuerst eine DECKENDE Unterlage und erst
+   darüber die Verläufe. Das kostet nichts an Wirkung: Die Verläufe
+   sieht man weiterhin, nur nicht mehr das Bild dahinter.
+
+   Danach erst das Besondere. Eine Karte, die schön aussieht und
+   deren Text man raten muss, ist keine gute Karte.
+   ===================================================================== */
+
+.tperson {
+  /* 1. DIE DECKENDE UNTERLAGE. `--grund-tief` gibt es im Haus nicht,
+        deshalb eine feste, sehr dunkle Fläche -- sie muss decken, nicht
+        zur Stimmung beitragen. */
+  background-color: #070b12;
+  border-radius: var(--radius-klein);
+  /* 2. Eine sichtbare Kante. Ohne sie verschwimmt die Karte am Rand
+        mit dem Bild dahinter, und man sieht nicht, wo sie aufhört. */
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--r) 22%, rgba(255, 255, 255, .06)),
+    0 18px 38px -24px rgba(0, 0, 0, .95);
+}
+
+/* Die Zahlenkästchen bekommen ebenfalls einen eigenen Grund -- auf
+   ihnen steht die kleinste Schrift der Karte. */
+.tperson .tz {
+  background: rgba(255, 255, 255, .04);
+  border-radius: 10px;
+}
+
+/* =====================================================================
+   DIE RECHTE HAND
+
+   WAS SIE UNTERSCHEIDET, IST NICHT „mehr Effekt", sondern RANG. Drei
+   Mittel, alle drei ruhig:
+
+     1. ein goldener Ton statt des Stufen-Tons,
+     2. eine deutlich hellere Kante -- man sieht den Unterschied schon
+        aus zwei Metern, ohne ein Wort zu lesen,
+     3. eine schmale Leiste an der linken Kante, wie ein Lesezeichen.
+
+   KEIN ZWEITER BAUPLAN: Es ist dieselbe Karte mit denselben Feldern.
+   Wer morgen ein Feld ergänzt, ergänzt es einmal.
+   ===================================================================== */
+.tperson[data-rolle="hand"] {
+  --r: #f0c14b;
+  background-color: #0b0a07;
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, #f0c14b 40%, transparent),
+    inset 0 1px 0 rgba(255, 255, 255, .10),
+    0 22px 46px -22px rgba(0, 0, 0, .98),
+    0 0 0 1px rgba(240, 193, 75, .08);
+}
+/* Die Leiste. `::before` und nicht ein weiteres Element: Sie ist
+   Gestaltung, kein Inhalt -- ein Vorleseprogramm soll sie nicht
+   ansagen. */
+.tperson[data-rolle="hand"]::before {
+  content: "";
+  position: absolute; left: 0; top: 14px; bottom: 14px;
+  width: 3px; border-radius: 0 3px 3px 0;
+  background: linear-gradient(180deg,
+    color-mix(in srgb, #f0c14b 85%, transparent),
+    color-mix(in srgb, #f0c14b 25%, transparent));
+}
+/* Der Name darf hier etwas mehr Gewicht haben -- es ist die Karte, die
+   man zuerst ansieht. */
+.tperson[data-rolle="hand"] .tperson__namen { color: #f7e3ac; }
+
+@media (forced-colors: active) {
+  .tperson { border: 1px solid CanvasText; }
+  .tperson[data-rolle="hand"] { border: 3px solid Highlight; }
+  .tperson[data-rolle="hand"]::before { display: none; }
+}