Drei Fächer, Gesichter, Zeichen an jedem Handgriff -- der Chat ist nicht wiederzuerkennen

Filipe: "ich will 3 kategorien haben. chats mit einzelnen personen,
gruppen chats und kanäle." Und: "ich will dass du überhaupt die
komplette kachel veränderst, ich will dass alles anderst aussieht und
gestaltet ist, mach wirklich was verrücktes und übertrieben krank
geiles ... dass die ganze community und team morgen total überrascht
sind und den chat nicht wieder erkennen."

DIE LISTE HAT DREI FÄCHER. Personen, Gruppen, Kanäle -- als Mulde mit
drei Schaltern über dem Suchfeld, nicht als drei freie Knöpfe: Drei
Dinge, die einander ausschließen, liest man nur als EINE Entscheidung,
wenn sie in einer gemeinsamen Fassung sitzen. Das gewählte Fach liegt
oben auf (Licht, Schatten, Akzentsaum), die anderen liegen darin -- man
sieht die Wahl an der Tiefe, nicht nur an der Farbe. Die Wahl überlebt
das Neuladen; beim Suchen gilt sie nicht, wer einen Namen tippt will
ihn finden und nicht raten, in welchem Fach er liegt.

WAS EIN GESCHLOSSENES FACH NICHT VERSCHLUCKEN DARF: die Ungelesenen und
den Ruf. Beides steht deshalb AM Fach -- die Zahl in der Warnfarbe, das
@ in der Akzentfarbe. Gefunden hat die Lücke nicht ein Blick, sondern
pruef-erwaehnung: Die Erwähnung lag in einer Gruppe, offen war
"Personen", und das @ war damit nirgends zu sehen.

EIN LEERES FACH MERKT MAN SICH NICHT. Wer nur einen Kanal hat -- jeder
Neue im Haus -- landete auf "Personen" und sah eine leere Liste neben
einem vollen Kanal. Beim ersten Zeichnen wird deshalb ins erste Fach
gewechselt, in dem etwas steht; Reihenfolge: gerufen, dann ungelesen,
dann überhaupt vorhanden. Gespeichert wird das NICHT -- es ist geraten,
nicht gewählt. Gefunden von pruef-gifs.

EIN GESICHT IM KOPF DES GESPRÄCHS. Links in der Liste trägt jedes
Gespräch sein Zeichen, und ausgerechnet beim Öffnen verschwand es. Es
ist dasselbe Zeichen, nicht ein ähnliches: `zeichenFuellen()` füllt jetzt
Liste und Kopf -- rund fünfzig Zeilen standen vorher mitten im Zeichnen
und hätten sonst ein zweites Mal dagestanden. Am Handy bleibt es weg,
nachgerechnet: mit ihm blieben dem Namen 126 px bei 128 Untergrenze, die
Knopfreihe fiele eine Zeile tiefer.

JEDER HANDGRIFF BEKOMMT SEIN ZEICHEN. Unter jeder Blase standen fünf
Wörter in Versalien -- bei zwölf Nachrichten sechzig. Jetzt Pfeil,
Gesicht, Papierkorb, Nadel und zwei Blätter, das Wort klein daneben.
Die Wörter bleiben: "anheften" und "lösen" sehen als Nadel gleich aus,
und "löschen (Notfall)" darf nie ein Rätsel sein. Breiter wird es
trotzdem nicht -- gesperrte Versalien kosten rund ein Viertel mehr
Breite, genau das, was die Zeichen brauchen. Die Zeichen sind Masken:
sie folgen `currentColor` und damit jedem Zustand der Schrift daneben.

AUS DER FUSSZEILE WIRD EINE MULDE, und der Grund wird dabei dunkler,
nie heller -- das ist die Bedingung dafür, dass die Kontrastzusage
gültig bleibt. Die Uhrzeit bekommt ein eigenes Schild: eine Angabe,
keine Bedienung.

AUS DEM FARBFLECK WIRD EIN RING. Der Knopf für die eigene Kachel war
ein voller Kreis in der gewählten Farbe, direkt neben einer gleich
großen Marke -- man las ihn als Meldung, und er meldet nichts. Farbe
erscheint auf dieser Seite überall als Kontur; jetzt auch hier.

AUS DEM TOTEN TRENNER WIRD LICHT. Die senkrechte Linie am Verlauf
stammte aus der Zeit, als Liste und Verlauf EIN Kasten waren; seit dem
Umbau auf zwei Tafeln klebte sie ohne Aufgabe an der Kante. An ihrer
Stelle ein sehr weicher Schein oben rechts, unter vier Prozent Deckung
-- Tiefe, kein Leuchten.

DIE KONSOLE: Das Schreibfeld ist eine Rinne statt eines flachen
Kastens, die vier Werkzeuge sprechen dieselbe Sprache, und der
Absendeknopf ist als einziger gefüllt. Keine Maßzahl angefasst -- die
Zeile ist seit dem 23.09. auf den Pixel voll.

ZWEI PRÜFUNGEN WURDEN GENAUER, NICHT NACHSICHTIGER:

  pruef-chatkachel suchte ihre "freie Stelle" nicht, sie rechnete sie
  aus -- 6 px vom rechten Rand, halbe Höhe. Das lag mal auf dem
  Rollbalken, mal auf einer Blase, und meldete beides Mal "das
  Bühnenbild ist gar nicht da". Sie sucht die Stelle jetzt mit
  `elementFromPoint` und sagt es, wenn es keine gibt.

  pruef-erwaehnung prüft jetzt beides: dass das Fach den Ruf meldet,
  ohne geöffnet zu werden, UND dass die Zeile nach dem Wechsel dasteht
  -- mit der Gegenprobe, dass das Fach wirklich filtert. 126 -> 129.

Nachgebessert: die Ungelesen-Marke am Fach stand auf 0,64 rem = 10,24 px,
unter der Hausgrenze von 11,5. Gemeldet von pruef-css-klassen, bevor es
jemand auf einem Telefon sehen musste -- der zweite Anlauf desselben
Reflexes an einem Tag.

Geprüft: pruef-chat-optik, pruef-chatkachel (40), pruef-chat (ALLES IN
ORDNUNG), pruef-chat-neu (32), pruef-chat-ausbau (64),
pruef-chat-kanaele (81), pruef-chat-aufloesen (126),
pruef-chat-anhaenge (109), pruef-erwaehnung (129), pruef-css-klassen,
pruef-tippziele (11), pruef-lesbarkeit. pruef-gifs hat weiterhin die
zwei Fehler, die schon vor diesem Umbau da waren (an HEAD nachgemessen).

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

workspace/assets/css/chat.css

@@ -53,14 +53,42 @@
   overflow: hidden;
 }
 
+/* =====================================================================
+   AUS EINEM KASTEN WERDEN ZWEI TAFELN (25.09.2026)
+   =====================================================================
+
+   Filipe: „ich will wirklich dass du das ingesamte veränderst und so
+   krass geil machst dass die ganze community und team morgen total
+   überrascht sind und den chat nicht wieder erkennen."
+
+   WAS VORHER DA WAR: ein Rechteck mit einer Linie in der Mitte. Beide
+   Haelften teilten sich einen Rahmen, einen Grund, eine Ebene -- die
+   Seite war eine Tabelle mit zwei Spalten.
+
+   WAS JETZT DA IST: zwei getrennte Tafeln, die ueber der Buehne
+   schweben, mit einer Fuge dazwischen. Links das Verzeichnis, rechts
+   das Gespraech -- zwei Dinge, die man auch als zwei sieht. Das ist
+   der eine Griff, der die Seite am staerksten veraendert, und er
+   kostet keine einzige Zeile im Skript.
+
+   WARUM DAS MEHR IST ALS EIN ABSTAND: Zwischen den Tafeln scheint die
+   Buehne durch. Damit bekommt die Seite eine Tiefe, die ein einzelner
+   Kasten nie haben kann -- man sieht, dass etwas DAHINTER ist, und
+   dass die Tafeln DARUEBER liegen.
+
+   DIE FUGE IST 14 px UND NICHT MEHR: Breiter, und die beiden Haelften
+   verlieren den Zusammenhang; sie gehoeren ja zusammen. 14 px sind
+   genug, um zwei Koerper zu sehen, und wenig genug, um sie als Paar
+   zu lesen.
+   ===================================================================== */
 .chat {
   flex: 1;
   min-height: 0;                 /* sonst wächst das Raster über die Fläche */
   display: grid;
-  grid-template-columns: minmax(240px, 320px) 1fr;
-  gap: 0;
-  border: 1px solid var(--rand);
-  border-radius: var(--radius);
+  grid-template-columns: minmax(250px, 340px) 1fr;
+  gap: 14px;
+  border: 0;
+  border-radius: 0;
   /* ==== DAS BUEHNENBILD SCHEINT DURCH (20.09.2026) ==================
 
      Filipe: „ich will auch ein krasses hintergrundbild fuer den treff
@@ -123,42 +151,95 @@
          still falsch machen. Deshalb bekommt die Blase Tiefe ueber
          Kante und Schatten, nicht ueber den Untergrund.
      =================================================================== */
+  /* Der Grund liegt jetzt an den Tafeln, nicht am Raster. */
+  background: none;
+  box-shadow: none;
+  overflow: visible;
+}
+
+/* ---- DIE TAFEL: der Koerper, aus dem beide Haelften bestehen -------
+   Eine Regel fuer beide statt zweier fast gleicher: Die Fase oben
+   links ist dieselbe wie an jeder Kachel im Haus, der Rest ist das
+   Licht-und-Tiefe-System dieser Seite. */
+.chat__spalte {
+  position: relative;
+  border: 1px solid rgba(255, 255, 255, .07);
+  border-radius: 0;
+  clip-path: polygon(var(--fase, 18px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase, 18px));
+  background:
+    radial-gradient(140% 100% at 0% 0%, rgba(255, 255, 255, .045), transparent 52%),
+    linear-gradient(168deg, rgba(17, 24, 36, .86) 0%, rgba(8, 12, 19, .9) 100%);
+  backdrop-filter: blur(22px) saturate(118%);
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, .085),
-    inset 0 -1px 0 rgba(0, 0, 0, .5),
-    0 34px 70px -34px rgba(0, 0, 0, .95),
-    0 6px 18px -10px rgba(0, 0, 0, .7);
+    inset 0 1px 0 rgba(255, 255, 255, .09),
+    inset 0 -1px 0 rgba(0, 0, 0, .55),
+    0 40px 80px -40px rgba(0, 0, 0, .96),
+    0 8px 22px -14px rgba(0, 0, 0, .8);
+  overflow: hidden;
 }
 
 /* Die Fuge zwischen den Spalten ist keine Linie, sondern eine Kante:
    links dunkel, rechts hell -- so, wie zwei Bleche aneinanderstossen.
    Eine Linie haette gesagt "hier ist eine Grenze"; die Kante sagt
    "hier liegt eine Platte auf einer anderen". */
-.chat__spalte--liste {
-  position: relative;
-  background: linear-gradient(180deg,
-    rgba(255, 255, 255, .022) 0%, rgba(255, 255, 255, 0) 30%);
-}
+/* DIE FUGE VON GESTERN IST WEG (25.09.2026). Sie zeichnete eine
+   Kante zwischen zwei Haelften EINES Kastens. Seit es zwei Tafeln
+   gibt, liegt dort echter Abstand -- eine gemalte Kante daneben waere
+   eine Linie zu viel. Die Leuchtschiene links an der Liste bleibt
+   dagegen: Sie gehoert zur Tafel, nicht zur Fuge. */
 .chat__spalte--liste::after {
-  content: ""; position: absolute; top: 0; bottom: 0; right: -1px; width: 2px;
+  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
   background: linear-gradient(180deg,
-    color-mix(in srgb, var(--akzent) 26%, transparent) 0%,
-    rgba(255, 255, 255, .05) 22%,
-    rgba(0, 0, 0, .35) 100%);
-  pointer-events: none;
+    color-mix(in srgb, var(--akzent) 55%, #ffffff) 0%,
+    color-mix(in srgb, var(--akzent) 75%, transparent) 30%,
+    transparent 100%);
+  box-shadow: 0 0 14px -2px color-mix(in srgb, var(--akzent) 55%, transparent);
+  pointer-events: none; z-index: 3;
 }
 
 .chat__spalte {
   display: flex; flex-direction: column;
   min-height: 0; min-width: 0;
 }
-/* Der Trenner zwischen Liste und Verlauf. Läuft oben und unten aus --
-   eine durchgehende Linie zerschneidet die Kachel in zwei. */
+/* =====================================================================
+   AUS DEM TRENNER WIRD LICHT (25.09.2026)
+
+   Hier stand eine senkrechte Linie am linken Rand des Verlaufs – der
+   Trenner zwischen Liste und Verlauf, aus der Zeit, als beide noch
+   EIN Kasten waren. Seit dem Umbau auf zwei Tafeln liegt dort echter
+   Abstand; die Linie klebte seitdem ohne Aufgabe an der Kante der
+   rechten Tafel. Eine Linie, die nichts mehr trennt, ist eine Linie
+   zu viel.
+
+   An ihrer Stelle liegt jetzt ein sehr weicher Schein in der
+   Akzentfarbe, oben rechts – so, als stünde das Licht der Bühne
+   hinter der Tafel, und unten links ein Hauch Gegenlicht. Erst damit
+   sieht die große leere Fläche rechts nach einem Raum aus statt nach
+   einem leeren Kasten.
+
+   SCHWACH, UND ZWAR ABSICHTLICH: 13 % Akzent in einem Verlauf, der
+   nach 62 % ausläuft – am hellsten Punkt keine vier Prozent Deckung.
+   Er soll Tiefe machen, nicht leuchten. Ein Chat wird stundenlang
+   angesehen; was beim ersten Mal auffällt, nervt beim zwanzigsten
+   (Hausregel: augenschonend).
+
+   `z-index: -1` UND NICHT 0: `.chat__spalte` hat `backdrop-filter`
+   und bildet damit einen eigenen Stapelzusammenhang. Ein negativer
+   Wert legt den Schein darin über den Grund der Tafel, aber unter
+   alles, was darin steht. Mit `0` läge er über den Nachrichten – ein
+   Schleier über der Schrift, und genau das wäre der Fehler, den diese
+   Datei an anderer Stelle schon zweimal notiert hat.
+   ===================================================================== */
 .chat__spalte--verlauf { position: relative; }
 .chat__spalte--verlauf::before {
-  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px;
-  background: linear-gradient(180deg,
-    transparent, var(--rand-hell) 15%, var(--rand-hell) 85%, transparent);
+  content: ""; position: absolute; inset: 0;
+  background:
+    radial-gradient(72% 56% at 88% 0%,
+      color-mix(in srgb, var(--akzent) 13%, transparent), transparent 62%),
+    radial-gradient(60% 46% at 6% 100%,
+      rgba(255, 255, 255, .032), transparent 58%);
+  pointer-events: none;
+  z-index: -1;
 }
 
 .chat__kopf {
@@ -211,6 +292,33 @@
    Rest. Wird er unterschritten, wandert die Knopfreihe eine Zeile
    tiefer -- das ist der Umbruch oben. */
 .chat__kopf-text { min-width: 0; flex: 1 1 8rem; }
+
+/* ---- Das Gesicht im Kopf des Gesprächs (25.09.2026) -----------------
+
+   Es trägt die Klasse `.chat-raum__zeichen` und bekommt damit Farbe,
+   Licht, Saum und Profilbild der Liste geschenkt. Hier steht nur, was
+   am Kopf anders ist: eine Spur kleiner, damit es die Überschrift
+   nicht überragt.
+
+   `[hidden]` MUSS hier stehen. `.chat-raum__zeichen` setzt
+   `display: grid`, und eine Klassenregel schlägt das eingebaute
+   `display: none` des Browsers – ohne diese Zeile stünde ein leerer
+   Kreis da, solange kein Gespräch offen ist. Genau diese Falle hat
+   dieses Haus bei `hidden` schon einmal erwischt.
+
+   AM HANDY BLEIBT ES WEG (siehe die schmale Fassung am Dateiende).
+   Nachgerechnet bei 390 px: Zurück-Pfeil 44 + Zeichen 40 + drei
+   Knöpfe 132 + vier Abstände 48 = 264. Für den Namen blieben 126 px,
+   seine Untergrenze sind 128 (`flex: 1 1 8rem`) – die Knopfreihe
+   fiele also eine Zeile tiefer, und der Kopf würde 44 px höher.
+   Dafür ist es zu wenig wert: Am Handy kommt man aus der Liste, in
+   der man das Gesicht gerade angetippt hat. */
+.chat__kopf-zeichen {
+  width: 40px; height: 40px;
+  font-size: .82rem;
+}
+.chat__kopf-zeichen[hidden] { display: none; }
+
 /* DER TITEL WAR SO GROSS WIE DIE VORSCHAUZEILE DARUNTER (25.09.2026).
 
    Im Bildschirmfoto stand „VanVan" in derselben Staerke wie „Du:
@@ -296,7 +404,146 @@
 
    PILLENFORM, weil darunter Zeilen mit 14px-Ecken stehen — ein
    scharfkantiger Kasten darüber wirkt wie von einer anderen Seite. */
-.chat__suche { padding: 12px 12px 8px; flex: none; }
+/* =====================================================================
+   DIE DREI FAECHER (25.09.2026)
+
+   Filipe: „ich will 3 kategorien haben. chats mit einzelnen personen,
+   gruppen chats und kanäle."
+
+   EINE MULDE MIT DREI SCHALTERN, nicht drei freie Knoepfe: Drei Dinge
+   nebeneinander, die einander ausschliessen, liest man nur dann als
+   EINE Entscheidung, wenn sie in einer gemeinsamen Fassung sitzen.
+   Sonst sind es drei Sachen.
+
+   DAS GEWAEHLTE FACH LIEGT OBEN AUF -- heller Grund, Lichtkante,
+   Schatten darunter. Die anderen liegen IN der Mulde. Man sieht die
+   Wahl also an der Tiefe und nicht nur an der Farbe; das trennt auch
+   dann, wenn jemand Farben schlecht unterscheidet.
+
+   DIE ZAHL DER UNGELESENEN STEHT AM FACH und nicht nur an der Zeile:
+   Ein geschlossenes Fach waere sonst ein Ort, an dem Nachrichten
+   liegen bleiben, ohne dass es jemand sieht.
+   ===================================================================== */
+.chat-arten {
+  display: grid; grid-template-columns: repeat(3, 1fr);
+  gap: 3px;
+  margin: 12px 12px 0;
+  padding: 3px;
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, .06);
+  background: linear-gradient(180deg, rgba(0, 0, 0, .4) 0%, rgba(255, 255, 255, .02) 100%);
+  box-shadow:
+    inset 0 2px 5px -2px rgba(0, 0, 0, .75),
+    0 1px 0 rgba(255, 255, 255, .05);
+}
+.chat-art {
+  position: relative;
+  display: flex; align-items: center; justify-content: center; gap: 6px;
+  min-height: 38px; padding: 6px 4px;
+  border: 1px solid transparent; border-radius: 11px;
+  background: none;
+  font: inherit; font-size: .78rem; font-weight: 650;
+  letter-spacing: .01em;
+  color: var(--text-still); cursor: pointer;
+  transition: color .16s ease, background-color .16s ease,
+              border-color .16s ease, box-shadow .16s ease;
+}
+.chat-art:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
+.chat-art:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
+.chat-art[aria-selected="true"] {
+  color: #f2f7fd;
+  border-color: rgba(255, 255, 255, .1);
+  background: linear-gradient(180deg,
+    rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .035) 100%);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .16),
+    0 6px 14px -10px rgba(0, 0, 0, .95);
+}
+/* Der Saum in der Akzentfarbe sagt, welches Fach offen ist -- er
+   sitzt UNTEN am Schalter, wie ein Reiter an einer Mappe. */
+.chat-art[aria-selected="true"]::after {
+  content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2px;
+  border-radius: 2px 2px 0 0;
+  background: var(--akzent);
+  box-shadow: 0 0 10px -1px color-mix(in srgb, var(--akzent) 75%, transparent);
+}
+.chat-art__name { white-space: nowrap; }
+.chat-art__zahl {
+  font-size: .72rem; font-weight: 700; opacity: .6;
+  font-variant-numeric: tabular-nums;
+}
+.chat-art[aria-selected="true"] .chat-art__zahl { opacity: .85; }
+/* DAS @ AM FACH (25.09.2026).
+
+   Es sagt „hier ging es an dich" -- dieselbe Auskunft wie das @ an
+   der Zeile, nur eine Ebene hoeher, damit ein geschlossenes Fach sie
+   nicht verschluckt.
+
+   ES IST KEINE MARKE MIT FLAECHE. Neben der Ungelesen-Marke stuenden
+   sonst zwei gleich laute Punkte nebeneinander, und man muesste
+   lesen, um sie zu unterscheiden. So bleibt ein Zeichen in der
+   Akzentfarbe -- gleiche Bedeutung, andere Gestalt.
+
+   `text-shadow` STATT `box-shadow`: Der Schein soll am Buchstaben
+   haengen, nicht an einem Kasten darum. */
+.chat-art__at {
+  flex: none;
+  font-size: .82rem; font-weight: 800; line-height: 1;
+  color: color-mix(in srgb, var(--akzent) 45%, #ffffff);
+  text-shadow: 0 0 9px color-mix(in srgb, var(--akzent) 70%, transparent);
+}
+/* Die Ungelesenen: klein, in der Warnfarbe, oben rechts am Schalter --
+   dort, wo man sie von jedem Programm her sucht. */
+/* ENTWEDER ODER, NICHT BEIDES (25.09.2026). Im ersten Anlauf stand
+   die Ungelesen-Marke absolut oben rechts -- und lag damit genau auf
+   der Gesamtzahl. Zwei Zahlen uebereinander sind schlimmer als eine
+   zu wenig.
+
+   Was wartet, ist wichtiger als was da ist: Gibt es Ungelesene, tritt
+   die Gesamtzahl zurueck. `:has()` entscheidet das im Stilblatt, damit
+   beide Zahlen im Baum bleiben -- eine Vorlesehilfe liest so weiter
+   "Personen, 3 Gespräche, 2 ungelesene Nachrichten". */
+.chat-art:has(.chat-art__neu) .chat-art__zahl { display: none; }
+/* 0,72 rem UND NICHT 0,64 (nachgebessert 25.09.2026).
+
+   pruef-css-klassen hat es gemeldet: „43 Stellen unter 11,5 px – das
+   ist 1 MEHR als die Grundlinie 42." Die eine neue war genau diese
+   Marke: 0,64 rem sind 10,24 px. Die Hausgrenze liegt bei 11,5, weil
+   Schrift darunter auf einem Telefon zu flimmern anfängt – und eine
+   Zahl, die man nicht lesen kann, ist keine Auskunft.
+
+   DAS IST DER ZWEITE ANLAUF AM SELBEN TAG. Heute früh stand die
+   Fußzeile der Nachricht auf 0,66 rem und dieselbe Prüfung hat sie
+   zurückgeholt. Zweimal derselbe Reflex: „klein wirkt leise". Leise
+   macht in diesem Haus die Deckung und die Farbe, nicht die Größe.
+
+   DIE MARKE WÄCHST MIT: 18 px Höhe sind für 11,5-px-Schrift zu
+   knapp – bei „99+" stieße die Schrift oben und unten an. 20 px
+   lassen 4 px Luft, und die Marke bleibt kleiner als die 22 px des
+   Zählers an der Zeile (sie ist die kleinere Auskunft von beiden). */
+.chat-art__neu {
+  flex: none;
+  min-width: 20px; height: 20px; padding: 0 5px;
+  display: grid; place-items: center;
+  border-radius: 999px;
+  font-size: .72rem; font-weight: 750; line-height: 1;
+  font-variant-numeric: tabular-nums;
+  color: #16060a;
+  background: linear-gradient(160deg,
+    color-mix(in srgb, var(--warn) 88%, #ffffff), var(--warn));
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, .5),
+    0 3px 8px -3px color-mix(in srgb, var(--warn) 70%, transparent);
+}
+@media (max-width: 560px) {
+  .chat-art { font-size: .74rem; }
+  /* Die GESAMTZAHL faellt weg, nicht die Ungelesenen und nicht das @.
+     Wie viele Gespraeche es gibt, sieht man in der Liste darunter;
+     was darin auf einen wartet, nicht. */
+  .chat-art__zahl { display: none; }
+}
+
+.chat__suche { padding: 10px 12px 8px; flex: none; }
 /* EINGELASSEN STATT AUFGELEGT. Ein Eingabefeld ist eine Vertiefung --
    Licht faellt hinein, nicht darauf. Deshalb hier der Schatten INNEN
    und oben, genau andersherum als bei allem, was obenauf liegt. Das
@@ -1140,18 +1387,47 @@
 .chat-nachricht__fuss {
   display: flex; align-items: center; flex-wrap: wrap;
   column-gap: 4px; row-gap: 2px;
-  margin-top: 9px; padding-top: 7px;
-  border-top: 1px solid color-mix(in srgb,
-    var(--ton, var(--kachel-standard)) 18%, rgba(255, 255, 255, .06));
+  /* AUS DER KANTE WIRD EINE MULDE (25.09.2026). Eine Linie trennt;
+     eine Mulde sagt zusätzlich, dass die Handgriffe eine Ebene TIEFER
+     liegen als das Gesagte – sie gehören zur Nachricht, sind aber
+     nicht die Nachricht. Es ist dieselbe Form wie an der
+     Registerleiste links: eingesenkt = zur Auswahl, aufliegend =
+     gewählt. Eine Seite, eine Sprache.
+
+     DER GRUND WIRD DUNKLER, NIE HELLER. Das ist kein Geschmack,
+     sondern die Bedingung dafür, dass die Messung gültig bleibt:
+     pruef-chatkachel rechnet die leise Schrift gegen den HELLSTEN
+     denkbaren Grund (Blase zu 92 % über weißem Foto). 26 % Schwarz
+     darüber kann diesen Wert nur verbessern. Wer hier je etwas
+     Helles einsetzt, hebt die Zusage auf und muss neu messen.
+
+     DIE NEGATIVEN RÄNDER holen die Mulde in die Polsterung der Blase
+     hinein (12/17/9 px), damit sie nicht wie ein zweiter Kasten
+     wirkt, sondern wie eine Vertiefung IN der Blase. */
+  margin: 10px -9px -3px; padding: 6px 8px;
+  border-radius: 14px;
+  border-top: 0;
+  background: rgba(0, 0, 0, .26);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .045),
+    inset 0 0 0 1px color-mix(in srgb,
+      var(--ton, var(--kachel-standard)) 12%, transparent);
   /* 0,72 rem = 11,52 px -- KNAPP UEBER DER HAUSGRENZE (25.09.2026).
      Der erste Anlauf stand auf 0,66 rem (10,56 px). pruef-css-klassen
      hat es gemeldet: "45 Stellen unter 11,5 px -- das sind 3 MEHR als
      die Grundlinie 42." Die Grenze ist kein Geschmack; darunter faengt
      Schrift an, auf einem Telefon zu flimmern.
 
-     Die Zeile wirkt trotzdem leise -- das machen Versalien, Sperrung
-     und die gedaempfte Deckung, nicht die Groesse. */
-  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
+     Die Zeile wirkt trotzdem leise – das machen die Mulde, die
+     gedämpfte Deckung und die Zeichen davor, nicht die Größe.
+
+     KEINE VERSALIEN MEHR (25.09.2026). Sie waren richtig, solange
+     dort fünf nackte Wörter standen und sich als Beschriftung von
+     einem Satz abheben mussten. Seit jedes Wort ein Zeichen vor sich
+     hat, macht das Zeichen diese Arbeit – und gesperrte Versalien
+     kosten rund ein Viertel mehr Breite, also genau den Platz, den
+     die Zeichen brauchen. */
+  font-size: .72rem; letter-spacing: .01em;
   opacity: .78;
   transition: opacity .18s ease;
   /* War var(--text-leise) (#94a5bb). Diese eine Farbe war die Bremse
@@ -1166,10 +1442,17 @@
   .chat-nachricht__fuss { transition: none; }
 }
 
+/* DIE ZEIT WIRD EIN SCHILD. In einer Reihe mit fünf Knöpfen war sie
+   der einzige Text ohne Fläche – und sah dadurch aus wie ein
+   vergessener Knopf. Jetzt trägt sie ein eigenes kleines Feld: eine
+   Angabe, keine Bedienung. */
 .chat-nachricht__zeit {
   font-size: .72rem; color: inherit;
   font-variant-numeric: tabular-nums;
-  letter-spacing: .07em;
+  letter-spacing: .02em;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, .05);
   /* Die Zeit bleibt links, die Handgriffe ruecken nach rechts: Das
      eine ist eine Angabe, das andere sind Knoepfe. Zusammen in einer
      Reihe sahen sie aus wie sechs gleichwertige Dinge. */
@@ -1244,13 +1527,31 @@
 .chat-nachricht__weg-knopf[data-notfall="ja"] {
   display: inline-flex; align-items: center; gap: 5px;
 }
+/* AUS DEM PUNKT WIRD EIN PAPIERKORB (25.09.2026) -- die Überlegung
+   darüber gilt unverändert, nur trägt jetzt ein Zeichen die Warnfarbe
+   statt eines Flecks. Es ist dasselbe Zeichen wie am gewöhnlichen
+   Löschen daneben, nur rot: Man sieht auf einen Blick, dass es
+   dieselbe Handlung ist und dass sie hier anders wiegt.
+
+   DIE ALTE RECHNUNG IST ÜBERHOLT. Darüber steht „auf Babyblau
+   1,91:1" – das galt, als die Blase die Kachelfarbe trug. Seit dem
+   25.09.2026 ist sie für alle dunkles Glas (`--blasengrund`,
+   #0b1019); Lachs darauf liegt weit über den 3:1, die für ein
+   Zeichen gelten. Die Schrift daneben bleibt trotzdem `--blase-leise`
+   und wird nicht eingefärbt – der Grund dafür war nie der Kontrast
+   allein, sondern dass eine Schriftfarbe auf zwölf wählbaren Tönen
+   nicht zu garantieren ist.
+
+   `mask-size` MUSS MIT: Die gemeinsame Regel oben setzt 13 px über
+   die Kurzschreibweise `mask`. Wer hier nur Breite und Höhe ändert,
+   bekommt ein 13-px-Bild in einem 14-px-Kasten – oben links klebend,
+   nicht mittig. */
 .chat-nachricht__weg-knopf[data-notfall="ja"]::before {
-  content: ""; flex: none;
-  width: 6px; height: 6px; border-radius: 50%;
+  width: 14px; height: 14px; border-radius: 0;
   background: var(--warn, #ff9aa2);
-  /* Ein duenner dunkler Saum, damit der Punkt auch auf der hellen
-     Kachel eine Kante hat -- sonst verschwimmt Lachs auf Babyblau. */
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
+  box-shadow: none;
+  -webkit-mask-size: 14px 14px;
+  mask-size: 14px 14px;
 }
 .chat-nachricht__weg-knopf[data-notfall="ja"]:hover { color: var(--blase-text); }
 
@@ -1366,6 +1667,38 @@
   resize: none;
   min-height: 42px; max-height: 160px;
   line-height: 1.5;
+  /* ==== AUS DEM FELD WIRD EINE RINNE (25.09.2026) ==================
+
+     Es war ein flacher dunkler Kasten in der Hausform -- dasselbe
+     Feld wie in jedem Formular, an der Stelle, an der man auf dieser
+     Seite am häufigsten steht. Jetzt liegt es sichtbar TIEFER als
+     die Konsole ringsum: Lichtkante oben innen, Schatten darunter,
+     runde Enden.
+
+     Das ist dieselbe Sprache wie an der Registerleiste links und an
+     der Mulde unter jeder Nachricht: eingesenkt heißt „hier hinein",
+     aufliegend heißt „hier drücken". Drei Stellen, eine Regel.
+
+     KEINE POLSTERUNG UND KEINE RAHMENSTÄRKE ANGEFASST. Die Zeile ist
+     seit dem 23.09.2026 auf den Pixel voll -- zwei Pixel mehr am
+     Absendeknopf haben ihn damals unter das Feld geschoben. Geändert
+     wird hier nur, was nichts misst: Farbe, Rundung, Schatten. */
+  border-radius: 15px;
+  border-color: rgba(255, 255, 255, .07);
+  background: rgba(0, 0, 0, .34);
+  box-shadow:
+    inset 0 2px 6px -3px rgba(0, 0, 0, .95),
+    inset 0 1px 0 rgba(255, 255, 255, .04);
+}
+/* Beim Hineinschreiben hebt sich die Rinne nicht -- sie bekommt Licht.
+   Ein Feld, das beim Tippen die Zeile verschiebt, ist ein Feld, das
+   beim Tippen stört. */
+.chat__eingabe textarea:focus {
+  background: rgba(0, 0, 0, .28);
+  border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
+  box-shadow:
+    inset 0 2px 6px -3px rgba(0, 0, 0, .95),
+    0 0 0 3px color-mix(in srgb, var(--akzent) 13%, transparent);
 }
 /* Der eine Knopf, den man in diesem Fenster am haeufigsten drueckt --
    und er sah aus wie die Bueroklammer daneben. Jetzt ist er der
@@ -1395,9 +1728,25 @@
   transition: background .16s ease, color .16s ease;
 }
 .chat__senden svg { width: 20px; height: 20px; fill: currentColor; }
+/* DER EINE KNOPF, DER GEDRÜCKT WERDEN SOLL (25.09.2026). Er sah aus
+   wie die Werkzeuge daneben -- gleiche Größe, gleiche Ruhe. Jetzt
+   trägt er als einziges Bedienelement der Konsole eine gefüllte
+   Fläche in der Akzentfarbe und einen weichen Schein darunter; beim
+   Überfahren wird die Fläche kräftiger und der Schein weiter.
+
+   KEINE BEWEGUNG, KEIN WACHSEN. Ein Knopf, der beim Überfahren
+   springt, verschiebt in einer bis auf den Pixel vollen Zeile alles
+   daneben -- und er wird hundertmal am Tag überfahren (Hausregel:
+   augenschonend). */
 .chat__senden:hover {
-  background: color-mix(in srgb, var(--akzent) 28%, transparent);
+  background: linear-gradient(168deg,
+    color-mix(in srgb, var(--akzent) 62%, transparent) 0%,
+    color-mix(in srgb, var(--akzent) 38%, transparent) 100%);
+  border-color: color-mix(in srgb, var(--akzent) 78%, transparent);
   color: #fff;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .28),
+    0 12px 26px -12px color-mix(in srgb, var(--akzent) 85%, transparent);
 }
 .chat__senden:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
 
@@ -1839,13 +2188,50 @@
    dann, wenn man sie meint. Die Flaeche waechst dabei auf ueber
    24x24 px; vorher war ein Wort nur so hoch wie seine Schrift.
    ===================================================================== */
+/* =====================================================================
+   DIE HANDGRIFFE BEKOMMEN ZEICHEN (25.09.2026)
+
+   Filipe: „ich will wirklich dass du das ingesamte veränderst und so
+   krass geil machst dass die ganze community und team morgen total
+   überrascht sind und den chat nicht wieder erkennen."
+
+   Unter jeder Blase standen fünf Wörter in Versalien. Sie waren leise
+   und ordentlich – und trotzdem fünf Wörter, die man in jeder
+   Nachricht wieder liest, ohne sie zu brauchen. Bei zwölf Nachrichten
+   sind das sechzig.
+
+   JETZT: Zeichen voran, Wort daneben, in Kleinbuchstaben. Ein Pfeil,
+   ein Gesicht, ein Papierkorb, eine Nadel, zwei Blätter – die kennt
+   jeder aus jedem Messenger, und das Auge findet sie, ohne zu lesen.
+
+   WARUM DIE WÖRTER TROTZDEM BLEIBEN: Reine Zeichenknöpfe wären
+   schöner und schlechter. „anheften" und „lösen" sehen als Nadel
+   gleich aus – wer sie verwechselt, verschiebt eine Ankündigung im
+   Kanal, ohne es zu merken. Und „löschen (Notfall)" darf nie ein
+   Rätsel sein: Es entfernt fremde Worte.
+
+   BREITER WIRD ES DADURCH NICHT. Versalien mit .07em Sperrung sind
+   rund ein Viertel breiter als dieselben Wörter klein gesetzt.
+   Nachgerechnet an „antworten" bei 11,5 px: vorher rund 66 px, jetzt
+   rund 50 px Schrift + 13 px Zeichen + 5 px Abstand = 68. Die Zeile
+   bleibt also so lang wie vorher und sagt mehr.
+
+   DIE ZEICHEN SIND MASKEN, KEINE BILDER. `mask-image` färbt sie mit
+   `currentColor`: Jedes Zeichen folgt damit der Schrift daneben – im
+   Ruhezustand leise, beim Überfahren hell, beim Notfall-Löschen in
+   der Warnfarbe. Ein <img> müsste man für jeden dieser Zustände neu
+   einfärben, und einer davon wäre irgendwann vergessen. Fehlt
+   `mask` (sehr alte Browser), bleibt schlicht das Wort stehen – kein
+   Schaden, nur weniger Bild.
+   ===================================================================== */
 .chat-nachricht__antwort-knopf,
 .chat-nachricht__reag-knopf,
 .chat-nachricht__kopie-knopf,
 .chat-nachricht__weg-knopf {
+  display: inline-flex; align-items: center; gap: 5px;
   border: 1px solid transparent;
   background: none;
-  padding: 3px 8px;
+  padding: 3px 9px 3px 7px;
   border-radius: 999px;
   font: inherit; font-size: .72rem; font-weight: 600;
   line-height: 1.5;
@@ -1855,6 +2241,32 @@
   transition: opacity .16s ease, background-color .16s ease,
               border-color .16s ease, color .16s ease;
 }
+/* Eine Regel für alle fünf – die Familie steht an EINER Stelle
+   beieinander, wie schon die Form darüber. Wer einen sechsten
+   Handgriff baut, trägt ihn hier ein und bekommt sein Zeichen. */
+.chat-nachricht__antwort-knopf::before,
+.chat-nachricht__reag-knopf::before,
+.chat-nachricht__kopie-knopf::before,
+.chat-nachricht__pin-knopf::before,
+.chat-nachricht__weg-knopf::before {
+  content: ""; flex: none;
+  width: 13px; height: 13px;
+  background: currentColor;
+  -webkit-mask: var(--zeichen) center / 13px 13px no-repeat;
+  mask: var(--zeichen) center / 13px 13px no-repeat;
+}
+.chat-nachricht__antwort-knopf {
+  --zeichen: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.5 5.5 3.5 11.5l6 6'/><path d='M3.5 11.5h9.5a7 7 0 0 1 7 7v.6'/></svg>");
+}
+.chat-nachricht__reag-knopf {
+  --zeichen: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M8.6 9.9h.01'/><path d='M15.4 9.9h.01'/><path d='M8.2 14.4a5 5 0 0 0 7.6 0'/></svg>");
+}
+.chat-nachricht__kopie-knopf {
+  --zeichen: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='8.5' y='8.5' width='12' height='12' rx='3'/><path d='M15.5 8.5v-2a3 3 0 0 0-3-3h-6a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h2'/></svg>");
+}
+.chat-nachricht__weg-knopf {
+  --zeichen: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 7h15'/><path d='M10 7V4.8h4V7'/><path d='M6.6 7l.9 12.2h9L17.4 7'/></svg>");
+}
 .chat-nachricht__antwort-knopf:hover,
 .chat-nachricht__reag-knopf:hover,
 .chat-nachricht__kopie-knopf:hover,
@@ -1918,6 +2330,36 @@
   outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 4px;
 }
 
+/* ==== DIE VIER WERKZEUGE SPRECHEN EINE SPRACHE (25.09.2026) =========
+
+   Büroklammer, Mikrofon, GIF und Emoji standen in drei verschiedenen
+   Fassungen nebeneinander -- verschiedene Rundungen, verschiedene
+   Ränder, einer mit Fläche, einer ohne. Im Bildschirmfoto sah die
+   Konsole dadurch aus wie vier Knöpfe aus vier Programmen.
+
+   Sie bekommen jetzt dieselbe Mulde wie die Schalter der
+   Registerleiste: eingesenkt, mit Lichtkante oben. Beim Überfahren
+   heben sie sich in die Akzentfarbe.
+
+   NUR OBERFLÄCHE, KEINE MASSE. Breite, Höhe, Polsterung und Abstände
+   bleiben unangetastet -- die Zeile ist seit dem 23.09.2026 auf den
+   Pixel voll, und sechs Pixel haben dort schon einmal gereicht, um
+   „Senden" auf eine eigene Zeile zu schieben. Wer hier eine Maßzahl
+   ändert, misst auf 320, 390 und 412 px nach. */
+.chat__eingabe :is(.chat__anhang, .chat__ton, .chat__gif, .chat__emoji) {
+  border-radius: 13px;
+  border-color: rgba(255, 255, 255, .07);
+  background: linear-gradient(180deg,
+    rgba(0, 0, 0, .34) 0%, rgba(255, 255, 255, .022) 100%);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .055),
+    inset 0 -2px 5px -3px rgba(0, 0, 0, .75);
+}
+.chat__eingabe :is(.chat__anhang, .chat__ton, .chat__gif, .chat__emoji):hover {
+  border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
+  background: color-mix(in srgb, var(--akzent) 14%, transparent);
+}
+
 /* ---- Emoji ---------------------------------------------------------- */
 .chat__emoji {
   flex: none;
@@ -2540,10 +2982,17 @@
    eintragen -- deshalb stehen alle fuenf Namen jetzt an EINER Stelle
    beieinander (siehe die gemeinsame Regel weiter oben). */
 .chat-nachricht__pin-knopf {
+  /* Die Nadel steht in derselben Familie wie die vier daneben (siehe
+     die gemeinsame Zeichen-Regel weiter oben); hier steht nur ihr
+     eigenes Bild. Zwei Zustände, ein Zeichen: „anheften" und „lösen"
+     unterscheidet das WORT -- eine durchgestrichene Nadel wäre bei
+     13 px nicht mehr als ein Fleck. */
+  --zeichen: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 3.6h6'/><path d='M10.6 3.6v5.6L7.4 14.2h9.2L13.4 9.2V3.6'/><path d='M12 14.2v6.2'/></svg>");
+  display: inline-flex; align-items: center; gap: 5px;
   appearance: none;
   border: 1px solid transparent;
   background: none;
-  padding: 3px 8px;
+  padding: 3px 9px 3px 7px;
   border-radius: 999px;
   font: inherit; font-size: .72rem; font-weight: 600;
   line-height: 1.5;
@@ -3475,12 +3924,47 @@
   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; }
+/* =====================================================================
+   AUS DEM FLECK WIRD EIN RING (25.09.2026)
+
+   Im Bildschirmfoto war das ein voller Kreis in der gewählten Farbe,
+   28 px groß, zwischen der Überschrift „Gespräche" und dem Knopf
+   „Neu". In dieser Umgebung liest man einen farbigen Vollkreis als
+   MARKE – als Zahl, die gerade keine Zahl hat. Genau daneben steht
+   ja auch eine (der Zähler der ungelesenen Nachrichten, gleiche
+   Größe, gleiche Form). Er meldet aber nichts, er ist ein SCHALTER.
+
+   Jetzt: ein Ring in der Farbe um einen dunklen Kern. Zwei Gründe,
+   und beide zählen mehr als der Geschmack:
+
+     1. DIESELBE SPRACHE WIE DIE GANZE SEITE. Farbe erscheint hier
+        überall als Kontur – die Kante an der Blase, die Schiene an
+        der offenen Zeile, der Saum am Zeichen. Eine gefüllte Scheibe
+        war der einzige Ort, an dem Farbe Fläche war.
+     2. EIN RING IST DIE FORM, in der jedes Zeichenprogramm eine
+        Farbwahl anbietet. Sie muss niemandem erklärt werden.
+
+   DAS SKRIPT BLEIBT UNBERÜHRT: Es setzt weiterhin nur `background`
+   auf den gewählten Ton. Der dunkle Kern liegt als `::after`
+   darüber – so bleibt die eine Zeile im Skript die eine Zeile im
+   Skript, und die Farbe ist trotzdem ein Ring.
+
+   `inset: 5px` auf 28 px ergibt einen Ring von 5 px Stärke. Dünner,
+   und ein dunkler Ton verschwindet gegen den dunklen Kern; dicker,
+   und es ist wieder ein Fleck. */
 .chat__kachelknopf-probe {
-  display: block; width: 100%; height: 100%;
+  display: block; position: relative;
+  width: 100%; height: 100%;
   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);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
+}
+.chat__kachelknopf-probe::after {
+  content: ""; position: absolute; inset: 5px;
+  border-radius: 50%;
+  background: rgba(8, 12, 19, .94);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7);
 }
 /* „Neu" steht danach und schiebt sich nicht mehr selbst -- der
    Farbfleck hat den auto-Rand übernommen. Zwei auto-Ränder
@@ -4042,9 +4526,34 @@
        damit in zwei statt drei Reihen, ohne dass die Schrift
        schrumpft. */
     font-size: .72rem; letter-spacing: .02em; text-transform: none;
-    margin-top: 7px; padding-top: 6px;
+    /* DIE MULDE ZIEHT MIT (25.09.2026). Seit die Fusszeile eine
+       eingesenkte Flaeche ist, reicht es nicht mehr, oben Abstand
+       wegzunehmen -- die Polsterung der Mulde selbst gehoert dazu.
+       Bliebe hier `padding-top`, haette die Mulde auf dem Handy
+       unten 6 px und oben 6+6 px, und sie saesse schief. */
+    margin: 8px -7px -2px; padding: 5px 6px;
+    border-radius: 12px;
   }
-  .chat-nachricht__fuss button { padding: 3px 5px; }
+  .chat-nachricht__fuss button { padding: 3px 6px 3px 5px; gap: 4px; }
+  /* EIN PIXEL KLEINER, UND ES SPART FUENF. Die Zeichen sind am
+     Rechner 13 px; auf 412 px sparen 12 px mal fuenf Knoepfe plus
+     der engere Abstand zusammen rund 10 px -- genug, dass „loeschen
+     (Notfall)" nicht allein in eine dritte Zeile faellt. Unter 12 px
+     wird aus einem Papierkorb ein Fleck; das ist die Grenze. */
+  .chat-nachricht__fuss button::before {
+    width: 12px; height: 12px;
+    -webkit-mask-size: 12px 12px;
+    mask-size: 12px 12px;
+  }
+  .chat-nachricht__weg-knopf[data-notfall="ja"]::before {
+    width: 13px; height: 13px;
+    -webkit-mask-size: 13px 13px;
+    mask-size: 13px 13px;
+  }
+  /* Die Uhrzeit gibt ihr Schild ab: Auf dem Handy zaehlt jede
+     Polsterung, und die Trennung zwischen Angabe und Knopf macht
+     hier ohnehin schon die Reihenfolge. */
+  .chat-nachricht__zeit { padding: 0 2px; background: none; }
   /* KEIN `margin-right: auto` AUF DEM HANDY. Am Rechner schiebt es
      die Handgriffe nach rechts und trennt sie von der Angabe -- gut.
      Auf 412 px nimmt es die ganze erste Zeile fuer die Uhrzeit, und
@@ -4055,4 +4564,12 @@
   /* Die Knopfgruppe oben rechts: Auf 412 px schob ihre Polsterung
      sie unter den Titel. Ohne sie passt sie wieder daneben. */
   .chat__kopf-knoepfe { padding: 2px; gap: 2px; border-radius: 11px; }
+  /* DAS GESICHT IM KOPF BLEIBT AM HANDY WEG. Die Rechnung steht bei
+     `.chat__kopf-zeichen` weiter oben: Mit ihm blieben dem Namen
+     126 px, seine Untergrenze sind 128 -- die Knopfreihe fiele eine
+     Zeile tiefer und der Kopf waere 44 px hoeher. Zwei Klassen weit
+     genug (`.chat__kopf .chat__kopf-zeichen`), um die Grundregel
+     `.chat-raum__zeichen { display: grid }` zu schlagen; eine
+     Medienabfrage allein erhoeht die Spezifitaet nicht. */
+  .chat__kopf .chat__kopf-zeichen { display: none; }
 }