/* ============================================================ A-Z Connect - Design Tokens AUTOGENERIERT aus brand/tokens.json - NICHT direkt bearbeiten. Neu erzeugen: .venv/bin/python build/gen_tokens.py ============================================================ */ :root{ /* --- Farben --- */ --forest-900: #0E2E22; --forest-900-rgb: 14,46,34; --forest-700: #14352B; --forest-700-rgb: 20,53,43; --forest-500: #1F5B3A; --forest-500-rgb: 31,91,58; --green-500: #3D7A3A; --green-500-rgb: 61,122,58; --lime-600: #5C9235; --lime-600-rgb: 92,146,53; --lime-500: #6FA83C; --lime-500-rgb: 111,168,60; --lime-400: #8CC152; --lime-400-rgb: 140,193,82; --lime-300: #B7DD86; --lime-300-rgb: 183,221,134; --slate-700: #2E3A42; --slate-700-rgb: 46,58,66; --slate-500: #55636E; --slate-500-rgb: 85,99,110; --slate-300: #9AA5AE; --slate-300-rgb: 154,165,174; --slate-100: #E3E7E9; --slate-100-rgb: 227,231,233; --paper-500: #F7F8F6; --paper-500-rgb: 247,248,246; --paper-600: #EDF0EC; --paper-600-rgb: 237,240,236; --white-500: #FFFFFF; --white-500-rgb: 255,255,255; /* --- Semantisch --- */ --success: #6FA83C; --warning: #D08B1F; --danger: #C0392B; /* --- Aliase --- */ --ink: var(--slate-700); --ink-soft: var(--slate-500); --ink-faint: var(--slate-300); --line: var(--slate-100); --bg: var(--paper-500); --bg-alt: var(--paper-600); --accent: var(--lime-500); --accent-text: var(--lime-600); --accent-bright: var(--lime-400); --dark: var(--forest-900); --dark-2: var(--forest-700); /* --- Verlaeufe --- */ --grad-brand: linear-gradient(120deg, #14352B, #3D7A3A, #6FA83C); --grad-brandSoft: linear-gradient(135deg, #6FA83C, #1F5B3A); --grad-highlight: linear-gradient(100deg, #B7DD86, #8CC152); --grad-deep: linear-gradient(160deg, #0E2E22, #14352B); /* --- Typografie --- */ --font-head: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fs-display: clamp(33px, 6.6vw, 82px); --lh-display: 1.03; --ls-display: -0.03em; --fw-display: 800; --fs-h1: clamp(29px, 5vw, 56px); --lh-h1: 1.08; --ls-h1: -0.025em; --fw-h1: 800; --fs-h2: clamp(24px, 3.4vw, 40px); --lh-h2: 1.14; --ls-h2: -0.02em; --fw-h2: 700; --fs-h3: clamp(20px, 2.2vw, 26px); --lh-h3: 1.25; --ls-h3: -0.01em; --fw-h3: 700; --fs-lead: clamp(17px, 1.9vw, 21px); --lh-lead: 1.6; --ls-lead: 0; --fw-lead: 400; --fs-body: 16px; --lh-body: 1.65; --ls-body: 0; --fw-body: 400; --fs-small: 14px; --lh-small: 1.55; --ls-small: 0; --fw-small: 400; --fs-eyebrow: 13px; --lh-eyebrow: 1.2; --ls-eyebrow: 0.22em; --fw-eyebrow: 600; /* --- Abstand, Radius, Schatten, Layout --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 140px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 100px; --sh-sm: 0 2px 8px rgba(14,46,34,.06); --sh-md: 0 8px 28px rgba(14,46,34,.10); --sh-lg: 0 20px 60px rgba(14,46,34,.14); --sh-brand: 0 10px 34px rgba(111,168,60,.34); --max-width: 1140px; --gutter: 24px; --section-y: clamp(72px, 10vw, 140px); } /* --- geteilte Basis --- */ *,*::before,*::after{box-sizing:border-box} body{font-family:var(--font-body);color:var(--ink);background:var(--bg); font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility} h1,h2,h3,h4{font-family:var(--font-head);color:var(--forest-700)} /* Deutsche Komposita ('Vertriebspartnerstrukturen') sprengen sonst schmale Viewports. Silbentrennung braucht lang="de" im . */ h1,h2,h3,h4,p,li{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto} ::selection{background:var(--lime-500);color:#fff} .grad-text{background:var(--grad-brand);-webkit-background-clip:text; background-clip:text;color:transparent} .eyebrow{font-family:var(--font-head);font-weight:var(--fw-eyebrow); font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase; color:var(--accent-text);display:inline-flex;align-items:center;gap:10px} .eyebrow::before{content:'';width:26px;height:2px;background:var(--accent);flex:none} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important} }