/* ============================================================
   KOSMOS Design-System "Warm Elegance" · SPEC/40_ui/base.css
   Ersetzt src/kosmos/shell/static/base.css 1:1 (Phase 1).
   Pflege NUR via Design-Phasen (siehe design-guide.md §1).
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --bg:#FAF7F2; --surface:#FFFFFF; --sunk:#F5F0E8; --border:#E8E0D5;
  --pri:#B08D57; --gold:#C9A227;
  --text:#2B2825; --mut:#8A8177;
  --ok:#4C7A5C; --okbg:#EAF2EC; --warn:#C08A2E; --warnbg:#F7EEDC;
  --err:#B3564D; --errbg:#F6E7E4;
  --esp:#2E2A25; --cream:#F0EAE2; --mutd:#A79B8D;
  --rc:20px; --rb:12px; --rp:8px;
  --sh:0 8px 24px rgba(43,40,37,.08); --shl:0 18px 44px rgba(43,40,37,.16);
  --glow:0 8px 26px rgba(176,141,87,.35);
  --serif:'Playfair Display',Georgia,serif;
  --ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --e:cubic-bezier(.22,.8,.32,1);
}
[data-theme="dark"]{
  --bg:#201B17; --surface:#2A241E; --sunk:#332C25; --border:#3D352C;
  --text:#F0EAE2; --mut:#A79B8D;
  --okbg:#26332B; --warnbg:#352A18; --errbg:#37221F;
  --esp:#241E19;
  --sh:0 8px 24px rgba(0,0,0,.35); --shl:0 18px 44px rgba(0,0,0,.5);
  --glow:0 8px 26px rgba(201,162,39,.2);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--ui);background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;font-size:14px;line-height:1.45;
  transition:background .3s,color .3s}
button,input,select,textarea{font-family:inherit;color:inherit;font-size:inherit}
button{background:none;border:none;cursor:pointer}
img{display:block;max-width:100%}
a{color:var(--pri)}
::selection{background:rgba(201,162,39,.3)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.mono{font-family:var(--mono);letter-spacing:.04em}

/* ---------- Shell-Layout ---------- */
.shell{display:flex;min-height:100dvh}
.side{flex:none;width:250px;background:var(--esp);color:var(--cream);
  display:flex;flex-direction:column;padding:16px 12px;gap:2px;
  position:sticky;top:0;height:100dvh;overflow-y:auto;scrollbar-width:thin}
.side .wm{font-family:var(--serif);font-weight:700;font-size:20px;
  letter-spacing:.14em;padding:8px 12px 4px;color:var(--cream)}
.side .wm em{font-style:normal;color:var(--gold)}
.side .shop{font-size:11px;color:var(--mutd);padding:0 12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:10px}
.ngroup{font-size:9.5px;font-weight:700;letter-spacing:.16em;
  color:rgba(240,234,226,.4);padding:12px 14px 6px;text-transform:uppercase}
.nitem{position:relative;display:flex;align-items:center;gap:12px;height:44px;
  padding:0 14px;border-radius:12px;color:var(--mutd);font-size:13.5px;
  font-weight:600;width:100%;text-align:left;transition:color .2s,background .2s}
.nitem .ic{width:18px;height:18px}
.nitem:hover{color:var(--cream);background:rgba(255,255,255,.05)}
.nitem.on{color:#1D1813;background:linear-gradient(135deg,#D9B23A,#B08D57);
  box-shadow:0 6px 18px rgba(201,162,39,.3)}
.nitem .nb{margin-left:auto;font-family:var(--mono);font-size:10px;
  background:rgba(255,255,255,.14);border-radius:6px;padding:2px 7px}
.nitem.on .nb{background:rgba(29,24,19,.2)}
.side-foot{margin-top:auto;padding:12px;border-top:1px solid rgba(255,255,255,.08);
  font-size:11px;color:var(--mutd);display:flex;align-items:center;gap:8px}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.top{flex:none;height:64px;display:flex;align-items:center;gap:14px;
  padding:0 22px;background:var(--surface);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:5}
.top h1{font-family:var(--serif);font-size:21px;font-weight:700;line-height:1.1}
.top .sub{font-size:11.5px;color:var(--mut)}
.top-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.scan-fab{width:44px;height:44px;border-radius:14px;
  background:linear-gradient(135deg,#C9A227,#B08D57);color:#FFFDF8;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--glow);
  transition:transform .16s var(--e)}
.scan-fab:active{transform:scale(.9)}
.uchip{width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--esp),#4A4238);color:var(--cream);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.view{flex:1;padding:22px 24px 40px;position:relative}
.view.vin>*{animation:vIn .34s var(--e) both}
.view.vin>*:nth-child(2){animation-delay:.04s}
.view.vin>*:nth-child(3){animation-delay:.08s}
.view.vin>*:nth-child(4){animation-delay:.12s}
.view.vin>*:nth-child(5){animation-delay:.16s}
.vwrap{max-width:1440px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.phead{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.phead h2{font-family:var(--serif);font-size:26px;font-weight:700}
.phead .sub{color:var(--mut);font-size:13px;margin-top:3px}
.phead .r{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.gsplit{grid-template-columns:1fr 360px;align-items:start}

/* ---------- Komponenten ---------- */
.card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--rc);box-shadow:var(--sh)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 18px;border-radius:var(--rb);font-weight:600;
  font-size:14px;white-space:nowrap;
  transition:transform .16s var(--e),box-shadow .2s,background .2s,
  border-color .2s,opacity .2s}
.btn:active{transform:scale(.97)}
.btn-gold{background:linear-gradient(135deg,#C9A227,#B08D57 62%,#9A7748);
  color:#FFFDF8;box-shadow:var(--glow)}
.btn-gold:hover{transform:translateY(-1px)}
.btn-gold[disabled]{opacity:.45;box-shadow:none;cursor:not-allowed;transform:none}
.btn-ghost{border:1px solid var(--border);background:var(--surface)}
.btn-ghost:hover{background:var(--sunk)}
.btn-danger{border:1px solid var(--err);color:var(--err);background:var(--surface)}
.btn-danger:hover{background:var(--errbg)}
.btn-sm{height:36px;padding:0 13px;font-size:13px;border-radius:10px}
.btn-xs{height:30px;padding:0 10px;font-size:12px;border-radius:9px;gap:6px}
.ibtn{width:40px;height:40px;border-radius:12px;display:inline-flex;
  align-items:center;justify-content:center;color:var(--mut);
  transition:background .18s,color .18s,transform .14s}
.ibtn:hover{background:var(--sunk);color:var(--text)}
.ibtn:active{transform:scale(.92)}
.ibtn .ic{width:18px;height:18px}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;
  border-radius:var(--rp);background:var(--sunk);border:1px solid var(--border);
  font-size:12px;font-weight:600;color:var(--mut)}
.cchip{display:inline-flex;align-items:center;height:24px;padding:0 8px;
  border-radius:6px;background:var(--sunk);border:1px solid var(--border);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--mut);
  text-transform:uppercase;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;
  border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.06em}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.p-ok{background:var(--okbg);color:var(--ok)}
.p-mut{background:var(--sunk);color:var(--mut)}
.p-warn{background:var(--warnbg);color:var(--warn)}
.p-err{background:var(--errbg);color:var(--err)}
.badge{display:inline-flex;height:20px;padding:0 7px;border-radius:5px;
  font-size:9.5px;font-weight:700;letter-spacing:.08em;align-items:center;
  border:1px solid var(--border);color:var(--mut)}
.badge-a{border-color:rgba(201,162,39,.5);color:var(--gold)}
.badge-l{border-color:rgba(76,122,92,.45);color:var(--ok)}
.stepper{display:inline-flex;align-items:center;gap:2px;background:var(--sunk);
  border:1px solid var(--border);border-radius:12px;height:44px;padding:0 4px}
.stb{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;color:var(--mut);
  transition:background .15s,color .15s,transform .12s}
.stb:hover{background:var(--surface);color:var(--text);box-shadow:var(--sh)}
.stb:active{transform:scale(.88)}
.stb .ic{width:14px;height:14px}
.stv{min-width:26px;text-align:center;font-weight:700;font-size:13.5px;
  font-variant-numeric:tabular-nums}
.fl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut)}
.hint{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mut)}
.hint .ic{width:14px;height:14px}

/* ---------- Formen ---------- */
.fld{display:flex;flex-direction:column;gap:7px}
.inp{width:100%;height:44px;border-radius:12px;border:1.5px solid var(--border);
  background:var(--sunk);padding:0 14px;font-size:14px;font-weight:500;
  outline:none;transition:border-color .2s,box-shadow .2s}
.inp:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,39,.13)}
.inp.err{border-color:var(--err);box-shadow:0 0 0 4px rgba(179,86,77,.12)}
.sel{position:relative;display:block}
.sel select{width:100%;height:44px;border-radius:12px;border:1.5px solid var(--border);
  background:var(--sunk);padding:0 38px 0 14px;font-size:14px;font-weight:500;
  outline:none;appearance:none;cursor:pointer;
  transition:border-color .2s,box-shadow .2s}
.sel select:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,39,.13)}
.sel .ic{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--mut);pointer-events:none}
.ferr{font-size:11.5px;color:var(--err);display:none;align-items:center;gap:5px}
.ferr.on{display:flex}
.scanline-inp{display:flex;align-items:center;gap:10px;height:54px;
  border-radius:16px;background:var(--sunk);border:1.5px solid var(--border);
  padding:0 8px 0 16px;transition:border-color .2s,box-shadow .2s}
.scanline-inp:focus-within{border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(201,162,39,.14)}
.scanline-inp .ic{color:var(--gold)}
.scanline-inp input{flex:1;background:none;border:none;outline:none;
  font-size:15px;min-width:0}
.scanline-inp input::placeholder{color:var(--mut)}

/* ---------- Tabellen & Listen ---------- */
.tbl{overflow:hidden}
.thead,.trow{display:grid;gap:12px;align-items:center;padding:11px 18px}
.thead{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut);border-bottom:1px solid var(--border)}
.trow{border-bottom:1px solid var(--border);transition:background .18s;
  animation:rIn .3s var(--e) both}
.trow:last-child{border-bottom:none}
.trow:hover{background:var(--sunk)}
.trow:nth-child(even):not(:hover){background:color-mix(in srgb,var(--sunk) 50%,transparent)}
.tcell{min-width:0;display:flex;align-items:center;gap:10px;font-size:13px}
.tcell.r{justify-content:flex-end;text-align:right}
.thumb{width:40px;height:40px;border-radius:11px;object-fit:cover;
  border:1px solid var(--border);flex:none;background:var(--sunk)}
.thumb.rd{border-radius:50%}
.tt{display:flex;flex-direction:column;gap:4px;min-width:0}
.tt b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.tt span{font-size:11px;color:var(--mut)}
.mono-v{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:44px 20px;color:var(--mut);text-align:center}
.empty .ic{width:32px;height:32px;color:var(--border)}
.empty b{font-family:var(--serif);font-size:18px;color:var(--text);font-weight:600}

/* ---------- KPI, Meter, Bewegungen ---------- */
.kpi{padding:16px 18px;display:flex;flex-direction:column;gap:6px;
  transition:transform .2s var(--e),box-shadow .2s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shl)}
.kpi .kl{font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:7px}
.kpi .kl .ic{width:14px;height:14px;color:var(--gold)}
.kpi .kv{font-family:var(--serif);font-size:27px;font-weight:700;
  font-variant-numeric:tabular-nums}
.kpi .kd{font-size:11px;color:var(--mut);font-weight:600}
.kpi .kd.w{color:var(--warn)}
.meter{height:8px;border-radius:6px;background:var(--sunk);overflow:hidden;
  border:1px solid var(--border)}
.meter i{display:block;height:100%;border-radius:6px;
  background:linear-gradient(90deg,var(--gold),var(--pri));transition:width .6s var(--e)}
.catrow{display:flex;flex-direction:column;gap:6px;padding:7px 0}
.catrow .cl{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600}
.catrow .cl span{font-family:var(--mono);color:var(--mut);font-size:11.5px}
.mov{display:flex;align-items:center;gap:12px;padding:11px 4px;
  border-bottom:1px solid var(--border);font-size:13px;animation:rIn .3s var(--e) both}
.mov:last-child{border:none}
.mov .mi2{width:34px;height:34px;border-radius:11px;display:flex;
  align-items:center;justify-content:center;flex:none}
.mov .mi2 .ic{width:16px;height:16px}
.mov b{font-weight:600;font-size:13px}
.mov small{color:var(--mut);font-size:11px;display:block;margin-top:2px}
.mov .mv{margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:600}

/* ---------- POS ---------- */
.pos-grid{display:grid;grid-template-columns:1fr 350px;gap:16px;align-items:start}
.cartlist{display:flex;flex-direction:column;gap:4px;padding:4px 8px 10px}
.crow{display:grid;grid-template-columns:46px 1fr auto auto auto 30px;gap:12px;
  align-items:center;padding:10px;border-radius:14px;transition:background .18s;
  animation:rIn .3s var(--e) both}
.crow:hover{background:var(--sunk)}
.crow .thumb{width:46px;height:46px}
.sumrow{display:flex;justify-content:space-between;font-size:13px;
  color:var(--mut);padding:3px 0}
.sumrow .v{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--text)}
.sumrow.disc .v{color:var(--ok)}
.sumtotal{display:flex;align-items:baseline;justify-content:space-between;padding-top:6px}
.sumtotal span{font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut)}
.sumtotal b{font-family:var(--serif);font-size:33px;font-weight:700;
  font-variant-numeric:tabular-nums}
.payrow{display:flex;gap:8px}
.paychip{flex:1;height:42px;border-radius:12px;border:1.5px solid var(--border);
  background:var(--surface);display:flex;align-items:center;justify-content:center;
  gap:7px;font-size:12.5px;font-weight:600;color:var(--mut);transition:all .2s var(--e)}
.paychip .ic{width:15px;height:15px}
.paychip.on{border-color:var(--pri);color:var(--pri);
  background:color-mix(in srgb,var(--pri) 8%,var(--surface));
  box-shadow:0 0 0 3px rgba(176,141,87,.12)}

/* ---------- Beleg (OHNE QR-Block, decision log #3) ---------- */
.rc{background:var(--surface);border-radius:18px;padding:24px;display:flex;
  flex-direction:column;gap:14px}
.rc-h{text-align:center;display:flex;flex-direction:column;gap:6px;
  align-items:center;padding-bottom:14px;border-bottom:1.5px dashed var(--border)}
.rc-h .wm{font-family:var(--serif);font-size:21px;font-weight:700;letter-spacing:.14em}
.rc-h .wm em{font-style:normal;color:var(--gold)}
.rc-no{font-family:var(--serif);font-size:29px;font-weight:700}
.rc-meta{font-size:11.5px;color:var(--mut);display:flex;gap:10px;align-items:center;
  justify-content:center;flex-wrap:wrap}
.rc-lines{display:flex;flex-direction:column;gap:11px}
.rc-l{display:flex;justify-content:space-between;gap:14px;font-size:13px}
.rc-l .l{display:flex;flex-direction:column;gap:4px;min-width:0}
.rc-l .v{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.rc-f{border-top:1.5px dashed var(--border);padding-top:12px;display:flex;
  flex-direction:column;gap:7px}

/* ---------- Label v2 schmal (UI-Vorschau) ---------- */
.label-nr{display:flex;align-items:center;gap:14px;background:#fff;color:#25211C;
  border:1px solid var(--border);border-radius:12px;padding:12px 14px;
  box-shadow:var(--sh)}
.label-nr .ln-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.label-nr .ln-text b{font-size:14px;font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.label-nr .ln-text .lp{font-family:var(--mono);font-size:15px;font-weight:700}
.label-nr .ln-text .lc{font-family:var(--mono);font-size:10px;color:#8A8177;
  letter-spacing:.04em}
.label-nr .ln-qr{width:72px;height:72px;flex:none;background:#fff;padding:2px}
.label-nr .ln-qr img,.label-nr .ln-qr svg{width:100%;height:100%}

/* ---------- Toasts (Klassenschema aus api.js bleibt!) ---------- */
#toasts,.toast-wrap{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:10px;z-index:400;align-items:center;
  pointer-events:none;max-width:92vw}
.toast{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--border);border-radius:14px;padding:12px 18px 12px 13px;
  box-shadow:var(--shl);font-size:13.5px;font-weight:600;animation:tIn .32s var(--e);
  max-width:100%}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--mut)}
.toast-success::before{background:var(--ok)}
.toast-error::before{background:var(--err)}
.toast-warning::before{background:var(--warn)}
.toast-info::before{background:var(--warn)}
.toast-fade{opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}

/* ---------- Modal ---------- */
.mroot{position:fixed;inset:0;z-index:220;display:flex;align-items:center;
  justify-content:center;padding:18px;opacity:0;pointer-events:none;
  transition:opacity .22s}
.mroot.on{opacity:1;pointer-events:auto}
.mscrim{position:absolute;inset:0;background:rgba(24,20,16,.5);backdrop-filter:blur(4px)}
.mcard{position:relative;width:min(560px,100%);max-height:min(88dvh,900px);
  background:var(--surface);border:1px solid var(--border);border-radius:24px;
  box-shadow:var(--shl);display:flex;flex-direction:column;
  transform:scale(.95) translateY(10px);opacity:0;
  transition:transform .28s var(--e),opacity .24s}
.mroot.on .mcard{transform:none;opacity:1}
.mcard.wide{width:min(760px,100%)}
.mhead{flex:none;display:flex;align-items:center;gap:12px;padding:20px 22px 14px;
  border-bottom:1px solid var(--border)}
.mhead .mi{width:40px;height:40px;border-radius:13px;
  background:color-mix(in srgb,var(--gold) 14%,var(--surface));color:var(--pri);
  display:flex;align-items:center;justify-content:center}
.mhead h3{font-family:var(--serif);font-size:20px;font-weight:700}
.mhead p{font-size:12px;color:var(--mut)}
.mbody{padding:20px 22px;overflow-y:auto;scrollbar-width:thin;display:flex;
  flex-direction:column;gap:16px}
.mfoot{flex:none;display:flex;gap:10px;justify-content:flex-end;
  padding:14px 22px 20px;border-top:1px solid var(--border)}
.mfoot .sp{margin-right:auto}

/* ---------- Scan-Overlay (Kamera, neue Struktur) ---------- */
.ovl{position:fixed;inset:0;z-index:200;background:rgba(24,20,16,.93);
  backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:20px;opacity:0;pointer-events:none;
  transition:opacity .24s var(--e)}
.ovl.on{opacity:1;pointer-events:auto}
.ovcard{width:min(440px,100%);background:rgba(42,36,30,.75);
  border:1px solid rgba(240,234,226,.14);border-radius:24px;padding:18px;
  backdrop-filter:blur(18px);display:flex;flex-direction:column;gap:13px;
  transform:scale(.95);opacity:0;transition:transform .26s var(--e),opacity .26s}
.ovl.on .ovcard{transform:scale(1);opacity:1}
.ovhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ovhead h3{font-family:var(--serif);color:var(--cream);font-size:20px;font-weight:600}
.frostx{width:38px;height:38px;border-radius:50%;background:rgba(240,234,226,.12);
  color:var(--cream);display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .14s}
.frostx:hover{background:rgba(240,234,226,.22)}
.frostx:active{transform:scale(.9)}
.vf{position:relative;aspect-ratio:1/1.04;border-radius:18px;overflow:hidden;
  background:#0D0B09}
.vf video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.94}
.vfb span{position:absolute;width:38px;height:38px;border:3.5px solid var(--gold);
  filter:drop-shadow(0 0 8px rgba(201,162,39,.55))}
.vfb span:nth-child(1){top:11%;left:9%;border-right:none;border-bottom:none;
  border-radius:10px 0 0 0}
.vfb span:nth-child(2){top:11%;right:9%;border-left:none;border-bottom:none;
  border-radius:0 10px 0 0}
.vfb span:nth-child(3){bottom:11%;left:9%;border-right:none;border-top:none;
  border-radius:0 0 0 10px}
.vfb span:nth-child(4){bottom:11%;right:9%;border-left:none;border-top:none;
  border-radius:0 0 10px 0}
.vfl{position:absolute;left:8%;right:8%;top:14%;height:2.5px;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--gold) 30%,#F4D67A 50%,
  var(--gold) 70%,transparent);box-shadow:0 0 20px 3px rgba(201,162,39,.6);
  animation:scm 2.1s ease-in-out infinite}
.vff{position:absolute;inset:0;
  background:radial-gradient(circle,rgba(244,214,122,.5),transparent 65%);opacity:0}
.ovl.done .vff{animation:fl .6s var(--e)}
.ovmsg{display:none;align-items:center;gap:9px;border-radius:12px;
  padding:10px 14px;font-size:12.5px;font-weight:600;animation:rIn .25s var(--e)}
.ovmsg .ic{width:16px;height:16px}
.ovmsg.e{background:var(--err);color:#FFF6F2}
.ovmsg.s{background:rgba(76,122,92,.94);color:#F2F8F4}
.ovl.err .ovmsg.e{display:flex}
.ovl.done .ovmsg.s{display:flex}
.ovhint{color:var(--cream);font-size:13px;text-align:center;opacity:.85}
.ovsheet{position:absolute;bottom:0;left:0;right:0;background:rgba(32,27,23,.95);
  backdrop-filter:blur(16px);border-radius:24px 24px 0 0;padding:12px 20px 24px;
  transform:translateY(100%);transition:transform .34s var(--e);
  border-top:1px solid rgba(240,234,226,.12)}
.ovl.on .ovsheet{transform:translateY(0);transition-delay:.08s}
.grab{width:44px;height:4px;border-radius:4px;background:rgba(240,234,226,.25);
  margin:0 auto 12px}
.ovsheet h4{color:var(--mutd);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:10px}
.schips{display:flex;gap:8px;flex-wrap:wrap}
.schip{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--cream);
  background:rgba(240,234,226,.09);border:1px solid rgba(240,234,226,.16);
  border-radius:8px;height:34px;padding:0 12px;display:inline-flex;
  align-items:center;transition:all .18s}
.schip:hover{background:rgba(201,162,39,.25);border-color:var(--gold)}

/* ---------- Drawer & Suche ---------- */
.dscrim{position:fixed;inset:0;background:rgba(24,20,16,.35);opacity:0;
  pointer-events:none;transition:opacity .28s;z-index:60}
.dscrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(390px,100%);
  background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shl);
  z-index:65;transform:translateX(103%);transition:transform .34s var(--e);
  overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:16px;
  scrollbar-width:thin}
.drawer.on{transform:none}
.drphoto{border-radius:18px;overflow:hidden;border:1px solid var(--border);
  aspect-ratio:4/3;background:var(--sunk)}
.drphoto img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e)}
.drawer:hover .drphoto img{transform:scale(1.04)}
.mrow{display:flex;justify-content:space-between;padding:10px 2px;
  border-bottom:1px solid var(--border);font-size:13px}
.mrow:last-child{border:none}
.mrow span{color:var(--mut)}
.mrow b{font-family:var(--mono);font-weight:600;font-size:12.5px}
.sroot{position:fixed;inset:0;z-index:230;display:flex;justify-content:center;
  padding:9dvh 18px 18px;opacity:0;pointer-events:none;transition:opacity .2s}
.sroot.on{opacity:1;pointer-events:auto}
.scard{position:relative;width:min(620px,100%);max-height:70dvh;
  background:var(--surface);border:1px solid var(--border);border-radius:22px;
  box-shadow:var(--shl);display:flex;flex-direction:column;overflow:hidden;
  transform:scale(.97) translateY(-8px);transition:transform .24s var(--e)}
.sroot.on .scard{transform:none}
.sres{overflow-y:auto;padding:8px;scrollbar-width:thin}
.sitem{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;
  border-radius:13px;text-align:left;transition:background .15s}
.sitem:hover{background:var(--sunk)}
.sgrp{font-size:9.5px;font-weight:700;letter-spacing:.14em;color:var(--mut);
  padding:10px 14px 5px;text-transform:uppercase}

/* ---------- Mobile-Navigation ---------- */
.bnav{display:none;position:fixed;bottom:0;left:0;right:0;height:66px;
  background:var(--surface);border-top:1px solid var(--border);z-index:90;
  align-items:center;justify-content:space-around;padding:0 6px;
  padding-bottom:env(safe-area-inset-bottom)}
.bni{display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:9.5px;font-weight:700;letter-spacing:.04em;color:var(--mut);
  height:54px;justify-content:center;padding:0 14px;border-radius:14px;
  transition:color .2s}
.bni .ic{width:21px;height:21px}
.bni.on{color:var(--pri)}
.bni.on .ic{color:var(--gold)}
.bfab{width:54px;height:54px;border-radius:18px;
  background:linear-gradient(135deg,#C9A227,#B08D57);color:#FFFDF8;display:flex;
  align-items:center;justify-content:center;box-shadow:var(--glow);
  margin-top:-26px;border:4px solid var(--bg)}
.msheet{position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--surface);
  border-radius:24px 24px 0 0;box-shadow:var(--shl);padding:14px 18px
  calc(20px + env(safe-area-inset-bottom));transform:translateY(102%);
  transition:transform .32s var(--e);max-height:76dvh;overflow-y:auto}
.msheet.on{transform:none}
.msheet .grid{grid-template-columns:1fr 1fr}
.mnav{display:flex;align-items:center;gap:12px;padding:13px 12px;border-radius:14px;
  font-weight:600;font-size:14px;width:100%;text-align:left;
  transition:background .15s}
.mnav:hover{background:var(--sunk)}
.mnav .ic{width:19px;height:19px;color:var(--pri)}

/* ---------- Keyframes ---------- */
@keyframes vIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes rIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes tIn{from{opacity:0;transform:translateY(18px) scale(.96)}
  to{opacity:1;transform:none}}
@keyframes scm{0%{top:14%}50%{top:84%}100%{top:14%}}
@keyframes fl{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  .side{width:76px;padding:14px 10px}
  .side .wm,.side .shop,.ngroup,.nitem span.lbl,.nitem .nb,.side-foot span{display:none}
  .side-foot{justify-content:center}
  .nitem{justify-content:center;padding:0}
  .gsplit{grid-template-columns:1fr}
  .pos-grid{grid-template-columns:1fr 320px}
}
@media(max-width:900px){
  .pos-grid{grid-template-columns:1fr}
  .g4,.g3{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .side{display:none}
  .bnav{display:flex}
  .view{padding:16px 14px 96px}
  .top{padding:0 14px;height:60px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .thead{display:none}
  .trow{grid-template-columns:1fr auto !important;grid-auto-rows:auto;row-gap:8px;
    padding:13px 14px;border:1px solid var(--border);border-radius:16px;
    margin:0 0 8px;background:var(--surface)}
  .trow:hover{background:var(--surface)}
  .trow .hc{display:none}
  .crow{grid-template-columns:44px 1fr auto;row-gap:8px}
  .crow .thumb{width:44px;height:44px}
  .crow .cu{display:none}
  .crow .ct{grid-column:3;grid-row:1}
  .crow .stepper,.crow .qf{grid-column:2;grid-row:2;justify-self:start}
  .crow .cx{grid-column:3;grid-row:2;justify-self:end}
  .mcard{width:100%;max-height:92dvh;border-radius:24px 24px 0 0;align-self:flex-end}
  .mroot{align-items:flex-end;padding:0}
  .drawer{width:100%;top:auto;bottom:0;max-height:90dvh;border-radius:24px 24px 0 0;
    border-left:none;border-top:1px solid var(--border);transform:translateY(102%)}
  .drawer.on{transform:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;
    transition-duration:.001s !important}
}

/* ---------- Print (nur Screen-Chrome ausblenden) ---------- */
@media print{
  .side,.bnav,.top-r,.msheet,.no-print{display:none !important}
  .view{padding:0}
  body{background:#fff}
  .card{box-shadow:none;border-color:#ccc}
}

/* ---------- Kamera-Button (geteilte Komponente Logistik/POS/Backoffice) ---------- */
.camera-btn{width:44px;height:44px;flex:none;border-radius:14px;
  background:linear-gradient(135deg,#C9A227,#B08D57);color:#FFFDF8;display:flex;
  align-items:center;justify-content:center;font-size:18px;box-shadow:var(--glow);
  transition:transform .16s var(--e);}
.camera-btn:hover{transform:scale(1.05);}
.camera-btn:active{transform:scale(.95);}

/* Touch-Pass: alle kritischen Klein-Targets ≥44px (POS-Marktstand) */
.frostx{width:44px;height:44px}
.schip{min-height:44px;padding:0 14px}
.crow{grid-template-columns:46px 1fr auto auto auto 44px}
.crow .cx{width:44px;height:44px}
.crow .stv{min-width:32px}

/* ---------- WP-J Hotfix: Form-Controls in Modalen (Dark-Mode Weiß-auf-Weiß) ----------
   Dokumentierte Hotfix-Ausnahme: base.css ist Design-System-Dokument (SPEC/40_ui);
   Pflege/Rückbau via SPEC/40_ui/master-fixplan.md (WP-J J2). */
:root{color-scheme:light}
[data-theme="dark"]{color-scheme:dark}
.mcard input:not([type="checkbox"]):not([type="file"]),
.mcard select,.mcard textarea,
.form-group input:not([type="checkbox"]):not([type="file"]),
.form-group select,.form-group textarea{
  background:var(--sunk);color:var(--text);border:1.5px solid var(--border);
  border-radius:12px;padding:0 14px;height:44px;font-size:14px;font-weight:500;
  outline:none;transition:border-color .2s,box-shadow .2s}
.mcard textarea,.form-group textarea{height:auto;min-height:88px;padding:10px 14px}
.mcard input:focus,.mcard select:focus,.mcard textarea:focus,
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,39,.13)}
.mcard input[type="checkbox"],.form-group input[type="checkbox"]{
  width:18px;height:18px;accent-color:var(--pri)}