/* ========================================================================== Mind on the Moon – Design Tokens -------------------------------------------------------------------------- Alle Werte stammen aus dem InDesign-Entwurf 260811_motm_web.pdf. Der Entwurf ist auf 1280 pt angelegt, 1 pt entspricht 1 px im Browser. Fluide Werte interpolieren zwischen 390 px (Mobile-Mockup) und 1280 px. Feste Maße stehen in rem (Root 16 px): rem-Wert = pt-Maß aus dem PDF ÷ 16. So skaliert das Layout mit der Schriftgröße der Nutzer. ========================================================================== */ :root { /* --- Farben ------------------------------------------------------------- Die vier Swatches sind HSB-Werte aus InDesign, hier als sRGB. Die hellen Flächen im Entwurf sind Tonwerte (Tints) dieser Swatches – nicht eigene Farben. Prozentwerte aus dem PDF zurückgerechnet. TODO: Tint-Prozente von Axel bestätigen lassen. ---------------------------------------------------------------------- */ --swatch-green: #4c635d; /* hsb(165, 24%, 39%) */ --swatch-sand: #dbcf9a; /* hsb( 49, 30%, 86%) */ --swatch-blush: #d4947f; /* hsb( 15, 40%, 83%) */ --swatch-ink: #403734; /* hsb( 15, 19%, 25%) */ /* Flächen */ --surface-page: color-mix(in srgb, var(--swatch-sand) 20%, #fff); /* #f8f6eb */ --surface-sand: color-mix(in srgb, var(--swatch-sand) 50%, #fff); /* #ede8cd */ --surface-blush: color-mix(in srgb, var(--swatch-blush) 40%, #fff); /* #edd5ca */ --surface-green: var(--swatch-green); --clr-white: white; --clr-black: black; /* Text */ --text-default: var(--swatch-ink); --text-invers: var(--surface-page); --text-muted: color-mix(in srgb, var(--swatch-ink) 65%, var(--surface-page)); /* Linien – FAQ-Trenner, Formular-Unterstriche TODO: im Entwurf nicht spezifiziert, hier als Deckkraft des Texttons. */ --line-default: color-mix(in srgb, var(--swatch-ink) 35%, transparent); --line-invers: color-mix(in srgb, var(--surface-page) 45%, transparent); /* Fokus – im Entwurf nicht vorhanden, für Barrierefreiheit erforderlich */ --focus-ring: var(--swatch-green); /* --- Typografie --------------------------------------------------------- Maximalwerte = Messwerte bei 1280 px. Minimalwerte = Mobile-Mockup (390 px), Fließtext auf 16 px angehoben. ---------------------------------------------------------------------- */ --font-serif: "SangBleu Sunrise", "Iowan Old Style", "Palatino", Georgia, serif; /* Optische Größen der Schrift – Zuordnung siehe fonts.css S bis 20 px · M 20–35 px · XL ab 35 px */ --fs-hero: clamp(2.925rem, 2.5956rem + 1.351vw, 3.6763rem); /* H1, CTA-Band */ --fs-h2: clamp(2.7563rem, 2.4475rem + 1.266vw, 3.4606rem); /* Zitate mobil deutlich kleiner (kein Mockup-Beleg, Absprache 21.08.): Minima 28 bzw. 22 px bei 390, Maxima wie im Entwurf bei 1280 */ --fs-quote-l: clamp(1.75rem, 1.1412rem + 2.498vw, 3.1394rem); --fs-menu: clamp(1.6625rem, 1.4131rem + 1.024vw, 2.2319rem); --fs-quote-s: clamp(1.375rem, 1.0253rem + 1.435vw, 2.1731rem); --fs-faq: clamp(1.1875rem, 1.0569rem + 0.535vw, 1.485rem); --fs-card: clamp(1.1rem, 0.9775rem + 0.502vw, 1.3794rem); /* Beitragstitel */ --fs-body: clamp(1rem, 0.8906rem + 0.449vw, 1.25rem); /* auch Tagline */ --fs-author: clamp(1rem, 0.9231rem + 0.315vw, 1.175rem); --fs-button: clamp(1.075rem, 1.0319rem + 0.176vw, 1.1731rem); --fs-marquee: clamp(0.9375rem, 0.8556rem + 0.337vw, 1.125rem); --fs-footer: clamp(0.875rem, 0.8419rem + 0.136vw, 0.9506rem); --fs-label: clamp(0.8125rem, 0.785rem + 0.112vw, 0.875rem); /* Versal-Labels, Auszug, Listen */ --fs-cta: clamp(1rem, 0.9588rem + 0.169vw, 1.0938rem); /* Kontakt-Karte, 17,5 pt im Entwurf */ /* Zeilenhöhen – aus den Baseline-Abständen im PDF */ --lh-display: 1.1; /* 58.82 / 64.75 */ --lh-body: 1.5; /* 20 / 30 */ --lh-tight: 1.3; /* FAQ, Karten */ --lh-quote: 1.26; /* Zitate beider Größen: 63.3 / 50.23 */ /* Laufweite der Versal-Labels und des Laufbands */ --ls-label: 0.2em; /* --- Raster ------------------------------------------------------------- 12 Spalten, Außenrand 35 pt, Rinne 40 pt bei 1280 px. Abgeleitet aus den Insights-Karten (x = 35 / 452 / 866, je 4 Spalten). ---------------------------------------------------------------------- */ --grid-columns: 12; --grid-gap: clamp(1rem, 3.125vw, 2.5rem); --grid-pad: clamp(1.25rem, 2.734vw, 2.1875rem); --grid-max: 75.625rem; /* 1280 − 2 × 35 */ /* Zitatkarte auf Bildband (Entwurf Methode: Karte x 36–918 = 882 pt, Band x 35–1053 = 10/12 des Rasters; nicht spaltengebunden). In rem (882 / 16), damit die Karte mit der Root-Schriftgröße skaliert. */ --quote-card-max: 55.125rem; /* Kleine Zitatkarte in halber Spalte (Entwurf Angebot: 543,5 pt) */ --quote-card-max-s: 34rem; /* Abstand Hero-Oberkante → Headline: im Entwurf beginnt die Headline auf allen Seiten (Home, Methode, Angebot) bei y = 289 pt (em-Box); als Element-Abstand minus Halbzeile (lh 1,1) ≈ 286 pt = 22,33 vw bei 1280. Minimum aus dem Mobile-Mockup (Seite 2): ≈ 237 pt bei 390 px. */ --hero-top: clamp(14.8125rem, 22.33vw, 17.8663rem); /* --- Vertikaler Rhythmus ------------------------------------------------ */ --space-3xs: clamp(0.25rem, 0.4vw, 0.375rem); --space-2xs: clamp(0.5rem, 0.8vw, 0.75rem); --space-xs: clamp(0.75rem, 1.2vw, 1.125rem); --space-s: clamp(1rem, 1.6vw, 1.5rem); --space-m: clamp(1.5rem, 2.5vw, 2.25rem); --space-l: clamp(2rem, 3.5vw, 3.25rem); --space-xl: clamp(3rem, 5.5vw, 5rem); --space-2xl: clamp(4rem, 8vw, 7.5rem); --space-3xl: clamp(5rem, 11vw, 10rem); /* --- Bewegung ----------------------------------------------------------- */ --marquee-duration: 45s; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --duration-fast: 150ms; --duration-base: 300ms; } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; } }