@casoon/dragonfly
Version:
Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.
1 lines • 162 kB
Source Map (JSON)
{"version":3,"sourceRoot":null,"mappings":"AA0BA,iIAYA,qBAEE,4OAaA,kGAMA,kGAMA,uJAOA,wMAWA,kLAOA,sFAMA,0CAKA,gFAIA,6CAIA,yEAKA,yHAMA,wDAMA,4EAKA,+BAKA,8FAMA,mDAMA,yEAKA,uDAMA,8CAEA,8CAEA,4CAEA,+CAGA,mGAMA,qDAMA,4HAOA,kDAEA,mDAEA,mDAEA,mDAEA,mDAEA,2DAMA,gIASA,kMAYA,wbAmBA,wDAKA,mHAMA,kGAOA,qOAUA,sFAMA,4HAOA,qGAOA,uCAEE,sVAwBF,sBACE,yDAKA,4FAKF,sBAEE,yDAEA,yDAEA,0DAGF,sBACE,+DAMF,uBACE,uEAMF,uCACE,6BAIA,4JA2CJ,aAEE,0DAOA,iGAOA,yCAIA,iNAUA,sBAIA,gDAMA,uEAOA,sHAUA,sBAIA,yBAKA,2DAMA,uCACE,0BAIA,gIAmCJ,0BAEE,2BAIA,oCAIA,sBAKA,qIAQA,sKAOA,6BAIA,yBAKA,0CAKA,0DAKA,0CAIA,sCAKA,uGAOA,oFAIA,gFAIA,6EAIA,+EAKA,wCAIA,mGAKA,6FAKA,iGAKA,gGAMA,qCAIA,iCAIA,kCAIA,mCAKA,gCAIA,4BAIA,gCAIA,4BAKA,mCAIA,iCAIA,kCAIA,gCAKA,mFAMA,mFAMA,mFAOA,yCAIA,yCAIA,yCAIA,yCAIA,2CAIA,2CAIA,2CAIA,2CAIA,0CAIA,0CAIA,0CAIA,0CAIA,4CAIA,4CAIA,4CAIA,4CAKA,qDAIA,qDAIA,qDAIA,qDAIA,iDAIA,iDAIA,iDAIA,iDAIA,uDAIA,uDAIA,uDAIA,uDAIA,mDAIA,mDAIA,mDAIA,mDAIA,sDAIA,sDAIA,sDAIA,sDAIA,kDAIA,kDAIA,kDAIA,kDAIA,wDAIA,wDAIA,wDAIA,wDAIA,oDAIA,oDAIA,oDAIA,oDAKA,sCAIA,oCAKA,sDAQA,uJAOA,iDAIA,uEAMA,uPAWA,+FAOA,6JAOA,qJAMA,2JAOA,4CAIA,6CAKA,8CAIA,4DAKA,sLASA,+IAOA,6CAKA,iDAKA,uKASA,sFAKA,gIAMA,4DAKA,wKAOA,+DAIA,kEAKA,mDAKA,kDAKA,uIAOA,6DAKA,qFAQA,0NAUA,sJAMA,uNAUA,sBACE,qDAKA,4FAMA,kEAQF,yCAIA,0CAKA,+FAQA,oCAMA,2IAOA,kKAOA,qKAOA,2FAMA,mKAOA,oKAQA,sBACE,yHAQA,4BAKF,sBACE,6EAQA,6BAQA,4CAIA,mCAIA,4CAIA,2DAOF,sBACE,+EAKA,4EAKA,0DAMF,sBACE,qEAMA,wFA6BJ,cACE,8g7BA+8BA,slDA8BA,+tBAyBF,iBACE,qnoCAwrBF,qBA+EE,sBACE,2MAuOF,oBAKA,4HAeA,0NAWA,4GAOA,8KASA,iEAIA,6EAUA,sLAWA,4aAwBA,mCAIA,iDAKA,iCAWA,0OA+BA,gPAkBA,qHAkBA,0CAKA,2EAOA,qGAMA,2DAaA,sBACE,2MAoBF,8BAKA,sHAMA,kCAWA,sGAMA,sHAsUA,uCACE,2GAQA,8JASF,qHAME,oKASF,6BAKA,4DASA,wCAOA,2HAqBA,0uBAoCA,shCA2CA,4HAOA,qMAOA,oIAOA,2GAMA,kGAOA,4EAKA,8JAMA,mFAMA,sEAwBA,uNAYA,8CAMA,uFAKA,6IAQA,iJAMA,0CAKA,uPAWA,8DAKA,wFAMA,+CAMA,gCAKA,sQAYA,wNAUA,kDAIA,qDAmBA,+KAUA,oGAMA,gDAKA","sources":["Users/jseidel/GitHub/dragonfly/dist/temp/core-temp-combined.css"],"sourcesContent":["/* Datei: core/smooth-scroll.css */\n/**\n* Smooth Scroll CSS-Komponente\n* ---------------------------\n* Diese Datei enthält Stile für erweiterte Scroll-Funktionalitäten und -Effekte.\n*\n* Eigenschaften:\n* - Sanftes Scrollen (smooth-scroll) für eine verbesserte Benutzererfahrung\n* - Scroll-Snap für präzises Positionieren von Elementen beim Scrollen\n* - Fortschrittsanzeigen für die Visualisierung der Scroll-Position\n* - Parallax-Effekte für tiefenwirksame Layouts\n* - Scroll-Animation-Effekte (fade, scale, slide, rotate)\n* - Gestaffelte Scroll-Animationen für Gruppen von Elementen\n* - Scroll-zu-Top-Funktionalität\n* - Scroll-Spy für Navigation\n* - Barrierefreiheitsanpassungen für reduzierte Bewegung\n*\n* Verwendung:\n* Fügen Sie die entsprechenden Klassen zu Ihren HTML-Elementen hinzu,\n* um die verschiedenen Scroll-Effekte und -Funktionen zu aktivieren.\n*\n* @layer core - Grundlegende Scroll-Funktionalitäten und -Effekte\n* @layer components - Wiederverwendbare Scroll-Komponenten\n*/\n\n/* Animationen */\n@keyframes scroll-timeline-fade {\n 0% {\n opacity: 0;\n transform: translateY(var(--spacing-5, 1.25rem));\n }\n\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@layer smooth-scroll {\n/* Smooth Scroll Variables */\n :root {\n --scroll-behavior: smooth;\n --scroll-padding-top: 0;\n --scroll-snap-type: none;\n --scroll-snap-align: none;\n --scroll-snap-stop: always;\n --scroll-margin: 0;\n --scroll-timeline-name: none;\n --scroll-timeline-axis: block;\n --scroll-timeline-view-offset: 0;\n }\n\n/* Base Smooth Scroll */\n html {\n scroll-behavior: var(--scroll-behavior, smooth);\n scroll-padding-top: var(--scroll-padding-top, 0);\n }\n\n/* Scroll Snap */\n .scroll-snap-container {\n height: 100vh;\n overflow-y: auto;\n scroll-snap-type: var(--scroll-snap-type, none);\n }\n\n .scroll-snap-item {\n scroll-margin: var(--scroll-margin, 0);\n scroll-snap-align: var(--scroll-snap-align, none);\n scroll-snap-stop: var(--scroll-snap-stop, normal);\n }\n\n/* Scroll Progress */\n .scroll-progress {\n background: linear-gradient(to right, var(--color-primary, #3b82f6) var(--scroll), transparent 0);\n height: var(--spacing-1, 0.25rem);\n left: 0;\n position: fixed;\n top: 0;\n width: 100%;\n z-index: var(--z-50);\n }\n\n/* Scroll Timeline */\n .scroll-timeline {\n scroll-timeline-axis: var(--scroll-timeline-axis);\n scroll-timeline-name: var(--scroll-timeline-name);\n scroll-timeline-view-offset: var(--scroll-timeline-view-offset);\n }\n\n/* Parallax Scrolling */\n .parallax-container {\n height: 100vh;\n overflow: hidden auto;\n perspective: var(--border-width);\n }\n\n .parallax-layer {\n inset: 0;\n position: absolute;\n }\n\n .parallax-layer-back {\n transform: translateZ(calc(-1 * var(--border-width))) scale(2);\n }\n\n .parallax-layer-base {\n transform: translateZ(0);\n }\n\n .parallax-layer-front {\n transform: translateZ(var(--border-width)) scale(0.5);\n }\n\n/* Scroll Reveal */\n .scroll-reveal {\n opacity: 0;\n transform: translateY(var(--spacing-5, 1.25rem));\n transition: all var(--transition-normal, 200ms ease);\n }\n\n .scroll-reveal.visible {\n opacity: 1;\n transform: translateX(0);\n }\n\n/* Scroll Fade */\n .scroll-fade {\n opacity: 0;\n transition: opacity var(--transition-normal, 200ms ease);\n }\n\n .scroll-fade.visible {\n opacity: 1;\n }\n\n/* Scroll Scale */\n .scroll-scale {\n opacity: 0;\n transform: scale(0.95);\n transition: all var(--transition-normal, 200ms ease);\n }\n\n .scroll-scale.visible {\n opacity: 1;\n transform: scale(1);\n }\n\n/* Scroll Slide - Konsolidierte Version */\n .scroll-slide {\n opacity: 0;\n transition: all var(--transition-normal, 200ms ease);\n }\n\n .scroll-slide.visible {\n opacity: 1;\n transform: translate(0, 0);\n }\n\n/* Scroll Slide Richtungs-Varianten */\n .scroll-slide-left { transform: translateX(-50px); }\n\n .scroll-slide-right { transform: translateX(50px); }\n\n .scroll-slide-up { transform: translateY(50px); }\n\n .scroll-slide-down { transform: translateY(-50px); }\n\n/* Scroll Rotate */\n .scroll-rotate {\n opacity: 0;\n transform: rotate(-15deg);\n transition: all var(--transition-normal, 200ms ease);\n }\n\n .scroll-rotate.visible {\n opacity: 1;\n transform: rotate(0);\n }\n\n/* Scroll Stagger */\n .scroll-stagger > * {\n opacity: 0;\n transform: translateY(var(--spacing-5, 1.25rem));\n transition: all var(--transition-normal, 200ms ease);\n }\n\n/* Stagger Delays - Kompakte Version */\n .scroll-stagger > *:nth-child(1) { transition-delay: 0.1s; }\n\n .scroll-stagger > *:nth-child(2) { transition-delay: 0.2s; }\n\n .scroll-stagger > *:nth-child(3) { transition-delay: 0.3s; }\n\n .scroll-stagger > *:nth-child(4) { transition-delay: 0.4s; }\n\n .scroll-stagger > *:nth-child(5) { transition-delay: 0.5s; }\n\n .scroll-stagger.visible > * {\n opacity: 1;\n transform: translateX(0);\n }\n\n/* Scroll Progress Bar */\n .scroll-progress-bar {\n background: var(--slider-track-color);\n height: var(--spacing-1, 0.25rem);\n left: 0;\n position: fixed;\n top: 0;\n width: 100%;\n }\n\n .scroll-progress-bar::before {\n background: var(--color-primary, #3b82f6);\n content: '';\n height: 100vh;\n left: 0;\n position: absolute;\n top: 0;\n transition: width var(--transition-normal, 200ms ease);\n width: var(--scroll);\n }\n\n/* Scroll to Top Button */\n .scroll-to-top {\n align-items: center;\n background: var(--color-primary, #3b82f6);\n border-radius: 5px;\n bottom: var(--spacing-5, 1.25rem);\n color: var(--color-white, #fff);\n cursor: pointer;\n display: flex;\n height: var(--spacing-10, 2.5rem);\n justify-content: center;\n opacity: 0;\n position: fixed;\n right: var(--spacing-5, 1.25rem);\n transform: translateY(var(--spacing-5, 1.25rem));\n transition: all var(--transition-normal, 200ms ease);\n width: var(--spacing-10, 2.5rem);\n z-index: var(--z-50);\n }\n\n .scroll-to-top.visible {\n opacity: 1;\n transform: translateX(0);\n }\n\n .scroll-to-top:hover {\n background: var(--color-primary-dark);\n transform: translateY(calc(-1 * var(--border-width-thick)));\n }\n\n/* Scroll Spy Navigation */\n .scroll-spy-nav {\n position: fixed;\n right: var(--spacing-5, 1.25rem);\n top: 50;\n transform: translateX(-50);\n }\n\n .scroll-spy-nav a {\n background: var(--slider-track-color);\n border-radius: 5px;\n display: block;\n height: var(--space-small-10px);\n margin: var(--space-small-10px) 0;\n transition: all var(--transition-normal, 200ms ease);\n width: var(--space-small-10px);\n }\n\n .scroll-spy-nav a.active {\n background: var(--color-primary, #3b82f6);\n transform: scale(1.2);\n }\n\n/* Scroll Timeline Animation */\n .scroll-timeline-animation {\n animation: scroll-timeline-fade 1s ease-out forwards;\n animation-range: entry 10 cover 30;\n animation-timeline: view();\n }\n\n/* Scroll Performance */\n .scroll-performance {\n backface-visibility: hidden;\n transform: translateZ(0);\n will-change: transform, opacity;\n }\n\n/* Respektiere Nutzereinstellung für reduzierte Bewegung */\n @media (prefers-reduced-motion: reduce) {\n/* Deaktiviere alle Scroll-Animationen */\n html,\n body,\n .scroll-smooth,\n .scroll-behavior-smooth,\n .scroll-mt,\n .scroll-mb,\n .scroll-ms,\n .scroll-me,\n .scroll-pt,\n .scroll-pb,\n .scroll-ps,\n .scroll-pe,\n [data-scroll-trigger],\n .scroll-snap-container,\n .scroll-snap-item {\n animation: none !important;\n scroll-behavior: auto !important;\n scroll-padding: 0 !important;\n scroll-snap-type: none !important;\n transition: none !important;\n }\n }\n\n/* Responsive Anpassungen */\n @media (max-width: 640px) {\n .touch-feedback::after {\n block-size: 150;\n inline-size: 150;\n }\n\n .focus-ring:focus-visible {\n box-shadow: 0 0 0 var(--border-width) var(--color-primary, #3b82f6);\n }\n }\n\n @media (min-width: 640px) {\n/* Fade Stagger Delays - Kompakte Version */\n .scroll-fade-staggered > *:nth-child(2) { animation-delay: 0.1s; }\n\n .scroll-fade-staggered > *:nth-child(3) { animation-delay: 0.2s; }\n\n .scroll-fade-staggered > *:nth-child(4) { animation-delay: 0.3s; }\n }\n\n @media (min-width: 768px) {\n .scroll-to-top {\n bottom: var(--spacing-8);\n right: var(--spacing-8);\n }\n }\n\n @media (min-width: 1024px) {\n .scroll-parallax {\n transform: translateY(calc(var(--scroll-offset) * 0.15));\n }\n }\n\n/* Reduzierte Bewegung für Barrierefreiheit */\n @media (prefers-reduced-motion: reduce) {\n :root {\n --scroll-behavior: auto;\n }\n\n .scroll-fade,\n .scroll-scale,\n .scroll-slide,\n .scroll-rotate,\n .scroll-parallax,\n .scroll-fade-staggered > * {\n animation: none;\n opacity: 1;\n transform: none;\n transition: none;\n }\n }\n}\n\n/* Datei: core/reset.css */\n/**\n* @casoon/dragonfly – Reset CSS\n*\n* This file provides a clean, consistent baseline across all browsers to ensure\n* reliable styling for components and layouts.\n*\n* ➤ Modern reset principles are applied without over-normalizing.\n* ➤ Accessibility, performance, and logical defaults are prioritized.\n* ➤ All rules are scoped within @layer reset to prevent specificity conflicts.\n*\n* 🚨 Important: This file must be imported first before any other styles,\n* especially tokens, themes, and components.\n*\n* Recommended Import Order:\n* 1. @import \"@casoon/dragonfly/core/reset.css\";\n* 2. @import \"@casoon/dragonfly/tokens/index.css\";\n* 3. @import \"@casoon/dragonfly/themes/index.css\";\n* 4. @import \"@casoon/dragonfly/ui/index.css\";\n*\n* Accessibility:\n* - Includes support for `prefers-reduced-motion`\n* - Uses system fonts and semantic defaults\n*\n* Compatibility:\n* - Optimized for modern browsers (Chrome, Firefox, Safari, Edge)\n* - Progressive enhancement for older ones\n*/\n\n@layer reset {\n/* 1. Box-Sizing + Margin-Reset */\n *, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n/* 2. Core Root Defaults */\n html {\n -webkit-font-smoothing: antialiased;\n height: 100;\n scroll-behavior: smooth;\n text-size-adjust: 100;\n }\n\n html:focus-within {\n scroll-behavior: smooth;\n }\n\n body {\n background-color: var(--color-background, var(--color-white));\n color: var(--color-foreground, var(--color-black));\n font-family: system-ui, sans-serif;\n line-height: 1.5;\n min-height: 100;\n text-rendering: optimizespeed;\n }\n\n/* 3. List & Table */\n ul, ol {\n list-style: none;\n }\n\n table {\n border-collapse: collapse;\n border-spacing: 0;\n }\n\n/* 4. Media */\n img, picture, video, canvas, svg {\n display: block;\n height: auto;\n max-width: 100;\n }\n\n/* 5. Forms & Buttons */\n input, button, textarea, select {\n appearance: none;\n background: none;\n border: none;\n color: inherit;\n font: inherit;\n margin: 0;\n padding: 0;\n }\n\n button {\n cursor: pointer;\n }\n\n textarea {\n resize: vertical;\n }\n\n/* 6. Links */\n a:not([class]) {\n color: inherit;\n text-decoration-skip-ink: auto;\n }\n\n/* 7. Accessibility: Motion Reduce */\n @media (prefers-reduced-motion: reduce) {\n html {\n scroll-behavior: auto;\n }\n\n *, *::before, *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n }\n}\n\n\n/* Datei: core/logical-properties.css */\n/**\n* Logische CSS-Eigenschaften für Internationalisierung\n*\n* Diese Datei implementiert logische CSS-Eigenschaften, die eine richtungsunabhängige\n* Gestaltung von Layouts ermöglichen. Sie unterstützt mehrsprachige Anwendungen durch\n* Vermeidung von richtungsspezifischen Eigenschaften wie left/right und top/bottom.\n*\n* Stattdessen werden Eigenschaften verwendet, die unabhängig von der Schreibrichtung (RTL/LTR) sind:\n* - block-start/block-end (ersetzt top/bottom)\n* - inline-start/inline-end (ersetzt left/right)\n* - margin-inline, padding-block usw.\n*\n* Hauptvorteile:\n* - Unterstützung für bidirektionale (RTL/LTR) Layouts ohne Codeänderungen\n* - Bessere Wartbarkeit durch eine einzige Codebasis für alle Sprachen\n* - Verbesserte Barrierefreiheit und Unterstützung für internationale Standards\n*\n* @hinweis Diese Datei sollte früh im Stylesheet-Laden eingebunden werden.\n* @wichtig Beim Erstellen neuer Komponenten immer logische Eigenschaften verwenden.\n*/\n\n/*\n* Logische CSS Properties für Internationalisierung\n*/\n\n@layer logical-properties {\n/* Basisklassen für Schreibrichtung */\n :root {\n --text-direction: ltr;\n }\n\n :root[dir=\"rtl\"] {\n --text-direction: rtl;\n }\n\n html {\n text-align: start;\n }\n\n/* Standardabstände nutzen logische Properties */\n .spacing {\n margin-block: var(--spacing-4);\n margin-inline: var(--spacing-2);\n padding-block: var(--spacing-3);\n padding-inline: var(--spacing-2);\n }\n\n/* Überschriften verwenden logische Properties */\n h1, h2, h3, h4, h5, h6 {\n border-block-end: var(--border-width) solid var(--color-surface-300);\n margin-block: var(--spacing-6) var(--spacing-4);\n padding-block-end: var(--spacing-2);\n }\n\n/* Textausrichtung für RTL/LTR Support */\n .text-start {\n text-align: start;\n }\n\n .text-end {\n text-align: end;\n }\n\n/* Flexbox mit logischen Properties */\n .flex-row {\n display: flex;\n flex-direction: row;\n }\n\n .flex-row-reverse {\n display: flex;\n flex-direction: row-reverse;\n }\n\n .justify-start {\n justify-content: flex-start;\n }\n\n .justify-end {\n justify-content: flex-end;\n }\n\n/* Container-Abstände */\n .container {\n margin-inline: auto;\n max-inline-size: var(--space-large-80rem);\n padding-inline: var(--spacing-4);\n }\n\n/* Ränder mit logischen Properties */\n .border-start {\n border-inline-start: var(--border-width) solid var(--color-surface-300);\n }\n\n .border-end {\n border-inline-end: var(--border-width) solid var(--color-surface-300);\n }\n\n .border-block {\n border-block: var(--border-width) solid var(--color-surface-300);\n }\n\n .border-inline {\n border-inline: var(--border-width) solid var(--color-surface-300);\n }\n\n/* Abgerundete Ecken mit logischen Properties */\n .rounded {\n border-radius: var(--spacing-1);\n }\n\n .rounded-start {\n border-end-start-radius: var(--spacing-1);\n border-start-start-radius: var(--spacing-1);\n }\n\n .rounded-end {\n border-end-end-radius: var(--spacing-1);\n border-start-end-radius: var(--spacing-1);\n }\n\n .rounded-top {\n border-start-end-radius: var(--spacing-1);\n border-start-start-radius: var(--spacing-1);\n }\n\n .rounded-bottom {\n border-end-end-radius: var(--spacing-1);\n border-end-start-radius: var(--spacing-1);\n }\n\n/* Positionierung mit logischen Properties */\n .position-start {\n inset-inline-start: 0;\n }\n\n .position-end {\n inset-inline-end: 0;\n }\n\n .position-top {\n inset-block-start: 0;\n }\n\n .position-bottom {\n inset-block-end: 0;\n }\n\n/* Float mit logischen Properties */\n .float-start {\n float: inline-start;\n }\n\n .float-end {\n float: inline-end;\n }\n\n .clear-start {\n clear: inline-start;\n }\n\n .clear-end {\n clear: inline-end;\n }\n\n/* Größen mit logischen Properties */\n .inline-size-full {\n inline-size: 100%;\n }\n\n .block-size-full {\n block-size: 100%;\n }\n\n .inline-size-half {\n inline-size: 50%;\n }\n\n .block-size-half {\n block-size: 50%;\n }\n\n/* Grid mit logischen Properties */\n .grid-cols-2 {\n display: grid;\n gap: var(--spacing-4);\n grid-template-columns: repeat(2, 1fr);\n }\n\n .grid-cols-3 {\n display: grid;\n gap: var(--spacing-4);\n grid-template-columns: repeat(3, 1fr);\n }\n\n .grid-cols-4 {\n display: grid;\n gap: var(--spacing-4);\n grid-template-columns: repeat(4, 1fr);\n }\n\n/* Abstände Utility-Klassen */\n .m-block-1 {\n margin-block: var(--spacing-1);\n }\n\n .m-block-2 {\n margin-block: var(--spacing-2);\n }\n\n .m-block-3 {\n margin-block: var(--spacing-3);\n }\n\n .m-block-4 {\n margin-block: var(--spacing-4);\n }\n\n .m-inline-1 {\n margin-inline: var(--spacing-1);\n }\n\n .m-inline-2 {\n margin-inline: var(--spacing-2);\n }\n\n .m-inline-3 {\n margin-inline: var(--spacing-3);\n }\n\n .m-inline-4 {\n margin-inline: var(--spacing-4);\n }\n\n .p-block-1 {\n padding-block: var(--spacing-1);\n }\n\n .p-block-2 {\n padding-block: var(--spacing-2);\n }\n\n .p-block-3 {\n padding-block: var(--spacing-3);\n }\n\n .p-block-4 {\n padding-block: var(--spacing-4);\n }\n\n .p-inline-1 {\n padding-inline: var(--spacing-1);\n }\n\n .p-inline-2 {\n padding-inline: var(--spacing-2);\n }\n\n .p-inline-3 {\n padding-inline: var(--spacing-3);\n }\n\n .p-inline-4 {\n padding-inline: var(--spacing-4);\n }\n\n/* Richtungsspezifische Abstände */\n .m-block-start-1 {\n margin-block-start: var(--spacing-1);\n }\n\n .m-block-start-2 {\n margin-block-start: var(--spacing-2);\n }\n\n .m-block-start-3 {\n margin-block-start: var(--spacing-3);\n }\n\n .m-block-start-4 {\n margin-block-start: var(--spacing-4);\n }\n\n .m-block-end-1 {\n margin-block-end: var(--spacing-1);\n }\n\n .m-block-end-2 {\n margin-block-end: var(--spacing-2);\n }\n\n .m-block-end-3 {\n margin-block-end: var(--spacing-3);\n }\n\n .m-block-end-4 {\n margin-block-end: var(--spacing-4);\n }\n\n .m-inline-start-1 {\n margin-inline-start: var(--spacing-1);\n }\n\n .m-inline-start-2 {\n margin-inline-start: var(--spacing-2);\n }\n\n .m-inline-start-3 {\n margin-inline-start: var(--spacing-3);\n }\n\n .m-inline-start-4 {\n margin-inline-start: var(--spacing-4);\n }\n\n .m-inline-end-1 {\n margin-inline-end: var(--spacing-1);\n }\n\n .m-inline-end-2 {\n margin-inline-end: var(--spacing-2);\n }\n\n .m-inline-end-3 {\n margin-inline-end: var(--spacing-3);\n }\n\n .m-inline-end-4 {\n margin-inline-end: var(--spacing-4);\n }\n\n .p-block-start-1 {\n padding-block-start: var(--spacing-1);\n }\n\n .p-block-start-2 {\n padding-block-start: var(--spacing-2);\n }\n\n .p-block-start-3 {\n padding-block-start: var(--spacing-3);\n }\n\n .p-block-start-4 {\n padding-block-start: var(--spacing-4);\n }\n\n .p-block-end-1 {\n padding-block-end: var(--spacing-1);\n }\n\n .p-block-end-2 {\n padding-block-end: var(--spacing-2);\n }\n\n .p-block-end-3 {\n padding-block-end: var(--spacing-3);\n }\n\n .p-block-end-4 {\n padding-block-end: var(--spacing-4);\n }\n\n .p-inline-start-1 {\n padding-inline-start: var(--spacing-1);\n }\n\n .p-inline-start-2 {\n padding-inline-start: var(--spacing-2);\n }\n\n .p-inline-start-3 {\n padding-inline-start: var(--spacing-3);\n }\n\n .p-inline-start-4 {\n padding-inline-start: var(--spacing-4);\n }\n\n .p-inline-end-1 {\n padding-inline-end: var(--spacing-1);\n }\n\n .p-inline-end-2 {\n padding-inline-end: var(--spacing-2);\n }\n\n .p-inline-end-3 {\n padding-inline-end: var(--spacing-3);\n }\n\n .p-inline-end-4 {\n padding-inline-end: var(--spacing-4);\n }\n\n/* Scrollen mit logischen Properties */\n .overflow-inline {\n overflow-inline: auto;\n }\n\n .overflow-block {\n overflow-block: auto;\n }\n\n/* Übersetzte Layouts unterstützen */\n [lang=\"ar\"],\n [lang=\"he\"],\n [lang=\"fa\"],\n [lang=\"ur\"] {\n direction: rtl;\n }\n\n/* Komponenten für internationalisierte UIs */\n .navbar {\n border-block-end: var(--border-width) solid var(--color-surface-300);\n display: flex;\n padding-block: var(--spacing-3);\n padding-inline: var(--spacing-4);\n }\n\n .navbar-brand {\n margin-inline-end: var(--spacing-4);\n }\n\n .navbar-nav {\n display: flex;\n gap: var(--spacing-4);\n margin-inline-start: auto;\n }\n\n .dropdown-menu {\n border: var(--border-width) solid var(--color-surface-300);\n border-radius: var(--spacing-1);\n inset-block-start: 100%;\n inset-inline-start: 0;\n min-inline-size: var(--spacing-40);\n padding-block: var(--spacing-2);\n padding-inline: 0;\n position: absolute;\n }\n\n .dropdown-item {\n padding-block: var(--spacing-1);\n padding-inline: var(--spacing-3);\n text-align: start;\n }\n\n/* Karten-Komponente mit logischen Properties */\n .card {\n border: var(--border-width) solid var(--color-surface-300);\n border-radius: var(--spacing-2);\n padding-block: var(--spacing-4);\n padding-inline: var(--spacing-4);\n }\n\n .card-header {\n border-block-end: var(--border-width) solid var(--color-surface-200);\n margin-block-end: var(--spacing-3);\n padding-block-end: var(--spacing-2);\n }\n\n .card-footer {\n border-block-start: var(--border-width) solid var(--color-surface-200);\n margin-block-start: var(--spacing-3);\n padding-block-start: var(--spacing-2);\n }\n\n/* Listen mit logischen Properties */\n .list {\n padding-inline-start: var(--spacing-4);\n }\n\n .list-item {\n margin-block-end: var(--spacing-2);\n }\n\n/* Formular-Elemente mit logischen Properties */\n .form-group {\n margin-block-end: var(--spacing-3);\n }\n\n .form-label {\n display: block;\n margin-block-end: var(--spacing-1);\n }\n\n .form-control {\n border: var(--border-width) solid var(--color-surface-300);\n border-radius: var(--spacing-1);\n inline-size: 100%;\n padding-block: var(--spacing-2);\n padding-inline: var(--spacing-3);\n }\n\n/* Buttons mit logischen Properties */\n .btn {\n border: var(--border-width) solid transparent;\n border-radius: var(--spacing-1);\n padding-block: var(--spacing-2);\n padding-inline: var(--spacing-4);\n }\n\n .btn-icon {\n margin-inline-end: var(--spacing-2);\n }\n\n/* Tabellen mit logischen Properties */\n .table {\n border-collapse: collapse;\n inline-size: 100%;\n }\n\n .table th,\n .table td {\n border-block-end: var(--border-width) solid var(--color-surface-300);\n padding-block: var(--spacing-2);\n padding-inline: var(--spacing-3);\n text-align: start;\n }\n\n/* Navigations-Tabs mit logischen Properties */\n .tabs {\n border-block-end: var(--border-width) solid var(--color-surface-300);\n display: flex;\n }\n\n .tab {\n border-block-end: var(--border-width-thick) solid transparent;\n padding-block: var(--spacing-2);\n padding-inline: var(--spacing-4);\n }\n\n .tab.active {\n border-block-end-color: var(--color-primary-500);\n }\n\n/* Alert-Komponente mit logischen Properties */\n .alert {\n border-inline-start: var(--spacing-1) solid var(--color-primary-500);\n border-radius: var(--spacing-1);\n padding-block: var(--spacing-3);\n padding-inline: var(--spacing-4);\n }\n\n .alert-danger {\n border-inline-start-color: var(--color-error-500);\n }\n\n .alert-success {\n border-inline-start-color: var(--color-success-500);\n }\n\n/* Abstand-Automatisierung */\n .text-flow > * + * {\n margin-block-start: var(--spacing-3);\n }\n\n/* Benutzeroberflächenführungen */\n .steps {\n display: flex;\n margin-block: var(--spacing-4);\n }\n\n .step {\n border-block-end: var(--border-width-thick) solid var(--color-surface-300);\n flex: 1;\n padding-block: var(--spacing-2);\n text-align: center;\n }\n\n .step.active {\n border-block-end-color: var(--color-primary-500);\n }\n\n/* Dialog/Modal */\n .modal {\n align-items: center;\n display: flex;\n inset: 0;\n justify-content: center;\n position: fixed;\n }\n\n .modal-dialog {\n background: var(--color-white);\n border-radius: var(--spacing-2);\n max-block-size: 90%;\n max-inline-size: 90%;\n min-inline-size: var(--space-large-30rem);\n padding-block: var(--spacing-4);\n padding-inline: var(--spacing-4);\n }\n\n .modal-header {\n border-block-end: var(--border-width) solid var(--color-surface-300);\n margin-block-end: var(--spacing-3);\n padding-block-end: var(--spacing-2);\n }\n\n .modal-footer {\n border-block-start: var(--border-width) solid var(--color-surface-300);\n display: flex;\n gap: var(--spacing-2);\n justify-content: flex-end;\n margin-block-start: var(--spacing-3);\n padding-block-start: var(--spacing-2);\n }\n\n/* Responsives Layout mit logischen Properties */\n @media (max-width: 768px) {\n .navbar {\n align-items: flex-start;\n flex-direction: column;\n }\n\n .navbar-nav {\n flex-direction: column;\n margin-block-start: var(--spacing-3);\n margin-inline-start: 0;\n }\n\n .grid-cols-2,\n .grid-cols-3,\n .grid-cols-4 {\n grid-template-columns: 1fr;\n }\n }\n\n/* RTL spezifische Anpassungen */\n [dir=\"rtl\"] .btn-icon {\n transform: scaleX(-1);\n }\n\n [dir=\"rtl\"] .dropdown-menu {\n text-align: right;\n }\n\n/* Lang-spezifische Anpassungen */\n [lang=\"ja\"],\n [lang=\"zh\"],\n [lang=\"ko\"] {\n font-feature-settings: \"palt\";\n line-break: strict;\n word-break: normal;\n }\n\n [lang=\"th\"],\n [lang=\"my\"] {\n line-height: 1.8;\n }\n\n/* Komplette Layout-Anordnung, unabhängig von der Schreibrichtung */\n .layout {\n display: grid;\n grid-template:\n \"header header header\" auto \"sidebar main aside\" 1fr \"footer footer footer\" auto / 200px 1fr 200px;\n min-block-size: 100%;\n }\n\n .layout-header {\n border-block-end: var(--border-width) solid var(--color-surface-300);\n grid-area: header;\n padding-block: var(--spacing-3);\n padding-inline: var(--spacing-4);\n }\n\n .layout-sidebar {\n border-inline-end: var(--border-width) solid var(--color-surface-300);\n grid-area: sidebar;\n padding-block: var(--spacing-4);\n padding-inline: var(--spacing-3);\n }\n\n .layout-main {\n grid-area: main;\n padding-block: var(--spacing-4);\n padding-inline: var(--spacing-4);\n }\n\n .layout-aside {\n border-inline-start: var(--border-width) solid var(--color-surface-300);\n grid-area: aside;\n padding-block: var(--spacing-4);\n padding-inline: var(--spacing-3);\n }\n\n .layout-footer {\n border-block-start: var(--border-width) solid var(--color-surface-300);\n grid-area: footer;\n padding-block: var(--spacing-3);\n padding-inline: var(--spacing-4);\n }\n\n/* Responsives Layout */\n @media (max-width: 990px) {\n .layout {\n grid-template-areas:\n \"header header\"\n \"sidebar main\"\n \"footer footer\";\n grid-template-columns: var(--space-large-200) 1fr;\n }\n\n .layout-aside {\n display: none;\n }\n }\n\n @media (max-width: 768px) {\n .layout {\n grid-template-areas:\n \"header\"\n \"main\"\n \"footer\";\n grid-template-columns: 1fr;\n }\n\n .layout-sidebar {\n display: none;\n }\n }\n\n/* Responsive Anpassungen für logische Eigenschaften */\n @media (max-width: 768px) {\n/* Anpassungen für kleinere Bildschirme */\n .block-spacer {\n margin-block: var(--spacing-4);\n }\n\n .inline-spacer {\n margin-inline: 0.5rem;\n }\n\n .flow-spacing > * + * {\n margin-block-start: 0.75rem;\n }\n\n .center-content {\n align-items: center;\n justify-content: center;\n }\n }\n\n/* Tablet-Anpassungen */\n @media (max-width: 990px) {\n .tablet-padding {\n padding-block: var(--spacing-4);\n padding-inline: var(--spacing-6);\n }\n\n .tablet-margin {\n margin-block: var(--spacing-4);\n margin-inline: var(--spacing-6);\n }\n\n .tablet-spacing > * + * {\n margin-inline-start: var(--spacing-4);\n }\n }\n\n/* Mobile vertikale Ausrichtung */\n @media (max-width: 768px) {\n .logical-stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n }\n\n .logical-stack > * {\n margin-block-start: var(--space-0);\n margin-inline-start: var(--space-0);\n }\n }\n}\n\n\n/* Datei: core/colors.css */\n/**\n* Farbsystem\n*\n* Diese Datei definiert die komplette Farbpalette des Designsystems mit\n* modernen OKLCH-Farbwerten für optimale Farbwiedergabe und -konsistenz.\n*\n* Das Farbsystem besteht aus:\n* - Hauptfarbpaletten (Blau, Grün, Rot, etc.) mit jeweils 10 Abstufungen\n* - Neutrale Farbpaletten (Grau, Warm-Grau) für UI-Elemente\n* - Utility-Klassen für Text- und Hintergrundfarben\n*\n* Alle Farben sind im OKLCH-Farbraum definiert, der folgende Vorteile bietet:\n* - Perceptive Gleichmäßigkeit der Farbabstufungen\n* - Erweiterten Farbraum verglichen mit RGB/sRGB\n* - Bessere Barrierefreiheit durch vorhersagbare Kontraste\n*\n* @hinweis Diese Datei wird vor color-mix.css geladen und stellt die Basis-Farbwerte bereit\n* @technisch Verwendet den modernen OKLCH-Farbraum für optimale Farbwiedergabe\n*/\n\n@layer colors {\n :root {\n/* Blautöne */\n --color-blue-50: oklch(95% 0.05 250deg);\n --color-blue-100: oklch(90% 0.1 250deg);\n --color-blue-200: oklch(85% 0.15 250deg);\n --color-blue-300: oklch(80% 0.2 250deg);\n --color-blue-400: oklch(75% 0.25 250deg);\n --color-blue-500: oklch(70% 0.3 250deg);\n --color-blue-600: oklch(65% 0.35 250deg);\n --color-blue-700: oklch(60% 0.4 250deg);\n --color-blue-800: oklch(55% 0.45 250deg);\n --color-blue-900: oklch(50% 0.5 250deg);\n\n/* Hellblautöne */\n --color-sky-50: oklch(95% 0.05 230deg);\n --color-sky-100: oklch(90% 0.1 230deg);\n --color-sky-200: oklch(85% 0.15 230deg);\n --color-sky-300: oklch(80% 0.2 230deg);\n --color-sky-400: oklch(75% 0.25 230deg);\n --color-sky-500: oklch(70% 0.3 230deg);\n --color-sky-600: oklch(65% 0.35 230deg);\n --color-sky-700: oklch(60% 0.4 230deg);\n --color-sky-800: oklch(55% 0.45 230deg);\n --color-sky-900: oklch(50% 0.5 230deg);\n\n/* Türkistöne */\n --color-cyan-50: oklch(95% 0.05 200deg);\n --color-cyan-100: oklch(90% 0.1 200deg);\n --color-cyan-200: oklch(85% 0.15 200deg);\n --color-cyan-300: oklch(80% 0.2 200deg);\n --color-cyan-400: oklch(75% 0.25 200deg);\n --color-cyan-500: oklch(70% 0.3 200deg);\n --color-cyan-600: oklch(65% 0.35 200deg);\n --color-cyan-700: oklch(60% 0.4 200deg);\n --color-cyan-800: oklch(55% 0.45 200deg);\n --color-cyan-900: oklch(50% 0.5 200deg);\n\n/* Minttöne */\n --color-mint-50: oklch(95% 0.05 170deg);\n --color-mint-100: oklch(90% 0.1 170deg);\n --color-mint-200: oklch(85% 0.15 170deg);\n --color-mint-300: oklch(80% 0.2 170deg);\n --color-mint-400: oklch(75% 0.25 170deg);\n --color-mint-500: oklch(70% 0.3 170deg);\n --color-mint-600: oklch(65% 0.35 170deg);\n --color-mint-700: oklch(60% 0.4 170deg);\n --color-mint-800: oklch(55% 0.45 170deg);\n --color-mint-900: oklch(50% 0.5 170deg);\n\n/* Grüntöne */\n --color-green-50: oklch(95% 0.05 150deg);\n --color-green-100: oklch(90% 0.1 150deg);\n --color-green-200: oklch(85% 0.15 150deg);\n --color-green-300: oklch(80% 0.2 150deg);\n --color-green-400: oklch(75% 0.25 150deg);\n --color-green-500: oklch(70% 0.3 150deg);\n --color-green-600: oklch(65% 0.35 150deg);\n --color-green-700: oklch(60% 0.4 150deg);\n --color-green-800: oklch(55% 0.45 150deg);\n --color-green-900: oklch(50% 0.5 150deg);\n\n/* Limettöne */\n --color-lime-50: oklch(95% 0.05 120deg);\n --color-lime-100: oklch(90% 0.1 120deg);\n --color-lime-200: oklch(85% 0.15 120deg);\n --color-lime-300: oklch(80% 0.2 120deg);\n --color-lime-400: oklch(75% 0.25 120deg);\n --color-lime-500: oklch(70% 0.3 120deg);\n --color-lime-600: oklch(65% 0.35 120deg);\n --color-lime-700: oklch(60% 0.4 120deg);\n --color-lime-800: oklch(55% 0.45 120deg);\n --color-lime-900: oklch(50% 0.5 120deg);\n\n/* Gelbtöne */\n --color-yellow-50: oklch(95% 0.1 80deg);\n --color-yellow-100: oklch(90% 0.15 80deg);\n --color-yellow-200: oklch(85% 0.2 80deg);\n --color-yellow-300: oklch(80% 0.25 80deg);\n --color-yellow-400: oklch(75% 0.3 80deg);\n --color-yellow-500: oklch(70% 0.35 80deg);\n --color-yellow-600: oklch(65% 0.4 80deg);\n --color-yellow-700: oklch(60% 0.45 80deg);\n --color-yellow-800: oklch(55% 0.5 80deg);\n --color-yellow-900: oklch(50% 0.55 80deg);\n\n/* Goldtöne */\n --color-gold-50: oklch(95% 0.1 65deg);\n --color-gold-100: oklch(90% 0.15 65deg);\n --color-gold-200: oklch(85% 0.2 65deg);\n --color-gold-300: oklch(80% 0.25 65deg);\n --color-gold-400: oklch(75% 0.3 65deg);\n --color-gold-500: oklch(70% 0.35 65deg);\n --color-gold-600: oklch(65% 0.4 65deg);\n --color-gold-700: oklch(60% 0.45 65deg);\n --color-gold-800: oklch(55% 0.5 65deg);\n --color-gold-900: oklch(50% 0.55 65deg);\n\n/* Orangetöne */\n --color-orange-50: oklch(95% 0.1 50deg);\n --color-orange-100: oklch(90% 0.15 50deg);\n --color-orange-200: oklch(85% 0.2 50deg);\n --color-orange-300: oklch(80% 0.25 50deg);\n --color-orange-400: oklch(75% 0.3 50deg);\n --color-orange-500: oklch(70% 0.35 50deg);\n --color-orange-600: oklch(65% 0.4 50deg);\n --color-orange-700: oklch(60% 0.45 50deg);\n --color-orange-800: oklch(55% 0.5 50deg);\n --color-orange-900: oklch(50% 0.55 50deg);\n\n/* Koralltöne */\n --color-coral-50: oklch(95% 0.1 40deg);\n --color-coral-100: oklch(90% 0.15 40deg);\n --color-coral-200: oklch(85% 0.2 40deg);\n --color-coral-300: oklch(80% 0.25 40deg);\n --color-coral-400: oklch(75% 0.3 40deg);\n --color-coral-500: oklch(70% 0.35 40deg);\n --color-coral-600: oklch(65% 0.4 40deg);\n --color-coral-700: oklch(60% 0.45 40deg);\n --color-coral-800: oklch(55% 0.5 40deg);\n --color-coral-900: oklch(50% 0.55 40deg);\n\n/* Rottöne */\n --color-red-50: oklch(95% 0.1 30deg);\n --color-red-100: oklch(90% 0.15 30deg);\n --color-red-200: oklch(85% 0.2 30deg);\n --color-red-300: oklch(80% 0.25 30deg);\n --color-red-400: oklch(75% 0.3 30deg);\n --color-red-500: oklch(70% 0.35 30deg);\n --color-red-600: oklch(65% 0.4 30deg);\n --color-red-700: oklch(60% 0.45 30deg);\n --color-red-800: oklch(55% 0.5 30deg);\n --color-red-900: oklch(50% 0.55 30deg);\n\n/* Pinktöne */\n --color-pink-50: oklch(95% 0.1 0deg);\n --color-pink-100: oklch(90% 0.15 0deg);\n --color-pink-200: oklch(85% 0.2 0deg);\n --color-pink-300: oklch(80% 0.25 0deg);\n --color-pink-400: oklch(75% 0.3 0deg);\n --color-pink-500: oklch(70% 0.35 0deg);\n --color-pink-600: oklch(65% 0.4 0deg);\n --color-pink-700: oklch(60% 0.45 0deg);\n --color-pink-800: oklch(55% 0.5 0deg);\n --color-pink-900: oklch(50% 0.55 0deg);\n\n/* Rosatöne */\n --color-rose-50: oklch(95% 0.1 10deg);\n --color-rose-100: oklch(90% 0.15 10deg);\n --color-rose-200: oklch(85% 0.2 10deg);\n --color-rose-300: oklch(80% 0.25 10deg);\n --color-rose-400: oklch(75% 0.3 10deg);\n --color-rose-500: oklch(70% 0.35 10deg);\n --color-rose-600: oklch(65% 0.4 10deg);\n --color-rose-700: oklch(60% 0.45 10deg);\n --color-rose-800: oklch(55% 0.5 10deg);\n --color-rose-900: oklch(50% 0.55 10deg);\n\n/* Violetttöne */\n --color-purple-50: oklch(95% 0.05 350deg);\n --color-purple-100: oklch(90% 0.1 350deg);\n --color-purple-200: oklch(85% 0.15 350deg);\n --color-purple-300: oklch(80% 0.2 350deg);\n --color-purple-400: oklch(75% 0.25 350deg);\n --color-purple-500: oklch(70% 0.3 350deg);\n --color-purple-600: oklch(65% 0.35 350deg);\n --color-purple-700: oklch(60% 0.4 350deg);\n --color-purple-800: oklch(55% 0.45 350deg);\n --color-purple-900: oklch(50% 0.5 350deg);\n\n/* Indigotöne */\n --color-indigo-50: oklch(95% 0.05 300deg);\n --color-indigo-100: oklch(90% 0.1 300deg);\n --color-indigo-200: oklch(85% 0.15 300deg);\n --color-indigo-300: oklch(80% 0.2 300deg);\n --color-indigo-400: oklch(75% 0.25 300deg);\n --color-indigo-500: oklch(70% 0.3 300deg);\n --color-indigo-600: oklch(65% 0.35 300deg);\n --color-indigo-700: oklch(60% 0.4 300deg);\n --color-indigo-800: oklch(55% 0.45 300deg);\n --color-indigo-900: oklch(50% 0.5 300deg);\n\n/* Grautöne */\n --color-gray-50: oklch(98% 0.02 250deg);\n --color-gray-100: oklch(95% 0.02 250deg);\n --color-gray-200: oklch(90% 0.02 250deg);\n --color-gray-300: oklch(85% 0.02 250deg);\n --color-gray-400: oklch(80% 0.02 250deg);\n --color-gray-500: oklch(75% 0.02 250deg);\n --color-gray-600: oklch(70% 0.02 250deg);\n --color-gray-700: oklch(65% 0.02 250deg);\n --color-gray-800: oklch(60% 0.02 250deg);\n --color-gray-900: oklch(55% 0.02 250deg);\n\n/* System-Grautöne (mit Hue-Berechnung) */\n --color-gray-hue: 262;\n --color-system-gray-100: oklch(98.7% 0.003 var(--color-gray-hue));\n --color-system-gray-200: oklch(97.4% 0.004 var(--color-gray-hue));\n --color-system-gray-300: oklch(94.2% 0.006 var(--color-gray-hue));\n --color-system-gray-400: oklch(89% 0.01 var(--color-gray-hue));\n --color-system-gray-500: oklch(81% 0.014 var(--color-gray-hue));\n --color-system-gray-600: oklch(68% 0.018 var(--color-gray-hue));\n --color-system-gray-700: oklch(54% 0.02 var(--color-gray-hue));\n --color-system-gray-800: oklch(36% 0.015 var(--color-gray-hue));\n --color-system-gray-900: oklch(22% 0.01 var(--color-gray-hue));\n\n/* Warme Grautöne */\n --color-warm-gray-50: oklch(98% 0.02 30deg);\n --color-warm-gray-100: oklch(95% 0.02 30deg);\n --color-warm-gray-200: oklch(90% 0.02 30deg);\n --color-warm-gray-300: oklch(85% 0.02 30deg);\n --color-warm-gray-400: oklch(80% 0.02 30deg);\n --color-warm-gray-500: oklch(75% 0.02 30deg);\n --color-warm-gray-600: oklch(70% 0.02 30deg);\n --color-warm-gray-700: oklch(65% 0.02 30deg);\n --color-warm-gray-800: oklch(60% 0.02 30deg);\n --color-warm-gray-900: oklch(55% 0.02 30deg);\n\n/* Kalte Grautöne */\n --color-cool-gray-50: oklch(98% 0.02 270deg);\n --color-cool-gray-100: oklch(95% 0.02 270deg);\n --color-cool-gray-200: oklch(90% 0.02 270deg);\n --color-cool-gray-300: oklch(85% 0.02 270deg);\n --color-cool-gray-400: oklch(80% 0.02 270deg);\n --color-cool-gray-500: oklch(75% 0.02 270deg);\n --color-cool-gray-600: oklch(70% 0.02 270deg);\n --color-cool-gray-700: oklch(65% 0.02 270deg);\n --color-cool-gray-800: oklch(60% 0.02 270deg);\n --color-cool-gray-900: oklch(55% 0.02 270deg);\n\n/* Reines Weiß und Schwarz */\n --color-white: oklch(100% 0 0deg);\n --color-black: oklch(0 0 0deg);\n\n/* Alias für häufig verwendete Farben */\n --color-text: var(--color-gray-900);\n --color-text-secondary: var(--color-gray-600);\n --color-background: var(--color-gray-50);\n --color-background-secondary: var(--color-gray-100);\n --color-background-tertiary: var(--color-gray-200);\n --color-border: var(--color-gray-300);\n\n/* Azurtöne */\n --color-azure-50: oklch(95% 0.05 240deg);\n --color-azure-100: oklch(90% 0.1 240deg);\n --color-azure-200: oklch(85% 0.15 240deg);\n --color-azure-300: oklch(80% 0.2 240deg);\n --color-azure-400: oklch(75% 0.25 240deg);\n --color-azure-500: oklch(70% 0.3 240deg);\n --color-azure-600: oklch(65% 0.35 240deg);\n --color-azure-700: oklch(60% 0.4 240deg);\n --color-azure-800: oklch(55% 0.45 240deg);\n --color-azure-900: oklch(50% 0.5 240deg);\n\n/* Tealtöne */\n --color-teal-50: oklch(95% 0.05 190deg);\n --color-teal-100: oklch(90% 0.1 190deg);\n --color-teal-200: oklch(85% 0.15 190deg);\n --color-teal-300: oklch(80% 0.2 190deg);\n --color-teal-400: oklch(75% 0.25 190deg);\n --color-teal-500: oklch(70% 0.3 190deg);\n --color-teal-600: oklch(65% 0.35 190deg);\n --color-teal-700: oklch(60% 0.4 190deg);\n --color-teal-800: oklch(55% 0.45 190deg);\n --color-teal-900: oklch(50% 0.5 190deg);\n\n/* Smaragdtöne */\n --color-emerald-50: oklch(95% 0.1 165deg);\n --color-emerald-100: oklch(90% 0.15 165deg);\n --color-emerald-200: oklch(85% 0.2 165deg);\n --color-emerald-300: oklch(80% 0.25 165deg);\n --color-emerald-400: oklch(75% 0.3 165deg);\n --color-emerald-500: oklch(70% 0.35 165deg);\n --color-emerald-600: oklch(65% 0.4 165deg);\n --color-emerald-700: oklch(60% 0.45 165deg);\n --color-emerald-800: oklch(55% 0.5 165deg);\n --color-emerald-900: oklch(50% 0.55 165deg);\n\n/* Olivtöne */\n --color-olive-50: oklch(95% 0.05 110deg);\n --color-olive-100: oklch(90% 0.1 110deg);\n --color-olive-200: oklch(85% 0.15 110deg);\n --color-olive-300: oklch(80% 0.2 110deg);\n --color-olive-400: oklch(75% 0.25 110deg);\n --color-olive-500: oklch(70% 0.3 110deg);\n --color-olive-600: oklch(65% 0.35 110deg);\n --color-olive-700: oklch(60% 0.4 110deg);\n --color-olive-800: oklch(55% 0.45 110deg);\n --color-olive-900: oklch(50% 0.5 110deg);\n\n/* Bernstein */\n --color-amber-50: oklch(95% 0.1 70deg);\n --color-amber-100: oklch(90% 0.15 70deg);\n --color-amber-200: oklch(85% 0.2 70deg);\n --color-amber-300: oklch(80% 0.25 70deg);\n --color-amber-400: oklch(75% 0.3 70deg);\n --color-amber-500: oklch(70% 0.35 70deg);\n --color-amber-600: oklch(65% 0.4 70deg);\n --color-amber-700: oklch(60% 0.45 70deg);\n --color-amber-800: oklch(55% 0.5 70deg);\n --color-amber-900: oklch(50% 0.55 70deg);\n\n/* Kupfertöne */\n --color-copper-50: oklch(95% 0.1 45deg);\n --color-copper-100: oklch(90% 0.15 45deg);\n --color-copper-200: oklch(85% 0.2 45deg);\n --color-copper-300: oklch(80% 0.25 45deg);\n --color-copper-400: oklch(75% 0.3 45deg);\n --color-copper-500: oklch(70% 0.35 45deg);\n --color-copper-600: oklch(65% 0.4 45deg);\n --color-copper-700: oklch(60% 0.45 45deg);\n --color-copper-800: oklch(55% 0.5 45deg);\n --color-copper-900: oklch(50% 0.55 45deg);\n\n/* Kirschtöne */\n --color-cherry-50: oklch(95% 0.1 20deg);\n --color-cherry-100: oklch(90% 0.15 20deg);\n --color-cherry-200: oklch(85% 0.2 20deg);\n --color-cherry-300: oklch(80% 0.25 20deg);\n --color-cherry-400: oklch(75% 0.3 20deg);\n --color-cherry-500: oklch(70% 0.35 20deg);\n --color-cherry-600: oklch(65% 0.4 20deg);\n --color-cherry-700: oklch(60% 0.45 20deg);\n --color-cherry-800: oklch(55% 0.5 20deg);\n --color-cherry-900: oklch(50% 0.55 20deg);\n\n/* Magentatöne */\n --color-magenta-50: oklch(95% 0.1 340deg);\n --color-magenta-100: oklch(90% 0.15 340deg);\n --color-magenta-200: oklch(85% 0.2 340deg);\n --color-magenta-300: oklch(80% 0.25 340deg);\n --color-magenta-400: oklch(75% 0.3 340deg);\n --color-magenta-500: oklch(70% 0.35 340deg);\n --color-magenta-600: oklch(65% 0.4 340deg);\n --color-magenta-700: oklch(60% 0.45 340deg);\n --color-magenta-800: oklch(55% 0.5 340deg);\n --color-magenta-900: oklch(50% 0.55 340deg);\n\n/* Lavendeltöne */\n --color-lavender-50: oklch(95% 0.05 320deg);\n --color-lavender-100: oklch(90% 0.1 320deg);\n --color-lavender-200: oklch(85% 0.15 320deg);\n --color-lavender-300: oklch(80% 0.2 320deg);\n --color-lavender-400: oklch(75% 0.25 320deg);\n --color-lavender-500: oklch(70% 0.3 320deg);\n --color-lavender-600: oklch(65% 0.35 320deg);\n --color-lavender-700: oklch(60% 0.4 320deg);\n --color-lavender-800: oklch(55% 0.45 320deg);\n --color-lavender-900: oklch(50% 0.5 320deg);\n\n/* Bronzetöne */\n --color-bronze-50: oklch(95% 0.1 40deg);\n --color-bronze-100: oklch(90% 0.15 40deg);\n --color-bronze-200: oklch(85% 0.2 40deg);\n --color-bronze-300: oklch(80% 0.25 40deg);\n --color-bronze-400: oklch(75% 0.3 40deg);\n --color-bronze-500: oklch(70% 0.35 40deg);\n --color-bronze-600: oklch(65% 0.4 40deg);\n --color-bronze-700: oklch(60% 0.45 40deg);\n --color-bronze-800: oklch(55% 0.5 40deg);\n --color-bronze-900: oklch(50% 0.55 40deg);\n\n/* Perltöne */\n --color-pearl-50: oklch(98% 0.01 0deg);\n --color-pearl-100: oklch(95% 0.01 0deg);\n --color-pearl-200: oklch(92% 0.01 0deg);\n --color-pearl-300: oklch(89% 0.01 0deg);\n --color-pearl-400: oklch(86% 0.01 0deg);\n --color-pearl-500: oklch(83% 0.01 0deg);\n --color-pearl-600: oklch(80% 0.01 0deg);\n --color-pearl-700: oklch(77% 0.01 0deg);\n --color-pearl-800: oklch(74% 0.01 0deg);\n --color-pearl-900: oklch(71% 0.01 0deg);\n\n/* Champagnertöne */\n --color-champagne-50: oklch(98% 0.02 60deg);\n --color-champagne-100: oklch(95% 0.02 60deg);\n --color-champagne-200: oklch(92% 0.02 60deg);\n --color-champagne-300: oklch(89% 0.02 60deg);\n --color-champagne-400: oklch(86% 0.02 60deg);\n --color-champagne-500: oklch(83% 0.02 60deg);\n --color-champagne-600: oklch(80% 0.02 60deg);\n --color-champagne-700: oklch(77% 0.02 60deg);\n --color-champagne-800: oklch(74% 0.02 60deg);\n --color-champagne-900: oklch(71% 0.02 60deg);\n\n/* Tauptöne */\n --color-taupe-50: oklch(95% 0.02 20deg);\n --color-taupe-100: oklch(90% 0.02 20deg);\n --color-taupe-200: oklch(85% 0.02 20deg);\n --color-taupe-300: oklch(80% 0.02 20deg);\n --color-taupe-400: oklch(75% 0.02 20deg);\n --color-taupe-500: oklch(70% 0.02 20deg);\n --color-taupe-600: oklch(65% 0.02 20deg);\n --color-taupe-700: oklch(60% 0.02 20deg);\n --color-taupe-800: oklch(55% 0.02 20deg);\n --color-taupe-900: oklch(50% 0.02 20deg);\n\n/* Beigetöne */\n --color-beige-50: oklch(98% 0.02 80deg);\n --color-beige-100: oklch(95% 0.02 80deg);\n --color-beige-200: oklch(92% 0.02 80deg);\n --color-beige-300: oklch(89% 0.02 80deg);\n --color-beige-400: oklch(86% 0.02 80deg);\n --color-beige-500: oklch(83% 0.02 80deg);\n --color-beige-600: oklch(80% 0.02 80deg);\n --color-beige-700: oklch(77% 0.02 80deg);\n --color-beige-800: oklch(74% 0.02 80deg);\n --color-beige-900: oklch(71% 0.02 80deg);\n\n/* Khakitöne */\n --color-khaki-50: oklch(95% 0.05 100deg);\n --color-khaki-100: oklch(90% 0.05 100deg);\n --color-khaki-200: oklch(85% 0.05 100deg);\n --color-khaki-300: oklch(80% 0.05 100deg);\n --color-khaki-400: oklch(75% 0.05 100deg);\n --color-khaki-500: oklch(70% 0.05 100deg);\n --color-khaki-600: oklch(65% 0.05 100deg);\n --color-khaki-700: oklch(60% 0.05 100deg);\n --color-khaki-800: oklch(55% 0.05 100deg);\n --color-khaki-900: oklch(50% 0.05 100deg);\n\n/* Terrakottatöne */\n --color-terracotta-50: oklch(95% 0.1 25deg);\n --color-terracotta-100: oklch(90% 0.15 25deg);\n --color-terracotta-200: oklch(85% 0.2 25deg);\n --color-terracotta-300: oklch(80% 0.25 25deg);\n --color-terracotta-400: oklch(75% 0.3 25deg);\n --color-terracotta-500: oklch(70% 0.35 25deg);\n --color-terracotta-600: oklch(65% 0.4 25deg);\n --color-terracotta-700: oklch(60% 0.45 25deg);\n --color-terracotta-800: oklch(55% 0.5 25deg);\n --color-terracotta-900: oklch(50% 0.55 25deg);\n\n/* Burgundertöne */\n --color-burgundy-50: oklch(95% 0.1 350deg);\n --color-burgundy-100: oklch(90% 0.15 350deg);\n --color-burgundy-200: oklch(85% 0.2 350deg);\n --color-burgundy-300: oklch(80% 0.25 350deg);\n --color-burgundy-400: oklch(75% 0.3 350deg);\n --color-burgundy-500: oklch(70% 0.35 350deg);\n --color-burgundy-600: oklch(65% 0.4 350deg);\n --color-burgundy-700: oklch(60% 0.45 350deg);\n --color-burgundy-800: oklch(55% 0.5 350deg);\n --color-burgundy-900: oklch(50% 0.55 350d