Chat: das Buehnenbild scheint durch, jeder Account bekommt seine Kachel

Hinter jeder Seite steht ohnehin eine Buehne (neun Szenen, fuer den
Chat die Lounge). Sie lag bisher hinter einer deckenden Flaeche --
vorhanden, geladen, unsichtbar. Sie durchscheinen zu lassen kostet
keine einzige Datei mehr, und auf der Adresse von Team Dogi kommt
damit von selbst deren eigene Fassung.

Das geht aber NUR, wenn der Text auf einer deckenden Kachel steht.
Sonst liegt Schrift auf einem Foto: an der dunklen Stelle lesbar, an
der hellen nicht, und beim Scrollen wechselt es. Filipes zweiter Satz
("die texte sollen immer in einer kachel sein") ist deshalb kein
Zusatzwunsch, sondern die Bedingung fuer den ersten.

Und jeder Account waehlt seinen Ton. Zwoelf Stueck, alle gleich
dunkel und gleich gesaettigt -- sie unterscheiden sich im Farbton und
in sonst nichts. Ein freier Farbwaehler klingt grosszuegiger und ist
die schlechtere Loesung: Mit ihm laesst sich Schwarz auf Schwarz
einstellen oder Neongelb, das allen anderen in die Augen sticht. Die
Kachel gehoert einem selbst, GESEHEN wird sie von allen anderen.
Gemessen: der schlechteste Kontrast liegt bei 13,9:1 (noetig 7).

Drei eigene Fehler beim Bauen, alle von der Pruefung gefunden:

1. Es gibt ZWEI Regeln fuer dieselbe Kachel (Grundform und
   Feinschliff). Ich hatte nur die erste umgestellt, die zweite gewann
   -- die eigene Kachel waere durchsichtig geblieben.
2. Die Pruefung las backgroundColor und pruefte den Alphawert. Eine
   Kachel mit einem VERLAUF hat dort rgba(0,0,0,0); sie meldete
   "durchsichtig" bei einer Kachel, die voellig deckt. Jetzt werden
   zwei Bildpunkte verglichen, einmal mit und einmal ohne Buehnenbild
   -- das misst die Sache selbst, nicht ihren Stellvertreter.
3. Dieselbe Pruefung suchte nur die rgba-Schreibweise. Chrome gibt
   das Ergebnis von color-mix als color(srgb r g b / a) zurueck; der
   Rueckfall war "Alpha 1", und sie meldete "deckt" bei einer
   Flaeche, die durchscheint. Genau das Gegenteil.

pruef-chatkachel.mjs: 27 Pruefungen, mit eingebauter Gegenprobe (auf
der freien Flaeche MUSS sich etwas aendern, sonst misst der Vergleich
nichts). pruef-chat-optik und pruef-erwaehnung unveraendert gruen.

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

workspace/chat.html

@@ -70,9 +70,39 @@
     <section class="chat__spalte chat__spalte--liste" aria-labelledby="liste-titel">
       <div class="chat__kopf">
         <h1 class="chat__titel" id="liste-titel">Gespräche</h1>
+        <!-- MEINE KACHEL (20.09.2026).
+             Filipe: "jeder account soll seine kachel personalisieren
+             koennen."
+             Der Knopf steht LINKS bei den Gespraechen und nicht rechts
+             im Verlauf: Es ist eine Einstellung ueber MICH, nicht ueber
+             dieses eine Gespraech. Rechts stehen ausserdem schon fuenf
+             Knoepfe, und ein sechster hat dort am Handy keinen Platz
+             mehr -- das war am 19.09. schon einmal der Fehler. -->
+        <button type="button" class="chat__kachelknopf" id="kachel-oeffnen"
+                aria-label="Meine Kachelfarbe wählen"
+                title="Meine Kachelfarbe">
+          <span class="chat__kachelknopf-probe" aria-hidden="true"></span>
+        </button>
         <button type="button" class="knopf knopf--klein" id="neu-oeffnen">Neu</button>
       </div>
 
+      <!-- Die Auswahl. Als <dialog>, wie die anderen Nachfragen im
+           Haus -- ein eigenes Aufklapp-Menue waere ein zweites Muster
+           fuer dieselbe Sache. -->
+      <dialog class="nachfrage chat-kachelwahl" id="kachel-wahl">
+        <h2 class="nachfrage__titel">Deine Kachel</h2>
+        <p class="nachfrage__text">
+          So sehen deine Nachrichten für alle anderen aus. Alle Töne sind
+          gleich dunkel – damit bleibt die Schrift überall gleich gut
+          lesbar.
+        </p>
+        <div class="chat-kachelwahl__gitter" id="kachel-gitter" role="radiogroup"
+             aria-label="Kachelfarbe"></div>
+        <div class="nachfrage__knoepfe">
+          <button type="button" class="abmelden" id="kachel-zu">Fertig</button>
+        </div>
+      </dialog>
+
       <!-- 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. -->