/* ═══════════════════════════════════════════════════════════════════════════ DER TOKEN-VERTRAG — Designvorlage 2, 08.08.2026 Diese Datei gehört dem Head of Design. Sie ist für alle anderen LESBAR und NICHT SCHREIBBAR. Wer einen Wert braucht, den es hier nicht gibt, fordert ihn an, statt ihn sich in seiner eigenen Datei zu setzen — sonst hat das Produkt zwei Wahrheiten und die zweite gewinnt zufällig. ── WELCHE FLÄCHE ZU WELCHEM REGIME GEHÖRT ──────────────────────────────── Entschieden 09.08.2026, nachdem beim Umbau der Kasse auffiel, dass es dafür nie eine Festlegung gab. Der Vorlagenordner enthält GENAU ZWEI Blätter: Designvorlage 2 (dicht, kartenbasiert, gegen eine Vorlage messbar) · /verein Übersicht 01-uebersicht…html · /verein/geld Kasse 02-kasse…html Die Linie im Originalsinn (grosszügiges Prosa-Layout, KEINE Tabelle, KEINE Karte — siehe Kopf von `linie-teile.css`) · /verein/register Zwingerregister · /verein/mitglieder Mitglieder · /verein/lizenz Lizenz Zwei Regime auf einer Oberfläche sind zulässig — das Regelwerk verlangt nur, dass jede Fläche zu GENAU EINEM gehört und dass das VOR dem Entwurf steht. Hier stand es nicht; es ist entstanden, und diese Zeilen holen die Entscheidung nach. FOLGE FÜR JEDE ZAHL, die zu den drei Prosa-Flächen genannt wird: sie ist eine Beschreibung, kein Abgleich. `vergleich.mjs` prüft nur die zwei oberen und sagt das am Ende seiner Ausgabe selbst — ein Gate, das seine Lücke verschweigt, wird für eine Garantie gehalten. Wer eine der drei Prosa-Flächen künftig gegen eine Vorlage messen will, braucht zuerst eine Vorlage. Ihr Aussehen ist kein Versäumnis, sondern eine andere Antwort auf eine andere Aufgabe. ── WARUM EINE EIGENE SCHICHT `dz` ──────────────────────────────────────── `App.razor` nennt `@layer lg;` als allererste Stilanweisung, danach eröffnet pedigrove.css `tokens, base, legacy, components, pages, utilities`. Die Schichtenfolge entsteht bei der ERSTEN Nennung. `dz` wird hier zum ersten Mal genannt, in einer Datei, die NACH pedigrove.css geladen wird — sie steht damit hinter `utilities`. Die beiden Regeln, und sie zeigen in ENTGEGENGESETZTE Richtungen: · NORMALE Regeln: ungeschichtet schlägt jede Schicht; spätere Schicht schlägt frühere. · `!important`: UMGEKEHRT — frühere Schicht schlägt spätere, ungeschichtet ist die schwächste Position von allen. GEMESSEN am 08.08.2026 im Browser, gegen die echten Dateien, weil ich es vorher falsch herum aufgeschrieben hatte: eine Klasse (0,1,0) in `@layer dz` setzt Hintergrund, Radius UND Polster gegen `pedigrove.css:585` durch — jene Regel mit dreizehn `:not()`-Ausschlüssen und Spezifität (0,13,1), die bisher jeden fremden Knopf gefressen hat. **Schichten schlagen Spezifität**, und kein `!important` ist dafür nötig. Im selben Lauf gewann auch eine UNGESCHICHTETE Regel ihren Hintergrund. Sie wäre also nicht schwächer — aber sie ist unberechenbar: sie schlüge auch unsere eigenen `dz`-Regeln, egal in welcher Reihenfolge sie entsteht. Deshalb gilt: **alles in `@layer dz`, nichts daneben.** Nicht weil es sonst verlöre, sondern weil es sonst zufällig gewänne. DIE AUSNAHME, ebenfalls gemessen: `pedigrove.css:594` setzt für `button.primary` einen Verlauf mit `!important` in `@layer base` — einer FRÜHEREN Schicht. Dagegen kommt `dz` nicht an; im Test blieb der eigene Hintergrund wirkungslos (`background-color: rgba(0,0,0,0)`, der fremde Verlauf liegt darüber). FOLGE, VERBINDLICH: **Kein Bauteil dieser Designsprache trägt die Klasse `primary`.** Nicht weil sie hässlich wäre, sondern weil sie fremdbestimmt ist. ── DIE PALETTE ─────────────────────────────────────────────────────────── Werte NICHT geraten, sondern aus dem `:root` der gelieferten Seitenvorlagen (`01-uebersicht…html`, `02-kasse…html`) übernommen. Kontrast gegen `--dz-grund` (#f4f6f2) und Papierweiß, gerechnet (sRGB→relative Luminanz→WCAG), nicht geschätzt: ink 14.56 / 15.83 Fließtext UND Kleintext nav 12.07 / 13.13 Fließtext UND Kleintext forest 6.51 / 7.08 Fließtext UND Kleintext muted 4.01 / 4.36 NUR ab 18px — fällt für Kleintext durch AA muted2 2.29 / 2.49 nur Dekor, NIE Text sage 3.39 / 3.68 nur ab 18px clay 3.21 / 3.49 nur ab 18px good 3.71 / 4.03 nur ab 18px warn 3.60 / 3.92 nur ab 18px HARTE REGEL, aus dieser Rechnung: Die Vorlage benutzt `muted` für die Kleinbeschriftungen REGISTERNUMMER · SEIT · STATUS. Bei 4,01:1 ist das ein AA-Verstoß. **Kleintext unter 18px nimmt `--dz-fein` (= forest), nie `--dz-still` (= muted).** Der optische Unterschied ist gering, der messbare ist der zwischen bestanden und durchgefallen — und die Kundin dieses Produkts ist zwischen 30 und 60, die halbe Zielgruppe liest mit Brille. `--dz-zart` (= muted2) trägt NIE Text, auch nicht großen. ═══════════════════════════════════════════════════════════════════════════ */ @layer dz { /* ── DIE WURZEL, hier wiederholt, weil eine Seite ohne pedigrove.css auskommt ── `pedigrove.css:436` setzt `html { font-size: 93.75% }` — 0,9375 × 16 = 15px, dieselbe Zahl wie vorher, aber relativ zur Browsereinstellung des Menschen davor statt fest. Die Anmeldeseite lädt pedigrove.css NICHT (siehe `dz-anmeldung.css:16`), und dz-token.css ist die einzige Datei, die BEIDE Zusammenhänge laden. Also steht die Regel hier ein zweites Mal — nicht als zweite Wahrheit, sondern damit `1rem` in dieser Datei ueberall 15px bedeutet. Ohne sie waere die Anmeldeseite bei 16px und jeder rem-Wert dort 6,7 % groesser. Gemessen 25.08.2026 ueber CDP `Page.setFontSizes`: Browsergrundschrift 16 → Wurzel 15px · 20 → 18,75px · 12 → 11,25px. */ html { font-size: 93.75%; } :root, .dz { /* ── Flächen ─────────────────────────────────────────────────────────── */ --dz-grund: #f4f6f2; /* die Seite hinter allem */ --dz-papier: #ffffff; /* Karten, Leiste, Sheet */ --dz-sanft: #edf1e9; /* stille Fläche, Auswahl im Ruhezustand */ --dz-lehm-sanft: #f4e9e3; /* warme stille Fläche, Hinweis */ /* ── Schrift-Farben. Der Name sagt, WOFÜR, nicht WIE es aussieht. ───── */ --dz-tinte: #1e241e; /* Fließtext, Überschriften */ --dz-nav: #293329; /* Navigation, etwas kräftiger als Tinte */ --dz-fein: #4f5c4c; /* KLEINTEXT unter 18px. 6,51:1. Nie mit Alpha. */ --dz-still: #747b71; /* Nebentext AB 18px. Darunter verboten. */ --dz-zart: #a0a69c; /* NIE Text. Trenner, Ziffernschatten, Ornament. */ /* ── Akzente ─────────────────────────────────────────────────────────── */ --dz-salbei: #7d8974; --dz-salbei-hell: #aeb7a5; --dz-forst: #4f5c4c; --dz-lehm: #b57c62; /* die warme Gegenfarbe: FLÄCHEN, Text ab 18px */ --dz-lehm-tief: #945947; /* dieselbe Farbe als TEXT. Siehe unten. */ --dz-stein: #d8d8d1; /* `--dz-lehm-tief` ist am 09.08.2026 dazugekommen, weil `A-leiste` beim ersten Puls die Lücke benannte: die Abmelden-Schaltfläche brauchte einen warmen Ton, und es gab dafür keinen, der Text tragen darf. --dz-lehm #b57c62 3,21 / 3,49 fällt für Fließtext durch AA --dz-acht #ae725b 3,60 / 3,92 fällt ebenfalls durch --dz-lehm-tief #945947 5,11 / 5,56 besteht AA (gerechnet sRGB→relative Luminanz→WCAG gegen `--dz-grund` und Papierweiß, nicht geschätzt.) Der Wert ist NICHT erfunden: er steht wörtlich in der Vorlage, Zeile 63, `.logout{color:#945947}` — die Vorlage hatte den text-sicheren Warmton also längst, nur ohne Namen. Damit ist auch die alte Schuld im Fuß dieser Datei beglichen: `--lg-glut` blieb ungemappt, weil `--dz-lehm` als Ersatz vier Knöpfe von 5,38:1 auf 3,48:1 gedrückt hätte. Wer das jetzt umhängen will, nimmt diesen Token. REGEL: warm auf Fläche → `--dz-lehm`. Warm als Schrift → `--dz-lehm-tief`. */ /* ── Status. Alle unter 4,5:1 — deshalb NIE als alleiniges Signal. ──── */ --dz-gut: #68866a; --dz-acht: #ae725b; /* ── Linien und Schatten ─────────────────────────────────────────────── */ --dz-linie: rgba(40, 53, 40, .105); --dz-schatten: 0 30px 90px rgba(46, 58, 45, .085); --dz-schatten-nah: 0 16px 44px rgba(46, 58, 45, .075); /* ── Schrift ────────────────────────────────────────────────────────── Zwei Familien mit GETRENNTEN Aufgaben, das ist der Kern dieser Sprache: Die Serife inszeniert (Titel, Namen, Beträge als Aussage). Die Grotesk trägt alles Funktionale — und ausdrücklich JEDE Zahl, die man ablesen statt bewundern soll: Beträge in Listen, Jahre, Registercodes, Indizes. Beide Dateien liegen im Projekt (`src/PediGrove.UI/wwwroot/schriften/`), NICHT auf GitHub: die Vorlage lud sie von `github.com/raw`, das fällt in Produktion aus. Instrument Serif und Mona Sans stehen beide unter der SIL OFL. */ --dz-display: "Instrument Serif", Georgia, "Times New Roman", serif; --dz-sans: "Mona Sans VF", "Mona Sans", system-ui, Arial, sans-serif; /* ── DIE UNTERGRENZE FÜR KLEINTEXT ──────────────────────────────────── Entschieden am 09.08.2026, nachdem drei Aufträge unabhängig dieselbe Frage stellten: die Vorlage setzt Beschriftungen auf 6px und 7px. Sechs Pixel sind keine Gestaltung, sie sind eine Wette darauf, dass niemand hinsieht. Diese Software führt Zuchtbücher; die Frau, die sie benutzt, ist zwischen 30 und 60 und liest zur Hälfte mit Brille. Eine Registernummer, die man raten muss, ist ein Fehler mit Folgen. ZWEI ZAHLEN, mehr nicht — und sie stehen hier und nicht in vier Dateien, weil vier Aufträge sonst vier Untergrenzen hätten: --dz-mikro 10px Versalien mit weiter Sperrung (≥ .12em). Sie lesen sich größer als ihre Zahl. Vorlage: 6–7px. --dz-klein 12px alles Gemischtschriftliche, das Bedeutung trägt: Navigation, Datenwerte, Datum, ganze Sätze. Vorlage: 9–11px. DIE REGEL, die dabei am leichtesten bricht: eine Beschriftung darf nie größer sein als der Wert, den sie beschriftet. Wer `small` auf 10px hebt, hebt `b` auf 12px mit — sonst steht das Etikett über dem Inhalt. DARUNTER darf nur, was KEINE Information trägt. Reines Ornament kann kleiner bleiben, muss dann aber `aria-hidden="true"` sein: unlesbar UND vorgelesen ist die schlechteste aller Möglichkeiten. Das ist eine bewusste Abweichung von der Vorlage. Die Vorlage gibt Farbe, Anordnung und Haltung vor — sie ist kein Beweis für Lesbarkeit, sie wurde nie gemessen. Große Schrift bleibt unangetastet: Titel, Zwingername, Ziffer und Beträge stehen exakt auf den Vorlagenwerten. */ --dz-mikro: 0.6667rem; --dz-klein: 0.8rem; /* ── DIE LEITER NACH OBEN, und warum sie hier aufhört ────────────────── Ergänzt am 09.08.2026, angefordert von `O3-altbestand`: der Altbestand trägt Grade zwischen 12 und 18px, und dafür gab es kein Zuhause. Zwei Token für eine ganze Sprache waren zu wenig — die Folge war, dass jede Datei sich ihre Zwischengrade selbst erfand. Die Leiter hat VIER Sprossen, nicht acht. Jede Sprosse hat eine AUFGABE, keine Größe; wer eine fünfte braucht, braucht meist keine Größe, sondern eine Entscheidung. 10,5px und 11px aus dem Altbestand ziehen deshalb auf `--dz-mikro` zusammen — der Unterschied ist unsichtbar, die zusätzliche Zahl kostet für immer. `--dz-gross` ist die einzige Sprosse mit einer harten Begründung: bei 18px darf `--dz-still` (4,01:1) wieder Text tragen, darunter nicht. Die Zahl ist also keine Geschmacksfrage, sie ist die Grenze aus der Kontrastrechnung im Kopf dieser Datei. */ --dz-text: 1rem; /* Fließtext in Bauteilen, Listenzeilen, Feldinhalte */ --dz-gross: 1.2rem; /* hervorgehoben — UND die Grenze, ab der --dz-still */ /* wieder Text tragen darf. Darunter niemals. */ /* ── SPERRUNG: drei Stufen, aus den Vorlagen gelesen ─────────────────── Die Vorlagen benutzen .09em bis .28em, aber nicht beliebig — es sind drei Gruppen mit je einem Zweck. Der Altbestand hatte davon sieben Werte (.26 .2 .18 .16 .14 .1 .06), was dieselbe Sache siebenmal ausdrückt. Sperrung ist keine Verzierung: Versalien ohne sie kleben, weil ihnen die Unterlängen fehlen, an denen das Auge Wortgrenzen findet. Je kleiner der Grad, desto weiter die Sperrung — deshalb trägt `--dz-mikro` die weite und `--dz-text` gar keine. */ --dz-sperr-weit: .18em; /* Ornament und Randtext, sehr klein gesetzt */ --dz-sperr: .14em; /* Regelfall für Versalien-Kleinbeschriftung */ --dz-sperr-eng: .09em; /* Versalien neben Fließtext, z. B. Kontokarte */ /* ── ZWEI MASSE, die keine Geschmacksfrage sind ──────────────────────── `--dz-ziel` ist die Mindestzielgröße aus WCAG 2.2 (Target Size Minimum, 2.5.8): 24×24 CSS-px für alles Bedienbare. Sie stand am 09.08.2026roh an mindestens vier Stellen mit jeweils eigenem Kommentar. Eine Schwelle, die aus einer Norm kommt und an vier Stellen gebraucht wird, gehört in den Vertrag — sonst wird sie beim fünften Mal auf 20 getippt und niemand merkt es. `--dz-knopf` ist die Höhe eines Handlungsknopfes: 40px, Vorlagenwert (`.go` 40, `.logout` 40). NICHT dasselbe wie eine Navigationszeile (44px, Vorlage Z.52) oder der Datumsknopf (43px, Z.70) — die tragen andere Aufgaben und behalten ihre eigenen Zahlen. Wer hier alles gleichmacht, macht die Leiste kaputt. */ --dz-ziel: 24px; --dz-knopf: 40px; /* `--dz-marke` ist die Stärke eines Zustandszeichens — der Streifen an der Führungskante, der sagt „hier stehst du". Angelegt 09.08.2026 aus einem gemessenen Barrierefreiheitsfehler: aktive und ruhende Schubladenkachel unterschieden sich im FARBTON, nicht in der Helligkeit — Leuchtdichte- kontrast 1,06:1, weit unter den 3:1 aus WCAG 2.2 (1.4.11). Fuer normales Farbsehen deutlich, in Graustufen derselbe Fleck. Die Antwort war nicht, die Flaechen auseinanderzuziehen — zwanzig Kacheln mit 3:1 Grundkontrast waeren ein Schachbrett. Der Zustand haengt jetzt an einem ZEICHEN: es wirkt ueber Form und Ort, ist da oder nicht da, und bringt seine eigenen 4,58:1 mit. Der Farbton bleibt als zweites, redundantes Signal — zwei unabhaengige Zeichen, keines allein tragend. */ --dz-marke: 3px; /* `--dz-feld` ist die dritte Zahl dieser Art: eine Schwelle von aussen, keine Wahl. Safari auf iOS ZOOMT die ganze Seite, sobald der Nutzer in ein Eingabefeld tippt, dessen Schrift kleiner als 16px ist. Danach steht die Seite verschoben da, und der Nutzer muss von Hand zurückzoomen — auf jedem Formular, jedes Mal. `--dz-text` (15px) liegt einen Pixel darunter. Ein Pixel, der auf dem Schreibtisch nichts bedeutet und auf dem Telefon jede Eingabe stört. Gefunden von `O4-buehne` am 09.08.2026, der dafür zunächst `--dz-gross` (18px) genommen hatte — richtige Absicht, zu grosser Sprung: 18px neben 15px-Beschriftungen sieht aus wie ein Fehler. 16px ist die Schwelle, und die Schwelle ist der Wert. */ --dz-feld: 16px; /* ── DIE ZEILENHÖHEN: drei Rollen, nicht zehn Zahlen ─────────────────── Angefordert von `O3-altbestand`, der fünfzehn Stellen mit zehn verschiedenen Werten fand (1 · 1,12 · 1,22 · 1,24 · 1,3 · 1,5 · 1,58 · 1,6 · 1,62 · 1,66) und ausdrücklich KEINE Sprosse erfinden wollte. Seine Einordnung war schon die Antwort: es sind drei Rollen. Die Zahlen kommen aus den Vorlagen, nicht aus dem Gefühl: Anzeige `.reg h2` .98 und `.quote` 1.22 — grosse Schrift braucht weniger Durchschuss, weil die Zeilen ohnehin weit stehen. Kompakt Tabellenzellen, Listenzeilen, Marken: eng genug, dass eine Zeile eine Zeile bleibt, weit genug, dass zwei sich nicht berühren. Fliesstext `.big02 small` 1.7, Browser-Standard ~1.5. Wer liest, braucht die Zeilenspur, um zurückzufinden. `--dz-titel-zeilen` (0.90) bleibt getrennt und gehört dem Kopftitel — dort ist die Enge eine Geste, kein Satz. Vier Werte insgesamt, und keiner davon darf ohne Rolle vergeben werden. */ --dz-zeilen-anzeige: 1.1; --dz-zeilen-kompakt: 1.3; --dz-zeilen: 1.6; /* ── DIE ABSTANDSLEITER ──────────────────────────────────────────────── Angefordert am 09.08.2026 von `O2-erbe`, der sie ausdrücklich NICHT selbst erfinden wollte — richtig so: eine Abstandsleiter, die in einer Bauteildatei entsteht, gilt für ein Bauteil und für nichts sonst. Drei Stufen, aus den Vorlagen gelesen, nicht gewählt: 12px Vorlage `.reglist{gap:12px}`, `.footer{margin-top:13px}` 20px Vorlage `.reg{padding:22px 20px}`, `.sideCard{padding:24px 21px}`, `.panelHead{padding:0 20px}`, `.app{gap:20px}` 32px der Abstand, der zwei ABSCHNITTE trennt statt zwei Zeilen Das Seitenpolster (38/42px) gehört NICHT dazu — es ist eine Eigenschaft der Schale, keine Stufe einer Leiter, und steht in `dz-schale.css`. `clamp()` gegen die Fensterhöhe (`clamp(20px,3vh,32px)` u. ä.) ist damit überflüssig: ein Abstand, der mit der Fensterhöhe wandert, macht denselben Fehler wie die Titelgröße heute früh — zwei Maße am selben Fenster, aber nach verschiedenen Formeln, und dazwischen reisst es. */ --dz-luft-eng: 12px; --dz-luft: 20px; --dz-luft-weit: 32px; /* ── DIE ANZEIGE-LEITER: Serife unterhalb des Kopftitels ─────────────── Angefordert von `O4-buehne`, der vier rohe `clamp()` fand, die zwischen `--dz-gross` (18px) und der Kopftitel-Kurve stehen. WARUM DAS EINE EIGENE LEITER IST und keine fünfte Sprosse der anderen: die Sprache hat ZWEI Ebenen. Die Grotesk trägt, was man bedient und abliest — dafür ist `--dz-mikro/-klein/-text/-gross` da. Die Serife INSZENIERT, und sie hatte bisher genau einen Wert: den Kopftitel. Alles dazwischen war deshalb roh, nicht aus Nachlässigkeit, sondern weil es keinen Platz hatte. --dz-anzeige 24px Zwischenüberschrift, Leerzustand, Abschnitt --dz-anzeige-gross 40px der NAME eines Dings — Vorlagenwert `.reg h2` --dz-anzeige-wucht 58px die Überschrift ÜBER einer grossen Zahl Die 40px sind kein gewählter Wert: die Vorlage setzt den Zwingernamen genau so (`01-uebersicht…html:169`, `.reg h2{font-size:40px}`). Wo bei uns `clamp(27px,4.4vw,56px)` steht, ist das eine Erfindung, die die Vorlage an derselben Stelle nicht macht. KEINE eigene Laufweite. Die Vorlage gibt `.reg h2` nur `line-height:.98` und sonst nichts; das negative Kerning gehört dem Kopftitel, wo es eine Geste ist. Die rohen -0.02em und -0.03em fallen ersatzlos weg. */ --dz-anzeige: 1.6rem; --dz-anzeige-gross: 2.6667rem; /* Dritte Sprosse, 09.08.2026, angefordert von `K-kasse` und geprüft: die Vorlage setzt `.finHead h1` (`02-kasse…html`) auf 58px, und keine bestehende Sprosse kommt näher als 18px heran — 40 ist zu klein, die Zahl darunter steht auf 132. Es ist die Überschrift ÜBER einer grossen Zahl, nicht die Zahl selbst; die hat mit `--dz-zahl-gross` ihr eigenes Token. Der Name sagt die Rolle, nicht die Stufe: `-gross` und `-riesig` nebeneinander wäre eine Leiter ohne Bedeutung, „Wucht" ist der Auftritt, um den es geht. Wer eine vierte Sprosse braucht, begründet sie am Vorlagenwert — nicht daran, dass die dritte nicht passt. */ --dz-anzeige-wucht: 3.8667rem; /* KLARSTELLUNG, 09.08.2026, nach einem berechtigten Einwand von `O2-erbe`: EIN GRÖSSEN-TOKEN IST EINE GRÖSSE, KEINE SCHRIFTFAMILIE. Ich hatte die Sprossen oben nach Familien beschrieben („Grotesk-Leiter", „Serifen-Leiter"), und prompt kam die Frage, ob man `--dz-gross` (18px) mit der Serife benutzen DARF. Man darf. Die Familie wählt das Bauteil über `--dz-display` oder `--dz-sans`; der Grad sagt nur, wie gross. Die Vorlage macht es vor: `.person b` (`02-kasse…html:85`) ist 18px in der SERIFE — derselbe Grad, den die Grotesk für hervorgehobenen Text benutzt. Es gibt deshalb KEINE Sprosse `--dz-anzeige-klein`; es gibt `--dz-gross` und daneben die Entscheidung, welche Familie es trägt. Was die beiden Anzeige-Sprossen rechtfertigt, ist nicht die Familie, sondern dass 24px und 40px in der Grotesk-Leiter keinen Platz haben. */ /* ── DER SEITENKOPF: seine Groesse ist eine Konstante der SPRACHE ────── Diese sieben Werte standen bis zum 09.08.2026 einzeln in `dz-hero.css`. Sie stehen jetzt hier, weil der Auftraggeber es als Vorgabe formuliert hat: „alle größen farben usw. sind globale variable und nicht einzeln coded". Und weil derselbe Fehler sonst wiederkommt — zwei Flaechen rechneten mit verschiedenen Zahlen und trugen verschieden grosse Ueberschriften („Zwingerregister" gegen „Mitglieder"), was er sofort gesehen hat. WIE SIE ZUSAMMENSPIELEN. Der Grad ist nicht gesetzt, sondern gerechnet: 100cqi / (Zeichenbreite × max(Zeichenbudget, laengstes Wort)) `100cqi` ist die Breite der Titelspalte (`.dzh-text` traegt `container-type`), `--dzh-langwort` liefert `LinieHero.razor`. Das BUDGET ist die Untergrenze im Nenner und damit der eigentliche Trick: bis zu seiner Zeichenzahl rechnen ALLE Flaechen dasselbe, also gleich gross. Erst ein laengeres Wort drueckt den Grad — und nur dieses eine, statt alle anderen auf Vorrat zu verkleinern. Die Zeichenbreiten sind gemessen, nicht geschaetzt (Canvas-Textmetrik gegen die echte Schrift bei den Achsen, die wir setzen). Sie tragen 4% Rand: mit dem blossen Messwert 0,32 war „Zuchtverein" bei 370px Spalte exakt 0,7px zu breit, und der Notausgang `overflow-wrap` schnitt es mitten im Wort ab. WER HIER ETWAS AENDERT, aendert es auf jeder Flaeche gleichzeitig — das ist der Zweck. Wer eine einzelne Flaeche anders haben will, hat ein Gestaltungsproblem, kein Zahlenproblem. */ --dz-titel-gross: 8rem; /* Deckel: die Vorlage bei voller Breite */ --dz-titel-klein: 2.2667rem; /* Boden: darunter ist es keine Geste mehr */ --dz-titel-eng: 4.8rem; /* Deckel auf schmalen Schirmen (<=600px) */ --dz-titel-zeichen: 15; /* Zeichenbudget = die einheitliche Groesse */ /* ZEICHENBREITE — 0.335 war ein MITTELWERT, gebraucht wird eine SCHRANKE. Nachgemessen 25.08.2026 im Browser (Canvas-freie Spannenmessung, Instrument Serif, letter-spacing -.045em, 14 echte Titel dieser Anwendung): Vereinsstatistiken 0.2998 Wirtschaftlichkeit 0.3038 Mitgliederpflege 0.3170 Zwingerregister 0.3257 Zuchtstätten 0.3248 Rassezuchtverein 0.3360 Mitgliederverw. 0.3365 Zuchtverein 0.3385 Zuchtzulassungen 0.3554 Buchhaltung 0.3721 Demo-Zuchtverein 0.3756 Deckmeldungen 0.3986 Rückmeldungen 0.4039 Zuchtbuchnummern 0.4176 Neun der vierzehn liegen ueber 0.335. Die Formel in dz-hero.css rechnet damit den Grad zu GROSS, und `overflow-wrap: break-word` zerlegt daraufhin genau das Wort, dessen Bruchfreiheit die Formel garantieren sollte: gemessen auf /verein/rueckmeldungen bei 390, 954 UND 1280 stand dort „Rückmeldunge/n" zweizeilig, Spalte 356px, Grad 70,85px. 0.435 ist der schlimmste gemessene Wert (0.4176) plus rund 4 % Rand — der gleiche Rand, mit dem 0.335 begruendet war, nur diesmal auf die Schranke statt auf das Mittel gelegt. Kurze Titel verlieren nichts: sie liegen am Deckel (--dz-titel-gross/-eng), und ein Deckel kennt keine Zeichenbreite. */ --dz-serif-breite: 0.435; /* Instrument Serif, Schranke statt Mittelwert */ /* ZEILENHOEHE UND LAUFWEITE — korrigiert 09.08.2026 nach Beanstandung des Auftraggebers: „die serif schrift ist so zusammengequetscht. das ist doch nicht standard." Er hat recht, und es ist messbar. Vorlagenwerte waren `line-height:.79` und `letter-spacing:-.045em`; gemessen auf `/verein/arbeit/zucht/ergebnisse` bei „Ergebnisse und Titel": Grad 110,65px Zeilenhoehe 87,42px ← 23px WENIGER als der Grad Laufweite −4,98px Eine Zeilenhoehe unter dem Schriftgrad heisst, dass sich die Zeilen ueberlappen. In der Vorlage faellt das nicht auf, weil ihr einziger zweizeiliger Titel „Demo-" / „Zuchtverein" lautet — kurze Zeilen, deren Unterlaengen und Oberlaengen sich zufaellig nicht begegnen. „Ergebnisse und / Titel" hat ein `g` genau unter einem `T`, und dann sieht man es sofort. 0.90 ist der praktische Boden fuer eine mehrzeilige Display-Serife: eng genug, dass der Titel als Block wirkt, weit genug, dass Unter- und Oberlaengen sich nicht beruehren. −0.028em statt −0.045em aus demselben Grund — die staerkere Enge ist eine Geste fuer EIN kurzes Wort, nicht fuer einen deutschen Satz mit Umlauten. Beides ist bewusst KEIN Vorlagenwert mehr und steht hier, damit es nicht wieder in vier Dateien einzeln landet. */ --dz-titel-zeilen: 0.90; --dz-titel-laufweite: -0.028em; /* Der Kassenstand: eigene Kurve, weil er eine ZAHL ist (Vorlage 02, Z.168-187) — Mona Sans laeuft bei `wght 470/wdth 91` schmaler, und ein Betrag hat keine Bruchgelegenheit. Budget 11 = typischer voller Betrag mit Tausenderpunkt; sonst stuende „0,00 €" doppelt so gross da wie „12.480,50 €", auf derselben Flaeche beim naechsten Kassensturz. */ --dz-zahl-gross: 8.8rem; --dz-zahl-klein: 2.5333rem; --dz-zahl-zeichen: 11; --dz-sans-breite: 0.30; /* ── Maße, die mehr als ein Bauteil betreffen ────────────────────────── */ /* Alle vier Zahlen stehen wörtlich in Vorlage `01-uebersicht…html:39`: `.app{width:min(1600px,calc(100vw - 38px));margin:19px auto; display:grid;grid-template-columns:218px minmax(0,1fr);gap:20px}` — 09.08.2026 gegen die Vorlage gemessen: die Leiste stand bei uns auf 240px, die Inhaltsschale kam dadurch 21px zu schmal heraus (1341 statt 1362). Es war kein Gestaltungsentschluss, es war eine geratene Zahl. */ --dz-leiste: 218px; /* Breite der Seitenleiste */ --dz-leiste-luft: 19px; /* ihr Abstand zum Fensterrand (sie schwebt) */ --dz-spalte: 20px; /* Spalt zwischen Leiste und Inhaltsschale */ --dz-buehne: 1600px; /* Höchstbreite der ganzen Bühne */ /* Die Randspalte der Übersicht (Zitat + Fakten). Vorlage Zeile 89: `.content{grid-template-columns:minmax(0,1fr) 250px;gap:18px}`. Sie steht hier und nicht in `dz-erbe.css`, weil zwei Aufträge sie brauchen — das Raster links und das Bauteil rechts. Eine Naht bekommt eine Zahl, nicht zwei. */ --dz-rand: 250px; --dz-rand-spalt: 18px; /* Die Schublade („Alle Bereiche"). Sie hat als einziges Bauteil dieser Sprache KEINE Vorlage — der Auftraggeber hat sie selbst entworfen, und genau deshalb stand ihre Breite roh da: es gab nichts zum Abschreiben. Ein Token, das nur einmal gelesen wird, ist keine Wiederverwendung, sondern eine Fundstelle — und das ist hier der Zweck. Wer die Schublade breiter will, findet die Zahl, statt sie zu suchen. */ --dz-schublade: 640px; --dz-radius-gross: 31px; /* Leiste, Inhaltsschale */ --dz-radius: 20px; /* Karten */ --dz-radius-klein: 14px; /* Knöpfe, Felder, Marken */ --dz-glas: 26px; /* backdrop-filter blur der schwebenden Flächen*/ } /* Die Schriften. `swap` statt `block`: lieber die Ersatzschrift für 100ms als ein leeres Feld — bei 533 kB für die variable Grotesk ist das kein Detail. */ @font-face { font-family: "Instrument Serif"; src: url("../schriften/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Mona Sans VF"; src: url("../schriften/MonaSansVF.woff2") format("woff2-variations"); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; } /* ── DIE GRUNDACHSEN DER VARIABLEN SCHRIFT ─────────────────────────────── Ergänzt am 09.08.2026 nach einem Befund des Prüfauftrags `F-schriften`. Mona Sans ist eine VARIABLE Schrift mit drei Achsen. Die Vorlage stellt sie an genau einer Stelle ein — Zeile 33, am `body`: font-optical-sizing: auto; font-variation-settings: "wght" 400, "wdth" 100, "opsz" 14; Wir hatten das nirgends. `dz-schale.css:74-77` setzt Familie und 16px, aber keine Achse; gezählt wurden Achsen nur dort, wo direkt gegen eine Vorlagenseite gebaut wurde: dz-hero 4, dz-schale 5, dz-verzeichnis 2, dz-rand 2, dz-anmeldung 7 — und NULL in dz-flaeche.css (32 Familienzuweisungen), dz-erbe.css (13), dz-drawer.css (3). FOLGE, und sie war unsichtbar: alle 19 Arbeitsflächen und das gesamte geteilte Verwaltungs-Markup liefen auf der GRUNDINSTANZ der Schrift statt auf der eingestellten. Das ist kein fehlendes Stilmerkmal, das ist eine andere Schrift — variable Schriften sehen ohne Achsen messbar anders aus, und im Screenshot fällt es nicht auf, weil es überall gleich falsch ist. WARUM HIER und nicht in `dz-schale.css`: die Anmeldeseiten liegen NICHT unter `.dz-schale` — sie haben ihren eigenen Kopf über `AuthHead()`. Zwei Wurzeln hätten zwei Wahrheiten ergeben, und genau das war der Zustand (`dz-anmeldung.css:93-95` setzte die Achsen, die Schale nicht). Diese Datei lädt jede Fläche des Servers, also steht die eine Wahrheit hier. ZU BEACHTEN, wer später Achsen setzt: `font-variation-settings` MISCHT NICHT. Ein Bauteil, das nur `"wght" 600` schreibt, verliert `wdth` und `opsz` — es erbt sie nicht dazu. Wer eine Achse ändert, schreibt alle drei. */ :root, .dz, .dz-schale { font-optical-sizing: auto; font-variation-settings: "wght" 400, "wdth" 100, "opsz" 14; } /* ═══ ZWEI REGELN ZU DIESER ZEILE, BEIDE TEUER GELERNT ═══════════════════ (1) `font-variation-settings` SCHLÄGT `font-weight`. Wer hier `wght 400` erbt und im Bauteil `font-weight: 700` schreibt, bekommt 400 — der berechnete Wert MELDET trotzdem 700, die Schrift sieht nur nicht so aus. Am 09.08.2026 auf allen 19 Arbeitsflächen gemessen: 32 Familienzuweisungen in `dz-flaeche.css`, null Achsen, und die Begründung der halben Datei („Betonung über font-weight statt Farbe") beschrieb eine Betonung, die es nicht gab. (2) `font-variation-settings` MISCHT NICHT. Ein Bauteil, das nur `"wght" 600` schreibt, verliert `wdth` und `opsz` — es erbt sie nicht dazu. Wer eine Achse ändert, schreibt alle drei. FOLGE, verbindlich: In der GROTESK gibt es kein `font-weight`. Gewicht wird dort ausschliesslich über `font-variation-settings` gesetzt, mit allen drei Achsen. Die Vorlage macht es genauso (`02-kasse…html:134-146`, fünf Gruppen). AUSNAHME, gemeldet von `O1-flaeche` am 09.08.2026 — und wer sie übersieht, richtet Schaden an: **Instrument Serif ist NICHT variabel.** Ihre `@font-face`-Regel oben nennt ein einzelnes `font-weight: 400` und `format("woff2")` ohne `-variations`; sie hat gar keine Achse. Die `font-weight: 400` an SERIFEN-Regeln sind deshalb kein Gewichtswunsch, sondern ABWEHR: ohne sie erbt ein ``, `
` oder `

` seinen Vorgabewert 700, und der Browser rechnet daraus einen synthetischen Fettdruck — bei einer Serife immer sichtbar falsch. **Wer die `font-weight`-Zeilen pauschal strippt, erzeugt Faux-Bold.** Und das Muster dahinter, das an diesem Tag FÜNFMAL zugeschlagen hat: eine Deklaration, die im Quelltext richtig aussieht, kann wirkungslos sein. Ungeschichtete Regeln, `!important` in der frühesten Schicht, Inline-Stile, `offsetParent === null` bei `position:fixed` — und diese hier. **Im Zweifel messen, was ankommt, nicht lesen, was dasteht.** ═══════════════════════════════════════════════════════════════════════ */ } /* ═══════════════════════════════════════════════════════════════════════════ DIE ALTE PALETTE ZEIGT AUF DIE NEUE — 08.08.2026 Die vorige Designsprache („Die Linie") lebt in fünf Stylesheets mit rund 250 Regeln weiter. Die meisten davon sind gute Regeln: Abstände, Rhythmus, Rasterlogik, mühsam gemessene Zeilenlängen. Nur ihre FARBEN gehören einer Welt an, die es nicht mehr gibt — warmes Creme statt Off-White, Glut statt Lehm. Statt sie einzeln zu überschreiben — allein `--lg-glut` steht 18-mal in linie-tafel.css, oft als `oklch(from var(--lg-glut) l c h / 0.13)` — zeigen hier die alten Token auf die neuen. Ein Block, und die ganze Altsprache spricht die neue Palette, einschliesslich aller abgeleiteten Alpha-Varianten: `oklch(from …)` rechnet mit dem, was der Token gerade liefert. DAS FUNKTIONIERT NUR, WEIL DIE ALTEN REGELN TOKEN LESEN. Eine fremde Regel ist besiegbar, wenn sie einen Token liest — Token kaskadieren normal. Sie ist unbesiegbar, wenn sie den Wert direkt setzt. Deshalb steht dieser Block hier und nicht als Sammlung von Einzelüberschreibungen: er greift an der einen Stelle, an der die alte Sprache selbst nachfragt. ZUORDNUNG NACH ZWECK, nicht nach Aussehen — deshalb bleibt die Kontrastregel erhalten: `--lg-fein` war in der alten Sprache ausdrücklich der Kleintext-Token (dort gemessene 4,9:1), `--dz-fein` ist es in der neuen (gerechnete 6,51:1). Wer den einen benutzt hat, bekommt den anderen und bleibt damit auf der sicheren Seite. NUR INNERHALB `.dz-schale`. Die Anmeldeseite lädt ihre eigenen Stylesheets über `AuthHead()` und ist von hier aus nicht erreichbar; die Züchter-App erst recht nicht. Wer die alte Sprache irgendwo unverändert sehen will, findet sie dort. ═══════════════════════════════════════════════════════════════════════════ */ @layer dz { .dz-schale { --lg-papier: var(--dz-papier); --lg-creme: var(--dz-grund); --lg-taupe: var(--dz-stein); --lg-tinte: var(--dz-tinte); --lg-still: var(--dz-still); --lg-fein: var(--dz-fein); --lg-sonne: var(--dz-lehm-sanft); /* `--lg-glut` wird BEWUSST NICHT umgehängt. Der naheliegende Griff wäre `--dz-lehm` — beides „die eine warme Gegenfarbe" —, und genau das war ein Kategorienfehler, gemessen und wieder zurückgenommen: vorher (--lg-glut, oklch 54% 0.160 42) 5,38:1 bestanden nachher (--dz-lehm, #b57c62) 3,48:1 DURCHGEFALLEN Vier Knöpfe fielen sofort durch — der aktive Reiter und drei Handlungsknöpfe, alle mit Beschriftung um 13px. `--dz-lehm` ist in dieser Sprache ein Akzent für FLÄCHEN und grosse Schrift (3,21:1 auf Grund, 3,49:1 auf Papier, siehe Kopf dieser Datei); `--lg-glut` war in der alten Sprache ein TEXT-Akzent und entsprechend dunkler. Gleiche Rolle im Namen, verschiedene Rolle im Gebrauch. Es bleibt also beim alten Wert — er ist kontrastsicher und liest sich warm genug, dass niemand den Bruch sieht. Der Preis ist benannt: wer später `--dz-lehm` umfärbt, nimmt diese Stellen nicht mit. Das ist die kleinere Schuld. Wer es sauber will, braucht einen eigenen text-sicheren Warmton im Vertrag — und dann eine Messung, keine Vermutung. */ } }