: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}

/* ---------- Landingpage ---------- */
.landing{background:var(--bg)}
.lp-wrap{max-width:960px;margin:0 auto;padding:24px 16px;display:grid;grid-template-columns:1fr;gap:20px}
.lp-hero{background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;border-radius:18px;padding:26px;box-shadow:var(--shadow)}
.lp-logo{font-size:44px}
.lp-hero h1{margin:6px 0 2px;font-size:26px}
.lp-claim{font-size:16px;opacity:.95;margin:0 0 12px;font-weight:600}
.lp-intro{line-height:1.55;opacity:.96;margin:0 0 14px}
.lp-feats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lp-feats li{background:rgba(255,255,255,.15);border-radius:20px;padding:6px 12px;font-size:13px}
.lp-side{display:flex;flex-direction:column;gap:16px}
.lp-price{background:var(--card);border:2px solid var(--blau);border-radius:18px;padding:20px;text-align:center;box-shadow:var(--shadow)}
.lp-price-big{font-size:30px;font-weight:800;color:var(--navy)}
.lp-price-note{color:var(--muted);font-size:13px;margin:2px 0 14px}
.lp-buy{width:100%;font-size:17px;margin-bottom:10px;background:linear-gradient(135deg,#ffc439,#f0a800);color:#0b2540}
.lp-reg{width:100%}
.lp-login{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow)}
.lp-login h2{margin:0 0 12px;color:var(--navy);font-size:18px}
.lp-login input{width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px}
.lp-login .btn{width:100%}
.lp-footer{text-align:center;color:var(--muted);font-size:13px;padding:20px 16px 30px}
.lp-footer a{color:var(--blau);text-decoration:none}
@media (min-width:760px){
  .lp-wrap{grid-template-columns:1.3fr 1fr;align-items:start}
}

/* ---------- App-Footer ---------- */
.app-footer{max-width:760px;margin:10px auto 0;padding:16px;text-align:center;color:var(--muted);font-size:12px}
.app-footer a{color:var(--blau);text-decoration:none}

/* ---------- Rechtsseiten ---------- */
.legal-body{background:var(--bg)}
.legal{max-width:760px;margin:0 auto;padding:24px 18px 60px;line-height:1.6}
.legal h1{color:var(--navy)}
.legal h2{color:var(--navy);font-size:17px;margin-top:22px}
.legal p{margin:6px 0}
.legal-back{display:inline-block;color:var(--blau);text-decoration:none;margin-bottom:10px}
.legal-hint{background:#fffaf1;border:1px solid #f3c98b;border-radius:12px;padding:12px 14px;margin:12px 0}
.legal-src{color:var(--muted);font-size:12px;margin-top:24px}

/* ---------- Testphase-Banner ---------- */
.trialbar{max-width:760px;margin:10px auto 0;background:#fffaf1;border:1px solid #f3c98b;border-radius:12px;
          padding:10px 14px;font-size:14px;color:#6b5525;text-align:center}
.trialbar a{color:var(--blau);font-weight:600;text-decoration:none;margin-left:6px}

/* ---------- Freischalten-Seite ---------- */
.lp-single{grid-template-columns:1fr!important;max-width:480px}
.fs-steps{text-align:left;margin-top:16px;background:#f3f7fc;border-radius:12px;padding:14px}
.fs-steps ol{margin:8px 0 0;padding-left:20px}
.fs-steps li{margin:4px 0}
.fs-contact{font-size:13px;color:var(--muted);margin-top:10px}
.fs-links{text-align:center;margin-top:14px}
.fs-links a{color:var(--blau);text-decoration:none;font-size:14px}

/* ---------- Admin ---------- */
.admin{max-width:820px;margin:0 auto;padding:20px 16px 60px}
.admin-head{display:flex;align-items:baseline;justify-content:space-between}
.admin-head h1{color:var(--navy);margin:0}
.admin-msg{background:#e9f6ef;border:1px solid #9dd5b4;border-radius:10px;padding:10px 14px;margin:12px 0;color:#1f6b3f}
.admin-hint{color:var(--muted);font-size:13px;margin:6px 0 16px}
.admin-table{display:flex;flex-direction:column;gap:10px}
.ah-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.ah-name{font-weight:700;color:var(--navy)}
.ah-badge{font-size:12px;font-weight:600;border-radius:8px;padding:2px 8px;margin-left:6px}
.ah-badge.ok{background:#e9f6ef;color:#1f8f56}
.ah-badge.trial{background:#fff4e0;color:#b06a00}
.ah-badge.exp{background:#fbeceb;color:var(--danger)}
.ah-sub{color:var(--muted);font-size:12px;margin-top:3px}
.ah-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
.ah-actions .btn{min-height:38px;padding:8px 12px;font-size:14px}
.ah-date{display:flex;gap:6px;align-items:center}
.ah-date input{padding:8px;border:1px solid var(--line);border-radius:10px}

.login-ok{color:#1f8f56;background:#e9f6ef;border:1px solid #9dd5b4;border-radius:10px;padding:8px 10px;font-size:14px;margin:0 0 10px}

.btn-nobc{width:100%;margin-top:10px}
.pp-unitinput{width:100%;padding:8px;border:1px solid var(--line);border-radius:8px;margin-top:6px;font-size:14px}

.ah-del{background:#d23f3f;color:#fff}

/* ---------- Admin: Kostenübersicht ---------- */
.cost-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);margin-bottom:16px}
.cost-head{font-weight:700;color:var(--navy)}
.cost-head span{display:block;font-weight:400;color:var(--muted);font-size:12px;margin-top:2px}
.cost-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.cost-box{background:#f3f7fc;border-radius:10px;padding:10px 12px}
.cost-box .cl{font-size:12px;color:var(--muted)}
.cost-box .cb{font-size:19px;font-weight:800;color:var(--navy);margin-top:2px}
.cost-box .cb small{font-size:12px;font-weight:500;color:var(--muted)}
.cost-box .cs{font-size:11px;color:var(--muted);margin-top:3px}
.cost-top{margin-top:12px;font-size:13px;color:var(--text);display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.cost-top span{background:#eef2f7;border-radius:8px;padding:3px 8px;font-size:12px}
.cost-top span small{color:var(--muted)}
.cost-note{margin-top:10px;font-size:11px;color:var(--muted)}
@media(max-width:560px){.cost-grid{grid-template-columns:1fr}}

/* ---------- Kassenbon-Prüfliste ---------- */
.rc-hint{font-size:13px;color:var(--muted);margin:0 0 10px}
.rc-list{display:flex;flex-direction:column;gap:6px;max-height:52vh;overflow:auto}
.rc-row{display:grid;grid-template-columns:22px 1fr 60px 56px 30px;gap:6px;align-items:center}
.rc-row input[type=checkbox]{width:20px;height:20px;margin:0}
.rc-row input[type=text],.rc-row input[type=number]{padding:8px;border:1px solid var(--line);border-radius:8px;font-size:14px;margin:0;width:100%}
.rc-del{border:0;background:#fbeceb;color:var(--danger);border-radius:8px;width:30px;height:34px;cursor:pointer;font-size:18px}

/* ---------- Tabs bei vielen Reitern horizontal scrollen ---------- */
.tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{height:0}
.tab{flex:0 0 auto;padding:12px 14px;white-space:nowrap}

/* ---------- Bon-Prüfzeilen (2 Zeilen) ---------- */
.rc-row{display:block;grid-template-columns:none;border:1px solid var(--line);border-radius:10px;padding:8px}
.rc-l1{display:flex;align-items:center;gap:8px}
.rc-l1 .rc-chk{width:20px;height:20px;flex:none;margin:0}
.rc-l1 .rc-name{flex:1;padding:8px;border:1px solid var(--line);border-radius:8px;font-size:14px;margin:0}
.rc-l1 .rc-del{border:0;background:#fbeceb;color:var(--danger);border-radius:8px;width:30px;height:34px;cursor:pointer;font-size:18px;flex:none}
.rc-l2{display:grid;grid-template-columns:58px 52px 68px 1fr;gap:6px;margin-top:6px}
.rc-l2 input{padding:8px;border:1px solid var(--line);border-radius:8px;font-size:14px;margin:0;width:100%}

/* ---------- Ausgaben ---------- */
.exp-month{padding:10px;border:1px solid var(--line);border-radius:var(--radius);font-size:15px;width:100%;background:var(--card)}
.exp-total{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow);margin-bottom:12px;font-size:15px}
.exp-total b{font-size:20px;color:var(--navy)}
.exp-total small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.exp-row{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;box-shadow:var(--shadow)}
.exp-top{display:flex;justify-content:space-between;font-weight:600}
.exp-top b{color:var(--navy)}
.exp-bar{height:8px;background:#eef2f7;border-radius:6px;overflow:hidden;margin:6px 0 4px}
.exp-bar div{height:100%;background:linear-gradient(90deg,var(--g1),var(--g2))}
.exp-sub{font-size:12px;color:var(--muted)}

/* ---------- Spenden-Rabatt ---------- */
.donation-line{background:#eafaef;border:1px solid #b7e4c7;color:#1f7a44;border-radius:10px;padding:8px 12px;margin:10px 0;font-size:14px;text-align:center}
.code-form{display:flex;gap:8px;margin-top:10px}
.code-form input{flex:1;padding:11px;border:1px solid var(--line);border-radius:10px}
.code-form .btn{min-height:44px}