@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap');
/* =====================================================================
   Frontend Theme – zentrales Design-System (Dawn-inspiriert)
   Akzent: #68a83c (passend zum Backend). Dezent, hochwertig, viel Weißraum.
   ===================================================================== */

:root{
  --accent:#68a83c; --accent-dark:#558931; --accent-darker:#467228;
  --accent-light:#e8f1e1; --accent-tint:#f2f8ef; --accent-ink:#ffffff;

  --ink:#1c2128; --ink-soft:#444b56; --muted:#737b87; --line:#e7e9ed;
  --bg:#ffffff; --soft:#f7f8f6; --card:#ffffff;

  --ok:#16a34a; --warn:#d97706; --err:#dc2626;
  --radius:12px; --radius-sm:9px; --radius-lg:18px; --maxw:1200px;
  --shadow:0 1px 2px rgba(20,24,32,.04),0 8px 30px rgba(20,24,32,.07);
  --shadow-sm:0 1px 3px rgba(20,24,32,.06);
  --forest:#1e3a2b; --forest-fg:#eaf2e6; --forest-link:#a9c6a0; --forest-muted:#8fae87;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; color:var(--ink); background:var(--bg); line-height:1.55;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
h1,h2,h3{letter-spacing:-.02em; line-height:1.15;}

/* ---------- Überschriften im Marken-Look (handschriftlich, grün) ---------- */
main h1, .hero h1, .section h2, .usp-head, .pdetail h1, .ptitle, .heading-script{
  font-family:'Caveat',cursive; color:var(--accent-dark); font-weight:700;
  letter-spacing:.01em; line-height:1.05;
}
main h1{ font-size:2.6rem; }

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px;}

/* ---------- Header ---------- */
header.site{
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.88); backdrop-filter:saturate(150%) blur(10px);
}
.hbar{display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px;}
.brand{font-size:1.32rem; font-weight:750; letter-spacing:-.02em; display:flex; align-items:center; gap:9px; color:var(--ink);}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-light);}
.brand img{max-height:42px;}
nav.main{display:flex; gap:28px;}
nav.main a{font-size:.96rem; font-weight:500; color:var(--ink-soft); padding:8px 0; border-bottom:2px solid transparent; transition:color .15s,border-color .15s;}
nav.main a:hover{color:var(--accent-dark); border-bottom-color:var(--accent);}
.cart-link{position:relative; font-weight:600; color:var(--ink);}
.cart-link:hover{color:var(--accent-dark);}
.cart-badge{
  position:absolute; top:-9px; right:-13px; background:var(--accent); color:#fff;
  font-size:.7rem; font-weight:700; min-width:19px; height:19px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; padding:0 5px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent); color:var(--accent-ink); padding:13px 28px; border-radius:var(--radius-sm);
  border:1px solid var(--accent); font-size:1rem; font-weight:650; cursor:pointer;
  transition:background .15s,border-color .15s,transform .05s; line-height:1.1;
}
.btn:hover{background:var(--accent-dark); border-color:var(--accent-dark); text-decoration:none; color:#fff;}
.btn:active{transform:translateY(1px);}
.btn-outline{background:transparent; color:var(--ink); border:1px solid var(--line);}
.btn-outline:hover{background:var(--soft); border-color:var(--ink-soft); color:var(--ink);}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(180deg,var(--accent-tint),var(--bg)); border-bottom:1px solid var(--line);}
.hero-inner{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:72px 22px;}
.hero h1{font-size:3.4rem; margin:0 0 18px;}
.hero p{font-size:1.18rem; color:var(--ink-soft); margin:0 0 30px; max-width:480px;}
.hero-media{background:#e9ece6; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; color:#aab;}
.hero-media img{width:100%; height:auto; display:block;}
.hero-media span{padding:90px 20px; font-size:.9rem;}
/* Bild-only-Hero (kein Text): Kasten an die echte Bildhöhe, kein erzwungenes 4:3 */
.hero-imageonly .hero-inner{ grid-template-columns:1fr; padding:0; }
.hero-imageonly .hero-media{ aspect-ratio:auto; background:transparent; box-shadow:none; }
.hero-imageonly .hero-media img{ height:auto; display:block; }

/* ---------- Product grid + cards ---------- */
.section{padding:64px 22px;}
.section h2{font-size:2.3rem; margin:0 0 30px; font-weight:700; display:flex; align-items:center; gap:11px;}
.section h2::before{content:""; width:24px; height:26px; flex-shrink:0; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2226%22%20viewBox%3D%220%200%2024%2026%22%3E%3Cpath%20fill%3D%22%23467228%22%20d%3D%22M12%201.5c-3.6%200-6.5%202.7-6.5%206%200%201%20.26%201.95.72%202.78C4.5%2011%203.6%2012.4%203.6%2014c0%202.5%202.1%204.5%204.7%204.5.5%200%201-.08%201.45-.23V21H7.5c-.5%200-.9.4-.9.9s.4.9.9.9h9c.5%200%20.9-.4.9-.9s-.4-.9-.9-.9h-2.25v-2.73c.46.15.95.23%201.45.23%202.6%200%204.7-2%204.7-4.5%200-1.6-.9-3-2.62-3.72.46-.83.72-1.78.72-2.78%200-3.3-2.9-6-6.5-6Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
.pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:26px;}
.pcard{
  display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:box-shadow .18s,transform .18s,border-color .18s;
}
.pcard:hover{box-shadow:var(--shadow); transform:translateY(-3px); border-color:var(--accent-light);}
.pcard .ph{aspect-ratio:1; background:var(--soft); display:flex; align-items:center; justify-content:center; color:#c2c7cf; overflow:hidden;}
.pcard .ph img{width:100%; height:100%; object-fit:cover; transition:transform .3s;}
.pcard:hover .ph img{transform:scale(1.04);}
.pcard .body{padding:17px 18px;}
.pcard .name{font-weight:620; margin-bottom:7px; color:var(--ink);}
.pcard .price{font-size:1.2rem; font-weight:730;}
.pcard .meta{font-size:.8rem; color:var(--muted); margin-top:3px;}
.stock{font-size:.8rem; margin-top:9px; display:flex; align-items:flex-start; gap:6px; line-height:1.3;}
.stock .d{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;margin-top:.28em;}

/* ---------- Product detail ---------- */
.pdetail{display:grid; grid-template-columns:1fr 1fr; gap:52px; padding:44px 22px;}
.gallery .main{aspect-ratio:1; background:var(--soft); border-radius:var(--radius); overflow:hidden; display:flex; align-items:center; justify-content:center; color:#c2c7cf;}
.gallery .thumbs{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap;}
.gallery .thumbs img{width:74px; height:74px; object-fit:cover; border-radius:9px; cursor:pointer; border:1px solid var(--line); transition:border-color .15s;}
.gallery .thumbs img:hover{border-color:var(--accent);}
/* Mobile Swipe-Galerie – am Desktop ausgeblendet */
.gallery-swipe{ display:none; }
.gswipe-dots{ display:none; }
.pdetail h1{font-size:2.6rem; margin:0 0 10px;}
.price-row{display:flex; align-items:baseline; gap:11px; margin:18px 0;}
.price-row .big{font-size:1.85rem; font-weight:760;}
.opt{display:flex; align-items:center; gap:11px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:9px; cursor:pointer; transition:border-color .15s,background .15s;}
.opt:hover{border-color:var(--accent); background:var(--accent-tint);}

/* ---------- Tables (cart) ---------- */
.ctable{width:100%; border-collapse:collapse;}
.ctable th{text-align:left; padding:14px 10px; border-bottom:2px solid var(--line); font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:600;}
.ctable td{padding:16px 10px; border-bottom:1px solid var(--line); vertical-align:middle;}

/* ---------- Inputs ---------- */
input[type=text],input[type=email],input[type=password],input[type=number],input:not([type]),select,textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-size:1rem; font-family:inherit; color:var(--ink); background:#fff; transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(104,168,60,.15);}

/* ---------- Summary box ---------- */
.summary{background:var(--soft); border:1px solid var(--line); border-radius:var(--radius); padding:22px;}
.summary .row{display:flex; justify-content:space-between; padding:7px 0; color:var(--ink-soft); font-size:.96rem;}
.summary .total{display:flex; justify-content:space-between; padding:14px 0 4px; border-top:2px solid var(--line); margin-top:8px; font-size:1.25rem; font-weight:740; color:var(--ink);}

/* ---------- Cards / panels ---------- */
.panel{border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:#fff;}
.notice{padding:13px 16px; border-radius:var(--radius-sm); margin-bottom:16px; font-size:.95rem;}
.notice.ok{background:var(--accent-tint); color:var(--accent-darker); border:1px solid var(--accent-light);}
.notice.err{background:#fef2f2; color:#991b1b; border:1px solid #f3c4c4;}

/* ---------- Footer ---------- */
footer.site{
  position:relative; margin-top:110px; background:var(--forest);
  color:var(--forest-fg);
}
/* Gras waechst oben aus dem Footer heraus */
footer.site::before{
  content:""; position:absolute; left:0; right:0; top:-58px; height:60px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22280%22%20height%3D%2280%22%20viewBox%3D%220%200%20280%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C80%20L0%2C74%20L280%2C74%20L280%2C80%20Z%20M-3.0%2C80%20Q1.9%2C55.7%20-3.0%2C35.8%20Q6.1%2C55.7%2011.0%2C80%20Z%20M10.4%2C80%20Q14.0%2C50.5%2012.9%2C26.4%20Q17.1%2C50.5%2020.8%2C80%20Z%20M25.4%2C80%20Q29.1%2C62.6%2029.3%2C48.4%20Q32.2%2C62.6%2035.8%2C80%20Z%20M37.0%2C80%20Q40.8%2C53.2%2048.9%2C31.3%20Q44.0%2C53.2%2047.7%2C80%20Z%20M48.4%2C80%20Q53.1%2C48.3%2064.1%2C22.4%20Q57.2%2C48.3%2061.9%2C80%20Z%20M61.7%2C80%20Q67.1%2C39.9%2060.3%2C7.0%20Q71.6%2C39.9%2076.9%2C80%20Z%20M76.7%2C80%20Q80.9%2C60.0%2075.0%2C43.7%20Q84.4%2C60.0%2088.6%2C80%20Z%20M93.3%2C80%20Q98.1%2C59.1%20101.8%2C42.0%20Q102.2%2C59.1%20107.1%2C80%20Z%20M109.0%2C80%20Q112.6%2C50.2%20105.4%2C25.9%20Q115.7%2C50.2%20119.3%2C80%20Z%20M120.9%2C80%20Q125.0%2C47.0%20125.3%2C20.1%20Q128.6%2C47.0%20132.7%2C80%20Z%20M135.1%2C80%20Q140.3%2C52.5%20138.5%2C30.1%20Q144.7%2C52.5%20149.9%2C80%20Z%20M152.5%2C80%20Q157.1%2C57.6%20160.6%2C39.3%20Q161.0%2C57.6%20165.6%2C80%20Z%20M169.1%2C80%20Q174.7%2C45.8%20172.8%2C17.9%20Q179.5%2C45.8%20185.0%2C80%20Z%20M183.6%2C80%20Q187.4%2C53.4%20194.2%2C31.6%20Q190.7%2C53.4%20194.5%2C80%20Z%20M196.6%2C80%20Q201.7%2C62.6%20207.3%2C48.3%20Q206.1%2C62.6%20211.2%2C80%20Z%20M212.4%2C80%20Q217.4%2C42.3%20215.8%2C11.5%20Q221.6%2C42.3%20226.6%2C80%20Z%20M227.7%2C80%20Q233.0%2C49.5%20234.4%2C24.5%20Q237.5%2C49.5%20242.8%2C80%20Z%20M248.6%2C80%20Q252.3%2C52.0%20257.1%2C29.1%20Q255.4%2C52.0%20259.0%2C80%20Z%20M263.0%2C80%20Q268.2%2C47.8%20280.3%2C21.5%20Q272.7%2C47.8%20277.9%2C80%20Z%22%20fill%3D%22%231e3a2b%22/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-size:280px 60px; background-position:bottom center;
  pointer-events:none;
}
.fcols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; padding:40px 0 46px;}
footer.site h4{margin:0 0 15px; font-size:.98rem; font-weight:650; color:#fff; letter-spacing:.01em;}
footer.site a{display:block; color:var(--forest-link); font-size:.92rem; padding:5px 0; transition:color .15s;}
footer.site a:hover{color:var(--accent); }
footer.site .fcols p{color:var(--forest-muted) !important;}
.copy{border-top:1px solid rgba(255,255,255,.12); padding:20px 0; color:var(--forest-muted); font-size:.85rem; text-align:center;}

.muted{color:var(--muted);}

/* ---------- Mobile-Navigation (Burger + Off-Canvas) ---------- */
.nav-burger{display:none; flex-direction:column; gap:4px; width:42px; height:42px; border:1px solid var(--line); border-radius:9px; background:#fff; cursor:pointer; align-items:center; justify-content:center; flex-shrink:0;}
.nav-burger span{display:block; width:19px; height:2px; background:var(--ink); border-radius:2px;}
.cart-ico{display:none; width:24px; height:24px;}
.nav-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:60;}
.mobile-nav{display:none; position:fixed; top:0; left:0; bottom:0; width:82%; max-width:320px; background:#fff; z-index:70; transform:translateX(-100%); transition:transform .25s ease; overflow-y:auto; box-shadow:0 0 40px rgba(0,0,0,.15);}
.mobile-nav .mnav-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); font-weight:750; font-size:1.1rem;}
.mobile-nav .mnav-head button{border:0; background:none; font-size:1.8rem; line-height:1; color:var(--muted); cursor:pointer; padding:0 4px;}
.mobile-nav a{display:block; padding:14px 20px; color:var(--ink); font-weight:500; font-size:1.02rem; border-bottom:1px solid var(--line-soft, #f1f3f5);}
.mobile-nav a:hover{background:var(--soft);}
.mobile-nav .mnav-sep{height:8px; background:var(--soft);}
body.nav-open .mobile-nav{transform:translateX(0);}
body.nav-open .nav-overlay{display:block;}

/* ---------- Produkt-Kaufbereich: als Einheit erkennbar ---------- */
.buybox h1{ margin:0 0 4px; }
/* Produkttitel in handschriftlichem Grün (nach Vorbild) */
.ptitle{ font-family:'Caveat',cursive; font-weight:700; color:var(--accent-dark); font-size:2.6rem; line-height:1.05; letter-spacing:.01em; margin:0 0 6px; }
.pshort{ color:var(--ink-soft); font-size:1.02rem; line-height:1.5; margin:0 0 16px; }
/* Sterne-Bewertung */
.prating{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:0 0 14px; }
.prating-top{ justify-content:flex-end; margin:0 0 10px; }
.prating .stars{ display:inline-flex; gap:1px; font-size:1.15rem; line-height:1; }
.prating .star.on{ color:#f5a623; }
.prating .star.off{ color:#d9dee0; }
.prating .star.half{ position:relative; color:#d9dee0; }
.prating .star.half::before{ content:'★'; position:absolute; left:0; top:0; width:50%; overflow:hidden; color:#f5a623; }
.prating .rval{ font-weight:700; color:var(--ink); }
.prating .rcount{ color:var(--ink-soft); text-decoration:underline; font-size:.92rem; }
/* Preis */
.price-row{ display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; margin:14px 0 2px; }
.price-old{ color:var(--muted); text-decoration:line-through; font-size:1.15rem; font-weight:500; }
.price-row .big{ font-size:2.1rem; font-weight:780; }
.price-sale{ color:var(--accent-dark); }
.price-badge{ background:var(--accent); color:#fff; font-size:.82rem; font-weight:700; padding:2px 9px; border-radius:5px; }
.price-tax{ font-size:.92rem; margin-top:2px; }
.price-tax a{ color:var(--accent-dark); text-decoration:underline; }
/* Vorteile mit Blatt-Symbol */
.usp{ list-style:none; padding:0; margin:18px 0; display:flex; flex-direction:column; gap:13px; }
.usp li{ display:flex; align-items:flex-start; gap:11px; font-size:1.02rem; line-height:1.4; }
.usp-leaf{ width:24px; height:24px; flex-shrink:0; color:var(--accent); margin-top:1px; }
/* Lieferzeit mit LKW */
.delivery{ display:flex; align-items:flex-start; gap:9px; color:var(--ink-soft); font-size:.92rem; margin-top:8px; }
.delivery-ico{ width:22px; height:22px; flex-shrink:0; color:var(--ink-soft); margin-top:1px; }
/* Naturprodukt-Hinweis (dezent, mit Blatt) */
.nature-note{ display:flex; align-items:flex-start; gap:9px; background:var(--accent-tint); border-radius:var(--radius-sm);
  padding:11px 13px; margin:16px 0; color:var(--ink-soft); font-size:.88rem; line-height:1.45; font-style:italic; }
.nature-note svg{ width:20px; height:20px; flex-shrink:0; color:var(--accent); margin-top:1px; }

/* Bewertungen: aufklappbare Statistik + Sterne-Abgabe */
.reviews-box{ border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; overflow:hidden; }
.reviews-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:none; border:0; padding:16px 18px; cursor:pointer; font:inherit; text-align:left; }
.reviews-summary{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.reviews-summary .stars{ color:#e0a93b; font-size:1.05rem; letter-spacing:1px; }
.reviews-summary .star.off{ color:#d9dee5; }
.reviews-summary .star.half{ background:linear-gradient(90deg,#e0a93b 50%,#d9dee5 50%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.reviews-summary strong{ font-size:1.05rem; }
.reviews-chev{ color:var(--muted); transition:transform .18s; flex-shrink:0; }
.reviews-box.open .reviews-chev{ transform:rotate(180deg); }
.reviews-panel{ padding:4px 18px 20px; border-top:1px solid var(--line); }
.reviews-bars{ margin:16px 0 20px; display:flex; flex-direction:column; gap:7px; }
.rbar-row{ display:flex; align-items:center; gap:10px; font-size:.9rem; }
.rbar-label{ width:30px; color:var(--ink-soft); flex-shrink:0; }
.rbar-track{ flex:1; height:9px; background:#eef1ee; border-radius:99px; overflow:hidden; }
.rbar-fill{ display:block; height:100%; background:var(--accent); border-radius:99px; }
.rbar-count{ width:36px; text-align:right; color:var(--muted); flex-shrink:0; }
.rate-give{ border-top:1px dashed var(--line); padding-top:16px; }
.rate-give-label{ margin:0 0 8px; font-weight:600; }
.rate-stars{ display:inline-flex; gap:4px; }
.rate-star{ background:none; border:0; cursor:pointer; font-size:2rem; line-height:1; color:#d9dee5; padding:0 2px; transition:color .1s, transform .1s; }
.rate-star:hover, .rate-star.hot{ color:#e0a93b; transform:scale(1.08); }
.rate-hint{ display:block; color:var(--muted); font-size:.82rem; margin-top:4px; }
.rate-thanks{ margin:0; color:var(--accent-darker); }
/* gestrichelte Trennlinie */
.buy-sep{ border-top:2px dashed var(--line); margin:22px 0; }
/* Mengen-Stepper + Button */
.qty-row{ display:flex; align-items:stretch; gap:12px; margin-bottom:8px; }
.qty-stepper{ display:flex; align-items:stretch; border:1px solid var(--line); border-radius:10px; overflow:hidden; flex-shrink:0; }
.qty-stepper input{ width:54px; border:0 !important; text-align:center; font-size:1.1rem; font-weight:600; -moz-appearance:textfield; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty-btns{ display:flex; flex-direction:column; border-left:1px solid var(--line); }
.qty-btns button{ flex:1; width:38px; border:0; background:var(--accent); color:#fff; font-size:1.1rem; font-weight:700; cursor:pointer; line-height:1; }
.qty-btns button:active{ background:var(--accent-dark); }
.qty-down{ border-top:1px solid rgba(255,255,255,.3); }
.qty-submit{ flex:1; }
.pdesc{ color:var(--ink-soft); }
/* Spenden-Hinweis (Baum) */
.donation{ display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px 14px;
  background:var(--accent-tint); border:1px solid var(--accent-light); border-radius:10px;
  color:var(--accent-darker); font-size:.92rem; line-height:1.4; }
.donation svg{ width:26px; height:26px; flex-shrink:0; color:var(--accent-dark); }
/* Inhalt der Text-Akkordeons (Widerruf, Lieben) */
.acc-text{ color:var(--ink-soft); line-height:1.6; }

/* Info-Modal (iframe) */
.info-modal{ display:none; position:fixed; inset:0; z-index:80; }
.info-modal.open{ display:block; }
.info-overlay{ position:absolute; inset:0; background:rgba(20,24,32,.55); }
.info-box{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(640px,92vw); height:min(80vh,720px); background:#fff; border-radius:16px;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.info-head{ display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--line); font-weight:700; font-size:1.05rem; flex-shrink:0; }
.info-head button{ border:0; background:none; font-size:1.7rem; line-height:1; color:var(--muted); cursor:pointer; padding:0 4px; }
.info-box iframe{ flex:1; width:100%; border:0; }
/* Sticky Warenkorb-Leiste (nur mobil sichtbar) */
.buybar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:55;
  background:#fff; border-top:1px solid var(--line); box-shadow:0 -4px 16px rgba(0,0,0,.08);
  padding:10px 16px; align-items:center; justify-content:space-between; gap:14px;
  transform:translateY(100%); transition:transform .22s ease; }
.buybar.show{ transform:translateY(0); }
.buybar-price{ font-weight:760; font-size:1.2rem; white-space:nowrap; }
.buybar-btn{ flex:1; max-width:62%; padding:13px; font-size:1rem; border-radius:11px; }

/* ---------- Vorteile / Warum-wir ---------- */
.usp-section{ background:var(--soft); padding:64px 0; border-top:1px solid var(--line); }
.usp-head{ text-align:center; font-size:2.4rem; font-weight:700; margin:0 0 40px; }
.usp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.usp-card{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.usp-circle{
  width:84px; height:84px; border-radius:50%; background:var(--forest);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  box-shadow:0 6px 18px rgba(30,58,43,.18); position:relative;
}
.usp-circle::after{
  content:""; position:absolute; top:-4px; right:-2px; width:20px; height:20px;
  background:var(--accent); border-radius:0 50% 50% 50%; transform:rotate(20deg);
  box-shadow:0 2px 6px rgba(30,58,43,.25);
}
.usp-circle svg{ width:38px; height:38px; color:#fff; position:relative; z-index:1; }
.usp-card h3{ font-size:1.12rem; font-weight:700; margin:0 0 10px; letter-spacing:.01em; }
.usp-card p{ color:var(--ink-soft); font-size:.96rem; line-height:1.55; margin:0; max-width:260px; }

@media(max-width:860px){
  /* Kaufbereich als abgegrenzte Karte mit klaren Untersektionen */
  .buybox{
    border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:20px 18px; background:#fff; box-shadow:var(--shadow-sm);
    margin-bottom:28px;
  }
  .buybox h1{ font-size:2.1rem; }
  /* Preis rechtsbündig, "inkl. MwSt." in eigener Zeile darunter */
  /* Preis + MwSt als kompakte Einheit rechtsbündig, ohne Lücke dazwischen */
  .buybox .price-row{ flex-wrap:wrap; justify-content:flex-end; text-align:right; margin:8px 0 0; }
  .buybox .price-row .big{ font-size:2.1rem; }
  .buybox .price-tax{ text-align:right; margin:0 0 4px; }
  /* Staffelpreis-Tabelle über volle Breite */
  .buybox table{ display:table !important; width:100% !important; table-layout:auto; }
  .buybox > div[style*="margin:18px 0"] table{ width:100% !important; }
  /* Staffel-Block + Options-Block durch Trennlinie absetzen */
  .buybox > div[style*="margin:18px 0"]{ padding-bottom:16px; border-bottom:1px solid #eef0ed; margin:0 0 16px !important; }
  .buybox form > div[style*="margin-bottom:20px"]{ padding-bottom:16px; border-bottom:1px solid #eef0ed; margin-bottom:16px !important; }
  /* "In den Warenkorb" klar als Abschluss */
  .buybox .btn{ margin-top:4px; padding:15px; border-radius:12px; }
  .buybar{ display:flex; }
  /* Beschreibung + GPSR als eigene Bloecke UNTER der Kaufkarte */
  .pinfo{ margin-top:8px; }
  .pdesc{ margin-top:24px !important; }
  .pinfo .gpsr{ margin-top:24px; }
}

@media(max-width:860px){
  html, body{ overflow-x:hidden; }
  .wrap{ padding:0 16px; }

  /* Header kompakt: Burger links, Logo mittig-links, Warenkorb als Icon rechts */
  .hbar{ height:60px; gap:12px; }
  .nav-burger{ display:flex; }
  .mobile-nav{ display:block; }     /* sichtbar/positioniert; transform steuert offen/zu */
  nav.main{ display:none; }
  .brand{ font-size:1.12rem; flex:1; }
  .brand img{ max-height:34px; }
  .hactions{ gap:14px; }
  .haccount{ display:none; }            /* "Anmelden" steckt im Burger-Menü */
  .cart-text{ display:none; }            /* Warenkorb als Icon */
  .cart-ico{ display:block; }
  .cart-badge{ top:-7px; right:-9px; }

  /* Hero einspaltig */
  .hero-inner{ grid-template-columns:1fr; gap:22px; padding:20px 16px 26px; }
  .hero h1{ font-size:2.6rem; }
  .hero p{ font-size:1.05rem; }
  /* Hero nur mit Bild (kein Text): minimaler Abstand oben/unten */
  .hero-imageonly .hero-inner{ padding:14px 16px 18px; }
  /* Bild-only-Hero: Kasten nimmt die echte Bildhöhe an (kein erzwungenes 4:3, kein weißer Rand) */
  .hero-imageonly .hero-media{ aspect-ratio:auto; background:transparent; box-shadow:none; }
  .hero-imageonly .hero-media img{ height:auto; }

  /* Produktliste: flexible Spalten, kleinere Mindestbreite */
  .pgrid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; }

  /* Produktdetail einspaltig */
  .pdetail{ grid-template-columns:1fr; gap:28px; padding:28px 16px; }
  .gallery .thumbs img{ width:60px; height:60px; }
  /* Mobile: Desktop-Galerie aus, wischbarer Bildstreifen an */
  .gallery .main, .gallery .thumbs{ display:none; }
  .gallery-swipe{
    display:flex; gap:0; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; border-radius:var(--radius);
    background:var(--soft);
  }
  .gallery-swipe::-webkit-scrollbar{ display:none; }
  .gswipe-slide{ flex:0 0 100%; scroll-snap-align:center; aspect-ratio:1; }
  .gswipe-slide img{ width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
  .gswipe-dots{ display:flex; justify-content:center; gap:7px; margin-top:12px; }
  .gdot{ width:7px; height:7px; border-radius:50%; background:var(--line); transition:background .2s, transform .2s; }
  .gdot.active{ background:var(--accent); transform:scale(1.25); }

  /* Footer einspaltig */
  /* Vorteile mobil untereinander */
  .usp-section{ padding:60px 0; margin-top:10px; }
  .usp-head{ font-size:2rem; margin-bottom:32px; }
  .usp-grid{ grid-template-columns:1fr; gap:34px; }
  /* mehr Weißraum um den Produktbereich (oben zum Hero, unten zur Vorteile-Sektion) */
  .section{ padding:72px 16px 72px; }

  /* Footer mobil: strukturiert mit Trennlinien + tappbare Links */
  footer.site{ margin-top:90px; }
  .fcols{ grid-template-columns:1fr; gap:0; padding:8px 0 16px; }
  .fcols > div{ padding:22px 0; border-bottom:1px solid rgba(255,255,255,.12); }
  .fcols > div:first-child{ padding-top:28px; }
  .fcols > div:last-child{ border-bottom:0; }
  footer.site h4{ font-size:1rem; margin:0 0 12px; }
  footer.site .fcols > div:first-child h4{ font-size:1.15rem; }
  footer.site a{ font-size:1rem; padding:11px 0; }
  footer.site .fcols > div:first-child p{ max-width:none; font-size:.95rem; line-height:1.6; }
  .copy{ padding:22px 16px; font-size:.85rem; }

  /* Eingabefelder: 16px gegen iOS-Zoom */
  input, select, textarea{ font-size:16px; }

  /* ALLE inline-/Klassen-Grids auf eine Spalte + schrumpfbar */
  [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  [style*="grid-template-columns"] > *{ min-width:0; }
  select, input, textarea{ max-width:100%; }

  /* Warenkorb-Tabelle mobil als gestapelte Karten (statt 5 Spalten quetschen) */
  .ctable thead{ display:none; }
  .ctable, .ctable tbody, .ctable tr, .ctable td{ display:block; width:100%; }
  .ctable tr{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:14px; position:relative; }
  .ctable td{ border:0 !important; padding:5px 0; }
  .ctable td[data-label]::before{ content:attr(data-label) ": "; font-weight:600; color:var(--muted); }
  .ctable td:last-child{ position:absolute; top:12px; right:14px; padding:0; }

  /* Sonstige Tabellen (z. B. Konto) scrollbar */
  table:not(.ctable):not(.buybox-table){ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
}

/* Sehr schmal */
@media(max-width:420px){
  .wrap{ padding:0 13px; }
  .hero h1{ font-size:2.2rem; }
  .pgrid{ grid-template-columns:1fr 1fr; gap:12px; }
}