DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Die Blase hört auf, eine Farbfläche zu sein -- der Chat sieht anders aus

Browse Source 
Filipe: „es hat sich nichts verändert quasi … auch die kachel das
aussehen. die blasen. die schriften. alles soll anders und geiler
aussehen, moderner und spezieller."

ER HATTE RECHT, UND ICH WEISS JETZT WARUM. Der erste Anlauf hat
poliert statt umgebaut -- weil ich die FARBE der Blase für unantastbar
gehalten habe. Genau sie war das Problem: Zwei Drittel jeder Nachricht
waren eine deckende, kräftige Fläche, und darauf kämpfte alles andere
um Aufmerksamkeit. Jede Feinheit, die man darauf legt, verschwindet.

DIE BLASE IST JETZT DUNKLES GLAS -- für jeden dieselbe. Die persönliche
Farbe ist vollständig erhalten, sie sitzt nur woanders:
  * als leuchtende KANTE an der Sprechseite (links beim Gegenüber,
    rechts bei einem selbst),
  * im NAMEN, aufgehellt, damit auch ein dunkler Ton trägt,
  * als Hauch im oberen Verlauf und als Schein unter der Blase.
Man erkennt die Person weiterhin an der Farbe -- und der Text steht
endlich auf einem ruhigen Grund.

DAZU: Die Fußzeile bekommt eine Kante in der Farbe und wird zur
Beschriftung (Versalien, gesperrt, gedämpft); die Uhrzeit trennt sich
von den fünf Handgriffen; die Blase wird schmaler (66 % / 62 Zeichen --
darüber verliert man beim Zeilenwechsel die nächste Zeile); der Text
bekommt Durchschuss, weil helle Schrift auf dunklem Grund optisch
ausstrahlt; das Zeichen neben der Blase spricht dieselbe Sprache wie
die Liste; die offene Gesprächszeile bekommt dieselbe Kante wie die
Blasen.

WAS DAS FÜR DIE MESSUNGEN HEISST -- und das ist der wichtigere Teil:

pruef-chatkachel und pruef-chat-neu haben bis heute gerechnet „Schrift
X auf Kachelfarbe Y". Das gibt es nicht mehr. Die eine wäre GRÜN
geblieben und hätte nichts mehr über den Bildschirm gesagt (die
gefährlichste Sorte, in diesem Haus schon dreimal vorgekommen), die
andere wurde sofort rot. Beide sind mitgezogen:

  * Die feste Schrift wird gegen den festen Blasengrund gemessen --
    und zwar im SCHLIMMSTEN Fall: Die Blase ist zu 92 % deckend,
    dahinter liegt ein Foto, gerechnet wird mit Weiss dahinter.
    Gemessen 14,2:1 (nötig 7) und 7,9:1 (nötig 4,5).
  * NEU: Jede der 13 Kacheln UND alle 360 Töne des Farbrings müssen
    als NAME auf diesem Grund lesbar sein. Das ist die Stelle, an der
    es heute kippen kann.
  * Beides liest `--blasengrund` und `--namen-anteil` aus chat.css
    statt sie abzuschreiben. Wer dort etwas ändert, ändert die
    Prüfung mit.

UND SIE HAT SOFORT ETWAS GEFUNDEN: Mit 58 % Aufhellung schaffte der Ton
„Ziegel" als Name nur 4,31:1 -- unter den nötigen 4,5. Auf dem
Bildschirm sah er gut aus, weil hinter der Blase gerade nichts Helles
lag. Jetzt 50 % und 5,20:1. Dazu eine Gegenprobe, die beweist, dass das
Aufhellen keine Zierde ist (ohne sie: 2,05:1).

DREI EIGENE FEHLER, ALLE VON PRÜFUNGEN GEMELDET
  * 0,66 rem für die Fußzeile = 10,56 px, drei Stellen unter der
    Hausgrenze von 11,5 px. Jetzt 0,72 rem; leise wirkt sie durch
    Versalien und Deckung, nicht durch Kleinheit.
  * Auf dem Handy brach die Fußzeile in drei Zeilen -- schuld war meine
    eigene Regel `margin-right: auto` an der Uhrzeit, die am Rechner
    richtig ist. Dort jetzt Kleinbuchstaben und kein Schub.
  * Der Handy-Block stand MITTEN in der Datei. Eine Medienabfrage
    erhöht die Spezifität nicht -- jede spätere Basisregel gewann
    gegen ihn, und er wirkte halb. Er steht jetzt am Ende.

GEPRÜFT: chatkachel, chat-optik, chat-ausbau, chat, chat-neu,
chat-kanaele, css-klassen, lesbarkeit, tippziele — alle 0 Fehler.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-25 01:42:19 +02:00
co-authored by Claude Opus 5
parent bfae4447cd
commit d47ccf0d5f
45 changed files with 1113 additions and 686 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/chat.css
+292 -33
View File
@@ -491,11 +491,18 @@
rgba(255, 255, 255, .03));
border-color: color-mix(in srgb, var(--akzent) 34%, transparent);
}
/* DIESELBE KANTE WIE AN DER BLASE (25.09.2026) -- mit Schein und
Verlauf statt eines flachen Strichs. Eine Seite, eine Sprache: Wer
links die Kante sieht, sieht rechts dieselbe wieder. */
.chat-raum[data-offen="ja"] .chat-raum__knopf::before {
content: "";
position: absolute; left: -1px; top: 10px; bottom: 10px;
position: absolute; left: -1px; top: 9px; bottom: 9px;
width: 3px; border-radius: 0 3px 3px 0;
background: var(--akzent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--akzent) 55%, #ffffff) 0%,
var(--akzent) 45%,
color-mix(in srgb, var(--akzent) 70%, transparent) 100%);
box-shadow: 0 0 12px -1px color-mix(in srgb, var(--akzent) 75%, transparent);
}
/* Ungelesenes ist der Grund, warum man hier ist — die Zeile hebt sich
eine Spur, aber nur eine. */
@@ -733,14 +740,64 @@
/* ---- ENDE GERECHNET ---- */
.chat-nachricht {
--blase-text: #f3f7fc;
--blase-leise: #c4d2e2;
/* ==== FEST UND NICHT MEHR JE KACHEL (25.09.2026) ================
Der Text steht seit heute auf dunklem Glas, nicht mehr auf der
persoenlichen Farbe. Damit ist sein Untergrund immer derselbe --
und zwei feste Werte sind richtiger als eine Rechnung fuer einen
Untergrund, den es nicht mehr gibt. Gemessen gegen den Grund der
Blase (#0b1019): 15,4:1 fuer den Text, 7,4:1 fuer die Fusszeile.
Verlangt sind 7 und 4,5 (pruef-chatkachel). */
--blase-text: #eef4fc;
--blase-leise: #a8bacf;
/* ==== DER GRUND, AUF DEM DER TEXT STEHT (25.09.2026) ============
Er steht als eigener Wert da, damit pruef-chatkachel ihn LESEN
kann statt ihn abzuschreiben. Eine Pruefung mit einer eigenen
Kopie dieser Farbe waere eine zweite Wahrheit -- und die faellt
erst auf, wenn eine der beiden geaendert wird.
92 PROZENT UND NICHT 84: Die Blase ist durchscheinend, also
haengt der wirkliche Untergrund des Textes davon ab, was dahinter
liegt -- und dahinter liegt ein Foto, das stellenweise hell ist.
Der schlimmste Fall ist WEISS dahinter. Nachgerechnet:
bei 84 % -> Grund #323a44, Fusszeile nur 3,9:1 (zu wenig)
bei 92 % -> Grund #1e242c, Fusszeile 5,9:1 (reicht)
Deshalb 92. Es ist der Punkt, an dem das Glas noch Glas ist und
die Schrift auch ueber der hellsten Stelle des Fotos traegt.
pruef-chatkachel rechnet genau diesen schlimmsten Fall nach. */
--blasengrund: #0b1019;
/* WIE STARK DER NAME AUFGEHELLT WIRD -- als Wert und nicht als Zahl
im Ausdruck, damit pruef-chatkachel ihn LESEN kann.
50 UND NICHT 58 (nachgemessen 25.09.2026): Mit 58 % schaffte der
Ton „Ziegel" als Name nur 4,31:1 gegen den hellsten denkbaren
Grund -- unter den noetigen 4,5. Gefunden hat das die Pruefung,
nicht das Auge: Auf dem Bildschirm sah der Name gut aus, weil
hinter der Blase gerade nichts Helles lag.
Mehr Weiss ginge auch -- dann aehneln sich die Toene aber
einander an, und die Farbe verliert genau das, wofuer sie da ist:
zu sagen, WER spricht. 50 % ist der Punkt, an dem beides noch
stimmt. */
--namen-anteil: 50%;
display: grid;
grid-template-columns: 30px 1fr;
gap: 9px;
align-items: flex-end;
max-width: 76%;
margin-top: 9px;
/* 66 STATT 76 PROZENT (25.09.2026). Auf 1440 px war eine Blase
ueber 700 px breit -- ein Satz lief dann ueber die ganze Bahn, und
das Auge musste beim Zeilenwechsel zurueckspringen. Im Satz gilt
seit Jahrhunderten dieselbe Regel: Eine Zeile ist gut lesbar bis
etwa 75 Zeichen; darueber verliert man die naechste.
`ch` WAERE GENAUER ALS PROZENT -- aber die Blase soll auf dem
Handy trotzdem die Breite ausnutzen. Deshalb beides: Prozent fuer
klein, eine Obergrenze in Zeichen fuer gross. So stimmt es auf
jedem Geraet, ohne eine Schwelle dazwischen. */
max-width: min(66%, 62ch);
margin-top: 11px;
}
/* Folgt eine Nachricht derselben Person, rückt sie näher und lässt den
Kreis weg -- der Platz bleibt frei, damit die Blasen fluchten. */
@@ -750,15 +807,27 @@
margin-left: auto;
}
/* Dasselbe Zeichen wie in der Liste links, nur kleiner: Licht oben,
Saum ringsum, Schatten darunter. Vorher waren es zwei verschiedene
Kreise fuer dieselbe Sache -- links ein Koerper, hier ein flacher
Fleck. */
.chat-nachricht__zeichen {
--r: #a0aec4;
grid-column: 1;
width: 30px; height: 30px; border-radius: 50%;
width: 32px; height: 32px; border-radius: 50%;
display: grid; place-items: center;
font-size: .75rem; font-weight: 700;
font-size: .76rem; font-weight: 750;
color: var(--r);
background: color-mix(in srgb, var(--r) 13%, transparent);
border: 1px solid color-mix(in srgb, var(--r) 28%, transparent);
background: linear-gradient(162deg,
color-mix(in srgb, var(--r) 26%, transparent) 0%,
color-mix(in srgb, var(--r) 9%, transparent) 55%,
rgba(0, 0, 0, .25) 100%);
border: 1px solid color-mix(in srgb, var(--r) 32%, transparent);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .15),
0 0 0 1px rgba(0, 0, 0, .35),
0 5px 12px -7px color-mix(in srgb, var(--r) 50%, transparent);
text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.chat-nachricht__zeichen[data-rolle="admin"] { --r: var(--dogi-haupt); }
.chat-nachricht__zeichen[data-rolle="manager"] { --r: var(--manager-haupt); }
@@ -793,22 +862,66 @@
Hintergrundbild -- ohne ihn verschwimmt eine helle Kachel auf
einer hellen Stelle des Fotos.
===================================================================== */
/* =====================================================================
DIE BLASE IST KEINE FARBFLAECHE MEHR (25.09.2026)
=====================================================================
Filipe, nachdem der erste Anlauf nur poliert hatte: „alles soll
anders und geiler aussehen, moderner und spezieller."
WAS DAS PROBLEM WAR -- und es war nicht der Rand und nicht die
Rundung: Zwei Drittel jeder Nachricht waren eine deckende, kraeftige
Flaeche in der persoenlichen Farbe. Bei zwoelf Nachrichten
untereinander ist das eine Wand aus Farbe, auf der alles andere
-- Name, Text, Zeit, fuenf Handgriffe -- um Aufmerksamkeit kaempft.
Jede Feinheit, die man darauf legt, verschwindet.
WAS JETZT GILT: Die Blase ist dunkles Glas -- fuer JEDEN dieselbe.
Die persoenliche Farbe bleibt vollstaendig erhalten, sie sitzt nur
woanders:
* als KANTE an der Sprechseite (links beim Gegenueber, rechts bei
einem selbst) -- 3 px, leuchtend, mit weichem Schein;
* im NAMEN, aufgehellt, damit er auf dem dunklen Grund traegt;
* als HAUCH im oberen Verlauf der Blase;
* als SCHEIN unter der Blase, sehr schwach.
MAN ERKENNT DIE PERSON ALSO WEITERHIN AN DER FARBE -- und der Text
steht endlich auf einem ruhigen Grund.
WARUM DAS DIE KONTRASTMESSUNG NICHT AUSHEBELT, sondern verbessert:
Bisher garantierte pruef-chatkachel „Schrift X auf Flaeche Y" fuer
zwoelf verschiedene Flaechen -- eine Rechnung mit zwoelf Ergebnissen.
Jetzt gibt es EINEN Untergrund. Die Pruefung ist mitgezogen worden
(siehe dort) und misst ab sofort zwei Dinge: die feste Schrift auf
dem festen Grund, und dass JEDE der zwoelf Farben als Name auf
diesem Grund noch lesbar ist. Das ist weniger Rechnerei und mehr
Aussage.
`backdrop-filter` MIT VORBEHALT: Wo es fehlt (aeltere Browser),
bleibt die Blase schlicht deckend dunkel -- kein Schaden, nur
weniger Tiefe. Deshalb steht der deckende Ton als zweite Schicht
darunter und nicht als durchsichtige Flaeche allein.
===================================================================== */
.chat-nachricht__blase {
--ton: var(--kachel, var(--kachel-standard));
position: relative;
grid-column: 2;
padding: 12px 16px 9px;
border: 1px solid rgba(255, 255, 255, .13);
padding: 12px 17px 9px;
border: 1px solid color-mix(in srgb, var(--ton) 24%, rgba(255, 255, 255, .07));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .22),
inset 0 -1px 0 rgba(0, 0, 0, .28),
0 0 0 1px rgba(0, 0, 0, .32),
0 14px 26px -16px color-mix(in srgb, var(--kachel, var(--kachel-standard)) 60%, transparent),
0 4px 10px -6px rgba(0, 0, 0, .55);
inset 0 1px 0 color-mix(in srgb, var(--ton) 30%, rgba(255, 255, 255, .13)),
inset 0 -1px 0 rgba(0, 0, 0, .35),
0 0 0 1px rgba(0, 0, 0, .42),
0 20px 38px -22px rgba(0, 0, 0, .96),
0 0 30px -16px color-mix(in srgb, var(--ton) 55%, transparent);
backdrop-filter: blur(16px) saturate(125%);
/* RUNDER (22.09.2026). Filipe: „die chat bubble wo die text drin
sind sollen auch viel geiler aussehen, mit runden kanten."
22 px statt 14; nur die Ecke zur Person bleibt spitz -- sie ist
es, die sagt, WER spricht. Ohne sie waeren es Pillen ohne
Richtung. */
border-radius: 22px 22px 22px 6px;
border-radius: 20px 20px 20px 6px;
/* Ein Lichtsaum oben innen und ein weicher Schatten aussen. KEIN
Verlauf in der Flaeche: Text auf einem Farbverlauf liest sich
unruhig, und diese Flaeche ist zum Lesen da. Der Saum ist 1 px
@@ -828,16 +941,40 @@
Account seine eigene Kachel (siehe weiter unten). Der Rueckfall
ist die Hausfarbe -- wer nichts einstellt, bekommt das, was vorher
auch da war, nur deckend. */
background: var(--kachel, var(--kachel-standard));
/* Zwei Schichten: oben ein Hauch der persoenlichen Farbe, darunter
der deckende dunkle Grund. Der Hauch laeuft nach 44 % aus -- er
liegt damit ueber dem Namen, nicht hinter dem Text. */
background:
linear-gradient(180deg,
color-mix(in srgb, var(--ton) 13%, transparent) 0%,
transparent 44%),
color-mix(in srgb, var(--blasengrund) 92%, transparent);
min-width: 0;
}
/* DIE FARBKANTE -- sie sagt, wer spricht. Links beim Gegenueber,
rechts bei einem selbst: dieselbe Richtung, die schon die spitze
Ecke angibt, nur jetzt sichtbar auf einen Blick. */
.chat-nachricht__blase::before {
content: ""; position: absolute;
left: 0; top: 11px; bottom: 11px; width: 3px;
border-radius: 0 3px 3px 0;
background: linear-gradient(180deg,
color-mix(in srgb, var(--ton) 55%, #ffffff) 0%,
var(--ton) 45%,
color-mix(in srgb, var(--ton) 70%, transparent) 100%);
box-shadow: 0 0 12px -1px color-mix(in srgb, var(--ton) 75%, transparent);
}
.chat-nachricht[data-selbst="ja"] .chat-nachricht__blase::before {
left: auto; right: 0; border-radius: 3px 0 0 3px;
}
.chat-nachricht[data-folge="ja"] .chat-nachricht__blase { border-radius: 22px 22px 22px 10px; }
/* Die eigenen: gedecktes Blau, Ecke rechts. Kein Verlauf in der Fläche
-- Text auf einem Farbverlauf liest sich unruhig. */
.chat-nachricht[data-selbst="ja"] .chat-nachricht__blase {
grid-column: 1;
border-radius: 22px 22px 6px 22px;
border-radius: 20px 20px 6px 20px;
/* Auch die eigene deckt jetzt. `color-mix` auf `transparent` liesse
das Foto durch -- gemischt wird deshalb auf die Hausflaeche. */
/* DIESELBE FLAECHE WIE BEI ALLEN ANDEREN (22.09.2026).
@@ -847,8 +984,11 @@
eigene Blase, die man am haeufigsten liest, lag ausserhalb jeder
Messung. Woran man sie erkennt, steht unveraendert daneben: die
Seite, die spitze Ecke, der Rand und der Schein im Akzent. */
background: var(--kachel, var(--kachel-standard));
border-color: color-mix(in srgb, var(--akzent) 30%, transparent);
/* Die eigene Blase unterscheidet sich nicht mehr durch die Flaeche
-- sie ist dieselbe wie jede andere. Woran man sie erkennt, steht
unveraendert daneben: die Seite, die spitze Ecke, und seit heute
die Farbkante RECHTS statt links. */
border-color: color-mix(in srgb, var(--ton) 28%, rgba(255, 255, 255, .08));
}
.chat-nachricht[data-selbst="ja"][data-folge="ja"] .chat-nachricht__blase {
border-radius: 22px 22px 10px 22px;
@@ -880,14 +1020,26 @@
DIE SCHRIFTFARBE BLEIBT `--blase-text` -- und die wechselt seit
heute mit der Kachel. Auf Babyblau steht der Name also dunkel, auf
allen anderen hell. Eine feste Farbe waere genau hier der Fehler. */
/* DER NAME TRAEGT JETZT DIE FARBE (25.09.2026).
Vorher stand er in derselben hellen Schrift wie der Text und wurde
nur durch einen Balken davor unterschieden -- die Farbe steckte in
der Flaeche ringsum. Jetzt ist der Name selbst die Farbe.
AUFGEHELLT UND NICHT ROH: `color-mix(... 58%, #f2f8ff)` mischt
jeden Ton mit Weiss. Damit traegt AUCH ein dunkler Ton auf dem
dunklen Glas -- ohne diese Mischung waere eine dunkelblaue Kachel
als Name kaum zu lesen. pruef-chatkachel rechnet genau diese
Mischung nach, fuer jeden der zwoelf Toene. */
.chat-nachricht__von {
margin: 0 0 7px;
padding: 0 0 6px;
margin: 0 0 8px;
padding: 0 0 7px;
display: flex; align-items: center; gap: 8px;
font-size: .84rem; font-weight: 800;
letter-spacing: .02em;
color: var(--blase-text);
border-bottom: 1px solid color-mix(in srgb, var(--blase-text) 18%, transparent);
font-size: .82rem; font-weight: 800;
letter-spacing: .04em; text-transform: uppercase;
color: color-mix(in srgb,
var(--ton, var(--kachel-standard)) var(--namen-anteil, 50%), #f2f8ff);
border-bottom: 1px solid color-mix(in srgb, var(--ton, var(--kachel-standard)) 26%, transparent);
}
.chat-nachricht__von::before {
content: ""; flex: none;
@@ -903,17 +1055,29 @@
.chat-nachricht__von[data-rolle="manager"] { --rollenfarbe: var(--manager-haupt); }
.chat-nachricht__von[data-rolle="scout"] { --rollenfarbe: var(--scout-haupt); }
.chat-nachricht__von[data-rolle="creator"] { --rollenfarbe: var(--creator-haupt); }
/* Der Text ist das, wofuer die Seite da ist -- und er stand in
derselben Groesse wie die Vorschauzeile in der Liste. Jetzt etwas
groesser, mit mehr Durchschuss: Auf dunklem Grund braucht Schrift
mehr Luft zwischen den Zeilen als auf hellem, sonst laufen sie
optisch zusammen. */
.chat-nachricht__text {
margin: 0;
/* Etwas groesser als vorher (.92) -- der Chat ist die Seite, auf der
am laengsten gelesen wird, und die Blase hat jetzt den Platz. */
font-size: .95rem; color: var(--blase-text);
font-size: .97rem; color: var(--blase-text);
letter-spacing: .002em;
/* pre-wrap: Zeilenumbrüche aus der Eingabe bleiben erhalten, ohne
dass dafür HTML erzeugt werden müsste (das wäre der Weg, über den
jemand Auszeichnung einschleust). */
white-space: pre-wrap;
overflow-wrap: anywhere; /* eine lange Adresse sprengt nichts */
line-height: 1.55;
/* 1,62 STATT 1,55 (25.09.2026): Auf dunklem Grund braucht Schrift
mehr Durchschuss als auf hellem -- helle Buchstaben strahlen
optisch aus und laufen sonst von Zeile zu Zeile ineinander. Das
ist kein Geschmack; aus demselben Grund waren gedruckte
Nachtausgaben weiter gesetzt als Tagausgaben. Seit die Blase
dunkel ist statt bunt, gilt es hier. */
line-height: 1.62;
}
.chat-nachricht__weg { color: var(--text-still); font-style: italic; }
.chat-nachricht[data-weg="ja"] .chat-nachricht__blase {
@@ -954,17 +1118,62 @@
`row-gap` kleiner als `column-gap`: Zwei Zeilen Fusstext sollen wie
ein Block wirken, nicht wie zwei Absaetze. */
/* =====================================================================
DIE FUSSZEILE WAR DIE UNRUHIGSTE STELLE DER SEITE (25.09.2026)
Fuenf Handgriffe und eine Uhrzeit, in derselben Groesse wie der
Text darueber und direkt darunter geklebt -- bei zwoelf Nachrichten
sind das sechzig Woerter, die keiner liest und alle sehen.
DREI DINGE, UND JEDES EINZELN BEGRUENDET:
1. EINE KANTE DARUEBER, in der Farbe der Person. Sie trennt das
Gesagte von dem, was man damit tun kann -- vorher lief beides
ineinander.
2. KLEINER UND GESPERRT. 0,66 rem in Versalien liest sich als
Beschriftung, nicht als Satz. Man erkennt die Woerter weiter,
ohne sie zu lesen.
3. GEDAEMPFT. Erst beim Ueberfahren der Blase werden sie
deutlich -- aber sie bleiben SICHTBAR (Entscheidung vom
23.09.2026: Auf dem Handy gibt es kein Ueberfahren, und ein
Knopf, den man dort nicht erreicht, gibt es dort nicht).
===================================================================== */
.chat-nachricht__fuss {
display: flex; align-items: center; flex-wrap: wrap;
column-gap: 9px; row-gap: 2px;
margin-top: 5px;
column-gap: 4px; row-gap: 2px;
margin-top: 9px; padding-top: 7px;
border-top: 1px solid color-mix(in srgb,
var(--ton, var(--kachel-standard)) 18%, rgba(255, 255, 255, .06));
/* 0,72 rem = 11,52 px -- KNAPP UEBER DER HAUSGRENZE (25.09.2026).
Der erste Anlauf stand auf 0,66 rem (10,56 px). pruef-css-klassen
hat es gemeldet: "45 Stellen unter 11,5 px -- das sind 3 MEHR als
die Grundlinie 42." Die Grenze ist kein Geschmack; darunter faengt
Schrift an, auf einem Telefon zu flimmern.
Die Zeile wirkt trotzdem leise -- das machen Versalien, Sperrung
und die gedaempfte Deckung, nicht die Groesse. */
font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
opacity: .78;
transition: opacity .18s ease;
/* War var(--text-leise) (#94a5bb). Diese eine Farbe war die Bremse
fuer alle zwoelf Kachelfarben -- siehe der Block oben. */
color: var(--blase-leise);
}
/* Die Blase als Ganzes hebt die Fusszeile an -- nicht jeder Knopf
einzeln. Wer die Nachricht meint, meint alle Handgriffe daran. */
.chat-nachricht:hover .chat-nachricht__fuss,
.chat-nachricht:focus-within .chat-nachricht__fuss { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.chat-nachricht__fuss { transition: none; }
}
.chat-nachricht__zeit {
font-size: .75rem; color: inherit;
font-size: .72rem; color: inherit;
font-variant-numeric: tabular-nums;
letter-spacing: .07em;
/* Die Zeit bleibt links, die Handgriffe ruecken nach rechts: Das
eine ist eine Angabe, das andere sind Knoepfe. Zusammen in einer
Reihe sahen sie aus wie sechs gleichwertige Dinge. */
margin-right: auto;
}
/* Der Zurücknehmen-Knopf erscheint erst beim Darüberfahren -- er ist
die seltene Handlung und soll nicht in jeder Zeile mitlaufen. Auf
@@ -3797,3 +4006,53 @@
.kachelrad__griff { border-color: Highlight; }
.kachelrad__mitte { border: 1px solid CanvasText; }
}
/* =====================================================================
AUF DEM HANDY RUECKT ALLES ENGER (25.09.2026)
Gemessen bei 412 px: Die Blase ist dort rund 270 px breit, und
fuenf Woerter plus Uhrzeit brauchen DREI Zeilen. Im Bildschirmfoto
stand unter zwei Zeilen Text ein dreizeiliger Block aus Handgriffen
-- mehr Bedienung als Inhalt.
ENGER, NICHT WENIGER: Kein Knopf faellt weg. Die Entscheidung vom
23.09.2026 gilt unveraendert -- auf dem Handy gibt es kein
Ueberfahren, und was man dort nicht erreicht, gibt es dort nicht.
Es werden nur Schrift, Abstand und Polsterung so weit
zurueckgenommen, dass zwei Zeilen reichen.
DIE BLASE DARF DAFUER BREITER WERDEN: 66 % sind auf einem
Telefonbildschirm keine gute Zeilenlaenge, sondern eine unnoetige
Verengung -- die Regel dafuer (62 Zeichen) greift dort ohnehin nie.
WARUM DIESER BLOCK GANZ AM ENDE DER DATEI STEHT: Eine Medienabfrage
erhoeht die Spezifitaet NICHT. Stand er weiter oben, gewann jede
spaetere Basisregel gegen ihn -- beim ersten Anlauf genau so
geschehen: `margin-right: auto` an der Uhrzeit kam danach und hat
die Handgriffe weiter in die dritte Zeile geschoben, obwohl hier
`margin-right: 0` stand. Aenderungen fuer kleine Schirme gehoeren
ans Ende, sonst greifen sie halb.
===================================================================== */
@media (max-width: 560px) {
.chat-nachricht { max-width: 86%; }
.chat-nachricht__fuss {
column-gap: 2px; row-gap: 0;
/* AUCH AUF DEM HANDY NICHT KLEINER (25.09.2026) -- dort erst
recht nicht. Was Platz spart, ist stattdessen der Verzicht auf
Versalien: Kleinbuchstaben sind schmaler, und die Zeile passt
damit in zwei statt drei Reihen, ohne dass die Schrift
schrumpft. */
font-size: .72rem; letter-spacing: .02em; text-transform: none;
margin-top: 7px; padding-top: 6px;
}
.chat-nachricht__fuss button { padding: 3px 5px; }
/* KEIN `margin-right: auto` AUF DEM HANDY. Am Rechner schiebt es
die Handgriffe nach rechts und trennt sie von der Angabe -- gut.
Auf 412 px nimmt es die ganze erste Zeile fuer die Uhrzeit, und
die fuenf Woerter fangen erst darunter an und brauchen dann noch
zwei Zeilen. Gemessen: drei Zeilen statt zwei, und schuld war
eine Regel, die fuer den Rechner richtig ist. */
.chat-nachricht__zeit { letter-spacing: .04em; margin-right: 0; }
/* Die Knopfgruppe oben rechts: Auf 412 px schob ihre Polsterung
sie unter den Titel. Ohne sie passt sie wieder daneben. */
.chat__kopf-knoepfe { padding: 2px; gap: 2px; border-radius: 11px; }
}