/* ============================================================ oberflaeche.css - die Stilvorlage der Anwendung. REGEL: Hier steht kein einziger Farbwert. Alles laeuft ueber var(--...) aus tokens.css. Wer eine Farbe braucht, die es dort nicht gibt, legt sie dort an - nicht hier. Gegenprobe: --farbe-primaer in tokens.css auf #000000 setzen und neu laden. Bleibt irgendwo Violett stehen, ist die Regel gebrochen. VORSCHAU-KLASSEN: .zeige-ueberfahren, .zeige-aktiv, .zeige-fokus Sie existieren nur, damit die Werkstatt alle Zustaende eines Bausteins NEBENEINANDER zeigen kann - sonst faellt ein Fehler wie "gesetzter Chip wird beim Ueberfahren violett auf violett" wieder nur beim Klicken auf, nicht beim Ansehen. Sie haengen ueber :is() an DERSELBEN Regel wie :hover, :active und :focus. Es gibt also keine zweite Deklaration, die abdriften kann. Dass Vorschau und Echtzustand dieselben Werte liefern, wird gemessen: tests/messungen/zustandsmatrix.spec.ts. ============================================================ */ /* --- Reset ------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* HIER STAND EIN TAG SUCHE NACH DEN SCROLLLEISTEN — 18.08.2026, und sie hat am falschen Gegenstand gemessen. Die Ursache und ihre Behebung stehen bei `@keyframes seite-herein` weiter unten: der Schnappschuss startete bei `scale(1.02)` und ragte damit auf allen vier Seiten ueber das Sichtfeld. WAS HIER STAND UND WIEDER GEFALLEN IST: `scrollbar-gutter: stable` und `stable both-edges`. Beide reservieren Platz im DOKUMENT — und dort war nie ein Problem. Sie kosteten 7,5 px Versatz an jedem zentrierten Inhalt (`bilder.spec.ts`) beziehungsweise sechs Messungen bei 390 px an der Huelle. Ein Dreizehntel der Handybreite fuer eine Vermutung. ZWEI LEHREN, teuer bezahlt und deshalb hier aufgehoben: Wer eine Regel an `html` haengt, faehrt den VOLLEN Messlauf. Die sechs roten standen in Dateien, die mit Scrollleisten nichts zu tun haben. Und die groessere: wer eine Erscheinung nicht reproduzieren kann, prueft zuerst, ob er am richtigen Gegenstand misst. Fuenf Messungen an `documentElement.scrollWidth` ergaben fuenf richtige Zahlen und keine Antwort — die Leiste gehoert zum `::view-transition`-Overlay, und das ist `position: fixed`. */ } /* =================================================================== DAS DOKUMENT SCROLLT — Baustelle 0.1, 04.08.2026 =================================================================== HIER STAND BIS HEUTE DAS GEGENTEIL, und es war kein Versehen: die Huelle war 100dvh hoch, `html` und `body` trugen `overflow: hidden`, und was scrollte, war eine Liste in sich. Angesagt: „Das Mausrad soll das Dokument bewegen, nicht einen Kasten in der Mitte." ZWEI BELEGE DAFUER STANDEN SCHON IN DIESER DATEI, beide vom Vorautor selbst gemeldet: 1. Die 240 px Luft ueber allem (Q8, `--kopf-luft-schmal`) sind bei Jitter Dokumentluft und scrollen weg. In einer 100dvh-Huelle sind sie dauerhaft weg — bei 900 px Fensterhoehe 27 % des Bildschirms. Der Vermerk an `.spalte__inhalt` nennt das „den Preis dafuer, Jitters Geometrie in unsere Huelle zu setzen". 2. Die Messung an Q8: `/posteingang` bei 1440 zeigte „sichtbar 561 von 4891, verborgen 4330" — ohne Verlauf, ohne Schatten, ohne sichtbare Bildlaufleiste. Im Bild endete die Liste mitten in einer Zeile und las sich als „hier ist die Liste zu Ende". Beides faellt weg, sobald das Dokument selbst scrollt. Das Verlaufs- zeichen an `[data-bildlauf='eigen']` bleibt trotzdem stehen — es traegt jetzt nur noch die eine Flaeche, die ihren Bildlauf behaelt. DIE AUSNAHME IST DIE NACHRICHTENLISTE. Sie ist zweispaltig gebaut und behaelt ihren eigenen Bildlauf; Begruendung in `rueckfragen-an-ceo.md`, Frage 6. BEREICH 02 IST JETZT AUCH BETROFFEN — nachgemessen am 05.08.2026. Die Abnahme („einrichten ist fertig, das ist perfekt so wie es ist") hat hier zuerst gewonnen, und die Nachfrage war: MISS ES. Gemessen ueber alle vier Schritte bei 1440 und 390 px: Dokument 900 von 900 / 844 von 844 scrollt nirgends Blatt 478 von 764 / 357 von 633 scrollt in sich Kanalliste 342 von 599 / 69 von 869 scrollt in sich Team-Karte 520 von 814 / 247 von 508 scrollt in sich Die Kanalliste bei 390 px ist der Fall: ein 69 px hohes Fenster auf 869 px Inhalt — und `scrollbar-width: none` nimmt das einzige Zeichen weg, dass es weitergeht. Das ist genau der Mangel, gegen den 0.1 gebaut wurde, nur schaerfer: dort fehlte der Hinweis, hier ist er ABGESCHALTET. Angesagt: „Scrollt es nicht, greift 0.1 auch dort — nur der Rollbereich, sonst nichts." Also nur das. Die Stilvorlage von Bereich 02 bleibt im Uebrigen unberuehrt. */ /* Der Body scrollt jetzt auch unter einem Vollbild. Was hier stand (`height: 100%; overflow: hidden`), war die Klammer, die den Bildschirm zum Bildschirm machte. DIE ALTE BEGRUENDUNG BLEIBT WAHR und ist der Grund, warum es GENAU EINE Stelle sein musste: das Rad traf `main` und scrollte dort, waehrend die ENDE-TASTE die Seite um 56 px verschob — zwei Eingabearten, zwei Ergebnisse. Diesen Zwiespalt gibt es nicht mehr, weil `.vollbild` seinen eigenen Bildlauf abgegeben hat; beide scrollen jetzt dasselbe Dokument. */ /* =================================================================== DIE EINE SEITE, DIE EIN BILDSCHIRM BLEIBT — Baustelle 0.1 =================================================================== Der Posteingang ist zweispaltig, und zwei Spalten, die gemeinsam mit dem Dokument scrollen, laufen auseinander. Der Auftrag laesst ihm deshalb ausdruecklich seinen eigenen Rollbereich. Damit die Liste darin einen haben KANN, braucht die Kette darueber wieder eine feste Hoehe — ein `overflow-y` ohne begrenzten Elternteil greift nie. DIE MARKE SETZT `grundgeruest.ts` je Seite, nicht das Stylesheet ueber alle. Genau dieselbe Bauart wie `traegt-huelle`, und aus demselben Grund: eine Regel, die es ueber alle Seiten behauptet, hat schon einmal die Werkstatt unbedienbar gemacht. AM HANDY GILT SIE NICHT. Dort steht eine Spalte, das Gespraech liegt als Ueberlagerung darueber, und der Posteingang scrollt wie jede andere Seite als Dokument. Die Grenze ist dieselbe wie die der Zweispaltigkeit (60rem), damit nicht zwei Zahlen dasselbe meinen. */ /* =================================================================== DIE FESTE HÖHE IST AM 10.08.2026 GEFALLEN — angesagt =================================================================== Hier standen zwei Regeln: `body.ist-bildschirmhoch .rahmen { height: 100dvh }` und `@media (min-width: 60rem) { body.ist-bildschirmhoch { height: 100%; overflow: hidden } }`. Sie stellten dem Posteingang die feste Höhe wieder her, die Baustelle 0.1 allen Seiten genommen hatte — damit seine Nachrichtenliste einen eigenen Bildlauf haben KONNTE. Angesagt: „Man sollte in der Seite ja auch runterscrollen können … das soll so sein wie die Übersichts-Seite." WAS DEN AUSSCHLAG GAB, ist gemessen. Nachdem der Seitentitel auf die Höhe der anderen sechs Seiten gerückt war, blieben bei 1440 x 900 noch 272,9 px Gesprächsbereich und 32 px Verlauf darin. Und `/posteingang` war die einzige der sieben Seiten mit `overflow: hidden`; alle anderen rollen als Dokument, 1027 bis 2269 px hoch. Auch Jitters „Drafts" rollt als Dokument (gemessen 1198 px bei 900). MIT IHNEN FALLEN: der eigene Bildlauf der Liste, ihre Ausblendkante, ihre Rasterpunkte und die Marke `data-bildlauf="eigen"` an ihr. Die ganze Kette hing an dieser Höhe; einzelne Stücke davon stehenzulassen hieße, Regeln zu behalten, die nichts mehr tun. `.gespraech__verlauf` BEHÄLT SEINEN BILDLAUF — aber nur am Handy, wo das Gespräch als feste Überlagerung über dem Fenster liegt und damit selbst eine Höhe hat. Dort ist er richtig und dort wirkt er auch. Was der Posteingang damit verliert, steht bei `.posteingang__zeilen`: die Stelle in der Liste. Der Preis ist bekannt und angesagt bezahlt. */ /* =================================================================== UND DAS GEGENSTUECK DARUNTER — 10.08.2026 =================================================================== Am Handy liegt das geoeffnete Gespraech seit dem 10.08.2026 als `position: fixed` ueber der ganzen Seite, damit das Antwortfeld unten im Bild steht statt 4650 px tiefer. Das Dokument dahinter ist aber weiter so lang wie die Liste, und die Huellenwache hat gemessen, was daraus folgt: „Posteingang · Gespraech offen: 3173 px Ueberhang, das Rad bewegt nichts" Ein Dokument, das man nicht sieht, darf auch nicht rollen. Die Marke setzt der Server genau dann, wenn der Meister etwas geoeffnet hat — dieselbe Unterscheidung wie an `data-offen`. `max-width` UND NICHT `min-width`: die Regel darueber sperrt den Koerper AB 60 rem, diese DARUNTER. Zusammen decken sie beide Bauformen ab, und beide brauchen eine Medienabfrage, weil `container-type` an `.huelle` sitzt und damit unter dem Koerper. */ @media (max-width: 59.999rem) { body.ist-gespraech-offen { height: 100%; overflow: hidden; } } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } img, picture, svg, video { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } /* Das hidden-Attribut setzt display:none nur im Browser-Stylesheet - jede eigene display-Regel schlaegt es. Ohne diese Zeile steht eine leere Fehlerzeile sichtbar auf der Anmeldeseite, weil .fehlerzeile display:flex traegt. Gilt fuer alles, was spaeter noch dazukommt. */ [hidden] { display: none !important; } /* --- Grundlage --------------------------------------------- */ body { font-family: var(--schrift-familie); font-size: var(--groesse-text); font-weight: var(--schrift-normal); line-height: var(--zeilenhoehe-weit); color: var(--farbe-text); background: var(--farbe-hintergrund); } /* Deutsch produziert Woerter wie "Beitragsveroeffentlichungszeitpunkt". Ueberschriften duerfen trennen, sonst sprengen sie 390 px. Greift nur mit lang="de" - das setzt grundgeruest.ts. */ h1, h2, h3 { hyphens: auto; overflow-wrap: break-word; line-height: var(--zeilenhoehe-eng); letter-spacing: var(--laufweite-eng); } /* =================================================================== DAS GEWICHT IST GETRENNT — Frage 4, entschieden am 05.08.2026 =================================================================== Hier stand `font-weight: var(--schrift-fett)` auf allen dreien. ENTSCHIEDEN: „600 für Fließtext und Zwischentitel, 700–800 nur für den Seitentitel." Damit ist `h1` der eine Fall, der schwer bleiben darf, und `h2`/`h3` sind Zwischentitel. DER BELEG, aus dem die Frage kam: in Jitters Startseiten-CSS steht Gewicht 600 in 15 Regeln, 800 in zwei, 700 in einer. Sein Größensprung entsteht über die GRÖSSE. Wer bei 15-px-Text 700–800 nimmt, bekommt keinen Sprung, sondern eine schwere Fläche. 45 weitere Regeln sind mit derselben Entscheidung auf 600 gefallen. Nicht angefasst: Bereich 02 (abgenommen) und die drei Seitentitel `.seitentitel`, `h1`, `.rechtstext__ueberschrift`. */ h1 { font-size: var(--groesse-h1); font-weight: var(--schrift-fett); } h2 { font-size: var(--groesse-h2); font-weight: var(--schrift-halbfett); } h3 { font-size: var(--groesse-h3); font-weight: var(--schrift-halbfett); } /* --- Fokus ------------------------------------------------- */ /* EIN TRAEGER, NICHT ZWEI. Vorher wechselte am Feld zusaetzlich der Rahmen die Farbe - zwei Ringe uebereinander, das wirkte schwer. Jetzt gibt es genau diese Regel, und sie gilt fuer alles: Knopf, Feld, Textbereich, Auswahlliste, Chip, Karte, Listeneintrag. Der Ring liegt AUSSEN mit Abstand. Sein Kontrast zaehlt gegen den Untergrund, nicht gegen das Element - gemessen 9,13 bis 11,61:1 auf allen Flaechen, die es bei uns gibt. Wer hier outline: none setzt, nimmt dem Element den einzigen Fokustraeger. Es gibt keinen Ersatz mehr, den man daneben schreiben koennte. */ :focus-visible, .zeige-fokus { outline: var(--fokusring) solid var(--farbe-fokusring); outline-offset: var(--fokusring-abstand); /* DER WEISSE SAUM AUSSEN — 05.08.2026, zweifarbiger Ring. Der Schatten deckt 0 bis 8 px, die Outline liegt bei 3 bis 6 px und wird UEBER ihm gemalt. Sichtbar bleibt: Weiss aussen, Tinte in der Mitte, Weiss im Abstand. Damit traegt der Ring auf jedem Grund, und Bereich 02 braucht keine eigene Regel. Begruendung und Zahlen in tokens.css. */ box-shadow: 0 0 0 var(--fokusring-saum) var(--farbe-fokusring-saum); } /* =================================================================== DER RING TRAEGT DIE FARBE SEINES ELEMENTS — 03.08.2026, nach Jitter =================================================================== GEMESSEN aus seinen Stilvorlagen: er baut den Fokus als `::before` mit `border: 1px solid ` und `inset: -4px`. Der lila Knopf bekommt einen lila Ring, der rote einen roten, der weisse auf Dunkel einen weissen. DAS IST DIE EINE IDEE, DIE ICH HIER UEBERNEHME, und sie ist besser als unser Einheitsring: ein lila Ring um einen roten Loeschen-Knopf sagt, dass der Fokus zu etwas anderem gehoert als der Knopf. Der Ring in der Farbe des Elements sagt „DIESES hier". SEINE STAERKE UEBERNEHME ICH NICHT — angesagt am 03.08.2026 und nicht widersprochen. 1 px ist auf einem Tablet in der Sonne, mit Lesebrille, ueber einem Arbeitshandschuh nicht zu finden. `--fokusring` bleibt bei 3 px; das ist der Wert, der fuer diese Zielgruppe gemessen wurde. ES GILT NUR, WO EIN ELEMENT WIRKLICH EINE EIGENE FARBE HAT. Ueberall sonst bleibt der Ring in der Primaerfarbe: sie ist auf Kontrast geprueft, und ein Ring, der die Farbe eines hellen Elements erbt, koennte die 3:1 aus WCAG 2.4.11 reissen. */ .knopf--gefahr:is(:focus-visible, .zeige-fokus), .knopf--gefahr-umriss:is(:focus-visible, .zeige-fokus), .knopf--still.knopf--gefahr:is(:focus-visible, .zeige-fokus) { outline-color: var(--farbe-fehler); } /* HIER STAND EINE AUSNAHME FUER DUNKLEN GRUND, und sie ist am 05.08.2026 gefallen — nicht weil sie unrecht hatte, sondern weil ihr Grund weg ist. Sie lautete: „Auf dunklem Grund ist die Primaerfarbe der falsche Ring: sie haelt gegen --farbe-text zu wenig. Weiss ist dort der einzige Ton, der traegt." Das stimmte, solange der Ring EINE Farbe hatte. Seit er zwei hat — Tinte innen, Weiss aussen —, traegt auf dunklem Grund der Saum und auf hellem die Tinte. Eine Regel, die den Ring hier wieder einfarbig macht, naehme genau die Haelfte weg, die an dieser Stelle arbeitet. */ /* --- Sprungmarke ------------------------------------------- */ /* Erster Punkt der Tabulatorfolge. Unsichtbar, bis sie den Fokus hat - dann sichtbar an derselben Stelle, an der sie auch anspringt. */ .sprungmarke { position: absolute; left: var(--abstand-3); top: calc(var(--abstand-3) * -6); z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: var(--abstand-2) var(--abstand-4); border-radius: var(--radius-klein); background: var(--farbe-primaer); color: var(--farbe-primaer-kontrast); font-weight: var(--schrift-halbfett); text-decoration: none; transition: top var(--dauer-mittel) var(--kurve); } .sprungmarke:focus { top: var(--abstand-3); } /* --- Nur fuer Vorleseprogramme ------------------------------ */ .nur-vorlesen { position: absolute; /* `left: 0` — nachgetragen am 04.08.2026, gefunden durch Baustelle 0.1. Ohne die Zeile beginnt das Element dort, wo es im Fluss stuende, und laeuft von da aus nach rechts. Bei einer `` reicht das `overflow: hidden` darueber nicht: eine Tabelle richtet ihre Spalten nach ihrem Inhalt aus, nicht nach der 1-px-Breite ihres Kastens. Gemessen auf `/uebersicht` bei 390 px: `table.verlauf__zahlen` begann bei x = 43 und endete bei 393 — drei Pixel Querscroll fuer eine Tabelle, die niemand sieht. Vorher fing `overflow: hidden` an `.inhalt` es ab; das ist mit Baustelle 0.1 gefallen. */ left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* WAS `.nur-vorlesen` NICHT KANN, und der Ort dafuer — 06.08.2026. ============================================================== Der Vermerk darueber sagt es schon: „eine Tabelle richtet ihre Spalten nach ihrem Inhalt aus, nicht nach der 1-px-Breite ihres Kastens." `left: 0` hat das am 04.08.2026 entschaerft, nicht behoben — es hat nur den Anfang festgenagelt. Solange die Verlaufstabelle zwei Spalten hatte, passte ihre Mindestbreite zufaellig in die 350 px, die bei 390 px Fenster zur Verfuegung stehen. Mit fuenf Spalten waren es gemessene 102 px Querlauf. DIE ABHILFE STEHT NICHT HIER, SONDERN AM AUFRUFER: die Tabelle steckt seit dem 06.08.2026 in einem `
`, und `nur-vorlesen` sitzt auf DEM. Ein Block-Element laesst sich auf 1 px klemmen und schneidet ab; eine Tabelle nicht. WER DIE NAECHSTE TABELLE VERSTECKT, macht es genauso. Eine Regel wie `table.nur-vorlesen { table-layout: fixed }` haette es hier auch getan — sie loest aber nur den Querlauf und nicht den zweiten Fall, der am selben Tag auffiel: OHNE SKRIPT ist die Tabelle sichtbar und lief bei 390 px 129 px ueber die Kante. Beides braucht denselben Kasten, also gibt es ihn einmal. */ /* ============================================================ QUERSCHNITT Q8 - Bildlauf und Schnittkante BEFUND 2.2 DES BAUAUFTRAGS, gemessen: das Fenster scrollt auf keiner einzigen Seite (scrollHeight = clientHeight, ueberall) — gescrollt wird ausschliesslich in inneren Behaeltern. Der Inhalt ist damit ERREICHBAR. Nur sagt es niemandem jemand: /posteingang 1440 sichtbar 561 von 4891 verborgen 4330 /posteingang 390 sichtbar 451 von 4891 verborgen 4440 /inhalte 1440 sichtbar 566 von 5098 verborgen 4532 /ziele 390 sichtbar 520 von 943 verborgen 423 Kein Verlauf, kein Schatten, keine sichtbare Bildlaufleiste. Im Bild endet die Liste mitten in einer Zeile und liest sich als „hier ist die Liste zu Ende". Die Marke dafuer steht schon im Markup: `data-bildlauf="eigen"`. Sie sagt seit dem 31.07.2026 „diese Flaeche darf laenger werden als ihr Kasten und bringt ihren Bildlauf selbst mit", und die Huellenwache prueft daran, ob das auch stimmt. Genau dieselbe Menge braucht das Zeichen — deshalb haengt es an derselben Marke und nicht an einer zweiten Klasse, die man vergessen kann. DIE REGELN DAZU STEHEN AM ENDE DIESER DATEI, nicht hier. Grund siehe dort: eine Regel, die fuer alle gilt, muss NACH den Einzelfaellen stehen, sonst gewinnt der Einzelfall. ============================================================ */ /* ============================================================ QUERSCHNITT Q5.4 - Auf- und Zuklappen: NICHT IN DIESER RUNDE Der Bauauftrag fuehrt es als „gebaut, CSS". Es ist es nicht, und das ist eine Entscheidung mit Grund, kein Vergessen. Regel 12 beschreibt ein Aufklappen als „Hoehe waechst in 200 ms, Pfeil dreht sich gleichzeitig". Das setzt eine Flaeche IM FLUSS voraus, die laenger wird und alles darunter mitschiebt. IM PRODUKT GIBT ES HEUTE GENAU EIN `
` — den Betriebs-Umschalter (`.betrieb--wahl`). Seine Liste ist `position: absolute` und legt sich UEBER den Inhalt: ihre Hoehe waechst nicht, sie erscheint. Das ist ein Ausklapp-Menue, nicht das Muster aus Regel 12. Beides unter denselben Namen zu bauen hiesse, zwei verschiedene Bewegungen gleich zu nennen — und der Naechste haelt die eine fuer die andere. SEIN ORT KOMMT NOCH, und er steht schon fest: §Q9.1 nennt das Konto-Menue als `
` (Bereich 21), Kapitel 20 die drei Rollenzeilen. Beide sind eigene Runden. §Q5.9 zieht dieselbe Linie fuer vier andere Muster: „Sie ohne Ort zu bauen hiesse, den Ort zu erfinden — das ist eine Entscheidung, keine Umsetzung." Damit stehen nach dieser Runde SIEBEN laufende Muster, nicht acht. Die Zaehlung steht in design-system/ABDECKUNG.md. ============================================================ */ /* ============================================================ QUERSCHNITT Q5.6 - Der Haken Regel 12: „450 ms Zeichnung nach Upload oder Boost-Freigabe. Einmal, nicht bei jedem Blick." OHNE SKRIPT UND OHNE ZEITGEBER: die Seite wird nach dem Vorgang neu geladen, die Animation laeuft beim Aufbau. „Einmal" ergibt sich damit von selbst — es gibt nichts, was sie ein zweites Mal ausloesen koennte. DIE PFADLAENGE IST ABGELESEN, NICHT GERATEN. Das Zeichen `haken` liegt auf 24 x 24 Rastereinheiten und laeuft von (20,6) ueber (9,17) nach (4,12): sqrt(11^2+11^2) + sqrt(5^2+5^2) = 15,56 + 7,07 = 22,63 Rastereinheiten. Aufgerundet 23 — ein Rest laesst den Haken unfertig aussehen, ein Ueberschuss nicht. ============================================================ */ /* NUR AM ERFOLG, NICHT AM ABGEARBEITETEN POSTEINGANG. Beide zeichnen denselben Haken (`bild()` in `zustaende.ts`), und das ist richtig — ein leerer Posteingang IST ein Erfolg. Aber `erfolg` ist ein EREIGNIS („Ist raus"), `leer-abgearbeitet` ein ZUSTAND. Regel 12 sagt „einmal, nicht bei jedem Blick": eine Zeichnung, die jedes Mal laeuft, wenn nichts zu tun ist, ist genau das Gegenteil. */ .zustand--erfolg .zustand__haken .symbol path, .zustand--erfolg .zustand__haken .symbol polyline { stroke-dasharray: 23; stroke-dashoffset: 23; animation: haken var(--dauer-lang) var(--kurve) forwards; } @keyframes haken { to { stroke-dashoffset: 0; } } /* ============================================================ QUERSCHNITT Q5.8 - Der Seitenwechsel BEI UNS IST JEDER KLICK EIN SEITENWECHSEL: Filter setzen, Reiter wechseln, Nachricht oeffnen, Ordner oeffnen — alles laeuft ueber `?parameter=`. Ohne Uebergang sieht JEDE dieser Handlungen aus wie ein Neustart. WARUM DAS TROTZ „OHNE SKRIPT" ERLAUBT IST: es ist kein Skript und keine Bibliothek, es ist eine CSS-Eigenschaft. Wo der Browser sie nicht kennt, passiert GENAU das, was heute passiert — die Seite wechselt ohne Bewegung. Kein kaputter Zustand, keine Zwischenschicht, kein „geht bei dir nicht". Das ist der Grund, aus dem dieser Bereich Skript ablehnt, und er greift hier nicht. DAS GILT JETZT FUER DAS GANZE PRODUKT, nicht mehr nur fuer /einrichten. `oeffentlich/einrichten.css` behaelt seinen eigenen, ausgemessenen Uebergang und ueberschreibt diesen hier — es wird NACH oberflaeche.css geladen. Was sich aendert: der Sprung von /einrichten hinaus bekommt jetzt auch einen; vorher erklaerte das Zieldokument nichts und es blieb ein Schnitt. DIE HUELLE BLEIBT STEHEN. Sie ist auf jeder Seite dasselbe Element; ein eigener Name nimmt sie aus dem Wurzelwechsel heraus, sie bekommt gar keine Animation. =================================================================== */ @view-transition { navigation: auto; } /* HIER STANDEN ZWEI VERSUCHE, DIE NICHTS TATEN — 18.08.2026, und sie gehoeren aufgeschrieben statt stillschweigend entfernt. Gemeldet: „Beim Seitenuebergang stehen unten und rechts die Scrollleisten." `::view-transition { overflow: clip }` stand hier und aenderte den Messwert um NULL Pixel. Der Schluss von damals — „das Pseudo-Element traegt den Ueberlauf also nicht" — war falsch, und zwar nicht wegen der Zahl, sondern wegen der FRAGE: gemessen wurde `documentElement.scrollWidth`, und das Overlay ist `position: fixed`. Es traegt zum Dokument-Bildlauf grundsaetzlich nichts bei, egal was man ihm anhaengt. Ebenso starb die Vermutung „die Animation": `seite-herein` skaliere um 2 %, das waeren rund 43 px, gemessen seien 269 — also nicht die Animation. Auch dieser Schluss stand auf der falschen Messung. Die 269 px waren ein Zwischenstand mitten im Parsen (ein `ResizeObserver` fand danach keine einzige Hoehenaenderung), und die Animation WAR die Ursache. DIE LOESUNG STEHT BEI `@keyframes seite-herein`. Sie kam aus einer Frage an den Melder — „nur waehrend des Uebergangs oder auch danach?" — und aus dem Lesen der eigenen Keyframes, nicht aus einer sechsten Messung. */ /* ZWEI STATT DREI — 03.08.2026. `.unterleiste` ist mit der Reiterleiste gefallen. Ein `view-transition-name` auf einem Wähler, den es nicht mehr gibt, ist die erste Erscheinungsform aus PRUEFUNGEN.md in ihrer stillen Form: er sieht nach einer Aussage aus und trifft nichts. ZWEI NAMEN MUESSEN ES BLEIBEN und nicht einer: die Kopfzeile liegt fest am Fenster, die Leiste steht in der Spalte. Ein gemeinsamer Name auf zwei Elementen an verschiedenen Orten waere doppelt vergeben. */ .leiste { view-transition-name: huelle-leiste; } .kopf { view-transition-name: huelle-kopf; } ::view-transition-old(root) { animation: seite-hinaus var(--dauer-uebergang) var(--kurve-hinaus) forwards; } ::view-transition-new(root) { animation: seite-herein var(--dauer-uebergang) var(--kurve) backwards; } @keyframes seite-hinaus { to { opacity: 0; transform: translateX(-32px); } } /* =================================================================== SIE WAECHST HEREIN, STATT ZU SCHRUMPFEN — 18.08.2026, gemeldet =================================================================== GEMELDET: „Beim Seitenuebergang stehen unten und rechts die Scrollleisten. Sie sollen weg." Auf Rueckfrage praezisiert: NUR WAEHREND des Uebergangs, danach nicht. HIER STAND `scale(1.02)`. Der Schnappschuss von `::view-transition-new(root)` ist genau so gross wie das Sichtfeld; 2 % groesser ragt er auf ALLEN VIER Seiten darueber hinaus — bei 1440 x 900 sind das rund 14 px links und rechts, 9 px oben und unten. Sichtbar wird davon, was der Browser als Leiste zeigt: unten und rechts. `0.98` KANN KEINEN UEBERLAUF ERZEUGEN, und das ist Geometrie statt Vermutung: was kleiner als das Sichtfeld ist, ragt nirgends hinaus. Die Anmutung bleibt ein sanfter Zoom — die neue Seite waechst herein, statt sich auf ihre Groesse zu setzen. Der Austritt (`translateX(-32px)`) bleibt unveraendert: nach LINKS erzeugt keine Leiste. =================================================================== WARUM DAS EINEN GANZEN TAG GEKOSTET HAT — die Messung mass das Falsche =================================================================== Vier Erklaerungen sind vorher gestorben, und die Messung, die sie erschlagen hat, war selbst der Fehler: sie las `documentElement.scrollWidth` — also das DOKUMENT. Das Overlay `::view-transition` ist `position: fixed` und traegt zum Dokument-Bildlauf NICHTS bei. Die Leiste gehoert zum Overlay, gemessen wurde daneben. Deshalb meldete `::view-transition { overflow: clip }` damals „null Pixel Aenderung" und wurde als wirkungslos zurueckgenommen — die Zahl war richtig und die Frage falsch. Und deshalb fuehrte die Suche ueber `scrollbar-gutter` in eine Richtung, die mit der Sache nichts zu tun hatte: sie reserviert Platz im Dokument, und dort war nie ein Problem. DIE LEHRE: wer eine Erscheinung nicht reproduzieren kann, prueft zuerst, ob er am richtigen Gegenstand misst. Fuenf Messungen an der falschen Stelle ergeben fuenf richtige Zahlen und keine Antwort. Die Antwort kam aus einer Frage an den Melder („nur waehrend oder auch danach?") und aus dem Lesen der eigenen Keyframes. */ @keyframes seite-herein { from { opacity: 0; transform: scale(0.98); } } /* DER SICHTWECHSEL FAELLT NICHT UNTER DIE STERNCHEN-REGEL weiter unten: er laeuft auf einer eigenen Pseudo-Ebene, die `*, *::before, *::after` nicht erreicht. Wer Bewegung abgeschaltet hat, saehe sonst als Einziges genau diesen Uebergang. */ @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* ============================================================ DER ABSCHNITT - das tragende Mittel unserer Website Angesagt am 04.08.2026: "Das ist wirklich der Stil eins zu eins uebernommen auf allen, auf Posteingang, Inbox etc. Also mehr grosse graue Flaechen." GEMESSEN AN DER VORLAGE, nicht nachempfunden. Auf der Startseite von EB-Software-Website bei 1440 px: weiss #ffffff 30.049k Bildpunkte grau #f2f1f3 12.393k Bildpunkte Linie #e5e4e7 5.435k Bildpunkte (auch als FLAECHE) Das Grau traegt gut ein Drittel der Seite. Es ist aber KEIN Seitengrund: der bleibt weiss. Nachgemessen an vier ihrer Seiten - Drafts, Trash und 404 sind weiss ohne eine einzige Karte, grau ist der Abschnitt. Genau diese Unterscheidung war am 03.08.2026 der Grund fuer `6e8afc9` ("warum ist alles grau auf einmal, das ist falsch"), und sie gilt weiter. DER KASTEN HAT KEINEN ECKENRADIUS UND KEINEN RAND. Der Kachelblock der Vorlage traegt beides nicht - was ihn traegt, ist die Flaeche und die Polsterung. Das passt zu der Entscheidung vom 03.08.2026, die Knoepfe eckig zu machen. DIE WAEHLER DER VORLAGE STEHEN HIER OHNE PUNKT. Sie gehoeren einem anderen Stilblatt; mit Punkt geschrieben behaupten sie, es gaebe sie hier - und die Blockpruefung in huelle.test.ts meldet das zu Recht, sie liest Kommentare mit. ============================================================ */ /* HIER WIRD `--inhalt-breite` ZUM ERSTEN MAL GELESEN. Bis zum 04.08.2026 trug er zwoelf Zeilen Herleitung und NULL Verwendungen - wer ihn angehoben haette, haette nichts geaendert und gemeldet, es sei erledigt. Der Abschnitt ist der Behaelter, den er die ganze Zeit beschrieben hat. */ /* =================================================================== DIE SEKTION IST DURCHSICHTIG — 05.08.2026, gemessen an der Vorlage =================================================================== Gerendert an Jitters Startseite: **alle sieben** Sektionen tragen Radius 0, keinen Grund und kein Polster. Den Abstand tragen ihre KINDER; nur der Hero hat 240 px oben. Was Flaeche traegt, sind die Kacheln darin — und die tragen 0 oder 40 px Rundung. `--abschnitt-radius` und `--abschnitt-polsterung` pflegten damit etwas, das die Vorlage nicht hat. Beide sind gefallen. DAS ERLEDIGT KASTEN-IN-KASTEN AN DER WURZEL, statt es Seite fuer Seite aufzuloesen: eine graue Wanne mit weissen Karten darin kann es nicht mehr geben, wenn die Wanne keine Flaeche hat. */ .abschnitt { margin-bottom: var(--abschnitt-abstand); } .abschnitt:last-child { margin-bottom: 0; } /* HIER STAND `.abschnitt--grau` mit `--farbe-flaeche-gedaempft`. Sie war die graue Wanne aus dem Befund „Kasten-in-Kasten lebt: zwei graue Wannen, jede mit zwei weissen Karten darin". Sie faellt mit dem Grund der Sektion — eine Klasse, die eine Flaeche setzt, wo die Vorlage keine hat, ist kein Baustein, sondern eine Ebene zu viel. Der graue Grund der EINSTELLUNGEN ist davon nicht betroffen: er ist ausdruecklich abgesegnet („Grauer Grund bleibt so. Frage nicht danach") und liegt an `.einstellungen`, nicht hier. */ /* KARTEN AUF GRAU BLEIBEN WEISS. Das ist gemessen und nicht gewaehlt: `6e8afc9` hat am 03.08.2026 vier Seiten der Vorlage ausgezaehlt, und die eine graue darunter - Settings - traegt zwei WEISSE Karten. Der naheliegende Gegenvorschlag war #f3f3f5, die zweite Graustufe der Vorlage. Ausprobiert und wieder verworfen: auf #f2f1f3 ist sie einen Zahlenwert je Kanal entfernt und damit praktisch unsichtbar. Die Vorlage benutzt sie auch nicht dafuer, sondern fuer eine Karte in einem Stapel (stapelkarte--eins). Weiss auf Grau ist der Kontrast, den der Kasten braucht. */ /* Die farbigen Abschnitte. Jeder traegt DUNKLEN Text - das ist keine Stilfrage: der beste Wert der ganzen Akzentfamilie gegen Weiss ist 2,89:1, gegen Tinte der schlechteste 6,16:1. Deshalb setzt die Vorlage nirgends Weiss darauf. */ .abschnitt--violett { background-color: var(--farbe-akzent-violett-blass); } .abschnitt--gelb { background-color: var(--farbe-akzent-gelb-blass); } .abschnitt--cyan { background-color: var(--farbe-akzent-cyan-blass); } .abschnitt--violett, .abschnitt--gelb, .abschnitt--cyan { color: var(--farbe-text); } /* DIE AUGENBRAUE - die kleine Zeile ueber der Ueberschrift. Auf `referenzen.html` steht dort "REFERENZEN" in gedaempftem Grau, gesperrt, klein und in Grossbuchstaben. Sie sagt, wo man ist, ohne eine zweite Ueberschrift zu sein. GESPERRT UND IN GROSSBUCHSTABEN, aber NICHT als `text-transform` allein: Vorleseprogramme lesen `REFERENZEN` sonst als Buchstabenfolge. Der Text steht in normaler Schreibweise im Markup, die Anzeige macht die Stilvorlage. */ /* DIE TEXTHERVORHEBUNG. Auf der Startseite steht sie in der grauen Pille oben: "Neu: Antworten auf Kommentare, ganz von allein Mehr dazu" - der letzte Teil in der Handlungsfarbe. SIE IST KEIN . Ein `mark` behauptet eine Fundstelle; was hier gemeint ist, ist Betonung. Und sie traegt NIE allein die Aussage - Regel 11: Farbe ist nie der einzige Traeger, deshalb steht sie zusaetzlich halbfett. */ .hervor { color: var(--farbe-primaer); font-weight: var(--schrift-halbfett); } /* Die gelbe Hinterlegung, wie auf `referenzen.html`. Sie faerbt die FLAECHE hinter dem Wort, nicht das Wort - dunkler Text auf Gelb haelt 16,40:1. */ .hervor--flaeche { color: inherit; background-color: var(--farbe-akzent-gelb-blass); box-decoration-break: clone; padding: .1em .3em; } /* ============================================================ BEREICH 09 - UI-Bausteine Modal, Seitenpanel, Toast, Schalter, Chips. Dazu der Knopf, den i1 mitbeschreibt ("Abbrechen als Umriss, die Handlung gefuellt"). ============================================================ */ /* ============================================================ BEREICH 15 - Icons und Grafikstil Entscheidung p6: Linien-Icons, weisse Umrisse auf der farbigen Leiste, jedes mit einem Wort darunter. Fuer Leerzustaende einfarbige graue Strichzeichnungen. STRICHSTAERKE, ENDEN UND ECKEN STEHEN HIER - EINMAL. Nicht 27 Mal im Markup. Wer sie dort setzt, muss sie 27 Mal richtig setzen. Die Werte und die Begruendung fuer den optischen Ausgleich stehen in tokens.css. ============================================================ */ .symbol { /* Standard: 24 px. Die drei Groessen sind Tokens; eine vierte gibt es nicht. */ width: var(--symbol-standard); height: var(--symbol-standard); flex: none; stroke-width: var(--symbol-strich); stroke-linecap: var(--symbol-enden); stroke-linejoin: var(--symbol-ecken); } /* OPTISCHER AUSGLEICH. Ein Strich in Rastereinheiten skaliert mit: 2,25 auf 20 px waeren nur 1,875 px und damit unter der Auflage aus Regel 15 ("mindestens 2 px, eher 2,25"). Also dickerer Strich im Raster, damit der gerenderte gleich bleibt. */ .symbol--klein { width: var(--symbol-klein); height: var(--symbol-klein); stroke-width: var(--symbol-strich-klein); } /* Nach oben wird NICHT ausgeglichen: ein grosses Symbol mit 2,25 px Strich wirkt spindelig. Gerendert sind es hier 3 px. */ .symbol--gross { width: var(--symbol-gross); height: var(--symbol-gross); } /* --- Graue Strichzeichnungen -------------------------------- */ /* Regel 15: "einfarbige graue Strichzeichnung - sehr zurueckhaltend, kein Bild mit Farbe." Sie ist Verzierung: der Satz in Frageform daneben traegt die Aussage (Regel 10). Deshalb ist sie leiser als Text und im Markup aria-hidden. */ .zeichnung { display: block; width: 128px; height: 96px; margin: 0 auto; color: var(--farbe-zeichnung); stroke-width: var(--zeichnung-strich); stroke-linecap: var(--symbol-enden); stroke-linejoin: var(--symbol-ecken); } /* --- Leerbilder: die farbigen Illustrationen ----------------- */ /* GETAUSCHT AM 01.08.2026. Bis dahin stand hier eine graue Strichzeichnung (`.zeichnung` oben), und `leerbild.ts` war als Austauschstelle dafuer gebaut. Der Tausch war genau die Dateiaenderung, als die er vorgemerkt war: kein Aufrufer hat sich geaendert. HOEHE STATT BREITE. Die fuenf Dateien haben Seitenverhaeltnisse von 1,88:1 bis 1,02:1 — mit einer festen BREITE waere das hoechste Bild fast doppelt so hoch wie das flachste, und der Leerzustand saehe auf jeder Seite anders aus. Ueber die Hoehe stehen alle fuenf gleich hoch da; `width: auto` haelt das Verhaeltnis. `max-width` ist die Reissleine fuer 390 px: das flachste Bild waere bei 200 px Hoehe 376 px breit und damit fast so breit wie der Bildschirm. */ /* EINE REGEL FÜR ALLE SECHZEHN — 02.08.2026, angesagt: „feste Rahmenhöhe, Breite ergibt sich, mittig und unverzerrt eingepasst. Kein Motiv darf das Layout bestimmen." Sie stand bisher nur an `.leerbild`; die Fehlerseiten und der Wizard brachten ihre eigenen Maße mit. Damit bestimmte das Motiv den Ort: die sechzehn Dateien laufen von 1,88 : 1 bis 1,02 : 1, und wer ein flacheres nachlegt, verschiebt die Seite darunter. `object-fit: contain` ist die Auflage „unverzerrt": ohne sie hängt es davon ab, ob Höhe und Breite zusammenpassen — und das weiß nur die Datei. `--bildrahmen` ist der eine Wert; die drei Orte setzen ihn um, statt ihn zu wiederholen. HIER STAND AUCH `.wizard__bild` — mit dem Quartals-Wizard gefallen (12.08.2026). Was blieb, war ein Element ohne Block: die Wache „kein Baustein greift in die Klassen eines anderen" hat es gemeldet, sobald sie die Vermerke nicht mehr mitliest. */ /* =================================================================== DIE VOLLTON-FLAECHE IM LEERZUSTAND — Baustelle 0.4, 04.08.2026 =================================================================== `.leerbild` stand hier mit und war ein ``. Angesagt: „Leerzustaende bekommen vorerst nur Typografie und eine Vollton-Flaeche. Emoji kommen am Ende, gemeinsam mit der Einrichtungs-Tour, in einem eigenen Auftrag." SIE HAELT DEN PLATZ, den das Motiv spaeter bekommt — dieselbe Hoehe (`--bildrahmen`), dieselbe Mitte. Wer die Emoji nachlegt, tauscht den Inhalt und nicht die Geometrie darunter. RUNDUNG 40 PX. [gemessen] Jitters grosse Kacheln tragen `4rem` bei `html { font-size: 10px }`, siehe `vorlage/jitter/MESSUNG.md`. Bei uns steht dieselbe Zahl als Pixel, weil unsere Wurzel 16 px ist. WELCHE STELLE WELCHEN TON HAT, steht in `UEBERGABE.md`. Sie haengt am Namen des Leerzustands und nicht an der Seite: derselbe Zustand sieht ueberall gleich aus, zwei verschiedene auf einer Seite unterscheiden sich. */ /* =================================================================== DIE SZENEN DER LEERZUSTAENDE — 19.10.2026, Lennard: „diesen Artstyle nutzen wir nicht mehr, schau dir die Website an, die Motion-Grafiken" =================================================================== Hier standen vier Vollton-Toene (04.08.2026) und `img.leerflaeche` fuer die drei PNG (10.08.2026). Jetzt ist die Flaeche der GRAUE GRUND der Website, und darauf liegt eine Szene aus ihren Bausteinen: weisse Karte mit kleiner Rundung, Symbole im Markenblau in hellblauen Kreisen, graue Zeilen, gestrichelte Plaetze, ein kleiner schwarzer Knopf, darunter eine schwebende Pille (`leerbild.ts`). ALLES IN `em`, und die Groesse kommt aus der HOEHE DER FLAECHE (`container-type: size`, `cqh`): dieselbe Szene steht ueber einem Leerzustand bei 260 bzw. 200 px und im Drive bei 120 px. DIE RUNDUNG IST DIE DER WEBSITE-KARTEN (0,8 rem bei 9,1 px ≈ 7 px), nicht mehr die 40 px der Jitter-Kacheln. */ .leerflaeche { display: block; height: var(--bildrahmen); width: min(100%, 20rem); margin: 0 auto; border-radius: 8px; background: var(--farbe-flaeche-gedaempft); container-type: size; overflow: hidden; } .leerszene { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9em; height: 100%; /* NICHT UNTER 14 PX: darunter waeren die Symbole kleiner als 16 px, und ihr Strich faellt unter die 2,25 px, die `messungen.spec.ts` fuer jedes Symbol verlangt. Wo die Flaeche dafuer zu klein ist (Drive, 120 px), steht das Zeichen allein (`.dateien__leer`). */ font-size: clamp(14px, 7cqh, 17px); } /* DER STRICH IST KRAEFTIGER ALS IM SATZ (3,4 statt 2,25 Rastereinheiten): gemessen 19.10.2026 lagen die Symbole der Szene bei 16,1 px Kante und 1,51 px Strich, die Hausregel verlangt 2,25. 3,4 × 16,1 / 24 = 2,28. */ .leerszene .symbol { width: 1.15em; height: 1.15em; stroke-width: 3.4; } .leerszene__karte { display: flex; flex-direction: column; gap: 0.7em; width: 13em; max-width: 88%; padding: 1em; border-radius: 0.45em; background: var(--farbe-flaeche); box-shadow: var(--schatten-2); animation: leerszene-setzen var(--dauer-erzaehlen) var(--kurve) both; } .leerszene__zeile { display: flex; align-items: center; gap: 0.7em; } .leerszene__zeile--blass { opacity: 0.45; } .leerszene__kreis { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--farbe-primaer-sehr-hell); color: var(--farbe-akzent-violett-kraeftig); } /* „Hier liegt nichts": gestrichelt statt gefuellt. */ .leerszene__kreis--offen { background: none; border: 0.1em dashed var(--farbe-rand-bedienelement); } .leerszene__striche { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.45em; min-width: 0; } .leerszene__strich { display: block; height: 0.5em; width: 100%; border-radius: 0.25em; background: var(--farbe-rand); } .leerszene__strich--kurz { width: 60%; } /* Gestrichelt wirkten die duennen Zeilen wie Doppellinien (im Bild gesehen) — sie werden blasser statt gestrichelt. */ .leerszene__zeile--offen .leerszene__strich { background: var(--farbe-flaeche-gedaempft); } /* Drive und Inhalte: Plaetze nebeneinander, darunter der Knopf. */ .leerszene__karte--raster { align-items: flex-end; } /* Eine Zeile darin geht ueber die volle Breite — sonst schrumpft sie auf ihren Kreis (im Bild gesehen, „Inhalte"). */ .leerszene__karte--raster > .leerszene__zeile { align-self: stretch; } .leerszene__plaetze { display: flex; gap: 0.6em; width: 100%; } .leerszene__platz { flex: 1 1 0; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; min-width: 0; border: 0.1em dashed var(--farbe-rand-bedienelement); border-radius: 0.3em; color: var(--farbe-akzent-violett-kraeftig); } .leerszene__knopf { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.2em; height: 2.2em; border-radius: 0.3em; background: var(--farbe-text); color: var(--farbe-flaeche); } /* Der Weg vom Kanal ins Portal, wie „Nachbarstadt — Ihr Ort". */ .leerszene__karte--weg { flex-direction: row; align-items: center; gap: 0.6em; } .leerszene__quellen { display: flex; flex-direction: column; gap: 0.45em; } .leerszene__weg { flex: 1 1 auto; min-width: 1em; border-top: 0.12em dashed var(--farbe-rand-bedienelement); } .leerszene__suchzeile { display: block; height: 1.6em; border-radius: 0.8em; background: var(--farbe-flaeche-gedaempft); } .leerszene__spur { display: block; height: 0.6em; border-radius: 0.3em; background: var(--farbe-flaeche-gedaempft); overflow: hidden; } .leerszene__fuellung { display: block; width: 8%; height: 100%; background: var(--farbe-akzent-violett-kraeftig); } .leerszene__pille { display: inline-flex; align-items: center; gap: 0.6em; width: 8em; padding: 0.6em 1em; border-radius: 999px; background: var(--farbe-flaeche); box-shadow: var(--schatten-2); color: var(--farbe-akzent-violett-kraeftig); animation: leerszene-schweben var(--dauer-erzaehlen) var(--kurve) 0.25s both; } .leerszene__pille .leerszene__strich { flex: 1 1 auto; } @keyframes leerszene-setzen { from { opacity: 0; transform: translateY(0.6em); } to { opacity: 1; transform: none; } } @keyframes leerszene-schweben { from { opacity: 0; transform: translateY(1.2em); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .leerszene__karte, .leerszene__pille { animation: none; } } /* DAS ZEICHEN ALLEIN — nur wo die Karte nicht passt (neben einem Satz in den Einstellungen, 48 bzw. 72 px; die Regeln dafuer stehen dort, bei `.block__leerbild`). Sonst steht es nicht da. */ .leerszene__zeichen { display: none; } /* =================================================================== DIE PILLE — Baustelle 2.1, 04.08.2026, angesagt „Gemischt" =================================================================== Vorgelegt war die Frage, ob die Knoepfe rund werden: Commit `4e6efce` hatte am 03.08.2026 Jitters ANWENDUNG ausgemessen (Drafts 3x Radius 0, Settings 5x Radius 0) und `--radius-knopf` daraufhin auf 0 gesetzt — „seine runden Formen sind nicht seine Knoepfe, die Pillen stehen auf der Marketing-Seite". ENTSCHIEDEN: gemischt. Pillen fuer Hauptaktionen und Vollton-Zusagen, eckig fuer alles Uebrige. `--radius-knopf: 0px` bleibt deshalb der Vorgabewert und gilt weiter fuer jeden gewoehnlichen Knopf; die Pille ist eine ausdrueckliche Variante, die man anfordern muss. WARUM DAS KEIN WIDERSPRUCH IST: die beiden Formen unterscheiden zwei Sorten Knopf, die vorher gleich aussahen. Ein Pillen-Knopf steht auf einer Vollton-Kachel und traegt DIE Handlung der Seite; ein eckiger steht in einem Formular und traegt eine von mehreren. [gemessen] Jitters Pille: `border-radius: 5rem` bei `html { font-size: 10px }` — 50 px. Polsterung `.8rem 5rem`, also aussen sechsmal so viel wie oben und unten. Genau das macht die Form aus, nicht die Rundung allein. */ /* `.knopf.knopf--pille` UND NICHT `.knopf--pille` — berichtigt am 06.08.2026, gefunden beim Hinsehen und nicht von einer Zahl. DIE PILLE WAR NIE EINE. Diese Regel steht bei Zeile 815, die Grundregel `.knopf` bei 1314; beide haben die Spezifitaet 0-1-0, und bei gleicher Spezifitaet gewinnt die spaetere. `.knopf` setzt `border-radius: var(--radius-knopf)` — und das ist 0 — sowie `padding: … var(--abstand-5)` als Kurzform, die `padding-inline` mitnimmt. Beide Zeilen hier waren seit dem 04.08.2026 wirkungslos, auf allen Seiten, die eine Pille anfordern. Es ist derselbe Fehler wie bei `.antwort`, `.quartal` und `.zeichnung`: die spaetere Regel gewinnt, und die frueher stehende sieht im Quelltext richtig aus. Der Doppelname hebt die Spezifitaet auf 0-2-0 und macht die Reihenfolge gleichgueltig. */ .knopf.knopf--pille { border-radius: var(--radius-rund); /* 50 px seitlich waeren bei unserer 16-px-Wurzel unverhaeltnismaessig breit; `--abstand-6` (32 px) haelt das Verhaeltnis zur Hoehe, das Jitter zeigt, ohne die Kachel zu sprengen. */ padding-inline: var(--abstand-6); } /* SCHWARZ GEFUELLT — Jitters `_black_`: Grund `#19171c`, Schrift `#fff`. Das ist die Hauptaktion. Bei uns liegen beide Werte schon als `--farbe-knopf-dunkel` und `--farbe-primaer-kontrast` vor. */ .knopf--dunkel { background: var(--farbe-knopf-dunkel); color: var(--farbe-primaer-kontrast); border-color: transparent; } /* OHNE `color` — 05.08.2026. Die Zeile stand hier und setzte GENAU DEN WERT, den die Grundregel darüber schon setzt: sie hat nie etwas bewirkt und trotzdem die Wache „kein Zustand fasst die Textfarbe an" ausgelöst. Deren Grund ist keine Förmlichkeit: welche Farbe gewinnt, entscheidet bei gleicher Spezifität die Reihenfolge im Stylesheet. Eine Zeile, die heute dasselbe sagt, sagt nach dem nächsten Umbau etwas anderes. */ .knopf--dunkel:is(:hover, .zeige-ueberfahren) { background: var(--farbe-knopf-dunkel-ueberfahren); } /* =================================================================== DIE ANTWORTKACHEL — Baustelle 2.1 =================================================================== „Eine Vollton-Kachel oben, die die eine Antwort traegt (‚7 Nachrichten warten auf dich'), mit Pillen-Knopf direkt in den Posteingang." SIE STEHT DIREKT AUF WEISS, ohne graue Wanne — Baustelle 0.3: „nie eine graue Flaeche, die nur eine einzelne weisse Karte umschliesst". RUNDUNG 40 PX. [gemessen] Jitters grosse Kacheln tragen `4rem` bei 10-px-rem. TINTE, NIE WEISS: auf keinem seiner Volltoene steht weisse Schrift. Der schlechteste Kontrast der drei hier ist Tinte auf `--farbe-akzent-violett` mit 7,27:1. */ .aussage { display: flex; flex-direction: column; align-items: flex-start; gap: var(--abstand-2); margin-bottom: var(--abstand-5); padding: var(--abstand-6); border-radius: 40px; background: var(--farbe-akzent-violett); color: var(--farbe-text); } .aussage--violett { background: var(--farbe-akzent-violett); } .aussage--gelb { background: var(--farbe-akzent-gelb); } .aussage--blau { background: var(--farbe-akzent-blau); } /* =================================================================== EINE FLAECHE OHNE KENNZAHLEN LEGT SICH QUER — 06.08.2026 =================================================================== DIE REGEL DIESER RUNDE LAUTET: „Eine Vollton-Flaeche ueber die volle Breite traegt MEHRERE Dinge ueber die Breite verteilt — oder sie bleibt schmal." Seit die Kennzahlen der Uebersicht eigene Kacheln haben, traegt ihre Flaeche nur noch EIN Ding, und gemessen bei 1920 px blieben rechts davon rund 1370 px violett und leer. SCHMAL WERDEN WAR DIE FALSCHE DER BEIDEN MOEGLICHKEITEN: unter einem Seitentitel ueber die volle Breite und ueber vier Kacheln ueber die volle Breite haette eine schmale Flaeche dazwischen wie ein Rest ausgesehen. ALSO VERTEILT SIE IHR EINES DING. Die Form steht bei Later („Organic Social Overview", Mobbin): ein violettes Band, dessen Inhalt WAAGERECHT liegt — Kennzeichen links, Satz in der Mitte, Handlung rechts. Dieselbe Anordnung wie Jitters „Drafts", wo die Handlungen unter dem Titel die Breite nehmen, statt in der linken Spalte zu stehen. `:has()` UND KEINE ZWEITE KLASSE: ob die Flaeche quer liegt, haengt daran, ob sie Kennzahlen traegt — das steht im Inhalt und nicht im Aufrufer. Eine Marke am Aufrufer koennte man vergessen zu setzen; diese Regel kann man nicht falsch bedienen. NUR AB 45rem. Am Handy stehen drei Dinge nebeneinander nicht — dort bleibt die Spalte, die die Flaeche ohnehin ist. */ @container huelle (min-width: 45rem) { /* EIN RASTER UND KEINE FLEX-ZEILE, und der Unterschied ist der Grund, warum es hier steht: Zahl, Satz und Zusatz sind DREI Geschwister, die zusammengehoeren, der Knopf ist das eine, das gegenuebersteht. In einer Flex-Zeile mit `space-between` landete der Zusatz mittig im Nichts — nachgemessen bei 1920 px stand er allein bei x = 410 mit je 400 px Luft links und rechts. Das Raster stapelt die drei links und stellt den Knopf an die rechte Kante, ueber beide Zeilen mittig. */ .aussage:not(:has(.aussage__kennzahlen)) .aussage__kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--abstand-7); row-gap: var(--abstand-2); /* `.aussage` steht auf `align-items: flex-start` — ohne das hier bliebe der Kopf so breit wie sein Inhalt und die Verteilung liefe ins Leere. */ align-self: stretch; } .aussage:not(:has(.aussage__kennzahlen)) .aussage__zeile { grid-column: 1; grid-row: 1; } .aussage:not(:has(.aussage__kennzahlen)) .aussage__zusatz { grid-column: 1; grid-row: 2; margin: 0; } .aussage:not(:has(.aussage__kennzahlen)) .aussage__kopf > .knopf { grid-column: 2; grid-row: 1 / span 2; justify-self: end; } } /* Zahl und Satz in EINER Zeile: „7 Nachrichten warten auf dich" ist ein Satz, keine Zahl mit Beschriftung darunter. Genau das meint der Auftrag mit „kein Kennwert ohne Bedeutung". */ /* DIE ZAHL STEHT FREI — 05.08.2026. ================================= Hier stand `display: flex; align-items: baseline`, und damit klebte die grosse Zahl an der Textzeile: „7Nachrichten warten auf dich." Bei Jitter steht die grosse Zahl FREI und traegt die Flaeche; der Satz steht darunter, nicht daneben. `flex-direction: column` und `align-items: start` statt einer Zeile: die Zahl bekommt ihre eigene Zeile, der Satz seine. Die Luecke bleibt, sie wirkt jetzt nur senkrecht. */ .aussage__zeile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--abstand-2); margin: 0; /* Ein Flex-Kind ist von sich aus `min-width: auto` und kann nicht unter seinen Inhalt schrumpfen. */ min-width: 0; } /* DIE GROSSE ZAHL ALS BILD — Punkt 7 der Formensprache. Sie nimmt `--groesse-bewertung` (72 px, feste Groesse ohne `clamp`): der Wert wurde fuer die gefallene Bewertungszahl erarbeitet, und die Begruendung gilt hier unveraendert — eine Zahl, die am Handy auf 44 px faellt, ist nicht mehr die auffaelligste Stelle. */ .aussage__zahl { /* GROESSER UND MIT LUFT — 05.08.2026. Sie ist die Aussage, fuer die man die Seite oeffnet, und war mit 72 px kleiner als der Seitentitel daneben. `--groesse-seitentitel` bindet sie an dieselbe Leiter: 72 px bei 1440, 96 ab 1441. */ display: block; font-size: var(--groesse-seitentitel); font-weight: var(--schrift-schwer); line-height: 1; letter-spacing: -0.032em; } @container huelle (min-width: 1441px) { .aussage__zahl { font-size: var(--groesse-seitentitel-weit); } } .aussage__satz { font-size: var(--groesse-gross); font-weight: var(--schrift-halbfett); letter-spacing: var(--laufweite-eng); } /* =================================================================== DIE KENNZAHLEN AUF DER FLAECHE — 05.08.2026 =================================================================== Eine Vollton-Flaeche ueber die volle Breite traegt MEHRERE Dinge ueber die Breite verteilt, oder sie bleibt schmal. Beleg: WRITER aus Messung B — eine violette Flaeche, vier Kennzahlen darauf, je zwei Zeilen. Der Anlass war ein Fund an dieser Seite: seit die Spalte von 938 auf 1776 px gewachsen ist, sassen Zahl, Satz und Knopf in den ersten 400 px, und dreiviertel der Flaeche stand leer. `auto-fit` und `minmax(0, 1fr)`: bei vier Kennzahlen und 1776 px stehen sie nebeneinander, am Handy untereinander. `minmax(0, …)` und nicht `1fr`, weil ein Rasterfeld sonst nicht unter seinen Inhalt schrumpfen kann — dieselbe Falle, die in diesem Umbau siebenmal zugeschlagen hat. */ .aussage__kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--abstand-5); margin: var(--abstand-6) 0 0; padding: 0; } .aussage__kennzahl { min-width: 0; } /* EIN WORT OBEN. Klein und in Tinte — nicht gedaempft: auf Vollton traegt der gedaempfte Ton den Kontrast nicht, und Weiss kommt in der Vorlage auf Vollton nirgends vor. */ .aussage__kennzahl-wort { display: block; font-size: var(--groesse-klein); font-weight: var(--schrift-halbfett); letter-spacing: var(--laufweite-eng); } /* EINE GROSSE ZAHL DARUNTER. Kleiner als die eine Antwort daneben — sie ist die Begleitung, nicht die Aussage. */ .aussage__kennzahl-zahl { display: block; margin: var(--abstand-1) 0 0; font-size: var(--groesse-h2); font-weight: var(--schrift-schwer); line-height: 1.05; letter-spacing: -0.032em; } /* =================================================================== DER PLATZ UNTER ALLEM — 05.08.2026 =================================================================== Fuer eine Anzeige, die auf die Flaeche gehoert und die volle Breite braucht: heute der Fortschrittsbalken des Quartalsziels auf `/ziele`. ER STEHT UNTER KOPF UND KENNZAHLEN UND NICHT IN DER KOPFSPALTE. Ab 1100 px ist der Kopf 20 rem breit — ein Balken darin waere bei 1440 px 320 px lang und bei 1920 px genauso. Eine Anzeige, die mit der Flaeche nicht mitwaechst, ist der Befund dieser Runde in klein. */ .aussage__unten { /* `stretch` GEGEN DAS `align-items: flex-start` DER FLAECHE. Ohne die Zeile ist der Balken so breit wie sein Inhalt — und ein Balken hat keinen, also bliebe er 0 px. Im Rasterfall ab 1100 px greift `justify-items: stretch` von selbst; unterhalb ist die Flaeche eine Flex-Spalte, und dort nicht. */ align-self: stretch; min-width: 0; margin-top: var(--abstand-6); } /* KOPF UND KENNZAHLEN NEBENEINANDER, sobald Platz ist. Der Kopf traegt die eine Antwort und bekommt ein Drittel; die Kennzahlen teilen sich den Rest. Darunter stehen sie untereinander. */ @container huelle (min-width: 1100px) { .aussage:has(.aussage__kennzahlen) { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--abstand-7); align-items: start; } .aussage__kennzahlen { margin-top: 0; } /* Ueber BEIDE Spalten. Ohne diese Zeile landet der Balken unter dem Kopf und ist so breit wie er — 320 px in einer 1296 px breiten Flaeche, mit der rechten Haelfte leer. UND OHNE EIGENES AUSSENMASS: die Zeilenluecke des Rasters ist schon 48 px. Gemessen mit beidem standen 100 px zwischen dem Zusatz und dem Balken — die Flaeche bekam ein Loch in der Mitte. */ .aussage__unten { grid-column: 1 / -1; margin-top: 0; } } /* =================================================================== DER BALKEN AUF DEM VOLLTON — 05.08.2026 =================================================================== GERECHNET, NICHT GESCHAETZT. Der Balken ist fuer weissen Grund gebaut, und auf `--farbe-akzent-violett` (#B593FF) traegt keines seiner drei Teile: Bahn f2f1f3 auf Violett 2,18 : 1 Rand 8a8a8a auf Violett 1,41 : 1 Marke 127a4b auf Violett 2,20 : 1 — unter der 4,5-Auflage Die Bahn wird deshalb eine durchscheinende TINTE und die Fuellung volle Tinte: 7,27:1 gegen den Vollton, dieselbe Zahl wie fuer jede andere Schrift auf dieser Flaeche. Das ist keine Ausnahme, sondern die Regel dieser Runde — TINTE AUF VOLLTON, KEIN WEISS und keine zweite Farbe. DIE MARKE VERLIERT IHR GRUEN UND NICHT IHRE AUSSAGE. Der Vermerk am Baustein sagt es selbst: „Die Marke ist der Traeger. Eine Balkenlaenge liest man nicht ab, und Farbe sagt gar nichts." Was traegt, sind der Haken und die Worte „Ein Monat vor Plan" — beide bleiben. Die Kerbe bleibt weiss: sie liegt IN der Fuellung, und dort ist Weiss der Gegensatz zur Tinte. */ .aussage .balken__bahn { background: color-mix(in srgb, var(--farbe-text) 18%, transparent); border-color: color-mix(in srgb, var(--farbe-text) 32%, transparent); } .aussage .balken__fuellung, .aussage .balken--erreicht .balken__fuellung { background: var(--farbe-text); } .aussage .balken__marke, .aussage .balken--erreicht .balken__marke { color: var(--farbe-text); } /* =================================================================== FLACH — fuer Seiten, deren Arbeitsflaeche die Hoehe braucht =================================================================== Auf der Uebersicht IST die Flaeche die Seite. Im Posteingang steht sie ueber einer Liste, die 90 % der Nutzung traegt — und genau daran ist die Tafel dort am 31.07.2026 schon einmal gescheitert: bei 390 px nahm sie die halbe Bildschirmhoehe, und die Auskunft stand vor der Arbeit. WAS FLACH WEGNIMMT, IST HOEHE UND KEINE AUSSAGE: das Polster faellt von 32 auf 16 px, die grosse Zahl von 96 auf 30 px. Sie bleibt die groesste Ziffer der Flaeche, sie traegt nur nicht mehr die Seite — das tut hier die Liste. Die Zahl gibt damit die Bindung an `--groesse-seitentitel` auf, und das ist der Punkt: auf der Uebersicht soll sie so gross sein wie der Titel, hier ausdruecklich nicht. */ .aussage--flach { gap: var(--abstand-1); margin-bottom: 0; padding: var(--abstand-4) var(--abstand-5); border-radius: 20px; } /* EINE REGEL REICHT, UND ZWAR WEGEN DER SPEZIFITAET. Weiter oben hebt `@container huelle (min-width: 1441px) { .aussage__zahl }` die Groesse auf 96 px — eine Behaelterabfrage zaehlt bei der Spezifitaet nicht mit, die Regel darin ist also 0-1-0. Diese hier ist 0-2-0 und gewinnt auf jeder Breite. Ohne diesen Umstand braeuchte es einen zweiten Block, und zwei Zahlen fuer dieselbe Sache laufen auseinander. */ .aussage--flach .aussage__zahl { font-size: var(--groesse-h2); } /* Zahl und Satz nebeneinander statt untereinander: bei 30 px Ziffer ist „7 Nachrichten warten auf dich." wieder EIN Satz und keine Schlagzeile mit Unterzeile. Auf der Uebersicht steht die Zahl frei, weil sie dort 96 px hoch ist und ein Bild abgibt — hier gaebe sie nur eine Leerzeile ab. `baseline`, damit die Grundlinien stimmen. */ .aussage--flach .aussage__zeile { flex-direction: row; align-items: baseline; gap: var(--abstand-2); flex-wrap: wrap; } /* =================================================================== AM SCHMALEN FENSTER EINE ZEILE JE KENNZAHL — 05.08.2026 =================================================================== GEMESSEN, UND ES WAR DERSELBE FEHLER NOCH EINMAL: mit Wort oben und Wert darunter nahm die Flaeche bei 390 px 391 px Hoehe — 46 % eines 844 px hohen Bildschirms. Die Tafel ist am 31.07.2026 an genau dieser Zahl gefallen („die halbe Bildschirmhoehe, die Auskunft vor der Arbeit"), und ohne diese Messung waere sie unter neuem Namen zurueckgekommen. Zwei Zeilen je Kennzahl sind die Bauart der Vorlage (WRITER: kleines Wort oben, grosse Zahl darunter) — und sie ist fuer ZAHLEN gebaut. Hier stehen keine: „seit 07:18 Uhr" und „Facebook · 4" sind Auskuenfte in Worten, und in 30 px gesetzt kosten sie die Hoehe einer Schlagzeile fuer den Inhalt einer Bildunterschrift. Deshalb schmal: Wort links, Wert rechts, eine Zeile. Ab 1100 px steht die Vorlagenform wieder da — dort ist Breite genug, dass zwei Zeilen nichts kosten. */ .aussage--flach .aussage__kennzahlen { display: flex; flex-direction: column; gap: var(--abstand-1); margin-top: var(--abstand-3); } .aussage--flach .aussage__kennzahl { display: flex; align-items: baseline; justify-content: space-between; gap: var(--abstand-3); /* Passen Wort und Wert nicht nebeneinander, rutscht der Wert unter das Wort, statt beide in schmale Saeulen zu brechen. Ohne das steht bei 206 px Inhalt „Meiste / warten / auf" untereinander — drei Zeilen fuer drei Woerter. */ flex-wrap: wrap; } .aussage--flach .aussage__kennzahl-zahl { margin: 0; font-size: var(--groesse-text); text-align: right; } /* AB 1100 PX ZURUECK ZUR VORLAGENFORM. Dieselbe Breite, an der Kopf und Kennzahlen ohnehin nebeneinander ruecken — und dieselbe, ab der die Chipzeile umbricht statt zu rollen. Eine Breite, ein Grund. Gleiche Spezifitaet wie der Block darueber (0-2-0), also entscheidet die Reihenfolge: dieser steht spaeter und gewinnt. */ @container huelle (min-width: 1100px) { /* `space-between` UND NICHT DAS `auto-fit`-RASTER DER UEBERSICHT, und der Grund ist die Anzahl. Die Uebersicht traegt vier Kennzahlen; vier gleiche Spuren fuellen die Flaeche. Der Posteingang traegt zwei — in zwei Spuren zu je 700 px stand die zweite bei x = 1157 und endete bei 1330, also 450 px vor der Kante. Eine Flaeche, die ihre rechte Haelfte leer laesst, ist genau der Befund, gegen den diese Runde gebaut wird. Mit `space-between` liegt die erste am Anfang, die letzte an der Kante — bei zwei Kennzahlen wie bei fuenf. */ .aussage--flach .aussage__kennzahlen { display: flex; /* AUSDRUECKLICH ZURUECK AUF `row`. Der Block darueber setzt `column` fuer das schmale Fenster; ohne diese Zeile bleibt er stehen, und `space-between` verteilt die Kennzahlen dann in der HOEHE — gemessen wuchs die Flaeche dadurch von 107 auf 169 px, waehrend rechts weiterhin alles leer stand. Eine Eigenschaft, die man umschaltet, muss man in beide Richtungen umschalten. */ flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: var(--abstand-5) var(--abstand-7); margin-top: 0; } .aussage--flach .aussage__kennzahl { display: block; min-width: 0; } .aussage--flach .aussage__kennzahl-zahl { margin-top: var(--abstand-1); font-size: var(--groesse-h2); text-align: left; } } /* ZWEIFARBIG — Punkt 2 der Formensprache, und die Stelle, an der es auf dieser Seite EINMAL vorkommt: die Aussage traegt Tinte, der Zusatz darunter den gedaempften Ton. Mehr als einmal je Seite wird daraus Streifenmuster. */ .aussage__zusatz { margin: 0; font-size: var(--groesse-klein); /* NICHT `--farbe-text-gedaempft`: der ist auf Weiss gemessen (5,07:1) und faellt auf Vollton unter die Auflage. Eine Deckkraft auf der Tinte bleibt am Untergrund, auf dem sie wirklich liegt. */ color: color-mix(in srgb, var(--farbe-text) 72%, transparent); } /* --- Symbolknopf -------------------------------------------- */ /* Nur fuer Schliessen, Zurueck, Plus und Minus. Alles andere braucht ein Wort daneben - durchgesetzt von symbolknopf() in src/oberflaeche/symbole.ts, das bei jedem anderen Namen wirft. */ .symbolknopf { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-rund); background: transparent; /* NACHGEZOGEN AM 14.08.2026: hier stand `--farbe-text-leise` (Jitters ruhende Farbe, #97979B) — tokens.css sagt zu diesem Ton selbst "Zeichen, kein Text", und selbst fuer Zeichen gilt WCAG 1.4.11 (3:1 fuer graphische Bedienelemente). Gemessen 2,91:1 auf Weiss, 2,58:1 auf der gedaempften Flaeche (Ueberfahren/aktiv) — unter 3 in beiden Zustaenden. `--farbe-rand-bedienelement` ist bereits fuer genau diesen Fall kalibriert (3,45:1 / 3,07:1) und steht schon im Ueberfahren-Ring dieses Bausteins zwei Zeilen weiter unten — derselbe Ton fuer denselben Zweck statt ein zweiter, fast identischer daneben. */ color: var(--farbe-rand-bedienelement); cursor: pointer; } .symbolknopf:is(:hover, .zeige-ueberfahren):not(:disabled) { background: var(--farbe-flaeche-gedaempft); box-shadow: inset 0 0 0 2px var(--farbe-rand-bedienelement); } .symbolknopf:is(:active, .zeige-aktiv):not(:disabled) { transform: translateY(1px); box-shadow: none; } .symbolknopf:disabled { cursor: not-allowed; color: var(--farbe-gesperrt-text); background: var(--farbe-gesperrt-flaeche); box-shadow: inset 0 0 0 var(--randbreite) var(--farbe-gesperrt-rand); } /* --- Knopf -------------------------------------------------- */ .knopf { /* 44 px ist die Untergrenze aus der Pruefliste - Handschuh, nicht Fingerspitze. Die Polsterung darf sie erhoehen, nie unterschreiten. */ min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--abstand-2); padding: var(--abstand-2) var(--abstand-5); border: var(--randbreite) solid transparent; /* Pille, wie der Toast. Als Token, nicht als Einzelwert. */ border-radius: var(--radius-knopf); font-size: var(--groesse-text); font-weight: var(--schrift-halbfett); line-height: var(--zeilenhoehe-mittel); text-align: center; /* KEINE UNTERSTREICHUNG, auch wenn der Knopf ein `` ist. Ohne Skript muss jeder Weg eine Adresse haben, also sind mehrere Knoepfe im Produkt Verweise — und die bringen Unterstreichung mit. Bisher stand die Ausnahme je Ort ("Weitere laden" in Bereich 03), bis in Bereich 02 ein unterstrichenes "Los geht's" im Bild stand. Eine Regel, die man je Ort wiederholt, ist eine, die irgendwo fehlt. */ text-decoration: none; cursor: pointer; /* Fuer die Welle. Sie darf den Knopf nicht verlassen. */ position: relative; overflow: hidden; transition: background-color var(--dauer-schnell) var(--kurve), border-color var(--dauer-schnell) var(--kurve); } .knopf--gefuellt { background: var(--farbe-primaer); border-color: var(--farbe-primaer); color: var(--farbe-primaer-kontrast); } /* DIE TIEFERE STUFE, NICHT DIE HELLERE — berichtigt am 04.08.2026. Hier stand `--farbe-primaer-hell`. Weiße Schrift darauf hält 4,02:1, nötig sind 4,5:1 — gemeldet von der Zustandsmatrix in den Zuständen `ueberfahren` und `aktiv`. DIE AUSNAHME, DIE DAS DECKEN SOLLTE, GIBT ES NICHT. tokens.css schreibt an dem Token: „Für den 18-px-Knopftext in Gewicht 600 reicht das — das ist Großtext, Auflage 3:1." Beide Hälften des Satzes stimmen nicht. Der Knopftext ist `--groesse-text`, also 17 px; und Großtext beginnt bei fett erst ab 14 pt = 18,66 px, also hätten auch 18 px nicht gereicht. Die Auflage war die ganze Zeit 4,5. `--farbe-primaer-tief` ist genau für diesen Zustand abgeleitet worden („die tiefere Stufe für den Überfahren-Zustand des lila Knopfes") und wird von `.kopf__knopf` schon so benutzt — mit dem Vermerk, die hellere Stufe wäre „die falsche Richtung". Sie war es hier auch. Weiß darauf: 7,19:1. Das weicht von Jitters gemessenem Hover ab, der nach oben geht. Der Vermerk steht in ABDECKUNG.md: wo eine gemessene Vorlage unter eine Auflage fällt, gewinnt die Auflage — und die Richtung nach unten ist nach oben offen, die nach oben nicht. */ .knopf--gefuellt:is(:hover, .zeige-ueberfahren):not(:disabled) { background: var(--farbe-primaer-tief); border-color: var(--farbe-primaer-tief); } /* =================================================================== DER UMRISS IST NICHT MEHR VIOLETT — 11.08.2026, angesagt =================================================================== HIER STAND `--farbe-rand-primaer-leise` (#817DC9) mit der Begründung: „Der Rand kommt aus derselben Familie wie die Handlung, nur zurückgenommen. Neutralgrau wirkte leblos." WAS ER GEKOSTET HAT, steht auf den Bildern dieser Runde: „Neuer Ordner" auf `/drive`, drei „Trennen" und ein „Verbinden" auf `/einstellungen`, „Logo wählen", „Termin verschieben" — bis zu sechs violette Umrisse auf EINEM Bildschirm, während der eine gefüllte Knopf daneben dieselbe Familie trägt. Eine Farbe, die die Handlung auszeichnen soll, zeichnet nichts aus, wenn sie an jedem Knopf steht. GEMESSEN bei Jitter (`._button._cancel`): `color: #19171c; background: #fff; border: 1px solid #e5e4e7`. Der Zweitknopf ist dort SCHWARZ AUF WEISS MIT GRAUER KANTE — kein Farbton der Hauptfarbe. #E5E4E7 ÜBERNEHMEN WIR NICHT, und zwar aus demselben Grund wie bei den Eingabefeldern heute früh: 1,20:1 auf Weiß, WCAG 1.4.11 verlangt 3:1 für die Grenze eines Bedienelements. `--farbe-rand-bedienelement` (#8A8A8A, 3,45:1) ist derselbe Wert, den die Felder tragen — und das ist der Nebengewinn: Feld und Zweitknopf haben ab jetzt dieselbe Kante, statt zweier verschiedener Grautöne nebeneinander. ROT UND GEFAHR SIND NICHT BETROFFEN. `--gefahr-umriss` behält seinen roten Rand: dort IST die Farbe die Aussage. */ .knopf--umriss { background: var(--farbe-flaeche); border-color: var(--farbe-rand-bedienelement); color: var(--farbe-text); } /* DIE PILLE MUSS NACH `--umriss` STEHEN — 04.08.2026, im Bild gefunden. Beide Regeln haben dieselbe Spezifitaet (0-1-0), also gewinnt die spaetere. `.knopf--umriss` setzt `border-radius: var(--radius-knopf)` und machte die Pille darueber wieder eckig: „Neuer Ordner" stand als Kasten neben der runden Hauptaktion. Die Wiederholung ist die kleinste Abhilfe. Die Alternative waere, `--radius-knopf` an der Variante zu ueberschreiben — dann stuende der Wert an zwei Stellen und die naechste Variante haette dasselbe Problem. NACHTRAG 06.08.2026: diese Regel ist seit der Berichtigung bei Zeile 830 ueberfluessig — `.knopf.knopf--pille` deckt jede Pille ab. Sie bleibt als BELEG stehen: hier hat schon einmal jemand denselben Fehler getroffen und ihn fuer die eine Variante geflickt, statt die Ursache zu suchen. Genau deshalb blieb die gefuellte Pille eckig. */ .knopf--pille.knopf--umriss { border-radius: var(--radius-rund); } /* BEIM ÜBERFAHREN IN DIE TINTE, nicht in die Primärfarbe. Sie war der zweite Ort, an dem Violett am Zweitknopf stand — und der auffälligere, weil er unter dem Zeiger auftaucht. Die Tinte hält 17,79:1 gegen Weiß gegen 3,45 im Ruhezustand: der Wechsel ist deutlicher als vorher, ohne eine Familie zu behaupten, zu der der Knopf nicht gehört. */ .knopf--umriss:is(:hover, .zeige-ueberfahren):not(:disabled) { border-color: var(--farbe-text); } /* Rot nur bei echtem Datenverlust - Regel 10. Nicht fuer Bestaetigungen, nicht als Betonung. */ .knopf--gefahr { background: var(--farbe-fehler); border-color: var(--farbe-fehler); color: var(--farbe-primaer-kontrast); } /* MIT BEREICH 08 DAZUGEKOMMEN. `h1` haelt bei User Interviews fest, dass "Trennen" rot UMRANDET ist statt gefuellt - "sichtbar, aber nicht einladend". Einen Kanal zu trennen ist kein Datenverlust, also waere der gefuellte Gefahrenknopf zu laut; Neutralgrau waere zu leise. Gemessen: --farbe-fehler auf --farbe-flaeche haelt 5,62:1. Ueber 4,5:1 fuer die Schrift und ueber 3:1 fuer den Rand. */ .knopf--gefahr-umriss { background: var(--farbe-flaeche); border-color: var(--farbe-fehler); color: var(--farbe-fehler); } /* KEINE eigene Ueberfahren-Regel. Der Schatten aus `.knopf:is(:hover, …)` weiter unten traegt den Zustand fuer ALLE Knopfarten - Tiefe statt Farbe. Eine dickere Randbreite waere der zweite Traeger gewesen, haette aber die Geometrie um 1 px verschoben: der Rand waechst nach innen, der Inhalt rutscht. Ein Knopf, der beim Zeigen zuckt, ist schlechter als einer, der nur einen Schatten bekommt. */ .knopf--breit { width: 100%; } /* Ueberfahren: der Schatten kommt dazu. Nicht nur die Farbe - in Graustufen und bei Farbsehschwaeche bleibt der Zustand so sichtbar. */ .knopf:is(:hover, .zeige-ueberfahren):not(:disabled) { box-shadow: var(--schatten-2); } /* Gedrueckt: der Knopf gibt nach. Geometrie, keine Farbe. */ .knopf:is(:active, .zeige-aktiv):not(:disabled) { transform: translateY(1px); box-shadow: none; } /* GESPERRT. Vorher stand hier `opacity: .55`. Gemessen: 2,07:1 - unlesbar. Deckkraft ist als Zustand nicht messbar, ohne die Flaeche darunter mitzurechnen; genau daran ist der Fehler vorbeigelaufen. Jetzt echte Werte (5,10:1 Text, 3,57:1 Rand) und ein gestrichelter Rand als Traeger, der keine Farbe ist. */ .knopf:disabled { cursor: not-allowed; background: var(--farbe-gesperrt-flaeche); border-color: var(--farbe-gesperrt-rand); border-style: dashed; color: var(--farbe-gesperrt-text); box-shadow: none; } /* --- Der Absendezustand ------------------------------------- */ /* „ES LÄUFT" IST NICHT DASSELBE WIE „GESPERRT" — 02.08.2026, Kapitel 22.7. Ein abgeschickter Anmeldeknopf war bisher schlicht `disabled`: gestrichelte graue Kachel, kein Zeichen, kein Hinweis, dass etwas passiert. Das sagt „du darfst nicht", während gemeint ist „ich arbeite". Nur eine der fünf Vorlagen zeigt diesen Zustand überhaupt, und sie zeigt ihn genau (Supabase, gemessen): der Knopfkasten bleibt UNVERÄNDERT — kein Schrumpfen —, die Füllung geht von Deckkraft 1,00 auf 0,50 (drei Kanäle unabhängig gerechnet: 0,500 / 0,500 / 0,512), links kommt ein Ring dazu, und die Beschriftung rückt 8 px nach rechts. Sie verschwindet nicht. Die halbe Deckkraft steht als `color-mix` und nicht als eigener Farbwert: sie IST die Primärfarbe, nur halb aufgetragen. Ein neues Token wäre ein zweiter Ort für dieselbe Entscheidung. Nicht über `opacity` am ganzen Knopf: das nähme der Schrift den Kontrast mit — weiß auf halbtransparentem Violett hielte 2,4 : 1 statt 4,72 : 1. */ .knopf--laedt:disabled { cursor: progress; background: color-mix(in srgb, var(--farbe-primaer) 50%, var(--farbe-flaeche)); border-color: color-mix(in srgb, var(--farbe-primaer) 50%, var(--farbe-flaeche)); border-style: solid; color: var(--farbe-primaer-kontrast); } /* Der Ring sitzt links vor dem Wort. Die Lücke des Knopfes schiebt die Beschriftung damit nach rechts, ohne dass der Kasten wächst. */ .knopf--laedt .kringel { order: -1; } /* Ripple: Welle am Beruehrungspunkt, 450 ms. Pflicht nach Regel 12 - beantwortet "habe ich getroffen?", bevor die Handlung reagiert. */ .welle { position: absolute; border-radius: var(--radius-rund); background: currentColor; opacity: .35; transform: scale(0); animation: wellen var(--dauer-lang) var(--kurve) forwards; pointer-events: none; } @keyframes wellen { to { transform: scale(1); opacity: 0; } } /* --- i1 Modal ----------------------------------------------- */ .modal { width: min(420px, calc(100vw - var(--abstand-6))); padding: 0; border: 0; border-radius: var(--radius-gross); background: var(--farbe-flaeche); color: var(--farbe-text); box-shadow: var(--schatten-3); } .modal::backdrop { background: var(--farbe-schleier); } .modal__kasten { display: grid; gap: var(--abstand-3); padding: var(--abstand-5); } .modal__titel { font-size: var(--groesse-h3); } .modal__frage { color: var(--farbe-text-gedaempft); } /* Genau zwei Knoepfe, rechts unten. */ .modal__knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--abstand-2); margin-top: var(--abstand-2); } /* Bei 390 px untereinander: nebeneinander waeren beide schmaler als ihr Text und die Trefferflaeche wuerde unbrauchbar. */ @media (max-width: 30rem) { .modal__knoepfe { flex-direction: column-reverse; } .modal__knoepfe .knopf { width: 100%; } } /* --- i1 ohne Skript: die Rueckfrage — 19.10.2026 ------------- Ein Zustand der Seite (`?entziehen=…`, `?entfernen=…`), gebaut wie das Kontomenue: fest ueber allem, der Schleier dahinter ist der Verweis zurueck. Der Kasten ist der des Modals (`.modal`, `.modal__kasten`). NEUER NAME, vorher geprueft: `.rueckfrage` stand in keiner Vorlage. */ .rueckfrage { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--abstand-4); } .rueckfrage__zurueck { position: fixed; inset: 0; background: var(--farbe-schleier); } /* `min-width: 0` — der Kasten ist ein Raster-Kind; ein langer Name im Titel darf ihn nicht breiter machen als den Bildschirm. */ .rueckfrage__kasten { position: relative; min-width: 0; max-width: 100%; } .rueckfrage .modal__titel { margin: 0; overflow-wrap: anywhere; } .rueckfrage .modal__frage { margin: 0; } /* --- i2 Seitenpanel ----------------------------------------- */ /* KEINE Abdunklung. Sobald abgedunkelt wird, ist es ein Modal und der Sprung zur naechsten Zeile faellt weg. Die Liste bleibt links sichtbar UND bedienbar - deshalb auch kein . */ .panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(420px, 100vw); display: flex; flex-direction: column; background: var(--farbe-flaeche); border-left: 1px solid var(--farbe-rand); box-shadow: var(--schatten-3); transform: translateX(100%); visibility: hidden; transition: transform var(--dauer-mittel) var(--kurve), visibility 0s linear var(--dauer-mittel); } .panel[data-offen="ja"] { transform: translateX(0); visibility: visible; transition: transform var(--dauer-mittel) var(--kurve), visibility 0s; } .panel__kopf { display: flex; align-items: center; gap: var(--abstand-3); padding: var(--abstand-4); border-bottom: 1px solid var(--farbe-rand); } .panel__titel { flex: 1; font-size: var(--groesse-h3); min-width: 0; } .panel__schliessen { flex: none; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-klein); background: transparent; color: var(--farbe-text-gedaempft); cursor: pointer; } /* Der Ring ist der Traeger. Die Textfarbe wird nicht angefasst - siehe die Regel am Chip. */ .panel__schliessen:is(:hover, .zeige-ueberfahren) { background: var(--farbe-flaeche-gedaempft); box-shadow: inset 0 0 0 2px var(--farbe-rand-bedienelement); } .panel__inhalt { flex: 1; overflow-y: auto; padding: var(--abstand-4); } .panel__fuss { padding: var(--abstand-4); border-top: 1px solid var(--farbe-rand); } /* Am Handy kommt es von unten und laesst oben einen Streifen frei - Regel 12: nie als Vollbild, der Rest der Liste muss sichtbar bleiben. */ @media (max-width: 45rem) { .panel { top: auto; left: 0; width: 100vw; max-height: 85vh; border-left: 0; border-top-left-radius: var(--radius-gross); border-top-right-radius: var(--radius-gross); transform: translateY(100%); } .panel[data-offen="ja"] { transform: translateY(0); } } /* --- i3 Toast ----------------------------------------------- */ /* Ein Satz, unten, verschwindet von selbst. Kein X: ein Toast, den man wegklicken muss, ist ein Dialog. */ .toast { position: fixed; left: 50%; bottom: var(--abstand-5); z-index: 60; display: flex; align-items: center; gap: var(--abstand-2); max-width: min(28rem, calc(100vw - var(--abstand-5))); padding: var(--abstand-3) var(--abstand-4); border-radius: var(--radius-rund); background: var(--farbe-text); color: var(--farbe-flaeche); font-size: var(--groesse-klein); font-weight: var(--schrift-halbfett); box-shadow: var(--schatten-3); transform: translate(-50%, 160%); transition: transform var(--dauer-mittel) var(--kurve); } .toast[data-offen="ja"] { transform: translate(-50%, 0); } /* Der Haken ist der zweite Traeger neben dem Text. Die dunkle Flaeche allein sagt nichts. */ .toast__haken { display: inline-flex; flex: none; color: var(--farbe-erfolg-hell); } /* --- i4 Schalter -------------------------------------------- */ .schalter { display: flex; align-items: flex-start; gap: var(--abstand-3); } /* Keine feste Breite: "AUS" ist breiter als "AN", und bei +15 % wachsen beide. */ .schalter__knopf { flex: none; /* 88 STATT 76 PX — 02.08.2026. „AN" und „AUS" sind verschieden breit: die Pille mass 78 px an und 87 px aus, und die Textspalte daneben ruckte bei jeder Umlegung um 9 px. Alle fuenf Referenzablaeufe zeigen 0 px Versatz beim Zustandswechsel. Die Breite des laengeren Wortes bestimmt jetzt beide Zustaende. */ min-width: 88px; min-height: 44px; display: inline-flex; align-items: center; padding: var(--abstand-1); border: var(--randbreite) solid var(--farbe-rand-bedienelement); border-radius: var(--radius-rund); background: var(--farbe-flaeche-gedaempft); cursor: pointer; transition: background-color var(--dauer-mittel) var(--kurve), border-color var(--dauer-mittel) var(--kurve); } .schalter__knopf[aria-checked="true"] { background: var(--farbe-erfolg); border-color: var(--farbe-erfolg); } /* Das Wort steht IM Schalter. Das ist der Kern des Bausteins und der wichtigste Einzelfund der Recherche. */ .schalter__wort { order: 2; flex: 1; /* Vier Zeichen: „AUS" plus Luft. Ohne das traegt das Wort selbst den Breitenunterschied weiter, auch wenn die Pille ihn nicht mehr zeigt. */ min-width: 4ch; text-align: center; padding: 0 var(--abstand-2); font-size: var(--groesse-mikro); font-weight: var(--schrift-halbfett); letter-spacing: var(--laufweite-weit); color: var(--farbe-text-gedaempft); } .schalter__knopf[aria-checked="true"] .schalter__wort { order: 0; color: var(--farbe-primaer-kontrast); } /* Der Griff wandert von rechts nach links. Dritter Traeger neben Wort und Flaeche: auch ohne Farbe und ohne Lesen sieht man die Stellung. */ .schalter__griff { order: 1; flex: none; width: 30px; height: 30px; border-radius: var(--radius-rund); background: var(--farbe-flaeche); box-shadow: var(--schatten-1); } .schalter__text { display: grid; gap: var(--abstand-1); padding-top: var(--abstand-2); min-width: 0; } .schalter__beschriftung { font-weight: var(--schrift-halbfett); cursor: pointer; } .schalter__erklaerung { font-size: var(--groesse-klein); color: var(--farbe-text-gedaempft); } /* --- i5 Chips ----------------------------------------------- */ .chipzeile { display: flex; flex-wrap: wrap; gap: var(--abstand-2); } /* =================================================================== UNTEREINANDER — 18.08.2026, fuer das Filterblatt =================================================================== SIE IST EIN MODIFIKATOR DES BAUSTEINS UND KEIN FREMDEINGRIFF. Der erste Anlauf schrieb `.filterwahl__blatt .chipzeile { flex-direction: column }`, und die Wache „kein Baustein greift in die Klassen eines anderen" hat das sofort gemeldet — zu Recht: wer der Chipzeile von aussen eine Richtung vorschreibt, aendert sie ueberall dort mit, wo sie sonst noch steht. WARUM ES SIE BRAUCHT: im aufgeklappten Filterblatt stehen bis zu sechs Chips. Nebeneinander passen sie bei 390 px und +15 % Schrift nicht mehr — gemeldet von „kein Text laeuft aus seinem Element heraus". Rollen darf das Blatt nicht (das war der Fehler, den der Filterumbau beseitigt), also stehen sie untereinander. In einem Blatt ist das die natuerliche Form: es ist so hoch, wie es sein muss. `align-items: stretch` MACHT SIE GLEICH BREIT. Chips verschiedener Breite untereinander saehen aus wie eine Treppe; in einer Liste zum Anklicken ist die gleiche Breite auch die groessere Trefferflaeche. */ .chipzeile--spalte { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--abstand-1); } .chip { min-height: 44px; display: inline-flex; align-items: center; gap: var(--abstand-1); padding: 0 var(--abstand-4); border: var(--randbreite) solid var(--farbe-rand-bedienelement); border-radius: var(--radius-rund); background: var(--farbe-flaeche); color: var(--farbe-text-gedaempft); font-size: var(--groesse-klein); font-weight: var(--schrift-halbfett); cursor: pointer; /* IM BILD GEFUNDEN, in keiner Zahl: seit der Filter-Chip ein VERWEIS ist (§Q9.1, „Filter setzen … Adressen"), traegt er die Unterstreichung eines Verweises. Zehn unterstrichene Pillen ueber der Liste sahen aus wie eine Fussnotenzeile. Die Form sagt hier alles: eine Pille mit Rand ist als Bedienelement erkennbar, und der Unterschied gefuellt/Umriss traegt den Zustand. Eine Unterstreichung darueber ist ein drittes Zeichen fuer dieselbe Sache. */ text-decoration: none; transition: border-color var(--dauer-schnell) var(--kurve), background-color var(--dauer-schnell) var(--kurve); /* HÖCHSTBREITE — 02.08.2026. Ohne sie ist die Chipbreite die Textbreite, und ein Kontoname wie „Elektro Brenner GmbH · Servicenummer" füllt die Zeile allein. Abschnitt 9 nennt das die häufigste Bruchstelle: sehr lange deutsche Wörter. Umbrechen kann eine Pille nicht — also abschneiden mit einem `title`, so wie es dort steht. */ max-width: 12rem; } .chip__wort { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* STRUKTURELL, nicht ueber Spezifitaet. Der gemeldete Fehler war: der gesetzte Chip wurde beim Ueberfahren violett auf violett. Beim ersten Versuch habe ich das ueber :not(.chip--gesetzt) geloest - also ueber Spezifitaet. Das haelt nur so lange, wie jemand die Ausnahme mitdenkt. Die Ursache war nicht die Spezifitaet, sondern dass ein Ueberfahren-Zustand ueberhaupt die TEXTFARBE anfasst. Sobald derselbe Baustein auch gefuellt vorkommt, ist Text-auf-eigener-Flaeche eine Frage der Reihenfolge. REGEL AB JETZT: Ein Ueberfahren- oder Gedrueckt-Zustand aendert nie die Textfarbe. Er aendert Rand, Schatten und Flaeche. Damit ist der Fehler nicht behoben, sondern unmoeglich. Zusaetzlich laeuft eine erschoepfende Messung ueber jede Kombination aus gesetzt, gedrueckt und ueberfahren - nicht nur ueber die, die man erwartet. Siehe tests/messungen/zustandsmatrix.spec.ts. */ .chip:not(.chip--gesetzt):is(:hover, .zeige-ueberfahren) { border-color: var(--farbe-primaer); box-shadow: var(--schatten-2); } /* Gedrueckt: der Chip gibt nach (Geometrie, kein Farbwechsel) und die Flaeche wird gedaempft. Vorher stand hier --farbe-primaer-sehr-hell - gemessen 4,37:1 mit der gedaempften Textfarbe, also knapp unter 4,5. --farbe-flaeche-gedaempft haelt 4,68:1. */ .chip:not(.chip--gesetzt):is(:active, .zeige-aktiv) { border-color: var(--farbe-primaer); background: var(--farbe-flaeche-gedaempft); transform: translateY(1px); box-shadow: none; } /* Gesetzt: gefuellt. Der Unterschied gefuellt/Umriss traegt allein - und das X kommt als zweiter, farbunabhaengiger Traeger dazu. Die Textfarbe steht hier und wird von keinem Zustand angefasst. */ .chip--gesetzt { padding-right: 0; border-color: var(--farbe-primaer); background: var(--farbe-primaer); color: var(--farbe-primaer-kontrast); cursor: default; } /* Der Ring ist der Traeger. Nur die Flaeche zu wechseln waere ein reiner Farbunterschied - gemeldet von der Zustandsmatrix. */ .chip__loeschen:is(:hover, .zeige-ueberfahren) { background: var(--farbe-primaer-hell); box-shadow: inset 0 0 0 2px currentColor; } .chip__loeschen { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-rund); background: transparent; color: inherit; cursor: pointer; /* Auch das Kreuz ist seit dem 01.08.2026 ein Verweis, wenn der Chip einen Ort hat — es nimmt den Filter zurueck, also fuehrt es auf dieselbe Liste ohne ihn. Ohne diese Zeile stuende unter dem Zeichen ein Strich. */ text-decoration: none; } /* Keine eigene Groesse mehr: der Baustein uebergibt groesse: 'klein'. Eine Ueberschreibung hier hat den gerenderten Strich auf 1,69 px gedrueckt - gemessen, nicht vermutet. */ /* ============================================================ BEREICH 09, zweiter Teil Die zehn Bausteine, die i1-i5 nicht nennt. Woher die Regel je Baustein kommt, steht in src/oberflaeche/bausteine-zwei.ts. Fuer JEDEN Zustand gilt: der Unterschied zum Ruhezustand darf nie nur Farbe sein. Der Traeger steht am jeweiligen Block dabei. ============================================================ */ /* --- Auswahlliste ------------------------------------------- */ /* Das VERHALTEN bleibt nativ: auf dem Handy oeffnet ein meldet den beschnittenen Text nicht, sie sagt 0 Ueberlauf. Nur das Bild zeigt es. UEBERGABE.md, Abschnitt 9 schreibt fuer genau diesen Fall vor: "Wo Umbruch nicht geht, text-overflow: ellipsis mit title-Attribut." Das title setzt `auswahl()` auf den ausgewaehlten Eintrag. */ text-overflow: ellipsis; transition: border-color var(--dauer-schnell) var(--kurve); } .auswahl:is(:hover, .zeige-ueberfahren):not(:disabled) { border-color: var(--farbe-primaer); box-shadow: var(--schatten-1); } /* Kein Rahmenwechsel bei Fokus. Der Ring aus der globalen Regel ist der eine Traeger. */ .auswahl:disabled { cursor: not-allowed; border-style: dashed; border-color: var(--farbe-gesperrt-rand); background: var(--farbe-gesperrt-flaeche); color: var(--farbe-gesperrt-text); } /* Der eigene Pfeil. Liegt ueber dem Feld und faengt keine Klicks - der Klick muss ins ` liegt durchsichtig in derselben Rasterzelle ueber den Kaesten und nimmt Tippen, Einfuegen und das Ausfuellen vom Telefon. DIE BESCHRIFTUNG STEHT UEBER DEM FELD, auch ausserhalb der Anmeldung — eine steigende Beschriftung hat in sechs Kaesten keinen Platz. Im Reservemodus bleibt sie dort, damit der Umschalter nichts verschiebt. DAS FELD LIEGT UEBER DEM KASTEN, DER ALS NAECHSTES DRAN IST, und wandert beim Tippen mit (`--stelle`, gesetzt vom Skript). So traegt das fokussierte Element SELBST den Ring — die Regel „EIN TRAEGER" oben gilt auch hier. Die erste Fassung lag ueber der ganzen Reihe, nahm dem Feld den Ring und malte ihn an den Kasten; die Tastaturmessung der Werkstatt meldete das Feld als „kein Fokus sichtbar" (19.10.2026), und sie hatte recht. Der Ring ist der von ueberall, nur nach INNEN gesetzt wie an `.suchtreffer__flaeche` — aussen, mit Saum, laege er bei 8 px Luecke auf dem Nachbarkasten. */ .feld.codefeld[data-bereit] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "wort" "zeile" "weg"; gap: var(--abstand-2); min-width: 0; } .feld.codefeld[data-bereit] .codefeld__eingabe ~ .codefeld__wort { grid-area: wort; position: static; transform: none; max-width: none; white-space: normal; font-size: var(--groesse-klein); font-weight: var(--schrift-halbfett); color: var(--farbe-text); transition: none; } /* Im Reservemodus ein schlichtes Feld wie in der Anmeldung: ohne steigende Beschriftung braucht es oben kein Extrapolster. OHNE UEBERGANG: das Skript schaltet gleich nach dem Laden auf die Kaesten, und mit dem Uebergang von `.feld__eingabe` blendete das Feld sichtbar von Weiss auf durchsichtig (gemessen: nach dem Umschalten noch 14 % Deckung). */ .feld.codefeld[data-bereit] .codefeld__eingabe { grid-area: zeile; padding: var(--abstand-3); background: var(--farbe-flaeche); transition: none; } /* NICHT BREITER ALS 6 x 64 px. In den breiten Kacheln von Konto und Admin wuerden die Kaesten sonst zu flachen Balken. In der Anmeldung (24 rem) fuellen sie die Breite wie der Knopf darunter. */ .codefeld__kaesten { grid-area: zeile; display: none; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--abstand-2); max-width: calc(6 * 64px + 5 * var(--abstand-2)); /* Ein Klick auf einen anderen Kasten setzt den Fokus ins Feld (`bausteine.js`). */ cursor: text; } .codefeld--kaesten .codefeld__kaesten { display: grid; } /* Das Feld ueber den Kaesten: da, bedienbar, aber nicht zu sehen. Die Regel muss alle Zustaende nennen, sonst malt das Ueberfahren (`.feld__eingabe`) oder der allgemeine Fokusring doch einen Rahmen um die Reihe — und sie muss SCHWERER sein als die Regel des schlichten Felds oben (weisser Grund), sonst deckt das Feld die Kaesten zu. */ /* ABSOLUT IN DER RASTERZELLE und nicht als zweites Kind in derselben Zelle: ein Raster-Kind mit `position: absolute` nimmt seine Zelle als Rahmen (`.feld` ist `relative`). So liegt es wie Panel und Toast „uebereinander, weil es soll" — und die Ueberlappungsmessung (`layoutMessen()`) nimmt genau solche Elemente aus. Als gewoehnliches Kind meldete sie es (gemessen 19.10.2026, `konto.spec.ts`, 100 % waagerecht). Die Hoehe geben die Kaesten. BREITE UND LAGE EINES KASTENS, gerechnet wie das Raster der Kaesten: die Reihe ist hoechstens 6 x 64 px breit, die Prozente beziehen sich auf die Zelle. */ .feld.codefeld--kaesten[data-bereit] .codefeld__eingabe { --reihe: min(100%, calc(6 * 64px + 5 * var(--abstand-2))); --kasten: calc((var(--reihe) - 5 * var(--abstand-2)) / 6); position: absolute; top: 0; bottom: 0; left: calc(var(--stelle, 0) * (var(--kasten) + var(--abstand-2))); z-index: 1; width: var(--kasten); min-width: 0; padding: 0; border-color: transparent; background: transparent; box-shadow: none; outline: none; color: transparent; caret-color: transparent; cursor: text; } /* DIE ZUSTAENDE NEHMEN NUR ZURUECK, was `.feld__eingabe` und der allgemeine Ring in ihnen setzen — Rand, Flaeche, Schatten, Ring. KEINE SCHRIFTFARBE: die steht oben in der Grundregel, und eine Zustandsregel, die die Textfarbe anfasst, meldet `zustandsmatrix.spec.ts` (gemessen 19.10.2026, als beides noch in einer Regel stand). */ .feld.codefeld--kaesten[data-bereit] .codefeld__eingabe:is(:hover, :focus, .zeige-ueberfahren) { border-color: transparent; background: transparent; box-shadow: none; outline: none; } .feld.codefeld--kaesten[data-bereit] .codefeld__eingabe:is(:focus-visible, .zeige-fokus) { outline: var(--fokusring) solid var(--farbe-fokusring); outline-offset: calc(var(--fokusring) * -1); box-shadow: none; } .feld.codefeld--kaesten[data-bereit] .codefeld__eingabe::selection { background: transparent; } /* Kantig, 60 px hoch, Rand wie jedes Feld (3,45:1, WCAG 1.4.11). */ .codefeld__kasten { display: grid; place-items: center; min-width: 0; height: var(--feld-hoehe); border: var(--randbreite) solid var(--farbe-rand-bedienelement); background: var(--farbe-flaeche); color: var(--farbe-text); font-size: var(--groesse-h3); font-weight: var(--schrift-halbfett); font-variant-numeric: tabular-nums; line-height: 1; transition: border-color 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Gefuellt in Tinte: man sieht, wie weit man ist. */ .codefeld__kasten:not(:empty) { border-color: var(--farbe-primaer); } /* Die Schreibmarke im leeren Kasten, der dran ist. Bei reduzierter Bewegung steht sie still (Regel am Ende dieses Bereichs). */ .codefeld--kaesten:focus-within .codefeld__kasten--aktiv:empty::after { content: ""; width: 2px; height: 1.1em; background: var(--farbe-text); animation: codefeld-strich 1s steps(1, end) infinite; } @keyframes codefeld-strich { 50% { opacity: 0; } } /* Wie ein Verweis und nicht wie ein Knopf — die eine Handlung des Formulars ist der Knopf darunter. Wie `.anmeldung__hilfe a`. Mit dem Polster ist die Flaeche 30 px hoch (WCAG 2.5.8 verlangt 24). */ .codefeld__weg { grid-area: weg; justify-self: start; padding: var(--abstand-1) 0; border: 0; background: none; color: var(--farbe-text); font: inherit; font-size: var(--groesse-klein); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; } /* --- Bewegung reduzieren ----------------------------------- */ /* Pflicht, keine Option. Steht am Ende, damit es alles Spaetere ueberschreibt. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; /* DIE VERZOEGERUNG MUSS MIT WEG, und das stand bis zum 31.07.2026 nicht hier. Gefunden beim Bau der Staffel in Bereich 02: die Dauer auf null zu setzen reicht NICHT — mit `backwards` steht ein Element seine Verzoegerung lang unsichtbar da und springt dann schlagartig herein. Beim letzten Element waren das 200 ms. Wer Bewegung abgeschaltet hat, saehe damit keine ruhige Seite, sondern eine, die in Stufen aufblitzt — das Gegenteil dessen, wofuer er die Einstellung gesetzt hat. Betrifft auch `.zeile--gestaffelt` im Posteingang (8 x 40 ms); dort stand eine eigene Ausnahme weiter unten. Eine Regel je Ort ist eine, die beim naechsten Ort fehlt. */ animation-delay: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; } /* Ein angehaltener Kringel ist ein halber Ring und sieht nach Fehler aus. Wenn er nicht drehen darf, kommt er weg - der ladende Zustand traegt seinen Text sowieso mit ("Wird gesendet ..."), und der bleibt lesbar. */ .kringel { display: none; } } /* =================================================================== BEREICH 01 · Die Hülle =================================================================== UMGEBAUT AM 30.07.2026. Die erste Fassung war eine schmale DUNKELVIOLETTE Schiene mit weißen Symbolen und dem Wort darunter — so, wie Regel 15 (p6) und das Employment-Hero-Bild es zeigen. Entscheidung des Auftraggebers: die violette Fläche fällt raus. Die Hülle übernimmt den AUFBAU des bestehenden Portals: · helle Leiste auf --farbe-flaeche, 1 px Rand rechts · Marke oben, dann die fünf Einträge, senkrecht · Symbol NEBEN dem Wort, nicht darunter · aktiver Punkt als Fläche über die ganze Zeile (Regel 01, a1: „aktiver Punkt als volle Fläche markiert") · Kopfzeile ohne eigene Farbe, Bedienelemente rechts gruppiert AUS DEM ALTBESTAND WANDERT NUR DER AUFBAU MIT, kein einziger Wert. Alle Farben, Abstände, Radien und Schriftgrößen kommen aus tokens.css. Die helle Leiste braucht dafür keine neue Farbe: sie benutzt --farbe-flaeche, --farbe-rand, --farbe-text und --farbe-flaeche-gedaempft, die es alle schon gibt. ÜBERFAHREN IST EIN KREIS, kein abgerundetes Rechteck — ausdrückliche Vorgabe, in der Leiste und bei den Reitern am Handy. Der Kreis sitzt hinter dem Symbol; Breite = Höhe, deshalb Kreis und nicht Pille. DER HANDSCHUH BESTIMMT DIE MASSE AM HANDY. Was hier steht, folgt der Frage: kann der Meister das mit einem Arbeitshandschuh treffen? · 60 px Mindesthöhe je Reiter, nicht 44. 44 ist das Minimum für einen bloßen Finger. · Ein Reiter ist ein Viertel der Breite. Trefferziel ist der ganze Reiter, nicht das Symbol. · touch-action: manipulation. Ohne das wartet der Browser 300 ms auf einen möglichen Doppeltipp. · env(safe-area-inset-bottom). Ohne das liegen die Reiter unter dem Home-Balken des iPhones. · Der aktive Kreis ist größer als das Symbol, und die Kante am oberen Rand des Reiters reicht über die ganze Reiterbreite — ein behandschuhter Daumen (75 px) kann sie nicht ganz verdecken. · Kein Zustand hängt an :hover. Ein Finger schwebt nicht. =================================================================== */ .huelle { /* DER BEHÄLTER IST EIN EIGENER UMSCHLAG und nicht .rahmen selbst: eine Behälterabfrage fragt den nächsten VORFAHREN mit container-type, ein Element kann sich nicht selbst abfragen. Stand container-type auf .rahmen, griffen alle Regeln für .rahmen nie — die Rasterfelder blieben in der Handy-Anordnung und die Leiste landete unten rechts. Alle 123 Messungen waren dabei grün. */ container-type: inline-size; container-name: huelle; } /* =================================================================== DER VERTRETUNGSSTREIFEN — 17.08.2026, Schritt 2 der Planung =================================================================== WAS ER TRAEGT, steht in `huelle.ts` bei `vertretungsstreifen()`. Hier steht, warum er so liegt, wie er liegt. `position: fixed` UND NICHT `sticky`, und das ist nicht gefolgert, sondern hier im Haus schon gemessen: `container-type: inline-size` an `.huelle` faengt ein `fixed`-Kind NICHT ein — die Ueberlagerung des Gespraechs steht damit bei y 0 (siehe dort, 10.08.2026). Der Streifen liegt im selben Behaelter und verhaelt sich genauso. `z-index: 60` UND DAMIT UEBER ALLEM, was die Huelle sonst stapelt: 40 die Kopfzeile 44 das Gespraech als Ueberlagerung am Handy 45 der Schleier der Schublade 50 die Schublade 60 dieser Streifen Bei allem anderen laesst sich streiten, was oben liegt. Hier nicht: der Streifen sagt, in wessen Daten der Mensch gerade schreibt. Nichts im Produkt darf ihn verdecken, auch die Navigation nicht. ER SCHIEBT DIE KOPFZEILE, STATT SIE ZU UEBERDECKEN. `--hoehe-vertretung` geht in `--kopf-luft*` ein (tokens.css); `.kopf` bekommt seinen `top` von derselben Variablen. Ueberdecken waere die Loesung, die beim ersten schmalen Fenster auffliegt. ZWEI HOEHEN, UND BEIDE SIND NACHGEMESSEN UND NICHT GERECHNET — 17.08.2026. Die erste Fassung hat sie geschaetzt und lag zweimal daneben: geschaetzt schmal 2 Zeilen = 72 px weit 1 Zeile = 48 px gemessen schmal 96 px, RAGTE IN weit 56 px DIE KOPFKARTE (y 87) Der schmale Fehler war der Text: „Du siehst in Vertretung" lief bei 390 px auf DREI Zeilen. Er hat deshalb eine kuerzere Fassung bekommen (`.vertretung__kurz` weiter unten). Der weite Fehler war der KNOPF — er ist mit seinem Polster 32 px hoch und damit hoeher als die 24-px-Zeile, an der die Rechnung haengen sollte. Beide Hoehen rechnen jetzt mit dem Knopf. EINE ZEILE RESERVE AM HANDY, und sie ist Absicht: gerechnet wird mit drei Zeilen, gebraucht werden zwei. Ein Betriebsname ist eine Zeichenkette aus einem Kundenkonto — „Heizung, Sanitaer und Klimatechnik Brenner GmbH & Co. KG" ist keine Erfindung, sondern die Art Name, die es wirklich gibt. `min-height` UND NICHT `height`: reicht auch die Reserve nicht, WAECHST der Streifen und reicht ein Stueck in die Kopfzeile hinein. Das ist die richtige Richtung des Fehlers — die Warnung gewinnt gegen die Navigation, nicht umgekehrt. Nachmessen laesst es sich mit `npx tsx werkzeuge/vertretung-ansehen.ts`; es meldet die Ueberlappung. MEDIENABFRAGE UND KEINE BEHAELTERABFRAGE, obwohl die Huelle sonst mit Behaeltern arbeitet: `--hoehe-vertretung` muss auf `:root` umgesetzt werden (die Begruendung steht in tokens.css), und dorthin reicht keine Abfrage, die an `.huelle` haengt. */ :root:has(.vertretung) { /* Zwei Textzeilen (eine gebraucht, eine Reserve), die Zeilenluecke, die Knopfzeile darunter und das Polster. */ --hoehe-vertretung: calc( var(--zeile-vertretung) * 2 + var(--abstand-2) + var(--hoehe-vertretung-knopf) + var(--abstand-3) * 2 ); } @media (min-width: 45rem) { :root:has(.vertretung) { /* Eine Zeile, alles nebeneinander — der Knopf gibt die Hoehe vor. */ --hoehe-vertretung: calc(var(--hoehe-vertretung-knopf) + var(--abstand-3) * 2); } } /* Die beiden Fassungen des Satzes. Die Begruendung, warum beide im Markup stehen und die Stilvorlage waehlt, steht bei `vertretungsstreifen()`. */ .vertretung__lang { display: none; } @media (min-width: 45rem) { .vertretung__kurz { display: none; } .vertretung__lang { display: inline; } } .vertretung { position: fixed; top: 0; left: 0; right: 0; z-index: 60; min-height: var(--hoehe-vertretung); display: flex; align-items: center; background: var(--farbe-vertretung); color: var(--farbe-flaeche); } /* SIE FLUCHTET MIT DER INHALTSSPALTE, wie die Kopfzeile auch: der Grund laeuft ueber die volle Fensterbreite, der INHALT sitzt auf der Arbeitsbreite. `--breite-spalte` und `--rand-seite` werden an `.huelle` je Seite gesetzt; der Streifen liegt darin und erbt beide, statt sie nachzubilden — dieselbe Ueberlegung wie bei `.kopf__spalte`. */ .vertretung__spalte { width: 100%; max-width: var(--breite-spalte, var(--breite-arbeit)); margin: 0 auto; padding-block: var(--abstand-3); padding-inline: var(--rand-seite); display: flex; align-items: center; /* ZWEI LUECKEN UND NICHT EINE: quer trennt sie Text, Zeit und Knopf, laengs nur die zwei Zeilen am Handy. Mit einem gemeinsamen Wert waere die Zeilenluecke doppelt so gross wie noetig — und sie geht in die reservierte Hoehe ein. */ column-gap: var(--abstand-4); row-gap: var(--abstand-2); /* AM HANDY BRICHT DIE ZEILE UM, und das ist nachgemessen: mit Zeit und Knopf daneben blieben bei 390 px rund 160 px fuer den Namen, und selbst die kurze Fassung lief auf DREI Zeilen — die reservierte Hoehe war damit schon im Normalfall aufgebraucht. Ueber die volle Breite braucht sie eine. */ flex-wrap: wrap; } /* =================================================================== JEDE KLASSE GENAU EINMAL — 17.08.2026, und das ist ein Befund =================================================================== Hier standen `.vertretung__text` und `.vertretung__zeit` je ZWEIMAL: die erste Regel setzte `flex-basis: 100%` und `margin-left: auto` fuer den Umbruch am Handy, die zweite `flex: 1` und `margin: 0` fuer alles andere. Bei gleicher Spezifitaet gewinnt die spaetere — `flex: 1` ist die Kurzform und setzt `flex-basis` auf `0%` zurueck, `margin: 0` loescht das `auto`. Der Umbruch fand also nicht statt. GEMESSEN, NICHT GEAHNT: der Textkasten war bei 390 px 141 px breit statt 350, und der Satz lief auf drei Zeilen. Im Bild sah der Streifen dabei vollkommen ordentlich aus — er war nur zu hoch, und „zu hoch" erkennt das Auge an einem Kasten, den es zum ersten Mal sieht, nicht. Es ist dieselbe Falle, die dieses Haus dreimal mit fremden Klassennamen hatte (`.antwort`, `.quartal`, `.zeichnung`) — diesmal mit einer eigenen, zwanzig Zeilen weiter oben. Also: eine Klasse, eine Regel, und was je Breite verschieden ist, steht in der Medienabfrage darunter. */ .vertretung__text { flex: 1; /* `min-width: 0` IST PFLICHT UND KEIN SCHMUCK. Ein Flex-Kind ist von sich aus `min-width: auto` und kann nicht unter seinen Inhalt schrumpfen — ein langer Betriebsname ohne Umbruchstelle schoebe damit Zeit und Knopf aus dem Fenster. Genau diese Falle steht sechsmal in den Lehren des Hauses. */ min-width: 0; /* `100%` ERZWINGT DEN UMBRUCH am Handy und ueberlaesst ihn nicht dem Zufall des Textmasses: der Text nimmt die ganze Zeile, Zeit und Knopf ruecken in die naechste. Andernfalls haenge die Zeilenzahl davon ab, wie lang der Name gerade ist — und die reservierte Hoehe waere je Kunde eine andere. GEGENGEPROBT AM 17.08.2026: auf `0%` gesetzt, und die Messung `vertretung.spec.ts` bei 390 px wurde rot. Sie prueft also wirklich, was ihr Name sagt — ein erster Anlauf derselben Gegenprobe blieb gruen, weil die Ersetzung gar nicht gegriffen hatte. */ flex-basis: 100%; margin: 0; font-size: var(--groesse-klein); line-height: var(--zeile-vertretung); /* Und weil ein Betriebsname auch EIN langes Wort sein kann, an dem es nichts zu brechen gibt. */ overflow-wrap: anywhere; } .vertretung__betrieb { font-weight: var(--schrift-fett); } .vertretung__zeit { flex: none; /* Zeit und Knopf stehen am rechten Rand ihrer Zeile, unter dem Text. */ margin: 0 0 0 auto; font-size: var(--groesse-klein); line-height: var(--zeile-vertretung); /* Damit die Zahl beim Herunterzaehlen nicht springt. */ font-variant-numeric: tabular-nums; } /* Ab dem Umbruch der Huelle steht alles nebeneinander in einer Zeile. */ @media (min-width: 45rem) { .vertretung__spalte { flex-wrap: nowrap; } .vertretung__text { flex-basis: auto; } .vertretung__zeit { margin-left: 0; } } .vertretung__form { flex: none; margin: 0; display: flex; } /* HELLE FLAECHE AUF DUNKLEM GRUND, und der Text darauf traegt die Streifenfarbe: 7,40:1. Das ist die Hausregel — dunkle Fuellungen tragen Weiss, helle tragen Tinte —, hier auf einen Knopf angewandt, der sich von seinem eigenen Grund abheben muss. */ .vertretung__beenden { border: 0; cursor: pointer; padding: var(--abstand-1) var(--abstand-3); border-radius: var(--radius-klein); background: var(--farbe-flaeche); color: var(--farbe-vertretung); font-family: inherit; font-size: var(--groesse-klein); font-weight: var(--schrift-halbfett); line-height: var(--zeile-vertretung); } /* =================================================================== DIE HOEHE DER HUELLE — Fundamentaenderung vom 31.07.2026 =================================================================== Vorher stand hier `min-height: 100vh`. Das klingt harmlos und war der schwerste Fehler der ganzen Arbeit: `min-height` laesst die Rasterzeile mit dem Inhalt wachsen. Damit hatte `main.inhalt` KEINE feste Hoehe — und `height: 100%` in einer Seite darin loeste sich zu `auto` auf. Die Folge: die Liste des Posteingangs hatte NIE einen eigenen Bildlauf. Gemessen auf der echten Seite: clientHeight 4960 = scrollHeight 4960, die ganze Seite scrollte mit. Genau das, was die zweite tragende Entscheidung von Bereich 03 ausschliesst — „Die Liste ist ihr eigener Bildlauf. Nur so bleibt die Stelle erhalten." Acht Runden lang war das gruen gemessen, weil alle Messungen in der Werkstatt liefen und die Werkstattprobe eine FESTE Hoehe hat. `100dvh` statt `100vh`: auf dem Handy waechst und schrumpft die Browserleiste, und `vh` rechnet mit der GROESSTEN Fensterhoehe. Damit waere die Reiterleiste unter dem Rand — bei `dvh` nicht. WAS DARAUS FOLGT, und wogegen die Wache steht: eine Seite, die laenger ist als die Huelle und keinen eigenen Bildlauf hat, wird ab jetzt STILLSCHWEIGEND ABGESCHNITTEN. Deshalb prueft `tests/messungen/huelle.spec.ts` beides — abgeschnittenen Inhalt und eine Liste, die ihren Bildlauf verloren hat — und zwar auf der ECHTEN SEITE. =================================================================== */ .rahmen { /* `min-height` STATT `height` — Baustelle 0.1, 04.08.2026. Das ist genau die Zeile, die der Kommentar darueber als „schwersten Fehler der ganzen Arbeit" beschreibt, und sie kommt mit Ansage zurueck. Damals war sie ein Fehler, WEIL die Liste des Posteingangs ihren eigenen Bildlauf verlor. Der bleibt ihr jetzt ausdruecklich erhalten (`.posteingang__zeilen`), und alles andere scrollt als Dokument. Die Hoehe stellt nur noch sicher, dass eine kurze Seite den Bildschirm fuellt. */ min-height: 100dvh; /* KEIN RASTER MEHR. Jitters Huelle ist keine Rasterflaeche ueber das ganze Fenster, sondern eine MITTIGE SPALTE mit einer frei darueber liegenden Kopfzeile. Das Raster mit den vier Feldern (kopf/leiste/ inhalt/reiter) ist damit hinfaellig — es gibt kein Reiterfeld mehr, und die Kopfzeile liegt nicht im Fluss. */ display: flex; flex-direction: column; /* WEISS, NICHT GEDAEMPFT. [gemessen] Jitters Listenseiten stehen auf `#fff`; nur die Einstellungen stehen auf `#f2f1f3` und tragen dort weisse Karten mit 20 px Radius. Die Leiste hat keine eigene Flaeche mehr, also gaebe ein gedaempfter Grund ihr auch keinen Koerper. */ background: var(--farbe-flaeche); } /* --- Die mittige Spalte ------------------------------------------- */ /* DAS IST DAS STUECK, DAS JITTERS HUELLE AUSMACHT und das wir vorher nicht hatten: sie ist NICHT randlos. [gemessen] `_container_7fqyt_136`: `width: 100%`, `max-width: 860px` ab 1025 px und 1082 px ab 1441, `margin: 0 auto`, `gap: 32px` bzw. 100. Die Folge ist genau das, was im Auftrag steht: die Leiste sitzt EINGERUECKT und nicht buendig. Bei 1440 px beginnt sie bei x = 291 — das ist kein Polster, sondern die linke Kante einer mittigen Spalte. AM HANDY IST DIE SPALTE VOLL BREIT mit 20 px Polster. [gemessen] `padding-inline: 20px` unter 1025 px. Derselbe Wert wie der Abstand der Kopfzeile zur Fensterkante, und das ist bei Jitter dieselbe Entscheidung. */ .spalte { flex: 1; min-height: 0; width: 100%; /* ARBEITSBREITE IST DIE VORGABE — 05.08.2026. Die Lesebreite fordert eine Seite an, statt dass jede Seite sie loswerden muss. Begruendung und Messung stehen bei den Tokens. */ max-width: var(--breite-spalte, var(--breite-arbeit)); margin: 0 auto; display: flex; gap: var(--luecke-huelle); /* DERSELBE WERT WIE AN DER KOPFZEILE, und seit dem 05.08.2026 (Frage 20) auch dasselbe TOKEN: `--rand-seite` waechst mit dem Behaelter von 20 auf 72 px. Vorher standen hier zwei Zahlen, umgeschaltet an der Behaelterabfrage weiter unten — die Herleitung steht bei den Tokens. */ padding-inline: var(--rand-seite); } /* DIE ZWEI LESE-SEITEN FORDERN DIE SCHMALERE SPALTE AN. ==================================================== Ueber `:has()` und nicht ueber eine Marke am Koerper: die Unterscheidung ist eine Eigenschaft des INHALTS, nicht des Servers, und sie steht damit an derselben Stelle wie die Breite selbst. Wer eine dritte Lese-Seite baut, traegt sie hier ein — eine Zeile, sichtbar neben ihren Nachbarn, statt eines Schalters in einer Route. */ /* HIER STAND `.spalte:has(.ziele, .einstellungen)` und hat nicht gegriffen — nachgemessen am 05.08.2026: die Spalte blieb auf Arbeitsbreite. Die Ursache ist nicht gesucht worden, weil sie nicht gebraucht wird. Die Lesebreite sitzt jetzt am INHALT statt an der Spalte, und das ist die bessere Stelle: die Spalte behaelt ihre Kante bei 72 px, der Lesestoff endet frueher. Waere die Spalte selbst schmaler und mittig, wanderte die linke Kante nach innen — und die eine Kante, um die es in dieser Stufe geht, waere auf zwei Seiten eine andere als auf den vier uebrigen. */ .ziele, .einstellungen { max-width: var(--breite-lesen); } /* EINE KANTE, NICHT DREI — 05.08.2026. =================================== Gemessen bei 1440 px lagen drei Kanten uebereinander: 72 px fuer Kopfzeile, `main` und Seitentitel, 80 px fuer jeden Abschnitt, 104 px fuer den Text darin. Der Seitentitel begann damit 32 px links von allem, was unter ihm steht — auf jeder Seite, in jedem Abschnitt. Das war der Grund fuer „die Seite hat keine Kante", nicht die Breite. Die Breite belegte bei 1440 px 90 % und war nie das Problem. Die 8 px kamen aus `max-width: var(--inhalt-breite)` am Abschnitt (1280 in einer 1296 px breiten Spalte), die 24 px aus seinem Querpolster. Beide fallen: der Abschnitt IST jetzt die Spalte. Die Vorlage stuetzt das doppelt — bei Jitter tragen die Sektionen weder Grund noch Rundung noch Polster; was Flaeche traegt, sind die Kacheln darin (`vorlage/jitter/MESSUNG.md`, Sektionsgrammatik). */ .abschnitt { max-width: none; margin-inline: 0; padding-inline: 0; } /* DIE 240 PX LUFT UEBER ALLEM. [gemessen] `padding-top: 240px` an `_scrollAreaContent_` UND `_main_` — derselbe Wert an beiden. Genau deshalb fluchten Jitters Gruppenueberschrift und seine Seitentitel. Unter 1025 px sind es 140. WAS DAS BEI UNS KOSTET, und es ist der Preis dafuer, Jitters Geometrie in unsere Huelle zu setzen: bei Jitter scrollt das Dokument, die 240 px scrollen also weg. Unsere Huelle ist 100 dvh hoch — hier sind sie dauerhaft weg. Bei 900 px Fensterhoehe sind das 27 %. Uebernommen, weil der Auftrag "gemessen, nicht angenaehert" lautet; angesehen und gemeldet, statt still verkleinert. */ .spalte__leiste, .spalte__inhalt { padding-top: var(--kopf-luft-schmal); } .spalte__inhalt { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; } /* DER SEITENTITEL. Er stand bis zum 03.08.2026 in der Kopfzeile und war 30 px gross. [gemessen] Bei Jitter ist er das erste Element der Inhaltsspalte: 48 px ab 1025, 60 ab 1441 — und 64 DARUNTER. Er ist am Handy GROESSER als am Laptop, was gegen jede Gewohnheit geht und dreimal nachgemessen ist. Er bleibt AUSSERHALB von `main`, damit `.inhalt` seinen Vertrag behaelt: ein Kasten mit fester Hoehe, in dem eine Liste ihren eigenen Bildlauf hat. `aria-labelledby` haelt die Verbindung. */ /* `.spalte--breit` STAND HIER und ist am 03.08.2026 gefallen, keine sechs Stunden nach ihrer Entstehung. Überstimmung 21 gab zweispaltigen Bildschirmen eine eigene, breitere Spalte, weil die Blase im Gespräch ihre Lesebreite sonst nie erreichte. Seit die Seitenwahl oben liegt, gibt es keine zwei Breiten mehr — es gibt nur noch eine, und sie ist die volle. Der Posteingang bekommt bei 1440 px 1296 px statt der 1002, die ihm die Überstimmung zugestanden hatte. Das Anliegen ist damit erfüllt und die Ausnahme überflüssig. Die Rechnung in tokens.css bleibt als Beleg stehen: sie sagt, wieviel eine zweispaltige Ansicht MINDESTENS braucht (1002 px), und das ist weiter die Zahl, an der man merkt, wenn die Spalte zu schmal wird. */ .seitentitel { margin: 0 0 var(--luft-nach-titel-schmal); min-width: 0; font-size: var(--groesse-seitentitel-schmal); font-weight: var(--schrift-schwer); line-height: 1.04; /* -0,032 em, ANGESAGT AM 05.08.2026 und aus der Vorlage abgeleitet: Jitters h1 traegt -2,4 px auf 80 px (= -0,03 em) und -4,5 px auf 140 px (= -0,032 em). Die Laufweite haengt bei ihm an der GROESSE, nicht am Element — deshalb in em und nicht in px, sonst waere sie bei 72 px eine andere Enge als bei 96. */ letter-spacing: -0.032em; color: var(--farbe-text); hyphens: auto; } /* --- Kopfzeile ---------------------------------------------------- */ /* SIE LIEGT FEST AM FENSTER UND NICHT IM RASTER. [gemessen] Jitter hat dort ZWEI feste Elemente: die Marke links (`left: 72px`) und `_rightPart_` rechts (`right: 72px`, `top: 48px`, Hoehe 80, Luecke 15). Unter 1025 px sind es 20/20, Hoehe 60, Luecke 18. Wir bauen daraus EIN Band ueber die volle Breite mit `justify-content: space-between`. Geometrisch ist das dasselbe — die linke Kante liegt bei 72, die rechte bei Fensterbreite minus 72 — und es spart ein zweites festes Element. `pointer-events` ist kein Zierrat: ein festes Band ueber die volle Breite faengt sonst Klicks in seinen leeren 800 px ab. Nur die Kinder nehmen Eingaben an. EINE ABWEICHUNG, gemessen und begradigt: Jitters Marke sitzt bei y=73 (Mitte 93), sein rechter Teil bei y=48 mit 80 Hoehe (Mitte 88). Die beiden fluchten also um 5 px nicht. Wir setzen beide auf dieselbe Mittelachse — eine Ungenauigkeit der Vorlage ist kein Mass. */ .kopf { position: fixed; z-index: 40; /* EINE VARIABLE FUER DEN ABSTAND ZUR FENSTERKANTE, seit dem 07.08.2026. Sie steht hier, weil ZWEI Dinge sie brauchen: die Zeile selbst und ihr Grund, der von der Fensterkante bis zur Unterkante der Zeile reicht. Zwei Regeln, die denselben Wert einzeln nachziehen, laufen beim ersten Umbruchpunkt auseinander — und genau das ist hier am 06.08.2026 passiert. */ /* SEIT MUSTER M HAENGT DIE LEISTE AN DER FENSTERKANTE — 09.08.2026. Hier stand `top: var(--kopf-abstand-oben)`, weil ein Band an die Kante gehoert und die Leiste darunter anfing. Bei M traegt die KARTE ihren Abstand selbst (`--karte-kopf-oben`); der Kopf ist nur der Rahmen um sie und faengt bei 0 an. Zwei Abstaende uebereinander waeren derselbe doppelt. */ /* …AUSSER DER VERTRETUNGSSTREIFEN STEHT DA — 17.08.2026. `--hoehe-vertretung` ist 0 px, solange keine laeuft; `top: 0px` ist `top: 0`, und fuer jeden ohne Vertretung aendert sich damit nichts. Laeuft eine, rutscht die Kopfzeile um genau die Streifenhoehe nach unten — und weil `--kopf-luft*` dieselbe Variable enthaelt, rutscht der Inhalt darunter mit, ohne dass hier eine zweite Zahl steht. */ top: var(--hoehe-vertretung); left: 0; right: 0; height: var(--hoehe-kopf-schmal); /* DIE LEISTE SELBST TRAEGT NICHTS MEHR ALS DEN GRUND — 08.08.2026. Hier standen `display: flex`, `justify-content: space-between`, `gap` und `padding-inline: var(--rand-kopf)`. Alles vier ist an `.kopf__spalte` gewandert; die Herleitung steht dort. */ background: transparent; pointer-events: none; } .kopf > * { pointer-events: auto; } /* =================================================================== DIE SPALTE DER KOPFZEILE — DIE ACHSE DER SEITE, 08.08.2026 =================================================================== ANGESAGT: „Der weisse Grund laeuft ueber die volle Fensterbreite, der INHALT der Leiste sitzt auf der Inhaltsbreite. Wortmarke buendig mit dem Seitentitel darunter, Konto buendig mit der rechten Kante des Inhalts." DER BEFUND, GERENDERT GEMESSEN AM 08.08.2026 — und er ist deutlicher, als er klingt: unsere Inhaltsspalte IST schon Jitters Spalte, auf das Pixel. Fenster unser Inhalt Jitters Inhalt unsere Kopfzeile 1920 300 .. 1620 (1320) 300 .. 1620 (1320) 72 .. 1848 1440 289 .. 1151 (861) 290 .. 1150 (860) 72 .. 1368 390 20 .. 370 (350) 20 .. 370 (350) 74 .. 370 Nur die Leiste stand daneben, bei 1920 um 228 px. Zwei Kanten auf einem Bildschirm, und die obere ist die auffaelligste Zeile der Seite. DIE URSACHE WAR EINE TRENNUNG, DIE ABSICHT WAR. Am 06.08.2026 bekam die Kopfzeile ein eigenes Randtoken (`--rand-kopf`, 20 bis 72 px), mit dem Satz „sie zwingt der Spalte also nichts mehr auf". Richtig war daran, dass die Spalte frei werden sollte — bis dahin deckelte der Platzbedarf der Kopfzeile sie bei 1440 px auf 940 statt 860. Falsch war die Folge: die Leiste ist dabei von der Seite abgerutscht. `--rand-seite` UND NICHT EINE EIGENE ZAHL, und das ist der Punkt: der Wert wird auf `.huelle:has(.bento)` neu gesetzt, also je Seite. Die Kopfzeile liegt IN dieser Huelle und erbt ihn damit von selbst. Sie folgt der Spalte, statt sie nachzubilden — und auf einer Seite ohne Bento (der Posteingang zum Beispiel) folgt sie deren engerem Rand genauso, ohne dass hier eine zweite Regel dazukommt. WAS DAMIT ZURUECKKOMMT, ist der Platzkonflikt von damals, und er ist nachgemessen statt aus dem alten Vermerk uebernommen (der rechnete noch mit dem Kasten um die Woerter und einer 40 px hohen Wortmarke, beides seit dem 08.08.2026 weg). Die Zahlen stehen bei `--polster-navi-wort`. */ .kopf__spalte { /* SIE LIEGT AUF DER KARTE, NICHT IM KOPF — 09.08.2026, Muster M. Hier stand `height: 100%`, also die volle Kopfhoehe. Das setzt den Inhalt in die Mitte des Rahmens statt in die Mitte der Karte, und das sind bei 1440 px zwanzig Pixel Unterschied. GEMESSEN AN JITTER LIVE: seine Handlungspille steht bei y 58..110, Mitte 84. Seine Karte steht bei y 39..129, Mitte 84 — dieselbe Zahl. Sein Kopf ist 0..129, Mitte 64,5. Der Inhalt folgt der Karte. */ position: absolute; z-index: 1; left: 0; right: 0; top: var(--karte-kopf-oben-schmal); height: var(--karte-kopf-hoch-schmal); /* ================================================================== DIE ACHSE, SO WEIT SIE TRAEGT — und die Zahl, ab der sie es nicht tut ================================================================== `var(--rand-seite)` allein waere die reine Lehre und sie schneidet Woerter ab. GEMESSEN am 08.08.2026, sieben Fensterbreiten, Bedarf gegen Innenbreite auf der Inhaltsachse: Fenster innen Bedarf fehlt 1920 1320 972 passt 1600 1000 972 passt 1440 861 876 15 1200 754 866 112 1024 675 866 191 800 574 866 292 die Leiste laeuft ueber das 720 539 866 327 Fenster hinaus Der Bedarf ist die Summe der Posten und keine gegriffene Zahl: Wortmarke + sechs Woerter + Kontobild + die zwei Luecken. Bei 1440 sind das 96 + 677 + 64 + 24 + 15. WER EIN SIEBTES WORT IN DIE NAVIGATION SETZT, RECHNET IHN NEU — die Zahl steht als Token `--bedarf-kopf`, damit sie an einer Stelle steht und gefunden wird. WARUM DAS UEBERHAUPT PASSIERT: die Inhaltsspalte der Uebersicht nimmt bei 1440 px zweimal 289 px Rand, also 40 % des Fensters. Das ist Jitters Mass und es ist abgenommen — nur traegt seine Kopfzeile dort vier kurze Woerter und unsere sechs lange. JITTERS EIGENE ANWENDUNG MACHT ES NICHT ANDERS, gemessen am 07.08.2026: ihre Wortmarke steht bei 1920 px auf x 80, ihr Inhalt faengt bei x 420 an. NUR seine Werbeseite teilt die Achse — und dort ist der Kopfinhalt klein genug. ALSO: DIE ACHSE, SO WEIT SIE TRAEGT, und darunter zieht die Leiste ein statt abzuschneiden. `min()` nimmt die Achse, solange der Inhalt hineinpasst; `max()` haelt sie nie enger als den alten Rand der Kopfzeile. WAS DAS BEI 1440 PX KOSTET: 282 statt 289 px, also 7 px oder ein halbes Prozent der Fensterbreite. Ab rund 1455 px steht sie exakt auf der Achse. Das ist der Preis dafuer, dass bei 1200 px kein Wort abgeschnitten wird. */ padding-inline: max( var(--rand-kopf), min(var(--rand-seite), (100cqw - var(--bedarf-kopf)) / 2) ); display: flex; align-items: center; justify-content: space-between; gap: var(--luecke-kopf-schmal); /* Ein Flex-Kind kann ohne das nicht unter seinen Inhalt schrumpfen — und der Inhalt dieser Zeile ist bei 1440 px knapp. */ min-width: 0; } /* =================================================================== SIE KLAPPT WEG UND KOMMT WIEDER — 06.08.2026, angesagt =================================================================== „Beim Herunterscrollen klappt sie zusammen, beim Hochscrollen wieder auf. Den Code dafuer gibt es schon im Repo EB-Software-Website." GELESEN UND UEBERNOMMEN aus `EB-Software-Website`, `skripte/kopfzeile.js` und `stile/kopfzeile.css` (dort nichts geaendert — an dem Repo arbeitet eine andere Instanz). Was von dort kommt: Schwelle 100 px darunter passiert gar nichts. Ohne sie flackert die Zeile beim kleinsten Ruck am Seitenanfang. Totband 8 px Richtungswechsel unter 8 px zaehlen nicht. Das ist der Unterschied zwischen „klappt weg" und „zittert". drei Marken `ist-klebend` (ueber der Schwelle), `ist-verkleinert` (abwaerts), `war-klebend` (aufwaerts). Die dritte ist nicht ueberfluessig: ohne sie waere „noch nie gescrollt" dasselbe wie „gerade hochgescrollt". SIE VERSCHWINDET NICHT, SIE WIRD KLEINER — berichtigt am 06.08.2026. ================================================================== Hier stand `transform: translateY(calc(-100% - var(--kopf-oben)))`: die Zeile fuhr beim Herunterscrollen ganz weg. Das war die Mechanik der Website ohne ihr Bild. NACHGESEHEN, WIE DER EINGEKLAPPTE ZUSTAND DORT AUSSIEHT, gerendert bei 1920 und 1440 px: die Website laesst ebenfalls nichts stehen — ihre Wortmarke faehrt `translateY(-130px)` weg, der weisse Grund geht auf `opacity: 0`, uebrig bleiben ihr Handlungsknopf und der Burger. ANGESAGT IST ETWAS ANDERES, und das ist eine Entscheidung und kein Nachbau: „Logo bleibt immer sichtbar, Profilbild bleibt immer sichtbar, die Leiste wird beim Herunterscrollen zu einer kleineren Fassung ihrer selbst." DIE KLEINERE FASSUNG MUSSTE NICHT ERFUNDEN WERDEN — es gibt sie schon: es sind die Masse, die die Zeile am Handy traegt (`--kopf-oben-schmal`, `--hoehe-kopf-schmal`, `--luecke-kopf-schmal`, `--kontobild-schmal`). Sie sind gemessen, sie stehen zueinander, und die Zeile sieht eingeklappt aus wie sie selbst und nicht wie ein dritter Entwurf. Was faellt, ist die Seitenwahl — angesagt sind Logo und Profilbild, und am Handy ist die Seitenwahl ohnehin aus. DER WEISSE GRUND KOMMT VON DER WEBSITE, und ER ist das Stueck Bild, das beim ersten Mal gefehlt hat: ihr weisser Grund — weisse Flaeche, feiner Schatten, blendet ein, sobald die Zeile klebt. Solange sie ganz wegfuhr, brauchte sie ihn nicht. Jetzt steht sie ueber dem Inhalt, und ohne Grund liefe der Text unter der Wortmarke durch. OHNE SKRIPT BLEIBT SIE VOLL. Das ist die richtige Richtung des Ausfalls. */ .kopf { transition: top var(--dauer-mittel) var(--kurve), height var(--dauer-mittel) var(--kurve); } /* =================================================================== DER GRUND IST EIN VOLLES BAND BIS AN DIE FENSTERKANTE — 07.08.2026 =================================================================== HIER STAND EINE SCHWEBENDE KARTE, uebernommen aus `EB-Software-Website/stile/kopfzeile.css`: schmaler als das Fenster, runde Ecken, fuenflagiger Schatten, `opacity: 0` bis aufwaerts gescrollt wird. Sie ist am 07.08.2026 gefallen, und sie ist der Grund dafuer, dass diese Leiste dreimal falsch aussah: die weisse Karte schnitt die Kacheln an „13. August 2026" verschwand zur Haelfte hinter ihrer Unterkante. Seiteninhalt lugte OBEN hervor ein farbiger Streifen der Kacheln stand im 48-px-Spalt ueber der Leiste. eingeklappt fehlte der Grund ganz der Navigationskasten schwebte frei ueber der violetten Kachel. JITTERS EIGENE KOPFLEISTE MACHT DIE ERSTEN BEIDEN AUCH — gerendert gemessen am 07.08.2026, Offline-Abzug seiner Startseite, 1920 px: Leiste `position: fixed`, top 0, 129 px hoch, volle Breite, Fuellung `rgba(0,0,0,0)` — sie selbst ist DURCHSICHTIG. Karte x 260, y 35, 1400 x 100, Radius 20, Rand unten 1 px #F2F1F3, fuenflagiger Schatten. Streifen 35 px zwischen Fensterkante und Kartenoberkante. Bei scrollY 1800 steht in diesem Streifen sichtbar Seiteninhalt (ein gruener Kreis, weisse Kaesten, ein dunkler Kasten), und die Kante der Karte schneidet eine blaue Flaeche mitten durch. Das ist dasselbe Bild, das beanstandet wurde — bei Jitter. WARUM ES DORT NICHT STOERT UND HIER SCHON, und das ist der ganze Befund: bei Jitter ist die Seite an dieser Stelle WEISS oder hellgrau. Der Streifen zeigt nichts, weil dort nichts ist. Unsere Uebersicht traegt randlose Vollton-Kacheln, die genau dort durchlaufen. Die Geometrie war richtig kopiert; was nicht mitkopiert werden kann, ist die Bedingung, unter der sie traegt. ZUM VERGLEICH JITTERS ANWENDUNG (`Drafts`), dieselbe Messung: sie hat ueberhaupt keine Leiste. Wortmarke und Profilbild sind zwei einzelne `position: fixed`-Stuecke auf weissem Grund, und der Inhalt faengt erst bei y = 240 an — er kommt ihnen gar nicht nahe. Auch das ist eine Bedingung, die wir nicht haben. ALSO JITTERS MASSE UND EIN GRUND, DEN ER NICHT BRAUCHT. Die drei Auflagen der Ansage lassen nichts anderes zu: „kein Seiteninhalt oberhalb oder hinter der Leiste", „die Leiste hat immer einen Grund, auch eingeklappt", „Wortmarke und Profilbild in jedem Zustand sichtbar". Ein durchsichtiger Streifen ueber einem Band erfuellt die erste nicht, eine Karte mit `opacity: 0` die zweite nicht. DER GRUND REICHT DESHALB BIS AN DIE FENSTERKANTE und ueber die volle Breite, und er ist IMMER da. Er bleibt ein eigenes Element und wird kein `background` an der Leiste: die Leiste selbst faengt bei `--kopf-abstand-oben` an, der Grund muss darueber hinaus. SEINE KANTE KOMMT ERST, WENN SIE GEBRAUCHT WIRD. Ganz oben ist die Leiste nahtlos mit der Seite — kein Strich, kein Schatten, nichts, was sie als Rahmen um die Seite lesen liesse (der Befund vom 06.08.2026, und er gilt weiter). Sobald etwas darunter durchscrollt, kommen Haarstrich und Schatten: dieselben zwei Merkmale, die Jitters Karte traegt, nur an einer geraden Kante statt an einer runden. */ .kopf__karte { position: absolute; z-index: 0; /* SIE SITZT AUF DER INHALTSSPALTE PLUS UEBERHANG. `--rand-seite` ist derselbe Wert, den `.spalte` liest — die Karte bildet die Achse also nicht nach, sie folgt ihr. Der Ueberhang ist der einzige eigene Betrag, und er ist gemessen (Jitter live, 09.08.2026). */ top: var(--karte-kopf-oben-schmal); height: var(--karte-kopf-hoch-schmal); left: calc(var(--rand-seite) - var(--ueberhang-kopf-schmal)); right: calc(var(--rand-seite) - var(--ueberhang-kopf-schmal)); background: var(--farbe-flaeche); border-radius: var(--radius-kopf-schmal); /* HIER STAND EIN 1-PX-RAND auf `--farbe-rand` — Jitters Karte hat einen (`1px #F2F1F3`). Am 09.08.2026 angesagt: „die Border kann leichter / weg." Sie ist weg, und die Form traegt jetzt allein der fuenflagige Schatten. Genau dafuer stehen seine weichen oberen Lagen da; der Vermerk an `--schatten-kopf` sagt es schon: „der Grund hier hat keine Kontur an drei Seiten — er traegt seine Form allein ueber den Schatten." Das gilt jetzt an allen vieren. */ box-shadow: var(--schatten-kopf); /* DIE KARTE NIMMT KLICKS AN, obwohl die Leiste `pointer-events: none` traegt. Ein Kind mit `auto` ist trotzdem greifbar — und das MUSS es hier sein: eine undurchsichtige Flaeche, durch die man auf etwas klickt, das man nicht sieht, ist schlimmer als eine, die den Klick schluckt. */ pointer-events: auto; /* ================================================================== DIE DREI ZUSTAENDE — gemessen an jitter.video live, 09.08.2026 ================================================================== oben `opacity: 0`, um 34,5 px nach oben versetzt abwaerts `opacity: 1`, aber um 140 px hochgefahren — also ausserhalb des Fensters und damit unsichtbar aufwaerts `opacity: 1`, `translateY(0)` — sie steht GEMESSEN, NICHT GEDEUTET: bei 1440 px steht die Karte im Aufwaerts-Zustand bei y 39..129, im Abwaerts-Zustand bei y −101..−11. Jitter faehrt sie mit `transform`, nicht mit `display` — deshalb ist sie im Baum immer da und misst sich auch dann, wenn man sie nicht sieht. Wer nur `getBoundingClientRect` liest und das Vorzeichen uebersieht, haelt sie fuer sichtbar. DER ANFANGSZUSTAND IST UNSICHTBAR, und das ist der Punkt, an dem diese Vorlage von der bisherigen abweicht: ganz oben hat die Zeile KEINEN Grund. Was darunter liegt, steht offen im Bild. */ opacity: 0; transform: translateY(-34.5px); transition: opacity var(--dauer-mittel) var(--kurve), transform var(--dauer-mittel) var(--kurve); } /* AUFWAERTS: die Karte steht. Das ist der einzige Zustand, in dem sie sichtbar ist. */ .kopf.ist-klebend.war-klebend .kopf__karte { opacity: 1; transform: translateY(0); } /* ABWAERTS: sie faehrt aus dem Bild. `-140px` ist Jitters Wert, gemessen an seiner Matrix im Abwaerts-Zustand. SIE BLEIBT DABEI DURCHSICHTIG, und das ist eine Abweichung von der gemessenen Vorlage mit Grund. Jitter setzt hier `opacity: 1`. Bei ihm geht das, weil seine Karte im Anfangszustand schon fast aus dem Bild steht; bei uns steht sie bei 1440 px auf y 5 — also MITTEN IM BILD, nur durchsichtig. MIT `opacity: 1` BLITZT SIE DESHALB AUF: der Uebergang blendet sie ein, waehrend sie erst nach oben herausfaehrt, und man sieht sie fuer den Bruchteil einer Sekunde ueber dem Inhalt liegen. Das ist das Zucken, das am 09.08.2026 beanstandet wurde („oben buggt es ein bisschen"). `opacity: 0` HIER heisst: sie ist genau in EINEM Zustand sichtbar, naemlich aufwaerts. In den anderen beiden ist sie es nicht, und der Weg dazwischen zeigt nichts. */ .kopf.ist-klebend.ist-verkleinert .kopf__karte { opacity: 0; transform: translateY(-140px); } /* DER LINKE TEIL FAEHRT MIT — Wortmarke und Seitenwahl. Jitter laesst beim Abwaertsrollen nur die Handlung rechts stehen; sein linker Teil ist dann aus dem Bild. DAS IST DIE AUFLAGE, DIE MIT DER WAHL VON MUSTER M GEFALLEN IST: „Wortmarke und Profilbild sind in jedem Zustand sichtbar." Das Profilbild bleibt (es steht rechts und faehrt nicht mit), die Wortmarke nicht. Vorgelegt und so entschieden. DER SCHUBLADENAUSLOESER FAEHRT NICHT MIT, und das ist kein Abweichen von der Vorlage, sondern ihre Uebertragung. Bei Jitter faehrt der Kasten mit Wortmarke und Navigation weg; sein Burger steht RECHTS und bleibt deshalb stehen. Unserer steht LINKS. Wer den ganzen linken Teil wegfaehrt, nimmt am Handy den einzigen Weg zur Navigation mit — beim Herunterscrollen waere die Seitenwahl dann nicht mehr erreichbar. Gemessen und im Bild gesehen, bevor es hier stand. Deshalb fahren `.kopf__marke` und `.kopf__navi` einzeln, nicht ihr gemeinsamer Kasten. */ .kopf__marke, .kopf__navi { transition: transform var(--dauer-mittel) var(--kurve); } .kopf.ist-klebend.ist-verkleinert :is(.kopf__marke, .kopf__navi) { transform: translateY(-140px); } /* SIE BELEGT DABEI KEINEN PLATZ MEHR — 09.08.2026, gemessen. `transform` verschiebt nur das Bild; im Fluss steht die Seitenwahl weiter mit ihren 677 px. Solange rechts nur ein 60 px breiter Kreis stand, ging das auf. Mit der Pille (150 px) und dem Burger (48 px) nicht mehr: bei 1440 px endete der Burger auf x 1204 statt 1158 — er stand 46 px ueber der rechten Kante des Inhalts. `position: absolute` NIMMT SIE AUS DEM FLUSS, ohne sie aus dem Baum zu nehmen. `display: none` waere das naheliegende Mittel und das falsche: es beendet die Bewegung sofort, statt sie zu Ende laufen zu lassen. */ .kopf.ist-klebend.ist-verkleinert .kopf__navi { position: absolute; right: 0; } /* DER INHALT LIEGT UEBER DEM GRUND. Ohne `position` haetten die Kinder keinen eigenen Stapelplatz und stuenden hinter der Karte. */ .kopf__links, .kopf__navi, .kopf__rechts { position: relative; z-index: 1; } /* HIER STAND DIE REGEL, DIE RAND UND SCHATTEN ERST BEI `ist-klebend` BRACHTE. Sie ist am 09.08.2026 mit dem Band gefallen: die Karte traegt beides immer, weil sie eine Karte ist und keine Kante der Seite. Sie ist dafuer die meiste Zeit gar nicht da — siehe die drei Zustaende oben bei `.kopf__karte`. DIE HOEHE AENDERT SICH BEI M NICHT MEHR. Gemessen an Jitter live: sein Kopf ist in allen drei Rollzustaenden 129 px hoch (100 bei 390), und die Karte behaelt ihre 90 px. Was sich bewegt, ist die Karte — nicht die Zeile, in der sie liegt. Hier stand deshalb ein `height: var(--hoehe-kopf-schmal)` fuer den eingeklappten Zustand; es hat keinen Leser mehr. */ .kopf__links, .kopf__rechts { display: flex; align-items: center; gap: var(--luecke-kopf-schmal); } /* `min-width: 0` AM LINKEN TEIL, und es ist kein Zierrat — 08.08.2026. Ein Flex-Kind ist von sich aus `min-width: auto` und kann deshalb nicht unter seinen Inhalt schrumpfen. Ohne diese Zeile schiebt die Zeile bei 800 px das Kontobild ueber die Fensterkante hinaus (gemessen: 825 px Inhalt in 800 px Fenster), und weil `.kopf` am Fenster haengt, meldet das keine Wache — genau die fuenfte Erscheinungsform aus PRUEFUNGEN.md. MIT DER ZEILE bleibt die Enge dort, wo sie hingehoert: in der Seitenwahl. Sie ist damit nicht behoben — bei 800 und 720 px sind die sechs Woerter um 86 px zu breit und werden abgeschnitten. Das ist VORBESTAND, gegengeprueft am 08.08.2026 mit `git stash`: dieselben 86 px auch vorher. Was es braucht, ist eine Entscheidung darueber, ab welcher Breite die Seitenwahl in die Schublade weicht — die Website schaltet ihre bei 1024 px um, unsere Schublade endet bei 720. Das ist ein eigener Handgriff und steht im Uebergabepunkt. */ .kopf__links { min-width: 0; } /* =================================================================== DIE SEITENWAHL OBEN — 03.08.2026 =================================================================== Sie ersetzt die Seitenleiste am Laptop. Am Handy bleibt die Schublade: sechs Wörter passen dort nicht in eine Zeile. =================================================================== DER KASTEN IST AM 08.08.2026 GEFALLEN — die Vorlage hat keinen =================================================================== Angesagt, mehrfach und zuletzt wörtlich: „geh nach `F:\Claude\EB-Software-Website`, öffne die Kopfzeilen-Komponente und kopier sie." HIER STAND EIN GERAHMTER, GERUNDETER KASTEN um die sechs Wörter, mit den Maßen von Jitters Werbeseite (`_mainNavBg_`, Radius 10, Höhe 70, Rand unten 1 px). GELESEN in `EB-Software-Website/stile/kopfzeile.css` und GERENDERT nachgemessen an ihrer `index.html` bei 1920, 1440 und 390 px — die Website hat diesen Kasten nicht: `.nav-link` `background: none; border: 0; padding: 0` `.navigation .nav-link` `padding: 0 2.4rem` (24 px), bei höchstens 1440 px `0 2rem` (20 px) Schrift 16 px / 600, Zeilenhöhe 24 px, Farbe `--farbe-tinte` Anordnung Wortmarke und Wörter in EINEM flex-Kasten (`.kopfzeile__links`), Lücke 40 px, bei höchstens 1440 px 24 px Gerendert bei 1440: Wortmarke x 290, erstes Wort x 410, alle auf Mitte 84. Die Wörter stehen frei nebeneinander und werden nur durch ihr eigenes Querpolster getrennt. WAS BLEIBT, IST DER AKTIVE VOLLTON. Die Website löst „hier bist du" über Deckkraft (`.navigation.ein-punkt-aktiv .nav-punkt:not(.ist-aktiv) .nav-link { opacity: .35 }`) — und genau das ist am 04.08.2026 gefallen, weil ein verblasstes Wort gegen Weiß 1,60:1 hält und Fließtext 4,5:1 braucht. Der dunkle Vollton am aktiven Wort ist der Ersatz und er bleibt. Er ist auch kein Widerspruch zu „kein Kasten": er liegt um EIN Wort, nicht um alle sechs. DIE WORTFARBE KOMMT MIT. Hier stand `--farbe-text-gedaempft`; die Vorlage setzt `--farbe-tinte`, also volles Schwarzviolett. Damit ist das ruhende Wort kräftiger als vorher — und der aktive Vollton bleibt trotzdem der stärkere Träger, weil er sich nicht in der Schriftfarbe unterscheidet, sondern in der FLÄCHE. */ .kopf__navi { /* Am Handy trägt die Schublade die Navigation. Die Website macht es genauso: `.navigation { display: none }` bis 1024 px. */ display: none; min-width: 0; /* HIER STAND `margin-left: auto` mit der Ansage vom 03.08.2026 „neben das Konto, nicht in die Mitte". Sie ist am 08.08.2026 überholt: die Seitenwahl steht jetzt IM linken Kasten neben der Wortmarke, so wie in der Vorlage. Ein `auto` dort würde sie wieder von ihr wegschieben. */ } .kopf__navi-liste { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } .kopf__navi-wort { position: relative; display: inline-flex; align-items: center; gap: var(--abstand-2); /* DIE HÖHE IST DIE DES VOLLTONS, nicht mehr die eines Kastens minus seinem Polster. `--hoehe-navi-wort` ist gerechnet: Zeilenhöhe 24 aus der Vorlage plus zweimal `--abstand-2`, damit der aktive Vollton Luft um die Schrift hat und nicht auf ihr klebt. */ height: var(--hoehe-navi-wort); /* [Website] `0 2rem` = 20 px bei höchstens 1440. Ihr Schritt auf 24 px ab 1441 steht im Behälterblock bei 90 rem. */ padding-inline: var(--polster-navi-wort); border-radius: var(--radius-navi-wort); color: var(--farbe-text); text-decoration: none; font-size: var(--groesse-navi-wort); font-weight: var(--schrift-halbfett); line-height: 24px; white-space: nowrap; } /* HIER STAND JITTERS ZUSTAND, UND ER IST AM 04.08.2026 GEFALLEN — angesagt. Er war herum gebaut: beim Überfahren trat nicht das eigene Wort hervor, sondern alles andere zurück, über `opacity: 0.35` an der LISTE statt am Wort. Nachgebaut war das richtig; nur ist es nicht lesbar. DIE ZAHL, DIE ES ENTSCHIEDEN HAT: Deckkraft 0,35 auf --farbe-text-gedaempft ergibt sichtbar rgb(204, 204, 206), und das hält gegen Weiß 1,60:1. Nötig sind 4,5:1. Es gibt auch keinen milderen Wert, der beides kann — selbst 0,8 kommt nur auf 3,39:1, weil die Grundfarbe des ruhenden Wortes schon bei 5,07:1 liegt. Der Effekt und die Auflage schließen einander aus, das ist keine Abwägung, sondern Arithmetik. GENAU DAFÜR STEHT DIE REGEL „kein Zustand über Deckkraft". Sie ist keine Stilfrage: `getComputedStyle` liest nach wie vor --farbe-text-gedaempft, die Verrechnung mit dem Grund passiert erst beim Zeichnen. Jede Kontrastmessung im Haus hätte dieses Wort für in Ordnung gehalten — die Wache am Ende der Zustandsmatrix ist die einzige Stelle, die es sehen konnte, und sie hat es gesehen. WAS AN SEINE STELLE TRITT: nichts. Die aktive Seite ist ein dunkler Vollton und sagt damit schon, wo man steht; ein zweiter Zustand, der beim Überfahren dasselbe Band umfärbt, wäre eine zweite Auskunft über dieselbe Sache. Das ruhende Wort bleibt, wie es ist. Der Umbruch steht als überstimmtes Stück in ABDECKUNG.md. Mit dem Zustand fällt auch der Übergang: `transition: opacity` oben stand für eine Deckkraft, die sich nicht mehr ändert. =================================================================== DIE EINE AUSNAHME VON DIESER REGEL — 08.08.2026, ausdrücklich erlaubt =================================================================== Es gibt seit dem 07.08.2026 EINE Stelle im Produkt, an der ein Zustand doch über Deckkraft läuft: das Focus-and-Blur im Diagramm der Übersicht (`--diagramm-blass`, Zusatzstück `FOKUS` in `diagramm.js`). Sie steht hier und nicht nur dort, weil eine Ausnahme, die man nur am Ort der Ausnahme findet, keine ist — sie sieht dann aus wie eine übersehene Regel. WARUM SIE GILT, und es ist nicht die Anmutung. Der Unterschied liegt darin, was die verblasste Sache in dem Augenblick noch tragen muss: Hier im Kopf sind die fünf anderen Wörter WEITER DIE NAVIGATION. Wer das sechste überfährt, will die anderen trotzdem lesen können. Sie sind der einzige Träger ihrer eigenen Auskunft. Im Diagramm steht, während ein Segment hervorgehoben ist, der Hinweis mit ALLEN VIER ZAHLEN offen (`interaction.mode: 'index'`), und die Tabelle steht ohnehin im Dokument. Das verblasste Segment ist die DRITTE Auskunft über seinen Wert, nicht die einzige. UND SIE IST GERECHNET, nicht großzügig ausgelegt: die Deckkraft steht auf 0,50, und dort hält die hellste der vier Farben gegen Weiß noch 1,75:1. Die Grenze liegt bei 0,37; bei 0,36 fällt sie auf 1,49:1. Die 1,5:1 sind keine neue Schwelle, sondern dieselbe, die die vier Kanalfarben paarweise zueinander halten müssen. Jitters 0,35 — der Wert, der HIER gefallen ist — hielte im Diagramm 1,47:1 und ist auch dort nicht genommen worden. WAS DIE REGEL BLEIBT: kein Zustand über Deckkraft, wo die verblasste Sache die einzige Auskunft ist. Das ist der Fall bei Text, bei Bedienelementen und bei jeder Navigation. Wer eine zweite Ausnahme will, zeigt die zweite Auskunft und rechnet die Deckkraft. */ /* DIE AKTIVE SEITE IST EIN DUNKLER VOLLTON — angesagt am 03.08.2026 mit Bild („My files" in Jitters Kopf). Vorher stand hier ein Strich darunter. Der Vollton ist der stärkere Träger: er hebt sich in Farbe UND Fläche ab, während ein 2-px-Strich unter einem Wort schon bei Sonnenlicht auf dem Tablet verschwindet. `aria-current` bleibt daneben stehen — Farbe allein ist keine Auskunft (§Q3.1). DIE FARBE IST DUNKEL, NICHT LILA, und das ist eine Unterscheidung, die der Kopf braucht: dunkel heißt „hier bist du", lila heißt „das kannst du tun". Gäbe es beides in Lila, stünden zwei verschiedene Aussagen in derselben Farbe nebeneinander. */ .kopf__navi-wort--aktiv { background: var(--farbe-text); color: var(--farbe-flaeche); } /* HIER STAND DIE GEGENREGEL zum Deckkraft-Zustand: „der aktive Eintrag tritt beim Überfahren der Nachbarn NICHT zurück". Sie ist am 04.08.2026 mit dem Zustand gefallen, gegen den sie stand. Sie hatte `opacity: 1` gesetzt — den Vorgabewert. Ohne die Regel, die etwas anderes setzt, ist das eine Anweisung ohne Wirkung. Sie wäre auch keiner Wache aufgefallen: die Deckkraft-Regel überspringt den Wert 1 ausdrücklich, weil er nichts baut. Eine Regel, die nichts tut, sieht aus wie eine Entscheidung — dasselbe wie ein Token ohne Leser und eine Auswahl ohne Treffer. */ /* Der Zähler am Posteingang. Er hängt an der Seite und nicht an der Bauform der Navigation — ohne ihn wäre die Zahl am Laptop unsichtbar, seit die Leiste dort weg ist. */ .kopf__navi-zaehler { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 var(--abstand-1); border-radius: var(--radius-rund); background: var(--farbe-zaehler); color: var(--farbe-zaehler-text); font-size: var(--groesse-mikro); font-weight: var(--schrift-halbfett); line-height: 20px; } /* `.kopf__titel` STAND HIER und ist am 03.08.2026 in die Inhaltsspalte gewandert — die Regel dafür heißt jetzt `.seitentitel` und steht weiter oben. Bei Jitter ist der Titel das erste Element der Inhaltsspalte und 48 px groß; in der Kopfzeile steht bei ihm nichts als Marke, Knopf und Bild. Der Vermerk bleibt, damit niemand ihn „zurückholt", weil die Kopfzeile leer aussieht — sie SOLL leer sein. Mit ihm sind gefallen: `.kopf__zurueck` (er hing an der Reiterleiste, „nur wo unten kein Reiter ist" — die gibt es nicht mehr, und die Schublade zeigt auf jeder Seite alle sechs Ziele) und die `order`-Umsortierung der Kopfzeile am Handy (sie ordnete drei Dinge, von denen zwei weg sind). */ /* --- Die Marke oben links ----------------------------------------- */ /* Sie stand bis zum 03.08.2026 in der Leiste. [gemessen] Bei Jitter sitzt sie fest am Fenster, 90 x 40 px, auf demselben Abstand zur Kante wie der rechte Teil. ABWEICHUNG, angemerkt statt übergangen: Jitters Marke liegt IM Leistenbehälter und fällt unter 1025 px mit ihm weg. Unsere steht in der Kopfzeile und bleibt. Zwei Gründe — die Wortmarke ist ausdrücklich unsere und soll nicht verschwinden, und in der Kopfzeile stimmt die Tabulatorfolge. Bei Jitter kommt die Marke im Markup NACH den Knöpfen rechts. */ /* SIE IST AM 07.08.2026 ANS HANDY ZURUECKGEKEHRT — angesagt: „Wortmarke und Profilbild sind in jedem Zustand sichtbar." HIER STAND `display: none` mit einer Messung, und die Messung stimmte: `.kopf` bei 390 px scrollWidth 477 in clientWidth 390 links 60 (Auslöser) + 120 (Marke) = 182 rechts 179 (Knopf) + 18 + 60 (Konto) = 257 Der Posten, der das Fass zum Überlaufen brachte, war der dunkle Knopf mit 179 px — und DER IST AM 03.08.2026 GEFALLEN, am selben Tag, an dem diese Regel entstand. Die Rechnung ist also seit ihrem zweiten Tag um 197 px zu groß (179 Knopf plus 18 Lücke). Nachgerechnet mit dem, was heute dasteht: 48 Auslöser + 18 + 128 Marke + 18 + 60 Konto = 272 in 350 Innenbreite. DAS IST DER FALL, VOR DEM DIE PROJEKTREGEL WARNT: eine Messung bleibt stehen, während sich unter ihr etwas ändert. Sie war nie falsch; sie ist abgelaufen. Deshalb steht sie hier weiter — mit dem Datum, an dem sie es wurde. DIE KLEINERE MARKE IST ABGELEITET, nicht gegriffen: Jitter schaltet seine Wortmarke von 28 px am Laptop auf 24 am Handy, also mal 0,857. Unsere 40 werden damit 34; bei 800 × 212 sind das 128 px Breite. */ .kopf__marke { display: flex; align-items: center; gap: var(--abstand-2); height: var(--hoehe-marke); color: var(--farbe-text); text-decoration: none; } /* DIE ECHTE WORTMARKE, seit dem 03.08.2026. `.kopf__marke-zeichen` und `.kopf__marke-wort` sind gestrichen — das war ein nachgebautes Logo aus CSS (violettes Quadrat mit „eb", Name daneben), das niemand entschieden hatte. DIE HÖHE FÜHRT, DIE BREITE FOLGT. Die Datei ist 800 × 212 px; bei `--hoehe-marke` (40) wären das 151 px Breite. Zweizeilig gesetzt ist die Marke dafür zu hoch — sie bekommt deshalb die volle Bandhöhe und behält ihr Verhältnis über `width: auto`. DER GRUNDWERT IST DIE SCHMALE FASSUNG, die große steht im Block ab 45 rem. Andersherum ginge es nicht: bei gleicher Spezifität gewinnt die spätere Regel, und eine schmale Fassung NACH der großen würde auch am Laptop greifen. */ .kopf__marke-bild { display: block; height: var(--hoehe-marke-schmal); width: auto; /* Ein Bild ohne diese Zeile bekommt die `width`/`height`-Attribute als Maß und wird 800 px breit, bevor das CSS greift. Das ist der Sprung, den man beim ersten Laden sieht. */ max-width: 100%; } /* --- Der Auslöser der Schublade ----------------------------------- */ /* Nur unter 45 rem. Darüber markiert die Leiste selbst, wo man ist, und ein Auslöser wäre ein Knopf ohne Zweck. */ /* 48 STATT 60 PX, und die Zahl ist gewählt und nicht gemessen: Jitter hat diesen Knopf nicht, also gibt es dafür kein Maß. 48 x 48 ist bequem mit Handschuh und lässt in der Zeile bei 390 px die Luft, die der dunkle Knopf daneben bei +15 % Schrift braucht. Die 44-px-Grenze ist gestrichen; was bleibt, ist „bequem bedienbar", und das ist hier nachgerechnet. */ .kopf__schublade { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 48px; height: 48px; /* HIER STAND `margin-left: calc(var(--abstand-3) * -1)`. Der negative Einzug zog ihn an die linke Kante der Spalte, weil er dort stand. Seit dem 09.08.2026 steht er rechts aussen; ein Zug nach links waere jetzt ein Zug ins Nachbarelement. */ border-radius: var(--radius-rund); /* ER TRAEGT SEINEN GRUND SELBST — 06.08.2026, uebernommen aus `EB-Software-Website`: .kopfzeile:not(.menue-offen):not(.zeigt-grund) .burger .knopf__innen { background-color: var(--farbe-flaeche); } Dort ist das keine Zierde, sondern der Grund, aus dem der Burger lesbar bleibt: eingeklappt schwebt er ueber dem Inhalt. Nachgesehen am eigenen Bildschirm, 390 px, heruntergescrollt: das blanke Zeichen stand schwarz auf einer violetten Kachel. Zu erkennen war es — es sah nur aus, als waere es dorthin gefallen. IMMER UND NICHT NUR OHNE GRUND, und das ist die eine Vereinfachung gegenueber der Vorlage: die Website nimmt die Flaeche weg, sobald ihr Grund da ist. Bei uns ist dieser Knopf ohnehin nur unter 45 rem zu sehen, und ein Knopf, der immer wie einer aussieht, braucht keine zweite Regel — die Vorlage haette hier drei Zustaende erzwungen, die sich um dieselbe Flaeche streiten. UNSER `--farbe-flaeche` IST WEISS, ihres ist das Hellgrau. Was ihrem Wert entspricht, heisst bei uns `--farbe-flaeche-gedaempft` — auf beiden Seiten #F2F1F3, nachgesehen. */ background: var(--farbe-flaeche-gedaempft); color: var(--farbe-text); text-decoration: none; transition: background-color var(--dauer-schnell) var(--kurve); } .kopf__schublade:is(:hover, .zeige-ueberfahren) { background: var(--farbe-rand); } /* =================================================================== EINGEKLAPPT WIRD ER DUNKEL — wie auf der Homepage, 09.08.2026 =================================================================== GELESEN IN `EB-Software-Website/stile/kopfzeile.css`, Zeile 245 ff., und nicht vermutet: .kopfzeile.ist-klebend.ist-verkleinert:not(.zeigt-grund) .burger { color: var(--farbe-weiss); } … .burger svg { fill: var(--farbe-weiss); } … .burger .knopf__innen { } WARUM DORT UND WARUM HIER: eingeklappt faellt der Grund weg, und der Knopf steht direkt auf dem Seiteninhalt. Hellgrau auf einer violetten oder neongelben Kachel ist eine Flaeche, die niemand als Knopf liest. Vollton auf Tinte steht auf jedem Untergrund — es ist dieselbe Ueberlegung, die das Kontobild einen Ring bekommen liess, nur mit dem Mittel, das die Vorlage dafuer benutzt. DIE UMKEHRUNG BEIM UEBERFAHREN IST JITTERS RICHTUNG und steht schon beim dunklen Knopf im Haus: dunkel wird HELLER, nicht dunkler. */ .kopf.ist-klebend.ist-verkleinert .kopf__schublade { background: var(--farbe-text); color: var(--farbe-flaeche); } .kopf.ist-klebend.ist-verkleinert .kopf__schublade:is(:hover, .zeige-ueberfahren) { background: var(--farbe-text-gedaempft); } /* --- Der dunkle Knopf --------------------------------------------- */ /* [gemessen] `_black_28b1o_731`: Fläche `#19171c`, weiße Schrift, 18 px in Gewicht 600, Laufweite -0,04em, Polster 18/60 (schmal 18/30), Höhe fest 60, RADIUS 0 — und beim Überfahren wird er HELLER (`#2d2933`), nicht dunkler. Das ist Jitters Richtung und nicht die gewohnte. Seine Farbe ist bei uns `--farbe-text`: einen zweiten Fastschwarz-Wert wollte ich für einen Knopf nicht anlegen. 12,63:1 gegen Weiß, in beide Richtungen. WAS ER KOSTET, und es ist eine Überstimmung: die Vorgabe vom 30.07.2026 lautet „genau ein gefüllter Knopf je Bildschirm". Jitter hat zwei — den schwarzen im Kopf und den farbigen im Inhalt. Mit diesem haben wir sie auch. Vermerkt, nicht übergangen. */ .kopf__knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--abstand-2); flex: 0 0 auto; /* DER FREIRAUM STEHT HIER — angesagt am 03.08.2026 mit Bild. Alles ab dem Knopf rückt an die rechte Kante, damit die Seitenwahl direkt neben dem Kontobild sitzt. Vorher hing die Marke links und der Rest mittig; der Knopf stand ZWISCHEN Seitenwahl und Konto und trennte genau die beiden, die zusammengehören. */ margin-left: auto; height: var(--hoehe-knopf-kopf); padding-inline: var(--polster-knopf-kopf-schmal); /* DERSELBE RADIUS WIE DER KASTEN NEBENAN. Jitters Anwendung setzt hier 0 (`--radius-navigation`) — dort steht der Knopf aber allein im Band. Bei uns steht er neben einem Kasten mit 10 px, und eine scharfe Ecke neben einer runden liest sich als Versehen, nicht als Absicht. */ border-radius: var(--radius-navi); /* LILA, NICHT DUNKEL — seit der aktive Eintrag der Seitenwahl ein dunkler Vollton ist, stünden sonst zwei schwarze Flächen im selben Band und behaupteten dasselbe. Sie behaupten aber Verschiedenes: dunkel heißt „hier bist du", lila heißt „das kannst du tun". Jitter braucht die Unterscheidung nicht, weil sein Kopf keine aktive Seite markiert — bei uns ist immer eine aktiv. */ background: var(--farbe-primaer); color: var(--farbe-primaer-kontrast); font-size: var(--groesse-huelle-gross); font-weight: var(--schrift-halbfett); letter-spacing: var(--laufweite-eng); text-decoration: none; white-space: nowrap; transition: background-color var(--dauer-schnell) var(--kurve); } .kopf__knopf:is(:hover, .zeige-ueberfahren) { /* Mit der Grundfarbe ist auch der Zustand gewechselt: `--farbe-primaer-tief` ist die dunklere Stufe derselben Farbe, `--farbe-knopf-dunkel-ueberfahren` wäre die hellere Stufe von Schwarz und damit die falsche Richtung. */ background: var(--farbe-primaer-tief); } /* --- Das Kontobild ------------------------------------------------ */ /* [gemessen] Knopf 64 x 64 (schmal 60), Bild 48 x 48 (44), rund, dazu ein 2 px breiter Ring aus einem Verlauf. BEI UNS TRÄGT DER RING DEN ZUSTAND. Jitters Ring ist Zierrat um ein Foto; unser Bild ist eine violette Scheibe mit Initialen und braucht keine Abgrenzung zur weißen Seite. Er erscheint deshalb erst, wenn das Konto etwas zu sagen hat — auf einer der vier Kontoseiten oder bei offenem Menü. Damit ist die Konto-Pille ersetzt und nicht nur gestrichen: ihre Aufgabe („hier stehe ich") übernimmt der Ring. Zwei Ringe, damit der äußere nicht am Bild klebt: erst die Grundfarbe, dann die Marke. */ /* =================================================================== DER LINK IST NUR NOCH DIE KLICKFLAECHE — 10.08.2026, Neubau =================================================================== ER TRUG BIS HEUTE EINGEKLAPPT DIE PILLE: Fuellung, Radius, Polster und eine Breite, die von `var(--kontoknopf-schmal)` auf `auto` wechselte. Damit gab es ZWEI gefuellte Flaechen mit zwei Zeitplaenen — der Kreis am Bild, die Pille am Link —, und daraus folgte jedes einzelne Symptom: der schwarze Kasten beim Hochscrollen ist diese Flaeche, noch dunkel und schon wieder eckig; der Sprung ist der Wechsel von fest nach `auto`, der sich nicht ueberblenden laesst. JETZT TRAEGT DAS BILD DIE FLAECHE UND ZWAR IMMER. Hier bleibt die Klickflaeche, und die ist durchsichtig: sie darf jede Groesse haben, ohne dass man etwas sieht. `min-width` UND NICHT `width`, damit die eingeklappte Pille sie auseinanderschieben kann. Gemessen ist „das Kontobild ist 48 px in einem 64er Knopf" — die 64 sind die Fingerflaeche und bleiben die Untergrenze, den Rest bestimmt der Inhalt. */ /* DIE HUELLE UM DIE PILLE TUT NICHTS ALS DEN BEZUGSPUNKT SETZEN. Sie muss sich in der Kopfzeile genauso verhalten wie die Pille vorher — sonst verschiebt ein Bezugspunkt die Zeile, in der er steht. Deshalb dieselben drei Angaben, die `.kopf__konto` traegt. */ .kopf__kontobereich { position: relative; display: inline-flex; flex: 0 0 auto; min-width: 0; } .kopf__konto { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: var(--kontoknopf-schmal); height: var(--kontoknopf-schmal); text-decoration: none; } .kopf__konto-bild { /* `inline-flex` UND NICHT `grid` — berichtigt am 09.08.2026, im Bild gefunden. Hier stand `display: grid; place-items: center`, und das war richtig, solange genau EIN Textknoten darin stand. Seit das Kuerzel in seine Teile zerlegt ist (`M`, `ichael`, Luecke, `B`, `renner`), sind es fuenf Kinder — und Grid stapelt sie UNTEREINANDER, statt sie in eine Zeile zu setzen. Gemessen: die Pille blieb dadurch 80 px breit statt 150, und der Name war abgeschnitten. `inline-flex` zentriert genauso und stellt die Stuecke nebeneinander. */ display: inline-flex; align-items: center; justify-content: center; /* ================================================================ DIE BREITE KOMMT IN BEIDEN ZUSTAENDEN AUS DERSELBEN QUELLE ================================================================ 10.08.2026, Neubau. Hier stand `width: var(--kontobild-schmal)`, und eingeklappt wurde daraus `width: auto`. Zwischen einer festen Breite und `auto` gibt es keinen Weg — der Browser springt. `min-width` IST DIE FESTE BREITE OHNE DIE OBERGRENZE. Die Breite ist in JEDEM Zustand `max(Untergrenze, Inhalt + Polster)`, und beide Summanden laufen stetig: der Inhalt ueber die Schranke der Buchstaben, das Polster ueber seinen eigenen Uebergang. Das Maximum zweier stetiger Groessen ist stetig — deshalb gibt es keinen Sprung mehr, in keine der beiden Richtungen. Im Grundzustand ist „MB" gemessen 23,7 px breit und das Polster null: die Untergrenze gewinnt, und es steht ein Kreis da. Eingeklappt gewinnt der Inhalt, und es steht eine Pille da. */ min-width: var(--kontobild-schmal); height: var(--kontobild-schmal); /* DAS POLSTER IST IM KREIS NULL und waechst erst mit der Pille. Es MUSS null sein: „MB" plus zweimal 16 px waere 55,7 und damit breiter als die 48 des Kreises — der Kreis waere ein Ei. */ padding-inline: 0; border-radius: var(--radius-rund); /* SCHWARZ STATT LILA — 09.08.2026, angesagt: „kannst die ja schwarz lassen, also statt lila schwarz." Hier stand `--farbe-primaer`. ES IST DIESELBE FLAECHE IN BEIDEN ZUSTAENDEN. Eingeklappt wird der Kreis zur Pille in Tinte; solange er ein Kreis war, war er lila. Der Farbwechsel fiel damit mitten in die Bewegung. Jetzt bleibt die Farbe stehen und nur die Form aendert sich — das ist der Grund, warum die Bewegung jetzt als EINE gelesen wird und nicht als zwei. */ background: var(--farbe-text); color: var(--farbe-flaeche); font-size: var(--groesse-klein); font-weight: var(--schrift-halbfett); letter-spacing: 0; /* ================================================================ DER UEBERGANG IM GRUNDZUSTAND GILT DEM RUECKWEG ================================================================ Ein Uebergang gehoert immer dem Zustand, IN DEN gewechselt wird. Wer aus dem eingeklappten herauskommt, landet hier; der Hinweg steht an `.ist-verkleinert`. POLSTER UND HOEHE LAUFEN `linear` UND IN DER DAUER DER BUCHSTABEN, nicht in der Schwungkurve. Sie sind keine Koerper, die federn — sie sind die zweite Haelfte derselben Breite: `min-width` haelt den Kreis, das Polster macht die Pille. Liefen sie anders als die Schranke der Buchstaben, waeren es wieder zwei Bewegungen. Fuellung und Ring behalten ihre kurze Dauer: das ist die Rueckmeldung auf den Zeiger und hat mit dem Rollen nichts zu tun. */ transition: padding var(--dauer-kopf-zurueck) linear, height var(--dauer-kopf-zurueck) linear, box-shadow var(--dauer-schnell) var(--kurve), background-color var(--dauer-schnell) var(--kurve); } /* =================================================================== DAS KONTOBILD BRAUCHT EINEN RING, SOBALD DIE KARTE WEG IST =================================================================== 09.08.2026, im Bild gefunden und nicht in einer Zahl. Mit Muster M faehrt die Karte beim Herunterscrollen aus dem Bild, und das Konto steht dann direkt auf dem Seiteninhalt. Auf der Uebersicht ist das die violette Kachel — und `--farbe-primaer` auf `--farbe-primaer` ist nichts. Gemessen bei 1920 und 390: das Kuerzel „MB" stand als weisse Schrift frei auf Violett, der Kreis darum war unsichtbar. DAS IST KEINE ABWEICHUNG VON DER VORLAGE, SONDERN IHRE UEBERTRAGUNG. Jitters stehenbleibendes Stueck traegt seinen Grund selbst: seine Pille ist `rgb(25, 23, 28)` im Vollton, sein Burger bei 390 px `rgb(242, 241, 243)`. Beide stehen auf jedem Untergrund. Unseres tat das, solange ein weisses Band darunter lag; ohne das Band nicht mehr. DER RING IST DERSELBE, den das Bild beim Ueberfahren und auf der Kontoseite ohnehin traegt — es kommt kein neues Mass dazu, nur ein weiterer Zustand, der es liest. Er steht NUR bei `ist-verkleinert`: solange die Karte da ist, traegt sie den Kontrast, und ein zweiter Ring darauf waere ein Rand ohne Anlass. */ /* HIER STAND DER WEISSE RING. Er war richtig, solange eingeklappt ein runder Kreis in `--farbe-primaer` auf dem Seiteninhalt stand und sonst nichts — dann trug er den Kontrast. Seit dem 09.08.2026 steht dort eine Pille in Tinte, die ihren Kontrast selbst mitbringt, und der Ring lief als heller Umriss um sie herum: im Bild ein „komischer Kreis", der weder zur Pille noch zum Knopf gehoerte. */ /* =================================================================== EINGEKLAPPT WIRD AUS DEM KREIS EINE PILLE MIT DEM NAMEN =================================================================== 09.08.2026. Der Name steht immer im Markup; hier entscheidet sich, ob er zu sehen ist. Oben ist er es nicht — dort steht die Seitenwahl daneben und der Platz ist knapp. DIE PILLE IST SO HOCH WIE DER BURGER, ausdruecklich so entschieden („die beiden Punkte sollten gleich gross sein"). Beide 48 px, beide auf einer Linie; die Pille ist nur breiter, weil ein Name darin steht. Das ist die Bauform der Website: ihre `Demo-Gespraech`-Pille und ihr runder Burger haben dieselbe Hoehe und verschiedene Breiten. SIE TRAEGT TINTE WIE DER BURGER. Ohne Grund unter der Zeile steht sie direkt auf dem Seiteninhalt — dieselbe Ueberlegung, aus der der Burger dort dunkel wird. Zwei dunkle Stuecke nebeneinander sind ausserdem das Bild aus der Vorlage. */ /* =================================================================== DIE RESTLICHEN BUCHSTABEN FAHREN HINTER IHREM ANFANG HERVOR =================================================================== 09.08.2026. Der Name steht EINMAL im Markup, zerlegt in die Teile, die bleiben (`M`, `B`), und die, die wachsen (`ichael`, `renner`). Hier entscheidet sich, wie breit die wachsenden sind. `max-width` UND NICHT `width` ODER `display`: eine Breite von `auto` laesst sich nicht ueberblenden, und `display` schaltet hart. `max-width` von 0 auf ein Mass, das sicher groesser ist als der Inhalt, faehrt dagegen weich auf — der Inhalt bestimmt weiter, wo er endet, die Schranke gibt nur den Weg frei. DIE SCHRANKE IST KNAPP GEWAEHLT, und das ist gemessen und nicht geraten. Sie muss ueber der laengsten Fassung liegen, sonst schneidet sie ab — aber jedes Pixel darueber ist Bewegung, die niemand sieht: der Rest hat seine Endbreite erreicht, sobald die Schranke sie ueberholt, und die restliche Strecke laeuft ins Leere. MIT `10em` WAR DIE BEWEGUNG NACH EINEM VIERTEL VORBEI. Gemessen: „ichael" ist 43 px breit, „renner" 48; bei einer Schranke von rund 160 px war der sichtbare Teil nach 27 % der Strecke zu Ende. MIT `6em` UND DER SCHWUNGKURVE WAR SIE ES IMMER NOCH — beanstandet am 09.08.2026: „die Namen sind nicht animiert, ich sehe keine Animation." Der Grund steckt in der KURVE, nicht in der Schranke: `cubic-bezier(.33, 1.42, .05, .96)` schiesst absichtlich nach vorn und ist nach einem Fuenftel der Zeit schon bei rund 80 % ihres Wertes. Fuer eine Groesse, die von 0 auf 1 faehrt, ist das der gewollte Schwung — fuer eine SCHRANKE, die den Inhalt schon bei der Haelfte freigibt, heisst es: nach 150 ms steht alles. DESHALB LAUFEN DIE BUCHSTABEN `linear`. Sie sollen gleichmaessig hervorkommen, nicht federn; eine Schranke ist kein Koerper, der ueberschwingt. Die DAUER bleibt dieselbe wie beim Knopf, damit beide zusammen ankommen — angesagt war „waehrenddessen es breiter wird". `4em` sind rund 64 px. „renner" ist 48 davon, die sichtbare Bewegung laeuft also ueber drei Viertel der Zeit. Ein laengerer Namensteil wird frueher fertig, aber nicht abgeschnitten: `max-width` schneidet erst, wenn der Inhalt selbst breiter ist, und dafuer braeuchte es rund 14 Zeichen. `overflow: hidden` IST DER GANZE TRICK: ohne ihn stuenden die Buchstaben schon da und wuerden nur ueberlappt. Mit ihm kommen sie hinter ihrem Anfangsbuchstaben hervor, und genau das war die Ansage. */ .kopf__konto-rest, .kopf__konto-luecke { display: inline-block; max-width: 0; overflow: hidden; vertical-align: bottom; /* DAS LEERZEICHEN MUSS STEHENBLEIBEN — 09.08.2026, im Bild gefunden: es stand „MichaelBrenner" ohne Luecke. Ein einzelnes Leerzeichen am Rand eines `inline-block` faellt der Zusammenfassung von Weissraum zum Opfer; `pre` nimmt es davon aus. Es steht an BEIDEN, weil auch ein Namensrest mit einem Leerzeichen enden koennte. */ white-space: pre; /* ================================================================== BEIDE RICHTUNGEN LAUFEN — 09.08.2026, zurueckgenommen ================================================================== HIER STAND, DASS DER RUECKWEG INSTANT IST, und dass der Uebergang deshalb nur am Ziel steht. Das war eine Ansage („soll instant sein") und ist am selben Tag zurueckgenommen worden: „bei Hochscrollen nicht einfach wegploppen, sondern es sollte eine Animation geben, also doch nicht instant — die Animation einfach rueckwaerts abspielen, dann geht die Pille nach rechts und wird kleiner." Der Uebergang steht damit wieder im GRUNDZUSTAND, und das laesst ihn in beide Richtungen laufen: hin waechst die Pille nach links, zurueck schrumpft sie nach rechts. DIE DAUER HIER GILT DEM RUECKWEG, die an `.ist-verkleinert` dem Hinweg — angesagt: „die Rueckwaerts-Animation von der Schrift ist zu langsam." Ein Uebergang gehoert immer dem Zustand, IN DEN gewechselt wird; wer aus dem eingeklappten herauskommt, landet hier. */ transition: max-width var(--dauer-kopf-zurueck) linear; /* DIESELBE DAUER UND DIESELBE KURVE WIE DER KNOPF — 09.08.2026. Angesagt: „das Profil soll breiter werden, und WAEHRENDDESSEN es breiter wird, soll die Schrift kommen." Zwei verschiedene Dauern waeren zwei Bewegungen, von denen eine auf die andere wartet. Hier stand `--dauer-mittel` (200 ms). Das war „instant" im Sinne der Beanstandung: die Buchstaben standen, bevor das Auge der Breite folgen konnte. */ } .kopf.ist-klebend.ist-verkleinert :is(.kopf__konto-rest, .kopf__konto-luecke) { max-width: 4em; /* Der HINWEG laeuft laenger als der Rueckweg. */ transition: max-width var(--dauer-kopf-schwung) linear; } /* DIE PILLE WAECHST NACH LINKS, weil ihr Kasten rechtsbuendig steht: `.kopf__rechts` ist ein Flex-Kasten am rechten Rand, und der Burger steht hinter ihr. Was breiter wird, kann nur nach links. IHRE BREITE IST NICHT ANIMIERT und muss es nicht sein — sie folgt dem Inhalt. Die Bewegung kommt von den Buchstaben und vom Polster; die Breite ist ihr Ergebnis. Ein zweiter Uebergang darauf liefe gegen denselben Wert und koennte nur nachhinken. HIER STAND DIE PILLE SELBST — `width: auto`, Fuellung, Radius und Polster am LINK, dazu die Notiz, dass der Sprung von 150 px auf 64 „der Preis" sei. Er war kein Preis, sondern die Folge zweier Flaechen. Die Pille ist am 10.08.2026 eine Ebene tiefer gewandert, an das Bild, das die Flaeche ohnehin schon trug. Der Link braucht eingeklappt deshalb GAR KEINE Regel mehr; ohne feste Breite gibt es nichts, aus dem er herausspringen koennte. */ /* =================================================================== EINGEKLAPPT WIRD AUS DEM KREIS DIE PILLE — 10.08.2026, Neubau =================================================================== Es aendern sich genau drei Dinge, und die Fuellung ist keins davon: Polster 0 -> 16 px macht aus dem Kreis die Pille Hoehe 44 -> 48 px so hoch wie der Burger daneben; ab 62 rem steht die 48 schon im Grundzustand Schranke 0 -> 4em die Buchstaben, Regel weiter oben WAS FRUEHER HIER STAND, WAR DAS GEGENTEIL: `background: transparent` und `color: inherit`. Das Bild gab seine Flaeche ab, der Link uebernahm sie — und GENAU DIESER WECHSEL war der schwarze Kasten. Auf dem Rueckweg kam die Fuellung des Bildes augenblicklich zurueck, waehrend seine Breite noch von 150 px herunterlief, und dahinter stand die Fuellung des Links noch da, schon eckig. Es gibt jetzt nichts mehr abzugeben und nichts mehr zurueckzuholen. MIT DEM WECHSEL FAELLT AUCH DIE VERZOEGERUNG, die ihn kaschieren sollte: eine Fuellung, die 250 ms wartet, ist ein Flicken an einem Zustand, den es nicht mehr gibt. HIER STAND EINMAL `display: none` an diesem Element — die Umschaltung zwischen zwei Elementen, mit der ueberhaupt keine Bewegung zu machen war. Das Element bleibt, und sein Inhalt waechst. DER HINWEG LAEUFT LAENGER ALS DER RUECKWEG, wie in dieser ganzen Bewegung. */ .kopf.ist-klebend.ist-verkleinert .kopf__konto-bild { padding-inline: var(--abstand-4); height: var(--kontobild); transition: padding var(--dauer-kopf-schwung) linear, height var(--dauer-kopf-schwung) linear, box-shadow var(--dauer-schnell) var(--kurve), background-color var(--dauer-schnell) var(--kurve); } .kopf__konto:is(:hover, .zeige-ueberfahren) .kopf__konto-bild { box-shadow: 0 0 0 var(--ring-kontobild) var(--farbe-flaeche), 0 0 0 calc(var(--ring-kontobild) * 2) var(--farbe-primaer-sehr-hell); } .kopf__konto:is([aria-current='page'], [aria-expanded='true']) .kopf__konto-bild { box-shadow: 0 0 0 var(--ring-kontobild) var(--farbe-flaeche), 0 0 0 calc(var(--ring-kontobild) * 2) var(--farbe-primaer); } /* =================================================================== EINGEKLAPPT WIRD DIE PILLE HELLER STATT EINEN RING ZU BEKOMMEN =================================================================== 09.08.2026, beanstandet: „der Hover-Effekt bei dem Namen ist grausam, den bitte auch so wie auf der Website." DER DOPPELRING WAR FUER EINEN KREIS GEBAUT. Um ein rundes Bild von 48 px legt er zwei saubere Konturen; um eine 150 px breite Pille legt er einen hellen Rahmen, der die Form verdoppelt — und der aeussere Ring steht dabei in `--farbe-primaer-sehr-hell` auf einer Tinte-Pille, also hell auf dunkel, wo vorher hell auf hell war. DIE WEBSITE MACHT ES ANDERS, und es steht schon im Haus: dunkle Flaechen werden beim Ueberfahren HELLER, nicht dunkler („`_black_28b1o_731` … beim Ueberfahren wird er HELLER (`#2d2933`), nicht dunkler. Das ist Jitters Richtung und nicht die gewohnte."). Ihr Burger tut dasselbe ueber `background-color`. Also traegt die Pille denselben Wechsel wie der Knopf daneben — eine Flaeche, zwei Zustaende, kein Ring. Der Ring bleibt fuer den KREIS zustaendig, also fuer jeden Zustand ausser diesem. DER WECHSEL SITZT SEIT DEM 10.08.2026 AM BILD und nicht mehr am Link: der Zeiger steht weiter auf dem Link, gefuellt ist aber das Bild. Eine Aufhellung am Link waere jetzt eine Aufhellung an einer durchsichtigen Flaeche — zu sehen waere nichts. */ .kopf.ist-klebend.ist-verkleinert .kopf__konto:is(:hover, .zeige-ueberfahren) .kopf__konto-bild { /* DERSELBE WERT WIE JEDE ANDERE DUNKLE FLAECHE IM HAUS. Hier stand kurz `--farbe-text-gedaempft`; gemessen war das rgb(110, 110, 115), also ein mittleres Grau — ein viel zu grosser Sprung. Das Token dafuer gibt es laengst und traegt Jitters Mass im Kommentar: `#19171c` nach `#2d2933`. */ background: var(--farbe-knopf-dunkel-ueberfahren); } /* Und der Ring faellt dort weg, wo er die Pille umschliessen wuerde — auch beim Ueberfahren und auf der Kontoseite. */ .kopf.ist-klebend.ist-verkleinert .kopf__konto .kopf__konto-bild { box-shadow: none; } /* --- Die Suchzeile ------------------------------------------------ */ /* EIN FORMULAR MIT GET, kein aufklappendes Menü und kein Tippen-während-du- suchst. Damit hat jede Suche eine Adresse, wie jeder andere Zustand in diesem Produkt — man kann sie verschicken, mit dem Zurück-Knopf verlassen und als Lesezeichen behalten. Das bleibt. WAS SICH ÄNDERT: sie steht ab dem 03.08.2026 OBEN IN DER LEISTE und nicht mehr in der Kopfzeile. Genau dort hat Jitter sie auf dem Templates-Bildschirm. [gemessen] 240 x 40 px ab 1025 px (darunter 52), Radius 999, Fläche `#f2f1f3`, Platzhalter `#6e6e73`, Polster `0 8px 0 24px`, danach 38 px bis zum ersten Eintrag (schmal 60). DER LINKE EINZUG IST DERSELBE WIE BEI EINEM EINTRAG (24 px). Deshalb fluchtet der Platzhalter mit den Symbolen darunter — bei Jitter ebenso. DIE GEZEICHNETE LUPE IST WEG. Jitters Suchzeile hat kein Zeichen; das Wort im Feld trägt die Aussage. Zwei Regeln CSS und ein `span` weniger. */ /* DIE FLÄCHE LIEGT AM FELD, NICHT AM RAHMEN. Bei Jitter trägt sie das `label` außen herum; bei uns das Feld selbst, und der Grund ist Probe 5 aus PRUEFUNGEN.md: der Fokusindikator muss AN dem Element sitzen, das den Fokus bekommt. Ein Ring am Elternteil ist zwar zu sehen, aber jede Messung, die das fokussierte Element ausliest, meldet „keiner" — und das wäre eine grüne Zahl, die nichts bedeutet. */ .suche { display: flex; align-items: center; width: 100%; margin-bottom: var(--luft-nach-suche-schmal); } .suche__feld { flex: 1 1 auto; width: 100%; min-width: 0; height: var(--hoehe-suchzeile-schmal); padding: 0 var(--abstand-2) 0 var(--einzug-navigation); border: 0; border-radius: var(--radius-rund); background: var(--farbe-flaeche-gedaempft); color: var(--farbe-text); font: inherit; font-size: var(--groesse-klein); font-weight: 500; transition: background-color var(--dauer-schnell) var(--kurve); } .suche__feld::placeholder { color: var(--farbe-text-gedaempft); } .suche__feld:is(:hover, .zeige-ueberfahren) { background: var(--farbe-rand); } .suche__feld:is(:focus-visible, .zeige-fokus) { outline: var(--fokusring) solid var(--farbe-fokusring); outline-offset: var(--fokusring-abstand); } /* --- Die Suchseite ------------------------------------------------- */ .suchseite { /* `height: 100%` und `overflow-y: auto` gefallen — Baustelle 0.1. */ display: flex; flex-direction: column; gap: var(--abstand-5); padding-bottom: var(--abstand-7); } /* NOCH NICHTS GEFRAGT — und deshalb ohne Bild. Es ist nichts leer, es ist nur nichts gefragt; `leer-suche.svg` gehört dem Fall darunter. Dasselbe Bild für zwei verschiedene Lagen wäre eine Lüge über den Zustand. */ .suchseite__frage { margin: 0; font-size: var(--groesse-h3); font-weight: var(--schrift-halbfett); color: var(--farbe-text); } .suchseite__einordnung { margin: 0; color: var(--farbe-text-gedaempft); max-width: var(--lese-breite); } .suchseite__stand { margin: 0; color: var(--farbe-text-gedaempft); } .suchgruppe { display: flex; flex-direction: column; gap: var(--abstand-2); } .suchgruppe__kopf { display: flex; align-items: baseline; gap: var(--abstand-2); } .suchgruppe__wort { margin: 0; font-size: var(--groesse-gross); font-weight: var(--schrift-halbfett); color: var(--farbe-text); } /* Die Zahl sagt, wie viele es INSGESAMT sind — nicht, wie viele hier stehen. Sonst wäre „alle anzeigen" eine Überraschung. */ .suchgruppe__zahl { font-size: var(--groesse-klein); color: var(--farbe-text-gedaempft); } .suchliste { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-radius: var(--radius-standard); background: var(--farbe-flaeche); overflow: hidden; } .suchtreffer + .suchtreffer { border-top: var(--randbreite) solid var(--farbe-rand); } .suchtreffer__flaeche { display: flex; flex-direction: column; gap: var(--abstand-1); min-height: 48px; padding: var(--abstand-3) var(--abstand-4); color: inherit; text-decoration: none; transition: background var(--dauer-schnell) var(--kurve); } .suchtreffer__flaeche:is(:hover, .zeige-ueberfahren) { background: var(--farbe-flaeche-gedaempft); } .suchtreffer__flaeche:is(:active, .zeige-aktiv) { background: var(--farbe-rand); } .suchtreffer__flaeche:is(:focus-visible, .zeige-fokus) { outline: var(--fokusring) solid var(--farbe-fokusring); outline-offset: calc(var(--fokusring) * -1); } .suchtreffer__wort { font-weight: var(--schrift-halbfett); color: var(--farbe-text); overflow-wrap: anywhere; } .suchtreffer__anriss { font-size: var(--groesse-klein); color: var(--farbe-text-gedaempft); overflow-wrap: anywhere; } /* DIE FUNDSTELLE, und nur hier. Auf der Zielseite erklärte sie ein zweites Mal, was man schon weiß. Die Markierung trägt Fläche UND Gewicht — eine getönte Fläche allein wäre wieder Farbe als einziger Träger. */ .suche__fund { background: var(--farbe-primaer-sehr-hell); color: var(--farbe-text); font-weight: var(--schrift-halbfett); border-radius: var(--radius-klein); } .suchgruppe__mehr { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; color: var(--farbe-text); font-weight: var(--schrift-halbfett); text-decoration: underline; text-underline-offset: 3px; } /* HIER STANDEN 160 ZEILEN, DIE MIT DEM NACHBAU GEFALLEN SIND — 03.08.2026. Ersatzlos gestrichen und nicht „für später" stehen gelassen: toter Code, den keine Messung anfasst, hält der Nächste für gültig. `.kopf__zurueck` Er hing an der Reiterleiste („nur wo unten kein Reiter ist"). Die gibt es nicht mehr, und die Schublade zeigt auf jeder Seite alle sechs Ziele — der Rückweg wäre die zweite Antwort auf eine Frage, die schon beantwortet ist. `.kopf__rechts[data-pille]` Die Konto-Pille. Steht auf der Liste der überstimmten Stücke. Jitters Kopf hat rechts genau zwei Dinge, und keins davon in einer Pille. `.kopf__knopf` (Glocke) Jitters Kopf hat keine. Der Weg zu den Benachrichtigungen bleibt: sie sind eine der fünf Zeilen im Konto-Menü. Der Klassenname ist weiterverwendet — er trägt jetzt den dunklen Knopf, siehe oben. `.kopf__konto-pfeil` Das gedrehte Zeichen neben dem Konto. Es war der zweite Träger fürs Aufklappen; den trägt jetzt der Ring um das Bild. */ /* --- Der Betriebs-Umschalter ist gefallen ------------------------- */ /* 03.08.2026. Er steht auf der Liste der überstimmten Stücke, und Jitters Leiste hat an seiner Stelle den Betriebswähler, den wir ausdrücklich nicht übernehmen („Kein ‚Workspace', keinen Umschalter"). Die 130 Zeilen für `.betrieb`, `.betrieb--wahl`, `.betrieb__knopf`, `.betrieb__liste`, `.betrieb__zeile` und `.betrieb__haken` sind ersatzlos gestrichen — das Markup dazu ebenso. WAS BLEIBT: `h.betriebe`. Die Übersicht trägt den Namen als Überschrift und die Suche braucht ihn. Ein Feld ohne Anzeige ist kein toter Code, solange es woanders gelesen wird. */ /* --- Der schwebende Upload-Knopf ist gefallen -------------------- */ /* 03.08.2026. Er mass gegen die Reiterleiste (`bottom: 100%` im `.unterbau`), und die gibt es nicht mehr. Seine Handlung ist nicht verloren, sie ist AUFGESTIEGEN: der dunkle Knopf in der Kopfzeile heisst „Hochladen" und steht auf jedem der sechs Bildschirme — bei Jitter steht dort „My files", ebenfalls die Handlung, die man von ueberall braucht. Mit ihm fallen `.upload`, `.upload--schwebend`, `.unterbau` und die Klasse `.inhalt--mit-upload` samt ihrem 88-px-Polster. */ /* =================================================================== DIE LEISTE =================================================================== EIN MARKUP FUER BEIDE LAGEN: am Laptop die linke Spalte, am Handy der Inhalt der Schublade. Nichts wird doppelt gebaut; was sich unterscheidet, unterscheidet diese Datei. ALLE ZAHLEN SIND GEMESSEN, keine gegriffen. Sie stehen in tokens.css, Bereich 01, jede mit ihrer Herkunft. WAS DIE LEISTE NICHT MEHR HAT, und das ist der sichtbarste Teil des Nachbaus: keine eigene Flaeche Jitters Leiste ist durchsichtig. keinen Rand Auch keinen Haarrand rechts. Was die Leiste zusammenhaelt, ist die getoente Zeile. keinen Kreis Das Symbol steht blank auf der Zeile. keinen Radius 0 px, dreifach nachgemessen. keine Profilzeile Der leise Block unten hat ihren Platz. Die drei ersten waren Ansagen vom 30.07. und 02.08.2026. Sie sind mit dem Nachbau ueberstimmt; der Vermerk steht in ABDECKUNG.md. */ .leiste { display: flex; flex-direction: column; /* [gemessen] `gap: 2px` an `_sidebarNavItemGroup_1ikh0_134`. Die Zeilen stehen fast aneinander — was sie trennt, ist die Toenung. */ gap: var(--luecke-eintraege); width: 100%; } /* --- Die Gruppenueberschrift -------------------------------------- */ /* [gemessen] `_sectionHeader_127mq_72`: 13 px, Gewicht 600, `#6e6e73`, `padding: 7px 0 7px 23px`, Zeilenhoehe 24. DIE ZEILENHOEHE IST GERECHNET UND NICHT GESETZT: 38 minus zweimal 7 ergibt 24. Damit ist der Kasten genau so hoch wie ein Eintrag, und das ist bei Jitter kein Zufall — die Ueberschrift steht in derselben Spur wie die Zeilen darunter. DIE 23 PX LINKS SIND EIN PIXEL WENIGER als der Einzug eines Eintrags. Das ist gemessen und kein Tippfehler: die Ueberschrift fluchtet mit dem SYMBOL (24 px), nicht mit dem Wort (60 px). */ .leiste__ueberschrift { margin: 0; padding: var(--polster-ueberschrift) 0 var(--polster-ueberschrift) var(--einzug-ueberschrift); font-size: var(--groesse-mikro); font-weight: var(--schrift-halbfett); line-height: calc(var(--hoehe-eintrag) - var(--polster-ueberschrift) * 2); letter-spacing: 0; color: var(--farbe-text-gedaempft); } .leiste__liste { display: flex; flex-direction: column; gap: var(--luecke-eintraege); width: 100%; margin: 0; padding: 0; list-style: none; } /* DER LEISE BLOCK STOESST OHNE LUECKE ANEINANDER. [gemessen] Jitters vier Zeilen stehen bei y = 618, 650, 682 und 714 — Abstand 32 bei 32 px Hoehe, also null. Sein Abstand nach oben ist 44 px (2 + 40er Halter + 2); hier sind es 42 plus die 2 px Luecke der Leiste. */ .leiste__liste--leise { gap: 0; margin-top: calc(var(--luft-block-gross) + var(--luecke-eintraege)); } /* --- Ein Eintrag -------------------------------------------------- */ .leiste__eintrag { display: flex; align-items: center; gap: var(--luecke-navigation); height: var(--hoehe-eintrag-schmal); padding: 0 var(--polster-navigation) 0 var(--einzug-navigation); border-radius: var(--radius-navigation); color: var(--farbe-text); text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; transition: background-color var(--dauer-schnell) var(--kurve); } /* DAS SYMBOL STEHT BLANK. Der Kasten ist nur der Ausrichter und traegt keine Flaeche — der Kreis dahinter ist mit dem Nachbau gefallen. Er ist `relative`, weil der Zaehler an ihm haengt. */ .leiste__zeichen { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--symbol-navigation-schmal); height: var(--symbol-navigation-schmal); color: var(--farbe-primaer); } .leiste__wort { min-width: 0; font-size: var(--groesse-huelle-gross); font-weight: 500; /* KEIN nowrap. Jitter setzt hier `white-space: nowrap` mit Ellipse; das uebernehmen wir NICHT. „Posteingang" und „Einstellungen" sind genau die Woerter, an denen nowrap das Layout sprengt, und bei +15 % Schrift waere der halbe Name weg statt umgebrochen. */ hyphens: auto; overflow-wrap: anywhere; } /* --- Die Zustaende ------------------------------------------------ */ /* [gemessen] mit echtem Ueberfahren, nicht mit geratenen Klassen: Ruhe keine Flaeche Ueberfahren `#7a40ed1a` (bei uns: Primaerfarbe bei 10 %) Aktiv `#7a40ed1a` — DIESELBE Aktiv + ueberfahren `#7a40ed2e` (18 %) DASS AKTIV UND UEBERFAHREN GLEICH AUSSEHEN, ist gemessen und kein Versehen. Der Unterschied liegt bei Jitter nicht im Bild, sondern in der Bewegung: erst wenn man den aktiven Eintrag ueberfaehrt, trennt sich das Paar. Das ist die schwaechste Stelle der Vorlage, und sie ist hier benannt statt stillschweigend nachgebaut. Was den Zustand fuer ein Vorleseprogramm traegt, ist `aria-current="page"` — davon haengt nichts ab, was man sehen muss. */ .leiste__eintrag:is(:hover, .zeige-ueberfahren) { background: var(--farbe-navi-flaeche); } .leiste__eintrag--aktiv { background: var(--farbe-navi-flaeche); } .leiste__eintrag--aktiv:is(:hover, .zeige-ueberfahren) { background: var(--farbe-navi-flaeche-stark); } /* GEDRUECKT: eine Stufe tiefer, sofort sichtbar und ohne :hover. Ein Finger schwebt nicht. Jitter hat dafuer nichts — er ist ein Werkzeug fuer die Maus. Wir behalten es: der Meister tippt mit Handschuh. */ .leiste__eintrag:is(:active, .zeige-aktiv) { background: var(--farbe-navi-flaeche-stark); } /* --- Der leise Block unten ---------------------------------------- */ /* [gemessen] `_subtleSidebarItem_127mq_208`: 32 px hoch ab 1025 (sonst 48), Text 13 px, Symbol 16 px im 24er Kasten, Textfarbe `#6e6e73`, Symbolfarbe `#97979b`, und KEINE Flaeche in keinem Zustand — auch nicht auf der aktuellen Seite. Dort traegt der Eintrag Gewicht 600 und dunklen Text. Die fuenffach wiederholte Klasse in Jitters CSS ist sein Weg, die allgemeine Regel zu ueberschreiben. Bei uns reicht die Verkettung zweier Klassen — aber sie MUSS dastehen, sonst gewinnt `--aktiv` von oben und der leise Block bekaeme eine Toenung, die er nicht haben darf. */ .leiste__eintrag--leise { height: var(--hoehe-eintrag-leise-schmal); } .leiste__eintrag--leise, .leiste__eintrag--leise:is(:hover, .zeige-ueberfahren), .leiste__eintrag--leise:is(:active, .zeige-aktiv), .leiste__eintrag--leise.leiste__eintrag--aktiv { background: transparent; } .leiste__eintrag--leise .leiste__zeichen { width: var(--symbol-navigation-schmal); color: var(--farbe-text-leise); } /* Das Zeichen selbst ist kleiner als sein Kasten — 16 in 24. Der Strich wird mitskaliert, sonst wirkt er duenner als bei den Zeilen darueber. */ /* 3,4 UND NICHT 2,7 — nachgezogen am 03.08.2026. Hier stand `--symbol-strich-klein`, und das ist der Wert für 20 px; bei 16 px ergibt er 1,8 gerenderte Pixel und damit weniger als die 2,25 aus Regel 15. Gefunden von `Symbole · Strichstärke gerendert` — der Messung, die genau deshalb den gerenderten Wert misst und nicht den im Stylesheet. */ .leiste__eintrag--leise .symbol { width: var(--symbol-leise); height: var(--symbol-leise); stroke-width: var(--symbol-strich-leise); } .leiste__eintrag--leise .leiste__wort { font-size: var(--groesse-klein); color: var(--farbe-text-gedaempft); } .leiste__eintrag--leise:is(:hover, .zeige-ueberfahren) .leiste__wort, .leiste__eintrag--leise:is(:hover, .zeige-ueberfahren) .leiste__zeichen, .leiste__eintrag--leise.leiste__eintrag--aktiv .leiste__wort, .leiste__eintrag--leise.leiste__eintrag--aktiv .leiste__zeichen { color: var(--farbe-text); } /* Der aktive leise Eintrag traegt ZWEI Traeger, weil er keine Flaeche bekommt: dunkler Text und schwereres Wort. Gemessen ist beides. */ .leiste__eintrag--leise.leiste__eintrag--aktiv .leiste__wort { font-weight: var(--schrift-halbfett); } /* --- Der Zaehler -------------------------------------------------- */ /* Nur am Posteingang. Die ZAHL traegt die Aussage, nicht die Farbe — deshalb steht sie auch als Text fuer Vorleseprogramme da. Jitter kennt die Bauart (`iconWithBadge` an „Workspace settings"), setzt sie aber ohne Zahl. */ .leiste__zaehler { position: absolute; top: calc(var(--abstand-1) * -1); right: calc(var(--abstand-2) * -1); min-width: 20px; padding: 0 var(--abstand-1); border-radius: var(--radius-rund); background: var(--farbe-zaehler); color: var(--farbe-zaehler-text); font-size: var(--groesse-mikro); font-weight: var(--schrift-halbfett); line-height: 20px; text-align: center; } /* --- Die Schublade am Handy --------------------------------------- */ /* DIE ERSTE DER ZWEI ABWEICHUNGEN VON JITTER, vorgelegt und am 03.08.2026 angesagt. Jitters Leiste ist unter 1025 px `display: none`, und seine Marke liegt IN ihr, faellt also mit weg — uebrig bleiben ein dunkler Knopf und das Kontobild. Fuer ihn geht das auf: zwei Hauptseiten, und ein Bewegungswerkzeug bedient niemand am Telefon. Bei uns waeren fuenf von sechs Seiten unerreichbar. SIE IST DIESELBE LEISTE, nicht eine zweite: gleiches Markup, gleiche Masse, nur ein anderer Behaelter. Der Zustand steht in der Adresse (`?leiste=offen`), nicht im Browser — also ohne Skript bedienbar, mit dem Zurueck-Knopf zu verlassen und verschickbar. 140 PX POLSTER OBEN, derselbe Wert wie an der Spalte: darueber liegt die feste Kopfzeile (20 + 60), und die Schublade schiebt sich nicht darunter hindurch. */ .spalte__leiste { display: none; position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; width: var(--breite-schublade); max-width: 85%; padding: var(--kopf-luft-schmal) var(--abstand-2) var(--abstand-5); background: var(--farbe-flaeche); box-shadow: var(--schatten-3); overflow-y: auto; overscroll-behavior: contain; } .rahmen--schublade-offen .spalte__leiste { display: block; } /* DER SCHLEIER schliesst die Schublade. Ein Verweis auf dieselbe Seite ohne die Marke, kein Knopf: damit geht es ohne Skript, und der Zurueck-Knopf fuehrt zurueck in die offene Schublade statt auf die vorige Seite. */ /* ER STEHT SEIT DEM 15.08.2026 IMMER IM MARKUP und wird hier ausgeblendet, statt nur bei offener Schublade gebaut zu werden — dieselbe Umstellung wie beim Kontomenue am 12.08.2026 und aus demselben Grund: was es nur manchmal gibt, kann ein Skript nicht umlegen. Der Klick auf den Burger musste deshalb `?leiste=offen` laden, und genau das soll weg. */ .rahmen__schleier { display: none; position: fixed; z-index: 45; inset: 0; background: var(--farbe-schublade-schleier); } .rahmen--schublade-offen .rahmen__schleier { display: block; } /* --- Die Profilzeile am Fuss ist gefallen ------------------------ */ /* 03.08.2026. Jitters Leiste endet mit dem leisen Block, nicht mit einem Profil. Wer man ist, sagt das Kontobild oben rechts — und dort steht es auf jedem der sechs Bildschirme, statt nur am Laptop unten in der Ecke. Die 60 Zeilen fuer `.profilzeile`, `.profilzeile__kuerzel`, `.profilzeile__text`, `.profilzeile__name` und `.profilzeile__betrieb` sind ersatzlos gestrichen; das Kuerzel wird jetzt aus dem Namen gerechnet statt an zwei Stellen hingeschrieben. */ /* --- Die Reiterleiste am Handy ist gefallen ---------------------- */ /* 03.08.2026. Sie steht auf der Liste der ueberstimmten Stuecke, und an ihre Stelle tritt die Schublade weiter oben. Gestrichen sind `.unterbau`, `.unterleiste`, `.unterleiste__liste`, `.unterleiste__eintrag`, `.unterleiste__wort`, `.unterleiste__kreis`, `.unterleiste__zaehler` und die 3-px-Kante `.unterleiste__eintrag--aktiv::before`. WAS DABEI VERLOREN GEHT, benannt statt verschwiegen: die Reiter waren mit dem DAUMEN erreichbar, die Schublade ist es nicht — ihr Ausloeser sitzt oben links. Das ist der Preis des Nachbaus, und er ist gemessen: Jitter hat am Handy ueberhaupt keine Navigation. Was hier stand: `.unterbau` klebte unten und trug den schwebenden Knopf. `--hoehe-reiter` 90 px, gerechnet aus Polster, Kreis und zwei Wortzeilen. Das Token faellt mit. `--reiter-marke` die 3-px-Kante ueber dem aktiven Reiter, der dritte Traeger neben Kreis und Wortgewicht. Sie war WEGEN DES HANDSCHUHS da: eine 75-px-Fingerscheibe verdeckt den Kreis zu 100 % und das Wort zu 84 %. In der Schublade stellt sich die Frage nicht — dort liegt kein Finger auf dem, was sich aendert. */ /* --- Der Inhalt --------------------------------------------------- */ .inhalt { min-width: 0; /* BEZUGSRAHMEN FUER DIE UEBERLAGERUNGEN AM HANDY. Sie waren `fixed` und damit am Fenster ausgerichtet — also auch hinter der Reiterleiste. Gemessen bei 390 px: das Antwortfeld endete 12 px darunter, das Gespraech 76 px. Der Meister haette auf die Reiterleiste getippt, wo er schreiben wollte. */ position: relative; /* HIER STAND `overflow: hidden` — gefallen mit Baustelle 0.1 am 04.08.2026. Es war die Grenze, an der eine Seite ihren eigenen Bildlauf brauchte. Es gibt sie nicht mehr: der Inhalt darf so lang werden, wie er ist, und das Dokument scrollt. `min-height: 0` bleibt. Es kostet nichts, seit nichts mehr auf eine feste Hoehe drueckt, und haelt die eine Flex-Kette heil, die noch einen eigenen Bildlauf traegt (die Nachrichtenliste). */ min-height: 0; display: flex; flex-direction: column; /* KEIN WAAGERECHTES POLSTER MEHR. Die Kanten der Spalte SIND die Kanten des Inhalts — bei Jitter beginnt der Text genau dort, wo die Spalte beginnt. Was seitlich Luft haelt, ist die mittige Spalte selbst (860 bzw. 1082 px) und am Handy ihre 20 px. */ padding: 0 0 var(--abstand-5); /* WELCHE FARBE UNTER DEN BILDLAUFBEHAELTERN LIEGT — §Q8. Die Behaelter darin erben den Wert, statt ihn zu raten. Er ist jetzt WEISS und nicht mehr gedaempft: der Grund der Huelle ist weiss, seit die Leiste keine eigene Flaeche mehr hat. */ --grund-darunter: var(--farbe-flaeche); } /* `.inhalt--mit-upload` STAND HIER und ist am 03.08.2026 gefallen. Das Polster hielt 88 px unter dem Inhalt frei, damit der schwebende Upload-Knopf nicht auf der letzten Zeile lag. Beide sind weg — die Handlung steht jetzt als dunkler Knopf in der Kopfzeile. */ /* =================================================================== Ab 45rem Behälterbreite: die Leiste steht in der Spalte =================================================================== DIESER UMBRUCH IST DIE ZWEITE DER ZWEI ABWEICHUNGEN VON JITTER — vorgelegt und am 03.08.2026 angesagt. Jitter schaltet erst bei 1025 px um und deckelt darunter den Inhalt auf `max-width: 400px`. Gemessen bei 1024 px sind das 360 px Inhalt mitten in einem 1024-px-Fenster, links und rechts je 332 px leeres Weiß. Auf einem Tablett oder einem halbbreiten Laptopfenster wäre das ein Handy-Streifen in der Mitte. Unser Umbruch bleibt deshalb bei 45 rem — dort, wo die 240 px Leiste plus 32 px Lücke plus eine brauchbare Spalte hineinpassen. Bei 720 px sind das 448 px Inhalt statt 360. ES BLEIBT EINE BEHÄLTERABFRAGE und wird keine `@media`-Abfrage: die schmale Probe der Werkstatt ist ein schmaler Behälter in einem breiten Fenster. Mit `@media` stünde dort die Kopfzeile des Laptops über der Schublade des Handys. */ @container huelle (min-width: 45rem) { /* --- Die Kopfzeile rückt auf ihren Abstand ---------------------- */ /* DAS QUERPOLSTER STEHT HIER SEIT DEM 05.08.2026 NICHT MEHR (Frage 20). Es war die zweite von zwei Stufen, 20 und 72; jetzt ist es eine Spanne, und `--rand-seite` schaltet sich selbst. Die Zeile hier wuerde die Spanne wieder auf ihren oberen Anschlag festnageln — genau der Sprung, der bei 1100 px 34 px Inhalt gekostet hat. */ .kopf { height: var(--hoehe-kopf); } /* Die Luecke steht seit dem 08.08.2026 an der Spalte, nicht an der Leiste — die Leiste traegt nur noch die Karte. */ .kopf__spalte { gap: var(--luecke-kopf); top: var(--karte-kopf-oben); height: var(--karte-kopf-hoch); } /* DIE GROSSE FASSUNG DER KARTE — Jitters Masse bei 1440 px, live gemessen am 09.08.2026: y 39..129, Radius 20, Ueberhang 30. */ .kopf__karte { top: var(--karte-kopf-oben); height: var(--karte-kopf-hoch); left: calc(var(--rand-seite) - var(--ueberhang-kopf)); right: calc(var(--rand-seite) - var(--ueberhang-kopf)); border-radius: var(--radius-kopf); } /* HIER STAND DIE GROSSE FASSUNG DES KARTEN-GRUNDES (Einzug und Radius). Beides ist am 07.08.2026 mit der Karte gefallen — ein Band ueber die volle Breite hat keinen Einzug und keine Ecken. Die Herleitung steht oben bei `.kopf__grund`. GESAMTHOEHE ZUM VERGLEICH, weil sie hier ohnehin zusammenkommt: `--kopf-oben` 48 plus `--hoehe-kopf` 80 sind 128 px von der Fensterkante bis zur Unterkante der Zeile. Jitters Kopfleiste misst gerendert 129. Die Proportion stimmte also schon; was fehlte, war die Fuellung dazwischen. */ /* DIE KLEINERE FASSUNG — am Laptop, wo es eine grosse gibt. ======================================================== Alle vier Werte sind die, die die Zeile am Handy ohnehin traegt. Es kommt keine fuenfte Zahl dazu; die Zeile wechselt in ein Mass, das schon gemessen ist und in sich stimmt. Der Abstand zur Fensterkante faellt dabei ganz weg (`top: 0`, in Bereich 17): eine kleine Leiste, die noch 48 px unter der Kante schwebt, sieht aus wie eine verrutschte grosse. */ .kopf.ist-klebend.ist-verkleinert .kopf__spalte { gap: var(--luecke-kopf-schmal); } /* ================================================================== DIE SEITENWAHL BLEIBT — 06.08.2026, zweite Ansage ================================================================== HIER STAND `display: none` an `.kopf__navi`, mit der Ansage vom Vormittag: „die Seitenwahl faellt, Logo und Profilbild bleiben." Gebaut, angesehen, und der Auftraggeber hat es zurueckgenommen: „Eingeklappt steht nur noch Wortmarke links und Profilbild rechts, dazwischen eine leere weisse Zeile. Das wirkt nicht reduziert, sondern abgeschnitten." Er hat recht, und der Fehler war nicht die Regel, sondern was um sie herum stehenblieb: mit einer vollen weissen Flaeche dazwischen ist eine Zeile mit zwei Dingen darin leer. OHNE die Flaeche ist sie eine Zeile mit drei Dingen darin, die jeder fuer sich stehen — und genau so sieht die eingeklappte Kopfzeile der Website aus: kein Grund, dafuer ein dunkler Knopf und ein dunkler Burger, die ihren Grund selbst tragen. DIE ZUORDNUNG STEHT IN DER ANSAGE: „Was auf der Website der Handlungsknopf ist, ist bei uns das Profilbild; was dort der Burger ist, traegt bei uns die eingeklappte Navigation." HIER STAND EIN SCHATTEN AN DER SEITENWAHL, mit der Begruendung „ihr Kasten ist weiss und traegt eine feine Kontur — auf einer weissen Seite ohne Grund darunter ist das zu wenig". Die Begruendung war richtig und ihre Voraussetzung ist am 07.08.2026 weggefallen: die Leiste hat jetzt IMMER einen Grund, auch eingeklappt. Ein zweiter Schatten auf einer Flaeche, die selbst schon einen wirft, waere ein Kasten im Kasten. */ /* EINGEKLAPPT NIMMT SIE DIE KLEINSTE STUFE DER VORLAGE. Hier stand `26px` als feste Zahl, begruendet mit „der naechste Schritt, den es in der Vorlage wirklich gibt" — damals war der Grundwert 40. Seit dem 08.08.2026 IST 26 der Grundwert; eine eingeklappte Zeile, die genauso gross ist wie die ausgeklappte, klappt nichts ein. Die naechste Stufe der Website nach unten ist 24, und die steht als Token da. */ .kopf.ist-klebend.ist-verkleinert .kopf__marke-bild { height: var(--hoehe-marke-schmal); } /* HIER STANDEN ZWEI REGELN, DIE DEN KNOPF EINGEKLAPPT KLEINER MACHTEN (`--kontoknopf-schmal`, `--kontobild-schmal`). Sie stammen aus der Zeit, in der die Zeile beim Herunterscrollen zu einer kleineren Fassung ihrer selbst wurde. Seit dem 09.08.2026 wird sie das nicht mehr: sie faehrt weg, und was bleibt, ist die Pille mit dem ausgeschriebenen Namen neben dem Burger. SIE HABEN DIE PILLE AUF DIE BREITE DES KREISES ZURUECKGESETZT — bei IDENTISCHER Spezifitaet und weiter unten in der Datei, also haben sie gewonnen. Gemessen: bei 390 px war die Pille 150 px breit, ab 45 rem blieb sie 60, und der Name lief unter den Burger. Genau die Falle aus dem Uebergabepunkt: gleiche Spezifitaet, die spaetere Regel gewinnt. Die HOEHE steht jetzt an einer Stelle (`--kontobild`, 48 px) und ist dieselbe wie die des Burgers — angesagt: „die beiden Punkte sollten gleich gross sein." */ /* [Website] `.kopfzeile__links { gap: 2.4rem }` bei hoechstens 1440 px — das ist der Abstand zwischen Wortmarke und erstem Wort. Rechts steht bei uns nur das Kontobild; dort bleibt der Wert der Leiste. */ .kopf__links { gap: var(--luecke-marke-navi); } .kopf__rechts { gap: var(--luecke-kopf); } /* ================================================================== DER BURGER IST AM LAPTOP NUR EINGEKLAPPT DA — 09.08.2026 ================================================================== HIER STAND `display: none` ohne Ausnahme, mit dem Satz „ein Ausloeser fuer eine Schublade, die man nicht braucht, waere ein Knopf ohne Zweck." Der Satz gilt weiter — SOLANGE die Seitenwahl zu sehen ist. BEIM HERUNTERSCROLLEN IST SIE ES NICHT MEHR: sie faehrt mit der Wortmarke aus dem Bild. Ab da braucht man ihn, und ab da zeigt ihn auch die Website. Gelesen in `stile/kopfzeile.css`, Zeile 165 ff.: sie blendet `.wortmarke` und jede `.nav-link` aus, setzt die Navigation auf `pointer-events: none` und faehrt Pille und Burger nach rechts zusammen. Angesagt am 09.08.2026: „noch mehr stylen wie auf der Homepage, also mit den drei Strichen etc., bei runterscrollen." */ /* HIER STAND `display: none`. Es ist am 09.08.2026 gefallen: was nicht im Baum steht, kann nicht hinter der Pille hervorkommen. Der Knopf ist stattdessen auf Breite Null zusammengeschoben — unten steht, wie. `pointer-events: none` GEHOERT DAZU. Ein Element mit `opacity: 0` und `width: 0` ist unsichtbar, aber nicht unantastbar; ohne diese Zeile faengt es Klicks, die dem Konto daneben gelten. */ .kopf__schublade { pointer-events: none; } .kopf.ist-klebend.ist-verkleinert .kopf__schublade { pointer-events: auto; } /* ER ERSCHEINT MIT EINER BEWEGUNG, nicht auf einen Schlag — 09.08.2026. Angesagt: „aktuell ist es ja ohne Animation, aber es sollte…" — und die Vorlage hat genau dafuer eine eigene, gelesen in `EB-Software-Website/stile/kopfzeile.css`, Zeile 254 ff.: animation: var(--dauer-8) var(--kurve-schwung) forwards burger-erscheint; @keyframes burger-erscheint { 0% { transform: scale(0) } to { transform: scale(1) } } WARUM EINE ANIMATION UND KEIN UEBERGANG: `display` laesst sich nicht ueberblenden. Der Knopf ist vorher gar nicht da; ein `transition` haette nichts, wovon aus er faehrt. Die Animation laeuft ab, sobald er erscheint, und `forwards` haelt den Endwert. */ /* ER KOMMT HINTER DER PILLE HERVOR — 09.08.2026, angesagt: „aus der schwarzen Pille kommt dann rechts diese drei Striche raus." HIER STAND `display: none` UND EINE ANIMATION. Beides ist gefallen, und der Grund ist derselbe wie beim Kuerzel: was nicht da ist, kann nicht hervorkommen. Der Knopf steht jetzt immer im Baum und ist oben nur auf Breite Null zusammengeschoben. Breite 0 + hinter der Pille (`translateX`) oben volle Breite + an seinem Platz eingeklappt `overflow: hidden` SCHNEIDET IHN AN SEINER EIGENEN KANTE ab, solange er zusammengeschoben ist — sonst stuenden die drei Striche schon da und ragten aus einem null Pixel breiten Kasten heraus. DIE VORLAGE MACHT ES ANDERSHERUM UND MEINT DASSELBE: sie laesst den Burger stehen und schiebt die Pille auf ihn zu (`.vor-burger { transform: translate(-6.7rem) }`). Bei ihr ist der Burger immer sichtbar, bei uns nicht — also bewegt sich hier der, der dazukommt. Das Bild ist am Ende gleich. */ /* ================================================================== DIE MECHANIK IST DIE DER WEBSITE, Zeile fuer Zeile nachgelesen ================================================================== `stile/kopfzeile.css`, ab Zeile 219 — und das ist der Kern, den zwei Anlaeufe verfehlt haben: .burger-huelle { right: 0; } @media (width >= 1025px) { .burger-huelle { margin-left: -2.5rem; position: absolute; transform: translateY(-50%) scale(0); } } .kopfzeile.ist-klebend.ist-verkleinert .burger-huelle { transform: translateY(-50%) scale(1) !important; } .kopfzeile.ist-klebend.ist-verkleinert .vor-burger { transform: translate(-6.7rem); } ER FAEHRT NICHT VON RECHTS EIN — er liegt die ganze Zeit UNTER der Pille und waechst aus `scale(0)` auf, waehrend die Pille nach LINKS wegrueckt und ihn freigibt. Genau daher kommt der Eindruck, den die Ansage beschreibt: „die kommt so ein bisschen von links aus der Bubble raus." Am 09.08.2026 stand hier eine Fassung, die ihn von RECHTS hereinschob. Sie war messtechnisch in Ordnung und im Bild falsch. `position: absolute` HAT EINE ZWEITE WIRKUNG, die hier gebraucht wird: er belegt keinen Platz. Solange die Zeile offen ist, steht die Pille deshalb ganz rechts an der Kante des Inhalts — und nicht um eine Burgerbreite davor. */ .kopf__schublade { position: absolute; right: 0; /* HIER STAND `margin-right: -25px`, als Uebertragung von `margin-left: -2.5rem` der Vorlage. Gemessen war das falsch: bei `right: 0` verankert `margin-right` die rechte Kante, und der Knopf stand auf x 1645 statt 1620 — 25 px ueber der Kante des Inhalts. IN DER VORLAGE STEHT `margin-left`, und dort hat es bei fester Breite und `right: 0` gar keine Positionswirkung; es faellt ins Leere. Was den Eindruck macht, ist nicht dieses Mass, sondern das Wegruecken der Pille. Also kommt hier keins. */ transform: scale(0); /* ER WAECHST VON LINKS, nicht aus seiner Mitte — 09.08.2026, angesagt: „der Dot sollte eher so von links kommen." `scale(0)` schrumpft ohne diese Zeile auf den MITTELPUNKT, und der liegt schon an seiner Endstelle: der Knopf erscheint dann dort, wo er auch bleibt, und waechst nach beiden Seiten. Mit dem Ursprung an der linken Kante faengt er an der Pille an und waechst nach rechts von ihr weg — er kommt aus ihr heraus, statt neben ihr aufzugehen. */ transform-origin: left center; /* .8s UND NICHT .35s — der Knopf behaelt die Dauer der Vorlage, waehrend die Schrift schneller laeuft. Die Herleitung steht am Token. IM GRUNDZUSTAND UND NICHT AM ZIEL, damit er auch beim Hochscrollen laeuft: „nicht einfach wegploppen, sondern es sollte eine Animation geben — die Animation einfach rueckwaerts abspielen." ZURUECK GEHT ER SCHNELL, und das behebt einen zweiten Befund: „der Kreis rechts daneben liegt bei der Rueckwaerts-Animation ueber dem Kreis mit den Anfangsbuchstaben." Solange er noch gross ist und die Pille schon schmal, ueberlappen die beiden — bei .8s ist das fast eine Sekunde lang zu sehen, bei .15s ein Wimpernschlag. */ transition: transform var(--dauer-kopf-zurueck) var(--kurve-kopf-schwung); } .kopf.ist-klebend.ist-verkleinert .kopf__schublade { transform: scale(1); /* Der HINWEG behaelt die .8s der Vorlage. */ transition: transform var(--dauer-kopf-knopf) var(--kurve-kopf-schwung); } /* UND DIE PILLE RUECKT NACH LINKS, damit sie ihn freigibt. Die Website schiebt sie um 6,7 rem; bei uns ist es die Breite des Knopfes plus die Luecke, damit die beiden am Ende nebeneinander stehen statt sich zu ueberlappen. */ .kopf.ist-klebend.ist-verkleinert .kopf__konto { transform: translateX(calc(-48px - var(--luecke-kopf))); } /* HIER STAND DIE FARBE MIT IN DER DEKLARATION, weil der Link damals die Pille trug und sein Ueberfahren sonst gesprungen waere. Seit dem 10.08.2026 ist der Link durchsichtig — er hat keine Farbe mehr zu wechseln, und die Fuellung fuehrt ihren Uebergang beim Bild. IM GRUNDZUSTAND, damit die Pille auch zurueck laeuft — „dann geht die Pille nach rechts und wird kleiner." */ .kopf__konto { /* DIE PILLE LIEGT UEBER DEM KNOPF. Er ist `position: absolute` und kaeme sonst darueber zu liegen — beim Rueckweg ueberlappen die beiden fuer einen Moment, und dann muss der Name oben sein, nicht der Knopf. */ position: relative; z-index: 1; transition: transform var(--dauer-kopf-zurueck) var(--kurve-kopf-schwung); } .kopf.ist-klebend.ist-verkleinert .kopf__konto { transition: transform var(--dauer-kopf-schwung) var(--kurve-kopf-schwung); } /* UND DIE SEITENWAHL KOMMT. Am Handy ist sie aus — sechs Wörter passen dort nicht in eine Zeile; dafür ist die Schublade da. */ .kopf__navi { display: block; } /* ERST HIER STEHT DER KNOPF NEBEN DEM KASTEN, und erst hier gilt dessen Höhe. Jitters Maß ist 60 px (`--hoehe-knopf-kopf`), gemessen an seinem Kopf, wo der Knopf allein steht — und am Handy steht er das bei uns auch, dort bleibt es dabei. Neben einem 56 px hohen Kasten sind 60 px kein eigener Wert mehr, sondern ein Versatz von vier Pixeln: sichtbar genug, um als Fehler gelesen zu werden, zu klein, um als Absicht durchzugehen. */ .kopf__knopf { height: var(--hoehe-navi); } /* UND DIE MARKE WIRD GROSS. Sichtbar ist sie seit dem 07.08.2026 auch am Handy — angesagt („in jedem Zustand sichtbar"). Die drei Stufen sind seit dem 08.08.2026 die der eigenen Website, gerendert gemessen: 24 px bis 1024, 26 ab 1025, 34 ab 1441. */ .kopf__marke-bild { height: var(--hoehe-marke); } .kopf__knopf { padding-inline: var(--polster-knopf-kopf); } /* AB HIER SIND ES DIE GROSSEN MASSE: 48 px Bild in einem 64er Knopf, darunter 44 in 60. `min-width` UND NICHT `width` — die Begruendung steht bei den Grundregeln beider Klassen: eine feste Breite hier wuerde die eingeklappte Pille wieder abschneiden, und weil diese Regeln WEITER UNTEN stehen als die eingeklappten, wuerden sie bei gleicher Spezifitaet auch gewinnen. */ .kopf__konto { min-width: var(--kontoknopf); height: var(--kontoknopf); } .kopf__konto-bild { min-width: var(--kontobild); height: var(--kontobild); } /* --- Die Spalte bekommt die volle Breite ------------------------ */ /* (der dritte Schritt der Kopfzeile steht weiter unten bei 90 rem) */ /* UMGESTELLT AM 03.08.2026. Hier stand Jitters mittiger Deckel (`max-width` 860 px, ab 1441 px 1082) — er war richtig, solange die Navigation als Spalte darin stand. Seit die Seitenwahl oben liegt, wäre er nur noch leerer Rand: bei 1440 px 290 px je Seite für nichts. "Dann brauchen wir die Sidebar nicht und können mehr Platz für Content haben" — genau das ist hier gebaut. Was den Abstand zur Fensterkante hält, ist derselbe Wert wie an der Kopfzeile (72 px), damit Marke, Inhalt und dunkler Knopf auf einer Flucht stehen. DAMIT FÄLLT ÜBERSTIMMUNG 21 (die zweite Spaltenbreite für zweispaltige Bildschirme): es gibt keine zwei Breiten mehr, es gibt nur noch eine, und sie ist die volle. Der Posteingang bekommt dabei mehr als die 1002 px, die ihm die Überstimmung zugestanden hatte — bei 1440 px sind es 1296. */ /* `max-width: none` HEBT DIE OBERGRENZE AUF und bleibt: `--breite-arbeit` (1920 px) ist eine Arbeitsgrenze und kein Rand. Das Querpolster ist seit dem 05.08.2026 weg — siehe die Kopfzeile ein Stueck weiter oben. */ .spalte { max-width: none; gap: 0; } .spalte__inhalt { padding-top: var(--kopf-luft); } /* DIE LEISTE IST AM LAPTOP AUS. Sie bleibt im Markup — die Schublade benutzt dasselbe —, und was sie am Handy trägt, trägt hier die obere Seitenwahl. Kein zweites Markup, keine zweite Regelmenge. */ /* NUR DER SCHLEIER TRÄGT DIE SCHUBLADEN-MARKE IM WÄHLER, die Leiste nicht. ============================================================ Der Schleier braucht sie, seit er immer im Markup steht: sonst hätte `.rahmen--schublade-offen .rahmen__schleier` (zwei Klassen) gegen `.rahmen__schleier` (eine) gewonnen, und ein Fenster, das von schmal auf breit gezogen wird, behielte einen grauen Schleier über der ganzen Seite. DIE LEISTE DARF SIE NICHT HABEN, und das ist am 15.08.2026 gemessen worden: `.rahmen--schublade-offen .spalte__leiste { display: block }` (Zeile 5935) GEWINNT hier absichtlich. `?leiste=offen` zeigt die Leiste auch am Laptop — darauf baut `huelle.spec.ts` („genau eine Standortmarke je Seite · 1440 px"), und ohne sie stand dort null statt eins. Ein defensiver Eintrag in einer Liste, der eine gewollte Regel mitnimmt, ist teurer als der Fall, gegen den er schützt. */ .spalte__leiste, .rahmen__schleier, .rahmen--schublade-offen .rahmen__schleier { display: none; } /* --- Die Leiste in ihren Laptop-Massen -------------------------- */ .leiste__eintrag { height: var(--hoehe-eintrag); } .leiste__zeichen { width: var(--symbol-navigation); height: var(--symbol-navigation); } .leiste__eintrag--leise .leiste__zeichen { width: var(--symbol-navigation); } .leiste__wort { font-size: var(--groesse-klein); } .leiste__eintrag--leise { height: var(--hoehe-eintrag-leise); } .leiste__eintrag--leise .leiste__wort { font-size: var(--groesse-mikro); } .suche { margin-bottom: var(--luft-nach-suche); } .suche__feld { height: var(--hoehe-suchzeile); } /* --- Der Seitentitel -------------------------------------------- */ /* KLEINER ALS AM HANDY, und das ist gemessen: 48 gegen 64 px. Wer die Zahl für vertauscht hält, messe nach — Jitters `display2` ist unter 1025 px am größten. */ .seitentitel { font-size: var(--groesse-seitentitel); margin-bottom: var(--luft-nach-titel); } } /* =================================================================== Ab 1441 px: die Lücke wächst =================================================================== [gemessen] `gap: 100px` ab 1441 px, und der Seitentitel geht von 48 auf 60. Der dritte Wert dieses Umbruchs ist gefallen: HIER STAND `max-width: var(--spalte-huelle-weit)` — 1082 px, und das war die Stelle, an der unsere Spalte SCHMALER wurde, je breiter das Fenster ist. Bei 1440 px blieb sie voll (1296 px), ab 1441 fiel sie auf 938. Gemessen bei 1920 px: 49 % Inhalt, links und rechts je 491 px totes Weiss. Genau der Eindruck „die Spalte schwebt im Nichts". Der Wert war aus Jitters CSS richtig gelesen und trotzdem falsch: seine Startseite faehrt gerendert 860 px bei 1440 und **1320** bei 1920. Es gibt einen Umbruchpunkt oberhalb von 1441, den die CSS-Auswertung nicht gesehen hat. Die Breite steht jetzt an EINER Stelle, bei den Tokens, und folgt der Regel: nie schmaler bei groesserem Fenster. */ @container huelle (min-width: 1441px) { .spalte { gap: var(--luecke-huelle-weit); } .seitentitel { font-size: var(--groesse-seitentitel-weit); } /* ================================================================== DIE DRITTE STUFE DER KOPFZEILE — 08.08.2026, aus der eigenen Website ================================================================== Sie schaltet an genau dieser Breite (`@media screen and (width >= 1441px)` in `EB-Software-Website/stile/kopfzeile.css`), und zwar drei Werte auf einmal: die Wortmarke von 26 auf 34, das Querpolster der Woerter von 20 auf 24, die Luecke zwischen Wortmarke und Seitenwahl von 24 auf 40. HIER STAND FRUEHER DER SATZ, dieser dritte Schritt werde weggelassen, weil unsere Huelle nur einen Umbruch habe. Das galt fuer den EINZUG eines Grundes, den es nicht mehr gibt. Fuer die Schriftgroessen gilt es nicht: bei 1920 px steht die Wortmarke sonst so gross da wie bei 900, und die Vorlage tut genau das nicht. */ .kopf__marke-bild { height: var(--hoehe-marke-weit); } .kopf__navi-wort { padding-inline: var(--polster-navi-wort-weit); } .kopf__links { gap: var(--luecke-marke-navi-weit); } /* Und der Bedarf waechst mit: groessere Wortmarke, breiteres Querpolster, groessere Luecke. Die Posten stehen am Token. */ .kopf__spalte { --bedarf-kopf: var(--bedarf-kopf-weit); top: var(--karte-kopf-oben-weit); height: var(--karte-kopf-hoch-weit); } /* DIE WEITE FASSUNG DER KARTE — Jitters Masse bei 1920 px, live gemessen am 09.08.2026: y 35..135, 1400 breit bei einer 1320 px breiten Inhaltsspalte, also 40 px Ueberhang je Seite. Der Radius bleibt 20; er ist bei ihm auf beiden Desktop-Breiten derselbe. */ .kopf { height: var(--hoehe-kopf-weit); } .kopf__karte { top: var(--karte-kopf-oben-weit); height: var(--karte-kopf-hoch-weit); left: calc(var(--rand-seite) - var(--ueberhang-kopf-weit)); right: calc(var(--rand-seite) - var(--ueberhang-kopf-weit)); } } /* HIER STAND EIN EIGENER `prefers-reduced-motion`-BLOCK für drei Selektoren (`.unterleiste__kreis`, `.leiste__kreis`, `.betrieb__knopf .symbol`). Gestrichen am 02.08.2026: der globale `*`-Block weiter oben erfasst sie längst und setzt Dauer UND Verzögerung auf 0. Sieben Zeilen, die nichts taten — und die den Eindruck erweckten, ein Bereich müsse seine Bewegung selbst abschalten. Muss er nicht: das ist Pflicht und liegt über allem. */ /* =================================================================== BEREICH 03 · Posteingang =================================================================== Neunzig Prozent der Nutzung. Täglich zwanzig Minuten. Oft am Handy, oft mit Handschuh. VIER ENTSCHEIDUNGEN TRAGEN DIESEN ABSCHNITT: 1. OHNE WAHL NIMMT DIE LISTE DIE BREITE — geändert am 05.08.2026. Hier stand „beide Spalten stehen immer, auch ohne offenes Gespräch"; die Begründung war der Sprung beim ersten Antippen. Gemessen kostete das bei 1920 px eine graue Fläche von 1424 x 691 px für zwei Zeilen Text. Der Block bei `[data-offen='nein']` weiter unten führt die Kehrtwende aus und trägt die vollständige Begründung. 2. DIE LISTE IST IHR EIGENER BILDLAUF. Sie scrollt in sich, nicht mit der Seite. Nur so bleibt die Stelle erhalten, wenn am Handy ein Gespräch darüberfährt und wieder weggeht. 3. AM HANDY LIEGT DAS GESPRÄCH ÜBER DER LISTE, es ersetzt sie nicht. Ein Seitenwechsel würde die Liste neu aufbauen und die Stelle verlieren. 4. SCHRIFTGRÖSSEN SIND REGEL. Regel 03 ausdrücklich: Liste 15 px, Gespräch und Antwortfeld 17 px. „Große Schrift dort, wo gelesen und geschrieben wird — nicht dort, wo überflogen wird." =================================================================== */ /* =================================================================== DIE SEITE IST EIN BENTO MIT EINER ARBEITSFLAECHE DARUNTER — 11.08.2026 =================================================================== HIER STAND EIN RASTER MIT VIER FELDERN („aussage / filter / liste gespraech"). Die Aussage war ein violetter Vollton-Streifen ueber die volle Breite; die Seite fing damit an und danach kam eine Liste. ANGESAGT: „Der zuletzt ueberarbeitete Posteingang ist der Gegenbeleg: er traegt kein Bento-Raster, keine grosse Aussageflaeche, keine Farbkacheln — er sieht nicht nach demselben Produkt aus wie die Uebersicht daneben." JETZT SIND ES DREI GESCHWISTER IN EINER SPALTE, und die Reihenfolge ist die Vorlesefolge: erst was los ist (Bento), dann filtern, dann lesen. Ein Raster braucht es dafuer nicht mehr — die zwei Spalten stehen eine Ebene tiefer, in `.posteingang__arbeit`. DIE LUECKE IST DIE DES BENTOS. `.bento` traegt zwischen Flaeche und Kachelreihe 30/20/40 px je Breite; derselbe Abstand steht hier zwischen Kachelreihe, Chipzeile und Arbeitsflaeche. Eine zweite Zahl daneben waere ein zweiter Takt auf einer Seite. */ /* =================================================================== DIE SEITE IST DAS RASTER — 11.08.2026, zweiter Anlauf =================================================================== DER ERSTE ANLAUF WAR FALSCH HERUM. Er setzte ein Bento als KOPF ueber die Seite und liess den Bestand darunter stehen; der Auftraggeber hat im Bild gesehen, was daraus folgt: „der Inhalt der Bento-Grids ist ja auf jeder Seite gleich … der Inhalt soll IN dem Bentogrid sein." JETZT SIND ALLE VIER TEILE KACHELN IN EINEM RASTER. Zwoelf Spuren, weil das die kleinste Zahl ist, die 6+3+3 und 5+7 zugleich hergibt — beides sind Verhaeltnisse, die schon entschieden sind (die Kachelpaare der Vorlage und Jitters 28 % Listenspalte). `minmax(0, 1fr)` UND NICHT `1fr`: eine `1fr`-Spur hat ein automatisches Minimum von `min-content`, und `min-width: 0` am KIND aendert daran nichts. Dieselbe Falle wie an `.zeile__mitte`. AM HANDY EINE SPUR. Jede Kachel nimmt die Breite, das Gespraech liegt als feste Ueberlagerung darueber. */ .posteingang { display: flex; flex-direction: column; gap: var(--bento-luecke); min-width: 0; } /* HIER STAND `.posteingang__lage` MIT EIGENEN SPUREN UND EIGENEN SCHRIFTGRADEN — 11.08.2026 gebaut, 11.08.2026 wieder gefallen. Angesagt auf die Frage nach Schrift und Farbe: „wie Uebersichtsseite". Der Kopf ist jetzt `bentokopf()` und damit dieselbe Flaeche und dasselbe Raster wie dort; es gibt keine zweite Formensprache mehr daneben. */ .posteingang__arbeit { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bento-luecke); min-width: 0; } /* =================================================================== DIE INHALTSKACHEL — die zweite Kachelart, und sie ist nicht neu =================================================================== `.verlauf` auf der Uebersicht ist genau diese Form und traegt seit dem 06.08.2026 den einzigen Inhalt, den das Bento dort hat: Radius 40, Haarrand, weisse Flaeche. Die Vorlage kennt sie als `_collaborationCards_` (Jitters Startseite, „Design" und „Animate"). WAS SIE VON `.bentokachel` UNTERSCHEIDET, ist nicht die Form, sondern die Aufgabe: die Farbkachel traegt EINE Aussage, die Inhaltskachel traegt eine Arbeitsflaeche. Deshalb ist ihr Polster kleiner — 50 px ringsum wie bei `.verlauf` liessen bei 390 px noch 250 px fuer eine Nachrichtenliste uebrig, und die Liste ist die Seite. [gemessen] 390 px Fenster minus 2 x 20 px Seitenrand = 350 px Kachel; mit 24 px Polster bleiben 302 px Inhalt. Das ist die Breite, auf der die Listenzeile abgenommen ist. */ .inhaltskachel { display: flex; flex-direction: column; gap: var(--abstand-4); min-width: 0; padding: var(--abstand-5); /* =================================================================== KANTIG, WEIL SIE KEINE FARBE TRAEGT — 12.08.2026, angesagt =================================================================== ANGESAGT: „die Kaesten unten, also den border-radius auf 0px setzen, also auf jeder Seite von dem Container, der keine Farbe hat." DIE GRENZE IST DIE FARBE, und sie laesst sich begruenden: eine Bento-Kachel TRAEGT die Farbe ihres Objekts — dort ist der Radius Teil der Form, weil die Flaeche selbst die Aussage ist. Diese Kachel traegt nur Weiss und einen Haarrand; ihr Radius war Schmuck an einem Behaelter, der nichts sagt. DIESELBE RICHTUNG WIE BEI DEN EINGABEFELDERN am 11.08.2026 („kantig wie bei Jitter") und bei den Filterchips („schwarz und kantig wie auf der Uebersichtsseite"). Es ist die dritte Ansage in dieselbe Richtung und damit keine Einzelentscheidung mehr. `--radius-bento` BLEIBT UND WIRD GEBRAUCHT: die farbigen Kacheln tragen ihn weiter. Der Token faellt nicht, nur dieser Aufrufer. */ border-radius: 0; border: var(--randbreite) solid var(--farbe-rand); background: var(--farbe-flaeche); } /* DIE GESPRAECHSKACHEL IST EINE INHALTSKACHEL WIE DIE LISTE — 11.08.2026. Sie stand auf `--farbe-flaeche-gedaempft`, und das war richtig, solange sie eine randlose Spalte neben der Liste war: der graue Grund war ihre einzige Kante. Als Kachel hat sie Radius und Haarrand; ein zweiter Traeger derselben Aussage ist einer zu viel, und im Bild lagen dadurch drei Grautoene uebereinander (Kachel, Kopfband, Verlauf). `.inhaltskachel.gespraech` UND NICHT NUR `.gespraech`: die Regel weiter oben hat dieselbe Spezifitaet und steht spaeter. Zwei Klassen an einem Element (0-2-0) schlagen sie. */ .inhaltskachel.gespraech { background: var(--farbe-flaeche); } /* Der Kopf traegt keine eigene Flaeche mehr — er steht auf der Kachel. Was ihn vom Verlauf trennt, ist der Strich, nicht die Farbe. */ .inhaltskachel .gespraech__kopf { padding: 0 0 var(--abstand-4); background: none; } /* Der Verlauf ebenso: kein zweiter Grund in der Kachel, kein zweites Polster. Die Blasen tragen ihre Kanten selbst. */ .inhaltskachel .gespraech__verlauf { padding: 0; } /* Und das Antwortfeld: der Strich trennt Lesen von Schreiben, die Flaeche ist die der Kachel. Das Querpolster faellt, das Hochpolster bleibt — ohne es klebte der Kasten am Strich. */ .inhaltskachel .antwort { padding: var(--abstand-4) 0 0; background: none; } /* =================================================================== DAS ANTWORTFELD GEHT ÜBER DIE VOLLE BREITE — 11.08.2026, angesagt =================================================================== „die Antwortleiste sollte ganze Breite sein." DAMIT IST DIE ABWEICHUNG VOM 10.08.2026 ZURÜCKGENOMMEN, und zwar auf dieselbe Weise, wie sie zustande kam: vorgelegt und entschieden. Regel 03 sagt seit jeher „Das Antwortfeld geht über die volle Breite und hat kein Formatierungsband"; am 10.08. ist es auf `--gespraech-spalte` (576 px) begrenzt worden, mit dem Argument, 1214 px Schreibzeile bei 1920 px seien zu lang, während gelesen wird auf 534. DAS ARGUMENT GALT FÜR EINE ANDERE FLÄCHE. Damals war das Gespräch eine randlose Spalte über die halbe Seite. Jetzt ist es eine Kachel: bei 1920 px misst sie 760 px innen, bei 1440 px 430. Die Schreibzeile ist damit von sich aus in der Größenordnung der Lesebreite — der Deckel regelte etwas, das die Kachel schon regelt, und ließ dafür rechts sichtbar Fläche liegen. Regel 03 gilt damit wieder wörtlich. Die Blasen behalten ihre Lesebreite: ein Text, den man LIEST, hat eine andere Auflage als ein Feld, in das man SCHREIBT. */ .inhaltskachel .antwort > * { max-width: none; } /* DER CHIP SAGT, WAS IN DER KACHEL STEHT — SCHWARZ UND KANTIG, 11.08.2026. Angesagt: „Filter-Optionen schwarz und kantig wie auf der Uebersichtsseite." Das ist dort `.verlauf__takt-wort--aktiv`, der Umschalter „Monate / Wochen": Hoehe 40, Querpolster 20, Radius 0, 16 px / 600, Tinte gefuellt mit weisser Schrift. Derselbe Satz Token, damit es wirklich dieselbe Form ist und nicht eine, die zufaellig danebenliegt. =================================================================== SEIT DEM 19.10.2026 OHNE FLAECHE — wie die Eyebrow der Website =================================================================== Lennard, Feedback auf Staging: „Überschrift darf nicht gleich aussehen wie Knöpfe." Schwarz gefuellt, 40 px hoch und kantig war das Etikett dieselbe Form wie „Anlegen und einladen" zwei Zeilen darunter. Gewaehlt (Auswahl): wie die Website — dort steht ueber jedem Abschnitt eine Zeile in Grossbuchstaben, fett, 14 px, ohne Grund (`ergaenzungen.css`, `.haupt .pille`: 700, 14 px, 1,3, 0,04 em). Damit sind die Knoepfe das Einzige mit schwarzer Flaeche. `min-height` STATT `height`: rechts im Kopf stehen bei manchen Kacheln Knoepfe (Drive) — die Zeile bleibt so hoch wie sie, das Etikett mittig. */ .inhaltskachel__chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0; border-radius: 0; background: none; color: var(--farbe-text); font-size: 14px; line-height: 1.3; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } /* Der Chip links, der Weg rechts. `flex-wrap`, weil „Zurück zum Posteingang" bei 390 px neben einem Chip von 160 px nicht in eine Zeile passt — dann steht er darunter statt gequetscht daneben. */ /* =================================================================== LINKS DER CHIP, RECHTS DER REST — 11.08.2026 berichtigt =================================================================== Hier stand `justify-content: space-between`, und das war richtig, solange der Kopf ZWEI Kinder hatte: Chip links, Weg rechts. Im offenen Ordner des Drive sind es drei — Chip, „Alle Fotos", „Fotos hochladen" — und `space-between` setzt das mittlere in die MITTE. Der Weg stand im Bild allein zwischen zwei Blöcken und sah aus, als gehörte er zu keinem. Mit dem automatischen Außenabstand schiebt das ERSTE Element der rechten Seite die ganze Lücke vor sich her; alles danach folgt ihm dicht. Bei zwei Kindern kommt genau dasselbe heraus wie vorher — bei drei kommt heraus, was gemeint war. */ .inhaltskachel__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-3); min-width: 0; } /* `+` UND NICHT `~`: nur das ERSTE Element nach dem Chip bekommt die Lücke. Mit `~` bekäme sie jedes, und dann stünde zwischen „Alle Fotos" und „Fotos hochladen" wieder derselbe Abstand wie vor dem Chip — also genau das `space-between`, das hier gerade gefallen ist. */ .inhaltskachel__chip + * { margin-left: auto; } /* Der Weg ins Archiv und zurueck. Ein Verweis und kein Knopf: er aendert nichts, er zeigt etwas anderes. =================================================================== 44 PX — NACHGEZOGEN AM 11.08.2026, UND ZWAR ALS FUND =================================================================== Beim Umbau von `/drive` sollte hier ein Vermerk stehen, dass dieser Weg die 44 px mitbringt, die `.drive__zurueck` am 02.08.2026 bekommen hat. Beim Nachsehen: er brachte sie NICHT. Der Verweis war ein reiner Textverweis mit 17,5 px Hoehe — genau der Zustand, der am 02.08.2026 an der einen Stelle behoben und an der anderen nie bemerkt wurde. ER TRIFFT DREI SEITEN: „Archiv" im Posteingang, „Als Kalender" in den Inhalten, „Alle Fotos" im Drive. Alle drei sind der einzige Weg aus ihrer Ansicht heraus, und alle drei waren mit Arbeitshandschuh nicht zu treffen. Er bleibt ein Textverweis, er bekommt nur seine Flaeche — dieselbe Abhilfe wie damals, nur an dem Ort, an dem sie fuer alle gilt. */ .inhaltskachel__weg { display: inline-flex; align-items: center; min-height: 44px; color: var(--farbe-text-gedaempft); font-size: var(--groesse-klein); font-weight: var(--schrift-halbfett); text-decoration: none; } .inhaltskachel__weg:is(:hover, .zeige-ueberfahren) { color: var(--farbe-text); text-decoration: underline; } /* --- Die Liste ---------------------------------------------------- */ .posteingang__liste { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--farbe-flaeche); /* =================================================================== DIE LISTE IST IHR EIGENER BEHAELTER — 11.08.2026 =================================================================== Seit die Chipzeile IN der Listenkachel steht, haengt ihr Umbruch an der Breite DIESER Kachel und nicht mehr an der der Huelle. Im Bild bei 1440 px mit offenem Gespraech: die Kachel ist 352 px breit, die Huelle meldet 1440, also griff die Umbruchregel — und zehn Woerter standen als sechszeiliger Klotz mit ausgefransten Kanten da. Dieselbe Ueberlegung wie am Gespraechskopf (10.08.2026): ein Umbruch, der an der Fensterbreite haengt, obwohl er von der Kachelbreite abhaengt, ist an der falschen Zahl festgemacht. */ container-type: inline-size; container-name: liste; } /* Die Chip-Zeile bleibt oben stehen, während die Liste darunter läuft. Sie ist die einzige Filterung — c4: kein „Filter +", keine zweite Ebene, keine gespeicherten Ansichten. */ /* =================================================================== DIE FILTER SIND NEU — 18.08.2026, angesagt =================================================================== „Die Filter bitte von Grund auf neu bauen. Du kannst auch alles unter einem Dropdown machen." WAS DAMIT FAELLT, ist der ganze Bildlauf-Aufbau: der Streifen mit `overflow-x`, seine Ausblendkante, der Trog mit `width: max-content`, die Zwischenlage und der festgesetzte Schalter „Weitere". Alle fuenf gab es NUR, weil vier Kanalchips 590 px brauchten und die Filterspalte bei 390 px 268 hat. Hinter einem Knopf braucht die Zeile diese Breite nicht mehr. DIE ZEILE DARF JETZT UMBRECHEN, und das ist kein Rueckfall: sie enthaelt zwei Knoepfe und die gesetzten Pillen. Was frueher auf sechs Reihen umbrach, waren zehn Chips. */ .posteingang__filter { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-3); /* `min-width: 0` GEHOERT DAZU, seit die Zeile ein Rasterfeld ist — 02.08.2026. Ein Rasterfeld ist von sich aus `min-width: auto` und damit so breit wie sein Inhalt. */ min-width: 0; /* `position: sticky` STAND HIER UND WAR SCHON VORHER WIRKUNGSLOS: gescrollt hat immer `.posteingang__zeilen`, nie der Kasten, in dem die Filterzeile lag. Seit sie eine eigene Rasterzeile ueber der Liste ist, steht sie ohnehin fest. Eine Regel, die nichts tut, sieht aus, als taete sie etwas. */ z-index: 2; padding: var(--abstand-3) var(--abstand-4); background: var(--farbe-flaeche); border-bottom: var(--randbreite) solid var(--farbe-rand); } /* Der Knopf einer Filterart. ECKIG UND LEISE — er ist kein Filter, sondern der Weg zu den Filtern; die Farbe gehoert dem, was gesetzt ist. `list-style: none` UND `::-webkit-details-marker`: beide Browserfamilien setzen ein eigenes Dreieck vor ein ``. Wir tragen die Auskunft „auf/zu" ueber die Zahl daneben und den Zustand des Blattes. */ .filterwahl__knopf { display: inline-flex; align-items: center; gap: var(--abstand-2); min-height: 44px; padding: 0 var(--abstand-3); border: var(--randbreite) solid var(--farbe-rand-bedienelement); background: var(--farbe-flaeche); color: var(--farbe-text); font-size: var(--groesse-klein); font-weight: var(--schrift-halbfett); cursor: pointer; list-style: none; } .filterwahl__knopf::-webkit-details-marker { display: none; } .filterwahl__knopf:is(:hover, .zeige-ueberfahren) { background: var(--farbe-flaeche-gedaempft); } /* DIE ZAHL SAGT, WIE VIELE GESETZT SIND, und sie steht IM Knopf: wer das Blatt zumacht, soll nicht raten, ob er darin etwas stehen hat. Tinte auf hellem Grund und nicht die Handlungsfarbe — sie ist eine Auskunft, keine Aufforderung. */ .filterwahl__zahl { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 var(--abstand-1); background: var(--farbe-text); color: var(--farbe-flaeche); font-size: var(--groesse-mikro); } /* =================================================================== DER ANKER WECHSELT MIT DER BREITE — 18.08.2026, von einer Messung erzwungen =================================================================== AM LAPTOP haengt das Blatt am KNOPF: es klappt dort auf, wo man geklickt hat, und ist so breit wie sein Inhalt. AM HANDY GEHT DAS NICHT. Der zweite Knopf steht schon in der Mitte der Kachel; ein Blatt an seiner linken Kante, so breit wie sein Inhalt, ragt rechts hinaus — gemessen bei 390 px: 22 Elemente ueber dem Rand. ALSO IST DORT DIE KACHEL DER ANKER (`position: static` am Knopfkasten, `inset-inline: 0` am Blatt). `min-width: max-content` gehoert dabei IN die Laptop-Abfrage: zusammen mit `inset-inline: 0` gewinnt sie und macht das Blatt wieder so breit wie sein Inhalt (gemessen 61 bis 494 px in einem 390er Fenster). `position: relative` STEHT DESHALB IN DER MEDIENABFRAGE und nicht davor: waere es die Vorgabe, muesste die schmale Fassung es zuruecknehmen — und das ist die zweite Regel zur selben Sache, vor der die Uebergabe warnt. */ .filterwahl__blatt { position: absolute; top: calc(100% + var(--abstand-1)); inset-inline: 0; z-index: 3; padding: var(--abstand-2); background: var(--farbe-flaeche); border: var(--randbreite) solid var(--farbe-rand); box-shadow: var(--schatten-2); } @container (min-width: 45rem) { .filterwahl { position: relative; } .filterwahl__blatt { inset-inline: 0 auto; min-width: max-content; } } /* DER WEG ZURUECK. Ein Verweis und kein Knopf: er setzt die Adresse zurueck, und das ist eine Navigation. Er heisst `.filterweg` und nicht mehr `.filterzeile__weitere` — der Block `.filterzeile` ist mit dem Bildlauf gefallen, und ein Element, dessen Block es nicht gibt, meldet die Wache „kein Baustein greift in die Klassen eines anderen" sofort. */ .filterweg { min-height: 44px; display: inline-flex; align-items: center; color: var(--farbe-text-gedaempft); font-size: var(--groesse-klein); font-weight: var(--schrift-halbfett); text-decoration: none; white-space: nowrap; } .filterweg:is(:hover, .zeige-ueberfahren) { color: var(--farbe-text); text-decoration: underline; } /* Die gesetzten stehen in der Zeile selbst, nebeneinander, und duerfen umbrechen: es sind hoechstens so viele, wie jemand gesetzt hat. */ .filtergesetzt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); min-width: 0; } /* =================================================================== DER CHIP IST EIN REITER — 16.08.2026, angesagt =================================================================== „Wenn ich bei Posteingang auf Facebook, Instagram … hovere, sind die Dinger alle viereckig, dieser Hover-Pin. … Aber die sollten doch so aussehen wie in den Einstellungen die Reiter." ER WAR VIERECKIG, UND DIE URSACHE STAND NICHT HIER, sondern in tokens.css: der Chip hat sich beim Trog-Umbau vom 12.08.2026 die vier Marken der KOPFNAVIGATION geliehen — `--hoehe-navi-wort`, `--polster-navi-wort`, `--groesse-navi-wort` und `--radius-navi-wort`. Und der letzte steht dort mit Begruendung auf NULL: „Der aktive Vollton ist ein Rechteck. Die Vorlage hat keinen aktiven Zustand zum Abmessen — ihr Gegenstueck ist ein Knopf und keine Seitenmarke." Das ist fuer die Kopfleiste richtig und fuer diesen Trog falsch. Der Trog darum ist laengst der des Reiters (`.filterzeile .chipzeile`: `--farbe-rand`, `--reiter-polster`, `--radius-rund`) — es fehlte genau der Inhalt darin. Deshalb stehen hier jetzt die Werte von `.reiter__eintrag` und keine eigenen: 48 px Handschuhmass, das Polster der Reiterleiste, die runde Pille, die gedaempfte Schrift AUF DEM TROG (`--farbe-text-gedaempft-auf-rand`, am 14.08.2026 eigens fuer diesen Grund gerechnet — `--farbe-text-gedaempft` haelt darauf nur 4,00:1). WAS NICHT MITKOMMT, ist die Fuellung des gesetzten Zustands. Der aktive Reiter ist eine WEISSE Pille; der gesetzte Chip bleibt dunkel beziehungsweise traegt seinen Etikettton. Der Grund ist gemessen und steht zwei Bloecke tiefer: die sechs Etikettfarben sind fuer WEISSE Schrift gerechnet (4,57 bis 4,62:1). Eine weisse Pille mit dunkler Schrift wuerde diese Rechnung umwerfen — und die Ansage galt der FORM und dem Ueberfahren, nicht der Fuellung. */ .posteingang__filter .chip { position: relative; min-height: 48px; padding: 0 var(--abstand-4); border: 0; border-radius: var(--radius-rund); background: none; color: var(--farbe-text-gedaempft-auf-rand); font-size: var(--groesse-klein); font-weight: var(--schrift-halbfett); max-width: 16rem; } .posteingang__filter .chip::after { content: ''; position: absolute; inset: -2px 0; } .posteingang__filter .chip--gesetzt { padding-right: var(--abstand-2); background: var(--farbe-text); color: var(--farbe-flaeche); /* DER SCHATTEN IST DER DRITTE TRAEGER, woertlich derselbe Satz wie bei `.reiter__eintrag--aktiv`: er hebt die Pille vom Trog ab, statt sie zu faerben. Dort traegt er eine WEISSE Pille auf hellgrauem Grund (1,17:1 ohne ihn); hier traegt er die Ueberfahren-Rueckmeldung eine Stufe weiter unten mit, siehe unten. */ box-shadow: var(--schatten-1); } /* =================================================================== DIE ETIKETTFARBE GING IM TROG VERLOREN — 14.08.2026, gefunden =================================================================== `Chip.etikett` faerbt einen Chip „AUSSCHLIESSLICH IM GESETZTEN ZUSTAND" (siehe die Begruendung an `Chip` in bausteine.ts) — das ist der einzige Moment, in dem ein Etikett-Chip ueberhaupt Farbe traegt. Die Regel `.chip--gesetzt.chip--etikett-*` (Bereich 03, sechs Toene) und die Regel `.posteingang__filter .chip--gesetzt` (Trog, oben) haben dieselbe Spezifitaet — zwei Klassen —, und die spaetere im Bestand gewinnt. Das war seit dem Trog-Umbau vom 12.08.2026 immer die zweite: ein gesetzter Etikett-Chip im Filter-Trog stand schwarz da wie jeder andere, nachgemessen (Playwright, `background-color`) statt vermutet. Damit verlor der Filter genau die Auskunft, fuer die die Etikettfarbe ueberhaupt existiert — welches Etikett gerade gesetzt ist, auf einen Blick, ohne das Wort zu lesen. Kein Kommentar an der Trog-Regel hat das als Absicht benannt; es steht auch sonst nirgends im Haus, dass Etiketten im Filter ihre Farbe verlieren sollen. DREI KLASSEN SCHLAGEN ZWEI — die sechs Regeln hier sind eigens auf `.posteingang__filter` eingegrenzt, nicht global verschaerft: die Trog-Regel bleibt fuer Kanal-Chips (die nie eine eigene Farbe hatten) unveraendert die Vorgabe. `color` bleibt unberuehrt: `--farbe-flaeche` und `--farbe-primaer-kontrast` sind beide #FFFFFF, derselbe Wert, den die Etikett-Chips ausserhalb des Trogs schon tragen. */ .posteingang__filter .chip--gesetzt.chip--etikett-bewerbung { background: var(--farbe-etikett-bewerbung); } .posteingang__filter .chip--gesetzt.chip--etikett-anfrage { background: var(--farbe-etikett-anfrage); } .posteingang__filter .chip--gesetzt.chip--etikett-beschwerde { background: var(--farbe-etikett-beschwerde); } .posteingang__filter .chip--gesetzt.chip--etikett-lob { background: var(--farbe-etikett-lob); } .posteingang__filter .chip--gesetzt.chip--etikett-termin { background: var(--farbe-etikett-termin); } .posteingang__filter .chip--gesetzt.chip--etikett-sonstiges { background: var(--farbe-etikett-sonstiges); } /* Der gesetzte Chip traegt sein Kreuz in derselben Schrift wie sein Wort. Vorher lag darauf der Etikettton — auf Tinte ist er nicht zu sehen. */ .posteingang__filter .chip--gesetzt .chip__loeschen { color: inherit; } /* =================================================================== DER HOVER-PIN IST WEG — 16.08.2026, angesagt =================================================================== HIER STAND `background: var(--farbe-flaeche-gedaempft)`, mit dem Vermerk „Ueberfahren faerbt die Flaeche leicht, statt einen Rand zu bewegen". Genau diese Flaeche ist gemeldet worden: „sind die Dinger alle viereckig, dieser Hover-Pin." SIE WAR NICHT NUR VIERECKIG, SIE WAR ZU VIEL. Der Reiter hat dieselbe Frage am 12.08.2026 schon beantwortet, und zwar angesagt („bei Hover ist ein Unterstrich da, der weg sollte"): beim Ueberfahren nur die SCHRIFT. Der Vermerk dort nennt auch den Grund, und er gilt hier woertlich — eine Flaeche unter dem ruhenden Wort waere im Trog ein zweiter heller Fleck neben der Pille, und man liest ihn als zweiten gesetzten Filter. */ .posteingang__filter .chip:is(:hover, .zeige-ueberfahren):not(.chip--gesetzt) { color: var(--farbe-text); /* UND DER SCHATTEN AUCH NICHT. Die Flaeche wegzunehmen hat nicht gereicht — nachgesehen am Bild (`messberichte/chips/filter-ueberfahren-1440.png`): der Kasten war weg und ein heller Hof stand weiter da. Er kommt aus der allgemeinen Chip-Regel `.chip:not(.chip--gesetzt):hover { box-shadow: var(--schatten-2) }` in Bereich 03. Die gilt fuer den Chip UEBERALL SONST (auf `/inhalte` und in der Suche steht er als Umriss auf Weiss, und dort traegt der Schatten richtig) — im Trog ist er der Hover-Pin unter anderem Namen. Deshalb hier zurueckgenommen und nicht dort geaendert; dieselbe Falle wie bei `feld()`, ein Baustein des ganzen Produkts. */ box-shadow: none; } /* UND DER GESETZTE ZEIGT AUCH, DASS ER WEGGEHT — 15.08.2026. ============================================================ Gemeldet: „wenn ich sie auswähle, kann ich sie nicht mehr abwählen." Die halbe Ursache war das Markup (ein `` statt eines Verweises, siehe `chip()` in `bausteine.ts`), die andere Hälfte ist hier: es gab keine Regel für den gesetzten Zustand, also sah er beim Überfahren aus wie Beschriftung. HIER STAND `opacity: 0.75`, mit dem Vermerk „ES WIRD BLASSER STATT DUNKLER … der eine sagt ‚hier kommt etwas dazu', der andere ‚hier geht etwas weg'". Die Absicht war richtig, das Mittel verboten. =================================================================== DIE ZUSTANDSMATRIX HAT ES GEMELDET — 16.08.2026 =================================================================== „Zustand über Deckkraft gebaut: .posteingang__filter .chip--gesetzt :is(:hover, .zeige-ueberfahren) { opacity: 0.75 }" Sie stand am 15.08.2026 einen Tag lang als grün im Übergabepunkt, und das war ein Irrtum der Buchführung, kein Befund: der Messdurchgang jenes Tages ist bei 225 von 403 abgebrochen und nie bis zu dieser Probe gekommen. Der erste Durchgang, der durchlief, hat sie sofort gefunden. DERSELBE TRÄGER WIE BEIM AKTIVEN REITER, und damit ist es wieder eine Antwort und keine Erfindung: `--schatten-1` auf `--schatten-2`. Die Pille kommt beim Überfahren HERAUS statt zu verblassen. Daß das die Gegenrichtung zur ursprünglichen Absicht ist, gehört gesagt — aber „geht weg" trägt hier schon das Kreuz, und zwei Zeichen für dieselbe Auskunft sind eines zu viel (siehe den Balken unter der aktiven Pille, gefallen am 12.08.2026 aus genau diesem Grund). */ .posteingang__filter .chip--gesetzt:is(:hover, .zeige-ueberfahren) { box-shadow: var(--schatten-2); } /* =================================================================== AB 1100 PX BRICHT DIE ZEILE UM, STATT ZU ROLLEN — 05.08.2026 =================================================================== Der Bildlauf ist die Antwort auf ein SCHMALES Fenster: am Handy passen von zehn Chips drei ins Bild, und untereinander waeren sie ein sechszeiliger Block, der die halbe Liste frisst. Am breiten Fenster ist er die falsche Antwort. Gemessen bei 1920 px: Streifen 1776 px, Chipinhalt 1776 px — die Zeile passt genau, und ein waagerechter Bildlauf, der nichts zu rollen hat, ist trotzdem einer. Wer die Schrift auf 125 % stellt, faellt sofort hinein: dann liegen die letzten zwei Chips hinter einer Kante, obwohl darunter eine ganze Zeile frei ist. Umbrechen kostet dort nichts. Zehn Chips brauchen bei 1920 px eine Zeile, bei 125 % Schrift zwei — und die zweite steht einfach da, statt versteckt zu sein. MIT DEM BILDLAUF FAELLT AUCH SEINE KANTE. Die Ausblendmaske sagt „hier geht es weiter"; ueber einer umgebrochenen Zeile saehe sie aus wie ein Fehler im Verlauf und wuerde den letzten Chip der ersten Zeile verblassen lassen, obwohl er vollstaendig dasteht. DIE ZAHL IST AM 11.08.2026 EINE ANDERE GEWORDEN, und der Behaelter auch. Hier stand `@container huelle (min-width: 1100px)`: die Huelle war der richtige Bezug, solange die Chipzeile ueber BEIDEN Spalten lag. Seit sie in der Listenkachel steht, ist die Kachel der Bezug. [gemessen] Was zehn Chips in der neuen Form brauchen: „Facebook" 128, „Instagram" 132, „WhatsApp" 137, „YouTube" 128, „Anfrage" 96, „Beschwerde" 121, „Bewerbung" 118, „Lob" 71, „Sonstiges" 111, „Termin" 91 — zusammen 1133 px plus neun Luecken zu 8 = 1205. Bei 1320 px Inhaltsbreite passt das in eine Zeile, in einer 352 px breiten Listenspalte nicht annaehernd. 70rem = 1120 px ist die Kachelbreite, ab der es sicher hineinpasst. Darunter rollt die Zeile — das ist die Antwort auf ein schmales Feld, und sie ist dieselbe wie am Handy. */ @container liste (min-width: 70rem) { .posteingang__filter { overflow-x: visible; mask-image: none; scroll-snap-type: none; } .posteingang__filter .chipzeile { flex-wrap: wrap; /* Zurueck auf „so breit wie der Streifen": `max-content` war die Bedingung fuers Rollen und verhindert jeden Umbruch. */ width: auto; } } /* Die Zeile ist seit Bereich 03 ein VERWEIS statt eines Knopfes — ohne Skript muss sie zu einer Adresse führen. Ein Verweis bringt aber Unterstreichung und Verweisfarbe mit, und die Liste sah damit aus wie eine Trefferliste aus dem Netz. Im Bild sofort zu sehen, in keiner Zahl: Kontrast und Trefferfläche waren die ganze Zeit in Ordnung. */ .posteingang__zeilen .zeile__flaeche { color: inherit; text-decoration: none; } /* =================================================================== DIE LISTE ROLLT NICHT MEHR IN SICH — 10.08.2026, angesagt =================================================================== „Man sollte in der Seite ja auch runterscrollen können … das soll so sein wie die Übersichts-Seite." HIER STAND EIN EIGENER BILDLAUF, und er war die tragende Entscheidung von Bereich 03: `flex: 1 1 auto`, `overflow-y: auto`, eine Ausblendkante unten, Rasterpunkte je Zeile. Der Grund stand daneben — „hier steht die Stelle in der Liste, unangetastet beim Öffnen und Schließen eines Gesprächs" — und er war richtig. ER HAT NUR EINEN PREIS GEHABT, DEN NIEMAND WOLLTE. Damit eine Fläche in sich rollen kann, braucht die Kette darüber eine feste Höhe; die kam vom Körper (`overflow: hidden` ab 60 rem). Gemessen bei 1440 x 900, nachdem der Seitentitel auf die Höhe der anderen Seiten gerückt war: Gesprächsbereich 272,9 px Verlauf darin 32 px 32 px Verlauf sind keine Arbeitsfläche. Und `/posteingang` war die einzige der sieben Seiten mit `overflow: hidden` — alle anderen rollen als Dokument, zwischen 1027 und 2269 px hoch. JITTER MACHT ES AUCH SO. Sein „Drafts" ist gemessen 1198 px hoch bei 900 px Fenster und rollt als Dokument. Die Ausnahme war unsere, nicht seine. WAS SIE GEKOSTET HAT, gehört in denselben Vermerk: die Stelle in der Liste geht beim Lesen eines langen Gesprächs verloren, weil beide Spalten mit dem Dokument rollen. Das ist der Preis, er ist bekannt und er ist angesagt bezahlt worden. Wer ihn zurückholen will, braucht wieder eine feste Höhe — und damit wieder die 272,9 px. */ .posteingang__zeilen { margin: 0; padding: 0; list-style: none; /* 15 px, nicht 17 — Regel 03. Große Typografie kostet hier sichtbare Zeilen, und das bei 90 % der Nutzung. */ font-size: var(--groesse-klein); } /* =================================================================== DER TAKT DER LISTE IST LUFT, KEIN STRICH — 10.08.2026 =================================================================== Angesagt: „uebernimm von Jitter den TAKT — Zeilenhoehe, Abstaende, Gruppenueberschrift, Luecke zur rechten Spalte." GEMESSEN an `Drafts · Jitter.html` bei 1440 px: sein Eintrag ist 38 px hoch, sein Takt 40 px. Das sind **2 px Luft und kein Strich** — 5,26 % der Zeilenhoehe. UNSER TAKT WAR 108,1 BEI 108,1 PX ZEILE: null Luft, dafuer unter jeder Zeile eine Haarlinie. Zwei Bauarten, dieselbe Aufgabe, und die Vorlage macht es andersherum. DIE ZAHL TRAEGT NICHT, DAS VERHAELTNIS SCHON — und dazwischen liegt eine Entscheidung ueber den INHALT der Zeile, nicht ueber ihren Abstand. Die Vorsitzung hat sie vorgelegt und nicht getroffen: „5 px Weiss zwischen zwei mehrzeiligen Bloecken sind schlechter zu lesen als eine Haarlinie." Das stimmt fuer einen mehrzeiligen Block. Jitters Eintrag ist keiner — er traegt EINE Zeile, und deshalb genuegen ihm 2 px. ALSO TRAEGT UNSERE ZEILE AUCH EINE. `-webkit-line-clamp: 1` stand seit dem 05.08.2026 schon in der breiten Liste und ist jetzt der Normalfall. Was das kostet und bringt, NACHGEMESSEN und nicht vorhergesagt: Zeile Takt breite Liste 76 80 vorher 77 / 77 schmale Liste 83,4 87,4 vorher 108,1 / 108,1 Der zweite Punkt ist der eigentliche Gewinn. Bisher sprang der Takt der Liste um 31 px, sobald der Meister eine Nachricht anfasste — die Liste wurde schmal UND ihr Rhythmus ein anderer. Der Sprung der BREITE ist entschieden und bezahlt (siehe unten); ein zweiter Sprung im Takt war nie entschieden, er fiel nebenbei an. Jetzt sind es 7,4 px. ER IST NICHT NULL, und das ist kein Rest, sondern die Bauform: die breite Liste stellt Wer/Wann und Vorschau NEBENEINANDER (Raster `18rem` plus Rest), die schmale stellt sie uebereinander. Zwei Textzeilen sind hoeher als eine. Wer das auf null bringen will, muss die schmale Liste einzeilig machen — und dann steht die Uhrzeit neben einem auf vier Woerter gekuerzten Namen. Und die zwei Zeilen waren ohnehin keine zwei Saetze: in der schmalen Spalte brachen beide ab („Guten Tag Herr Brenner, wir / hatten letztes Jahr im Oktobe…"). Eine abgeschnittene Zeile ist eine Auskunft, zwei abgeschnittene Zeilen sind zwei. `--abstand-1` UND KEINE GERECHNETE ZAHL. Jitters 5,26 % waeren bei 77 px 4,1 und bei 80 px 4,2 — beides rundet auf die 4 px, die schon auf der Abstandsleiter stehen. Eine Zahl von der Leiter schlaegt eine gerechnete, die zufaellig danebenliegt. KEIN RADIUS. Jitters gewaehlter Eintrag hat gemessen Radius 0, und `--radius-navi` steht bei uns aus demselben Grund auf 0. Die Zeile ist eine Flaeche, die faerbt, wenn man sie anfasst — keine Kachel. */ .posteingang__zeilen { display: flex; flex-direction: column; gap: var(--abstand-1); } .posteingang__zeilen .zeile { /* `scroll-snap-align` IST AM 10.08.2026 GEFALLEN. Es gehoerte zum eigenen Bildlauf der Liste („oben steht immer eine GANZE Zeile"); seit die Liste mit dem Dokument rollt, gibt es keinen Rasterpunkt mehr, an dem es wirken koennte. Eine Regel, die nichts tut, sieht aus, als taete sie etwas. */ /* Der Strich faellt. Er war die Trennung, jetzt ist es die Luft. Zwei Traeger fuer dieselbe Aussage sind einer zu viel — und der Strich ist der, den die Vorlage nicht hat. */ border-bottom: 0; } /* EINE ZEILE VORSCHAU, IN BEIDEN ZUSTAENDEN. Die Mindesthoehe von zwei Zeilen faellt mit: sie hielt den Takt ruhig, solange der Text umbrechen konnte. Bei einer geklammerten Zeile haelt ihn die Zeile selbst. */ .posteingang__zeilen .zeile__text { -webkit-line-clamp: 1; min-height: 0; } /* =================================================================== DIE GRUPPENUEBERSCHRIFT DER LISTE — 10.08.2026 =================================================================== [gemessen] Jitters `_sectionHeader_127mq_72`: 13 px, Gewicht 600, `#6e6e73`, `padding: 7px 0 7px 23px`, Zeilenhoehe 24, Kasten 38. DIESELBEN VIER WERTE STEHEN SCHON AN `.leiste__ueberschrift` — dort gliedern sie Jitters Navigation, hier gliedern sie unsere Datenliste. Eine Vorlage, ein Satz Zahlen, dieselben Token. Wer einen davon aendert, aendert beide, und das ist richtig so. DER EINZUG IST DER EINZIGE UNTERSCHIED, und er folgt derselben Regel wie dort. Jitters 23 px sind ein Pixel weniger als der Einzug seines Eintrags, weil die Ueberschrift mit dem SYMBOL fluchtet und nicht mit dem Wort. Unser Symbol ist das Kanalzeichen, und das steht beim linken Polster der Zeile — `--abstand-5`, also 24 px. Die Regel ist uebernommen, die Zahl ist unsere. WAS DIE GRUPPE BEDEUTET, ist der Tag. Bei Jitter ist es ein Bereich der Anwendung; eine Datenliste braucht etwas, das sie wirklich teilt. Die Herleitung und die Zahlen stehen in `posteingang.ts` bei `tagName`. SIE SCHIEBT SICH NICHT UNTER DIE VORIGE GRUPPE. `position: sticky` lag nahe und ist verworfen: die Liste hat eine Ausblendkante unten und einen eigenen Bildlauf, und eine klebende Zeile darin haette drei Kanten uebereinander. Die Ueberschrift ist eine Marke im Fluss, kein Reiter. */ .posteingang__tag { margin: 0; padding: var(--polster-ueberschrift) 0 var(--polster-ueberschrift) var(--abstand-5); font-size: var(--groesse-mikro); font-weight: var(--schrift-halbfett); line-height: calc(var(--hoehe-eintrag) - var(--polster-ueberschrift) * 2); color: var(--farbe-text-gedaempft); /* Die erste Ueberschrift steht direkt unter der Chipzeile und braucht dort keine zusaetzliche Luft — der Abstand kommt aus dem `gap` der Liste, wie bei jeder Zeile. `scroll-snap-align` ist am 10.08.2026 mit dem eigenen Bildlauf der Liste gefallen. */ } /* Die Staffelung beim Aufbau endet nach acht Zeilen — Regel 12. Bei 500 Zeilen und 40 ms Versatz wären es zwanzig Sekunden. */ .zeile--gestaffelt { animation: zeile-herein var(--dauer-mittel) var(--kurve) backwards; animation-delay: calc(var(--staffel) * var(--staffel-versatz)); } @keyframes zeile-herein { from { opacity: 0; transform: translateY(4px); } } /* WEITERE LADEN. Die Liste lädt begrenzt statt virtualisiert - der Meister arbeitet den oberen Teil ab. Der Knopf steht als letzter Listeneintrag und scrollt mit; er schwebt nicht, sonst verdeckte er dauerhaft eine Zeile für einen Fall, der selten eintritt. */ .posteingang__mehr { display: flex; justify-content: center; padding: var(--abstand-3) var(--abstand-3) var(--abstand-5); } .posteingang__mehr .knopf { text-decoration: none; } /* =================================================================== DER GEFILTERTE LEERZUSTAND ROLLT IN SICH — 10.08.2026 =================================================================== `posteingang.ts` behauptet an dieser Stelle seit dem 02.08.2026: „Auch hier ein eigener Bildlauf statt starrer Höhe: die Tafel und der Satz zusammen können bei großer Schrift länger werden als der Inhaltsbereich, und dann soll gescrollt und nicht abgeschnitten werden." ES GAB ZU `.posteingang__leer` KEINE EINZIGE REGEL. Der Vermerk hat acht Tage lang einen Bildlauf beschrieben, den niemand gebaut hat — dieselbe Erscheinungsform wie bei der Ausblendkante der Chipzeile (05.08.2026) und bei den zwei Deckeln am Antwortfeld (10.08.2026). Was das gekostet hat, gemessen bei 1440 x 900 auf `?filter=k-yt,anfrage`: Listenspalte 270,9 px Leerzustand darin 434,1 px — 163 px zu viel Dokument 1039 px in einem 900-px-Fenster Und am Laptop trägt der Körper `overflow: hidden`. Der Knopf „Filter zurücksetzen" stand damit 139 px unter der Fensterkante, in einem Zustand, dessen EINZIGER Zweck es ist, diesen Knopf anzubieten. Der Meister filtert daneben und kommt nicht mehr heraus. Nebenbei stand auch der Seitentitel 103 px zu tief (y 240 statt 137): ein überlaufender Inhalt in einer Spalte fester Höhe schiebt sich nach oben aus ihr heraus. Das war das Sichtbare an einem Fehler, der unten stattfand. */ .posteingang__leer { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } /* FILTER TRIFFT NICHTS. Kein Leerbild: der Posteingang ist nicht leer, er ist nur gefiltert. Eine Zeichnung würde hier das Falsche behaupten. */ .posteingang__nichts { margin: 0; padding: var(--abstand-5) var(--abstand-4); text-align: center; color: var(--farbe-text-gedaempft); } /* --- Das Gespräch ------------------------------------------------- */ /* DER LESEBEREICH LIEGT AUF GRAU — 04.08.2026, angesagt: der Stil unserer Website, eins zu eins, auf allen Seiten, "mehr grosse graue Flaechen". Dies ist die groesste zusammenhaengende Flaeche im Produkt: bei 1440 px und ohne gewaehltes Gespraech misst sie rund 880 x 600 px und stand bis heute leer in Weiss. KEIN WRAPPER, SONDERN DIE FLAECHE SELBST. Ein `.abschnitt` mit Polsterung um diesen Bereich haette die Hoehenkette gebrochen - die Liste und das Gespraech scrollen in sich, und das haengt an `min-height: 0` durch die ganze Kette. Eine Farbe kostet die Kette nichts. GEMESSEN, WEIL ES KNAPP IST: --farbe-text-gedaempft haelt auf dieser Flaeche 4,50:1. Das ist die Auflage auf den Punkt und nicht darueber. Wer den Grauton dunkler macht, reisst sie - der Wert ist damit gebunden, nicht frei. Auf Weiss waren es 5,07:1. Die Paarung laeuft seit dem 03.08. auf /einstellungen und ist dort in 34 Messungen gruen. */ .gespraech { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--farbe-flaeche-gedaempft); /* 17 px — hier wird gelesen und geschrieben. */ font-size: var(--groesse-text); /* =================================================================== DAS GESPRÄCH IST SEIN EIGENER BEHÄLTER — 10.08.2026 =================================================================== Sein Kopf bricht auf zwei Zeilen um, wenn er zu eng wird. Bis heute hing das an der Breite der HÜLLE (39.999rem), und das war richtig, solange die Inhaltsspalte die Hülle minus 144 px war. Seit die Spalte portalweit auf Jitters Maß steht, stimmt es nicht mehr: bei 1440 px Fenster sind es 861 px Inhalt, davon 352 Liste und 32 Lücke — dem Gespräch bleiben 477. Die Hülle meldet 1440, der Kopf bekam also die einzeilige Form und brach mitten im Namen um („Familie / Hoffmeister") und schob „Löschen" auf eine zweite Reihe. Ein Umbruch, der an der Fensterbreite hängt, obwohl er von der Spaltenbreite abhängt, ist an der falschen Zahl festgemacht. Jetzt fragt er den Behälter, in dem er wirklich steht. */ container-type: inline-size; container-name: gespraech; } /* AM HANDY: über der Liste, nicht an ihrer Stelle. Die Liste bleibt im Dokument und behält ihren Bildlauf. Ohne Skript greift das trotzdem: dann ist `data-offen` schon vom Server gesetzt, weil der Verweis `?nachricht=` geladen wurde. */ /* =================================================================== DIE UEBERLAGERUNG HAENGT AM FENSTER, NICHT AM INHALTSBEREICH =================================================================== HIER STAND `position: absolute` mit dieser Begruendung: „nicht fix am Fenster. Fix hiess: auch hinter der Reiterleiste. Gemessen bei 390 px — das Antwortfeld endete 12 px darunter, das Gespraech 76 px." Die Begruendung war richtig und ist gegenstandslos: DIE REITERLEISTE IST AM 03.08.2026 GEFALLEN (siehe den Vermerk bei `.spalte__leiste`). Was blieb, war ihr Schatten — eine Regel, die vor etwas ausweicht, das es nicht mehr gibt. WAS SIE GEKOSTET HAT, gemessen bei 390 x 844: Bezugsrahmen der Ueberlagerung 4543 px (so hoch wie die LISTE) Gespraech daraufhin 4567 px Verlauf darin 4286 px Antwortfeld bei y 4650 px in einem 844-px-Fenster Das Antwortfeld ist „die meistgenutzte Flaeche im ganzen Produkt" (Regel 03) und stand damit 4,5 Bildschirmhoehen unter der Oberkante, hinter leerem Grau. Wer am Handy antworten wollte, musste erst an der ganzen Liste vorbeiscrollen, die er gerade verlassen hatte. `position: fixed` LOEST ES, und das ist gemessen und nicht gefolgert: `container-type: inline-size` an `.huelle` faengt es NICHT ein. Nach der Umstellung steht die Ueberlagerung bei y 0 mit 844 px Hoehe, und das Antwortfeld bei y 716 — im Bild. Der Verlauf darueber rollt in sich, der Kopf steht oben, der Kasten zum Schreiben unten: die Bauform jedes Nachrichtenprogramms, und der Grund, aus dem sie ueberall dieselbe ist. z-index 44 UND NICHT 40: 40 ist die Kopfzeile, und die ist `fixed` — bei Gleichstand entschiede die Reihenfolge im Markup, und das ist keine Entscheidung, sondern ein Zufall. 45 ist der Schleier der Schublade und 50 die Schublade selbst; beide gehoeren darueber, denn die Navigation ist der Weg aus dem Gespraech heraus. */ .posteingang[data-offen='ja'] .gespraech--offen { position: fixed; inset: 0; z-index: 44; } /* AM HANDY ZEIGT DIE RECHTE SPALTE NUR, WAS DER MEISTER GEWÄHLT HAT. Geändert am 02.08.2026: hier stand `.gespraech:not(.gespraech--offen)`, also „zeig sie, sobald etwas offen ist". Seit der Server IMMER die erste passende Nachricht vorwählt — damit rechts bei 1440 px keine 493.528 px² tote Fläche stehen —, ist „offen" nicht mehr dasselbe wie „gewählt". `data-offen` sagt genau das: nicht „es ist etwas offen", sondern „DER MEISTER hat etwas geöffnet". Am Handy hängt daran die Überlagerung, und eine Vorwahl darf sie nicht auslösen. */ .posteingang[data-offen='nein'] .gespraech { display: none; } .gespraech__kopf { flex: 0 0 auto; display: flex; align-items: center; gap: var(--abstand-3); padding: var(--abstand-3) var(--abstand-4); background: var(--farbe-flaeche); border-bottom: var(--randbreite) solid var(--farbe-rand); } /* =================================================================== AM SCHMALEN FENSTER TRAEGT DER KOPF ZWEI ZEILEN — 10.08.2026 =================================================================== Was eine Zeile braucht, ist gerechnet und nicht geschaetzt — jeder Posten ist die gemessene WUNSCHBREITE des Stuecks bei 390 px: Zurueck 48 Kanalzeichen 44 Wer 159,8 („Familie Hoffmeister" ueber dem Kanalnamen) Handlungen 287,5 (Erledigt 82 · Archivieren 109,7 · Loeschen 87,8) drei Luecken 36 Polster 32 ---------------------- zusammen 607,3 Unter 640 px passt das nicht mehr, und was dann geschah, stand im Bild und in keiner Zahl: gemessen war der Kopf 153 px hoch, der Absender auf 44,4 px Breite gequetscht und ueber 107,4 px Hoehe in vier Stuecke gebrochen — „Tobi / as / Renn / er". Die drei Handlungen stapelten sich untereinander, und das Etikett lag als Bruchstueck quer darueber. ZWEI ZEILEN STATT DREI. Oben, wer schreibt und woher — das ist die Auskunft, wegen der man aufschlaegt. Unten die drei Handlungen, rechtsbuendig, in einer Zeile: 287,5 von 318 verfuegbaren Pixeln. Die Etiketten haben den Kopf verlassen (siehe dort). `flex: 1 0 100%` UND NICHT `flex-wrap` ALLEIN. Ein Umbruch, der nur passiert, wenn es zu eng wird, ist ein Umbruch, der je nach Name passiert oder nicht — und ein Kopf, dessen Hoehe am Absender haengt, ist genau der schwankende Takt, den `.zeile__text` seit dem 02.08.2026 verhindert. Hier ist die zweite Zeile eine Entscheidung. DIE ZAHL IST DIE RECHNUNG SELBST — berichtigt am 10.08.2026. Hier stand `@container huelle (max-width: 39.999rem)`, also 640 px HUELLENbreite, mit der Begruendung „kein zweiter Wert dreissig Pixel neben dem Umbruchpunkt der Reiterleiste". Das war richtig gerechnet und an der falschen Groesse festgemacht: gefragt ist, wie breit das GESPRAECH ist, nicht das Fenster. Seit die Inhaltsspalte portalweit auf Jitters Mass steht, laufen die beiden auseinander. Bei 1440 px Fenster sind es 861 px Inhalt, davon 352 Liste und 32 Luecke — dem Gespraech bleiben 477. Die Huelle meldete 1440, der Kopf bekam die einzeilige Form, und im Bild stand „Familie / Hoffmeister" mit „Loeschen" auf einer zweiten Reihe. 560 px IST DIE SUMME VON OBEN, aufgerundet auf einen glatten Wert: 559,3 braucht eine Zeile, und was darunter liegt, braucht zwei. Die Zahl steht damit nicht neben der Rechnung, sie IST sie. Gerendert: 390 px Fenster gibt 390 px Gespraech (zwei Zeilen), 1440 gibt 477 (zwei Zeilen), 1920 gibt 918 (eine Zeile). */ @container gespraech (max-width: 560px) { .gespraech__kopf { flex-wrap: wrap; row-gap: var(--abstand-2); } .gespraech__handlungen { flex: 1 0 100%; } } /* Nur in der Werkstatt: die sechs Toene nebeneinander. */ .etikettenreihe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); } /* =================================================================== DIE ETIKETTEN STEHEN IM VERLAUF, NICHT IM KOPF — 10.08.2026 =================================================================== Sie haben in acht Tagen drei Orte gehabt, und jeder Umzug hatte einen gemessenen Grund: bis 31.07. in der LISTE, unter jeder Zeile — die Liste las sich als Wand. bis 02.08. im Kopf mit `flex-wrap: wrap` — der Kopf war bei 390 px 119,8 px hoch = 17,4 % der Lesehoehe (Referenzband 6,6 bis 12,7 %), und die Hoehe kam von der zweiten Zeile der Etiketten. bis 10.08. im Kopf als seitwaerts rollender Streifen. Das hat den Kopf am LAPTOP auf 72,4 px gebracht und am Handy nichts geloest: dort blieben ihnen gemessen 56,9 px von 150,6 gebrauchten, und was man sah, war das Bruchstueck „ung" quer ueber dem Absendernamen. Der Kopf hat bei 390 px 318 px Inhaltsbreite. Zurueck (48), Kanalzeichen (44) und Wer (159,8) sind 275,8 und passen; die drei Handlungen sind 287,5 und passen auf eine zweite Zeile. Die Etiketten passen auf keine von beiden. Eine dritte Zeile ist keine Antwort — mit ihr war der Kopf 153 px hoch. ALSO STEHEN SIE JETZT UEBER DER ERSTEN BLASE. Sie sagen, wofuer die KI diese Nachricht haelt; der Satz, an dem sie das festgemacht hat, steht darunter. Aussage und Beleg stehen uebereinander, und sie rollen zusammen weg, sobald der Meister liest. LINKSBUENDIG UND MIT UMBRUCH. Der Streifen mit eigenem Bildlauf war die Antwort auf einen engen Kopf; hier ist die ganze Breite da. Zwei Etiketten brauchen 150,6 px, der Verlauf ist bei 390 px 318 px breit. Ein Bildlauf, der nichts zu rollen hat, ist trotzdem einer. */ .gespraech__etiketten { display: flex; flex-wrap: wrap; gap: var(--abstand-2); min-width: 0; /* Der Verlauf ist eine Spalte mit `gap`; der Abstand nach unten kommt von dort. Ein eigener waere derselbe zweimal. */ margin: 0; } .gespraech__etiketten .etikett { flex: 0 0 auto; } .gespraech__zurueck { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; /* Handschuhmaß, wie die Reiter unten. */ width: 48px; height: 48px; margin-left: calc(var(--abstand-2) * -1); border-radius: var(--radius-rund); color: var(--farbe-text); touch-action: manipulation; } /* Ergänzt am 02.08.2026: das einzige Bedienelement des Kopfes hatte als einziges keinen Übergang und sprang. */ .gespraech__zurueck { transition: background-color var(--dauer-schnell) var(--kurve); } .gespraech__zurueck:is(:hover, .zeige-ueberfahren) { background: var(--farbe-flaeche-gedaempft); } .gespraech__zurueck:is(:active, .zeige-aktiv) { background: var(--farbe-rand); } .gespraech__wer { display: flex; flex-direction: column; min-width: 0; } .gespraech__absender { font-weight: var(--schrift-halbfett); overflow-wrap: anywhere; } .gespraech__kanal { font-size: var(--groesse-mikro); color: var(--farbe-text-gedaempft); } /* DER WARTEZUSTAND — 03.08.2026. Kein Leerzustand: links liegen Nachrichten, hier ist nur keine gewaehlt. Deshalb steht er ruhiger als ein `zustandsblock()` — Zeichen, Satz, Einordnung, kein Knopf. */ .gespraech__warten { margin: auto; display: flex; flex-direction: column; align-items: center; gap: var(--abstand-3); padding: var(--abstand-6); text-align: center; } /* Das Zeichen traegt nichts — es ist die Flaeche, die den Satz mittig haelt, statt ihn allein in 94 % Weiss stehen zu lassen. Deshalb leise und deshalb `aria-hidden` im Markup. */ /* DER KREIS IST WEISS, SEIT DIE FLAECHE GRAU IST — 04.08.2026. Hier stand `--farbe-flaeche-gedaempft`, also derselbe Ton wie der Lesebereich seit heute traegt. Der Kreis war damit weg: grau auf grau. Beim Blick auf die echte Seite aufgefallen, in keiner Zahl — eine Flaeche, die verschwindet, hat immer noch ihre Groesse, verschiebt nichts und wirft keinen Fehler. ER DREHT SICH UM, statt zu verschwinden: vorher der graue Kreis auf Weiss, jetzt der weisse auf Grau. Dasselbe Verhaeltnis, dieselben zwei Toene. */ .gespraech__warten-zeichen { display: grid; place-items: center; width: var(--zeichen-warten); height: var(--zeichen-warten); border-radius: var(--radius-rund); background: var(--farbe-flaeche); color: var(--farbe-zeichnung); } .gespraech__warten-zeichen svg { width: var(--zeichen-warten-innen); height: var(--zeichen-warten-innen); } .gespraech__nichts { margin: 0; color: var(--farbe-text); font-size: var(--groesse-huelle-gross); font-weight: var(--schrift-halbfett); text-align: center; } .gespraech__warten-satz { margin: 0; max-width: 34ch; color: var(--farbe-text-gedaempft); text-align: center; } .gespraech__verlauf { flex: 1 1 auto; min-height: 0; overflow-y: auto; /* DIE VORGABE GILT DEM HANDY — `contain` haelt einen Rollschritt am Rand des Verlaufs davon ab, die Seite DAHINTER mitzureissen, die hinter der `position: fixed`-Ueberlagerung des Gespraechs liegt (siehe den Vermerk oben an dieser Regel). Am Laptop nimmt der 60-rem-Behaelter das zurueck — dort ist die Begruendung falsch, und `contain` hat dort bis zum 14.08.2026 zwei gemeldete Funde verursacht, siehe die Gegenregel. */ overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--abstand-3); margin: 0; padding: var(--abstand-4); list-style: none; /* ================================================================== DIE AUSBLENDKANTE UNTEN IST WEG — 11.08.2026, angesagt ================================================================== „den gradient unten weg das unten nichts abgeschnitten ist von den Nachrichten" HIER STAND: mask-image: linear-gradient(to bottom, currentcolor calc(100% - var(--ausblendkante)), transparent) Und der Vermerk daneben war richtig — für die Bauart, für die er geschrieben wurde. Am 02.08.2026 stand der Verlauf OBEN und lief nach unten weiter; die Kante hieß dort „hier geht es weiter" und verhinderte, daß ein Satz ohne Ankündigung an einer 1-px-Linie abbricht. SEIT HEUTE ROLLT DER VERLAUF ANS ENDE, und damit hat sich der Grund gedreht: unten ist jetzt das ENDE des Gesprächs. Die Kante hat also genau die NEUESTE Blase verblaßt — die, um die es geht, und die, auf die die KI antwortet. Eine Ausblendung, die „es geht noch weiter" sagt, wo nichts mehr weitergeht, ist keine Ankündigung, sondern ein Fehler im Bild. KEINE KANTE NACH OBEN ALS ERSATZ. Sie wäre die logische Umkehrung und wurde nicht bestellt — und oben stößt der Verlauf an den Kopf mit Absender und Handlungen, nicht an eine Linie im Nichts. Da kündigt die Kachelkante selbst an, daß es weitergeht. */ /* KEIN `scroll-behavior: smooth`. HIER STAND ES, mit dem Vermerk „Der Verlauf springt ans Ende — Bewegung B4". Das hat es nie getan: `smooth` macht ein Rollen weich, es rollt nicht von selbst. Wieder ein Vermerk, der eine Regel beschreibt, die es nicht gibt — dieselbe Erscheinungsform wie die Ausblendkante der Chipzeile, die seit dem 02.08.2026 `none` gemessen hat. Was der Vermerk behauptet, tut seit dem 11.08.2026 `posteingang.js`. Und weich darf es dabei NICHT sein: beim Öffnen soll der Verlauf am Ende STEHEN, nicht sichtbar dorthin fahren. Deshalb rollt das Skript mit `behavior: 'instant'`, und diese Zeile ist weg statt überschrieben. */ /* ================================================================== DER VERLAUF STEHT IN EINER LESESPALTE — 10.08.2026 ================================================================== Gemessen bei 1920 px: die Gesprächsspalte ist 1246,7 px breit, die Blase darin 544. Bei einem eingehenden Gespräch sah das nach 703 px leerem Grau aus — und mit einer Antwort daneben ist es schlimmer, denn die steht rechts außen: zwei Leute, die über eine Schlucht von 700 px miteinander reden. `--gespraech-spalte` ist keine neue Entscheidung, sondern die Summe zweier alter: Blase (`--lese-breite`) plus die feste Gasse zwischen „von ihm" und „von uns" (`--abstand-6`). Dazu das eigene Polster, damit im Kasten wirklich 576 px Inhalt stehen und die Blase ihre vollen 544 bekommt. LINKSBÜNDIG UND NICHT MITTIG. Mittig sähe aufgeräumter aus und wäre falsch: die erste Blase stünde dann 335 px rechts von dem Namen im Kopf, der sie geschrieben hat. Das Produkt hat dafür eine Regel, und sie steht bei `.spalte` — „eine Kante, nicht drei". Der Absender im Kopf, seine Blase, die Etiketten darüber und das Antwortfeld darunter stehen auf derselben. */ max-width: calc(var(--gespraech-spalte) + var(--abstand-4) * 2); width: 100%; } .blase { /* SCHMALER — 31.07.2026, Anmutung. Gemessen: unsere Blase lief auf 81 % der Spalte (639 von 784 px), Laters auf rund 53 %. Bei 85 % ist eine Blase keine Blase mehr, sondern ein Absatz mit runden Ecken: das Auge sieht keine zwei Spalten, sondern einen Brief. Die Seite, auf der sie steht, ist dann der einzige Unterschied zwischen „von ihm" und „von uns" — und Seite allein ist ein schwacher Traeger. DER PROZENTSATZ IST WEG — 02.08.2026, und das ist der Kern dieses Kapitels. `58%` ist ein Anteil der Spalte und sagt nichts darüber, ob man den Text lesen kann. Gemessen: bei 390 px trug die Blase 207,6 px und damit **15,9 Zeichen je Zeile**. Zillow liegt bei rund 48, Intercom bei 57. Jetzt ist es eine Zahl, die zum Lesen taugt, minus eine feste Gasse: `--lese-breite` (544 px) am Laptop, sonst die volle Breite minus 32 px. Bei 390 px sind das 294 px = 34,1 Zeichen (+114 %), bei 1440 px 544 px = 59,6 Zeichen. Die Gasse bleibt FEST, weil sie genau eine Aufgabe hat: „von ihm" von „von uns" zu trennen. Dafür genügen 48 px. Ein Prozentsatz nähme am Handy 150 px — dort, wo am wenigsten Platz ist. */ max-width: min(var(--lese-breite), 100% - var(--abstand-6)); padding: var(--abstand-3) var(--abstand-4); border-radius: var(--radius-gross); background: var(--farbe-flaeche); border: var(--randbreite) solid var(--farbe-rand); } /* Was WIR geschrieben haben, steht rechts und trägt die Handlungsfarbe als Fläche — mit weißer Schrift. Nicht als Text auf getönter Fläche: das kann die Handlungsfarbe nicht, siehe die Regel in Bereich 11. */ .blase--wir { align-self: flex-end; background: var(--farbe-primaer); border-color: var(--farbe-primaer); color: var(--farbe-primaer-kontrast); } .blase__text { margin: 0; overflow-wrap: anywhere; /* KEINE SILBENTRENNUNG IN EINER NACHRICHT — 31.07.2026, Anmutung. `hyphens: auto` gilt seit Zeile 100 fuer die ganze Seite; in einer Sprechblase liest sich das wie ein Zeitungsspalte. Bei keiner der fuenf Referenzen wird in einer Nachricht getrennt. Dritter Ort mit demselben Fund nach der Kartenaufschrift in Bereich 18 und der Begruessung in Bereich 02 — die Voreinstellung ist offenbar fuer Fliesstext gedacht und passt nur dort. */ hyphens: manual; } /* 5,34:1 STATT 3,03:1 — geaendert am 02.08.2026. `--farbe-text-leise` hielt bei 13 px gegen die weisse Blase 3,03:1, und 13 px sind Fliesstextgroesse: dort gilt 4,5:1. Auf der eigenen Blase bleibt es weiss auf der Primaerfarbe und damit bei 4,72:1. */ .blase__zeit { display: block; margin-top: var(--abstand-1); font-size: var(--groesse-mikro); color: var(--farbe-text-gedaempft); } .blase--wir .blase__zeit { color: var(--farbe-primaer-kontrast); } /* --- Der Bestätigungsstreifen nach dem Senden --------------------- */ /* 320 px unten rechts, 16 px zu beiden Kanten. Die Breite ist gerechnet: „Antwort gesendet · Rückgängig" braucht bei 15 px rund 250 px Text, dazu Haken, Kreuz und Polster. Zillow setzt seinen Streifen auf 23,7 % der Inhaltsbreite (269 px bei 1136), Front auf 17,8 % (202 px) — wir liegen darüber, weil unser Text zwei Angaben trägt und nicht eine. ER VERSCHWINDET NICHT VON SELBST. Ohne Skript gibt es keine Standzeit, und eine erfundene wäre schlimmer als keine: der Meister sähe die Bestätigung je nach Lesegeschwindigkeit oder gar nicht. Er trägt ein Schließkreuz und geht beim nächsten Seitenaufbau. Die Referenz gibt hier ohnehin nichts her — in beiden Ablauf-Sätzen ist die Standzeit als Lücke vermerkt. Auf `--farbe-text` mit weißer Schrift: 13,2 : 1. Das ist die einzige dunkle Fläche im Produkt, und sie ist es genau dafür — eine Bestätigung muss sich vom Papier abheben, auf dem gearbeitet wird. */ .gesendet { position: absolute; right: var(--abstand-4); bottom: var(--abstand-4); z-index: 45; display: flex; align-items: center; gap: var(--abstand-3); width: min(20rem, calc(100% - var(--abstand-6))); box-sizing: border-box; padding: var(--abstand-3) var(--abstand-4); border-radius: var(--radius-standard); background: var(--farbe-text); color: var(--farbe-primaer-kontrast); font-size: var(--groesse-klein); box-shadow: var(--schatten-2); animation: tritt-ein var(--dauer-mittel) var(--kurve) backwards; } .gesendet__haken { display: inline-flex; flex: 0 0 auto; } .gesendet__wort { flex: 1 1 auto; min-width: 0; } .gesendet__zurueck, .gesendet__weg { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: var(--farbe-primaer-kontrast); font-weight: var(--schrift-halbfett); } .gesendet__weg { min-width: 44px; margin-right: calc(var(--abstand-2) * -1); border-radius: var(--radius-rund); } /* DIE NEUE BLASE KOMMT AN, sie ist nicht einfach da. Dasselbe Keyframe wie überall — Regel 12 nennt 200 ms für einen Zustandswechsel. */ .blase--neu { animation: tritt-ein var(--dauer-mittel) var(--kurve) backwards; } /* --- Das Antwortfeld ---------------------------------------------- */ /* Die meistgenutzte Fläche im ganzen Produkt. Volle Breite, EIN Knopf, keine Werkzeugleiste — Regel 03. */ /* `0 1 auto` UND EINE OBERGRENZE — 02.08.2026. Der Antwortbereich nahm bei 390 px gemessen 302,8 px = 43,9 % der Lesehoehe, waehrend der Verlauf darueber nur 267,4 px hatte: der Meister sah weniger von dem, was er beantwortet, als von dem Feld, in das er schreibt. Intercom haelt seinen Antwortkasten bei 14,2 % der Hoehe, Later bei 7,6 %, und bei beiden ist der Verlauf IMMER groesser als die Antwort. */ /* DER BILDLAUF IST AM 03.08.2026 AUS DEM KASTEN INS FELD GEWANDERT, und das war ein echter Fehler, kein Feinschliff. Gemeldet: „ich kann nicht runterscrollen, obwohl der Sendenknopf abgeschnitten ist." Nachgemessen bei 1440×760 lag der Knopf unter der Fensterkante — erreichbar nur mit der Tabulatortaste. URSACHE: `max-height: 40%` mit `overflow-y: auto` liess den Kasten sich SELBST abschneiden. Der Knopf steht unter dem Feld, also war er das erste, was verschwand — der Kasten versteckte seinen eigenen Absendeknopf, und zwar genau dann, wenn das Fenster knapp war. Die Obergrenze oben bleibt richtig und gilt weiter; sie gehoert nur an das FELD. Was scrollen soll, ist der Verlauf und der Text, den man schreibt — nie der Rahmen, in dem die Handlung sitzt. */ .antwort { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--abstand-2); padding: var(--abstand-3) var(--abstand-4); padding-bottom: calc(var(--abstand-3) + env(safe-area-inset-bottom, 0px)); background: var(--farbe-flaeche); border-top: var(--randbreite) solid var(--farbe-rand); } /* DIE HERKUNFTSZEILE. Klein, gedaempft, ueber dem Feld — bei Later steht dort „Replying as: @…" in derselben Groesse. Sie ersetzt einen ganzen Kasten mit zwei Knoepfen. */ .antwort__herkunft { display: flex; align-items: center; /* WAR `space-between` — 11.08.2026, im Bild gefunden. Solange die Zeile EIN Kind hatte, war das dasselbe wie `flex-start`: ein Element ganz links. Seit die Blätterverweise dazugekommen sind, sind es zwei — und dann drückt `space-between` „Älterer" bei 1920 px an die äußerste rechte Kante, 660 px vom Satz entfernt, zu dem er gehört. Zwei Angaben über dieselbe Sache stehen nebeneinander, nicht an zwei Enden der Kachel. Für den Ein-Kind-Fall ändert sich nichts. */ justify-content: flex-start; gap: var(--abstand-4); margin: 0; font-size: var(--groesse-mikro); color: var(--farbe-text-gedaempft); } /* Zwischen den GESPEICHERTEN Vorschlägen blättern. Zwei Verweise, weil das Lesen eines schon vorhandenen Vorschlags nichts kostet — einen NEUEN holen ist ein Knopf in der Zeile darüber und ruft das Modell. */ .antwort__blaettern { display: flex; gap: var(--abstand-3); } /* =================================================================== DIE KI-ZEILE — 11.08.2026 =================================================================== „aw mit ki formulieren etc und ann ließt ki den geasmten verlauf" ÜBER DEM FELD UND NICHT IM FUSS. Im Fuß stünden „Antwort vorschlagen", „Auf Termin einladen" und „Senden" in einer Zeile — Regel 09 läßt je Gruppe genau einen gefüllten Knopf zu, und zwei Umrisse plus ein Vollton sind keine Gruppe mehr, sondern eine Werkzeugleiste. Oben ist außerdem die Reihenfolge der Handlung: formulieren, lesen, senden. =================================================================== AM HANDY UNTEREINANDER UND GLEICH BREIT — 11.08.2026, angesagt =================================================================== „auf mobile soll beides bitte gleich sein und nicht so komisch verschoben" WAS ZU SEHEN WAR, bei 390 px gemessen: die Zeile hat 340 px innen, und `flex-wrap` legte den zweiten Knopf um. „KI" nimmt in der ersten Zeile 14 px plus Abstand, also begann Knopf A bei x=47 und Knopf B in der zweiten Zeile bei x=25 — 22 px gegeneinander versetzt. Dazu 163 gegen 152 px Breite. Zwei Knöpfe, die dasselbe tun, standen auf zwei Kanten in zwei Breiten. ZWEI SPALTEN WÄREN ZU KNAPP, und das ist gemessen und nicht geschätzt: 340 px minus 8 px Fuge sind 166 px je Spalte, und „Nochmal vorschlagen" braucht 163. Anderthalb Pixel Luft heißt, daß jede Schriftabweichung den Knopf zweizeilig macht — und dann ist die Zeile 40 px höher statt gleich. UNTEREINANDER KOSTET KEINEN PIXEL. Es waren schon zwei Zeilen (y=493 und y=541, also 40 px Knopf und 8 px Fuge). Volle Breite ändert daran nichts, nur daß beide Knöpfe dann wirklich gleich sind: eine Kante, eine Breite. DAS WORT KOMMT DAFÜR IN DIE ZEILE DARÜBER. In derselben Zeile wie der erste Knopf wäre der wieder eingerückt — genau der Versatz, um den es geht. Es kostet 18 px und sagt, wessen Vorschlag das ist; ohne es sagen das nur die Aufschriften, und die sagen es nicht. */ .antwort__ki { display: flex; flex-direction: column; align-items: stretch; gap: var(--abstand-2); /* Eine Flex-Spalte ist von sich aus `min-width: auto` und kann nicht unter ihren Inhalt schrumpfen. Derselbe Vermerk steht an `.gespraech__handlungen` und an `.zeile__mitte`. */ min-width: 0; } /* DAS WORT „KI" UND KEIN SYMBOL. Bereich 15 läßt genau vier Symbole allein einen Knopf tragen, und ein fünftes für „künstliche Intelligenz" gibt es nicht — es gäbe auch keines, das ein Meister ohne Erklärung liest. Zwei Buchstaben sagen, wessen Vorschlag das ist. */ .antwort__ki-wort { /* Nicht mitgestreckt: `align-items: stretch` an der Spalte machte aus zwei Buchstaben eine 340 px breite Zeile. Sichtbar ist das nicht, aber ein Element, das dreißigmal so breit ist wie sein Inhalt, ist eine Falle für jede spätere Regel, die daran ausrichtet. */ align-self: flex-start; font-size: var(--groesse-mikro); font-weight: 700; letter-spacing: 0.04em; color: var(--farbe-text-gedaempft); } /* Kleiner als ein Knopf im Fuß: diese zwei holen etwas, sie entscheiden nichts. Die Höhe folgt dem Navigationswort, damit die Zeile über dem Feld nicht höher wird als die Herkunftszeile daneben. */ .antwort__ki-knopf { min-height: var(--hoehe-navi-wort); padding-inline: var(--abstand-3); font-size: var(--groesse-mikro); } /* =================================================================== DIE ZWEI KI-KNOEPFE TRAGEN DIE HANDLUNGSFARBE — 18.08.2026, angesagt =================================================================== „KI-Antwort vorschlagen und auch Termin einladen, das sollte irgendwie vielleicht lila aussehen oder sowas, eine andere Farbe haben." LILA IST IM HAUS `--farbe-primaer`, die Handlungsfarbe. Sie steht schon auf der eigenen Sprechblase daneben — dieselbe Farbe fuer „das kommt von uns" und „das schreibt uns die KI vor" ist kein Zufall, sondern dieselbe Aussage. ALS RAND UND SCHRIFT, NICHT ALS FLAECHE. Der Vermerk oben nennt den Grund und er gilt unveraendert: „Kleiner als ein Knopf im Fuss: diese zwei holen etwas, sie entscheiden nichts." Zwei gefuellte lila Knoepfe ueber dem Antwortfeld waeren lauter als das Absenden darunter — und das Absenden ist die Handlung, um die es geht. `--farbe-primaer` HAELT 8,59:1 ALS SCHRIFT auf weisser Flaeche (gerechnet aus tokens.css, #481890 gegen #FFFFFF) und damit weit ueber den 4,5:1. Als Rand ueber den 3:1 aus WCAG 1.4.11 ohnehin. BEIM ANFASSEN FUELLT SICH DIE FLAECHE LEICHT, wie bei den drei Knoepfen in der Kopfzeile: die Farbe ist im Ruhezustand schon da, das Ueberfahren verstaerkt sie, statt eine neue einzufuehren. */ .antwort__ki-knopf.knopf--umriss { border-color: var(--farbe-primaer); color: var(--farbe-primaer); } /* OHNE `color` — von `zustandsmatrix.spec.ts` erzwungen, und zu Recht. Der erste Anlauf wiederholte hier `color: var(--farbe-primaer)`, also denselben Wert wie im Ruhezustand. „Kein Zustand fasst die Textfarbe an" hat das gemeldet: eine Deklaration, die nichts aendert, ist von einer, die etwas aendert, nicht zu unterscheiden — und beim naechsten Umbau haelt sie jemand fuer Absicht. Die Farbe steht im Ruhezustand und bleibt dort. */ .antwort__ki-knopf.knopf--umriss:is(:hover, .zeige-ueberfahren) { background: var(--farbe-primaer-hell-flaeche); border-color: var(--farbe-primaer); } /* =================================================================== AB 45rem BEHÄLTERBREITE: WIEDER EINE ZEILE =================================================================== Nicht 60rem, obwohl dort die zwei Spalten des Posteingangs beginnen: die KI-Zeile hängt nicht am Seitenraster, sondern an ihrem eigenen Platzbedarf. 163 plus 8 plus 152 px sind 323 — sobald die Kachel das innen hat, steht beides nebeneinander, und das ist am Tablet quer schon der Fall. Ein Umbruch, der erst bei 60rem aufgeht, hielte die Knöpfe 15rem länger untereinander als nötig. Der Behälter ist die Hülle und nicht die Kachel: das Gespräch trägt keinen eigenen `container-type`, und ihm einen zu geben, um EINE Zeile zu schalten, wäre ein zweiter Bezugsrahmen für dieselbe Seite. */ @container huelle (min-width: 45rem) { .antwort__ki { flex-direction: row; align-items: center; } /* Nach Inhalt und nicht gestreckt: am Laptop ist Platz, und ein Knopf, der breiter ist als sein Wort, sieht aus wie eine Fläche mit Aufschrift. */ .antwort__ki-knopf { flex: 0 0 auto; } } /* =================================================================== WENN DIE KI NICHTS GELIEFERT HAT =================================================================== EIN SATZ IM ANTWORTBEREICH UND KEINE FEHLERSEITE. Ein Modellaufruf scheitert im Betrieb regelmäßig — Zulauf, Zeitgrenze, abgeschaltet, Budget aufgebraucht. Jedes Mal steht ein Meister davor, der eine Antwort schreiben muß; ihn dafür auf eine Fehlerseite zu schicken hieße, seine Arbeit für unsere Panne zu unterbrechen. Die Nachricht bleibt offen, das Feld bleibt benutzbar, und der Satz sagt, ob ein zweiter Versuch Sinn hat. GEDÄMPFT UND NICHT ROT. Es ist keine Gefahr und kein Datenverlust, sondern eine ausgefallene Bequemlichkeit. Rot wäre die Farbe für „Löschen", und die trägt hier nichts. */ .antwort__kifehler { display: flex; align-items: center; gap: var(--abstand-2); margin: 0; padding: var(--abstand-2) var(--abstand-3); border-radius: var(--radius-klein); background: var(--farbe-flaeche-gedaempft); font-size: var(--groesse-mikro); color: var(--farbe-text-gedaempft); } /* DIE 44-PX-MINDESTHOEHE IST WEG — 02.08.2026. Sie stand hier, weil „Nochmal" ein Verweis IN der Herkunftszeile war; seit er ein Knopf neben „Senden" ist, traegt die Zeile nur noch Text und schrumpft von 44 auf 20,5 px. Das ist die Haelfte der 32 px, die der Antwortbereich insgesamt verliert. */ .antwort__feld { width: 100%; box-sizing: border-box; min-height: 48px; /* DER DECKEL IST AM 03.08.2026 HIERHER GEWANDERT — vom Bereich ans Feld, und der lange Vermerk darunter erklaert, warum er einmal den umgekehrten Weg ging. Beide Male ging es um dieselbe Frage: WER schneidet ab? Am Bereich schnitt der Deckel den KNOPF ab (Fund vom 03.08.2026: „Senden" lag unter der Fensterkante). Am Feld schnitt er einmal den TEXT ab — aber nur, weil dort eine feste Zeilenzahl stand und ein `