Die Bildschau und 2520 Farben statt 360

=== 1. BILDER OEFFNEN SICH MITTIG, MIT HUSKY UND HASE ===

Filipe: "wenn man bilder aufmacht, will ich dass die in der mitte sind.
beim hochformat soll links der husky sein und rechts der hase und beim
querformat soll oben dogfather und unten team dogi stehen da wo platz
ist ... ich will nicht dahin geschmissen sondern was richtig geiles mit
einem geilen hintergrund."

WAS VORHER PASSIERTE, und es war kein Fehler im Code: Der Klick fuehrte
auf die DATEI. Was man dann sah, war die eingebaute Bildanzeige des
Browsers -- schwarzer Grund, Bild oben links in der Ecke, auf seinem
Bildschirmfoto 1200 px Schwarz daneben. Eine Datei hat keine
Gestaltung. Wer Gestaltung will, muss eine SEITE zeigen.

Die Schau liegt jetzt UEBER dem Chat. Escape bringt einen dorthin
zurueck, wo man war, und das Gespraech laeuft im Hintergrund weiter --
ein zweiter Tab braeuchte eine eigene Seite, eine eigene Anmeldung und
einen eigenen Weg zurueck.

DER WEG IN DEN TAB BLEIBT TROTZDEM. Der Verweis hat unveraendert
`href`, `target` und `rel`; mittlere Maustaste, "In neuem Tab oeffnen"
und Herunterladen gehen wie seit jeher. Abgefangen wird nur der
gewoehnliche Klick -- und auch der nur, wenn die Schau geladen ist.
Wer Strg, Umschalt oder Befehl haelt, bekommt den alten Weg; das sind
die Griffe, die Leute seit zwanzig Jahren benutzen.

DIE BEGLEITER STEHEN DA, WO PLATZ IST -- und die Antwort darauf wird
GEMESSEN, nicht geschaetzt: nicht die Fensterbreite, sondern der Rest
neben dem Bild, nachdem es eingepasst ist. Eine Schwelle wie "ab
1100 px" waere fuer ein 3:4-Foto richtig und fuer ein 9:16-Foto auf
demselben Schirm falsch. Unter 170 px bleibt der Husky weg: Eine Figur,
die ein Streifen ist, steht besser nicht da.

Husky und Hase sind eigens verkleinert (2,1 MB und 1,0 MB werden 40 kB
und 32 kB) und bekommen weiche Raender -- ihr Hintergrund ist dunkel,
aber nicht durchsichtig; als Rechteck saehe man zwei Kaesten.

Der erste Anlauf spiegelte den Hasen, damit beide "nach innen" schauen
-- ein alter Reflex aus dem Plakatsatz. Auf dem Probebild stand danach
"Hasi Dog" seitenverkehrt auf seinem Hoodie. Schrift im Bild spiegelt
man nie.

pruef-chat-anhaenge bekommt 14 neue Punkte, darunter beide Formate und
zwei Gegenproben: Strg+Klick oeffnet die Schau NICHT (sonst hiesse "sie
geht auf" nur, dass der alte Weg verloren ist), und im Hochformat liegt
KEINE der Figuren ueber dem Foto.

NEBENBEFUND, den die Pruefung gefunden hat: Die Sprachnachricht war auf
165 px geschrumpft -- zu schmal fuer den Schieber. Ursache war keine
Aenderung an ihr, sondern eine Folge: Die Blase ist so breit wie ihr
breitester Inhalt, und seit die Handgriffe darunter Zeichen statt
Woerter sind (123 statt ueber 400 px), bestimmt das Abspielgeraet die
Breite selbst. Eine Reihe kuerzer zu machen hat einen Schieber schmaler
gemacht, drei Bildschirme weiter.

=== 2. DER FARBKREIS: HELLER UND DUNKLER ===

Filipe: "dieser kreis muss viel perfekter sein. ich will dass die leute
auch heller und dunkler aussuchen koennen ... so dass die leute viel
krassere moeglichkeiten haben."

WARUM DAS BIS HEUTE NICHT GING: Die 360 Toene liegen alle auf DERSELBEN
Leuchtdichte. Das war kein Zufall -- solange die Blase in der gewaehlten
Farbe stand, musste jede dieser Flaechen dieselbe Schrift tragen. Eine
hellere Farbe zuzulassen hiesse damals: irgendwo wird eine Nachricht
unlesbar.

SEIT DEM 25.09.2026 IST DIE BEDINGUNG EINE ANDERE. Die Blase ist fuer
alle dunkles Glas; der Ton ist Kante und NAME. Damit faellt die alte
Regel weg, und an ihre Stelle tritt: der Ton muss als Name auf dem
Blasengrund lesbar bleiben.

DIE ZAHLEN SIND GEMESSEN, NICHT GEWAEHLT. Ueber alle 360 Winkel, jeweils
der schlechteste Fall:

    40 % schwarz   4,468   -- unter der Schwelle, faellt raus
    34 % schwarz   4,555   -- ginge, aber ohne Reserve
    30 % schwarz   4,619   <- die dunkelste Stufe
     0 %           5,12    <- die Mitte, der alte Kreis
    55 % weiss     9,6     <- die hellste Stufe

Sieben Stufen, 2520 Farben statt 360. pruef-chat-neu rechnet jede
einzelne nach -- die knappste hat 2,6 Prozent Reserve.

DIE ALTEN SCHLUESSEL BLEIBEN GUELTIG. "ton-214" heisst weiterhin genau
dieselbe Farbe; die Stufe steht als Zusatz dahinter ("ton-214-s6"). Wer
seit dem 23.09. eine Farbe traegt, traegt nach diesem Umbau dieselbe.

DIE PROBE IN DER MITTE ZEIGT ENDLICH, WAS MAN BEKOMMT. Dort stand eine
gefuellte Flaeche mit heller Schrift -- so sah die Blase bis heute frueh
aus. Jetzt steht dort derselbe Blasengrund und darauf der Ton als Name,
mit genau der Rechnung aus chat.css. Das ist nicht nur ehrlicher, es
macht die sieben Stufen erst moeglich: Eine gefuellte Flaeche muesste
Schrift tragen, und bei sehr hellen Toenen schafft das keine der beiden
Schriftfarben mehr (4,1 statt noetiger 7). Als Name auf dunklem Grund
ist derselbe helle Ton besonders gut lesbar (8,0).

Der Erklaersatz im Fenster war damit falsch geworden ("Alle Toene
leuchten gleich stark") und sagt jetzt, was stimmt.

ZWEI PRUEFUNGEN WURDEN GENAUER:
  pruef-chat-neu mass den HINTERGRUND der Mitte -- eine Darstellung,
  die es nicht mehr gibt. Sie misst jetzt die Schriftfarbe und rechnet
  die Mischung nach. Dabei stolperte sie ueber eine dritte
  Farbschreibweise: Chromium gibt `color-mix`-Ergebnisse als
  `color(srgb 0.676 0.645 0.504)` zurueck. Die Zeile war rot, obwohl
  die Farbe auf den Bildpunkt genau stimmte -- ein Fehlalarm, der
  teurer ist als ein echter Befund, weil man am Aussehen sucht und der
  Fehler im Lesegeraet liegt.
  Und sie prueft nicht mehr 360, sondern 360 x 7 -- nur den Grundton zu
  messen hiesse, sechs Siebtel ungeprueft auszuliefern.

Geprueft: pruef-chat-anhaenge (123), pruef-chat-neu (36),
pruef-chatkachel (40), pruef-chat, pruef-chat-ausbau (69),
pruef-chat-optik, pruef-tippziele (11), pruef-css-klassen.

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

workspace/assets/css/chat.css

@@ -4261,7 +4261,37 @@
 }
 
 /* ---- Die Sprachnachricht in der Blase ------------------------------ */
+/* DIE SPRACHNACHRICHT BRAUCHT EINE MINDESTBREITE (25.09.2026).
+
+   Gefunden hat das pruef-chat-anhaenge, nicht ein Blick: „breit genug,
+   um den Schieber zu treffen (165 px)" -- verlangt sind 200.
+
+   URSACHE WAR EINE FOLGE, keine Aenderung an dieser Stelle: Die Blase
+   ist so breit wie ihr breitester Inhalt. Solange unter jeder
+   Nachricht fuenf WOERTER standen, war das die Handgriff-Reihe mit
+   ueber 400 px. Seit sie Zeichen sind (123 px), bestimmt das
+   Abspielgeraet selbst die Breite -- und das nimmt sich, was da ist.
+
+   Das ist die Sorte Nebenwirkung, die man nie vorhersieht und immer
+   misst: Eine Reihe kuerzer zu machen hat einen Schieber schmaler
+   gemacht, drei Bildschirme weiter.
+
+   240 UND NICHT 200: Die Zahl in der Pruefung ist die Untergrenze,
+   nicht das Ziel. Wer genau auf die Grenze baut, ist beim naechsten
+   Pixel wieder darunter.
+
+   KEIN `min(240px, 100%)` -- der erste Anlauf stand so da und hat
+   nichts getan. `100%` ist die Breite des Elternteils, und der ist ja
+   gerade der schmale: `min(240, 165)` ist 165. Eine Mindestbreite, die
+   sich am zu Schmalen orientiert, ist keine. Die feste Zahl zwingt die
+   Blase zu wachsen -- genau das ist gemeint.
+
+   AUF DEM HANDY WIRD SIE ZURUECKGENOMMEN (unten in der schmalen
+   Fassung): Dort ist die Blase selbst nur rund 250 px breit, und
+   240 px plus Polsterung passen nicht mehr hinein. */
 .chat-ton {
+  min-width: 240px;
+
   display: grid; gap: 6px;
   /* So breit, dass der Schieber des Abspielgeräts bedienbar ist, und
      nicht breiter als eine Blase am Handy. */
@@ -4533,7 +4563,92 @@
   pointer-events: none;
   box-shadow: 0 0 0 1px color-mix(in srgb, #000 45%, transparent);
 }
-.kachelrad__probe { opacity: .95; }
+/* ==== DIE PROBE ZEIGT, WIE ES WIRKLICH AUSSIEHT (25.09.2026) ======
+
+   Hier stand eine gefuellte Flaeche mit heller Schrift darauf. So sah
+   die Blase bis zum 25.09. aus -- seither ist sie fuer alle dunkles
+   Glas, und der gewaehlte Ton ist der NAME darauf. Die Probe zeigte
+   also etwas, das es nicht mehr gibt.
+
+   Jetzt steht hier genau die Rechnung aus der Blase: derselbe
+   Blasengrund, und darauf der Ton, mit Weiss aufgehellt im selben
+   Verhaeltnis (`--namen-anteil`). Wer eine Farbe waehlt, sieht die
+   Schrift, die die anderen sehen werden.
+
+   UND ES IST DER GRUND, WARUM DIE SIEBEN HELLIGKEITEN GEHEN: Eine
+   gefuellte Flaeche muesste Schrift tragen, und bei sehr hellen Toenen
+   schafft das keine der beiden Schriftfarben mehr (gemessen 4,1 statt
+   noetiger 7). Als NAME auf dunklem Grund ist derselbe helle Ton
+   besonders gut lesbar (8,0). */
+.kachelrad__mitte {
+  background: color-mix(in srgb, var(--blasengrund) 96%, transparent);
+}
+.kachelrad__probe {
+  opacity: 1;
+  font-weight: 800;
+  letter-spacing: .04em;
+  color: color-mix(in srgb,
+    var(--probe-ton, var(--akzent)) var(--namen-anteil, 50%), #f2f8ff);
+}
+
+/* ==== DIE HELLIGKEITSLEITER (25.09.2026) ==========================
+
+   Filipe: „ich will dass die leute auch heller und dunkler aussuchen
+   koennen … so dass die leute viel krassere moeglichkeiten haben."
+
+   SIEBEN FELDER IN IHRER ECHTEN FARBE, nicht sieben graue Kaestchen
+   mit Beschriftung: Man waehlt eine Farbe, also soll man Farben sehen.
+   Sie faerben sich beim Drehen am Ring mit.
+
+   EINE LEISTE UND KEIN ZWEITER KREIS: Farbton laeuft rund (359 grenzt
+   an 0), Helligkeit nicht -- sie hat ein dunkles und ein helles Ende.
+   Eine runde Form fuer etwas, das gerade verlaeuft, waere eine Form,
+   die luegt. */
+.kachelhell {
+  margin: 14px auto 0;
+  max-width: 320px;
+  display: grid; gap: 7px;
+}
+.kachelhell__schild {
+  font-size: .74rem; font-weight: 700;
+  letter-spacing: .1em; text-transform: uppercase;
+  color: var(--text-still);
+}
+.kachelhell__leiter {
+  display: grid; grid-template-columns: repeat(7, 1fr);
+  gap: 4px;
+  padding: 5px;
+  border-radius: 14px;
+  background: rgba(0, 0, 0, .3);
+  box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, .9);
+  cursor: pointer;
+}
+.kachelhell__leiter:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
+/* 44 px hoch: Hier tippt man mit dem Daumen, und sieben Felder
+   nebeneinander sind ohnehin schon schmal. */
+.kachelhell__feld {
+  height: 44px;
+  border-radius: 9px;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
+  transition: transform .14s ease, box-shadow .14s ease;
+}
+/* DIE WAHL STEHT HOEHER, sie ist nicht nur umrandet: Bei sieben
+   benachbarten Farbfeldern ist ein Rahmen mehr die achte Farbe. Ein
+   angehobenes Feld mit Lichtkante liest sich als „das hier". */
+.kachelhell__feld[data-an="ja"] {
+  transform: translateY(-3px);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .5),
+    0 0 0 2px rgba(255, 255, 255, .85),
+    0 8px 16px -8px rgba(0, 0, 0, .9);
+}
+@media (prefers-reduced-motion: reduce) {
+  .kachelhell__feld { transition: none; }
+}
+@media (forced-colors: active) {
+  .kachelhell__feld { border: 1px solid CanvasText; }
+  .kachelhell__feld[data-an="ja"] { border: 3px solid Highlight; }
+}
 
 /* Ein Wechsel der Farbe soll nicht springen, aber auch nicht
    nachlaufen -- 90 ms sind gerade so viel, dass es weich wirkt. */
@@ -5243,6 +5358,10 @@
     -webkit-mask-size: 15px 15px;
     mask-size: 15px 15px;
   }
+  /* Die Mindestbreite der Sprachnachricht (240 px) gilt am Rechner.
+     Hier ist die Blase selbst nur rund 250 px breit -- 240 plus
+     Polsterung passen nicht mehr hinein und wuerden sie aufschieben. */
+  .chat-ton { min-width: 0; width: 100%; }
   /* 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. */
@@ -5266,3 +5385,157 @@
      Medienabfrage allein erhoeht die Spezifitaet nicht. */
   .chat__kopf .chat__kopf-zeichen { display: none; }
 }
+
+/* =====================================================================
+   =====================================================================
+   DIE BILDSCHAU (25.09.2026)
+   =====================================================================
+   =====================================================================
+
+   Filipe: „wenn man bilder aufmacht, will ich dass die in der mitte
+   sind. beim hochformat soll links der husky sein und rechts der hase
+   und beim querformat soll oben dogfather und unten team dogi stehen
+   da wo platz ist. … ich will nicht dahin geschmissen sondern was
+   richtig geiles mit einem geilen hintergrund."
+
+   DER GRUND IST DREI SCHICHTEN, nicht eine Farbe: ein tiefer Verlauf,
+   drei weiche Lichter (violett, tuerkis, ein warmer Rest) und ein
+   Schleier ganz aussen. Zusammen unter zehn Prozent Deckung -- ein
+   Foto soll darauf liegen, nicht dagegen ankaempfen.
+
+   KEIN REINES SCHWARZ. Genau das zeigt der Browser von sich aus, und
+   genau daran hat Filipe es gemerkt. Schwarz ist keine Gestaltung,
+   sondern ihr Fehlen.
+   ===================================================================== */
+.bildschau {
+  width: 100vw; max-width: 100vw;
+  height: 100dvh; max-height: 100dvh;
+  padding: 0; margin: 0; border: 0;
+  background: none;
+  overflow: hidden;
+  color: var(--text, #e8f1fa);
+}
+.bildschau::backdrop { background: rgba(3, 4, 9, .86); backdrop-filter: blur(6px); }
+
+.bildschau__grund {
+  position: absolute; inset: 0; z-index: 0;
+  background:
+    radial-gradient(70% 55% at 18% 8%, rgba(122, 92, 255, .16), transparent 66%),
+    radial-gradient(62% 52% at 84% 88%, rgba(38, 200, 196, .13), transparent 68%),
+    radial-gradient(48% 40% at 60% 46%, rgba(255, 176, 92, .06), transparent 70%),
+    linear-gradient(168deg, #0a0b14 0%, #070811 55%, #05060c 100%);
+}
+/* Ein Schleier von aussen nach innen -- er zieht den Blick in die
+   Mitte, ohne dass man ihn als Rahmen bemerkt. */
+.bildschau__grund::after {
+  content: ""; position: absolute; inset: 0;
+  background: radial-gradient(120% 95% at 50% 50%, transparent 52%, rgba(0, 0, 0, .55) 100%);
+}
+
+/* ---- Die Buehne: das Bild sitzt in der MITTE ----------------------- */
+.bildschau__buehne {
+  position: absolute; inset: 0; z-index: 2;
+  display: grid; place-items: center;
+  padding: 72px 4vw 56px;
+}
+.bildschau__bild {
+  max-width: 92vw; max-height: 82dvh;
+  width: auto; height: auto;
+  border-radius: 14px;
+  /* Ein feiner heller Saum trennt das Foto vom Grund, auch wenn seine
+     Raender selbst dunkel sind. Ohne ihn franst ein dunkles Foto in
+     den Hintergrund aus, und man sieht nicht mehr, wo es aufhoert. */
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, .1),
+    0 40px 90px -40px rgba(0, 0, 0, .95),
+    0 0 90px -40px rgba(122, 92, 255, .5);
+}
+
+/* ---- Die Begleiter ------------------------------------------------- */
+/* Sie liegen HINTER dem Bild (z-index 1 gegen 2) -- ein Husky, der
+   ueber einem Foto liegt, waere keine Zierde, sondern ein Hindernis. */
+.bildschau__figur {
+  position: absolute; bottom: 0; z-index: 1;
+  height: min(78dvh, 720px);
+  width: auto;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .32s ease;
+}
+.bildschau__figur--links  { left: 0; }
+/* NICHT SPIEGELN. Der erste Anlauf drehte den Hasen um, damit beide
+   „nach innen" schauen -- ein alter Reflex aus dem Plakatsatz. Auf dem
+   Probebild stand danach „Hasi Dog" seitenverkehrt auf seinem Hoodie.
+   Beide Figuren sehen ohnehin nach vorn; es gibt nichts zu spiegeln,
+   und Schrift im Bild spiegelt man nie. */
+.bildschau__figur--rechts { right: 0; }
+.bildschau[data-lage="hoch"] .bildschau__figur { opacity: .92; }
+
+/* ---- Die zwei Schriftzuege ----------------------------------------- */
+.bildschau__wort {
+  position: absolute; left: 0; right: 0; z-index: 1;
+  display: flex; align-items: center; justify-content: center; gap: 14px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .32s ease;
+}
+.bildschau__wort--oben  { top: 18px; }
+.bildschau__wort--unten { bottom: 16px; }
+.bildschau[data-lage="quer"] .bildschau__wort { opacity: 1; }
+.bildschau__zeichen { width: 34px; height: 34px; filter: invert(1) opacity(.72); }
+/* GESPERRT UND GROSS: Ein Schriftzug ist kein Satz. Die Sperrung macht
+   aus zwei Woertern ein Zeichen -- man liest es nicht, man erkennt es. */
+.bildschau__wort-text {
+  font-size: clamp(1.1rem, 2.6vw, 1.9rem);
+  font-weight: 800;
+  letter-spacing: .34em;
+  text-transform: uppercase;
+  color: rgba(232, 241, 250, .5);
+  text-shadow: 0 0 26px rgba(122, 92, 255, .45);
+}
+.bildschau__wort--unten .bildschau__wort-text {
+  font-size: clamp(.9rem, 2vw, 1.4rem);
+  letter-spacing: .42em;
+  color: rgba(232, 241, 250, .34);
+}
+
+/* ---- Die Leiste ---------------------------------------------------- */
+.bildschau__leiste {
+  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
+  display: flex; align-items: center; gap: 10px;
+  padding: 12px 14px;
+  background: linear-gradient(180deg, rgba(4, 5, 11, .78), transparent);
+}
+.bildschau__name {
+  flex: 1; min-width: 0;
+  font-size: .86rem; color: rgba(232, 241, 250, .7);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+/* 44 px hoch, auch am Rechner: Der Schliessen-Knopf ist der einzige
+   Weg heraus, den man SIEHT (Escape kennt nicht jeder). */
+.bildschau__knopf {
+  flex: none;
+  min-height: 44px; padding: 0 14px;
+  display: inline-flex; align-items: center;
+  border: 1px solid rgba(255, 255, 255, .12);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, .06);
+  color: var(--text, #e8f1fa);
+  font: inherit; font-size: .84rem; font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+}
+.bildschau__knopf:hover { background: rgba(255, 255, 255, .13); }
+.bildschau__knopf:focus-visible { outline: 2px solid #b9a7ff; outline-offset: 2px; }
+.bildschau__zu { min-width: 44px; justify-content: center; padding: 0; font-size: 1rem; }
+
+@media (prefers-reduced-motion: reduce) {
+  .bildschau__figur, .bildschau__wort { transition: none; }
+}
+/* Auf einem Telefon fuellt ein Foto den Schirm -- dort gibt es keinen
+   Platz fuer Begleiter, und die Schau sagt das ueber `data-lage`
+   ohnehin selbst. Hier bleibt nur die Buehne enger. */
+@media (max-width: 620px) {
+  .bildschau__buehne { padding: 64px 12px 24px; }
+  .bildschau__bild { max-width: 96vw; max-height: 78dvh; }
+}