/* ================================================================
   Kostenrechner + Grundriss
   Praefixe: .kc- (Rechner)  .fp- (Floorplan)  .fu (Moebel)
   ================================================================ */
.kc{
  --kc-paper:#F7F7F4;
  --kc-line:#2A3B4D;
  --kc-hair:#E6E5DF;
  --kc-dur:520ms;
  --kc-ease:cubic-bezier(.22,1,.36,1);
  background:transparent;
}
.kc *{box-sizing:border-box}

/* ------------------------------------------------------------ Kopf */
.kc-hd{max-width:60ch;margin:0 auto var(--s-8,32px);text-align:center}
.kc-lede{font-size:var(--fs-lg,15px);color:var(--muted,#5C6473);
  margin-top:var(--s-3,12px);line-height:1.6}

/* ----------------------------------------------------------- Karte */
.kc-card{max-width:1140px;margin:0 auto;background:var(--white,#fff);
  border:1px solid var(--border,#E0DFD9);border-radius:var(--r-5,24px);
  overflow:hidden;box-shadow:0 1px 2px rgba(28,43,58,.03),
  0 18px 40px -22px rgba(28,43,58,.20)}
.kc-top{display:grid;grid-template-columns:1.12fr .88fr}

/* ------------------------------------------------------- Planseite */
.kc-plan{padding:clamp(14px,1.6vw,20px);background:var(--kc-paper);
  border-right:1px solid var(--border,#E0DFD9);display:flex;flex-direction:column}
.fp{width:100%;height:auto;display:block;overflow:visible;
  -webkit-user-select:none;user-select:none}

/* ---------------------------------------------------- Schrittseite */
.kc-side{padding:clamp(16px,1.8vw,22px);display:flex;flex-direction:column;gap:var(--s-5,20px)}

.kc-step{position:relative}
.kc-step-h{display:flex;align-items:baseline;gap:10px;margin-bottom:9px}
.kc-num{font-size:11px;font-weight:var(--fw-semibold,600);letter-spacing:.14em;
  color:var(--teal,#3D8B7A);font-variant-numeric:tabular-nums;flex:none}
.kc-ttl{font-size:13px;font-weight:var(--fw-semibold,600);letter-spacing:.055em;
  text-transform:uppercase;color:var(--ink,#1C2B3A)}
.kc-hint{margin-left:auto;font-size:12px;color:var(--muted,#5C6473);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* gesperrter Schritt */
.kc-step[data-locked="1"],.kc-out[data-locked="1"]{opacity:.34;pointer-events:none;
  filter:saturate(.15)}
.kc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
.kc-rr small{display:block;font-size:11.5px;line-height:1.5}
.kc-step{transition:opacity 380ms var(--kc-ease),filter 380ms var(--kc-ease)}

/* ------------------------------------------------------ Ausstattung */
.kc-lbl{display:flex;align-items:baseline;gap:10px;
  font-size:11px;font-weight:var(--fw-semibold,600);letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted,#5C6473);margin-bottom:7px}
.kc-lbl-n{margin-left:auto;font-size:10.5px;font-weight:var(--fw-regular,400);
  letter-spacing:0;text-transform:none}
.kc-grp+.kc-grp{margin-top:var(--s-4,16px)}
.kc-out{padding-top:var(--s-4,16px)}

/* Auswahlfeld */
.kc-sel{font-family:inherit;font-size:13.5px;line-height:1.25;
  color:var(--ink,#1C2B3A);background:var(--white,#fff);
  border:1px solid var(--border,#E0DFD9);border-radius:var(--r-2,8px);
  min-height:46px;cursor:pointer;
  transition:border-color 200ms var(--ease-smooth,ease),
             background 200ms var(--ease-smooth,ease),
             box-shadow 200ms var(--ease-smooth,ease)}
.kc-sel:hover{border-color:var(--teal,#3D8B7A)}
.kc-sel:focus-visible{outline:2px solid var(--teal-d,#2D6B5C);outline-offset:2px}
.kc-sel{width:100%;display:block;padding:9px 36px 9px 13px;appearance:none;
  font-weight:var(--fw-medium,500);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%235C6473' stroke-width='1.7' stroke-linecap='round'><path d='M6 8l4 4 4-4'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center}
.kc-sel:focus{outline:none;border-color:var(--teal,#3D8B7A)}

/* =================================================== Geraeteklassen */
.kq-g{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;align-items:stretch}

/* Akzente identisch zu .wz-seg-card im Wizard derselben Seite —
   bewusst literal, nicht ueber --amber (kv.css fuehrt dort #C9841F) */
.kq-c[data-v="b"]{--kq-ac:#C8670A;--kq-ac-lt:#FEF5EB}
.kq-c[data-v="m"]{--kq-ac:#3D8B7A;--kq-ac-lt:#E8F5F2}
.kq-c[data-v="p"]{--kq-ac:#1C2B3A;--kq-ac-lt:#EEF0F4}

.kq-c{border:1.5px solid var(--border,#E0DFD9);border-radius:var(--r-2,8px);
  cursor:pointer;background:var(--white,#fff);text-align:left;font-family:var(--f);
  width:100%;display:flex;flex-direction:column;overflow:hidden;padding:0;
  transition:border-color 180ms var(--ease-smooth,ease),
             background 180ms var(--ease-smooth,ease),
             box-shadow 180ms var(--ease-smooth,ease)}
.kq-c::before{content:'';display:block;height:3px;
  background:var(--kq-ac,var(--border,#E0DFD9));opacity:.4;transition:opacity 180ms}
.kq-c:hover{border-color:rgba(28,43,58,.25)}
.kq-c:focus-visible{outline:2px solid var(--teal-d,#2D6B5C);outline-offset:2px}
.kq-c.is-on{border-color:var(--kq-ac);background:var(--kq-ac-lt);
  box-shadow:0 0 0 1px var(--kq-ac)}
.kq-c.is-on::before{opacity:1}

.kq-body{padding:7px 10px 8px}
.kq-tag{font-size:9.5px;font-weight:var(--fw-semibold,600);text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted,#5C6473);line-height:1.4}
.kq-c.is-on .kq-tag{color:var(--kq-ac)}
.kq-price{display:block;font-size:14.5px;font-weight:var(--fw-semibold,600);
  color:var(--ink,#1C2B3A);line-height:1.25;white-space:nowrap;
  font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.kq-meta{display:block;font-size:9.5px;color:var(--muted,#5C6473);line-height:1.35;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.kq-c.is-on .kq-meta{color:var(--kq-ac);opacity:.75}
.kq-price[data-locked="1"]{opacity:.34;filter:saturate(.15)}
.kq-price{transition:opacity 380ms var(--kc-ease),filter 380ms var(--kc-ease)}

/* Verweis unter den Klassenkarten: bewusst Textlink, kein vierter Knopf —
   im Ausgabeblock stehen schon Hauptaufruf und Zweitaufruf. */
/* Kein Unterstrich: direkt darunter liegt die Trennlinie des Ausgabe-
   blocks, zwei waagrechte Linien kurz hintereinander wirken unruhig.
   Das Chevron traegt die Klickbarkeit. */
.kc-klassen-link{display:inline-flex;align-items:center;gap:5px;margin-top:7px;
  font-size:11.5px;color:var(--muted,#5C6473);text-decoration:none;
  transition:color 160ms var(--ease-smooth,ease)}
.kc-klassen-link::after{content:'';width:5px;height:5px;flex:none;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(-45deg);margin-left:1px;opacity:.7;
  transition:transform 160ms var(--ease-smooth,ease)}
.kc-klassen-link:hover{color:var(--teal-d,#2D6B5C)}
.kc-klassen-link:hover::after{transform:rotate(-45deg) translate(2px,2px)}
.kc-klassen-link:focus-visible{outline:2px solid var(--teal-d,#2D6B5C);
  outline-offset:3px;border-radius:3px}
.kc-step[data-locked="1"] .kc-klassen-link{pointer-events:none}



/* ── Beiwerk des s5-Grundrisses ───────────────────────────────────────────
   Beim Umstieg auf den geteilten Plan kam das SVG mit, diese Stile nicht:
   sie standen nur in css/kv-plan.css. Ohne Regel faerbt SVG ein Element
   schwarz — die Klickflaeche des Nordpfeils (Radius 49) lag deshalb als
   schwarzer Kreis ueber dem Plan. Werte 1:1 aus kv-plan.css. */
.fp-nr{font-family:var(--f);font-size:7.5px;font-weight:700;fill:#A6ADB4;
  letter-spacing:.06em}
.fp-dim,.fp-fu,.fp-sv{pointer-events:none}
.fp-ms{display:none}
.fp-ms-b1{fill:var(--kc-line);opacity:.72}
.fp-ms-b2{fill:#fff;stroke:var(--kc-line);stroke-width:.6}
.fp-ms-l{stroke:#6E7781;stroke-width:.9;fill:none}
.fp-ms-t{font-family:var(--f);font-size:8px;fill:var(--muted);text-anchor:middle}
/* Im Widget gibt es keine Himmelsrichtung zu waehlen — der Plan ist ein
   Beispiel, kein Entwurf. Ohne den Kompass rechts wird der Rahmen enger
   und die Raeume sitzen groesser und mittiger. Im grossen Rechner bleibt
   er, dort dreht man den Plan damit. */
.fp-nord{display:none}
/* Auch die Aussenbemassung: der Plan ist ein Beispiel, keine Bauzeichnung.
   Ohne Masskette links und unten schrumpft der Rahmen um rund ein Drittel
   und der Grundriss fuellt die Flaeche. Im grossen Rechner bleibt sie. */
.fp-l--dim{display:none}
/* Nur der tatsaechliche Aufstellort. Das zweite Geraet ist im Rechner zur
   Auswahl da, im Widget waere es nur ein Kaestchen ohne Funktion.
   Das verbleibende steht voll sichtbar: .fp-ag{opacity:.34} weiter unten
   dimmt es sonst, bis ein Raum gewaehlt ist — im Rechner sinnvoll, weil
   man dort den Ort erst waehlt, im Widget nicht, denn er steht fest. */
.fp-ag:not(.is-on){display:none}
.fp .fp-ag.is-on{opacity:1}
.fp-nord-hit{fill:#fff;opacity:.01}
.fp-nord-ring{fill:#fff;stroke:#DDE0DE;stroke-width:1}
.fp-nord-tick{stroke:#C2C7C4;stroke-width:1;stroke-linecap:round}
.fp-nord-b{fill:none;stroke:var(--kc-line);stroke-width:1}
.fp-nord-dreh{transition:transform 420ms var(--kc-ease)}
.fp-nord:hover .fp-nord-ring{stroke:var(--teal)}
.fp-nord-l{font-family:var(--f);font-size:7.5px;font-weight:700;fill:var(--muted);
  letter-spacing:.09em;text-anchor:middle}

/* ── Geraeteklassen: auf dem Desktop praesenter, am Handy unveraendert
   kompakt. Nur Anschaffung und Effizienz — Betriebskosten gehoeren in den
   grossen Rechner, hier wuerden sie die Karte zur Tabelle machen. */
@media (min-width:761px){
  .kq-c{padding:14px 12px 13px}
  .kq-tag{font-size:11px;letter-spacing:.08em}
  .kq-price{font-size:19px;margin-top:6px;letter-spacing:-.01em}
  .kq-meta{font-size:11px;margin-top:4px}
}

/* ------------------------------------------------------- Ergebnis */
/* margin-top:auto schob den Block ans Spaltenende — bei hohem Grundriss
   klaffte zwischen den Geraeteklassen und dem Betrag ein leeres Feld.
   Der Betrag gehoert an die Klassen, die Luft darf unten bleiben. */
/* Der Spaltenabstand (.kc-side gap) liefert bereits 20px. Zusaetzliche
   20px Rand plus 20px Polster ergaben 60px zwischen den Klassenkarten und
   dem Betrag — das wirkte wie ein Loch. Jetzt 20 + 14. */
.kc-out{margin-top:0;padding-top:14px;
  border-top:1px solid var(--kc-hair)}
.kc-ok{font-size:11px;font-weight:var(--fw-semibold,600);letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted,#5C6473)}
.kc-price{display:flex;align-items:baseline;gap:.1em;margin-top:5px;
  font-size:clamp(34px,3.6vw,44px);font-weight:var(--fw-light,300);
  color:var(--ink,#1C2B3A);line-height:1;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
.kc-cur{font-size:.46em;color:var(--muted,#5C6473);font-weight:var(--fw-regular,400)}
.kc-range{font-size:12.5px;color:var(--muted,#5C6473);margin-top:8px;
  font-variant-numeric:tabular-nums;line-height:1.5}
.kc-excl{margin:4px 0 0;font-size:11px;line-height:1.45;
  color:var(--muted,#5C6473);opacity:.8}
.kc-op{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:9px;padding-top:8px;border-top:1px solid var(--kc-hair);
  font-size:13px;color:var(--muted,#5C6473)}
.kc-op b{color:var(--ink,#1C2B3A);font-weight:var(--fw-semibold,600);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* Gleiches Muster wie .hero-cta-primary auf Start- und Stadtseiten:
   dunkler Grund, Radius --r-2, Hover nach Teal. Vorher war das hier der
   einzige Pillen-Button auf hellem Grund im ganzen Projekt. */
.kc-cta{margin-top:var(--s-5,20px);display:flex;align-items:center;
  justify-content:center;gap:var(--s-2,8px);background:var(--ink,#1C2B3A);
  color:var(--white,#fff);font-weight:var(--fw-semibold,600);
  font-size:var(--fs-md,15px);padding:14px 20px;letter-spacing:var(--tr-base,0);
  border-radius:var(--r-2,10px);text-decoration:none;
  box-shadow:0 10px 24px -8px rgba(28,43,58,.28);
  transition:background var(--dur-base,220ms) var(--ease-smooth,ease),
             transform var(--dur-base,220ms) var(--ease-smooth,ease),
             box-shadow var(--dur-base,220ms) var(--ease-smooth,ease)}
.kc-cta:hover{background:var(--teal,#3D8B7A);transform:translateY(-2px);
  box-shadow:0 16px 32px -10px rgba(61,139,122,.4)}
.kc-cta:focus-visible{outline:2px solid var(--teal-d,#2D6B5C);outline-offset:3px}
.kc-cta[aria-disabled="true"]{background:#C9CCD1;pointer-events:none;
  transform:none;box-shadow:none}
.kc-cta svg{transition:transform var(--dur-base,220ms) var(--ease-smooth,ease);flex:none}
.kc-cta:hover svg{transform:translateX(3px)}
.kc-fine{margin:11px 0 0;text-align:center;font-size:12px;line-height:1.5;
  color:var(--muted,#5C6473)}
.kc-fine a{color:var(--teal-d,#2D6B5C);font-weight:var(--fw-semibold,600);
  text-decoration:none;border-bottom:1px solid rgba(45,107,92,.3)}
.kc-fine a:hover{border-bottom-color:var(--teal-d,#2D6B5C)}



/* ================================================================
   Grundriss
   ================================================================ */
.fp-paper{opacity:.9}
.fp-area{fill:#FFFFFF;transition:fill 320ms var(--kc-ease)}
.fp-area--sv{fill:#EDEEEF}
.fp-hatch{pointer-events:none}
.fp-dash{fill:none;stroke:var(--teal,#3D8B7A);stroke-width:1.1;
  stroke-dasharray:5 5;opacity:.30;pointer-events:none;
  transition:opacity 260ms var(--kc-ease),stroke-dasharray 260ms}
.fp-wall{fill:var(--kc-line)}
.fp-op{fill:#FFFFFF}
.fp-glass{stroke:var(--kc-line);stroke-width:.9;fill:none;opacity:.8}
.fp-bank{stroke:var(--kc-line);stroke-width:.9;fill:none;opacity:.3;
  stroke-linecap:round}
.fp-leaf{stroke:var(--kc-line);stroke-width:1.3;fill:none}
.fp-arc{stroke:var(--kc-line);stroke-width:.7;fill:none;opacity:.4}
.fp-sill{stroke:var(--kc-line);stroke-width:1;fill:none;opacity:.45}

/* ------------------------------------------------------- Moebel */
.fu{fill:none;stroke:#96A0AB;stroke-width:.85;stroke-linejoin:round}
.fu2{fill:#DFE3E6;stroke:none}
.fu3{stroke:#B6BEC6;stroke-width:.6;fill:none}

/* -------------------------------------------------- Beschriftung */
.fp-plate{fill:#FFFFFF;opacity:.84;pointer-events:none}
.fp-plate--sv{fill:#EDEEEF;opacity:.9}
.fp-plate--k{display:none}

.fp-mk{pointer-events:none}
.fp-mk-nm{font-family:var(--f,sans-serif);font-size:11.4px;font-weight:600;
  fill:var(--kc-line);letter-spacing:.09em;text-anchor:middle}
.fp-mk-nm--k{display:none}
.fp-mk-m2{font-family:var(--f,sans-serif);font-size:9.8px;font-weight:500;
  fill:var(--muted,#5C6473);letter-spacing:.02em;text-anchor:middle;
  font-variant-numeric:tabular-nums}
.fp-sv-t{font-family:var(--f,sans-serif);font-size:9.8px;font-weight:500;
  fill:var(--kc-line);opacity:.45;letter-spacing:.07em;text-anchor:middle}
.fp-sv-t--k{display:none}

/* --------------------------------------------------------- Chip */
.fp-chipw{pointer-events:none}
.fp-chip-bg{fill:#FFFFFF;stroke:var(--teal,#3D8B7A);stroke-width:1.5;
  transition:fill 240ms var(--kc-ease),stroke 240ms}
.fp-chip-plus,.fp-chip-check{stroke:var(--teal,#3D8B7A);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;fill:none;
  transition:opacity 200ms,stroke 240ms}
.fp-chip-check{opacity:0;stroke:#FFFFFF}
.fp-chip-puls{fill:none;stroke:var(--teal,#3D8B7A);stroke-width:1.4;opacity:0}
.fp:not(.has-sel) .fp-chip-puls{animation:fpPuls 2.6s var(--kc-ease) infinite}
.fp-mk[data-mk="arbeit"] .fp-chip-puls{animation-delay:.35s}
.fp-mk[data-mk="schlaf"] .fp-chip-puls{animation-delay:.7s}
.fp-mk[data-mk="wohnen"] .fp-chip-puls{animation-delay:1.05s}
.fp-mk[data-mk="gaeste"] .fp-chip-puls{animation-delay:1.4s}
@keyframes fpPuls{
  0%{opacity:.5;transform:scale(1)}
  55%,100%{opacity:0;transform:scale(2.1)}}
.fp-chip-puls{transform-box:fill-box;transform-origin:50% 50%}

/* -------------------------------------------------------- Technik */
.fp-riser{stroke:var(--teal,#3D8B7A);stroke-width:1.9;fill:none;
  stroke-linecap:round;opacity:0;
  transition:opacity 300ms var(--kc-ease),stroke-dashoffset 900ms var(--kc-ease)}
.fp-riser.is-on{opacity:.85}
.fp-pipe{stroke:var(--teal,#3D8B7A);stroke-width:1.6;fill:none;
  stroke-linecap:round;opacity:0;stroke-dasharray:var(--len);
  stroke-dashoffset:var(--len);
  /* 620ms stammten aus der Zeit, als hier ein einziger Steigstrang lief.
     Der s5-Plan legt die Leitung als Kette aus vielen Abschnitten — kurz
     und mit Ueberlappung wirkt das wie eine durchlaufende Welle. */
  transition:opacity 140ms var(--kc-ease),stroke-dashoffset 300ms var(--kc-ease)}
.fp-pipe.is-on{opacity:.85;stroke-dashoffset:0}
.fp-node{fill:var(--teal,#3D8B7A);opacity:0;transition:opacity 240ms 260ms}
.fp-ig.is-on .fp-node,.fp-node--ab.is-on{opacity:.95}

.fp-ig{opacity:0;transform-box:fill-box;transform-origin:50% 50%;
  transform:scale(.4);
  transition:opacity 300ms var(--kc-ease),transform 420ms var(--kc-ease)}
.fp-ig.is-on{opacity:1;transform:none}
.fp-ig-b{fill:var(--teal,#3D8B7A)}
.fp-ig-l{stroke:#FFFFFF;stroke-width:.8;opacity:.55;fill:none;stroke-linecap:round}
.fp-ig-air{stroke:var(--teal,#3D8B7A);stroke-width:.9;fill:none;opacity:.34;
  stroke-linecap:round}

.fp-ag{opacity:.34;transition:opacity 320ms var(--kc-ease)}
.fp.has-sel .fp-ag{opacity:1}
.fp-ag-b{fill:#FFFFFF;stroke:var(--teal,#3D8B7A);stroke-width:1.5}
.fp-ag-lam{stroke:var(--teal,#3D8B7A);stroke-width:.85;fill:none;opacity:.6;
  stroke-linecap:round}
.fp-ag-hid{fill:none;stroke:var(--teal,#3D8B7A);stroke-width:.8;
  stroke-dasharray:3 2.4;opacity:.5}
.fp-ag-kons{stroke:var(--kc-line);stroke-width:1.1;fill:none;opacity:.4;
  stroke-linecap:round}
.fp-ag-air{stroke:var(--teal,#3D8B7A);stroke-width:1;fill:none;opacity:.45;
  stroke-linecap:round}
.fp-ag-air-h{fill:var(--teal,#3D8B7A);opacity:.45}
.fp-ag-pipe{stroke:var(--teal,#3D8B7A);stroke-width:1.7;fill:none;
  stroke-linecap:round;opacity:.85}
.fp-ag-bohr{fill:#FFFFFF;stroke:var(--teal,#3D8B7A);stroke-width:1.2}
.fp-ag-t{font-family:var(--f,sans-serif);font-size:7.6px;font-weight:600;
  fill:var(--teal-d,#2D6B5C);letter-spacing:.13em;text-anchor:start}
.fp-ag-s{font-family:var(--f,sans-serif);font-size:8.6px;font-weight:600;
  fill:var(--kc-line);letter-spacing:.03em;text-anchor:start;
  font-variant-numeric:tabular-nums;opacity:.8}

/* ------------------------------------------------------- Bemassung */
.fp-dim-l{stroke:var(--kc-line);stroke-width:1.1;fill:none;opacity:.5}
.fp-dim-t{stroke:var(--kc-line);stroke-width:1.5;fill:none;opacity:.6}
.fp-dim-h{stroke:var(--kc-line);stroke-width:.8;fill:none;opacity:.26}
.fp-dim-x{font-family:var(--f,sans-serif);font-size:10px;fill:var(--kc-line);
  opacity:.75;text-anchor:middle;font-variant-numeric:tabular-nums}
.fp-dim--tot .fp-dim-x{font-weight:600;opacity:.88}
.fp-nord-s{stroke:var(--kc-line);stroke-width:1;fill:none;opacity:.35;
  stroke-linecap:round}
.fp-nord-a{fill:var(--kc-line);opacity:.5}
.fp-nord-p{fill:var(--kc-line);opacity:.35}
.fp-nord-t{font-family:var(--f,sans-serif);font-size:10px;font-weight:600;
  fill:var(--kc-line);opacity:.55;letter-spacing:.08em;text-anchor:middle}

/* ----------------------------------------------------- Interaktion */
.fp-hit{cursor:pointer;-webkit-tap-highlight-color:transparent}
.fp-hit-r{fill:transparent}
.fp-hit:focus{outline:none}
.fp-focus{fill:none;stroke:var(--teal-d,#2D6B5C);stroke-width:2.2;
  opacity:0;pointer-events:none}
.fp-hit:focus-visible .fp-focus{opacity:1}

/* Zustaende, per JS auf die Zielelemente gesetzt */
/* gewaehlt = klimatisiert: kuehles Blau als Zustand, Teal bleibt Bedienfarbe */
.fp-area.is-hot{fill:#F3F7FA}
.fp-area.is-on{fill:#E4EFF7}
.fp-dash.is-hot{opacity:.62}
/* klimatisiert = nur die Flaeche, keine Kontur */
.fp-dash.is-on{opacity:0}
.fp-chip.is-hot .fp-chip-bg{stroke-width:2}
.fp-chip.is-on .fp-chip-bg{fill:var(--teal,#3D8B7A);stroke:var(--teal,#3D8B7A)}
.fp-chip.is-on .fp-chip-plus{opacity:0}
.fp-chip.is-on .fp-chip-check{opacity:1}
.fp-chip{transform-box:fill-box;transform-origin:50% 50%;
  transition:transform 260ms var(--kc-ease)}
.fp-chip.is-hot{transform:scale(1.14)}
.fp-mk.is-on .fp-mk-nm{fill:#33607F}

/* ---------------------------------------------------------- Intro */
.fp-l{opacity:0;transform-box:view-box;transform-origin:50% 50%;
  transform:scale(.988);
  transition:opacity 620ms var(--kc-ease),transform 620ms var(--kc-ease)}
.kc.is-in .fp-l{opacity:1;transform:none}
.kc.is-in .fp-l--flaechen{transition-delay:0ms}
.kc.is-in .fp-l--wand    {transition-delay:120ms}
.kc.is-in .fp-l--oeff    {transition-delay:300ms}
.kc.is-in .fp-l--moebel  {transition-delay:470ms}
.kc.is-in .fp-l--dim     {transition-delay:640ms}
.kc.is-in .fp-l--tech    {transition-delay:800ms}
.kc.is-in .fp-l--text    {transition-delay:800ms}
.kc.is-in .fp-l--karten  {transition-delay:940ms}
.kc.is-in .fp-l--hit     {transition-delay:940ms}

/* ================================================================
   Plankopf, Massstab, Legende
   ================================================================ */
.kc-plan-h{display:flex;align-items:baseline;gap:12px;margin-bottom:10px;
  padding-bottom:9px;border-bottom:1px solid var(--kc-hair)}
.kc-plan-t{font-size:12.5px;font-weight:var(--fw-medium,500);
  color:var(--ink,#1C2B3A);line-height:1.4}
.kc-plan-c{margin-left:auto;font-size:12px;color:var(--teal-d,#2D6B5C);
  font-weight:var(--fw-semibold,600);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.kc-tip{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--kc-hair);
  font-size:12px;color:var(--muted,#5C6473);line-height:1.55}
.kc-tip a{color:var(--teal-d,#2D6B5C);font-weight:var(--fw-semibold,600);
  text-decoration:none;border-bottom:1px solid rgba(45,107,92,.28)}
.kc-tip a:hover{border-bottom-color:var(--teal-d,#2D6B5C)}

/* ================================================================
   Responsiv
   ================================================================ */
@media (max-width:1040px){
  .kc-top{grid-template-columns:1fr}
  .kc-plan{border-right:0;border-bottom:1px solid var(--border,#E0DFD9)}
}
@media (max-width:420px){
  .kq-g{gap:6px}
  .kq-body{padding:6px 8px 7px}
  .kq-price{font-size:13.5px}
}
@media (max-width:720px){
  .fp-mk-nm--l{display:none}
  .fp-mk-nm--k{display:inline}
  .fp-mk-nm{font-size:16.5px}
  .fp-mk-m2{font-size:14.2px}
  .fp-sv-t{font-size:14.2px}
  .fp-sv-t--l{display:none}
  .fp-sv-t--k{display:inline}
  .fp-plate--l{display:none}
  .fp-plate--k{display:block}
  .fp-ag-t{font-size:11px}
  .fp-ag-s{font-size:12px}
  .fp-l--dim{display:none}
  .fp-chip-bg{stroke-width:2.2}
  .fp-chip-plus,.fp-chip-check{stroke-width:2.8}
  /* Strichstaerken hochziehen: der enge Ausschnitt skaliert auf ~0,63 */
  .fp-riser{stroke-width:3}
  .fp-pipe{stroke-width:2.6}
  .fp-ag-pipe{stroke-width:2.6}
  .fp-ag-b,.fp-ag-bohr{stroke-width:2.2}
  .fp-dash{stroke-width:1.7;stroke-dasharray:7 7}
  .fp-wall{shape-rendering:crispEdges}
  .fp-ig-air{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fp-l,.kc-step,.kc-side>*{opacity:1!important;transform:none!important;
    transition:none!important}
  .kq-c{transition:none}
  .fp-pipe.is-on,.fp-riser.is-on{stroke-dashoffset:0}
  .fp-chip-puls{animation:none}
  *{scroll-behavior:auto}
}