/* grow:time Design-Tokens * Quelle: growtime_Style-Guide.pdf (Jan 2026) * NIEMALS mit Steven Solbach / Win3 mischen. */ :root { /* ── Primärfarben (50-70% des Designs) ─────────── */ --amber: #F68C43; --indigo: #5D60AB; --teal: #0D8062; --clay: #965335; --rosewood: #A8595F; --slate-blue: #2E7393; /* ── Sekundärfarben (30-10%) ───────────────────── */ --burnt-sienna: #BE6D35; --deep-indigo: #3D419A; --pine: #356357; --umber: #6A3E2A; --oxide-red: #761615; --steel-blue: #365362; /* ── Highlightfarben (10-5%) ───────────────────── */ --soft-gold: #F5D06E; --vivid-orange: #F6881F; --mint: #A0D7D0; --ivory: #FFF8F1; --peach: #FBB364; --crimson: #A51E24; /* ── Textfarben (nur diese zwei!) ──────────────── */ --ink: #000000; --paper: #FFFFFF; /* ── Marken-Grün: dunkles Grün für Footer + grüne Highlight-Worte (eine Quelle) ── */ --brand-green: #24420b; /* ── Typografie: Schriftfamilien ───────────────── */ --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ── TYPO-SKALA — Ratio 1.25 (große Terz), Basis 19px ── Die feste Größen-Leiter. Komponenten & Einmalgrößen rasten hier ein. Rollen-Größen (unten) sitzen ebenfalls auf diesen Stufen. */ --size-2xs: 0.75rem; /* 12px */ --size-xs: 0.9375rem; /* 15px */ --size-sm: 1.1875rem; /* 19px — Basis */ --size-md: 1.5rem; /* 24px */ --size-lg: 1.875rem; /* 30px */ --size-xl: 2.375rem; /* 38px */ --size-2xl: 2.875rem; /* 46px */ --size-3xl: 3.625rem; /* 58px */ --size-4xl: 4.5rem; /* 72px */ /* ── ROLLEN-TYPOGRAFIE (feste Werte, via Tune-Overlay ?tune editierbar) ── Die EINE Quelle der Wahrheit für Schriftart, Größe und Abstände. Pro Rolle: font / size (fest) / line-height / tracking / weight + margin oben (-mt) und unten (-mb). Seed = aktueller Desktop-Stand. */ /* Display - große Titel (H1-Look) - getunte Werte */ --display-font: var(--font-serif); --display-size: 6rem; --display-lh: 0.84; --display-tracking: -0.02em; --display-weight: 600; --display-mt: -1.35rem; --display-mb: -2.4rem; /* H1 - nacktes

nutzt Display-Tokens (siehe style.css); Block bleibt für --fs-h1-Alias */ --h1-font: var(--font-serif); --h1-size: 3.625rem; --h1-lh: 1.05; --h1-tracking: -0.015em; --h1-weight: 600; --h1-mt: 0rem; --h1-mb: 0rem; /* Überschrift - EINE Standard-Titelgröße (war H2 + H3 + Zitat) */ --h2-font: var(--font-serif); --h2-size: 2.375rem; --h2-lh: 1; --h2-tracking: -0.015em; --h2-weight: 600; --h2-mt: 0rem; --h2-mb: 0rem; /* H3 - mit Überschrift zusammengelegt: folgt komplett der Überschrift-Rolle */ --h3-font: var(--h2-font); --h3-size: var(--h2-size); --h3-lh: var(--h2-lh); --h3-tracking: var(--h2-tracking); --h3-weight: var(--h2-weight); --h3-mt: var(--h2-mt); --h3-mb: var(--h2-mb); /* Body - Fließtext */ --body-font: var(--font-sans); --body-size: 1.2rem; --body-lh: 1.55; --body-tracking: 0em; --body-weight: 400; --body-mt: 0rem; --body-mb: 1.1875rem; /* Lead - mit Body zusammengelegt: folgt komplett der Body-Rolle */ --lead-font: var(--body-font); --lead-size: var(--body-size); --lead-lh: var(--body-lh); --lead-tracking: var(--body-tracking); --lead-weight: var(--body-weight); --lead-mt: var(--body-mt); --lead-mb: var(--body-mb); /* Meta - mit Kleiner Text zusammengelegt (folgt --caption-size) */ --meta-font: var(--font-sans); --meta-size: var(--caption-size); --meta-lh: 1.3; --meta-tracking: 0.05em; --meta-weight: 400; --meta-mt: 0rem; --meta-mb: 0rem; /* Eyebrow - mit Meta zusammengelegt: teilt Größe/Zeilenhöhe/Abstand, behält eigenes Großbuchstaben-Tracking */ --eyebrow-font: var(--font-sans); --eyebrow-size: var(--meta-size); --eyebrow-lh: var(--meta-lh); --eyebrow-tracking: 0.22em; --eyebrow-weight: 400; --eyebrow-mt: var(--meta-mt); --eyebrow-mb: var(--meta-mb); /* Kleiner Text - EINE kleine Textgröße (war Caption + Meta + Eyebrow + Button) */ --caption-font: var(--font-sans); --caption-size: 0.875rem; --caption-lh: 1.4; --caption-tracking: 0em; --caption-weight: 400; --caption-mt: 0rem; --caption-mb: 0rem; /* Quote - Pullquote: Größe = Überschrift, Kursiv als Highlight (via .pullquote) */ --quote-font: var(--font-serif); --quote-size: var(--h2-size); --quote-lh: 1.15; --quote-tracking: -0.015em; --quote-weight: 400; --quote-mt: 0rem; --quote-mb: 0rem; /* Button */ --button-font: var(--font-sans); --button-size: var(--caption-size); --button-lh: 1; --button-tracking: 0.01em; --button-weight: 600; /* ── Rückwärts-Kompatibilität: alte --fs-* folgen jetzt den Rollen-Größen ── */ --fs-display: var(--display-size); --fs-h1: var(--h1-size); --fs-h2: var(--h2-size); --fs-h3: var(--h3-size); --fs-lead: var(--lead-size); --fs-body: var(--body-size); --fs-eyebrow: var(--eyebrow-size); --fs-meta: var(--meta-size); --fs-quote: var(--quote-size); /* Line-Heights + Tracking (Legacy-Tokens, weiterhin von Nicht-Rollen-Regeln genutzt) */ --lh-display: var(--display-lh); --lh-tight: 1.1; --lh-snug: 1.25; --lh-body: var(--body-lh); --tracking-wide: var(--eyebrow-tracking); --tracking-tight: -0.015em; --tracking-loose: var(--meta-tracking); /* ── Layout (12-Spalten editorial) ─────────────── */ --page-px: clamp(1.25rem, 3vw, 3rem); --page-max: 1600px; --col-gap: clamp(1rem, 2vw, 2rem); --row-gap: clamp(2rem, 4vw, 5rem); /* Vertikaler Rhythmus innerhalb von Sections - konsistent wiederverwenden */ --space-block: clamp(3rem, 1.5rem + 5vw, 5rem); --space-tight: clamp(1.75rem, 1.1rem + 2vw, 2.75rem); /* Section-Rhythmus - bewusst asymmetrisch */ --sec-py: clamp(2.5rem, 2rem + 1vw, 3.5rem); --sec-py-lg: clamp(7rem, 5rem + 10vw, 14rem); /* ── Polaroid-Proportion ─────────────────────────── EIN globaler Wert für alle Polaroids: der weiße Rand ist immer dieser Anteil der Polaroid-Breite (oben/seitlich = 1x, unten = 5x). Dadurch haben alle Polaroids dieselben Proportionen wie das Haupt-Hero-Bild, egal wie groß sie skaliert sind. Karte bei 4/5-Bild ≈ 0.76. Jedes Polaroid setzt: --polaroid-edge: calc(var(--polaroid-edge-ratio) * ). */ --polaroid-edge-ratio: 0.02; /* ── Hairline ──────────────────────────────────── */ --rule: 1px solid currentColor; --rule-thin: 1px solid color-mix(in srgb, currentColor 25%, transparent); /* ── Motion ────────────────────────────────────── */ --ease-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); }