/* KIss Cockpit – Glas-Optik. Reine Gestaltungsebene über app.css: ohne diese Datei läuft das Cockpit unverändert im alten Look.
   Prinzip: ruhiger Graphit- bzw. Paper-Grund mit Lichtflächen in KIss-Blau und -Türkis, darüber halbtransparente Flächen.
   Echte Unschärfe nur auf den obersten Flächen, verschachtelte Flächen bleiben nur transparent (spart Rechenleistung). */
:root {
  --ground:#101317; --muted:#AAB2BD; --alert:#F57F8A;
  --panel:rgba(32,37,45,.50); --panel-2:rgba(255,255,255,.06); --raise:#2C313A;
  --line:#FFFFFF1C; --line-strong:#FFFFFF36; --shade:#0508108C;
  --solid:#1E2228; --bar:rgba(20,23,29,.56); --sheet:rgba(30,34,41,.78);
  --sunken:rgba(0,0,0,.20); --soft:rgba(255,255,255,.09);
  --blur:blur(24px) saturate(140%);
  --edge:inset 0 1px 0 #FFFFFF22, inset 0 0 0 .5px #FFFFFF0A;
  --lift:0 12px 32px #00000052;
  --orb-1:#0175F93B; --orb-2:#2BC8D62E; --orb-3:#0175F926;
  --net:url("/brand/glass-net.svg");
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground:#E4ECF7; --cyan:#00707B; --ok:#17784B; --warn:#8F5300; --alert:#C21F30;
    --panel:rgba(255,255,255,.56); --panel-2:rgba(255,255,255,.52); --raise:#E1E9F5;
    --line:#0A14261A; --line-strong:#0A142633; --shade:#0A142652;
    --solid:#FFFFFF; --bar:rgba(244,248,253,.60); --sheet:rgba(255,255,255,.84);
    --sunken:rgba(255,255,255,.26); --soft:rgba(255,255,255,.72);
    --edge:inset 0 1px 0 #FFFFFFD9, inset 0 0 0 .5px #FFFFFF66;
    --lift:0 12px 32px #1E3C6E1F;
    --orb-1:#0175F933; --orb-2:#2BC8D638; --orb-3:#0175F926;
  }
}
:root[data-theme="light"] {
  --ground:#E4ECF7; --cyan:#00707B; --ok:#17784B; --warn:#8F5300; --alert:#C21F30;
  --panel:rgba(255,255,255,.56); --panel-2:rgba(255,255,255,.52); --raise:#E1E9F5;
  --line:#0A14261A; --line-strong:#0A142633; --shade:#0A142652;
  --solid:#FFFFFF; --bar:rgba(244,248,253,.60); --sheet:rgba(255,255,255,.84);
  --sunken:rgba(255,255,255,.26); --soft:rgba(255,255,255,.72);
  --edge:inset 0 1px 0 #FFFFFFD9, inset 0 0 0 .5px #FFFFFF66;
  --lift:0 12px 32px #1E3C6E1F;
  --orb-1:#0175F933; --orb-2:#2BC8D638; --orb-3:#0175F926;
}

/* Hintergrund: steht still, die Flächen gleiten darüber. Klar begrenzte Lichtflächen, damit die Unschärfe sichtbar wird. */
body::after {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    var(--net) center / cover no-repeat,
    radial-gradient(circle at 9% 16%, var(--orb-1) 0 17vmax, transparent 25vmax),
    radial-gradient(circle at 92% 30%, var(--orb-2) 0 13vmax, transparent 21vmax),
    radial-gradient(circle at 62% 104%, var(--orb-3) 0 20vmax, transparent 30vmax),
    var(--ground);
}

/* Flächen mit echter Unschärfe */
.side, .card, .col, .ccard, .day, .pcard, .sp-group, .sp-ins-card, .sp-planner, .rp-kpi, .rp-card, .login-card, .view > .tiles > .tile {
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:var(--edge), var(--lift);
}
.view > .tiles > .tile { background:var(--panel) }
.side { background:var(--bar); box-shadow:var(--edge) }
.sp-planner .card, .sp-planner .tile { -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:var(--edge) }
.pl-group { -webkit-backdrop-filter:none; backdrop-filter:none }

/* Kopfzeile: Unschärfe auf eigener Ebene, damit das Konto-Menü darin selbst Glas sein kann */
.top { background:transparent }
.top::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--bar); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur) }

/* Schwebende Ebenen: dichter, damit Text sicher lesbar bleibt */
.sheet, .popover, .toast {
  background:var(--sheet); -webkit-backdrop-filter:blur(32px) saturate(140%); backdrop-filter:blur(32px) saturate(140%);
  box-shadow:var(--edge), 0 24px 60px var(--shade);
}
.bottom-nav { background:var(--bar); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:inset 0 1px 0 var(--line) }

/* Bedienelemente */
.search, .icon-btn, .btn, .seg, .live, .sp-acc, .rp-brand, .pl-chip { box-shadow:var(--edge) }
.search, .icon-btn, .btn { background:var(--soft) }
.btn:hover, .icon-btn:hover, .search:focus-within { background:color-mix(in srgb,var(--soft) 70%,var(--ink) 8%) }
.btn.primary { box-shadow:inset 0 1px 0 #FFFFFF47, 0 6px 18px color-mix(in srgb,var(--blue) 38%,transparent) }
.btn.danger.armed { background:var(--alert) }
.bill-st .btn.on.gestellt { background:var(--blue) }
.bill-st .btn.on.bezahlt { background:var(--ok) }
.nav a:hover { background:var(--panel-2) }
.nav a[aria-current="page"] { background:var(--soft); box-shadow:inset 3px 0 0 var(--cyan), var(--edge) }
.tile-tools .icon-btn, .col-head .add, .pcol-h .add { box-shadow:none }
.tile-tools .seg button { background:transparent }

/* Text direkt auf dem Hintergrund: etwas kräftiger, damit er auch über den Lichtflächen sicher lesbar bleibt */
.view-head p { color:color-mix(in srgb,var(--muted) 65%,var(--ink)) }
.view-head .eyebrow { color:color-mix(in srgb,var(--cyan) 78%,var(--ink)) }

/* Innere Flächen: hauchdünne Kante statt zweiter Unschärfe */
.tcard, .prow, .trow, .post, .pchip, .ph, .tgroup, .pcol, .geo-score, .ge, .reco, .reco-it, .sp-mu, .sp-ins div, .pending, .agenda, .ce { box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 5%,transparent) }
.sp-cell.out { background:var(--sunken) }
option, optgroup { background:var(--solid); color:var(--ink) }

/* Stellen, die eine deckende Fläche brauchen */
.ag-gear circle { fill:var(--solid) }
.ag-tool .hook, .ag-tag { background:var(--solid) }

/* Handy: Unschärfe nur auf den festen Leisten und Dialogen, dafür ohne Netz. Spart Akku und bleibt beim Scrollen flüssig. */
@media (max-width:860px) {
  :root { --net:none }
  .card, .col, .ccard, .day, .pcard, .sp-group, .sp-ins-card, .sp-planner, .rp-kpi, .rp-card, .view > .tiles > .tile {
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
}

/* Wer in den Systemeinstellungen weniger Transparenz gewählt hat oder einen Browser ohne Unschärfe nutzt: deckende Flächen */
@media (prefers-reduced-transparency: reduce) {
  :root, :root[data-theme="light"], :root:not([data-theme="dark"]) { --panel:var(--solid); --bar:var(--solid); --sheet:var(--solid); --net:none; --orb-1:transparent; --orb-2:transparent; --orb-3:transparent }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root, :root[data-theme="light"], :root:not([data-theme="dark"]) { --panel:var(--solid); --bar:var(--solid); --sheet:var(--solid); --net:none }
}