/* ID Homeservice – Stylesheet
   Markenfarben aus der Fahrzeugbeschriftung: Dunkelgrün #005233, Schwung #BEF117 bis #7DC203, Blattgrün #5C933E */

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}

@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/poppins-400.woff) format("woff")}
@font-face{font-family:"Poppins";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/poppins-500.woff) format("woff")}
@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/poppins-700.woff) format("woff")}

:root{
  color-scheme:light;
  --bg:#F5F8F2;
  --surface:#FFFFFF;
  --ink:#0D2A1C;
  --muted:#4A5C52;
  --line:#D5DFD2;
  --fir:#005233;
  --fir-ink:#F2F7F1;
  --fir-soft:#B9D6C7;
  --leaf:#5C933E;
  --link:#005233;
  --brand:#005233;
  --signal:#A5E02E;
  --signal-hover:#BEF117;
  --signal-ink:#06301F;
  --focus:#005233;
  --error:#A3261B;
  --ok:#1C6B3A;
  --font:"Poppins","Avenir Next","Segoe UI","Helvetica Neue",Ubuntu,Roboto,Arial,sans-serif;
}
/* Dunkles Farbschema: folgt der Einstellung des Geräts */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0A1610;
    --surface:#11231A;
    --ink:#E9F1EA;
    --muted:#A8B8AD;
    --line:#27402F;
    --leaf:#A5E02E;
    --link:#B9EC5F;
    --brand:#E9F1EA;
    --focus:#A5E02E;
    --error:#FF9A8E;
    --ok:#A5E02E;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0A1610;
  --surface:#11231A;
  --ink:#E9F1EA;
  --muted:#A8B8AD;
  --line:#27402F;
  --leaf:#A5E02E;
  --link:#B9EC5F;
  --brand:#E9F1EA;
  --focus:#A5E02E;
  --error:#FF9A8E;
  --ok:#A5E02E;
}
.band,.season-bar,.footer,.starter,.page-head,.cta-band{--focus:#A5E02E}

/* Weicher Übergang beim Wechsel zwischen den Seiten (Browser ohne Unterstützung ignorieren das) */
@view-transition{navigation:auto}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(84px + env(safe-area-inset-top,0px));
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:1.0625rem;
  line-height:1.65;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:var(--link)}
h1,h2,h3,p,ul,ol,dl,dd,address{margin:0}
/* Lange deutsche Wörter in Überschriften: Schriftgröße passt sich auf schmalen Handys an, Trennstellen sind im Text vorgegeben */
h1,h2,h3{overflow-wrap:break-word;text-wrap:balance}
p,li{text-wrap:pretty}
ul,ol{padding:0;list-style:none}
address{font-style:normal}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-5rem;z-index:100;padding:.7rem 1rem;border-radius:10px;background:var(--fir);color:#fff;font-weight:700;text-decoration:none;transition:top .15s ease}
.skip:focus{top:.6rem;outline-color:#A5E02E}

.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}
.section{padding-block:clamp(4.25rem,9vw,8rem)}
.section.tight-top{padding-top:0}
.h2{
  font-size:min(7.2vw,clamp(1.9rem,5vw,3.1rem));
  line-height:1.05;
  letter-spacing:-0.025em;
  font-weight:700;
  max-width:20ch;
  text-wrap:balance;
}
.lead{font-size:clamp(1.15rem,2.2vw,1.35rem);color:var(--muted);max-width:60ch;margin-top:1rem}
.fewo-grid > *,.contact-grid > *,.services > *,.about > *,.duo > *,.promises > *,.fw-row > *{min-width:0}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:.8rem 1.5rem;
  border-radius:999px;border:2px solid transparent;
  font:inherit;font-weight:700;line-height:1.2;text-decoration:none;text-align:center;
  cursor:pointer;
  transition:transform .15s ease, background-color .15s ease;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--signal);color:var(--signal-ink)}
.btn-primary:hover{background:var(--signal-hover)}
.btn-ghost{background:transparent;border-color:currentColor;color:inherit}
.btn-ghost:hover{background:rgba(127,127,127,.12)}
.btn[disabled]{opacity:.6;cursor:progress}

/* Aktuelles oben: mehrere Meldungen, die sich abwechseln. Welche gezeigt werden, entscheidet das Datum (siehe Kopf der Seite) */
.promo{display:none;background:linear-gradient(90deg,#BEF117,#A5E02E 45%,#90CF09);color:var(--signal-ink);font-weight:500;font-size:1rem;line-height:1.35;overflow:hidden}
.js .promo{display:block}
.promo .wrap{display:grid;padding-block:.8rem}
.promo-item{
  grid-area:1/1;display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:center;justify-content:space-between;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .45s ease,transform .45s ease,visibility 0s linear .45s;
}
.promo-item a{background:var(--signal-ink);color:#fff;font-weight:700;white-space:nowrap;text-decoration:none;padding:.4rem 1rem;border-radius:999px;transition:transform .15s ease}
.promo-item a:hover{transform:scale(1.04)}
.promo-item strong{font-weight:700}
.promo .tag{
  display:inline-block;margin-right:.6rem;padding:.12rem .6rem;border-radius:6px 6px 6px 2px;
  background:var(--signal-ink);color:#BEF117;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:.08em;
  animation:tagpop 2.6s ease-in-out infinite;
}
@keyframes tagpop{0%,100%{transform:none}8%{transform:scale(1.12) rotate(-3deg)}16%{transform:none}}
.promo-item[data-k="winter"],.promo-item[data-k="hecke"]{display:none}
.p-winter .promo-item[data-k="winter"],.p-hecke .promo-item[data-k="hecke"]{display:flex}
.promo-item.on,
.p-hecke .promo:not(.rot) [data-k="hecke"],
.p-winter:not(.p-hecke) .promo:not(.rot) [data-k="winter"],
html:not(.p-winter):not(.p-hecke) .promo:not(.rot) [data-k="termin"]{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.promo-item.out{transform:translateY(-10px)}
/* Ohne Bewegung (Einstellung des Geräts): alle Meldungen untereinander */
.promo.all .wrap{gap:.45rem}
.promo.all .promo-item{grid-area:auto;opacity:1;visibility:visible;transform:none}

/* Kopfzeile */
.header{
  position:sticky;top:0;z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top,0px);
}
@supports (backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px)){
  .header{background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--brand);font-weight:700;font-size:1.2rem;letter-spacing:-0.02em;white-space:nowrap}
.brand-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#fff;border:1px solid var(--line);flex:0 0 auto}
.brand-mark img{width:34px;height:auto;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text small{font-size:.8rem;font-weight:500;letter-spacing:0;color:var(--muted);margin-top:.15rem}
.nav{display:flex;align-items:center;gap:1.35rem}
.nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:1rem;padding:.4rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--leaf)}
.nav .nav-phone{
  border:0;background:var(--fir);color:var(--fir-ink);padding:.6rem 1.1rem;border-radius:999px;white-space:nowrap;
}
.nav .nav-phone:hover{border:0;filter:brightness(1.12)}
.menu-btn{
  display:none;width:48px;height:48px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);cursor:pointer;padding:0;place-items:center;
}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{
  display:block;width:22px;height:2.5px;border-radius:2px;background:currentColor;position:relative;transition:transform .25s ease, opacity .2s ease;
}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}
.menu-btn span::before{top:-7px}
.menu-btn span::after{top:7px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1040px){
  .js .menu-btn{display:grid}
  .js .nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:.5rem 1.25rem 1.25rem;
    display:none;
  }
  .js .nav.open{display:flex;animation:drop .25s ease both}
  .js .nav a{padding:.95rem 0;border-bottom:1px solid var(--line);font-size:1.15rem}
  .js .nav .nav-phone{margin-top:1rem;text-align:center;padding:.95rem 1rem}
  /* Ohne JavaScript bleibt die Navigation als umbrechende Zeile sichtbar */
  html:not(.js) .header .wrap{flex-wrap:wrap;padding-block:.6rem}
  html:not(.js) .nav{flex-wrap:wrap;gap:.25rem 1.1rem}
}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Hero: Fahrzeug fährt vor, darunter der Schwung aus der Beschriftung */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#FFFFFF 0%,#F5FAF1 55%,#EAF3E3 100%);color:#0D2A1C}
.hero-skyline{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(280px,78vw,400px);color:#BCD7AB;z-index:0;pointer-events:none}
@media (min-width:1040px){.hero-skyline{height:clamp(390px,36vw,480px)}}
.hero-grid{display:grid;gap:1.5rem 2.5rem;padding-top:clamp(1.25rem,3vw,2.25rem);position:relative;z-index:2}
.hero-grid > *{min-width:0}
.hero-grid{grid-template-areas:"text" "logo" "van"}
.hero-text{grid-area:text}
.hero-logo{grid-area:logo}
.van-viewer{grid-area:van}
/* Runde Plakette zur laufenden Aktion, sitzt oben rechts neben dem Logo */
.hero-badge{
  grid-area:logo;justify-self:end;align-self:start;z-index:3;
  display:none;place-content:center;justify-items:center;text-align:center;
  width:clamp(92px,25vw,116px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#D3FA4A,#A5E02E 60%,#8ACB0F);color:#06301F;text-decoration:none;
  box-shadow:0 0 0 4px #fff,0 0 0 7px #005233,0 14px 26px rgba(0,50,30,.3);
  transform:rotate(9deg);line-height:1.05;
  animation:badgein .7s cubic-bezier(.2,1.2,.3,1.2) 1.2s both,badgewobble 5s ease-in-out 2.2s infinite;
}
.p-hecke .hero-badge.hecke{display:grid}
@media (max-width:360px){.hero-logo{justify-self:start;margin-left:.25rem}}
.hero-badge strong{font-size:clamp(1.9rem,8vw,2.4rem);font-weight:700;letter-spacing:-0.04em;line-height:.95}
.hero-badge.hecke strong{font-size:clamp(1.05rem,4.6vw,1.3rem);letter-spacing:-0.02em;line-height:1}
.hero-badge span{font-weight:700;font-size:clamp(.68rem,2.9vw,.8rem);line-height:1.05}
.hero-badge small{font-weight:500;font-size:clamp(.68rem,2.5vw,.74rem);line-height:1.2}
.hero-badge.hecke small:last-child{max-width:9ch}
.hero-badge:hover{animation-play-state:paused;transform:rotate(0) scale(1.06)}
@keyframes badgein{from{opacity:0;transform:rotate(-30deg) scale(.3)}to{opacity:1;transform:rotate(9deg) scale(1)}}
@keyframes badgewobble{0%,100%{transform:rotate(9deg) scale(1)}6%{transform:rotate(3deg) scale(1.09)}12%{transform:rotate(12deg) scale(1.04)}18%{transform:rotate(9deg) scale(1)}}
@media (min-width:1040px){
  .hero-badge{width:148px;margin-right:clamp(0px,3vw,48px);margin-top:.5rem}
  .hero-badge strong{font-size:2.8rem}
  .hero-badge.hecke strong{font-size:1.5rem}
  .hero-badge span{font-size:.9rem}
  .hero-badge small{font-size:.76rem}
}
@media (min-width:1040px){
  .hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"text logo" "text van";align-items:end;row-gap:1rem}
}
/* Firmenlogo groß über dem Fahrzeug */
.hero-logo{display:flex;flex-direction:column;align-items:center;justify-self:center;text-align:center;gap:.5rem;color:#005233;margin-top:.5rem}
.hero-logo img{display:block;width:clamp(130px,36vw,180px);height:auto}
.hero-logo p{font-weight:700;font-size:clamp(1.9rem,8vw,2.4rem);line-height:1.05;letter-spacing:-0.03em}
.hero-logo span{display:block;margin-top:.3rem;font-size:.5em;font-weight:500;letter-spacing:0;color:#35604A}
@media (min-width:1040px){
  .hero-logo{margin-top:0}
  .hero-logo img{width:clamp(170px,15vw,220px)}
  .hero-logo p{font-size:clamp(2rem,2.9vw,2.6rem)}
}
.js .hero-logo{opacity:0;transform:scale(.82);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.9,.3,1.25)}
.js .hero-logo.in{opacity:1;transform:none}
.hero-text{padding-bottom:clamp(0rem,3vw,3.5rem)}
.h1{font-weight:700;color:#005233}
.h1-claim{
  display:block;
  font-size:clamp(2.05rem,7.4vw,4.5rem);
  line-height:1.04;letter-spacing:-0.035em;
  text-wrap:balance;
}
@media (min-width:1040px){.h1-claim{font-size:clamp(2.85rem,4vw,3.5rem)}}
.h1-claim span{display:block;animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.h1-claim span:nth-child(2){animation-delay:.1s}
.h1-claim span:nth-child(3){animation-delay:.2s}
.hero-place{
  display:inline-block;margin-top:1.1rem;padding:.5em .75em;border-radius:12px 12px 12px 3px;
  background:#005233;color:#fff;font-weight:700;font-size:clamp(1rem,2.6vw,1.4rem);line-height:1.2;letter-spacing:-0.01em;
  box-shadow:inset 0 -4px 0 #A5E02E;
  animation:rise .7s cubic-bezier(.2,.7,.2,1) .3s both;
}
@media (min-width:1040px){.hero-place{font-size:clamp(1rem,1.5vw,1.15rem)}}
@keyframes rise{from{opacity:0;transform:translateY(.45em)}to{opacity:1;transform:none}}
.hero-sub{
  font-size:clamp(1.1rem,2.2vw,1.3rem);line-height:1.5;max-width:34em;margin-top:1.25rem;
  animation:rise .7s cubic-bezier(.2,.7,.2,1) .38s both;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem;animation:rise .7s cubic-bezier(.2,.7,.2,1) .46s both}
.hero .btn-ghost{color:#005233}
.van-viewer{position:relative;width:100%;max-width:680px;margin-inline:auto;pointer-events:none}
@media (max-width:700px){.van-viewer{width:calc(100% + 1.6rem);margin-inline:-.8rem}}
@media (min-width:1040px){.van-viewer{max-width:none}}
/* Das Fahrzeug fährt beim Laden vor. Mit Skript (Klasse live) fährt es beim Herunterscrollen nach links weg
   und kommt wieder angefahren, wenn man nach oben zurückkehrt. */
.van-stage{
  animation:arrive 1.7s cubic-bezier(.16,.84,.3,1) .15s both;
  filter:drop-shadow(0 12px 9px rgba(0,50,30,.25));
}
.van-stage img{display:block;width:100%;height:auto}
.van-drive.live .van-stage{animation:none;opacity:0}
.van-drive.live.is-in .van-stage{animation:arrive 1.7s cubic-bezier(.16,.84,.3,1) .15s both;opacity:1}
.van-drive.live.is-out .van-stage{animation:leave 1.15s cubic-bezier(.6,0,.9,.45) both;opacity:1}
@keyframes arrive{0%{transform:translateX(70vw);opacity:0}25%{opacity:1}82%{transform:translateX(-8px)}100%{transform:translateX(0)}}
@keyframes leave{0%{transform:translateX(0)}12%{transform:translateX(6px)}100%{transform:translateX(-125vw)}}
.hero-wave{display:block;width:100%;height:clamp(60px,11vw,150px);margin-top:clamp(-40px,-3.6vw,-16px);margin-bottom:-1px;position:relative;z-index:1}

/* Versprechen */
.band{position:relative;background:var(--fir);color:var(--fir-ink)}
.band.after-hero{padding-top:clamp(2.25rem,5vw,4rem);padding-bottom:clamp(5rem,10vw,8.5rem)}
.p-winter .band.after-hero,.p-hecke .band.after-hero{padding-top:clamp(2.5rem,6vw,4.5rem)}
.promises{display:grid;gap:2.5rem 3rem}
@media (min-width:860px){.promises{grid-template-columns:repeat(3,1fr)}}
.promise h3{font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.08;letter-spacing:-0.025em;font-weight:700}
.promise p{margin-top:.7rem;color:var(--fir-soft);max-width:34ch}
.promise::before{content:"";display:block;width:44px;height:5px;border-radius:3px;background:var(--signal);margin-bottom:1.1rem}

/* Gerade aktuell: direkt unter dem Kopf auf dunklem Grün. Karten erscheinen nach Datum (Klassen p-winter und p-hecke setzt der Kopf der Seite) */
.now{display:none;background:var(--fir);color:var(--fir-ink);padding-block:clamp(1.25rem,3vw,2.5rem) clamp(.5rem,2vw,1.5rem);--focus:#A5E02E}
.p-winter .now,.p-hecke .now{display:block}
.now .h2{display:flex;align-items:center;gap:.6em;max-width:none}
.now .live{flex:0 0 auto;width:.42em;height:.42em;border-radius:50%;background:var(--signal);animation:live 1.6s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(165,224,46,.75)}100%{box-shadow:0 0 0 .5em rgba(165,224,46,0)}}
.now-grid{display:grid;gap:1.25rem;margin-top:clamp(1.25rem,3vw,2rem)}
.now-grid > *{min-width:0}
@media (min-width:860px){.p-winter.p-hecke .now-grid{grid-template-columns:1fr 1fr}}
.now-card{
  display:none;position:relative;overflow:hidden;flex-direction:column;
  border-radius:22px 22px 22px 6px;background:var(--surface);color:var(--ink);
  box-shadow:0 0 0 2px rgba(165,224,46,.55),0 22px 44px rgba(0,0,0,.28);
  transition:transform .25s ease,box-shadow .25s ease;
}
.now-card:hover{transform:translateY(-4px);box-shadow:0 0 0 3px var(--signal),0 28px 54px rgba(0,0,0,.34)}
.p-winter .now-card.winter,.p-hecke .now-card.hecke{display:flex}
html:not(.p-winter) .now-card.hecke,html:not(.p-hecke) .now-card.winter{max-width:760px}
.now-body{position:relative;z-index:1;padding:clamp(1.5rem,3.5vw,2.5rem);display:flex;flex-direction:column;align-items:flex-start;flex:1}
.now-card h3{font-size:clamp(1.6rem,3.6vw,2.3rem);line-height:1.08;letter-spacing:-0.025em;font-weight:700;text-wrap:balance}
.now-card p{margin-top:.8rem;max-width:46ch}
.now-cta{margin-top:auto;padding-top:1.5rem}
.now-cta .btn{font-size:1.1rem;min-height:56px;padding-inline:1.75rem}
.kicker{font-weight:700;font-size:.92rem;letter-spacing:.06em;text-transform:uppercase;color:var(--leaf);margin:0 0 .5rem!important}
/* Winterdienst in den Farben des Winterdienst-Flyers: dunkles Blau, Weiß, Signalgrün */
.now-card.winter{background:linear-gradient(165deg,#0E2E45 0%,#14405F 55%,#1C5A80 100%);color:#fff}
.now-card.winter .kicker{color:#BFE3F5}
.now-card.winter p{color:#CFE3EF}
.now-card.winter .now-claim{margin-top:.5rem;color:var(--signal);font-weight:700;font-size:clamp(1.05rem,2.4vw,1.3rem);letter-spacing:.02em;text-transform:uppercase}
.now-big{display:inline-block;font-size:clamp(4.6rem,15vw,7.5rem);line-height:.88;letter-spacing:-0.05em;color:var(--signal);font-variant-numeric:tabular-nums;margin-bottom:.12em;text-shadow:0 6px 0 rgba(0,0,0,.18)}
.now-card.winter .now-left{
  display:inline-block;margin-top:1rem;padding:.35rem .9rem;border-radius:999px;
  background:var(--signal);color:var(--signal-ink);font-weight:700;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(165,224,46,.6)}60%{box-shadow:0 0 0 12px rgba(165,224,46,0)}}
.now-big{transform-origin:0 70%;animation:bigpop 3.2s ease-in-out infinite}
@keyframes bigpop{0%,100%{transform:none}6%{transform:scale(1.09) rotate(-3deg)}12%{transform:scale(.98) rotate(1deg)}18%{transform:none}}
.now-card.winter::after{
  content:"";position:absolute;top:-40%;bottom:-40%;left:-30%;width:22%;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);transform:rotate(14deg);
  animation:shine 5s ease-in-out infinite;
}
@keyframes shine{0%,55%{left:-30%}85%,100%{left:120%}}
/* Robby mit Bommelmütze läuft von rechts in die Karte und hüpft dann auf der Stelle. Auf breiteren Karten steht die Figur mit Schneeschaufel daneben. */
.now-crew{position:absolute;right:clamp(.5rem,2.5vw,1.5rem);bottom:clamp(.75rem,2vw,1.25rem);z-index:2;pointer-events:none;display:flex;align-items:flex-end;gap:0}
.now-crew img{display:block;height:auto;filter:drop-shadow(0 6px 5px rgba(0,0,0,.35))}
.now-crew .nc-dog{width:clamp(76px,15vw,100px)}
.now-crew .nc-man{display:none;width:clamp(120px,10.5vw,150px);margin-left:-12px}
@media (min-width:1100px){.now-crew .nc-man{display:block}}
.js .now-card.winter .now-crew{transform:translateX(170%)}
.js .now-card.winter.in .now-crew{transform:none;transition:transform 1.5s cubic-bezier(.3,.8,.3,1) .5s}
.js .now-card.winter.in .now-crew .hop{animation:run .3s ease-in-out .5s 5 alternate,doghop2 3.2s ease-in-out 2.4s infinite}
@keyframes run{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-14px) rotate(4deg)}}
@keyframes doghop2{0%,70%,100%{transform:none}78%{transform:translateY(-12px) rotate(-4deg)}86%{transform:none}92%{transform:translateY(-6px) rotate(3deg)}}
@media (max-width:520px){.now-card.winter .now-cta{padding-right:96px}}
@media (min-width:521px){.now-card.winter .now-body > p{max-width:min(46ch,calc(100% - clamp(96px,15vw,130px)))}}
@media (min-width:1100px){.now-card.winter .now-body > p{max-width:calc(100% - 245px)}.now-crew{right:.75rem}}
.snowfall{position:absolute;inset:0;pointer-events:none}
.snowfall i{position:absolute;top:-12px;border-radius:50%;background:#fff;opacity:.75;animation:snow 9s linear infinite}
@keyframes snow{from{top:-12px;transform:translateX(0)}to{top:104%;transform:translateX(var(--dx,0px))}}
.hedge-anim{display:block;width:100%;height:auto;aspect-ratio:400/124;background:linear-gradient(#DFF1F4,#F0F7EC);flex:0 0 auto}
.hg-ground{fill:#9BA857}
.hg-body{fill:#3F8F3A}
.hg-dots{fill:#2F7A32}
.hg-tufts{fill:#55A548}
.hedge-anim .tuft{transform-box:fill-box;transform-origin:50% 100%}
.hg-trimmer{opacity:0}
.js .now-card.in .tuft{animation:hgcut 9s linear infinite backwards;animation-delay:calc(.3s + var(--i) * .216s)}
.js .now-card.in .hg-trimmer{animation:hgtrim 9s linear infinite}
@keyframes hgcut{
  0%{transform:none;opacity:1}
  3%{transform:translate(7px,30px) rotate(50deg);opacity:0}
  3.1%,62%{transform:scaleY(0);opacity:1}
  80%,100%{transform:none;opacity:1}
}
@keyframes hgtrim{
  0%{transform:translate(-40px,0);opacity:0}
  3%{opacity:1}
  22%{transform:translate(174px,1.5px)}
  45%{transform:translate(400px,0);opacity:1}
  50%,100%{transform:translate(440px,0);opacity:0}
}

/* Geschwungene Übergänge zwischen den Abschnitten */
.curve{position:absolute;left:0;width:100%;height:clamp(28px,5vw,64px);display:block;pointer-events:none}
.curve path{fill:var(--bg)}
.curve.bottom{bottom:-1px}
.curve.top{top:-1px}

/* Leistungen */
.services{display:grid;gap:0 3.5rem;margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:900px){.services{grid-template-columns:1fr 1fr}}
.service{
  display:grid;grid-template-columns:60px 1fr;gap:1.1rem;align-items:start;
  padding-block:1.75rem;border-top:1px solid var(--line);
}
.service.wide{grid-column:1/-1;margin-top:1.5rem;padding:1.5rem;border:1px solid var(--line);border-radius:22px 22px 22px 6px;background:var(--surface)}
.service.wide p{max-width:62ch}
.service h3{font-size:1.4rem;line-height:1.2;letter-spacing:-0.015em;font-weight:700}
.service p{color:var(--muted);margin-top:.45rem;max-width:44ch}
.service a{display:inline-block;margin-top:.8rem;font-weight:700;text-underline-offset:4px}
.ico{width:56px;height:56px;fill:none;stroke:var(--leaf);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.js .ico *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s ease .15s}
.js .in .ico *{stroke-dashoffset:0}

/* Jahreszeiten-Szene */
.seasons{
  position:relative;overflow:hidden;
  background:var(--sky);color:#0D2A1C;
  transition:background-color .9s ease;
  --fall:900px;
}
.seasons::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(60px,9vw,120px);background:linear-gradient(var(--bg),transparent);z-index:0;pointer-events:none}
.seasons[data-season="spring"]{--sky:#DFF1F4;--sc-far:#B5D0C2;--sc-field:#A9D18E;--sc-ground:#86C162;--sc-path:#DDD5C4;--sc-hedge:#3F8F3A;--sc-crown:#F3B6C8;--sc-crown-o:1;--sc-snow:0;--sc-sun:#FFD95A;--sc-sun-o:1;--sc-window:#CFE6F2;--sc-flowers:1;--sc-bloom:0;--sc-fire:0;--sc-tub:0;--sc-lounger:1;--sc-birds:1;--sc-flock:0;--sc-sun-s:1;--sc-glow:0;--sc-cover:0;--sc-leaves:0}
.seasons[data-season="summer"]{--sky:#C9E8F8;--sc-far:#A6CBB3;--sc-field:#E8D57E;--sc-ground:#6FB34A;--sc-path:#DDD5C4;--sc-hedge:#2F7A32;--sc-crown:#3E8E3A;--sc-crown-o:1;--sc-snow:0;--sc-sun:#FFC93A;--sc-sun-o:1;--sc-window:#CFE6F2;--sc-flowers:1;--sc-bloom:1;--sc-fire:0;--sc-tub:0;--sc-lounger:1;--sc-birds:1;--sc-flock:0;--sc-sun-s:1.45;--sc-glow:.55;--sc-cover:0;--sc-leaves:0}
.seasons[data-season="autumn"]{--sky:#F7E7C6;--sc-far:#C7B797;--sc-field:#C99A5B;--sc-ground:#9BA857;--sc-path:#D8CFBD;--sc-hedge:#5E7F35;--sc-crown:#E0782B;--sc-crown-o:1;--sc-snow:0;--sc-sun:#FFB84A;--sc-sun-o:.9;--sc-window:#FFE7A8;--sc-flowers:0;--sc-bloom:0;--sc-fire:1;--sc-tub:1;--sc-lounger:0;--sc-birds:0;--sc-flock:1;--sc-sun-s:1;--sc-glow:0;--sc-cover:1;--sc-leaves:1}
.seasons[data-season="winter"]{--sky:#DCE7EF;--sc-far:#B4C2CC;--sc-field:#EDF2F6;--sc-ground:#FFFFFF;--sc-path:#8E9391;--sc-hedge:#4B6A4F;--sc-crown:#FFFFFF;--sc-crown-o:0;--sc-snow:1;--sc-sun:#FFF3C4;--sc-sun-o:.55;--sc-window:#FFD98A;--sc-flowers:0;--sc-bloom:0;--sc-fire:1;--sc-tub:1;--sc-lounger:0;--sc-birds:0;--sc-flock:0;--sc-sun-s:.85;--sc-glow:0;--sc-cover:1;--sc-leaves:0}
.seasons-head{position:relative;z-index:2;padding-top:clamp(3rem,7vw,5.5rem)}
.seasons-head .h2{color:#005233}
.seasons-head p{font-size:1.15rem;max-width:44ch;margin-top:.8rem}
/* Das Bild behält sein Seitenverhältnis, damit oben nichts abgeschnitten wird. Nur am Handy wird seitlich beschnitten.
   Auf sehr breiten Bildschirmen bleibt es bei 2000 Pixeln Breite, Wiese und Horizont laufen seitlich weiter. */
.scene{display:block;width:100%;max-width:2000px;margin-inline:auto;height:clamp(210px,35vw,700px);overflow:visible;position:relative;z-index:0;margin-top:clamp(.75rem,2vw,1.5rem)}
.scene *{transition:fill .9s ease, opacity .9s ease, stroke .9s ease}
.sc-far{fill:var(--sc-far)}
.sc-field{fill:var(--sc-field)}
.sc-ground{fill:var(--sc-ground)}
.sc-path{fill:var(--sc-path)}
.sc-hedge{fill:var(--sc-hedge)}
.sc-crown{fill:var(--sc-crown);opacity:var(--sc-crown-o)}
.sc-snow{opacity:var(--sc-snow)}
.sc-window{fill:var(--sc-window)}
.sc-sun{fill:var(--sc-sun);opacity:var(--sc-sun-o)}
.sc-rays{stroke:var(--sc-sun);opacity:var(--sc-sun-o);transform-box:fill-box;transform-origin:center;animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.scene .sun-wrap{transform-box:fill-box;transform-origin:center;transform:scale(var(--sc-sun-s,1));transition:transform .9s ease}
.sc-glow{fill:#FFF3A8;opacity:var(--sc-glow)}
.fl{opacity:var(--sc-flowers)}
.fl-su{opacity:var(--sc-bloom)}
.sway{transform-box:fill-box;transform-origin:50% 100%;animation:sway 3.6s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
.birds{opacity:var(--sc-birds);fill:none;stroke:#2B3A33;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.bird{animation:fly 24s linear infinite}
.bird.b2{animation-duration:32s;animation-delay:-11s}
.bird.b3{animation-duration:28s;animation-delay:-19s}
@keyframes fly{0%{transform:translate(-60px,0)}50%{transform:translate(620px,-28px)}100%{transform:translate(1300px,8px)}}
.flap{transform-box:fill-box;transform-origin:50% 100%;animation:flap .45s ease-in-out infinite alternate}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(-.55)}}
.flock{opacity:var(--sc-flock);fill:none;stroke:#3A3A32;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.flock-move{animation:fly2 38s linear infinite}
@keyframes fly2{from{transform:translate(1280px,0)}to{transform:translate(-160px,-34px)}}
.scene .sc-van *{transition:opacity .9s ease}
.scene image{transition:none}
.sc-church .sc-cross{stroke:var(--sc-far)}
/* Figur und Hund wandern mit der Jahreszeit und stehen nicht starr. Im Winter erscheint die Winter-Ausführung. */
.scene .sc-crew-pos{transition:transform 1.8s cubic-bezier(.45,0,.2,1)}
.seasons[data-season="spring"] .sc-crew-pos{transform:translate(0,0)}
.seasons[data-season="summer"] .sc-crew-pos{transform:translate(-46px,0)}
.seasons[data-season="autumn"] .sc-crew-pos{transform:translate(72px,0)}
.seasons[data-season="winter"] .sc-crew-pos{transform:translate(104px,0)}
.scene .crew-std,.scene .crew-win{transition:opacity .7s ease .5s}
.scene .crew-win{opacity:0}
.seasons[data-season="winter"] .crew-win{opacity:1}
.seasons[data-season="winter"] .crew-std{opacity:0}
.scene .sc-man-bob{transform-box:fill-box;transform-origin:50% 100%;animation:manbob 3.4s ease-in-out infinite}
.scene .sc-dog-hop{transform-box:fill-box;transform-origin:50% 100%;animation:doghop 2.6s ease-in-out infinite}
@keyframes manbob{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg) translateY(-1px)}}
@keyframes doghop{0%,58%,100%{transform:translateY(0) rotate(0)}66%{transform:translateY(-7px) rotate(-4deg)}74%{transform:translateY(0) rotate(0)}82%{transform:translateY(-4px) rotate(3deg)}90%{transform:translateY(0)}}
.scene .acc{opacity:0;transition:opacity .6s ease .8s}
.seasons[data-season="winter"] .acc-winter,.seasons[data-season="summer"] .acc-summer,.seasons[data-season="autumn"] .acc-autumn,.seasons[data-season="spring"] .acc-spring{opacity:1}
.sc-cover{opacity:var(--sc-cover)}
.sc-leaves{opacity:var(--sc-leaves)}
.shimmer{opacity:.85;animation:shimmer 2.4s ease-in-out infinite alternate}
@keyframes shimmer{from{transform:translateX(-7px)}to{transform:translateX(7px)}}
.sc-lounger{opacity:var(--sc-lounger)}
.sc-tub{opacity:var(--sc-tub);pointer-events:none}
.seasons[data-season="autumn"] .sc-tub,.seasons[data-season="winter"] .sc-tub{pointer-events:auto}
.spa-hot{cursor:pointer}
.hot-ring{fill:none;stroke:#A5E02E;stroke-width:3;transform-box:fill-box;transform-origin:center;animation:ring 2.2s ease-out infinite}
@keyframes ring{0%{transform:scale(.8);opacity:.9}100%{transform:scale(2.3);opacity:0}}
.sc-fire{opacity:var(--sc-fire)}
.scene .flick{animation:flick 1.9s ease-in-out infinite;transition:none}
@keyframes flick{0%{opacity:.5}18%{opacity:.9}34%{opacity:.58}52%{opacity:.95}68%{opacity:.66}84%{opacity:.86}100%{opacity:.5}}
.smoke{opacity:var(--sc-fire)}
.scene .puff{fill:#fff;transform-box:fill-box;transform-origin:center;animation:puff 3.3s ease-out infinite;transition:none}
.scene .smoke .puff{fill:#8F9996}
.scene .puff:nth-child(2){animation-delay:-1.1s}
.scene .puff:nth-child(3){animation-delay:-2.2s}
@keyframes puff{0%{transform:translate(0,0) scale(.5);opacity:0}18%{opacity:.8}100%{transform:translate(12px,-52px) scale(1.8);opacity:0}}
.cloud{fill:#fff;opacity:.85;animation:drift 90s linear infinite}
.cloud.c2{animation-duration:130s;animation-delay:-60s;opacity:.7}
@keyframes drift{from{transform:translateX(-260px)}to{transform:translateX(1320px)}}

/* Hecke: Schnitt und Wuchs je Jahreszeit. Die Schnitt-Animation läuft erst, wenn der Abschnitt sichtbar ist (.go).
   Der Zuwachs (h-grow) wächst aus dem Sockel heraus, beide überlappen sich in derselben Farbe. */
.scene .h-grow{transform-box:view-box;transform-origin:0 314px;transform:scale(1,0);transition:transform 1.4s ease}
.seasons[data-season="summer"] .h-grow,.seasons[data-season="autumn"] .h-grow{transform:none}
.seasons:not([data-season="spring"]) .tuft{opacity:0}
.scene .tuft,.scene .sl{transform-box:fill-box;transform-origin:50% 100%}
.seasons.go[data-season="spring"] .tuft{animation:tuftfall .5s ease-in both;animation-delay:calc(.6s + var(--i) * .16s)}
.seasons.go[data-season="autumn"] .sl{animation:slicecut .55s ease-in both;animation-delay:calc(1s + var(--i) * .18s)}
@keyframes tuftfall{from{transform:none;opacity:1}to{transform:translate(4px,10px) scale(.6);opacity:0}}
@keyframes slicecut{from{transform:none;opacity:1}60%{opacity:1}to{transform:translate(4px,6px) scale(1,.1);opacity:0}}
.scene .trimmer{opacity:0;transition:none}
.seasons.go[data-season="spring"] .trimmer{--ty:-1px;animation:trim calc(var(--n) * .16s + .25s) linear .5s both}
.seasons.go[data-season="autumn"] .trimmer{--ty:0px;animation:trim calc(var(--n) * .18s + .25s) linear .9s both}
@keyframes trim{0%{opacity:0;transform:translate(-6px,var(--ty))}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translate(var(--w),var(--ty))}}

/* Sprechblase zum Wellness-Partner */
.spa-bubble{
  position:absolute;z-index:5;width:min(280px,calc(100% - 16px));padding:.85rem 1rem;
  border-radius:16px;background:#fff;color:#0D2A1C;border:2px solid #005233;
  box-shadow:0 12px 30px rgba(0,40,25,.28);font-size:.95rem;line-height:1.4;
  animation:pop .22s ease both;
}
.spa-bubble strong{display:block;color:#005233;margin-bottom:.15rem}
.spa-bubble a{display:inline-block;margin-top:.4rem;font-weight:700;color:#005233;text-underline-offset:4px}
.spa-bubble::after{
  content:"";position:absolute;left:var(--ax,50%);bottom:-9px;width:14px;height:14px;background:#fff;
  border-right:2px solid #005233;border-bottom:2px solid #005233;transform:translateX(-50%) rotate(45deg);
}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
.particles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.p{position:absolute;top:-24px;opacity:.92;animation:fall linear infinite;will-change:transform}
.seasons[data-season="winter"] .p{border-radius:50%;box-shadow:0 0 0 1px rgba(150,172,190,.35)}
.seasons[data-season="autumn"] .p{border-radius:2px 70% 2px 70%}
.seasons[data-season="spring"] .p{border-radius:70% 2px 70% 2px;box-shadow:0 0 0 1px rgba(220,150,175,.3)}
@keyframes fall{to{transform:translate3d(var(--drift,0px),var(--fall),0) rotate(320deg)}}

.season-bar{position:relative;z-index:2;background:var(--fir);color:var(--fir-ink)}
.season-bar .wrap{display:grid;gap:.9rem 2rem;padding-block:1.1rem;align-items:center}
.season-bar .wrap > *{min-width:0}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.seg button{
  font:inherit;font-weight:700;font-size:.98rem;line-height:1.1;
  min-width:0;min-height:46px;padding:.4rem .3rem;border-radius:999px;cursor:pointer;
  background:transparent;color:inherit;border:1.5px solid rgba(238,244,238,.35);
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.seg button[aria-pressed="true"]{background:var(--signal);color:var(--signal-ink);border-color:var(--signal)}
@media (max-width:350px){.seg{gap:.25rem}.seg button{font-size:.82rem;padding-inline:.1rem}}
html:not(.js) .seg{display:none}
.season-text{font-size:1.08rem;line-height:1.45}
.season-text strong{display:block;font-size:1.2rem}
.season-extra{grid-column:1/-1;display:grid;gap:1rem 2.5rem;padding-top:1rem;border-top:1px solid rgba(242,247,241,.22);font-size:1rem;line-height:1.5;color:var(--fir-soft)}
.season-extra strong{display:block;color:#fff;font-weight:700}
.season-extra a{color:var(--signal);font-weight:500;white-space:nowrap;text-underline-offset:4px}
@media (min-width:860px){
  .season-extra{grid-template-columns:1fr 1fr}
  .season-bar .wrap{grid-template-columns:auto 1fr}
  .seg{grid-template-columns:repeat(4,minmax(112px,auto))}
}

/* Ablauf */
.steps{counter-reset:step;margin-top:clamp(2rem,4vw,3rem);display:grid;gap:0;max-width:760px}
.step{counter-increment:step;position:relative;padding:0 0 2.2rem 4.4rem}
.step::before{
  content:counter(step);
  position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;font-weight:700;font-size:1.2rem;
  background:var(--surface);color:var(--ink);border:2px solid var(--line);
  transition:background-color .5s ease .2s,border-color .5s ease .2s,color .5s ease .2s;
}
.step::after{
  content:"";position:absolute;left:23px;top:54px;bottom:6px;width:2px;background:var(--line);
}
.step:last-child{padding-bottom:0}
.step:last-child::after{display:none}
.step.in::before,html:not(.js) .step::before{background:var(--signal);border-color:var(--signal);color:var(--signal-ink)}
.steps-cta{margin-top:2.25rem}
.step h3{font-size:1.35rem;line-height:1.2;font-weight:700;letter-spacing:-0.015em;padding-top:.5rem}
.step p{color:var(--muted);margin-top:.4rem;max-width:52ch}

/* FeWo-Bereich auf der Startseite */
.fewo{background:var(--surface);border-block:1px solid var(--line)}
.fewo-grid{display:grid;gap:2.5rem 4rem;margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:960px){.fewo-grid{grid-template-columns:1fr 1fr;align-items:start}}
.plain-list li{position:relative;padding:.55rem 0 .55rem 2rem;border-bottom:1px solid var(--line)}
.plain-list li::before{
  content:"";position:absolute;left:.15rem;top:1.05rem;width:.95rem;height:.5rem;
  border-left:3px solid var(--leaf);border-bottom:3px solid var(--leaf);transform:rotate(-45deg);
}
.subhead{font-size:1.3rem;font-weight:700;letter-spacing:-0.015em;line-height:1.2;margin-bottom:.8rem}
.linklist{display:grid;gap:.6rem}
.linklist a{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.95rem 1.15rem;border-radius:14px;border:1.5px solid var(--line);background:var(--bg);
  color:var(--ink);font-weight:700;text-decoration:none;line-height:1.3;
  transition:border-color .15s ease,background-color .15s ease;
}
.linklist a::after{
  content:"";flex:0 0 10px;width:10px;height:10px;border-right:3px solid var(--leaf);border-top:3px solid var(--leaf);transform:rotate(45deg);
  transition:transform .15s ease;
}
.linklist a:hover{border-color:var(--leaf)}
.linklist a:hover::after{transform:translateX(3px) rotate(45deg)}
.linklist.narrow{max-width:560px;margin-top:1.5rem}
.fewo-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.fewo .wrap{position:relative}
.fewo-fig{display:none;position:absolute;right:0;top:clamp(-5.5rem,-6vw,-3rem);width:clamp(170px,17vw,230px);height:auto;filter:drop-shadow(0 8px 8px rgba(0,30,20,.22))}
@media (min-width:960px){.fewo-fig{display:block}}
.js .fewo-fig{transform:translateY(24px) rotate(4deg);opacity:0;transition:transform .8s cubic-bezier(.2,.9,.3,1.2) .2s,opacity .5s ease .2s}
.js .fewo-fig.in{transform:none;opacity:1}

/* FeWo-Seite */
.fw-row{display:grid;gap:1.5rem 4rem;padding-block:clamp(2rem,4vw,3rem);border-top:1px solid var(--line)}
.fw-row:first-of-type{border-top:0;padding-top:0}
@media (min-width:900px){.fw-row{grid-template-columns:5fr 7fr;align-items:start}}
.fw-icon{display:block;width:clamp(96px,22vw,132px);height:auto;margin-bottom:1rem;padding:8px;border-radius:22px 22px 22px 6px;background:#fff;border:1px solid var(--line);transition:transform .5s cubic-bezier(.2,.9,.3,1.3)}
.js .reveal .fw-icon{transform:scale(.6) rotate(-8deg)}
.js .reveal.in .fw-icon{transform:none}
.starter .fw-icon{float:right;margin:0 0 1rem 1.25rem;border-color:transparent}
/* Figur im grünen Seitenkopf: steht hinter dem Schwung am unteren Rand */
.head-fig{display:none;position:absolute;z-index:0;bottom:clamp(-6px,1vw,14px);right:max(1.25rem,calc((100% - 1180px)/2));width:clamp(230px,26vw,340px);pointer-events:none}
.head-fig img{display:block;height:auto}
.head-fig .hf-one{width:100%;filter:drop-shadow(0 8px 8px rgba(0,0,0,.3))}
.head-fig .hf-dog{position:absolute;left:0;bottom:6%;width:34%;filter:drop-shadow(0 6px 6px rgba(0,0,0,.3));animation:doghop2 3.2s ease-in-out 1.5s infinite}
.head-fig.only-dog{width:clamp(110px,12vw,160px);bottom:clamp(30px,5.5vw,84px)}
.head-fig.only-dog .hf-dog{position:static;width:100%}
.page-head .swoosh{z-index:1}
@media (min-width:900px){.head-fig{display:block}.page-head:has(.head-fig) .wrap{padding-right:min(34vw,360px)}}
.fw-row h2{font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.1;letter-spacing:-0.02em;font-weight:700;text-wrap:balance}
.fw-row .intro{color:var(--muted);margin-top:.7rem;max-width:40ch}
.panel{
  padding:clamp(1.25rem,3vw,2rem);border-radius:22px 22px 22px 6px;
  background:var(--surface);border:1px solid var(--line);
}
.panel .note{margin-top:1rem;color:var(--muted)}
.panel .plain-list li:last-child{border-bottom:0}
.dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:.75rem;margin-bottom:1rem}
.dates div{padding:.85rem 1rem;border-radius:14px;background:var(--bg);border:1px solid var(--line);line-height:1.3}
.dates b{display:block}
.starter{
  padding:clamp(1.5rem,4vw,2.75rem);
  border-radius:28px 28px 28px 8px;background:var(--fir);color:var(--fir-ink);
}
.starter h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;letter-spacing:-0.02em;line-height:1.1}
.starter > p{color:var(--fir-soft);margin-top:.5rem;max-width:52ch}
.checks{display:grid;gap:.2rem 2.5rem;margin-top:1.5rem}
@media (min-width:760px){.checks{grid-template-columns:1fr 1fr}}
.checks li{display:flex;gap:.75rem;align-items:flex-start;padding:.45rem 0}
.checks svg{flex:0 0 24px;width:24px;height:24px;margin-top:.2rem;fill:none;stroke:var(--signal);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.js .checks path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s ease}
.js .starter.in .checks path{stroke-dashoffset:0}
.checks li:nth-child(1) path{transition-delay:.1s}.checks li:nth-child(2) path{transition-delay:.2s}
.checks li:nth-child(3) path{transition-delay:.3s}.checks li:nth-child(4) path{transition-delay:.4s}
.checks li:nth-child(5) path{transition-delay:.5s}.checks li:nth-child(6) path{transition-delay:.6s}
.checks li:nth-child(7) path{transition-delay:.7s}.checks li:nth-child(8) path{transition-delay:.8s}
.checks li:nth-child(9) path{transition-delay:.9s}.checks li:nth-child(10) path{transition-delay:1s}
.starter .btn{margin-top:1.75rem}

/* Seite Terrassenüberdachung */
.tu-intro{display:grid;gap:2rem 4rem;align-items:center}
.tu-intro > *{min-width:0}
@media (min-width:900px){.tu-intro{grid-template-columns:1fr 1fr}}
.tu-text{margin-top:1rem;max-width:60ch}
.tu-list{margin-top:1.25rem;max-width:560px}
.tu-figure{margin:0}
.tu-figure img,.gallery img,.model-img img{display:block;width:100%;height:auto}
.tu-figure img{border-radius:28px 28px 28px 8px}
.tu-figure figcaption,.gallery figcaption,.model-note,.credit{font-size:.95rem;color:var(--muted)}
.tu-figure figcaption{margin-top:.6rem}
.tu-models{background:var(--surface);border-block:1px solid var(--line)}
.models{display:grid;gap:1.5rem;margin-top:clamp(2rem,4vw,3rem)}
.models > *,.extras > *,.gallery > *{min-width:0}
@media (min-width:820px){.models{grid-template-columns:1fr 1fr}}
.model{display:flex;flex-direction:column;border-radius:22px 22px 22px 6px;border:1px solid var(--line);background:var(--bg);overflow:hidden}
.model-img{overflow:hidden;aspect-ratio:3/2;background:var(--line)}
.model-img img{height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.model:hover .model-img img{transform:scale(1.05)}
.model-body{padding:clamp(1.25rem,3vw,2rem);display:flex;flex-direction:column;flex:1}
.model h3,.extra h3{font-size:clamp(1.3rem,2.6vw,1.6rem);line-height:1.15;letter-spacing:-0.02em;font-weight:700}
.model p{margin-top:.7rem;color:var(--muted)}
.facts{margin-top:1rem;display:grid;gap:.1rem}
.facts li{position:relative;padding:.4rem 0 .4rem 1.7rem;line-height:1.45}
.facts li::before{content:"";position:absolute;left:.1rem;top:.85rem;width:.85rem;height:.45rem;border-left:3px solid var(--leaf);border-bottom:3px solid var(--leaf);transform:rotate(-45deg)}
.model .model-note{margin-top:auto;padding-top:1.25rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem}
.model .model-note .btn{min-height:46px;padding:.55rem 1.25rem;font-size:1rem;color:var(--signal-ink)}
.extra .more{display:inline-block;margin-top:.7rem;font-weight:700;text-underline-offset:4px}
/* Preise */
.price{margin-top:1.1rem!important;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .8rem;color:var(--ink)!important}
.price strong{font-size:clamp(1.6rem,3.4vw,2rem);font-weight:700;letter-spacing:-0.03em;line-height:1.1;box-shadow:inset 0 -.38em 0 rgba(165,224,46,.55)}
.price span{font-size:.95rem;color:var(--muted)}
.price.small-price strong{font-size:1.35rem}
.tu-prices{padding-bottom:0}
.prices{margin-top:clamp(1.5rem,3vw,2.25rem);max-width:900px;border-top:2px solid var(--ink)}
.prices li{display:grid;grid-template-columns:1fr auto;gap:.1rem 1.5rem;align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--line)}
.prices .pr-name{font-weight:700}
.prices .pr-size{grid-column:1;color:var(--muted);font-size:.98rem}
.prices strong{grid-column:2;grid-row:1/3;align-self:center;font-size:clamp(1.15rem,2.6vw,1.45rem);letter-spacing:-0.02em;white-space:nowrap}
@media (min-width:760px){
  .prices li{grid-template-columns:minmax(0,5fr) minmax(0,7fr) auto}
  .prices .pr-size{grid-column:2}
  .prices strong{grid-column:3;grid-row:1}
}
.price-note{margin-top:1.25rem;max-width:70ch;color:var(--muted);font-size:.98rem}
.tu-prices .btn{margin-top:1.5rem}
.duo .duo-price{margin-top:1rem;color:var(--ink);line-height:1.35}
.duo-price strong{font-size:1.45rem;letter-spacing:-0.02em;box-shadow:inset 0 -.38em 0 rgba(165,224,46,.55)}
.duo-price span{display:block;font-size:.92rem;color:var(--muted);margin-top:.15rem}
.extras{display:grid;gap:1.5rem 3rem;margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:820px){.extras{grid-template-columns:1fr 1fr}}
.extra{display:grid;grid-template-columns:60px 1fr;gap:1.1rem;align-items:start;padding-top:1.5rem;border-top:1px solid var(--line)}
.extra p{margin-top:.5rem;color:var(--muted)}
.tu-gallery{padding-bottom:0}
.gallery{display:grid;gap:1rem;margin-top:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:700px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery figure{margin:0}
.gallery img{border-radius:18px 18px 18px 5px;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gallery figure:hover img{transform:translateY(-4px)}
.gallery figcaption{margin-top:.5rem}
.credit{margin-top:1.5rem}
.tu-project{padding-bottom:0}
.tu-project .kicker{margin-bottom:.6rem!important}
.proj-photos{display:grid;gap:1rem;margin-top:clamp(1.5rem,3vw,2.5rem);align-items:start}
.proj-photos > *{min-width:0}
@media (min-width:700px){.proj-photos{grid-template-columns:repeat(3,1fr)}}
.proj-photos figure{margin:0}
.proj-photos img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:18px 18px 18px 5px}
.proj-photos figcaption{margin-top:.5rem;font-size:.95rem;color:var(--muted)}
.proj-photos figcaption b{display:inline-block;margin-right:.5rem;padding:.05rem .55rem;border-radius:6px 6px 6px 2px;background:var(--fir);color:#fff;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}
.tu-project .btn{margin-top:1.75rem}
/* Bilder zum Vergrößern */
.js [data-zoomable]{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(.75rem,3vw,2.5rem);background:rgba(4,20,13,.92);animation:lbin .2s ease both}
.lightbox figure{margin:0;max-width:min(1200px,100%);max-height:100%;display:grid;gap:.75rem;justify-items:center}
.lightbox img{display:block;max-width:100%;max-height:calc(100vh - 9rem);width:auto;height:auto;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:lbimg .25s ease both}
.lightbox figcaption{color:#fff;text-align:center;font-size:1rem;max-width:60ch}
.lightbox button{position:absolute;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,.7);background:rgba(0,0,0,.35);color:#fff;font:inherit;font-size:1.6rem;line-height:1;cursor:pointer}
.lightbox button:hover{background:var(--signal);color:var(--signal-ink);border-color:var(--signal)}
.lightbox .lb-close{top:clamp(.6rem,2vw,1.5rem);right:clamp(.6rem,2vw,1.5rem)}
.lightbox .lb-prev{left:clamp(.4rem,2vw,1.5rem);top:50%;transform:translateY(-50%)}
.lightbox .lb-next{right:clamp(.4rem,2vw,1.5rem);top:50%;transform:translateY(-50%)}
.lightbox :focus-visible{outline:3px solid #A5E02E;outline-offset:3px}
@keyframes lbin{from{opacity:0}to{opacity:1}}
@keyframes lbimg{from{transform:scale(.94);opacity:.4}to{transform:none;opacity:1}}

/* Kopf der Unterseiten */
.page-head{position:relative;background:var(--fir);color:var(--fir-ink);padding-block:clamp(2rem,5vw,3.5rem) clamp(4rem,9vw,7rem);overflow:hidden}
.page-head .wrap{position:relative;z-index:1}
.page-head h1{font-size:min(7.2vw,clamp(2rem,6vw,3.6rem));line-height:1.04;letter-spacing:-0.03em;font-weight:700;max-width:18ch;text-wrap:balance}
.page-head .lead{color:var(--fir-soft);max-width:54ch}
.page-head .lead strong{color:#fff}
.page-head .btn{margin-top:1.75rem}
.page-head .btn-ghost{color:#fff;margin-left:.5rem}
@media (max-width:520px){.page-head .btn{width:100%;margin-left:0}.page-head .btn-ghost{margin-top:.75rem}}
.page-head .swoosh{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(40px,7vw,96px);display:block}
.swoosh-bg{fill:var(--bg)}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.95rem;margin-bottom:1.1rem;color:var(--fir-soft)}
.crumbs a{color:var(--fir-soft);text-underline-offset:4px}
.crumbs li + li::before{content:"/";margin-right:.4rem;opacity:.6}

/* Abschluss-Band mit Kontakt auf Unterseiten */
.cta-band{position:relative;background:var(--fir);color:var(--fir-ink);padding-block:clamp(3rem,7vw,5rem)}
.cta-band .h2{max-width:22ch}
.cta-band p{color:var(--fir-soft);margin-top:.9rem;max-width:56ch;font-size:1.15rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.cta-row .btn-ghost{color:#fff}

/* Rechtstexte */
.prose{max-width:74ch}
.prose h2{font-size:clamp(1.35rem,2.6vw,1.7rem);line-height:1.2;letter-spacing:-0.015em;font-weight:700;margin-top:2.5rem}
.prose h3{font-size:1.15rem;line-height:1.3;font-weight:700;margin-top:1.6rem}
.prose h2:first-child{margin-top:0}
.prose p,.prose ul,.prose address,.prose dl{margin-top:.9rem}
.prose ul{padding-left:1.25rem;list-style:disc}
.prose li{margin-top:.3rem}
.prose a{text-underline-offset:4px;overflow-wrap:anywhere}
.prose .box{margin-top:1rem;padding:1.1rem 1.25rem;border-radius:16px 16px 16px 4px;border:1px solid var(--line);background:var(--surface)}
.prose .box p:first-child{margin-top:0}
.prose .lines{margin-top:1rem;display:grid;gap:1.6rem}
.prose .lines p{margin:0;padding-top:.4rem;border-top:1.5px solid var(--ink);font-size:.95rem;color:var(--muted)}
.prose .stand{color:var(--muted);font-size:.98rem}
.print-btn{margin-top:1.5rem}
@media print{
  .header,.footer,.actionbar,.promo,.print-btn,.page-head .swoosh,.skip{display:none!important}
  .page-head{background:none;color:#000;padding:0 0 1rem}
  .crumbs{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .section{padding-block:0}
}

/* Draußen */
.duo{display:grid;gap:1.25rem;margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:900px){
  .duo article:first-child{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,10fr);align-items:stretch}
  .duo article:first-child .slides{aspect-ratio:auto;min-height:100%}
  .duo article:first-child .duo-body{align-self:center}
  .duo article.spa .duo-body{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 3rem;width:100%}
  .duo article.spa a{margin-top:0}
}
.duo article{border-radius:22px 22px 22px 6px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.duo-body{padding:clamp(1.5rem,3.5vw,2.5rem)}
.duo .slides{display:block;position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--line);margin:0}
.slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:slide 24s linear infinite}
.slides img:first-child{opacity:1}
.slides img:nth-child(2){animation-delay:6s}
.slides img:nth-child(3){animation-delay:12s}
.slides img:nth-child(4){animation-delay:18s}
@keyframes slide{0%{opacity:0;transform:scale(1)}4%{opacity:1}25%{opacity:1}29%{opacity:0;transform:scale(1.07)}100%{opacity:0;transform:scale(1)}}
.duo-links{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin-top:1.4rem}
.duo .duo-links a{margin-top:0}
.duo .duo-links .btn{color:var(--signal-ink)}
.duo article.spa{background:var(--fir);color:var(--fir-ink);border-color:var(--fir);display:flex;align-items:flex-end;--focus:#A5E02E}
.duo article.spa p{color:var(--fir-soft)}
.duo article.spa a{color:var(--fir-ink)}
.duo h3{font-size:clamp(1.2rem,4.6vw,1.6rem);font-weight:700;letter-spacing:-0.02em;line-height:1.15}
.duo p{color:var(--muted);margin-top:.6rem;max-width:50ch}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.tags li{padding:.35rem .9rem;border-radius:999px;border:1.5px solid var(--line);font-weight:500;font-size:1rem}
.duo a{display:inline-block;margin-top:1.2rem;font-weight:700;text-underline-offset:4px}

/* Über uns */
.about{display:grid;gap:2.5rem 4rem;align-items:start}
@media (min-width:900px){.about{grid-template-columns:4fr 7fr}}
.portrait{
  aspect-ratio:4/5;max-width:380px;width:100%;border-radius:28px 28px 28px 8px;overflow:hidden;
  background:radial-gradient(circle at 50% 38%,#0B7A4E 0%,#005233 72%);
  display:flex;align-items:flex-end;justify-content:center;padding:9% 5% 0;
}
.portrait{position:relative}
.portrait img{display:block;width:100%;height:auto}
.portrait .portrait-dog{position:absolute;left:3%;bottom:0;width:36%}
.js .portrait img{transform:translateY(45%);transition:transform 1s cubic-bezier(.2,.8,.2,1) .25s}
.js .portrait .portrait-dog{transform:translateY(105%);transition-delay:.6s}
.portrait.team{aspect-ratio:1/1;max-width:440px;padding:0;align-items:flex-end;justify-content:center;background:linear-gradient(#DFF1F4 0%,#EAF3E3 60%,#86C162 60.2%,#6FB34A 100%)}
.portrait.team .team-van{position:absolute;left:-10%;bottom:20%;width:120%;max-width:none;filter:drop-shadow(0 8px 6px rgba(0,50,30,.25))}
.portrait.team .team-pair{position:relative;width:auto;height:88%;margin-bottom:3%;margin-left:8%;filter:drop-shadow(0 8px 6px rgba(0,30,20,.3))}
.js .portrait.team .team-van{transform:translateX(110%);transition:transform 1.2s cubic-bezier(.16,.84,.3,1) .1s}
.js .portrait.team.in .team-van{transform:none}
.js .portrait.team .team-pair{transform:translateY(110%);transition:transform .9s cubic-bezier(.2,.8,.2,1) .8s}
.js .portrait.team.in .team-pair{transform:none}
.about-text p{margin-top:1.1rem;max-width:62ch}
.about-text p:first-of-type{font-size:1.25rem;line-height:1.5}
.sign{margin-top:1.75rem;font-weight:700;font-size:1.2rem;line-height:1.3}
.sign span{display:block;font-weight:500;color:var(--muted);font-size:1.05rem}

/* Soest */
.soest-band{overflow:hidden;padding-top:clamp(5rem,11vw,9rem);padding-bottom:clamp(180px,23vw,290px)}
.soest-band .wrap{position:relative;z-index:1}
.soest-band .h2{font-size:min(8.4vw,clamp(2.1rem,6vw,3.8rem));max-width:17ch}
.soest-band .lead{color:var(--fir-soft)}
.soest-band .lead + .lead{margin-top:.8rem}
.soest-band .btn{margin-top:1.75rem}
.band-skyline{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(160px,23vw,290px);color:#0B7149;pointer-events:none}

/* FAQ */
.faq{max-width:820px;margin-top:clamp(2rem,4vw,3rem)}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;
  padding:1.2rem 0;font-weight:700;font-size:1.2rem;line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:0 0 14px;width:14px;height:14px;margin-right:.3rem;
  border-right:3px solid var(--leaf);border-bottom:3px solid var(--leaf);
  transform:rotate(45deg);transition:transform .25s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding:0 0 1.3rem;color:var(--muted);max-width:60ch;animation:fadeup .3s ease both}
.faq details p a{font-weight:700;text-underline-offset:4px}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Kontakt */
.contact{background:var(--surface);border-top:1px solid var(--line)}
.contact-grid{display:grid;gap:2.5rem 4rem;margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:960px){.contact-grid{grid-template-columns:5fr 7fr;align-items:start}}
.big-phone{
  display:inline-block;font-size:clamp(2rem,6vw,3rem);font-weight:700;letter-spacing:-0.03em;line-height:1.1;
  color:var(--ink);text-decoration:none;border-bottom:5px solid var(--signal);white-space:nowrap;
}
.contact-list{margin-top:1.75rem;display:grid;gap:1.1rem}
.contact-list dt{font-weight:700}
.contact-list dd{color:var(--muted)}
.contact-list a{font-weight:500;text-underline-offset:4px}
.builder{padding:clamp(1.25rem,3.5vw,2.25rem);border-radius:22px 22px 22px 6px;background:var(--bg);border:1px solid var(--line)}
.builder legend,.builder label.field > span{display:block;font-weight:700;margin-bottom:.45rem}
.builder label.field > span small{font-weight:400;color:var(--muted);font-size:.95rem}
.builder fieldset{border:0;padding:0;margin:0 0 1.5rem;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{
  display:inline-flex;align-items:center;min-height:46px;padding:.4rem 1rem;border-radius:999px;
  border:1.5px solid var(--line);background:var(--surface);font-weight:500;font-size:1rem;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.chip input:checked + span{background:var(--fir);color:var(--fir-ink);border-color:var(--fir)}
.chip input:focus-visible + span{outline:3px solid var(--focus);outline-offset:3px}
/* Winterdienst: Flächen angeben. Ohne Skript immer sichtbar, mit Skript nur wenn Winterdienst gewählt ist */
.builder fieldset.wd-box{margin:0 0 1.5rem;padding:1.1rem 1.15rem 1.25rem;border:2px solid var(--leaf);border-radius:16px 16px 16px 5px;background:var(--surface)}
.js .builder fieldset.wd-box{display:none}
.js .builder fieldset.wd-box.on{display:block;animation:fadeup .35s ease both}
.wd-box legend{padding:0 .5rem;margin-bottom:0!important}
.wd-box legend small{font-weight:400;color:var(--muted);font-size:.95rem}
.wd-box > .small{margin-top:0;margin-bottom:.9rem}
.wd-rows{display:grid;gap:.7rem;margin-top:1rem}
.wd-row{display:grid;grid-template-columns:1fr 1fr;gap:.4rem .7rem;align-items:center;padding-top:.7rem;border-top:1px solid var(--line)}
.wd-row > *{min-width:0}
.wd-name{grid-column:1/-1;font-weight:700}
.wd-row label{display:flex;align-items:center;gap:.45rem}
.wd-row label span{font-size:.95rem;color:var(--muted);flex:0 0 auto}
.wd-row label i{font-style:normal;color:var(--muted)}
.wd-row input{width:100%;min-width:0;font:inherit;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:10px;padding:.55rem .6rem;min-height:46px;text-align:right}
.wd-row input:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--fir)}
.wd-m2{grid-column:1/-1;font-weight:700;color:var(--leaf);min-height:1.2em;font-size:.98rem}
@media (min-width:640px){
  .wd-row{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 5.5rem}
  .wd-name{grid-column:auto}
  .wd-m2{grid-column:auto;text-align:right}
}
.wd-sum{margin-top:.9rem;padding:.6rem .9rem;border-radius:10px;background:var(--fir);color:var(--fir-ink);font-weight:700}
.fields{display:grid;gap:1rem}
@media (min-width:640px){.fields{grid-template-columns:1fr 1fr}.fields .full{grid-column:1/-1}}
.field input,.field textarea{
  width:100%;font:inherit;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line);border-radius:12px;padding:.8rem .95rem;min-height:52px;
}
.field textarea{min-height:130px;resize:vertical;display:block}
.field input:focus,.field textarea:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--fir)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--error)}
/* Feld, das nur Spam-Programme ausfüllen */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{color:var(--error);font-weight:700;margin-top:1rem}
.send{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.send .btn{flex:1 1 220px}
.alt-send{margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.alt-send p{font-weight:700}
.alt-send .send{margin-top:.7rem}
.alt-send .btn{min-height:46px;padding:.55rem 1rem;font-size:1rem}
.small{font-size:.98rem;color:var(--muted);margin-top:1rem;max-width:58ch}
.small a{text-underline-offset:4px}
.form-ok{animation:fadeup .35s ease both}
.form-ok h3{font-size:1.5rem;line-height:1.2;letter-spacing:-0.015em;color:var(--ok)}
.form-ok p{margin-top:.6rem;max-width:48ch}
.form-ok .btn{margin-top:1.25rem}

/* Fuß */
.footer{background:var(--fir);color:var(--fir-ink);padding-block:3rem}
.footer .wrap{display:grid;gap:2.5rem}
@media (min-width:860px){.footer .wrap{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}}
.footer a{color:var(--fir-ink);text-underline-offset:4px}
.footer-brand{display:flex;align-items:center;gap:.65rem;font-weight:700;font-size:1.2rem;margin-bottom:1.5rem}
.footer .claim{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:700;letter-spacing:-0.02em;line-height:1.15}
.footer .place{color:var(--signal);font-weight:700;font-size:clamp(1.15rem,2.4vw,1.4rem);margin-top:.5rem}
.footer .meta{color:var(--fir-soft);margin-top:1rem}
.footer .meta a{color:var(--fir-soft)}
.footer-nav{display:flex;flex-wrap:wrap;gap:1.75rem 3rem}
.footer-nav p{font-weight:700;margin-bottom:.7rem}
.footer-nav ul{display:grid;gap:.5rem;align-content:start}
.cta-band + .footer{border-top:1px solid rgba(242,247,241,.18)}

/* Mobile Aktionsleiste */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:none;grid-template-columns:1fr 1fr 1fr;gap:.5rem;
  padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom,0px));
  background:var(--bg);border-top:1px solid var(--line);
  transition:transform .3s ease;
}
.js .actionbar{transform:translateY(110%)}
.js .actionbar.show{transform:none}
.actionbar a{
  display:flex;align-items:center;justify-content:center;min-height:50px;border-radius:999px;
  font-weight:700;font-size:1rem;text-decoration:none;
  background:var(--surface);color:var(--ink);border:1.5px solid var(--line);
}
.actionbar a.main{background:var(--signal);color:var(--signal-ink);border-color:var(--signal)}
@media (max-width:820px){
  .actionbar{display:grid}
  .footer{padding-bottom:calc(3rem + 76px)}
}

/* Einblenden beim Scrollen */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .hero-logo,.js .fewo-fig{opacity:1;transform:none}
  .js .now-card.winter .now-crew,.js .portrait.team .team-van,.js .portrait.team .team-pair,.js .reveal .fw-icon{transform:none}
  .js .portrait img{transform:none}
  .js .ico *,.js .checks path{stroke-dashoffset:0}
  .hg-trimmer{display:none}
  .particles{display:none}
  @view-transition{navigation:none}
}

/* Einwilligungs-Banner (erscheint nur, wenn in consent.js eine Google-ID eingetragen ist) */
.consent{position:fixed;z-index:60;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(84px + env(safe-area-inset-bottom));max-width:560px;background:#fff;color:#0D2A1C;border:2px solid #005233;border-radius:16px;padding:1rem 1.1rem;box-shadow:0 14px 36px rgba(0,40,25,.3);font-size:.95rem;line-height:1.45}
.consent p{margin:0 0 .8rem}.consent strong{display:block;color:#005233}
.consent a{color:#005233;text-underline-offset:4px}
.consent-btns{display:flex;gap:.6rem}.consent-btns .btn{flex:1;min-height:44px;border-color:#005233;color:#005233}
.consent-link{background:none;border:0;padding:0;color:var(--fir-ink);font:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer;justify-self:start}
@media (min-width:900px){.consent{left:20px;right:auto;bottom:20px}}

/* Neu 14.10.2026: Figur im Kopf auf dem Handy, Figuren auf Unterseiten am Handy, Google-Rezensionen */
.hero-logo .hero-fig{display:none}
@media (max-width:1039px){
  .hero-logo{flex-direction:row;align-items:flex-end;justify-self:start;gap:clamp(.75rem,4vw,1.5rem);text-align:left}
  .hero-logo > img:not(.hero-fig){display:none}
  .hero-logo .hero-fig{display:block;width:clamp(118px,34vw,170px);height:auto;filter:drop-shadow(0 8px 8px rgba(0,0,0,.22))}
  .hero-logo p{padding-bottom:.75rem;max-width:9ch}
}
@media (max-width:899px){
  .page-head:has(.head-fig) .wrap{padding-right:0}
  .head-fig{display:block;position:relative;right:auto;bottom:auto;width:clamp(130px,40vw,170px);margin:1.25rem 0 -1rem auto;margin-right:max(1rem,calc((100% - 1180px)/2))}
}
.reviews-head{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin-top:1rem}
.stars{color:#F2B705;letter-spacing:.08em;font-size:1.35rem;line-height:1}
.reviews-score{font-weight:700;font-size:1.15rem}
.reviews-score small{font-weight:500;color:var(--muted);font-size:.9rem}
.reviews{display:grid;gap:1.25rem;margin-top:clamp(1.5rem,3vw,2.25rem)}
@media (min-width:860px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review{margin:0;padding:clamp(1.25rem,3vw,1.75rem);border-radius:22px 22px 22px 6px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:.75rem}
.review blockquote{margin:0;font-size:1.05rem;line-height:1.5}
.review figcaption{margin-top:auto;font-weight:700;color:var(--muted);font-size:.95rem}
.reviews-note{margin-top:1.25rem;font-size:.88rem;color:var(--muted);max-width:70ch}
.reviews-link{margin-top:1.25rem}

/* Endlos-Animationen anhalten, solange der Abschnitt nicht zu sehen ist (spart Akku am Handy) */
.is-off,.is-off *{animation-play-state:paused!important}
.fields-hint{margin:0 0 .9rem}
.now-cta{display:flex;flex-wrap:wrap;gap:.75rem}

/* 20.10.2026: Richtpreise (Abschnitt #preise) und Preis-Badges */
.pl-wrap{margin-top:clamp(1.5rem,3vw,2.25rem);max-width:900px}
.pl-table{width:100%;border-collapse:collapse;font-size:1.02rem}
.pl-table thead th{font-size:.92rem;font-weight:700;color:var(--muted);text-align:left;padding:0 .75rem .6rem 0;border-bottom:2px solid var(--ink)}
.pl-table tbody th,.pl-table td{padding:.85rem .75rem .85rem 0;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.pl-table tbody th{font-weight:700;color:var(--ink)}
.pl-table td.pl-hint-col{color:var(--muted)}
.pl-table .pl-preis{text-align:right;white-space:nowrap;font-weight:700;color:var(--ink);padding-right:0}
.pl-hint{display:none}
.pl-note{margin-top:1.1rem;max-width:70ch;color:var(--muted);font-size:.92rem}
.pl-cta{margin-top:1.75rem}
@media (max-width:640px){
  .pl-table .pl-hint-col{display:none}
  .pl-hint{display:block;font-weight:400;color:var(--muted);font-size:.9rem;margin-top:.15rem}
  .pl-table tbody th{padding-right:1rem}
}
.price-badge{display:inline-block;margin:.15rem 0 .55rem;padding:.2rem .65rem;border-radius:999px;background:var(--signal);color:var(--signal-ink,#0D2A1C);font-weight:700;font-size:.88rem;line-height:1.4;text-decoration:none;vertical-align:middle}
a.price-badge:hover{filter:brightness(.95)}
.page-head .price-badge{margin:.9rem 0 0}