/* =====================================================================
   SEITE /abfluss-stinkt/ (Ratgeber-Artikel)
   Wird nur auf dieser Seite geladen (functions.php).
   Strangschema-Bausteine nur dieses Artikels · ergänzt css/strangschema.css
   ===================================================================== */

/* ---------- Siphon-Schnitt im Planblatt ---------- */
.kz-site .kz-sx-tube{fill:none;stroke:var(--kz-ink);stroke-width:30}
.kz-site .kz-sx-bore{fill:none;stroke:var(--kz-paper);stroke-width:22}
.kz-site .kz-sx-stack{fill:none;stroke:var(--kz-ink);stroke-width:36}
.kz-site .kz-sx-stack-bore{fill:none;stroke:var(--kz-paper);stroke-width:28}
.kz-site .kz-sx-water{fill:none;stroke:var(--kz-flow);stroke-opacity:.5;stroke-width:22}
.kz-site .kz-sx-dry{fill:none;stroke:var(--kz-paper);stroke-width:22.5}
.kz-site .kz-sx-surface{fill:none;stroke:var(--kz-pipe);stroke-width:1.5}
.kz-site .kz-sx-paper{fill:var(--kz-paper)}
.kz-site .kz-sx-channel{fill:none;stroke:var(--kz-paper);stroke-width:6}
.kz-site .kz-sx-dim{fill:none;stroke:var(--kz-ink);stroke-width:1}
.kz-site .kz-sx-ext{stroke-dasharray:2 3}
.kz-site .kz-sx-dimtext{
  font-family:var(--kz-font);font-size:12px;font-weight:700;font-stretch:80%;letter-spacing:.06em;fill:var(--kz-ink);
  font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--kz-sheet);stroke-width:4px;stroke-linejoin:round;
}
.kz-site .kz-sx-film{fill:none;stroke:var(--kz-graphite);stroke-width:3;stroke-linecap:round;stroke-dasharray:5 2 2 3}
/* Kanalgas: gepunktete Graphit-Linie, die vom Kanal in den Raum wandert (Blau bleibt Wasser) */
.kz-site .kz-gas{fill:none;stroke:var(--kz-graphite);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 7;animation:kz-flow 1s linear infinite}

/* ---------- Nasentest: vier Stationen an der Leitung ---------- */
.kz-site .kz-flow-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kz-site .kz-trap{margin:0}
.kz-site .kz-trap figure{margin:0 0 20px;border:1px solid var(--kz-ink);background:var(--kz-sheet);outline:1px solid var(--kz-rule-strong);outline-offset:-6px}
.kz-site .kz-trap svg{display:block;width:100%;height:auto}
.kz-site .kz-trap .kz-number{margin-bottom:12px}
.kz-site .kz-trap h3{margin-bottom:8px}
.kz-site .kz-trap p{font-size:.97rem;line-height:1.58}
.kz-site .kz-trap-note{
  font-family:var(--kz-font);font-size:11px;font-weight:650;font-stretch:78%;letter-spacing:.1em;fill:var(--kz-graphite);
  paint-order:stroke;stroke:var(--kz-sheet);stroke-width:4px;stroke-linejoin:round;
}
.kz-site .kz-trap-hair{fill:none;stroke:var(--kz-ink);stroke-width:1.5;stroke-linecap:round}
.kz-site .kz-trap-drop{fill:var(--kz-flow)}
.kz-site .kz-trap-nut{fill:var(--kz-paper);stroke:var(--kz-ink);stroke-width:1.5}
.kz-site .kz-trap-arrow{fill:none;stroke:var(--kz-pipe);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Bewegung gibt es nur im Hero: die kleinen Schemata stehen still */
.kz-site .kz-trap :is(.kz-gas,.kz-route){animation:none}
@media (max-width:1100px){
  .kz-site .kz-flow-4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
  .kz-site .kz-flow-4::before{display:none}
  .kz-site .kz-flow-4 .kz-step::before{content:"";position:absolute;left:0;right:calc(-1*clamp(24px,4vw,56px));top:17px;height:6px;background:var(--kz-pipe)}
  .kz-site .kz-flow-4 .kz-step:nth-child(2n)::before{right:0}
}
@media (max-width:680px){
  .kz-site .kz-sx-dimtext{font-size:18px}
  .kz-site .kz-flow-4{grid-template-columns:minmax(0,1fr);row-gap:36px}
  .kz-site .kz-flow-4::before{display:block}
  .kz-site .kz-flow-4 .kz-step::before{display:none}
}
/* ---------- Foto neben «Küche, Bad, Dusche oder Keller» ---------- */
.kz-site .kz-as-photo-split{margin-bottom:clamp(36px,4vw,56px);align-items:center}
.kz-site .kz-as-photo{margin:0;border:1px solid var(--kz-ink);background:var(--kz-paper)}
.kz-site .kz-as-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.kz-site .kz-as-photo figcaption{padding:12px 14px;border-top:1px solid var(--kz-ink);font-size:.88rem;line-height:1.45;color:var(--kz-muted)}
@media (prefers-reduced-motion:reduce){
  .kz-site .kz-gas{animation:none}
}