/* ═══════════════════════════════════════════════════════════════════
   kv-plan.css — Grundriss im Kostenrechner
   Vollständig erzeugt aus dem Entwurf. Nicht von Hand kürzen: jede
   Klasse, die im SVG vorkommt, braucht hier eine Regel, sonst
   zeichnet der Browser Vorgabewerte (schwarze Flächen).
   ═══════════════════════════════════════════════════════════════ */

/* Die drei kc-Variablen standen bisher nur in kv-kostenrechner.css — die
   Datei laedt kostenrechner.html gar nicht. Folge: --kc-line war leer, und
   .fp-wall{fill:var(--kc-line)} fiel auf den SVG-Vorgabewert Schwarz zurueck.
   Werte 1:1 aus kv-kostenrechner.css, damit diese Datei selbsttragend ist. */
:root{
  --kc-paper:#F7F7F4;
  --kc-line:#2A3B4D;
  --kc-ease:cubic-bezier(.22,1,.36,1);
}

/* Basisregel des SVG. Fehlte bisher ganz: ohne overflow:visible
   schneidet der Rahmen Nordpfeil und Bemassung ab. */
.fp{width:100%;height:auto;display:block;overflow:visible;
  -webkit-user-select:none;user-select:none}

/* Massstabsbalken: im Entwurf ausgeblendet, die Bemassung genuegt. */
.fp-ms{display:none}

.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-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}

/* ----------------------------------------------------- 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:1}
.fp-l{opacity:1;transform:none}
.fp-l--flaechen{transition-delay:0ms}
.fp-l--wand    {transition-delay:120ms}
.fp-l--oeff    {transition-delay:300ms}
.fp-l--moebel  {transition-delay:470ms}
.fp-l--dim     {transition-delay:640ms}
.fp-l--tech    {transition-delay:800ms}
.fp-l--text    {transition-delay:800ms}
.fp-l--karten  {transition-delay:940ms}
.fp-l--hit     {transition-delay:940ms}

/* ── Ergänzungen aus dem Entwurf ─────────────────────────── */

/* Planleiste */
.pl-h{display:flex;align-items:center;gap:14px;padding:12px 20px;
  border-bottom:1px solid var(--border);flex-wrap:wrap}

.anl{font-size:14.5px;font-weight:var(--fw-semibold);color:var(--ink);
  letter-spacing:var(--tr-snug,-.01em)}

.anl small{display:block;font-size:11.5px;font-weight:var(--fw-regular);color:var(--muted);
  margin-top:2px}

/* Feste Bühne für den Plan: die Grundrisse haben unterschiedliche
   Seitenverhältnisse, ohne feste Höhe springt die ganze Karte beim
   Umschalten und der nächste Klick geht daneben. */

.plan{position:relative;max-width:1000px;margin:0 auto}

.plan svg.fp{width:100%;height:auto;display:block}
@media (max-width:760px){
  .kvp-links,.kvp-erg-karte{border-radius:0;border-left:none;border-right:none}

  .pl-h{padding:12px 14px 10px;gap:8px}
  .anl{font-size:14px;width:100%}

  .pill-leiste{position:static;left:auto;top:auto;right:auto;
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    padding:0 14px 10px;margin:0;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .pill-leiste::-webkit-scrollbar{display:none}
  .pl-pill{flex:none;background:var(--white);box-shadow:none;
    border-color:var(--border)}
  .pl-menu{left:14px!important;right:14px;width:auto;min-width:0}

  .plan{max-width:none}
  /* Maßstabsleiste kostet unten Platz und ist auf dem Handy unlesbar */
  .fp-ms{display:none}

  .kvp-fg{padding:14px}
  .kvp-fg-karte{gap:11px;padding:13px 14px}
  .kvp-fg-ic{width:30px;height:30px;border-radius:8px}
  .kvp-fg-ic svg{width:16px;height:16px}
  .kvp-fg-q{font-size:14.5px}
  .kvp-fg-o button{flex:1 1 calc(50% - 3px);padding:10px 8px;text-align:center}
  .kvp-fg-o button.egal{flex:1 1 100%}
  .kvp-vf-r{flex-wrap:wrap;gap:7px}
  .kvp-vf-lbl{width:auto;flex:1}
  .kvp-vf-o{flex:1 1 100%}

  .kvp-erg{padding:16px 14px 18px}
  .kvp-erg-kopf{padding:16px 16px 18px}
  .kvp-pk-range{font-size:38px}
  .res-acc-body{padding:2px 12px 12px!important}
  .kvp-rt th{font-size:12.5px;padding:9px 10px 9px 0}
  .kvp-rt td{font-size:12.5px;padding:9px 0}
}

.fp-nr{font-family:var(--f);font-size:7.5px;font-weight:700;fill:#A6ADB4;letter-spacing:.06em}

.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}

.fp-area,.fp-mk,.fp-ig,.fp-node{transition:opacity 300ms var(--kc-ease),fill 300ms var(--kc-ease)}

.fp-balk{fill:#F0F1EE;stroke:#8A93A0;stroke-width:.8}

.fp-gelaend{stroke:#5C6473;stroke-width:1.5;fill:none;stroke-linecap:round}

.fp-dim-l{stroke:#6E7781;stroke-width:1;fill:none}

.fp-dim-h{stroke:#B9BFC4;stroke-width:.8;fill:none}

.fp-dim-t{stroke:#4B5560;stroke-width:1.5;fill:none}

.fp-dim-x{font-family:var(--f);font-size:10.5px;font-weight:600;fill:#3C4757;
  text-anchor:middle;letter-spacing:.01em}

/* Es steht immer nur EIN Außengerät. Die anderen Varianten stecken im
   SVG, dürfen aber nicht durchscheinen. */
/* Es läuft immer nur EIN Außengerät. Die anderen Standorte bleiben als
   blasser Umriss stehen — man sieht, dass es eine Alternative gibt, und
   kann direkt dorthin wechseln. */
.fp-ag{display:block}

.fp-ag:not(.is-on){opacity:.22;cursor:pointer}

.fp-ag:not(.is-on):hover{opacity:.45}

.fp-ag:not(.is-on) .fp-pipe,
.fp-ag:not(.is-on) .fp-node,
.fp-ag:not(.is-on) .fp-ag-bohr,
.fp-ag:not(.is-on) .fp-ag-s{display:none}

.fp-ag:not(.is-on) .fp-ag-b{fill:none;stroke:var(--teal);stroke-width:1.2;
  stroke-dasharray:3 2.5}

.fp-ag:not(.is-on) .fp-ag-lam{stroke:var(--teal);opacity:.5}

.fp-ag-b{fill:var(--teal)}

.fp-ag-lam{stroke:#fff;stroke-width:.8;opacity:.55;fill:none}

.fp-ag-hid{fill:#fff;opacity:.18}

.fp-ag-bohr{fill:var(--teal);opacity:.5}

.fp-ag-t{font-family:var(--f);font-size:8px;font-weight:700;fill:var(--teal-d);letter-spacing:.06em}

.fp-ag-s{font-family:var(--f);font-size:8px;fill:var(--muted)}

.fp-chiphit{fill:transparent;cursor:pointer}

/* Die gestrichelte Kontur um jeden Raum war dauerhaft sichtbar und machte
   den Plan unruhig — sie erscheint jetzt nur beim Zeigen. */
.fp-dash{opacity:0!important;transition:opacity 200ms}

.fp-dash.is-hot{opacity:.42!important}

/* Die Leitung wächst vom Außengerät her Stück für Stück und zieht sich
   wieder zurück, sobald das letzte Gerät an ihr abgewählt wird. */
.fp-pipe{stroke:var(--teal);stroke-width:1.7;fill:none;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);opacity:0;
  /* 260ms linear wirkte gerasselt: konstante Geschwindigkeit, hartes Ende.
     Dauer und Easing jetzt wie im Widget-Grundriss (dort 620ms), aber
     gebremst — das Widget hat 6 Leitungen, s5 bis zu 70 Segmente, bei
     620ms und 62ms Takt liefen zehn gleichzeitig. */
  transition:stroke-dashoffset 300ms cubic-bezier(.22,1,.36,1),
             opacity 140ms cubic-bezier(.22,1,.36,1)}

.fp-pipe.is-on{stroke-dashoffset:0;opacity:.9}
@media (prefers-reduced-motion:reduce){
  .fp-pipe{transition:none}
}
@keyframes neuPuls{0%,100%{opacity:1}45%{opacity:.25}}

.fp-mk.is-neu{animation:neuPuls .5s ease-in-out 3}

/* ── Pillen im Plan und Frageführung ────────────────────────────────
   Ebenfalls am Ende, aus demselben Grund: die Detailregeln sind mir
   schon zweimal bei einem Blockpatch verloren gegangen. Ohne sie
   erben die Symbole ihre Größe vom Dokument und werden riesig. */
.pl-pill:hover{border-color:var(--ink)}

.pl-pill svg{width:13px;height:13px;flex:none;opacity:.7}

.pl-pill b{font-weight:var(--fw-semibold);color:var(--ink)}

.pl-pill i{font-style:normal;color:var(--muted)}

.pl-pill span{display:inline-flex;gap:5px;align-items:baseline;white-space:nowrap}

.pl-menu button{display:block;width:100%;text-align:left;border:none;background:none;
  font-family:inherit;font-size:12.5px;color:var(--body);padding:7px 10px;border-radius:7px;
  cursor:pointer}

.pl-menu button:hover{background:var(--bg)}

.pl-menu button.on{background:var(--teal-lt);color:var(--teal-d);font-weight:var(--fw-semibold)}

/* Sicherheitsnetz: kein Symbol im Bedienbereich wird je größer als
   seine Zeile, egal welche Regel sonst verloren geht. */
.pl-pill svg,.kvp-fg-erl svg,.kvp-vf-ic svg,.kvp-fg-ic svg{max-width:20px;max-height:20px}

/* ── Pillen-Grundform ───────────────────────────────────────────────
   Basisregel, die mir schon einmal verlorenging: ohne sie sind die
   Pillen eckig und die Symbole erben eine fremde Farbe. */
.pl-pill{display:inline-flex;align-items:center;gap:6px;
  border:1px solid rgba(28,43,58,.10);background:rgba(255,255,255,.94);
  border-radius:999px;padding:5px 12px 5px 9px;box-shadow:0 1px 3px rgba(28,43,58,.07);
  font-family:inherit;font-size:11.5px;color:var(--body);cursor:pointer;
  transition:all 150ms;white-space:nowrap}

.pl-menu{position:absolute;z-index:30;background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-2);box-shadow:0 12px 30px -12px rgba(28,43,58,.34);padding:8px;
  display:none;min-width:150px}

.pl-menu.on{display:block}

.pl-menu select{width:100%;border:1px solid var(--border);border-radius:7px;
  font-family:inherit;font-size:12.5px;padding:6px 8px;color:var(--ink);background:var(--white)}
@media (max-width:760px){
  .pl-pill{flex:none;background:var(--white);box-shadow:none;border-color:var(--border)}
  .pill-leiste{position:static;left:auto;top:auto;right:auto;flex-wrap:nowrap;
    overflow-x:auto;overflow-y:hidden;padding:0 14px 10px;margin:0;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pill-leiste::-webkit-scrollbar{display:none}
  .pl-menu{left:14px!important;right:14px;width:auto;min-width:0}
  
  .kvp-fg{padding:14px}
  .kvp-fg-karte{gap:11px;padding:13px 14px}
  .kvp-fg-ic{width:30px;height:30px;border-radius:8px}
  .kvp-fg-q{font-size:14.5px}
  .kvp-fg-o button{flex:1 1 calc(50% - 3px);padding:10px 8px;text-align:center}
  .kvp-fg-o button.egal{flex:1 1 100%}
  .seg-card-wz .sc-body{padding:12px 13px}
  .sc-features{gap:3px}
}

/* ── Gruppen und Varianten, die sonst ohne Regel bleiben ──────────────
   Die Gruppen tragen keine eigene Darstellung, ihre Kinder sind gestylt.
   Die --l-Varianten entstehen bei langen Raumnamen und fallen bewusst auf
   die Basisregel zurück; explizit notiert, damit die Vollständigkeits-
   prüfung unten aussagekräftig bleibt. */
.fp-dim,.fp-fu,.fp-sv{pointer-events:none}
.fp-mk-nm--l{letter-spacing:.02em}
.fp-plate--l{}

/* ═══ Linke Spalte: Karte und Frageblock — woertlich aus dem Entwurf ═══ */
.kvp-links{min-width:0;background:var(--white);border:1px solid var(--border); border-radius:var(--r-4);overflow:hidden; box-shadow:0 1px 2px rgba(28,43,58,.03),0 18px 40px -22px rgba(28,43,58,.20)}
.kvp-vf-hint{margin-top:10px;font-size:11px;line-height:1.45;color:var(--muted)}
.kvp-fg{padding:16px 20px 18px;border-top:1px solid var(--border)}
.kvp-fg-karte{display:flex;gap:14px;align-items:flex-start;background:var(--bg); border-radius:var(--r-3);padding:15px 17px}
.kvp-fg-ic{width:36px;height:36px;flex:none;border-radius:10px;background:var(--white); display:flex;align-items:center;justify-content:center;color:var(--teal-d); box-shadow:0 1px 2px rgba(28,43,58,.08)}
.kvp-fg-ic svg{width:18px;height:18px}
.kvp-fg-q{font-size:15px;font-weight:var(--fw-semibold);color:var(--ink);line-height:1.3}
.kvp-fg-o button{border:1px solid var(--border);background:var(--white);border-radius:9px; font-family:inherit;font-size:13px;font-weight:var(--fw-medium);color:var(--ink); padding:8px 15px;cursor:pointer;transition:all 140ms}
.kvp-fg-o button.egal{border-style:dashed;color:var(--muted);font-weight:var(--fw-regular)}
.kvp-fg-kopf{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px;min-height:26px}
.kvp-fg-erl{display:inline-flex;align-items:center;gap:5px;background:var(--teal-lt); border:1px solid var(--teal-lt2);border-radius:999px;padding:4px 10px;font-size:11.5px; color:var(--teal-d);cursor:pointer;font-family:inherit}
.kvp-fg-erl:hover{background:var(--teal-lt2)}
.kvp-fg-erl b{font-weight:var(--fw-semibold)}
.kvp-fg-erl svg{width:11px;height:11px;flex:none}
.kvp-fg-zaehl{margin-left:auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.kvp-fg-w{font-size:12px;color:var(--muted);line-height:1.45;margin:4px 0 11px}
.kvp-fg-o{display:flex;gap:6px;flex-wrap:wrap}
.kvp-fg-o button:hover{border-color:var(--teal);background:var(--teal-lt);color:var(--teal-d)}
.kvp-fg-fertig{display:flex;align-items:center;gap:11px;background:var(--teal-lt); border-radius:var(--r-3);padding:13px 16px;font-size:12.5px;color:var(--body);line-height:1.45}
.kvp-fg-fertig svg{color:var(--teal);flex:none}
.kvp-fg-fertig b{color:var(--ink);font-weight:var(--fw-semibold)}
.kvp-fg-txt{flex:1;min-width:0}

@media (max-width:760px){
  .kvp-fg-o button{flex:1 1 calc(50% - 3px);padding:10px 8px;text-align:center}
  .kvp-fg-o button.egal{flex:1 1 100%}
  .kvp-fg{padding:14px}
  .kvp-fg-karte{gap:11px;padding:13px 14px}
  .kvp-fg-ic{width:30px;height:30px;border-radius:8px}
  .kvp-fg-q{font-size:14.5px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENTWURF-BAUTEILE — Vorfragen, Ergebniskarte, Detailsektion
   Alles im kvp-Namespace. Die Seite selbst benutzt generische Klassen
   (.fg, .seg, .cta, .crow), deshalb hat hier nichts einen nackten Namen.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Vorfragen als Pillen über dem Plan ──────────────────────────────────
   Ersetzt sichtbar den Schritt "Standort & Gebäude". Die echten Felder
   (#sBL, #sBau, Nutzungs-Chips) bleiben im DOM und tragen den Zustand;
   diese Pillen schreiben nur hinein. */
.kvp-vor{display:flex;flex-wrap:wrap;gap:7px;padding:12px 20px 0}
.kvp-vor-p{display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--border);background:var(--white);border-radius:999px;
  padding:7px 14px 7px 11px;font-family:inherit;font-size:12.5px;color:var(--body);
  cursor:pointer;transition:border-color 150ms,background 150ms;white-space:nowrap;
  box-shadow:0 1px 2px rgba(28,43,58,.05)}
.kvp-vor-p:hover{border-color:var(--ink)}
.kvp-vor-p svg{width:13px;height:13px;flex:none;opacity:.6;color:var(--muted)}
.kvp-vor-p i{font-style:normal;color:var(--muted)}
.kvp-vor-p b{font-weight:var(--fw-semibold);color:var(--ink)}
/* Standort ist Pflicht: solange leer, sichtbar offen statt stillschweigend
   vorbelegt — ein Preis für ein nie gewähltes Bundesland wäre gelogen. */
.kvp-vor-p.leer{border-color:rgba(201,132,31,.55);background:var(--amber-lt)}
.kvp-vor-p.leer b,.kvp-vor-p.leer svg{color:var(--amber)}
.kvp-vor-p.leer i{color:#8a5c14}
/* Aug 2026: Das JS berechnet left/top des Menues relativ zur Pillenleiste,
   die aber position:static hatte — absolut positioniert landete das Menue
   deshalb am naechsten positionierten Vorfahren (.calc-shell) und verdeckte
   die eigene Pille. Und fuer Bundeslaender setzt das JS die Klasse --raster,
   im CSS fehlte aber das display:grid: neun Eintraege untereinander sind
   337 px hoch bei max-height 320, deshalb war Burgenland abgeschnitten. */
.kvp-vor{position:relative}
.kvp-vor-m.kvp-vor-m--raster.on:not(.kvp-vor-m--blatt){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:282px;min-width:0;max-height:none;overflow:visible}
.kvp-vor-m.kvp-vor-m--raster.on:not(.kvp-vor-m--blatt) button{text-align:center;padding:9px 6px;white-space:nowrap}
.kvp-vor-m.kvp-vor-m--raster.on:not(.kvp-vor-m--blatt) .kvp-vor-m-h{grid-column:1 / -1;padding:2px 4px 6px}
.kvp-vor-m{position:absolute;z-index:40;background:var(--white);
  border:1px solid var(--border);border-radius:var(--r-2);padding:7px;
  box-shadow:0 14px 34px -14px rgba(28,43,58,.36);display:none;
  min-width:190px;max-height:320px;overflow-y:auto}
.kvp-vor-m.on{display:block}
.kvp-vor-m button{display:block;width:100%;text-align:left;border:none;background:none;
  font-family:inherit;font-size:12.5px;color:var(--body);padding:8px 11px;
  border-radius:7px;cursor:pointer;white-space:nowrap}
.kvp-vor-m button:hover{background:var(--bg)}
.kvp-vor-m button.on{background:var(--teal-lt);color:var(--teal-d);font-weight:var(--fw-semibold)}

/* ── Folgefragen: nur die Optionen, eine Frage nach der anderen ─────────── */
.kvp-fg-o button.on{border-color:var(--teal);background:var(--teal);color:#fff;
  font-weight:var(--fw-semibold)}

/* ── Ergebniskarte ─────────────────────────────────────────────────────── */
.kvp-erg-karte{background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-4);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(28,43,58,.03),0 18px 40px -22px rgba(28,43,58,.20)}

.kvp-erg-kopf{background:var(--ink);color:#fff;padding:20px 22px 22px;
  position:relative;overflow:hidden}
.kvp-erg-kopf::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 40% at 20% 0%,rgba(61,139,122,.16),transparent 70%),
             radial-gradient(ellipse 50% 50% at 95% 100%,rgba(46,64,87,.35),transparent 70%)}
.kvp-erg-kopf>*{position:relative;z-index:1}

.kvp-pk-l{font-size:9.5px;font-weight:var(--fw-bold);letter-spacing:.09em;
  text-transform:uppercase;color:#71C3AA;margin-bottom:7px}
.kvp-pk-range{font-size:44px;font-weight:var(--fw-semibold);line-height:1;
  letter-spacing:-.025em;color:#fff;font-variation-settings:"opsz" 44;
  font-variant-numeric:tabular-nums;transition:opacity 140ms}
.kvp-pk-range.is-updating{opacity:.55}
.kvp-pk-mid{font-size:12.5px;color:rgba(255,255,255,.62);margin-top:9px;line-height:1.5}
.kvp-pk-s{font-size:12.5px;color:rgba(255,255,255,.62);margin-top:3px;line-height:1.5}
.kvp-pk-sys{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.kvp-pk-v{display:inline-flex;align-items:center;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 11px;
  font-size:11.5px;font-weight:var(--fw-semibold);color:rgba(255,255,255,.92);
  white-space:nowrap}

.kvp-erg{padding:18px 22px 22px;display:flex;flex-direction:column;gap:19px;flex:1}

/* Genauigkeit — ersetzt die orange Spannen-Zeile im Navy-Kopf */
.kvp-sp-h{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;color:var(--muted);margin-bottom:7px}
.kvp-sp-h b{font-size:12.5px;font-weight:var(--fw-bold);color:var(--ink);
  font-variant-numeric:tabular-nums}
.kvp-sp-track{height:5px;border-radius:999px;background:var(--stone);position:relative;
  overflow:hidden}
.kvp-sp-fill{position:absolute;top:0;bottom:0;border-radius:999px;
  background:linear-gradient(to right,var(--teal),var(--teal-d));
  transition:left 320ms var(--kc-ease),right 320ms var(--kc-ease)}
.kvp-sp-note{font-size:11.5px;color:var(--muted);margin-top:8px;line-height:1.5}
.kvp-sp-note a{color:var(--teal-d);font-weight:var(--fw-semibold);
  text-decoration:underline;cursor:pointer}
.kvp-sp-note a:hover{color:var(--teal)}

/* Qualitätsstufe — kompakte Liste statt drei breiter Karten */
.kvp-qs{display:flex;flex-direction:column;gap:7px}
.kvp-qs .seg-card-wz{border-width:1px}
/* Farbbalken bleibt: er ordnet die Stufe zu, bevor man liest */
.kvp-qs .seg-card-wz::before{display:block;height:3px;opacity:.55}
.kvp-qs .seg-card-wz.on::before{height:4px;opacity:1}
.kvp-qs .seg-card-wz.on{transform:none;box-shadow:0 0 0 1.5px var(--sc-accent)}
.kvp-qs .seg-card-wz:hover{transform:none}
.kvp-qs .sc-body{padding:11px 13px}
.kvp-qs .sc-tag-row{margin-bottom:3px}
.kvp-qs .sc-headline{font-size:12.5px;margin-bottom:0;line-height:1.3}
/* Die gewählte Stufe zeigt ihre Merkmale, die anderen bleiben schlank —
   sonst steht dreimal dieselbe Textwand in einer schmalen Spalte. */
.kvp-qs .seg-card-wz:not(.on) .sc-features{display:none}
.kvp-qs .seg-card-wz.on .sc-features{margin-top:8px}
.kvp-qs .seg-card-wz .sc-seer{display:block;font-size:10.5px;margin-top:7px;padding-top:7px}
.kvp-qs .sc-price{font-size:11.5px}
.kvp-qs-l{font-size:9.5px;font-weight:var(--fw-bold);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}

/* Aufschlüsselung */
.kvp-auf-head{display:flex;align-items:center;gap:11px;padding:12px 14px;
  background:var(--bg);border-bottom:1px solid transparent;cursor:pointer;
  user-select:none;-webkit-user-select:none}
.kvp-auf-item{border:1px solid var(--border);border-radius:var(--r-3);overflow:hidden}
.kvp-auf-item.on .kvp-auf-head{border-bottom-color:var(--border);background:var(--white)}
.kvp-auf-t{flex:1;font-size:13.5px;font-weight:var(--fw-semibold);color:var(--ink)}
.kvp-auf-v{font-size:13.5px;font-weight:var(--fw-bold);color:var(--ink);
  font-variant-numeric:tabular-nums}
.kvp-auf-chev{width:14px;height:14px;flex:none;color:var(--muted);
  transition:transform 250ms var(--kc-ease)}
.kvp-auf-item.on .kvp-auf-chev{transform:rotate(180deg);color:var(--teal)}
.kvp-auf-ic{width:28px;height:28px;flex:none;border-radius:8px;background:var(--blue-lt);
  color:var(--blue);display:flex;align-items:center;justify-content:center}
.kvp-auf-ic svg{width:15px;height:15px}
.kvp-auf-body{display:none;padding:2px 14px 12px}
.kvp-auf-item.on .kvp-auf-body{display:block}
.kvp-auf-z{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 0;border-bottom:1px solid rgba(224,223,217,.55);font-size:12.5px;
  color:var(--body);line-height:1.4}
.kvp-auf-z:last-child{border-bottom:none}
.kvp-auf-z i{font-style:normal;color:var(--muted);font-size:11.5px}
.kvp-auf-z b{font-weight:var(--fw-semibold);color:var(--ink);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.kvp-auf-z.sum{color:var(--muted)}
.kvp-auf-z.sum b{font-weight:var(--fw-regular);color:var(--muted)}
.kvp-auf-z.tot{border-top:1.5px solid var(--ink);border-bottom:none;margin-top:4px;
  padding-top:11px;font-size:14px;font-weight:var(--fw-bold);color:var(--ink)}
.kvp-auf-z.tot b{font-size:15px}
.kvp-auf-n{font-size:11px;color:var(--muted);line-height:1.5;margin-top:11px}

/* CTA */
.kvp-cta-block{margin-top:auto;padding-top:3px}
.kvp-cta{width:100%;background:var(--ink);color:#fff;border:none;border-radius:var(--r-2);
  font-family:inherit;font-size:14.5px;font-weight:var(--fw-semibold);padding:14px 18px;
  cursor:pointer;transition:background 200ms,box-shadow 200ms,transform 100ms;
  box-shadow:0 10px 24px -10px rgba(28,43,58,.34)}
.kvp-cta:hover{background:var(--teal);box-shadow:0 12px 26px -10px rgba(61,139,122,.42)}
.kvp-cta:active{transform:translateY(1px)}
.kvp-cta-f{text-align:center;font-size:11.5px;color:var(--muted);margin-top:9px}
.kvp-cta-2{display:flex;gap:7px;margin-top:8px}
.kvp-cta-2 button{flex:1;border:1px solid var(--border);background:var(--white);
  border-radius:var(--r-2);font-family:inherit;font-size:12.5px;font-weight:var(--fw-semibold);
  color:var(--body);padding:9px;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;gap:6px;transition:border-color 150ms,color 150ms}
.kvp-cta-2 button:hover{border-color:var(--ink);color:var(--ink)}
.kvp-cta-2 svg{width:13px;height:13px;flex:none}

/* Leerzustand, solange kein Bundesland gewählt ist */
.kvp-leer{padding:56px 26px;text-align:center}
.kvp-leer-i{color:rgba(28,43,58,.15);margin:0 auto 14px}
.kvp-leer h3{font-size:17px;font-weight:var(--fw-semibold);color:var(--ink);
  margin:0 0 7px;letter-spacing:-.01em}
.kvp-leer p{font-size:13px;color:var(--muted);line-height:1.6;margin:0 auto;max-width:340px}

/* ── Detailsektion unter der Karte ───────────────────────────────────────
   Betriebskosten, Förderungen, Zehnjahresrechnung, Anlagenkonfiguration.
   Im Entwurf nicht vorgesehen; sie sind aber der Grund, warum die Seite
   "wirklich — nicht nur das Gerät" verspricht. */
/* .hero-in ist ein Flex-Container — mit margin:0 auto schrumpft das
   Element sonst auf Inhaltsbreite statt zu strecken. */
.kvp-mehr{width:100%;max-width:var(--max-w);margin:0 auto;padding:34px 0 0}
.kvp-mehr-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:15px}
.kvp-mehr-t{font-size:9.5px;font-weight:var(--fw-bold);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.kvp-mehr-t::before{content:"— ";color:var(--teal)}
.kvp-mehr-s{font-size:12.5px;color:var(--muted)}
.kvp-mehr-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
  align-items:start}
.kvp-mehr-g>.res-acc-item{margin:0}
@media (max-width:900px){.kvp-mehr-g{grid-template-columns:1fr}}
@media (max-width:1023px){.kvp-mehr{max-width:none;padding:26px 0 0}}

/* ── Sticky-Preisleiste (nur Handy) ─────────────────────────────────────── */
.kvp-bar{display:none}
@media (max-width:1023px){
  .kvp-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--white);
    border-top:1px solid var(--border);box-shadow:0 -6px 22px -10px rgba(28,43,58,.22);
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    display:flex;align-items:center;gap:12px;
    transform:translateY(110%);transition:transform 260ms var(--kc-ease)}
  .kvp-bar.on{transform:none}
  .kvp-bar-p{flex:1;min-width:0}
  .kvp-bar-l{font-size:9.5px;font-weight:var(--fw-bold);letter-spacing:.08em;
    text-transform:uppercase;color:var(--muted)}
  .kvp-bar-v{font-size:19px;font-weight:var(--fw-bold);color:var(--ink);line-height:1.15;
    font-variant-numeric:tabular-nums}
  .kvp-bar button{flex:none;background:var(--ink);color:#fff;border:none;
    border-radius:var(--r-2);font-family:inherit;font-size:13.5px;
    font-weight:var(--fw-semibold);padding:12px 17px;cursor:pointer}
  body.kvp-mobil{padding-bottom:78px}
}
@media (prefers-reduced-motion:reduce){.kvp-bar{transition:none}}

/* ── Handy ──────────────────────────────────────────────────────────────
   Der Plan darf nicht in eine 390px-Spalte gequetscht werden: er läuft
   randlos über die volle Breite und scrollt waagrecht, wenn die Stufe
   breiter wird als der Schirm. */
@media (max-width:1023px){
  .kvp-vor{padding:12px 14px 0}
  .kvp-erg-karte{border-radius:0;border-left:none;border-right:none}
  .kvp-pk-range{font-size:38px}
}
@media (max-width:760px){
  /* Die Vor-Pillen waren rund 30px hoch — unter dem Richtwert von 44px
     fuer Touch-Ziele. Wer daneben tippt, haelt die Pille fuer kaputt.
     Gleiches gilt fuer die Chips der Folgefragen (Kuehlen/Heizen). */
  .kvp-vor{gap:8px}
  .kvp-vor-p{font-size:12.5px;padding:0 13px 0 11px;min-height:42px;
    display:inline-flex;align-items:center}
  .chip{min-height:42px;padding:0 14px;display:inline-flex;align-items:center}
  .glas-chip{min-height:36px;padding:0 12px;display:inline-flex;align-items:center}
  .room-icon-btn{width:40px;height:40px}
  .kvp-vor-m{left:14px!important;right:14px;width:auto;min-width:0}

  /* Kein waagrechtes Schieben mehr: der Plan passt in die Breite, seit die
     Beschriftungen auf Kurzformen stehen und die Bemassung aus ist. Die
     erzwungenen 520px liessen ihn aus dem Bild ragen und aus der Mitte
     rutschen — beides ohne Not. */

  /* Die Schattenkante zeigte an, dass seitlich etwas liegt — tut es nicht mehr. */

  .kvp-qs .sc-body{padding:12px 14px}
  .kvp-erg{padding:16px 14px 20px;gap:17px}
  .kvp-erg-kopf{padding:17px 16px 19px}
  .kvp-cta{padding:15px 18px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  
  .kvp-sp-fill{transition:none}
}

/* ── Was der Grundriss ersetzt ───────────────────────────────────────────
   Die Elemente bleiben im DOM, weil sie den Zustand tragen bzw. Render-Ziel
   sind (renderRooms, renderResult). Sichtbar sind sie nicht mehr. */
.kvp-weg{display:none!important}
/* Der Schritt "Räume" hat keine eigene Kopfzeile mehr — der Plan bringt seine mit */
.input-step.kvp-blank{padding-top:0;border-bottom:none}

/* Folgefragen: Kopfzeile mit erledigten Antworten */
.kvp-fg-erl{display:inline-flex;align-items:center;gap:5px;background:var(--teal-lt);
  border:1px solid var(--teal-lt2);border-radius:999px;padding:4px 10px;font-size:11.5px;
  color:var(--teal-d);cursor:pointer;font-family:inherit}
.kvp-fg-erl:hover{background:var(--teal-lt2)}
.kvp-fg-erl b{font-weight:var(--fw-semibold)}
.kvp-fg-erl svg{width:11px;height:11px;flex:none}

/* Qualitätsstufen in der schmalen Ergebnisspalte untereinander.
   #segCards trägt eine ID-Regel mit drei Spalten — die muss hier fallen. */
#segCards.seg-compare,.kvp-qs .seg-compare{grid-template-columns:1fr!important;gap:7px}
.kvp-qs .seg-hint{margin-top:0}

/* Preisleiste tritt zurück, solange das Raum-Blatt offen ist */
.kvp-bar.kvp-bar-weg,.kvp-bar.kvp-bar-doppelt{transform:translateY(110%)}

/* Die Kante muss zur Bühnenfarbe passen, sonst ist der Hinweis unsichtbar */

/* Das SVG hat overflow:visible und ragt mit .fp-paper über seinen Rahmen
   hinaus — ohne eigene Ebene liegt es auf den Pillen und schluckt die Klicks. */
.pill-leiste{position:relative;z-index:5}
.pl-menu{z-index:30}

/* ═══ Höhenkur: Leisten schweben auf dem Papier statt eigene Zeilen zu
   belegen, der Plan bleibt an die Fensterhöhe gekoppelt ══════════════════ */

/* Eine Leiste für Vorfragen und Plan-Pillen, absolut über der Papierfläche.
   Beide Gruppen bleiben position:relative — ihre Aufklappmenüs richten sich
   an ihnen aus, nicht an der Leiste. */

/* Pillen liegen auf dem Papier: etwas mehr Deckkraft, damit sie lesbar bleiben */

/* Die Bühne braucht oben nur noch Platz für die schwebende Leiste */

/* Der Plan darf nicht höher werden als das Fenster hergibt — sonst steht
   der halbe Rechner unter der Falte. Untergrenze, damit er lesbar bleibt. */
#kvpScroll .plan svg.fp{max-height:clamp(300px,calc(100vh - 430px),620px);
  width:100%;height:auto}
@media (min-width:1024px){
  .pl-h{padding:9px 20px}
  .anl{font-size:14px}
  .anl small{margin-top:1px}
}

/* Folgefrage: Begründung hängt an der Frage statt eine eigene Zeile zu
   belegen; Optionen rücken daneben, wenn die Breite reicht. */
.kvp-fg{padding:12px 20px 14px}
.kvp-fg-karte{align-items:center;padding:11px 14px}
.kvp-fg-q .kvp-fg-w{display:block;font-size:12px;font-weight:var(--fw-regular);
  color:var(--muted);line-height:1.4;margin:3px 0 0}
.kvp-fg-txt{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.kvp-fg-txt>.kvp-fg-q{flex:1 1 240px;min-width:0}
.kvp-fg-txt>.kvp-fg-o{flex:0 0 auto}
.kvp-fg-kopf{margin-bottom:9px;min-height:0}
.kvp-fg-fertig{padding:11px 14px}
@media (max-width:760px){
  .kvp-fg-txt{flex-direction:column;align-items:stretch;gap:9px}
  /* In der Spalte ist flex-basis die HÖHE — die 240px von oben würden den
     Fragetext auf 240px aufblasen. */
  .kvp-fg-txt>.kvp-fg-q,.kvp-fg-txt>.kvp-fg-o{flex:0 0 auto}
}

.kvp-erg{gap:16px;padding:16px 20px 20px}

/* Flache Fenster (13"-Notebooks): der Rechner soll nach einem Scroll
   vollständig im Bild stehen. Gekürzt wird an Polstern und Schriftgrößen,
   nicht an Inhalten — nur der Zweitknopf weicht, den es im Ergebnis-Footer
   unten ohnehin noch einmal gibt. */
@media (min-width:1024px) and (max-height:900px){
  .kvp-erg-kopf{padding:15px 18px 16px}
  .kvp-pk-range{font-size:36px}
  .kvp-pk-mid,.kvp-pk-s{font-size:12px;margin-top:5px}
  .kvp-pk-sys{margin-top:9px}
  .kvp-erg{gap:12px;padding:13px 18px 16px}
  .kvp-auf-head{padding:10px 13px}
  .kvp-cta{padding:12px 18px}
  .kvp-cta-2{display:none}
  .kvp-cta-f{margin-top:7px}
  .kvp-fg{padding:10px 20px 12px}
  .kvp-fg-karte{padding:9px 13px}
}

/* Handy: kein Platz zum Schweben — die Leiste steht wieder im Fluss und
   scrollt waagrecht, statt den halben Grundriss zu verdecken. */

/* Auf dem Handy steht der Fragetext über den Optionen — bei zentrierter
   Ausrichtung rutscht das Symbol dadurch an den unteren Rand. */
@media (max-width:760px){
  .kvp-fg-karte{align-items:flex-start}
  .kvp-fg-q .kvp-fg-w{margin-top:4px}
}

/* Das SVG ragt mit overflow:visible über seinen Rahmen hinaus und legt sich
   sonst über Kopfzeile und Leiste — beide Bedienzeilen bekommen eine eigene
   Ebene, der Plan bleibt darunter. */
.pl-h{position:relative;z-index:7;background:var(--white)}
#kvpScroll{position:relative;z-index:1}

/* ═══ Qualitätsstufe: die eigentliche Entscheidung, entsprechend präsent ══ */
.kvp-qs-h{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:9px}
.kvp-qs-t{font-size:14px;font-weight:var(--fw-bold);color:var(--ink);
  letter-spacing:-.01em}
.kvp-qs-s{font-size:11.5px;color:var(--muted)}
.kvp-qs .seg-card-wz{border-width:1.5px}
.kvp-qs .seg-card-wz.on{box-shadow:0 0 0 2px var(--sc-accent),
  0 8px 20px -10px rgba(28,43,58,.22)}
.kvp-qs .sc-body{padding:12px 14px}
.kvp-qs .sc-headline{font-size:13px;line-height:1.3}
.kvp-qs .sc-feat{font-size:11.5px;padding:2px 0;line-height:1.4}
.kvp-qs .sc-tag{font-size:10.5px}
/* Preisunterschied zur gewählten Stufe — der Grund, warum man vergleicht */
.kvp-qs .sc-price{font-size:12px;font-weight:var(--fw-bold)}
.kvp-qs .seg-hint{margin-top:10px}

/* ═══ Die Ergebnisspalte darf länger sein als der Plan ═══════════════════
   Vorher waren beide Spalten aneinandergekettet: jede Zeile mehr im
   Ergebnis blähte die Plan-Bühne mit auf. Getrennt bleibt der Grundriss
   kompakt im Blick, während das Ergebnis daneben so lang wird, wie es
   braucht. */
@media (min-width:1024px){
  .calc-shell{align-items:start!important}
  .calc-col-input>.calc-card{height:auto!important}
  .calc-col-input .input-step[data-step="3"],
  #kvPlanHost{flex:none!important}
  #kvPlanHost .band{flex:none!important}
  #kvPlanHost #kvpScroll{flex:none!important}
  .calc-col-result .rx-card{height:auto!important}
}

/* Aufschlüsselung ist Teil der Übersicht, nicht ein Aufklapper */
.kvp-auf-item.on .kvp-auf-head{cursor:default}

/* ═══ Detailbereich als Reiter ══════════════════════════════════════════
   Vier lose Karten nebeneinander hatten keine gemeinsame Klammer und
   haben die Seite verdoppelt. Als Reiter ist immer genau ein Thema offen,
   und der Kennwert steht schon am Reiter — man sieht, was drin ist, bevor
   man klickt. */
.kvp-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);
  overflow-x:auto;scrollbar-width:none}
.kvp-tabs::-webkit-scrollbar{display:none}
.kvp-tab{flex:1 1 0;min-width:150px;background:none;border:none;
  border-bottom:2px solid transparent;font-family:inherit;cursor:pointer;
  padding:11px 16px 12px;text-align:left;display:flex;flex-direction:column;
  gap:3px;transition:border-color 160ms,background 160ms;margin-bottom:-1px}
.kvp-tab:hover{background:rgba(61,139,122,.045)}
.kvp-tab-t{font-size:13px;font-weight:var(--fw-semibold);color:var(--muted);
  letter-spacing:var(--tr-base);white-space:nowrap}
.kvp-tab-v{font-size:15px;font-weight:var(--fw-bold);color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.2;min-height:18px}
.kvp-tab.on{border-bottom-color:var(--teal);background:transparent}
.kvp-tab.on .kvp-tab-t{color:var(--teal-d)}
.kvp-tab:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}

.kvp-panels{background:var(--white);border:1px solid var(--border);border-top:none;
  border-radius:0 0 var(--r-3) var(--r-3);padding:18px 20px 20px}
.kvp-panel[hidden]{display:none}
.kvp-panel-s{font-size:11.5px;color:var(--muted);margin-bottom:13px;
  padding-bottom:11px;border-bottom:1px solid rgba(224,223,217,.6)}
/* Die Blöcke kamen aus Karten mit eigenem Rahmen — im Reiter tragen sie ihn
   nicht mehr, sonst Rahmen im Rahmen. */
.kvp-panel .crows{font-size:13px}
.kvp-panel>.notice:first-of-type{margin-top:0}

@media (max-width:760px){
  .kvp-tab{flex:0 0 auto;min-width:0;padding:10px 14px 11px}
  .kvp-tab-v{font-size:14px}
  .kvp-panels{border-left:none;border-right:none;border-radius:0;
    padding:15px 14px 18px}
  .kvp-mehr-h{padding:0 14px}
  .kvp-tabs{padding:0 14px}
}

/* ═══ Fehlender Standort: nicht zu übersehen ════════════════════════════
   Ohne Bundesland rechnet die Seite nicht — das war als amberfarbene Pille
   zu leise. Jetzt rot, mit ruhigem Puls, und das Auswahlmenü geht beim
   Laden von selbst auf. */
.kvp-vor-p.leer{border-color:var(--red,#B91C1C);background:#FDF2F2;
  color:var(--red,#B91C1C);box-shadow:0 0 0 0 rgba(185,28,28,.34)}
.kvp-vor-p.leer b,.kvp-vor-p.leer i,.kvp-vor-p.leer svg{color:var(--red,#B91C1C)}
.kvp-vor-p.leer b{font-weight:var(--fw-bold)}
.kvp-vor-p.leer:hover{border-color:var(--red,#B91C1C);background:#FBE9E9}
@media (prefers-reduced-motion:no-preference){
  .kvp-vor-p.leer{animation:kvpFehlt 2.4s var(--kc-ease) infinite}
}
@keyframes kvpFehlt{
  0%{box-shadow:0 0 0 0 rgba(185,28,28,.30)}
  60%,100%{box-shadow:0 0 0 9px rgba(185,28,28,0)}
}
/* Das Menü zeigt beim Aufpoppen, worum es geht */
.kvp-vor-m-h{font-size:10px;font-weight:var(--fw-bold);letter-spacing:.08em;
  text-transform:uppercase;color:var(--red,#B91C1C);padding:5px 11px 7px;
  border-bottom:1px solid var(--border);margin-bottom:5px}

/* ═══ Detailbereich: dichter und wertiger ═══════════════════════════════
   Vorher stand dieselbe Sache dreimal übereinander — Reitername,
   Einleitungssatz und Zwischenüberschrift. Der Reiter genügt. */
.kvp-panel .cfg-section-title{display:none}
.kvp-panel .cfg-section{margin-top:0}

/* Reiterleiste als eigene Fläche, nicht als schwebende Textzeile */
.kvp-tabs{background:var(--white);border:1px solid var(--border);
  border-bottom:none;border-radius:var(--r-3) var(--r-3) 0 0;
  padding:0;gap:0;overflow:hidden}
.kvp-tab{border-radius:0;padding:13px 18px 14px;position:relative;
  border-bottom:none;margin-bottom:0}
.kvp-tab+.kvp-tab{border-left:1px solid var(--border)}
.kvp-tab.on{background:var(--bg)}
/* Aktiver Reiter trägt oben einen Balken statt einer Unterstreichung —
   so gehört er sichtbar zur Fläche darunter. */
.kvp-tab::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--teal);transform:scaleX(0);transition:transform 220ms var(--kc-ease)}
.kvp-tab.on::after{transform:scaleX(1)}
.kvp-tab-t{font-size:11px;font-weight:var(--fw-bold);letter-spacing:.07em;
  text-transform:uppercase}
.kvp-tab-v{font-size:17px;letter-spacing:-.01em}
.kvp-panels{background:var(--bg);border-color:var(--border);padding:20px 22px 22px}

/* Kacheln im Panel auf hellem Grund wieder weiß absetzen */
.kvp-panel .cfg-comp,.kvp-panel .kw-room{background:var(--white)}
.kvp-panel .crows{background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-2);padding:14px 16px}
.kvp-panel .notice{background:var(--white);border-left-color:var(--teal)}
.kvp-panel .cfg-comp-grid{gap:10px}
@media (max-width:760px){
  .kvp-tabs{border-left:none;border-right:none;border-radius:0;padding:0}
  .kvp-tab{padding:11px 15px 12px}
  .kvp-panels{padding:16px 14px 18px}
}

/* Zusätzlich die Stufennamen einfärben — die Zuordnung soll auch ohne
   Auswahl erkennbar sein, nicht erst an der aktiven Karte. */
.kvp-qs .seg-card-wz .sc-tag{color:var(--sc-accent);opacity:.9}
.kvp-qs .seg-card-wz.on .sc-tag{opacity:1}

/* ═══ Raumzahl: die erste Entscheidung, entsprechend platziert ═══════════
   Vorher sass sie als kleine Zifferngruppe rechts in der Kopfzeile und ging
   neben dem Anlagennamen unter. Jetzt eine eigene Zeile ganz oben, mit der
   Frage ausgeschrieben und Schaltflaechen, die man sieht. */

/* Kopfzeile trägt jetzt nur noch den Anlagennamen */
.pl-h{justify-content:flex-start}

/* Hinweis, wenn das Anfragelimit greift — vorher fror die Zahl kommentarlos ein */
.kvp-rl{background:var(--amber-lt);border:1px solid rgba(201,132,31,.35);
  border-radius:var(--r-2);padding:10px 13px;font-size:12.5px;line-height:1.5;
  color:#7a4e0e}
.kvp-rl[hidden]{display:none}

/* ═══ Zwei Zonen statt einer Kante ══════════════════════════════════════
   Der Rechner ist ein Werkzeug und darf die Breite nutzen. Alles darunter
   ist Lesestrecke und steht mittig. Wichtig ist nur, dass die Trennung
   sauber durchgezogen wird — halb zentriert war der Fleckenteppich. */
@media (min-width:1024px){
  /* Zone 1: das Werkzeug. Bis 1600px steht es auf derselben Kante wie der
     Text (--max-w) — darunter waere der Ausbruch zu klein, um als Absicht
     gelesen zu werden. Die Ausbruchregel steht weiter unten. */
  .hero-in{max-width:var(--max-w)}

  /* Zone 2: Lesestrecke. Der Container steht auf derselben Kante wie auf
     index (--max-w); die Lesebreite regeln die Innenbegrenzungen darunter
     (section-hdr 62ch, bento 820, at-map-wrap 900). */
  .seo-sec .seo-in,
  .at-map-sec .at-map-in{max-width:var(--max-w);margin-left:auto;margin-right:auto}
  section.at-map-sec .section-hdr,
  section.seo-sec .section-hdr,
  section.faq-sec .faq-in .section-hdr{text-align:center;margin-left:auto;
    margin-right:auto;max-width:62ch}
  section.at-map-sec .section-hdr .lead,
  section.seo-sec .section-hdr .lead,
  section.faq-sec .faq-in .section-hdr .lead{margin-left:auto;margin-right:auto;
    max-width:58ch}
  .at-map-wrap{margin-left:auto;margin-right:auto;max-width:900px}
  section.faq-sec .bento{margin-left:auto;margin-right:auto}
  /* Der Übergang zwischen den Zonen braucht eine sichtbare Naht — die
     Trennlinie der SEO-Sektion gibt es schon, die Karte bekommt eine. */
  .at-map-sec{border-top:1px solid var(--border)}
}

/* ═══ Weiterrechnen: die drei Werkzeuge gleichwertig ════════════════════
   Vorher zwei Textlinks in einer Fußzeile, Schallcheck fehlte ganz. */
.kvp-tools{border-top:1px solid var(--border);background:rgba(245,245,243,.5);
  padding:var(--s-6) var(--s-6) var(--s-7)}
.kvp-tools-l{font-size:9.5px;font-weight:var(--fw-bold);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s-4)}
.kvp-tools-l::before{content:"— ";color:var(--teal)}
.kvp-tools-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
@media (max-width:860px){.kvp-tools-g{grid-template-columns:1fr}}
.kvp-tool{display:flex;flex-direction:column;gap:5px;background:var(--white);
  border:1px solid var(--border);border-radius:var(--r-3);padding:15px 17px 16px;
  transition:border-color 160ms,transform 200ms var(--kc-ease),box-shadow 200ms}
.kvp-tool:hover{border-color:var(--teal);transform:translateY(-2px);
  box-shadow:0 10px 24px -14px rgba(28,43,58,.28)}
.kvp-tool-i{width:30px;height:30px;border-radius:9px;background:var(--teal-lt);
  color:var(--teal-d);display:flex;align-items:center;justify-content:center;
  margin-bottom:4px}
.kvp-tool-i svg{width:16px;height:16px}
.kvp-tool-t{font-size:14px;font-weight:var(--fw-semibold);color:var(--ink)}
.kvp-tool:hover .kvp-tool-t{color:var(--teal-d)}
.kvp-tool-s{font-size:12px;color:var(--muted);line-height:1.5}

/* Merkmale der Qualitätsstufe zweispaltig — vier Zeilen untereinander
   machten die Karte unnötig hoch, die Texte sind kurz genug für 2×2. */
.kvp-qs .sc-features{display:grid;grid-template-columns:1fr 1fr;
  column-gap:14px;row-gap:0}
.kvp-qs .sc-feat{padding:2px 0}
@media (max-width:420px){
  .kvp-qs .sc-features{grid-template-columns:1fr}
}

/* ═══ Behoerdengebuehr zuschalten ═══════════════════════════════════════
   Die Gebuehr steht in der Aufschluesselung, nicht im grossen Betrag oben:
   sie geht nicht an den Fachbetrieb, traegt keine MwSt und faellt je nach
   Bundesland gar nicht an. Wer sie in der Summe haben will, tippt die
   Zeile an — dann waechst der Gesamtpreis darunter mit. */
.kv-behrow{cursor:pointer;-webkit-user-select:none;user-select:none;
  border-radius:8px;margin-left:-6px;margin-right:-6px;padding:4px 6px;
  transition:background 160ms ease}
.kv-behrow:hover{background:rgba(28,43,58,.04)}
.kv-behrow:focus-visible{outline:2px solid var(--teal,#3D8B7A);outline-offset:2px}
.kv-behbox{display:inline-block;width:13px;height:13px;border-radius:3px;
  border:1.5px solid currentColor;opacity:.55;margin-right:7px;
  vertical-align:-2px;position:relative;transition:opacity 160ms ease}
.kv-behrow.is-an .kv-behbox{opacity:1;background:currentColor}
.kv-behrow.is-an .kv-behbox::after{content:'';position:absolute;
  left:3.5px;top:.5px;width:3px;height:7px;border:solid var(--white,#fff);
  border-width:0 2px 2px 0;transform:rotate(42deg)}
.kv-behhint{font-style:normal;opacity:.75}

/* ═══ Bundeslandwahl auf dem Handy ══════════════════════════════════════
   Die Pill-Leiste scrollt waagrecht (overflow-x:auto) und clippt damit
   jedes absolut positionierte Kind — das Auswahlmenü war 0×0 groß und die
   Wahl unbedienbar. Auf dem Handy hängt es am body und öffnet als Blatt. */
/* ═══ Plan auf schmalen Geräten ════════════════════════════════════════
   Diese Regeln standen bisher nur in css/kv-kostenrechner.css. Weil der
   Rechner sie nicht hatte, war sein Plan auf 350 px unlesbar — deshalb
   zwang man ihn dort auf 520 px Mindestbreite und liess ihn waagrecht
   scrollen. Mit Kurzformen, groesserer Schrift und kraeftigeren Strichen
   passt er in die Breite und muss nicht mehr geschoben werden. */
@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 (max-width:760px){
  .kvp-vor-m--blatt{position:fixed;left:0!important;right:0;bottom:0;top:auto;
    width:auto;min-width:0;max-width:none;
    /* 72vh nahmen fast den ganzen Bildschirm ein. Mit kompakteren Zeilen
       passen die neun Bundeslaender in gut die Haelfte; laenger wird die
       Liste nie, und scrollen kann sie seit overflow-y ohnehin. */
    max-height:56vh;
    /* max-height ohne Scroll schnitt die unteren Bundeslaender auf
       kleinen Geraeten und bei grosser Systemschrift einfach ab. */
    overflow-y:auto;overscroll-behavior:contain;
    border-radius:16px 16px 0 0;border-left:none;border-right:none;
    border-bottom:none;padding:14px 14px calc(18px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -14px 40px -12px rgba(28,43,58,.34);z-index:130;
    transform:translateY(100%);transition:transform 220ms var(--kc-ease);
    display:block;visibility:hidden}
  .kvp-vor-m--blatt.on{transform:none;visibility:visible}
  .kvp-vor-m--blatt::before{content:'';display:block;width:38px;height:4px;
    border-radius:99px;background:var(--border);margin:0 auto 12px;grid-column:1 / -1}
  .kvp-vor-m--blatt button{padding:10px 14px;font-size:14.5px;border-radius:9px;
    min-height:44px;display:flex;align-items:center}
  /* Landeswahl als Raster: neun Felder auf einen Blick statt einer Liste,
     die scrollen muss. Kurzformen, weil "Niederoesterreich" in einer
     Rasterzelle ohnehin umbrechen wuerde. */
  .kvp-vor-m--blatt.kvp-vor-m--raster{display:grid;grid-template-columns:repeat(3,1fr);
    gap:8px;max-height:none}
  .kvp-vor-m--raster .kvp-vor-m-h{grid-column:1 / -1;padding:0 2px 4px}
  .kvp-vor-m--raster button{justify-content:center;text-align:center;
    min-height:52px;padding:8px 6px;border:1px solid var(--border);
    background:var(--white);font-size:14px}
  .kvp-vor-m--raster button b{font-weight:var(--fw-semibold,600)}
  .kvp-vor-m--raster button.on{border-color:var(--teal,#3D8B7A);
    background:var(--teal-lt,rgba(61,139,122,.08));color:var(--teal-d,#2D6B5C)}
  .kvp-vor-m--blatt .kvp-vor-m-h{font-size:11px;padding:0 14px 10px}
}
@media (prefers-reduced-motion:reduce){.kvp-vor-m--blatt{transition:none}}

/* Städteliste unter der Karte — auf dem Handy sind 13 Punkte auf 350px
   Breite weder lesbar noch treffsicher; die Liste ist der bedienbare Weg
   und hilft zusätzlich der internen Verlinkung. */
.kvp-staedte{margin-top:var(--s-5);text-align:center}
.kvp-staedte-l{font-size:9.5px;font-weight:var(--fw-bold);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s-3)}
.kvp-staedte-g{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.kvp-stadt{display:inline-flex;align-items:center;background:var(--white);
  border:1px solid var(--border);border-radius:999px;padding:7px 14px;
  font-size:12.5px;font-weight:var(--fw-semibold);color:var(--body);
  text-decoration:none;transition:border-color 150ms,color 150ms,transform 150ms}
.kvp-stadt:hover{border-color:var(--teal);color:var(--teal-d);transform:translateY(-1px)}

@media (max-width:760px){
  /* Ruhe-Beschriftung weg: sie überlappte sich acht Mal. Der Name erscheint
     beim Antippen, die Liste darunter trägt die Navigation. */
  section.at-map-sec .at-ping-lbl{opacity:0;pointer-events:none}
  section.at-map-sec .at-ping-lbl.is-hov,
  section.at-map-sec .at-ping-lbl.is-active{opacity:1;pointer-events:auto}
  section.at-map-sec .at-ping-lbl.is-demo{opacity:0}
  .kvp-staedte-g{gap:6px}
  .kvp-stadt{padding:8px 13px;font-size:12px}
}

/* ══ Ausbruch der Werkzeugzone (Aug 2026) ═════════════════════════════════
   Erst ab 1600px lohnt die Extrabreite: dort sind es ~180px mehr als die
   Textkante, das liest sich als Gestaltung. Darunter bleibt alles buendig. */
@media (min-width:1600px){
  .hero-in{max-width:min(1780px,94vw)}
  .kvp-mehr{max-width:min(1780px,94vw)}
}

/* ══ DETAILRECHNUNG als eigene Sektion (Aug 2026) ══════════════════════════
   Frueher hing .kvp-mehr in .hero-in. Die vier Bloecke standen hinter
   Reitern — von 1320px Breite blieben ~600px leer, weil pro Reiter nur eine
   einspaltige Liste sichtbar war. Jetzt: alle vier offen im Raster, die
   Reiterleiste bleibt und springt statt umzuschalten. */
.detail-sec{padding:var(--section-py) var(--section-px);position:relative;z-index:2;
  border-top:1px solid var(--border)}
.detail-in{max-width:var(--max-w);margin:0 auto}
.detail-sec .section-hdr{max-width:62ch;margin-left:auto;margin-right:auto;
  text-align:center}
.detail-sec .section-hdr .lead{margin-left:auto;margin-right:auto;max-width:58ch}

/* Container traegt keine Optik mehr — die Bloecke sind die Karten. */
.kvp-mehr{width:100%;max-width:none;margin:0;padding:0}

/* Reiterleiste: bleibt beim Scrollen stehen und zeigt weiter die Werte. */
.kvp-tabs{position:sticky;top:calc(var(--nav-h) + 6px);z-index:20;
  background:rgba(245,245,243,.92);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--border);border-radius:var(--r-3);
  padding:0;margin-bottom:var(--s-6);overflow:hidden}
.kvp-tab{border-bottom:none;border-right:1px solid var(--border);
  padding:12px 18px 13px;position:relative}
.kvp-tab:last-child{border-right:none}
.kvp-tab::after{content:'';position:absolute;left:14px;right:14px;bottom:0;height:2px;
  background:var(--teal);border-radius:2px 2px 0 0;opacity:0;
  transition:opacity var(--dur-fast) var(--ease-smooth)}
.kvp-tab.on::after{opacity:1}
.kvp-tab.on{background:rgba(61,139,122,.055)}

/* Vier offene Bloecke statt eines sichtbaren Panels. */
.kvp-panels{background:transparent;border:none;border-radius:0;padding:0;
  display:grid;gap:var(--s-4)}
.kvp-panel{display:block;background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-3);padding:var(--s-6);
  scroll-margin-top:calc(var(--nav-h) + 92px)}
.kvp-panel[hidden]{display:block}
.kvp-panel-h{margin-bottom:var(--s-4);padding-bottom:var(--s-3);
  border-bottom:1px solid rgba(224,223,217,.7)}
.kvp-panel-t{font-size:var(--fs-xl);font-weight:var(--fw-semibold);color:var(--ink);
  letter-spacing:var(--tr-snug);margin:0 0 3px}
.kvp-panel-s{font-size:12.5px;color:var(--muted);margin:0;padding:0;border:none;
  line-height:1.5}

@media (min-width:1024px){
  /* Drei kurze Bloecke nebeneinander, die Zehnjahresrechnung darunter ueber
     die volle Breite — sie ist rund dreimal so hoch wie die anderen und
     enthaelt selbst mehrspaltige Vergleiche, die die Breite brauchen.
     Die Reihenfolge macht CSS (order), das DOM bleibt unangetastet. */
  /* Anlage traegt jetzt die volle Kostenaufschluesselung, die Zehnjahres-
     rechnung mehrspaltige Vergleiche — beide brauchen die ganze Breite.
     Betrieb und Behoerde sind kurz und stehen nebeneinander dazwischen. */
  .kvp-panels{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5);
    align-items:start}
  .kvp-panel{padding:var(--s-7)}
  #kvpPanel-anlage{order:1;grid-column:1 / -1}
  #kvpPanel-betrieb{order:2}
  #kvpPanel-foerd{order:3}
  #kvpPanel-tco{order:4;grid-column:1 / -1}
  /* Die Aufschluesselung im Anlage-Block nutzt die Breite: Positionen links,
     Hinweise rechts. */
  #kvpPanel-anlage #gesamtCell{display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    gap:var(--s-5) var(--s-7);align-items:start}
  #kvpPanel-anlage #gesamtCell>.crows{grid-row:span 2}
  #kvpPanel-anlage #gesamtCell>.notice{margin-top:0}
}

/* ── Aufschluesselung in der Ergebniskarte: auf Desktop ein Verweis ───────
   Der Punkt behaelt Titel und Summe, klappt aber nicht mehr auf — die
   vollstaendige Rechnung steht unten in der eigenen Sektion. */
/* Aug 2026: gilt jetzt auf allen Breiten, nicht mehr erst ab 1024. */
@media (min-width:0px){
  .kvp-auf-item.is-verweis .kvp-auf-body{display:none !important}
  .kvp-auf-item.is-verweis .kvp-auf-head{cursor:pointer}
  .kvp-auf-item.is-verweis .kvp-auf-chev{transform:rotate(-90deg)}
  .kvp-auf-item.is-verweis:hover .kvp-auf-head{background:rgba(61,139,122,.05)}
  .kvp-auf-item.is-verweis:hover .kvp-auf-chev{color:var(--teal)}
  .kvp-auf-item.is-verweis .kvp-auf-t::after{content:'volle Rechnung unten';display:block;white-space:nowrap;
    font-weight:var(--fw-regular);color:var(--muted);font-size:11.5px;line-height:1.3;margin-top:1px}
}

/* Weiterrechnen-Kacheln wie auf index. */
.tool-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);
  margin-top:var(--s-10)}
.tool-chip{display:flex;flex-direction:column;gap:4px;background:var(--white);
  border:1px solid var(--border);border-radius:var(--r-3);padding:var(--s-4) var(--s-5);
  text-decoration:none;transition:all var(--dur-base) var(--ease-smooth)}
.tool-chip:hover{border-color:var(--teal);transform:translateY(-2px);
  box-shadow:0 12px 26px -14px rgba(28,43,58,.28)}
.tool-chip-t{font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--ink)}
.tool-chip:hover .tool-chip-t{color:var(--teal)}
.tool-chip-s{font-size:var(--fs-xs);color:var(--muted);line-height:1.45}
.tool-chip--all{background:var(--teal-lt);border-color:var(--teal-lt2)}
.tool-chip--all .tool-chip-t{color:var(--teal-d)}
@media (max-width:1100px){.tool-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.tool-row{grid-template-columns:1fr;gap:var(--s-3)}
  .kvp-tabs{position:static;backdrop-filter:none;-webkit-backdrop-filter:none}}

.kvp-auf-trenn{height:1px;background:rgba(224,223,217,.8);margin:var(--s-6) 0 var(--s-5)}

/* ── Reiterleiste: kompakte Schaltergruppe statt Tabellenzeile ───────────
   Die Variante mit vollflaechigen Zellen und Trennstrichen las sich wie
   eine Tabelle, nicht wie eine Auswahl. Jetzt: eine ruhige Leiste, in der
   nur der aktive Reiter Flaeche bekommt. */
.kvp-tabs{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;
  position:sticky;top:calc(var(--nav-h) + 6px);z-index:20;
  background:rgba(245,245,243,.9);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--border);border-radius:var(--r-full);
  padding:5px;margin:0 auto var(--s-8);width:max-content;max-width:100%;
  overflow-x:auto;scrollbar-width:none}
.kvp-tab{flex:0 0 auto;min-width:0;border:none;border-radius:var(--r-full);
  padding:8px 16px;display:flex;flex-direction:row;align-items:baseline;gap:7px;
  background:transparent;transition:background var(--dur-fast) var(--ease-smooth),
  color var(--dur-fast) var(--ease-smooth)}
.kvp-tab::after{display:none}
.kvp-tab-t{font-size:13px;font-weight:var(--fw-semibold);color:var(--muted)}
.kvp-tab-v{font-size:13px;font-weight:var(--fw-bold);color:var(--ink);
  min-height:0;line-height:1.3}
.kvp-tab:hover{background:rgba(28,43,58,.05)}
.kvp-tab.on{background:var(--ink)}
.kvp-tab.on .kvp-tab-t{color:rgba(255,255,255,.72)}
.kvp-tab.on .kvp-tab-v{color:#fff}
@media (max-width:760px){
  .kvp-tabs{width:auto;justify-content:flex-start;border-radius:var(--r-3)}
  .kvp-tab{padding:8px 13px}
  .kvp-tab-t,.kvp-tab-v{font-size:12px}
}

/* ── Werkzeug-Sektion 1:1 von index (.tk-sec) ────────────────────────────
   Klassen und Markup unveraendert uebernommen; .section/.section-in und
   .section.highlight gab es auf dieser Seite noch nicht. */
.section.highlight{background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-5);margin:var(--s-8) var(--s-5);
  box-shadow:0 22px 44px -18px rgba(28,43,58,.12)}
@media (max-width:640px){
  .section.highlight{margin-left:var(--s-3);margin-right:var(--s-3);
    border-radius:var(--r-4)}
}
.tkMerc{transform-box:fill-box;transform-origin:50% 100%;
  transform:scaleY(calc(1 - .74 * var(--p,0)))}
.tkKalt{opacity:var(--p,0)}
.tkTick{opacity:calc(.42 - .2 * var(--p,0))}
.tkBar{transform-box:fill-box;transform-origin:50% 100%}
.tkB1{transform:scaleY(clamp(0, calc(var(--p,0) * 1.6),          1))}
.tkB2{transform:scaleY(clamp(0, calc((var(--p,0) - .12) * 1.7),  1))}
.tkB3{transform:scaleY(clamp(0, calc((var(--p,0) - .24) * 1.8),  1))}
.tkB4{transform:scaleY(clamp(0, calc((var(--p,0) - .36) * 1.9),  1))}
@media (prefers-reduced-motion:reduce){
  .tkMerc{transform:scaleY(.4)}
  .tkKalt{opacity:1}
  .tkB1,.tkB2,.tkB3,.tkB4{transform:none}
}
.tk-hd{max-width:62ch;margin:0 auto var(--s-16);text-align:center}
.tk-lede{font-size:var(--fs-xl);color:var(--muted);margin-top:var(--s-4);line-height:1.6}


/* ══ ZEHNJAHRESRECHNUNG mit Wartungsintervall (Aug 2026) ══════════════════ */
.tco-kopf{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-4);
  font-size:12.5px;color:var(--muted)}
.tco-iv{display:inline-flex;align-items:center;gap:4px;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-full);
  padding:3px 3px 3px 12px}
.tco-iv-l{font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:var(--tr-wide);
  text-transform:uppercase;color:var(--muted);margin-right:4px}
.tco-iv-b{border:none;background:transparent;border-radius:var(--r-full);
  padding:5px 12px;font-size:12px;font-weight:var(--fw-semibold);color:var(--muted);
  font-family:inherit;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-smooth),color var(--dur-fast) var(--ease-smooth)}
.tco-iv-b:hover{color:var(--ink)}
.tco-iv-b.on{background:var(--ink);color:#fff}
.tco-fuss{font-size:11.5px;color:var(--muted);line-height:1.6;
  margin:var(--s-4) 0 0;padding-top:var(--s-3);
  border-top:1px solid rgba(224,223,217,.7)}

/* ══ SEGMENTVERGLEICH als Tabelle ═════════════════════════════════════════
   Ersetzt die zwei Kartenreihen (seg-compare + seg-compare-detail), die
   dieselben drei Segmente doppelt zeigten. */
.segtab-h{font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:var(--tr-wide);
  text-transform:uppercase;color:var(--muted);margin:var(--s-7) 0 var(--s-3)}
.segtab-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.segtab{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.segtab th,.segtab td{text-align:left;vertical-align:top}
.segtab-ecke{width:38%}
.segtab-sp{width:20.6%;padding:0 var(--s-4) var(--s-3);
  border-bottom:1.5px solid var(--border)}
.segtab-name{display:block;font-size:12px;font-weight:var(--fw-bold);
  letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--muted)}
.segtab-sp.is-wahl{border-bottom-color:var(--teal)}
.segtab-sp.is-wahl .segtab-name{color:var(--teal-d)}
.segtab-badge{display:inline-block;margin-top:4px;font-size:9.5px;
  font-weight:var(--fw-semibold);color:var(--teal-d);background:var(--teal-lt);
  padding:2px 8px;border-radius:var(--r-full);letter-spacing:0;text-transform:none}
.segtab-kopf{padding:10px var(--s-4) 10px 0;font-weight:var(--fw-regular);
  border-bottom:1px solid rgba(224,223,217,.7)}
.segtab-l{display:block;font-size:13px;color:var(--body);font-weight:var(--fw-medium)}
.segtab-s{display:block;font-size:11px;color:var(--muted);line-height:1.45;margin-top:1px}
.segtab-w{padding:10px var(--s-4);font-size:13px;
  color:var(--body);font-variant-numeric:tabular-nums;
  border-bottom:1px solid rgba(224,223,217,.7)}
.segtab-w.is-wahl{background:rgba(61,139,122,.05);color:var(--ink);
  font-weight:var(--fw-semibold)}
.segtab tr.is-stark .segtab-w{font-weight:var(--fw-bold);color:var(--ink)}
.segtab tr.is-stark .segtab-l{color:var(--ink);font-weight:var(--fw-semibold)}
.segtab tbody tr:last-child .segtab-kopf,
.segtab tbody tr:last-child .segtab-w{border-bottom:none}
.segtab-hint{margin:var(--s-4) 0 0;padding:11px 14px;background:var(--stone);
  border-radius:var(--r-2);font-size:11.5px;color:var(--muted);line-height:1.6}
.segtab-hint strong{color:var(--ink);font-weight:var(--fw-semibold)}
@media (max-width:640px){
  .segtab{min-width:460px;font-size:12px}
  .segtab-s{display:none}
  .tco-kopf{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
}

/* Kopfzeile im Pill-Menue (Leitungsweg) — nennt die Groesse, um die es geht,
   und die Schaetzung aus dem Plan. */
.pl-menu-h{padding:9px 13px 7px;font-size:10.5px;font-weight:var(--fw-bold);
  letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--border);margin-bottom:4px;white-space:nowrap}
.pl-menu-h em{font-style:normal;font-weight:var(--fw-medium);
  text-transform:none;letter-spacing:0;color:var(--teal-d)}

/* ══ Meterfeld in der Leitungsweg-Frage ═══════════════════════════════════ */
.kvp-fg-m{margin-top:12px;padding-top:11px;border-top:1px solid rgba(224,223,217,.8)}
.kvp-fg-m>label{display:block;font-size:10.5px;font-weight:var(--fw-bold);
  letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--muted);
  margin-bottom:6px}
.kvp-fg-m-in{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kvp-fg-m-in input{width:92px;padding:8px 10px;border:1px solid var(--border);
  border-radius:var(--r-2);font-family:inherit;font-size:14px;font-weight:var(--fw-semibold);
  color:var(--ink);background:var(--white);-moz-appearance:textfield}
.kvp-fg-m-in input::-webkit-outer-spin-button,
.kvp-fg-m-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.kvp-fg-m-in input:focus{outline:none;border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(61,139,122,.14)}
.kvp-fg-m-in input.is-fehler{border-color:var(--red);
  box-shadow:0 0 0 3px rgba(185,28,28,.12)}
.kvp-fg-m-in>span{font-size:13px;color:var(--muted);margin-left:-4px}
.kvp-fg-m-in button{border:1px solid var(--teal);background:var(--teal);color:#fff;
  border-radius:var(--r-2);padding:8px 14px;font-family:inherit;font-size:13px;
  font-weight:var(--fw-semibold);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-smooth)}
.kvp-fg-m-in button:hover{background:var(--teal-d);border-color:var(--teal-d)}
.kvp-fg-m-h{display:block;margin-top:6px;font-size:11px;color:var(--muted);line-height:1.5}

/* Posten, die nicht in der Summe stehen — optisch abgesetzt, damit die
   Zeilen nicht als Teil der Rechnung gelesen werden. */
.kvp-auf-extra{margin-top:11px;padding-top:9px;
  border-top:1px dashed rgba(28,43,58,.18)}
.kvp-auf-extra-h{font-size:10px;font-weight:var(--fw-bold);letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.kvp-auf-extra .kvp-auf-z{opacity:.9}

.pl-schaetz{font-style:normal;font-size:9.5px;font-weight:var(--fw-medium);
  color:var(--muted);opacity:.85;margin-left:3px}

/* ══ MOBILE-KORREKTUR Detailsektion (Aug 2026) ════════════════════════════
   Die Panels sind Grid-Items und hatten min-width:auto — sie sind deshalb
   auf die Breite ihres breitesten Kindes gewachsen (Vergleichstabelle,
   Kostenzeilen) und ragten bei 390px Viewport 120px aus der Seite. Der
   Betrag rechts war abgeschnitten. Ausserdem stand die Reiterleiste sticky
   und vierzeilig im Bild, obwohl mobil ohnehin alle Bloecke untereinander
   sichtbar sind — sie bringt dort keinen Nutzen. */
.kvp-panels,
.kvp-panel{min-width:0}
.kvp-panel>*{min-width:0}

@media (max-width:1023px){
  /* Reiter sind mobil ueberfluessig: die vier Bloecke stehen untereinander
     und tragen jeweils ihre eigene Ueberschrift. */
  .kvp-tabs{display:none}
  .detail-sec{padding-left:var(--s-5);padding-right:var(--s-5)}
  .kvp-panel{padding:var(--s-5)}
  .kvp-panel-t{font-size:var(--fs-lg)}
  /* Breite Inhalte scrollen in sich statt die Seite zu sprengen. */
  .segtab-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
    margin-left:calc(var(--s-5) * -1);margin-right:calc(var(--s-5) * -1);
    padding-left:var(--s-5);padding-right:var(--s-5)}
  .segtab{min-width:440px}
  #kvpPanel-anlage #gesamtCell{display:block}
  .tco-kopf{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
  .tco-iv{width:100%;justify-content:flex-start}
  .tco-label{width:74px;min-width:74px;font-size:10.5px}
  .kvp-fg-m-in input{width:80px}
}

@media (max-width:480px){
  .segtab{min-width:400px;font-size:11.5px}
  .segtab-sp{padding-left:var(--s-3);padding-right:var(--s-3)}
  .segtab-w{padding-left:var(--s-3);padding-right:var(--s-3)}
  .kvp-panel{padding:var(--s-4)}
  .tool-row{margin-top:var(--s-8)}
}

/* ══ Vergleichstabelle auf schmalen Schirmen ══════════════════════════════
   Vier Spalten in 390px ergeben unlesbare Saeulen — deshalb wird pro Zeile
   gestapelt: die Kennzahl steht als Titel ueber den drei Werten, die dann
   nebeneinander verglichen werden koennen. Kein horizontales Scrollen mehr. */
@media (max-width:640px){
  .segtab-wrap{overflow:visible;margin-left:0;margin-right:0;
    padding-left:0;padding-right:0}
  .segtab{min-width:0;width:100%;font-size:12.5px}
  .segtab-ecke{display:none}
  .segtab thead tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .segtab-sp{padding:0 6px 7px;text-align:center;width:auto}
  .segtab-name{font-size:11px}
  .segtab-badge{margin-top:3px;font-size:9px;padding:1px 6px}
  .segtab tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    padding:9px 0 8px;border-bottom:1px solid rgba(224,223,217,.7)}
  .segtab tbody tr:last-child{border-bottom:none}
  .segtab-kopf{grid-column:1 / -1;border-bottom:none;padding:0 0 5px}
  .segtab-l{font-size:12px}
  .segtab-s{display:block;font-size:10.5px}
  .segtab-w{border-bottom:none;padding:0 6px;text-align:center;
    font-variant-numeric:tabular-nums}
  .segtab-w.is-wahl{border-radius:6px;padding-top:2px;padding-bottom:2px}
}

/* ══ kvp2 — Bühne + Panel (Umbau 25.8.2026) ═══════════════════════════════
   Der Plan ist die Bühne (links, groß), das Panel führt durch die Räume
   (rechts; am Handy Übersicht unter dem Plan, Raumblatt als Bottom-Sheet).
   Das Plus liegt auf dem Plan. Stufen-Pillen, Nordpfeil, Popover, Scroll-
   Band gibt es nicht mehr. */
.kvp2-kopf{padding:14px 20px 0}
.kvp2-kopf .kvp-vor{padding:0}
.kvp2-buehne{display:grid;grid-template-columns:minmax(0,5fr) minmax(250px,3fr);position:relative;margin-top:14px;border-top:1px solid var(--border-2)}
.kvp2-plan-wrap{position:relative;padding:6px 18px 18px;background:var(--kc-paper,#F7F7F4);min-width:0}
.kvp2-plan-wrap .pl-h{padding:12px 0 10px;border:none;background:none;z-index:1;padding-right:180px}
.kvp2-plan-wrap .plan{max-width:none}
.kvp2-plus{position:absolute;top:12px;right:16px;z-index:9;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 6px;border:1px solid var(--teal);background:var(--white);color:var(--teal-d,#2E6E5F);border-radius:999px;font-family:inherit;font-size:13px;font-weight:var(--fw-semibold);cursor:pointer;box-shadow:0 8px 20px -10px rgba(28,43,58,.35);transition:transform 160ms var(--ease-smooth),box-shadow 160ms var(--ease-smooth)}
.kvp2-plus:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(28,43,58,.4)}
.kvp2-plus-i{width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:19px;line-height:1;font-weight:500}
.kvp2-plus--aus{display:none}
.fp-hit.is-aktiv .fp-hit-r{fill:rgba(61,139,122,.14)}
/* Der Papierhintergrund des Plans ragt über den viewBox-Rand hinaus und fing am Handy die Tipps auf dem Plus ab */
.kv-plan-host svg.fp{overflow:hidden}
.fp-paper{pointer-events:none}
.kvp2-panel{padding:18px 20px 20px;border-left:1px solid var(--border-2);background:var(--white);display:flex;flex-direction:column;gap:10px;min-width:0}
.kvp2-p-kopf{margin-bottom:4px}
.kvp2-p-t{font-size:16px;font-weight:var(--fw-bold);color:var(--ink);letter-spacing:-.01em}
.kvp2-p-s{font-size:11.5px;font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kvp2-liste{display:flex;flex-direction:column;gap:6px}
.kvp2-raum{display:grid;grid-template-columns:26px 1fr auto 14px;align-items:center;gap:10px;width:100%;padding:10px 10px 10px 8px;border:1px solid var(--border);border-radius:10px;background:var(--white);font-family:inherit;text-align:left;cursor:pointer;color:var(--ink);transition:border-color 140ms,background 140ms}
.kvp2-raum:hover{border-color:var(--teal);background:var(--teal-lt,#EEF6F3)}
.kvp2-raum-n{width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;font-size:12.5px;font-weight:var(--fw-bold);display:inline-flex;align-items:center;justify-content:center}
.kvp2-raum-t{display:flex;flex-direction:column;min-width:0}
.kvp2-raum-t b{font-size:13.5px;font-weight:var(--fw-semibold)}
.kvp2-raum-t i{font-style:normal;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kvp2-raum-m{font-size:13px;font-weight:var(--fw-semibold);color:var(--ink);white-space:nowrap}
.kvp2-raum svg{width:14px;height:14px;color:var(--muted)}
.kvp2-add{display:inline-flex;align-items:center;gap:10px;padding:10px 12px;border:1px dashed var(--teal);border-radius:10px;background:transparent;color:var(--teal-d,#2E6E5F);font-family:inherit;font-size:13.5px;font-weight:var(--fw-semibold);cursor:pointer;transition:background 140ms}
.kvp2-add:hover{background:var(--teal-lt,#EEF6F3)}
.kvp2-add span{width:24px;height:24px;border-radius:50%;background:var(--teal);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:17px;line-height:1}
.kvp2-hint{font-size:12.5px;line-height:1.5;color:var(--muted)}
.kvp2-l{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;font-weight:var(--fw-bold);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.kvp2-l b{font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink)}
.kvp2-sel{width:100%;height:42px;border:1px solid var(--border);border-radius:10px;font-family:inherit;font-size:14px;color:var(--ink);background:var(--white);padding:0 12px}
.kvp2-sel:focus{outline:none;border-color:var(--teal)}
.kvp2-range{width:100%;accent-color:var(--teal);margin:4px 0 2px}
.kvp2-stp{display:flex;align-items:center;height:42px;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.kvp2-stp button{width:42px;height:100%;border:none;background:none;font-size:18px;color:var(--muted);cursor:pointer;font-family:inherit}
.kvp2-stp button:hover{background:var(--bg);color:var(--ink)}
.kvp2-stp input{flex:1;min-width:0;border:none;background:none;text-align:right;font-family:inherit;font-size:16px;font-weight:var(--fw-semibold);color:var(--ink);-moz-appearance:textfield}
.kvp2-stp input::-webkit-inner-spin-button,.kvp2-stp input::-webkit-outer-spin-button{-webkit-appearance:none}
.kvp2-stp input:focus{outline:none}
.kvp2-stp span{font-size:12.5px;color:var(--muted);padding:0 10px 0 4px}
.kvp2-chips{display:flex;gap:6px;flex-wrap:wrap}
.kvp2-chips[data-grp="hr"] .kvp2-chip{flex:0 0 auto}
.kvp2-chip{flex:1;padding:10px 6px;white-space:nowrap;border:1px solid var(--border);border-radius:10px;background:var(--white);font-family:inherit;font-size:12.5px;font-weight:var(--fw-medium);color:var(--body);cursor:pointer}
.kvp2-chip.on{border-color:var(--teal);background:var(--teal-lt,#EEF6F3);color:var(--teal-d,#2E6E5F);font-weight:var(--fw-semibold)}
.kvp2-p-fuss{display:flex;gap:8px;margin-top:auto;padding-top:14px}
.kvp2-btn{flex:1;height:42px;border-radius:10px;font-family:inherit;font-size:13.5px;font-weight:var(--fw-semibold);cursor:pointer;border:1px solid var(--border);background:var(--white);color:var(--body)}
.kvp2-btn--go{background:var(--ink);color:#fff;border-color:var(--ink)}
.kvp2-btn--go:hover{background:var(--teal);border-color:var(--teal)}
.kvp2-btn--weg{flex:0 0 auto;padding:0 12px;color:var(--muted)}
.kvp2-btn--weg:hover{color:#B23B3B;border-color:#B23B3B}
.kvp2-schleier{display:none}
@media (max-width:760px){
  .kvp2-kopf{padding:10px 12px 0}
  /* Vorfragen am Handy: nur Wert + Symbol, nebeneinander, umbrechend */
  .kvp2-kopf .kvp-vor{display:flex;flex-wrap:wrap;gap:6px}
  .kvp2-kopf .kvp-vor-p{padding:7px 11px 7px 9px;font-size:12.5px;gap:6px;margin:0}
  .kvp2-kopf .kvp-vor-p i{display:none}
  .kvp2-kopf .kvp-vor-p svg{width:13px;height:13px}
  .kvp2-buehne{grid-template-columns:1fr;margin-top:12px}
  .kvp2-plan-wrap{padding:4px 6px 12px}
  .kvp2-plan-wrap .pl-h{padding:10px 8px 6px}
  .kvp2-plan-wrap .fp-l--dim{display:none}
  .kvp2-plus{position:relative;z-index:4;display:flex;width:max-content;margin:8px auto 0;height:40px}
  .kvp2-panel .kvp2-add{display:none}
  .kvp2-panel{border-left:none;border-top:1px solid var(--border-2);padding:14px}
  .kvp2-panel.is-sheet{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:1300;border:none;border-radius:18px 18px 0 0;box-shadow:0 -12px 40px -12px rgba(28,43,58,.45);max-height:72vh;overflow:auto;padding:12px 18px calc(18px + env(safe-area-inset-bottom,0px))}
  .kvp2-panel.is-sheet::before{content:'';display:block;width:38px;height:4px;border-radius:99px;background:var(--border);margin:0 auto 10px}
.kvp2-panel.is-sheet>*{flex-shrink:0}
  .kvp2-sheet-offen .kvp2-schleier{display:block;position:fixed;inset:0;z-index:1290;background:rgba(28,43,58,.28)}
  .kvp2-p-fuss{padding-top:12px}
}

/* ══ GESAMTPREIS-BAND in der Aufschluesselung (27.8.2026) ═══════════════════
   Derselbe Ton wie der blaue Ergebniskopf, damit unten das steht, was oben
   als Richtwert versprochen wurde — als Spanne. */
.kvp-gesamt{background:var(--ink);color:#fff;border-radius:14px;padding:16px 18px 15px;
  margin-top:14px;position:relative;overflow:hidden}
.kvp-gesamt::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 40% at 20% 0%,rgba(61,139,122,.16),transparent 70%),
             radial-gradient(ellipse 50% 50% at 95% 100%,rgba(46,64,87,.35),transparent 70%)}
.kvp-gesamt>*{position:relative;z-index:1}
.kvp-gesamt-l{font-size:9.5px;font-weight:var(--fw-bold);letter-spacing:.09em;
  text-transform:uppercase;color:#71C3AA;margin-bottom:6px}
.kvp-gesamt-v{font-size:28px;font-weight:var(--fw-semibold);line-height:1.05;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 32}
.kvp-gesamt-s{font-size:12px;color:rgba(255,255,255,.62);margin-top:7px;line-height:1.5}
@media (max-width:480px){.kvp-gesamt-v{font-size:24px}}
/* Zehnjahresblock: nur noch der Stand des Service-Intervalls, Schalter oben */
.tco-iv-note{font-size:11px;font-weight:var(--fw-semibold);letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r-full);padding:4px 11px;white-space:nowrap}
@media (min-width:1024px){
  #kvpPanel-anlage #gesamtCell>.kvp-gesamt{grid-column:1 / -1;margin-top:0}
}

/* ══ Nachbesserungen 27.8.2026 (Fabio-Screenshots) ═══════════════════════ */
/* D) Folgefrage am Handy: Symbol sitzt in der Fragezeile, die Antworten
   nutzen die volle Breite — vorher rueckten sie mit dem Symbol nach rechts. */
@media (max-width:760px){
  .kvp-fg-karte{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:10px;row-gap:10px;align-items:start}
  .kvp-fg-txt{display:contents}
  .kvp-fg-txt>.kvp-fg-q{grid-column:2;min-width:0}
  .kvp-fg-txt>.kvp-fg-o,.kvp-fg-txt>.kvp-fg-m{grid-column:1 / -1}
  .kvp-fg-o button{flex:1 1 calc(50% - 3px)}
  .kvp-fg-o button.egal{flex:1 1 100%}
}
/* B) Vergleichstabelle: gewaehlte Klasse als durchgehend gerahmte Spalte */
.segtab-sp.is-wahl{background:rgba(61,139,122,.06);border-top:1px solid rgba(61,139,122,.35);
  border-left:1px solid rgba(61,139,122,.35);border-right:1px solid rgba(61,139,122,.35);
  border-bottom-color:var(--teal);border-radius:10px 10px 0 0;padding-top:10px}
.segtab-w.is-wahl{background:rgba(61,139,122,.06);
  border-left:1px solid rgba(61,139,122,.35);border-right:1px solid rgba(61,139,122,.35)}
.segtab tbody tr:last-child .segtab-w.is-wahl{border-bottom:1px solid rgba(61,139,122,.35);
  border-radius:0 0 10px 10px}
.segtab-w{padding-top:12px;padding-bottom:12px}
.segtab-kopf{padding-top:12px;padding-bottom:12px}
@media (max-width:640px){
  /* gestapelte Zeilen: die gewaehlte Zelle als Chip, mehr Luft je Zeile */
  .segtab thead tr{margin-bottom:4px}
  .segtab-sp.is-wahl{border-radius:10px;border-bottom:1px solid rgba(61,139,122,.35);padding-top:7px}
  .segtab tbody tr{padding:12px 0 11px}
  .segtab-kopf{padding:0 0 7px}
  .segtab-w{padding:0 4px;line-height:1.35}
  .segtab-w.is-wahl{border:1px solid rgba(61,139,122,.35);border-radius:8px;
    padding:6px 4px;background:rgba(61,139,122,.08)}
  .segtab tbody tr:last-child .segtab-w.is-wahl{border-radius:8px}
  .segtab-w:not(.is-wahl){padding-top:7px;padding-bottom:7px}
}
/* F) Summenzeilen am Handy: Betrag unter dem Titel statt umgebrochener Spanne */
@media (max-width:480px){
  #gesamtCell .crow-total{flex-direction:column;align-items:flex-start;gap:2px}
  #gesamtCell .crow-total-val{font-size:19px;white-space:nowrap}
  #gesamtCell .crow-val{font-size:13px}
}
.segtab{border-collapse:separate;border-spacing:0}
@media (max-width:640px){
  /* .segtab th/td{text-align:left} schlug die Zentrierung (hoehere Spezifitaet) */
  .segtab .segtab-w,.segtab .segtab-sp{text-align:center}
}