/* Energieberatung Baerwald | ruhig, sachlich, fotogetragen. Tannengrün (seit 07.10. eine Stufe heller) + Glühlicht. Mobile first. */
@font-face{font-family:"Plex";src:url("fonts/plex-sans.woff2") format("woff2");font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-italic.woff2") format("woff2");font-weight:400 500;font-style:italic;font-display:swap}

:root{
  color-scheme:light only;
  --ink:#101614;
  --text:#34413D;
  --muted:#5F6E69;
  --line:#D7E0DB;
  --line-2:#E6ECE9;
  --paper:#FFFFFF;
  --mist:#F1F4F2;
  --g-950:#12392D;
  --g-900:#174A3A;
  --g-800:#1D5A46;
  --g-700:#236B53;
  --g-600:#2A7A5F;
  --g-100:#E2EEE8;
  --lamp:#F5C24C;
  --lamp-d:#DDA629;
  --red:#C23B2E;
  --ok:#15834A;
  --star:#FBBC04;
  --r:3px;
  --wrap:1240px;
  --pad:20px;
  --nav-h:68px;
  --btn-h:54px;
  --sec-pad:84px;
  --h1:clamp(34px,9.6vw,44px);
  --h2:clamp(28px,7.4vw,34px);
  --h3:20px;
  --h3-lg:24px;
  --shadow:0 1px 2px rgba(16,22,20,.06),0 10px 28px rgba(16,22,20,.08);
  --shadow-lg:0 2px 4px rgba(16,22,20,.06),0 28px 64px rgba(16,22,20,.16);
  --ease:cubic-bezier(.22,1,.36,1);
}
@media (max-width:380px){:root{--pad:16px}}
@media (min-width:761px){:root{--pad:32px;--nav-h:78px;--sec-pad:112px;--h1:clamp(44px,4.6vw,64px);--h2:clamp(34px,3vw,42px)}}
/* Große Monitore (Chef 01.10.): Fläche nutzen statt alles hochzoomen. Inhaltsbereich breiter, Überschriften maßvoll
   größer, Fließtext nur 1 bis 2 px. Höhe als Bedingung, damit niedrige Breitbild-Fenster normal bleiben. */
@media (min-width:1800px) and (min-height:900px){:root{--wrap:1440px;--sec-pad:120px;--h1:clamp(44px,4.6vw,72px);--h2:48px;--h3:22px;--h3-lg:26px}}
@media (min-width:2300px) and (min-height:1150px){:root{--wrap:1640px;--sec-pad:128px;--h1:clamp(44px,4.6vw,80px);--h2:54px;--h3:23px;--h3-lg:28px}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 8px);overflow-x:clip;overflow-anchor:none}
body{margin:0;font-family:"Plex",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16.5px;line-height:1.65;color:var(--text);background:var(--paper);overflow-x:clip;overflow-anchor:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (min-width:761px){body{font-size:17px}}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:var(--g-600);text-decoration-thickness:1px;text-underline-offset:3px}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{color:var(--ink);margin:0;line-height:1.15;letter-spacing:-.015em;font-weight:650;hyphens:none;-webkit-hyphens:none;overflow-wrap:normal;word-break:normal;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--lamp);outline-offset:3px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic.flip{transform:scaleX(-1)}
.skip-link{position:absolute;left:12px;top:-80px;z-index:200;display:inline-flex;align-items:center;min-height:var(--btn-h);background:var(--ink);color:#fff;padding:0 18px;border-radius:var(--r);text-decoration:none}
.skip-link:focus{top:12px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}

/* Typo */
.eyebrow{font-size:15px;font-weight:600;letter-spacing:.005em;color:var(--g-700);margin-bottom:14px}
.eyebrow--light{color:var(--lamp)}
.h1{font-size:var(--h1);font-weight:680;letter-spacing:-.028em;line-height:1.05}
.h2{font-size:var(--h2);font-weight:650;letter-spacing:-.022em;line-height:1.1}
.em{font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:500;font-size:1.08em;letter-spacing:-.01em;color:var(--g-600);padding-right:.06em}
.sec--green .em,.cta .em{color:var(--lamp)}
.lead{font-size:clamp(17.5px,1.4vw,20px);line-height:1.6;color:var(--text);max-width:33em}
.sub{font-size:16.5px;line-height:1.65;color:var(--muted);max-width:38em}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--btn-h);padding:0 24px;border-radius:var(--r);border:1.5px solid transparent;font-weight:600;font-size:16px;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.btn .ic{width:18px;height:18px;stroke-width:2}
.btn--primary{background:var(--g-800);color:#fff}
.btn--primary:hover{background:var(--g-700)}
.btn--outline{background:#fff;color:var(--ink);border-color:#B9C7C0}
.btn--outline:hover{border-color:var(--g-800);color:var(--g-800)}
.btn--ghost{background:transparent;color:var(--muted);border-color:var(--line)}
.btn--ghost:hover{color:var(--ink);border-color:#B9C7C0}
.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn--outline-light:hover{border-color:#fff}
.btn--block{width:100%}
/* Haupt-CTA: einfarbig Glühlicht-Gelb mit Pfeil (Dustin 30.09.: kein schwarzer Pfeilblock), beim Hover läuft ein Lichtstreifen durch */
.btn--cta{position:relative;isolation:isolate;overflow:hidden;gap:10px;border:0;background:var(--lamp);color:var(--ink)}
.btn--cta > i{display:grid;place-items:center;color:inherit}
.btn--cta > i .ic{width:19px;height:19px;stroke-width:2.2;transition:transform .35s var(--ease)}
.btn--cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-110%);transition:transform .8s var(--ease)}
.btn--cta:hover{background:#FFD066}
.btn--cta:hover::before{transform:translateX(110%)}
.btn--cta:hover > i .ic{transform:translateX(3px)}
.btn--sm{min-height:44px;font-size:15px}
.link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-block:10px 2px;font-weight:600;font-size:15.5px;color:var(--g-700);text-decoration:none;border-bottom:1.5px solid var(--lamp)}
.link .ic{width:16px;height:16px;transition:transform .25s var(--ease)}
.link:hover .ic{transform:translateX(4px)}

/* Navigation */
.nav{position:fixed;inset:0 0 auto 0;z-index:90;height:var(--nav-h);background:rgba(255,255,255,.97);border-bottom:1px solid transparent;transition:background-color .35s,border-color .35s,box-shadow .35s}
.brand__mark--light{display:none}
.has-hero .nav:not(.is-scrolled):not(.menu-open){background:rgba(23,74,58,0)}
.has-hero .nav:not(.is-scrolled):not(.menu-open) .brand{color:#fff}
.has-hero .nav:not(.is-scrolled):not(.menu-open) .brand__text small{color:#A9C0B6}
.has-hero .nav:not(.is-scrolled):not(.menu-open) .brand__mark--dark{display:none}
.has-hero .nav:not(.is-scrolled):not(.menu-open) .brand__mark--light{display:block}
.has-hero .nav:not(.is-scrolled):not(.menu-open) .nav__links a{color:#fff}
.has-hero .nav:not(.is-scrolled):not(.menu-open) .nav__burger{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.nav.is-scrolled{border-bottom-color:var(--line);box-shadow:0 6px 20px rgba(16,22,20,.05)}
.nav__inner{height:100%;display:flex;align-items:center;gap:32px}
.brand{display:inline-flex;align-items:center;gap:12px;min-height:46px;text-decoration:none;color:var(--ink);flex:none}
.brand__mark{width:auto;height:46px;flex:none}
.nowrap{white-space:nowrap}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__text small{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.brand__text strong{font-size:20px;font-weight:680;letter-spacing:-.02em}
.brand--light{color:#fff}
.brand--light .brand__text small{color:#9DB3AA}
.nav__links,.nav__cta{display:none}
.nav__links a{color:var(--ink);text-decoration:none;font-size:15.5px;font-weight:500;padding:8px 0;position:relative}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--lamp);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__burger{display:inline-flex;margin-left:auto;width:46px;height:46px;border-radius:var(--r);border:1px solid var(--line);background:#fff;color:var(--ink);align-items:center;justify-content:center}
.nav__burger .ic{width:22px;height:22px}
.mobilmenu{position:absolute;left:0;right:0;top:var(--nav-h);background:#fff;border-top:1px solid var(--line);box-shadow:0 20px 40px rgba(16,22,20,.12);padding:8px 0 24px}
.mobilmenu nav{display:flex;flex-direction:column}
.mobilmenu a:not(.btn){display:block;padding:14px 2px;color:var(--ink);text-decoration:none;font-size:18px;font-weight:550;border-bottom:1px solid var(--line-2)}
.mobilmenu .btn{margin-top:12px}
@media (min-width:761px){.brand__mark{height:58px}.brand__text strong{font-size:22px}}
@media (min-width:1081px){
  .nav__inner{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);gap:28px}
  .nav__inner .brand{justify-self:start}
  .nav__links{display:flex;gap:26px;justify-self:center}
  .nav__cta{display:flex;align-items:center;gap:20px;justify-self:end}
  .nav__burger{display:none}
}
@media (min-width:1081px) and (max-width:1240px){.nav__links{gap:20px}}

/* Hero: dunkles Tannengrün, Foto läuft rechts weich aus, unten laufen echte Projekte durch */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:var(--vh1,100dvh);background:var(--g-900);color:#C4D5CD;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(70% 45% at 12% 78%,rgba(245,194,76,.13),transparent 70%)}
.hero__photo{position:relative;flex:1 1 auto;min-height:calc(var(--nav-h) + 170px);overflow:hidden}
.hero__photo picture,.hero__photo img{position:absolute;inset:0;width:100%;height:100%}
.hero__photo img{object-fit:cover;object-position:42% 40%;animation:kenburns 18s var(--ease) both}
.hero__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,74,58,.78) 0%,rgba(23,74,58,0) calc(var(--nav-h) + 40px),rgba(23,74,58,0) 50%,var(--g-900) 100%)}
.hero__text{position:relative;z-index:2;padding:0 var(--pad) 28px;margin-top:-34px}
.hero__text .h1{color:#fff;margin-bottom:18px}
.hero .em{color:var(--lamp)}
.hero__text .lead{color:#C4D5CD;margin-bottom:28px}
.hero__actions{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.hero__actions .btn{width:100%}
.hero__trust{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.hero__ee{display:none;align-items:center;align-self:stretch;padding-left:26px;border-left:1px solid rgba(255,255,255,.18)}
.hero__ee img{height:26px;width:auto;filter:brightness(0) invert(1);opacity:.82}
.hero__in{animation:heroIn 1s var(--ease) both;animation-delay:calc(var(--d,0) * 70ms + 30ms)}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes kenburns{from{transform:scale(1.1)}to{transform:scale(1)}}
.gtrust{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--text)}
.gtrust__faces{display:flex}
.gtrust__faces img{width:40px;height:40px;border-radius:50%;border:3px solid #fff;margin-left:-11px;box-shadow:0 1px 4px rgba(16,22,20,.15);object-fit:cover}
.gtrust__faces img:first-child{margin-left:0}
.gtrust__txt{display:flex;flex-direction:column;gap:3px}
.gtrust__row{display:flex;align-items:center;gap:8px}
.gtrust__row strong{font-size:18px;color:var(--ink);font-weight:700}
.gtrust__g{width:20px;height:20px}
.gtrust__sub{font-size:14.5px;color:var(--muted)}
.gtrust:hover .gtrust__sub{text-decoration:underline;text-underline-offset:3px}
.hero .gtrust{gap:12px}
.hero .gtrust__faces img{width:34px;height:34px;border-width:2px;border-color:var(--g-900);box-shadow:none;margin-left:-9px}
.hero .gtrust__faces img:first-child{margin-left:0}
.hero .gtrust__row{gap:7px}
.hero .gtrust__row strong{font-size:17px}
.hero .gtrust .stars{--s:14px}
.hero .gtrust__g{width:17px;height:17px}
.hero .gtrust__row strong{color:#fff}
.hero .gtrust__sub{font-size:13.5px;color:#A9C0B6}
@media (min-width:761px){
  .hero__text{padding:0 var(--pad) 36px;margin-top:-56px}
  .hero__actions{flex-direction:row;flex-wrap:wrap;gap:12px}
  .hero__actions .btn{width:auto;min-width:250px}
  .hero__trust{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:0 26px}
  .hero__ee{display:flex}
}
@media (min-width:1081px){
  .hero{height:var(--vh1,100dvh);min-height:560px;padding-top:var(--nav-h)}
  .hero::before{background:radial-gradient(55% 60% at 18% 48%,rgba(245,194,76,.12),transparent 70%)}
  .hero__photo{position:absolute;top:0;right:0;bottom:0;left:calc(max(var(--pad),calc((100% - var(--wrap)) / 2 + var(--pad))) + 500px);width:auto;height:auto;z-index:0}
  .hero__photo img{object-position:35% 50%}
  .hero__photo::after{background:linear-gradient(90deg,var(--g-900) 0%,rgba(23,74,58,.72) 14%,rgba(23,74,58,.25) 30%,rgba(23,74,58,0) 46%),linear-gradient(180deg,rgba(23,74,58,.8) 0%,rgba(23,74,58,0) calc(var(--nav-h) + 60px)),linear-gradient(0deg,rgba(23,74,58,.85) 0%,rgba(23,74,58,0) 26%)}
  .hero__text{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;margin:0;padding:clamp(24px,6vh,72px) 0 clamp(40px,9vh,110px) max(var(--pad),calc((100% - var(--wrap)) / 2 + var(--pad)));max-width:calc(max(var(--pad),calc((100% - var(--wrap)) / 2 + var(--pad))) + 620px)}
  .hero__text .h1{font-size:clamp(46px,min(5.8vw,11vh),92px);line-height:1;margin-bottom:clamp(14px,2.6vh,26px)}
  .hero__text .lead{max-width:30em;margin-bottom:clamp(24px,4.6vh,44px)}
  .hero__actions{margin-bottom:clamp(24px,5vh,48px)}
}
@media (min-width:1081px) and (max-height:780px){.hero__ee{display:none}}
@media (prefers-reduced-motion:reduce){
  .hero__in,.hero__photo img{animation:none}
}

/* Sterne */
.stars{display:inline-flex;gap:2px;color:var(--star);--s:17px}
.stars svg{width:var(--s);height:var(--s);fill:currentColor}
.stars--lg{--s:24px}
.stars--part svg{color:#D3DAD6}
.stars--part svg.on{color:var(--star)}
.star-part{position:relative;display:inline-block;width:var(--s);height:var(--s)}
.star-part svg{position:absolute;left:0;top:0}
.star-part__bg{color:#D3DAD6}
.star-part > span{position:absolute;inset:0 auto 0 0;width:70%;overflow:hidden}

/* Sections */
.sec{padding-block:var(--sec-pad)}
/* Jede Section mindestens bildschirmhoch, Inhalt mittig (Maxim 01.10.: auf dem großen Monitor standen mehrere Sections
   gleichzeitig im Bild). Höhe über --vh1 einmal in px fixiert, sonst wächst sie in Chrome iOS beim Scrollen. */
main > .sec,main > .cta{display:flex;flex-direction:column;justify-content:center;min-height:var(--vh1,100svh)}
main > .sec > .wrap,main > .cta > .wrap{width:100%}
/* FAQ und Anfrage ändern beim Aufklappen ihre Höhe: einmal mittig messen, dann oben fixieren (app.js), sonst springt alles */
main > .sec.is-settled{justify-content:flex-start;padding-top:var(--settle-top)}
.sec--mist{background:var(--mist)}
.sec--green{background:var(--g-900);color:#C4D5CD}
.sec--green .h2,.sec--green h3{color:#fff}
.sec--green .sub{color:#A9C0B6}
.head{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:860px;margin:0 auto 40px;text-align:center}
.head .eyebrow{margin-bottom:0}
.head .sub{max-width:40em}
.sec__cta{display:flex;justify-content:center;margin-top:44px}
.sec__cta .btn{width:100%}
@media (min-width:761px){
  .head{margin-bottom:56px}
  .sec__cta{margin-top:56px}
  .sec__cta .btn{width:auto;min-width:250px}
}
.col-cta{margin-top:36px}
.col-cta .btn{width:100%}
@media (min-width:761px){.col-cta{margin-top:40px}.col-cta .btn{width:auto;min-width:250px}}

/* Warum: Vergleich ohne Plan / mit Plan */
.versus{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.versus__col{border-radius:var(--r)}
.versus__label{font-size:14px;font-weight:600;color:var(--muted);margin-bottom:6px}
.versus h3{font-size:var(--h3-lg);letter-spacing:-.02em;margin-bottom:20px}
.versus ul{display:grid;gap:14px}
.versus li{display:flex;gap:12px;font-size:16px;line-height:1.5}
.versus li .ic{width:20px;height:20px;flex:none;margin-top:2px;stroke-width:2.4}
.versus__off{padding:26px 22px;border:1px solid var(--line);background:rgba(255,255,255,.6)}
.versus__off h3{color:var(--muted)}
.versus__off li{color:var(--muted)}
.versus__off li .ic{color:#B8574B}
.versus__on{position:relative;overflow:hidden;background:var(--g-800);color:#D5E2DC;box-shadow:var(--shadow-lg)}
.versus__photo{position:relative;margin:0;aspect-ratio:16/7;overflow:hidden}
.versus__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;transition:transform 1.2s var(--ease)}
.versus__on:hover .versus__photo img{transform:scale(1.04)}
.versus__photo{margin-bottom:-1px}
.versus__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(29,90,70,0) 22%,rgba(29,90,70,.18) 42%,rgba(29,90,70,.5) 62%,rgba(29,90,70,.84) 82%,#1D5A46 100%)}
.versus__photo figcaption{position:absolute;z-index:1;left:22px;right:22px;bottom:12px;font-size:13px;color:#DCE8E2}
.versus__body{padding:22px 22px 28px}
.versus__cta{margin-top:24px;width:100%}
.versus__on .versus__label{color:var(--lamp)}
.versus__on h3{color:#fff}
.versus__on li{color:#E4EEE9}
.versus__on li .ic{color:var(--lamp)}
@media (min-width:761px){
  .versus{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:center}
  .versus__off{padding:32px 30px}
  .versus__body{padding:26px 30px 32px}
  .versus__photo figcaption{left:30px}
}
@media (min-width:761px){.versus__cta{width:auto}}
@media (min-width:1081px){
  #vorteile{display:flex;align-items:center;min-height:var(--vh1,100dvh);padding-block:clamp(56px,8vh,96px)}
  #vorteile > .wrap{width:100%}
  #vorteile .head{margin-bottom:clamp(24px,4vh,44px)}
  .versus{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0}
  .versus__off{padding:34px 76px 34px 36px}
  .versus__on{display:grid;grid-template-columns:minmax(0,1fr) 36%;margin-left:-40px;z-index:1}
  .versus__photo{order:2;aspect-ratio:auto;height:100%}
  .versus__photo{margin:0 0 0 -1px}
  .versus__photo::after{background:linear-gradient(90deg,#1D5A46 0%,rgba(29,90,70,.82) 12%,rgba(29,90,70,.48) 26%,rgba(29,90,70,.16) 42%,rgba(29,90,70,0) 60%),linear-gradient(0deg,rgba(29,90,70,.85) 0%,rgba(29,90,70,0) 40%)}
  .versus__photo figcaption{left:18px;right:16px;bottom:14px;font-size:12.5px;line-height:1.4}
  .versus__body{padding:30px 34px 32px}
  .versus h3{margin-bottom:16px}
  .versus ul{gap:11px}
  .versus li{font-size:16px}
}
@media (min-width:1081px) and (max-height:800px){
  #vorteile{padding-block:44px}
  #vorteile .head{gap:10px;margin-bottom:22px}
  .versus__off{padding-block:26px}
  .versus__body{padding:24px 32px 26px}
  .versus h3{margin-bottom:12px}
  .versus ul{gap:8px}
  .versus li{font-size:15.5px;line-height:1.45}
  .versus__cta{margin-top:18px}
}

/* Anfrage */
.anfrage__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
.anfrage__intro .sub{margin-top:18px}
.anfrage__info{padding-top:8px}
.anfrage__facts{display:grid;gap:18px}
.anfrage__facts li{display:flex;gap:14px;align-items:flex-start}
.anfrage__facts .ic{width:22px;height:22px;color:var(--lamp);margin-top:2px}
.anfrage__facts strong{display:block;color:#fff;font-weight:600}
.anfrage__facts a{display:inline-block;padding-block:13px 3px;margin-top:-11px;color:#fff;font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--lamp)}
@media (min-width:1081px){
  .anfrage__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto auto 1fr;gap:0 72px}
  .anfrage__intro{grid-area:1/1;margin-top:var(--anf-off,0px);margin-bottom:30px}
  .anfrage__info{grid-area:2/1;padding-top:0}
  .anfrage__grid .formcard{grid-area:1/2/4/3}
  .anfrage__grid.is-done{grid-template-rows:auto auto;align-items:center}
  .anfrage__grid.is-done .formcard{grid-area:1/2/3/3;align-self:center}
  .anfrage__grid.is-done .danke{padding:38px 36px 34px}
}

.formcard{position:relative;background:#fff;color:var(--text);border-radius:4px;padding:26px 20px 20px;box-shadow:0 30px 80px rgba(0,0,0,.35);margin-inline:-4px}
.formcard h3{color:var(--ink)}
.formcard--flat{box-shadow:var(--shadow);border:1px solid var(--line)}
@media (min-width:761px){.formcard{padding:36px 36px 26px;margin-inline:0}}
.qform__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px;font-size:0;font-weight:600;letter-spacing:.02em;color:#98A6A0}
.qform__steps li{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;white-space:nowrap}
.qform__steps li span{width:8px;height:8px;border-radius:50%;background:#CFD9D4;flex:none;transition:background .3s}
.qform__steps li.is-active,.qform__steps li.is-done{color:var(--ink)}
.qform__steps li.is-active span{background:var(--lamp-d)}
.qform__steps li.is-done span{background:var(--ok)}
@media (min-width:761px){.qform__steps{font-size:13px;gap:8px}.qform__steps li{justify-content:flex-start}}
.qform__bar{height:3px;background:var(--line-2);margin-bottom:28px;overflow:hidden}
.qform__bar i{display:block;height:100%;width:25%;background:var(--g-800);transition:width .5s var(--ease)}
.qstep{border:0;margin:0;padding:0;min-width:0}
.qstep.is-active{animation:stepIn .45s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.qstep__title{font-size:var(--h3-lg);font-weight:650;color:var(--ink);letter-spacing:-.02em;padding:0;margin-bottom:6px;text-wrap:balance}
.qstep__hint{font-size:15px;color:var(--muted);margin-bottom:18px}
.qlabel{font-size:14.5px;font-weight:600;color:var(--ink);margin:22px 0 10px}
.qstep__title + .qlabel{margin-top:16px}
.choices{display:grid;gap:10px}
.choices--cards{grid-template-columns:minmax(0,1fr)}
.choices--chips{display:flex;flex-wrap:wrap;gap:8px}
@media (min-width:761px){.choices--cards{grid-template-columns:1fr 1fr}}
.choice,.chip{position:relative;cursor:pointer}
.choice input,.chip input,.consent input{position:absolute;opacity:0;pointer-events:none}
.choice span{display:flex;align-items:center;gap:12px;min-height:58px;padding:12px 16px;border-radius:var(--r);border:1.5px solid var(--line);font-size:15.5px;font-weight:550;color:var(--ink);line-height:1.3;transition:border-color .2s,background .2s}
.choice .ic{width:24px;height:24px;color:var(--g-600);flex:none}
.choice:hover span{border-color:#A9BAB2}
.choice input:checked + span{border-color:var(--g-800);background:var(--g-100);box-shadow:inset 3px 0 0 var(--lamp-d)}
.choice input:focus-visible + span,.chip input:focus-visible + span{outline:3px solid var(--lamp);outline-offset:2px}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 15px;border-radius:var(--r);border:1.5px solid var(--line);font-size:15px;font-weight:500;color:var(--ink);transition:background .2s,border-color .2s,color .2s}
.chip:hover span{border-color:#A9BAB2}
.chip input:checked + span{background:var(--g-800);border-color:var(--g-800);color:#fff}
.fields{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:18px}
.fields--plz{grid-template-columns:120px minmax(0,1fr);margin-top:22px}
@media (max-width:380px){.fields--plz{grid-template-columns:minmax(0,1fr)}}
@media (min-width:761px){.fields{grid-template-columns:1fr 1fr}.fields--plz{grid-template-columns:150px 1fr}}
.field{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:600;color:var(--ink)}
.field--full{grid-column:1/-1}
.field em{font-style:normal;font-weight:400;color:var(--muted)}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:16px;font-weight:400;color:var(--ink);caret-color:var(--g-700);background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:13px 14px;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.field select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334413D' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/16px no-repeat;padding-right:40px}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--g-700);box-shadow:0 0 0 3px var(--g-100)}
.field input:-webkit-autofill{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 40px #fff inset}
.field [aria-invalid="true"]{border-color:var(--red)}
.field ::placeholder{color:#97A59F}
.plzhint,.foerderhint{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:11px 14px;border-radius:var(--r);font-size:14.5px;line-height:1.5}
.plzhint.is-ok{background:#E3F2E9;color:#0F6636}
.plzhint.is-far,.foerderhint{background:#FFF4D6;color:#6E4E00}
.foerderhint .ic{width:19px;height:19px;margin-top:1px}
.qerr{margin-top:14px;font-size:14.5px;color:var(--red);font-weight:550}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{position:relative;display:flex;gap:12px;align-items:flex-start;margin-top:18px;font-size:14px;line-height:1.5;color:var(--muted);cursor:pointer}
.consent span{display:block;padding-left:34px;text-indent:-34px}
.consent span::before{content:"";display:inline-block;width:22px;height:22px;border-radius:2px;border:1.5px solid #A9BAB2;background:#fff;margin-right:12px;vertical-align:-6px;transition:all .2s}
.consent input:checked + span::before{background:var(--g-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat;border-color:var(--g-800)}
.consent input:focus-visible + span::before{outline:3px solid var(--lamp);outline-offset:2px}
.consent.is-invalid span::before{border-color:var(--red)}
.qform__nav{display:flex;justify-content:space-between;gap:12px;margin-top:26px}
.qform__nav .btn{flex:1;padding:0 18px}
.qform__nav [data-next],.qform__nav [data-submit]{margin-left:auto}
@media (min-width:761px){.qform__nav .btn{flex:none;padding:0 24px}}
.qform__note{margin-top:16px;font-size:13px;color:#86958F;text-align:center}
.danke{position:relative;text-align:center;padding:30px 10px 20px;animation:stepIn .5s var(--ease)}
.danke__mark{display:block;width:auto;height:84px;margin:0 auto 18px}
.danke h3{font-size:var(--h3-lg);font-weight:650;margin-bottom:10px;color:var(--ink)}
.danke p{color:var(--muted);max-width:26em;margin:0 auto 22px}

/* Leistungen: vier klare Karten, am Handy als Wischleiste */
.svcx{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.svcx__list{display:grid;border-top:1px solid var(--line)}
.svcx__item{position:relative;display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;align-items:start;padding:22px 0;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--nav-h) + 24px)}
.svcx__thumb{width:88px;height:88px;object-fit:cover;border-radius:2px}
.svcx__item h3{font-size:clamp(21px,5.6vw,24px);letter-spacing:-.02em;line-height:1.2;margin-bottom:8px;transition:color .3s}
.svcx__item p{font-size:15.5px;line-height:1.6;color:var(--muted);margin-bottom:10px}
.svcx__media{display:none}
@media (min-width:1081px){
  .svcx{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:start}
  .svcx__item{grid-template-columns:minmax(0,1fr);padding:30px 0 30px 28px;cursor:default}
  .svcx__item::before{content:"";position:absolute;left:0;top:30px;bottom:30px;width:3px;background:var(--lamp);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
  .svcx__item.is-active::before{transform:scaleY(1)}
  .svcx__thumb{display:none}
  .svcx__item h3{font-size:clamp(26px,2.3vw,34px);color:#8A9892}
  .svcx__item.is-active h3{color:var(--ink)}
  .svcx__item p{max-width:34em}
  .svcx__media{display:block;position:sticky;top:calc(var(--nav-h) + 32px);aspect-ratio:4/5;max-height:calc(var(--vh1,100vh) - var(--nav-h) - 64px);width:100%;overflow:hidden;border-radius:3px;background:var(--mist);box-shadow:var(--shadow-lg)}
  .svcx__fig{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .6s var(--ease)}
  .svcx__fig.is-active{opacity:1}
  .svcx__fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.4s var(--ease)}
  .svcx__fig.is-active img{transform:scale(1)}
  .svcx__fig figcaption{position:absolute;left:14px;bottom:14px;right:14px;max-width:max-content;padding:9px 14px 9px 12px;background:#fff;border-left:3px solid var(--lamp);border-radius:2px;font-size:13.5px;line-height:1.35;color:var(--text)}
}
.more{margin-top:44px;padding:22px 22px;border-radius:var(--r);background:var(--mist)}
.more__title{font-size:16px;font-weight:650;color:var(--ink);margin-bottom:14px}
.more__list{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.more__list li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.45;color:var(--text)}
.more__list .ic{width:18px;height:18px;margin-top:2px;color:var(--g-600);stroke-width:2.4}
@media (min-width:761px){.more{margin-top:64px;padding:28px 32px}.more__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px}}
@media (min-width:1081px){.more__list{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Ergebnis */
.story{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.story__pics{position:relative;margin-right:10px}
.story__pics figure{position:relative}
.story__pics img{display:block;width:100%;object-fit:cover;border-radius:2px}
.story__big img{aspect-ratio:4/3;object-position:50% 88%}
.story__pics .story__small{position:absolute;right:-10px;bottom:-22px;width:36%;border:4px solid #fff;border-radius:3px;box-shadow:0 14px 34px rgba(16,22,20,.18)}
.story__small img{aspect-ratio:3/4;object-position:50% 40%;border-radius:0}
.story__pics figcaption{position:absolute;left:10px;bottom:10px;padding:4px 9px;border-radius:2px;background:rgba(16,22,20,.8);color:#fff;font-size:12.5px;font-weight:550}
.story__small figcaption{left:6px;bottom:6px;font-size:12px}
.story__copy .sub{margin-top:18px}
.story__result{margin:28px 0 30px;padding:22px 22px 0;background:#fff;border-radius:var(--r)}
.story__nums{display:flex;align-items:center;gap:20px}
.story__nums span{display:block;font-size:13.5px;font-weight:600;color:var(--muted)}
.story__nums b{display:block;font-size:clamp(46px,5vw,68px);font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.story__nums .is-alt{color:var(--red)}
.story__nums .is-neu{color:var(--ok)}
.story__nums > .ic{width:28px;height:28px;margin-top:18px;color:#A9BAB2;stroke-width:1.8}
.story__unit{margin-top:12px;font-size:14px;line-height:1.5;color:var(--muted)}
.story__time{display:grid;gap:8px;margin:18px -22px 0;padding:16px 22px 18px;border-top:1px solid var(--line-2);font-size:14.5px;color:var(--muted)}
.story__time li{display:flex;gap:14px}
.story__time b{flex:0 0 136px;color:var(--ink);font-weight:650}
@media (min-width:561px){
  .story__time{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .story__time li{display:block}
  .story__time b{display:block}
}
.story__label{margin-bottom:14px;font-size:15.5px;font-weight:650;color:var(--ink)}
.checks{display:grid;gap:10px}
.checks li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.5;color:var(--text)}
.checks li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:2px;background:var(--g-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C24C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.checks--2{grid-template-columns:minmax(0,1fr)}
@media (min-width:761px){.checks--2{grid-template-columns:1fr 1fr;gap:10px 22px}}
@media (min-width:1081px){
  .story{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px;align-items:stretch}
  .story__pics{display:flex;flex-direction:column;margin:0 0 28px}
  .story__big{flex:1 1 0;min-height:520px}
  .story__big img{position:absolute;inset:0;height:100%;aspect-ratio:auto;object-position:50% 60%}
  .story__pics .story__small{right:-28px;bottom:-28px;width:42%}
}

/* Referenzen */
.filters{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:24px;margin:-12px calc(var(--pad) * -1) 30px;padding-inline:var(--pad);scroll-padding-inline:var(--pad);border-bottom:1px solid var(--line);scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
@media (min-width:761px){.filters{justify-content:center;margin-inline:0;padding-inline:0}}
.filter{position:relative;flex:none;min-width:44px;min-height:48px;padding:12px 0 14px;background:none;border:0;color:var(--muted);font-size:15.5px;font-weight:550;transition:color .2s}
.filter::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--lamp-d);transform:scaleX(0);transition:transform .25s var(--ease)}
.filter:hover,.filter.is-active{color:var(--ink)}
.filter.is-active::after{transform:scaleX(1)}
@media (min-width:761px){.filters{flex-wrap:wrap;overflow:visible;gap:6px 30px;margin:-12px 0 36px;padding:0}}
.refs{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--pad) * -1);padding:2px var(--pad) 18px;scroll-padding-inline:var(--pad);scrollbar-width:none}
.refs::-webkit-scrollbar{display:none}
.ref{position:relative;flex:0 0 84%;scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:border-color .25s,box-shadow .3s}
.ref:hover{border-color:#A9BAB2;box-shadow:var(--shadow)}
@media (min-width:761px){.refs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;overflow:visible;margin:0;padding:0}.ref{flex:none}}
@media (min-width:1081px){.refs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ref__media{position:relative;aspect-ratio:4/3;background:var(--mist);overflow:hidden}
.ref__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.ref__ph,.refdlg__ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:14px;font-weight:600}
.ref__ph{position:absolute;inset:0;background:linear-gradient(160deg,var(--mist),#E4ECE8)}
.ref__ph .ic,.refdlg__ph .ic{width:42px;height:42px;stroke-width:1.4;opacity:.7}
.refdlg__ph{aspect-ratio:4/3;max-height:56dvh;color:#B9CCC4}
.refdlg__ph[hidden],.refdlg__gallery > img[hidden]{display:none}
.ref:hover .ref__media img{transform:scale(1.035)}
.ref__status{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:2px;background:rgba(255,255,255,.96);font-size:12.5px;font-weight:600;color:var(--ink)}
.ref__status i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.ref__status--im-bau i{background:var(--lamp-d)}
.ref__status--beratung i{background:var(--g-600)}
.ref__count{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:2px;background:rgba(16,22,20,.78);color:#fff;font-size:12.5px}
.ref__count .ic{width:14px;height:14px}
.ref__body{display:flex;flex-direction:column;flex:1;padding:20px 22px 20px}
.ref__meta{font-size:13.5px;font-weight:550;color:var(--muted);margin-bottom:6px}
.ref__body h3{font-size:var(--h3);line-height:1.25;margin-bottom:4px}
.ref__leistung{font-size:15px;color:var(--g-600);font-weight:550;margin-bottom:12px}
.ref__hl{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:var(--text);margin-bottom:14px}
.ref__hl .ic{width:16px;height:16px;color:var(--ok);margin-top:3px;stroke-width:2.4}
.ref__more{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:15px;font-weight:600;color:var(--g-700);background:none;border:0;padding:12px 0 2px;border-bottom:1.5px solid var(--lamp)}
.ref__more::after{content:"";position:absolute;inset:0}
.ref__more .ic{width:15px;height:15px;transition:transform .25s var(--ease)}
.ref:hover .ref__more .ic{transform:translateX(4px)}
.ref__more:focus-visible{outline:none}
.ref__more:focus-visible::after{outline:3px solid var(--lamp);outline-offset:-3px}
.refs-empty{text-align:center;color:var(--muted);padding:24px}

/* Referenz-Dialog */
.refdlg{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;padding:0;border:0;border-radius:0;background:#fff;color:var(--text);box-shadow:0 40px 120px rgba(0,0,0,.35);overflow:hidden}
.refdlg::backdrop{background:rgba(8,20,16,.66)}
.refdlg[open]{animation:dlgIn .35s var(--ease)}
@keyframes dlgIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.refdlg__inner{display:grid;grid-template-columns:minmax(0,1fr);max-height:100dvh;overflow-y:auto}
.refdlg__close{position:absolute;top:14px;right:14px;z-index:3;width:44px;height:44px;border-radius:var(--r);border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center}
.refdlg__gallery{position:relative;background:var(--g-950);display:flex;flex-direction:column;min-height:0}
.refdlg__gallery > img{width:100%;aspect-ratio:4/3;height:auto;max-height:56dvh;object-fit:contain;background:var(--g-950)}
.refdlg__nav{position:absolute;top:calc(50% - 40px);width:44px;height:44px;border-radius:var(--r);border:0;background:rgba(255,255,255,.94);color:var(--ink);display:grid;place-items:center}
.refdlg__nav--prev{left:14px}
.refdlg__nav--next{right:14px}
.refdlg__thumbs{display:flex;gap:8px;padding:12px;overflow-x:auto;background:var(--g-950)}
.refdlg__thumbs button{flex:none;width:64px;height:50px;border-radius:2px;overflow:hidden;border:2px solid transparent;padding:0;opacity:.55;background:none}
.refdlg__thumbs button.is-active{border-color:var(--lamp);opacity:1}
.refdlg__thumbs img{width:100%;height:100%;object-fit:cover}
.refdlg__body{padding:26px 20px 32px}
.refdlg__meta{font-size:13.5px;font-weight:550;color:var(--muted);margin-bottom:8px}
.refdlg__body h3{font-size:var(--h3-lg);font-weight:650;margin-bottom:6px;padding-right:44px}
.refdlg__leistung{color:var(--g-600);font-weight:550;margin-bottom:18px}
.refdlg__facts{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;margin:0 0 24px;font-size:15px}
.refdlg__facts dt{color:var(--muted)}
.refdlg__facts dd{margin:0;color:var(--ink);font-weight:500}
.refdlg__body h4{font-size:16px;font-weight:650;margin-bottom:12px}
.refdlg__body .checks{margin-bottom:26px}
.kw{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:14px 16px;border-radius:var(--r);background:var(--mist);margin-bottom:22px;font-size:13px;color:var(--muted)}
.kw b{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1}
.kw .kw__alt{color:var(--red)}
.kw .kw__neu{color:var(--ok)}
.kw .ic{width:20px;height:20px;color:#A9BAB2}
@media (min-width:761px){.refdlg__body{padding:36px 34px 32px}}
@media (min-width:1081px){
  .refdlg{width:min(1080px,calc(100% - 32px));height:fit-content;max-height:calc(var(--vh1,100dvh) - 32px);border-radius:4px}
  .refdlg__inner{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);max-height:calc(var(--vh1,100dvh) - 32px);overflow:hidden}
  .refdlg__gallery > img{flex:1;min-height:0;aspect-ratio:auto;height:100%;max-height:calc(var(--vh1,100dvh) - 130px)}
  .refdlg__body{overflow-y:auto}
}

/* Über mich */
.about__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
.about__photo{position:relative;width:100%;margin:0}
@media (min-width:600px) and (max-width:1080px){.about__photo{max-width:440px;margin-inline:auto}}
.about__photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 12%;border-radius:3px;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.about__photo figcaption{position:absolute;left:14px;bottom:14px;padding:11px 16px 11px 14px;background:#fff;border-left:3px solid var(--lamp);border-radius:2px}
.about__photo figcaption strong{display:block;font-size:15.5px;font-weight:650;color:var(--ink);line-height:1.3}
.about__photo figcaption span{font-size:13.5px;color:var(--muted)}
@media (max-width:599px){.about__photo{width:auto;margin-inline:calc((var(--pad) - 8px) * -1)}}
.about__copy .h2{margin-bottom:24px}
.about__quote{margin:0 0 22px;padding-left:20px;border-left:3px solid var(--lamp)}
.about__quote p{font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(23px,2.4vw,31px);line-height:1.3;color:#fff;text-wrap:balance}
.about__text{max-width:36em;margin-bottom:28px;color:#C4D5CD}
.creds{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;padding:20px 22px;background:#fff;border-radius:var(--r);color:var(--text)}
.creds__logo{width:260px;height:auto;flex:none}
.creds > div{flex:1 1 280px;min-width:0}
.about__cta{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.about__cta .btn{width:100%}
@media (min-width:761px){.about__cta{flex-direction:row;flex-wrap:wrap}.about__cta .btn{width:auto;min-width:240px}}
.creds__label{font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:8px}
.creds__list{display:flex;flex-wrap:wrap;gap:6px 18px}
.creds__list li{display:flex;align-items:flex-start;gap:7px;font-size:15px;line-height:1.4;color:var(--ink)}
.creds__list .ic{width:17px;height:17px;margin-top:2px;color:var(--ok);stroke-width:2.4;flex:none}
@media (min-width:1081px){
  .about__grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:80px}
  .about__photo{width:100%;max-width:400px}
}

/* Ablauf: Linie füllt sich beim Scrollen, die Schritte bekommen nacheinander einen Lichtring */
.steps{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:34px}
.steps::before,.steps::after{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:var(--line)}
.steps::after{background:linear-gradient(180deg,var(--lamp),var(--lamp-d));transform:scaleY(0);transform-origin:top;transition:transform 1.8s var(--ease) .15s}
.steps.is-lit::after{transform:scaleY(1)}
.steps li{position:relative;z-index:1;display:grid;grid-template-columns:48px minmax(0,1fr);gap:0 20px}
.steps__n{grid-row:span 2;position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--g-800);color:#fff;font-weight:650;font-size:18px;box-shadow:0 0 0 8px #fff;transition:box-shadow .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0) * .42s + .2s)}
.steps.is-lit .steps__n{box-shadow:0 0 0 6px #fff,0 0 0 8px var(--lamp),0 10px 30px rgba(245,194,76,.5);transform:scale(1.06)}
.steps h3{font-size:var(--h3);margin-bottom:8px}
.steps p{font-size:16px;color:var(--muted)}
@media (min-width:1081px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
  .steps::before,.steps::after{left:24px;right:calc(25% - 24px);top:23px;bottom:auto;width:auto;height:2px}
  .steps::after{transform:scaleX(0);transform-origin:left}
  .steps.is-lit::after{transform:scaleX(1)}
  .steps li{display:block}
  .steps__n{margin-bottom:26px}
}
@media (prefers-reduced-motion:reduce){.steps::after,.steps__n{transition:none}}

/* Baustellen-Clips von Herrn Baerwald unter dem Ablauf (Handyvideos 848 px breit, deshalb max. 980 px Reihe) */
.clips{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:980px;margin:48px auto 0}
.clip{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;border-radius:3px;background:var(--g-900);box-shadow:0 18px 40px rgba(16,22,20,.12)}
.clip video{display:block;width:100%;height:100%;object-fit:cover}
.clip figcaption{position:absolute;left:12px;bottom:12px;padding:8px 13px 8px 11px;background:#fff;border-left:3px solid var(--lamp);border-radius:2px;font-size:14px;font-weight:600;line-height:1.3;color:var(--ink)}
@media (min-width:761px){.clips{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:56px}}

/* CTA-Band: Foto mit grüner Vignette, läuft per Parallax langsamer mit */
.cta{position:relative;isolation:isolate;padding:calc(var(--sec-pad) + 40px) 0;background:var(--g-900);color:#C4D5CD;overflow:hidden;text-align:center}
.cta__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.cta__bg img{position:absolute;left:0;top:-22%;width:100%;height:144%;object-fit:cover;object-position:50% 45%;filter:saturate(.75) contrast(1.05);will-change:transform}
.cta__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 75% at 50% 50%,rgba(23,74,58,.74) 0%,rgba(23,74,58,.84) 55%,rgba(18,57,45,.95) 100%)}
.cta .h2{text-shadow:0 2px 30px rgba(0,0,0,.35)}
.cta__inner{position:relative;max-width:900px}
.cta .eyebrow{font-size:17px}
.cta .h2{color:#fff}
.cta .sub{color:#D5E2DC;font-size:clamp(18px,1.55vw,21px);line-height:1.6;max-width:40em;margin:20px auto 36px}
.cta__actions{display:flex;flex-direction:column;gap:12px}
.cta__actions .btn{width:100%}
@media (min-width:761px){.cta__actions{flex-direction:row;justify-content:center}.cta__actions .btn{width:auto;min-width:250px}}

/* Bewertungen */
.reviews{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.rsum{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;max-width:520px;width:100%}
.rsum__brand{display:flex;align-items:center;gap:10px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line-2);font-weight:600;color:var(--ink)}
.rsum__brand svg{width:24px;height:24px}
.rsum__score{display:flex;align-items:center;gap:14px}
.rsum__score b{font-size:58px;font-weight:700;letter-spacing:-.04em;color:var(--ink);line-height:1}
.rsum__count{font-size:14.5px;color:var(--muted);margin:10px 0 20px}
.rgrid{columns:1;column-gap:20px}
.rcard{break-inside:avoid;margin:0 0 20px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 22px}
.rcard figcaption{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.rcard__av{width:42px;height:42px;border-radius:50%;flex:none;object-fit:cover}
.rcard figcaption strong{display:block;color:var(--ink);font-size:16px;font-weight:600;line-height:1.25}
.rcard figcaption small{font-size:13px;color:var(--muted)}
.rcard__g{width:18px;height:18px;margin-left:auto;flex:none}
.rcard .stars{margin-bottom:10px}
.rcard blockquote{margin:0;font-size:15.5px;line-height:1.62;color:var(--text)}
.rcard blockquote.is-clamped p{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.rcard .link{margin-top:6px}
.rcard__note{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.rcard__toggle{min-height:44px;background:none;border:0;padding:0;color:var(--g-700);font-weight:600;font-size:14.5px}
@media (min-width:761px){.rgrid{columns:2}.rcard{padding:24px 26px}}
@media (min-width:1081px){.reviews{grid-template-columns:340px minmax(0,1fr);gap:28px}.rsum{position:sticky;top:calc(var(--nav-h) + 24px)}}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;align-items:start}
.faq__head .sub{margin:18px 0 26px}
.faq__head .h2 br{display:none}
@media (min-width:1081px){.faq__head .h2 br{display:inline}}
.faq__list{border-top:1px solid var(--line)}
.faq__list details{border-bottom:1px solid var(--line)}
.faq__list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 0;font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.35}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary::after{content:"";flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F3D30' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/15px no-repeat;transition:transform .5s var(--ease),background-color .3s,border-color .3s}
.faq__list details.is-open summary::after{transform:rotate(45deg);background-color:var(--lamp);border-color:var(--lamp)}
.faq__list summary:hover{color:var(--g-700)}
.faq__a{padding:0 0 22px}
.faq__a p{font-size:16px;color:var(--text)}
@media (max-width:380px){.faq__list summary{font-size:15.5px;gap:12px;overflow-wrap:anywhere}}
@media (min-width:761px){.faq__list summary{font-size:18px;padding:24px 0;gap:24px}.faq__a{padding:0 56px 26px 0}.faq__a p{font-size:16.5px}}
@media (min-width:1081px){.faq{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px}.faq__head{position:sticky;top:calc(var(--nav-h) + 32px)}}

/* Kontakt */
.kontakt{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:start}
.kontakt__copy .sub{margin:18px 0 28px}
.kontakt__list{display:grid;gap:18px;margin-bottom:28px}
.kontakt__list li{display:flex;gap:16px;align-items:center}
.kontakt__list .ic{width:44px;height:44px;padding:11px;border-radius:50%;background:var(--g-800);color:var(--lamp);stroke-width:1.6}
.kontakt__list small{display:block;font-size:13px;font-weight:600;color:var(--muted)}
.kontakt__list a{display:inline-block;padding-block:10px;margin-block:-10px;color:var(--ink);font-weight:600;text-decoration:none;word-break:break-word}
.kontakt__list span{color:var(--ink);font-weight:500}
.cform__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.cform__title{font-size:var(--h3-lg);font-weight:650}
.cform .qstep__hint{margin:0}
.cform .fields{margin-top:10px}
.cform .btn{margin-top:18px}
.cform textarea{min-height:88px}
@media (min-width:761px){.formcard--flat{padding:30px 32px 28px}}
@media (min-width:1081px){.kontakt{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center}}

/* Footer */
.footer{background:var(--g-950);color:#9DB3AA;padding:60px 0 0}
.footer__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;padding-bottom:48px}
.footer__brand p{margin-top:20px;font-size:15px;line-height:1.65;max-width:26em}
.footer__title{color:#fff;font-size:14.5px;font-weight:650;margin-bottom:12px}
.footer ul{display:grid;font-size:15px}
.footer li{padding-block:2px}
.footer li a{display:inline-flex;align-items:center;min-height:44px}
.footer a{color:#CFDDD6;text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}
.footer__bottom{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-block:24px;font-size:14px}
.footer__bottom::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);height:1px;background:#17362C}
.footer__made{display:inline-flex;align-items:center;gap:9px;min-height:44px;color:#9DB3AA;font-size:13px}
.footer__made img{width:84px;height:auto}
@media (min-width:761px){.footer{padding-top:80px}.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}.footer__bottom{flex-direction:row;justify-content:space-between;align-items:center}}
@media (min-width:1081px){.footer__grid{grid-template-columns:1.4fr minmax(250px,1fr) 1fr 1fr;gap:48px;padding-bottom:56px}}

/* Anrufleiste Handy */

/* Danke-Popup */
.thanks{position:fixed;width:min(420px,calc(100% - 32px));max-height:calc(var(--vh1,100dvh) - 32px);padding:30px 24px 22px;border:0;border-radius:4px;text-align:center;background:#fff;color:var(--text);box-shadow:0 2px 6px rgba(16,22,20,.08),0 30px 80px rgba(16,22,20,.28);overflow:auto}
.thanks::backdrop{background:transparent}
.thanks[open]{animation:thanksIn .55s var(--ease)}
@keyframes thanksIn{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}}
.thanks__confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.thanks__x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--muted);display:grid;place-items:center}
.thanks__x:hover{background:var(--mist);color:var(--ink)}
.thanks__logo{position:relative;width:64px;margin:0 auto 14px}
.thanks__logo::before{content:"";position:absolute;left:50%;top:50%;width:140px;height:140px;border-radius:50%;background:radial-gradient(closest-side,rgba(245,194,76,.38),transparent);transform:translate(-50%,-50%) scale(.3);opacity:0}
.thanks__logo img{position:relative;display:block;width:100%;height:auto;opacity:0;transform:scale(.6)}
.thanks[open] .thanks__logo img{animation:logoPop .8s cubic-bezier(.34,1.56,.64,1) .12s forwards}
.thanks[open] .thanks__logo::before{animation:halo 1.1s var(--ease) .45s forwards}
@keyframes logoPop{to{opacity:1;transform:none}}
@keyframes halo{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.thanks__kicker{font-size:14px;font-weight:650;color:var(--ok);margin-bottom:4px}
.thanks h3{font-size:clamp(24px,6vw,28px);font-weight:680;letter-spacing:-.02em;margin-bottom:8px;outline:none}
.thanks__lead{color:var(--muted);max-width:22em;margin:0 auto 22px;font-size:16px;line-height:1.5}
.thanks__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.thanks__actions .btn{width:100%;min-width:0;padding-inline:12px}
.thanks__preview{margin-top:12px;font-size:12.5px;line-height:1.4;color:var(--muted)}
@media (min-width:761px){.thanks{padding:44px 40px 32px}}

/* Reveal */
html.js .rv{opacity:0;transform:translate3d(0,34px,0);transition:opacity 1.2s cubic-bezier(.22,.61,.36,1),transform 1.4s cubic-bezier(.16,1,.3,1)}
html.js .rv.is-in{opacity:1;transform:none}
@media (max-width:760px){html.js .rv{transform:translate3d(0,18px,0);transition-duration:1.1s,1.2s}}
@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none;transition:none}
  .thanks__logo img{opacity:1;transform:none;animation:none}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* Rechtliche Seiten und 404 */
.legal-main{padding:calc(var(--nav-h) + 48px) 0 88px;background:#fff}
.legal-shell{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.legal-shell > *{max-width:780px}
.legal-shell h1,.notfound h1{font-size:clamp(min(32px,9vw),7.2vw,48px);font-weight:680;letter-spacing:-.03em;line-height:1.1;margin:8px 0 30px}
.legal-shell h2{font-size:21px;font-weight:650;margin:34px 0 10px}
.legal-shell p,.legal-shell li{font-size:16px;margin-bottom:10px}
.legal-shell ul{list-style:disc;padding-left:22px;margin-bottom:12px}
.legal-shell dl{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;margin:0 0 12px}
.legal-shell dt{color:var(--muted)}
.legal-shell dd{margin:0 0 10px;color:var(--ink)}
.legal-shell dd a,.legal-shell p a{display:inline-block;padding-block:11px;margin-block:-11px}
@media (min-width:761px){.legal-shell dl{grid-template-columns:150px 1fr;gap:8px 18px}.legal-shell dd{margin:0}}
.legal-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;text-decoration:none;margin-bottom:10px}
.notfound{min-height:calc(var(--vh1,100vh) * .7);display:flex;align-items:center;padding:calc(var(--nav-h) + 40px) 0 80px}
.notfound .wrap > *{max-width:640px}
.notfound h1{margin:10px 0 18px}
.notfound p{color:var(--muted);margin-bottom:30px}
.notfound .hero__actions .btn{width:auto}
.more{scroll-margin-top:calc(var(--nav-h) + 24px)}
.faq__stand{margin:-6px 0 22px;font-size:14px;color:var(--muted)}

/* Große Monitore, Teil 2 (muss am Ende stehen, sonst gewinnen die normalen Regeln weiter oben) */
@media (min-width:1800px) and (min-height:900px){body{font-size:18px}.lead{font-size:21px}.about__photo{max-width:460px}.clips{max-width:1120px}}
@media (min-width:2300px) and (min-height:1150px){body{font-size:19px}.lead{font-size:22px}.about__photo{max-width:520px}.clips{max-width:1280px}}

/* Hohe Bildschirme (Fenster über 1000 px hoch): Sections nicht auf Bildschirmhöhe strecken, sonst steht normal großer
   Inhalt mit 500 bis 800 px Luft darüber und darunter (Maxim 01.10.). Hero bleibt bildschirmhoch. */
@media (min-height:1001px){main > .sec,main > .cta,#vorteile{min-height:0}}
/* Zusätzliche Inhalte aus der Website-Verwaltung */
.cms-extra:nth-child(even){background:var(--mist,#F2F5F3)}
.cms-extra__grid{display:flex;gap:48px;align-items:center}.cms-extra__grid>img{width:40%;height:auto;aspect-ratio:4/3;object-fit:cover}.cms-extra__grid>div{flex:1;min-width:0}.cms-extra__grid p{margin-top:24px;white-space:pre-line;overflow-wrap:anywhere}.cms-extra__grid h2{overflow-wrap:anywhere}
@media(max-width:700px){.cms-extra__grid{flex-direction:column;gap:24px}.cms-extra__grid>img{width:100%}}
/* Hero-Video nutzt genau die bestehende rechte Bildfläche. */
.hero__photo .hero__video{opacity:0;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:42% 40%;z-index:1}.hero__photo::after{z-index:2;pointer-events:none}.hero__photo picture img{animation:none}.hero__video-toggle{position:absolute;right:24px;bottom:24px;z-index:3;min-height:44px;padding:10px 16px;border:1px solid rgba(255,255,255,.5);border-radius:3px;background:rgba(23,74,58,.9);color:#fff;font:inherit;font-size:13px;cursor:pointer}.hero__video-toggle:hover{background:var(--g-900)}.hero__video-toggle:focus-visible{outline:3px solid var(--lamp);outline-offset:3px}
@media(min-width:1081px){.hero__photo .hero__video{object-position:35% 50%}}
@media(max-width:1080px){.hero__video-toggle{top:calc(var(--nav-h) + 12px);bottom:auto;right:16px}}