:root {
    --cut: 24px;
    --octa: inset(0 round var(--cut));
}
/* ==========================================================================
   LEISTUNGSSEITEN – Individuelles Design
   ========================================================================== */

/* PAGE HERO – Fullwidth image with text */
.leist-hero{position:relative;height:70vh;min-height:500px;display:flex;align-items:flex-end;overflow:hidden}
.leist-hero__img{position:absolute;top:0;right:0;bottom:0;left:0}
.leist-hero__img img{width:100%;height:100%;object-fit:cover}
.leist-hero__ov{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(0,25,21,.85) 0%,rgba(0,25,21,.3) 50%,rgba(0,25,21,.15) 100%)}
.leist-hero__content{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:0 clamp(24px,5vw,64px) clamp(48px,6vw,80px);width:100%}
.leist-hero__content .tag{color:#fff}
.leist-hero__content h1{font-size:clamp(40px,7vw,80px);font-weight:900;text-transform:uppercase;letter-spacing:.03em;line-height:.95;color:#fff;margin-bottom:16px}
.leist-hero__content p{font-size:clamp(16px,1.8vw,20px);color:#fff;max-width:550px}
.leist-hero__since{font-size:clamp(18px,2.2vw,28px);font-weight:900;text-transform:none;letter-spacing:.02em;line-height:1.3;margin-bottom:0;color:#fff}

/* Hero animations */
.leist-hero .anim-lh-tag{opacity:0;transform:translateY(20px);animation:hUp .8s var(--ease) .3s forwards}
.leist-hero .anim-lh-title{opacity:0;transform:translateY(30px);animation:hUp .8s var(--ease) .5s forwards}
.leist-hero .anim-lh-sub{opacity:0;transform:translateY(20px);animation:hUp .8s var(--ease) .7s forwards}
.leist-hero .anim-lh-sub2{opacity:0;transform:translateY(20px);animation:hUp .8s var(--ease) .9s forwards}

/* INTRO SECTION */
.leist-intro{padding:clamp(60px,7vw,90px) 0}
.leist-intro__inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,72px);align-items:center}
.leist-intro__text h2{font-size:clamp(28px,4vw,44px)}
.leist-intro__text p{color:var(--w80);margin-bottom:16px;line-height:1.8}
.leist-intro__img{clip-path:var(--octa);overflow:hidden}
.leist-intro__img img{width:100%;display:block;transition:transform 1s var(--ease)}
.leist-intro__img:hover img{transform:scale(1.03)}

/* SELLING POINTS – Glassmorphism cards */
.leist-points{padding:clamp(60px,7vw,90px) 0;background:var(--bg2)}
.leist-points__head{text-align:center;margin-bottom:48px}
.leist-points__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.leist-point{padding:clamp(28px,3vw,40px);clip-path:var(--octa);background:rgba(255,255,255,.05);border:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .5s var(--ease);position:relative;overflow:hidden}
.leist-point::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at center,rgba(227,94,14,.08) 0%,transparent 60%);opacity:0;transition:opacity .5s var(--ease)}
.leist-point:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.2)}
.leist-point:hover::before{opacity:1}
.leist-point__icon{width:140px;height:auto;display:block;margin-bottom:-2px}
.leist-point__svg{width:40px;height:40px;color:var(--accent);margin-bottom:16px;display:block}
.leist-point h3{font-size:16px;margin-bottom:10px;position:relative}
.leist-point p{font-size:15px;color:var(--w80);line-height:1.7;position:relative}

/* FULL IMAGE SECTION */
.leist-fullimg{position:relative;height:50vh;min-height:400px;overflow:hidden}
.leist-fullimg img{width:100%;height:100%;object-fit:cover}
.leist-fullimg__ov{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,25,21,.35);display:flex;align-items:center;justify-content:center}
.leist-fullimg__quote{font-size:clamp(24px,3.5vw,44px);font-weight:900;text-transform:uppercase;letter-spacing:.03em;color:#fff;text-align:center;max-width:700px;padding:0 24px}

/* SKETCH SECTION */
.sketch{padding:clamp(60px,7vw,90px) 0}

/* Top text */
.sketch__top{text-align:center;max-width:700px;margin:0 auto clamp(16px,2vw,24px)}
.sketch__top h2{font-size:clamp(32px,4.5vw,52px)}
.sketch__intro{font-size:18px;color:var(--w80);line-height:1.8}

/* Sketch section gets full-width grid background */
.sketch{position:relative}
.sketch::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background-image:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
background-size:32px 32px;
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);
pointer-events:none}

/* SVG Drawing */
.sketch__drawing{position:relative;margin-bottom:clamp(16px,2vw,24px);margin-top:clamp(-20px,-3vw,-40px)}
.sketch__svg{position:relative;z-index:1;width:100%;height:auto;max-height:500px;display:block}
/* JPEG sketch – inverted with fade animation */
/* JPEG/PNG sketch – no color, white bg disappears */
.sketch__img-jpg{position:relative;z-index:1;width:100%;height:auto;max-height:500px;display:block;filter:invert(1) brightness(2);mix-blend-mode:lighten;animation:sketchFade 14s ease-in-out infinite}
/* Transparent PNG sketch – sits directly on dark bg */
.sketch__img-color{position:relative;z-index:1;width:90%;height:auto;max-height:450px;display:block;margin:0 auto;opacity:.7;animation:sketchFade 14s ease-in-out infinite}
@keyframes sketchFade{0%{opacity:0}35%{opacity:.5}65%{opacity:.5}100%{opacity:0}}

/* SVG Styles */
.arch-guide{stroke:rgba(255,255,255,.04);stroke-width:.5}
.arch-hidden{stroke:rgba(255,255,255,.15);stroke-width:.8;stroke-dasharray:6 4}
.arch-line{stroke:rgba(255,255,255,.4);stroke-width:1;fill:none}
.arch-wall{stroke:rgba(255,255,255,.5);stroke-width:1.4}
.arch-roof{fill:rgba(227,94,14,.04);stroke:none}
.arch-roof-side{fill:rgba(227,94,14,.02);stroke:none}
.arch-roof-line{stroke:rgba(227,94,14,.5);stroke-width:1.5;fill:none}
.arch-ridge{stroke:rgba(227,94,14,.6);stroke-width:2}
.arch-tile{stroke:rgba(227,94,14,.12);stroke-width:.5;fill:none}
.arch-tree{fill:none;stroke:rgba(255,255,255,.08);stroke-width:.8}
.arch-tree-trunk{stroke:rgba(255,255,255,.06);stroke-width:1}

/* Loop draw animation via CSS keyframes */
.arch-line,.arch-wall,.arch-hidden{stroke-dasharray:1400;animation:drawLine 6s var(--ease) infinite}
.arch-roof-line,.arch-ridge{stroke-dasharray:1400;animation:drawLine 6s var(--ease) .8s infinite}
.arch-tile{stroke-dasharray:600;animation:drawTile 6s var(--ease) 1.6s infinite}
.arch-roof{animation:fadeRoof 6s var(--ease) 1.5s infinite}
.arch-roof-side{animation:fadeRoof 6s var(--ease) 1.8s infinite}
.arch-tree,.arch-tree-trunk{stroke-dasharray:400;animation:drawLine 6s var(--ease) 2.2s infinite}

@keyframes drawLine{
    0%{stroke-dashoffset:1400}
    40%{stroke-dashoffset:0}
    85%{stroke-dashoffset:0}
    100%{stroke-dashoffset:1400}
}
@keyframes drawTile{
    0%{stroke-dashoffset:600}
    40%{stroke-dashoffset:0}
    85%{stroke-dashoffset:0}
    100%{stroke-dashoffset:600}
}
@keyframes fadeRoof{
    0%{opacity:0}
    35%{opacity:1}
    85%{opacity:1}
    100%{opacity:0}
}

/* Bottom two columns */
.sketch__bottom{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,72px)}
.sketch__col p{color:var(--w80);margin-bottom:14px;line-height:1.8}

/* Details list */
.leist-details__list{list-style:none;margin-top:16px}
.leist-details__list li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--w15);font-size:15px;color:var(--w80)}
.leist-details__list li::before{content:'◆';color:var(--accent);font-size:8px;flex-shrink:0}
.leist-details__list li:last-child{border-bottom:none}

/* CTA */
.leist-cta{padding:clamp(60px,7vw,90px) 0;background:var(--accent);text-align:center}
.leist-cta h2{font-size:clamp(28px,4vw,48px);color:var(--bg)}
.leist-cta p{font-size:18px;color:rgba(0,0,0,.7);margin-bottom:32px}
.leist-cta .btn{background:var(--bg);color:#fff;border-color:var(--bg)}
.leist-cta .btn--ghost{background:#fff;color:var(--bg)}
.leist-cta .btn--ghost:hover{background:var(--w80);color:var(--bg)}
.leist-cta .btn:hover{background:#000;border-color:#000;color:#fff;transform:translateY(-3px)}

/* OTHER SERVICES */
.leist-other{padding:clamp(60px,7vw,90px) 0;background:var(--bg2)}
.leist-other__head{text-align:center;margin-bottom:40px}
.leist-other__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.leist-other__card{position:relative;clip-path:var(--octa);overflow:hidden;aspect-ratio:4/3;display:block;color:#fff}
.leist-other__card img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.leist-other__card:hover img{transform:scale(1.06)}
.leist-other__card span{position:absolute;bottom:0;left:0;right:0;padding:20px;background:linear-gradient(to top,rgba(0,25,21,.8),transparent);font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}

/* RESPONSIVE */
@media(max-width:1024px){
    .leist-intro__inner{grid-template-columns:1fr}
    .sketch__bottom{grid-template-columns:1fr}
    .leist-points__grid{grid-template-columns:1fr 1fr}
    .leist-other__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
    .leist-hero{height:60vh;min-height:400px}
    .leist-points__grid{grid-template-columns:1fr}
    .leist-other__grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
    .anim-lh-tag,.anim-lh-title,.anim-lh-sub{opacity:1;transform:none}
}

/* aspect-ratio Fallback for older browsers */
@supports not (aspect-ratio:1){
    .leist-other__card{height:0;padding-bottom:75%}
}