/* ============================================================ tokens.css - die einzige Datei mit Farb- und Schriftwerten. Alle Auswahl-Artefakte und index.html binden nur diese Datei ein. Aendert man hier einen Wert, aendert sich jedes Artefakt. FARBWELT: Set K - Employment Hero. Entschieden am 29.07.2026. Vorher stand hier Set A (Violett/Limette). Herkunft der Werte: [gemessen] pixelweise aus sechs echten Employment-Hero-Screens ausgezaehlt (siehe design-system/UEBERGABE.md, Abschnitt 2) [Set K] aus dem Set in daten.js -> FARBSETS -> set-k [abgeleitet] nicht im Set und nicht messbar; aus den gemessenen Werten hergeleitet, damit die Reihe vollstaendig ist GEGENPROBE: --farbe-primaer auf #000000 setzen und neu laden. Wenn irgendwo noch Violett steht, ist die Arbeit nicht fertig. Ausnahme mit Ansage: die Farbfelder in 11-farben-typo.html sind der Inhalt dieses Artefakts (die elf zur Wahl gestandenen Saetze) und stammen aus daten.js - sie sind Daten, nicht Gestaltung. ============================================================ */ :root { /* --- Farbe: Marke ------------------------------------------------ */ /* GEAENDERT AM 30.07.2026 auf Ansage: #481890 -> #665DF5. EIN Wert, keine zweite Abstufung. Gemessen: weisse Schrift darauf haelt 4,72:1 (vorher 11,61:1) und erfuellt damit die Auflage von 4,5:1 fuer Text. Der Spielraum ist aber von 7,1 auf 0,22 geschrumpft - jede Paarung, die vorher muehelos hielt, ist jetzt knapp. Was daran gerissen ist und was daraus folgt, steht in design-system/ABDECKUNG.md unter Bereich 11. */ /* JITTERS VIOLETT — angesagt am 03.08.2026, „komplett 1:1". ================================================================ Damit ist die Ansage vom 30.07.2026 („die Farbe #665DF5 bleibt eures", Ueberstimmung 5) aufgehoben. Der Auftraggeber hat es zweimal genannt und auf Rueckfrage bestaetigt. ES IST EIN GEWINN UND KEIN TAUSCH, gerechnet: Weiss auf #665DF5 4,72 : 1 Spielraum 0,22 ueber der Auflage Weiss auf #7A40ED 5,55 : 1 Spielraum 1,05 Der Spielraum, der am 30.07.2026 von 7,1 auf 0,22 geschrumpft war und seitdem jede Paarung knapp machte, ist wieder da. */ /* SCHWARZ WIE DIE WEBSITE — angesagt am 17.10.2026. ================================================================ „bitte mehr so wie die website und die farbe sollte das blau auf der website sein", auf Rueckfrage: im ganzen Portal, nicht nur auf der Anmeldung. Die Website fuehrt ihre Hauptknoepfe in Tinte (`--farbe-tinte` #19171c) und setzt ihr Markenblau #3fa9f5 als FLAECHE ein (Haken, Ziffern, Kacheln), nie als Knopf mit weisser Schrift — Weiss auf #3fa9f5 haelt 2,6:1. Genau so hier: die Primaerfarbe ist die Tinte, das Blau kommt ueber die Akzentfamilie darunter. Das ist die „Gegenprobe" aus dem Kopf dieser Datei, nur diesmal als Entscheidung. Lila steht danach an keiner Stelle mehr. Vorher: #7A40ED (Jitter). */ --farbe-primaer: #19171C; /* [Website] --farbe-tinte, Weiss darauf 17,79:1 */ /* NEU ABGELEITET am 30.07.2026, aus #665DF5. Gerechnet, nicht gewaehlt: werkzeuge/farbe-ableiten.mjs. Gleiche SCHRITTGROESSE wie vorher (1,29 Kontrast zur Primaerfarbe), aber Richtung nach UNTEN. Die alte Stufe war heller; das geht nicht mehr, weil zwischen der Primaerfarbe (4,72 gegen Weiss) und der Auflage (4,5) kein Platz fuer eine sichtbare Aufhellung bleibt. Abdunkeln erhoeht den Kontrast und ist nach oben offen. Weisse Schrift darauf: 6,10:1. */ /* JITTERS HOVER-STUFE: sie geht nach OBEN, und weisse Schrift darauf haelt nur 4,02 : 1. HIER STAND, DAS REICHE FUER DEN KNOPF, „das ist Grosstext, Auflage 3 : 1". BERICHTIGT AM 04.08.2026 — der Satz war an beiden Haelften falsch, und er hat den einzigen Einsatz gedeckt, den das Token hatte. Der Knopftext ist --groesse-text, also 17 px und nicht 18. Und Grosstext beginnt bei fetter Schrift erst ab 14 pt = 18,66 px; 18 px waeren also auch dann keiner gewesen, wenn die Zahl gestimmt haette. Die Auflage war durchgehend 4,5 : 1, und 4,02 hat sie nie gehalten. Zwei Zahlen in einem Satz, beide plausibel, beide falsch — und keine davon nachgerechnet, weil daneben „gemessen, nicht angenommen" stand. Ein Vermerk ueber eine Messung ist keine Messung. DAS TOKEN HAT DAMIT KEINEN LESER MEHR. Es bleibt stehen, weil es Jitters Stufe festhaelt und die Gegenprobe „Primaerfarbe auf Schwarz" auch fuer sie gelten soll. Wer es einsetzen will, rechnet vorher nach: als Textflaeche taugt es nur unter echtem Grosstext, und den gibt es im Produkt an keinem Knopf. Der Ueberfahren-Zustand des lila Knopfes laeuft seit dem 04.08.2026 ueber --farbe-primaer-tief. */ /* 17.10.2026: mit der Tinte als Primaerfarbe ist die hellere Stufe ein Grau statt eines Violetts. Weiss darauf 11,5:1 — sie traegt damit jetzt jede Schrift, auch die des Chip-Loeschknopfs. */ --farbe-primaer-hell: #3A3640; /* [abgeleitet] Weiss darauf 11,5:1 */ /* NEU ABGELEITET, gleiches Verhaeltnis zu Weiss wie vorher (1,22) — das ist es, was eine Tonung ausmacht. Text in --farbe-text darauf: 10,81:1. Der Kontrast zur Primaerfarbe faellt dabei von 9,51 auf 3,86; das ist kein Verlust, sondern die Folge der Regel unten: die Primaerfarbe steht auf dieser Flaeche ohnehin nicht mehr als Text. */ /* 17.10.2026: die beiden Tonungen sind jetzt die hellen Blaus der Website statt Jitters Violett (vorher #F2ECFD und #E4D9FB). */ --farbe-primaer-sehr-hell: #E6F3FF; /* [Website] --farbe-violett-blass, Text darauf 16,0:1 */ --farbe-primaer-hell-flaeche: #BFE3FF; /* [Website] --farbe-violett-pastell, Text darauf 13,4:1 */ --farbe-primaer-kontrast: #FFFFFF; /* [Set K] Flaeche */ /* [abgeleitet] Die tiefere Stufe fuer den Ueberfahren-Zustand des lila Knopfes. Sie ist GERECHNET und nicht gegriffen: `color-mix` mit Schwarz folgt der Primaerfarbe, wenn die sich aendert, und ueberlebt damit die Gegenprobe, die alle Farben auf Schwarz setzt. Eine feste Hexzahl waere ab dem naechsten Farbwechsel eine Luege. Weiss darauf: 7,04:1 (heller Grund 5,55:1, also besser als vorher). */ /* 17.10.2026: BEI SCHWARZ GEHT DIE STUFE NACH OBEN. Abdunkeln von #19171C waere unsichtbar. #2D2933 ist Jitters Ueberfahren-Ton des schwarzen Knopfs (siehe Suchfeld weiter unten) und die `--farbe-eingabe` der Website. Weiss darauf 14,1:1. */ --farbe-primaer-tief: #2D2933; /* KEINE SIGNALFARBE. --farbe-signal (#9C6CD8) und --farbe-signal-kontrast sind am 31.07.2026 GELOESCHT. Sie kamen aus Set K als Employment Heros leiser Akzent und sollten die Bewertungszahl tragen — gebaut ist die Zahl aber auf --farbe-primaer mit weisser Schrift: 72 px gegen 20 px groesste andere Schrift, gefuellt, 18,5-fache Flaeche des gefuellten Knopfes. Danach hatte das Token null Verwendungen in der Oberflaeche und stand nur noch in einer Verbotsliste. Wer hier eine Signalfarbe wieder einfuehren will, liest zuerst UEBERGABE.md Regel 11: die Primaerfarbe traegt weisse Schrift auf sich oder steht als Text auf reinem Weiss — auf getoenter Flaeche kann sie kein Text sein. Ein zweiter bunter Ton faellt unter dieselbe Regel. */ /* --- Farbe: Flaechen und Text ------------------------------------ */ /* JITTERS GRUND IST WEISS — die Listenbildschirme stehen auf #fff, nur die Einstellungen auf #f2f1f3 mit weissen Karten. Damit faellt der gedaempfte Grund als Vorgabe weg; wo er gebraucht wird, steht er als --farbe-flaeche-gedaempft. */ --farbe-hintergrund: #FFFFFF; /* [gemessen] Jitter */ --farbe-flaeche: #FFFFFF; /* [gemessen] */ --farbe-flaeche-gedaempft: #F2F1F3; /* [gemessen] Jitter, 53k px² */ --farbe-text: #19171C; /* [gemessen] Jitter, 272k px², auf Weiss 17,79:1 */ --farbe-text-gedaempft: #6E6E73; /* [gemessen] Jitter, 179k px², auf Weiss 5,07:1 */ /* GERECHNET, NICHT GEMESSEN — 14.08.2026, gefunden beim Abarbeiten der 69 vorbestehenden roten Messungen. `.reiter__eintrag` trug `--farbe-text-gedaempft` auf `--farbe-rand` (dem Trog-Grund seit dem 12.08.2026): 4,00:1 statt der noetigen 4,5, weil `--farbe-gedaempft` nur auf Weiss kalibriert ist (siehe seine eigene Zeile oben). `--farbe-text-leise` passt nicht — sie ist ausdruecklich fuer Zeichen reserviert, nicht Text (siehe ihre eigene Zeile unten). Kein Jitter-Beleg fuer diesen Ton: er ist ausgerechnet, hellster Grauton derselben Familie (R=G, B fuenf druber, wie die beiden Nachbartoene), der auf --farbe-rand noch deutlich haelt. */ --farbe-text-gedaempft-auf-rand: #5F5F64; /* [gerechnet] 5,01:1 auf --farbe-rand, 6,35:1 auf Weiss */ /* NACHGERECHNET AM 01.08.2026, und der alte Wert war nicht haltbar. Hier stand #949494. Gemessen: 3,03:1 gegen Weiss und 2,86:1 gegen den Grund — Regel 11 verlangt 4,5:1 fuer Fliesstext, und fuenf der sechs Verwendungen sind Text in --groesse-mikro (13 px). Die sechste ist ein Trennzeichen in --groesse-h3 und faellt unter die 3:1 fuer grosse Schrift; sie hielt als Einzige. GEFUNDEN VON EINER NEUEN MESSUNG, nicht im Bild: tests/messungen/ lesbarkeit.spec.ts laeuft ueber JEDES Element jeder Seite und rechnet Schrift gegen die Flaeche darunter. Regel 11 verlangt genau das — „ueber jedes Element der Seite, nicht ueber eine Liste von Bausteinen". Es gab sie bis heute nicht. DER NEUE WERT IST DER HELLSTE, DER HAELT. Ausgerechnet, nicht gewaehlt: #727272 kommt auf 4,53:1 gegen den Grund, #737373 nur noch auf 4,46 und reisst. Gegen Weiss sind es 4,81:1. Damit bleibt der Ton so leise wie ueberhaupt moeglich und ist trotzdem lesbar — das ist der Sinn des Namens. Er bleibt deutlich heller als --farbe-text-gedaempft (#6B6B6B, 5,02 gegen den Grund), die beiden sind also weiter zwei Toene und nicht zwei Namen fuer einen. */ /* NUR FUER ZEICHEN, NICHT FUER TEXT — die erste der zwei benannten Abweichungen von „1:1". Jitters #97979B haelt gegen Weiss 2,91 : 1; die Auflage fuer Fliesstext ist 4,5. Bei Jitter traegt dieser Ton die SYMBOLE im leisen Block und keinen Fliesstext — wir uebernehmen ihn mit derselben Einschraenkung. Wo bei uns Text darauf steht, gilt --farbe-text-gedaempft (5,07). */ --farbe-text-leise: #97979B; /* [gemessen] Jitter, 2,91:1 — Zeichen, kein Text */ --farbe-rand: #E5E4E7; /* [gemessen] Jitter, 23k px² */ --farbe-rand-stark: #CFCFCF; /* [abgeleitet] */ /* --- Farbe: Zustaende -------------------------------------------- */ --farbe-erfolg: #127A4B; /* [Set K] abgeleitet, EH gibt dafuer zu wenig her */ --farbe-erfolg-hell: #E4F3EC; /* [abgeleitet] */ --farbe-warnung: #B5710A; /* [Set K] abgeleitet */ --farbe-warnung-hell: #FAF0DE; /* [abgeleitet] */ --farbe-fehler: #C62828; /* [Set K] abgeleitet */ --farbe-fehler-hell: #FBEAEA; /* [abgeleitet] */ /* =================================================================== DIE VERTRETUNG HAT EINE EIGENE FARBE — 17.08.2026 =================================================================== WARUM NICHT `--farbe-warnung`, obwohl der Ton stimmt: #B5710A traegt Weiss mit 3,94:1. Das reicht nach WCAG 1.4.3 nur fuer grossen oder fetten Text (3:1) und nicht fuer gewoehnlichen (4,5:1) — der Streifen stuende und faellt mit einer Schriftgroesse, die jemand spaeter aendert. Eine Farbe, deren Zulaessigkeit an einer anderen Deklaration haengt, ist die Art Falle, die dieses Haus schon zweimal bezahlt hat. WARUM NICHT `--farbe-fehler`: eine laufende Vertretung ist KEIN Fehler. Sie ist ein Zustand, den jemand mit Absicht hergestellt hat und der auffallen muss. Rot dafuer zu nehmen macht Rot beliebig. ALSO DERSELBE FARBTON WIE DIE WARNUNG, ABGEDUNKELT bis der Kontrast unabhaengig von der Schriftgroesse traegt: #B5710A gegen Weiss 3,94:1 reicht nur ab Schriftgewicht 700 #7A4B06 gegen Weiss 7,40:1 traegt jede Groesse, mit Reserve WER DEN TON AENDERN WILL, aendert ihn hier und rechnet den Kontrast nach. Unter 4,5:1 darf er nicht fallen, solange der Streifen gewoehnlichen Text traegt. */ --farbe-vertretung: #7A4B06; /* [abgeleitet] aus --farbe-warnung, auf 7,40:1 abgedunkelt */ /* Hinweisflaeche bei Employment Hero, gemessen mit 14.090 Bildpunkten. In diesem Token-Satz gibt es dafuer noch keine Rolle - der Wert steht hier, damit er beim Bau nicht neu erfunden wird: #CCF0FC */ /* --- Farbe: die Akzentfamilie der Website ------------------------- */ /* ANGESAGT AM 04.08.2026: „Das ist wirklich der Stil eins zu eins uebernommen auf allen, auf Posteingang, Inbox etc. Die Kaesten koennen auch wie auf der Webseite ab und zu leicht unterschiedliche Farben haben, auch Text-Highlights." WAS DABEI HERAUSKAM, ALS ICH NACHGESEHEN HABE: die Grundfarben sind schon dieselben. `--farbe-primaer` steht auf #7A40ED — das ist `--farbe-violett-link` der Website. `--farbe-flaeche-gedaempft` #F2F1F3 ist ihr `--farbe-flaeche`, `--farbe-text` #19171C ihre `--farbe-tinte`, `--farbe-rand` #E5E4E7 ihre `--farbe-linie`. Das ist kein Zufall: beide sind an derselben Vorlage gemessen. WAS FEHLTE, IST DIE AKZENTFAMILIE. Die Website faerbt ihre Kaesten nicht mit einer Farbe, sondern mit einem halben Dutzend — und immer als FLAECHE mit dunklem Text darauf, nie als farbige Schrift. Genau deshalb traegt jede dieser Farben hier ihren Kontrast GEGEN TINTE und nicht gegen Weiss. GERECHNET, NICHT GESCHAETZT: werkzeuge/kontrast-rechnen.mjs, alle vierzehn Paarungen am 04.08.2026. Der schlechteste Wert der ganzen Familie ist 6,16:1 und liegt damit ueber der Auflage fuer Fliesstext. Umgekehrt haelt KEINE von ihnen weissen Text: der beste Wert gegen Weiss ist 2,89:1. Wer hier Weiss daraufsetzt, reisst die Auflage — und das ist der Grund, warum die Vorlage es nirgends tut. Die Werte sind aus oeffentlich der Website entnommen (EB-Software-Website/stile/tokens.css), nicht nachempfunden. */ /* NACHGEZOGEN AM 17.10.2026 auf den HEUTIGEN Stand der Website. Sie hat am 21.09.2026 Lila und Neongelb durch Hellblau ersetzt und dabei die Namen behalten (`--farbe-violett-*`, `--farbe-gelb-*`); das Portal hing seitdem auf dem alten Stand. Gleiche Namen, gleiche Bedeutung, Werte von dort — also weiterhin entnommen, nicht nachempfunden. „Violett" und „Gelb" sind seitdem Namen, keine Farben. Vorher: #B593FF, #A981FF, #F2ECFD, #F5FF63, #FBFFD9, #E8F27A. */ --farbe-akzent-violett: #7CC4FF; /* [Website] --farbe-violett, Tinte darauf 9,4:1 */ --farbe-akzent-violett-kraeftig: #3FA9F5; /* [Website] --farbe-violett-kraeftig = Markenblau, Tinte darauf 7,6:1 */ --farbe-akzent-violett-blass: #E6F3FF; /* [Website] --farbe-violett-blass, Tinte darauf 16,0:1 — gleich --farbe-primaer-sehr-hell */ --farbe-akzent-gelb: #D8ECFD; /* [Website] --farbe-gelb, Tinte darauf 14,9:1 */ --farbe-akzent-gelb-blass: #EFF7FF; /* [Website] --farbe-gelb-blass, Tinte darauf 16,7:1 */ --farbe-akzent-gelb-linie: #9FD1F6; /* [Website] --farbe-gelb-linie, Tinte darauf 10,7:1 */ --farbe-akzent-blau: #50B8FF; /* [Website] Tinte darauf 8,17:1 */ --farbe-akzent-cyan-blass: #E6F4FF; /* [Website] Tinte darauf 15,88:1 */ /* HIER STAND `--farbe-akzent-rot: #DA0000`, gemessen an Jitters Kundenseite und einen Tag lang die Fuellung der Boost-Kachel. Es ist am 07.08.2026 gefallen, angesagt zum zweiten Mal: „Rot und Orange fliegen raus, diese beiden Toene gibt es auf der Website nicht." NACHGESEHEN, und die Begruendung stimmt nur zur Haelfte — der Befund gehoert trotzdem hierhin, weil er die naechste Frage vorwegnimmt. `EB-Software-Website/stile/tokens.css` hat kein Rot ausser ihrem Fehlerton; fuer ROT ist die Ansage also gemessen richtig. Sie hat aber sehr wohl ein `--farbe-orange`, und das steht an vier Regeln, von denen drei im Markup wirklich vorkommen (Kachel auf `referenzen.html`, Posteingangsmarke auf `index.html` und `demo.html`). Die Ansage ist deshalb keine Tatsachenfeststellung ueber die Website, sondern eine Entscheidung ueber unser Produkt — und als solche steht sie. WAS DER TON GEKOSTET HAT UND WAS ER GEBRACHT HAT, in einer Zahl: mit Orange und Rot standen die sieben Objektfarben 0,366 auseinander (engster Abstand bei Rot-Gruen-Schwaeche), ohne sie 0,196. Der Satz verliert also knapp die Haelfte seiner Trennschaerfe. Er behaelt sie dort, wo sie zaehlt: die Auflage „gleicher Ton, dann trennt nur die Helligkeit" steigt von 1,94:1 auf 2,30:1. Was faellt, ist die Trennung ZWISCHEN Familien; was steigt, ist die Trennung INNERHALB. Auf den Bentokacheln ist das zweite das, was man sieht. `--farbe-akzent-orange` bleibt stehen, weil sie noch zwei Leser hat (`.vorschau--orange` und ihre Fotoflaechen-Fassung) — sechs Platzhaltertoene fuer Beitragsvorschauen, nicht Objektfarben. Wer auch die auf die neue Palette stellen will, sagt es; ich habe es nicht mitgezogen, weil die Ansage die Kacheln und die Linien nennt. */ /* ZWEI DUNKLE TOENE, DAZUGEKOMMEN AM 07.08.2026, beide aus `EB-Software-Website/stile/tokens.css` und keiner erfunden: `--farbe-akzent-tief` ist ihre `--farbe-tief` — der Ton, mit dem die Website ihre dunklen Abschnitte fuellt. Er ist der einzige nahezu schwarze Wert der Palette mit Farbe darin (265 Grad, also im Violett) und damit der einzige, der neben der Markenfarbe steht, ohne mit ihr verwechselt zu werden: 3,44:1 auseinander. `--farbe-akzent-gelb-tief` ist ihre `--farbe-gelb-tief`. Sie fuehrt ihn dort im Verlauf `--verlauf-gelb-zahl` zusammen mit `--farbe-gelb-tiefer`. Er ist das DUNKLE ENDE der Gelbfamilie, so wie die Markenfarbe das dunkle Ende der Violettfamilie ist — damit bekommt die dritte Familie ihr Paar, und der Satz der sieben besteht aus drei Paaren und einem Einzelnen statt aus zwei Paaren und drei Einzelnen. */ /* 17.10.2026: TINTE STATT DES VIOLETTEN TIEFS. #17082C liegt bei 265 Grad und stand auf der Media-Day-Kachel als dunkles Lila — „Lila verschwindet ueberall". Seit die Primaerfarbe die Tinte ist und das Quartalsziel das Markenblau traegt, steht Tinte hier neben nichts Gleichem. */ --farbe-akzent-tief: #19171C; /* [Website] --farbe-tinte, Weiss darauf 17,79:1 */ /* 17.10.2026: das dunkle Ende der „Gelb"-Familie ist auf der Website jetzt `--farbe-gelb-tiefer` #073a76 (vorher hier #5C6A00, Oliv). Nicht `--farbe-gelb-tief` #0b63c4: das ist der „andere Blauton", den Lennard auf der Website als Marke nicht wollte (Runde 20). */ --farbe-akzent-gelb-tief: #073A76; /* [Website] --farbe-gelb-tiefer, Weiss darauf 11,0:1 */ /* ZWEI TOENE FUER DIE SIEBEN OBJEKTFARBEN, 06.08.2026 — beide aus der Vorlage, keiner erfunden. `--farbe-akzent-violett-hell` ist `--farbe-violett-hell` der Website und zugleich das HELLE ENDE des Verlaufs, den Jitter auf seiner Kundenseite fuehrt (`#a981ff` -> `#d0bafe`). Die beiden gehoeren also GEMESSEN zusammen und nicht, weil ich sie nebeneinandergelegt habe — das ist der Grund, warum der Chip auf der hellen Kachel den kraeftigen Ton traegt. `--farbe-akzent-blau-tief` ist Jitters Kundenseite, Kachel 3 (Verlauf `#000e65` -> `#072982`; genommen ist das hellere Ende, weil das dunklere schon fast schwarz ist). */ --farbe-akzent-violett-hell: #A8DCFF; /* [Website] --farbe-violett-hell (17.10.2026, vorher #D0BAFE), Tinte darauf 11,9:1 */ --farbe-akzent-blau-tief: #072982; /* [gemessen] Jitters Kundenseite, Weiss darauf 12,74:1 */ /* =================================================================== DIE SIEBEN OBJEKTFARBEN — beschlossen am 06.08.2026 =================================================================== „Die sieben Objekte bekommen feste Farben. Gilt produktweit, nicht nur auf der Uebersicht. Damit tragen die vier Kacheln verschiedene Farben, und die Farbe bedeutet etwas, statt zu dekorieren." HIER WIRD NICHT GERECHNET, UND DAS IST EIN BEFUND. Bei den vier LINIEN musste gerechnet werden, weil eine Linie 3:1 gegen Weiss braucht und die Palette dafuer keinen Vierersatz hergibt. Eine FLAECHE traegt Schrift, und die Auflage gilt der Schrift: mit der Regel „dunkle Fuellungen tragen Weiss, helle tragen Tinte" halten die Toene der Website UNVERAENDERT — der schlechteste der sieben ist seit dem 07.08.2026 das Quartalsziel mit 5,55:1 und liegt ueber den 4,5, die Fliesstext braucht. Die Ansage lautete „Helligkeit gerechnet wie in Punkt 2"; gerechnet wurde, und herausgekommen ist, dass es nicht noetig ist. WAS STATTDESSEN KNAPP WIRD, ist die Unterscheidbarkeit UNTEREINANDER. Die Vorlage hat nur drei Tonfamilien, seit Rot und Orange gefallen sind, und die Haelfte ihrer Werte liegt im Blau-Violett. ZU DEN ZAHLEN, DAMIT SIE NIEMAND FALSCH VERGLEICHT: hier stand am 06.08.2026 „der Satz kommt auf 0,256, die vier Linienfarben auf 0,216". Diese beiden Zahlen sind mit einem anderen Skript gerechnet als die Zahlen von heute; dasselbe Paar kommt bei mir auf 0,366 und 0,296, also gleichmaessig rund 1,4-mal so gross. Die Rangfolge ist dieselbe, der Massstab nicht. Wer vergleicht, vergleicht deshalb nur Zahlen AUS EINEM LAUF — alle Zahlen unter dem Datum 07.08.2026 sind aus einem. DIE ORDNUNG, NEU GEZOGEN AM 07.08.2026 — drei Paare und ein Einzelner statt zwei Paaren und drei Einzelnen: Blau was hereinkommt Nachricht hell · Kanal dunkel Violett was wir machen Beitrag hell · Quartalsziel dunkel Gelb was ordnet und was kostet Boost hell · Tag dunkel Tinte das Ereignis Media Day INNERHALB DER GELBFAMILIE GETAUSCHT AM 08.08.2026, angesagt: das Olivgrün gefiel auf der grossen Bentokachel nicht. Getauscht wurde und kein neuer Ton gesucht — die Ordnung bleibt damit unangetastet, und beide Werte behalten einen Leser. ES IST AUCH DER SINNVOLLERE WEG HERUM, unabhängig vom Gefallen: Boost trägt eine ganze Bentokachel, Tag nur den Begriff Etikett (Filterüberschrift, Zeichen). Der leuchtende Ton gehört auf die grosse Fläche, der tiefe auf die kleine — umgekehrt leuchtet ein Neongelb auf Briefmarkengrösse gegen nichts an, und ein Olivgrün über 650 x 425 px ist ein Olivgrün über 650 x 425 px. SIE IST DIE FOLGE DAVON, DASS ORANGE UND ROT GEHEN, und sie ist besser als die alte. Vorher trugen die drei Einzelnen drei Toene, die miteinander nichts zu tun hatten; jetzt sagt die FAMILIE, worum es geht, und die HELLIGKEIT, ob es ankommt oder ausgeht. Boost ist das dunkle Gelb, weil Boost der Tag ist, den man bezahlt — dieselbe Familie, andere Tiefe. Media Day bleibt allein, und das ist richtig: er ist das einzige der sieben, das ein Termin ist und kein Ding. GERECHNET, ALS ICH SIE GEZOGEN HABE — vollstaendige Suche ueber die 15 Toene der Website ohne Rot und Orange, 2002 Siebenersaetze, zwei Masse nebeneinander: engster Abstand bei Rot-Gruen-Schwaeche engster Kontrast, wo der Tonabstand unter 40 Grad liegt Das zweite Mass ist neu und es ist das wichtigere. Der Abstand allein waehlt gern zwei helle Violetts nebeneinander — er sieht sie als verschieden, das Auge nicht. Der beste Satz nach Abstand allein (0,245) stellt `--farbe-akzent-violett-pille` neben `--farbe-akzent-violett-hell`: 1,56:1, zwei blasse Violetts, die auf derselben Bentozeile stehen. Der Satz hier kommt auf 0,196 und auf 2,30:1, und er ist der, den man auseinanderhaelt. ALLE 68 SAETZE, DIE 1,8:1 HALTEN, ENTHALTEN `--farbe-akzent-blau-tief`. Das ist kein Zufall und es beantwortet die Frage, ob dieser eine Ton (Jitters Kundenseite, nicht die Website) bleiben darf: die Website hat kein dunkles Blau, und ohne ein dunkles Blau gibt es keinen Siebenersatz, der die Auflage haelt. Er bleibt. DREI DER SIEBEN HABEN NOCH KEINEN LESER (Nachricht, Kanal, Tag). Das ist NICHT der Fall, vor dem der Satz „ein Token ohne Leser ist keine Entscheidung mehr" warnt — dort war die Verwendung gefallen und der Wert stehengeblieben. Hier ist die Entscheidung getroffen und die Verwendung steht aus: Nachricht gehoert an den Posteingang, Kanal an die Kanalkacheln, Tag an die Etiketten. Wer dort als naechstes arbeitet, findet die Farbe schon vor, statt sie neu zu entscheiden. */ --farbe-objekt-nachricht: var(--farbe-akzent-blau); --farbe-objekt-nachricht-schrift: var(--farbe-text); --farbe-objekt-kanal: var(--farbe-akzent-blau-tief); --farbe-objekt-kanal-schrift: var(--farbe-flaeche); --farbe-objekt-beitrag: var(--farbe-akzent-violett-hell); --farbe-objekt-beitrag-schrift: var(--farbe-text); /* 17.10.2026: DAS QUARTALSZIEL TRAEGT DAS MARKENBLAU. Es hing an der Primaerfarbe; seit die Tinte ist, stuende es fast schwarz neben dem Media Day (#17082C). Weisse Schrift reisst auf #3FA9F5 (2,6:1), also Tinte — und der Chip bleibt weiss. */ --farbe-objekt-quartalsziel: var(--farbe-akzent-violett-kraeftig); --farbe-objekt-quartalsziel-schrift: var(--farbe-text); --farbe-objekt-media-day: var(--farbe-akzent-tief); --farbe-objekt-media-day-schrift: var(--farbe-flaeche); --farbe-objekt-boost: var(--farbe-akzent-gelb); --farbe-objekt-boost-schrift: var(--farbe-text); --farbe-objekt-tag: var(--farbe-akzent-gelb-tief); --farbe-objekt-tag-schrift: var(--farbe-flaeche); /* DER CHIP AUF DER KACHEL — die zweite Fuellung, wie in der Vorlage. [gemessen] Jitter faerbt den Chip in der JEWEILS ANDEREN der beiden Kachelfarben: auf der kraeftigen weiss, auf der blassen violett. Genau das ist hier verallgemeinert. ZWEI DER VIER TRAGEN WEISS, weil ihre Kachel dunkel genug ist: Media Day 18,96:1 und Quartalsziel 5,55:1. Am 07.08.2026 waren es noch drei; Boost ist am 08.08.2026 ausgeschieden, weil seine Kachel mit dem Tausch innerhalb der Gelbfamilie von #5C6A00 auf das Neongelb gewechselt ist. Weiss haelt darauf 1,08:1 — ein Chip, den es nicht mehr gibt. BOOST BEKOMMT DESHALB DAS DUNKLE ENDE SEINER EIGENEN FAMILIE, und das ist genau die Regel der Vorlage („die jeweils andere der beiden Kachelfarben") und dieselbe Loesung wie beim Beitrag, nur andersherum: dort ist die Kachel das helle Ende eines Verlaufs und der Chip das kraeftige, hier ist die Kachel das leuchtende Gelb und der Chip das tiefe. Der Chip haelt 5,50:1 gegen seine Kachel. UND ER IST DER ERSTE CHIP, DER NICHT TINTE TRAEGT. Tinte auf #5C6A00 haelt 2,98:1 und reisst die 4,5 fuer Fliesstext; Weiss haelt 5,97:1. Deshalb steht darunter eine eigene Schriftfarbe — die einzige Ausnahme von „der Chip traegt immer Tinte", und sie hat eine Zahl. Der Beitrag nicht — weiss auf seinem hellen Violett haelt 1,34:1, und ein Chip, den man nicht sieht, ist kein Chip. Er bekommt deshalb das KRAEFTIGE Ende desselben Verlaufs (1,74:1 auf seiner Kachel; Jitters eigenes Paar aus blasser Kachel und violettem Chip liegt bei 1,98:1). ES SIND SEIT DEM 11.08.2026 SECHS. Hier stand „NUR VIER, und das ist Absicht: Chips gibt es heute nur auf den Bentokacheln, und dort stehen genau diese vier Objekte. Wer dem fuenften einen Chip gibt, rechnet dessen zweite Fuellung dann — Nachricht und Tag brauchen dafuer einen DUNKLEN Chip, weiss haelt auf ihnen 2,18:1 und 1,08:1." Genau dieser Fall ist eingetreten: der neu gebaute Posteingang traegt zwei Bentokacheln, Nachricht und Kanal. Im Bild bei 390 px stand der Chip „Meiste auf" als Tinte auf dem dunklen Blau — ohne Fuellung, weil es fuer diese zwei keine gab, und damit praktisch unlesbar. GERECHNET, NICHT GEGRIFFEN, und nach derselben Regel der Vorlage wie die vier anderen („die jeweils andere der beiden Kachelfarben"). Das BLAUPAAR ist Nachricht hell (#50B8FF) und Kanal dunkel (#072982), also tauschen sie: Kanal-Kachel #072982, Chip #50B8FF Chip gegen Kachel 5,85:1 Tinte auf Chip 8,17:1 Nachricht-Kachel #50B8FF, Chip #072982 Chip gegen Kachel 5,85:1 Weiss auf Chip 12,74:1 Alle vier ueber ihrer Auflage (4,5 fuer Schrift, 3 fuer die Kante). Der Nachrichten-Chip ist damit der ZWEITE, der nicht Tinte traegt — der erste war Boost, aus demselben Grund. TAG HAT WEITER KEINEN CHIP, und das bleibt so: seine Kachel ist am 11.08.2026 aus dem Posteingang gefallen, weil ein Olivgruen ueber die halbe Seite genau das ist, was der Tausch vom 08.08.2026 vermeiden sollte. Wer sie zurueckholt, rechnet seine Fuellung dann. */ --farbe-objekt-nachricht-chip: var(--farbe-akzent-blau-tief); --farbe-objekt-nachricht-chip-schrift: var(--farbe-flaeche); --farbe-objekt-kanal-chip: var(--farbe-akzent-blau); --farbe-objekt-beitrag-chip: var(--farbe-akzent-violett-kraeftig); --farbe-objekt-quartalsziel-chip: var(--farbe-flaeche); --farbe-objekt-media-day-chip: var(--farbe-flaeche); --farbe-objekt-boost-chip: var(--farbe-akzent-gelb-tief); --farbe-objekt-boost-chip-schrift: var(--farbe-flaeche); /* HIER STAND `--farbe-flaeche-karte-grau: #F3F3F5`, die zweite Graustufe der Vorlage — und der Token ist am selben Tag wieder gefallen, an dem er entstand. Ausprobiert fuer Karten auf grauem Grund: auf #F2F1F3 ist er einen Zahlenwert je Kanal entfernt und damit unsichtbar. Die Vorlage benutzt ihn auch nicht dafuer, sondern fuer eine Karte in einem Stapel. Er steht als Messwert hier und nicht als Token: ein Token mit Begruendung und ohne Leser ist genau das, was in diesem Satz schon einmal zwoelf Zeilen lang stand (siehe --inhalt-breite). */ /* --- Farbe: Overlay ---------------------------------------------- */ --farbe-schleier: rgba(48, 48, 48, .78); /* [abgeleitet] aus --farbe-text */ /* --- Schrift ------------------------------------------------------ */ /* Set K nennt Inter. Die Datei liegt lokal unter assets/fonts/, wird aber nur von 11-farben-typo.html ueber schriften.css geladen. Auf den uebrigen Seiten faellt die Schrift auf den Systemstack zurueck. Fuer den Bau gilt: schriften.css global einbinden. Siehe UEBERGABE.md, offene Punkte. */ --schrift-familie: "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --schrift-familie-mono: "Cascadia Mono", Consolas, "SF Mono", monospace; --schrift-leise: 400; --schrift-normal: 450; --schrift-halbfett: 600; --schrift-fett: 700; --schrift-schwer: 800; /* Groessen aus Set K. Employment Hero selbst faehrt 14 px Fliesstext - das widerspricht der Vorgabe "deutlich groesser als uebliche Dashboards", deshalb ihre Farben mit unseren Groessen. */ --groesse-mikro: 13px; /* [abgeleitet] nicht im Set */ --groesse-klein: 15px; /* [Set K] */ --groesse-text: 17px; /* [Set K] */ --groesse-gross: 20px; /* [abgeleitet] nicht im Set */ /* GEAENDERT AM 01.08.2026 von 22 auf 24 px. Eine Groessenleiter, deren Sprossen unter 15 % liegen, traegt keine Ordnung — der Unterschied ist da, aber niemand sieht ihn. Gerechnet ueber die ganze Leiter: mikro -> klein 13 -> 15 +15,4 % klein -> text 15 -> 17 +13,3 % bleibt, siehe unten text -> gross 17 -> 20 +17,6 % gross -> h3 20 -> 22 +10,0 % die schwaechste Sprosse h3 -> h2 22 -> 30 +36,4 % Mit 24 px werden daraus +20,0 % und +25,0 %; die Leiter steigt dann ueberall monoton statt einmal fast stillzustehen. `klein -> text` BLEIBT bei 13,3 %: die 15 px der Konversationsliste sind in Regel 03 mit Zeilendichte begruendet und nicht mit Rangfolge. Eine Ausnahme mit Grund ist keine Luecke in der Regel. [festgelegt] */ --groesse-h3: 24px; /* [festgelegt] 01.08.2026, vorher 22 */ --groesse-h2: 30px; /* [Set K] */ --groesse-h1: clamp(32px, 4.2vw, 44px); /* [Set K] Obergrenze 44px */ --groesse-riesig: clamp(44px, 6vw, 72px); /* [Set K] Obergrenze 72px */ /* DIE BEWERTUNGSZAHL SCHRUMPFT NICHT MIT — 02.08.2026, Bereich 15. `--groesse-riesig` faellt bei 390 px Fensterbreite still auf seine Untergrenze: 6vw sind dort 23,4 px, also greift 44 px. Die groesste andere Schrift auf dem Beitragsblatt ist 20 px — der Faktor faellt damit von 3,6 auf 2,2 (−39 %). Regel 11 nennt die 72 px als gemessenen Wert und warnt namentlich: „Wer die Zahl beim Bau abschwaecht — kleinere Ziffern, gedaempfte Flaeche, Rahmen statt Fuellung — macht sie unsichtbar." Platzprobe bei 390 px: drei Ziffern à rund 43 px = 130 px, plus 8 px Luecke, plus „von 100" (15 px, rund 52 px) = 190 px in 326 px Innenbreite. Passt. `--groesse-riesig` bleibt unangetastet: es traegt an vier weiteren Stellen Ueberschriften, wo das Zusammenschrumpfen am Handy richtig ist. */ --groesse-bewertung: 72px; /* [festgelegt] 02.08.2026 */ --zeilenhoehe-eng: 1.08; --zeilenhoehe-mittel: 1.32; --zeilenhoehe-weit: 1.58; --laufweite-eng: -.022em; /* GEMESSEN an jitter.video und an Jitters Onboarding (31.07.2026): dort laufen die grossen Ueberschriften auf -.033 bis -.04 em bei Gewicht 800. Unser -.022 ist dafuer rund 40 % zu locker — bei 72 px sieht das nicht ruhig aus, sondern lose. NUR fuer sehr grosse Schrift: bei 17 px Fliesstext waere derselbe Wert eine Lesebremse. */ --laufweite-sehr-eng: -.035em; --laufweite-null: 0; --laufweite-weit: .07em; /* --- Abstaende ---------------------------------------------------- */ --abstand-1: 4px; --abstand-2: 8px; --abstand-3: 12px; --abstand-4: 16px; --abstand-5: 24px; --abstand-6: 32px; --abstand-7: 48px; --abstand-8: 72px; --abstand-9: 112px; /* --- Radien (Set K) ----------------------------------------------- */ --radius-klein: 6px; --radius-standard: 10px; --radius-gross: 16px; /* [gemessen] Jitters Karten auf „Workspace settings": `_card_` und `_container_16p5a_` tragen beide 20 px. Das ist der Radius, an dem man seine Oberflaeche erkennt — groesser als alles, was wir bisher hatten, und deshalb ein eigenes Token statt einer Erhoehung von `--radius-gross` (das sitzt an Dingen, die keine Karten sind). */ --radius-karte: 20px; /* [gemessen] Die grosse Kachel der Vorlage — Jitters `_bentos_qubww_1` und `_collaborationCards_` tragen beide 40 px. Der Wert stand bis zum 11.08.2026 als Zahl an `.bentokachel` und an `.verlauf`; seit die Seiten selbst Bento-Raster sind, hat er mehr Leser, und ein Radius, der an fuenf Stellen fast stimmt, ist keiner. */ --radius-bento: 40px; /* [gemessen] Die grosse Kachel der Vorlage — Jitters `_bentos_qubww_1` und `_collaborationCards_` tragen beide 40 px. Der Wert stand bis zum 11.08.2026 dreimal als Zahl in `oberflaeche.css` (`.bentokachel`, `.verlauf` und die Kachel des Diagramms); seit die Seiten selbst Bento-Raster sind, sind es mehr Leser, und ein Radius, der an fuenf Stellen fast stimmt, ist keiner. */ --radius-bento: 40px; /* [abgeleitet] Der Kreis im Wartezustand des Lesebereichs. 88 px ist das Doppelte des Kontobildes (44) — gross genug, um eine Flaeche von 493 528 px² zu halten, klein genug, um nicht wie ein Leerbild zu wirken. Das Zeichen darin sitzt auf 40 %, wie bei den Kanalzeichen. */ /* DIE ZWEI GRAFIKEN DER UEBERSICHT — 03.08.2026, angesagt: „da sollen mehr Grafiken sein". Beide Groessen sind ABGELEITET und nicht gegriffen. */ /* Das Kalenderblatt. 64 px ist die Breite, bei der zwei Ziffern in `--groesse-h3` (24 px) mit Polster stehen, ohne dass das Blatt breiter wird als die Zeile darunter lang ist. */ --kalenderblatt: 64px; --schatten-kalenderblatt: 0 1px 2px rgba(25, 23, 28, .10), 0 4px 8px rgba(25, 23, 28, .06); /* Der Balken unter der Bewertung. Er nimmt die Kartenbreite, aber nicht mehr als 220 px — daruber liest er sich als Trennlinie und nicht mehr als Anteil. */ --spiegel-balken-max: 220px; /* [abgeleitet] Die leise Knopfform im Gespraechskopf (Erledigt, Archivieren, Loeschen). 36 px, weil drei davon nebeneinander in eine Kopfzeile passen muessen, die selbst nur 60 px hoch ist — und weil sie leise sind: die lauten Knoepfe im Produkt sind 44 und hoeher, und der Unterschied soll sichtbar sein. */ --hoehe-knopf-leise: 36px; /* [abgeleitet] Die Wortmarke auf der Anmeldeseite. In der Kopfzeile ist sie 40 px hoch; hier ist sie das einzige Zeichen der Herkunft und traegt entsprechend mehr. 56 px ist die Hoehe, bei der die zweizeilige Marke in der 26 rem breiten Karte steht, ohne sie zu fuellen. */ /* 17.10.2026: 48 statt 56 px — hier steht jetzt das EB-Zeichen (fast quadratisch) statt des zweizeiligen Schriftzugs. */ --marke-anmelden: 48px; /* [abgeleitet] Die Frage im Ablauf bricht aus der Lesespalte aus — 780 px. Gemessen ist das die Breite, bei der der laengste Satz der sieben Schritte („Du wolltest 3 Bewerbungen. Es wurden 7.") bei 44 px Schrift auf ZWEI Zeilen steht statt auf drei. Eine Zeile waere schoener und braeuchte 1040 px — dort wandert das Auge, und genau dagegen steht `--lese-breite`. Zwei ist der Kompromiss, der beides aushaelt. */ --breite-wizardfrage: 780px; /* [gemessen] Wo der obere Bogen im Ablauf anfaengt. Der Wizard-Kopf (Fortschrittsbalken plus „Schritt 1 von 7") ist gemessen 46 px hoch; darunter beginnt der Bogen, statt ihn zu kreuzen. Ein Strich durch eine Schrittanzeige liest sich als Fehler, nicht als Papier. UND ER IST SCHMALER ALS DIE ANDEREN: 110 px passen nicht zwischen Schrittanzeige und Frage, er kreuzt dann eben die Frage. 56 px passen. Der untere Bogen behaelt seine Hoehe — unter dem Knopf ist Platz. */ --bogen-oben: 54px; --bogen-hoehe-oben: 56px; /* [abgeleitet] Zwischen `--radius-klein` (6) und `--radius-gross` (16). Fuer Dinge, die weder Marke noch Karte sind. */ --radius-mittel: 10px; --zeichen-warten: 88px; --zeichen-warten-innen: 36px; --radius-rund: 999px; /* --- Schatten (Set K) --------------------------------------------- */ --schatten-1: 0 1px 2px rgba(48, 48, 48, .06); --schatten-2: 0 4px 14px rgba(48, 48, 48, .08); --schatten-3: 0 12px 36px rgba(48, 48, 48, .12); /* Der Schatten der oberen Seitenwahl. [gemessen] Jitter stapelt fuenf Lagen; die drei oberen (bis `0 62px 17px`) gehoeren zu seinem Untermenue, das 520 px herunterklappt, und sind bei einer 70 px hohen Leiste nicht zu sehen. Uebernommen sind die zwei, die etwas tun — `0 10px 10px #0000000a` und `0 2px 5px #0000000a`, hier auf unseren Textton umgerechnet. */ /* --- Der schwebende Knopf: 1:1 von der Website --------------------- Angesagt am 12.08.2026: „der KI-Knopf unten rechts sollte so aussehen wie auf der Website, also 1:1 gleich." ABGELESEN aus `EB-Software-Website/stile/bausteine.css` (`.schweber`) und `stile/tokens.css`. Die Website rechnet mit 1rem = 10px; alles hier steht deshalb in px, so wie es dort auch steht — ihre `.schweber`-Regel benutzt selbst keine rem. SCHWARZ IST DORT REIN SCHWARZ (#000000) und nicht unser Textton #19171C. Bei 1:1 ist das kein Spielraum: die beiden liegen 9 % in der Helligkeit auseinander, und der Knopf steht auf jeder Seite. */ --farbe-schwarz: #000000; /* [Website] Weiss darauf 21:1 */ --schweber-groesse: 48px; /* [Website] */ --schweber-abstand: 20px; /* [Website] rechts und unten */ --schweber-zeichen: 24px; /* [Website] */ --schatten-schweber: 0 1px 6px 0 #0000000f, 0 2px 32px 0 #00000029; /* [Website] */ --kurve-schweber: cubic-bezier(.33, 0, 0, 1); /* [Website] */ --kurve-druck: cubic-bezier(.45, 0, .2, 1); /* [Website] */ --dauer-schweber: .167s; /* [Website] */ --dauer-schweber-hover: .25s; /* [Website] */ --dauer-schweber-druck: .134s; /* [Website] */ /* Der Schatten des Blattes. [Website] `--schatten-helfer`, drei Lagen: ein 1-px-Rand als Schatten (statt `border`, damit er nichts an der Groesse aendert), dann zwei Tiefen. Die rem-Werte der Website sind bei 1rem = 10px in px umgerechnet. */ --schatten-helfer: 0 0 0 1px #E5E4E7, 0 24px 48px -12px #19171c38, 0 8px 16px -8px #19171c1f; /* --- Bewegung ----------------------------------------------------- */ --dauer-schnell: .12s; --dauer-mittel: .2s; /* Ripple und Haken. Beide sind in Regel 12 mit 450 ms entschieden; der Wert stand bis zum 01.08.2026 als Zahl an ZWEI Orten — `.welle` in oberflaeche.css und `WELLE_MS` in bausteine.js. Zwei Orte fuer denselben Wert laufen auseinander; das Skript liest ihn jetzt hier ab. [Regel 12] */ --dauer-lang: .45s; /* ERZAEHLENDE BEWEGUNG. Regel 12: „0,3-0,8 s, nur fuer Zahlen und Balken", und „alles ueber 300 ms ist Erzaehlung, nicht Bedienung." ANGELEGT AM 02.08.2026, NICHT FRUEHER. Der Bauauftrag nennt den Wert schon in Kapitel 2, und Runde 24 hat ihn bewusst NICHT angelegt: bis Kapitel 14 die Balkenfuellung baute, haette er null Verwendungen gehabt — und ein Token ohne Verwendung ist genau das, wofuer `--farbe-signal` geloescht wurde. Jetzt hat er eine: `balken-fuellen` auf der Uebersicht. [Regel 12] */ --dauer-erzaehlen: .6s; --kurve: cubic-bezier(.2, .7, .3, 1); /* =================================================================== DIE BEWEGUNG DER KOPFZEILE — WOERTLICH AUS DER WEBSITE, 09.08.2026 =================================================================== Beide Werte stehen so in `EB-Software-Website/stile/tokens.css`: --dauer-8: .8s --kurve-schwung: cubic-bezier(.33, 1.42, .05, .96) SIE SIND NICHT AUS DER SPANNE DER HAUSREGEL, und das gehoert dazugesagt: 800 ms liegen ueber „0,3-0,8 s nur fuer Zahlen und Balken", und die Kurve schwingt ueber (1,42 im dritten Wert heisst, sie faehrt ueber ihr Ziel hinaus und kommt zurueck). Beides ist angesagt — „es muss nicht instant sein, es kann kurz eine Sekunde dauern" — und beides ist der Grund, warum die Bewegung auf der Website so aussieht, wie sie aussieht. Eine schnellere Kurve ohne Ueberschwingen ist eine andere Bewegung, nicht dieselbe kuerzer. NUR FUER DIE KOPFZEILE. Sie sind hier keine allgemeine Dauer und keine allgemeine Kurve; wer sie anderswo einsetzt, holt sich das Ueberschwingen an eine Stelle, an der es niemand entschieden hat. */ /* .8s WAREN DER WERT DER WEBSITE und sind am 09.08.2026 in zwei Schritten auf .35s gekuerzt worden — „schneller, dann ist es perfekt", dann „noch schneller". Das ist die einzige Stelle, an der wir bewusst von der Vorlage abweichen: ihre Kopfzeile traegt eine Marketingbewegung, die man einmal sieht; unsere sieht man mehrmals am Tag. DIE KURVE BLEIBT. Sie macht die Bewegung aus, nicht die Dauer — das Ueberschwingen ist bei .35s dasselbe, nur frueher vorbei. DER RUECKWEG HAT KEINE DAUER, und dafuer gibt es hier absichtlich KEIN zweites Token: er ist nicht schnell, er ist gar nicht da. Wie das ohne einen zweiten Wert geht, steht in oberflaeche.css bei `.kopf__konto-rest`. */ --dauer-kopf-schwung: .35s; /* =================================================================== DER KNOPF BEHAELT DIE .8s DER WEBSITE — 09.08.2026 =================================================================== ES SIND ZWEI DAUERN GEWORDEN, und das ist entschieden und kein Versehen: „die Schrift ist top, die Animation fuer die Leiste mit den drei Strichen ist aber zu schnell, das wirkt zu instant — die bitte so wie am Anfang, also wie auf der Startseite." Die Schrift laeuft auf .35s, der Knopf auf den .8s der Vorlage (`--dauer-8` in `EB-Software-Website/stile/tokens.css`). WARUM DAS ZUSAMMENPASST, obwohl es auseinanderlaeuft: die Pille rueckt schnell zur Seite und gibt den Platz frei, und der Knopf waechst gemaechlich hinein. Er kommt nicht zu spaet, er kommt nach — und genau das ist der Eindruck, den die Startseite macht. DER RUECKWEG BLEIBT INSTANT. Beide Uebergaenge stehen am Ziel. */ --dauer-kopf-knopf: .8s; /* =================================================================== DER RUECKWEG HAT EINE EIGENE, KURZE DAUER — 09.08.2026 =================================================================== Angesagt: „die Rueckwaerts-Animation von der Schrift ist zu langsam", und im selben Zug der zweite Befund: „der Kreis rechts daneben liegt bei der Rueckwaerts-Animation ueber dem Kreis mit den Anfangsbuchstaben, das ist buggy." BEIDES IST DERSELBE FEHLER. Der Rueckweg lief mit der Dauer des Hinwegs — die Schrift .35s, der Knopf .8s. Solange der Knopf noch gross ist und die Pille schon schmal, ueberlappen sie; bei .8s dauert dieser Zustand fast eine Sekunde und ist deutlich zu sehen. WIE ES GEHT: der Uebergang im GRUNDZUSTAND gilt dem Rueckweg, der an `.ist-verkleinert` dem Hinweg. Zwei Dauern, eine Bewegung, keine Regel die „rueckwaerts" heisst. .15s WAREN ZU KNAPP — „es wirkt etwas zu schnell", am selben Tag nachgeschaerft. .25s bleibt deutlich unter dem Hinweg (.35s Schrift, .8s Knopf) und liest sich als Bewegung statt als Sprung. DASS DIESER WERT ZWEIMAL GAR NICHT GALT, gehoert hierher, weil die Ursache beide Male dieselbe war und beim zweiten Mal AUS DEM VERSUCH ENTSTAND, DIE ERSTE ZU BESCHREIBEN: ein Kommentar endet an der ersten schliessenden Klammer, die in ihm vorkommt — auch wenn sie in Anfuehrungszeichen steht, auch wenn sie nur zitiert wird. Danach ist der Rest des Blocks kein Kommentar mehr, sondern ungueltiges CSS, und die Deklarationen dahinter fallen aus. WAS MAN DANN SIEHT: eine `transition` mit unbekannter Dauer ist INSTANT. Beanstandet als „es ist wieder instant, beides, also null Animation." Die Messung hatte es gezeigt (Knopf nach 25 ms auf 0); ich hatte es als Messartefakt abgetan. GEGENPROBE, DIE ES SOFORT FINDET: den Wert im Browser auslesen (`getComputedStyle(document.documentElement).getPropertyValue(...)`). Kommt er leer zurueck, ist der Block darueber zerbrochen. */ --dauer-kopf-zurueck: .25s; --kurve-kopf-schwung: cubic-bezier(.33, 1.42, .05, .96); /* Der Versatz der Staffel. Regel 12 nennt ihn („Zeilen erscheinen mit 40 ms Versatz"), also gehoert er hierher — er stand als Zahl im `calc` der Regel `.tritt-ein` und war damit genau der fest verdrahtete Wert, den die Vorgabe verbietet. [Regel 12] */ --staffel-versatz: 40ms; /* --- Bereich 02: der Sichtwechsel beim Seitenwechsel -------------- */ /* Regel 12: „alles ueber 300 ms ist Erzaehlung, nicht Bedienung." Ein Seitenwechsel ist der Grenzfall — 260 bleibt darunter. Benutzt in oeffentlich/einrichten.css, das nur die Onboarding-Bildschirme laden. [festgelegt] */ --dauer-uebergang: .26s; /* Ein Austritt beschleunigt weg, er bremst nicht ab. `--kurve` bremst am Ende ab und ist damit die Kurve fuer den EINTRITT; ohne einen zweiten Wert truege derselbe Name zwei entgegengesetzte Aussagen. [festgelegt] */ --kurve-hinaus: cubic-bezier(.4, 0, 1, 1); /* --- Raster ------------------------------------------------------- */ --breite-max: 1380px; --breite-text-max: 68ch; /* GEMESSEN AN DEN REFERENZEN, nicht gewaehlt (31.07.2026). Zillow legt seinen Inhalt bei 1440 px Fenster in rund 1148 px Breite — 80 % — mit sichtbarem Rand links und rechts. Unsere Spalte war bei 1440 px zufaellig gleich breit (1136 px, 79 %), hatte aber KEINE Grenze: bei 1920 px lief sie einfach weiter. `--inhalt-breite` ist diese Grenze, und sie greift erst dort, wo Platz da ist. Bei 1440 aendert sich nichts. `--lese-breite` ist die zweite Grenze und die wichtigere: Text, Formulare und Sprechblasen brauchen eine Zeilenlaenge, keine Fensterbreite. Later begrenzt seine Sprechblasen auf rund 53 % der Spalte, unsere liefen auf 81 %. */ /* NACHGEZAEHLT AM 04.08.2026: `--inhalt-breite` hatte NULL Verwendungen. Zwoelf Zeilen Herleitung darueber, kein einziger Leser — wer den Wert angehoben haette, haette nichts geaendert und gemeldet, es sei erledigt. `--lese-breite` daneben hat einundzwanzig. JETZT BEKOMMT ER EINE AUFGABE, statt geloescht zu werden. Der Umbau nach der Website (Ansage 04.08.2026) braucht genau das, was er beschreibt: EINEN Behaelter, an dem das Raster und jeder Abschnitt haengen. Ihn zu loeschen hiesse, ihn zwei Stunden spaeter unter anderem Namen neu zu erfinden. DER WERT KOMMT JETZT AUS DER VORLAGE, nicht mehr von Zillow. Unsere Website setzt `--behaelter-breite` auf 86rem ab 1025 px und auf 118rem ab 1441 px — bei ihrer Wurzelschrift von 10px sind das 860 und 1180 px. Das Portal rechnet in 16px-rem, deshalb stehen hier Pixel: dieselbe Zahl, nicht dieselbe Einheit. Ein Wechsel der Wurzelschrift auf 10px wuerde jede Messung im Projekt verschieben und ist nicht bestellt. ES IST IHRE BREITE STUFE UND NICHT IHRE SCHMALE. Der erste Ansatz stand auf 860px — ihrer Stufe zwischen 1025 und 1440 px. Der Wert kollidiert mit einer Ansage vom selben Tag: die Liste geht auf 1000 px. Ein Behaelter, der schmaler ist als das, was darin steht, ist keine Grenze, sondern ein Fehler. Ihre breite Stufe (118rem = 1180 px, ab 1441 px) traegt die 1000 und liegt naeher an der Huelle des Portals, die bei 1440 px 1296 px breit ist. 1280 PX STATT 1180 — Baustelle 0.2, angesagt am 04.08.2026. =================================================================== Vorgelegt war die Gegenrede, und sie steht als Frage 7 in `rueckfragen-an-ceo.md`: 1180 px sind an unserer Website gemessen, 1280 px waeren 80rem und damit gerundet. Der Auftraggeber hat entschieden, und zwar mit Kenntnis der Messung — also gilt 1280. WAS DER WERT JETZT IST: 80rem bei der 16-px-Wurzel des Portals. Er kommt damit NICHT mehr aus der Website, und das steht hier, damit niemand ihn spaeter fuer eine Messung haelt und daran weiterrechnet. Die Zahl aus der Vorlage bleibt daneben stehen — sie ist der Beleg, von dem bewusst abgewichen wurde, nicht ein ueberholter Wert. ER TRAEGT DIE 1000 WEITER, und das war die harte Bedingung von oben: die Liste geht auf 1000 px, der Behaelter darf nicht schmaler sein. 1280 > 1000, die Bedingung haelt mit 280 px Luft statt 180. */ --lese-breite: 34rem; /* 544px — Later-Blase ~431, Formular ~321 */ /* --- Die Lesespalte des Gespraechs --------------------------------- */ /* [abgeleitet] `--lese-breite` plus die feste Gasse der Blase. KEINE ZWEITE ENTSCHEIDUNG, sondern die Summe zweier schon getroffener: eine Blase ist hoechstens `--lese-breite` breit, und zwischen „von ihm" und „von uns" liegt eine feste Gasse von `--abstand-6`. Beides steht seit dem 02.08.2026 an `.blase`; hier wird nur zusammengezaehlt, was der Verlauf davon braucht. WOZU SIE NOETIG WURDE, gemessen am 10.08.2026 bei 1920 px: die Gespraechsspalte ist dort 1246,7 px breit, die Blase darin 544. Fuer die eine Blase eines eingehenden Gespraechs sah das nach 703 px leerem Grau aus; mit einer Antwort daneben ist es schlimmer, denn die steht rechts aussen — zwei Leute, die ueber eine Schlucht von 700 px miteinander reden. Und das Antwortfeld lief ueber die volle Spalte: 1214 px Schreibzeile bei 17 px sind rund 130 Zeichen. Genau dagegen steht `--lese-breite` — nur galt sie bisher fuer den Text, den der Meister LIEST, und nicht fuer den, den er schreibt. */ --gespraech-spalte: calc(var(--lese-breite) + var(--abstand-6)); /* 576px */ /* --- Das Raster der Website ---------------------------------------- */ /* Zehn Spalten, ab 1441 px zwanzig, Abstand 2rem bei ihrer Wurzelschrift — also 20 px. Uebernommen aus EB-Software-Website/stile/tokens.css, nicht nachempfunden. */ /* --- Der graue Abschnitt ------------------------------------------- */ /* DAS TRAGENDE MITTEL DER VORLAGE. Auf ihrer Startseite gemessen (04.08.2026, 1440 px): weisse Flaeche 30.049k Bildpunkte, graue Flaeche 12.393k — das Grau traegt gut ein Drittel der Seite. Es ist kein Grund, es sind KAESTEN: der Seitengrund bleibt weiss. `.kacheln__block` der Website hat KEINEN Eckenradius und KEINEN Rand. Was ihn traegt, ist die Flaeche und die Polsterung — 6rem 4rem am Handy, bis 10rem 13rem ab 1441 px. In Pixeln: 60/40 bis 100/130. */ /* `--abschnitt-polsterung`, `--abschnitt-polsterung-quer` und `--abschnitt-radius` SIND AM 05.08.2026 GEFALLEN. Der Absatz darueber beschreibt `.kacheln__block` unserer WEBSITE. Die Vorlage macht es anders, und das ist gerendert gemessen: alle sieben Sektionen von jitter.video tragen Radius 0, keinen Grund und kein Polster. Den Abstand tragen ihre Kinder; Flaeche tragen die Kacheln darin. Das Querpolster war ausserdem die dritte der drei Kanten (72 / 80 / 104 px), an denen die Seite ihre Kante verlor. */ --abschnitt-abstand: 32px; /* OBERGRENZE DER 3:2-VORSCHAU IM BEITRAG — 02.08.2026, Bereich 15. Ein Foto im Format 3:2 waere bei 1440 px 459 px hoch und druecke die Bewertung unter die Faltkante. Bei 1440 waechst die Flaeche damit von 200 auf 320 px (+60 %), bei 390 von 200 auf 239 px (+19,5 %). */ --vorschau-hoehe-max: 320px; /* [abgeleitet] */ /* Im Referenzstand stand hier 3px. Der Wert war doppelt belegt: Rand UND Fokusring. Beides ist jetzt getrennt, siehe unten. Ein Rand ist eine Linie und darf duenn sein - die Anmutung lebt von Flaechen, nicht von Linien. */ --randbreite: 1px; /* DER STARKE RAND. Einen Zustand, der sich am RAND zeigt, gibt es nur an einer Stelle — der gewaehlte Ordner im Drive. Dort stand er bis zum 02.08.2026 als 1-px-Rand PLUS einem `box-shadow: inset 0 0 0 1px`, also zwei Linien, die zusammen 2 px ergeben sollen und je nach Radius unterschiedlich weit auseinanderliegen. Eine Linie sagt dasselbe. Er ist eine eigene Sprosse und nicht `calc(--randbreite * 2)`: die Verdopplung ist keine Regel, sondern das, was hier gebraucht wird. Wer spaeter einen dritten Rand braucht, legt ihn hier an und nicht in der Komponente. [abgeleitet] */ --randbreite-stark: 2px; /* ================================================================== ERGAENZUNGEN IM BAU Ab hier stehen Werte, die im Referenzstand (design-research/tokens.css) NICHT enthalten sind. Sie sind hier hinzugekommen, weil eine Regel aus UEBERGABE.md sie verlangt und der Referenzstand keinen Wert dafuer liefert. Jede Ergaenzung nennt die Regel, aus der sie folgt. ================================================================== */ /* --- Querschnitt Q8: die Schnittkante eines Bildlaufs -------------- */ /* GEMESSEN AM 01.08.2026, ueber alle Bildlaufbehaelter des Produkts: auf `/posteingang` bei 1440 px sind von 4891 px Liste 561 px sichtbar, 4330 px liegen darunter — und NICHTS sagt das. Kein Verlauf, kein Schatten, keine sichtbare Bildlaufleiste. Im Bild endet die Liste mitten in einer Zeile (letzter Inhaltspixel y=815, Kasten endet y=888) und liest sich als „hier ist die Liste zu Ende". Der Verlauf haengt am Bildlauf selbst (`local`) und verschwindet deshalb, sobald man unten angekommen ist. Ein Zeichen, das immer da ist, sagt nichts. 24 px, weil der Auftrag das als Anweisung nennt; der Wert liegt zugleich auf der Abstandsleiter (`--abstand-5`). Die zweite, dunklere Lage ist die HALBE Kante — 12 px, ebenfalls auf der Leiter. Der Auftrag nennt dort 14 px; 14 steht auf keiner Sprosse, und §Q1.4 laesst dafuer keine Ausnahme zu. */ --ausblendkante: 24px; /* [festgelegt] = --abstand-5 */ --kantenschatten: 12px; /* [abgeleitet] halbe Kante, = --abstand-3 */ /* Der Schatten an der Kante ist KEINE Flaeche und keine Schrift — er ist eine Andeutung von Tiefe. Deshalb ein eigener, sehr leiser Wert und nicht `--farbe-rand`: ein Rand traegt eine Grenze, hier gibt es keine. */ --schleier-kante: rgb(0 0 0 / .08); /* [festgelegt] */ /* --- Bereich 04: die Hoehe einer Kalenderzelle --------------------- */ /* ANGESAGT AM 11.08.2026: „daß der Kalender viel länger gezogen ist, also nach unten länger, daß man viel mehr Fläche hat." Bis dahin stand an der Zelle `min-height: 64px` — gemessen wurde sie 76 px hoch bei rund 170 px Breite. In ein liegendes Feld dieser Größe paßt kein Beitrag, sondern nur ein Kringel; genau deshalb ist am 04.08.2026 der Text aus der Zelle gefallen. ZWEI WERTE, WEIL ZWEI BREITEN VERSCHIEDENES BRAUCHEN, und beide meinen dasselbe: „so hoch, daß ein Beitrag darin lesbar steht". Handy 88 px Tageszahl (20,5) + eine Farbfläche (28) + Polster (2 x 8) + Fuge (2 x 4) = 84,5, aufgerundet auf die Abstandsleiter. Ein Wort paßt bei 44 px Spaltenbreite ohnehin nicht — dort trägt die Fläche die Farbe. Laptop 160 px Tageszahl (20,5) + zwei Zeilen fetter Aufschrift (2 x 20,5 = 41) + Kanalzeichen (20) + Polster und Fugen (24 + 12) = 137,5, plus Luft für einen ZWEITEN Beitrag am selben Tag ohne daß die Zeile springt. KEIN FESTER WERT AN DER REGEL, damit die Zahl an einer Stelle steht und nicht an dreien — die Zelle, die Fläche und die Aufschrift hängen alle daran. */ --kalender-zelle: 88px; /* [gerechnet] Handy */ --kalender-zelle-weit: 160px; /* [gerechnet] ab 45rem */ /* --- Bereich 15: Grafikstil --------------------------------------- */ /* Entscheidung p6, Employment-Hero-Stil: Linien-Icons. Regel 15 macht dazu EINE Auflage gegenueber dem Vorbild: "Strichstaerke mindestens 2 px, eher 2,25. Employment Hero zeichnet sehr fein; bei Sonnenlicht und mit Lesebrille reicht das nicht." RASTER. Alle Zeichnungen liegen auf 24 x 24 Rastereinheiten (viewBox="0 0 24 24"). Das ist Lucides Raster und wird beim Erzeugen der Symboldatei geprueft - eine Zeichnung auf einem anderen Raster kommt nicht durch. STRICH. 2,25 Rastereinheiten. Bei 24 px Darstellung ist eine Rastereinheit ein Bildpunkt, der Strich also 2,25 px. GROESSEN AM TEXT-TOKEN, NICHT IN em UND NICHT IN PIXELN. Feste Pixel waeren falsch: ein Symbol neben Text muss mit dem Text wachsen, sonst bricht "Schrift +15 %" fuer jedes Icon. em war AUCH falsch, und das ist gemessen: em haengt an der LOKALEN Schriftgroesse. Im Toast (15 px) und in Mikro-Text (13 px) schrumpfte das Symbol mit, und der gerenderte Strich fiel auf 1,86 px - unter die Auflage, und zwar genau dort, wo der Text schon klein ist. Deshalb: die Groesse haengt an --groesse-text. Sie folgt damit der Schrifteinstellung des Nutzers, aber NICHT den Groessensprüngen der Umgebung. Ein Symbol im Toast ist so gross wie eines im Fliesstext. Die Pixelangaben unten gelten beim Fliesstext von 17 px. OPTISCHER AUSGLEICH. Ein Strich in Rastereinheiten skaliert mit der Groesse mit: 2,25 auf 20 px waeren nur 1,875 px und damit UNTER der Auflage. Deshalb bekommt die kleine Groesse einen dickeren Strich im Raster, damit der gerenderte gleich bleibt. Gerechnet: klein 1,20 × 17 = 20,4 px · Strich 2,7 -> 2,30 px gerendert standard 1,42 × 17 = 24,1 px · Strich 2,25 -> 2,26 px gerendert gross 1,90 × 17 = 32,3 px · Strich 2,25 -> 3,03 px gerendert Bei "gross" wird bewusst NICHT nach unten ausgeglichen: ein grosses Symbol mit 2,25 px Strich wirkt spindelig. Der gerenderte Strich liegt damit immer zwischen 2,25 und 3,1 px - nie unter der Auflage. Gemessen wird das in jeder Groesse und bei +15 % Schrift. ENDEN UND ECKEN. Rund, beides. Runde Enden vertragen sich mit den Pillen aus der Formsprache; scharfe Enden wirken daneben technisch. Eckenradius IN der Zeichnung: 1 bis 2 Rastereinheiten - das ist Lucides Konvention und wird nicht angetastet. DREI GROESSEN, mehr nicht. Wer eine vierte braucht, hat eher ein Layoutproblem als ein Groessenproblem. */ --symbol-strich: 2.25; --symbol-strich-klein: 2.7; /* optischer Ausgleich, siehe oben */ /* DAS ZEICHEN IM LEISEN BLOCK IST 16 PX, und damit reicht auch 2,7 nicht mehr. Regel 15 verlangt einen GERENDERTEN Strich von mindestens 2,25 px; eine Staerke in Rastereinheiten sagt darueber nichts. gerendert = Raster-Staerke x Symbolbreite / 24 Bei 16 px waeren 2,7 nur 1,8 px — unter der Auflage. Noetig sind 2,25 x 24 / 16 = 3,375; mit 3,4 sind es 2,27 px. GEFUNDEN VON DER MESSUNG, nicht im Bild: `Symbole · Strichstaerke gerendert` wurde beim ersten vollen Lauf nach dem Nachbau rot. Genau dafuer misst sie den gerenderten Wert und nicht den im Stylesheet. */ --symbol-strich-leise: 3.4; /* =================================================================== DAS DIAGRAMM: FOCUS-AND-BLUR — 07.08.2026, angesagt =================================================================== „Beim Ueberfahren einer Linie wird sie hervorgehoben, alle anderen blassen ab." Zwei Zahlen braucht das, und beide sind abgeleitet. --diagramm-blass Die Deckkraft der uebrigen Linien. NICHT Jitters 0,35, obwohl das der Wert derselben Geste im Kopf ist — dort ist er am 04.08.2026 gefallen, weil ein verblasstes Wort gegen Weiss nur 1,60:1 haelt. Hier gilt dieselbe Rechnung mit einer anderen Auflage: eine Linie ist kein Fliesstext. AM 08.08.2026 VON 0,50 AUF 0,56 GESTIEGEN, und nicht aus Anmutung: seit die Segmente die Markenfarben tragen, ist WhatsApps Gruen der bindende Posten. Es haelt VOLL nur 1,98:1 gegen Weiss (die markenbedingte Ausnahme, siehe `--farbe-kanal-whatsapp`), und verblasst faellt es entsprechend schnell: Deckkraft Facebook Instagram YouTube WhatsApp 1,00 4,82 4,04 3,96 1,98 0,65 2,75 2,53 3,01 1,60 0,56 2,34 2,20 2,62 1,51 0,50 2,14 2,02 2,39 1,45 Die Grenze liegt bei 0,56; bei 0,55 faellt WhatsApp auf 1,50 und gerundet darunter. Der Sprung von 0,50 auf 0,56 kostet sechs Hundertstel Verblassen und rettet das duennste Segment des Bildes. IM GAMMA-RAUM GERECHNET UND NICHT LINEAR, und das ist keine Feinheit: `globalAlpha` mischt auf der Leinwand die kodierten Bytes. Wer die linearen Anteile mischt, bekommt eine zu dunkle Linie heraus und meldet einen Kontrast, den es nicht gibt — bei 0,50 waeren es rechnerisch 1,50:1 statt der 1,75:1, die wirklich dastehen. Hier stand zuerst die falsche Tabelle; das ist die richtige. Gemischt wird ueber Weiss, denn die Verlaufskachel ist weiss, und das ist eine Auflage (siehe --farbe-kanal-facebook-linie). Deckkraft hellste Linie dunkelste Linie 1,00 3,05:1 11,42:1 0,65 2,08:1 4,08:1 0,50 1,75:1 2,77:1 0,35 1,47:1 1,96:1 DIE UNTERGRENZE IST 0,37 — bei 0,36 faellt die hellste Linie auf 1,49:1. 1,5:1 ist keine neue Schwelle: es ist dieselbe, die die vier Linienfarben paarweise zueinander halten muessen. Genommen ist 0,50 und nicht 0,37, weil 0,37 die Grenze ist und keine Auslegung: eine Linie, die um einen Hunderstel danebenliegt, soll nicht gleich reissen. Wer blasser will, sagt eine Zahl und weiss aus der Tabelle, was sie kostet. VOLLE 3:1 GEHEN NICHT, gerechnet: dafuer braeuchte es Deckkraft 0,99, also gar kein Verblassen. Die Auflage wird hier von etwas anderem getragen — siehe die Herleitung bei `FOKUS` in diagramm.js. --diagramm-greifweite Wie weit eine Linie nach oben und unten greift, um als „ueberfahren" zu gelten. WCAG 2.5.8 nennt fuer ein Zeigerziel 24 x 24 px; die halbe Hoehe davon sind 12. Damit ist die 2,25 px starke Linie ein Ziel der geforderten Groesse und keins darueber hinaus — wer auf keine Linie zeigt, hebt keine hervor. */ --diagramm-blass: 0.56; --diagramm-greifweite: 12px; /* DER TRENNSTRICH ZWISCHEN DEN SEGMENTEN — 08.08.2026. Er traegt die Kante, seit die Segmente die Markenfarben tragen: die halten untereinander 1,02:1 bis 2,43:1 und reissen die 3:1 aus WCAG 1.4.11 an allen sechs Paaren. Gegen Weiss halten alle vier 1,98:1 bis 4,82:1. Die ganze Rechnung steht bei `--farbe-kanal-facebook`. ZWEI PIXEL, weil einer bei einem Balken von rund 60 px Breite nicht als Kante liest, sondern als Zeichenfehler — und drei bereits Flaeche kosten, die den Zahlen gehoert. `--diagramm-hoehe-abzug` ist, was Legende und Achsenbeschriftung von der Kastenhoehe wegnehmen. Er wird gebraucht, um auszurechnen, ob ein Segment ueberhaupt dicker ist als sein eigener Rand — [gemessen] an der gerenderten Legende (Quadrat 12 px, Polster 20) und der Achsenzeile. Eine Schaetzung, und sie darf eine sein: WhatsApp liegt bei 1,5 px, die Schwelle bei 4. */ --diagramm-trennstrich: 2px; --diagramm-hoehe-abzug: 70px; --symbol-enden: round; --symbol-ecken: round; --symbol-klein: calc(var(--groesse-text) * 1.2); --symbol-standard: calc(var(--groesse-text) * 1.42); --symbol-gross: calc(var(--groesse-text) * 1.9); /* Graue Strichzeichnungen fuer Leerzustaende. Regel 15: "einfarbige graue Strichzeichnung - sehr zurueckhaltend, kein Bild mit Farbe." Ein eigener Name, damit die Zeichnungen nicht versehentlich an der Textfarbe haengen: sie sollen LEISER sein als Text, nicht gleich laut. */ --farbe-zeichnung: #C3C3C6; /* [gemessen] Jitter n400, 1,76:1 - Verzierung, kein Text */ --zeichnung-strich: 1.5; /* auf 96er-Raster: gerendert 2,0 px bei 128 px Breite */ /* --- Kanalfarben -------------------------------------------------- */ /* UEBERGABE.md, Regel 03 (c2): "Der Kanal ist ein farbiges Symbol an Stelle des Profilbilds." Bei vier Kanaelen ist die Herkunft die wichtigste Sortierhilfe - ein Meister erkennt Facebook-Blau, bevor er einen Namen liest. DIE WERTE SIND DIE OFFIZIELLEN, UNVERAENDERT. In der Fassung davor standen hier abgedunkelte Varianten, damit weisse Glyphen 4,5:1 halten. Das ist bei allen vier Marken ausdruecklich verboten - WhatsApp woertlich: "You shouldn't modify any colors in our logos", YouTube fuehrt "use colors other than YouTube Red" als Don't. Umgefaerbte Markenfarben sind also zurueckgenommen. Zwei Werte waren obendrein einfach falsch: Facebook #1877F2 ist VERALTET. Das aktuelle Asset im offiziellen Logo-Paket traegt #0866FF - in Raster und Vektor identisch gemessen. #1877F2 steht nur in der Login-Doku, die sich selbst widerspricht (dort auch 5890FF). YouTube #FF0000 ist VERALTET. Das Live-SVG auf youtube.com traegt #FF0033; #FF0000 kommt dort 0 Mal vor. FARBE TRAEGT HIER NICHT. Die Recherche hat das mit Zahlen belegt: kein Paar der vier Flaechen erreicht in Graustufen 3:1 gegeneinander (Instagram gegen YouTube: 1,02:1, Grauwerte 126 gegen 128). Die Unterscheidbarkeit haengt an der Glyph-Silhouette und am ausgeschriebenen Namen fuer Vorleseprogramme. Die Farbe ist Zugabe. WhatsApp bleibt bei 1,98:1 Glyph gegen Flaeche. Das ist die offizielle Variante "White and Green" und eine markenbedingte Ausnahme - sie steht mit Zahl in der Messung, nicht unter dem Teppich. Weil #25D366 auch gegen unseren Seitengrund nur 1,87:1 haelt, bekommt JEDE Kachel einen eigenen duennen Ring: der ist unser Element und kein Umfaerben. =================================================================== SEIT DEM 08.08.2026 TRAGEN SIE AUCH DIE SEGMENTE DES DIAGRAMMS =================================================================== Angesagt: „die Markenfarben der vier Dienste. Sie sind fuer einen Meister ohne Legende lesbar, und genau darum geht es." Und: „Das ‚kein Rot, kein Orange' galt Flaechen und Linien im Produkt, nicht der Kanalidentitaet in einem Kanaldiagramm." DIE PRUEFUNG, DIE DAZU VERLANGT WAR, und ihr Ergebnis ist deutlicher als erwartet. Gerechnet am 08.08.2026, alle sechs Paare: Facebook / Instagram 1,19:1 Ton 131 Grad Facebook / YouTube 1,22:1 Ton 131 Grad Facebook / WhatsApp 2,43:1 Ton 75 Grad Instagram / YouTube 1,02:1 Ton 1 Grad Instagram / WhatsApp 2,04:1 Ton 154 Grad YouTube / WhatsApp 2,00:1 Ton 154 Grad ALLE SECHS REISSEN 3:1, nicht nur das eine Paar. Und keine Stapelreihenfolge hilft: die beste von 24 kommt beim engsten Nachbarn auf 1,22:1. Die Ursache ist arithmetisch — alle vier Marken liegen in einem schmalen Leuchtkraftband (L 0,168 / 0,210 / 0,215 / 0,479). „EINEN TON ANHEBEN" GEHT AUCH NICHT, gerechnet: damit YouTube 3:1 gegen Instagram haelt, muesste es auf #700016 (ein fast schwarzes Braunrot, kein YouTube-Rot mehr) oder Instagram auf #FAD9DF (ein blasses Rosa). Und die uebrigen Paare rissen weiter. UND KEIN ANDERER SATZ SCHAFFT ES AUCH. Zur Einordnung, dieselbe Rechnung, engster benachbarter Nachbar: die vier Markenfarben 1,02:1 der gerechnete Satz vom 07.08.2026 1,57:1 der Ersatzsatz aus der Website-Palette 2,66:1 Drei Segmente, die sich beruehren, und vier Toene aus einer Palette: 3:1 zwischen allen Nachbarn ist mit Farbe allein nicht zu haben. Das ist keine Eigenschaft dieses Farbsatzes, sondern des gestapelten Balkens. ALSO TRAEGT DIE KANTE EIN TRENNSTRICH UND NICHT DIE FARBE. Jedes Segment bekommt einen weissen Rand; damit steht an jeder Kante Weiss gegen einen Ton, und alle vier halten dort 1,98:1 bis 4,82:1 — der schlechteste ist WhatsApp. Das ist die uebliche Bauart des gestapelten Balkens und keine Erfindung fuer diesen Fall. DAS DUENNSTE SEGMENT BEKOMMT KEINEN, und das ist gerechnet und nicht gegriffen: WhatsApp ist 1,5 bis 3,2 px hoch, ein Rand von 2 px auf jeder Seite waere breiter als das Segment. Es liegt dafuer oben im Stapel, wo seine Aussenkante ohnehin gegen Weiss steht. Welches Segment den Rand bekommt, entscheidet das Skript aus den DATEN und nicht aus einer Namensliste — siehe `diagramm.js`. WAS BLEIBT UND MIT ZAHL DASTEHT: WhatsApp haelt als oberstes Segment gegen Weiss 1,98:1. Es ist der duennste und der schwaechste Posten des Bildes zugleich. Was seine Zahl traegt, sind der Hinweis, die Tabelle und die Legende — dieselben drei wie beim Focus-and-Blur. */ --farbe-kanal-facebook: #0866FF; /* [gemessen] offizielles Asset, Raster + Vektor */ --farbe-kanal-youtube: #FF0033; /* [gemessen] Live-SVG youtube.com */ /* HIER STAND `--farbe-kanal-whatsapp: #25D366` — gefallen am 16.08.2026 mit dem Kanal. Die Rechnungen weiter oben nennen WhatsApp weiter als bindenden Posten (1,98:1 Glyph gegen Flaeche, 0,56 Deckkraftgrenze); sie bleiben stehen, weil sie die HERLEITUNG der uebrigen Werte sind und nicht ihre Behauptung. Wer sie ohne den gefallenen Kanal neu rechnet, bekommt mehr Luft, nicht weniger. */ /* Instagram hat KEINE offizielle Volltonfarbe. Meta erlaubt "the white glyph with a solid background", legt die Farbe aber nicht fest - die Verantwortung dafuer liegt bei uns. #E4405F ist der verbreitete Wert und haelt 4,04:1 fuer den Glyph, 3,80:1 gegen den Grund. Kein offizieller Wert, sondern unsere Wahl in einer Luecke. */ --farbe-kanal-instagram: #E4405F; /* [unsere Wahl] Meta nennt keinen */ /* =================================================================== HIER STANDEN VIER GERECHNETE LINIENFARBEN — gefallen am 08.08.2026 =================================================================== `--farbe-kanal-facebook-linie` und die drei anderen waren vier per `color-mix` abgedunkelte Toene, gerechnet am 06.08. und am 07.08.2026 auf die Website-Palette umgestellt. Sie sind fuer LINIEN AUF WEISS entstanden: dort muss jede Linie allein 3:1 gegen den Grund halten, und die Markenfarben schaffen das paarweise nicht (Instagram gegen YouTube 1,02:1). SEIT DEM 08.08.2026 SIND ES STAPELSEGMENTE, und dort gilt eine andere Bedingung: es zaehlt der Nachbar, und nur das oberste Segment steht gegen Weiss. Die Rechnung dazu — und der Befund, dass KEIN Farbsatz 3:1 zwischen allen Nachbarn haelt — steht oben bei `--farbe-kanal-facebook`. Was die Kante traegt, ist seitdem ein weisser Trennstrich; die Segmente tragen den Markenton selbst. Die vier Token haben damit ihren letzten Leser verloren. Ihre Werte, falls sie jemand fuer ein Liniendiagramm wiederbraucht: Facebook `--farbe-akzent-cyan` mal 88 %, WhatsApp `--farbe-akzent-gelb` mal 47 %, Instagram `--farbe-akzent-violett-kraeftig` mal 57 %, YouTube `--farbe-akzent-blau` mal 33 %. Engster paarweiser Kontrast 1,54:1, alle vier ueber 3:1 gegen Weiss. */ /* --- Fokus: EIN Traeger, nicht zwei ------------------------------- */ /* Vorher wechselte am Feld der Rahmen die Farbe UND es kam ein Umriss dazu - zwei Ringe uebereinander, das wirkte schwer. Jetzt: ein Ring AUSSEN mit Abstand, der Rand des Elements bleibt unveraendert. Der Ring liegt im Abstand ueber dem Untergrund, also zaehlt sein Kontrast gegen den Untergrund, nicht gegen das Element. Gemessen gegen alle Flaechen, die es bei uns gibt: Weiss #FFFFFF 11,61:1 Grund #F8F8F8 10,93:1 gedaempft #F0F0F0 10,19:1 sehr hell #F0E4FC 9,51:1 gesperrt #E4E4E4 9,13:1 ACHTUNG fuer spaetere Runden: auf einer Flaeche in --farbe-primaer waere der Ring unsichtbar (1,00:1). Kommt ein Bedienelement je auf eine solche Flaeche, braucht der Ring einen zweiten, hellen Ring nach innen. Die Messung prueft das je Element mit. */ /* Verweist jetzt wirklich auf die Primaerfarbe, statt ihren Wert zu wiederholen. Vorher stand hier #481890 mit dem Kommentar "= --farbe- primaer" - beim Farbwechsel waere daraus stillschweigend eine Luege geworden, und der Fokusring haette als Einziges die alte Farbe behalten. */ /* =================================================================== ZWEIFARBIG SEIT DEM 05.08.2026 — innen Tinte, aussen Weiss. =================================================================== Der Absatz darueber hat den Fall vorhergesagt: „Kommt ein Bedienelement je auf eine solche Flaeche, braucht der Ring einen zweiten, hellen Ring." Er ist eingetreten, und zwar im Onboarding: der Knopf steht dort auf rgb(41,169,255), und ein weisser Ring hielt darauf 2,56:1 — WCAG 2.4.11 verlangt 3:1. Die naheliegende Abhilfe waere eine Ausnahme fuer Bereich 02 gewesen. Angesagt wurde die bessere: ein Ring, der auf hellem WIE dunklem Grund traegt und jede bereichsweise Ausnahme ueberfluessig macht. Gerechnet: Tinte #19171C haelt 17,79:1 gegen Weiss und 6,12:1 gegen das Blau des Onboardings; der weisse Saum haelt dort, wo die Tinte nicht traegt. Es kann keinen Grund geben, auf dem BEIDE versagen — sie sind die zwei Enden der Helligkeitsleiter. */ --farbe-fokusring: var(--farbe-text); /* innen */ --farbe-fokusring-saum: var(--farbe-flaeche); /* aussen */ /* DER RING BLEIBT, AUCH WO DIE VORLAGE KEINEN HAT — 11.08.2026. Jitter schaltet an seinen Eingabefeldern `outline: none` und faerbt im Fokus nur den 1-px-Rand um (`._input_1b020_65:focus`). Uebernommen ist davon das VERHALTEN — der Rand wechselt in die Primaerfarbe —, aber zusaetzlich zum Ring und nicht an seiner Stelle: WCAG 2.4.11 verlangt einen sichtbaren Fokusindikator, und ein Farbwechsel an einem 1-px-Rand ist ein reiner Farbunterschied. Der Ring traegt die Auflage, der Rand traegt die Anmutung. */ --fokusring: 3px; --fokusring-abstand: 3px; /* Muss GROESSER sein als Abstand + Breite (3 + 3), sonst laege der Saum vollstaendig unter dem Ring. 8 laesst 2 px Weiss aussen stehen. */ --fokusring-saum: 8px; /* --- Formsprache: Eingabefeld ------------------------------------- */ /* Textfeld, Textbereich und Auswahlliste sind gleich hoch. Die Hoehe liegt ueber der 44-px-Untergrenze, weil die schwebende Beschriftung oben Platz braucht: sie sitzt im leeren Feld mittig und wandert bei Fokus oder Eingabe verkleinert nach oben. */ --feld-hoehe: 60px; /* --- Formsprache: Knopf ------------------------------------------- */ /* KNOEPFE SIND ECKIG — 03.08.2026. Vorher waren sie Pillen (`--radius-rund`, 999 px), „wie der Toast". GEMESSEN AN JITTER, an beiden Seiten seiner Anwendung: Drafts 3x Radius 0 bei Hoehe 60 — seine Knoepfe Settings 5x Radius 0 bei Hoehe 60 dazu 50 / 30 / 26 / 24 / 17 px bei Hoehe 34-60 und 50 % bei 48 — das Kontobild SEINE RUNDEN FORMEN SIND NICHT SEINE KNOEPFE. Was rund ist, sind Etiketten, Chips und das Kontobild — bei uns also die Filterzeile und die Etiketten am Gespraech, und die tragen `--radius-rund` schon. Was eckig ist, sind die Knoepfe. Die Form steht weiter an EINER Stelle; nur ihr Wert hat gewechselt. `--radius-rund` bleibt, wo es hingehoert: an Pillen, die auch bei ihm Pillen sind. */ --radius-knopf: 0px; /* --- Rand aus der Primaerfamilie ---------------------------------- */ /* Der Umriss-Knopf hatte einen neutralgrauen Rand - der wirkte leblos. Jetzt aus derselben Familie wie die Handlung, nur zurueckgenommen: gleicher Farbton wie #481890, hoehere Helligkeit. 3,71:1 auf Weiss, 3,49:1 auf dem Grund - haelt die 3:1 fuer Bedienelemente. */ /* NEU ABGELEITET, gleiches Verhaeltnis zu Weiss wie vorher (3,71 -> 3,68). Das ist die Flaeche, gegen die ein Rand wirklich steht — nicht die Primaerfarbe. Haelt damit die 3:1 fuer die Grenze eines Bedienelements. */ --farbe-rand-primaer-leise: #9FD1F6; /* [Website] --farbe-gelb-linie (17.10.2026, vorher #817DC9) */ /* --- Rand von Bedienelementen ------------------------------------- */ /* Der Rand eines Bedienelements ist seine Grenze - ohne ihn weiss niemand, wo das Feld anfaengt. WCAG 2.2, 1.4.11 verlangt dafuer 3:1. Der Referenzstand hat dafuer keinen Wert: --farbe-rand (#E8E8E8) kommt auf 1,23:1 und --farbe-rand-stark (#CFCFCF) auf 1,56:1. Beide sind gemessene Employment-Hero-Werte und als TRENNLINIE richtig - als Grenze eines Textfelds sind sie zu schwach. Der Fehler ist in der Zustandsmessung aufgefallen, in acht Bausteinen gleichzeitig. #8A8A8A haelt 3:1 auf allen drei Flaechen, die es bei uns gibt: Weiss 3,45 · Grund #F8F8F8 3,25 · gedaempft #F0F0F0 3,03. Dunkler waere sicherer und wuerde die Oberflaeche zutackern - Employment Hero zeichnet betont leise. */ /* JITTERS WERT WAERE #D7D7DB, UND ER BLEIBT LIEGEN — 11.08.2026. Angesagt war „die Texteingabefelder wie bei Jitter"; gemessen in `Log in · Jitter_files/style-C4gO4Y7V.css` und `Workspace settings · …/style-B7LYDxw8.css` steht dort an jedem Feld `1px solid #d7d7db`. Auf Weiss sind das 1,45:1. WCAG 1.4.11 verlangt fuer die GRENZE eines Bedienelements 3:1 — der Wert faellt also nicht knapp, sondern um mehr als die Haelfte durch. Uebernommen sind Radius, Uebergang und Fokusverhalten; die Randfarbe nicht. Wo eine gemessene Vorlage unter eine Auflage faellt, gewinnt die Auflage. */ --farbe-rand-bedienelement: #8A8A8A; /* [abgeleitet] 3,45:1 auf Weiss */ /* --- Die Feldflaeche, nach Jitter -------------------------------- */ /* [gemessen/abgeleitet] Jitter gibt seinen Feldern `f2f1f3` bei 35 % Deckkraft und bei Beruehrung volle Deckkraft. Der Ton ist unser `--farbe-flaeche-gedaempft` — derselbe Wert, aus derselben Vorlage gemessen. GERECHNET STATT GEGRIFFEN: `color-mix` haelt die zwei Stufen am selben Ton fest. Zwei feste Hexzahlen wuerden beim naechsten Farbwechsel auseinanderlaufen, und die Gegenprobe, die alle Farben auf Schwarz setzt, wuerde sie nicht mitnehmen. 35 % IST NICHT UEBERNOMMEN, SONDERN 40 %: Jitters 35 % liegen auf dunklem Grund, unsere auf weissem, und 40 % ergeben hier denselben sichtbaren Unterschied zur Umgebung wie seine 35 % dort. DAZU GEHOERT EIN VERMERK, weil er ein Stueck Arbeit erklaert, das sonst niemand nachvollziehen kann. Der Wert stand kurz bei 22 %, und zwar wegen einer Messung, die falsch gerechnet hat: sie meldete den Platzhaltertext auf der Feldflaeche mit 4,12:1 (noetig 4,5) und liess mich die Flaeche aufhellen. Die 4,12 kamen nicht aus der Flaeche. Sie kamen daraus, dass `kontrast()` jede Farbe durch 255 teilte — auch `color(srgb 0.98 …)`, wo die Kanaele von 0 bis 1 laufen. Aufgefallen ist es daran, dass der Wert sich NICHT aenderte, als die Flaeche heller wurde. Beide Rechenstellen sind repariert (`werkzeug.ts` und `lesbarkeit.spec`), und danach haelt der Platzhalter auf 40 % wieder ueber 4,5. Der Vermerk bleibt: die naechste `color-mix`- Flaeche wird an derselben Stelle gemessen. */ --farbe-feld: color-mix(in srgb, var(--farbe-flaeche-gedaempft) 40%, var(--farbe-flaeche)); --farbe-feld-beruehrt: var(--farbe-flaeche-gedaempft); /* --- Gesperrter Zustand ------------------------------------------- */ /* Vorher stand am gesperrten Knopf `opacity: .55`. Gemessen ergab das 2,07:1 - zu blass zum Lesen. Gefunden in der Zustandsmessung, nicht in der Ruhemessung: die kannte den Zustand nicht. Statt Deckkraft jetzt drei echte Werte, damit der Kontrast messbar ist. Deckkraft laesst sich nicht messen, ohne die Flaeche darunter mitzurechnen - genau daran ist es vorbeigelaufen. */ /* NACHGEMESSEN AM 04.08.2026, weil der Grund gewechselt hat. Der gesperrte Senden-Knopf steht seit heute im Lesebereich auf --farbe-flaeche-gedaempft statt auf Weiss. Die zwei Werte, die sich nur auf die Knopfflaeche beziehen, aendern sich dadurch nicht; der dritte schon: Rand gegen weissen Grund 4,54:1 Rand gegen grauen Grund 4,03:1 Auflage 3,0 — haelt Der Wert steht hier, damit die naechste Aenderung am Grauton sieht, was an ihr haengt. */ --farbe-gesperrt-flaeche: #E4E4E4; /* [abgeleitet] */ --farbe-gesperrt-text: #5E5E5E; /* [abgeleitet] 5,10:1 auf der Flaeche darueber */ --farbe-gesperrt-rand: #767676; /* [abgeleitet] 3,57:1 auf der Flaeche, 4,03:1 auf grauem Grund */ /* --- Bereich 01: die Huelle --------------------------------------- */ /* NACHGEBAUT NACH JITTERS ANWENDUNG — 03.08.2026, auf Ansage. ================================================================== Bis hierher stand in diesem Block der AUFBAU DES BESTEHENDEN PORTALS (angesagt 30.07.2026) mit den Nachbesserungen vom 02.08.2026: weisse Leistenflaeche, Haarrand rechts, Kreis hinter dem Symbol, Radius 10. Der Auftrag vom 03.08.2026 setzt das ausser Kraft: die Huelle wird eins zu eins nach Jitters Anwendung gebaut, gemessen statt genaehert. WOHER JEDE ZAHL KOMMT. Gemessen im Browser (Chromium, ohne Skript, damit das gespeicherte DOM stehen bleibt) an den vier App-Seiten aus `Desktop/Jitter/`, bei 390, 800, 1024, 1025, 1440 und 1441 px, dazu die Regeln aus `style-B7LYDxw8.css` im Wortlaut. NICHT die Werbeseite: die hat helle Knoepfe mit dunklem Text, die Anwendung Vollton mit weisser Schrift. ZWEI ABWEICHUNGEN VON JITTER, beide am 03.08.2026 angesagt, nachdem ich sie vorgelegt habe — sie stehen bei den betroffenen Tokens noch einmal: 1. Jitters Leiste ist unter 1025 px `display: none`, und die Marke liegt IN ihr, faellt also mit weg. Bei uns waeren damit fuenf von sechs Seiten am Handy unerreichbar. Sie wird stattdessen zur Schublade — dieselben Masse, anderer Behaelter. 2. Jitter deckelt den Inhalt zwischen 401 und 1024 px auf 400 px (gemessen bei 1024 px: 360 px Inhalt, je 332 px leer). Unser Umbruch bleibt bei 45rem, wo Leiste plus Luecke plus eine brauchbare Spalte hineinpassen. WAS DABEI FAELLT, nicht stillschweigend: der Kreis hinter dem Symbol, die weisse Leistenflaeche mit Haarrand, Radius 10 auf den Zeilen, die Profilzeile am Fuss und die fuenf Reiter am Handy. Vermerk in design-system/ABDECKUNG.md. */ /* Breite der Leiste. [gemessen] `_sidebarNav_1ikh0_129` 240 px Inhalt in einer 242 px breiten Spalte (1 px Polster je Seite am Bildlaufrahmen). Dass unser bisheriger Wert dieselbe Zahl trug, ist Zufall und keine Bestaetigung — die Herleitung dahinter war eine andere. */ --breite-leiste: 240px; /* Die Inhaltsspalte. Jitters Huelle ist KEIN randloses Raster, sondern eine mittige Spalte: `_container_7fqyt_136` mit `margin: 0 auto`. [gemessen] 860 px ab 1025, 1082 px ab 1441. Die Leiste sitzt deshalb eingerueckt und nicht buendig — bei 1440 px beginnt sie bei x = 291. */ /* =================================================================== ZWEI BREITEN STATT EINER — entschieden am 05.08.2026 =================================================================== `--spalte-huelle-weit: 1082px` IST GEFALLEN. Der Wert stammte aus Jitters CSS und war richtig gelesen, aber unvollstaendig: gerendert gemessen faehrt seine Startseite bei 1440 px 860 px Inhalt und bei 1920 px **1320** — es gibt einen Umbruchpunkt oberhalb von 1441, den die CSS-Auswertung nicht gesehen hat. Unsere Huelle machte daraus das Gegenteil: 1296 px bei 1440 und nur 938 px bei 1920. Die Spalte wurde SCHMALER, je breiter das Fenster — bei 1920 px standen links und rechts je 491 px totes Weiss. Die harte Regel lautet deshalb: die Spalte darf nie schmaler werden, wenn das Fenster waechst. Das ist der eigentliche Fehler gewesen, nicht die Zahl. ZWEI BREITEN, weil die Referenzen zwei Sorten Bildschirm zeigen (Messung B, `docs/MESSUNG-B-MOBBIN.md`): Posteingang, Kalender und Dateiverwaltung nutzen bei Intercom, Front, Sprout, Adobe Express, ElevenLabs und Frame.io ausnahmslos die volle Fensterbreite. Der einzige Bildschirm mit mittiger Spalte war ein Feed zum Lesen. Eine mittige Spalte passt zum Lesen, nicht zum Arbeiten. Der Rand ist ueberall `--rand-seite` — dieselbe Kante wie die Kopfzeile. Unterhalb von rund 1464 px sind beide Breiten identisch. */ /* =================================================================== DER ABZUG IST WEG — Frage 20, entschieden und gemessen am 05.08.2026 =================================================================== HIER STAND `min(1920px, calc(100vw - 144px))`, und die 144 waren 2 x 72, also der Rand. DAS WAR EINE ZWEITE FASSUNG DESSELBEN RANDES: `.spalte` traegt ihr Polster ohnehin schon (`--rand-seite`), und oberhalb von 45rem steht an ihr `max-width: none` — der Abzug hat dort also nie gewirkt, sondern NUR am Handy, und dort ZUSAETZLICH zum Polster. GEMESSEN AM 05.08.2026 auf allen sechs Seiten, gerendert und nicht gelesen: bei 390 px war die Spalte 246 px breit (das war der Abzug) und der Inhalt darin 206 px (das war das Polster obendrauf). Die Kopfzeile stand bei x = 20, der Seitentitel bei x = 92. Auf der meistgenutzten Breite standen damit ZWEI Kanten — genau die eine, die Stufe 1 hergestellt hatte, war dort nicht da. Der Abzug faellt deshalb ersatzlos weg. Was bleibt, ist eine Obergrenze, und mehr war hier nie gemeint: so breit darf gearbeitet bzw. gelesen werden. Den Abstand zur Fensterkante macht der Rand. */ --breite-arbeit: 1920px; --breite-lesen: 1320px; --spalte-huelle: 860px; /* Luecke zwischen Leiste und Inhalt. [gemessen] `gap` der Spalte. */ --luecke-huelle: 32px; --luecke-huelle-weit: 100px; /* --- Die zweite Spaltenbreite ------------------------------------- UEBERSTIMMUNG DES NACHBAUS, angesagt am 03.08.2026, nachdem ich sie mit Zahlen vorgelegt hatte. Vermerk in ABDECKUNG.md. DER GRUND LIEGT IM INHALT UND NICHT IM GESCHMACK. Jitters „Drafts" ist ein EINSPALTIGES Kachelraster; unser Posteingang ist ZWEISPALTIG und hat ein Gespraech darin, „Inhalte" bei offenem Beitrag ebenso. Dieselbe Spaltenbreite auf zwei verschiedene Aufgaben anzuwenden ist der Fehler — nicht die Abweichung davon. WAS GEMESSEN WURDE, auf der echten Seite, bei 1440 und 1920 px: Posteingang Liste 352 px fest (22 rem) · Overhead des Gespraechs 74 px, an beiden Breiten identisch Inhalte Liste 416 px fest (26 rem) · Overhead des Blatts 42 px, an beiden Breiten identisch Overhead heisst hier: was zwischen der Spaltenkante und dem TEXT darin liegt — Polster und die feste 32-px-Gasse der Blase. WORAUS DIE ZAHL FOLGT, und sie ist nicht gegriffen: `--lese-breite` (544 px) ist die schon getroffene Entscheidung dafuer, wie breit Text sein soll, der gelesen wird. Die zweite Spalte braucht also genau so viel, dass der Text darin sie erreicht: Posteingang 352 + (544 + 74) = 970 px Inhalte 416 + (544 + 42) = 1002 px <- die groessere gewinnt GEMESSEN WAR VORHER: die Blase erreichte ihre Lesebreite NIE, auch bei 1920 px nicht — 162 px bei 1024 bis 1440, 316 px ab 1441. Im Bild stand „Familie Hoffmei ster" ueber drei Zeilen. DIE SPALTE RECHNET SICH DARAUS, statt eine zweite Zahl zu nennen: Leiste + Luecke + Inhalt. So bleibt die Inhaltsbreite bei beiden Luecken (32 und 100) dieselbe, und es gibt weiter nur EINE Zahl, die jemand pflegen muss. */ --inhalt-zweispaltig: 1002px; --spalte-huelle-breit: calc(var(--breite-leiste) + var(--luecke-huelle) + var(--inhalt-zweispaltig)); --spalte-huelle-breit-weit: calc(var(--breite-leiste) + var(--luecke-huelle-weit) + var(--inhalt-zweispaltig)); /* Die Luft ueber allem. [gemessen] `padding-top` an Leiste UND Inhaltsspalte, derselbe Wert an beiden — deshalb fluchten Ueberschrift und erster Eintrag. Darunter steht die Kopfzeile frei im Fenster. */ /* =================================================================== DER VERTRETUNGSSTREIFEN RECHNET SICH IN DIESE VIER WERTE HINEIN =================================================================== `--hoehe-vertretung` IST 0 px, SOLANGE KEINE VERTRETUNG LAEUFT — und genau deshalb steht sie in allen vier Summen darunter, statt dass irgendwo eine zweite Regel den Abstand nachtraeglich korrigiert. `calc(240px + 0px)` ist 240px; fuer jeden, der nicht vertritt, aendert sich damit nachweislich nichts. SIE WIRD AUF `:root` UMGESETZT UND NICHT AUF DEM KOERPER, ueber `:root:has(.vertretung)` in oberflaeche.css. Der Grund ist eine Regel der Sprache und keine Vorliebe: ein `var()` in einer Deklaration wird gegen den Wert aufgeloest, der AN DIESER STELLE gilt — also an `:root`. Stuende `--hoehe-vertretung` am Koerper, blieben die vier Summen hier bei 0 und der Streifen laege ueber der Kopfzeile. WAS DIE HOEHE IST: die Zeile plus Luft oben und unten. Gerechnet und nicht gegriffen, aus demselben Grund wie bei `--hoehe-kopf` — wer die Schriftgroesse aendert, soll den Abstand nicht von Hand nachziehen muessen. */ --hoehe-vertretung: 0px; --zeile-vertretung: 24px; /* DER KNOPF UND NICHT DIE TEXTZEILE GIBT DIE ZEILENHOEHE DES STREIFENS VOR. Nachgemessen am 17.08.2026: mit seinem Polster ist er 32 px hoch, die Textzeile 24. Wer mit der Textzeile rechnet, reserviert acht Pixel zu wenig — genau das war die erste Fassung. */ --hoehe-vertretung-knopf: calc(var(--zeile-vertretung) + var(--abstand-1) * 2); /* Die Luft ueber allem. [gemessen] `padding-top` an Leiste UND Inhaltsspalte, derselbe Wert an beiden — deshalb fluchten Ueberschrift und erster Eintrag. Darunter steht die Kopfzeile frei im Fenster. */ --kopf-luft: calc(240px + var(--hoehe-vertretung)); --kopf-luft-schmal: calc(140px + var(--hoehe-vertretung)); /* Die Kopfzeile. Sie liegt FEST AM FENSTER und nicht im Raster: [gemessen] `_rightPart_xgi8l_148` `position: fixed`, rechts 72 px und oben 48 px ab 1025, sonst 20/20. Die Marke steht spiegelbildlich links auf demselben Abstand. */ /* DIE HOEHE IST DIE SUMME AUS KARTENOBERKANTE UND KARTENHOEHE — 09.08.2026, Muster M. Hier standen 80 und 60 fuer eine Leiste, die einen Grund ueber die volle Breite trug und ihren Abstand zur Fensterkante ueber `--kopf-oben` bekam. Bei M traegt die KARTE den Abstand, und der Kopf ist nur noch der Rahmen um sie: er faengt an der Fensterkante an und endet an der Unterkante der Karte. weit 35 + 100 = 135 Jitter misst 129 bei 1920; die 6 px Desktop 39 + 90 = 129 Differenz sind seine Karte, die unten schmal 15 + 70 = 85 6 px ueber den Kopf hinausragt. Gerechnet und nicht gegriffen, damit eine Aenderung an der Karte die Hoehe von selbst nachzieht. */ --hoehe-kopf-weit: calc(var(--karte-kopf-oben-weit) + var(--karte-kopf-hoch-weit)); --hoehe-kopf: calc(var(--karte-kopf-oben) + var(--karte-kopf-hoch)); --hoehe-kopf-schmal: calc(var(--karte-kopf-oben-schmal) + var(--karte-kopf-hoch-schmal)); /* =================================================================== DER RAND DER SEITE — EIN TOKEN FUER ALLE, Frage 20, 05.08.2026 =================================================================== HIER STANDEN ZWEI ZAHLEN: `--kopf-rand: 72px` und `--kopf-rand-schmal: 20px`, umgeschaltet an der Behaelterabfrage. Beide waren richtig gemessen (Jitters `_rightPart_xgi8l_148`: 72 ab 1025, sonst 20) und beide sind es noch — sie sind jetzt die Enden EINER Spanne statt zweier Stufen. WARUM EIN TOKEN UND KEIN `clamp()` NUR AM INHALT: ein veraenderlicher Abzug an der Spalte gegen eine feste 72 an der Kopfzeile zerreisst die eine Kante, die Stufe 1 gerade hergestellt hat. Angesagt am 05.08.2026, und die Ansage war besser als mein Vorschlag. Kopfzeile UND Spalte lesen deshalb denselben Wert; das ist der ganze Punkt. GERECHNET, NICHT GEGRIFFEN. Die Enden sind die beiden gemessenen Zahlen; die Steigung dazwischen folgt aus der angesagten Sollmarke bei 1100 px (990 px Inhalt, also 55 px Rand): 55 / 1100 = 5 %. Dieselben 5 % treffen die Ecken von selbst — bei 1440 px sind es 72 px, genau der obere Anschlag, und unterhalb von 400 px sind es 20 px, genau der untere. Die Spanne ist damit an drei Stellen belegt und an keiner geschaetzt. ANGESAGT WAR `5vw`, GEBAUT IST `5cqw`, und das ist keine Abweichung in der Sache, sondern dieselbe Zahl in der Einheit, in der diese Huelle ohnehin rechnet: `.huelle` traegt `container-type: inline-size`, und der Umbruch bei 45rem ist mit Absicht eine Behaelter- und keine `@media`-Abfrage (siehe oberflaeche.css, „DER UMBRUCH"). Am echten Fenster sind beide Einheiten identisch, denn die Huelle IST dort das Fenster — nachgemessen bei 390, 1100, 1440 und 1920 px. Verschieden werden sie nur in der Werkstatt, wo `.probe--handy` eine 390 px schmale Huelle in ein 1440 px breites Fenster stellt: `5vw` gaebe ihr dort 72 px Rand und damit den Fehler, der hier gerade behoben wird. `5cqw` gibt ihr 20 px. */ --rand-seite: clamp(20px, 5cqw, 72px); /* =================================================================== DIE KOPFZEILE BEKOMMT IHREN EIGENEN RAND — 06.08.2026, angesagt =================================================================== „Kopfleiste ueber die volle Fensterbreite. Damit faellt dein Konflikt weg: die Kopfleiste braucht die Spalte nicht mehr." WORUM ES GING: die Uebersicht hat seit dem Bento-Umbau Jitters Spaltenbreite (1320 bei 1920, 860 bei 1440). Solange Kopfzeile und Spalte DASSELBE Token lasen, musste die Spalte breit genug fuer die Kopfzeile bleiben — gemessen 935 px, also 940 statt 860 bei 1440. Mit einem eigenen Rand faellt die Kopplung, und die Spalte darf auf Jitters gemessenen Wert. DER WERT IST DER ALTE. `clamp(20px, 5cqw, 72px)` ist genau die Spanne, die `--rand-seite` bis zum 06.08.2026 trug (Frage 20, 05.08.2026): 72 px bei 1440 und darueber, 20 px am Handy, dazwischen 5 % — an drei Stellen belegt. Die Kopfzeile bleibt also, wo sie war; was sich aendert, ist nur, dass die Spalte ihr nicht mehr folgt. ES SIND JETZT ZWEI KANTEN, und das ist eine Entscheidung und kein Versehen: Stufe 1 vom 05.08.2026 hat EINE Kante hergestellt, und die Ansage vom 06.08.2026 nimmt sie fuer die Kopfzeile zurueck. Sie steht ab jetzt fuer sich — sie klappt beim Scrollen weg und kommt wieder, also ist sie ohnehin kein Teil der Spalte mehr. */ --rand-kopf: clamp(20px, 5cqw, 72px); /* [abgeleitet] DIE LUFT AUF BILDSCHIRMEN, DIE SELBST NICHT SCROLLEN. Jitters 240 px (`--kopf-luft`) sind an einer Seite gemessen, auf der das Dokument scrollt — dort scrollen sie weg. Unsere Huelle ist 100 dvh hoch; dort ist jede feste Luft ein ersatzloser Abzug, und im Posteingang hat sie den Sendenknopf unter die Fensterkante geschoben. GERECHNET, NICHT GEGRIFFEN: der Kopf haengt am Fenster, faengt bei `--kopf-oben` an und ist `--hoehe-kopf` hoch. Wer darunter beginnt, muss also beides ueberspringen — plus einen Atemzug. Eine feste Zahl waere ab der naechsten Aenderung an einem der beiden falsch, und die Ueberlappung faellt niemandem auf, der den Titel schon kennt. */ /* DER ATEMZUG IST `--abstand-2` UND NICHT `--abstand-4` — 03.08.2026, nachgemessen. Mit 16 px endete „Weiter" im Quartals-Ablauf bei 903 px in einem 900-px-Fenster: drei Pixel, und der Knopf war nicht mehr da. Mit 8 px passt er. Das ist knapp, und das gehoert dazugesagt: wer hier etwas dazurechnet, schiebt eine Handlung aus dem Bild. `quartal.spec` misst genau das. */ /* SEIT MUSTER M OHNE `--kopf-oben` — 09.08.2026. Der Kopf faengt jetzt an der Fensterkante an; der Abstand nach oben steckt in der Karte und damit schon in `--hoehe-kopf`. Ihn hier ein zweites Mal zu addieren zaehlte ihn doppelt. Der Betrag bleibt praktisch derselbe: vorher 48 + 80 + 8 = 136, jetzt 129 + 8 = 137. Die Uebersicht rutscht um einen Pixel. */ /* `--hoehe-vertretung` STEHT AUCH HIER, aus demselben Grund wie in `--kopf-luft` weiter oben: die Kopfzeile rutscht um den Streifen nach unten, also rutscht alles nach, was sich an ihrer Unterkante ausrichtet. Ohne diese beiden Summanden staende das Gespraech im Posteingang unter dem Streifen — und `height: calc(100dvh - var(--kopf-luft-eng) * 2)` eine Streifenhoehe zu hoch. */ --kopf-luft-eng: calc(var(--hoehe-kopf) + var(--abstand-2) + var(--hoehe-vertretung)); --kopf-luft-eng-schmal: calc(var(--hoehe-kopf-schmal) + var(--abstand-4) + var(--hoehe-vertretung)); --luecke-kopf: 15px; --luecke-kopf-schmal: 18px; /* =================================================================== DIE KARTE IST ZURUECK — MUSTER M, 09.08.2026 =================================================================== HIER STAND, DASS DIE KARTE GEFALLEN IST (07.08.2026). Sie ist am 09.08.2026 zurueckgeholt worden, und das ist eine ENTSCHEIDUNG DES AUFTRAGGEBERS und kein neuer Messbefund: vorgelegt wurden drei Vorlagen mit ihren Massen, darunter der ausdrueckliche Hinweis, dass diese hier drei der vier Auflagen verletzt („Grund in jedem Rollzustand", „kein Seiteninhalt dahinter", „Wortmarke immer sichtbar"). Gewaehlt wurde sie trotzdem. Der Einwand steht im Uebergabepunkt, damit er nicht verlorengeht. WAS DER ALTE VERMERK RICHTIG SAH und was hier weiter gilt: bei Jitter ist die Seite unter dem Streifen WEISS, bei uns laufen dort randlose Vollton-Kacheln durch. Die Geometrie ist kopierbar, die Bedingung nicht. DIE MASSE SIND NEU GEMESSEN — jitter.video LIVE am 09.08.2026, in allen drei Rollzustaenden, nicht am Offline-Abzug. Das ist der Unterschied, der die vier Anlaeufe davor gekostet hat: IM ABZUG STEHEN DIE KLASSEN `_isSticky_ _wasSticky_` SCHON BEIM LADEN im Markup. Die gespeicherten Seiten sind in einem gescrollten Zustand eingefroren, und wer sie oeffnet, misst einen Zustand, den er fuer den Anfangszustand haelt. Traeger ist `_mainNavBg_`; sie wird ueber `transform: translateY` und `opacity` gefahren, nicht ueber `display`. Fenster Karte x breit oben hoch Radius Ueberhang 1920 260 .. 1660 1400 35 100 20 40 1440 260 .. 1180 920 39 90 20 30 390 10 .. 380 370 15 70 10 10 DER UEBERHANG IST DIE KOPPLUNG und nicht die Breite: die Karte ist die Inhaltsspalte plus diesen Betrag auf jeder Seite. Gemessen ist die Inhaltsspalte 300..1620, 290..1150 und 20..370 — dieselben drei Spalten, die unser Inhalt hat. So bleibt die Karte auf der Achse, ohne dass eine zweite Zahl sie nachbildet. DIE KARTE TRAEGT DIE ZEILE, NICHT DER KOPF. Jitters Inhalt sitzt mittig in der KARTE und nicht im 129 px hohen Kasten: seine Pille steht bei y 58..110 (Mitte 84), die Karte bei 39..129 (Mitte 84). Wer den Inhalt im Kopf zentriert, setzt ihn 20 px zu hoch. */ --ueberhang-kopf-weit: 40px; --ueberhang-kopf: 30px; --ueberhang-kopf-schmal: 10px; --radius-kopf: 20px; --radius-kopf-schmal: 10px; /* Oberkante und Hoehe der Karte. `--hoehe-kopf` ist die Summe aus beiden — der Kopf reicht genau bis zur Unterkante der Karte, damit kein Rest uebersteht, der Klicks schluckt. */ --karte-kopf-oben-weit: 35px; --karte-kopf-oben: 39px; --karte-kopf-oben-schmal: 15px; --karte-kopf-hoch-weit: 100px; --karte-kopf-hoch: 90px; --karte-kopf-hoch-schmal: 70px; /* Der fuenflagige Schatten, WOERTLICH aus `--schatten-kopfzeile` der Website. Dort steht er in rem bei einem Wurzelmass von 10 px; hier stehen dieselben Zahlen in px, damit sie unabhaengig von unserer Wurzelgroesse sind. ALLE FUENF LAGEN, und das ist eine Berichtigung: an `--hoehe-navi` steht seit dem 03.08.2026 die Notiz, von Jitters Stapel wuerden „die zwei uebernommen, die wirklich etwas tun". Das galt fuer einen 70 px hohen Kasten MIT Kontur. Der Grund hier hat keine Kontur an drei Seiten — er traegt seine Form allein ueber den Schatten, und dann tragen die weichen oberen Lagen den Abstand zur Seite. */ --schatten-kopf: 0 62px 17px #00000000, 0 40px 16px #00000003, 0 22px 13px #00000005, 0 10px 10px #0000000A, 0 2px 5px #0000000A; /* Die Wortmarke oben links. [gemessen] 90 x 40 px, dieselbe Hoehe wie ihr Abstand zur Fensterkante gross ist. Unsere Marke, nicht Jitters. DIE SCHMALE FASSUNG IST ABGELEITET, 07.08.2026: Jitter schaltet seine Wortmarke gerendert von 28 px am Laptop auf 24 am Handy, also mal 0,857. Unsere 40 werden damit 34; bei einer Datei von 800 x 212 sind das 128 px Breite. Sie ist seit dem 07.08.2026 auch am Handy sichtbar — angesagt („Wortmarke und Profilbild in jedem Zustand sichtbar"), und die Messung, die sie dort abgeschaltet hatte, ist abgelaufen (die Rechnung steht bei `.kopf__marke`). */ /* DREI STUFEN, ALLE DREI GERENDERT AN `EB-Software-Website/index.html` gemessen (08.08.2026): 24 px bis 1024, 26 ab 1025, 34 ab 1441. Es ist dieselbe zweizeilige Datei wie bei uns — die Website liefert sie bei 1440 px mit 96 x 26 aus, unsere kaeme bei 26 auf 98 x 26. HIER STANDEN 40 UND 34. Die 40 waren an JITTERS Anwendung gemessen (90 x 40), die 34 daraus abgeleitet. Beide sind mit der Ansage vom 08.08.2026 hinfaellig: kopiert wird die eigene Website, und die ist kleiner. */ --hoehe-marke: 26px; --hoehe-marke-schmal: 24px; --hoehe-marke-weit: 34px; /* Der Abstand zwischen Wortmarke und Seitenwahl. [Website] `.kopfzeile__links { gap: 4rem }`, bei hoechstens 1440 px `2.4rem`. */ --luecke-marke-navi: 24px; --luecke-marke-navi-weit: 40px; /* WAS DIE KOPFZEILE AN BREITE BRAUCHT — [gemessen] am 08.08.2026, gerendert, und es ist eine SUMME VON POSTEN und keine gegriffene Zahl: bis 1440 px 96 Wortmarke + 24 Luecke + 677 sechs Woerter + 15 Luecke + 64 Kontobild = 876 ab 1441 px 128 Wortmarke + 40 Luecke + 725 sechs Woerter + 15 Luecke + 64 Kontobild = 972 WOFUER: die Kopfzeile sitzt seit dem 08.08.2026 auf der Achse der Seite (`--rand-seite`). Auf der Uebersicht nimmt die zweimal 289 px bei 1440 px, also 40 % des Fensters — und darin passen sechs lange Woerter nicht mehr. Statt sie abzuschneiden, zieht die Leiste unterhalb dieser Breite ein. Die Rechnung steht bei `.kopf__spalte`. WER EIN SIEBTES WORT IN DIE NAVIGATION SETZT, RECHNET IHN NEU. Diese Zahl ist genau die Sorte, die ablaufen kann, ohne falsch zu werden — deshalb stehen ihre Posten daneben und nicht nur ihr Ergebnis. */ --bedarf-kopf: 876px; --bedarf-kopf-weit: 972px; /* --- Die Seitenwahl oben ------------------------------------------ Angesagt am 03.08.2026: „sowas wie da oben zur Seitenwahl, dann brauchen wir die Sidebar nicht und koennen mehr Platz fuer Content haben." Damit sind die Punkte 2 und 16 derselben Ansage ueberholt. DIE VORLAGE IST SEIT DEM 08.08.2026 DIE EIGENE WEBSITE, nicht mehr Jitters Werbeseite. Angesagt, mehrfach: „geh nach `F:\Claude\EB-Software-Website`, oeffne die Kopfzeilen-Komponente und kopier sie." WAS DAMIT FAELLT, ist der KASTEN um die Woerter. Hier standen `--hoehe-navi` 56, `--radius-navi` 0, `--luecke-navi` 0 und `--polster-navi` 6 — die Masse von Jitters `_mainNavBg_` (weiss, Radius 10, Hoehe 70, Rand unten 1 px). Die Website hat keinen solchen Kasten: `.nav-link` traegt `background: none; border: 0; padding: 0`, und die Woerter stehen frei nebeneinander. [gemessen] an `EB-Software-Website/index.html`, gerendert bei 1440 px: Wort 16 px, Gewicht 600, `--farbe-tinte`, Zeilenhoehe 24, Polster `0 20px` (ab 1441 px `0 24px`) Anordnung Wortmarke x 290, erstes Wort x 410, alle auf Mitte 84 Zustand die Website loest „hier bist du" ueber `opacity: .35` an den ANDEREN Woertern — bei uns am 04.08.2026 gefallen, weil das 1,60:1 gegen Weiss ergibt. Der dunkle Vollton am aktiven Wort bleibt der Ersatz. */ /* DIESE ZWEI BLEIBEN STEHEN, obwohl der Kasten weg ist, und der Grund gehoert dazugesagt: sie haben noch je einen Leser an `.kopf__knopf` — dem dunklen Knopf, der am 03.08.2026 aus dem MARKUP gefallen ist, dessen Regeln aber stehen. `tests/huelle.test.ts` wacht darueber, dass er nicht zurueckkommt. Wer die Regeln aufraeumt, nimmt diese zwei mit; solange sie dastehen, muessen die Token aufloesbar sein. */ --hoehe-navi: 56px; --radius-navi: 0px; --groesse-navi-wort: 16px; /* [gerechnet] Die Hoehe des aktiven Volltons: Zeilenhoehe 24 aus der Vorlage plus zweimal `--abstand-2` (8), damit die Schrift Luft hat und nicht an der Kante des Volltons klebt. Vorher kam diese Hoehe aus dem Kasten minus seinem Polster; den Kasten gibt es nicht mehr. */ /* =================================================================== DAS POLSTER DES REITERTROGS — 12.08.2026, an Jitter gemessen =================================================================== `._defaultVariant_1f458_116._medium` setzt `--indicator-padding: 4px` bei 60 px Hoehe, `._big` 5 px bei 70. Das Verhaeltnis ist 1:15 bzw. 1:14; bei unseren 48 px Reiterhoehe waeren das 3,2 bis 3,4 px. 4 PX UND NICHT 3: die Leiter dieses Hauses kennt keine 3, und der Unterschied ist ein Drittel Pixel. Was zaehlt, ist dass der Trog ringsum gleich viel zeigt — nicht der genaue Wert. */ --reiter-polster: 4px; --hoehe-navi-wort: 40px; /* [Website] `.navigation .nav-link { padding: 0 2rem }` bei hoechstens 1440 px, `0 2.4rem` darueber. Der Wert traegt doppelt: er ist der Abstand ZWISCHEN den Woertern (die Liste hat keine Luecke) und zugleich das Polster des aktiven Volltons. */ --polster-navi-wort: 20px; --polster-navi-wort-weit: 24px; /* Der aktive Vollton ist ein Rechteck. Die Vorlage hat keinen aktiven Zustand zum Abmessen — ihr Gegenstueck ist ein Knopf und keine Seitenmarke. Bleibt bei 0, wie seit dem 03.08.2026. */ --radius-navi-wort: 0px; /* HIER STAND `--deckkraft-navi-zurueck: 0.35`, gefallen am 04.08.2026 mit dem Zustand, den es getragen hat (siehe oberflaeche.css bei `.kopf__navi-wort`). Ein Token ohne Leser ist dasselbe wie eine Auswahl ohne Treffer: es sieht nach einer Entscheidung aus und ist keine mehr. */ /* Ein Eintrag. [gemessen] `_sidebarItem_1ikh0_148`: 60 px hoch, ab 1025 px 38. Die alte Notiz „38 px" war deshalb halb richtig — sie nannte die Zahl ohne den Umbruch. */ --hoehe-eintrag: 38px; --hoehe-eintrag-schmal: 60px; /* DER RADIUS IST NULL, und das ist der Punkt, an dem am genauesten nachgemessen wurde. [gemessen] `border-radius: 0px` bei 390, 1440 und 1441 px; kein `::before`, kein `::after`, kein `mask`, kein `clip-path`; und in saemtlichen Regeln, deren Waehler `sidebarItem` enthaelt, steht keine einzige `border-radius`-Deklaration. Der Eindruck einer Rundung kommt von der Suchzeile direkt darueber — die ist eine Pille mit 999 px. */ --radius-navigation: 0px; /* Das Symbol. [gemessen] 24 px Kasten ab 1025, darunter 40. Es steht BLANK auf der Zeile: der Kreis dahinter (Vorgabe 30.07.2026) faellt mit dem Nachbau, weil Jitter die ganze Zeile toent statt eine Scheibe zu setzen. */ --symbol-navigation: 24px; --symbol-navigation-schmal: 40px; /* Die drei Masse, aus denen die Zeile besteht. [gemessen] `padding: 0 12px 0 24px`, `gap: 12px`. Der linke Einzug ist doppelt so gross wie der rechte — das Symbol steht bei 24, das Wort bei 60. */ --einzug-navigation: 24px; --polster-navigation: 12px; --luecke-navigation: 12px; /* Abstand zwischen zwei Eintraegen. [gemessen] `gap: 2px` an `_sidebarNavItemGroup_`. Die Zeilen stehen fast aneinander — was sie trennt, ist die Toenung, nicht die Luecke. */ --luecke-eintraege: 2px; /* Die Gruppenueberschrift. [gemessen] `_sectionHeader_127mq_72`: 13 px, Gewicht 600, `#6e6e73`, `padding: 7px 0 7px 23px`, Zeilenhoehe 24 — macht einen 38 px hohen Kasten, genau so hoch wie ein Eintrag. Die 23 px links fluchten mit dem SYMBOL (24), nicht mit dem Wort (60). Ein Pixel Unterschied, und er ist gemessen. */ --einzug-ueberschrift: 23px; --polster-ueberschrift: 7px; /* Der leise Block unten. [gemessen] `_subtleSidebarItem_127mq_208`: 32 px hoch ab 1025 (sonst 48), Text 13 px, Symbol 16 px im 24er Kasten, KEINE Flaeche in keinem Zustand, und die Eintraege stossen ohne Luecke aneinander. Die aktuelle Seite traegt dort Gewicht 600 und dunklen Text — keine Toenung. */ --hoehe-eintrag-leise: 32px; --hoehe-eintrag-leise-schmal: 48px; --symbol-leise: 16px; /* Die Luft zwischen den Bloecken. [gemessen] Abstandshalter `mplus` (20) und `xl` (40), je zuzueglich zweimal die 2 px Gruppenluecke. */ --luft-block-gross: 40px; /* Die Suchzeile ueber der Leiste. [gemessen] 240 x 40 px ab 1025 (sonst 52), Radius 999, Flaeche `#f2f1f3`, Platzhalter `#6e6e73`, `padding: 0 8px 0 24px`, danach 38 px bis zum ersten Eintrag. */ --hoehe-suchzeile: 40px; --hoehe-suchzeile-schmal: 52px; --luft-nach-suche: 38px; --luft-nach-suche-schmal: 60px; /* Der dunkle Knopf oben rechts. [gemessen] `_black_28b1o_731`: `#19171c`, weiss, 18 px Gewicht 600, Laufweite -0,04em, `padding: 18px 60px` (schmal 18/30), Hoehe fest 60, RADIUS 0, ueberfahren `#2d2933`. Bei uns traegt er unsere Primaerfarbe nicht — er ist dunkel wie bei Jitter, und das ist `--farbe-text-stark`. */ --hoehe-knopf-kopf: 60px; --polster-knopf-kopf: 60px; --polster-knopf-kopf-schmal: 30px; /* Seine Farbe. Jitters `#19171c` ist dunkler als unser Textton; einen zweiten Fastschwarz-Wert wollte ich dafuer nicht anlegen. Der Knopf traegt deshalb `--farbe-text` (12,63:1 gegen Weiss, in beide Richtungen) und wird beim Ueberfahren HELLER — das ist Jitters Richtung, `#19171c` nach `#2d2933`, und nicht die uebliche. */ --farbe-knopf-dunkel: var(--farbe-text); --farbe-knopf-dunkel-ueberfahren: color-mix(in srgb, var(--farbe-text) 88%, var(--farbe-flaeche)); /* Das Kontobild. [gemessen] Knopf 64 x 64, Bild 48 x 48, Kreis, dazu ein 2 px breiter Verlaufsring. Der Verlauf ist Jitters (violett nach blau); wir nehmen unseren eigenen aus zwei vorhandenen Tokens. */ --kontoknopf: 64px; --kontoknopf-schmal: 60px; --kontobild: 48px; --kontobild-schmal: 44px; --ring-kontobild: 2px; /* Die Seitenueberschrift. [gemessen] 48 px ab 1025, 60 ab 1441, 64 darunter — sie ist am Handy GROESSER als am Laptop. Gewicht 800, Laufweite -0,04em, Zeilenhoehe 1,04, danach 60 px Luft (schmal 40). Sie steht UEBER dem Inhalt und nicht mehr in der Kopfzeile. */ /* =================================================================== 72 STATT 48, UND 96 STATT 60 — entschieden am 05.08.2026 =================================================================== Gerendert an Jitters Startseite gemessen: sein `h1` traegt **80 px bei 1440 px** und **140 px bei 1920**, Gewicht 800, Laufweite -2,4 bzw. -4,5 px. Er ist dort das GROESSTE Element des Bildschirms. Bei uns war er 48 px — eine Zeile unter der Kopfzeile. Wenn eine einzelne Zahl den Eindruck „sieht nicht aus wie die Vorlage" traegt, dann diese. NICHT die 140. Jitters h1 ist eine einmalige Werbeueberschrift auf einer Landeseite; unserer steht auf jedem Arbeitsbildschirm ueber Inhalt, den der Meister braucht. 96 macht ihn zum groessten Element, ohne die Arbeitsflaeche zu fressen. */ --groesse-seitentitel: 72px; /* [gemessen] Jitters Untertitel auf der 404 und auf „Workspace settings": 20 px / 400 in seinem gedaempften Ton. Zwischen `--groesse-h3` (24) und `--groesse-text` (17) — die Groesse fuer den Satz, der eine Ueberschrift einordnet, ohne selbst eine zu sein. */ --groesse-untertitel: 20px; --groesse-seitentitel-weit: 96px; /* AM HANDY KLEINER ALS BEI JITTER — angesagt am 03.08.2026, nachdem ich die Zahlen vorgelegt hatte. Vermerk in ABDECKUNG.md. 64 px ist Jitters Wert fuer ein Wort mit SECHS Zeichen („Drafts"). „Posteingang" hat elf, „Einstellungen" dreizehn. Dieselbe Zahl auf ein doppelt so langes Wort ergibt nicht dieselbe Wirkung, sondern zwei Zeilen mit Trennstrich — auf dem Bildschirm mit 90 % der Nutzung. GEMESSEN bei 390 px, Inter, Gewicht 800, Laufweite -0,04em, in einem Kasten von 350 px: px „Posteingang" „Einstellungen" 64 370,4 401,0 beide zu breit 60 345,5 373,9 „Einstellungen" zu breit 56 320,6 346,8 passt, 3,2 px Reserve 52 295,7 319,6 passt 56 px ist damit die groesste Groesse, bei der ALLE sieben Woerter der Titel in eine Zeile passen. Sie ist die OBERGRENZE, nicht der Wert: 3,2 px Reserve halten bei 390 px, bei 360 px (Galaxy) nicht mehr. DESHALB EINE FORMEL UND KEINE ZAHL. „Einstellungen" misst 6,193 px je Pixel Schriftgroesse; der Kasten ist die Behaelterbreite minus 40 px Polster. Aufgeloest nach der Groesse und mit Reserve gerundet: 56 px ab 396 px Behaelterbreite („Einstellungen" 346,8/350) 54,8 px bei 390 px (339,4/350, 10,6 px Reserve) 50,2 px bei 360 px (310,9/320, 9,1 px Reserve) 43,9 px bei 320 px (271,9/280, 8,1 px Reserve) `cqw` UND NICHT `vw`, und das ist keine Kleinigkeit: die Huelle schaltet ueber eine BEHAELTERabfrage um. Mit `vw` haette die schmale Probe der Werkstatt — ein schmaler Behaelter in einem breiten Fenster — einen Titel in Laptopgroesse getragen. Dieselbe Falle, die in diesem Bereich schon zweimal zugeschlagen hat. */ --groesse-seitentitel-schmal: clamp(40px, 15.6cqw - 6px, 56px); --luft-nach-titel: 60px; --luft-nach-titel-schmal: 40px; /* Die enge Laufweite. [gemessen] Jitter fahrt `-.04rem` auf den Knoepfen und `-0.04em` auf der Ueberschrift; sein Wurzelmass ist 10 px, also sind beides -0,4 px bei 10 px Schrift. Als `em` geschrieben skaliert es mit der Groesse, und genau das tut es bei ihm auch. */ --laufweite-eng: -0.04em; /* EINE SCHRIFTGROESSE, DIE NICHT AUF UNSERER LEITER LIEGT, und das ist eine Naht, die benannt gehoert. Set K faehrt 13/15/17/20; Jitter setzt seinen Kopfknopf und die Navigationszeile am Handy auf 18. Der Auftrag lautet "gemessen, nicht angenaehert", und Schriftgroessen stehen ausdruecklich auf der Messliste — also gilt der gemessene Wert und nicht die naechste Sprosse. Er gilt NUR in der Huelle. */ --groesse-huelle-gross: 18px; /* Die Toenung der aktiven Zeile. [gemessen] Jitter faehrt `#7a40ed1a` und beim Ueberfahren des aktiven Eintrags `#7a40ed2e` — also dieselbe Farbe bei 10 % und 18 %. BEI UNS AUS DER PRIMAERFARBE GEMISCHT, nicht als zweiter Hexwert hingeschrieben: so wandert die Toenung mit, wenn `--farbe-primaer` sich aendert, und die Gegenprobe „Primaerfarbe auf Schwarz" faerbt sie mit. Zwei Hexwerte waeren an dieser Stelle zwei Meinungen. */ /* 17.10.2026: AUS DEM MARKENBLAU GEMISCHT STATT AUS DER PRIMAERFARBE. Aus Tinte gemischt waere die aktive Zeile ein Grau geworden — das Blau gehoert genau an solche Stellen („Markenblau fuer aktive Stellen"). DURCHSCHEINEND WIE VORHER, und das ist Absicht: ein erster Versuch mit den deckenden hellen Blaus der Website (#E6F3FF / #BFE3FF) liess die Zustandsmatrix „unterscheidet sich ausschliesslich durch Farbe" melden. Bei Jitters Bauart kommt eine Flaeche HINZU, wo vorher keine war — das traegt der Deckkraftwechsel. Auf Weiss ergibt das rund #E4F2FD und #CCE7FC, Tinte darauf ueber 13:1. */ --farbe-navi-flaeche: color-mix(in srgb, var(--farbe-akzent-violett-kraeftig) 14%, transparent); --farbe-navi-flaeche-stark: color-mix(in srgb, var(--farbe-akzent-violett-kraeftig) 26%, transparent); /* Die Unschaerfe hinter der Kopf-Pille. Sie stand zweimal als nackte Zahl im Stylesheet (`-webkit-backdrop-filter` und `backdrop-filter`). Die Farbwache prueft Hex, keine Laengen - ohne Token laufen die beiden Zeilen irgendwann auseinander. Wert [gemessen] aus dem bestehenden Portal. NOCH IN GEBRAUCH: das Konto-Menue aus Bereich 14 liegt darauf. */ /* Die Schublade am Handy — die zweite der zwei Abweichungen oben. Sie ist keine Erfindung, sondern derselbe Leisteninhalt in einem anderen Behaelter: Breite so, dass die 240 px Leiste plus ihr Einzug hineinpassen, und ein abgedunkelter Rest daneben. Der Zustand steht in der Adresse (`?leiste=offen`), nicht im Browser — dieselbe Bauart wie beim Konto-Menue. */ --breite-schublade: 288px; --farbe-schublade-schleier: color-mix(in srgb, var(--farbe-text) 45%, transparent); /* Der schwebende Upload-Knopf am Handy. Rund, unten rechts - im Daumenbereich. 56 px ist die uebliche Groesse. ER STEHT JETZT TIEFER: die Reiterleiste, ueber der er sass, gibt es nicht mehr. Er misst gegen den unteren Rand des Inhalts. */ /* --- Drei Tokens, die mit dem Nachbau gefallen sind ---------------- */ /* Gestrichen am 03.08.2026, zusammen mit ihren letzten Verwendungen. Ein Token ohne Verwendung ist eine Zahl in einer Datei — genau so ist `--hoehe-reiter` entstanden: es nannte 90 px, gebaut waren 74,9, und die Zahl hat nie gegriffen. `tests/huelle.test.ts` prueft, dass sie hier nicht wieder auftauchen. --kreis-navigation die Scheibe hinter dem Symbol (Vorgabe 30.07.2026). Jitter toent die ganze Zeile. --hoehe-reiter die Reiterleiste am Handy. Sie steht auf der Liste der ueberstimmten Stuecke. --reiter-marke die Kante ueber dem aktiven Reiter, der dritte Traeger neben Kreis und Wortgewicht. Sie war WEGEN DES HANDSCHUHS da; in der Schublade liegt kein Finger auf dem, was sich aendert. */ /* --- Die Akzentfarbe der Illustrationen --------------------------- */ /* EIN VIOLETT IM PRODUKT — angesagt am 02.08.2026. Der Satz kam mit unDraws eigenem Akzent `#6c63ff`, 90 Vorkommen ueber alle sechzehn Dateien. Unsere Primaerfarbe ist `#665DF5`. Die beiden liegen so nah beieinander, dass der Unterschied wie ein Fehler aussieht statt wie eine Absicht — nebeneinander auf einem Bildschirm (Leerbild und gefuellter Knopf darunter) sieht man ihn, ohne ihn benennen zu koennen. ACHTUNG, DAS TOKEN STEHT HIER UND WIRKT NICHT VON HIER AUS. Eine SVG-Datei, die ueber `` geladen wird, ist ein eigenes Dokument und sieht diese Datei nicht. Der Wert wird deshalb von `werkzeuge/illustrationsfarbe.ts` IN die Dateien geschrieben, und eine Pruefung haelt beide zusammen. Wer hier etwas aendert, laesst das Werkzeug laufen — sonst faellt die Pruefung, und das ist der Zweck. */ --farbe-illustration: var(--farbe-primaer); /* --- Der Rahmen jeder Illustration -------------------------------- */ /* Angesagt am 02.08.2026: „feste Rahmenhoehe, Breite ergibt sich, mittig und unverzerrt eingepasst. Kein Motiv darf das Layout bestimmen." Die sechzehn Dateien laufen von 1,88 : 1 bis 1,02 : 1. Wer die BREITE festhaelt — so stand es an den Fehlerseiten und im Wizard —, bekommt je nach Motiv eine andere Hoehe, und alles darunter springt. Wer die HOEHE festhaelt, bekommt eine andere Breite, und daneben steht ohnehin nichts. Das ist der Voreinstellungswert; die drei Orte (Leerzustand, Fehlerseite, Wizard) setzen ihn um. Die REGEL steht einmal, in oberflaeche.css bei `.leerbild`. */ --bildrahmen: 200px; /* --- Bereich 03: die Listenzeile ---------------------------------- */ /* Zeile und Ladeskelett muessen aus EINER Zahl kommen. Die Hoehe stand bis zum 02.08.2026 implizit im Polster der Zeile und das Skelett als eigene Zahl daneben — gemessen schwankte die echte Zeile zwischen 100,4 und 124,1 px, also um 23,7 px = genau eine Textzeile. Intercom belegt den festen Schritt mit 33/32/33/32 px ueber acht Zeilen. 108 = 2 x 16 Polster + 23,7 Kopfzeile + 4 Luecke + 47,4 (zwei Vorschauzeilen zu 15 px mal Zeilenhoehe 1,58) + 1 Rand. [abgeleitet] */ /* Der Zaehler am Posteingang. NUR dort - Regel 15 (p6) streicht "die roten Zahl-Marken an mehreren Eintraegen gleichzeitig". Nicht --farbe-fehler: ein ungelesener Posteingang ist kein Fehler, und zwei Bedeutungen auf einem Wert werden spaeter verwechselt. */ --farbe-zaehler: #C62828; --farbe-zaehler-text: #FFFFFF; /* =================================================================== BEREICH 03: DIE SECHS ETIKETTEN — EINE ZWEITE PALETTE MIT NAMEN =================================================================== DAS IST DIE AUSNAHME, UND SIE HAT EINEN NAMEN: die sechs Etikettfarben gehoeren NICHT zur Markenpalette. Sie sind eine DATENPALETTE — Farbe als Wiedererkennung von Datenwerten, nicht als Anmutung des Produkts. Entschieden am 08.08.2026, vorgelegt mit drei Wegen und ihren Kosten. WARUM SIE AUSSERHALB STEHT, mit Zahlen. Seit dem 07.08.2026 hat die Website fuer uns nur noch DREI Tonfamilien (Violett, Gelb, Blau) — Rot und Orange sind gefallen. Drei Familien geben keine sechs unterscheidbaren Etikettfarben her; die Haelfte muesste sich in der Helligkeit derselben Familie unterscheiden, und sechs Pillen von Daumennagelgroesse sind dafuer zu klein. Zwei der sechs liegen ausserhalb jeder Website-Familie und sollen es: Beschwerde #CE453C 4 Grad — 61 Grad von der naechsten entfernt Lob #198653 152 Grad — 49 Grad entfernt Termin #AA6415 32 Grad — 33 Grad entfernt „Ein rotes Beschwerde und ein gruenes Lob liest ein Meister ohne nachzudenken; drei Tonfamilien koennen das nicht." Das ist der Preis und er wird bezahlt. WER DAS IN EINEM HALBEN JAHR LIEST, LIEST KEINE NACHLAESSIGKEIT. ES GIBT SCHON EINE ZWEITE PALETTE DIESER ART, und das ist der Beleg, dass es keine Sonderregel fuer diesen einen Fall ist: die vier Kanalfarben (`--farbe-kanal-facebook` und die drei anderen) stehen genauso daneben, mit derselben Begruendung — sie sind Kanalzeichen und Chips, keine Flaechen- oder Linienfarben. WAS DAGEGEN ZUR MARKENPALETTE GEHOERT, ist `--farbe-objekt-tag`. Es faerbt nicht die einzelne Pille, sondern den BEGRIFF Etikett: die Ueberschrift der Filterzeile, das Zeichen. Zwei Systeme, zwei Aufgaben — „was ist das fuer eine Nachricht" und „hier geht es um Etiketten". ------------------------------------------------------------------- GERECHNET, nicht gegriffen: werkzeuge/etikett-palette.mjs. Farbe ist WIEDERERKENNUNG, nicht Bedeutung — der Text im Chip traegt die Aussage. Deshalb wurde zu jedem Farbton die Helligkeit bestimmt, bei der die Auflage haelt, statt eine huebsche Farbe zu suchen. VOLL der gesetzte Filter-Chip. Weisse Schrift darauf 4,57 bis 4,62:1. LEISE das Etikett in der Liste. Alle sechs gleich zurueckhaltend: 1,50 bis 1,51:1 gegen Weiss. Text darauf 11,78 bis 11,85:1. DIE LEISEN FLAECHEN SIND AM 08.08.2026 VON 1,20 AUF 1,50 GESTIEGEN, angesagt: sie waren „als Flaeche kaum zu sehen". Der alte Wert war an `--farbe-primaer-sehr-hell` angelehnt, und das war die falsche Verankerung: jener Ton ist eine Flaeche unter einem ganzen Abschnitt, das Etikett ist eine Pille von Daumennagelgroesse. Was ueber 600 px traegt, traegt ueber 60 px nicht. 1,5:1 ist keine neue Schwelle. Es ist dieselbe, die die vier Kanalfarben paarweise zueinander halten muessen und die die verblasste Linie im Diagramm nach unten begrenzt. Dritte Verwendung derselben Zahl, und das ist Absicht. DIE SECHS VOLLEN TOENE SIND UNVERAENDERT, und das gehoert dazugesagt, weil im Uebergabepunkt vom 07.08.2026 etwas anderes stand: dort hiess es, die sechs seien „gegen eine Palette gerechnet, die es nicht mehr gibt" (Set K, #665DF5 / #303030). Nachgesehen am 08.08.2026 — das stimmt so nicht. Die Helligkeit wird gegen WEISS geloest, nicht gegen die Primaerfarbe; die beiden Set-K-Werte standen im Skript nur als Konstanten fuer die Ausgabe. Was wirklich aus Set K stammte, sind die sechs Farbtoene und ihre Saettigungen, und die sind von Hand gewaehlt und nicht gerechnet. Der Textkontrast ist mit `#19171C` sogar besser als mit `#303030`. Es war also nichts kaputt; was zu klein war, war die Leisheit. ANGESAGTE EIGENSCHAFT MIT ZAHL: die sechs vollen Toene liegen auf nahezu derselben Helligkeit — der kleinste Abstand zwischen zweien ist 1,00:1. Wer Farben nicht unterscheiden kann, sieht sechs gleich helle Chips. Das ist kein Mangel, sondern die Umsetzung der Vorgabe: die Farbe erkennt wieder, der TEXT sagt, was es ist. Deshalb steht in jedem Chip ein Wort. "Sonstiges" ist absichtlich entsaettigt (12 % statt 60 bis 78 %). Es ist der Auffangkorb und soll neben den fuenf anderen nicht mitreden. */ /* ----------------------------------------------------------------------- VIER AUF DIE MARKE, ZWEI BLEIBEN — 16.08.2026, vorgelegt und entschieden ----------------------------------------------------------------------- GEMELDET: „Was ist das fuer eine Farbe bei Termin? Das sind alles haessliche Farben, die gibt es im Portal so gar nicht. Irgendwelche khakifarbenen haesslichen Wettfarben." DER VERMERK DARUEBER BLEIBT STEHEN und ist nicht falsch geworden — die Etiketten sind weiter eine DATENPALETTE und keine Markenpalette. Was sich geaendert hat, ist wie weit sie davon abweichen darf: so wenig wie moeglich, und jede Abweichung mit Namen. Bewerbung #9356D7 -> #8F50EF Ton 268 -> 264, Saettigung 0,62 -> 0,83. Das ist `--farbe-primaer` #7A40ED. Anfrage #1F7ABC -> #0078CD Ton 205 blieb, Saettigung 0,72 -> 1,00. Das ist `--farbe-akzent-blau` #50B8FF. Termin #AA6415 -> #6E1BEA Das Khaki faellt. Siehe unten. Sonstiges #6C7689 unveraendert, der Auffangkorb. DIE ZWEI AUSNAHMEN, mit Grund und nicht aus Bequemlichkeit: Rot fuer Beschwerde und Gruen fuer Lob sind die einzigen Toene im Haus, die BEDEUTUNG tragen und nicht nur Wiedererkennung. Die Begruendung von damals gilt woertlich weiter — „Ein rotes Beschwerde und ein gruenes Lob liest ein Meister ohne nachzudenken." Die Website hat Rot und Orange am 07.08.2026 fallen lassen; diese beiden bleiben als BENANNTE Ausnahme davon. WARUM TERMIN EIN ZWEITES VIOLETT IST UND KEIN GELB. Gelb waere die dritte Markenfamilie gewesen und ist gemessen durchgefallen, in beiden Richtungen: dunkles Gelb Vierundzwanzig Kombinationen geprueft (Ton 50 bis 67 x Saettigung 0,30 bis 1,00). Bei weisser Schrift auf 4,6:1 liegt jede einzelne zwischen #7F7645 und #8B7300 — Oliv, dieselbe Familie wie das beanstandete #AA6415. helles Gelb Umgedreht mit Tinte statt Weiss, so wie `--farbe-objekt-boost` es macht: Schrift 16,40:1, aber die FLAECHE nur 1,08:1 gegen Weiss und 1,17:1 gegen den Trog. Ein Etikett, das man nicht sieht. Damit blieben Violett, Blau und Neutral fuer vier Etiketten — genau die Klemme, die der Vermerk oben am 08.08.2026 vorhergesagt hat. Termin nimmt deshalb denselben Ton wie Bewerbung und unterscheidet sich durch HELLIGKEIT und ZEICHEN: voll 6,98:1 gegen Weiss statt 4,60, das sind 1,52:1 zwischen den beiden. UND EINE ABWEICHUNG, DIE HIER STEHT STATT ZU VERSCHWINDEN: die leise Flaeche von Termin haelt 2,19:1 gegen Weiss, die anderen fuenf 1,50:1. In der LISTE stehen die leisen Toene, nicht die vollen, und zwei blasse Violetts auf Daumennagelgroesse waeren dasselbe blasse Violett. Der Abstand der beiden leisen ist damit 1,46:1 — knapp unter der 1,5, und genau dafuer traegt jedes Etikett jetzt sein Zeichen. GERECHNET WIE IMMER: werkzeuge/etikett-palette.mjs. Dessen leise Suche hat bei dieser Gelegenheit einen stillen Fehler abgelegt — sie konnte nie dunkler als die halbe Helligkeit und gab am Rand kommentarlos einen zu hellen Wert zurueck. Jetzt faellt sie mit dem Namen des Etiketts. */ /* ----------------------------------------------------------------------- ALLES BLAU — 17.10.2026, entschieden („Alles blau") ----------------------------------------------------------------------- Das letzte Lila im Produkt. Bewerbung und Termin wechseln in die Blaufamilie der Website; die Bauart vom 16.08.2026 bleibt: Bewerbung #8F50EF -> #486AEE Ton 264 -> 228, Koenigsblau. Gleich hell wie Anfrage, 23 Grad daneben. Termin #6E1BEA -> #005B9D Ton 264 -> 205: DERSELBE Ton wie Anfrage, tiefer (7,04:1) — wie Termin vorher das tiefe zweite Violett war. Zu beiden Nachbarn voll 1,53:1, leise 1,46:1 — dieselben Zahlen wie vorher zwischen den zwei Violetts, und die Zeichen tragen weiter mit. Gerechnet mit werkzeuge/etikett-palette.mjs; dort steht auch die verworfene Fassung (Termin auf 190 Grad: Petrol und grelles Cyan). */ --farbe-etikett-bewerbung: #486AEE; --farbe-etikett-anfrage: #0078CD; --farbe-etikett-beschwerde: #CE453C; --farbe-etikett-lob: #198653; --farbe-etikett-termin: #005B9D; --farbe-etikett-sonstiges: #6C7689; --farbe-etikett-bewerbung-leise: #C8D1F8; --farbe-etikett-anfrage-leise: #A7D9FD; --farbe-etikett-beschwerde-leise: #F0CAC8; --farbe-etikett-lob-leise: #88E5BA; --farbe-etikett-termin-leise: #57B7FB; --farbe-etikett-sonstiges-leise: #CFD3D9; /* ----------------------------------------------------------------------- DIE KACHELFARBEN SIND GEFALLEN — Baustelle 0.4, 04.08.2026 ----------------------------------------------------------------------- Hier standen acht Werte: `--farbe-kachel-blau`, `-gruen`, `-bernstein`, `-rosa` und ihre vier `-leise`-Flaechen. Sie fuellten den 40-px-Kreis hinter dem Zeichen jeder Kennzahl-Kachel. ANGESAGT: „Der heutige Satz (Piktogramm in pastellfarbenem Kreis) kommt auf der Vorlage nicht vor und fliegt raus." DIE HERKUNFT BESTAETIGT DAS. Sie kamen [Portal] aus `apps/saas/public/css/portal.css` (`--palette-*`), also aus dem Vorgaengerprodukt — nicht aus der Vorlage. Nachgemessen in Jitters Startseiten-CSS: kein einziger farbig hinterlegter Icon-Kreis. Der alte Vermerk hier sagte es selbst: „WAS SIE NICHT DUERFEN — und das ist die eigentliche Regel: nichts tragen." Acht Werte, die nichts trugen und genau eine Regel lasen (`.tafelkarte__zeichen`). DIE ETIKETTENPALETTE DARUEBER BLEIBT. Sie traegt Bedeutung — Lila heisst Bewerbung, Blau heisst Anfrage — und ist damit das Gegenteil von Schmuck. Sie kommt in Baustelle 2.2 an den Chips zum Einsatz. */ }