/* ==========================================================================
   msg Liquid Glass – Design Tokens
   --------------------------------------------------------------------------
   Ebene 1: Primitive (Rohwerte, nie direkt in Komponenten verwenden)
   Ebene 2: Semantische Tokens (Bedeutung – diese in Komponenten nutzen)
   Themes:  Light (Default) · Dark (data-theme="dark" oder System-Präferenz)
   Farbquellen (Ausrichtung: msg nexinsure / msg.Insurance Suite):
   [BB] msg.Insurance Suite Brandbook V6_01 (Confluence PM, 23.10.2026) – führend
   [CD] Confluence „Corporate Design“ (Space PM, 29.10.2026)
   [GR] msg Gruppen-Styleguide DE (msg.group, 01.04.2026) – nur Referenz
   Skalen-Logik für Grau/Lila/Blau/Gelb:
     500 = CI-Vollton · 100–400 = offizielle Abstufungen 20/40/60/80 % [BB]
     50 und 600+ = abgeleitet (Hintergründe, Hover, text-taugliche Töne)
   ========================================================================== */

:root {
  /* ---------- 1. Primitive · Farben -------------------------------------- */

  /* msg rot – Primärfarbe · RGB 160/20/65 · Pantone 194 · RAL 3003 [BB][GR]
     Laut [GR] wird Rot in der Gestaltung nicht aufgerastert. Die Stufen
     unten sind reine UI-Zustände (Hover, Fokus, Dark Mode), keine Flächenfarben. */
  --msg-red-50:  #fdf2f5;
  --msg-red-100: #fbe4eb;
  --msg-red-200: #f5c2d2;
  --msg-red-300: #ec8fad;
  --msg-red-400: #df5683;
  --msg-red-500: #c72a5e;
  --msg-red-600: #a01441; /* CI msg rot */
  --msg-red-700: #861136;
  --msg-red-800: #6b0e2b;
  --msg-red-900: #4d0a1f;

  /* msg grau · RGB 111/111/111 · Cool Gray 11 · RAL 7024 [BB][CD] (RAL 7012 lt. [GR]) */
  --msg-gray-0:   #ffffff;
  --msg-gray-50:  #f6f6f6;
  --msg-gray-100: #e2e2e2; /* 20 % [BB] */
  --msg-gray-200: #c5c5c5; /* 40 % [BB] */
  --msg-gray-300: #a9a9a9; /* 60 % [BB] */
  --msg-gray-400: #8c8c8c; /* 80 % [BB] */
  --msg-gray-500: #6f6f6f; /* CI msg grau – 5.0:1 auf Weiß */
  --msg-gray-600: #575757;
  --msg-gray-700: #414141;
  --msg-gray-800: #2a2a2a;
  --msg-gray-900: #181818;
  --msg-gray-950: #0e0e0e;

  /* msg lila (purple) · RGB 65/44/101 · Pantone 669 [BB]
     Laut [BB] die am häufigsten eingesetzte Sekundärfarbe (Gestaltungselement) */
  --msg-purple-100: #d9d5e0; /* 20 % [BB] */
  --msg-purple-200: #b3abc1; /* 40 % [BB] */
  --msg-purple-300: #8d81a3; /* 60 % [BB] */
  --msg-purple-400: #675684; /* 80 % [BB] – 6.5:1 auf Weiß */
  --msg-purple-500: #412c65; /* CI lila – Weiß darauf 11.8:1 */
  --msg-purple-600: #33224f;
  --msg-purple-700: #24183a;

  /* msg blau (blue) · RGB 118/156/255 [BB][CD] – Akzente & Highlights
     Achtung: Weiß auf CI-Blau nur 2.6:1 → immer dunkle Schrift verwenden */
  --msg-blue-100: #e4ebff; /* 20 % [BB] */
  --msg-blue-200: #c8d7ff; /* 40 % [BB] */
  --msg-blue-300: #adc4ff; /* 60 % [BB] */
  --msg-blue-400: #91b0ff; /* 80 % [BB] */
  --msg-blue-500: #769cff; /* CI blau */
  --msg-blue-600: #4f78e6;
  --msg-blue-700: #3d63d6; /* abgeleitet: text-tauglich auf Hell, 5.3:1 */

  /* msg gelb (yellow) · RGB 255/190/15 [BB][CD] – Akzente & Highlights
     Nur als Fläche/Akzent; als Text auf Hell die 700er-Stufe verwenden */
  --msg-yellow-100: #fff2cf; /* 20 % [BB] */
  --msg-yellow-200: #ffe59f; /* 40 % [BB] */
  --msg-yellow-300: #ffd86f; /* 60 % [BB] */
  --msg-yellow-400: #ffcb3f; /* 80 % [BB] */
  --msg-yellow-500: #ffbe0f; /* CI gelb */
  --msg-yellow-700: #946a00; /* abgeleitet: text-tauglich auf Hell, 4.9:1 */

  /* msg petrol · RGB 86/163/188 · Akzentfarbe der msg-Gruppe [GR]
     Nicht Teil der Insurance-Suite-Palette – nur für gruppenweite Apps */
  --msg-petrol-500: #56a3bc;

  /* Status (nicht CI-definiert – funktionale Ergänzung) */
  --green-400: #4cc38a;
  --green-600: #1d7f52;
  --green-700: #166640;
  --red-400:   #f0646a;
  --red-600:   #c4262e;
  --red-700:   #a11d24;

  /* ---------- 1. Primitive · Abstände (4px-Raster) ----------------------- */
  --space-0:   0;
  --space-1:   0.25rem;  /*  4px */
  --space-2:   0.5rem;   /*  8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */

  /* Responsive Abstände (skalieren mit Viewport) */
  --space-gutter:  clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --space-section: clamp(1.5rem, 1rem + 2.5vw, 3rem);

  /* ---------- 1. Primitive · Radien -------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 999px;

  /* ---------- 1. Primitive · Typografie ---------------------------------- */
  /* Web-Schrift lt. msg.Insurance Suite Brandbook: Open Sans (Meta Pro nur Print/PDF) */
  --font-sans: "Open Sans", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;

  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.8125rem; /* 13 */
  --text-base: 0.9375rem; /* 15 */
  --text-md:   1.0625rem; /* 17 */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  --text-2xl:  clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
  --text-3xl:  clamp(2rem, 1.5rem + 2vw, 3rem);

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --tracking-tight: -0.015em;
  --tracking-caps:  0.06em;

  /* ---------- 1. Primitive · Bewegung ------------------------------------ */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;

  /* ---------- 1. Primitive · Layout -------------------------------------- */
  --sidebar-width:    260px;
  --sidebar-width-collapsed: 76px;
  --topbar-height:    64px;
  --content-max:      1440px;
  --control-height:   40px;
  --control-height-sm: 32px;
  --control-height-lg: 48px;

  /* Breakpoints (Referenz – in Media Queries als Literal verwenden)
     sm 640px · md 900px · lg 1200px · xl 1536px */

  /* Z-Index-Skala */
  --z-base:     1;
  --z-sticky:   100;
  --z-dropdown: 200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ======================================================================
     2. Semantische Tokens · LIGHT
     ====================================================================== */
  color-scheme: light;

  /* Marke */
  --color-primary:          var(--msg-red-600);
  --color-primary-hover:    var(--msg-red-700);
  --color-primary-active:   var(--msg-red-800);
  --color-primary-subtle:   rgb(160 20 65 / 0.10);
  --color-primary-text:     var(--msg-red-600);   /* Rot als Textfarbe, 7.9:1 auf Weiß */
  --color-on-primary:       #ffffff;

  --color-accent:           var(--msg-purple-500);
  --color-accent-hover:     var(--msg-purple-600);
  --color-accent-subtle:    rgb(65 44 101 / 0.10);
  --color-on-accent:        #ffffff;

  /* Text */
  --color-text:             var(--msg-gray-900);
  --color-text-secondary:   var(--msg-gray-600);
  --color-text-muted:       var(--msg-gray-500);
  --color-text-disabled:    var(--msg-gray-400);
  --color-text-inverse:     #ffffff;

  /* Flächen */
  --color-bg:               #eef0f4;
  --color-surface-solid:    #ffffff;
  --color-border:           rgb(24 24 28 / 0.10);
  --color-border-strong:    rgb(24 24 28 / 0.20);
  --color-divider:          rgb(24 24 28 / 0.07);
  --color-overlay:          rgb(14 14 17 / 0.35);

  /* Status (Text-Farben erfüllen ≥ 4.5:1 auf Glas-Hell) */
  --color-success:          var(--green-600);
  --color-success-subtle:   rgb(29 127 82 / 0.12);
  --color-warning:          var(--msg-yellow-700);
  --color-warning-subtle:   rgb(255 190 15 / 0.22);
  --color-danger:           var(--red-600);
  --color-danger-subtle:    rgb(196 38 46 / 0.10);
  --color-info:             var(--msg-blue-700);
  --color-info-subtle:      rgb(118 156 255 / 0.16);

  /* Fokus */
  --focus-ring: 0 0 0 3px rgb(160 20 65 / 0.35);
  --focus-ring-offset: 0 0 0 2px var(--color-surface-solid);

  /* Datenvisualisierung (unterscheidbar, msg-nah) */
  --chart-1: var(--msg-red-600);
  --chart-2: var(--msg-purple-500);
  --chart-3: var(--msg-blue-500);
  --chart-4: var(--msg-yellow-500);
  --chart-5: var(--msg-gray-500);

  /* ---------- Liquid Glass ----------------------------------------------
     Das Material besteht aus 6 Schichten (siehe Styleguide › Anatomie):
     1 Fläche (--glass-bg)          4 Lichtkante (--glass-rim)
     2 Unschärfe (--glass-blur)     5 Glanz (--glass-sheen)            
     3 Tiefe (--glass-highlight)    6 Körnung (--glass-noise)
     ---------------------------------------------------------------------- */
  --glass-blur:            24px;
  --glass-saturate:        190%;
  --glass-bg:              rgb(255 255 255 / 0.40);
  --glass-bg-strong:       rgb(255 255 255 / 0.68);
  --glass-bg-subtle:       rgb(255 255 255 / 0.24);
  --glass-bg-hover:        rgb(255 255 255 / 0.62);
  --glass-border:          rgb(255 255 255 / 0.55);
  --glass-border-outer:    rgb(24 24 28 / 0.08);
  /* Innere Tiefe: helle Oberkante, Lichtsaum oben, leichte Lila-Schattierung unten */
  --glass-highlight:       inset 0 1px 0 0 rgb(255 255 255 / 0.95),
                           inset 0 14px 24px -18px rgb(255 255 255 / 0.95),
                           inset 0 -16px 28px -20px rgb(65 44 101 / 0.22),
                           inset 0 0 0 1px rgb(255 255 255 / 0.20);
  /* Lichtkante: hell oben-links und unten-rechts, dazwischen klar */
  --glass-rim:             linear-gradient(135deg,
                             rgb(255 255 255 / 1.00) 0%,
                             rgb(255 255 255 / 0.40) 20%,
                             rgb(255 255 255 / 0.00) 42%,
                             rgb(255 255 255 / 0.00) 62%,
                             rgb(255 255 255 / 0.55) 85%,
                             rgb(255 255 255 / 0.95) 100%);
  --glass-rim-width:       1.5px;
  /* Glanz: diagonale Reflexion + vertikale Dicke */
  --glass-sheen:           linear-gradient(135deg,
                             rgb(255 255 255 / 0.50) 0%,
                             rgb(255 255 255 / 0.08) 38%,
                             rgb(255 255 255 / 0.00) 60%,
                             rgb(255 255 255 / 0.18) 100%),
                           linear-gradient(180deg,
                             rgb(255 255 255 / 0.22) 0%,
                             rgb(255 255 255 / 0.00) 45%);
  /* Feine Körnung (Milchglas), als SVG-Rauschen */
  --glass-noise:           url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --glass-shadow:          0 0 0 1px rgb(24 24 28 / 0.05),
                           0 12px 32px -10px rgb(65 44 101 / 0.22),
                           0 2px 6px rgb(14 14 17 / 0.06);
  --glass-fallback:        rgb(250 250 252 / 0.96);

  /* Schatten */
  --shadow-sm: 0 1px 2px rgb(14 14 17 / 0.06), 0 1px 1px rgb(14 14 17 / 0.04);
  --shadow-md: 0 4px 16px -2px rgb(14 14 17 / 0.08), 0 2px 4px rgb(14 14 17 / 0.04);
  --shadow-lg: 0 18px 40px -8px rgb(14 14 17 / 0.16), 0 4px 10px rgb(14 14 17 / 0.05);
  --shadow-primary: 0 6px 18px -4px rgb(160 20 65 / 0.45);

  /* Hintergrund-„Licht“ hinter dem Glas. Glas wirkt nur, wenn dahinter
     Farbe liegt – daher kräftige CI-Farbflächen, die langsam treiben. */
  --backdrop-gradient:
    radial-gradient(46vmax 46vmax at 6% 4%,    rgb(160 20 65 / 0.42), transparent 70%),
    radial-gradient(44vmax 44vmax at 96% 10%,  rgb(118 156 255 / 0.58), transparent 70%),
    radial-gradient(48vmax 48vmax at 28% 100%, rgb(65 44 101 / 0.40), transparent 70%),
    radial-gradient(26vmax 26vmax at 90% 92%,  rgb(255 190 15 / 0.42), transparent 70%),
    radial-gradient(34vmax 34vmax at 60% 55%,  rgb(223 86 131 / 0.20), transparent 70%),
    radial-gradient(30vmax 30vmax at 38% 28%,  rgb(118 156 255 / 0.22), transparent 70%),
    linear-gradient(180deg, #eceef4 0%, #e2e4ec 100%);
  --backdrop-drift:        38s;
}

/* ======================================================================
   2. Semantische Tokens · DARK
   ====================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-primary:        var(--msg-red-500);
    --color-primary-hover:  var(--msg-red-400);
    --color-primary-active: var(--msg-red-600);
    --color-primary-subtle: rgb(223 86 131 / 0.16);
    --color-primary-text:   var(--msg-red-300);
    --color-on-primary:     #ffffff;
    --color-accent:         var(--msg-blue-500);
    --color-accent-hover:   var(--msg-blue-400);
    --color-accent-subtle:  rgb(118 156 255 / 0.16);
    --color-on-accent:      var(--msg-gray-950);
    --color-text:           #f3f3f3;
    --color-text-secondary: #bababa;
    --color-text-muted:     #949494;
    --color-text-disabled:  #62626a;
    --color-text-inverse:   var(--msg-gray-900);
    --color-bg:             #0f0f13;
    --color-surface-solid:  #1c1c22;
    --color-border:         rgb(255 255 255 / 0.10);
    --color-border-strong:  rgb(255 255 255 / 0.20);
    --color-divider:        rgb(255 255 255 / 0.07);
    --color-overlay:        rgb(0 0 0 / 0.55);
    --color-success:        var(--green-400);
    --color-success-subtle: rgb(76 195 138 / 0.16);
    --color-warning:        var(--msg-yellow-500);
    --color-warning-subtle: rgb(255 190 15 / 0.16);
    --color-danger:         var(--red-400);
    --color-danger-subtle:  rgb(240 100 106 / 0.16);
    --color-info:           var(--msg-blue-500);
    --color-info-subtle:    rgb(118 156 255 / 0.16);
    --focus-ring:           0 0 0 3px rgb(236 143 173 / 0.45);
    --chart-1: var(--msg-red-400);
    --chart-2: var(--msg-purple-300);
    --chart-3: var(--msg-blue-500);
    --chart-4: var(--msg-yellow-500);
    --chart-5: var(--msg-gray-400);
    --glass-bg:             rgb(38 38 46 / 0.50);
    --glass-bg-strong:      rgb(38 38 46 / 0.72);
    --glass-bg-subtle:      rgb(255 255 255 / 0.05);
    --glass-bg-hover:       rgb(60 60 70 / 0.60);
    --glass-border:         rgb(255 255 255 / 0.14);
    --glass-border-outer:   rgb(0 0 0 / 0.35);
    --glass-highlight:      inset 0 1px 0 0 rgb(255 255 255 / 0.18), inset 0 14px 24px -18px rgb(255 255 255 / 0.10),
                            inset 0 -16px 28px -20px rgb(0 0 0 / 0.45), inset 0 0 0 1px rgb(255 255 255 / 0.04);
    --glass-sheen:          linear-gradient(135deg,
                              rgb(255 255 255 / 0.10) 0%,
                              rgb(255 255 255 / 0.02) 40%,
                              rgb(255 255 255 / 0.00) 60%,
                              rgb(255 255 255 / 0.05) 100%);
    --glass-fallback:       rgb(30 30 36 / 0.97);
    --glass-rim:           linear-gradient(135deg, rgb(255 255 255 / 0.50) 0%, rgb(255 255 255 / 0.12) 22%, rgb(255 255 255 / 0) 45%, rgb(255 255 255 / 0) 62%, rgb(255 255 255 / 0.10) 85%, rgb(255 255 255 / 0.32) 100%);
    --glass-shadow:        0 0 0 1px rgb(0 0 0 / 0.40), 0 16px 40px -12px rgb(0 0 0 / 0.60), 0 2px 6px rgb(0 0 0 / 0.30);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 6px 18px -4px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 22px 48px -10px rgb(0 0 0 / 0.65);
    --shadow-primary: 0 6px 20px -4px rgb(199 42 94 / 0.55);
    --backdrop-gradient:
      radial-gradient(60vmax 60vmax at 8% 0%,   rgb(160 20 65 / 0.38), transparent 60%),
      radial-gradient(50vmax 50vmax at 100% 20%, rgb(65 44 101 / 0.55), transparent 60%),
      radial-gradient(55vmax 55vmax at 40% 110%, rgb(107 14 43 / 0.45), transparent 60%),
      linear-gradient(180deg, #121217 0%, #0b0b0e 100%);
  }
}

/* Expliziter Dark-Modus (identische Werte wie oben, per Toggle) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-primary:        var(--msg-red-500);
  --color-primary-hover:  var(--msg-red-400);
  --color-primary-active: var(--msg-red-600);
  --color-primary-subtle: rgb(223 86 131 / 0.16);
  --color-primary-text:   var(--msg-red-300);
  --color-on-primary:     #ffffff;
  --color-accent:         var(--msg-blue-500);
  --color-accent-hover:   var(--msg-blue-400);
  --color-accent-subtle:  rgb(118 156 255 / 0.16);
  --color-on-accent:      var(--msg-gray-950);
  --color-text:           #f3f3f3;
  --color-text-secondary: #bababa;
  --color-text-muted:     #949494;
  --color-text-disabled:  #62626a;
  --color-text-inverse:   var(--msg-gray-900);
  --color-bg:             #0f0f13;
  --color-surface-solid:  #1c1c22;
  --color-border:         rgb(255 255 255 / 0.10);
  --color-border-strong:  rgb(255 255 255 / 0.20);
  --color-divider:        rgb(255 255 255 / 0.07);
  --color-overlay:        rgb(0 0 0 / 0.55);
  --color-success:        var(--green-400);
  --color-success-subtle: rgb(76 195 138 / 0.16);
  --color-warning:        var(--msg-yellow-500);
  --color-warning-subtle: rgb(255 190 15 / 0.16);
  --color-danger:         var(--red-400);
  --color-danger-subtle:  rgb(240 100 106 / 0.16);
  --color-info:           var(--msg-blue-500);
  --color-info-subtle:    rgb(118 156 255 / 0.16);
  --focus-ring:           0 0 0 3px rgb(236 143 173 / 0.45);
  --chart-1: var(--msg-red-400);
  --chart-2: var(--msg-purple-300);
  --chart-3: var(--msg-blue-500);
  --chart-4: var(--msg-yellow-500);
  --chart-5: var(--msg-gray-400);
  --glass-bg:             rgb(38 38 46 / 0.50);
  --glass-bg-strong:      rgb(38 38 46 / 0.72);
  --glass-bg-subtle:      rgb(255 255 255 / 0.05);
  --glass-bg-hover:       rgb(60 60 70 / 0.60);
  --glass-border:         rgb(255 255 255 / 0.14);
  --glass-border-outer:   rgb(0 0 0 / 0.35);
  --glass-highlight:      inset 0 1px 0 0 rgb(255 255 255 / 0.18), inset 0 14px 24px -18px rgb(255 255 255 / 0.10),
                          inset 0 -16px 28px -20px rgb(0 0 0 / 0.45), inset 0 0 0 1px rgb(255 255 255 / 0.04);
  --glass-sheen:          linear-gradient(135deg,
                            rgb(255 255 255 / 0.10) 0%,
                            rgb(255 255 255 / 0.02) 40%,
                            rgb(255 255 255 / 0.00) 60%,
                            rgb(255 255 255 / 0.05) 100%);
  --glass-fallback:       rgb(30 30 36 / 0.97);
  --glass-rim:           linear-gradient(135deg, rgb(255 255 255 / 0.50) 0%, rgb(255 255 255 / 0.12) 22%, rgb(255 255 255 / 0) 45%, rgb(255 255 255 / 0) 62%, rgb(255 255 255 / 0.10) 85%, rgb(255 255 255 / 0.32) 100%);
  --glass-shadow:        0 0 0 1px rgb(0 0 0 / 0.40), 0 16px 40px -12px rgb(0 0 0 / 0.60), 0 2px 6px rgb(0 0 0 / 0.30);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 6px 18px -4px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 22px 48px -10px rgb(0 0 0 / 0.65);
  --shadow-primary: 0 6px 20px -4px rgb(199 42 94 / 0.55);
  --backdrop-gradient:
    radial-gradient(60vmax 60vmax at 8% 0%,   rgb(160 20 65 / 0.38), transparent 60%),
    radial-gradient(50vmax 50vmax at 100% 20%, rgb(65 44 101 / 0.55), transparent 60%),
    radial-gradient(55vmax 55vmax at 40% 110%, rgb(107 14 43 / 0.45), transparent 60%),
    linear-gradient(180deg, #121217 0%, #0b0b0e 100%);
}

/* Barrierefreiheit: weniger Transparenz / Bewegung respektieren */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-bg: var(--glass-fallback);
    --glass-bg-strong: var(--glass-fallback);
    --glass-blur: 0px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}

/* Dichte-Variante für datenlastige Ansichten */
[data-density="compact"] {
  --control-height: 34px;
  --control-height-sm: 28px;
  --text-base: 0.875rem;
}