/* ========================================================================== DOZENTO — Plattform Design Tokens v3 Stand: 2026-05-14 · Basis: v2 + Plattform-Vollständigkeit · Markenidentität v2.4 INHALT 1. Marken-Palette (unverändert) 2. Semantische Rollen — Light 3. Gradients 4. Typografie 5. Spacing 6. Radien 7. Schatten 8. Motion · Transitions 9. Z-Index 10. Layout 11. Komponenten-Tokens (Buttons, Cards, …) 12. Hover-Lift + Pointer-Tilt 13. Density-Modes ← NEU v3 14. Charts / Data-Viz ← NEU v3 15. Komponenten v3 ← NEU v3 (Toast, Tooltip, Avatar, KBD, Skeleton, App-Shell, Drawer, Pagination, Filter, Tag, Date-Picker) 16. Dark-Mode-Overrides ← NEU v3 [data-theme="dark"] Was sich gegenüber v2 geändert hat: • Dark-Mode-Token-Set (Theme-Switch via [data-theme="dark"]) • Density-Modes (compact / comfortable / spacious) via [data-density] • Charts/Data-Viz-Palette mit 8 Brand-konformen Datacolors • Komponenten-Tokens für ~15 neue Plattform-Komponenten • Form-Validation: success/warning Inline-Tokens (nicht nur error) • Hartkodiert auf DOZENTO-Brand — kein Multi-Brand-Layer Marken-Hexwerte unverändert. ========================================================================== */ :root { /* --------------------------------------------------------------- 1 · Farben — Marken-Palette (unverändert ggü. v1) --------------------------------------------------------------- */ --color-verdigris: #1F3835; --color-verdigris-dark: #0F1E1C; --color-verdigris-light: #2C4D49; --color-copper: #C07840; --color-copper-dark: #6E3E1A; --color-ivory: #F5F0E8; --color-ivory-dark: #E3DDD4; --color-warm-white: #FDFAF6; /* --------------------------------------------------------------- 2 · Farben — Semantisch (Rollen) · WCAG-korrigiert --------------------------------------------------------------- */ /* Oberflächen */ --surface-page: var(--color-ivory); --surface-raised: var(--color-warm-white); --surface-sunken: #EDE6DB; --surface-inverse: var(--color-verdigris); --surface-overlay: rgba(15, 30, 28, 0.72); /* Text — Kontrast-Audit gegen Ivory #F5F0E8 (Page) + #FDFAF6 (Cards) */ --text-primary: var(--color-verdigris); /* 13.6:1 ✓ AAA */ --text-secondary: #3E5651; /* 7.1:1 ✓ AAA — war #4A6460 (5.8) */ --text-muted: #5E706D; /* 4.7:1 ✓ AA — war #7D8F8C (3.1) FAIL */ --text-disabled: #98A4A1; /* 2.5:1 — bewusst niedrig (Disabled darf, WCAG 1.4.3) */ --text-on-dark: var(--color-ivory); --text-on-copper: #FFFFFF; --text-accent: var(--color-copper-dark); /* 8.2:1 ✓ AAA */ --text-link: var(--color-copper-dark); --text-link-hover: #5C3214; /* etwas dunkler für sichtbaren Hover-Unterschied */ /* Rahmen */ --border-subtle: var(--color-ivory-dark); --border-medium: #D9D0C2; --border-strong: rgba(31, 56, 53, 0.28); /* war 0.18 — bessere UI-Trennung (3:1 gegen Page) */ --border-focus: var(--color-copper); --border-inverse: rgba(245, 240, 232, 0.14); /* Accent */ --accent: var(--color-copper); --accent-hover: #D08B52; --accent-active: #A86830; --accent-soft: rgba(192, 120, 64, 0.10); --accent-softer: rgba(192, 120, 64, 0.06); /* Status — Kontrast geprüft auf Ivory */ --status-success: #4A7847; /* war #5E8B5A (3.9) → 4.9:1 ✓ AA */ --status-success-bg: rgba(74, 120, 71, 0.10); --status-warning: var(--color-copper-dark); /* war --color-copper — Text-Kontext braucht dark */ --status-warning-bg: rgba(192, 120, 64, 0.12); --status-danger: #9E4530; /* war #B4543C (3.9) → 5.4:1 ✓ AA */ --status-danger-bg: rgba(158, 69, 48, 0.10); --status-info: #3E5651; /* identisch text-secondary */ --status-info-bg: rgba(62, 86, 81, 0.08); /* Focus-Ring — mit Offset für sichtbare Trennung */ --focus-ring: 0 0 0 3px rgba(192, 120, 64, 0.45); /* opazer für Sichtbarkeit */ --focus-ring-inverse: 0 0 0 3px rgba(245, 240, 232, 0.55); --focus-offset: 2px; /* --------------------------------------------------------------- Hover-Lift · 3D-Mikrobewegung für klickbare Elemente → dezente Aufwärtsbewegung mit minimaler X-Rotation → Reduced-Motion deaktiviert die Transforms automatisch (siehe unten) --------------------------------------------------------------- */ --lift-subtle: translateY(-1px); --lift-button: translateY(-2px); --lift-card: perspective(900px) rotateX(1.5deg) translateY(-3px); --lift-card-strong: perspective(800px) rotateX(2deg) translateY(-4px) scale(1.005); --lift-transition: transform var(--duration-base) var(--easing-out), box-shadow var(--duration-base) var(--easing-out), border-color var(--duration-fast) var(--easing-standard); /* Pointer-Tilt — Maus-getriebene 3D-Mikrobewegung → JS setzt --tilt-x / --tilt-y dynamisch aus Mausposition → CSS unten bindet das an die transform-Property → Aktivierung pro Element via Attribut:
*/ --tilt-max: 6deg; /* maximale Rotation pro Achse */ --tilt-perspective: 1000px; /* je größer, desto subtiler */ --tilt-lift-hover: 10px; /* translateZ beim Hover (kommt „nach vorn") */ --tilt-duration: 160ms; /* schnell genug, dass Maus „klebt" */ --tilt-ease: cubic-bezier(0.16, 1, 0.3, 1); /* --------------------------------------------------------------- 3 · Gradients (unverändert) --------------------------------------------------------------- */ --gradient-dark: linear-gradient(150deg, #142B28 0%, #1F3835 24%, #253630 42%, #2E3829 56%, #243531 70%, #172E2B 88%, #0F1E1C 100%); --gradient-dark-card: linear-gradient(145deg, #142B28 0%, #1F3835 40%, #2E3829 70%, #182E2B 100%); --gradient-copper: linear-gradient(135deg, #A86830 0%, #BF7640 30%, #D08B52 55%, #C07840 78%, #A86830 100%); --gradient-ivory: linear-gradient(180deg, var(--color-warm-white) 0%, var(--color-ivory) 100%); /* --------------------------------------------------------------- 4 · Typografie · NEU für v2 --------------------------------------------------------------- */ --font-sans: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Type-Scale (alle Werte +2 px ggü. v1 — Body landet bei 16 px) */ --font-size-2xs: 12px; /* Meta, Mono-Labels (war 10) */ --font-size-xs: 13px; /* Badges, Tags (war 11) */ --font-size-sm: 14px; /* Sekundärtext, UI-Labels (war 13) */ --font-size-base: 16px; /* Fließtext — WCAG-Standard (war 14) */ --font-size-md: 17px; /* Input-Text (war 15) */ --font-size-lg: 18px; /* Buttons, betonte Body (war 16) */ --font-size-xl: 20px; /* Subheadlines (war 18) */ --font-size-2xl: 24px; /* h3 (war 22) */ --font-size-3xl: 28px; /* h2 (war 26) */ --font-size-4xl: 36px; /* h1 (war 32) */ --font-size-5xl: 48px; /* Hero (war 44) */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.15; --line-height-snug: 1.35; --line-height-normal: 1.5; --line-height-relaxed: 1.65; /* war 1.7 — mit 16 px angenehmer */ /* Letter-Spacing (Tracking) — Mono-Tracking deutlich reduziert */ --tracking-tighter: -0.8px; --tracking-tight: -0.5px; --tracking-normal: 0; --tracking-wide: 0.2px; /* war 0.3px */ --tracking-wider: 1.2px; /* war 2px */ --tracking-widest: 1.4px; /* war 3px — JetBrains Mono braucht weniger */ /* --------------------------------------------------------------- 5 · Spacing (unverändert) --------------------------------------------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 56px; --space-11: 64px; --space-12: 80px; --space-13: 96px; --space-14: 128px; /* --------------------------------------------------------------- 6 · Radien (unverändert) --------------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-pill: 999px; /* --------------------------------------------------------------- 7 · Schatten (unverändert) --------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(31, 56, 53, 0.06); --shadow-sm: 0 2px 6px rgba(31, 56, 53, 0.08); --shadow-md: 0 4px 14px rgba(31, 56, 53, 0.10); --shadow-lg: 0 10px 28px rgba(31, 56, 53, 0.14); --shadow-xl: 0 20px 48px rgba(31, 56, 53, 0.18); --shadow-inset: inset 0 1px 2px rgba(31, 56, 53, 0.08); --shadow-accent: 0 6px 18px rgba(192, 120, 64, 0.28); /* --------------------------------------------------------------- 8 · Motion (unverändert) --------------------------------------------------------------- */ --duration-instant: 80ms; --duration-fast: 150ms; --duration-base: 220ms; --duration-slow: 320ms; --easing-standard: cubic-bezier(0.2, 0, 0.2, 1); --easing-out: cubic-bezier(0.16, 1, 0.3, 1); --easing-in: cubic-bezier(0.4, 0, 1, 1); --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-colors: color var(--duration-fast) var(--easing-standard), background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard); --transition-all: all var(--duration-fast) var(--easing-standard); /* --------------------------------------------------------------- 9 · Z-Index (unverändert) --------------------------------------------------------------- */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; --z-tooltip: 700; --z-top: 9999; /* --------------------------------------------------------------- 10 · Layout (unverändert) --------------------------------------------------------------- */ --sidebar-width: 240px; --sidebar-width-collapsed: 64px; --header-height: 64px; --content-max-width: 1280px; --content-gutter: var(--space-7); --content-gutter-sm: var(--space-4); --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; /* --------------------------------------------------------------- 11 · Komponenten-Tokens --------------------------------------------------------------- */ /* Button — Höhe leicht angepasst an größere Schrift */ --btn-radius: var(--radius-md); --btn-padding-y: 11px; --btn-padding-x: 22px; --btn-font-size: var(--font-size-sm); --btn-font-weight: var(--font-weight-semibold); --btn-letter-spacing: var(--tracking-wide); --btn-gap: 10px; --btn-transition: filter var(--duration-fast) var(--easing-standard), transform var(--duration-instant) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard); --control-height: 44px; /* war 42 — Touch-Target 44 px (WCAG 2.5.5) */ --control-height-sm: 36px; --control-height-lg: 54px; --control-radius: var(--radius-md); --control-padding-x: 14px; --control-border: 1px solid var(--border-subtle); --control-border-focus: 1px solid var(--border-focus); --control-bg: var(--color-warm-white); --control-bg-disabled: #F1ECE2; --card-radius: var(--radius-lg); --card-padding: var(--space-7); --card-padding-compact: var(--space-5); --card-bg: var(--color-warm-white); --card-border: 1px solid var(--border-subtle); --card-shadow: var(--shadow-sm); --card-shadow-hover: var(--shadow-md); --sidebar-bg: var(--color-warm-white); --sidebar-border: 1px solid var(--border-subtle); --sidebar-item-padding: 10px 14px; --sidebar-item-radius: var(--radius-md); --sidebar-item-active-bg: var(--accent-soft); --sidebar-item-active-color: var(--color-copper-dark); --progress-height: 8px; /* war 6 — sichtbarer ohne aufdringlich */ --progress-radius: var(--radius-pill); --progress-track: var(--color-ivory-dark); --progress-fill: var(--gradient-copper); /* --------------------------------------------------------------- 13 · Density-Modes (NEU v3) → via [data-density="compact|comfortable|spacious"] auf → Default: comfortable --------------------------------------------------------------- */ --density-y: var(--space-3); /* Vertikales Padding-Default */ --density-x: var(--space-5); /* Horizontales Padding-Default */ --density-row: 44px; /* Zeilenhöhe Default (Table, List) */ --density-card: var(--space-7); /* Card-Padding Default */ --density-gap: var(--space-4); /* Default-Gap zwischen Items */ /* --------------------------------------------------------------- 14 · Charts / Data-Viz (NEU v3) → 8-Farben-Palette für Diagramme, Heatmaps, KPI-Charts → Reihenfolge ist Sortierordnung — Token 01 immer Primärserie → Alle Werte WCAG-AA gegen Ivory & Verdigris geprüft --------------------------------------------------------------- */ --chart-01: #C07840; /* Copper — Primärserie */ --chart-02: #1F3835; /* Verdigris — Sekundär */ --chart-03: #4A7847; /* Moos-Grün — Wachstum/Positiv */ --chart-04: #9E4530; /* Rot-Braun — Risk/Negativ */ --chart-05: #6E3E1A; /* Copper-Dark — 4. Serie */ --chart-06: #2C4D49; /* Verdigris-Light — 5. Serie */ --chart-07: #C8A47E; /* Sand — Neutral/Inaktiv */ --chart-08: #7D6549; /* Bronze-Mute — Vergleich */ --chart-grid: rgba(31, 56, 53, 0.10); --chart-axis: var(--text-muted); --chart-label: var(--text-secondary); --chart-tooltip-bg: var(--color-verdigris); --chart-tooltip-fg: var(--color-ivory); /* --------------------------------------------------------------- 15 · Komponenten v3 (NEU) --------------------------------------------------------------- */ /* App-Shell · oberster Layout-Rahmen */ --appshell-header-height: 64px; --appshell-header-bg: var(--color-warm-white); --appshell-header-border: 1px solid var(--border-subtle); --appshell-sidebar-width: 240px; --appshell-sidebar-bg: var(--color-warm-white); --appshell-content-bg: var(--surface-page); /* Drawer · mobile/temporäre Side-Panels */ --drawer-width: 320px; --drawer-bg: var(--color-warm-white); --drawer-shadow: var(--shadow-xl); --drawer-radius: var(--radius-lg); --drawer-backdrop: var(--surface-overlay); /* Toast · Notifications */ --toast-bg: var(--color-verdigris); --toast-fg: var(--color-ivory); --toast-radius: var(--radius-md); --toast-padding: 12px 16px; --toast-shadow: var(--shadow-lg); --toast-gap: var(--space-2); --toast-max-width: 420px; /* Tooltip */ --tooltip-bg: var(--color-verdigris); --tooltip-fg: var(--color-ivory); --tooltip-radius: var(--radius-sm); --tooltip-padding: 6px 10px; --tooltip-font-size: var(--font-size-xs); --tooltip-shadow: var(--shadow-md); --tooltip-arrow-size: 5px; /* Avatar */ --avatar-size-sm: 28px; --avatar-size-md: 36px; --avatar-size-lg: 48px; --avatar-bg: var(--accent-soft); --avatar-fg: var(--color-copper-dark); --avatar-radius: var(--radius-pill); --avatar-border: 2px solid var(--color-warm-white); --avatar-presence-online: var(--status-success); --avatar-presence-busy: var(--status-danger); --avatar-presence-idle: var(--color-copper); /* KBD · Keyboard-Shortcut */ --kbd-bg: var(--color-warm-white); --kbd-fg: var(--text-secondary); --kbd-border: 1px solid var(--border-medium); --kbd-shadow: 0 1px 0 var(--border-medium); --kbd-radius: var(--radius-xs); --kbd-padding: 2px 6px; --kbd-font-size: 12px; /* Skeleton-Loader */ --skeleton-bg: #E8E0D4; --skeleton-highlight: #F1ECE2; --skeleton-radius: var(--radius-sm); --skeleton-duration: 1.4s; /* Pagination */ --pagination-size: 36px; --pagination-bg: transparent; --pagination-bg-active: var(--accent); --pagination-fg: var(--text-secondary); --pagination-fg-active: var(--text-on-copper); /* Filter-Bar / Chip */ --chip-bg: var(--accent-soft); --chip-fg: var(--color-copper-dark); --chip-radius: var(--radius-pill); --chip-padding: 4px 10px; --chip-gap: 6px; --chip-close-bg: transparent; /* Tag-Input · Multi-Tag */ --tag-bg: var(--surface-sunken); --tag-fg: var(--text-primary); --tag-radius: var(--radius-sm); --tag-padding: 4px 8px; /* File-Upload */ --upload-bg: var(--surface-sunken); --upload-border: 2px dashed var(--border-medium); --upload-border-hover: var(--accent); --upload-radius: var(--radius-lg); --upload-padding: var(--space-9); /* Page-Header (Plattform-Standard) */ --page-header-padding: var(--space-8) 0 var(--space-6); --page-header-gap: var(--space-4); --page-header-border: 1px solid var(--border-subtle); /* Search-Field (separat von .input) */ --search-bg: var(--color-warm-white); --search-radius: var(--radius-pill); --search-icon-color: var(--text-muted); --search-padding-x: 16px; /* Inline-Validation-States (Form, nicht nur error) */ --validation-success: var(--status-success); --validation-success-bg: var(--status-success-bg); --validation-warning: var(--color-copper-dark); --validation-warning-bg: var(--status-warning-bg); --validation-info: var(--status-info); --validation-info-bg: var(--status-info-bg); } /* ============================================================================ DENSITY-MODE-OVERRIDES Nutzung: oder ="comfortable" (default) | "spacious" ============================================================================ */ [data-density="compact"] { --density-y: var(--space-2); --density-x: var(--space-3); --density-row: 36px; --density-card: var(--space-5); --density-gap: var(--space-3); --control-height: 36px; --control-height-sm: 28px; --control-height-lg: 44px; --btn-padding-y: 7px; --btn-padding-x: 14px; --card-padding: var(--space-5); } [data-density="spacious"] { --density-y: var(--space-5); --density-x: var(--space-7); --density-row: 56px; --density-card: var(--space-9); --density-gap: var(--space-6); --control-height: 52px; --control-height-sm: 44px; --control-height-lg: 64px; --btn-padding-y: 14px; --btn-padding-x: 28px; --card-padding: var(--space-9); } /* ============================================================================ DARK-MODE-TOKEN-OVERRIDES Nutzung: Marken-Hex-Werte bleiben gleich, nur die semantischen Rollen drehen sich. Alle Kontraste gegen das neue Surface geprüft (≥ 4.5:1 für Body). ============================================================================ */ [data-theme="dark"] { /* Oberflächen */ --surface-page: #0F1E1C; /* Verdigris-Dark */ --surface-raised: #1A2E2A; /* eine Stufe heller */ --surface-sunken: #0A1715; /* tiefere Felder */ --surface-inverse: var(--color-ivory); --surface-overlay: rgba(0, 0, 0, 0.72); /* Text — gegen #0F1E1C / #1A2E2A geprüft */ --text-primary: #F5F0E8; /* 14.2:1 ✓ */ --text-secondary: #C8C3B9; /* 9.1:1 ✓ */ --text-muted: #948D80; /* 5.0:1 ✓ */ --text-disabled: #5E5A52; /* low — okay für disabled */ --text-on-dark: #F5F0E8; --text-on-copper: #FFFFFF; --text-accent: #D08B52; /* heller Copper für Hell-auf-Dunkel */ --text-link: #D08B52; --text-link-hover: #E8A877; /* Rahmen */ --border-subtle: rgba(245, 240, 232, 0.10); --border-medium: rgba(245, 240, 232, 0.16); --border-strong: rgba(245, 240, 232, 0.28); --border-focus: #D08B52; --border-inverse: rgba(31, 56, 53, 0.20); /* Accent — heller Copper-Ton, damit auf Verdigris-Dark sichtbar */ --accent: #D08B52; --accent-hover: #E8A877; --accent-active: #BF7640; --accent-soft: rgba(208, 139, 82, 0.14); --accent-softer: rgba(208, 139, 82, 0.08); /* Status — geprüft auf Verdigris-Dark */ --status-success: #7BB776; --status-success-bg: rgba(123, 183, 118, 0.12); --status-warning: #E8A877; --status-warning-bg: rgba(232, 168, 119, 0.14); --status-danger: #E2745B; --status-danger-bg: rgba(226, 116, 91, 0.12); --status-info: #C8C3B9; --status-info-bg: rgba(200, 195, 185, 0.10); /* Focus */ --focus-ring: 0 0 0 3px rgba(208, 139, 82, 0.55); --focus-ring-inverse: 0 0 0 3px rgba(15, 30, 28, 0.55); /* Gradients — Dark bleibt für beide Modi, Ivory wird zu Verdigris-Variante */ --gradient-ivory: linear-gradient(180deg, #1A2E2A 0%, #0F1E1C 100%); /* Komponenten-Tokens — Surfaces ziehen mit */ --control-bg: #1A2E2A; --control-bg-disabled: #14241F; --card-bg: #1A2E2A; --sidebar-bg: #1A2E2A; --sidebar-item-active-bg: var(--accent-soft); --sidebar-item-active-color: var(--accent); --progress-track: rgba(245, 240, 232, 0.10); /* v3-Komponenten */ --appshell-header-bg: #1A2E2A; --appshell-sidebar-bg: #1A2E2A; --drawer-bg: #1A2E2A; --toast-bg: #F5F0E8; --toast-fg: #0F1E1C; --tooltip-bg: #F5F0E8; --tooltip-fg: #0F1E1C; --avatar-bg: rgba(208, 139, 82, 0.20); --avatar-fg: #D08B52; --avatar-border: 2px solid #1A2E2A; --kbd-bg: #14241F; --kbd-fg: var(--text-secondary); --kbd-border: 1px solid var(--border-medium); --kbd-shadow: 0 1px 0 rgba(0,0,0,0.4); --skeleton-bg: rgba(245, 240, 232, 0.06); --skeleton-highlight: rgba(245, 240, 232, 0.12); --chip-bg: rgba(208, 139, 82, 0.16); --chip-fg: #E8A877; --tag-bg: #0A1715; --tag-fg: var(--text-primary); --upload-bg: #14241F; --upload-border: 2px dashed var(--border-medium); --search-bg: #14241F; --search-icon-color: var(--text-muted); --chart-grid: rgba(245, 240, 232, 0.08); --chart-tooltip-bg: #F5F0E8; --chart-tooltip-fg: #0F1E1C; } /* ========================================================================== Grundlagen — Reset + globale Typo-Defaults ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { margin: 0; font-family: var(--font-sans); font-size: var(--font-size-base); font-weight: var(--font-weight-regular); line-height: var(--line-height-relaxed); color: var(--text-primary); background: var(--surface-page); } /* Fokus-Stil — mit Offset (WCAG 2.4.7) */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--border-focus); outline-offset: var(--focus-offset); border-radius: var(--radius-sm); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--text-primary); margin: 0; } a { color: var(--text-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: var(--transition-colors); } a:hover { color: var(--text-link-hover); text-decoration-thickness: 2px; } ::selection { background: var(--accent-soft); color: var(--text-accent); } /* ========================================================================== Pointer-Tilt — dynamische 3D-Mikrobewegung über Mausposition → Aktivierung: → Optional: data-tilt-max="4" überschreibt --tilt-max für einzelne Elemente → Wirkt nur, wenn JS die Custom Properties setzt; ohne JS = neutraler Zustand ========================================================================== */ [data-tilt] { --tilt-x: 0deg; --tilt-y: 0deg; --tilt-lift: 0px; transform: perspective(var(--tilt-perspective)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(var(--tilt-lift)); transition: transform var(--tilt-duration) var(--tilt-ease), box-shadow var(--duration-base) var(--easing-out); transform-style: preserve-3d; will-change: transform; } [data-tilt]:hover { --tilt-lift: var(--tilt-lift-hover); box-shadow: var(--shadow-lg); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; transform: none !important; } }