/* ============================================================
   Badipool – Runde 4: neuer Hero der Startseite (Entscheid Gman 05.10.2026)
   Wird nach runde3.css eingebunden, gilt nur für .hero--r4 und den Upgrade-Einstieg.
   ============================================================ */
.r4-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Ruhiges Bild: kein Gesamtverlauf, kein Glanz, kein Zoom/Parallax, keine Filter */
.hero--r4{position:relative;overflow:hidden;align-items:center;background:#7fb2dd}
.hero--r4::after{content:none}
.hero--r4 .hero-bg{top:0;transform:none !important;will-change:auto}
.hero--r4 .hero-bg img{animation:none;filter:none;transform:none;will-change:auto;object-position:center 62%}
.hero--r4 .hero-bg video.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;animation:none;filter:none;transform:none;will-change:auto;z-index:1;pointer-events:none}
.hero--r4 .hero-text{padding-top:clamp(2rem,5vh,4rem);padding-bottom:clamp(2rem,6vh,4.5rem)}

/* Lokaler, weicher Verlauf nur hinter dem Text */
.hero-inhalt{position:relative;max-width:48rem}
.hero-inhalt::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-30% -22% -42% -48%;
  background:radial-gradient(closest-side,rgba(6,20,37,.7) 0%,rgba(6,20,37,.64) 52%,rgba(6,20,37,.44) 70%,rgba(6,20,37,.16) 88%,rgba(6,20,37,0) 100%)}

/* Typografie (Sol): sans-serif fett, «Handwerk» kursiv mit Serife */
.hero--r4 h1{font-size:clamp(2.05rem,4.8vw,4.25rem);font-weight:700;letter-spacing:-.045em;line-height:1.05;margin:0 0 1.1rem;color:#fff;max-width:34ch;text-shadow:0 1px 18px rgba(6,20,37,.35)}
.hero--r4 h1 span{display:block}
.hero--r4 h1 em{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--orange-hell)}
.hero-unterzeile{font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.45;color:#fff;max-width:34ch;margin:0 0 1.6rem;text-shadow:0 1px 10px rgba(6,20,37,.45)}
.hero-frage{font-size:.95rem;font-weight:700;color:#fff;margin:0 0 .65rem;text-shadow:0 1px 8px rgba(6,20,37,.45)}

/* Drei schlanke Knöpfe */
.hero-wahl{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.hero--r4 .knopf{padding:.72rem 1.35rem;font-size:1rem;border-radius:999px;border-width:2px}
.knopf--weiss{background:#fff;color:var(--blau);border-color:#fff}
.knopf--weiss:hover{background:var(--blau-hell);border-color:var(--blau-hell);color:var(--blau)}
.hero-textlink{margin:1rem 0 0;font-size:.95rem}
.hero-textlink a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:.25em;text-shadow:0 1px 8px rgba(6,20,37,.5)}
.hero-textlink a:hover{color:var(--orange-hell)}

/* Vertrauenszeile mit Linien-Icons */
.vertrauen{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem}
.vertrauen li{display:flex;align-items:center;gap:.5rem;font-size:.92rem;font-weight:600;color:#fff;text-shadow:0 1px 8px rgba(6,20,37,.5)}
.vertrauen-icon{width:22px;height:22px;flex:none;color:var(--orange-hell)}

/* Handy: eigener Hochformat-Zuschnitt, Text oben im Himmel, Pool unten sichtbar */
@media (max-width:699px){
  .hero.hero--r4{min-height:0;height:auto;align-items:flex-start;background:#3d7fd0}
  .hero--r4 .hero-bg{top:0;bottom:0;height:auto;-webkit-mask-image:none;mask-image:none}
  .hero--r4 .hero-bg img{object-position:center 82%}
  .hero--r4 .hero-bg video.hero-video{object-position:center 82%}
  .hero--r4 .hero-text{padding-top:1.6rem;padding-bottom:clamp(15rem,62vw,19rem)}
  .hero-inhalt::before{
    inset:-1.6rem -1.25rem -4.5rem;
    background:linear-gradient(180deg,rgba(6,20,37,.5) 0%,rgba(6,20,37,.55) 35%,rgba(6,20,37,.56) 80%,rgba(6,20,37,.35) 92%,rgba(6,20,37,0) 100%)}
  .hero--r4 h1{font-size:clamp(1.85rem,8.8vw,2.55rem);margin-bottom:.8rem;max-width:18ch}
  .hero-unterzeile{margin-bottom:1.2rem}
  .hero-wahl{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
  .hero-wahl .knopf{width:100%;justify-content:center;text-align:center;padding:.7rem .8rem}
  .vertrauen{gap:.45rem 1.1rem;margin-top:1.2rem}
  .vertrauen li{font-size:.85rem}
}

/* Upgrade-Einstieg direkt unter dem Hero */
.upgrade-einstieg{background:var(--blau-hell)}
.upgrade-einstieg-innen{display:grid;gap:1.25rem;align-items:end}
.upgrade-einstieg h2{font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.03em;line-height:1.1;margin-bottom:.75rem}
.upgrade-einstieg h2 em{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--orange)}
.upgrade-einstieg .lead{max-width:56ch;margin:0}
.upgrade-einstieg-knopf{margin:0}
@media (min-width:900px){.upgrade-einstieg-innen{grid-template-columns:1fr auto;gap:3rem}}

/* Poster/video is LCP path; static picture only for reduced-motion (avoids competing downloads) */
.hero--r4 .hero-bg > picture.hero-static{display:none}
@media (prefers-reduced-motion:reduce){
  .hero--r4 .hero-text > *{animation:none}
  .hero--r4 .hero-bg video.hero-video{display:none !important}
  .hero--r4 .hero-bg > picture.hero-static{display:block}
  .hero--r4 .hero-bg > picture.hero-static img{width:100%;height:100%;object-fit:cover}
}

/* ============================================================
   Runde 5 Fortsetzung: Logo-Welle unter Hero, Fuss-Welle, Magazin
   ============================================================ */

/* Dezente Logo-Welle unter dem Start-Hero (füllt Farbe des Folgeabschnitts) */
.hero--r4 .hero-welle{
  position:absolute;left:0;right:0;bottom:-1px;z-index:4;pointer-events:none;
  height:clamp(28px,4.2vw,48px);color:var(--blau-hell);line-height:0
}
.hero--r4 .hero-welle svg{display:block;width:100%;height:100%}
@media (max-width:699px){
  .hero--r4 .hero-welle{height:clamp(22px,7vw,36px);color:#e8eef5}
}

/* Dezente Welle oben in der Fusszeile */
.fuss{position:relative}
.fuss-welle{
  position:absolute;left:0;right:0;top:0;z-index:0;pointer-events:none;
  height:clamp(18px,2.8vw,32px);color:rgba(143,208,242,.22);line-height:0;
  transform:translateY(-70%)
}
.fuss-welle svg{display:block;width:100%;height:100%}
.fuss > .wrap,.fuss > .fuss-wort{position:relative;z-index:1}

/* Magazin */
.magazin-raster{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:640px){.magazin-raster{grid-template-columns:1fr 1fr;gap:1.5rem}}
@media (min-width:1100px){.magazin-raster{grid-template-columns:repeat(4,1fr);gap:1.35rem}}
.magazin-karte{position:relative;display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:0 8px 28px rgba(18,46,77,.08);text-decoration:none;color:inherit;min-height:100%}
.magazin-karte:hover .mehr{color:var(--orange-dunkel)}
.magazin-karte:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.magazin-karte-bild{aspect-ratio:3/4;overflow:hidden;background:var(--blau-hell)}
@media (min-width:640px){.magazin-karte-bild{aspect-ratio:3/4}}
.magazin-karte-bild img{width:100%;height:100%;object-fit:cover;display:block}
.magazin-karte-text{padding:1.1rem 1.15rem 1.35rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.magazin-karte .saison{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--orange);margin:0}
.magazin-karte h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.55rem,2.4vw,1.9rem);line-height:1.05;letter-spacing:-.02em;margin:0;color:var(--blau)}
.magazin-karte p{margin:0;color:var(--grau);font-size:.92rem;line-height:1.45}
.magazin-karte .mehr{margin-top:auto;padding-top:.7rem;font-weight:700;font-size:.9rem;color:var(--blau);border-bottom:2px solid var(--orange);align-self:flex-start;text-decoration:none;transition:color .2s}

/* Magazin-Artikel */
.artikel-kopf{padding-bottom:0}
.artikel-kopf h1{font-family:var(--font-serif);font-weight:400;font-style:normal;letter-spacing:-.025em;line-height:1.05;font-size:clamp(2.4rem,7vw,4.8rem);max-width:16ch}
.artikel-kopf h1 em{font-style:italic}
.artikel-meta{font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--orange);margin:0 0 .6rem}
.artikel-hero{margin:0;border-radius:0;overflow:hidden;background:var(--blau-hell)}
.artikel-hero img{width:100%;height:auto;max-height:min(72vh,720px);object-fit:cover;display:block;aspect-ratio:16/9}
.artikel-fliess{max-width:38rem;margin:0 auto;font-size:1.05rem;line-height:1.7}
.artikel-fliess p{margin:0 0 1.15rem}
.artikel-fliess .einstieg{font-size:1.2rem;color:var(--blau);font-weight:600;line-height:1.55}
.demo-hinweis{display:flex;align-items:flex-start;gap:.65rem;background:#fff8f3;border:1.5px solid var(--orange-hell);border-radius:var(--radius);padding:.75rem 1rem;margin:0 0 1.25rem;color:var(--blau);font-size:.92rem;font-weight:600}
.demo-hinweis strong{color:var(--orange)}

/* Gman 05.10.2026: bewegte Wellen unter dem Hero zurueck (Farbe = Folgeabschnitt) */
.hero--r4 .welle--r4{z-index:4;color:var(--blau-hell)}
.hero--r4 .welle--r4::before,.hero--r4 .welle--r4::after{background-image:none;background-color:currentColor;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-size:50% 100%;mask-size:50% 100%}
.hero--r4 .welle--r4::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 30 C 160 -6, 300 -6, 480 30 S 800 66, 960 30 S 1280 -6, 1440 30 V80 H0Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 30 C 160 -6, 300 -6, 480 30 S 800 66, 960 30 S 1280 -6, 1440 30 V80 H0Z'/%3E%3C/svg%3E")}
.hero--r4 .welle--r4::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 50 C 120 14, 240 14, 360 50 S 600 86, 720 50 S 960 14, 1080 50 S 1320 86, 1440 50 V80 H0Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 50 C 120 14, 240 14, 360 50 S 600 86, 720 50 S 960 14, 1080 50 S 1320 86, 1440 50 V80 H0Z'/%3E%3C/svg%3E")}
@media (max-width:699px){.hero--r4 .welle--r4{color:#e8eef5}}
@media (prefers-reduced-motion:reduce){.welle::before,.welle::after{animation:none}}

/* ============================================================
   Hallmark-Entscheide Gman 06.10.2026
   Fokusring, Fusszeilen-Umbruch, Vergleichstabellen, Klarblick-Ablauf, Einbau-Seite
   ============================================================ */

/* Fokusring: auf dunklen Flächen hell (#f0b58c auf Navy 7,7:1 statt 2,78:1) */
.abschnitt--dunkel :focus-visible,.cta-band :focus-visible,.fuss :focus-visible,.zaehler-band :focus-visible,
.seitenkopf :focus-visible,.hero :focus-visible,.bildband :focus-visible,.zitat :focus-visible,
.panel:focus-visible,.streifen-teil:focus-visible,.fuss-wort:focus-visible{outline-color:var(--orange-hell)}
/* Start-Hero liegt auf hellem Himmel: weisser Ring mit Navy-Kante */
.hero--r4 :focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px var(--blau-dunkel)}
.knopf:active{transform:translateY(1px)}


/* ---------- Vergleichstabelle (Upgrades, Jahresservice, Neue Pools) ---------- */
.vergleich-wrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rand);border-radius:var(--radius);background:#fff;max-width:100%}
.vergleich-wrap:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.vergleich{width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem;line-height:1.5;min-width:680px;overflow-wrap:normal;word-break:normal;hyphens:manual}
.vergleich caption{text-align:left;padding:0 0 .75rem;color:var(--grau);font-size:.9rem;caption-side:bottom;padding:.75rem 1rem}
.vergleich th,.vergleich td{padding:.95rem 1.1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--rand)}
.vergleich thead th{background:var(--blau);color:#fff;font-weight:700;font-size:1.05rem;line-height:1.3;vertical-align:bottom}
.vergleich thead th:first-child{background:var(--blau-dunkel);font-size:.8rem;font-weight:600;color:#cfdae6;letter-spacing:.04em}
.vergleich thead th + th{border-left:1px solid rgba(255,255,255,.14)}
.vergleich .kopf-klein{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-hell);font-weight:700;margin-bottom:.25rem}
.vergleich .kopf-zusatz{display:block;font-size:.85rem;font-weight:400;color:#dfe8f1;margin-top:.3rem}
.vergleich tbody th{color:var(--blau);font-weight:700;background:var(--hell);width:24%;font-size:.92rem}
.vergleich td{color:var(--text)}
.vergleich td + td{border-left:1px solid var(--rand)}
.vergleich tbody tr:last-child th,.vergleich tbody tr:last-child td{border-bottom:0}
.vergleich .ja{display:inline-flex;align-items:flex-start;gap:.5rem}
.vergleich .ja::before{content:"";flex:none;width:.8rem;height:.42rem;margin-top:.42em;border-left:3px solid var(--orange);border-bottom:3px solid var(--orange);transform:rotate(-45deg)}
.vergleich .leer{color:#8593a1}
.vergleich .hervor{background:#fff8f3}
.vergleich thead th.hervor{background:#1b3d63}
.vergleich .zusatz th{background:#fdf1e8}
.vergleich .zusatz td{background:#fffaf6}
.vergleich .klein{display:block;margin-top:.25rem}
.vergleich a{font-weight:700}
/* Kopfspalte bleibt beim seitlichen Wischen stehen */
@media (max-width:899px){
  .vergleich--wisch tbody th,.vergleich--wisch thead th:first-child{position:sticky;left:0;z-index:1;width:auto;min-width:8.5rem;max-width:9.5rem;box-shadow:1px 0 0 var(--rand)}
  .vergleich--wisch{font-size:.9rem;min-width:620px}
  .vergleich--wisch th,.vergleich--wisch td{padding:.8rem .85rem}
}
.wisch-hinweis{display:none;font-size:.85rem;color:var(--grau);margin:0 0 .6rem}
@media (max-width:899px){.wisch-hinweis{display:block}}
.vergleich-notiz{font-size:.9rem;color:var(--grau);margin:.85rem 0 0;max-width:75ch}

/* Neue Pools: Bauarten-Vergleich, auf dem Handy gestapelt */
.vergleich--bauarten{min-width:960px}
.vergleich--bauarten tbody th{width:17%}
.bauart-kopf{display:flex;flex-direction:column;gap:.45rem}
.bauart-bild{margin:0;width:100%;max-width:150px}
.bauart-bild img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px;background:var(--blau-hell)}
.bauart-bild figcaption{font-size:.72rem;color:var(--grau);margin-top:.25rem;font-weight:600;line-height:1.3}
.bauart-name{font-size:1.1rem;color:var(--blau);font-weight:800;line-height:1.2}
.bauart-art{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);font-weight:700}
@media (max-width:899px){
  .vergleich-wrap--stapel{overflow:visible;border:0;background:none}
  .vergleich--bauarten{min-width:0;display:block}
  .vergleich--bauarten thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .vergleich--bauarten tbody{display:grid;gap:1rem}
  .vergleich--bauarten tr{display:block;border:1px solid var(--rand);border-radius:var(--radius);background:#fff;overflow:hidden}
  .vergleich--bauarten tbody th{display:block;width:auto;background:var(--hell);border-bottom:1px solid var(--rand)}
  .vergleich--bauarten td{display:grid;grid-template-columns:7.2rem minmax(0,1fr);gap:.75rem;border-left:0 !important;padding:.7rem 1rem}
  .vergleich--bauarten td::before{content:attr(data-label);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);font-weight:700;padding-top:.2rem}
  .vergleich--bauarten tbody tr td:last-child{border-bottom:0}
  .vergleich--bauarten tbody tr:last-child th{border-bottom:1px solid var(--rand)}
  .bauart-kopf{flex-direction:row;align-items:center;gap:.85rem}
  .bauart-bild{max-width:118px;flex:none}
}

/* ---------- Klarblick: Ablauf als Schrittfolge (heute / geplant auf dem Handy) ---------- */
.handy-ablauf{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:hs}
.handy-schritt{counter-increment:hs;position:relative;display:grid;grid-template-columns:3rem minmax(0,1fr);gap:0 1rem;padding-bottom:2rem}
.handy-schritt::before{content:counter(hs);grid-row:1 / span 3;width:3rem;height:3rem;border-radius:50%;background:var(--blau);color:#fff;font-weight:800;font-size:1.25rem;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.handy-schritt::after{content:"";position:absolute;left:calc(1.5rem - 1px);top:3rem;bottom:0;width:2px;background:var(--rand)}
.handy-schritt:last-child{padding-bottom:0}
.handy-schritt:last-child::after{display:none}
.handy-schritt h3{margin:.55rem 0 .4rem;font-size:1.35rem}
.handy-heute{margin:0 0 .9rem;color:var(--text);max-width:46ch}
.handy-heute .handy-tag{display:inline-block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--blau);background:var(--blau-hell);border-radius:3px;padding:.1rem .45rem;margin-right:.4rem;vertical-align:.1em}
.handy-geplant{display:flex;gap:.7rem;align-items:flex-start;border:1.5px dashed #b9c7d6;border-radius:var(--radius);padding:.75rem .9rem;color:var(--grau);font-size:.93rem;background:#fff;max-width:46ch}
.handy-geplant svg{width:22px;height:22px;flex:none;color:var(--blau);margin-top:.1rem}
.handy-geplant .badge{margin-right:.35rem}
.handy-geplant strong{display:block;color:var(--blau);font-size:.85rem;margin-bottom:.1rem}
@media (min-width:900px){
  .handy-ablauf{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 2rem}
  .handy-schritt{grid-template-columns:minmax(0,1fr);padding-bottom:0;align-content:start}
  .handy-schritt::before{grid-row:auto;margin-bottom:.5rem}
  .handy-schritt::after{left:3.75rem;right:-1.25rem;top:1.5rem;bottom:auto;width:auto;height:2px}
  .handy-schritt:not(:last-child) h3::after{content:"→";position:absolute;right:-1.6rem;top:.55rem;color:var(--orange);font-weight:700;font-size:1.3rem;line-height:1}
}
.handy-fuss{margin:1.5rem 0 0;font-size:.9rem;color:var(--grau)}

/* Klarblick: «passt, wenn …» als Satzliste */
.passt-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--rand);max-width:68rem}
.passt-liste li{display:grid;gap:.25rem 2rem;padding:1rem 0;border-bottom:1px solid var(--rand)}
@media (min-width:800px){.passt-liste li{grid-template-columns:minmax(0,22rem) minmax(0,1fr);align-items:baseline}}
.passt-liste strong{color:var(--blau);font-size:1.15rem;font-weight:700}
.passt-liste span{color:var(--grau)}

/* Kompakte Paketliste (Klarblick-Seite) */
.paket-liste{margin:0;display:grid;gap:0;border-top:1px solid var(--rand);max-width:68rem}
.paket-liste div{display:grid;gap:.2rem 2rem;padding:.9rem 0;border-bottom:1px solid var(--rand)}
@media (min-width:800px){.paket-liste div{grid-template-columns:minmax(0,22rem) minmax(0,1fr)}}
.paket-liste dt{font-weight:700;color:var(--blau)}
.paket-liste dt span{font-weight:400;color:var(--grau)}
.paket-liste dd{margin:0;color:var(--grau)}

/* Ruhiger Abschluss statt dunklem, zentriertem Band */
.abschluss{border-top:1px solid var(--rand)}
.abschluss-innen{display:grid;gap:1rem 3rem;align-items:end}
@media (min-width:900px){.abschluss-innen{grid-template-columns:minmax(0,1fr) auto}}
.abschluss h2{margin-bottom:.4rem}
.abschluss .lead{margin:0}
.abschluss .knoepfe{margin-top:0}

/* Einbau-Seite: Hinweis Beispielbilder und neutrale Ablauf-Infos */
.beispiel-hinweis{display:flex;gap:.75rem;align-items:flex-start;background:var(--blau-hell);border-radius:var(--radius);padding:1rem 1.15rem;color:var(--blau);font-size:.95rem;max-width:62rem;margin:0 0 2rem}
.beispiel-hinweis svg{width:22px;height:22px;flex:none;margin-top:.1rem}
.beispiel-hinweis p{margin:0}
.eckdaten--text dd{font-weight:400;color:var(--text);line-height:1.5}
.eckdaten--text dt{color:var(--blau)}
@media (min-width:1024px){.eckdaten--text{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){
  .vergleich--bauarten{table-layout:fixed}
  .vergleich--bauarten th:nth-child(1){width:16%}
  .vergleich--bauarten th:nth-child(2){width:20%}
  .vergleich--bauarten th:nth-child(3){width:17%}
  .vergleich--bauarten th:nth-child(4){width:22%}
  .vergleich--bauarten th:nth-child(5){width:14%}
  .vergleich--bauarten th:nth-child(6){width:11%}
}
@media (max-width:899px){.vergleich--bauarten caption{display:block;text-align:left;padding:0 0 .9rem}}

/* =====================================================================
   Partnerseiten (06.10.2026): WaterRows, Edelstahl, Mosaik
   Hover nur Farbwechsel, keine Scroll-Effekte.
   ===================================================================== */
.r-3-4{aspect-ratio:3/4}
.r-21-9{aspect-ratio:21/9}
.partner-hinweis{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25rem .55rem;margin:1.1rem 0 0;padding:.45rem .9rem;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(11,31,54,.55);color:#fff;font-weight:600;font-size:.92rem;line-height:1.35}
.partner-hinweis svg{width:1rem;height:1rem;flex:none;color:#8fd0f2}
.partner-hinweis-zusatz{font-weight:400;color:#d6e1ec}
.partner-hinweis-zusatz::before{content:"·";margin-right:.55rem;color:#9fb3c8}
@media (max-width:599px){.partner-hinweis{border-radius:var(--radius);align-items:flex-start}.partner-hinweis svg{margin-top:.15rem}.partner-hinweis-zusatz{display:block;margin-top:.1rem}.partner-hinweis-zusatz::before{display:none}}
.cta-tel{margin:1.1rem 0 0;color:#cfdae6;font-size:.95rem}
.cta-tel a{color:#fff;font-weight:700}
.cta-tel a:hover{color:var(--orange-hell)}

/* Interne Links als ruhige Liste */
.weiter-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--rand);display:grid}
@media (min-width:900px){.weiter-liste{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3rem}}
.weiter-liste li{border-bottom:1px solid var(--rand)}
.weiter-liste a{display:grid;gap:.15rem;padding:1rem 0;text-decoration:none;color:var(--text)}
.weiter-liste strong{color:var(--blau);font-size:1.08rem}
.weiter-liste strong::after{content:" →";color:var(--orange)}
.weiter-liste span{color:var(--grau);font-size:.95rem}
.weiter-liste a:hover strong{color:var(--orange)}

/* WaterRows: Modelle im Massstab */
.wr-steuerung{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:flex-end;margin:0 0 1rem}
.wr-steuerung[hidden]{display:none}
.wr-fams{display:flex;flex-wrap:wrap;gap:.4rem}
.wr-fam{font:inherit;font-size:.92rem;font-weight:600;padding:.45rem .85rem;border:1.5px solid var(--blau);border-radius:999px;background:#fff;color:var(--blau);cursor:pointer}
.wr-fam:hover{background:var(--blau-hell)}
.wr-fam[aria-pressed="true"]{background:var(--blau);color:#fff}
.wr-regler{display:grid;grid-template-columns:minmax(0,16rem) auto;gap:.25rem .75rem;align-items:center}
.wr-regler label{grid-column:1 / -1;font-size:.85rem;font-weight:700;color:var(--grau)}
.wr-regler input{width:100%;accent-color:var(--blau)}
.wr-regler output{font-weight:700;color:var(--blau);min-width:4.5rem}
.wr-massstab{position:relative;--wr-cols:8.5rem minmax(0,30rem);padding-top:2rem}
/* .foto-credit overlay removed (tooltip only) */
@media (min-width:1100px){.wr-massstab{--wr-cols:8.5rem minmax(0,27rem) minmax(0,1fr)}}
.wr-lineal{display:grid;grid-template-columns:var(--wr-cols);gap:1rem;font-size:.75rem;color:var(--grau);margin-bottom:.35rem}
.wr-lineal-titel{font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.wr-lineal-skala{position:relative;height:1.3rem;border-bottom:1px solid var(--rand)}
.wr-lineal-skala span{position:absolute;left:calc(var(--m) / 11 * 100%);bottom:0;transform:translateX(-50%);padding-bottom:.3rem;line-height:1;white-space:nowrap}
.wr-lineal-skala span::after{content:"";position:absolute;left:50%;bottom:-1px;width:1px;height:.3rem;background:var(--grau)}
.wr-lineal-skala span:first-child{transform:none}
.wr-liste{list-style:none;margin:0;padding:0}
.wr-modell{display:grid;grid-template-columns:var(--wr-cols);gap:.5rem 1.5rem;align-items:center;padding:.7rem 0;border-bottom:1px solid var(--rand)}
.wr-modell[hidden]{display:none}
.wr-name strong{display:block;color:var(--blau);font-size:1.05rem}
.wr-name span{font-size:.8rem;color:var(--grau)}
.wr-plan{min-width:0}
.wr-fuss{width:calc(var(--l) / 11 * 100%);aspect-ratio:var(--l) / var(--b);background:var(--blau);border-radius:3px;overflow:hidden}
.wr-fuss img{display:block;width:100%;height:100%;object-fit:fill}
.wr-fuss--gekuerzt img{object-fit:cover;object-position:right center}
.wr-daten{display:grid;grid-template-columns:repeat(2,max-content);gap:.2rem 1.75rem;margin:0;font-size:.88rem}
.wr-daten div{display:flex;gap:.4rem;flex-wrap:wrap}
.wr-daten dt{color:var(--grau)}
.wr-daten dd{margin:0;font-weight:700;color:var(--blau)}
.wr-daten sup a{color:var(--orange);text-decoration:none}
@media (max-width:1099px){.wr-daten{grid-column:2}}
@media (max-width:599px){
  .wr-massstab{--wr-cols:minmax(0,1fr)}
  .wr-daten{grid-template-columns:repeat(2,minmax(0,1fr));gap:.2rem 1rem}
  .wr-lineal-titel{display:none}
  .wr-name{display:flex;gap:.5rem;align-items:baseline}
  .wr-daten{grid-column:1}
}
.wr-familien{margin-top:2rem}
@media (min-width:1024px){.wr-familien{grid-template-columns:repeat(5,1fr)}}
.wr-farben-wrap{position:relative;padding-top:2rem}
/* .foto-credit overlay removed (tooltip only) */
.wr-farben{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.wr-farben figure{margin:0}
.wr-farben figcaption{margin-top:.45rem;font-size:.88rem;line-height:1.3}
.wr-farben figcaption strong{display:block;color:var(--blau)}
.wr-farben figcaption span{color:var(--grau);font-size:.8rem}
.wr-aufbau{display:grid;gap:2rem;align-items:start}
@media (min-width:900px){.wr-aufbau{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem}}
.wr-schichten{list-style:none;margin:0;padding:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--rand);background:#fff}
.wr-schichten li{display:grid;grid-template-columns:2.6rem minmax(0,1fr);grid-template-rows:auto auto;column-gap:1rem;padding:.85rem 1.1rem;border-top:1px solid var(--rand)}
.wr-schichten li:first-child{border-top:0}
.wr-schichten li::before{content:"";grid-row:1 / span 2;border-radius:3px;background:var(--c)}
.wr-schichten li:nth-child(1){--c:#dfe9ee}
.wr-schichten li:nth-child(2){--c:#a9c3d6}
.wr-schichten li:nth-child(3){--c:#2f4d6d}
.wr-schichten li:nth-child(4){--c:#a9b4bf}
.wr-schichten li:nth-child(5){--c:#5a6572}
.wr-schichten strong{color:var(--blau)}
.wr-schichten span{color:var(--grau);font-size:.9rem}
.wr-galerie{display:grid;gap:1rem}
.wr-galerie figure{margin:0;display:flex;flex-direction:column}
.wr-galerie figcaption{margin-top:.45rem;font-size:.88rem;color:var(--grau)}
@media (min-width:900px){
  .wr-galerie{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,auto)}
  .wr-g-breit{grid-column:span 2}
  .wr-g-voll{grid-column:1 / -1}
  .wr-g-breit .bild,.wr-g-hoch .bild{aspect-ratio:auto;height:27rem}
  .wr-g-voll .bild{aspect-ratio:auto;height:24rem}
}
.vergleich--linien,.vergleich--wege{min-width:560px}
.vergleich--linien tbody th,.vergleich--wege tbody th{width:20%}
.vergleich thead a{color:#fff;text-decoration:underline;text-underline-offset:.2em}
.vergleich thead a:hover{color:var(--orange-hell)}
.wr-weg{list-style:none;counter-reset:weg;margin:0 0 1.25rem;padding:0}
.wr-weg li{counter-increment:weg;position:relative;padding:0 0 .9rem 2.6rem}
.wr-weg li::before{content:counter(weg);position:absolute;left:0;top:-.05rem;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--blau);color:#fff;font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center}
.wr-weg strong{color:var(--blau)}

/* Edelstahl: Massraster */
.bb-raster{display:grid;gap:1.5rem;align-items:start}
@media (min-width:1024px){.bb-raster{grid-template-columns:minmax(0,26rem) minmax(0,1fr);gap:2.5rem}}
.bb-tabelle{min-width:0}
.bb-tabelle th,.bb-tabelle td{padding:.45rem .6rem;vertical-align:middle}
.bb-tabelle tbody th{width:34%;font-variant-numeric:tabular-nums}
.bb-zelle{font:inherit;width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:.05rem;padding:.45rem .65rem;border:1.5px solid var(--rand);border-radius:4px;background:#fff;color:var(--blau);cursor:pointer;text-align:left;font-variant-numeric:tabular-nums}
.bb-zelle:hover{border-color:var(--blau);background:var(--blau-hell)}
.bb-zelle[aria-pressed="true"]{background:var(--blau);border-color:var(--blau);color:#fff}
.bb-flaeche{font-weight:700;font-size:.95rem}
.bb-vol{font-size:.78rem;opacity:.8}
.bb-zeichnung{margin:0;position:sticky;top:calc(var(--kopf-h) + 1rem)}
@media (max-width:1023px){.bb-zeichnung{order:-1;top:var(--kopf-h);z-index:2;background:#fff;padding:.5rem 0 .6rem;border-bottom:1px solid var(--rand)}.bb-zeichnung figcaption{font-size:.85rem;margin-top:.4rem}.bb-zeichnung figcaption strong{font-size:1rem}.bb-legende{display:none}}
.bb-feld{position:relative;width:100%;aspect-ratio:12.5 / 4.5;border:1px solid var(--rand);border-radius:var(--radius);background-color:#fff;
  background-image:linear-gradient(to right,#e3e9ef 1px,transparent 1px),linear-gradient(to bottom,#e3e9ef 1px,transparent 1px);
  background-size:calc(100% / 12.5) calc(100% / 4.5);background-position:calc(.4 / 12.5 * 100%) calc(.5 / 4.5 * 100%)}
.bb-becken{position:absolute;left:calc(.4 / 12.5 * 100%);top:calc(.5 / 4.5 * 100%);width:calc(var(--l) / 12.5 * 100%);height:calc(var(--b) / 4.5 * 100%);
  border:3px solid #9aa7b4;border-radius:2px;background:linear-gradient(135deg,#bfe1ef,#7fbcd8 60%,#5ea6c9)}
.bb-mass-l,.bb-mass-b{position:absolute;font-size:.78rem;font-weight:700;color:var(--blau);background:rgba(255,255,255,.88);padding:.05rem .35rem;border-radius:3px;white-space:nowrap}
.bb-mass-l{left:50%;bottom:.35rem;transform:translateX(-50%)}
.bb-mass-b{right:.35rem;top:50%;transform:translateY(-50%)}
.bb-zeichnung figcaption{margin-top:.75rem;color:var(--text);font-size:.95rem}
.bb-zeichnung figcaption strong{display:block;color:var(--blau);font-size:1.1rem}
.bb-legende{margin:.35rem 0 0;font-size:.78rem;color:var(--grau)}
.bb-bildpaar{display:grid;gap:2px;background:#fff}
@media (min-width:720px){.bb-bildpaar{grid-template-columns:1fr 1fr}}
.bb-bildpaar figure{margin:0;position:relative}
.bb-bildpaar .bild{border-radius:0}
.bb-bildpaar figcaption{position:absolute;left:0;bottom:0;padding:.5rem 1rem;color:#fff;font-weight:700;background:linear-gradient(0deg,rgba(11,31,54,.75),transparent);right:0}
.bb-optionen{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem}
@media (min-width:720px){.bb-optionen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.bb-optionen{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bb-optionen figure{margin:0}
.bb-optionen figcaption{margin-top:.6rem;color:var(--grau);font-size:.93rem}
.bb-optionen figcaption strong{display:block;color:var(--blau);font-size:1.02rem;margin-bottom:.1rem}

/* Mosaik: Musterkarte */
.mos-karte{display:grid;gap:1.5rem}
.mos-karte:not(.mos-karte--tabs) .mos-tabs{display:none}
.mos-karte:not(.mos-karte--tabs) .mos-panels{display:grid;gap:2.5rem}
@media (min-width:900px){.mos-karte--tabs{grid-template-columns:15rem minmax(0,1fr);gap:2rem}}
.mos-tabs{display:grid;gap:.6rem;align-content:start}
@media (max-width:899px){.mos-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mos-muster{font:inherit;display:flex;align-items:center;gap:.75rem;padding:.5rem;border:2px solid var(--rand);border-radius:var(--radius);background:#fff;color:var(--blau);font-weight:700;font-size:.92rem;text-align:left;cursor:pointer;line-height:1.25}
.mos-muster:hover{border-color:var(--blau)}
.mos-muster[aria-selected="true"]{border-color:var(--blau);background:var(--blau-hell)}
.mos-muster picture,.mos-muster img{display:block;width:64px;height:64px;flex:none;border-radius:4px;object-fit:cover}
@media (max-width:899px){.mos-muster{flex-direction:column;align-items:flex-start;font-size:.82rem}.mos-muster picture,.mos-muster img{width:100%;height:auto;aspect-ratio:1/1}}
.mos-panel{display:grid;gap:1.25rem;align-items:start}
.mos-panel[hidden]{display:none}
@media (min-width:1024px){.mos-panel{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:2rem}}
.mos-bilder{display:grid;grid-template-columns:2fr 1fr;gap:.6rem;align-items:end}
.mos-bilder figure{margin:0}
.mos-text h3{margin-top:0}
.mos-daten{margin:0 0 .75rem;display:grid;gap:0;border-top:1px solid var(--rand)}
.mos-daten div{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:.75rem;padding:.55rem 0;border-bottom:1px solid var(--rand)}
.mos-daten dt{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grau);font-weight:700;padding-top:.15rem}
.mos-daten dd{margin:0;color:var(--text)}
@media (max-width:699px){
  .vergleich--stapel2{min-width:0;display:block}
  .vergleich--stapel2 thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .vergleich--stapel2 tbody,.vergleich--stapel2 tr{display:block}
  .vergleich--stapel2 tr{border-bottom:1px solid var(--rand);padding-bottom:.5rem}
  .vergleich--stapel2 tbody th{display:block;width:auto !important;border-bottom:0;padding:.75rem 1rem .3rem}
  .vergleich--stapel2 td{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.75rem;border:0 !important;padding:.3rem 1rem}
  .vergleich--stapel2 td::before{content:attr(data-label);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grau);font-weight:700;padding-top:.15rem}
  .vergleich--stapel2 caption{display:block}
}
@media (max-width:699px){.vergleich-wrap:has(> .vergleich--stapel2){overflow:visible}}

/* Claim H2 in Seitenkopf (z. B. Neue Pools) – ein starker Claim, kein zweites Credo */
.seitenkopf h2{font-family:var(--font-sans,inherit);font-weight:600;letter-spacing:-.02em;line-height:1.15;max-width:22ch;color:#fff}
.seitenkopf h2 em{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--orange-hell)}


/* Entscheidung B – Becken + Motor (asymmetrisch) */
.basis-motor{display:grid;gap:1.5rem;margin-top:1.5rem}
@media (min-width:900px){
  .basis-motor{grid-template-columns:1.35fr .85fr;gap:2rem;align-items:stretch}
}
.basis-motor__teil{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:1.25rem;display:flex;flex-direction:column;gap:.65rem}
.basis-motor__teil--motor{background:rgba(255,255,255,.1);border-color:rgba(143,208,242,.35)}
.basis-motor__bild{margin:0}
.basis-motor__bild img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px}
.basis-motor__teil h3{margin:0;color:#fff}
.basis-motor__teil p{margin:0;color:#dfe8f1}
.mehr--hell{color:#fff;border-bottom-color:var(--orange-hell)}
.mehr--hell:hover{color:var(--orange-hell)}
.technik-strip{display:grid;gap:1.25rem;align-items:center;padding:1.25rem 0}
@media (min-width:900px){
  .technik-strip{grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr);gap:2rem}
}
.technik-strip__links{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.technik-strip .lead{margin-bottom:0}
/* Textbaustein Referenzpools (bausteine/texte.json), 07.10.2026 */
.cta-band .referenz-hinweis{max-width:62ch;margin:0 auto 1rem;color:#dfe8f1}

/* Coverseal-Fotos Abdeckungen (07.10.2026): mobil wischbar, ab Tablet 3 Spalten */
.cs-galerie{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:.25rem}
.cs-galerie>figure{scroll-snap-align:start;margin:0}
@media (min-width:720px){.cs-galerie{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,1fr);overflow:visible}}

/* Coverseal: Umschalter offen/geschlossen */
.cs-umschalter{margin:0}
.cs-rahmen{position:relative}
.cs-bild{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .6s ease}
#cs-offen:checked ~ .cs-rahmen .cs-bild--offen,
#cs-zu:checked ~ .cs-rahmen .cs-bild--zu{opacity:1}
.cs-knoepfe{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.cs-knoepfe .chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.4rem 1.1rem}
#cs-offen:checked ~ .cs-knoepfe label[for="cs-offen"],
#cs-zu:checked ~ .cs-knoepfe label[for="cs-zu"]{background:var(--blau);color:#fff}
#cs-offen:focus-visible ~ .cs-knoepfe label[for="cs-offen"],
#cs-zu:focus-visible ~ .cs-knoepfe label[for="cs-zu"]{outline:3px solid var(--blau);outline-offset:3px}
.cs-legende{margin-top:.4rem;font-size:.8rem;opacity:.75}
@media (prefers-reduced-motion:reduce){.cs-bild{transition:none}}

/* Galerie mit zwei Bildern */
.cs-galerie picture{display:block;width:100%;height:100%}
@media (min-width:720px){.cs-galerie--2{grid-template-columns:repeat(2,1fr)}}