/* © 2026 senc.ch | Webdesign & Software | https://senc.ch | Alle Rechte vorbehalten. */
:root{
  --g:#1f7a3a; --g2:#2e9b4f; --gl:#e8f5ec; --gb:#bfe3c9; --ink:#16211a; --mut:#5d6b62; --line:#dfe6e1;
  --bg:#f3f6f4; --card:#fff; --warn:#b45309; --warnl:#fef3c7; --red:#b91c1c; --redl:#fee2e2;
  --blue:#1d4ed8; --bluel:#dbeafe; --violet:#6d28d9; --violetl:#ede9fe; --sky:#0369a1; --skyl:#e0f2fe;
  --r:14px; --dark:#16211a; --dark2:#24332a;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--g)}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
input,textarea,select{font:inherit;color:inherit}
h1,h2,h3{line-height:1.2}
.ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
.muted{color:var(--mut)} .small{font-size:12.5px} .center{text-align:center} .right{text-align:right}
.hide{display:none!important}
.nowrap{white-space:nowrap}
.sp{flex:1}

/* ------------------------------------------------ Buttons & Formulare */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:42px;padding:0 16px;border-radius:11px;
  background:#fff;border:1.5px solid var(--line);font-weight:600;font-size:14px;text-decoration:none;color:var(--ink);white-space:nowrap}
.btn:hover{border-color:#c7d2ca}
.btn.pri{background:var(--g);border-color:var(--g);color:#fff}
.btn.pri:hover{background:#196831}
.btn.danger{background:var(--redl);border-color:#fca5a5;color:var(--red)}
.btn.warn{background:var(--warnl);border-color:#f3c77b;color:var(--warn)}
.btn.ghost{background:transparent}
.btn.sm{height:32px;padding:0 10px;font-size:13px;border-radius:9px}
.btn.block{display:flex;width:100%}
.btn.big{height:56px;font-size:16px;border-radius:14px}
.btn[disabled]{opacity:.45;pointer-events:none}
.form label{display:block;font-size:13px;font-weight:600;color:var(--mut);margin-bottom:12px}
.form input:not([type=checkbox]):not([type=radio]),.form select,.form textarea,.inp{display:block;width:100%;margin-top:5px;height:46px;border:1.5px solid var(--line);
  border-radius:11px;padding:0 12px;background:#fff;font-size:16px;color:var(--ink);font-weight:400}
.form textarea,textarea.inp{height:auto;min-height:84px;padding:10px 12px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus,.inp:focus{outline:none;border-color:var(--g2);box-shadow:0 0 0 3px rgba(46,155,79,.15)}
.form label.check{display:flex;align-items:center;gap:10px;font-weight:500;color:var(--ink);font-size:14px}
.form label.check input{width:20px;height:20px;accent-color:var(--g)}
.form fieldset{border:1px solid var(--line);border-radius:12px;padding:14px 14px 4px;margin:0 0 14px;background:#fff}
.form legend{font-weight:700;font-size:13px;padding:0 6px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.alert{padding:11px 14px;border-radius:11px;margin-bottom:14px;font-size:14px;display:flex;gap:8px;align-items:flex-start}
.alert.err{background:var(--redl);color:var(--red)}
.alert.ok{background:var(--gl);color:var(--g)}
.alert.warn{background:var(--warnl);color:#7c3a06}
.alert.info{background:var(--bluel);color:var(--blue)}

/* ------------------------------------------------ Anmeldung / einfache Seiten */
body.plain{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 16px}
.auth-card{width:100%;max-width:400px;background:#fff;border-radius:20px;padding:28px 22px;box-shadow:0 10px 40px rgba(0,0,0,.08)}
.auth-card.wide{max-width:620px}
.auth-card h1{margin:0 0 18px;font-size:22px}
.auth-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:var(--g);margin-bottom:18px}
.logo-mark{width:34px;height:34px;border-radius:10px;background:var(--g);color:#fff;display:inline-grid;place-items:center;flex:none}
.credit{font-size:11.5px;color:var(--mut);margin-top:18px}
.credit a{color:inherit}

/* ------------------------------------------------ Mobile App-Hülle */
body.mobile{background:var(--bg);min-height:100vh}
.app{max-width:560px;margin:0 auto;min-height:100vh;position:relative;display:flex;flex-direction:column}
.top{background:var(--g);color:#fff;padding:12px 14px 12px;position:relative}
.dark .top{background:var(--dark)}
.top .row{display:flex;align-items:center;gap:10px}
.brand{font-weight:700;font-size:17px;flex:1;display:flex;align-items:center;gap:9px;min-width:0}
.brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .logo-mark{background:#fff;color:var(--g);width:30px;height:30px}
.who{display:flex;align-items:center;gap:8px;text-align:right;font-size:12.5px;line-height:1.2;color:#fff}
.who small{opacity:.8}
.date-chip{margin-top:10px;display:flex;width:100%;gap:9px;align-items:center;background:rgba(255,255,255,.14);border-radius:12px;padding:9px 11px;font-size:14px;color:#fff;text-align:left}
.date-chip b,#dateLabel{font-weight:700}
.date-chip small{opacity:.85;font-size:12px}
.chip-btn{background:#fff;color:var(--g);border-radius:8px;padding:5px 10px;font-weight:700;font-size:12px}
.staff-banner{margin-top:8px;background:var(--warnl);color:#7c3a06;border-radius:10px;padding:6px 10px;font-size:13px;font-weight:600;display:flex;gap:6px;align-items:center}
.offline-bar{background:var(--warn);color:#fff;font-size:12.5px;font-weight:600;padding:6px 12px;display:flex;gap:6px;align-items:center;justify-content:center}

.view{display:none;flex:1;flex-direction:column}
.view.on{display:flex}
.search{position:sticky;top:0;z-index:5;background:var(--bg);padding:10px 12px 6px}
.sbox{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:0 12px;height:50px;color:var(--mut)}
.sbox input{border:0;outline:0;flex:1;font-size:16px;background:none;color:var(--ink);min-width:0}
.chips{display:flex;gap:6px;overflow-x:auto;padding:8px 0 2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:600;color:var(--ink)}
.chips button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.top .chips button{background:var(--dark2);border-color:var(--dark2);color:#cfe}
.top .chips button.on{background:var(--g2);border-color:var(--g2);color:#fff}
.body{flex:1;padding:6px 12px calc(110px + var(--safe-b))}
.loading{color:var(--mut);text-align:center;padding:50px 0}
.empty{color:var(--mut);text-align:center;padding:44px 12px}

.quick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 10px}
.qbtn{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px;display:flex;gap:9px;align-items:center;text-align:left;font-size:13.5px;font-weight:700;line-height:1.2}
.qbtn small{display:block;font-weight:500;color:var(--mut);font-size:11.5px;margin-top:3px}
.qbtn.pri{background:var(--gl);border-color:var(--gb);color:var(--g)}
.qbtn[disabled]{opacity:.5}
.sec-h{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:16px 2px 6px}
.sec-h.fav{color:var(--g)}
.sec-h.fav .ic{fill:currentColor}

/* Produktzeile: oben Name + Stern, unten Einheiten + Menge; Bild (falls vorhanden) links über beide Zeilen */
.prod{background:#fff;border-radius:var(--r);padding:10px 8px 10px 12px;margin-bottom:6px;border:1.5px solid transparent;
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"name star" "pu step";column-gap:8px;row-gap:4px;align-items:center}
.prod.has-img{grid-template-columns:64px 1fr auto;grid-template-areas:"img name star" "img pu step"}
.prod.in{border-color:#9fd6b0;background:#fbfffc}
.prod.na{opacity:.55}
.prod .pname{grid-area:name;min-width:0}
.prod .star{grid-area:star;height:36px;justify-self:end}
.prod .pu{grid-area:pu;min-width:0}
.prod .step{grid-area:step}
.prod .units{margin-top:0}
.pimg{grid-area:img;width:64px;height:64px;border-radius:12px;object-fit:cover;background:#eef2ef;align-self:center}
.pinfo{flex:1;min-width:0}
.pname{font-weight:650;font-size:15.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pvar{font-weight:500;color:var(--mut);font-size:13px}
.tag{font-size:10.5px;font-weight:800;border-radius:5px;padding:1px 5px;background:#eef2ef;color:var(--mut);letter-spacing:.02em}
.tag.ch{background:#fee2e2;color:#b91c1c}.tag.bio{background:var(--gl);color:var(--g)}.tag.na{background:var(--warnl);color:var(--warn)}
.units{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.units button{border:1.5px solid var(--line);border-radius:8px;padding:4px 10px;font-size:12.5px;font-weight:700;color:var(--mut);min-height:30px}
.units button.on{border-color:var(--g);background:var(--g);color:#fff}
.units button .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--g2);margin-left:5px;vertical-align:middle}
.units button.on .dot{background:#fff}
.ulabel{font-size:11.5px;color:var(--mut);margin-top:3px}
.step{display:flex;align-items:center;background:#f1f4f2;border-radius:12px;flex:none}
.step button{width:44px;height:46px;display:grid;place-items:center;color:var(--g)}
.step button .ic{stroke-width:2.6}
.step input{width:48px;border:0;background:none;text-align:center;font-weight:800;font-size:16.5px;outline:0;padding:0;-moz-appearance:textfield}
.step input::-webkit-outer-spin-button,.step input::-webkit-inner-spin-button{-webkit-appearance:none}
.star{width:38px;height:46px;display:grid;place-items:center;color:#c3ccc6;flex:none}
.star.on{color:#e0a106}
.star.on .ic{fill:currentColor}

.cartbar{position:fixed;left:50%;transform:translateX(-50%);width:calc(100% - 24px);max-width:536px;bottom:calc(14px + var(--safe-b));background:var(--g);color:#fff;
  border-radius:16px;height:60px;display:flex;align-items:center;padding:0 16px;gap:10px;box-shadow:0 8px 24px rgba(31,122,58,.35);font-weight:700;font-size:16px;z-index:20}
.cartbar .cnt{background:#fff;color:var(--g);border-radius:999px;min-width:28px;height:28px;display:grid;place-items:center;font-size:13.5px;padding:0 8px}

.hd{background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:10px 12px;position:sticky;top:0;z-index:5}
.hd h2{margin:0;font-size:17px;flex:1}
.back{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:#f1f4f2}
.citem{background:#fff;border-radius:var(--r);padding:12px;margin-bottom:8px}
.citem .r1{display:flex;align-items:center;gap:8px}
.citem .nm{flex:1;font-weight:650;font-size:15.5px;min-width:0}
.citem .nm small{display:block;font-weight:500;color:var(--mut);font-size:12.5px}
.del{width:42px;height:46px;border-radius:10px;display:grid;place-items:center;color:var(--red);flex:none}
.note-in{margin-top:8px;width:100%;border:1.5px dashed var(--line);border-radius:10px;padding:9px 10px;font-size:14px;background:#fafcfb}
.panel{background:#fff;border-radius:var(--r);padding:13px;margin-bottom:10px}
.panel h3{margin:0 0 9px;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.panel textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:10px;min-height:76px;resize:vertical;font-size:15px}
.days{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;flex-wrap:wrap}
.day{flex:none;width:66px;border:1.5px solid var(--line);border-radius:12px;padding:7px 0;text-align:center;font-size:12px;color:var(--mut);background:#fff}
.day b{display:block;font-size:18px;color:var(--ink)}
.day.on{border-color:var(--g);background:var(--g);color:#d9f0e0}.day.on b{color:#fff}
.day.off{opacity:.4;text-decoration:line-through}
.day .has{display:block;font-size:10px;font-weight:700;color:var(--g)}
.day.on .has{color:#fff}
.hint{font-size:12.5px;color:var(--mut);margin-top:8px;display:flex;gap:6px;align-items:flex-start}
.tog{display:flex;align-items:center;gap:12px;font-size:14.5px;width:100%;text-align:left}
.sw{width:48px;height:29px;border-radius:999px;background:#cfd8d2;position:relative;flex:none;transition:background .15s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:23px;height:23px;border-radius:50%;background:#fff;transition:left .15s}
.sw.on{background:var(--g)}.sw.on::after{left:22px}
.ok{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 20px;gap:4px}
.ok .circle{width:92px;height:92px;border-radius:50%;background:var(--gl);color:var(--g);display:grid;place-items:center;margin-bottom:14px}
.ok .circle .ic{stroke-width:2.4}
.ok h2{margin:0 0 4px}
.ono{font-size:22px;font-weight:800;letter-spacing:.04em;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:10px 18px;margin:12px 0}
.ok .btn{margin-top:8px}

.olist a,.orow{display:flex;align-items:center;gap:10px;background:#fff;border-radius:var(--r);padding:12px;margin-bottom:6px;text-decoration:none;color:inherit;width:100%;text-align:left}
.orow .t{flex:1}.orow b{display:block}
.pill{font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 9px;white-space:nowrap;display:inline-block}
.s-new{background:var(--bluel);color:var(--blue)}.s-confirmed{background:var(--violetl);color:var(--violet)}.s-picking{background:var(--warnl);color:var(--warn)}
.s-ready{background:var(--gl);color:var(--g)}.s-on_route{background:var(--skyl);color:var(--sky)}.s-delivered{background:var(--dark);color:#fff}.s-cancelled{background:#eee;color:#777;text-decoration:line-through}
.irow{display:flex;gap:10px;padding:10px 2px;border-top:1px solid var(--line);font-size:15px}
.irow:first-child{border-top:0}
.irow .t{flex:1}
.irow small{display:block;color:var(--mut);font-size:12.5px}

dialog.sheet{border:0;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + var(--safe-b));width:100%;max-width:560px;margin:auto auto 0;box-shadow:0 -10px 40px rgba(0,0,0,.2)}
dialog.sheet::backdrop{background:rgba(10,20,14,.45)}
dialog.sheet h3{margin:0 0 12px}
dialog.sheet .btn{margin-top:12px}
.menu-item{display:flex;align-items:center;gap:12px;width:100%;padding:14px 6px;border-bottom:1px solid var(--line);font-size:16px;font-weight:600;text-decoration:none;color:var(--ink)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(90px + var(--safe-b));background:var(--dark);color:#fff;padding:11px 18px;border-radius:12px;font-size:14px;font-weight:600;z-index:100;max-width:90%;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast.err{background:var(--red)}

/* ------------------------------------------------ Listen (Einkauf / Rüsten / Fahrer) */
.prog{height:8px;border-radius:99px;background:rgba(255,255,255,.18);margin-top:10px;overflow:hidden}
.prog i{display:block;height:100%;background:#6ee08f;border-radius:99px;transition:width .2s}
.kpis{display:flex;gap:6px;margin-top:9px;font-size:12px;flex-wrap:wrap}
.kpis span{background:rgba(255,255,255,.12);border-radius:8px;padding:4px 8px}
.top .date-nav{display:flex;align-items:center;gap:6px;margin-top:9px}
.top .date-nav button{width:36px;height:36px;border-radius:9px;background:var(--dark2);color:#fff;display:grid;place-items:center}
.top .date-nav b{flex:1;text-align:center;font-size:14px}
.li{background:#fff;border-radius:var(--r);margin-bottom:6px;overflow:hidden}
.li .r{display:flex;align-items:center;gap:10px;padding:10px 12px;min-height:62px}
.cb{width:38px;height:38px;border-radius:11px;border:2px solid #b9c5bd;display:grid;place-items:center;color:#fff;flex:none}
.cb .ic{stroke-width:3}
.li.done .cb{background:var(--g);border-color:var(--g)}
.li.part .cb{background:var(--warn);border-color:var(--warn)}
.li.na .cb{background:var(--red);border-color:var(--red)}
.li.sub .cb{background:var(--blue);border-color:var(--blue)}
.li .t{flex:1;min-width:0;cursor:pointer}
.li .t b{font-size:16px}
.li .t small{display:block;color:var(--mut);font-size:12px}
.li.done .t b{text-decoration:line-through;color:var(--mut)}
.qty{font-weight:800;font-size:17px;text-align:right;white-space:nowrap;cursor:pointer}
.qty small{display:block;font-size:11px;font-weight:600;color:var(--mut)}
.st{font-size:11px;font-weight:700;border-radius:6px;padding:2px 7px;display:inline-block;margin-top:3px}
.st.o{background:#eef2ef;color:var(--mut)}.st.p{background:var(--warnl);color:var(--warn)}.st.b{background:var(--gl);color:var(--g)}.st.n{background:var(--redl);color:var(--red)}.st.s{background:var(--bluel);color:var(--blue)}
.exp{display:none;border-top:1px solid var(--line);padding:12px;background:#fafcfb}
.li.open .exp{display:block}
.exp .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px;text-align:center}
.exp .grid div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px}
.exp .grid small{display:block;color:var(--mut);font-size:11px}
.exp .grid b{font-size:17px}
.exp .grid .miss b{color:var(--red)}
.exp label{font-size:12px;color:var(--mut);display:block;margin:6px 0 3px;font-weight:600}
.exp input,.exp select{width:100%;height:46px;border:1.5px solid var(--line);border-radius:10px;padding:0 10px;background:#fff;font-size:16px}
.btnrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.btnrow button{height:48px;border-radius:12px;font-weight:700;font-size:14px}
.b-g{background:var(--g);color:#fff}.b-r{background:var(--redl);color:var(--red)}.b-w{background:var(--warnl);color:var(--warn)}.b-b{background:var(--bluel);color:var(--blue)}.b-n{background:#eef2ef;color:var(--ink)}
.split-note{font-size:12px;color:var(--blue);background:var(--bluel);border-radius:8px;padding:6px 8px;margin:0 0 8px;display:flex;gap:6px;align-items:center}
.cust{background:#fff;border-radius:var(--r);padding:12px;margin-bottom:6px;display:flex;align-items:center;gap:12px;width:100%;text-align:left}
.cust .no{width:40px;height:40px;border-radius:11px;background:var(--dark);color:#fff;font-weight:800;display:grid;place-items:center;flex:none}
.cust .no.ok{background:var(--g)}
.cust .t{flex:1;min-width:0}.cust .t b{font-size:15.5px}.cust .t small{display:block;color:var(--mut);font-size:12px}
.ring{font-size:12px;font-weight:700;border-radius:8px;padding:4px 8px;white-space:nowrap;background:#eef2ef;color:var(--mut)}
.ring.ok{background:var(--gl);color:var(--g)}.ring.w{background:var(--warnl);color:var(--warn)}
.sub-list{margin:0 0 12px 14px}
.nav{display:flex;gap:6px;margin-top:9px}
.nav a{flex:1;height:46px;border-radius:11px;background:#f1f4f2;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:13px;color:var(--ink);text-decoration:none}
.nav a.tel{flex:.5}
.stop{background:#fff;border-radius:var(--r);padding:12px;margin-bottom:8px}
.stop.cur{outline:2.5px solid var(--g)}
.stop.dn{opacity:.6}
.stop .note{font-size:13px;background:var(--warnl);color:#7c3a06;border-radius:8px;padding:7px 9px;margin-top:8px;display:flex;gap:6px}
.sig{width:100%;height:150px;border:1.5px dashed #a9b6ad;border-radius:12px;background:#fff;touch-action:none;display:block}
.crates{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.crates .step{justify-content:space-between}
.photo-prev{max-width:100%;border-radius:10px;margin-top:8px;display:block}
.pending-badge{background:var(--warn);color:#fff;border-radius:999px;font-size:11px;font-weight:800;padding:2px 7px}

/* ------------------------------------------------ Interner Bereich */
body.intern{background:var(--bg)}
.adm{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.side{background:var(--dark);color:#c9d6cd;padding:16px 10px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .brand{color:#fff;margin:0 6px 18px;font-size:16px}
.side .brand .logo-mark{background:var(--g2)}
.side a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:inherit;text-decoration:none;font-size:14px;margin-bottom:1px}
.side a:hover{background:#1e2b23;color:#fff}
.side a.on{background:var(--dark2);color:#fff}
.side .grp{font-size:11px;text-transform:uppercase;letter-spacing:.08em;opacity:.5;margin:16px 10px 6px}
.side .me{margin-top:18px;padding:10px;border-top:1px solid #2a3a30;font-size:13px}
.main{padding:20px 24px 60px;min-width:0}
.mh{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.mh h1{margin:0;font-size:22px;flex:1;min-width:200px}
.topbar{display:none}
.bell{position:relative;width:42px;height:42px;border-radius:11px;background:#fff;border:1.5px solid var(--line);display:grid;place-items:center}
.bell .badge{position:absolute;top:-5px;right:-5px;background:var(--red);color:#fff;border-radius:999px;font-size:11px;font-weight:800;min-width:19px;height:19px;display:grid;place-items:center;padding:0 5px}
.notif-pop{position:absolute;right:0;top:48px;width:340px;max-height:420px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.15);z-index:40}
.notif-pop a{display:block;padding:10px 12px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:13.5px}
.notif-pop a small{display:block;color:var(--mut)}
.kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:#fff;border-radius:12px;padding:14px;border:1px solid var(--line);text-decoration:none;color:inherit;display:block}
.kpi small{color:var(--mut);font-size:12.5px}
.kpi b{display:block;font-size:28px;margin-top:2px}
.kpi.w{border-color:#f3c77b;background:#fffaf0}.kpi.w b{color:var(--warn)}
.kpi.r b{color:var(--red)}
.two{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;align-items:start}
.card{background:#fff;border-radius:12px;border:1px solid var(--line);overflow:hidden;margin-bottom:16px}
.card>h3{margin:0;padding:12px 14px;font-size:14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.card>h3>span{flex:1}
.card .pad{padding:14px}
.filters{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center}
.filters a,.filters button,.filters select,.filters input{height:34px;border-radius:8px;border:1.5px solid var(--line);background:#fff;padding:0 10px;font-size:13px;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center}
.filters a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);font-weight:600;padding:9px 12px;background:#fafcfb;white-space:nowrap}
.tbl td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:middle}
.tbl tr.inactive td{color:var(--mut)}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:#fafcfb}
.tbl a{color:var(--ink);font-weight:600;text-decoration:none}
.tbl a:hover{color:var(--g)}
.tbl input.inp,.tbl select.inp{height:36px;margin:0;font-size:14px}
.miss-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line)}
.miss-row .t{flex:1}.miss-row small{display:block;color:var(--mut);font-size:12px}
.callb{height:34px;border-radius:9px;background:var(--gl);color:var(--g);font-weight:700;font-size:13px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap}
.bar{display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:13px}
.bar span{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar i{height:10px;background:var(--g2);border-radius:99px;display:block;min-width:2px}
.bar em{font-style:normal;color:var(--mut);font-size:12px;white-space:nowrap}
.nop{font-size:12px;color:var(--mut);padding:10px 14px;border-top:1px solid var(--line);display:flex;gap:6px;align-items:center}
.dl{display:grid;grid-template-columns:140px 1fr;gap:6px 12px;font-size:14px}
.dl dt{color:var(--mut)}.dl dd{margin:0}
.timeline{list-style:none;margin:0;padding:0;font-size:13px}
.timeline li{padding:8px 14px;border-top:1px solid var(--line)}
.timeline small{color:var(--mut)}
.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline-form .inp{width:auto;margin:0;height:38px}
.chk-days{display:flex;gap:6px;flex-wrap:wrap}
.chk-days label{display:flex;align-items:center;gap:5px;border:1.5px solid var(--line);border-radius:9px;padding:6px 10px;font-weight:600;color:var(--ink);margin:0;font-size:13.5px}
.unit-rows .ur{display:grid;grid-template-columns:1.2fr 1.4fr .8fr 36px;gap:8px;align-items:center;margin-bottom:6px}
.unit-rows .ur select,.unit-rows .ur input{margin:0!important}
.tour-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.run{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:16px}
.run-h{display:flex;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.run-h h3{margin:0;font-size:15px;flex:1;min-width:150px}
.mobile-only{display:none}

/* ------------------------------------------------ Lieferschein / Etikett (Druck) */
.doc{background:#fff;max-width:800px;margin:20px auto;padding:36px 40px;box-shadow:0 4px 20px rgba(0,0,0,.08);font-size:13.5px;color:#000}
.doc + .doc{margin-top:20px}
.doc-h{display:flex;justify-content:space-between;gap:20px;margin-bottom:26px}
.doc h1{font-size:22px;margin:0 0 4px}
.doc table{width:100%;border-collapse:collapse;margin-top:16px}
.doc th,.doc td{border-bottom:1px solid #bbb;padding:7px 6px;text-align:left}
.doc th{font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.doc td.num,.doc th.num{text-align:right;white-space:nowrap}
.doc .sign{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:50px}
.doc .sign div{border-top:1px solid #000;padding-top:4px;font-size:11.5px}
.doc .foot{margin-top:30px;font-size:11px;color:#444}
.label80{width:72mm;margin:10px auto;padding:4mm;background:#fff;border:1px dashed #999;font-size:13px;color:#000;page-break-after:always}
.label80 .big{font-size:26px;font-weight:900;line-height:1.1}
.label80 .stopno{font-size:44px;font-weight:900;float:right;line-height:1}
.print-bar{max-width:800px;margin:16px auto;display:flex;gap:8px;justify-content:flex-end;padding:0 12px}
@media print{
  body{background:#fff!important}
  .print-bar,.side,.mh .btn,.credit{display:none!important}
  .doc{box-shadow:none;margin:0;padding:0;max-width:none;page-break-after:always}
  .label80{border:0;margin:0}
  @page{margin:14mm}
}

/* ------------------------------------------------ Responsiv */
@media (max-width:980px){
  .adm{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:260px;z-index:60;transform:translateX(-100%);transition:transform .2s}
  .side.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
  .topbar{display:flex;align-items:center;gap:10px;background:var(--dark);color:#fff;padding:10px 14px;position:sticky;top:0;z-index:30}
  .topbar button{color:#fff}
  .topbar b{flex:1}
  .main{padding:14px 12px 60px}
  .two{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr 1fr}
  .mobile-only{display:block}
  .desk-only{display:none}
  .notif-pop{width:min(340px,calc(100vw - 24px))}
}
@media (max-width:560px){
  .grid2,.grid3{grid-template-columns:1fr}
  .dl{grid-template-columns:1fr}
  .dl dt{margin-top:6px}
  .unit-rows .ur{grid-template-columns:1fr 1fr;}
  .doc{padding:18px 14px;margin:0}
  .mh h1{font-size:19px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.langs{margin-top:14px;display:flex;gap:6px;justify-content:center}
.langs a{font-size:12.5px;font-weight:700;color:var(--mut);text-decoration:none;border:1.5px solid var(--line);border-radius:8px;padding:3px 8px}
.langs a.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ------------------------------------------------ Handbuch */
.hb{max-width:1080px;margin:0 auto;width:100%}
body.plain .hb{padding:8px 0 30px}
.hb-head h1{margin:0 0 6px;font-size:24px}
.hb-tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:12px 0}
.hb-toc{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.hb-toc a{font-size:12.5px;font-weight:600;text-decoration:none;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:5px 11px}
.hb-toc a:hover{border-color:var(--g2);color:var(--g)}
.hb-sec{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.hb-sec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;font-weight:800;font-size:16px}
.hb-sec>summary::-webkit-details-marker{display:none}
.hb-sec>summary::after{content:"+";margin-left:auto;font-size:22px;color:var(--mut);font-weight:400}
.hb-sec[open]>summary::after{content:"−"}
.hb-sec[open]>summary{border-bottom:1px solid var(--line)}
.hb-no{width:30px;height:30px;border-radius:9px;background:var(--g);color:#fff;display:grid;place-items:center;font-size:14px;flex:none}
.hb-t{flex:1}
.hb-roles{font-size:11.5px;font-weight:600;color:var(--mut);background:#f1f4f2;border-radius:999px;padding:3px 9px;margin-right:8px}
.hb-body{padding:16px;display:grid;gap:18px}
.hb-body.has-fig{grid-template-columns:minmax(0,1fr) auto;align-items:start}
.hb-lead{margin:0 0 10px;font-size:15px}
.hb-steps{margin:0;padding-left:22px;display:grid;gap:7px;font-size:14.5px}
.hb-steps li.hb-m{list-style:none;margin-left:-22px;display:flex;gap:9px;align-items:flex-start}
.hb-mark{flex:none;width:21px;height:21px;border-radius:50%;background:#e11d48;color:#fff;font-size:11.5px;font-weight:800;display:grid;place-items:center;margin-top:1px}
.hb-tips{margin-top:14px;background:var(--bluel);color:#1e3a8a;border-radius:10px;padding:10px 12px;font-size:13.5px}
.hb-tips ul{margin:6px 0 0;padding-left:18px}
.hb-fig{margin:0;max-width:100%}
.hb-svg{max-width:100%;height:auto;display:block}
@media (max-width:820px){.hb-body.has-fig{grid-template-columns:1fr}.hb-fig{justify-self:center}}
@media print{
  .hb-tools,.hb-toc,.topbar{display:none!important}
  .hb-sec{break-inside:avoid;page-break-inside:avoid;border:0;border-top:1px solid #ccc;border-radius:0}
  .hb-sec>summary::after{content:""}
  body.intern .adm{display:block}
  .main{padding:0}
}
body.hb-page{justify-content:flex-start;padding-top:18px}
.hb-steps.has-marks li:not(.hb-m){list-style:disc;margin-left:8px}
