Eine Kachel "Unterstuetzen" -- und die Gespraechsliste neu gebaut

=== 1. UNTERSTUETZEN (neue Kachel im Community-Bereich) ===

Filipe: "ich brauch auch noch eine kachel im community bereich. wo mein
paypal und meine amazon liste sein wird. wo die leute alle supporten
koennen auf andere art anstatt nur tiktok. jeder soll diese kachel sehen
aber nur dogfather soll sie veraendern koennen oder vieles mehr sehen."

Neu: unterstuetzen.html + css + js, server/workspace-unterstuetzung.js,
server/unterstuetzung-tabellen.js. Ton 45 (#7567fe) ist gerechnet, das
Kachelzeichen ist ein Herz ueber zwei offenen Haenden.

DIE WEGE STEHEN IN DER DATENBANK, nicht im Quelltext -- ein Recht, das
man nur ueber einen Entwickler ausueben kann, ist keines. DogFather
schreibt Titel, Text, Knopf und Adresse selbst, blendet Wege aus und
nimmt neue dazu.

DER PAYPAL-LINK STEHT LEER UND UNSICHTBAR DA. Filipe schrieb "mein
paypal kennst du ja schon" -- gesucht im ganzen Haus und im Vault,
nirgends gefunden. Eine Zahlungsadresse zu RATEN waere der
gefaehrlichste Fehler dieser Seite: Geld an einen Fremden, und niemand
merkt es. Also steht dort nichts, der Weg ist ausgeblendet, und die
Seite sagt genau EINER Person, dass er fehlt.

DREI ARTEN, UND DIE DRITTE IST DIE WICHTIGSTE: geld, geschenk, frei.
"Kostet nichts" bekommt dieselbe Kartenform und dieselbe Groesse.
Waeren die freien Wege kleiner oder weiter unten, waere die Aussage
"das ist zweite Wahl" -- und die Mehrheit derer, die hier lesen, waere
damit zweite Wahl.

DIE ZAEHLUNG IST ANONYM, UND ZWAR VON DER TABELLE HER. DogFather sieht,
wie oft ein Weg geoeffnet wurde (7/30 Tage/gesamt). Was er NICHT sieht,
ist WER -- weil es in unterstuetzung_striche keine Spalte dafuer gibt.
Geprueft wird das ueber PRAGMA table_info, nicht ueber eine Abfrage:
eine Abfrage liesse sich morgen erweitern, eine fehlende Spalte nicht.

Schreiben haengt an istDogFather, nicht an istLeitung -- die rechte Hand
fuehrt dieses Team mit und kommt trotzdem nicht an diesen Link. Jede
Adresse wird beim SCHREIBEN geprueft (nur https:// oder eine Seite
dieses Hauses); javascript:, data:, http:// und // werden abgewiesen.

Neu: server/pruef-unterstuetzung.mjs -- 70 Pruefungen, alle gruen.
Sie misst ueber die CREW-ADRESSE: Beim ersten Lauf waren vier Rollen
gruen und der Zuschauer rot, und es sah nach einem Rechtefehler aus.
Es war ein Messfehler -- ueber 127.0.0.1 landet man still im
Agenturhaus, und dort gibt es die Rolle "gast" gar nicht.

=== 2. DIE GESPRAECHSLISTE (screen1 + screen2) ===

Filipe: "ich will dass die komplette kachel viel krasser und geiler
aussieht. der hintergrund der kachel soll gleich bleiben."

Der Hintergrund ist unangetastet. Zwei echte Fehler auf seinem Bild:

  - Bei "Das Rudel" stand das "@" rechts oben und die orange "6" eine
    ZEILE TIEFER. Der Knopf ist ein Raster mit DREI Spalten und bekam
    VIER Kinder -- das vierte fiel um. Ausgerechnet die wichtigste
    Auskunft der Liste landete an der unauffaelligsten Stelle.
  - Jedes Gespraech mit Profilbild haengte das Bild ZWEIMAL ein: ein
    Block stand Zeichen fuer Zeichen doppelt da. Zu sehen war nichts,
    gekostet hat es die doppelte Ladelast bei jedem Neuzeichnen.

Und eine tote Regel: `.chat-raum__knopf[data-an="ja"]` beschrieb die
Schiene am offenen Gespraech -- gesetzt wird aber `data-offen` am <li>.
Die Regel griff nie, und daneben stand eine zweite, blassere Fassung
derselben Sache. Jetzt steht alles einmal, und die Schiene ist da.

Dazu: Zeilen als Karten, 44px-Gesichter, ein Zaehler neben "Gespraeche",
Suchfeld als Pille mit Lupe, runder Farbfleck statt Quadrat, und der
leere Raum rechts bekommt eine Mitte statt eines Satzes in der Ecke.

=== 3. VIER FUNDE NEBENBEI ===

  - supportAufraeumen() war exportiert und wurde NIRGENDS gerufen. Die
    Meldungen samt Bildschirmfotos waeren fuer immer liegen geblieben,
    obwohl "90 Tage" dokumentiert ist. Jetzt im Loeschkonzept.
  - aufgaben_zuteilung fehlte ebenfalls im Loeschkonzept (seit 21.09.).
    pruef-aufbewahrung ist damit wieder gruen.
  - pruef-start-ansicht war rot, seit "Aufgaben" am 23.09. die silberne
    Kachel bekam -- die ueberschreibt ihr --ton absichtlich. Die
    Pruefung nimmt sie jetzt aus UND prueft die Ausnahme selbst.
  - pruef-buehne meldete auf entwicklung.html 1,79:1 Kontrast bei "Wen
    gehst du durch?" -- die Ueberschrift lag direkt auf dem Foto. Sie
    steht jetzt auf einer deckenden Flaeche.

OFFEN: pruef-buehne meldet treff-regeln.html mal "0 von 40", mal "3 von
40" -- dieselbe Seite, verschiedene Antworten. Eine Pruefung, die
schwankt, ist schlimmer als eine rote. Nicht in diesem Zug behoben.

Gemessen: pruef-unterstuetzung 70, pruef-start-ansicht, pruef-buehne
(bis auf den Wackler), pruef-workspace-seiten, pruef-aufbewahrung 45,
pruef-rechtetafel 19, pruef-css-klassen, pruef-chatkachel 36,
pruef-chat-ausbau, pruef-entwicklung-kacheln 31 -- gruen.

Neu: server/mess-chat-liste.mjs (zeigt die Liste mit sieben Gespraechen
verschiedener Art, prueft nichts).

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

workspace/assets/css/chat.css

@@ -152,6 +152,29 @@
   font-size: .78rem; color: var(--text-still);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
+
+/* WIE VIELE WARTEN AUF MICH (24.09.2026).
+
+   Die Summe aller ungelesenen Nachrichten, direkt neben der
+   Überschrift. Sie steht nur da, wenn es etwas zu zählen gibt — eine
+   Null wäre jeden Tag im Weg für den einen Tag, an dem sie etwas sagt
+   (das Verstecken macht das Skript).
+
+   DIESELBE FORM WIE DIE ZAHL AN DER ZEILE, absichtlich: Wer sie oben
+   sieht und unten wiederfindet, muss nicht lernen, dass es dasselbe
+   ist. */
+.chat__zaehler {
+  flex: none;
+  min-width: 22px; height: 22px; padding: 0 7px;
+  display: inline-grid; place-items: center;
+  border-radius: 999px;
+  font-size: .72rem; font-weight: 750;
+  font-variant-numeric: tabular-nums;
+  color: #0b0f16;
+  background: linear-gradient(160deg,
+    color-mix(in srgb, var(--akzent) 92%, #ffffff),
+    var(--akzent));
+}
 .chat__kopf .knopf { margin-left: auto; flex: none; }
 
 /* Der Zurück-Pfeil gehört dem Handy. Am Rechner stehen beide Spalten
@@ -173,49 +196,194 @@
 .chat__zurueck svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
 .chat__zurueck:hover { color: var(--text); border-color: var(--rand-hell); }
 
-.chat__suche { padding: 10px 14px 4px; flex: none; }
-.chat__suche input { width: 100%; }
+/* ---- Das Suchfeld ---------------------------------------------------
+
+   Vorher ein nackter Kasten in der Hausform. Er tat, was er sollte,
+   sah aber aus wie ein Eingabefeld in einem Formular — und dies ist
+   kein Formular, sondern eine Suche über einer Liste.
+
+   DIE LUPE STECKT IM HINTERGRUND und nicht als eigenes Element im
+   HTML: Ein Zeichen, das nichts tut und nichts sagt, braucht keinen
+   Platz im Dokument; manche Vorleseprogramme lesen es sonst als
+   „Grafik" mit. Das Feld selbst trägt seinen Namen über aria-label.
+
+   PILLENFORM, weil darunter Zeilen mit 14px-Ecken stehen — ein
+   scharfkantiger Kasten darüber wirkt wie von einer anderen Seite. */
+.chat__suche { padding: 10px 12px 6px; flex: none; }
+.chat__suche input {
+  width: 100%;
+  padding-left: 36px;
+  border-radius: 999px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a5bb' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.2'/%3E%3Cpath d='m15.8 15.8 4 4'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: 12px 50%;
+  background-size: 16px 16px;
+}
 
 .chat__leer {
   margin: 0; padding: 20px 18px;
   font-size: .86rem; color: var(--text-still); line-height: 1.55;
 }
 
-/* ---------- Links: die Gespräche ----------------------------------------- */
+/* ---- Der leere Raum rechts (24.09.2026) -----------------------------
+
+   Vorher stand der Satz oben links in einer Fläche von rund tausend
+   mal siebenhundert Pixeln. Das sah nicht ruhig aus, sondern unfertig
+   — als wäre die Seite nicht zu Ende geladen.
+
+   Der Satz ist Wort für Wort derselbe geblieben: Er sagt, was zu tun
+   ist, und das war nie das Problem. Er steht nur nicht mehr in der
+   Ecke.
+
+   DAS ZEICHEN IST SEHR LEISE: Es soll den Blick auffangen, nicht ihn
+   halten. Wer hierher sieht, will ein Gespräch öffnen — kein Bild
+   ansehen. */
+.chat__leer--mitte {
+  flex: 1; min-height: 0;
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+  gap: 16px; padding: 30px;
+  text-align: center;
+}
+.chat__leer-text { max-width: 30ch; }
+.chat__leer-zeichen {
+  display: grid; place-items: center;
+  width: 82px; height: 82px;
+  border-radius: 50%;
+  border: 1px solid color-mix(in srgb, var(--rand-hell) 55%, transparent);
+  background:
+    radial-gradient(90% 90% at 50% 20%,
+      color-mix(in srgb, var(--akzent) 9%, transparent), transparent 70%),
+    rgba(255, 255, 255, .02);
+}
+.chat__leer-zeichen svg {
+  width: 34px; height: 34px;
+  fill: none; stroke: color-mix(in srgb, var(--akzent) 55%, var(--text-still));
+  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
+}
+
+/* =====================================================================
+   DIE GESPRÄCHSLISTE (neu gebaut am 24.09.2026)
+   =====================================================================
+
+   Filipe, mit zwei Bildschirmfotos: „ich will dass die komplette
+   kachel viel krasser und geiler aussieht. der hintergrund der kachel
+   soll gleich bleiben aber ansonsten soll alles viel krasser schöner
+   und geiler sein, viel moderner. hau richtig rein und mach was
+   spezielles."
+
+   DER HINTERGRUND BLEIBT unangetastet – ausdrücklicher Wunsch, und er
+   ist ohnehin gemessen (siehe der Block weiter oben über die Deckkraft
+   der Fläche). Geändert wird alles, was darauf liegt.
+
+   WAS AUF SEINEM BILD NICHT STIMMTE, und zwar nicht als Geschmack:
+
+     1. Bei „Das Rudel" stand das „@" rechts oben und die orange „6"
+        eine ZEILE TIEFER, links unter dem Zeichen. Das Raster hatte
+        drei Spalten und bekam vier Kinder – das vierte fiel um.
+        Ausgerechnet die wichtigste Auskunft der Liste („hier warten
+        sechs") landete damit an der unauffälligsten Stelle, und die
+        Zeile war höher als alle anderen.
+     2. Die Zeilen hatten keine Kanten. Sieben Gespräche standen als
+        eine einzige graue Fläche da; was gerade offen ist, sah fast
+        aus wie der Rest.
+     3. Alles war gleich laut: Name, Uhrzeit und Vorschau in drei
+        Grautönen, die sich kaum unterscheiden.
+
+   WAS JETZT ANDERS IST
+
+     ZEILEN SIND KARTEN. Jede hat ihre eigene Fläche, die beim
+     Überfahren aufwacht. Das offene Gespräch trägt eine Schiene an der
+     linken Kante – man sieht auch nach dem Scrollen, wo man ist.
+
+     DREI ARTEN, DREI FORMEN. Ein Mensch ist rund, eine Gruppe ist ein
+     abgerundetes Quadrat, ein Kanal trägt die Raute. Auch ohne Farbe
+     auseinanderzuhalten – wer Farben schlecht unterscheidet, sieht die
+     Form.
+
+     UNGELESENES IST DAS LAUTESTE auf der Zeile, und sonst nichts: die
+     Zahl in der Akzentfarbe, der Name kräftiger, die Fläche eine Spur
+     heller. Alles andere tritt zurück.
+
+     AUGENSCHONEND (Hausregel): kein Leuchten, kein Blinken, keine
+     Bewegung außer einem kurzen Farbwechsel beim Überfahren. Ein Chat
+     wird stundenlang angesehen – was einmal auffällt, nervt beim
+     zwanzigsten Mal.
+   ------------------------------------------------------------------- */
 
 .chat__liste {
   flex: 1; min-height: 0;
   overflow-y: auto;
-  margin: 0; padding: 8px; list-style: none;
-  display: grid; gap: 3px; align-content: start;
+  margin: 0; padding: 8px 8px 14px; list-style: none;
+  display: grid; gap: 4px; align-content: start;
+  /* Ein schmaler, ruhiger Balken statt des breiten Systemstreifens —
+     die Liste ist nur rund 300 px breit, da nimmt der Standardbalken
+     ein Zwanzigstel davon weg. */
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--rand-hell) 70%, transparent) transparent;
 }
 
 .chat-raum__knopf {
   --r: var(--akzent);
+  position: relative;
   width: 100%;
-  display: grid; grid-template-columns: auto 1fr auto;
+  /* DREI SPALTEN, UND ES BLEIBEN DREI. Alles, was rechts steht, sitzt
+     in `.chat-raum__rail` — käme morgen eine vierte Marke dazu, bricht
+     das Raster nicht wieder um (siehe Punkt 1 oben). */
+  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center; gap: 11px;
   padding: 10px 11px;
-  border: 1px solid transparent; border-radius: 12px;
+  border: 1px solid transparent;
+  border-radius: 14px;
   background: transparent;
   color: inherit; font: inherit; text-align: left; cursor: pointer;
   transition: background .16s ease, border-color .16s ease;
 }
-.chat-raum__knopf:hover { background: rgba(255, 255, 255, .04); }
+.chat-raum__knopf:hover {
+  background: rgba(255, 255, 255, .045);
+  border-color: color-mix(in srgb, var(--rand-hell) 55%, transparent);
+}
 .chat-raum__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
 
-/* Das offene Gespräch bleibt sichtbar markiert -- sonst weiß man nach
-   dem Scrollen nicht mehr, wo man ist. */
+/* DIE SCHIENE AM OFFENEN GESPRÄCH.
+
+   Hier stand bis zum 24.09.2026 eine zweite, schönere Fassung dieser
+   Regel weiter unten in derselben Datei — mit dem Selektor
+   `.chat-raum__knopf[data-an="ja"]`. Den hat nie etwas gesetzt: Das
+   Skript schreibt `data-offen` an das <li>, nicht `data-an` an den
+   Knopf. Die Regel war also monatelang tote Gestaltung, und das
+   offene Gespräch bekam nur die blassere erste Fassung.
+
+   Jetzt gibt es eine Regel, und sie greift. */
 .chat-raum[data-offen="ja"] .chat-raum__knopf {
-  background: color-mix(in srgb, var(--akzent) 11%, transparent);
-  border-color: color-mix(in srgb, var(--akzent) 32%, transparent);
+  background: linear-gradient(90deg,
+    color-mix(in srgb, var(--akzent) 17%, transparent),
+    color-mix(in srgb, var(--akzent) 5%, transparent) 62%,
+    rgba(255, 255, 255, .03));
+  border-color: color-mix(in srgb, var(--akzent) 34%, transparent);
+}
+.chat-raum[data-offen="ja"] .chat-raum__knopf::before {
+  content: "";
+  position: absolute; left: -1px; top: 10px; bottom: 10px;
+  width: 3px; border-radius: 0 3px 3px 0;
+  background: var(--akzent);
+}
+/* Ungelesenes ist der Grund, warum man hier ist — die Zeile hebt sich
+   eine Spur, aber nur eine. */
+.chat-raum[data-neu="ja"] .chat-raum__knopf {
+  background: rgba(255, 255, 255, .05);
+  border-color: color-mix(in srgb, var(--rand) 80%, transparent);
+}
+.chat-raum[data-neu="ja"][data-offen="ja"] .chat-raum__knopf {
+  border-color: color-mix(in srgb, var(--akzent) 34%, transparent);
 }
 
+/* ---- Das Zeichen: Mensch, Gruppe, Kanal ----------------------------- */
 .chat-raum__zeichen {
   flex: none;
-  width: 38px; height: 38px; border-radius: 50%;
+  width: 44px; height: 44px; border-radius: 50%;
   display: grid; place-items: center;
-  font-size: .82rem; font-weight: 700;
+  font-size: .86rem; font-weight: 700; letter-spacing: .02em;
   color: var(--r);
   background: color-mix(in srgb, var(--r) 13%, transparent);
   border: 1px solid color-mix(in srgb, var(--r) 30%, transparent);
@@ -225,46 +393,69 @@
 .chat-raum__zeichen[data-rolle="manager"] { --r: var(--manager-haupt); }
 .chat-raum__zeichen[data-rolle="scout"]   { --r: var(--scout-haupt); }
 .chat-raum__zeichen[data-rolle="creator"] { --r: var(--creator-haupt); }
-/* Eine Gruppe zeigt ihre Größe statt einer Initiale -- der Name der
-   Gruppe steht ohnehin daneben. */
+/* Eine Gruppe zeigt ihre Größe statt einer Initiale — der Name steht
+   ohnehin daneben. Eckiger als ein Mensch, runder als ein Kanal. */
 .chat-raum__zeichen[data-gruppe="ja"] {
   --r: #a0aec4;
-  border-radius: 12px;
+  border-radius: 14px;
+  font-size: .95rem;
   font-variant-numeric: tabular-nums;
 }
 
+/* ---- Die Mitte ------------------------------------------------------ */
 .chat-raum__mitte { min-width: 0; }
 .chat-raum__oben { display: flex; align-items: baseline; gap: 8px; }
 .chat-raum__name {
   flex: 1; min-width: 0;
-  font-size: .89rem; font-weight: 600; color: var(--text-leise);
+  font-size: .92rem; font-weight: 620; color: var(--text-leise);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 .chat-raum__zeit {
   flex: none;
-  font-size: .75rem; color: var(--text-still);
+  font-size: .73rem; color: var(--text-still);
   font-variant-numeric: tabular-nums;
 }
 .chat-raum__vorschau {
-  display: block; margin-top: 2px;
-  font-size: .78rem; color: var(--text-still);
+  display: block; margin-top: 3px;
+  font-size: .79rem; line-height: 1.35; color: var(--text-still);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
-.chat-raum__vorschau[data-weg="ja"] { font-style: italic; opacity: .8; }
+/* WER GESCHRIEBEN HAT, eine Spur heller als der Satz. Beim Überfliegen
+   einer Gruppe sucht man den Namen, nicht den Text — vorher war beides
+   derselbe Grauton und man musste lesen. */
+.chat-raum__wer {
+  color: color-mix(in srgb, var(--text-leise) 82%, transparent);
+  font-weight: 600;
+}
+.chat-raum__vorschau[data-weg="ja"] { font-style: italic; opacity: .78; }
 
 /* Ungelesen: die Zahl UND ein kräftigerer Name. Nur eine Zahl übersieht
    man beim Überfliegen. */
-.chat-raum[data-neu="ja"] .chat-raum__name { color: var(--text); font-weight: 700; }
+.chat-raum[data-neu="ja"] .chat-raum__name { color: var(--text); font-weight: 720; }
 .chat-raum[data-neu="ja"] .chat-raum__vorschau { color: var(--text-leise); }
+.chat-raum[data-neu="ja"] .chat-raum__zeit { color: var(--text-leise); }
+
+/* ---- Die rechte Spalte ---------------------------------------------- */
+/* Sie steht IMMER da, auch leer — sonst wäre die Mitte bei Zeilen ohne
+   Marke breiter als bei Zeilen mit, und die Namen stünden nicht mehr
+   untereinander. Eine Liste, deren Kanten wandern, wirkt unruhig, ohne
+   dass man sagen kann, warum. */
+.chat-raum__rail {
+  flex: none;
+  display: flex; align-items: center; gap: 6px;
+  min-width: 22px; justify-content: flex-end;
+}
 .chat-raum__zahl {
   flex: none;
-  min-width: 21px; height: 21px; padding: 0 6px;
+  min-width: 22px; height: 22px; padding: 0 7px;
   display: grid; place-items: center;
   border-radius: 999px;
-  font-size: .72rem; font-weight: 700;
+  font-size: .72rem; font-weight: 750;
   font-variant-numeric: tabular-nums;
   color: #0b0f16;
-  background: var(--akzent);
+  background: linear-gradient(160deg,
+    color-mix(in srgb, var(--akzent) 92%, #ffffff),
+    var(--akzent));
 }
 
 /* ---------- Rechts: der Verlauf ------------------------------------------ */
@@ -914,24 +1105,22 @@
 }
 
 /* ---------- Die Gesprächsliste --------------------------------------- */
-.chat-raum__knopf {
-  position: relative;
-  border-radius: 12px;
-  margin: 0 8px 4px;
-  transition: background var(--tempo), box-shadow var(--tempo);
-}
-/* Das offene Gespräch trägt eine Schiene -- man sieht auch beim Scrollen
-   der Liste, wo man gerade ist. */
-.chat-raum__knopf[data-an="ja"] {
-  background: linear-gradient(90deg,
-    color-mix(in srgb, var(--akzent) 16%, transparent),
-    rgba(255, 255, 255, .03) 55%);
-  box-shadow: inset 3px 0 0 var(--akzent);
-}
-/* Ungelesenes ist der Grund, warum man hier ist. */
-.chat-raum__knopf:has(.chat-raum__zahl) {
-  background: rgba(255, 255, 255, .045);
-}
+/* HIER STAND EINE ZWEITE FASSUNG DERSELBEN REGELN (weg am 24.09.2026).
+
+   Sie hat `.chat-raum__knopf` ein zweites Mal beschrieben — Rundung,
+   Rand und Übergang — und dabei die erste Fassung weiter oben still
+   überschrieben. Zwei Beschreibungen derselben Sache in derselben
+   Datei: Wer eine davon ändert, ändert am Ergebnis nichts und sucht
+   danach den Fehler an der falschen Stelle.
+
+   Und die schönere der beiden griff gar nicht: Ihr Selektor hieß
+   `.chat-raum__knopf[data-an="ja"]`, gesetzt wird aber `data-offen`
+   am <li>. Das offene Gespräch trug deshalb monatelang die blasse
+   erste Fassung, während daneben eine Schiene beschrieben stand,
+   die nie jemand gesehen hat.
+
+   Alles steht jetzt EINMAL, weiter oben unter „Die Gesprächsliste
+   (neu gebaut am 24.09.2026)" — samt Schiene, und die greift. */
 
 /* ---------- Die Nachrichten ------------------------------------------ */
 /* HIER STAND DIE ZWEITE FASSUNG DERSELBEN BLASE — sie ist am
@@ -2659,16 +2848,27 @@
    ist — ein Knopf mit der Aufschrift „Kachel" müsste erst geöffnet
    werden, damit man sieht, was gerade gilt.
    ===================================================================== */
+/* RUND STATT ECKIG (24.09.2026).
+
+   Auf Filipes Bildschirmfoto stand hier ein blaues Quadrat mit
+   weichen Ecken — es sah aus wie ein Bauteil, das noch niemand
+   gestaltet hat, und nicht wie „so sehen deine Nachrichten aus".
+
+   Ein Kreis sagt es besser: Es ist die Farbe EINER PERSON, und
+   Personen sind in diesem Haus überall rund (Gesicht in der Liste, im
+   Verlauf, in der Kopfleiste). Der Ring darum ist derselbe wie am
+   Gesicht — man erkennt die Verwandtschaft, ohne sie zu lernen. */
 .chat__kachelknopf {
   flex: 0 0 auto;
   margin-left: auto;
-  width: 30px; height: 30px;
+  width: 32px; height: 32px;
   padding: 3px;
   border: 1px solid var(--rand-hell);
-  border-radius: 9px;
+  border-radius: 50%;
   background: transparent;
   cursor: pointer;
   display: inline-flex; align-items: center; justify-content: center;
+  transition: border-color .16s ease, box-shadow .16s ease;
 }
 /* AM FINGER GROESSER (20.09.2026). Gemeldet von pruef-tippziele:
    30x30 ist mit der Maus bequem und mit dem Daumen zu klein -- die
@@ -2702,11 +2902,14 @@
     content: ""; position: absolute; inset: -8px;
   }
 }
-.chat__kachelknopf:hover { border-color: var(--akzent); }
+.chat__kachelknopf:hover {
+  border-color: var(--akzent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 14%, transparent);
+}
 .chat__kachelknopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
 .chat__kachelknopf-probe {
   display: block; width: 100%; height: 100%;
-  border-radius: 6px;
+  border-radius: 50%;
   /* Eine feine Innenkante, damit ein sehr dunkler Ton nicht aussieht
      wie ein Loch im Knopf. */
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);