/* SGV Design Tokens Adaptiert von Ventriloc (Refero Styles) auf DB-Markenkontext. Siehe docs/design-system.md */ :root { /* --- Flächen --- */ --color-canvas: #ffffff; /* Seitenhintergrund */ --color-ash: #f6f2ec; /* Sektionsband, Kartenfläche */ --color-fog: #faf7f2; /* verschachtelte Container */ --color-ivory: #ebe6dd; /* warmer Wash für Featured-Blöcke */ --color-navy: #111111; /* Ink-Band. Version 2 nutzt es als eine der drei Vollflaechen, siehe --band-ink. */ /* --- Vollflaechige Baender, Version 2 ----------------------------------- Der Wechsel ist Gliederung, nicht Dekoration: Rot fuer Menschen und Alltag, Ink fuer die harten Vergleiche, Weiss fuer die datengetriebenen Kapitel. Weiss auf DB Rot 100 liegt bei 4,59:1 und traegt damit Fliesstext. Harte Regel: auf roter Flaeche steht Text immer weiss, nie dunkel — dunkel auf Rot faellt mit 4,12:1 durch. */ /* --- Akzent: Signalorange ----------------------------------------------- Ersetzt DB Rot. Der Ton stammt aus dem eigenen Bildmaterial — die Warnwesten im Shooting tragen ihn. Siehe docs/konzept-v2.md. Wichtig, und anders als bei DB Rot: auf dem Akzentband steht der Text DUNKEL. Weiss erreicht auf diesem Orange nur 3,13:1 und ist damit ausgeschlossen; Dunkel kommt auf 5,93:1. Einen Leiseton gibt es auf dem Band nicht — zwischen Textdunkel und Orange bleibt kein Ton, der sich abhebt und 4,5:1 haelt. Zurueckhaltung laeuft dort ueber Groesse, nicht ueber Farbe. */ --akzent: #ee6a1e; --akzent-text: #12140f; /* 5,93:1 auf dem Band */ --akzent-flaeche: rgba(255,255,255,0.24); /* Karten -> #f28e54, Text 7,75:1 */ --akzent-linie: rgba(18,20,15,0.65); /* 3,44:1 gegen das Band */ --akzent-tief: #bd4400; /* kleiner Text auf hell, 5,26:1 */ --band-ink: #191510; --band-ink-text: #f4f2ef; /* 18,16:1 */ --band-ink-leise: #a7a29b; --band-ink-linie: rgba(255,255,255,0.18); /* --- Text --- */ --color-graphite: #202020; /* Primärtext, Headlines */ --color-steel: #4d4d4d; /* Fließtext */ --color-slate: #6b6b6b; /* Hilfstext, Fußnoten, Quellen Angepasst von #828282: das ergab auf Ash nur 3,34:1 und auf Weiß 3,84:1 und verfehlte damit die 4,5:1 aus docs/barrierefreiheit.md. Jetzt 4,63:1 auf Ash, 5,33:1 auf Weiß. */ --color-mist: #e6e1d9; /* Haarlinien, leicht warm wie die Ruheflaeche */ --color-on-dark: #ededf3; /* Text auf Navy */ /* Der Akzent steht weiter oben — Signalorange statt DB Rot. */ /* --- Chart-Rampe, absteigend nach Segmentgröße --- */ --chart-01: #202020; --chart-02: #2f2f2f; --chart-03: #3e3e3e; --chart-04: #4d4d4d; --chart-05: #5c5c5c; --chart-06: #6b6b6b; --chart-07: #7a7a7a; --chart-08: #949494; --chart-09: #b0b0b0; --chart-10: #cccccc; --chart-highlight: var(--akzent); /* --- Schrift --- */ /* Schrift aus dem Entwurf "SGV Scrollytelling Live": IBM Plex Sans fuer alles. Inter Tight bleibt als Rueckfall stehen, falls die Entscheidung noch einmal kippt. */ /* Version 2: Archivo traegt die Wucht, Plex die Substanz. Siehe docs/konzept-v2.md */ /* Der Entwurf setzt durchgehend Inter Tight fuer die Displaytypo — 82 von 82 Stellen. Mit Archivo sah jede Headline, jede Zahl und jede Kapitelziffer anders aus als in der Vorlage. Die Datei liegt schon im Projekt. */ --font-display: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif; --font-body: 'IBM Plex Sans', 'Inter', ui-sans-serif, system-ui, sans-serif; /* Mono fuer Labels, Quellen und alle Zahlen. Sie signalisiert Praezision und traegt die Tabellenziffern der Zaehler. */ --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Groesser, enger, durchgehend Weight 400. Die Hierarchie entsteht ueber Groesse und Tracking, nie ueber Schriftstaerke. */ /* Fliessend statt Sprung. Vorher standen 118 px bis hinunter zu 769 px Fensterbreite und darunter 46 px — dazwischen fuellte die Headline die ganze Buehne, vom Film blieb nichts uebrig. 8,2vw ergibt bei 1440 px genau die 118 px, sodass sich an breiten Schirmen nichts aendert. */ /* Die Riesenzahl im Zahlenband haengt an der Spaltenbreite, nicht am Fenster: oberhalb der Inhaltsbreite waechst die Spalte nicht mehr mit, vw aber schon — dann lief "131 Mrd." aus der Spalte. Gemessen, nicht geschaetzt: bei Inter Tight in Gewicht 900 misst die breiteste Ziffer 0,647em und " Mrd." 2,135em. Mit drei Ziffern- spalten zu 0,66em ergibt das 4,115 mal die Schriftgroesse; 23,3 Prozent der Spalte fuellen sie damit zu 96 Prozent. */ --riese: clamp(56px, 23.3cqw, 400px); --text-display: clamp(44px, 8.2vw, 118px); --leading-display: 0.88; --tracking-display: -0.03em; --text-heading-lg: 58px; --leading-heading-lg: 0.98; --tracking-heading-lg: -0.035em; --text-heading: 40px; --leading-heading: 1.06; --tracking-heading: -0.030em; --text-heading-sm: 24px; --leading-heading-sm: 1.20; --tracking-heading-sm: -0.48px; --text-subheading: 22px; --leading-subheading: 1.20; --tracking-subheading: -0.44px; --text-body: 16px; --leading-body: 1.50; --tracking-body: -0.16px; --text-caption: 14px; --leading-caption: 1.50; --tracking-caption: -0.14px; --text-kicker: 13px; --leading-kicker: 1.20; --tracking-kicker: 0.10em; --weight-regular: 400; --weight-medium: 500; /* Version 2 setzt auf Staerke. Display laeuft in 800, Laufbaender in 900. */ --weight-display: 800; --weight-laut: 900; /* --- Raster --- */ --page-max-width: 1200px; --section-gap: 80px; --chapter-gap: 140px; --card-padding: 40px; --element-gap: 20px; /* --- Radien --- */ --radius-button: 0px; /* Der Entwurf kennt keine Rundungen: Struktur entsteht ueber Linien, nicht ueber Kaesten. Ein Wert statt zwanzig Einzelregeln. */ --radius-card: 0; --radius-data-card: 0; --radius-feature: 6px 0 0 0; --radius-tag: 20px; /* --- Parallax-Faktoren, siehe docs/parallax-ebenen.md --- */ --parallax-bg: 0.25; --parallax-mid: 0.60; --parallax-content: 1.00; --parallax-fg: 1.20; } @media (prefers-reduced-motion: reduce) { :root { --parallax-bg: 1; --parallax-mid: 1; --parallax-content: 1; --parallax-fg: 1; } } /* Display-Größen auf kleinen Viewports */ @media (max-width: 768px) { :root { --text-heading-lg: 32px; --tracking-heading-lg: -0.90px; --text-heading: 28px; --tracking-heading: -0.70px; --text-subheading: 19px; --section-gap: 56px; --chapter-gap: 80px; --card-padding: 24px; } }