/* ---------- Tokens ---------- */
:root{
  --paper:#f1f3ef; --surface:#ffffff; --surface-2:#e8ebe4; --sunken:#e2e6dd;
  --line:#d5d9cf; --line-strong:#b6bcb0;
  --ink:#171a17; --ink-2:#4c534c; --ink-3:#78807a;
  --accent:#0e5257; --accent-2:#0b4045; --accent-soft:#d5e6e5; --on-accent:#f2f7f6;
  --ok:#1d6b40; --ok-soft:#dcefe3;
  --out:#8f5600; --out-soft:#f6e7ca;
  --late:#a01f22; --late-soft:#f8dedd;
  --hold:#485261; --hold-soft:#e2e6ea;
  --shadow:0 1px 2px rgba(20,30,25,.06), 0 6px 20px -12px rgba(20,30,25,.35);
  --r:10px; --r-s:7px;
  --f-disp:"Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-body:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#121614; --surface:#1a201d; --surface-2:#222926; --sunken:#0e1211;
    --line:#2d3531; --line-strong:#414a45;
    --ink:#e9ece8; --ink-2:#aab3ac; --ink-3:#828b85;
    --accent:#4bb5ab; --accent-2:#6fd0c5; --accent-soft:#16302f; --on-accent:#08201f;
    --ok:#5fc088; --ok-soft:#15301f;
    --out:#dda54a; --out-soft:#33260d;
    --late:#f0817f; --late-soft:#3a1a1a;
    --hold:#9aa6b4; --hold-soft:#242b32;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#121614; --surface:#1a201d; --surface-2:#222926; --sunken:#0e1211;
  --line:#2d3531; --line-strong:#414a45;
  --ink:#e9ece8; --ink-2:#aab3ac; --ink-3:#828b85;
  --accent:#4bb5ab; --accent-2:#6fd0c5; --accent-soft:#16302f; --on-accent:#08201f;
  --ok:#5fc088; --ok-soft:#15301f;
  --out:#dda54a; --out-soft:#33260d;
  --late:#f0817f; --late-soft:#3a1a1a;
  --hold:#9aa6b4; --hold-soft:#242b32;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
body{background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:15px; line-height:1.45; -webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-family:var(--f-disp); font-weight:700; letter-spacing:.01em; text-wrap:balance; line-height:1.1}
p{margin:0}
a{color:var(--accent)}
svg{width:19px; height:19px; flex:none; vertical-align:-4px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}

/* ---------- Shell ---------- */
#app{min-height:100vh; display:flex; flex-direction:column}
.topbar{position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:12px;
  padding:10px 14px; background:var(--surface); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:9px; font-family:var(--f-disp); font-size:21px; letter-spacing:.02em}
.brand b{font-weight:700}
.brand .dot{width:11px; height:22px; border-radius:2px; background:var(--accent);
  box-shadow:4px 0 0 -1px var(--accent-soft), 8px 0 0 -2px var(--accent-soft)}
.topbar .spacer{flex:1}
.iconbtn{display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; min-width:34px; padding:0 10px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-s); cursor:pointer; color:var(--ink-2)}
.iconbtn:hover{border-color:var(--line-strong); color:var(--ink)}
.shell{flex:1; display:flex; align-items:flex-start}
.rail{display:none}
.content{flex:1; min-width:0; padding:16px 14px 92px}
.view{display:none; animation:fade .18s ease}
.view.on{display:block}
@keyframes fade{from{opacity:0; transform:translateY(3px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* mobile tabs */
.tabs{position:fixed; left:0; right:0; bottom:0; z-index:50; display:grid; grid-template-columns:repeat(6,1fr);
  background:var(--surface); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom)}
.tabs button{display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 1px 7px; background:none; border:0;
  color:var(--ink-3); font-size:10px; font-weight:500; cursor:pointer; position:relative; overflow:hidden}
.tabs button.on{color:var(--accent)}
.tabs button.on::before{content:""; position:absolute; top:0; left:22%; right:22%; height:2px; background:var(--accent); border-radius:0 0 2px 2px}
.tabs svg{width:21px; height:21px}
.tabs .badge{position:absolute; top:4px; right:calc(50% - 19px); min-width:15px; height:15px; padding:0 4px; border-radius:8px;
  background:var(--late); color:#fff; font-size:9.5px; font-family:var(--f-mono); display:grid; place-items:center}
body.has-cart .content{padding-bottom:168px}

@media (min-width:900px){
  .content{padding:22px 26px 40px; max-width:1180px}
  .tabs{display:none}
  .rail{display:flex; flex-direction:column; gap:2px; position:sticky; top:55px; width:206px; flex:none;
    padding:16px 10px; align-self:stretch; border-right:1px solid var(--line)}
  .rail button{display:flex; align-items:center; gap:10px; padding:9px 11px; background:none; border:0; border-radius:var(--r-s);
    color:var(--ink-2); font-size:14px; font-weight:500; cursor:pointer; text-align:left; position:relative}
  .rail button:hover{background:var(--surface-2); color:var(--ink)}
  .rail button.on{background:var(--accent-soft); color:var(--accent); font-weight:600}
  .rail svg{width:19px; height:19px; flex:none}
  .rail .badge{margin-left:auto; min-width:19px; height:19px; padding:0 5px; border-radius:9px; background:var(--late); color:#fff;
    font-size:11px; font-family:var(--f-mono); display:grid; place-items:center}
  .rail hr{width:100%; border:0; border-top:1px solid var(--line); margin:10px 0}
}

/* ---------- Bausteine ---------- */
.page-head{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:16px}
.page-head h1{font-size:30px}
.page-head .sub{color:var(--ink-2); font-size:13.5px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.pad{padding:14px}
.row{display:flex; align-items:center; gap:10px}
.wrap{flex-wrap:wrap}
.grow{flex:1; min-width:0}
.stack{display:flex; flex-direction:column; gap:12px}
.muted{color:var(--ink-2)}
.tiny{font-size:12.5px}
.right{margin-left:auto}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 14px; border-radius:var(--r-s);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font-weight:600; font-size:14px; cursor:pointer}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn.ghost{border-color:transparent; background:transparent; color:var(--accent)}
.btn.ghost:hover{background:var(--accent-soft)}
.btn.danger{color:var(--late); border-color:var(--late)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.sm{padding:6px 10px; font-size:13px}
.btn svg{width:17px; height:17px}

.chip{display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:20px; font-size:11.5px; font-weight:600;
  font-family:var(--f-mono); letter-spacing:.02em; white-space:nowrap}
.chip::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.chip.ok{background:var(--ok-soft); color:var(--ok)}
.chip.out{background:var(--out-soft); color:var(--out)}
.chip.late{background:var(--late-soft); color:var(--late)}
.chip.hold{background:var(--hold-soft); color:var(--hold)}
.chip.acc{background:var(--accent-soft); color:var(--accent)}
.chip.plain{background:var(--surface-2); color:var(--ink-2)}
.chip.plain::before{display:none}

label.field{display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; color:var(--ink-2)}
input[type=text],input[type=date],input[type=number],input[type=search],input[type=email],select,textarea{
  padding:8px 10px; border:1px solid var(--line-strong); border-radius:var(--r-s); background:var(--surface); width:100%}
/* Auf schmalen Geräten dürfen Formularfelder nicht auf ihrer Wunschbreite bestehen –
   sonst schiebt eine Zeile die ganze Seite seitlich hinaus. */
@media (max-width:460px){ .row.wrap > .field{min-width:118px !important} }
textarea{resize:vertical; min-height:64px; font-family:var(--f-body)}
input[type=date]{font-family:var(--f-mono)}

/* Suchzeile */
.toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.search{position:relative; flex:1; min-width:180px}
.search input{padding-left:33px}
.search svg{position:absolute; left:9px; top:9px; width:17px; height:17px; color:var(--ink-3)}
.filters{display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; scrollbar-width:thin}
.filters button{flex:none; padding:6px 11px; border-radius:20px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink-2); font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap}
.filters button.on{background:var(--ink); border-color:var(--ink); color:var(--paper)}

/* Kennzahlen */
.kpis{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px}
@media (min-width:640px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 13px; position:relative; overflow:hidden}
.kpi .n{font-family:var(--f-disp); font-size:34px; line-height:1; font-weight:700; font-variant-numeric:tabular-nums}
.kpi .l{font-size:12.5px; color:var(--ink-2); margin-top:3px}
.kpi::after{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--line-strong)}
.kpi.a::after{background:var(--accent)} .kpi.o::after{background:var(--out)}
.kpi.l::after{background:var(--late)} .kpi.g::after{background:var(--ok)}

/* Inventarkarten */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:11px}
.grid.wide{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.portal .grid.wide{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.item{display:flex; align-items:flex-start; gap:11px; padding:11px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); cursor:pointer; text-align:left; width:100%; position:relative; transition:border-color .12s, transform .12s}
.item .qty{align-self:center}
.item:hover{border-color:var(--line-strong)}
.item:active{transform:scale(.995)}
.thumb{width:56px; height:56px; flex:none; border-radius:var(--r-s); background:var(--sunken); display:grid; place-items:center; overflow:hidden}
.thumb img{width:100%; height:100%; object-fit:cover}
.thumb svg{width:32px; height:32px; color:var(--ink-3)}
.item .nm{font-weight:600; font-size:14.5px; line-height:1.25}
.item .meta{font-size:12px; color:var(--ink-3); margin-top:2px}
.bar{height:5px; border-radius:3px; background:var(--sunken); overflow:hidden; display:flex; margin-top:7px}
.bar i{display:block; height:100%}
.bar .b-out{background:var(--out)} .bar .b-hold{background:var(--hold)} .bar .b-free{background:var(--ok)}
.bar .b-weg{background:var(--late)}
.counts{display:flex; flex-wrap:wrap; gap:4px 9px; margin-top:6px; font-family:var(--f-mono); font-size:12px; white-space:nowrap}
.counts b{font-weight:600}
.counts .c-free{color:var(--ok)} .counts .c-out{color:var(--out)} .counts .c-hold{color:var(--hold)}
.counts .c-weg{color:var(--late)}

/* Mengensteuerung */
.qty{display:flex; align-items:center; gap:0; border:1px solid var(--line-strong); border-radius:var(--r-s); overflow:hidden; flex:none}
.qty button{width:30px; height:32px; border:0; background:var(--surface); color:var(--ink); font-size:17px; cursor:pointer; line-height:1}
.qty button:hover:not(:disabled){background:var(--accent-soft); color:var(--accent)}
.qty button:disabled{color:var(--ink-3); cursor:not-allowed}
.qty span{min-width:30px; text-align:center; font-family:var(--f-mono); font-weight:600; font-size:14px}

/* Listen */
.list{display:flex; flex-direction:column}
.list > *{border-bottom:1px solid var(--line)}
.list > *:last-child{border-bottom:0}
.lrow{display:flex; align-items:center; gap:11px; padding:11px 13px; background:none; border-left:0; border-right:0; border-top:0;
  width:100%; text-align:left; cursor:pointer; color:inherit}
.lrow:hover{background:var(--surface-2)}
.lrow .t,.check .t{font-weight:600; font-size:14.5px}
.lrow .s,.check .s{font-size:12.5px; color:var(--ink-2); margin-top:1px}

/* Warenkorb-Leiste */
.cartbar{position:fixed; left:0; right:0; bottom:calc(57px + env(safe-area-inset-bottom)); z-index:60; padding:10px 14px;
  background:var(--surface); border-top:1px solid var(--line-strong); box-shadow:0 -8px 24px -18px rgba(0,0,0,.6);
  display:flex; align-items:center; gap:12px}
@media (min-width:900px){.cartbar{left:206px; bottom:0; padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  body.has-cart .content{padding-bottom:110px}}
.cartbar .n{font-family:var(--f-disp); font-size:22px; font-weight:700}

/* Panel / Overlay */
.overlay{position:fixed; inset:0; z-index:100; background:rgba(12,18,15,.5); display:flex; align-items:flex-end; justify-content:center}
@media (min-width:760px){.overlay{align-items:center}}
.panel{background:var(--surface); width:100%; max-width:640px; max-height:92vh; overflow:auto; border-radius:14px 14px 0 0;
  border:1px solid var(--line); animation:up .2s ease}
@media (min-width:760px){.panel{border-radius:14px}}
@keyframes up{from{transform:translateY(14px); opacity:.6} to{transform:none; opacity:1}}
.panel-head{position:sticky; top:0; background:var(--surface); border-bottom:1px solid var(--line); padding:13px 15px;
  display:flex; align-items:center; gap:10px; z-index:2}
.panel-head h3{font-size:21px}
.panel-body{padding:15px; display:flex; flex-direction:column; gap:14px}
.panel-foot{position:sticky; bottom:0; background:var(--surface); border-top:1px solid var(--line); padding:12px 15px;
  display:flex; gap:9px; justify-content:flex-end}

/* Rückgabe-Zeilen */
.check{display:flex; align-items:center; gap:11px; padding:11px 13px}
.check.done{background:var(--ok-soft)}
.check.issue{background:var(--late-soft)}
.check .s{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.check .s2{font-size:12.5px; margin-top:2px; color:var(--late)}
.mangeloffen{color:var(--late)}
.poswrap{display:block}
.inhaltbox{border-top:1px dashed var(--line-strong); background:var(--sunken)}
.inhaltkopf{display:flex; align-items:center; gap:9px; width:100%; padding:7px 13px 7px 44px; background:none; border:0;
  color:var(--ink-2); font-size:12.5px; cursor:pointer; text-align:left}
.inhaltkopf:hover{color:var(--ink)}
@media (max-width:560px){.inhaltkopf{padding-left:13px}}
.inhaltliste{padding:2px 0 0}
.inhaltzeile{display:flex; align-items:center; gap:9px; padding:5px 13px 5px 44px; font-size:13px}
.inhaltzeile .qty button{width:26px; height:28px}
.inhaltzeile .qty span{min-width:26px; font-size:13px}
.inhaltzeile.weg{background:var(--late-soft); color:var(--late)}
@media (max-width:560px){.inhaltzeile{padding-left:13px}}
.linkbtn{background:none; border:0; color:var(--ink-3); font-size:12.5px; font-weight:600; cursor:pointer; padding:3px 6px; border-radius:5px}
.linkbtn:hover{color:var(--late); background:var(--late-soft)}
.linkbtn.on{color:var(--late)}
@media (max-width:560px){.check{gap:8px; padding:10px} .check .thumb{display:none}}
.cbox{width:26px; height:26px; flex:none; border:2px solid var(--line-strong); border-radius:7px; background:var(--surface);
  display:grid; place-items:center; cursor:pointer; color:transparent}
.cbox.on{background:var(--ok); border-color:var(--ok); color:#fff}
.cbox svg{width:16px; height:16px}

table.tbl{width:100%; border-collapse:collapse; font-size:13.5px}
.tblwrap{overflow-x:auto}
table.tbl th{text-align:left; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; padding:7px 10px; border-bottom:1px solid var(--line); white-space:nowrap}
table.tbl td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top}
table.tbl tr:last-child td{border-bottom:0}
table.tbl td.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}

input[type=checkbox]{width:18px; height:18px; accent-color:var(--accent); flex:none; margin:0; cursor:pointer}
.swline{display:flex; align-items:center; gap:9px; cursor:pointer; font-size:13.5px; font-weight:500;
  padding:9px 11px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--surface)}
.swline:hover{border-color:var(--line-strong)}
.swline .hint{color:var(--ink-3); font-weight:400; font-size:12.5px}
/* Belegungskalender im Artikel */
.kal{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:600px){.kal{grid-template-columns:1fr 1fr}}
.kalkopf{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.kalkopf b{font-family:var(--f-disp); font-size:18px; font-weight:700}
.kalnav{display:flex; gap:4px; margin-left:auto}
.kalnav button{width:28px; height:28px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  border-radius:6px; cursor:pointer; line-height:1; font-size:15px}
.kalnav button:hover{border-color:var(--line-strong); color:var(--ink)}
.kalgrid{display:grid; grid-template-columns:repeat(7,1fr); gap:3px}
.kalwd{text-align:center; font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; color:var(--ink-3); padding-bottom:2px}
.kaltag{aspect-ratio:1/.92; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border-radius:6px; border:1px solid transparent; background:var(--sunken); color:var(--ink-3);
  font-family:var(--f-mono); font-size:12px; cursor:pointer; padding:0; position:relative}
.kaltag.leer{background:none; cursor:default}
.kaltag .n{font-size:11.5px; line-height:1}
.kaltag .m{font-size:9.5px; font-weight:600; line-height:1}
.kaltag.frei{background:var(--surface); border-color:var(--line); color:var(--ink-2)}
.kaltag.teil{background:var(--out-soft); border-color:var(--out-soft); color:var(--out); font-weight:600}
.kaltag.voll{background:var(--out); border-color:var(--out); color:#fff; font-weight:600}
.kaltag.aus{background:var(--hold-soft); border-color:var(--hold-soft); color:var(--hold)}
.kaltag.anfrage::after{content:""; position:absolute; top:3px; right:3px; width:5px; height:5px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 1.5px var(--surface)}
.kaltag.heute{box-shadow:0 0 0 2px var(--ink)}
.kaltag.gewaehlt{box-shadow:0 0 0 2px var(--accent)}
.kaltag:hover:not(.leer){border-color:var(--line-strong)}
.kallegende{display:flex; flex-wrap:wrap; gap:5px 12px; margin-top:10px; font-size:11.5px; color:var(--ink-3)}
.kallegende span{display:inline-flex; align-items:center; gap:5px}
.kallegende i{width:11px; height:11px; border-radius:3px; display:inline-block; border:1px solid var(--line); position:relative}
.kallegende i.pkt::after{content:""; position:absolute; top:-2px; right:-2px; width:6px; height:6px; border-radius:50%; background:var(--accent)}
.preis{border:1px solid var(--line); border-radius:var(--r-s); overflow:hidden}
.prow{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:7px 11px; font-size:13.5px;
  border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.prow.minus{color:var(--ok)}
.prow.sum{background:var(--surface-2)}
.cfgrow{display:flex; align-items:flex-end; gap:9px; padding:9px 12px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.cfgrow:last-child{border-bottom:0}
.cfgrow input{width:100%}
.cfgrow input[type=checkbox]{width:18px}
.cfgrow .swline{flex:none}
.cfgrow .field.grow{max-width:400px}
.cfgrow .hint{min-width:150px; padding-bottom:9px}
@media (max-width:620px){.cfgrow .hint{flex-basis:100%; order:3; padding-bottom:0} .cfgrow .linkbtn{margin-left:auto}}
.note{background:var(--accent-soft); border-radius:var(--r-s); padding:10px 12px; font-size:13px; color:var(--accent)}
.empty{text-align:center; padding:34px 16px; color:var(--ink-3)}
.empty svg{width:40px; height:40px; margin-bottom:8px; opacity:.6}
.sep{border:0; border-top:1px solid var(--line); margin:0}
.panel-toast{position:sticky; bottom:60px; z-index:3; margin:0 15px 11px; background:var(--ink); color:var(--paper);
  padding:9px 13px; border-radius:9px; font-size:13px; font-weight:500; box-shadow:var(--shadow); animation:toastin .18s ease}
.toast{position:fixed; left:50%; transform:translateX(-50%); top:64px; z-index:200; background:var(--ink); color:var(--paper);
  padding:11px 16px; border-radius:22px; font-size:13.5px; font-weight:500; box-shadow:var(--shadow); max-width:88vw;
  animation:toastin .18s ease}
@keyframes toastin{from{opacity:0; transform:translate(-50%,-8px)} to{opacity:1; transform:translate(-50%,0)}}
.panel-toast{animation:panelin .18s ease}
@keyframes panelin{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* Kundenportal-Rahmen */
.portal{border:1px solid var(--line-strong); border-radius:12px; overflow:hidden; background:var(--surface)}
.portal-top{background:var(--ink); color:var(--paper); padding:11px 14px; display:flex; align-items:center; gap:9px; font-size:13px}
.portal-top .url{font-family:var(--f-mono); font-size:11.5px; background:rgba(255,255,255,.12); padding:3px 9px; border-radius:20px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* Druck */
#printarea{display:none}
@media print{
  body{background:#fff; color:#000}
  #app,.tabs,.cartbar,.toast,#overlay-slot,#cart-slot{display:none !important}
  #printarea{display:block; font-family:var(--f-body); padding:0}
  #printarea h1{font-family:var(--f-disp); font-size:26pt}
  #printarea table{width:100%; border-collapse:collapse; font-size:9.5pt}
  #printarea th{text-align:left; border-bottom:1.5pt solid #000; padding:5pt 4pt; font-size:8pt; text-transform:uppercase; letter-spacing:.08em}
  #printarea td{border-bottom:.5pt solid #bbb; padding:5pt 4pt; vertical-align:top}
  #printarea .r{text-align:right; white-space:nowrap}
  #printarea .nw{white-space:nowrap}
  #printarea tr{break-inside:avoid}
  #printarea .pt-img{width:44pt; height:44pt; object-fit:cover; border:.5pt solid #ccc}
  @page{margin:14mm}
}

/* --- Serverversion: Speicherstatus und Kopfzeile --- */
.status{font-family:var(--f-mono); font-size:11px; letter-spacing:.04em; color:var(--ink-3); padding:0 8px; white-space:nowrap}
.status.speichert{color:var(--out)}
.status.fehler{color:var(--late); font-weight:600}
.dokseite{max-width:820px; margin:0 auto; padding:26px 20px 60px}
.dokseite table{width:100%; border-collapse:collapse; font-size:13px}
.dokseite th{text-align:left; border-bottom:2px solid var(--ink); padding:7px 5px; font-size:11px; text-transform:uppercase; letter-spacing:.08em}
.dokseite td{border-bottom:1px solid var(--line); padding:7px 5px; vertical-align:top}
.dokseite h1{font-size:34px; margin-bottom:6px}
.dokseite .r{text-align:right; white-space:nowrap}
.dokleiste{position:sticky; top:0; z-index:10; display:flex; gap:9px; align-items:center;
  background:var(--surface); border-bottom:1px solid var(--line); padding:10px 16px}
@media print{.dokleiste{display:none} .dokseite{padding:0; max-width:none}}