/* ========================================================================== PIXEL+MORE — Design Tokens (Single Source of Truth) Farbwelt „Charcoal & Teal": - Charcoal/Anthrazit = Anker (Text, Struktur, dunkle Bühnen). - Teal = einziger arbeitender Akzent (Links, Buttons, Highlights, Aurora). -700 für Hell (AA), -300/-400 für dunkle Bühnen. - Rot = ausschließlich die Logo-Signatur (das „+"), sonst nirgends. - Helle, luftige Basis; dunkle Charcoal-Sektionen als bewusster Kontrast. REGEL: Außerhalb dieser Datei keine rohen Hex-/Pixel-Werte. ========================================================================== */ :root { /* --- Primitive: Anthrazit/Charcoal-Skala (Anker, Marken-Grau) -------- „ink" = neutrales Dunkelgrau bis Schwarz. Anker: #2B2B2B (Logo ~#333). */ --ink-950: #111111; --ink-900: #1A1A1A; --ink-800: #2B2B2B; /* Marken-Dunkel (Headings, dunkle Bühne) */ --ink-700: #3B3B3B; /* EXAKTES Logo-Grau; Fließtext auf Weiß (~10:1) */ --ink-600: #565656; --ink-500: #757575; --ink-400: #9A9A9A; --ink-300: #C2C2C2; --ink-200: #E1E1E1; --ink-100: #F0F0F0; --ink-50: #F8F8F8; /* --- Primitive: Teal-Skala (einziger Akzent) ------------------------- -700 trägt Text/Buttons auf Weiß (AA), -300/-400 leuchten auf dunkler Charcoal-Bühne. Blaugrün: Ruhe, Vertrauen, technologische Frische. */ --teal-950: #04332C; --teal-900: #063D34; --teal-800: #0A5346; /* Hover auf Weiß */ --teal-700: #0E7A6B; /* Akzent/Links/CTA auf Weiß (AA ~4.8:1) */ --teal-600: #12897A; --teal-500: #17A392; /* Basiston */ --teal-400: #22B9A6; /* Akzent auf dunkler Bühne */ --teal-300: #5FD4C4; /* heller Akzent/Glow auf dunkler Bühne */ --teal-200: #9CE6DB; --teal-100: #D6F3EE; --teal-50: #ECFAF7; /* --- Primitive: Rot-Skala (nur Logo-Signatur, das „+") --------------- Rot ist KEINE UI-Farbe mehr; es lebt ausschließlich in der Wortmarke. */ --red-600: #C6000D; --red-500: #E3000F; /* Signaturrot — EXAKT das Logo-„+" (CI) */ /* --- Primitive: Neutralgrau (kühl-neutrale UI-Töne, Ränder/Flächen) -- */ --grey-900: #1C1C1C; --grey-800: #2E2E2E; --grey-700: #595959; /* Labels/Kleintext auf Weiß (>=4.5:1) */ --grey-600: #787878; --grey-500: #9A9A9A; --grey-400: #BEBEBE; --grey-300: #D8D8D8; --grey-200: #E9E9E9; --grey-100: #F4F4F4; --grey-50: #FAFAFA; /* --- Primitive: Signalfarben (nur Formular-/UI-Zustände) ------------- Fehler nutzt ein entsättigtes, dunkles Rot, klar getrennt vom Marken-Rot und vom Teal-Akzent. Grün für Erfolg. */ --err-600: #B42318; --err-700: #912018; --err-100: #FBE9E7; --green-700: #15803D; --green-100: #E0F0E6; /* --- Semantische Farb-Tokens (nur diese in Komponenten verwenden) ---- */ --color-text-default: var(--ink-700); /* Fließtext */ --color-text-strong: var(--ink-800); /* Überschriften */ --color-text-muted: var(--grey-700); /* Labels, Kleintext */ --color-link: var(--teal-700); /* Links auf Weiß (AA) */ --color-link-hover: var(--teal-800); --color-action: var(--teal-700); /* CTA-Fläche (weißes Label) */ --color-action-hover: var(--teal-800); --color-action-label: #ffffff; --color-brand: var(--red-500); /* Logo-Rot (nur das „+") */ --color-accent: var(--teal-700); /* Akzent auf Hell */ --color-accent-soft: var(--teal-50); /* zarte Akzentfläche */ --color-accent-soft-border: var(--teal-100); --color-accent-on-dark: var(--teal-300); /* Akzent auf Charcoal */ --color-surface: #ffffff; --color-surface-muted: var(--grey-100); --color-page: var(--ink-50); --color-border: var(--ink-200); --color-border-strong: var(--ink-600); --color-focus: var(--teal-600); --color-invalid: var(--err-600); --color-invalid-text: var(--err-700); --color-invalid-soft: var(--err-100); --color-valid: var(--green-700); --color-valid-soft: var(--green-100); --color-on-dark: #ffffff; --border-on-dark: rgba(255, 255, 255, 0.55); --surface-on-dark: rgba(255, 255, 255, 0.10); /* --- Abstände (4px-Basis) -------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-2xs: var(--space-1); --space-xs: var(--space-2); --space-sm: var(--space-3); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); --space-5xl: var(--space-10); /* --- Radien ---------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --radius-media: var(--radius-lg); /* --- Typografie ------------------------------------------------------- */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fs-hero: clamp(32px, 4.4vw, 48px); --lh-hero: 1.06; --ws-hero: -0.035em; --fs-hero-fluid: clamp(40px, 5.6vw, 68px); --fs-display: clamp(42px, 6vw, 80px); --lh-display: 1.03; --ws-display-h: -0.045em; --fs-h2: clamp(28px, 3vw, 40px); --lh-h2: 1.12; --ws-h2: -0.025em; --fs-h3: clamp(21px, 1.6vw, 26px); --lh-h3: 1.25; --ws-h3: -0.015em; --fs-body: 17px; --lh-body: 1.7; --fs-note: 15px; --lh-note: 1.6; --fs-small: 13px; --lh-small: 1.5; --fs-mini: 12px; --fs-lead: clamp(18px, 1.4vw, 21px); --lh-lead: 1.55; --ws-display: -0.04em; --fw-regular: 400; --fw-medium: 500; --fw-bold: 600; --fw-bolder: 700; /* --- Layout ----------------------------------------------------------- */ --container-max: 1200px; --measure: 72ch; --gutter: var(--space-5); --gutter-mobile: var(--space-4); /* --- Breakpoints ------------------------------------------------------ */ --bp-sm: 576px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1200px; --bp-xxl: 1400px; /* --- Motion ----------------------------------------------------------- */ --motion-fast: 150ms; --motion-medium: 240ms; --motion-slow: 500ms; --easing: cubic-bezier(0.2, 0, 0.2, 1); --easing-out: cubic-bezier(0.16, 1, 0.3, 1); --motion-reveal: 650ms; --stagger: 70ms; /* --- Elevation (weich, neutral; Akzent-Schatten in Teal) ------------- */ --shadow-xs: 0 1px 2px rgba(17, 17, 17, 0.04); --shadow-sm: 0 2px 8px rgba(17, 17, 17, 0.06); --shadow-md: 0 10px 30px -10px rgba(17, 17, 17, 0.14), 0 2px 6px rgba(17, 17, 17, 0.05); --shadow-lg: 0 30px 60px -20px rgba(17, 17, 17, 0.20), 0 8px 20px -8px rgba(17, 17, 17, 0.10); --shadow-accent: 0 16px 32px -12px rgba(23, 163, 146, 0.28); --shadow-card: var(--shadow-sm); --shadow-tile: var(--shadow-sm), 0 2px 6px rgba(17, 17, 17, 0), 0 16px 32px -12px rgba(23, 163, 146, 0); --shadow-tile-hover: var(--shadow-md), var(--shadow-accent); --shadow-sticky: 0 1px 0 0 var(--ink-200); /* --- Hintergrund-Atmosphäre (Teal-Glow) ------------------------------ */ --glow-teal: rgba(23, 163, 146, 0.10); --glow-teal-strong: rgba(23, 163, 146, 0.20); --glow-teal-soft: rgba(23, 163, 146, 0.08); /* --- Eigene Checkbox: Haken als data-URI (Strich = ink-800 #2B2B2B) -- */ --icon-check-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2B2B' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 6.5'/%3E%3C/svg%3E"); /* --- Bild-Behandlung (Duotone/Scrim) --------------------------------- */ --duotone-ink: rgba(17, 17, 17, 0.55); --scrim-bottom: linear-gradient(to top, rgba(10, 10, 10, 0.80) 0%, rgba(10, 10, 10, 0.30) 42%, transparent 72%); --scrim-left: linear-gradient(90deg, rgba(10, 10, 10, 0.88) 0%, rgba(10, 10, 10, 0.62) 42%, rgba(10, 10, 10, 0.12) 100%); /* --- Stage: dunkle Premium-Bühne (Charcoal + Teal-Akzent) ----------- Fließtext auf Stage min. ink-200, Kleintext min. ink-300. Akzent/Links auf Stage: Teal hell (-300). */ --stage-bg: var(--ink-950); --stage-bg-grad: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%); --stage-surface: rgba(255, 255, 255, 0.045); --stage-surface-2: rgba(255, 255, 255, 0.08); --stage-border: rgba(255, 255, 255, 0.09); --stage-border-strong: rgba(255, 255, 255, 0.18); --stage-text: var(--ink-200); --stage-text-strong: #ffffff; --stage-text-muted: var(--ink-300); --stage-accent: var(--teal-300); /* --- Verläufe (nur in .css referenziert, CSP-konform) ---------------- */ --grad-brand: linear-gradient(135deg, var(--teal-500) 0%, var(--teal-700) 100%); --grad-cta: linear-gradient(180deg, var(--teal-600) 0%, var(--teal-700) 100%); --grad-headline: linear-gradient(180deg, #ffffff 0%, var(--ink-300) 100%); --grad-hairline: linear-gradient(90deg, transparent, var(--stage-border-strong), transparent); --grad-hairline-accent: linear-gradient(90deg, transparent, rgba(23, 163, 146, 0.5), transparent); /* Aurora: neutrale Lichtkuppel oben + kühle Teal-Halos (asymmetrisch) */ --glow-aurora: radial-gradient(95% 72% at 50% -12%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 34%, transparent 60%), radial-gradient(60% 66% at 6% 74%, var(--glow-teal-strong) 0%, transparent 58%), radial-gradient(46% 52% at 92% 20%, var(--glow-teal-strong) 0%, transparent 60%), radial-gradient(70% 60% at 50% 120%, var(--glow-teal-strong) 0%, transparent 72%); --shadow-stage: 0 40px 80px -24px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--stage-border); --shadow-cta: 0 8px 24px -8px rgba(23, 163, 146, 0.42); --inset-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.28); }