/* Verpackungslager, Oberfläche. Copyright (c) Bädermaxx GmbH. Schrift: Barlow (SIL Open Font License, siehe fonts/OFL.txt). */
@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url("fonts/Barlow-Regular.ttf") format("truetype")}
@font-face{font-family:"Barlow";font-weight:500;font-display:swap;src:url("fonts/Barlow-Medium.ttf") format("truetype")}
@font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url("fonts/Barlow-SemiBold.ttf") format("truetype")}
@font-face{font-family:"Barlow";font-weight:700;font-display:swap;src:url("fonts/Barlow-Bold.ttf") format("truetype")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url("fonts/BarlowCondensed-SemiBold.ttf") format("truetype")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url("fonts/BarlowCondensed-Bold.ttf") format("truetype")}
:root{
  --ground:#EEF1F4;--surface:#FFFFFF;--surface2:#F5F7F9;--line:#D3DAE1;--ink:#1B2127;--muted:#586573;
  --side:#2E3740;--side-ink:#DCE3E9;--side-muted:#98A6B3;--side-active:#3E4A55;
  --accent:#0074D4;--accent-soft:#E2EFFB;
  --red:#C62828;--red-soft:#FBE7E7;--yellow-soft:#FFF3CF;--yellow-ink:#6A4A00;--green:#2E7D32;--green-soft:#E4F2E5;--gray-soft:#E9EDF0;
  --pic-bg:#F1F3F5;
  --font:"Barlow",system-ui,"Segoe UI",Roboto,Arial,sans-serif;--font-c:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --ground:#12171C;--surface:#1B2229;--surface2:#222B33;--line:#313C47;--ink:#E7ECF1;--muted:#9BA8B5;
  --side:#0D1216;--side-ink:#D5DDE4;--side-muted:#8795A2;--side-active:#232D36;--accent-soft:#16324A;
  --red:#EF6B63;--red-soft:#3A1D1C;--yellow-soft:#3A2F10;--yellow-ink:#F3D27A;--green:#5DBB63;--green-soft:#173019;--gray-soft:#262F38;--pic-bg:#2A333C;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 16px/1.45 var(--font)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,p{margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
[hidden]{display:none !important}

/* Rahmen */
.app{display:flex;min-height:100vh;min-height:100dvh}
.sidebar{flex:none;width:232px;background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;gap:2px;padding:16px 10px;position:sticky;top:0;height:100vh;height:100dvh;overflow:auto}
.brand{display:block;padding:4px 12px 16px;color:#fff}
.brand:hover{text-decoration:none}
.brand b{display:block;font:700 24px/1.05 var(--font-c);letter-spacing:.01em}
.brand span{font-size:13px;color:var(--side-muted)}
.brand img{display:block;max-width:100%;max-height:48px}
.nav{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 12px;border:0;border-radius:6px;background:none;color:inherit;font-weight:500;text-align:left}
.nav svg{flex:none;opacity:.85}
.nav:hover{background:var(--side-active);text-decoration:none}
.nav[aria-current="page"]{background:var(--side-active);color:#fff;box-shadow:inset 3px 0 0 var(--accent)}
.navsep{margin:10px 12px 4px;font-size:12px;color:var(--side-muted)}
.sidebar .spacer{flex:1}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:14px 24px;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar h1{font:600 28px/1.1 var(--font-c);flex:1;min-width:0}
.who{font-size:14px;color:var(--muted);text-align:right;line-height:1.2}
.who b{display:block;color:var(--ink);font-weight:600}
.content{flex:1;padding:20px 24px 48px;max-width:1400px;width:100%}
.tabbar,.moremenu{display:none}
.bare{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:16px}
.logincard{width:min(420px,100%)}
.logincard h1{font:700 32px/1.05 var(--font-c);margin-bottom:4px}

/* Bausteine */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;margin-bottom:16px}
.panel-h{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.panel-h h2{font:600 20px/1.2 var(--font-c);flex:1;min-width:0}
.panel-b{padding:16px}
.panel-b.flush{padding:0;overflow-x:auto}
.muted{color:var(--muted)}.small{font-size:14px}.nowrap{white-space:nowrap}.strong{font-weight:600}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.grow{flex:1}
.stack{display:flex;flex-direction:column;gap:14px}
.mt{margin-top:16px}.mb{margin-bottom:16px}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.toolbar .inp{width:auto;min-width:160px;flex:0 1 240px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;white-space:nowrap}
.btn:hover{border-color:var(--muted);text-decoration:none}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{filter:brightness(1.06);border-color:var(--accent)}
.btn-danger{color:var(--red)}
.btn-sm{min-height:36px;padding:0 12px;font-size:14px}
.btn-block{width:100%}
.linkbtn{border:0;background:none;padding:0;color:var(--accent);font-weight:600}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label,.field .lab{font-size:14px;font-weight:600}
.field .hint{font-size:13px;color:var(--muted)}
.field .errtxt{font-size:13px;color:var(--red);font-weight:600}
.inp{min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface);width:100%}
.inp:focus{border-color:var(--accent)}
.inp.bad{border-color:var(--red)}
.inp-upper{text-transform:uppercase}
.inp-num{text-align:right;font-variant-numeric:tabular-nums}
.inp-sm{min-height:36px;padding:4px 10px}
.w-sort{width:90px}
.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.formgrid .full{grid-column:1/-1}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.check{display:inline-flex;align-items:center;gap:10px;font-weight:500;min-height:44px}
.check input{width:20px;height:20px;accent-color:var(--accent)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.seg a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-right:1px solid var(--line);font-weight:600;color:var(--ink)}
.seg a:last-child{border-right:0}
.seg a:hover{text-decoration:none;background:var(--surface2)}
.seg a[aria-current="true"]{background:var(--ink);color:var(--surface)}
.lbl{display:inline-block;font:600 15px/1.25 var(--font-c);letter-spacing:.03em;padding:1px 7px;border:1.5px solid #15191D;border-radius:3px;background:#fff;color:#111;white-space:nowrap}
.lbl.big{font-size:20px;padding:2px 9px}
.tag{display:inline-block;padding:1px 8px;border-radius:4px;font-size:13px;font-weight:600;background:var(--gray-soft);color:var(--ink)}
.tag.red{background:var(--red-soft);color:var(--red)}.tag.yellow{background:var(--yellow-soft);color:var(--yellow-ink)}.tag.green{background:var(--green-soft);color:var(--green)}.tag.blue{background:var(--accent-soft);color:var(--accent)}
.pic{flex:none;display:block;width:48px;height:48px;border-radius:6px;background:var(--pic-bg);overflow:hidden;color:var(--muted)}
.pic svg,.pic img{display:block;width:100%;height:100%;object-fit:cover}
.pic.lg{width:200px;height:200px;border-radius:8px}
.pic.md{width:96px;height:96px}
.pname{display:flex;align-items:center;gap:12px;min-width:0;color:var(--ink)}
.pname:hover{text-decoration:none}
.pname .t{min-width:0}
.pname .t b{display:block;font-weight:600}
.flash{padding:12px 14px;border-radius:6px;font-weight:500;margin-bottom:14px}
.flash.success{background:var(--green-soft);color:var(--green)}
.flash.error{background:var(--red-soft);color:var(--red)}
.flash.info{background:var(--accent-soft);color:var(--accent)}
.empty{padding:28px 16px;text-align:center;color:var(--muted)}
.backlink{display:inline-block;font-weight:600;margin-bottom:10px}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.tile{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--line);border-left:6px solid var(--accent);border-radius:8px;background:var(--surface);color:var(--ink)}
.tile:hover{border-color:var(--muted);border-left-color:var(--accent);text-decoration:none}
.tile .n{font:700 44px/1 var(--font-c)}
.tile.warn{border-left-color:#DDA000}

/* Tabellen, am Handy als Karten */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:13px;font-weight:600;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th a{color:inherit}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tbody tr:hover td{background:var(--surface2)}
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px}

/* Detail */
.detail-head{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.detail-head .t{flex:1;min-width:220px}
.detail-head h2{font:600 30px/1.1 var(--font-c);margin:6px 0 8px}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 18px;margin:0}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:500}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.bcbox{display:inline-block;background:#fff;color:#000;padding:8px;border-radius:4px;max-width:100%;overflow:auto;text-align:center}
.bcbox svg{display:block}
.bcbox span{display:block;font:12px/1.5 Arial,Helvetica,sans-serif;letter-spacing:.14em}
.codelist{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.codelist li{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.inline{display:inline}

@media (max-width:860px){
  .sidebar{display:none}
  .app{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;border:0;background:none;color:var(--muted);font-size:12px;font-weight:600}
  .tabbar a:hover{text-decoration:none}
  .tabbar [aria-current="page"]{color:var(--accent);box-shadow:inset 0 3px 0 var(--accent)}
  .moremenu{display:block;position:fixed;inset:0;z-index:30;background:rgba(8,12,16,.6)}
  .moremenu .inner{position:absolute;left:0;right:0;bottom:0;background:var(--side);color:var(--side-ink);border-radius:14px 14px 0 0;padding:12px 10px calc(14px + env(safe-area-inset-bottom));max-height:80%;overflow:auto}
  .topbar{padding:10px 14px}.topbar h1{font-size:24px}
  .content{padding:14px 14px 28px}
  .cols,.formgrid{grid-template-columns:minmax(0,1fr)}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toolbar .inp{flex:1 1 100%}
  .tbl.cards thead{display:none}
  .tbl.cards,.tbl.cards tbody{display:block}
  .tbl.cards tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .tbl.cards tr:last-child{border-bottom:0}
  .tbl.cards td{display:block;padding:0;border:0;min-width:0}
  .tbl.cards td.num{text-align:left}
  .tbl.cards td.full{grid-column:1/-1}
  .tbl.cards td[data-l]::before{content:attr(data-l);display:block;font-size:12px;font-weight:500;color:var(--muted)}
  .pic.lg{width:140px;height:140px}
}

/* ---------- Etappe 2: Scan-Seite, Rückmeldung, Buchungsmaske, Journal ---------- */
:root{--ok-bg:#1B7A38;--err-bg:#B3261E;--info-bg:#1F5FA8}
@media (prefers-color-scheme:dark){:root{--ok-bg:#1F6B35;--err-bg:#9C2A24;--info-bg:#1D4F8A}}
.noscroll{overflow:hidden}
.bigstock{font-size:18px}
.bigstock b{font:700 40px/1 var(--font-c)}
.amount{font-weight:700;font-variant-numeric:tabular-nums}
.amount.neg{color:var(--red)}.amount.pos{color:var(--green)}
.struck td{opacity:.55}
.struck .amount{text-decoration:line-through}
.w-date{flex:0 0 auto !important;min-width:150px !important;width:auto}
.scan{max-width:760px;display:flex;flex-direction:column;gap:14px}
.seg button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 14px;border:0;border-right:1px solid var(--line);background:none;font-weight:600;color:var(--ink)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.seg.wide{display:flex}
.seg.wide button{flex:1}
.scanfield{display:flex;gap:10px}
.scanfield .inp{flex:1;min-height:58px;font-size:20px;font-weight:600;letter-spacing:.04em;border-width:2px}
.scanfield .inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.scanfield .btn{min-height:58px}
.scanfield .btn[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.btn-xl{min-height:60px;font-size:19px;padding:0 22px}
.result{border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px;color:#fff}
.result.idle{background:var(--surface);color:var(--muted);border:2px dashed var(--line);min-height:150px;justify-content:center;text-align:center}
.result.idle b{display:block;font:600 24px/1.2 var(--font-c);color:var(--ink);margin-bottom:6px}
.result.ok{background:var(--ok-bg)}.result.err{background:var(--err-bg)}.result.info{background:var(--info-bg)}
.result .head{font:700 34px/1 var(--font-c);letter-spacing:.01em}
.result .prod{display:flex;gap:14px;align-items:center}
.result .prod .pic{width:84px;height:84px;background:#fff}
.result .prod b{display:block;font-size:21px;line-height:1.2;font-weight:600}
.result .qty{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
.result .qty .n{font:700 76px/0.95 var(--font-c)}
.result .qty .u{font-size:24px;font-weight:600;line-height:1.15}
.result .qty .u small{display:block;font-size:16px;font-weight:500;opacity:.92}
.result .after{font-size:21px}
.result .after b{font:700 30px/1 var(--font-c)}
.result .note{font-size:15px;opacity:.95}
.result .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.result .btn{background:transparent;border:2px solid rgba(255,255,255,.85);color:#fff}
.result .btn.solid{background:#fff;color:#111;border-color:#fff}
.result.pop{animation:pop .16s ease-out}
@keyframes pop{from{transform:scale(.985);opacity:.55}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.result.pop{animation:none}}
.loclist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.loclist li{display:flex;gap:10px;align-items:center;justify-content:space-between;background:rgba(255,255,255,.14);border-radius:6px;padding:8px 10px}
.sess{list-style:none;margin:0;padding:0}
.sess li{display:flex;gap:10px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line)}
.sess li:last-child{border-bottom:0}
.sess .t{flex:1;min-width:0}
.sess .t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sess .amount{font:700 22px/1 var(--font-c);min-width:64px;text-align:right}
.sess li.struck{opacity:.55}
.sess li.struck .amount{text-decoration:line-through}
.modal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(8,12,16,.6);padding:16px}
.dialog{width:min(560px,100%);max-height:100%;overflow:hidden;background:var(--surface);color:var(--ink);border-radius:12px;display:flex;flex-direction:column}
.dlg-body{flex:1 1 auto;min-height:0;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:14px}
.dlg-body>*{flex-shrink:0}
.dlg-foot{flex:none;padding:12px 18px 18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.dlg-foot .btn-xl{width:100%}
.dialog h2{font:600 24px/1.1 var(--font-c)}
.dlg-head{display:flex;gap:12px;align-items:center}
.dlg-head .t{flex:1;min-width:0}
.dlg-head .t b{display:block;font-size:18px;line-height:1.2}
.xbtn{flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:6px;background:none;font-size:22px;line-height:1}
.qrow{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.qdisp{display:flex;align-items:flex-end;gap:12px;padding:10px 14px;border:2px solid var(--ink);border-radius:8px;min-height:76px}
.qdisp .n{font:700 56px/0.95 var(--font-c);flex:1;text-align:right;min-width:0;overflow:hidden}
.qdisp .n.ph{color:var(--line)}
.qdisp .u{font-size:18px;font-weight:600;padding-bottom:6px}
.conv{min-height:22px;font-weight:600;color:var(--muted)}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.keys button{height:60px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);font:600 28px/1 var(--font-c)}
.keys button:active{background:var(--line)}
.msg{padding:10px 12px;border-radius:6px;font-weight:500}
.msg.err{background:var(--red-soft);color:var(--red)}
.msg.info{background:var(--accent-soft);color:var(--accent)}
.msg.warn{background:var(--yellow-soft);color:var(--yellow-ink)}
.toasts{position:fixed;left:0;right:0;top:10px;z-index:50;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 12px}
.toast{max-width:560px;background:#10151A;color:#fff;padding:10px 16px;border-radius:8px;font-weight:500;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.toast.err{background:var(--err-bg)}
@media (max-width:860px){
  .modal{padding:0;align-items:stretch}
  .dialog{width:100%;border-radius:0;max-height:none;height:100%}
  .dlg-body{gap:10px;padding:14px}
  .dlg-foot{padding:10px 14px calc(14px + env(safe-area-inset-bottom))}
  .keys button{height:54px}
  .dialog .seg.wide button{padding:0 4px;font-size:15px}
  .result .qty .n{font-size:64px}
}