@font-face{font-family:"Manrope";font-weight:400;font-display:swap;src:url(/fonts/manrope-400.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-weight:500;font-display:swap;src:url(/fonts/manrope-500.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-weight:700;font-display:swap;src:url(/fonts/manrope-700.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:500;font-display:swap;src:url(/fonts/space-grotesk-500.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-display:swap;src:url(/fonts/space-grotesk-700.woff2) format("woff2")}
.hp{position:absolute;left:-9999px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip;background:#fff;color:#1a1a1f;
 font:400 clamp(1rem,.97rem + .16vw,1.075rem)/1.65 Manrope,system-ui,-apple-system,sans-serif;
 -webkit-font-smoothing:antialiased}
img,svg,iframe{max-width:100%;display:block}
h1,h2,h3{font-family:"Space Grotesk",Manrope,system-ui,sans-serif;font-weight:700;
 line-height:1.1;letter-spacing:-.02em;margin:0 0 .5em;color:#0f1230}
h1{font-size:clamp(2rem,1.45rem + 2.6vw,3.4rem)}
h2{font-size:clamp(1.6rem,1.28rem + 1.5vw,2.5rem)}
h3{font-size:clamp(1.1rem,1.03rem + .35vw,1.3rem)}
p{margin:0 0 1rem}
a{color:#1800ad}
:focus-visible{outline:3px solid #d8232a;outline-offset:3px;border-radius:4px}

.wrap{width:min(100% - 2.5rem,1200px);margin-inline:auto}
.wrap.schmal{width:min(100% - 2.5rem,760px)}
.mitte{text-align:center}
.sek{padding:clamp(3.5rem,2.5rem + 4vw,6.5rem) 0}
.sek-grau{background:#f5f6f8}
.sek-schmal{padding:2.25rem 0;background:#f5f6f8}
.sek-dunkel{position:relative;background-color:#0a0c1e;background-size:cover;background-position:center}
.sek-dunkel-overlay{position:absolute;inset:0;
 background:linear-gradient(180deg,rgba(6,8,22,.85),rgba(6,8,22,.72))}
.sek-dunkel>.wrap{position:relative;z-index:1}
.sek-dunkel .augen{color:#ff8a7a}
.sek-dunkel h2{color:#fff}
.sek-dunkel .lead{color:#d7d9ea}
.sek-kopf{max-width:62ch;margin:0 0 clamp(2rem,1.5rem + 1.6vw,3rem)}
.sek-kopf h2{margin-bottom:.35em}
.augen{display:inline-block;font:700 .78rem/1 "Space Grotesk",sans-serif;letter-spacing:.14em;
 text-transform:uppercase;color:#d8232a;margin-bottom:.9rem}
.lead{font-size:clamp(1.05rem,1rem + .3vw,1.22rem);color:#4a4d5e;max-width:62ch}
.klein{font-size:.85rem;color:#6b7280}
.mini-h{font-size:.95rem;text-transform:uppercase;letter-spacing:.08em;margin:1.75rem 0 .6rem}

.skip{position:absolute;left:-9999px;background:#1800ad;color:#fff;padding:.75rem 1.25rem;z-index:99}
.skip:focus{left:1rem;top:1rem}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e6e8ee}
.kopf-transparent{position:fixed;top:0;left:0;right:0;background:rgba(8,10,26,.18);
 border-bottom-color:rgba(255,255,255,.1);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.kopf-transparent .marke{background:rgba(255,255,255,.92);padding:.45rem 1rem;border-radius:14px}
.kopf-transparent .nav-a{color:#fff}
.kopf-transparent .nav-a:hover{background:rgba(255,255,255,.14);color:#fff}
.kopf-transparent .nav-a.is-aktiv{color:#fff}
.kopf-transparent .kopf-cta .btn-geist{background:rgba(255,255,255,.14);color:#fff}
.kopf-transparent .kopf-cta .btn-geist:hover{background:rgba(255,255,255,.24)}
.kopf-transparent .burger{background:rgba(255,255,255,.14)}
.kopf-transparent .burger span{background:#fff}
.kopf-in{display:flex;align-items:center;gap:1.25rem;min-height:92px}
.marke{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit;flex:0 0 auto}
.marke .logo-bild-farbig{width:auto;height:72px;margin:0;background:transparent}
.marke .logo-bild-farbig img{height:100%;width:auto}
.nav-desk{margin-left:auto}
.fuss-marke .logo-bild{height:40px;width:auto;margin-bottom:1rem;background:transparent}
.fuss-marke .logo-bild img{height:100%;width:auto;filter:brightness(0) invert(1)}
.nav-desk>ul{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav-a{display:inline-flex;align-items:center;gap:.25rem;padding:.55rem .6rem;border-radius:8px;
 font-size:.9rem;font-weight:500;color:#1a1a1f;text-decoration:none;white-space:nowrap;
 background:none;border:0;cursor:pointer;font-family:inherit}
.nav-a:hover{background:#f0f1f6;color:#1800ad}
.nav-a.is-aktiv{color:#1800ad;font-weight:700}
.hat-menu{position:relative}
.untermenu{position:absolute;top:100%;left:0;min-width:290px;background:#fff;border:1px solid #e6e8ee;
 border-radius:12px;box-shadow:0 18px 40px rgba(15,18,48,.14);padding:.5rem;
 opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s ease}
.hat-menu:hover .untermenu,.hat-menu:focus-within .untermenu{opacity:1;visibility:visible;transform:none}
.untermenu ul{list-style:none;margin:0;padding:0}
.untermenu li{min-width:0}
.untermenu a{display:block;min-width:0;padding:.6rem .75rem;border-radius:8px;font-size:.9rem;
 color:#1a1a1f;text-decoration:none;white-space:normal}
.untermenu a:hover{background:#f0f1f6;color:#1800ad}

.kopf-cta{display:flex;align-items:center;gap:.6rem;margin-left:.25rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1.15rem;
 border:0;border-radius:9px;font:700 .9rem/1 "Space Grotesk",sans-serif;text-decoration:none;
 cursor:pointer;transition:.15s ease;white-space:nowrap}
.btn-rot{background:#d8232a;color:#fff}
.btn-rot:hover{background:#b81c22;transform:translateY(-1px)}
.btn-blau{background:#1800ad;color:#fff}
.btn-blau:hover{background:#12007e}
.btn-geist{background:#f0f1f6;color:#1800ad}
.btn-geist:hover{background:#e3e5ef}
.btn-voll{width:100%;padding:.9rem 1.25rem;font-size:.98rem}
.ic{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:1.7;
 stroke-linecap:round;stroke-linejoin:round}
.ic-mini{width:15px;height:15px;flex:0 0 15px}
.ic-gross{width:30px;height:30px;flex:0 0 30px;color:#1800ad}

.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
 padding:0 10px;background:#f0f1f6;border:0;border-radius:9px;cursor:pointer}
.burger span{display:block;height:2px;background:#1800ad;border-radius:2px;transition:.2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-mobil{display:none}
.nav-mobil:not([hidden]){display:block;border-top:1px solid #e6e8ee;background:#fff;
 max-height:calc(100dvh - 74px);overflow-y:auto;padding:1rem 1.25rem 1.5rem}
.nav-mobil ul{list-style:none;margin:0;padding:0}
/* Nur die Menue-Eintraege, nicht die Buttons darunter: `.nav-mobil a` war
   spezifischer als `.btn-rot`/`.btn-blau` und hat deren weisse Schrift und die
   Zentrierung (display:inline-flex) ueberschrieben. */
.nav-mobil ul a{display:block;padding:.8rem .25rem;font-weight:500;color:#1a1a1f;
 text-decoration:none;border-bottom:1px solid #f0f1f6}
.m-titel{display:block;padding:.9rem .25rem .4rem;font:700 .75rem/1 "Space Grotesk",sans-serif;
 letter-spacing:.12em;text-transform:uppercase;color:#d8232a}
.m-gruppe>ul a{padding-left:1rem}
.m-cta{display:grid;gap:.6rem;margin-top:1.25rem}
/* Primaere Handy-Aktionen: sichere Antippflaeche. */
.m-cta .btn{min-height:44px}

/* ---------- Hero ---------- */
.hero{padding:clamp(2rem,1.4rem + 2.4vw,3.5rem) 0 clamp(3rem,2rem + 3vw,5rem);
 background:linear-gradient(180deg,#f5f6f8,#fff)}
.hero-in{display:grid;gap:clamp(1.75rem,1.2rem + 2.4vw,3rem);align-items:start;
 grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.hero-hauptzeile{display:grid;gap:clamp(1.75rem,1.2rem + 2.4vw,3.5rem);align-items:center;
 grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.hero-spalte{display:flex;flex-direction:column;gap:clamp(1rem,.75rem + .8vw,1.3rem);
 padding-top:clamp(.25rem,.15rem + .7vh,1rem)}

.hero-video-sek{position:relative;overflow:hidden;background:#0a0c1e;
 min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
 padding:0 0 clamp(4rem,3.6rem + 1vw,4.75rem)}
.hero-video-wrap{position:absolute;inset:0;z-index:0;
 background-size:cover;background-position:center}
/* Gleichmaessiger Schleier - kein harter Seitenverlauf mehr. */
.hero-overlay{position:absolute;inset:0;
 background:linear-gradient(180deg,rgba(6,8,22,.68),rgba(6,8,22,.55) 45%,rgba(6,8,22,.72))}
.hero-video-sek .hero-in{position:relative;z-index:1;display:flex;flex-direction:column;
 flex:1;padding-top:calc(92px + clamp(.5rem,.35rem + .5vw,.85rem))}
.hero-video-sek .augen{color:#ff8a7a}
.hero-video-sek h1,.hero-video-sek .hero-txt .lead{color:#fff}
.hero-video-sek h1{font-size:clamp(1.85rem,1.35rem + 2vw,2.8rem);margin-bottom:.28em}
.hero-video-sek .hero-txt .lead{margin-bottom:0;font-size:clamp(.98rem,.94rem + .2vw,1.08rem)}
.hero-video-sek .hero-txt .augen{margin-bottom:.55rem}
.hero-txt h1{margin-bottom:.4em}
/* Breit wie der Text darüber, dafür flacher: Name/Telefon nebeneinander. */
.hero-form.karte-form{max-width:none;padding:.7rem 1.05rem;justify-self:stretch}
/* Handy 1:1 ohne Rahmen — das Leuchten folgt der Alpha-Kante des PNG. */
.hero-handy{justify-self:center;width:100%;max-width:clamp(230px,26vw,330px)}
/* Der Film laeuft im transparenten Displayfenster des Rahmen-PNG.
   Werte aus dem Alphakanal gemessen: x 22-402, y 79-721 von 427x872. */
.handy-rahmen{position:relative;width:100%}
.handy-video{position:absolute;left:5.15%;top:9.06%;width:89.23%;height:73.74%;
 object-fit:cover;background:#0a0c1e}
.hero-handy .handy-bild{position:relative;z-index:1;display:block;width:100%;height:auto;
 filter:drop-shadow(0 0 26px rgba(216,35,42,.5)) drop-shadow(0 0 70px rgba(216,35,42,.28))}
.hero-form .form-h{font-size:1rem;margin-bottom:.55rem}
.hero-form .form{display:grid;grid-template-columns:1fr 1fr;gap:.4rem .9rem;align-items:start}
.hero-form .form>.feld:nth-of-type(3),
.hero-form .form>.feld:nth-of-type(4),
.hero-form .form>button,
.hero-form .form>.form-fuss{grid-column:1/-1}
.hero-form .feld label{font-size:.75rem;margin-bottom:.12rem}
.hero-form .feld input,.hero-form .feld textarea{padding:.45rem .7rem;font-size:.9rem}
.hero-form textarea{height:34px;min-height:0;resize:vertical}
.hero-form .btn-voll{padding:.6rem 1.25rem;font-size:.92rem}
.hero-form .form-fuss{font-size:.68rem;line-height:1.35;margin-top:-.15rem}

/* Hero-Formular als dunkle Glasflaeche statt weisser Kachel — nimmt die
   Sprache der Vorteilskacheln darunter auf, statt als Fremdkoerper auf dem
   dunklen Hero zu liegen. Der Grund ist bewusst kraeftig deckend (.78), damit
   der Kontrast auch ueber hellen Stellen des Fotos steht und ohne
   backdrop-filter (aeltere Browser) nicht kippt. */
.form-dunkel.karte-form{background:rgba(13,16,30,.78);border-color:rgba(255,255,255,.16);
 box-shadow:0 18px 50px rgba(0,0,0,.45);backdrop-filter:blur(14px);
 -webkit-backdrop-filter:blur(14px)}
.form-dunkel .form-h{color:#fff}
.form-dunkel .form-kontakt{color:#ff9c8e;border-bottom-color:rgba(255,156,142,.5)}
.form-dunkel .feld label{color:rgba(255,255,255,.78)}
.form-dunkel .feld input,.form-dunkel .feld textarea{
 background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff}
.form-dunkel .feld input::placeholder,.form-dunkel .feld textarea::placeholder{
 color:rgba(255,255,255,.7)}
.form-dunkel .feld input:focus,.form-dunkel .feld textarea:focus{
 border-color:#ff8a7a;background:rgba(255,255,255,.1);
 box-shadow:0 0 0 3px rgba(255,90,68,.32)}
/* Browser erzwingen bei Autofill sonst einen hellen Grund und dunkle Schrift. */
.form-dunkel .feld input:-webkit-autofill,
.form-dunkel .feld input:-webkit-autofill:focus{
 -webkit-text-fill-color:#fff;caret-color:#fff;
 -webkit-box-shadow:inset 0 0 0 1000px rgba(24,28,46,.98)}
.form-dunkel .form-fuss{color:rgba(255,255,255,.62)}
.form-dunkel .form-fuss a{color:#ff9c8e}

.form-h{font-size:1.15rem;margin-bottom:.9rem}
/* Kopfzeile der Formularkarte: Titel links, Kontakt-Link rechts.
   margin-left:auto haelt den Link auch dann rechts, wenn kein Titel da ist. */
.form-kopf{display:flex;align-items:baseline;gap:.5rem 1rem;flex-wrap:wrap;
 margin-bottom:.9rem}
.form-kopf .form-h{margin-bottom:0}
.form-kontakt{margin-left:auto;font:700 .84rem/1.3 "Space Grotesk",sans-serif;
 color:#c1121f;text-decoration:none;border-bottom:1px solid rgba(193,18,31,.4);
 padding-bottom:1px}
.form-kontakt:hover,.form-kontakt:focus-visible{border-bottom-color:currentColor}
.hero-form .form-kopf{margin-bottom:.55rem}
.hero-form .form-kontakt{font-size:.78rem}
.hero-haupt-zone{flex:1;display:flex;align-items:center}
.hero-haupt-zone .hero-hauptzeile{width:100%}
/* stretch: sonst schrumpft die Zone auf die Breite ihrer Kacheln,
   statt die volle Zeile zu nutzen — die Schrift muesste dann kleiner sein. */
.hero-vorteile-zone{flex:none;display:flex;align-items:center;align-self:stretch;padding:0}
/* Kacheln mittig zwischen Formular und Scroll-Hinweis: oben und unten dieselbe
   Luft. Nur wo der Hinweis sichtbar ist (>860px). Die Hero-Hoehe ist
   inhaltsgetrieben — deshalb muss unten genauso viel Platz dazukommen, wie
   oben wegfaellt, sonst rutscht der Hinweis einfach mit nach oben und klebt
   wieder an den Kacheln. */
@media (min-width:861px){
  .hero-video-sek{--hero-luft:1.5rem}
  /* Mindestluft: gap oberhalb, padding unterhalb der Kacheln — immer da. */
  .hero-video-sek .hero-in{gap:var(--hero-luft);padding-bottom:var(--hero-luft)}
  /* Auf hohen Bildschirmen wird der Hero auf 100vh gestreckt. Der Ueberschuss
     ging bisher per flex:1 in die Hauptzeile (49 % drueber, 49 % drunter),
     die Kacheln klebten weiter unten. Jetzt: Hauptzeile behaelt ihre Hoehe,
     die auto-Raender der Kachelzone teilen den Ueberschuss gleich auf —
     Kacheln bleiben mittig zwischen Formular und Scroll-Hinweis. */
  .hero-video-sek .hero-haupt-zone{flex:none}
  .hero-video-sek .hero-vorteile-zone{margin-top:auto;margin-bottom:auto}
}
/* Vier gleich breite Kacheln in einer Reihe, Inhalt zentriert.
   nowrap + auf die laengste Beschriftung abgestimmte Schriftgroesse halten
   jede Kachel einzeilig. */
.hero-vorteile{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
/* Unter ~1080px reicht die Breite fuer vier einzeilige Kacheln nicht mehr. */
@media (max-width:1080px){.hero-vorteile{grid-template-columns:repeat(2,1fr)}}
/* Zwei Spalten reichen unter ~640px nicht mehr: nowrap wuerde die Kacheln
   ueber den Rand schieben (der Body kappt nur, sichtbar bleibt es trotzdem). */
@media (max-width:640px){.hero-vorteile{grid-template-columns:1fr}}
.hero-vkarte{display:flex;align-items:center;justify-content:center;gap:.45rem;
 padding:.85rem .6rem;border-radius:12px;white-space:nowrap;
 background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
 color:#fff;font-size:clamp(.6rem,.34rem + .5vw,.75rem);font-weight:500}
.hero-vkarte .ic-mini{color:#ff8a7a;width:15px;height:15px;flex:0 0 15px}

/* Hover: Kachel leicht groesser, roter Schein ausschliesslich aussen herum
   (box-shadow ohne inset) — innen bleibt die Kachel unveraendert. */
.hero-vkarte,.vkarte,.wkachel,.lkarte,.hkarte{
 transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.hero-vkarte:hover{transform:scale(1.05);border-color:rgba(255,138,122,.55);
 box-shadow:0 0 0 1px rgba(255,90,68,.35),0 6px 26px rgba(255,90,68,.45),
 0 0 42px rgba(255,90,68,.3)}
/* .vkarte/.lkarte/.hkarte haben weiter unten eigene Hover-Regeln — die sind
   dort direkt umgeschrieben, damit sie diese hier nicht ueberschreiben. */
.wkachel:hover{transform:scale(1.03);border-color:rgba(193,18,31,.35);
 box-shadow:0 6px 24px rgba(193,18,31,.22),0 0 38px rgba(193,18,31,.14)}
/* Die Einblend-Animation setzt `.js-anim .anim.sichtbar{transform:none}` (0,3,0)
   und wuerde die Vergroesserung sonst schlucken. Dieselben Klassen plus :hover
   ergeben (0,4,0) und gewinnen unabhaengig von der Reihenfolge. */
.hero-vkarte.anim.sichtbar:hover{transform:scale(1.05)}
.vkarte.anim.sichtbar:hover,.wkachel.anim.sichtbar:hover,
.lkarte.anim.sichtbar:hover,.hkarte.anim.sichtbar:hover{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){
  .hero-vkarte,.vkarte,.wkachel,.lkarte,.hkarte{transition:none}
  .hero-vkarte:hover,.vkarte:hover,.wkachel:hover,.lkarte:hover,.hkarte:hover,
  .hero-vkarte.anim.sichtbar:hover,.vkarte.anim.sichtbar:hover,
  .wkachel.anim.sichtbar:hover,.lkarte.anim.sichtbar:hover,
  .hkarte.anim.sichtbar:hover{transform:none}
}

/* Scroll-Hinweis: kleiner Text über einer leuchtenden blauen Linie. */
/* Reine Anzeige, kein Link — nicht anklickbar und nicht fokussierbar. */
.scroll-hinweis{position:absolute;left:50%;bottom:.45rem;transform:translateX(-50%);z-index:2;
 display:flex;flex-direction:column;align-items:center;gap:.35rem;
 opacity:.72;pointer-events:none}
.scroll-hinweis span{font-size:.72rem;letter-spacing:.16em;color:rgba(255,255,255,.85);
 text-shadow:0 0 12px rgba(90,170,255,.6)}
.scroll-hinweis i{display:block;width:2px;height:38px;border-radius:2px;
 background:linear-gradient(180deg,rgba(90,170,255,.95),rgba(90,170,255,0));
 box-shadow:0 0 10px rgba(90,170,255,.85),0 0 22px rgba(90,170,255,.45);
 animation:scrollpuls 2.2s ease-in-out infinite}
@keyframes scrollpuls{0%,100%{opacity:.55;transform:scaleY(.85);transform-origin:top}
 50%{opacity:1;transform:scaleY(1);transform-origin:top}}

/* ---------- Haus der Zukunft: Schnittmodell mit Punkten ---------- */
/* Grund = exakt die Hintergrundfarbe des Renders, damit das Bild randlos steht. */
.hausband{background:#3e4c59;position:relative}
.hz-pin{padding:clamp(2.5rem,2rem + 2.5vw,4.5rem) 0}
.hz-kopf{margin-bottom:clamp(1.5rem,1rem + 1.5vw,2.5rem)}
.hausband .augen{color:#ff8a7a}
.hausband h2,.hausband h3{color:#fff}
.hz-buehne{display:grid;gap:clamp(1.5rem,1rem + 2vw,3rem);align-items:center;
 grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
@media(max-width:900px){.hz-buehne{grid-template-columns:1fr}}

/* Bildbuehne: Container hat exakt das Bildseitenverhaeltnis, damit die
   Prozentkoordinaten der Punkte auf dem Bild sitzen (kein object-fit-Versatz). */
.hz-bild{position:relative;aspect-ratio:1600/1195;max-width:820px;
 width:100%;margin:0 auto;line-height:0}
.hz-bild img{width:100%;height:100%;display:block}
.hz-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hz-linie{stroke:#ff8a7a;stroke-width:5;stroke-linecap:round;opacity:.9;
 filter:drop-shadow(0 0 6px rgba(255,138,122,.65))}

/* Punkt = Link, nur Icon. Mind. 44px Trefferflaeche. */
.hz-punkt{position:absolute;translate:-50% -50%;width:clamp(44px,4.4vw,58px);
 aspect-ratio:1;display:grid;place-items:center;border-radius:50%;
 background:rgba(20,26,33,.72);border:2px solid rgba(255,255,255,.5);
 color:#fff;text-decoration:none;backdrop-filter:blur(3px);
 transition:background .25s,border-color .25s,scale .25s,box-shadow .35s}
.hz-ic{width:52%;height:52%;stroke-width:1.9}
.hz-puls{position:absolute;inset:-6px;border-radius:50%;
 border:2px solid #ff8a7a;opacity:0;scale:.72;transition:opacity .4s,scale .4s}
.hz-punkt.ist-an{background:#ff5a44;border-color:#ffb3a8;
 box-shadow:0 0 0 6px rgba(255,90,68,.22),0 0 26px rgba(255,90,68,.75)}
.hz-punkt.ist-an .hz-puls{opacity:.55;scale:1;animation:hzPuls 2.4s ease-out infinite}
.hz-punkt:hover,.hz-punkt:focus-visible{scale:1.12;background:#ff5a44;border-color:#fff}
.hz-punkt:focus-visible{outline:3px solid #fff;outline-offset:3px}
@keyframes hzPuls{0%{opacity:.55;scale:1}70%{opacity:0;scale:1.5}100%{opacity:0;scale:1.5}}

/* Textfenster rechts */
.hz-panels{position:relative;min-height:1px}
.hz-panel{background:rgba(16,21,27,.62);border:1px solid rgba(255,255,255,.16);
 border-radius:16px;padding:clamp(1.25rem,1rem + 1vw,2rem)}
.hz-panel h3{margin:.15em 0 .5em;font-size:clamp(1.3rem,1.1rem + .7vw,1.75rem)}
.hz-text{color:#d7d9ea;margin:0 0 1rem}
.hz-zaehler{font:700 .78rem/1 "Space Grotesk",sans-serif;letter-spacing:.14em;
 color:#ff8a7a;margin:0 0 .9rem}
.hz-zaehler b{color:#fff}
.hz-panel .link-pfeil{color:#fff}
.hz-panels .hz-panel+.hz-panel{margin-top:1rem}

/* Erst wenn JS uebernimmt, wird gepinnt, gestapelt und ein-/ausgeblendet.
   Ohne JS bleiben alle Panels sichtbar untereinander stehen. */
.js-hz .hz-pin{position:sticky;top:0;min-height:100vh;
 display:flex;align-items:center}
.js-hz .hz-panels{display:grid}
.js-hz .hz-panels .hz-panel{grid-area:1/1;margin-top:0;
 opacity:0;translate:0 14px;visibility:hidden;
 transition:opacity .45s ease,translate .45s ease,visibility .45s}
.js-hz .hz-panel.ist-an{opacity:1;translate:0;visibility:visible}
.js-hz .hz-punkt{opacity:.32;scale:.82}
.js-hz .hz-punkt.ist-an{opacity:1;scale:1}
.js-hz .hz-punkt:hover,.js-hz .hz-punkt:focus-visible{opacity:1;scale:1.12}

@media(prefers-reduced-motion:reduce){
  .hz-punkt,.hz-puls,.hz-panel{transition:none}
  .hz-punkt.ist-an .hz-puls{animation:none}
}

/* ---------- Sektionen mit Referenzbild ---------- */
.bgsek{position:relative}
.bgsek-voll{background-size:cover;background-position:center;background-color:#0a0c1e}
.bgsek-karte{background:#fff;padding:clamp(1.25rem,.5rem + 1.4vw,2.25rem) 38px}
.bgsek-box{position:relative;border-radius:26px;overflow:hidden;
 background-size:cover;background-position:center;background-color:#0a0c1e}
.bgsek-schleier{position:absolute;inset:0;
 background:linear-gradient(180deg,rgba(6,8,22,.88),rgba(6,8,22,.74) 50%,rgba(6,8,22,.88))}
.bgsek-inhalt{position:relative;z-index:1}
.bgsek .sek{background:transparent}
.bgsek h2,.bgsek h3{color:#fff}
.bgsek .lead,.bgsek .marken-intro,.bgsek .sek-kopf p{color:#d7d9ea}
.bgsek .augen{color:#ff8a7a}
/* Karten bleiben hell und heben sich vom Bild ab */
.bgsek .hkarte,.bgsek .lkarte{background:#fff}
.bgsek .hkarte h3,.bgsek .lkarte h3{color:#0f1230}
.bgsek .hkarte p,.bgsek .lkarte p{color:#4a4d5e}
/* Marken-Logos haben weisse Hintergruende -> weisse Kachel statt Invertierung */
.bgsek .marke-logo img{filter:grayscale(1);opacity:.9;background:#fff;
 padding:.5rem .8rem;border-radius:10px;box-sizing:border-box}
.bgsek .marke-logo img:hover{filter:none;opacity:1}
.bgsek .vertragspartner img{background:#fff;padding:.6rem .9rem;border-radius:10px;
 box-sizing:border-box}

/* ---------- Benefits-Leiste ---------- */
.benefits-leiste{background:#f5f6f8;border-bottom:1px solid #e6e8ee;padding:1.1rem 0}
/* Umbrechen statt abschneiden: bei nowrap+overflow rutschte der letzte Punkt
   ("Die besten Produkte auf dem Markt") aus dem sichtbaren Bereich. */
.benefits-leiste ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
 justify-content:space-between;align-items:center;gap:.5rem clamp(.5rem,.1rem + .55vw,1rem)}
.benefits-leiste ul::-webkit-scrollbar{display:none}
.benefits-leiste li{display:flex;align-items:center;gap:.32rem;white-space:nowrap;
 font-size:clamp(.58rem,.42rem + .26vw,.7rem);font-weight:500;color:#4a4d5e;flex:0 0 auto}
.benefits-leiste .ic-mini{color:#1800ad;width:15px;height:15px;flex:0 0 15px}

/* ---------- USP + Bild ---------- */
/* Bild mittig zur Textspalte, sonst haengt es oben und wirkt unausgewogen */
.usp-in{display:grid;gap:clamp(2rem,1.4rem + 2.4vw,3.5rem);align-items:center;
 grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.usp-txt h2{margin:.3em 0 .7em}
.akzent{display:block;color:#ff8a7a;font-style:italic}
.checkliste{list-style:none;margin:1.5rem 0;padding:0;display:grid;gap:.65rem}
.checkliste li{display:flex;align-items:center;gap:.6rem;color:#e4e6f2;font-size:.95rem}
.checkliste .ic-mini{color:#ff8a7a;flex:0 0 15px}
.usp-cta{display:flex;flex-wrap:wrap;gap:.75rem}
.usp-bild .bildslot{border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.35)}

/* ---------- Unterseiten-Hero ---------- */
.unterhero{padding:clamp(2.5rem,1.8rem + 2.6vw,4rem) 0 clamp(1rem,.6rem + 1.4vw,2rem);
 background:linear-gradient(180deg,#f5f6f8,#fff)}
/* Ueber uns: Teamfoto (Querformat) als Hintergrund, Text darueber auf der Wand.
   background-size:100% auto haelt das Bild immer volle Breite -> das Team wird
   nie seitlich angeschnitten. Die Farbe darunter ist exakt die Oberkantenfarbe
   des Fotos, damit die Flaeche oberhalb nahtlos anschliesst.
   Die Koepfe liegen 750 px ueber der Unterkante bei 3680 px Bildbreite,
   also 20,4 % der Breite. 23vw laesst genau diesen Platz plus Luft frei. */
/* Weisser Verlauf von oben, an der UNTERKANTE verankert statt an der Hoehe:
   Bild und Koepfe skalieren mit der Viewport-Breite, also auch die Stops.
   Koepfe liegen 20,4vw ueber der Unterkante -> ab 23vw ist der Verlauf klar
   transparent, die Leute bleiben frei. Die Bildoberkante liegt bei 31,3vw
   (100/3,196) -> dort ist er schon voll weiss und deckt die Kante zur
   Fuellfarbe komplett ab. */
.team-hero{background:linear-gradient(to top,rgba(255,255,255,0) 23vw,#fff 31vw,#fff 100%),
   url("/bilder/web/teamfoto-hero.jpg") center bottom/100% auto no-repeat,
   rgb(205,216,229);
 padding-bottom:max(105px,23vw)}
/* Auf schmalen Schirmen waere das Panorama bei voller Breite nur ~0,31W hoch —
   das Team stuende winzig am Fuss. 280% zoomt hinein: Team 0,571W hoch statt
   0,204W, seitlich bleibt es mit 14%..90% der Breite vollstaendig im Bild.
   Koepfe liegen dann 57,1vw ueber der Unterkante, Bildoberkante bei 87,7vw —
   Polsterung und Verlaufstops sind darauf abgestimmt. */
@media (max-width:700px){
  .team-hero{background:linear-gradient(to top,rgba(255,255,255,0) 60vw,#fff 84vw,#fff 100%),
     url("/bilder/web/teamfoto-hero.jpg") center bottom/280% auto no-repeat,
     rgb(205,216,229);
   padding-bottom:61vw}
}
.team-hero .augen{color:#c1121f}
.unterhero-in{display:grid;gap:clamp(1.75rem,1.2rem + 2.4vw,3rem);align-items:center;
 grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.unterhero-in .bildslot{border-radius:14px;overflow:hidden;box-shadow:0 18px 44px rgba(15,18,48,.12)}
.unterhero .btn{margin-top:.75rem}

/* ---------- Karten ---------- */
.vkarten{display:flex;flex-wrap:wrap;justify-content:center;gap:1.1rem}
.vkarte{flex:1 1 330px;max-width:400px;background:#fff;border:1px solid #e6e8ee;border-radius:12px;
 padding:1.5rem 1.4rem;transition:.18s ease}
.vkarte:hover{transform:scale(1.03);box-shadow:0 6px 24px rgba(193,18,31,.22),0 0 38px rgba(193,18,31,.14);border-color:rgba(193,18,31,.35)}
.vkarte h3{margin:.9rem 0 .35em}
.vkarte p{margin:0;color:#4a4d5e;font-size:.95rem}
.sek-grau .vkarte{background:#fff}

.lkarten{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem}
.lkarte{flex:1 1 420px;max-width:560px;background:#fff;border:1px solid #e6e8ee;border-radius:14px;
 overflow:hidden;display:flex;flex-direction:column;transition:.18s ease}
.lkarte:hover{transform:scale(1.03);box-shadow:0 6px 24px rgba(193,18,31,.22),0 0 38px rgba(193,18,31,.14);border-color:rgba(193,18,31,.35)}
.lkarte-txt{padding:1.5rem}
.lkarte-txt p{color:#4a4d5e}
.link-pfeil{display:inline-flex;align-items:center;gap:.4rem;font:700 .92rem/1 "Space Grotesk",sans-serif;
 color:#1800ad;text-decoration:none}
.link-pfeil:hover{color:#d8232a;gap:.65rem}

.wkacheln{display:flex;flex-wrap:wrap;justify-content:center;gap:1.1rem}
.wkachel{flex:1 1 330px;max-width:400px;background:#fff;border:1px solid #e6e8ee;border-radius:12px;
 padding:1.5rem 1.4rem}
.wkachel h3{margin:.9rem 0 .35em}
.wkachel p{margin:0;color:#4a4d5e;font-size:.95rem}

.tkarten{display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem}
.tkarte{flex:1 1 235px;max-width:280px;text-align:center}
.tkarte .bildslot{border-radius:12px;overflow:hidden;margin-bottom:.9rem;background:#e6e8ee}
.tkarte h3{margin-bottom:.15em;font-size:1.12rem}
.tkarte p{margin:0;color:#6b7280;font-size:.93rem}
.pl-tag{display:block;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.05em;
 text-transform:uppercase;color:#d8232a}

.bewertung-mehr{text-align:center;margin:1.75rem 0 0}
.bkarten{display:flex;flex-wrap:wrap;justify-content:center;gap:1.1rem}
.bkarte{flex:1 1 310px;max-width:390px;margin:0;background:#fff;border:1px solid #e6e8ee;
 border-radius:12px;padding:1.5rem 1.4rem;display:flex;flex-direction:column}
.bkarte blockquote{margin:.9rem 0 1.1rem;font-size:.95rem;color:#3a3d4e;flex:1}
.bkarte figcaption{font:700 .95rem/1.3 "Space Grotesk",sans-serif;color:#0f1230}
.bkarte figcaption span{display:block;font:400 .8rem/1.4 Manrope,sans-serif;color:#6b7280}
.sterne{display:inline-flex;gap:2px;color:#f5a623}
.ic-stern{width:17px;height:17px;flex:0 0 17px;stroke-width:1;fill:currentColor}
.signal{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0;font-size:1.02rem;color:#4a4d5e}
.signal b{color:#0f1230;font-size:1.15rem}

/* ---------- Galerie / Bildslots ---------- */
.galerie{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.galerie .bildslot{flex:1 1 300px;max-width:380px;border-radius:12px;overflow:hidden}
.bildslot{margin:0;position:relative;background:#eceef4;overflow:hidden}
.bildslot img{width:100%;height:100%;object-fit:cover}
/* Produktfreisteller: nie beschneiden, heller Grund passend zum Bild */
/* Freigestellte PNGs stehen frei (contain + Luft), echte Fotos fuellen den Slot. */
.bildslot.ist-alpha{background:transparent}
.bildslot.ist-produkt{background:transparent;border:0}
.bildslot.ist-produkt.ist-alpha img{object-fit:contain;
 padding:clamp(1rem,.7rem + 1.4vw,2.25rem)}
.bildslot.ist-produkt:not(.ist-alpha) img{object-fit:cover;padding:0}

/* ---------- Heizsystem-/Haustechnik-Karten ---------- */
.hkarten{display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem}
.hkarte{flex:1 1 300px;max-width:380px;background:#fff;border:1px solid #e6e8ee;
 border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:.18s ease}
.hkarte:hover{transform:scale(1.03);box-shadow:0 6px 24px rgba(193,18,31,.22),0 0 38px rgba(193,18,31,.14);border-color:rgba(193,18,31,.35)}
.sek-grau .hkarte{background:#fff}
.hkarte .bildslot{background:#f7f8fa;border-bottom:1px solid #eceef4}
.hkarte-txt{padding:1.35rem 1.4rem;display:flex;flex-direction:column;flex:1}
.hkarte-txt h3{margin-bottom:.35em}
.hkarte-txt p{color:#4a4d5e;font-size:.95rem;flex:1}
.hkarte-txt .link-pfeil{margin-top:.5rem}

/* ---------- Blog ---------- */
.bpkarten{display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem}
.bpkarte{flex:1 1 300px;max-width:380px;background:#fff;border:1px solid #e6e8ee;
 border-radius:12px;padding:0 0 1.4rem;overflow:hidden;
 display:flex;flex-direction:column;transition:.18s ease}
.bpkarte:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(15,18,48,.1)}
.sek-grau .bpkarte{background:#fff}
/* Beitragsbilder */
.bpkarte-bild{display:block}
.bpkarte-bild .bpbild{margin:0;border-radius:0}
.bpkarte-bild img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.bpkarte:hover .bpkarte-bild img{transform:scale(1.03)}
.bpkarte>:not(.bpkarte-bild){margin-inline:1.4rem}
.bpkarte .augen{margin-top:1.25rem}
.bpkopfbild{margin-top:clamp(1.5rem,1rem + 1.6vw,2.25rem)}
.bpkopfbild .bpbild{margin:0;border-radius:14px;overflow:hidden;
 box-shadow:0 18px 44px rgba(15,18,48,.12)}
.bpkopfbild img{width:100%;height:100%;object-fit:cover}
.bpkarte h2{margin:.35rem 0 .5em;font-size:1.15rem}
.bpkarte h2 a{color:inherit;text-decoration:none}
.bpkarte h2 a:hover{color:#1800ad}
.bpkarte p{color:#4a4d5e;font-size:.95rem;flex:1}

.beitrag h2{margin-top:2.5rem;font-size:clamp(1.4rem,1.2rem + .9vw,1.9rem)}
.beitrag h3{margin-top:1.75rem;font-size:1.1rem}
.beitrag > *:first-child{margin-top:0}
.beitrag .liste{margin:0 0 1.25rem;padding-left:1.25rem;color:#3a3d4e}
.beitrag .liste li{margin-bottom:.45rem}
.beitrag .hinweis{margin:1.75rem 0;padding:1.25rem 1.4rem;background:#f5f6f8;
 border-left:3px solid #1800ad;border-radius:0 10px 10px 0}
.beitrag .hinweis p{margin:0 0 .5rem;color:#3a3d4e;font-size:.96rem}
.beitrag .hinweis p:last-child{margin-bottom:0}
.tabelle{overflow-x:auto;margin:1.75rem 0}
.tabelle table{border-collapse:collapse;width:100%;min-width:32rem;font-size:.93rem}
.tabelle th,.tabelle td{text-align:left;padding:.7rem .85rem;border-bottom:1px solid #e6e8ee}
.tabelle th{background:#f5f6f8;font:700 .88rem/1.3 "Space Grotesk",sans-serif;color:#0f1230}
.tabelle tr:last-child td{border-bottom:0}

/* ---------- Marken-Laufband ---------- */
.vertragspartner{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;margin-bottom:2rem}
.vertragspartner img{width:clamp(150px,12vw,200px);height:auto}
.marken-intro{color:#4a4d5e;margin:0 0 2rem;font-size:.98rem}
.laufband{position:relative;display:flex;gap:clamp(2rem,1.5rem + 2vw,3.5rem);overflow:hidden;
 padding:.5rem 0;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.laufband-spur{flex:0 0 auto;display:flex;align-items:center;
 gap:clamp(2rem,1.5rem + 2vw,3.5rem);list-style:none;margin:0;padding:0;
 animation:laufen 42s linear infinite}
.laufband:hover .laufband-spur,.laufband:focus-within .laufband-spur{animation-play-state:paused}
.marke-logo{flex:0 0 auto}
.marke-logo img{width:clamp(110px,9vw,150px);height:auto;
 filter:grayscale(1);opacity:.62;transition:.2s ease}
.marke-logo img:hover{filter:none;opacity:1}
@keyframes laufen{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-100% - clamp(2rem,1.5rem + 2vw,3.5rem)))}
}
.bildslot.hoch{border-radius:14px;max-width:420px}
.bildslot.is-leer{display:grid;place-items:center;background:
 repeating-linear-gradient(45deg,#eceef4,#eceef4 12px,#e4e7ef 12px,#e4e7ef 24px);
 border:2px dashed #b9bfd4}
.bildslot-hinweis{display:grid;justify-items:center;gap:.4rem;text-align:center;padding:1rem;color:#5a6080}
.bildslot-hinweis b{font:700 .9rem/1 "Space Grotesk",sans-serif;color:#3a3f5c}
.bildslot-hinweis code{font-size:.72rem;color:#6b7280;word-break:break-all}

/* ---------- Formular ---------- */
.karte-form{background:#fff;border:1px solid #e6e8ee;border-radius:14px;padding:1.6rem;
 box-shadow:0 14px 40px rgba(15,18,48,.08)}
.form{display:grid;gap:.85rem}
.form.ist-kompakt{gap:.7rem}
.feld{display:grid;gap:.3rem}
.feld label{font:700 .82rem/1 "Space Grotesk",sans-serif;color:#3a3d4e}
.feld input,.feld textarea{width:100%;padding:.72rem .85rem;border:1px solid #d3d7e5;border-radius:9px;
 font:400 .95rem/1.5 Manrope,sans-serif;color:#1a1a1f;background:#fff;transition:.15s}
.feld input:focus,.feld textarea:focus{border-color:#1800ad;outline:none;
 box-shadow:0 0 0 3px rgba(24,0,173,.12)}
.feld textarea{resize:vertical;min-height:76px}
.form-fuss{margin:0;font-size:.78rem;color:#6b7280}
.form-fuss a{color:#1800ad}

/* ---------- Blaue Anfrage-Sektion ---------- */
.sek-blau{background:#1800ad;color:#fff}
.sek-blau h2{color:#fff}
.sek-blau .lead{color:#c9cdf0}
.zwei-spalt{display:grid;gap:clamp(1.75rem,1.2rem + 2.4vw,3rem);align-items:start;
 grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.zwei-spalt.breit{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.kontaktliste{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.85rem}
.kontaktliste li{display:flex;align-items:flex-start;gap:.7rem}
.kontaktliste svg{flex:0 0 20px;margin-top:2px}
.sek-blau .kontaktliste{color:#eceefb}
.sek-blau .kontaktliste a{color:#fff}
.kontaktliste.kompakt{gap:.55rem;font-size:.92rem}
.kontaktliste.gross{font-size:1.02rem}
.kontaktliste.gross a{color:#1800ad;font-weight:500}

/* ---------- Band ---------- */
.band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.band p{margin:0;color:#3a3d4e}
.marken{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem;margin:0;padding:0}
.marken li{padding:.45rem .95rem;background:#fff;border:1px solid #dfe2ec;border-radius:99px;
 font:700 .85rem/1 "Space Grotesk",sans-serif;color:#1800ad}

/* ---------- Diverses ---------- */
.fliess p{color:#3a3d4e}
.fliess p:last-child{margin-bottom:0}
.rechtstext h2{font-size:1.22rem;margin-top:2.25rem}
.rechtstext h2:first-child{margin-top:0}
.rechtstext .todo{background:#fff6f6;border-left:3px solid #d8232a;padding:.85rem 1rem;border-radius:0 8px 8px 0}
.ortliste{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 2rem;padding:0}
.ortliste li{display:inline-flex}
.ortliste li>a,.ortliste li>span{display:inline-flex;align-items:center;gap:.35rem;
 padding:.5rem 1rem;background:#fff;border:1px solid #dfe2ec;border-radius:99px;
 font-size:.9rem;font-weight:500;color:#1a1a1f;text-decoration:none;transition:.15s ease}
.ortliste li>a:hover{border-color:#1800ad;color:#1800ad;box-shadow:0 4px 14px rgba(24,0,173,.1)}
.ortliste svg{color:#d8232a}
.ortliste .ort-mehr>a{background:#f0f1f6;border-style:dashed;color:#1800ad}
.ortliste .ort-mehr svg{color:#1800ad}
.mitte-liste{justify-content:center;margin-top:1.75rem}

/* ---------- Förderungen ---------- */
.stand{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.25rem;padding:.4rem .9rem;
 background:#f0f1f6;border-radius:99px;font-size:.8rem;font-weight:500;color:#4a4d5e}
.stand svg{color:#1800ad}
.fkarten{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
/* Titel und Text mittig, der rote Satz unten links in der Ecke. */
.fkarte{display:flex;flex-direction:column;background:#fff;border:1px solid #e6e8ee;
 border-radius:12px;padding:1.5rem 1.4rem 1.25rem;box-shadow:0 10px 30px rgba(15,18,48,.05)}
.fkarte-mitte{flex:1;display:flex;flex-direction:column;justify-content:center;
 align-items:center;text-align:center;gap:.5rem}
/* Ueberschrift oben links, gleiche Trennlinie wie der rote Satz unten */
.fkarte h3{align-self:flex-start;font-size:1rem;margin:0 0 1.15rem;padding-bottom:.85rem;
 border-bottom:2px solid rgba(216,35,42,.18)}
.fkarte p{font-size:.9rem;color:#4a4d5e;margin:0}
.fsatz{align-self:flex-start;margin-top:1.15rem;padding-top:.85rem;
 border-top:2px solid rgba(216,35,42,.18);
 font:700 1.3rem/1 "Space Grotesk",sans-serif;color:#d8232a;white-space:nowrap}
.rechenbeispiel{margin-top:1.75rem;background:#fff;border-left:4px solid #1800ad;
 border-radius:0 12px 12px 0;padding:1.5rem}
.rechenbeispiel h3{font-size:1.05rem;margin-bottom:.6rem}
.rechenbeispiel p{color:#3a3d4e;margin-bottom:.5rem}
.rechenbeispiel p:last-child{margin-bottom:0}

.faq-gruppe{margin-bottom:2.5rem}
.faq-gruppe:last-child{margin-bottom:0}
.faq-h{font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:#d8232a;
 margin-bottom:1rem}
.faq{border:1px solid #e6e8ee;border-radius:12px;background:#fff;margin-bottom:.7rem;
 overflow:hidden}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
 padding:1.05rem 1.25rem;cursor:pointer;font-weight:700;font-size:.98rem;color:#1a1a1f;
 list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:#f7f8fa}
.faq summary svg{color:#1800ad;flex:0 0 15px;transition:transform .2s ease}
.faq[open] summary{background:#f7f8fa}
.faq[open] summary svg{transform:rotate(180deg)}
.faq-a{padding:0 1.25rem 1.2rem}
.faq-a p{color:#4a4d5e;font-size:.95rem;margin:0}

/* ---------- Kacheln beim Scrollen einblenden ----------
   Nur opacity/transform -> laeuft auf der GPU, kein Layout-Reflow.
   Ohne JS oder bei reduzierter Bewegung bleibt alles sofort sichtbar. */
.js-anim .anim{opacity:0;transform:translate3d(0,14px,0)}
.js-anim .anim.sichtbar{opacity:1;transform:none;
 transition:opacity .34s ease-out,transform .34s cubic-bezier(.22,.68,.3,1);
 transition-delay:calc(var(--i,0) * 55ms)}
@media print{.js-anim .anim{opacity:1 !important;transform:none !important}}

/* ---------- Standort-Block ---------- */
.standort-kopf{display:grid;gap:1.25rem 3rem;align-items:end;
 grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-bottom:2rem}
.standort-kopf h2{margin:0;font-size:clamp(1.9rem,1.4rem + 2.2vw,3rem);line-height:1.05;
 padding-bottom:.5rem;border-bottom:4px solid #1800ad;justify-self:start}
.standort-kopf .lead{margin:0}
.standort-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
 border-radius:16px;overflow:hidden;box-shadow:0 18px 44px rgba(15,18,48,.12)}
.standort-karte{background:#0f1230;color:#fff;padding:clamp(1.75rem,1.2rem + 2vw,2.75rem);
 display:flex;flex-direction:column}
.standort-karte h3{color:#fff;font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);margin:.3rem 0 1.25rem}
.standort-adresse{display:flex;gap:.7rem;align-items:flex-start;color:#e4e6f2;margin-bottom:1.25rem}
.standort-adresse svg{color:#ff8a7a;flex:0 0 20px;margin-top:.15rem}
.zeiten.hell li{color:#a9b0d8;border-color:rgba(255,255,255,.12)}
.zeiten.hell li b{color:#fff}
.standort-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:auto;padding-top:1.75rem}
.btn-geist-hell{background:rgba(255,255,255,.12);color:#fff}
.btn-geist-hell:hover{background:rgba(255,255,255,.22)}
.standort-map{min-height:340px}
.standort-map iframe{width:100%;height:100%;min-height:340px;border:0;display:block;
 background:#e6e8ee}

/* ---------- Ortsseiten ---------- */
.krumen{background:#f5f6f8;border-bottom:1px solid #e6e8ee;padding:.7rem 0;font-size:.8rem}
.krumen .wrap{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;color:#6b7280}
.krumen a{color:#1800ad;text-decoration:none}
.krumen a:hover{text-decoration:underline}
.krumen svg{color:#9aa0b4;transform:rotate(-90deg);flex:0 0 15px}

.kzband{background:#0f1230;color:#fff;padding:1.5rem 0}
.kzband-in{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.kz{text-align:center}
.kz b{display:block;font:700 clamp(1.35rem,1.1rem + .9vw,1.9rem)/1 "Space Grotesk",sans-serif;
 color:#fff;margin-bottom:.3rem}
.kz span{display:block;font-size:.8rem;color:#a9b0d8;line-height:1.35}

.skarten{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.skarte{background:#fff;border:1px solid #e6e8ee;border-radius:12px;padding:1.5rem;
 box-shadow:0 10px 30px rgba(15,18,48,.05)}
.skarte h3{font-size:1.05rem;margin:.9rem 0 .5rem}
.skarte p{font-size:.9rem;color:#4a4d5e;margin:0}

.tippbox{margin-top:1.5rem;background:#fff;border-left:4px solid #d8232a;
 border-radius:0 12px 12px 0;padding:1.25rem 1.4rem}
.tippbox b{display:flex;align-items:center;gap:.45rem;font-size:.8rem;letter-spacing:.1em;
 text-transform:uppercase;color:#d8232a;margin-bottom:.5rem}
.tippbox p{margin:0;color:#3a3d4e;font-size:.95rem}

.tabellenrahmen{overflow-x:auto}
.otabelle{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
.otabelle th{text-align:left;padding:.75rem .9rem;background:#0f1230;color:#fff;
 font:700 .78rem/1.3 "Space Grotesk",sans-serif;letter-spacing:.04em}
.otabelle th:first-child{border-radius:10px 0 0 0}
.otabelle th:last-child{border-radius:0 10px 0 0}
.otabelle td{padding:.8rem .9rem;border-bottom:1px solid #e6e8ee;color:#3a3d4e;vertical-align:top}
.otabelle tbody tr:nth-child(odd){background:#f7f8fa}
.otabelle td:first-child{font-weight:700;color:#0f1230}

.schritte{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:1rem}
.schritte li{counter-increment:s;position:relative;padding-left:3.25rem;
 background:#fff;border:1px solid #e6e8ee;border-radius:12px;padding:1.15rem 1.35rem 1.15rem 3.5rem}
.schritte li::before{content:counter(s);position:absolute;left:1.15rem;top:1.1rem;
 width:1.75rem;height:1.75rem;border-radius:50%;background:#1800ad;color:#fff;
 display:flex;align-items:center;justify-content:center;
 font:700 .88rem/1 "Space Grotesk",sans-serif}
.schritte b{display:block;margin-bottom:.3rem;font-size:1rem;color:#0f1230}
.schritte p{margin:0;font-size:.9rem;color:#4a4d5e}

.schluss{font-size:1.05rem;color:#3a3d4e;margin:0}

/* ---------- Einzugsgebiet ---------- */
.checkliste.hell-grund li{color:#3a3d4e}
.checkliste.hell-grund .ic-mini{color:#d8232a}
.ort-kontakt{background:#fff;border:1px solid #e6e8ee;border-radius:14px;padding:1.5rem;
 box-shadow:0 14px 40px rgba(15,18,48,.07)}
.ort-kontakt .mini-h{margin-top:0}
.okarten{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.okarte{display:flex;flex-direction:column;gap:.5rem;background:#fff;border:1px solid #e6e8ee;
 border-radius:12px;padding:1.4rem;text-decoration:none;color:inherit;transition:.15s ease;
 box-shadow:0 10px 30px rgba(15,18,48,.05)}
.okarte:hover{border-color:#1800ad;transform:translateY(-2px);
 box-shadow:0 16px 40px rgba(24,0,173,.12)}
.okarte-kreis{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;
 font-weight:500;color:#6b7280}
.okarte-kreis svg{color:#d8232a;flex:0 0 15px}
.okarte h2{font-size:1.15rem;margin:0}
.okarte p{font-size:.88rem;color:#4a4d5e;margin:0;flex:1}
.okarte .link-pfeil{margin-top:.35rem}
.mapwrap iframe{width:100%;height:min(58vw,420px);border:0;border-radius:14px;background:#e6e8ee}
.mapwrap .klein{margin-top:.6rem}
.zeiten{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.zeiten li{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;
 font-size:.92rem;padding-bottom:.45rem;border-bottom:1px solid rgba(255,255,255,.14)}
/* Im Fuss ist die Spalte schmal: einzeilig halten, Zeiten rechtsbuendig untereinander */
.fuss .zeiten li{font-size:.82rem;white-space:nowrap}
.fuss .zeiten li span{flex:1 1 auto}
.fuss .zeiten li b{flex:0 0 auto;text-align:right}
.zeiten.dunkel li{border-color:#e6e8ee}
.ansprech .bildslot{margin:1.25rem 0}
/* Kontakt: Ueberschrift bekommt eine eigene Zeile, damit Foto und Formular
   in derselben Zeile beginnen. Der Zeilenabstand ersetzt den Bildabstand oben,
   dadurch liegen beide Oberkanten exakt gleich — ohne feste Pixelwerte. */
.kontakt-spalt{row-gap:1.25rem}
.kontakt-spalt .ansprech-kopf{grid-column:1;grid-row:1}
.kontakt-spalt .ansprech{grid-column:1;grid-row:2}
.kontakt-spalt .karte-form{grid-column:2;grid-row:2}
.kontakt-spalt .ansprech .bildslot{margin-top:0}
.hinweis-box{text-align:center;background:#f5f6f8;border:1px solid #e6e8ee;border-radius:14px;
 padding:clamp(2rem,1.5rem + 2vw,3.25rem)}
.hinweis-box h2{margin:.9rem 0 .5em}
.hinweis-box p{color:#4a4d5e;max-width:52ch;margin-inline:auto}

/* ---------- Fuß ---------- */
.fuss{background:#0f1230;color:#c9cdf0;padding:clamp(3rem,2.2rem + 2.6vw,4.5rem) 0 1.5rem}
.fuss h3{color:#fff;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem}
.fuss-grid{display:grid;gap:2rem;grid-template-columns:1.3fr .9fr .9fr 1.15fr}
.fuss-hinweis{margin-top:1rem;max-width:22ch}
.fuss-hinweis a{color:#c9cdf0;text-decoration:underline}
.fuss-hinweis a:hover{color:#fff}
.fuss p{color:#a9b0d8;font-size:.92rem}
.fuss a{color:#c9cdf0;text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss-nav{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.92rem}
.fuss-unten{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
 margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);font-size:.85rem}
.fuss-unten p{margin:0}
.fuss-unten ul{list-style:none;display:flex;gap:1.25rem;margin:0;padding:0}

/* ---------- Responsiv ---------- */
@media (max-width:1400px){
  .kopf-cta .btn-geist span{display:none}
  .kopf-cta .btn-geist{padding:.7rem .8rem}
  .nav-a{padding:.55rem .5rem;font-size:.87rem}
}
@media (max-width:1080px){
  .nav-desk{display:none}
  .kopf-in{min-height:70px}
  .marke .logo-bild-farbig{height:52px}
  .burger{display:flex}
  .kopf-cta .btn-geist span{display:none}
  .kopf-cta .btn-geist{padding:.7rem .8rem}
  .hero-video-sek .hero-in{min-height:calc(100vh - 70px + 4rem);
   padding-top:calc(70px + clamp(2rem,1.4rem + 2.4vw,3.5rem))}
}
@media (max-width:860px){
  /* Hero ist gestapelt und deutlich hoeher als der Bildschirm -> Hinweis nutzlos */
  .scroll-hinweis{display:none}
  .hero-hauptzeile,.unterhero-in,.zwei-spalt,.zwei-spalt.breit,.usp-in{grid-template-columns:minmax(0,1fr)}
  /* gestapelt wieder normal fliessen lassen, sonst legt grid-column:2 eine Spalte an.
     Zwei Klassen noetig, sonst schlaegt die Zuweisung oben diesen Reset. */
  .kontakt-spalt .ansprech-kopf,.kontakt-spalt .ansprech,
  .kontakt-spalt .karte-form{grid-column:auto;grid-row:auto}
  .standort-kopf,.standort-grid{grid-template-columns:minmax(0,1fr)}
  .standort-kopf h2{border-bottom-width:3px}
  .hero-form.karte-form{max-width:none;justify-self:stretch}
  .hero-handy{max-width:250px;margin-inline:auto}
  .unterhero-in .bildslot{order:-1}
  .fuss-grid{grid-template-columns:1fr 1fr}
  .fuss-marke{grid-column:1/-1}
}
@media (max-width:860px){
  .benefits-leiste ul{justify-content:flex-start}
}
@media (max-width:620px){
  .kopf-cta .btn-rot{display:none}
  /* Handy-Kopf: Nummer links, Logo mittig, Menue rechts.
     display:contents loest die .kopf-cta-Gruppe auf, damit ihre Kinder direkte
     Rasterzellen werden. Drei Spalten mit 1fr aussen zentrieren das Logo
     wirklich mittig — mit Flex und auto-Raendern haenge es an der breiteren
     Seite, weil Nummer und Menue unterschiedlich breit sind. */
  .kopf-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.2rem}
  .kopf-cta{display:contents}
  /* grid-row:1 ist noetig: das Logo steht im DOM vor der Nummer, sonst schiebt
     die automatische Platzierung Spalte 1 in eine zweite Zeile. */
  .kopf-cta .btn-geist{grid-column:1;grid-row:1;justify-self:start}
  .marke{grid-column:2;grid-row:1;justify-self:center}
  .burger{grid-column:3;grid-row:1;justify-self:end}
  /* Telefonnummer ausschreiben statt nur Hoerersymbol — der Angebot-Knopf ist
     hier ausgeblendet, der Platz dafuer ist also frei. */
  .kopf-cta .btn-geist span{display:inline}
  /* Kompakt genug, dass die Nummer ihren Rasteranteil nicht sprengt —
     sonst schoebe sie das mittige Logo nach rechts. */
  .kopf-cta .btn-geist{padding:.4rem .5rem;font-size:.7rem;gap:.22rem;
   min-height:44px;white-space:nowrap}
  .marke .logo-bild-farbig{height:44px}
  .kopf-cta .btn-geist .ic{width:1em;height:1em}
  /* 1 cm Rand ist auf dem Handy zu viel Verlust an Inhaltsbreite */
  .bgsek-karte{padding-left:14px;padding-right:14px}
  .bgsek-box{border-radius:18px}
  .hero-form .form{grid-template-columns:1fr}
  .fuss-grid{grid-template-columns:1fr}
  .band{flex-direction:column;align-items:flex-start}
  .tkarte{flex:1 1 150px;max-width:190px}
  .karte-form{padding:1.25rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  /* Laufband nicht "durchrasen" lassen: anhalten und manuell scrollbar machen */
  .laufband{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .laufband-spur{animation:none !important}
  .laufband-spur[aria-hidden="true"]{display:none}
}

/* ---- beim Bauen erzeugt (ersetzt Inline-Styles) ---- */
.ar-3-2{aspect-ratio:3/2}
.ar-3-4{aspect-ratio:3/4}
.ar-325-188{aspect-ratio:325/188}
.ar-4-3{aspect-ratio:4/3}
.ar-427-872{aspect-ratio:427/872}
.ar-788-317{aspect-ratio:788/317}
.bg-web-bad-barrierefrei-jpg{background-image:url(/bilder/web/bad-barrierefrei.jpg)}
.bg-web-bad-geberit-icon-jpg{background-image:url(/bilder/web/bad-geberit-icon.jpg)}
.bg-web-bad-geberit-smyle-jpg{background-image:url(/bilder/web/bad-geberit-smyle.jpg)}
.bg-web-bad-hell-jpg{background-image:url(/bilder/web/bad-hell.jpg)}
.bg-web-bad-neu-jpg{background-image:url(/bilder/web/bad-neu.jpg)}
.bg-web-hero-bad-clean-jpg{background-image:url(/bilder/web/hero-bad-clean.jpg)}
.hz-punkt[data-nr="0"]{left:57%;top:18%}
.hz-punkt[data-nr="1"]{left:42%;top:70%}
.hz-punkt[data-nr="2"]{left:81%;top:79%}