/*
 * Stil „Frosted Glass / Contextual Glass“ (UI/UX-Designsystem 2026-10-08, Briefing §7): halbtransparente, weich mattierte
 * Kopfzeile, Menüs, Seitenleisten und Panels vor einem ruhigen Bereichsmotiv. Arbeitsflächen (Karten, Formulare, Tabellen,
 * Bühne) bleiben (fast) opak.
 *
 * MOTIVE: Bis Mirko eigene Bilder liefert (Rennfahrzeug vor heller Werkstatt, Werkstatt, Atrium-Rendering) stehen hier
 * NEUTRALE, ABSTRAKTE PLATZHALTER - weiche Lichtflächen aus den Tokens der aktiven Farben, keine Fotos, keine Marken.
 * Je Hauptkategorie (<html data-motif="arc|crew|race">, gesetzt von assets/js/alt_nav.js) ein eigener Lichtverlauf; der Wechsel
 * blendet weich über (registrierte Eigenschaften). Später je Motiv einstellbar: Beschnitt/Fokus (--gl-x/--gl-y),
 * Overlay-Stärke (--gl-k), Helligkeit - Bildpfad kommt dann als zusätzliche Ebene UNTER --gl-scrim dazu.
 *
 * LESBARKEIT (Recherche §3): Glas ist nie dünner als 80 % Grundfarbe (Schrift erfüllt 4,5:1 auch ohne Unschärfe und über
 * jedem Motivpunkt); Motivfarben höchstens 8 % (dunkel 7 %) in den Grund gemischt (so wie die Zweitfläche, gegen die palette.js alle
 * Schriftfarben absichert). Ohne backdrop-filter oder mit „Transparenz reduzieren“: opake Flächen.
 */
@property --gl-x { syntax: '<percentage>'; inherits: true; initial-value: 72%; }
@property --gl-y { syntax: '<percentage>'; inherits: true; initial-value: 26%; }
@property --gl-c1 { syntax: '<color>'; inherits: true; initial-value: #ededed; }
@property --gl-c2 { syntax: '<color>'; inherits: true; initial-value: #ededed; }

:root[data-design="glass"] {
  --gl-k: 8%;                                    /* Motivstärke (Kontrast-Audit: mehr drückt die leise Schrift unter 4,5:1) */
  --gl-c1: color-mix(in srgb, var(--c-bg) calc(100% - var(--gl-k)), var(--c-brand));
  --gl-c2: color-mix(in srgb, var(--c-bg) 95%, var(--pal-2, var(--c-ink-2)));
  --gl-x: 72%; --gl-y: 26%;
  --gl-a: 82%;                                   /* Deckkraft der Glasflächen (>= 80 %) */
  --gl-pane: color-mix(in srgb, var(--c-bg) var(--gl-a), transparent);
  --gl-pane-strong: color-mix(in srgb, var(--c-bg) 92%, transparent);
  --gl-edge: rgba(255, 255, 255, .55);
  --gl-blur: blur(16px) saturate(1.25);
  --r-sm: 12px; --r-md: 18px; --r-lg: 24px;
  --nm-light: transparent; --nm-dark: rgba(0, 0, 0, .1);
  --nm-1: inset 0 1px 0 var(--gl-edge), 0 0 0 1px color-mix(in srgb, var(--c-ink) 10%, transparent);
  --nm-2: inset 0 1px 0 var(--gl-edge), 0 0 0 1px color-mix(in srgb, var(--c-ink) 9%, transparent), 0 12px 32px -14px rgba(0, 0, 0, .22);
  --nm-3: inset 0 1px 0 var(--gl-edge), 0 0 0 1px color-mix(in srgb, var(--c-ink) 9%, transparent), 0 26px 60px -18px rgba(0, 0, 0, .3);
  --nm-in: inset 0 1px 2px rgba(0, 0, 0, .08), inset 0 0 0 1px color-mix(in srgb, var(--c-ink) 12%, transparent);
  --nm-in-deep: var(--nm-in);
  --nm-face: var(--c-bg); --nm-face-in: var(--c-surface-2);
  --nm-brand-face: var(--c-brand); --nm-brand-face-in: var(--c-brand-deep); --nm-brand-dark: transparent;
  transition: --gl-x 700ms var(--ease-calm), --gl-y 700ms var(--ease-calm), --gl-c1 700ms var(--ease-calm), --gl-c2 700ms var(--ease-calm);
}
:root[data-design="glass"][data-theme="dark"] { --gl-k: 7%; --gl-edge: rgba(255, 255, 255, .08); --nm-dark: rgba(0, 0, 0, .5);
  --nm-2: inset 0 1px 0 var(--gl-edge), 0 0 0 1px rgba(255, 255, 255, .07), 0 14px 36px -14px rgba(0, 0, 0, .6);
  --nm-3: inset 0 1px 0 var(--gl-edge), 0 0 0 1px rgba(255, 255, 255, .07), 0 26px 60px -18px rgba(0, 0, 0, .7); }
/* Platzhalter-Motive je Hauptkategorie: nur Lage und Farbe des Lichts ändern sich */
:root[data-design="glass"][data-motif="crew"] { --gl-x: 22%; --gl-y: 78%; --gl-c2: color-mix(in srgb, var(--c-bg) 95%, var(--pal-3, var(--c-accent))); }
:root[data-design="glass"][data-motif="race"] { --gl-x: 64%; --gl-y: 82%; --gl-c1: color-mix(in srgb, var(--c-bg) calc(100% - var(--gl-k)), var(--pal-2, var(--c-brand))); --gl-c2: color-mix(in srgb, var(--c-bg) 95%, var(--c-brand)); }
:root[data-design="glass"] body {
  background: radial-gradient(ellipse 70% 60% at var(--gl-x) var(--gl-y), var(--gl-c1) 0%, var(--gl-c2) 48%, var(--c-bg) 100%) fixed var(--c-bg);
}
/* Glasflächen: Kopfzeile, Menüs/Fenster, Seitenleisten der Module, Arc-Panel, Startseiten */
:root[data-design="glass"] .app-header,
:root[data-design="glass"] .pop-panel,
:root[data-design="glass"] .arc-panel,
:root[data-design="glass"] .og-nav, :root[data-design="glass"] .pl-nav, :root[data-design="glass"] .admin-side,
:root[data-design="glass"] .mos-tile, :root[data-design="glass"] .ws-home, :root[data-design="glass"] .cube-flat--bottom:not(.is-measure) {
  background: var(--gl-pane); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
}
:root[data-design="glass"] .app-header { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--c-ink) 8%, transparent); }
/* Arbeitsflächen bleiben opak (Briefing: lange Tabellen/Formulare schützen) */
:root[data-design="glass"] .card, :root[data-design="glass"] .stage, :root[data-design="glass"] table, :root[data-design="glass"] .ws-card,
:root[data-design="glass"] input, :root[data-design="glass"] select, :root[data-design="glass"] textarea { background-color: var(--gl-pane-strong); }
:root[data-design="glass"] .ws-card { background: var(--gl-pane-strong); }
/* Ohne backdrop-filter oder mit reduzierter Transparenz: opake Flächen, gleiche Optik */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-design="glass"] { --gl-pane: color-mix(in srgb, var(--c-bg) 96%, transparent); }
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-design="glass"] { --gl-pane: var(--c-bg); --gl-pane-strong: var(--c-bg); --gl-blur: none; }
}
@media (prefers-reduced-motion: reduce) { :root[data-design="glass"] { transition: none; } }