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

/* ---------- Explosionszeichnung Flaschensiphon 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-surface{fill:none;stroke:var(--kz-pipe);stroke-width:1.5}
.kz-site .kz-sx-film{fill:none;stroke:var(--kz-graphite);stroke-width:3;stroke-linecap:round;stroke-dasharray:5 2 2 3}
.kz-site .kz-sr-axis{fill:none;stroke:var(--kz-rule-strong);stroke-width:1;stroke-dasharray:14 4 2 4}
.kz-site .kz-sr-cup{fill:var(--kz-paper);stroke:var(--kz-ink);stroke-width:2.5;stroke-linejoin:round}
.kz-site .kz-sr-water{fill:var(--kz-flow);fill-opacity:.45}
.kz-site .kz-sr-sludge{fill:var(--kz-graphite);fill-opacity:.55}
.kz-site .kz-sr-hair{fill:none;stroke:var(--kz-ink);stroke-width:1.2;stroke-linecap:round}
.kz-site .kz-sr-arrow{fill:none;stroke:var(--kz-pipe);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kz-site .kz-sr-note{
  font-family:var(--kz-font);font-size:11px;font-weight:650;font-stretch:78%;letter-spacing:.1em;fill:var(--kz-pipe);
  paint-order:stroke;stroke:var(--kz-sheet);stroke-width:4px;stroke-linejoin:round;
}

/* ---------- Einleitung der Anleitung mit Materialliste ---------- */
.kz-site .kz-sr-intro{margin-bottom:clamp(44px,5vw,64px)}
.kz-site .kz-sr-intro .kz-stamp .kz-checklist{margin-top:14px}

/* ---------- Sechs Schritte als Leitung (wie /abfluss-verstopft/) ---------- */
.kz-site .kz-flow-6{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:52px}
.kz-site .kz-flow-6::before{display:none}
.kz-site .kz-flow-6 .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-6 .kz-step:nth-child(3n)::before{right:0}
.kz-site .kz-step-end .kz-step-no{background:var(--kz-red);border-color:var(--kz-red);color:#fff}
.kz-site .kz-step p a{color:var(--kz-pipe)}

@media (max-width:1100px){
  .kz-site .kz-flow-6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kz-site .kz-flow-6 .kz-step:nth-child(n)::before{right:calc(-1*clamp(24px,4vw,56px))}
  .kz-site .kz-flow-6 .kz-step:nth-child(2n)::before{right:0}
}
@media (max-width:680px){
  .kz-site .kz-sr-note{font-size:17px}
  .kz-site .kz-flow-6{grid-template-columns:minmax(0,1fr);row-gap:36px}
  .kz-site .kz-flow-6::before{display:block}
  .kz-site .kz-flow-6 .kz-step::before{display:none}
}

/* ---------- Nach dem Reinigungsplan ---------- */
.kz-site .kz-sr-after{margin-top:clamp(40px,5vw,64px)}
.kz-site .kz-sr-after .kz-subhead{margin-top:0}
.kz-site .kz-checklist a{color:var(--kz-pipe);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.kz-site .kz-checklist a:hover{color:var(--kz-ink)}

/* ---------- Foto neben «Je nach Ablauf» ---------- */
.kz-site .kz-sr-photo-split{margin-bottom:clamp(36px,4vw,56px);align-items:center}
.kz-site .kz-sr-photo{margin:0;border:1px solid var(--kz-ink);background:var(--kz-paper)}
.kz-site .kz-sr-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.kz-site .kz-sr-photo figcaption{padding:12px 14px;border-top:1px solid var(--kz-ink);font-size:.88rem;line-height:1.45;color:var(--kz-muted)}