:root{
  --bg:#0b1220; --card:#13233f; --card2:#0f1b30; --border:#27395a;
  --text:#eaf0fb; --muted:#9fb0cc; --accent:#4f8ef7; --ok:#2ecc71; --warn:#e0a030; --err:#e23b3b;
  --top-h:52px; --nav-h:60px;
}
*{box-sizing:border-box}
/* hidden-Attribut MUSS gewinnen — sonst überstimmen Klassen mit display:flex
   (.tab/.search-panel/.screen/.days-custom) die UA-Regel [hidden]{display:none}
   bei Spezifitäts-Gleichstand und Elemente bleiben sichtbar. */
[hidden]{display:none!important}
html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;touch-action:manipulation;}
/* iOS: schnelles Mehrfach-Tippen auf +/− oder die Mengen-Anzeige löste den
   Doppeltipp-„Ausschnittzoom" aus → für alle Bedienelemente abschalten
   (Scrollen + Pinch-Zoom bleiben erhalten). */
button,input,textarea,select,.chip,.step,.navbtn,.result{touch-action:manipulation}
.step,.chip,.navbtn,.big-btn,.x-btn,.cam-start,.cam-btn,.note-toggle{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body{display:flex;flex-direction:column;min-height:100dvh}

/* ── Kopfzeile ── */
#top{flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:13px 16px;background:var(--card2);border-bottom:1px solid var(--border);
  padding-top:calc(13px + env(safe-area-inset-top));z-index:5}
.brand{font-size:1.05rem}
.station{margin-left:auto;font-weight:700;color:var(--warn)}
.net{width:12px;height:12px;border-radius:50%;background:var(--err);flex:0 0 auto}
.net.online{background:var(--ok)}

/* ── App-Korpus (zwischen Kopf und Tab-Leiste) ── */
#app{flex:1 1 auto;position:relative;overflow:hidden}

/* Locked-Screen + generische .screen (Vollbild zentriert) */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:16px}
.big-info{text-align:center;padding:30px 10px}
.big-info .emoji{font-size:3.2rem}
.big-info h2{margin:.4em 0 .2em}
.big-info p{color:var(--muted)}
.big-info .big-btn{margin-top:18px}
/* Stations-QR-Scanner (Sperrbildschirm) */
.qr-scan{position:absolute;inset:0;background:#000;z-index:20}
#qr-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qr-scan .scan-overlay{position:absolute;inset:0;pointer-events:none}
.qr-scan .scan-overlay > *{pointer-events:auto}
.qr-scan .scan-frame,.qr-scan .scan-hint{display:block}

/* ── Tabs ── */
.tab{position:absolute;inset:0;display:flex;flex-direction:column}
#tab-meldungen{overflow:auto;padding:12px;-webkit-overflow-scrolling:touch}
.tab-title{margin:4px 2px 8px;font-size:.95rem;color:var(--muted);font-weight:700}

/* ── Kamera-Vollbild ── */
.scanwrap{flex:1 1 auto;position:relative;background:#000;overflow:hidden}
#video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scan-overlay{position:absolute;inset:0;pointer-events:none}
.scan-overlay > *{pointer-events:auto}
.scan-frame{position:absolute;left:8%;right:8%;top:26%;bottom:26%;
  border:2px solid rgba(255,255,255,.45);border-radius:16px}
.scanline{position:absolute;left:10%;right:10%;top:50%;height:3px;background:var(--err);
  box-shadow:0 0 12px var(--err);animation:scan 2s ease-in-out infinite}
@keyframes scan{0%,100%{top:30%}50%{top:70%}}
.scan-hint{position:absolute;top:12px;left:0;right:0;text-align:center;
  color:#cdd7ea;font-size:.85rem;margin:0;text-shadow:0 1px 4px #000}
/* Treffer-Bestätigung: grüner Blitz + ✓-Pop (synchron mit Beep/Vibration) */
.scan-flash{position:absolute;inset:0;background:var(--ok);opacity:0;pointer-events:none;z-index:6}
.scan-flash.go{animation:scanflash .5s ease-out}
@keyframes scanflash{0%{opacity:0}22%{opacity:.6}100%{opacity:0}}
.scan-ok{position:absolute;top:34%;left:50%;transform:translate(-50%,-50%) scale(.4);
  font-size:5.5rem;line-height:1;color:#fff;opacity:0;pointer-events:none;z-index:7;
  text-shadow:0 2px 14px rgba(0,0,0,.6)}
.scan-ok.go{animation:scanok .55s ease-out}
@keyframes scanok{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  30%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}}
.scanwrap.hit .scan-frame{border-color:var(--ok);box-shadow:0 0 0 3px rgba(46,204,113,.5)}
.cam-msg{position:absolute;left:16px;right:16px;top:40%;text-align:center;
  color:#fff;font-size:.95rem;background:rgba(11,18,32,.85);padding:14px;border-radius:12px}
.cam-btn{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  font-size:.95rem;padding:11px 18px;border-radius:13px;border:1px solid #3a4a6a;
  background:rgba(15,27,48,.9);color:var(--text);cursor:pointer}
.cam-btn:active{transform:translateX(-50%) translateY(1px)}
.cam-start{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:1.1rem;font-weight:800;padding:16px 26px;border-radius:16px;border:none;
  background:var(--accent);color:#fff;cursor:pointer}
.cam-start:active{transform:translate(-50%,-50%) translateY(1px)}
/* Idle: nur Start-Button; erst wenn Kamera läuft Rahmen/Linie/Hinweis zeigen */
.scan-frame,.scanline,.scan-hint{display:none}
.scanwrap.live .scan-frame,.scanwrap.live .scanline,.scanwrap.live .scan-hint{display:block}
.scanwrap.live .cam-start{display:none}

/* ── Manuelle Suche (überlagert Kamera) ── */
.search-panel{position:absolute;inset:0;background:var(--bg);display:flex;flex-direction:column;padding:12px;gap:10px;z-index:10}
.search-head{display:flex;gap:8px}
#search-input{flex:1;font-size:1.05rem;padding:14px;border-radius:14px;border:1px solid var(--border);
  background:var(--card2);color:var(--text)}
.results{display:flex;flex-direction:column;gap:8px;overflow:auto;-webkit-overflow-scrolling:touch}
.result{padding:13px;border:1px solid var(--border);border-radius:12px;background:var(--card);cursor:pointer}
.result b{display:block}
.result small{color:var(--muted)}

/* ── Eingabe-Sheet (fährt von unten hoch) ── */
.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:14}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:15;
  background:var(--card2);border-top:1px solid var(--border);border-radius:18px 18px 0 0;
  padding:10px 14px calc(16px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 24px rgba(0,0,0,.55);
  transform:translateY(115%);transition:transform .28s ease;
  display:flex;flex-direction:column;gap:9px}
.sheet.open{transform:translateY(0)}
.sheet-grip{width:38px;height:4px;border-radius:4px;background:#3a4a6a;margin:0 auto 4px}

.article-card{padding:10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--border)}
.article-card .nm{font-size:1.05rem;font-weight:800;line-height:1.2}
.article-card small{color:var(--muted);display:block;margin-top:2px;font-size:.78rem}

.lbl{font-weight:700;margin:0;font-size:.85rem;color:var(--muted)}
.qty-row{display:flex;gap:8px;align-items:stretch}
.qty-row input{flex:1 1 0;min-width:0;font-size:1.6rem;text-align:center;padding:8px;border-radius:12px;
  border:1px solid var(--border);background:var(--card);color:var(--text);font-weight:800}
.step{flex:0 0 56px;font-size:1.7rem;border:none;border-radius:12px;background:var(--card);color:var(--text);cursor:pointer}
.step:active{transform:translateY(1px)}
.chips{display:flex;gap:7px}
.chip{flex:1;min-width:0;font-size:.95rem;font-weight:700;padding:12px 2px;border-radius:12px;
  border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer}
.chip.active{background:var(--warn);color:#1a1408;border-color:var(--warn)}
.days-custom{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.days-custom input{flex:1;min-width:96px;font-size:.95rem;padding:9px;border-radius:10px;
  border:1px solid var(--border);background:var(--card);color:var(--text)}
.days-custom .or{color:var(--muted);font-size:.8rem}
.note-toggle{align-self:flex-start;background:transparent;border:none;color:var(--accent);
  font-size:.9rem;padding:2px 0;cursor:pointer}
#note{font-size:.95rem;padding:9px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text);width:100%}

.sheet-actions{display:flex;gap:8px;align-items:stretch}
.big-btn{font-size:1.1rem;font-weight:800;padding:15px;border:none;border-radius:14px;
  background:var(--accent);color:#fff;width:100%;cursor:pointer;line-height:1.1}
.big-btn.save{background:var(--ok)}
.big-btn:active{transform:translateY(1px)}
.x-btn{border:1px solid var(--border);border-radius:12px;background:transparent;color:var(--muted);cursor:pointer}
.x-btn.big{width:56px;font-size:1.2rem;flex:0 0 auto}

/* ── „Zuletzt gemeldet" ── */
.recent{display:flex;flex-direction:column;gap:6px}
.rec{display:flex;gap:8px;align-items:center;padding:11px 12px;border:1px solid var(--border);
  border-radius:10px;background:var(--card2);font-size:.9rem}
.rec .g{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec .st{font-size:.72rem;padding:2px 7px;border-radius:8px}
.st-wait{background:#3a3320;color:var(--warn)}
.st-ok{background:#143524;color:var(--ok)}
.hint{color:var(--muted);font-size:.85rem;text-align:center;margin-top:10px}

/* ── Untere Tab-Leiste ── */
#bottomnav{flex:0 0 auto;display:flex;background:var(--card2);border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom)}
.navbtn{flex:1;border:none;background:transparent;color:var(--muted);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  height:var(--nav-h);font-size:1.4rem}
.navbtn span{font-size:.7rem;font-weight:600}
.navbtn.active{color:var(--accent)}

/* ── Pairing (Sperrbildschirm MHD-Pro) ── */
.pair-manual{margin-top:18px}
#manual-row{justify-content:center;margin-top:10px}
#manual-row select,#manual-row input{font-size:.95rem;padding:10px;border-radius:10px;
  border:1px solid var(--border);background:var(--card);color:var(--text)}
#manual-code{flex:1 1 120px;min-width:0;text-transform:uppercase;letter-spacing:1px}

/* ── Toast ── */
#toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 18px);transform:translateX(-50%) translateY(60px);
  background:#000;color:#fff;padding:12px 18px;border-radius:24px;opacity:0;transition:.25s;z-index:30;max-width:90%}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}