/* ============================================================================ modvio CI — die EINE Quelle der Design-Tokens. ============================================================================ Jede Flaeche der neuen Fassung laedt diese Datei ZUERST: Landing, Branchen- seiten, Rechtsseiten, /start. Look einmal hier aendern -> alle Seiten ziehen nach. Warum ueberhaupt: das CI lag bis zum 18.08.2026 in VIER Kopien mit teils verschiedenen Namen (`tokens.css` auf modvio.de, `ratgeber/style.css`, `docs/theme/docs.css`, der `:root` in `landing-v4.css`). Die README schrieb den Zustand selbst als Mangel auf: „eine Quelle je Seite, kein Auto-Sync". Bei der vio-Familie ist genau diese Drift schon einmal beendet worden (`modvio/platform/shared-ui/vio-tokens.css`) — hier dasselbe Muster. ⚠️ NICHT in `landing-v4.css` wieder einen `:root` aufmachen. Der stand dort und ist am 18.08. hierher gewandert; eine zweite Definition macht den Wert davon abhaengig, welche Datei zuletzt geladen wurde. ========================================================================= */ :root{ /* ---- Tinte & Text ---- */ --ink:#0B0E14; --ink-2:#22262E; --text:#525A67; --soft:#5C6371; --faint:#616775; /* ---- Linien & Flaechen (warm — der Kern der neuen Fassung) ---- */ --line:#E6E3DC; --line-2:#D8D4CB; --paper:#F8F7F4; --grey:#F1EFE9; --grey-2:#EAE7E0; --card:#fff; --wash:#F1EFE9; --warm:#FBFAF8; /* ---- Akzent ---- */ --blue:#2F6BFF; --blue-deep:#1E4FD8; --blue-tint:#EDF2FF; --blue-line:#DCE5FA; /* Knallige Gegenfarbe fuer die Scroll-Geschichte: Bitcoin-Orange statt des rechnerischen Komplements, das neben dem Markenblau wie Gelb wirkte. */ --orange:#F7931A; --orange-deep:#7A3A00; --orange-tint:#FFF0DD; --orange-line:#F5C58B; --orange-ink:var(--orange-deep); --green:#0B6B45; --green-tint:#E7F2EC; /* Der Akzent ALS TEXT — eigene Rolle, nicht derselbe Wert wie die Flaeche. Gemessen am 18.08.2026: #2F6BFF erreicht auf reinweiss genau 4,50:1 und stand damit schon immer auf der Kante. Auf dem warmen Grund der neuen Fassung faellt er darunter: 4,20:1 auf --paper, 3,91:1 auf --wash. Als GRAFIK (Icon, Rand, Flaeche) ist der Ton weiter richtig — dort genuegen 3:1 —, als Fliesstext oder Link nicht mehr. --blue-deep loest das mit 6,19:1 bzw. 5,77:1. ⚠️ NICHT stattdessen --blue global abdunkeln: das zieht jede Icon-Kachel, jeden Knopf und jeden Verlauf mit. Zwei Rollen, zwei Werte (CLAUDE.md §8). */ --blue-ink:var(--blue-deep); /* ---- Schrift ---- */ --fs:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif; /* ---- Mass & Raster ---- */ --mx:min(1240px,90vw); --pad:clamp(76px,9vw,124px); --nav-h:84px; --grid:78px; --r-l:16px; --r-m:12px; --r-s:10px; /* Knoepfe haben eine EIGENE Rolle, keinen der Flaechen-Radien. Gemessen am 19.08.2026 standen auf der Landing vier verschiedene Werte nebeneinander: 4 px (die Mehrheit), 999 px (Telefon-Leiste, Wechsler-Pfeile), 0 px und die Kartenradien. Wer den Wert an einer Stelle anfasst, trifft sonst nie alle. Leicht abgerundet wie die Bildmarke — die traegt 30 % auf kleinen Quadraten, was bei 54 px Knopfhoehe ungefaehr hier landet. */ --r-btn:12px; } /* ============================================================================ Bruecke fuer die portierten Bestandsseiten ============================================================================ Die sechs Branchenseiten, /start und die Rechtsseiten kommen aus modvio.de und sprechen die ALTEN Namen (`--indigo`, `--text-soft`, `--sh-md` …). Statt 265 Fundstellen je Seite umzuschreiben — was jeder erneute `port-seiten.mjs`-Lauf wieder plattmachen wuerde — zeigen die alten Namen hier auf die neuen Werte. So sieht eine portierte Seite aus wie die Landing, ohne dass ihr Markup angefasst wird. Faellt eine Bestandsseite irgendwann ganz weg, kann ihr Alias hier weg. Bis dahin ist das die Stelle, an der alt und neu zusammenkommen — genau EINE. ========================================================================= */ :root{ /* Akzent: der Blauton ist in beiden Fassungen derselbe (#2F6BFF), nur der Name wechselte von `--indigo` auf `--blue`. Kein sichtbarer Bruch. */ --indigo:var(--blue); /* Heller Stopp fuer die Verlaeufe der Branchenseiten. Das neue Set hat dafuer keine Entsprechung (`--blue-tint` ist mit #EDF2FF viel zu hell fuer einen Verlauf), deshalb bleibt der Bestandswert stehen. */ --indigo-2:#5B8CFF; /* Diese vier waren auf modvio.de NIRGENDS definiert und sind es hier auch nie gewesen — nachgemessen am 18.08.2026 im Original `modvio/gastro.html`. Eine undefinierte Custom-Property verwirft die Deklaration nicht, sie gewinnt die Kaskade und wird dann zu `unset`; der Ausfall ist deshalb still. Dieselbe Falle wie am 04.08.2026 in `nav.css`. Gemessen, welche davon WIRKLICH etwas kosten (Chrome, beide Domains, gastro): · --paper-soft ECHT. `.bmods` steht im Markup und hatte auf modvio.de live `background: rgba(0,0,0,0)` — die Flaeche fehlte schlicht. Auf neu.modvio.de jetzt #FBFAF8, deckend. · --c folgenlos: die einzige Regel dazu ist `.fnode.on .fic{…}`, und weder `.fnode` noch `.fic` kommen in einer der sechs Seiten im MARKUP vor (nur 10x im CSS). Toter Code. · --blue-soft / --sh-xl ebenfalls ohne Fundstelle im Markup der geprueften Seite. Alle vier bekommen hier trotzdem einen Wert: der Guard in `baue.mjs` faellt sonst durch, und ein spaeter eingesetztes Markup soll nicht in dieselbe stille Luecke laufen. */ --c:var(--blue); /* aktives Symbol im Ablauf-Diagramm (Regel ohne Markup) */ --blue-soft:var(--blue-tint); --paper-soft:var(--warm); --sh-xl:var(--sh-lg); /* `--mc` wird nur mit Fallback benutzt (`var(--mc,#2F6BFF)`). Der Fallback ist ein hart notierter Blauwert, der einen kuenftigen Farbwechsel NICHT mitmacht. Definiert man den Namen, greift der Fallback nie wieder. */ --mc:var(--blue); /* Text- und Flaechenrollen */ --text-soft:var(--soft); /* #86868B -> #5C6371: dunkler, also besserer Kontrast */ --paper-2:var(--warm); /* Der auffaelligste Schritt: `--paper-blue` war mit #F6F9FF eine KUEHLE, leicht blaue Flaeche (60 Fundstellen je Branchenseite). Die neue Fassung ist warm — deshalb zeigt der Name auf `--wash`. Genau das macht aus einer Bestandsseite optisch eine neue. */ --paper-blue:var(--wash); --ok:var(--green); /* Schrift: die Label-Rolle war auf modvio.de schon dieselbe Schrift, nur ueber Laufweite und Versalien unterschieden. */ --fm:var(--fs); /* Radien. Die neue Fassung deckelt bei 16px — `--r-lg` (alt 20px) laeuft deshalb bewusst auf denselben Wert wie `--r`, nicht auf einen groesseren. */ --r-sm:var(--r-s); --r:var(--r-l); --r-lg:var(--r-l); --r-pill:999px; /* Schatten. Nicht auf `none` gesetzt — die Branchenseiten tragen ihre Karten ueber 156 Schatten-Fundstellen, ohne sie fallen sie in sich zusammen. Die neue Fassung schattet weicher und aus der neuen Tinte (rgba(11,18,32,…) statt rgba(3,7,17,…)), weiter gestreut und staerker negativ gespreizt. `--sh-md` ist woertlich der Wert, den `landing-v4.css` an seinen Karten benutzt — damit sitzt eine portierte Karte auf derselben Hoehe wie eine neue. */ --sh-sm:0 1px 2px rgba(11,18,32,.04),0 6px 16px -10px rgba(11,18,32,.18); --sh-md:0 1px 2px rgba(11,18,32,.04),0 18px 44px -28px rgba(11,18,32,.22); --sh-lg:0 52px 96px -58px rgba(11,18,32,.72); } /* ============================================================================ Bruecke 2: die Ratgeber-/Docs-Konvention ============================================================================ Es gab DREI Namenskonventionen fuer dieselben Rollen, nicht zwei: Landing --blue --soft --grey --r-l --fs Bestandsseiten --indigo --text-soft --paper-2 --r --fm Ratgeber/Docs --accent --ink-soft --surface --radius --fd/--ft `ratgeber/style.css` und `docs/theme/docs.css` teilen sich die dritte (die Docs-README nennt sie ausdruecklich: „Die Variablen-NAMEN sind absichtlich unveraendert"). Wer sie hier einmal anschliesst, hat den Ratgeber UND die spaetere neue Doku erschlagen. ========================================================================= */ :root{ /* Akzent. `--accent-ink` ist die Schrift AUF der Akzentflaeche (weiss), nicht der Akzent als Text — die Rolle dafuer ist `--accent-strong`, und die zeigt bewusst auf den dunkleren Blauton: als Flaeche traegt #2F6BFF weissen Text nur knapp (4,5:1), als TEXT auf hellem Grund braucht es den dunkleren Wert. */ --accent:var(--blue); --accent-strong:var(--blue-deep); --accent-ink:#fff; --accent-soft:var(--blue-tint); --accent-glow:rgba(47,107,255,.16); /* Tinte und Flaechen */ --ink-soft:var(--text); --ink-faint:var(--faint); --line-strong:var(--line-2); --surface:var(--card); --surface-2:var(--grey); /* Schrift: im Ratgeber sind alle drei Rollen dieselbe Schrift, nur ueber Laufweite und Versalien unterschieden — wie in der neuen Fassung auch. */ --fd:var(--fs); --ft:var(--fs); /* Radien. `--radius-lg` stand auf 26px; die neue Fassung deckelt bei 16px, deshalb laeuft es wie `--r-lg` auf denselben Wert statt auf einen groesseren. */ --radius:var(--r-l); --radius-sm:var(--r-m); --radius-lg:var(--r-l); --radius-pill:999px; /* Schatten: dieselben drei Stufen wie oben, nur unter dem anderen Namen. */ --shadow-sm:var(--sh-sm); --shadow-md:var(--sh-md); --shadow-lg:var(--sh-lg); /* Lesebreite der Artikel. Bleibt ein eigenes Mass — `--mx` (Rahmen) kommt aus dem neuen Set und ist dort 1240px statt der bisherigen 1140px; die Textspalte soll davon unberuehrt bleiben, sonst laufen die Zeilen zu lang. */ --prose:min(720px,92vw); /* Signalfarben des Ratgebers: Bedeutungstraeger, keine CI-Flaechen — unveraendert. */ --warn:#E6B24E; --danger:#EF6A52; --info:#4F9BE0; }