/** * Global Variables — KSM Hattersheim * Single Source of Truth für alle CSS-Werte * * Prefix: --ksm- * * REGEL: Kein px in Komponenten-CSS. * Immer diese Variablen verwenden. * * FARBEN: Alle als RGB-Triplets definiert (R, G, B). * Nutzung immer via rgba(): * color: rgba(var(--ksm-color-primary), 1); (solid) * color: rgba(var(--ksm-color-primary), 0.8); (80%) */ :root { /* ============================================ BRAND COLORS — vom Kunden befüllen (R, G, B) ============================================ */ --ksm-color-primary: 189, 29, 29; /* #BD1D1D Rot — Brand/Primär */ --ksm-color-primary-dark: 162, 30, 30; /* #A21E1E Rot dunkel — Headlines, Gradient-Mitte */ --ksm-color-primary-light: 209, 97, 97; /* #D16161 Rot hell — Primär + ~30% Weiß (Hover/leichte Akzente) */ --ksm-color-secondary: 40, 50, 117; /* #283275 Blau */ --ksm-color-secondary-dark: 10, 20, 60; /* #0A143C Blau dunkel — Base-Text */ --ksm-color-accent: 250, 104, 104; /* #FA6868 Koralle — CTA/Buttons */ /* ============================================ NEUTRAL COLORS — Standard, kaum ändern ============================================ */ --ksm-color-black: 14, 14, 14; /* #0E0E0E */ --ksm-color-white: 255, 255, 255; /* #FFFFFF */ --ksm-color-gray-mid: 158, 158, 158; /* #9E9E9E Borders, Platzhalter */ --ksm-color-gray-light: 247, 247, 247; /* #F7F7F7 Hintergründe */ --ksm-color-text: var(--ksm-color-secondary-dark); /* #0A143C Base-Text: Blau dunkel */ --ksm-color-text-muted: var(--ksm-color-primary-light); /* #D16161 Sekundärtext (→ primary-light) */ --ksm-color-border: var(--ksm-color-gray-mid); /* #9E9E9E Standard Border (→ gray-mid) */ --ksm-color-headline: var(--ksm-color-primary-dark); /* #A21E1E Überschriften: Rot dunkel */ /* ============================================ FEEDBACK COLORS (R, G, B) ============================================ */ --ksm-color-success: 16, 185, 129; /* #10B981 */ --ksm-color-warning: 245, 158, 11; /* #F59E0B */ --ksm-color-error: 239, 68, 68; /* #EF4444 */ --ksm-color-info: 59, 130, 246; /* #3B82F6 */ /* ============================================ GRADIENTS — Brand-Verläufe ============================================ */ --ksm-gradient: linear-gradient(135deg, rgba(var(--ksm-color-primary), 1) 0%, rgba(var(--ksm-color-primary-dark), 1) 35%, rgba(var(--ksm-color-secondary), 1) 100%); /* #BD1D1D → #A21E1E → #283275 */ --ksm-gradient-radial: radial-gradient(120% 120% at 0% 100%, rgba(var(--ksm-color-primary), 1) 0%, rgba(var(--ksm-color-primary-dark), 1) 40%, rgba(var(--ksm-color-secondary), 1) 100%); /* #BD1D1D → #A21E1E → #283275 */ --ksm-gradient-soft: linear-gradient(135deg, rgba(var(--ksm-color-primary-dark), 1) 0%, rgba(var(--ksm-color-secondary), 1) 100%); /* #A21E1E → #283275 */ /* ============================================ SPACING — Base 12px (Uncode-Grid: 12 / 36 / 72) ============================================ */ --ksm-spacing-base: 12px; --ksm-spacing-xs: calc(var(--ksm-spacing-base) * 0.5); /* 6px */ --ksm-spacing-sm: calc(var(--ksm-spacing-base) * 0.75); /* 9px */ --ksm-spacing-md: calc(var(--ksm-spacing-base) * 1); /* 12px */ --ksm-spacing-lg: calc(var(--ksm-spacing-base) * 1.5); /* 18px — Uncode half */ --ksm-spacing-xl: calc(var(--ksm-spacing-base) * 3); /* 36px — Uncode single */ --ksm-spacing-2xl: calc(var(--ksm-spacing-base) * 4); /* 48px */ --ksm-spacing-3xl: calc(var(--ksm-spacing-base) * 6); /* 72px — Uncode double */ --ksm-spacing-4xl: calc(var(--ksm-spacing-base) * 8); /* 96px */ /* ============================================ TYPOGRAPHY ============================================ */ /* Schrift-Schnitte — Fira Sans (Faces via @font-face in style.css). Body/Default setzt bereits Uncode (Regular). Diese Variablen nur dort einsetzen, wo gezielt ein anderer Schnitt nötig ist (bold / italic). */ --ksm-font-regular: 'fira-sans-regular', system-ui, sans-serif; --ksm-font-italic: 'fira-sans-regular-italic', system-ui, sans-serif; --ksm-font-bold: 'fira-sans-bold', system-ui, sans-serif; --ksm-font-bold-italic: 'fira-sans-bold-italic', system-ui, sans-serif; --ksm-font-weight-normal: 400; --ksm-font-weight-bold: 700; /* Buttons / CTAs — einheitliche Typo (siehe uncode-overrides.css) */ --ksm-btn-font-family: var(--ksm-font-bold-italic); --ksm-btn-letter-spacing: 0; --ksm-btn-font-size: calc(var(--ksm-spacing-base) * 1.1666666667); /* 14px — Slider/Uncode */ --ksm-btn-padding-block: var(--ksm-spacing-lg); /* 18px */ --ksm-btn-padding-inline: calc(var(--ksm-spacing-base) * 2.5833333333); /* 31px */ --ksm-line-height-tight: 1.2; --ksm-line-height-normal: 1.5; --ksm-line-height-loose: 1.75; /* Font Sizes — fluid, via global-typography.css Klassen Hier nur für direkte var()-Nutzung in Komponenten */ --ksm-font-size-xs: clamp(0.625rem, 0.57rem + 0.27vw, 0.813rem); /* 10→13px */ --ksm-font-size-sm: clamp(0.75rem, 0.68rem + 0.36vw, 1rem); /* 12→16px */ --ksm-font-size-base: clamp(0.875rem, 0.81rem + 0.36vw, 1.125rem); /* 14→18px */ --ksm-font-size-lg: clamp(1rem, 0.93rem + 0.36vw, 1.25rem); /* 16→20px */ --ksm-font-size-xl: clamp(1.125rem, 1.02rem + 0.54vw, 1.5rem); /* 18→24px */ --ksm-font-size-2xl: clamp(1.313rem, 1.19rem + 0.71vw, 1.813rem); /* 21→29px */ /* ============================================ BORDERS & RADIEN ============================================ */ --ksm-border-width: 1px; --ksm-border-color: rgba(var(--ksm-color-border), 1); --ksm-border-standard: var(--ksm-border-width) solid rgba(var(--ksm-color-border), 1); --ksm-border-radius-sm: calc(var(--ksm-spacing-base) * 0.25); /* 3px */ --ksm-border-radius-md: calc(var(--ksm-spacing-base) * 0.5); /* 6px */ --ksm-border-radius-lg: calc(var(--ksm-spacing-base) * 1); /* 12px */ --ksm-border-radius-xl: calc(var(--ksm-spacing-base) * 2); /* 24px */ --ksm-border-radius-pill: 9999px; /* ============================================ SHADOWS ============================================ */ --ksm-shadow-sm: 0 1px 3px 0 rgba(var(--ksm-color-black), 0.1), 0 1px 2px -1px rgba(var(--ksm-color-black), 0.1); --ksm-shadow-md: 0 4px 6px -1px rgba(var(--ksm-color-black), 0.1), 0 2px 4px -2px rgba(var(--ksm-color-black), 0.1); --ksm-shadow-lg: 0 10px 15px -3px rgba(var(--ksm-color-black), 0.1), 0 4px 6px -4px rgba(var(--ksm-color-black), 0.1); --ksm-shadow-xl: 0 20px 25px -5px rgba(var(--ksm-color-black), 0.1), 0 8px 10px -6px rgba(var(--ksm-color-black), 0.1); /* ============================================ TRANSITIONS ============================================ */ --ksm-transition-fast: 0.15s ease-in-out; --ksm-transition-normal: 0.3s ease-in-out; --ksm-transition-slow: 0.5s ease-in-out; /* ============================================ Z-INDEX ============================================ */ --ksm-z-below: -1; --ksm-z-base: 1; --ksm-z-dropdown: 50; --ksm-z-sticky: 100; --ksm-z-overlay: 200; --ksm-z-modal: 300; --ksm-z-toast: 400; /* ============================================ LAYOUT ============================================ */ --ksm-container-max: calc(var(--ksm-spacing-base) * 100); /* 1200px */ --ksm-container-padding: var(--ksm-spacing-xl); /* 36px */ }