/* Adam Zabari Akustik und Trockenbau – Entwurf
   Gips #E6E3DD · Schwarz #000 · Signalrot #E10600 · Profilstahl #8C9196 · Weiß #FFF
   Leitmotiv: die rote Laserlinie vom Kreuzlinienlaser */
:root{
  --gips:#E6E3DD; --gips-2:#D9D5CD; --schwarz:#000; --rot:#E10600; --stahl:#8C9196; --weiss:#fff;
  --text:#141414;
  --rand:clamp(20px,5vw,72px);
  --breit:"wdth" 125; --schmal:"wdth" 75;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:110px}
body{font-family:Archivo,system-ui,sans-serif;font-size:17px;line-height:1.55;color:var(--text);background:var(--gips)}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px}

h1,h2,h3{font-variation-settings:var(--breit);font-weight:800;line-height:.98;letter-spacing:-.01em}
h2{font-size:clamp(34px,6.4vw,84px)}
h3{font-size:clamp(20px,2vw,26px);line-height:1.1}

.vorschau{position:fixed;z-index:60;top:0;left:0;right:0;height:24px;line-height:24px;text-align:center;background:var(--rot);color:#fff;font-size:12px;font-weight:600}

/* Kopf */
.kopf{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px var(--rand);transition:background .3s;color:#fff}
.kopf.fest{background:rgba(0,0,0,.92)}
.recht .kopf{background:#000}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none}
.marke svg{width:40px;height:40px;background:#000;padding:6px;flex:none}
.marke path{stroke:var(--rot);stroke-width:7;fill:none}
.marke b{display:block;font-variation-settings:var(--breit);font-weight:800;font-size:20px;line-height:1;letter-spacing:.02em}
.marke small{display:block;font-size:12px;opacity:.75;margin-top:3px}
.navi{display:flex;gap:28px;align-items:center}
.navi a{text-decoration:none;font-size:15px;font-weight:500}
.navi a:not(.nav-knopf):hover{color:var(--rot)}
.nav-knopf{background:var(--rot);padding:10px 18px;font-weight:700!important}
.menue{display:none;width:44px;height:44px;position:relative}
.menue i{position:absolute;left:10px;right:10px;height:2px;background:currentColor;transition:transform .3s}
.menue i:first-child{top:17px}.menue i:last-child{top:25px}
.menue[aria-expanded=true] i:first-child{transform:translateY(4px) rotate(45deg)}
.menue[aria-expanded=true] i:last-child{transform:translateY(-4px) rotate(-45deg)}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;font-weight:700;text-decoration:none;font-size:16px;transition:transform .2s,background .2s}
.knopf.rot{background:var(--rot);color:#fff}
.knopf.rot:hover{background:#b80500}
.knopf.linie{border:2px solid currentColor;color:#fff}
.knopf.linie:hover{background:#fff;color:#000}
.knopf:active{transform:scale(.97)}

/* Held mit Scroll-Wischeffekt */
.held{height:260vh;position:relative}
/* Feste Bühne statt sticky: Safari lässt sticky-Elemente beim Scrollen zittern */
.held-buehne{position:fixed;top:0;left:0;right:0;height:100vh;height:100lvh;overflow:hidden;z-index:0;background:#000}
.held-buehne.weg{visibility:hidden}
main{overflow-x:clip}
main>section:not(.held),.fuss{position:relative;z-index:1}
:where(main>section:not(.held)){background-color:var(--gips)}
.held-roh,.held-fertig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.held-fertig{position:absolute;inset:0;overflow:hidden;transform:translate3d(-100%,0,0);will-change:transform;backface-visibility:hidden}
.held-fertig img{transform:translate3d(100%,0,0);will-change:transform;backface-visibility:hidden}
.laser{position:absolute;inset:0;pointer-events:none;will-change:transform;transform:translate3d(-100%,0,0);opacity:0}
.laser::after{content:"";position:absolute;top:0;bottom:0;right:-1px;width:2px;background:var(--rot);box-shadow:0 0 12px 2px rgba(225,6,0,.9),0 0 40px 6px rgba(225,6,0,.45)}
.held-leinwand{position:absolute;inset:0;width:100%;height:100%;display:none}
.held.leinwand .held-leinwand{display:block}
.held.leinwand .held-roh,.held.leinwand .held-fertig,.held.leinwand .laser{display:none}
/* Natives Scroll-Animieren: läuft im Compositor, ohne JavaScript pro Frame */
@supports (animation-timeline: view()) {
  .held{view-timeline:--held block}
  .held-fertig,.held-fertig img,.laser,.held-hinweis{animation-timing-function:linear;animation-fill-mode:both;animation-duration:1ms;animation-timeline:--held;animation-range:contain 0% contain 85%}
  .held-fertig{animation-name:wisch-box}
  .held-fertig img{animation-name:wisch-bild}
  .laser{animation-name:wisch-laser}
  .held-hinweis{animation-name:hinweis-weg;animation-range:contain 0% contain 25%}
}
@keyframes wisch-box{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes wisch-bild{from{transform:translate3d(100%,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes wisch-laser{0%{transform:translate3d(-100%,0,0);opacity:0}3%{opacity:1}100%{transform:translate3d(0,0,0);opacity:1}}
@keyframes hinweis-weg{from{opacity:1}to{opacity:0}}
.held-buehne::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,0) 30%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.85) 100%);pointer-events:none}
.held-text{position:absolute;z-index:2;left:var(--rand);right:var(--rand);bottom:calc(clamp(90px,14vh,140px) + 100lvh - 100svh);color:#fff;max-width:900px}
.held h1{font-size:clamp(46px,9.5vw,148px);margin-bottom:22px}
.held-text p{font-size:clamp(17px,1.6vw,21px);max-width:560px;opacity:.92;margin-bottom:28px}
.held-aktionen{display:flex;gap:12px;flex-wrap:wrap}
.held-hinweis{position:absolute;z-index:2;right:var(--rand);bottom:40px;color:#fff;font-size:13px;display:flex;align-items:center;gap:10px}
.held-hinweis::before{content:"";width:2px;height:36px;background:linear-gradient(var(--rot),transparent)}
.held-zaehler{position:absolute;z-index:2;top:96px;right:var(--rand);color:#fff;font-size:13px;font-weight:600;display:flex;gap:2px}
.held-zaehler span{padding:5px 10px;background:rgba(0,0,0,.5);transition:background .3s}
.held-zaehler .hz-roh{background:var(--rot)}
.held.fertig .hz-roh{background:rgba(0,0,0,.5)}
.held.fertig .hz-fertig{background:var(--rot)}

/* Fakten */
.fakten{display:grid;grid-template-columns:repeat(3,1fr);background:#000;color:#fff;border-top:2px solid var(--rot)}
.fakt{padding:clamp(28px,4vw,56px) var(--rand);border-right:1px solid #222}
.fakt:last-child{border:0}
.fakt b{display:block;font-variation-settings:var(--breit);font-size:clamp(48px,6vw,88px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.fakt span{display:block;margin-top:8px;color:#bbb;font-size:15px}

/* Abschnittsköpfe mit Laserlinie */
section{padding:clamp(72px,10vw,140px) var(--rand)}
.held{padding:0}
.fakten{padding:0}
.kopfzeile{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 60px;align-items:end;margin-bottom:clamp(40px,6vw,80px);position:relative;padding-bottom:28px}
.kopfzeile::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--rot);box-shadow:0 0 10px rgba(225,6,0,.6);transform:scaleX(var(--l,0));transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.7,.1,1)}
.kopfzeile.an{--l:1}
.kopfzeile p{max-width:46ch;font-size:18px}
.kopfzeile.hell{color:#fff}

/* Leistungen */
.leistung-liste{list-style:none;counter-reset:l}
.leistung{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:28px;align-items:center;padding:28px 0;border-bottom:1px solid var(--gips-2);position:relative}
.leistung:first-child{border-top:1px solid var(--gips-2)}
.leistung h3{margin-bottom:8px;transition:color .25s}
.leistung p{max-width:58ch;color:#3a3a3a}
.leistung img{width:240px;height:150px;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .4s,transform .4s}
.leistung:hover img{filter:none;transform:scale(1.03)}
.leistung:hover h3{color:var(--rot)}

/* Vorher und nachher */
.vorher-nachher{background:#000}
.vn-liste{display:grid;grid-template-columns:3fr 4fr;gap:clamp(20px,3vw,40px);align-items:start}
.vn{color:#fff}
.vn-buehne{position:relative;aspect-ratio:var(--verh);overflow:hidden;--x:50%;touch-action:pan-y;user-select:none}
.vn-buehne>img,.vn-vorher img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vn-vorher{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.vn-griff{position:absolute;top:0;bottom:0;left:var(--x);width:2px;background:var(--rot);box-shadow:0 0 14px rgba(225,6,0,.9);transform:translateX(-1px);pointer-events:none}
.vn-griff i{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;background:var(--rot);border-radius:50%;display:grid;place-items:center}
.vn-griff i::before{content:"‹ ›";color:#fff;font-style:normal;font-weight:800;font-size:20px;letter-spacing:4px}
.vn input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.vn input:focus-visible+*{outline:none}
.vn-buehne:has(input:focus-visible){outline:3px solid var(--rot);outline-offset:4px}
.vn-marke{position:absolute;top:14px;font-size:13px;font-weight:700;padding:5px 10px;background:rgba(0,0,0,.65);pointer-events:none}
.vn-m-l{left:14px}.vn-m-r{right:14px;background:var(--rot)}
.vn figcaption{margin-top:16px;color:#bbb;max-width:52ch}
.vn figcaption b{color:#fff;margin-right:6px}

/* Projekte */
.gruppe{margin-bottom:clamp(44px,5vw,72px)}
.gruppe-kopf{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.gruppe-kopf h3{font-size:clamp(24px,2.6vw,34px)}
.anzahl{color:#666;font-size:14px}
.streifen-knoepfe{margin-left:auto;display:flex;gap:6px}
.streifen-knoepfe button{width:44px;height:44px;border:2px solid #000;font-size:22px;font-weight:700;transition:background .2s,color .2s}
.streifen-knoepfe button:hover{background:#000;color:#fff}
.streifen{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--rand)*-1);padding-inline:var(--rand);scroll-padding-inline:var(--rand)}
.streifen::-webkit-scrollbar{display:none}
.bild{flex:none;width:clamp(240px,28vw,380px);scroll-snap-align:start;text-align:left;position:relative;overflow:hidden;background:#000}
.bild img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.1,1),opacity .4s}
.bild span{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 12px;color:#fff;font-size:14px;font-weight:600;background:linear-gradient(transparent,rgba(0,0,0,.8))}
.bild:hover img{transform:scale(1.05);opacity:.9}

/* Ablauf */
.ablauf{background:var(--gips-2)}
.schritte{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);counter-reset:s;position:relative}
.schritte::before{content:"";position:absolute;top:22px;left:0;right:0;height:2px;background:#000;opacity:.15}
.schritte li{counter-increment:s;padding-right:24px;position:relative}
.schritte li::before{content:counter(s);display:grid;place-items:center;width:46px;height:46px;background:#000;color:#fff;font-weight:800;margin-bottom:20px;position:relative}
.schritte li:last-child::before{background:var(--rot)}
.schritte b{display:block;font-size:20px;font-variation-settings:var(--breit);margin-bottom:6px}

/* Gebiet */
.gebiet{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center;background:#000;color:#fff}
.gebiet h2{margin-bottom:22px}
.gebiet p{color:#bbb;max-width:44ch;font-size:18px}
.karte{width:100%;color:var(--stahl)}
.ring{fill:rgba(225,6,0,.06);stroke:var(--rot);stroke-width:2;stroke-dasharray:6 6}
.ring.innen{fill:none;stroke:#555;stroke-dasharray:3 6}
.radius{stroke:var(--rot);stroke-width:2}
.radius-text{fill:#fff;font-size:20px;font-weight:700}
.radius-text.klein{fill:#888;font-size:15px}
.puls{fill:var(--rot);opacity:.5;transform-origin:400px 400px;animation:puls 2.4s infinite}
@keyframes puls{from{transform:scale(.5);opacity:.6}to{transform:scale(4);opacity:0}}
.ort circle{fill:#fff}
.ort text{fill:#ddd;font-size:17px}
.ort.mitte circle{fill:var(--rot)}
.ort.mitte text{fill:#fff;font-weight:800;font-size:21px}

/* Kontakt */
.kontakt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px)}
.kontakt h2{margin-bottom:20px}
.kontakt-text>p{font-size:18px;max-width:42ch;margin-bottom:30px}
.kontakt-wege{display:grid;gap:10px}
.weg{display:block;text-decoration:none;padding:16px 20px;background:#fff;border-left:4px solid var(--rot);font-weight:700;font-size:18px;word-break:break-word;transition:transform .2s}
.weg:hover{transform:translateX(6px)}
.weg small{display:block;font-weight:500;font-size:13px;color:#666}
.formular{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:#fff;padding:clamp(20px,3vw,36px);align-self:start}
.formular label{display:grid;gap:6px;font-size:14px;font-weight:600}
.formular input,.formular select,.formular textarea{font:inherit;font-size:16px;padding:12px;border:1.5px solid #c9c5bd;background:var(--gips);border-radius:0;width:100%}
.formular input:focus,.formular select:focus,.formular textarea:focus{outline:none;border-color:var(--rot)}
.breit{grid-column:1/-1}
.klein{font-size:13px;color:#666}

/* Fuß */
.fuss{background:#000;color:#fff;padding:60px var(--rand) 110px}
.fuss-innen{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.fuss p{color:#999;margin-top:16px;max-width:36ch;font-size:15px}
.fuss h5{font-size:14px;color:#888;margin-bottom:10px;font-weight:600}
.fuss-spalte a{display:block;text-decoration:none;padding:4px 0;word-break:break-word}
.fuss-spalte a:hover{color:var(--rot)}
.fuss-unten{margin-top:40px;padding-top:20px;border-top:1px solid #222;color:#666;font-size:13px}

/* Schnellkontakt */
.schnell{position:fixed;right:20px;bottom:20px;z-index:40;display:flex;gap:8px;transform:translateY(140%);transition:transform .4s}
.schnell.an{transform:none}
.schnell a{display:flex;align-items:center;gap:8px;height:52px;padding:0 18px;color:#fff;text-decoration:none;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.schnell svg{width:20px;height:20px;fill:#fff}
.s-tel{background:var(--rot)}.s-wa{background:#1fa855}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.95);display:grid;grid-template-columns:64px 1fr 64px;align-items:center;opacity:0;transition:opacity .25s}
.lightbox.offen{opacity:1}
.lightbox[hidden]{display:none}
.lightbox figure{grid-column:2;display:grid;justify-items:center;gap:12px}
.lightbox img{max-height:82vh;max-width:100%;object-fit:contain}
.lightbox figcaption{color:#ddd;font-size:15px}
.lb-zu{position:absolute;top:16px;right:16px;color:#fff;font-size:40px;width:52px;height:52px;line-height:1}
.lb-pfeil{color:#fff;font-size:48px;height:100%;width:64px}
.lb-pfeil:hover{color:var(--rot)}

/* Rechtstexte */
.recht-text{max-width:720px;margin:0 auto;padding:140px var(--rand) 80px}
.recht-text h1{font-size:clamp(34px,5vw,56px);margin-bottom:30px}
.recht-text p{margin-bottom:18px}
.luecke{background:#ffe1df;border-bottom:2px solid var(--rot);padding:0 4px}

/* Einblenden */
.rein{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.1,1)}
.rein.an{opacity:1;transform:none}

/* Handy */
@media (max-width:900px){
  body{font-size:16px}
  .menue{display:block}
  .kopf{padding:8px var(--rand)}
  .kopf.fest{background:#000}
  .marke svg{width:34px;height:34px;padding:5px}
  .marke b{font-size:18px}
  html{scroll-padding-top:90px}
  section{padding-block:64px}
  .held,.fakten{padding:0}
  h2{font-size:clamp(30px,9vw,44px)}
  .kopfzeile{margin-bottom:32px}
  .fuss{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  .navi{position:fixed;inset:0;background:#000;flex-direction:column;justify-content:center;gap:26px;clip-path:circle(0 at calc(100% - 42px) 40px);transition:clip-path .5s cubic-bezier(.7,0,.2,1);z-index:-1}
  .navi.offen{clip-path:circle(150% at calc(100% - 42px) 40px)}
  .navi a{font-size:26px;font-variation-settings:var(--breit);font-weight:800}
  .kopfzeile,.vn-liste,.gebiet,.kontakt,.fuss-innen{grid-template-columns:1fr}
  .fakten{grid-template-columns:1fr 1fr}
  .fakt:last-child{grid-column:1/-1;border-top:1px solid #222}
  .fakt:nth-child(2){border-right:0}
  .leistung{grid-template-columns:1fr 96px;gap:16px;padding:22px 0}
  .leistung img{width:96px;height:96px;filter:none}
  .schritte{grid-template-columns:1fr;gap:26px}
  .schritte::before{top:0;bottom:0;left:22px;right:auto;width:2px;height:auto}
  .schritte li{display:grid;grid-template-columns:46px 1fr;gap:0 18px;padding:0}
  .schritte li::before{grid-row:span 2;margin:0}
  .formular{grid-template-columns:1fr}
  .streifen-knoepfe{display:none}
  .bild{width:64vw}
  .bild img{aspect-ratio:1}
  .held h1{font-size:clamp(38px,11.4vw,64px);font-variation-settings:"wdth" 100}
  .held-hinweis{left:var(--rand);right:auto;bottom:28px}
  .held-text{bottom:calc(76px + 100lvh - 100svh)}
  .held-zaehler{top:84px}
  .schnell{left:0;right:0;bottom:0;gap:0}
  .schnell a{flex:1;justify-content:center;height:58px;box-shadow:none;padding-bottom:env(safe-area-inset-bottom)}
  .lightbox{grid-template-columns:44px 1fr 44px}
  .lb-pfeil{width:44px;font-size:38px}
}
@media (prefers-reduced-motion:reduce){
  .held-fertig,.held-fertig img{animation:none!important;transform:none!important}
  .laser,.held-hinweis{display:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rein{opacity:1;transform:none}
}