:root{--pri:#1f7a63;--pri2:#2fa584;--acc:#e58a2b;--warn:#e0a13a;--bg:#f3f6f5;--card:#fff;--tx:#14231f;--mu:#62746f;--line:#e2eae7;--track:#e6eeeb;--sel:#e9f5f0;--bad:#c0392b;--badbg:#fdeceb;--okbg:#e3f5ec;--wabg:#fff3dc;--sh:0 1px 2px rgba(20,35,31,.05),0 6px 20px rgba(20,35,31,.06);--r:16px}
:root[data-theme=dark]{--pri:#4fd1ac;--pri2:#7fe3c6;--acc:#f3a65a;--warn:#e8b552;--bg:#0f1815;--card:#18241f;--tx:#e8f1ee;--mu:#98aea7;--line:#27372f;--track:#27372f;--sel:#1e332b;--bad:#f1948a;--badbg:#3a2220;--okbg:#1c3a2d;--wabg:#3a2f16;--sh:0 1px 2px rgba(0,0,0,.3)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--pri:#4fd1ac;--pri2:#7fe3c6;--acc:#f3a65a;--warn:#e8b552;--bg:#0f1815;--card:#18241f;--tx:#e8f1ee;--mu:#98aea7;--line:#27372f;--track:#27372f;--sel:#1e332b;--bad:#f1948a;--badbg:#3a2220;--okbg:#1c3a2d;--wabg:#3a2f16;--sh:0 1px 2px rgba(0,0,0,.3)}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--tx)}
h1,h2,h3{margin:0;line-height:1.2}h2{font-size:24px;letter-spacing:-.3px}h3{font-size:16px}
.muted{color:var(--mu);font-size:13px}.sp{height:10px}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:var(--tx);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 11px;max-width:100%;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 20%,transparent)}
label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mu)}
label.chk{flex-direction:row;align-items:center;gap:8px;color:var(--tx);font-size:14px}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--pri)}
/* Layout */
#app{display:flex;min-height:100vh}
#side{width:230px;flex:none;background:var(--card);border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 16px;font-weight:800;font-size:18px}
.brand i{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--pri),var(--pri2));display:grid;place-items:center;font-style:normal;font-size:19px}
.nv{display:flex;align-items:center;gap:12px;border:0;background:none;color:var(--mu);padding:11px 12px;border-radius:12px;font-weight:600;text-align:left}
.nv .ic{font-size:19px;width:24px;text-align:center}
.nv:hover{background:var(--sel)}.nv.on{background:var(--sel);color:var(--pri)}
.who{margin-top:auto;padding:10px;border-top:1px solid var(--line);font-size:13px;color:var(--mu)}
.who b{color:var(--tx);display:block}
#main{flex:1;min-width:0;padding:26px 28px 60px;max-width:1180px}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:18px}
.head p{margin:4px 0 0;color:var(--mu)}
@media (max-width:860px){#app{display:block}#side{position:fixed;inset:auto 0 0 0;width:auto;height:auto;flex-direction:row;padding:6px 6px calc(6px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--line);z-index:20;gap:0;justify-content:space-around}.brand,.who{display:none}.nv{flex-direction:column;gap:1px;padding:6px 4px;font-size:10.5px;flex:1;align-items:center;text-align:center}.nv .ic{font-size:21px}#main{padding:16px 14px 100px}h2{font-size:21px}}
/* Karten */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:16px;margin-bottom:16px;border:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.row.end{align-items:flex-end}.sb{justify-content:space-between}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:12px}
.btn{border:0;background:var(--pri);color:#fff;padding:10px 18px;border-radius:12px;font-weight:700}
:root[data-theme=dark] .btn{color:#06201a}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .btn{color:#06201a}}
.btn:hover{filter:brightness(1.07)}.btn.sec{background:var(--sel);color:var(--pri)}.btn.ghost{background:none;color:var(--mu);border:1px solid var(--line)}.btn.sm{padding:5px 11px;font-size:13px;border-radius:10px}.btn.danger{background:var(--badbg);color:var(--bad)}
.chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;background:var(--track);color:var(--mu);white-space:nowrap}
.chip.ok{background:var(--okbg);color:var(--pri)}.chip.wa{background:var(--wabg);color:var(--acc)}.chip.bad{background:var(--badbg);color:var(--bad)}
.pill{border:1px solid var(--line);background:var(--card);color:var(--tx);padding:6px 13px;border-radius:999px;font-size:13px}
.pill.on{background:var(--pri);border-color:var(--pri);color:#fff}
:root[data-theme=dark] .pill.on{color:#06201a}
.note{background:var(--wabg);color:var(--acc);padding:10px 12px;border-radius:12px;font-size:13px;margin:10px 0}
.note.bad{background:var(--badbg);color:var(--bad)}
/* Bilder */
.pic{width:100%;aspect-ratio:16/10;background-size:cover;background-position:center;position:relative;overflow:hidden}
.pic.art span{position:absolute;inset:0;display:grid;place-items:center;font-size:58px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18))}
.pic.art i{position:absolute;border-radius:50%;background:rgba(255,255,255,.2)}
.pic .c1{width:130px;height:130px;right:-30px;top:-40px}.pic .c2{width:80px;height:80px;left:-20px;bottom:-26px}
.pic.sm{width:64px;aspect-ratio:1;border-radius:14px;flex:none}.pic.sm.art span{font-size:30px}
.pic.big{aspect-ratio:21/9;border-radius:var(--r) var(--r) 0 0}.pic.big.art span{font-size:90px}
/* Rezeptkarten */
.rc{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:transform .12s}
.rc:hover{transform:translateY(-2px)}.rc.in{outline:2px solid var(--pri)}
.rc .bd{padding:12px 13px;display:flex;flex-direction:column;gap:7px;flex:1}
.rc .nm{font-weight:700;line-height:1.25}
.rc .tg{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.92);color:#14231f;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700}
.mac{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--mu)}.mac b{color:var(--tx);font-size:14px}
/* Ringe */
.rings{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px}
.ring{position:relative;max-width:150px;margin:0 auto;width:100%}
.ring .rt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.ring b{font-size:21px;line-height:1}.ring small{font-size:11px;color:var(--mu);margin-top:3px}
.rlabel{text-align:center;font-size:13px;color:var(--mu);margin-top:4px}
/* Mahlzeiten-Zeilen */
.meal{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}.meal:first-child{border-top:0}
.meal .tx{flex:1;min-width:0}.meal .tx b{display:block}.meal select{width:100%;margin-top:4px}
.sl{font-size:12px;color:var(--mu);text-transform:uppercase;letter-spacing:.5px}
.days{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px}
.dtab{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:8px 12px;min-width:62px;text-align:center;color:var(--mu);font-weight:600}
.dtab.on{background:var(--pri);color:#fff;border-color:var(--pri)}:root[data-theme=dark] .dtab.on{color:#06201a}
.dtab small{display:block;font-weight:500;font-size:11px;opacity:.85}
.today{outline:2px solid var(--acc)}
/* Einkauf */
.cat{font-weight:800;color:var(--pri);margin:16px 0 4px;font-size:14px}
.si{display:flex;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--line);color:var(--tx);font-size:15px}.si.done{opacity:.4;text-decoration:line-through}
/* Modal */
#modal{position:fixed;inset:0;background:rgba(10,20,17,.55);z-index:50;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:30px 12px}
#modal[hidden]{display:none}
.mbox{background:var(--card);border-radius:20px;max-width:640px;width:100%;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.mbox .in{padding:18px}.mbox ul,.mbox ol{padding-left:20px;margin:6px 0}
.x{position:absolute;right:12px;top:12px;background:rgba(0,0,0,.45);color:#fff;border:0;width:34px;height:34px;border-radius:50%;font-size:18px;z-index:2}
.mrel{position:relative}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:88px;background:#16231f;color:#fff;padding:9px 16px;border-radius:12px;font-size:14px;z-index:90;opacity:0;pointer-events:none;transition:opacity .2s}#toast.on{opacity:1}
/* Login */
.auth{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(900px 500px at 10% -10%,color-mix(in srgb,var(--pri2) 28%,transparent),transparent),var(--bg)}
.abox{background:var(--card);border-radius:24px;box-shadow:var(--sh);padding:28px;max-width:400px;width:100%;border:1px solid var(--line)}
.abox h1{font-size:26px;margin:8px 0 4px}.abox form{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.pv{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:10px 0}.pv div{background:var(--sel);border-radius:14px;padding:10px 12px}.pv b{display:block;font-size:20px;color:var(--pri)}
.kpi{display:flex;gap:18px;flex-wrap:wrap}.kpi div b{display:block;font-size:22px}
.thumb{width:104px;flex:none;position:relative}.thumb .pic{position:absolute;inset:0;aspect-ratio:auto;height:100%}.thumb .pic.art span{font-size:40px}
label.si{flex-direction:row;align-items:center;gap:10px;color:var(--tx);font-size:14px;padding:9px 2px;border-bottom:1px solid #eef1ef;text-align:left;cursor:pointer}
label.si.done{color:var(--mu);text-decoration:line-through}

.trow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 2px;border-top:1px solid var(--line)}
.trow .muted{font-size:12.5px}.pick:hover{background:var(--sel)}
@media (max-width:860px){#side{overflow-x:auto}.nv{flex:0 0 auto;min-width:60px}}