/* Upward Design-Tokens — Fassung vom 07.09.2026. ============================================================================ Diese Datei ersetzt die Token-Fassung vom 06.09.2026 (ADR 0022). Grund: Die Website wurde in Lovable fertig gestaltet und per Auftrag vom 07.09.2026 uebernommen, nicht nachgebaut. Die Werte hier sind die Werte aus dem Lovable-Projekt, unveraendert uebertragen — dieselben oklch-Koordinaten, dieselbe Schrift, dieselben Abstaende. Sie gelten fuer die Website UND fuer das Upward OS, Betreiber- wie Partner-Ansicht. Die alten Namen (--papier, --tinte, --akzent, --m1..--m9, ...) stehen weiter unten als Zuordnung. Damit uebernehmen Kit, Bewerbung, Cockpit und Partneransicht die neue Optik, ohne dass eine einzige Klasse umgeschrieben werden muss. VIER STELLEN WEICHEN BEWUSST VON LOVABLE AB. Jede ist gemessen, keine ist geschaetzt; die Rechnung steht in werkzeuge/kontrast.mjs und laeuft im Prueftor mit. Ohne sie faellt die Barrierefreiheitspruefung durch: Lovable hier Kontrast vorher -> nachher warum ink/45 (eyebrow) ink/62 3,04 -> 5,35 Kleintext braucht 4,5 ink/40, /50, /55 ink/62 2,6 .. 4,2 -> 5,35 mist/45, /50 mist/62 4,16 -> 6,8 auf der Tintenflaeche ink/15, /20 ink/48 1,38 -> 3,33 Rubrikziffern, Grosstext (auf mist-stark 3,25; ink/45 reichte dort mit 2,95 nicht -- von Lighthouse gefunden, nicht gerechnet: die Rubrik steht auf BEIDEN Flaechen) clay-blue/coral eigene Texttoene 2,90 -> 5,18 als Text, nicht als Flaeche Die Flaechen-, Objekt- und Rahmenfarben sind unangetastet: clay-blue, clay-coral und clay-yellow tragen Flaechen und Punkte exakt wie im Entwurf. ============================================================================ */ :root { /* Nur Hell. Der Entwurf hat keine dunkle Fassung, und eine erfundene waere keine Uebernahme mehr. */ color-scheme: light; /* --- Grundfarben, eins zu eins aus dem Lovable-Projekt ------------------ */ --mist: oklch(0.96 0.018 232); /* #E6F4FC */ --mist-strong: oklch(0.92 0.027 230); /* #D3E8F3 */ --ink: oklch(0.16 0.01 264); /* #0B0D12 */ --line: var(--ink); --clay-blue: oklch(0.58 0.18 255); /* #1779E1 */ --clay-coral: oklch(0.67 0.19 34); /* #F35E3D */ --clay-yellow: oklch(0.84 0.16 88); /* #F6C330 */ /* Nur fuer Text. Gleicher Ton, gleiche Buntheit, weniger Helligkeit — damit die Farbe erkennbar bleibt und der Kontrast traegt. */ --clay-blue-text: oklch(0.51 0.18 255); /* #0063C9, 5,19 auf mist */ --clay-coral-text: oklch(0.53 0.19 34); /* #C12C01, 5,18 auf mist */ /* --- Tinte in Stufen. Aus Transparenz derselben Tinte, keine Grauleiter. */ --ink-90: color-mix(in oklab, var(--ink) 90%, transparent); --ink-75: color-mix(in oklab, var(--ink) 75%, transparent); --ink-68: color-mix(in oklab, var(--ink) 68%, transparent); --ink-64: color-mix(in oklab, var(--ink) 64%, transparent); --ink-62: color-mix(in oklab, var(--ink) 62%, transparent); /* leiseste Textfarbe */ --ink-48: color-mix(in oklab, var(--ink) 48%, transparent); /* nur Grosstext */ --ink-20: color-mix(in oklab, var(--ink) 20%, transparent); /* nur Flaechen */ --mist-70: color-mix(in oklab, var(--mist) 70%, transparent); --mist-62: color-mix(in oklab, var(--mist) 62%, transparent); /* --- Linien. Im Entwurf immer die Tinte mit sehr wenig Deckkraft. */ --linie-10: color-mix(in oklab, var(--line) 10%, transparent); --linie-15: color-mix(in oklab, var(--line) 15%, transparent); --linie-18: color-mix(in oklab, var(--line) 18%, transparent); --linie-06: color-mix(in oklab, var(--line) 6%, transparent); /* --- Schrift. Manrope fuer Text, Sora fuer Titel und Zahlen. Selbst ausgeliefert (statisch/schrift.css), kein Aufruf an Google. */ --schrift-text: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --schrift-titel: "Sora", "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif; --schrift-zahl: var(--schrift-titel); /* --- Groessen. Die Anzeige ist gross und FETT, Zeile unter 1 — das ist der Kern der Optik; wer sie leichter setzt, hat ein anderes Design. */ --t-anzeige: clamp(2.75rem, 8vw, 8rem); --t-h1: clamp(2.25rem, 4.2vw, 4.25rem); --t-h2: clamp(2.25rem, 4.2vw, 4.25rem); --t-h3: 1.25rem; --t-gross: 1.125rem; --t-text: 1rem; --t-klein: 0.875rem; --t-mikro: 0.75rem; --t-augenmerk: 0.68rem; --zeile-anzeige: .88; --zeile-titel: .98; --lauf-augenmerk: .16em; --gewicht-anzeige: 800; /* --- Abstaende. Die Tailwind-Leiter des Entwurfs, in unseren Namen. */ --m1: 4px; --m2: 8px; --m3: 12px; --m4: 16px; --m5: 20px; --m6: 28px; --m7: 48px; --m8: 64px; --m9: 80px; --rand-seite: 1.25rem; /* px-5 */ --rand-seite-md: 2.5rem; /* md:px-10 */ --abschnitt: 5rem; /* py-20 */ --seitenbreite: 1440px; --textbreite: 40ch; --lesebreite: 34ch; --radius: .75rem; --radius-gross: 1rem; --radius-klein: .375rem; --pille: 9999px; --tippflaeche: 44px; --zeit-schnell: 120ms; --zeit: 180ms; --kurve: ease; --schatten-mechanisch: 0 24px 70px color-mix(in oklab, var(--ink) 18%, transparent); --schatten-objekt: 0 20px 25px -5px color-mix(in oklab, var(--ink) 10%, transparent), 0 8px 10px -6px color-mix(in oklab, var(--ink) 10%, transparent); --schatten: 0 1px 2px color-mix(in oklab, var(--ink) 4%, transparent), 0 8px 24px color-mix(in oklab, var(--ink) 6%, transparent); /* ------------------------------------------------------------------------ Zuordnung der alten Namen. Alles, was vor dem 07.09.2026 gebaut wurde — Kit, Bewerbung, Terminstrecke, Cockpit, Partneransicht, Vorschau-Seiten — spricht diese Namen an und bekommt damit ohne Umbau die neue Optik. ------------------------------------------------------------------------ */ --papier: var(--mist); --flaeche: var(--mist); --flaeche-2: var(--mist-strong); --tinte: var(--ink); --tinte-gedaempft: var(--ink-62); --tinte-leise: var(--ink-62); --linie: var(--linie-10); --linie-stark: var(--linie-18); --akzent: var(--clay-blue-text); --akzent-hell: var(--clay-blue); --akzent-leicht: var(--clay-blue); --akzent-flaeche: var(--mist-strong); --auf-akzent: var(--mist); --positiv: oklch(0.48 0.13 155); --warnung: var(--clay-coral-text); --schatten-boden: var(--schatten-objekt); --zeit-buehne: 700ms; --kurve-buehne: cubic-bezier(.16,.84,.28,1); --lauf-anzeige: 0; --zeile-text: 1.65; --buehne-hoehe: clamp(520px, 84svh, 900px); --buehne-abstand: var(--abschnitt); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } html { scroll-behavior: auto !important; } }