Der Anrufkasten zeigt, WER dran ist -- nicht dreimal "Verbunden"

Filipe, zu Screen 1: "wenn ich anrufe soll das auch viel besser geiler
und spezieller aussehen aber es soll nicht raushaengen."

Erst gemessen: Es haengt nichts raus. Der Kasten ist 374 px am Handy,
340 am Rechner, 72 Teile geprueft, kein einziges ueber dem Rand. Die
Optik war also gar nicht der Mangel -- zwei andere Dinge waren es.

1. DER NAME DES ANRUFERS GING IMMER VERLOREN.
   `wer(raumName || "Anruf")` lief VOR `kastenBauen()`. Das Element
   #anruf-wer gab es zu dem Zeitpunkt noch nicht, die Zuweisung lief
   ins Leere, und oben stand bei jedem Anruf das Wort "Anruf". Die
   Reihenfolge ist umgedreht: erst bauen, dann beschriften.

2. IN EINEM ANRUF OHNE VIDEO STAND JE PERSON DAS WORT "Verbunden".
   Bei dreien dreimal dasselbe Wort -- und man sah nicht, WER dabei
   war. In einer Gruppe ist genau das die Frage: Ist Kessi schon
   drin? Jetzt steht dort ein Kreis mit den Anfangsbuchstaben und der
   echte Name; waehrend es klingelt ein wartendes Gesicht mit dem
   Namen dessen, den man anruft. Vorher war die Flaeche in dieser
   Sekunde leer, und ein leerer Kasten mit "Es klingelt ..." sieht
   aus wie einer, der haengt -- ausgerechnet im unsichersten Moment.

Der Name kommt NICHT aus einer Abfrage. Wer anruft, bekannt beim
Start nur sich selbst; alle weiteren kommen ausschliesslich ueber das
Ereignis "dabei", und genau dort fehlte das Einsammeln. Deshalb sah
der ANRUFER unter jedem Kreis "Jemand" -- die Angerufenen nicht.

UND DIE PRUEFUNG WAR ZU NACHSICHTIG. Sie verlangte einen Namen
"laenger als ein Zeichen"; der Rueckfalltext "Jemand" ist sechs
Zeichen lang und kam damit durch. Gruen, waehrend der Hauptfall
kaputt war. Die zweite Fassung verglich gegen eine abgeschriebene
Namensliste -- die nannte "Jonas, Luna, Mara, Pat", angelegt werden
aber "Filipe, Rieke, Kessi, Tili", und der Kommentar daneben
behauptete schon da, sie sei abgeleitet. Jetzt ist sie es wirklich:
Die Namen werden beim Anlegen eingesammelt, und geprueft wird, dass
jeder GENAU DIE BEIDEN ANDEREN sieht -- nicht "irgendeinen echten
Namen", denn der eigene Name im eigenen Kasten waere auch einer.

pruef-anruf: 127 Pruefungen, 0 Fehler.

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

workspace/assets/css/chat.css

@@ -1702,6 +1702,89 @@
 .anruf__bild--ich { max-width: 88px; }
 .anruf__name { font-size: .8rem; color: var(--text-leise); }
 
+/* =====================================================================
+   WER IST DRAN (20.09.2026)
+
+   Filipe: „die soll auch viel besser geiler und spezieller aussehen,
+   aber nicht so raushängen."
+
+   „Nicht raushängen" ist dabei die schärfere der beiden Vorgaben, und
+   sie steht hier zuerst: Der Kasten ist 340 px breit und liegt in der
+   Ecke. Alles darin muss mit dieser Breite auskommen — bei einem
+   Gruppenanruf mit drei Leuten genauso wie bei einem Gespräch zu
+   zweit. Deshalb ein Raster mit `auto-fit`, das misst statt zu
+   rechnen, und ein Name, der umbricht statt zu schieben.
+
+   Vorher stand hier je Person das Wort „Verbunden" — bei dreien
+   dreimal dasselbe Wort, ohne Namen.
+   ===================================================================== */
+.anruf__leute:has(.anruf__gesicht) {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
+  gap: 10px;
+  justify-items: center;
+}
+.anruf__gesicht {
+  display: flex; flex-direction: column; align-items: center; gap: 5px;
+  min-width: 0; max-width: 100%;
+  text-align: center;
+}
+.anruf__kreis {
+  display: grid; place-items: center;
+  width: 46px; height: 46px;
+  border-radius: 50%;
+  border: 1px solid color-mix(in srgb, var(--gut, #79d1a2) 45%, var(--rand));
+  background: color-mix(in srgb, var(--gut, #79d1a2) 14%, #0b1018);
+  color: color-mix(in srgb, var(--gut, #79d1a2) 35%, #ffffff);
+  font-size: .95rem; font-weight: 700;
+  letter-spacing: .02em;
+}
+/* Der Name darf umbrechen und wird notfalls gekürzt -- er ist das
+   Einzige hier, dessen Länge wir nicht kennen. */
+.anruf__gesicht .anruf__name {
+  max-width: 100%;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font-weight: 600; color: var(--text);
+}
+.anruf__stand { font-size: .72rem; color: var(--text-still); }
+
+/* ---- Es klingelt noch -------------------------------------------------
+   EIN RUHIGER PULS, kein Blinken. Augenschonend ist hier keine
+   Geschmacksfrage: Der Kasten steht am Bildrand und läuft, solange das
+   Gespräch läuft. Ein Blinken dort wäre nach zwei Minuten
+   unerträglich. Deshalb ein weicher Ring, der nach außen ausläuft --
+   dieselbe Bewegung wie beim Punkt in der Kopfzeile. */
+.anruf__gesicht[data-lage="wartet"] .anruf__kreis {
+  border-color: color-mix(in srgb, var(--akzent) 45%, var(--rand));
+  background: color-mix(in srgb, var(--akzent) 12%, #0b1018);
+  color: color-mix(in srgb, var(--akzent) 30%, #ffffff);
+  position: relative;
+}
+.anruf__gesicht[data-lage="wartet"] .anruf__kreis::after {
+  content: "";
+  position: absolute; inset: -5px;
+  border-radius: 50%;
+  border: 1px solid color-mix(in srgb, var(--akzent) 40%, transparent);
+  animation: anruf-ring 2.4s ease-out infinite;
+}
+@keyframes anruf-ring {
+  0%   { transform: scale(.88); opacity: .75; }
+  70%  { transform: scale(1.18); opacity: 0; }
+  100% { transform: scale(1.18); opacity: 0; }
+}
+/* Während es klingelt ist das Gesicht größer -- es ist in diesem
+   Moment das Einzige, worauf man schaut. */
+.anruf__gesicht[data-lage="wartet"] .anruf__kreis { width: 58px; height: 58px; font-size: 1.1rem; }
+
+@media (prefers-reduced-motion: reduce) {
+  .anruf__gesicht[data-lage="wartet"] .anruf__kreis::after { animation: none; opacity: .5; }
+}
+@media (forced-colors: active) {
+  .anruf__kreis { border: 2px solid CanvasText; }
+  .anruf__gesicht[data-lage="wartet"] .anruf__kreis { border-color: Highlight; }
+  .anruf__gesicht[data-lage="wartet"] .anruf__kreis::after { display: none; }
+}
+
 .anruf__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
 .anruf__knopf {
   min-height: 40px;