/* ========================================================================== DOZENTO — Plattform Design Tokens v1 Stand: 2026-04-17 · Basis: Markenidentität v2.4 Dieses Stylesheet definiert alle Design-Tokens als CSS Custom Properties. Es kann als Root-Stylesheet eingebunden werden; alle Werte sind dann per var(--name) in Komponenten verfügbar. Nur Tokens ändern — keine komponentenspezifischen Regeln hinzufügen. Komponenten-Styles bleiben in ihren eigenen Dateien und greifen per var(--...) auf diese Tokens zu. ========================================================================== */ :root { /* --------------------------------------------------------------- 1 · Farben — Marken-Palette (unveränderlich) --------------------------------------------------------------- */ --color-verdigris: #1F3835; /* Primärhintergrund, Headlines auf Hell */ --color-verdigris-dark: #0F1E1C; /* Tiefe Hintergründe, Footer, Overlays */ --color-verdigris-light: #2C4D49; /* Aufgehellt für Hover, Sub-Sektionen, Hierarchie */ --color-copper: #C07840; /* Akzent, CTAs, Logo-NTO */ --color-copper-dark: #6E3E1A; /* Copper-Text auf Hell (WCAG 8:1) */ --color-ivory: #F5F0E8; /* Heller Hintergrund, Text auf Dunkel */ --color-ivory-dark: #E8E0D4; /* Trennlinien, Borders auf Hell */ --color-warm-white: #FDFAF6; /* Maximale Helligkeit — sparsam */ /* --------------------------------------------------------------- 2 · Farben — Semantisch (Rollen) → in Komponenten IMMER die semantischen Tokens nutzen, nicht die Marken-Hexwerte direkt referenzieren. --------------------------------------------------------------- */ /* Oberflächen (Hell-Modus) */ --surface-page: var(--color-ivory); /* Seiten-Background */ --surface-raised: var(--color-warm-white); /* Cards, Panels */ --surface-sunken: #EDE6DB; /* Eingesunkene Felder (Input-BG) */ --surface-inverse: var(--color-verdigris); /* Dunkle Flächen auf Hell */ --surface-overlay: rgba(15, 30, 28, 0.72); /* Modal-Backdrop */ /* Text */ --text-primary: var(--color-verdigris); /* Fließtext, Headlines */ --text-secondary: #4A6460; /* Sekundärtext, Meta */ --text-muted: #7D8F8C; /* Hilfstext, Captions */ --text-on-dark: var(--color-ivory); /* Text auf Verdigris */ --text-on-copper: #FFFFFF; /* Text auf Copper-BG */ --text-accent: var(--color-copper-dark); /* Copper-Text auf Hell */ --text-link: var(--color-copper-dark); --text-link-hover: var(--color-copper); /* Rahmen */ --border-subtle: var(--color-ivory-dark); /* Karten, Inputs default */ --border-medium: #D9D0C2; /* Sichtbare Section-Trenner, Tabellen-Linien */ --border-strong: rgba(31, 56, 53, 0.18); /* Aktive Trennlinien */ --border-focus: var(--color-copper); /* Focus-Ring */ --border-inverse: rgba(245, 240, 232, 0.12); /* Borders auf Dunkel */ /* Accent (primärer Interaktionsanker) */ --accent: var(--color-copper); --accent-hover: #D08B52; --accent-active: #A86830; --accent-soft: rgba(192, 120, 64, 0.10); /* Soft-Hover, Highlight-BG */ --accent-softer: rgba(192, 120, 64, 0.06); /* Status-Farben — aus der Palette abgeleitet, keine Fremdtöne */ --status-success: #5E8B5A; /* gedecktes Moos-Grün */ --status-success-bg: rgba(94, 139, 90, 0.10); --status-warning: var(--color-copper); --status-warning-bg: rgba(192, 120, 64, 0.12); --status-danger: #B4543C; /* warmes Rot-Braun */ --status-danger-bg: rgba(180, 84, 60, 0.10); --status-info: #4A6460; /* Verdigris-Ton */ --status-info-bg: rgba(74, 100, 96, 0.08); /* Focus-Ring (Fokus-Styling für Tastatur-Navigation) */ --focus-ring: 0 0 0 3px rgba(192, 120, 64, 0.35); --focus-ring-inverse: 0 0 0 3px rgba(245, 240, 232, 0.40); /* --------------------------------------------------------------- 3 · Gradients (aus der Markenidentität) --------------------------------------------------------------- */ --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 --------------------------------------------------------------- */ --font-sans: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Courier New', ui-monospace, Consolas, monospace; /* Type Scale (modular, 1.250 — Major Third) */ --font-size-2xs: 10px; /* Meta, fine-print */ --font-size-xs: 11px; /* Badges, Tags */ --font-size-sm: 13px; /* Sekundärtext, UI-Labels */ --font-size-base: 14px; /* Fließtext (DOZENTO-Standard) */ --font-size-md: 15px; /* Input-Text */ --font-size-lg: 16px; /* Buttons, betonte Body */ --font-size-xl: 18px; /* Subheadlines */ --font-size-2xl: 22px; /* h3 */ --font-size-3xl: 26px; /* h2 / Wordmark im UI */ --font-size-4xl: 32px; /* h1 Seitentitel */ --font-size-5xl: 44px; /* Hero Headline */ /* Font Weights */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Line Heights */ --line-height-tight: 1.15; /* Headlines */ --line-height-snug: 1.35; /* Subheads */ --line-height-normal: 1.5; /* UI-Text */ --line-height-relaxed: 1.7; /* Fließtext */ /* Letter Spacing */ --tracking-tighter: -0.8px; /* Große Headlines */ --tracking-tight: -0.5px; /* h1 / h2 */ --tracking-normal: 0; --tracking-wide: 0.3px; /* Buttons, Labels */ --tracking-wider: 2px; /* Claim, Subheads */ --tracking-widest: 3px; /* Monospace-Section-Labels */ /* --------------------------------------------------------------- 5 · Spacing — 4px-Grid --------------------------------------------------------------- */ --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 --------------------------------------------------------------- */ --radius-xs: 4px; /* Tags, kleine Badges */ --radius-sm: 6px; /* Favicon-Radius, Inputs klein */ --radius-md: 8px; /* Buttons, Inputs Standard */ --radius-lg: 14px; /* Cards, Panels, Modals */ --radius-xl: 16px; /* Hero-Cards, Feature-Panels */ --radius-2xl: 24px; /* Große Module */ --radius-pill: 999px; /* Chips, Avatar, Pill-Buttons */ /* --------------------------------------------------------------- 7 · Schatten → alle Schatten mit Verdigris-Ton für markenkonsistente Tiefe --------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(15, 30, 28, 0.05), 0 1px 1px rgba(15, 30, 28, 0.04); --shadow-sm: 0 1px 3px rgba(15, 30, 28, 0.07), 0 1px 2px rgba(15, 30, 28, 0.05); --shadow-md: 0 4px 12px rgba(15, 30, 28, 0.09), 0 2px 4px rgba(15, 30, 28, 0.05); --shadow-lg: 0 12px 32px rgba(15, 30, 28, 0.14), 0 4px 8px rgba(15, 30, 28, 0.07); --shadow-xl: 0 24px 48px rgba(15, 30, 28, 0.18), 0 8px 16px rgba(15, 30, 28, 0.08); /* Inset — für eingesunkene Flächen */ --shadow-inset: inset 0 1px 2px rgba(31, 56, 53, 0.08); /* Copper-Glow — nur für CTAs, sparsam einsetzen */ --shadow-accent: 0 6px 18px rgba(192, 120, 64, 0.28); /* --------------------------------------------------------------- 8 · Transitions & Motion --------------------------------------------------------------- */ --duration-instant: 80ms; --duration-fast: 150ms; /* Default für Hover */ --duration-base: 220ms; /* Default für State-Wechsel */ --duration-slow: 320ms; /* Modal-Ein-/Ausblendung */ --easing-standard: cubic-bezier(0.2, 0, 0.2, 1); /* Default */ --easing-out: cubic-bezier(0.16, 1, 0.3, 1); /* Einblenden */ --easing-in: cubic-bezier(0.4, 0, 1, 1); /* Ausblenden */ --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* sparsam */ /* Standard-Transition für die meisten UI-Zustände */ --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 — Layer-System --------------------------------------------------------------- */ --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; /* Grain-Overlay, Skiplinks */ /* --------------------------------------------------------------- 10 · Layout-Tokens --------------------------------------------------------------- */ --sidebar-width: 240px; --sidebar-width-collapsed: 64px; --header-height: 64px; --content-max-width: 1280px; --content-gutter: var(--space-7); /* 32px */ --content-gutter-sm: var(--space-4); /* 16px Mobile */ /* Breakpoints (zur Referenz — CSS selbst nutzt @media direkt) */ --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; /* --------------------------------------------------------------- 11 · Komponenten-Tokens (aggregiert) → sinnvoll, wenn eine Komponente mehrfach genutzt wird; vereinfacht späteres Re-Theming. --------------------------------------------------------------- */ /* Button */ --btn-radius: var(--radius-md); --btn-padding-y: 10px; --btn-padding-x: 20px; --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); /* Input / Form-Controls */ --control-height: 42px; --control-height-sm: 34px; --control-height-lg: 52px; --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 */ --card-radius: var(--radius-lg); --card-padding: var(--space-7); /* 32px */ --card-padding-compact: var(--space-5); /* 20px */ --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 */ --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 / Indicator */ --progress-height: 6px; --progress-radius: var(--radius-pill); --progress-track: var(--color-ivory-dark); --progress-fill: var(--gradient-copper); } /* ========================================================================== Grundlagen — Reset light + globale Typo-Defaults Nur Basis-Ebene. Keine Komponenten. ========================================================================== */ *, *::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); } /* Standard-Fokus-Stil — überall konsistent */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } /* Heading-Defaults — konkrete Styles stehen in den Komponenten */ 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; } /* Links — Default im Fließtext */ 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); } /* Selektionsfarbe */ ::selection { background: var(--accent-soft); color: var(--text-accent); } /* Reduced Motion */ @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; } }