/* ============ Nordic-Energie — Wärmepumpe (vaulk-Engineering-Look, warm) ============ */
:root {
  /* Farben und Schriften kommen aus /marke/ci.css. Die warme Creme-Palette der
     Entwurfszeit ist raus — die Gruppe faehrt Weiss und Schwarz. */
  --paper2: var(--nv-flaeche);
  --espresso: var(--nv-dunkel);
  --espresso2: #141414;
  --ink-40: rgba(20,24,28,.4);
  --line: rgba(20,24,28,.16);
  --maxw: var(--maxw-breit);
  --pad: max(40px, calc((100vw - var(--maxw-breit)) / 2));
  --mono: ui-monospace, "SFMono-Regular", Menlo, "Roboto Mono", monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--paper); color: var(--ink);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.025em; line-height: 1.06; }
img, svg { max-width: 100%; display: block; }
section { position: relative; }

/* Monospace-Labels (vaulks HUD-Beschriftung) */
.mono-lbl { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-70); }
.mono-lbl b { width: 7px; height: 7px; background: var(--sun); display: inline-block; }
.mono-lbl em { font-style: normal; }

/* HUD-Ecken-Rahmen (vaulks Klammern) */
.hud-frame { position: absolute; inset: 14px; pointer-events: none; z-index: 3; }
.hud-frame i { position: absolute; width: 18px; height: 18px; border: 1.5px solid var(--ink-40); }
.hud-frame i:nth-child(1){ left:0; top:0; border-right:0; border-bottom:0; }
.hud-frame i:nth-child(2){ right:0; top:0; border-left:0; border-bottom:0; }
.hud-frame i:nth-child(3){ left:0; bottom:0; border-right:0; border-top:0; }
.hud-frame i:nth-child(4){ right:0; bottom:0; border-left:0; border-top:0; }
.hud-frame.sm { inset: 10px; } .hud-frame.sm i { width: 14px; height: 14px; }
.hud-frame.xs { inset: 8px; } .hud-frame.xs i { width: 12px; height: 12px; border-color: rgba(255,255,255,.5); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; border-radius: var(--nv-radius);
  font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 500; transition: transform .2s, background .2s, opacity .2s; }
.btn i { font-style: normal; transition: transform .2s; }
.btn:hover i { transform: translateX(4px); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-sun { background: var(--sun); color: var(--ink); }
.btn-outline { border: 1px solid var(--ink); color: var(--ink); }

/* NAV: kommt aus /nav/nav.css (gemeinsame Leiste + Glas-Dock der Gruppe) */

/* ============ 1 · HERO ============ */
/* 04.10.: Aufbau nach apple.com/de/airpods-pro, Text oben: links Name + eine Aussage, rechts die
   Pille mit Knopf, darunter das Produkt gross in der Mitte (unser Film, auf #fff freigestellt). */
.ahero { background: #fff; padding: 56px 0 48px; overflow: hidden; }
/* Oben hat der Film 100 px reines Weiss (Platz fuer den Scanner-Rahmen) — abgeschnitten, damit
   Produkt und Aussage zusammen in den ersten Bildschirm passen. */
.ahero-film { width: min(100%, calc(54vh * 1280 / 620)); aspect-ratio: 1280 / 620; margin: 8px auto 0; overflow: hidden; }
.ahero-film video { display: block; width: 100%; height: auto; margin-top: -7.8%; }
.ahero-unten { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 0 var(--pad); }
.ahero-produkt { margin: 0 0 10px; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.ahero h1 { font-size: clamp(2.1rem, 3.8vw, 3.5rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; }
.ahero-claim { margin: 16px 0 0; font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.45; color: var(--ink-70); max-width: 40ch; }
.ahero-kauf { display: flex; align-items: center; gap: 14px; flex: none; padding: 7px 7px 7px 20px; border-radius: 999px; background: #f5f5f7; }
.ahero-preis { font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.ahero-preis sup, .genauer-fuss sup { font-size: .62em; }
.ahero-btn { padding: 10px 20px; border-radius: 999px; background: var(--sun); color: var(--ink); font-size: 15px; font-weight: 600; }
.ahero-btn:hover { filter: brightness(.96); }
.ahero-fuss { margin: 6px 0 0; padding: 0 var(--pad); font-size: 12px; line-height: 1.5; color: var(--ink-70); }
.ahero-fuss sup { font-size: .62em; }
.ahero-fuss a { text-decoration: underline; }

/* ============ 1b · BLICK INS INNERE (wie Apples „Sieh sie dir genauer an.") ============ */
.genauer { padding: 72px var(--pad) 96px; background: #fff; }
.genauer-titel { margin: 0 0 36px; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 700; letter-spacing: -0.02em; }
.genauer-box { position: relative; display: grid; grid-template-columns: minmax(300px, 420px) 1fr; min-height: min(80vh, 760px);
  border-radius: 28px; background: #f5f5f7; overflow: hidden; }
.genauer-liste { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 12px; padding: 40px 0 40px 40px; }
.gpill { display: flex; align-items: center; gap: 12px; padding: 14px 22px 14px 14px; border: 0; border-radius: 999px;
  background: #e8e8ed; color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer;
  transition: background .2s; }
.gpill:hover { background: #dedee3; }
.gpill:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.gplus { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1.5px solid currentColor; border-radius: 50%;
  font-size: 18px; font-weight: 400; line-height: 1; }
.gtext { display: none; font-weight: 400; }
.gpill[aria-expanded="true"] { display: block; max-width: 380px; padding: 22px 26px; border-radius: 22px; background: #fff;
  font-size: 16px; line-height: 1.5; box-shadow: 0 10px 30px rgba(20,24,28,.06); cursor: default; }
.gpill[aria-expanded="true"] .gplus { display: none; }
.gpill[aria-expanded="true"] .gtitel { font-weight: 700; }
.gpill[aria-expanded="true"] .gtitel::after { content: "."; }
.gpill[aria-expanded="true"] .gtext { display: inline; color: var(--ink-70); }
.genauer-bild { position: relative; min-height: 420px; scroll-margin-top: 12px; }
/* cover: die Nahaufnahmen sind am Bildrand angeschnitten — so liegt der Schnitt auf der Boxkante, nicht mitten in der Flaeche */
.genauer-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05);
  transition: opacity .35s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.genauer-bild img.an { opacity: 1; transform: none; }
.genauer-zu { position: absolute; top: 20px; right: 20px; z-index: 3; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: #e8e8ed; color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; }
.genauer-zu:hover { background: #dedee3; }
.genauer-fuss { margin: 18px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-70); }
.genauer-fuss a { text-decoration: underline; }
/* Breit: das Bild beginnt mitten in der Box (rechts der Knoepfe) — links weich ins Grau auslaufen lassen,
   sonst steht dort eine Schattenkante (gemessen 245 -> 241). */
@media (min-width: 1081px) {
  .genauer-bild img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%); mask-image: linear-gradient(90deg, transparent 0, #000 16%); }
}
@media (prefers-reduced-motion: reduce) { .genauer-bild img { transition: none; transform: none; } }

@media (max-width: 1080px) {
  .ahero-film { width: 150%; margin-left: -25%; }
  .ahero { padding-top: 36px; }
  .ahero-unten { flex-direction: column; align-items: flex-start; gap: 22px; }
  .genauer-box { grid-template-columns: 1fr; min-height: 0; }
  .genauer-bild { order: -1; min-height: 0; aspect-ratio: 7 / 5; }
  .genauer-liste { padding: 0 20px 28px; }
  .gpill[aria-expanded="true"] { max-width: none; }
}

/* ============ 2 · STATEMENT ============ */
.wstatement { padding: 22vh var(--pad); max-width: 1100px; margin: 0 auto; }
.wstatement .mono-lbl { margin-bottom: 34px; }
.wstatement p { font-size: clamp(1.6rem, 3.4vw, 2.9rem); font-weight: 600; line-height: 1.22; letter-spacing: -0.02em; }
.wstatement .w { color: var(--ink-40); transition: color .3s; }
.wstatement .w.on { color: var(--ink); }

/* ============ 3 · TECHNIK (sticky Nav + Wireframe / vaulk-Kern) ============ */
.tech { background: var(--espresso); color: var(--paper);
  background-image: linear-gradient(var(--paper-grid,rgba(255,255,255,.05)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px; padding: 12vh 0; }
.tech-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 0;
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.tech-sticky { position: sticky; top: 0; height: 100vh; display: grid;
  grid-template-columns: 150px 1fr; gap: 24px; align-items: center; align-content: center; }
/* Sektions-Nav */
.tnav { display: grid; gap: 20px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; }
.tnav-item { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.4); transition: color .35s; }
.tnav-item .tdot { width: 8px; height: 8px; border: 1px solid currentColor; flex: none; transition: background .35s, border-color .35s; }
.tnav-item.on { color: var(--sun); }
.tnav-item.on .tdot { background: var(--sun); border-color: var(--sun); }
/* Wireframe-Bühne */
.tstage { position: relative; aspect-ratio: 1/1; display: grid; place-items: center; }
.tstage-tag { position: absolute; left: 18px; top: 14px; z-index: 4; color: rgba(255,255,255,.7); }
.tstage-tag b { background: var(--sun); }
.wire { position: absolute; width: 94%; height: 94%; color: var(--paper); opacity: 0;
  transform: scale(.94); transition: opacity .3s, transform .3s; }
.wire.on { opacity: 1; transform: none; }
.wire text.wlabel { font-family: var(--mono); font-size: 13px; fill: rgba(255,255,255,.75); letter-spacing: .04em; }
.wire text.wlabel-big { font-size: 30px; fill: var(--sun); font-weight: 700; }
.wire .wbar { fill: rgba(242,166,59,.14); }
.wflow { stroke: var(--sun); stroke-width: 2.4; fill: none; stroke-linecap: round;
  stroke-dasharray: 14 120; animation: wflow 2.4s linear infinite; filter: drop-shadow(0 0 5px rgba(242,166,59,.7)); }
.wflow-2 { animation-delay: 1.2s; }
@keyframes wflow { from { stroke-dashoffset: 134; } to { stroke-dashoffset: 0; } }
/* ---- Schaubilder (04.10.): je Block eine Antwort statt Geraetezeichnung. Endzustand = Grundzustand,
   die Animation startet jedes Mal neu, wenn das Bild aktiv wird (.on). */
.tech { --kalt-eis: #3d93ff; --kalt-saug: #8fd0ff; --heiss: #ff7a2e; --warm: #ffb35c; }
.wire .wachse { stroke: rgba(255,255,255,.35); stroke-width: 1; }
.wire .wzeiger { stroke: rgba(255,255,255,.45); stroke-width: 1; }
.wire .wtrenn { stroke: rgba(255,255,255,.18); stroke-width: 1; stroke-dasharray: 3 5; }
.wire text.wl-klein { font-size: 11px; fill: rgba(255,255,255,.5); }
.wire text.wl-sonne { fill: var(--sun); }
.wire text.wl-dunkel { fill: #14181c; font-weight: 600; }
.wire text.wl-heiss { fill: var(--heiss); } .wire text.wl-warm { fill: var(--warm); }
.wire text.wl-eis { fill: var(--kalt-eis); } .wire text.wl-saug { fill: var(--kalt-saug); }
.wire text.wl-akku { fill: #7fe0c4; }
.wire text.wzahl { font-family: var(--sans); font-size: 64px; font-weight: 700; fill: var(--sun); letter-spacing: -0.03em; }
.wire text.wzahl-m { font-size: 34px; } .wire text.wzahl-s { font-size: 26px; fill: rgba(255,255,255,.55); }
.wire text.wgleich { font-family: var(--sans); font-size: 34px; font-weight: 600; fill: rgba(255,255,255,.7); }
/* 1 · Thermometer */
.th-rohr { stroke: rgba(255,255,255,.45); stroke-width: 1.4; }
.th-rest { fill: none; stroke: var(--sun); stroke-width: 1.2; stroke-dasharray: 3 3; }
.th-fuellung { transform-box: fill-box; transform-origin: 50% 100%; }
.wire-thermo.on .th-fuellung { animation: wwachsen .75s cubic-bezier(.2,.7,.2,1) both; }
.wire-thermo.on .th-zahl { animation: wauf .3s .55s ease-out both; }
/* 2 · Kaeltekreis */
.kr { stroke-width: 3; opacity: .45; } .kp { stroke-width: 6; stroke-linecap: round; stroke-dasharray: 2 16; }
.kr-saug { stroke: var(--kalt-saug); } .kr-heiss { stroke: var(--heiss); } .kr-fluessig { stroke: var(--warm); } .kr-eis { stroke: var(--kalt-eis); }
.kn { fill: #0d0d0d; stroke: rgba(255,255,255,.85); stroke-width: 1.6; }
.wire-kreis.on .kp { animation: wkreis 1.1s linear infinite; }
.wire-kreis.on .kr { animation: wauf .3s ease-out both; }
.wire-kreis.on .kr:nth-of-type(2) { animation-delay: .08s; } .wire-kreis.on .kr:nth-of-type(3) { animation-delay: .16s; }
.wire-kreis.on .kr:nth-of-type(4) { animation-delay: .24s; }
@keyframes wkreis { from { stroke-dashoffset: 36; } to { stroke-dashoffset: 0; } }
/* 3 · Bilanz */
.eb { transform-box: fill-box; transform-origin: 50% 100%; }
.eb-strom { fill: var(--sun); } .eb-luft { fill: rgba(108,196,255,.85); } .eb-waerme { fill: var(--heiss); } .eb-gas { fill: rgba(255,255,255,.55); }
/* Verzoegerungen stehen im SVG (--d, bis 2,3 s) und werden hier auf 30 % gestaucht: nach ~1 s ist alles da */
.wire-bilanz.on .eb { animation: wwachsen .3s calc(var(--d, 0s) * .3) cubic-bezier(.2,.7,.2,1) both; }
.wire-bilanz.on .eb-hoch { animation-duration: .45s; }
.wire-bilanz.on .eb-txt { animation: wauf .3s calc(var(--d, 0s) * .3) ease-out both; }
/* 4 · Tageskurve */
.tf-direkt { fill: var(--heiss); opacity: .92; } .tf-ueber { fill: var(--sun); opacity: .82; }
.tf-akku { fill: #7fe0c4; opacity: .55; } .tf-netz { fill: rgba(255,255,255,.22); }
.tl-sonne { stroke: var(--sun); stroke-width: 2.2; } .tl-bedarf { stroke: #fff; stroke-width: 1.4; stroke-dasharray: 4 4; opacity: .8; }
.tag-zeit { transform-box: fill-box; transform-origin: 0 50%; }
.wire-tag.on .tag-zeit { animation: wzeit 1s cubic-bezier(.4,.1,.3,1) both; }
.wire-tag.on .tag-text { animation: wauf .3s .75s ease-out both; }
@keyframes wzeit { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wwachsen { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes wauf { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wire * { animation: none !important; } }
/* Scrollende Blöcke */
.tblocks { padding: 30vh 0 30vh var(--pad-inner, 8%); display: grid; gap: 34vh; }
.tblock { max-width: 30rem; }
.tblock .tnum { font-family: var(--mono); font-size: 12px; color: var(--sun); letter-spacing: .1em; }
.tblock h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); margin: 16px 0 18px; }
.tblock p { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.78); }
.tblock .btn { margin-top: 28px; }

/* ============ 4 · SPEC-KARTEN ============ */
.specs { background: var(--paper); padding: 15vh var(--pad); }
.specs-head { margin-bottom: 60px; }
.specs-head .mono-lbl { margin-bottom: 16px; }
.specs-head h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); }
.specs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.spec { position: relative; background: var(--paper2); border: 1px solid var(--line); border-radius: var(--nv-radius);
  padding: 30px 26px 30px; min-height: 260px; display: flex; flex-direction: column; }
.spec .mono-lbl { margin-bottom: auto; }
.spec-big { font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 700; letter-spacing: -0.03em;
  color: var(--sun); margin: 30px 0 14px; }
.spec p { font-size: 16.5px; line-height: 1.55; color: var(--ink-70); }

/* ============ 5 · TIMELINE ============ */
.wtimeline { background: var(--paper2); padding: 15vh var(--pad); }
.wt-head { margin-bottom: 70px; }
.wt-head .mono-lbl { margin-bottom: 16px; }
.wt-head h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); }
.wt-steps { display: grid; gap: 60px; max-width: var(--maxw); margin: 0 auto; }
.wt-step { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.wt-step.reverse .wt-media { order: 2; }
.wt-media { position: relative; border-radius: var(--nv-radius); overflow: hidden; aspect-ratio: 16/10; }
.wt-media img { width: 100%; height: 100%; object-fit: cover; }
.wt-corner { position: absolute; right: 16px; bottom: 12px; z-index: 4; font-family: var(--mono);
  font-size: 13px; color: #fff; letter-spacing: .1em; }
.wt-copy .mono-lbl { margin-bottom: 16px; }
.wt-copy h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin-bottom: 16px; }
.wt-copy p { font-size: 18px; line-height: 1.55; color: var(--ink-70); max-width: 44ch; }

/* ============ 6 · SOLAR-KOMBI-BAND ============ */
.wcombo { position: relative; background: var(--espresso2); color: var(--paper); padding: 20vh var(--pad); text-align: center;
  background-image: radial-gradient(80% 120% at 50% 120%, rgba(242,166,59,.16), transparent 60%); }
.wcombo-inner { max-width: 780px; margin: 0 auto; }
.wcombo-inner .mono-lbl { color: var(--sun); justify-content: center; margin-bottom: 22px; }
.wcombo h2 { font-size: clamp(2rem, 4vw, 3.4rem); margin-bottom: 24px; }
.wcombo p { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.8); margin: 0 auto 36px; max-width: 52ch; }

/* ============ 7 · FÖRDERUNG ============ */
.wfoerder { background: var(--paper); padding: 16vh var(--pad); display: grid;
  grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.wf-copy .mono-lbl { margin-bottom: 18px; }
.wf-copy h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); margin-bottom: 30px; }
.ticks { list-style: none; display: grid; gap: 14px; margin: 0 0 40px; }
.ticks li { position: relative; padding-left: 30px; font-size: 17.5px; line-height: 1.55; }
.ticks li::before { content: "↘"; position: absolute; left: 0; top: 0; color: var(--sun); font-family: var(--mono); }
.wf-media { position: relative; border-radius: var(--nv-radius); overflow: hidden; aspect-ratio: 4/3; }
.wf-media img { width: 100%; height: 100%; object-fit: cover; }

/* ============ 8 · FAQ — Gestaltung kommt aus /marke/bausteine.css ============ */

/* ============ 9 · ABSCHLUSS + FOOTER — 1:1 aus /style.css der Startseite (03.10.) ============
   Schwarzer Abschluss mit grosser Zeile, Anruf-Knopf und Formular, darunter der Gruppen-Footer.
   Wer dort etwas aendert, zieht es hier nach. --pad wird lokal gesetzt, weil diese Seite
   ein eigenes --pad fuer die breiten Sektionen hat. */
.cta { --pad: clamp(20px, 5vw, 72px); position: relative; z-index: 5; background: var(--dark); color: #fff;
  padding: 11vh var(--pad) 0; overflow: hidden; }
.cta-inner { text-align: center; max-width: 60rem; margin: 0 auto; }
.cta .giant { font-family: var(--kopf); font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.cta .giant .fade { color: #fff; }
.vcta { display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--nv-signal); color: #000; text-decoration: none;
  font-size: 15px; font-weight: 700; line-height: 20px; letter-spacing: 1px;
  padding: 10px 72px; min-height: 60px; border-radius: 2px; box-sizing: border-box;
  box-shadow: 1px 1px 20px rgba(0,0,0,.3); margin: 26px auto 0; width: max-content; max-width: 100%;
  transition: background .2s, transform .15s; }
.vcta:hover { background: var(--nv-signal-dunkel); transform: translateY(-1px); }
.vcta::before { content: ""; display: inline-block; flex: 0 0 auto; width: 1.05em; height: 1.05em; margin-right: .5em;
  background: currentColor; -webkit-mask: url("../nav/tel.svg") center / contain no-repeat; mask: url("../nav/tel.svg") center / contain no-repeat; }
.sec-cta .vcta, .vcta.vcta-lg { letter-spacing: 0; min-height: 0; box-shadow: 0 10px 40px rgba(242,176,30,.38); }
.sec-cta .vcta { margin-top: 0; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.3; padding: 17px 30px; }
.vcta.vcta-lg { margin-top: 38px; font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.3; padding: 20px 40px; }
.cta-mail { margin: 22px 0 0; color: rgba(255,255,255,.6); font-size: 15px; }
.kf-note a { text-decoration: underline; }   /* Seite setzt global a ohne Unterstrich */
.sec-cta { text-align: center; margin-top: clamp(36px, 4.6vw, 62px); }

.foot-cols { position: relative; z-index: 2; max-width: var(--maxw-breit); margin: 0 auto;
  padding: clamp(60px, 7vw, 96px) var(--pad) clamp(40px, 4vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr);
  gap: clamp(34px, 4vw, 70px); align-items: start; text-align: left; font-family: var(--kopf); }
.foot-brand img { height: 46px; width: auto; display: block; margin-bottom: 20px; }
.foot-brand p { font-size: 14px; line-height: 22px; color: rgba(255,255,255,.62); margin: 0 0 20px; }
.foot-call { display: inline-block; font-size: 15px; font-weight: 700; color: #fff;
  text-decoration: none; border: 1px solid rgba(255,255,255,.3); border-radius: var(--nv-radius);
  padding: 11px 22px; transition: background .2s, color .2s; }
.foot-call:hover { background: #fff; color: #000; }
.foot-adr { display: block; font-style: normal; margin-top: 12px; font-size: 14px; line-height: 22px; color: rgba(255,255,255,.62); }
.foot-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); }
.foot-col h3 { font-family: var(--kopf); font-size: 14px; font-weight: 700; line-height: 20px;
  letter-spacing: 0; color: #fff; margin: 0 0 12px; }
.foot-col a { display: block; font-size: 13.5px; line-height: 19px; color: rgba(255,255,255,.62);
  text-decoration: none; margin-bottom: 9px; }
.foot-col a:hover { color: #fff; }
.foot-col .foot-schwester ~ .foot-schwester { margin-top: 26px; }
.foot-col .foot-thema, .foot-col .webseite-folgt { display: block; font-size: 13.5px; line-height: 19px;
  color: rgba(255,255,255,.45); margin-bottom: 9px; }
/* Das schwebende Dock liegt ueber dem Rand — Reserve, damit die letzte Zeile sichtbar bleibt */
.foot-legal { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; padding: 26px var(--pad) 120px;
  font-size: 13px; color: rgba(255,255,255,.55); border-top: 1px solid rgba(255,255,255,.12); text-align: left; }
@media (max-width: 1080px) {
  .foot-cols { grid-template-columns: minmax(0, 1fr); }
  .foot-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; }
}
@media (max-width: 640px) { .foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .vcta { padding: 10px 24px; }
  .faq-item p, .foot-brand p, .cta-mail { font-size: 15px; line-height: 21px; }
  .cta .vcta, .faq .vcta, .kf-send { display: flex; align-items: center; justify-content: center; text-align: center;
    width: 100%; box-sizing: border-box; min-height: 60px; padding: 10px 16px; font-size: 15px; line-height: 21px; white-space: normal; }
  .foot-cols { padding-left: 0; padding-right: 0; }
  .foot-col a { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
  .foot-legal { padding: 26px 0 130px; }
}
@media (prefers-reduced-motion: reduce) { .vcta { transition: none; } }

/* Reveals */
.io { opacity: 0; transform: translateY(24px); transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1); }
.io-on { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 1080px) {
  .tech-grid { grid-template-columns: 1fr; }
  /* Schmal: Schaubild klebt oben, die Texte laufen darunter durch. (Vorher war die Buehne hier 0 px breit —
     alle Inhalte absolut positioniert, auto-Rand im Grid liess sie auf nichts schrumpfen.) */
  .tech-sticky { position: sticky; top: 0; z-index: 3; height: auto; grid-template-columns: 1fr; gap: 0;
    padding: 8px 0 10px; background: var(--espresso); }
  .tnav { display: none; }
  /* volle Breite (ueber den Seitenrand hinaus), sonst wird die Beschriftung zu klein */
  .tstage { width: calc(100% + 2 * var(--pad) - 16px); max-width: 520px;
    margin: 0 0 0 max(calc(8px - var(--pad)), calc((100% - 520px) / 2)); }
  .wire text.wlabel { font-size: 15px; } .wire text.wl-klein { font-size: 12px; }
  .tblocks { padding: 3vh 0 34vh; gap: 46vh; }
  .specs-grid { grid-template-columns: 1fr 1fr; }
  .wt-step, .wt-step.reverse .wt-media, .wfoerder { grid-template-columns: 1fr; }
  .wt-step.reverse .wt-media { order: 0; }
}
@media (max-width: 620px) { .specs-grid { grid-template-columns: 1fr; } }

/* ======================== Gerechnete Wirkung (5b) ========================
   Gleiche Kartensprache wie .specs, aber drei Spalten und eine hervorgehobene.
   Zahlen stammen aus demos/waerme-wirkung.mjs — beim Aendern dort nachrechnen. */
.wrechnung { background: var(--paper2); padding: 15vh var(--pad); }
.wr-head { max-width: 900px; margin-bottom: 54px; }   /* 760 brach die Headline mitten im Satz */
.wr-head .mono-lbl { margin-bottom: 16px; }
.wr-head h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.1; }
.wr-sub { margin-top: 18px; font-size: 17px; line-height: 1.6; color: var(--ink-70); }

.wr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wr-karte { position: relative; display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--nv-radius); padding: 28px 26px 26px; }
.wr-karte .mono-lbl { margin-bottom: 18px; }
.wr-zahl { font-family: var(--kopf); font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1; margin-bottom: 14px; }
.wr-karte p { font-size: 16.5px; line-height: 1.55; color: var(--ink-70); }
/* Die dritte Karte ist das Ergebnis, nicht nur eine weitere Spalte. */
.wr-stark { background: var(--nv-dunkel); border-color: var(--nv-dunkel); color: #fff; }
.wr-stark .wr-zahl { color: var(--nv-signal); }
.wr-stark .mono-lbl { color: rgba(255,255,255,.72); }   /* war dunkel auf dunkel */
.wr-stark p { color: rgba(255,255,255,.75); }
.wr-stark b { color: #fff; }

.wr-fuss { max-width: 760px; margin-top: 34px; font-size: 15px; line-height: 1.6; color: var(--ink-70); }
.wr-fuss a { color: inherit; }

@media (max-width: 1080px) { .wr-grid { grid-template-columns: 1fr; } }

/* ---- Waermepumpen-Rechner (Klassen des Solarrechners aus /rechner/rechner.css, Monatsbalken wie /wallbox/) ---- */
.wpr-hinweis { display: block; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--r-leise); }
.wpr-unbekannt { margin: -4px 0 18px; font-size: 15px; }
.wpr-vergleich .rech-balken { grid-template-columns: 190px minmax(0, 1fr) 70px; }
.wpr-vergleich .rech-balken em { background: rgba(255,255,255,.45); }
.wpr-vergleich .wpr-heute em { background: rgba(255,255,255,.22); }
.wpr-vergleich .wpr-best em { background: var(--sun); }
.wpr-vergleich .wpr-best span, .wpr-vergleich .wpr-best b { color: var(--sun); font-weight: 700; }
.wpr-vergleich .wpr-kaskade em { background: repeating-linear-gradient(135deg, rgba(255,255,255,.4) 0 6px, rgba(255,255,255,.18) 6px 12px); }
.wpr-vergleich .wpr-kaskade span { color: var(--r-leise); }
#wprTarifText { display: block; margin-top: 12px; line-height: 1.55; }
.wbr-monate { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; align-items: end; height: 96px; margin: 14px 0 26px; }
.wbr-monate i { position: relative; display: block; height: calc(var(--h) * .82); min-height: 3px;
  border-radius: 4px 4px 2px 2px; background: var(--sun); overflow: visible; }
.wbr-monate em { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font-style: normal; font-size: 11px; color: var(--r-leise); }
.wpr-foerder #wprZuschuss { display: block; margin-bottom: 4px; }
.wpr .rech-aufteilung b { white-space: nowrap; }
.wpr .rech-schalter { margin-bottom: 16px; }
@media (max-width: 560px) {
  .wpr-vergleich .rech-balken { grid-template-columns: 124px minmax(0, 1fr) 62px; font-size: 13px; }
  .wpr .rech-kacheln { grid-template-columns: 1fr; }
  .wpr .rech-aufteilung li { flex-wrap: wrap; }
  .wpr .rech-aufteilung li b { margin-left: auto; }
}