:root{
  --blau:#0a5db6; --blau-dunkel:#084a93; --gruen:#1f9d55; --gruen-dunkel:#17813f;
  --text:#1c2733; --grau:#6b7785; --linie:#dfe4ea; --hell:#f4f6f9; --gelb:#ffd84d; --rot:#c8372d;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--hell);line-height:1.45}
a{color:var(--blau)}

.kopf{background:#fff;border-bottom:1px solid var(--linie)}
.kopf-innen{max-width:1080px;margin:0 auto;padding:14px 20px;display:flex;justify-content:space-between;align-items:center}
.logo{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.logo span{color:var(--blau)}
.sicher{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--gruen-dunkel);font-weight:600}

.oben{position:sticky;top:0;z-index:20}
.live{background:#2b2f33;color:#fff;font-size:13px;font-weight:600;text-align:center;padding:7px 12px;display:flex;justify-content:center;align-items:center;gap:2px}
.punkt{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2ee66b;margin-left:8px;animation:puls 1.6s infinite}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.3}}
.timer{background:#16213a;color:#fff;text-align:center;font-weight:700;font-size:15px;padding:11px 12px}
.timer b{background:#2f3d5c;border-radius:5px;padding:3px 8px;margin-left:8px;font-variant-numeric:tabular-nums}
#kaufen{background:linear-gradient(#1a6fd1,var(--blau))!important;box-shadow:0 3px 0 var(--blau-dunkel)!important}
.schritte{background:#fff;border-bottom:1px solid var(--linie)}
.schritte-innen{max-width:760px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--grau)}
.schritt{display:flex;align-items:center;gap:8px;white-space:nowrap}
.schritt b{display:inline-flex;width:24px;height:24px;border-radius:50%;background:var(--linie);color:#fff;align-items:center;justify-content:center;font-size:12px}
.schritt.aktiv{color:var(--text);font-weight:600}
.schritt.aktiv b{background:var(--blau)}
.linie{flex:1;height:2px;background:var(--linie);min-width:14px}

.seite{max-width:1080px;margin:22px auto 40px;padding:0 20px;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start}
.karte{background:#fff;border:1px solid var(--linie);border-radius:10px;padding:20px;margin-bottom:16px}
.karte h2{margin:0 0 14px;font-size:18px;display:flex;align-items:center;gap:10px}
.nr{display:inline-flex;min-width:26px;height:26px;border-radius:50%;background:var(--blau);color:#fff;align-items:center;justify-content:center;font-size:14px}

.produkt-karte{display:flex;gap:18px;align-items:center}
.produkt-karte img{width:150px;border-radius:8px;border:1px solid var(--linie);flex:none}
.produkt-karte h1{font-size:21px;margin:0;line-height:1.2}
.zusatz{display:inline-block;margin:6px 0;background:var(--gelb);color:#4a3a00;font-weight:700;font-size:13px;padding:2px 10px;border-radius:999px}
.produkt-karte p{margin:6px 0;color:var(--grau);font-size:14px}
.haken{list-style:none;margin:8px 0 0;padding:0;font-size:14px}
.haken li{padding-left:24px;position:relative;margin:3px 0}
.haken li::before{content:"✓";position:absolute;left:0;color:var(--gruen);font-weight:800}

.bf{display:inline-block;background:#111;color:#ffd84d;font-weight:800;font-size:11px;letter-spacing:.06em;padding:3px 8px;border-radius:4px;vertical-align:middle;margin-left:6px}
.preis-alt{display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap}
.preis-alt s{color:var(--grau);font-size:12px}
.gratis{white-space:nowrap;color:var(--gruen-dunkel);font-weight:800}
.boni-zeile{font-size:13px;padding:7px 0}
.boni-zeile>span:first-child{color:#3a4654}
.boni-zeile .preis-alt{flex:none;margin-left:8px}

.feld{margin-bottom:14px}
.feld label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.feld label i{font-weight:400;color:var(--grau)}
.feld input{width:100%;padding:12px 13px;font-size:16px;border:1px solid #c5ccd6;border-radius:7px;background:#fff;color:var(--text)}
.feld input:focus{outline:2px solid var(--blau);outline-offset:0;border-color:var(--blau)}
.feld input.fehler{border-color:var(--rot);outline-color:var(--rot)}
.zeile2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.bumps-karte{border:0;background:transparent;padding:4px 0 0}
.bumps-karte h2 .nr{background:#e0a800}
.hinweis{margin:-6px 0 14px;color:var(--grau);font-size:14px}
.bump{display:flex;align-items:center;gap:12px;border:1px solid var(--linie);background:#fff;border-radius:9px;padding:10px 12px;margin-bottom:9px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.bump:hover{border-color:#e0a800}
.bump.an{border-color:var(--gruen);box-shadow:0 0 0 2px rgba(31,157,85,.18);background:#f4fbf7}
.bump input{width:22px;height:22px;flex:none;accent-color:var(--gruen)}
.bump img{width:58px;border-radius:5px;border:1px solid var(--linie);flex:none}
.bump-text{flex:1;display:flex;flex-direction:column;font-size:14px;min-width:0}
.bump-text strong{font-size:15px}
.bump-text span{color:var(--grau)}
.bump-text em{font-style:normal;color:var(--gruen-dunkel);font-weight:700;font-size:13px}
.bump-preis{font-weight:800;font-size:17px;white-space:nowrap}
.bump.combo{border:2px solid #e0a800;background:#fff8dc;padding:12px}
.bump.combo img{width:78px}
.bump.combo.an{border-color:var(--gruen);background:#effaf3}
.etikett{align-self:flex-start;background:var(--rot);color:#fff;font-size:11px;font-weight:800;padding:2px 8px;border-radius:4px;margin-bottom:3px;letter-spacing:.04em}
.bump.gesperrt{opacity:.45;pointer-events:none}
.oder{text-align:center;color:var(--grau);font-size:13px;margin:14px 0 10px}

/* Order Bumps im Stil der Referenz */
.ob{border:1.5px dashed #e6c94a;border-radius:12px;background:#fff;margin-bottom:12px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.ob-titel{color:#a8861a;font-weight:800;font-size:15.5px;line-height:1.35;padding:14px 16px 8px}
.ob-inhalt{display:flex;gap:12px;align-items:flex-start;padding:0 16px}
.ob-inhalt img{width:58px;flex:none;border-radius:6px;border:1px solid var(--linie)}
.ob-inhalt p{margin:0;font-size:14.5px;line-height:1.5;color:#3a4654}
.ob-preise{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 14px}
.ob-preise b{color:var(--gruen-dunkel);font-size:17px}
.ob-preise s{color:var(--grau);font-size:13px;margin-left:4px}
.ob-rabatt{background:var(--gruen);color:#fff;font-weight:800;font-size:12px;padding:3px 10px;border-radius:999px}
.ob-fuss{display:flex;align-items:center;gap:10px;background:#fff8dc;border-top:1.5px dashed #e6c94a;padding:13px 16px;font-weight:600;font-size:14.5px;cursor:pointer}
.ob-fuss input{width:20px;height:20px;accent-color:var(--gruen);flex:none}
.ob.an{border-style:solid;border-color:var(--gruen);box-shadow:0 0 0 2px rgba(31,157,85,.15)}
.ob.an .ob-fuss{background:#e9f7ef;border-top-color:var(--gruen);color:var(--gruen-dunkel)}
.ob.gesperrt{opacity:.45;pointer-events:none}
.ob-combo{border-width:2px;border-color:#e0a800}
.ob-combo .ob-titel{color:var(--rot)}
.ob-combo .ob-fuss{font-size:15.5px}
@media (max-width:560px){
  .bump{display:grid;grid-template-columns:24px 56px 1fr;grid-template-areas:"c i t" "c i p" "d d d";gap:2px 12px;align-items:center;padding:12px}
  .bump input{grid-area:c;align-self:center}
  .bump img,.bump.combo img{grid-area:i;width:56px;align-self:center}
  .bump-text{display:contents}
  .bump-text strong{grid-area:t;align-self:end;font-size:15px;line-height:1.25}
  .bump-preis{grid-area:p;align-self:start;font-size:16px;color:var(--gruen-dunkel)}
  .bump-text>span{grid-area:d;font-size:13px;margin-top:8px;line-height:1.4}
  .bump.combo{grid-template-areas:"e e e" "c i t" "c i p" "d d d" "s s s"}
  .bump-text .etikett{grid-area:e;justify-self:start;margin-bottom:8px}
  .bump-text em{grid-area:s;margin-top:6px}
}
.einzeln{margin-top:4px}
.einzeln summary{cursor:pointer;color:var(--blau);font-weight:600;font-size:14px;padding:8px 2px;list-style:none}
.einzeln summary::-webkit-details-marker{display:none}
.einzeln summary::before{content:"▸ "}
.einzeln[open] summary::before{content:"▾ "}
.einzeln #bumpListe{margin-top:8px}

#payment-element{min-height:60px}
.demo{border:1px dashed #9aa6b5;border-radius:8px;padding:14px;color:var(--grau);font-size:14px;background:#fafbfc}
.demo-felder{margin-top:10px;display:grid;gap:8px}
.demo-felder>div{border:1px solid var(--linie);background:#fff;border-radius:6px;padding:11px;color:#9aa6b5}
.demo-felder .halb{display:grid;grid-template-columns:1fr 1fr;gap:8px;border:0;padding:0}
.demo-felder .halb div{border:1px solid var(--linie);background:#fff;border-radius:6px;padding:11px}
.meldung{margin-top:12px;background:#fdecea;color:#8a1c14;border:1px solid #f3b9b4;border-radius:7px;padding:10px 12px;font-size:14px}

.rechtlich{background:#fff}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#3a4654;margin-bottom:12px;cursor:pointer}
.check input{width:20px;height:20px;margin-top:1px;flex:none;accent-color:var(--blau)}
.check.fehler span{color:var(--rot)}
.kaufen{width:100%;border:0;border-radius:9px;background:linear-gradient(#26b565,var(--gruen));color:#fff;padding:15px 18px;font-size:19px;font-weight:800;cursor:pointer;box-shadow:0 3px 0 var(--gruen-dunkel);display:flex;flex-direction:column;align-items:center;gap:2px}
.kaufen small{font-weight:600;font-size:14px;opacity:.95}
.kaufen:hover{filter:brightness(1.05)}
.kaufen:disabled{opacity:.6;cursor:wait}
.mini{text-align:center;color:var(--grau);font-size:12px;margin:10px 0 0}

.uebersicht h2{font-size:17px}
.posten-zeile{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--linie);font-size:14px}
.posten-zeile span:first-child{flex:1}
.summe-zeile{display:flex;justify-content:space-between;padding-top:12px;font-size:17px}
.gesamt b{font-size:24px;color:var(--rot)}
.gesamt-preis{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.gesamt-preis s{color:var(--grau);font-size:15px}
.mwst{color:var(--grau);font-size:12px;text-align:right}

.garantie{display:flex;gap:14px;align-items:center;background:#f4fbf7;border-color:#bfe3cd}
.garantie p{margin:4px 0 0;font-size:13px;color:#3a4654}
.siegel{width:68px;height:68px;border-radius:50%;background:var(--gruen);color:#fff;font-weight:900;font-size:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;flex:none;border:3px double #fff;box-shadow:0 0 0 2px var(--gruen)}
.siegel small{font-size:11px;font-weight:700}
.vertrauen div{padding:7px 0;font-size:14px;border-bottom:1px solid var(--hell)}
.vertrauen div:last-child{border:0}
.vertrauen b{display:inline-block;width:26px}

.fuss{text-align:center;color:var(--grau);font-size:13px;padding:10px 20px 40px}
.fuss a{color:var(--grau)}

@media (max-width:900px){
  .seite{grid-template-columns:minmax(0,1fr)}
  .spalte-links,.spalte-rechts{min-width:0}
  html,body{overflow-x:clip}
  .spalte-rechts{order:-1}
  .garantie,.vertrauen{display:none}
  .spalte-rechts .uebersicht{margin-bottom:0}
}
@media (max-width:560px){
  .produkt-karte{flex-direction:column;text-align:center}
  .produkt-karte img{width:170px}
  .haken{text-align:left;display:inline-block}
  .schritt:last-child{display:none}
  .zeile2{grid-template-columns:1fr}
  .bump img{width:46px}
  .bump.combo img{width:60px}
  .bump-preis{font-size:15px}
}