:root{
  --bg:#F3F5F2; --surface:#FFFFFF; --ink:#18201C; --muted:#5B6660; --line:#DCE1DC;
  --basil:#1D6B47; --basil-ink:#FFFFFF; --basil-soft:#E1EFE7; --warn:#9A5B00; --warn-soft:#FFF1D6; --danger:#B3261E;
  --c1:#2F7FB8; --c2:#C8412C; --c3:#9A7444; --c4:#3D4FA8; --c5:#4C8A2E;
  --shadow:0 1px 0 var(--line);
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121815; --surface:#1B2320; --ink:#E9EEEA; --muted:#9BA8A1; --line:#2C3833;
    --basil:#4FB07F; --basil-ink:#0E1A14; --basil-soft:#1E3A2C; --warn:#F2B451; --warn-soft:#3A2C12; --danger:#F08A80;
    --c1:#6CB2E6; --c2:#EE7C66; --c3:#CBA474; --c4:#8C9BF0; --c5:#8DC86A;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121815; --surface:#1B2320; --ink:#E9EEEA; --muted:#9BA8A1; --line:#2C3833;
  --basil:#4FB07F; --basil-ink:#0E1A14; --basil-soft:#1E3A2C; --warn:#F2B451; --warn-soft:#3A2C12; --danger:#F08A80;
  --c1:#6CB2E6; --c2:#EE7C66; --c3:#CBA474; --c4:#8C9BF0; --c5:#8DC86A;
  color-scheme:dark;
}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 120px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 Barlow,"Helvetica Neue",Arial,sans-serif;font-variant-numeric:tabular-nums;padding-bottom:84px;-webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
h1,h2,h3{font-family:"Barlow Semi Condensed",Barlow,"Arial Narrow",sans-serif;margin:0;line-height:1.15}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--basil);outline-offset:2px}
.wrap{max-width:720px;margin:0 auto}
.hidden{display:none!important}

/* Kopfzeile */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}
.top .wrap{padding:12px 16px 10px}
.titlerow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.titlerow h1{font-size:1.5rem}
.sub{color:var(--muted);font-size:.9rem}
.preview{font-size:.78rem;background:var(--warn-soft);color:var(--warn);border-radius:6px;padding:2px 8px;white-space:nowrap}
.search{margin-top:10px;width:100%;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:11px 12px;font-size:1rem}
.chips{display:flex;gap:8px;overflow-x:auto;padding:10px 16px 2px;margin:0 -16px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:.9rem;display:flex;align-items:center;gap:6px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--cat)}

/* Kategorien und Artikelzeilen */
main .wrap{padding:8px 0 24px}
.cat{margin-top:20px;padding:0 12px}
.cathead{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;margin-bottom:10px;border-radius:12px;background:color-mix(in srgb,var(--cat) 16%,var(--surface));border-left:7px solid var(--cat)}
.cathead h2{font-size:1.35rem;font-weight:700}
.cathead span{color:var(--muted);font-size:.9rem;font-weight:600}
.row{display:flex;align-items:center;gap:12px;background:var(--surface);padding:13px 12px 13px 14px;margin-bottom:9px;border:1.5px solid var(--line);border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.row.on{border-color:var(--basil);background:var(--basil-soft);box-shadow:inset 0 0 0 1.5px var(--basil)}
.info{flex:1;min-width:0}
.nr{display:inline-block;font-weight:700;font-size:.86rem;color:var(--cat);background:color-mix(in srgb,var(--cat) 14%,transparent);border-radius:7px;padding:2px 9px;margin-bottom:4px}
.name{font-size:1.1rem;line-height:1.28;font-weight:700}
.meta{color:var(--muted);font-size:.9rem;font-weight:500;margin-top:3px}
.unit{font-weight:700;color:var(--ink)}
.notebtn{display:inline-flex;align-items:center;gap:5px;border:1.5px dashed var(--line);background:none;border-radius:8px;padding:4px 10px;font-size:.86rem;font-weight:600;color:var(--muted);margin-top:7px;max-width:100%;text-align:left}
.notebtn.has{border-style:solid;border-color:var(--warn);background:var(--warn-soft);color:var(--warn)}
.artnote{color:var(--muted);font-size:.86rem;font-style:italic;margin-top:2px}
.sumnote{display:block;font-size:.88rem;color:var(--warn);font-weight:600}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.flag{display:inline-block;margin-top:4px;font-size:.8rem;background:var(--warn-soft);color:var(--warn);border-radius:6px;padding:1px 7px}
.off{opacity:.55}
.stepper{display:flex;align-items:center;flex:0 0 auto}
.stepper{gap:6px}
.stepper button{width:46px;height:46px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);font-size:1.6rem;font-weight:600;line-height:1;display:grid;place-items:center}
.stepper button:last-child{background:var(--basil);color:var(--basil-ink);border-color:var(--basil)}
.stepper input{width:48px;height:46px;border:0;border-radius:10px;text-align:center;font-size:1.35rem;font-weight:800;background:transparent}
.row.on .stepper input{color:var(--basil)}
.empty{padding:28px 16px;color:var(--muted);text-align:center}

/* feste Bestellleiste */
.orderbar{position:fixed;left:0;right:0;bottom:calc(68px + env(safe-area-inset-bottom,0px));z-index:6;padding:0 12px 10px;pointer-events:none}
.orderbar button{pointer-events:auto;display:flex;justify-content:space-between;align-items:center;width:100%;max-width:696px;margin:0 auto;border:0;border-radius:14px;background:var(--basil);color:var(--basil-ink);padding:15px 18px;font-size:1.08rem;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.18)}

/* untere Navigation */
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:7;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
nav.tabs .wrap{display:grid;grid-template-columns:repeat(5,1fr)}
nav.tabs a{border:0;background:none;padding:8px 2px 10px;font-size:.78rem;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px;min-height:64px}
nav.tabs a svg{width:24px;height:24px}
nav.tabs a[aria-current="page"]{color:var(--basil);font-weight:700}

/* Karten und Listen auf anderen Seiten */
.page{padding:16px}
.block{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px}
.block h2{font-size:1.25rem;margin-bottom:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:12px 16px;font-weight:600;min-height:46px}
.btn.primary{background:var(--basil);color:var(--basil-ink);border-color:var(--basil)}
.btn.full{width:100%}
.btn.danger{color:var(--danger)}
.stack{display:flex;flex-direction:column;gap:10px}
.list{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid var(--line);width:100%;background:none;border-left:0;border-right:0;border-top:0;text-align:left}
.li:last-child{border-bottom:0}
.li small{color:var(--muted);display:block}
.badge{font-size:.8rem;border-radius:6px;padding:2px 8px;background:var(--basil-soft);color:var(--basil);white-space:nowrap}
.badge.grey{background:var(--bg);color:var(--muted)}

/* Bottom-Sheet */
.sheet{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center}
.panel{background:var(--surface);width:100%;max-width:720px;max-height:92%;overflow:auto;border-radius:18px 18px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));animation:up .2s ease-out}
@media (prefers-reduced-motion:reduce){.panel{animation:none}}
@keyframes up{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
.panel h2{font-size:1.4rem;margin-bottom:4px}
.sumcat{margin-top:14px;padding-left:10px;border-left:5px solid var(--cat)}
.sumcat h3{font-size:1.05rem;margin-bottom:4px}
.sumline{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.sumline b{min-width:3.2em;text-align:right}
.sumline .nr{min-width:3.6em;color:var(--muted);font-weight:600}
.actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}
label.f{display:block;margin-top:12px;font-weight:600;font-size:.95rem}
label.f input,label.f select,label.f textarea{display:block;width:100%;margin-top:5px;border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:var(--bg);font-weight:400}
.err{color:var(--danger);font-size:.9rem;margin-top:8px}
.note{background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:10px 12px;font-size:.92rem;margin-top:12px}
textarea.copy{width:100%;min-height:180px;border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--bg);font-size:.9rem}
.toast{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;z-index:30;font-weight:600}

/* Anmeldung */
.login{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.login .box{width:100%;max-width:380px}
.login h1{font-size:2rem}
.logo{width:56px;height:56px;border-radius:14px;background:var(--basil);color:var(--basil-ink);display:grid;place-items:center;font:700 1.5rem "Barlow Semi Condensed",sans-serif;margin-bottom:14px}
.code{letter-spacing:.4em;text-align:center;font-size:1.4rem!important}

/* Ergänzungen für die echte App */
a{color:inherit}
nav.tabs a{text-decoration:none}

a.li{text-decoration:none;color:inherit}
a.btn{text-decoration:none;color:inherit}
a.btn.primary{color:var(--basil-ink)}
.chip{text-decoration:none;color:inherit}
.chip.active{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.flash{margin:12px 16px 0;padding:12px 14px;border-radius:12px;font-weight:600;background:var(--basil-soft);color:var(--basil)}
.flash.err{background:color-mix(in srgb,var(--danger) 14%,var(--surface));color:var(--danger)}
.saving{font-size:.78rem;color:var(--muted);white-space:nowrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.check{display:flex;align-items:center;gap:10px;margin-top:14px;font-weight:600}
.check input{width:22px;height:22px}
.up{color:var(--danger);font-weight:700}.down{color:var(--basil);font-weight:700}
.price{font-weight:700;font-size:1.05rem;white-space:nowrap;text-align:right}
.pricecol{text-align:right;flex:0 0 auto}
.inline{display:inline}
.linkbtn{background:none;border:0;padding:0;color:var(--basil);font-weight:600;text-decoration:underline}
.orderbar a{pointer-events:auto;display:flex;justify-content:space-between;align-items:center;width:100%;max-width:696px;margin:0 auto;border-radius:14px;background:var(--basil);color:var(--basil-ink);padding:15px 18px;font-size:1.08rem;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.18);text-decoration:none}
.supchips{padding-bottom:4px}
@media print{
  nav.tabs,.orderbar,.top,.noprint,.flash{display:none!important}
  body{background:#fff;color:#000;padding:0}
  .block{border:0;padding:0}
  .sumcat{border-left:3px solid #000}
}

/* ---- Update 2: Handy, Bestelltag, PDF ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
/* Mindestens 16 px in Eingabefeldern: sonst zoomt das iPhone beim Antippen */
input,select,textarea{font-size:max(16px,1em)}
.search{font-size:max(16px,1rem)}
button,a,input,select,textarea,label{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.stepper button,.btn,.chip,nav.tabs a,.notebtn{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* größere Plus-/Minus-Tasten */
.stepper{gap:8px}
.stepper button{width:58px;height:58px;border-radius:14px;font-size:2rem}
.stepper input{width:54px;height:58px;font-size:1.5rem;text-align:center;-moz-appearance:textfield}
.row{padding:14px 12px 14px 14px}
.btn{min-height:50px}
.btn.big{min-height:56px;font-size:1.08rem;font-weight:700}
.saving{min-width:8.5em;text-align:right}
.saving.bad{color:var(--danger);font-weight:700}
/* feste Leisten weg, solange getippt wird */
body.typing nav.tabs,body.typing .orderbar{display:none}
body.typing{padding-bottom:16px}
@media (max-width:380px){.stepper button{width:52px;height:52px}.stepper input{width:46px}}

.badge.hot{background:var(--warn-soft);color:var(--warn);font-weight:700}
.block.today{border-color:var(--basil);box-shadow:inset 0 0 0 1.5px var(--basil)}
.block.off{opacity:.65}
fieldset.days{border:0;margin:16px 0 0;padding:0}
fieldset.days legend{font-weight:600;font-size:.95rem;padding:0;margin-bottom:2px}
.daygrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.daychip{display:block;margin:0}
.daychip input{position:absolute;opacity:0;width:1px;height:1px}
.daychip span{display:grid;place-items:center;height:50px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);font-weight:700}
.daychip input:checked+span{background:var(--basil);border-color:var(--basil);color:var(--basil-ink)}
.daychip input:focus-visible+span{outline:3px solid var(--basil);outline-offset:2px}
label.radio{display:flex;align-items:center;gap:12px;padding:12px 4px;font-weight:600;min-height:50px}
label.radio input{width:24px;height:24px;margin:0}

.sumline .nr{align-self:flex-start;white-space:nowrap}

/* Briefkopf: auf dem Bildschirm unsichtbar, im Ausdruck Absender und Lieferant */
.printhead{display:none}
@media print{
  .printhead{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin:0 0 18px;font-size:11pt;line-height:1.4}
  .printhead .ph-from{grid-column:2;grid-row:1;text-align:left}
  .printhead .ph-to{grid-column:1;grid-row:1;padding-top:22mm}
  .printhead .ph-meta{grid-column:1 / span 2;grid-row:2;font-size:12pt;border-bottom:1px solid #000;padding-bottom:6px}
}

/* Import */
.improw{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:10px}
.improw.invalid{opacity:.75;border-color:#e0b4b4}
.improw.unsure{border-color:#e6b84c;box-shadow:inset 4px 0 0 #e6b84c}
.improw.exists{background:var(--bg)}
.improw .check.top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px;font-size:15px}
.improw .check input,.check input{width:24px;height:24px}
.check{display:flex;gap:10px;align-items:flex-start;margin:8px 0 12px;font-size:15px}
.improw .g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.improw .g3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px}
.improw .f{margin:4px 0}

/* ===== Design 1.2: weicher, runder, moderner ===== */
:root{--r:20px;--sh:0 1px 2px rgba(20,32,26,.06),0 6px 18px rgba(20,32,26,.07)}
body{background:radial-gradient(1200px 420px at 50% -120px,color-mix(in srgb,var(--basil) 9%,transparent),transparent),var(--bg);background-attachment:fixed}
.top{background:color-mix(in srgb,var(--surface) 82%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.cathead{border-left:0;border-radius:var(--r);background:color-mix(in srgb,var(--cat) 13%,var(--surface));position:relative;padding:12px 16px 12px 22px}
.cathead::before{content:"";position:absolute;left:9px;top:12px;bottom:12px;width:5px;border-radius:5px;background:var(--cat)}
.row{border:0;border-radius:var(--r);box-shadow:var(--sh);transition:box-shadow .15s,transform .1s}
.row.on{box-shadow:0 0 0 2px var(--basil),var(--sh);background:color-mix(in srgb,var(--basil) 6%,var(--surface))}
.block{border:0;border-radius:var(--r);box-shadow:var(--sh)}
.btn{border-radius:14px;transition:transform .1s,filter .15s}
.btn:active,.stepper button:active{transform:scale(.95);filter:brightness(.94)}
.btn.primary{box-shadow:0 4px 12px color-mix(in srgb,var(--basil) 35%,transparent)}
.stepper{background:var(--bg);border-radius:999px;padding:4px;gap:2px}
.stepper button{border:0;border-radius:999px;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.stepper button:last-child{box-shadow:0 2px 8px color-mix(in srgb,var(--basil) 40%,transparent)}
.stepper input{width:46px}
.orderbar button,.orderbar a{border-radius:999px;padding:16px 22px;box-shadow:0 10px 28px color-mix(in srgb,var(--basil) 40%,transparent)}
.chip{border-radius:999px}
input,select,textarea{border-radius:12px}
.flash{border-radius:14px}

/* ===== 1.2 kompakt: mehr Artikel pro Bildschirm ===== */
.top .wrap{padding:8px 16px 6px}
.titlerow h1{font-size:1.3rem}
.top .sub{font-size:.82rem}
.search{margin-top:6px;padding:9px 12px}
.chips{padding:7px 16px 0;gap:6px}
.chip{padding:4px 10px;font-size:.84rem}
.cat{margin-top:12px}
.cathead{padding:7px 14px 7px 22px;margin-bottom:6px}
.cathead::before{top:8px;bottom:8px}
.cathead h2{font-size:1.1rem}
.cathead span{font-size:.8rem}
.row{padding:9px 10px 9px 14px;margin-bottom:6px;gap:8px}
.row .name{font-size:1.04rem;line-height:1.22}
.row .meta{margin-top:2px;font-size:.86rem;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px}
.row .nr{margin:0;padding:1px 7px;font-size:.8rem}
.row .notebtn{margin-top:4px;padding:2px 8px;font-size:.8rem;border-width:1px}
.row .stepper button{width:52px;height:52px;font-size:1.8rem}
.row .stepper input{width:44px;height:52px;font-size:1.4rem}
@media (max-width:380px){.row .stepper button{width:46px;height:46px}.row .stepper input{width:38px}}
.row .pk{color:var(--muted)}

/* Ausgewählte Artikel: deutlich erkennbar */
.row.on{background:color-mix(in srgb,var(--basil) 17%,var(--surface));box-shadow:inset 7px 0 0 var(--basil),var(--sh)}
.row.on .stepper{background:color-mix(in srgb,var(--basil) 22%,var(--surface))}
.row.on .stepper input{background:var(--basil);color:var(--basil-ink);border-radius:999px;width:52px;height:46px;align-self:center}
.row.on .name{color:var(--ink)}

/* Kategorien verwalten */
.catadd,.catrow{display:flex;gap:8px;align-items:center}
.catadd input,.catrow input{flex:1;min-width:0;padding:11px 12px;border:1px solid var(--line);background:var(--bg)}
.catedit{border-left:7px solid var(--cat);padding:12px 14px}
.catmeta{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:8px}
.catbtns{display:flex;gap:6px}
.catbtns .btn{padding:8px 12px;min-height:44px}
.catbtns button:disabled{opacity:.35}

/* Artikel von Hand verschieben */
.mv{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.mvbtns{display:flex;gap:6px}
.mvbtns form{margin:0}
.mvbtns .btn{padding:6px 12px;min-width:42px}

/* =====================================================================
   Design 2.0 – Pizza Doy: Schiefer, Rot als Markenfarbe, Grün für "gewählt"
   ===================================================================== */
:root{
  --bg:#F3F4F6; --surface:#FFFFFF; --ink:#1B2430; --muted:#66707C; --line:#E4E7EB;
  --basil:#1E7A4F; --basil-soft:#E3F1EA;
  --brand:#1E2933; --brand2:#2B3945; --red:#D61919;
  --r:18px; --sh:0 1px 2px rgba(27,36,48,.05),0 8px 24px rgba(27,36,48,.07);
  --c1:#2F7FB8; --c2:#C8412C; --c3:#9A7444; --c4:#5560C4; --c5:#3E8E5A;
}
body{font-family:Inter,"Helvetica Neue",Arial,sans-serif;font-size:16px;background:var(--bg);background-attachment:scroll;letter-spacing:-.005em}
h1,h2,h3{font-family:"Barlow Semi Condensed",Inter,"Arial Narrow",sans-serif;letter-spacing:0}
body::before{background:var(--brand)}

/* Kopfzeile mit Marke */
.top{background:var(--brand);color:#fff;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;position:sticky}
.top::before{content:"";position:absolute;left:0;top:0;height:3px;width:34%;background:var(--red)}
.top .wrap{padding:12px 16px 10px}
.titlerow{gap:12px;justify-content:flex-start}
.titlerow>div:first-of-type{flex:1;min-width:0}
.titlerow h1{font-size:1.35rem;font-weight:700;color:#fff}
.top .sub{color:#A9B6C3;font-size:.84rem}
.brand{flex:0 0 auto;display:block;width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.brand img{display:block;width:40px;height:40px;border-radius:50%}
.saving{color:#A9B6C3}
.saving.bad{color:#FFB4AB}
.preview{background:rgba(255,255,255,.14);color:#fff}
.top .search{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:14px;margin-top:10px}
.top .search::placeholder{color:#A9B6C3}
.top .search:focus{background:rgba(255,255,255,.16);outline:2px solid rgba(255,255,255,.6);outline-offset:0}
.top .chip{background:rgba(255,255,255,.10);border:1px solid transparent;color:#E6ECF2}
.top .chip.active{background:#fff;color:var(--brand);font-weight:700}
.top .dot{box-shadow:0 0 0 2px rgba(255,255,255,.35)}

/* Seiten, Karten */
.page{padding:16px 14px}
.block{background:var(--surface);border:0;border-radius:var(--r);box-shadow:var(--sh);padding:18px}
.block h2{font-size:1.3rem;font-weight:700;margin-bottom:8px}
.block.today{box-shadow:0 0 0 2px var(--basil),var(--sh)}
.cathead{border-radius:14px;background:color-mix(in srgb,var(--cat) 11%,var(--surface));box-shadow:none}
.cathead h2{font-weight:700;letter-spacing:.01em}
.row{border-radius:16px;box-shadow:0 1px 2px rgba(27,36,48,.05),0 3px 10px rgba(27,36,48,.05)}
.row.on{box-shadow:inset 6px 0 0 var(--basil),0 3px 12px color-mix(in srgb,var(--basil) 18%,transparent)}
.row.on .stepper input{background:var(--basil)}
.name{font-weight:650}

/* Knöpfe */
.btn{border:1px solid var(--line);background:var(--surface);border-radius:14px;font-weight:650;box-shadow:0 1px 1px rgba(27,36,48,.04)}
.btn.primary{background:var(--basil);border-color:var(--basil);box-shadow:0 6px 16px color-mix(in srgb,var(--basil) 30%,transparent)}
.btn.danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 30%,var(--line))}
.badge{border-radius:999px;padding:3px 10px;font-weight:600}
.badge.hot{background:#FDE7E7;color:var(--red)}
.orderbar button,.orderbar a{background:var(--brand);box-shadow:0 12px 28px rgba(30,41,51,.35)}
.orderbar button b,.orderbar a b{background:var(--basil);border-radius:999px;padding:2px 12px}

/* Listen */
.list{border:0;border-radius:var(--r);box-shadow:var(--sh)}
.li{padding:15px 16px}
a.li:active{background:var(--bg)}
.li b{font-weight:650}
.li>.badge.grey{background:none;color:var(--muted);font-size:1.3rem;padding:0}

/* Formulare */
label.f{font-weight:600;color:var(--ink)}
label.f input,label.f select,label.f textarea{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:12px 13px}
label.f input:focus,label.f select:focus,label.f textarea:focus{outline:0;border-color:var(--basil);box-shadow:0 0 0 4px color-mix(in srgb,var(--basil) 18%,transparent)}
.flash{margin:14px 14px 0;border-radius:14px;box-shadow:var(--sh)}
.note{border-radius:14px}

/* Navigation unten */
nav.tabs{background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(27,36,48,.06)}
nav.tabs a{font-size:.74rem;font-weight:600;gap:2px;padding-top:7px}
nav.tabs a svg{width:26px;height:26px;padding:3px 14px;box-sizing:content-box;border-radius:999px;transition:background .15s}
nav.tabs a[aria-current="page"]{color:var(--brand)}
nav.tabs a[aria-current="page"] svg{background:var(--basil-soft);color:var(--basil)}

/* Startseite */
.sup{display:flex;flex-direction:column;gap:2px}
.suphead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.suphead h2{margin:0}
.when{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.9rem;font-weight:500;margin:2px 0 12px}
.when svg{width:16px;height:16px}
.stat{display:flex;align-items:baseline;gap:8px;margin:2px 0 2px}
.stat .num{font:700 2.4rem/1 "Barlow Semi Condensed",sans-serif;color:var(--brand)}
.stat .lbl{font-weight:600}
.statnote{color:var(--muted);font-size:.86rem;margin:0}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.tile{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh);padding:14px 16px;display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit}
.tile .k{color:var(--muted);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.tile .v{font:700 1.7rem/1.1 "Barlow Semi Condensed",sans-serif;color:var(--brand)}
.tile .s{color:var(--muted);font-size:.84rem}
.tile.warn .v{color:var(--warn)}
@media (max-width:360px){.tiles{grid-template-columns:1fr}}

/* Anmeldung */
.login{background:linear-gradient(180deg,var(--brand) 0,var(--brand) 38%,var(--bg) 38%)}
.login .box{background:var(--surface);border-radius:24px;padding:28px 22px;box-shadow:0 20px 50px rgba(27,36,48,.25);position:relative}
.login .logoimg{display:block;width:96px;height:96px;border-radius:50%;margin:-76px auto 14px;box-shadow:0 0 0 4px #fff,0 8px 20px rgba(0,0,0,.25)}
.login h1{font-size:1.7rem;text-align:center}
.login .sub{text-align:center;margin:6px 0 4px}
.login .logo{display:none}
.tile .v{font-size:1.35rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}