/* =====================================================================
   STARTSEITE (Designsystem Strangschema)
   Wird nach css/strangschema.css geladen, nur auf der Startseite (functions.php).
   Inhalt: Code/homepage.html · Verhalten: js/startseite-neu.js
   ===================================================================== */

/* ---------- Einsatzgebiet ---------- */
.kz-site .kz-area-grid{align-items:stretch}
.kz-site .kz-area-media{display:flex;flex-direction:column}
.kz-site .kz-photo{position:relative;flex:1 1 auto;min-height:200px;margin:24px 0 0;border:1px solid var(--kz-ink);background:var(--kz-paper)}
.kz-site .kz-photo img{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);object-fit:cover;object-position:50% 58%}
.kz-site .kz-places-title,.kz-site .kz-map-title{
  margin:34px 0 14px;font-size:.8rem;line-height:1.2;font-weight:680;font-stretch:78%;letter-spacing:.11em;text-transform:uppercase;color:var(--kz-ink);
}
.kz-site .kz-map-title{margin-top:0}
.kz-site .kz-places{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:20px;border-bottom:1px solid var(--kz-rule)}
.kz-site .kz-places li{
  margin:0;padding:9px 0;border-top:1px solid var(--kz-rule);
  font-size:1rem;line-height:1.4;font-weight:600;font-stretch:92%;color:var(--kz-ink);
}
.kz-site .kz-map{margin:0;border:1px solid var(--kz-ink);background:var(--kz-sheet)}
.kz-site .kz-map > svg{display:block;width:100%;height:auto}
.kz-site .kz-map-canton{fill:url(#kz-map-hatch);stroke:var(--kz-ink);stroke-width:2;stroke-linejoin:round}
.kz-site .kz-map-hatchline{stroke:var(--kz-pipe);stroke-width:1.1;opacity:.55}
.kz-site .kz-map-city circle:first-child{fill:var(--kz-paper);stroke:var(--kz-ink);stroke-width:2}
.kz-site .kz-map-city circle:last-child{fill:var(--kz-ink)}
.kz-site .kz-map-city text{font-family:var(--kz-font);font-size:15px;font-weight:760;font-stretch:88%;fill:var(--kz-ink);paint-order:stroke;stroke:var(--kz-sheet);stroke-width:5px;stroke-linejoin:round}
.kz-site .kz-map figcaption{display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--kz-ink);background:var(--kz-paper);font-size:.82rem;color:var(--kz-muted)}
.kz-site .kz-map figcaption a{display:inline-flex;align-items:center;gap:6px;min-height:32px;color:var(--kz-pipe);text-decoration:underline;text-underline-offset:.22em}
@media (max-width:860px){
  .kz-site .kz-photo{flex:none;aspect-ratio:3/2;min-height:0}
}
@media (max-width:680px){
  .kz-site .kz-places{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== Neue Bausteine im Strangschema-Stil ===== */

/* ---------- Klar vorab ---------- */
.kz-site .kz-facts{padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--kz-rule)}
.kz-site .kz-facts-head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(32px,4vw,48px)}
.kz-site .kz-facts-head p{font-size:1.18rem;line-height:1.5;color:var(--kz-ink);max-width:40ch}
.kz-site .kz-cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--kz-ink);border-bottom:1px solid var(--kz-rule)}
.kz-site .kz-cell{padding:26px 26px 24px;border-left:1px solid var(--kz-rule)}
.kz-site .kz-cell:first-child{border-left:0;padding-left:0}
.kz-site .kz-num{font-size:clamp(2.6rem,1.8rem + 2.4vw,3.9rem);line-height:1;font-weight:820;font-stretch:84%;letter-spacing:-.03em;color:var(--kz-ink);font-variant-numeric:tabular-nums}
.kz-site .kz-num small{font-size:.36em;font-weight:700;font-stretch:90%;letter-spacing:0;color:var(--kz-graphite);margin-left:6px}
.kz-site .kz-num small.kz-pre{margin:0 6px 0 0}
.kz-site .kz-cell p{margin-top:12px;font-size:.97rem}

/* ---------- Kosten: Tabs im Planstil ---------- */
.kz-site .kz-cost-card{background:var(--kz-paper);border:1px solid var(--kz-ink)}
.kz-site .kz-tabs{display:flex;border-bottom:1px solid var(--kz-ink)}
.kz-site .kz-tabs button{flex:1 1 0;min-height:56px;padding:0 18px;background:var(--kz-paper);border:0;border-left:1px solid var(--kz-rule);
  font-family:var(--kz-font);font-size:1.05rem;font-weight:720;font-stretch:90%;color:var(--kz-graphite);cursor:pointer;transition:background-color .2s,color .2s}
.kz-site .kz-tabs button:first-child{border-left:0}
.kz-site .kz-tabs button:hover{background:var(--kz-sheet);color:var(--kz-ink)}
.kz-site .kz-tabs button[aria-selected="true"]{background:var(--kz-ink);color:#fff}
.kz-site .kz-tab-panel{padding:clamp(22px,3vw,34px)}
.kz-site .kz-tab-panel[hidden]{display:none}
.kz-site .kz-tab-panel > p:first-child{color:var(--kz-ink);margin-bottom:24px}
.kz-site .kz-spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--kz-ink);border-bottom:1px solid var(--kz-rule)}
.kz-site .kz-spec div{padding:16px 20px 18px;border-left:1px solid var(--kz-rule)}
.kz-site .kz-spec div:first-child{border-left:0;padding-left:0}
.kz-site .kz-spec span{display:block;font-size:.9rem;color:var(--kz-muted);margin-bottom:6px}
.kz-site .kz-spec b{display:block;font-size:1.22rem;line-height:1.2;font-weight:760;font-stretch:90%;color:var(--kz-ink)}
.kz-site .kz-spec div:last-child b{color:var(--kz-red);white-space:nowrap}
.kz-site .kz-tab-panel .kz-fine{margin-top:14px}
.kz-site .kz-cost-more{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;margin-top:28px}
.kz-site .kz-cost-more p{color:var(--kz-ink);max-width:56ch}

/* ---------- Anfrage in drei Schritten ---------- */
.kz-site .kz-progress{display:none;gap:6px;margin-bottom:26px}
.kz-js .kz-site .kz-progress{display:flex}
.kz-site .kz-progress i{flex:1;height:4px;background:var(--kz-rule)}
.kz-site .kz-progress i.done{background:var(--kz-ink)}
.kz-site fieldset.kz-wz-step,.kz-site .kz-wz-nav{display:none}
.kz-js .kz-site .kz-wz-step{display:none}
.kz-js .kz-site .kz-wz-step.cur{display:block}
.kz-js .kz-site .kz-wz-nav{display:flex}
.kz-site .kz-wizard legend,.kz-site .kz-wizard .kz-wz-legend{font-size:1.5rem;line-height:1.1;font-weight:800;font-stretch:86%;letter-spacing:-.018em;color:var(--kz-ink);margin:0 0 6px;max-width:none}
.kz-site .kz-wizard .kz-wz-step > .kz-fine{margin-bottom:20px}
.kz-site .kz-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kz-site .kz-opts-3{grid-template-columns:repeat(3,1fr);margin-bottom:20px}
.kz-site .kz-opts label{position:relative;cursor:pointer;margin:0}
.kz-site .kz-opts input{position:absolute;opacity:0;pointer-events:none}
.kz-site .kz-opts span{display:flex;align-items:center;gap:12px;height:100%;min-height:58px;padding:12px 16px;border:1.5px solid #6b7a87;border-radius:2px;background:var(--kz-paper);
  font-weight:700;font-stretch:94%;color:var(--kz-ink);transition:border-color .2s,background-color .2s}
.kz-site .kz-opts span svg{width:24px;height:24px;flex:none;color:var(--kz-pipe)}
.kz-site .kz-opts label:hover span{border-color:var(--kz-ink);background:var(--kz-sheet)}
.kz-site .kz-opts input:checked + span{border-color:var(--kz-ink);background:var(--kz-sheet);box-shadow:inset 0 0 0 1.5px var(--kz-ink)}
.kz-site .kz-opts input:focus-visible + span{outline:3px solid var(--kz-pipe);outline-offset:2px}
.kz-site .kz-wz-field label{display:block;margin-bottom:8px;font-size:.82rem;font-weight:680;font-stretch:84%;letter-spacing:.06em;text-transform:uppercase;color:var(--kz-ink)}
.kz-site .kz-wz-field input{width:100%;min-height:50px;padding:12px 14px;font-family:var(--kz-font);font-size:1rem;color:var(--kz-ink);background:var(--kz-paper);border:1.5px solid #6b7a87;border-radius:2px}
.kz-site .kz-wz-field input:focus{border-color:var(--kz-pipe);box-shadow:0 0 0 3px rgba(27,111,179,.18);outline:none}
.kz-site .kz-wz-nav{justify-content:space-between;align-items:center;gap:12px;margin-top:24px}
.kz-site .kz-wz-back{background:none;border:0;padding:10px 0;font-family:var(--kz-font);font-size:1rem;font-weight:700;color:var(--kz-muted);cursor:pointer;visibility:hidden}
.kz-site .kz-wz-back.v{visibility:visible}
.kz-site .kz-wz-next[hidden]{display:none}
.kz-site .kz-wz-trust{display:flex;align-items:center;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--kz-rule);font-size:.88rem;color:var(--kz-muted)}
.kz-site .kz-wz-trust svg{width:18px;height:18px;flex:none;color:var(--kz-pipe)}

/* ---------- Abschluss (kompakt) ---------- */
.kz-site .kz-final{padding:clamp(48px,6vw,80px) 0}
.kz-site .kz-final-box{background:var(--kz-ink);outline:1px solid rgba(255,255,255,.25);outline-offset:-9px;padding:clamp(36px,4vw,52px) 24px;text-align:center}
.kz-site .kz-final h2{color:#fff;margin:0}
.kz-site .kz-bigtel{display:inline-block;margin:14px 0 24px;font-size:clamp(2.6rem,1.4rem + 4.6vw,5.2rem);line-height:1.04;font-weight:820;font-stretch:84%;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.65);font-variant-numeric:tabular-nums;transition:color .3s,-webkit-text-stroke-color .3s}
.kz-site .kz-bigtel:hover,.kz-site .kz-bigtel:focus-visible{color:#fff;-webkit-text-stroke-color:#fff}
.kz-site .kz-final-row{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.kz-site .kz-final-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.kz-site .kz-final-ghost:hover{background:#fff;color:var(--kz-ink)}

@media (max-width:860px){
  .kz-site .kz-facts-head{grid-template-columns:1fr;gap:14px}
  .kz-site .kz-cells,.kz-site .kz-spec{grid-template-columns:1fr 1fr}
  .kz-site .kz-cell:nth-child(3),.kz-site .kz-spec div:nth-child(3){border-left:0;padding-left:0}
  .kz-site .kz-cell:nth-child(n+3),.kz-site .kz-spec div:nth-child(n+3){border-top:1px solid var(--kz-rule)}
}
@media (max-width:560px){
  .kz-site .kz-cell{padding:20px 14px 18px}
  .kz-site .kz-spec div{padding:14px 12px 14px}
  .kz-site .kz-spec b{font-size:1.08rem}
  .kz-site .kz-tabs button{font-size:.95rem;padding:0 6px}
  .kz-site .kz-opts,.kz-site .kz-opts-3{grid-template-columns:1fr}
  .kz-site .kz-cost-more .kz-btn{width:100%}
  .kz-site .kz-final-row .kz-btn{width:100%}
}
.kz-site .kz-contact .kz-wizard :is(.kz-fine,.kz-wz-trust){color:var(--kz-muted)}

/* ---------- Hero: klickbarer Hausplan im Planstil ---------- */
.kz-site .kzp-card{background:var(--kz-paper);border:1px solid var(--kz-ink);box-shadow:10px 10px 0 rgba(16,38,63,.07)}
.kz-site .kzp-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 20px;border-bottom:1px solid var(--kz-ink)}
.kz-site .kzp-head b{font-size:1.1rem;font-weight:780;font-stretch:88%;color:var(--kz-ink)}
.kz-site .kzp-head span{font-size:.9rem;color:var(--kz-muted)}
.kz-site .kzp-house{display:block;width:100%;height:auto}
.kz-site .kzp-house .kzp-lbl{font:700 10px var(--kz-font);letter-spacing:.14em;text-transform:uppercase;fill:var(--kz-muted)}
.kz-site .kzp-water{stroke-dasharray:10 14;animation:kzp-flow 1.6s linear infinite}
@keyframes kzp-flow{to{stroke-dashoffset:-24}}
.kz-site .kzp-hot{cursor:pointer;outline:none}
.kz-site .kzp-hit{fill:transparent}
.kz-site .kzp-pulse{fill:var(--kz-red);opacity:.25;transform-box:fill-box;transform-origin:center;animation:kzp-pulse 2.2s ease-out infinite}
@keyframes kzp-pulse{0%{transform:scale(.6);opacity:.4}100%{transform:scale(2);opacity:0}}
.kz-site .kzp-ring{fill:#fff;stroke:var(--kz-red);stroke-width:2.5;transition:fill .2s}
.kz-site .kzp-core{fill:var(--kz-red);transition:fill .2s}
.kz-site .kzp-hot text{font:760 13px var(--kz-font);fill:var(--kz-ink);paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
.kz-site .kzp-hot:hover .kzp-ring,.kz-site .kzp-hot[aria-pressed="true"] .kzp-ring{fill:var(--kz-red)}
.kz-site .kzp-hot:hover .kzp-core,.kz-site .kzp-hot[aria-pressed="true"] .kzp-core{fill:#fff}
.kz-site .kzp-hot:focus-visible .kzp-ring{stroke:var(--kz-ink);stroke-width:4}
.kz-site .kzp-verdict{padding:18px 20px 20px;border-top:1px solid var(--kz-ink);min-height:150px}
.kz-site .kzp-verdict p{font-size:.97rem;margin:0}
.kz-site .kzp-verdict .kzp-verdict-t{font-size:1.15rem;font-weight:780;font-stretch:90%;color:var(--kz-ink);margin-bottom:4px}
.kz-site .kzp-verdict-go{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.kz-site .kzp-verdict-go .kz-btn{min-height:46px;padding:0 18px;font-size:.95rem}

/* ---------- Abschnitte farblich abwechseln ---------- */
.kz-site .kz-hero{background:
  linear-gradient(var(--kz-grid) 1px,transparent 1px) 0 0/16px 16px,
  linear-gradient(90deg,var(--kz-grid) 1px,transparent 1px) 0 0/16px 16px,
  linear-gradient(var(--kz-grid-strong) 1px,transparent 1px) 0 0/80px 80px,
  linear-gradient(90deg,var(--kz-grid-strong) 1px,transparent 1px) 0 0/80px 80px,
  var(--kz-sheet);border-bottom:0}
/* Klar vorab: Tusche-Band */
.kz-site .kz-facts{background:var(--kz-ink);border-top:0}
.kz-site .kz-facts h2{color:#fff}
.kz-site .kz-facts-head p{color:var(--kz-on-ink)}
.kz-site .kz-facts .kz-cells{border-top-color:#fff;border-bottom-color:rgba(255,255,255,.18)}
.kz-site .kz-facts .kz-cell{border-left-color:rgba(255,255,255,.18)}
.kz-site .kz-facts .kz-num{color:#fff}
.kz-site .kz-facts .kz-num small{color:var(--kz-on-ink)}
.kz-site .kz-facts .kz-cell p{color:var(--kz-on-ink)}
.kz-site .kz-services{background:var(--kz-paper)}
.kz-site .kz-help.kz-tint{background:#e8f0f6}
.kz-site .kz-help .kz-checklist li::before{background:#fff}
.kz-site .kz-steps{background:var(--kz-paper)}
.kz-site .kz-cost.kz-tint{background:var(--kz-sheet)}
.kz-site .kz-area{background:var(--kz-paper)}
.kz-site .kz-faq{background:#e8f0f6}
.kz-site .kz-final{background:var(--kz-paper)}

@media (max-width:560px){
  .kz-site .kzp-head span{display:none}
  .kz-site .kzp-hot text{font-size:17px;stroke-width:6px}
  .kz-site .kzp-verdict{min-height:0}
  .kz-site .kzp-card{box-shadow:none}
}
@media (prefers-reduced-motion:reduce){.kz-site .kzp-water,.kz-site .kzp-pulse{animation:none}}

/* ---------- Einsatzgebiet: Zürich-Bild grösser ---------- */
.kz-site .kz-area > .kz-wrap > .kz-photo{height:clamp(280px,34vw,480px);min-height:0;margin:0 0 clamp(36px,4vw,56px)}
.kz-site .kz-map figcaption{justify-content:flex-end}

/* ---------- Wissensabschnitte (Leistungen, Ablauf vor Ort, Zuständigkeit, Kamera, Intervalle) ---------- */
.kz-site .kz-methods{background:var(--kz-sheet)}
.kz-site .kz-onsite{background:var(--kz-paper)}
.kz-site .kz-duty{background:var(--kz-paper)}
.kz-site .kz-camera{background:#e8f0f6}
.kz-site .kz-camera .kz-checklist li::before{background:#fff}
.kz-site .kz-intervals{background:var(--kz-sheet)}
.kz-site .kz-methods .kz-legend-item:hover{background:var(--kz-paper)}
@media (min-width:1101px){
  .kz-site .kz-legend-6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kz-site .kz-legend-6 .kz-legend-item:nth-child(3n+1){border-left:0;padding-left:0}
  .kz-site .kz-legend-6 .kz-legend-item:nth-child(3n+1):hover{background:none}
  .kz-site .kz-legend-6 .kz-legend-item:nth-child(n+4){border-top:1px solid var(--kz-rule)}
}
.kz-site .kz-flow-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px) and (min-width:681px){
  .kz-site .kz-flow-4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
  .kz-site .kz-flow-4::before{display:none}
}
@media (max-width:680px){
  .kz-site .kz-flow-4{grid-template-columns:minmax(0,1fr)}
}
.kz-site .kz-duty-map{margin-bottom:28px}
.kz-site .kz-duty-map figcaption a,.kz-site .kz-intervals .kz-fine a{color:var(--kz-pipe);text-decoration:underline;text-underline-offset:.2em}
.kz-site .kz-duty-tip,.kz-site .kz-intervals-more{max-width:68ch;color:var(--kz-ink)}
.kz-site .kz-camera-note{background:var(--kz-paper);border:1px solid var(--kz-ink);padding:clamp(24px,3vw,34px)}
.kz-site .kz-camera-note h3{margin-bottom:14px}
.kz-site .kz-camera-note p + p{margin-top:14px}
.kz-site .kz-split > div > p + p{margin-top:14px}
.kz-site .kz-spec-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kz-site .kz-spec-3 b{color:var(--kz-red)}
.kz-site .kz-intervals .kz-fine{margin:14px 0 26px}
@media (max-width:860px){
  .kz-site .kz-spec-3{grid-template-columns:minmax(0,1fr)}
  .kz-site .kz-spec-3 div{border-left:0;padding-left:0;border-top:1px solid var(--kz-rule)}
  .kz-site .kz-spec-3 div:first-child{border-top:0}
}