/* kv-dim.css — Kühlleistung je Raum (dimensionierung.html, P58 29.10., Mockup .work/mockups/p58-dim-kr/dk.css).
   Präfix .dk nur für das, was der Kostenrechner nicht hat: Fenster-Zähler, Höhen-Zähler, Anteile. Räume = kv-plan.css.
   Alles andere sind Klassen aus kostenrechner.html (calc-shell/calc-card, Seiten-CSS hierher kopiert), kv-plan.css
   (krb-/kra-, krb-erg, kvp-qs-h, kvp-auf-z, krp) und kv-knopf.css. Modell-Bühne .dm-* (js/kv-dim-modell.js).
   Schrift: Stufen --krb-t1…t5 (22/17/15/13/11) aus kv-plan.css, keine neuen Grade. Abstände 8 · 12 · 16 · 24. */

:root{--section-px:var(--s-10)}
@media (max-width:640px){:root{--section-px:var(--s-5)}}
button{font-family:var(--f)}

/* ── Kopf: Abstand zum Rechner wie im Kostenrechner (Maßband-Größe im Seitenstil von dimensionierung.html) ── */
.page-hero{padding-bottom:0}

/* ── Rechner-Rahmen = kostenrechner.html (Seiten-CSS, wirksame Werte) ── */
.dk-rechner{max-width:var(--max-w);margin:0 auto;padding:var(--s-4) var(--section-px) 0;box-sizing:content-box}
.calc-shell{display:block}
.calc-col-input,.calc-col-result{min-width:0}
.calc-card{background:var(--white);border:.5px solid var(--border);border-radius:var(--r-4);box-shadow:var(--sh-4);overflow:hidden;
  scroll-margin-top:calc(var(--nav-h) + var(--s-4))}
.calc-card>.tool-lbl{margin:0;padding:var(--s-5) var(--s-6) 0}
@media (max-width:1023px){
  .calc-card>.tool-lbl{display:none}
  .calc-col-result{padding-top:var(--s-6)}
}
@media (min-width:1024px){
  .calc-shell{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:var(--s-5);align-items:start}
  .calc-col-input .calc-card{box-shadow:var(--sh-3)}
  .calc-col-result{position:sticky;top:calc(var(--nav-h) + var(--s-4))}
}
@media (min-width:1320px){.calc-shell{grid-template-columns:minmax(0,1fr) 468px;gap:var(--s-6)}}

/* Standort · Gebäude · Beschattung: drei statt zwei Tasten (kv-plan.css .krb-vor), sonst gleich */
#kvPlanHost.krb .kra-vor .krb-vor.dk-vor{max-width:none;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){
  #kvPlanHost.krb .kra-vor .krb-vor.dk-vor{display:flex}
  /* „Keine“ allein sagt am Handy nichts: bei der Beschattung bleibt die Bezeichnung stehen */
  .dk-vor [data-vor="schatten"] .krb-vor-t i{display:inline}
}

/* ── Modell-Bühne im Feld .kra-haus des Kostenrechners ── */
#kvPlanHost.krb .kra-haus{padding:0}
.dm-buehne{position:relative;height:420px;isolation:isolate;
  background:radial-gradient(ellipse 70% 60% at 50% 46%,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 70%)}
.dm-canvas{position:absolute;inset:30px 0 0}
.dm-canvas canvas{display:block;width:100%;height:100%;touch-action:pan-y;outline:none}
.dm-canvas.is-kompass canvas{cursor:pointer}
.dm-marken{position:absolute;inset:0;pointer-events:none}
.dm-mk{position:absolute;left:0;top:0;white-space:nowrap;font-size:11.5px;font-weight:var(--fw-semibold);line-height:1;letter-spacing:.04em;
  color:var(--ink);font-variant-numeric:tabular-nums;will-change:transform;text-shadow:0 0 3px #fff,0 0 6px #fff,0 0 10px rgba(255,255,255,.9)}
.dm-mk--fl{font-size:12.5px}
.krb .dm-zeit,.krb .dm-hilfe{position:absolute;top:14px;margin:0;font-size:12px;font-weight:var(--fw-medium);line-height:1.3;pointer-events:none}
.dm-zeit{left:20px;color:var(--body)}
.dm-hilfe{right:20px;color:var(--muted);transition:opacity .4s}
.dm-hilfe.is-weg{opacity:0}
.dm-zurueck{position:absolute;right:12px;bottom:12px;min-height:32px;padding:0 12px;border:0;border-radius:var(--r-full);
  background:rgba(255,255,255,.92);box-shadow:var(--sh-2);font:600 12.5px/1 var(--f);color:var(--ink);cursor:pointer}
.dm-zurueck:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.krb .dm-fehlt{position:absolute;left:24px;right:24px;top:50%;transform:translateY(-50%);margin:0;text-align:center;font-size:14px;color:var(--body)}
@media (max-width:1023px){.dm-buehne{height:340px}}
@media (max-width:640px){
  .dm-buehne{height:290px}
  .krb .dm-zeit,.krb .dm-hilfe{top:10px;font-size:11.5px}
  .dm-zeit{left:14px}.dm-hilfe{right:14px}
}

/* ── Räume: Leiste, Zähler, Raumzeilen und Raumblatt ausschließlich aus kv-plan.css (krb-hl, krb-zl, krb-liste,
   krb-raum, krb-blatt) — hier keine eigene Regel ── */

/* ── Genauer rechnen: Zähler-Zeilen (Fenster, Raumhöhe) in der Form der Raumblatt-Zeilen ── */
.dk-zl-liste{display:grid;gap:4px;border-top:1px solid var(--border)}
.dk-zl-liste>.krb-f--zeile{min-height:52px;border-bottom:1px solid var(--border)}
.dk-zl-t{display:grid;gap:1px;min-width:0;font-size:var(--krb-t3);font-weight:600;line-height:1.3;color:var(--ink)}
.dk-zl-t small{font-size:var(--krb-t4);font-weight:400;color:var(--muted)}
.krb-zl output.is-leer{color:var(--muted);font-weight:400}
.krb-zl.is-leer>[data-d="-1"]{visibility:hidden}   /* vor dem ersten Zählen kein Minus */
.krb .dk-zl-sum{font-size:var(--krb-t4);color:var(--body)}
.dk-zl-sum b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.dk-fg-akt{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
@media (min-width:1180px){
  .dk-zl-liste{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:0}
}

/* ── Ergebniskarte, weißer Teil: Anteile und alle Räume (Zeilen .kvp-auf-z aus kv-plan.css) ── */
.dk-teile .kvp-qs-h,.dk-alle .kvp-qs-h{margin-bottom:4px}
.dk-teile .kvp-auf-z,.dk-alle .kvp-auf-z{font-size:var(--krb-t4)}
.krb .dk-fuss{margin:6px 0 0;font-size:11.5px;line-height:1.45;color:var(--muted)}
.dk-alle button.kvp-auf-z{width:100%;background:none;border:0;border-bottom:1px solid rgba(224,223,217,.55);cursor:pointer;text-align:left;font-family:inherit}
.dk-alle button.kvp-auf-z:last-of-type{border-bottom:none}
.dk-alle button.kvp-auf-z.is-akt span{color:var(--teal-d);font-weight:600}
@media (hover:hover){.dk-alle button.kvp-auf-z:hover span{color:var(--teal-d)}}
.krb .dk-sys{margin:8px 0 0;font-size:var(--krb-t4);line-height:1.5;color:var(--body)}
.dk-sys b{color:var(--ink)}

.krb-erg-r{font-weight:500}
.krb-erg-r b{font-weight:600}

.dk-nach{padding-top:48px}
.dk-nach .note-box{margin-top:0}
@media (max-width:640px){.dk-nach{padding-top:32px}}
@media (prefers-reduced-motion:reduce){.dm-hilfe{transition:none}}