/* hxm-pdp-p01 – Produktseite P01 „Klarkante“ + M06 „Kacheln“ (Betreiberwahl 01.11.2026). ERZEUGT von b01_css.py, nicht von Hand aendern.
   Konzeptregeln (#hxn) aus der gewaehlten Fassung, v14-Galerie/Vollbild/Restock (#hxp, #hxp-lb) aus der Live-Datei, LIVE-Block am Ende. */
/* ---- Konzept neu.css (gefiltert) ---- */
#hxn{--hxn-w:1640px; --hxn-pad:28px; --hxn-gap:20px; --hxn-sec:40px; --hxn-head:14px; --hxn-card:18px;
  --hxn-ink:#1d2127; --hxn-text:#444; --hxn-mut:#6b7178; --hxn-line:#ececf0; --hxn-surface:#f7f9fa; --hxn-soft:#f6f6f8; --hxn-gold:#eab11a;
  --hxn-r-card:16px; --hxn-r-img:12px; --hxn-r-btn:8px; --hxn-r-sel:12px; --hxn-r-pill:999px;
  --hxn-f:'ProximaNova','Proxima Nova',Roboto,system-ui,sans-serif;
  display:block; margin:0; padding:var(--hxn-gap) 0 0; background:#fff; color:var(--hxn-text);
  font-family:var(--hxn-f); font-size:16px; line-height:26px; font-weight:400; -webkit-font-smoothing:antialiased; text-align:left;}
@media (max-width:1599px){
  #hxn{--hxn-pad:20px}
}
@media (max-width:1399px){
  #hxn{--hxn-pad:16px}
}
@media (max-width:1024px){
  #hxn{--hxn-pad:14px}
}
@media (max-width:767px){
  #hxn{--hxn-gap:12px; --hxn-sec:28px; --hxn-head:10px; --hxn-card:16px; padding-top:var(--hxn-gap)}
}
#hxn *, #hxn *::before, #hxn *::after{box-sizing:border-box}
#hxn img{display:block; max-width:100%; height:auto; border:0}
#hxn a{color:inherit; text-decoration:none; font-family:inherit}
#hxn p{margin:0}
#hxn ul, #hxn ol{margin:0; padding:0; list-style:none}
#hxn h1, #hxn h2, #hxn h3{font-family:var(--hxn-f); color:var(--hxn-ink); margin:0; padding:0; letter-spacing:-.01em; text-transform:none; font-style:normal}
#hxn h1{font-size:36px; line-height:40px; font-weight:700}
#hxn h2{font-size:28px; line-height:34px; font-weight:700}
#hxn h3{font-size:20px; line-height:26px; font-weight:700}
@media (max-width:767px){
  #hxn h1{font-size:28px; line-height:32px}
  #hxn h2{font-size:22px; line-height:28px}
  #hxn h3{font-size:18px; line-height:24px}
}
#hxn :focus-visible{outline:2px solid #000; outline-offset:2px; border-radius:4px}
#hxn .sr{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
#hxn .hxn-link{display:inline-flex; align-items:center; min-height:44px; font-size:15px; line-height:20px; font-weight:600; color:var(--hxn-ink);
  text-decoration:underline; text-decoration-color:rgba(29,33,39,.3); text-underline-offset:4px}
#hxn .hxn-link:hover{text-decoration-color:var(--hxn-ink)}
/* ---- Konzept pdp.css (gefiltert) ---- */
#hxn.hxp2{padding:0 0 56px; --kl-h:64px; --sp-h:0px}
#hxn.hxp2 h1, #hxn.hxp2 h2, #hxn.hxp2 h3{letter-spacing:-.005em}
#hxn.hxp2 h2{font-size:24px; line-height:30px}
#hxn.hxp2 h3{font-size:18px; line-height:24px}
#hxn button{background:none; border:0; padding:0; margin:0; color:inherit; font:inherit; font-family:var(--hxn-f); border-radius:var(--hxn-r-btn); cursor:pointer;
  text-transform:none; letter-spacing:normal; box-shadow:none; min-height:0; text-decoration:none}
#hxn button:disabled{cursor:default}
#hxn input, #hxn select, #hxn textarea{font-family:var(--hxn-f); color:var(--hxn-ink); border-radius:var(--hxn-r-btn)}
#hxn .rund{border-radius:50%!important}
#hxn [hidden]{display:none!important}
#hxn .w{max-width:var(--hxn-w); margin:0 auto; padding:0 var(--hxn-pad)}
#hxn .ic{width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
#hxn .sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}
#hxn .hxn-link{min-height:44px}
#hxn [id]{scroll-margin-top:calc(var(--hdr-h,64px) + var(--sp-h) + 16px); scroll-margin-bottom:calc(var(--kl-h) + 16px)}
#hxn .crumb{display:flex; align-items:center; gap:8px; padding:14px 0 14px; font-size:13px; line-height:18px; color:var(--hxn-mut); white-space:nowrap; overflow-x:auto; scrollbar-width:none}
#hxn .crumb::-webkit-scrollbar{display:none}
#hxn .crumb a{color:var(--hxn-text)}
#hxn .crumb a:hover{color:var(--hxn-ink); text-decoration:underline}
#hxn .crumb [aria-current]{color:var(--hxn-ink); font-weight:600}
#hxn .hxp-cta{flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 24px; border-radius:var(--hxn-r-btn);
  background:var(--hxn-ink); border:1px solid var(--hxn-ink); color:#fff; font-size:16px; line-height:20px; font-weight:600; white-space:nowrap; transition:background .15s}
#hxn .hxp-cta:hover{background:#000}
#hxn .hxp-cta.busy{background:#3b4048; border-color:#3b4048}
#hxn .hxp-cta.ok{background:#1d5c34; border-color:#1d5c34}
#hxn .hxp-btn2{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 16px; border:1px solid #c9cdd2; border-radius:var(--hxn-r-btn);
  background:#fff; color:var(--hxn-ink); font-size:14px; line-height:20px; font-weight:600; white-space:nowrap}
#hxn .hxp-btn2:hover{border-color:var(--hxn-ink)}
#hxn .hxp-btn2 .ic{width:18px; height:18px}
#hxn .hxp-btn2[aria-expanded="true"] .ic{transform:rotate(180deg)}
#hxn .chips{display:flex; flex-wrap:wrap; gap:8px}
#hxn .chip{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:8px 12px; border:1px solid #d3d6da; border-radius:var(--hxn-r-btn); background:#fff;
  color:var(--hxn-ink); font-size:14px; line-height:20px; font-weight:500}
#hxn a.chip:hover{border-color:var(--hxn-ink)}
#hxn .chip .ic{width:16px; height:16px}
#hxn .chip .ck{display:none}
#hxn .chip[aria-current="true"]{border:2px solid var(--hxn-ink); padding:7px 11px; font-weight:700}
#hxn .chip[aria-current="true"] .ck{display:inline-flex}
#hxn .chip.na{border-style:dashed; color:#4b5157}
#hxn .tag, #hxn li.tag{display:inline-flex; align-items:center; min-height:32px; padding:5px 10px; border:1px solid #d3d6da; border-radius:var(--hxn-r-btn); font-size:14px; line-height:20px; color:var(--hxn-ink)}
#hxn ul.tags{display:flex; flex-wrap:wrap; gap:8px}
#hxn .ac-zeile{display:flex; flex-wrap:wrap; gap:8px}
#hxn .sterne{position:relative; display:inline-block; width:90px; height:18px; flex:none; vertical-align:middle}
#hxn .sterne.klein{width:75px; height:15px}
#hxn .st-bg, #hxn .st-fg{position:absolute; inset:0 auto 0 0; display:flex; overflow:hidden; white-space:nowrap}
#hxn .st-bg{width:100%; color:#d9dce0}
#hxn .st-fg{color:var(--hxn-gold)}
#hxn .st{width:18px; height:18px; flex:none}
#hxn .sterne.klein .st{width:15px; height:15px}
#hxn .hero{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-rows:auto 1fr; column-gap:48px; align-items:start; margin:0 0 48px}
#hxn .hero>.gal{grid-column:1; grid-row:1 / span 2}
#hxn .hero>.kauf{grid-column:2; grid-row:1}
#hxn .kauf{display:flex; flex-direction:column; gap:18px; min-width:0}
#hxn .kopf{display:flex; flex-direction:column; gap:6px}
#hxn .k-marke{align-self:flex-start; font-size:13px; line-height:18px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--hxn-ink)}
#hxn .k-marke:hover{text-decoration:underline}
#hxn .k-h1{font-size:28px; line-height:34px; font-weight:700; margin:0}
#hxn .k-bew{display:inline-flex; align-items:center; gap:8px; align-self:flex-start; min-height:32px; font-size:14px; line-height:20px; color:var(--hxn-text)}
#hxn .k-bew:hover span{text-decoration:underline}
#hxn .pg-z{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; margin:0}
#hxn .pg-p{font-size:28px; line-height:34px; font-weight:700; color:var(--hxn-ink)}
#hxn .pg-g{font-size:15px; line-height:22px; color:var(--hxn-text)}
#hxn .pg-t{flex-basis:100%; font-size:13px; line-height:18px; color:var(--hxn-mut)}
#hxn .pg-t a{text-decoration:underline}
#hxn .lager{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:15px; line-height:22px; color:var(--hxn-text)}
#hxn .lager b{color:#14662f; font-weight:700}
#hxn .lager .dot{display:inline-block; width:9px; height:9px; margin-right:8px; border-radius:50%; background:#1a7f37; vertical-align:1px}
#hxn .lg-nein{display:none}
#hxn .buy-row{display:flex; gap:12px; align-items:stretch}
#hxn .qty-sel{position:relative; display:inline-flex; flex:none}
#hxn .qty-sel select{appearance:none; -webkit-appearance:none; height:52px; min-width:86px; padding:0 36px 0 16px; border:1px solid #c9cdd2; background:#fff; font-size:16px; font-weight:600; cursor:pointer}
#hxn .qty-sel.klein select{height:44px; min-width:70px; font-size:15px}
#hxn .sel-ic{position:absolute; right:10px; top:50%; margin-top:-10px; pointer-events:none}
#hxn .atc-st{min-height:0; font-size:14px; line-height:20px; color:var(--hxn-ink)}
#hxn .atc-st:empty{display:none}
#hxn .atc-st.fehler{color:#a3261b}
#hxn .svc{font-size:14px; line-height:21px; color:var(--hxn-text)}
#hxn .svc a{text-decoration:underline}
#hxn .svc-z{margin-top:-10px}
#hxn .svc-j{font-size:13px; line-height:19px; color:var(--hxn-mut)}
#hxn .lead{font-size:15px; line-height:24px; color:var(--hxn-text)}
#hxn .lead p+p{margin-top:8px}
#hxn .restock{padding:18px; border:1px solid var(--hxn-line); border-radius:var(--hxn-r-card)}
#hxn .pd-t{font-size:14px; line-height:20px; font-weight:700; color:var(--hxn-ink)}
#hxn .pd-t span{font-weight:400; color:var(--hxn-mut)}
#hxn .pd-l{display:grid; gap:6px; margin-top:8px}
#hxn .pd-z{display:flex; align-items:center; gap:10px; min-height:56px; padding:6px 12px; border:1px solid var(--hxn-line); border-radius:var(--hxn-r-btn); cursor:pointer; font-size:14px; line-height:20px}
#hxn .pd-z input{width:20px; height:20px; accent-color:var(--hxn-ink); flex:none}
#hxn .pd-img{width:40px; height:40px; object-fit:contain; flex:none}
#hxn .pd-n{flex:1; color:var(--hxn-ink)}
#hxn .pd-z b{white-space:nowrap}
#hxn .pd-z:has(input:checked){border:2px solid var(--hxn-ink); padding:5px 11px}
#hxn .ausf{display:grid; gap:8px}
#hxn .au{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:4px 12px; min-height:56px; padding:10px 14px; border:1px solid #d3d6da; border-radius:var(--hxn-r-btn); font-size:14px; line-height:20px}
#hxn .au[aria-current="true"]{border:2px solid var(--hxn-ink); padding:9px 13px}
#hxn .au .ic{width:18px; height:18px}
#hxn .au-img{width:40px; height:40px; object-fit:contain}
#hxn .au-t{font-weight:600; color:var(--hxn-ink)}
#hxn .au-p{font-weight:700; color:var(--hxn-ink)}
#hxn .au-s{grid-column:2 / -1; font-size:13px; color:var(--hxn-mut)}
#hxn .m-sorten{display:flex; flex-direction:column; gap:10px; min-width:0}
#hxn .so-kopf{font-size:14px; line-height:20px; color:var(--hxn-mut)}
#hxn .so-kopf b{color:var(--hxn-ink)}
#hxn .so-kopf a{color:var(--hxn-ink); text-decoration:underline}
#hxn .so-kopf a[aria-current]{font-weight:700; text-decoration-thickness:2px}
#hxn .so-32{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
#hxn .sk{position:relative; display:flex; align-items:center; gap:10px; min-height:62px; padding:8px 10px; border:1px solid var(--hxn-line); border-radius:var(--hxn-r-btn); background:#fff; font-size:13px; line-height:17px; color:var(--hxn-text)}
#hxn .sk:hover{border-color:#9aa0a6}
#hxn .sk-img{width:44px; height:44px; object-fit:contain; flex:none}
#hxn .sk-t{display:flex; flex-direction:column; gap:2px; min-width:0}
#hxn .sk-t b{font-size:14px; line-height:18px; color:var(--hxn-ink); overflow-wrap:anywhere}
#hxn .sk-ok{display:none}
#hxn [aria-current="true"]>.sk-ok{display:inline-flex; position:absolute; top:6px; right:6px; color:var(--hxn-ink)}
#hxn .sk-ok .ic{width:16px; height:16px; stroke-width:2.4}
#hxn .sk-ok span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0)}
#hxn .sk[aria-current="true"]{border:2px solid var(--hxn-ink); padding:7px 9px}
#hxn .so-alle{align-self:flex-start}
#hxn .ax{display:flex; flex-direction:column; gap:8px}
#hxn .ax-l{font-size:14px; line-height:20px; color:var(--hxn-mut)}
#hxn .ax-l b{color:var(--hxn-ink)}
#hxn table{border:0; margin:0}
#hxn table th, #hxn table td{border:0; background-color:transparent}
#hxn table.zebra{width:100%; border-collapse:collapse; font-size:15px; line-height:21px}
#hxn table.zebra caption{caption-side:top; text-align:left; padding:0 0 8px; font-size:13px; line-height:18px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--hxn-mut)}
#hxn table.zebra th{width:40%; padding:10px 12px; text-align:left; font-weight:600; color:var(--hxn-ink); vertical-align:top}
#hxn table.zebra td{padding:10px 12px; color:var(--hxn-text); vertical-align:top}
#hxn table.zebra td .chip, #hxn table.zebra td .tag{margin:2px 6px 2px 0; min-height:32px; padding:4px 10px}
#hxn table.zebra td a:not(.chip){color:var(--hxn-ink); text-decoration:underline}
#hxn table.zebra tbody tr:nth-child(odd){background:var(--hxn-surface)}
#hxn table.zebra tbody tr>*:first-child{border-radius:6px 0 0 6px}
#hxn table.zebra tbody tr>*:last-child{border-radius:0 6px 6px 0}
#hxn .sek-h{margin:0}
#hxn .ak-btn{display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; text-align:left; font:inherit; color:inherit}
#hxn .ak-t{flex:1 1 auto; min-width:0}
#hxn .ak-t .n{color:var(--hxn-mut); font-weight:400}
#hxn .ak-zu{display:none}
#hxn .ak-ic{display:none}
#hxn .prose{max-width:780px; font-size:16px; line-height:27px; color:var(--hxn-text)}
#hxn .prose h3{margin:28px 0 8px; font-size:19px; line-height:25px}
#hxn .prose h3:first-child{margin-top:0}
#hxn .prose p{margin:0 0 14px}
#hxn .prose ul, #hxn .prose ol{list-style:disc; margin:0 0 14px; padding-left:22px}
#hxn .prose li{margin:4px 0}
#hxn .prose a{color:var(--hxn-ink); text-decoration:underline; text-underline-offset:3px}
#hxn .prose strong{color:var(--hxn-ink)}
#hxn .prose.klein{font-size:15px; line-height:24px}
#hxn .mz{margin-top:8px}
#hxn .faq{display:grid; grid-template-columns:1fr 1fr; gap:28px 48px}
#hxn .fq h3{font-size:17px; line-height:24px; margin:0 0 6px}
#hxn .fq p{font-size:15px; line-height:24px; color:var(--hxn-text)}
#hxn .vs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px}
#hxn .vs h3{font-size:16px; line-height:22px; margin:0 0 6px}
#hxn .vs p{font-size:15px; line-height:23px}
#hxn .vs a{text-decoration:underline}
#hxn .sb-w{display:grid; gap:20px; max-width:860px}
#hxn .sb-gruppen{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none; gap:24px 40px; align-items:start}
#hxn .bw-oben{display:flex; flex-wrap:wrap; align-items:flex-start; gap:24px 48px; padding-bottom:20px; border-bottom:1px solid var(--hxn-line)}
#hxn .bw-sum{display:flex; flex-direction:column; gap:6px}
#hxn .bw-avg{font-size:15px; color:var(--hxn-text)}
#hxn .bw-avg b{font-size:40px; line-height:44px; color:var(--hxn-ink); margin-right:4px}
#hxn .bw-n{font-size:14px; color:var(--hxn-mut)}
#hxn .bw-vert{display:grid; gap:4px; min-width:280px}
#hxn .bw-f{display:grid; grid-template-columns:62px 1fr 34px; align-items:center; gap:10px; min-height:32px; padding:0 8px; font-size:13px; text-align:left; color:var(--hxn-text)}
#hxn button.bw-f:hover{background:var(--hxn-surface)}
#hxn .bw-f i{position:relative; height:8px; border-radius:4px; background:#e3e5e8; overflow:hidden}
#hxn .bw-f u{position:absolute; inset:0 auto 0 0; background:var(--hxn-gold)}
#hxn .bw-f em{font-style:normal; text-align:right}
#hxn .bw-f[aria-pressed="true"]{outline:2px solid var(--hxn-ink); font-weight:700}
#hxn .bw-akt{display:flex; flex-direction:column; gap:12px; margin-left:auto}
#hxn .bw-leer{font-size:15px; color:var(--hxn-text); margin-bottom:12px}
#hxn .bw-fst:empty{display:none}
#hxn .bw-l{display:grid}
#hxn .bz{display:grid; grid-template-columns:110px minmax(0,1fr) 180px; gap:8px 32px; padding:18px 0; border-bottom:1px solid var(--hxn-line)}
#hxn .bz-q{margin:0; font-size:15px; line-height:24px; color:#1a1a1a}
#hxn .bz-t{display:block; color:var(--hxn-ink); margin-bottom:2px}
#hxn .bz-w{font-size:13px; line-height:19px; color:var(--hxn-mut)}
#hxn .bz-w b{display:block; color:var(--hxn-ink)}
#hxn .bw-mehr{margin-top:16px}
#hxn .sprung{position:sticky; top:var(--hdr-h,64px); z-index:6; display:flex; gap:8px; padding:12px var(--hxn-pad); margin:0 auto 0; max-width:var(--hxn-w); background:#fff; border-bottom:1px solid var(--hxn-line); overflow-x:auto; scrollbar-width:none}
#hxn .sprung a{display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border:1px solid #d3d6da; border-radius:var(--hxn-r-btn); font-size:14px; font-weight:600; color:var(--hxn-ink); white-space:nowrap}
#hxn .sprung a:hover{border-color:var(--hxn-ink)}
#hxn .sprung a[aria-current="true"]{border:2px solid var(--hxn-ink); padding:0 13px; text-decoration:underline; text-decoration-color:var(--hxn-gold); text-decoration-thickness:3px; text-underline-offset:6px}
#hxn .m-info.b1{--sp-h:65px}
#hxn .zeilen{max-width:var(--hxn-w); margin:0 auto; padding:0 var(--hxn-pad)}
#hxn .zeilen>.sek{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); column-gap:48px; padding:36px 0; border-top:1px solid var(--hxn-line)}
#hxn .zeilen>.sek:first-child{border-top:0}
#hxn .zeilen>.sek>.sek-h{position:sticky; top:calc(var(--hdr-h,64px) + var(--sp-h) + 20px); align-self:start; font-size:22px; line-height:28px}
#hxn .zeilen>.sek>.sek-b{min-width:0}
#hxn .emp{display:flex; flex-direction:column; gap:16px; padding:36px 0 8px; border-top:1px solid var(--hxn-line); margin-top:8px}
#hxn .emp-kopf{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 24px}
#hxn .emp-kopf h2{font-size:24px; line-height:30px}
#hxn .emp-kopf p{font-size:14px; line-height:20px; color:var(--hxn-mut); max-width:720px}
#hxn .pk-reihe{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px}
#hxn .pk{position:relative; display:flex; flex-direction:column; gap:8px; min-width:0}
#hxn .pk-bild{display:block; aspect-ratio:1/1; padding:14px; background:var(--hxn-surface); border-radius:var(--hxn-r-img)}
#hxn .pk-img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
#hxn .pk-t{font-size:15px; line-height:21px; font-weight:600; color:var(--hxn-ink)}
#hxn .pk-t:hover{text-decoration:underline}
#hxn .pk-a{font-size:13px; line-height:18px; color:var(--hxn-mut)}
#hxn .pk-p{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; font-size:15px; color:var(--hxn-ink)}
#hxn .pk-g{font-size:13px; color:var(--hxn-text)}
#hxn .pk-kauf{display:flex; gap:8px; margin-top:auto; padding-top:4px}
#hxn .pk-kauf .pk-btn{flex:1; min-width:0; padding:0 10px}
@media (max-width:1279px) and (min-width:1025px){
  #hxn .pk-reihe{grid-template-columns:repeat(4,minmax(0,1fr))}
  #hxn .pk-reihe>.pk:nth-child(5){display:none}
}
@media (max-width:1024px){
  #hxn .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:28px}
  #hxn .k-h1{font-size:24px; line-height:30px}
  #hxn .hxp-cta{white-space:normal; min-width:0; text-align:center; padding:4px 14px}
  #hxn .so-32{grid-template-columns:repeat(2,minmax(0,1fr))}
  #hxn .zeilen>.sek{grid-template-columns:minmax(0,1fr); row-gap:14px}
  #hxn .zeilen>.sek>.sek-h{position:static}
  #hxn .pk-reihe{grid-template-columns:repeat(3,minmax(0,1fr))}
  #hxn .pk-reihe>.pk:nth-child(n+4){display:none}
  #hxn .faq{gap:22px 28px}
  #hxn .vs{grid-template-columns:minmax(0,1fr)}
  #hxn .sb-gruppen{grid-template-columns:minmax(0,1fr)}
  #hxn .bz{grid-template-columns:90px minmax(0,1fr); gap:6px 20px}
  #hxn .bz-w{grid-column:2}
}
@media (max-width:767px){
  #hxn.hxp2{padding-bottom:28px}
  #hxn .crumb{padding:10px 0}
  #hxn .hero{display:flex; flex-direction:column; align-items:stretch; gap:0; margin-bottom:28px}
  #hxn .hero>*{min-width:0; max-width:100%}
  #hxn .hero>*{position:static!important}
  #hxn .hero>.gal{margin-bottom:12px}
  #hxn .kauf{gap:12px}
  #hxn .kopf{gap:4px}
  #hxn .k-bew{min-height:28px}
  #hxn .k-h1{font-size:21px; line-height:27px}
  #hxn .k-marke{font-size:12px; line-height:16px}
  #hxn .pg-p{font-size:24px; line-height:30px}
  #hxn .pg-z{gap:0 10px}
  #hxn .lager{font-size:14px; line-height:20px}
  #hxn .hxp-cta{min-height:48px; font-size:15px; white-space:normal; text-align:center; line-height:19px; min-width:0; padding:4px 12px}
  #hxn .qty-sel select{height:48px}
  #hxn .chip{min-height:44px}
  #hxn .sprung{display:none}
  #hxn .m-info.b1{--sp-h:0px}
  #hxn .so-32{grid-template-columns:repeat(2,minmax(0,1fr))}
  #hxn .zeilen{padding:0 var(--hxn-pad)}
  #hxn .zeilen>.sek{display:block; padding:0; border-top:1px solid var(--hxn-line)}
  #hxn .sek[data-ak]:not([data-ak="nie"])>.sek-h{font-size:18px; line-height:24px; margin:0}
  #hxn .sek[data-ak]:not([data-ak="nie"])>.sek-h .ak-btn{min-height:58px; padding:14px 0}
  #hxn .ak-ic{display:block; transition:transform .2s}
  #hxn .ak-btn[aria-expanded="true"] .ak-ic{transform:rotate(180deg)}
  #hxn .sek[data-ak]:not([data-ak="nie"])>.sek-b{padding:0 0 22px}
  #hxn .zeilen>.sek>.sek-h{position:static}
  #hxn[data-modul="H-B9"] .sek.offen>.sek-h{position:sticky; top:var(--hdr-h,57px); z-index:5; background:#fff; box-shadow:0 1px 0 var(--hxn-line)}
  #hxn[data-modul="H-B9"] .sek.offen .ak-zu{display:inline; margin-left:auto; font-size:13px; font-weight:600; text-decoration:underline}
  #hxn .faq, #hxn .vs, #hxn .sb-gruppen{grid-template-columns:minmax(0,1fr); gap:18px}
  #hxn .bz{grid-template-columns:minmax(0,1fr); gap:4px}
  #hxn .bz-w{grid-column:auto}
  #hxn .bw-oben{gap:16px}
  #hxn .bw-akt{margin-left:0}
  #hxn .bw-vert{min-width:0; width:100%}
  #hxn table.zebra{font-size:14px}
  #hxn table.zebra th{width:42%; padding:9px 10px}
  #hxn table.zebra td{padding:9px 10px}
  #hxn .emp{padding:28px 0 4px}
  #hxn .emp-kopf h2{font-size:21px; line-height:27px}
  #hxn .pk-reihe{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; margin:0 calc(-1 * var(--hxn-pad)); padding:0 var(--hxn-pad)}
  #hxn .pk-reihe::-webkit-scrollbar{display:none}
  #hxn .pk-reihe>.pk, #hxn .pk-reihe>.pk:nth-child(n){display:flex; flex:0 0 calc((100% - 12px) / 2.2); scroll-snap-align:start}
  #hxn .pk-kauf{flex-wrap:wrap}
  #hxn .pk-kauf .qty-sel{display:none}
}
@media (max-width:374px){
  #hxn .k-h1{font-size:20px; line-height:26px}
  #hxn .so-32{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  #hxn *{scroll-behavior:auto!important; transition:none!important}
}
/* ---- Konzept mb.css (gefiltert) ---- */
#hxn{--mb-line:#e1e4e8; --mb-mut:#5f656c; --mb-rand:#c9cdd2}
#hxn .hero.h-v14{grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:30px}
#hxn .mb{color:var(--hxn-ink)}
#hxn .mb dd, #hxn .mb dt{margin:0; padding:0; text-align:left}
#hxn .mb dt{color:var(--mb-mut)}
#hxn .mb .mb-i{flex:none; width:18px; height:18px; fill:none; stroke:var(--mb-mut); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
#hxn .mb6{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
#hxn .mb6-c{display:flex; flex-direction:column; gap:2px; min-width:0; padding:12px; background:var(--hxn-surface); border-radius:var(--hxn-r-btn)}
#hxn .mb6-c .mb-i{width:20px; height:20px; margin-bottom:6px; stroke:var(--hxn-ink)}
#hxn .mb6-c dd{order:2; font-size:15px; line-height:20px; font-weight:700; overflow-wrap:break-word}
#hxn .mb6-c dt{order:3; font-size:12px; line-height:16px}
@media (max-width:767px){
  #hxn .mb6{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:768px) and (max-width:1100px){
  #hxn .mb6{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---- v14 (Live-Datei hxm-pdp-v14/pdp.css, gefiltert) ---- */
#hxp, #hxp-lb{--hx-container-max: 1640px;
  --hx-container-kit: 1440px;
  --hx-container-tablet: 1024px;
  --hx-container-mobile: 767px;
  --hx-bp-tablet: 1024px;
  --hx-bp-mobile: 767px;
  --hx-pad-x: 10px;
  --hx-pad-y: 10px;
  --hx-gap: 20px;
  --hx-gutter: 15px;
  --hx-split: 50%;
  --hx-sticky-top: 89px;
  --hx-space-variant-gap: 5px;
  --hx-space-form-gap: 10px;
  --hx-space-crumb: 12px;
  --hx-font-display: 'ProximaNova', 'Proxima Nova', Roboto, system-ui, sans-serif;
  --hx-font-body: Roboto, system-ui, sans-serif;
  --hx-fs-h1: 20px;
  --hx-lh-h1: 30px;
  --hx-fw-h1: 500;
  --hx-fs-price: 20px;
  --hx-fs-unit: 12px;
  --hx-fs-unit-m: 10px;
  --hx-fs-delivery: 14.4px;
  --hx-fs-body: 16px;
  --hx-lh-body: 26px;
  --hx-fs-info: 14px;
  --hx-fw-light: 300;
  --hx-fs-toggle: 16px;
  --hx-fs-label: 12.5px;
  --hx-fs-vname: 12.5px;
  --hx-fs-vbrand: 9px;
  --hx-fs-vsub: 10px;
  --hx-fs-count: 10.5px;
  --hx-fs-btn: 16px;
  --hx-fs-crumb: 12px;
  --hx-fs-card-title: 15px;
  --hx-fs-pill: 11px;
  --hx-fs-section: 16px;
  --hx-fs-card-h: 20px;
  --hx-gold: #eab11a;
  --hx-gold-dark: #c19c3a;
  --hx-gold-line: #f0b90b;
  --hx-ink: #000000;
  --hx-ink-2: #1a1a1a;
  --hx-dark: #1d2127;
  --hx-title: #292e38;
  --hx-text-kit: #666666;
  --hx-text: #7a7a7a;
  --hx-text-delivery: #444444;
  --hx-muted: #888888;
  --hx-muted-2: #999999;
  --hx-pill-text: #6b7178;
  --hx-slate: #6b7280;
  --hx-unit-live: #d1d1d1;
  --hx-crumb-live: #d3d3d3;
  --hx-white: #ffffff;
  --hx-bg-section: #f7f9fa;
  --hx-bg-pill: #f6f6f8;
  --hx-border: #ececec;
  --hx-border-2: #ececf0;
  --hx-divider: #f1f1f1;
  --hx-border-hover: #c8c8c8;
  --hx-border-dashed: #d8d8d8;
  --hx-border-card: rgba(0, 0, 0, 0.08);
  --hx-btn-hover: #3a3a39;
  --hx-dot: #c0d855;
  --hx-tag-virginia-bg: #fbf4e3;
  --hx-tag-virginia: #9a7a1c;
  --hx-tag-dark-bg: #e9ddcd;
  --hx-tag-dark: #6e5333;
  --hx-r-gallery: 14px;
  --hx-r-thumb: 0px;
  --hx-r-variant: 12px;
  --hx-r-variant-m: 10px;
  --hx-r-btn: 8px;
  --hx-r-qty: 8px;
  --hx-r-fbt: 12px;
  --hx-r-check: 6px;
  --hx-r-card: 16px;
  --hx-r-card-img: 12px;
  --hx-r-pill: 999px;
  --hx-r-service: 18px;
  --hx-r-icon: 12px;
  --hx-h-btn: 48px;
  --hx-h-btn-m: 44px;
  --hx-w-qty: 70px;
  --hx-w-qty-m: 60px;
  --hx-h-variant: 56px;
  --hx-h-variant-m: 51px;
  --hx-img-variant: 44px;
  --hx-pad-variant: 5px 8px 5px 5px;
  --hx-h-pill: 32px;
  --hx-pad-pill: 3px 9px;
  --hx-dot-size: 8px;
  --hx-shadow-service: 0 6px 20px 0 rgba(0, 0, 0, 0.035);
  --hx-t-btn: 0.2s;
  --hx-t-card: 0.15s;
  --hx-t-gallery: 0.25s;
  --hx-fs-note: 11.5px;
  --hx-fs-sub: 13px;
  --hx-fs-h2-m: 18px;
  --hx-fs-kpi-m: 28px;
  --hx-fs-kpi: 32px;
  --hx-r-module: 14px;}
#hxp :where(*), #hxp-lb :where(*), #hxp *::before, #hxp-lb *::before, #hxp *::after, #hxp-lb *::after{box-sizing:border-box}
#hxp{font-family:var(--hx-font-display)}
#hxp :where(img), #hxp-lb :where(img){max-width:100%;display:block}
#hxp :where(a), #hxp-lb :where(a){color:inherit;text-decoration:none}
#hxp :where(button), #hxp-lb :where(button), #hxp :where(select), #hxp-lb :where(select), #hxp :where(input), #hxp-lb :where(input){font:inherit;color:inherit}
#hxp :where(button), #hxp-lb :where(button){cursor:pointer}
#hxp :where(h1), #hxp-lb :where(h1), #hxp :where(h2), #hxp-lb :where(h2), #hxp :where(h3), #hxp-lb :where(h3), #hxp :where(h4), #hxp-lb :where(h4), #hxp :where(h5), #hxp-lb :where(h5), #hxp :where(h6), #hxp-lb :where(h6), #hxp :where(p), #hxp-lb :where(p), #hxp :where(dl), #hxp-lb :where(dl), #hxp :where(dd), #hxp-lb :where(dd), #hxp :where(ul), #hxp-lb :where(ul){margin:0}
#hxp-lb .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#hxp-lb :focus-visible{outline:2px solid var(--hx-ink);outline-offset:2px}
#hxp{color:var(--hx-text-delivery)}
#hxp .gal.stick{position:sticky;top:var(--hx-sticky-top)}
#hxp .gal{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
#hxp .gal.has-thumbs{grid-template-columns:calc((100% - 76px) / 4) minmax(0,1fr)}
#hxp .gal-track{grid-column:-2/-1;grid-row:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;aspect-ratio:1/1;border-radius:var(--hx-r-gallery);background:var(--hx-white);scroll-behavior:smooth}
#hxp .gal-track::-webkit-scrollbar{display:none}
#hxp .slide{flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:start}
#hxp .slide img, #hxp .gt-list img, #hxp .gt-nav button{background-color:var(--hx-white);filter:brightness(.945)}
#hxp .slide img{width:100%;height:100%;object-fit:contain}
#hxp .gal-thumbs{grid-column:1;grid-row:1;position:relative;min-height:0}
#hxp .gt-list{position:absolute;left:0;right:0;top:0;height:calc(100% - 46px);display:flex;flex-direction:column;gap:10px;overflow:hidden;scroll-behavior:smooth}
#hxp .gt-list::-webkit-scrollbar{display:none}
#hxp .gt-list button{flex:none;width:100%;aspect-ratio:1/1;padding:0;border:2px solid transparent;background:var(--hx-white);border-radius:var(--hx-r-gallery);overflow:hidden;}
#hxp .gt-list button, #hxp .gt-nav button{opacity:.5;transition:opacity var(--hx-t-card),border-color var(--hx-t-card),transform var(--hx-t-card)}
#hxp .gt-list>button{transform:translateY(var(--sh,0px))}
#hxp .gt-list button:hover, #hxp .gt-list button:focus-visible, #hxp .gt-nav button:hover, #hxp .gt-nav button:focus-visible{opacity:1}
#hxp .gt-list button.on{opacity:1;border-color:var(--hx-ink)}
#hxp .gt-list img{width:100%;height:100%;object-fit:cover}
#hxp .gt-nav{position:absolute;left:0;right:0;z-index:1;height:36px;display:flex}
#hxp .gt-nav[hidden]{display:none}
#hxp .gt-down{bottom:0}
#hxp .gt-nav button{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--hx-r-gallery);cursor:pointer}
#hxp .gt-down.is-end .chev{transform:rotate(225deg) translate(-2px,-2px)}
#hxp .rating .lnk{text-decoration:underline;text-underline-offset:3px}
#hxp .rating:hover .lnk{color:var(--hx-ink)}
#hxp .xc-teaser{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border:1px solid var(--hx-border);border-radius:var(--hx-r-variant);background:var(--hx-white);font-size:var(--hx-fs-info);line-height:20px;color:var(--hx-ink-2)}
#hxp .xc-teaser b{font-weight:700;color:var(--hx-ink)}
#hxp .xc-teaser .lnk{white-space:nowrap;text-decoration:underline;text-decoration-color:var(--hx-gold-line);text-decoration-thickness:2px;text-underline-offset:3px}
#hxp .sw.zoom img{transform:scale(2.6);transform-origin:50% 30%}
#hxp .chev{flex:none;width:8px;height:8px;border-right:1.5px solid var(--hx-ink);border-bottom:1.5px solid var(--hx-ink);transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--hx-t-card)}
#hxp .restock-card{background:var(--hx-white);border:1px solid var(--hx-border);border-radius:var(--hx-r-module);padding:14px 16px}
#hxp .restock-label{font-size:var(--hx-fs-sub);line-height:1.3;font-weight:700;color:var(--hx-ink-2);margin:0 0 10px}
#hxp .restock-form{display:flex;gap:6px;align-items:stretch}
#hxp .restock-input{flex:1 1 auto;min-width:0;padding:10px 12px;border:1px solid var(--hx-border);border-radius:var(--hx-r-variant-m);font-family:var(--hx-font-display);font-size:var(--hx-fs-info);background:var(--hx-white);color:var(--hx-ink-2);outline:none}
#hxp .restock-input:focus{border-color:var(--hx-gold);background:var(--hx-white)}
#hxp .restock-input::placeholder{color:var(--hx-muted-2)}
#hxp .restock-btn{flex:0 0 auto;padding:10px 18px;border:1.5px solid var(--hx-gold);background:var(--hx-gold);color:var(--hx-ink-2);border-radius:var(--hx-r-variant-m);font-family:var(--hx-font-display);font-size:var(--hx-fs-sub);font-weight:700;line-height:1.2;cursor:pointer}
#hxp .restock-hint{margin-top:8px;font-size:var(--hx-fs-pill);line-height:1.45;color:var(--hx-text-kit)}
#hxp .gal-main{grid-column:-2/-1;grid-row:1;position:relative;min-width:0}
#hxp .zoom{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
#hxp .gal-lupe{position:absolute;right:12px;bottom:12px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--hx-white);box-shadow:var(--hx-shadow-service);pointer-events:none}
#hxp .gal-lupe svg, #hxp-lb .lb-b svg{width:20px;height:20px;fill:none;stroke:var(--hx-text-kit);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
html.hxp-lb-open{overflow:hidden}
#hxp-lb .lb{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;background:var(--hx-white);font-family:var(--hx-font-display)}
#hxp-lb .lb[hidden]{display:none}
#hxp-lb .lb-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px var(--hx-pad-x) 10px 20px}
#hxp-lb .lb-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--hx-fs-info);line-height:20px;color:var(--hx-text-delivery)}
#hxp-lb .lb-tools{flex:none;display:flex;gap:8px}
#hxp-lb .lb-b{flex:none;width:var(--hx-h-btn-m);height:var(--hx-h-btn-m);display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--hx-border);border-radius:50%;background:var(--hx-white);transition:border-color var(--hx-t-card)}
#hxp-lb .lb-b:hover{border-color:var(--hx-border-hover)}
#hxp-lb .lb-b svg{stroke:var(--hx-ink)}
#hxp-lb .lb-b[aria-disabled="true"]{cursor:default;opacity:.4}
#hxp-lb .lb-stage{position:relative;flex:1;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:zoom-in}
#hxp-lb .lb-stage.is-zoomed{cursor:grab}
#hxp-lb .lb-img{max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1));transition:transform var(--hx-t-gallery)}
#hxp-lb .lb-stage.is-dragging .lb-img{transition:none}
#hxp-lb .lb-prev, #hxp-lb .lb-next{position:absolute;top:50%;margin-top:-22px;z-index:1}
#hxp-lb .lb-prev{left:20px}
#hxp-lb .lb-next{right:20px}
#hxp-lb .lb-thumbs{flex:none;display:flex;gap:8px;justify-content:safe center;padding:10px var(--hx-pad-x) 16px;overflow-x:auto;scrollbar-width:none}
#hxp-lb .lb-thumbs button{flex:none;width:56px;height:56px;padding:0;border:2px solid transparent;border-radius:var(--hx-r-variant-m);overflow:hidden;background:var(--hx-white);opacity:.5;transition:opacity var(--hx-t-card),border-color var(--hx-t-card)}
#hxp-lb .lb-thumbs button:hover, #hxp-lb .lb-thumbs button:focus-visible{opacity:1}
#hxp-lb .lb-thumbs button.on{opacity:1;border-color:var(--hx-ink)}
#hxp-lb .lb-thumbs img{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){
  #hxp-lb .lb-img, #hxp-lb .lb-thumbs button{transition:none}
}
@media (max-width:767px){
  #hxp .gal.stick{position:static}
  #hxp .gal, #hxp .gal.has-thumbs{display:block}
  #hxp .gal-track{aspect-ratio:4/3}
  #hxp .gal-thumbs{position:static;margin-top:8px}
  #hxp .gt-list{position:static;height:auto!important;flex-direction:row;overflow-x:auto}
  #hxp .gt-list{gap:8px}
  #hxp .gt-list button{flex:0 0 56px;width:56px;height:56px;border-radius:var(--hx-r-variant-m)}
  #hxp .gt-nav, #hxp .gt-nav[hidden]{display:none}
  #hxp .restock-form{flex-wrap:wrap}
  #hxp .restock-input, #hxp .restock-btn{width:100%}
  #hxp-lb .lb-top{padding-left:var(--hx-pad-x)}
  #hxp-lb .lb-prev{left:var(--hx-pad-x)}
  #hxp-lb .lb-next{right:var(--hx-pad-x)}
}
#hxp{display:block;width:100%;margin:0;padding:0 0 0;font-size:var(--hx-fs-body);line-height:var(--hx-lh-body);background:var(--hx-white);text-align:left}
#hxp-lb{font-family:var(--hx-font-display)}
#hxp-lb .lb{z-index:2147483000}
#hxp :where(button,[type=button],[type=submit],select,input,textarea), #hxp-lb :where(button,[type=button]){margin:0;box-shadow:none;text-transform:none;letter-spacing:normal;text-decoration:none;min-height:0;font-family:inherit}
#hxp :where(button,[type=button],[type=submit]), #hxp-lb :where(button,[type=button]){background:none;border:0;padding:0;border-radius:0;line-height:inherit;font-weight:inherit;font-size:inherit;color:inherit}
#hxp-lb :where(button,[type=button]):where(:hover,:focus){background-color:transparent;color:inherit;text-decoration:none}
#hxp :where(img){height:auto;border:0;border-radius:0;box-shadow:none}
#hxp :where(ul,ol){padding:0}
#hxp :where(h1,h2,h3,h4,h5,h6){font-family:var(--hx-font-display);letter-spacing:normal;text-transform:none}
#hxp :where(table){border-collapse:collapse}
#hxp :where(dt){font-weight:inherit}
#hxp :where(dd){margin:0}
#hxp :where(figure){margin:0}
#hxp .hxm-restock-msg{display:none;margin-top:10px;font-size:var(--hx-fs-sub);line-height:18px;color:var(--hx-ink-2)}
#hxp .hxm-restock-msg.success, #hxp .hxm-restock-msg.error, #hxp .hxm-restock-msg.info{display:block;font-weight:600}
#hxp .restock-btn[disabled]{opacity:.55;cursor:default}
#hxp .restock-btn{color:var(--hx-ink-2)!important}
#hxp .restock-btn:hover{background:var(--hx-gold);border-color:var(--hx-gold);color:var(--hx-ink-2)}
#hxp .hxc{--sec:var(--hx-text-kit);--mut:var(--hx-text-kit)}
#hxp .hxc .hxc-eye{color:var(--hx-ink-2)}
html.hxp-sc-lock{overflow:hidden}
#hxp .brandrow{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
#hxp .brandrow .brand{align-self:center}
#hxp .offer-cd{display:inline-flex;align-items:center;height:18px;padding:0 9px;border:1px solid #e7c690;border-radius:999px;background:#fff4e0;color:#8a5a00;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
html.hxp-sc-lock #cfw-side-cart{overscroll-behavior:contain}
#hxp .bitems{display:flex;flex-direction:column;gap:var(--hx-space-variant-gap);margin:0;padding:0;list-style:none}
#hxp .bitem{display:flex;align-items:center;gap:12px;padding:6px 14px 6px 12px;border:1px solid var(--hx-border);border-radius:var(--hx-r-fbt);background:var(--hx-white);font-size:var(--hx-fs-info);line-height:18px;color:var(--hx-ink-2)}
#hxp .bitem img, #hxp .bitem .bimg0{width:var(--hx-img-variant);height:var(--hx-img-variant);object-fit:contain;flex:none}
#hxp .bitem .bn{flex:1;min-width:0}
#hxp .bitem .bn b{font-weight:600}
#hxp .bitem .bn a{color:inherit;text-decoration:underline;text-underline-offset:2px}
#hxp .bitem .bp{font-weight:500;color:var(--hx-text-kit);white-space:nowrap}
#hxp .gt-list img{object-fit:contain}
/* ---- LIVE-Block (p01_live.css) ---- */
/* LIVE-Block (01.11.2026): Ergaenzungen fuer Live-Bausteine ohne Konzeptvorbild bzw. mit anderer Mockup-Steuerung */
/* Lager: das Mockup blendete „ausverkauft“ per Simulationsschalter ein; live steht genau eine Fassung im Markup */
#hxn .lager .lg-nein{display:inline}
#hxn .lager.aus b{color:var(--hxn-ink)}
/* v14-Galerie als linke Spalte der Heldenzeile (Konzept .hero>.gal); Sticky wie v14 */
#hxn .hero>.gal{min-width:0}
/* M06 mit weniger gepflegten Werten: Kacheln fuellen die Breite */
#hxn .mb6.mb6-n3{grid-template-columns:repeat(3,minmax(0,1fr))}
#hxn .mb6.mb6-n2{grid-template-columns:repeat(2,minmax(0,1fr))}
#hxn .mb6.mb6-n1{grid-template-columns:minmax(0,1fr)}
#hxn .mb6-c dd a{text-decoration:none}
@media (max-width:767px){#hxn .mb6.mb6-n3{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Ausfuehrung (XKAH): Haken der gewaehlten Option; Option ohne Bild/Haken beginnt in Spalte 1 */
#hxn .au-ok{display:inline-flex; color:var(--hxn-ink)}
#hxn .au-ok .ic{width:18px; height:18px; stroke-width:2.2}
#hxn .au>.au-t:first-child{grid-column:1 / 3}
/* Auswahl-Abstaende (mehrere Achsen, Karten-Rest, Bundle-Artikel) */
#hxn .m-sorten{display:flex; flex-direction:column; gap:14px}
#hxn .ax-karten{display:flex; flex-direction:column; gap:8px}
#hxn .so-rest{margin-top:0}
#hxn .so-alle .ic{transition:transform .15s}
#hxn .so-alle[aria-expanded="true"] .ic{transform:rotate(180deg)}
#hxn .sk-leer{display:block; width:44px; height:44px; border-radius:6px; background:var(--hxn-surface)}
#hxn .hxp-va .chip{cursor:pointer}
#hxn .hxp-va .chip.na{border-style:dashed; color:#4b5157}
/* Warenkorb-Zustaende von p01.js (data-state) im Konzeptbild (.busy/.ok) */
#hxn .hxp-cta[data-state="busy"]{background:#3b4048; border-color:#3b4048}
#hxn .hxp-cta[data-state="done"]{background:#1d5c34; border-color:#1d5c34}
#hxn .hxp-cta[aria-disabled="true"]:not([data-state="busy"]){opacity:.55; cursor:default}
#hxn .atc-msg:empty{display:none}
#hxn .atc-msg{font-size:14px; line-height:20px; color:#8a1c1c}
#hxn .atc-msg b{font-weight:700}
#hxn .pk-kauf{flex-wrap:wrap}
#hxn .pk-kauf .atc-msg{flex:1 0 100%}
#hxn .pk-p del{margin-left:6px; font-size:13px; color:var(--hxn-mut)}
#hxn .pg-z del{font-size:15px; color:var(--hxn-mut)}
/* Restock (v14-Klassen fuer hxm-restock) und K-21-Alternativen in der Konzeptspalte */
#hxn .restock{margin:0}
#hxn .restock-btn,#hxn .restock-input{border-radius:var(--hxn-r-btn)}
/* Steckbrief/Daten: Lieferumfang als Etiketten (8 px, wie Konzept .tag) */
#hxn .sb-lu{margin-top:16px}
#hxn .sb-lu-h{font-size:14px; line-height:20px; font-weight:700; color:var(--hxn-ink); margin-bottom:8px}
#hxn .sb-lu .tags{display:flex; flex-wrap:wrap; gap:8px}
#hxn .sb .ac-zeile{display:flex; flex-wrap:wrap; gap:6px}
/* Bewertungen: JetReviews-Formular unter „Bewertung schreiben“ */
#hxn .jr-form{margin:16px 0 0}
#hxn .bw-mehr span{font-weight:inherit}
/* XKAH-Kostenrechnung (hxm-xkah-calc) zwischen Heldenzeile und Abschnitten */
#hxn .xcalc-w{margin-bottom:40px}
/* Kaufleiste mobil (Konzept-Kaufleiste; live mit Grundpreis unter dem Preis) */
#hxp .kleiste{position:fixed; left:0; right:0; bottom:0; z-index:9990; display:flex; align-items:center; gap:12px; min-height:64px; padding:8px 14px calc(8px + env(safe-area-inset-bottom,0px));
  background:#fff; border-top:1px solid #dfe2e6; box-shadow:0 -4px 16px rgba(0,0,0,.06); transform:translateY(105%); transition:transform .32s ease; font-family:var(--hxn-f)}
#hxp .kleiste.on{transform:none}
#hxp .kleiste[hidden]{display:none}
#hxp .kleiste .kl-img{width:44px; height:44px; object-fit:contain; flex:none; border-radius:6px; background:#f7f9fa}
#hxp .kleiste .kl-p{display:flex; flex-direction:column; margin:0; min-width:0; flex:1}
#hxp .kleiste .kl-preis{font-size:18px; line-height:22px; font-weight:700; color:#1d2127}
#hxp .kleiste .kl-menge{font-size:12px; line-height:15px; color:#6b7178}
#hxp .kleiste .kl-btn{flex:none; height:46px; padding:0 18px; margin:0; border:0; border-radius:8px; background:#1d2127; color:#fff; font:600 15px/20px var(--hxn-f); text-transform:none; letter-spacing:normal; cursor:pointer}
#hxp .kleiste .kl-btn[data-state="busy"]{background:#3b4048}
#hxp .kleiste .kl-btn[data-state="done"]{background:#1d5c34}
#hxp .kleiste .kl-msg{position:absolute; left:14px; right:14px; bottom:100%; margin:0 0 6px; padding:8px 12px; border-radius:8px; background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.12); font-size:13px; line-height:18px}
#hxp .kleiste .kl-msg:empty{display:none}
body.hxp-kl-an{padding-bottom:64px}
@media (prefers-reduced-motion:reduce){#hxp .kleiste{transition:none}}
@media (min-width:768px){#hxp .kleiste{display:none!important} body.hxp-kl-an{padding-bottom:0}}
/* Beschreibung: Zwischenueberschriften stehen live nach v14-Regel R5 als h4 (h2 der Pflege -> h3, h3 -> h4); Optik wie Konzept .prose h3 */
#hxn .prose h4,#hxn .prose h5,#hxn .prose h6{margin:28px 0 8px; padding:0; font-family:var(--hxn-f); font-size:19px; line-height:25px; font-weight:700; color:var(--hxn-ink); letter-spacing:-.005em; text-transform:none}
#hxn .prose h4:first-child,#hxn .prose h5:first-child,#hxn .prose h6:first-child{margin-top:0}
/* Aehnliche Produkte mobil: Einrasten am Innenabstand, sonst steht die erste Karte 14 px links ausserhalb des Rasters */
@media (max-width:767px){#hxn .pk-reihe{scroll-padding-inline:var(--hxn-pad)}}