/* KEEPKAS – Objektpflege | Außenanlagen · Nachbau der Mockups (31.10.2026) */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/poppins-700.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/poppins-800.woff2) format("woff2")}

:root{
 --lime:#9fe000;          /* Akzent: Knöpfe, Striche, Schrift auf dunkel */
 --lime-h:#b2f01a;
 --gruen:#83bc20;         /* Icon-Grün */
 --gruen-t:#5f9a0e;       /* grüne Schrift auf hell (Kontrast) */
 --dunkel:#0a1410;
 --dunkel-2:#121c17;
 --flaeche:#f5f6f7;
 --rand:#e4e7e9;
 --text:#1d2420;
 --text-2:#4c5550;
 --weiss:#fff;
 --max:1240px;
 --rad:10px;
 --schatten:0 18px 40px -24px rgba(10,20,16,.35);
 --kopf-h:84px;
 --font:Poppins,"Segoe UI",Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--kopf-h) + 12px)}
body{margin:0;font:400 16px/1.6 var(--font);color:var(--text);background:var(--weiss);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
picture{display:contents}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.08;letter-spacing:-.02em;font-weight:800;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--lime);color:var(--dunkel);padding:10px 16px;border-radius:8px;font-weight:600}
.skip:focus{left:16px}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:4px}
.i{width:1.15em;height:1.15em;flex:none;display:inline-block;vertical-align:middle}
.gruen{color:var(--gruen-t)}
.dunkel .gruen,.hero .gruen,.cta .gruen{color:var(--lime)}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;background:var(--lime);color:var(--dunkel);font:700 1rem/1.2 var(--font);padding:16px 28px;border-radius:8px;text-decoration:none;border:2px solid var(--lime);cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s;box-shadow:0 10px 24px -14px rgba(159,224,0,.9)}
.btn:hover{background:var(--lime-h);border-color:var(--lime-h);transform:translateY(-2px)}
.btn .i:last-child{transition:transform .2s}
.btn:hover .i:last-child{transform:translateX(4px)}
.btn-sm{padding:11px 20px;font-size:.92rem}
.btn-rand{background:transparent;color:var(--weiss);border:1.5px solid rgba(255,255,255,.85);box-shadow:none;font-weight:600;padding:11px 22px}
.btn-rand:hover{background:rgba(255,255,255,.1);border-color:var(--lime)}
.btn-rand-d{background:transparent;color:var(--weiss);border:1.5px solid rgba(255,255,255,.7);box-shadow:none;font-weight:600}
.link-pfeil{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.95rem;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.link-pfeil:hover{color:var(--gruen-t)}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:box-shadow .3s,border-color .3s}
.kopf.klein{box-shadow:0 8px 30px -18px rgba(10,20,16,.35);border-color:var(--rand)}
.kopf-in{display:flex;align-items:center;gap:24px;height:var(--kopf-h)}
.kopf-logo{flex:none;display:block}
.kopf-logo img{width:170px;height:auto}
.nav{flex:1;display:flex;justify-content:center}
.nav ul{display:flex;gap:clamp(18px,2.6vw,40px)}
.nav a{text-decoration:none;font-weight:500;font-size:.98rem;color:var(--text);position:relative;padding:8px 0;transition:color .2s}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--lime);transform:scaleX(0);transition:transform .25s;border-radius:2px}
.nav ul a:hover{color:var(--gruen-t)}
.nav ul a:hover::after,.nav ul a[aria-current]::after{transform:scaleX(1)}
.nav ul a[aria-current]{color:var(--gruen-t);font-weight:600}
.nav-cta-m{display:none}
.kopf-cta{flex:none}
.burger{display:none;flex:none;width:46px;height:46px;border:0;background:var(--flaeche);border-radius:10px;cursor:pointer;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--dunkel);border-radius:2px;transition:transform .3s,opacity .2s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:28px}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- Bausteine ---------- */
.eyebrow{display:flex;align-items:center;gap:14px;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dunkel)}
.eyebrow::before{content:"";width:40px;height:5px;background:var(--lime);border-radius:1px;flex:none}
.hero .eyebrow,.dunkel .eyebrow,.cta .eyebrow{color:var(--weiss)}
.eyebrow.ohne::before{display:none}
.eyebrow.gr{color:var(--gruen-t)}
.h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.abschnitt{padding-block:clamp(56px,7vw,96px)}
.grau{background:var(--flaeche)}
.lead{font-size:1.05rem;color:var(--text-2);max-width:62ch}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.da{opacity:1;transform:none}
.rv-2{transition-delay:.1s}.rv-3{transition-delay:.2s}.rv-4{transition-delay:.3s}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;color:var(--weiss);background:var(--dunkel);overflow:hidden}
.hero-bild{position:absolute;inset:0;z-index:-2}
.hero-bild img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:heroZoom 14s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,12,9,.92) 0%,rgba(6,12,9,.78) 30%,rgba(6,12,9,.25) 58%,rgba(6,12,9,0) 75%),linear-gradient(0deg,rgba(6,12,9,.35),transparent 30%)}
.hero-in{min-height:clamp(520px,44vw,640px);display:flex;flex-direction:column;justify-content:center;padding-block:clamp(48px,6vw,80px);gap:18px}
.hero-in>*{max-width:600px}
.hero h1{font-size:clamp(2.7rem,6.4vw,5.4rem);line-height:.98;letter-spacing:-.025em}
.hero h1 .z{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .z>span{display:block;animation:zeile .9s cubic-bezier(.2,.8,.2,1) both}
.hero h1 .z:nth-child(2)>span{animation-delay:.12s}.hero h1 .z:nth-child(3)>span{animation-delay:.24s}
@keyframes zeile{from{transform:translateY(105%)}to{transform:none}}
.hero .unter{font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:700;line-height:1.3;letter-spacing:-.01em}
.hero .text{font-size:1.04rem;color:rgba(255,255,255,.88);max-width:540px}
.hero .btn{margin-top:10px;align-self:flex-start}
.hero-in>.eyebrow,.hero .unter,.hero .text,.hero .btn{animation:auf .9s cubic-bezier(.2,.8,.2,1) both}
.hero-in>.eyebrow{animation-delay:0s}.hero .unter{animation-delay:.4s}.hero .text{animation-delay:.5s}.hero .btn{animation-delay:.62s}
@keyframes auf{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero-klein .hero-in{min-height:clamp(420px,32vw,480px)}
.hero-klein h1{font-size:clamp(2.5rem,5.2vw,4.3rem)}

/* ---------- Start: Leistungskarten ---------- */
.lk-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 0 0}
.lk{position:relative;isolation:isolate;min-height:clamp(440px,36vw,520px);color:var(--weiss);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(28px,4vw,56px);overflow:hidden;text-decoration:none}
.lk>picture img,.lk>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.lk:hover>img,.lk:hover picture img{transform:scale(1.05)}
.lk::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(6,12,9,.95) 0%,rgba(6,12,9,.78) 38%,rgba(6,12,9,.15) 72%,rgba(6,12,9,0) 100%)}
.ring{width:64px;height:64px;border-radius:50%;border:2.5px solid var(--lime);display:grid;place-items:center;color:var(--lime);margin-bottom:18px;background:rgba(10,20,16,.35)}
.ring .i{width:30px;height:30px}
.lk h2{font-size:clamp(1.7rem,2.8vw,2.3rem);letter-spacing:.01em;text-transform:uppercase;font-weight:800}
.lk .lk-text{font-size:1.12rem;font-weight:600;line-height:1.35;margin-top:10px;max-width:30ch}
.strich{display:block;width:44px;height:3px;background:var(--lime);margin:20px 0 18px;border-radius:2px}
.punkte{display:flex;flex-wrap:wrap;gap:6px 0;font-size:.95rem;color:rgba(255,255,255,.92)}
.punkte li{display:flex;align-items:center}
.punkte li+li::before{content:"·";margin:0 12px;color:rgba(255,255,255,.7)}
.lk .btn-rand{margin-top:22px;align-self:flex-start}

/* ---------- Vorteile ---------- */
.vorteile{display:grid;grid-template-columns:repeat(4,1fr);padding-block:clamp(34px,4vw,48px)}
.vt{display:flex;flex-direction:column;gap:6px;padding:0 clamp(14px,2vw,28px)}
.vt+.vt{border-left:1px solid var(--rand)}
.vt:first-child{padding-left:0}
.vt .ico{width:54px;height:54px;border-radius:50%;border:2px solid var(--gruen);display:grid;place-items:center;color:var(--gruen);margin-bottom:10px}
.vt .ico .i{width:28px;height:28px}
.vt h3{font-size:1.13rem;font-weight:700;letter-spacing:-.01em}
.vt p{font-size:.94rem;color:var(--text-2);line-height:1.5}
.vt-gross .ico{border:0;width:auto;height:auto;justify-content:start}
.vt-gross .ico .i{width:52px;height:52px}

/* ---------- Galerie / Einblicke ---------- */
.ein-kopf{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;margin-bottom:28px}
.ein-kopf h2{display:flex;align-items:center;gap:20px}
.ein-kopf h2::before{content:"";width:46px;height:6px;background:var(--lime);flex:none}
.ein-kopf p{color:var(--text-2);font-size:.98rem}
.karussell{position:relative}
.k-spur{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*18px)/4);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth;padding-bottom:4px}
.k-spur::-webkit-scrollbar{display:none}
.k-karte{scroll-snap-align:start;margin:0}
.k-karte .k-bild{overflow:hidden;aspect-ratio:16/10;background:var(--rand)}
.k-karte img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.k-karte:hover img{transform:scale(1.06)}
.k-karte figcaption{font-size:.9rem;font-weight:600;margin-top:10px}
.k-pfeil{position:absolute;top:calc(50% - 30px);width:48px;height:48px;border-radius:50%;border:0;background:var(--weiss);box-shadow:0 8px 24px -10px rgba(0,0,0,.35);display:grid;place-items:center;cursor:pointer;z-index:2;color:var(--dunkel);transition:background .2s,transform .2s}
.k-pfeil:hover{background:var(--lime)}
.k-pfeil:disabled{opacity:.35;cursor:default}
.k-zur{left:-24px}.k-vor{right:-24px}
.k-zur .i{transform:rotate(180deg)}

/* ---------- Ablauf ---------- */
.ablauf h2{text-align:center;margin-bottom:clamp(30px,4vw,44px)}
.ablauf.links h2{text-align:left;display:flex;align-items:center;gap:20px}
.ablauf.links h2::before{content:"";width:46px;height:6px;background:var(--lime);flex:none}
.schritte{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;align-items:start}
.schritt{display:grid;grid-template-columns:auto auto 1fr;gap:14px;align-items:start}
.nr{width:58px;height:58px;border-radius:50%;background:#eef7d9;display:grid;place-items:center;font-weight:800;font-size:1.05rem;color:var(--dunkel)}
.schritt .ico{color:var(--gruen);padding-top:10px}
.schritt .ico .i{width:34px;height:34px}
.schritt h3{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;margin:6px 0 6px}
.schritt p{font-size:.88rem;color:var(--text-2);line-height:1.55}
.verbinder{width:clamp(30px,4vw,60px);height:2px;background:linear-gradient(90deg,var(--lime),#d8eda8);margin-top:28px;transform-origin:left;transform:scaleX(0);transition:transform 1s .3s cubic-bezier(.2,.8,.2,1)}
.da .verbinder,.verbinder.da{transform:scaleX(1)}

/* ---------- CTA dunkel ---------- */
.cta{position:relative;isolation:isolate;color:var(--weiss);background:var(--dunkel);overflow:hidden}
.cta>picture img,.cta>img.cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,12,9,.95) 0%,rgba(6,12,9,.86) 48%,rgba(6,12,9,.55) 75%,rgba(6,12,9,.35) 100%)}
.cta-in{display:grid;grid-template-columns:1.35fr 1fr;gap:40px;align-items:center;padding-block:clamp(48px,6vw,72px)}
.cta h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin:14px 0 14px}
.cta p.t{color:rgba(255,255,255,.88);max-width:56ch}
.cta .btn{margin-top:26px}
.cta-liste{display:grid;gap:16px;justify-self:end}
.cta-liste li{display:flex;align-items:center;gap:16px;font-size:.95rem;font-weight:500;line-height:1.4}
.cta-liste .i{width:28px;height:28px;color:var(--lime)}
.cta-schmal .cta-in{grid-template-columns:1fr auto}

/* ---------- Projekte-Band (Startseite) ---------- */
.projekte-band{background:var(--dunkel);color:var(--weiss);padding-block:clamp(56px,7vw,92px);overflow:hidden}
.pb-kopf{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.pb-kopf h2{margin-top:12px}
.pb-kopf p{color:rgba(255,255,255,.75);max-width:46ch;margin-top:10px}
.pb-kopf .link-pfeil{color:var(--lime)}
.pb-reihe{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.pb-reihe+.pb-reihe{margin-top:18px}
.pb-spur{display:flex;gap:18px;width:max-content;animation:band 60s linear infinite}
.pb-kopie{display:flex;gap:18px}
.pb-rechts .pb-spur{animation-direction:reverse;animation-duration:70s}
.pb-reihe:hover .pb-spur{animation-play-state:paused}
@keyframes band{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 9px))}}
.pb-karte{position:relative;margin:0;width:clamp(240px,26vw,380px);aspect-ratio:3/2;border-radius:var(--rad);overflow:hidden;flex:none;background:var(--dunkel-2)}
.pb-karte img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1),filter .4s}
.pb-karte:hover img{transform:scale(1.07)}
.pb-karte figcaption{position:absolute;left:12px;bottom:12px;background:rgba(10,20,16,.78);backdrop-filter:blur(6px);color:var(--weiss);font-size:.82rem;font-weight:600;padding:6px 12px;border-radius:6px;border-left:3px solid var(--lime)}

/* ---------- Projekte-Seite ---------- */
.pr-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pr-karte{position:relative;border:0;padding:0;margin:0;cursor:zoom-in;background:var(--rand);border-radius:var(--rad);overflow:hidden;aspect-ratio:3/2;display:block;width:100%;font:inherit}
.pr-karte img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.pr-karte:hover img{transform:scale(1.06)}
.pr-karte span{position:absolute;left:12px;bottom:12px;background:rgba(10,20,16,.8);color:var(--weiss);font-size:.85rem;font-weight:600;padding:6px 12px;border-radius:6px;border-left:3px solid var(--lime)}
.lb{position:fixed;inset:0;z-index:90;background:rgba(6,12,9,.94);display:none;align-items:center;justify-content:center;padding:max(60px,env(safe-area-inset-top,0px)) 70px}
.lb.offen{display:flex;animation:fade .25s both}
@keyframes fade{from{opacity:0}}
.lb img{max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:8px;box-shadow:0 30px 80px -20px #000}
.lb-cap{position:absolute;bottom:max(22px,env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;color:var(--weiss);font-weight:600}
.lb button{position:absolute;width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:var(--weiss);cursor:pointer;display:grid;place-items:center;font-size:1.6rem;line-height:1}
.lb button:hover{background:var(--lime);color:var(--dunkel)}
.lb-zu{top:max(16px,env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px))}
.lb-zur{left:max(12px,env(safe-area-inset-left,0px));top:calc(50% - 26px)}
.lb-vor{right:max(12px,env(safe-area-inset-right,0px));top:calc(50% - 26px)}
.lb-zur .i{transform:rotate(180deg)}

/* ---------- Objektpflege ---------- */
.leiste4{display:grid;grid-template-columns:repeat(4,1fr);padding-block:clamp(30px,4vw,44px)}
.l4{text-align:center;padding:0 16px;display:flex;flex-direction:column;align-items:center;gap:4px}
.l4+.l4{border-left:1px solid var(--rand)}
.l4 .kreis{width:66px;height:66px;border-radius:50%;background:#eef4ea;display:grid;place-items:center;color:var(--gruen);margin-bottom:10px;transition:transform .3s,background .3s}
.l4:hover .kreis{transform:translateY(-4px) rotate(-6deg);background:#e2f2c4}
.l4 .kreis .i{width:32px;height:32px}
.l4 h3{font-size:.98rem;font-weight:700;text-transform:uppercase;letter-spacing:.01em}
.l4 p{font-size:.95rem;color:var(--text-2);line-height:1.45}
.block{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,3vw,40px);align-items:center;padding-block:clamp(14px,2vw,22px)}
.block.um{grid-template-columns:1fr 1.15fr}
.block.um .block-bild{order:2}
.block-bild{overflow:hidden;aspect-ratio:16/9.5;background:var(--rand)}
.block-bild img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.block:hover .block-bild img{transform:scale(1.04)}
.block .nrz{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--gruen-t);font-size:1.15rem}
.block .nrz::after{content:"";width:40px;height:2px;background:var(--lime)}
.block h2{font-size:clamp(1.7rem,2.8vw,2.3rem);margin:8px 0 14px}
.block p{color:var(--text-2);font-size:.98rem}
.block p strong{color:var(--text)}
.haken-box{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;background:var(--flaeche);border-radius:var(--rad);padding:18px 20px;margin-top:20px}
.haken-box li{display:flex;gap:10px;align-items:center;font-size:.93rem}
.haken-box .i{color:var(--gruen);width:18px;height:18px;stroke-width:3}
.zusatz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.zk{background:var(--weiss);border-radius:var(--rad);padding:22px 20px;box-shadow:0 6px 24px -18px rgba(10,20,16,.4);transition:transform .3s,box-shadow .3s;border:1px solid transparent}
.zk:hover{transform:translateY(-4px);box-shadow:var(--schatten);border-color:#d9ecb6}
.zk-kopf{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.zk-kopf .kreis{width:44px;height:44px;border-radius:50%;background:#eef4ea;display:grid;place-items:center;color:var(--dunkel);flex:none}
.zk-kopf .kreis .i{width:22px;height:22px}
.zk h3{font-size:.98rem;font-weight:700;letter-spacing:-.01em}
.zk p{font-size:.9rem;color:var(--text-2);line-height:1.5}
.eyebrow-plain{font-size:.85rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}

/* ---------- Außenanlagen ---------- */
.kopf2{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:30px}
.kopf2 h2{margin-top:14px}
.kopf2 p{color:var(--text-2);font-size:.98rem;padding-bottom:6px}
.leist-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.lz{position:relative;isolation:isolate;aspect-ratio:4/2.7;overflow:hidden;color:var(--weiss);text-decoration:none;display:flex;align-items:flex-end;padding:16px}
.lz img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.lz::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(6,12,9,.88) 0%,rgba(6,12,9,.45) 40%,rgba(6,12,9,0) 65%)}
.lz:hover img{transform:scale(1.08)}
.lz-in{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;width:100%}
.lz .ring{width:42px;height:42px;margin:0;border-width:2px}
.lz .ring .i{width:20px;height:20px}
.lz h3{font-size:1rem;font-weight:700;letter-spacing:-.01em}
.lz p{font-size:.8rem;color:rgba(255,255,255,.88);line-height:1.35}
.lz .pfeil{color:var(--lime);transition:transform .25s}
.lz:hover .pfeil{transform:translateX(5px)}
.banner{position:relative;isolation:isolate;color:var(--weiss);background:var(--dunkel);overflow:hidden}
.banner>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.banner::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,12,9,.94) 0%,rgba(6,12,9,.8) 34%,rgba(6,12,9,.1) 62%,transparent)}
.banner-in{padding-block:clamp(44px,5.5vw,70px);max-width:560px}
.banner-in::before{content:"";display:block;width:44px;height:4px;background:var(--lime);margin-bottom:18px}
.banner h2{font-size:clamp(1.8rem,3vw,2.4rem)}
.banner p{color:rgba(255,255,255,.88);margin:14px 0 24px}
.galerie6{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.galerie6 figure{margin:0}
.galerie6 .k-bild{aspect-ratio:16/10.5;overflow:hidden}
.galerie6 img{width:100%;height:100%;object-fit:cover;transition:transform .9s}
.galerie6 figure:hover img{transform:scale(1.07)}
.galerie6 figcaption{font-size:.82rem;font-weight:600;margin-top:8px}
.gal-kopf{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:24px}

/* ---------- Über uns ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.split-text{padding:clamp(40px,5vw,72px) clamp(24px,5vw,72px);display:flex;flex-direction:column;justify-content:center;gap:16px}
.split-text .inner{max-width:520px}
.split.links-text .split-text{padding-left:max(24px,calc((100vw - var(--max))/2 + 24px))}
.split.rechts-text .split-text{padding-right:max(24px,calc((100vw - var(--max))/2 + 24px))}
.split-bild{position:relative;min-height:360px;overflow:hidden}
.split-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split h2{font-size:clamp(1.9rem,3.4vw,2.8rem);margin:12px 0 16px}
.split p{color:var(--text-2);font-size:.98rem}
.split p+p{margin-top:14px}
.split.dunkel{background:var(--dunkel);color:var(--weiss)}
.split.dunkel p{color:rgba(255,255,255,.88)}
.werte h2{margin:12px 0 28px}

/* ---------- Kontakt ---------- */
.kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,56px);align-items:start}
.kontakt-grid h2{margin:14px 0 18px}
.kinfo{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;margin-top:34px}
.kinfo-sp{display:grid;gap:26px;align-content:start}
.kinfo-sp+.kinfo-sp{border-left:1px solid var(--rand);padding-left:28px}
.ki{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;font-size:.92rem;line-height:1.5}
.ki .kreis{width:54px;height:54px;border-radius:50%;background:var(--gruen);display:grid;place-items:center;color:var(--weiss)}
.ki .kreis .i{width:26px;height:26px}
.ki .ohne{color:var(--gruen);padding-top:2px}
.ki .ohne .i{width:30px;height:30px}
.ki strong{display:block;font-weight:700;font-size:.98rem}
.ki a{text-decoration:none;font-weight:500}
.ki a:hover{color:var(--gruen-t)}
.ki small{display:block;color:var(--text-2);font-size:.85rem}
.formular{background:var(--flaeche);border:1px solid var(--rand);border-radius:14px;padding:clamp(22px,3vw,32px)}
.formular h2{font-size:1.6rem;margin:0 0 6px}
.formular .sub{color:var(--text-2);font-size:.95rem;margin-bottom:20px}
.f-reihe{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feld{display:grid;gap:6px;margin-bottom:16px}
.feld label{font-size:.9rem;font-weight:600}
.feld input,.feld select,.feld textarea{width:100%;font:400 .95rem var(--font);color:var(--text);background:var(--weiss);border:1px solid #d6dadc;border-radius:8px;padding:12px 14px;transition:border-color .2s,box-shadow .2s}
.feld textarea{min-height:120px;resize:vertical}
.feld select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231d2420' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--gruen);box-shadow:0 0 0 3px rgba(159,224,0,.28)}
.feld input:user-invalid,.feld textarea:user-invalid{border-color:#c0392b}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.f-hinweis{font-size:.8rem;color:var(--text-2);margin:2px 0 14px}
.f-hinweis a{color:var(--text)}
.formular .btn{width:100%}
.f-meldung{margin-top:14px;padding:14px 16px;border-radius:8px;font-size:.93rem;display:none}
.f-meldung.ok{display:block;background:#eaf6d6;color:#2e5205;border:1px solid #c6e48e}
.f-meldung.fehler{display:block;background:#fbe9e7;color:#8a2a1c;border:1px solid #f0c2bb}
.region{display:grid;grid-template-columns:1.05fr 1.1fr 1fr;background:var(--dunkel)}
.region-karte{position:relative;min-height:300px;overflow:hidden;background:#24342a}
.region-karte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.region-text{color:var(--weiss);padding:clamp(32px,4vw,52px);display:flex;flex-direction:column;justify-content:center;gap:14px}
.region-text h2{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.region-text p{color:rgba(255,255,255,.86);font-size:.95rem}
.region-text .btn-rand{align-self:flex-start;margin-top:10px}
.region-liste{background:var(--flaeche);padding:clamp(32px,4vw,52px);display:grid;align-content:center;gap:20px}
.region-liste li{display:flex;align-items:center;gap:14px;font-size:.98rem;font-weight:500}
.region-liste .hk{width:30px;height:30px;border-radius:50%;background:var(--gruen);color:var(--weiss);display:grid;place-items:center;flex:none}
.region-liste .hk .i{width:16px;height:16px;stroke-width:3}
.abschluss{display:grid;grid-template-columns:1fr 1fr;align-items:center;background:var(--flaeche);overflow:hidden}
.abschluss-text{padding:clamp(40px,5vw,64px) 24px clamp(40px,5vw,64px) max(24px,calc((100vw - var(--max))/2 + 24px))}
.abschluss-text h2{font-size:clamp(1.7rem,2.8vw,2.3rem);margin:12px 0 14px}
.abschluss-text p{color:var(--text-2);max-width:52ch}
.abschluss-text .btn{margin-top:24px}
.abschluss-bild{position:relative;align-self:stretch;min-height:300px}
.abschluss-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}

/* ---------- Rechtstexte ---------- */
.recht{max-width:820px}
.recht h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:26px}
.recht h2{font-size:1.25rem;margin:30px 0 10px;letter-spacing:-.01em}
.recht h3{font-size:1.05rem;margin:20px 0 8px;font-weight:700}
.recht p,.recht li{color:var(--text-2);font-size:.97rem}
.recht p+p{margin-top:10px}
.recht ul{list-style:disc;padding-left:22px;margin:8px 0}
.recht a{color:var(--gruen-t)}
.offen{background:#fff3cd;padding:0 4px;border-radius:3px}

/* ---------- Fuss ---------- */
.fuss{background:var(--dunkel);color:rgba(255,255,255,.9);position:relative;overflow:hidden}
.fuss-in{display:grid;grid-template-columns:1.3fr .9fr 1.2fr .8fr;gap:32px;padding-block:clamp(44px,5vw,64px) 36px}
.fuss-marke img{width:220px;height:auto}
.fuss-nav{display:grid;gap:8px;align-content:start;border-right:1px solid rgba(255,255,255,.14)}
.fuss a{text-decoration:none;font-size:.93rem;transition:color .2s}
.fuss a:hover{color:var(--lime)}
.fuss-h{font-weight:700;color:var(--weiss);margin-bottom:12px}
.fuss-kontakt{display:grid;gap:10px;align-content:start;border-right:1px solid rgba(255,255,255,.14)}
.fuss-kontakt a,.fuss-kontakt p{display:flex;gap:12px;align-items:flex-start;font-size:.93rem}
.fuss-kontakt .i{color:var(--lime);width:20px;height:20px;margin-top:2px}
.social{display:flex;gap:14px}
.social a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.3);transition:border-color .2s,color .2s,transform .2s}
.social a:hover{border-color:var(--lime);transform:translateY(-2px)}
.social .i{width:20px;height:20px}
.fuss-unten{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.14);padding-block:22px max(22px,env(safe-area-inset-bottom,0px));font-size:.84rem;color:rgba(255,255,255,.7)}
.fuss-unten p{display:flex;gap:16px}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
 .k-zur{left:4px}.k-vor{right:4px}
 .zusatz-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1040px){
 :root{--kopf-h:72px}
 .kopf-logo img{width:140px}
 .burger{display:block;margin-left:auto}
 .kopf-cta{display:none}
 .nav{position:fixed;inset:var(--kopf-h) 0 auto 0;background:var(--weiss);flex-direction:column;justify-content:flex-start;gap:18px;padding:18px max(24px,env(safe-area-inset-right,0px)) 28px max(24px,env(safe-area-inset-left,0px));box-shadow:0 30px 40px -30px rgba(0,0,0,.35);transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;max-height:calc(100dvh - var(--kopf-h));overflow:auto}
 .nav.offen{transform:none;opacity:1;visibility:visible}
 .nav ul{flex-direction:column;gap:0}
 .nav ul a{display:block;padding:14px 0;font-size:1.1rem;border-bottom:1px solid var(--rand)}
 .nav ul a::after{display:none}
 .nav-cta-m{display:inline-flex}
 .vorteile,.leiste4{grid-template-columns:1fr 1fr;row-gap:30px}
 .vt:nth-child(3){border-left:0;padding-left:0}
 .l4:nth-child(3){border-left:0}
 .schritte{grid-template-columns:1fr;gap:26px}
 .verbinder{display:none}
 .k-spur{grid-auto-columns:calc((100% - 18px)/2.3)}
 .leist-grid{grid-template-columns:repeat(2,1fr)}
 .galerie6{grid-template-columns:repeat(3,1fr);row-gap:18px}
 .pr-raster{grid-template-columns:repeat(2,1fr)}
 .fuss-in{grid-template-columns:1fr 1fr}
 .fuss-nav,.fuss-kontakt{border-right:0}
 .region{grid-template-columns:1fr 1fr}
 .region-liste{grid-column:1/-1}
 .kontakt-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
 .hero::before{background:linear-gradient(90deg,rgba(6,12,9,.9),rgba(6,12,9,.6) 70%,rgba(6,12,9,.4))}
 .lk-grid{grid-template-columns:1fr}
 .ein-kopf,.kopf2{grid-template-columns:1fr;gap:12px}
 .cta-in,.cta-schmal .cta-in{grid-template-columns:1fr}
 .cta-liste{justify-self:start}
 .block,.block.um{grid-template-columns:1fr}
 .block.um .block-bild{order:0}
 .split{grid-template-columns:1fr}
 .split-text,.split.links-text .split-text,.split.rechts-text .split-text{padding:44px 24px}
 .split-bild{min-height:280px}
 .split.bild-zuerst .split-bild{order:-1}
 .abschluss{grid-template-columns:1fr}
 .abschluss-text{padding:44px 24px}
 .abschluss-bild{min-height:220px}
 .abschluss-bild img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%)}
 .region{grid-template-columns:1fr}
}
@media (max-width:600px){
 body{font-size:15.5px}
 .wrap{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
 .hero-in{min-height:auto;padding-block:56px 60px}
 .hero h1{font-size:clamp(2.4rem,11vw,3.2rem)}
 .hero .btn{align-self:stretch}
 .vorteile,.leiste4{grid-template-columns:1fr;row-gap:22px}
 .vt,.vt:first-child{padding:0;border:0!important;display:grid;grid-template-columns:auto 1fr;column-gap:16px}
 .vt .ico{grid-row:span 2;margin:0}
 .l4{border:0!important}
 .k-spur{grid-auto-columns:78%}
 .k-pfeil{display:none}
 .leist-grid{grid-template-columns:1fr}
 .lz{aspect-ratio:16/9}
 .galerie6{grid-template-columns:repeat(2,1fr)}
 .pr-raster{grid-template-columns:1fr}
 .haken-box,.f-reihe{grid-template-columns:1fr}
 .f-reihe{gap:0}
 .zusatz-grid{grid-template-columns:1fr}
 .kinfo{grid-template-columns:1fr}
 .kinfo-sp+.kinfo-sp{border-left:0;padding-left:0}
 .fuss-in{grid-template-columns:1fr}
 .lb{padding:60px 12px}
 .lb-zur,.lb-vor{top:auto;bottom:max(14px,env(safe-area-inset-bottom,0px))}
 .lb-cap{bottom:max(80px,env(safe-area-inset-bottom,0px))}
 .punkte li+li::before{margin:0 8px}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .rv{opacity:1;transform:none}
 .pb-reihe{overflow-x:auto}
 .verbinder{transform:none}
}
/* Feinschliff 31.10. */
.hero-in>h1{max-width:none}
.hero-rechts .hero-bild{left:36%}
.hero-rechts::before{background:linear-gradient(90deg,var(--dunkel) 0%,var(--dunkel) 36%,rgba(10,20,16,.55) 46%,rgba(10,20,16,0) 62%)}
.ein-kopf{grid-template-columns:1.15fr 1fr}
.ein-kopf h2{font-size:clamp(1.7rem,2.6vw,2.2rem)}
.fuss-marke img{width:250px}
@media (max-width:820px){.hero-rechts .hero-bild{left:0}.hero-rechts::before{background:linear-gradient(90deg,rgba(6,12,9,.9),rgba(6,12,9,.6) 70%,rgba(6,12,9,.4))}}
/* 10.11. Abschnitt Hausverwaltungen (Objektpflege) */
.hv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:center}
.hv h2{font-size:clamp(1.55rem,2.7vw,2.15rem);margin-top:14px}
.hv-sub{font-weight:600;color:var(--dunkel);margin-top:16px;font-size:1.04rem}
.hv-text p{color:var(--text-2);margin-bottom:14px}
.hv-text .btn{margin-top:10px}
@media (max-width:820px){.hv{grid-template-columns:1fr}.hv-text .btn{white-space:normal;text-align:left}}
/* 10.11. AYZIX-Hinweis ganz unten in der Fußzeile */
.ayzix-credit{display:flex;justify-content:center;padding:0 16px 18px}
.ayzix-credit a{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:400;letter-spacing:.03em;color:#d5dbe3;opacity:.6;text-decoration:none;transition:opacity .2s}
.ayzix-credit a:hover,.ayzix-credit a:focus-visible{opacity:1}
.ayzix-credit img{height:15px;width:auto;display:block}
/* 10.11. Projekte: Filter nach Art der Arbeit */
.pf{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.pf-knopf{font:inherit;font-size:.92rem;font-weight:600;padding:10px 18px;border-radius:999px;border:1.5px solid var(--rand);background:var(--weiss);color:var(--dunkel);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .2s,border-color .2s}
.pf-knopf span{font-size:.78rem;font-weight:600;color:var(--text-2)}
.pf-knopf:hover{border-color:var(--lime)}
.pf-knopf.an{background:var(--dunkel);border-color:var(--dunkel);color:var(--weiss)}
.pf-knopf.an span{color:var(--lime)}
.pf-knopf:focus-visible{outline:2px solid var(--gruen-t);outline-offset:2px}
.pr-karte[hidden]{display:none}