/* glas.css · Liquid-Glass-Stil (Standard, umschaltbar per shared/stil.js).
 * Alles unter html[data-style="glass"] und nur fuer den Bildschirm: Klassisch und Druck bleiben unveraendert.
 * Ebenen: 1 Karten/Listen (Blur 14) < 2 Kopf-/Tab-Leisten (28) < 3 Sheets/Dialoge/Popover (40).
 * Fallback (kein backdrop-filter, „Transparenz reduzieren“): alle Ebenen deckend, kein Blur – nur Variablen.
 */

/* Schalter Glas/Klassisch (in beiden Stilen sichtbar; Optik von .segment aus app.css) */
.stil-schalter { flex: 0 0 auto; min-width: 176px; }
.stil-schalter button { padding: 0 12px; }
.stil-gruppe .reihe { padding-top: 8px; padding-bottom: 8px; }

@media screen {

  /* ============================================================ Variablen hell */
  html[data-style="glass"] {
    /* Flaechen je Ebene (deckende Gegenstuecke fuer den Fallback) */
    --g-flaeche-1: rgba(255, 255, 255, 0.56);
    --g-flaeche-2: rgba(251, 249, 246, 0.80);
    --g-flaeche-3: rgba(249, 247, 244, 0.93);  /* >= 0.92: Text dahinter auch ohne Blur unlesbar */
    --g-deckend-1: #FCFBF9;
    --g-deckend-2: #F8F6F2;
    --g-deckend-3: #F6F4F0;
    --g-blur-1: blur(14px) saturate(180%);
    --g-blur-2: blur(28px) saturate(180%);
    --g-blur-3: blur(40px) saturate(180%);
    /* Flaechenverlauf diagonal, Kante als Lichtverlauf (oben links hell, unten rechts Gegenreflex) */
    --g-verlauf: linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.10) 48%, rgba(255, 255, 255, 0.04) 70%, rgba(255, 255, 255, 0.20) 100%);
    --g-kante: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.55) 22%, rgba(255, 255, 255, 0.10) 52%, rgba(255, 255, 255, 0.04) 74%, rgba(255, 255, 255, 0.60) 100%);
    --g-kante-schatten: inset 1px 1px 0 rgba(255, 255, 255, 0.85), inset -1px -1px 0 rgba(255, 255, 255, 0.30);
    --g-schatten: 0 1px 2px rgba(60, 40, 20, 0.05), 0 10px 30px rgba(50, 50, 90, 0.10);
    --g-schatten-leiste: 0 1px 2px rgba(0, 0, 0, 0.05), 0 12px 36px rgba(40, 40, 80, 0.16);
    --g-schatten-hoch: 0 24px 70px rgba(30, 30, 70, 0.26), 0 2px 8px rgba(0, 0, 0, 0.06);
    --g-feld: rgba(255, 255, 255, 0.50);
    --g-feld-an: rgba(255, 255, 255, 0.94);
    --g-spur: #E3DFE7;          /* deckend: Fortschritts-Spuren, Kalenderzellen */
    --g-zelle: #FFFFFF;         /* deckend: Terminbloecke */
    --g-toast: rgba(28, 28, 38, 0.92);
    --g-toast-deckend: #26262F;
    --akzent-voll: #0058BD;     /* Flaeche mit weisser Schrift */
    --rot-voll: #C4001A;
    --gruen-voll: #1E7B34;
    /* Toenungen (Schicht ueber der Glasflaeche, ohne color-mix) */
    --g-tint-rot: rgba(196, 0, 26, 0.09);
    --g-tint-orange: rgba(255, 149, 0, 0.14);
    --g-tint-akzent: rgba(0, 88, 189, 0.10);
    --g-tint-gruen: rgba(23, 112, 46, 0.12);
    --g-farbfeld:
      radial-gradient(46% 38% at 8% 6%, rgba(255, 159, 10, 0.26), transparent 72%),
      radial-gradient(44% 36% at 94% 10%, rgba(10, 132, 255, 0.22), transparent 72%),
      radial-gradient(52% 40% at 86% 58%, rgba(94, 92, 230, 0.20), transparent 72%),
      radial-gradient(46% 38% at 8% 64%, rgba(255, 55, 95, 0.18), transparent 72%),
      radial-gradient(56% 40% at 54% 104%, rgba(48, 209, 88, 0.20), transparent 72%);

    --bg: #F3EEE7;
    --karte: var(--g-flaeche-1);
    --sheet-bg: var(--g-flaeche-3);
    --text: #18181D;
    --text2: #55555C;
    --text3: #5E5E66;
    --trenner: rgba(60, 60, 90, 0.16);
    --fuell: rgba(118, 118, 140, 0.14);
    --fuell2: rgba(118, 118, 140, 0.24);
    --akzent: #0058BD;
    --akzent-weich: rgba(0, 88, 189, 0.12);
    --rot: #B5121B;
    --rot-weich: rgba(196, 0, 26, 0.10);
    --orange-text: #963200;
    --orange-weich: rgba(255, 149, 0, 0.16);
    --gruen: #17702E;
    --hubspot: #B03A12;
    --leiste: var(--g-flaeche-2);
    --tableiste: var(--g-flaeche-2);
    --schatten: var(--g-schatten);
    --schatten-hoch: var(--g-schatten-hoch);
    --backdrop: rgba(20, 20, 45, 0.20);
    --radius: 24px;
    /* Modulfarben mit Text darauf */
    --sh-ok: #17702E;
    --wr-spur: var(--g-spur);
    --uk-airbnb: #D0154F;
    --uk-booking: #003B95;
    --uk-direkt: #1E7B34;
    --uk-sonstig: #5E5E66;
    --uk-konflikt: #C4001A;
    --uk-block: rgba(118, 118, 128, 0.24);
    --g-spalte: rgba(255, 255, 255, 0.20);

    background: var(--bg);
  }

  /* ============================================================ Variablen dunkel */
  @media (prefers-color-scheme: dark) {
    html[data-style="glass"] {
      --g-flaeche-1: rgba(24, 29, 50, 0.60);
      --g-flaeche-2: rgba(16, 20, 37, 0.86);
      --g-flaeche-3: rgba(22, 26, 46, 0.93);
      --g-deckend-1: #161B2E;
      --g-deckend-2: #11152A;
      --g-deckend-3: #151A2E;
      --g-verlauf: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 48%, rgba(255, 255, 255, 0.01) 70%, rgba(255, 255, 255, 0.05) 100%);
      --g-kante: linear-gradient(135deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.20) 22%, rgba(255, 255, 255, 0.05) 52%, rgba(255, 255, 255, 0.02) 74%, rgba(255, 255, 255, 0.22) 100%);
      --g-kante-schatten: inset 1px 1px 0 rgba(255, 255, 255, 0.22), inset -1px -1px 0 rgba(255, 255, 255, 0.07);
      --g-schatten: 0 1px 2px rgba(0, 0, 0, 0.30), 0 10px 30px rgba(0, 0, 0, 0.35);
      --g-schatten-leiste: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 36px rgba(0, 0, 0, 0.5);
      --g-schatten-hoch: 0 24px 70px rgba(0, 0, 0, 0.6);
      --g-feld: rgba(255, 255, 255, 0.07);
      --g-feld-an: rgba(255, 255, 255, 0.11);
      --g-spur: #2A3049;
      --g-zelle: #1F2540;
      --g-toast: rgba(52, 58, 84, 0.92);
      --g-toast-deckend: #343A54;
      --akzent-voll: #0A6CDB;
      --rot-voll: #C4001A;
      --gruen-voll: #1E7B34;
      --g-tint-rot: rgba(255, 140, 132, 0.10);
      --g-tint-orange: rgba(255, 159, 10, 0.13);
      --g-tint-akzent: rgba(108, 184, 255, 0.10);
      --g-tint-gruen: rgba(61, 220, 104, 0.12);
      --g-farbfeld:
        radial-gradient(46% 38% at 8% 6%, rgba(255, 159, 10, 0.16), transparent 72%),
        radial-gradient(44% 36% at 94% 10%, rgba(10, 132, 255, 0.24), transparent 72%),
        radial-gradient(52% 40% at 84% 58%, rgba(94, 92, 230, 0.26), transparent 72%),
        radial-gradient(46% 38% at 10% 66%, rgba(255, 55, 95, 0.16), transparent 72%),
        radial-gradient(56% 40% at 54% 104%, rgba(48, 209, 88, 0.12), transparent 72%);

      --bg: #070B1A;
      --text: #F4F5F8;
      --text2: #BABAC4;
      --text3: #B0B0BA;
      --trenner: rgba(150, 160, 200, 0.20);
      --fuell: rgba(150, 156, 190, 0.13);
      --fuell2: rgba(150, 156, 190, 0.26);
      --akzent: #6CB8FF;
      --akzent-weich: rgba(94, 176, 255, 0.13);
      --rot: #FF8C84;
      --rot-weich: rgba(255, 90, 80, 0.13);
      --orange: #FF9F0A;
      --orange-text: #FFA733;
      --orange-weich: rgba(255, 159, 10, 0.16);
      --gruen: #3DDC68;
      --hubspot: #FF8A6A;
      --backdrop: rgba(0, 0, 10, 0.45);
      --sh-ok: #3DDC68;
      --sh-fh: #E07A4F;
      --wr-recaro: #BF5AF2;
      /* Vermietung: Balken hell genug fuer >= 3:1 zur Zelle, Schrift darauf dunkel */
      --uk-airbnb: #FF6B93;
      --uk-booking: #6FA8FF;
      --uk-direkt: #45D46E;
      --uk-konflikt: #FF6B6B;
      --uk-sonstig: #A0A0AA;
      --uk-text-auf-farbe: #0B0F1E;
      --uk-block: rgba(142, 142, 147, 0.30);
      --g-spalte: rgba(255, 255, 255, 0.05);
    }
  }

  /* ============================================================ Grund: Farbfeld hinter allem */
  html[data-style="glass"] body {
    background: transparent;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  html[data-style="glass"] body::before {
    content: "";
    position: fixed; left: 0; top: 0; z-index: -1;
    width: 100%; height: 100vh; height: 100lvh;
    background: var(--g-farbfeld), var(--bg);
    pointer-events: none;
  }

  /* ============================================================ Ebene 1: Karten und Listen-Container */
  html[data-style="glass"] :is(.karte, .ck-karte, .ck-zahl, .hub-kachel, .sh-pk, .banner, .feldgruppe) {
    position: relative;
    background-color: var(--karte);
    background-image: var(--g-verlauf);
    -webkit-backdrop-filter: var(--g-blur-1);
    backdrop-filter: var(--g-blur-1);
    /* box-shadow bleibt bei den Klassik-Regeln (var(--schatten) ist hier der Glasschatten), so bleiben z. B. Ampel-Insets erhalten */
  }
  /* Spiegelkante: Verlaufsrahmen per Maske */
  html[data-style="glass"] :is(.karte, .ck-karte, .ck-zahl, .hub-kachel, .sh-pk, .banner, .feldgruppe,
    .tabs, .sheet, .sh-dialog, .uk-dialog, .fu-segment, .wr-reiter, .tr-filter, .sh-segment, .zi-segment)::before {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    border-radius: inherit;
    padding: 1px;
    background: var(--g-kante);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
  }
  /* verschachtelt: kein zweiter Blur, nur Toenung */
  html[data-style="glass"] :is(.ck-karte, .karte, .sheet, dialog) :is(.ck-karte, .karte, .ck-zahl) {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background-color: var(--g-feld); background-image: none; box-shadow: none;
  }
  /* Zeilen in Karten durchsichtig: geblurrt wird nur der Container */
  html[data-style="glass"] :is(.zeile, .hut-kopf, .unterkopf, .neu-zeile) { background: transparent; }
  /* Tipp-Rueckmeldung wie Klassik (Glasregeln ueberstimmen sonst :active) */
  html[data-style="glass"] .neu-zeile:active { background: var(--fuell); }
  /* Ueberfaellig: Markierung als Innenkapsel statt Kantenstrich */
  html[data-style="glass"] .zeile.ueberfaellig { box-shadow: none; }
  html[data-style="glass"] .zeile.ueberfaellig::after {
    content: ""; position: absolute; left: 6px; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--rot);
    pointer-events: none;
  }
  html[data-style="glass"] :is(.ck-warn-mehr, .be-chip-zahl) { opacity: 1; }
  html[data-style="glass"] .hut-kopf::before { left: 6px; top: 16px; bottom: 16px; width: 4px; border-radius: 2px; }
  /* Hinweisleisten: getoentes Glas, deutlich deckender als die Toenung allein */
  html[data-style="glass"] :is(.ck-warn, .offline, .ck-offline, .uk-abrufwarnung, .be-banner, .sheet-hinweis) { background-color: var(--g-flaeche-2); }
  html[data-style="glass"] .ck-warn-fehler { background-image: linear-gradient(var(--g-tint-rot), var(--g-tint-rot)); }
  html[data-style="glass"] :is(.ck-warn-warnung, .offline, .ck-offline, .uk-abrufwarnung, .be-banner-orange, .sheet-hinweis) { background-image: linear-gradient(var(--g-tint-orange), var(--g-tint-orange)); }
  html[data-style="glass"] .be-banner { background-image: linear-gradient(var(--g-tint-akzent), var(--g-tint-akzent)); }
  html[data-style="glass"] .be-banner.be-banner-gruen { background-image: linear-gradient(var(--g-tint-gruen), var(--g-tint-gruen)); }
  html[data-style="glass"] .be-banner.be-banner-orange { background-image: linear-gradient(var(--g-tint-orange), var(--g-tint-orange)); }
  html[data-style="glass"] :is(.ck-warn, .offline, .ck-offline, .uk-abrufwarnung, .be-banner) {
    -webkit-backdrop-filter: var(--g-blur-1); backdrop-filter: var(--g-blur-1);
    box-shadow: var(--g-kante-schatten);
  }
  /* Hut-Schrift auf Hut-Toenung: Richtung Textfarbe gemischt */
  html[data-style="glass"] .tr-hut { color: var(--text); }
  @supports (color: color-mix(in srgb, red 50%, blue)) {
    html[data-style="glass"] .tr-hut { color: color-mix(in srgb, var(--hut-farbe) 40%, var(--text)); }
  }
  html[data-style="glass"] .uk-balken.uk-blockiert { color: var(--text); }
  html[data-style="glass"] .uk-pille-kanal { color: var(--uk-text-auf-farbe); }
  html[data-style="glass"] :is(.hub-kachel, .sh-pk) { border-radius: var(--radius); }
  html[data-style="glass"] .hub-kachel { min-height: 118px; padding: 16px; }
  html[data-style="glass"] .hub-kacheln { gap: 12px; }
  html[data-style="glass"] .ck-zahlen { gap: 12px; }
  html[data-style="glass"] .ck-karte + .ck-karte { margin-top: 12px; }

  /* getoente Karten (Warnung/Fehler) behalten ihre Farbe ueber dem Glas */
  html[data-style="glass"] :is(.tr-lauf-fehler, .uk-zahl-rot, .tr-lauf-warnung, .un-veraltet) { background-color: var(--karte); }
  html[data-style="glass"] :is(.tr-lauf-fehler, .uk-zahl-rot) { background-image: linear-gradient(var(--g-tint-rot), var(--g-tint-rot)), var(--g-verlauf); }
  html[data-style="glass"] :is(.tr-lauf-warnung, .un-veraltet) { background-image: linear-gradient(var(--g-tint-orange), var(--g-tint-orange)), var(--g-verlauf); }
  html[data-style="glass"] .uk-csv-liste { background-color: var(--g-feld); }
  html[data-style="glass"] .uk-konflikte { background: var(--rot-voll); border-radius: var(--radius); box-shadow: var(--schatten); }

  /* Pipeline-Spalten (Desktop): leichte Toenung, Karten darin sind das Glas */
  @media (min-width: 1100px) {
    html[data-style="glass"] .sh-spalte, html[data-style="glass"] .sh-spalte-leer {
      position: relative; background: var(--g-spalte); border-radius: 28px; padding: 10px;
    }
    /* Ring nur hier: darunter ist die Spalte static */
    html[data-style="glass"] .sh-spalte::before {
      content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1px;
      background: var(--g-kante);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
      pointer-events: none;
    }
  }

  /* ============================================================ Ebene 2: Kopf-, Tab- und Segmentleisten */
  html[data-style="glass"] .kopf-leiste.kompakt {
    background-color: var(--g-flaeche-2);
    background-image: var(--g-verlauf);
    -webkit-backdrop-filter: var(--g-blur-2);
    backdrop-filter: var(--g-blur-2);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.35), 0 0.5px 0 var(--trenner), 0 8px 24px rgba(40, 40, 80, 0.08);
  }

  /* Tab-Leiste schwebend als Kapsel */
  html[data-style="glass"] {
    --g-tab-unten: max(10px, calc(var(--unten) - 4px));
    --g-tab-hoehe: calc(var(--tabhoehe) + 8px);
  }
  html[data-style="glass"] .tabs {
    left: calc(14px + var(--links)); right: calc(14px + var(--rechts));
    bottom: var(--g-tab-unten);
    max-width: 440px; margin: 0 auto;
    height: var(--g-tab-hoehe);
    padding: 0 6px;
    border-radius: 34px;
    background-color: var(--g-flaeche-2);
    background-image: var(--g-verlauf);
    -webkit-backdrop-filter: var(--g-blur-2);
    backdrop-filter: var(--g-blur-2);
    box-shadow: var(--g-schatten-leiste);
  }
  html[data-style="glass"] .tab { color: var(--text3); border-radius: 28px; }
  html[data-style="glass"] .tab.aktiv { color: var(--akzent); }
  html[data-style="glass"] .tab.aktiv::before {
    content: ""; position: absolute; inset: 6px 2px; z-index: -1; border-radius: 26px;
    background: var(--g-feld-an); box-shadow: var(--g-kante-schatten), 0 1px 4px rgba(0, 0, 0, 0.06);
  }
  html[data-style="glass"] .fab {
    bottom: calc(var(--g-tab-unten) + var(--g-tab-hoehe) + 14px);
    background: var(--akzent-voll);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.45), inset -1px -1px 0 rgba(255, 255, 255, 0.12), 0 8px 22px rgba(0, 70, 160, 0.35);
  }
  html[data-style="glass"] .toast { bottom: calc(var(--g-tab-unten) + var(--g-tab-hoehe) + 12px + var(--kb)); }

  /* Segmentleisten der Module */
  html[data-style="glass"] :is(.fu-segment, .wr-reiter, .tr-filter, .sh-segment, .zi-segment) {
    position: relative;
    padding: 4px;
    border-radius: 22px;
    background-color: var(--g-flaeche-2);
    background-image: var(--g-verlauf);
    -webkit-backdrop-filter: var(--g-blur-2);
    backdrop-filter: var(--g-blur-2);
    box-shadow: var(--schatten);
  }
  html[data-style="glass"] :is(.fu-segment-knopf, .wr-reiter-knopf, .tr-filter-knopf, .sh-segment-knopf, .zi-segment button) { border-radius: 18px; }
  html[data-style="glass"] :is(.fu-segment-knopf[aria-pressed="true"], .wr-reiter-knopf.aktiv, .tr-filter-knopf[aria-pressed="true"], .sh-segment-knopf.aktiv, .zi-segment button[aria-pressed="true"], .segment button.an) {
    background: var(--g-feld-an);
    box-shadow: var(--g-kante-schatten), 0 1px 4px rgba(0, 0, 0, 0.08);
  }
  /* Segment in Sheets/Karten (ohne eigenen Blur) */
  html[data-style="glass"] .segment { border-radius: 14px; padding: 3px; background: var(--fuell); }
  html[data-style="glass"] .segment button { border-radius: 11px; }

  /* ============================================================ Ebene 3: Sheets, Dialoge, Toasts, Popover */
  html[data-style="glass"] :is(.sheet, .sh-dialog, .uk-dialog) {
    background-color: var(--g-flaeche-3);
    background-image: var(--g-verlauf);
    -webkit-backdrop-filter: var(--g-blur-3);
    backdrop-filter: var(--g-blur-3);
    box-shadow: var(--g-schatten-hoch);
  }
  html[data-style="glass"] .sheet {
    left: calc(8px + var(--links)); right: calc(8px + var(--rechts));
    bottom: calc(var(--kb) + 8px);
    max-height: calc(var(--vvh) - var(--oben) - 18px);
    border-radius: 30px;
    padding-left: 0; padding-right: 0;
    transform: translateY(calc(100% + 24px));
  }
  html[data-style="glass"] .sheet-huelle.offen .sheet { transform: translateY(0); }
  html[data-style="glass"] .sheet-inhalt { padding-bottom: calc(max(var(--unten) - 8px, 0px) + 18px); }
  html[data-style="glass"] .sheet-backdrop { background: var(--backdrop); }
  @media (min-width: 640px) {
    html[data-style="glass"] .sheet { left: 50%; right: auto; width: 560px; margin-left: -280px; bottom: calc(var(--kb) + 16px); }
  }
  html[data-style="glass"] :is(.sh-dialog, .uk-dialog) { border-radius: 30px; }
  @media (max-width: 520px) {
    html[data-style="glass"] .uk-dialog { width: calc(100vw - 16px); max-width: calc(100vw - 16px); margin: auto 8px 8px; border-radius: 30px; }
  }
  html[data-style="glass"] :is(.sh-dialog, .uk-dialog)::backdrop {
    background: var(--backdrop);
  }
  /* Inhalte in Sheets: Gruppen getoent, kein eigener Blur */
  html[data-style="glass"] :is(.gruppe, .aktionen, .schnell-zeile, .link-text) {
    background: var(--g-feld);
    box-shadow: var(--g-kante-schatten);
  }
  html[data-style="glass"] :is(.gruppe, .aktionen) { border-radius: 20px; }
  html[data-style="glass"] .schnell-zeile { border-radius: 24px; }
  html[data-style="glass"] .sheet :is(.karte, .gruppe) { background: var(--g-feld); }
  html[data-style="glass"] .uk-dialog-inhalt .ck-feld :is(input, select, textarea) { background: var(--g-feld); }

  html[data-style="glass"] :is(.toast, .ck-toast) {
    background-color: var(--g-toast);
    -webkit-backdrop-filter: var(--g-blur-3);
    backdrop-filter: var(--g-blur-3);
    border-radius: 22px;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.22), inset -1px -1px 0 rgba(255, 255, 255, 0.06), var(--g-schatten-hoch);
  }
  html[data-style="glass"] .toast.fehler { background-color: var(--rot-voll); }
  html[data-style="glass"] .ptr {
    background-color: var(--g-flaeche-3);
    -webkit-backdrop-filter: var(--g-blur-3);
    backdrop-filter: var(--g-blur-3);
    box-shadow: var(--g-kante-schatten), var(--g-schatten-hoch);
  }

  /* ============================================================ Bedienelemente */
  html[data-style="glass"] :is(.knopf, .ck-knopf) {
    border-radius: 999px;
    box-shadow: var(--g-kante-schatten);
  }
  html[data-style="glass"] :is(.knopf, .ck-knopf):not(:is(.knopf-primaer, .ck-knopf-primaer, .sh-knopf-gefahr)) { background-color: var(--g-feld); }
  html[data-style="glass"] .sheet :is(.knopf, .ck-knopf):not(:is(.knopf-primaer, .ck-knopf-primaer)) { background-color: var(--fuell); }
  html[data-style="glass"] :is(.knopf-primaer, .ck-knopf-primaer) {
    background: var(--akzent-voll); color: #fff;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.40), inset -1px -1px 0 rgba(255, 255, 255, 0.10), 0 4px 14px rgba(0, 70, 160, 0.22);
  }
  html[data-style="glass"] .sh-knopf-gefahr { background: var(--rot-voll); }
  html[data-style="glass"] .uk-konflikte .ck-knopf.ck-knopf { background: rgba(255, 255, 255, 0.95); color: #A3001A; box-shadow: none; }
  html[data-style="glass"] :is(.chip, .be-chip, .hut-chip, .sh-phase, .filter-hut, .hilfe-knopf, .demo-pille) { box-shadow: var(--g-kante-schatten); }
  html[data-style="glass"] :is(.chip, .be-chip, .hut-chip, .hilfe-knopf) { background-color: var(--g-feld); }
  html[data-style="glass"] .hut-chip { border-radius: 16px; }
  html[data-style="glass"] .hut-chip:active { background-color: var(--fuell2); }
  html[data-style="glass"] .sh-phase { background-color: var(--karte); }
  html[data-style="glass"] :is(.chip.an, .be-chip.an, .sh-phase.aktiv, .senden:not(:disabled)) { background-color: var(--akzent-voll); color: #fff; }
  /* Hut-Farben als Flaeche: app.js setzt --hut-flaeche/--hut-text nach Luminanz (Standard-Hüte abgedunkelt, weiss) */
  html[data-style="glass"] :is(.chip.an.hutfarbe, .filter-hut) { background-color: var(--hut-flaeche, var(--akzent-voll)); color: var(--hut-text, #fff); }
  html[data-style="glass"] :is(.zahl-rot, .tab-badge:not(.leise)) { background: var(--rot-voll); }
  html[data-style="glass"] .tab-badge.leise { background: #6E6E78; }

  html[data-style="glass"] :is(.filter-feld input, .ck-feld input, .ck-feld select, .ck-feld textarea, .be-monat-feld select, .zi-neue-aufgabe input, .zi-neue-aufgabe select, .fu-tage-feld input) {
    border-radius: 14px;
    background-color: var(--g-feld);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 0 0 0.5px var(--trenner);
  }
  html[data-style="glass"] .filter-feld input { border-radius: 999px; padding-left: 16px; }
  html[data-style="glass"] :is(input, textarea)::placeholder { color: var(--text2); opacity: 1; }
  html[data-style="glass"] .filter-feld input:focus { box-shadow: inset 0 0 0 0.5px var(--trenner), 0 0 0 3px var(--akzent-weich); }
  html[data-style="glass"] .ck-pille { box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.35); }
  html[data-style="glass"] .uk-sprung .ck-pille { background: var(--g-feld); box-shadow: var(--g-kante-schatten); }

  /* Modul-Schriftfarben mit zu wenig Kontrast auf Glas */
  html[data-style="glass"] .tr-konto-gmx { color: #136A79; }
  html[data-style="glass"] .tr-konto-tum, html[data-style="glass"] .un-pille-aufgabe { color: #4B49C8; }
  @media (prefers-color-scheme: dark) {
    html[data-style="glass"] .tr-konto-gmx { color: #64D2FF; }
    html[data-style="glass"] .tr-konto-tum, html[data-style="glass"] .un-pille-aufgabe { color: #A9A7FF; }
    html[data-style="glass"] .sheet :is(.karte, .gruppe) { background: var(--g-feld); }
  }

  /* ============================================================ Deckend bleiben: Spuren, Kalender, Termine */
  html[data-style="glass"] :is(.zi-balken, .uk-ein-spur, .sh-spalte-zahl) { background: var(--g-spur); }
  html[data-style="glass"] :is(.uk-zl-spur, .uk-raster) { --karte: var(--g-zelle); --fuell: var(--g-spur); }
  html[data-style="glass"] .uk-zeitleiste .uk-zl-hg.uk-we { background: var(--g-spur); }
  html[data-style="glass"] .uk-balken.uk-blockiert { background-color: var(--g-spur); }

  /* ============================================================ Radien innen konzentrisch */
  html[data-style="glass"] :is(.offline, .ck-offline, .ck-warn, .be-banner, .uk-abrufwarnung, .fu-entwurf, .dr-hinweis, .hinweis, .sheet-hinweis) { border-radius: 16px; }
  html[data-style="glass"] .un-tx { border-radius: 14px; }
  html[data-style="glass"] .login-icon { border-radius: 18px; }

  /* ============================================================ Fallback: deckend, kein Blur */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html[data-style="glass"] {
      --g-flaeche-1: var(--g-deckend-1);
      --g-flaeche-2: var(--g-deckend-2);
      --g-flaeche-3: var(--g-deckend-3);
      --g-toast: var(--g-toast-deckend);
      --g-blur-1: none; --g-blur-2: none; --g-blur-3: none;
    }
  }
  @media (prefers-reduced-transparency: reduce) {
    html[data-style="glass"] {
      --g-flaeche-1: var(--g-deckend-1);
      --g-flaeche-2: var(--g-deckend-2);
      --g-flaeche-3: var(--g-deckend-3);
      --g-toast: var(--g-toast-deckend);
      --g-blur-1: none; --g-blur-2: none; --g-blur-3: none;
    }
  }
}