/*
Theme Name: SBSH Haushaltsgeräte
Theme URI: https://sbsh.at
Author: SBSH Haushaltsgeräte Handel
Description: Schaufenster-Theme für den SBSH-Gerätekatalog (WooCommerce im Katalog-Modus, Anfrage statt Warenkorb).
Version: 1.2.2
Requires at least: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: sbsh
*/
@font-face{font-family:"Epilogue"; font-style:normal; font-weight:500 800; font-display:swap; src:url(assets/fonts/epilogue-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Epilogue"; font-style:normal; font-weight:500 800; font-display:swap; src:url(assets/fonts/epilogue-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Public Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url(assets/fonts/public-sans-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Public Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url(assets/fonts/public-sans-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --ink:#141B1F; --ink-2:#3C4A52; --muted:#6B7B84;
  --ground:#F7F7F4; --surface:#FFFFFF; --surface-2:#EDEEE9;
  --line:#DEDFD9; --line-2:#C6C8C0;
  --brand:#1164B4; --brand-2:#0D4F8F; --brand-soft:#E3EEF9;
  --tel:#1034A6; --tel-2:#0B2680; --violett:#6F00FF; --holo:#8FE9FF;
  --gelb:#FFD60A; --gelb-2:#FFE44D;
  --sale:#E14434; --sale-soft:#FDE6E3;
  --neu:#17914F; --neu-ink:#fff; --ser:#E08A00; --ser-ink:#fff;
  --topbar:#0F1B3D; --topbar-ink:#DDE2E4; --topbar-ic:#8FE9FF;
  --hero-bg:#4A2BD6; --hero-glow:rgba(143,233,255,.30);
  --header-bg:#FFFFFF; --footer-bg:#0F1B3D;
  --btn-ink:#fff; --karte-bg:#FFFFFF; --bild-bg:#FFFFFF;
  --skarte:#1164B4; --skarte-hell:#6F00FF;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:"Public Sans",system-ui,-apple-system,sans-serif; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; padding-bottom:74px;
  }
img{max-width:100%; display:block}
h1,h2,h3{font-family:Epilogue,system-ui,sans-serif; margin:0; line-height:1.12;
  text-wrap:balance; letter-spacing:-.02em}
p{margin:0}
a{color:inherit; text-decoration:none}
.wrap{max-width:1180px; margin:0 auto; padding:0 clamp(16px,3vw,28px)}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px}

/* ---- Fortschrittsleiste ---- */
.progress{position:fixed; top:0; left:0; height:3px; width:0%; z-index:99;
  background:linear-gradient(90deg,var(--gelb),var(--sale)); transition:width .08s linear}

/* ---- Hero-Ladesequenz ---- */
@keyframes auf{from{opacity:0; transform:translateY(26px) scale(.985); filter:blur(6px)}
  to{opacity:1; transform:none; filter:blur(0)}}
html.js-rev .hero .seq{animation:auf .72s cubic-bezier(.16,.84,.28,1) backwards}
html.js-rev .hero .seq-1{animation-delay:3.1s}
html.js-rev .hero .seq-2{animation-delay:3.3s}
html.js-rev .hero .seq-3{animation-delay:3.6s}
html.js-rev .hero .seq-4{animation-delay:3.85s}
html.js-rev .gutschein{animation:auf .8s cubic-bezier(.16,.84,.28,1) 2.5s backwards}

@keyframes wandern{0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-6%,4%,0) scale(1.14)} 100%{transform:translate3d(0,0,0) scale(1)}}
.hero::after{animation:wandern 19s ease-in-out infinite}

@keyframes puls{0%,100%{opacity:1} 50%{opacity:.66}}
.gutschein .code::after{content:""; display:inline-block; width:9px; height:9px; margin-left:11px;
  border-radius:50%; background:var(--gelb); vertical-align:middle; animation:puls 1.9s ease-in-out infinite}

/* ---- Marken-Laufband ---- */
.marken{background:var(--surface-2); border-bottom:1px solid var(--line); overflow:hidden;
  padding:15px 0; position:relative}
.marken::before,.marken::after{content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2;
  pointer-events:none}
.marken::before{left:0; background:linear-gradient(90deg,var(--surface-2),transparent)}
.marken::after{right:0; background:linear-gradient(270deg,var(--surface-2),transparent)}
.band{display:flex; gap:52px; width:max-content; animation:laufen 26s linear infinite}
.marken:hover .band{animation-play-state:paused}
@keyframes laufen{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.band span{font-family:Epilogue,sans-serif; font-size:19px; font-weight:700; letter-spacing:.07em;
  color:var(--muted); white-space:nowrap; transition:color .2s}
.band span:hover{color:var(--brand)}

/* ---- Zaehler ---- */
.zahlen{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:14px}
.zahl-k{background:var(--surface); border:1px solid var(--line); padding:24px 20px; text-align:center}
.zahl-k b{display:block; font-family:Epilogue,sans-serif; font-size:clamp(30px,4vw,42px); font-weight:800;
  color:var(--brand); font-variant-numeric:tabular-nums; line-height:1}
.zahl-k span{display:block; font-size:14px; color:var(--muted); margin-top:7px}

/* ---- Reveals ---- */
/* Verstecken NUR wenn JS laeuft - ohne JS bleibt alles sichtbar */
html.js-rev .rev{opacity:0; transform:translateY(30px) scale(.97);
  transition:opacity .5s cubic-bezier(.16,.84,.28,1), transform .58s cubic-bezier(.16,.84,.28,1)}
html.js-rev .rev.an{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rev{opacity:1 !important; transform:none !important; transition:none}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}

/* ---- Kopfleisten ---- */
.topbar{background:var(--topbar); color:var(--topbar-ink); font-size:13.5px; transition:background-color .35s}
.topbar .wrap{display:flex; flex-wrap:wrap; gap:6px 26px; align-items:center; justify-content:center;
  padding-top:9px; padding-bottom:9px}
.topbar span{display:flex; align-items:center; gap:7px; white-space:nowrap}
.topbar svg{width:14px; height:14px; stroke:var(--topbar-ic); stroke-width:1.8; fill:none}
header{background:var(--header-bg); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
  transition:background-color .35s, border-color .35s}
.kopf{display:flex; align-items:center; gap:clamp(14px,3vw,34px); padding-top:14px; padding-bottom:14px}
.logo-w{background:#fff; padding:5px 9px; display:flex; align-items:center}
.logo-w img{height:44px; width:auto}
.kopf-akt{display:flex; align-items:center; gap:18px}
.kbtn{display:flex; align-items:center; gap:9px; font-size:14px; font-weight:500; cursor:pointer;
  background:none; border:0; font-family:inherit; color:var(--ink); padding:0}
.kbtn svg{width:21px; height:21px; stroke:var(--ink); stroke-width:1.7; fill:none}
nav.haupt{border-top:1px solid var(--line)}
nav.haupt .wrap{display:flex; gap:clamp(14px,2.6vw,32px); overflow-x:auto; scrollbar-width:none;
  padding-top:0; padding-bottom:0}
nav.haupt .wrap::-webkit-scrollbar{display:none}
nav.haupt a{font-family:Epilogue,sans-serif; font-weight:600; font-size:14.5px; padding:13px 0;
  white-space:nowrap; border-bottom:3px solid transparent; color:var(--ink-2); transition:color .18s}
nav.haupt a:hover,nav.haupt a.an{color:var(--brand); border-bottom-color:var(--brand)}

/* ---- Hero mit Schnittkante ---- */
.hero{background:var(--hero-bg); color:#fff; position:relative; overflow:hidden;
  transition:background-color .35s}
.hero::after{content:""; position:absolute; inset:0;
  background:radial-gradient(115% 78% at 84% 18%, var(--hero-glow), transparent 62%); pointer-events:none}
.hero .wrap{position:relative; z-index:1; display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(24px,4vw,56px); align-items:center;
  padding-top:clamp(38px,5vw,58px); padding-bottom:clamp(38px,5vw,58px)}
.hero-eyebrow{font-family:Epilogue,sans-serif; font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brand); margin-bottom:15px}
.hero-eyebrow{color:#FFD60A}
.hero h1{font-size:clamp(31px,4.6vw,50px); font-weight:800; margin-bottom:16px}
.hero h1 em{font-style:normal; color:var(--brand)}
.hero h1 em{color:#FFD60A}
.hero p.sub{font-size:clamp(16px,1.7vw,18.5px); color:rgba(255,255,255,.88); max-width:46ch; margin-bottom:26px}
.hero-akt{display:flex; flex-wrap:wrap; gap:13px; align-items:center}
.btn{font-family:Epilogue,sans-serif; font-weight:700; font-size:15px; padding:14px 26px;
  border:2px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:9px;
  transition:transform .18s, background-color .2s, border-color .2s}
.btn-p{background:var(--brand); color:var(--btn-ink); border-color:var(--brand)}
.btn-p{position:relative; overflow:hidden}
.btn-p::before{content:""; position:absolute; top:0; left:-120%; width:55%; height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent); transition:left .55s ease}
.btn-p:hover::before{left:135%}
.btn-p:hover{background:var(--brand-2); border-color:var(--brand-2); transform:translateY(-3px)}
.btn-s{background:transparent; color:var(--ink); border-color:var(--line-2)}
.hero .btn-s{color:#fff; border-color:rgba(255,255,255,.55)}
.hero .btn-s:hover{border-color:#fff; background:rgba(255,255,255,.12)}
/* bunt: Hero-Grund IST die Markenfarbe - Primaerbutton braucht dort Kontrast */
.hero .btn-p{background:#FFD60A; color:#141B1F; border-color:#FFD60A}
.hero .btn-p:hover{background:#FFE44D; border-color:#FFE44D}
.btn-s:hover{border-color:var(--ink)}
.gutschein{background:rgba(255,255,255,.055); border:1px dashed var(--line-2); padding:19px 22px;
  display:flex; flex-direction:column; gap:7px}
.gutschein{border-color:rgba(255,255,255,.42)}
.gutschein .g-top{font-family:Epilogue,sans-serif; font-size:14px; font-weight:600; color:rgba(255,255,255,.82)}
.gutschein .code{font-family:Epilogue,sans-serif; font-size:clamp(26px,3.4vw,34px); font-weight:800;
  letter-spacing:.03em; color:var(--brand)}
.gutschein .code{color:#FFD60A}
.gutschein .g-sub{font-size:13.5px; color:rgba(255,255,255,.78)}
/* ---- Vertrauensband ---- */
.trust{background:var(--surface); border-bottom:1px solid var(--line); transition:background-color .35s}
.trust .wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); padding-top:0; padding-bottom:0}
.t-item{display:flex; gap:13px; align-items:flex-start; padding:20px 22px 20px 0}
.t-item svg{width:23px; height:23px; stroke:var(--brand); stroke-width:1.7; fill:none; flex:none; margin-top:2px}
.t-item b{display:block; font-family:Epilogue,sans-serif; font-size:14.5px; font-weight:700}
.t-item span{font-size:13.5px; color:var(--muted); line-height:1.45}

section.blk{padding-top:clamp(40px,5vw,60px); padding-bottom:clamp(40px,5vw,60px)}
.blk-kopf{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:26px}
.blk-kopf h2{font-size:clamp(23px,2.9vw,31px); font-weight:700}
.blk-kopf p{font-size:15.5px; color:var(--muted); margin-top:6px}
.mehr{font-family:Epilogue,sans-serif; font-weight:600; font-size:14.5px; color:var(--brand);
  display:inline-flex; align-items:center; gap:6px; border-bottom:2px solid var(--brand); padding-bottom:2px}
.mehr svg{transition:transform .2s}
.mehr:hover svg{transform:translateX(4px)}

.kats{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:12px}
.kat{background:var(--surface); border:1px solid var(--line); padding:24px 16px; display:flex;
  flex-direction:column; align-items:center; gap:12px; text-align:center;
  transition:border-color .2s, transform .2s, background-color .35s}
.kat:hover{border-color:var(--brand); transform:translateY(-3px)}
.kat svg{width:34px; height:34px; stroke:var(--brand); stroke-width:1.4; fill:none;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .25s}
.kat:hover svg{transform:scale(1.09)}
.kat span{font-family:Epilogue,sans-serif; font-weight:600; font-size:14.5px}

/* ---- Produktkarten ---- */
.raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(246px,1fr)); gap:16px}
.karte{background:var(--karte-bg); border:1px solid var(--line); display:flex; flex-direction:column;
  transition:border-color .2s, box-shadow .25s, transform .2s, background-color .35s}
.karte:hover{border-color:var(--brand); transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,.22)}
.bild{position:relative; aspect-ratio:1/1; background:var(--bild-bg); border-bottom:1px solid var(--line);
  overflow:hidden}
.bild > img{position:absolute; inset:18px; width:calc(100% - 36px); height:calc(100% - 36px);
  object-fit:contain; mix-blend-mode:multiply; transition:opacity .3s ease, transform .4s ease}
.bild .b2{opacity:0}
.karte:hover .b1{opacity:0; transform:scale(1.03)}
.karte:hover .b2{opacity:1; transform:scale(1.03)}
.zust{position:absolute; top:0; left:0; z-index:2; font-family:Epilogue,sans-serif; font-size:10.5px;
  font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:5px 11px}
.zust.neu{background:var(--neu); color:var(--neu-ink)}
.zust.ser{background:var(--ser); color:var(--ser-ink)}
.kinhalt{padding:15px 16px 17px; display:flex; flex-direction:column; gap:8px; flex:1}
.marke{font-family:Epilogue,sans-serif; font-size:11.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--brand)}
.marke span{color:var(--muted); font-weight:500; letter-spacing:.03em}
.karte h3{font-size:15.5px; font-weight:600; line-height:1.3}
.gar{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-2)}
.gar svg{width:15px; height:15px; flex:none; fill:var(--brand-soft); stroke:var(--brand); stroke-width:1.2}
.gar svg .ck{stroke:var(--brand); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; fill:none}
.preis{display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:6px}
.jetzt{font-family:Epilogue,sans-serif; font-size:22px; font-weight:800; font-variant-numeric:tabular-nums}
.jetzt.sale{color:var(--sale)}
.alt{font-size:14px; color:var(--muted); text-decoration:line-through; font-variant-numeric:tabular-nums}
.minus{background:var(--sale-soft); color:var(--sale); font-family:Epilogue,sans-serif; font-size:11.5px;
  font-weight:700; padding:2px 7px}
.lager{font-size:12.5px; color:var(--brand); display:flex; align-items:center; gap:6px}
.lager::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--brand)}
.btn-k{font-family:Epilogue,sans-serif; font-weight:700; font-size:14px; padding:11px; background:var(--brand);
  color:var(--btn-ink); border:0; cursor:pointer; margin-top:4px; width:100%; transition:background-color .2s}
.btn-k:hover{background:var(--brand-2)}

/* ---- B-Ware ---- */
.bware{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background-color .35s}
.bware .wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:clamp(22px,3.4vw,44px); align-items:start; padding-top:clamp(40px,5vw,56px); padding-bottom:clamp(40px,5vw,56px)}
.bware h2{font-size:clamp(23px,2.9vw,31px); font-weight:700; margin-bottom:13px}
.bware .intro{color:var(--ink-2); font-size:16.5px; max-width:44ch}
.schritt{display:grid; grid-template-columns:38px 1fr; gap:15px; padding:15px 0; border-bottom:1px solid var(--line)}
.schritt:last-child{border-bottom:0}
.s-num{font-family:Epilogue,sans-serif; font-weight:800; font-size:15px; color:var(--brand);
  background:var(--brand-soft); width:38px; height:38px; display:flex; align-items:center; justify-content:center}
.schritt b{display:block; font-family:Epilogue,sans-serif; font-size:15.5px; font-weight:700; margin-bottom:3px}
.schritt span{font-size:14.5px; color:var(--muted); line-height:1.5}

/* ---- Service ---- */
.service{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:14px}
.s-karte{background:var(--skarte); color:var(--ink); padding:26px 24px; display:flex; flex-direction:column;
  gap:11px; border:1px solid var(--line); transition:background-color .35s, transform .2s, border-color .2s}
.s-karte:hover{transform:translateY(-3px); border-color:var(--brand)}
.s-karte.hell{background:var(--skarte-hell)}
.s-karte,.s-karte.hell{color:#fff; border-color:transparent}
.s-karte p{color:rgba(255,255,255,.85)}
.s-karte svg{width:27px; height:27px; stroke:var(--brand); stroke-width:1.6; fill:none}
.s-karte svg{stroke:#fff}
.s-karte h3{font-size:19px; font-weight:700}
.s-karte p{font-size:14.5px; color:var(--muted); line-height:1.5}
.s-karte a{font-family:Epilogue,sans-serif; font-weight:700; font-size:14px; color:var(--brand);
  border-bottom:2px solid currentColor; padding-bottom:2px; align-self:flex-start; margin-top:3px}
.s-karte a{color:#fff}

/* ---- Fuss ---- */
footer{background:var(--footer-bg); color:var(--ink-2); font-size:14.5px; transition:background-color .35s}
footer{color:#B7C0C5}
footer .wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(24px,3.4vw,44px); padding-top:46px; padding-bottom:34px}
footer h4{font-family:Epilogue,sans-serif; font-size:13px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brand); margin:0 0 14px}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
footer a{transition:color .18s}
footer a:hover{color:var(--brand)}
footer .adr{line-height:1.65}
footer .adr strong{color:var(--ink); font-family:Epilogue,sans-serif}
footer .adr strong{color:#fff}
.fuss-unten{border-top:1px solid var(--line)}
.fuss-unten .wrap{display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  padding-top:17px; padding-bottom:17px; font-size:13.5px; color:var(--muted)}

@media (max-width:860px){ .hero .wrap{grid-template-columns:1fr} .kopf{flex-wrap:wrap}
  }
@media (max-width:560px){
  .raster{grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:11px}
  .kinhalt{padding:12px 12px 14px} .karte h3{font-size:14px} .jetzt{font-size:18.5px}
  .btn-k{font-size:13px; padding:10px} .logo-w img{height:36px} .t-item{padding-right:0}
}

/* ---- Schaufenster-Umbau ---- */
.kopf{justify-content:space-between}
.kbtn-tel,.kbtn-wa{text-decoration:none; padding:10px 16px; border-radius:4px; font-family:Epilogue,sans-serif; font-weight:700; font-size:14px; transition:background-color .2s, transform .15s}
.kbtn-tel{background:var(--tel); color:#fff} .kbtn-tel:hover{background:var(--tel-2)}
.kbtn-wa{background:#25D366; color:#fff} .kbtn-wa:hover{background:#1FB958}
.kbtn-tel svg,.kbtn-wa svg{width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none}
.kbtn-tel:active,.kbtn-wa:active{transform:scale(.97)}
.filter{display:flex; flex-wrap:wrap; gap:10px 18px; margin-bottom:18px; align-items:center}
.f-gruppe{display:flex; flex-wrap:wrap; gap:7px}
.chip{font-family:Epilogue,sans-serif; font-size:13px; font-weight:600; padding:8px 14px; border:1.5px solid var(--line-2); background:var(--surface); color:var(--ink); cursor:pointer; border-radius:999px; transition:all .15s}
.chip:hover{border-color:var(--brand); color:var(--brand)}
.chip.an{background:var(--brand); border-color:var(--brand); color:#fff}
.chip-neu.an{background:var(--neu); border-color:var(--neu)} .chip-ser.an{background:var(--ser); border-color:var(--ser)}
.mk{position:absolute; top:10px; right:10px; z-index:2; font-family:Epilogue,sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.1em; background:#fff; color:var(--ink); border:1px solid var(--line); padding:4px 8px}
.status{font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:7px}
.status::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px rgba(0,0,0,.05)}
.status.verf,.status.lief{color:var(--neu)} .status.res{color:var(--ser)} .status.verk{color:var(--sale)}
.k-akt{display:flex; gap:8px; margin-top:4px}
.k-akt .btn-k{margin-top:0; flex:1}
.btn-k2{background:var(--surface); color:var(--brand); border:1.5px solid var(--brand)} .btn-k2:hover{background:var(--brand-soft)}
.btn-wa{flex:0 0 46px; display:flex; align-items:center; justify-content:center; background:#25D366; color:#fff; transition:background-color .2s}
.btn-wa:hover{background:#1FB958} .btn-wa svg{width:22px; height:22px; stroke:currentColor; stroke-width:2; fill:none}
.karte.verkauft{opacity:.62} .karte.verkauft .bild > img{filter:grayscale(.85)} .karte.verkauft .jetzt{color:var(--muted); text-decoration:line-through}
.karte.verkauft:hover{opacity:.9}
.bewertungen{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.bewertungen .wrap{display:grid; grid-template-columns:minmax(220px,1fr) 2.4fr; gap:36px; align-items:start}
.bw-google{font-family:Epilogue,sans-serif; font-size:22px; font-weight:800; margin-bottom:10px}
.bw-google .g1{color:#4285F4} .bw-google .g2{color:#EA4335} .bw-google .g3{color:#FBBC05} .bw-google .g4{color:#34A853}
.bw-schnitt{display:flex; align-items:center; gap:12px; margin-bottom:6px}
.bw-schnitt b{font-family:Epilogue,sans-serif; font-size:44px; font-weight:800; line-height:1}
.bw-sterne{display:flex; gap:2px} .bw-sterne svg{width:16px; height:16px; fill:#FBBC05; stroke:none} .bw-sterne.gross svg{width:24px; height:24px}
.bw-anzahl{font-size:13.5px; color:var(--muted); margin-bottom:14px}
.bw-raster{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px}
.bw-karte{background:var(--ground); border:1px solid var(--line); padding:16px 18px; display:flex; flex-direction:column; gap:10px}
.bw-kopf{display:flex; align-items:center; gap:10px} .bw-kopf b{display:block; font-size:14px} .bw-kopf span{font-size:12px; color:var(--muted)}
.bw-ini{width:36px; height:36px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px}
.bw-text{font-size:14px; line-height:1.55}
.ph{position:relative} .bw-text.ph{color:var(--muted); font-style:italic}
.zahl-hinweis b{color:#fff; font-weight:600}
.mobil-leiste{display:none}
@media (max-width:860px){
  .kopf-akt{gap:8px} .kbtn-tel span,.kbtn-mail span{display:none} .kbtn-tel,.kbtn-wa,.kbtn-mail{padding:10px 12px}
  .bewertungen .wrap{grid-template-columns:1fr}
  body{padding-bottom:64px}
  .mobil-leiste{display:grid; grid-template-columns:1fr 1fr; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:30; padding:9px 10px calc(9px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-top:1px solid var(--line)}
  .mobil-leiste a{display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; font-family:Epilogue,sans-serif; font-weight:700; font-size:15px; text-decoration:none; background:var(--tel); color:#fff; border-radius:4px}
  .mobil-leiste a.wa{background:#25D366; color:#fff}
  .mobil-leiste svg{width:19px; height:19px; stroke:currentColor; stroke-width:2; fill:none}
}

/* =====================================================================
   Ergänzungen für WordPress / WooCommerce (nicht im Entwurf enthalten)
   ===================================================================== */

/* ---- Allgemein ---- */
.screen-reader-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}
.hinweis{background:var(--brand-soft); border-left:4px solid var(--brand); padding:14px 18px; margin:18px 0; font-size:15px}
.hinweis.ok{background:#E3F5EA; border-color:var(--neu)} .hinweis.fehler{background:var(--sale-soft); border-color:var(--sale)}
.btn{display:inline-flex; align-items:center; gap:9px; font-family:Epilogue,sans-serif; font-weight:700; font-size:15px;
  padding:13px 22px; border:2px solid transparent; cursor:pointer; transition:background-color .2s, transform .15s; text-decoration:none}
.btn-p{background:var(--brand); color:#fff; border-color:var(--brand)} .btn-p:hover{background:var(--brand-2); border-color:var(--brand-2)}
.btn-s{background:transparent; color:var(--brand); border-color:var(--brand)} .btn-s:hover{background:var(--brand-soft)}
.btn-gelb{background:var(--gelb); color:var(--ink); border-color:var(--gelb)} .btn-gelb:hover{background:var(--gelb-2); border-color:var(--gelb-2)}
.btn-tel{background:var(--tel); color:#fff; border-color:var(--tel)} .btn-tel:hover{background:var(--tel-2); border-color:var(--tel-2)}
.btn-wa-gross{background:#25D366; color:#fff; border-color:#25D366} .btn-wa-gross:hover{background:#1FB958; border-color:#1FB958}
.btn svg{width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none}
.karte a.btn-k{display:flex; align-items:center; justify-content:center; text-align:center; text-decoration:none}
.bild a.bild-link{position:absolute; inset:0; z-index:1}
nav.haupt a.an{color:var(--brand); border-bottom-color:var(--brand)}

/* ---- Seitenkopf für Unterseiten / Archiv ---- */
.seitenkopf{background:var(--hero-bg); color:#fff; padding:clamp(28px,4vw,44px) 0}
.seitenkopf h1{font-size:clamp(26px,3.6vw,38px); font-weight:800}
.seitenkopf p{margin-top:8px; color:rgba(255,255,255,.85); max-width:60ch}
.seitenkopf .krumen{font-size:13px; color:rgba(255,255,255,.7); margin-bottom:10px}
.seitenkopf .krumen a:hover{color:#fff}
.inhalt{padding:clamp(28px,4vw,48px) 0}
.inhalt.schmal .wrap{max-width:820px}
.prosa{font-size:16.5px; line-height:1.7}
.prosa h2{font-size:24px; margin:32px 0 12px} .prosa h3{font-size:19px; margin:24px 0 8px}
.prosa p{margin:0 0 16px} .prosa ul,.prosa ol{margin:0 0 16px; padding-left:22px}
.prosa a{color:var(--brand); text-decoration:underline}
.leer{padding:40px 0; color:var(--muted); text-align:center}

/* ---- Produktseite ---- */
.produkt{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(24px,4vw,52px); align-items:start}
.galerie{position:sticky; top:96px}
.galerie .haupt-bild{background:var(--bild-bg); border:1px solid var(--line); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:24px; position:relative}
.galerie .haupt-bild > img{max-height:100%; width:auto; object-fit:contain; transition:opacity .2s}
.galerie .haupt-bild .zust{top:0; left:0}
.galerie .haupt-bild .mk{top:12px; right:12px}
.thumbs{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
.thumbs button{width:72px; height:72px; background:#fff; border:2px solid var(--line); padding:6px; cursor:pointer; transition:border-color .15s}
.thumbs button.an,.thumbs button:hover{border-color:var(--brand)}
.thumbs img{width:100%; height:100%; object-fit:contain}
.p-info .marke{margin-bottom:6px}
.p-info h1{font-size:clamp(24px,3vw,32px); font-weight:800; margin-bottom:12px}
.p-info .kurz{color:var(--ink-2); font-size:15.5px; line-height:1.6; margin-bottom:18px}
.p-status{display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; margin-bottom:16px}
.p-status .status{font-size:14px}
.p-preis{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px}
.p-preis .jetzt{font-family:Epilogue,sans-serif; font-size:clamp(30px,4vw,40px); font-weight:800}
.p-preis .alt{font-size:18px; color:var(--muted); text-decoration:line-through}
.p-preis .minus{background:var(--sale); color:#fff; font-family:Epilogue,sans-serif; font-weight:700; font-size:13px; padding:3px 8px}
.p-ust{font-size:13px; color:var(--muted); margin-bottom:20px}
.p-akt{display:grid; gap:10px; margin-bottom:22px}
.p-akt .btn{justify-content:center; padding:15px 20px; font-size:16px}
.p-akt .zwei{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.p-rabatt{background:#FFF7CC; border:1px dashed #D9B400; padding:12px 14px; font-size:14px; margin-bottom:22px}
.p-rabatt b{font-family:Epilogue,sans-serif; letter-spacing:.06em}
.p-vorteile{list-style:none; padding:0; margin:0 0 26px; display:grid; gap:9px; font-size:14.5px}
.p-vorteile li{display:flex; gap:10px; align-items:flex-start}
.p-vorteile svg{width:18px; height:18px; stroke:var(--neu); stroke-width:2.4; fill:none; flex:none; margin-top:2px}
.daten{margin-top:8px}
.daten h2{font-size:20px; font-weight:700; margin-bottom:12px}
.daten table{width:100%; border-collapse:collapse; font-size:14.5px}
.daten th,.daten td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.daten th{width:38%; font-weight:600; color:var(--ink-2); background:var(--surface-2)}
.zustand{margin-top:34px; background:var(--surface); border:1px solid var(--line); padding:22px 24px}
.zustand h2{font-size:20px; font-weight:700; margin-bottom:8px}
.zustand p{color:var(--ink-2); font-size:15px; line-height:1.6}
.aehnlich{margin-top:clamp(36px,5vw,56px)}
.aehnlich h2{font-size:22px; font-weight:700; margin-bottom:16px}

/* ---- Formulare ---- */
.form{background:var(--surface); border:1px solid var(--line); padding:clamp(20px,3vw,32px)}
.form h2{font-size:22px; font-weight:700; margin-bottom:6px}
.form .form-intro{color:var(--muted); font-size:15px; margin-bottom:20px}
.feld{display:flex; flex-direction:column; gap:6px; margin-bottom:16px}
.feld label{font-size:13.5px; font-weight:600; font-family:Epilogue,sans-serif}
.feld input,.feld textarea,.feld select{font:inherit; font-size:15px; padding:11px 13px; border:1.5px solid var(--line-2); background:#fff; width:100%}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.feld textarea{min-height:120px; resize:vertical}
.feld-reihe{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
.feld .pflicht{color:var(--sale)}
.form .ds{font-size:13px; color:var(--muted); margin:6px 0 16px}
.form .ds a{color:var(--brand); text-decoration:underline}
.honig{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden}
.kontakt-raster{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:clamp(24px,4vw,48px); align-items:start}
.kontakt-box{display:grid; gap:14px}
.k-zeile{display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); padding:16px 18px}
.k-zeile svg{width:24px; height:24px; stroke:var(--brand); stroke-width:1.8; fill:none; flex:none}
.k-zeile b{display:block; font-family:Epilogue,sans-serif; font-size:14px; margin-bottom:2px}
.k-zeile span{color:var(--ink-2); font-size:14.5px; line-height:1.55}
.k-zeile a:hover{color:var(--brand)}

/* ---- Marken-Logos (WooCommerce Brands) ---- */
.marken .band img{height:34px; width:auto; opacity:.75; filter:grayscale(1); transition:opacity .2s, filter .2s}
.marken .band img:hover{opacity:1; filter:none}
.mk img{height:15px; width:auto; max-width:64px; display:block}
.mk:has(img){padding:3px 7px}

/* ---- Bewertungen (echte Texte, kein Platzhalter-Stil) ---- */
.bw-text{font-style:normal; color:var(--ink)}
.bw-text.ph{font-style:italic; color:var(--muted)}

/* ---- Responsive Ergänzungen ---- */
@media (max-width:860px){
  .produkt{grid-template-columns:1fr} .galerie{position:static}
  .kontakt-raster{grid-template-columns:1fr}
  .feld-reihe{grid-template-columns:1fr}
  nav.haupt .wrap{gap:18px}
}


/* =====================================================================
   Design-Runde 2 (12.09.2026): Kopfzeile, Navigation, Hero-Hologramm, Vertrauens-Boxen
   ===================================================================== */

/* ---- Kopfzeile: Logo + Wortmarke ---- */
.kopf{gap:clamp(12px,2vw,24px)}
.logo-w{padding:0; background:none; gap:14px; text-decoration:none; align-items:center}
.logo-w img{height:64px; width:64px}
.wortmarke{display:flex; flex-direction:column; line-height:1.15}
.wortmarke b{font-family:Epilogue,sans-serif; font-size:clamp(17px,1.7vw,21px); font-weight:800; letter-spacing:-.01em; color:var(--ink)}
.wortmarke i{font-size:clamp(12px,1.2vw,14px); color:var(--muted); font-style:italic; margin-top:2px}
@keyframes kopf-logo{from{opacity:0; transform:translateX(-18px) scale(.9)} to{opacity:1; transform:none}}
@keyframes kopf-text{from{opacity:0; transform:translateX(-14px); filter:blur(4px)} to{opacity:1; transform:none; filter:blur(0)}}
@keyframes kopf-akt{from{opacity:0; transform:translateY(-10px)} to{opacity:1; transform:none}}
html.js-rev .logo-w img{animation:kopf-logo .7s cubic-bezier(.16,.84,.28,1) .05s both}
html.js-rev .wortmarke b{animation:kopf-text .6s ease-out .35s both}
html.js-rev .wortmarke i{animation:kopf-text .6s ease-out .55s both}
html.js-rev .kopf-akt{animation:kopf-akt .6s ease-out .5s both}
.kbtn-mail{text-decoration:none; padding:9px 15px; border-radius:4px; font-family:Epilogue,sans-serif; font-weight:700; font-size:14px; background:#fff; color:var(--brand); border:2px solid var(--brand); transition:background-color .2s, color .2s}
.kbtn-mail:hover{background:var(--brand); color:#fff}
.kbtn-mail svg{width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none}

/* ---- Navigation: zentriert, „Neu!"-Hinweis ---- */
@media (min-width:861px){ nav.haupt .wrap{justify-content:center} }
nav.haupt a{position:relative}
.neu-pill{display:inline-block; margin-left:6px; padding:2px 7px; border-radius:999px; background:var(--violett); color:#fff; font-family:Epilogue,sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.04em; vertical-align:2px; animation:neu-puls 2.2s ease-in-out infinite}
@keyframes neu-puls{0%,100%{box-shadow:0 0 0 0 rgba(111,0,255,.45)} 55%{box-shadow:0 0 0 7px rgba(111,0,255,0)}}

/* ---- Hero: Verlauf + Hologramm-Bühne ---- */
.hero{background:linear-gradient(120deg,#6F00FF 0%,#4A2BD6 48%,#1164B4 100%)}
.hero .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center}
.hero h1{font-size:clamp(30px,4.2vw,48px)}
.hero h1 em{color:#FFD60A}
.holo-seite{position:relative; display:flex; flex-direction:column; gap:18px; align-items:stretch}
.holo-stage{position:relative; height:clamp(170px,22vw,230px); overflow:hidden}
.holo-stage::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 4px)}
.holo{position:absolute; stroke:var(--holo); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:rgba(143,233,255,.07);
  filter:drop-shadow(0 0 5px rgba(143,233,255,.85)) drop-shadow(0 0 16px rgba(143,233,255,.35))}
.holo-gross{width:clamp(150px,19vw,200px); height:auto; left:50%; top:50%; transform:translate(-50%,-50%)}
.holo-reihe{position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,1fr); align-items:center; justify-items:center; padding:0 6%}
.holo-reihe .holo{position:static; width:clamp(48px,6.5vw,76px); height:auto; transform:none}
@keyframes holo-rein{0%{opacity:0; transform:translate(-190%,-50%) skewX(-8deg)} 55%{opacity:1; transform:translate(-44%,-50%) skewX(3deg)} 100%{opacity:1; transform:translate(-50%,-50%)}}
@keyframes holo-flacker{0%,100%{opacity:1} 8%{opacity:.55} 12%{opacity:1} 40%{opacity:.85} 44%{opacity:1}}
@keyframes holo-weg{0%{opacity:1; transform:translate(-50%,-50%) scale(1)} 100%{opacity:0; transform:translate(-50%,-50%) scale(.35); filter:blur(4px)}}
@keyframes holo-pop{0%{opacity:0; transform:scale(.2) translateY(20px)} 70%{opacity:1; transform:scale(1.12)} 100%{opacity:1; transform:none}}
html.js-rev .holo-gross{animation:holo-rein 1.15s cubic-bezier(.2,.8,.2,1) both, holo-flacker 1.6s steps(1) .2s 1, holo-weg .45s ease-in 1.55s forwards}
html.js-rev .holo-reihe .holo{opacity:0; animation:holo-pop .55s cubic-bezier(.2,.9,.3,1.3) both}
html.js-rev .holo-reihe .holo:nth-child(1){animation-delay:1.7s}
html.js-rev .holo-reihe .holo:nth-child(2){animation-delay:1.85s}
html.js-rev .holo-reihe .holo:nth-child(3){animation-delay:2s}
html.js-rev .holo-reihe .holo:nth-child(4){animation-delay:2.15s}
html:not(.js-rev) .holo-gross{display:none}
.gutschein{margin-top:0}
.gutschein .code{color:#FFD60A}
.hero .btn-p{background:#FFD60A; color:#141B1F; border-color:#FFD60A}
@media (prefers-reduced-motion:reduce){ .holo-gross{display:none} .holo-reihe .holo{opacity:1 !important; animation:none !important} .neu-pill{animation:none} }
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .holo-seite{display:contents}
  .holo-stage{order:-1; height:125px}
  .gutschein{order:2; margin-top:6px}
  .kbtn-wa span{display:none}
  .logo-w img{height:48px; width:48px}
  .wortmarke b{font-size:16px} .wortmarke i{font-size:11.5px}
}
@media (max-width:480px){ .wortmarke i{display:none} }

/* ---- Vertrauens-Boxen ---- */
.trust{background:var(--ground); border-bottom:0}
.trust .wrap{gap:14px; padding-top:22px; padding-bottom:6px}
.t-item{background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px; gap:14px; align-items:center;
  transition:transform .2s, border-color .2s, box-shadow .2s}
.t-item:hover{transform:translateY(-3px); border-color:var(--brand); box-shadow:0 10px 26px rgba(16,52,166,.12)}
.t-item svg{width:44px; height:44px; padding:10px; border-radius:50%; background:linear-gradient(135deg,rgba(111,0,255,.14),rgba(17,100,180,.14)); stroke:var(--brand); flex:none}
.t-item b{font-size:14.5px}

/* ---- Energieeffizienzklasse ---- */
.eek{display:inline-flex; align-items:center; gap:6px; font-family:Epilogue,sans-serif; font-weight:800; font-size:12px; letter-spacing:.02em}
.eek span{display:inline-block; padding:3px 12px 3px 8px; color:#fff; clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%)}
.eek small{font-weight:500; color:var(--muted); font-size:11.5px}


/* ---- Design-Runde 3: Chips mit Icons, „Neu eingetroffen" ---- */
.chip{display:inline-flex; align-items:center; gap:7px; padding:10px 16px; font-size:14px}
.chip svg{width:19px; height:19px; stroke:currentColor; stroke-width:1.8; fill:none}
.filter{margin-bottom:22px}
.neu-block{padding-bottom:0}
.neu-block .blk-kopf h2::before{content:"Neu"; display:inline-block; margin-right:10px; padding:3px 9px; border-radius:999px; background:var(--violett); color:#fff; font-size:12px; font-weight:800; letter-spacing:.06em; vertical-align:middle}
.raster-neu{grid-template-columns:repeat(auto-fill,minmax(246px,1fr))}
@media (min-width:861px){ .raster-neu{grid-template-columns:repeat(3,1fr)} }

.blk-kopf .mehr{white-space:nowrap}