/* =========================================================
   Hasi Solar – Designsystem
   ========================================================= */
@font-face{font-family:"Rubik";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/rubik-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Rubik";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/rubik-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Rubik";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/rubik-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Mulish";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/mulish-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Mulish";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/mulish-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Mulish";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/mulish-latin-700-normal.woff2) format("woff2")}

:root{
	--blue:#2775BB; --blue-d:#1F5F98; --yellow:#FFD327; --navy:#10202D; --slate:#253745;
	--text:#414141; --text-2:#333; --muted:#CDCDCD; --line:#EAEAEA; --white:#fff;
	--ff-h:"Rubik",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
	--ff-b:"Mulish",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
	--fs-body:16px; --fs-lead:18px; --fs-eyebrow:18px; --fs-h1:60px; --fs-h2:34px; --fs-h3:24px; --fs-big:59px;
	--lh-body:1.5;
	--s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px; --s8:64px; --s10:80px; --s12:96px;
	--sec:var(--s12);
	--wrap:1270px; --wrap-m:1120px; --gut:24px;
	--hdr:104px;
	--shadow-sm:0 0 10px rgba(0,0,0,.1);
	--ease:cubic-bezier(.2,.7,.2,1);
}
@media (max-width:1024px){:root{--fs-h1:50px;--fs-h2:32px;--fs-h3:22px;--fs-big:48px;--sec:var(--s10);--hdr:88px}}
@media (max-width:767px){:root{--fs-body:15px;--fs-lead:16px;--fs-eyebrow:16px;--fs-h1:40px;--fs-h2:30px;--fs-h3:20px;--fs-big:40px;--sec:var(--s8);--gut:16px;--hdr:81px}}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;font:400 var(--fs-body)/var(--lh-body) var(--ff-b);color:var(--text);background:var(--white);overflow-x:hidden;hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word}
body.is-dark{background:var(--navy)}
img,video,svg{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--ff-h);font-weight:600;line-height:1.2;color:var(--slate);overflow-wrap:normal;word-break:normal}
p,ul,ol,figure,blockquote{margin:0}
a{color:inherit;text-decoration:none;transition:color .2s}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-100px;z-index:1000;background:var(--yellow);color:var(--navy);padding:12px 20px;font-weight:700}
.skip:focus{top:12px}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.wrap--m{max-width:calc(var(--wrap-m) + 2*var(--gut))}
.ic{width:1em;height:1em;fill:currentColor;flex:none}

/* ---------- Buttons (einheitlich) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 32px;border:0;border-radius:0;font:600 16px/1.2 var(--ff-b);text-align:center;transition:background-color .25s var(--ease),color .25s var(--ease)}
.btn .ic--arrow{width:22px;height:22px;transition:transform .25s var(--ease)}
.btn:hover .ic--arrow{transform:translateX(4px)}
.btn--blue{background:var(--blue);color:var(--white)}
.btn--blue:hover{background:var(--yellow);color:var(--navy)}
.btn--yellow{background:var(--yellow);color:var(--navy)}
.btn--yellow:hover{background:var(--white);color:var(--blue)}
.btn--full{display:flex;width:100%}
.more{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:5px 0;font:600 16px/1.2 var(--ff-b);color:var(--blue)}
.more .ic{width:15px;height:15px;transition:transform .25s var(--ease)}
.more:hover{color:var(--slate)}
.more:hover .ic{transform:translateX(4px)}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:100;background:var(--navy);height:var(--hdr)}
.admin-bar .hdr{top:32px}
@media (max-width:782px){.admin-bar .hdr{top:0}}
.hdr__in{height:100%;display:flex;align-items:center;gap:var(--s2);padding-inline:10px 0}
.hdr__logo{flex:none;display:block}
.hdr__logo .logo{width:95px;height:auto}
.hdr__nav{flex:1;display:flex;justify-content:flex-end}
.hdr__nav .menu{display:flex;list-style:none;margin:0;padding:0}
.hdr__nav a{display:block;padding:12px clamp(10px,1.1vw,20px);font:600 clamp(17px,1.53vw,22px)/1.2 var(--ff-h);color:var(--white)}
.hdr__nav a:hover{color:var(--blue)}
.hdr__btn{flex:none;display:flex;align-items:center;justify-content:center;width:94px;height:100%;padding:0;border:0;background:transparent;color:var(--white)}
.hdr__btn .ic{width:30px;height:30px}
.hdr__btn:hover{color:var(--yellow)}
.hdr__burger{display:none}
@media (max-width:1024px){
	.hdr__nav,.hdr__oc{display:none}
	.hdr__burger{display:flex;width:76px;margin-left:auto}
	.hdr__burger .ic{width:28px;height:28px}
	.hdr__logo .logo{width:84px}
}

/* ---------- Drawer (Handy-Menü links, Kontakt-Panel rechts) ---------- */
.drawer{position:fixed;inset:0;z-index:200}
.drawer[hidden]{display:none}
.drawer__backdrop{position:absolute;inset:0;background:rgba(40,40,40,.5);opacity:0;transition:opacity .3s}
.drawer__panel{position:absolute;top:0;bottom:0;background:var(--white);overflow-y:auto;overscroll-behavior:contain;transition:transform .35s var(--ease)}
.drawer--left .drawer__panel{left:0;width:min(360px,92vw);padding:var(--s3);transform:translateX(-100%)}
.drawer--right .drawer__panel{right:0;width:max(25%,340px);max-width:100%;transform:translateX(100%)}
.drawer.is-open .drawer__backdrop{opacity:1}
.drawer.is-open .drawer__panel{transform:none}
body.has-drawer{overflow:hidden}
.mnav__top{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 5px 24px}
.mnav__logo{width:120px}
.mnav__close{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:-8px -8px 0 0;border:0;background:transparent;color:var(--blue)}
.mnav__close .ic{width:20px;height:24px}
.mnav__close:hover{color:var(--yellow)}
.mnav__menu{list-style:none;margin:0;padding:0}
.mnav__menu a{display:block;padding:14px 6px;font:600 28px/1.2 var(--ff-h);color:var(--blue)}
.mnav__menu a:hover{color:var(--slate)}
.oc{padding:150px 0 40px}
.oc__close{position:absolute;top:24px;right:24px;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--line);background:transparent;color:var(--slate)}
.oc__close .ic{width:16px;height:16px}
.oc__close:hover{color:var(--blue)}
.oc__body{padding:20px 30px;display:flex;flex-direction:column;gap:20px}
.oc__logo{width:254px;max-width:100%;margin-inline:auto}
.oc__claim{font:600 23px/1.2 var(--ff-h);color:var(--yellow);text-align:center;padding-inline:20px}
.oc__hr{width:80%;margin:0 auto;border:0;border-top:1px solid rgba(197,197,197,.2)}
.oc__hr + .oc__hr{margin-top:-10px}
.oc__title{font:600 24px/1.3 var(--ff-h);color:var(--yellow)}
.oc__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.oc__list li{display:flex;gap:10px;align-items:flex-start;font:500 18px/1.2 var(--ff-h);color:var(--blue)}
.oc__list .ic{width:14px;height:14px;margin-top:3px}
.oc__list a:hover{color:var(--slate)}

/* ---------- Sektionen ---------- */
.sec{padding-block:var(--sec)}
.sec--white{background:var(--white);box-shadow:0 1px 0 var(--white),0 -1px 0 var(--white)}
.sec--light{background:var(--white)}
.sec--dark{background:transparent;color:var(--white)}
.sec--pad-sm{padding-block:var(--s6)}

/* Überschriften-Block */
.sh{display:flex;flex-direction:column;gap:10px}
.sh--center{text-align:center;align-items:center}
.sh--left{text-align:left}
.eyebrow,.sh__sub{font:500 var(--fs-eyebrow)/1.2 var(--ff-h);color:var(--yellow)}
.sh__title{font-size:var(--fs-h2);line-height:1.2;color:var(--blue)}
.sh__desc{margin-top:6px;max-width:1140px}
.sh__desc p{color:var(--text-2)}
.sh--center .sh__desc{margin-inline:auto}
.sh__title--yellow{color:var(--yellow)}
.sh--muted-eyebrow .eyebrow{color:var(--text)}
.sh--on-blue .sh__title{color:var(--white);font-weight:500}
.sh--on-blue .sh__sub{font-size:clamp(16px,2vw,29px)}
.sh--narrow{max-width:1000px;margin-inline:auto}

/* Fließtext */
.rt{display:flex;flex-direction:column;gap:14px}
.rt strong{font-weight:700}
.rt a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.split__text,.scard2,.bluebox{display:flex;flex-direction:column;gap:20px}
.split__text > .sh + .rt,.scard2 > .sh + .rt{margin-top:0}

/* Hero */
.hero{position:relative;display:flex;align-items:center;min-height:calc(100svh - var(--hdr));padding-block:var(--s10);color:var(--white);isolation:isolate;overflow:hidden}
.hero--home{min-height:max(calc(100svh - var(--hdr)),600px)}
.hero__bg,.banner__bg,.gallery__bg{position:absolute;inset:0;z-index:-1}
.hero__bg img,.banner__bg img,.gallery__bg img{width:100%;height:100%;object-fit:cover}
.hero__bg::after,.banner__bg::after{content:"";position:absolute;inset:0;background:rgba(37,55,69,.6)}
.hero__in{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.hero__eyebrow{font:500 var(--fs-eyebrow)/1.2 var(--ff-h);color:var(--yellow)}
.hero--home .hero__eyebrow{font-size:clamp(30px,3.4vw,49px)}
.hero__title{font-size:var(--fs-h1);line-height:1.05;color:var(--white);max-width:22ch;overflow-wrap:normal}
.hero--home .hero__title{max-width:none}
.hero__lead{font-size:var(--fs-lead);line-height:1.5;max-width:60ch}
.hero .btn{margin-top:0}
@media (max-width:767px){.hero{padding-block:var(--s8)}.hero__title{font-size:min(var(--fs-h1),11vw)}}

/* Banner (Kontakt / Rechtstexte) */
.banner{position:relative;isolation:isolate;overflow:hidden;color:var(--white);padding-block:90px}
.banner__bg img{object-position:0 10%}
.banner__title{font:700 var(--fs-h1)/1 var(--ff-h);color:var(--white);text-align:center}
.banner--empty{min-height:160px}
@media (max-width:767px){.banner{padding-block:48px}.banner--empty{min-height:120px}.banner__title{font-size:44px}}

/* Leistungs-Karten (Start) */
.sec--intro{padding-bottom:var(--s6)}
.sec--intro .sh__title{font-size:var(--fs-h2)}
.sec--cards{padding-top:0;padding-bottom:var(--s6)}
.scards{display:flex;flex-wrap:wrap;justify-content:center;gap:32px 24px}
.scard{display:flex;flex-direction:column;flex:0 1 calc((100% - 48px)/3);min-width:0}
.scard__body{transition:box-shadow .35s var(--ease)}
.scard:hover .scard__body{box-shadow:0 10px 30px rgba(16,32,45,.12)}
.scard__img{aspect-ratio:3/2;overflow:hidden}
.scard__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.scard:hover .scard__img img{transform:scale(1.04)}
.scard__body{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:30px;background:var(--white);box-shadow:var(--shadow-sm)}
.scard__title{font-size:var(--fs-h3);color:var(--blue)}
.scard__body p{flex:1}
@media (max-width:1024px){.scard{flex-basis:calc((100% - 24px)/2)}}
@media (max-width:767px){.scards{gap:var(--s4)}.scard{flex-basis:100%}.scard__body{padding:24px}}

/* Blaue Box */
.boxwrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.bluebox{background:var(--blue);color:var(--white);padding:50px;align-items:center;text-align:center}
.bluebox--lg{padding-block:50px}
.bluebox .sh__title{color:var(--white)}
.bluebox .sh__sub{font-size:clamp(16px,2vw,29px);color:var(--yellow)}
.bluebox .rt{max-width:1140px;font-size:var(--fs-lead)}
.bluebox .sh__desc p,.bluebox .rt p{color:var(--white)}
.bluebox .sh__desc{font-size:var(--fs-lead)}
.bluebox .btn--blue{background:var(--yellow);color:var(--navy)}
.bluebox .btn--blue:hover{background:var(--white);color:var(--blue)}
.bluebox--text{align-items:stretch}
.bluebox--text .sh{align-items:center;text-align:center}
.bluebox--text .rt{max-width:none;font-size:var(--fs-body);text-align:left}
.bluebox--text .rt--center,.rt--center{text-align:center}
.bluebox--narrow{max-width:926px;margin-inline:auto;width:100%}
.sec--cta{padding-block:10px}
.sec--cta-sub{padding-block:10px var(--s12)}
@media (max-width:767px){.bluebox{padding:30px 20px}}

/* Feature-Karten (Start) */
.sec--features{padding-top:0;padding-bottom:var(--s6)}
.fcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.fcard{position:relative;isolation:isolate;margin:10px;padding:25px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;border:1px solid var(--line);overflow:hidden;transition:color .35s,border-color .35s}
.fcard::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.fcard:hover{border-color:var(--blue);color:var(--white)}
.fcard:hover::before{transform:scaleX(1)}
.fcard__ic{display:flex;color:var(--blue);padding-top:10px;transition:color .35s}
.fcard__ic .ic{width:46px;height:46px}
.fcard__title{font-size:var(--fs-h3);color:var(--blue);transition:color .35s}
.fcard:hover .fcard__ic,.fcard:hover .fcard__title{color:var(--white)}
@media (max-width:1024px){.fcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.fcards{grid-template-columns:1fr}}

/* Zahlen */
.sec--facts{padding-bottom:var(--s10)}
.sec--facts .sh{margin-bottom:var(--s4)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.fact{padding:50px 20px;box-shadow:0 8px 30px rgba(16,32,45,.12);border-top:3px solid var(--yellow);text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.fact__num{font:600 50px/1 var(--ff-h);color:var(--slate);display:flex;align-items:flex-start;gap:8px;font-variant-numeric:tabular-nums}
.fact__num sup{font-size:34px;line-height:1;color:var(--yellow);top:0;position:relative;margin-top:-6px}
.fact__label{font-size:var(--fs-body);color:var(--text)}
@media (max-width:1024px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.facts{grid-template-columns:1fr;padding-inline:20px}.fact{padding:40px 20px}.fact__num{font-size:46px}}

/* Kundenbewertungen */
.sec--testi{padding-block:var(--s6) var(--s12)}
.testi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.tcard{background:var(--white);box-shadow:0 0 15px rgba(0,0,0,.1);padding:60px}
.tcard__head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:28px}
.tcard__head .eyebrow{color:var(--blue)}
.tcard__head .sh__title{color:var(--slate)}
.tnav{display:flex;gap:10px;margin-top:auto}
.tnav__b{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--blue)}
.tnav__b svg{width:20px;height:40px}
.tnav__b:hover{color:var(--slate)}
.tslider{position:relative;display:grid}
.tslide{grid-area:1/1;display:grid;grid-template-columns:1fr auto;gap:0 20px;padding-right:0;animation:tfade .5s var(--ease)}
.tslide[hidden]{display:grid;visibility:hidden;animation:none}
@keyframes tfade{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.tslide__who{display:flex;flex-direction:column}
.tslide__who strong{font:500 18px/1.2 var(--ff-h);color:var(--slate)}
.tslide__who span{font-size:15px;color:var(--muted)}
.tslide__q{width:40px;height:40px;fill:var(--muted)}
.tslide blockquote{grid-column:1/-1;margin-top:28px;font-size:var(--fs-lead);line-height:1.5}
.gbadge{display:flex;align-items:center;gap:8px;margin-top:4px}
.gbadge__g{width:16px;height:16px}
.tslide__stars{display:flex;gap:2px}
.tslide__stars svg{width:16px;height:16px;fill:#FBBC04}
.tslide blockquote p + p{margin-top:12px}
.glink{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:24px;font:600 16px/1.2 var(--ff-b);color:var(--blue)}
.glink .gbadge__g{width:20px;height:20px}
.glink .ic--arrow{width:15px;height:15px;transition:transform .25s var(--ease)}
.glink:hover{color:var(--slate)}
.glink:hover .ic--arrow{transform:translateX(4px)}
.tvideo{position:relative;z-index:1}
.tvideo__v{width:100%;height:auto}
@media (max-width:1024px){.testi{grid-template-columns:1fr}.tcard{padding:40px}}
@media (max-width:767px){.sec--testi{padding-block:50px}.tcard{padding:30px 24px}.tcard__head{flex-direction:column}}

/* Galerie */
.gallery{position:relative;isolation:isolate;overflow:hidden;padding:var(--s12) 0;background:radial-gradient(60% 70% at 50% 0%,rgba(39,117,187,.32) 0%,rgba(39,117,187,0) 70%),linear-gradient(180deg,#14293A 0%,var(--navy) 100%)}
.gallery::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 80% at 50% 30%,#000 0%,transparent 100%);mask-image:radial-gradient(70% 80% at 50% 30%,#000 0%,transparent 100%)}
.gallery .sh__title::after{content:"";display:block;width:56px;height:4px;margin:18px auto 0;background:var(--yellow)}
.gallery + .sec--clean{border-top:1px solid rgba(255,255,255,.06)}
.gcar{margin-top:var(--s6);overflow:hidden;touch-action:pan-y}
.gcar__track{display:flex;gap:24px;list-style:none;margin:0;padding:0;transition:transform .6s var(--ease);will-change:transform}
.gslide{flex:0 0 calc((100% - 48px)/3)}
.gslide__btn{position:relative;display:block;width:100%;aspect-ratio:1;padding:0;border:0;overflow:hidden;background:var(--slate);cursor:zoom-in}
.gslide__btn img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gslide__btn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.gslide__btn:hover img,.gslide__btn:focus-visible img{transform:scale(1.05)}
.gslide__btn:hover::after,.gslide__btn:focus-visible::after{transform:scaleX(1)}
.gslide__btn:focus-visible{outline-offset:-3px}
.gnav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:var(--s5)}
.gnav__b{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:1px solid rgba(255,255,255,.35);background:transparent;color:var(--white);transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.gnav__b svg{width:14px;height:28px}
.gnav__b:hover{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.gdots{display:flex;align-items:center}
.gdots button{display:flex;align-items:center;justify-content:center;width:24px;height:44px;padding:0;border:0;background:transparent}
.gdots button::before{content:"";width:8px;height:8px;background:rgba(255,255,255,.4);transition:width .3s var(--ease),background-color .3s var(--ease)}
.gdots button[aria-current="true"]{width:36px}
.gdots button[aria-current="true"]::before{width:28px;background:var(--yellow)}
@media (max-width:1024px){.gslide{flex-basis:calc((100% - 24px)/2)}}
@media (max-width:767px){.gallery{padding:var(--s8) 0}.gcar{margin-top:var(--s4)}.gcar__track{gap:16px}.gslide{flex-basis:85%}.gslide__btn{aspect-ratio:4/5}.gnav{margin-top:var(--s3);gap:8px}.gdots button{width:18px}}
/* Lightbox */
.lb{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--white);overflow:hidden}
.lb::backdrop{background:rgba(16,32,45,.94)}
.lb[open]{display:flex;align-items:center;justify-content:center}
.lb__img{max-width:calc(100% - 160px);max-height:calc(100% - 120px);width:auto;height:auto;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb__b{position:absolute;display:flex;align-items:center;justify-content:center;width:52px;height:52px;padding:0;border:1px solid rgba(255,255,255,.35);background:rgba(16,32,45,.6);color:var(--white)}
.lb__b:hover{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.lb__b svg{width:14px;height:28px}
.lb__x{top:20px;right:20px}
.lb__x svg{width:20px;height:20px}
.lb__p{left:24px;top:50%;transform:translateY(-50%)}
.lb__n{right:24px;top:50%;transform:translateY(-50%)}
.lb__c{position:absolute;left:0;right:0;bottom:24px;text-align:center;font:500 14px/1 var(--ff-b);color:rgba(255,255,255,.75)}
@media (max-width:767px){.lb__img{max-width:100%;max-height:calc(100% - 180px)}.lb__p,.lb__n{top:auto;bottom:16px;transform:none}.lb__p{left:16px}.lb__n{right:16px}.lb__c{bottom:34px}.lb__x{top:12px;right:12px}}

/* Reinigung – Vorher/Nachher */
.sec--clean{padding-block:50px var(--s10)}
.big-title{font:600 var(--fs-big)/1 var(--ff-h);color:var(--white);margin-bottom:var(--s6)}
.ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:var(--s6)}
.ba__item{display:flex;flex-direction:column;gap:20px;padding:10px}
.ba__label{font:600 32px/1 var(--ff-h);color:var(--yellow);text-align:center}
.ba__item img{width:100%;aspect-ratio:3/4;object-fit:cover}
.sec--ba{padding-block:var(--s6)}
.sec--ba .ba{margin-bottom:0}
@media (max-width:767px){.ba{grid-template-columns:1fr}.ba__label{font-size:28px}}

/* Split (Bild + Text) */
.sec--split{padding-block:80px 100px}
.sec--split + .sec--split{padding-top:0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center}
.media img{width:100%;height:auto}
@media (max-width:1024px){.split{gap:var(--s5)}}
@media (max-width:767px){.split{grid-template-columns:1fr}.split--imgright .media{order:2}.sec--split{padding-block:50px}}

/* Vorteils-Liste mit Kreis-Icon */
.benefit{display:flex;align-items:flex-start;gap:16px;padding:20px 0 0 30px}
.benefit__ic{flex:none;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--white);box-shadow:5px 5px 10px rgba(0,0,0,.1);color:var(--blue);transition:background-color .3s,color .3s}
.benefit__ic .ic{width:22px;height:22px}
.benefit__body{display:flex;flex-direction:column;gap:6px}
.benefit__title{font-size:var(--fs-h3);color:var(--slate);transition:color .3s}
.benefit:hover .benefit__ic{background:var(--blue);color:var(--white)}
.benefit:hover .benefit__title{color:var(--blue)}
@media (max-width:767px){.benefit{padding-left:0}.benefit__ic .ic{width:18px;height:18px}}

/* Häkchen-Liste */
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.checklist li{display:flex;gap:10px;align-items:flex-start;color:var(--text-2)}
.checklist .ic--check{width:14px;height:14px;margin-top:5px;fill:var(--blue)}

/* Solarzaun-Kacheln */
.sec--zaun{padding-block:50px var(--s12)}
.sec--zaun .boxwrap{display:flex;flex-direction:column;gap:80px}
.cards2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.scard2{padding:50px 60px;box-shadow:0 0 10px rgba(0,0,0,.5);background:var(--white)}
.scard2 .sh__title{font-weight:500}
.scard2 .rt{color:#000}
@media (max-width:767px){.cards2{grid-template-columns:1fr;gap:var(--s4)}.scard2{padding:30px 24px}.sec--zaun .boxwrap{gap:var(--s6)}}

/* Kontakt */
.sec--contact .rt{margin-top:20px;color:var(--text-2)}
.cboxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 40px;margin:40px 0 30px}
.cbox{display:flex;gap:15px;align-items:flex-start}
.cbox__ic{flex:none;display:flex;align-items:center;justify-content:center;width:60px;height:60px;background:var(--blue);color:var(--white);transition:color .3s}
.cbox:hover .cbox__ic{color:var(--yellow)}
.cbox__ic .ic{width:30px;height:30px}
.cbox__title{font:600 22px/1 var(--ff-h);color:var(--slate);margin:10px 0 5px}
.cbox a{display:inline-block;padding-block:2px}
.cbox a:hover{color:var(--blue)}
.divider{border:0;border-top:1px solid var(--line);margin:0}
.sec--contact{padding-bottom:var(--s8)}
.sec--form{padding-top:0;padding-bottom:50px}
.formcard{background:var(--white);box-shadow:var(--shadow-sm);border-radius:10px;padding:50px;max-width:1240px;margin-inline:auto}
@media (max-width:767px){.cbox__title{font-size:20px}.cboxes{grid-template-columns:1fr;gap:var(--s3)}.formcard{padding:24px 16px}}

/* Formular */
.cform{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:20px 10px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field--half{grid-column:span 5}
.field--wide{grid-column:span 5}
.field--narrow{grid-column:span 2}
.field--full{grid-column:1/-1}
.cform label{font:400 18px/1.5 var(--ff-b);color:var(--slate)}
.cform input:not([type=checkbox]),.cform textarea{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--line);border-radius:0;background:var(--white);font:400 16px/1.5 var(--ff-b);color:var(--text);transition:border-color .2s}
.cform textarea{min-height:146px;resize:vertical}
.cform input:focus,.cform textarea:focus{border-color:#CECECE;outline:2px solid var(--blue);outline-offset:0}
.cform [aria-invalid=true]{border-color:#C12318}
.field--check{flex-direction:row;align-items:flex-start;gap:12px}
.field--check input{flex:none;width:24px;height:24px;margin:3px 0 0;accent-color:var(--blue)}
.field--check a{color:var(--text);text-decoration:underline;display:inline-block;padding-block:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn--submit{min-height:52px}
.btn--submit[disabled]{opacity:.6;cursor:wait}
.form__msg{grid-column:1/-1;padding:14px 16px;font-weight:600}
.form__msg.is-ok{background:#E8F4EA;color:#1F6B2C}
.form__msg.is-err{background:#FBEAE9;color:#9B1C13}
@media (max-width:767px){.field--half,.field--wide,.field--narrow{grid-column:1/-1}.cform label{font-size:16px}}

/* Google Maps (2-Klick) */
.map{position:relative;background:#e9eef2 linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5));border:1px solid #808080;display:flex;align-items:center;justify-content:center;text-align:center;color:#555}
.map::before{content:"";position:absolute;inset:0;background:url("../img/map.svg") center/cover no-repeat;opacity:.5}
.map__ph{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;width:min(440px,calc(100% - 32px));padding:32px;background:rgba(255,255,255,.94);box-shadow:0 10px 30px rgba(16,32,45,.15)}
.map__h{font:600 24px/1.2 var(--ff-h);color:var(--slate)}
.map__t{font:400 15px/1.5 var(--ff-b);color:var(--text)}
.map__t a{text-decoration:underline}
.map__btn{min-height:48px;margin-top:4px;padding:0 24px;border:0;background:var(--blue);font:600 16px/1.2 var(--ff-b);color:var(--white);transition:background-color .25s var(--ease),color .25s var(--ease)}
.map__btn:hover{background:var(--yellow);color:var(--navy)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map.is-loaded .map__ph,.map.is-loaded::before{display:none}
.map--wide{height:450px;border-inline:0}
.map--footer{height:450px}

/* Rechtstexte */
.sec--legal{padding-block:var(--s8) var(--s12)}
.sec--legal-top{padding-top:var(--s5)}
.legal{display:flex;flex-direction:column;gap:14px;color:var(--text-2)}
.legal h1,.legal h2,.legal h3,.legal h4,.legal h5{margin-top:14px}
.legal__h1,.legal h2{font:500 24px/1.2 var(--ff-b);color:var(--text-2)}
.legal__title{font:500 40px/1.2 var(--ff-b);color:var(--text-2);margin:0}
.legal--cookie h2{font:600 22px/1.2 var(--ff-h);color:var(--slate)}
.legal h3{font:500 22px/1.2 var(--ff-b);color:var(--text-2)}
.legal h4{font:500 16px/1.2 var(--ff-b);color:var(--text-2)}
.legal h5{font:500 15px/1.2 var(--ff-b);color:var(--text-2)}
.legal a{color:var(--text);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.legal a:hover{color:var(--blue)}
.legal ul,.legal ol{padding-left:1.4em;display:grid;gap:6px}
.legal table{border-collapse:collapse;width:100%;font-size:14px}
.legal td,.legal th{border:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}
.legal details{border:1px solid var(--line);background:#F7F7F7;padding:12px 16px}
.legal summary{cursor:pointer;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-weight:600;min-height:44px;align-items:center}
.legal summary h3{margin:0;font-size:18px}
.legal details[open] summary{margin-bottom:12px}
.legal--cookie{max-width:800px}
.legal--cookie p,.legal--cookie li{font-size:15px}

/* ---------- Footer ---------- */
.ftr{position:relative;color:var(--white)}
.fcta-wrap{position:relative;z-index:2;max-width:calc(1270px + 2*var(--gut));margin:0 auto -100px;padding:10px var(--gut) 0}
.fcta{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:70px 60px;background:var(--slate)}
.fcta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fcta-bg) center/cover no-repeat;opacity:.1}
.fcta__text{display:flex;flex-direction:column;gap:20px;max-width:760px}
.fcta__title{font:600 32px/1 var(--ff-h);color:var(--yellow)}
.fcta__text p{font-size:var(--fs-lead);line-height:1.5}
.ftr__main{background:var(--navy);padding:180px 0 10px}
.ftr__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;max-width:1381px;margin:0 auto;padding:0 10px 60px}
.ftr__col{display:flex;flex-direction:column;gap:20px;padding:10px;min-width:0}
.ftr__col--brand img{width:70%;max-width:216px}
.ftr__col p{font-size:15px;line-height:1.5}
.ftr__h{font:600 24px/1.3 var(--ff-h);color:var(--white)}
.ftr__menu{list-style:none;margin:0;padding:0}
.ftr__menu a{display:block;padding:13px 0;font:400 16px/1.25 var(--ff-b);color:var(--yellow)}
.ftr__menu a:hover{color:var(--white)}
.ftr__contact{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px;line-height:1.5}
.ftr__contact li{display:flex;gap:10px;align-items:flex-start}
.ftr__contact .ic{width:14px;height:14px;margin-top:5px;fill:var(--yellow)}
.ftr__contact a{display:inline-block;padding-block:2px}
.ftr__contact a:hover{color:#ccc}
.ftr__addr{font-size:15px;line-height:1.5}
.ftr__route{align-self:flex-start;min-height:48px;padding:0 24px}
.ftr__bottom{max-width:1381px;margin:0 auto;padding:20px 10px 10px;display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(197,197,197,.11);font-size:15px;line-height:32px}
.ftr__bottom a{display:inline-block;padding-block:4px;color:var(--blue)}
.ftr__bottom a:hover{color:var(--yellow)}
@media (max-width:1024px){
	.fcta{flex-direction:column;align-items:flex-start;padding:50px 40px}
	.ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.ftr__col--brand img{width:48%}
}
@media (max-width:767px){
	.fcta{padding:40px 24px}.fcta__title{font-size:28px}
	.fcta-wrap{margin-bottom:-80px}
	.ftr__main{padding-top:130px}
	.ftr__grid{grid-template-columns:1fr;gap:var(--s2)}
	.ftr__col--brand img{width:180px}
	.ftr__h{font-size:20px}
	.ftr__bottom{flex-direction:column;gap:0;font-size:13px}
	.map--footer{height:300px}
}

/* ---------- Einblenden beim Scrollen (wie im Original: fadeInUp) ---------- */
.js .reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}

.sec--clean .btn--full{width:auto;max-width:max-content;margin-inline:auto}
@media (min-width:768px){.split .media img{max-height:620px;object-fit:cover}}
.sec--features .fcards{max-width:calc(var(--wrap) + 2*var(--gut));margin-inline:auto;padding-inline:calc(var(--gut) - 10px)}