/* ============================================================ LUMYN [Platzhalter] — Design Tokens Zentrale Stellschraube für die gesamte Seite. Farbe/Typo/Abstand hier ändern => wirkt überall. Wird im Theme als /assets/css/tokens.css eingebunden. Dark Mode über [data-theme="dark"] am . BREITEN — zwei Tokens, zwei klar getrennte Aufgaben: --container Seitenbreite. Das ist die eine Kante, an der ALLES ausgerichtet ist: Header, jeder Abschnitt, jedes Raster, Footer. Wer die Seite breiter oder schmaler haben will, ändert genau diese Zeile — danach springt keine Kante mehr, weil kein Baustein mehr eine eigene Pixelbreite mitbringt. --measure Lesebreite. Obergrenze für Fließtext (Artikeltext, Hero-Lead, Rechtstexte, zentrierte Absätze unter Überschriften). Fließtext darf NICHT auf Seitenbreite aufgezogen werden: Ab etwa 80 Zeichen je Zeile findet das Auge den Zeilenanfang nicht mehr zuverlässig. Deshalb 72ch als eigentliches Maß (wächst und schrumpft mit der Schriftgröße des Elements) und 780px als harter Deckel für sehr große Schriften. Nicht über Tokens laufen Komponentenbreiten (Karte, Formularfeld, Dialog, Bild, Tabelle): Die richten sich nach ihrem Inhalt, nicht nach der Seite, und bleiben bewusst als Einzelwert stehen. ============================================================ */ :root { /* --- Markenfarben (modus-unabhängig) --- */ --brand-1: #4F46E5; /* Indigo */ /* #7C5CFF war um Haaresbreite zu hell: Weißer Text auf dem hellen Ende des Verlaufs kam auf 4,35:1 und riss damit die WCAG-AA-Schwelle von 4,5:1 — ausgerechnet auf dem wichtigsten Knopf der Website. #7556F0 ist derselbe Ton, nur sechs Prozent dunkler (4,83:1). Der Unterschied ist mit bloßem Auge nicht zu sehen, die Prüfung besteht er. */ --brand-2: #7556F0; /* Violett */ --brand-3: #22D3EE; /* Cyan-Highlight (zweiter Akzent) */ --brand-grad: linear-gradient(120deg, var(--brand-1), var(--brand-2)); --brand-grad-soft: linear-gradient(120deg, rgba(59,130,246,.14), rgba(124,92,255,.14)); /* --- Farben Hell (Standard) --- */ --bg: #F6F8FC; --bg-2: #EEF2F9; --surface: #FFFFFF; --surface-2: #F1F5FC; --ink: #0B1020; /* Überschriften/Text */ --ink-2: #33405C; /* Fließtext */ --muted: #5B657A; /* sekundär */ --line: #E3E9F3; /* Rahmen/Trennlinien */ --ring: rgba(59,130,246,.45); /* Fokusring */ --shadow-sm: 0 1px 2px rgba(11,16,32,.06), 0 1px 1px rgba(11,16,32,.04); --shadow: 0 10px 30px -12px rgba(23,34,73,.22); --shadow-lg: 0 30px 60px -20px rgba(23,34,73,.30); --glow: 0 0 0 1px rgba(124,92,255,.18), 0 12px 40px -12px rgba(124,92,255,.45); --cta-fg: #FFFFFF; /* --- Typografie --- */ --font-head: "Space Grotesk", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --step--1: clamp(.82rem, .78rem + .2vw, .9rem); --step-0: clamp(1rem, .96rem + .25vw, 1.075rem); --step-1: clamp(1.2rem, 1.1rem + .5vw, 1.4rem); --step-2: clamp(1.5rem, 1.3rem + 1vw, 1.95rem); --step-3: clamp(1.95rem, 1.6rem + 1.8vw, 2.75rem); --step-4: clamp(2.5rem, 1.9rem + 3vw, 4rem); --step-5: clamp(3rem, 2.1rem + 4.4vw, 5.25rem); /* --- Raster/Abstände --- */ /* Seitenbreite (siehe Kopfkommentar): gilt für Header, Inhalt und Footer. */ --container: 1500px; /* Lesebreite (siehe Kopfkommentar): min() nimmt automatisch den kleineren der beiden Werte — bei kleiner Schrift greift 72ch, bei großer die 780px. */ --measure: min(780px, 72ch); /* Seitenrand. Die Obergrenze lag bei 2rem; bei genau 1500px Fensterbreite ist der Container so breit wie das Fenster und der Inhalt klebte mit nur 32px an der Kante. Bis ~1190px Fensterbreite rechnet die Formel exakt wie vorher (0.6rem + 2vw liegt dort noch unter 2rem), darüber wächst der Rand weiter mit — kleine Geräte bleiben also unverändert. */ --gutter: clamp(1.15rem, .6rem + 2vw, 3.5rem); --space-1: .5rem; --space-2: .875rem; --space-3: 1.25rem; --space-4: 2rem; --space-5: 3rem; --space-6: 4.5rem; --space-7: 7rem; /* --- Radien --- */ --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; /* --- Bewegung --- */ --dur-1: .18s; --dur-2: .42s; --dur-3: .8s; --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); } /* --- Farben Dunkel (gleichwertig, nicht bloß invertiert) --- */ [data-theme="dark"] { --bg: #0A0E1A; --bg-2: #0E1424; --surface: #10172A; --surface-2: #161F38; --ink: #EEF2FB; --ink-2: #C4CEE4; --muted: #93A0BE; --line: #212B47; --ring: rgba(124,92,255,.55); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 18px 40px -18px rgba(0,0,0,.7); --shadow-lg: 0 40px 80px -24px rgba(0,0,0,.75); --glow: 0 0 0 1px rgba(124,92,255,.35), 0 16px 50px -14px rgba(124,92,255,.5); --brand-1: #7C87FF; --brand-2: #9B7CFF; --brand-grad-soft: linear-gradient(120deg, rgba(91,155,255,.16), rgba(155,124,255,.16)); }