/* ============================================================================ HUNTER SHOP — Design Tokens (CI Single Source of Truth) ---------------------------------------------------------------------------- Zwei Ebenen, damit „nur an einer Stelle ändern" wirklich gilt: 1. PRIMITIVE → rohe Werte (Farbe, Font). NUR HIER Werte ändern. 2. SEMANTIC → Rollen (primary, cta, text …). Komponenten nutzen NUR diese. Die Semantic-Namen entsprechen Elementor Global Colors/Fonts (Primary · Secondary · Accent · Text) → Portierung nach WoodMart/Elementor 1:1. Darunter: ALIASE für bestehendes CSS (zeigen jetzt auf die neue CI). ========================================================================== */ :root { /* ========================================================================== EBENE 1 — PRIMITIVE (Rohwerte — hier ändern, alles zieht automatisch nach) ========================================================================== */ /* --- Marken-Kernfarben (CI, verbindlich) -------------------------------- */ --c-primary: #0f5478; /* Primär — Marke, Autorität, Text-Blau */ --c-secondary: #1c9de1; /* Sekundär — helle Marke, Akzent, große Titel */ --c-cta: #fcad16; /* CTA — einzige laute Farbinsel */ --c-ink: #062332; /* Copy — Fließtext, dunkelste Tinte */ /* --- Marken-Blau-Skala (Tints/Shades von Primär; HG, Verläufe, Tiefe) --- */ --blue-50: #eef3f6; --blue-100: #dbe5eb; --blue-200: #b7ccd6; --blue-300: #87aabc; --blue-400: #5787a0; --blue-500: #2e6a8a; --blue-600: #1c5f81; --blue-700: #0f5478; /* = --c-primary */ --blue-800: #0a3952; --blue-900: #082d40; --blue-950: #062332; /* = --c-ink (Copy) */ /* --- CTA-Skala (Orange) -------------------------------------------------- */ --cta-400: #ffc244; /* heller — Hover-Pop auf dunklem Grund */ --cta-500: #fcad16; /* = --c-cta */ --cta-600: #de9c19; /* Hover (hell) */ --cta-700: #c68f1c; /* Active/Pressed */ --cta-tint: #fff4de; /* heller HG/Fläche */ /* Headline-Verlauf (Sekundär → heller) — aus dem Marken-Blau abgeleitet */ --sec-300: #5ec4f2; /* aufgehelltes Sekundär */ /* --- Sekundär-Skala ------------------------------------------------------ */ --sec-500: #1c9de1; /* = --c-secondary */ --sec-600: #1889c5; /* Hover */ --sec-tint: #e4f3fb; /* heller HG/Fläche */ /* --- Neutrals (leicht kühl, Richtung Marke getönt) ---------------------- */ --white: #ffffff; --gray-50: #f8fafb; --gray-100: #f1f5f7; --gray-200: #e5ecf0; --gray-300: #cfdde4; --gray-400: #96a3a9; --gray-500: #6f7f88; --gray-600: #475c67; --gray-700: #243d4b; /* --- Status / Eco (Grün doppelt als Wasserspar-/Daten-Akzent) ----------- */ --green-900: #0e3b2a; --green-800: #15503a; --green-700: #1a6b4f; --green-600: #24734a; --green-500: #2f8f5b; /* ok / eco */ --green-400: #55b077; --green-300: #7fd6ac; --green-tint: #e7f4ec; --amber-warn: #c9821c; /* warn */ --red-err: #c0402f; /* error */ --red-tint: #fbecea; /* ========================================================================== EBENE 2 — SEMANTIC (Rollen — Komponenten nutzen NUR diese Namen) Namensgebung = Elementor Global Colors → Portierung 1:1. ========================================================================== */ /* Elementor: Primary / Secondary / Accent / Text */ --color-primary: var(--c-primary); --color-primary-strong: var(--blue-800); --color-primary-bright: var(--blue-500); /* Link-Hover, AA-sicher auf Weiß */ --color-secondary: var(--c-secondary); --color-cta: var(--c-cta); --color-cta-hover: var(--cta-600); --color-cta-active: var(--cta-700); --color-cta-ink: var(--c-ink); /* DUNKLE Schrift auf CTA → 8,6:1 (A11y!) */ /* Text-Hierarchie */ --color-text: var(--c-ink); /* Fließtext 16:1 */ --color-text-strong: var(--blue-950); /* Headlines/Betonung */ --color-text-muted: var(--gray-600); /* Sekundärtext */ --color-text-soft: var(--gray-500); /* Labels, Meta */ --color-text-invert: #eef3f5; /* auf dunkler Fläche */ /* Flächen & Linien */ --color-bg: var(--white); --color-surface: var(--white); --color-sunk: var(--gray-50); --color-tint: var(--blue-50); /* zarte Marken-Fläche */ --color-ground: var(--blue-950); /* dunkle Sektion/Footer */ --color-line: var(--gray-200); --color-line-strong: var(--gray-300); /* Verläufe (Marke) */ --gradient-brand: linear-gradient(135deg, var(--c-primary) 0%, var(--c-secondary) 100%); --gradient-depth: linear-gradient(180deg, var(--blue-800) 0%, var(--blue-950) 100%); --gradient-tint: linear-gradient(180deg, var(--blue-50) 0%, var(--white) 70%); /* ========================================================================== ALIASE — Rückwärtskompatibilität für bestehendes CSS. Zeigen jetzt auf die neue CI. Neuen Code bitte auf --color-* schreiben. ========================================================================== */ /* Blau-Aliase (früher --hunter-*) */ --hunter-900: var(--blue-950); --hunter-800: var(--blue-800); --hunter-700: var(--color-primary); --hunter-600: var(--blue-600); --hunter-500: var(--blue-500); --hunter-300: var(--blue-300); --hunter-100: var(--blue-100); /* Neutrale Flächen (früher --paper/--mist/--slate) */ --paper: var(--white); --mist: var(--gray-50); --mist-2: var(--gray-100); --slate: var(--gray-300); --ink-900: var(--blue-950); --ink-800: var(--blue-900); /* Signal = jetzt CTA-Orange (früher separates Amber) */ --signal-700: var(--cta-700); --signal-600: var(--cta-600); --signal-500: var(--cta-500); --signal-400: var(--cta-500); --signal-tint: var(--cta-tint); /* Eco/Leaf */ --leaf-600: var(--green-600); --leaf-500: var(--green-500); --leaf-400: var(--green-400); /* Status */ --ok: var(--green-500); --warn: var(--amber-warn); --err: var(--red-err); /* Text-Aliase */ --text-strong: var(--color-text-strong); --text: var(--color-text); --text-muted: var(--color-text-muted); --text-soft: var(--color-text-soft); --text-invert: var(--color-text-invert); --text-invert-muted: rgba(238, 243, 245, 0.72); --text-invert-soft: rgba(238, 243, 245, 0.56); /* Linien */ --line: var(--color-line); --line-strong: var(--color-line-strong); --line-invert: rgba(255, 255, 255, 0.14); /* Semantische Alt-Namen */ --bg: var(--color-bg); --bg-surface: var(--color-surface); --bg-sunk: var(--color-sunk); --bg-tint: var(--color-tint); --bg-ground: var(--color-ground); --brand: var(--color-primary); --brand-deep: var(--color-primary-strong); --brand-bright: var(--color-primary-bright); --cta: var(--color-cta); --cta-hover: var(--color-cta-hover); --cta-ink: var(--color-cta-ink); /* jetzt DUNKEL (war #fff = Kontrast-Fail) */ --eco: var(--green-500); /* Planer-Grün */ --planner-900: var(--green-900); --planner-800: var(--green-800); --planner-700: var(--green-700); --planner-500: var(--green-500); --planner-300: var(--green-300); /* ========================================================================== TYPOGRAFIE Headline: Satoshi (Bold 700 / Black 900) · Copy: General Sans (400/500/600) Self-hosted (@font-face in base.css). Fallbacks metrisch nah gewählt. ========================================================================== */ --font-display: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-body: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: var(--font-body); /* CI nutzt keine Mono — Zahlen via font-variant-numeric: tabular-nums */ /* Fluide Typo-Skala (clamp: min · fluid · max) */ --fs-eyebrow: 0.78rem; --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-h4: clamp(1.08rem, 1rem + 0.42vw, 1.28rem); --fs-h3: clamp(1.28rem, 1.08rem + 1vw, 1.76rem); --fs-h2: clamp(1.7rem, 1.25rem + 2vw, 2.55rem); --fs-h1: clamp(2rem, 1.45rem + 2.8vw, 3.15rem); --fs-display: clamp(2.35rem, 1.55rem + 4.2vw, 4.65rem); --fs-hero: clamp(2.15rem, 1.45rem + 3vw, 3.95rem); /* Hero-Headline */ --lh-tight: 1.08; --lh-snug: 1.22; --lh-normal: 1.5; --lh-relaxed: 1.68; --ls-display: -0.01em; /* Satoshi verträgt etwas engeres Tracking im Display */ --ls-head: -0.005em; --ls-eyebrow: 0.08em; --ls-wide: 0.02em; /* Verfügbare Gewichte: Satoshi 700/900 · General Sans 400/500/600. fw-bold(700) NUR für Display (Satoshi). Body-Betonung nutzt fw-semi(600). */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 900; /* ========================================================================== SPACING (8px-Grid) + SEKTIONS-ABSTÄNDE (responsive via @media unten) ========================================================================== */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.75rem; --sp-8: 3.5rem; --sp-9: 4.5rem; --sp-10: 6rem; --sp-11: 8rem; /* Sektions-Padding — Desktop-Werte (Mobile-Overrides im @media-Block ganz unten). Seitliches Padding kommt über --gutter (identisch für Content & Band). */ --section-pad-block: 5rem; /* große Content-Sektionen: oben/unten */ --band-pad-block: 3rem; /* kleine Bänder (Trust, CTA-Streifen) */ --section-y: var(--section-pad-block); /* Alias (bestehendes CSS) */ /* ========================================================================== LAYOUT ========================================================================== */ --w-max: 1280px; --w-wide: 1440px; --w-narrow: 940px; --w-prose: 74ch; /* Fließtext-Zeilenlänge 72–80 Zeichen */ --gutter: 3rem; /* seitliches Sektions-/Container-Padding (Desktop) */ /* ========================================================================== RADIUS ========================================================================== */ --r-xs: 4px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 14px; --r-2xl: 18px; --r-pill: 999px; /* ========================================================================== SCHATTEN (dezent, hell-tauglich) ========================================================================== */ --sh-xs: 0 1px 1px rgba(6, 35, 50, 0.04); --sh-sm: 0 1px 2px rgba(6, 35, 50, 0.05); --sh-md: 0 8px 24px -20px rgba(6, 35, 50, 0.24); --sh-lg: 0 18px 46px -34px rgba(6, 35, 50, 0.3); --sh-xl: 0 28px 70px -48px rgba(6, 35, 50, 0.32); --sh-cta: none; --sh-ring: 0 0 0 1px var(--line); /* ========================================================================== MOTION ========================================================================== */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-1: 0.16s; --dur-2: 0.3s; --dur-3: 0.55s; --dur-4: 0.9s; /* ========================================================================== Z-INDEX ========================================================================== */ --z-base: 1; --z-sticky: 100; --z-header: 500; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; /* ========================================================================== FOKUS (A11y / BFSG — WCAG 2.2 AA) ========================================================================== */ --focus-ring: 0 0 0 3px var(--white), 0 0 0 5.5px var(--color-primary-bright); /* Breakpoints (dokumentarisch; @media-Regeln nutzen die festen px-Werte) */ --bp-mobile: 768px; --bp-tablet: 1024px; --bp-wide: 1440px; } /* ============================================================================ RESPONSIVE TOKEN-OVERRIDES — Mobile (≤ 768px) Die Sektions-/Gutter-Tokens werden hier überschrieben; alles was sie nutzt (.section, .section--band, .container) zieht automatisch nach. ========================================================================== */ @media (max-width: 768px) { :root { --section-pad-block: 3rem; /* große Sektionen mobil */ --band-pad-block: 1.75rem; /* kleine Bänder mobil */ --gutter: 1.25rem; /* seitliches Padding mobil */ } }