/* Wärmepumpenrechner: Gestaltung lokal auf dieser Seite. */
:root{--accent:#137c73;--accent-dark:#12574f;--accent-soft:#e8f3ee;--wp-ink:#203f43;--wp-muted:#607875;--wp-line:#e0e8e1}
body.bg-gray-100{background:#f4f6f1;color:var(--wp-ink)}
.wp-shell{max-width:1240px;background:transparent;box-shadow:none;border-radius:0;overflow:visible}
.wp-shell>.w-full{padding:28px 24px 44px}
.wp-intro{text-align:left;padding:4px 0 26px;max-width:1000px}
.wp-eyebrow{display:block;font-size:10px;font-weight:700;letter-spacing:.13em;color:#60786c;line-height:1.6}
.wp-intro h1{font-size:clamp(30px,4vw,46px);letter-spacing:-.045em;line-height:1.2;color:#203f43;margin-top:10px;font-weight:600}
.wp-intro>p:first-of-type{font-size:15px;line-height:1.7;color:#5d7471;margin-top:12px}
.wp-intro>p:last-of-type{font-size:10px;line-height:1.6;color:#6d7c72;max-width:820px;margin-top:8px}
#progress-bar{counter-reset:step;border:1px solid var(--wp-line);border-radius:14px;background:#fff;padding:8px;gap:7px;margin-bottom:24px}
.step-indicator{display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 8px;border:0;border-radius:9px;font-size:12px;color:#6b7b74;background:transparent;text-align:left;font-weight:600}
.step-indicator::before{counter-increment:step;content:'0' counter(step);font-size:10px;font-weight:700;display:grid;place-items:center;border:1px solid #dfe7df;width:26px;height:26px;border-radius:50%;flex-shrink:0}
.step-indicator.active{background:#edf4ee;color:#205d51;font-weight:600;border:0}
.step-indicator.active::before{background:#236b5b;color:white;border-color:#236b5b}
.step-indicator.completed{color:#23735f;border:0}.step-indicator.completed::before{content:'✓';background:#e7f3e9;border-color:#c9e2d0}
.step-indicator:disabled{cursor:default;color:#8d9b94}
.scene-card{padding:0;background:#fff;border:1px solid #dbe5da;border-radius:22px;box-shadow:0 12px 35px -25px #284c3c35;overflow:hidden;margin-bottom:30px}
.scene-head{padding:23px 26px 20px;align-items:center;gap:18px;margin:0;border-bottom:1px solid #e8eee5}
.scene-title{font-size:24px;line-height:1.3;letter-spacing:-.035em;font-weight:600;color:var(--wp-ink);margin-top:6px}
.scene-sub{font-size:12px;color:#728379;margin-top:7px;line-height:1.5}
.live-dot{display:inline-block;width:6px;height:6px;background:#3e9474;border-radius:50%;box-shadow:0 0 0 4px #e6f1e7;margin:0 7px 1px 3px}
.scene-actions{display:flex;gap:8px;flex-wrap:wrap}.scene-toggle{font-size:10px;padding:8px 11px;border:1px solid #dde6dc;border-radius:7px;background:#fff;color:#4d695c;text-decoration:none;line-height:1.4}.scene-toggle:hover{background:#f0f5ed}
.scene-dashboard{display:grid;grid-template-columns:minmax(0,1fr) 240px}
.scene-landscape{min-width:0;display:flex;flex-direction:column;background:#f2f6f0;justify-content:center}
#wp-scene{background:transparent;border-radius:0;aspect-ratio:900 / 440;width:100%;height:auto}
.scene-legend{display:flex;gap:18px;align-items:center;padding:12px 22px;color:#5e776d;font-size:10px;background:#f7f9f3;flex-wrap:wrap;border-top:1px solid #e9ede2}
.scene-legend span{display:flex;align-items:center;gap:6px}.scene-legend i{width:7px;height:7px;border-radius:50%}.scene-scale{margin-left:auto;color:#7b8a7e;font-size:9px}
.energy-panel{padding:25px 23px;background:#fcfcf7;border-left:1px solid #e4eadf;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center}
.energy-panel>.wp-eyebrow{font-size:9px}.energy-panel h3{font-size:22px;line-height:1.3;letter-spacing:-.035em;margin:9px 0 16px;color:#294b43;font-weight:600}
.energy-ring{width:132px;height:132px;border-radius:50%;background:conic-gradient(#269c8c 0 var(--share),#ddb966 var(--share) 100%);padding:9px;transform:rotate(-90deg);box-shadow:0 0 0 5px #eff3e9}
.energy-ring>div{background:#fcfcf7;border-radius:50%;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(90deg)}
.energy-ring strong{font-size:35px;line-height:1.1;color:#245b4e;letter-spacing:-.06em;font-weight:600;font-variant-numeric:tabular-nums}.energy-ring small{font-size:16px;margin-left:3px}.energy-ring span{font-size:9px;color:#718579;margin-top:4px}
.energy-equation{display:flex;align-items:center;flex-direction:column;margin:17px 0 9px;font-size:12px;color:#7e6d46;gap:1px}.energy-equation>b{color:#9fae9e;font-weight:400}.energy-equation strong{font-size:16px;color:#2e5f50;font-weight:600}
.energy-panel p{font-size:10px;line-height:1.6;color:#718071;max-width:176px}
.energy-key{width:100%;display:grid;gap:7px;font-size:10px;color:#5d7366;padding-top:15px;margin-top:13px;border-top:1px solid #e0e7d9}.energy-key span{display:flex;align-items:center;gap:6px}.energy-key i{width:6px;height:6px;border-radius:50%;background:#269c8c}.energy-key span+span i{background:#ddb966}.energy-key b{margin-left:auto;font-variant-numeric:tabular-nums}
.scene-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:20px 12px;margin:0;border-top:1px solid #e3e9dd}
.sc-chip{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:5px;padding:0 18px;border:0;border-right:1px solid #e3e9dd;border-radius:0;background:none;font-size:10px;color:#6c7e72;position:relative}
.sc-chip:last-child{border:0}.sc-chip b{font-size:19px;letter-spacing:-.035em;font-weight:600}.sc-chip>span{font-size:9px}.sc-chip.waerme b{color:#b5684c}.sc-chip.strom b{color:#a68034}.sc-chip.umwelt b{color:#238d7c}.sc-chip.jaz b{color:#2c6559}
.scene-cost-wrap{display:grid;grid-template-columns:1fr 1.6fr;align-items:center;gap:25px;padding:23px 28px;background:#fbfcf8;border-top:1px solid #e3e9dd}
.cost-heading p{font-size:16px;letter-spacing:-.025em;color:#2f5047;font-weight:600;margin-top:4px}.cost-heading>span:last-child{font-size:10px;color:#778572;display:block;margin-top:6px}
.sc-bars{width:100%;max-width:none;margin:0;gap:9px}.sc-bar{grid-template-columns:106px 1fr 80px;font-size:11px;gap:12px}.sc-bar-t{height:8px;background:#e8eee3}.sc-bar-f{background:#a7b3a4}.sc-bar-f.wp{background:linear-gradient(90deg,#79b4a1,#268879)}.sc-bar-v{font-size:11px;color:#355248}.sc-bar-diff{text-align:right;font-size:10px;margin-top:3px;font-weight:500}.sc-bar-diff.plus{color:#27816a}.sc-bar-diff.minus{color:#b36d36}
#wpcalc>.form-step{border:1px solid var(--wp-line);border-radius:20px;padding:28px;background:#fff}
#wpcalc h2{color:var(--wp-ink);letter-spacing:-.025em;font-size:23px;font-weight:600}
.mode-tabs{gap:6px}.mode-tab{border-radius:11px;background:#f9faf6;border-color:#e0e7dc;padding:12px 18px}.mode-tab.active{background:#edf5ee;border-color:#6e9f8b;color:#246250}.mode-tab .mt-hint{font-size:10px;color:#748075;margin-top:4px}
.preset-btns{gap:7px;margin-bottom:22px}.preset-btn{border-radius:8px;background:#f7f9f4;border-color:#e2e8dc;font-size:11px;padding:10px 13px}.preset-btn.active{background:#2b7060;border-color:#2b7060}
#wpcalc input:not([type=range]):not([type=checkbox]):not([type=radio]),#wpcalc select{border-radius:9px;border-color:#d9e2d8;background:#fbfcf8;min-height:42px}
#wpcalc input[type=range]{accent-color:#27836f;cursor:pointer}#wpcalc input[type=checkbox]{accent-color:#27836f}
.type-card{border-radius:13px;background:#f9faf6;border-color:#e0e7db;padding:18px 10px;transition:background .2s,border-color .2s,transform .2s}
.type-card:hover{transform:translateY(-2px)}.type-card.active{background:#eaf4ec;border-color:#71a28b;box-shadow:0 0 0 1px #71a28b}.type-card .tc-i{width:53px;height:37px;margin-bottom:10px;color:#648376}.type-card.active .tc-i{color:#28705d}
.type-card .tc-t{color:#2c4a42}.type-card .tc-d{color:#708074}.next-btn,#calc-btn{border-radius:10px;background:#246c5d!important;font-size:13px;padding:12px 24px;box-shadow:0 4px 9px #246c5d18}.prev-btn{border-radius:10px;font-size:13px}
.slider-row{background:#f6f9f2;border-color:#e1e8da;border-radius:11px}.slider-row .badge{border-radius:6px;background:#e8f1e5;color:#386951}
.ergebnis-wrapper{max-width:none;padding:0;margin-top:16px;background:none;border:0}.hero-card{border-radius:17px;padding:28px;background:linear-gradient(120deg,#20535c,#347d78);box-shadow:none}.hero-card.saving{background:linear-gradient(120deg,#234e40,#39816a)}.hero-card.extra{background:linear-gradient(120deg,#785234,#a57749)}.hero-val{font-weight:600;letter-spacing:-.05em;text-shadow:none}.hero-jaz{border-radius:12px}.hero-label{font-size:10px}.kpi-card{border-color:#e2e7dd;border-radius:12px;padding:20px 10px;text-align:left}.kpi-label{font-size:9px;letter-spacing:.04em}.kpi-val{font-size:23px;color:#345749;letter-spacing:-.025em}.kpi-sub{font-size:10px}
.chart-box{border-color:#e0e7db;border-radius:15px;padding:22px}.chart-title{font-size:16px;color:#315146;letter-spacing:-.02em}.chart-sub{font-size:11px;line-height:1.6}.chart-svg{height:auto;aspect-ratio:600 / 260}.cmp-row-wp{background:#e9f3e8}.cmp-row-wp td{color:#2b6650}.invest-result,.invest-grid input,.invest-grid select{border-color:#e0e7db;background:#f8faf4;border-radius:9px}.hinweis-box{border-radius:9px;border-left-width:3px}
.kurz-box,.faq-details,.seo-block,.autor-box,.quellen{max-width:1108px}.kurz-box,.faq-details details,.next-card{border-color:#e0e7da;border-radius:13px}.kurz-box{margin-top:28px}.next-card:hover{border-color:#75a390;box-shadow:0 5px 20px #345d4310}
.scene-card.motion-paused *{animation-play-state:paused!important}.scene-card.zu .scene-head{border-bottom:0}.scene-card.zu #scene-motion{display:none}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #72ac99;outline-offset:3px}
@media(min-width:1000px){#wpcalc>.form-step:not([data-step="3"]){padding:32px 70px}}
@media(max-width:900px){.scene-dashboard{grid-template-columns:minmax(0,1fr) 205px}.energy-panel{padding:18px 15px}.energy-panel h3{font-size:19px}.energy-ring{width:112px;height:112px}.energy-key{display:none}.scene-head{padding:20px}.scene-title{font-size:22px}.scene-cost-wrap{grid-template-columns:1fr 1.4fr;padding:20px}.sc-chip b{font-size:16px}.scene-legend{gap:12px;padding:10px 14px}.scene-scale{display:none}}
@media(max-width:680px){.wp-shell>.w-full{padding:17px 5px 30px}.wp-intro{padding:5px 7px 21px}.wp-intro h1{font-size:32px}.wp-intro>p:first-of-type{font-size:13px}.wp-intro .wp-eyebrow{font-size:8px}.step-indicator{flex-direction:column;gap:6px;padding:8px 3px;text-align:center;font-size:9px;line-height:1.3}.step-indicator::before{width:23px;height:23px;font-size:9px}#progress-bar{padding:5px;gap:3px;margin-bottom:16px}.scene-head{padding:19px 16px;gap:13px}.scene-title{font-size:23px}.scene-sub{font-size:11px}.scene-actions{width:100%}.scene-dashboard{grid-template-columns:1fr}.energy-panel{border-left:0;border-top:1px solid #e4eadf;display:grid;grid-template-columns:105px 1fr;text-align:left;gap:4px 18px;padding:19px 22px}.energy-panel>.wp-eyebrow{grid-column:2;grid-row:1}.energy-panel h3{display:none}.energy-ring{grid-column:1;grid-row:1 / 4;width:99px;height:99px;padding:7px}.energy-ring strong{font-size:29px}.energy-ring span{font-size:8px}.energy-equation{grid-column:2;grid-row:2;align-items:flex-start;margin:3px 0;gap:3px}.energy-equation>b{display:none}.energy-equation strong{font-size:17px}.energy-panel p{grid-column:2;grid-row:3;max-width:230px;font-size:10px}.scene-chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 0;padding:19px 5px}.sc-chip{padding:0 15px;align-items:flex-start;font-size:10px;justify-content:flex-start}.sc-chip:nth-child(2){border:0}.sc-chip b{font-size:18px}.scene-cost-wrap{grid-template-columns:1fr;gap:17px;padding:19px}.sc-bar{grid-template-columns:93px 1fr 71px;gap:9px;font-size:10px}.sc-bar-v{font-size:10px}.sc-bar-diff{font-size:10px;text-align:left;line-height:1.6}.scene-legend{font-size:9px;justify-content:center}.scene-card{border-radius:17px;margin-bottom:19px}#wpcalc>.form-step{padding:22px 15px;border-radius:17px}#wpcalc h2{font-size:21px}.mode-tab{flex:1;padding:11px 9px;font-size:12px}.preset-btn{font-size:10px;padding:9px 10px}.type-card{padding:15px 9px}.chart-box{padding:15px 9px}.chart-title,.chart-sub{padding:0 5px}.hero-val{font-size:46px}.hero-card{padding:24px 19px}.kpi-card{padding:16px 11px}.kpi-val{font-size:21px}.kpi-label{font-size:8px}.tooltip-text{max-width:260px}.scene-actions .scene-toggle{font-size:10px}.cost-heading p{font-size:17px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}#scene-motion{display:none}}
@media print{body.bg-gray-100{background:white}.wp-shell{max-width:none}.wp-intro{padding-bottom:10px}.scene-actions{display:none}.scene-dashboard{grid-template-columns:1fr 190px}.scene-card{box-shadow:none;break-inside:avoid}.energy-panel{display:flex}.energy-key{display:none}.scene-cost-wrap{grid-template-columns:1fr 1.5fr}#wpcalc>.form-step{padding:12px}.energy-ring{print-color-adjust:exact;-webkit-print-color-adjust:exact}.scene-chips{grid-template-columns:repeat(4,1fr)}.sc-chip b{font-size:14px}}
.tooltip-text{white-space:normal;overflow-wrap:break-word}.tooltip:focus-within .tooltip-text{visibility:visible;opacity:1}
.type-card:focus-visible,.chart-scroll:focus-visible{outline:3px solid #72ac99;outline-offset:3px}
.chart-scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.chart-pan-hint{display:none}
@media(max-width:680px){.chart-scroll .chart-svg{min-width:520px}.chart-pan-hint{display:block;font-size:10px;color:#778673;text-align:right;margin:4px 3px 10px}.chart-box .flex.text-sm{font-size:11px;gap:12px}.slider-row input[type=range]{min-width:85px}}
@media print{.chart-scroll{overflow:visible}.chart-scroll .chart-svg{min-width:0}.chart-pan-hint{display:none}}

/* ══ Marke 2026-10 (UI-Angleichung 06.10.2026) ══════════════════════════════
   Grün/Türkis der Bedienoberfläche → Marineblau, Hauptknöpfe orange,
   Kopfbereich als Kopfband wie Ratgeber/Startseite. Die Rechnerfläche ist auch
   im Dunkelmodus hell – Markenwerte dort fest auf die hellen Werte.
   Bleiben bewusst: Live-Szene, Energiering, Kosten-Balken, JAZ-Tacho,
   Diagrammfarben sowie die Statusfarben (Ersparnis grün, Mehrkosten,
   bester Wert in der Vergleichstabelle, plus/minus). */
:root{--accent:#1d3d5f;--accent-dark:#102a43;--accent-soft:#e8eef5;--wp-ink:#1d3d5f;--wp-muted:#5a6f86;--wp-line:#e6e6e3}
.wp-shell{--fw-navy-text:#1d3d5f;--fw-border:#e6e6e3;--fw-border-str:#d4d4d0}
body.bg-gray-100{background:#f5f6f8;color:#1f2937}
/* Kopfband */
.wp-intro{max-width:none;background:var(--fw-navy);color:#fff;border-radius:14px;padding:2rem 2.2rem;margin-bottom:24px}
.wp-intro .wp-eyebrow{color:#c9d6e4;font-weight:600;letter-spacing:.12em;font-size:.74rem}
.wp-intro h1{color:#fff;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.wp-intro h1 em{font-style:normal;color:var(--fw-orange-hell)}
.wp-intro>p:first-of-type{color:#dbe4ee}
.wp-intro>p:last-of-type{color:#a9bccf}
/* Schritte, Karten, Auswahl */
#progress-bar{border-color:var(--fw-border);border-radius:12px;box-shadow:0 2px 10px rgba(16,42,67,.06)}
.step-indicator{color:#5a6f86}
.step-indicator::before{border-color:#d8e0e9}
.step-indicator.active{background:#eef2f6;color:var(--fw-navy-text)}
.step-indicator.active::before{background:var(--fw-navy-text);border-color:var(--fw-navy-text)}
.step-indicator:disabled{color:#97a3b0}
.scene-card{border-color:var(--fw-border);border-radius:12px;box-shadow:0 2px 10px rgba(16,42,67,.06)}
.scene-head{border-bottom-color:var(--fw-border)}
.scene-title,.energy-panel h3{color:var(--fw-navy-text)}
.scene-toggle{border-color:var(--fw-border-str);border-radius:8px;color:var(--fw-navy-text)}
.scene-toggle:hover{background:#f3f6f9}
#wpcalc>.form-step{border-color:var(--fw-border);border-radius:12px;box-shadow:0 2px 10px rgba(16,42,67,.06)}
#wpcalc h2{color:var(--fw-navy-text);font-weight:800;letter-spacing:-.03em}
.mode-tab{border-color:var(--fw-border);border-radius:8px;background:#f8fafc}
.mode-tab:hover{border-color:var(--fw-navy-text)}
.mode-tab.active{background:#eef2f6;border-color:var(--fw-navy-text);color:var(--fw-navy-text)}
.preset-btn{border-color:var(--fw-border);background:#f8fafc}
.preset-btn:hover{border-color:var(--fw-navy-text);color:var(--fw-navy-text)}
.preset-btn.active{background:var(--fw-navy-text);border-color:var(--fw-navy-text);color:#fff}
#wpcalc input:not([type=range]):not([type=checkbox]):not([type=radio]),#wpcalc select{border-color:#d4dbe3;background:#fbfcfd}
#wpcalc input[type=range],#wpcalc input[type=checkbox]{accent-color:var(--fw-navy-text)}
.type-card{border-color:var(--fw-border);background:#f8fafc}
.type-card:hover{border-color:var(--fw-navy-text)}
.type-card.active{background:#eef2f6;border-color:var(--fw-navy-text);box-shadow:0 0 0 1px var(--fw-navy-text)}
.type-card .tc-i{color:#6b7f95}.type-card.active .tc-i{color:var(--fw-navy-text)}
.type-card .tc-t{color:var(--fw-navy-text)}
.slider-row{background:#f8fafc;border-color:var(--fw-border)}
.slider-row .badge{background:#e8eef5;color:var(--fw-navy-text)}
.tooltip-icon{background-color:#e8eef5;color:var(--fw-navy-text)}
/* Knöpfe: Hauptaktion orange, Nebenaktion als Rahmenknopf */
.next-btn,#calc-btn,button[onclick="window.print()"]{background:var(--fw-orange)!important;color:#fff;border:1px solid var(--fw-orange);border-radius:8px;box-shadow:none}
.next-btn:hover,#calc-btn:hover,button[onclick="window.print()"]:hover{background:var(--fw-orange-dk)!important;border-color:var(--fw-orange-dk)}
.prev-btn,#plz-btn,.wp-shell [data-fw-share-btn]{background:#fff!important;color:var(--fw-navy-text);border:1px solid var(--fw-border-str);border-radius:8px}
.prev-btn:hover,#plz-btn:hover,.wp-shell [data-fw-share-btn]:hover{background:#f3f6f9!important;border-color:var(--fw-navy-text)}
/* Ergebnis- und Hinweiskarten */
.hero-card{border-radius:12px;background:var(--fw-navy)}
.kpi-card,.chart-box,.invest-result{border-color:var(--fw-border);border-radius:12px}
.kpi-card,.chart-box{box-shadow:0 2px 10px rgba(16,42,67,.06)}
.kpi-val,.chart-title,.cost-heading p{color:var(--fw-navy-text)}
.invest-grid input,.invest-grid select{border-color:#d4dbe3;background:#fbfcfd}
.hinweis-box{border-radius:0 12px 12px 0}
/* Infotexte unter dem Rechner */
.kurz-box,.faq-details details,.next-card,.autor-box,.seo-tabelle-wrap{border-color:var(--fw-border);border-radius:12px}
.kurz-box,.autor-box{box-shadow:0 2px 10px rgba(16,42,67,.06)}
.kurz-box h2,.seo-block h2,.seo-block h3{color:var(--fw-navy-text)}
.next-card:hover{border-color:var(--fw-navy-text);box-shadow:0 2px 10px rgba(16,42,67,.08)}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible,.type-card:focus-visible,.chart-scroll:focus-visible{outline-color:#5f7a96}
@media(max-width:680px){.wp-intro{padding:1.4rem 1.2rem}}
@media print{.wp-intro{background:none;color:#000;padding:0 0 10px}.wp-intro h1,.wp-intro h1 em{color:#000}.wp-intro .wp-eyebrow,.wp-intro>p:first-of-type,.wp-intro>p:last-of-type{color:#333}}