/* ============================================================ FLOWAGENTEN — Design Tokens Single Source of Truth für das gesamte Design-System Version: 3.0 Stand: 31.03.2026 WICHTIG: Alle Seiten importieren diese Datei. Änderungen hier wirken sich global auf alle 123+ Seiten aus. ============================================================ */ /* ============================================================ 1. MARKENWELT — Dark Theme (Standard) Startseite, Über uns, Case Studies, Branchen-Seiten ============================================================ */ :root { /* --- Hintergründe (Navy #151539 Grundton) --- */ --bg-deep: #151539; --bg-primary: #151539; --bg-secondary: #1A1A42; --bg-card: #1F1F4A; --bg-card-hover: #262652; --bg-elevated: #22224E; --white: #ffffff; --off-white: #f5f8ff; --warm-gray: #f0ede8; /* --- Primär-Akzent: Cyan / Mint --- */ --accent: #67DEE3; --accent-hover: #8FFBBD; --accent-light: #8FFBBD; --accent-glow: rgba(103, 222, 227, 0.12); --accent-gradient: linear-gradient(135deg, #67DEE3, #8FFBBD); /* --- Sekundär-Akzent: Pink / Magenta (CTAs, Badges) --- */ --pink: #FF2B84; --pink-hover: #FF4D9A; --pink-deep: #AC0A4D; --pink-glow: rgba(255, 43, 132, 0.15); --pink-gradient: linear-gradient(30deg, #AC0A4D 18%, #FF2B84); /* --- Blau (Hintergrund-Akzente, Glow, Newsletter) --- */ --blue-deep: #110BB9; --blue-bright: #0058FF; --blue-gradient: linear-gradient(135deg, #110BB9, #0058FF); /* --- Text auf dunklem Hintergrund --- */ --t1: #eef0f6; /* Primary — Headlines, Body */ --t2: #c2c7d6; /* Secondary — Subtitles, Captions */ --t3: #5c6380; /* Tertiary — Labels, Disabled */ /* --- Text auf hellem Hintergrund --- */ --tl1: #051c2c; --tl2: #2d3748; --tl3: #9098b0; /* --- Borders --- */ --border: rgba(255, 255, 255, 0.06); --border-accent: #AC0A4D; --border-light: #e2e8f0; /* --- Glassmorphism --- */ --glass: rgba(255, 255, 255, 0.04); --glass-border: rgba(255, 255, 255, 0.08); /* --- Typografie --- Fonts werden selbst gehostet (DSGVO-konform). Fallback: system-ui für sofortige Darstellung. */ --heading: 'Wix Madefor Display', system-ui, sans-serif; --body: 'Wix Madefor Text', system-ui, sans-serif; --display: 'Wix Madefor Display', system-ui, sans-serif; --display-num: 'Wix Madefor Display', system-ui, sans-serif; /* --- Aurora Atmosphäre (animierte Hintergrund-Spots) --- */ --aurora-blue: rgba(0, 88, 255, 0.35); --aurora-cyan: rgba(0, 88, 255, 0.14); --aurora-red: rgba(255, 43, 132, 0.35); --aurora-pink: rgba(255, 43, 132, 0.18); --aurora-purple: rgba(0, 55, 180, 0.15); /* --- Layout Grid --- 12 Spalten × 50.7px + 11 Gutters × 40px = 1088px */ --content: 1088px; --content-wide: 1360px; --content-narrow: 720px; --gutter: 40px; --section-gap: 120px; /* --- Border-Radii --- */ --r-container: 22px; /* Große Flächen, Bilder */ --r-button: 999px; /* Buttons — Pill */ --r-card: 22px; /* Cards + Boxen */ --r-input: 12px; /* Eingabefelder */ --r-tag: 100px; /* Pill-shaped Tags */ /* --- Transitions --- */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --t-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); --t-fast: all 0.2s ease; /* --- Navigation --- */ --nav-bg: #151539; --nav-text: #ffffff; --nav-height: 72px; /* --- Chat Widget --- */ --chat-fab-size: 72px; --chat-fab-bg: #0a0a1a; --chat-modal-width: 520px; --chat-modal-radius: 24px; } /* ============================================================ 2. PRODUKTWELT — Light Theme Override Blog-Artikel, Use-Cases, Preise, ROI-Rechner Aktiviert durch: ============================================================ */ [data-world="produkt"] { /* --- Hintergründe: Weiß-Basis --- */ --bg-deep: #ffffff; --bg-primary: #ffffff; --bg-secondary: #f8f9fc; --bg-card: #f8f9fc; --bg-card-hover: #eef0f7; --bg-elevated: #ffffff; /* --- Text: Dunkel auf hellem BG --- */ --t1: #051c2c; --t2: #2d3748; --t3: #9098b0; /* --- Akzent wechselt zu Blau (besserer Kontrast auf Weiß) --- */ --accent: #0058FF; --accent-hover: #0047cc; --accent-light: #3378FF; --accent-glow: rgba(0, 88, 255, 0.08); --accent-gradient: linear-gradient(135deg, #0058FF, #3378FF); /* --- Pink: Dunklerer Ton auf hellem BG --- */ --pink: #AC0A4D; --pink-hover: #D01060; --pink-glow: rgba(172, 10, 77, 0.10); /* --- Borders: Dunkel auf Weiß --- */ --border: rgba(0, 0, 0, 0.08); --border-accent: rgba(0, 88, 255, 0.20); /* --- Glass: Dunkel-Variante --- */ --glass: rgba(0, 0, 0, 0.02); --glass-border: rgba(0, 0, 0, 0.08); /* Aurora wird in Produktwelt ausgeblendet */ } /* ============================================================ 3. SEMANTIC TOKENS — Funktionale Aliase Diese Namen beschreiben die Funktion, nicht die Farbe. So bleibt der Code lesbar, auch wenn Farben sich ändern. ============================================================ */ :root { /* CTA-Buttons (global änderbar) */ --cta-bg: var(--pink-gradient); --cta-text: #ffffff; --cta-hover-bg: var(--pink-hover); /* Sekundäre Buttons */ --cta-secondary-bg: var(--accent-gradient); --cta-secondary-text: var(--bg-deep); /* Links */ --link-color: var(--accent); --link-hover: var(--accent-hover); /* Success / Error / Warning */ --success: #4ade80; --error: #f87171; --warning: #fbbf24; /* Status-Dot (Chat Online) */ --status-online: var(--success); } /* ============================================================ 3b. LEGACY COMPATIBILITY BRIDGE Mappt alte Variablennamen (v1.0) auf neue Werte (v3.0). So funktionieren bestehende Seiten sofort mit dem neuen System. Diese Bridge kann entfernt werden, sobald alle Seiten refactored sind. ============================================================ */ :root { /* --- Alt → Neu: Hintergründe --- */ --bg-elevated: var(--bg-card); /* --- Alt → Neu: Akzentfarben --- */ --accent-dark: #0047cc; --yellow: var(--accent); /* Gelb → Cyan */ --yellow-glow: var(--accent-glow); --yellow-dark: var(--accent-hover); --purple: var(--pink); /* Lila → Pink */ --cyan: var(--accent); /* --- Alt → Neu: Semantische Farben --- */ --danger: var(--error); --danger-glow: rgba(248, 113, 113, 0.12); --success-glow: rgba(74, 222, 128, 0.12); /* --- Alt → Neu: Text --- */ --text-primary: var(--t1); --text-secondary: var(--t2); --text-muted: var(--t3); --text-on-light: var(--tl1); --text-on-light-secondary: var(--tl2); /* --- Alt → Neu: Borders --- */ --border-hover: rgba(103, 222, 227, 0.3); --border-light: var(--border-light); /* --- Alt → Neu: Typografie --- */ --serif: var(--heading); --sans: var(--body); /* --- Alt → Neu: Layout --- */ --section-padding: var(--section-gap) 2rem; --container-max: var(--content); --nav-height: var(--nav-height); /* --- Alt → Neu: Transitions --- */ --ease-out-expo: var(--ease); --transition-smooth: var(--t-smooth); } /* ============================================================ 4. TYPOGRAFIE-SKALA Responsive clamp()-basiert für flüssige Skalierung ============================================================ */ :root { --fs-display: clamp(28px, 4vw, 56px); /* Hero-Headlines */ --fs-section: clamp(32px, 4vw, 48px); /* Sections H2 */ --fs-card: clamp(20px, 2vw, 28px); /* Card-Titles */ --fs-small: 18px; /* Small Headings */ --fs-body: 16px; /* Standard Body */ --fs-caption: 14px; /* Captions, Meta */ --fs-label: 13px; /* Labels, Tags */ --fs-tiny: 11px; /* Badges, Pills */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.15; --lh-normal: 1.6; --lh-relaxed: 1.75; } /* ============================================================ 5. SCHATTEN-SYSTEM ============================================================ */ :root { --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 24px rgba(10, 30, 47, 0.08); --shadow-lg: 0 8px 40px rgba(10, 30, 47, 0.12); --shadow-xl: 0 20px 60px rgba(10, 30, 47, 0.15); --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.1); } /* ============================================================ 6. Z-INDEX SKALA Zentral definiert, um Konflikte zu vermeiden ============================================================ */ :root { --z-base: 0; --z-dropdown: 1000; --z-sticky: 1010; --z-overlay: 9998; --z-nav: 9999; --z-modal: 10000; }