@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/lato-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/lato-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/lato-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/lato-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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:"Lato";font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/lato-latin-900-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lato";font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/lato-latin-ext-900-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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}
/* Layout: sticky Kopf mit Reitern, eine Spalte (max. 960px), Listen in Paneelen; Erfassung (Scan) als Vollbild-Ablauf in 3 Schritten. Farbwelt: Lösungsorientiert (Aubergine + Türkis) */
:root{
  --bg:#F6F6F8; --surface:#FFFFFF; --ink:#1E1B2B; --muted:#5F5A70; --line:#E1DFE8;
  --accent:#48406A; --accent-ink:#FFFFFF; --accent-soft:#ECEAF3;
  --teal:#7AC9D7; --teal-ink:#1E1B2B; --teal-soft:#E2F3F6; --teal-strong:#1F7486;
  --cam:#2A2540; --cam-2:#433C60; --scan:#7AC9D7; --scan-ink:#1E1B2B;
  --paper:#FCFCFA; --paper-ink:#2B2838; --paper-band:#CDEBF1;
  --warn:#B8344A; --warn-soft:#FBE4E8; --soon:#86640C; --soon-soft:#F5ECCD; --ok:#2B7446; --ok-soft:#E1F2E7;
  --shadow:0 1px 2px rgba(30,27,43,.06),0 8px 24px rgba(30,27,43,.10);
  --f-display:"Lato","Helvetica Neue",Arial,sans-serif;
  --f-body:"Lato","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#14121C; --surface:#1D1A28; --ink:#ECEAF3; --muted:#A49EB7; --line:#322D44;
  --accent:#ABA0DB; --accent-ink:#16131F; --accent-soft:#2B2740;
  --teal:#7AC9D7; --teal-ink:#14121C; --teal-soft:#1B3238; --teal-strong:#8FD6E2;
  --cam:#0F0D17; --cam-2:#2A2540; --scan:#7AC9D7; --scan-ink:#14121C;
  --warn:#F2849A; --warn-soft:#3B1D26; --soon:#E2C46A; --soon-soft:#352E17; --ok:#7CC98F; --ok-soft:#1C3324;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.4); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#14121C; --surface:#1D1A28; --ink:#ECEAF3; --muted:#A49EB7; --line:#322D44;
  --accent:#ABA0DB; --accent-ink:#16131F; --accent-soft:#2B2740;
  --teal:#7AC9D7; --teal-ink:#14121C; --teal-soft:#1B3238; --teal-strong:#8FD6E2;
  --cam:#0F0D17; --cam-2:#2A2540; --scan:#7AC9D7; --scan-ink:#14121C;
  --warn:#F2849A; --warn-soft:#3B1D26; --soon:#E2C46A; --soon-soft:#352E17; --ok:#7CC98F; --ok-soft:#1C3324;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.4); color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;font-variant-numeric:tabular-nums}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
.wrap{max-width:960px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--teal-strong);outline-offset:2px}

.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;padding-block:14px 6px}
.brand svg{width:30px;height:30px;flex:none}
.brand h1{font-size:22px;font-weight:900;letter-spacing:-.01em}
.brand h1 span{color:var(--teal-strong)}
.brand small{color:var(--muted);font-size:13px;margin-left:auto;text-align:right}
.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin:0 -4px}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;padding:10px 11px 12px;color:var(--muted);text-decoration:none;font-weight:700;border-bottom:3px solid transparent;white-space:nowrap}
.tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--teal)}
.tabs .n{display:inline-block;min-width:20px;padding:0 6px;margin-left:6px;border-radius:10px;font-size:12px;font-weight:700;text-align:center}
.tabs .n.alert{background:var(--warn-soft);color:var(--warn)}
.tabs .n.info{background:var(--accent-soft);color:var(--accent)}

main{padding-block:20px 64px}
.view{display:flex;flex-direction:column;gap:20px}
.vhead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.vhead h2{font-size:28px;font-weight:900;letter-spacing:-.01em}
.vhead p{margin:2px 0 0;color:var(--muted);max-width:60ch}
.status{padding:10px 14px;border-radius:10px;background:var(--soon-soft);color:var(--soon);font-size:14px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:10px;padding:9px 14px;font-weight:700;cursor:pointer;background:var(--accent);color:var(--accent-ink);min-height:40px}
.btn.teal{background:var(--teal);color:var(--teal-ink)}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--line)}
.btn.small{padding:6px 10px;font-size:13px;min-height:32px}
.btn.danger{background:transparent;color:var(--warn);border:1px solid var(--warn-soft)}
.btn.danger.armed{background:var(--warn);color:var(--surface);border-color:var(--warn)}
.btn:disabled{opacity:.5;cursor:default}
.btn svg{width:18px;height:18px}
.linkbtn{background:none;border:0;padding:0;color:inherit;text-align:left;cursor:pointer;font-weight:700}
.linkbtn:hover{color:var(--accent)}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;min-width:0}
.panel > h3{font-size:16px;font-weight:900;padding:14px 16px 0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.grid2 > *{min-width:0}

.rows{list-style:none;margin:0;padding:4px 0}
.row{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.rows .row:first-child{border-top:0}
.row .main{flex:1;min-width:0}
.row .sub{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.row .end{flex:none;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.amount{font-weight:700}
.empty{padding:18px 16px;color:var(--muted);font-size:14px}
.thumb{flex:none;width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--accent-soft);border:1px solid var(--line)}

.chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--accent-soft);color:var(--accent);vertical-align:1px}
.chip.over{background:var(--warn-soft);color:var(--warn)}
.chip.soon{background:var(--soon-soft);color:var(--soon)}
.chip.good{background:var(--ok-soft);color:var(--ok)}
.chip.teal{background:var(--teal-soft);color:var(--teal-strong)}
.chip.neutral{background:transparent;color:var(--muted);border:1px solid var(--line)}
.chip.example{background:transparent;color:var(--muted);border:1px dashed var(--line);font-weight:400}
.chip.rx{background:var(--warn);color:var(--surface);letter-spacing:.05em;font-size:10.5px}

.label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.big{font-family:var(--f-display);font-size:32px;font-weight:900;line-height:1.1}
.stat{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px}

.bars{display:flex;flex-direction:column;gap:10px;padding:8px 16px 16px}
.bar{display:grid;grid-template-columns:minmax(0,9.5em) 1fr auto;align-items:center;gap:10px;font-size:14px}
.bar .track{height:10px;border-radius:5px;background:var(--teal-soft);overflow:hidden}
.bar .fill{height:100%;background:var(--teal);border-radius:5px}
.bar .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.group-h{padding:14px 16px 4px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}

.check{flex:none;width:24px;height:24px;border-radius:7px;border:2px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;padding:0;margin-top:1px}
.check[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.check svg{width:14px;height:14px}
.done .main .linkbtn{text-decoration:line-through;color:var(--muted)}

.quick{display:flex;gap:8px;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--line)}
.quick input,.quick select{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:9px 12px;min-width:0}
.quick #qName{flex:3 1 180px}
.quick #qMenge{flex:1 1 80px}
.quick #qKat{flex:2 1 150px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.toolbar select{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 10px;min-height:40px}

/* Formular-Blatt */
.sheet{position:fixed;inset:0;z-index:20;background:rgba(20,17,30,.5);display:flex;align-items:flex-end;justify-content:center}
.sheet-panel{background:var(--surface);width:100%;max-width:560px;max-height:92vh;overflow:auto;border-radius:18px 18px 0 0;box-shadow:var(--shadow);padding:20px max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
@media (min-width:640px){.sheet{align-items:center}.sheet-panel{border-radius:18px}}
.sheet-panel h3{font-size:20px;font-weight:900;margin-bottom:14px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:13px;font-weight:700;color:var(--muted)}
.field input,.field select,.field textarea{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:9px 12px;width:100%;min-height:42px}
.field textarea{min-height:80px;resize:vertical}
.field .hint{font-size:12px;color:var(--muted)}
.beleg-img{display:block;width:100%;max-height:260px;object-fit:contain;border-radius:10px;background:var(--bg);border:1px solid var(--line)}
.sheet-actions{display:flex;gap:8px;justify-content:space-between;margin-top:18px;flex-wrap:wrap}
.sheet-actions .right{display:flex;gap:8px;margin-left:auto}
.formerr{color:var(--warn);font-size:14px;margin-top:10px}
@media (max-width:480px){.fields{grid-template-columns:1fr}}

/* Erfassung (Scan) */
.scan{position:fixed;inset:0;z-index:30;background:var(--bg);display:flex;justify-content:center}
.scan-col{width:100%;max-width:560px;height:100%;display:flex;flex-direction:column;background:var(--bg);padding-top:env(safe-area-inset-top,0px)}
@media (min-width:600px){.scan{background:rgba(20,17,30,.55);padding-block:16px}.scan-col{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);padding-top:0}}
.scan-head{flex:none;display:flex;align-items:center;gap:10px;padding:12px max(14px,env(safe-area-inset-right,0px)) 10px max(14px,env(safe-area-inset-left,0px));background:var(--surface);border-bottom:1px solid var(--line)}
.iconbtn{width:44px;height:44px;flex:none;border:0;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;cursor:pointer}
.iconbtn svg{width:20px;height:20px}
.scan-ttl{flex:1;min-width:0}
.eyebrow{font-size:10px;font-weight:900;letter-spacing:.18em;color:var(--teal-strong);text-transform:uppercase}
.scan-title{font-size:18px;font-weight:900;letter-spacing:-.01em}
.scan-step{font-size:12px;color:var(--muted);white-space:nowrap}
.scan-prog{flex:none;height:4px;background:var(--accent-soft)}
.scan-prog div{height:4px;background:var(--teal);transition:width .25s}
.scan-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.scan-foot{flex:none;display:flex;gap:10px;padding:12px max(14px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));background:var(--bg);border-top:1px solid var(--line);flex-wrap:wrap}
.scan-foot .btn{flex:1;min-height:50px;border-radius:12px;font-size:15px}
.scan-foot .btn.wide{flex:1.4}
.scan-foot .ferr{flex-basis:100%;color:var(--warn);font-size:13px}

.cam{flex:1;display:flex;flex-direction:column;background:var(--cam);color:#fff;min-height:540px}
.modes{display:flex;gap:6px;padding:12px 14px}
.modes button{flex:1;min-height:40px;border-radius:20px;font-size:12px;font-weight:700;cursor:pointer;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.modes button[aria-selected="true"]{background:#fff;color:var(--cam);border-color:#fff}
.viewer{position:relative;flex:1;min-height:420px;margin:0 14px;border-radius:16px;overflow:hidden;background:var(--cam-2)}
.viewer .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;max-width:100%}
.mock{position:absolute;left:50%;top:22px;width:262px;height:340px;margin-left:-131px;transform:rotate(-3deg);background:var(--paper);color:var(--paper-ink);border-radius:5px;box-shadow:0 10px 30px rgba(0,0,0,.4);font-size:11px;line-height:1.45}
.mock .band{height:30px;background:var(--paper-band);border-radius:5px 5px 0 0}
.mock .pad{padding:10px 14px}
.mock .t1{font-size:19px;font-weight:900;letter-spacing:-.01em;line-height:1.2}
.mock .t2{font-size:13px;font-weight:700}
.mock .ln{display:flex;justify-content:space-between;border-bottom:1px dotted #c8c6d0}
.mock .sum{display:flex;justify-content:space-between;font-weight:900;font-size:14px;margin-top:6px}
.mock .code{position:absolute;left:14px;bottom:14px;display:flex;gap:10px;align-items:center}
.mock .grid{display:grid;width:66px;height:66px;flex:none}
.mock .grid span{display:block}
.mock .mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;line-height:1.5}
.frame{position:absolute;pointer-events:none}
.frame i{position:absolute;width:26px;height:26px;border:4px solid var(--scan)}
.frame i:nth-child(1){left:-2px;top:-2px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.frame i:nth-child(2){right:-2px;top:-2px;border-left:0;border-bottom:0;border-radius:0 6px 0 0}
.frame i:nth-child(3){left:-2px;bottom:-2px;border-right:0;border-top:0;border-radius:0 0 0 6px}
.frame i:nth-child(4){right:-2px;bottom:-2px;border-left:0;border-top:0;border-radius:0 0 6px 0}
.frame b{position:absolute;left:6px;right:6px;height:2px;top:12%;background:var(--scan);box-shadow:0 0 10px var(--scan)}
@media (prefers-reduced-motion:no-preference){.frame b{animation:scanline 2.6s ease-in-out infinite}@keyframes scanline{0%,100%{top:12%}50%{top:84%}}}
.vhint{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(20,17,30,.86);border-radius:10px;padding:9px 11px;font-size:12px;line-height:1.45}
.busy{position:absolute;inset:0;background:rgba(20,17,30,.78);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:30px;text-align:center}
.busy strong{font-size:16px}
.busy span{font-size:12px;color:var(--teal)}
.busy .pb{width:200px;max-width:100%;height:6px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.busy .pb div{height:6px;width:90%;background:var(--scan)}
@media (prefers-reduced-motion:no-preference){.busy .pb div{animation:pbar 6s ease-out forwards}@keyframes pbar{from{width:8%}to{width:92%}}}
.cam-ctrl{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 22px 22px}
.cam-ctrl .side{min-height:44px;padding:0 12px;border-radius:10px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-size:12px;font-weight:700;cursor:pointer}
.shutter{width:72px;height:72px;flex:none;border-radius:50%;border:5px solid #fff;background:var(--scan);cursor:pointer}

.s-pad{padding:14px max(14px,env(safe-area-inset-right,0px)) 18px max(14px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:12px}
.tiles{display:flex;gap:10px}
.tile{flex:1;height:72px;border-radius:10px;background:var(--accent-soft);display:flex;align-items:flex-end;padding:6px 8px;font-size:11px;font-weight:700;color:var(--muted);position:relative;overflow:hidden;min-width:0}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile span{position:relative;background:rgba(255,255,255,.88);color:#2B2838;border-radius:4px;padding:1px 5px}
.tile.good{background:var(--ok-soft);color:var(--ok)}
.banner{border-radius:10px;padding:9px 11px;font-size:13px;background:var(--ok-soft);color:var(--ok)}
.banner.soon{background:var(--soon-soft);color:var(--soon)}
.sf{display:flex;flex-direction:column;gap:4px}
.sf .lh{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sf label{font-size:12px;font-weight:700;color:var(--muted)}
.sf input,.sf textarea{width:100%;min-height:44px;border-radius:10px;padding:0 12px;border:1px solid var(--line);background:var(--surface)}
.sf textarea{padding:10px 12px;min-height:70px;resize:vertical}
.sf input.check-me{border:2px solid var(--soon);background:var(--soon-soft)}
.src{font-size:10.5px;font-weight:700;border-radius:4px;padding:2px 6px;white-space:nowrap}
.src.ok{background:var(--ok-soft);color:var(--ok)}
.src.check{background:var(--soon-soft);color:var(--soon)}
.src.man{background:transparent;color:var(--muted);border:1px solid var(--line)}
.togglebox{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface);border:2px solid var(--line);border-radius:10px;padding:10px 12px}
.togglebox.on{border-color:var(--warn)}
.togglebox.on.teal{border-color:var(--teal)}
.togglebox .tb-sub{font-size:12px;color:var(--muted)}
.pill{min-width:64px;min-height:40px;border-radius:20px;font-weight:900;cursor:pointer;background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.pill[aria-pressed="true"]{background:var(--warn);color:var(--surface);border-color:var(--warn)}
.togglebox.teal .pill[aria-pressed="true"]{background:var(--teal);color:var(--teal-ink);border-color:var(--teal)}
.sec{font-size:11px;font-weight:900;letter-spacing:.14em;color:var(--teal-strong);text-transform:uppercase}
.sec-sub{font-size:12px;color:var(--muted);margin-top:-8px}
.cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cat{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;min-height:64px;padding:10px 12px;border-radius:12px;cursor:pointer;background:var(--surface);color:var(--ink);border:2px solid var(--line)}
.cat strong{font-size:14px}
.cat[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.ki{font-size:9px;font-weight:900;letter-spacing:.06em;border-radius:4px;padding:2px 5px;background:var(--teal-soft);color:var(--teal-strong)}
.cat[aria-pressed="true"] .ki{background:rgba(255,255,255,.22);color:inherit}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chipbtn{min-height:36px;padding:0 12px;border-radius:18px;font-size:13px;font-weight:700;cursor:pointer;background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.chipbtn[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.preview{background:var(--surface);border-radius:10px;padding:10px 12px;border:1px solid var(--line)}
.preview.rx{border:2px solid var(--warn)}
.preview .ph{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.preview .tags{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.done-box{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:30px;text-align:center}
.done-box .ring{width:76px;height:76px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center}
.done-box .ring svg{width:38px;height:38px}
.done-box strong{font-size:20px}
.done-box p{margin:0;font-size:14px;color:var(--muted);line-height:1.6}
.done-box p b{color:var(--ink)}
.done-box .btn{width:100%;min-height:50px;border-radius:12px}
@media (prefers-reduced-motion:no-preference){.sheet-panel{animation:up .18s ease-out}@keyframes up{from{transform:translateY(16px);opacity:.6}}}

/* ---- Server-App: Anmeldung, Menü, Admin, Einkauf, Webapp ---- */
html{-webkit-text-size-adjust:100%}
body{margin:0;padding-bottom:env(safe-area-inset-bottom,0px)}
body.auth .top,body.auth main,body.auth .bnav{display:none}
.authwrap{display:none}
body.auth .authwrap{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));background:var(--bg)}
.authcard{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow)}
.authcard .brand{padding:0 0 16px}
.authcard h2{font-size:22px;font-weight:900;margin-bottom:8px}
.formcol{display:flex;flex-direction:column;gap:12px;padding:14px 16px 16px}
.authcard .formcol{padding:0}
.hint{font-size:12px;color:var(--muted)}
.brand-meta{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;line-height:1.3}
.brand-meta small{color:var(--muted);font-size:12px}
.brand-meta .hh{font-weight:700;color:var(--accent)}
.brand small#today{margin-left:0}
.menubtn{display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-weight:700;color:var(--ink)}
.menubtn svg{width:20px;height:20px}
.menubtn span{max-width:12em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu{position:fixed;z-index:15;top:calc(env(safe-area-inset-top,0px) + 58px);right:max(12px,env(safe-area-inset-right,0px));min-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column}
.menu a{padding:11px 12px;border-radius:8px;color:var(--ink);text-decoration:none;font-weight:700}
.menu a:hover,.menu a:focus-visible{background:var(--accent-soft)}
.menu hr{border:0;border-top:1px solid var(--line);margin:4px 0;width:100%}
.menu .m-only{display:none}
.sync{position:sticky;top:calc(env(safe-area-inset-top,0px) + 112px);z-index:4;padding:8px 12px;border-radius:10px;background:var(--soon-soft);color:var(--soon);font-size:13px;font-weight:700;margin-bottom:12px}
.status{margin-bottom:12px}
.notice{padding:12px 14px;border-radius:10px;background:var(--teal-soft);color:var(--ink);display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
.notice .pw{font-size:17px;font-weight:700;background:var(--surface);padding:2px 8px;border-radius:6px;border:1px solid var(--line);user-select:all}
.ph-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 6px;flex-wrap:wrap}
.ph-row h3{font-size:16px;font-weight:900}
.inline-form{display:flex;gap:8px;flex:1;min-width:0}
.inline-form input{flex:1;min-width:0;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:8px 12px}
.sec-title{font-size:20px;font-weight:900;margin-top:8px}
.row .end .actions{max-width:100%}

/* Einkauf */
.chips .cnt{margin-left:6px;font-size:12px;opacity:.75}
.chipbtn.ghostchip{border-style:dashed;color:var(--muted)}
.shop-search{position:relative}
.shop-search svg{position:absolute;left:14px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--muted)}
.shop-search input{width:100%;min-height:50px;border-radius:14px;border:1px solid var(--line);background:var(--surface);padding:0 14px 0 44px;font-size:16px}
.sec-h{font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.ti{position:relative;min-width:0}
.ti-main{width:100%;aspect-ratio:1/1;max-width:100%;border-radius:12px;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 6px;text-align:center;font-weight:700;background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.ti-main svg{width:34px;height:34px;flex:none}
.ti-n{font-size:13.5px;line-height:1.2;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ti-s{font-size:11.5px;font-weight:400;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ti.todo .ti-main{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.ti.recent .ti-main{background:var(--teal-soft);color:var(--ink);border-color:transparent}
.ti.new .ti-main{border:2px dashed var(--teal-strong);color:var(--teal-strong)}
.ti-more{position:absolute;top:2px;right:2px;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;opacity:.75}
.ti.todo .ti-more{color:var(--accent-ink)}
.ti-more svg{width:18px;height:18px}
.ti-main:active{transform:scale(.97)}
.shop-empty{grid-column:1/-1;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.cat-sec{border-top:1px solid var(--line)}
.cat-sec:first-child{border-top:0}
.cat-h{width:100%;display:flex;align-items:center;gap:10px;padding:12px 4px;background:none;border:0;cursor:pointer;font-weight:700;font-size:15px;color:var(--ink);text-align:left}
.cat-h svg{width:22px;height:22px;color:var(--accent)}
.cat-h .sub{margin-left:auto;color:var(--muted);font-weight:400}
.cat-h[aria-expanded="true"]{color:var(--accent)}
.cat-sec .sgrid{padding-bottom:12px}
#sGurkerl{text-decoration:none;align-self:flex-start}

/* Unten-Leiste (Handy, Webapp) */
.bnav{display:none}
@media (max-width:720px){
  .tabs{display:none}
  .brand{padding-block:12px 10px}
  .brand small#today{display:none}
  .menubtn span{display:none}
  .menu .m-only{display:block}
  .sync{top:calc(env(safe-area-inset-top,0px) + 66px)}
  main{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .bnav{display:flex;position:fixed;z-index:12;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));justify-content:space-around;align-items:center}
  .bnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:700;color:var(--muted);text-decoration:none;padding:4px 0;min-height:44px}
  .bnav a svg{width:24px;height:24px}
  .bnav a[aria-current="page"]{color:var(--accent)}
  .bscan{flex:none;width:58px;height:58px;margin:-22px 6px 0;border-radius:50%;border:4px solid var(--surface);background:var(--teal);color:var(--teal-ink);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow)}
  .bscan svg{width:26px;height:26px}
  .menu{top:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px));right:max(12px,env(safe-area-inset-right,0px))}
  .sgrid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .vhead h2{font-size:24px}
}
@media (display-mode:standalone){.brand small#today{display:none}}

/* Haushaltskonto */
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.kpis .stat{min-width:0}
.kpis .big{font-size:22px;overflow-wrap:anywhere}
.big.pos,.amount.pos{color:var(--ok)}
.big.neg,.neg{color:var(--warn)}
.mini-search{min-height:36px;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:0 10px;min-width:0;width:12em;max-width:100%}
.more{padding:8px 16px 14px}
.sheet-panel.wide{max-width:760px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.imp-prev{border-collapse:collapse;width:100%;font-size:13px}
.imp-prev th,.imp-prev td{padding:6px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.imp-prev td:nth-child(3){white-space:normal;min-width:16em}
.imp-prev .num{text-align:right}
.tx-head{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.tx-text{margin:0 0 12px;color:var(--muted);font-size:14px;overflow-wrap:anywhere}
.checkline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--ink);font-weight:400}
.checkline input[type=checkbox]{width:20px;height:20px;min-height:0}
.inline-in{flex:1;min-width:8em;width:auto!important;min-height:36px!important}
@media (max-width:480px){.kpis .big{font-size:17px}.kpis .stat{padding:12px 10px}}