:root{
  --brand:#2457FF; --tint:#DFF7FF; --on-brand:#FFFFFF;
  --bg:#F2FBFE; --surface:#FFFFFF; --surface2:#E6F6FC; --ink:#0B1230; --mute:#53608C; --line:#BFD6E6;
  --link:#1A47E0; --bad:#D6283F; --bad-bg:#FFE6EA; --ok:#0E8F4A; --ok-bg:#DDF5E8; --warn:#9A5B00; --warn-bg:#FFF0CF;
  --r:5px; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#090E2E; --surface:#111953; --surface2:#17216B; --ink:#E4F9FF; --mute:#9FB1E8; --line:#2A3A8F;
    --link:#9DBBFF; --bad:#FF7A8C; --bad-bg:#47131F; --ok:#5FD99A; --ok-bg:#0F3A27; --warn:#FFC965; --warn-bg:#44320A;
  }
}
:root[data-theme="dark"]{
  --bg:#090E2E; --surface:#111953; --surface2:#17216B; --ink:#E4F9FF; --mute:#9FB1E8; --line:#2A3A8F;
  --link:#9DBBFF; --bad:#FF7A8C; --bad-bg:#47131F; --ok:#5FD99A; --ok-bg:#0F3A27; --warn:#FFC965; --warn-bg:#44320A;
}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 64px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;font-size:16px;line-height:1.45;font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
h2{font-size:1.5rem;font-weight:800;letter-spacing:-.01em;margin:6px 0 14px}
h3{font-size:1.05rem;font-weight:700;margin:22px 0 8px}
.mute{color:var(--mute);font-size:.88rem}
a{color:var(--link)}

/* Kopfleiste */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--brand);color:var(--on-brand);display:flex;align-items:center;gap:10px;padding:10px 12px;min-height:56px}
header.top .ttl{flex:1;font-weight:800;font-size:1.12rem;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.burger{width:42px;height:42px;border:2px solid var(--tint);background:transparent;border-radius:var(--r);display:grid;place-content:center;gap:5px;cursor:pointer}
.burger i{display:block;width:20px;height:2.5px;background:var(--tint)}
.topbtn{background:var(--tint);color:#0B1230;border:0;border-radius:var(--r);padding:9px 14px;font-weight:700;cursor:pointer}
.topbtn:focus-visible,.burger:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* Menü links */
#veil{position:fixed;inset:0;background:rgba(5,10,40,.55);z-index:30;opacity:0;pointer-events:none;transition:opacity .2s}
#veil.on{opacity:1;pointer-events:auto}
nav#drawer{position:fixed;top:0;bottom:0;left:0;width:min(84vw,310px);z-index:31;background:var(--surface);border-right:3px solid var(--brand);transform:translateX(-102%);transition:transform .22s ease;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);overflow-y:auto}
nav#drawer.on{transform:none}
.brand{background:var(--brand);color:#fff;padding:18px 18px 16px}
.brand b{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.brand span{color:var(--tint);font-size:.85rem}
nav#drawer button{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;background:none;border:0;border-left:5px solid transparent;padding:14px 18px;font-weight:600;font-size:1.02rem;cursor:pointer;color:var(--ink)}
nav#drawer button.on{background:var(--tint);border-left-color:var(--brand);color:#0B1230}
nav#drawer button:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}
.badge{background:var(--brand);color:#fff;border-radius:99px;font-size:.78rem;padding:1px 8px;font-weight:700}
.badge.bad{background:var(--bad);color:#fff}

main{max-width:880px;margin:0 auto;padding:16px 14px 90px 76px}

/* Bausteine */
.btn{background:var(--brand);color:#fff;border:2px solid var(--brand);border-radius:var(--r);padding:10px 16px;font-weight:700;cursor:pointer;min-height:44px}
.btn.ghost{background:transparent;color:var(--link);border-color:var(--line)}
.btn.bad{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.sm{padding:6px 10px;min-height:36px;font-size:.9rem}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.row:focus-visible,.trow:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
input,select,textarea{background:var(--surface);border:2px solid var(--line);border-radius:var(--r);padding:9px 11px;width:100%;min-height:44px}
textarea{min-height:90px;resize:vertical}
label.f{display:block;font-weight:600;font-size:.9rem;margin:12px 0 4px}
.row{display:flex;align-items:center;gap:10px;background:var(--surface);border:2px solid var(--line);border-left:6px solid var(--brand);border-radius:var(--r);padding:10px 12px;margin-bottom:8px}
.row .grow{flex:1;min-width:0;cursor:pointer}
.row .grow b{display:block;overflow:hidden;text-overflow:ellipsis}
.row .grow span{margin-right:12px}
.row.bad{border-left-color:var(--bad)}
.row.out{border-left-color:var(--warn)}
.chip{display:inline-block;font-size:.76rem;font-weight:700;padding:2px 8px;border-radius:3px;background:var(--surface2);color:var(--ink);margin-left:4px}
.chip.bad{background:var(--bad-bg);color:var(--bad)}
.chip.out{background:var(--warn-bg);color:var(--warn)}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.empty{border:2px dashed var(--line);border-radius:var(--r);padding:26px 18px;text-align:center;color:var(--mute)}
.empty b{display:block;color:var(--ink);margin-bottom:4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}
.back{background:none;border:0;color:var(--link);font-weight:700;padding:6px 0;cursor:pointer;margin-bottom:4px}
.bar{height:8px;background:var(--surface2);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--brand)}
.bar.done i{background:var(--ok)}
.notice{background:var(--warn-bg);color:var(--warn);border-radius:var(--r);padding:10px 12px;margin-bottom:12px;font-weight:600}
.notice.bad{background:var(--bad-bg);color:var(--bad)}

/* Startseite */
.next{background:var(--brand);color:#fff;border-radius:var(--r);padding:20px 18px;margin-bottom:18px}
.next .d{font-size:2.6rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.next .n{font-size:1.25rem;font-weight:700;margin-top:8px}
.next .bar{background:rgba(255,255,255,.28);margin-top:14px}
.next .bar i{background:var(--tint)}
.next .mute{color:var(--tint)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:2px solid var(--line);border-radius:var(--r);background:var(--surface);margin-bottom:8px}
.stats div{padding:12px 14px;border-bottom:2px solid var(--line)}
.stats div:nth-child(odd){border-right:2px solid var(--line)}
.stats div:last-child{border-bottom:0}
.stats div:nth-last-child(2):nth-child(odd){border-bottom:0}
.stats b{display:block;font-size:1.55rem;font-weight:800;letter-spacing:-.02em}
.stats .bad b{color:var(--bad)}

/* Baum */
ul.tree{list-style:none;margin:0;padding:0}
ul.tree ul.tree{margin-left:18px;border-left:2px solid var(--line);padding-left:8px}
.trow{display:flex;align-items:center;gap:8px;padding:10px 8px;border-radius:var(--r);cursor:pointer;min-height:44px;font-weight:600}
.trow:hover{background:var(--surface2)}
.trow.sel{background:var(--tint);color:#0B1230;outline:2px solid var(--brand)}
.trow .chev{width:18px;color:var(--mute);text-align:center}
.trow .tn{flex:1}
.trow .tc{font-size:.8rem;color:var(--mute)}
.trow .tc.z{opacity:.45}
.panel{background:var(--surface);border:2px solid var(--line);border-radius:var(--r);padding:8px 10px}

/* Scanner */
.cam{border:2px solid var(--brand);border-radius:var(--r);background:var(--surface);overflow:hidden;margin-bottom:12px}
.vid{position:relative;aspect-ratio:4/3;max-height:42vh;width:100%;background:#050A28;display:grid;place-items:center}
/* Handy hochkant: Kamerafenster ebenfalls hochkant, damit vom (hochkant gelieferten) Kamerabild mehr zu sehen ist und nichts wie gezoomt wirkt */
@media (max-width:700px) and (orientation:portrait){.vid{aspect-ratio:3/4;max-height:56vh}}
.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid .reticle{position:absolute;left:8%;right:8%;top:32%;bottom:32%;border:3px solid var(--tint);border-radius:8px;opacity:.9;pointer-events:none;transition:border-color .15s}
.vid .reticle.hit{border-color:#2ecc71;box-shadow:0 0 0 3px rgba(46,204,113,.45)}
.vid .btn{position:relative;z-index:2}
.manual{display:flex;gap:8px;padding:8px}
#camMsg{padding:0 10px 8px;min-height:1.2em}
.seg{display:flex;border:2px solid var(--brand);border-radius:var(--r);overflow:hidden;margin-bottom:12px}
.seg button{flex:1;background:transparent;border:0;padding:11px;font-weight:700;cursor:pointer;color:var(--link)}
.seg button.on{background:var(--brand);color:#fff}
.stepper{display:flex;align-items:center;gap:4px}
.stepper input{width:58px;text-align:center;padding:6px}
.stepper button{width:38px;height:38px;border:2px solid var(--line);background:var(--surface);border-radius:var(--r);font-weight:800;cursor:pointer}
.defbtn{border:2px solid var(--line);background:var(--surface2);color:var(--mute);border-radius:var(--r);padding:9px 14px;font-weight:700;cursor:pointer}
.defbtn.armed{background:var(--bad);border-color:var(--bad);color:#fff}

/* Modal */
#modal{position:fixed;inset:0;z-index:50;display:none;background:rgba(5,10,40,.6);overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 16px) 12px calc(env(safe-area-inset-bottom,0px) + 16px)}
#modal.on{display:block}
.sheet{max-width:560px;margin:0 auto;background:var(--bg);border:3px solid var(--brand);border-radius:var(--r);padding:16px}
.sheet h2{margin-top:0}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.acts .btn{flex:1}
#toasts{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);display:grid;gap:6px;justify-items:center;z-index:60;pointer-events:none;padding:0 12px}
.toast{background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:var(--r);font-weight:600;max-width:520px}
.toast.err{background:var(--bad);color:#fff}
.toast.ok{background:var(--ok);color:#fff}

/* Tabellen (Patchpläne) */
.tw{overflow-x:auto;border:2px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:640px}
th{background:var(--surface2);text-align:left;font-size:.82rem;padding:8px;white-space:nowrap}
td{padding:4px;border-top:1px solid var(--line)}
td input,td select{min-height:38px;padding:6px 8px;border-width:1px}
.sw{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid var(--line);vertical-align:-2px;margin-right:6px}
.cat-edit{display:flex;gap:6px;align-items:center;margin:4px 0}
.cat-edit input{min-height:38px;padding:5px 8px}
.swr{position:relative;overflow:hidden;border-radius:var(--r);margin-bottom:8px}
.swr .row{margin-bottom:0}
.swa{position:absolute;top:0;bottom:0;display:flex}
.swa.l{left:0}.swa.r{right:0}
.swa button{width:92px;border:0;color:#fff;font-weight:700;cursor:pointer;background:var(--brand)}
.swa button.bad{background:var(--bad)}.swa button.ok{background:var(--ok)}
.swc{position:relative;background:var(--bg);touch-action:pan-y;transition:transform .18s ease;-webkit-user-select:none;user-select:none}
.swc.drag{transition:none}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:10px;background:var(--surface);border:2px solid var(--line);border-left:6px solid var(--brand);border-radius:var(--r)}
.pf{display:block}.pf .mute{display:block;margin-bottom:2px}
.pbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;margin:4px 0;background:var(--surface);border:2px solid var(--line);border-left:6px solid var(--brand);border-radius:var(--r)}
.pbar .tn{flex:1;min-width:140px}.pbar .tn .mute{display:block}
/* ===== Liquid Glass (dezent) ===== */
:root{--glass:rgba(255,255,255,.62);--glass-strong:rgba(255,255,255,.80);--glass-line:rgba(255,255,255,.80);--glass-shadow:0 8px 28px rgba(20,40,120,.12);--hi:inset 0 1px 0 rgba(255,255,255,.75);--r:14px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--glass:rgba(23,33,107,.55);--glass-strong:rgba(18,27,92,.80);--glass-line:rgba(150,180,255,.26);--glass-shadow:0 8px 28px rgba(0,0,20,.45);--hi:inset 0 1px 0 rgba(255,255,255,.14)}}
:root[data-theme="dark"]{--glass:rgba(23,33,107,.55);--glass-strong:rgba(18,27,92,.80);--glass-line:rgba(150,180,255,.26);--glass-shadow:0 8px 28px rgba(0,0,20,.45);--hi:inset 0 1px 0 rgba(255,255,255,.14)}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(700px 420px at 8% -4%,color-mix(in srgb,var(--brand) 24%,transparent),transparent 62%),radial-gradient(620px 460px at 104% 12%,color-mix(in srgb,var(--tint) 85%,transparent),transparent 58%),radial-gradient(600px 500px at 50% 112%,color-mix(in srgb,var(--brand) 14%,transparent),transparent 60%)}
header.top{top:calc(env(safe-area-inset-top,0px) + 8px);margin:8px 10px 0;border-radius:22px;background:color-mix(in srgb,var(--brand) 80%,transparent);-webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);border:1px solid rgba(255,255,255,.28);box-shadow:0 10px 30px rgba(36,87,255,.30),inset 0 1px 0 rgba(255,255,255,.45)}
.burger{border-radius:14px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.14)}
.topbtn{border-radius:999px;background:rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 4px 12px rgba(0,0,0,.15)}
#veil{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
nav#drawer{top:calc(env(safe-area-inset-top,0px) + 8px);bottom:calc(env(safe-area-inset-bottom,0px) + 8px);left:8px;padding:0 0 8px;border:1px solid var(--glass-line);border-radius:26px;background:var(--glass-strong);-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);box-shadow:var(--glass-shadow),var(--hi);transform:translateX(-115%)}
.brand{margin:8px;border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 85%,#fff),var(--brand) 55%,color-mix(in srgb,var(--brand) 72%,#000));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
nav#drawer button{width:calc(100% - 16px);margin:2px 8px;border-left:0;border-radius:16px}
nav#drawer button.on{background:var(--tint);border-left:0;box-shadow:inset 0 1px 0 #fff,0 2px 10px rgba(36,87,255,.18)}
.row,.pbar,.pgrid,.empty,.tw{background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--hi),0 4px 14px rgba(20,40,120,.07)}
.row,.pbar,.pgrid{border-left:4px solid var(--brand)}
.empty{border:1.5px dashed var(--line);border-radius:18px;box-shadow:none}
.panel,.stats,.cam{background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow),var(--hi);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
.panel{border-radius:18px}
.cam{border-radius:22px}
.stats{border-radius:20px;overflow:hidden}
.stats div{border-bottom:1px solid var(--glass-line)}
.stats div:nth-child(odd){border-right:1px solid var(--glass-line)}
.next{position:relative;overflow:hidden;border-radius:26px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 84%,#fff),var(--brand) 52%,color-mix(in srgb,var(--brand) 70%,#000));box-shadow:0 14px 34px rgba(36,87,255,.32),inset 0 1px 0 rgba(255,255,255,.45)}
.next::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px 220px at 18% -10%,rgba(255,255,255,.34),transparent 60%)}
.next>*{position:relative;z-index:1}
.btn{border-radius:999px;border:1px solid rgba(255,255,255,.35);background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 82%,#fff),var(--brand));color:#fff;box-shadow:0 6px 16px rgba(36,87,255,.30),inset 0 1px 0 rgba(255,255,255,.45)}
.btn.ghost{background:var(--glass);color:var(--link);border:1px solid var(--glass-line);box-shadow:var(--hi);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.btn.bad{background:linear-gradient(180deg,#EE5468,#D6283F);color:#fff;border-color:rgba(255,255,255,.3);box-shadow:0 6px 16px rgba(214,40,63,.28),inset 0 1px 0 rgba(255,255,255,.4)}
.btn.ok{background:linear-gradient(180deg,#22B26A,#0E8F4A);color:#fff;border-color:rgba(255,255,255,.3);box-shadow:0 6px 16px rgba(14,143,74,.28),inset 0 1px 0 rgba(255,255,255,.4)}
.btn:disabled{box-shadow:none}
.swa button{background:#2457FF}.swa button.bad{background:#D6283F}.swa button.ok{background:#0E8F4A}
.swr:not(.open) .swa{visibility:hidden}
.swc{background:transparent}
input,select,textarea{border:1.5px solid var(--line);border-radius:14px;background:var(--glass-strong)}
input[type=checkbox]{border-radius:6px}
.seg{border:1px solid var(--glass-line);border-radius:999px;background:var(--glass);padding:3px;gap:2px;box-shadow:var(--hi);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.seg button{border-radius:999px}
.seg button.on{box-shadow:0 4px 12px rgba(36,87,255,.35),inset 0 1px 0 rgba(255,255,255,.4)}
.stepper button{border-radius:12px;background:var(--glass);border:1px solid var(--glass-line)}
.chip{border-radius:999px;padding:2px 9px}
.bar,.bar i{border-radius:99px}
.defbtn{border-radius:999px}
.trow.sel{border-radius:14px}
#modal{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sheet{background:var(--glass-strong);border:1px solid var(--glass-line);border-radius:28px;box-shadow:0 20px 50px rgba(5,10,60,.35),var(--hi);-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8)}
.toast{border-radius:999px;background:color-mix(in srgb,var(--ink) 84%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast.err{background:color-mix(in srgb,#D6283F 92%,transparent)}
.toast.ok{background:color-mix(in srgb,#0E8F4A 92%,transparent)}
#auth{position:fixed;inset:0;z-index:80;display:none;overflow-y:auto;background:radial-gradient(700px 420px at 8% -4%,color-mix(in srgb,var(--brand) 26%,transparent),transparent 62%),radial-gradient(620px 460px at 104% 12%,color-mix(in srgb,var(--tint) 85%,transparent),transparent 58%),var(--bg);padding:calc(env(safe-area-inset-top,0px) + 20px) 16px calc(env(safe-area-inset-bottom,0px) + 20px)}
#auth.on{display:block}
.authcard{max-width:420px;margin:5vh auto 0;background:var(--glass-strong);border:1px solid var(--glass-line);border-radius:28px;padding:22px;box-shadow:0 20px 50px rgba(5,10,60,.25),var(--hi);-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6)}
.authcard h1{margin:0 0 2px;font-size:1.9rem;font-weight:800;letter-spacing:-.02em;color:var(--link)}
@media (prefers-reduced-transparency:reduce){:root{--glass:var(--surface);--glass-strong:var(--surface)}*{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== Drucken der Packliste ===== */
#printarea{display:none}
@media print{
  @page{size:A4;margin:12mm}
  html,body{background:#fff!important}
  body::before{display:none!important}
  body>*:not(#printarea){display:none!important}
  #printarea{display:block;color:#000;font:12pt/1.3 Arial,Helvetica,sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #printarea h1{font-size:20pt;margin:0 0 2mm}
  #printarea .pmeta{margin-bottom:6mm;font-size:11pt}
  .ptable{width:100%;border-collapse:collapse}
  .ptable th{font-size:10pt;text-align:left;background:#fff;color:#000;border-bottom:2px solid #000;padding:2mm 1mm}
  .ptable td{border-bottom:1px solid #999;padding:2.2mm 1mm;vertical-align:middle}
  .ptable tr{page-break-inside:avoid}
  .ptable .pgrp td{background:#e6e6e6;font-weight:700;border-bottom:1px solid #000;padding:1.5mm 1mm}
  .ptable .pbox{width:15mm;text-align:center}
  .ptable .pbox span{display:inline-block;width:6mm;height:6mm;border:1.5px solid #000;vertical-align:middle}
  .ptable .pqty{width:18mm;font-weight:700;white-space:nowrap}
  .ptable .pnote{width:38mm}
  #printarea .psign{margin-top:10mm;font-size:10.5pt}
  /* Packliste im Aufbau der Word-Vorlage */
  .ppage{break-after:page}
  .ppage:last-of-type{break-after:auto}
  .phead{display:flex;justify-content:space-between;gap:8mm;align-items:flex-start}
  .pkv td{padding:0.6mm 4mm 0.6mm 0;font-size:11.5pt;vertical-align:top}
  .pkv td:first-child{white-space:nowrap}
  .psig{font-size:11pt;padding-top:12mm;white-space:nowrap}
  .peq{font-size:14pt;margin:7mm 0 2mm}
  .psec{break-inside:avoid;margin-top:3mm}
  .psec h3{font-size:12.5pt;margin:0 0 1mm;color:#000;text-transform:none;letter-spacing:0}
  .psec ul{list-style:none;margin:0;padding:0 0 0 6mm}
  .psec ul ul{padding-left:10mm;font-size:11pt}
  .psec li{margin:1.2mm 0}
  .pchk{display:inline-block;width:4mm;height:4mm;border:1.2px solid #000;margin-right:2.5mm;vertical-align:-0.6mm}
  .ppr{color:#333;font-size:10pt}
  .ptot{margin-top:6mm;font-size:11.5pt}
}
/* Packliste in der App: Bereiche und Rack-Inhalt */
.lsec{margin:16px 0 6px;font-size:.95rem;color:var(--mute)}
.psub{margin:6px 0 0 4px;padding-left:10px;border-left:2px solid var(--line)}
.psub ul{margin:4px 0 0;padding-left:18px}

.topbtn.iconbtn{width:42px;height:42px;padding:0;display:grid;place-items:center;border-radius:14px}

.camtools{display:flex;gap:8px;align-items:center;padding:8px 8px 0}
.camtools .btn.on{background:var(--brand);color:#fff}

/* ===== Seitenleiste mit Symbolen (ausklappbar) =====
   Beim Ausklappen wächst nur die Breite der Leiste. Die Symbole bleiben an ihrem Platz, die Beschriftungen blenden ein. */
nav#drawer{transform:none;width:58px;top:calc(env(safe-area-inset-top,0px) + 84px);bottom:calc(env(safe-area-inset-bottom,0px) + 8px);left:8px;border-radius:22px;padding:6px 0;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;transition:width .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;will-change:width}
nav#drawer::-webkit-scrollbar{display:none}
nav#drawer .brand{display:none}
nav#drawer button{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:14px;width:calc(100% - 12px);height:46px;min-height:46px;margin:4px 6px;padding:0 0 0 12px;border:0;border-left:0;border-radius:14px;font-size:1rem;white-space:nowrap;overflow:visible}
nav#drawer button .ni{flex:none}
nav#drawer button .lbl{flex:1;text-align:left;opacity:0;transform:translateX(-6px);transition:opacity .15s ease,transform .25s ease;pointer-events:none}
nav#drawer.on button .lbl{opacity:1;transform:none;transition-delay:.1s;pointer-events:auto}
nav#drawer button.on{color:var(--brand)}
nav#drawer .badge{position:absolute;top:2px;left:30px;right:auto;font-size:.68rem;padding:0 6px;min-width:18px;text-align:center;line-height:18px;transition:left .3s cubic-bezier(.2,.8,.2,1),top .3s ease}
nav#drawer.on{width:min(80vw,276px)}
nav#drawer.on .badge{top:14px;left:calc(min(80vw,276px) - 42px)}
@media (prefers-reduced-motion:reduce){nav#drawer,nav#drawer button .lbl,nav#drawer .badge{transition:none}}

.next[data-act]{cursor:pointer;transition:transform .12s ease}
.next[data-act]:active{transform:scale(.99)}
.next[data-act]:focus-visible{outline:3px solid var(--tint);outline-offset:3px}

/* Kopfleiste bleibt beim Ausklappen bedienbar (Menü-Knopf schließt die Leiste wieder) */
header.top{z-index:32}
.camtools .btn.on{background:var(--brand);color:#fff;border-color:transparent}
.vid #reader{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;padding:0!important;overflow:hidden}
.vid #reader>div,.vid #reader__scan_region{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;border:0!important;padding:0!important}
.vid #reader video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;visibility:visible!important;opacity:1!important}
.vid #reader canvas{display:none!important}
.camhint{min-height:22px;padding:4px 12px;font-size:.85rem;color:var(--mute,#64708f)}
.camhint.warn{color:var(--warn,#9A5B00)}
.camhint .btn{margin:2px 4px 2px 0}

/* ===== Design: Modernes Tech-/SaaS-Design =====
   Klare Karten, dezente Schatten, präzise Abstände, eine Akzentfarbe, ruhige Typografie. */
:root{--bg:#F5F8FC;--surface:#FFFFFF;--surface2:#EDF2F9;--ink:#0F1A3A;--mute:#5B6785;--line:#DCE4F0;--edge:#DCE4F0;--r:12px;--glass:#fff;--glass-strong:#fff;--glass-line:#DCE4F0;--glass-shadow:0 1px 2px rgba(15,26,58,.06),0 8px 24px rgba(15,26,58,.06);--hi:none;--sh:0 1px 2px rgba(15,26,58,.06),0 4px 12px rgba(15,26,58,.05);--ring:0 0 0 3px rgba(36,87,255,.22)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0A1024;--surface:#121A38;--surface2:#1A2448;--ink:#E8EEFF;--mute:#9AA7CF;--line:#27345F;--edge:#27345F;--glass:#121A38;--glass-strong:#121A38;--glass-line:#27345F;--glass-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);--sh:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.25)}}
:root[data-theme="dark"]{--bg:#0A1024;--surface:#121A38;--surface2:#1A2448;--ink:#E8EEFF;--mute:#9AA7CF;--line:#27345F;--edge:#27345F;--glass:#121A38;--glass-strong:#121A38;--glass-line:#27345F;--glass-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);--sh:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.25)}
body{background:var(--bg)}
body::before{background:radial-gradient(900px 380px at 50% -120px,color-mix(in srgb,var(--brand) 9%,transparent),transparent 70%)}
*{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
h2{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;margin:10px 0 16px}
h3{font-size:.8rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);margin:26px 0 8px}
.mute{color:var(--mute)}

header.top{top:0;margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:var(--sh);background:var(--surface);color:var(--ink)}
header.top .ttl{font-weight:700;font-size:1.1rem;letter-spacing:-.01em}
.burger{border:1px solid var(--line);border-radius:10px;background:var(--surface)}.burger i{background:var(--ink);height:2px}
.topbtn,.topbtn.iconbtn{background:var(--brand);color:#fff;border:0;border-radius:10px;box-shadow:0 1px 2px rgba(36,87,255,.35),0 4px 10px rgba(36,87,255,.2)}
.topbtn.iconbtn{background:var(--surface2);color:var(--ink);box-shadow:none}

nav#drawer{top:70px;left:10px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--glass-shadow)}
nav#drawer button{border-radius:10px;color:var(--mute)}
nav#drawer button.on{background:color-mix(in srgb,var(--brand) 12%,var(--surface));color:var(--brand);box-shadow:none}
nav#drawer button .lbl{font-weight:600;font-size:.95rem}
.badge{border-radius:99px;background:var(--brand);color:#fff}.badge.bad{background:var(--bad)}
#veil{background:rgba(10,16,36,.45)}

.btn,.btn.bad,.btn.ok{border:0;border-radius:10px;background:var(--brand);color:#fff;font-weight:600;box-shadow:0 1px 2px rgba(36,87,255,.35),0 4px 10px rgba(36,87,255,.18);transition:background .15s,box-shadow .15s,transform .08s}
.btn:hover{background:color-mix(in srgb,var(--brand) 88%,#000)}
.btn.bad{background:var(--bad);box-shadow:0 1px 2px rgba(214,40,63,.3),0 4px 10px rgba(214,40,63,.15)}
.btn.ok{background:var(--ok);box-shadow:0 1px 2px rgba(14,143,74,.3),0 4px 10px rgba(14,143,74,.15)}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh)}
.btn:active{transform:scale(.98)}
.btn:disabled{box-shadow:none;opacity:.45}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.row:focus-visible,.trow:focus-visible{outline:0;box-shadow:var(--ring)}
input,select,textarea{border:1px solid var(--line);border-radius:10px;background:var(--surface)}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:var(--ring);outline:0}
label.f{font-size:.82rem;font-weight:600;color:var(--mute)}

.row,.pbar,.pgrid{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:12px;box-shadow:var(--sh);margin-bottom:8px}
.row.bad{border-left-color:var(--bad)}.row.out{border-left-color:var(--warn)}
.empty{border:1.5px dashed var(--line);border-radius:14px;background:transparent}
.panel,.cam,.tw{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh)}
.stats{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh)}
.stats div{border-bottom:1px solid var(--line)}.stats div:nth-child(odd){border-right:1px solid var(--line)}
.stats div:last-child,.stats div:nth-last-child(2):nth-child(odd){border-bottom:0}
.stats b{font-size:1.7rem;font-weight:700;letter-spacing:-.03em}
.next{border-radius:16px;border:0;background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 70%,#0A1024));box-shadow:0 10px 28px rgba(36,87,255,.28)}
.next::after{background:radial-gradient(420px 200px at 15% -20%,rgba(255,255,255,.2),transparent 60%)}
.next .d{font-size:2.3rem;font-weight:700;letter-spacing:-.03em}
.next .n{font-size:1.2rem;font-weight:600}
.bar{border:0;height:8px;background:var(--surface2)}.bar,.bar i{border-radius:99px}
.next .bar{background:rgba(255,255,255,.25)}.next .bar i{background:#fff}
.chip{border-radius:99px;border:0;background:var(--surface2);color:var(--ink);font-weight:600;font-size:.74rem;padding:2px 9px}
.chip.bad{background:var(--bad-bg);color:var(--bad)}.chip.out{background:var(--warn-bg);color:var(--warn)}.chip.ok{background:var(--ok-bg);color:var(--ok)}
.notice{border-radius:12px;border:0}.notice.bad{border:0}

.seg{border:1px solid var(--line);border-radius:12px;background:var(--surface2);padding:3px;gap:2px;box-shadow:none}
.seg button{border-radius:9px;border:0;color:var(--mute);font-weight:600}
.seg button.on{background:var(--surface);color:var(--brand);box-shadow:var(--sh)}
.stepper button{border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
.defbtn{border-radius:99px}
.trow,.trow.sel{border-radius:10px}.trow.sel{background:color-mix(in srgb,var(--brand) 12%,var(--surface));color:var(--brand);outline:0}
ul.tree ul.tree{border-left:1px solid var(--line)}
.back{color:var(--brand);font-family:inherit;text-transform:none;font-size:.95rem}

.vid .reticle{border-radius:12px;border-width:2px}
#modal{background:rgba(10,16,36,.5)}
.sheet{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(10,16,36,.3)}
.toast{border-radius:12px;background:var(--ink);color:var(--bg);box-shadow:0 8px 24px rgba(10,16,36,.25);font-weight:600}
.toast.err{background:var(--bad);color:#fff}.toast.ok{background:var(--ok);color:#fff}
#auth{background:radial-gradient(900px 420px at 50% -100px,color-mix(in srgb,var(--brand) 14%,transparent),transparent 70%),var(--bg)}
.authcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 20px 50px rgba(15,26,58,.12);padding:26px}
.authcard h1{font-size:1.7rem;font-weight:700;letter-spacing:-.03em;color:var(--ink);text-transform:none;margin-bottom:10px}
/* Kategorien ziehen und ablegen */
.dnd-h{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;padding:6px 8px;color:var(--mute);font-size:18px;line-height:1}
.cat-ghost{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;will-change:transform;padding:6px 10px;border-radius:8px;background:var(--brand);color:var(--on-brand);font-weight:700;box-shadow:var(--sh)}
.cat-drop-top{display:none;border:2px dashed var(--line);border-radius:10px;padding:10px;text-align:center;color:var(--mute);margin-bottom:6px}
body.cat-dragging .cat-drop-top{display:block}
body.cat-dragging{user-select:none;-webkit-user-select:none}
.cat-edit.drop-ok,.cat-drop-top.drop-ok{outline:2px solid var(--brand);outline-offset:2px;background:var(--surface2)!important}

/* Kamera: drehende Box beim Start, Scan-Laser, oranger Rahmen um erkannte Codes (nur innerhalb des Kamerabilds) */
:root{--cam-hit:#FF8A00}
.vid .cam-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.vid .cam-laser{position:absolute;left:10%;right:10%;top:33%;height:2px;border-radius:2px;pointer-events:none;z-index:2;background:linear-gradient(90deg,transparent,var(--tint) 18%,var(--tint) 82%,transparent);box-shadow:0 0 10px var(--tint);opacity:.85;animation:sbLaser 2.4s ease-in-out infinite alternate}
.vid .cam-laser[hidden],.vid .camload[hidden]{display:none}
@keyframes sbLaser{from{top:33%}to{top:66%}}
.vid .camload{position:absolute;inset:0;z-index:4;display:grid;place-content:center;justify-items:center;gap:14px;pointer-events:none;color:var(--tint);font-weight:700;font-size:.95rem;background:rgba(5,10,40,.6)}
.vid .camload-box{position:relative;width:58px;height:58px;border:3px solid currentColor;border-radius:14px;animation:sbSpin 1.2s cubic-bezier(.65,.05,.35,1) infinite}
.vid .camload-box::before{content:"";position:absolute;inset:12px;border:2px solid currentColor;border-radius:6px;opacity:.55}
@keyframes sbSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.vid .cam-laser,.vid .camload-box{animation:none}}
/* beim Ziehen keine Glas-Unschärfe neu berechnen (flüssigeres Scrollen) */
body.cat-dragging .panel,body.cat-dragging .cam,body.cat-dragging .stats{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* DMX-Patch: Lampenfeld mit Auswahlknopf */
.lampin{display:flex;gap:6px;align-items:center}
.lampin input{flex:1;min-width:0}
.lampin .btn{padding:6px 10px;flex:none}