/* ============================================================
   magnetbude – style.css (v19.0.1)
   ============================================================ */
:root{
  --bg:#ffffff;
  --text:#0a2540;
  --muted:#5b6b7a;
  --accent:#2dd4bf;
  --card:#f6f8fb;
  --border:#e5e9f0;
  --shadow:0 10px 30px rgba(10,37,64,.08);
  --radius:16px;
  --container:1100px;

  --logo-size: 72px;
  --logo-size-footer: 64px;
}
@media (min-width:1200px){
  :root{ --logo-size:88px; --logo-size-footer:72px; }
}
@media (max-width:920px){
  :root{ --logo-size:64px; --logo-size-footer:58px; }
}
@media (max-width:520px){
  :root{ --logo-size:54px; --logo-size-footer:50px; }
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; color:var(--text); background:var(--bg);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji"; }
a{ color:var(--text); text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }

.container{ width:min(var(--container),92vw); margin-inline:auto; }
section{ padding:46px 0; border-top:1px solid var(--border); }
h1{ font-size:clamp(2rem,4vw,3rem); line-height:1.1; margin:0 0 12px; letter-spacing:-.6px; }
h2{ font-size:clamp(1.6rem,3vw,2rem); margin:0 0 16px; }
p.section-lead{ margin:0 0 24px; color:var(--muted); }
.small{ color:var(--muted); font-size:.9rem; }
.muted{ color:var(--muted); }
.mt0{ margin-top:0; }
.accent{ color:var(--accent); }

/* Header / Nav */
.site-header{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);
  background:rgba(255,255,255,.8); border-bottom:1px solid var(--border); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.logo{ display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px; }
.logo img{ width:var(--logo-size); height:auto; object-fit:contain; }
.logo-text{ font-size:clamp(1.05rem,1.6vw,1.35rem); text-transform:lowercase; }
.links{ display:flex; align-items:center; gap:12px; }
.nav-list{ display:flex; align-items:center; gap:12px; }
.btn, .nav a.btn{ padding:10px 14px; border-radius:12px; background:var(--text); color:#fff; border:1px solid var(--text); transition:transform .04s ease; }
.btn:hover, .nav a.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--text); color:#fff; border:1px solid var(--text); border-radius:14px; padding:12px 16px; box-shadow:var(--shadow); font-weight:700; }
.btn-secondary{ background:#fff; color:var(--text); border:1px solid var(--border); border-radius:14px; padding:12px 16px; font-weight:700; }
.burger{ display:none; width:42px; height:42px; border:1px solid var(--border); border-radius:12px; background:#fff; align-items:center; justify-content:center; gap:4px; }
.burger span{ width:18px; height:2px; background:var(--text); display:block; }
@media (max-width:920px){
  .burger{ display:inline-flex; }
  .nav-list{ position:absolute; right:0; top:100%; background:#fff; border:1px solid var(--border); border-radius:14px; padding:8px; box-shadow:var(--shadow); display:none; flex-direction:column; gap:8px; }
  .nav-list.open{ display:flex; }
}

/* Announcement */
.announce{ background:#fff; border-bottom:1px solid var(--border); }
.announce-row{ display:grid; grid-template-columns:auto 1fr auto auto; gap:8px; align-items:center; padding:8px 0; }
.announce-track{ overflow:hidden; }
.announce-track>*{ min-width:100%; }
.announce-item{ display:flex; align-items:center; gap:10px; }
.announce-badge{ width:8px; height:8px; border-radius:50%; background:var(--accent); }
.announce-cta{ color:#fff; background:var(--text); padding:6px 10px; border-radius:10px; font-weight:700; border:1px solid var(--text); }
.announce-nav,.announce-close{ border:1px solid var(--border); background:#fff; border-radius:10px; padding:4px 10px; cursor:pointer; }

/* Hero */
.hero{ padding:64px 0 34px; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:center; }
@media (max-width:880px){ .hero-grid{ grid-template-columns:1fr; } }
.lead{ color:var(--muted); font-size:clamp(1.02rem,2.2vw,1.1rem); margin-bottom:18px; }
.cta{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.hero-img{ border-radius:12px; overflow:hidden; aspect-ratio:1/1; background:#fff; border:1px dashed #d8e0ea; }
.hero-img--wide{ grid-column:1/-1; aspect-ratio:2/1; }

/* Cards / Grids */
.card{ background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.card .img{ aspect-ratio:4/3; background:linear-gradient(135deg, #eef2ff, #f0fbf7); object-fit:cover; width:100%; }
.card .body{ padding:12px 14px; font-size:.95rem; color:var(--muted); flex:1; }
.card .actions{ padding:12px 14px 16px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Produkt-Karussell */
.prod-carousel{ position:relative; }
.product-viewport{ overflow:auto; scrollbar-width:none; }
.product-viewport::-webkit-scrollbar{ display:none; }
.product-track{ display:flex; gap:14px; padding:2px; }
.product-card{ min-width:260px; max-width:280px; }
.pc-nav{ position:absolute; top:50%; transform:translateY(-50%); border:1px solid var(--border); background:#fff; border-radius:50%; width:38px; height:38px; display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow); }
.pc-nav.prev{ left:-14px; } .pc-nav.next{ right:-14px; }

/* Formulare */
.form-wrap{ display:grid; grid-template-columns:1.2fr .8fr; gap:14px; }
@media (max-width:880px){ .form-wrap{ grid-template-columns:1fr; } }
.form-card{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:var(--shadow); }
.form-grid{ display:grid; gap:10px; }
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:680px){ .row-2{ grid-template-columns:1fr; } }
.field{ display:grid; gap:6px; }
.field span{ font-weight:600; font-size:.95rem; }
input,textarea,select{ width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px; font:inherit; background:#fff; }
.honeypot{ position:absolute; left:-5000px; opacity:0; pointer-events:none; }
.captcha-box{ margin-top:2px; }

/* Preisblöcke */
.calc-total{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px; }
.calc-lines{ display:grid; gap:8px; }
.line{ display:flex; align-items:center; justify-content:space-between; }
.line.total strong{ font-size:1.1rem; }

/* Dialoge */
dialog{ border:none; padding:0; border-radius:16px; max-width:min(95vw, 900px); width:100%; box-shadow:0 30px 80px rgba(0,0,0,.25); }
dialog::backdrop{ background:rgba(0,0,0,.35); }
.legal-dialog .legal-inner{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px; }
.legal-close{ border:1px solid var(--border); background:#fff; border-radius:10px; padding:4px 8px; cursor:pointer; float:right; }
.legal-content{ margin-top:6px; }

.prod-dialog .prod-inner{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px; }
.prod-close{ border:1px solid var(--border); background:#fff; border-radius:10px; padding:4px 8px; cursor:pointer; float:right; }
.prod-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:start; }
@media (max-width:880px){ .prod-grid{ grid-template-columns:1fr; } }
.slider{ position:relative; background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; }
#slideMain{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; }
.slide-nav{ position:absolute; top:50%; transform:translateY(-50%); border:1px solid var(--border); background:#fff; border-radius:50%; width:36px; height:36px; display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow); }
.slide-prev{ left:8px; } .slide-next{ right:8px; }
.pin-overlay{ position:absolute; right:10px; top:10px; z-index:3; background:#fff; border:1px solid var(--border); border-radius:10px; padding:4px 6px; box-shadow:var(--shadow); }
.thumbs{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.thumbs button{ border:1px solid var(--border); background:#fff; border-radius:10px; padding:0; cursor:pointer; }
.thumbs img{ width:68px; height:68px; object-fit:cover; border-radius:10px; display:block; }
.thumbs button[aria-selected="true"]{ outline:2px solid var(--accent); }

/* Footer */
footer{ padding:40px 0 60px; border-top:1px solid var(--border); color:var(--muted); }
footer .logo img{ width:var(--logo-size-footer); height:auto; }
.footer-grid{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:start; }
@media (max-width:680px){ .footer-grid{ grid-template-columns:1fr; } }
.foot-links{ display:flex; gap:16px; flex-wrap:wrap; }
.foot-links a{ color:var(--muted); text-decoration:underline; }

/* Social (FIX: kleiner) */
.social-icons{ margin-top:12px; text-align:center; }
.social-icons a{ display:inline-block; margin:0 8px; }
.social-icons a svg{ width:20px; height:20px; fill:var(--muted); transition:fill .2s; }
.social-icons a:hover svg{ fill:var(--accent); }
@media (max-width:520px){
  .social-icons a svg{ width:18px; height:18px; }
}

/* Cookiebanner */
.cookie-banner{ position:fixed; inset:auto 20px 20px 20px; z-index:60; }
.cookie-inner{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:var(--shadow); display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; }
.cookie-actions{ display:flex; gap:8px; }
.cookie-toggle{ display:flex; gap:8px; align-items:center; }
.cookie-link{ color:var(--text); text-decoration:underline; }

/* FAQ */
.faq { margin-top:10px; }
.faq-q{
  width:100%; text-align:left; padding:14px 16px; margin:10px 0 0;
  border:1px solid var(--border); border-radius:12px; background:#fff;
  font:inherit; color:var(--text); display:flex; justify-content:space-between; align-items:center;
  cursor:pointer;
}
.faq-q::after{ content:"+"; font-weight:800; color:var(--muted); }
.faq-q[aria-expanded="true"]::after{ content:"–"; }
.faq-a{
  max-height:0; overflow:hidden;
  transition:max-height .3s ease, padding .2s ease, border-color .2s ease;
  background:#fff; border:1px solid var(--border); border-top:none;
  border-radius:0 0 12px 12px; padding:0 16px; color:var(--muted);
  will-change:max-height;
}
.faq-a.open{ padding:12px 16px 16px; }

/* --- Fix: Versand-Hinweis im Modal sichtbar --- */
#prodShipInline{
  display:block;
  margin-top:6px;
  color: var(--text);
  font-weight: 600;
}

/* Utilities */
.pin-inline{ margin-left:8px; display:inline-flex; align-items:center; }