/* Wasserkreislauf 24.10. (neu): Schema volle Breite, Querschnitt, Fluss mit Pfeilen, Klereo-Kasten. Gruppen wie Pooldreieck: Wasser filtern = Stahlblau #2B5A8A durchgezogen, Wasserpflege = Terracotta #A3421D gestrichelt. */
.kl{display:block;margin-top:1.5rem;font-family:Figtree,sans-serif;color:#122E4D}
.kl-steuer{position:sticky;top:var(--kl-top,52px);z-index:30;display:flex;gap:.5rem;align-items:center;padding:.5rem;margin:0 0 .75rem;background:rgba(251,248,242,.97);border:1px solid #E6DCC8;border-radius:999px;box-shadow:0 6px 18px -12px rgba(18,46,77,.45)}
.kl-steuer button,.kl-schritt{font:inherit;color:#122E4D;background:#fff;border:1px solid #122E4D;border-radius:999px;min-height:44px;cursor:pointer}
.kl-zurueck,.kl-vor{width:48px;font-size:1.4rem!important;flex:none}
.kl-play{padding:0 1.1rem;flex:1;font-size:1rem;font-weight:600}
.kl-play[aria-pressed=true]{background:#122E4D;color:#fff}
.kl-aktuell{display:none;flex:2 1 auto;font-weight:700;font-size:1rem;padding:0 .5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:700px){.kl-aktuell{display:block}}
@media (max-width:699px){.kl-steuer{flex-wrap:wrap;border-radius:26px;row-gap:.15rem}.kl-play{flex:1 1 0}.kl-aktuell{display:block;flex:1 0 100%;text-align:center;font-size:.9375rem;padding:0 .5rem .25rem}}
.kl-bild{background:#FBF8F2;border:1px solid #E6DCC8;border-radius:12px;padding:1rem 1.25rem}
.kl-svg{width:100%;height:auto;display:block}
.kl-svg-m{display:none}
@media (max-width:999px){.kl{--kl-top:60px}.kl-svg-d{display:none}.kl-svg-m{display:block;max-width:440px;margin:0 auto}.kl-bild{padding:.75rem .5rem}}
.kl-hinweis{font-size:.875rem;color:#4A5B6C;margin:.5rem 0 0}
.kl-seite{margin-top:1rem}
/* Beschriftung min. 14 px: Desktop-Schema 17 Einheiten bei viewBox 1000, ab 1000 px Viewport, Mobil 16 Einheiten bei viewBox 340 */
.kl-svg text{font-family:Figtree,sans-serif;fill:#122E4D;paint-order:stroke;stroke:#FBF8F2;stroke-width:3px;stroke-linejoin:round}
.kl-svg-d .lb{font-size:17px;font-weight:600}.kl-svg-d .kt{font-size:17px;font-weight:700}.kl-svg-d .lb-b{font-size:19px;font-weight:700}.kl-svg-d .lb-c{font-size:20px;font-weight:700}
.kl-svg-m .lb{font-size:17px;font-weight:600}.kl-svg-m .kt{font-size:17px;font-weight:700}.kl-svg-m .lb-b{font-size:19px;font-weight:700}.kl-svg-m .lb-c{font-size:18px;font-weight:700}
.kl-svg .lb-c{fill:#A3421D}
.kl-svg text.an{font-weight:800}
.kl-svg .kt{stroke:none}
.kl-svg .pilltx{font-size:17px;font-weight:600;stroke:none}
.kl-svg-m .pilltx{font-size:17px}
.kl-svg .pill{fill:#fff;stroke:#A3421D;stroke-width:1.5;stroke-dasharray:4 3}
.kl-svg .bdc{fill:#fff;stroke:#122E4D;stroke-width:2}
.kl-svg .bdt{font-size:17px;font-weight:700;stroke:none;fill:#122E4D}
.kl-svg-m .bdt{font-size:17px}
.kl-svg .k-teil.an .bdc{fill:#122E4D}.kl-svg .k-teil.an .bdt{fill:#fff}
/* Becken im Querschnitt */
.kl-svg .wand{fill:#CFC5B1}.kl-svg .luft{fill:#FBF8F2}
.kl-svg .welle{fill:none;stroke:#fff;stroke-width:2;opacity:.8;stroke-linecap:round}
/* Rohre kraeftig, Fluss mit Pfeilen */
.kl-svg .rohr-o{fill:none;stroke:#5B6F85;stroke-width:15;stroke-linecap:round;stroke-linejoin:round}
.kl-svg .rohr-i{fill:none;stroke:#DCE5EE;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.kl-svg .fluss{fill:none;stroke:#2F7FD0;stroke-width:9;stroke-linecap:butt;stroke-linejoin:round;opacity:0;transition:opacity .3s}
.kl-svg .fluss.an{opacity:1;stroke-dasharray:14 12;animation:kl-fluss .8s linear infinite}
@keyframes kl-fluss{to{stroke-dashoffset:-26}}
.kl-svg .pf{fill:#fff;stroke:#122E4D;stroke-width:2;stroke-linejoin:round}
.kl-svg .jet{fill:none;stroke:#122E4D;stroke-width:3;stroke-linecap:round}
.kl-svg .dos{fill:none;stroke:#A3421D;stroke-width:5;stroke-dasharray:7 6}
.kl-svg .dos.an{stroke-width:7;animation:kl-fluss .8s linear infinite}
.kl-svg .signal{fill:none;stroke:#A3421D;stroke-width:3;stroke-dasharray:3 6;stroke-linecap:round}
.kl-svg .signal.an{animation:kl-fluss 1s linear infinite}
/* Bauteile */
.kl-svg .bt{fill:#fff;stroke-width:3}
.kl-svg .g-m .bt{stroke:#2B5A8A}
.kl-svg .g-c .bt{stroke:#A3421D;stroke-dasharray:9 5}
.kl-svg .ic{fill:none;stroke:#8796A6;stroke-width:2.5;stroke-linecap:round}
.kl-svg .disp{fill:#EAF3FA}
.kl-svg g.k-teil{opacity:.74;transition:opacity .3s}
.kl-svg g.k-teil.an{opacity:1}
.kl-svg g.k-teil.an .bt{stroke-width:5}
.kl-svg g.g-m.an .bt{fill:#DCE9F6}.kl-svg g.g-c.an .bt{fill:#F8E5DC}.kl-svg g.g-c.an .disp{fill:#DCEDF9}
.kl-svg .signal.k-teil,.kl-svg .dos.k-teil,.kl-svg .jet,.kl-svg g.k-teil .jet{opacity:1}
.kl-svg path.dos.k-teil,.kl-svg path.signal.k-teil{opacity:.5}
.kl-svg path.dos.k-teil.an,.kl-svg path.signal.k-teil.an{opacity:1}
.kl-svg .fluss.k-teil{opacity:0}.kl-svg .fluss.k-teil.an{opacity:1}
.kl-svg .kbox{fill:#FFF9F5;stroke:#A3421D;stroke-width:3;stroke-dasharray:10 6}
.kl[data-schritt="5"] .kbox,.kl[data-schritt="6"] .kbox{fill:#FCEDE5}
.kl-svg .jet{opacity:1}
@media (prefers-reduced-motion:reduce){.kl-svg .fluss.an{stroke-dasharray:none}.kl-svg .fluss.an,.kl-svg .dos.an,.kl-svg .signal.an{animation:none}.kl-svg *{transition:none!important}}
/* Schritte */
.kl-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
@media (max-width:999px){.kl-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.kl-liste{grid-template-columns:1fr}}
.kl-schritt{width:100%;height:100%;text-align:left;border-radius:12px;padding:.6rem .8rem;display:grid;grid-template-columns:auto 1fr;gap:.2rem .7rem;align-items:center;font-weight:600;font-size:1rem;line-height:1.3}
.kl-schritt i{font-style:normal;display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 4px;border-radius:999px;border:1.5px solid #122E4D;font-size:.9rem;flex:none}
.kl-schritt .kl-st{min-width:0}
.kl-schritt .kl-gr{grid-column:2;justify-self:start}
.kl-schritt[aria-pressed=true]{background:#122E4D;color:#fff}.kl-schritt[aria-pressed=true] i{border-color:#fff}
.kl button:focus-visible{outline:3px solid #E39B3B;outline-offset:2px}
.kl-text{margin-top:1rem;min-height:5.5em;color:#122E4D;line-height:1.55;font-size:1.125rem;padding:.9rem 1.1rem;background:#fff;border:1px solid #E6DCC8;border-radius:12px}
.kl-text p{margin:0}
.kl-text .kl-quelle{display:block;margin-top:.35rem;font-size:.875rem;color:#4A5B6C}
/* Gruppen (Pooldreieck) */
.kl-legende{list-style:none;margin:.9rem 0 0;padding:.8rem 0 0;border-top:1px solid #E6DCC8;display:grid;gap:.6rem}
.kl-legende li{display:flex;gap:.7rem;align-items:flex-start}
.kl-legende p{margin:0;font-size:.95rem;line-height:1.45;color:#122E4D}
.kl-sw{width:34px;height:20px;flex:none;margin-top:1px}
.kl-sw ellipse{fill:none;stroke-width:2.5}
.kl-sw-m ellipse{stroke:#2B5A8A}
.kl-sw-c ellipse{stroke:#A3421D;stroke-dasharray:5 4}
.kl-gr{display:inline-block;font-size:.875rem;font-weight:600;line-height:1;letter-spacing:.01em;padding:.3rem .6rem;border-radius:999px;background:#fff;color:#122E4D;border:1.5px solid;white-space:nowrap}
.kl-gr-m{border-color:#2B5A8A;border-style:solid}
.kl-gr-c{border-color:#A3421D;border-style:dashed}
.kl-schritt[aria-pressed=true] .kl-gr{background:#fff;color:#122E4D}
.ts-karte .ts-gruppe{margin:0 0 10px!important;line-height:1}
.kl-leg-titel{margin:.9rem 0 0;font-size:.875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#4A5B6C}
.kl-leg-titel+.kl-legende{margin-top:.4rem;padding-top:.6rem}
.kl-leg .kl-legende{border-top:0;margin-top:.4rem;padding-top:0}
.kl-leg{border-top:1px solid #E6DCC8;margin-top:.9rem}
.kl-leg-sub{color:#4A5B6C}

/* Mobil/Tablet (Schema hochkant): Steuerleiste im Fluss ueber dem Schema, nicht sticky, verdeckt das Schema nie (kl-mob-leiste) */
@media (max-width:999px){.kl-steuer{position:static}}
/* sehr schmale Telefone (320-359 px): Schrift im Schema um 2 Einheiten groesser, damit sie mind. 14 px bleibt */
@media (max-width:359px){.kl-svg-m .lb,.kl-svg-m .kt{font-size:19px}.kl-svg-m .lb-b{font-size:21px}.kl-svg-m .lb-c{font-size:19px}.kl-svg-m .pilltx,.kl-svg-m .bdt{font-size:19px}}

/* Wellen und Schmutzpartikel (24.10., h): nur CSS, dezent. Wellen laufen zum Skimmer, Partikel nur im Wasserweg Oberflaeche > Skimmer > Pumpe > Filter, nach dem Filter keine (kl-wellen) */
.kl-svg .wellen{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:.8}
.kl-svg .wellen .w2{stroke-width:1.6;opacity:.6}
.kl-svg .wellen path{animation:kl-welle 3.2s linear infinite}
.kl-svg .wellen .w2{animation-duration:4.2s}
@keyframes kl-welle{to{transform:translateX(28px)}}
.kl-svg .teil{fill:none;stroke:#8A7A63;stroke-width:5.5;stroke-linecap:round;stroke-dasharray:0 38;opacity:0;transition:opacity .3s}
.kl-svg .teil.t2{stroke-width:3.6;stroke-dasharray:0 23;opacity:0}
.kl-svg .teil.an{opacity:.9;animation:kl-teil 1.3s linear infinite}
.kl-svg .teil.t2.an{opacity:.75;animation-name:kl-teil2;animation-duration:1.1s}
@keyframes kl-teil{to{stroke-dashoffset:-38}}
@keyframes kl-teil2{to{stroke-dashoffset:-23}}
@media (prefers-reduced-motion:reduce){.kl-svg .wellen path{animation:none}.kl-svg .teil,.kl-svg .teil.an{display:none}}

/* 24.10.2026 22:2x (Gman 22:17): Werte direkt in den Schritten, Hinweis unter der Zeichnung */
.kl-bild>.kl-hinweis{margin:.6rem 0 0;font-size:.875rem;color:#4A5B6C}
.kl-text .kl-werte{list-style:none;margin:.75rem 0 0;padding:.75rem 0 0;border-top:1px solid #E6DCC8;display:grid;gap:.5rem;font-size:1rem;line-height:1.5}
.kl-text .kl-werte li{margin:0}
.kl-text .kl-wk{font-weight:700}
.ts-raum{padding-top:32px;padding-bottom:32px}
.kl-text{margin-bottom:1rem}

/* 24.10.2026 22:5x: Handy-Schema bildbreit (mehr Platz fuer die Beschriftung) */
@media (max-width:999px){.kl-bild{margin-left:calc(-1*var(--rand,24px));margin-right:calc(-1*var(--rand,24px));border-left:0;border-right:0;border-radius:0;padding:.75rem .25rem}.kl-bild>.kl-hinweis{padding:0 var(--rand,24px)}.kl-svg-m{max-width:480px}}
@media (max-width:699px){.kl-text .kl-werte{font-size:1.0625rem;line-height:1.5}}

/* 24.10.2026 L13: Schrittliste ohne Text, kompakt (der Text steht in den Bauteil-Karten) */
.kl-intro{margin:0 0 1rem;max-width:42rem;color:#122E4D;line-height:1.55;font-size:1.125rem}
@media (max-width:999px){.kl-liste{grid-template-columns:repeat(2,minmax(0,1fr))}.kl-liste .kl-gr{display:none}.kl-schritt{padding:.5rem .6rem;font-size:.9375rem}}
@media (max-width:599px){.kl-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.kl-schritt{padding:.45rem .5rem;gap:.2rem .45rem;font-size:.875rem}.kl-schritt i{min-width:26px;height:26px;font-size:.8125rem}.kl-schritt .kl-st{overflow-wrap:break-word;hyphens:auto}}