/* ════════════════════════════════════════════════════════════════
   Drone Corridor · Liquid Glass
   Greift nur, wenn <html class="glass"> gesetzt ist.
   Zusatz "solid" = weniger Transparenz für Sonne und ältere Geräte.
   ════════════════════════════════════════════════════════════════ */

html.glass{
  --panel:     rgba(255,255,255,.07);
  --panel2:    rgba(255,255,255,.12);
  --bg:        transparent;
  --g-bg:      rgba(255,255,255,.12);
  --g-bg-2:    rgba(255,255,255,.07);
  --g-edge:    rgba(255,255,255,.22);
  --g-hi:      rgba(255,255,255,.55);
  --g-blur:    blur(22px) saturate(180%);
  --g-shadow:  0 10px 34px rgba(0,0,0,.32);
  --g-radius:  22px;
}
html.glass.solid{
  --panel:  rgba(22,28,38,.72);
  --panel2: rgba(30,38,50,.82);
  --g-bg:   rgba(22,28,38,.78);
  --g-bg-2: rgba(22,28,38,.62);
  --g-edge: rgba(255,255,255,.16);
  --g-blur: blur(14px) saturate(140%);
}

/* ── Hintergrund: der eigene Geländeplan, weich und abgedunkelt ── */
html.glass body{background:#0a0f16}
html.glass body::before{
  content:"";position:fixed;inset:-60px;z-index:-1;pointer-events:none;
  background:var(--dcbg, none) center/cover no-repeat,
             radial-gradient(120% 90% at 20% 10%,#1f3a52 0%,#0d1622 55%,#070a10 100%);
  filter:blur(34px) saturate(150%) brightness(.52);
  transform:scale(1.08);
}
html.glass.solid body::before{filter:blur(40px) saturate(110%) brightness(.36)}

html.glass .frame,
html.glass .desk,
html.glass main,
html.glass #app{background:transparent !important}
html.glass .frame{border-color:transparent}

/* ── Gemeinsame Glasfläche ── */
html.glass .card,
html.glass .sheet,
html.glass .mbox,
html.glass nav,
html.glass header,
html.glass .dtop,
html.glass .drail,
html.glass .daside,
html.glass .edbar,
html.glass .up,
html.glass .codebox,
html.glass .roleopt,
html.glass .tokenbox,
html.glass input[type=text],
html.glass input[type=email],
html.glass input[type=password],
html.glass input[type=date]{
  background:linear-gradient(160deg,var(--g-bg),var(--g-bg-2));
  -webkit-backdrop-filter:var(--g-blur);
  backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge);
  box-shadow:inset 0 1px 0 var(--g-hi), var(--g-shadow);
}

html.glass .card{border-radius:var(--g-radius)}
/* Korridor- und Pilotenkarten behalten ihren farbigen Rand links;
   ihr Farbverlauf nutzt --panel, das hier durchscheinend wird */
html.glass .corrcard,
html.glass .pcard{border-top-color:var(--g-edge);border-right-color:var(--g-edge);
  border-bottom-color:var(--g-edge)}

html.glass input[type=text],
html.glass input[type=email],
html.glass input[type=password],
html.glass input[type=date]{border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}

/* ── Knöpfe als Glaskapseln ── */
html.glass button{
  border-radius:999px;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.07));
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  backdrop-filter:blur(14px) saturate(170%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
html.glass button.go{
  background:linear-gradient(160deg,rgba(90,190,255,.55),rgba(40,130,210,.45));
  border-color:rgba(140,215,255,.6);
}
html.glass button.ghost{background:rgba(255,255,255,.05)}
html.glass button.sm{border-radius:999px}

/* ── Sicherheitsrelevantes bleibt massiv ── */
html.glass button.stopall,
html.glass button.out{
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
html.glass button.stopall{
  background:#d7263d !important;border-color:#ff6b7d !important;color:#fff !important;
  box-shadow:0 10px 26px rgba(215,38,61,.45), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
html.glass button.out{background:rgba(120,24,36,.85);border-color:rgba(255,120,130,.45)}
html.glass .banner,
html.glass .landnow,
html.glass .landsoon,
html.glass .timer{-webkit-backdrop-filter:none;backdrop-filter:none}
html.glass .banner.stop{background:#8a1826;color:#fff}
html.glass .banner.warn{background:#6b4a10;color:#fff}

/* ── Handy: Kopfzeile und Menü schweben als Kapseln ── */
@media (max-width:860px){
  html.glass .frame{position:relative}
  html.glass header{
    margin:max(8px,env(safe-area-inset-top)) 10px 8px;
    border-radius:26px;padding:10px 12px;
  }
  html.glass nav{
    position:absolute;left:14px;right:14px;
    bottom:max(12px,env(safe-area-inset-bottom));
    border-radius:30px;padding:4px 6px;z-index:6;
  }
  html.glass nav div{border-radius:24px;padding:9px 4px 10px;margin:2px}
  html.glass nav div.on{
    background:rgba(255,255,255,.2);color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  }
  html.glass main{padding-bottom:96px}
  html.glass .mapwrap{
    margin:0 10px;border-radius:24px;overflow:hidden;
    border:1px solid var(--g-edge);box-shadow:var(--g-shadow);
  }
  html.glass .sheet{
    left:8px;right:8px;bottom:8px;border-radius:30px;
    padding-bottom:max(18px,env(safe-area-inset-bottom));
  }
}

/* ── Leitstand am Rechner ── */
@media (min-width:1000px){
  html.glass .dtop{margin:12px 12px 0;border-radius:24px}
  html.glass .dbody{padding:12px;gap:12px}
  html.glass .drail{border-radius:24px;border-right:0 !important}
  html.glass .drail div.on{background:rgba(255,255,255,.18);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
  html.glass .daside{border-radius:24px;border-left:0 !important}
  html.glass .dmapwrap{border-radius:24px;overflow:hidden;
    border:1px solid var(--g-edge) !important;box-shadow:var(--g-shadow)}
  html.glass .landbox{padding-left:0;padding-right:0}
}

/* ── Modale Fenster ── */
html.glass .modal{background:rgba(4,8,14,.45);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.glass .mbox{border-radius:28px}

/* ── Plaketten und Chips etwas heller ── */
html.glass .pill{background:rgba(255,255,255,.14);color:#fff}
html.glass .pill.p-free{background:rgba(52,199,89,.28);color:#c8f7d6}
html.glass .pill.p-air{background:rgba(100,210,255,.26);color:#d4f1ff}
html.glass .pill.p-full,
html.glass .pill.p-ready{background:rgba(255,190,70,.26);color:#ffe6b3}
html.glass .tag{border-radius:8px}

/* ── Browser ohne Unschärfe: undurchsichtig statt unlesbar ── */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html.glass .card, html.glass .sheet, html.glass .mbox, html.glass nav,
  html.glass header, html.glass .dtop, html.glass .drail, html.glass .daside{
    background:rgba(22,28,38,.94) !important;
  }
}