/* ============================================================================= SCHALLKISTE S:E — Design-Tokens ----------------------------------------------------------------------------- EINZIGE QUELLE DER WAHRHEIT für Farbe, Schrift, Raum und Form. Jede Seite bindet diese Datei ein und nutzt NUR var(--token) — keine eigenen Hex-Codes, keine eigenen rem-Werte pro Datei. AUFBAU IN ZWEI SCHICHTEN — das ist die wichtigste Regel: 1. RAMPE (--blau-900 … --gold-500) = die Werte. Nackte Farben, keine Bedeutung. 2. ROLLE (--grund, --flaeche, --linie, --akzent, --text …) = die Bedeutung. Nur ROLLEN werden in components.css benutzt. Dadurch ist Umfärben eine Änderung in Schicht 1, kein Suchen-und-Ersetzen. TRANSPARENZ: Nicht mehr über RGB-Kanäle, sondern über color-mix() — das funktioniert mit jeder Farbe, auch mit oklch(), und braucht keine Doppelpflege der Kanäle. color-mix(in oklab, var(--gold-500) 25%, transparent) Die alten --x-rgb-Kanäle stehen unten weiter als Aliase (siehe ALTLASTEN). Einbinden: ============================================================================= */ /* Schriften liegen lokal unter Design/fonts/ statt bei Google Fonts: so geht beim Seitenaufruf keine IP-Adresse an Google. Gleiche Dateien, gleiche Namen. */ @import url('fonts/fonts.css'); :root { /* =========================================================================== 1 · RAMPEN — die Werte. Hier und nur hier stehen Farben. =========================================================================== */ /* ---- Blau-Achse · IN OKLCH, Farbton fest auf 260,7° --------------------- Das LOGO-BLAU #1c1f24 ist oklch(0.2383 0.0106 260.7). Alle anderen Stufen halten diesen Farbton exakt; nur Helligkeit (L) und Buntheit (C) wandern. WARUM NICHT HEX: bei dieser niedrigen Buntheit liegen die drei Kanäle nur 4–11 von 255 auseinander. Der Farbton quantisiert dann in 5–10°-Sprüngen, am hellen Ende am stärksten — eine Hex-Rampe kann einen Farbton hier gar nicht stabil halten. Ein früherer Versuch in Hex streute 210–220°, und die hellste Stufe war mit C 0,003 praktisch neutrales Grau statt Markenblau. Genau diese Stufe speist --text-titel, also jede Überschrift. C-VERLAUF: mittlere Helligkeiten können mehr Buntheit tragen, ohne bunt zu wirken — daher der Bogen 0,010 → 0,030 → 0,012. Die hellen Stufen behalten bewusst Restbuntheit, damit Überschriften auf der Blau-Achse bleiben. */ --blau-900: oklch(0.200 0.010 260.7); /* tiefste Tinte: Text auf Gold, SVG-Konturen */ --blau-800: #1c1f24; /* LOGO-BLAU, exakter Hex — Seitenhintergrund */ --blau-700: oklch(0.283 0.014 260.7); /* eine Stufe heller: Flächen */ --blau-600: oklch(0.378 0.022 260.7); /* abgesetzte Flächen, kräftige Linien */ --blau-300: oklch(0.644 0.030 260.7); /* sekundärer Text */ --blau-200: oklch(0.831 0.018 260.7); /* Fließtext */ --blau-100: oklch(0.945 0.012 260.7); /* Display-Weiß — Überschriften */ --blau-000: #ffffff; /* Hervorhebung — nie als Fläche */ /* ---- Rot-Achse · aus dem LOGO-ROT #e00952 (Farbton 339,6°) -------------- In Hex, weil Rot bunt genug ist, dass die Kanalabstände den Farbton tragen: die vier Stufen streuen 338,9–341,2°, also 2,3° — praktisch nicht sichtbar. (Das Markenblau kann das nicht, siehe oben.) */ --rot-700: #6b1030; /* (L24%) tiefstes Rot: Balken-Segmente */ --rot-600: #a01a45; /* (L36%) mittleres Rot: Summen */ --rot-500: #e00952; /* (L46%) Marken-Rot — Akzent, aktiv, Warnung */ --rot-300: #ff5c8f; /* helle Variante: Text auf Rot-Tönung */ /* ---- Gold-Achse -------------------------------------------------------- */ --gold-500: #c7a363; /* Marken-Gold — Akzent, Linien, Veredelung */ --gold-300: #ddc79a; /* helles Gold: Text auf Gold-Tönung */ /* ---- Datenfarben · in oklch mit GLEICHEM L und C gesetzt, nur Hue variiert. Darum wirken sie als eine Familie und heben sich als „Daten“ von den gesättigten Markenfarben ab. Reihenfolge = Verwendungsreihenfolge. */ --daten-1: oklch(0.62 0.14 250); /* Blau */ --daten-2: oklch(0.62 0.14 150); /* Grün */ --daten-3: oklch(0.62 0.14 305); /* Violett */ /* Helle Geschwister (nur für Text auf getöntem Grund) */ --daten-1-hell: oklch(0.80 0.12 250); --daten-2-hell: oklch(0.80 0.12 150); --daten-3-hell: oklch(0.80 0.12 305); /* =========================================================================== 2 · ROLLEN — die Bedeutung. NUR diese in components.css benutzen. =========================================================================== */ /* ---- Flächen ----------------------------------------------------------- */ --grund: var(--blau-800); /* Seitenhintergrund */ --flaeche: var(--blau-700); /* Karten, Container */ --flaeche-hoch: var(--blau-600); /* abgesetzt, innerhalb einer Karte */ --tinte: var(--blau-900); /* dunkler Text auf hellem Akzent */ /* Band: der helle Träger, auf dem die Vollfarb-Fassung auch auf --grund sichtbar bleibt. Nicht deckend, damit der Grund darunter noch anwesend ist — das Band ist ein Einschnitt in die Fläche, kein aufgeklebtes Feld. */ --band: color-mix(in oklab, var(--blau-000) 92%, transparent); /* ---- Text · DREI Stufen, aufsteigend teuer ----------------------------- Die Reihenfolge ist die Hierarchie. Wer eine Stufe überspringt, kippt sie: wäre --text-stark an Überschriften vergeben, wäre ein fettes Wort im Absatz genauso hell wie der Titel darüber — und der Titel hätte nur noch Größe. Reines Weiß bleibt darum klein und punktuell: großflächig blüht es auf Dunkel aus und lässt dünne Serifen flimmern. */ --text: var(--blau-200); /* Fließtext — der Standard */ --text-titel: var(--blau-100); /* Überschriften, Display-Text */ --text-stark: var(--blau-000); /* punktuelle Hervorhebung, Werte */ --text-leise: var(--blau-300); /* Labels, Meta, Kleingedrucktes */ /* ---- Akzente ----------------------------------------------------------- */ --akzent: var(--gold-500); /* Gold: Linienton, Veredelung, Titelwort */ --akzent-warm: var(--rot-500); /* Rot: aktiv, Warnung, Doppelpunkt */ /* ---- Linien & Tönungen · aus Gold abgeleitet, darum ist jede Kante warm - */ --linie: color-mix(in oklab, var(--akzent) 25%, transparent); /* Rahmen, Trenner */ --linie-fein: color-mix(in oklab, var(--akzent) 14%, transparent); /* dezente Trenner */ --linie-hauch: color-mix(in oklab, var(--akzent) 4%, transparent); /* tr:hover */ --linie-fade: linear-gradient(to right, color-mix(in oklab, var(--akzent) 50%, transparent), transparent); /* ---- Status ------------------------------------------------------------ */ --gut: var(--daten-2); --gut-text: var(--daten-2-hell); --gut-tint: color-mix(in oklab, var(--daten-2) 18%, transparent); --schlecht: var(--akzent-warm); --schlecht-text: var(--rot-300); --schlecht-tint: color-mix(in oklab, var(--akzent-warm) 18%, transparent); --neutral-text: var(--akzent); --neutral-tint: var(--linie-fein); /* ---- Fokus · eigener Token, weil Fokus NIE dekorativ verhandelbar ist --- */ --fokus-farbe: var(--akzent); --fokus-breite: 2px; --fokus-abstand: 2px; /* ---- Verläufe ---------------------------------------------------------- */ --verlauf-merksatz: linear-gradient(135deg, color-mix(in oklab, var(--akzent-warm) 8%, transparent), color-mix(in oklab, var(--akzent) 4%, transparent)); /* Hintergrund-Glow: EIN Schalter statt Ein-/Auskommentieren. Anschalten = --glow: var(--glow-an); */ --glow-an: radial-gradient(ellipse 120% 80% at 15% -10%, color-mix(in oklab, var(--akzent) 6%, transparent), transparent 50%), radial-gradient(ellipse 100% 70% at 90% 110%, color-mix(in oklab, var(--akzent-warm) 5%, transparent), transparent 50%); --glow: none; /* =========================================================================== 3 · SCHRIFT =========================================================================== */ --schrift-display: 'Cinzel', serif; /* Marke, Überschriften, Kennzahlen — reine Versalschrift */ --schrift-mono: 'Space Mono', monospace; /* Text, Zahlen, UI */ --gewicht-display: 700; /* Space Mono hat NUR 400 und 700. Andere Werte fallen still auf 400 zurück. */ --gewicht-text: 400; --gewicht-fett: 700; /* ---- Größen-Skala · Untergrenze 0.75rem = 12px. Nichts darunter, nie. --- */ --text-mikro: 0.75rem; /* 12px · Labels, Kapitel-Nr, Fuß */ --text-klein: 0.8125rem; /* 13px · Meta, Legende, Hinweis */ --text-basis: 0.9375rem; /* 15px · UI, Tabellen */ --text-lead: clamp(0.9375rem, 2vw, 1.0625rem); --text-gross: clamp(1.1rem, 2.6vw, 1.4rem); /* Merksatz */ --text-titel-s: clamp(1.3rem, 3vw, 1.55rem); /* Baustein-Name, Karten-Zahl */ --text-titel-m: clamp(1.8rem, 4vw, 2.6rem); /* Kapitel */ --text-titel-l: clamp(2rem, 6vw, 3.4rem); /* Seitentitel */ --text-marke: clamp(2.2rem, 5vw, 3.6rem); /* Wortmarke */ /* ---- Sperrung (letter-spacing) ----------------------------------------- */ --sperr-eng: -0.02em; /* Display-Überschriften */ --sperr-marke: -0.11em; /* Wortmarke S:E */ --sperr-label: 0.18em; /* Labels, Tabellenköpfe */ --sperr-weit: 0.25em; /* Untertitel, Rubriken */ --sperr-auflsg: 0.4em; /* Auflösungszeile der Marke */ /* ---- Zeilenhöhe -------------------------------------------------------- */ --zeile-eng: 1.1; --zeile-titel: 1.25; --zeile-text: 1.6; --zeile-weit: 1.75; /* =========================================================================== 4 · RAUM — eine Skala, keine Ad-hoc-rem-Werte in components.css. =========================================================================== */ --raum-1: 0.25rem; --raum-2: 0.5rem; --raum-3: 0.75rem; --raum-4: 1rem; --raum-5: 1.5rem; --raum-6: 2rem; --raum-7: 3rem; --raum-8: 5rem; --seite-max: 1000px; --zeile-max: 68ch; /* Lesbare Zeilenlänge für Fließtext */ /* =========================================================================== 5 · FORM & BEWEGUNG =========================================================================== */ /* ---- Logo · Geometrie als Faktoren, nicht als feste Maße ---------------- Die Seite setzt nur --d (Kantenlänge des Logos); Schutzraum und Bandmaße rechnen sich per calc() daraus. Dadurch stimmen die Verhältnisse in jeder Größe, von der Visitenkarte bis zum Plakat. */ --logo-schutzraum: 0.25; /* freier Rand ringsum = Faktor × Kantenlänge */ --logo-band-breite: 1.5; /* Bandbreite = Faktor × Kantenlänge */ --logo-band-laenge: 2; /* Mindestlänge = Faktor × Bandbreite */ /* ---- Form --------------------------------------------------------------- */ --radius: 2px; --radius-gross: 3px; --uebergang: 0.2s ease; --treffer-min: 44px; /* Mindestgröße für Touch-Ziele */ /* =========================================================================== ALTLASTEN — Aliase für bestehende Seiten. Nicht mehr neu verwenden. Kann gelöscht werden, sobald alle Seiten auf die Rollen oben umgestellt sind. =========================================================================== */ --blau: var(--grund); --blau-tief: var(--tinte); --slate: var(--flaeche-hoch); --grau: var(--text-leise); --grau-hell: var(--text); --weiss: var(--text-stark); --rot: var(--akzent-warm); --rot-tief: var(--rot-700); --rot-mittel: var(--rot-600); --rot-hell: var(--rot-300); --gold: var(--akzent); --gold-hauch: var(--linie-hauch); --blaul: var(--daten-1); --gruen: var(--daten-2); --gruen-hell: var(--daten-2-hell); /* Alte RGB-Kanäle: nur noch für rgba(var(--x-rgb), a) in Altcode. */ --blau-rgb: 28,31,36; --gold-rgb: 199,163,99; --rot-rgb: 224,9,82; --gruen-rgb: 42,157,92; --blaul-rgb: 61,169,252; }