/* ============================================================ MY VISION BOARD – root.css 1. CSS-Variablen 2. Reset & Base 3. Utility-Klassen (Farben, Hintergründe, Karten) Wird auf JEDER Seite als ERSTE CSS-Datei geladen. ============================================================ */ /* ============================================================ 1. CSS-VARIABLEN ============================================================ */ :root { /* --- Off-White / Hintergrund --- */ --cream: #faf8f3; /* --- Anthrazit (ink) --- */ --ink-950: #161b1b; --ink-900: #23282b; --ink-800: #2a3232; --ink-700: #364040; --ink-600: #465252; --ink-500: #5e6b6b; --ink-400: #818d8d; --ink-300: #adb6b6; --ink-200: #d2d7d7; --ink-100: #e8eaea; --ink-50: #f5f6f6; /* --- Petrol (Primärfarbe / CTA) --- */ --petrol-950: #0c2422; --petrol-900: #143734; --petrol-800: #1a4541; --petrol-700: #1f5550; --petrol-600: #2a6a63; --petrol-500: #3d8179; --petrol-400: #5c9c95; --petrol-300: #8fbdb7; --petrol-200: #bcd8d4; --petrol-100: #dcebe9; --petrol-50: #eff6f5; /* --- Salbei (sage) --- */ --sage-900: #2c392a; --sage-800: #374833; --sage-700: #455a3e; --sage-600: #57724e; --sage-500: #6f8f64; --sage-400: #8aa77f; --sage-300: #abc1a2; --sage-200: #ccd9c5; --sage-100: #e5ece1; --sage-50: #f3f6f1; /* --- Sand / Beige --- */ --sand-900: #4e3d2b; --sand-800: #614b32; --sand-700: #7a5e3c; --sand-600: #97764a; --sand-500: #af8f5f; --sand-400: #c2a87d; --sand-300: #d5c3a1; --sand-200: #e5dac3; --sand-100: #f2ecdf; --sand-50: #faf7f0; /* --- Logo-Farben (NUR im Logo verwenden!) --- */ --logo-teal: #6cc3b8; --logo-lila: #9d86d6; --logo-dark: #23282b; /* --- Semantische Farben --- */ --color-success: #3a7c52; --color-success-bg: #e8f5ee; --color-error: #c0392b; --color-error-bg: #fdecea; --color-warning: #97764a; --color-warning-bg: #fdf6e8; /* --- Schatten --- */ --shadow-soft: 0 6px 24px -6px rgb(22 38 36 / 0.10), 0 2px 8px -2px rgb(22 38 36 / 0.06); --shadow-card: 0 1px 2px rgb(22 38 36 / 0.05), 0 10px 30px -10px rgb(22 38 36 / 0.12); --shadow-lift: 0 18px 50px -16px rgb(22 38 36 / 0.25); /* --- Border-Radius --- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* --- Abstände --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* --- Typografie --- */ --font-sans: 'Nunito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; /* --- Übergänge --- */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; /* --- Z-Index --- */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-modal: 300; --z-toast: 400; } /* ============================================================ 2. RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background-color: var(--cream); color: var(--ink-900); font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 800; } ::selection { background-color: var(--petrol-200); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================ 3. UTILITY-KLASSEN Farben, Hintergründe & Karten direkt aus den Variablen. Kein Inline-Style mehr nötig – immer Klasse verwenden! ============================================================ */ /* --- Textfarben --- */ .text-brand { color: var(--petrol-700); } .text-brand-light { color: var(--petrol-500); } .text-brand-muted { color: var(--petrol-300); } .text-sage { color: var(--sage-500); } .text-sage-dark { color: var(--sage-700); } .text-sand { color: var(--sand-500); } .text-sand-dark { color: var(--sand-700); } .text-ink { color: var(--ink-900); } .text-ink-muted { color: var(--ink-500); } .text-ink-subtle { color: var(--ink-400); } .text-logo-lila { color: var(--logo-lila); } .text-logo-teal { color: var(--logo-teal); } .text-success { color: var(--color-success); } .text-error { color: var(--color-error); } .text-warning { color: var(--color-warning); } /* --- Hintergrundfarben --- */ .bg-cream { background-color: var(--cream); } .bg-brand { background-color: var(--petrol-700); } .bg-brand-dark { background-color: var(--petrol-800); } .bg-brand-soft { background-color: var(--petrol-50); } .bg-brand-light { background-color: var(--petrol-100); } .bg-sage-soft { background-color: var(--sage-100); } .bg-sage-light { background-color: var(--sage-50); } .bg-sand-soft { background-color: var(--sand-100); } .bg-sand-light { background-color: var(--sand-50); } .bg-ink { background-color: var(--ink-900); } .bg-ink-soft { background-color: var(--ink-50); } .bg-success { background-color: var(--color-success-bg); } .bg-error { background-color: var(--color-error-bg); } .bg-warning { background-color: var(--color-warning-bg); } /* --- Border-Farben --- */ .border-brand { border-color: var(--petrol-700) !important; } .border-sage { border-color: var(--sage-500) !important; } .border-sand { border-color: var(--sand-500) !important; } .border-ink { border-color: var(--ink-200) !important; } /* --- Karten-Varianten --- */ .card-dashed { border: 2px dashed var(--petrol-700) !important; } .card-brand { border-left: 4px solid var(--petrol-700) !important; } .card-sage { border-left: 4px solid var(--sage-500) !important; } .card-sand { border-left: 4px solid var(--sand-500) !important; }