/* =========================================================================
   Linnemeier · Ads-Landingpage „Badsanierung komplett“
   Liegt NACH styles.css und ergänzt nur. Die Startseite lädt diese Datei nicht.
   Neue Bausteine: 3D-Bauablauf (CSS 3D), Gewerke-Netz (SVG), Planungsoberfläche,
   Angebot, das sich beim Scrollen aufrichtet. Keine Bibliothek.
   ========================================================================= */

.lp-hp{display:none}

/* --- Maßketten statt Fliesenraster: Deko der Themenseite ---------------- */
.mass-deko{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.mass-deko::before{
  content:"";position:absolute;top:2.2rem;right:2rem;width:250px;height:150px;opacity:.13;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 150' fill='none' stroke='%231C1C1B' stroke-width='1.2'%3E%3Cpath d='M10 20H240M10 12v16M95 12v16M240 12v16M10 20l9-3.5v7zM240 20l-9-3.5v7z'/%3E%3Cpath d='M228 44V140M220 44h16M220 92h16M220 140h16'/%3E%3Cpath d='M10 44H200V140H10z' stroke-dasharray='3 5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width:1320px){.mass-deko{display:none}}

/* =========================================================================
   Hero — Desktop wie Startseite, Handy: Foto oben ohne Text, weicher Auslauf
   ========================================================================= */
.hero--lp .hero__ansage{font-size:clamp(2.1rem,3.6vw,3.3rem)}
.hero--lp .hero__ansage .a{text-wrap:balance}
@media (max-width:980px){
  .kopfleiste--lp{background:rgba(255,255,255,.97);border-bottom-color:var(--line);box-shadow:0 8px 28px rgba(28,28,27,.07);padding:.5rem 0}
  .kopfleiste--lp .marke__hell{display:none}
  .kopfleiste--lp .marke__dunkel{display:block}
  .kopfleiste--lp .marke img{height:42px}
  .hero--lp{--kopf:58px;--bildh:min(100vw,560px);background:var(--ink);padding-top:calc(var(--kopf) + var(--bildh) - 4.5rem)}
  .hero--lp .hero__bg{inset:auto;top:var(--kopf);left:0;right:0;height:var(--bildh)}
  .hero--lp .hero__bg img{height:100%;object-position:50% 50%}
  .hero--lp .hero__bg::after{background:linear-gradient(180deg,rgba(28,28,27,0) 48%,rgba(28,28,27,.62) 74%,var(--ink) 97%)}
}
@media (max-width:520px){
  .hero--lp{--kopf:54px}
  .kopfleiste--lp .marke img{height:38px}
}

/* =========================================================================
   Bauablauf in 3D — ein Raum, der sich in fünf Schritten selbst baut
   ========================================================================= */
.bau{overflow:hidden}
.bau__raster{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);grid-template-areas:"buehne liste" "cta liste";grid-template-rows:auto 1fr;column-gap:clamp(1.6rem,3.2vw,3rem);row-gap:1.3rem;align-items:start}
.bau__links{grid-area:buehne}.bau__rechts{grid-area:liste}.bau__cta{grid-area:cta}

.bau__buehne{
  position:relative;isolation:isolate;height:clamp(500px,44vw,630px);border-radius:var(--r-gross);overflow:hidden;
  background-color:var(--ink);color:#fff;box-shadow:var(--sh-l);
  background-image:
    radial-gradient(ellipse 60% 55% at 50% 48%,rgba(162,192,53,.13),rgba(162,192,53,0) 70%),
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:100% 100%,30px 30px,30px 30px;background-position:center;
}
.r3{position:absolute;left:0;right:0;top:0;bottom:0;perspective:1700px;perspective-origin:50% 26%}
.r3__szene{
  --rx:58deg;--rz:42deg;
  position:absolute;left:50%;top:60%;width:300px;height:250px;margin:-125px 0 0 -150px;
  transform-style:preserve-3d;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--s,1)) rotateX(var(--rx)) rotateZ(var(--rz));
}

/* Flächen: Boden 300 × 250, Rückwand 300 × 230, linke Wand 250 × 230 */
.r3-f{position:absolute;transform-style:preserve-3d;background:var(--roh);transition:background-color .6s var(--e-calm),box-shadow .6s var(--e-calm)}
.r3__boden{inset:0;--roh:#8D877D}
.r3__wand{--roh:#A59E92;top:-230px;height:230px}
.r3__wand--hinten{left:0;width:300px;transform-origin:50% 100%;transform:rotateX(-90deg)}
.r3__wand--links{left:-250px;width:250px;transform-origin:100% 100%;transform:rotateZ(-90deg) rotateX(-90deg);--roh:#958E83}

.r3-l{position:absolute;inset:0;transform:translateZ(1px)}

/* Schritt 2 — Rückbau: alte Fliesen und Wanne gehen raus */
.r3-alt{opacity:0}
.r3-alt--wand{
  background:
    linear-gradient(to bottom,#CFC5B0 0,#CFC5B0 33%,#7E5E40 33%,#7E5E40 35.6%,transparent 35.6%),
    repeating-linear-gradient(0deg,rgba(96,72,40,.28) 0 1px,transparent 1px 15px),
    repeating-linear-gradient(90deg,rgba(96,72,40,.28) 0 1px,transparent 1px 15px),
    #E4D6B6;
}
.r3__wand--links .r3-alt--wand{filter:brightness(.9)}
.r3-alt--boden{
  background:
    repeating-linear-gradient(0deg,rgba(60,40,20,.3) 0 1px,transparent 1px 20px),
    repeating-linear-gradient(90deg,rgba(60,40,20,.3) 0 1px,transparent 1px 20px),
    #A98E6C;
}
.ist-1 .r3-alt--wand{animation:altWand 2.6s var(--e-calm) .25s both}
.ist-1 .r3-alt--boden{animation:altWeg 2.6s var(--e-calm) .25s both}
@keyframes altWand{0%,42%{opacity:1;transform:translateZ(1px)}100%{opacity:0;transform:translateZ(1px) translateY(22px)}}
@keyframes altWeg{0%,42%{opacity:1}100%{opacity:0}}

/* Schritt 3 — Leitungen, Estrich, Vorwand */
.r3-leitung{width:100%;height:100%;overflow:visible;opacity:0;transform:translateZ(1.5px);transition:opacity .4s var(--e-calm)}
.r3-leitung path{fill:none;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--e-calm) .25s}
.r3-leitung .kalt{stroke:#5E93D6}
.r3-leitung .warm{stroke:#D86A4E}
.r3-leitung .abfluss{stroke:#6E6B66;stroke-width:9}
.r3-leitung .strom{stroke:#EDB64E;stroke-width:3}
.ab-2 .r3-leitung{opacity:1}
.ab-2 .r3-leitung path{stroke-dashoffset:0}

.r3-estrich{opacity:0;background:#A7A095;background-image:radial-gradient(rgba(0,0,0,.06) 1px,transparent 1px);background-size:6px 6px;
  transform:translateZ(1px);transition:opacity .5s var(--e-calm),transform .9s var(--e-soft)}
.ab-2 .r3-estrich{opacity:1;transform:translateZ(5px)}

/* Schritt 4 — Abdichtung im Verbund, Dichtband, Fliesen */
.r3-dicht{opacity:0;background:#7C91A6;transition:opacity .5s var(--e-calm)}
.r3-dicht--boden{inset:auto;left:186px;top:0;width:114px;height:120px;transform:translateZ(6px);box-shadow:inset 0 0 0 4px var(--acc)}
.r3-dicht--dusche{inset:auto;left:186px;right:0;top:22px;bottom:0;transform:translateZ(2px)}
.r3-band--ecke{inset:auto;left:186px;right:0;bottom:0;height:7px;background:var(--acc);opacity:0;transform:translateZ(2.5px);transition:opacity .4s var(--e-calm) .2s}
.ab-3 .r3-dicht,.ab-3 .r3-band--ecke{opacity:1}

.r3-fliese{
  --kachel:#E7E2D9;
  background-color:var(--kachel);
  background-image:
    linear-gradient(150deg,rgba(255,255,255,.34),rgba(255,255,255,0) 58%),
    linear-gradient(90deg,rgba(70,58,44,.16) 1px,transparent 1px),
    linear-gradient(0deg,rgba(70,58,44,.16) 1px,transparent 1px);
  background-size:100% 100%,50px 100px,50px 100px;
  clip-path:inset(100% 0 0 0);transform:translateZ(3px);
  transition:clip-path 1.4s var(--e-calm) 1.35s;
}
.r3-fliese--wand{--kachel:#ECE8E1}
.r3__wand--links .r3-fliese{--kachel:#DEDAD2}
.r3-fliese--akzent{inset:auto;left:186px;right:0;top:22px;bottom:0;transform:translateZ(3.5px);--kachel:#CEC6B9;
  background-image:
    linear-gradient(115deg,transparent 0 30%,rgba(255,255,255,.28) 31%,transparent 34% 62%,rgba(120,104,84,.14) 63%,transparent 66%),
    linear-gradient(90deg,rgba(70,58,44,.18) 1px,transparent 1px),
    linear-gradient(0deg,rgba(70,58,44,.18) 1px,transparent 1px);
  background-size:100% 100%,57px 104px,57px 104px;transition-delay:1.6s}
.r3-fliese--boden{--kachel:#CFC8BC;background-size:100% 100%,100px 50px,100px 50px;clip-path:inset(0 100% 0 0);transform:translateZ(8px)}
.ab-3 .r3-fliese{clip-path:inset(0 0 0 0)}
.r3-rinne{inset:auto;left:196px;top:104px;width:94px;height:6px;border-radius:2px;background:#2E2D2B;box-shadow:0 0 0 1px rgba(255,255,255,.25);opacity:0;transform:translateZ(9px);transition:opacity .4s var(--e-calm) 2.6s}
.ab-3 .r3-rinne{opacity:1}

/* 3D-Körper: Deckfläche (o), Front (+y, v), rechte Seite (+x, r) */
.r3-box{position:absolute;left:calc(var(--x)*1px);top:calc(var(--y)*1px);width:calc(var(--w)*1px);height:calc(var(--d)*1px);
  transform-style:preserve-3d;transform:translateZ(calc(var(--z)*1px))}
.r3-box > i{position:absolute;display:block;transition:opacity .5s var(--e-calm) calc(var(--i,0)*130ms),background-color .6s var(--e-calm),box-shadow .5s var(--e-calm)}
.r3-box .o{inset:0;transform:translateZ(calc(var(--h)*1px))}
.r3-box .v{left:0;top:calc((var(--d) - var(--h))*1px);width:100%;height:calc(var(--h)*1px);transform-origin:50% 100%;transform:rotateX(-90deg)}
.r3-box .r{left:calc((var(--w) - var(--d))*1px);top:calc(var(--h)*-1px);width:calc(var(--d)*1px);height:calc(var(--h)*1px);transform-origin:100% 100%;transform:rotateZ(-90deg) rotateX(-90deg)}

/* alte Wanne */
.r3-wanne > i{opacity:0;background:#EFE8DA}
.r3-wanne .o{background:radial-gradient(ellipse 42% 36% at 50% 50%,#D9D0BF 0 92%,#EFE8DA 94%)}
.r3-wanne .r{background:#D9D1C1}
.ist-1 .r3-wanne{animation:wanneRaus 2.6s var(--e-calm) .25s both}
.ist-1 .r3-wanne > i{animation:altWeg 2.6s var(--e-calm) .25s both}
@keyframes wanneRaus{0%,42%{transform:translateZ(0)}100%{transform:translateZ(80px)}}

/* Vorwand: kommt in Schritt 3 roh, wird in Schritt 4 gefliest */
.r3-vorwand{transform:translateZ(46px);transition:transform .8s var(--e-soft) .35s}
.r3-vorwand > i{opacity:0;background:#B4AC9F}
.r3-vorwand .r{background:#A69E91}
.ab-2 .r3-vorwand{transform:translateZ(0)}
.ab-2 .r3-vorwand > i{opacity:1}
.ab-3 .r3-vorwand > i{background-color:#DCD6CB;transition-delay:.9s}
.ab-3 .r3-vorwand .r{background-color:#D2CCC0}

/* Schritt 5 — Ausstattung fällt an ihren Platz */
.r3-fix{transition:opacity .5s var(--e-calm) calc(var(--i,0)*140ms),transform .8s var(--e-soft) calc(var(--i,0)*140ms)}
.r3-box.r3-fix{transform:translateZ(calc((var(--z) + 54)*1px))}
.r3-box.r3-fix > i{opacity:0}
.ist-0 .r3-box.r3-fix,.ab-4 .r3-box.r3-fix{transform:translateZ(calc(var(--z)*1px))}
.ist-0 .r3-box.r3-fix > i,.ab-4 .r3-box.r3-fix > i{opacity:1}

.r3-wt > i{background:#B78A59}
.r3-wt .o{background:#CDA676}
.r3-wt .v{background:linear-gradient(180deg,#B98C5A 0 46%,#8A6440 46% 52%,#B98C5A 52%)}
.r3-wt .r{background:#94703F}
.r3-becken > i{background:#F3F1EC}
.r3-becken .o{background:radial-gradient(ellipse 40% 34% at 50% 52%,#D7D5CF 0 90%,#F3F1EC 94%)}
.r3-becken .r{background:#DDDAD3}
.r3-wc > i{background:#F4F2EE}
.r3-wc .o{border-radius:8px 18px 18px 8px;background:radial-gradient(ellipse 44% 38% at 44% 50%,#DCDAD4 0 88%,#F4F2EE 92%)}
.r3-wc .r{background:#E1DED7}

.r3-l.r3-fix{opacity:0}
.r3-spiegel{inset:auto;left:46px;top:40px;width:96px;height:60px;border-radius:3px;
  background:linear-gradient(125deg,#8FA2AB 0,#D7E0E3 42%,#9EB0B7 70%,#C9D5D8 100%);transform:translateZ(28px)}
.r3-nische{inset:auto;left:252px;top:92px;width:34px;height:24px;border-radius:2px;background:#302F2C;
  box-shadow:inset 0 -6px 12px rgba(255,214,150,.55);transform:translateZ(26px)}
.r3-brause{inset:auto;left:232px;top:34px;width:28px;height:112px;transform:translateZ(30px)}
.r3-brause i{position:absolute;left:12px;top:6px;width:3px;height:104px;background:#1C1C1B;border-radius:2px}
.r3-brause b{position:absolute;left:0;top:0;width:28px;height:7px;border-radius:4px;background:#1C1C1B}
.ist-0 .r3-l.r3-fix,.ab-4 .r3-l.r3-fix{opacity:1}
.ist-0 .r3-spiegel,.ab-4 .r3-spiegel{transform:translateZ(5px)}
.ist-0 .r3-nische,.ab-4 .r3-nische{transform:translateZ(4px)}
.ist-0 .r3-brause,.ab-4 .r3-brause{transform:translateZ(6px)}
.ab-4 .r3-spiegel{box-shadow:0 0 22px 5px rgba(255,238,205,.5),0 0 0 2px rgba(255,238,205,.7);transition-delay:calc(var(--i)*140ms),calc(var(--i)*140ms),.9s}
.r3-druecker{position:absolute;left:40px;top:28px;width:24px;height:15px;border-radius:2px;background:#1C1C1B;opacity:0;transition:opacity .5s var(--e-calm) .45s}
.ab-4 .r3-druecker{opacity:1}

.r3-glas{position:absolute;left:74px;top:-196px;width:112px;height:196px;transform-origin:100% 100%;transform:rotateZ(-90deg) rotateX(-90deg);
  background:linear-gradient(115deg,rgba(214,236,242,.42),rgba(255,255,255,.1) 40%,rgba(255,255,255,.26) 44%,rgba(214,236,242,.14) 70%);border-top:4px solid #1C1C1B;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);opacity:0;transition:opacity .6s var(--e-calm) .5s}
.ist-0 .r3-glas,.ab-4 .r3-glas{opacity:1}

/* Schritt 1 — Planung: alles als Drahtmodell in Limette, dazu Maße */
.r3-plan{opacity:0;transition:opacity .5s var(--e-calm)}
.ist-0 .r3-plan{opacity:1}
.r3-plan--boden{transform:translateZ(1px);
  background-image:linear-gradient(rgba(195,221,92,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(195,221,92,.2) 1px,transparent 1px);background-size:25px 25px}
.r3-mass{position:absolute;font:600 13px/1 var(--f-b);color:var(--acc-3);white-space:nowrap}
.r3-mass--x{left:0;right:0;bottom:-26px;text-align:center;border-top:1px solid rgba(195,221,92,.7);padding-top:6px}
.r3-mass--y{top:0;bottom:0;right:-30px;width:0;border-left:1px solid rgba(195,221,92,.7)}
.r3-mass--y b{position:absolute;left:8px;top:50%;transform:translateY(-50%);font:inherit;color:inherit}
.r3-mass--qm{left:50%;top:50%;transform:translate(-50%,-50%);font:700 30px/1 var(--f-d);color:var(--acc)}
.ist-0 .r3-f{background:rgba(195,221,92,.035);box-shadow:inset 0 0 0 1.5px rgba(195,221,92,.6)}
.ist-0 .r3-box.r3-fix > i,.ist-0 .r3-l.r3-fix,.ist-0 .r3-glas{background:rgba(195,221,92,.07) !important;box-shadow:inset 0 0 0 1.2px rgba(195,221,92,.95) !important;border-color:rgba(195,221,92,.95)}
.ist-0 .r3-brause i,.ist-0 .r3-brause b{background:var(--acc)}
.ist-0 .r3-brause{background:none !important;box-shadow:none !important}
.ist-0 .r3-vorwand{transform:translateZ(0)}
.ist-0 .r3-vorwand > i{opacity:1;background:rgba(195,221,92,.07);box-shadow:inset 0 0 0 1.2px rgba(195,221,92,.95)}

/* Etikett und Wochenplan auf der Bühne */
.bau__tag{position:absolute;left:1rem;top:1rem;z-index:3;display:grid;gap:.3rem;max-width:calc(100% - 2rem);
  padding:.65rem .9rem;border-radius:var(--r-klein);background:rgba(28,28,27,.74);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.bau__tag-w{justify-self:start;font:600 .7rem/1 var(--f-b);letter-spacing:.06em;text-transform:uppercase;color:var(--acc-auf);background:var(--acc);padding:.3rem .5rem;border-radius:var(--r-pille)}
.bau__tag-t{font:700 1.12rem/1.05 var(--f-d);text-transform:uppercase;letter-spacing:.006em;padding-top:.06em}
.bau__nochmal{position:absolute;right:1rem;top:1rem;z-index:3;border:1px solid rgba(255,255,255,.28);background:rgba(28,28,27,.6);color:#fff;
  border-radius:var(--r-pille);padding:.55rem .85rem;font:600 .8rem/1 var(--f-b);cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease)}
.bau__nochmal:hover{background:var(--acc);border-color:var(--acc);color:var(--acc-auf)}
.bau__nochmal[hidden]{display:none}


/* Schritt-Liste rechts */
.bau__schritte{display:grid;gap:.55rem;list-style:none;margin:0;padding:0}
.bau__s{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),opacity .3s var(--ease)}
.bau__s:not(.is-an){opacity:.7}
.bau__s:hover{opacity:1}
.bau__knopf{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:.8rem;width:100%;
  background:none;border:0;padding:.85rem .95rem .45rem;text-align:left;cursor:pointer;color:inherit}
.bau__nr{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--paper-3);font:700 1.02rem/1 var(--f-d);color:var(--txt-2);
  transition:background .3s var(--ease),color .3s var(--ease)}
.bau__titel{font:700 1.14rem/1.02 var(--f-d);text-transform:uppercase;letter-spacing:.006em;padding-top:.06em;color:var(--txt)}
.bau__woche{font:600 .72rem/1 var(--f-b);color:var(--acc-2);background:var(--acc-soft);padding:.36rem .55rem;border-radius:var(--r-pille);white-space:nowrap}
.bau__txt{padding:0 1rem .9rem calc(.95rem + 34px + .8rem);font-size:.88rem;line-height:1.52;color:var(--txt-2)}
.bau__s.is-an{border-color:var(--acc);box-shadow:0 0 0 3px rgba(162,192,53,.16),var(--sh)}
.bau__s.is-an .bau__nr{background:var(--acc);color:var(--acc-auf)}
.bau__s.ist-fertig .bau__nr{background:var(--ink);color:var(--acc)}
.bau.is-auto .bau__s.is-an::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--acc);transform-origin:0 50%;
  animation:schrittZeit var(--dauer,3400ms) linear forwards}
@keyframes schrittZeit{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bau__mobil{display:none}
.bau__cta{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1rem}
.bau__hinweis{font-size:.85rem;font-weight:600;color:var(--txt-2)}

/* =========================================================================
   Familienbetrieb — Bild links, Zahlen mit Zähler
   ========================================================================= */
.familie__raster{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2rem,4.6vw,4.4rem);align-items:center}
.familie__bild{position:relative}
.familie__bild > img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-gross);box-shadow:var(--sh-l)}
.familie__bild .siegel{left:auto;right:-1rem}
.zahlen{display:grid;grid-template-columns:1fr 1fr;margin-top:1.8rem;border-top:1px solid var(--line)}
.zahl{padding:1.1rem 1.2rem 1.1rem 0;border-bottom:1px solid var(--line)}
.zahl:nth-child(odd){border-right:1px solid var(--line)}
.zahl:nth-child(even){padding-left:1.4rem}
.zahl b{display:block;font:700 clamp(2.1rem,3.4vw,2.8rem)/1 var(--f-d);color:var(--acc-2);text-transform:uppercase;padding-top:.06em;font-variant-numeric:tabular-nums}
.zahl > span{display:block;margin-top:.35rem;font-size:.86rem;line-height:1.4;color:var(--txt-2)}

/* =========================================================================
   Bewertungen als Liste — links die Note (klebt), rechts die Stimmen
   ========================================================================= */
.stimmen__raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.stimmen__note{position:sticky;top:104px}
.stimmen__score{display:inline-grid;gap:.55rem;margin-top:1.6rem;justify-items:start;padding:1.2rem 1.4rem;border-radius:var(--r);
  background:var(--paper-2);border:1px solid var(--line);transition:border-color .2s var(--ease),transform .2s var(--spring)}
.stimmen__score:hover{border-color:var(--acc);transform:translateY(-2px)}
.stimmen__score > b{font:700 clamp(4.2rem,7vw,5.8rem)/.85 var(--f-d);color:var(--txt);padding-top:.06em}
.stimmen__score .sterne svg{width:22px;height:22px}
.stimmen__g{display:inline-flex;align-items:center;gap:.5rem;font:600 .9rem/1.2 var(--f-b);color:var(--txt-2)}
.stimme{margin:0;padding:1.45rem 0;border-top:1px solid var(--line)}
.stimme:last-child{border-bottom:1px solid var(--line)}
.stimme .sterne svg{width:15px;height:15px}
.stimme p{margin-top:.6rem;font-size:1.06rem;line-height:1.6;color:var(--txt)}
.stimme footer{margin-top:.7rem;font-size:.84rem;color:var(--txt-2)}
.stimme footer b{color:var(--txt);font-weight:600;margin-right:.55rem}
.stimme footer span{display:inline-block}

/* =========================================================================
   Ein Ansprechpartner — Netz, das sich entwirrt
   ========================================================================= */
.netz__raster{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(1.6rem,3.4vw,3rem);align-items:center}
.netz__karte{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-gross);padding:1rem 1.1rem 1.1rem;box-shadow:var(--sh)}
.netz__schalter{position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(100%,400px);margin:0 auto .8rem;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-pille);padding:4px}
.netz__schalter button{position:relative;z-index:1;border:0;background:none;min-height:44px;padding:.62rem .8rem;border-radius:var(--r-pille);
  font:600 .86rem/1 var(--f-b);color:var(--txt-2);cursor:pointer;white-space:nowrap;transition:color .3s var(--ease)}
.netz__zeiger{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:var(--r-pille);background:var(--ink);
  transition:transform .5s var(--spring),background .3s var(--ease)}
.netz[data-modus="eins"] .netz__zeiger{transform:translateX(100%);background:var(--acc)}
.netz[data-modus="chaos"] .netz__schalter [data-modus="chaos"]{color:#fff}
.netz[data-modus="eins"] .netz__schalter [data-modus="eins"]{color:var(--acc-auf)}

.netz__svg{display:block;width:100%;height:auto;overflow:visible}
.netz__svg--m{display:none;max-width:400px;margin-inline:auto}
.netz__svg path{fill:none;stroke-linecap:round}
.netz__chaos path{stroke:#9E9A90;stroke-width:1.9;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--e-calm)}
.netz__chaos path:nth-child(2){transition-delay:.12s}.netz__chaos path:nth-child(3){transition-delay:.24s}
.netz__chaos path:nth-child(4){transition-delay:.36s}.netz__chaos path:nth-child(5){transition-delay:.48s}.netz__chaos path:nth-child(6){transition-delay:.6s}
.netz__karte.is-da .netz__chaos path{stroke-dashoffset:0}
.netz__chaos{transition:opacity .45s var(--e-calm)}
.netz__anrufe{opacity:0;transition:opacity .4s var(--e-calm) 1s}
.netz__anrufe circle{fill:var(--schlecht)}
.netz__chaos .netz__rueck{stroke:var(--schlecht);stroke-width:1.6;opacity:.55;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--e-calm) 1.1s}
.netz__karte.is-da .netz__chaos .netz__rueck{stroke-dashoffset:0}
.netz__hub{transform-box:fill-box;transform-origin:center;transition:opacity .45s var(--e-calm),transform .6s var(--spring)}
.netz[data-modus="chaos"] .netz__hub{opacity:0;transform:scale(.6)}
.netz[data-modus="chaos"] .netz__gewerke rect{stroke:#D9A39B}
.netz__karte.is-da .netz__anrufe{opacity:1}
.netz[data-modus="eins"] .netz__chaos{opacity:0}

.netz__eins{opacity:0;transition:opacity .3s var(--e-calm)}
.netz[data-modus="eins"] .netz__eins{opacity:1}
.netz__eins path{stroke:var(--acc-2);stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--e-calm) .45s}
.netz__eins .netz__haupt{stroke:var(--acc);stroke-width:7;transition-delay:0s}
.netz[data-modus="eins"] .netz__eins path{stroke-dashoffset:0}
.netz__takt circle{fill:var(--acc)}
.netz__takt{opacity:0;transition:opacity .4s var(--e-calm) 1.2s}
.netz[data-modus="eins"] .netz__takt{opacity:1}

.netz__sie circle{fill:var(--ink)}
.netz__sie path{stroke:#fff}
.netz__svg text{font:600 18px var(--f-b);fill:var(--txt)}
.netz__hub circle{fill:var(--paper-2);stroke:var(--line-2);stroke-width:1.5;transition:fill .45s var(--e-calm),stroke .45s var(--e-calm)}
.netz__hub .netz__hub-t{font:700 18px var(--f-d);letter-spacing:.02em;fill:var(--txt-3);transition:fill .45s var(--e-calm)}
.netz__hub .netz__hub-u{font:500 11px var(--f-b);fill:var(--txt-3)}
.netz[data-modus="eins"] .netz__hub circle{fill:var(--acc);stroke:var(--acc)}
.netz[data-modus="eins"] .netz__hub .netz__hub-t,.netz[data-modus="eins"] .netz__hub .netz__hub-u{fill:var(--ink)}
.netz__gewerke rect{fill:var(--paper);stroke:var(--line-2);stroke-width:1.3;transition:stroke .4s var(--e-calm)}
.netz[data-modus="eins"] .netz__gewerke rect{stroke:var(--acc-2)}
.netz__gewerke text{font-size:17px}
.netz__zahl{text-align:center;margin-top:.5rem;font:600 .98rem/1.3 var(--f-b)}
.netz__zahl-chaos{color:var(--schlecht)}
.netz__zahl-eins{color:var(--acc-2);display:none}
.netz[data-modus="eins"] .netz__zahl-chaos{display:none}
.netz[data-modus="eins"] .netz__zahl-eins{display:inline}

.netz__listen{display:grid;gap:.9rem;justify-items:start}
.vk{width:100%;border-radius:var(--r);padding:1.15rem 1.25rem 1.2rem;transition:opacity .45s var(--e-calm),box-shadow .45s var(--e-calm),border-color .45s var(--e-calm)}
.vk ul{display:grid;gap:.5rem}
.vk li{display:grid;grid-template-columns:20px 1fr;gap:.6rem;align-items:start;font-size:.9rem;line-height:1.45}
.vk li > svg{width:18px;height:18px;margin-top:.12rem}
.vk__kopf{display:flex;align-items:center;gap:.65rem;margin-bottom:.85rem;min-height:40px}
.vk__kopf b{font:700 1.08rem/1 var(--f-d);text-transform:uppercase;padding-top:.06em}
.vk__kopf img{height:48px;width:auto}
.vk__grau{width:38px;height:38px;border-radius:var(--r-klein);background:var(--line);display:grid;place-items:center;color:var(--txt-3);flex:none}
.vk__grau svg{width:20px;height:20px}
.vk--and{background:var(--paper-3);border:1px solid var(--line)}
.vk--and li{color:var(--txt-2)}
.vk--and li > svg{color:var(--schlecht)}
.vk--wir{background:var(--paper);border:1px solid var(--line)}
.vk--wir .haken li{font-size:.9rem}
.vk--wir .ck path{stroke:var(--gut)}
.netz[data-modus="chaos"] .vk--and{box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.netz[data-modus="eins"] .vk--wir{border-color:var(--acc);box-shadow:0 0 0 4px rgba(162,192,53,.14),var(--sh-l)}

/* =========================================================================
   Vorher / Nachher — ein großer Regler, drei Beispiele
   ========================================================================= */
.vn1{max-width:920px;margin-inline:auto}
.vn1__tabs{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.vn1__tabs button{border:1px solid var(--line-2);background:var(--paper);border-radius:var(--r-pille);min-height:44px;padding:.62rem 1.05rem;
  font:600 .88rem/1 var(--f-b);color:var(--txt-2);cursor:pointer;white-space:nowrap;
  transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease),transform .18s var(--spring)}
.vn1__tabs button:hover{border-color:var(--txt);color:var(--txt)}
.vn1__tabs button.is-an{background:var(--ink);border-color:var(--ink);color:#fff}
.vn--gross .vn__bild{aspect-ratio:900/672}
.vn--gross .vn__bild img{transition:opacity .28s var(--e-calm)}
.vn1.is-wechsel .vn__bild img{opacity:.15}
.vn--gross figcaption{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:1.4rem;align-items:start;padding:1.15rem 1.35rem 1.3rem}
.vn--gross figcaption span{margin-top:0}

/* =========================================================================
   3D-Planung — nachgebaute Planungsoberfläche mit Varianten
   ========================================================================= */
.planung{overflow:hidden}
.planung__raster{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2rem,4vw,3.6rem);align-items:center}
.planung__text .haken{margin-top:1.3rem}
.planung__zitat{margin:1.5rem 0 1.7rem;padding:1rem 1.2rem;border-left:3px solid var(--acc);background:var(--paper);border-radius:0 var(--r-klein) var(--r-klein) 0}
.planung__zitat blockquote{margin:0;font:600 1.04rem/1.45 var(--f-b);color:var(--txt)}
.planung__zitat figcaption{margin-top:.45rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.8rem;color:var(--txt-3)}
.planung__zitat .sterne svg{width:13px;height:13px}

.pui{position:relative;background:var(--ink);border-radius:var(--r-gross);padding:.55rem;color:#fff;
  box-shadow:0 34px 70px -18px rgba(28,28,27,.34),0 2px 6px rgba(28,28,27,.08)}
html.js .pui.rv{transform:perspective(1600px) rotateY(-9deg) rotateX(5deg) translateY(10px);transition:opacity .6s var(--e-soft),transform 1.2s var(--e-calm)}
html.js .pui.rv.is-da{transform:perspective(1600px) rotateY(-3deg) rotateX(1.5deg)}
.pui__leiste{display:flex;align-items:center;gap:.75rem;padding:.35rem .5rem .6rem}
.pui__punkte{display:flex;gap:5px}
.pui__punkte i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2)}
.pui__titel{font:600 .8rem/1.2 var(--f-b);color:rgba(255,255,255,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pui__chip{margin-left:auto;font:600 .68rem/1 var(--f-b);padding:.36rem .6rem;border-radius:var(--r-pille);background:rgba(162,192,53,.16);color:var(--acc-3);white-space:nowrap}
.pui__koerper{display:grid;grid-template-columns:minmax(0,1fr) 196px;gap:.55rem}
.pui__ansicht{position:relative;border-radius:16px;overflow:hidden;min-height:340px;background:#2B2A28}
.pui__ansicht > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .75s var(--e-calm)}
.pui__ansicht > img.is-an{opacity:1}
.pui__vis{position:absolute;left:.7rem;top:.7rem;font:600 .64rem/1 var(--f-b);letter-spacing:.07em;text-transform:uppercase;color:#fff;
  background:rgba(28,28,27,.62);padding:.36rem .55rem;border-radius:var(--r-pille);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pui__grundriss{position:absolute;right:.7rem;bottom:.7rem;width:104px;height:auto;padding:6px;border-radius:10px;
  background:rgba(28,28,27,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gr-raum{fill:none;stroke:#fff;stroke-width:2.4}
.gr-dusche{fill:rgba(162,192,53,.28)}
.gr-glas{stroke:var(--acc);stroke-width:2.4}
.gr-moebel{fill:rgba(255,255,255,.42)}
.gr-blick{fill:none;stroke:var(--acc);stroke-width:1.5;stroke-dasharray:3 3}
.gr-kamera{fill:var(--acc)}
.pui__werkzeug{background:#262625;border-radius:16px;padding:.8rem .7rem;display:flex;flex-direction:column;gap:.55rem;min-width:0}
.pui__l{font:600 .66rem/1 var(--f-b);letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.74)}
.pui__varianten{display:grid;gap:.4rem}
.pui__v{display:grid;grid-template-columns:30px minmax(0,1fr);gap:.55rem;align-items:center;text-align:left;width:100%;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:.45rem .5rem;color:#fff;cursor:pointer;
  transition:border-color .25s var(--ease),background .25s var(--ease),transform .18s var(--spring)}
.pui__v:hover{border-color:rgba(255,255,255,.3)}
.pui__v:active{transform:scale(.97)}
.pui__v.is-an{border-color:var(--acc);background:rgba(162,192,53,.13)}
.pui__v b{display:block;font:600 .76rem/1.2 var(--f-b)}
.pui__v em{display:block;font-style:normal;font-size:.68rem;line-height:1.3;color:rgba(255,255,255,.74)}
.pui__muster{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--m1) 0 56%,var(--m2) 56% 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.pui__mat{display:grid;gap:0;margin:.15rem 0 0}
.pui__mat > div{padding:.42rem 0;border-top:1px solid rgba(255,255,255,.08)}
.pui__mat dt{font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.74)}
.pui__mat dd{margin:.12rem 0 0;font-size:.74rem;line-height:1.3;color:#fff;transition:opacity .25s var(--ease)}
.pui__mat.is-wechsel dd{opacity:0}
.pui__cursor{position:absolute;left:0;top:0;z-index:6;width:26px;height:26px;pointer-events:none;opacity:0;
  transform:translate(var(--cx,0px),var(--cy,0px));transition:transform .95s var(--e-soft),opacity .3s var(--ease);filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.pui__cursor path{fill:#fff;stroke:#1C1C1B;stroke-width:1.5;stroke-linejoin:round}
.pui.cursor-an .pui__cursor{opacity:1}
.pui__cursor.klick{animation:cursorKlick .32s var(--ease)}
@keyframes cursorKlick{50%{transform:translate(var(--cx,0px),var(--cy,0px)) scale(.8)}}

/* =========================================================================
   Kosten — das Angebot richtet sich auf, daneben die sechs Kostentreiber
   ========================================================================= */
.kosten__raster{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(2rem,4.6vw,4.4rem);align-items:center}
.ang-buehne{position:relative;perspective:1500px;padding:1.2rem .4rem}
.ang{position:relative;background:#fff;border:1px solid var(--line);border-radius:8px;padding:1.5rem 1.5rem 1.2rem;
  box-shadow:0 44px 80px -24px rgba(28,28,27,.32),0 2px 6px rgba(28,28,27,.06);
  transform-origin:50% 100%;transform:rotateX(26deg) rotateZ(-7deg) translateY(14px);transition:transform 1.3s var(--e-calm)}
.ang-buehne.is-da .ang{transform:rotateX(0) rotateZ(-2deg)}
@supports (animation-timeline:view()){
  .ang{transition:none;animation:angAuf linear both;animation-timeline:view();animation-range:entry 5% cover 42%}
  @keyframes angAuf{from{transform:rotateX(30deg) rotateZ(-8deg) translateY(24px)}to{transform:rotateX(0) rotateZ(-2deg)}}
}
.ang__kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding-bottom:.95rem;border-bottom:2px solid var(--ink)}
.ang__kopf img{height:38px;width:auto}
.ang__kopf > span{text-align:right}
.ang__kopf b{display:block;font:700 1.45rem/1 var(--f-d);text-transform:uppercase;padding-top:.06em}
.ang__kopf span span{display:block;margin-top:.25rem;font-size:.68rem;color:var(--txt-2)}
.ang__betreff{margin:.85rem 0 .5rem;font:600 .78rem/1.4 var(--f-b);color:var(--txt-2)}
.ang__pos{list-style:none;margin:0;padding:0}
.ang__pos li{display:grid;grid-template-columns:24px minmax(0,1fr) 84px;gap:.55rem;align-items:center;padding:.4rem 0;border-bottom:1px solid var(--line);font-size:.75rem;line-height:1.3}
.ang__pos li > span:first-child{color:var(--txt-2);font-variant-numeric:tabular-nums}
.ang__pos i{display:block;justify-self:end;width:var(--w);height:7px;border-radius:4px;background:var(--paper-3)}
.ang__summe{display:grid;grid-template-columns:1fr 84px;align-items:center;padding:.6rem 0 .2rem;font:700 .8rem/1 var(--f-b)}
.ang__summe i{display:block;height:9px;border-radius:4px;background:var(--ink)}
.ang__plan{margin-top:.75rem;padding:.7rem .8rem .8rem;background:var(--paper-2);border-radius:8px}
.ang__plan-t{font:600 .62rem/1 var(--f-b);letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2)}
.ang__plan-w{display:grid;grid-template-columns:repeat(4,1fr);font-size:.62rem;color:var(--txt-2);margin:.45rem 0 .35rem}
.ang__plan-b{position:relative;height:38px;background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:25% 100%}
.ang__plan-b i{position:absolute;height:6px;border-radius:3px;background:var(--acc);left:calc(var(--a) / 4 * 100%);width:calc((var(--b) - var(--a)) / 4 * 100%)}
.ang__plan-b i:nth-child(1){top:2px}.ang__plan-b i:nth-child(2){top:12px}.ang__plan-b i:nth-child(3){top:22px}.ang__plan-b i:nth-child(4){top:32px}
.ang__fuss{margin-top:.8rem;font-size:.68rem;color:var(--txt-2)}
.ang__stempel{position:absolute;right:1.4rem;top:38%;transform:rotate(-11deg);border:2px solid var(--acc-2);color:var(--acc-2);
  font:700 1.05rem/1 var(--f-d);letter-spacing:.14em;text-transform:uppercase;padding:.36rem .6rem .3rem;border-radius:6px;opacity:.85;background:rgba(255,255,255,.7)}

.treiber{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.6rem}
.treiber__k{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:.85rem;row-gap:.2rem;align-items:start;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.05rem;
  transition:border-color .22s var(--ease),transform .22s var(--spring),box-shadow .22s var(--ease)}
.treiber__k:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:var(--sh)}
.treiber__k svg{grid-row:span 2;width:40px;height:40px;padding:8px;border-radius:11px;background:var(--paper);border:1px solid var(--line);color:var(--acc-2)}
.treiber__k b{font:600 .95rem/1.3 var(--f-b);color:var(--txt)}
.treiber__k p{font-size:.84rem;line-height:1.5;color:var(--txt-2)}
.kosten__cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.7rem}

/* Kleine Hilfstexte auf der Themenseite mindestens 4,5 : 1 (Startseiten-Token txt-3 liegt bei 4,2) */
.lp .form__kopf p,.lp .fortschritt__z,.lp .google-zeile,.lp .vn__hinweis,.lp .familie .siegel span{color:var(--txt-2)}
.lp .chat__head b + span{color:#1A7A43}
.lp .chat__status > span > span,.lp .chat__tag{color:var(--txt-2)}

/* Hinweis auf Symbolbilder als eigene Fläche mit Info-Icon (Fehlerliste 12.09.) */
.vn__hinweis--box{display:flex;align-items:flex-start;gap:.6rem;max-width:920px;margin:1.2rem auto 0;padding:.8rem 1rem;text-align:left;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-klein);font-size:.82rem;line-height:1.5}
.vn__hinweis--box svg{width:18px;height:18px;flex:none;margin-top:.1rem;color:var(--acc-2)}

/* Liste direkt nach dem Einleitungsabsatz braucht Luft */
.lead + .haken{margin-top:1.3rem}

/* Einzugsgebiet auf weißem Grund: Rand-Verlauf angleichen */
#gebiet .gebiet__karte::before{background:linear-gradient(to bottom,var(--paper),transparent)}
#gebiet .gebiet__karte::after{background:linear-gradient(to top,var(--paper),transparent)}

/* Endlosschleifen laufen nur, solange sie im Bild sind */
html.js [data-loop]:not(.loop-an) .marken__spur,
html.js [data-loop]:not(.loop-an) .ref__reihe{animation-play-state:paused}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:1100px){
  .bau__raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pui__koerper{grid-template-columns:minmax(0,1fr) 176px}
}

@media (max-width:980px){
  .bau__raster,.familie__raster,.stimmen__raster,.netz__raster,.planung__raster,.kosten__raster{grid-template-columns:minmax(0,1fr)}
  .bau__raster{grid-template-areas:"buehne" "liste" "cta";grid-template-rows:auto}
  .bau__buehne{height:clamp(420px,96vw,520px)}
  .bau__schritte{display:flex;gap:.45rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.2rem .1rem .5rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .bau__schritte::-webkit-scrollbar{display:none}
  .bau__s{flex:none;scroll-snap-align:start;opacity:1}
  .bau__s:not(.is-an){opacity:.85}
  .bau__knopf{grid-template-columns:28px auto;gap:.55rem;padding:.55rem .85rem .55rem .55rem}
  .bau__nr{width:28px;height:28px;font-size:.92rem}
  .bau__titel{font-size:1rem;white-space:nowrap}
  .bau__woche,.bau__txt{display:none}
  .bau__mobil{display:block;margin-top:.5rem;padding:1rem 1.1rem;border-radius:var(--r);background:var(--paper);border:1px solid var(--line)}
  .bau__mobil p{font-size:.93rem;line-height:1.55;color:var(--txt-2)}
  .familie__bild{max-width:440px;margin-inline:auto;width:100%}
  .familie__bild .siegel{right:.6rem;bottom:-.9rem}
  .familie__text{margin-top:.8rem}
  .stimmen__note{position:static}
  .netz__listen{justify-items:stretch}
  .netz__listen .btn{justify-self:start}
  .pui{margin-top:.6rem}
  html.js .pui.rv,html.js .pui.rv.is-da{transform:none}
  .kosten__raster{gap:1.6rem}
  .ang-buehne{max-width:520px;margin-inline:auto;width:100%;order:2}
  .kosten__text{order:1}
}

@media (max-width:760px){
  .bau__tag{left:.7rem;top:.7rem;padding:.55rem .7rem}
  .bau__tag-t{font-size:1rem}
  .bau__nochmal{right:.7rem;top:auto;bottom:.8rem}
  .bau__cta .btn{width:100%}
  .bau__hinweis{width:100%;text-align:center}
  .zahl{padding-right:.8rem}
  .zahl:nth-child(even){padding-left:.9rem}
  .netz__karte{padding:.8rem .6rem .9rem}
  .netz__schalter button{font-size:.8rem;padding:.6rem .5rem}
  .netz__svg--d{display:none}
  .netz__svg--m{display:block}
  .vn--gross figcaption{grid-template-columns:1fr;gap:.4rem}
  .vn1__tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:.3rem;scrollbar-width:none}
  .vn1__tabs::-webkit-scrollbar{display:none}
  .pui__koerper{grid-template-columns:1fr}
  .pui__ansicht{min-height:0;aspect-ratio:1400/939}
  .pui__varianten{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pui__v{grid-template-columns:1fr;justify-items:center;text-align:center;gap:.35rem;padding:.55rem .35rem}
  .pui__v em{display:none}
  .pui__mat{grid-template-columns:1fr 1fr;column-gap:.8rem}
  .pui__grundriss{width:84px}
  .treiber{grid-template-columns:1fr}
  .kosten__cta .btn{width:100%}
  .ang{padding:1.2rem 1.1rem 1rem}
  .ang__pos li{grid-template-columns:22px minmax(0,1fr) 60px;font-size:.7rem}
  .ang__summe{grid-template-columns:1fr 60px}
  .ang__stempel{right:.8rem;font-size:.9rem}
}

@media (max-width:420px){
  .lp .btn--lg{padding-inline:1rem;font-size:clamp(.88rem,4.2vw,1rem)}
  .netz__listen .btn{width:100%}
  .ang-buehne{padding-inline:.7rem}
  .ang-buehne.is-da .ang{transform:rotateZ(-1deg)}
  .bau__buehne{height:410px}
  .pui__titel{font-size:.72rem}
  .pui__chip{display:none}
}

/* =========================================================================
   Weniger Bewegung: Endzustand sofort, keine Schleifen
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .r3-f,.r3-l,.r3-box,.r3-box > i,.r3-glas,.r3-fix,.r3-leitung path,.r3-fliese,.r3-druecker{transition:none !important}
  .ist-1 .r3-alt--wand,.ist-1 .r3-alt--boden,.ist-1 .r3-wanne,.ist-1 .r3-wanne > i{animation:none;opacity:0}
  .bau.is-auto .bau__s.is-an::after{animation:none;display:none}
  .netz__svg path,.netz__chaos,.netz__eins,.netz__takt,.netz__anrufe{transition:none !important}
  html.js .pui.rv,html.js .pui.rv.is-da{transform:none;transition:opacity .01s}
  .pui__cursor{display:none}
  .pui__ansicht > img{transition:none}
  .ang,.ang-buehne.is-da .ang{animation:none;transition:none;transform:rotateZ(-2deg)}
  .treiber__k,.stimmen__score{transition:none}
}