{"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 350deg);\n\n/* Silbertöne */\n    --color-silver-50: oklch(98% 0.01 250deg);\n    --color-silver-100: oklch(95% 0.01 250deg);\n    --color-silver-200: oklch(92% 0.01 250deg);\n    --color-silver-300: oklch(89% 0.01 250deg);\n    --color-silver-400: oklch(86% 0.01 250deg);\n    --color-silver-500: oklch(83% 0.01 250deg);\n    --color-silver-600: oklch(80% 0.01 250deg);\n    --color-silver-700: oklch(77% 0.01 250deg);\n    --color-silver-800: oklch(74% 0.01 250deg);\n    --color-silver-900: oklch(71% 0.01 250deg);\n\n/* Platinatöne */\n    --color-platinum-50: oklch(98% 0.01 270deg);\n    --color-platinum-100: oklch(95% 0.01 270deg);\n    --color-platinum-200: oklch(92% 0.01 270deg);\n    --color-platinum-300: oklch(89% 0.01 270deg);\n    --color-platinum-400: oklch(86% 0.01 270deg);\n    --color-platinum-500: oklch(83% 0.01 270deg);\n    --color-platinum-600: oklch(80% 0.01 270deg);\n    --color-platinum-700: oklch(77% 0.01 270deg);\n    --color-platinum-800: oklch(74% 0.01 270deg);\n    --color-platinum-900: oklch(71% 0.01 270deg);\n\n/* Graphittöne */\n    --color-graphite-50: oklch(95% 0.02 280deg);\n    --color-graphite-100: oklch(90% 0.02 280deg);\n    --color-graphite-200: oklch(85% 0.02 280deg);\n    --color-graphite-300: oklch(80% 0.02 280deg);\n    --color-graphite-400: oklch(75% 0.02 280deg);\n    --color-graphite-500: oklch(70% 0.02 280deg);\n    --color-graphite-600: oklch(65% 0.02 280deg);\n    --color-graphite-700: oklch(60% 0.02 280deg);\n    --color-graphite-800: oklch(55% 0.02 280deg);\n    --color-graphite-900: oklch(50% 0.02 280deg);\n\n/* Moostöne */\n    --color-moss-50: oklch(95% 0.05 140deg);\n    --color-moss-100: oklch(90% 0.05 140deg);\n    --color-moss-200: oklch(85% 0.05 140deg);\n    --color-moss-300: oklch(80% 0.05 140deg);\n    --color-moss-400: oklch(75% 0.05 140deg);\n    --color-moss-500: oklch(70% 0.05 140deg);\n    --color-moss-600: oklch(65% 0.05 140deg);\n    --color-moss-700: oklch(60% 0.05 140deg);\n    --color-moss-800: oklch(55% 0.05 140deg);\n    --color-moss-900: oklch(50% 0.05 140deg);\n\n/* Jade */\n    --color-jade-50: oklch(95% 0.1 150deg);\n    --color-jade-100: oklch(90% 0.15 150deg);\n    --color-jade-200: oklch(85% 0.2 150deg);\n    --color-jade-300: oklch(80% 0.25 150deg);\n    --color-jade-400: oklch(75% 0.3 150deg);\n    --color-jade-500: oklch(70% 0.35 150deg);\n    --color-jade-600: oklch(65% 0.4 150deg);\n    --color-jade-700: oklch(60% 0.45 150deg);\n    --color-jade-800: oklch(55% 0.5 150deg);\n    --color-jade-900: oklch(50% 0.55 150deg);\n\n/* Saphir */\n    --color-sapphire-50: oklch(95% 0.1 260deg);\n    --color-sapphire-100: oklch(90% 0.15 260deg);\n    --color-sapphire-200: oklch(85% 0.2 260deg);\n    --color-sapphire-300: oklch(80% 0.25 260deg);\n    --color-sapphire-400: oklch(75% 0.3 260deg);\n    --color-sapphire-500: oklch(70% 0.35 260deg);\n    --color-sapphire-600: oklch(65% 0.4 260deg);\n    --color-sapphire-700: oklch(60% 0.45 260deg);\n    --color-sapphire-800: oklch(55% 0.5 260deg);\n    --color-sapphire-900: oklch(50% 0.55 260deg);\n\n/* Rubin */\n    --color-ruby-50: oklch(95% 0.1 0deg);\n    --color-ruby-100: oklch(90% 0.15 0deg);\n    --color-ruby-200: oklch(85% 0.2 0deg);\n    --color-ruby-300: oklch(80% 0.25 0deg);\n    --color-ruby-400: oklch(75% 0.3 0deg);\n    --color-ruby-500: oklch(70% 0.35 0deg);\n    --color-ruby-600: oklch(65% 0.4 0deg);\n    --color-ruby-700: oklch(60% 0.45 0deg);\n    --color-ruby-800: oklch(55% 0.5 0deg);\n    --color-ruby-900: oklch(50% 0.55 0deg);\n\n/* Amethyst */\n    --color-amethyst-50: oklch(95% 0.1 310deg);\n    --color-amethyst-100: oklch(90% 0.15 310deg);\n    --color-amethyst-200: oklch(85% 0.2 310deg);\n    --color-amethyst-300: oklch(80% 0.25 310deg);\n    --color-amethyst-400: oklch(75% 0.3 310deg);\n    --color-amethyst-500: oklch(70% 0.35 310deg);\n    --color-amethyst-600: oklch(65% 0.4 310deg);\n    --color-amethyst-700: oklch(60% 0.45 310deg);\n    --color-amethyst-800: oklch(55% 0.5 310deg);\n    --color-amethyst-900: oklch(50% 0.55 310deg);\n\n/* Topas */\n    --color-topaz-50: oklch(95% 0.1 65deg);\n    --color-topaz-100: oklch(90% 0.15 65deg);\n    --color-topaz-200: oklch(85% 0.2 65deg);\n    --color-topaz-300: oklch(80% 0.25 65deg);\n    --color-topaz-400: oklch(75% 0.3 65deg);\n    --color-topaz-500: oklch(70% 0.35 65deg);\n    --color-topaz-600: oklch(65% 0.4 65deg);\n    --color-topaz-700: oklch(60% 0.45 65deg);\n    --color-topaz-800: oklch(55% 0.5 65deg);\n    --color-topaz-900: oklch(50% 0.55 65deg);\n\n/* Zitrin */\n    --color-citrine-50: oklch(95% 0.1 85deg);\n    --color-citrine-100: oklch(90% 0.15 85deg);\n    --color-citrine-200: oklch(85% 0.2 85deg);\n    --color-citrine-300: oklch(80% 0.25 85deg);\n    --color-citrine-400: oklch(75% 0.3 85deg);\n    --color-citrine-500: oklch(70% 0.35 85deg);\n    --color-citrine-600: oklch(65% 0.4 85deg);\n    --color-citrine-700: oklch(60% 0.45 85deg);\n    --color-citrine-800: oklch(55% 0.5 85deg);\n    --color-citrine-900: oklch(50% 0.55 85deg);\n\n/* Peridot */\n    --color-peridot-50: oklch(95% 0.1 135deg);\n    --color-peridot-100: oklch(90% 0.15 135deg);\n    --color-peridot-200: oklch(85% 0.2 135deg);\n    --color-peridot-300: oklch(80% 0.25 135deg);\n    --color-peridot-400: oklch(75% 0.3 135deg);\n    --color-peridot-500: oklch(70% 0.35 135deg);\n    --color-peridot-600: oklch(65% 0.4 135deg);\n    --color-peridot-700: oklch(60% 0.45 135deg);\n    --color-peridot-800: oklch(55% 0.5 135deg);\n    --color-peridot-900: oklch(50% 0.55 135deg);\n\n/* Opal */\n    --color-opal-50: oklch(98% 0.01 205deg);\n    --color-opal-100: oklch(95% 0.01 205deg);\n    --color-opal-200: oklch(92% 0.01 205deg);\n    --color-opal-300: oklch(89% 0.01 205deg);\n    --color-opal-400: oklch(86% 0.01 205deg);\n    --color-opal-500: oklch(83% 0.01 205deg);\n    --color-opal-600: oklch(80% 0.01 205deg);\n    --color-opal-700: oklch(77% 0.01 205deg);\n    --color-opal-800: oklch(74% 0.01 205deg);\n    --color-opal-900: oklch(71% 0.01 205deg);\n\n/* Granat */\n    --color-garnet-50: oklch(95% 0.1 5deg);\n    --color-garnet-100: oklch(90% 0.15 5deg);\n    --color-garnet-200: oklch(85% 0.2 5deg);\n    --color-garnet-300: oklch(80% 0.25 5deg);\n    --color-garnet-400: oklch(75% 0.3 5deg);\n    --color-garnet-500: oklch(70% 0.35 5deg);\n    --color-garnet-600: oklch(65% 0.4 5deg);\n    --color-garnet-700: oklch(60% 0.45 5deg);\n    --color-garnet-800: oklch(55% 0.5 5deg);\n    --color-garnet-900: oklch(50% 0.55 5deg);\n\n/* Onyx */\n    --color-onyx-50: oklch(95% 0.01 280deg);\n    --color-onyx-100: oklch(90% 0.01 280deg);\n    --color-onyx-200: oklch(85% 0.01 280deg);\n    --color-onyx-300: oklch(80% 0.01 280deg);\n    --color-onyx-400: oklch(75% 0.01 280deg);\n    --color-onyx-500: oklch(70% 0.01 280deg);\n    --color-onyx-600: oklch(65% 0.01 280deg);\n    --color-onyx-700: oklch(60% 0.01 280deg);\n    --color-onyx-800: oklch(55% 0.01 280deg);\n    --color-onyx-900: oklch(50% 0.01 280deg);\n\n/* Malachit */\n    --color-malachite-50: oklch(95% 0.1 170deg);\n    --color-malachite-100: oklch(90% 0.15 170deg);\n    --color-malachite-200: oklch(85% 0.2 170deg);\n    --color-malachite-300: oklch(80% 0.25 170deg);\n    --color-malachite-400: oklch(75% 0.3 170deg);\n    --color-malachite-500: oklch(70% 0.35 170deg);\n    --color-malachite-600: oklch(65% 0.4 170deg);\n    --color-malachite-700: oklch(60% 0.45 170deg);\n    --color-malachite-800: oklch(55% 0.5 170deg);\n    --color-malachite-900: oklch(50% 0.55 170deg);\n\n/* Lapislazuli */\n    --color-lapis-50: oklch(95% 0.1 270deg);\n    --color-lapis-100: oklch(90% 0.15 270deg);\n    --color-lapis-200: oklch(85% 0.2 270deg);\n    --color-lapis-300: oklch(80% 0.25 270deg);\n    --color-lapis-400: oklch(75% 0.3 270deg);\n    --color-lapis-500: oklch(70% 0.35 270deg);\n    --color-lapis-600: oklch(65% 0.4 270deg);\n    --color-lapis-700: oklch(60% 0.45 270deg);\n    --color-lapis-800: oklch(55% 0.5 270deg);\n    --color-lapis-900: oklch(50% 0.55 270deg);\n\n/* Türkis */\n    --color-turquoise-50: oklch(95% 0.1 200deg);\n    --color-turquoise-100: oklch(90% 0.15 200deg);\n    --color-turquoise-200: oklch(85% 0.2 200deg);\n    --color-turquoise-300: oklch(80% 0.25 200deg);\n    --color-turquoise-400: oklch(75% 0.3 200deg);\n    --color-turquoise-500: oklch(70% 0.35 200deg);\n    --color-turquoise-600: oklch(65% 0.4 200deg);\n    --color-turquoise-700: oklch(60% 0.45 200deg);\n    --color-turquoise-800: oklch(55% 0.5 200deg);\n    --color-turquoise-900: oklch(50% 0.55 200deg);\n\n/* Koralle */\n    --color-coral-50: oklch(95% 0.1 20deg);\n    --color-coral-100: oklch(90% 0.15 20deg);\n    --color-coral-200: oklch(85% 0.2 20deg);\n    --color-coral-300: oklch(80% 0.25 20deg);\n    --color-coral-400: oklch(75% 0.3 20deg);\n    --color-coral-500: oklch(70% 0.35 20deg);\n    --color-coral-600: oklch(65% 0.4 20deg);\n    --color-coral-700: oklch(60% 0.45 20deg);\n    --color-coral-800: oklch(55% 0.5 20deg);\n    --color-coral-900: oklch(50% 0.55 20deg);\n\n/* Perlmutt */\n    --color-mother-of-pearl-50: oklch(98% 0.01 0deg);\n    --color-mother-of-pearl-100: oklch(95% 0.01 0deg);\n    --color-mother-of-pearl-200: oklch(92% 0.01 0deg);\n    --color-mother-of-pearl-300: oklch(89% 0.01 0deg);\n    --color-mother-of-pearl-400: oklch(86% 0.01 0deg);\n    --color-mother-of-pearl-500: oklch(83% 0.01 0deg);\n    --color-mother-of-pearl-600: oklch(80% 0.01 0deg);\n    --color-mother-of-pearl-700: oklch(77% 0.01 0deg);\n    --color-mother-of-pearl-800: oklch(74% 0.01 0deg);\n    --color-mother-of-pearl-900: oklch(71% 0.01 0deg);\n\n/* Obsidian */\n    --color-obsidian-50: oklch(95% 0.01 290deg);\n    --color-obsidian-100: oklch(90% 0.01 290deg);\n    --color-obsidian-200: oklch(85% 0.01 290deg);\n    --color-obsidian-300: oklch(80% 0.01 290deg);\n    --color-obsidian-400: oklch(75% 0.01 290deg);\n    --color-obsidian-500: oklch(70% 0.01 290deg);\n    --color-obsidian-600: oklch(65% 0.01 290deg);\n    --color-obsidian-700: oklch(60% 0.01 290deg);\n    --color-obsidian-800: oklch(55% 0.01 290deg);\n    --color-obsidian-900: oklch(50% 0.01 290deg);\n\n/* Jadeit */\n    --color-jadeite-50: oklch(95% 0.1 155deg);\n    --color-jadeite-100: oklch(90% 0.15 155deg);\n    --color-jadeite-200: oklch(85% 0.2 155deg);\n    --color-jadeite-300: oklch(80% 0.25 155deg);\n    --color-jadeite-400: oklch(75% 0.3 155deg);\n    --color-jadeite-500: oklch(70% 0.35 155deg);\n    --color-jadeite-600: oklch(65% 0.4 155deg);\n    --color-jadeite-700: oklch(60% 0.45 155deg);\n    --color-jadeite-800: oklch(55% 0.5 155deg);\n    --color-jadeite-900: oklch(50% 0.55 155deg);\n\n/* Smaragd */\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/* Aquamarin */\n    --color-aquamarine-50: oklch(95% 0.1 195deg);\n    --color-aquamarine-100: oklch(90% 0.15 195deg);\n    --color-aquamarine-200: oklch(85% 0.2 195deg);\n    --color-aquamarine-300: oklch(80% 0.25 195deg);\n    --color-aquamarine-400: oklch(75% 0.3 195deg);\n    --color-aquamarine-500: oklch(70% 0.35 195deg);\n    --color-aquamarine-600: oklch(65% 0.4 195deg);\n    --color-aquamarine-700: oklch(60% 0.45 195deg);\n    --color-aquamarine-800: oklch(55% 0.5 195deg);\n    --color-aquamarine-900: oklch(50% 0.55 195deg);\n\n/* Topas */\n    --color-topaz-50: oklch(95% 0.1 65deg);\n    --color-topaz-100: oklch(90% 0.15 65deg);\n    --color-topaz-200: oklch(85% 0.2 65deg);\n    --color-topaz-300: oklch(80% 0.25 65deg);\n    --color-topaz-400: oklch(75% 0.3 65deg);\n    --color-topaz-500: oklch(70% 0.35 65deg);\n    --color-topaz-600: oklch(65% 0.4 65deg);\n    --color-topaz-700: oklch(60% 0.45 65deg);\n    --color-topaz-800: oklch(55% 0.5 65deg);\n    --color-topaz-900: oklch(50% 0.55 65deg);\n\n/* Zitrin */\n    --color-citrine-50: oklch(95% 0.1 85deg);\n    --color-citrine-100: oklch(90% 0.15 85deg);\n    --color-citrine-200: oklch(85% 0.2 85deg);\n    --color-citrine-300: oklch(80% 0.25 85deg);\n    --color-citrine-400: oklch(75% 0.3 85deg);\n    --color-citrine-500: oklch(70% 0.35 85deg);\n    --color-citrine-600: oklch(65% 0.4 85deg);\n    --color-citrine-700: oklch(60% 0.45 85deg);\n    --color-citrine-800: oklch(55% 0.5 85deg);\n    --color-citrine-900: oklch(50% 0.55 85deg);\n\n/* Peridot */\n    --color-peridot-50: oklch(95% 0.1 135deg);\n    --color-peridot-100: oklch(90% 0.15 135deg);\n    --color-peridot-200: oklch(85% 0.2 135deg);\n    --color-peridot-300: oklch(80% 0.25 135deg);\n    --color-peridot-400: oklch(75% 0.3 135deg);\n    --color-peridot-500: oklch(70% 0.35 135deg);\n    --color-peridot-600: oklch(65% 0.4 135deg);\n    --color-peridot-700: oklch(60% 0.45 135deg);\n    --color-peridot-800: oklch(55% 0.5 135deg);\n    --color-peridot-900: oklch(50% 0.55 135deg);\n\n/* Opal */\n    --color-opal-50: oklch(98% 0.01 205deg);\n    --color-opal-100: oklch(95% 0.01 205deg);\n    --color-opal-200: oklch(92% 0.01 205deg);\n    --color-opal-300: oklch(89% 0.01 205deg);\n    --color-opal-400: oklch(86% 0.01 205deg);\n    --color-opal-500: oklch(83% 0.01 205deg);\n    --color-opal-600: oklch(80% 0.01 205deg);\n    --color-opal-700: oklch(77% 0.01 205deg);\n    --color-opal-800: oklch(74% 0.01 205deg);\n    --color-opal-900: oklch(71% 0.01 205deg);\n\n/* Mondstein */\n    --color-moonstone-50: oklch(98% 0.01 220deg);\n    --color-moonstone-100: oklch(95% 0.01 220deg);\n    --color-moonstone-200: oklch(92% 0.01 220deg);\n    --color-moonstone-300: oklch(89% 0.01 220deg);\n    --color-moonstone-400: oklch(86% 0.01 220deg);\n    --color-moonstone-500: oklch(83% 0.01 220deg);\n    --color-moonstone-600: oklch(80% 0.01 220deg);\n    --color-moonstone-700: oklch(77% 0.01 220deg);\n    --color-moonstone-800: oklch(74% 0.01 220deg);\n    --color-moonstone-900: oklch(71% 0.01 220deg);\n\n/* Labradorit */\n    --color-labradorite-50: oklch(95% 0.1 240deg);\n    --color-labradorite-100: oklch(90% 0.15 240deg);\n    --color-labradorite-200: oklch(85% 0.2 240deg);\n    --color-labradorite-300: oklch(80% 0.25 240deg);\n    --color-labradorite-400: oklch(75% 0.3 240deg);\n    --color-labradorite-500: oklch(70% 0.35 240deg);\n    --color-labradorite-600: oklch(65% 0.4 240deg);\n    --color-labradorite-700: oklch(60% 0.45 240deg);\n    --color-labradorite-800: oklch(55% 0.5 240deg);\n    --color-labradorite-900: oklch(50% 0.55 240deg);\n\n/* Fluorit */\n    --color-fluorite-50: oklch(95% 0.1 280deg);\n    --color-fluorite-100: oklch(90% 0.15 280deg);\n    --color-fluorite-200: oklch(85% 0.2 280deg);\n    --color-fluorite-300: oklch(80% 0.25 280deg);\n    --color-fluorite-400: oklch(75% 0.3 280deg);\n    --color-fluorite-500: oklch(70% 0.35 280deg);\n    --color-fluorite-600: oklch(65% 0.4 280deg);\n    --color-fluorite-700: oklch(60% 0.45 280deg);\n    --color-fluorite-800: oklch(55% 0.5 280deg);\n    --color-fluorite-900: oklch(50% 0.55 280deg);\n\n/* Pastelltöne */\n    --color-pastel-pink-50: oklch(95% 0.05 0deg);\n    --color-pastel-pink-100: oklch(90% 0.1 0deg);\n    --color-pastel-pink-200: oklch(85% 0.15 0deg);\n    --color-pastel-pink-300: oklch(80% 0.2 0deg);\n    --color-pastel-pink-400: oklch(75% 0.25 0deg);\n    --color-pastel-pink-500: oklch(70% 0.3 0deg);\n    --color-pastel-pink-600: oklch(65% 0.35 0deg);\n    --color-pastel-pink-700: oklch(60% 0.4 0deg);\n    --color-pastel-pink-800: oklch(55% 0.45 0deg);\n    --color-pastel-pink-900: oklch(50% 0.5 0deg);\n    --color-pastel-blue-50: oklch(95% 0.05 250deg);\n    --color-pastel-blue-100: oklch(90% 0.1 250deg);\n    --color-pastel-blue-200: oklch(85% 0.15 250deg);\n    --color-pastel-blue-300: oklch(80% 0.2 250deg);\n    --color-pastel-blue-400: oklch(75% 0.25 250deg);\n    --color-pastel-blue-500: oklch(70% 0.3 250deg);\n    --color-pastel-blue-600: oklch(65% 0.35 250deg);\n    --color-pastel-blue-700: oklch(60% 0.4 250deg);\n    --color-pastel-blue-800: oklch(55% 0.45 250deg);\n    --color-pastel-blue-900: oklch(50% 0.5 250deg);\n    --color-pastel-green-50: oklch(95% 0.05 150deg);\n    --color-pastel-green-100: oklch(90% 0.1 150deg);\n    --color-pastel-green-200: oklch(85% 0.15 150deg);\n    --color-pastel-green-300: oklch(80% 0.2 150deg);\n    --color-pastel-green-400: oklch(75% 0.25 150deg);\n    --color-pastel-green-500: oklch(70% 0.3 150deg);\n    --color-pastel-green-600: oklch(65% 0.35 150deg);\n    --color-pastel-green-700: oklch(60% 0.4 150deg);\n    --color-pastel-green-800: oklch(55% 0.45 150deg);\n    --color-pastel-green-900: oklch(50% 0.5 150deg);\n    --color-pastel-yellow-50: oklch(95% 0.05 80deg);\n    --color-pastel-yellow-100: oklch(90% 0.1 80deg);\n    --color-pastel-yellow-200: oklch(85% 0.15 80deg);\n    --color-pastel-yellow-300: oklch(80% 0.2 80deg);\n    --color-pastel-yellow-400: oklch(75% 0.25 80deg);\n    --color-pastel-yellow-500: oklch(70% 0.3 80deg);\n    --color-pastel-yellow-600: oklch(65% 0.35 80deg);\n    --color-pastel-yellow-700: oklch(60% 0.4 80deg);\n    --color-pastel-yellow-800: oklch(55% 0.45 80deg);\n    --color-pastel-yellow-900: oklch(50% 0.5 80deg);\n    --color-pastel-purple-50: oklch(95% 0.05 300deg);\n    --color-pastel-purple-100: oklch(90% 0.1 300deg);\n    --color-pastel-purple-200: oklch(85% 0.15 300deg);\n    --color-pastel-purple-300: oklch(80% 0.2 300deg);\n    --color-pastel-purple-400: oklch(75% 0.25 300deg);\n    --color-pastel-purple-500: oklch(70% 0.3 300deg);\n    --color-pastel-purple-600: oklch(65% 0.35 300deg);\n    --color-pastel-purple-700: oklch(60% 0.4 300deg);\n    --color-pastel-purple-800: oklch(55% 0.45 300deg);\n    --color-pastel-purple-900: oklch(50% 0.5 300deg);\n\n/* Neontöne */\n    --color-neon-pink-50: oklch(95% 0.3 0deg);\n    --color-neon-pink-100: oklch(90% 0.35 0deg);\n    --color-neon-pink-200: oklch(85% 0.4 0deg);\n    --color-neon-pink-300: oklch(80% 0.45 0deg);\n    --color-neon-pink-400: oklch(75% 0.5 0deg);\n    --color-neon-pink-500: oklch(70% 0.55 0deg);\n    --color-neon-pink-600: oklch(65% 0.6 0deg);\n    --color-neon-pink-700: oklch(60% 0.65 0deg);\n    --color-neon-pink-800: oklch(55% 0.7 0deg);\n    --color-neon-pink-900: oklch(50% 0.75 0deg);\n    --color-neon-blue-50: oklch(95% 0.3 250deg);\n    --color-neon-blue-100: oklch(90% 0.35 250deg);\n    --color-neon-blue-200: oklch(85% 0.4 250deg);\n    --color-neon-blue-300: oklch(80% 0.45 250deg);\n    --color-neon-blue-400: oklch(75% 0.5 250deg);\n    --color-neon-blue-500: oklch(70% 0.55 250deg);\n    --color-neon-blue-600: oklch(65% 0.6 250deg);\n    --color-neon-blue-700: oklch(60% 0.65 250deg);\n    --color-neon-blue-800: oklch(55% 0.7 250deg);\n    --color-neon-blue-900: oklch(50% 0.75 250deg);\n    --color-neon-green-50: oklch(95% 0.3 150deg);\n    --color-neon-green-100: oklch(90% 0.35 150deg);\n    --color-neon-green-200: oklch(85% 0.4 150deg);\n    --color-neon-green-300: oklch(80% 0.45 150deg);\n    --color-neon-green-400: oklch(75% 0.5 150deg);\n    --color-neon-green-500: oklch(70% 0.55 150deg);\n    --color-neon-green-600: oklch(65% 0.6 150deg);\n    --color-neon-green-700: oklch(60% 0.65 150deg);\n    --color-neon-green-800: oklch(55% 0.7 150deg);\n    --color-neon-green-900: oklch(50% 0.75 150deg);\n    --color-neon-yellow-50: oklch(95% 0.3 80deg);\n    --color-neon-yellow-100: oklch(90% 0.35 80deg);\n    --color-neon-yellow-200: oklch(85% 0.4 80deg);\n    --color-neon-yellow-300: oklch(80% 0.45 80deg);\n    --color-neon-yellow-400: oklch(75% 0.5 80deg);\n    --color-neon-yellow-500: oklch(70% 0.55 80deg);\n    --color-neon-yellow-600: oklch(65% 0.6 80deg);\n    --color-neon-yellow-700: oklch(60% 0.65 80deg);\n    --color-neon-yellow-800: oklch(55% 0.7 80deg);\n    --color-neon-yellow-900: oklch(50% 0.75 80deg);\n    --color-neon-orange-50: oklch(95% 0.3 50deg);\n    --color-neon-orange-100: oklch(90% 0.35 50deg);\n    --color-neon-orange-200: oklch(85% 0.4 50deg);\n    --color-neon-orange-300: oklch(80% 0.45 50deg);\n    --color-neon-orange-400: oklch(75% 0.5 50deg);\n    --color-neon-orange-500: oklch(70% 0.55 50deg);\n    --color-neon-orange-600: oklch(65% 0.6 50deg);\n    --color-neon-orange-700: oklch(60% 0.65 50deg);\n    --color-neon-orange-800: oklch(55% 0.7 50deg);\n    --color-neon-orange-900: oklch(50% 0.75 50deg);\n    --color-neon-purple-50: oklch(95% 0.3 300deg);\n    --color-neon-purple-100: oklch(90% 0.35 300deg);\n    --color-neon-purple-200: oklch(85% 0.4 300deg);\n    --color-neon-purple-300: oklch(80% 0.45 300deg);\n    --color-neon-purple-400: oklch(75% 0.5 300deg);\n    --color-neon-purple-500: oklch(70% 0.55 300deg);\n    --color-neon-purple-600: oklch(65% 0.6 300deg);\n    --color-neon-purple-700: oklch(60% 0.65 300deg);\n    --color-neon-purple-800: oklch(55% 0.7 300deg);\n    --color-neon-purple-900: oklch(50% 0.75 300deg);\n\n/* Moderne Farbfunktionen mit color-mix() */\n\n/* Farbvarianten mit Alpha-Werten */\n    --blue-transparent-10: color-mix(in srgb, var(--color-blue-500) 10, transparent);\n    --blue-transparent-20: color-mix(in srgb, var(--color-blue-500) 20, transparent);\n    --blue-transparent-30: color-mix(in srgb, var(--color-blue-500) 30, transparent);\n    --blue-transparent-40: color-mix(in srgb, var(--color-blue-500) 40, transparent);\n    --blue-transparent-50: color-mix(in srgb, var(--color-blue-500) 50, transparent);\n\n/* Farbvarianten mit Schwarz/Weiß für Schatten und Highlights */\n    --blue-tint-10: color-mix(in srgb, var(--color-blue-500) 90, var(--color-white));\n    --blue-tint-20: color-mix(in srgb, var(--color-blue-500) 80, var(--color-white));\n    --blue-tint-30: color-mix(in srgb, var(--color-blue-500) 70, var(--color-white));\n    --blue-shade-10: color-mix(in srgb, var(--color-blue-500) 90, var(--color-black));\n    --blue-shade-20: color-mix(in srgb, var(--color-blue-500) 80, var(--color-black));\n    --blue-shade-30: color-mix(in srgb, var(--color-blue-500) 70, var(--color-black));\n\n/* Farbvarianten für Hover- und aktive Zustände */\n    --blue-hover: color-mix(in srgb, var(--color-blue-500) 90, var(--color-white));\n    --blue-active: color-mix(in srgb, var(--color-blue-500) 90, var(--color-black));\n\n/* Kontrastierende Farben */\n    --blue-contrast-light: color-mix(in srgb, var(--color-blue-500) 10, var(--color-white));\n    --blue-contrast-dark: color-mix(in srgb, var(--color-blue-900) 90, var(--color-black));\n\n/* Farbkombinationen für spezielle Effekte */\n    --primary-secondary-mix: color-mix(in lch, var(--color-blue-500) 50, var(--color-indigo-500));\n    --primary-accent-mix: color-mix(in lch, var(--color-blue-500) 50, var(--color-cyan-500));\n    --secondary-accent-mix: color-mix(in lch, var(--color-indigo-500) 50, var(--color-cyan-500));\n\n/* Farben für Status-Indikatoren */\n    --success-hover: color-mix(in srgb, var(--color-green-500) 90, var(--color-white));\n    --success-active: color-mix(in srgb, var(--color-green-500) 90, var(--color-black));\n    --error-hover: color-mix(in srgb, var(--color-red-500) 90, var(--color-white));\n    --error-active: color-mix(in srgb, var(--color-red-500) 90, var(--color-black));\n    --warning-hover: color-mix(in srgb, var(--color-amber-500) 90, var(--color-white));\n    --warning-active: color-mix(in srgb, var(--color-amber-500) 90, var(--color-black));\n\n/* Farbkombinationen für Theme-Variationen */\n    --theme-gradient-start: var(--color-blue-500);\n    --theme-gradient-end: var(--color-cyan-500);\n    --theme-gradient-mid: color-mix(in lch, var(--theme-gradient-start) 50, var(--theme-gradient-end));\n\n/* Farbschemata für Hell-/Dunkelmodus */\n    --light-surface: color-mix(in srgb, var(--color-gray-50) 98%, var(--color-blue-500));\n    --light-surface-hover: color-mix(in srgb, var(--color-gray-100) 95%, var(--color-blue-500));\n    --dark-surface: color-mix(in srgb, var(--color-gray-900) 98%, var(--color-blue-500));\n    --dark-surface-hover: color-mix(in srgb, var(--color-gray-800) 95%, var(--color-blue-500));\n\n/* Textfarben mit erhöhtem Kontrast für Barrierefreiheit */\n    --text-high-contrast: color-mix(in srgb, var(--color-gray-900) 95%, var(--color-blue-900));\n    --text-medium-contrast: color-mix(in srgb, var(--color-gray-700) 95%, var(--color-blue-700));\n    --text-low-contrast: color-mix(in srgb, var(--color-gray-500) 95%, var(--color-blue-500));\n  }\n\n/* Dynamische Farbvarianten für alle Basisfarben */\n  .dynamic-color-variants {\n/* Primärfarben */\n    --primary-lightest: color-mix(in srgb, var(--color-primary-500) 20, var(--color-white));\n    --primary-lighter: color-mix(in srgb, var(--color-primary-500) 40, var(--color-white));\n    --primary-light: color-mix(in srgb, var(--color-primary-500) 70, var(--color-white));\n    --primary: var(--color-primary-500);\n    --primary-dark: color-mix(in srgb, var(--color-primary-500) 70, var(--color-black));\n    --primary-darker: color-mix(in srgb, var(--color-primary-500) 40, var(--color-black));\n    --primary-darkest: color-mix(in srgb, var(--color-primary-500) 20, var(--color-black));\n\n/* Sekundärfarben */\n    --secondary-lightest: color-mix(in srgb, var(--color-secondary-500) 20, var(--color-white));\n    --secondary-lighter: color-mix(in srgb, var(--color-secondary-500) 40, var(--color-white));\n    --secondary-light: color-mix(in srgb, var(--color-secondary-500) 70, var(--color-white));\n    --secondary: var(--color-secondary-500);\n    --secondary-dark: color-mix(in srgb, var(--color-secondary-500) 70, var(--color-black));\n    --secondary-darker: color-mix(in srgb, var(--color-secondary-500) 40, var(--color-black));\n    --secondary-darkest: color-mix(in srgb, var(--color-secondary-500) 20, var(--color-black));\n\n/* Akzentfarben */\n    --accent-lightest: color-mix(in srgb, var(--color-accent-500) 20, var(--color-white));\n    --accent-lighter: color-mix(in srgb, var(--color-accent-500) 40, var(--color-white));\n    --accent-light: color-mix(in srgb, var(--color-accent-500) 70, var(--color-white));\n    --accent: var(--color-accent-500);\n    --accent-dark: color-mix(in srgb, var(--color-accent-500) 70, var(--color-black));\n    --accent-darker: color-mix(in srgb, var(--color-accent-500) 40, var(--color-black));\n    --accent-darkest: color-mix(in srgb, var(--color-accent-500) 20, var(--color-black));\n  }\n\n/* Farbschemata für Nutzerinteraktionen */\n  .interactive-colors {\n/* Hover-Zustände */\n    --btn-primary-hover: color-mix(in srgb, var(--color-primary-500) 90, var(--color-white));\n    --btn-primary-active: color-mix(in srgb, var(--color-primary-500) 90, var(--color-black));\n    --btn-secondary-hover: color-mix(in srgb, var(--color-secondary-500) 90, var(--color-white));\n    --btn-secondary-active: color-mix(in srgb, var(--color-secondary-500) 90, var(--color-black));\n\n/* Link-Farben */\n    --link-default: var(--color-primary-600);\n    --link-hover: color-mix(in srgb, var(--color-primary-600) 80, var(--color-black));\n    --link-visited: color-mix(in lch, var(--color-primary-600) 70, var(--color-purple-600));\n\n/* Fokus-Indikator */\n    --focus-ring: color-mix(in srgb, var(--color-primary-500) 80, var(--color-white));\n    --focus-ring-inset: color-mix(in srgb, var(--color-primary-500) 20, var(--color-white));\n  }\n}\n\n\n/* Datei: core/color-mix.css */\n/**\n* Auto-generiert mit generateColorMixes.js\n* base/colors.css\n*/\n\n@layer color-mix {\n  :root {\n/* blue */\n    --blue-lightest: color-mix(in srgb, var(--color-blue-500) 20, var(--color-white));\n    --blue-lighter: color-mix(in srgb, var(--color-blue-500) 40, var(--color-white));\n    --blue-light: color-mix(in srgb, var(--color-blue-500) 70, var(--color-white));\n    --blue: var(--color-blue-500);\n    --blue-dark: color-mix(in srgb, var(--color-blue-500) 70, var(--color-black));\n    --blue-darker: color-mix(in srgb, var(--color-blue-500) 40, var(--color-black));\n    --blue-darkest: color-mix(in srgb, var(--color-blue-500) 20, var(--color-black));\n\n/* sky */\n    --sky-lightest: color-mix(in srgb, var(--color-sky-500) 20, var(--color-white));\n    --sky-lighter: color-mix(in srgb, var(--color-sky-500) 40, var(--color-white));\n    --sky-light: color-mix(in srgb, var(--color-sky-500) 70, var(--color-white));\n    --sky: var(--color-sky-500);\n    --sky-dark: color-mix(in srgb, var(--color-sky-500) 70, var(--color-black));\n    --sky-darker: color-mix(in srgb, var(--color-sky-500) 40, var(--color-black));\n    --sky-darkest: color-mix(in srgb, var(--color-sky-500) 20, var(--color-black));\n\n/* cyan */\n    --cyan-lightest: color-mix(in srgb, var(--color-cyan-500) 20, var(--color-white));\n    --cyan-lighter: color-mix(in srgb, var(--color-cyan-500) 40, var(--color-white));\n    --cyan-light: color-mix(in srgb, var(--color-cyan-500) 70, var(--color-white));\n    --cyan: var(--color-cyan-500);\n    --cyan-dark: color-mix(in srgb, var(--color-cyan-500) 70, var(--color-black));\n    --cyan-darker: color-mix(in srgb, var(--color-cyan-500) 40, var(--color-black));\n    --cyan-darkest: color-mix(in srgb, var(--color-cyan-500) 20, var(--color-black));\n\n/* mint */\n    --mint-lightest: color-mix(in srgb, var(--color-mint-500) 20, var(--color-white));\n    --mint-lighter: color-mix(in srgb, var(--color-mint-500) 40, var(--color-white));\n    --mint-light: color-mix(in srgb, var(--color-mint-500) 70, var(--color-white));\n    --mint: var(--color-mint-500);\n    --mint-dark: color-mix(in srgb, var(--color-mint-500) 70, var(--color-black));\n    --mint-darker: color-mix(in srgb, var(--color-mint-500) 40, var(--color-black));\n    --mint-darkest: color-mix(in srgb, var(--color-mint-500) 20, var(--color-black));\n\n/* green */\n    --green-lightest: color-mix(in srgb, var(--color-green-500) 20, var(--color-white));\n    --green-lighter: color-mix(in srgb, var(--color-green-500) 40, var(--color-white));\n    --green-light: color-mix(in srgb, var(--color-green-500) 70, var(--color-white));\n    --green: var(--color-green-500);\n    --green-dark: color-mix(in srgb, var(--color-green-500) 70, var(--color-black));\n    --green-darker: color-mix(in srgb, var(--color-green-500) 40, var(--color-black));\n    --green-darkest: color-mix(in srgb, var(--color-green-500) 20, var(--color-black));\n\n/* lime */\n    --lime-lightest: color-mix(in srgb, var(--color-lime-500) 20, var(--color-white));\n    --lime-lighter: color-mix(in srgb, var(--color-lime-500) 40, var(--color-white));\n    --lime-light: color-mix(in srgb, var(--color-lime-500) 70, var(--color-white));\n    --lime: var(--color-lime-500);\n    --lime-dark: color-mix(in srgb, var(--color-lime-500) 70, var(--color-black));\n    --lime-darker: color-mix(in srgb, var(--color-lime-500) 40, var(--color-black));\n    --lime-darkest: color-mix(in srgb, var(--color-lime-500) 20, var(--color-black));\n\n/* yellow */\n    --yellow-lightest: color-mix(in srgb, var(--color-yellow-500) 20, var(--color-white));\n    --yellow-lighter: color-mix(in srgb, var(--color-yellow-500) 40, var(--color-white));\n    --yellow-light: color-mix(in srgb, var(--color-yellow-500) 70, var(--color-white));\n    --yellow: var(--color-yellow-500);\n    --yellow-dark: color-mix(in srgb, var(--color-yellow-500) 70, var(--color-black));\n    --yellow-darker: color-mix(in srgb, var(--color-yellow-500) 40, var(--color-black));\n    --yellow-darkest: color-mix(in srgb, var(--color-yellow-500) 20, var(--color-black));\n\n/* gold */\n    --gold-lightest: color-mix(in srgb, var(--color-gold-500) 20, var(--color-white));\n    --gold-lighter: color-mix(in srgb, var(--color-gold-500) 40, var(--color-white));\n    --gold-light: color-mix(in srgb, var(--color-gold-500) 70, var(--color-white));\n    --gold: var(--color-gold-500);\n    --gold-dark: color-mix(in srgb, var(--color-gold-500) 70, var(--color-black));\n    --gold-darker: color-mix(in srgb, var(--color-gold-500) 40, var(--color-black));\n    --gold-darkest: color-mix(in srgb, var(--color-gold-500) 20, var(--color-black));\n\n/* orange */\n    --orange-lightest: color-mix(in srgb, var(--color-orange-500) 20, var(--color-white));\n    --orange-lighter: color-mix(in srgb, var(--color-orange-500) 40, var(--color-white));\n    --orange-light: color-mix(in srgb, var(--color-orange-500) 70, var(--color-white));\n    --orange: var(--color-orange-500);\n    --orange-dark: color-mix(in srgb, var(--color-orange-500) 70, var(--color-black));\n    --orange-darker: color-mix(in srgb, var(--color-orange-500) 40, var(--color-black));\n    --orange-darkest: color-mix(in srgb, var(--color-orange-500) 20, var(--color-black));\n\n/* coral */\n    --coral-lightest: color-mix(in srgb, var(--color-coral-500) 20, var(--color-white));\n    --coral-lighter: color-mix(in srgb, var(--color-coral-500) 40, var(--color-white));\n    --coral-light: color-mix(in srgb, var(--color-coral-500) 70, var(--color-white));\n    --coral: var(--color-coral-500);\n    --coral-dark: color-mix(in srgb, var(--color-coral-500) 70, var(--color-black));\n    --coral-darker: color-mix(in srgb, var(--color-coral-500) 40, var(--color-black));\n    --coral-darkest: color-mix(in srgb, var(--color-coral-500) 20, var(--color-black));\n\n/* red */\n    --red-lightest: color-mix(in srgb, var(--color-red-500) 20, var(--color-white));\n    --red-lighter: color-mix(in srgb, var(--color-red-500) 40, var(--color-white));\n    --red-light: color-mix(in srgb, var(--color-red-500) 70, var(--color-white));\n    --red: var(--color-red-500);\n    --red-dark: color-mix(in srgb, var(--color-red-500) 70, var(--color-black));\n    --red-darker: color-mix(in srgb, var(--color-red-500) 40, var(--color-black));\n    --red-darkest: color-mix(in srgb, var(--color-red-500) 20, var(--color-black));\n\n/* pink */\n    --pink-lightest: color-mix(in srgb, var(--color-pink-500) 20, var(--color-white));\n    --pink-lighter: color-mix(in srgb, var(--color-pink-500) 40, var(--color-white));\n    --pink-light: color-mix(in srgb, var(--color-pink-500) 70, var(--color-white));\n    --pink: var(--color-pink-500);\n    --pink-dark: color-mix(in srgb, var(--color-pink-500) 70, var(--color-black));\n    --pink-darker: color-mix(in srgb, var(--color-pink-500) 40, var(--color-black));\n    --pink-darkest: color-mix(in srgb, var(--color-pink-500) 20, var(--color-black));\n\n/* rose */\n    --rose-lightest: color-mix(in srgb, var(--color-rose-500) 20, var(--color-white));\n    --rose-lighter: color-mix(in srgb, var(--color-rose-500) 40, var(--color-white));\n    --rose-light: color-mix(in srgb, var(--color-rose-500) 70, var(--color-white));\n    --rose: var(--color-rose-500);\n    --rose-dark: color-mix(in srgb, var(--color-rose-500) 70, var(--color-black));\n    --rose-darker: color-mix(in srgb, var(--color-rose-500) 40, var(--color-black));\n    --rose-darkest: color-mix(in srgb, var(--color-rose-500) 20, var(--color-black));\n\n/* purple */\n    --purple-lightest: color-mix(in srgb, var(--color-purple-500) 20, var(--color-white));\n    --purple-lighter: color-mix(in srgb, var(--color-purple-500) 40, var(--color-white));\n    --purple-light: color-mix(in srgb, var(--color-purple-500) 70, var(--color-white));\n    --purple: var(--color-purple-500);\n    --purple-dark: color-mix(in srgb, var(--color-purple-500) 70, var(--color-black));\n    --purple-darker: color-mix(in srgb, var(--color-purple-500) 40, var(--color-black));\n    --purple-darkest: color-mix(in srgb, var(--color-purple-500) 20, var(--color-black));\n\n/* indigo */\n    --indigo-lightest: color-mix(in srgb, var(--color-indigo-500) 20, var(--color-white));\n    --indigo-lighter: color-mix(in srgb, var(--color-indigo-500) 40, var(--color-white));\n    --indigo-light: color-mix(in srgb, var(--color-indigo-500) 70, var(--color-white));\n    --indigo: var(--color-indigo-500);\n    --indigo-dark: color-mix(in srgb, var(--color-indigo-500) 70, var(--color-black));\n    --indigo-darker: color-mix(in srgb, var(--color-indigo-500) 40, var(--color-black));\n    --indigo-darkest: color-mix(in srgb, var(--color-indigo-500) 20, var(--color-black));\n\n/* gray */\n    --gray-lightest: color-mix(in srgb, var(--color-gray-500) 20, var(--color-white));\n    --gray-lighter: color-mix(in srgb, var(--color-gray-500) 40, var(--color-white));\n    --gray-light: color-mix(in srgb, var(--color-gray-500) 70, var(--color-white));\n    --gray: var(--color-gray-500);\n    --gray-dark: color-mix(in srgb, var(--color-gray-500) 70, var(--color-black));\n    --gray-darker: color-mix(in srgb, var(--color-gray-500) 40, var(--color-black));\n    --gray-darkest: color-mix(in srgb, var(--color-gray-500) 20, var(--color-black));\n\n/* warm-gray */\n    --warm-gray-lightest: color-mix(in srgb, var(--color-warm-gray-500) 20, var(--color-white));\n    --warm-gray-lighter: color-mix(in srgb, var(--color-warm-gray-500) 40, var(--color-white));\n    --warm-gray-light: color-mix(in srgb, var(--color-warm-gray-500) 70, var(--color-white));\n    --warm-gray: var(--color-warm-gray-500);\n    --warm-gray-dark: color-mix(in srgb, var(--color-warm-gray-500) 70, var(--color-black));\n    --warm-gray-darker: color-mix(in srgb, var(--color-warm-gray-500) 40, var(--color-black));\n    --warm-gray-darkest: color-mix(in srgb, var(--color-warm-gray-500) 20, var(--color-black));\n\n/* cool-gray */\n    --cool-gray-lightest: color-mix(in srgb, var(--color-cool-gray-500) 20, var(--color-white));\n    --cool-gray-lighter: color-mix(in srgb, var(--color-cool-gray-500) 40, var(--color-white));\n    --cool-gray-light: color-mix(in srgb, var(--color-cool-gray-500) 70, var(--color-white));\n    --cool-gray: var(--color-cool-gray-500);\n    --cool-gray-dark: color-mix(in srgb, var(--color-cool-gray-500) 70, var(--color-black));\n    --cool-gray-darker: color-mix(in srgb, var(--color-cool-gray-500) 40, var(--color-black));\n    --cool-gray-darkest: color-mix(in srgb, var(--color-cool-gray-500) 20, var(--color-black));\n\n/* azure */\n    --azure-lightest: color-mix(in srgb, var(--color-azure-500) 20, var(--color-white));\n    --azure-lighter: color-mix(in srgb, var(--color-azure-500) 40, var(--color-white));\n    --azure-light: color-mix(in srgb, var(--color-azure-500) 70, var(--color-white));\n    --azure: var(--color-azure-500);\n    --azure-dark: color-mix(in srgb, var(--color-azure-500) 70, var(--color-black));\n    --azure-darker: color-mix(in srgb, var(--color-azure-500) 40, var(--color-black));\n    --azure-darkest: color-mix(in srgb, var(--color-azure-500) 20, var(--color-black));\n\n/* teal */\n    --teal-lightest: color-mix(in srgb, var(--color-teal-500) 20, var(--color-white));\n    --teal-lighter: color-mix(in srgb, var(--color-teal-500) 40, var(--color-white));\n    --teal-light: color-mix(in srgb, var(--color-teal-500) 70, var(--color-white));\n    --teal: var(--color-teal-500);\n    --teal-dark: color-mix(in srgb, var(--color-teal-500) 70, var(--color-black));\n    --teal-darker: color-mix(in srgb, var(--color-teal-500) 40, var(--color-black));\n    --teal-darkest: color-mix(in srgb, var(--color-teal-500) 20, var(--color-black));\n\n/* emerald */\n    --emerald-lightest: color-mix(in srgb, var(--color-emerald-500) 20, var(--color-white));\n    --emerald-lighter: color-mix(in srgb, var(--color-emerald-500) 40, var(--color-white));\n    --emerald-light: color-mix(in srgb, var(--color-emerald-500) 70, var(--color-white));\n    --emerald: var(--color-emerald-500);\n    --emerald-dark: color-mix(in srgb, var(--color-emerald-500) 70, var(--color-black));\n    --emerald-darker: color-mix(in srgb, var(--color-emerald-500) 40, var(--color-black));\n    --emerald-darkest: color-mix(in srgb, var(--color-emerald-500) 20, var(--color-black));\n\n/* olive */\n    --olive-lightest: color-mix(in srgb, var(--color-olive-500) 20, var(--color-white));\n    --olive-lighter: color-mix(in srgb, var(--color-olive-500) 40, var(--color-white));\n    --olive-light: color-mix(in srgb, var(--color-olive-500) 70, var(--color-white));\n    --olive: var(--color-olive-500);\n    --olive-dark: color-mix(in srgb, var(--color-olive-500) 70, var(--color-black));\n    --olive-darker: color-mix(in srgb, var(--color-olive-500) 40, var(--color-black));\n    --olive-darkest: color-mix(in srgb, var(--color-olive-500) 20, var(--color-black));\n\n/* amber */\n    --amber-lightest: color-mix(in srgb, var(--color-amber-500) 20, var(--color-white));\n    --amber-lighter: color-mix(in srgb, var(--color-amber-500) 40, var(--color-white));\n    --amber-light: color-mix(in srgb, var(--color-amber-500) 70, var(--color-white));\n    --amber: var(--color-amber-500);\n    --amber-dark: color-mix(in srgb, var(--color-amber-500) 70, var(--color-black));\n    --amber-darker: color-mix(in srgb, var(--color-amber-500) 40, var(--color-black));\n    --amber-darkest: color-mix(in srgb, var(--color-amber-500) 20, var(--color-black));\n\n/* copper */\n    --copper-lightest: color-mix(in srgb, var(--color-copper-500) 20, var(--color-white));\n    --copper-lighter: color-mix(in srgb, var(--color-copper-500) 40, var(--color-white));\n    --copper-light: color-mix(in srgb, var(--color-copper-500) 70, var(--color-white));\n    --copper: var(--color-copper-500);\n    --copper-dark: color-mix(in srgb, var(--color-copper-500) 70, var(--color-black));\n    --copper-darker: color-mix(in srgb, var(--color-copper-500) 40, var(--color-black));\n    --copper-darkest: color-mix(in srgb, var(--color-copper-500) 20, var(--color-black));\n\n/* cherry */\n    --cherry-lightest: color-mix(in srgb, var(--color-cherry-500) 20, var(--color-white));\n    --cherry-lighter: color-mix(in srgb, var(--color-cherry-500) 40, var(--color-white));\n    --cherry-light: color-mix(in srgb, var(--color-cherry-500) 70, var(--color-white));\n    --cherry: var(--color-cherry-500);\n    --cherry-dark: color-mix(in srgb, var(--color-cherry-500) 70, var(--color-black));\n    --cherry-darker: color-mix(in srgb, var(--color-cherry-500) 40, var(--color-black));\n    --cherry-darkest: color-mix(in srgb, var(--color-cherry-500) 20, var(--color-black));\n\n/* magenta */\n    --magenta-lightest: color-mix(in srgb, var(--color-magenta-500) 20, var(--color-white));\n    --magenta-lighter: color-mix(in srgb, var(--color-magenta-500) 40, var(--color-white));\n    --magenta-light: color-mix(in srgb, var(--color-magenta-500) 70, var(--color-white));\n    --magenta: var(--color-magenta-500);\n    --magenta-dark: color-mix(in srgb, var(--color-magenta-500) 70, var(--color-black));\n    --magenta-darker: color-mix(in srgb, var(--color-magenta-500) 40, var(--color-black));\n    --magenta-darkest: color-mix(in srgb, var(--color-magenta-500) 20, var(--color-black));\n\n/* lavender */\n    --lavender-lightest: color-mix(in srgb, var(--color-lavender-500) 20, var(--color-white));\n    --lavender-lighter: color-mix(in srgb, var(--color-lavender-500) 40, var(--color-white));\n    --lavender-light: color-mix(in srgb, var(--color-lavender-500) 70, var(--color-white));\n    --lavender: var(--color-lavender-500);\n    --lavender-dark: color-mix(in srgb, var(--color-lavender-500) 70, var(--color-black));\n    --lavender-darker: color-mix(in srgb, var(--color-lavender-500) 40, var(--color-black));\n    --lavender-darkest: color-mix(in srgb, var(--color-lavender-500) 20, var(--color-black));\n\n/* bronze */\n    --bronze-lightest: color-mix(in srgb, var(--color-bronze-500) 20, var(--color-white));\n    --bronze-lighter: color-mix(in srgb, var(--color-bronze-500) 40, var(--color-white));\n    --bronze-light: color-mix(in srgb, var(--color-bronze-500) 70, var(--color-white));\n    --bronze: var(--color-bronze-500);\n    --bronze-dark: color-mix(in srgb, var(--color-bronze-500) 70, var(--color-black));\n    --bronze-darker: color-mix(in srgb, var(--color-bronze-500) 40, var(--color-black));\n    --bronze-darkest: color-mix(in srgb, var(--color-bronze-500) 20, var(--color-black));\n\n/* pearl */\n    --pearl-lightest: color-mix(in srgb, var(--color-pearl-500) 20, var(--color-white));\n    --pearl-lighter: color-mix(in srgb, var(--color-pearl-500) 40, var(--color-white));\n    --pearl-light: color-mix(in srgb, var(--color-pearl-500) 70, var(--color-white));\n    --pearl: var(--color-pearl-500);\n    --pearl-dark: color-mix(in srgb, var(--color-pearl-500) 70, var(--color-black));\n    --pearl-darker: color-mix(in srgb, var(--color-pearl-500) 40, var(--color-black));\n    --pearl-darkest: color-mix(in srgb, var(--color-pearl-500) 20, var(--color-black));\n\n/* champagne */\n    --champagne-lightest: color-mix(in srgb, var(--color-champagne-500) 20, var(--color-white));\n    --champagne-lighter: color-mix(in srgb, var(--color-champagne-500) 40, var(--color-white));\n    --champagne-light: color-mix(in srgb, var(--color-champagne-500) 70, var(--color-white));\n    --champagne: var(--color-champagne-500);\n    --champagne-dark: color-mix(in srgb, var(--color-champagne-500) 70, var(--color-black));\n    --champagne-darker: color-mix(in srgb, var(--color-champagne-500) 40, var(--color-black));\n    --champagne-darkest: color-mix(in srgb, var(--color-champagne-500) 20, var(--color-black));\n\n/* taupe */\n    --taupe-lightest: color-mix(in srgb, var(--color-taupe-500) 20, var(--color-white));\n    --taupe-lighter: color-mix(in srgb, var(--color-taupe-500) 40, var(--color-white));\n    --taupe-light: color-mix(in srgb, var(--color-taupe-500) 70, var(--color-white));\n    --taupe: var(--color-taupe-500);\n    --taupe-dark: color-mix(in srgb, var(--color-taupe-500) 70, var(--color-black));\n    --taupe-darker: color-mix(in srgb, var(--color-taupe-500) 40, var(--color-black));\n    --taupe-darkest: color-mix(in srgb, var(--color-taupe-500) 20, var(--color-black));\n\n/* beige */\n    --beige-lightest: color-mix(in srgb, var(--color-beige-500) 20, var(--color-white));\n    --beige-lighter: color-mix(in srgb, var(--color-beige-500) 40, var(--color-white));\n    --beige-light: color-mix(in srgb, var(--color-beige-500) 70, var(--color-white));\n    --beige: var(--color-beige-500);\n    --beige-dark: color-mix(in srgb, var(--color-beige-500) 70, var(--color-black));\n    --beige-darker: color-mix(in srgb, var(--color-beige-500) 40, var(--color-black));\n    --beige-darkest: color-mix(in srgb, var(--color-beige-500) 20, var(--color-black));\n\n/* khaki */\n    --khaki-lightest: color-mix(in srgb, var(--color-khaki-500) 20, var(--color-white));\n    --khaki-lighter: color-mix(in srgb, var(--color-khaki-500) 40, var(--color-white));\n    --khaki-light: color-mix(in srgb, var(--color-khaki-500) 70, var(--color-white));\n    --khaki: var(--color-khaki-500);\n    --khaki-dark: color-mix(in srgb, var(--color-khaki-500) 70, var(--color-black));\n    --khaki-darker: color-mix(in srgb, var(--color-khaki-500) 40, var(--color-black));\n    --khaki-darkest: color-mix(in srgb, var(--color-khaki-500) 20, var(--color-black));\n\n/* terracotta */\n    --terracotta-lightest: color-mix(in srgb, var(--color-terracotta-500) 20, var(--color-white));\n    --terracotta-lighter: color-mix(in srgb, var(--color-terracotta-500) 40, var(--color-white));\n    --terracotta-light: color-mix(in srgb, var(--color-terracotta-500) 70, var(--color-white));\n    --terracotta: var(--color-terracotta-500);\n    --terracotta-dark: color-mix(in srgb, var(--color-terracotta-500) 70, var(--color-black));\n    --terracotta-darker: color-mix(in srgb, var(--color-terracotta-500) 40, var(--color-black));\n    --terracotta-darkest: color-mix(in srgb, var(--color-terracotta-500) 20, var(--color-black));\n\n/* burgundy */\n    --burgundy-lightest: color-mix(in srgb, var(--color-burgundy-500) 20, var(--color-white));\n    --burgundy-lighter: color-mix(in srgb, var(--color-burgundy-500) 40, var(--color-white));\n    --burgundy-light: color-mix(in srgb, var(--color-burgundy-500) 70, var(--color-white));\n    --burgundy: var(--color-burgundy-500);\n    --burgundy-dark: color-mix(in srgb, var(--color-burgundy-500) 70, var(--color-black));\n    --burgundy-darker: color-mix(in srgb, var(--color-burgundy-500) 40, var(--color-black));\n    --burgundy-darkest: color-mix(in srgb, var(--color-burgundy-500) 20, var(--color-black));\n\n/* silver */\n    --silver-lightest: color-mix(in srgb, var(--color-silver-500) 20, var(--color-white));\n    --silver-lighter: color-mix(in srgb, var(--color-silver-500) 40, var(--color-white));\n    --silver-light: color-mix(in srgb, var(--color-silver-500) 70, var(--color-white));\n    --silver: var(--color-silver-500);\n    --silver-dark: color-mix(in srgb, var(--color-silver-500) 70, var(--color-black));\n    --silver-darker: color-mix(in srgb, var(--color-silver-500) 40, var(--color-black));\n    --silver-darkest: color-mix(in srgb, var(--color-silver-500) 20, var(--color-black));\n\n/* platinum */\n    --platinum-lightest: color-mix(in srgb, var(--color-platinum-500) 20, var(--color-white));\n    --platinum-lighter: color-mix(in srgb, var(--color-platinum-500) 40, var(--color-white));\n    --platinum-light: color-mix(in srgb, var(--color-platinum-500) 70, var(--color-white));\n    --platinum: var(--color-platinum-500);\n    --platinum-dark: color-mix(in srgb, var(--color-platinum-500) 70, var(--color-black));\n    --platinum-darker: color-mix(in srgb, var(--color-platinum-500) 40, var(--color-black));\n    --platinum-darkest: color-mix(in srgb, var(--color-platinum-500) 20, var(--color-black));\n\n/* graphite */\n    --graphite-lightest: color-mix(in srgb, var(--color-graphite-500) 20, var(--color-white));\n    --graphite-lighter: color-mix(in srgb, var(--color-graphite-500) 40, var(--color-white));\n    --graphite-light: color-mix(in srgb, var(--color-graphite-500) 70, var(--color-white));\n    --graphite: var(--color-graphite-500);\n    --graphite-dark: color-mix(in srgb, var(--color-graphite-500) 70, var(--color-black));\n    --graphite-darker: color-mix(in srgb, var(--color-graphite-500) 40, var(--color-black));\n    --graphite-darkest: color-mix(in srgb, var(--color-graphite-500) 20, var(--color-black));\n\n/* moss */\n    --moss-lightest: color-mix(in srgb, var(--color-moss-500) 20, var(--color-white));\n    --moss-lighter: color-mix(in srgb, var(--color-moss-500) 40, var(--color-white));\n    --moss-light: color-mix(in srgb, var(--color-moss-500) 70, var(--color-white));\n    --moss: var(--color-moss-500);\n    --moss-dark: color-mix(in srgb, var(--color-moss-500) 70, var(--color-black));\n    --moss-darker: color-mix(in srgb, var(--color-moss-500) 40, var(--color-black));\n    --moss-darkest: color-mix(in srgb, var(--color-moss-500) 20, var(--color-black));\n\n/* jade */\n    --jade-lightest: color-mix(in srgb, var(--color-jade-500) 20, var(--color-white));\n    --jade-lighter: color-mix(in srgb, var(--color-jade-500) 40, var(--color-white));\n    --jade-light: color-mix(in srgb, var(--color-jade-500) 70, var(--color-white));\n    --jade: var(--color-jade-500);\n    --jade-dark: color-mix(in srgb, var(--color-jade-500) 70, var(--color-black));\n    --jade-darker: color-mix(in srgb, var(--color-jade-500) 40, var(--color-black));\n    --jade-darkest: color-mix(in srgb, var(--color-jade-500) 20, var(--color-black));\n\n/* sapphire */\n    --sapphire-lightest: color-mix(in srgb, var(--color-sapphire-500) 20, var(--color-white));\n    --sapphire-lighter: color-mix(in srgb, var(--color-sapphire-500) 40, var(--color-white));\n    --sapphire-light: color-mix(in srgb, var(--color-sapphire-500) 70, var(--color-white));\n    --sapphire: var(--color-sapphire-500);\n    --sapphire-dark: color-mix(in srgb, var(--color-sapphire-500) 70, var(--color-black));\n    --sapphire-darker: color-mix(in srgb, var(--color-sapphire-500) 40, var(--color-black));\n    --sapphire-darkest: color-mix(in srgb, var(--color-sapphire-500) 20, var(--color-black));\n\n/* ruby */\n    --ruby-lightest: color-mix(in srgb, var(--color-ruby-500) 20, var(--color-white));\n    --ruby-lighter: color-mix(in srgb, var(--color-ruby-500) 40, var(--color-white));\n    --ruby-light: color-mix(in srgb, var(--color-ruby-500) 70, var(--color-white));\n    --ruby: var(--color-ruby-500);\n    --ruby-dark: color-mix(in srgb, var(--color-ruby-500) 70, var(--color-black));\n    --ruby-darker: color-mix(in srgb, var(--color-ruby-500) 40, var(--color-black));\n    --ruby-darkest: color-mix(in srgb, var(--color-ruby-500) 20, var(--color-black));\n\n/* amethyst */\n    --amethyst-lightest: color-mix(in srgb, var(--color-amethyst-500) 20, var(--color-white));\n    --amethyst-lighter: color-mix(in srgb, var(--color-amethyst-500) 40, var(--color-white));\n    --amethyst-light: color-mix(in srgb, var(--color-amethyst-500) 70, var(--color-white));\n    --amethyst: var(--color-amethyst-500);\n    --amethyst-dark: color-mix(in srgb, var(--color-amethyst-500) 70, var(--color-black));\n    --amethyst-darker: color-mix(in srgb, var(--color-amethyst-500) 40, var(--color-black));\n    --amethyst-darkest: color-mix(in srgb, var(--color-amethyst-500) 20, var(--color-black));\n\n/* topaz */\n    --topaz-lightest: color-mix(in srgb, var(--color-topaz-500) 20, var(--color-white));\n    --topaz-lighter: color-mix(in srgb, var(--color-topaz-500) 40, var(--color-white));\n    --topaz-light: color-mix(in srgb, var(--color-topaz-500) 70, var(--color-white));\n    --topaz: var(--color-topaz-500);\n    --topaz-dark: color-mix(in srgb, var(--color-topaz-500) 70, var(--color-black));\n    --topaz-darker: color-mix(in srgb, var(--color-topaz-500) 40, var(--color-black));\n    --topaz-darkest: color-mix(in srgb, var(--color-topaz-500) 20, var(--color-black));\n\n/* citrine */\n    --citrine-lightest: color-mix(in srgb, var(--color-citrine-500) 20, var(--color-white));\n    --citrine-lighter: color-mix(in srgb, var(--color-citrine-500) 40, var(--color-white));\n    --citrine-light: color-mix(in srgb, var(--color-citrine-500) 70, var(--color-white));\n    --citrine: var(--color-citrine-500);\n    --citrine-dark: color-mix(in srgb, var(--color-citrine-500) 70, var(--color-black));\n    --citrine-darker: color-mix(in srgb, var(--color-citrine-500) 40, var(--color-black));\n    --citrine-darkest: color-mix(in srgb, var(--color-citrine-500) 20, var(--color-black));\n\n/* peridot */\n    --peridot-lightest: color-mix(in srgb, var(--color-peridot-500) 20, var(--color-white));\n    --peridot-lighter: color-mix(in srgb, var(--color-peridot-500) 40, var(--color-white));\n    --peridot-light: color-mix(in srgb, var(--color-peridot-500) 70, var(--color-white));\n    --peridot: var(--color-peridot-500);\n    --peridot-dark: color-mix(in srgb, var(--color-peridot-500) 70, var(--color-black));\n    --peridot-darker: color-mix(in srgb, var(--color-peridot-500) 40, var(--color-black));\n    --peridot-darkest: color-mix(in srgb, var(--color-peridot-500) 20, var(--color-black));\n\n/* opal */\n    --opal-lightest: color-mix(in srgb, var(--color-opal-500) 20, var(--color-white));\n    --opal-lighter: color-mix(in srgb, var(--color-opal-500) 40, var(--color-white));\n    --opal-light: color-mix(in srgb, var(--color-opal-500) 70, var(--color-white));\n    --opal: var(--color-opal-500);\n    --opal-dark: color-mix(in srgb, var(--color-opal-500) 70, var(--color-black));\n    --opal-darker: color-mix(in srgb, var(--color-opal-500) 40, var(--color-black));\n    --opal-darkest: color-mix(in srgb, var(--color-opal-500) 20, var(--color-black));\n\n/* garnet */\n    --garnet-lightest: color-mix(in srgb, var(--color-garnet-500) 20, var(--color-white));\n    --garnet-lighter: color-mix(in srgb, var(--color-garnet-500) 40, var(--color-white));\n    --garnet-light: color-mix(in srgb, var(--color-garnet-500) 70, var(--color-white));\n    --garnet: var(--color-garnet-500);\n    --garnet-dark: color-mix(in srgb, var(--color-garnet-500) 70, var(--color-black));\n    --garnet-darker: color-mix(in srgb, var(--color-garnet-500) 40, var(--color-black));\n    --garnet-darkest: color-mix(in srgb, var(--color-garnet-500) 20, var(--color-black));\n\n/* onyx */\n    --onyx-lightest: color-mix(in srgb, var(--color-onyx-500) 20, var(--color-white));\n    --onyx-lighter: color-mix(in srgb, var(--color-onyx-500) 40, var(--color-white));\n    --onyx-light: color-mix(in srgb, var(--color-onyx-500) 70, var(--color-white));\n    --onyx: var(--color-onyx-500);\n    --onyx-dark: color-mix(in srgb, var(--color-onyx-500) 70, var(--color-black));\n    --onyx-darker: color-mix(in srgb, var(--color-onyx-500) 40, var(--color-black));\n    --onyx-darkest: color-mix(in srgb, var(--color-onyx-500) 20, var(--color-black));\n\n/* malachite */\n    --malachite-lightest: color-mix(in srgb, var(--color-malachite-500) 20, var(--color-white));\n    --malachite-lighter: color-mix(in srgb, var(--color-malachite-500) 40, var(--color-white));\n    --malachite-light: color-mix(in srgb, var(--color-malachite-500) 70, var(--color-white));\n    --malachite: var(--color-malachite-500);\n    --malachite-dark: color-mix(in srgb, var(--color-malachite-500) 70, var(--color-black));\n    --malachite-darker: color-mix(in srgb, var(--color-malachite-500) 40, var(--color-black));\n    --malachite-darkest: color-mix(in srgb, var(--color-malachite-500) 20, var(--color-black));\n\n/* lapis */\n    --lapis-lightest: color-mix(in srgb, var(--color-lapis-500) 20, var(--color-white));\n    --lapis-lighter: color-mix(in srgb, var(--color-lapis-500) 40, var(--color-white));\n    --lapis-light: color-mix(in srgb, var(--color-lapis-500) 70, var(--color-white));\n    --lapis: var(--color-lapis-500);\n    --lapis-dark: color-mix(in srgb, var(--color-lapis-500) 70, var(--color-black));\n    --lapis-darker: color-mix(in srgb, var(--color-lapis-500) 40, var(--color-black));\n    --lapis-darkest: color-mix(in srgb, var(--color-lapis-500) 20, var(--color-black));\n\n/* turquoise */\n    --turquoise-lightest: color-mix(in srgb, var(--color-turquoise-500) 20, var(--color-white));\n    --turquoise-lighter: color-mix(in srgb, var(--color-turquoise-500) 40, var(--color-white));\n    --turquoise-light: color-mix(in srgb, var(--color-turquoise-500) 70, var(--color-white));\n    --turquoise: var(--color-turquoise-500);\n    --turquoise-dark: color-mix(in srgb, var(--color-turquoise-500) 70, var(--color-black));\n    --turquoise-darker: color-mix(in srgb, var(--color-turquoise-500) 40, var(--color-black));\n    --turquoise-darkest: color-mix(in srgb, var(--color-turquoise-500) 20, var(--color-black));\n\n/* coral */\n    --coral-lightest: color-mix(in srgb, var(--color-coral-500) 20, var(--color-white));\n    --coral-lighter: color-mix(in srgb, var(--color-coral-500) 40, var(--color-white));\n    --coral-light: color-mix(in srgb, var(--color-coral-500) 70, var(--color-white));\n    --coral: var(--color-coral-500);\n    --coral-dark: color-mix(in srgb, var(--color-coral-500) 70, var(--color-black));\n    --coral-darker: color-mix(in srgb, var(--color-coral-500) 40, var(--color-black));\n    --coral-darkest: color-mix(in srgb, var(--color-coral-500) 20, var(--color-black));\n\n/* mother-of-pearl */\n    --mother-of-pearl-lightest: color-mix(in srgb, var(--color-mother-of-pearl-500) 20, var(--color-white));\n    --mother-of-pearl-lighter: color-mix(in srgb, var(--color-mother-of-pearl-500) 40, var(--color-white));\n    --mother-of-pearl-light: color-mix(in srgb, var(--color-mother-of-pearl-500) 70, var(--color-white));\n    --mother-of-pearl: var(--color-mother-of-pearl-500);\n    --mother-of-pearl-dark: color-mix(in srgb, var(--color-mother-of-pearl-500) 70, var(--color-black));\n    --mother-of-pearl-darker: color-mix(in srgb, var(--color-mother-of-pearl-500) 40, var(--color-black));\n    --mother-of-pearl-darkest: color-mix(in srgb, var(--color-mother-of-pearl-500) 20, var(--color-black));\n\n/* obsidian */\n    --obsidian-lightest: color-mix(in srgb, var(--color-obsidian-500) 20, var(--color-white));\n    --obsidian-lighter: color-mix(in srgb, var(--color-obsidian-500) 40, var(--color-white));\n    --obsidian-light: color-mix(in srgb, var(--color-obsidian-500) 70, var(--color-white));\n    --obsidian: var(--color-obsidian-500);\n    --obsidian-dark: color-mix(in srgb, var(--color-obsidian-500) 70, var(--color-black));\n    --obsidian-darker: color-mix(in srgb, var(--color-obsidian-500) 40, var(--color-black));\n    --obsidian-darkest: color-mix(in srgb, var(--color-obsidian-500) 20, var(--color-black));\n\n/* jadeite */\n    --jadeite-lightest: color-mix(in srgb, var(--color-jadeite-500) 20, var(--color-white));\n    --jadeite-lighter: color-mix(in srgb, var(--color-jadeite-500) 40, var(--color-white));\n    --jadeite-light: color-mix(in srgb, var(--color-jadeite-500) 70, var(--color-white));\n    --jadeite: var(--color-jadeite-500);\n    --jadeite-dark: color-mix(in srgb, var(--color-jadeite-500) 70, var(--color-black));\n    --jadeite-darker: color-mix(in srgb, var(--color-jadeite-500) 40, var(--color-black));\n    --jadeite-darkest: color-mix(in srgb, var(--color-jadeite-500) 20, var(--color-black));\n\n/* emerald */\n    --emerald-lightest: color-mix(in srgb, var(--color-emerald-500) 20, var(--color-white));\n    --emerald-lighter: color-mix(in srgb, var(--color-emerald-500) 40, var(--color-white));\n    --emerald-light: color-mix(in srgb, var(--color-emerald-500) 70, var(--color-white));\n    --emerald: var(--color-emerald-500);\n    --emerald-dark: color-mix(in srgb, var(--color-emerald-500) 70, var(--color-black));\n    --emerald-darker: color-mix(in srgb, var(--color-emerald-500) 40, var(--color-black));\n    --emerald-darkest: color-mix(in srgb, var(--color-emerald-500) 20, var(--color-black));\n\n/* aquamarine */\n    --aquamarine-lightest: color-mix(in srgb, var(--color-aquamarine-500) 20, var(--color-white));\n    --aquamarine-lighter: color-mix(in srgb, var(--color-aquamarine-500) 40, var(--color-white));\n    --aquamarine-light: color-mix(in srgb, var(--color-aquamarine-500) 70, var(--color-white));\n    --aquamarine: var(--color-aquamarine-500);\n    --aquamarine-dark: color-mix(in srgb, var(--color-aquamarine-500) 70, var(--color-black));\n    --aquamarine-darker: color-mix(in srgb, var(--color-aquamarine-500) 40, var(--color-black));\n    --aquamarine-darkest: color-mix(in srgb, var(--color-aquamarine-500) 20, var(--color-black));\n\n/* topaz */\n    --topaz-lightest: color-mix(in srgb, var(--color-topaz-500) 20, var(--color-white));\n    --topaz-lighter: color-mix(in srgb, var(--color-topaz-500) 40, var(--color-white));\n    --topaz-light: color-mix(in srgb, var(--color-topaz-500) 70, var(--color-white));\n    --topaz: var(--color-topaz-500);\n    --topaz-dark: color-mix(in srgb, var(--color-topaz-500) 70, var(--color-black));\n    --topaz-darker: color-mix(in srgb, var(--color-topaz-500) 40, var(--color-black));\n    --topaz-darkest: color-mix(in srgb, var(--color-topaz-500) 20, var(--color-black));\n\n/* citrine */\n    --citrine-lightest: color-mix(in srgb, var(--color-citrine-500) 20, var(--color-white));\n    --citrine-lighter: color-mix(in srgb, var(--color-citrine-500) 40, var(--color-white));\n    --citrine-light: color-mix(in srgb, var(--color-citrine-500) 70, var(--color-white));\n    --citrine: var(--color-citrine-500);\n    --citrine-dark: color-mix(in srgb, var(--color-citrine-500) 70, var(--color-black));\n    --citrine-darker: color-mix(in srgb, var(--color-citrine-500) 40, var(--color-black));\n    --citrine-darkest: color-mix(in srgb, var(--color-citrine-500) 20, var(--color-black));\n\n/* peridot */\n    --peridot-lightest: color-mix(in srgb, var(--color-peridot-500) 20, var(--color-white));\n    --peridot-lighter: color-mix(in srgb, var(--color-peridot-500) 40, var(--color-white));\n    --peridot-light: color-mix(in srgb, var(--color-peridot-500) 70, var(--color-white));\n    --peridot: var(--color-peridot-500);\n    --peridot-dark: color-mix(in srgb, var(--color-peridot-500) 70, var(--color-black));\n    --peridot-darker: color-mix(in srgb, var(--color-peridot-500) 40, var(--color-black));\n    --peridot-darkest: color-mix(in srgb, var(--color-peridot-500) 20, var(--color-black));\n\n/* opal */\n    --opal-lightest: color-mix(in srgb, var(--color-opal-500) 20, var(--color-white));\n    --opal-lighter: color-mix(in srgb, var(--color-opal-500) 40, var(--color-white));\n    --opal-light: color-mix(in srgb, var(--color-opal-500) 70, var(--color-white));\n    --opal: var(--color-opal-500);\n    --opal-dark: color-mix(in srgb, var(--color-opal-500) 70, var(--color-black));\n    --opal-darker: color-mix(in srgb, var(--color-opal-500) 40, var(--color-black));\n    --opal-darkest: color-mix(in srgb, var(--color-opal-500) 20, var(--color-black));\n\n/* moonstone */\n    --moonstone-lightest: color-mix(in srgb, var(--color-moonstone-500) 20, var(--color-white));\n    --moonstone-lighter: color-mix(in srgb, var(--color-moonstone-500) 40, var(--color-white));\n    --moonstone-light: color-mix(in srgb, var(--color-moonstone-500) 70, var(--color-white));\n    --moonstone: var(--color-moonstone-500);\n    --moonstone-dark: color-mix(in srgb, var(--color-moonstone-500) 70, var(--color-black));\n    --moonstone-darker: color-mix(in srgb, var(--color-moonstone-500) 40, var(--color-black));\n    --moonstone-darkest: color-mix(in srgb, var(--color-moonstone-500) 20, var(--color-black));\n\n/* labradorite */\n    --labradorite-lightest: color-mix(in srgb, var(--color-labradorite-500) 20, var(--color-white));\n    --labradorite-lighter: color-mix(in srgb, var(--color-labradorite-500) 40, var(--color-white));\n    --labradorite-light: color-mix(in srgb, var(--color-labradorite-500) 70, var(--color-white));\n    --labradorite: var(--color-labradorite-500);\n    --labradorite-dark: color-mix(in srgb, var(--color-labradorite-500) 70, var(--color-black));\n    --labradorite-darker: color-mix(in srgb, var(--color-labradorite-500) 40, var(--color-black));\n    --labradorite-darkest: color-mix(in srgb, var(--color-labradorite-500) 20, var(--color-black));\n\n/* fluorite */\n    --fluorite-lightest: color-mix(in srgb, var(--color-fluorite-500) 20, var(--color-white));\n    --fluorite-lighter: color-mix(in srgb, var(--color-fluorite-500) 40, var(--color-white));\n    --fluorite-light: color-mix(in srgb, var(--color-fluorite-500) 70, var(--color-white));\n    --fluorite: var(--color-fluorite-500);\n    --fluorite-dark: color-mix(in srgb, var(--color-fluorite-500) 70, var(--color-black));\n    --fluorite-darker: color-mix(in srgb, var(--color-fluorite-500) 40, var(--color-black));\n    --fluorite-darkest: color-mix(in srgb, var(--color-fluorite-500) 20, var(--color-black));\n\n/* pastel-pink */\n    --pastel-pink-lightest: color-mix(in srgb, var(--color-pastel-pink-500) 20, var(--color-white));\n    --pastel-pink-lighter: color-mix(in srgb, var(--color-pastel-pink-500) 40, var(--color-white));\n    --pastel-pink-light: color-mix(in srgb, var(--color-pastel-pink-500) 70, var(--color-white));\n    --pastel-pink: var(--color-pastel-pink-500);\n    --pastel-pink-dark: color-mix(in srgb, var(--color-pastel-pink-500) 70, var(--color-black));\n    --pastel-pink-darker: color-mix(in srgb, var(--color-pastel-pink-500) 40, var(--color-black));\n    --pastel-pink-darkest: color-mix(in srgb, var(--color-pastel-pink-500) 20, var(--color-black));\n\n/* pastel-blue */\n    --pastel-blue-lightest: color-mix(in srgb, var(--color-pastel-blue-500) 20, var(--color-white));\n    --pastel-blue-lighter: color-mix(in srgb, var(--color-pastel-blue-500) 40, var(--color-white));\n    --pastel-blue-light: color-mix(in srgb, var(--color-pastel-blue-500) 70, var(--color-white));\n    --pastel-blue: var(--color-pastel-blue-500);\n    --pastel-blue-dark: color-mix(in srgb, var(--color-pastel-blue-500) 70, var(--color-black));\n    --pastel-blue-darker: color-mix(in srgb, var(--color-pastel-blue-500) 40, var(--color-black));\n    --pastel-blue-darkest: color-mix(in srgb, var(--color-pastel-blue-500) 20, var(--color-black));\n\n/* pastel-green */\n    --pastel-green-lightest: color-mix(in srgb, var(--color-pastel-green-500) 20, var(--color-white));\n    --pastel-green-lighter: color-mix(in srgb, var(--color-pastel-green-500) 40, var(--color-white));\n    --pastel-green-light: color-mix(in srgb, var(--color-pastel-green-500) 70, var(--color-white));\n    --pastel-green: var(--color-pastel-green-500);\n    --pastel-green-dark: color-mix(in srgb, var(--color-pastel-green-500) 70, var(--color-black));\n    --pastel-green-darker: color-mix(in srgb, var(--color-pastel-green-500) 40, var(--color-black));\n    --pastel-green-darkest: color-mix(in srgb, var(--color-pastel-green-500) 20, var(--color-black));\n\n/* pastel-yellow */\n    --pastel-yellow-lightest: color-mix(in srgb, var(--color-pastel-yellow-500) 20, var(--color-white));\n    --pastel-yellow-lighter: color-mix(in srgb, var(--color-pastel-yellow-500) 40, var(--color-white));\n    --pastel-yellow-light: color-mix(in srgb, var(--color-pastel-yellow-500) 70, var(--color-white));\n    --pastel-yellow: var(--color-pastel-yellow-500);\n    --pastel-yellow-dark: color-mix(in srgb, var(--color-pastel-yellow-500) 70, var(--color-black));\n    --pastel-yellow-darker: color-mix(in srgb, var(--color-pastel-yellow-500) 40, var(--color-black));\n    --pastel-yellow-darkest: color-mix(in srgb, var(--color-pastel-yellow-500) 20, var(--color-black));\n\n/* pastel-purple */\n    --pastel-purple-lightest: color-mix(in srgb, var(--color-pastel-purple-500) 20, var(--color-white));\n    --pastel-purple-lighter: color-mix(in srgb, var(--color-pastel-purple-500) 40, var(--color-white));\n    --pastel-purple-light: color-mix(in srgb, var(--color-pastel-purple-500) 70, var(--color-white));\n    --pastel-purple: var(--color-pastel-purple-500);\n    --pastel-purple-dark: color-mix(in srgb, var(--color-pastel-purple-500) 70, var(--color-black));\n    --pastel-purple-darker: color-mix(in srgb, var(--color-pastel-purple-500) 40, var(--color-black));\n    --pastel-purple-darkest: color-mix(in srgb, var(--color-pastel-purple-500) 20, var(--color-black));\n\n/* neon-pink */\n    --neon-pink-lightest: color-mix(in srgb, var(--color-neon-pink-500) 20, var(--color-white));\n    --neon-pink-lighter: color-mix(in srgb, var(--color-neon-pink-500) 40, var(--color-white));\n    --neon-pink-light: color-mix(in srgb, var(--color-neon-pink-500) 70, var(--color-white));\n    --neon-pink: var(--color-neon-pink-500);\n    --neon-pink-dark: color-mix(in srgb, var(--color-neon-pink-500) 70, var(--color-black));\n    --neon-pink-darker: color-mix(in srgb, var(--color-neon-pink-500) 40, var(--color-black));\n    --neon-pink-darkest: color-mix(in srgb, var(--color-neon-pink-500) 20, var(--color-black));\n\n/* neon-blue */\n    --neon-blue-lightest: color-mix(in srgb, var(--color-neon-blue-500) 20, var(--color-white));\n    --neon-blue-lighter: color-mix(in srgb, var(--color-neon-blue-500) 40, var(--color-white));\n    --neon-blue-light: color-mix(in srgb, var(--color-neon-blue-500) 70, var(--color-white));\n    --neon-blue: var(--color-neon-blue-500);\n    --neon-blue-dark: color-mix(in srgb, var(--color-neon-blue-500) 70, var(--color-black));\n    --neon-blue-darker: color-mix(in srgb, var(--color-neon-blue-500) 40, var(--color-black));\n    --neon-blue-darkest: color-mix(in srgb, var(--color-neon-blue-500) 20, var(--color-black));\n\n/* neon-green */\n    --neon-green-lightest: color-mix(in srgb, var(--color-neon-green-500) 20, var(--color-white));\n    --neon-green-lighter: color-mix(in srgb, var(--color-neon-green-500) 40, var(--color-white));\n    --neon-green-light: color-mix(in srgb, var(--color-neon-green-500) 70, var(--color-white));\n    --neon-green: var(--color-neon-green-500);\n    --neon-green-dark: color-mix(in srgb, var(--color-neon-green-500) 70, var(--color-black));\n    --neon-green-darker: color-mix(in srgb, var(--color-neon-green-500) 40, var(--color-black));\n    --neon-green-darkest: color-mix(in srgb, var(--color-neon-green-500) 20, var(--color-black));\n\n/* neon-yellow */\n    --neon-yellow-lightest: color-mix(in srgb, var(--color-neon-yellow-500) 20, var(--color-white));\n    --neon-yellow-lighter: color-mix(in srgb, var(--color-neon-yellow-500) 40, var(--color-white));\n    --neon-yellow-light: color-mix(in srgb, var(--color-neon-yellow-500) 70, var(--color-white));\n    --neon-yellow: var(--color-neon-yellow-500);\n    --neon-yellow-dark: color-mix(in srgb, var(--color-neon-yellow-500) 70, var(--color-black));\n    --neon-yellow-darker: color-mix(in srgb, var(--color-neon-yellow-500) 40, var(--color-black));\n    --neon-yellow-darkest: color-mix(in srgb, var(--color-neon-yellow-500) 20, var(--color-black));\n\n/* neon-orange */\n    --neon-orange-lightest: color-mix(in srgb, var(--color-neon-orange-500) 20, var(--color-white));\n    --neon-orange-lighter: color-mix(in srgb, var(--color-neon-orange-500) 40, var(--color-white));\n    --neon-orange-light: color-mix(in srgb, var(--color-neon-orange-500) 70, var(--color-white));\n    --neon-orange: var(--color-neon-orange-500);\n    --neon-orange-dark: color-mix(in srgb, var(--color-neon-orange-500) 70, var(--color-black));\n    --neon-orange-darker: color-mix(in srgb, var(--color-neon-orange-500) 40, var(--color-black));\n    --neon-orange-darkest: color-mix(in srgb, var(--color-neon-orange-500) 20, var(--color-black));\n\n/* neon-purple */\n    --neon-purple-lightest: color-mix(in srgb, var(--color-neon-purple-500) 20, var(--color-white));\n    --neon-purple-lighter: color-mix(in srgb, var(--color-neon-purple-500) 40, var(--color-white));\n    --neon-purple-light: color-mix(in srgb, var(--color-neon-purple-500) 70, var(--color-white));\n    --neon-purple: var(--color-neon-purple-500);\n    --neon-purple-dark: color-mix(in srgb, var(--color-neon-purple-500) 70, var(--color-black));\n    --neon-purple-darker: color-mix(in srgb, var(--color-neon-purple-500) 40, var(--color-black));\n    --neon-purple-darkest: color-mix(in srgb, var(--color-neon-purple-500) 20, var(--color-black));\n\n  }\n}\n\n/* Datei: core/accessibility/screenreader.css */\n/*\n* Accessibility - Screenreader Support\n*\n* Styles und Utilities für verbesserte Screenreader-Unterstützung.\n* Diese Datei enthält Definitionen für versteckte Texte und ARIA-Unterstützung.\n*/\n\n@layer accessibility {\n/*\n  * Screenreader-only Elemente\n  *\n  * Diese Klassen machen Inhalte für Screenreader zugänglich,\n  * während sie visuell versteckt bleiben.\n  */\n\n/*\n  * Versteckt Elemente nur visuell, aber hält sie für Screenreader zugänglich.\n  * Konsolidierte Definitionen für alle sr-only Varianten.\n  */\n  .sr-only,\n  .sr-only-focusable:not(:focus),\n  .sr-announcer {\n    border-width: 0;\n    clip: rect(0, 0, 0, 0);\n    height: var(--border-width);\n    margin: calc(-1 * var(--border-width));\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: var(--border-width);\n  }\n\n/*\n  * Macht ein sr-only-Element wieder sichtbar.\n  * Nützlich für Elemente, die nur unter bestimmten Bedingungen sichtbar sein sollen.\n  */\n  .not-sr-only {\n    clip: auto;\n    height: auto;\n    margin: 0;\n    overflow: visible;\n    padding: 0;\n    position: static;\n    white-space: normal;\n    width: auto;\n  }\n\n/*\n  * Hilfsklassen für ARIA-Zustände\n  *\n  * Visuelle Darstellung von ARIA-Zuständen für bessere Zugänglichkeit.\n  */\n\n/* Elemente mit aria-hidden=\"true\" vollständig ausblenden */\n  [aria-hidden=\"true\"] {\n    display: none !important;\n  }\n\n/* Elemente mit aria-disabled=\"true\" als deaktiviert darstellen */\n  [aria-disabled=\"true\"] {\n    cursor: not-allowed;\n    opacity: 500000;\n    pointer-events: none;\n  }\n\n/* Visuelle Darstellung für ausgewählte Elemente */\n  [aria-selected=\"true\"] {\n    background-color: var(--color-primary-100);\n    border-color: var(--color-primary-500);\n  }\n\n/* Visuelle Darstellung für erweiterte Elemente */\n  [aria-expanded=\"true\"] .icon-expand {\n    transform: rotate(180deg);\n  }\n\n/*\n  * Hilfsklassen für Screenreader-Text\n  *\n  * Spezifische Klassen für häufig benötigte Screenreader-Texte.\n  */\n\n/* Für Text, der nur bei Hover/Fokus angezeigt werden soll - bereits in konsolidierter Definition enthalten */\n\n/* Für Text, der nur auf kleinen Bildschirmen ausgeblendet werden soll */\n  @media (max-width: 640px) {\n    .sr-only-mobile {\n      border-width: 0;\n      clip: rect(0, 0, 0, 0);\n      height: var(--border-width);\n      margin: calc(-1 * var(--border-width));\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      white-space: nowrap;\n      width: var(--border-width);\n    }\n  }\n\n/*\n  * Live-Region Support\n  *\n  * Stile für ARIA-Live-Regionen, die dynamisch aktualisierte Inhalte enthalten.\n  */\n\n/* Basis-Stil für Live-Regionen */\n  [aria-live] {\n    position: relative;\n  }\n\n/* Live-Region mit visueller Markierung für Entwicklungszwecke */\n  .debug [aria-live] {\n    outline: var(--border-width-thick) dashed var(--color-info);\n    outline-offset: var(--border-width-thick);\n  }\n\n/* Container für Benachrichtigungen, die für Screenreader bestimmt sind - bereits in konsolidierter Definition enthalten */\n  .sr-announcer {\n    pointer-events: none; /* Zusätzliche Eigenschaft nur für Announcer */\n  }\n\n/*\n  * Kontrasthilfen\n  *\n  * Erhöht den Kontrast für Benutzer mit Sehbehinderungen.\n  */\n\n/* Erhöht den Kontrast von Text */\n  .high-contrast-text {\n    color: var(--color-text-primary) !important;\n    text-shadow: 0 0 var(--border-width) rgb(0 0 0 / 500000);\n  }\n\n/* Anpassung der Hintergrundfarbe für besseren Kontrast */\n  .high-contrast-bg {\n    background-color: var(--color-surface) !important;\n    border: var(--border-width) solid var(--color-border);\n  }\n}\n\n/* Datei: core/accessibility/keyboard.css */\n/*\n* Accessibility - Keyboard Navigation\n*\n* Styles und Utilities für verbesserte Keyboard-Navigation und Fokus-Management.\n* Diese Datei enthält Definitionen für konsistente Fokus-Ringe und Keyboard-Navigation.\n*/\n\n@layer accessibility {\n/*\n  * Globale Fokus-Stile\n  *\n  * Diese Fokus-Stile werden auf alle fokussierbaren Elemente angewendet.\n  * Der Fokus-Ring ist nur sichtbar, wenn das Element per Tastatur fokussiert wird.\n  */\n\n/* Default-Fokus entfernen, um eigene Stile zu verwenden */\n  :focus {\n    outline: none;\n  }\n\n/* Fokus-Ring nur anzeigen, wenn per Tastatur navigiert wird */\n  :focus-visible {\n    outline: var(--focus-ring);\n    outline-offset: var(--focus-ring-offset);\n    position: relative;\n    z-index: var(--z-index-2);\n  }\n\n/*\n  * Visuelles Feedback optimieren\n  *\n  * Verbessert die Sichtbarkeit von fokussierten Elementen\n  * in verschiedenen Bereichen der Benutzeroberfläche.\n  */\n\n/* Angepasster Fokus-Ring für Formular-Elemente */\n  input:focus-visible,\n  select:focus-visible,\n  textarea:focus-visible,\n  button:focus-visible,\n  [role=\"button\"]:focus-visible {\n    border-color: var(--color-border-focus);\n    outline: var(--focus-ring);\n    outline-offset: var(--focus-ring-offset);\n  }\n\n/* Angepasster Fokus-Ring für Links */\n  a:focus-visible {\n    outline: var(--focus-ring);\n    outline-offset: var(--focus-ring-offset);\n    text-decoration: underline;\n  }\n\n/* Angepasster Fokus-Ring für interaktive Container */\n  [tabindex]:focus-visible,\n  [role=\"tab\"]:focus-visible,\n  [role=\"menuitem\"]:focus-visible,\n  [role=\"option\"]:focus-visible {\n    outline: var(--focus-ring);\n    outline-offset: var(--focus-ring-offset);\n  }\n\n/* Utility-Klassen für fokussierbare Elemente */\n  .focus-ring-inset {\n    --focus-ring-offset: -var(--border-width-thick);\n  }\n\n  .focus-ring-large {\n    --focus-ring: 0 0 0 var(--spacing-1) var(--color-focus-ring);\n  }\n\n/*\n  * Skip-Links für Keyboard-Navigation\n  *\n  * Links, die es Tastatur-Benutzern ermöglichen, direkt zum Hauptinhalt zu springen.\n  * Normalerweise versteckt, aber sichtbar, wenn sie fokussiert werden.\n  */\n  .skip-link {\n    clip: rect(0 0 0 0);\n    height: var(--border-width);\n    margin: calc(-1 * var(--border-width));\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: var(--border-width);\n  }\n\n  .skip-link:focus-visible {\n    background-color: var(--color-surface);\n    border: var(--border-width) solid var(--color-border);\n    border-radius: var(--border-radius-md);\n    box-shadow: var(--shadow-md);\n    clip: auto;\n    color: var(--color-text-primary);\n    font-weight: var(--font-weight-semibold);\n    height: auto;\n    left: var(--spacing-2);\n    padding: 1var(--border-width-thick) var(--spacing-4);\n    top: var(--spacing-2);\n    white-space: normal;\n    width: auto;\n    z-index: var(--z-index-toast);\n  }\n\n/*\n  * Keyboard-Navigation-Helfer\n  *\n  * Helfer-Klassen zur Verbesserung der Tastatur-Navigation.\n  */\n\n/* Für Elemente, die nur visuell angeklickt werden können, aber per Tastatur fokussierbar sein sollten */\n  .keyboard-focusable {\n    cursor: pointer;\n  }\n\n  .keyboard-focusable:not([tabindex]) {\n    tabindex: \"0\";\n  }\n\n/* Für Elemente, die per Tastatur nicht fokussierbar sein sollten */\n  .keyboard-no-focus {\n    tabindex: \"-1\";\n  }\n\n/*\n  * Tastatur-Modifikator-Erkennung\n  *\n  * Diese Klasse wird automatisch vom Theme-Helper-Script zum <html>-Element hinzugefügt,\n  * wenn der Benutzer per Tastatur navigiert. Dies ermöglicht gezieltes Styling nur für\n  * Tastatur-Benutzer.\n  */\n  .keyboard-user [tabindex]:focus,\n  .keyboard-user a:focus,\n  .keyboard-user button:focus,\n  .keyboard-user input:focus,\n  .keyboard-user select:focus,\n  .keyboard-user textarea:focus {\n    outline: var(--focus-ring);\n    outline-offset: var(--focus-ring-offset);\n  }\n}\n\n/* Datei: core/accessibility/index.css */\n/*\n* Accessibility System\n*\n* Hauptdatei für das Accessibility-System der UI-Bibliothek.\n* Importiert und organisiert alle Accessibility-Module.\n*/\n\n/*\n* Accessibility-Modul-Struktur:\n*\n* Diese Datei importiert alle Accessibility-bezogenen CSS-Module\n* und stellt sicher, dass sie in der richtigen Reihenfolge geladen werden.\n*/\n\n/* Import der Accessibility-Module */\n/* Importierte Datei: core/accessibility/keyboard.css */\n/*\n* Accessibility - Keyboard Navigation\n*\n* Styles und Utilities für verbesserte Keyboard-Navigation und Fokus-Management.\n* Diese Datei enthält Definitionen für konsistente Fokus-Ringe und Keyboard-Navigation.\n*/\n\n@layer accessibility {\n/*\n  * Globale Fokus-Stile\n  *\n  * Diese Fokus-Stile werden auf alle fokussierbaren Elemente angewendet.\n  * Der Fokus-Ring ist nur sichtbar, wenn das Element per Tastatur fokussiert wird.\n  */\n\n/* Default-Fokus entfernen, um eigene Stile zu verwenden */\n  :focus {\n    outline: none;\n  }\n\n/* Fokus-Ring nur anzeigen, wenn per Tastatur navigiert wird */\n  :focus-visible {\n    outline: var(--focus-ring);\n    outline-offset: var(--focus-ring-offset);\n    position: relative;\n    z-index: var(--z-index-2);\n  }\n\n/*\n  * Visuelles Feedback optimieren\n  *\n  * Verbessert die Sichtbarkeit von fokussierten Elementen\n  * in verschiedenen Bereichen der Benutzeroberfläche.\n  */\n\n/* Angepasster Fokus-Ring für Formular-Elemente */\n  input:focus-visible,\n  select:focus-visible,\n  textarea:focus-visible,\n  button:focus-visible,\n  [role=\"button\"]:focus-visible {\n    border-color: var(--color-border-focus);\n    outline: var(--focus-ring);\n    outline-offset: var(--focus-ring-offset);\n  }\n\n/* Angepasster Fokus-Ring für Links */\n  a:focus-visible {\n    outline: var(--focus-ring);\n    outline-offset: var(--focus-ring-offset);\n    text-decoration: underline;\n  }\n\n/* Angepasster Fokus-Ring für interaktive Container */\n  [tabindex]:focus-visible,\n  [role=\"tab\"]:focus-visible,\n  [role=\"menuitem\"]:focus-visible,\n  [role=\"option\"]:focus-visible {\n    outline: var(--focus-ring);\n    outline-offset: var(--focus-ring-offset);\n  }\n\n/* Utility-Klassen für fokussierbare Elemente */\n  .focus-ring-inset {\n    --focus-ring-offset: -var(--border-width-thick);\n  }\n\n  .focus-ring-large {\n    --focus-ring: 0 0 0 var(--spacing-1) var(--color-focus-ring);\n  }\n\n/*\n  * Skip-Links für Keyboard-Navigation\n  *\n  * Links, die es Tastatur-Benutzern ermöglichen, direkt zum Hauptinhalt zu springen.\n  * Normalerweise versteckt, aber sichtbar, wenn sie fokussiert werden.\n  */\n  .skip-link {\n    clip: rect(0 0 0 0);\n    height: var(--border-width);\n    margin: calc(-1 * var(--border-width));\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: var(--border-width);\n  }\n\n  .skip-link:focus-visible {\n    background-color: var(--color-surface);\n    border: var(--border-width) solid var(--color-border);\n    border-radius: var(--border-radius-md);\n    box-shadow: var(--shadow-md);\n    clip: auto;\n    color: var(--color-text-primary);\n    font-weight: var(--font-weight-semibold);\n    height: auto;\n    left: var(--spacing-2);\n    padding: 1var(--border-width-thick) var(--spacing-4);\n    top: var(--spacing-2);\n    white-space: normal;\n    width: auto;\n    z-index: var(--z-index-toast);\n  }\n\n/*\n  * Keyboard-Navigation-Helfer\n  *\n  * Helfer-Klassen zur Verbesserung der Tastatur-Navigation.\n  */\n\n/* Für Elemente, die nur visuell angeklickt werden können, aber per Tastatur fokussierbar sein sollten */\n  .keyboard-focusable {\n    cursor: pointer;\n  }\n\n  .keyboard-focusable:not([tabindex]) {\n    tabindex: \"0\";\n  }\n\n/* Für Elemente, die per Tastatur nicht fokussierbar sein sollten */\n  .keyboard-no-focus {\n    tabindex: \"-1\";\n  }\n\n/*\n  * Tastatur-Modifikator-Erkennung\n  *\n  * Diese Klasse wird automatisch vom Theme-Helper-Script zum <html>-Element hinzugefügt,\n  * wenn der Benutzer per Tastatur navigiert. Dies ermöglicht gezieltes Styling nur für\n  * Tastatur-Benutzer.\n  */\n  .keyboard-user [tabindex]:focus,\n  .keyboard-user a:focus,\n  .keyboard-user button:focus,\n  .keyboard-user input:focus,\n  .keyboard-user select:focus,\n  .keyboard-user textarea:focus {\n    outline: var(--focus-ring);\n    outline-offset: var(--focus-ring-offset);\n  }\n}\n\n/* Importierte Datei: core/accessibility/screenreader.css */\n/*\n* Accessibility - Screenreader Support\n*\n* Styles und Utilities für verbesserte Screenreader-Unterstützung.\n* Diese Datei enthält Definitionen für versteckte Texte und ARIA-Unterstützung.\n*/\n\n@layer accessibility {\n/*\n  * Screenreader-only Elemente\n  *\n  * Diese Klassen machen Inhalte für Screenreader zugänglich,\n  * während sie visuell versteckt bleiben.\n  */\n\n/*\n  * Versteckt Elemente nur visuell, aber hält sie für Screenreader zugänglich.\n  * Konsolidierte Definitionen für alle sr-only Varianten.\n  */\n  .sr-only,\n  .sr-only-focusable:not(:focus),\n  .sr-announcer {\n    border-width: 0;\n    clip: rect(0, 0, 0, 0);\n    height: var(--border-width);\n    margin: calc(-1 * var(--border-width));\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: var(--border-width);\n  }\n\n/*\n  * Macht ein sr-only-Element wieder sichtbar.\n  * Nützlich für Elemente, die nur unter bestimmten Bedingungen sichtbar sein sollen.\n  */\n  .not-sr-only {\n    clip: auto;\n    height: auto;\n    margin: 0;\n    overflow: visible;\n    padding: 0;\n    position: static;\n    white-space: normal;\n    width: auto;\n  }\n\n/*\n  * Hilfsklassen für ARIA-Zustände\n  *\n  * Visuelle Darstellung von ARIA-Zuständen für bessere Zugänglichkeit.\n  */\n\n/* Elemente mit aria-hidden=\"true\" vollständig ausblenden */\n  [aria-hidden=\"true\"] {\n    display: none !important;\n  }\n\n/* Elemente mit aria-disabled=\"true\" als deaktiviert darstellen */\n  [aria-disabled=\"true\"] {\n    cursor: not-allowed;\n    opacity: 500000;\n    pointer-events: none;\n  }\n\n/* Visuelle Darstellung für ausgewählte Elemente */\n  [aria-selected=\"true\"] {\n    background-color: var(--color-primary-100);\n    border-color: var(--color-primary-500);\n  }\n\n/* Visuelle Darstellung für erweiterte Elemente */\n  [aria-expanded=\"true\"] .icon-expand {\n    transform: rotate(180deg);\n  }\n\n/*\n  * Hilfsklassen für Screenreader-Text\n  *\n  * Spezifische Klassen für häufig benötigte Screenreader-Texte.\n  */\n\n/* Für Text, der nur bei Hover/Fokus angezeigt werden soll - bereits in konsolidierter Definition enthalten */\n\n/* Für Text, der nur auf kleinen Bildschirmen ausgeblendet werden soll */\n  @media (max-width: 640px) {\n    .sr-only-mobile {\n      border-width: 0;\n      clip: rect(0, 0, 0, 0);\n      height: var(--border-width);\n      margin: calc(-1 * var(--border-width));\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      white-space: nowrap;\n      width: var(--border-width);\n    }\n  }\n\n/*\n  * Live-Region Support\n  *\n  * Stile für ARIA-Live-Regionen, die dynamisch aktualisierte Inhalte enthalten.\n  */\n\n/* Basis-Stil für Live-Regionen */\n  [aria-live] {\n    position: relative;\n  }\n\n/* Live-Region mit visueller Markierung für Entwicklungszwecke */\n  .debug [aria-live] {\n    outline: var(--border-width-thick) dashed var(--color-info);\n    outline-offset: var(--border-width-thick);\n  }\n\n/* Container für Benachrichtigungen, die für Screenreader bestimmt sind - bereits in konsolidierter Definition enthalten */\n  .sr-announcer {\n    pointer-events: none; /* Zusätzliche Eigenschaft nur für Announcer */\n  }\n\n/*\n  * Kontrasthilfen\n  *\n  * Erhöht den Kontrast für Benutzer mit Sehbehinderungen.\n  */\n\n/* Erhöht den Kontrast von Text */\n  .high-contrast-text {\n    color: var(--color-text-primary) !important;\n    text-shadow: 0 0 var(--border-width) rgb(0 0 0 / 500000);\n  }\n\n/* Anpassung der Hintergrundfarbe für besseren Kontrast */\n  .high-contrast-bg {\n    background-color: var(--color-surface) !important;\n    border: var(--border-width) solid var(--color-border);\n  }\n}\n\n/* Importierte Datei: core/accessibility/contrast.css */\n/*\n* Accessibility - Contrast\n*\n* Styles und Utilities für verbesserten Farbkontrast.\n* Diese Datei enthält Definitionen für kontrastreiche Farben und Kontrastprüfung.\n*/\n\n@layer accessibility {\n/*\n  * Kontrastreiche Farbvariablen\n  *\n  * Diese Variablen bieten Farben mit hohem Kontrast für eine bessere Zugänglichkeit.\n  * Sie erfüllen mindestens die WCAG 2.1 AA-Anforderungen (Kontrastverhältnis ≥ 4.5:1).\n  */\n  :root {\n/* Primäre Kontrastfarben */\n    --color-a11y-primary: var(--color-blue-600); /* Dunkleres Blau für besseren Kontrast auf weißem Hintergrund */\n    --color-a11y-primary-hover: var(--color-blue-700); /* Noch dunkleres Blau für Hover-Zustände */\n    --color-a11y-primary-text: var(--color-white); /* Weißer Text auf dunklerem Blau */\n\n/* Sekundäre Kontrastfarben */\n    --color-a11y-secondary: var(--color-gray-600); /* Dunkleres Grau für besseren Kontrast */\n    --color-a11y-secondary-hover: var(--color-gray-700); /* Noch dunkleres Grau für Hover-Zustände */\n    --color-a11y-secondary-text: var(--color-white); /* Weißer Text auf dunklerem Grau */\n\n/* Statusfarben mit hohem Kontrast */\n    --color-a11y-success: var(--color-green-600); /* Dunkleres Grün für besseren Kontrast */\n    --color-a11y-warning: var(--color-orange-600); /* Dunkleres Orange für besseren Kontrast */\n    --color-a11y-error: var(--color-red-600); /* Dunkleres Rot für besseren Kontrast */\n    --color-a11y-info: var(--color-blue-600); /* Dunkleres Blau für besseren Kontrast */\n\n/* Text-Farben mit hohem Kontrast */\n    --color-a11y-text-primary: var(--color-gray-very-dark); /* Fast schwarzer Text auf hellem Hintergrund */\n    --color-a11y-text-secondary: var(--color-gray-600); /* Dunkleres Grau für sekundären Text */\n    --color-a11y-text-tertiary: var(--color-gray-medium); /* Dunkleres Grau für tertiären Text */\n\n/* Hintergrundfarben mit hohem Kontrast */\n    --color-a11y-background: var(--color-white); /* Weißer Hintergrund */\n    --color-a11y-surface: var(--color-gray-very-light); /* Hellgraue Oberfläche */\n\n/* Randfarben mit hohem Kontrast */\n    --color-a11y-border: var(--color-gray-600); /* Dunklerer Rahmen für besseren Kontrast */\n  }\n\n/*\n  * Kontrast-Modus\n  *\n  * Diese Klasse kann auf body oder :root angewendet werden,\n  * um einen Hochkontrast-Modus zu aktivieren.\n  */\n  .high-contrast-mode {\n/* Überschreibe Standard-Farbvariablen mit Hochkontrast-Versionen */\n    --color-primary-500: var(--color-a11y-primary);\n    --color-primary-600: var(--color-a11y-primary-hover);\n    --color-primary-700: var(--color-a11y-primary-hover);\n    --color-secondary-500: var(--color-a11y-secondary);\n    --color-secondary-600: var(--color-a11y-secondary-hover);\n    --color-secondary-700: var(--color-a11y-secondary-hover);\n    --color-success: var(--color-a11y-success);\n    --color-warning: var(--color-a11y-warning);\n    --color-error: var(--color-a11y-error);\n    --color-info: var(--color-a11y-info);\n    --color-text-primary: var(--color-a11y-text-primary);\n    --color-text-secondary: var(--color-a11y-text-secondary);\n    --color-text-tertiary: var(--color-a11y-text-tertiary);\n    --color-background: var(--color-a11y-background);\n    --color-surface: var(--color-a11y-surface);\n    --color-border: var(--color-a11y-border);\n\n/* Erhöhter Kontrast durch verstärkte Schattierungen */\n    --shadow-sm: 0 var(--border-width) 3px 0 rgb(0 0 0 / 300000);\n    --shadow-md: 0 var(--spacing-1) 6px 0 rgb(0 0 0 / 300000);\n    --shadow-lg: 0 10px 15px 0 rgb(0 0 0 / 300000);\n\n/* Verstärkte Fokus-Indikatoren */\n    --focus-ring: 0 0 0 3px rgb(0 82 204 / 800000);\n\n/* Erhöhte Textlesbarkeit */\n    --line-height-normal: 1.6;\n\n/* Entfernung subtiler Transparenz-Effekte */\n    --color-overlay: var(--color-overlay-dark);\n    --color-overlay-light: var(--color-overlay-medium);\n  }\n\n/*\n  * Kontrast-Klassen für einzelne Elemente\n  *\n  * Diese Klassen können auf einzelne Elemente angewendet werden,\n  * um ihren Kontrast zu verbessern, ohne den gesamten Modus zu aktivieren.\n  */\n\n/* Verbesserte Textlesbarkeit */\n  .a11y-text {\n    color: var(--color-a11y-text-primary);\n    font-weight: var(--font-weight-medium);\n    line-height: var(--line-height-none).6;\n  }\n\n/* Kontrastreiche Buttons */\n  .a11y-button {\n    background-color: var(--color-a11y-primary);\n    border: var(--border-width-thick) solid var(--color-a11y-primary);\n    color: var(--color-a11y-primary-text);\n    font-weight: var(--font-weight-semibold);\n  }\n\n  .a11y-button:hover,\n  .a11y-button:focus {\n    background-color: var(--color-a11y-primary-hover);\n    border-color: var(--color-a11y-primary-hover);\n  }\n\n/* Kontrastreiche Links */\n  .a11y-link {\n    color: var(--color-a11y-primary);\n    font-weight: var(--font-weight-medium);\n    text-decoration: underline;\n  }\n\n  .a11y-link:hover,\n  .a11y-link:focus {\n    color: var(--color-a11y-primary-hover);\n    text-decoration: underline;\n  }\n\n/* Kontrastreiche Rahmen */\n  .a11y-border {\n    border: var(--border-width-thick) solid var(--color-a11y-border);\n  }\n\n/* Kontrastreiche Formular-Elemente */\n  .a11y-input {\n    background-color: var(--color-a11y-background);\n    border: var(--border-width-thick) solid var(--color-a11y-border);\n    color: var(--color-a11y-text-primary);\n  }\n\n  .a11y-input:focus {\n    border-color: var(--color-a11y-primary);\n    outline: var(--focus-ring);\n  }\n\n/* Kontrastreiche Icons */\n  .a11y-icon {\n    color: var(--color-a11y-primary);\n    height: 1%.5em;\n    width: 1%.5em;\n  }\n}\n\n/* Importierte Datei: core/accessibility/aria.css */\n/*\n* Accessibility - ARIA Support\n*\n* Styles und Utilities für ARIA-Rollen und -Attribute.\n* Diese Datei enthält Definitionen für konsistentes Styling von ARIA-Rollen.\n*/\n\n@layer accessibility {\n/*\n  * ARIA-Rollen Styling\n  *\n  * Konsistentes Styling für verschiedene ARIA-Rollen,\n  * um die visuelle Darstellung mit der semantischen Bedeutung in Einklang zu bringen.\n  */\n\n/* Dialog und Modal-Dialoge */\n  [role=\"dialog\"],\n  [role=\"alertdialog\"] {\n    background-color: var(--color-surface);\n    border-radius: var(--border-radius-lg);\n    box-shadow: var(--shadow-xl);\n    max-height: 9%0;\n    overflow-y: auto;\n    position: relative;\n    z-index: var(--z-index-modal);\n  }\n\n/* Navigation */\n  [role=\"navigation\"] {\n    display: flex;\n    flex-wrap: wrap;\n  }\n\n/* Tabs */\n  [role=\"tablist\"] {\n    border-bottom: var(--border-width) solid var(--color-border);\n    display: flex;\n  }\n\n  [role=\"tab\"] {\n    background: none;\n    border: none;\n    border-bottom: var(--border-width-thick) solid transparent;\n    cursor: pointer;\n    padding: 0.5rem var(--spacing-4);\n  }\n\n  [role=\"tab\"][aria-selected=\"true\"] {\n    border-bottom-color: var(--color-primary-500);\n    color: var(--color-primary-600);\n    font-weight: var(--font-weight-medium); /* Konsolidiert von separater Definition */\n  }\n\n  [role=\"tabpanel\"] {\n    padding: var(--spacing-4) 0;\n  }\n\n/* Menüs */\n  [role=\"menu\"] {\n    background-color: var(--color-surface);\n    border: var(--border-width) solid var(--color-border);\n    border-radius: var(--border-radius-md);\n    box-shadow: var(--shadow-md);\n    display: flex;\n    flex-direction: column;\n    min-width: var(--spacing-40);\n    padding: 0.5rem 0;\n  }\n\n  [role=\"menuitem\"] {\n    cursor: pointer;\n    padding: 0.5rem var(--spacing-4);\n  }\n\n  [role=\"menuitem\"]:hover,\n  [role=\"menuitem\"]:focus {\n    background-color: var(--color-surface-hover);\n  }\n\n/* Listen */\n  [role=\"list\"] {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  [role=\"listitem\"] {\n    padding: 0.5rem 0;\n  }\n\n/* Tooltips */\n  [role=\"tooltip\"] {\n    background-color: var(--color-surface);\n    border: var(--border-width) solid var(--color-border);\n    border-radius: var(--border-radius-sm);\n    box-shadow: var(--shadow-md);\n    max-width: var(--spacing-80);\n    padding: 0.5rem;\n    position: absolute;\n    z-index: var(--z-index-tooltip);\n  }\n\n/* Alert und Benachrichtigungen */\n  [role=\"alert\"],\n  [role=\"status\"],\n  [role=\"log\"] {\n    background-color: var(--color-surface);\n    border-left: var(--spacing-1) solid var(--color-info);\n    border-radius: var(--border-radius-md);\n    margin: var(--spacing-4) 0;\n    padding: var(--spacing-4);\n  }\n\n  [role=\"alert\"] {\n    border-left-color: var(--color-error);\n  }\n\n  [role=\"status\"] {\n    border-left-color: var(--color-success);\n  }\n\n/*\n  * ARIA-Attribute Styling\n  *\n  * Visuelles Feedback für verschiedene ARIA-Attribute,\n  * um Zustandsänderungen deutlicher zu machen.\n  */\n\n/* Erweiterte Elemente */\n  [aria-expanded=\"true\"] {\n/* Zusätzliche Stile für erweiterte Elemente */\n  }\n\n/* Ausgewählte Elemente - bereits in [role=\"tab\"][aria-selected=\"true\"] konsolidiert */\n\n/* Aktive Elemente */\n  [aria-current=\"page\"],\n  [aria-current=\"step\"],\n  [aria-current=\"location\"],\n  [aria-current=\"date\"],\n  [aria-current=\"time\"] {\n    color: var(--color-primary-700);\n    font-weight: var(--font-weight-semibold);\n  }\n\n/* Gedrückte Elemente */\n  [aria-pressed=\"true\"] {\n    background-color: var(--color-primary-200);\n    border-color: var(--color-primary-400);\n  }\n\n/* Kontrollierte Elemente */\n  [aria-controls]:focus {\n    outline: var(--focus-ring);\n  }\n\n/* Beschriebene Elemente */\n  [aria-describedby] {\n/* Subtile Markierung für Elemente mit Beschreibung */\n    border-bottom: var(--border-width) dotted var(--color-border);\n  }\n}\n\n\n/* Reduzierte Bewegung (Reduced Motion) für Benutzer, die weniger Animation bevorzugen */\n@layer accessibility {\n/* Wenn der Benutzer reduzierte Bewegung im System eingestellt hat */\n  @media (prefers-reduced-motion: reduce) {\n    :root {\n/* Alle Animationen deaktivieren oder verlangsamen */\n      --transition-duration-fast: 0.01ms;\n      --transition-duration-normal: 0.01ms;\n      --transition-duration-slow: 0.01ms;\n    }\n\n/* Alle Animationen deaktivieren */\n    *, *::before, *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      scroll-behavior: auto !important;\n      transition-duration: 0.01ms !important;\n    }\n  }\n\n/* Klasse für explizit reduzierte Bewegung */\n  .reduced-motion {\n/* Alle Animationen deaktivieren oder verlangsamen */\n    --transition-duration-fast: 0.01ms;\n    --transition-duration-normal: 0.01ms;\n    --transition-duration-slow: 0.01ms;\n\n    & *, & *::before, & *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      scroll-behavior: auto !important;\n      transition-duration: 0.01ms !important;\n    }\n  }\n\n/* Basis-Einstellungen für Fokussierbarkeit */\n  [tabindex=\"-1\"] {\n    outline: none;\n  }\n\n/* Visuelle Hinweise für Interaktivität */\n  button,\n  [role=\"button\"],\n  input,\n  select,\n  textarea,\n  a {\n    cursor: pointer;\n  }\n\n  [disabled] {\n    cursor: not-allowed !important;\n  }\n\n/* [aria-disabled=\"true\"] bereits in screenreader.css definiert */\n\n/* Globale Einstellungen für Tap-Targets */\n  a, button, [role=\"button\"], [type=\"button\"], [type=\"submit\"], [type=\"reset\"] {\n    min-height: 4%var(--spacing-1); /* Mindesthöhe für Touch-Targets */\n    min-width: 4%var(--spacing-1);  /* Mindestbreite für Touch-Targets */\n  }\n}\n\n/* Datei: core/accessibility/contrast.css */\n/*\n* Accessibility - Contrast\n*\n* Styles und Utilities für verbesserten Farbkontrast.\n* Diese Datei enthält Definitionen für kontrastreiche Farben und Kontrastprüfung.\n*/\n\n@layer accessibility {\n/*\n  * Kontrastreiche Farbvariablen\n  *\n  * Diese Variablen bieten Farben mit hohem Kontrast für eine bessere Zugänglichkeit.\n  * Sie erfüllen mindestens die WCAG 2.1 AA-Anforderungen (Kontrastverhältnis ≥ 4.5:1).\n  */\n  :root {\n/* Primäre Kontrastfarben */\n    --color-a11y-primary: var(--color-blue-600); /* Dunkleres Blau für besseren Kontrast auf weißem Hintergrund */\n    --color-a11y-primary-hover: var(--color-blue-700); /* Noch dunkleres Blau für Hover-Zustände */\n    --color-a11y-primary-text: var(--color-white); /* Weißer Text auf dunklerem Blau */\n\n/* Sekundäre Kontrastfarben */\n    --color-a11y-secondary: var(--color-gray-600); /* Dunkleres Grau für besseren Kontrast */\n    --color-a11y-secondary-hover: var(--color-gray-700); /* Noch dunkleres Grau für Hover-Zustände */\n    --color-a11y-secondary-text: var(--color-white); /* Weißer Text auf dunklerem Grau */\n\n/* Statusfarben mit hohem Kontrast */\n    --color-a11y-success: var(--color-green-600); /* Dunkleres Grün für besseren Kontrast */\n    --color-a11y-warning: var(--color-orange-600); /* Dunkleres Orange für besseren Kontrast */\n    --color-a11y-error: var(--color-red-600); /* Dunkleres Rot für besseren Kontrast */\n    --color-a11y-info: var(--color-blue-600); /* Dunkleres Blau für besseren Kontrast */\n\n/* Text-Farben mit hohem Kontrast */\n    --color-a11y-text-primary: var(--color-gray-very-dark); /* Fast schwarzer Text auf hellem Hintergrund */\n    --color-a11y-text-secondary: var(--color-gray-600); /* Dunkleres Grau für sekundären Text */\n    --color-a11y-text-tertiary: var(--color-gray-medium); /* Dunkleres Grau für tertiären Text */\n\n/* Hintergrundfarben mit hohem Kontrast */\n    --color-a11y-background: var(--color-white); /* Weißer Hintergrund */\n    --color-a11y-surface: var(--color-gray-very-light); /* Hellgraue Oberfläche */\n\n/* Randfarben mit hohem Kontrast */\n    --color-a11y-border: var(--color-gray-600); /* Dunklerer Rahmen für besseren Kontrast */\n  }\n\n/*\n  * Kontrast-Modus\n  *\n  * Diese Klasse kann auf body oder :root angewendet werden,\n  * um einen Hochkontrast-Modus zu aktivieren.\n  */\n  .high-contrast-mode {\n/* Überschreibe Standard-Farbvariablen mit Hochkontrast-Versionen */\n    --color-primary-500: var(--color-a11y-primary);\n    --color-primary-600: var(--color-a11y-primary-hover);\n    --color-primary-700: var(--color-a11y-primary-hover);\n    --color-secondary-500: var(--color-a11y-secondary);\n    --color-secondary-600: var(--color-a11y-secondary-hover);\n    --color-secondary-700: var(--color-a11y-secondary-hover);\n    --color-success: var(--color-a11y-success);\n    --color-warning: var(--color-a11y-warning);\n    --color-error: var(--color-a11y-error);\n    --color-info: var(--color-a11y-info);\n    --color-text-primary: var(--color-a11y-text-primary);\n    --color-text-secondary: var(--color-a11y-text-secondary);\n    --color-text-tertiary: var(--color-a11y-text-tertiary);\n    --color-background: var(--color-a11y-background);\n    --color-surface: var(--color-a11y-surface);\n    --color-border: var(--color-a11y-border);\n\n/* Erhöhter Kontrast durch verstärkte Schattierungen */\n    --shadow-sm: 0 var(--border-width) 3px 0 rgb(0 0 0 / 300000);\n    --shadow-md: 0 var(--spacing-1) 6px 0 rgb(0 0 0 / 300000);\n    --shadow-lg: 0 10px 15px 0 rgb(0 0 0 / 300000);\n\n/* Verstärkte Fokus-Indikatoren */\n    --focus-ring: 0 0 0 3px rgb(0 82 204 / 800000);\n\n/* Erhöhte Textlesbarkeit */\n    --line-height-normal: 1.6;\n\n/* Entfernung subtiler Transparenz-Effekte */\n    --color-overlay: var(--color-overlay-dark);\n    --color-overlay-light: var(--color-overlay-medium);\n  }\n\n/*\n  * Kontrast-Klassen für einzelne Elemente\n  *\n  * Diese Klassen können auf einzelne Elemente angewendet werden,\n  * um ihren Kontrast zu verbessern, ohne den gesamten Modus zu aktivieren.\n  */\n\n/* Verbesserte Textlesbarkeit */\n  .a11y-text {\n    color: var(--color-a11y-text-primary);\n    font-weight: var(--font-weight-medium);\n    line-height: var(--line-height-none).6;\n  }\n\n/* Kontrastreiche Buttons */\n  .a11y-button {\n    background-color: var(--color-a11y-primary);\n    border: var(--border-width-thick) solid var(--color-a11y-primary);\n    color: var(--color-a11y-primary-text);\n    font-weight: var(--font-weight-semibold);\n  }\n\n  .a11y-button:hover,\n  .a11y-button:focus {\n    background-color: var(--color-a11y-primary-hover);\n    border-color: var(--color-a11y-primary-hover);\n  }\n\n/* Kontrastreiche Links */\n  .a11y-link {\n    color: var(--color-a11y-primary);\n    font-weight: var(--font-weight-medium);\n    text-decoration: underline;\n  }\n\n  .a11y-link:hover,\n  .a11y-link:focus {\n    color: var(--color-a11y-primary-hover);\n    text-decoration: underline;\n  }\n\n/* Kontrastreiche Rahmen */\n  .a11y-border {\n    border: var(--border-width-thick) solid var(--color-a11y-border);\n  }\n\n/* Kontrastreiche Formular-Elemente */\n  .a11y-input {\n    background-color: var(--color-a11y-background);\n    border: var(--border-width-thick) solid var(--color-a11y-border);\n    color: var(--color-a11y-text-primary);\n  }\n\n  .a11y-input:focus {\n    border-color: var(--color-a11y-primary);\n    outline: var(--focus-ring);\n  }\n\n/* Kontrastreiche Icons */\n  .a11y-icon {\n    color: var(--color-a11y-primary);\n    height: 1%.5em;\n    width: 1%.5em;\n  }\n}\n\n/* Datei: core/accessibility/aria.css */\n/*\n* Accessibility - ARIA Support\n*\n* Styles und Utilities für ARIA-Rollen und -Attribute.\n* Diese Datei enthält Definitionen für konsistentes Styling von ARIA-Rollen.\n*/\n\n@layer accessibility {\n/*\n  * ARIA-Rollen Styling\n  *\n  * Konsistentes Styling für verschiedene ARIA-Rollen,\n  * um die visuelle Darstellung mit der semantischen Bedeutung in Einklang zu bringen.\n  */\n\n/* Dialog und Modal-Dialoge */\n  [role=\"dialog\"],\n  [role=\"alertdialog\"] {\n    background-color: var(--color-surface);\n    border-radius: var(--border-radius-lg);\n    box-shadow: var(--shadow-xl);\n    max-height: 9%0;\n    overflow-y: auto;\n    position: relative;\n    z-index: var(--z-index-modal);\n  }\n\n/* Navigation */\n  [role=\"navigation\"] {\n    display: flex;\n    flex-wrap: wrap;\n  }\n\n/* Tabs */\n  [role=\"tablist\"] {\n    border-bottom: var(--border-width) solid var(--color-border);\n    display: flex;\n  }\n\n  [role=\"tab\"] {\n    background: none;\n    border: none;\n    border-bottom: var(--border-width-thick) solid transparent;\n    cursor: pointer;\n    padding: 0.5rem var(--spacing-4);\n  }\n\n  [role=\"tab\"][aria-selected=\"true\"] {\n    border-bottom-color: var(--color-primary-500);\n    color: var(--color-primary-600);\n    font-weight: var(--font-weight-medium); /* Konsolidiert von separater Definition */\n  }\n\n  [role=\"tabpanel\"] {\n    padding: var(--spacing-4) 0;\n  }\n\n/* Menüs */\n  [role=\"menu\"] {\n    background-color: var(--color-surface);\n    border: var(--border-width) solid var(--color-border);\n    border-radius: var(--border-radius-md);\n    box-shadow: var(--shadow-md);\n    display: flex;\n    flex-direction: column;\n    min-width: var(--spacing-40);\n    padding: 0.5rem 0;\n  }\n\n  [role=\"menuitem\"] {\n    cursor: pointer;\n    padding: 0.5rem var(--spacing-4);\n  }\n\n  [role=\"menuitem\"]:hover,\n  [role=\"menuitem\"]:focus {\n    background-color: var(--color-surface-hover);\n  }\n\n/* Listen */\n  [role=\"list\"] {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  [role=\"listitem\"] {\n    padding: 0.5rem 0;\n  }\n\n/* Tooltips */\n  [role=\"tooltip\"] {\n    background-color: var(--color-surface);\n    border: var(--border-width) solid var(--color-border);\n    border-radius: var(--border-radius-sm);\n    box-shadow: var(--shadow-md);\n    max-width: var(--spacing-80);\n    padding: 0.5rem;\n    position: absolute;\n    z-index: var(--z-index-tooltip);\n  }\n\n/* Alert und Benachrichtigungen */\n  [role=\"alert\"],\n  [role=\"status\"],\n  [role=\"log\"] {\n    background-color: var(--color-surface);\n    border-left: var(--spacing-1) solid var(--color-info);\n    border-radius: var(--border-radius-md);\n    margin: var(--spacing-4) 0;\n    padding: var(--spacing-4);\n  }\n\n  [role=\"alert\"] {\n    border-left-color: var(--color-error);\n  }\n\n  [role=\"status\"] {\n    border-left-color: var(--color-success);\n  }\n\n/*\n  * ARIA-Attribute Styling\n  *\n  * Visuelles Feedback für verschiedene ARIA-Attribute,\n  * um Zustandsänderungen deutlicher zu machen.\n  */\n\n/* Erweiterte Elemente */\n  [aria-expanded=\"true\"] {\n/* Zusätzliche Stile für erweiterte Elemente */\n  }\n\n/* Ausgewählte Elemente - bereits in [role=\"tab\"][aria-selected=\"true\"] konsolidiert */\n\n/* Aktive Elemente */\n  [aria-current=\"page\"],\n  [aria-current=\"step\"],\n  [aria-current=\"location\"],\n  [aria-current=\"date\"],\n  [aria-current=\"time\"] {\n    color: var(--color-primary-700);\n    font-weight: var(--font-weight-semibold);\n  }\n\n/* Gedrückte Elemente */\n  [aria-pressed=\"true\"] {\n    background-color: var(--color-primary-200);\n    border-color: var(--color-primary-400);\n  }\n\n/* Kontrollierte Elemente */\n  [aria-controls]:focus {\n    outline: var(--focus-ring);\n  }\n\n/* Beschriebene Elemente */\n  [aria-describedby] {\n/* Subtile Markierung für Elemente mit Beschreibung */\n    border-bottom: var(--border-width) dotted var(--color-border);\n  }\n}\n"],"names":[]}