/* ========================================================================= aphenius.css — das Kleid der Aphenius-Startseite. HERKUNFT JEDES WERTES. Diese Datei erfindet keine Farbe und keine Groesse. Sie ist eine UEBERTRAGUNG des Design-Systems aus dem Uebergabepaket: masterbrain/client/src/tokens.css -> Schriften, Flaechen, Ink-Stufen, Haarlinien, Figuren-Strich, Amber, Typo-Skala, Sperrung, Geometrie masterbrain/client/src/index.css:276-325 -> die HELLE Neuschluesselung masterbrain/client/src/a11y.css:78 -> die Sprungmarke, die Fokus-Ringe masterbrain/client/src/public/Landing.tsx -> die Masse der Abschnitte (1200er Bahn, 24/72er Polster, das Hausmass-Paar 18/14) Wo ein Kommentar im Quellblatt die MESSUNG traegt (die Kontrastwerte der Ink-Stufen, die Begruendung fuer 0.40 beim Figuren-Strich), reist er hier mit. Ein Wert ohne seine Begruendung ist beim naechsten Anfassen nur noch eine Zahl, die jemand aendern darf. WAS BEWUSST FEHLT - Keine Amber-Radial-Waesche, kein 135-Grad-Verlauf, kein Halo als Betonung, keine Loop-Animation. Alle vier stehen in docs/DESIGN-BLUEPRINT-LANGUAGE.md ausdruecklich als entfernt. - Kein externer Abruf. Kein CDN, keine Google-Schrift, kein Icon-Dienst. Die Begruendung steht im Kopf von tokens.css: CSP + Datenraum verlangen jedes Byte von diesem Ursprung. (Hier stand bis zum 23.08.2026 auch „Keine --shadow-*: auf dieser Seite ist keine Flaeche angehoben." Seither fuehrt dieses Blatt GENAU EINEN Flaechenschatten, den hellen des Designs, mit seinem Grund an der Marke — und das dunkle Thema setzt ihn ausdruecklich auf `none`, weil dunkel nie mit Schatten trennt. Der Satz oben stimmt damit nicht mehr und ist gestrichen, nicht stehen gelassen.) ══ DIE EINE LEITER (23.08.2026, Welle 2 der Vereinigung) ═════════════════ ZWEITE QUELLE neben dem Uebergabepaket: docs/design/10-die-leiter.md, die Entscheidung des Koordinators auf das Besitzer-Wort „Tinten, Maße und Schrift ueberall dieselben". Dieses Blatt ist das EINZIGE helle Blatt des Baums (`prefers-color-scheme: light` unten), deshalb stehen die hellen Werte der Leiter hier: Grund #f6f5f4, Flaeche #ffffff, Kopfschiene #f4f4f5, Blaupausenpapier #f1ede6, Haarlinie/Rand warm rgba(34,28,22,…), die Alpha-Tinte rgba(0,0,0,.898/.62/.55), der helle Flaechenschatten (10 §2.1, §2.2, §5). Dunkel kommen dieselben Marken wie in `stil.css` und `app/src/tokens.css` dazu (Leiste/Buehne, Alpha-Tinte auf deckendem Grund, Wasser, Stroma, Serif, Fibonacci-Dauern) — `gateway/test/gestaltung.test.js` haelt die gemeinsamen Werte der drei Blaetter gegeneinander. Jede Kontrastzahl hier ist mit `app/src/kontrast.ts` am 23.08.2026 gerechnet; die alten hellen Werte (#f7f5f0 / #efede7 / #e6e3dc) stehen unten als Geschichte an der Stelle, nicht als Wert. ========================================================================= */ /* ---- Schrift ------------------------------------------------------------ Selbst gehostet — die deklarierte Schrift IST die ausgelieferte Schrift. Die beiden woff2 stammen aus dem npm-Paket `geist` (SIL OFL 1.1) und liegen byte-gleich neben dieser Datei unter /fonts/, zusammen mit /fonts/OFL.txt. Die Lizenz verlangt, dass sie mitreist; deshalb liegt sie im selben Verzeichnis und wird ausgeliefert. Variable Schnitte decken 100-900 ab; font-display: swap haelt den Rueckfall sichtbar, bis die Datei da ist (kein unsichtbarer Text). */ @font-face { font-family: 'Geist'; src: url('/fonts/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('/fonts/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* Source Serif 4 — Nutzertext und Anzeige (10-die-leiter.md §1); dieselben zwei Dateien wie in `stil.css` (Herkunft, Release 4.005R und SHA-256 dort und in `app/public/fonts/LIESMICH.md`), Lizenz `/fonts/SourceSerif4-OFL.txt`. */ @font-face { font-family: 'Source Serif 4'; src: url('/fonts/SourceSerif4Variable-Roman.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('/fonts/SourceSerif4Variable-Italic.woff2') format('woff2'); font-weight: 200 900; font-style: italic; font-display: swap; } /* ---- Marken (dunkel zuerst) -------------------------------------------- ABWEICHUNG ZUR QUELLE, UND WARUM. client/index.html schreibt `class="dark"` fest ans ; die helle Neuschluesselung haengt dort an `:root:not(.dark)` und wird vom SettingsPanel des Workspace umgelegt. Ein SettingsPanel gibt es auf einer statischen Seite nicht — die helle Haelfte waere damit toter Code, und totes CSS ist eine Form ohne Bedeutung. Deshalb entscheidet hier die Einstellung des LESERS: dunkel ist die Vorgabe, `prefers-color-scheme: light` legt exakt dieselben Werte um, die index.css:276-325 misst. Kein Wert ist neu, nur der Schalter ist ein anderer. */ :root { /* Flaechen — enge Helligkeitsschritte, warmes Anthrazit */ --sf-0: #131210; /* Grund */ --sf-1: #1a1814; /* Tafeln */ --sf-2: #211e19; /* angehoben */ /* Die zwei Stufen des Designs in der Familie des Baums (10 §2.1), Wert fuer Wert wie `tokens.css::--surface-leiste/--buehne/--buehne-streifen` — Leiste/Ausklapper zwischen Grund und Tafel (gegen beide 1,03), Buehne als einzige Flaeche UNTER dem Grund (1,04) mit Streifen (1,05 gegen sie). Die Messung und die Herleitung aus dem Design-Verhaeltnis stehen in `app/src/tokens.css`. Hell gibt es keine Buehne und keine Leiste unter dem Grund — das helle Thema unten redefiniert sie nicht, und das ist Absicht: Wer sie dort braucht, misst sie erst. */ --sf-leiste: #161512; --sf-buehne: #0E0D0C; --sf-buehne-streifen: #141311; /* Blaupausenpapier: dunkel IST der Grund (so fuehrt es `blaupause.css` mit `--plan-grund: var(--ground)`), hell ist es die eigene Papierfarbe des Designs (#f1ede6, unten). Eine Marke fuer beide Themen, damit `var()` im Dunkeln nicht ins Leere greift. */ --sf-papier: var(--sf-0); /* Text — vier Stufen, jede mit ihrer Messung */ --ink-1: #eeeae0; /* hoch */ --ink-2: #a8a395; /* mittel */ --ink-3: #948e80; /* niedrig — steht als TEXT bis 9-10px auf Grund UND auf angehobenen Tafeln, also ist der AA-Boden --sf-2 und nicht nur --sf-0: 5.09:1 auf sf-2, 5.74:1 auf sf-0. */ --ink-4: #8d8779; /* schwach — Fussnoten/Meta, auch auf angehobenen Tafeln: 4.65:1 auf --sf-2, 5.24:1 auf --sf-0. Die Reihenfolge bleibt auf JEDER Flaeche geordnet (sf-2: ink-2 6.55 > ink-3 5.09 > ink-4 4.65). */ /* Die Alpha-Tinte des Designs — ALPHA NUR AUF DECKENDEM GRUND (10 §2.2). Dieses Blatt ist deckend, also darf sie hier stehen; Aphenius' Panel (Glas) bleibt bei deckenden Werten, `tokens.css` sagt warum. Gemessen mit `app/src/kontrast.ts` (23.08.2026) auf #131210 UND #1a1814 — 05 (b) hatte nur #191714 gerechnet: --tinte-1 0,92 14,58 / 13,87 --tinte-3 0,62 7,06 / 6,87 --tinte-2 0,75 9,90 / 9,53 --trenner 0,55 5,79 / 5,67 Alle vier halten 4,5 als Text auf beiden Gruenden. Die vier deckenden `--ink-*` oben bleiben die Tinte der HEUTIGEN Seite; was in Welle 3 ins Design zieht, nimmt die Alpha-Leiter. Hell unten: rgba(0,0,0, .898 / .62 / .55) nach Design-README (drei Stufen; HANDOFF nennt dazwischen 0,75 als zweite — nicht als Marke genommen, weil README und die Entscheidung 10 §2.2 drei nennen). */ --tinte-1: rgba(246, 245, 244, 0.92); --tinte-2: rgba(246, 245, 244, 0.75); --tinte-3: rgba(246, 245, 244, 0.62); --trenner: rgba(246, 245, 244, 0.55); /* Haarlinien — NUR dekorative Trenner. Ueber ihrem Grund zusammengerechnet lesen sie 1.15/1.28/1.56 auf --sf-0. Das ist richtig fuer eine Regel zwischen Textbloecken (WCAG 1.4.11 gilt fuer rein dekorative Striche nicht) — heisst aber: KEIN --line-* darf je der Strich sein, der eine Bedeutung traegt. Dafuer gibt es --stroke-figure. */ --line-1: rgba(255, 245, 220, 0.06); --line-2: rgba(255, 245, 220, 0.10); /* Figuren-Strich — die Linie, die die Information IST. WCAG 1.4.11 verlangt 3:1 fuer Teile einer Grafik, die man zum Verstehen braucht, und die --line-*-Stufe darauf kommt auf keinem Thema. Ueber ihrem Grund gemessen: 3.62:1 auf --sf-0, 3.62:1 auf --sf-1, 3.57:1 auf --sf-2. Warum 0.40 und nicht weniger: streng gelesen (Strich auf --sf-0, daneben eine angehobene --sf-2-Tafel) haelt 0.40 noch 3.21:1, 0.36 faellt auf 2.80:1 und durch. 0.40 ist der niedrigste Halt, der BEIDE Lesarten ueberlebt — der Strich ist nie lauter als noetig. */ --stroke-figure: rgba(255, 245, 220, 0.40); /* Konstruktions-Strich — die andere Haelfte des Zwei-Staerken-Paars (DESIGN-BLUEPRINT-LANGUAGE B1): Bezugslinie, Teilung, Fuehrung. ABSICHTLICH unter 3:1 und ein Alias der Haarlinie, weil eine Konstruktionslinie zum Verstehen nicht gebraucht wird und nie die einzige Bedeutung tragen darf. Den Rang zu benennen ist der Punkt: eine Figur, die direkt nach --line-1 greift, kann nicht mehr sagen, ob sie „dekorativ" meinte oder nur ein Grau gewaehlt hat. */ --stroke-construction: var(--line-1); /* Akzent — ein einziger, gesaettigt, sparsam. Der Farbton ist ein Regler. Und er ist KEIN Textmarker: Amber markiert das Mass, um das es im Satz daneben gerade geht (DESIGN-BLUEPRINT-LANGUAGE B5). Seit dem 23.08.2026 traegt er die Semantik des Produkt-Designs (10 §2.3): FEUER — Aktivitaet, laeuft, verlangt dich; nie als Flaeche hinter Text, nie als Textfarbe. Hue 65 bleibt (Veto-Liste: wer kippt, dreht diese eine Zahl und laesst kontrast.ts rechnen). Heute steht `--amber` in diesem Blatt noch als `color:` an `a`, `.augenbraue` und `.hero h1 .akzent` — diese Stellen wandern mit ihren Flaechen (Welle 3), nicht mit der Marke. */ --amber-h: 65; --amber: oklch(0.74 0.13 var(--amber-h)); /* 0.63, nicht 0.58 (18.08.2026): --amber-dim ist SCHRIFT — die Ordnungszahl der Beine (.bein .nr, 12px auf --sf-1). 0.58 mass dort 4.01:1, unter dem 4.5er-Boden (gateway/test/kontrast.test.js misst nach). 0.63 ist die niedrigste Stufe, die auf allen drei Flaechen haelt (5.20 / 4.92 / 4.61) und dabei sichtbar unter --amber bleibt — gedimmt heisst leiser, nicht unlesbar. */ --amber-dim: oklch(0.63 0.12 var(--amber-h)); --amber-glow: oklch(0.74 0.13 var(--amber-h) / 0.16); /* System-Zustand */ --status-ok: #6b9f6a; --status-warn: #c98b4a; /* Die zwei Zustandsfarben des Designs, die dem Baum fehlten (10 §2.3): WASSER — verlaesst die Maschine (Regel 1: eckig = nach draussen); auf diesem deckenden Grund der Design-Wert #7aa8b8 (kontrast.ts — 7,24 auf --sf-0, 6,85 auf --sf-1), als Text und als Marke. Hell unten: Flaeche #4f7d8c (Marke, >= 3,0: 4,15 auf #f6f5f4, 4,52 auf #ffffff — als TEXT reisst sie mit 4,15) und Text #3d6371 (5,99 / 6,52 / 5,93 / 5,59 auf den vier hellen Gruenden); dunkel tragen beide Namen denselben Wert, weil das Design dort nur einen fuehrt. STROMA — bewusst nicht ausgewertet (Ruhezeit, Privat, Schnellnotiz), kalt gegen die warme Tinte, NIE fuer Text oder Raender. Design dunkel #1e1d1c (gegen --sf-0 1,11, gegen --sf-1 1,05), hell #2a2333 (das kalt-violette Stroma des Boards; 13,91 gegen #f6f5f4 — eine Flaeche, die man sieht, auf der aber nichts stehen darf). */ --wasser: #7aa8b8; --wasser-text: #7aa8b8; --stroma: #1e1d1c; /* Typografie */ --font-sans: 'Geist', ui-sans-serif, sans-serif; --font-mono: 'Geist Mono', ui-monospace, monospace; /* Source Serif 4 fuer Nutzertext und Anzeige (10 §1) — dieselbe Marke, der gleiche Rueckfall wie in `stil.css` und `tokens.css`; und die vier Serif-Stufen der einen Leiter mit ihren Hausnamen (17 · 19 Nutzertext, Zeile 1,5; 21 · 26 Anzeige, Zeile 1,3). `--font-serif` hat seit dem 23.08.2026 (Welle 3, Bahn N3) Abnehmer: die H1 der sechs Produktseiten — `.hero h1` unten (die Startseite) und `.seitenkopf h1` in den fuenf Unterseiten. Die vier Groessen-Sprossen stehen weiter ohne Abnehmer, und das ist entschieden, nicht vergessen: Die H1 der Unterseiten traegt `.gross` (clamp 26–36), darunter stehen H2 in derselben `.gross`-Stufe; eine H1 auf der 26er-Sprosse staende bei 1440 px UNTER ihren H2 (36) — eine umgedrehte Ordnung ist kein Leiterschritt. Die Serif-Anzeige 21 · 26 ist die Anzeige IN der Flaeche (10 §1), die Seiten-H1 bekommt die Schrift der Anzeige und behaelt ihr Mass. Nutzertext 17 · 19 wartet auf Konto und Zitate (Welle 3). */ --font-serif: 'Source Serif 4', Georgia, serif; --schrift-serif-text: 17px; --schrift-serif-text-gross: 19px; --schrift-serif-anzeige: 21px; --schrift-serif-anzeige-gross: 26px; --zeile-anzeige: 1.3; /* Geometrie — ein Radius */ --r: 4px; /* 8, nicht 6 (17.08.2026): Die Haus-Skala kennt 4/8/16/999 (stil.css) — ein fuenfter Radius drei Meter neben der Skala ist genau das Zerfasern, das der Rat der Linsen gemessen hat. */ --r-lg: 8px; /* Schriftgroessen — DIE EINE LEITER MIT IHREN HAUSNAMEN (23.08.2026, Welle 3, Entscheidung b des Koordinators: EINE Namenswelt). Dieselben fuenf Sprossen, Wert fuer Wert, wie `stil.css::--schrift-meta/-neben/-text/ -gross/-kopf` und `app/src/tokens.css` — 12 / 13 / 14 / 16 / 18. `seiten-leiter.test.js::die Seiten rufen die Leiter auch wirklich` verlangt `var(--schrift-` auf jeder Seite unter gateway/site, und die fuenf Produktseiten, die dieses Blatt tragen, riefen bis heute eine zweite Namenswelt (`--text-micro/-caption/-small/-body/-md/-lg`, aus dem Uebergabepaket) — zwei Namen fuer dieselbe Sprosse, der Dialekt, gegen den `stil.css` gebaut ist. UMGEZOGEN, NICHT ALIASIERT: Die sechs alten Namen hatten 35 Abnehmer in diesem Blatt und 136 in den sechs Produktseiten (grep, 23.08.2026), alle in derselben Zone; jeder ist mitgezogen, und ein Alias-Paar waere wieder ein zweiter Name fuer dieselbe Sprosse (`stil.css`-Kopf: „Ein Alias-Paar stuende hier ausdruecklich NICHT"). Zuordnung: micro/caption/small (alle 12) -> --schrift-meta, body 13 -> --schrift-neben, md 14 -> --schrift-text, lg 16 -> --schrift-gross. Die 18er-Sprosse `--schrift-kopf` hatte im alten Blatt keinen Vorgaenger und steht hier noch ohne Abnehmer — als Spiegel der Leiter, nicht als Zusage (ihr erster Abnehmer in diesem Blatt traegt sie dann). Geschichte der Werte: 12, nicht 9 (micro) und nicht 10 (caption), seit dem 17.08.2026 — die Haus-Untergrenze fuer Text ist 12px, ausnahmslos, sonst ist sie nicht pruefbar (reihen-waechter.mjs sagt es im App-Baum woertlich; gateway/test/gestaltung.test.js haelt sie hier). Fliesstext bleibt 13 (die html/body-Grundlinie unten). */ --schrift-meta: 12px; --schrift-neben: 13px; --schrift-text: 14px; --schrift-gross: 16px; --schrift-kopf: 18px; /* Sperrung — die kanonische Laufweite. --ls-0 haelt „absichtlich normal" fest. */ --ls-0: 0px; --ls-snug: 0.1px; --ls-wide: 0.12px; --ls-wider: 0.14px; --ls-widest: 0.16px; /* Bewegung — ein Easing, und die Dauern der einen Leiter (10 §4): die Fibonacci-Dauern des Designs, 150 → 144 und 200 → 233, dieselben Werte wie `stil.css::--micro/--enter` und `tokens.css::--motion-micro/-enter`. `--ease` bleibt die Kurve dieser Seite (Sprungmarke); die Kurve des Designs fuer Einmaliges steht daneben fuer das, was in Welle 3 kommt. */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --curve-einmalig: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 144ms; --dur: 233ms; /* Schatten — DUNKEL TRENNT NIE MIT SCHATTEN, nur mit Haarlinie oder Flaechenstufe (Design, 10 §5; Messung 05 (c): auf dunklem Grund traegt ein Schatten nichts). Die Marke existiert trotzdem in beiden Themen, damit eine Flaeche `box-shadow: var(--shadow-flaeche-hell)` schreiben kann und im Dunkeln NICHTS bekommt statt eines leeren `var()`. Den hellen Wert setzt das helle Thema unten. */ --shadow-flaeche-hell: none; } /* ---- Marken (hell) ------------------------------------------------------ Wort fuer Wort die Neuschluesselung aus index.css:276-325, samt ihrer Messungen. Der Farbton-Regler (--amber-h) bleibt lebendig. */ @media (prefers-color-scheme: light) { :root { /* DIE HELLEN GRUENDE DES DESIGNS (10 §2.1, entschieden am 23.08.2026). Hier standen #f7f5f0 / #efede7 / #e6e3dc — die Neuschluesselung aus index.css (`:root:not(.dark)`), die vom Design-Grund #f6f5f4 nur um ΔRGB 1/0/4 abwich. Jetzt Wort fuer Wort das Design: Grund #f6f5f4, Flaeche/Karte #ffffff (das Design hebt auf Weiss, der Baum hob auf warmes Creme), Kopfschiene/Rille #f4f4f5 (die Stufe, die in diesem Blatt `.ghost:hover` und der Rollbalken tragen — unter der Flaeche, wie vorher), dazu das Blaupausenpapier #f1ede6. Die vier Ink-Stufen halten auf allen vier Gruenden (kontrast.ts, 23.08.2026): #f6f5f4 #ffffff #f4f4f5 #f1ede6 --ink-1 16,28 17,73 16,13 15,19 --ink-2 7,16 7,79 7,09 6,68 --ink-3 5,51 6,00 5,46 5,14 --ink-4 5,34 5,81 5,29 4,98 — alle ueber 4,5, und die Ordnung bleibt auf jeder Flaeche; die hellen Gruende sind heller als die alten, jede Zahl ist gestiegen (`gateway/test/kontrast.test.js` misst sie nach). */ --sf-0: #f6f5f4; --sf-1: #ffffff; --sf-2: #f4f4f5; --sf-papier: #f1ede6; --ink-1: #1a1814; --ink-2: #55524b; --ink-3: #676358; /* angehoben von #8a8780 (3.29:1) auf 5.50:1 ueber hellem --sf-0 (damals #f7f5f0; auf #f6f5f4 5,51) — dieselbe AA-Anhebung, die das dunkle Thema in tokens.css macht. */ /* schwach — --ink-4 steht als TEXT auf Grund UND auf angehobenen Tafeln, der AA-Boden ist also helles --sf-2: 5,29:1 auf sf-2 (#f4f4f5), 5,34:1 auf sf-0. Bleibt auf jeder Flaeche unter --ink-3 (sf-2: ink-3 5,46 > ink-4 5,29). */ --ink-4: #69655b; /* Die Alpha-Tinte des Designs, hell: rgba(0,0,0, .898 / .62 / .55) — gemessen auf #f6f5f4 / #ffffff / #f4f4f5 / #f1ede6: --tinte-1 16,15 / 17,40 / 16,01 / 15,19 --tinte-2 6,03 / 6,20 / 6,01 / 5,89 --tinte-3 4,66 / 4,76 / 4,65 / 4,58 (knapp, aber >= 4,5 ueberall) --trenner dieselbe 0,55 — hell fuehrt das Design keinen eigenen Trenner unter der dritten Stufe; 4,58 auf Papier ist der kleinste Wert und liegt ueber 3,0 UND ueber 4,5. */ --tinte-1: rgba(0, 0, 0, 0.898); --tinte-2: rgba(0, 0, 0, 0.62); --tinte-3: rgba(0, 0, 0, 0.55); --trenner: rgba(0, 0, 0, 0.55); /* Haarlinie und Rand WARM, nie neutral — in beiden Themen (10 §2.1, Design-Regel „alle Kanten warm getoent"; bis heute hielt der Baum sie nur im Dunkeln). rgba(34,28,22,…) statt rgba(0,0,0,…): dekorative Trenner, 1,16 / 1,24 auf #f6f5f4 — unter 3:1, wie es fuer --line-* gewollt ist (siehe den dunklen Block oben). */ --line-1: rgba(34, 28, 22, 0.075); --line-2: rgba(34, 28, 22, 0.11); /* Heller Figuren-Strich — ebenfalls warm, und dafuer 0,50 statt 0,46: Die warme Toenung ist heller als Schwarz, 0,46 warm haelt nur 2,87 / 2,92 / 2,86 / 2,83 und reisst die 3:1; 0,48 reisst auf Papier (2,99); 0,50 ist der niedrigste Halt auf allen vier Gruenden (3,21 auf --sf-0, 3,28 auf --sf-1, 3,21 auf --sf-2, 3,16 auf Papier) — derselbe Satz wie beim dunklen 0,40: nie lauter als noetig. */ --stroke-figure: rgba(34, 28, 22, 0.50); /* Der helle Flaechenschatten des Designs (10 §5; Design README::Masse, Radien, Schatten) — Ring, Haarkante, weicher Wurf, alle warm getoent. Nur hell: dunkel trennt nie mit Schatten (Marke oben auf `none`). */ --shadow-flaeche-hell: 0 0 0 1px rgba(34, 28, 22, 0.11), 0 1px 1px rgba(34, 28, 22, 0.03), 0 18px 38px -20px rgba(34, 28, 22, 0.3); /* Wasser hell: Flaeche/Marke und Text getrennt, Messung oben. Stroma hell: das kalt-violette Stroma des Boards. */ --wasser: #4f7d8c; --wasser-text: #3d6371; --stroma: #2a2333; --amber-glow: oklch(0.74 0.13 var(--amber-h) / 0.12); /* Dunkler als die Quelle (18.08.2026): die Plakette schreibt ihre Marke als 12px-SCHRIFT auf den eigenen 15%-Mischgrund ueber heller Tafel (--sf-1) — dort massen #357034 nur 4.18:1 und #845b24 nur 4.20:1 (gateway/test/kontrast.test.js misst nach). Diese beiden halten 4.80 bzw. 4.73 auf demselben Grund; die dunklen Marken hielten schon. */ --status-ok: #2f652e; --status-warn: #795320; /* Marken-Amber fuer helle Flaechen abgedunkelt — genau die Neuschluesselung, die official.css fuer Papier benutzt: als TEXT lesbar, >= 4.5:1 auf --sf-0 (das dunkel gestimmte oklch-0.74-Amber misst hier etwa 2:1). */ --amber: oklch(0.52 0.11 var(--amber-h)); --amber-dim: oklch(0.45 0.10 var(--amber-h)); } } /* ---- Grundlage ---------------------------------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--sf-0); color: var(--ink-1); font-family: var(--font-sans); font-size: 13px; line-height: 1.55; font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html { overflow-x: hidden; } /* Feines Korn + Vignette fuer Tiefe. Das Rauschen ist ein inline-SVG als data:-URI — kein Abruf, kein zweiter Ursprung. Auf Papier ist es Rauch und faellt weg, genau wie index.css es fuer `:root:not(.dark)` schreibt. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,0.28) 100%), url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; } @media (prefers-color-scheme: light) { body::before { display: none; } } /* Alles, was Inhalt ist, liegt ueber dem Korn. */ body > * { position: relative; z-index: 2; } .mono { font-family: var(--font-mono); font-feature-settings: "ss01", "ss02", "calt"; } .t-up { text-transform: uppercase; letter-spacing: 0.06em; } ::selection { background: var(--amber-glow); color: var(--ink-1); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--sf-2); border-radius: 0; } ::-webkit-scrollbar-track { background: transparent; } a { color: var(--amber); } /* Fokus-Ring (a11y.css:45-52). Die Sprungmarke ist ausgenommen, sie zeigt ihren Fokus dadurch, dass sie ueberhaupt erscheint. */ a:not(.skip-to-content):focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; } /* Sprungmarke (a11y.css:78-96) — WCAG 2.4.1, das erste fokussierbare Ding der Seite. Bis zum Tastendruck liegt sie ausserhalb der Flaeche. */ .skip-to-content { position: absolute; left: 8px; top: -64px; z-index: 9999; padding: 8px 12px; background: var(--sf-1); color: var(--ink-1); border: 1px solid var(--line-2); border-radius: var(--r); font-size: 12px; text-decoration: none; transition: top var(--dur-fast) var(--ease); } .skip-to-content:focus, .skip-to-content:focus-visible { top: 8px; outline: none; } /* ---- Bahn und Abschnitte ------------------------------------------------ 1200er Bahn, Polster 24 seitlich und 72 unten — die Masse, die Landing.tsx an jedem seiner Abschnitte traegt. */ .bahn { max-width: 1200px; margin: 0 auto; padding: 0 24px 72px; } .bahn-schmal { max-width: 1100px; margin: 0 auto; padding: 0 24px 72px; } .augenbraue { font-size: var(--schrift-meta); color: var(--amber); letter-spacing: var(--ls-widest); } /* ---- Kopf --------------------------------------------------------------- */ header.kopf { border-bottom: 1px solid var(--line-1); } header.kopf .zeile { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; row-gap: 10px; } .marke { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-1); text-decoration: none; } .marke .wort { font-family: var(--font-mono); font-size: var(--schrift-text); letter-spacing: var(--ls-0); } /* Die Wortmarke ist der Weg zurueck zum Anfang und war 24 px hoch (gemessen, 20.08.2026) — knapp an WCAG 2.5.8 vorbei, weit unter den 44 des Hauses. Die Kopfzeile ist hoeher als 44, die Marke wuchs also in vorhandenen Platz hinein; die Zeile bleibt, wie sie war. */ .marke { min-height: 44px; } /* ---- Hero --------------------------------------------------------------- Die Masse stammen aus dem Hero der alten SPA-Landing (seite/client/src/public/Landing.tsx, Stand 23.08. vormittags — die Datei ist seither Textquelle ohne Route; die Masse leben hier weiter). */ .hero { max-width: 1200px; margin: 0 auto; padding: 96px 24px 72px; } .hero .satz { max-width: 760px; } /* Die Anzeige in Source Serif 4 (10 §1: „Anzeige + Nutzertext = Source Serif 4", Welle 3, Bahn N3) — das eine Wort der Startseite, das ueber der Leiter steht: Die Serif-Anzeige der Leiter (21 · 26) ist die Anzeige IN der Flaeche; der Hero der Produktseite hat keine Sprosse und behaelt sein Mass (siehe den Hero-Kommentar oben), aber die Schrift der Anzeige. Fliesstext daneben (`.fuehrung`) bleibt Geist. Die Sperrung ist weicher als bei der Grotesk (-0.01em statt -0.03em): Eine Serife mit eng gezogenen Buchstaben verliert ihre Serifen ineinander. Kontrast unveraendert — nur die Schrift. */ .hero h1 { font-family: var(--font-serif); font-size: clamp(44px, 6vw, 76px); line-height: 1.0; letter-spacing: -0.01em; font-weight: 650; margin: 10px 0 0; color: var(--ink-1); } .hero h1 .akzent { color: var(--amber); } .hero .fuehrung { font-size: clamp(16px, 2.2vw, 19px); line-height: 1.6; color: var(--ink-2); margin-top: 24px; max-width: 640px; } /* Hier standen bis zum 16.08.2026 die drei Vertrauenszeilen unter dem Hero (`.hero .drei`). Sie sind mit der Positionierungs-Entscheidung des Besitzers aus dem HTML gefallen — zwei der drei waren Pruef-Zusagen —, und ihre Regeln fallen hier mit. Ein Stil ohne Traeger ist eine Form ohne Bedeutung und die Einladung, sie wieder zu benutzen. */ /* ---- Beispiel-Lauf ------------------------------------------------------ */ .lauf { border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; background: var(--sf-1); } .lauf .leiste { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line-1); background: var(--sf-0); } /* Der Punkt in der Leiste traegt einen amberfarbenen Ring. Das ist KEIN Halo als Betonung: er ist die Zustandslampe der Vorschau und steht so in tokens.css als `.dot.live`. Das Wort daneben sagt dasselbe noch einmal — Farbe ist nie der einzige Traeger. */ .lauf .lampe { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px var(--amber-glow); flex: 0 0 auto; } .lauf .leiste .titel { font-size: var(--schrift-meta); color: var(--ink-3); letter-spacing: var(--ls-wider); } .lauf .leiste .spur { font-size: var(--schrift-meta); color: var(--ink-4); margin-left: auto; } .lauf .haelften { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1px; background: var(--line-1); } .lauf .haelfte { background: var(--sf-1); padding: 20px; } .lauf .haelfte > .augenbraue { font-size: var(--schrift-meta); letter-spacing: var(--ls-wider); } .linsen { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; } .linse { padding: 10px; border-radius: var(--r); border: 1px solid var(--line-1); background: var(--sf-0); display: flex; flex-direction: column; gap: 4px; } .linse .kopfzeile { display: flex; justify-content: space-between; gap: 8px; } .linse .name { font-size: var(--schrift-meta); color: var(--ink-3); letter-spacing: var(--ls-wider); } .linse .c { font-size: var(--schrift-meta); color: var(--ink-4); font-variant-numeric: tabular-nums; } .linse p { font-size: var(--schrift-meta); color: var(--ink-1); margin: 0; line-height: 1.5; } .synthese { margin-top: 12px; padding: 14px; background: var(--sf-0); border-radius: var(--r-lg); border: 1px solid var(--line-1); } .synthese p { font-size: var(--schrift-neben); color: var(--ink-2); line-height: 1.6; margin: 0; } .synthese .werte { margin-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; color: var(--ink-4); font-size: var(--schrift-meta); } /* ---- Karten (Ergebnis / Faehigkeit) ------------------------------------ Hausmass-Paar 18/14: Polster der Karte / Fuge des Gitters. */ .gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .gitter-eng { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .karte { padding: 18px; border: 1px solid var(--line-1); border-radius: var(--r-lg); background: var(--sf-1); display: flex; flex-direction: column; gap: 10px; } .karte h3 { font-size: var(--schrift-gross); color: var(--ink-1); font-weight: 550; margin: 0; } .karte p { font-size: var(--schrift-neben); color: var(--ink-3); line-height: 1.6; margin: 0; } .karte-kap { gap: 6px; } .karte-kap .zeile { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .karte-kap h3 { font-size: var(--schrift-text); font-weight: 500; } .karte-kap p { font-size: var(--schrift-meta); line-height: 1.55; } .karte-kap .wink { font-size: var(--schrift-meta); color: var(--ink-4); margin-top: 2px; } /* Zustandsplakette. Der Zustand steht als WORT da; die Farbe wiederholt ihn nur (keine Farbe als alleiniger Bedeutungstraeger). */ .plakette { font-size: var(--schrift-meta); letter-spacing: var(--ls-wide); padding: 2px 6px; border-radius: var(--r); flex-shrink: 0; } .plakette.live { background: color-mix(in srgb, var(--status-ok) 15%, transparent); color: var(--status-ok); } .plakette.optional { background: color-mix(in srgb, var(--status-warn) 15%, transparent); color: var(--status-warn); } /* ---- Dissens ------------------------------------------------------------ */ .satzbahn { max-width: 680px; } .gross { font-size: clamp(26px, 3.4vw, 36px); font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; margin: 10px 0 0; color: var(--ink-1); } .fuehrung-mittel { font-size: var(--schrift-text); color: var(--ink-2); line-height: 1.6; margin-top: 14px; max-width: 580px; } .beispiel { margin-top: 20px; padding: 14px 18px; max-width: 720px; border: 1px solid var(--line-1); border-radius: var(--r-lg); background: var(--sf-1); display: flex; flex-direction: column; gap: 6px; } .beispiel .marke-klein { font-size: var(--schrift-meta); color: var(--ink-4); letter-spacing: var(--ls-wider); } .beispiel p { font-size: var(--schrift-meta); color: var(--ink-2); line-height: 1.55; margin: 0; } /* ---- Nachweis-Abschnitt ------------------------------------------------- */ .tafel { border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; background: var(--sf-1); } .tafel .innen { padding: 40px 36px; } @media (max-width: 560px) { .tafel .innen { padding: 28px 20px; } } .beine { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .bein { padding: 18px; border: 1px solid var(--line-1); border-radius: var(--r-lg); background: var(--sf-1); display: flex; flex-direction: column; gap: 6px; } .bein .zeile { display: flex; align-items: center; gap: 8px; } .bein .nr { font-size: var(--schrift-meta); color: var(--amber-dim); letter-spacing: var(--ls-snug); } .bein h3 { font-size: var(--schrift-text); color: var(--ink-1); font-weight: 550; margin: 0; } .bein p { font-size: var(--schrift-meta); color: var(--ink-3); line-height: 1.55; margin: 0; } .fussnote { font-size: var(--schrift-meta); color: var(--ink-4); line-height: 1.5; margin: 18px 0 0; max-width: 440px; } /* Die Zeichnung. Sie behaelt ihre eigene Breite und SCROLLT auf schmalen Geraeten, statt sich kleinzurechnen: bei 375px Breite laege eine mitskalierende Zeichnung bei Faktor 0.34, und die 10px-Beschriftung erschiene als 3.4px — vorhanden, ueberschneidungsfrei, unlesbar. Eine Zeichnung, deren Beschriftung man nicht lesen kann, ist keine kleinere Zeichnung, sondern Dekoration. Sicher ist das nur, weil die Bildunterschrift darunter sichtbar und vollstaendig ist. */ figure.weg { margin: 26px 0 0; max-width: 660px; } figure.weg .rollflaeche { overflow-x: auto; max-width: 100%; } figure.weg svg { display: block; } figure.weg text { font-family: var(--font-mono); text-transform: uppercase; } figure.weg figcaption { font-family: var(--font-mono); font-size: var(--schrift-meta); color: var(--ink-4); margin-top: 10px; line-height: 1.5; } /* ---- Herkunft ----------------------------------------------------------- */ .zitat { margin: 14px 0 0; padding: 14px 18px; max-width: 720px; border-left: 1px solid var(--stroke-figure); background: var(--sf-1); border-radius: 0 var(--r-lg) var(--r-lg) 0; } .zitat p { margin: 0; font-size: var(--schrift-text); color: var(--ink-2); line-height: 1.6; } .zitat cite { display: block; margin-top: 8px; font-style: normal; font-family: var(--font-mono); font-size: var(--schrift-meta); color: var(--ink-4); letter-spacing: var(--ls-snug); } /* Der eine Knopf dieser Seite: Umriss, nicht Fuellung. Er fuehrt woandershin, er bestaetigt nichts. */ .ghost { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 13px 20px; border-radius: var(--r); border: 1px solid var(--line-2); color: var(--ink-1); font-size: var(--schrift-text); text-decoration: none; } .ghost:hover { background: var(--sf-2); } /* ---- Angaben ------------------------------------------------------------ Das Schriftfeld-Gitter. Die Klassen `.feld` und `.was` sind NICHT frei waehlbar: `gateway/server/anbieterangaben.js` setzt beim Ausliefern einen fertigen Block mit genau diesen beiden Klassen zwischen die ANGABEN-Marken, sobald die Pflichtangaben vollstaendig sind. Wer sie hier umbenennt, laesst den eingesetzten Block unformatiert erscheinen — und zwar erst an dem Tag, an dem ihn niemand mehr erwartet. */ .feld { display: grid; grid-template-columns: minmax(140px, 180px) 1fr; align-items: baseline; gap: 8px 18px; padding: 14px 0; border-bottom: 1px solid var(--line-1); } .feld:last-child { border-bottom: 0; } .feld p { margin: 0; font-size: var(--schrift-neben); color: var(--ink-2); line-height: 1.6; } .feld p + p { margin-top: 8px; } .was { font-family: var(--font-mono); font-size: var(--schrift-meta); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--ink-3); } @media (max-width: 560px) { .feld { grid-template-columns: 1fr; } } /* Der Luecken-Kasten. Er sagt, was der Seite fehlt — und faellt weg, sobald es nicht mehr fehlt. --status-warn traegt ihn, weil er ein Zustand ist und kein Ausruf; das Wort im Kasten sagt dasselbe. */ .luecke { margin-top: 20px; padding: 14px 18px; max-width: 720px; border: 1px solid var(--line-1); border-left: 1px solid var(--status-warn); border-radius: 0 var(--r-lg) var(--r-lg) 0; background: var(--sf-1); } .luecke b { display: block; font-size: var(--schrift-text); color: var(--ink-1); font-weight: 550; } .luecke p { margin: 6px 0 0; font-size: var(--schrift-meta); color: var(--ink-3); line-height: 1.55; } /* ---- Fuss --------------------------------------------------------------- */ footer.fuss { border-top: 1px solid var(--line-1); padding: 40px 24px 56px; color: var(--ink-3); margin-top: 80px; } footer.fuss .oben { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; } footer.fuss .blurb { font-size: var(--schrift-meta); line-height: 1.6; max-width: 360px; margin: 12px 0 0; } footer.fuss h2 { font-family: var(--font-mono); text-transform: uppercase; font-size: var(--schrift-meta); letter-spacing: var(--ls-wider); color: var(--ink-4); margin: 0 0 12px; font-weight: 400; } footer.fuss ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } /* GEMESSEN AM 20.08.2026 auf 375x812: 16 px hoch. Die Verweise im Fuss sind der einzige Weg von dieser Seite zu Impressum und Datenschutz — also genau die Wege, die ein Mensch sucht, wenn er etwas wissen will, das ihm zusteht. WCAG 2.5.8 verlangt 24; das Haus hält 44. Die Ausnahme fuer Verweise im Fliesstext greift hier nicht — sie stehen in einer Liste untereinander, jeder fuer sich. */ footer.fuss ul a { color: var(--ink-2); font-size: var(--schrift-meta); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } footer.fuss ul a:hover { color: var(--ink-1); } footer.fuss .unten { max-width: 1200px; margin: 32px auto 0; padding-top: 16px; border-top: 1px solid var(--line-1); font-family: var(--font-mono); font-size: var(--schrift-meta); color: var(--ink-4); } /* ---- Bewegung ---------------------------------------------------------- Auf dieser Seite bewegt sich genau eines: die Sprungmarke, wenn sie den Fokus bekommt. Es gibt keine Loop-Animation (Doktrin-Gesetz 3). Wer die Betriebssystem-Einstellung gesetzt hat, bekommt auch das nicht. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }