/* 24pro WaWi – Design im Stil von Apple-Apps (iOS/macOS), Farben 24proshopping */
:root{
  --navy:#03045A; --navy-2:#1B1FA8; --orange:#FF8A3D; --orange-2:#F07A2C; --sky:#C9CEF0;
  --bg:#F2F2F7; --bg-2:#FFFFFF; --card:#FFFFFF; --fill:#E9E9EF; --fill-2:#F2F2F7;
  --label:#1C1C1E; --label-2:#6E6E73; --label-3:#8E8E93; --sep:rgba(60,60,67,.18);
  --tint:#03045A; --tint-soft:#E8E9FB; --on-tint:#fff;
  --green:#28A745; --green-soft:#E3F6E8; --red:#E5383B; --red-soft:#FDE8E8; --yellow:#B7791F; --yellow-soft:#FFF4DB;
  --r:14px; --r-lg:20px; --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sidebar:260px; --tabbar:58px; --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#000; --bg-2:#1C1C1E; --card:#1C1C1E; --fill:#2C2C2E; --fill-2:#2C2C2E;
  --label:#F2F2F7; --label-2:#AEAEB2; --label-3:#8E8E93; --sep:rgba(84,84,88,.6);
  --tint:#A9B0FF; --tint-soft:#23264D; --on-tint:#01022E; --green-soft:#12301B; --red-soft:#3A1416; --yellow-soft:#3A2C0E;
  --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark;
}}
:root[data-theme=dark]{
  --bg:#000; --bg-2:#1C1C1E; --card:#1C1C1E; --fill:#2C2C2E; --fill-2:#2C2C2E;
  --label:#F2F2F7; --label-2:#AEAEB2; --label-3:#8E8E93; --sep:rgba(84,84,88,.6);
  --tint:#A9B0FF; --tint-soft:#23264D; --on-tint:#01022E; --green-soft:#12301B; --red-soft:#3A1416; --yellow-soft:#3A2C0E;
  --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--font);font-size:17px;line-height:1.35;color:var(--label);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:var(--tint);text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid color-mix(in srgb,var(--orange) 70%,transparent);outline-offset:2px;border-radius:8px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

/* ---------- Grundlayout ---------- */
.app{display:flex;min-height:100vh}
.side{width:var(--sidebar);flex:none;position:sticky;top:0;height:100vh;padding:18px 12px;background:color-mix(in srgb,var(--bg-2) 70%,var(--bg));border-right:.5px solid var(--sep);display:flex;flex-direction:column;gap:4px;overflow:auto}
.side .brand{padding:6px 10px 18px}
.side .brand img{height:30px;width:auto}
.side .brand .dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .side .brand .light{display:none}:root:not([data-theme=light]) .side .brand .dark{display:block}}
.side h6{font-size:12px;font-weight:600;color:var(--label-3);text-transform:uppercase;letter-spacing:.04em;padding:16px 12px 6px}
.nav{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;font-size:15px;font-weight:500;color:var(--label)}
.nav svg{width:21px;height:21px;color:var(--tint);flex:none}
.nav:hover{background:var(--fill)}
.nav.on{background:var(--tint);color:var(--on-tint)}
.nav.on svg{color:var(--on-tint)}
.nav .badge{margin-left:auto}
.side .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;font-size:14px}
.side .me:hover{background:var(--fill)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}
.main{flex:1;min-width:0;padding:0 0 40px}
.page{max-width:1120px;margin:0 auto;padding:22px 32px 30px}
.page.narrow{max-width:760px}
.tabbar{display:none}
.demo-band .long{}
.demo-band{background:var(--orange);color:#1b1b1b;font-size:13px;font-weight:600;text-align:center;padding:6px 12px}

/* Kopf mit großem Titel */
.head{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.head .back{display:inline-flex;align-items:center;gap:2px;color:var(--tint);font-size:17px;margin-bottom:6px;width:100%}
.head .back svg{width:20px;height:20px}
.head h1{font-size:34px;line-height:1.1;font-weight:700;letter-spacing:-.02em;flex:1;min-width:0}
.head .sub{width:100%;color:var(--label-2);font-size:15px;margin-top:-4px}
.head .acts{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Bausteine ---------- */
.group{background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.group + .group,.section + .section{margin-top:22px}
.section > h2,.sechead h2{font-size:13px;font-weight:600;color:var(--label-2);text-transform:uppercase;letter-spacing:.03em;padding:0 16px 7px}
.section > .foot{font-size:13px;color:var(--label-2);padding:7px 16px 0}
.row{display:flex;align-items:center;gap:12px;padding:11px 16px;min-height:48px;position:relative;width:100%;text-align:left}
.row + .row:before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--sep)}
.row.ind + .row.ind:before{left:72px}
button.row:hover,a.row:hover{background:var(--fill-2)}
button.row:active,a.row:active{background:var(--fill)}
.row .t{flex:1;min-width:0}
.row .t > b{display:block;font-weight:500;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t small{display:block;color:var(--label-2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.row .v{color:var(--label-2);font-size:16px;white-space:nowrap}
.row .chev{width:9px;height:14px;color:var(--label-3);flex:none}
.row .ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none;background:var(--tint);color:#fff}
.row .ic svg{width:18px;height:18px}
.thumb{width:44px;height:44px;border-radius:10px;background:var(--fill-2);flex:none;object-fit:contain;border:.5px solid var(--sep)}
.thumb.ph{display:flex;align-items:center;justify-content:center;color:var(--label-3)}
.thumb.ph svg{width:20px;height:20px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:0}
.field{display:flex;align-items:center;gap:12px;padding:6px 16px;min-height:48px;position:relative}
.field + .field:before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--sep)}
.field label{width:140px;flex:none;font-size:16px;color:var(--label)}
.field input,.field select,.field textarea{flex:1;min-width:0;border:0;background:transparent;font-size:16px;padding:8px 0;outline:0;text-align:right;color:var(--label)}
.field textarea{text-align:left;min-height:110px;resize:vertical;line-height:1.4}
.field.col{flex-direction:column;align-items:stretch;gap:2px;padding-top:10px}
.field.col label{width:auto;font-size:13px;color:var(--label-2)}
.field.col input,.field.col textarea{text-align:left}
.field .unit{color:var(--label-2);font-size:15px}
.field .count{font-size:12px;color:var(--label-3);text-align:right}
.field .count.bad{color:var(--red);font-weight:600}
.input{width:100%;border:0;background:var(--fill);border-radius:12px;padding:12px 14px;font-size:16px;outline:0}
.input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--tint) 30%,transparent)}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:12px;font-weight:600;font-size:16px;background:var(--fill);color:var(--tint);white-space:nowrap;transition:transform .08s,opacity .15s}
.btn:active{transform:scale(.98)}
.btn svg{width:19px;height:19px}
.btn.primary{background:var(--tint);color:var(--on-tint)}
.btn.cta{background:var(--orange);color:#1b1b1b}
.btn.danger{color:var(--red)}
.btn.block{width:100%;height:52px;font-size:17px;border-radius:14px}
.btn.sm{height:34px;padding:0 12px;font-size:14px;border-radius:9px}
.btn.plain{background:transparent;padding:0 6px}
.btn[disabled]{opacity:.45;pointer-events:none}
.link{color:var(--tint);font-weight:500}

/* Suche, Segmente, Chips */
.search{display:flex;align-items:center;gap:8px;background:var(--fill);border-radius:12px;padding:0 12px;height:42px;flex:1;min-width:200px}
.search svg{width:18px;height:18px;color:var(--label-3);flex:none}
.search input{flex:1;border:0;background:transparent;outline:0;font-size:16px;min-width:0}
.search .x{width:20px;height:20px;border-radius:50%;background:var(--label-3);color:var(--bg-2);display:flex;align-items:center;justify-content:center;font-size:13px}
.seg{display:inline-flex;background:var(--fill);border-radius:10px;padding:2px;gap:2px;max-width:100%;overflow:auto}
.seg button{padding:6px 14px;border-radius:8px;font-size:14px;font-weight:500;white-space:nowrap;color:var(--label)}
.seg button[aria-pressed=true]{background:var(--bg-2);box-shadow:0 1px 3px rgba(0,0,0,.12);font-weight:600}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:999px;background:var(--fill);font-size:14px;font-weight:500;white-space:nowrap}
.chip[aria-pressed=true]{background:var(--tint);color:var(--on-tint)}
.chip select{color:inherit}
.chip select option,.chip select optgroup{color:#1d1d1f!important;background:#fff!important;font-weight:400}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .chip select option{color:#f5f5f7!important;background:#2c2c2e!important}}
:root[data-theme=dark] .chip select option{color:#f5f5f7!important;background:#2c2c2e!important}
.chip select{border:0;background:transparent;font-weight:500;outline:0;appearance:none;-webkit-appearance:none;padding-right:2px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}

/* Abzeichen, Status */
.badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:600;background:var(--fill);color:var(--label-2);white-space:nowrap}
.badge.green{background:var(--green-soft);color:var(--green)}
.badge.red{background:var(--red-soft);color:var(--red)}
.badge.yellow{background:var(--yellow-soft);color:var(--yellow)}
.badge.tint{background:var(--tint-soft);color:var(--tint)}
.badge.orange{background:var(--orange);color:#1b1b1b}
.stockpill{min-width:44px;justify-content:center}

/* Kennzahlen */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.kpi .n{white-space:nowrap}
.oline{display:flex!important;justify-content:space-between;gap:12px;white-space:normal!important}
.oline>span.num{white-space:nowrap;flex:none}
.oline>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi{background:var(--card);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;text-align:left;position:relative;overflow:hidden}
.kpi .l{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--label-2)}
.kpi .l svg{width:18px;height:18px}
.kpi .n{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.05}
.kpi .s{font-size:13px;color:var(--label-2)}
.kpi.hero{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff}
.kpi.hero .l,.kpi.hero .s{color:var(--sky)}
button.kpi:hover{filter:brightness(.98)}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.qa{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow);font-weight:600;font-size:15px;text-align:left}
.qa .ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--tint-soft);color:var(--tint)}
.qa .ic svg{width:22px;height:22px}
.qa.cta .ic{background:var(--orange);color:#1b1b1b}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.grid2.wide{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
a.row,a.kpi,a.qa{color:inherit}

/* Artikel-Detail */
.detail{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:28px;align-items:start}
.gallery{background:var(--card);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:1;display:flex;align-items:center;justify-content:center;position:relative}
.gallery img{width:100%;height:100%;object-fit:contain;background:#fff}
.gallery .ph{color:var(--label-3);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:14px}
.gallery .ph svg{width:48px;height:48px}
.dots{display:flex;gap:6px;justify-content:center;margin-top:10px}
.dots button{width:8px;height:8px;border-radius:50%;background:var(--label-3);opacity:.4}
.dots button[aria-current=true]{opacity:1;background:var(--tint)}
.titlebox h1{font-size:26px;line-height:1.2;font-weight:700;letter-spacing:-.015em}
.titlebox .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.bigstock{display:flex;align-items:center;gap:16px;padding:16px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow);margin-top:18px}
.bigstock .n{font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1}
.bigstock .t{flex:1;color:var(--label-2);font-size:14px}
.bigstock .t b{display:block;color:var(--label);font-size:16px}
.stickybar{position:sticky;bottom:0;padding:14px 0 calc(14px + var(--safe-b));background:linear-gradient(to top,var(--bg) 70%,transparent);margin-top:20px;display:flex;gap:10px;z-index:5}
.stickybar .btn{flex:1}

/* Fotostation */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.slot{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:10px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.slot .ph{width:100%;aspect-ratio:1;border-radius:10px;background:var(--fill-2);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.slot .ph img{width:100%;height:100%;object-fit:contain;background:#fff}
.slot .ph > svg{width:34px;height:34px;color:var(--label-3)}
.slot .busy{position:absolute;inset:0;background:rgba(0,0,0,.55);color:#fff;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;font-size:13px;font-weight:600;text-align:center;padding:8px}
.slot .lbl b{display:block;font-size:15px}
.slot .lbl small{color:var(--label-2);font-size:12px}
.slotacts{display:flex;justify-content:space-between;width:100%;font-size:13px}
label.btn{cursor:pointer}
.spinning{animation:rot 1s linear infinite}
.syncbox{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:20px}
.syncbox .card{background:var(--bg-2);border-radius:20px;padding:24px;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.3);text-align:center}
.syncbox .card svg{width:40px;height:40px;color:var(--tint);margin:0 auto 10px;display:block}
.syncbox .progress{height:10px;margin:14px 0 8px}

/* Leer- und Ladezustände */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:48px 20px;color:var(--label-2)}
.empty svg{width:52px;height:52px;color:var(--label-3)}
.empty b{color:var(--label);font-size:19px}
.empty .btn{margin-top:8px}
.empty .btn svg{width:19px;height:19px;color:inherit}
.skel{background:linear-gradient(90deg,var(--fill-2),var(--fill),var(--fill-2));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:8px}
@keyframes sk{to{background-position:-200% 0}}
.spin{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--fill);border-top-color:var(--tint);animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--tint-soft);color:var(--label);font-size:14px}
.note.warn{background:var(--yellow-soft)}
.note.err{background:var(--red-soft)}
.note.ok{background:var(--green-soft)}
.note svg{width:20px;height:20px;flex:none;margin-top:1px}

/* Sheet (Bottom-Sheet / Dialog) */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:50;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
@media (min-width:760px){.scrim{align-items:center}}
.sheet{background:var(--bg);width:100%;max-width:560px;max-height:92vh;overflow:auto;border-radius:18px 18px 0 0;padding:8px 18px calc(22px + var(--safe-b));animation:up .28s cubic-bezier(.2,.8,.2,1)}
@media (min-width:760px){.sheet{border-radius:18px;padding-bottom:22px}}
.sheet .grab{width:38px;height:5px;border-radius:3px;background:var(--label-3);opacity:.5;margin:2px auto 10px}
.sheet .sh{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sheet .sh h3{flex:1;font-size:20px;font-weight:700;text-align:center}
.sheet .sh .btn{width:76px}
@keyframes up{from{transform:translateY(40px);opacity:.4}}
@keyframes fade{from{opacity:0}}

/* Hinweis-Blase (Toast) */
.toast{position:fixed;left:50%;top:calc(14px + var(--safe-t));transform:translateX(-50%);z-index:80;background:rgba(30,30,32,.92);color:#fff;padding:12px 18px;border-radius:14px;font-size:15px;font-weight:500;display:flex;gap:10px;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.25);animation:drop .25s;max-width:92vw;backdrop-filter:blur(12px)}
.toast.ok svg{color:#4ADE80}.toast.err svg{color:#FF6B6B}
.toast svg{width:20px;height:20px;flex:none}
@keyframes drop{from{transform:translate(-50%,-14px);opacity:0}}

/* Scanner */
.scanbox{position:relative;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:3/4;max-height:58vh;margin:0 auto}
.scanbox video{width:100%;height:100%;object-fit:cover}
.scanbox:after{content:"";position:absolute;left:7%;right:7%;top:37%;height:26%;border:3px solid var(--orange);border-radius:14px;box-shadow:0 0 0 999px rgba(0,0,0,.35)}
.scanmsg{text-align:center;color:var(--label-2);font-size:14px;margin:12px 0}
.flash-ok{animation:fok .5s}
.flash-err{animation:ferr .5s}
@keyframes fok{0%{box-shadow:0 0 0 0 rgba(40,167,69,.6)}100%{box-shadow:0 0 0 18px rgba(40,167,69,0)}}
@keyframes ferr{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* Picken */
.pickhero{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:18px;display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center}
.pickhero img,.pickhero .thumb{width:120px;height:120px;border-radius:16px}
.pickhero .box{font-size:15px;font-weight:600;color:var(--label-2)}
.pickhero .box b{font-size:44px;line-height:1;color:var(--navy);display:block;letter-spacing:-.02em}
:root[data-theme=dark] .pickhero .box b{color:var(--tint)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .pickhero .box b{color:var(--tint)}}
.pickhero .nm{font-size:16px;font-weight:600;margin-top:6px}
.pickhero .q{font-size:15px;color:var(--label-2);margin-top:6px}
.pickhero .q b{font-size:28px;color:var(--label)}
.progress{height:8px;border-radius:4px;background:var(--fill);overflow:hidden}
.progress i{display:block;height:100%;background:var(--green);border-radius:4px;transition:width .3s}
.stepper{display:inline-flex;align-items:center;background:var(--fill);border-radius:10px;overflow:hidden}
.stepper button{width:40px;height:36px;font-size:20px;font-weight:600;color:var(--tint)}
.stepper input{width:56px;text-align:center;border:0;background:transparent;font-size:17px;font-weight:600;outline:0}
.done-row{opacity:.55}

/* Tabelle (Import-Vorschau) */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-weight:600;color:var(--label-2);font-size:12px;text-transform:uppercase;letter-spacing:.03em;padding:10px 12px;border-bottom:.5px solid var(--sep);position:sticky;top:0;background:var(--card)}
.tbl td{padding:9px 12px;border-bottom:.5px solid var(--sep);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tblwrap{max-height:420px;overflow:auto}
.drop{border:2px dashed var(--sep);border-radius:var(--r-lg);padding:28px;text-align:center;color:var(--label-2);background:var(--card)}
.drop.on{border-color:var(--tint);background:var(--tint-soft)}
.drop svg{width:40px;height:40px;color:var(--tint);margin:0 auto 8px}

/* Login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(1200px 600px at 20% -10%,#1B1FA8 0%,transparent 60%),linear-gradient(160deg,#01022E,#03045A)}
.login .card{width:100%;max-width:400px;background:var(--bg-2);border-radius:24px;padding:30px 26px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.login img{height:36px;margin:0 auto 22px}
.login h1{font-size:24px;text-align:center;margin-bottom:4px}
.login p{text-align:center;color:var(--label-2);font-size:15px;margin-bottom:22px}
.login .input + .input{margin-top:10px}
.login .btn{margin-top:18px}
.login .err{color:var(--red);font-size:14px;text-align:center;margin-top:12px}

/* ---------- Handy ---------- */
@media (max-width:899px){
  .side{display:none}
  .page{padding:12px 16px calc(var(--tabbar) + 28px + var(--safe-b))}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;height:calc(var(--tabbar) + var(--safe-b));padding-bottom:var(--safe-b);background:color-mix(in srgb,var(--bg-2) 82%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid var(--sep)}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10.5px;font-weight:500;color:var(--label-3);position:relative}
  .tabbar a svg{width:25px;height:25px}
  .tabbar a.on{color:var(--tint)}
  .tabbar a.scan .bub{width:52px;height:52px;border-radius:50%;background:var(--orange);color:#1b1b1b;display:flex;align-items:center;justify-content:center;margin-top:-22px;box-shadow:0 6px 18px rgba(255,138,61,.45)}
  .tabbar a.scan svg{width:27px;height:27px}
  .tabbar .dot{position:absolute;top:5px;left:calc(50% + 6px);min-width:17px;height:17px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpis .kpi.hero{grid-column:1/-1}
  .kpi .n{font-size:28px}
  .quick{grid-template-columns:1fr 1fr;gap:10px}
  .grid2,.grid2.wide,.detail{grid-template-columns:minmax(0,1fr);gap:18px}
  .head h1{font-size:28px}
  .field label{width:120px}
  .pickhero{grid-template-columns:96px 1fr;gap:14px}
  .pickhero img,.pickhero .thumb{width:96px;height:96px}
  .stickybar{bottom:calc(var(--tabbar) + var(--safe-b));padding-bottom:12px}
  .hide-m{display:none!important}
}
@media (min-width:900px){.hide-d{display:none!important}}

/* ---------- Druck ---------- */
@media print{
  body{background:#fff}
  .side,.tabbar,.stickybar,.head .acts,.toolbar,.demo-band,.noprint{display:none!important}
  .page{padding:0;max-width:none}
  .group,.kpi{box-shadow:none;border:1px solid #ddd}
}
.sechead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.sechead h2{margin:0!important;padding-bottom:0!important}
.sechead{padding-right:4px}
.chip.sm{height:28px;padding:0 10px;font-size:13px}
.chip.sm select{font-size:13px}

@media (max-width:1180px) and (min-width:900px){.kpis{grid-template-columns:repeat(3,1fr)}.kpis .kpi.hero{grid-column:span 1}.kpi .n{font-size:28px}}

/* Änderungen / Sammelbearbeitung */
.pushbar{display:flex;align-items:center;gap:12px;background:var(--bg-2);border:1.5px solid var(--orange,#FF8A3D);border-radius:14px;padding:12px 14px;margin:0 0 18px}
.pushbar .ic{width:34px;height:34px;border-radius:9px;background:#FF8A3D;color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.pushbar .ic svg{width:19px;height:19px}
.pushbar .t{flex:1;min-width:0}.pushbar .t b{display:block;font-size:15px}.pushbar .t small{color:var(--label-2);font-size:13px}
.pushbar .t a{color:var(--tint);font-weight:600}
.pushbar .progress{margin-top:6px}
.pushbar .btn{flex:none}
@media (max-width:899px){.pushbar{flex-wrap:wrap}.pushbar .btn{flex:1 1 100%}}
.selbar{background:var(--bg-2);border-radius:12px;padding:8px 10px}
.selbox{width:20px;height:20px;accent-color:var(--tint);margin:0 10px 0 0;vertical-align:-4px;pointer-events:none}
.row.selrow{background:color-mix(in srgb,var(--tint) 9%,var(--bg-2))}

.scanbox.hit:after{border-color:var(--green);box-shadow:0 0 0 999px rgba(52,199,89,.25)}
.scantools{display:flex;align-items:center;gap:12px;margin-top:12px}
.scantools .zoom{flex:1;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--label-2)}
.scantools .zoom input{flex:1;accent-color:var(--tint)}

.shootbtns{display:flex;gap:6px;width:100%}
.shootbtns .btn{flex:1;padding-left:6px;padding-right:6px;gap:4px;white-space:nowrap}
.shootbtns .btn svg{width:15px;height:15px}
.shootbtns .btn{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:899px){.shootbtns{flex-direction:column}.shootbtns .btn{width:100%}}