/* ============================================================ tokens.css — Wertebasis Quelle: WEblayou_Vorlage_1920.idml (07.09.2026) + typo-layout-system.md, Abschnitt „Die gesetzte Leiter" Regel: Alles hängt am Grundmaß. Kein Wert steht für sich. Wer hier etwas ändert, ändert die ganze Seite — so ist es gedacht. ============================================================ */ :root { /* ---- A · Das Grundmaß -------------------------------------- Bildschirmbreite / 120. Bei 1920 sind das 16. Geklammert: unter 960 und über 2400 wächst nichts mehr mit. Die untere Klammer ist ein Sicherheitsnetz — dort hat längst das Mobil-Layout übernommen. */ --u: clamp(8px, calc(100vw / 120), 20px); /* ---- B · Abstandsreihe — Viertelschritte, nie Achtel -------- */ --s-1: calc(var(--u) * 0.25); /* 4 */ --s-2: calc(var(--u) * 0.5); /* 8 */ --s-3: calc(var(--u) * 0.75); /* 12 */ --s-4: var(--u); /* 16 */ --s-5: calc(var(--u) * 1.25); /* 20 */ --s-6: calc(var(--u) * 1.5); /* 24 */ --s-7: calc(var(--u) * 2); /* 32 */ /* Abschnittssprünge — wenige, weit auseinander */ --gap-xs: calc(var(--u) * 4.5); /* 72 — Kopf zu Text innerhalb einer Fläche */ --gap-s: calc(var(--u) * 7.5); /* 120 */ --gap-m: calc(var(--u) * 15.625);/* 250 */ --gap-l: calc(var(--u) * 18.75); /* 300 */ /* ---- C · Das Raster ---------------------------------------- 6 Spalten, Spaltenabstand 40, Außenrand 30. Spaltenbreite bei 1920: (1860 − 200) / 6 = 276,67 */ --cols: 6; --gutter: calc(var(--u) * 2.5); /* 40 */ --margin: calc(var(--u) * 1.875); /* 30 */ /* ---- D · Schrift ------------------------------------------- */ --font: "proxima-nova", "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Ein Schnitt für alles: Proxima Nova Bold. So steht es im Dokument — Display setzt es, alle anderen Rollen erben es. Es gibt keine zweite Strichstärke auf dieser Seite. */ --fw: 700; /* ---- E · Die Größenleiter ---------------------------------- Vielfache des Grundmaßes. Werte bei 1920 in Klammern. */ --t-display: calc(var(--u) * 10); /* 160 */ --t-h1: calc(var(--u) * 3); /* 48 */ --t-h2: calc(var(--u) * 1.5); /* 24 */ --t-lead: calc(var(--u) * 1.25); /* 20 */ --t-text: var(--u); /* 16 */ --t-label: calc(var(--u) * 0.75); /* 12 */ --t-fakt: calc(var(--u) * 4.5); /* 72 — die Zahl im Kapitel (23.09.) */ /* ---- F · Zwei Regeln --------------------------------------- Je größer der Grad, desto enger Zeile und Laufweite. Zeilenabstand als Faktor — der Browser rechnet in Faktoren, das Layoutprogramm in absoluten Werten. */ --lh-display: 0.9; /* 160 → 144 */ --lh-h1: 0.9; /* 48 → 43 */ --lh-h2: 0.9; /* 24 → 22 */ --lh-lead: 1.0; /* 20 → 20 */ --lh-text: 1.125; /* 16 → 18 */ --lh-label: 1.1667; /* 12 → 14 */ --lh-fakt: 0.9; /* 72 → 65 */ /* Laufweite: InDesign misst in Tausendstel Geviert, CSS in em. Geteilt durch 1000. −10 wird zu −0,01 em. Achtung, die Formate erben in Kette: Display → H1 → H2 → Lead → Text → Label. Text und Label setzen keinen eigenen Wert, sie erben die +5 von Lead. Wer hier 0 einträgt, macht den Fließtext zu eng. */ --tr-display: -0.01em; --tr-h1: -0.005em; --tr-h2: 0em; --tr-lead: 0.005em; --tr-text: 0.005em; /* geerbt von Lead */ --tr-label: 0.005em; /* geerbt von Lead */ /* ---- G · Farbe --------------------------------------------- Sektionsfarben: die Fläche sagt, wo man ist. */ --c-ink: #1E1E1E; /* Anthrazit 30/30/30 — Text, Flächen, Schatten (V2, 24.09.; V1 #000000) */ --c-paper: #FFFFFF; /* Grund */ --c-archiv: #AAB9B4; /* Cases: Mint 170/185/180 (V2, 24.09.; V1 Orange #E69664) */ --c-haltung: #BFE5E5; /* Haltung, Platzhalter */ --c-active: #052846; /* aktiver Navi-Punkt */ --c-grey-nav: #E6E6E6; /* Navi-Leiste, Zeilen-Highlight */ --c-grey-flat: #EFEFEF; /* Fläche, Medien-Grund */ --c-line: #1E1E1E; /* Trennlinien, Anthrazit (V2) */ --c-media: #00FFFF; /* Bewegtbild-Platzhalter */ --c-agentic: #F386A1; /* Agentic AI: Rosa 243/134/161 (V2, 24.09.; V1 dunkel #1C1C1B) */ --c-rosa: #F386A1; /* 243/134/161 */ --c-mint: #AAB9B4; /* 170/185/180 */ --c-band: #E1E1E1; /* Markenband auf Schwarz, 225/225/225 (22.09.) */ /* Abgeleitete Töne — nicht einzeln gewählt */ --c-ink-20: rgba(30,30,30,0.2); --c-ink-30: rgba(30,30,30,0.3); --c-ink-40: rgba(30,30,30,0.4); /* ---- H · Bewegung ------------------------------------------ Eine Idee, überall gleich: Bewegung folgt dem Scrollen. Nichts bewegt sich von selbst, außer dem Markenband. */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 420ms; /* ---- Konstanten aus dem Layout ----------------------------- */ /* ---- Pixel-Trail im Hero (24.09.) -------------------------- Punktraster, Maus schwärzt Zellen. Abstand = Strichstärke Display, ein volles Quadrat füllt die Zelle ganz — Nachbarn schließen zur Fläche. Zeiten liest js/trail.js von hier. */ --trail-abstand: calc(var(--t-display) * 0.125); /* 20 bei 1920 = Strichstärke der Display (Stamm 20, Querstrich 19 gemessen) */ --trail-dot: 2px; --trail-rand: calc(var(--u) * 0.375); /* 6 — Mindestluft Text → Boxkante */ --trail-dauer: 850; /* ms, Standzeit gesamt */ --trail-aufbau: 80; /* ms, 0 → 100 % */ --trail-abbau: 90; /* ms, 100 → 0 % */ --nav-h: calc(var(--u) * 4.625); /* 74 */ --footer-h: calc(var(--u) * 17.5); /* 281 */ /* Randabstand nach unten — Footer, Markenband, Hero-Fußzeile. Bei 1920 sind das 40. */ --edge: calc(var(--u) * 2.5); /* 40 */ /* Die Displayzeilen sitzen optisch etwas hoch, damit die Unterlängen im beschnittenen Band nicht abreißen. */ --row-lift: 0.055em; } /* Bewegung ist ein Angebot, keine Bedingung. */ @media (prefers-reduced-motion: reduce) { :root { --dur: 1ms; } }