Neuer Stil "Nachtprisma", Gespraeche anheften, und unten wieder Luft

Drei Sachen aus einem Bildschirmfoto-Satz.

=== 1. EIN ANDERER STIL, NICHT DIESELBE SPRACHE MIT NEUEN DETAILS ===

Filipe, zum dritten Mal an derselben Stelle: "du verstehst es wirklich
nicht ... ich will eine komplette aenderung vom aussehen. vom
hintergrund und von der grossen kachel. ich will einen ganz anderen
stil ... die leute sollen morgen nichts mehr wieder erkennen vom
aussehen her."

WARUM MEINE ZWEI ANLAEUFE DAVOR NICHT GEREICHT HABEN -- und das ist
kein Geschmacksstreit, sondern ein Fund:

Der Umriss des Chats kommt gar nicht aus chat.css. Er steht in
module.css, in einer Liste von 50 Klassen, und `.chat` ist eine davon:
Fase oben links, Kantenlicht, Punktraster, drei goldene Eckwinkel.
module.css wird NACH chat.css geladen -- und die Staerke des `:is(...)`
dort ist (0,2,0), weil `.gruppe[data-gruppe]` mit in der Liste steht.
Jede meiner Regeln war gleich stark und kam frueher. Deshalb stimmte
beides: "ich habe den Rand geaendert" und "der Rand ist derselbe". Ich
habe zweimal Details INNERHALB eines Rahmens geaendert, den ich nicht
angefasst hatte -- und den erkennt man zuerst.

Der neue Block steht als eine klar benannte Schicht am Ende von
chat.css, mit `.inhalt.chat-seite` -- eine Klasse mehr als module.css,
kein `!important` (das waere eine Tuer, die man nie wieder zubekommt).

  ALT                        NEU
  Fase oben links            rundum 26 px weich
  drei goldene Eckwinkel     keine -- der Koerper traegt sich selbst
  Punktraster                drei weiche Lichter im Hintergrund
  1-px-Rahmen ueberall       kein Rahmen, Lichtkante innen
  Gold als Leitfarbe         Lavendel/Violett, Blasen wie gehabt
  Kaesten nebeneinander      Koerper mit Tiefe und farbigem Schatten

DIE LEITFARBE WIRD AN EINER STELLE GETAUSCHT, nicht an zwanzig. Im
ersten Anlauf habe ich zehn Regeln einzeln umgefaerbt und danach im
Bild gesehen, dass Suchfeld, "Neu", Zaehler und Fokusrahmen weiter
golden waren -- sie nehmen alle `--akzent` und `--rand`. Jetzt stehen
beide am `<main>` der Chatseite. Uebersicht, Kalender und Aufgaben
behalten ihr Gold; nur der Chat soll nicht wiederzuerkennen sein.

#b9a7ff UND NICHT #7a5cff, und das ist gerechnet, nicht gewaehlt: Die
Akzentfarbe ist hier auch FLAECHE unter dunkler Schrift (die
Ungelesen-Marke). Das satte Violett kommt dort auf 3,7:1 -- zu wenig.
Das helle auf 8,9:1, und als Schrift auf dunklem Grund genauso.

WAS UNANGETASTET BLEIBT: `--blasengrund`, `--blase-text`,
`--blase-leise`, `--namen-anteil`. An ihnen haengen die Messungen von
pruef-chatkachel (12 Kacheln) und pruef-chat-neu (360 Ringtoene). Ein
Stilwechsel darf eine Zusage nicht nebenbei aufheben.

pruef-chat-optik hat sofort einen echten Schaden gemeldet: Der neue
Stil nahm allen Blasen den Rahmen -- und damit auch den, mit dem eine
NICHT ABGESCHICKTE Nachricht markiert ist ("der Unterschied ist auch zu
SEHEN, nicht nur im Merkmal (Rand 0px)"). Genau dafuer steht die Zeile
dort. Der Warnton sitzt jetzt zusaetzlich im inneren Saum.

=== 2. GESPRAECHE ANHEFTEN ===

Filipe: "ich will dass man auch individuel jeder fuer sich auch in der
liste chats fixieren kann. auch mehrere nicht nur eins."

Drei Aussagen, und jede wird einzeln geprueft:

  "fixieren"     -> `fixiert_am` an der TEILNEHMER-Zeile; Angeheftetes
                    steht oben, darunter geht die gewohnte Reihenfolge
                    weiter.
  "individuell"  -> die Spalte haengt an der Person, nicht am Raum. Eine
                    Spalte an `chat_raeume` haette alles andere genauso
                    erfuellt und jedem im Raum das Gespraech oben
                    hingeklebt -- gemerkt haette man es erst, wenn sich
                    jemand beschwert. Die Gegenprobe prueft deshalb
                    ausdruecklich, dass es bei Luna weder markiert ist
                    noch nach oben rutscht.
  "auch mehrere" -> keine Obergrenze. Ein Zeitstempel statt Ja/Nein
                    kostet dasselbe und beantwortet die Frage mit,
                    in welcher Reihenfolge mehrere stehen: zuletzt
                    angeheftet oben.

Die Nadel steht IMMER an der Zeile, nicht erst beim Ueberfahren -- am
Handy gibt es kein Ueberfahren (dieselbe Entscheidung wie am 23.09. bei
den Handgriffen), und eine Spalte, die mal da ist und mal nicht, laesst
die Namen daneben wandern. Sie liegt schraeg, solange nichts
angeheftet ist, und steht aufrecht, wenn doch -- das sieht man auch
ohne Farbe.

Der Zustand wird GESCHICKT, nicht errechnet (`an: true/false`): Ein
Schalter, der den Gegenwert selbst ausrechnet, kippt bei zwei schnellen
Klicks oder zwei offenen Fenstern in den falschen Zustand.

Die Karte ist seit heute die ZEILE und nicht mehr der Knopf darin --
im ersten Anlauf sass die Nadel sichtbar ausserhalb der Flaeche, wie
ein Knopf, der danebengefallen ist.

=== 3. UNTEN WIEDER LUFT ===

"schieb das bisschen hoeher bitte, weil das ist unten zu nah am rand."
14 px Polsterung. Sie geht nach INNEN (`border-box`), macht die Seite
also nicht laenger -- sonst waere das Schreibfeld wieder unter den
Bildrand gerutscht, und genau darum ging es am 09.09. schon einmal.

Geprueft: pruef-chat (neuer Abschnitt Anheften, 14 Punkte, alle gruen),
pruef-chat-optik, pruef-chatkachel (40), 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.

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

workspace/assets/js/chat.js

@@ -1167,6 +1167,66 @@
 
       knopf.addEventListener('click', () => raumOeffnen(r.id));
       li.append(knopf);
+
+      /* ==== OBEN ANHEFTEN (25.09.2026) ==============================
+
+         Filipe: „ich will dass man auch individuel jeder fuer sich
+         auch in der liste chats fixieren kann. auch mehrere nicht nur
+         eins."
+
+         EIN EIGENER KNOPF NEBEN DER ZEILE, nicht darin. Die Zeile ist
+         selbst ein <button>, und ein Knopf in einem Knopf ist
+         ungueltiges HTML -- Browser reissen die Verschachtelung
+         auseinander, und dann sitzt die Nadel irgendwo. Deshalb sind
+         es zwei Geschwister im <li>, und das <li> ist das Raster.
+
+         ER STEHT IMMER DA, auch wenn nichts angeheftet ist. Zwei
+         Gruende, und beide zaehlen mehr als die ruhigere Liste:
+         Auf einem Handy gibt es kein Ueberfahren -- ein Knopf, der
+         erst beim Zeigen erscheint, gibt es dort nicht (dieselbe
+         Entscheidung wie am 23.09. bei den Handgriffen an der
+         Nachricht). Und eine Spalte, die mal da ist und mal nicht,
+         laesst die Namen daneben wandern.
+
+         `aria-pressed` UND NICHT ZWEI KNOEPFE: Es ist ein Schalter mit
+         zwei Stellungen, und genau so liest ihn ein Vorleseprogramm
+         vor.
+
+         DER ZUSTAND WIRD GESCHICKT, NICHT ERRECHNET. Der Server
+         bekommt `an: true/false` und kippt nichts selbst um; bei zwei
+         schnellen Klicks oder zwei offenen Fenstern landet man sonst
+         im falschen Zustand, ohne dass jemand sieht, warum. */
+      const nadel = el('button', 'chat-raum__pin');
+      nadel.type = 'button';
+      const fix = !!r.fixiert;
+      nadel.setAttribute('aria-pressed', String(fix));
+      nadel.title = fix ? 'Nicht mehr oben halten' : 'Oben halten';
+      nadel.setAttribute('aria-label',
+        fix ? `„${r.name}" nicht mehr oben halten` : `„${r.name}" oben halten`);
+      nadel.addEventListener('click', async (e) => {
+        /* Sonst oeffnet der Klick zusaetzlich das Gespraech -- die
+           Zeile daneben ist ein Knopf, und der Klick blubbert im <li>
+           nicht dorthin, wohl aber ein spaeterer Tastendruck. */
+        e.stopPropagation();
+        nadel.disabled = true;
+        try {
+          const a = await hole(`/workspace/api/chat/raeume/${r.id}/fixieren`, {
+            method: 'PUT', headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ an: !fix }),
+          });
+          if (!a.ok) { melde('Das ließ sich gerade nicht ändern.'); return; }
+          /* NEU LADEN UND NICHT NUR UMFAERBEN: Anheften aendert die
+             REIHENFOLGE, und die rechnet der Server. Wer hier nur das
+             Zeichen umdreht, hat eine Nadel an einer Zeile, die an der
+             falschen Stelle steht. */
+          await raeumeLaden();
+        } catch { /* hole() hat schon gemeldet */ } finally {
+          nadel.disabled = false;
+        }
+      });
+      li.append(nadel);
+      if (fix) li.dataset.fixiert = 'ja';
+
       ziel.append(li);
     }