/* ========================================================================== UTILITIES.CSS — Teil 1: Nicht-responsive Utilities Reines CSS. Kein SCSS, kein Build-Step. Inhaltsverzeichnis: 1. Farben 1a. Color Tokens (color-mix Varianten, Auto-Contrast, Opacity) 1b. Textfarben (text-*) 1c. Theme (bg + passende Textfarbe + Opacity-Varianten) 1d. Border-Farben 1e. Interactive Utilities (Farben) 1f. Interactive Utilities (Generisch via -custom) 1g. Group-Hover (Parent → Kind: Textfarben, Filter, Opacity, Visibility, Transforms) 2. Typografie (font-*, text-*, leading-*, tracking-*) 3. Border & Outline (border, rounded, ring, divide) 4. Schatten & Effekte (shadow, opacity, blur, backdrop) 5. Transitions, Transforms & Animations 5a. Transitions (transition-*, duration-*, ease-*, delay-*) 5b. Animation Presets (animate-spin, animate-ping, animate-pulse, animate-bounce) 5c. Transforms (Individuelle Properties: scale, rotate, translate) 5d. Centering Shortcuts (center-xy, center-x, center-y) 6. Interaktiv (cursor, pointer-events, user-select, scroll) 7. SVG (fill, stroke) 8. Accessibility (sr-only) 9. Formular-Utilities (accent-color, caret-color, placeholder) 10. Icon-System — Basis-Klasse (.icon) 11. Overlay-System (::before basiert, customizable) 12. Gradient-Utilities (Richtung + Custom Properties) 13. Section-Spacing (responsive, 4px-Grid) 14. Global Defaults (Body Max-Width) ========================================================================== */ /* ========================================================================== 1. FARBEN Vereinfacht: Nutzt die zusammengesetzten CMS-Variablen direkt (--color-primary statt manuelle HSL-Rekonstruktion). color-mix(in oklch) für alle Varianten: - brighter : 40% weiß - bright : 20% weiß - (base) : unverändert - dark : 20% schwarz - darker : 40% schwarz ========================================================================== */ /* -------------------------------------------------------------------------- 1a. COLOR TOKENS — Varianten als Custom Properties -------------------------------------------------------------------------- */ :root { /* --- Primary Varianten --- */ --color-primary-brighter: color-mix(in oklch, var(--color-primary), white 40%); --color-primary-bright: color-mix(in oklch, var(--color-primary), white 20%); --color-primary-dark: color-mix(in oklch, var(--color-primary), black 20%); --color-primary-darker: color-mix(in oklch, var(--color-primary), black 40%); /* --- Secondary Varianten --- */ --color-secondary-brighter: color-mix(in oklch, var(--color-secondary), white 40%); --color-secondary-bright: color-mix(in oklch, var(--color-secondary), white 20%); --color-secondary-dark: color-mix(in oklch, var(--color-secondary), black 20%); --color-secondary-darker: color-mix(in oklch, var(--color-secondary), black 40%); /* --- Tertiary Varianten --- */ --color-tertiary-brighter: color-mix(in oklch, var(--color-tertiary), white 40%); --color-tertiary-bright: color-mix(in oklch, var(--color-tertiary), white 20%); --color-tertiary-dark: color-mix(in oklch, var(--color-tertiary), black 20%); --color-tertiary-darker: color-mix(in oklch, var(--color-tertiary), black 40%); /* --- Background Varianten --- */ --color-background-brighter: color-mix(in oklch, var(--color-background), white 40%); --color-background-bright: color-mix(in oklch, var(--color-background), white 20%); --color-background-dark: color-mix(in oklch, var(--color-background), black 20%); --color-background-darker: color-mix(in oklch, var(--color-background), black 40%); /* --- Surface Varianten --- */ --color-surface-brighter: color-mix(in oklch, var(--color-surface), white 40%); --color-surface-bright: color-mix(in oklch, var(--color-surface), white 20%); --color-surface-dark: color-mix(in oklch, var(--color-surface), black 20%); --color-surface-darker: color-mix(in oklch, var(--color-surface), black 40%); /* --- Surface Elevated Varianten --- */ --color-surface-elevated-brighter: color-mix(in oklch, var(--color-surface-elevated), white 40%); --color-surface-elevated-bright: color-mix(in oklch, var(--color-surface-elevated), white 20%); --color-surface-elevated-dark: color-mix(in oklch, var(--color-surface-elevated), black 20%); --color-surface-elevated-darker: color-mix(in oklch, var(--color-surface-elevated), black 40%); /* --- Warning Varianten --- */ --color-warning-brighter: color-mix(in oklch, var(--color-warning), white 40%); --color-warning-bright: color-mix(in oklch, var(--color-warning), white 20%); --color-warning-dark: color-mix(in oklch, var(--color-warning), black 20%); --color-warning-darker: color-mix(in oklch, var(--color-warning), black 40%); /* --- Success Varianten --- */ --color-success-brighter: color-mix(in oklch, var(--color-success), white 40%); --color-success-bright: color-mix(in oklch, var(--color-success), white 20%); --color-success-dark: color-mix(in oklch, var(--color-success), black 20%); --color-success-darker: color-mix(in oklch, var(--color-success), black 40%); /* --- Danger Varianten --- */ --color-danger-brighter: color-mix(in oklch, var(--color-danger), white 40%); --color-danger-bright: color-mix(in oklch, var(--color-danger), white 20%); --color-danger-dark: color-mix(in oklch, var(--color-danger), black 20%); --color-danger-darker: color-mix(in oklch, var(--color-danger), black 40%); /* --- Border Varianten --- */ --color-border-brighter: color-mix(in oklch, var(--color-border), white 40%); --color-border-bright: color-mix(in oklch, var(--color-border), white 20%); --color-border-dark: color-mix(in oklch, var(--color-border), black 20%); --color-border-darker: color-mix(in oklch, var(--color-border), black 40%); /* --- Border Default Channel --- Indirekte Variable für .border + .border-{color} Kombination. .border nutzt var(--border-color) statt hardcoded Farbe. .border-{color} überschreibt nur diese Variable → kein Shorthand-Konflikt. */ --border-color: var(--color-border); /* --- Auto-Contrast Textfarben --- Berechnet automatisch schwarz oder weiß basierend auf der Hintergrund-Lightness via Relative Color Syntax. Formel: oklch(from clamp(0, (0.6 - l) * 1000, 1) 0 0) - L > 0.6 (heller Hintergrund) → clamp ergibt 0 → schwarzer Text - L < 0.6 (dunkler Hintergrund) → clamp ergibt 1 → weißer Text Schwellenwert 0.6 ist optimiert für WCAG AA Kontrast. Anpassbar pro Projekt: höher = früher zu schwarz, niedriger = länger weiß. */ /* Primary */ --color-primary-brighter-contrast: oklch(from var(--color-primary-brighter) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-primary-bright-contrast: oklch(from var(--color-primary-bright) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-primary-dark-contrast: oklch(from var(--color-primary-dark) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-primary-darker-contrast: oklch(from var(--color-primary-darker) clamp(0, (0.6 - l) * 1000, 1) 0 0); /* Secondary */ --color-secondary-brighter-contrast: oklch(from var(--color-secondary-brighter) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-secondary-bright-contrast: oklch(from var(--color-secondary-bright) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-secondary-dark-contrast: oklch(from var(--color-secondary-dark) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-secondary-darker-contrast: oklch(from var(--color-secondary-darker) clamp(0, (0.6 - l) * 1000, 1) 0 0); /* Tertiary */ --color-tertiary-brighter-contrast: oklch(from var(--color-tertiary-brighter) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-tertiary-bright-contrast: oklch(from var(--color-tertiary-bright) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-tertiary-dark-contrast: oklch(from var(--color-tertiary-dark) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-tertiary-darker-contrast: oklch(from var(--color-tertiary-darker) clamp(0, (0.6 - l) * 1000, 1) 0 0); /* Background */ --color-background-brighter-contrast: oklch(from var(--color-background-brighter) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-background-bright-contrast: oklch(from var(--color-background-bright) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-background-dark-contrast: oklch(from var(--color-background-dark) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-background-darker-contrast: oklch(from var(--color-background-darker) clamp(0, (0.6 - l) * 1000, 1) 0 0); /* Surface */ --color-surface-brighter-contrast: oklch(from var(--color-surface-brighter) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-surface-bright-contrast: oklch(from var(--color-surface-bright) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-surface-dark-contrast: oklch(from var(--color-surface-dark) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-surface-darker-contrast: oklch(from var(--color-surface-darker) clamp(0, (0.6 - l) * 1000, 1) 0 0); /* Surface Elevated */ --color-surface-elevated-brighter-contrast: oklch(from var(--color-surface-elevated-brighter) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-surface-elevated-bright-contrast: oklch(from var(--color-surface-elevated-bright) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-surface-elevated-dark-contrast: oklch(from var(--color-surface-elevated-dark) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-surface-elevated-darker-contrast: oklch(from var(--color-surface-elevated-darker) clamp(0, (0.6 - l) * 1000, 1) 0 0); /* Warning */ --color-warning-brighter-contrast: oklch(from var(--color-warning-brighter) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-warning-bright-contrast: oklch(from var(--color-warning-bright) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-warning-dark-contrast: oklch(from var(--color-warning-dark) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-warning-darker-contrast: oklch(from var(--color-warning-darker) clamp(0, (0.6 - l) * 1000, 1) 0 0); /* Success */ --color-success-brighter-contrast: oklch(from var(--color-success-brighter) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-success-bright-contrast: oklch(from var(--color-success-bright) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-success-dark-contrast: oklch(from var(--color-success-dark) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-success-darker-contrast: oklch(from var(--color-success-darker) clamp(0, (0.6 - l) * 1000, 1) 0 0); /* Danger */ --color-danger-brighter-contrast: oklch(from var(--color-danger-brighter) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-danger-bright-contrast: oklch(from var(--color-danger-bright) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-danger-dark-contrast: oklch(from var(--color-danger-dark) clamp(0, (0.6 - l) * 1000, 1) 0 0); --color-danger-darker-contrast: oklch(from var(--color-danger-darker) clamp(0, (0.6 - l) * 1000, 1) 0 0); /* --- Opacity Varianten (Farbe + Transparenz) --- */ --color-primary-opacity-5: color-mix(in oklch, var(--color-primary), transparent 95%); --color-primary-opacity-10: color-mix(in oklch, var(--color-primary), transparent 90%); --color-primary-opacity-15: color-mix(in oklch, var(--color-primary), transparent 85%); --color-primary-opacity-20: color-mix(in oklch, var(--color-primary), transparent 80%); --color-primary-opacity-25: color-mix(in oklch, var(--color-primary), transparent 75%); --color-primary-opacity-30: color-mix(in oklch, var(--color-primary), transparent 70%); --color-primary-opacity-40: color-mix(in oklch, var(--color-primary), transparent 60%); --color-primary-opacity-50: color-mix(in oklch, var(--color-primary), transparent 50%); --color-primary-opacity-60: color-mix(in oklch, var(--color-primary), transparent 40%); --color-primary-opacity-70: color-mix(in oklch, var(--color-primary), transparent 30%); --color-primary-opacity-80: color-mix(in oklch, var(--color-primary), transparent 20%); --color-primary-opacity-90: color-mix(in oklch, var(--color-primary), transparent 10%); --color-secondary-opacity-5: color-mix(in oklch, var(--color-secondary), transparent 95%); --color-secondary-opacity-10: color-mix(in oklch, var(--color-secondary), transparent 90%); --color-secondary-opacity-15: color-mix(in oklch, var(--color-secondary), transparent 85%); --color-secondary-opacity-20: color-mix(in oklch, var(--color-secondary), transparent 80%); --color-secondary-opacity-25: color-mix(in oklch, var(--color-secondary), transparent 75%); --color-secondary-opacity-30: color-mix(in oklch, var(--color-secondary), transparent 70%); --color-secondary-opacity-40: color-mix(in oklch, var(--color-secondary), transparent 60%); --color-secondary-opacity-50: color-mix(in oklch, var(--color-secondary), transparent 50%); --color-secondary-opacity-60: color-mix(in oklch, var(--color-secondary), transparent 40%); --color-secondary-opacity-70: color-mix(in oklch, var(--color-secondary), transparent 30%); --color-secondary-opacity-80: color-mix(in oklch, var(--color-secondary), transparent 20%); --color-secondary-opacity-90: color-mix(in oklch, var(--color-secondary), transparent 10%); --color-tertiary-opacity-5: color-mix(in oklch, var(--color-tertiary), transparent 95%); --color-tertiary-opacity-10: color-mix(in oklch, var(--color-tertiary), transparent 90%); --color-tertiary-opacity-15: color-mix(in oklch, var(--color-tertiary), transparent 85%); --color-tertiary-opacity-20: color-mix(in oklch, var(--color-tertiary), transparent 80%); --color-tertiary-opacity-25: color-mix(in oklch, var(--color-tertiary), transparent 75%); --color-tertiary-opacity-30: color-mix(in oklch, var(--color-tertiary), transparent 70%); --color-tertiary-opacity-40: color-mix(in oklch, var(--color-tertiary), transparent 60%); --color-tertiary-opacity-50: color-mix(in oklch, var(--color-tertiary), transparent 50%); --color-tertiary-opacity-60: color-mix(in oklch, var(--color-tertiary), transparent 40%); --color-tertiary-opacity-70: color-mix(in oklch, var(--color-tertiary), transparent 30%); --color-tertiary-opacity-80: color-mix(in oklch, var(--color-tertiary), transparent 20%); --color-tertiary-opacity-90: color-mix(in oklch, var(--color-tertiary), transparent 10%); --color-background-opacity-5: color-mix(in oklch, var(--color-background), transparent 95%); --color-background-opacity-10: color-mix(in oklch, var(--color-background), transparent 90%); --color-background-opacity-15: color-mix(in oklch, var(--color-background), transparent 85%); --color-background-opacity-20: color-mix(in oklch, var(--color-background), transparent 80%); --color-background-opacity-25: color-mix(in oklch, var(--color-background), transparent 75%); --color-background-opacity-30: color-mix(in oklch, var(--color-background), transparent 70%); --color-background-opacity-40: color-mix(in oklch, var(--color-background), transparent 60%); --color-background-opacity-50: color-mix(in oklch, var(--color-background), transparent 50%); --color-background-opacity-60: color-mix(in oklch, var(--color-background), transparent 40%); --color-background-opacity-70: color-mix(in oklch, var(--color-background), transparent 30%); --color-background-opacity-80: color-mix(in oklch, var(--color-background), transparent 20%); --color-background-opacity-90: color-mix(in oklch, var(--color-background), transparent 10%); --color-surface-opacity-5: color-mix(in oklch, var(--color-surface), transparent 95%); --color-surface-opacity-10: color-mix(in oklch, var(--color-surface), transparent 90%); --color-surface-opacity-15: color-mix(in oklch, var(--color-surface), transparent 85%); --color-surface-opacity-20: color-mix(in oklch, var(--color-surface), transparent 80%); --color-surface-opacity-25: color-mix(in oklch, var(--color-surface), transparent 75%); --color-surface-opacity-30: color-mix(in oklch, var(--color-surface), transparent 70%); --color-surface-opacity-40: color-mix(in oklch, var(--color-surface), transparent 60%); --color-surface-opacity-50: color-mix(in oklch, var(--color-surface), transparent 50%); --color-surface-opacity-60: color-mix(in oklch, var(--color-surface), transparent 40%); --color-surface-opacity-70: color-mix(in oklch, var(--color-surface), transparent 30%); --color-surface-opacity-80: color-mix(in oklch, var(--color-surface), transparent 20%); --color-surface-opacity-90: color-mix(in oklch, var(--color-surface), transparent 10%); --color-surface-elevated-opacity-5: color-mix(in oklch, var(--color-surface-elevated), transparent 95%); --color-surface-elevated-opacity-10: color-mix(in oklch, var(--color-surface-elevated), transparent 90%); --color-surface-elevated-opacity-15: color-mix(in oklch, var(--color-surface-elevated), transparent 85%); --color-surface-elevated-opacity-20: color-mix(in oklch, var(--color-surface-elevated), transparent 80%); --color-surface-elevated-opacity-25: color-mix(in oklch, var(--color-surface-elevated), transparent 75%); --color-surface-elevated-opacity-30: color-mix(in oklch, var(--color-surface-elevated), transparent 70%); --color-surface-elevated-opacity-40: color-mix(in oklch, var(--color-surface-elevated), transparent 60%); --color-surface-elevated-opacity-50: color-mix(in oklch, var(--color-surface-elevated), transparent 50%); --color-surface-elevated-opacity-60: color-mix(in oklch, var(--color-surface-elevated), transparent 40%); --color-surface-elevated-opacity-70: color-mix(in oklch, var(--color-surface-elevated), transparent 30%); --color-surface-elevated-opacity-80: color-mix(in oklch, var(--color-surface-elevated), transparent 20%); --color-surface-elevated-opacity-90: color-mix(in oklch, var(--color-surface-elevated), transparent 10%); --color-warning-opacity-5: color-mix(in oklch, var(--color-warning), transparent 95%); --color-warning-opacity-10: color-mix(in oklch, var(--color-warning), transparent 90%); --color-warning-opacity-15: color-mix(in oklch, var(--color-warning), transparent 85%); --color-warning-opacity-20: color-mix(in oklch, var(--color-warning), transparent 80%); --color-warning-opacity-25: color-mix(in oklch, var(--color-warning), transparent 75%); --color-warning-opacity-30: color-mix(in oklch, var(--color-warning), transparent 70%); --color-warning-opacity-40: color-mix(in oklch, var(--color-warning), transparent 60%); --color-warning-opacity-50: color-mix(in oklch, var(--color-warning), transparent 50%); --color-warning-opacity-60: color-mix(in oklch, var(--color-warning), transparent 40%); --color-warning-opacity-70: color-mix(in oklch, var(--color-warning), transparent 30%); --color-warning-opacity-80: color-mix(in oklch, var(--color-warning), transparent 20%); --color-warning-opacity-90: color-mix(in oklch, var(--color-warning), transparent 10%); --color-success-opacity-5: color-mix(in oklch, var(--color-success), transparent 95%); --color-success-opacity-10: color-mix(in oklch, var(--color-success), transparent 90%); --color-success-opacity-15: color-mix(in oklch, var(--color-success), transparent 85%); --color-success-opacity-20: color-mix(in oklch, var(--color-success), transparent 80%); --color-success-opacity-25: color-mix(in oklch, var(--color-success), transparent 75%); --color-success-opacity-30: color-mix(in oklch, var(--color-success), transparent 70%); --color-success-opacity-40: color-mix(in oklch, var(--color-success), transparent 60%); --color-success-opacity-50: color-mix(in oklch, var(--color-success), transparent 50%); --color-success-opacity-60: color-mix(in oklch, var(--color-success), transparent 40%); --color-success-opacity-70: color-mix(in oklch, var(--color-success), transparent 30%); --color-success-opacity-80: color-mix(in oklch, var(--color-success), transparent 20%); --color-success-opacity-90: color-mix(in oklch, var(--color-success), transparent 10%); --color-danger-opacity-5: color-mix(in oklch, var(--color-danger), transparent 95%); --color-danger-opacity-10: color-mix(in oklch, var(--color-danger), transparent 90%); --color-danger-opacity-15: color-mix(in oklch, var(--color-danger), transparent 85%); --color-danger-opacity-20: color-mix(in oklch, var(--color-danger), transparent 80%); --color-danger-opacity-25: color-mix(in oklch, var(--color-danger), transparent 75%); --color-danger-opacity-30: color-mix(in oklch, var(--color-danger), transparent 70%); --color-danger-opacity-40: color-mix(in oklch, var(--color-danger), transparent 60%); --color-danger-opacity-50: color-mix(in oklch, var(--color-danger), transparent 50%); --color-danger-opacity-60: color-mix(in oklch, var(--color-danger), transparent 40%); --color-danger-opacity-70: color-mix(in oklch, var(--color-danger), transparent 30%); --color-danger-opacity-80: color-mix(in oklch, var(--color-danger), transparent 20%); --color-danger-opacity-90: color-mix(in oklch, var(--color-danger), transparent 10%); /* --- Border Opacity Varianten --- */ --color-border-opacity-5: color-mix(in oklch, var(--color-border), transparent 95%); --color-border-opacity-10: color-mix(in oklch, var(--color-border), transparent 90%); --color-border-opacity-20: color-mix(in oklch, var(--color-border), transparent 80%); --color-border-opacity-30: color-mix(in oklch, var(--color-border), transparent 70%); --color-border-opacity-50: color-mix(in oklch, var(--color-border), transparent 50%); /* --- Text-Color Opacity Varianten --- Symmetrisch zu den Hintergrund-Opacity-Tokens fuer alle Rollen mit -text-Pendant. Genutzt z.B. fuer Placeholder, gedimmten Text, Text-Shadow auf Bildern. */ --color-primary-text-opacity-5: color-mix(in oklch, var(--color-primary-text), transparent 95%); --color-primary-text-opacity-10: color-mix(in oklch, var(--color-primary-text), transparent 90%); --color-primary-text-opacity-15: color-mix(in oklch, var(--color-primary-text), transparent 85%); --color-primary-text-opacity-20: color-mix(in oklch, var(--color-primary-text), transparent 80%); --color-primary-text-opacity-25: color-mix(in oklch, var(--color-primary-text), transparent 75%); --color-primary-text-opacity-30: color-mix(in oklch, var(--color-primary-text), transparent 70%); --color-primary-text-opacity-40: color-mix(in oklch, var(--color-primary-text), transparent 60%); --color-primary-text-opacity-50: color-mix(in oklch, var(--color-primary-text), transparent 50%); --color-primary-text-opacity-60: color-mix(in oklch, var(--color-primary-text), transparent 40%); --color-primary-text-opacity-70: color-mix(in oklch, var(--color-primary-text), transparent 30%); --color-primary-text-opacity-80: color-mix(in oklch, var(--color-primary-text), transparent 20%); --color-primary-text-opacity-90: color-mix(in oklch, var(--color-primary-text), transparent 10%); --color-secondary-text-opacity-5: color-mix(in oklch, var(--color-secondary-text), transparent 95%); --color-secondary-text-opacity-10: color-mix(in oklch, var(--color-secondary-text), transparent 90%); --color-secondary-text-opacity-15: color-mix(in oklch, var(--color-secondary-text), transparent 85%); --color-secondary-text-opacity-20: color-mix(in oklch, var(--color-secondary-text), transparent 80%); --color-secondary-text-opacity-25: color-mix(in oklch, var(--color-secondary-text), transparent 75%); --color-secondary-text-opacity-30: color-mix(in oklch, var(--color-secondary-text), transparent 70%); --color-secondary-text-opacity-40: color-mix(in oklch, var(--color-secondary-text), transparent 60%); --color-secondary-text-opacity-50: color-mix(in oklch, var(--color-secondary-text), transparent 50%); --color-secondary-text-opacity-60: color-mix(in oklch, var(--color-secondary-text), transparent 40%); --color-secondary-text-opacity-70: color-mix(in oklch, var(--color-secondary-text), transparent 30%); --color-secondary-text-opacity-80: color-mix(in oklch, var(--color-secondary-text), transparent 20%); --color-secondary-text-opacity-90: color-mix(in oklch, var(--color-secondary-text), transparent 10%); --color-tertiary-text-opacity-5: color-mix(in oklch, var(--color-tertiary-text), transparent 95%); --color-tertiary-text-opacity-10: color-mix(in oklch, var(--color-tertiary-text), transparent 90%); --color-tertiary-text-opacity-15: color-mix(in oklch, var(--color-tertiary-text), transparent 85%); --color-tertiary-text-opacity-20: color-mix(in oklch, var(--color-tertiary-text), transparent 80%); --color-tertiary-text-opacity-25: color-mix(in oklch, var(--color-tertiary-text), transparent 75%); --color-tertiary-text-opacity-30: color-mix(in oklch, var(--color-tertiary-text), transparent 70%); --color-tertiary-text-opacity-40: color-mix(in oklch, var(--color-tertiary-text), transparent 60%); --color-tertiary-text-opacity-50: color-mix(in oklch, var(--color-tertiary-text), transparent 50%); --color-tertiary-text-opacity-60: color-mix(in oklch, var(--color-tertiary-text), transparent 40%); --color-tertiary-text-opacity-70: color-mix(in oklch, var(--color-tertiary-text), transparent 30%); --color-tertiary-text-opacity-80: color-mix(in oklch, var(--color-tertiary-text), transparent 20%); --color-tertiary-text-opacity-90: color-mix(in oklch, var(--color-tertiary-text), transparent 10%); --color-background-text-opacity-5: color-mix(in oklch, var(--color-background-text), transparent 95%); --color-background-text-opacity-10: color-mix(in oklch, var(--color-background-text), transparent 90%); --color-background-text-opacity-15: color-mix(in oklch, var(--color-background-text), transparent 85%); --color-background-text-opacity-20: color-mix(in oklch, var(--color-background-text), transparent 80%); --color-background-text-opacity-25: color-mix(in oklch, var(--color-background-text), transparent 75%); --color-background-text-opacity-30: color-mix(in oklch, var(--color-background-text), transparent 70%); --color-background-text-opacity-40: color-mix(in oklch, var(--color-background-text), transparent 60%); --color-background-text-opacity-50: color-mix(in oklch, var(--color-background-text), transparent 50%); --color-background-text-opacity-60: color-mix(in oklch, var(--color-background-text), transparent 40%); --color-background-text-opacity-70: color-mix(in oklch, var(--color-background-text), transparent 30%); --color-background-text-opacity-80: color-mix(in oklch, var(--color-background-text), transparent 20%); --color-background-text-opacity-90: color-mix(in oklch, var(--color-background-text), transparent 10%); --color-surface-text-opacity-5: color-mix(in oklch, var(--color-surface-text), transparent 95%); --color-surface-text-opacity-10: color-mix(in oklch, var(--color-surface-text), transparent 90%); --color-surface-text-opacity-15: color-mix(in oklch, var(--color-surface-text), transparent 85%); --color-surface-text-opacity-20: color-mix(in oklch, var(--color-surface-text), transparent 80%); --color-surface-text-opacity-25: color-mix(in oklch, var(--color-surface-text), transparent 75%); --color-surface-text-opacity-30: color-mix(in oklch, var(--color-surface-text), transparent 70%); --color-surface-text-opacity-40: color-mix(in oklch, var(--color-surface-text), transparent 60%); --color-surface-text-opacity-50: color-mix(in oklch, var(--color-surface-text), transparent 50%); --color-surface-text-opacity-60: color-mix(in oklch, var(--color-surface-text), transparent 40%); --color-surface-text-opacity-70: color-mix(in oklch, var(--color-surface-text), transparent 30%); --color-surface-text-opacity-80: color-mix(in oklch, var(--color-surface-text), transparent 20%); --color-surface-text-opacity-90: color-mix(in oklch, var(--color-surface-text), transparent 10%); --color-surface-elevated-text-opacity-5: color-mix(in oklch, var(--color-surface-elevated-text), transparent 95%); --color-surface-elevated-text-opacity-10: color-mix(in oklch, var(--color-surface-elevated-text), transparent 90%); --color-surface-elevated-text-opacity-15: color-mix(in oklch, var(--color-surface-elevated-text), transparent 85%); --color-surface-elevated-text-opacity-20: color-mix(in oklch, var(--color-surface-elevated-text), transparent 80%); --color-surface-elevated-text-opacity-25: color-mix(in oklch, var(--color-surface-elevated-text), transparent 75%); --color-surface-elevated-text-opacity-30: color-mix(in oklch, var(--color-surface-elevated-text), transparent 70%); --color-surface-elevated-text-opacity-40: color-mix(in oklch, var(--color-surface-elevated-text), transparent 60%); --color-surface-elevated-text-opacity-50: color-mix(in oklch, var(--color-surface-elevated-text), transparent 50%); --color-surface-elevated-text-opacity-60: color-mix(in oklch, var(--color-surface-elevated-text), transparent 40%); --color-surface-elevated-text-opacity-70: color-mix(in oklch, var(--color-surface-elevated-text), transparent 30%); --color-surface-elevated-text-opacity-80: color-mix(in oklch, var(--color-surface-elevated-text), transparent 20%); --color-surface-elevated-text-opacity-90: color-mix(in oklch, var(--color-surface-elevated-text), transparent 10%); --color-warning-text-opacity-5: color-mix(in oklch, var(--color-warning-text), transparent 95%); --color-warning-text-opacity-10: color-mix(in oklch, var(--color-warning-text), transparent 90%); --color-warning-text-opacity-15: color-mix(in oklch, var(--color-warning-text), transparent 85%); --color-warning-text-opacity-20: color-mix(in oklch, var(--color-warning-text), transparent 80%); --color-warning-text-opacity-25: color-mix(in oklch, var(--color-warning-text), transparent 75%); --color-warning-text-opacity-30: color-mix(in oklch, var(--color-warning-text), transparent 70%); --color-warning-text-opacity-40: color-mix(in oklch, var(--color-warning-text), transparent 60%); --color-warning-text-opacity-50: color-mix(in oklch, var(--color-warning-text), transparent 50%); --color-warning-text-opacity-60: color-mix(in oklch, var(--color-warning-text), transparent 40%); --color-warning-text-opacity-70: color-mix(in oklch, var(--color-warning-text), transparent 30%); --color-warning-text-opacity-80: color-mix(in oklch, var(--color-warning-text), transparent 20%); --color-warning-text-opacity-90: color-mix(in oklch, var(--color-warning-text), transparent 10%); --color-success-text-opacity-5: color-mix(in oklch, var(--color-success-text), transparent 95%); --color-success-text-opacity-10: color-mix(in oklch, var(--color-success-text), transparent 90%); --color-success-text-opacity-15: color-mix(in oklch, var(--color-success-text), transparent 85%); --color-success-text-opacity-20: color-mix(in oklch, var(--color-success-text), transparent 80%); --color-success-text-opacity-25: color-mix(in oklch, var(--color-success-text), transparent 75%); --color-success-text-opacity-30: color-mix(in oklch, var(--color-success-text), transparent 70%); --color-success-text-opacity-40: color-mix(in oklch, var(--color-success-text), transparent 60%); --color-success-text-opacity-50: color-mix(in oklch, var(--color-success-text), transparent 50%); --color-success-text-opacity-60: color-mix(in oklch, var(--color-success-text), transparent 40%); --color-success-text-opacity-70: color-mix(in oklch, var(--color-success-text), transparent 30%); --color-success-text-opacity-80: color-mix(in oklch, var(--color-success-text), transparent 20%); --color-success-text-opacity-90: color-mix(in oklch, var(--color-success-text), transparent 10%); --color-danger-text-opacity-5: color-mix(in oklch, var(--color-danger-text), transparent 95%); --color-danger-text-opacity-10: color-mix(in oklch, var(--color-danger-text), transparent 90%); --color-danger-text-opacity-15: color-mix(in oklch, var(--color-danger-text), transparent 85%); --color-danger-text-opacity-20: color-mix(in oklch, var(--color-danger-text), transparent 80%); --color-danger-text-opacity-25: color-mix(in oklch, var(--color-danger-text), transparent 75%); --color-danger-text-opacity-30: color-mix(in oklch, var(--color-danger-text), transparent 70%); --color-danger-text-opacity-40: color-mix(in oklch, var(--color-danger-text), transparent 60%); --color-danger-text-opacity-50: color-mix(in oklch, var(--color-danger-text), transparent 50%); --color-danger-text-opacity-60: color-mix(in oklch, var(--color-danger-text), transparent 40%); --color-danger-text-opacity-70: color-mix(in oklch, var(--color-danger-text), transparent 30%); --color-danger-text-opacity-80: color-mix(in oklch, var(--color-danger-text), transparent 20%); --color-danger-text-opacity-90: color-mix(in oklch, var(--color-danger-text), transparent 10%); } /* -------------------------------------------------------------------------- 1b. TEXT FARBEN — Basis + Varianten -------------------------------------------------------------------------- */ /* Base */ .text-primary { color: var(--color-primary) !important; } .text-secondary { color: var(--color-secondary) !important; } .text-tertiary { color: var(--color-tertiary) !important; } .text-background { color: var(--color-background-text) !important; } .text-surface { color: var(--color-surface-text) !important; } .text-surface-elevated { color: var(--color-surface-elevated-text) !important; } .text-warning { color: var(--color-warning) !important; } .text-success { color: var(--color-success) !important; } .text-danger { color: var(--color-danger) !important; } .text-border { color: var(--color-border) !important; } .text-white { color: #fff !important; } .text-black { color: #000 !important; } .text-inherit { color: inherit !important; } .text-current { color: currentColor !important; } .text-transparent { color: transparent !important; } /* Varianten */ .text-primary-brighter { color: var(--color-primary-brighter) !important; } .text-primary-bright { color: var(--color-primary-bright) !important; } .text-primary-dark { color: var(--color-primary-dark) !important; } .text-primary-darker { color: var(--color-primary-darker) !important; } .text-secondary-brighter { color: var(--color-secondary-brighter) !important; } .text-secondary-bright { color: var(--color-secondary-bright) !important; } .text-secondary-dark { color: var(--color-secondary-dark) !important; } .text-secondary-darker { color: var(--color-secondary-darker) !important; } .text-tertiary-brighter { color: var(--color-tertiary-brighter) !important; } .text-tertiary-bright { color: var(--color-tertiary-bright) !important; } .text-tertiary-dark { color: var(--color-tertiary-dark) !important; } .text-tertiary-darker { color: var(--color-tertiary-darker) !important; } .text-background-brighter { color: var(--color-background-brighter) !important; } .text-background-bright { color: var(--color-background-bright) !important; } .text-background-dark { color: var(--color-background-dark) !important; } .text-background-darker { color: var(--color-background-darker) !important; } .text-surface-brighter { color: var(--color-surface-brighter) !important; } .text-surface-bright { color: var(--color-surface-bright) !important; } .text-surface-dark { color: var(--color-surface-dark) !important; } .text-surface-darker { color: var(--color-surface-darker) !important; } .text-surface-elevated-brighter { color: var(--color-surface-elevated-brighter) !important; } .text-surface-elevated-bright { color: var(--color-surface-elevated-bright) !important; } .text-surface-elevated-dark { color: var(--color-surface-elevated-dark) !important; } .text-surface-elevated-darker { color: var(--color-surface-elevated-darker) !important; } .text-warning-brighter { color: var(--color-warning-brighter) !important; } .text-warning-bright { color: var(--color-warning-bright) !important; } .text-warning-dark { color: var(--color-warning-dark) !important; } .text-warning-darker { color: var(--color-warning-darker) !important; } .text-success-brighter { color: var(--color-success-brighter) !important; } .text-success-bright { color: var(--color-success-bright) !important; } .text-success-dark { color: var(--color-success-dark) !important; } .text-success-darker { color: var(--color-success-darker) !important; } .text-danger-brighter { color: var(--color-danger-brighter) !important; } .text-danger-bright { color: var(--color-danger-bright) !important; } .text-danger-dark { color: var(--color-danger-dark) !important; } .text-danger-darker { color: var(--color-danger-darker) !important; } .text-border-brighter { color: var(--color-border-brighter) !important; } .text-border-bright { color: var(--color-border-bright) !important; } .text-border-dark { color: var(--color-border-dark) !important; } .text-border-darker { color: var(--color-border-darker) !important; } /* -------------------------------------------------------------------------- 1c. THEME — Hintergrund + passende Textfarbe in einem Schritt Architektur-Entscheidung: Keine separaten bg-* Klassen. theme-* setzt IMMER background-color + color als Paar. Vorteile: - Accessibility by Default: Kontrast ist immer gewährleistet - Weniger kognitive Last im CMS: eine Entscheidung statt zwei - Falls Textfarbe abweichen soll → text-* als Override nutzen Basis-Themes nutzen die CMS-definierten Textfarben. Varianten nutzen Auto-Contrast via Relative Color Syntax — die Textfarbe wird automatisch schwarz oder weiß, je nach Hintergrund-Lightness. Kein manuelles Nachsteuern nötig. -------------------------------------------------------------------------- */ /* Base — CMS-definierte Textfarbe (immer korrekt) */ .theme-primary { background-color: var(--color-primary) !important; color: var(--color-primary-text) !important; } .theme-secondary { background-color: var(--color-secondary) !important; color: var(--color-secondary-text) !important; } .theme-tertiary { background-color: var(--color-tertiary) !important; color: var(--color-tertiary-text) !important; } .theme-background { background-color: var(--color-background) !important; color: var(--color-background-text) !important; } .theme-surface { background-color: var(--color-surface) !important; color: var(--color-surface-text) !important; } .theme-surface-elevated { background-color: var(--color-surface-elevated) !important; color: var(--color-surface-elevated-text) !important; } .theme-warning { background-color: var(--color-warning) !important; color: var(--color-warning-text) !important; } .theme-success { background-color: var(--color-success) !important; color: var(--color-success-text) !important; } .theme-danger { background-color: var(--color-danger) !important; color: var(--color-danger-text) !important; } /* Neutral / Reset */ .theme-white { background-color: #fff !important; color: #000 !important; } .theme-black { background-color: #000 !important; color: #fff !important; } .theme-transparent { background-color: transparent !important; color: inherit !important; } /* Varianten — Auto-Contrast Textfarbe */ .theme-primary-brighter { background-color: var(--color-primary-brighter) !important; color: var(--color-primary-brighter-contrast) !important; } .theme-primary-bright { background-color: var(--color-primary-bright) !important; color: var(--color-primary-bright-contrast) !important; } .theme-primary-dark { background-color: var(--color-primary-dark) !important; color: var(--color-primary-dark-contrast) !important; } .theme-primary-darker { background-color: var(--color-primary-darker) !important; color: var(--color-primary-darker-contrast) !important; } .theme-secondary-brighter { background-color: var(--color-secondary-brighter) !important; color: var(--color-secondary-brighter-contrast) !important; } .theme-secondary-bright { background-color: var(--color-secondary-bright) !important; color: var(--color-secondary-bright-contrast) !important; } .theme-secondary-dark { background-color: var(--color-secondary-dark) !important; color: var(--color-secondary-dark-contrast) !important; } .theme-secondary-darker { background-color: var(--color-secondary-darker) !important; color: var(--color-secondary-darker-contrast) !important; } .theme-tertiary-brighter { background-color: var(--color-tertiary-brighter) !important; color: var(--color-tertiary-brighter-contrast) !important; } .theme-tertiary-bright { background-color: var(--color-tertiary-bright) !important; color: var(--color-tertiary-bright-contrast) !important; } .theme-tertiary-dark { background-color: var(--color-tertiary-dark) !important; color: var(--color-tertiary-dark-contrast) !important; } .theme-tertiary-darker { background-color: var(--color-tertiary-darker) !important; color: var(--color-tertiary-darker-contrast) !important; } .theme-background-brighter { background-color: var(--color-background-brighter) !important; color: var(--color-background-brighter-contrast) !important; } .theme-background-bright { background-color: var(--color-background-bright) !important; color: var(--color-background-bright-contrast) !important; } .theme-background-dark { background-color: var(--color-background-dark) !important; color: var(--color-background-dark-contrast) !important; } .theme-background-darker { background-color: var(--color-background-darker) !important; color: var(--color-background-darker-contrast) !important; } .theme-surface-brighter { background-color: var(--color-surface-brighter) !important; color: var(--color-surface-brighter-contrast) !important; } .theme-surface-bright { background-color: var(--color-surface-bright) !important; color: var(--color-surface-bright-contrast) !important; } .theme-surface-dark { background-color: var(--color-surface-dark) !important; color: var(--color-surface-dark-contrast) !important; } .theme-surface-darker { background-color: var(--color-surface-darker) !important; color: var(--color-surface-darker-contrast) !important; } .theme-surface-elevated-brighter { background-color: var(--color-surface-elevated-brighter) !important; color: var(--color-surface-elevated-brighter-contrast) !important; } .theme-surface-elevated-bright { background-color: var(--color-surface-elevated-bright) !important; color: var(--color-surface-elevated-bright-contrast) !important; } .theme-surface-elevated-dark { background-color: var(--color-surface-elevated-dark) !important; color: var(--color-surface-elevated-dark-contrast) !important; } .theme-surface-elevated-darker { background-color: var(--color-surface-elevated-darker) !important; color: var(--color-surface-elevated-darker-contrast) !important; } .theme-warning-brighter { background-color: var(--color-warning-brighter) !important; color: var(--color-warning-brighter-contrast) !important; } .theme-warning-bright { background-color: var(--color-warning-bright) !important; color: var(--color-warning-bright-contrast) !important; } .theme-warning-dark { background-color: var(--color-warning-dark) !important; color: var(--color-warning-dark-contrast) !important; } .theme-warning-darker { background-color: var(--color-warning-darker) !important; color: var(--color-warning-darker-contrast) !important; } .theme-success-brighter { background-color: var(--color-success-brighter) !important; color: var(--color-success-brighter-contrast) !important; } .theme-success-bright { background-color: var(--color-success-bright) !important; color: var(--color-success-bright-contrast) !important; } .theme-success-dark { background-color: var(--color-success-dark) !important; color: var(--color-success-dark-contrast) !important; } .theme-success-darker { background-color: var(--color-success-darker) !important; color: var(--color-success-darker-contrast) !important; } .theme-danger-brighter { background-color: var(--color-danger-brighter) !important; color: var(--color-danger-brighter-contrast) !important; } .theme-danger-bright { background-color: var(--color-danger-bright) !important; color: var(--color-danger-bright-contrast) !important; } .theme-danger-dark { background-color: var(--color-danger-dark) !important; color: var(--color-danger-dark-contrast) !important; } .theme-danger-darker { background-color: var(--color-danger-darker) !important; color: var(--color-danger-darker-contrast) !important; } /* Opacity — Halbtransparente Hintergründe Bewusste Ausnahme: Setzt NUR background-color, NICHT color. Semi-transparente Hintergründe ergeben sichtbar eine Mischfarbe mit dem darunter liegenden Element — Auto-Contrast wäre hier unzuverlässig. Textfarbe wird geerbt oder per text-* gesetzt. */ .theme-primary\/5 { background-color: var(--color-primary-opacity-5) !important; } .theme-primary\/10 { background-color: var(--color-primary-opacity-10) !important; } .theme-primary\/15 { background-color: var(--color-primary-opacity-15) !important; } .theme-primary\/20 { background-color: var(--color-primary-opacity-20) !important; } .theme-primary\/25 { background-color: var(--color-primary-opacity-25) !important; } .theme-primary\/30 { background-color: var(--color-primary-opacity-30) !important; } .theme-primary\/40 { background-color: var(--color-primary-opacity-40) !important; } .theme-primary\/50 { background-color: var(--color-primary-opacity-50) !important; } .theme-primary\/60 { background-color: var(--color-primary-opacity-60) !important; } .theme-primary\/70 { background-color: var(--color-primary-opacity-70) !important; } .theme-primary\/80 { background-color: var(--color-primary-opacity-80) !important; } .theme-primary\/90 { background-color: var(--color-primary-opacity-90) !important; } .theme-secondary\/5 { background-color: var(--color-secondary-opacity-5) !important; } .theme-secondary\/10 { background-color: var(--color-secondary-opacity-10) !important; } .theme-secondary\/15 { background-color: var(--color-secondary-opacity-15) !important; } .theme-secondary\/20 { background-color: var(--color-secondary-opacity-20) !important; } .theme-secondary\/25 { background-color: var(--color-secondary-opacity-25) !important; } .theme-secondary\/30 { background-color: var(--color-secondary-opacity-30) !important; } .theme-secondary\/40 { background-color: var(--color-secondary-opacity-40) !important; } .theme-secondary\/50 { background-color: var(--color-secondary-opacity-50) !important; } .theme-secondary\/60 { background-color: var(--color-secondary-opacity-60) !important; } .theme-secondary\/70 { background-color: var(--color-secondary-opacity-70) !important; } .theme-secondary\/80 { background-color: var(--color-secondary-opacity-80) !important; } .theme-secondary\/90 { background-color: var(--color-secondary-opacity-90) !important; } .theme-tertiary\/5 { background-color: var(--color-tertiary-opacity-5) !important; } .theme-tertiary\/10 { background-color: var(--color-tertiary-opacity-10) !important; } .theme-tertiary\/15 { background-color: var(--color-tertiary-opacity-15) !important; } .theme-tertiary\/20 { background-color: var(--color-tertiary-opacity-20) !important; } .theme-tertiary\/25 { background-color: var(--color-tertiary-opacity-25) !important; } .theme-tertiary\/30 { background-color: var(--color-tertiary-opacity-30) !important; } .theme-tertiary\/40 { background-color: var(--color-tertiary-opacity-40) !important; } .theme-tertiary\/50 { background-color: var(--color-tertiary-opacity-50) !important; } .theme-tertiary\/60 { background-color: var(--color-tertiary-opacity-60) !important; } .theme-tertiary\/70 { background-color: var(--color-tertiary-opacity-70) !important; } .theme-tertiary\/80 { background-color: var(--color-tertiary-opacity-80) !important; } .theme-tertiary\/90 { background-color: var(--color-tertiary-opacity-90) !important; } .theme-background\/5 { background-color: var(--color-background-opacity-5) !important; } .theme-background\/10 { background-color: var(--color-background-opacity-10) !important; } .theme-background\/15 { background-color: var(--color-background-opacity-15) !important; } .theme-background\/20 { background-color: var(--color-background-opacity-20) !important; } .theme-background\/25 { background-color: var(--color-background-opacity-25) !important; } .theme-background\/30 { background-color: var(--color-background-opacity-30) !important; } .theme-background\/40 { background-color: var(--color-background-opacity-40) !important; } .theme-background\/50 { background-color: var(--color-background-opacity-50) !important; } .theme-background\/60 { background-color: var(--color-background-opacity-60) !important; } .theme-background\/70 { background-color: var(--color-background-opacity-70) !important; } .theme-background\/80 { background-color: var(--color-background-opacity-80) !important; } .theme-background\/90 { background-color: var(--color-background-opacity-90) !important; } .theme-surface\/5 { background-color: var(--color-surface-opacity-5) !important; } .theme-surface\/10 { background-color: var(--color-surface-opacity-10) !important; } .theme-surface\/15 { background-color: var(--color-surface-opacity-15) !important; } .theme-surface\/20 { background-color: var(--color-surface-opacity-20) !important; } .theme-surface\/25 { background-color: var(--color-surface-opacity-25) !important; } .theme-surface\/30 { background-color: var(--color-surface-opacity-30) !important; } .theme-surface\/40 { background-color: var(--color-surface-opacity-40) !important; } .theme-surface\/50 { background-color: var(--color-surface-opacity-50) !important; } .theme-surface\/60 { background-color: var(--color-surface-opacity-60) !important; } .theme-surface\/70 { background-color: var(--color-surface-opacity-70) !important; } .theme-surface\/80 { background-color: var(--color-surface-opacity-80) !important; } .theme-surface\/90 { background-color: var(--color-surface-opacity-90) !important; } .theme-surface-elevated\/5 { background-color: var(--color-surface-elevated-opacity-5) !important; } .theme-surface-elevated\/10 { background-color: var(--color-surface-elevated-opacity-10) !important; } .theme-surface-elevated\/15 { background-color: var(--color-surface-elevated-opacity-15) !important; } .theme-surface-elevated\/20 { background-color: var(--color-surface-elevated-opacity-20) !important; } .theme-surface-elevated\/25 { background-color: var(--color-surface-elevated-opacity-25) !important; } .theme-surface-elevated\/30 { background-color: var(--color-surface-elevated-opacity-30) !important; } .theme-surface-elevated\/40 { background-color: var(--color-surface-elevated-opacity-40) !important; } .theme-surface-elevated\/50 { background-color: var(--color-surface-elevated-opacity-50) !important; } .theme-surface-elevated\/60 { background-color: var(--color-surface-elevated-opacity-60) !important; } .theme-surface-elevated\/70 { background-color: var(--color-surface-elevated-opacity-70) !important; } .theme-surface-elevated\/80 { background-color: var(--color-surface-elevated-opacity-80) !important; } .theme-surface-elevated\/90 { background-color: var(--color-surface-elevated-opacity-90) !important; } .theme-warning\/5 { background-color: var(--color-warning-opacity-5) !important; } .theme-warning\/10 { background-color: var(--color-warning-opacity-10) !important; } .theme-warning\/15 { background-color: var(--color-warning-opacity-15) !important; } .theme-warning\/20 { background-color: var(--color-warning-opacity-20) !important; } .theme-warning\/25 { background-color: var(--color-warning-opacity-25) !important; } .theme-warning\/30 { background-color: var(--color-warning-opacity-30) !important; } .theme-warning\/40 { background-color: var(--color-warning-opacity-40) !important; } .theme-warning\/50 { background-color: var(--color-warning-opacity-50) !important; } .theme-warning\/60 { background-color: var(--color-warning-opacity-60) !important; } .theme-warning\/70 { background-color: var(--color-warning-opacity-70) !important; } .theme-warning\/80 { background-color: var(--color-warning-opacity-80) !important; } .theme-warning\/90 { background-color: var(--color-warning-opacity-90) !important; } .theme-success\/5 { background-color: var(--color-success-opacity-5) !important; } .theme-success\/10 { background-color: var(--color-success-opacity-10) !important; } .theme-success\/15 { background-color: var(--color-success-opacity-15) !important; } .theme-success\/20 { background-color: var(--color-success-opacity-20) !important; } .theme-success\/25 { background-color: var(--color-success-opacity-25) !important; } .theme-success\/30 { background-color: var(--color-success-opacity-30) !important; } .theme-success\/40 { background-color: var(--color-success-opacity-40) !important; } .theme-success\/50 { background-color: var(--color-success-opacity-50) !important; } .theme-success\/60 { background-color: var(--color-success-opacity-60) !important; } .theme-success\/70 { background-color: var(--color-success-opacity-70) !important; } .theme-success\/80 { background-color: var(--color-success-opacity-80) !important; } .theme-success\/90 { background-color: var(--color-success-opacity-90) !important; } .theme-danger\/5 { background-color: var(--color-danger-opacity-5) !important; } .theme-danger\/10 { background-color: var(--color-danger-opacity-10) !important; } .theme-danger\/15 { background-color: var(--color-danger-opacity-15) !important; } .theme-danger\/20 { background-color: var(--color-danger-opacity-20) !important; } .theme-danger\/25 { background-color: var(--color-danger-opacity-25) !important; } .theme-danger\/30 { background-color: var(--color-danger-opacity-30) !important; } .theme-danger\/40 { background-color: var(--color-danger-opacity-40) !important; } .theme-danger\/50 { background-color: var(--color-danger-opacity-50) !important; } .theme-danger\/60 { background-color: var(--color-danger-opacity-60) !important; } .theme-danger\/70 { background-color: var(--color-danger-opacity-70) !important; } .theme-danger\/80 { background-color: var(--color-danger-opacity-80) !important; } .theme-danger\/90 { background-color: var(--color-danger-opacity-90) !important; } /* Custom-Mix — Escape Hatch via Inline-Variable */ .theme-custom { background-color: var(--bg) !important; } .text-custom { color: var(--text) !important; } /* -------------------------------------------------------------------------- 1d. BORDER-FARBEN — Basis + Varianten Architektur: Setzt --border-color (Variable), NICHT border-color (Property). .border { border: 1px solid var(--border-color) } liest den Wert zur Render-Zeit. -> .border.border-primary funktioniert unabhaengig von der CSS-Quellenreihenfolge. -------------------------------------------------------------------------- */ .border-primary { --border-color: var(--color-primary); } .border-secondary { --border-color: var(--color-secondary); } .border-tertiary { --border-color: var(--color-tertiary); } .border-surface { --border-color: var(--color-surface); } .border-surface-elevated { --border-color: var(--color-surface-elevated); } .border-warning { --border-color: var(--color-warning); } .border-white { --border-color: #fff; } .border-black { --border-color: #000; } .border-transparent { --border-color: transparent; } .border-primary-brighter { --border-color: var(--color-primary-brighter); } .border-primary-bright { --border-color: var(--color-primary-bright); } .border-primary-dark { --border-color: var(--color-primary-dark); } .border-primary-darker { --border-color: var(--color-primary-darker); } .border-secondary-brighter { --border-color: var(--color-secondary-brighter); } .border-secondary-bright { --border-color: var(--color-secondary-bright); } .border-secondary-dark { --border-color: var(--color-secondary-dark); } .border-secondary-darker { --border-color: var(--color-secondary-darker); } .border-tertiary-brighter { --border-color: var(--color-tertiary-brighter); } .border-tertiary-bright { --border-color: var(--color-tertiary-bright); } .border-tertiary-dark { --border-color: var(--color-tertiary-dark); } .border-tertiary-darker { --border-color: var(--color-tertiary-darker); } .border-brighter { --border-color: var(--color-border-brighter); } .border-bright { --border-color: var(--color-border-bright); } .border-dark { --border-color: var(--color-border-dark); } .border-darker { --border-color: var(--color-border-darker); } .border-warning-brighter { --border-color: var(--color-warning-brighter); } .border-warning-bright { --border-color: var(--color-warning-bright); } .border-warning-dark { --border-color: var(--color-warning-dark); } .border-warning-darker { --border-color: var(--color-warning-darker); } /* -------------------------------------------------------------------------- 1e. INTERACTIVE UTILITIES — Farben: hover:theme-{color} + hover:text-{color} Reagiert auf alle interaktiven States via :is(): :hover, :focus-visible, :active, .active hover:theme-* setzt automatisch die passende Textfarbe mit: Basis-Farben → CMS-Textfarbe, Varianten → Auto-Contrast (schwarz/weiß). -------------------------------------------------------------------------- */ /* --- Hover Theme (Background + Auto-Contrast Textfarbe) --- */ /* Primary */ .hover\:theme-primary:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-primary) !important; color: var(--color-primary-text) !important; } .hover\:theme-primary-brighter:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-primary-brighter) !important; color: var(--color-primary-brighter-contrast) !important; } .hover\:theme-primary-bright:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-primary-bright) !important; color: var(--color-primary-bright-contrast) !important; } .hover\:theme-primary-dark:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-primary-dark) !important; color: var(--color-primary-dark-contrast) !important; } .hover\:theme-primary-darker:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-primary-darker) !important; color: var(--color-primary-darker-contrast) !important; } /* Secondary */ .hover\:theme-secondary:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-secondary) !important; color: var(--color-secondary-text) !important; } .hover\:theme-secondary-brighter:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-secondary-brighter) !important; color: var(--color-secondary-brighter-contrast) !important; } .hover\:theme-secondary-bright:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-secondary-bright) !important; color: var(--color-secondary-bright-contrast) !important; } .hover\:theme-secondary-dark:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-secondary-dark) !important; color: var(--color-secondary-dark-contrast) !important; } .hover\:theme-secondary-darker:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-secondary-darker) !important; color: var(--color-secondary-darker-contrast) !important; } /* Tertiary */ .hover\:theme-tertiary:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-tertiary) !important; color: var(--color-tertiary-text) !important; } .hover\:theme-tertiary-brighter:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-tertiary-brighter) !important; color: var(--color-tertiary-brighter-contrast) !important; } .hover\:theme-tertiary-bright:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-tertiary-bright) !important; color: var(--color-tertiary-bright-contrast) !important; } .hover\:theme-tertiary-dark:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-tertiary-dark) !important; color: var(--color-tertiary-dark-contrast) !important; } .hover\:theme-tertiary-darker:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-tertiary-darker) !important; color: var(--color-tertiary-darker-contrast) !important; } /* Background */ .hover\:theme-background:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-background) !important; color: var(--color-background-text) !important; } .hover\:theme-background-brighter:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-background-brighter) !important; color: var(--color-background-brighter-contrast) !important; } .hover\:theme-background-bright:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-background-bright) !important; color: var(--color-background-bright-contrast) !important; } .hover\:theme-background-dark:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-background-dark) !important; color: var(--color-background-dark-contrast) !important; } .hover\:theme-background-darker:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-background-darker) !important; color: var(--color-background-darker-contrast) !important; } /* Surface */ .hover\:theme-surface:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-surface) !important; color: var(--color-surface-text) !important; } .hover\:theme-surface-brighter:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-surface-brighter) !important; color: var(--color-surface-brighter-contrast) !important; } .hover\:theme-surface-bright:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-surface-bright) !important; color: var(--color-surface-bright-contrast) !important; } .hover\:theme-surface-dark:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-surface-dark) !important; color: var(--color-surface-dark-contrast) !important; } .hover\:theme-surface-darker:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-surface-darker) !important; color: var(--color-surface-darker-contrast) !important; } /* Surface Elevated */ .hover\:theme-surface-elevated:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-surface-elevated) !important; color: var(--color-surface-elevated-text) !important; } .hover\:theme-surface-elevated-brighter:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-surface-elevated-brighter) !important; color: var(--color-surface-elevated-brighter-contrast) !important; } .hover\:theme-surface-elevated-bright:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-surface-elevated-bright) !important; color: var(--color-surface-elevated-bright-contrast) !important; } .hover\:theme-surface-elevated-dark:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-surface-elevated-dark) !important; color: var(--color-surface-elevated-dark-contrast) !important; } .hover\:theme-surface-elevated-darker:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-surface-elevated-darker) !important; color: var(--color-surface-elevated-darker-contrast) !important; } /* Warning */ .hover\:theme-warning:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-warning) !important; color: var(--color-warning-text) !important; } .hover\:theme-warning-brighter:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-warning-brighter) !important; color: var(--color-warning-brighter-contrast) !important; } .hover\:theme-warning-bright:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-warning-bright) !important; color: var(--color-warning-bright-contrast) !important; } .hover\:theme-warning-dark:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-warning-dark) !important; color: var(--color-warning-dark-contrast) !important; } .hover\:theme-warning-darker:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-warning-darker) !important; color: var(--color-warning-darker-contrast) !important; } .hover\:theme-success:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-success) !important; color: var(--color-success-text) !important; } .hover\:theme-success-brighter:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-success-brighter) !important; color: var(--color-success-brighter-contrast) !important; } .hover\:theme-success-bright:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-success-bright) !important; color: var(--color-success-bright-contrast) !important; } .hover\:theme-success-dark:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-success-dark) !important; color: var(--color-success-dark-contrast) !important; } .hover\:theme-success-darker:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-success-darker) !important; color: var(--color-success-darker-contrast) !important; } .hover\:theme-danger:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-danger) !important; color: var(--color-danger-text) !important; } .hover\:theme-danger-brighter:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-danger-brighter) !important; color: var(--color-danger-brighter-contrast) !important; } .hover\:theme-danger-bright:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-danger-bright) !important; color: var(--color-danger-bright-contrast) !important; } .hover\:theme-danger-dark:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-danger-dark) !important; color: var(--color-danger-dark-contrast) !important; } .hover\:theme-danger-darker:is(:hover, :focus-visible, :active, .active) { background-color: var(--color-danger-darker) !important; color: var(--color-danger-darker-contrast) !important; } /* Neutral */ .hover\:theme-white:is(:hover, :focus-visible, :active, .active) { background-color: #fff !important; color: #000 !important; } .hover\:theme-black:is(:hover, :focus-visible, :active, .active) { background-color: #000 !important; color: #fff !important; } .hover\:theme-transparent:is(:hover, :focus-visible, :active, .active) { background-color: transparent !important; color: inherit !important; } /* Custom (freie Werte per Inline-Variable: --hover-bg, --hover-color) */ .hover\:theme-custom:is(:hover, :focus-visible, :active, .active) { background-color: var(--hover-bg) !important; color: var(--hover-color) !important; } /* --- Hover Text --- */ .hover\:text-primary:is(:hover, :focus-visible, :active, .active) { color: var(--color-primary) !important; } .hover\:text-primary-brighter:is(:hover, :focus-visible, :active, .active) { color: var(--color-primary-brighter) !important; } .hover\:text-primary-bright:is(:hover, :focus-visible, :active, .active) { color: var(--color-primary-bright) !important; } .hover\:text-primary-dark:is(:hover, :focus-visible, :active, .active) { color: var(--color-primary-dark) !important; } .hover\:text-primary-darker:is(:hover, :focus-visible, :active, .active) { color: var(--color-primary-darker) !important; } .hover\:text-secondary:is(:hover, :focus-visible, :active, .active) { color: var(--color-secondary) !important; } .hover\:text-secondary-brighter:is(:hover, :focus-visible, :active, .active) { color: var(--color-secondary-brighter) !important; } .hover\:text-secondary-bright:is(:hover, :focus-visible, :active, .active) { color: var(--color-secondary-bright) !important; } .hover\:text-secondary-dark:is(:hover, :focus-visible, :active, .active) { color: var(--color-secondary-dark) !important; } .hover\:text-secondary-darker:is(:hover, :focus-visible, :active, .active) { color: var(--color-secondary-darker) !important; } .hover\:text-tertiary:is(:hover, :focus-visible, :active, .active) { color: var(--color-tertiary) !important; } .hover\:text-tertiary-brighter:is(:hover, :focus-visible, :active, .active) { color: var(--color-tertiary-brighter) !important; } .hover\:text-tertiary-bright:is(:hover, :focus-visible, :active, .active) { color: var(--color-tertiary-bright) !important; } .hover\:text-tertiary-dark:is(:hover, :focus-visible, :active, .active) { color: var(--color-tertiary-dark) !important; } .hover\:text-tertiary-darker:is(:hover, :focus-visible, :active, .active) { color: var(--color-tertiary-darker) !important; } .hover\:text-background:is(:hover, :focus-visible, :active, .active) { color: var(--color-background-text) !important; } .hover\:text-background-brighter:is(:hover, :focus-visible, :active, .active) { color: var(--color-background-brighter) !important; } .hover\:text-background-bright:is(:hover, :focus-visible, :active, .active) { color: var(--color-background-bright) !important; } .hover\:text-background-dark:is(:hover, :focus-visible, :active, .active) { color: var(--color-background-dark) !important; } .hover\:text-background-darker:is(:hover, :focus-visible, :active, .active) { color: var(--color-background-darker) !important; } .hover\:text-surface:is(:hover, :focus-visible, :active, .active) { color: var(--color-surface-text) !important; } .hover\:text-surface-brighter:is(:hover, :focus-visible, :active, .active) { color: var(--color-surface-brighter) !important; } .hover\:text-surface-bright:is(:hover, :focus-visible, :active, .active) { color: var(--color-surface-bright) !important; } .hover\:text-surface-dark:is(:hover, :focus-visible, :active, .active) { color: var(--color-surface-dark) !important; } .hover\:text-surface-darker:is(:hover, :focus-visible, :active, .active) { color: var(--color-surface-darker) !important; } .hover\:text-surface-elevated:is(:hover, :focus-visible, :active, .active) { color: var(--color-surface-elevated-text) !important; } .hover\:text-surface-elevated-brighter:is(:hover, :focus-visible, :active, .active) { color: var(--color-surface-elevated-brighter) !important; } .hover\:text-surface-elevated-bright:is(:hover, :focus-visible, :active, .active) { color: var(--color-surface-elevated-bright) !important; } .hover\:text-surface-elevated-dark:is(:hover, :focus-visible, :active, .active) { color: var(--color-surface-elevated-dark) !important; } .hover\:text-surface-elevated-darker:is(:hover, :focus-visible, :active, .active) { color: var(--color-surface-elevated-darker) !important; } .hover\:text-warning:is(:hover, :focus-visible, :active, .active) { color: var(--color-warning) !important; } .hover\:text-warning-brighter:is(:hover, :focus-visible, :active, .active) { color: var(--color-warning-brighter) !important; } .hover\:text-warning-bright:is(:hover, :focus-visible, :active, .active) { color: var(--color-warning-bright) !important; } .hover\:text-warning-dark:is(:hover, :focus-visible, :active, .active) { color: var(--color-warning-dark) !important; } .hover\:text-warning-darker:is(:hover, :focus-visible, :active, .active) { color: var(--color-warning-darker) !important; } .hover\:text-success:is(:hover, :focus-visible, :active, .active) { color: var(--color-success) !important; } .hover\:text-success-brighter:is(:hover, :focus-visible, :active, .active) { color: var(--color-success-brighter) !important; } .hover\:text-success-bright:is(:hover, :focus-visible, :active, .active) { color: var(--color-success-bright) !important; } .hover\:text-success-dark:is(:hover, :focus-visible, :active, .active) { color: var(--color-success-dark) !important; } .hover\:text-success-darker:is(:hover, :focus-visible, :active, .active) { color: var(--color-success-darker) !important; } .hover\:text-danger:is(:hover, :focus-visible, :active, .active) { color: var(--color-danger) !important; } .hover\:text-danger-brighter:is(:hover, :focus-visible, :active, .active) { color: var(--color-danger-brighter) !important; } .hover\:text-danger-bright:is(:hover, :focus-visible, :active, .active) { color: var(--color-danger-bright) !important; } .hover\:text-danger-dark:is(:hover, :focus-visible, :active, .active) { color: var(--color-danger-dark) !important; } .hover\:text-danger-darker:is(:hover, :focus-visible, :active, .active) { color: var(--color-danger-darker) !important; } .hover\:text-white:is(:hover, :focus-visible, :active, .active) { color: #fff !important; } .hover\:text-black:is(:hover, :focus-visible, :active, .active) { color: #000 !important; } .hover\:text-inherit:is(:hover, :focus-visible, :active, .active) { color: inherit !important; } .hover\:text-current:is(:hover, :focus-visible, :active, .active) { color: currentColor !important; } /* -------------------------------------------------------------------------- 1f. INTERACTIVE UTILITIES — Generisch via -custom Für alle nicht-Farb-Properties: Eine Klasse pro Property, beliebiger Wert über Inline-Variable. Reagiert auf: :hover, :focus-visible, :active, .active Farben → vordefinierte Klassen (hover:theme-primary-dark etc.) Alles andere → hover:*-custom + --hover-* Variable -------------------------------------------------------------------------- */ /* --- Opacity --- */ .hover\:opacity-custom:is(:hover, :focus-visible, :active, .active) { opacity: var(--hover-opacity) !important; } /* --- Transform --- */ .hover\:scale-custom:is(:hover, :focus-visible, :active, .active) { scale: var(--hover-scale) !important; } .hover\:rotate-custom:is(:hover, :focus-visible, :active, .active) { rotate: var(--hover-rotate) !important; } .hover\:translate-x-custom:is(:hover, :focus-visible, :active, .active) { translate: var(--hover-translate-x) 0 !important; } .hover\:translate-y-custom:is(:hover, :focus-visible, :active, .active) { translate: 0 var(--hover-translate-y) !important; } /* --- Schatten --- */ .hover\:shadow-custom:is(:hover, :focus-visible, :active, .active) { box-shadow: var(--hover-shadow) !important; } /* --- Filter --- */ .hover\:brightness-custom:is(:hover, :focus-visible, :active, .active) { filter: brightness(var(--hover-brightness)) !important; } .hover\:contrast-custom:is(:hover, :focus-visible, :active, .active) { filter: contrast(var(--hover-contrast)) !important; } .hover\:saturate-custom:is(:hover, :focus-visible, :active, .active) { filter: saturate(var(--hover-saturate)) !important; } .hover\:blur-custom:is(:hover, :focus-visible, :active, .active) { filter: blur(var(--hover-blur)) !important; } /* --- Border --- */ .hover\:border-color-custom:is(:hover, :focus-visible, :active, .active) { border-color: var(--hover-border-color) !important; } .hover\:outline-color-custom:is(:hover, :focus-visible, :active, .active) { outline-color: var(--hover-outline-color) !important; } /* --- Typografie --- */ .hover\:text-decoration-custom:is(:hover, :focus-visible, :active, .active) { text-decoration: var(--hover-text-decoration) !important; } .hover\:letter-spacing-custom:is(:hover, :focus-visible, :active, .active) { letter-spacing: var(--hover-letter-spacing) !important; } /* -------------------------------------------------------------------------- 1g. GROUP-HOVER — Parent-Interaktion beeinflusst Kind-Elemente .group auf dem Parent, .group-hover:* auf den Kindern. Reagiert auf: :hover, :focus-visible, :active, .active des Parents. -------------------------------------------------------------------------- */ /* --- Group Marker (kein eigenes Styling) --- */ /* .group {} */ /* --- Group-Hover: Textfarben --- */ .group:is(:hover, :focus-visible, :active, .active) .group-hover\:text-primary { color: var(--color-primary) !important; } .group:is(:hover, :focus-visible, :active, .active) .group-hover\:text-secondary { color: var(--color-secondary) !important; } .group:is(:hover, :focus-visible, :active, .active) .group-hover\:text-tertiary { color: var(--color-tertiary) !important; } .group:is(:hover, :focus-visible, :active, .active) .group-hover\:text-background { color: var(--color-background) !important; } .group:is(:hover, :focus-visible, :active, .active) .group-hover\:text-white { color: #fff !important; } .group:is(:hover, :focus-visible, :active, .active) .group-hover\:text-black { color: #000 !important; } .group:is(:hover, :focus-visible, :active, .active) .group-hover\:text-inherit { color: inherit !important; } .group:is(:hover, :focus-visible, :active, .active) .group-hover\:text-current { color: currentColor !important; } /* --- Group-Hover: Filter --- */ .group:is(:hover, :focus-visible, :active, .active) .group-hover\:invert { filter: brightness(0) invert(1) !important; } /* --- Group-Hover: Opacity --- */ .group:is(:hover, :focus-visible, :active, .active) .group-hover\:opacity-0 { opacity: 0 !important; } .group:is(:hover, :focus-visible, :active, .active) .group-hover\:opacity-50 { opacity: 0.5 !important; } .group:is(:hover, :focus-visible, :active, .active) .group-hover\:opacity-100 { opacity: 1 !important; } /* --- Group-Hover: Visibility --- */ .group:is(:hover, :focus-visible, :active, .active) .group-hover\:visible { visibility: visible !important; } .group:is(:hover, :focus-visible, :active, .active) .group-hover\:invisible { visibility: hidden !important; } /* --- Group-Hover: Scale --- Feste Stufen für die häufigsten Card-Hover-Patterns. Composable mit rotate/translate — individuelle Properties. */ .group:is(:hover, :focus-visible, :active, .active) .group-hover\:scale-95 { scale: .95 !important; } .group:is(:hover, :focus-visible, :active, .active) .group-hover\:scale-100 { scale: 1 !important; } .group:is(:hover, :focus-visible, :active, .active) .group-hover\:scale-105 { scale: 1.05 !important; } .group:is(:hover, :focus-visible, :active, .active) .group-hover\:scale-110 { scale: 1.1 !important; } .group:is(:hover, :focus-visible, :active, .active) .group-hover\:scale-custom { scale: var(--group-hover-scale) !important; } /* --- Group-Hover: Rotate (Custom) --- */ .group:is(:hover, :focus-visible, :active, .active) .group-hover\:rotate-custom { rotate: var(--group-hover-rotate) !important; } /* --- Group-Hover: Translate (Custom) --- */ .group:is(:hover, :focus-visible, :active, .active) .group-hover\:translate-custom { translate: var(--group-hover-x, 0) var(--group-hover-y, 0) !important; } /* --- Hintergrund-Extras --- */ .bg-cover { background-size: cover !important; } .bg-contain { background-size: contain !important; } .bg-auto { background-size: auto !important; } .bg-center { background-position: center !important; } .bg-top { background-position: top !important; } .bg-bottom { background-position: bottom !important; } .bg-left { background-position: left !important; } .bg-right { background-position: right !important; } .bg-no-repeat { background-repeat: no-repeat !important; } .bg-repeat { background-repeat: repeat !important; } .bg-repeat-x { background-repeat: repeat-x !important; } .bg-repeat-y { background-repeat: repeat-y !important; } .bg-fixed { background-attachment: fixed !important; } .bg-local { background-attachment: local !important; } .bg-scroll { background-attachment: scroll !important; } /* --- Gradient --- */ .bg-gradient-to-t { background-image: linear-gradient(to top, var(--gradient-stops, transparent, transparent)) !important; } .bg-gradient-to-r { background-image: linear-gradient(to right, var(--gradient-stops, transparent, transparent)) !important; } .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--gradient-stops, transparent, transparent)) !important; } .bg-gradient-to-l { background-image: linear-gradient(to left, var(--gradient-stops, transparent, transparent)) !important; } .bg-gradient-to-tr { background-image: linear-gradient(to top right, var(--gradient-stops, transparent, transparent)) !important; } .bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--gradient-stops, transparent, transparent)) !important; } .bg-gradient-to-bl { background-image: linear-gradient(to bottom left, var(--gradient-stops, transparent, transparent)) !important; } .bg-gradient-to-tl { background-image: linear-gradient(to top left, var(--gradient-stops, transparent, transparent)) !important; } .bg-none { background-image: none !important; } /* --- Gradient Stops --- Setzt --gradient-stops für die bg-gradient-to-* Klassen. Nutzt die bestehenden System-Farben + schwarz/weiß/transparent. Pattern: from-* setzt Startfarbe, to-* setzt Endfarbe. Optional: via-* für Dreipunkt-Gradienten. Opacity-Varianten über Farbfunktion: from-black/70 etc. ------------------------------------------------------------ */ /* --- From (Startfarbe) --- */ .from-primary { --gradient-from: var(--color-primary); --gradient-stops: var(--gradient-from), var(--gradient-to, transparent); } .from-secondary { --gradient-from: var(--color-secondary); --gradient-stops: var(--gradient-from), var(--gradient-to, transparent); } .from-tertiary { --gradient-from: var(--color-tertiary); --gradient-stops: var(--gradient-from), var(--gradient-to, transparent); } .from-background { --gradient-from: var(--color-background); --gradient-stops: var(--gradient-from), var(--gradient-to, transparent); } .from-surface { --gradient-from: var(--color-surface); --gradient-stops: var(--gradient-from), var(--gradient-to, transparent); } .from-black { --gradient-from: black; --gradient-stops: var(--gradient-from), var(--gradient-to, transparent); } .from-white { --gradient-from: white; --gradient-stops: var(--gradient-from), var(--gradient-to, transparent); } .from-transparent { --gradient-from: transparent; --gradient-stops: var(--gradient-from), var(--gradient-to, transparent); } /* --- To (Endfarbe) --- */ .to-primary { --gradient-to: var(--color-primary); --gradient-stops: var(--gradient-from, transparent), var(--gradient-to); } .to-secondary { --gradient-to: var(--color-secondary); --gradient-stops: var(--gradient-from, transparent), var(--gradient-to); } .to-tertiary { --gradient-to: var(--color-tertiary); --gradient-stops: var(--gradient-from, transparent), var(--gradient-to); } .to-background { --gradient-to: var(--color-background); --gradient-stops: var(--gradient-from, transparent), var(--gradient-to); } .to-surface { --gradient-to: var(--color-surface); --gradient-stops: var(--gradient-from, transparent), var(--gradient-to); } .to-black { --gradient-to: black; --gradient-stops: var(--gradient-from, transparent), var(--gradient-to); } .to-white { --gradient-to: white; --gradient-stops: var(--gradient-from, transparent), var(--gradient-to); } .to-transparent { --gradient-to: transparent; --gradient-stops: var(--gradient-from, transparent), var(--gradient-to); } /* --- Opacity-Varianten (häufigste Fälle für Overlays) --- */ .from-black\/50 { --gradient-from: rgb(0 0 0 / 0.5); --gradient-stops: var(--gradient-from), var(--gradient-to, transparent); } .from-black\/60 { --gradient-from: rgb(0 0 0 / 0.6); --gradient-stops: var(--gradient-from), var(--gradient-to, transparent); } .from-black\/70 { --gradient-from: rgb(0 0 0 / 0.7); --gradient-stops: var(--gradient-from), var(--gradient-to, transparent); } .from-black\/80 { --gradient-from: rgb(0 0 0 / 0.8); --gradient-stops: var(--gradient-from), var(--gradient-to, transparent); } .from-white\/50 { --gradient-from: rgb(255 255 255 / 0.5); --gradient-stops: var(--gradient-from), var(--gradient-to, transparent); } .from-white\/70 { --gradient-from: rgb(255 255 255 / 0.7); --gradient-stops: var(--gradient-from), var(--gradient-to, transparent); } /* --- Via (Mittelfarbe) --- via-* muss in der Stylesheet-Reihenfolge NACH from-* und to-* stehen, damit --gradient-stops korrekt auf 3 Stops überschrieben wird. Wird via-* zusammen mit from-* und to-* verwendet, gewinnt via-* (erscheint zuletzt) und setzt alle drei Stops. */ .via-primary { --gradient-via: var(--color-primary); --gradient-stops: var(--gradient-from, transparent), var(--gradient-via), var(--gradient-to, transparent); } .via-secondary { --gradient-via: var(--color-secondary); --gradient-stops: var(--gradient-from, transparent), var(--gradient-via), var(--gradient-to, transparent); } .via-tertiary { --gradient-via: var(--color-tertiary); --gradient-stops: var(--gradient-from, transparent), var(--gradient-via), var(--gradient-to, transparent); } .via-background { --gradient-via: var(--color-background); --gradient-stops: var(--gradient-from, transparent), var(--gradient-via), var(--gradient-to, transparent); } .via-surface { --gradient-via: var(--color-surface); --gradient-stops: var(--gradient-from, transparent), var(--gradient-via), var(--gradient-to, transparent); } .via-black { --gradient-via: black; --gradient-stops: var(--gradient-from, transparent), var(--gradient-via), var(--gradient-to, transparent); } .via-white { --gradient-via: white; --gradient-stops: var(--gradient-from, transparent), var(--gradient-via), var(--gradient-to, transparent); } .via-transparent { --gradient-via: transparent; --gradient-stops: var(--gradient-from, transparent), var(--gradient-via), var(--gradient-to, transparent); } /* Opacity-Varianten für Via */ .via-black\/30 { --gradient-via: rgb(0 0 0 / 0.3); --gradient-stops: var(--gradient-from, transparent), var(--gradient-via), var(--gradient-to, transparent); } .via-black\/50 { --gradient-via: rgb(0 0 0 / 0.5); --gradient-stops: var(--gradient-from, transparent), var(--gradient-via), var(--gradient-to, transparent); } .via-white\/30 { --gradient-via: rgb(255 255 255 / 0.3); --gradient-stops: var(--gradient-from, transparent), var(--gradient-via), var(--gradient-to, transparent); } .via-white\/50 { --gradient-via: rgb(255 255 255 / 0.5); --gradient-stops: var(--gradient-from, transparent), var(--gradient-via), var(--gradient-to, transparent); } /* --- Custom (freie Werte per inline style) --- */ .from-custom { --gradient-from: var(--from); --gradient-stops: var(--gradient-from), var(--gradient-to, transparent); } .to-custom { --gradient-to: var(--to); --gradient-stops: var(--gradient-from, transparent), var(--gradient-to); } .via-custom { --gradient-via: var(--via); --gradient-stops: var(--gradient-from, transparent), var(--gradient-via), var(--gradient-to, transparent); } /* ========================================================================== 2. TYPOGRAFIE ========================================================================== */ /* --- Font Family --- Referenziert --font-* Slots aus tokens.css / theme.css. Phase 2 wird das Font-System komplett redesignen (Accent-Slot, Weight-Skala). Bis dahin: Mapping von alten auf neue Slot-Namen. */ .font-heading { font-family: var(--font-heading) !important; } .font-body { font-family: var(--font-body) !important; } .font-accent { font-family: var(--font-accent) !important; } /* Legacy-Aliase (CMS4-Kompatibilität — entfallen in Phase 2) */ .font-display { font-family: var(--font-heading) !important; } .font-main { font-family: var(--font-body) !important; } /* --- Font Weight --- Standard CSS-Werte, kombinierbar mit jeder Font-Family. .font-heading-weight / .font-body-weight nutzen die Theme-Defaults. */ .font-light { font-weight: 300 !important; } .font-regular { font-weight: 400 !important; } .font-medium { font-weight: 500 !important; } .font-semibold { font-weight: 600 !important; } .font-bold { font-weight: 700 !important; } .font-extrabold { font-weight: 800 !important; } .font-black { font-weight: 900 !important; } .font-heading-weight { font-weight: var(--font-heading-weight) !important; } .font-body-weight { font-weight: var(--font-body-weight) !important; } .font-accent-weight { font-weight: var(--font-accent-weight) !important; } /* Legacy Compound-Klassen (CMS4-Kompatibilität — entfallen in Phase 2) */ .font-display-light { font-family: var(--font-heading) !important; font-weight: 300 !important; } .font-display-regular { font-family: var(--font-heading) !important; font-weight: 400 !important; } .font-display-bold { font-family: var(--font-heading) !important; font-weight: 700 !important; } .font-main-light { font-family: var(--font-body) !important; font-weight: 300 !important; } .font-main-regular { font-family: var(--font-body) !important; font-weight: 400 !important; } .font-main-bold { font-family: var(--font-body) !important; font-weight: 700 !important; } /* --- Font Variant Numeric --- Nützlich für Tabellen, Preise, Statistiken. tabular-nums: alle Ziffern gleich breit — verhindert Layout-Shifts in Tabellen. oldstyle-nums: Mediävalziffern (unterschiedliche Höhen, für Fließtext). diagonal-fractions / stacked-fractions: für typografische Brüche. */ .normal-nums { font-variant-numeric: normal !important; } .ordinal { font-variant-numeric: ordinal !important; } .slashed-zero { font-variant-numeric: slashed-zero !important; } .lining-nums { font-variant-numeric: lining-nums !important; } .oldstyle-nums { font-variant-numeric: oldstyle-nums !important; } .proportional-nums { font-variant-numeric: proportional-nums !important; } .tabular-nums { font-variant-numeric: tabular-nums !important; } .diagonal-fractions { font-variant-numeric: diagonal-fractions !important; } .stacked-fractions { font-variant-numeric: stacked-fractions !important; } /* --- Font Size: Headings --- Referenziert --text-h* Tokens (Max-Werte) aus tokens.css / theme.css und skaliert fluid via --fluid-progress (definiert in typography.css). Pattern identisch zu h1-h6 / .h1-.h6 — eine konsistente Headline-Skala. */ .text-h1 { font-size: calc(var(--text-h1) * (0.75 + 0.25 * var(--fluid-progress))) !important; } .text-h2 { font-size: calc(var(--text-h2) * (0.75 + 0.25 * var(--fluid-progress))) !important; } .text-h3 { font-size: calc(var(--text-h3) * (0.75 + 0.25 * var(--fluid-progress))) !important; } .text-h4 { font-size: calc(var(--text-h4) * (0.75 + 0.25 * var(--fluid-progress))) !important; } .text-h5 { font-size: calc(var(--text-h5) * (0.75 + 0.25 * var(--fluid-progress))) !important; } .text-h6 { font-size: calc(var(--text-h6) * (0.75 + 0.25 * var(--fluid-progress))) !important; } /* --- Font Size: Fließtext-Skala --- xs–3xl referenzieren --text-* Tokens. 4xl–6xl sind Erweiterungen außerhalb der Token-Skala (selten gebraucht, hardcoded). */ .text-xs { font-size: var(--text-xs) !important; } .text-sm { font-size: var(--text-sm) !important; } .text-base { font-size: var(--text-base) !important; } .text-lg { font-size: var(--text-lg) !important; } .text-xl { font-size: var(--text-xl) !important; } .text-2xl { font-size: var(--text-2xl) !important; } .text-3xl { font-size: var(--text-3xl) !important; } .text-4xl { font-size: 2.25rem !important; } .text-5xl { font-size: 3rem !important; } .text-6xl { font-size: 3.75rem !important; } /* --- Zeilenhöhe --- Referenziert --leading-* Tokens aus tokens.css. */ .leading-none { line-height: var(--leading-none) !important; } .leading-tight { line-height: var(--leading-tight) !important; } .leading-snug { line-height: var(--leading-snug) !important; } .leading-normal { line-height: var(--leading-normal) !important; } .leading-relaxed { line-height: var(--leading-relaxed) !important; } .leading-loose { line-height: 2 !important; } .leading-custom { line-height: var(--leading) !important; } /* Absolute rem-Werte — nützlich wenn Line-Height an Font-Größe gekoppelt sein muss */ .leading-3 { line-height: 0.75rem !important; } .leading-4 { line-height: 1rem !important; } .leading-5 { line-height: 1.25rem !important; } .leading-6 { line-height: 1.5rem !important; } .leading-7 { line-height: 1.75rem !important; } .leading-8 { line-height: 2rem !important; } .leading-9 { line-height: 2.25rem !important; } .leading-10 { line-height: 2.5rem !important; } /* --- Letter Spacing --- Referenziert --tracking-* Tokens aus tokens.css. */ .tracking-tighter { letter-spacing: var(--tracking-tighter) !important; } .tracking-tight { letter-spacing: var(--tracking-tight) !important; } .tracking-normal { letter-spacing: var(--tracking-normal) !important; } .tracking-wide { letter-spacing: var(--tracking-wide) !important; } .tracking-wider { letter-spacing: var(--tracking-wider) !important; } .tracking-widest { letter-spacing: var(--tracking-widest) !important; } /* Escape-Hatch für Display-Typo / sehr enges Tracking: im HTML als style="--tracking: 0.4em" setzen, dann .tracking-custom anwenden. */ .tracking-custom { letter-spacing: var(--tracking) !important; } /* --- Text Transform & Dekoration --- */ .uppercase { text-transform: uppercase !important; } .lowercase { text-transform: lowercase !important; } .capitalize { text-transform: capitalize !important; } .normal-case { text-transform: none !important; } .italic { font-style: italic !important; } .not-italic { font-style: normal !important; } .underline { text-decoration: underline !important; } .overline { text-decoration: overline !important; } .line-through { text-decoration: line-through !important; } .no-underline { text-decoration: none !important; } .underline-offset-auto { text-underline-offset: auto !important; } .underline-offset-1 { text-underline-offset: 1px !important; } .underline-offset-2 { text-underline-offset: 2px !important; } .underline-offset-4 { text-underline-offset: 4px !important; } .underline-offset-8 { text-underline-offset: 8px !important; } /* --- Text Decoration Thickness --- */ .decoration-auto { text-decoration-thickness: auto !important; } .decoration-from-font { text-decoration-thickness: from-font !important; } .decoration-1 { text-decoration-thickness: 1px !important; } .decoration-2 { text-decoration-thickness: 2px !important; } .decoration-4 { text-decoration-thickness: 4px !important; } .decoration-8 { text-decoration-thickness: 8px !important; } /* --- Text Decoration Style --- */ .decoration-solid { text-decoration-style: solid !important; } .decoration-double { text-decoration-style: double !important; } .decoration-dotted { text-decoration-style: dotted !important; } .decoration-dashed { text-decoration-style: dashed !important; } .decoration-wavy { text-decoration-style: wavy !important; } /* --- Text Decoration Color --- */ .decoration-primary { text-decoration-color: var(--color-primary) !important; } .decoration-secondary { text-decoration-color: var(--color-secondary) !important; } .decoration-tertiary { text-decoration-color: var(--color-tertiary) !important; } .decoration-warning { text-decoration-color: var(--color-warning) !important; } .decoration-success { text-decoration-color: var(--color-success) !important; } .decoration-danger { text-decoration-color: var(--color-danger) !important; } .decoration-white { text-decoration-color: #fff !important; } .decoration-black { text-decoration-color: #000 !important; } .decoration-current { text-decoration-color: currentColor !important; } .decoration-transparent { text-decoration-color: transparent !important; } /* --- Text Wrap & Overflow --- */ .break-words { overflow-wrap: break-word !important; } .break-all { word-break: break-all !important; } .break-keep { word-break: keep-all !important; } .break-normal { overflow-wrap: normal !important; word-break: normal !important; } .truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .text-ellipsis { text-overflow: ellipsis !important; } .text-clip { text-overflow: clip !important; } .text-balance { text-wrap: balance !important; } .text-pretty { text-wrap: pretty !important; } .text-nowrap { text-wrap: nowrap !important; } .hyphens-auto { hyphens: auto !important; -webkit-hyphens: auto !important; } .hyphens-manual { hyphens: manual !important; -webkit-hyphens: manual !important; } .hyphens-none { hyphens: none !important; } .whitespace-normal { white-space: normal !important; } .whitespace-nowrap { white-space: nowrap !important; } .whitespace-pre { white-space: pre !important; } /* --- Content Max-Width --- */ .prose { max-width: var(--prose-width, 70ch) !important; } .whitespace-pre-line { white-space: pre-line !important; } .whitespace-pre-wrap { white-space: pre-wrap !important; } /* --- Line Clamp --- */ .line-clamp-1 { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 1 !important; overflow: hidden !important; } .line-clamp-2 { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; } .line-clamp-3 { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; overflow: hidden !important; } .line-clamp-4 { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 4 !important; overflow: hidden !important; } .line-clamp-5 { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 5 !important; overflow: hidden !important; } .line-clamp-none { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; } /* --- Vertical Align --- */ .align-baseline { vertical-align: baseline !important; } .align-top { vertical-align: top !important; } .align-middle { vertical-align: middle !important; } .align-bottom { vertical-align: bottom !important; } .align-text-top { vertical-align: text-top !important; } .align-text-bottom { vertical-align: text-bottom !important; } .align-sub { vertical-align: sub !important; } .align-super { vertical-align: super !important; } /* --- List Style --- */ .list-none { list-style-type: none !important; } .list-disc { list-style-type: disc !important; } .list-decimal { list-style-type: decimal !important; } .list-inside { list-style-position: inside !important; } .list-outside { list-style-position: outside !important; } /* --- List Marker Styling --- */ .marker-primary { & > li::marker { color: var(--color-primary) !important; } } .marker-secondary { & > li::marker { color: var(--color-secondary) !important; } } .marker-tertiary { & > li::marker { color: var(--color-tertiary) !important; } } .marker-bold { & > li::marker { font-weight: 700 !important; } } .marker-lg { & > li::marker { font-size: 1.25em !important; } } /* ========================================================================== 3. BORDER & OUTLINE ========================================================================== */ /* --- Border Width --- */ .border { border: 1px solid var(--border-color) !important; } .border-0 { border-width: 0 !important; } .border-2 { border-width: 2px !important; } .border-4 { border-width: 4px !important; } .border-t { border-top: 1px solid var(--border-color) !important; } .border-r { border-right: 1px solid var(--border-color) !important; } .border-b { border-bottom: 1px solid var(--border-color) !important; } .border-l { border-left: 1px solid var(--border-color) !important; } .border-t-0 { border-top-width: 0 !important; } .border-r-0 { border-right-width: 0 !important; } .border-b-0 { border-bottom-width: 0 !important; } .border-l-0 { border-left-width: 0 !important; } .border-t-2 { border-top-width: 2px !important; } .border-r-2 { border-right-width: 2px !important; } .border-b-2 { border-bottom-width: 2px !important; } .border-l-2 { border-left-width: 2px !important; } .border-t-4 { border-top-width: 4px !important; } .border-r-4 { border-right-width: 4px !important; } .border-b-4 { border-bottom-width: 4px !important; } .border-l-4 { border-left-width: 4px !important; } /* --- Border Style --- */ .border-solid { border-style: solid !important; } .border-dashed { border-style: dashed !important; } .border-dotted { border-style: dotted !important; } .border-double { border-style: double !important; } .border-none { border-style: none !important; } /* --- Border Radius --- Referenziert --rounded-* Tokens aus tokens.css. */ .rounded-none { border-radius: var(--rounded-none) !important; } .rounded-sm { border-radius: var(--rounded-sm) !important; } .rounded { border-radius: var(--rounded-base) !important; } .rounded-md { border-radius: var(--rounded-md) !important; } .rounded-lg { border-radius: var(--rounded-lg) !important; } .rounded-xl { border-radius: var(--rounded-xl) !important; } .rounded-2xl { border-radius: 1rem !important; } .rounded-3xl { border-radius: 1.5rem !important; } .rounded-full { border-radius: var(--rounded-full) !important; } .rounded-t-none { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } .rounded-t { border-top-left-radius: var(--rounded-base) !important; border-top-right-radius: var(--rounded-base) !important; } .rounded-t-lg { border-top-left-radius: var(--rounded-lg) !important; border-top-right-radius: var(--rounded-lg) !important; } .rounded-t-xl { border-top-left-radius: var(--rounded-xl) !important; border-top-right-radius: var(--rounded-xl) !important; } .rounded-t-2xl { border-top-left-radius: 1rem !important; border-top-right-radius: 1rem !important; } .rounded-t-full { border-top-left-radius: var(--rounded-full) !important; border-top-right-radius: var(--rounded-full) !important; } .rounded-b-none { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } .rounded-b { border-bottom-left-radius: var(--rounded-base) !important; border-bottom-right-radius: var(--rounded-base) !important; } .rounded-b-lg { border-bottom-left-radius: var(--rounded-lg) !important; border-bottom-right-radius: var(--rounded-lg) !important; } .rounded-b-xl { border-bottom-left-radius: var(--rounded-xl) !important; border-bottom-right-radius: var(--rounded-xl) !important; } .rounded-b-2xl { border-bottom-left-radius: 1rem !important; border-bottom-right-radius: 1rem !important; } .rounded-b-full { border-bottom-left-radius: var(--rounded-full) !important; border-bottom-right-radius: var(--rounded-full) !important; } .rounded-l-none { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } .rounded-l { border-top-left-radius: var(--rounded-base) !important; border-bottom-left-radius: var(--rounded-base) !important; } .rounded-l-lg { border-top-left-radius: var(--rounded-lg) !important; border-bottom-left-radius: var(--rounded-lg) !important; } .rounded-l-full { border-top-left-radius: var(--rounded-full) !important; border-bottom-left-radius: var(--rounded-full) !important; } .rounded-r-none { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .rounded-r { border-top-right-radius: var(--rounded-base) !important; border-bottom-right-radius: var(--rounded-base) !important; } .rounded-r-lg { border-top-right-radius: var(--rounded-lg) !important; border-bottom-right-radius: var(--rounded-lg) !important; } .rounded-r-full { border-top-right-radius: var(--rounded-full) !important; border-bottom-right-radius: var(--rounded-full) !important; } /* --- Outline / Ring --- */ .outline-none { outline: 2px solid transparent !important; outline-offset: 2px !important; } .outline { outline-style: solid !important; } .outline-dashed { outline-style: dashed !important; } .outline-dotted { outline-style: dotted !important; } .outline-0 { outline-width: 0 !important; } .outline-1 { outline-width: 1px !important; } .outline-2 { outline-width: 2px !important; } .outline-4 { outline-width: 4px !important; } .outline-offset-0 { outline-offset: 0 !important; } .outline-offset-1 { outline-offset: 1px !important; } .outline-offset-2 { outline-offset: 2px !important; } .outline-offset-4 { outline-offset: 4px !important; } /* Ring nutzt --ring-color mit Fallback auf --color-border. Kombination: class="ring-2 ring-primary" → primärfarbener 2px Ring */ .ring-0 { box-shadow: 0 0 0 0 transparent !important; } .ring-1 { box-shadow: 0 0 0 1px var(--ring-color, var(--color-border)) !important; } .ring-2 { box-shadow: 0 0 0 2px var(--ring-color, var(--color-border)) !important; } .ring-4 { box-shadow: 0 0 0 4px var(--ring-color, var(--color-border)) !important; } .ring-8 { box-shadow: 0 0 0 8px var(--ring-color, var(--color-border)) !important; } /* Ring Farben */ .ring-primary { --ring-color: var(--color-primary); } .ring-secondary { --ring-color: var(--color-secondary); } .ring-tertiary { --ring-color: var(--color-tertiary); } .ring-warning { --ring-color: var(--color-warning); } .ring-success { --ring-color: var(--color-success); } .ring-danger { --ring-color: var(--color-danger); } .ring-white { --ring-color: #fff; } .ring-black { --ring-color: #000; } .ring-transparent { --ring-color: transparent; } /* Ring Opacity (via vorberechnete Opacity-Token) */ .ring-primary\/10 { --ring-color: var(--color-primary-opacity-10); } .ring-primary\/20 { --ring-color: var(--color-primary-opacity-20); } .ring-primary\/30 { --ring-color: var(--color-primary-opacity-30); } .ring-primary\/50 { --ring-color: var(--color-primary-opacity-50); } .ring-secondary\/30 { --ring-color: var(--color-secondary-opacity-30); } .ring-secondary\/50 { --ring-color: var(--color-secondary-opacity-50); } /* --- Divide (Trennlinien zwischen Kinder-Elementen) --- */ .divide-y > * + * { border-top: 1px solid var(--divide-color, var(--color-border)) !important; } .divide-x > * + * { border-left: 1px solid var(--divide-color, var(--color-border)) !important; } .divide-y-2 > * + * { border-top-width: 2px !important; } .divide-x-2 > * + * { border-left-width: 2px !important; } .divide-y-0 > * + * { border-top-width: 0 !important; } .divide-x-0 > * + * { border-left-width: 0 !important; } .divide-primary > * + * { --divide-color: var(--color-primary); } .divide-secondary > * + * { --divide-color: var(--color-secondary); } .divide-surface > * + * { --divide-color: var(--color-surface); } .divide-success > * + * { --divide-color: var(--color-success); } .divide-danger > * + * { --divide-color: var(--color-danger); } .divide-white > * + * { --divide-color: #fff; } .divide-black > * + * { --divide-color: #000; } /* --- Space Between (Abstände zwischen Kinder-Elementen) --- */ .space-x-1 > * + * { margin-left: 0.25rem !important; } .space-x-2 > * + * { margin-left: 0.5rem !important; } .space-x-3 > * + * { margin-left: 0.75rem !important; } .space-x-4 > * + * { margin-left: 1rem !important; } .space-x-5 > * + * { margin-left: 1.25rem !important; } .space-x-6 > * + * { margin-left: 1.5rem !important; } .space-x-8 > * + * { margin-left: 2rem !important; } .space-x-10 > * + * { margin-left: 2.5rem !important; } .space-x-12 > * + * { margin-left: 3rem !important; } .space-x-16 > * + * { margin-left: 4rem !important; } .space-x-20 > * + * { margin-left: 5rem !important; } .space-x-24 > * + * { margin-left: 6rem !important; } .space-x-32 > * + * { margin-left: 8rem !important; } .space-x-40 > * + * { margin-left: 10rem !important; } .space-x-48 > * + * { margin-left: 12rem !important; } .space-y-1 > * + * { margin-top: 0.25rem !important; } .space-y-2 > * + * { margin-top: 0.5rem !important; } .space-y-3 > * + * { margin-top: 0.75rem !important; } .space-y-4 > * + * { margin-top: 1rem !important; } .space-y-5 > * + * { margin-top: 1.25rem !important; } .space-y-6 > * + * { margin-top: 1.5rem !important; } .space-y-8 > * + * { margin-top: 2rem !important; } .space-y-10 > * + * { margin-top: 2.5rem !important; } .space-y-12 > * + * { margin-top: 3rem !important; } .space-y-16 > * + * { margin-top: 4rem !important; } .space-y-20 > * + * { margin-top: 5rem !important; } .space-y-24 > * + * { margin-top: 6rem !important; } .space-y-32 > * + * { margin-top: 8rem !important; } .space-y-40 > * + * { margin-top: 10rem !important; } .space-y-48 > * + * { margin-top: 12rem !important; } /* ========================================================================== 4. SCHATTEN & EFFEKTE ========================================================================== */ /* --- Box Shadow --- Referenziert --shadow-* Tokens aus tokens.css. Single Source of Truth: Werte ändern → alle Utilities folgen. */ .shadow-sm { box-shadow: var(--shadow-sm) !important; } .shadow { box-shadow: var(--shadow) !important; } .shadow-md { box-shadow: var(--shadow-md) !important; } .shadow-lg { box-shadow: var(--shadow-lg) !important; } .shadow-xl { box-shadow: var(--shadow-xl) !important; } .shadow-2xl { box-shadow: var(--shadow-2xl) !important; } .shadow-inner { box-shadow: var(--shadow-inner) !important; } .shadow-none { box-shadow: none !important; } /* --- Text Shadow --- */ .text-shadow-sm { text-shadow: 0 1px 2px oklch(0 0 0 / .25) !important; } .text-shadow { text-shadow: 0 1px 3px oklch(0 0 0 / .3), 0 1px 2px oklch(0 0 0 / .2) !important; } .text-shadow-lg { text-shadow: 0 4px 6px oklch(0 0 0 / .3) !important; } .text-shadow-none { text-shadow: none !important; } /* --- Opacity --- */ .opacity-0 { opacity: 0 !important; } .opacity-5 { opacity: 0.05 !important; } .opacity-10 { opacity: 0.1 !important; } .opacity-20 { opacity: 0.2 !important; } .opacity-25 { opacity: 0.25 !important; } .opacity-30 { opacity: 0.3 !important; } .opacity-40 { opacity: 0.4 !important; } .opacity-50 { opacity: 0.5 !important; } .opacity-60 { opacity: 0.6 !important; } .opacity-70 { opacity: 0.7 !important; } .opacity-75 { opacity: 0.75 !important; } .opacity-80 { opacity: 0.8 !important; } .opacity-90 { opacity: 0.9 !important; } .opacity-95 { opacity: 0.95 !important; } .opacity-100 { opacity: 1 !important; } /* --- Filter --- */ .blur-none { filter: blur(0) !important; } .blur-sm { filter: blur(4px) !important; } .blur { filter: blur(8px) !important; } .blur-md { filter: blur(12px) !important; } .blur-lg { filter: blur(16px) !important; } .blur-xl { filter: blur(24px) !important; } .blur-2xl { filter: blur(40px) !important; } .blur-3xl { filter: blur(64px) !important; } .brightness-0 { filter: brightness(0) !important; } .brightness-50 { filter: brightness(.5) !important; } .brightness-75 { filter: brightness(.75) !important; } .brightness-90 { filter: brightness(.9) !important; } .brightness-100 { filter: brightness(1) !important; } .brightness-105 { filter: brightness(1.05) !important; } .brightness-110 { filter: brightness(1.1) !important; } .brightness-125 { filter: brightness(1.25) !important; } .brightness-150 { filter: brightness(1.5) !important; } .brightness-200 { filter: brightness(2) !important; } .contrast-0 { filter: contrast(0) !important; } .contrast-50 { filter: contrast(.5) !important; } .contrast-75 { filter: contrast(.75) !important; } .contrast-100 { filter: contrast(1) !important; } .contrast-125 { filter: contrast(1.25) !important; } .contrast-150 { filter: contrast(1.5) !important; } .contrast-200 { filter: contrast(2) !important; } .grayscale-0 { filter: grayscale(0) !important; } .grayscale { filter: grayscale(100%) !important; } .invert-0 { filter: invert(0) !important; } .invert { filter: invert(100%) !important; } .saturate-0 { filter: saturate(0) !important; } .saturate-50 { filter: saturate(.5) !important; } .saturate-100 { filter: saturate(1) !important; } .saturate-150 { filter: saturate(1.5) !important; } .saturate-200 { filter: saturate(2) !important; } .sepia-0 { filter: sepia(0) !important; } .sepia { filter: sepia(100%) !important; } /* --- Drop Shadow (filter-basiert, für PNGs/SVGs mit Transparenz) --- Nutzt filter: drop-shadow() statt box-shadow. Vorteil: Folgt dem Kontur des Bildes, nicht der Box. Achtung: Kann nicht mit anderen filter-Utilities kombiniert werden (alle nutzen die filter-Property direkt). */ .drop-shadow-sm { filter: drop-shadow(0 1px 1px oklch(0 0 0 / .05)) !important; } .drop-shadow { filter: drop-shadow(0 1px 2px oklch(0 0 0 / .1)) drop-shadow(0 1px 1px oklch(0 0 0 / .06)) !important; } .drop-shadow-md { filter: drop-shadow(0 4px 3px oklch(0 0 0 / .07)) drop-shadow(0 2px 2px oklch(0 0 0 / .06)) !important; } .drop-shadow-lg { filter: drop-shadow(0 10px 8px oklch(0 0 0 / .04)) drop-shadow(0 4px 3px oklch(0 0 0 / .1)) !important; } .drop-shadow-xl { filter: drop-shadow(0 20px 13px oklch(0 0 0 / .03)) drop-shadow(0 8px 5px oklch(0 0 0 / .08)) !important; } .drop-shadow-2xl { filter: drop-shadow(0 25px 25px oklch(0 0 0 / .15)) !important; } .drop-shadow-none { filter: drop-shadow(0 0 #0000) !important; } /* --- Backdrop Filter --- */ .backdrop-blur-none { backdrop-filter: blur(0) !important; } .backdrop-blur-sm { backdrop-filter: blur(4px) !important; } .backdrop-blur { backdrop-filter: blur(8px) !important; } .backdrop-blur-md { backdrop-filter: blur(12px) !important; } .backdrop-blur-lg { backdrop-filter: blur(16px) !important; } .backdrop-blur-xl { backdrop-filter: blur(24px) !important; } .backdrop-blur-2xl { backdrop-filter: blur(40px) !important; } .backdrop-brightness-50 { backdrop-filter: brightness(.5) !important; } .backdrop-brightness-75 { backdrop-filter: brightness(.75) !important; } .backdrop-brightness-100 { backdrop-filter: brightness(1) !important; } .backdrop-brightness-125 { backdrop-filter: brightness(1.25) !important; } .backdrop-brightness-150 { backdrop-filter: brightness(1.5) !important; } .backdrop-saturate-0 { backdrop-filter: saturate(0) !important; } .backdrop-saturate-100 { backdrop-filter: saturate(1) !important; } .backdrop-saturate-150 { backdrop-filter: saturate(1.5) !important; } .backdrop-saturate-200 { backdrop-filter: saturate(2) !important; } .backdrop-opacity-0 { backdrop-filter: opacity(0) !important; } .backdrop-opacity-5 { backdrop-filter: opacity(0.05) !important; } .backdrop-opacity-10 { backdrop-filter: opacity(0.1) !important; } .backdrop-opacity-25 { backdrop-filter: opacity(0.25) !important; } .backdrop-opacity-50 { backdrop-filter: opacity(0.5) !important; } .backdrop-opacity-75 { backdrop-filter: opacity(0.75) !important; } .backdrop-opacity-90 { backdrop-filter: opacity(0.9) !important; } .backdrop-opacity-100 { backdrop-filter: opacity(1) !important; } /* --- Mix Blend Mode --- */ .mix-blend-normal { mix-blend-mode: normal !important; } .mix-blend-multiply { mix-blend-mode: multiply !important; } .mix-blend-screen { mix-blend-mode: screen !important; } .mix-blend-overlay { mix-blend-mode: overlay !important; } .mix-blend-darken { mix-blend-mode: darken !important; } .mix-blend-lighten { mix-blend-mode: lighten !important; } /* --- Object Fit & Position --- */ .object-cover { object-fit: cover !important; } .object-contain { object-fit: contain !important; } .object-fill { object-fit: fill !important; } .object-none { object-fit: none !important; } .object-scale-down { object-fit: scale-down !important; } .object-center { object-position: center !important; } .object-top { object-position: top !important; } .object-bottom { object-position: bottom !important; } .object-left { object-position: left !important; } .object-right { object-position: right !important; } /* --- Aspect Ratio --- */ .aspect-auto { aspect-ratio: auto !important; } .aspect-square { aspect-ratio: 1 / 1 !important; } .aspect-video { aspect-ratio: 16 / 9 !important; } .aspect-4\/3 { aspect-ratio: 4 / 3 !important; } .aspect-3\/4 { aspect-ratio: 3 / 4 !important; } .aspect-3\/2 { aspect-ratio: 3 / 2 !important; } .aspect-9\/16 { aspect-ratio: 9 / 16 !important; } /* ========================================================================== 5. TRANSITIONS, TRANSFORMS & ANIMATIONS ========================================================================== */ /* --- 5a. Transitions --- Compound-Klassen referenzieren --duration-base und --ease-default aus tokens.css. Individuelle Overrides (.duration-*, .ease-*) setzen explizite Werte. */ .transition-none { transition-property: none; } .transition-all { transition-property: all; transition-duration: var(--duration-base); transition-timing-function: var(--ease-default); } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-duration: var(--duration-base); transition-timing-function: var(--ease-default); } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-duration: var(--duration-base); transition-timing-function: var(--ease-default); } .transition-opacity { transition-property: opacity; transition-duration: var(--duration-base); transition-timing-function: var(--ease-default); } .transition-shadow { transition-property: box-shadow; transition-duration: var(--duration-base); transition-timing-function: var(--ease-default); } .transition-transform { transition-property: transform, translate, rotate, scale; transition-duration: var(--duration-base); transition-timing-function: var(--ease-default); } .duration-75 { transition-duration: 75ms; } .duration-100 { transition-duration: 100ms; } .duration-150 { transition-duration: 150ms; } .duration-200 { transition-duration: 200ms; } .duration-300 { transition-duration: 300ms; } .duration-500 { transition-duration: 500ms; } .duration-700 { transition-duration: 700ms; } .duration-1000 { transition-duration: 1000ms; } .ease-linear { transition-timing-function: linear; } .ease-in { transition-timing-function: ease-in; } .ease-out { transition-timing-function: var(--ease-out); } .ease-in-out { transition-timing-function: var(--ease-default); } .ease-bounce { transition-timing-function: var(--ease-bounce); } .delay-0 { transition-delay: 0ms; } .delay-75 { transition-delay: 75ms; } .delay-100 { transition-delay: 100ms; } .delay-150 { transition-delay: 150ms; } .delay-200 { transition-delay: 200ms; } .delay-300 { transition-delay: 300ms; } .delay-500 { transition-delay: 500ms; } /* --- 5b. Animation Presets --- Fertige Animationen als Utility-Klassen. Für zustandsbasierte Übergänge (A→B, z.B. Hover): .transition-* nutzen. Für Scroll-Trigger: data-lazy-animation nutzen. Diese Klassen sind für: - Endlos-Animationen (Spinner, Pulse) - Aufmerksamkeits-Effekte (Bounce, Ping) Alle Presets respektieren prefers-reduced-motion (siehe Ende). ---------------------------------------------------------------- */ @keyframes spin { to { rotate: 360deg; } } @keyframes ping { 75%, 100% { scale: 2; opacity: 0; } } @keyframes pulse { 50% { opacity: .5; } } @keyframes bounce { 0%, 100% { translate: 0 -25%; animation-timing-function: cubic-bezier(.8, 0, 1, 1); } 50% { translate: 0 0; animation-timing-function: cubic-bezier(0, 0, .2, 1); } } .animate-spin { animation: spin 1s linear infinite !important; } .animate-ping { animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite !important; } .animate-pulse { animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite !important; } .animate-bounce { animation: bounce 1s infinite !important; } .animate-none { animation: none !important; } @media (prefers-reduced-motion: reduce) { .animate-spin, .animate-ping, .animate-pulse, .animate-bounce { animation: none !important; } } /* --- 5c. Transforms --- ARCHITEKTUR: Individuelle CSS Transform-Properties Statt `transform: scale() rotate() translate()` nutzen wir die eigenständigen Properties `scale`, `rotate`, `translate`. Vorteil: Composable — class="rotate-45 scale-105 -translate-x-1/2" funktioniert ohne dass sich die Klassen gegenseitig überschreiben. Browser-Support: Alle modernen Browser (Baseline 2022). Spec: CSS Transforms Level 2 ---------------------------------------------------------------- */ /* --- Scale --- */ .scale-0 { scale: 0 !important; } .scale-50 { scale: .5 !important; } .scale-75 { scale: .75 !important; } .scale-90 { scale: .9 !important; } .scale-95 { scale: .95 !important; } .scale-100 { scale: 1 !important; } .scale-105 { scale: 1.05 !important; } .scale-110 { scale: 1.1 !important; } .scale-125 { scale: 1.25 !important; } .scale-150 { scale: 1.5 !important; } /* --- Rotate --- */ .rotate-0 { rotate: 0deg !important; } .rotate-1 { rotate: 1deg !important; } .rotate-2 { rotate: 2deg !important; } .rotate-3 { rotate: 3deg !important; } .rotate-6 { rotate: 6deg !important; } .rotate-12 { rotate: 12deg !important; } .rotate-45 { rotate: 45deg !important; } .rotate-90 { rotate: 90deg !important; } .rotate-180 { rotate: 180deg !important; } .-rotate-1 { rotate: -1deg !important; } .-rotate-2 { rotate: -2deg !important; } .-rotate-3 { rotate: -3deg !important; } .-rotate-6 { rotate: -6deg !important; } .-rotate-12 { rotate: -12deg !important; } .-rotate-45 { rotate: -45deg !important; } .-rotate-90 { rotate: -90deg !important; } .-rotate-180 { rotate: -180deg !important; } /* --- Translate --- translate-Property: translate: Skala: 4px-Grid (0.25rem = 4px) Zusätzlich: 1/2 (50%), full (100%) für Zentrierungs-Patterns ⚠️ translate-x-* und translate-y-* können NICHT gleichzeitig auf dasselbe Element gesetzt werden — beide schreiben `translate`. Für X+Y gleichzeitig: .translate-custom nutzen. ---------------------------------------------------------------- */ /* X-Achse — positiv */ .translate-x-0 { translate: 0 0 !important; } .translate-x-1 { translate: 0.25rem 0 !important; } .translate-x-2 { translate: 0.5rem 0 !important; } .translate-x-3 { translate: 0.75rem 0 !important; } .translate-x-4 { translate: 1rem 0 !important; } .translate-x-6 { translate: 1.5rem 0 !important; } .translate-x-8 { translate: 2rem 0 !important; } .translate-x-1\/2 { translate: 50% 0 !important; } .translate-x-full { translate: 100% 0 !important; } /* X-Achse — negativ */ .-translate-x-1 { translate: -0.25rem 0 !important; } .-translate-x-2 { translate: -0.5rem 0 !important; } .-translate-x-3 { translate: -0.75rem 0 !important; } .-translate-x-4 { translate: -1rem 0 !important; } .-translate-x-6 { translate: -1.5rem 0 !important; } .-translate-x-8 { translate: -2rem 0 !important; } .-translate-x-1\/2 { translate: -50% 0 !important; } .-translate-x-full { translate: -100% 0 !important; } /* Y-Achse — positiv */ .translate-y-0 { translate: 0 0 !important; } .translate-y-1 { translate: 0 0.25rem !important; } .translate-y-2 { translate: 0 0.5rem !important; } .translate-y-3 { translate: 0 0.75rem !important; } .translate-y-4 { translate: 0 1rem !important; } .translate-y-6 { translate: 0 1.5rem !important; } .translate-y-8 { translate: 0 2rem !important; } .translate-y-1\/2 { translate: 0 50% !important; } .translate-y-full { translate: 0 100% !important; } /* Y-Achse — negativ */ .-translate-y-1 { translate: 0 -0.25rem !important; } .-translate-y-2 { translate: 0 -0.5rem !important; } .-translate-y-3 { translate: 0 -0.75rem !important; } .-translate-y-4 { translate: 0 -1rem !important; } .-translate-y-6 { translate: 0 -1.5rem !important; } .-translate-y-8 { translate: 0 -2rem !important; } .-translate-y-1\/2 { translate: 0 -50% !important; } .-translate-y-full { translate: 0 -100% !important; } /* --- Translate Custom --- Für beliebige Werte per Inline-Variable im CMS Live Editor. translate-custom erlaubt X+Y gleichzeitig (was die Einzel-Klassen nicht können). Beispiel:
---------------------------------------------------------------- */ .translate-x-custom { translate: var(--tw-x, 0) 0 !important; } .translate-y-custom { translate: 0 var(--tw-y, 0) !important; } .translate-custom { translate: var(--tw-x, 0) var(--tw-y, 0) !important; } /* --- Centering Shortcuts --- Die häufigsten Positionierungs-Patterns als Compound-Utilities. center-xy: Exakte Zentrierung auf beiden Achsen center-x: Nur horizontal zentriert center-y: Nur vertikal zentriert Setzt jeweils position: absolute + Offset + translate in einer Klasse. Beispiel:
Zentriert
---------------------------------------------------------------- */ .center-xy { position: absolute !important; top: 50% !important; left: 50% !important; translate: -50% -50% !important; } .center-x { position: absolute !important; left: 50% !important; translate: -50% 0 !important; } .center-y { position: absolute !important; top: 50% !important; translate: 0 -50% !important; } /* --- Skew --- Kein natives CSS-Property für skew (anders als scale/rotate/translate). Nutzt daher transform: skewX/Y() — nicht mit anderen transform-basierten Klassen kombinierbar (überschreiben sich gegenseitig). Für Composability mit scale/rotate/translate: .translate-custom nutzen. */ .skew-x-1 { transform: skewX(1deg) !important; } .skew-x-2 { transform: skewX(2deg) !important; } .skew-x-3 { transform: skewX(3deg) !important; } .skew-x-6 { transform: skewX(6deg) !important; } .skew-x-12 { transform: skewX(12deg) !important; } .-skew-x-1 { transform: skewX(-1deg) !important; } .-skew-x-2 { transform: skewX(-2deg) !important; } .-skew-x-3 { transform: skewX(-3deg) !important; } .-skew-x-6 { transform: skewX(-6deg) !important; } .-skew-x-12 { transform: skewX(-12deg) !important; } .skew-y-1 { transform: skewY(1deg) !important; } .skew-y-2 { transform: skewY(2deg) !important; } .skew-y-3 { transform: skewY(3deg) !important; } .skew-y-6 { transform: skewY(6deg) !important; } .skew-y-12 { transform: skewY(12deg) !important; } .-skew-y-1 { transform: skewY(-1deg) !important; } .-skew-y-2 { transform: skewY(-2deg) !important; } .-skew-y-3 { transform: skewY(-3deg) !important; } .-skew-y-6 { transform: skewY(-6deg) !important; } .-skew-y-12 { transform: skewY(-12deg) !important; } /* --- Transform Origin --- */ .origin-center { transform-origin: center !important; } .origin-top { transform-origin: top !important; } .origin-top-right { transform-origin: top right !important; } .origin-right { transform-origin: right !important; } .origin-bottom-right { transform-origin: bottom right !important; } .origin-bottom { transform-origin: bottom !important; } .origin-bottom-left { transform-origin: bottom left !important; } .origin-left { transform-origin: left !important; } .origin-top-left { transform-origin: top left !important; } /* ========================================================================== 6. INTERAKTIV ========================================================================== */ /* --- Cursor --- */ .cursor-auto { cursor: auto !important; } .cursor-default { cursor: default !important; } .cursor-pointer { cursor: pointer !important; } .cursor-wait { cursor: wait !important; } .cursor-text { cursor: text !important; } .cursor-move { cursor: move !important; } .cursor-help { cursor: help !important; } .cursor-not-allowed { cursor: not-allowed !important; } .cursor-none { cursor: none !important; } .cursor-grab { cursor: grab !important; } .cursor-grabbing { cursor: grabbing !important; } .cursor-zoom-in { cursor: zoom-in !important; } .cursor-zoom-out { cursor: zoom-out !important; } /* --- Pointer Events --- */ .pointer-events-none { pointer-events: none !important; } .pointer-events-auto { pointer-events: auto !important; } /* --- User Select --- */ .select-none { user-select: none !important; } .select-text { user-select: text !important; } .select-all { user-select: all !important; } .select-auto { user-select: auto !important; } /* --- Touch Action --- */ .touch-auto { touch-action: auto !important; } .touch-none { touch-action: none !important; } .touch-manipulation { touch-action: manipulation !important; } /* --- Scroll Behavior --- */ .scroll-auto { scroll-behavior: auto !important; } .scroll-smooth { scroll-behavior: smooth !important; } /* --- Scroll Snap --- */ .snap-start { scroll-snap-align: start !important; } .snap-end { scroll-snap-align: end !important; } .snap-center { scroll-snap-align: center !important; } .snap-none { scroll-snap-type: none !important; } .snap-x { scroll-snap-type: x mandatory !important; } .snap-y { scroll-snap-type: y mandatory !important; } /* --- Resize --- */ .resize-none { resize: none !important; } .resize-x { resize: horizontal !important; } .resize-y { resize: vertical !important; } .resize { resize: both !important; } /* --- Appearance --- */ .appearance-none { appearance: none !important; } .appearance-auto { appearance: auto !important; } /* --- Will Change --- Hinweis an den Browser welche Properties sich ändern werden, damit er vorab Compositing-Layer anlegen kann. Sparsam einsetzen — zu viel will-change kostet Speicher. */ .will-change-auto { will-change: auto !important; } .will-change-scroll { will-change: scroll-position !important; } .will-change-transform { will-change: transform !important; } .will-change-opacity { will-change: opacity !important; } .will-change-contents { will-change: contents !important; } /* --- Isolation --- */ .isolate { isolation: isolate !important; } .isolate-auto { isolation: auto !important; } /* --- Table Layout --- */ .table-auto { table-layout: auto !important; } .table-fixed { table-layout: fixed !important; } /* --- Columns --- */ .columns-1 { columns: 1 !important; } .columns-2 { columns: 2 !important; } .columns-3 { columns: 3 !important; } .columns-4 { columns: 4 !important; } .break-inside-auto { break-inside: auto !important; } .break-inside-avoid { break-inside: avoid !important; } .break-before-auto { break-before: auto !important; } .break-after-auto { break-after: auto !important; } .break-before-page { break-before: page !important; } .break-after-page { break-after: page !important; } /* --- Float & Clear --- */ .float-left { float: left !important; } .float-right { float: right !important; } .float-none { float: none !important; } .clear-left { clear: left !important; } .clear-right { clear: right !important; } .clear-both { clear: both !important; } .clear-none { clear: none !important; } /* --- Content Visibility --- */ .invisible { visibility: hidden !important; } .visible { visibility: visible !important; } .collapse { visibility: collapse !important; } /* --- Content Visibility (Performance) --- content-visibility: auto lässt den Browser Elemente außerhalb des Viewports überspringen (kein Layout, kein Paint). Sinnvoll für lange Seiten mit vielen Sektionen. contain-intrinsic-size verhindert Layout-Shifts beim Scrollen — der Browser reserviert geschätzte Höhe. Default 500px, per Custom Property überschreibbar. ---------------------------------------------------------------- */ .content-auto { content-visibility: auto !important; contain-intrinsic-size: auto var(--contain-size, 500px) !important; } /* --- Scroll Margin --- Offset für Anchor-Links bei sticky Navigation. Ohne scroll-margin verschwindet das Sprungziel hinter der Nav. Hauptwert: scroll-mt-nav nutzt --quickbar-height — ein CMS-spezifischer Override-Hook, vom CMS-JS dynamisch auf die aktuelle Quickbar-Höhe gesetzt. Ohne CMS greift der Fallback 4rem. Feste Werte für Sonderfälle (z.B. zusätzlicher Banner über der Nav). ---------------------------------------------------------------- */ .scroll-mt-0 { scroll-margin-top: 0 !important; } .scroll-mt-4 { scroll-margin-top: 1rem !important; } .scroll-mt-8 { scroll-margin-top: 2rem !important; } .scroll-mt-16 { scroll-margin-top: 4rem !important; } .scroll-mt-20 { scroll-margin-top: 5rem !important; } .scroll-mt-24 { scroll-margin-top: 6rem !important; } .scroll-mt-nav { scroll-margin-top: var(--quickbar-height, 4rem) !important; } .scroll-mb-0 { scroll-margin-bottom: 0 !important; } .scroll-mb-4 { scroll-margin-bottom: 1rem !important; } .scroll-mb-8 { scroll-margin-bottom: 2rem !important; } .scroll-mb-16 { scroll-margin-bottom: 4rem !important; } .scroll-ml-0 { scroll-margin-left: 0 !important; } .scroll-ml-4 { scroll-margin-left: 1rem !important; } .scroll-ml-8 { scroll-margin-left: 2rem !important; } .scroll-mr-0 { scroll-margin-right: 0 !important; } .scroll-mr-4 { scroll-margin-right: 1rem !important; } .scroll-mr-8 { scroll-margin-right: 2rem !important; } /* Scroll Padding — sorgt dafür dass Snap-Points oder Anchor-Ziele mit Abstand zum Viewport-Rand rasten (anders als scroll-margin, das auf dem Element sitzt, sitzt scroll-padding auf dem Container). */ .scroll-pt-0 { scroll-padding-top: 0 !important; } .scroll-pt-4 { scroll-padding-top: 1rem !important; } .scroll-pt-8 { scroll-padding-top: 2rem !important; } .scroll-pt-16 { scroll-padding-top: 4rem !important; } .scroll-pt-nav { scroll-padding-top: var(--quickbar-height, 4rem) !important; } .scroll-pb-0 { scroll-padding-bottom: 0 !important; } .scroll-pb-4 { scroll-padding-bottom: 1rem !important; } .scroll-pb-8 { scroll-padding-bottom: 2rem !important; } .scroll-pl-0 { scroll-padding-left: 0 !important; } .scroll-pl-4 { scroll-padding-left: 1rem !important; } .scroll-pl-8 { scroll-padding-left: 2rem !important; } .scroll-pr-0 { scroll-padding-right: 0 !important; } .scroll-pr-4 { scroll-padding-right: 1rem !important; } .scroll-pr-8 { scroll-padding-right: 2rem !important; } /* ========================================================================== 7. SVG ========================================================================== */ .fill-current { fill: currentColor !important; } .fill-none { fill: none !important; } .fill-transparent { fill: transparent !important; } .fill-white { fill: #fff !important; } .fill-black { fill: #000 !important; } .fill-primary { fill: var(--color-primary) !important; } .fill-secondary { fill: var(--color-secondary) !important; } .fill-tertiary { fill: var(--color-tertiary) !important; } .fill-background { fill: var(--color-background) !important; } .fill-surface { fill: var(--color-surface) !important; } .fill-warning { fill: var(--color-warning) !important; } .fill-success { fill: var(--color-success) !important; } .fill-danger { fill: var(--color-danger) !important; } /* Fill Varianten (color-mix) */ .fill-primary-bright { fill: var(--color-primary-bright) !important; } .fill-primary-dark { fill: var(--color-primary-dark) !important; } .fill-secondary-bright { fill: var(--color-secondary-bright) !important; } .fill-secondary-dark { fill: var(--color-secondary-dark) !important; } .fill-tertiary-bright { fill: var(--color-tertiary-bright) !important; } .fill-tertiary-dark { fill: var(--color-tertiary-dark) !important; } .stroke-current { stroke: currentColor !important; } .stroke-none { stroke: none !important; } .stroke-transparent { stroke: transparent !important; } .stroke-white { stroke: #fff !important; } .stroke-black { stroke: #000 !important; } .stroke-primary { stroke: var(--color-primary) !important; } .stroke-secondary { stroke: var(--color-secondary) !important; } .stroke-tertiary { stroke: var(--color-tertiary) !important; } .stroke-surface { stroke: var(--color-surface) !important; } .stroke-warning { stroke: var(--color-warning) !important; } .stroke-success { stroke: var(--color-success) !important; } .stroke-danger { stroke: var(--color-danger) !important; } .stroke-0 { stroke-width: 0 !important; } .stroke-1 { stroke-width: 1 !important; } .stroke-2 { stroke-width: 2 !important; } /* ========================================================================== 8. ACCESSIBILITY ========================================================================== */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } .not-sr-only { position: static !important; width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; clip-path: none !important; white-space: normal !important; } /* ========================================================================== 9. FORMULAR-UTILITIES Ergänzung zu forms.css (Component-Layer). forms.css stylt die CMS-Formular-Komponente. Diese Utilities sind frei kombinierbar auf beliebigen Formular-Elementen. ========================================================================== */ /* --- Accent Color --- Stylt native Checkboxen, Radios und Range-Inputs in der Projektfarbe. Kein Custom-Styling nötig — der Browser übernimmt die Farbe. ---------------------------------------------------------------- */ .accent-primary { accent-color: var(--color-primary) !important; } .accent-secondary { accent-color: var(--color-secondary) !important; } .accent-tertiary { accent-color: var(--color-tertiary) !important; } .accent-surface { accent-color: var(--color-surface) !important; } .accent-success { accent-color: var(--color-success) !important; } .accent-danger { accent-color: var(--color-danger) !important; } .accent-auto { accent-color: auto !important; } /* --- Caret Color --- Farbe des Text-Cursors in Input/Textarea. ---------------------------------------------------------------- */ .caret-primary { caret-color: var(--color-primary) !important; } .caret-secondary { caret-color: var(--color-secondary) !important; } .caret-tertiary { caret-color: var(--color-tertiary) !important; } .caret-current { caret-color: currentColor !important; } .caret-transparent { caret-color: transparent !important; } /* --- Placeholder --- Farbe und Opacity des Placeholder-Texts. ⚠️ Pseudo-Element — kann nicht per Utility auf das Element selbst, sondern nur per Klasse auf dem Input/Textarea gesetzt werden. ---------------------------------------------------------------- */ .placeholder-surface::placeholder { color: var(--color-surface) !important; opacity: 1 !important; } .placeholder-surface-text::placeholder { color: var(--color-surface-text) !important; opacity: 1 !important; } .placeholder-current::placeholder { color: currentColor !important; opacity: .5 !important; } .placeholder-muted::placeholder { color: currentColor !important; opacity: .4 !important; } /* ========================================================================== 10. ICON-SYSTEM — Basis-Klasse (Framework-Infrastruktur) Setzt font-smoothing, display und line-height für Icon-Fonts via ::before. Die konkreten Icon-Klassen (.icon-envelope etc.) sind projektspezifisch und werden in theme.css definiert. Nutzung: ========================================================================== */ .icon { line-height: 1 !important; &::before { -moz-osx-font-smoothing: grayscale !important; -webkit-font-smoothing: antialiased !important; display: inline-block !important; font-style: normal !important; font-variant: normal !important; text-rendering: auto !important; line-height: 1 !important; font-family: var(--icon-font) !important; font-weight: var(--icon-font-weight) !important; } } /* ========================================================================== 11. OVERLAY-SYSTEM Pseudo-Element-basiertes Overlay für Teaser, Hero, Karten. .overlay aktiviert das ::before-Gerüst. Farbe, Opacity, Gradient und Blur über Custom Properties steuerbar. Nutzung:
→ 50% schwarzer Schleier
→ 30% schwarzer Schleier
→ 70% schwarzer Schleier
→ Gradient von unten
→ Blur-Effekt Kombinierbar: class="overlay overlay-gradient overlay-blur" Custom via CMS-UI (Inline-Variablen): style="--overlay-color: oklch(0.2 0.05 250 / 0.6)" style="--overlay-blur: 12px" style="--overlay-direction: to bottom right" ⚠️ Content über dem Overlay braucht position: relative + z-index > 1. Das Framework erzwingt das NICHT automatisch auf Kinder-Elemente, weil das bei absolut positionierten Kindern Seiteneffekte hätte. Lösung: .relative .z-10 auf das Content-Element setzen. ========================================================================== */ .overlay { position: relative !important; overflow: hidden !important; &::before { content: '' !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; background: var(--overlay-color, oklch(0 0 0 / 0.5)) !important; transition: opacity var(--duration-base) var(--ease-default) !important; } } /* --- Opacity-Presets --- */ .overlay-light { --overlay-color: oklch(0 0 0 / 0.3); } .overlay-dark { --overlay-color: oklch(0 0 0 / 0.7); } /* --- Gradient-Overlay --- Ersetzt den soliden Schleier durch einen Gradient. Richtung via --overlay-direction (default: to top = von unten nach oben). Farbe via --overlay-color (default: 70% schwarz → transparent). */ .overlay-gradient::before { background: linear-gradient( var(--overlay-direction, to top), var(--overlay-color, oklch(0 0 0 / 0.7)), transparent ) !important; } /* --- Blur-Overlay --- Addiert backdrop-filter. Kombinierbar mit .overlay oder .overlay-gradient. Stärke via --overlay-blur (default: 8px). */ .overlay-blur::before { backdrop-filter: blur(var(--overlay-blur, 8px)) !important; } /* --- Weißes Overlay (helle Varianten) --- */ .overlay-white { --overlay-color: oklch(1 0 0 / 0.5); } .overlay-white-light { --overlay-color: oklch(1 0 0 / 0.3); } .overlay-white-dark { --overlay-color: oklch(1 0 0 / 0.7); } /* ========================================================================== 12. GRADIENT-UTILITIES Direkte Gradients auf Elementen (Hintergründe, CTAs, Divider). Nicht Overlay-bezogen — für Background-Gradients. Richtungs-Klasse wählt die Achse. Farben via --gradient-from und --gradient-to (Custom Properties). Nutzung:
Preset-Farben: class="gradient-to-r from-primary to-transparent" ========================================================================== */ /* --- Richtungen --- */ .gradient-to-t { background-image: linear-gradient(to top, var(--gradient-from, transparent), var(--gradient-to, oklch(0 0 0))) !important; } .gradient-to-b { background-image: linear-gradient(to bottom, var(--gradient-from, transparent), var(--gradient-to, oklch(0 0 0))) !important; } .gradient-to-r { background-image: linear-gradient(to right, var(--gradient-from, transparent), var(--gradient-to, oklch(0 0 0))) !important; } .gradient-to-l { background-image: linear-gradient(to left, var(--gradient-from, transparent), var(--gradient-to, oklch(0 0 0))) !important; } .gradient-to-br { background-image: linear-gradient(to bottom right, var(--gradient-from, transparent), var(--gradient-to, oklch(0 0 0))) !important; } .gradient-to-tl { background-image: linear-gradient(to top left, var(--gradient-from, transparent), var(--gradient-to, oklch(0 0 0))) !important; } .gradient-to-bl { background-image: linear-gradient(to bottom left, var(--gradient-from, transparent), var(--gradient-to, oklch(0 0 0))) !important; } .gradient-to-tr { background-image: linear-gradient(to top right, var(--gradient-from, transparent), var(--gradient-to, oklch(0 0 0))) !important; } .gradient-none { background-image: none !important; } /* --- From-Presets (Startfarbe) --- */ .from-primary { --gradient-from: var(--color-primary); } .from-secondary { --gradient-from: var(--color-secondary); } .from-tertiary { --gradient-from: var(--color-tertiary); } .from-background { --gradient-from: var(--color-background); } .from-surface { --gradient-from: var(--color-surface); } .from-surface-elevated { --gradient-from: var(--color-surface-elevated); } .from-black { --gradient-from: oklch(0 0 0); } .from-white { --gradient-from: oklch(1 0 0); } .from-transparent { --gradient-from: transparent; } /* --- To-Presets (Endfarbe) --- */ .to-primary { --gradient-to: var(--color-primary); } .to-secondary { --gradient-to: var(--color-secondary); } .to-tertiary { --gradient-to: var(--color-tertiary); } .to-background { --gradient-to: var(--color-background); } .to-surface { --gradient-to: var(--color-surface); } .to-surface-elevated { --gradient-to: var(--color-surface-elevated); } .to-black { --gradient-to: oklch(0 0 0); } .to-white { --gradient-to: oklch(1 0 0); } .to-transparent { --gradient-to: transparent; } /* ========================================================================== 13. SECTION-SPACING Responsive vertikale Abstände für Sektionen/Abschnitte. Nutzt padding-block (logische Property, funktioniert mit writing-mode). Werte auf 4px-Grid gerundet: Mobile Tablet (≥760px) Desktop (≥1200px) sm 32px 48px 64px md 64px 80px 96px lg 96px 112px 128px xl 128px 144px 160px Überschreibbar mit Utilities (utilities-Layer > dieses Pattern):
→ kein Padding unten ========================================================================== */ /* --- Mobile (default) --- */ .section-sm { padding-block: 2rem !important; } /* 32px */ .section-md { padding-block: 4rem !important; } /* 64px */ .section-lg { padding-block: 6rem !important; } /* 96px */ .section-xl { padding-block: 8rem !important; } /* 128px */ .section-none { padding-block: 0 !important; } /* --- Tablet (≥ 760px) --- */ @media (min-width: 760px) { .section-sm { padding-block: 3rem !important; } /* 48px */ .section-md { padding-block: 5rem !important; } /* 80px */ .section-lg { padding-block: 7rem !important; } /* 112px */ .section-xl { padding-block: 9rem !important; } /* 144px */ } /* --- Desktop (≥ 1200px) --- */ @media (min-width: 1200px) { .section-sm { padding-block: 4rem !important; } /* 64px */ .section-md { padding-block: 6rem !important; } /* 96px */ .section-lg { padding-block: 8rem !important; } /* 128px */ .section-xl { padding-block: 10rem !important; } /* 160px */ } /* ========================================================================== 14. GLOBAL DEFAULTS Framework-weite Regeln die auf alle Projekte angewandt werden. ========================================================================== */ /* --- Body Max-Width (Ultrawide-Constraint) --- Begrenzt den Body auf 1920px und zentriert ihn. Verhindert unlesbares Layout auf Ultrawide-Monitoren. Dezenter Schatten als optische Seitengrenze. */ @media (min-width: 1920px) { body { max-width: 120rem !important; margin-inline: auto !important; box-shadow: var(--shadow-lg) !important; } }