@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Layout: Milchglas auf hellem Stein-Grau. Links eine Glas-Seitenleiste, rechts Inhalt in Glaskarten; am Handy Tabs oben. */
:root{
  --bg:#e7e6e3;
  --fg:#1c1c1e;
  --muted:#6c6b68;
  --faint:#9d9b96;
  --glass:rgba(255,255,255,.52);
  --glass-strong:rgba(255,255,255,.78);
  --rim:rgba(255,255,255,.85);
  --hair:rgba(28,28,30,.08);
  --ink:#1c1c1e;
  --in:#2f7a58; --out:#a8622b; --tax:#6d5fae;
  --ok:#2e8f63; --warn:#b98113; --bad:#c2453a;
  --font:"Manrope",Arial,Helvetica,sans-serif;
  --r:22px;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:10px}

.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:linear-gradient(160deg,#f1f0ed 0%,#e4e2de 45%,#d9d8d5 100%)}
.blob{position:absolute;border-radius:50%;filter:blur(60px);will-change:transform}
.blob.a{width:48vmax;height:48vmax;left:-14vmax;top:-18vmax;background:radial-gradient(circle,#ffffff 0%,rgba(255,255,255,0) 65%);animation:float 30s ease-in-out infinite alternate}
.blob.b{width:40vmax;height:40vmax;right:-12vmax;top:10vh;background:radial-gradient(circle,#d6cfc4 0%,rgba(214,207,196,0) 65%);opacity:.9;animation:float 36s ease-in-out infinite alternate-reverse}
.blob.c{width:36vmax;height:36vmax;left:30vw;bottom:-20vmax;background:radial-gradient(circle,#c8ccd2 0%,rgba(200,204,210,0) 65%);opacity:.9;animation:float 42s ease-in-out infinite alternate}
.blob.d{width:22vmax;height:22vmax;left:52vw;top:22vh;background:radial-gradient(circle,#f0dfcf 0%,rgba(240,223,207,0) 65%);opacity:.7;animation:float 28s ease-in-out infinite alternate-reverse}
@keyframes float{to{transform:translate3d(5vw,4vh,0) scale(1.1)}}

.glass{background:var(--glass);border:1px solid var(--rim);border-radius:var(--r);backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 12px 40px -18px rgba(40,36,30,.25),0 2px 6px -2px rgba(40,36,30,.06)}

.app{position:relative;z-index:1;display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;max-width:1360px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));padding-block:20px 60px}

/* Seitenleiste */
.side{position:sticky;top:calc(20px + env(safe-area-inset-top,0px));align-self:start;height:calc(100vh - 40px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;padding:22px 14px 14px}
.brand{display:flex;align-items:center;gap:12px;padding:0 8px 22px}
.brand img{width:32px;height:auto}
.brand b{font-size:18px;font-weight:800;letter-spacing:.14em}
.brand small{display:block;font-size:11px;color:var(--faint);font-weight:600;letter-spacing:.08em;margin-top:1px}
.nav{display:grid;gap:4px}
.nav button{display:flex;align-items:center;gap:12px;border:0;background:transparent;padding:11px 12px;border-radius:14px;cursor:pointer;color:var(--muted);font-weight:600;font-size:14px;text-align:left;transition:background .25s,color .25s,transform .2s}
.nav button svg{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav button:hover{background:rgba(255,255,255,.6);color:var(--fg)}
.nav button[aria-current="page"]{background:var(--glass-strong);color:var(--fg);box-shadow:0 6px 18px -10px rgba(40,36,30,.35),0 0 0 1px var(--rim) inset}
.side .spacer{flex:1}
.me{display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px;background:rgba(255,255,255,.45);border:1px solid var(--rim)}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;background:var(--ink);color:#fff;flex:none}
.me .t{min-width:0;font-size:13px;font-weight:700}
.me .t small{display:flex;align-items:center;gap:6px;color:var(--faint);font-weight:600;font-size:11px}
.live{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.live.on{background:var(--ok);box-shadow:0 0 0 3px rgba(46,143,99,.18)}
.gear{margin-left:auto;width:32px;height:32px;border-radius:10px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--muted);transition:background .2s,color .2s,transform .4s}
.gear:hover{background:rgba(255,255,255,.7);color:var(--fg);transform:rotate(40deg)}
.gear svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}

/* Mobil-Kopf */
.mtop{display:none}
@media (max-width:980px){
  .app{grid-template-columns:minmax(0,1fr);gap:16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .side{display:none}
  .mtop{display:grid;gap:10px;position:sticky;top:env(safe-area-inset-top,0px);z-index:20;padding:12px 12px 10px;border-radius:20px}
  .mtop .row{display:flex;align-items:center;gap:10px}
  .mtop .row img{width:26px}
  .mtop .row b{font-weight:800;letter-spacing:.14em;font-size:15px}
  .mtop .row .gear{margin-left:auto}
}

/* Inhalt */
main{min-width:0}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:8px 4px 20px}
.head h1{margin:0;font-size:clamp(26px,3.2vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
.head p{margin:6px 0 0;color:var(--muted);max-width:62ch;font-size:14px}
.kick{font-size:12px;color:var(--faint);font-weight:700;letter-spacing:.06em}
.seg{display:inline-flex;gap:2px;padding:4px;border-radius:14px;background:rgba(255,255,255,.45);border:1px solid var(--rim);flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:7px 13px;border-radius:10px;font-weight:700;font-size:13px;color:var(--muted);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.seg button:hover{color:var(--fg)}
.seg button[aria-pressed="true"]{background:#fff;color:var(--fg);box-shadow:0 4px 12px -6px rgba(40,36,30,.35)}

.grid{display:grid;gap:16px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.kpi{padding:18px 20px 16px;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .3s}
.kpi:hover{transform:translateY(-4px);background:var(--glass-strong);box-shadow:0 1px 0 #fff inset,0 22px 50px -22px rgba(40,36,30,.35)}
.kpi .l{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:700}
.kpi .l i{width:8px;height:8px;border-radius:50%;background:var(--tone,var(--ink))}
.kpi .v{font-size:30px;font-weight:800;letter-spacing:-.02em;margin-top:8px;font-variant-numeric:tabular-nums;line-height:1.15;white-space:nowrap}
.kpi .s{font-size:12.5px;color:var(--faint);font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums}
.two{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
@media (max-width:1100px){.two{grid-template-columns:minmax(0,1fr)}}
.card{padding:20px;min-width:0}
.card h2{margin:0 0 14px;font-size:15px;font-weight:800;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.card h2 span{font-size:12px;font-weight:600;color:var(--faint)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--rim);background:rgba(255,255,255,.6);padding:10px 16px;border-radius:14px;font-weight:700;font-size:14px;cursor:pointer;transition:transform .15s,background .2s,box-shadow .25s}
.btn:hover{background:#fff;box-shadow:0 8px 20px -12px rgba(40,36,30,.4)}
.btn:active{transform:scale(.97)}
.btn.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.dark:hover{background:#000;box-shadow:0 10px 24px -10px rgba(0,0,0,.55)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:rgba(255,255,255,.6)}
.btn.danger{color:var(--bad)}
.btn[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none}
.icon{width:36px;height:36px;border-radius:12px;border:1px solid var(--rim);background:rgba(255,255,255,.55);display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:all .2s}
.icon:hover{background:#fff;color:var(--fg)}
.icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Lager */
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 4px 16px}
.search{flex:1 1 220px;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.55);border:1px solid var(--rim);min-width:0}
.search svg{width:16px;height:16px;stroke:var(--faint);fill:none;stroke-width:2;flex:none}
.search input{border:0;outline:0;background:transparent;width:100%;min-width:0;font-weight:600}
.products{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.p{padding:10px 10px 14px;border-radius:24px;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,background .3s}
.p:hover{transform:translateY(-6px);background:var(--glass-strong);box-shadow:0 1px 0 #fff inset,0 30px 60px -28px rgba(40,36,30,.45)}
.p .img{position:relative;aspect-ratio:1;max-width:100%;border-radius:18px;overflow:hidden;background:#efece7}
.p .img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .4s}
.p:hover .img img{transform:scale(1.06)}
.p.out .img img{filter:grayscale(.8) opacity(.65)}
.tag{position:absolute;left:10px;top:10px;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.04em;background:rgba(255,255,255,.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.9)}
.p .name{font-size:16px;font-weight:800;margin:12px 6px 0;letter-spacing:-.01em}
.p .meta{display:flex;gap:10px;margin:2px 6px 0;font-size:12px;color:var(--faint);font-weight:600;font-variant-numeric:tabular-nums;flex-wrap:wrap}
.p .stockrow{display:flex;justify-content:space-between;align-items:flex-end;margin:14px 6px 12px}
.p .stockrow .lbl{font-size:12px;font-weight:700;color:var(--muted)}
.p .stockrow .n{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;transition:transform .3s}
.p:hover .stockrow .n{transform:scale(1.06)}
.p .act{display:grid;grid-template-columns:1fr auto;gap:8px;margin:0 2px}
.badge{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:999px;margin-top:4px}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.ok{color:var(--ok);background:rgba(46,143,99,.1)}
.badge.low{display:inline-flex;color:var(--warn);background:rgba(185,129,19,.12)}
.badge.out{color:var(--bad);background:rgba(194,69,58,.1)}

/* Formular */
label.f{display:grid;gap:6px;font-size:12.5px;font-weight:700;color:var(--muted);min-width:0}
.in{width:100%;min-width:0;padding:11px 13px;border-radius:12px;border:1px solid rgba(28,28,30,.1);background:rgba(255,255,255,.7);outline:0;font-weight:600;transition:border-color .2s,box-shadow .2s,background .2s;font-variant-numeric:tabular-nums}
.in::placeholder{color:#b3b1ac;font-weight:500}
.in:focus{background:#fff;border-color:rgba(28,28,30,.35);box-shadow:0 0 0 4px rgba(28,28,30,.06)}
select.in{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8a8883 50%),linear-gradient(135deg,#8a8883 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
.frow{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stack{display:grid;gap:12px}
.hint{font-size:12.5px;color:var(--faint);font-weight:600;margin:0}

/* Lieferung */
.drow{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(64px,.6fr)) minmax(70px,.7fr);gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--hair)}
.drow.h{font-size:11.5px;font-weight:800;color:var(--faint);letter-spacing:.04em;padding-bottom:8px}
.drow.h span:not(:first-child){text-align:right}
.drow .nm{display:flex;align-items:center;gap:10px;min-width:0;font-weight:700;font-size:14px}
.drow .nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drow .nm img{width:32px;height:32px;border-radius:9px;object-fit:cover;flex:none}
.drow .in{padding:8px 10px;text-align:right}
.drow .c{text-align:right;font-size:13px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.drow.on .nm{color:var(--fg)}
.drow:not(.on) .nm{color:var(--muted)}
.sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-top:16px}
.sum div{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.55);border:1px solid var(--rim)}
.sum small{display:block;font-size:11.5px;font-weight:700;color:var(--faint)}
.sum b{font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.alert{margin-top:12px;padding:10px 14px;border-radius:12px;font-size:13px;font-weight:600}
.alert.warn{background:rgba(185,129,19,.1);color:#7d5708}
.alert.bad{background:rgba(194,69,58,.1);color:#8f2b22}
details.dl{border-bottom:1px solid var(--hair)}
details.dl summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 8px;border-radius:12px;transition:background .2s}
details.dl summary::-webkit-details-marker{display:none}
details.dl summary:hover{background:rgba(255,255,255,.55)}
details.dl .d{font-size:13px;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums;min-width:5.6rem}
details.dl .body{padding:2px 8px 14px}
.chiprow{display:flex;flex-wrap:wrap;gap:6px}
.mini{font-size:12px;font-weight:700;padding:5px 9px;border-radius:9px;background:rgba(255,255,255,.65);border:1px solid var(--rim);font-variant-numeric:tabular-nums}

/* Tabelle, Feed */
.tw{overflow-x:auto;margin:0 -8px}
table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
th{text-align:left;font-size:11.5px;font-weight:800;color:var(--faint);letter-spacing:.04em;padding:8px;border-bottom:1px solid var(--hair);white-space:nowrap}
td{padding:11px 8px;border-bottom:1px solid var(--hair);vertical-align:middle}
tr.r:hover td{background:rgba(255,255,255,.5)}
.num{text-align:right;white-space:nowrap}
.c-in{color:var(--in)} .c-out{color:var(--out)} .c-tax{color:var(--tax)}
.kind{font-size:11px;font-weight:800;padding:3px 8px;border-radius:7px;white-space:nowrap}
.kind.in{background:rgba(47,122,88,.1);color:var(--in)}
.kind.out{background:rgba(168,98,43,.1);color:var(--out)}
.kind.in{width:auto;min-width:0;padding:3px 8px;border:0;border-radius:7px;font-size:11px;font-weight:800}
.kind.tax{background:rgba(109,95,174,.1);color:var(--tax)}
.feed{display:grid;gap:2px}
.feed .it{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:8px;border-radius:14px;transition:background .2s}
.feed .it:hover{background:rgba(255,255,255,.6)}
.feed img,.feed .ic{width:40px;height:40px;border-radius:11px;object-fit:cover;background:rgba(255,255,255,.7);display:grid;place-items:center;border:1px solid var(--rim)}
.feed .ic svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feed .t{font-size:14px;font-weight:700;min-width:0}
.feed .t small{display:block;font-size:12px;color:var(--faint);font-weight:600}
.feed .a{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.empty{padding:26px 18px;text-align:center;color:var(--muted);font-size:14px;border:1.5px dashed rgba(28,28,30,.12);border-radius:18px}
.empty b{display:block;color:var(--fg);font-size:16px;margin-bottom:4px}
.low{display:grid;gap:4px}
.low button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;padding:7px;border-radius:12px;cursor:pointer;text-align:left;transition:background .2s}
.low button:hover{background:rgba(255,255,255,.65)}
.low img{width:38px;height:38px;border-radius:10px;object-fit:cover}
.low .n{flex:1;min-width:0;font-weight:700;font-size:14px}
.low .n small{display:block;font-size:12px;color:var(--faint);font-weight:600}
.low b{font-size:18px;font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}
.bars{display:grid;gap:12px}
.bar{display:grid;grid-template-columns:minmax(0,9.5rem) 1fr auto;gap:12px;align-items:center;font-size:13.5px;font-weight:700}
.bar .tr{height:8px;border-radius:99px;background:rgba(28,28,30,.07);overflow:hidden}
.bar .fi{height:100%;border-radius:inherit;background:linear-gradient(90deg,#8d8a84,#2a2a2c);transform-origin:left;animation:grow 1s cubic-bezier(.2,.8,.2,1)}
@keyframes grow{from{transform:scaleX(0)}}
.chart svg{display:block;width:100%;height:auto}
.chart .bb{transition:opacity .2s}
.chart svg:hover .bb{opacity:.45}
.chart svg .bb:hover{opacity:1}
.legend{display:flex;gap:16px;font-size:12.5px;font-weight:700;color:var(--muted);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* Dialog */
.scrim{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(60,58,54,.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));animation:fade .2s ease}
.sheet{width:min(460px,100%);max-height:100%;overflow:auto;padding:22px;border-radius:28px;background:rgba(250,249,247,.86);border:1px solid #fff;backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);box-shadow:0 40px 90px -30px rgba(30,28,24,.45);animation:pop .4s cubic-bezier(.2,.9,.25,1.08)}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}}
.sh{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.sh img{width:64px;height:64px;border-radius:16px;object-fit:cover}
.sh h3{margin:0;font-size:20px;font-weight:800;letter-spacing:-.01em}
.sh p{margin:2px 0 0;color:var(--muted);font-size:13px;font-weight:600}
.qty{display:grid;grid-template-columns:54px 1fr 54px;gap:8px}
.qty button{height:54px;border-radius:16px;border:1px solid var(--rim);background:rgba(255,255,255,.75);font-size:24px;font-weight:600;cursor:pointer;transition:transform .12s,background .2s}
.qty button:hover{background:#fff}
.qty button:active{transform:scale(.92)}
.qty input{height:54px;text-align:center;font-size:26px;font-weight:800;border-radius:16px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--rim);background:rgba(255,255,255,.6);padding:7px 12px;border-radius:999px;font-weight:700;font-size:13px;cursor:pointer;color:var(--muted);transition:all .2s}
.chip:hover{color:var(--fg);background:#fff}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.lines{margin-top:16px;padding-top:12px;border-top:1px solid var(--hair);display:grid;gap:6px;font-size:13.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.lines div{display:flex;justify-content:space-between;gap:12px}
.lines .big{color:var(--fg);font-size:15px;font-weight:800;align-items:baseline}
.lines .big b{font-size:28px;letter-spacing:-.02em}
.foot{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.sw{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:14px;font-weight:700}
.sw input{appearance:none;width:46px;height:28px;border-radius:99px;background:rgba(28,28,30,.15);position:relative;cursor:pointer;transition:background .25s;flex:none}
.sw input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.sw input:checked{background:var(--ink)}
.sw input:checked::after{transform:translateX(18px)}

.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:60;display:grid;gap:8px;width:min(420px,calc(100% - 32px))}
.toast{display:flex;gap:10px;align-items:center;padding:12px 16px;border-radius:16px;background:rgba(28,28,30,.88);color:#fff;font-size:14px;font-weight:600;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);animation:pop .35s cubic-bezier(.2,.9,.25,1.1)}
.toast.bad{background:rgba(150,40,32,.92)}
.confirm{display:inline-flex;gap:6px;align-items:center;font-size:12px;font-weight:700}
.confirm .btn{padding:6px 10px;font-size:12px;border-radius:10px}
.banner{margin:0 4px 16px;padding:12px 16px;font-size:13.5px;font-weight:600;color:var(--muted);border-radius:16px}
.banner b{color:var(--fg)}
.view{animation:vin .45s cubic-bezier(.2,.8,.2,1)}
@keyframes vin{from{opacity:0;transform:translateY(8px)}}
@media (max-width:640px){
  .kpi .v{font-size:25px}
  .products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .p{padding:7px 7px 10px;border-radius:20px}
  .p .name{font-size:14px}
  .p .stockrow .n{font-size:28px}
  .p .act{grid-template-columns:1fr}
  .p .act .icon{width:100%}
  .drow{grid-template-columns:minmax(0,1fr) repeat(3,54px)}
  .drow .c,.drow.h span:last-child{display:none}
  .drow .nm img{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

[hidden]{display:none!important}
.login{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:16px}
.login .sh h1{margin:0;font-size:20px;font-weight:800;letter-spacing:-.01em}
.loginerr{min-height:20px;margin:12px 0 0;color:var(--bad);font-size:13px;font-weight:700}
.login .foot .btn{width:100%}
.qr{display:block;width:180px;height:180px;margin:6px auto;background:#fff;border-radius:12px;padding:8px}
.secret{word-break:break-all;font-size:12px;font-weight:700;color:var(--muted);text-align:center}
.acct{border-top:1px solid rgba(28,28,30,.1);margin-top:18px;padding-top:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}

/* Loser Sand, Lieferung */
.sand{margin-bottom:16px}
.sand summary{display:flex;justify-content:space-between;align-items:baseline;gap:10px;cursor:pointer;list-style:none;font-size:15px;font-weight:800}
.sand summary::-webkit-details-marker{display:none}
.sand summary span{font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.srow{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--hair);font-weight:700;font-size:14px}
.sand .srow:first-of-type{margin-top:10px}
.srow img{width:44px;height:44px;border-radius:12px;object-fit:cover}
.srow small{display:block;font-size:12px;font-weight:600;color:var(--faint)}
.srow small.neg{color:var(--bad)}
.pkhist{margin-top:14px;padding-top:10px;border-top:1px solid var(--hair);display:grid;gap:2px;font-size:13px;font-weight:600;color:var(--muted)}
.pkhist small{font-size:12px;font-weight:700;color:var(--faint)}
.pkhist div{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pkhist .btn{padding:6px 8px;font-size:13px;min-height:40px}
.alert[hidden]{display:none}
.dact{display:inline-flex;align-items:center;gap:8px}
.rk{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.dtot{margin-right:auto;display:grid;font-size:12.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.25}
.dtot b{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--fg)}

/* Handy */
.tabbar,.msz{display:none}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.locked,html.locked body{overflow:hidden}
button,a,label,summary{-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
@media (hover:none){
  .p:hover,.kpi:hover{transform:none;box-shadow:none;background:var(--glass)}
  .p:hover .img img,.p:hover .stockrow .n{transform:none}
  .gear:hover{transform:none;background:transparent}
  .btn:hover{box-shadow:none}
  .btn:active,.icon:active,.chip:active,.seg button:active,.tabbar button:active{transform:scale(.96)}
}
@media (max-width:980px){
  body{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px));overscroll-behavior-y:none}
  .blob{animation:none;will-change:auto}
  .app .glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.6)}
  .view{animation-duration:.2s}
  .mtop{display:flex;align-items:center;position:static;padding:6px 2px 0;background:none!important;border:0;box-shadow:none}
  .mtop .row{width:100%}
  .mtop .row img{width:30px}
  .gear{width:44px;height:44px;margin-right:-8px}
  .gear svg{width:22px;height:22px}
  .tabbar{position:fixed;z-index:40;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:6px;border-radius:24px;background:rgba(250,249,247,.82);border:1px solid #fff;backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);box-shadow:0 14px 34px -12px rgba(40,36,30,.42);transition:transform .22s ease,opacity .22s ease}
  .tabbar button{display:grid;justify-items:center;gap:2px;min-height:54px;padding:7px 0 5px;border:0;border-radius:18px;background:transparent;color:var(--muted);font-size:10.5px;font-weight:700;cursor:pointer;transition:background .18s,color .18s,transform .12s}
  .tabbar svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tabbar span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabbar button[aria-current="page"]{background:var(--ink);color:#fff}
  body.typing .tabbar{transform:translateY(140%);opacity:0;pointer-events:none}
  .toasts{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  input.in,select.in,textarea.in,.search input{font-size:16px}
  .qty input.in{font-size:26px}
  input[type=date].in{-webkit-appearance:none;appearance:none;min-height:46px}
  input.in,select.in{min-height:46px}
}
@media (max-width:640px){
  .head{margin:6px 2px 14px;gap:12px}
  .head h1{font-size:25px}
  .head p{display:none}
  .head .seg,.head .btn{width:100%}
  .seg{display:flex;width:100%;flex-wrap:nowrap}
  .seg button{flex:1 1 0;min-width:0;min-height:42px;padding:6px 2px;font-size:12.5px}
  .grid{gap:10px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{padding:14px 14px 12px;border-radius:20px}
  .kpi .l{font-size:12px}
  .kpi .v{font-size:21px;margin-top:6px}
  .kpi .s{font-size:11.5px;line-height:1.3}
  .card{padding:16px;border-radius:20px}
  .btn{min-height:46px}
  .icon{width:46px;height:46px;border-radius:14px}
  .icon svg{width:18px;height:18px}
  .chip{min-height:42px;padding:8px 14px;font-size:14px}
  .tools{margin:0 0 12px}
  .search{flex-basis:100%;min-height:48px}
  .low button,.feed .it{min-height:54px}
  .bar{grid-template-columns:minmax(0,7rem) 1fr auto;gap:8px}

  /* Lager: kompakte Zeilen statt hoher Karten */
  .products{grid-template-columns:minmax(0,1fr);gap:8px}
  .p{display:grid;grid-template-columns:64px minmax(0,1fr) auto;column-gap:12px;row-gap:10px;align-items:center;padding:10px;border-radius:20px}
  .p .img{grid-row:1/3;grid-column:1;width:64px;height:64px;border-radius:14px;aspect-ratio:auto}
  .p .tag{display:none}
  .p .name{grid-column:2;grid-row:1;margin:0;font-size:15px;line-height:1.25;align-self:end}
  .p .meta{grid-column:2;grid-row:2;margin:0;font-size:13px;gap:8px;align-self:start}
  .p .msz{display:inline}
  .p .dk{display:none}
  .p .stockrow{grid-column:3;grid-row:1/3;margin:0;display:grid;justify-items:end;gap:2px}
  .p .stockrow>div:first-child{order:2}
  .p .stockrow .lbl{display:none}
  .p .stockrow .n{font-size:30px}
  .p .badge{margin:0}
  .p .act{grid-column:1/-1;margin:0;grid-template-columns:minmax(0,1fr) 46px}
  .p .act .icon{width:46px}

  /* Lieferung: Name oben, drei Felder darunter */
  .drow{grid-template-columns:repeat(3,minmax(0,1fr));padding:10px 0;row-gap:8px}
  .drow .nm{grid-column:1/-1}
  .drow .c{display:none}
  .drow .nm img{display:block}
  .drow .in{text-align:center;padding:8px}
  .drow.h{position:sticky;top:calc(env(safe-area-inset-top,0px));z-index:2;background:rgba(244,243,240,.96);padding:8px 0;margin-bottom:2px}
  .drow.h span:first-child,.drow.h span:last-child{display:none}
  .drow.h span:not(:first-child){text-align:center}
  .frow{grid-template-columns:minmax(0,1fr)}
  .sum{grid-template-columns:repeat(2,minmax(0,1fr))}

  .drow.on{background:rgba(255,255,255,.5);margin:0 -8px;padding:10px 8px;border-radius:12px}
  .dfoot{position:sticky;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:3;flex-wrap:nowrap;align-items:center;margin:14px -8px -8px;padding:10px;border-radius:18px;background:#f8f7f4;box-shadow:0 10px 26px -12px rgba(40,36,30,.4)}
  .dfoot #dReset{padding:10px 8px}
  body.typing .dfoot{bottom:8px}
  .dact{width:100%;justify-content:space-between}

  /* Tabellen als Karten */
  .tw{overflow:visible;margin:0}
  .tw table,.tw tbody{display:block}
  .tw thead{display:none}
  .t-fin tr.r{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:6px 8px;align-items:center;padding:12px 0;border-bottom:1px solid var(--hair)}
  .t-fin td{padding:0;border:0}
  .t-fin td:nth-child(3){grid-column:1/4;grid-row:1;min-width:0!important}
  .t-fin td:nth-child(4){grid-column:4;grid-row:1;align-self:start}
  .t-fin td:nth-child(1){grid-column:1;grid-row:2}
  .t-fin td:nth-child(2){grid-column:2;grid-row:2}
  .t-fin td:nth-child(5){grid-column:3/5;grid-row:2;justify-self:end}
  .t-fin .icon{width:42px;height:42px}
  .t-tax tr.r{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;padding:12px 0;border-bottom:1px solid var(--hair)}
  .t-tax tr.t-sum{border-bottom:0}
  .t-tax td{padding:0;border:0;display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0;font-size:13px}
  .t-tax td:first-child{grid-column:1/-1;font-size:15px;justify-content:flex-start}
  .t-tax td[data-l]::before{content:attr(data-l);font-size:11.5px;font-weight:700;color:var(--faint)}
  .t-tax td[data-l="Zahllast"],.t-tax td[data-l="Offen"]{white-space:nowrap}
  .t-tax .badge{margin:0}

  /* Fenster kommen von unten, Daumenbereich */
  .scrim{place-items:end stretch;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(40,38,34,.38)}
  .scrim .sheet{width:100%;max-height:calc(100dvh - env(safe-area-inset-top,0px) - 20px);padding:8px 18px 0;border-radius:26px 26px 0 0;border-width:1px 0 0;background:#f8f7f4;backdrop-filter:none;-webkit-backdrop-filter:none;overscroll-behavior:contain;animation:sup .28s cubic-bezier(.2,.8,.2,1)}
  .scrim .sheet::before{content:"";display:block;width:40px;height:5px;border-radius:9px;background:rgba(28,28,30,.18);margin:2px auto 14px}
  .scrim .foot{position:sticky;bottom:0;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr);margin:14px -18px 0;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));background:#f8f7f4;border-top:1px solid var(--hair)}
  .scrim .foot .btn{min-height:52px;font-size:16px}
  .scrim .acct{margin-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .scrim .acct .btn{flex:1 1 40%}
}
@keyframes sup{from{transform:translateY(100%)}}