Das Rudel meint den ganzen Raum -- und die Kachelfarbe wird ein Ring

Zwei Auftraege vom 23.09.2026.

SCREEN 1: "da steht links immer noch der treff anstatt das rudel"

Und er hatte recht, auf eine Art, die niemand sehen konnte:
TREFF_NAME stand schon seit der Umbenennung auf "Das Rudel". Nur
setzt treffRaumId() den Namen ausschliesslich BEIM ANLEGEN -- der
Raum existierte laengst, also blieb die Zeile in der Datenbank auf
"Der Treff" stehen. Im Code das eine, auf dem Bildschirm das andere.

Dieselbe Falle stand direkt nebenan schon beschrieben ("drei Stellen,
von denen die dritte vergessen wird") -- die Vorsorge galt aber nur
fuer die Teilnehmer, nicht fuer den Namen. Eine halbe Selbstheilung
heilt die andere Haelfte nicht. Jetzt gleicht treffAngleichen() auch
den Namen ab; eine kuenftige Umbenennung ist wieder eine Zeile.
(IS NOT statt !=: Bei NULL ergaebe != in SQLite NULL, und die Zeile
bliebe unveraendert liegen.)

"und wenn wir da im chat @rudel machen will ich dass jeder in dem
chat markiert wird. nicht nur team ... und sehr wichtig ich rede nur
von dem chat wo die ganze community auch drin ist."

Bis heute erreichte der Ruf ueberall nur Team Dogi. Die Begruendung
stand im Code und war nicht falsch -- im Rudel-Raum sitzt die
Community. Genau das will Filipe jetzt, und zwar nur dort:

  im Rudel-Raum   -> alle, die drin sind
  ueberall sonst  -> Team Dogi, unveraendert

Was die alte Sorge entschaerft: RUFEN darf weiterhin nur Team Dogi --
kein Zuschauer kann alle wecken. Und die Nachtruhe gilt dort ohnehin.

darf_rudel folgt derselben Frage. Sonst entstuende ein stiller
Widerspruch: Ein Modi mit neun Zuschauern und ohne zweites
Teammitglied traefe mit @rudel neun Leute -- der Vorschlag beim
Tippen waere aber ausgeblendet. Die Funktion gaebe es, und niemand
faende sie.

Das Schild sagt jetzt die Wahrheit: "alle in diesem Chat" statt
"alle im Team". Stuende dort weiter das alte, waere es im Rudel-Raum
gelogen -- und zwar nach unten, also in die Richtung, in der man
leichtfertig drueckt.

Gegenprobe in pruef-erwaehnung: In der Testgruppe sitzen DogFather
und zwei Scouts; ein @rudel dort ruft NIEMANDEN. Waere die Regel
versehentlich im ganzen Haus aktiv, waeren die Scouts markiert.
"sonst nichts anfassen" ist damit gemessen, nicht versprochen.

SCREEN 2: "so eine art diagramm, wo man mit einem kreis herum gehen
kann und die farbe ganz genau selber auswaehlen kann"

Der Haken daran ist nicht die Optik. Die zwoelf Kacheln waren
GERECHNET, damit niemand sich unlesbar machen kann -- alle auf
derselben Leuchtdichte. Ein Farbkreis, der einfach den Farbton dreht,
wirft das weg: Ein gesaettigtes Gelb ist um ein Vielfaches heller als
ein gesaettigtes Blau, und helle Schrift ist darauf nicht mehr zu
lesen.

Der Ring ist deshalb KEINE neue Rechnung, sondern dieselbe in 360
Schritten statt in zwoelf. tools/chat-kacheln-rechnen.mjs --kreis
schreibt server/chat-kreis.js; buntest() und die Kontrastpruefung
darin gelten unveraendert. Ergebnis: ein Ring gleicher Helligkeit --
kein blendendes Gelb, kein abgesoffenes Blau. Das sieht ruhiger aus
als der uebliche Farbkreis, und genau das ist der Punkt.

Der Browser rechnet nichts. Er bekommt die 360 fertigen Farben und
legt sie in dieselbe Tabelle wie die Kacheln -- ab da ist "ton-214"
ein Schluessel wie "veilchen", und jede Stelle, die eine Farbe
nachschlaegt, funktioniert unveraendert.

Welche Kacheln neben dem Ring bleiben, wird ABGELEITET statt
aufgezaehlt: Grau hat keinen Farbton, Babyblau ist die eine helle mit
eigener Schrift. Nachgemessen liegen die elf bunten zwischen 0,0 und
2,4 von ihrer Ringfarbe entfernt, Grau bei 75,4 und Babyblau bei
192,9 -- zwischen 2,4 und 75 ist so viel Luft, dass die Schwelle
nicht knapp ist.

Gespeichert wird erst beim Loslassen. Wer einmal um den Ring fuehrt,
erzeugte sonst dreihundert Anfragen.

Gemessen (pruef-chat-neu, jetzt 32 Pruefungen, als Modi auf crew. mit
dem Finger): 265 px gross, aus 361 Farben gemalt, touch-action none
(sonst schiebt das Handy die Seite weg statt zu drehen), Drehen auf
drei Uhr ergibt genau Winkel 90, die Mitte zeigt exakt #675102,
vorgelesen als "Goldbraun, 90 Grad", in der Datenbank steht ton-90,
Pfeiltaste dreht ein Grad weiter. Und das eigentliche Versprechen:
alle 360 Toene tragen die Schrift der Blase, knappster Faktor 1,000.

Dabei zwei eigene Fehler, beide aufgeschrieben: Der erste Anlauf
wartete 30 Sekunden auf den Farbknopf -- am Handy weicht die Spalte
mit den Gespraechen zur Seite, sobald ein Chat offen ist. "Ist im
HTML" und "ist erreichbar" sind zwei Aussagen. Und die Schriftfarben
wurden an der falschen Klasse gemessen, was einen roten Haken an
einer heilen Stelle ergab.

Ausserdem: Das native confirm() beim Herausnehmen eines GIFs ist
weg -- meine eigene Abkuerzung vom Morgen. Gemeldet hat es
pruef-nachfrage, allerdings erst, nachdem der verlorene Backslash in
derselben Datei repariert war.

Zahlen: pruef-erwaehnung 122 (vorher 119), pruef-chat-neu 32
(vorher 19), pruef-nachfrage 46 bestanden.

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

workspace/assets/css/chat.css

@@ -2483,7 +2483,7 @@
    Tönungen gar nicht sieht. Es steht in derselben Farbe wie die
    Schrift -- eine zweite Farbe wäre dieselbe Wette wie oben. */
 .chat-erwaehnung[data-rudel="ja"]::before {
-  content: "C9A0";
+  content: "\25C9\A0";
   opacity: .72;
 }
 
@@ -2721,7 +2721,7 @@
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--akzent) 45%, transparent);
 }
 .chat-kachelwahl__ton[aria-checked="true"]::after {
-  content: "¹3";
+  content: "\2713";
   position: absolute; top: 3px; right: 6px;
   font-size: .8rem; font-weight: 700;
   color: var(--akzent);
@@ -3033,3 +3033,117 @@
   .gif-kachel__knopf { border: 1px solid CanvasText; }
   .chat__gif[aria-expanded="true"] { border: 2px solid Highlight; }
 }
+
+/* =====================================================================
+   DER FARBRING IN DER KACHELWAHL (23.09.2026)
+
+   Filipe: „kannst du nicht so eine art diagramm machen wo man mit
+   einem kreis herum gehen kann und sie die farbe ganz genau selber
+   auswählen kann? ... es soll richtig krass geil aussehen."
+
+   Der Ring wird in chat.js mit 360 fertig gerechneten Farben gefüllt.
+   Hier steht nur, wie er aussieht und wie man ihn anfasst.
+
+   WARUM ER RUHIG WIRKT UND NICHT GRELL: Alle 360 Töne liegen auf
+   derselben Leuchtdichte. Ein üblicher Farbkreis hat ein blendendes
+   Gelb und ein fast schwarzes Blau; dieser hier nicht. Das ist keine
+   Zurückhaltung im Geschmack, sondern die Bedingung dafür, dass die
+   Schrift auf JEDER dieser Farben lesbar bleibt — und nebenbei sieht
+   ein Ring gleicher Helligkeit deutlich edler aus als der bunte
+   Standardkreis, den man von überall kennt.
+   ===================================================================== */
+
+.kachelrad {
+  position: relative;
+  width: min(17rem, 68vw);
+  aspect-ratio: 1;
+  margin: 18px auto 6px;
+  /* Der Griff liegt auf dem Ring und darf nicht abgeschnitten werden. */
+  overflow: visible;
+}
+.kachelrad[hidden] { display: none; }
+
+.kachelrad__ring {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  /* Der Farbverlauf selbst kommt aus chat.js -- 360 Werte. */
+  /* DIE MITTE WIRD AUSGESTANZT statt mit einer Scheibe zugedeckt:
+     Eine Scheibe darüber würde die Zeigerbewegung abfangen, und der
+     Ring reagierte in der Mitte nicht mehr. */
+  -webkit-mask: radial-gradient(circle, #0000 0 56%, #000 57% 100%);
+          mask: radial-gradient(circle, #0000 0 56%, #000 57% 100%);
+  /* OHNE DAS SCROLLT DAS HANDY. Wer auf einem Berührungsbildschirm
+     im Kreis wischt, schiebt sonst die Seite weg, und der Ring
+     bekommt die Bewegung nie zu sehen. */
+  touch-action: none;
+  cursor: grab;
+  /* Eine leise Tiefe, damit der Ring auf dem dunklen Grund steht und
+     nicht schwebt. Kein Leuchten, kein Puls -- augenschonend gilt
+     hier genauso. */
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, #000 55%, transparent),
+    0 6px 20px -8px #000;
+}
+.kachelrad__ring:active { cursor: grabbing; }
+.kachelrad__ring:focus-visible {
+  outline: 3px solid var(--akzent);
+  outline-offset: 4px;
+}
+
+/* Der Arm dreht sich, der Griff sitzt an seinem oberen Ende.
+   So braucht der Griff keine eigene Winkelrechnung -- er wird
+   einfach mitgedreht. */
+.kachelrad__arm {
+  position: absolute;
+  inset: 0;
+  transform: rotate(var(--winkel, 0deg));
+  pointer-events: none;
+}
+.kachelrad__griff {
+  position: absolute;
+  top: 8.5%;
+  left: 50%;
+  width: 2.3rem;
+  height: 2.3rem;
+  margin: -1.15rem 0 0 -1.15rem;
+  border-radius: 50%;
+  border: 3px solid #fff;
+  background: transparent;
+  box-shadow:
+    0 0 0 2px color-mix(in srgb, #000 70%, transparent),
+    0 2px 8px -2px #000;
+}
+
+/* Die Mitte zeigt, wie die eigene Nachricht aussehen wird -- mit
+   echtem Text in der echten Schriftfarbe dieser Kachel. Ein reiner
+   Farbfleck beantwortet die Frage nicht, die man hier hat. */
+.kachelrad__mitte {
+  position: absolute;
+  inset: 22%;
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  font-weight: 600;
+  pointer-events: none;
+  box-shadow: 0 0 0 1px color-mix(in srgb, #000 45%, transparent);
+}
+.kachelrad__probe { opacity: .95; }
+
+/* Ein Wechsel der Farbe soll nicht springen, aber auch nicht
+   nachlaufen -- 90 ms sind gerade so viel, dass es weich wirkt. */
+@media (prefers-reduced-motion: no-preference) {
+  .kachelrad__arm { transition: transform .09s linear; }
+  .kachelrad__mitte { transition: background-color .09s linear; }
+}
+
+/* Im Kontrastmodus gibt es keine Farbflächen. Dann ist ein Farbring
+   sinnlos -- die Sonderknöpfe darunter tragen weiter, und der Ring
+   bekommt wenigstens einen sichtbaren Umriss statt zu verschwinden. */
+@media (forced-colors: active) {
+  .kachelrad__ring { border: 1px solid CanvasText; }
+  .kachelrad__griff { border-color: Highlight; }
+  .kachelrad__mitte { border: 1px solid CanvasText; }
+}