/* Mobile-first, Dark/Light automatisch */
:root{--bg:#f6f6f4;--card:#fff;--tx:#1b1b1a;--mu:#6b6b66;--bd:#e2e2dd;--ac:#2f7d4f;--on:#fff;--er:#b3261e;--okbg:#e4f3ea;--okt:#1d5a37}
@media (prefers-color-scheme:dark){:root{--bg:#121212;--card:#1d1d1c;--tx:#ececea;--mu:#9a9a94;--bd:#33332f;--ac:#4fae77;--on:#0c1a12;--er:#f2b8b5;--okbg:#17301f;--okt:#a8dcbd}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{padding:env(safe-area-inset-top) 12px calc(24px + env(safe-area-inset-bottom));max-width:520px;margin:0 auto}
h1{font-size:19px;font-weight:600;margin:0}
h2{font-size:17px;margin:0 0 4px}
header{display:flex;justify-content:space-between;align-items:center;padding:14px 4px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:12px;margin-bottom:12px}
.muted{color:var(--mu)}.small{font-size:13px}.err{color:var(--er);min-height:1.5em}
.row{display:flex;gap:8px;align-items:center;margin-top:8px}
.row.between{justify-content:space-between;margin:4px 4px 6px}
textarea,input,select{width:100%;font:inherit;color:var(--tx);background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:10px}
textarea{resize:vertical;margin-top:6px}
input{margin-top:8px}
select{flex:1;width:auto}
button{font:inherit;color:var(--tx);background:transparent;border:1px solid var(--bd);border-radius:10px;padding:10px 12px;min-height:44px;cursor:pointer}
.row>button{flex:1}
button.primary{width:100%;background:var(--ac);color:var(--on);border:0;font-weight:600;margin-top:10px}
button.icon{min-height:44px;min-width:44px;font-size:22px;padding:0;border:0}
button:active{transform:scale(.98)}
.list{padding:0;overflow:hidden}
.item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--bd)}
.item:first-child{border-top:0}
.item input{width:20px;height:20px;margin:0;flex:none}
.item .n{flex:1;min-width:0;overflow-wrap:anywhere}
.item .q{color:var(--mu);font-size:13px;white-space:nowrap}
.item.off .n{text-decoration:line-through;color:var(--mu)}
.item .ban{min-height:36px;min-width:36px;padding:0;border:0;font-size:16px;color:var(--mu)}
.item .ban.on{color:var(--er)}
.empty{padding:14px;color:var(--mu);font-size:14px}
.msg{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:var(--okbg);color:var(--okt);font-size:14px}
.msg.bad{background:transparent;border:1px solid var(--er);color:var(--er)}
.screen{min-height:90vh;display:flex;flex-direction:column;justify-content:center;gap:4px}
.screen input{text-align:center;font-size:22px;letter-spacing:.3em}
[hidden]{display:none!important}
dialog{border:1px solid var(--bd);border-radius:16px;background:var(--card);color:var(--tx);width:min(92vw,420px);padding:16px}
dialog::backdrop{background:rgba(0,0,0,.45)}
hr{border:0;border-top:1px solid var(--bd);margin:14px 0 0}
#toast{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));background:var(--tx);color:var(--bg);border-radius:12px;padding:8px 8px 8px 14px;display:flex;justify-content:space-between;align-items:center;max-width:496px;margin:0 auto}
#toast button{color:var(--bg);border-color:var(--bg);min-height:36px}

/* ---------- Einkaufs-App (Stufe 1): eigene Liste, Menü, Familie ---------- */
body{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
.sr{position:absolute;left:-9999px}
.link{border:0;color:var(--ac);min-height:44px;text-decoration:underline;background:none}
.danger{width:100%;margin-top:10px;color:var(--er);border-color:var(--er)}
#joinBox{display:flex;flex-direction:column;gap:4px}
#joinBox input{letter-spacing:.15em}
.addrow{display:flex;gap:8px;margin-bottom:12px}
.addrow input{margin:0;height:48px;border-radius:14px;background:var(--card)}
.addbtn{flex:none;width:48px;height:48px;border-radius:14px;border:0;background:var(--ac);color:var(--on);display:flex;align-items:center;justify-content:center;padding:0}
.cat{display:flex;justify-content:space-between;margin:14px 4px 6px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mu)}
.it{display:flex;align-items:center;gap:4px;border-top:1px solid var(--bd);min-height:52px}
.it:first-child{border-top:0}
.it .chk{flex:none;width:52px;min-height:52px;border:0;padding:0;display:flex;align-items:center;justify-content:center}
.it .chk i{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:9px;border:2px solid var(--mu);color:transparent}
.it.done .chk i{background:var(--ac);border-color:var(--ac);color:var(--on)}
.it .txt{flex:1;min-width:0;text-align:left;border:0;border-radius:0;padding:8px 12px 8px 0;min-height:52px}
.it .txt b{font-weight:500;overflow-wrap:anywhere}
.it .txt span{color:var(--mu);font-size:14px}
.it.done .txt b{text-decoration:line-through;color:var(--mu)}
.it .tags{display:block;margin-top:2px}
.pill{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--bg);border:1px solid var(--bd);color:var(--mu);font-size:12px;margin-right:4px}
.it.wait .chk i{border-style:dashed}
#nav{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:8px;background:var(--card);border-top:1px solid var(--bd);padding:4px 8px calc(4px + env(safe-area-inset-bottom));z-index:5}
#nav button{flex:1;max-width:200px;border:0;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;color:var(--mu)}
#nav button.on{color:var(--ac);font-weight:700}
#toast{bottom:calc(84px + env(safe-area-inset-bottom));z-index:6}
.fam{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--bd)}
.fam:first-child{border-top:0}
.fam span{flex:1;min-width:0}
.fam button{min-height:40px;padding:6px 10px}
.code{font:600 22px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.12em}

/* ---------- Startseite lebendiger (zb-v8) ---------- */
.hero{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--ac);color:var(--on);border-radius:20px;padding:18px 18px;margin-bottom:14px}
.hello{font-size:22px;font-weight:700;line-height:1.2}
.herosub{font-size:14px;opacity:.9;margin-top:4px}
.ring{flex:none;width:72px;height:72px;border-radius:50%;border:3px solid var(--on);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.ring b{font-size:24px}.ring span{font-size:11px}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.quick button{min-height:44px;border-radius:999px;padding:0 14px;background:var(--card);display:flex;align-items:center;gap:6px}
.quick button::before{content:"+";color:var(--ac);font-weight:700;font-size:18px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:baseline}
.cat{align-items:center}
.emptyc{text-align:center;padding:26px 16px}
.emptyc svg{color:var(--ac)}
.emptyc h2{margin:10px 0 4px}
.emptyc .row{margin-top:14px}
.emptyc .row button{margin-top:0}

/* ---------- Angebots-Links (zb-v9) ---------- */
.of{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--bd);min-height:56px}
.of:first-child{border-top:0}
.of b{flex:1;min-width:0;font-weight:500;overflow-wrap:anywhere}
.olink{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;border:1px solid var(--ac);border-radius:10px;color:var(--ac);text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap}

/* ---------- Angebote aus Prospektseiten (zb-v11) ---------- */
:root{--dl:#b4470b;--dlbg:#ffe9d9}
@media (prefers-color-scheme:dark){:root{--dl:#ffb27d;--dlbg:#3a2415}}
.chipsrow{display:flex;flex-wrap:wrap;gap:8px}
.chipsrow button{min-height:44px;border-radius:999px;padding:0 14px}
.chipsrow button.on{background:var(--ac);color:var(--on);border-color:var(--ac);font-weight:700}
.pill.deal{background:var(--dlbg);border-color:var(--dlbg);color:var(--dl);font-weight:600}
.ofr{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-top:1px solid var(--bd)}
.ofr:first-child{border-top:0}
.ofr .t{flex:1;min-width:0}
.ofr .t b{font-weight:600;overflow-wrap:anywhere}
.ofr .t small{display:block;color:var(--mu);font-size:13px;margin-top:2px}
.ofr .p{text-align:right;white-space:nowrap}
.ofr .p b{display:block;font-size:19px;color:var(--dl)}
.ofr .p s{color:var(--mu);font-size:12px}
.ofr .x{flex:none;min-height:44px;min-width:36px;border:0;padding:0;color:var(--mu);font-size:18px}
.ofh{padding:8px 12px;font-size:13px;font-weight:700;color:var(--mu);border-top:1px solid var(--bd);background:var(--bg)}
.ofh:first-child{border-top:0}

/* v19: Angebotsdetails (Hersteller, Packung) unter dem Artikel in der Einkaufsliste */
.it .ofi{display:block;color:var(--mu);font-size:12px;line-height:1.35;margin-top:3px;font-weight:400}

/* v21: Gültigkeit deutlich zeigen; Angebote, die erst noch starten, sind gelb markiert */
.pill.soon{background:#f5c84222;border-color:#d9a520;color:#d9a520;font-weight:600}
.it .ofi.soon,.ofr .val.soon{color:#d9a520;font-weight:600}
.ofr .val{display:block;font-size:12px;margin-top:1px}

/* v22: Warnkasten „Noch nicht gültig“ */
:root{--wn:#6b4700;--wnbg:#ffefc2;--wnbd:#d9a520}
@media (prefers-color-scheme:dark){:root{--wn:#ffd97a;--wnbg:#3a2e0c;--wnbd:#b98a12}}
.warn{display:flex;gap:8px;align-items:flex-start;margin:6px 0 4px;padding:7px 10px;border-radius:10px;background:var(--wnbg);border:1px solid var(--wnbd);border-left-width:4px;color:var(--wn);font-size:13px;line-height:1.35;font-weight:500;text-align:left}
.warn svg{flex:none;margin-top:1px}
.warn b{font-weight:700}
.ofr.soon .p b{opacity:.5}
.ofr.soon .p::after{content:"noch nicht gültig";display:block;font-size:11px;color:var(--wn);font-weight:700;text-align:right}
.it .txt .warn,.it .txt .warn span{color:var(--wn);font-size:13px}

/* v24: Vorrat und Vorschläge */
#nav{gap:2px}
.st{padding:10px 12px;border-top:1px solid var(--bd)}
.st:first-child{border-top:0}
.st1{display:flex;align-items:center;gap:10px}
.st .txt{flex:1;min-width:0;text-align:left;border:0;border-radius:0;padding:4px 0;min-height:44px;background:none}
.st .txt b{display:block;font-weight:600;overflow-wrap:anywhere}
.st .sts{display:block;color:var(--mu);font-size:13px;margin-top:2px}
.st.low .sts,.st.out .sts,.st.due .sts{color:var(--wn);font-weight:700}
.step{display:flex;align-items:center;gap:6px;flex:none}
.step button{width:44px;height:44px;border-radius:12px;padding:0;font-size:22px;line-height:1}
.step b{min-width:52px;text-align:center;font-weight:700}
.bar{height:6px;border-radius:3px;background:var(--bd);margin-top:8px;overflow:hidden}
.bar i{display:block;height:6px;border-radius:3px;background:var(--ac)}
.st.low .bar i,.st.due .bar i{background:var(--wnbd)}
.st.out .bar i{background:var(--dl)}
.stm{display:block;color:var(--mu);font-size:12px;margin-top:5px}
.sug{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px;padding:10px 12px;border-radius:14px;background:var(--wnbg);border:1px solid var(--wnbd);border-left-width:4px;color:var(--wn)}
.sug svg{flex:none;margin-top:2px}
.sug b{display:block;font-size:15px}
.sug span{display:block;font-size:13px;line-height:1.4;margin-top:2px}
.sugb{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.sugb button{min-height:42px;padding:0 14px;border-radius:12px;margin:0;width:auto;font-weight:600}
.sugb button:not(.primary){background:transparent;border:1px solid var(--wnbd);color:var(--wn)}
#stAll{margin-top:12px}

/* v25: Rezepte und „Gekocht“ */
.rc{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--bd)}
.rc:first-child{border-top:0}
.rc .t{flex:1;min-width:0}
.rc .t b{display:block;font-weight:600;overflow-wrap:anywhere}
.rc .t small{display:block;color:var(--mu);font-size:13px;margin-top:2px}
.rc button{flex:none;min-height:44px;padding:0 14px;border-radius:12px;width:auto;margin:0;font-weight:600}
.ck{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--bd)}
.ck:first-child{border-top:0}
.ck input{width:22px;height:22px;flex:none;margin:2px 0 0}
.ck b{display:block;font-weight:600}
.ck small{display:block;color:var(--mu);font-size:13px;margin-top:2px;line-height:1.35}

/* v26: Angebote weiterer Märkte in der Liste (dezenter als das beste) */
.pill.deal.alt{background:transparent;border-color:var(--dl);font-weight:500}
#shopBox .cat{margin-top:0}