/* Die alten Token-Namen, mit den Werten des neuen Designsystems. * * WOZU. Die 26 Unterseiten sind gegen `css/tokens.css` gebaut — 93 * Variablen, die Farbe, Schrift, Radius, Abstand und Schatten der alten * Fassung tragen. `css/styles.css`, `landing.css` und `premium.css` * (165 KB Regeln) lesen ausschliesslich diese Variablen. Wer die Seiten auf * das neue System heben will, hat zwei Wege: * * 1. 165 KB Regeln neu schreiben und jedes Markup anfassen. * 2. Die 93 Variablen umbelegen. * * Der zweite Weg ist nicht der bequemere, sondern der ueberpruefbare: Er * aendert an keiner Regel etwas, nur an den Werten, die sie einsetzen. Was * dabei anders aussieht, ist genau das, was anders aussehen SOLL — Farbe, * Schrift, Rundung —, und nicht ein Layout, das beim Umschreiben verrutscht * ist. * * WAS HIER NICHT STEHT. 14 der alten Namen gibt es im neuen System auch * (--accent, --surface-card, --surface-page, --text-primary, * --text-secondary, --text-muted, --border-focus, --border-strong, * --shadow-sm, --radius-card, --radius-control, --radius-pill, --dur-fast, * --focus-ring). Fuer die steht hier bewusst nichts: Sie kommen aus der * Palette, und eine zweite Festlegung waere genau die doppelte Wahrheit, * die Befund G1 beanstandet. * * DIE SCHRIFTEN. --font-ui hiess Onest, --font-display Sora, --font-serif * Instrument Serif, --font-mono JetBrains Mono. Alle vier zeigen jetzt auf * Montserrat bzw. Roboto Mono. Damit faellt `assets/fonts/fonts.css` weg — * und mit ihr 22 Schriftschnitte, die niemand mehr braucht. * * Reihenfolge: NACH tokens/ und Palette laden, VOR styles/landing/premium. */ :root { /* ---- Flaechen ---- Alt war --bg ein blassgruenes #EDF4F3 und --surface reines Weiss. Das neue System dreht das Verhaeltnis um: die Seite ist weiss, die Abhebung entsteht durch --surface-muted. */ --bg: var(--surface-page); --surface: var(--surface-card); --surface-2: var(--surface-muted); --surface-3: var(--surface-sunken); --surface-raised: var(--surface-card); --panel: var(--surface-card); /* ---- Linien ---- */ --border: var(--border-default); --border-soft: var(--border-subtle); --border-hairline: var(--border-subtle); /* ---- Akzent ---- Das alte Tuerkis #0B6E68 weicht dem Gruen der Palette. --primary-bright trug in premium.css Leuchten und Verlaeufe hinter Inhalt und braucht deshalb den helleren Wert, nicht den Textwert. */ --primary: var(--accent); --primary-hover: var(--accent-hover); --primary-active: var(--accent-active); --primary-bright: var(--color-primary-400); --primary-glow: rgba(16, 185, 129, 0.22); --primary-tint: rgba(16, 185, 129, 0.10); --primary-tint-2: rgba(16, 185, 129, 0.05); --glow-fade: rgba(16, 185, 129, 0); --on-primary: var(--text-on-accent); --brand-teal: var(--accent); --brand-teal-hover: var(--accent-hover); --brand-teal-soft: var(--primary-tint); /* Der Farbbogen der alten Hero-Zeile. Er steht nur noch auf Unterseiten; die drei Stufen kommen jetzt aus der Primaerreihe. */ --accent-1: var(--color-primary-500); --accent-2: var(--color-primary-600); --accent-3: var(--color-primary-800); /* Koernung: im neuen System gibt es keine. Auf 0, damit die Regeln in premium.css stehen bleiben koennen und nichts zeichnen. */ --noise-opacity: 0; /* ---- Schrift ---- */ --text: var(--text-heading); --text-tertiary: var(--text-subtle); --text-faint: var(--text-subtle); --muted: var(--text-muted); --font-ui: var(--font-core); --font-display: var(--font-core); --font-serif: var(--font-core); /* Die alte Groessenleiter auf die neue abgebildet. Die neue Leiter ist eine Terzreihe (61/49/39/31/25/20/16/13 px); die alten Namen bekommen die naechstliegende Stufe, damit keine Zwischengroesse entsteht, die es im System nicht gibt. */ --fs-xs: var(--fs-body-m); --fs-sm: var(--fs-body-m); --fs-base: var(--fs-body-l); --fs-md: var(--fs-body-l); --fs-lg: var(--fs-body-xl); --fs-xl: var(--fs-h4); --fs-2xl: var(--fs-h3); /* ---- Radien ---- */ --r-sm: var(--radius-sm); --r-btn: var(--radius-control); --r-input: var(--radius-control); --r-md: var(--radius-md); --r-card: var(--radius-card); --r-pill: var(--radius-pill); /* ---- Abstaende ---- Das alte 4er-Raster bleibt, weil das neue System keine Abstandsvariablen mitbringt (nur ein Spaltenraster). Diese Werte sind also KEINE Altlast, sondern der Teil des alten Systems, den das neue gar nicht abloest. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-20: 80px; --rhythm-tight: 8px; --container: 1480px; /* die Breite, mit der die neue Kopfleiste rechnet */ /* ---- Bewegung ---- */ --dur: var(--dur-base); --ease: var(--ease-standard); /* ---- Schatten ---- */ --shadow-tint: rgba(10, 15, 28, 0.16); --shadow-hairline: var(--shadow-xs); --shadow-card: var(--shadow-md); --shadow-elevated: var(--shadow-lg); --shadow-sticky: var(--shadow-md); --shadow-btn: var(--shadow-sm); --ring: var(--focus-ring); --scrim: var(--surface-scrim); /* ---- Zustaende ---- Die Palette fuehrt Erfolg und Warnung bewusst in der Primaerreihe statt in Ampelfarben; --state-* zeigt darauf, damit auf den Unterseiten keine zweite Zustandsfarbe entsteht. */ --online: var(--status-success); --state-ok: var(--status-success); --state-live: var(--status-success); --state-idle: var(--text-muted); --state-warn: var(--status-warning); --state-error: var(--status-danger); --meter-fill: var(--accent); --meter-track: var(--surface-sunken); --meter-warn: var(--status-warning); /* Haken und Kreuz der Vergleichstabelle. Woertlich aus tokens.css uebernommen: Es sind Bilddaten, keine Gestaltungsentscheidung, und die Farbe steckt in der SVG-Quelle. */ --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); --icon-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }