:root{
  --blau:#1E6FB9; --navy:#0F2C54; --g1:#3A87CE; --g2:#103E72;
  --bg:#f3f5f8; --card:#ffffff; --line:#e3e8ef; --text:#1b2430; --muted:#6b7787;
  --ok:#1f9d55; --warn:#e08600; --danger:#d23f3f; --radius:14px;
  --shadow:0 2px 10px rgba(16,40,80,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text); -webkit-text-size-adjust:100%;
  padding-bottom:env(safe-area-inset-bottom);
}
button,input{font-family:inherit;font-size:16px}

/* ---------- Buttons ---------- */
.btn{
  border:0; border-radius:var(--radius); padding:12px 16px; cursor:pointer;
  background:linear-gradient(135deg,var(--g1),var(--g2)); color:#fff; font-weight:600;
  transition:filter .15s; min-height:46px;
}
.btn:active{filter:brightness(.92)}
.btn-secondary{background:#e9eef5; color:var(--navy)}
.btn-danger{background:#fbe9e9; color:var(--danger)}
.btn-scan{width:100%; font-size:18px; padding:16px}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(135deg,var(--g1),var(--g2)); color:#fff;
  padding:12px 14px; padding-top:calc(12px + env(safe-area-inset-top));
  box-shadow:var(--shadow);
}
.brand{font-weight:700; font-size:18px}
.topbar .stats{margin-left:auto; display:flex; gap:14px; font-size:13px; opacity:.95}
.topbar .stats b{font-size:16px}
.iconbtn{background:none;border:0;color:#fff;font-size:20px;padding:2px 6px;opacity:.9;cursor:pointer;text-decoration:none;line-height:1}

/* ---------- Scanzone ---------- */
.scanzone{max-width:760px; margin:0 auto; padding:14px}
.scan-controls{display:flex; flex-direction:column; gap:10px}
.manual{display:flex; gap:8px}
.manual input{flex:1; padding:12px; border:1px solid var(--line); border-radius:var(--radius)}

/* Kamera-Overlay */
.scan-overlay{
  position:fixed; inset:0; background:rgba(10,20,40,.92); z-index:50;
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.scan-inner{width:100%; max-width:480px; text-align:center}
#reader{width:100%; border-radius:var(--radius); overflow:hidden; background:#000}
.scan-hint{color:#cfe0f5; margin:12px 0}

/* ---------- Trefferkarte ---------- */
.product-panel{
  margin-top:14px; background:var(--card); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:14px; border:1px solid var(--line);
}
.pp-head{display:flex; gap:14px; align-items:center}
.pp-img{width:72px; height:72px; border-radius:12px; object-fit:cover; background:#eef2f7; flex:none}
.pp-img.placeholder{display:flex; align-items:center; justify-content:center; font-size:32px}
.pp-info{flex:1; min-width:0}
.pp-name{font-weight:700; font-size:18px}
.pp-sub{color:var(--muted); font-size:13px; margin-top:2px}
.pp-qty{font-size:15px; margin-top:4px}
.pp-qty b{font-size:20px}
.pp-new-badge{display:inline-block; background:#eaf3ff; color:var(--blau); border-radius:8px; padding:2px 8px; font-size:12px; font-weight:600; margin-top:4px}

.pp-book{display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap}
.stepper{display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.stepper button{width:44px; height:46px; border:0; background:#eef2f7; font-size:22px; cursor:pointer; color:var(--navy)}
.stepper input{width:64px; text-align:center; border:0; height:46px; font-size:18px; font-weight:600}
.pp-book .btn-in{background:linear-gradient(135deg,#2bb673,#1f8f56)}
.pp-book .btn-out{background:linear-gradient(135deg,#ef8a5a,#d2542f)}
.pp-actions{margin-top:8px}
.pp-edit{background:none;border:0;color:var(--blau);cursor:pointer;font-size:14px;padding:6px 0}

/* ---------- Tabs ---------- */
.tabs{max-width:760px; margin:8px auto 0; display:flex; gap:6px; padding:0 14px}
.tab{flex:1; background:none; border:0; padding:12px; font-weight:600; color:var(--muted);
     border-bottom:3px solid transparent; cursor:pointer}
.tab.active{color:var(--navy); border-bottom-color:var(--blau)}
.tabpanel{display:none; max-width:760px; margin:0 auto; padding:14px}
.tabpanel.active{display:block}

/* ---------- Liste ---------- */
.listbar{display:flex; gap:8px; margin-bottom:12px}
.listbar input{flex:1; padding:12px; border:1px solid var(--line); border-radius:var(--radius)}
.product-list{display:flex; flex-direction:column; gap:8px}
.pcard{
  display:flex; align-items:center; gap:12px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; box-shadow:var(--shadow);
}
.pcard.low{border-color:#f3c98b; background:#fffaf1}
.pc-img{width:48px;height:48px;border-radius:10px;object-fit:cover;background:#eef2f7;flex:none;
        display:flex;align-items:center;justify-content:center;font-size:22px}
.pc-main{flex:1; min-width:0}
.pc-name{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pc-sub{color:var(--muted); font-size:12px}
.pc-low{color:var(--warn); font-weight:600}
.pc-qty{font-weight:700; font-size:17px; min-width:52px; text-align:right}
.pc-qty small{font-weight:400; color:var(--muted); font-size:12px}
.pc-btns{display:flex; gap:6px}
.pc-btns button{width:38px;height:38px;border-radius:10px;border:0;font-size:20px;cursor:pointer;background:#eef2f7;color:var(--navy)}
.pc-btns .minus{background:#fbeceb;color:var(--danger)}
.pc-btns .plus{background:#e9f6ef;color:var(--ok)}

/* ---------- Verlauf ---------- */
.history-list{display:flex;flex-direction:column;gap:6px}
.hrow{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
      border-radius:10px;padding:8px 12px}
.hrow .hdelta{font-weight:700;min-width:54px}
.hrow .hin{color:var(--ok)} .hrow .hout{color:var(--danger)} .hrow .hcorrect{color:var(--muted)}
.hrow .hname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrow .htime{color:var(--muted);font-size:12px}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;background:rgba(10,20,40,.5);z-index:60;
       display:flex;align-items:flex-end;justify-content:center;padding:0}
.modal-card{background:var(--card);width:100%;max-width:560px;border-radius:18px 18px 0 0;
            padding:18px;max-height:92vh;overflow:auto}
.modal-card h2{margin:0 0 12px}
.modal-card label{display:block;font-size:13px;color:var(--muted);margin-bottom:10px}
.modal-card input{display:block;width:100%;margin-top:4px;padding:11px;border:1px solid var(--line);
                  border-radius:10px;color:var(--text)}
.row2{display:flex;gap:10px}
.row2 label{flex:1}
.modal-actions{display:flex;align-items:center;gap:8px;margin-top:6px}
.modal-actions .spacer{flex:1}

/* ---------- Login ---------- */
.login-body{display:flex;min-height:100vh;align-items:center;justify-content:center;
            background:linear-gradient(135deg,var(--g1),var(--g2))}
.login-card{background:#fff;border-radius:18px;padding:28px;width:min(90vw,340px);
            text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.login-logo{font-size:44px}
.login-card h1{margin:6px 0 18px;color:var(--navy);font-size:20px}
.login-card input{width:100%;padding:13px;border:1px solid var(--line);border-radius:12px;margin-bottom:12px}
.login-card button{width:100%;border:0;border-radius:12px;padding:13px;font-weight:700;color:#fff;
                   background:linear-gradient(135deg,var(--g1),var(--g2));cursor:pointer}
.login-error{color:var(--danger);font-size:14px;margin:0 0 10px}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120%);
       background:var(--navy);color:#fff;padding:12px 18px;border-radius:12px;z-index:80;
       box-shadow:var(--shadow);transition:transform .25s;max-width:90vw;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--danger)}

.hidden{display:none !important}
.empty{color:var(--muted);text-align:center;padding:30px 10px}

@media (min-width:640px){
  .scan-controls{flex-direction:row}
  .scan-controls .btn-scan{width:auto;flex:1}
  .manual{flex:1}
  .modal{align-items:center}
  .modal-card{border-radius:18px}
}

/* ---------- v2: MHD-Feld im Panel ---------- */
.pp-mhd{margin-top:10px}
.pp-mhd label{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
.pp-mhd input{padding:8px;border:1px solid var(--line);border-radius:10px}
.pp-nameinput{width:100%;padding:8px;border:1px solid var(--line);border-radius:8px;font-weight:700;font-size:16px}

/* ---------- Nährwerte ---------- */
.nutri-wrap{margin-top:12px}
.nutriscore{display:inline-block;padding:3px 10px;border-radius:8px;font-weight:700;font-size:13px;color:#fff;margin-bottom:8px}
.ns-a{background:#1f8f3b}.ns-b{background:#7ac21a;color:#1b2430}.ns-c{background:#f4c20d;color:#1b2430}.ns-d{background:#ef8a17}.ns-e{background:#e63e11}
table.nutri{width:100%;border-collapse:collapse;font-size:13px;background:#f8fafc;border-radius:10px;overflow:hidden}
table.nutri caption{caption-side:top;text-align:left;color:var(--muted);font-size:12px;padding:6px 8px}
table.nutri td{padding:5px 8px;border-top:1px solid var(--line)}
table.nutri td:last-child{text-align:right;font-weight:600}
.nutri-box:empty{display:none}

/* ---------- Chargen ---------- */
.batches{margin-top:12px}
.batches-title{font-size:12px;color:var(--muted);margin-bottom:6px}
.batch-chip{display:inline-flex;align-items:center;gap:6px;background:#eef2f7;border-radius:20px;padding:4px 6px 4px 12px;font-size:13px;margin:0 6px 6px 0}
.batch-chip button{border:0;background:#dbe3ee;border-radius:50%;width:20px;height:20px;cursor:pointer;color:var(--navy)}

/* ---------- MHD-Karten ---------- */
.pcard.exp-over{border-color:#ef9a9a;background:#fdeeee}
.pcard.exp-soon{border-color:#f3c98b;background:#fffaf1}
.pcard.exp-warn{border-color:#e3e8ef}

/* ---------- Einkaufsliste ---------- */
.shopbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.shop-list{display:flex;flex-direction:column;gap:6px}
.shop-row{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.shop-row input[type=checkbox]{width:20px;height:20px;flex:none}
.shop-name{flex:1}
.shop-name small{color:var(--muted)}
.shop-row.done .shop-name{text-decoration:line-through;color:var(--muted)}
.auto-tag{background:#eaf3ff;color:var(--blau);border-radius:6px;padding:1px 6px;font-size:11px}
.shop-del{border:0;background:none;color:var(--danger);font-size:20px;cursor:pointer;padding:0 4px}

/* ---------- Rezepte ---------- */
.recipe-out{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:6px 16px;box-shadow:var(--shadow);min-height:60px}
.recipe-md h3{color:var(--navy);margin:16px 0 6px}
.recipe-md ul{margin:6px 0;padding-left:20px}
.recipe-md li{margin:3px 0}
.recipe-md p{margin:6px 0;line-height:1.5}
.recipe-md p.step{padding-left:6px;border-left:3px solid var(--blau);margin:6px 0}
#btnRecipes:disabled{opacity:.6}

/* ---------- Einstellungen ---------- */
.set-line{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:8px 0;margin:0}
.joincode{margin-top:16px;background:#f3f7fc;border-radius:12px;padding:14px}
.jc-label{font-size:13px;color:var(--muted);margin-bottom:8px}
.jc-row{display:flex;gap:8px;align-items:center}
.jc-row code{flex:1;font-size:22px;font-weight:700;letter-spacing:3px;color:var(--navy);background:#fff;border:1px dashed var(--blau);border-radius:8px;padding:8px 12px;text-align:center}
.jc-hint{font-size:12px;color:var(--muted);margin-top:8px}

/* ---------- Login-Ergänzungen ---------- */
.login-alt{font-size:14px;margin:14px 0 0}
.login-alt a{color:var(--blau);font-weight:600}
.login-hint{font-size:13px;color:var(--muted);margin:6px 0}
.login-hr{border:0;border-top:1px solid var(--line);margin:14px 0}
.empty.err{color:var(--danger)}

/* ---------- Rückrufe ---------- */
.tab.has-alert{position:relative}
.tab.has-alert::after{content:"";position:absolute;top:8px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--danger)}
.recall-intro{font-size:12px;color:var(--muted);background:#f3f7fc;border-radius:10px;padding:10px 12px;margin-bottom:12px}
.recall-list{display:flex;flex-direction:column;gap:8px}
.recall-hit{background:#fdeeee;border:1px solid #ef9a9a;border-radius:12px;padding:12px;margin-bottom:6px}
.recall-hit b{color:var(--danger)}
.rh-row{font-size:14px;margin-top:6px}
.rh-row a{color:var(--blau)}
.rh-note{font-size:12px;color:var(--muted);margin-top:8px}
.recall-card{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;box-shadow:var(--shadow)}
.rc-img{width:52px;height:52px;border-radius:8px;object-fit:contain;background:#fff;flex:none}
.rc-main{flex:1;min-width:0}
.rc-title{font-weight:600;color:var(--navy);text-decoration:none;display:block}
.rc-title:hover{text-decoration:underline}
.rc-reason{font-size:13px;color:var(--warn);margin-top:2px}
.rc-meta{font-size:12px;color:var(--muted);margin-top:2px}