/* Glas-Design (Apple-Look). Greift nur mit data-glass="on" am <html>, gesetzt von glass.js. Gilt für die App und den Plattform-Admin. */
:root[data-glass="on"]{
  --g-bg:rgba(255,255,255,.52);--g-bg2:rgba(255,255,255,.38);--g-solid:rgba(255,255,255,.95);
  --g-edge:rgba(255,255,255,.75);--g-line:rgba(20,32,46,.10);--g-shadow:0 8px 28px rgba(20,32,46,.08);
  --g-blur:blur(22px) saturate(170%);--g-r:16px;
  --g-backdrop:radial-gradient(55% 45% at 12% 18%,#a7dcc8 0,transparent 62%),radial-gradient(45% 45% at 88% 12%,#bfcdf6 0,transparent 62%),radial-gradient(55% 55% at 72% 92%,#f4d6b6 0,transparent 62%),linear-gradient(135deg,#e9eff3,#f5f0ea);
}
@media (prefers-color-scheme: dark){:root[data-glass="on"]:not([data-theme="light"]){
  --g-bg:rgba(28,36,48,.50);--g-bg2:rgba(40,50,64,.40);--g-solid:rgba(22,28,38,.88);
  --g-edge:rgba(255,255,255,.13);--g-line:rgba(255,255,255,.09);--g-shadow:0 8px 28px rgba(0,0,0,.35);
  --g-backdrop:radial-gradient(55% 45% at 12% 18%,#0f5a46 0,transparent 62%),radial-gradient(45% 45% at 88% 12%,#283a86 0,transparent 62%),radial-gradient(55% 55% at 72% 92%,#64391a 0,transparent 62%),linear-gradient(135deg,#0a0f16,#121822);
}}
:root[data-glass="on"][data-theme="dark"]{
  --g-bg:rgba(28,36,48,.50);--g-bg2:rgba(40,50,64,.40);--g-solid:rgba(22,28,38,.88);
  --g-edge:rgba(255,255,255,.13);--g-line:rgba(255,255,255,.09);--g-shadow:0 8px 28px rgba(0,0,0,.35);
  --g-backdrop:radial-gradient(55% 45% at 12% 18%,#0f5a46 0,transparent 62%),radial-gradient(45% 45% at 88% 12%,#283a86 0,transparent 62%),radial-gradient(55% 55% at 72% 92%,#64391a 0,transparent 62%),linear-gradient(135deg,#0a0f16,#121822);
}
/* Weitere Hintergründe (Auswahl im Profil) */
:root[data-glass-bg="ocean"]{--g-backdrop:radial-gradient(55% 45% at 12% 18%,#9fd8f0 0,transparent 62%),radial-gradient(45% 45% at 88% 12%,#a9b8f5 0,transparent 62%),radial-gradient(55% 55% at 72% 92%,#9fe3d6 0,transparent 62%),linear-gradient(135deg,#e6f0f6,#eef2f8)}
:root[data-glass-bg="sunset"]{--g-backdrop:radial-gradient(55% 45% at 12% 18%,#f9c5a8 0,transparent 62%),radial-gradient(45% 45% at 88% 12%,#f6b3c8 0,transparent 62%),radial-gradient(55% 55% at 72% 92%,#fbe1a0 0,transparent 62%),linear-gradient(135deg,#f8eee8,#f7efe6)}
:root[data-glass-bg="lavender"]{--g-backdrop:radial-gradient(55% 45% at 12% 18%,#d3c2f3 0,transparent 62%),radial-gradient(45% 45% at 88% 12%,#f2c4e4 0,transparent 62%),radial-gradient(55% 55% at 72% 92%,#bcd0f6 0,transparent 62%),linear-gradient(135deg,#f0ecf7,#f3eef6)}
:root[data-glass-bg="graphite"]{--g-backdrop:radial-gradient(55% 45% at 12% 18%,#cfd5dc 0,transparent 62%),radial-gradient(45% 45% at 88% 12%,#dfe3e8 0,transparent 62%),radial-gradient(55% 55% at 72% 92%,#c6ccd4 0,transparent 62%),linear-gradient(135deg,#eceef1,#f2f3f5)}
@media (prefers-color-scheme: dark){
  :root[data-glass-bg="ocean"]:not([data-theme="light"]){--g-backdrop:radial-gradient(55% 45% at 12% 18%,#0b4f6e 0,transparent 62%),radial-gradient(45% 45% at 88% 12%,#23307a 0,transparent 62%),radial-gradient(55% 55% at 72% 92%,#0d5a50 0,transparent 62%),linear-gradient(135deg,#081018,#0e1622)}
  :root[data-glass-bg="sunset"]:not([data-theme="light"]){--g-backdrop:radial-gradient(55% 45% at 12% 18%,#6e2f1a 0,transparent 62%),radial-gradient(45% 45% at 88% 12%,#6a1d3e 0,transparent 62%),radial-gradient(55% 55% at 72% 92%,#6a4a12 0,transparent 62%),linear-gradient(135deg,#140c0c,#1a1210)}
  :root[data-glass-bg="lavender"]:not([data-theme="light"]){--g-backdrop:radial-gradient(55% 45% at 12% 18%,#3f2a7a 0,transparent 62%),radial-gradient(45% 45% at 88% 12%,#6a2357 0,transparent 62%),radial-gradient(55% 55% at 72% 92%,#1f3a7a 0,transparent 62%),linear-gradient(135deg,#0f0c18,#141020)}
  :root[data-glass-bg="graphite"]:not([data-theme="light"]){--g-backdrop:radial-gradient(55% 45% at 12% 18%,#2a3038 0,transparent 62%),radial-gradient(45% 45% at 88% 12%,#363c46 0,transparent 62%),radial-gradient(55% 55% at 72% 92%,#22272e 0,transparent 62%),linear-gradient(135deg,#0c0e11,#121418)}
}
:root[data-glass-bg="ocean"][data-theme="dark"]{--g-backdrop:radial-gradient(55% 45% at 12% 18%,#0b4f6e 0,transparent 62%),radial-gradient(45% 45% at 88% 12%,#23307a 0,transparent 62%),radial-gradient(55% 55% at 72% 92%,#0d5a50 0,transparent 62%),linear-gradient(135deg,#081018,#0e1622)}
:root[data-glass-bg="sunset"][data-theme="dark"]{--g-backdrop:radial-gradient(55% 45% at 12% 18%,#6e2f1a 0,transparent 62%),radial-gradient(45% 45% at 88% 12%,#6a1d3e 0,transparent 62%),radial-gradient(55% 55% at 72% 92%,#6a4a12 0,transparent 62%),linear-gradient(135deg,#140c0c,#1a1210)}
:root[data-glass-bg="lavender"][data-theme="dark"]{--g-backdrop:radial-gradient(55% 45% at 12% 18%,#3f2a7a 0,transparent 62%),radial-gradient(45% 45% at 88% 12%,#6a2357 0,transparent 62%),radial-gradient(55% 55% at 72% 92%,#1f3a7a 0,transparent 62%),linear-gradient(135deg,#0f0c18,#141020)}
:root[data-glass-bg="graphite"][data-theme="dark"]{--g-backdrop:radial-gradient(55% 45% at 12% 18%,#2a3038 0,transparent 62%),radial-gradient(45% 45% at 88% 12%,#363c46 0,transparent 62%),radial-gradient(55% 55% at 72% 92%,#22272e 0,transparent 62%),linear-gradient(135deg,#0c0e11,#121418)}

/* Leichte Variante: keine Unschärfe, dafür deckender, damit Text lesbar bleibt */
:root[data-glass="on"][data-glass-lite]{--g-blur:none;--g-bg:color-mix(in srgb,var(--surface) 88%,transparent);--g-bg2:color-mix(in srgb,var(--surface) 75%,transparent);--g-solid:var(--surface)}

/* Hintergrund: feste Ebene statt background-attachment:fixed (ruckelt auf iOS) */
:root[data-glass="on"]{background:var(--bg)}
:root[data-glass="on"] body{background:transparent}
:root[data-glass="on"] body::after{content:"";position:fixed;inset:0;z-index:-1;background:var(--g-backdrop);pointer-events:none}
/* body::before ist in der App der Streifen hinter der iPhone-Statusleiste: als Glas statt deckend */
:root[data-glass="on"] body::before{background:var(--g-bg);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}

/* Flächen mit Glas */
:root[data-glass="on"] :is(.side,.top,body>header,.card:not(.crit),.panel,.kpi,.fs,.vcard){
  background:var(--g-bg);border-color:var(--g-edge);box-shadow:inset 0 1px 0 var(--g-edge),var(--g-shadow);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
}
:root[data-glass="on"] :is(.card,.panel,.kpi,.fs,.vcard){border-radius:var(--g-r)}
:root[data-glass="on"] .side{border-right:1px solid var(--g-edge)}
:root[data-glass="on"] :is(.top,body>header){border-bottom:1px solid var(--g-edge)}

/* Fenster: deckender, damit Formulare gut lesbar sind */
:root[data-glass="on"] .modal{background:var(--g-solid);border:1px solid var(--g-edge);border-radius:20px;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
:root[data-glass="on"]:not([data-glass-lite]) .ov{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* Knöpfe, Chips, Eingabefelder */
:root[data-glass="on"] :is(.btn:not(.pri),.chip,.seg){background:var(--g-bg2);border-color:var(--g-edge)}
:root[data-glass="on"] .btn{border-radius:12px}
:root[data-glass="on"] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){background:var(--g-bg2);border-color:var(--g-line)}
:root[data-glass="on"] :is(th,td){border-color:var(--g-line)}
:root[data-glass="on"] .toast,:root[data-glass="on"] #toast{border-radius:14px}

/* Trennlinien überall dezenter (höhere Spezifität als die Theme-Regeln im Seiten-CSS) */
html:root[data-glass="on"]{--line:var(--g-line)}

/* Schritt 2: Navigation und Startseite */
:root[data-glass="on"] .nav{border-radius:12px;border-left-color:transparent}
:root[data-glass="on"] .nav:hover{background:var(--g-bg2)}
:root[data-glass="on"] .nav.on{background:var(--g-bg2);color:var(--accent);font-weight:700;box-shadow:inset 0 0 0 1px var(--g-edge)}
:root[data-glass="on"] .nav .cnt{background:var(--g-bg2)}
:root[data-glass="on"] .search input{background:var(--g-bg2);border-color:var(--g-edge)}
:root[data-glass="on"] .search input:focus{border-color:var(--accent)}
:root[data-glass="on"] .menu-btn:active,:root[data-glass="on"] .menu-x:active{background:var(--g-bg2)}
@media (min-width:861px){
  :root[data-glass="on"] .side{margin:12px 0 12px 12px;height:calc(100vh - 24px);top:12px;border:1px solid var(--g-edge);border-radius:20px}
  /* Obere Leiste schwebt wie die Seitenleiste (gleicher Abstand oben, runde Ecken), statt als Band an ihr zu kleben */
  :root[data-glass="on"] .top{margin:12px 12px 0 12px;top:12px;border:1px solid var(--g-edge);border-radius:20px}
}
@media (max-width:860px){
  /* Schublade: deckender, damit das Menü über dem Inhalt gut lesbar bleibt */
  :root[data-glass="on"] .side{background:var(--g-solid);border-radius:0 20px 20px 0}
  :root[data-glass="on"] .top{box-shadow:none}
}

/* Eingeklappte Seitenleiste: Namensschild als Glas */
:root[data-glass="on"] .side-tip{background:var(--g-solid);color:var(--fg);border:1px solid var(--g-edge);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
:root[data-glass="on"] .side-tip .cnt{background:var(--g-bg2)}
:root[data-glass="on"] .mini-t:hover{background:var(--g-bg2)}

/* Schritt 3: Anfragen (Listen, Teamübersicht, Archiv, Detail) */
:root[data-glass="on"] :is(.team-box,.empty){background:var(--g-bg);border-color:var(--g-edge);border-radius:var(--g-r);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:var(--g-shadow)}
:root[data-glass="on"] .empty{border-style:dashed}
:root[data-glass="on"] .team-row:hover{background:var(--g-bg2)}
:root[data-glass="on"] .lamp{box-shadow:0 0 0 3px var(--g-bg2)}
:root[data-glass="on"] :is(.margin div,.opt){background:var(--g-bg2)}
:root[data-glass="on"] .opt{border-color:var(--g-edge);border-radius:12px}
:root[data-glass="on"] .opt:has(input:checked){border-color:var(--accent)}
/* Glas in Glas vermeiden: Karten innerhalb von Bereichen ohne eigene Unschärfe (Leistung) */
:root[data-glass="on"] :is(.panel,.team-box,.modal,.fs) :is(.card,.kpi,.vcard,.fs){-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--g-bg2);box-shadow:none}


/* Firmen-Menü unten rechts (aus vendrigo-backend.js, dort mit ID-Regeln) */
:root[data-glass="on"] #vd-menu>button{background:var(--g-bg);border-color:var(--g-edge);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
:root[data-glass="on"] #vd-menu .pop{background:var(--g-solid);border-color:var(--g-edge);border-radius:16px;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
:root[data-glass="on"] #vd-menu .pop button{background:var(--g-bg2);border-color:var(--g-edge)}

/* Schritt 4: Fenster, Seitenschubladen, Formulare */
:root[data-glass="on"] .drawer{background:var(--g-solid);border-left:1px solid var(--g-edge);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
:root[data-glass="on"] :is(.fld input,.fld select,.fld textarea,.iin,.inp,.cmtf textarea){background:var(--g-bg2);border-color:var(--g-edge)}
:root[data-glass="on"] .modal :is(.fld input,.fld select,.fld textarea,.iin){background:color-mix(in srgb,var(--surface) 70%,transparent)}
:root[data-glass="on"] :is(.fld input,.fld select,.fld textarea,.iin,.inp):focus{border-color:var(--accent)}
:root[data-glass="on"] .cmt .b{background:var(--g-bg2)}

/* Schritt 5: Kunden, Kalender, Aufgaben, Lizenzen */
:root[data-glass="on"] .cal{background:var(--g-bg);border-color:var(--g-edge);border-radius:var(--g-r);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
:root[data-glass="on"] .cal .dh{background:var(--g-bg2)}
:root[data-glass="on"] .cal .d.out{background:transparent;opacity:.6}
:root[data-glass="on"] .tchk{background:var(--g-bg2)}
:root[data-glass="on"] :is(.lic-card,.lic-pair){background:var(--g-bg);border-top-color:var(--g-edge);border-right-color:var(--g-edge);border-bottom-color:var(--g-edge);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
:root[data-glass="on"] .lic-side{background:var(--g-bg2)}

/* Schritt 6: Bestand, Vermietung, Fahrtenbuch, Importe */
:root[data-glass="on"] :is(.thumb,.cthumb){background:var(--g-bg2)}
:root[data-glass="on"] .cand{background:var(--g-bg2);border-color:var(--g-edge);border-radius:12px}

/* Schritt 7: Buchhaltung, Statistik, Benutzer: Tabellen in Glas-Rahmen, Zeilen bleiben ruhig für die Lesbarkeit */
:root[data-glass="on"] .tbl-wrap{background:var(--g-bg);border:1px solid var(--g-edge);border-radius:var(--g-r);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
:root[data-glass="on"] :is(.panel,.card,.modal) .tbl-wrap{background:transparent;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-glass="on"] tbody tr:hover td{background:var(--g-bg2)}

/* Eigene Gestaltung: Akzentfarbe (gilt auch ohne Glas). html:root schlägt die Theme-Regeln im Seiten-CSS */
html:root[data-accent="blue"]{--accent:#1f4fa3;--accent-fg:#fff;--accent-soft:#e3ebf8}
@media (prefers-color-scheme: dark){html:root[data-accent="blue"]:not([data-theme="light"]){--accent:#6f9cf0;--accent-fg:#0b1220;--accent-soft:#1c2a44}}
html:root[data-accent="blue"][data-theme="dark"]{--accent:#6f9cf0;--accent-fg:#0b1220;--accent-soft:#1c2a44}
html:root[data-accent="bordeaux"]{--accent:#8e1f3a;--accent-fg:#fff;--accent-soft:#f7e6ea}
@media (prefers-color-scheme: dark){html:root[data-accent="bordeaux"]:not([data-theme="light"]){--accent:#e6738f;--accent-fg:#0b1220;--accent-soft:#3a1820}}
html:root[data-accent="bordeaux"][data-theme="dark"]{--accent:#e6738f;--accent-fg:#0b1220;--accent-soft:#3a1820}
html:root[data-accent="orange"]{--accent:#c2560c;--accent-fg:#fff;--accent-soft:#fdeee2}
@media (prefers-color-scheme: dark){html:root[data-accent="orange"]:not([data-theme="light"]){--accent:#f39a55;--accent-fg:#0b1220;--accent-soft:#3a2412}}
html:root[data-accent="orange"][data-theme="dark"]{--accent:#f39a55;--accent-fg:#0b1220;--accent-soft:#3a2412}
html:root[data-accent="violet"]{--accent:#5b3fb5;--accent-fg:#fff;--accent-soft:#ece7f9}
@media (prefers-color-scheme: dark){html:root[data-accent="violet"]:not([data-theme="light"]){--accent:#a38cf0;--accent-fg:#0b1220;--accent-soft:#261d44}}
html:root[data-accent="violet"][data-theme="dark"]{--accent:#a38cf0;--accent-fg:#0b1220;--accent-soft:#261d44}
html:root[data-accent="black"]{--accent:#16181c;--accent-fg:#fff;--accent-soft:#ececee}
@media (prefers-color-scheme: dark){html:root[data-accent="black"]:not([data-theme="light"]){--accent:#e8eaed;--accent-fg:#111;--accent-soft:#2a2d33}}
html:root[data-accent="black"][data-theme="dark"]{--accent:#e8eaed;--accent-fg:#111;--accent-soft:#2a2d33}
/* Ecken */
html:root[data-radius="square"]{--r:2px;--g-r:4px}
html:root[data-radius="square"] :is(.btn,.modal,.nav,.chip,input,select,textarea,.search input){border-radius:4px!important}
html:root[data-radius="round"]{--r:16px;--g-r:22px}
html:root[data-radius="round"] :is(.btn,.search input,input,select,textarea){border-radius:14px}
html:root[data-radius="round"] .modal{border-radius:24px}
/* Schriftgröße */
html:root[data-fs="large"] body{font-size:15.5px}
html:root[data-fs="xlarge"] body{font-size:17px}
@media (max-width:860px){html:root[data-fs="large"] body{font-size:16.5px}html:root[data-fs="xlarge"] body{font-size:18px}}
/* Glas-Stärke: durchsichtiger oder deckender (passt sich hell/dunkel über --surface an) */
:root[data-glass="on"][data-gstr="light"]:not([data-glass-lite]){--g-bg:color-mix(in srgb,var(--surface) 32%,transparent);--g-bg2:color-mix(in srgb,var(--surface) 22%,transparent)}
:root[data-glass="on"][data-gstr="strong"]{--g-bg:color-mix(in srgb,var(--surface) 78%,transparent);--g-bg2:color-mix(in srgb,var(--surface) 60%,transparent)}

/* Drucken und PDF immer ohne Glas */
@media print{:root[data-glass="on"] body::after{display:none}:root[data-glass="on"] *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}