:root { --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* ── DAS BEWEGUNGSVOKABULAR (23.09.2026) ────────────────────────────── Marco: „butterweich". Vorher standen hier zwoelf verschiedene Dauern (.14 bis .35 s) und vier Kurven — jede fuer sich vertretbar, zusammen nicht aus einem Guss. Jetzt DREI Dauern und EINE Kurve fuers Ankommen: kurz — Rueckmeldung auf Hover, Fokus, Farbe; man soll sie kaum sehen mittel — ein Element tritt auf oder schaltet um lang — etwas bewegt sich ueber eine Strecke (Karten, Nachruecken) Die Ankunftskurve startet schnell und setzt weich auf: sie antwortet sofort und kommt trotzdem ruhig an. `ease`/`ease-in` bleiben, wo etwas geht oder nur die Farbe wechselt. `hud.js` liest dieselben Werte (`bewegung()`), statt eigene zu fuehren. NICHT HIER: die Choreografien — Systemstart (`boot-*`, `kern-hoch`, `.boot.geht`, von `BOOT_*` in hud.js getaktet), Diagrammaufbau (`dia-*`) und Pulse. Ihre Werte sind aufeinander abgestimmte Takte; ein Token daraus verschoebe die Takte gegeneinander. */ --dauer-kurz: 160ms; --dauer: 240ms; --dauer-lang: 360ms; --kurve-raus: cubic-bezier(.22, 1, .36, 1); } /* Der Wechsel Hell/Dunkel als Ueberblendung (`startViewTransition` in hud.js). Lang und weich: es aendert sich JEDE Flaeche zugleich, und ein schneller Schnitt liest sich dabei wie ein Blitz. */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dauer-lang); animation-timing-function: ease; } /* ══ FARBTHEMEN ═══════════════════════════════════════════════════════════ Zwei Themes, gesteuert über Klasse am . Die bisherigen Werte sind das Dark-Theme; sie bleiben Default, wenn JavaScript nicht läuft oder noch nicht umgeschaltet hat. */ :root, html[data-herold-theme="dark"] { --grund: #0a0a0b; --flaeche: #141416; --rand: #2a2a2e; --text: #fafafa; --text-leise: #a1a1aa; --akzent: #3b82f6; --hoert: #60a5fa; --denkt: #f59e0b; --fehler: #f87171; --schimmer-akzent: rgba(59, 130, 246, .08); --schimmer-akzent-stark: rgba(59, 130, 246, .07); --schatten: rgba(0, 0, 0, .45); --schatten-stark: rgba(0, 0, 0, .55); --dialog-hintergrund: rgba(10, 10, 11, .92); --boot-scanlinien: rgba(250, 250, 250, .03); --flaeche-92: rgba(20, 20, 22, .92); --text-alpha-schwach: rgba(250, 250, 250, .06); --akzent-alpha: rgba(59, 130, 246, .12); --hoert-alpha: rgba(96, 165, 250, .12); --fehler-alpha: rgba(248, 113, 113, .14); /* Das getoente Gegenstueck zu `--denkt`. Es gab bisher nur den Vollton; das Kopfband der Karte braucht die Flaeche dazu (siehe `.widget[data-rang]`). */ --denkt-alpha: rgba(245, 158, 11, .14); --hoert-glow: rgba(96, 165, 250, .45); --akzent-glow: rgba(59, 130, 246, .45); --akzent-glow-schwach: rgba(59, 130, 246, .25); } html[data-herold-theme="light"] { --grund: #fafafa; --flaeche: #ffffff; --rand: #e4e4e7; --text: #09090b; --text-leise: #52525b; --akzent: #2563eb; --hoert: #3b82f6; --denkt: #d97706; --fehler: #dc2626; --schimmer-akzent: rgba(37, 99, 235, .10); --schimmer-akzent-stark: rgba(37, 99, 235, .08); --schatten: rgba(0, 0, 0, .10); --schatten-stark: rgba(0, 0, 0, .15); --dialog-hintergrund: rgba(250, 250, 250, .96); --boot-scanlinien: rgba(9, 9, 11, .03); --flaeche-92: rgba(255, 255, 255, .92); --text-alpha-schwach: rgba(9, 9, 11, .06); --akzent-alpha: rgba(37, 99, 235, .12); --hoert-alpha: rgba(59, 130, 246, .12); --fehler-alpha: rgba(220, 38, 38, .14); --denkt-alpha: rgba(217, 119, 6, .14); --hoert-glow: rgba(59, 130, 246, .45); --akzent-glow: rgba(37, 99, 235, .45); --akzent-glow-schwach: rgba(37, 99, 235, .25); } /* Umgelegt wird der Schalter in hud.js (`kugelAusweichen`), sobald das erste Fenster da ist und wenn das letzte gegangen ist. */ * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { background: radial-gradient(ellipse at 50% 40%, var(--flaeche) 0%, var(--grund) 60%); color: var(--text); font-family: var(--schrift); overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; display: grid; grid-template-rows: auto 1fr auto; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } .kopf { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; font-size: 13px; color: var(--text-leise); letter-spacing: .04em; text-transform: uppercase; } .kopf-links { display: flex; align-items: center; gap: 10px; } .kopf-rechts { display: flex; align-items: center; gap: 8px; } .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--fehler); box-shadow: 0 0 8px var(--fehler); transition: background var(--dauer-lang), box-shadow var(--dauer-lang); } .punkt.an { background: var(--akzent); box-shadow: 0 0 8px var(--akzent); } #uhr { font-variant-numeric: tabular-nums; } /* DIE BUEHNE HAT DREI SPALTEN, UND DIE MITTLERE IST DIE MITTE. Bis zum 18.09.2026 stand hier `1fr minmax(0, 380px)` — die Fenster als feste Leiste NEBEN der Kugel. Das verschob die obere Haelfte gegen die untere (gemessen bei 1440 px: Kugel bei x=522, Eingabefeld bei x=720, also 198 px Versatz). Danach schwebten sie DARUEBER, dann lagen sie als Zeile DARUNTER — und seit dem 22.09.2026 stehen sie wieder daneben, rechts. Marco: „Analog zur Themenliste, die jetzt links neben dem Avatar liegt, sollen Widgets rechts neben Avatar und Antworttext erscheinen." DER FEHLER VON DAMALS WAR NICHT DIE SPALTE, SONDERN IHRE EINSEITIGKEIT. Das Mikrofon im Fuss ist ueber die VOLLE Breite zentriert; nimmt nur die rechte Seite Platz weg, wandert die Kugel nach links und die Achse kippt. Also reserviert die LINKE Seite dieselbe Breite noch einmal — eine Phantomgasse, die nichts traegt und genau deshalb alles haelt. Sie ist ohnehin der Platz, in dem Schlange und Themenliste `fixed` liegen: die beiden bekommen damit nebenbei den Rand, den sie sich bisher mit dem Antwortsatz teilen mussten. Ohne offenes Fenster ist die Gasse 0 — dann steht hier exakt das Bild von vorher, eine Spalte ueber die volle Breite. */ /* `body.fenster-offen` setzt `hud.js` (`kugelSchrumpfen`), sobald das erste Fenster da ist. Die Variable `--fensterspalte` dahinter ist mit dem Umbau vom 22.09.2026 entfallen: die Gassen sind jetzt fest und gleich breit (`--randspalte`), die Karten stehen in der Mitte. Die Klasse selbst bleibt — auf dem Telefon entscheidet sie weiter, ob der Avatar Hoehe abgibt. */ /* DIE RAENDER SIND FEST UND GLEICH BREIT — AUCH LEER. Marcos zweite Invariante: „Eine Form, die mit dem Inhalt wechselt, gewoehnt sich niemand an. 'Nichts offen' ist eine Auskunft — sie sagt, dass nachgesehen wurde." Deshalb EINE Zahl fuer beide Gassen und keine, die mit dem Inhalt kommt und geht: links die Themen, rechts die Schlange. Und weil sie gleich breit sind, sitzt das Mikrofon im Fuss ohne Phantomgasse genau in der Mitte — die Rechnung, die frueher zweimal aufgetragen werden musste, faellt damit weg. */ :root { --randspalte: 246px; } .buehne { display: grid; padding: 0 20px; min-height: 0; grid-template-columns: var(--randspalte) minmax(0, 1fr) var(--randspalte); } /* DIE MITTE GEHOERT DEN KARTEN, DAS GESPROCHENE LAEUFT ALS BAND DARUNTER. Marco am 22.09.2026, gemessen bei 1600x900: „Die Mitte nimmt 848x360 px in grosser Schrift fuer EINEN Satz, der in zwei Minuten weg ist; die Fensterspalte ist 356 px breit; die Themenliste 210 px bei Deckkraft 0,55. Das Fluechtige hat die Buehne, das Bleibende fluestert." ZWEI ZEILEN STATT DREI, UND DIE OBERE IST DIE GROSSE: oben die Karten (`minmax(0, 1fr)`, alles, was da ist), darunter das Band mit Avatar und Antwortsatz (`auto`, so hoch wie sein Inhalt). Die Leserichtung von oben nach unten IST damit die Rangfolge — was vorliegt, dann was gerade gesagt wird, dann mein Mikrofon im Fuss. DIE DRITTE ZEILE VON VORGESTERN FAELLT WEG. Sie war die untere Luft, die die Mitte senkrecht zentriert hat; ein Band, das unten steht, braucht sie nicht. `minmax(0, 1fr)` und nicht `1fr`: Letzteres ist `minmax(auto, 1fr)` und waechst ueber seinen Anteil hinaus, sobald der Inhalt hoeher ist — dann schoebe eine volle Kartenbahn das Band aus dem Bild. EIN HORIZONT (Invariante 1): alle drei Zonen der oberen Zeile stehen im SELBEN Raster — Themen, Karten und die laufende Arbeit sind Rasterzellen und richten sich an der Buehne aus, nicht am Sichtfeld. */ .buehne { grid-template-rows: minmax(0, 1fr) auto; } .fensterzeile { grid-column: 1 / 4; grid-row: 1; min-height: 0; } /* DIE BAHN STEHT SYMMETRISCH ZUR ACHSE (24.09.2026). Sie lag auf Spalte 1-2 und damit um eine halbe Gasse links der Mitte — gemessen 99 px bei 1113 px Fensterbreite. Marco: „wenn es nur eins gibt, dann ist das halt in der Mitte." Kugel, Band und Mikrofon stehen auf der Achse; die Karten jetzt auch. Steht die Schlange in der rechten Gasse, gibt die Bahn BEIDE Gassen ab und nicht nur die eine — sonst rutschte ihre Mitte wieder zur Seite. Erst ab 901 px: darunter blendet `.schlange` per CSS aus (ohne `hidden`), und ab 820 abwaerts ist die Buehne eine Spalte ohne Gassen. */ @media (min-width: 901px) { .buehne:has(.schlange:not([hidden])) .fensterzeile { grid-column: 2; } } /* DIE LINKE GASSE GEHOERT SEIT DEM 23.09.2026 DER BAHN. Dort stand die Themenliste; die gibt es nicht mehr, jedes offene Thema ist eine Karte. Die Gasse selbst bleibt (`--randspalte`) — sie haelt das Mikrofon im Fuss und den Antwortsatz auf der Mittelachse —, nur traegt sie jetzt Karten. */ .mitte { grid-column: 2; grid-row: 2; } .laeuft-gerade { grid-column: 3; grid-row: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; align-self: center; padding-left: 16px; max-height: 100%; overflow: hidden; } /* DIE KUGEL WEICHT AUS, STATT SICH VERDECKEN ZU LASSEN. Die Fenster schweben (`position: fixed`) und reservieren keine Breite — die Kugel blieb deshalb exakt mittig und lag bei engem Browserfenster unter dem ersten Fenster (gemessen bei 900x900: 158 px Kugel unter dem Fenster, bei 1100x800 noch 30 px). Jetzt gibt `.mitte` die Fensterspalte als Polsterung ab; der Flex-Algorithmus zentriert Kugel UND Dialogzeilen in der Restflaeche und schiebt damit beides nach links. Polsterung und nicht `transform: translateX()`: ein starrer Versatz haette bei 900 px Breite die linke Kante des 720 px breiten Dialogblocks auf -116 px geschoben, also aus dem Bild. Neu zentrieren kann nicht ueberstehen. */ .mitte { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 0; padding-bottom: 2px; } /* DIE KUGEL IST DAS ELEMENT, DAS PLATZ ABGIBT. Bis zum 18.09.2026 stand hier nichts weiter als `height: auto` — und weil `flex-shrink` in `.mitte` auf dem Standardwert 1 steht, hat der Flex-Algorithmus Kugel UND Dialogblock gemeinsam zusammengedrückt. Der Dialog hatte aber nur ein `min-height` als Boden, keinen reservierten Platz: gemessen bei 1280×720 wurde er auf 88 px gestaucht, obwohl sein Inhalt 115 px brauchte, und der Überstand wurde bei `overflow: visible` quer über das Eingabefeld im Fuß gemalt. Jetzt schrumpft nur noch die Kugel. Sie verliert dabei nichts außer Durchmesser; der Text verliert Worte. Bemessen wird sie dabei über die HÖHE, nicht mehr über die Breite: in einer Flex-Spalte greift das Schrumpfen an der Höhe an: bliebe die Breite gesetzt, würde die Fläche beim Schrumpfen verzerrt. So folgt die Breite über `aspect-ratio` der Höhe und das Seitenverhältnis bleibt in jeder Größe dasselbe. DER MITTLERE DECKEL MISST DIE MITTE, NICHT DEN SCHIRM. `32vw` sind 80 % der vollen Breite — sobald rechts die Fensterspalte steht und links ihre Phantomgasse, ist die volle Breite aber nicht mehr das, was die Kugel hat. Also `(100vw - 40px Buehnenpolster - 2x Fensterspalte) * .32`: dieselben 80 % der Restflaeche. Ohne Fenster ist die Gasse 0 und es stehen wieder 32vw da. Wer das weglaesst, schiebt die 5:2-Flaeche bei 1100 px seitlich aus ihrer Spalte — gemessen 550 px Kugel in 456 px Mitte. SEIT DEN SOUNDLINIEN IST DIE FLAECHE EIN BAND (5:2) UND KEIN QUADRAT. Eine Tonkurve in einem Quadrat laesst oben und unten je ein Drittel leer und wirkt trotzdem gedraengt. Der Hoehen-Deckel faellt dabei von 56vh auf 26vh, WEIL die Breite ueber `aspect-ratio` daran haengt: 26vh mal 2,5 sind dieselben 65vh Diagonale wie vorher, aber quer. Und `32vw` statt `80vw` haelt die alte Regel "hoechstens 80 % der Breite" ein — 32 mal 2,5 sind 80. Wer hier die Hoehe anhebt, ohne den vw-Deckel mitzuziehen, schiebt die Linien seitlich aus dem Bild. */ /* DER AVATAR IST DAS LEBENSZEICHEN, NICHT DER INHALT (Marco, 22.09.2026). Er stand bei 550x220 px mitten auf der Buehne und war damit das groesste Element eines Schirms, auf dem er am wenigsten zu sagen hat: er zeigt, DASS Herold da ist, nicht WORUM es geht. Als schmale Linie ueber dem Band sagt er dasselbe und nimmt den Karten nichts weg. `aspect-ratio` faellt dabei: bei 44 px Hoehe waere die Linie ueber 5:2 noch 110 px breit — eine Briefkarte statt einer Tonspur. Die Breite folgt jetzt dem Band darunter, gedeckelt wie es. */ #kern { height: 44px; width: min(440px, 100%); display: block; flex: none; /* DER AVATAR DARF DAS BAND NICHT UEBERDECKEN, AUCH NICHT HALB — er ist das Lebenszeichen, der Satz ist der Inhalt. Beide stehen im Fluss, koennen sich also nicht ueberlagern; der reservierte Abstand steht am Band (`.gespraech`, margin-top) und nicht hier, damit er auch dann gilt, wenn die Welle aus dem Bild genommen wird (`body.verlauf-offen`). */ } /* DIE KUGEL GIBT AUF DEM GROSSEN SCHIRM NICHTS MEHR AB. Hier stand `height: min(14vh, 120px)`, damit die Fenster weiter oben beginnen. Gemessen war das unnoetig: die Fensterzeile passt in die Luft unter dem Text, ohne dass jemand Platz abgibt (siehe `.buehne`). Die Kugel schrumpfte also um 100 px fuer nichts — und sie IST die Anzeige, an der man sieht, was Herold gerade tut. Auf dem Telefon bleibt das Schrumpfen: dort stehen die Fenster untereinander im Fluss und brauchen die Hoehe wirklich (820-px-Query). */ /* `flex: none` ist der eigentliche Fix: der Dialogblock nimmt sich die Höhe, die sein Inhalt braucht, statt sie sich zuteilen zu lassen. `min-height` bleibt — es hält die Zeilen ruhig, solange noch nichts gesagt wurde, damit die Kugel nicht bei jedem Satz springt. `padding-bottom` entfiel mit dem Vorlese-Knopf; die Antwortzeile selbst ist klickbar. */ /* DAS BAND — ein Untertitel, kein Absatz. `min-height` faellt von 5,5em auf 0: die Hoehe hielt die Zeilen ruhig, solange die Kugel darueber bei jedem Satz sprang. Die Linie springt nicht mehr (feste 44 px), und ein Band, das leer 5,5 Zeilen hoch ist, schiebt die Karten grundlos nach oben. Breiter als vorher (960 statt 720): ein Untertitel darf lang und flach sein — er soll in EINER Zeile stehen, nicht in dreien. */ .gespraech { width: min(960px, 100%); text-align: center; margin: 14px 0 2px; min-height: 0; flex: none; position: relative; /* Spalte, damit der Lauf im aufgeklappten Zustand (siehe unten) den Platz nehmen kann, den die Kugel freigibt. Im Normalzustand aendert es nichts: das einzige Flex-Kind ist der Lauf, und der waechst nicht von selbst. */ display: flex; flex-direction: column; } /* DER LAUF — was gesagt wurde, von oben nach unten, und man kann zurück. Bis zum 19.09.2026 hielt die Bühne genau EINEN Zug: zwei Absätze, die der nächste Zug überschrieb. Der Verlauf lag dabei die ganze Zeit bereit — der Dienst schreibt ihn nach `verlauf.jsonl` und schickt ihn beim Verbinden mit — nur nahm das HUD daraus den letzten Nutzer- und den letzten Herold-Satz und warf den Rest weg. GEDECKELT WIRD JETZT DIE FLÄCHE, NICHT DER TEXT. Vorher trugen beide Zeilen eine `-webkit-line-clamp`, weil `.gespraech` sonst bis in den Fuß wachsen und sich über das Eingabefeld malen konnte. Die Klammer kostete aber genau das, was hier gebraucht wird: eine lange Antwort brach mit „…" ab, und das Abgeschnittene war weg. Ein Deckel plus `overflow-y: auto` hält den Fuß genauso frei und macht den Rest erreichbar, statt ihn wegzuschneiden. IM RUHEZUSTAND IST NUR DER LETZTE ZUG ZU SEHEN — sonst nichts. Die HOEHE des Laufs setzt deshalb `hud.js` auf die Hoehe des lebenden Paares; was darueber liegt, steht ueber der Kante und nicht halb im Bild. Ein fester Wert kann das nicht leisten: eine einzeilige Antwort und ein Absatz brauchen nicht dieselbe Flaeche, und wo die Flaeche zu gross ist, lugt der Verlauf hervor. DER DECKEL DARUEBER IST NICHT FREI GEWAEHLT: er ist genau das, was der alte geklammerte Block schon beanspruchen durfte — drei Nutzer-Zeilen (3 x 21 px plus 20 px Abstand) und vier Herold-Zeilen (4 x 26 px) sind 187 px. Damit kostet der Lauf die Kugel auch im schlimmsten Fall keinen Pixel, den eine lange Antwort sie vorher nicht auch gekostet hat (sie ist das Element mit `flex-shrink`, und gemessen bei 1440x900 stand sie vorher bei 324 px). Bei einem kurzen Zug bleibt sie groesser als vorher. KEIN BALKEN IM RUHEZUSTAND. Er zeigte etwas an, das gerade niemanden angeht, und verriet nebenbei, dass da oben noch etwas liegt — die Buehne soll ruhig aussehen, nicht nach Fenster. Gescrollt werden kann trotzdem: der Inhalt ragt hinaus, das Rad greift, und genau dieser erste Zug nach oben klappt den Verlauf auf (siehe unten). Erst dann gibt es einen Balken, und dann gehoert er auch hin. */ .lauf { /* DER DECKEL WAR 62 PX, UND DAS WAR ZU WENIG — Marco am 22.09.2026 mit Bild: „Und das hier sieht jetzt auch scheisse aus." Eine dreizeilige Antwort passte nicht mehr, und weil `laufAnpassen` die Hoehe des lebenden Paares als `height` setzt, schnitt der Deckel die OBERSTE Zeile waagerecht durch — direkt unter der Avatar-Welle, die 4 px darueber lag. Ein angeschnittener Satz ist schlimmer als ein gekuerzter. 124 px sind die Nutzerzeile samt ihrem Abstand und drei Herold-Zeilen. Damit bleibt es ein Band (vorher waren es 190), traegt aber die Antworten, die wirklich vorkommen. Was darueber hinausgeht, ROLLT weiter — das Rad greift, und der erste Zug nach oben klappt den Verlauf auf. */ /* DER DECKEL LAESST EINE GANZE ANTWORT DURCH. 124 px waren die Nutzerzeile plus DREI Herold-Zeilen. Marco am 23.09.2026 mit Bild: „Herold hat vier Zeilen gesagt, aber ich sehe nur drei" — die vierte stand halb angeschnitten da. Die Zahl stammte aus einer Zeit, in der das Band ein schmaler Streifen bleiben sollte; seit Marco am selben Tag gesagt hat, die Kugel duerfe fuer die Nachrichten nach oben gehen, ist der Platz nicht mehr knapp, sondern verhandelbar. 260 px tragen die Nutzerzeile und rund neun Antwortzeilen, und die Kugel gleitet mit (siehe die Hoehen-Transition weiter unten). Was darueber hinausgeht, rollt weiter — der Zug nach oben klappt dann den Verlauf auf. */ /* DER DECKEL IST DIE HAELFTE DER BUEHNE, NICHT EIN STREIFEN. Marco am 24.09.2026: „Es muss dynamisch Platz fuer mein Gesagtes und fuer sein eigenes machen, egal wie lang der Text ist." 30vh waren bei 860 px Fensterhoehe rund zwoelf Zeilen fuer BEIDE Saetze zusammen — ein langes Diktat plus Antwort rollte. Den Platz gibt die Kartenzeile darueber her (`minmax(0, 1fr)`), der Fuss mit dem Mikrofon bleibt frei. Ganz ohne Deckel schoebe ein sehr langer Satz den Fuss aus dem Bild. */ max-height: min(55vh, 520px); overflow-y: auto; /* Das Rad soll am Ende des Laufs nicht die Seite darunter mitnehmen. */ overscroll-behavior: contain; /* `position: relative`, damit `offsetTop` der Zeilen sich auf den Lauf bezieht — daran misst `hud.js` die Hoehe des lebenden Paares. */ position: relative; /* DIE RINNE STEHT IMMER, AUF BEIDEN SEITEN. Marco am 23.09.2026: „Es springt jetzt nur ein stück zur seite wegen dem scrollbalken." Zu ist die Rollleiste 0 px breit, aufgeklappt 6 — der zentrierte Text ruecke beim Oeffnen also um die halbe Leiste zur Seite. `both-edges` und nicht das blanke `stable`: reserviert wird sonst nur rechts, und der mittig gesetzte Satz sitzt dauerhaft 3 px links von der Mitte. Zwei Rinnen kosten zwoelf Pixel Breite und halten die Mitte. */ scrollbar-gutter: stable both-edges; /* `thin` UND NICHT `none`: bei `none` haette die Rinne nichts zu reservieren, und der Sprung waere zurueck. Unsichtbar wird sie ueber die FARBE — zu ist Griff wie Bahn durchsichtig, aufgeklappt bekommt der Griff seine Kontur. */ scrollbar-width: thin; scrollbar-color: transparent transparent; } /* DIE AUSBLEND-MASKE AM OBEREN RAND IST WEG (23.09.2026, "Nimm die Maske ganz raus"). Sie sollte sagen „da ist noch etwas", ohne eine Schnittkante zu zeigen — und war zweimal genau das Gegenteil: erst 24 px breit ueber der ganzen Nutzerzeile, dann 12 px ueber Herolds Antwort, die ohnehin schon gekuerzt war. Beide Male sah sie aus wie ein Defekt statt wie ein Hinweis. Was sie sagen sollte, sagt inzwischen etwas anderes: Herolds Satz steht ungekuerzt unten, Marcos leise darueber, und der Zug nach oben klappt den Verlauf auf. Ein Hinweis auf etwas, das man ohnehin findet, ist keiner. */ /* Aufgeklappt bekommt der Griff seine Kontur. Nur die FARBE aendert sich, nie die Breite — die Breite ist es, die den Text verschoebe. Bewusst ohne `::-webkit-scrollbar`: wo `scrollbar-width` gilt, ignoriert Chrome die Pseudo-Elemente, und zwei Fassungen derselben Leiste sind eine zu viel. */ body.verlauf-offen .lauf { scrollbar-color: var(--rand) transparent; } /* ══ DER SYSTEMSTART ══════════════════════════════════════════════════════ Ein Startprotokoll, wie es ein Terminal schreibt — aber in Herolds Haut: dieselbe Karte wie ein Fenster (`.widget`: Flaechenfarbe, --rand, 14 px Radius, `backdrop-filter`, derselbe Schatten), derselbe Kopf in --akzent und Versalien, dieselben Statusfarben. Neu ist nur, was ein Terminal ausmacht: Festbreitenschrift, ein Marker je Zeile, Zeichen fuer Zeichen getippt und ein blinkender Cursor darunter. WAS DASTEHT, IST GEMESSEN. Die Zeilen nennen die Werte aus dem `hallo` und die Einstellungen dieses Geraets. Ein Fortschrittsbalken waere hier eine Luege: das HUD ist fertig, sobald das `hallo` da ist. Die zwei Sekunden kaufen nichts ausser der Ansage — und genau deshalb raeumt jede Nutzeraktion und jeder Zug des Gehirns sie sofort weg (`bootAbbrechen` in hud.js). Er SCHWEBT (wie die Fenster, eine Ebene darunter) und liegt nicht mehr im Gespraechskasten. Im Fluss nahm er dem einzigen Element Platz weg, das in `.mitte` nachgibt: gemessen am 19.09.2026 schrumpfte die Kugel bei 820x640 auf 35 px. Schwebend kostet er keine Hoehe. */ .boot { position: fixed; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; padding: 20px; /* Dieselbe Spalte, die auch die Kugel abgibt — sonst laege die Karte bei engem Fenster unter dem ersten Fenster, und die Fenster sind das, was waehrend des Starts einlaeuft. Unter 821 px ist die Variable 0, dort stapeln die Fenster ohnehin unter der Kugel. */ padding-right: 20px; pointer-events: none; } .boot.geht { opacity: 0; transform: scale(.985); transition: opacity .32s ease, transform .32s ease; } /* OHNE DIESE ZEILE GEHT DIE KARTE NIE WEG. `[hidden] { display: none }` steht im Stylesheet des BROWSERS, und jede Autoren-Regel mit `display:` schlaegt es — hier das `display: flex` darueber. Das HUD setzte `hidden` also brav, und die Karte stand weiter da: Kopf, Fassung, Prompt (gemeldet zu Fassung 0ff1c56, nur die Zeilen waren geleert). Jedes andere versteckbare Element hier hat seine eigene Regel — `.vorlesen`, `.stand`, `.wartet`, `.neu`, `.einstellungen`, `.token-dialog`. Diese eine fehlte. */ .boot[hidden] { display: none; } .boot-karte { width: min(560px, 100%); background: var(--flaeche-92); border: 1px solid var(--rand); border-radius: 14px; padding: 16px 18px 14px; backdrop-filter: blur(12px); /* Derselbe Schatten wie an einem Fenster, plus ein Schimmer in der Akzentfarbe — das ist der Unterschied zwischen "Kasten" und "faehrt hoch". */ box-shadow: 0 18px 40px var(--schatten-stark), 0 0 0 1px var(--schimmer-akzent), 0 0 60px var(--schimmer-akzent-stark); position: relative; overflow: hidden; animation: boot-karte-auf .34s cubic-bezier(.2, .7, .3, 1) both; } @keyframes boot-karte-auf { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } } /* Zeilenraster wie auf einer Roehre — 3 % Deckkraft, mehr wuerde den Text ausfransen. Es liegt UEBER dem Inhalt und faengt nichts ab. */ .boot-karte::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, var(--boot-scanlinien) 0 1px, transparent 1px 3px); } .boot-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--rand); } .boot-marke { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); text-shadow: 0 0 12px var(--akzent-glow); } .boot-fassung { font-family: var(--mono); font-size: 11px; color: var(--text-leise); } .boot-liste { display: flex; flex-direction: column; gap: 3px; } .boot-zeile { font-family: var(--mono); font-size: 13px; line-height: 1.5; white-space: pre; display: flex; align-items: baseline; gap: 8px; opacity: 0; } .boot-zeile.da { opacity: 1; } /* DER MARKER kommt erst, wenn die Zeile fertig getippt ist — vorher weiss niemand, wie sie ausgeht. Deshalb die Verzoegerung, nicht aus Zierde. */ .boot-marker { color: var(--akzent); opacity: 0; } .boot-zeile.da .boot-marker { animation: boot-marker-an .26s ease .3s both; } .boot-zeile.anders .boot-marker { color: var(--denkt); } .boot-zeile.stoert .boot-marker { color: var(--fehler); } @keyframes boot-marker-an { from { opacity: 0; text-shadow: none; } 40% { opacity: 1; text-shadow: 0 0 14px currentColor; } to { opacity: 1; text-shadow: 0 0 6px var(--akzent-glow-schwach); } } /* Die Klasse heisst `anders` und nicht `wartet`: `.wartet` ist im Kopf die Pille „2 warten" (Rand, Radius, Polsterung), und eine Protokollzeile erbte sie mitsamt Kasten — im Bild sah das aus wie eine markierte Zeile. ZEICHEN FUER ZEICHEN. `steps()` auf die Breite geht nur mit Festbreitenschrift auf: `--n` ist die Zeichenzahl der Zeile in `ch`, und die stimmt nur, wenn jedes Zeichen gleich breit ist. */ .boot-text { display: inline-block; overflow: hidden; width: 0; color: var(--text-leise); } .boot-zeile.da .boot-text { animation: boot-tippen .3s steps(30, end) both; } @keyframes boot-tippen { to { width: var(--n); } } .boot-wert { color: var(--text); } .boot-zeile.anders .boot-wert { color: var(--denkt); } .boot-zeile.stoert .boot-wert { color: var(--fehler); } .boot-eingabe { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rand); font-family: var(--mono); font-size: 13px; color: var(--text-leise); opacity: 0; transition: opacity var(--dauer) ease; } .boot.fertig .boot-eingabe { opacity: 1; } .boot-cursor { display: inline-block; width: .6em; height: 1.05em; background: var(--akzent); box-shadow: 0 0 10px var(--akzent-glow); animation: boot-blinken 1.05s step-end infinite; } @keyframes boot-blinken { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } /* Die Kugel tritt zurueck, solange das Protokoll laeuft, und faehrt danach wieder auf — sie ist der Dienst, der gerade hochkommt. Eine eigene Keyframe, weil `#kern` seine `height`-Transition fuer den aufgeklappten Verlauf haelt. */ /* DER DIALOG TRITT ZURUECK, SOLANGE DAS PROTOKOLL LAEUFT. Ohne das steht der letzte Zug von vorhin hinter der Karte und liest sich durch sie hindurch — am 19.09.2026 live fotografiert. Auf einem frischen Dienst faellt es nicht auf, weil dort kein Verlauf liegt; genau deshalb steht der Satz hier und nicht nur im Kopf. Ausgeblendet, nicht weggeschoben: sonst spraenge der Kasten in der Hoehe. Der Lautsprecher gehoert dazu, er liegt absolut im selben Kasten. */ /* OHNE UEBERGANG HINEIN, MIT UEBERGANG HERAUS. Die Karte faehrt in 340 ms auf, der Dialog blendete in 300 ms ab — gemessen lagen beide 200 ms lang uebereinander, und in dieser Zeit las man den letzten Zug durch das Protokoll hindurch. Beim Zurueckkommen gilt die Transition wieder, dort soll nichts springen. */ body.bootet .lauf { opacity: 0; transition: none; } /* DAS BAND WAECHST WEICH, UND DER AVATAR GEHT WEICH MIT. `#kern` ist `height: 44px; flex: none` — die Kugel schrumpft also gar nicht, sie wird vom wachsenden Band nach OBEN geschoben. Das geschah bisher in einem Bild, also als Sprung. `laufAnpassen` setzt dem Lauf eine ausgerechnete `height`; die zu animieren macht den ganzen Umbruch darueber gleitend, ohne dass irgendwo eine zweite Hoehe gepflegt werden muesste. JA, DAS IST EINE LAYOUT-EIGENSCHAFT. Es laeuft aber nicht dauernd, sondern genau dann, wenn sich der gesagte Satz aendert — ein Uebergang von 280 ms, kein Dauerlaeufer wie eine Kartenbahn. */ .lauf { transition: opacity var(--dauer-lang) ease, height var(--dauer) var(--kurve-raus); } @media (prefers-reduced-motion: reduce) { .lauf { transition: opacity var(--dauer-lang) ease; } } body.bootet #kern { animation: kern-hoch 1.1s cubic-bezier(.2, .7, .3, 1) both; } @keyframes kern-hoch { from { opacity: .25; transform: scale(.88); } 60% { opacity: .5; } to { opacity: 1; transform: none; } } @media (max-width: 520px) { .boot-karte { padding: 13px 14px 12px; } .boot-zeile, .boot-eingabe { font-size: 11.5px; } /* Mobiler Header: schlanker und innerhalb des Viewports. */ .kopf { padding: 10px 14px; font-size: 12px; flex-wrap: wrap; gap: 8px; } .kopf-links { gap: 8px; max-width: 100%; } #status-text { max-width: calc(100vw - 180px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kopf-rechts { display: flex; align-items: center; gap: 6px; margin-left: auto; } .stand, .wartet, .neu { font-size: 10px; } .pause { width: 28px; height: 28px; padding: 0; justify-content: center; } .pause span { display: none; } #uhr { font-size: 12px; } } /* WER KEINE BEWEGUNG WILL, BEKOMMT KEINE — und dann gibt es die Sequenz gar nicht erst (hud.js springt ans Ende). Die Regeln bleiben als Netz. */ @media (prefers-reduced-motion: reduce) { .boot-karte, .boot-zeile.da .boot-text, .boot-zeile.da .boot-marker, .boot-cursor, body.bootet #kern { animation: none !important; } .boot-text { width: auto !important; } .boot-marker { opacity: 1; } .boot.geht, .lauf { transition: none !important; } /* Der Kopfhoerer springt dann an seinen Platz, statt zu fahren — die Endzustaende sind dieselben, nur ohne den Weg dazwischen. `!important` ist hier Pflicht und keine Bequemlichkeit: dieser Block steht WEIT VOR `.mikro-neben` in derselben Datei, und eine Media-Query bringt keine Spezifitaet mit — ohne das Ausrufezeichen gewinnt schlicht die spaetere Regel, und die Bewegung liefe weiter. Genau so gemessen. */ .mikro-neben { transition: color var(--dauer-kurz), border-color var(--dauer-kurz), background var(--dauer-kurz) !important; } } /* HOCHGESCROLLT: DIE KUGEL GEHT GANZ WEG. Sie kleiner werden zu lassen war der halbe Schritt — wer im Verlauf liest, liest, und eine Kugel, die dabei ein Drittel der Buehne haelt, ist nur noch im Weg. Also gibt sie beim Hochscrollen ihre ganze Hoehe ab und kommt zurueck, sobald wieder das Gespraech dran ist. BEMESSEN WIRD DABEI NICHTS. Der aufgeklappte Lauf hat keinen eigenen Deckel, sondern nimmt, was die Buehne hergibt (`flex: 1 1 auto` an beiden, `min-height: 0`, damit der Flex-Algorithmus unter die Inhaltsgroesse darf). Ein fester Wert waere hier falsch: 52vh passen bei 1440x900 bequem, sind auf einem 800 px hohen Telefon aber schon 416 px und damit mehr, als zwischen Kopf und Fuss ueberhaupt frei ist — der Block liefe in den Fuss. Und weil die Kugel ihre Hoehe weich abgibt, waechst der Lauf mit ihr mit; er braucht selbst keinen Uebergang. Ein `max-height`-Uebergang von 190 px auf einen grossen Wert laeuft ohnehin ungleichmaessig ab. */ #kern { transition: height var(--dauer) ease, opacity var(--dauer) ease; } /* ══ DER AUFGEKLAPPTE VERLAUF IST EIN OVERLAY ═════════════════════════════ Marco am 23.09.2026 mit Bild: „Wenn ich den verlauf aufmache, springt alles nach oben, es soll eher ein overlay sein und die widgets bleiben wo sie sind." Genau das tat die alte Fassung, und sie tat es mit Absicht: die Kugel gab ihre Hoehe ab (`#kern { height: 0 }`), Band und Lauf wuchsen in den frei gewordenen Streifen, und ein Deckel an `.mitte` sollte verhindern, dass die Kartenzeile dabei auf null faellt. Das Ergebnis war trotzdem, dass sich beim Nachlesen die halbe Buehne neu sortiert — die Karten rutschen nach oben und werden oben angeschnitten, und man sucht die Stelle wieder, an der man war. NACHLESEN IST EIN BLICK ZUR SEITE, KEIN MODUSWECHSEL. Der Lauf legt sich deshalb als Flaeche UEBER die Buehne und nimmt niemandem Platz weg: absolut im `.gespraech` (das traegt `position: relative`), unten verankert, nach OBEN wachsend. Kugel, Karten und Mikrofon bleiben, wo sie sind. DIE HOEHE DES BANDES MUSS DABEI STEHEN BLEIBEN. Nimmt man den Lauf aus dem Fluss, faellt `.gespraech` auf null und das Mikrofon rutscht hoch — also genau der Sprung, um den es geht, nur andersherum. `verlaufOeffnen` misst das Band deshalb VOR dem Aufklappen und haelt es als `min-height` fest. `z-index: 8` liegt ueber der Kartenzeile (6) und unter dem FAB (12) und jedem Dialog (20 und hoeher). */ body.verlauf-offen .lauf { /* `bottom: -14px` HEBT DAS EIGENE POLSTER AUF. Die Flaeche braucht unten Luft zum Rand, der lebende Satz darf davon aber nichts merken: mit `bottom: 0` saesse er 14 px hoeher als eben noch, und das ist der Sprung, den man sieht. Dasselbe waagerecht, dort schon seit dem ersten Wurf (`margin: 0 -18px` gegen `padding: … 18px`). */ /* DIE VERSCHIEBUNGEN RECHNEN DEN RAHMEN MIT. Polster 14/18 plus 1 px Rahmen — im Ruhezustand hat der Lauf beides nicht. Ohne das eine Pixel Zugabe sitzt der lebende Satz aufgeklappt um genau 1 px hoeher und 1 px weiter rechts; gemessen war es auch genau das. `box-sizing: border-box` gilt global, der Rahmen liegt also innen. */ position: absolute; left: 0; right: 0; bottom: -15px; z-index: 8; max-height: min(70vh, 640px); min-height: 0; padding: 14px 18px; margin: 0 -19px; /* WEICH HEREIN, NICHT EINFACH DA. Marco am 23.09.2026: „Es soll einfach weich reinfaden und nicht einfach nur erscheinen." Opazitaet und ein kurzer Weg von unten — beides auf dem Compositor, also billig; `height` oder `top` zu animieren kostete ein Layout je Bild. */ animation: verlauf-auf var(--dauer) var(--kurve-raus) both; background: color-mix(in srgb, var(--grund) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--rand); border-radius: 16px; box-shadow: 0 18px 48px rgba(0, 0, 0, .18); } /* UND WEICH WIEDER HINAUS (23.09.2026) — kuerzer als herein, wer zuklappt, ist fertig. hud.js setzt `.verlauf-geht` fuer 180 ms und nimmt erst danach `verlauf-offen` ab; ohne das war die volle Flaeche im naechsten Bild weg. NICHT DER GANZE LAUF BLENDET AB, NUR SEINE FLAECHE UND DIE HISTORIE. Der lebende Satz steht im Overlay genau da, wo er im Band steht (`bottom: -14px` oben); blendete er mit aus, waere er 180 ms lang weg und stuende danach schlagartig wieder da — ein Blinzeln statt eines Schliessens. */ body.verlauf-geht .lauf { animation: verlauf-zu var(--dauer-kurz) ease-in both; } @keyframes verlauf-zu { to { background-color: transparent; border-color: transparent; box-shadow: none; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } } body.verlauf-geht .verlauf { animation: verlauf-zu-inhalt var(--dauer-kurz) ease-in both; } @keyframes verlauf-zu-inhalt { to { opacity: 0; transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { body.verlauf-geht .lauf, body.verlauf-geht .verlauf { animation: none; } } @keyframes verlauf-auf { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; transform: none; } } /* Wer Bewegung abbestellt hat, bekommt sie nicht — die Flaeche blendet dann nur auf, statt zu wandern. */ @media (prefers-reduced-motion: reduce) { body.verlauf-offen .lauf { animation: verlauf-auf-ruhig var(--dauer-kurz) ease both; } @keyframes verlauf-auf-ruhig { from { opacity: 0; } to { opacity: 1; } } } /* FRÜHERE ZÜGE TRETEN ZURÜCK. Kleiner und leiser als der laufende Zug — sonst sieht die Bühne beim ersten Blick aus wie eine Liste und man sucht, was gerade gilt. Der Abstand nach unten trennt den Verlauf vom lebenden Paar; leer ist er nicht da. */ .verlauf:empty { display: none; } .verlauf { margin: 0 0 18px; } .verlauf-zug { margin: 0 0 14px; opacity: .55; } .verlauf-zug:last-child { margin-bottom: 0; } .verlauf-nutzer { color: var(--text-leise); font-size: 13px; line-height: 1.4; margin: 0 0 4px; } .verlauf-nutzer:not(:empty)::before { content: "„"; } .verlauf-nutzer:not(:empty)::after { content: "“"; } .verlauf-herold { color: var(--text); font-size: 14px; line-height: 1.45; margin: 0; } .verlauf-nutzer:empty, .verlauf-herold:empty { display: none; } /* DER KNOPF BEKOMMT EINEN EIGENEN STREIFEN — aus zwei Gründen, die einander widersprechen, wenn man nur einen davon bedenkt: Im FLUSS stehen darf er nicht: er kommt und geht mit dem Text, und die Kugel ist das Element, das Platz abgibt (`#kern`, siehe oben). Sie schrumpfte dann bei jeder Antwort um seine Höhe und wüchse danach wieder. ÜBER dem Text liegen darf er aber auch nicht. Genau so stand er zuerst, absolut in der unteren rechten Ecke, „weil die Zeile zentriert ist und mit `text-wrap: balance` selten bis an den Rand läuft". Gemessen an einer vollen Antwort überdeckte er sichtbare Schrift bei 1440×900 (1296 px²), 900×900 (1180 px²), 821×1200 (1568 px²) und 420×800 (1081 px²) — sauber war ausgerechnet nur 1100×900, die Breite, an der man es zuerst ansieht. Also beides: absolut positioniert (keine Höhenänderung) in einem dauerhaft /* DIE ZWEI SPRECHER. Was Marco gesagt hat, steht leise und in Anführungszeichen oben, Herold darunter in voller Schriftfarbe. Getrennt werden die beiden allein durch Abstand, Farbe und die Anführungszeichen — hier stand bis zum 18.09.2026 eine Haarlinie dazwischen, Marco braucht sie nicht. Der Abstand trägt die Trennung jetzt allein und ist deshalb größer als die 13 px, die er neben der Linie hatte. Begrenzt waren BEIDE Zeilen, und zwar aus demselben Grund: solange der Block unbegrenzt wachsen kann, kann er den Fuss erreichen. Die Nutzer-Zeile waechst beim Sprechen live mit dem Zwischenergebnis mit — das war der Fall, in dem die Ueberlappung auftrat. Seit dem 19.09.2026 haelt den Fuss der Deckel auf `.lauf` frei (siehe oben), und die Klammern sind deshalb weg: was ueber den Deckel hinausgeht, ist erscrollbar statt abgeschnitten. */ /* DIE FRAGE BLEIBT LESBAR, AUCH WENN DIE ANTWORT LANG IST — aber ohne Kasten. Hier klebte sie kurz oben fest, mit einem hellen Hintergrund darunter, damit die Antwort nicht durchscheint. Das sah aus wie ein aufgelegtes Rechteck mit harten Kanten, und die Antwort verschwand halb darunter. Geloest wird es jetzt eine Ebene tiefer: der Lauf scrollt nicht mehr ans ENDE, sondern an den ANFANG der Frage (siehe `nachUnten` in hud.js). Damit steht sie oben, ganz, und nichts liegt uebereinander. */ .nutzer-zeile { color: var(--text-leise); font-size: 15px; line-height: 1.4; margin: 0 0 20px; min-height: 1.4em; } .nutzer-zeile:not(:empty)::before { content: "„"; } .nutzer-zeile:not(:empty)::after { content: "“"; } .nutzer-zeile.vorlaeufig { font-style: italic; opacity: .7; } /* KLEINERE SCHRIFT, UND KEIN ABGESCHNITTENES ENDE MEHR. Vorher: `clamp(17px, 2.2vh, 22px)` — 19,8 px gegen 15 px in der Nutzer-Zeile, ein Sprung um ein Drittel. Danach stand hier `max-height` + `overflow: hidden`: das schnitt auf dem Telefon 133 von 215 px Text ab, ohne ein einziges Zeichen, das davon erzählt hätte. Die Zeilenbegrenzung kürzte an derselben Stelle, setzte aber ein „…“. Seit dem 19.09.2026 wird gar nicht mehr gekürzt: der Text steht vollständig im scrollbaren Lauf, und das „…“ hatte ohnehin nur gesagt, dass etwas fehlt — nicht was. */ /* ENTWEDER ER ODER HEROLD — siehe `bandRegie` in hud.js, dort steht das Warum. Kein `visibility`, sondern `display: none`: die stumme Zeile soll auch ihren Platz hergeben, sonst bleibt im Band eine Luecke stehen, wo eben noch ein Absatz stand. Ohne `data-zug` (ganz frisch geladen) gilt nichts davon und beide stehen da wie bisher. */ /* DER AKTIVE SATZ STEHT UNTEN, DIREKT UEBER DEM MIKROFON. Vom 23.09.2026 morgens bis mittags war die stumme Zeile schlicht `display: none` — auf Marcos "entweder spreche ich, oder Herold". Danach hat er es praeziser gefasst: waehrend er auf eine Antwort ANTWORTET, will er beides sehen, denn er bezieht sich ja darauf; verschwinden soll Herolds Satz erst im Moment des Abschickens. Das Verschwinden IST die Quittung. Vier Zustaende also, und `order` traegt sie: wer gerade dran ist, steht unten. Im Markup steht die Nutzerzeile oben — genau deshalb wird gedreht, wenn er spricht, und nicht umgekehrt. Der andere wird nicht versteckt, sondern LEISE UND EINZEILIG: sein diktierter Absatz war ueber 400 Zeichen lang und drueckte ungebremst jede Antwort aus dem Streifen (gemessen 72-80 px Luft zwischen Avatar und Mikrofon, je nach Fensterhoehe). */ .lauf { display: flex; flex-direction: column; } /* `flex: 0 0 auto` IST HIER KEIN SCHMUCK. `laufAnpassen` setzt dem Lauf eine feste Hoehe (die des lebenden Zuges); ein Flex-Kind mit dem voreingestellten `flex-shrink: 1` wird darin zusammengedrueckt, und zwar das obere zuerst. Gemessen am 23.09.2026: Herolds Zeile hatte Text, `scrollHeight` sagte 41 px — und die Zeile selbst stand auf HOEHE 0, war also spurlos weg. Sie soll ueberstehen und den Lauf rollen lassen, nicht schrumpfen. */ .lauf > * { flex: 0 0 auto; } .verlauf { order: 0; } .nutzer-zeile { order: 1; } .herold-zeile { order: 2; } /* HEROLDS SATZ STEHT IMMER UNTEN. Die Reihenfolge wird nicht mehr gedreht — siehe die Regel darunter: seine Zeile ist die eine, die immer ganz lesbar sein muss, und unten kann die Ueberlauf-Maske sie nicht anschneiden (die frisst von OBEN). */ /* Eine leere Zeile darf keinen Platz nehmen — sonst steht im Ruhezustand ein unsichtbarer Absatz zwischen Avatar und Antwort. */ .nutzer-zeile:empty, .herold-zeile:empty { display: none; } /* DIE NICHT AKTIVE ZEILE: eine Zeile, leiser, mit Ellipse. */ /* BEIDE ZEILEN STEHEN GANZ DA — KEINE WIRD MEHR GEKUERZT. Marco am 23.09.2026: „Ich muss unten unter dem Avatar immer meine eigene zu letzt gesprochene Nachricht sehen und darunter … die Antwort vom Avatar." Das ist die dritte Fassung dieser Regel an einem Tag, und alle drei gingen in dieselbe Richtung: erst war die stumme Zeile ganz weg (`display: none`), dann wurde die nicht aktive gekuerzt, dann nur noch seine eigene — jetzt keine. Der Unterschied zwischen den beiden traegt ohnehin schon die Form: seine Zeile steht in Anfuehrungszeichen und kleiner, Herolds Antwort darunter in voller Groesse. Was der Platz nicht hergibt, holt sich das Band vom Avatar (siehe die Hoehen-Transition an `.lauf`). */ /* DER WECHSEL BLENDET UEBER (23.09.2026). Wer das Wort bekommt, wird in 280 ms laut, wer es abgibt, ebenso leise — statt dass beide im selben Bild umschalten. Die Lage tauscht weiterhin sofort (`order` hat keinen Weg); dass es nicht springt, tragen die kurze Gleitbewegung der neuen Zeile (`bandRegie` in hud.js) und die Welle, die ihrer Lage nachfolgt. */ .nutzer-zeile, .herold-zeile { transition: opacity var(--dauer) ease; } @media (prefers-reduced-motion: reduce) { .nutzer-zeile, .herold-zeile { transition: none; } } /* DAS DENK-ZEICHEN IST WEG (23.09.2026, am selben Tag gebaut und wieder entfernt). Drei Punkte zwischen dem Abschicken und dem ersten Wort — Marco: „Die Denkpunkte brauchen wir doch eigentlich gar nicht, weil wir doch dieses rote animierte Avatar-Linien-Zeug haben, wenn Herold am Nachdenken ist. Also ist das irgendwie doppelt gemoppelt." Stimmt und ist im Code nachzulesen: `zielFarbe()` schaltet bei `gehirn === "denkt"` oder `"werkzeug"` auf `farben.denkt`, die Kugel sagt es also laengst — und sie sagt es an der Stelle, auf die man ohnehin schaut. */ .herold-zeile { font-size: clamp(15px, 1.7vh, 18px); line-height: 1.45; margin: 0; text-wrap: balance; cursor: pointer; -webkit-user-select: text; user-select: text; } .herold-zeile:hover, .herold-zeile:focus-visible { color: var(--hoert); outline: none; } .herold-zeile.fehler { color: var(--fehler); } /* ABGEWUERGT: der Text bleibt LESBAR stehen — was Marco nicht hoeren wollte, will er vielleicht ueberfliegen. Gesagt wird es mit einem Wort statt mit einem Strich: die Zeile ist zentriert, eine Kante links stuende weit weg vom Text. Ein angehaengtes Wort teilt sich den Fluss mit dem Text und laeuft mit ihm um. */ .herold-zeile.abgebrochen { opacity: .75; } .herold-zeile.abgebrochen::after { content: " · abgebrochen"; font-size: 12px; color: var(--text-leise); white-space: nowrap; } /* DER SLIDER — DIE OFFENE ARBEIT, RECHTS NEBEN DEM ANTWORTSATZ. Bis zum 21.09.2026 war das eine schwebende Ebene (`position: fixed`), auf der jedes Fenster seine eigene, gemerkte Lage hatte. Das passte zu ein, zwei kurzlebigen Fenstern; als Arbeitsliste war es schaedlich — die Fenster ueberlappten, und ihre Reihenfolge war z-Order statt Alter. Danach stand hier ein mehrzeiliges `auto-fill`-Raster. Es fuellte von links oben, und genau das war der Einwand: bei zwei Fenstern klebten sie in der linken Ecke, waehrend der Antwortsatz darueber mittig stand. Zwei Achsen in einem Bild, und keine davon erklaert die andere. Dann war es EINE waagerechte Zeile unter dem Text — und seit dem 22.09.2026 ist es EINE SENKRECHTE SPALTE rechts daneben (siehe `.buehne`). `safe center` IST DER GANZE TRICK, und er gilt jetzt auf der senkrechten Achse. Blosses `center` zentriert auch dann noch, wenn der Inhalt hoeher ist als die Flaeche — dann ragt er oben UND unten hinaus, und der obere Ueberhang ist nicht mehr erscrollbar, weil es ueber dem Scroll-Ursprung nichts zu scrollen gibt. `safe` faellt bei Ueberlauf auf `flex-start` zurueck: wenige Fenster stehen mittig auf der Hoehe des Antwortsatzes, viele beginnen oben und laufen nach unten weiter. KEINE GASSEN MEHR AM SLIDER. Solange er unter dem Text lag, musste er sich auf BEIDEN Seiten die breitere der beiden festen Spalten freihalten, damit seine Mitte unter der Mitte des Antwortsatzes sass. Jetzt IST er die rechte Spalte; die Achse haelt die Phantomgasse der Buehne, nicht mehr ein Aussenabstand hier. */ /* EINE ZEILE, DIE SEITLICH BLAETTERT — SEIT DEM 22.09.2026. Marco nach der Abnahme des Rasters: „Die Karten sind zu breit. Und es muss ein Slider sein." Gemessen war das Raster bei 1600 px zwei Karten zu je 528 in einer 1068-px-Bahn: die halbe Buehne fuer einen Titel und drei Merkmale. UND UNTER 1440 WAR ES SCHLIMMER, NICHT BESSER. `auto-fit` mit einer 420-px-Spur haelt zwei Spalten nur, solange 2x420 plus 12 Luecke in die Bahn passen — unter 852 px Bahnbreite faellt es auf EINE Spur zurueck, und die dehnt sich ueber alles. Live nachgemessen am Rasterstand: 1600 px Fenster → Bahn 1068, zwei Karten zu 528 1440 px Fenster → Bahn 908, zwei Karten zu 448 1280 px Fenster → Bahn 748, EINE Karte zu 748 ← ein Banner 1100 px Fenster → Bahn 568, EINE Karte zu 568 Die 748 sind der eigentliche Befund: nicht der 528er-Fall war zu breit, sondern sein Nachbar eine Stufe darunter. `flex` UND KEIN RASTER. Ein Raster verteilt, was da ist; ein Slider fuehrt eine Reihe an der Kante vorbei. `flex: 0 0 min(340px, 100%)` an der Karte (siehe `.widget`) ist der Unterschied: die Karte hat eine BREITE, statt eine Spur zu fuellen. 340 px, weil bei 1068 px Bahn drei nebeneinander aufgehen (3x340 + 2x12 = 1044). Vier waeren 250 px — und dann waechst der Aufgabentitel von zwei auf drei bis vier Zeilen und holt sich in der Hoehe zurueck, was die Karte in der Breite spart. DAS `min(…, 100%)` IST DIE SICHERUNG VON GESTERN AUF DER NEUEN ACHSE. Ohne sie waere 340 px keine Wunschbreite, sondern eine feste — und zwischen 821 und 960 px Fensterbreite ist die Bahn 328 bis 428 px schmal, weil die Themenliste dort noch ihre Gasse nimmt. Genau dort schnitt der Rasterstand die Karte an beiden Seiten ab (gemessen 830 px Fenster: Bahn 298, Karte 420, 61 px Ueberhang). Das Loch liegt exakt zwischen den zwei Breiten, die man normalerweise prueft. `justify-content: safe center` LOEST `align-content: safe center` AB, und der Grund wandert mit der Achse. Blosses `center` zentriert auch dann noch, wenn die Reihe breiter ist als die Bahn — dann ragt sie links UND rechts hinaus, und der linke Ueberhang ist nicht mehr erscrollbar, weil es vor dem Scroll-Ursprung nichts zu scrollen gibt. `safe` faellt bei Ueberlauf auf `flex-start` zurueck: wenige Karten stehen mittig unter dem Antwortsatz, viele beginnen links und laufen nach rechts weiter. `align-items: flex-start` IST DER HORIZONT (Invariante 1). Karten sind verschieden hoch — 96 bis 220 px, je nach Inhalt. Mittig ausgerichtet schwaemmen sie auf drei verschiedenen Ober- und Unterkanten; an einer gemeinsamen Oberkante ist die Reihe eine Reihe. Und sie steht OBEN in der Zelle statt mittig: eine Reihe, die bei zwei Karten in die Mitte rutscht und bei fuenf nach oben springt, ist genau die Form, die mit dem Inhalt wechselt. `height: 100%` IST KEINE KOSMETIK, SONDERN DER DECKEL. Hier stand zuerst `height: auto; max-height: 100%`, damit die Reihe nur so hoch wird wie ihre hoechste Karte. Das hat den Hoehendeckel der Karte STILL AUSGEHEBELT: `max-height: min(var(--karte-hoch), 100%)` an `.widget` braucht eine aufloesbare Elternhoehe fuer sein `100%`, und an einem `auto`-hohen Flex-Container gibt es die nicht — das Prozent bleibt unbestimmt und der ganze `min()`-Ausdruck faellt weg. Lokal gemessen (22.09.2026, sechs Karten ueber elf Breiten): Karten von 244 bis 326 px statt der 220, bei 860 px Fenster war jede einzelne ueber dem Budget. Mit einer definiten Hoehe loest das Prozent wieder auf und der Deckel greift. Die Reihe steht trotzdem oben — dafuer sorgt `align-items`, nicht die Containerhoehe. */ .widgets { /* `relative`: eine Karte, die geht, liegt waehrend ihrer Abblende absolut ueber ihrer alten Stelle (`widgetWeg` in hud.js) — damit die Nachbarn schon zusammenruecken koennen, statt 380 ms spaeter zu springen. */ position: relative; height: 100%; display: flex; flex-direction: row; /* SENKRECHT MITTIG IM RAUM UEBER DEM AVATAR (22.09.2026). Gemessen bei 1600x900: zwischen Kopfzeile (Unterkante 56) und Avatar (Oberkante 625) liegen 569 px, ihre Mitte bei 341 — die Karten standen bei 60…540, Mitte 300. Sie hingen also oben statt in diesem Raum zu stehen, 41 px daneben. Marco: "Vielleicht koennen die irgendwie auch noch zentriert werden ueber dem Avatar-Balken und dem oberen Rand." `safe center` und nicht `center`: ist eine Karte hoeher als die Bahn, faellt es auf `start` zurueck, statt oben UND unten abzuschneiden — dieselbe Vorsicht wie beim `justify-content` darunter. */ align-items: safe center; justify-content: center; justify-content: safe center; gap: 12px; /* GLEICH OBEN WIE UNTEN, sonst ist die Mitte um die halbe Differenz daneben. Mit 4/14 blieben nach dem Zentrieren 5 px Versatz stehen — unsichtbar, aber messbar, und eine bekannte Ungenauigkeit kostet hier ein Zeichen. Die Summe bleibt dieselbe. */ padding: 9px 0; min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; overscroll-behavior-x: contain; } /* `center` UND NICHT MEHR `start` (24.09.2026). Hier stand „waagerecht liest man von links" — Marco hat es umgedreht: „bei 3 soll das Zweite in der Mitte sein … auch mit Scroll, Snapping." Die Mitte der Bahn ist die Achse der Buehne, also rastet die Karte dort ein, auf die der Blick faellt. Am Anfang und am Ende haelt die Bahn an ihrer Kante; eine leere halbe Bahn davor gibt es nicht. */ .widget { scroll-snap-align: center; } /* Der Auslauf an beiden Enden, nur bei Ueberlauf (setzt `ueberlaufZeichnen` in hud.js): so weit, dass auch die erste und die letzte Karte mittig einrasten koennen. Passt alles hinein, zentriert `justify-content`. */ .widgets.laeuft-ueber { padding-inline: max(0px, calc(50% - var(--karte-breit) / 2)); } /* ══ TIEFE: WAS AUSSEN STEHT, STEHT HINTEN ═══════════════════════════════ Marco am 23.09.2026, nach der Storyline-Seite von SBS: „so ein geiles orb effect mit Umschauen und anklicken einzelner widgets". Die Kugel selbst ist verworfen — Herolds Karten sind Text, und Text auf einer gekrümmten Fläche liest man nicht. Was den Reiz dort ausmacht, ist aber gar nicht die Kugel, sondern Trägheit und Tiefe, und beides geht auf der vorhandenen Bahn. SCROLL-GETRIEBEN UND OHNE EINE ZEILE JAVASCRIPT je Bild: `animation-timeline: view(inline)` bindet den Ablauf an die Sichtbarkeit der Karte in der Bahn. Eine Fassung mit Rechnung je Bild wäre teurer als der Effekt wert ist. `scale` UND `filter: opacity()` — NICHT `transform` und `opacity`. Der Auftritt der Karte laeuft ueber Transitions auf genau diesen beiden (`.widget.sichtbar`, `.widget.geht`); zwei Regeln auf derselben Eigenschaft und die spaetere gewinnt, die Karte spraenge beim Hereinkommen. `scale` ist seit langem eine eigene Eigenschaft und wird MIT dem `transform` verrechnet, `filter: opacity()` multipliziert sich mit der Deckkraft. Beide bleiben auf dem Compositor. 0,85 und 0,35 hat Marco gewaehlt (die zurueckhaltende Fassung waere 0,92/0,55 gewesen): deutlich raeumlich, und die Karte ganz aussen ist bewusst kaum noch zu lesen — sie ist ja auch nicht gemeint. */ @keyframes karte-tiefe { entry 0% { scale: .85; filter: opacity(.35); } entry 100% { scale: 1; filter: opacity(1); } exit 0% { scale: 1; filter: opacity(1); } exit 100% { scale: .85; filter: opacity(.35); } } @supports (animation-timeline: view()) { .widget { animation: karte-tiefe linear both; animation-timeline: view(inline); } /* Tiefe ist Anordnung, nicht Bewegung — sie bleibt, nur flacher. */ @media (prefers-reduced-motion: reduce) { @keyframes karte-tiefe-ruhig { entry 0% { scale: .96; filter: opacity(.7); } entry 100% { scale: 1; filter: opacity(1); } exit 0% { scale: 1; filter: opacity(1); } exit 100% { scale: .96; filter: opacity(.7); } } .widget { animation-name: karte-tiefe-ruhig; } } } /* DASS ES WEITERGEHT, MUSS MAN SEHEN, OHNE ZU WISCHEN. Gemessen am 21.09.2026 in der ersten waagerechten Fassung: bei zwoelf Fenstern auf 1440 px passten VIER genau bis an die Kante — kein angeschnittenes Fenster, kein Hinweis, acht unsichtbar. Und die Scrollleiste hilft nicht: `offsetWidth - clientWidth` ist 0, sie liegt als Ueberlagerung ueber dem Inhalt und erscheint erst BEIM Wischen. Man muesste sie schon bedienen, um zu erfahren, dass es sie gibt. Hier stand zuerst eine Maske, die den rechten Rand ausfransen liess. Marco hat an ihrer Stelle Blaetterpfeile gewaehlt (siehe `.fenster-blaettern`), und die koennen mehr: sie ZEIGEN nicht nur, dass da etwas liegt, man kommt mit ihnen auch hin — mit der Maus und mit der Tastatur. Die Maske ist deshalb ersatzlos weg; zwei Hinweise nebeneinander waeren einer zu viel. UND SEIT DEM 22.09.2026 GILT DERSELBE SATZ FUER DIE SCROLLLEISTE. Marco: „Aktuell faden die nur rein und danach ploepp einfach auch ein Scrollbalken dazu." Sie war hier absichtlich konfiguriert — als genauere Auskunft darueber, WIE VIEL noch kommt. Das Argument traegt nicht: sie nimmt 0 px, liegt als Ueberlagerung ueber dem Inhalt und erscheint erst BEIM Wischen, man muesste sie also schon bedienen, um zu erfahren, dass es sie gibt. Als Hinweis ist sie damit der dritte, der nichts sagt — und seit die Bahn waagerecht laeuft, erschiene sie als Strich UNTER den Karten, genau dort, wo das Auge nach dem Lesen ankommt. Verborgen wird sie, nicht abgeschaltet: Rad, Wischen und Tastatur scrollen weiter, `overflow-x: auto` bleibt. `scrollbar-width` deckt Firefox und neueres Chromium ab, die Pseudoklasse das aeltere WebKit. */ .widgets { scrollbar-width: none; } .widgets::-webkit-scrollbar { display: none; } /* DIE BLAETTERPFEILE — SEIT DEM 22.09.2026 WIEDER NACH LINKS UND RECHTS, UND ZUM ERSTEN MAL IN EINER EIGENEN SPALTE. Sie liegen NEBEN der Scrollflaeche, nicht darin: ein Knopf im Scroll-Container wuerde mitgescrollt und waere genau dann verschwunden, wenn man ihn braucht (Invariante 8). Bisher galt das nur fuer den ELTERNKNOTEN — sie hingen `absolute` am Rahmen `.fensterzeile` und schwebten damit trotzdem UEBER der Randkarte. Senkrecht ging das durch: oben und unten war Luft. Waagerecht deckt derselbe Knopf die halbe Hoehe der ersten und der letzten Karte ab, und dort steht Text. Also traegt `.fensterzeile` jetzt drei Spalten und die Pfeile stehen wirklich daneben. NUR: DIE SPALTEN MUESSEN VON AUSSEN BEZAHLT WERDEN, NICHT VON DER BAHN. Ein Pfeil kostet 34 px plus 4 px Gasse. Nimmt er sie aus der Bahn, bleiben von 1068 noch 992 — und drei 340er Karten brauchen 1044. Erst gemessen, dann gesehen: bei 1600 px standen zwei Karten statt der drei, die Marco bestellt hat. Die halbe Knopfbreite zurueckzuholen (`margin-inline: -17px`) haette die Rechnung auch nicht gerettet und den Knopf wieder auf den Kartentext gelegt — also die Falle, derentwegen die Spalte ueberhaupt entstanden ist. `.fensterzeile` greift deshalb um genau diese 38 px in die Randgassen der Buehne hinaus. Dort ist Platz: die Gassen sind 246 px breit und tragen Themenliste und Schlange, die beide `fixed` liegen und am AEUSSEREN Rand beginnen. Die Bahn behaelt damit ihre vollen 1068 px, und die Pfeile stehen trotzdem neben ihr statt darauf. `hidden` setzt `hud.js`, sobald es in diese Richtung nichts mehr zu holen gibt: am Anfang gibt es kein Zurueck, am Ende kein Weiter, und ohne Ueberlauf gar keinen Pfeil. Und sie sind echte `