/* ============================================================ Marketing Autopilot — Design System v0 ============================================================ Quelle: Toschis Claude Design Export (Claude Fable 5), 10.07.2026 Basis: Marketing_Autopilot_Homepage_ClaudeDesign_2026-07-10.html Review: design_system_review_2026-07-10.md Status: v0 — Basis für Repo marketing-autopilot-website Erstellt: 10.07.2026 von Devvy (AIT / Mika-Pool) 3-Schichten-Schema: Schicht 1 — Primitives (Rohwerte, selten direkt verwenden) Schicht 2 — Aliases (Semantische Zuordnung, z.B. --action-primary) Schicht 3 — Components (Button, Input, Card — direkt im Markup) Kontrast-Fixes gegenüber Original: - --accent: #d4732a (3.34:1 auf weiss) NICHT als Text auf hellem BG → --accent-text: #b55e1c eingeführt (4.58:1, PASS AA) - --text-light: #767676 statt #888888 (3.54:1 → 4.54:1, PASS AA) - Accent-Vollflächenbutton (weiss auf #d4732a = 3.34:1, FAIL) → btn-accent als Ghost-Variante, Primary-Button bleibt Petrol Dark Mode: beide Mechanismen aktiv: 1. @media (prefers-color-scheme: dark) — folgt Betriebssystem 2. :root[data-theme="dark"] — manueller Toggle via JS ============================================================ */ /* ------------------------------------------------------------ SCHICHT 1 — PRIMITIVES Rohwerte. Direkt benennen, nie direkt im HTML verwenden. ------------------------------------------------------------ */ :root { /* == Farb-Primitives: Petrol-Familie == */ --petrol-900: #0f2b30; /* Dunkelster Petrol — Footer, Hover */ --petrol-800: #183E45; /* Haupt-Petrol — Buttons, Headings, Nav */ --petrol-700: #1a3c42; /* Dark-Mode helle Flächen */ --petrol-200: #e8f0f1; /* Helle Petrol-Tönung — Badges, BG */ --petrol-100: #f3f7f8; /* Hauchzarte Fläche — Section-Alt */ --petrol-950: #0f2326; /* Dark-Mode-Alt-Surface */ --petrol-page-dark: #0d1e21; /* Dark-Mode Seiten-Hintergrund */ /* == Farb-Primitives: Accent-Familie (Orange) == */ --orange-600: #d4732a; /* Dekorativer Akzent — Akzentlinien, Borders */ --orange-700: #bb6122; /* Accent Hover-Zustand */ --orange-800: #b55e1c; /* WCAG-AA-Safe: Fliesstext auf weiss (4.58:1) */ --orange-100: #fdf3eb; /* Hauchzart orange — Info-Boxen, Highlights */ /* == Marken-Orange (CI) == [M1.1, 14.10.2026, Rofo] Quelle: ma-claude-context 007_MA_Brand/Master-Kontext_Toschi_Schiesser_v1 («Primärfarbe #F58220, ergänzendes Blau»), ausserdem im Logo. Bisher (Entscheid 10.07.2026): kein Token, nur im Logo. Für M1.1 als Marken-Token aufgenommen, Petrol bleibt vorerst Aktionsfarbe. ⚠️ Offen, Toschi entscheidet: #F58220 als Hauptfarbe oder als Marken-Akzent? WCAG: weiss auf #F58220 = 2.59:1 (FAIL) → auf Orange immer dunkler Text (#1a1a1a auf #F58220 = 6.71:1, PASS AA). */ --orange-500: #F58220; /* CI-Orange (Logo, Marken-Button, Header-Linie) */ --orange-550: #e0731a; /* Hover auf CI-Orange (#1a1a1a darauf = 5.50:1, PASS) */ /* == Farb-Primitives: Grau/Neutral == */ --gray-950: #1a1a1a; /* Haupttext hell */ --gray-700: #555555; /* Gedämpfter Text */ --gray-500: #767676; /* Tertiär/Meta (WCAG-AA-konform: 4.54:1 auf weiss) */ --gray-400: #888888; /* NUR als dekorativ (3.54:1 — nicht für Text!) */ --gray-100: #dde3e4; /* Border hell */ --gray-50: #ffffff; /* Weiss — konstant (kein Dark-Mode-Überschreiben) */ /* == Farb-Primitives: Semantik == */ --green-700: #1a7a40; /* Erfolg, Einsparung, Bestätigung */ --red-600: #c0392b; /* Fehler, Warnung, Gefahr */ /* == Typografie-Primitives == */ --family-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --scale-display: clamp(28px, 5vw, 48px); /* Hero-Headline */ --scale-h2: clamp(24px, 4vw, 36px); /* Abschnitts-Headline */ --scale-h3: clamp(18px, 2.5vw, 22px); /* Sub-Headline */ --scale-lead: clamp(16px, 2vw, 19px); /* Lead-Text */ --scale-body: 16px; /* Standard-Fliesstext */ --scale-ui: 14px; /* Labels, Tabellen */ --scale-small: 13px; /* Captions, Meta */ --scale-eyebrow: 12px; /* Uppercase-Badges */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.25; /* Headlines */ --leading-snug: 1.4; /* Interface */ --leading-body: 1.6; /* Fliesstext */ --leading-relaxed: 1.65; /* Long-Form */ --tracking-tight: -0.01em; /* Grosse Display-Headlines */ --tracking-eyebrow: 0.1em; /* Uppercase-Labels */ /* == Spacing-Primitives (8px-Raster) == */ --raw-4: 4px; --raw-8: 8px; --raw-16: 16px; --raw-24: 24px; --raw-32: 32px; --raw-48: 48px; --raw-64: 64px; --raw-80: 80px; /* == Radius-Primitives == */ --raw-radius-sm: 8px; --raw-radius-md: 12px; --raw-radius-pill: 20px; --raw-radius-full: 9999px; /* == Motion-Primitives == */ --raw-ease: cubic-bezier(0.4, 0, 0.2, 1); --raw-fast: 150ms; --raw-base: 200ms; --raw-slow: 300ms; } /* ------------------------------------------------------------ SCHICHT 2 — ALIASES (Light Mode, Default) Semantische Token-Namen — diese im HTML verwenden. ------------------------------------------------------------ */ :root { /* --- Markenfarben --- */ --color-primary: var(--petrol-800); /* Primäre Markenfarbe */ --color-primary-dark: var(--petrol-900); /* Hover, Footer */ --color-primary-light: var(--petrol-200); /* Helle Flächen */ --color-primary-faint: var(--petrol-100); /* Alt-Section-BG */ /* WCAG-Hinweis: --color-accent (3.34:1) nur dekorativ. Für Textfarbe auf hellem BG immer --color-accent-text verwenden. */ --color-accent: var(--orange-600); /* Akzentlinien, Borders, Dekor */ --color-accent-hover: var(--orange-700); /* Hover auf Accent-Elementen */ --color-accent-text: var(--orange-800); /* FIX: Text auf weiss, 4.58:1 PASS */ --color-accent-light: var(--orange-100); /* Info-Boxen, Highlight-BG */ /* --- CI-Marke [M1.1] --- */ --color-brand: var(--orange-500); /* #F58220 — Flächen, Linien, nicht als Text auf weiss */ --color-brand-hover: var(--orange-550); --text-on-brand: var(--gray-950); /* #1a1a1a auf #F58220 = 6.71:1 PASS */ /* --- Texte --- */ --text: var(--gray-950); /* #1a1a1a — Fliesstext */ --text-muted: var(--gray-700); /* #555555 — Sekundär (7.46:1) */ /* FIX: #888888 → #767676, WCAG-AA-konform (4.54:1 statt 3.54:1) */ --text-light: var(--gray-500); /* #767676 — Tertiär, Captions */ --text-on-dark: var(--gray-50); /* Weiss auf dunklem BG */ --text-on-dark-muted: rgba(255, 255, 255, 0.72); /* Dezent auf dunklem BG */ /* --- Surfaces --- */ --surface-page: var(--gray-50); /* Seiten-Hintergrund */ --surface-alt: var(--petrol-100); /* Abwechselnde Sections */ --surface-card: var(--gray-50); /* Karten-Hintergrund */ --surface-dark: var(--petrol-800); /* Dunkle CTA-Sections */ /* --- Borders --- */ --border: var(--gray-100); /* Rahmen, Trennlinien */ --border-on-dark: rgba(255, 255, 255, 0.14); /* Rahmen auf dunklem BG */ /* --- Actions (für Buttons, Links) --- */ --action-primary: var(--color-primary); --action-primary-hover: var(--color-primary-dark); --action-accent: var(--color-accent); --action-accent-hover: var(--color-accent-hover); /* --- Semantik --- */ --color-success: var(--green-700); --color-danger: var(--red-600); /* --- Focus --- */ --focus-ring: var(--color-primary); --focus-width: 3px; --focus-offset: 3px; /* --- Typografie-Aliases --- */ --font-sans: var(--family-inter); --font: var(--font-sans); /* Legacy-Alias */ --fs-display: var(--scale-display); --fs-h2: var(--scale-h2); --fs-h3: var(--scale-h3); --fs-lead: var(--scale-lead); --fs-body: var(--scale-body); --fs-interface: var(--scale-ui); --fs-small: var(--scale-small); --fs-eyebrow: var(--scale-eyebrow); --fw-regular: var(--weight-regular); --fw-medium: var(--weight-medium); --fw-semibold: var(--weight-semibold); --fw-bold: var(--weight-bold); --lh-tight: var(--leading-tight); --lh-snug: var(--leading-snug); --lh-body: var(--leading-body); --lh-relaxed: var(--leading-relaxed); --ls-tight: var(--tracking-tight); --ls-eyebrow: var(--tracking-eyebrow); /* --- Spacing-Aliases (Briefing-Pflichtschema + Erweiterungen) --- */ --space-1: var(--raw-4); /* 4px — Icon-Gap, Kleinstabstand */ --space-2: var(--raw-8); /* 8px — Basis-Abstand */ --space-3: var(--raw-16); /* 16px — Standard-Padding */ --space-4: var(--raw-24); /* 24px — Karten-Padding */ --space-5: var(--raw-32); /* 32px — Gutter, Section-Intern */ --space-6: var(--raw-48); /* 48px — Grosse Abstände */ --space-7: var(--raw-64); /* 64px — Abschnitt-Gap */ --space-8: var(--raw-80); /* 80px — Section-Padding oben/unten */ /* --- Layout --- */ --container-max: 1100px; --container-pad: var(--space-4); /* 24px */ --section-pad: var(--space-8); /* 80px */ /* --- Radius-Aliases --- */ --radius: var(--raw-radius-sm); /* 8px — Standard */ --radius-lg: var(--raw-radius-md); /* 12px — Panels */ --radius-pill: var(--raw-radius-pill); /* 20px — Badges */ --radius-full: var(--raw-radius-full); /* 9999px — Kreis */ /* --- Shadow --- */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.07); /* Cards */ --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.11); /* Dropdowns, Hover */ --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.14); /* Modals */ /* --- Motion --- */ --ease: var(--raw-ease); --dur-fast: var(--raw-fast); /* 150ms */ --dur-base: var(--raw-base); /* 200ms */ --dur-slow: var(--raw-slow); /* 300ms */ } /* ------------------------------------------------------------ DARK MODE — System-Präferenz ------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root { /* Texte */ --text: #f0f0f0; --text-muted: #b0b8ba; /* 8.50:1 auf #0d1e21 — PASS */ --text-light: #7a8a8c; /* 4.77:1 auf #0d1e21 — PASS */ /* Surfaces */ --surface-page: var(--petrol-page-dark); /* #0d1e21 */ --surface-alt: var(--petrol-950); /* #0f2326 */ --surface-card: var(--petrol-page-dark); /* #0d1e21 */ /* Borders */ --border: #2a3f43; /* Petrol-Varianten im Dark Mode */ --color-primary-light: var(--petrol-700); /* #1a3c42 */ --color-primary-faint: var(--petrol-950); /* #0f2326 */ /* FIX: --color-accent-text bleibt #b55e1c — auf dunklem BG: #b55e1c auf #0d1e21 = 3.45:1 — reicht nicht für Fliesstext. Im Dark Mode Accent-Text auf #e8973e anheben (4.68:1). */ --color-accent-text: #e8973e; /* Fokus-Ring auf Petrol-Grundlage bleibt, aber sichtbarer */ --focus-ring: #e8f0f1; } } /* ------------------------------------------------------------ DARK MODE — Manueller Toggle (JS setzt data-theme="dark") Überschreibt die @media-Regel wenn Nutzer manuell wechselt. ------------------------------------------------------------ */ :root[data-theme="dark"] { --text: #f0f0f0; --text-muted: #b0b8ba; --text-light: #7a8a8c; --surface-page: var(--petrol-page-dark); --surface-alt: var(--petrol-950); --surface-card: var(--petrol-page-dark); --border: #2a3f43; --color-primary-light: var(--petrol-700); --color-primary-faint: var(--petrol-950); --color-accent-text: #e8973e; /* Dark-Mode-sicherer Accent-Text */ --focus-ring: #e8f0f1; } /* Light-Override wenn Nutzer explizit auf Hell wechselt */ :root[data-theme="light"] { --text: var(--gray-950); --text-muted: var(--gray-700); --text-light: var(--gray-500); --surface-page: var(--gray-50); --surface-alt: var(--petrol-100); --surface-card: var(--gray-50); --border: var(--gray-100); --color-primary-light: var(--petrol-200); --color-primary-faint: var(--petrol-100); --color-accent-text: var(--orange-800); --focus-ring: var(--color-primary); } /* ------------------------------------------------------------ REDUCED MOTION Alle Animationsdauern auf 0ms bei Systemeinstellung. ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } } /* ------------------------------------------------------------ SCHICHT 3 — COMPONENT TOKENS Direkt im Markup verwendbar. Bauen auf Schicht-2-Aliases auf. ------------------------------------------------------------ */ :root { /* ======================================================== BUTTONS Primary: Petrol, heller Text — WCAG 11.58:1 (PASS) Secondary: Weiss mit Petrol-Border Ghost Accent: transparent mit Accent-Border ======================================================== */ /* Button Primary (Petrol) */ --btn-primary-bg: var(--action-primary); /* #183E45 */ --btn-primary-bg-hover: var(--action-primary-hover); /* #0f2b30 */ --btn-primary-color: var(--text-on-dark); /* #ffffff — 11.58:1 PASS */ --btn-primary-radius: var(--radius); --btn-primary-padding: 12px 24px; --btn-primary-font-size: var(--fs-interface); --btn-primary-font-weight: var(--fw-semibold); --btn-primary-shadow: var(--shadow-sm); /* Button Secondary (weiss mit Petrol-Border) */ --btn-secondary-bg: transparent; --btn-secondary-bg-hover: var(--color-primary-light); /* #e8f0f1 */ --btn-secondary-color: var(--action-primary); /* #183E45 */ --btn-secondary-border: var(--action-primary); --btn-secondary-border-width: 2px; --btn-secondary-radius: var(--radius); --btn-secondary-padding: 10px 22px; --btn-secondary-font-size: var(--fs-interface); --btn-secondary-font-weight: var(--fw-semibold); /* Button Ghost Accent (Akzent-Border, kein Vollflächenhintergrund) WCAG-Begründung: Weiss auf #d4732a = 3.34:1, FAIL für Normtext. Daher: transparenter BG, Accent-Border, Accent-Text (#b55e1c auf weiss = 4.58:1) */ --btn-ghost-color: var(--color-accent-text); /* #b55e1c — PASS */ --btn-ghost-bg: transparent; --btn-ghost-bg-hover: var(--color-accent-light); /* #fdf3eb */ --btn-ghost-border: var(--color-accent); /* #d4732a (dekorativ) */ --btn-ghost-border-width: 2px; --btn-ghost-radius: var(--radius); --btn-ghost-padding: 10px 22px; --btn-ghost-font-size: var(--fs-interface); --btn-ghost-font-weight: var(--fw-semibold); /* Button Brand (CI-Orange #F58220) [M1.1] Dunkler Text auf Orange: 6.71:1 (PASS AA). Hover #e0731a: 5.50:1 (PASS). */ --btn-brand-bg: var(--color-brand); --btn-brand-bg-hover: var(--color-brand-hover); --btn-brand-color: var(--text-on-brand); --btn-brand-radius: var(--radius); --btn-brand-padding: var(--space-2) var(--space-4); /* 8px 24px */ --btn-brand-font-weight: var(--fw-semibold); /* Header [M1.1] */ --header-brand-line: var(--space-1); /* 4px CI-Linie oben */ --logo-height: var(--space-7); /* 64px Desktop */ --logo-height-mobile: var(--space-6); /* 48px Mobile */ /* Button Dark (für Einsatz auf dunklem BG — z.B. Hero/CTA-Section) */ --btn-dark-color: var(--action-primary); /* Petrol auf weiss */ --btn-dark-bg: var(--gray-50); /* #ffffff */ --btn-dark-bg-hover: var(--color-primary-light); /* #e8f0f1 */ --btn-dark-radius: var(--radius); --btn-dark-padding: 12px 24px; --btn-dark-font-weight: var(--fw-semibold); /* ======================================================== INPUTS & FORMULARE ======================================================== */ --input-bg: var(--surface-card); --input-bg-disabled: var(--surface-alt); --input-border: var(--border); --input-border-focus: var(--color-primary); --input-radius: var(--radius); --input-padding: 10px var(--space-3); --input-font-size: var(--fs-body); --input-color: var(--text); --input-placeholder: var(--text-light); /* #767676 — 4.54:1 PASS */ --input-shadow-focus: 0 0 0 var(--focus-width) rgba(24, 62, 69, 0.2); --label-font-size: var(--fs-interface); --label-font-weight: var(--fw-medium); --label-color: var(--text); --label-margin-bottom: var(--space-1); /* ======================================================== KARTEN (CARDS) ======================================================== */ --card-bg: var(--surface-card); --card-border: var(--border); --card-border-width: 1px; --card-radius: var(--radius-lg); /* 12px */ --card-shadow: var(--shadow-sm); --card-shadow-hover: var(--shadow-md); --card-padding: var(--space-4); /* 24px */ /* ======================================================== NAVIGATION ======================================================== */ --nav-height: 68px; --nav-bg: rgba(255, 255, 255, 0.97); --nav-border: var(--border); --nav-backdrop: blur(8px); --nav-link-color: var(--text); --nav-link-color-hover: var(--color-primary); --nav-link-font-size: var(--fs-interface); --nav-link-font-weight: var(--fw-medium); --nav-cta-gap: var(--space-3); /* ======================================================== BADGES / EYEBROW LABELS ======================================================== */ --badge-bg: var(--color-primary-light); /* #e8f0f1 */ --badge-color: var(--color-primary); /* #183E45 */ --badge-font-size: var(--fs-eyebrow); /* 12px */ --badge-font-weight: var(--fw-semibold); --badge-letter-spacing: var(--ls-eyebrow); --badge-padding: 4px 10px; --badge-radius: var(--radius-pill); /* 20px */ --badge-accent-bg: var(--color-accent-light); /* #fdf3eb */ --badge-accent-color: var(--color-accent-text); /* #b55e1c PASS */ /* ======================================================== TRUST/SOCIAL-PROOF-ELEMENTE ======================================================== */ --trust-border-accent: var(--color-accent); /* Akzentlinie oben */ --trust-border-width: 3px; --avatar-bg: var(--color-primary-light); --avatar-color: var(--color-primary); --avatar-size: 42px; } /* ------------------------------------------------------------ BASE RESETS (minimal — nicht als vollständiges Reset gedacht) ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } :root { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); background-color: var(--surface-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Focus-Ring — global, kein outline:none ohne Alternative */ :focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; } /* Nur animierbare CSS-Eigenschaften mit Motion-Tokens */ a, button, input, select, textarea { transition-duration: var(--dur-base); transition-timing-function: var(--ease); } /* ============================================================ NUTZUNGSHINWEIS ============================================================ Schicht 1 (Primitives) — nie direkt im HTML-Markup: Falsch: color: var(--petrol-800); Richtig: color: var(--color-primary); Schicht 2 (Aliases) — für allgemeine Styles: color: var(--text); background: var(--surface-card); Schicht 3 (Components) — in Komponentenklassen: .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-color); padding: var(--btn-primary-padding); } Dark Mode aktivieren (JS): document.documentElement.setAttribute('data-theme', 'dark'); document.documentElement.setAttribute('data-theme', 'light'); ============================================================ */