:root{
 --bg:#fff; --text:#202124; --muted:#5f6368; --blue:#0b76a8; --blue2:#55c6ef;
 --ice:#e8f4f8; --mint:#e9f5ef; --sand:#f4efe7; --lav:#eef0fb; --dark:#10252f;
 --r:38px; --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
body.lock{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}

.topbar{position:sticky;top:0;z-index:40;height:72px;background:#ffffffed;backdrop-filter:blur(18px);display:flex;align-items:center;padding:0 3vw;border-bottom:1px solid #e8eaed}
.logo img{width:118px}
.nav{margin-left:auto;display:flex;align-items:center;gap:25px}
.nav a{font-size:.88rem;font-weight:700}
.ask{border:0;background:#202124;color:#fff;border-radius:999px;padding:11px 18px;font-weight:800;cursor:pointer}

.hero{min-height:94svh;padding:9vh 4vw 5vh;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden}
.hero h1{font-size:clamp(4rem,9vw,9rem);line-height:.88;letter-spacing:-.075em;margin:4vh 0 24px;max-width:1500px}
.hero h1 span{color:var(--blue)}
.hero p{font-size:clamp(1rem,1.55vw,1.35rem);color:var(--muted);max-width:720px;margin:0 0 38px}
.hero-buttons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.pill{border:0;border-radius:999px;padding:13px 20px;font-weight:800;cursor:pointer;background:#202124;color:#fff}
.pill.light{background:#eef3f5;color:#202124}
.hero-visual{margin-top:7vh;width:min(1450px,100%);height:min(48vw,560px);background:var(--ice);border-radius:48px;position:relative;overflow:hidden}
.hero-visual img.main{width:100%;height:100%;object-fit:cover;filter:saturate(.72);transform:scale(1.03)}
.hero-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,#092b3b99)}
.hero-label{position:absolute;left:4%;bottom:8%;z-index:2;color:#fff;text-align:left}
.hero-label small{font-size:.72rem;text-transform:uppercase;letter-spacing:.17em;font-weight:800}
.hero-label strong{display:block;font-size:clamp(2rem,4vw,4.5rem);line-height:.95;letter-spacing:-.05em;margin-top:8px}

.quick{padding:12vh 4vw}
.section-title{max-width:1050px;margin:0 auto 6vh;text-align:center}
.section-title span{font-size:.75rem;color:var(--blue);text-transform:uppercase;letter-spacing:.16em;font-weight:800}
.section-title h2{font-size:clamp(2.8rem,6vw,6.5rem);line-height:.92;letter-spacing:-.06em;margin:14px 0 0}
.tiles{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;max-width:1500px;margin:auto}
.tile{border-radius:var(--r);padding:36px;min-height:360px;position:relative;overflow:hidden;display:flex;flex-direction:column;transition:.45s var(--ease)}
.tile:hover{transform:translateY(-6px)}
.tile h3{font-size:clamp(2rem,3.6vw,4rem);line-height:.95;letter-spacing:-.055em;margin:0 0 14px}
.tile p{color:#4e5960;max-width:500px;margin:0}
.tile ul{list-style:none;padding:0;margin:auto 0 0;display:flex;gap:8px;flex-wrap:wrap}
.tile li{font-size:.78rem;padding:8px 11px;border-radius:999px;background:#ffffffa8}
.tile.big{grid-column:span 7}
.tile.small{grid-column:span 5}
.tile.blue{background:var(--ice)}
.tile.mint{background:var(--mint)}
.tile.sand{background:var(--sand)}
.tile.lav{background:var(--lav)}
.tile-photo{position:absolute;right:-2%;bottom:-5%;width:45%;max-height:62%;object-fit:contain;filter:drop-shadow(0 24px 40px #0002)}

.showcase{padding:12vh 0;background:#f8f9fa}
.showcase-head{padding:0 4vw;text-align:center;margin-bottom:8vh}
.showcase-head h2{font-size:clamp(3rem,6.8vw,7.5rem);line-height:.9;letter-spacing:-.065em;margin:0}
.showcase-head p{color:var(--muted);font-size:1.1rem}
.scroller{display:flex;gap:22px;overflow-x:auto;padding:0 4vw 28px;scroll-snap-type:x mandatory;scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.card{min-width:min(72vw,760px);height:620px;border-radius:44px;overflow:hidden;position:relative;scroll-snap-align:center;background:#dbeff6}
.card img{width:100%;height:100%;object-fit:cover}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,#071117c9)}
.card-copy{position:absolute;left:36px;right:36px;bottom:34px;z-index:2;color:#fff}
.card-copy small{text-transform:uppercase;letter-spacing:.15em;font-size:.7rem;font-weight:800;color:#aee7fb}
.card-copy h3{font-size:clamp(2.4rem,4.3vw,4.8rem);line-height:.92;letter-spacing:-.055em;margin:10px 0 12px}
.card-copy p{margin:0;color:#e0ebef;max-width:600px}

.feature{padding:12vh 4vw}
.feature-wrap{max-width:1500px;margin:auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:6vw;align-items:center}
.feature-copy h2{font-size:clamp(3rem,6vw,6.7rem);line-height:.9;letter-spacing:-.06em;margin:0 0 26px}
.feature-copy p{font-size:1.1rem;color:var(--muted);max-width:560px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:25px}
.chips span{background:#f1f3f4;border-radius:999px;padding:9px 12px;font-size:.82rem}
.part-stage{min-height:600px;border-radius:48px;background:var(--ice);position:relative;overflow:hidden}
.part-stage img{position:absolute;object-fit:contain;filter:drop-shadow(0 30px 42px #1233);transition:transform .8s var(--ease)}
.part-stage img:nth-child(1){width:42%;left:30%;top:24%}
.part-stage img:nth-child(2){width:22%;left:7%;top:12%}
.part-stage img:nth-child(3){width:25%;right:7%;top:10%}
.part-stage img:nth-child(4){width:21%;right:10%;bottom:7%}
.part-stage img:nth-child(5){width:24%;left:8%;bottom:6%}
.part-stage:hover img:nth-child(1){transform:translateY(-10px) scale(1.04)}
.part-stage:hover img:nth-child(2){transform:translate(-10px,-6px) rotate(-4deg)}
.part-stage:hover img:nth-child(3){transform:translate(9px,-6px) rotate(3deg)}

.pump{padding:6vh 4vw 12vh}
.pump-stage{max-width:1500px;margin:auto;border-radius:48px;min-height:760px;position:relative;overflow:hidden;background:#0b5578;color:#fff}
.pump-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.58) saturate(.85)}
.pump-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,#07344add 100%)}
.pump-copy{position:absolute;z-index:2;left:5%;right:5%;bottom:7%}
.pump-copy small{font-size:.73rem;text-transform:uppercase;letter-spacing:.16em;color:#b7e9fb;font-weight:800}
.pump-copy h2{font-size:clamp(3.2rem,7vw,7.6rem);line-height:.88;letter-spacing:-.065em;margin:12px 0 18px}
.pump-copy p{font-size:1.08rem;color:#e1edf2;max-width:650px}

.about{padding:12vh 4vw}
.about-grid{max-width:1500px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.about-photo,.about-copy{border-radius:48px;overflow:hidden;min-height:650px}
.about-photo img{width:100%;height:100%;object-fit:cover}
.about-copy{background:#f2f4f5;padding:6vw;display:flex;flex-direction:column;justify-content:center}
.about-copy small{color:var(--blue);text-transform:uppercase;letter-spacing:.16em;font-weight:800}
.about-copy h2{font-size:clamp(3rem,5vw,5.8rem);line-height:.92;letter-spacing:-.055em;margin:14px 0 25px}
.about-copy p{font-size:1.15rem;color:var(--muted)}

.brands{padding:9vh 4vw;text-align:center}
.brands h3{font-size:clamp(2rem,4vw,4rem);letter-spacing:-.045em;margin:0 0 40px}
.brandrow{max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:40px;align-items:center}
.brandrow img{max-width:145px;max-height:58px;margin:auto;filter:grayscale(1);opacity:.58}
.brandnote{font-size:.76rem;color:#8a959a;margin-top:30px}

.contact{padding:12vh 4vw;background:#eef3f5}
.contact-box{max-width:1500px;margin:auto;border-radius:48px;background:#202124;color:#fff;min-height:720px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.contact-copy{padding:6vw;display:flex;flex-direction:column;justify-content:center}
.contact-copy h2{font-size:clamp(3rem,6vw,6.8rem);line-height:.9;letter-spacing:-.06em;margin:0 0 25px}
.contact-copy p{color:#d5dbde;font-size:1.08rem;line-height:1.7}
.contact-photo{position:relative}
.contact-photo img{width:100%;height:100%;object-fit:cover;filter:brightness(.72)}
.contact-meta{position:absolute;left:6%;right:6%;bottom:6%;background:#ffffffeb;color:#202124;border-radius:25px;padding:22px}
.contact-meta b{display:block;margin-bottom:6px}
.contact-meta p{margin:0;color:#555f65}

.reveal{opacity:0;transform:translateY(35px);transition:1s var(--ease)}
.reveal.in{opacity:1;transform:none}

.fab{position:fixed;right:24px;bottom:22px;z-index:55;border:0;border-radius:999px;background:#202124;color:#fff;padding:13px 18px;font-weight:800;box-shadow:0 12px 40px #0003;cursor:pointer}
.drawerwrap{position:fixed;inset:0;z-index:100;pointer-events:none;visibility:hidden}
.drawerwrap.open{pointer-events:auto;visibility:visible}
.backdrop{position:absolute;inset:0;background:#2021248c;opacity:0;transition:.35s}
.open .backdrop{opacity:1}
.drawer{position:absolute;right:0;top:0;height:100%;width:min(100%,560px);background:#fff;padding:55px 38px;overflow:auto;transform:translateX(100%);transition:.55s var(--ease)}
.open .drawer{transform:none}
.close{position:absolute;right:20px;top:18px;border:0;background:none;font-size:2rem;cursor:pointer}
.drawer h3{font-size:2.5rem;letter-spacing:-.05em;margin:10px 0 25px}
.options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:30px}
.options a,.options button{background:#f1f3f4;border:0;border-radius:20px;padding:16px;text-align:left;cursor:pointer}
.options b,.options span{display:block}
.options span{font-size:.78rem;color:#69757c;margin-top:4px}
form{display:grid;gap:13px}
label{font-size:.8rem;font-weight:800}
input,select,textarea{width:100%;border:0;border-radius:14px;background:#f1f3f4;padding:12px;margin-top:5px}
.submit{border:0;border-radius:999px;background:#202124;color:#fff;padding:14px;font-weight:800;cursor:pointer}

@media(max-width:900px){
 .nav a{display:none}
 .hero{padding-left:18px;padding-right:18px}
 .hero-visual{height:62vh;border-radius:34px}
 .tiles{grid-template-columns:1fr;padding:0 18px}
 .tile.big,.tile.small{grid-column:auto}
 .tile{min-height:330px}
 .feature-wrap,.about-grid,.contact-box{grid-template-columns:1fr}
 .part-stage{min-height:500px}
 .about-photo,.about-copy{min-height:520px}
 .contact-photo{min-height:600px}
 .brandrow{grid-template-columns:repeat(3,1fr)}
 .card{min-width:86vw;height:550px}
}
@media(max-width:560px){
 .topbar{padding:0 16px}
 .logo img{width:100px}
 .hero h1{font-size:clamp(3.7rem,17vw,6rem)}
 .quick,.feature,.pump,.about,.brands,.contact{padding-left:14px;padding-right:14px}
 .tile{padding:26px;border-radius:28px}
 .tile-photo{width:42%;opacity:.82}
 .part-stage,.pump-stage,.about-photo,.about-copy,.contact-box{border-radius:30px}
 .brandrow{grid-template-columns:1fr 1fr}
 .drawer{padding:50px 20px}
 .fab{right:14px;bottom:14px}
}
@media(prefers-reduced-motion:reduce){
 *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
 .reveal{opacity:1;transform:none}
}

/* --- Variant 3: scroll chapter navigation + detail overlays --- */
.detail-trigger{cursor:pointer}
.detail-trigger::before{content:"Mehr";position:absolute;right:22px;top:22px;z-index:5;background:#ffffffd9;color:#202124;border-radius:999px;padding:8px 12px;font-size:.72rem;font-weight:800;opacity:0;transform:translateY(-5px);transition:.3s var(--ease)}
.detail-trigger:hover::before{opacity:1;transform:none}
.tile.detail-trigger{isolation:isolate}
.card.detail-trigger{isolation:isolate}

.chapter-nav{position:fixed;right:24px;bottom:82px;z-index:35;display:flex;flex-direction:column;align-items:flex-end;gap:0}
.chapter-item{display:grid;grid-template-columns:auto 16px;align-items:center;gap:10px;text-decoration:none;color:#7a858a;min-height:48px;transition:.4s var(--ease)}
.chapter-label{font-size:.68rem;font-weight:750;letter-spacing:.03em;white-space:nowrap;opacity:.62;transform:scale(.92);transform-origin:right center;transition:.45s var(--ease)}
.chapter-marker{display:flex;flex-direction:column;align-items:center;height:48px}
.chapter-dot{width:6px;height:6px;border-radius:50%;background:#aeb7bb;transition:.45s var(--ease);flex:0 0 auto}
.chapter-line{width:1px;flex:1;background:#d7dde0;margin-top:5px;position:relative;overflow:hidden}
.chapter-line::after{content:"";position:absolute;left:0;right:0;top:0;height:0;background:#202124;transition:.4s var(--ease)}
.chapter-item.active{color:#202124}
.chapter-item.active .chapter-label{font-size:.82rem;opacity:1;transform:scale(1.08);font-weight:850}
.chapter-item.active .chapter-dot{width:12px;height:12px;background:#202124;box-shadow:0 0 0 5px #ffffffbb}
.chapter-item.passed .chapter-line::after{height:100%}
.chapter-item:last-child .chapter-line{display:none}

.detail-overlay{position:fixed;inset:0;z-index:120;pointer-events:none;visibility:hidden}
.detail-overlay.open{pointer-events:auto;visibility:visible}
.detail-backdrop{position:absolute;inset:0;background:#20212466;backdrop-filter:blur(8px);opacity:0;transition:.4s}
.detail-overlay.open .detail-backdrop{opacity:1}
.detail-panel{position:absolute;right:0;top:0;width:min(100%,780px);height:100%;background:#fff;overflow:auto;transform:translateX(100%);transition:.58s var(--ease);box-shadow:-20px 0 70px #0002}
.detail-overlay.open .detail-panel{transform:none}
.detail-close{position:sticky;top:18px;float:right;margin:18px 18px 0 0;width:44px;height:44px;border:0;border-radius:50%;background:#f1f3f4;font-size:1.5rem;cursor:pointer;z-index:4}
.detail-hero{height:42vh;min-height:320px;position:relative;overflow:hidden}
.detail-hero img{width:100%;height:100%;object-fit:cover}
.detail-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,#071117b7)}
.detail-hero-title{position:absolute;left:36px;right:36px;bottom:30px;z-index:2;color:#fff}
.detail-hero-title small{text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;font-weight:850;color:#bcecff}
.detail-hero-title h2{font-size:clamp(2.7rem,6vw,5.8rem);line-height:.9;letter-spacing:-.06em;margin:10px 0 0}
.detail-body{padding:42px 38px 60px}
.detail-body>p{font-size:1.08rem;color:#59666d;max-width:620px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:30px 0}
.detail-link{background:#f4f6f7;border-radius:22px;padding:18px;min-height:112px;display:flex;flex-direction:column;justify-content:space-between;transition:.3s}
.detail-link:hover{background:#eaf3f7;transform:translateY(-2px)}
.detail-link b{font-size:1.05rem}
.detail-link span{font-size:.79rem;color:#758087}
.detail-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.detail-actions button,.detail-actions a{border:0;border-radius:999px;padding:13px 17px;font-weight:850;cursor:pointer;text-decoration:none}
.detail-actions .primary{background:#202124;color:#fff}
.detail-actions .secondary{background:#eef2f3;color:#202124}

@media(max-width:1050px){
 .chapter-nav{right:18px;bottom:78px}
 .chapter-label{display:none}
 .chapter-item{grid-template-columns:16px;min-height:46px}
 .chapter-marker{height:46px}
}
@media(max-width:700px){
 .chapter-nav{display:none}
 .detail-panel{width:100%}
 .detail-body{padding:32px 20px 50px}
 .detail-grid{grid-template-columns:1fr}
 .detail-hero-title{left:20px;right:20px;bottom:22px}
 .detail-trigger::before{opacity:1;transform:none}
}





/* --- Brand intro FINAL: static at top, scroll crossfade --- */
.brand-intro{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:46vh;
  z-index:30;
  pointer-events:none;
}
.brand-intro-logo{
  position:absolute;
  left:50%;
  top:11vh;
  width:min(46vw,470px);
  transform:translateX(-50%);
  opacity:1;
  filter:blur(0) drop-shadow(0 12px 28px rgba(0,0,0,.08));
  will-change:opacity,transform,filter;
}
.topbar .logo{
  opacity:0;
  transform:translateY(-4px) scale(.96);
  will-change:opacity,transform;
}
.hero{
  padding-top:19vh;
}
@media(max-width:900px){
  .brand-intro-logo{
    width:min(66vw,360px);
    top:11vh;
  }
}
@media(prefers-reduced-motion:reduce){
  .brand-intro{display:none}
  .topbar .logo{
    opacity:1!important;
    transform:none!important;
  }
}


.route-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.route-btn{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:11px 15px;background:#202124;color:#fff!important;font-size:.82rem;font-weight:800;text-decoration:none}
.route-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.route-btn.secondary{background:#eef1f2;color:#202124!important}


/* --- second-level detail navigation --- */
.subdetail-backdrop{
  position:fixed;
  top:0; right:0; bottom:0;
  left:min(560px,92vw);
  z-index:109;
  background:rgba(15,18,20,.18);
  opacity:0;
  pointer-events:none;
  transition:opacity .36s cubic-bezier(.2,.8,.2,1);
}
.subdetail-backdrop.open{opacity:1;pointer-events:auto}
.subdetail-panel{
  position:fixed; left:0; top:0; bottom:0; z-index:120;
  width:min(560px,92vw);
  background:#fff;
  transform:translateX(-103%);
  transition:transform .52s cubic-bezier(.18,.82,.22,1);
  box-shadow:24px 0 70px rgba(0,0,0,.22);
  overflow:auto;
  isolation:isolate;
}
.subdetail-panel.open{transform:translateX(0)}
.subdetail-inner{min-height:100%;padding:34px 38px 46px;display:flex;flex-direction:column}
.subdetail-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:42px}
.subdetail-back,.subdetail-close{
  border:0;background:#f1f3f4;border-radius:999px;height:42px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font:inherit
}
.subdetail-back{padding:0 16px;gap:8px;font-size:.84rem;font-weight:800}
.subdetail-close{width:42px;font-size:1.3rem}
.subdetail-kicker{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:#1776a6;margin-bottom:12px}
.subdetail-title{font-size:clamp(3rem,6vw,5.4rem);line-height:.87;letter-spacing:-.065em;margin:0 0 26px}
.subdetail-copy{font-size:1.05rem;line-height:1.65;color:#536169;max-width:38rem;margin:0 0 30px}
.subdetail-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.subdetail-meta span{background:#f2f4f5;border-radius:999px;padding:10px 13px;font-size:.78rem;font-weight:700}
.subdetail-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:auto;padding-top:28px}
.subdetail-actions a,.subdetail-actions button{border:0;text-decoration:none;border-radius:999px;padding:13px 18px;font:inherit;font-size:.84rem;font-weight:800;cursor:pointer}
.subdetail-actions .primary{background:#202124;color:#fff}
.subdetail-actions .secondary{background:#eef1f2;color:#202124}
.detail-panel [data-subtopic], .detail-panel .detail-chip, .detail-panel .detail-item{
  cursor:pointer;
}
@media(max-width:700px){
 .subdetail-inner{padding:24px 22px 34px}
 .subdetail-title{font-size:3.2rem}
}


.subdetail-hero{margin:0 -38px 30px;height:230px;overflow:hidden;background:#eef1f2}
.subdetail-hero img{width:100%;height:100%;object-fit:cover;display:block}
.subdetail-brands{margin:4px 0 4px}
.subdetail-brands-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.15em;font-weight:800;color:#7a858a;margin-bottom:10px}
.subdetail-brands-list{display:flex;flex-wrap:wrap;gap:8px}
.subdetail-brands-list span{border:1px solid #e3e7e9;background:#fff;border-radius:999px;padding:9px 12px;font-size:.76rem;font-weight:750}
@media(max-width:700px){
 .subdetail-backdrop{left:92vw}
 .subdetail-hero{margin-left:-22px;margin-right:-22px;height:190px}
}


/* Detail panel refinement: sharp foreground, subtle right-side dim */
.subdetail-panel{
  background:#fff!important;
  color:#202124;
}
.subdetail-inner{
  padding:28px 34px 40px;
}
.subdetail-hero{
  margin:0 -34px 28px;
  height:245px;
  background:#f3f5f6;
}
.subdetail-title{
  color:#202124;
  opacity:1!important;
  visibility:visible!important;
}
.subdetail-copy{
  color:#55636a;
  opacity:1!important;
  visibility:visible!important;
  max-width:30rem;
}
.subdetail-meta{
  display:flex!important;
  opacity:1!important;
  visibility:visible!important;
}
.subdetail-brands{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  margin-top:8px;
}
.subdetail-brands-label{
  margin-bottom:12px;
}
.subdetail-brands-list{
  display:flex!important;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.subdetail-brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:7px 11px;
  border:1px solid #e2e7e9;
  border-radius:12px;
  background:#fff;
  font-size:.75rem;
  font-weight:750;
}
.subdetail-brand img{
  display:block;
  max-width:68px;
  max-height:24px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.subdetail-source-note{
  margin-top:14px;
  color:#879197;
  font-size:.68rem;
  line-height:1.45;
}
@media(max-width:700px){
 .subdetail-backdrop{left:92vw}
 .subdetail-inner{padding:22px 20px 32px}
 .subdetail-hero{margin-left:-20px;margin-right:-20px;height:185px}
}


.subdetail-hero.no-image{display:none!important}

/* --- Leistungskacheln: getrennte Text-/Bildbereiche, keine Überlagerung --- */
#leistungen .tile{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:360px;
  padding:34px 36px 30px;
}
#leistungen .tile h3,
#leistungen .tile p,
#leistungen .tile ul{
  position:relative;
  z-index:3;
}
#leistungen .tile h3{
  max-width:72%;
  margin-right:auto;
}
#leistungen .tile p{
  max-width:58%;
  margin-right:auto;
}
#leistungen .tile ul{
  position:absolute;
  left:36px;
  bottom:28px;
  width:54%;
  max-width:54%;
  z-index:4;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
}
#leistungen .tile .tile-photo{
  position:absolute;
  z-index:1;
  pointer-events:none;
  object-fit:contain;
  object-position:center;
  filter:none;
}

/* Schleifarbeiten */
#leistungen .tile[data-detail="schleifen"] .tile-photo{
  right:-2%;
  bottom:0;
  width:47%;
  height:58%;
}
#leistungen .tile[data-detail="schleifen"] ul{
  width:55%;
  max-width:55%;
}

/* Garten & Forst – freigestellte Motorsäge */
#leistungen .tile[data-detail="garten"] .tile-photo{
  right:1.5%;
  bottom:20px;
  width:44%;
  height:48%;
}
#leistungen .tile[data-detail="garten"] h3,
#leistungen .tile[data-detail="garten"] p{
  max-width:62%;
}
#leistungen .tile[data-detail="garten"] ul{
  width:55%;
  max-width:55%;
}

/* Motoren & Getriebe */
#leistungen .tile[data-detail="antrieb"] .tile-photo{
  right:1.5%;
  bottom:0;
  width:42%;
  height:48%;
}
#leistungen .tile[data-detail="antrieb"] h3,
#leistungen .tile[data-detail="antrieb"] p{
  max-width:66%;
}
#leistungen .tile[data-detail="antrieb"] ul{
  width:57%;
  max-width:57%;
}

/* Technik & Ersatzteile */
#leistungen .tile[data-detail="technik"] .tile-photo{
  right:0;
  bottom:-2%;
  width:43%;
  height:54%;
}
#leistungen .tile[data-detail="technik"] h3,
#leistungen .tile[data-detail="technik"] p{
  max-width:62%;
}
#leistungen .tile[data-detail="technik"] ul{
  width:56%;
  max-width:56%;
}

/* Chips immer lesbar und vor den Produktbildern */
#leistungen .tile ul li{
  position:relative;
  z-index:5;
  white-space:nowrap;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

/* Kleine Viewports: Bild unterhalb des Textes, Chips nicht über dem Produkt */
@media(max-width:900px){
  #leistungen .tile{
    min-height:390px;
    padding:28px 26px;
  }
  #leistungen .tile h3,
  #leistungen .tile p{
    max-width:100%!important;
  }
  #leistungen .tile ul{
    left:26px;
    bottom:24px;
    width:62%!important;
    max-width:62%!important;
  }
  #leistungen .tile .tile-photo{
    width:43%!important;
    height:43%!important;
    right:0!important;
    bottom:10px!important;
  }
}
@media(max-width:620px){
  #leistungen .tile{
    min-height:430px;
  }
  #leistungen .tile ul{
    width:100%!important;
    max-width:calc(100% - 52px)!important;
    bottom:22px;
  }
  #leistungen .tile .tile-photo{
    width:54%!important;
    height:38%!important;
    right:-2%!important;
    bottom:74px!important;
    opacity:.96;
  }
}


/* Vorschauhinweis – rein visuell, blockiert keine Klicks */
.preview-banner{
  width:100%;
  box-sizing:border-box;
  background:#f28c18;
  color:#181818;
  padding:9px 18px;
  text-align:center;
  font-size:.76rem;
  line-height:1.35;
  font-weight:700;
  position:relative;
  z-index:1;
  pointer-events:none;
  user-select:none;
}
.preview-banner strong{font-weight:900;letter-spacing:.04em}
@media(max-width:700px){
  .preview-banner{font-size:.68rem;padding:8px 10px}
}

/* Technik & Ersatzteile – reichere Produktcollage */
.tech-product-collage{
  position:relative;
  width:100%;
  min-height:560px;
  height:100%;
  overflow:hidden;
  border-radius:34px;
  background:#eaf5fb;
}
.tech-product-collage img{
  position:absolute;
  object-fit:contain;
  display:block;
  pointer-events:none;
  filter:drop-shadow(0 14px 22px rgba(20,35,45,.10));
}
.tech-product-collage .p-bearing{left:6%;top:8%;width:23%;height:19%}
.tech-product-collage .p-filter{right:5%;top:7%;width:27%;height:20%}
.tech-product-collage .p-motor{left:30%;top:27%;width:40%;height:34%}
.tech-product-collage .p-belt{left:6%;bottom:8%;width:25%;height:21%}
.tech-product-collage .p-seal{right:7%;bottom:8%;width:23%;height:18%}
.tech-product-collage .p-chain{left:38%;bottom:5%;width:18%;height:13%}
.tech-product-collage .p-spark{left:10%;top:34%;width:15%;height:15%}
.tech-product-collage .p-gearbox{right:10%;top:33%;width:19%;height:19%}
@media(max-width:900px){
  .tech-product-collage{min-height:440px}
}
@media(max-width:620px){
  .tech-product-collage{min-height:360px}
}


/* --- JSON-basierte, mehrstufige Navigation --- */
.detail-link{
  border:0;
  width:100%;
  text-align:left;
  font:inherit;
  cursor:pointer;
  color:inherit;
}
.detail-link::after{
  content:"→";
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  font-size:1rem;
  opacity:.42;
  transition:.25s ease;
}
.detail-link{position:relative;padding-right:42px}
.detail-link:hover::after{opacity:1;transform:translate(3px,-50%)}

.subdetail-items{margin:7px 0 28px}
.subdetail-section-label{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-weight:850;
  color:#7b878d;
  margin-bottom:11px;
}
.subdetail-items-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.subdetail-items-list span{
  background:#f2f4f5;
  border-radius:999px;
  padding:9px 12px;
  font-size:.76rem;
  line-height:1.1;
  font-weight:720;
}
.subdetail-brands:empty,
.subdetail-brands.is-empty,
.subdetail-items.is-empty{display:none!important}

.pump-more{
  margin-top:20px;
  border:0;
  border-radius:999px;
  padding:12px 16px;
  background:#fff;
  color:#202124;
  font:inherit;
  font-size:.82rem;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.pump-more:hover{transform:translateY(-1px)}

@media(max-width:700px){
  .subdetail-panel{width:94vw}
  .subdetail-backdrop{left:94vw}
}


/* Technik CTA */
.tech-missing-cta{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin-top:22px;
  padding:0;
  border:0;
  background:transparent;
  color:#202124;
  font:inherit;
  font-size:.9rem;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
  transition:transform .22s ease, opacity .22s ease;
}
.tech-missing-cta:hover{
  transform:translateX(4px);
}
.tech-missing-cta:focus-visible{
  outline:2px solid #1776a6;
  outline-offset:5px;
  border-radius:4px;
}

/* --- VS working mobile patch 2026-09-13: isolated and scoped --- */
.vs-mobile-toggle,
.vs-mobile-menu{display:none}

@media(max-width:900px){
  section{scroll-margin-top:88px}
  .topbar{height:64px;gap:10px}
  .topbar .nav{margin-left:auto;gap:0}
  .topbar .nav .ask{display:none!important}
  .hero-buttons .pill.light[data-open]{display:none}

  .vs-mobile-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:auto;
    border:0;
    border-radius:999px;
    padding:10px 14px;
    background:#eef2f3;
    color:#202124;
    font:inherit;
    font-size:.86rem;
    font-weight:850;
    cursor:pointer;
  }
  .vs-mobile-menu{
    display:block;
    position:fixed;
    inset:0;
    z-index:115;
    visibility:hidden;
    pointer-events:none;
  }
  .vs-mobile-menu.is-open{
    visibility:visible;
    pointer-events:auto;
  }
  .vs-mobile-menu__backdrop{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    background:rgba(16,20,23,.48);
    opacity:0;
    transition:opacity .22s var(--ease);
  }
  .vs-mobile-menu.is-open .vs-mobile-menu__backdrop{opacity:1}
  .vs-mobile-menu__panel{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:min(88vw,380px);
    background:#fff;
    color:#202124;
    padding:22px 18px calc(28px + env(safe-area-inset-bottom,0px));
    overflow:auto;
    transform:translateX(104%);
    transition:transform .32s var(--ease);
    box-shadow:-18px 0 54px rgba(0,0,0,.20);
  }
  .vs-mobile-menu.is-open .vs-mobile-menu__panel{transform:translateX(0)}
  .vs-mobile-menu__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
  .vs-mobile-menu__head strong{font-size:1.65rem;line-height:1;letter-spacing:-.04em}
  .vs-mobile-menu__close{width:42px;height:42px;border:0;border-radius:50%;background:#f1f3f4;color:#202124;font-size:1.45rem;line-height:1;cursor:pointer}
  .vs-mobile-menu__sections,
  .vs-mobile-menu__categories{display:grid;gap:9px}
  .vs-mobile-menu__sections a,
  .vs-mobile-menu__categories button{
    display:block;
    width:100%;
    border:0;
    border-radius:18px;
    padding:15px 16px;
    background:#f4f6f7;
    color:#202124;
    text-align:left;
    font:inherit;
    font-weight:820;
    cursor:pointer;
  }
  .vs-mobile-menu__categories button{background:#eaf5fb}
  .vs-mobile-menu__kicker{margin:24px 0 10px;color:var(--blue);text-transform:uppercase;letter-spacing:.15em;font-size:.68rem;font-weight:850}
  .vs-mobile-menu__cta{width:100%;margin-top:22px;border:0;border-radius:999px;background:#202124;color:#fff;padding:14px 18px;font:inherit;font-weight:850;cursor:pointer}
  body.vs-mobile-menu-open{overflow:hidden}

  .fab{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:56;padding:11px 14px;font-size:.86rem}
}

@media(max-width:620px){
  /* Leistungskarten: real stacking on phones, no absolute image/chip collision. */
  #leistungen .tiles{padding:0;gap:16px}
  #leistungen .tile{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    padding:24px 22px!important;
  }
  #leistungen .tile h3,
  #leistungen .tile p{
    max-width:100%!important;
  }
  #leistungen .tile ul{
    position:relative!important;
    order:3;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-width:100%!important;
    margin:16px 0 0!important;
    padding:0!important;
  }
  #leistungen .tile .tile-photo{
    position:relative!important;
    order:2;
    right:auto!important;
    left:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:min(82%,280px)!important;
    height:auto!important;
    max-height:190px!important;
    object-fit:contain!important;
    align-self:flex-end;
    margin:18px -4px 0 auto;
    opacity:1!important;
  }
  #leistungen .tile ul li{white-space:normal}
  .detail-trigger::before{opacity:1;transform:none;right:18px;top:18px;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.08)}
}