/* ════════════════════════════════════════════════════════════════
   Klimavergleich.at — kv-tools.css
   Gemeinsames Design-System aller Check-/Tool-Unterseiten.

   Loest die 7 inline duplizierten "checks-shared.css"-Bloecke ab
   (schallcheck, dimensionierung, stromkostenrechner, angebotscheck,
   angebotsvergleich, planungshilfen, widerruf). Diese waren bereits
   auseinandergedriftet — 7 Dateien, 7 verschiedene Staende.

   Quelle der Tokens: /css/kv.css. Hier NICHTS hartkodieren, was es
   als Token gibt. Aenderungen am Design-System zuerst auf index.html,
   dann hier — und nur hier.

   Einbinden NACH /fonts.css und /css/kv.css.

   Enthaelt:
     Seiten-Geruest .page-hero / .page-shell
     Karten         .card / .tool-card
     Formulare      .f-*
     Optionen       .opt
     Wizard         .steps / .stepcount / .q / .hint / .opts / .wiznav
     Ergebnis       .result-box / .stat / .verdict / .v-*
     FAQ            .faq-sec / .bento-*     (1:1 von index.html)
     CTA            .cta-panel
     Bewegung       Hero-Auftritt; Scroll-Reveal macht kv-reveal.css

   NICHT enthalten: body{} — font-size/line-height variieren je
   Seitentyp bewusst und bleiben seitenlokal.
   ════════════════════════════════════════════════════════════════ */

:root{--section-px:var(--s-10);--section-py:var(--s-24);}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
input,textarea,select,[contenteditable="true"]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}
img,svg{display:block;max-width:100%}
button,a,input{font-family:inherit}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:var(--r-1)}
#ambient{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient( circle 600px at var(--mx,50%) var(--my,50%),rgba(61,139,122,0.08),transparent 55% )}
.h-display{font-size:clamp(38px,3.9vw,56px);font-weight:var(--fw-medium);line-height:1.05;letter-spacing:var(--tr-tight);color:var(--ink);font-variation-settings:"opsz" 40}
.h-display>span{display:block}
.h-display .it{color:inherit;font-style:normal;font-weight:inherit}
.h-display .sub{color:var(--muted);font-weight:var(--fw-regular);font-style:italic}
.h-display-sub{font-size:0.48em;font-weight:var(--fw-regular);color:var(--body);letter-spacing:var(--tr-tight);line-height:1.2;margin-top:var(--s-4)}
.h-display-sub em{font-style:italic;color:var(--teal);font-weight:var(--fw-medium)}
.h-section{font-size:clamp(30px,3.8vw,46px);font-weight:var(--fw-medium);line-height:var(--lh-snug);letter-spacing:var(--tr-snug);color:var(--ink);font-variation-settings:"opsz" 40}
.h-section .it{color:inherit;font-style:normal;font-weight:inherit}
.lead{font-size:var(--fs-xl);line-height:var(--lh-relaxed);color:var(--muted);font-weight:var(--fw-regular);max-width:56ch}
.lead strong{color:var(--ink);font-weight:var(--fw-semibold)}
.eyebrow{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-sm);font-weight:var(--fw-semibold);letter-spacing:var(--tr-wider);text-transform:uppercase;color:var(--teal);white-space:nowrap}
.eyebrow::before{content:"— ";color:var(--teal)}
.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--white);box-shadow:0 0 0 3px rgba(255,255,255,.22);animation:pulse 2s ease-in-out infinite;flex-shrink:0}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(255,255,255,.22)}50%{box-shadow:0 0 0 6px rgba(255,255,255,0)}}
.btn{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-5);border-radius:var(--r-2);font-size:var(--fs-md);font-weight:var(--fw-semibold);letter-spacing:var(--tr-normal);text-decoration:none;transition:all var(--dur-base) var(--ease-smooth);white-space:nowrap}
.btn svg{transition:transform var(--dur-base) var(--ease-smooth);flex-shrink:0}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--ink);color:var(--white);box-shadow:var(--sh-3)}
.btn-primary:hover{background:var(--teal);transform:translateY(-2px);box-shadow:var(--sh-teal)}
.btn-primary.btn-teal{background:var(--teal)}
.btn-primary.btn-teal:hover{background:var(--teal-d)}
.btn-secondary{background:var(--white);color:var(--ink);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn-ghost{color:var(--teal);padding:var(--s-2) 0;font-weight:var(--fw-semibold)}
.btn-ghost:hover{gap:var(--s-3)}
.btn-lg{padding:var(--s-5) var(--s-10);font-size:var(--fs-lg);border-radius:var(--r-3)}
.section{padding:var(--section-py) var(--section-px);position:relative;overflow:hidden;background:transparent;z-index:2}
.section-in{max-width:var(--max-w);margin:0 auto;position:relative;z-index:1}
.section-hdr{max-width:62ch;margin-bottom:var(--s-12)}
.section-hdr>.eyebrow{margin-bottom:var(--s-5)}
.section-hdr>.h-section{margin-bottom:var(--s-4)}
.section--dark{background:var(--ink);color:var(--white);margin:0 var(--s-5);border-radius:var(--r-5);box-shadow:var(--sh-5)}
.section--dark .eyebrow{color:#71C3AA}
.section--dark .h-section .it{color:#71C3AA;font-style:italic}
.section--dark .h-section{color:var(--white)}
.section--dark .lead{color:rgba(255,255,255,.62)}
.section--dark .lead strong{color:var(--white)}
.section--dark::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 40% at 20% 0%,rgba(61,139,122,.08),transparent 70%),radial-gradient(ellipse 50% 50% at 90% 100%,rgba(46,64,87,.3),transparent 70%);pointer-events:none;z-index:0}
.section.flat::after{content:'';position:absolute;left:18%;right:18%;bottom:0;height:1px;background:linear-gradient(to right,transparent,rgba(28,43,58,.14),transparent);pointer-events:none}
.section.highlight{background:var(--white);border:0.5px 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)}
.footer{position:relative}
.footer-in{position:relative;z-index:1}
.section-in{z-index:2}

.dot-live{width:6px;height:6px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.2);animation:pulse-green 2s ease-in-out infinite;flex-shrink:0}
@keyframes pulse-green{0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.2)}50%{box-shadow:0 0 0 5px rgba(34,197,94,.08)}}
@keyframes slideUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.btn-back{background:transparent;border:1px solid var(--border);color:var(--muted);padding:10px 18px;border-radius:8px;font-size:13.5px;font-weight:600;transition:all .18s;font-family:var(--f);cursor:pointer}
.btn-back:hover{border-color:var(--teal);color:var(--ink)}
.btn-back:disabled{opacity:.35;pointer-events:none}
.btn-next{display:inline-flex;align-items:center;gap:7px;background:var(--teal);color:var(--white);border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:600;transition:background .18s,transform .18s,box-shadow .18s;font-family:var(--f);box-shadow:0 4px 12px -4px rgba(61,139,122,0.3);cursor:pointer}
.btn-next:hover{background:var(--teal-d);transform:translateY(-1px);box-shadow:0 6px 16px -4px rgba(61,139,122,0.4)}
@keyframes spin{to{transform:rotate(360deg)}}

.footer{background:transparent;color:var(--muted);padding:var(--s-12) var(--section-px) var(--s-8);border-top:1px solid var(--border-2);position:relative;z-index:2}
.footer-in{max-width:var(--max-w);margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s-10);margin-bottom:var(--s-10)}
.footer-logo{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--ink);margin-bottom:var(--s-3);letter-spacing:var(--tr-base)}
.footer-logo em{font-style:normal;color:#5E8A9E;font-weight:var(--fw-regular)}
.footer-tag{font-size:var(--fs-sm);line-height:var(--lh-relaxed);max-width:280px;color:var(--body)}
.footer-contact{margin-top:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2)}
.footer-contact-item{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-sm);color:var(--muted);text-decoration:none;transition:color var(--dur-fast) var(--ease-smooth)}
.footer-contact-item:hover{color:var(--ink)}
.footer-contact-item svg{color:var(--teal);flex-shrink:0}
.footer-contact-meta{font-size:var(--fs-xs);color:var(--muted);opacity:0.85;margin-top:var(--s-1)}
.footer-head{font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--tr-wider);text-transform:uppercase;color:var(--ink);margin-bottom:var(--s-3)}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:var(--s-2)}
.footer-links a{color:var(--muted);text-decoration:none;font-size:var(--fs-sm);transition:color var(--dur-fast) var(--ease-smooth)}
.footer-links a:hover{color:var(--ink)}
.footer-links--regions{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2) var(--s-4);flex-direction:unset}
.footer-links--regions li{line-height:1.4}
.footer-bot{padding-top:var(--s-6);border-top:1px solid var(--border-3);display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-xs);flex-wrap:wrap;gap:var(--s-3);color:var(--muted)}

/* ── Seiten-Gerüst für Tool-Unterseiten ── */
.page-hero{padding:calc(var(--nav-h) + var(--s-24)) var(--section-px) var(--s-10);position:relative;z-index:2;background:linear-gradient(to bottom,rgba(245,245,243,1) 0%,rgba(245,245,243,0) 120px),radial-gradient(ellipse 55% 45% at 15% 10%,rgba(61,139,122,.07),transparent 60%)}
.page-hero-in{max-width:var(--max-w);margin:0 auto}
.page-hero-in>.eyebrow{margin-bottom:var(--s-5)}
.page-hero-in>.h-section{margin-bottom:var(--s-4);max-width:24ch}
.page-hero-in>.lead{max-width:52ch}
.page-shell{max-width:var(--max-w);margin:0 auto;padding:0 var(--section-px) var(--s-20);position:relative;z-index:2}
.page-shell--narrow{max-width:820px}

/* ── Karten ── */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-3);padding:var(--s-7);box-shadow:var(--sh-2)}
.card+.card{margin-top:var(--s-5)}
.card h2{font-size:var(--fs-2xl);font-weight:var(--fw-semibold);color:var(--ink);letter-spacing:var(--tr-snug);margin-bottom:var(--s-3);font-variation-settings:"opsz" 20}
.tool-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-3);padding:var(--s-6);box-shadow:var(--sh-2);display:flex;flex-direction:column;transition:all var(--dur-slow) var(--ease-out)}
.tool-card:hover{border-color:var(--teal);transform:translateY(-4px);box-shadow:var(--sh-4)}
.tool-tag{display:inline-block;font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--teal);margin-bottom:var(--s-2)}
.tool-title{font-size:var(--fs-xl);font-weight:var(--fw-medium);color:var(--ink);letter-spacing:var(--tr-base);margin-bottom:var(--s-2);line-height:var(--lh-snug);font-variation-settings:"opsz" 18}
.tool-desc{font-size:var(--fs-base);color:var(--muted);line-height:var(--lh-relaxed);flex:1;margin-bottom:var(--s-4)}
.tool-meta{font-size:var(--fs-xs);color:var(--muted);font-weight:var(--fw-medium);letter-spacing:var(--tr-base);margin-bottom:var(--s-4)}
.tool-meta b{color:var(--teal);font-weight:var(--fw-semibold)}

/* ── Formulare (Duktus des Anfrage-Wizards) ── */
.f-label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--ink);letter-spacing:var(--tr-base);margin:var(--s-5) 0 var(--s-2)}
.f-label small{font-weight:var(--fw-regular);color:var(--muted)}
.f-input,select.f-input,input.f-input,textarea.f-input{width:100%;min-width:0;border:1.5px solid var(--border);border-radius:var(--r-2);padding:var(--s-3) var(--s-4);font-size:var(--fs-lg);color:var(--ink);font-family:var(--f);background:var(--white);outline:none;transition:border-color var(--dur-fast) var(--ease-smooth),box-shadow var(--dur-fast) var(--ease-smooth);-webkit-appearance:none;appearance:none}
select.f-input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231C2B3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--s-3) center;padding-right:var(--s-8)}
.f-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,64,87,.1)}
.f-hint{font-size:var(--fs-base);color:var(--muted);margin-top:var(--s-2)}
.f-hint a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.f-check{display:flex;gap:var(--s-3);align-items:flex-start;margin-top:var(--s-3);font-size:var(--fs-md);cursor:pointer;color:var(--body);line-height:1.55}
.f-check input{width:16px;height:16px;margin-top:3px;flex-shrink:0;accent-color:var(--teal);cursor:pointer}
.f-err{font-size:var(--fs-sm);color:var(--red);margin-top:var(--s-3);display:none}
.f-err.show{display:block}
input[type=range].sl{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;background:var(--border);outline:none;cursor:pointer}
input[type=range].sl::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--blue);box-shadow:0 2px 8px rgba(46,64,87,.3);transition:transform .15s}
input[type=range].sl::-webkit-slider-thumb:hover{transform:scale(1.2)}

/* ── Optionen (o-btn-Duktus des Wizards) ── */
.opt-col{display:flex;flex-direction:column;gap:var(--s-2)}
.opt-row{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.opt{border:1.5px solid var(--border);border-radius:var(--r-2);background:var(--white);padding:var(--s-3) var(--s-4);font-family:var(--f);font-size:var(--fs-lg);color:var(--body);cursor:pointer;transition:all .16s;text-align:left}
.opt small{display:block;font-size:var(--fs-sm);color:var(--muted);font-weight:var(--fw-regular);margin-top:2px}
.opt:hover{border-color:var(--teal);background:var(--teal-lt)}
.opt[aria-pressed="true"]{border-color:var(--teal);background:var(--teal-lt);color:var(--ink);font-weight:var(--fw-semibold)}
.opt[aria-pressed="true"] small{font-weight:var(--fw-regular)}

/* ── Ergebnisboxen (kr-result-Duktus) ── */
.result-box{background:var(--teal-lt);border:1px solid var(--teal-lt2);border-radius:var(--r-3);padding:var(--s-6) var(--s-7);margin-top:var(--s-6)}
.result-label{font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--teal-d);margin-bottom:var(--s-3)}
.result-big{font-size:clamp(26px,3.2vw,34px);font-weight:var(--fw-semibold);color:var(--ink);letter-spacing:var(--tr-tight);line-height:1;font-variation-settings:"opsz" 40}
.result-sub{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--s-3)}
.kwscale{margin-top:var(--s-5)}
.kwscale-track{position:relative;height:10px;border-radius:var(--r-full);background:var(--white);border:1px solid var(--teal-lt2)}
.kwscale-band{position:absolute;top:1px;bottom:1px;border-radius:var(--r-full);background:var(--teal);opacity:.85;min-width:8px;transition:left var(--dur-base) var(--ease-smooth),width var(--dur-base) var(--ease-smooth)}
.kwscale-marks{position:relative;height:26px;margin-top:4px}
.kwscale-mark{position:absolute;transform:translateX(-50%);text-align:center;font-size:10px;color:var(--muted);font-weight:var(--fw-medium);line-height:1.25}
.kwscale-mark::before{content:"";display:block;width:1px;height:6px;background:var(--stone-d);margin:0 auto 2px}
.kwscale-mark b{display:block;color:var(--body);font-weight:var(--fw-semibold)}
.stat-row{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-4)}
.stat{flex:1;min-width:150px;background:var(--white);border:0.5px solid var(--border);border-radius:var(--r-2);padding:var(--s-4) var(--s-5)}
.stat b{display:block;font-size:var(--fs-xl);font-weight:var(--fw-semibold);color:var(--ink);font-variant-numeric:tabular-nums}
.stat span{font-size:var(--fs-xs);color:var(--muted)}
.note-box{background:var(--blue-lt);border:1px solid var(--border);border-radius:var(--r-2);padding:var(--s-4) var(--s-5);font-size:var(--fs-md);color:var(--body);margin-top:var(--s-4)}
.note-box b{color:var(--ink)}
.save-box{background:rgba(26,107,69,.07);border:1px solid rgba(26,107,69,.18);border-radius:var(--r-2);padding:var(--s-4) var(--s-5);font-size:var(--fs-md);margin-top:var(--s-4)}
.save-box b{color:var(--green)}
.verdict{border-radius:var(--r-3);padding:var(--s-6) var(--s-7);margin-bottom:var(--s-6);border:1px solid}
.verdict h3{font-size:var(--fs-2xl);font-weight:var(--fw-semibold);letter-spacing:var(--tr-snug);margin-bottom:var(--s-2)}
.verdict p{font-size:var(--fs-md);line-height:var(--lh-relaxed)}
.v-green{background:rgba(26,107,69,.07);border-color:rgba(26,107,69,.2)}.v-green h3{color:var(--green)}
.v-amber{background:rgba(201,132,31,.08);border-color:rgba(201,132,31,.25)}.v-amber h3{color:var(--amber)}
.v-red{background:rgba(185,28,28,.06);border-color:rgba(185,28,28,.2)}.v-red h3{color:var(--red)}
.v-grey{background:var(--stone);border-color:var(--border)}.v-grey h3{color:var(--ink)}

/* ── CTA-Block (section--dark-Miniatur) ── */
.cta-panel .btn{margin:var(--s-2) var(--s-2) 0}
@media (max-width:640px){.cta-panel .btn{display:flex;width:100%;justify-content:center;margin:var(--s-3) 0 0;white-space:normal;text-align:center}}
.cta-panel{background:var(--ink);border-radius:var(--r-4);padding:var(--s-10);color:var(--white);text-align:center;position:relative;overflow:hidden;margin-top:var(--s-8);box-shadow:var(--sh-4)}
.cta-panel::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(61,139,122,.12),transparent 70%);pointer-events:none}
.cta-panel>*{position:relative;z-index:1}
.cta-panel h2,.cta-panel h4{font-size:clamp(20px,2.6vw,28px);font-weight:var(--fw-medium);letter-spacing:var(--tr-snug);color:var(--white);margin-bottom:var(--s-3);font-variation-settings:"opsz" 24}
.cta-panel h2 .it,.cta-panel h4 .it{color:#71C3AA;font-style:italic}
.cta-panel p{font-size:var(--fs-md);color:rgba(255,255,255,.62);max-width:52ch;margin:0 auto var(--s-6)}
.cta-panel p strong{color:var(--white)}

/* ── Disclaimer ── */
.disclaimer{font-size:var(--fs-sm);color:var(--muted);line-height:var(--lh-relaxed);margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--border)}
.disclaimer b{color:var(--body)}

/* ── Responsive ── */
@media (max-width:1100px){.f-row{grid-template-columns:1fr}}
@media (max-width:640px){.card,.tool-card{padding:var(--s-5)}.page-hero{padding-top:calc(var(--nav-h) + var(--s-10))}.cta-panel{padding:var(--s-7) var(--s-5)}.footer-grid{grid-template-columns:1fr;gap:var(--s-6)}.footer-bot{flex-direction:column;gap:var(--s-2);text-align:center;align-items:center}}

/* ── Wizard-Bausteine (mehrschrittige Checks) ─────────────────────
   Stammen aus schallcheck.html, dort noch auf Pixelwerte und
   var(--blue) gebaut. Hier auf Tokens und den Teal-Akzent gebracht,
   damit alle Tools denselben Duktus haben. */
.steps{display:flex;gap:6px;margin-bottom:var(--s-5)}
.steps span{flex:1;height:4px;border-radius:2px;background:var(--stone);transition:background var(--dur-base) var(--ease-smooth)}
.steps span.on{background:var(--teal)}
.stepcount{font-size:var(--fs-sm);font-weight:var(--fw-semibold);letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--teal);margin-bottom:var(--s-2)}
.q{margin-bottom:var(--s-6)}
.q:last-of-type{margin-bottom:0}
label.qt{display:block;font-weight:var(--fw-semibold);color:var(--ink);font-size:var(--fs-lg);margin-bottom:var(--s-2)}
.hint{font-size:var(--fs-md);color:var(--muted);margin-top:6px}
.hint a{color:var(--teal);font-weight:var(--fw-semibold);text-decoration:underline;text-underline-offset:2px}
.opts{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.opts.col{flex-direction:column}
.note{background:var(--blue-lt);border:1px solid var(--border);border-radius:var(--r-2);padding:var(--s-3) var(--s-4);font-size:var(--fs-md);color:var(--body);margin-top:var(--s-3)}
.note b{color:var(--ink)}
.err{color:var(--red);font-size:var(--fs-md);margin-top:var(--s-3);display:none}
.wiznav{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s-6);gap:var(--s-3)}
@media (max-width:560px){.wiznav{gap:var(--s-2)}.wiznav .btn{flex:1;justify-content:center}}

/* ── FAQ: Bento-Liste ─────────────────────────────────────────────
   1:1 aus index.html / kostenrechner.html. Loest die frueheren
   inline-gestylten <details> auf den Tool-Seiten ab, damit die
   FAQ ueberall gleich aussieht. */
.faq-sec{background:transparent;padding:var(--section-py) var(--section-px);position:relative;z-index:2}
.faq-sec::before{content:'';position:absolute;left:18%;right:18%;top:0;height:1px;background:linear-gradient(to right,transparent,rgba(28,43,58,.14),transparent);pointer-events:none}
.faq-in{max-width:820px;margin:0 auto}
.faq-in .section-hdr{max-width:820px;margin-left:auto;margin-right:auto;text-align:center}
.faq-in .section-hdr .lead{max-width:58ch;margin-left:auto;margin-right:auto}
.bento{display:flex;flex-direction:column;max-width:820px;margin:var(--s-10) auto 0;border-top:1px solid var(--border)}
.bento-card{background:transparent;border:none;border-bottom:1px solid var(--border);border-radius:0;padding:0;transition:background 0.3s var(--ease-smooth);position:relative;overflow:hidden;display:block}
.bento-card:hover{background:rgba(61,139,122,0.025)}
.bento-card summary{cursor:pointer;padding:var(--s-5) var(--s-3);display:grid;grid-template-columns:130px 1fr auto;gap:var(--s-4);align-items:center;list-style:none;user-select:none}
.bento-card summary::-webkit-details-marker{display:none}
.bento-card summary::marker{content:''}
.bento-tag{display:inline-block;font-size:11px;font-weight:var(--fw-semibold);letter-spacing:var(--tr-wider);text-transform:uppercase;color:var(--teal);margin-bottom:0}
.bento-q{font-size:var(--fs-lg);font-weight:var(--fw-medium);letter-spacing:var(--tr-tight);color:var(--ink);line-height:1.35;margin:0}
.bento-chev{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;color:var(--muted);transition:transform 0.3s var(--ease-smooth),color 0.3s var(--ease-smooth)}
.bento-card[open] .bento-chev{transform:rotate(180deg);color:var(--teal)}
.bento-a{padding:0 var(--s-3) var(--s-5) calc(130px + var(--s-4) + var(--s-3));max-width:70ch;color:var(--body);line-height:var(--lh-relaxed);font-size:var(--fs-base);margin:0}
.bento-a em{font-style:normal;font-weight:var(--fw-semibold);color:var(--ink);background:linear-gradient(to bottom,transparent 60%,var(--teal-lt2) 60%);padding:0 2px}
.bento-a a{color:var(--teal);font-weight:var(--fw-semibold);text-decoration:underline;text-underline-offset:2px}
@media (max-width:720px){
.bento-card summary{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-2);grid-template-columns:unset}
.bento-tag{font-size:10px;flex-shrink:0;max-width:28%}
.bento-q{flex:1;font-size:var(--fs-md);line-height:1.3}
.bento-a{padding:0 var(--s-2) var(--s-4) var(--s-2);font-size:var(--fs-sm)}
.bento-card:hover{background:transparent}
}
/* Auf schmalen Tool-Seiten sitzt die FAQ in der .page-shell, nicht in
   einer eigenen Vollbreiten-Sektion — dann keine doppelte Polsterung. */
.page-shell .faq-sec{padding-left:0;padding-right:0}

/* ── Toolkit-Leiste (drei Rechner, Duktus der Startseite) ─────────
   Ersetzt die fehlende Querverlinkung zwischen den Tools. Das
   jeweils eigene Tool bekommt .tk-col--self und ist nicht klickbar. */
.tk-sec-tools{border-top:1px solid var(--border);margin-top:var(--s-16);padding-top:var(--s-12)}


/* ── Bewegung ─────────────────────────────────────────────────────
   Gesteuert wird ausschliesslich von /css/kv-reveal.css + kv-reveal.js
   (Attribute data-rv / data-rv-i, Klassen .rv-armed / .rv-in).

   WICHTIG — hier stand frueher:
       .js .reveal{opacity:0}
       .js .reveal.vis{opacity:1}
   Das gehoerte zum alten One-Shot-Observer, der die Klasse .vis
   gesetzt hat. kv-reveal.js setzt .vis NICHT. Beides zusammen haette
   jedes .reveal dauerhaft auf opacity:0 stehen lassen — also die
   halbe Seite unsichtbar. Die Regeln sind deshalb entfernt.

   .reveal bleibt als Markup-Haken bestehen: kv-reveal.js adoptiert
   diese Elemente und vergibt ihnen data-rv-i. Ohne JavaScript ist
   alles sichtbar — das ist der gewollte sichere Grundzustand. */

/* Hero-Auftritt: laeuft unabhaengig vom Scroll-System, direkt beim Laden. */
@keyframes slideUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.page-hero-in>.eyebrow{animation:slideUp var(--dur-entrance) 0.05s var(--ease-out) backwards}
.page-hero-in>.h-section,.page-hero-in>h1{animation:slideUp var(--dur-entrance) 0.15s var(--ease-out) backwards}
.page-hero-in>.lead{animation:slideUp var(--dur-entrance) 0.25s var(--ease-out) backwards}
@media (prefers-reduced-motion:reduce){.page-hero-in>*{animation:none!important}}

:root{--green-lt:#E9F1EC;--amber-lt:#F7F0E2;}

/* ══ NORM-ANGLEICHUNG an index.html (Aug 2026) ═════════════════════════════
   index ist die Referenz: Lesetext 16px/1.7, Sektionsrhythmus ab 1024 auf
   --s-32, Hero schliesst mit --s-16 statt --s-10. Seiten, die body inline
   abweichend setzen, muessen dort ebenfalls angepasst werden — das Inline-
   <style> laedt nach dieser Datei. */
body{font-size:16px;line-height:1.7}

@media (min-width:1024px){
  :root{--section-py:var(--s-32)}
}

.page-hero{padding-bottom:var(--s-24)}

/* ══ HERO-ANATOMIE wie index (Aug 2026) ═══════════════════════════════════
   index fuehrt im Hero keine eyebrow: die H1 traegt die Aussage, die Sub-
   Zeile die Ergaenzung (nur das <em> kursiv/teal), darunter der lead. Das
   Kontextsignal ("kostenlos", "geht schnell") sitzt am Werkzeug — auf index
   ist das .wz-pick-lbl ueber den Auswahlkacheln, hier .tool-lbl an der Karte. */
.page-hero-in>.h-display{margin-bottom:var(--s-6);max-width:20ch}
.page-hero-in>.h-display{animation:slideUp var(--dur-entrance) 0.15s var(--ease-out) backwards}

.tool-lbl{font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  letter-spacing:var(--tr-wider);text-transform:uppercase;color:var(--teal);
  margin-bottom:var(--s-4)}
.card>.tool-lbl:first-child{margin-top:0}

/* Trust-Leiste im Hero — 1:1 die Werte von index. */
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);
  margin-top:var(--s-5);font-size:var(--fs-sm);color:var(--muted);
  font-weight:var(--fw-regular);
  animation:slideUp var(--dur-entrance) 0.35s var(--ease-out) backwards}
.hero-trust strong{color:var(--ink);font-weight:var(--fw-semibold)}
.hero-trust .ti{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.hero-trust .mdot{width:3px;height:3px;border-radius:50%;background:var(--border);flex-shrink:0}
.hero-trust svg{color:var(--teal);flex-shrink:0}
@media (max-width:640px){
  .hero-trust{gap:var(--s-2) var(--s-3);font-size:var(--fs-xs)}
  .hero-trust .mdot{display:none}
}


/* ══ Hero mit Illustration (Toolseiten) ═══════════════════════════════════
   .page-hero-in--split: Text links, Illustration rechts; am Handy darunter. */
.page-hero-in--split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);column-gap:var(--s-12);align-items:center}
.page-hero-in--split>*{grid-column:1}
.page-hero-in--split>.hero-illu{grid-column:2;grid-row:1/span 4;animation:slideUp var(--dur-entrance) .35s var(--ease-out) backwards}
.hero-illu svg{width:100%;height:auto;display:block}
@media (max-width:900px){
  .page-hero-in--split{grid-template-columns:1fr}
  .page-hero-in--split>.hero-illu{grid-column:1;grid-row:auto;max-width:440px;margin:var(--s-6) auto 0}
}

/* ══ Hero Strom — Stecker rein, Impuls, Gerät wacht auf, Etikett zählt ═══
   Eine 8-s-Schleife, alle Zeiten in Prozent der Schleife:
   8–24 % Stecker fährt ein · 24 % Kontakt · 26–36 % grüner Impuls · 34 % LED
   36–44 % Lamelle öffnet · 40–92 % Luft · 44/50/56 % A → A+ → A++ → A+++ */
.ks-wall{stroke:#D9DDDA;stroke-width:1.5}
.ks-wall-side{stroke-width:1.2}
.ks-plug{animation:ksPlug 8s var(--ease-smooth) infinite}
.ks-cable{stroke-dasharray:100;animation:ksCable 8s var(--ease-smooth) infinite}
.ks-pulse{stroke-dasharray:12 100;stroke-dashoffset:12;opacity:0;animation:ksPulse 8s linear infinite}
.ks-socket-glow{fill:none;stroke:#3D8B7A;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:ksGlow 8s ease-out infinite}
.ks-led{fill:#C9CFCB;animation:ksLed 8s linear infinite}
.ks-led-halo{fill:none;stroke:#3D8B7A;stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;animation:ksLedHalo 8s ease-out infinite}
.ks-flap{transform-box:fill-box;transform-origin:50% 0;animation:ksFlap 8s var(--ease-smooth) infinite}
.ks-air path{opacity:0;animation:ksAir 8s linear infinite,ksAirWave 1.7s ease-in-out infinite}
.ks-air-2{animation-delay:.12s,.3s}
.ks-air-3{animation-delay:.24s,.6s}
.ks-cls{opacity:0}
.ks-cls-0{animation:ksCls0 8s linear infinite}
.ks-cls-1{animation:ksCls1 8s linear infinite}
.ks-cls-2{animation:ksCls2 8s linear infinite}
.ks-cls-3{animation:ksCls3 8s linear infinite}
@keyframes ksPlug{0%,8%{transform:translateX(-40px)}24%,94%{transform:translateX(0)}100%{transform:translateX(-40px)}}
@keyframes ksCable{0%,8%{stroke-dashoffset:17}24%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:17}}
@keyframes ksPulse{0%,25%{opacity:0;stroke-dashoffset:12}26%{opacity:1}36%{opacity:1;stroke-dashoffset:-100}37%,100%{opacity:0;stroke-dashoffset:-100}}
@keyframes ksGlow{0%,23%{opacity:0;transform:scale(.8)}25%{opacity:.9;transform:scale(1)}33%,100%{opacity:0;transform:scale(1.7)}}
@keyframes ksLed{0%,33%{fill:#C9CFCB}34%,93%{fill:#3D8B7A}94%,100%{fill:#C9CFCB}}
@keyframes ksLedHalo{0%,33%{opacity:0;transform:scale(1)}35%{opacity:.8}45%,100%{opacity:0;transform:scale(3)}}
@keyframes ksFlap{0%,36%{transform:scaleY(1)}44%,93%{transform:scaleY(2.4)}100%{transform:scaleY(1)}}
@keyframes ksAir{0%,40%{opacity:0}44%,90%{opacity:1}94%,100%{opacity:0}}
@keyframes ksAirWave{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes ksCls0{0%,43%{opacity:1}44%,93%{opacity:0}94%,100%{opacity:1}}
@keyframes ksCls1{0%,43%{opacity:0}44%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes ksCls2{0%,49%{opacity:0}50%,55%{opacity:1}56%,100%{opacity:0}}
@keyframes ksCls3{0%,55%{opacity:0}56%,93%{opacity:1}94%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ks-plug,.ks-cable,.ks-pulse,.ks-socket-glow,.ks-led,.ks-led-halo,.ks-flap,.ks-air path,.ks-cls{animation:none!important}
  .ks-plug{transform:none}.ks-cable{stroke-dashoffset:0}.ks-led{fill:#3D8B7A}.ks-flap{transform:scaleY(2.4)}.ks-air path{opacity:1}.ks-cls-3{opacity:1}
}


/* ══ Hero Dimensionierung — Raum als Isometrie, Maße als Etiketten, Kühllast ═
   9-s-Schleife: 0–10 % Boden · 12–28 % Wände stehen auf · 30–46 % Maß-Etiketten
   · 50 % Innengerät · 56 % Volumen · 62 % Kühlung legt sich über den Boden ·
   68 % Kühllast · 76 % Klasse · 94 % Reset */
.kd-all{animation:kdAll 9s linear infinite}
.kd-shadow{fill:#1C2B3A;opacity:0;filter:blur(6px);animation:kdShadow 9s var(--ease-smooth) infinite}
.kd-floor{fill:#FFFFFF;stroke:#1C2B3A;stroke-width:1.4;stroke-linejoin:round;opacity:0;animation:kdFloor 9s var(--ease-smooth) infinite}
.kd-cool{opacity:0;animation:kdCool 9s var(--ease-smooth) infinite}
.kd-wall{stroke:#1C2B3A;stroke-width:1.2;stroke-linejoin:round;opacity:0;animation:kdWall 9s var(--ease-smooth) infinite}
.kd-wall-r{animation-name:kdWallR}
.kd-edge{fill:none;stroke:#1C2B3A;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;animation:kdEdge 9s var(--ease-smooth) infinite}
.kd-edge-2{animation-name:kdEdge2}
.kd-dim{opacity:0;animation:kdDim 9s var(--ease-smooth) infinite}
.kd-dim .kd-hl,.kd-dim .kd-em{stroke:#98A1AD;stroke-width:.9;stroke-linecap:round}
.kd-dim .kd-ml{stroke:#3D8B7A;stroke-width:1.2;stroke-linecap:round;stroke-dasharray:100;animation:kdDimLine 9s var(--ease-smooth) infinite}
.kd-dim rect{fill:#FFFFFF}
.kd-dim text{font-family:inherit;font-size:10.5px;font-weight:600;fill:#1C2B3A;text-anchor:middle;font-variant-numeric:tabular-nums}
.kd-vol,.kd-res,.kd-cls{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.kd-vol{animation:kdVol 9s var(--ease-smooth) infinite}
.kd-res{animation:kdRes 9s var(--ease-smooth) infinite}
.kd-cls{animation:kdCls 9s var(--ease-smooth) infinite}
.kd-res rect{fill:#1C2B3A}
.kd-r1{font-family:inherit;font-size:8.5px;font-weight:600;fill:#B9C0C6;letter-spacing:.08em}
.kd-r2{font-family:inherit;font-size:16px;font-weight:700;fill:#FFFFFF}
.kd-r3{font-family:inherit;font-size:10px;fill:#B9C0C6}
.kd-t1{font-family:inherit;font-size:13px;font-weight:700;fill:#1C2B3A}
.kd-t2{font-family:inherit;font-size:10.5px;fill:#7C838C}
@keyframes kdAll{0%,93%{opacity:1}97%,100%{opacity:0}}
@keyframes kdShadow{0%,3%{opacity:0}13%,100%{opacity:.14}}
@keyframes kdFloor{0%{opacity:0;transform:translateY(8px)}9%,100%{opacity:1;transform:translateY(0)}}
@keyframes kdWall{0%,24%{opacity:0;transform:translateY(5px)}34%,100%{opacity:1;transform:translateY(0)}}
@keyframes kdEdge{0%,9%{stroke-dashoffset:100}23%,100%{stroke-dashoffset:0}}
@keyframes kdDim{0%,50%{opacity:0}57%,100%{opacity:1}}
@keyframes kdDimLine{0%,50%{stroke-dashoffset:100}64%,100%{stroke-dashoffset:0}}
@keyframes kdWallR{0%,28%{opacity:0;transform:translateY(5px)}38%,100%{opacity:1;transform:translateY(0)}}
@keyframes kdEdge2{0%,13%{stroke-dashoffset:100}26%,100%{stroke-dashoffset:0}}
@keyframes kdVol{0%,60%{opacity:0;transform:translateY(6px)}66%,100%{opacity:1;transform:translateY(0)}}
@keyframes kdRes{0%,70%{opacity:0;transform:translateY(6px)}77%,100%{opacity:1;transform:translateY(0)}}
@keyframes kdCls{0%,76%{opacity:0;transform:translateY(6px)}82%,100%{opacity:1;transform:translateY(0)}}
@keyframes kdCool{0%,38%{opacity:0}48%,100%{opacity:1}}
@keyframes kdFade{0%,75%{opacity:0;transform:translateY(6px)}82%,100%{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .kd-all,.kd-shadow,.kd-floor,.kd-cool,.kd-wall,.kd-edge,.kd-dim,.kd-dim .kd-ml,.kd-vol,.kd-res,.kd-cls{animation:none!important}
  .kd-shadow{opacity:.14}.kd-floor,.kd-cool,.kd-wall,.kd-dim,.kd-vol,.kd-res,.kd-cls{opacity:1;transform:none}.kd-dim .kd-ml{stroke-dashoffset:0}.kd-edge{stroke-dashoffset:0}.kd-air{display:none}
}


/* ══ Hero Schall — Außengerät läuft an, Wellen laufen zur Grundgrenze ═════
   9-s-Schleife: 0–6 % Wand + Gerät · 8 % Lüfter dreht · 10–90 % Wellen (2,4-s-
   Takt) · 18/28/38 % 1 m · 5 m · 10 m mit Pegel · 46 % Grenze + Fenster ·
   54 % Ergebniskarte · 94 % Reset. Pegel nach der Formel dieser Seite. */
.kc-ground{stroke:#C9CFCB;stroke-width:1.5}
.kc-unit,.kc-scale line,.kc-border,.kc-res,.kc-m{opacity:0}
.kc-unit{animation:kcIn 9s var(--ease-smooth) infinite}
.kc-scale line{animation:kcScale 9s linear infinite}
/* Seitenansicht: der Lüfter ist nicht sichtbar — Betrieb zeigen LED, ein leises
   Schwingen des Gehäuses und der Luftstrom aus dem Gitter */
.kc-led{fill:#C9CFCB;animation:kcLed 9s linear infinite}
.kc-body{animation:none}
.kc-air{opacity:0;animation:kcAirGate 9s linear infinite}
.kc-a{stroke:#3D8B7A;stroke-width:1.6;stroke-linecap:round;opacity:0;animation:kcAir 1.3s linear infinite}
.kc-a-2{animation-delay:.3s}.kc-a-3{animation-delay:.6s}
@keyframes kcLed{0%,7%{fill:#C9CFCB}8%,93%{fill:#3D8B7A}94%,100%{fill:#C9CFCB}}
@keyframes kcAir{0%{transform:translateX(0);opacity:0}20%{opacity:.8}100%{transform:translateX(22px);opacity:0}}
@keyframes kcAirGate{0%,14%{opacity:0}16%,92%{opacity:1}93%,100%{opacity:0}}
.kc-w{stroke:#3D8B7A;stroke-width:2;stroke-linecap:round;transform-box:fill-box;transform-origin:0% 50%;opacity:0;animation:kcWave 2.4s linear infinite,kcWaveGate 9s linear infinite}
.kc-w-2{animation-delay:.8s,0s}
.kc-w-3{animation-delay:1.6s,0s}
.kc-m line{stroke:#7C838C;stroke-width:1}
.kc-mt{font-family:inherit;font-size:10.5px;font-weight:600;fill:#7C838C}
.kc-db{font-family:inherit;font-size:12px;font-weight:700;fill:#1C2B3A}
.kc-db--ok{fill:#3D8B7A}
.kc-m-1{animation:kcM1 9s var(--ease-smooth) infinite}
.kc-m-2{animation:kcM2 9s var(--ease-smooth) infinite}
.kc-m-3{animation:kcM3 9s var(--ease-smooth) infinite}
.kc-bt{font-family:inherit;font-size:8.5px;font-weight:600;letter-spacing:.1em;fill:#7C838C}
.kc-border{animation:kcBorder 9s var(--ease-smooth) infinite}
.kc-res{transform-box:fill-box;transform-origin:50% 100%;animation:kcRes 9s var(--ease-smooth) infinite}
.kc-r1{font-family:inherit;font-size:8.5px;font-weight:600;letter-spacing:.08em;fill:#B9C0C6}
.kc-r2{font-family:inherit;font-size:16px;font-weight:700;fill:#FFFFFF}
.kc-r3{font-family:inherit;font-size:7.5px;fill:#B9C0C6}
@keyframes kcIn{0%{opacity:0;transform:translateX(-6px)}6%,93%{opacity:1;transform:translateX(0)}97%,100%{opacity:0}}
@keyframes kcScale{0%,10%{opacity:0}14%,93%{opacity:1}96%,100%{opacity:0}}
@keyframes kcWave{0%{transform:scale(.3);opacity:0}12%{opacity:.85}100%{transform:scale(4.1);opacity:0}}
@keyframes kcWaveGate{0%,15%{visibility:hidden}17%,92%{visibility:visible}93%,100%{visibility:hidden}}
@keyframes kcM1{0%,18%{opacity:0;transform:translateY(4px)}22%,93%{opacity:1;transform:translateY(0)}96%,100%{opacity:0}}
@keyframes kcM2{0%,28%{opacity:0;transform:translateY(4px)}32%,93%{opacity:1;transform:translateY(0)}96%,100%{opacity:0}}
@keyframes kcM3{0%,38%{opacity:0;transform:translateY(4px)}42%,93%{opacity:1;transform:translateY(0)}96%,100%{opacity:0}}
@keyframes kcBorder{0%,46%{opacity:0}52%,93%{opacity:1}96%,100%{opacity:0}}
@keyframes kcRes{0%,54%{opacity:0;transform:translateY(6px)}60%,93%{opacity:1;transform:translateY(0)}96%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .kc-unit,.kc-scale line,.kc-led,.kc-body,.kc-air,.kc-a,.kc-w,.kc-m,.kc-border,.kc-res{animation:none!important}
  .kc-led{fill:#3D8B7A}.kc-a{display:none}
  .kc-unit,.kc-scale line,.kc-m,.kc-border,.kc-res{opacity:1}.kc-w{opacity:.5;transform:scale(2.5)}.kc-w-2{transform:scale(4)}.kc-w-3{transform:scale(5.5)}
}

/* ══ Dimensionierung auf dem Grundriss (27.8.2026) ═══════════════════════
   Plan-Bühne aus kv-plan.css; hier nur Karte, Raumzeilen und Skalenpunkte. */
.dim-card{padding-bottom:var(--s-6)}
.dim-card .kv-plan-host{margin:var(--s-3) calc(-1 * var(--s-7)) 0}
.dim-raeume{display:grid;gap:8px;margin-top:var(--s-5)}
.dim-raum{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:center;
  background:var(--white);border:1px solid var(--teal-lt2);border-radius:var(--r-2);padding:10px 14px}
.dim-raum-k{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink)}
.dim-raum-n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  background:var(--teal);color:#fff;font-size:11px;font-weight:var(--fw-bold)}
.dim-raum-fl{color:var(--muted);font-size:13px}
.dim-raum-k,.dim-raum-h{grid-column:1}
.dim-raum-w{grid-column:2;grid-row:1 / span 2;text-align:right;line-height:1.15}
.dim-raum-w b{font-size:19px;font-weight:var(--fw-semibold);color:var(--ink);font-variant-numeric:tabular-nums}
.dim-raum-w small{display:block;font-size:11.5px;color:var(--teal-d);margin-top:2px;white-space:nowrap}
.dim-raum-h{font-size:12px;color:var(--muted);line-height:1.45}
.dim-matrix{margin:var(--s-5) 0 0;font-size:12px;color:var(--muted);line-height:1.55}
.dim-matrix b{color:var(--body);font-weight:var(--fw-medium)}
.kwscale-dot{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  background:var(--teal);color:#fff;font-size:10px;font-weight:var(--fw-bold);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px var(--white)}
@media (max-width:760px){
  .dim-card .kv-plan-host{margin-left:calc(-1 * var(--s-5));margin-right:calc(-1 * var(--s-5))}
  .dim-raum{grid-template-columns:1fr;gap:4px}
  .dim-raum-w{grid-column:1;grid-row:auto;text-align:left;display:flex;align-items:baseline;gap:10px}
  .dim-raum-w small{margin:0}
}

/* ══ kW/BTU↔m²-Tabelle Dimensionierung (27.8.2026) ═══════════════════════ */
.kw-m2-wrap{max-width:760px;margin-top:var(--s-7)}
.kw-m2-h{font-size:19px;font-weight:var(--fw-semibold);color:var(--ink);margin:0 0 6px}
.kw-m2-s{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 14px}
.kw-m2-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.kw-m2{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
.kw-m2 th,.kw-m2 td{padding:10px 12px;text-align:center;border-bottom:1px solid var(--border)}
.kw-m2 th:first-child,.kw-m2 td:first-child{text-align:left;white-space:nowrap}
.kw-m2 thead th{font-size:11.5px;font-weight:var(--fw-semibold);color:var(--muted);vertical-align:bottom;line-height:1.3}
.kw-m2 thead th span{font-weight:var(--fw-regular);font-size:10.5px;opacity:.85}
.kw-m2 tbody td{color:var(--body);font-variant-numeric:tabular-nums}
.kw-m2 tbody td:first-child b{color:var(--ink)}
.kw-m2 tbody tr:last-child td{border-bottom:none}
.kw-m2-note{font-size:12px;line-height:1.55;color:var(--muted);margin:12px 0 0}

.dim-raum-fk{color:var(--muted)}