/* fonts.css wird separat im <head> verlinkt – ein @import hier würde den Renderstart verzögern */

/* ============================================================
   CleanCrass Services – Design System
   Markenfarben direkt aus dem Logo entnommen:
   Schwarz #000000 · Blattgruen #40783B · Stahlblau #3F92B4
   ============================================================ */

:root{
  /* Marke */
  --gruen:#40783B;
  --gruen-dunkel:#2F5A2B;
  --gruen-tief:#24461F;
  --gruen-hell:#EDF3EB;
  --gruen-rand:#CFE0CA;
  --blau:#3F92B4;
  --blau-dunkel:#2E7291;
  --blau-hell:#E9F3F7;

  /* Neutral */
  --tinte:#121611;
  --tinte-2:#394237;
  --grau:#5D675B;
  --grau-hell:#6C766A;
  --linie:#E1E6DF;
  --linie-stark:#9AA597;
  --papier:#FFFFFF;
  --papier-2:#F7F9F6;
  --papier-3:#EFF2ED;

  /* Signal */
  --warn:#98430F;
  --warn-hell:#FCF1EA;

  /* Typo */
  --font-display:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-text:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* Fluid Type Scale */
  --t-xs:clamp(.78rem,.76rem + .1vw,.83rem);
  --t-sm:clamp(.88rem,.85rem + .15vw,.95rem);
  --t-base:clamp(1rem,.97rem + .18vw,1.09rem);
  --t-lg:clamp(1.12rem,1.05rem + .34vw,1.32rem);
  --t-xl:clamp(1.32rem,1.18rem + .68vw,1.75rem);
  --t-2xl:clamp(1.6rem,1.32rem + 1.4vw,2.5rem);
  --t-3xl:clamp(1.95rem,1.35rem + 2.4vw,3.4rem);
  --t-4xl:clamp(2.35rem,1.4rem + 3.2vw,4.4rem);
  --t-5xl:clamp(2.8rem,1.6rem + 4.6vw,6rem);

  /* Raster */
  --breite:1200px;
  --breite-eng:760px;
  --pad:clamp(1.15rem,4vw,2rem);
  --luft:clamp(3.5rem,8vw,7rem);

  --radius:14px;
  --radius-sm:9px;
  --radius-lg:22px;

  --schatten-1:0 1px 2px rgba(18,22,17,.05),0 2px 8px rgba(18,22,17,.05);
  --schatten-2:0 4px 12px rgba(18,22,17,.07),0 12px 28px rgba(18,22,17,.07);
  --schatten-3:0 12px 28px rgba(18,22,17,.1),0 28px 60px rgba(18,22,17,.1);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-aus:cubic-bezier(.65,0,.35,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px;
  /* Platz für die Bildlaufleiste dauerhaft freihalten, sonst springt die Seite
     um deren Breite, sobald ein Panel das Scrollen sperrt */
  scrollbar-gutter:stable}
body{
  font-family:var(--font-text);
  font-size:var(--t-base);
  line-height:1.65;
  color:var(--tinte-2);
  background:var(--papier);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none;padding:0}
a{color:var(--gruen-dunkel);text-decoration-thickness:1px;text-underline-offset:3px}

/* ---------- Barrierefreiheit ---------- */
:focus-visible{outline:3px solid var(--blau);outline-offset:3px;border-radius:4px}
:focus:not(:focus-visible){outline:none}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:50%;top:.5rem;transform:translate(-50%,-200%);
  background:var(--tinte);color:#fff;padding:.7rem 1.2rem;border-radius:var(--radius-sm);
  z-index:200;font-weight:600;transition:transform .2s var(--ease);
}
.skip-link:focus{transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);font-weight:700;
  color:var(--tinte);line-height:1.06;letter-spacing:-.03em;
  text-wrap:balance;
}
h3,h4{line-height:1.18;letter-spacing:-.015em}
h1{font-size:var(--t-4xl)}
h2{font-size:var(--t-3xl)}
h3{font-size:var(--t-xl)}
h4{font-size:var(--t-lg);letter-spacing:-.01em}
p{text-wrap:pretty}
strong{color:var(--tinte);font-weight:600}

.kicker{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-text);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gruen-dunkel);
  margin-bottom:1rem;
}
.kicker::before{
  content:"";width:26px;height:2px;background:var(--gruen);border-radius:2px;flex:none;
}
.lead{font-size:var(--t-lg);color:var(--grau);line-height:1.6}
.hg{color:var(--gruen-dunkel)}

/* ---------- Layout ---------- */
.wrap{width:min(100% - var(--pad)*2,var(--breite));margin-inline:auto}
.wrap-eng{width:min(100% - var(--pad)*2,var(--breite-eng));margin-inline:auto}
.sektion{padding-block:var(--luft)}
.sektion--hell{background:var(--papier-2)}
.sektion--tief{background:var(--gruen-hell)}
.sektion--dunkel{background:var(--tinte);color:#D9DED7}
.sektion--dunkel h2,.sektion--dunkel h3{color:#fff}
.kopf{max-width:56ch;margin-bottom:clamp(2.2rem,5vw,3.5rem)}
.kopf--mitte{margin-inline:auto;text-align:center}
.kopf--mitte .kicker{justify-content:center}
.kopf p{margin-top:1rem}

.raster{display:grid;gap:clamp(1rem,2.5vw,1.6rem)}
@media(min-width:640px){.raster--2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:640px){.raster--3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.raster--3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:640px){.raster--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.raster--4{grid-template-columns:repeat(4,1fr)}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--font-text);font-weight:600;font-size:var(--t-sm);
  padding:.95rem 1.6rem;border-radius:var(--radius-sm);border:2px solid transparent;
  cursor:pointer;text-decoration:none;line-height:1.2;
  min-height:48px; /* Touch-Ziel */
  transition:background .18s var(--ease),border-color .18s var(--ease),
             color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--primaer{background:var(--gruen);color:#fff;box-shadow:var(--schatten-1)}
.btn--primaer:hover{background:var(--gruen-dunkel);box-shadow:var(--schatten-2)}
.btn--sekundaer{background:var(--papier);color:var(--tinte);border-color:var(--linie-stark)}
.btn--sekundaer:hover{border-color:var(--gruen);color:var(--gruen-dunkel);background:var(--gruen-hell)}
.btn--geist{background:transparent;color:var(--tinte);border-color:transparent;padding-inline:.5rem}
.btn--geist:hover{color:var(--gruen-dunkel)}
.btn--wa{background:#25D366;color:#0A2E17}
.btn--wa:hover{background:#1FBA59}
.btn--gross{padding:1.15rem 2rem;font-size:var(--t-base);min-height:56px}
.btn--voll{width:100%}
.btn svg{width:19px;height:19px;flex:none}

.btn-gruppe{display:flex;flex-wrap:wrap;gap:.8rem}
@media(max-width:479px){.btn-gruppe .btn{width:100%}}

/* ---------- Header ---------- */
.kopfleiste{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s;
}
.kopfleiste.ist-gescrollt{border-bottom-color:var(--linie);box-shadow:var(--schatten-1)}
.kopfleiste__innen{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:74px;
}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:40px;width:auto}
@media(min-width:768px){.logo img{height:46px}}

.nav{display:none}
@media(min-width:1060px){
  .nav{display:flex;align-items:center;gap:.35rem}
  .nav a{
    color:var(--tinte-2);text-decoration:none;font-size:var(--t-sm);font-weight:500;
    padding:.6rem .8rem;border-radius:var(--radius-sm);transition:background .16s,color .16s;
  }
  .nav a:hover,.nav a[aria-current="page"]{background:var(--gruen-hell);color:var(--gruen-tief)}
}
.kopf-aktion{display:none}
@media(min-width:1060px){.kopf-aktion{display:flex;align-items:center;gap:.6rem}}

/* Dropdown Leistungen */
.nav__mehr{position:relative}
.nav__mehr>button{
  display:flex;align-items:center;gap:.35rem;background:none;border:0;cursor:pointer;
  color:var(--tinte-2);font-size:var(--t-sm);font-weight:500;
  padding:.6rem .8rem;border-radius:var(--radius-sm);
}
.nav__mehr>button:hover{background:var(--gruen-hell);color:var(--gruen-tief)}
.nav__mehr>button svg{width:14px;height:14px;transition:transform .2s var(--ease)}
.nav__mehr[data-offen="true"]>button svg{transform:rotate(180deg)}
.nav__panel{
  position:absolute;top:calc(100% + .5rem);left:50%;transform:translateX(-50%) translateY(-6px);
  background:#fff;border:1px solid var(--linie);border-radius:var(--radius);
  box-shadow:var(--schatten-3);padding:.6rem;
  display:grid;grid-template-columns:repeat(2,minmax(200px,1fr));gap:.15rem;
  opacity:0;visibility:hidden;transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.nav__mehr[data-offen="true"] .nav__panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav__panel a{display:block;padding:.6rem .75rem;font-size:var(--t-sm);white-space:nowrap}

/* Mobile Menue */
.burger{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;background:none;border:0;cursor:pointer;
  border-radius:var(--radius-sm);flex:none;
}
@media(min-width:1060px){.burger{display:none}}
.burger:hover{background:var(--papier-3)}
.burger span{
  display:block;width:23px;height:2px;background:var(--tinte);border-radius:2px;
  position:relative;transition:background .16s;
}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:23px;height:2px;background:var(--tinte);
  border-radius:2px;transition:transform .24s var(--ease),top .24s var(--ease);
}
.burger span::before{top:-7px}
.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.mobilmenu{
  position:fixed;inset:74px 0 0;background:#fff;z-index:99;
  overflow-y:auto;overscroll-behavior:contain;
  padding:1.4rem var(--pad) 6rem;
  transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.mobilmenu[data-offen="true"]{opacity:1;visibility:visible;transform:translateY(0)}
@media(min-width:1060px){.mobilmenu{display:none}}
.mobilmenu a{
  display:block;padding:.95rem .25rem;font-size:var(--t-lg);font-weight:600;
  color:var(--tinte);text-decoration:none;border-bottom:1px solid var(--linie);
}
.mobilmenu a:hover{color:var(--gruen-dunkel)}
.mobilmenu__gruppe{margin-top:1.6rem}
.mobilmenu__titel{
  font-size:var(--t-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grau-hell);padding:.4rem .25rem;
}
.mobilmenu__gruppe a{font-size:var(--t-base);font-weight:500;padding:.8rem .25rem}
.mobilmenu__aktion{margin-top:2rem;display:grid;gap:.7rem}
body.menu-offen{overflow:hidden}

/* ============================================================
   HERO – Nutzen sofort sichtbar, ohne Scrollen
   ============================================================ */
.hero{position:relative;background:var(--papier);overflow:hidden;isolation:isolate}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(1100px 620px at 78% -8%,var(--blau-hell) 0%,transparent 62%),
    radial-gradient(880px 520px at 4% 108%,var(--gruen-hell) 0%,transparent 60%);
}
.hero__innen{
  display:grid;gap:clamp(2.2rem,5vw,3.5rem);align-items:center;
  padding-block:clamp(1.8rem,3.5vw,2.8rem) clamp(2.5rem,6vw,4rem);
}
@media(min-width:940px){
  .hero__innen{grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,4rem)}
}
.hero h1{margin-bottom:.9rem;font-size:clamp(2rem,1.3rem + 2.6vw,3.55rem);line-height:1.04}
@media(max-width:480px){.hero__lead{font-size:var(--t-sm);margin-bottom:1.1rem}.nutzen li{font-size:var(--t-sm)}}
.hero__lead{font-size:var(--t-base);color:var(--grau);max-width:52ch;margin-bottom:1.35rem}

/* Nutzenliste direkt im Header – der Kern der Anforderung */
.nutzen{display:grid;gap:.5rem;margin-bottom:1.4rem}
.nutzen li{
  display:flex;align-items:flex-start;gap:.75rem;
  font-size:var(--t-base);color:var(--tinte-2);font-weight:500;line-height:1.45;
}
.nutzen__haken{
  flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--gruen);color:#fff;
  display:grid;place-items:center;margin-top:.1rem;
}
.nutzen__haken svg{width:13px;height:13px}

.hero__beleg{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.4rem;
  margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--linie);
  font-size:var(--t-sm);color:var(--grau);
}
.hero__beleg span{display:inline-flex;align-items:center;gap:.45rem}
.hero__beleg svg{width:17px;height:17px;color:var(--gruen);flex:none}

.hero__bild{position:relative}
.hero__bild img{
  width:100%;border-radius:var(--radius-lg);box-shadow:var(--schatten-3);
  aspect-ratio:4/5;object-fit:cover;background:var(--papier-3);
}
@media(min-width:940px){.hero__bild img{aspect-ratio:3/4}}
/* Zweites, kleineres Bild ueberlappt das Hauptbild: Collage statt Kachel */
.hero__bild--zwei{
  position:absolute;right:clamp(-.75rem,-1.5vw,-1.2rem);top:clamp(1.2rem,4vw,3rem);
  width:min(42%,230px);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--schatten-3);border:4px solid var(--papier);
  transform:rotate(2.5deg);
}
.hero__bild--zwei img{aspect-ratio:4/3;object-fit:cover;width:100%;box-shadow:none;border-radius:0}
@media(max-width:939px){.hero__bild--zwei{width:40%;top:auto;bottom:-1rem;right:-.4rem}}
/* Wort-fuer-Wort-Einblendung der Headline. Reine CSS-Animation, damit die
   Ueberschrift nicht vom Laden des Skripts abhaengt. */
.wort{display:inline-block;animation:wortRein .6s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes wortRein{from{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wort{animation:none}}

/* Schwebende Karte am Heldenbild */
.hero__karte{
  position:absolute;left:clamp(-.5rem,-1vw,0rem);bottom:clamp(1rem,3vw,2rem);
  background:#fff;border-radius:var(--radius);box-shadow:var(--schatten-3);
  padding:1rem 1.15rem;display:flex;align-items:center;gap:.85rem;max-width:min(88%,300px);
}
.hero__karte strong{display:block;font-size:var(--t-sm);line-height:1.3}
.hero__karte span{font-size:var(--t-xs);color:var(--grau);line-height:1.4}
.hero__karte__icon{
  flex:none;width:42px;height:42px;border-radius:11px;background:var(--gruen-hell);
  color:var(--gruen-dunkel);display:grid;place-items:center;
}
.hero__karte__icon svg{width:21px;height:21px}

/* ============================================================
   VORHER / NACHHER
   Zwei Modi, weil nur ein Bildpaar deckungsgleich fotografiert ist.
   ============================================================ */

/* Modus A: echter Wischer (nur bei identischer Kameraposition) */
.wischer{
  position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--schatten-2);background:var(--papier-3);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;
  aspect-ratio:4/3;
}
.wischer img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;
}
.wischer__nachher{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos,50%))}
.wischer__griff{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;
  background:#fff;box-shadow:0 0 0 1px rgba(18,22,17,.18);
  transform:translateX(-50%);pointer-events:none;
}
.wischer__knopf{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:#fff;
  box-shadow:var(--schatten-2);display:grid;place-items:center;
  color:var(--tinte);
}
.wischer__knopf svg{width:22px;height:22px}
.wischer__regler{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;
}
.wischer:has(.wischer__regler:focus-visible) .wischer__griff{background:var(--blau)}
.wischer:has(.wischer__regler:focus-visible) .wischer__knopf{outline:3px solid var(--blau);outline-offset:2px}
.wischer__tag{
  position:absolute;top:.85rem;padding:.32rem .7rem;border-radius:100px;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  backdrop-filter:blur(6px);pointer-events:none;
}
.wischer__tag--v{left:.85rem;background:rgba(18,22,17,.62);color:#fff}
.wischer__tag--n{right:.85rem;background:rgba(64,120,59,.88);color:#fff}

/* Modus B: ehrlicher Nebeneinander-Vergleich */
.vergleich{display:grid;gap:.6rem;grid-template-columns:1fr 1fr}
@media(max-width:560px){.vergleich{grid-template-columns:1fr}}
.vergleich figure{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;background:var(--papier-3)}
.vergleich img{width:100%;aspect-ratio:3/4;object-fit:cover}
.vergleich figcaption{
  position:absolute;top:.6rem;left:.6rem;padding:.3rem .65rem;border-radius:100px;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#fff;
}
.vergleich .v figcaption{background:rgba(18,22,17,.66)}
.vergleich .n figcaption{background:rgba(64,120,59,.9)}
.vergleich__text{
  grid-column:1/-1;font-size:var(--t-sm);color:var(--grau);margin-top:.3rem;
}

/* ============================================================
   Karten & Listen
   ============================================================ */
.karte{
  background:#fff;border:1px solid var(--linie);border-radius:var(--radius);
  padding:clamp(1.35rem,3vw,1.85rem);
  display:flex;flex-direction:column;gap:.7rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease);
}
a.karte{text-decoration:none;color:inherit}
a.karte:hover{border-color:var(--gruen-rand);box-shadow:var(--schatten-2);transform:translateY(-3px)}
.karte__icon{
  width:48px;height:48px;border-radius:12px;background:var(--gruen-hell);
  color:var(--gruen-dunkel);display:grid;place-items:center;margin-bottom:.3rem;
}
.karte__icon svg{width:24px;height:24px}
.karte h3{font-size:var(--t-lg)}
.karte p{font-size:var(--t-sm);color:var(--grau);flex:1}
.karte__mehr{
  display:inline-flex;align-items:center;gap:.4rem;font-size:var(--t-sm);font-weight:600;
  color:var(--gruen-dunkel);margin-top:.3rem;
}
.karte__mehr svg{width:15px;height:15px;transition:transform .2s var(--ease)}
a.karte:hover .karte__mehr svg{transform:translateX(4px)}

.haken-liste{display:grid;gap:.65rem}
.haken-liste li{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--t-base)}
.haken-liste li::before{
  content:"";flex:none;width:21px;height:21px;margin-top:.2rem;border-radius:50%;
  background:var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23FFFFFF'%3E%3Cpath fill-rule='evenodd' d='M16.7 5.3a1 1 0 010 1.4l-7.5 7.5a1 1 0 01-1.4 0L3.3 9.7a1 1 0 111.4-1.4l3.8 3.8 6.8-6.8a1 1 0 011.4 0z' clip-rule='evenodd'/%3E%3C/svg%3E") center/13px no-repeat;
}
/* Auf dunklem Grund bleibt der Kreis grün, damit der Haken überall gleich aussieht */
.sektion--dunkel .haken-liste li::before,.szene__panel .haken-liste li::before{background-color:var(--gruen)}

/* Ablauf-Schritte */
.schritte{display:grid;gap:clamp(1.2rem,3vw,2rem);counter-reset:s}
@media(min-width:760px){.schritte{grid-template-columns:repeat(3,1fr);max-width:1000px;margin-inline:auto}}
.schritt{position:relative;padding-top:3.4rem}
.schritt::before{
  counter-increment:s;content:counter(s);
  position:absolute;top:0;left:0;width:48px;height:48px;border-radius:50%;
  background:var(--gruen);color:#fff;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:1.15rem;
}
@media(min-width:760px){
  .schritt::after{
    content:"";position:absolute;top:24px;left:60px;right:-12px;height:2px;
    background:linear-gradient(90deg,var(--gruen-rand),transparent);
  }
  .schritt:last-child::after{display:none}
}
.schritt h3{font-size:var(--t-lg);margin-bottom:.4rem}
.schritt p{font-size:var(--t-sm);color:var(--grau)}

/* ============================================================
   FORMULAR
   ============================================================ */
.formular{display:grid;gap:1.1rem}
.feld{display:grid;gap:.4rem}
.feld label{font-size:var(--t-sm);font-weight:600;color:var(--tinte)}
.feld label .pflicht{color:var(--warn);margin-left:.15rem}
.feld input,.feld textarea,.feld select{
  width:100%;padding:.85rem 1rem;border:1.5px solid var(--linie-stark);
  border-radius:var(--radius-sm);background:#fff;font-size:var(--t-base);
  min-height:50px;transition:border-color .16s,box-shadow .16s;
}
.feld textarea{min-height:132px;resize:vertical;line-height:1.6}
.feld input:hover,.feld textarea:hover,.feld select:hover{border-color:var(--grau-hell)}
.feld input:focus,.feld textarea:focus,.feld select:focus{
  outline:none;border-color:var(--gruen);box-shadow:0 0 0 3px rgba(64,120,59,.16);
}
.feld input[aria-invalid="true"],.feld textarea[aria-invalid="true"]{border-color:var(--warn)}
.feld__hilfe{font-size:var(--t-xs);color:var(--grau)}
.feld__fehler{font-size:var(--t-xs);color:var(--warn);font-weight:500;display:none}
.feld input[aria-invalid="true"] ~ .feld__fehler,
.feld textarea[aria-invalid="true"] ~ .feld__fehler,
.einwilligung input[aria-invalid="true"] ~ .feld__fehler{display:block}
.einwilligung input[aria-invalid="true"]{outline:2px solid var(--warn);outline-offset:2px}
@media(min-width:640px){.feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}}

/* Leistungs-Checkboxen */
.wahl{display:grid;gap:.5rem}
@media(min-width:560px){.wahl{grid-template-columns:1fr 1fr}}
.wahl label{
  display:flex;align-items:center;gap:.65rem;padding:.7rem .9rem;
  border:1.5px solid var(--linie);border-radius:var(--radius-sm);cursor:pointer;
  font-size:var(--t-sm);font-weight:500;min-height:48px;
  transition:border-color .16s,background .16s;
}
.wahl label:hover{border-color:var(--gruen-rand);background:var(--gruen-hell)}
.wahl input{width:19px;height:19px;accent-color:var(--gruen);flex:none;min-height:0}
.wahl input:checked ~ span{color:var(--gruen-tief);font-weight:600}
.wahl label:has(input:checked){border-color:var(--gruen);background:var(--gruen-hell)}

/* Einwilligung */
.einwilligung{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--t-sm);color:var(--grau)}
.einwilligung input{width:20px;height:20px;accent-color:var(--gruen);flex:none;margin-top:.15rem}

/* Honeypot gegen Bots – fuer Menschen unsichtbar, kein Captcha noetig */
.hp{position:absolute!important;left:-9999px!important;opacity:0!important;pointer-events:none}

/* Nicht display:none - sonst meldet der Bildschirmleser spaetere Aenderungen nie an.
   Stattdessen bleibt das Element im Baum und wird nur optisch neutralisiert. */
.formular__status{
  padding:1rem 1.15rem;border-radius:var(--radius-sm);font-size:var(--t-sm);font-weight:500;
}
.formular__status:empty{padding:0;border:0;background:none}
.formular__status[data-typ="ok"]{background:var(--gruen-hell);color:var(--gruen-tief);border:1px solid var(--gruen-rand)}
.formular__status[data-typ="fehler"]{background:var(--warn-hell);color:var(--warn);border:1px solid #EBC7B0}

/* Kontakt-Layout */
.kontakt{display:grid;gap:clamp(2rem,4vw,3rem)}
@media(min-width:900px){.kontakt{grid-template-columns:1fr 1fr;align-items:start}}
.kontakt__box{
  background:var(--papier-2);border:1px solid var(--linie);
  border-radius:var(--radius);padding:clamp(1.4rem,3vw,2rem);
}
.kontakt__weg{
  display:flex;gap:.9rem;align-items:flex-start;padding:1rem 0;
  border-bottom:1px solid var(--linie);text-decoration:none;color:inherit;
}
.kontakt__weg:last-of-type{border-bottom:0}
.kontakt__weg__icon{
  flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--gruen-hell);color:var(--gruen-dunkel);
}
.kontakt__weg--wa .kontakt__weg__icon{background:#E4F9EC;color:#128C46}
.kontakt__weg__icon svg{width:22px;height:22px}
.kontakt__weg strong{display:block;font-size:var(--t-base)}
.kontakt__weg span{font-size:var(--t-sm);color:var(--grau)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:grid;gap:.6rem}
.faq details{
  border:1px solid var(--linie);border-radius:var(--radius);background:#fff;
  transition:border-color .18s,box-shadow .18s;
}
.faq details[open]{border-color:var(--gruen-rand);box-shadow:var(--schatten-1)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.15rem 3.2rem 1.15rem 1.25rem;
  font-family:var(--font-display);font-weight:600;font-size:var(--t-base);
  color:var(--tinte);position:relative;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:1.25rem;top:1.45rem;width:13px;height:13px;
  border-right:2.5px solid var(--gruen);border-bottom:2.5px solid var(--gruen);
  transform:rotate(45deg);transition:transform .22s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.6rem}
.faq summary:hover{color:var(--gruen-dunkel)}
.faq__inhalt{padding:0 1.25rem 1.3rem;font-size:var(--t-sm);color:var(--grau);line-height:1.68}
.faq__inhalt p + p{margin-top:.7rem}

/* ============================================================
   Kundenstimmen (bis zur Freigabe ausgeblendet)
   ============================================================ */
.stimme{
  background:#fff;border:1px solid var(--linie);border-radius:var(--radius);
  padding:clamp(1.4rem,3vw,1.9rem);display:flex;flex-direction:column;gap:1rem;
}
.stimme blockquote{font-size:var(--t-base);color:var(--tinte-2);line-height:1.65;flex:1}
.stimme blockquote::before{
  content:"";display:block;width:30px;height:3px;background:var(--gruen);
  border-radius:2px;margin-bottom:.9rem;
}
.stimme__wer{font-size:var(--t-sm)}
.stimme__wer strong{display:block;color:var(--tinte)}
.stimme__wer span{color:var(--grau)}

/* ============================================================
   Abschluss-Aufruf
   ============================================================ */
.abschluss{
  background:linear-gradient(135deg,var(--gruen-tief) 0%,var(--gruen-dunkel) 55%,#2B5C5E 100%);
  color:#E7EEE5;border-radius:var(--radius-lg);
  padding:clamp(2.2rem,6vw,4rem) clamp(1.4rem,5vw,3.5rem);text-align:center;
}
.abschluss h2{color:#fff;margin-bottom:.9rem}
.abschluss p{max-width:52ch;margin-inline:auto;margin-bottom:2rem;color:#C9D6C5}
.abschluss .btn--sekundaer{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.abschluss .btn--sekundaer:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.abschluss .btn--primaer{background:#fff;color:var(--gruen-tief)}
.abschluss .btn--primaer:hover{background:var(--gruen-hell)}

/* ============================================================
   Footer
   ============================================================ */
.fuss{background:var(--tinte);color:#A8B2A5;padding-block:clamp(3rem,6vw,4.5rem) 2rem;font-size:var(--t-sm)}
.fuss__raster{display:grid;gap:2.2rem}
@media(min-width:760px){.fuss__raster{grid-template-columns:1.4fr 1fr 1fr}}
@media(min-width:1040px){.fuss__raster{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.fuss img{height:40px;width:auto;margin-bottom:1rem}
.fuss h4{color:#fff;font-size:var(--t-sm);letter-spacing:.09em;text-transform:uppercase;margin-bottom:1rem}
.fuss a{color:#A8B2A5;text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss li{padding:.3rem 0}
.fuss__unten{
  margin-top:clamp(2.2rem,5vw,3.5rem);padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.11);
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;
  font-size:var(--t-xs);color:#7C8779;
}

/* ============================================================
   Feste Aktionsleiste auf dem Smartphone
   Immer erreichbar – der wichtigste Conversion-Hebel mobil
   ============================================================ */
.mobil-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:98;
  display:grid;grid-template-columns:1.45fr 1fr;gap:.55rem;
  padding:.6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--linie);
  transform:translateY(110%);transition:transform .3s var(--ease);
}
.mobil-cta.ist-sichtbar{transform:translateY(0)}
@media(min-width:1060px){.mobil-cta{display:none}}
.mobil-cta .btn{padding:.8rem 1rem;font-size:var(--t-sm)}
@media(max-width:1059px){body{padding-bottom:calc(90px + env(safe-area-inset-bottom))}}

/* ============================================================
   Einblenden beim Scrollen
   ============================================================ */
.js .rein{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rein.ist-da{opacity:1;transform:none}
.rein:nth-child(2){transition-delay:.07s}
.rein:nth-child(3){transition-delay:.14s}
.rein:nth-child(4){transition-delay:.21s}
@media (prefers-reduced-motion:reduce){.rein{opacity:1;transform:none}}

/* ============================================================
   Rechtstexte
   ============================================================ */
.recht{padding-block:var(--luft)}
.recht h1{font-size:var(--t-2xl);margin-bottom:2rem}
.recht h2{font-size:var(--t-lg);margin-top:2.4rem;margin-bottom:.8rem}
.recht h3{font-size:var(--t-base);margin-top:1.6rem;margin-bottom:.5rem}
.recht p,.recht li{font-size:var(--t-sm);line-height:1.75;color:var(--tinte-2)}
.recht p + p{margin-top:.85rem}
.recht ul{list-style:disc;padding-left:1.3rem;margin:.7rem 0}
.recht li{padding:.2rem 0}
.recht address{font-style:normal;line-height:1.8}
.platzhalter{
  background:#FFF4D6;color:#7A5A00;padding:.1rem .4rem;border-radius:4px;
  font-weight:600;font-size:.92em;
}

/* Standort-Chips */
.orte{display:flex;flex-wrap:wrap;gap:.5rem}
.orte a{
  display:inline-block;padding:.5rem .95rem;border:1px solid var(--linie-stark);
  border-radius:100px;font-size:var(--t-sm);text-decoration:none;color:var(--tinte-2);
  transition:border-color .16s,background .16s,color .16s;
}
.orte a:hover{border-color:var(--gruen);background:var(--gruen-hell);color:var(--gruen-tief)}

@media print{
  .kopfleiste,.mobil-cta,.szene,.abschluss,.fuss{display:none}
  body{color:#000}
}





.fuss__h{color:#fff;font-family:var(--font-display);font-size:var(--t-sm);letter-spacing:.09em;text-transform:uppercase;margin-bottom:1rem}
.mobilmenu__uebersicht{font-size:var(--t-base)!important;color:var(--gruen-dunkel)!important}
.nav__mehr{display:flex;align-items:center}
.nav__mehr>button{padding-inline:.35rem}


/* ============================================================
   Vorteil-Hervorhebung
   Beim Scrollen wird nicht gelesen, sondern gescannt. Der Nutzen
   muss deshalb optisch aus dem Fließtext herausspringen.
   ============================================================ */
.vorteil{
  font-weight:600;color:var(--tinte);
  background-image:linear-gradient(180deg,transparent 56%,rgba(64,120,59,.22) 56%,rgba(64,120,59,.22) 94%,transparent 94%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding-inline:.1em;
}
.sektion--dunkel .vorteil,.szene__panel .vorteil{
  color:#fff;
  background-image:linear-gradient(180deg,transparent 56%,rgba(120,190,110,.32) 56%,rgba(120,190,110,.32) 94%,transparent 94%);
}
.abschluss .vorteil{color:#fff;background-image:linear-gradient(180deg,transparent 56%,rgba(255,255,255,.24) 56%,rgba(255,255,255,.24) 94%,transparent 94%)}

/* ============================================================
   Vertrauensbalken über der Kopfleiste
   Nur belegbare Aussagen. Keine erfundenen Bewertungen.
   ============================================================ */
.vertrauen{background:var(--tinte);color:#C6CFC3;font-size:var(--t-xs)}
.vertrauen__innen{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.35rem 1.6rem;padding:.5rem 0;text-align:center;
}
.vertrauen span{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.vertrauen svg{width:14px;height:14px;color:var(--gruen);flex:none}
.vertrauen strong{color:#fff;font-weight:600}
@media(max-width:700px){
  /* Nichts ausblenden, sondern umbrechen. Vorher fielen ausgerechnet die
     beiden staerksten Aussagen weg. */
  .vertrauen__innen{
    display:grid;grid-template-columns:1fr 1fr;
    gap:.3rem 1rem;font-size:11px;text-align:left;padding:.55rem 0;
  }
  /* Als Fliesstext setzen, nicht als Flex: sonst bricht jedes Wort einzeln um */
  .vertrauen span{display:inline;white-space:normal;line-height:1.35}
  .vertrauen svg{display:inline-block;vertical-align:-2px;margin-right:.3rem}
}
@media(max-width:420px){.vertrauen__innen{font-size:10.5px;gap:.2rem .6rem;padding:.45rem 0}.vertrauen svg{width:12px;height:12px}}
@media(max-width:340px){.vertrauen__innen{grid-template-columns:1fr}}

/* ============================================================
   Werkzeug-Zeiger über der Szene
   Beim Überfahren eines Punktes zeigt der Zeiger das Werkzeug,
   das an dieser Stelle zum Einsatz kommt.
   ============================================================ */
.werkzeug{
  position:fixed;top:0;left:0;z-index:130;pointer-events:none;
  width:60px;height:60px;margin:-30px 0 0 -30px;
  border-radius:50%;background:var(--gruen);color:#fff;
  display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  opacity:0;transform:scale(.5);
  transition:opacity .2s var(--ease),transform .25s var(--ease);
}
.werkzeug.ist-da{opacity:1;transform:scale(1)}
.werkzeug svg{width:30px;height:30px}
@media (hover:none),(prefers-reduced-motion:reduce){.werkzeug{display:none}}
body.werkzeug-an .szene .hotspot{cursor:none}


/* ============================================================
   INTERAKTIVE SZENE
   Die Sektion ist bewusst hoch, die Bühne bleibt beim Scrollen stehen.
   Dadurch steuert die Scrollposition die Kamerafahrt: erst heranfahren
   an den Eingang, dann Wechsel nach innen.
   ============================================================ */
.szene{position:relative;background:var(--tinte)}
.szene__fahrt{position:relative;height:var(--szene-hoehe,300vh)}
.szene__buehne{position:sticky;top:0;height:100vh;overflow:hidden}
.szene__rahmen{position:absolute;inset:0}

.szene__ebene{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),visibility .4s;
}
.szene__ebene{pointer-events:none}
/* Nicht die Klasse steuert die Klickbarkeit, sondern ein eigener Zustand,
   den das Skript erst nach dem Ende der Ueberblendung setzt. Sonst sind
   waehrend der Blende die sichtbaren Punkte tot und die unsichtbaren aktiv. */
.szene__ebene.ist-aktiv{opacity:1;visibility:visible}
.szene__ebene[data-bedienbar="ja"]{pointer-events:auto}
.szene__ebene picture{display:block;position:absolute;inset:0}
.szene__ebene{overflow:hidden}
/* Bild und Punkte teilen sich EINE Transformation. Getrennt transformiert
   beziehen sich Ursprung und Verschiebung auf unterschiedlich grosse Elemente,
   und die Punkte driften beim Heranfahren von ihrem Bildelement weg. */
.szene__kamera{
  position:absolute;inset:0;
  transform:scale(var(--zoom,1)) translate(var(--vx,0%),var(--vy,0%));
  transform-origin:var(--fokus-x,70%) var(--fokus-y,55%);
  will-change:transform;
}
.szene__ebene img{width:100%;height:100%;object-fit:cover}

/* Verlauf, damit Überschrift und Schilder über hellem Himmel lesbar bleiben */
.szene__verlauf{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(12,16,11,.9) 0%,rgba(12,16,11,.62) 22%,rgba(12,16,11,.2) 38%,rgba(12,16,11,0) 50%),
    linear-gradient(0deg,rgba(12,16,11,.55) 0%,rgba(12,16,11,0) 28%);
}

.szene__text{
  position:absolute;top:0;left:0;right:0;padding-top:clamp(6.5rem,13vh,8.5rem);
  pointer-events:none;text-align:center;
  opacity:var(--text-sicht,1);transform:translateY(calc((1 - var(--text-sicht,1)) * -24px));
}
/* Eigene Flaeche statt nur eines Verlaufs: ueber einer hellen Fassade
   reicht ein Verlauf fuer 4,5:1 nicht aus. */
.szene__text .wrap{
  max-width:min(100% - var(--pad)*2, 64ch);
  background:rgba(12,16,11,.88);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3.5vw,2.2rem) clamp(1.4rem,3vw,2.4rem);
}
/* Bei flachen Fenstern wuerde der Textkasten die oberen Punkte verdecken */
@media(min-width:1024px) and (max-height:760px){
  .szene__text{padding-top:5.5rem}
  .szene__text .wrap{padding-block:1.1rem}
  .szene__text p{display:none}
}
.szene__text .kicker{color:#8FBF88;justify-content:center}
.szene__text h2{color:#fff;margin-bottom:.9rem;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.szene__text p{
  color:#D6DDD3;max-width:56ch;margin-inline:auto;font-size:var(--t-base);
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}
.szene__text strong{color:#fff}

/* ---------- Punkte ---------- */
.szene__punkte{position:absolute;inset:0}
.hotspot.ist-am-rand{opacity:0!important;pointer-events:none}
/* Die Punkte selbst sollen dabei ihre Groesse behalten */
.szene__punkte .hotspot{transform:translate(-50%,-50%) scale(calc(1 / var(--zoom,1)))}
.hotspot{
  position:absolute;left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);
  min-width:48px;min-height:48px;padding:0;
  background:none;border:0;cursor:pointer;
  display:grid;place-items:center;
  opacity:0;transition:opacity .45s var(--ease);
}
.szene__ebene.ist-aktiv .hotspot{opacity:1}
.szene__ebene.ist-aktiv .hotspot:nth-child(2){transition-delay:.1s}
.szene__ebene.ist-aktiv .hotspot:nth-child(3){transition-delay:.2s}
.szene__ebene.ist-aktiv .hotspot:nth-child(4){transition-delay:.3s}

.hotspot__ring{
  position:absolute;width:22px;height:22px;border-radius:50%;
  background:var(--gruen);opacity:.5;
  animation:puls 2.8s var(--ease) infinite;
}
.hotspot:nth-child(2) .hotspot__ring{animation-delay:.7s}
.hotspot:nth-child(3) .hotspot__ring{animation-delay:1.4s}
.hotspot:nth-child(4) .hotspot__ring{animation-delay:2.1s}
@keyframes puls{
  0%{transform:scale(.8);opacity:.55}
  70%,100%{transform:scale(2.6);opacity:0}
}
.hotspot__kern{
  position:relative;width:20px;height:20px;border-radius:50%;
  background:var(--gruen);border:2.5px solid #fff;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
  transition:transform .2s var(--ease),background .2s var(--ease);
}
.hotspot__schild{
  position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  background:rgba(14,18,13,.9);color:#fff;
  padding:.34rem .7rem;border-radius:100px;white-space:nowrap;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.01em;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(4px);
  opacity:0;transition:opacity .2s var(--ease),transform .2s var(--ease);
  pointer-events:none;
}
.hotspot:hover .hotspot__kern,.hotspot:focus-visible .hotspot__kern{transform:scale(1.35);background:#fff}
.hotspot:hover .hotspot__schild,.hotspot:focus-visible .hotspot__schild{opacity:1;transform:translateX(-50%) translateY(-3px)}
.hotspot:focus-visible{outline:3px solid var(--blau);outline-offset:4px;border-radius:50%}
@media(min-width:1024px) and (hover:hover){.hotspot__schild{opacity:.92}}

/* ---------- Stufenanzeige ---------- */
.szene__stufen{
  position:absolute;left:50%;bottom:clamp(1.5rem,4vh,2.6rem);transform:translateX(-50%);
  display:flex;gap:1.4rem;font-size:var(--t-xs);color:rgba(255,255,255,.55);
  letter-spacing:.1em;text-transform:uppercase;pointer-events:none;
}
.szene__stufen span{position:relative;padding-bottom:.5rem;transition:color .4s var(--ease)}
.szene__stufen span::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:rgba(255,255,255,.2);transition:background .4s var(--ease);
}
.szene__stufen span.ist-aktiv{color:#fff}
.szene__stufen span.ist-aktiv::after{background:var(--gruen)}

/* ---------- Kleine Displays ----------
   Ohne feststehende Bühne gibt es keine Kamerafahrt. Statt einer zufällig
   sichtbaren Ebene werden beide Bilder untereinander gezeigt: erst außen,
   dann innen. Dieselbe Aussage, ohne Scroll-Mechanik. */
.szene__wahl{display:none;gap:.6rem;padding-bottom:clamp(2.5rem,6vw,4rem)}
@media(max-width:1023px){
  .szene{scroll-margin-top:80px}
  .szene__fahrt{height:auto}
  .szene__kamera{position:absolute;transform:none!important}
  .szene__text{opacity:1;transform:none}
  .szene__buehne{position:relative;height:auto}
  .szene__rahmen{position:relative;display:grid;gap:3px}
  .szene__ebene{
    position:relative;order:2;aspect-ratio:16/9;
    opacity:1!important;visibility:visible!important;
  }
  .szene__ebene picture{position:absolute;inset:0}
  .szene__ebene img{transform:none!important}
  .szene__punkte{display:none}
  .szene__verlauf{display:none}
  .szene__text{
    position:relative;order:1;padding:clamp(2.2rem,7vw,3rem) 0 1.8rem;
    background:var(--tinte);
  }
  .szene__stufen{display:none}
  .szene__wahl{display:grid;grid-template-columns:1fr 1fr;padding-top:1.6rem}
}
@media(max-width:430px){.szene__wahl{grid-template-columns:1fr}}
.szene__wahl button{
  display:flex;align-items:center;gap:.6rem;text-align:left;
  min-height:54px;padding:.8rem .95rem;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-sm);color:#E4E9E1;
  font-size:var(--t-sm);font-weight:600;line-height:1.3;
}
.szene__wahl button:hover{background:rgba(64,120,59,.3);border-color:var(--gruen)}
.szene__wahl button::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--gruen)}

@media (prefers-reduced-motion:reduce){
  /* Ohne Kamerafahrt gibt es keinen Ebenenwechsel. Beide Ebenen werden
     untereinander gezeigt und die Ersatzliste eingeblendet, sonst waeren
     die vier Themen der Innenebene ueberhaupt nicht erreichbar. */
  .szene__fahrt{height:auto!important}
  .szene__kamera{transform:none!important}
  .szene__text{opacity:1!important;transform:none!important}
  .szene__buehne{position:relative;height:auto}
  .szene__rahmen{position:relative;display:grid;gap:3px;aspect-ratio:auto}
  .szene__ebene{position:relative;order:2;aspect-ratio:16/9;opacity:1!important;visibility:visible!important}
  .szene__ebene picture{position:absolute;inset:0}
  .szene__ebene img,.szene__punkte{transform:none!important}
  .szene__punkte{display:none}
  .szene__verlauf{display:none}
  .szene__text{position:relative;order:1;padding:2.5rem 0 1.8rem;background:var(--tinte)}
  .szene__text .wrap{background:none;border:0;backdrop-filter:none;padding-inline:var(--pad)}
  .szene__stufen{display:none}
  .szene__wahl{display:grid;grid-template-columns:1fr 1fr;padding-top:1.6rem}
  .hotspot__ring{animation:none;opacity:.35}
}


/* ============================================================
   DETAIL-PANEL DER SZENE
   Diese Regeln waren beim Umbau der Szene versehentlich mit dem alten
   Block geloescht worden. Ohne sie sperrt ein Klick auf einen Punkt die
   Seite, ohne dass etwas Sichtbares passiert.
   ============================================================ */
.szene__schleier{
  position:fixed;inset:0;z-index:119;
  background:rgba(12,16,11,.62);
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),visibility .3s;
}
.szene__schleier[data-offen="true"]{opacity:1;visibility:visible}

.szene__panel{
  position:fixed;inset:auto 0 0 0;z-index:120;
  background:var(--papier);color:var(--tinte-2);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:0 -8px 40px rgba(12,16,11,.28);
  max-height:88vh;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:1.6rem var(--pad) calc(2rem + env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform .34s var(--ease-aus);
}
.szene__panel[data-offen="true"]{transform:translateY(0)}
@media(min-width:900px){
  .szene__panel{
    inset:0 0 0 auto;width:min(560px,92vw);
    border-radius:var(--radius-lg) 0 0 var(--radius-lg);
    max-height:100vh;padding:2.4rem 2.2rem;
    box-shadow:-8px 0 44px rgba(12,16,11,.28);
    transform:translateX(100%);
  }
  .szene__panel[data-offen="true"]{transform:translateX(0)}
}
.szene__panel img{width:100%;border-radius:var(--radius);margin-top:.4rem}
.szene__panel__zu{
  position:absolute;top:1rem;right:1rem;z-index:2;
  width:44px;height:44px;min-width:44px;min-height:44px;
  border-radius:50%;background:var(--papier-3);border:0;cursor:pointer;
  display:grid;place-items:center;color:var(--tinte);
  transition:background .16s var(--ease);
}
.szene__panel__zu:hover{background:var(--linie)}
.szene__panel__zu svg{width:18px;height:18px}
@media(max-width:899px){
  /* Auf dem Smartphone gibt es keine Escape-Taste. Ein zusaetzlicher Griff
     oben macht sofort erkennbar, dass sich das Panel schliessen laesst. */
  .szene__panel::before{
    content:"";position:sticky;top:0;display:block;
    width:44px;height:4px;margin:-.6rem auto 1rem;border-radius:2px;
    background:var(--linie-stark);
  }
}


/* Abschluss der Szene: der erste Anfrage-Knopf nach dem Hero */
.szene__abschluss{
  text-align:center;padding:clamp(2rem,5vw,3rem) 0 0;position:relative;z-index:2;
}
.szene__abschluss p{color:#C6CFC3;margin-bottom:1.2rem;font-size:var(--t-base)}


/* ============================================================
   LAUFBAND – Leistungen als Ticker unter dem Hero
   ============================================================ */
.laufband{
  overflow:hidden;border-block:1px solid var(--linie);background:var(--papier);
  padding:.85rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.laufband__spur{display:flex;width:max-content;gap:0;animation:laufen 42s linear infinite}
.laufband:hover .laufband__spur{animation-play-state:paused}
.laufband__spur span{
  display:inline-flex;align-items:center;gap:1.1rem;padding-inline:1.1rem;
  font-family:var(--font-display);font-weight:700;font-size:var(--t-lg);
  color:var(--tinte);letter-spacing:-.01em;white-space:nowrap;
}
.laufband__spur span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--gruen)}
@keyframes laufen{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .laufband__spur{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .laufband{mask-image:none;-webkit-mask-image:none}
}

/* ============================================================
   BENTO – Leistungen als Foto-Raster
   Desktop: asymmetrisches Raster. Smartphone: horizontales Wischen,
   weil eine Liste von 11 Kacheln untereinander niemand durchscrollt.
   ============================================================ */
.bento{
  display:grid;gap:clamp(.7rem,1.5vw,1rem);
  grid-template-columns:repeat(2,1fr);grid-auto-rows:220px;grid-auto-flow:dense;
}
@media(min-width:760px){.bento{grid-template-columns:repeat(3,1fr);grid-auto-rows:240px}}
@media(min-width:1040px){.bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:250px}}
.bento__kachel{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--papier-3);color:#fff;text-decoration:none;isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(1rem,2vw,1.4rem);min-height:100%;
}
.bento__kachel img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .9s var(--ease);
}
.bento__kachel::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,16,11,0) 30%,rgba(12,16,11,.55) 70%,rgba(12,16,11,.86) 100%);
  transition:opacity .4s var(--ease);
}
.bento__kachel:hover img{transform:scale(1.06)}
.bento__kachel h3{color:#fff;font-size:var(--t-lg);margin-bottom:.25rem;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.bento__kachel p{font-size:var(--t-sm);color:rgba(255,255,255,.82);line-height:1.4;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .45s var(--ease),opacity .35s var(--ease)}
.bento__kachel:hover p,.bento__kachel:focus-visible p{max-height:6em;opacity:1}
.bento__kachel .karte__mehr{color:#fff;margin-top:.5rem;font-size:var(--t-xs)}
.bento__kachel .karte__mehr svg{transition:transform .25s var(--ease)}
.bento__kachel:hover .karte__mehr svg{transform:translateX(5px)}
.bento__kachel--gross{grid-column:span 2;grid-row:span 2}
.bento__kachel--breit{grid-column:span 2}
@media(min-width:760px){.bento__kachel--gross h3{font-size:var(--t-2xl)}}
.bento__kachel--cta{
  background:var(--gruen);justify-content:center;align-items:flex-start;gap:.8rem;
}
.bento__kachel--cta::before{display:none}
.bento__kachel--cta h3{font-size:var(--t-xl)}
.bento__kachel--cta .btn{background:#fff;color:var(--gruen-tief)}
.bento__kachel--cta .btn:hover{background:var(--gruen-hell)}
.bento__kachel:focus-visible{outline:3px solid var(--blau);outline-offset:3px}
/* Auf dem Smartphone: Wischen statt Stapeln */
@media(max-width:759px){
  .bento{
    display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:.25rem var(--pad) 1rem;margin-inline:calc(var(--pad) * -1);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .bento::-webkit-scrollbar{display:none}
  .bento__kachel{flex:0 0 78%;max-width:320px;height:300px;scroll-snap-align:start;grid-column:auto;grid-row:auto}
  .bento__kachel p{max-height:6em;opacity:1}
  .bento__kachel--gross h3{font-size:var(--t-xl)}
}

/* ============================================================
   KARUSSELL – Wischgeste auf dem Smartphone, Pfeile am Desktop
   ============================================================ */
.karussell{position:relative}
.karussell__spur{
  display:flex;gap:clamp(.6rem,1.2vw,1rem);overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding-bottom:.25rem;
}
.karussell__spur::-webkit-scrollbar{display:none}
.karussell__spur figure{
  flex:0 0 min(86%,760px);margin:0;scroll-snap-align:center;
  border-radius:var(--radius-lg);overflow:hidden;background:var(--papier-3);position:relative;
}
@media(min-width:900px){.karussell__spur figure{flex-basis:min(70%,880px)}}
.karussell__spur img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.karussell__spur figcaption{
  position:absolute;left:.9rem;bottom:.9rem;padding:.35rem .75rem;border-radius:100px;
  background:rgba(12,16,11,.72);color:#fff;font-size:var(--t-xs);font-weight:600;backdrop-filter:blur(6px);
}
.karussell__pfeile{display:none;position:absolute;inset:0;pointer-events:none;align-items:center;justify-content:space-between;padding-inline:.5rem}
@media(min-width:900px) and (hover:hover){.karussell__pfeile{display:flex}}
.karussell__pfeil{
  pointer-events:all;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.94);color:var(--tinte);box-shadow:var(--schatten-2);
  display:grid;place-items:center;transition:transform .2s var(--ease),background .2s var(--ease);
}
.karussell__pfeil:hover{transform:scale(1.08);background:#fff}
.karussell__pfeil svg{width:22px;height:22px}
.karussell__punkte{display:flex;justify-content:center;gap:.45rem;margin-top:1rem}
.karussell__punkte button{
  width:10px;height:10px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--linie-stark);transition:transform .2s,background .2s;
  min-width:0;min-height:0;
}
.karussell__punkte button[aria-current="true"]{background:var(--gruen);transform:scale(1.3)}
/* Trefferflaeche fuer den Finger vergroessern, ohne den Punkt zu vergroessern */
.karussell__punkte button::before{content:"";display:block;width:32px;height:32px;margin:-11px}

/* ============================================================
   AUSSAGE-BLOCK – cinematisch, dunkel, mit Parallax
   ============================================================ */
.aussage{
  position:relative;overflow:hidden;background:var(--tinte);color:#fff;isolation:isolate;
  padding-block:clamp(5rem,14vw,10rem);
}
.aussage__bild{position:absolute;inset:-12% 0;z-index:-2}
.aussage__bild img{width:100%;height:100%;object-fit:cover;opacity:.42;
  transform:translateY(var(--parallax,0));will-change:transform}
.aussage::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,16,11,.6),rgba(12,16,11,.35) 50%,rgba(12,16,11,.75))}
.aussage h2{color:#fff;font-size:var(--t-5xl);max-width:16ch;margin-inline:auto;text-align:center}
.aussage p{color:#C9D2C6;text-align:center;max-width:52ch;margin:1.4rem auto 0;font-size:var(--t-lg)}
.aussage .hg{color:#8FBF88}

/* ============================================================
   ABLAUF als Zeitstrahl mit gezeichneter Linie
   ============================================================ */
@media(min-width:760px){
  .schritte{position:relative}
  .schritte::before{
    content:"";position:absolute;top:24px;left:24px;right:24px;height:2px;
    background:linear-gradient(90deg,var(--gruen) var(--linie-fortschritt,0%),var(--linie) var(--linie-fortschritt,0%));
    transition:--linie-fortschritt 1.4s var(--ease);
  }
  .schritt::after{display:none}
}
.schritt::before{transition:transform .5s var(--ease),background .5s var(--ease);transform:scale(.7);background:var(--linie-stark)}
.schritt.ist-da::before{transform:scale(1);background:var(--gruen)}

/* ============================================================
   Mikro-Interaktionen
   ============================================================ */
.btn svg:last-child{transition:transform .25s var(--ease)}
.btn:hover svg:last-child{transform:translateX(4px)}
.btn--primaer{position:relative;overflow:hidden}
.btn--primaer::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--ease);
}
.btn--primaer:hover::after{transform:translateX(120%)}
.rein--links{transform:translateX(-24px)}
.rein--zoom{transform:scale(.96)}
.js .rein.ist-da{transform:none}

/* Abschnittsnummern als Gestaltungselement */
.nummer{
  font-family:var(--font-display);font-weight:700;font-size:clamp(3rem,8vw,6rem);
  line-height:1;color:var(--gruen-hell);letter-spacing:-.04em;
  -webkit-text-stroke:1.5px var(--gruen-rand);
}

/* ============================================================
   RUNDE 3: Korrekturen nach Revision
   ============================================================ */
/* 15: Linie des Zeitstrahls zeichnet sich, statt zu springen */
@property --linie-fortschritt{syntax:'<percentage>';inherits:false;initial-value:0%}

/* 1: Ueberschriften duerfen mobil nie das Layout sprengen */
h1,h2,h3,.wort{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
.aussage h2{font-size:clamp(1.9rem,1.2rem + 4.2vw,6rem)}
@media(max-width:480px){.aussage h2{font-size:clamp(1.75rem,8.4vw,2.4rem);max-width:none}}

/* 5: Drehung der Collage wurde von .rein ueberschrieben */
.js .rein{transform:translateY(22px) var(--rein-extra,)}
.js .rein--links{transform:translateX(-24px) var(--rein-extra,)}
.js .rein--zoom{transform:scale(.96) var(--rein-extra,)}
.js .rein.ist-da{transform:var(--rein-extra,none)}
.hero__bild--zwei{--rein-extra:rotate(2.5deg)}

/* 3 + 5: Mobiler Erstbildschirm mit Foto, H1 und Button auf einen Blick */
@media(max-width:939px){
  .hero__innen{gap:1.1rem;padding-top:.9rem}
  .hero__bild{order:-1;position:relative;margin-inline:calc(var(--pad) * -1)}
  .hero__bild img{aspect-ratio:16/10;max-height:44vh;border-radius:0}
  .hero__bild--zwei{display:none}
  .hero__karte{left:auto;right:var(--pad);bottom:.9rem;max-width:min(70%,260px);padding:.7rem .9rem}
  .hero__innen > div:first-child{display:flex;flex-direction:column}
  .hero__innen .kicker{order:1;margin-bottom:.5rem}
  .hero__innen h1{order:2;font-size:clamp(1.9rem,7.6vw,2.4rem)}
  .hero__lead{order:3;margin-bottom:1rem}
  .hero__innen .btn-gruppe{order:4;margin-bottom:1.1rem}
  .nutzen{order:5;margin-bottom:.6rem}
  .nutzen li:nth-child(n+3){display:none}
  .hero__beleg{order:6}
  /* Vertrauensbalken mobil: eine Zeile, zwei Aussagen */
  .vertrauen__innen{display:flex;grid-template-columns:none;padding:.4rem 0;gap:.3rem 1.2rem;justify-content:center}
  .vertrauen span:nth-child(2),.vertrauen span:nth-child(4){display:none}
}

/* 6 + 11: Bento */
@media(max-width:759px){
  .bento{scroll-padding-inline:var(--pad);padding-block:.5rem 1rem}
  .js .bento .rein{opacity:1;transform:none}
  .bento__kachel h3{font-size:1.17rem}
}
.bento__kachel::before{background:linear-gradient(180deg,rgba(12,16,11,0) 12%,rgba(12,16,11,.62) 45%,rgba(12,16,11,.92) 100%)}
@media(hover:none){.bento__kachel p{max-height:6em;opacity:1}}
@media(min-width:760px){
  .bento__kachel--cta{grid-column:1/-1;grid-row:auto;flex-direction:row;align-items:center;justify-content:space-between;gap:1.4rem;min-height:0;padding:clamp(1.2rem,2.5vw,1.8rem) clamp(1.4rem,3vw,2.2rem)}
  .bento__kachel--cta h3{margin:0}
  .bento__kachel--cta p{margin:0;flex:1}
}
@media(max-width:759px){.bento__kachel--cta{order:99}}
/* 2: Kennzeichnung der KI-Motive */
.pille{
  position:absolute;top:.7rem;left:.7rem;z-index:1;padding:.28rem .6rem;border-radius:100px;
  background:rgba(12,16,11,.68);color:#fff;font-size:11px;font-weight:600;letter-spacing:.03em;
  backdrop-filter:blur(5px);pointer-events:none;
}
.pille--hell{background:rgba(255,255,255,.85);color:var(--tinte)}
.fussnote{font-size:var(--t-xs);color:var(--grau);margin-top:1rem}
.aussage .pille,.szene__buehne .pille{top:auto;bottom:.8rem;left:.8rem}
@media(min-width:1024px){.szene__buehne .pille{bottom:calc(env(safe-area-inset-bottom) + 1rem);left:1rem}}

/* 9: Szene */
@media(min-width:1024px) and (max-height:840px){
  .szene__text{padding-top:5.5rem}
  .szene__text .wrap{padding-block:1.1rem}
  .szene__text p{display:none}
}
.szene__anleitung--mobil{display:none}
@media(max-width:1023px){
  .szene__anleitung--desktop{display:none}
  .szene__anleitung--mobil{display:inline}
  .szene__ebene{aspect-ratio:4/3}
  .szene__wahl{grid-template-columns:1fr 1fr}
}

/* 12: Mobilmenue */
.mobilmenu__aktion{position:sticky;bottom:0;background:#fff;padding:.8rem 0 calc(.6rem + env(safe-area-inset-bottom));border-top:1px solid var(--linie);margin-top:1.2rem}
.mobilmenu{padding-bottom:1rem}

/* 13: Laufband */
.laufband:focus-within .laufband__spur{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.laufband__spur [data-kopie]{display:none}}

/* 14: Karussell */
.karussell__punkte button::before{width:24px;height:24px;margin:-7px}
.karussell__punkte{gap:.7rem}
.karussell__spur figure{background:var(--papier-3)}
.karussell__spur img{background:var(--papier-3)}

/* 4: Karussell als Hero-Bild der Leistungsseite */
.hero__bild .karussell__spur figure{flex:0 0 100%;border-radius:var(--radius-lg);box-shadow:var(--schatten-3)}
.hero__bild .karussell__spur img{aspect-ratio:4/5;object-fit:cover}
@media(min-width:940px){.hero__bild .karussell__spur img{aspect-ratio:3/4}}
@media(max-width:939px){.hero__bild .karussell__spur img{aspect-ratio:16/10;max-height:44vh;border-radius:0}.hero__bild .karussell__spur figure{border-radius:0;box-shadow:none}}
.hero__bild .karussell__pfeile{padding-inline:.6rem}
.hero__bild .karussell__punkte{margin-top:.8rem}

/* 7: Uebersichtsseite als Vollraster, auch mobil untereinander */
@media(max-width:759px){
  .bento--voll{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;overflow:visible;padding:0;margin-inline:0;grid-auto-rows:200px}
  .bento--voll .bento__kachel{flex:none;max-width:none;height:auto}
  .bento--voll .bento__kachel--gross{grid-column:span 2}
  .bento--voll .bento__kachel--breit{grid-column:span 2}
}

/* 7: drei Kacheln nebeneinander auf Leistungsseiten */
@media(min-width:760px){.bento--drei{grid-template-columns:repeat(3,1fr);grid-auto-rows:240px}}

/* ============================================================
   Mobile Punkte im Bild und iOS-sichere Ueberlagerungen
   ============================================================ */
@media(max-width:1023px){
  /* Ebenen im Format 3:2: schneidet vom 16:9-Bild je 7,8 % links und rechts ab */
  .szene__ebene{aspect-ratio:3/2}
  .szene__punkte{display:block;transform:none!important}
  /* Punktpositionen auf den sichtbaren Ausschnitt umrechnen */
  .hotspot{
    left:calc((var(--x) - 7.8%) / 0.844);
    transform:translate(-50%,-50%);
    opacity:1;min-width:48px;min-height:48px;
  }
  .hotspot__schild{display:none}
  .hotspot__kern{width:22px;height:22px;border-width:3px}
  .hotspot__ring{width:26px;height:26px}
  .szene__ebene .hotspot{transition:none}
}
/* Fest positionierte Elemente bis zur echten Unterkante des sichtbaren Bereichs */
.szene__schleier{height:100vh;height:100dvh}
.szene__panel{max-height:88vh;max-height:88dvh}
@media(min-width:900px){.szene__panel{max-height:100vh;max-height:100dvh}}
/* Scroll-Sperre auf iOS: der Body wird selbst fixiert, Position wird im Skript gehalten */
body.gesperrt{position:fixed;left:0;right:0;overflow:hidden;width:100%}

/* Kundentyp-Auswahl im Formular */
.kundentyp{border:0;padding:0;margin:0}
.kundentyp legend{font-size:var(--t-sm);font-weight:600;color:var(--tinte);margin-bottom:.45rem}
.wahl--drei{grid-template-columns:1fr}
@media(min-width:560px){.wahl--drei{grid-template-columns:repeat(3,1fr)}}
.wahl label:has(input[type="radio"]:checked){border-color:var(--gruen);background:var(--gruen-hell)}

/* ============================================================
   JAHRESVERLAUF: Monat antippen, passende Leistungen leuchten
   ============================================================ */
.jahr{max-width:960px;margin-inline:auto}
.jahr__monate{
  display:grid;grid-template-columns:repeat(12,1fr);gap:.3rem;margin-bottom:1.2rem;
}
.jahr__monate button{
  min-height:44px;border:1px solid var(--linie);border-radius:var(--radius-sm);background:#fff;
  font-size:var(--t-xs);font-weight:600;cursor:pointer;color:var(--tinte-2);
  transition:background .18s,border-color .18s,color .18s;
}
.jahr__monate button:hover{border-color:var(--gruen-rand);background:var(--gruen-hell)}
.jahr__monate button[aria-selected="true"]{background:var(--gruen);border-color:var(--gruen);color:#fff}
@media(max-width:560px){.jahr__monate{grid-template-columns:repeat(6,1fr)}}
.jahr__zeilen{display:grid;gap:.5rem}
.jahr__zeile{
  display:grid;grid-template-columns:minmax(150px,1.2fr) 3fr;gap:.8rem;align-items:center;
  padding:.7rem .9rem;border:1px solid var(--linie);border-radius:var(--radius-sm);
  background:#fff;text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s,opacity .25s;
}
@media(max-width:560px){.jahr__zeile{grid-template-columns:1fr;gap:.4rem}}
.jahr__zeile:hover{border-color:var(--gruen-rand);box-shadow:var(--schatten-1)}
.jahr__zeile.ist-aus{opacity:.38}
.jahr__zeile.ist-an{border-color:var(--gruen);background:var(--gruen-hell)}
.jahr__titel{display:flex;flex-direction:column;gap:.1rem;font-size:var(--t-sm)}
.jahr__titel strong{color:var(--tinte)}
.jahr__titel span{color:var(--grau);font-size:var(--t-xs)}
.jahr__balken{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;height:14px}
.jahr__balken i,.jahr__legende i{display:block;border-radius:3px;background:var(--linie)}
.jahr__balken i[data-stufe="1"],.jahr__legende i[data-stufe="1"]{background:var(--gruen-rand)}
.jahr__balken i[data-stufe="2"],.jahr__legende i[data-stufe="2"]{background:var(--gruen)}
.jahr__balken i.ist-monat{outline:2px solid var(--tinte);outline-offset:1px}
.jahr__legende{display:flex;align-items:center;gap:.5rem 1.2rem;font-size:var(--t-xs);color:var(--grau);margin-top:1rem}
.jahr__legende i{width:22px;height:10px;display:inline-block}

/* ============================================================
   RUNDE 4: Korrekturen
   ============================================================ */
/* 2: hidden muss immer gewinnen. .feld{display:grid} hatte das Firmenfeld sichtbar gehalten. */
[hidden]{display:none!important}
.feld-paar:has(> [hidden]){grid-template-columns:1fr}
.wahl--vier{grid-template-columns:1fr}
@media(min-width:480px){.wahl--vier{grid-template-columns:1fr 1fr}}

/* 5: Hero mobil. Beide Privat-Argumente bleiben sichtbar, Bild niedriger, Button ueber der Falz */
@media(max-width:939px){
  .hero__bild img{max-height:34vh}
  .hero__lead .ab-breit{display:none}
  .nutzen li:nth-child(n+3){display:none}
}

/* 7: Leistungsuebersicht mobil einspaltig, Text vollstaendig lesbar */
@media(max-width:759px){
  .bento--voll{grid-template-columns:1fr;grid-auto-rows:auto}
  .bento--voll .bento__kachel{min-height:230px}
  .bento--voll .bento__kachel--gross,.bento--voll .bento__kachel--breit{grid-column:auto}
  .bento--voll .bento__kachel p,.bento--drei .bento__kachel p{max-height:none;opacity:1}
}
.bento__kachel h3{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word}

/* 13: Knoepfe im Mobilmenue waren zerlegt, weil .mobilmenu a{display:block} sie ueberschrieb */
.mobilmenu__aktion .btn{display:inline-flex;justify-content:center;align-items:center;border-bottom:0;padding:.95rem 1.6rem;font-size:var(--t-base)}
.mobilmenu__aktion .btn--primaer{color:#fff}
.mobilmenu__aktion .btn--wa{color:#0A2E17}

/* 15: Feste Aktionsleiste endete erst bei 1060px, die Desktop-Szene beginnt bei 1024px */
@media(min-width:1024px){.mobil-cta{display:none}body{padding-bottom:0}}

/* 15: Punkteschicht wird per Skript exakt ueber das sichtbare Bild gelegt */
.szene__punkte[data-eingepasst]{inset:auto}
@media(max-width:1023px){
  .szene__punkte[data-eingepasst] .hotspot{left:var(--x)}
}

/* Punkteschicht kann breiter sein als die Ebene: nichts darf herausragen */
.szene__ebene{overflow:hidden}

/* ===================== RUNDE 5 ===================== */
/* Icons im Kicker (z. B. Pin auf Ortsseiten) nicht auf volle Breite ziehen */
.kicker svg{width:1.1em;height:1.1em;flex:none}
/* Ortsseiten: lange H1 ohne Silbentrennung mitten im Wort */
.h1-ort{hyphens:manual;-webkit-hyphens:manual;text-wrap:balance}
@media(max-width:759px){.h1-ort{font-size:clamp(1.75rem,7.6vw,2.35rem)}}
/* Mobil verdeckt die Karte den Mitarbeiter im echten Foto. Die Aussage steht
   ohnehin in der Leiste ganz oben. */
@media(max-width:939px){
  .hero__karte{display:none}
  .hero__bild img{object-position:50% 38%}
}
/* Abschluss-Ueberschriften nicht mitten im Wort trennen */
.abschluss h2{hyphens:manual;-webkit-hyphens:manual;text-wrap:balance}
.fuss__ki{font-size:var(--t-xs);color:#8E978B;line-height:1.5;max-width:90ch;margin:2rem 0 0;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.08)}
/* Mobil: Foto direkt unter der Kopfzeile, ohne hellen Streifen dazwischen */
@media(max-width:939px){.hero__innen{padding-top:0}}
#anfrage{scroll-margin-top:90px}
/* Saisonhinweis unter dem Jahresverlauf */
.jahr__aufruf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.2rem;
  margin-top:1.2rem;padding:1rem 1.2rem;border-radius:var(--radius-lg);background:var(--gruen-hell);border:1px solid var(--gruen-rand)}
.jahr__aufruf span{font-weight:600;color:var(--tinte);flex:1 1 22ch}
@media(max-width:559px){.jahr__aufruf .btn{width:100%;justify-content:center}}
.bento__kachel,.karussell__spur > *{scroll-snap-stop:always}

/* ===================== PUTZ-ANIMATIONEN (Startseite) ===================== */
/* Vorab-Schleier über dem Startbild, bis putzen.js die Schmutzschicht zeichnet.
   Notfall: löst sich nach 4 s selbst auf, falls das Skript nicht lädt. */
.putz-hero [data-putzen]::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(206,198,178,.55);border-radius:var(--radius-lg);
  animation:putzNotfall .4s 7s forwards;
}
@media(max-width:939px){.putz-hero [data-putzen]::after{border-radius:0}}
@keyframes putzNotfall{to{opacity:0}}
[data-putzen] .hero__bild--zwei,[data-putzen] .hero__karte{z-index:2}

.putz-buehne{position:absolute;z-index:1;overflow:hidden;pointer-events:none}
.putz-schicht{position:absolute;left:0;top:0;pointer-events:none;transition:opacity .7s ease}
.putz-werkzeug{position:absolute;left:0;top:0;max-width:none;pointer-events:none;will-change:transform;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.3))}
.putz-glanz{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);
  transform:translateX(-110%);animation:putzGlanz 1.1s cubic-bezier(.3,.6,.3,1) forwards}
@keyframes putzGlanz{to{transform:translateX(110%)}}

/* Sprühflasche: Kacheln beschlagen, bis sie freigesprüht sind */
.bento__kachel img{z-index:-3;transition:transform .9s var(--ease),filter 1s ease}
.bento--putz .bento__kachel::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:url("../img/putzen/schmutz.webp") center/cover,rgba(206,198,178,.42);
  opacity:0;transition:opacity 1s ease}
.bento__kachel--cta::after{display:none}
.bento__kachel.beschlagen::after{opacity:1}
.bento__kachel.beschlagen img{filter:grayscale(.6) contrast(.82) brightness(1.05) blur(1.2px)}
.putz-sektion{position:relative;overflow:hidden}
.putz-flasche{z-index:5}
.putz-tropfen{position:absolute;z-index:4;pointer-events:none;border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(0,40,70,.25),0 1px 2px rgba(0,40,70,.2)}
.putz-kegel{position:absolute;z-index:3;pointer-events:none;
  background:linear-gradient(270deg,rgba(255,255,255,.55),rgba(255,255,255,0));
  clip-path:polygon(100% 45%,0 0,0 100%,100% 55%);animation:putzKegel .4s ease-out forwards}
@keyframes putzKegel{from{opacity:1}to{opacity:0}}
/* Grünes Glitzern als Pointe */
.putz-funke{position:absolute;z-index:6;width:18px;height:18px;pointer-events:none;
  background:var(--gruen);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  transform:scale(0) rotate(0);animation:putzFunke 1.1s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes putzFunke{40%{transform:scale(1.1) rotate(60deg);opacity:1}100%{transform:scale(0) rotate(120deg);opacity:0}}
/* Das Collage-Foto im Startbild erscheint erst, wenn die Scheibe sauber ist */
.putz-laeuft [data-putzen] .hero__bild--zwei{opacity:0;transform:scale(.85) rotate(-4deg)}
[data-putzen] .hero__bild--zwei{transition:opacity .5s ease,transform .6s cubic-bezier(.3,1.5,.5,1)}

/* Wischmopp: Schuhabdrücke unter dem Inhalt */
.putz-boden > :not(canvas):not(.putz-werkzeug){position:relative;z-index:1}
.putz-schicht--boden,.putz-schicht--nass{z-index:0}
.putz-schicht--nass{opacity:.1}
.putz-mopp{z-index:0}   /* hinter dem Text (z-index 1), die Überschrift bleibt lesbar */

/* Besen und Laub auf dem Garten-Block */
.aussage .wrap{position:relative;z-index:1}
.putz-laub{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.putz-laub img{position:absolute;left:0;top:0;height:auto;max-width:none;will-change:transform;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
.putz-laub .putz-besen{filter:drop-shadow(0 14px 18px rgba(0,0,0,.45))}
/* Werkzeuge erben sonst Hintergrund, Schatten und Seitenverhältnis der Fotos */
.putz-werkzeug,.putz-laub img{background:none!important;box-shadow:none!important;border-radius:0!important;
  aspect-ratio:auto!important;object-fit:fill!important;border:0!important}
/* Weiße Schrift bleibt lesbar, wenn der helle Besenkopf dahinter durchläuft */
.putz-fegen .wrap p,.putz-fegen .wrap h2{text-shadow:0 1px 3px rgba(0,0,0,.65)}
/* Kacheltext mobil auf ganze Zeilen begrenzen statt mitten in der Zeile abzuschneiden */
@media(hover:none){.bento__kachel p{max-height:none;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}}

/* ===================== PIERRE CRASS: Ansprechpartner, Banner, Anruf ===================== */
.chef{display:grid;gap:clamp(1.8rem,5vw,4rem);align-items:center}
@media(min-width:900px){.chef{grid-template-columns:minmax(300px,420px) 1fr}}
.chef__bild{margin:0;position:relative;max-width:420px;width:100%;justify-self:center}
.chef__bild img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--schatten-3)}
.chef__bild figcaption{position:absolute;left:1rem;bottom:1rem;background:rgba(12,16,11,.78);color:#fff;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.04em;padding:.45rem .8rem;border-radius:999px;backdrop-filter:blur(6px)}
.chef__text h2{margin-bottom:1rem}
@media(max-width:899px){.chef__bild{max-width:340px}}

.banner{margin:0}
.banner img{width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:var(--schatten-3)}

.kontakt__person{display:flex;align-items:center;gap:.9rem;margin-bottom:1.1rem}
.kontakt__person img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex:none;
  border:3px solid #fff;box-shadow:var(--schatten-2,0 4px 14px rgba(0,0,0,.12))}
.kontakt__person strong{display:block;font-size:var(--t-base)}
.kontakt__person span{font-size:var(--t-xs);color:var(--grau)}

/* Handy-Leiste: kleiner Anruf-Knopf links */
.mobil-cta{grid-template-columns:auto 1.45fr 1fr}
.mobil-cta__tel{padding-inline:.85rem;min-width:48px}
.mobil-cta__tel svg{width:20px;height:20px}
.mobilmenu__direkt{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}.mobilmenu__direkt .btn{justify-content:center;padding-inline:.6rem}
/* Runde 9 */
@media(max-width:939px){.hero__bild--portrait img{object-position:50% 8%;aspect-ratio:4/5;max-height:60vh}}
.banner a{display:block;border-radius:var(--radius-lg)}
.banner figcaption{margin-top:1rem;text-align:center;font-size:var(--t-sm);color:var(--grau);max-width:62ch;margin-inline:auto}
.banner figcaption a{color:var(--gruen-dunkel);font-weight:600}
@media(hover:hover){.banner__tipp{display:none}}
.kontakt__person img{object-position:50% 50%}
.mobilmenu{padding-bottom:0}
.mobilmenu__aktion{padding-bottom:calc(1rem + env(safe-area-inset-bottom))}
/* Kein heller Streifen zwischen Footer und Handy-Leiste: Platz für die Leiste im Footer statt im Body */
@media(max-width:1023px){body{padding-bottom:0}.fuss{padding-bottom:calc(2rem + 90px + env(safe-area-inset-bottom))}}

/* ===================== HERO IM BANNER-LOOK (Startseite) ===================== */
.bhero{
  --bh-gruen:#2fb34f; --bh-gruen-hell:#56d873;
  position:relative;isolation:isolate;overflow:hidden;color:#E6ECE4;
  background:
    linear-gradient(118deg,transparent 62%,rgba(47,179,79,.16) 62.2%,rgba(47,179,79,.16) 66%,transparent 66.2%),
    radial-gradient(120% 90% at 15% 0%,#1b2a20 0%,#0f1813 55%,#0b120e 100%);
  padding-block:clamp(1.6rem,4vw,3.6rem) clamp(2rem,4vw,3.6rem);
}
.bhero__innen{display:grid;gap:clamp(1.4rem,4vw,3.5rem);align-items:center}
@media(min-width:940px){.bhero__innen{grid-template-columns:1.12fr .88fr}}

.bhero__logo{width:clamp(200px,22vw,300px);height:auto;margin-bottom:1.2rem}
.bhero__leiste{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .75rem;margin:0 0 1rem;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#C9D4C6}
.bhero__leiste i{display:inline-block;width:1.5px;height:1em;background:var(--bh-gruen)}
.bhero h1{color:#fff;font-size:clamp(1.9rem,1.2rem + 2.6vw,3.3rem);line-height:1.05;margin:0 0 1rem}
.bhero h1 span{display:block;color:var(--bh-gruen-hell)}
/* Slogan im Pinselstrich, wie auf dem Banner */
.bhero__slogan{margin:0 0 1.5rem}
.bhero__slogan span{display:inline-block;position:relative;padding:.45rem 1.3rem .5rem 1rem;
  font-family:var(--font-display);font-weight:800;font-style:italic;font-size:clamp(1.05rem,.9rem + .9vw,1.55rem);
  color:#fff;letter-spacing:.01em;transform:rotate(-1.5deg)}
.bhero__slogan span::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bh-gruen);
  clip-path:polygon(2% 12%,10% 4%,30% 9%,55% 2%,80% 8%,99% 3%,97% 40%,100% 78%,88% 96%,60% 90%,34% 98%,12% 92%,0% 97%,3% 60%)}

.bhero__aktion{display:flex;flex-wrap:wrap;gap:.65rem;margin-bottom:1.6rem}
.bhero .btn--primaer{background:#27963f;border-color:#27963f}
.bhero .btn--primaer:hover{background:#21843a}
.bhero__tel,.bhero__wa{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.bhero__tel:hover,.bhero__wa:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.bhero__tel svg,.bhero__wa svg{color:var(--bh-gruen-hell)}

.saeulen{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media(min-width:620px){.saeulen{grid-template-columns:repeat(4,1fr)}}
.saeulen a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;height:100%;
  padding:.9rem .5rem;border-radius:var(--radius);text-decoration:none;color:#fff;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:background .25s,border-color .25s,transform .25s}
.saeulen a:hover{background:rgba(47,179,79,.12);border-color:rgba(86,216,115,.5);transform:translateY(-2px)}
.saeulen__icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--bh-gruen)}
.saeulen__icon svg{width:24px;height:24px;color:#fff}
.saeulen strong{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#fff;line-height:1.25}
.saeulen small{font-size:.74rem;color:#AEB9AB;line-height:1.3}
.bhero__ort{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0;font-size:var(--t-xs);color:#AEB9AB}
.bhero__ort svg{width:15px;height:15px;color:var(--bh-gruen-hell)}
.bhero__ort a{color:#DDE5DA}

/* Bildseite: drei schräge Bildstreifen wie im Banner, davor Pierre freigestellt */
.bhero__bild{position:relative}
.bhero__flaeche{position:relative;aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;background:#0f1813;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.bhero__streifen{position:absolute;inset:0 -12%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  background:var(--bh-gruen);transform:skewX(-10deg)}
.bhero__streifen span{overflow:hidden;position:relative}
.bhero__streifen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:skewX(10deg) scale(1.25)}
.bhero__flaeche::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,18,14,.15) 0%,rgba(11,18,14,0) 40%,rgba(11,18,14,.55) 100%)}
.bhero__pierre{position:absolute;z-index:1;bottom:0;left:50%;transform:translateX(-50%);height:94%;width:auto;max-width:none;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.bhero__name{position:absolute;z-index:2;left:1rem;bottom:1rem;background:rgba(11,18,14,.82);color:#fff;
  padding:.45rem .85rem;border-radius:999px;font-size:var(--t-xs);font-weight:700;backdrop-filter:blur(6px)}
.bhero__name small{font-weight:500;color:var(--bh-gruen-hell);margin-left:.3rem}

/* Smartphone: Pierre direkt unter dem Logo, dann Überschrift, Knöpfe, Säulen */
@media(max-width:939px){
  .bhero{padding-top:.9rem}
  .bhero__bild{order:-1}
  .bhero__flaeche{aspect-ratio:5/4;max-height:42vh;width:100%}
  .bhero__logo{display:none}
  .bhero__leiste{font-size:.66rem;letter-spacing:.09em;gap:.25rem .5rem;margin-bottom:.7rem}
  .bhero h1{font-size:clamp(1.65rem,7vw,2.2rem);margin-bottom:.8rem}
  .bhero__slogan{margin-bottom:1.1rem}
  .bhero__aktion .btn{flex:1 1 100%;justify-content:center}
  .bhero__aktion .bhero__tel,.bhero__aktion .bhero__wa{flex:1 1 calc(50% - .4rem);padding-inline:.6rem;font-size:.9rem}
  .bhero__aktion{margin-bottom:1.3rem}
}
@media(max-width:380px){.saeulen small{display:none}}
@media(min-width:940px){
  .bhero__logo{width:clamp(180px,16vw,240px);margin-bottom:.9rem}
  .bhero__leiste{letter-spacing:.07em;gap:.3rem .55rem;font-size:.72rem}
  .bhero__aktion .btn{padding-inline:1.15rem}
  .bhero__flaeche{aspect-ratio:5/6}
}
@media(max-width:939px){.bhero__flaeche{max-height:36vh}}
/* Runde 10: Kontrast, erster Bildschirm, weniger Doppelungen */
.bhero__slogan span::before{background:#1e7f37}
.bhero .btn--primaer{background:var(--gruen);border-color:var(--gruen)}
.bhero .btn--primaer:hover{background:var(--gruen-dunkel);border-color:var(--gruen-dunkel)}
.nur-mobil{display:none}
@media(max-width:939px){
  .nur-mobil{display:inline}
  .bhero__leiste{display:none}
  .bhero__flaeche{max-height:30svh}
  .putz-hero .bhero__bild[data-putzen]::after{border-radius:var(--radius-lg)}
}
@media(min-width:940px){
  .bhero{padding-top:clamp(1.2rem,2.5vw,2.2rem)}
  .bhero__logo{width:150px;margin-bottom:.7rem}
  .bhero__flaeche{max-height:calc(100svh - 12rem);aspect-ratio:auto;height:calc(100svh - 12rem);min-height:440px}
}
/* Namensschild erscheint erst, wenn die Scheibe sauber ist */
.bhero__name{transition:opacity .5s ease}
.putz-laeuft .bhero__name,.putz-hero .bhero__name{opacity:0}