/* DL Service — Responsive & Touch (Mobil-Optimierung) · zuletzt geladen → überschreibt */

/* ── Burger-/Drawer-Navigation (mobil) ── */
.nav-burger{ display:none; }
.nav-scrim{ position:fixed; inset:0; background:rgba(22,39,63,.45); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:199; }
.nav-scrim.open{ opacity:1; pointer-events:auto; }
.nav-drawer{ position:fixed; top:0; left:0; bottom:0; width:min(82vw,300px); background:var(--paper,#fff); border-right:1px solid var(--line,#e6e0d2);
  box-shadow:0 0 60px rgba(22,39,63,.28); transform:translateX(-102%); transition:transform .25s ease; z-index:200; padding:18px 14px; display:flex; flex-direction:column; gap:2px; }
.nav-drawer.open{ transform:translateX(0); }
.nav-drawer .um-item{ display:flex; align-items:center; gap:11px; padding:13px 14px; min-height:44px; color:var(--ink-soft,#36465f); text-decoration:none; font-size:15px; font-weight:500; border-radius:10px; }
.nav-drawer .um-item:hover{ background:var(--paper-2,#faf8f2); }
.nav-drawer .um-item i{ font-size:19px; color:var(--muted,#5a6678); }
.nav-drawer .um-item.danger{ color:#9a3422; }
.nav-drawer .um-sep{ height:1px; background:var(--line,#e6e0d2); margin:7px 0; }

/* ── Tablet (≤1024px) ── */
@media (max-width:1024px){ .wrap{ padding-left:20px; padding-right:20px; } }
@media (max-width:1024px){ .admin{ padding-left:18px; padding-right:18px; } }
@media (max-width:1024px){ .tiles{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:1024px){ .help-grid{ grid-template-columns:1fr; } }
@media (max-width:1024px){ .api-wrap{ padding-left:18px; padding-right:18px; } }

/* ── Phone (≤768px) ── */
@media (max-width:768px){ .topbar{ padding-left:14px; padding-right:14px; } }
@media (max-width:768px){ .tb-tag{ display:none; } }
@media (max-width:768px){ .tabs{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; } }
@media (max-width:768px){ .controls{ flex-direction:column; align-items:stretch; gap:10px; } }
@media (max-width:768px){ .btoolbar{ flex-wrap:wrap; gap:8px; } }

/* ── Phone (≤640px) — Single-Column, Burger, Touch ── */
@media (max-width:640px){ .nav-burger{ display:grid; place-items:center; width:42px; height:42px; min-height:44px; border:1px solid var(--line,#e6e0d2); border-radius:10px; background:var(--paper,#fff); color:var(--text,#16273f); cursor:pointer; } .nav-burger i{ font-size:22px; } }
@media (max-width:640px){ .tiles{ grid-template-columns:1fr; } }
@media (max-width:640px){ .lb-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .kpi{ grid-template-columns:1fr; } }
@media (max-width:640px){ .um-pop{ width:min(92vw,300px); } }
@media (max-width:640px){ .uc-meta{ display:none; } }
@media (max-width:640px){ .hello h1{ font-size:30px; } }
@media (max-width:640px){ .admin-head h1{ font-size:26px; } }
@media (max-width:640px){ .dtable{ font-size:13px; } .dtable th, .dtable td{ padding:9px 10px; } }
@media (max-width:640px){ .btn, .um-item, .tab, .subtab, .ibtn, .bell, .logout, .tb-icon{ min-height:44px; } }
@media (max-width:640px){ .modal-box, .modal-card{ max-width:94vw; } }
@media (max-width:640px){ .row-actions{ flex-wrap:wrap; gap:6px; } }
@media (max-width:640px){ .col-item{ flex-wrap:wrap; } }
@media (max-width:640px){ .live-band{ padding:16px; } }
@media (max-width:640px){ .group-head{ font-size:19px; } }
@media (max-width:640px){ .btoolbar{ padding:8px 12px; } }

/* ── Schwebende QR-Scanner-Kamera (FAB, nur Mobil) ── */
.mqr-fab{ display:none; }
/* Wenn Admin den Desktop-Scanner aktiviert (body.scanner-desktop-on): FAB auch auf Desktop sichtbar */
body.scanner-desktop-on .mqr-fab{ display:grid; place-items:center; position:fixed; right:18px; bottom:18px; width:60px; height:60px; min-width:60px; min-height:60px; border-radius:50%; background:#16273f; color:#fff; border:0; padding:0; box-shadow:0 10px 28px rgba(22,39,63,.45); cursor:pointer; z-index:900; }
body.scanner-desktop-on .mqr-fab i{ font-size:26px; line-height:1; }
@media (max-width:768px){
  .mqr-fab{ display:grid; place-items:center; position:fixed; right:18px; bottom:18px;
    width:60px; height:60px; min-width:60px; min-height:60px; border-radius:50%;
    background:#16273f; color:#fff; border:0; padding:0;
    box-shadow:0 10px 28px rgba(22,39,63,.45), 0 2px 6px rgba(22,39,63,.2);
    cursor:pointer; z-index:900; transition:transform .15s, background .15s; }
  .mqr-fab:hover, .mqr-fab:active{ background:#1f3454; transform:scale(1.05); }
  .mqr-fab i{ font-size:26px; line-height:1; }
}
.mqr-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:1100;
  display:flex; align-items:center; justify-content:center; padding:18px; }
.mqr-box{ background:#16273f; border:1px solid rgba(255,255,255,.08); border-radius:16px;
  padding:18px; max-width:440px; width:100%; display:flex; flex-direction:column; gap:14px; color:#fff;
  box-shadow:0 30px 70px rgba(0,0,0,.6); }
.mqr-head{ display:flex; justify-content:space-between; align-items:center; }
.mqr-head strong{ font-size:15px; font-weight:600; }
.mqr-close{ background:transparent; border:0; color:#fff; font-size:22px; cursor:pointer;
  width:32px; height:32px; border-radius:6px; display:grid; place-items:center; padding:0; }
.mqr-close:hover{ background:rgba(255,255,255,.1); }
.mqr-scan-area{ position:relative; aspect-ratio:1/1; background:#000; border-radius:10px; overflow:hidden; }
.mqr-scan-area video{ width:100%; height:100%; object-fit:cover; }
.mqr-frame{ position:absolute; inset:18%; border:2px solid #fff; border-radius:8px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.42); }
.mqr-info{ font-size:13px; color:rgba(255,255,255,.7); text-align:center; padding:0 4px; line-height:1.4; }
.mqr-manual{ display:flex; flex-direction:column; gap:10px; padding-top:6px; border-top:1px solid rgba(255,255,255,.08); }
.mqr-or{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.45); text-align:center; }
.mqr-row{ display:flex; gap:8px; }
.mqr-row input{ flex:1; min-width:0; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:#fff; border-radius:9px; padding:11px 13px; font:inherit; font-size:14.5px; }
.mqr-row input::placeholder{ color:rgba(255,255,255,.35); }
.mqr-row input:focus{ outline:none; border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.1); }
.mqr-row button{ background:#fff; color:#16273f; border:0; border-radius:9px; padding:11px 18px; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
.mqr-row button:hover{ background:#f5f2ea; }

/* ── Glocken-Menü auf Mobil als Full-Width-Sheet (sonst stünde es halb außerhalb) ── */
@media (max-width:640px){
  .bell-menu{
    position:fixed !important; top:64px !important; left:10px !important; right:10px !important; bottom:auto !important;
    width:auto !important; max-width:none !important; max-height:70vh !important; overflow:auto;
    border-radius:14px !important; box-shadow:0 24px 60px rgba(22,39,63,.28) !important;
  }
}
@media (max-width:480px){ .bell-menu{ top:60px !important; left:8px !important; right:8px !important; } }

/* iOS-Hilfshinweis im QR-Modal soll mehr Platz haben, wenn die Kamera entfällt */
.mqr-overlay .mqr-info{ padding:8px 4px; }

/* ── Kleines Phone (≤480px) ── */
@media (max-width:480px){ .login-box{ padding:26px 22px; } }
@media (max-width:480px){ .login-top-logo{ width:74px; height:74px; } }
@media (max-width:480px){ html{ font-size:15px; } }
@media (max-width:480px){ .wrap{ padding-top:24px; } }