/* Schrift und Farben der Marke. Die eine Stelle. =========================================================================== Eingebunden von allen dreien: der App (`web/index.html`), der Landingpage und den Rechtsseiten. Vorher stand derselbe Satz Werte in `index.css`, `landing.html` und `recht.css` — drei Orte, an denen eine Farbänderung auseinanderlaufen konnte, ohne dass irgendetwas fehlschlägt. Als statische Datei in `public/` und nicht als Import im Bundle: die Landingpage ist HTML außerhalb des Bundles und käme an einen Dateinamen mit Hash nicht heran. Über eine feste URL teilen sich alle Seiten dieselbe Datei im Cache — wer von der Landingpage in die App wechselt, lädt sie nicht noch einmal. Den fehlenden Hash fängt `Cache-Control: no-cache` im Caddyfile ab. Der Preis ist eine zusätzliche blockierende Anfrage vor dem ersten Bild. Sie ist rund ein Kilobyte groß, kommt vom selben Host und liegt beim zweiten Seitenaufruf im Cache. */ /* ── Schrift ─────────────────────────────────────────────────────────────── Figtree, selbst gehostet. Nicht von Google Fonts, aus zwei Gründen: ein Fremdaufruf bräche den Offline-Start (die App käme aus dem Cache, die Schrift nicht), und jeder Aufruf überträgt die IP-Adresse an Google — ohne Einwilligung nicht zu haben. Eine variable Schrift statt drei Schnitten: eine Datei deckt 400 bis 700 ab. Zwei Zeichensatzbereiche, wie Google sie ausliefert — `latin` trägt Deutsch samt Umlauten, `latin-ext` fängt Namen mit Sonderzeichen ab und wird nur geladen, wenn eines vorkommt. `font-display: swap` ist Absicht: lieber sofort in der Systemschrift lesen als auf eine leere Liste sehen. */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/schriften/figtree-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/schriften/figtree-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── Farben ──────────────────────────────────────────────────────────────── Die neun Tokens aus dem Markenpaket, Stil A „Hafer". Der Modus hängt an `prefers-color-scheme` und an nichts sonst. Vorher setzte `darkmodus.ts` eine Klasse `.dark` auf — aus derselben Medienabfrage, die hier steht, nur über einen Umweg durch JavaScript. Der Umweg hatte einen Zweck: eine Utility `dark:…` von Tailwind braucht die Klasse. Verwendet wurde keine einzige. Damit blieb ein Mechanismus übrig, der nichts konnte, was CSS nicht selbst kann — und den die statischen Seiten mangels JavaScript ohnehin nicht nutzen konnten. Kommt später ein Schalter „immer hell / immer dunkel", gehört hier ein `:root.hell` beziehungsweise `:root.dunkel` daneben. Bis dahin folgt die App dem System, so wie das Design es vorsieht. */ :root { --c-bg: #faf7f2; --c-surface: #ffffff; --c-line: #e2dacc; /* Eigener Token, nicht `line`: der leere Check-Kreis ist ein UI-Element und braucht ≥ 3:1. In der Trennlinienfarbe lag er bei 1,3:1 — und im Laden ist genau dieser Kreis das, was man sucht. Trennlinien bleiben leise. */ --c-ring: #8c8375; --c-text: #2b2620; --c-muted: #6b6459; --c-accent: #4b6b3a; --c-accent-fg: #ffffff; --c-danger: #b3261e; } @media (prefers-color-scheme: dark) { :root { --c-bg: #211d18; --c-surface: #2c2721; --c-line: #3e372e; --c-ring: #8a7f6e; --c-text: #f3eee6; --c-muted: #a79e90; --c-accent: #8fb574; --c-accent-fg: #1d1912; --c-danger: #e2694f; } }