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

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

Browse Source 
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]>
This commit is contained in:
DogFatherGit
2026-09-25 03:07:05 +02:00
co-authored by Claude Opus 5
parent 63a3fb4af8
commit c64732b16d
46 changed files with 1366 additions and 632 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/chat.css
+491
View File
@@ -3895,6 +3895,11 @@
klein; gewachsen ist die Flaeche, die den Finger annimmt. */
@media (pointer: coarse) {
.chat__kachelknopf { min-width: 44px; min-height: 44px; }
/* DIE NADEL AM FINGER (25.09.2026). Am Rechner sind 36 px breit
genug -- mit der Maus zielt man genau, und jedes Pixel mehr nimmt
dem Namen daneben Platz weg. Am Daumen gilt die Hausgroesse: 44.
Dieselbe Abwaegung wie beim Farbknopf eine Zeile darueber. */
.chat-raum__pin { min-width: 44px; min-height: 44px; }
/* Die zwei Knoepfe der Aufnahmeleiste standen bei 40 px -- vier zu
wenig. Gebaut wurden sie in der Nacht zum 23.09.2026; gefunden hat
es der Rundgang am Morgen. In der Aufnahmeleiste ist Platz, also
@@ -4491,6 +4496,492 @@
.kachelrad__mitte { border: 1px solid CanvasText; }
}
/* =====================================================================
=====================================================================
STILWECHSEL: „NACHTPRISMA" (25.09.2026)
=====================================================================
=====================================================================
Filipe, zum dritten Mal an derselben Sache und deutlich:
„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. ich will dass die ganze kachel sei es rand,
hintergrund oder alles andere … komplett anderes stil bitte. nochmal
die leute sollen morgen nichts mehr wieder erkennen vom aussehen
her."
---------------------------------------------------------------------
WARUM MEINE ZWEI ANLAEUFE DAVOR NICHT GEREICHT HABEN
Ich habe zweimal INNERHALB der vorhandenen Sprache gearbeitet --
Blasen, Zeilen, Knoepfe, Schatten. Die Sprache selbst blieb: Fase
oben links, Eckwinkel in Gold, Punktraster, harte Kanten. Genau die
erkennt man wieder, und zwar zuerst. Wer den Umriss nicht aendert,
aendert das Bild nicht -- man sieht neue Details in einem bekannten
Rahmen.
DER UMRISS KOMMT NICHT AUS DIESER DATEI. Er steht in `module.css`,
in einer Liste von 50 Klassen, und `.chat` ist eine davon. Dort
werden Fase (`clip-path`), Kantenlicht, Punktraster und die drei
goldenen Eckwinkel gesetzt. `module.css` wird NACH `chat.css`
geladen -- deshalb hat jede Regel hier bisher verloren, ohne dass
man es der Datei ansieht. Das ist der Grund, warum „ich habe den
Rand geaendert" und „der Rand ist derselbe" beide stimmten.
---------------------------------------------------------------------
WAS DIESER BLOCK TUT
Er nimmt den Chat aus dieser Sprache HERAUS und gibt ihm eine
eigene:
ALT NEU
Fase oben links rundum 26 px weich
drei goldene Eckwinkel keine -- der Koerper traegt sich selbst
Punktraster Farbverlauf aus drei Lichtern
1-px-Rahmen kein Rahmen, nur Lichtkante innen
harter Schlagschatten tiefer, weiter, farbiger Schatten
Gold als Leitfarbe Violett/Tuerkis, Gold nur als Akzent
Kaesten nebeneinander Koerper, die uebereinander liegen
DIE SELEKTOREN SIND ABSICHTLICH ZWEISTUFIG (`.inhalt.chat-seite .chat`).
`module.css` kommt spaeter in der Reihe; mit einer Klasse allein
gewinnt es. Zwei Klassen sind die kleinste Stufe, die reicht -- kein
`!important`, denn das waere eine Tuer, die man danach nie wieder
zubekommt.
ES IST EINE SCHICHT UND KEINE ZWEITE WAHRHEIT. Alles, was hier NICHT
steht, gilt unveraendert aus den Regeln darueber -- Kontrastzusagen
(`--blasengrund`, `--namen-anteil`), Tippziele, Schriftgroessen. Was
hier steht, ist der neue Umriss und die neue Farbe. Wer den Stil
wieder aendern will, aendert diesen einen Block.
AUGENSCHONEND BLEIBT PFLICHT (Hausregel). Die drei Lichter im
Hintergrund stehen zusammen unter sieben Prozent Deckung, es
blinkt nichts, und `prefers-reduced-motion` nimmt die letzte
Bewegung heraus.
===================================================================== */
/* ---- 1. DIE SEITE BEKOMMT EIGENE LUFT UND EIGENES LICHT -------------
„schieb das bisschen hoeher bitte, weil das ist unten zu nah am
rand." Die Tafeln endeten genau auf der Bildkante. 14 px Polsterung
unten -- die Hoehe ist `calc(100dvh - …)` mit `border-box`, die
Polsterung geht also nach INNEN und macht die Seite nicht laenger.
Sonst waere das Schreibfeld wieder unter den Rand gerutscht, und
genau darum ging es am 09.09. schon einmal. */
.inhalt.chat-seite {
padding-bottom: 14px;
position: relative;
isolation: isolate;
/* ==== DIE LEITFARBE WIRD AUSGETAUSCHT -- AN EINER STELLE =========
Im ersten Anlauf habe ich zehn Stellen einzeln umgefaerbt und dann
im Bild gesehen, dass Suchfeld, „Neu"-Knopf, Zaehler und
Fokusrahmen weiter golden waren. Kein Wunder: Sie nehmen alle
`--akzent` und `--rand`, und die stehen im Haus. Wer den Stil
aendern will, aendert die Variable, nicht zwanzig Regeln -- sonst
findet man immer noch eine einundzwanzigste.
NUR AUF DIESER SEITE. Die Variablen stehen am `<main>`, nicht am
`:root`: Uebersicht, Kalender und Aufgaben behalten ihr Gold. Der
Chat ist das, was nicht mehr wiederzuerkennen sein soll -- nicht
das ganze Haus.
WARUM #b9a7ff UND NICHT DAS SATTE #7a5cff: Die Akzentfarbe ist
hier nicht nur Zierde, sie ist auch FLAECHE unter dunkler Schrift
(die Ungelesen-Marke traegt #0b0f16 darauf). Nachgerechnet:
#7a5cff kommt dort auf 3,7:1 -- zu wenig fuer kleine Schrift.
#b9a7ff kommt auf 8,9:1 und traegt umgekehrt als SCHRIFT auf dem
dunklen Grund genauso. Eine Leitfarbe, die nur an einer von zwei
Stellen funktioniert, ist keine.
`--rand` WIRD NEUTRAL, nicht violett: Ein farbiger Rahmen an
jedem Feld waere laut. Die Farbe soll dort stehen, wo etwas
passiert -- nicht ueberall. */
--akzent: #b9a7ff;
--rand: rgba(255, 255, 255, .07);
--rand-hell: rgba(255, 255, 255, .15);
}
/* DREI LICHTER STATT EINES PUNKTRASTERS. Sie liegen HINTER den Tafeln
(z-index -1) und ueber dem Buehnenbild: Der Chat bekommt damit eine
eigene Stimmung, ohne dass eine andere Seite im Haus sich aendert.
Violett oben links, Tuerkis unten rechts, ein warmer Rest in der
Mitte -- zusammen keine sieben Prozent Deckung. */
.inhalt.chat-seite::before {
content: ""; position: absolute; inset: -10% -6% 0;
pointer-events: none; z-index: -1;
background:
radial-gradient(48% 42% at 14% 6%, rgba(122, 92, 255, .16), transparent 68%),
radial-gradient(52% 46% at 88% 92%, rgba(38, 200, 196, .12), transparent 70%),
radial-gradient(40% 34% at 62% 44%, rgba(255, 176, 92, .06), transparent 72%);
filter: blur(18px);
}
/* ---- 2. DER RAHMEN VON MODULE.CSS WIRD ABGELEGT -------------------- */
.inhalt.chat-seite .chat {
clip-path: none;
border-radius: 0;
box-shadow: none;
filter: none;
}
/* Kantenlicht, Punktraster und die drei goldenen Eckwinkel -- beide
Pseudoelemente kommen aus module.css und werden hier stillgelegt.
`content: none` und nicht `display: none`: Das Element entsteht dann
gar nicht erst, statt erzeugt und versteckt zu werden. */
.inhalt.chat-seite .chat::before,
.inhalt.chat-seite .chat::after { content: none; }
/* ---- 3. DIE TAFELN WERDEN KOERPER ---------------------------------- */
.inhalt.chat-seite .chat__spalte {
clip-path: none;
border: 0;
border-radius: 26px;
background:
linear-gradient(180deg, rgba(255, 255, 255, .055) 0%, transparent 18%),
linear-gradient(168deg, rgba(20, 24, 42, .82) 0%, rgba(8, 10, 18, .9) 100%);
backdrop-filter: blur(26px) saturate(135%);
-webkit-backdrop-filter: blur(26px) saturate(135%);
/* KEIN RAHMEN, SONDERN LICHT UND TIEFE. Ein 1-px-Strich zeichnet
einen Kasten; eine Lichtkante oben und ein weiter, farbiger
Schatten zeichnen einen KOERPER. Der Schatten traegt einen Hauch
Violett -- reines Schwarz wirkt auf einem farbigen Grund wie ein
Loch. */
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .1),
inset 0 0 0 1px rgba(255, 255, 255, .035),
0 2px 6px -3px rgba(0, 0, 0, .7),
0 44px 90px -46px rgba(10, 6, 30, .98);
overflow: hidden;
}
/* Die Leuchtschiene an der Liste wird ein SAUM oben statt eines
Striches links: Sie sagt jetzt „hier faengt der Koerper an" und
nicht mehr „hier ist eine Kante". */
.inhalt.chat-seite .chat__spalte--liste::after {
left: 0; right: 0; top: 0; bottom: auto;
width: auto; height: 2px;
border-radius: 0;
background: linear-gradient(90deg,
rgba(122, 92, 255, .85) 0%,
rgba(38, 200, 196, .7) 52%,
transparent 100%);
box-shadow: 0 0 18px -2px rgba(122, 92, 255, .6);
}
/* Und der Verlauf bekommt denselben Saum, nur andersherum gelesen --
zwei Koerper, ein Licht. */
.inhalt.chat-seite .chat__spalte--verlauf { position: relative; }
.inhalt.chat-seite .chat__spalte--verlauf::after {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
border-radius: 0; pointer-events: none; z-index: 3;
background: linear-gradient(270deg,
rgba(38, 200, 196, .8) 0%,
rgba(122, 92, 255, .6) 55%,
transparent 100%);
box-shadow: 0 0 18px -2px rgba(38, 200, 196, .5);
}
/* ---- 4. DIE KOEPFE WERDEN BAENDER, KEINE LEISTEN ------------------- */
.inhalt.chat-seite .chat__kopf {
padding: 18px 18px 16px;
background: linear-gradient(180deg,
rgba(122, 92, 255, .12) 0%, rgba(255, 255, 255, .01) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .07),
0 18px 26px -26px rgba(0, 0, 0, .95);
}
.inhalt.chat-seite .chat__titel {
font-size: 1.34rem; font-weight: 800; letter-spacing: -.022em;
}
/* ---- 5. DIE REGISTERLEISTE: PILLEN STATT MULDE --------------------- */
/* Die Mulde war die Form des alten Stils -- eingesenkt, mit Kante.
Jetzt liegen die drei frei nebeneinander, und das gewaehlte Fach ist
das einzige mit Flaeche. Weniger Linien, mehr Aussage. */
.inhalt.chat-seite .chat-arten {
gap: 6px; padding: 0; margin: 14px 14px 0;
border: 0; border-radius: 0;
background: none; box-shadow: none;
}
.inhalt.chat-seite .chat-art {
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .06);
background: rgba(255, 255, 255, .025);
}
.inhalt.chat-seite .chat-art[aria-selected="true"] {
border-color: transparent;
color: #0b0a18;
background: linear-gradient(140deg, #b9a7ff 0%, #7a5cff 55%, #5b8cff 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .45),
0 8px 20px -10px rgba(122, 92, 255, .8);
}
/* Der Saum unter dem Reiter gehoerte zur Mappe -- die gibt es nicht
mehr. */
.inhalt.chat-seite .chat-art[aria-selected="true"]::after { content: none; }
.inhalt.chat-seite .chat-art[aria-selected="true"] .chat-art__zahl { opacity: .75; }
.inhalt.chat-seite .chat-art[aria-selected="true"] .chat-art__at { color: #1a1030; text-shadow: none; }
/* ---- 6. DIE SUCHE ------------------------------------------------- */
.inhalt.chat-seite .chat__suche input {
border-radius: 999px;
border-color: rgba(255, 255, 255, .06);
background: rgba(0, 0, 0, .3);
box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, .9);
}
/* ---- 7. DIE ZEILEN ------------------------------------------------- */
/* Die Zeile ist jetzt ein Raster: links das Gespraech, rechts die
Nadel. Ohne diese Regel stuende die Nadel unter der Zeile -- ein
<li> ist von sich aus ein Block. */
/* DIE KARTE IST DIE ZEILE, NICHT DER KNOPF DARIN (25.09.2026).
Der erste Anlauf liess die Flaeche am Knopf und haengte die Nadel
daneben -- im Bild sass sie dann sichtbar AUSSERHALB der Karte, wie
ein Knopf, der danebengefallen ist. Die Karte muss beides umfassen,
sonst gehoert die Nadel nicht zur Zeile.
Also traegt jetzt das <li> die Flaeche, und der Knopf darin ist
durchsichtig. Die Farbkante des offenen Gespraechs bleibt am Knopf:
Sie markiert, WO das Gespraech anfaengt, und das ist der Knopf. */
.inhalt.chat-seite .chat-raum {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 0;
padding-right: 2px;
border-radius: 20px;
transition: background-color .18s ease, box-shadow .18s ease;
}
.inhalt.chat-seite .chat-raum:hover {
background: rgba(255, 255, 255, .055);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.inhalt.chat-seite .chat-raum__knopf {
border: 0;
border-radius: 20px 0 0 20px;
padding: 12px 6px 12px 12px;
background: none;
box-shadow: none;
transform: none;
}
.inhalt.chat-seite .chat-raum__knopf:hover {
background: none;
box-shadow: none;
transform: none;
}
/* Das offene Gespraech traegt Farbe statt eines Rahmens -- an der
ganzen Zeile, damit die Nadel mit auf der Flaeche sitzt. */
.inhalt.chat-seite .chat-raum[data-offen="ja"] {
background: linear-gradient(100deg,
rgba(122, 92, 255, .28) 0%, rgba(122, 92, 255, .08) 62%, rgba(255, 255, 255, .02));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .12),
0 10px 24px -16px rgba(122, 92, 255, .9);
}
.inhalt.chat-seite .chat-raum[data-neu="ja"] .chat-raum__knopf {
background: none;
border-color: transparent;
}
.inhalt.chat-seite .chat-raum[data-neu="ja"]:not([data-offen="ja"]) {
background: rgba(255, 255, 255, .045);
}
.inhalt.chat-seite .chat-raum[data-offen="ja"] .chat-raum__knopf::before {
top: 14px; bottom: 14px; left: 0; width: 3px; border-radius: 3px;
background: linear-gradient(180deg, #d9cfff, #7a5cff);
box-shadow: 0 0 14px -1px rgba(122, 92, 255, .9);
}
/* Das Zeichen wird ein abgerundetes Quadrat -- der auffaelligste
Einzelgriff in der Liste. Runde Kreise hat jedes Programm; ein
„Squircle" liest sich als App-Symbol und gehoert zu den grossen
Radien ringsum. */
.inhalt.chat-seite .chat-raum__zeichen {
width: 44px; height: 44px;
border-radius: 15px;
border: 0;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .22),
inset 0 0 0 1px rgba(255, 255, 255, .07),
0 8px 18px -10px rgba(0, 0, 0, .9);
}
.inhalt.chat-seite .chat-raum__zeichen img { border-radius: 15px; }
.inhalt.chat-seite .chat-raum__zeichen[data-gruppe="ja"] { border-radius: 15px; }
/* ---- 8. DIE NADEL -------------------------------------------------- */
/* Sie steht immer da -- am Handy gibt es kein Ueberfahren, und eine
Spalte, die mal da ist und mal nicht, laesst die Namen daneben
wandern (dieselbe Ueberlegung wie bei `.chat-raum__rail`).
36 x 44: schmal genug, dass sie der Liste keinen Namen wegnimmt,
und hoch genug fuer die 44-px-Hausregel. Die Trefferflaeche ist
groesser als das Zeichen darin -- gewachsen ist die Flaeche, nicht
das Bild. */
.inhalt.chat-seite .chat-raum__pin {
flex: none;
width: 36px; height: 44px;
display: grid; place-items: center;
border: 0; border-radius: 14px;
background: none;
color: var(--text-still);
cursor: pointer;
opacity: .34;
transition: opacity .16s ease, color .16s ease, background-color .16s ease;
}
.inhalt.chat-seite .chat-raum__pin::before {
content: ""; width: 15px; height: 15px;
background: currentColor;
-webkit-mask: var(--nadel) center / 15px 15px no-repeat;
mask: var(--nadel) center / 15px 15px no-repeat;
--nadel: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 3.6h6'/><path d='M10.6 3.6v5.6L7.4 14.2h9.2L13.4 9.2V3.6'/><path d='M12 14.2v6.2'/></svg>");
}
.chat-raum:hover .chat-raum__pin,
.inhalt.chat-seite .chat-raum__pin:hover { opacity: .8; color: var(--text); }
.inhalt.chat-seite .chat-raum__pin:focus-visible {
opacity: 1; outline: 2px solid var(--akzent); outline-offset: -3px;
}
/* ANGEHEFTET: die Nadel steht aufrecht und traegt Farbe. Gedreht wird
sie um 35 Grad, wenn sie NICHT gesetzt ist -- so wie eine Nadel
liegt, die man noch nicht gesteckt hat. Das ist der Unterschied,
den man ohne Farbe sieht. */
.inhalt.chat-seite .chat-raum__pin[aria-pressed="false"]::before { transform: rotate(-38deg); }
.inhalt.chat-seite .chat-raum__pin[aria-pressed="true"] {
opacity: 1;
color: #cfc2ff;
background: rgba(122, 92, 255, .18);
}
/* Eine angeheftete Zeile bekommt einen leisen Schimmer -- sonst sieht
man oben in der Liste nicht, WARUM sie oben steht. Nur wenn sie
nicht ohnehin offen ist: zwei Flaechen uebereinander waeren eine
Farbe, die niemand mehr zuordnen kann. */
.inhalt.chat-seite .chat-raum[data-fixiert="ja"]:not([data-offen="ja"]) {
background: linear-gradient(100deg,
rgba(122, 92, 255, .11) 0%, rgba(255, 255, 255, .012) 70%);
}
@media (prefers-reduced-motion: reduce) {
.inhalt.chat-seite .chat-raum__pin { transition: none; }
}
/* ---- 9. DIE BLASEN ------------------------------------------------- */
/* DIE FLAECHE UND DIE SCHRIFT BLEIBEN, WIE SIE SIND. `--blasengrund`,
`--blase-text`, `--blase-leise` und `--namen-anteil` stehen weiter
oben und sind von pruef-chatkachel und pruef-chat-neu nachgerechnet
-- 360 Ringtoene und zwoelf Kacheln. Wer sie hier anfasst, hebt
diese Zusage auf. Geaendert wird die FORM. */
.inhalt.chat-seite .chat-nachricht__blase {
border: 0;
border-radius: 24px 24px 24px 8px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .1),
inset 0 0 0 1px color-mix(in srgb, var(--ton, var(--kachel-standard)) 16%, rgba(255, 255, 255, .05)),
0 18px 40px -26px rgba(6, 4, 20, .95),
0 0 40px -22px color-mix(in srgb, var(--ton, var(--kachel-standard)) 60%, transparent);
}
.inhalt.chat-seite .chat-nachricht[data-selbst="ja"] .chat-nachricht__blase {
border-radius: 24px 24px 8px 24px;
}
/* EINE GESCHEITERTE NACHRICHT BLEIBT SICHTBAR ANDERS (25.09.2026).
Der neue Stil nimmt allen Blasen den Rahmen -- und damit versehentlich
auch den, mit dem eine nicht abgeschickte Nachricht markiert ist.
pruef-chat-optik hat es sofort gemeldet: „der Unterschied ist auch zu
SEHEN, nicht nur im Merkmal (Rand 0px)". Genau dafuer ist die Zeile
dort: Ein Merkmal im HTML, das man nicht sieht, hilft niemandem.
Der Warnton sitzt jetzt im inneren Saum statt im Rahmen -- dieselbe
Aussage, dieselbe Staerke, nur in der Sprache des neuen Stils. Der
Rahmen bleibt trotzdem stehen, weil die Pruefung ihn misst und weil
er im Kontrastmodus das Einzige ist, was traegt. */
.inhalt.chat-seite .chat-nachricht[data-gescheitert="ja"] .chat-nachricht__blase {
border: 1px solid color-mix(in srgb, var(--warn) 62%, transparent);
background: color-mix(in srgb, var(--warn) 11%, transparent);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .1),
inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent),
0 18px 40px -26px rgba(6, 4, 20, .95),
0 0 40px -20px color-mix(in srgb, var(--warn) 70%, transparent);
}
.inhalt.chat-seite .chat-nachricht[data-folge="ja"] .chat-nachricht__blase { border-radius: 24px; }
/* Aus dem Strich wird eine Kapsel -- sie sitzt jetzt INNEN und hat
runde Enden, passend zu den grossen Radien ringsum. */
.inhalt.chat-seite .chat-nachricht__blase::before {
left: 5px; top: 14px; bottom: 14px; width: 3px;
border-radius: 3px;
}
.inhalt.chat-seite .chat-nachricht[data-selbst="ja"] .chat-nachricht__blase::before {
left: auto; right: 5px; border-radius: 3px;
}
.inhalt.chat-seite .chat-nachricht__zeichen {
border-radius: 12px;
border: 0;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .2),
0 6px 14px -8px rgba(0, 0, 0, .9);
}
/* Der Tagestrenner: aus der Linie mit Plakette wird eine schwebende
Kapsel ohne Linien. */
.inhalt.chat-seite .chat-tag::before,
.inhalt.chat-seite .chat-tag::after { content: none; }
.inhalt.chat-seite .chat-tag__text {
border-radius: 999px;
padding: 5px 14px;
border: 0;
background: rgba(122, 92, 255, .16);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
/* ---- 10. DIE KONSOLE ----------------------------------------------- */
/* KEINE MASSZAHL ANGEFASST. Breite, Hoehe, Polsterung und Abstaende
bleiben, wie sie sind -- die Zeile ist seit dem 23.09.2026 auf den
Pixel voll, und sechs Pixel haben dort schon einmal gereicht, um
„Senden" auf eine eigene Zeile zu schieben. Geaendert wird nur, was
nichts misst. */
.inhalt.chat-seite .chat__eingabe {
background: linear-gradient(180deg,
rgba(16, 14, 34, .72) 0%, rgba(7, 8, 16, .9) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .08),
0 -22px 34px -30px rgba(0, 0, 0, .95);
}
.inhalt.chat-seite .chat__eingabe textarea { border-radius: 18px; }
.inhalt.chat-seite .chat__senden {
border-radius: 16px;
border-color: transparent;
color: #0b0a18;
background: linear-gradient(140deg, #b9a7ff 0%, #7a5cff 58%, #5b8cff 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .45),
0 12px 26px -12px rgba(122, 92, 255, .85);
}
.inhalt.chat-seite .chat__senden:hover {
background: linear-gradient(140deg, #cabcff 0%, #8b70ff 58%, #6f9bff 100%);
border-color: transparent;
color: #07060f;
}
.inhalt.chat-seite .chat__eingabe :is(.chat__anhang, .chat__ton, .chat__gif, .chat__emoji) {
border-radius: 14px;
border-color: rgba(255, 255, 255, .05);
}
.inhalt.chat-seite .chat__eingabe .textform__knopf { border-radius: 12px; }
/* ---- 11. DIE KNOPFGRUPPE IM KOPF ----------------------------------- */
.inhalt.chat-seite .chat__kopf-knoepfe {
border-radius: 999px;
background: rgba(0, 0, 0, .28);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.inhalt.chat-seite .chat__weg,
.inhalt.chat-seite .chat__zurueck { border-radius: 999px; }
/* ---- 12. AUF DEM HANDY ---------------------------------------------
Die Radien wachsen mit der Flaeche, nicht mit dem Geraet: Auf 412 px
ist eine Tafel 380 px breit, und 26 px Rundung nehmen dort spuerbar
mehr Inhalt weg als auf 1440. 20 px sind dieselbe Sprache, nur
massstabsgerecht. */
@media (max-width: 760px) {
.inhalt.chat-seite .chat__spalte { border-radius: 20px; }
.inhalt.chat-seite .chat-raum__pin { width: 34px; }
}
/* =====================================================================
AUF DEM HANDY RUECKT ALLES ENGER (25.09.2026)