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/chat.html

@@ -12,26 +12,26 @@
      Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite
      eine Flaeche sind statt zweier. -->
 <meta name="theme-color" content="#06090f" />
-<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609250141" />
-<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609250141" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609250141" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609250141" />
+<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609250224" />
+<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609250224" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609250224" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609250224" />
 <!-- aufgaben.css bringt die Dialog- und Formularstile mit (.dialog,
      .neu__zeile, .dialog__knoepfe). Sie stehen dort seit dem
      Aufgabenbrett; sie hierher zu kopieren hiesse, sie an zwei Stellen
      zu pflegen. Dieselbe Lösung nutzen kalender.html und content.html.
      Gemeldet von pruef-css-klassen.mjs, bevor jemand einen ungestylten
      Dialog zu sehen bekam. -->
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609250141" />
-<link rel="stylesheet" href="assets/css/chat.css?v=202609250141" />
-<link rel="stylesheet" href="assets/css/module.css?v=202609250141" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609250224" />
+<link rel="stylesheet" href="assets/css/chat.css?v=202609250224" />
+<link rel="stylesheet" href="assets/css/module.css?v=202609250224" />
 <!-- haus.css MUSS die letzte Stilvorlage sein (10.09.2026).
      Auf der Agenturadresse ist sie leer -- das Haus hier IST der
      Grundzustand. Auf der Adresse von Team Dogi biegt der Server
      genau diesen Dateinamen auf crew-haus.css um, und die Seite
      kommt schon beim ERSTEN Abruf in Lila und Babyblau an --
      ohne Umfaerben im Browser, ohne Flackern. -->
-<link rel="stylesheet" href="assets/css/haus.css?v=202609250141" />
+<link rel="stylesheet" href="assets/css/haus.css?v=202609250224" />
 </head>
 
 <body class="start">
@@ -159,6 +159,29 @@
       <!-- Suchen erst, wenn es etwas zu suchen gibt (chat.js blendet
            es ab acht Gesprächen ein). Ein Suchfeld über drei Einträgen
            ist Zierde. -->
+      <!-- ================================================================
+           DREI KATEGORIEN (25.09.2026)
+
+           Filipe: „ich will 3 kategorien haben. chats mit einzelnen
+           personen, gruppen chats und kanäle. ich will dass man diese
+           drei kategorien hat und in den jeweiligen kategorien halt
+           die richtigen chats."
+
+           SIE STEHEN GANZ OBEN, ueber dem Suchfeld: Man waehlt zuerst
+           das Fach und sucht dann darin -- nicht andersherum.
+
+           GEBAUT WIRD SIE VOM SKRIPT, nicht hier: An jeder Karte
+           haengt eine Zahl (wie viele Gespraeche) und ein Punkt (wie
+           viele ungelesen), und beides aendert sich mit jeder
+           Nachricht. Fest eingetragene Beschriftungen waeren beim
+           ersten Eintreffen falsch.
+
+           `role="tablist"` und nicht einfach drei Knoepfe: Wer mit der
+           Tastatur arbeitet, springt damit mit den Pfeiltasten
+           zwischen den Faechern statt mit sechs Tabulatorschritten. -->
+      <div class="chat-arten" id="chat-arten" role="tablist"
+           aria-label="Art der Gespräche"></div>
+
       <div class="chat__suche" id="suche-zeile" hidden>
         <input type="search" id="suche" placeholder="Name oder Gruppe …"
                aria-label="Gespräche durchsuchen" autocomplete="off" />
@@ -198,6 +221,32 @@
         <button type="button" class="chat__zurueck" id="zur-liste" aria-label="Zurück zu den Gesprächen">
           <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 5.5 8 12l6.5 6.5" /></svg>
         </button>
+        <!-- ================================================================
+             EIN GESICHT IM KOPF DES GESPRÄCHS (25.09.2026)
+
+             Filipe: „ich will dass du überhaupt die komplette kachel
+             veränderst, ich will dass alles anderst aussieht und
+             gestaltet ist … dass die ganze community und team morgen
+             total überrascht sind und den chat nicht wieder erkennen."
+
+             Im Kopf stand bisher nur ein Name. Links in der Liste
+             trägt jedes Gespräch sein Zeichen – Gesicht, Raute oder
+             Gruppenzahl –, und ausgerechnet beim Öffnen verschwand
+             es. Am Handy ist die Liste dann gar nicht mehr zu sehen:
+             Man sitzt in einem Gespräch und hat nur ein Wort davon.
+
+             ES IST DASSELBE ZEICHEN wie in der Liste, nicht ein
+             ähnliches: dieselbe Klasse, dieselben Rollenfarben,
+             dasselbe Profilbild – gefüllt von derselben Funktion
+             (`zeichenFuellen` in chat.js). Eine zweite Bauweise für
+             dieselbe Sache wäre die, die beim nächsten Umbau
+             vergessen wird.
+
+             `hidden`, solange kein Gespräch offen ist: Dann steht
+             rechts „Wähle ein Gespräch", und es gibt niemanden
+             abzubilden. -->
+        <span class="chat-raum__zeichen chat__kopf-zeichen" id="verlauf-zeichen"
+              hidden aria-hidden="true"></span>
         <div class="chat__kopf-text">
           <h2 class="chat__titel" id="verlauf-titel">Wähle ein Gespräch</h2>
           <p class="chat__unter" id="verlauf-unter"></p>
@@ -619,25 +668,25 @@
   </form>
 </dialog>
 
-<script src="assets/js/bereiche.js?v=202609250141"></script>
+<script src="assets/js/bereiche.js?v=202609250224"></script>
 <!-- TEXTFORM VOR ALLEM ANDEREN (21.09.2026): chat.js und bereich.js
      fragen beim Zeichnen nach `window.Textform`. Kaeme sie spaeter,
      waere die erste gezeichnete Nachricht ohne Gestaltung -- und das
      faellt nur dem auf, der genau hinsieht. KEIN `defer`, damit sie
      wirklich vor den anderen dasteht. -->
-<script src="assets/js/textform.js?v=202609250141"></script>
-<script src="assets/js/meldung.js?v=202609250141" defer></script>
-<script src="assets/js/hochladen.js?v=202609250141" defer></script>
-<script src="assets/js/nachfrage.js?v=202609250141" defer></script>
-<script src="assets/js/wahl.js?v=202609250141" defer></script>
-<script src="assets/js/kopf.js?v=202609250141"></script>
-<script src="assets/js/glocke.js?v=202609250141"></script>
+<script src="assets/js/textform.js?v=202609250224"></script>
+<script src="assets/js/meldung.js?v=202609250224" defer></script>
+<script src="assets/js/hochladen.js?v=202609250224" defer></script>
+<script src="assets/js/nachfrage.js?v=202609250224" defer></script>
+<script src="assets/js/wahl.js?v=202609250224" defer></script>
+<script src="assets/js/kopf.js?v=202609250224"></script>
+<script src="assets/js/glocke.js?v=202609250224"></script>
 <!-- ANRUF VOR CHAT (18.09.2026): anruf.js stellt `window.anrufStarten`
      bereit, und chat.js baut die Knoepfe nur, wenn es das gibt.
      Andersherum waere die Reihenfolge eine stille Abhaengigkeit --
      die Knoepfe fehlten, und niemand wuesste warum. -->
-<script src="assets/js/anruf.js?v=202609250141"></script>
-<script src="assets/js/chat.js?v=202609250141"></script>
-<script src="assets/js/installieren.js?v=202609250141" defer></script>
+<script src="assets/js/anruf.js?v=202609250224"></script>
+<script src="assets/js/chat.js?v=202609250224"></script>
+<script src="assets/js/installieren.js?v=202609250224" defer></script>
 </body>
 </html>