/* =====================================================================
   heizung-waermepumpe.css - nur Seitenspezifisches (10.10.2026)
   ---------------------------------------------------------------------
   Laedt NACH stil.css und gewerk.css. Alles Gemeinsame der Gewerkseiten
   steht in gewerk.css (Praefix gk-); hier nur, was es allein auf
   heizung-waermepumpe.html gibt (Praefix wp-):
     1. System-Grafik: die drei Teile fahren beim Scrollen auseinander
        (waagerecht statt senkrecht, sonst wie .gk-schicht)
     2. Thermometer, das auf 55 Grad faellt (.wp-thermo)
     3. Marktpreis-Haeppchen und Foerder-Rechner mit Foerderbalken
     4. Story-Karten-Grafiken (Schallringe, Winter, Zaehler)
     5. Klima/Lueftung-Haeppchen (.wp-zwei)
     6. Ablauf mit sechs Stationen
   Regeln wie gewerk.css: Startzustaende nur unter .js, nur transform,
   opacity und Variablen animiert, Raster-Kinder min-width:0,
   prefers-reduced-motion schaltet alles ab (Block am Ende).
   ===================================================================== */

/* ---- 1. System-Grafik: Aussengeraet (-1) | Speicher (0) | Heizkreis (+1)
   .gk-lage bekommt in gewerk.css translateY(--p * --i * -38px); hier
   waagerecht, weil die Teile nebeneinander stehen. --p setzt gewerk.js. */
.wp-system .gk-lage{transform:translateX(calc(var(--p) * var(--i) * 36px))}
.wp-system .gk-lage-text text{font-size:12.5px}
.wp-system .gk-lage-text text.gk-lage-titel{font-size:12px}
.wp-system .wp-fluss{stroke:var(--sonne);stroke-width:4;fill:none;stroke-linecap:round;
  stroke-dasharray:10 14;stroke-dashoffset:calc(var(--p) * -240px);transition:stroke-dashoffset .18s linear}
.wp-system .wp-fluss-kalt{stroke:#8FB6D9}
.wp-system .wp-grad{opacity:calc(.35 + var(--p) * .65);transition:opacity .25s ease}
@media(max-width:899px){
  .wp-system .gk-lage{transform:translateX(calc(var(--p) * var(--i) * 18px))}
  .wp-system .gk-lage-text text{font-size:13.5px}
}

/* ---- 2. Thermometer: Saeule faellt von 75 auf 55 Grad (.ein setzt
   heizung-waermepumpe.js, drei Wege). Ohne JS: steht auf 55. ---- */
.wp-thermo{display:flex;align-items:center;gap:18px;margin:26px 0 0;padding:16px 20px;
  background:var(--olive-wash);border-radius:14px;min-width:0}
.wp-thermo-svg{flex:0 0 auto;width:34px;height:auto;overflow:visible}
.wp-thermo-svg .wp-queck{fill:#C9521B;transform-origin:50% 118px;transform:scaleY(.58);
  transition:transform 1.9s cubic-bezier(.22,1,.36,1) .3s}
.js .wp-thermo:not(.ein) .wp-queck{transform:scaleY(1)}
.wp-thermo-zahl{flex:0 0 auto;font-family:'Montserrat',sans-serif;font-weight:800;font-size:2rem;letter-spacing:-.04em;
  line-height:1;color:var(--olive-dk);font-variant-numeric:tabular-nums;min-width:3.1ch}
.wp-thermo-zahl small{font-size:.5em;font-weight:800;letter-spacing:0;vertical-align:top;margin-left:2px}
.wp-thermo-text{min-width:0;font-size:.92rem;line-height:1.5;color:var(--olive-dk);font-weight:500}
.wp-thermo-text strong{color:var(--text)}
@media(max-width:480px){.wp-thermo{flex-wrap:wrap;gap:12px 16px}.wp-thermo-text{flex:1 1 100%}}

/* ---- 3a. Marktpreis-Haeppchen ---- */
.wp-kosten{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px 64px;align-items:start}
.wp-kosten>*{min-width:0}
.wp-preis{margin:0 0 10px;font-family:'Montserrat',sans-serif;font-weight:800;letter-spacing:-.04em;line-height:1;
  font-size:clamp(2rem,4.6vw,3.6rem);color:var(--ink)}
.wp-preis small{display:block;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--olive);margin-bottom:10px}
.wp-preis-quelle{margin:0 0 18px;font-size:.8rem;line-height:1.55;color:var(--muted);max-width:46ch}
.wp-kosten-text p{color:#43433F;max-width:48ch;margin:0 0 14px}
.wp-kosten-text p strong{color:var(--text)}
.wp-foerder-satz{margin:18px 0 0;padding:18px 20px;border-left:4px solid var(--sonne);background:#FFF8EA;border-radius:0 14px 14px 0}
.wp-foerder-satz b{display:block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink);margin-bottom:4px}
.wp-foerder-satz span{font-size:.86rem;color:var(--muted);line-height:1.5}
@media(max-width:900px){.wp-kosten{grid-template-columns:1fr;gap:30px}}

/* ---- 3b. Foerder-Rechner ----
   Eingaben links, drei Stichtage rechts. Die Balken (.wp-balken i) sind
   Zuschuss geteilt durch Kosten (--f, 0..1) und wachsen erst, wenn der
   Rechner im Bild ist (.an von heizung-waermepumpe.js). Ohne JavaScript
   steht statt des Rechners ein Ersatztext (.wp-rechner-ohnejs). */
.wp-rechner-wrap{margin-top:44px}
.wp-rechner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0;
  background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:0 24px 60px rgba(16,14,24,.09)}
.wp-rechner>*{min-width:0}
.wp-rechner-ein{padding:30px 30px 26px;border-right:1px solid var(--line);background:#FBFBF8}
.wp-rechner-aus{padding:30px 30px 26px}
.wp-rechner-kopf{display:flex;align-items:center;gap:12px;margin:0 0 20px;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--olive)}
.wp-rechner-kopf svg{width:20px;height:20px;fill:var(--olive);flex:0 0 auto}
.wp-feld{margin:0 0 18px;min-width:0}
.wp-feld:last-child{margin-bottom:0}
.wp-feld>label,.wp-label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin:0 0 8px;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.wp-feld output{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.wp-feld select{width:100%;font:inherit;font-size:.95rem;color:var(--text);background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:12px 40px 12px 14px;-webkit-appearance:none;appearance:none;
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%236E6E68" d="M7 10l5 5 5-5z"/></svg>');
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
.wp-feld select:focus{outline:0;border-color:var(--olive);box-shadow:0 0 0 3px rgba(116,117,70,.18)}
.wp-feld-reihe{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px}
.wp-feld-reihe>*{min-width:0}
input[type=range].wp-regler{width:100%;margin:6px 0 4px;accent-color:var(--olive);cursor:pointer;height:28px;background:transparent}
input[type=range].wp-regler:focus-visible{outline:3px solid var(--olive);outline-offset:4px;border-radius:6px}
.wp-skala{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted)}
.wp-feld .gk-wahl label{font-size:.88rem}
.wp-feld-hilfe{margin:6px 0 0;font-size:.76rem;line-height:1.5;color:var(--muted)}
/* Ergebnis */
.wp-stiche{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wp-stich{min-width:0;display:flex;flex-direction:column;padding:16px 14px 14px;border:1px solid var(--line);border-radius:16px;background:#fff}
.wp-stich.heute{border-color:var(--olive);background:var(--olive-wash)}
.wp-stich-name{font-family:'Montserrat',sans-serif;font-weight:800;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;line-height:1.4}
.wp-stich.heute .wp-stich-name{color:var(--olive-dk)}
.wp-satz{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.04em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.wp-balken{display:block;position:relative;height:10px;border-radius:5px;background:rgba(16,14,24,.08);margin:12px 0 14px;overflow:hidden}
.wp-balken i{position:absolute;inset:0;border-radius:5px;background:linear-gradient(90deg,var(--olive-lt),var(--olive));
  transform:scaleX(var(--f,0));transform-origin:left center;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.wp-stich.heute .wp-balken i{background:linear-gradient(90deg,var(--sonne),var(--sonne-dk))}
.js .wp-rechner:not(.an) .wp-balken i{transform:scaleX(0)}
.wp-zuschuss{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(1.05rem,1.8vw,1.35rem);letter-spacing:-.03em;color:var(--olive-dk);font-variant-numeric:tabular-nums;line-height:1.15}
.wp-stich.heute .wp-zuschuss{color:var(--ink)}
.wp-eigen{font-family:'Montserrat',sans-serif;font-weight:700;font-size:.95rem;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums;margin-top:8px}
.wp-stich-l{font-size:.68rem;color:var(--muted);line-height:1.3}
.wp-bonus{margin-top:auto;padding-top:10px;font-size:.68rem;color:var(--muted);line-height:1.4;font-variant-numeric:tabular-nums}
.wp-diff-kopf{margin:22px 0 6px;font-family:'Montserrat',sans-serif;font-weight:800;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--olive)}
.wp-diff{margin:0;font-size:1rem;line-height:1.5;color:var(--text);font-weight:500}
.wp-formel{margin:14px 0 0;font-size:.8rem;line-height:1.55;color:var(--muted)}
.wp-hinweise{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.wp-hinweise li{position:relative;padding-left:18px;font-size:.8rem;line-height:1.5;color:#5A5A55}
.wp-hinweise li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--sonne)}
.wp-rechner-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin:22px 0 0}
.wp-fein{margin:0;font-size:.78rem;line-height:1.55;color:var(--muted);max-width:60ch}
.wp-fein a{color:var(--olive);font-weight:600}
.wp-rechner-ohnejs{margin:0 0 18px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:.95rem;line-height:1.6;color:#43433F}
.js .wp-rechner-ohnejs{display:none}
html:not(.js) .wp-rechner{display:none}
@media(max-width:900px){
  .wp-rechner{grid-template-columns:1fr}
  .wp-rechner-ein{border-right:0;border-bottom:1px solid var(--line)}
}
@media(max-width:640px){
  .wp-rechner-ein,.wp-rechner-aus{padding:22px 18px 20px}
  .wp-feld-reihe{grid-template-columns:1fr}
  .wp-stiche{grid-template-columns:1fr;gap:10px}
  .wp-stich{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;column-gap:14px;align-items:center;padding:14px 16px}
  .wp-stich-name{grid-column:1/-1;margin-bottom:6px}
  .wp-satz{grid-column:1;grid-row:2;font-size:1.5rem}
  .wp-balken{grid-column:1/-1;grid-row:3;margin:10px 0 8px}
  .wp-zuschuss{grid-column:2;grid-row:2;text-align:right}
  .wp-stich-l,.wp-eigen{display:inline}
  .wp-eigen{grid-column:1/-1;grid-row:4;margin:0;font-size:.88rem}
  .wp-eigen+.wp-stich-l{grid-column:1/-1;grid-row:5}
  .wp-zuschuss+.wp-stich-l{grid-column:2;grid-row:1;text-align:right;display:none}
  .wp-bonus{grid-column:1/-1;grid-row:6;padding-top:6px}
}

/* ---- 4. Story-Karten-Grafiken ----
   SVG-Skizzen statt Fotos (es gibt keine eigenen Fotos). Schallringe
   (.wp-schall) laufen erst, wenn die Karte im Bild ist (.an). */
.wp-skizze{background:var(--paper)}
.wp-skizze svg{display:block;width:100%;height:100%}
.wp-skizze-text{font-family:'Montserrat',sans-serif;font-weight:800;letter-spacing:.06em;text-transform:uppercase;fill:var(--ink)}
.wp-ring{fill:none;stroke:var(--olive);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3)}
.js .wp-schall.an .wp-ring{animation:wpRing 3.2s cubic-bezier(.2,.6,.4,1) infinite}
.js .wp-schall.an .wp-ring:nth-child(2){animation-delay:.8s}
.js .wp-schall.an .wp-ring:nth-child(3){animation-delay:1.6s}
.js .wp-schall.an .wp-ring:nth-child(4){animation-delay:2.4s}
html:not(.js) .wp-ring{opacity:.35;transform:none}
@keyframes wpRing{
  0%{opacity:.75;transform:scale(.3)}
  70%{opacity:.08}
  100%{opacity:0;transform:scale(2.6)}
}
.wp-flocke{fill:#fff;opacity:.9}
.js .wp-winter.an .wp-flocke{animation:wpFlocke 5s linear infinite}
.js .wp-winter.an .wp-flocke:nth-child(2n){animation-duration:6.5s;animation-delay:-2s}
.js .wp-winter.an .wp-flocke:nth-child(3n){animation-duration:7.5s;animation-delay:-4s}
@keyframes wpFlocke{from{transform:translateY(-30px)}to{transform:translateY(330px)}}

/* ---- 5. Klima und Lueftung: ein Bild, ein Satz, drei Punkte (.wp-zwei) ---- */
.wp-zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px 60px;align-items:center}
.wp-zwei>*{min-width:0}
.wp-zwei+.wp-zwei{margin-top:88px}
.wp-zwei.tausch .wp-zwei-bild{order:2}
.wp-zwei-bild{position:relative;border-radius:var(--r);overflow:hidden;background:var(--paper);box-shadow:0 20px 50px rgba(16,14,24,.1)}
.wp-zwei-bild img,.wp-zwei-bild svg{display:block;width:100%;height:auto}
.wp-zwei-text h3{font-size:clamp(1.35rem,2.4vw,1.9rem);margin:0 0 16px}
.wp-zwei-text p{color:#43433F;max-width:50ch;margin:0 0 14px}
.wp-zwei-text p strong{color:var(--text)}
.wp-punkte{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.wp-punkte li{display:flex;gap:12px;align-items:flex-start;font-size:.93rem;line-height:1.5;color:#3A3A36;min-width:0}
.wp-punkte li b{color:var(--text);font-weight:600}
.wp-punkte svg{flex:0 0 auto;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--olive);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wp-zwei-fein{margin:16px 0 0;font-size:.82rem;color:var(--muted);line-height:1.55}
.wp-zwei-fein a{color:var(--olive);font-weight:600}
@media(max-width:900px){
  .wp-zwei{grid-template-columns:1fr;gap:24px}
  .wp-zwei.tausch .wp-zwei-bild{order:0}
  .wp-zwei+.wp-zwei{margin-top:64px}
}

/* ---- 6. Ablauf mit sechs Stationen (gewerk.css rechnet mit fuenf) ---- */
@media(min-width:801px){
  .wp-sechs .gk-schritte-liste{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:12px}
  .wp-sechs .gk-schritt:nth-child(6)>*{grid-column:6}
  .wp-sechs .gk-kurz{font-size:.6rem;letter-spacing:.08em}
}

/* ---- 7. Kleinigkeiten ---- */
.wp-quelle{margin:14px 0 0;font-size:.76rem;line-height:1.5;color:var(--muted);max-width:60ch}
.wp-quelle a{color:var(--olive)}
.wp-regeln .gk-tipp-blase{max-width:none}
.gk-block-kopf h2{margin:0 0 16px}
.wp-sprung{display:inline-flex;align-items:center;gap:.4em;margin:0 14px 0 0;font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--olive);text-decoration:none}
.wp-sprung svg{width:12px;height:12px;fill:currentColor}
.wp-sprung:hover{text-decoration:underline;text-underline-offset:3px}
.wp-sorgen-vier .gk-sorge:nth-child(4){top:calc(var(--gk-klebe) + 222px)}
.wp-sorgen-vier .gk-pivot{top:calc(var(--gk-klebe) + 296px)}
.wp-sorgen-vier.erledigt .gk-sorge:nth-child(4) .gk-strich,.wp-sorgen-vier.erledigt .gk-sorge:nth-child(4) h3{transition-delay:.66s}
.wp-sorgen-vier.erledigt .gk-sorge:nth-child(4) .gk-sorge-haken{transition-delay:.86s}

/* ---- Bewegung reduzieren: Endzustaende sofort ---- */
@media(prefers-reduced-motion:reduce){
  .wp-system .gk-lage,.wp-system .wp-fluss,.wp-system .wp-grad{transition:none}
  .wp-thermo-svg .wp-queck,.js .wp-thermo:not(.ein) .wp-queck{transform:scaleY(.58);transition:none}
  .wp-balken i,.js .wp-rechner:not(.an) .wp-balken i{transform:scaleX(var(--f,0));transition:none}
  .js .wp-schall.an .wp-ring{animation:none;opacity:.35;transform:none}
  .js .wp-winter.an .wp-flocke{animation:none}
}
.wp-nowrap{white-space:nowrap}