/* * SONTHEIMER – Design-Tokens (zentrale Quelle aller Designwerte) * Grundlage: 01_Design/designsystem.md (Figma-Originalwerte, Referenzbreite 1920 px). * * Maßstab (designsystem.md, Abschnitt 12): * --u = 1 Design-Pixel. Ab 1440 px Fensterbreite = 0,75 px (Faktor 0,75), * darunter proportional zur Fensterbreite (100vw / 1920). * Alle Größen werden als „Design-px × --u“ angegeben, Mindestwerte sichern die Lesbarkeit mobil. * * Farben, Schriftgrößen, Abstände NUR hier ändern – sie wirken auf alle Seiten. * theme.json enthält dieselben Farbwerte für die Editor-Palette (bitte synchron halten). */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/roboto-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/roboto-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ---------- Maßstab ---------- */ --u: min(calc(100vw / 1920), 0.75px); /* ---------- Farben (Figma) ---------- */ --s-dark: #161616; --s-dark-raised: #1c1c1c; --s-dark-box: #393939; --s-gold: #af9268; /* Original-Gold: auf dunklem Grund, Dekor, Logo-H */ --s-gold-text: #a48457; /* Gold-Schrift auf hellem Grund (WCAG 3:1, große Schrift) */ --s-gold-button: #ae9065; /* Buttonfläche (Weiß darauf 3:1, große Schrift) */ --s-sand: #f2eee8; --s-white: #ffffff; --s-offwhite: #fafafa; --s-white-75: rgba(255, 255, 255, 0.75); /* zurückgenommene Hinweise auf Dunkel (Pflichtfeld, Formularhinweis) – Kontrast ≈ 11 : 1 */ --s-feld-flaeche: rgba(255, 255, 255, 0.12); /* Formularfeld auf Dunkel (nur Hintergrund transparent; wirkt wie #323232) */ --s-feld-kontur: rgba(255, 255, 255, 0.5); /* feine Feldkontur, ≈ 5 : 1 zum Seitengrund (WCAG 1.4.11) */ --s-feld-autofill: #323232; /* deckende Entsprechung der Feldfläche für Browser-Autofill */ --dauer-hover: 250ms; /* Farbwechsel von Text-Links (wie CTA) */ /* Links (websiteweit, designsystem.md 19): keine Unterstreichung; Hover/Fokus/aktiv in Gold – je nach Untergrund */ --s-link-hover: var(--s-gold); /* auf Dunkel: #af9268 (≈ 6 : 1 auf #161616) */ --s-link-hover-hell: #7d6239; /* auf Hell: gleiches Gold, abgedunkelt (≈ 5,7 : 1 auf Weiß, ≈ 4,9 : 1 auf Sand) */ --s-post-hover: #856743; /* Aktuelles-Headline bei Hover/Fokus: dunkleres, gedecktes Gold (≈ 5,2 : 1 auf Weiß), Vorgabe 04.10.2026 */ --s-black: #000000; --s-linie-hell: rgba(0, 0, 0, 0.16); /* feine Trennlinie auf Weiß (helles Q&A, 12.10.2026) – Gegenstück zu --s-offwhite auf Dunkel */ --s-overlay-25: rgba(7, 23, 44, 0.25); /* #07172c, 25 % – je Bild laut Figma */ --s-overlay-4375: rgba(7, 23, 44, 0.4375); /* zwei Figma-Ebenen à 25 % (Stadtpanorama) */ --s-focus-dark: var(--s-gold); --s-focus-light: var(--s-dark); /* ---------- Schrift ---------- */ --s-font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; /* Schriftschnitte nach Rollen (Typografie D, freigegeben 03.10.2026) – Wortmarke und Fließtext Light */ --w-h1: 300; /* H1 und große Seitenheadlines */ --w-rubrik: 300; /* goldene Rubriküberschriften */ --w-headline: 700; /* Headlines innerhalb der Rubriken */ --w-statement: 700; /* Statements und Bildtypografie */ --w-lead: 700; /* Leads / fette Einleitungstexte */ --w-lead-rest: 300; /* Lead mit Hervorhebung: Text nach dem hervorgehobenen ersten Satz (Profil) */ --w-strong: 700; /* Hervorhebungen */ /* Schriftgrößen: max(Mindestwert, Design-px × Maßstab) */ --fs-wordmark: max(26px, calc(125 * var(--u))); --fs-wordmark-sub: max(12.5px, calc(60 * var(--u))); --fs-wordmark-gross: max(30px, calc(150 * var(--u))); /* Wortmarke „groß“ (nur Profil und Kontakt, 08.10.2026): +20 %, 112,5 px bei 1440 */ --fs-wordmark-gross-sub: calc(var(--fs-wordmark-gross) * 0.48); --fs-display: max(26px, calc(85 * var(--u))); --fs-quote-lg: max(28px, calc(65 * var(--u))); --fs-eyebrow: max(24px, calc(50 * var(--u))); --fs-eyebrow-sm: max(20px, calc(40 * var(--u))); --fs-lead: max(20px, calc(40 * var(--u))); --fs-lead-text: max(19px, calc(32.6667 * var(--u))); /* Lead: 24,5 px bei 1440 · Tablet 20 · Smartphone 19 */ --fs-body-lg: max(18px, calc(29.3333 * var(--u))); /* Fließtext: 22 px bei 1440 · Tablet 18 · Smartphone 17 */ --fs-body-md: max(16px, calc(25.3333 * var(--u))); /* Karten/Listen: 19 px bei 1440 · Tablet 17 · Smartphone 16 */ --fs-contact: max(19px, calc(34 * var(--u))); /* Rolle Kontaktangaben (Kontaktseite): 25,5 px bei 1440 · Tablet 19 · Smartphone 17 (vorher 30/20/18, Finetuning 03.10.) */ --fs-eingabe: 18px; /* Eingabetext in Formularfeldern: 18 px · Tablet 17 · Smartphone 16 (kein iOS-Zoom) */ --fs-body-sm: max(16px, calc(25 * var(--u))); --fs-nav: max(16px, calc(25 * var(--u))); --fs-button: 18.75px; /* 25 × 0,75 – zugleich WCAG „große Schrift“ (SemiBold ≥ 18,7 px) */ --fs-meta: max(14px, calc(20 * var(--u))); --fs-footer: max(14px, calc(20 * var(--u))); --fs-legal: 14px; /* 18 × 0,75 = 13,5 → Mindestwert 14 */ --fs-quote-img: max(26px, calc(54 * var(--u))); /* Rolle Bildzitat: 40,5 px bei 1440 */ --fs-quote-by: max(14px, calc(20 * var(--u))); /* Quellenangabe Bildzitat: 15 px Light */ /* Zeilenhöhen (Figma, als Verhältnis) */ --lh-wordmark: 0.64; /* 80 / 125 */ --lh-wordmark-sub: 1.6667; /* 100 / 60 */ --lh-display: 1.6471; /* 140 / 85 */ --lh-eyebrow: 1.6; /* 80 / 50 */ --lh-lead: 1.5; /* 60 / 40 (Headlines in Rubriken) */ --lh-lead-text: 1.5; /* Lead */ --lh-body-lg: 1.7; /* Fließtext */ --lh-contact: 1.75; /* Kontaktangaben */ --lh-eingabe: 1.5; /* Eingabetext */ --lh-card-title: 1.25; /* 50 / 40 */ --lh-body-md: 1.65; /* Karten/Listen */ --lh-body-sm: 2; /* 50 / 25 */ --lh-nav: 1.92; /* 48 / 25 */ --lh-footer: 1.5; /* 30 / 20 */ --lh-hint: 1.6; /* Hinweis/Fußnote unter dem Formular */ --lh-legal: 2.2222; /* 40 / 18 */ --lh-quote-img: 1.42; /* Bildzitat: luftiger */ /* Laufweiten (Figma) */ --ls-body: 0.05em; /* Figma 5 % */ --ls-body-lg: 0.02em; /* Fließtext (Typografie D) */ --ls-contact: 0.05em; /* Kontaktangaben */ --ls-eyebrow: 0.2em; --ls-eyebrow-wide: 0.4em; --ls-nav: 0.25em; --ls-wordmark: 0.28em; /* 35 px / 125 */ --ls-wordmark-sub: 0.4167em; /* 25 px / 60 */ --ls-display: 0.2em; --ls-display-values: 0.4118em;/* 35 px / 85 */ --ls-quote-img: 0.02em; /* Bildzitat */ --ls-quote-by: 0.06em; /* Quellenangabe Bildzitat */ /* ---------- Layout ---------- */ --container: min(calc(1640 * var(--u)), calc(100% - 40px)); --grid-gap: max(16px, calc(32 * var(--u))); --col-6-start: calc(697 * var(--u)); /* Beginn rechte Textspalte (Rasterspalte 6) */ --header-h: max(72px, calc(236 * var(--u))); /* ---------- Vertikaler Rhythmus (Feinabstimmung 03.10.2026, designsystem.md 16) ---------- Werte = sichtbare Abstände in Design-px (× 0,75 bei 1440). Die Trim-Werte gleichen die Zeilenhöhe (Abstand Zeilenbox ↔ Schrift) aus, damit gleiche Token auch optisch gleich wirken. */ --sp-rhythm: max(64px, calc(240 * var(--u))); /* S: Sektionsrand ↔ Inhalt, Bild ↔ Text, Headerbild → Inhalt (180 px) */ --sp-opening: max(80px, calc(320 * var(--u))); /* Seitenöffnung: Headerbild → erster Inhalt (240 px), ruhiger als S */ --sp-teil: max(48px, calc(160 * var(--u))); /* Teilabschnitt innerhalb einer Sektion (120 px) */ --sp-title: max(28px, calc(90 * var(--u))); /* T: Rubriktitel → Inhalt (sichtbar ca. 90 px) */ --sp-group: max(12px, calc(30 * var(--u))); /* zusammengehörige Titel, z. B. „DIALOG“ → Headline */ --trim-eyebrow: calc(17 * var(--u)); /* Zeilenbox über goldenen Rubriken */ --trim-display: calc(25 * var(--u)); /* Zeilenbox über „JULIA SONTHEIMER“ */ --trim-text: calc(17 * var(--u)); /* Zeilenbox unter Fließtext */ --sp-section-top: calc(var(--sp-rhythm) - var(--trim-eyebrow)); --sp-section-bottom: var(--sp-rhythm); /* Sektion endet mit Button, Karten, Linien */ --sp-after-text: calc(var(--sp-rhythm) - var(--trim-text)); /* Sektion endet mit Text */ --sp-eyebrow: var(--sp-title); --sp-paragraph: max(16px, calc(50 * var(--u))); /* Absatzabstand = eine Fließtextzeile */ --sp-block: max(40px, calc(105 * var(--u))); /* größere Einheiten innerhalb einer Sektion (ca. 80 px) */ --sp-button: max(32px, calc(90 * var(--u))); /* Inhalt → Button (sichtbar ca. 80 px) */ --sp-quote-by: max(12px, calc(32 * var(--u))); /* Bildzitat → Quellenangabe (24 px) */ --sp-card-x: max(24px, calc(64 * var(--u))); /* Karten: Innenabstand seitlich (48 px) */ --sp-card-top: max(24px, calc(60 * var(--u))); /* Karten: oben (45 px) */ --sp-card-gap: max(16px, calc(64 * var(--u))); /* Abstand zwischen Karten (48 px) */ --sp-card-bottom: max(28px, calc(68 * var(--u))); /* Karten: unten (51 px) */ --sp-card-title: max(12px, calc(24 * var(--u))); /* Kartentitel → Inhalt */ --sp-card-paragraph: max(12px, calc(42 * var(--u))); /* Absatz in Karten = eine Kartenzeile */ /* ---------- Komponenten ---------- */ --button-h: max(44px, calc(62 * var(--u))); --button-px: max(20px, calc(29 * var(--u))); --hero-h: calc(1082 * var(--u) * 1); --image-band-h: calc(1082 * var(--u)); --footer-h: max(320px, calc(524 * var(--u))); --col-right-max: calc(894 * var(--u)); /* rechte Textspalte endet im Design bei x ≈ 1745 */ --measure-text: max(calc(1320 * var(--u)), 40rem); /* vollbreiter Fließtext: ca. 85 Zeichen (990 px bei 1440) */ --measure-lead: max(calc(1320 * var(--u)), 40rem); /* Leads */ --measure-vita: none; /* Vita zweispaltig über die Containerbreite */ /* Beitragsvorlage (designsystem.md 22): Lesespalte und Überschriften der Blogartikel */ --measure-beitrag: 40em; /* ca. 75 Zeichen je Zeile (880 px bei 1440) */ --fs-beitrag-h2: var(--fs-lead-text); /* 24,5 px bei 1440 · Tablet 20 · Smartphone 19 */ --fs-beitrag-h3: var(--fs-body-lg); /* 22 px · 18 · 17 */ --sp-beitrag-absatz: 1em; /* Absatzabstand im Artikel: eine Schriftgröße */ --sp-beitrag-abschnitt: max(36px, calc(84 * var(--u))); /* vor H2: 63 px bei 1440 */ } /* Tablet (768–1023 px): eigene Lesestufe */ @media (min-width: 768px) and (max-width: 1023px) { :root { --fs-eingabe: 17px; --fs-lead-text: 20px; --fs-body-md: 17px; } } /* Smartphone (< 768 px) */ @media (max-width: 767px) { :root { --fs-wordmark: min(9.2vw, 40px); /* Hero-Wortlogo mobil: „SONTHEIMER“ ca. 80 % der Breite (05.10.2026), max. 40 px */ --fs-wordmark-sub: calc(var(--fs-wordmark) * 0.48); /* Seitenverhältnis wie Desktop (60 / 125) */ --fs-wordmark-gross: min(10.1vw, 44px); /* Wortmarke „groß“ mobil: ca. 88 % der Breite */ --fs-eingabe: 16px; --fs-body-lg: 17px; --fs-contact: 17px; } }