/* Haus & Grundstücksdienst Braun · Entwurf „Tech und 3D" · Medienmaster 2026-10-14 */
:root{
  --bg:#f6f9f3;--bg2:#e9f1e4;--fl:#ffffff;
  --txt:#10201a;--txt2:#5c6b61;--linie:rgba(16,32,26,.1);
  --gruen:#2f6a1c;--gruen2:#4e8b2e;--gruen-hell:#9fd97f;--gruen-dunkel:#14301c;
  --hell:#f4f7f2;--hell2:#e3e9df;--tinte:#10201a;--tinte2:#5c6b61;
  --glas:#ffffff;--glas-rand:rgba(16,32,26,.08);
  --schatten:0 18px 40px -22px rgba(16,32,26,.28);
  --display:'Plus Jakarta Sans',sans-serif;--body:'Inter',sans-serif;
  --r:18px;--r2:28px;
  --ease:cubic-bezier(.16,1,.3,1);--dur:.8s;
  --pad:clamp(20px,5vw,72px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--bg);color:var(--txt);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.05}
h2{font-size:clamp(30px,4.2vw,54px);max-width:14ch;letter-spacing:-.025em}
h2 em{font-style:normal;color:var(--gruen)}
.gruen{color:var(--gruen)}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gruen);font-weight:600;margin-bottom:16px}
.kopf{padding:0 var(--pad);max-width:1400px;margin:0 auto 44px}
.glas{background:var(--glas);border:1px solid var(--glas-rand);box-shadow:var(--schatten)}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;padding:12px 20px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s,background .25s;white-space:nowrap;font-family:var(--body)}
.btn.gross{padding:16px 26px;font-size:16px}
.btn-gruen{background:var(--gruen);color:#fff;box-shadow:0 12px 28px -14px rgba(47,106,28,.7)}
.btn-gruen:hover{transform:translateY(-2px);background:var(--gruen2);box-shadow:0 16px 34px -14px rgba(47,106,28,.8)}
.btn-glas{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(10px)}
.btn-glas:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.btn-dunkel{background:var(--tinte);color:#fff}
.btn-dunkel:hover{transform:translateY(-2px)}

/* Navigation */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:8px var(--pad);transition:padding .4s var(--ease),box-shadow .4s;background:#fff;border-bottom:3px solid var(--gruen);color:var(--txt)}
.nav.fest{padding:6px var(--pad);box-shadow:0 10px 30px -22px rgba(16,32,26,.35)}
.nav.fest .nav-links{color:var(--txt)}
.nav.fest .logo{color:#1f2a2e}
.nav-logo img{transition:height .4s var(--ease)}

.nav-links{display:flex;gap:6px;font-size:16px;font-weight:600;color:var(--txt)}
.nav-links a{position:relative;padding:10px 14px;border-radius:10px;transition:background .25s,color .25s}
.nav-links a:hover,.nav-links a[aria-current=page]{background:var(--bg2);color:var(--gruen)}
.nav-links a::after{display:none}
.nav-tel{padding:13px 20px;font-size:15px}

/* Held */
.held{position:relative;min-height:100svh;margin-top:0;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.held-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 10%;z-index:-3;transform:scale(1.04)}
.held-schleier{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(12,30,18,.82) 0%,rgba(12,30,18,.55) 36%,rgba(12,30,18,.08) 58%,rgba(12,30,18,0) 100%),linear-gradient(0deg,#f6f9f3 0%,rgba(246,249,243,0) 18%)}
.held-raster{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:72px 72px;mask-image:radial-gradient(ellipse at 30% 50%,#000 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 30% 50%,#000 20%,transparent 70%)}
.held-inhalt{position:relative;padding:180px var(--pad) 160px;padding-left:max(var(--pad),calc((100% - 1400px) / 2 + 24px));max-width:none}
.held-inhalt>*{max-width:860px}
.held-titel{font-size:clamp(42px,7.2vw,104px);margin-bottom:26px}
.held-titel .w{display:inline-block;opacity:0;transform:translateY(40px) rotate(2deg);animation:wort .9s var(--ease) forwards}
.held-titel .w:nth-child(2){animation-delay:.08s}.held-titel .w:nth-child(3){animation-delay:.16s}.held-titel .w:nth-child(4){animation-delay:.24s}.held-titel .w:nth-child(6){animation-delay:.38s}.held-titel .w:nth-child(7){animation-delay:.46s}
@keyframes wort{to{opacity:1;transform:none}}
.held-text{font-size:clamp(16px,1.4vw,20px);color:#e4ebe4;max-width:560px;margin-bottom:34px}
.held .gruen,.held .eyebrow{color:var(--gruen-hell)}
.held-titel{color:#fff}
.held-knoepfe{display:flex;gap:14px;flex-wrap:wrap}
.held-google{position:absolute;right:max(var(--pad),calc((100% - 1400px) / 2 + 24px));bottom:120px;display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;padding:18px 22px;border-radius:var(--r);transition:transform .3s var(--ease)}
.held-google:hover{transform:translateY(-4px)}
.g-zahl{font-family:var(--display);font-size:44px;font-weight:700;line-height:1;grid-row:span 2;color:var(--gruen)}
.g-sterne{color:#f3c142;letter-spacing:2px;font-size:15px}
.g-text{font-size:13px;color:var(--txt2);line-height:1.35}
.held-scroll{position:absolute;left:50%;bottom:28px;width:22px;height:36px;border:2px solid rgba(255,255,255,.35);border-radius:12px;transform:translateX(-50%)}
.held-scroll span{position:absolute;left:50%;top:6px;width:3px;height:8px;background:#fff;border-radius:2px;transform:translateX(-50%);animation:rad 1.6s infinite}
@keyframes rad{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,14px)}}

/* Fakten */
.fakten{display:grid;grid-template-columns:repeat(4,1fr);max-width:1180px;margin:-70px auto 0;position:relative;z-index:3;border-radius:var(--r2);overflow:hidden;background:#fff}
.fakten>div{padding:28px 26px;border-left:1px solid var(--linie);text-align:center}
.fakten>div:first-child{border-left:0}
.fakten b{display:block;font-family:var(--display);font-size:clamp(30px,3.4vw,46px);font-weight:700;color:var(--gruen);line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums}
.fakten span{font-size:13.5px;color:var(--txt2)}

/* Konfigurator */
.konf{display:grid;grid-template-columns:minmax(320px,.9fr) 1.1fr;gap:40px;align-items:center;padding:140px var(--pad) 120px;max-width:1500px;margin:0 auto;position:relative}
.konf::before{content:"";position:absolute;right:8%;top:30%;width:520px;height:520px;background:radial-gradient(circle,rgba(78,139,46,.14),transparent 65%);filter:blur(30px);pointer-events:none}
.konf-text>p{color:var(--txt2);font-size:17px;max-width:520px;margin-top:16px}
.konf-block{margin-top:34px;padding-top:24px;border-top:1px solid var(--linie)}
.konf-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt2);font-weight:600;margin-bottom:14px;display:flex;justify-content:space-between}
.konf-label span{color:var(--txt);letter-spacing:0;text-transform:none;font-weight:600;font-size:14px}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatches button{width:40px;height:40px;border-radius:12px;border:2px solid rgba(16,32,26,.1);background:var(--c);cursor:pointer;transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.swatches button:hover{transform:translateY(-3px) scale(1.06)}
.swatches button.aktiv{border-color:#fff;box-shadow:0 0 0 3px var(--gruen)}
input[type=range]{width:100%;appearance:none;-webkit-appearance:none;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--gruen2),#9bb08a 50%,#6b6b60);outline:none;margin:6px 0 18px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--gruen);cursor:pointer;box-shadow:0 4px 14px rgba(16,32,26,.25)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--gruen);cursor:pointer}
.konf-zeile{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.segment{display:inline-flex;border:1px solid var(--glas-rand);border-radius:999px;padding:3px;background:var(--glas)}
.segment button{border:0;background:transparent;color:var(--txt2);font:600 13px var(--body);padding:8px 14px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.segment button.aktiv{background:var(--gruen);color:#fff}
.konf-hinweis{font-size:13px;color:var(--txt2);margin-top:26px;max-width:460px}
.konf-buehne{position:relative;aspect-ratio:1/0.9;min-height:420px;border-radius:var(--r2);overflow:hidden;background:radial-gradient(ellipse at 50% 80%,#ffffff 0%,#e9efe5 70%);border:1px solid var(--glas-rand);box-shadow:var(--schatten)}
.konf-buehne canvas{width:100%!important;height:100%!important;display:block;touch-action:none;cursor:grab}
.konf-buehne canvas:active{cursor:grabbing}
.konf-fallback{display:none;position:absolute;inset:0}
.konf-fallback img{width:100%;height:100%;object-fit:cover}
.konf-fallback p{position:absolute;left:16px;bottom:16px;font-size:13px;color:#fff;background:rgba(0,0,0,.6);padding:6px 10px;border-radius:8px}
.konf-buehne.kein-webgl canvas{display:none}
.konf-buehne.kein-webgl .konf-fallback{display:block}
.konf-tipp{position:absolute;left:18px;bottom:16px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt2);display:flex;align-items:center;gap:8px}
.konf-tipp::before{content:"";width:28px;height:2px;background:var(--gruen)}

/* Vorher Nachher Scroll */
.vn{position:relative;padding:110px 0 0}
.vn-sticky{position:relative;display:flex;flex-direction:column;padding:0 var(--pad);gap:22px}
.vn-kopf{max-width:1400px;margin:0 auto;width:100%}
.vn-kopf .eyebrow{margin-bottom:8px}
.vn-bild{position:relative;width:100%;max-width:1100px;margin:0 auto;aspect-ratio:16/9;max-height:520px;border-radius:var(--r2);overflow:hidden;background:#000;user-select:none;cursor:ew-resize;border:1px solid var(--glas-rand)}
.vn-bild img{position:absolute;inset:-4% 0;width:100%;height:108%;object-fit:cover}
.vn-bild .nach{clip-path:inset(0 0 0 var(--x))}
.vn-griff{position:absolute;top:0;bottom:0;left:var(--x);width:2px;background:#fff;transform:translateX(-50%);box-shadow:0 0 24px rgba(255,255,255,.6)}
.vn-griff::after{content:"◀ ▶";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--gruen);color:#fff;font:700 11px var(--body);padding:12px 10px;border-radius:999px;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.vn-tag{position:absolute;top:18px;font:600 12px var(--body);letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:rgba(10,15,20,.75);color:#fff;backdrop-filter:blur(8px)}
.vn-tag.l{left:18px}.vn-tag.r{right:18px;background:var(--gruen);color:#fff}
.vn-ort{position:absolute;left:18px;bottom:16px;font-size:13px;color:#fff;background:rgba(10,15,20,.6);padding:6px 10px;border-radius:8px;backdrop-filter:blur(8px)}
.vn-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1400px;margin:30px auto 0;padding:0 var(--pad)}
.vn-kachel{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;border:1px solid var(--glas-rand)}
.vn-kachel img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.vn-kachel:hover img{transform:scale(1.05)}
.vn-kachel figcaption{position:absolute;left:14px;bottom:14px;font-size:13px;font-weight:600;color:#fff;background:rgba(10,15,20,.7);padding:6px 10px;border-radius:8px;backdrop-filter:blur(8px)}

/* Leistungen (hell) */
.hell{background:var(--hell);color:var(--tinte)}
.leist{padding:90px 0 110px;margin-top:0;position:relative}
.leist::before{content:"";position:absolute;left:0;right:0;top:-80px;height:80px;background:linear-gradient(180deg,transparent,var(--hell));opacity:.08}
.leist .eyebrow{color:var(--gruen)}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(230px,auto);gap:16px;max-width:1400px;margin:0 auto;padding:0 var(--pad)}
.k{position:relative;background:#fff;border-radius:var(--r2);padding:30px;border:1px solid var(--hell2);box-shadow:0 10px 30px -24px rgba(16,32,26,.3);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s;transform-style:preserve-3d;will-change:transform}
.k:hover{box-shadow:0 30px 60px -30px rgba(17,26,20,.35)}
.k::after{content:"";position:absolute;left:30px;right:30px;bottom:0;height:3px;background:var(--gruen);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.k:hover::after{transform:scaleX(1)}
.k h3{font-size:21px;margin:14px 0 8px}
.k p{font-size:15px;color:var(--tinte2)}
.k-icon{width:44px;height:44px;color:var(--gruen)}
.k-gross{grid-column:span 2;grid-row:span 2;padding:0;color:#fff;background:var(--tinte)}
.k-gross img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;opacity:.85}
.k-gross .k-text{position:absolute;left:0;right:0;bottom:0;padding:34px;background:linear-gradient(0deg,rgba(10,15,20,.95),rgba(10,15,20,.5) 70%,transparent)}
.k-gross h3{font-size:30px;margin-top:0}
.k-gross p{color:#d3dbd4;max-width:480px}
.k-link{display:inline-block;margin-top:14px;color:var(--gruen-hell);font-weight:600}
.k-cta{background:var(--gruen);border-color:var(--gruen);display:flex;flex-direction:column;justify-content:space-between}
.k-cta h3{margin-top:0;color:#fff}
.k-cta p{color:#dcebd4}
.k-cta .btn{background:#fff;color:var(--gruen)}
.k-cta .btn{align-self:flex-start;margin-top:14px}

/* Ablauf */
.ablauf{padding:130px 0 110px}
.schritte{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:1400px;margin:0 auto;padding:0 var(--pad);position:relative;counter-reset:s}
.schritte::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:22px;height:2px;background:var(--linie)}
.schritte::after{content:"";position:absolute;left:var(--pad);top:22px;height:2px;width:calc((100% - 2*var(--pad)) * var(--p,0));background:var(--gruen);transition:width .2s linear}
.schritte li{position:relative;padding:60px 28px 0 0}
.schritte .nr{position:absolute;top:0;left:0;width:46px;height:46px;border-radius:50%;background:var(--bg);border:2px solid var(--linie);display:grid;place-items:center;font:700 14px var(--display);color:var(--gruen);transition:border-color .4s,box-shadow .4s}
.schritte li.an .nr{border-color:var(--gruen);box-shadow:0 0 0 6px rgba(47,106,28,.12)}
.schritte h3{font-size:21px;margin-bottom:8px}
.schritte p{font-size:15px;color:var(--txt2)}

/* Bewertungen */
.bew{padding:40px 0 120px}
.bew-reihe{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1400px;margin:0 auto;padding:0 var(--pad)}
.bew blockquote{border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:14px;transition:transform .4s var(--ease),border-color .4s}
.bew blockquote:hover{transform:translateY(-6px);border-color:rgba(47,106,28,.45)}
.sterne{color:#f3c142;letter-spacing:3px}
.bew p{font-family:var(--display);font-size:20px;font-weight:500;line-height:1.3;flex:1}
.bew footer{font-size:13px;color:var(--txt2)}
.bew-quelle{max-width:1400px;margin:22px auto 0;padding:0 var(--pad);font-size:13px;color:var(--txt2)}

/* Kontakt */
.kontakt{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;max-width:1400px;margin:0 auto;padding:80px var(--pad) 140px;position:relative}
.kontakt::before{content:"";position:absolute;left:0;top:20%;width:480px;height:480px;background:radial-gradient(circle,rgba(78,139,46,.12),transparent 65%);filter:blur(30px);pointer-events:none}
.kontakt-text>p{color:var(--txt2);font-size:17px;margin-top:16px}
.orte{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 30px}
.orte span{font-size:13px;padding:7px 12px;border-radius:999px;border:1px solid var(--linie);background:#fff;color:var(--txt)}

.kontakt-direkt{display:flex;gap:12px;flex-wrap:wrap}
.formular{border-radius:var(--r2);padding:34px;display:grid;gap:16px;background:rgba(20,31,42,.75)}
.formular label{display:grid;gap:6px;font-size:13px;color:var(--txt2);font-weight:500}
.formular input[type=text],.formular select{background:rgba(255,255,255,.06);border:1px solid var(--glas-rand);border-radius:12px;padding:13px 14px;color:#fff;font:15px var(--body);outline:none;transition:border-color .25s,box-shadow .25s}
.formular input:focus,.formular select:focus{border-color:var(--gruen);box-shadow:0 0 0 3px rgba(138,211,106,.2)}
.formular select option{color:#000}
.upload{position:relative}
.upload input{position:absolute;inset:0;opacity:0;cursor:pointer}
.upload span{display:block;border:1px dashed rgba(255,255,255,.3);border-radius:12px;padding:22px;text-align:center;color:#d7ded8;font-size:14px;transition:border-color .25s,background .25s}
.upload:hover span{border-color:var(--gruen);background:rgba(138,211,106,.06)}
.check{display:flex!important;flex-direction:row;align-items:center;gap:10px}
.check input{accent-color:var(--gruen);width:18px;height:18px}
.formular .btn{justify-content:center;margin-top:6px;border:0}

/* Fuß */

.fuss-marke img{height:44px;margin-bottom:14px}
.fuss-siegel{display:flex;gap:8px;flex-wrap:wrap}
.fuss-siegel span{padding:8px 12px;border-radius:999px;font-size:12px;font-weight:600;color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);box-shadow:none}
.fuss-links{display:flex;gap:20px}
.fuss-links a:hover{color:#fff}

/* Enthüllen */
.rv{opacity:0;transform:translateY(28px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rv.in{opacity:1;transform:none}
.held .rv{transition-delay:.5s}

/* Responsiv */
@media (max-width:1100px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bew-reihe{grid-template-columns:repeat(2,1fr)}
  .schritte{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .schritte::before,.schritte::after{display:none}
  .fakten{grid-template-columns:repeat(2,1fr)}
  .fakten>div:nth-child(3){border-left:0}
  .fakten>div:nth-child(n+3){border-top:1px solid var(--linie)}
}
@media (max-width:860px){
  .nav-links{display:none}
  .nav-tel{font-size:0;gap:0;padding:12px;border-radius:50%}
  .nav-tel svg{width:18px;height:18px}
  .konf{grid-template-columns:1fr;padding-top:100px}
  .konf-buehne{aspect-ratio:1/1;min-height:360px}
  .kontakt{grid-template-columns:1fr;gap:40px}
  .fuss{grid-template-columns:1fr}
  .held-google{position:static;margin:28px var(--pad) 0;width:max-content}
  .held{flex-direction:column;align-items:flex-start;justify-content:center}
  .held-inhalt{padding:130px var(--pad) 20px}
  .held-scroll{display:none}
  .fakten{margin-top:30px;border-radius:var(--r)}
  .vn{padding-top:70px}
  .vn-bild{aspect-ratio:4/3}
  .vn-reihe{grid-template-columns:1fr}
  .bento,.bew-reihe{grid-template-columns:1fr}
  .k-gross{grid-column:span 1;min-height:380px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .held-titel .w{animation:none;opacity:1;transform:none}
  .rv{opacity:1;transform:none;transition:none}
  .held-scroll span{animation:none}
  .k,.bew blockquote,.btn,.vn-kachel img{transition:none}
}

/* Anfrage-Generator */
.generator{border-radius:var(--r2);padding:30px;background:#fff;min-height:520px;display:flex;flex-direction:column;overflow:hidden}
.g-fortschritt{height:4px;background:rgba(16,32,26,.08);border-radius:2px;overflow:hidden}
.g-fortschritt span{display:block;height:100%;background:var(--gruen);transition:width .5s var(--ease)}
.g-zeile{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt2);margin:12px 0 22px;font-weight:600}
.g-koerper{flex:1}
.g-koerper.vor{animation:gVor .45s var(--ease)}
.g-koerper.zurueck{animation:gZur .45s var(--ease)}
@keyframes gVor{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes gZur{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
.g-koerper h3{font-size:24px;margin-bottom:6px}
.g-hinweis{font-size:13px;color:var(--txt2);margin-bottom:16px}
.g-kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.g-kacheln.klein{grid-template-columns:repeat(3,1fr)}
.g-kachel{background:var(--bg2);border:1px solid var(--linie);border-radius:16px;padding:18px 12px 14px;color:var(--txt);font:600 14px var(--body);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;transition:transform .25s var(--ease),border-color .25s,background .25s}
.g-kachel svg{width:34px;height:34px;color:var(--gruen)}
.g-kachel:hover{transform:translateY(-3px);border-color:rgba(47,106,28,.5);background:#fff}
.g-kachel.an{background:var(--gruen);border-color:var(--gruen);color:#fff}
.g-kachel.an svg{color:#fff}
.g-felder{display:grid;gap:14px;margin-top:14px}
.g-felder.zwei{grid-template-columns:1fr 1fr}
.g-felder .breit{grid-column:1/-1}
.g-felder label{display:grid;gap:6px;font-size:13px;color:var(--txt2);font-weight:500}
.g-felder input[type=text],.g-felder input[type=tel],.g-felder input[type=email]{background:#fff;border:1px solid rgba(16,32,26,.18);border-radius:12px;padding:13px 14px;color:var(--txt);font:15px var(--body);outline:none;transition:border-color .25s,box-shadow .25s}
.g-felder input:focus{border-color:var(--gruen);box-shadow:0 0 0 3px rgba(47,106,28,.15)}
.g-label{font-size:13px;color:var(--txt2);font-weight:500;margin-bottom:6px}
.g-upload{position:relative}
.g-upload input{position:absolute;inset:0;opacity:0;cursor:pointer}
.g-upload span{display:block;border:1px dashed rgba(16,32,26,.28);border-radius:12px;padding:20px;text-align:center;color:var(--txt2);font-size:14px;transition:border-color .25s,background .25s}
.g-upload span b{color:var(--txt)}
.g-upload:hover span{border-color:var(--gruen);background:rgba(47,106,28,.05)}
.g-check{display:flex!important;flex-direction:row;align-items:flex-start;gap:10px;font-size:13px}
.g-check input{accent-color:var(--gruen);width:18px;height:18px;flex:none;margin-top:2px}
.g-zusammen{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13px;margin:4px 0 16px;padding:14px 16px;border-radius:12px;background:rgba(47,106,28,.06);border:1px solid rgba(47,106,28,.22)}
.g-zusammen dt{color:var(--txt2)}
.g-zusammen dd{color:var(--txt);font-weight:500}
.g-fehler{margin-top:14px;font-size:13px;color:#8a2a16;background:rgba(255,99,71,.1);border:1px solid rgba(255,99,71,.35);padding:10px 12px;border-radius:10px}
.g-fuss{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding-top:18px;border-top:1px solid var(--linie)}
.g-zurueck{background:transparent;border:0;color:var(--txt2);font:600 14px var(--body);cursor:pointer;padding:10px 4px}
.g-zurueck:disabled{opacity:.3;cursor:default}
.g-fertig{text-align:center;padding:40px 10px;display:flex;flex-direction:column;align-items:center;gap:12px;flex:1;justify-content:center}
.g-fertig svg{width:72px;height:72px;color:var(--gruen)}
.g-fertig h3{font-size:28px}
.g-fertig p{color:var(--txt2);max-width:420px}
@media (max-width:560px){.g-kacheln,.g-kacheln.klein{grid-template-columns:repeat(2,1fr)}.g-felder.zwei{grid-template-columns:1fr}.generator{padding:22px}}

/* Logo (Inline-SVG, Farbe über currentColor) */
.logo{display:block;height:46px;width:305px;color:#fff;transition:height .4s var(--ease),width .4s var(--ease)}
.nav.fest .logo{height:38px;width:252px}
.logo-gross{height:60px;width:398px;max-width:100%;margin-bottom:14px}

/* Siegel-Leiste */
.siegel{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;max-width:1180px;margin:34px auto 0;padding:0 var(--pad)}
.siegel-k{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;color:var(--txt)}
.siegel-k b{font-family:var(--display);font-size:18px;color:var(--txt)}
.siegel-k small{font-size:12px;color:var(--txt2)}
.siegel-k img{height:40px;background:#fff;padding:5px 10px;border-radius:8px;border:1px solid var(--linie)}
.siegel-k .g{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:#1a73e8;font:800 13px var(--body);margin-right:4px;vertical-align:2px}

/* Einsatzgebiet */
.gebiet{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;max-width:1400px;margin:0 auto;padding:110px var(--pad) 40px}
.gebiet-text>p{color:var(--txt2);font-size:17px;margin-top:16px;max-width:520px}
.radar{position:relative;aspect-ratio:1;max-width:520px;margin:0 auto;width:100%}
.radar svg{width:100%;height:100%}
.radar .ring{fill:none;stroke:rgba(47,106,28,.22);stroke-width:1.5}
.radar .km{fill:var(--txt2);font:600 12px var(--body);text-anchor:middle}
.radar .strahl{stroke:rgba(47,106,28,.35);stroke-width:2;transform-origin:250px 250px;animation:strahl 9s linear infinite}
@keyframes strahl{to{transform:rotate(360deg)}}
.radar .ort circle{fill:var(--gruen)}
.radar .ort .zentrum{fill:var(--txt)}
.radar .ort .puls{fill:none;stroke:var(--gruen);stroke-width:2;animation:puls 2.4s ease-out infinite}
@keyframes puls{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.6);opacity:0}}
.radar .ort text{fill:var(--txt);font:600 14px var(--body);text-anchor:middle}

/* FAQ */
.faq{padding:80px 0 40px}
.faq-liste{max-width:900px;margin:0 auto;padding:0 var(--pad)}
.faq details{border-top:1px solid var(--linie);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--linie)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-family:var(--display);font-size:20px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--linie);display:grid;place-items:center;font-weight:400;font-size:22px;color:var(--gruen);transition:transform .35s var(--ease),background .35s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--gruen);color:#fff}
.faq details p{padding:0 60px 22px 0;color:var(--txt2);font-size:16px;max-width:760px}

/* WhatsApp-Schwebeknopf */
.wa-schwebe{position:fixed;right:22px;bottom:22px;z-index:40;display:flex;align-items:center;gap:10px;background:#25d366;color:#0b1a0e;padding:12px 18px 12px 14px;border-radius:999px;font-weight:700;font-size:14px;box-shadow:0 14px 34px -10px rgba(37,211,102,.7);transition:transform .3s var(--ease)}
.wa-schwebe:hover{transform:translateY(-3px)}

/* Richtpreis im Generator */
.g-flaeche{margin-top:18px}
.g-flaeche .wert{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.g-flaeche .wert b{font-family:var(--display);font-size:34px;white-space:nowrap}
.g-flaeche .wert>span{color:var(--txt2);font-size:13px;text-align:right;max-width:60%}
.g-preis{margin-top:18px;padding:18px 20px;border-radius:14px;background:rgba(47,106,28,.06);border:1px solid rgba(47,106,28,.25)}
.g-preis small{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt2);font-weight:600;margin-bottom:4px}
.g-preis b{font-family:var(--display);font-size:30px;color:var(--gruen)}
.g-preis p{font-size:12px;color:var(--txt2);margin-top:6px}

@media (max-width:860px){
  .gebiet{grid-template-columns:1fr;padding-top:70px}
  .siegel{gap:14px 22px}
  .wa-schwebe span{display:none}
  .wa-schwebe{padding:14px}
  .logo{width:232px;height:35px}
}

/* Grün-Weiß-Feinschliff */
.vn-bild{box-shadow:var(--schatten)}
.ablauf{background:var(--bg2)}
.bew{padding-top:100px}
.gebiet{background:var(--bg2);max-width:none;padding-left:var(--pad);padding-right:var(--pad)}
.gebiet>*{max-width:650px}
.gebiet-text{margin-left:auto}
.radar{margin-right:auto}
.konf-tipp{color:var(--txt2)}
.held-google{box-shadow:0 20px 50px -20px rgba(0,0,0,.5)}

/* Logo: Originaldatei des Kunden, unverändert. Bis sie da ist, nur die Wortmarke. */
.logo-bild{display:block;height:96px;width:auto;transition:height .4s var(--ease)}
.nav.fest .logo-bild{height:64px}
.logo-bild.gross{height:96px}
.fuss-logo{display:inline-block;background:#fff;padding:10px 16px;border-radius:12px;margin-bottom:14px}
.wortmarke{font-family:'Montserrat',var(--display);font-weight:800;font-size:17px;letter-spacing:.02em;text-transform:uppercase;color:var(--txt);white-space:nowrap}
.wortmarke.dunkel{color:var(--gruen-dunkel);padding:4px 2px;display:inline-block}
.nav-links a::after{background:var(--gruen)}

@media (max-width:860px){.wortmarke{font-size:12px;white-space:normal;line-height:1.15;max-width:210px}.logo-bild{height:40px}}

/* Mehr Grün: dunkelgrüne Blöcke, getönte Flächen */
.dunkel{background:linear-gradient(160deg,#1b4a27 0%,var(--gruen-dunkel) 100%);color:#fff}
.dunkel .eyebrow{color:var(--gruen-hell)}
.dunkel h2{color:#fff}
.dunkel p{color:#d6e6d3}
.ablauf.dunkel{padding:130px 0 120px}
.dunkel .schritte::before{background:rgba(255,255,255,.14)}
.dunkel .schritte::after{background:var(--gruen-hell)}
.dunkel .schritte .nr{background:var(--gruen-dunkel);border-color:rgba(255,255,255,.25);color:var(--gruen-hell)}
.dunkel .schritte li.an .nr{border-color:var(--gruen-hell);box-shadow:0 0 0 6px rgba(159,217,127,.15)}
.dunkel .schritte h3{color:#fff}
.kontakt.dunkel{box-shadow:0 0 0 100vmax var(--gruen-dunkel);clip-path:inset(0 -100vmax);background:var(--gruen-dunkel);padding-top:110px;padding-bottom:130px}
.kontakt.dunkel::before{background:radial-gradient(circle,rgba(159,217,127,.18),transparent 65%)}
.kontakt.dunkel .btn-gruen{background:var(--gruen-hell);color:var(--gruen-dunkel);box-shadow:none}
.kontakt.dunkel .btn-gruen:hover{background:#b6e59b}
.kontakt.dunkel .btn-glas{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#fff}

.fakten{background:#fff;border:1px solid var(--linie)}
.siegel{padding-bottom:40px}
.konf{background:#fff;max-width:none;padding-left:max(var(--pad),calc((100% - 1400px)/2));padding-right:max(var(--pad),calc((100% - 1400px)/2))}
.vn-sticky,.vn-reihe{background:transparent}
.vn{background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)}
.vn-reihe{padding-top:30px;padding-bottom:60px;margin-top:0;background:var(--bg2);max-width:none;padding-left:max(var(--pad),calc((100% - 1400px)/2));padding-right:max(var(--pad),calc((100% - 1400px)/2))}
.leist{margin-top:0;background:#fff}
.bew{background:var(--bg)}
.bew blockquote{background:#fff}
.gebiet{background:#fff}
.faq{background:var(--bg2);padding:90px 0 90px}
.faq details{border-color:rgba(16,32,26,.12)}
.held-google{border-top:4px solid var(--gruen)}
.k{border-top:3px solid transparent}
.k:hover{border-top-color:var(--gruen)}

/* Wow: Rotor-Zeile im Held */
.rotor{display:inline-grid;text-align:left;height:1.12em;overflow:hidden;vertical-align:bottom;font-size:.68em;white-space:nowrap;line-height:1.08}
.rotor>span{grid-area:1/1;opacity:0;transform:translateY(110%);animation:rotor 11.2s infinite}
.rotor>span:nth-child(1){animation-delay:0s}.rotor>span:nth-child(2){animation-delay:2.8s}.rotor>span:nth-child(3){animation-delay:5.6s}.rotor>span:nth-child(4){animation-delay:8.4s}
@keyframes rotor{0%{opacity:0;transform:translateY(110%)}4%{opacity:1;transform:none}23%{opacity:1;transform:none}27%{opacity:0;transform:translateY(-110%)}100%{opacity:0;transform:translateY(-110%)}}

/* Fortschrittsbalken */
.fortschritt{position:absolute;left:0;bottom:-1px;height:3px;width:var(--p,0%);background:var(--gruen);transition:width .1s linear}

/* Laufband der Orte */
.laufband{overflow:hidden;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);background:#fff;margin-top:40px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.laufband-spur{display:flex;width:max-content;animation:lauf 70s linear infinite}
.laufband:hover .laufband-spur{animation-play-state:paused}
.laufband-spur span{padding:16px 0;font-family:var(--display);font-weight:700;font-size:18px;color:var(--txt);white-space:nowrap}
.laufband-spur span::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gruen);margin:0 26px;vertical-align:middle}
@keyframes lauf{to{transform:translateX(-50%)}}

/* Bewertungen als Laufband */
.bew-band{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);padding:10px 0}
.bew-spur{display:flex;gap:16px;width:max-content;animation:lauf 48s linear infinite}
.bew-band:hover .bew-spur{animation-play-state:paused}
.bew-spur blockquote{width:340px;flex:none}

/* Bild-Wischblenden beim Enthüllen */
.rv .k-gross img,.vn-kachel img{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease),transform 1.2s var(--ease)}
.rv.in .k-gross img,.vn-kachel.in img{clip-path:inset(0 0 0 0)}
.k.rv .k-icon{transform:translateY(10px);opacity:0;transition:transform .7s var(--ease) .15s,opacity .7s .15s}
.k.rv.in .k-icon{transform:none;opacity:1}

/* Radar: ferne Orte */
.radar .ort.fern circle{fill:none;stroke:var(--gruen);stroke-width:2}
.radar .ort.fern text{fill:var(--txt2);font-weight:500}

/* Konfigurator: Hinweis nach der Auto-Reinigung */
.konf-demo{position:absolute;right:18px;top:18px;background:var(--gruen);color:#fff;font:600 13px var(--body);padding:8px 14px;border-radius:999px;opacity:0;transform:translateY(-8px);transition:opacity .5s,transform .5s}
.konf-demo.an{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .held-video{animation:none;transform:none}
  .rv .k-gross img,.vn-kachel img{clip-path:none}
}
@media (max-width:860px){.bew-spur blockquote{width:280px}.laufband-spur span{font-size:15px}}

/* Unterseiten */
.fakten b span{font-size:inherit;color:inherit}
.fakten b .st{font-size:15px;color:#f3c142;letter-spacing:2px;vertical-align:middle;font-family:var(--body)}
.fakt-logo{height:44px;margin:0 auto 10px}
.fakten b.marke{font-size:30px;letter-spacing:.01em}
.k-link.dunkelgruen{color:var(--gruen)}
.seite{padding-top:116px}
.seite-kopf{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:70px var(--pad) 60px;max-width:1400px;margin:0 auto}
.seite-kopf h1{font-size:clamp(34px,4.8vw,62px);letter-spacing:-.025em;max-width:14ch}
.seite-kopf .lead{font-size:18px;color:var(--txt2);margin-top:18px;max-width:560px}
.seite-kopf .bild{aspect-ratio:4/3;border-radius:var(--r2);overflow:hidden;box-shadow:var(--schatten)}
.seite-kopf .bild img{width:100%;height:100%;object-fit:cover}
.krumen{font-size:13px;color:var(--txt2);margin-bottom:18px}
.krumen a:hover{color:var(--gruen)}
.abschnitt{padding:70px var(--pad);max-width:1400px;margin:0 auto}
.abschnitt.getoent{background:var(--bg2);max-width:none;padding-left:max(var(--pad),calc((100% - 1400px)/2));padding-right:max(var(--pad),calc((100% - 1400px)/2))}
.zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.zweispalt .bild{border-radius:var(--r2);overflow:hidden;box-shadow:var(--schatten);aspect-ratio:4/3}
.zweispalt .bild img{width:100%;height:100%;object-fit:cover}
.prosa p{font-size:17px;color:var(--txt2);margin:14px 0;max-width:62ch}
.prosa h2{margin-bottom:6px}
.vorteile{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.vorteile li{background:#fff;border:1px solid var(--linie);border-radius:var(--r);padding:20px 22px;font-weight:600;font-size:15px;display:flex;gap:12px;align-items:flex-start;box-shadow:0 10px 30px -24px rgba(16,32,26,.3)}
.vorteile li::before{content:"✓";flex:none;width:26px;height:26px;border-radius:50%;background:var(--gruen);color:#fff;display:grid;place-items:center;font-size:13px}
.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.karte{background:#fff;border:1px solid var(--linie);border-radius:var(--r2);overflow:hidden;display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s;box-shadow:0 10px 30px -24px rgba(16,32,26,.3)}
.karte:hover{transform:translateY(-6px);box-shadow:var(--schatten)}
.karte img{aspect-ratio:16/10;object-fit:cover;width:100%}
.karte div{padding:22px 24px 26px;flex:1;display:flex;flex-direction:column}
.karte h3{font-size:21px;margin-bottom:8px}
.karte p{font-size:15px;color:var(--txt2);flex:1}
.karte .k-link,.karte .weiter{color:var(--gruen);margin-top:14px;font-weight:600}
.filter{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 28px}
.filter button{border:1px solid var(--linie);background:#fff;color:var(--txt);font:600 13px var(--body);padding:8px 14px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.filter button.aktiv,.filter button:hover{background:var(--gruen);border-color:var(--gruen);color:#fff}
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.galerie figure{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;border:1px solid var(--linie);background:#fff}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.galerie figure:hover img{transform:scale(1.05)}
.galerie figcaption{position:absolute;left:12px;bottom:12px;font-size:13px;font-weight:600;color:#fff;background:rgba(10,15,20,.7);padding:6px 10px;border-radius:8px}
.galerie figure.weg{display:none}
.cta-band{background:linear-gradient(160deg,#1b4a27 0%,var(--gruen-dunkel) 100%);color:#fff;padding:70px var(--pad);text-align:center}
.cta-band h2{margin:0 auto 14px;max-width:20ch;color:#fff}
.cta-band p{color:#d6e6d3;max-width:560px;margin:0 auto 26px}
.cta-band .btn-gruen{background:var(--gruen-hell);color:var(--gruen-dunkel);box-shadow:none}
.cta-band .btn-glas{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#fff}
.recht{max-width:820px;margin:0 auto;padding:40px var(--pad) 100px}
.recht h2{font-size:24px;margin:34px 0 10px}
.recht p,.recht li{color:var(--txt2);font-size:16px;line-height:1.7}
.recht .entwurf{background:#fff6dc;border:1px solid #f0d58a;border-radius:12px;padding:14px 18px;font-size:14px;color:#6b5200;margin-bottom:26px}
.team{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.team .bild{border-radius:var(--r2);overflow:hidden;box-shadow:var(--schatten)}
.werte{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:30px}
.werte li{background:#fff;border:1px solid var(--linie);border-radius:var(--r);padding:22px}
.werte b{display:block;font-family:var(--display);font-size:18px;margin-bottom:6px}
.werte span{font-size:14.5px;color:var(--txt2)}
.anfrage-seite{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:start;padding:30px var(--pad) 110px;max-width:1400px;margin:0 auto}
.kontaktkarte{background:#fff;border:1px solid var(--linie);border-radius:var(--r2);padding:28px;margin-top:22px}
.kontaktkarte p{margin:6px 0;color:var(--txt2)}
.kontaktkarte b{color:var(--txt)}
@media (max-width:860px){
  .seite-kopf,.zweispalt,.team,.anfrage-seite{grid-template-columns:1fr}
  .vorteile,.karten,.galerie{grid-template-columns:1fr}
  .werte{grid-template-columns:1fr}
  .seite{padding-top:70px}
}

@media (max-width:860px){.logo-bild{height:56px}.nav.fest .logo-bild{height:48px}.seite{padding-top:84px}}

.konf{padding-top:120px}

/* Leistungen auf der Startseite: Karten statt Bento */
.leist .karten{max-width:1400px;margin:0 auto;padding:0 var(--pad)}
.leist .karte{box-shadow:0 14px 34px -26px rgba(16,32,26,.35)}
.leist .karte img{aspect-ratio:16/10}
.leist-cta{max-width:1400px;margin:34px auto 0;padding:0 var(--pad);display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;font-weight:600;color:var(--txt2)}

/* Ablauf: Linie läuft hinter den Kreisen durch, nicht hindurch */
.schritte::before,.schritte::after{z-index:0}
.schritte li{z-index:1}
.schritte .nr{z-index:2;box-shadow:0 0 0 6px var(--bg)}
.dunkel .schritte .nr{background:#17381f;box-shadow:0 0 0 6px #17381f}
.dunkel .schritte li.an .nr{box-shadow:0 0 0 6px #17381f,0 0 0 9px rgba(159,217,127,.25)}
.abschnitt.getoent .schritte .nr{background:var(--bg2);box-shadow:0 0 0 6px var(--bg2)}

/* Leiste: Angebot-Knopf neben der Telefonnummer */
.nav-aktionen{display:flex;align-items:center;gap:10px}
.btn-umriss{background:#fff;border:2px solid var(--gruen);color:var(--gruen);padding:11px 18px;font-size:15px}
.btn-umriss:hover{background:var(--gruen);color:#fff;transform:translateY(-2px)}
@media (max-width:860px){.nav-angebot{padding:10px 12px;font-size:13px}}
@media (max-width:560px){.nav-angebot{display:none}}

/* Aufklappmenü Leistungen */
.menu-gruppe{position:relative}
.menu-eltern{display:inline-flex;align-items:center;gap:6px}
.menu-eltern svg{transition:transform .25s}
.untermenu{position:absolute;top:calc(100% + 10px);left:0;min-width:300px;background:#fff;border:1px solid var(--linie);border-radius:14px;box-shadow:var(--schatten);padding:8px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s,transform .22s var(--ease),visibility 0s .22s}
.untermenu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.menu-gruppe:hover .untermenu,.menu-gruppe.offen .untermenu,.menu-gruppe:focus-within .untermenu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.menu-gruppe:hover .menu-eltern svg,.menu-gruppe.offen .menu-eltern svg{transform:rotate(180deg)}
.untermenu a{display:block;padding:10px 14px;border-radius:10px;font-size:15px;font-weight:500;color:var(--txt)}
.untermenu a:hover{background:var(--bg2);color:var(--gruen)}
.untermenu a.alle{margin-top:4px;border-top:1px solid var(--linie);border-radius:0 0 10px 10px;color:var(--gruen);font-weight:600}

/* Fuß: Vollbreite, vier Spalten, Schlusszeile */
.fuss{background:linear-gradient(180deg,#17381f 0%,#0f2616 100%);color:#cfe0cf;font-size:14.5px;margin-top:0;width:100%}
.fuss-innen{max-width:1400px;margin:0 auto;padding:34px var(--pad) 22px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.fuss-spalte{display:flex;flex-direction:column;gap:5px;font-size:13.5px}
.fuss-spalte h4{font-family:var(--display);color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.fuss-spalte a{color:#d7e6d4;transition:color .2s}
.fuss-spalte a:hover{color:var(--gruen-hell)}
.fuss-spalte p{margin:0;color:#b8cbb6;line-height:1.6}
.fuss-marke p{max-width:360px;font-size:13px}
.fuss-logo{display:inline-block;background:#fff;padding:6px 10px;border-radius:10px;margin-bottom:4px;width:max-content}
.fuss .logo-bild.gross{height:54px}
.fuss-google{display:flex;align-items:center;gap:10px;margin-top:6px!important}
.fuss-google b{font-family:var(--display);font-size:20px;color:#fff}
.fuss-google .sterne{color:#f3c142;letter-spacing:2px}
.fuss-google small{color:#b8cbb6}
.fuss-tel{font-family:var(--display);font-size:17px;font-weight:700;color:#fff!important}
.fuss-zeiten{font-size:13px;color:#9fb79d!important}
.fuss-siegel{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.fuss-siegel span{padding:5px 9px;border-radius:999px;font-size:11px;font-weight:600;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.fuss-schluss{border-top:1px solid rgba(255,255,255,.1);padding:12px var(--pad);max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:#9fb79d}
.fuss-schluss .fuss-links{display:flex;gap:18px}
.fuss-schluss a:hover{color:#fff}
@media (max-width:1000px){.fuss-innen{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fuss-innen{grid-template-columns:1fr}}

/* ===== Effektschicht ===== */
/* Gestaffeltes Einblenden in Rastern */
.karten .rv:nth-child(2),.vorteile .rv:nth-child(2),.schritte .rv:nth-child(2),.galerie .rv:nth-child(3n+2){transition-delay:.12s}
.karten .rv:nth-child(3),.vorteile .rv:nth-child(3),.schritte .rv:nth-child(3),.galerie .rv:nth-child(3n+3){transition-delay:.24s}
.karten .rv:nth-child(4),.vorteile .rv:nth-child(4),.schritte .rv:nth-child(4){transition-delay:.36s}
.karten .rv:nth-child(5),.vorteile .rv:nth-child(5){transition-delay:.48s}
.karten .rv:nth-child(6),.vorteile .rv:nth-child(6){transition-delay:.6s}
/* Überschriften: Linie zieht sich beim Erscheinen auf */
.kopf h2{position:relative;padding-bottom:14px}
.kopf h2::after{content:"";position:absolute;left:0;bottom:0;width:72px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--gruen),var(--gruen-hell));transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .25s}
.kopf h2.in::after{transform:scaleX(1)}
.dunkel .kopf h2::after{background:linear-gradient(90deg,var(--gruen-hell),#fff)}
/* Knöpfe: Glanzlauf */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s var(--ease);pointer-events:none}
.btn:hover::after{left:130%}
/* Karten: Bildzoom, Anheben, leichtes Kippen (per JS) */
.karte{overflow:hidden;transform-style:preserve-3d}
.karte img{transition:transform 1s var(--ease)}
.karte:hover img{transform:scale(1.06)}
.karte .weiter,.karte .k-link{transition:transform .35s var(--ease)}
.karte:hover .weiter,.karte:hover .k-link{transform:translateX(6px)}
.vorteile li{transition:transform .35s var(--ease),box-shadow .35s}
.vorteile li:hover{transform:translateY(-4px);box-shadow:var(--schatten)}
/* Held: sanfter Zoom auf dem Video, schwebende Google-Karte */
.held-video{animation:heldZoom 26s ease-in-out infinite alternate}
@keyframes heldZoom{from{transform:scale(1.02)}to{transform:scale(1.07)}}
.held-google{animation:schweben 6s ease-in-out infinite}
@keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* Dunkle Blöcke: Lichtspur folgt der Maus */
.dunkel{position:relative;overflow:hidden}
.dunkel::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(159,217,127,.14),transparent 60%);opacity:0;transition:opacity .5s}
.dunkel:hover::after{opacity:1}
/* Zahlenband: Werte wachsen beim Erscheinen */
.fakten.in b{animation:aufziehen .9s var(--ease) both}
@keyframes aufziehen{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
/* Fortschrittsbalken der Leiste leuchtet */
.fortschritt{box-shadow:0 0 12px rgba(47,106,28,.6)}
/* Galerie: Bildunterschrift fährt ein */
.galerie figcaption,.vn-kachel figcaption{transform:translateY(6px);opacity:.85;transition:transform .35s var(--ease),opacity .35s}
.galerie figure:hover figcaption,.vn-kachel:hover figcaption{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){.held-video,.held-google,.fakten.in b{animation:none}.btn::after{display:none}.kopf h2::after{transform:none}}

/* Luft zwischen Text und Knöpfen */
.kontakt-direkt{margin-top:30px}
.kontakt-text>p{margin-bottom:0}
.held-knoepfe{margin-top:8px}
.seite-kopf .lead{margin-bottom:6px}
.konf-zeile{margin-top:6px}
.leist-cta{margin-top:44px}
.cta-band p{margin-bottom:32px}
.kontaktkarte .kontakt-direkt{margin-top:18px}

/* Hauptaktion: Angebot anfragen */
.btn-haupt{background:linear-gradient(135deg,#5a9a35 0%,#2f6a1c 100%);color:#fff;border:0;padding-left:14px;box-shadow:0 16px 34px -14px rgba(47,106,28,.8);gap:12px}
.btn-haupt::before{content:"";position:absolute;inset:-3px;border-radius:999px;border:2px solid rgba(90,154,53,.55);animation:ring 2.6s ease-out infinite;pointer-events:none}
@keyframes ring{0%{transform:scale(.96);opacity:.9}70%{transform:scale(1.12);opacity:0}100%{opacity:0}}
.btn-haupt:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 22px 40px -14px rgba(47,106,28,.9);background:linear-gradient(135deg,#63a83c 0%,#35771f 100%)}
.btn-haupt .kostenlos{background:#fff;color:var(--gruen);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:999px;line-height:1}
.btn-haupt .pfeil{display:inline-block;transition:transform .3s var(--ease);font-weight:800}
.btn-haupt:hover .pfeil{transform:translateX(5px)}
.btn-haupt.gross{padding:15px 26px 15px 14px;font-size:16px}
.nav-angebot{padding:11px 18px 11px 12px;font-size:15px}
.kontakt.dunkel .btn-haupt,.cta-band .btn-haupt{background:linear-gradient(135deg,#b6e59b 0%,#8ad36a 100%);color:var(--gruen-dunkel)}
.kontakt.dunkel .btn-haupt .kostenlos,.cta-band .btn-haupt .kostenlos{background:var(--gruen-dunkel);color:#fff}
.kontakt.dunkel .btn-haupt::before,.cta-band .btn-haupt::before{border-color:rgba(159,217,127,.6)}
.btn-umriss.nav-tel{border-width:2px}
@media (max-width:560px){.nav-angebot{display:inline-flex}.nav-tel{display:none}.btn-haupt .kostenlos{display:none}}
@media (prefers-reduced-motion:reduce){.btn-haupt::before{animation:none;display:none}}

/* Vor der Fußleiste hell: Kontakt (Startseite) und Schlussband (Unterseiten) */
.kontakt.hell-kontakt{background:var(--bg2);padding-top:110px;padding-bottom:120px;max-width:none;padding-left:max(var(--pad),calc((100% - 1400px)/2));padding-right:max(var(--pad),calc((100% - 1400px)/2))}
.kontakt.hell-kontakt::before{background:radial-gradient(circle,rgba(78,139,46,.12),transparent 65%)}
.kontakt.hell-kontakt .generator{box-shadow:var(--schatten)}
.cta-band{background:var(--bg2);color:var(--txt);position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;left:50%;top:-120px;width:520px;height:520px;transform:translateX(-50%);background:radial-gradient(circle,rgba(78,139,46,.14),transparent 65%);pointer-events:none}
.cta-band>*{position:relative}
.cta-band h2{color:var(--txt)}
.cta-band p{color:var(--txt2)}
.cta-band .eyebrow{color:var(--gruen)!important}
.cta-band .btn-haupt{background:linear-gradient(135deg,#5a9a35 0%,#2f6a1c 100%);color:#fff}
.cta-band .btn-haupt .kostenlos{background:#fff;color:var(--gruen)}
.cta-band .btn-glas{background:#fff;border-color:var(--linie);color:var(--txt)}

.kontakt.hell-kontakt .btn-glas{background:#fff;border-color:var(--linie);color:var(--txt);backdrop-filter:none}

/* Hauptaktion, edel: ruhig, kurz, ohne Ring und Abzeichen */
.btn-haupt{background:var(--gruen);padding:13px 22px;gap:10px;letter-spacing:.01em;box-shadow:0 10px 24px -14px rgba(47,106,28,.7)}
.btn-haupt::before{display:none}
.btn-haupt .kostenlos{display:none}
.btn-haupt .pfeil{font-weight:500;opacity:.9}
.btn-haupt:hover{background:var(--gruen2);transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(47,106,28,.8)}
.btn-haupt.gross{padding:16px 28px;font-size:16px}
.nav-angebot{padding:12px 20px;font-size:15px}
.kontakt.dunkel .btn-haupt,.cta-band .btn-haupt{background:var(--gruen);color:#fff}
.cta-band .btn-haupt:hover{background:var(--gruen2)}

/* ===== Effekte Unterseiten ===== */
/* Seitenübergang */
body{animation:seiteRein .55s ease-out both}
@keyframes seiteRein{from{opacity:0}to{opacity:1}}
body.raus{opacity:0;transition:opacity .22s ease-in}
/* Seitentitel Wort für Wort */
.seite-kopf h1 .w{display:inline-block;opacity:0;transform:translateY(28px) rotate(1.5deg);animation:wort .8s var(--ease) forwards}
.seite-kopf h1 em{display:inline-block}
/* Kopfbild wischt von links auf, Textbilder klappen von unten auf */
.seite-kopf .bild.rv{opacity:1;transform:none}
.seite-kopf .bild.rv img{clip-path:inset(0 100% 0 0);transform:scale(1.08);transition:clip-path 1.1s var(--ease) .25s,transform 1.6s var(--ease) .25s}
.seite-kopf .bild.rv.in img{clip-path:inset(0 0 0 0);transform:scale(1)}
.zweispalt .bild.rv{opacity:1;transform:none}
.zweispalt .bild.rv img{clip-path:inset(100% 0 0 0);transition:clip-path 1s var(--ease)}
.zweispalt .bild.rv.in img{clip-path:inset(0 0 0 0)}
.team .bild.rv{opacity:1;transform:none}
.team .bild.rv img{clip-path:inset(0 0 0 100%);transition:clip-path 1s var(--ease)}
.team .bild.rv.in img{clip-path:inset(0)}
/* Häkchen springen ein */
.vorteile li::before{transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1) .35s}
.vorteile li.in::before{transform:scale(1)}
/* FAQ öffnet weich */
.faq details[open] p,.faq-liste details[open] p{animation:faqAuf .4s var(--ease)}
@keyframes faqAuf{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.faq summary::after{transition:transform .35s var(--ease),background .35s,color .35s}
/* Galerie: Filterwechsel blendet um */
.galerie figure{animation:zeigen .5s var(--ease) both}
@keyframes zeigen{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.filter button{transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.filter button:active{transform:scale(.95)}
/* Karten auf der Leistungsübersicht: Pfeil zieht, Bild zoomt (bereits), zusätzlich grüne Kante */
.karte::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--gruen);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.karte:hover::after{transform:scaleX(1)}
/* Schlussband: Lichtfleck treibt */
.cta-band::before{animation:treiben 14s ease-in-out infinite alternate}
@keyframes treiben{from{transform:translateX(-60%) scale(1)}to{transform:translateX(-40%) scale(1.15)}}
/* Werte (Über uns) und Kontaktkarte heben sich */
.werte li,.kontaktkarte{transition:transform .35s var(--ease),box-shadow .35s}
.werte li:hover,.kontaktkarte:hover{transform:translateY(-4px);box-shadow:var(--schatten)}
/* Krümelpfad schiebt sich ein */
.krumen{opacity:0;transform:translateX(-10px);animation:krumen .6s var(--ease) .1s forwards}
@keyframes krumen{to{opacity:1;transform:none}}
/* Generator: Kacheln staffeln */
.g-kacheln .g-kachel{animation:zeigen .45s var(--ease) both}
.g-kacheln .g-kachel:nth-child(2){animation-delay:.05s}.g-kacheln .g-kachel:nth-child(3){animation-delay:.1s}.g-kacheln .g-kachel:nth-child(4){animation-delay:.15s}.g-kacheln .g-kachel:nth-child(5){animation-delay:.2s}.g-kacheln .g-kachel:nth-child(6){animation-delay:.25s}
@media (prefers-reduced-motion:reduce){
  body,.krumen,.galerie figure,.g-kacheln .g-kachel,.cta-band::before{animation:none;opacity:1;transform:none}
  .seite-kopf h1 .w{animation:none;opacity:1;transform:none}
  .seite-kopf .bild.rv img,.zweispalt .bild.rv img,.team .bild.rv img{clip-path:none;transform:none}
  .vorteile li::before{transform:none}
}

/* Fuß immer am Seitenende */
body{display:flex;flex-direction:column;min-height:100svh}
main{flex:1 0 auto}
.fuss{flex-shrink:0}
.nav-tel svg{color:#25d366}
.nav-tel:hover svg{color:#fff}

/* Leiste an der Mittelspalte ausrichten */
.nav{padding-left:max(var(--pad),calc((100% - 1400px) / 2 + 24px));padding-right:max(var(--pad),calc((100% - 1400px) / 2 + 24px))}

/* ===== Handy: Leiste und Menü ===== */
.menu-knopf{display:none;width:46px;height:46px;border:1px solid var(--linie);border-radius:12px;background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.menu-knopf span{display:block;width:20px;height:2px;background:var(--txt);border-radius:2px;transition:transform .3s var(--ease),opacity .3s}
.menu-knopf[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-knopf[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-knopf[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobil-menu{display:none}
@media (max-width:860px){
  .nav{padding:8px 16px;gap:10px}
  .nav-logo{flex:1;min-width:0}
  .logo-bild{height:52px}
  .nav.fest .logo-bild{height:46px}
  .nav-links{display:none}
  .menu-knopf{display:flex}
  .nav-aktionen{gap:8px}
  .nav-angebot{display:none}
  .nav-tel{display:inline-flex;font-size:0;gap:0;padding:12px;border-radius:50%;width:46px;height:46px;justify-content:center}
  .nav-tel svg{width:20px;height:20px}
  .mobil-menu{display:flex;flex-direction:column;position:fixed;inset:0;top:0;z-index:49;background:#fff;padding:90px 24px 28px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .3s var(--ease),visibility 0s .3s;overflow-y:auto}
  .mobil-menu.offen{opacity:1;transform:none;visibility:visible;transition-delay:0s}
  .mobil-links{display:flex;flex-direction:column}
  .mobil-links>a{font-family:var(--display);font-size:26px;font-weight:700;padding:14px 0;border-bottom:1px solid var(--linie);color:var(--txt)}
  .mobil-unter{display:flex;flex-direction:column;padding:6px 0 12px 14px;border-bottom:1px solid var(--linie)}
  .mobil-unter a{font-size:16px;font-weight:500;padding:9px 0;color:var(--txt2)}
  .mobil-unter a::before{content:"→ ";color:var(--gruen)}
  .mobil-aktionen{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:28px}
  .mobil-aktionen .btn{justify-content:center}
  body.menu-offen{overflow:hidden}
  .seite{padding-top:78px}
  .held-inhalt{padding:120px 20px 24px}
  .held-titel{font-size:clamp(38px,11vw,46px)}
  .held-text{font-size:16px}
  .held-google{margin:20px 20px 0;width:auto}
  .fakten{margin:24px 16px 0}
  .fakten>div{padding:18px 12px}
  .fakten b{font-size:30px}
  .laufband-spur span{font-size:14px;padding:12px 0}
  .kopf{padding:0 20px}
  h2{max-width:none}
  .karten,.leist .karten{padding:0 20px}
  .vn{padding-top:50px}
  .vn-sticky{padding:0 20px}
  .vn-kopf{padding:0}
  .vn-reihe{padding:20px 20px 40px}
  .schritte{grid-template-columns:1fr;row-gap:28px;padding:0 20px}
  .schritte li{padding:0 0 0 62px;min-height:46px}
  .ablauf.dunkel{padding:80px 0}
  .bew{padding:60px 0 80px}
  .bew-spur blockquote{width:260px;padding:20px}
  .gebiet{padding:70px 20px 30px;gap:24px}
  .radar{max-width:340px}
  .faq{padding:60px 0}
  .faq-liste{padding:0 20px}
  .faq summary{font-size:17px;padding:16px 0}
  .faq details p{padding-right:40px}
  .kontakt.hell-kontakt{padding:70px 20px 80px;gap:28px}
  .generator{padding:20px;min-height:0}
  .fuss-innen{grid-template-columns:1fr;gap:22px;padding:30px 20px 18px}
  .fuss-schluss{flex-direction:column;align-items:flex-start;padding:12px 20px}
  .seite-kopf{padding:40px 20px 30px;gap:22px}
  .seite-kopf h1{font-size:clamp(30px,9vw,40px)}
  .abschnitt{padding:50px 20px}
  .abschnitt.getoent{padding-left:20px;padding-right:20px}
  .konf{padding:60px 20px 50px;gap:24px}
  .konf-buehne{aspect-ratio:1/1;min-height:300px}
  .swatches button{width:36px;height:36px}
  .anfrage-seite{padding:20px 20px 70px;gap:28px}
  .cta-band{padding:60px 20px}
  .cta-band h2{font-size:28px}
  .recht{padding:20px 20px 70px}
  .galerie{gap:10px}
  .rotor{font-size:.6em}
}

/* ===== Farbverläufe und Lichtflecken auf allen Flächen ===== */
body{background:linear-gradient(180deg,#f7faf4 0%,#eef4ea 100%)}
.held-schleier{background:linear-gradient(90deg,rgba(12,30,18,.8) 0%,rgba(12,30,18,.5) 34%,rgba(12,30,18,.06) 56%,rgba(12,30,18,0) 100%),linear-gradient(0deg,#f6f9f3 0%,rgba(246,249,243,0) 18%)}
.leist{background:linear-gradient(180deg,#ffffff 0%,#eef4ea 100%);position:relative;overflow:hidden}
.leist::before{content:"";position:absolute;right:-180px;top:-120px;width:560px;height:560px;background:radial-gradient(circle,rgba(90,154,53,.18),transparent 62%);pointer-events:none;opacity:1}
.konf{background:linear-gradient(180deg,#f7faf4 0%,#e9f1e4 100%)}
.vn{background:linear-gradient(180deg,#eef4ea 0%,#f7faf4 50%,#e6eedf 100%)}
.vn-reihe{background:transparent}
.bew{background:linear-gradient(180deg,#f7faf4 0%,#e8f0e2 100%);position:relative;overflow:hidden}
.bew::before{content:"";position:absolute;left:-200px;bottom:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(90,154,53,.16),transparent 62%);pointer-events:none}
.gebiet{background:linear-gradient(180deg,#ffffff 0%,#eef4ea 100%)}
.faq{background:linear-gradient(180deg,#e9f1e4 0%,#f7faf4 100%)}
.kontakt.hell-kontakt{background:linear-gradient(160deg,#eef4ea 0%,#f7faf4 45%,#dfe9d7 100%)}
.cta-band{background:linear-gradient(160deg,#eaf2e4 0%,#f7faf4 50%,#dfe9d7 100%)}
.abschnitt.getoent{background:linear-gradient(180deg,#eaf1e5 0%,#f4f8f1 100%)}
.seite-kopf{position:relative}
.seite-kopf::before{content:"";position:absolute;left:-160px;top:-60px;width:520px;height:520px;background:radial-gradient(circle,rgba(90,154,53,.16),transparent 62%);pointer-events:none}
.seite-kopf>*{position:relative}
.anfrage-seite{position:relative}
.anfrage-seite::before{content:"";position:absolute;right:-120px;top:0;width:520px;height:520px;background:radial-gradient(circle,rgba(90,154,53,.14),transparent 62%);pointer-events:none}
.anfrage-seite>*{position:relative}
.fakten{background:linear-gradient(180deg,#ffffff 0%,#f4f8f1 100%)}
.karte,.vorteile li,.werte li,.kontaktkarte,.bew blockquote{background:linear-gradient(180deg,#ffffff 0%,#f8fbf6 100%)}
.laufband{background:linear-gradient(90deg,#f1f6ee,#ffffff,#f1f6ee)}
.dunkel{background:linear-gradient(160deg,#1f5a2d 0%,#17381f 55%,#102a16 100%)}
.fuss{background:linear-gradient(180deg,#1a4322 0%,#0f2616 100%)}
.mobil-menu{background:linear-gradient(180deg,#ffffff 0%,#eef4ea 100%)}
/* Lichtflecken dürfen die Seite nie breiter machen (Handy: Chrome zoomt sonst heraus) */
main{overflow-x:clip}
.kontakt.hell-kontakt,.anfrage-seite,.seite-kopf{overflow-x:clip}
/* Verläufe kräftiger (Runde 22) */
.seite-kopf{background:linear-gradient(180deg,#e3ecdc 0%,#f2f7ee 60%,#f7faf4 100%)}
.seite-kopf::before{background:radial-gradient(circle,rgba(90,154,53,.28),transparent 62%)}
.leist::before{background:radial-gradient(circle,rgba(90,154,53,.26),transparent 62%)}
.bew::before{background:radial-gradient(circle,rgba(90,154,53,.24),transparent 62%)}
.anfrage-seite::before{background:radial-gradient(circle,rgba(90,154,53,.22),transparent 62%)}
.abschnitt.getoent{background:linear-gradient(180deg,#e3ecdc 0%,#f4f8f1 100%)}
.gebiet{background:linear-gradient(180deg,#ffffff 0%,#e6eedf 100%)}
.faq{background:linear-gradient(180deg,#e3ecdc 0%,#f7faf4 100%)}
.kontakt.hell-kontakt{background:linear-gradient(160deg,#e6eedf 0%,#f7faf4 45%,#d8e4ce 100%)}
.cta-band{background:linear-gradient(160deg,#e3ecdc 0%,#f7faf4 50%,#d8e4ce 100%)}

/* ===== Handy, Runde 23: Hero lesbar, Google-Kasten weg, Bewertungen als Wischreihe ===== */
@media (max-width:860px){
  .held-google{display:none}
  .held-schleier{background:linear-gradient(180deg,rgba(10,26,16,.82) 0%,rgba(10,26,16,.62) 45%,rgba(10,26,16,.35) 75%,rgba(246,249,243,.0) 92%,#f6f9f3 100%)}
  .held .eyebrow{display:inline-block;background:rgba(8,22,14,.62);color:#d9f0c8;padding:8px 12px;border-radius:10px;letter-spacing:.14em;font-size:11px;line-height:1.5;text-shadow:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .held h1,.held-text{text-shadow:0 2px 14px rgba(0,0,0,.45)}
  .bew{padding:60px 0 60px}
  .bew-band{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;mask-image:none;-webkit-mask-image:none;padding:8px 0 16px;scrollbar-width:none}
  .bew-band::-webkit-scrollbar{display:none}
  .bew-spur{animation:none;width:max-content;gap:12px;padding:0 var(--pad)}
  .bew-spur blockquote{width:min(300px,78vw);scroll-snap-align:start;padding:20px}
  .bew-spur blockquote:nth-child(n+5){display:none}
  .bew p{font-size:17px}
  .bew .bew-hinweis{display:block;text-align:center;font-size:13px;color:var(--txt2);margin:0 var(--pad) 10px}
  .rotor{height:1.3em;line-height:1.2}
}
.bew-hinweis{display:none}

/* ===== Handy, Runde 24: Bewertungen laufen automatisch durch, Antippen hält an ===== */
@media (max-width:860px){
  .bew-band{overflow:hidden;scroll-snap-type:none;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);padding:8px 0 16px}
  .bew-spur{animation:lauf 42s linear infinite;width:max-content;gap:12px;padding:0}
  .bew-spur blockquote{width:min(300px,78vw);scroll-snap-align:none}
  .bew-spur blockquote:nth-child(n+5){display:flex}
  .bew-band.halt .bew-spur{animation-play-state:paused}
  .bew .bew-hinweis{display:none}
}

/* Logo ohne Spruch, größer und lesbar (Mikes Wunsch, 22.10.2026) */
.logo-bild{height:118px}
.nav.fest .logo-bild{height:84px}
.seite{padding-top:142px}
.fuss .logo-bild.gross{height:76px}
@media (max-width:860px){
  .logo-bild{height:auto;width:min(250px,100%)}
  .nav.fest .logo-bild{height:auto;width:min(210px,100%)}
  .seite{padding-top:106px}
}

/* ===== Startseiten-Kopf, Runde 2 (22.10.2026): Ort als Hinweis, kurze Überschrift, Vorteile als Kacheln, Rückruf mit Vertrauensleiste ===== */
.nur-leser{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.held-inhalt{padding-top:170px}
.held-ort{display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;margin:0 0 22px;padding:8px 15px 8px 11px;border-radius:999px;background:rgba(10,26,16,.55);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#e6f3dc;font-size:13.5px;font-weight:600;letter-spacing:.01em}
.held-ort svg{width:17px;height:17px;flex:none;color:var(--gruen-hell)}
.held-titel.kurz{font-size:clamp(36px,4.6vw,66px);line-height:1.04;letter-spacing:-.025em;margin-bottom:30px;max-width:780px;text-shadow:0 4px 30px rgba(0,0,0,.35)}
.held-titel.kurz .w{display:block}
.held-titel.kurz .w:nth-child(2){animation-delay:.12s}
.held-titel.kurz em{font-style:normal}
.held-vorteile{list-style:none;margin:0 0 34px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:650px}
.held-vorteile li{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:14px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#f1f6ef;font-size:15px;font-weight:500;line-height:1.3}
.held-vorteile li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:var(--gruen-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2310201a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}

.held-seite{position:relative;z-index:2;width:384px;display:grid;gap:12px;animation:seite-rein .9s .45s var(--ease) both}
@keyframes seite-rein{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.rueckruf{background:#fff;border-radius:var(--r2);padding:22px 22px 16px;box-shadow:0 30px 60px -28px rgba(0,0,0,.6);display:grid;gap:10px}
.rr-kopf{display:flex;align-items:center;gap:13px;margin-bottom:4px}
.rr-icon{width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#5a9a35 0%,#2f6a1c 100%);box-shadow:0 10px 22px -10px rgba(47,106,28,.8)}
.rr-icon svg{width:22px;height:22px}
.rr-titel{font-family:var(--display);font-weight:800;font-size:19px;line-height:1.2;letter-spacing:-.01em;color:var(--txt);margin:0}
.rr-unter{font-size:13px;color:var(--txt2);margin:2px 0 0}
.rr-reihe{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rr-feld{display:block}
.rr-feld input,.rr-feld select,.rr-feld textarea{width:100%;background:#f4f7f1;border:1px solid rgba(16,32,26,.14);border-radius:12px;padding:12px 14px;color:var(--txt);font:15px var(--body);outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.rr-feld textarea{resize:vertical;min-height:52px}
.rr-feld select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%232f6a1c' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px;color:var(--txt2)}
.rr-feld select.gewaehlt{color:var(--txt)}
.rr-feld input::placeholder,.rr-feld textarea::placeholder{color:#7d8a80}
.rr-feld input:focus,.rr-feld select:focus,.rr-feld textarea:focus{border-color:var(--gruen2);background:#fff;box-shadow:0 0 0 4px rgba(78,139,46,.18)}
.rr-feld input[aria-invalid=true]{border-color:#c0392b;box-shadow:0 0 0 4px rgba(192,57,43,.14)}
.rr-falle{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.rr-knopf{justify-content:center;width:100%;margin-top:2px;padding-top:14px;padding-bottom:14px}
.rr-klein{font-size:12px;line-height:1.45;color:var(--txt2);margin:0;text-align:center}
.rr-klein a{color:var(--gruen);text-decoration:underline}
.rr-fehler{margin:0;font-size:13px;color:#a8321f;font-weight:600}
.rr-danke{display:grid;gap:8px;text-align:center;padding:14px 4px}
.rr-danke .rr-haken{width:52px;height:52px;margin:0 auto 4px;border-radius:50%;background:var(--gruen);color:#fff;display:grid;place-items:center;font-size:26px}
.rr-danke p{margin:0;color:var(--txt2);font-size:14px;line-height:1.5}
.rr-danke .rr-titel{font-size:20px}
.rr-danke .rr-hinweis{font-size:12px;color:#7d8a80}

.vertrauen{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;background:#fff;border-radius:var(--r);padding:12px 16px;box-shadow:0 20px 44px -24px rgba(0,0,0,.55)}
.vt-google,.vt-hwk{display:flex;align-items:center;gap:10px;min-width:0}
.vt-google{transition:transform .25s var(--ease)}
.vt-google:hover{transform:translateY(-2px)}
.vt-google svg{width:28px;height:28px;flex:none}
.vt-text{display:grid;line-height:1.25;min-width:0}
.vt-text b{font-family:var(--display);font-size:15px;font-weight:800;color:var(--txt);white-space:nowrap}
.vt-sterne{color:#f5b301;letter-spacing:1px;font-size:13px;margin-left:3px}
.vt-text small{font-size:11.5px;color:var(--txt2)}
.vt-trenner{width:1px;height:36px;background:var(--linie)}
.vt-hwk-logo{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:10px;border:1.5px dashed rgba(16,32,26,.28);color:var(--txt2);font:800 10px var(--display);letter-spacing:.04em}
.vt-hwk .vt-hwk-bild{display:block;height:26px;width:auto;max-width:100%}

@media (min-width:1200px){
  /* Text links und Rückruf rechts stehen nebeneinander und sind gemeinsam senkrecht mittig */
  .held{align-items:center}
  .held-inhalt{flex:1;min-width:0;padding-right:48px}
  .held-seite{flex:none;margin:10px max(var(--pad),calc((100% - 1400px) / 2 + 24px)) 0 0}
}
@media (max-width:1199px){
  .held{flex-direction:column;align-items:flex-start;justify-content:center}
  .held-inhalt{width:100%}
  .held-ort{width:auto}
  .held-seite{margin:4px var(--pad) 56px;width:auto;max-width:520px;align-self:stretch}
}
@media (max-width:860px){
  .held-inhalt{padding-top:122px}
  .held-ort{font-size:12px;padding:7px 12px 7px 9px;margin-bottom:16px;white-space:normal}
  .held-titel.kurz{font-size:clamp(32px,9.4vw,42px);margin-bottom:22px}
  .held-vorteile{grid-template-columns:1fr;gap:8px;margin-bottom:26px}
  .held-vorteile li{padding:10px 12px;font-size:14.5px}
  .held-seite{margin:0 20px 40px}
  .rueckruf{padding:20px 18px 14px}
}
@media (max-width:480px){.rr-reihe{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.held-seite{animation:none}}

/* Größeres Logo: Menüpunkte nicht umbrechen, Logo auf mittleren Bildschirmen etwas kleiner */
.nav-links a{white-space:nowrap}
@media (min-width:861px) and (max-width:1360px){.logo-bild{height:96px}.nav.fest .logo-bild{height:76px}.nav-links a{padding:10px 10px}}

/* Kopf, Runde 2b: kleine Vorzeile plus kurze große Überschrift, Vertrauensleiste mit Platz für das breite Kammer-Logo */
.held-titel.kurz{font-size:clamp(46px,5.8vw,86px);line-height:.98;letter-spacing:-.035em}
.held-titel.kurz .h1-klein{font-size:clamp(17px,1.5vw,23px);font-weight:600;line-height:1.3;letter-spacing:0;color:#dfeadb;margin-bottom:14px}
.held-titel.kurz .w:nth-child(3){animation-delay:.24s}
.vertrauen{grid-template-columns:auto auto 1fr;gap:16px}
.vt-hwk{flex-direction:column;align-items:flex-start;gap:3px}
.vt-hwk-logo{width:auto;height:auto;border:0;border-radius:0;display:block;font:800 13px/1.2 var(--display);letter-spacing:0;color:var(--txt)}
.vt-hwk small{font-size:11.5px;color:var(--txt2);line-height:1.25}
.vt-hwk-bild{display:block;height:26px;width:auto;max-width:100%}
@media (max-width:860px){
  .held-titel.kurz{font-size:clamp(42px,12.5vw,56px)}
  .held-titel.kurz .h1-klein{font-size:16px;margin-bottom:10px}
  .held-vorteile{grid-template-columns:1fr 1fr;gap:8px}
  .held-vorteile li{gap:8px;padding:10px;font-size:13.5px;line-height:1.25}
  .held-vorteile li::before{width:18px;height:18px;background-size:11px}
}

/* Vorteilsleiste unter dem Kopf statt Zahlen (Mikes Wunsch, 22.10.2026) */
.fakten>div.fakt-wert{display:flex;align-items:center;justify-content:center;gap:16px;text-align:left;padding:26px 22px}
.fw-icon{width:54px;height:54px;flex:none;border-radius:16px;display:grid;place-items:center;color:var(--gruen);background:linear-gradient(135deg,#eef6e8 0%,#d7eaca 100%);box-shadow:inset 0 0 0 1px rgba(47,106,28,.12)}
.fw-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fakten .fakt-wert b{font-family:var(--display);font-size:18px;font-weight:800;line-height:1.25;letter-spacing:-.01em;color:var(--txt);margin:0}
@media (max-width:860px){
  .fakten>div.fakt-wert{flex-direction:column;text-align:center;gap:10px;padding:18px 10px}
  .fw-icon{width:46px;height:46px;border-radius:14px}
  .fw-icon svg{width:23px;height:23px}
  .fakten .fakt-wert b{font-size:15px}
}

/* Logo im Kopf etwas kleiner, damit es zu Menü und Knöpfen passt (Benny, 22.10.2026) */
.logo-bild{height:96px}
.nav.fest .logo-bild{height:70px}
@media (min-width:861px) and (max-width:1360px){.logo-bild{height:84px}.nav.fest .logo-bild{height:66px}}
@media (max-width:860px){.logo-bild{height:auto;width:min(205px,100%)}.nav.fest .logo-bild{height:auto;width:min(180px,100%)}}
.seite{padding-top:124px}
@media (max-width:860px){.seite{padding-top:96px}}
.fakten .fw-icon{color:var(--gruen)}

/* Kopf, Mikes Wahl (22.10.2026): Variante Kontur, Liste ohne Kästen */
.held-titel.kontur{font-size:clamp(46px,6.2vw,96px);line-height:.95;letter-spacing:-.035em;text-transform:uppercase;margin-bottom:30px;max-width:none}
.held-titel.kontur .w{display:block;white-space:nowrap}
.held-titel.kontur .h1-klein{text-transform:none;font-size:clamp(18px,1.7vw,25px);font-weight:600;letter-spacing:0;line-height:1.3;color:#dfeadb;margin-bottom:10px;white-space:normal}
.held-titel.kontur .w:nth-child(2){animation-delay:.12s}.held-titel.kontur .w:nth-child(3){animation-delay:.24s}
.held-titel.kontur .umriss{color:transparent;-webkit-text-stroke:2.5px #fff;text-shadow:none}
.held-titel.kontur .umriss b{font-weight:inherit;color:var(--gruen-hell);-webkit-text-stroke:0}
.held-vorteile.schlicht{gap:14px 40px;margin:0 0 36px;padding-top:26px;border-top:1px solid rgba(255,255,255,.22);max-width:720px}
.held-vorteile.schlicht li{background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;border-radius:0;gap:12px;font-size:17px;font-weight:500;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.held-vorteile.schlicht li::before{width:22px;height:22px;background-size:13px}
@media (max-width:860px){
  .held-titel.kontur{font-size:clamp(30px,9.2vw,46px);margin-bottom:22px}
  .held-titel.kontur .h1-klein{font-size:17px;margin-bottom:8px}
  .held-titel.kontur .umriss{-webkit-text-stroke:1.5px #fff}
  .held-vorteile.schlicht{grid-template-columns:1fr;gap:10px;padding-top:20px;margin-bottom:26px}
  .held-vorteile.schlicht li{font-size:15px;padding:0}
  .held-vorteile.schlicht li::before{width:20px;height:20px;background-size:12px}
}
/* Stichpunkte wie in der ersten Fassung: eine Spalte, ohne Trennlinie (Mike, 22.10.2026) */
.held-vorteile.schlicht{grid-template-columns:1fr;gap:12px;padding-top:0;border-top:0;max-width:700px}
.held-vorteile.schlicht li{align-items:flex-start;line-height:1.45;font-size:clamp(15px,1.25vw,18px)}
.held-vorteile.schlicht li::before{margin-top:.12em}
@media (max-width:860px){.held-vorteile.schlicht{gap:10px;padding-top:0}.held-vorteile.schlicht li{font-size:15px}}
@media (min-width:861px){
  .held-inhalt{padding-top:148px}
  .held-ort{margin-bottom:18px}
  .held-titel.kontur{font-size:clamp(46px,5.9vw,96px);margin-bottom:24px}
  .held-vorteile.schlicht{gap:10px;margin-bottom:30px}
}

/* Vorteilsleiste als dunkles Band (Variante 1, Mikes Wahl 22.10.2026) */
#fakten{background:linear-gradient(135deg,#1d4423 0%,#14301c 60%,#0f2615 100%);border:0;border-radius:28px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
#fakten>div.fakt-wert{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:16px;text-align:left;padding:30px 28px;border-left:1px solid rgba(255,255,255,.1);border-top:0}
#fakten>div.fakt-wert:first-child{border-left:0}
#fakten .fw-icon{width:56px;height:56px;border-radius:50%;color:var(--gruen-hell);background:rgba(159,217,127,.08);box-shadow:inset 0 0 0 1.5px rgba(159,217,127,.45)}
#fakten .fw-icon svg{width:28px;height:28px}
#fakten .fw-text{display:block;font-size:inherit;color:inherit}
#fakten .fw-text b{display:block;font-family:var(--display);font-size:19px;font-weight:800;line-height:1.2;letter-spacing:-.01em;color:#fff;margin:4px 0 6px}
#fakten .fw-text small{display:block;font-size:14px;line-height:1.45;color:#b9cfb1}
@media (max-width:1100px){
  #fakten>div.fakt-wert:nth-child(3){border-left:0}
  #fakten>div.fakt-wert:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}
}
@media (max-width:860px){
  #fakten{border-radius:var(--r)}
  #fakten>div.fakt-wert{flex-direction:column;align-items:center;text-align:center;gap:10px;padding:20px 12px}
  #fakten .fw-icon{width:48px;height:48px}
  #fakten .fw-icon svg{width:24px;height:24px}
  #fakten .fw-text b{font-size:15.5px;margin:0 0 4px}
  #fakten .fw-text small{font-size:12.5px}
}
@media (min-width:861px) and (max-width:1199px){
  .held-seite{margin-bottom:110px}
  #fakten{margin-left:var(--pad);margin-right:var(--pad)}
}

/* Spruch "Weil wir unsere Arbeit ♥" wie auf Mikes Flyer, oben neben der Ortsmarkierung und in der Fußleiste (22.10.2026) */
.held-zeile{display:flex;align-items:center;flex-wrap:wrap;gap:10px 24px;margin-bottom:18px}
.held-zeile .held-ort{margin:0}
.held-spruch,.fuss-spruch{display:inline-flex;align-items:center;gap:7px;margin:0;font-family:'Caveat',cursive;font-weight:700;line-height:1;white-space:nowrap}
.held-spruch{font-size:31px;color:var(--gruen-hell);transform:rotate(-3deg);text-shadow:0 2px 14px rgba(0,0,0,.45)}
.fuss-spruch{font-size:28px;color:var(--gruen-hell);transform:rotate(-2deg);transform-origin:left center;margin:8px 0 12px}
.herz{width:.85em;height:.85em;flex:none;color:#e0453a;filter:drop-shadow(0 2px 6px rgba(224,69,58,.35))}
@media (max-width:860px){
  .held-zeile{gap:10px 18px;margin-bottom:16px}
  .held-spruch{font-size:27px}
}
/* Spruch als hellgrünes Pinsel-Band wie auf dem Flyer, überall gut lesbar */
.held-spruch,.fuss-marke .fuss-spruch{background:var(--gruen-hell);color:#14301c;padding:5px 16px 8px 14px;border-radius:14px 5px 16px 7px;text-shadow:none;box-shadow:0 10px 24px -12px rgba(0,0,0,.55);max-width:none}
.held-spruch{font-size:28px;transform:rotate(-3deg)}
.fuss-marke .fuss-spruch{font-size:25px;line-height:1;margin:10px 0 16px;transform:rotate(-2deg)}
.held-spruch .herz,.fuss-spruch .herz{color:#d8322a;filter:none}
@media (max-width:860px){.held-spruch{font-size:25px}}
.fuss-marke .fuss-spruch{width:max-content;align-self:flex-start}
/* Spruch in der Fußleiste unten rechts in der Kontakt-Spalte (22.10.2026) */
.fuss-spalte .fuss-spruch{background:var(--gruen-hell);color:#14301c;width:max-content;align-self:flex-start;padding:5px 16px 8px 14px;border-radius:14px 5px 16px 7px;font-size:25px;line-height:1;margin:22px 0 0;transform:rotate(-2deg);transform-origin:left center;box-shadow:0 10px 24px -12px rgba(0,0,0,.55)}
/* Spruch oben: über dem Rückruf-Feld, rechtsbündig (Benny, 22.10.2026) */
.held-seite .held-spruch{justify-self:end;margin:0 6px 4px 0;transform:rotate(-3deg);transform-origin:right center}

/* Ablauf als vier Karten auf dunklem Dachfoto, nach Vorbild hr-dachreinigung (Mike, 22.10.2026) */
.ablauf.weg{position:relative;isolation:isolate;overflow:hidden}
.ablauf.weg::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,38,21,.93) 0%,rgba(20,48,28,.88) 50%,rgba(15,38,21,.95) 100%),url("img/dach-halb.jpg") center/cover}
.weg-karten{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1400px;margin:0 auto;padding:0 var(--pad)}
.weg-karten li{background:#fff;border-radius:20px;padding:28px 26px 30px;box-shadow:0 34px 60px -32px rgba(0,0,0,.7);transition:transform .3s var(--ease),box-shadow .3s}
.weg-karten li:hover{transform:translateY(-5px);box-shadow:0 40px 70px -30px rgba(0,0,0,.75)}
.weg-nr{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;margin-bottom:22px;background:linear-gradient(135deg,#5a9a35 0%,#2f6a1c 100%);color:#fff;font:800 22px var(--display);box-shadow:0 12px 24px -12px rgba(47,106,28,.85)}
.weg-karten h3{font-family:var(--display);font-size:15.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--txt);margin:0 0 12px}
.weg-karten p{font-size:15px;line-height:1.6;color:var(--txt2);margin:0}
.weg-karten .rv:nth-child(2){transition-delay:.12s}.weg-karten .rv:nth-child(3){transition-delay:.24s}.weg-karten .rv:nth-child(4){transition-delay:.36s}
@media (max-width:1100px){.weg-karten{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
  .weg-karten{grid-template-columns:1fr;gap:16px;padding:0 20px}
  .weg-karten li{padding:22px 20px 24px;display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:start}
  .weg-nr{width:44px;height:44px;font-size:19px;margin:0;grid-row:span 2}
  .weg-karten h3{margin:10px 0 8px}
}
.ablauf.weg .kopf h2 .gruen{color:var(--gruen-hell)}
.ablauf.weg .kopf h2{max-width:900px}

/* Ablauf in unserem Stil (Benny, 22.10.2026): kein Foto, Glas-Karten, Nummern in hellgrünen Ringen, Verbindungslinie */
.ablauf.weg::before{display:none}
.weg-karten li{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 30px 60px -34px rgba(0,0,0,.6);border-radius:22px;padding:28px 26px 30px}
.weg-karten li:hover{border-color:rgba(159,217,127,.45);box-shadow:0 34px 64px -30px rgba(0,0,0,.7)}
.weg-nr{width:54px;height:54px;border-radius:50%;background:rgba(159,217,127,.1);color:var(--gruen-hell);box-shadow:inset 0 0 0 1.5px rgba(159,217,127,.55);font:800 21px var(--display)}
.weg-karten h3{color:#fff}
.weg-karten p{color:#b9cfb1}
@media (min-width:1101px){
  .weg-karten li:not(:last-child)::after{content:"";position:absolute;top:55px;right:-23px;width:24px;height:2px;background:linear-gradient(90deg,rgba(159,217,127,.7),rgba(159,217,127,.25))}
}
@media (max-width:860px){.weg-nr{width:46px;height:46px;font-size:19px}}

/* Vorher-Nachher als zwei Fotos nebeneinander mit Text darunter (Mike, 22.10.2026) */
.vn-paar{padding:120px var(--pad) 110px}
.vn-paar-kopf,.vn-paar-text{max-width:1180px;margin-left:auto;margin-right:auto}
.vn-paar-kopf h2{color:#fff;max-width:760px}
.vn-paar-kopf h2 .gruen{color:var(--gruen-hell)}
.vn-zwei{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1400px;margin:46px auto 0}
.vn-zwei figure{margin:0}
.vn-zwei img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:18px;box-shadow:0 30px 60px -32px rgba(0,0,0,.7)}
.vn-zwei figcaption{margin-top:14px;font:700 12.5px var(--display);letter-spacing:.18em;text-transform:uppercase;color:#b9cfb1}
.vn-zwei figcaption.nach{color:var(--gruen-hell)}
.vn-zwei figcaption.nach::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gruen-hell);margin-right:10px;vertical-align:1px}
.vn-zwei .rv:nth-child(2){transition-delay:.12s}
.vn-paar-text{margin-top:30px;color:#cfe0cf;font-size:16px;line-height:1.7;max-width:1180px}
.vn-paar-text{padding-right:calc(100% - 640px)}
@media (max-width:860px){
  .vn-paar{padding:80px 20px 70px}
  .vn-zwei{grid-template-columns:1fr;gap:26px;margin-top:32px}
  .vn-paar-text{padding-right:0;font-size:15px}
}
.vn-zwei img{aspect-ratio:2/1;object-position:center 88%}
@media (max-width:860px){.vn-zwei img{aspect-ratio:16/9;object-position:center 92%}}
.vn-zwei img{aspect-ratio:5/4;object-position:center 60%}
@media (max-width:860px){.vn-zwei img{aspect-ratio:5/4;object-position:center 60%}}
/* Neues Hero-Video (22.10.2026): Ausschnitt auf den Arbeiter */
.held-video{object-position:60% 20%}
@media (max-width:860px){.held-video{object-position:58% 0%}}

/* ===== Leistungsseiten (22.10.2026): Fokus-Band, Vorteile, helles Vorher-Nachher, weitere Leistungen ===== */
.fokus-band{background:linear-gradient(135deg,#1d4423 0%,#14301c 60%,#0f2615 100%);color:#fff;padding:70px var(--pad)}
.fokus-innen{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center}
.fokus-text .eyebrow{color:var(--gruen-hell)}
.fokus-text h2{color:#fff;font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-.02em;margin:6px 0 16px}
.fokus-text p{color:#cfe0cf;font-size:17px;line-height:1.65;margin:0;max-width:560px}
.fokus-punkte{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fokus-punkte li{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font:700 16px var(--display);color:#fff}
.fokus-punkte li::before{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:rgba(159,217,127,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%239fd97f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:inset 0 0 0 1.5px rgba(159,217,127,.55)}
.vorteile-kopf{margin-top:56px}
.vorteile-kopf h3{font-family:var(--display);font-size:clamp(22px,2.2vw,28px);letter-spacing:-.01em;margin:0}
.vn-paar.vn-hell{background:var(--bg2)}
.vn-paar.vn-hell .vn-paar-kopf h2{color:var(--txt)}
.vn-paar.vn-hell .vn-paar-kopf h2 .gruen{color:var(--gruen)}
.vn-paar.vn-hell .eyebrow{color:var(--gruen)}
.vn-paar.vn-hell .vn-zwei figcaption{color:var(--txt2)}
.vn-paar.vn-hell .vn-zwei figcaption.nach{color:var(--gruen)}
.vn-paar.vn-hell .vn-zwei figcaption.nach::before{background:var(--gruen)}
.vn-paar.vn-hell .vn-zwei img{aspect-ratio:4/3;box-shadow:0 26px 50px -30px rgba(16,32,26,.5)}
.vn-objekt{max-width:1400px;margin:0 auto}
.vn-objekt+.vn-objekt{margin-top:46px}
.vn-objekt .vn-zwei{margin-top:34px}
.vn-objekt-text{max-width:1400px;margin:12px auto 0;color:var(--txt2);font-size:15px}
.weitere-leistungen h2{margin:4px 0 22px}
.weitere{display:flex;flex-wrap:wrap;gap:12px}
.weitere a{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;background:#fff;border:1px solid var(--linie);font:700 15px var(--display);color:var(--txt);transition:border-color .2s,color .2s,transform .25s var(--ease)}
.weitere a:hover{border-color:var(--gruen);color:var(--gruen);transform:translateY(-2px)}
.weitere a .pfeil{color:var(--gruen)}
.seite .faq{background:var(--bg)}
@media (max-width:900px){.fokus-innen{grid-template-columns:1fr;gap:28px}}
@media (max-width:860px){
  .fokus-band{padding:56px 20px}
  .fokus-text p{font-size:16px}
  .vorteile-kopf{margin-top:40px}
  .weitere a{padding:11px 16px;font-size:14px}
}
.vn-paar.vn-hell .vn-objekt,.vn-paar.vn-hell .vn-paar-kopf{max-width:1100px;margin-left:auto;margin-right:auto}

/* ===== Über uns neu (22.10.2026): Foto-Kopf mit Kennzahlen, Zitat-Karte, Was uns ausmacht ===== */
.uu-held{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:96px var(--pad) 0;min-height:620px;display:flex;flex-direction:column;justify-content:flex-end}
.uu-held-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;z-index:-2;transform:scale(1.04);animation:heldZoom 26s ease-in-out infinite alternate}
.uu-held::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,22,14,.88) 0%,rgba(8,22,14,.62) 48%,rgba(8,22,14,.2) 100%),linear-gradient(0deg,rgba(8,22,14,.75) 0%,transparent 45%)}
.uu-held-innen{max-width:1400px;width:100%;margin:0 auto;padding-bottom:44px}
.uu-held .krumen,.uu-held .krumen a{color:#cfe0cf}
.uu-held .eyebrow{color:var(--gruen-hell)}
.uu-held h1{color:#fff;font-size:clamp(38px,5.4vw,78px);line-height:1;letter-spacing:-.035em;max-width:900px;margin:8px 0 20px}
.uu-held h1 em{font-style:normal;color:var(--gruen-hell);display:block}
.uu-lead{font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:#e2ece0;max-width:620px;margin:0 0 30px}
.uu-zahlen{list-style:none;margin:0 auto;padding:0;max-width:1400px;width:100%;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.18)}
.uu-zahlen li{padding:24px 22px 30px;border-left:1px solid rgba(255,255,255,.14)}
.uu-zahlen li:first-child{border-left:0;padding-left:0}
.uu-zahlen b{display:block;font:800 clamp(30px,3.2vw,46px)/1 var(--display);color:var(--gruen-hell);letter-spacing:-.02em}
.uu-zahlen span{display:block;margin-top:8px;font-size:14px;color:#cfe0cf;line-height:1.4}

.uu-zitat-bereich{padding:90px var(--pad) 40px}
.uu-zitat{position:relative;margin:0 auto;max-width:1300px;border-radius:30px;overflow:hidden;min-height:470px;display:flex;flex-direction:column;justify-content:space-between;padding:56px calc(42% + 60px) 48px 60px;background:linear-gradient(120deg,#14301c 0%,#1d4a26 100%);box-shadow:0 40px 80px -40px rgba(16,32,26,.6);isolation:isolate}
.uu-zitat>img{position:absolute;top:0;right:0;bottom:0;left:auto;width:42%;height:100%;object-fit:cover;object-position:64% 50%;z-index:-2;transition:transform 1.4s var(--ease)}
.uu-zitat:hover>img{transform:scale(1.04)}
.uu-zitat::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(25,64,35,0) 57.9%,rgba(25,64,35,.92) 58%,rgba(25,64,35,0) 68%)}
.uu-zitat blockquote{margin:0;max-width:760px;font:700 clamp(22px,2.5vw,36px)/1.28 var(--display);letter-spacing:-.015em;color:#fff}
.uu-zitat mark{background:none;color:var(--gruen-hell)}
.uu-zitat figcaption{display:flex;align-items:center;gap:16px;margin-top:40px;color:#fff}
.uu-zeichen{width:62px;height:62px;flex:none;border-radius:16px;background:#fff;display:grid;place-items:center;box-shadow:0 10px 26px -12px rgba(0,0,0,.6)}
.uu-zeichen img{width:44px;height:auto}
.uu-zitat figcaption b{display:block;font:800 18px var(--display)}
.uu-zitat figcaption small{display:block;font-size:14px;color:#cfe0cf;margin-top:2px}
.uu-google{position:absolute;top:28px;right:28px;display:grid;justify-items:center;gap:2px;padding:14px 18px;border-radius:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;text-align:center}
.uu-google b{font:800 30px/1 var(--display)}
.uu-google b small{font-size:15px;font-weight:600;opacity:.8}
.uu-google span{color:#f5b301;letter-spacing:2px;font-size:14px}
.uu-google>small{font-size:11px;color:#e2ece0}

.uu-ausmacht{max-width:1300px;margin:0 auto;padding:70px var(--pad) 90px;display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.uu-marke{display:inline-block;padding:7px 14px;border-radius:8px;background:#dcecd2;color:var(--gruen);font:700 13px var(--display);letter-spacing:.04em}
.uu-ausmacht-text h2{font-size:clamp(30px,3.4vw,48px);letter-spacing:-.025em;margin:16px 0 18px}
.uu-ausmacht-text p{color:var(--txt2);font-size:16.5px;line-height:1.7;margin:0 0 14px}
.uu-ausmacht-text .btn{margin-top:14px}
.uu-kacheln{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.uu-kachel{position:relative;overflow:hidden;border-radius:20px;padding:30px 26px 28px;color:#fff;background:linear-gradient(150deg,#2f6a1c 0%,#1d4423 55%,#14301c 100%);box-shadow:0 26px 50px -30px rgba(16,32,26,.7);transition:transform .35s var(--ease),box-shadow .35s}
.uu-kachel:nth-child(2),.uu-kachel:nth-child(3){background:linear-gradient(150deg,#1d4423 0%,#14301c 60%,#0f2615 100%)}
.uu-kachel::after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(159,217,127,.22),transparent 70%);transition:transform .5s var(--ease)}
.uu-kachel:hover{transform:translateY(-6px);box-shadow:0 34px 60px -28px rgba(16,32,26,.8)}
.uu-kachel:hover::after{transform:scale(1.5)}
.uu-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;margin-bottom:22px;color:var(--gruen-hell);background:rgba(159,217,127,.1);box-shadow:inset 0 0 0 1.5px rgba(159,217,127,.5)}
.uu-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.uu-kachel h3{font:800 19px/1.25 var(--display);color:#fff;margin:0 0 10px}
.uu-kachel p{margin:0;font-size:14.5px;line-height:1.6;color:#cfe0cf}
.uu-kacheln .rv:nth-child(2){transition-delay:.1s}.uu-kacheln .rv:nth-child(3){transition-delay:.2s}.uu-kacheln .rv:nth-child(4){transition-delay:.3s}

.uu-partner{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:26px;padding-top:20px;border-top:1px solid var(--linie)}
.uu-partner-titel{width:100%;font:700 12px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--txt2)}
.uu-partner img{height:26px;width:auto;display:block}
.uu-partner span:not(.uu-partner-titel){padding:7px 14px;border-radius:999px;border:1px solid var(--linie);background:#fff;font:700 14px var(--display);color:var(--txt)}
.team .bild img{aspect-ratio:4/5;object-fit:cover;width:100%}

@media (max-width:1000px){.uu-ausmacht{grid-template-columns:1fr;gap:36px}}
@media (max-width:860px){
  .uu-held{padding:90px 20px 0;min-height:0}
  .uu-zahlen{grid-template-columns:1fr 1fr}
  .uu-zahlen li{padding:18px 14px 20px}
  .uu-zahlen li:nth-child(3){border-left:0;padding-left:0}
  .uu-zahlen li:first-child{padding-left:0}
  .uu-zahlen li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
  .uu-zitat-bereich{padding:56px 16px 20px}
  .uu-zitat{padding:0 24px 28px;min-height:0;border-radius:22px}
  .uu-zitat>img{position:relative;inset:auto;width:calc(100% + 48px);max-width:none;height:380px;margin:0 -24px 26px;flex:none;object-position:62% 45%}
  .uu-zitat::before{display:none}
  .uu-google{top:18px;right:18px;padding:10px 14px}
  .uu-google b{font-size:24px}
  .uu-zitat figcaption{margin-top:26px}
  .uu-ausmacht{padding:50px 20px 60px}
  .uu-kacheln{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.uu-held-bild{animation:none}}
.uu-zeichen{width:auto;height:62px;padding:0 14px}
.uu-zeichen img{width:96px}
@media (max-width:860px){.uu-zeichen{height:54px;padding:0 10px}.uu-zeichen img{width:80px}}

/* ===== Startseite: Wer wartet, zahlt mehr (22.10.2026) ===== */
.wartet{max-width:1300px;margin:0 auto;padding:110px var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.wartet h2{font-size:clamp(34px,4.4vw,62px);letter-spacing:-.03em;line-height:1.02;margin:8px 0 34px}
.wartet h2 .gruen{color:var(--gruen)}
.wartet-bild{position:relative;margin:0;border-radius:22px;overflow:visible}
.wartet-bild::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border-radius:24px;background:linear-gradient(135deg,var(--gruen-hell),var(--gruen));z-index:-1}
.wartet-bild img{display:block;width:100%;height:auto;border-radius:20px;box-shadow:0 30px 60px -30px rgba(16,32,26,.6)}
.wartet-tag{position:absolute;top:16px;padding:7px 16px;border-radius:999px;font:800 13px var(--display);letter-spacing:.12em;text-transform:uppercase;color:#fff;box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.wartet-tag.vorher{left:16px;background:rgba(20,48,28,.88)}
.wartet-tag.nachher{right:16px;background:var(--gruen2)}
.wartet-rechts{display:grid;gap:16px}
.wartet-karte{background:#fff;border:1px solid var(--linie);border-left:4px solid var(--gruen);border-radius:16px;padding:22px 24px;box-shadow:0 18px 40px -30px rgba(16,32,26,.45);transition:transform .3s var(--ease),box-shadow .3s}
.wartet-karte:hover{transform:translateX(4px);box-shadow:0 24px 46px -28px rgba(16,32,26,.5)}
.wartet-karte h3{font:800 15.5px var(--display);letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px;color:var(--txt)}
.wartet-karte p{margin:0;color:var(--txt2);font-size:15.5px;line-height:1.6}
.wartet-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.wartet-rechts .rv:nth-child(2){transition-delay:.1s}.wartet-rechts .rv:nth-child(3){transition-delay:.2s}
@media (max-width:960px){.wartet{grid-template-columns:1fr;gap:40px;padding:80px 20px}}
@media (max-width:860px){.wartet h2{margin-bottom:26px}.wartet-bild::before{inset:-10px 10px 10px -10px}.wartet-knoepfe .btn{flex:1;justify-content:center}}
/* Über uns: helleres Kopfbild, Firmenwagen mit Bildunterschrift (22.10.2026) */
.uu-held-bild{object-position:62% 40%}
.uu-held::before{background:linear-gradient(90deg,rgba(8,22,14,.78) 0%,rgba(8,22,14,.45) 42%,rgba(8,22,14,0) 72%),linear-gradient(0deg,rgba(8,22,14,.7) 0%,transparent 38%)}
.uu-held h1,.uu-lead{text-shadow:0 2px 18px rgba(0,0,0,.35)}
.uu-wagen{position:relative;margin:0}
.uu-wagen figcaption{position:absolute;left:16px;right:16px;bottom:16px;padding:10px 14px;border-radius:12px;background:rgba(20,48,28,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font:600 13.5px var(--body)}
@media (max-width:860px){.uu-held::before{background:linear-gradient(180deg,rgba(8,22,14,.55) 0%,rgba(8,22,14,.7) 60%,rgba(8,22,14,.85) 100%)}}
/* Über uns: Kopf ohne Zahlenleiste (Benny, 22.10.2026) */
.uu-held-innen{padding-bottom:80px}
.uu-held{min-height:560px}
@media (max-width:860px){.uu-held-innen{padding-bottom:56px}}
/* Über uns: Imagefilm statt Firmenwagen (22.10.2026) */
.team{align-items:center}
.uu-film{margin:0;position:relative;border-radius:var(--r2);overflow:hidden;box-shadow:var(--schatten);background:#0f2615}
.uu-film video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#0f2615}
.team .uu-film.rv{opacity:1;transform:none}
.uu-film figcaption{padding:12px 16px;background:#14301c;color:#d9eccf;font:600 13.5px var(--body)}
/* Fix 22.10.2026: Vorher-Nachher-Text brach auf breiten Bildschirmen Wort für Wort um (Prozent-Innenabstand wuchs mit) */
.vn-paar-text{padding-right:0;max-width:640px;margin-left:max(0px,calc((100% - 1180px) / 2));margin-right:auto}
.vn-paar.vn-hell .vn-objekt-text{max-width:1100px}
.vn-paar>.vn-paar-kopf{max-width:1400px}
.vn-paar>.vn-paar-text{margin-left:max(0px,calc((100% - 1400px) / 2))}

/* ===== Zusätzliche Effekte (22.10.2026), nur aktiv wenn effekte.js läuft (Klasse .fx am html) ===== */
/* 1 Überschriften Wort für Wort */
.fx .fx-wort{display:inline-block;opacity:0;transform:translateY(.55em) rotate(2deg);filter:blur(4px);transition:opacity .6s var(--ease),transform .7s var(--ease),filter .6s var(--ease);transition-delay:calc(var(--i) * 55ms)}
.fx .fx-da .fx-wort{opacity:1;transform:none;filter:none}
/* 2 Nachher-Foto wischt sich frei */
.fx .vn-zwei figure:nth-child(1) img{filter:saturate(.55) brightness(.92);transition:filter 1.2s var(--ease) .2s}
.fx .vn-zwei.fx-da figure:nth-child(1) img{filter:none}
.fx .vn-zwei figure:nth-child(2) img{clip-path:inset(0 100% 0 0 round 18px);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1) .35s}
.fx .vn-zwei.fx-da figure:nth-child(2) img{clip-path:inset(0 0 0 0 round 18px)}
.fx .wartet-bild::after{content:"";position:absolute;top:0;right:0;bottom:0;width:50%;border-radius:0 20px 20px 0;background:linear-gradient(135deg,#1d4423,#14301c);transform-origin:right;transition:transform 1.2s cubic-bezier(.7,0,.2,1) .45s;z-index:2}
.fx .wartet-bild.fx-da::after{transform:scaleX(0)}
.fx .wartet-bild .wartet-tag{z-index:3}
.fx .wartet-bild,.fx .uu-zitat{translate:var(--sx,0px) var(--sy,0px);transition:translate .6s var(--ease)}
/* 3 Verbindungslinien im Ablauf wachsen nacheinander */
.fx .weg-karten li:not(:last-child)::after{transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.fx .weg-karten.fx-da li:nth-child(1)::after{transform:scaleX(1);transition-delay:.55s}
.fx .weg-karten.fx-da li:nth-child(2)::after{transform:scaleX(1);transition-delay:.85s}
.fx .weg-karten.fx-da li:nth-child(3)::after{transform:scaleX(1);transition-delay:1.15s}
.fx .weg-karten .weg-nr{transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.fx .weg-karten li:hover .weg-nr{transform:scale(1.12) rotate(-6deg);box-shadow:inset 0 0 0 1.5px var(--gruen-hell),0 0 0 6px rgba(159,217,127,.12)}
/* 4 Symbole springen herein */
.fx #fakten .fw-icon,.fx .uu-kachel .uu-icon,.fx .fokus-punkte li::before{transform:scale(0) rotate(-40deg);transition:transform .7s cubic-bezier(.34,1.56,.64,1)}
.fx #fakten.fx-da .fw-icon,.fx .uu-kacheln.fx-da .uu-icon,.fx .fokus-punkte.fx-da li::before{transform:none}
.fx #fakten .fakt-wert:nth-child(2) .fw-icon,.fx .uu-kachel:nth-child(2) .uu-icon,.fx .fokus-punkte li:nth-child(2)::before{transition-delay:.12s}
.fx #fakten .fakt-wert:nth-child(3) .fw-icon,.fx .uu-kachel:nth-child(3) .uu-icon,.fx .fokus-punkte li:nth-child(3)::before{transition-delay:.24s}
.fx #fakten .fakt-wert:nth-child(4) .fw-icon,.fx .uu-kachel:nth-child(4) .uu-icon,.fx .fokus-punkte li:nth-child(4)::before{transition-delay:.36s}
.fx #fakten .fakt-wert:hover .fw-icon{animation:fxRing 1.1s ease-out}
@keyframes fxRing{0%{box-shadow:inset 0 0 0 1.5px rgba(159,217,127,.45),0 0 0 0 rgba(159,217,127,.45)}100%{box-shadow:inset 0 0 0 1.5px rgba(159,217,127,.45),0 0 0 16px rgba(159,217,127,0)}}
/* 5 Lichtkegel folgt der Maus */
.fx-karte{position:relative}
.fx-glanz{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;z-index:1;background:radial-gradient(280px circle at var(--gx,50%) var(--gy,50%),rgba(159,217,127,.22),transparent 62%)}
.fx-karte:hover>.fx-glanz{opacity:1}
.karte>.fx-glanz,.vorteile li>.fx-glanz,.wartet-karte>.fx-glanz{background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(47,106,28,.11),transparent 62%)}
.uu-zitat>.fx-glanz{z-index:0;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(159,217,127,.16),transparent 60%)}
/* 6 Magnetische Knöpfe brauchen weichen Rücklauf */
.fx .btn-haupt,.fx .rr-knopf{transition:transform .35s var(--ease),box-shadow .3s}
/* 7 Kleinigkeiten */
.fx .fuss-spruch:hover{animation:fxWackeln .6s ease}
@keyframes fxWackeln{0%,100%{transform:rotate(-2deg)}25%{transform:rotate(2deg) scale(1.05)}50%{transform:rotate(-4deg)}75%{transform:rotate(1deg)}}
.fx .fuss-spruch:hover .herz{animation:fxHerz .7s ease}
@keyframes fxHerz{0%,100%{transform:scale(1)}30%{transform:scale(1.35)}60%{transform:scale(.9)}}
@media (prefers-reduced-motion:reduce){.fx .fx-wort,.fx .vn-zwei img,.fx .wartet-bild::after{transition:none!important;opacity:1;transform:none;filter:none;clip-path:none}}
/* Startseiten-Kopf: Anruf-Knopf statt Kostenloses Angebot (Mike, 23.10.2026) */
.held-tel{gap:12px;padding-left:22px;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.held-tel svg{width:20px;height:20px;flex:none;animation:telWackel 3.2s ease-in-out infinite}
@keyframes telWackel{0%,86%,100%{transform:rotate(0)}88%,92%,96%{transform:rotate(-14deg)}90%,94%{transform:rotate(14deg)}}
@media (prefers-reduced-motion:reduce){.held-tel svg{animation:none}}

/* ===== Referenzen neu (23.10.2026): Kopf mit Schieber, Paare mit Filter, Bei der Arbeit ===== */
.ref-held{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(140deg,#1f5a2d 0%,#14301c 55%,#0f2615 100%);color:#fff;padding:110px var(--pad) 90px;display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.ref-held::before{content:"";position:absolute;right:-10%;top:-20%;width:60%;height:140%;background:radial-gradient(circle,rgba(159,217,127,.16),transparent 62%);z-index:-1}
.ref-held-text{max-width:600px;justify-self:end;width:100%}
.ref-held .krumen,.ref-held .krumen a{color:#cfe0cf}
.ref-held .eyebrow{color:var(--gruen-hell)}
.ref-held h1{color:#fff;font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.035em;margin:8px 0 18px}
.ref-held h1 em{font-style:normal;color:var(--gruen-hell);display:block}
.ref-lead{color:#d7e6d4;font-size:17px;line-height:1.65;margin:0 0 26px}
.ref-zahlen{list-style:none;margin:0 0 30px;padding:0;display:flex;gap:30px;flex-wrap:wrap}
.ref-zahlen b{display:block;font:800 clamp(28px,2.8vw,40px)/1 var(--display);color:var(--gruen-hell)}
.ref-zahlen span{display:block;margin-top:6px;font-size:13.5px;color:#cfe0cf}
.ref-regler{position:relative;aspect-ratio:16/9;border-radius:26px;overflow:hidden;cursor:ew-resize;user-select:none;touch-action:pan-y;box-shadow:0 40px 80px -36px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.12);outline:none}
.ref-regler:focus-visible{box-shadow:0 0 0 4px var(--gruen-hell)}
.ref-regler img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ref-regler .nach{clip-path:inset(0 0 0 var(--x))}
.ref-griff{position:absolute;top:0;bottom:0;left:var(--x);width:3px;background:#fff;transform:translateX(-50%);box-shadow:0 0 22px rgba(255,255,255,.7)}
.ref-griff span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--gruen);color:#fff;font:700 11px var(--body);letter-spacing:2px;box-shadow:0 10px 26px -8px rgba(0,0,0,.6),0 0 0 4px rgba(255,255,255,.9);transition:transform .25s var(--ease)}
.ref-regler:hover .ref-griff span,.ref-regler.aktiv .ref-griff span{transform:translate(-50%,-50%) scale(1.1)}
.ref-regler-tag{position:absolute;top:18px;padding:7px 14px;border-radius:999px;font:800 12px var(--display);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(10,20,14,.72);backdrop-filter:blur(6px)}
.ref-regler-tag.l{left:18px}
.ref-regler-tag.r{right:18px;background:var(--gruen2)}
.ref-hinweis{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);padding:6px 14px;border-radius:999px;background:rgba(10,20,14,.65);color:#fff;font:600 12.5px var(--body);transition:opacity .4s}
.ref-regler.aktiv .ref-hinweis{opacity:0}

.ref-paare,.ref-arbeit{max-width:1400px;margin:0 auto;padding:90px var(--pad) 40px}
.ref-arbeit{padding-top:50px;padding-bottom:90px}
.ref-paare-kopf h2{font-size:clamp(30px,3.6vw,50px);letter-spacing:-.025em;margin:6px 0 0}
.ref-paare-kopf h2 .gruen{color:var(--gruen)}
.ref-filter{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 30px}
.ref-filter button{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;border:1px solid var(--linie);background:#fff;color:var(--txt);font:700 14.5px var(--display);cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.ref-filter button span{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--bg2);color:var(--gruen);font-size:12.5px}
.ref-filter button:hover{border-color:var(--gruen);transform:translateY(-2px)}
.ref-filter button.aktiv{background:var(--gruen);border-color:var(--gruen);color:#fff}
.ref-filter button.aktiv span{background:rgba(255,255,255,.2);color:#fff}
.ref-raster{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.ref-paar{background:#fff;border:1px solid var(--linie);border-radius:22px;overflow:hidden;box-shadow:0 22px 48px -34px rgba(16,32,26,.5);transition:transform .35s var(--ease),box-shadow .35s}
.ref-paar:hover{transform:translateY(-5px);box-shadow:0 30px 60px -30px rgba(16,32,26,.55)}
.ref-paar.weg{display:none}
.ref-bilder{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:#fff}
.ref-bilder figure{position:relative;margin:0;overflow:hidden}
.ref-bilder img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1s var(--ease)}
.ref-paar:hover .ref-bilder img{transform:scale(1.04)}
.ref-tag{position:absolute;left:12px;top:12px;padding:5px 11px;border-radius:999px;font:800 11px var(--display);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(10,20,14,.72);backdrop-filter:blur(6px)}
.ref-tag.nach{background:var(--gruen2)}
.ref-text{padding:20px 24px 24px}
.ref-kat{display:inline-block;padding:4px 10px;border-radius:7px;background:#dcecd2;color:var(--gruen);font:700 12px var(--display);letter-spacing:.04em}
.ref-text h3{font:800 20px/1.25 var(--display);margin:10px 0 6px;color:var(--txt)}
.ref-text p{margin:0;color:var(--txt2);font-size:15px;line-height:1.55}
.ref-arbeit-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px;grid-auto-flow:dense}
.ref-arbeit-bild{position:relative;margin:0;border-radius:18px;overflow:hidden;grid-column:span 2;box-shadow:0 20px 44px -32px rgba(16,32,26,.55)}
.ref-arbeit-bild.hoch{grid-column:span 1;grid-row:span 2}
.ref-arbeit-bild img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.ref-arbeit-bild:hover img{transform:scale(1.05)}
.ref-arbeit-bild figcaption{position:absolute;left:12px;right:12px;bottom:12px;padding:8px 12px;border-radius:10px;background:rgba(10,20,14,.72);backdrop-filter:blur(6px);color:#fff;font:600 13px var(--body)}
@media (max-width:1100px){.ref-held{grid-template-columns:1fr;gap:40px}.ref-held-text{justify-self:start;max-width:none}.ref-arbeit-raster{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
  .ref-held{padding:90px 20px 60px}
  .ref-regler{border-radius:18px}
  .ref-griff span{width:46px;height:46px}
  .ref-paare,.ref-arbeit{padding-left:20px;padding-right:20px;padding-top:60px}
  .ref-raster{grid-template-columns:1fr;gap:20px}
  .ref-filter{gap:8px;margin:22px 0 24px}
  .ref-filter button{padding:9px 14px;font-size:13.5px}
  .ref-arbeit-raster{grid-template-columns:1fr 1fr;gap:10px}
  .ref-arbeit-bild figcaption{font-size:12px;padding:6px 9px;left:8px;right:8px;bottom:8px}
}
/* Startseiten-Kopf: „Professionelle“ deutlich stärker (Mike, 23.10.2026) */
.held-titel.kontur .h1-klein{display:flex;align-items:center;gap:16px;font-size:clamp(26px,2.7vw,42px);font-weight:800;letter-spacing:-.01em;color:var(--gruen-hell);margin-bottom:12px;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.held-titel.kontur .h1-klein::before{content:"";flex:none;width:clamp(34px,3.4vw,56px);height:5px;border-radius:3px;background:var(--gruen-hell);box-shadow:0 0 18px rgba(159,217,127,.55)}
@media (max-width:860px){.held-titel.kontur .h1-klein{font-size:24px;gap:12px;margin-bottom:8px}.held-titel.kontur .h1-klein::before{width:30px;height:4px}}
/* Radar mit 300-km-Ring (23.10.2026) */
.radar{max-width:600px}
.radar .ring-weit{stroke-dasharray:5 7;stroke:rgba(47,106,28,.3)}
.radar .ort.weit circle{stroke:var(--gruen2);stroke-dasharray:3 2}
.radar .ort.weit text{font-size:13px}
/* Fix Referenzen: Höhenangabe im HTML überstimmte das Seitenverhältnis, Schieber zeigt mehr Dach */
.ref-bilder img{height:auto}
.ref-regler{aspect-ratio:2/1}
.ref-regler img{object-position:50% 100%}
@media (max-width:860px){.ref-regler{aspect-ratio:16/10}}
/* Referenzen „Mitten im Einsatz“: Mauerwerk-Raster, jedes Foto vollständig (23.10.2026) */
.ref-arbeit-raster{display:block;columns:3 280px;column-gap:16px}
.ref-arbeit-bild,.ref-arbeit-bild.hoch{break-inside:avoid;margin:0 0 16px;display:block}
.ref-arbeit-bild img{height:auto}
@media (max-width:860px){.ref-arbeit-raster{columns:2 150px;column-gap:10px}.ref-arbeit-bild{margin-bottom:10px}}
/* Referenz-Kopf kompakter (Benny, 23.10.2026): Breite begrenzt, Schieber kleiner */
.ref-held{padding:72px max(var(--pad),calc((100% - 1300px) / 2)) 64px;grid-template-columns:1fr 1fr;gap:48px}
.ref-held-text{justify-self:start;max-width:560px}
.ref-held h1{font-size:clamp(36px,4vw,58px)}
.ref-lead{font-size:16px;margin-bottom:22px}
.ref-zahlen{margin-bottom:24px}
.ref-regler{width:100%;max-width:600px;justify-self:end}
@media (max-width:1100px){.ref-held{grid-template-columns:1fr;gap:34px}.ref-regler{justify-self:start}}
@media (max-width:860px){.ref-held{padding:84px 20px 48px}}
/* Technikprüfung 23.10.2026: Fuß-Überschriften sind jetzt h2 (keine übersprungene Ebene), sehen aus wie vorher */
.fuss-spalte .fuss-titel{font-family:var(--display);color:#fff;font-size:13px;font-weight:700;letter-spacing:.12em;line-height:inherit;text-transform:uppercase;max-width:none;margin:0 0 4px}
/* Größere Tippfläche (mindestens 24 px) ohne Verschiebung: Polster rein, gleich viel Rand raus */
.fuss-spalte a{padding:2px 0;margin:-2px 0}
.fuss-links a{padding:5px 0;margin:-5px 0}
.krumen a,.rr-klein a{padding:5px 0}
.g-foto-weg{justify-self:start;background:none;border:0;padding:6px 0;font:inherit;font-size:13px;color:var(--txt2);text-decoration:underline;cursor:pointer}
.g-foto-weg:hover{color:var(--gruen)}
/* Phase 1 (24.10.2026): Pause-Knopf fürs Hero-Video (WCAG 2.2.2), 3D als Textlink */
.held-3d-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;color:#e6f3dc;font:600 14.5px var(--body);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(230,243,220,.55)}
.held-3d-link:hover{color:#fff;text-decoration-color:#fff}
.held-video-info{display:flex;align-items:center;gap:10px;margin-top:18px}
.held-pause{flex:none;width:34px;height:34px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:#0a1a10;color:#fff;cursor:pointer}
.held-pause svg{width:14px;height:14px;fill:currentColor}
.held-pause .p-aus{display:none}
.held-pause.steht .p-an{display:none}
.held-pause.steht .p-aus{display:inline}
.held-pause:focus-visible,.held-3d-link:focus-visible{outline:3px solid var(--gruen-hell);outline-offset:3px}
/* Phase 1 Barrierefreiheit (24.10.2026): sichtbarer Tastaturfokus überall, Anker nicht unter der festen Kopfleiste */
html{scroll-padding-top:130px}
:focus-visible{outline:3px solid #2f6a1c;outline-offset:3px}
.held :focus-visible,.fuss :focus-visible,.dunkel :focus-visible,.cta-band :focus-visible{outline-color:#9fd97f}
input[type=range]:focus-visible{outline:3px solid #2f6a1c;outline-offset:6px}
.g-upload:focus-within span{border-color:var(--gruen);outline:3px solid #2f6a1c;outline-offset:3px}
#g-frage:focus{outline:none}
.g-check a{color:var(--gruen);text-decoration:underline}
/* Fuß (24.10.2026): Instagram-Knopf und Medienmaster-Zeile wie bei den anderen Kundenseiten */
.fuss-insta{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;margin:6px 0 0!important;padding:9px 16px 9px 12px!important;border-radius:999px;border:1px solid rgba(159,217,127,.45);background:rgba(255,255,255,.06);color:#fff!important;font:600 13.5px var(--body);transition:background .2s,border-color .2s}
.fuss-insta svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.fuss-insta svg .punkt{fill:currentColor;stroke:none}
.fuss-insta:hover{background:rgba(159,217,127,.16);border-color:#9fd97f}
.fuss-schluss .credit{font-size:12px;color:#9fb79d}
.fuss-schluss .credit a{font:800 11.5px var(--display);letter-spacing:.06em;color:#d7e6d4;padding:5px 0}
.fuss-schluss .credit a b{color:#9fd97f;font-weight:800}
.fuss-schluss .credit a:hover{color:#fff}
/* Rechtsseiten (24.10.2026): Überschriften nicht auf 14 Zeichen begrenzen, sonst brechen sie früh um */
.recht h2{max-width:none}

/* ===== Handy-Aktionen (24.10.2026): Anruf-Knopf in der Leiste, Rückruf-Band auf den Leistungsseiten ===== */
.nav-anruf{display:none}
@media (max-width:860px){
  .nav-anruf{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border-radius:50%;flex:none;gap:0}
  .nav-anruf svg{width:20px;height:20px}
}
.rr-band{background:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:64px;align-items:center;padding:96px max(var(--pad),calc((100% - 1200px) / 2))}
.rr-band h2{max-width:12ch;margin-bottom:18px}
.rr-band-text p:not(.eyebrow){font-size:18px;line-height:1.6;color:var(--txt2);max-width:46ch}
.rr-band-oder{margin-top:18px}
.rr-band-oder a{color:var(--gruen);font-weight:700;text-decoration:none;white-space:nowrap}
.rr-band-oder a:hover{text-decoration:underline}
.rr-band .rueckruf{box-shadow:0 34px 70px -34px rgba(16,32,26,.45);border:1px solid var(--linie)}
@media (max-width:860px){
  .rr-band{grid-template-columns:1fr;gap:28px;padding:64px var(--pad)}
  .rr-band-text p:not(.eyebrow){font-size:16px}
}