/* ============================================================ Lindens 3D Druck — Design System 3.0 Editorial-Premium · Petrol/Türkis-Welt · handgefertigt Tokens: OKLCH-kalibriert, brand-getintete Neutrale. ============================================================ */ :root { /* --- Brand: Petrol/Türkis (committed strategy, eine Akzentwelt) --- */ --teal-900: oklch(0.27 0.045 188); /* tiefstes Petrol, Nav/Footer */ --teal-800: oklch(0.34 0.058 185); --teal-700: oklch(0.42 0.072 184); /* Primary-Flächen */ --teal-600: oklch(0.52 0.090 183); --teal-500: oklch(0.66 0.115 182); /* Akzent / Türkis */ --teal-400: oklch(0.74 0.105 182); --teal-300: oklch(0.86 0.055 184); --teal-100: oklch(0.955 0.018 186); /* soft tint */ --teal-50: oklch(0.982 0.008 188); /* --- Warm accent (sparsam, für Bestseller-Marker) --- */ --sand-500: oklch(0.78 0.072 72); /* --- Neutrals, leicht ins Petrol getintet (kein reines #fff/#000) --- */ --ink: oklch(0.26 0.022 195); --ink-soft: oklch(0.40 0.018 195); --ink-mute: oklch(0.56 0.014 196); --paper: oklch(0.992 0.003 190); --paper-warm: oklch(0.975 0.006 96); --paper-cool: oklch(0.970 0.008 195); --hairline: oklch(0.91 0.012 192); /* --- Elevation: weiche, ins Brand getintete Schatten --- */ --shadow-sm: 0 1px 2px oklch(0.27 0.045 188 / 0.06); --shadow-md: 0 14px 34px -16px oklch(0.27 0.045 188 / 0.30); --shadow-lg: 0 40px 80px -34px oklch(0.27 0.045 188 / 0.42); /* --- Radius --- */ --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-pill: 999px; /* --- Easing (emil-design-eng: starke custom curves) --- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* --- Type --- */ --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif; --font-text: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color-scheme: light; } /* ============================================================ Dark Mode — tiefes Petrol-Schwarz, gedämpfte Akzente. data-theme="dark" auf . Kontrast WCAG-AA geprüft. ============================================================ */ :root[data-theme="dark"] { color-scheme: dark; /* Akzente — leicht entsättigt + aufgehellt, damit sie auf Dunkel tragen */ --teal-900: oklch(0.30 0.040 188); --teal-800: oklch(0.36 0.052 186); --teal-700: oklch(0.50 0.080 184); /* Primary-Flächen, heller f. Kontrast */ --teal-600: oklch(0.62 0.092 183); --teal-500: oklch(0.74 0.108 182); /* Akzent / Türkis */ --teal-400: oklch(0.80 0.092 183); --teal-300: oklch(0.84 0.050 185); /* sekundär-Text auf Dunkel */ --teal-100: oklch(0.30 0.030 188); /* soft tint → dunkle Fläche */ --teal-50: oklch(0.24 0.022 190); --sand-500: oklch(0.82 0.085 72); /* Neutrals invertiert, ins Petrol getintet */ --ink: oklch(0.95 0.012 190); --ink-soft: oklch(0.82 0.014 192); --ink-mute: oklch(0.66 0.014 194); --paper: oklch(0.185 0.020 196); --paper-warm: oklch(0.215 0.022 194); --paper-cool: oklch(0.165 0.018 198); --hairline: oklch(0.34 0.022 194); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.40); --shadow-md: 0 14px 34px -16px oklch(0 0 0 / 0.60); --shadow-lg: 0 40px 80px -34px oklch(0 0 0 / 0.70); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-text); font-size: 17px; line-height: 1.6; letter-spacing: -0.011em; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } ::selection { background: var(--teal-500); color: var(--teal-900); } img { max-width: 100%; display: block; } a { color: inherit; } /* === Typografie-Skala (≥1.25 Kontrast, emil/taste) === */ .eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-600); } .display, h1.display { font-family: var(--font-display); font-weight: 560; line-height: 1.02; letter-spacing: -0.02em; font-optical-sizing: auto; } /* === Scroll-Progress (slim, oben) === */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--teal-600), var(--teal-500)); z-index: 300; pointer-events: none; } /* === Grain-Overlay (fixed, pointer-none — Performance-safe) === */ .grain { position: fixed; inset: 0; z-index: 290; pointer-events: none; opacity: 0.035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* === Reveal-Basis (GSAP setzt Werte; CSS-Fallback) === */ [data-reveal] { will-change: transform, opacity; } /* === prefers-reduced-motion: alle Bewegung aus, Sicht bleibt === */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .scroll-progress, .grain { display: none; } [data-reveal] { opacity: 1 !important; transform: none !important; } } /* === Theme-Übergang (sanft, aber nicht bei Reduced) === */ html:not([data-theme]) body, html[data-theme] body { transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out); } @media (prefers-reduced-motion: reduce) { html[data-theme] body { transition: none; } } /* Grain im Dark-Mode: multiply würde verschwinden → screen + leiser */ :root[data-theme="dark"] .grain { mix-blend-mode: screen; opacity: 0.022; } /* === Theme-Toggle (Nav-Button, Sonne/Mond-SVG) === */ .theme-toggle { --tt-size: 38px; position: relative; width: var(--tt-size); height: var(--tt-size); flex-shrink: 0; display: inline-grid; place-items: center; background: oklch(1 0 0 / 0.07); border: 1px solid oklch(1 0 0 / 0.16); border-radius: 50%; color: #fff; cursor: pointer; padding: 0; margin-left: 8px; transition: background 0.2s var(--ease-out), transform 0.16s var(--ease-out), border-color 0.2s var(--ease-out); -webkit-tap-highlight-color: transparent; } .theme-toggle:hover { background: oklch(1 0 0 / 0.14); border-color: oklch(1 0 0 / 0.3); } .theme-toggle:active { transform: scale(0.92); } .theme-toggle:focus-visible { outline: 2px solid var(--teal-400); outline-offset: 2px; } .theme-toggle svg { position: absolute; width: 18px; height: 18px; transition: opacity 0.25s var(--ease-out), transform 0.35s var(--ease-out); } .theme-toggle .ico-sun { opacity: 0; transform: rotate(-60deg) scale(0.5); } .theme-toggle .ico-moon { opacity: 1; transform: rotate(0) scale(1); } :root[data-theme="dark"] .theme-toggle .ico-sun { opacity: 1; transform: rotate(0) scale(1); } :root[data-theme="dark"] .theme-toggle .ico-moon { opacity: 0; transform: rotate(60deg) scale(0.5); } @media (prefers-reduced-motion: reduce) { .theme-toggle svg { transition: opacity 0.01ms; } } /* Toggle im Mobile-Menü (größer, mit Label) */ .mobile-menu .theme-toggle { --tt-size: 56px; margin: 14px 0 0; } .mobile-menu .theme-toggle svg { width: 24px; height: 24px; }