/*
 * PHT Energietechnik – Photovoltaik-Landingpage & Solarrechner
 * Alle Klassen mit Präfix pv-, damit nichts mit /assets/css/styles.css kollidiert.
 * Farben und Formen nach dem bestehenden PHT-Auftritt.
 */

:root {
  --pv-navy: #0f2b46;
  --pv-navy-2: #173f60;
  --pv-navy-dunkel: #0b2136;
  --pv-petrol: #0f6f8f;
  --pv-petrol-soft: #dff1f6;
  --pv-amber: #d98b16;
  --pv-amber-hell: #f1b84b;
  --pv-amber-dunkel: #a75f06;
  --pv-gold: #f7b11e;
  --pv-gruen: #1f8a5b;
  --pv-rot: #b3261e;
  --pv-ink: #10283f;
  --pv-h1: #102c41;
  --pv-h2: #254454;
  --pv-text: #526b7b;
  --pv-text-hell: rgba(255, 255, 255, 0.82);
  --pv-body: #f7fafb;
  --pv-paper: #f5f8fa;
  --pv-soft: #edf4f7;
  --pv-weiss: #fff;
  --pv-linie: rgba(16, 40, 63, 0.12);
  --pv-linie-stark: rgba(16, 40, 63, 0.24);
  --pv-schatten: 0 14px 40px rgba(23, 63, 96, 0.09);
  --pv-schatten-gross: 0 30px 80px rgba(11, 33, 54, 0.22);
  --pv-btn: linear-gradient(135deg, #d98b16 0%, #f1b84b 100%);
  --pv-btn-hover: linear-gradient(135deg, #c97f10 0%, #eeae36 100%);
  --pv-r-xl: 30px;
  --pv-r-l: 22px;
  --pv-r-m: 17px;
  --pv-r-s: 12px;
  --pv-max: 1240px;
  --pv-gutter: clamp(16px, 4vw, 32px);
  --pv-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pv-sticky-h: 0px;
  --pv-header-h: 84px; /* fixer Website-Header (styles.css: 84 / 78 / 72 px) */
}
@media (max-width: 1100px) { :root { --pv-header-h: 78px; } }
@media (max-width: 780px) { :root { --pv-header-h: 72px; } }

/* ---------------------------------------------------------------- Basis */

/* .pvx-body nur im Vorschau-Rahmen; nach der Integration trägt .pvx die Typografie selbst */
.pvx-body { margin: 0; background: var(--pv-body); }
.pvx, .pv-sticky {
  color: var(--pv-text);
  font-family: var(--pv-font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Platz für die Sticky-Leiste unten (Klasse setzt pht-pv.js auf <body>) */
.pv-mit-sticky { padding-bottom: var(--pv-sticky-h); }
.pvx, .pvx *, .pvx *::before, .pvx *::after, .pv-sticky, .pv-sticky * { box-sizing: border-box; }
.pvx { display: block; overflow-x: clip; hyphens: manual; }
:where(.pvx) img { max-width: 100%; height: auto; display: block; }
.pvx :where(h1, h2, h3, h4, p, ul, ol, figure, dl, dd) { margin: 0; }
.pvx :where(ul, ol) { padding: 0; list-style: none; }
:where(.pvx) a { color: var(--pv-petrol); text-underline-offset: 3px; }
:where(.pvx) a:hover { color: var(--pv-navy); }
.pvx :focus-visible, .pv-sticky :focus-visible { outline: 3px solid var(--pv-gold); outline-offset: 3px; border-radius: 6px; }
:where(.pvx) button { font: inherit; }
.pvx [id] { scroll-margin-top: calc(var(--pv-header-h) + 16px); }
.pv-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pv-i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.25em; }
.pv-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pv-skip { position: absolute; left: 12px; top: -60px; z-index: 2000; background: var(--pv-navy); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 800; }
.pv-skip:focus { top: 12px; }
[hidden] { display: none !important; }

.pv-container { width: 100%; max-width: calc(var(--pv-max) + 2 * var(--pv-gutter)); margin-inline: auto; padding-inline: var(--pv-gutter); }
.pv-container--schmal { max-width: calc(880px + 2 * var(--pv-gutter)); }
.pv-zentriert { text-align: center; margin-top: 32px; }

.pv-eyebrow { display: inline-block; font-size: 0.8rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pv-petrol); margin-bottom: 14px; }
.pv-eyebrow--hell { color: var(--pv-amber-hell); }
.pv-h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.06; font-weight: 900; letter-spacing: -0.045em; color: var(--pv-h1); text-wrap: balance; }
.pv-h3 { font-size: clamp(1.35rem, 2.3vw, 1.8rem); line-height: 1.15; font-weight: 850; letter-spacing: -0.03em; color: var(--pv-h1); text-wrap: balance; }
.pv-h2:focus, .pv-h3:focus { outline: none; }
.pv-lead { font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.55; color: var(--pv-h2); margin-top: 14px; }
.pv-klein { font-size: 0.875rem; line-height: 1.5; color: var(--pv-text); }
.pv-fussnote { font-size: 0.875rem; color: var(--pv-text); margin-top: 28px; max-width: 820px; }
.pv-optional { font-weight: 600; color: var(--pv-text); font-size: 0.85em; }

/* ---------------------------------------------------------------- Buttons & Links */

.pv-btn {
  --pv-btn-h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--pv-btn-h); padding: 0 26px; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 850; font-size: 1rem; letter-spacing: -0.01em; line-height: 1.15; text-align: center;
  text-decoration: none; cursor: pointer; white-space: nowrap; max-width: 100%;
  transition: transform 0.2s var(--pv-ease), box-shadow 0.2s var(--pv-ease), background 0.2s, color 0.2s, border-color 0.2s;
}
@media (max-width: 480px) { .pv-btn { white-space: normal; padding-inline: 20px; } }
.pvx .pv-btn:hover, .pv-btn:hover { transform: translateY(-2px); }
.pv-btn:active { transform: translateY(0); }
.pv-btn--primaer { background: var(--pv-btn); color: var(--pv-ink); box-shadow: 0 10px 26px rgba(217, 139, 22, 0.32); }
.pvx .pv-btn--primaer:hover, .pv-btn--primaer:hover { background: var(--pv-btn-hover); color: var(--pv-ink); box-shadow: 0 14px 32px rgba(217, 139, 22, 0.4); }
.pv-btn--sekundaer { background: #fff; color: var(--pv-navy); border-color: var(--pv-linie-stark); }
.pvx .pv-btn--sekundaer:hover { color: var(--pv-navy); border-color: var(--pv-navy); box-shadow: var(--pv-schatten); }
.pv-btn--glas { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.55); backdrop-filter: blur(6px); }
.pvx .pv-btn--glas:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
.pv-btn--whatsapp { background: #fff; color: #116b3b; border-color: rgba(17, 107, 59, 0.35); }
.pvx .pv-btn--whatsapp:hover { color: #0b4f2b; border-color: #116b3b; }
.pv-btn--gross { --pv-btn-h: 58px; padding: 0 30px; font-size: 1.06rem; }
.pv-btn--klein { --pv-btn-h: 44px; padding: 0 18px; font-size: 0.94rem; }
.pv-btn[disabled], .pv-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.pv-btn.is-laden { position: relative; color: transparent !important; pointer-events: none; }
.pv-btn.is-laden::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(16, 40, 63, 0.25); border-top-color: var(--pv-ink); animation: pv-dreh 0.8s linear infinite; }

.pv-link { background: none; border: 0; padding: 0; color: var(--pv-petrol); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pv-link:hover { color: var(--pv-navy); }
.pv-link--pfeil { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 850; }
.pv-link--pfeil .pv-i { transition: transform 0.2s var(--pv-ease); }
.pv-link--pfeil:hover .pv-i { transform: translateX(4px); }


/* ---------------------------------------------------------------- Hero */

.pv-hero { position: relative; isolation: isolate; color: #fff; min-height: min(100svh, 940px); display: flex; align-items: flex-end; padding: calc(var(--pv-header-h) + clamp(40px, 8vh, 96px)) 0 clamp(36px, 7vh, 72px); overflow: hidden; background: var(--pv-navy); }
.pv-hero__bilder { position: absolute; inset: 0; z-index: -2; }
.pv-hero__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.8s ease; transform-origin: 60% 40%; }
.pv-hero__bild.is-aktiv { opacity: 1; animation: pv-zoom 16s ease-out forwards; }
.pv-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(8, 25, 41, 0.86) 0%, rgba(8, 25, 41, 0.6) 46%, rgba(8, 25, 41, 0.16) 100%),
  linear-gradient(180deg, rgba(8, 25, 41, 0.5) 0%, rgba(8, 25, 41, 0) 30%, rgba(8, 25, 41, 0.5) 100%); }
.pv-hero__inhalt { position: relative; }
.pv-hero__titel { display: flex; flex-direction: column; gap: 14px; max-width: 900px; }
.pv-hero__claim { font-size: clamp(2.6rem, 7.4vw, 5.6rem); line-height: 0.98; font-weight: 950; letter-spacing: -0.055em; color: #fff; text-wrap: balance; }
.pv-hero__seo { font-size: clamp(1.05rem, 2vw, 1.4rem); line-height: 1.3; font-weight: 750; letter-spacing: -0.015em; color: rgba(255, 255, 255, 0.9); }
.pv-hero__lead { margin-top: 18px; max-width: 640px; font-size: clamp(1.02rem, 1.45vw, 1.18rem); color: var(--pv-text-hell); }
.pv-hero__karte { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; max-width: 760px; }
.pv-hero__karte > .pv-btn--glas { align-self: flex-start; }
.pv-hero__checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 22px; margin-top: 26px; font-weight: 700; font-size: 0.97rem; color: rgba(255, 255, 255, 0.92); }
.pv-hero__checks li { display: flex; gap: 10px; align-items: center; }
.pv-hero__checks .pv-i { color: var(--pv-gold); stroke-width: 2.6; }
@media (min-width: 640px) { .pv-hero__checks { grid-template-columns: repeat(2, max-content); } }
@media (max-width: 639px) {
  .pv-hero { align-items: flex-start; padding-top: calc(var(--pv-header-h) + 28px); min-height: 0; }
  .pv-hero::before { background: linear-gradient(180deg, rgba(8, 25, 41, 0.72), rgba(8, 25, 41, 0.86)); }
  .pv-hero .pv-eyebrow { font-size: 0.7rem; letter-spacing: 0.08em; margin-bottom: 10px; }
  .pv-hero__lead { font-size: 0.98rem; margin-top: 12px; }
  .pv-hero__karte { margin-top: 20px; }
  .pv-adresse { padding: 18px; }
  .pv-adresse__sub { margin-bottom: 10px; }
}

/* ---------------------------------------------------------------- Adressfeld + Combobox */

.pv-adresse { width: 100%; background: #fff; color: var(--pv-ink); border-radius: var(--pv-r-l); padding: 22px; box-shadow: var(--pv-schatten-gross); }
.pv-adresse__frage { font-size: 1.35rem; font-weight: 900; letter-spacing: -0.03em; color: var(--pv-h1); line-height: 1.15; }
.pv-adresse__sub { color: var(--pv-text); margin: 4px 0 14px; font-size: 0.97rem; }
.pv-adresse__zeile { display: flex; flex-direction: column; gap: 10px; }
.pv-adresse__status { min-height: 1.3em; margin-top: 8px; font-size: 0.9rem; font-weight: 650; color: var(--pv-petrol); }
.pv-adresse__status.is-fehler { color: var(--pv-rot); }
.pv-adresse__hinweis { font-size: 0.8rem; color: var(--pv-text); margin-top: 2px; }
.pv-adresse--rechner { box-shadow: none; border: 1.5px solid var(--pv-linie); padding: 18px; }
@media (min-width: 700px) { .pv-adresse__zeile { flex-direction: row; } .pv-adresse__zeile .pv-btn { flex: none; } }

.pv-combo { position: relative; flex: 1; min-width: 0; }
.pv-combo__eingabe, .pv-formular input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), .pv-formular select, .pv-formular textarea {
  width: 100%; min-height: 56px; padding: 14px 18px; border: 1.5px solid var(--pv-linie-stark); border-radius: 14px; background: #fff; color: var(--pv-ink);
  font: inherit; font-size: 1.06rem; font-weight: 500; transition: border-color 0.15s, box-shadow 0.15s; appearance: none;
}
.pv-formular textarea { min-height: 96px; resize: vertical; }
.pv-formular select { background-image: linear-gradient(45deg, transparent 50%, var(--pv-navy) 50%), linear-gradient(135deg, var(--pv-navy) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.pv-combo__eingabe::placeholder { color: #8396a3; font-weight: 500; }
.pv-combo__eingabe:focus, .pv-formular input:focus, .pv-formular select:focus, .pv-formular textarea:focus { outline: none; border-color: var(--pv-petrol); box-shadow: 0 0 0 4px rgba(15, 111, 143, 0.16); }
.pv-formular [aria-invalid="true"] { border-color: var(--pv-rot) !important; }
.pv-combo__liste { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(11, 33, 54, 0.24); border: 1px solid var(--pv-linie); max-height: min(340px, 50vh); overflow: auto; }
.pv-combo__liste li { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 10px; cursor: pointer; color: var(--pv-ink); font-weight: 650; }
.pv-combo__liste li .pv-i { color: var(--pv-petrol); }
.pv-combo__liste li small { display: block; font-weight: 500; color: var(--pv-text); }
.pv-combo__liste li[aria-selected="true"], .pv-combo__liste li:hover { background: var(--pv-petrol-soft); }
.pv-combo__liste li.pv-combo__leer { cursor: default; color: var(--pv-text); font-weight: 600; background: none; }

/* ---------------------------------------------------------------- Faktenleiste */

.pv-fakten { background: #fff; border-bottom: 1px solid var(--pv-linie); }
.pv-fakten__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.pv-fakten__liste li { padding: 22px 12px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--pv-linie); }
.pv-fakten__liste li:nth-child(odd) { border-left: 0; }
.pv-fakten__liste strong { color: var(--pv-h1); font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.15; }
.pv-fakten__liste span { font-size: 0.9rem; }
@media (min-width: 900px) { .pv-fakten__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pv-fakten__liste li { padding: 28px 24px; } .pv-fakten__liste li:nth-child(odd) { border-left: 1px solid var(--pv-linie); } .pv-fakten__liste li:first-child { border-left: 0; } }

/* ---------------------------------------------------------------- Sektionen */

.pv-section { padding: clamp(64px, 9vw, 128px) 0; }
.pv-section--eng { padding: clamp(40px, 6vw, 72px) 0 0; }
.pv-section--hell { background: var(--pv-soft); }
.pv-section--dunkel { background: radial-gradient(1200px 600px at 85% 0%, rgba(15, 111, 143, 0.35), transparent 60%), linear-gradient(180deg, var(--pv-navy) 0%, var(--pv-navy-dunkel) 100%); color: var(--pv-text-hell); }
.pv-section--dunkel .pv-h2, .pv-section--dunkel .pv-lead { color: #fff; }
.pv-kopf { max-width: 820px; margin-bottom: clamp(32px, 5vw, 56px); }
.pv-kopf--zeile { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pv-split { display: grid; gap: clamp(36px, 6vw, 80px); align-items: center; }
.pv-split__text > p:not(.pv-eyebrow):not(.pv-lead) { margin-top: 16px; }
.pv-split__text .pv-btn { margin-top: 28px; }
@media (min-width: 960px) { .pv-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pv-split { grid-template-columns: minmax(0, 1fr); }

.pv-kurz { background: #fff; border-radius: var(--pv-r-l); padding: clamp(22px, 4vw, 40px); box-shadow: var(--pv-schatten); border-left: 5px solid var(--pv-amber); }
.pv-kurz h2 { margin-bottom: 10px; }
.pv-kurz p { font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: var(--pv-h2); line-height: 1.65; }

/* ---------------------------------------------------------------- Kreisgrafik «Alles aus einer Hand» */

.pv-rad { position: relative; width: 100%; max-width: 580px; margin-inline: auto; }
.pv-rad__mitte { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; background: linear-gradient(145deg, var(--pv-navy-2), var(--pv-navy)); color: #fff; border-radius: 50%; box-shadow: 0 20px 50px rgba(15, 43, 70, 0.35), 0 0 0 10px rgba(247, 177, 30, 0.14); }
.pv-rad__mitte img { width: 44px; height: 44px; border-radius: 12px; background: #fff; padding: 4px; }
.pv-rad__mitte strong { font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; }
.pv-rad__ring li { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--pv-linie); border-radius: 16px; padding: 10px 12px; box-shadow: var(--pv-schatten); color: var(--pv-ink); font-weight: 800; font-size: 0.92rem; line-height: 1.15; }
.pv-rad__ring .pv-i { width: 36px; height: 36px; padding: 7px; border-radius: 11px; background: var(--pv-petrol-soft); color: var(--pv-petrol); stroke-width: 1.7; }
@media (max-width: 619px) {
  .pv-rad__mitte { width: 168px; height: 168px; margin: 0 auto 22px; }
  .pv-rad__ring { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pv-rad__ring li { flex-direction: column; text-align: center; padding: 12px 8px; gap: 6px; hyphens: auto; overflow-wrap: anywhere; }
}
@media (min-width: 620px) {
  .pv-rad { aspect-ratio: 1; --r: 41%; }
  .pv-rad::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 2px dashed rgba(15, 111, 143, 0.28); animation: pv-dreh 80s linear infinite; }
  .pv-rad__mitte { position: absolute; left: 50%; top: 50%; width: 36%; height: 36%; transform: translate(-50%, -50%); }
  .pv-rad__ring li { position: absolute; left: 50%; top: 50%; width: 132px; flex-direction: column; text-align: center; padding: 12px 8px; gap: 6px; font-size: 0.86rem;
    transform: translate(-50%, -50%) rotate(calc(var(--i) * 36deg - 90deg)) translateX(min(232px, 41vw)) rotate(calc(var(--i) * -36deg + 90deg)); }
  .pv-js .pv-rad:not(.is-sichtbar) .pv-rad__ring li { opacity: 0; }
  .pv-js .pv-rad .pv-rad__ring li { transition: opacity 0.5s ease calc(var(--i) * 80ms + 200ms); }
}
@media (min-width: 620px) and (max-width: 959px) { .pv-rad { max-width: 560px; } }

/* ---------------------------------------------------------------- Energiefluss-Grafik */

.pv-fluss-rahmen { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--pv-r-xl); padding: clamp(14px, 3vw, 28px); }
.pv-fluss { width: 100%; height: auto; display: block; font-family: var(--pv-font); }
.pv-fluss__bahn { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 3; stroke-linecap: round; }
.pv-fluss__strom { fill: none; stroke: var(--pv-gold); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 2 13; opacity: 0; transition: opacity 0.5s; }
.pv-fluss__strom.is-aktiv { opacity: 1; animation: pv-fliessen 0.9s linear infinite; }
.pv-fluss__strom.is-netz { stroke: #8fd3ea; }
.pv-fluss__strom.is-rueck { animation-direction: reverse; }
.is-pausiert .pv-fluss__strom.is-aktiv { animation-play-state: paused; }
.pv-fluss__knoten circle { fill: var(--pv-navy-2); stroke: rgba(255, 255, 255, 0.24); stroke-width: 1.5; transition: fill 0.4s, stroke 0.4s; }
.pv-fluss__knoten.is-aktiv circle { stroke: var(--pv-gold); fill: #1d4b70; }
.pv-fluss__knoten.is-aus { opacity: 0.38; }
.pv-fluss__knoten use { color: #fff; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pv-fluss__knoten.is-aktiv use { color: var(--pv-gold); }
.pv-fluss__label { fill: #fff; font-size: 13px; font-weight: 800; text-anchor: middle; }
.pv-fluss__label--innen { font-size: 10.5px; font-weight: 750; fill: rgba(255, 255, 255, 0.9); }
.pv-fluss__label[text-anchor="start"] { text-anchor: start; }
.pv-fluss__wert { fill: rgba(255, 255, 255, 0.7); font-size: 11.5px; font-weight: 650; text-anchor: middle; }
.pv-fluss__prio { fill: var(--pv-ink); font-size: 11px; font-weight: 900; text-anchor: middle; }
.pv-fluss .pv-fluss__knoten .pv-fluss__prio-bg { fill: var(--pv-gold); stroke: none; }
@media (max-width: 600px) { .pv-fluss__label { font-size: 17px; } .pv-fluss__label--innen { font-size: 12.5px; } .pv-fluss__prio { font-size: 13px; } }
.pv-fluss-steuer { display: inline-flex; gap: 4px; padding: 4px; background: rgba(255, 255, 255, 0.08); border-radius: 999px; margin-bottom: 14px; }
.pv-fluss-steuer button { border: 0; background: none; color: rgba(255, 255, 255, 0.8); font-weight: 800; font-size: 0.9rem; padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.pv-fluss-steuer button[aria-pressed="true"] { background: #fff; color: var(--pv-navy); }
.pv-fluss-text { font-size: 0.92rem; color: rgba(255, 255, 255, 0.78); margin-top: 10px; min-height: 2.8em; }
.pv-monitoring { margin-top: clamp(48px, 7vw, 88px); }
.pv-monitoring img { border-radius: var(--pv-r-l); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); width: 100%; }
.pv-monitoring figcaption { font-size: 0.875rem; margin-top: 12px; color: rgba(255, 255, 255, 0.7); }

/* helle Variante im Rechner */
.pv-system__grafik { background: linear-gradient(160deg, var(--pv-navy-2), var(--pv-navy)); border-radius: var(--pv-r-l); padding: 16px; }

/* ---------------------------------------------------------------- Prozess (17 Schritte) */

.pv-prozess { position: relative; display: grid; gap: 18px; }
.pv-prozess__linie { display: none; }
.pv-phase { background: #fff; border: 1px solid var(--pv-linie); border-radius: var(--pv-r-l); padding: 24px; box-shadow: var(--pv-schatten); }
.pv-phase__titel { font-size: 1.15rem; font-weight: 900; letter-spacing: -0.02em; color: var(--pv-h1); margin-bottom: 16px; display: flex; flex-direction: column; gap: 2px; }
.pv-phase__titel span { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pv-petrol); font-weight: 850; }
.pv-phase ol { display: grid; gap: 10px; }
.pv-phase li { counter-increment: pv-s; display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--pv-ink); font-size: 0.97rem; line-height: 1.25; }
.pv-phase li::before { content: counter(pv-s); flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--pv-petrol-soft); color: var(--pv-petrol); font-size: 0.82rem; font-weight: 900; }
.pv-phase:last-child li:last-child::before { background: var(--pv-amber); color: var(--pv-ink); }
@media (min-width: 700px) { .pv-prozess { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1100px) {
  .pv-prozess { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 26px; }
  .pv-prozess__linie { display: block; position: absolute; left: 24px; right: 24px; top: 0; height: 4px; border-radius: 4px; background: var(--pv-linie); overflow: hidden; }
  .pv-prozess__linie span { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--pv-btn); transition: width 0.2s linear; }
}

/* ---------------------------------------------------------------- Referenzgalerie */

.pv-galerie { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px max(var(--pv-gutter), calc((100vw - var(--pv-max)) / 2)) 18px; scrollbar-width: thin; scroll-padding-inline: max(var(--pv-gutter), calc((100vw - var(--pv-max)) / 2)); }
.pv-galerie:focus-visible { outline-offset: -3px; }
.pv-galerie__item { flex: none; width: min(76vw, 420px); scroll-snap-align: start; }
.pv-galerie__item--gross { width: min(86vw, 720px); }
.pv-galerie__item img { width: 100%; height: clamp(240px, 38vw, 420px); object-fit: cover; border-radius: var(--pv-r-l); box-shadow: var(--pv-schatten); }
.pv-galerie__item figcaption { margin-top: 12px; font-size: 0.92rem; line-height: 1.45; }
.pv-galerie__item figcaption strong { display: block; color: var(--pv-h1); font-size: 1rem; }

/* ---------------------------------------------------------------- Team */

.pv-team { display: grid; gap: 22px; }
.pv-person > * { min-width: 0; }
.pv-person { display: grid; grid-template-columns: minmax(0, 1fr); background: #fff; border: 1px solid var(--pv-linie); border-radius: var(--pv-r-xl); overflow: hidden; box-shadow: var(--pv-schatten); }
.pv-person__bild { width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; object-position: 50% 18%; }
.pv-person__bild--martin { object-position: 55% 26%; }
.pv-person__logo { display: grid; place-items: center; background: var(--pv-soft); padding: 40px; aspect-ratio: 4 / 4.2; }
.pv-person__logo img { width: min(240px, 70%); }
.pv-person__text { padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: 12px; }
.pv-person__rolle { font-weight: 750; color: var(--pv-petrol); font-size: 0.95rem; }
.pv-person__aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
@media (min-width: 700px) { .pv-person { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .pv-person__bild, .pv-person__logo { aspect-ratio: auto; height: 100%; min-height: 340px; } }
@media (min-width: 1100px) { .pv-team { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pv-person { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; } .pv-person__bild, .pv-person__logo { aspect-ratio: 16 / 11; min-height: 0; } }

.pv-liste-check { display: grid; gap: 8px; }
.pv-liste-check li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.pv-liste-check .pv-i { color: var(--pv-amber); stroke-width: 2.6; margin-top: 0.15em; }

/* ---------------------------------------------------------------- Kacheln Bestand */

.pv-kachelraster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pv-kachelraster li { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--pv-linie); border-radius: var(--pv-r-m); padding: 18px; font-weight: 800; color: var(--pv-ink); line-height: 1.25; font-size: 0.97rem; transition: transform 0.25s var(--pv-ease), box-shadow 0.25s; }
.pv-kachelraster li { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.pv-kachelraster li:hover { transform: translateY(-3px); box-shadow: var(--pv-schatten); }
.pv-kachelraster .pv-i { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: var(--pv-petrol-soft); color: var(--pv-petrol); }
@media (min-width: 800px) { .pv-kachelraster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .pv-kachelraster li { flex-direction: row; align-items: center; padding: 20px 22px; } }
@media (max-width: 400px) { .pv-kachelraster { gap: 10px; } .pv-kachelraster li { padding: 14px; font-size: 0.92rem; } }

/* ---------------------------------------------------------------- Service-Pläne */

.pv-plaene { display: grid; gap: 18px; }
.pv-plan { background: #fff; border: 1px solid var(--pv-linie); border-radius: var(--pv-r-xl); padding: 28px; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--pv-schatten); }
.pv-plan--betont { border: 2px solid var(--pv-amber); }
.pv-plan__titel { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.03em; color: var(--pv-h1); }
.pv-plan__preis { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--pv-linie); font-weight: 800; color: var(--pv-h2); }
@media (min-width: 900px) { .pv-plaene { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- FAQ */

.pv-faq { display: grid; gap: 10px; }
.pv-faq__item { background: #fff; border: 1px solid var(--pv-linie); border-radius: var(--pv-r-m); transition: box-shadow 0.2s; }
.pv-faq__item[open] { box-shadow: var(--pv-schatten); }
.pv-faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; }
.pv-faq__item summary::-webkit-details-marker { display: none; }
.pv-faq__frage { font-size: 1.05rem; font-weight: 800; color: var(--pv-h1); letter-spacing: -0.01em; line-height: 1.35; }
.pv-faq__icon { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--pv-petrol-soft); position: relative; transition: transform 0.25s var(--pv-ease), background 0.2s; }
.pv-faq__icon::before, .pv-faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--pv-petrol); border-radius: 2px; transform: translate(-50%, -50%); }
.pv-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.pv-faq__item[open] .pv-faq__icon { transform: rotate(45deg); background: var(--pv-amber-hell); }
.pv-faq__antwort { padding: 0 22px 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pv-tabelle { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.pv-tabelle caption { text-align: left; font-weight: 800; color: var(--pv-h1); padding-bottom: 6px; }
.pv-tabelle th, .pv-tabelle td { padding: 8px 10px; border-bottom: 1px solid var(--pv-linie); text-align: left; }
.pv-tabelle thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pv-petrol); }
.pv-tabelle tbody th { color: var(--pv-ink); }
.pv-tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pv-tabelle th { hyphens: auto; }
@media (max-width: 560px) {
  .pv-tabelle { font-size: 0.8rem; }
  .pv-tabelle th, .pv-tabelle td { padding: 7px 4px; }
  .pv-tabelle thead th { font-size: 0.7rem; letter-spacing: 0.02em; text-transform: none; }
}

/* ---------------------------------------------------------------- Regionen, CTA-Band */

.pv-orte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.pv-orte li { background: #fff; border: 1px solid var(--pv-linie); border-radius: 14px; padding: 14px 16px; font-weight: 800; color: var(--pv-ink); font-size: 0.95rem; line-height: 1.3; box-shadow: var(--pv-schatten); }
.pv-cta-band { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: clamp(80px, 12vw, 150px) 0; text-align: center; background: var(--pv-navy); }
.pv-cta-band__bild { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; z-index: -2; transform: translateY(var(--pv-par, 0)); }
.pv-cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 25, 41, 0.78), rgba(8, 25, 41, 0.86)); }
.pv-cta-band .pv-h2 { color: #fff; max-width: 860px; margin-inline: auto; }
.pv-cta-band .pv-lead { color: var(--pv-text-hell); max-width: 680px; margin: 16px auto 32px; }

/* ---------------------------------------------------------------- Sticky-Leiste mobil */

.pv-sticky { position: fixed; z-index: 950; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(10px); border-top: 1px solid var(--pv-linie); box-shadow: 0 -10px 30px rgba(11, 33, 54, 0.1); font-family: var(--pv-font); transform: translateY(110%); transition: transform 0.35s var(--pv-ease); }
.pv-sticky.is-sichtbar { transform: none; }
.pv-sticky a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; border-radius: 999px; border: 1.5px solid var(--pv-linie-stark); color: var(--pv-navy); text-decoration: none; font-weight: 850; font-size: 0.92rem; }
.pv-sticky .pv-sticky__haupt { background: var(--pv-btn); border-color: transparent; color: var(--pv-ink); }
.pv-sticky .pv-i { width: 1.15em; height: 1.15em; }
@media (min-width: 1101px) { .pv-sticky { display: none; } }
.menu-open .pv-sticky, .consent-visible .pv-sticky { display: none; }
@media (max-width: 400px) { .pv-sticky { gap: 6px; padding-inline: 8px; } .pv-sticky a { font-size: 0.84rem; gap: 5px; } }

/* ---------------------------------------------------------------- Solarrechner – Rahmen */

.pv-rechner { padding: clamp(48px, 7vw, 96px) 0; background: linear-gradient(180deg, var(--pv-soft) 0%, var(--pv-body) 100%); scroll-margin-top: var(--pv-header-h); }
.pv-rechner__shell { scroll-margin-top: calc(var(--pv-header-h) + 12px); position: relative; background: #fff; border-radius: var(--pv-r-xl); box-shadow: var(--pv-schatten-gross); padding: clamp(20px, 4vw, 48px); border: 1px solid var(--pv-linie); }
.pv-rechner__kopf { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(20px, 3vw, 32px); }
.pv-rechner__zu { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--pv-linie-stark); background: #fff; color: var(--pv-navy); cursor: pointer; place-items: center; }
.pv-schritte { flex: 1; display: flex; gap: 6px; counter-reset: pv-fs; }
.pv-schritte li { flex: 1; counter-increment: pv-fs; position: relative; padding-top: 12px; font-size: 0.8rem; font-weight: 800; color: #8396a3; text-transform: uppercase; letter-spacing: 0.06em; }
.pv-schritte li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: 5px; background: var(--pv-soft); transition: background 0.3s; }
.pv-schritte li.is-erledigt::before { background: var(--pv-petrol); }
.pv-schritte li.is-aktiv::before { background: var(--pv-amber); }
.pv-schritte li.is-aktiv { color: var(--pv-h1); }
.pv-schritte li.is-erledigt { color: var(--pv-petrol); }
@media (max-width: 699px) { .pv-schritte li span { display: none; } .pv-schritte li.is-aktiv span { display: inline; white-space: nowrap; } .pv-schritte li.is-aktiv { flex: 2.4; } }

.pv-schritt { animation: pv-einblenden 0.45s var(--pv-ease); min-width: 0; }
.pv-schritt__intro { max-width: 760px; margin-bottom: 24px; }
.pv-schritt__intro .pv-h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.pv-schritt__nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-top: 28px; }
.pv-schritt__nav .pv-btn--primaer { margin-left: auto; }
.pv-schritt__alt { margin-top: 18px; font-size: 0.95rem; }
.pv-hinweis { background: var(--pv-petrol-soft); border-radius: var(--pv-r-s); padding: 14px 16px; color: var(--pv-ink); }

.pv-ablauf-mini { display: grid; gap: 12px; margin-top: 26px; }
.pv-ablauf-mini li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; line-height: 1.4; }
.pv-ablauf-mini li strong { display: block; color: var(--pv-h1); }
.pv-ablauf-mini .pv-i { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--pv-petrol-soft); color: var(--pv-petrol); }
@media (min-width: 800px) { .pv-ablauf-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pv-laden { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding: clamp(40px, 8vw, 90px) 0; color: var(--pv-ink); }
.pv-laden__punkt { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, var(--pv-gold) 0 30%, transparent 31%), conic-gradient(var(--pv-amber), rgba(217, 139, 22, 0)); animation: pv-dreh 1.1s linear infinite; }

/* Vollbild mobil */
@media (max-width: 759px) {
  .pv-rechner__shell.is-vollbild { position: fixed; inset: 0; z-index: 7000; border-radius: 0; border: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px calc(24px + env(safe-area-inset-bottom)); }
  .pv-rechner__shell.is-vollbild .pv-rechner__kopf { position: sticky; top: -14px; z-index: 50; background: #fff; margin: -14px -16px 18px; padding: 14px 16px 10px; border-bottom: 1px solid var(--pv-linie); }
  .pv-rechner__shell.is-vollbild .pv-rechner__zu { display: grid; }
  .pv-scroll-sperre, .pv-scroll-sperre body { overflow: hidden; }
}

/* ---------------------------------------------------------------- Rechner – Dachwahl */

.pv-dach { display: grid; gap: 20px; }
.pv-dach__karte { position: relative; }
.pv-karte { width: 100%; height: clamp(300px, 52vh, 560px); border-radius: var(--pv-r-l); overflow: hidden; background: var(--pv-navy); z-index: 0; }
.pv-karte.is-punktwahl, .pv-karte.is-punktwahl .leaflet-interactive { cursor: crosshair; }
.pv-karte__tipp { font-size: 0.85rem; margin-top: 8px; }
.pv-karte .leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, 0.82); }
.pv-karte .leaflet-control-zoom a { width: 36px; height: 36px; line-height: 34px; font-size: 20px; color: var(--pv-navy); }
.pv-karte-nr { display: grid !important; place-items: center; width: 26px !important; height: 26px !important; margin: -13px 0 0 -13px !important; border-radius: 50%; background: var(--pv-navy); color: #fff; font: 900 13px/1 var(--pv-font); border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); pointer-events: none; }
.pv-dach__panel { display: flex; flex-direction: column; gap: 10px; }
.pv-dach__panel > * { flex-shrink: 0; }
.pv-dach__panel .pv-eyebrow { margin: 0; }
@media (min-width: 1000px) { .pv-dach { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } .pv-karte { height: 600px; } .pv-dach__panel { max-height: 640px; overflow: auto; padding-right: 4px; } }

.pv-dachliste { border: 0; padding: 0; margin: 6px 0 0; }
.pv-dachliste > div { display: grid; gap: 8px; }
.pv-dachflaeche { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border: 1.5px solid var(--pv-linie); border-radius: 14px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.pv-dachflaeche:hover { border-color: var(--pv-linie-stark); }
.pv-dachflaeche:has(input:checked) { border-color: var(--pv-amber); background: #fff9ec; }
.pv-dachflaeche:has(input:focus-visible) { outline: 3px solid var(--pv-gold); outline-offset: 2px; }
.pv-dachflaeche input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pv-dachflaeche__box { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--pv-linie-stark); display: grid; place-items: center; background: #fff; }
.pv-dachflaeche input:checked ~ .pv-dachflaeche__box { background: var(--pv-amber); border-color: var(--pv-amber); }
.pv-dachflaeche input:checked ~ .pv-dachflaeche__box::after { content: ""; width: 10px; height: 6px; border: solid var(--pv-ink); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px); }
.pv-dachflaeche__nr { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--pv-navy); color: #fff; font-weight: 900; font-size: 0.8rem; }
.pv-dachflaeche__text { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 0.92rem; line-height: 1.35; min-width: 0; }
.pv-dachflaeche__text strong { color: var(--pv-ink); }
.pv-dachflaeche__ertrag { font-weight: 800; color: var(--pv-h1); white-space: nowrap; }
.pv-klasse { display: inline-block; font-size: 0.72rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 999px; padding: 2px 8px; margin-left: 4px; vertical-align: 1px; }
.pv-klasse--5, .pv-klasse--4 { background: #fdecc8; color: #7a4504; }
.pv-klasse--3 { background: var(--pv-petrol-soft); color: #0b5670; }
.pv-klasse--2, .pv-klasse--1 { background: #eef1f3; color: #5d6b75; }
.pv-dachliste__mehr { margin-top: 4px; }

.pv-summe:empty { display: none; }
.pv-summe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--pv-linie); border-radius: var(--pv-r-m); overflow: hidden; margin-top: 10px; border: 1px solid var(--pv-linie); }
.pv-summe > div { background: var(--pv-paper); padding: 14px 16px; }
.pv-summe dt, .pv-summe .pv-summe__k { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pv-text); }
.pv-summe dd, .pv-summe .pv-summe__v { font-size: 1.35rem; font-weight: 900; color: var(--pv-h1); letter-spacing: -0.03em; line-height: 1.2; margin: 2px 0 0; }
.pv-summe__notiz { grid-column: 1 / -1; font-size: 0.85rem; }
.pv-disclaimer { display: flex; gap: 10px; font-size: 0.8rem; line-height: 1.5; color: var(--pv-text); background: var(--pv-paper); border-radius: var(--pv-r-s); padding: 12px 14px; margin-top: 6px; }
.pv-disclaimer .pv-i { color: var(--pv-petrol); margin-top: 1px; }

/* ---------------------------------------------------------------- Rechner – Formularelemente */

.pv-formular { display: grid; gap: 22px; }
.pv-feld { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.pv-feld > label, .pv-feld > legend { font-weight: 800; color: var(--pv-ink); font-size: 1rem; padding: 0; margin-bottom: 4px; }
.pv-feld-gruppe { display: grid; gap: 16px; }
@media (min-width: 700px) { .pv-feld-gruppe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.pv-optionen { display: grid; gap: 10px; }
@media (min-width: 700px) { .pv-optionen--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pv-optionen--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pv-optionen--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pv-option { position: relative; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 18px; min-height: 92px; background: #fff; border: 1.5px solid var(--pv-linie-stark); border-radius: var(--pv-r-m); cursor: pointer; color: var(--pv-text); font-size: 0.9rem; line-height: 1.4; transition: border-color 0.15s, box-shadow 0.15s, transform 0.2s var(--pv-ease); }
.pv-option strong { color: var(--pv-ink); font-size: 1.02rem; font-weight: 850; }
.pv-option .pv-i { width: 30px; height: 30px; color: var(--pv-petrol); margin-bottom: 6px; }
.pv-option:hover { border-color: var(--pv-navy); transform: translateY(-2px); }
.pv-option--radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pv-option--radio { padding-right: 46px; }
.pv-option--radio::after { content: ""; position: absolute; right: 16px; top: 18px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--pv-linie-stark); background: #fff; }
.pv-option--radio:has(input:checked) { border-color: var(--pv-amber); background: #fff9ec; box-shadow: 0 0 0 1px var(--pv-amber); }
.pv-option--radio:has(input:checked)::after { border: 6px solid var(--pv-amber); }
.pv-option--radio:has(input:focus-visible) { outline: 3px solid var(--pv-gold); outline-offset: 2px; }

.pv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-chip { position: relative; cursor: pointer; }
.pv-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pv-chip span { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; min-width: 46px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--pv-linie-stark); font-weight: 800; color: var(--pv-ink); background: #fff; transition: all 0.15s; }
.pv-chips--gross .pv-chip span { min-width: 58px; min-height: 52px; font-size: 1.1rem; }
.pv-chip input:checked + span { background: var(--pv-navy); border-color: var(--pv-navy); color: #fff; }
.pv-chip input:focus-visible + span { outline: 3px solid var(--pv-gold); outline-offset: 2px; }

.pv-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 700px) { .pv-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
.pv-kachel { min-width: 0; hyphens: auto; overflow-wrap: break-word; }
.pv-kachel { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px; min-height: 60px; border: 1.5px solid var(--pv-linie-stark); border-radius: 14px; cursor: pointer; font-weight: 750; font-size: 0.92rem; line-height: 1.25; color: var(--pv-ink); background: #fff; transition: border-color 0.15s, background 0.15s; }
.pv-kachel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pv-kachel .pv-i { width: 34px; height: 34px; padding: 6px; border-radius: 10px; background: var(--pv-soft); color: var(--pv-petrol); transition: background 0.15s, color 0.15s; }
.pv-kachel:has(input:checked) { border-color: var(--pv-amber); background: #fff9ec; }
.pv-kachel:has(input:checked) .pv-i { background: var(--pv-amber); color: var(--pv-ink); }
.pv-kachel:has(input:focus-visible) { outline: 3px solid var(--pv-gold); outline-offset: 2px; }
.pv-kachel:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }

.pv-regler { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 14px; align-items: center; }
.pv-regler input[type="range"] { width: 100%; accent-color: var(--pv-amber); height: 32px; }

.pv-schalter { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; margin-top: 18px; padding: 16px; border-radius: var(--pv-r-m); background: var(--pv-paper); border: 1px solid var(--pv-linie); color: var(--pv-text); }
.pv-schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pv-schalter strong { color: var(--pv-ink); }
.pv-schalter__spur { flex: none; position: relative; width: 50px; height: 30px; border-radius: 30px; background: #c6d2da; transition: background 0.2s; margin-top: 2px; }
.pv-schalter__spur::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); transition: transform 0.2s var(--pv-ease); }
.pv-schalter input:checked + .pv-schalter__spur { background: var(--pv-amber); }
.pv-schalter input:checked + .pv-schalter__spur::after { transform: translateX(20px); }
.pv-schalter input:focus-visible + .pv-schalter__spur { outline: 3px solid var(--pv-gold); outline-offset: 2px; }
.pv-schalter.is-aus { opacity: 0.6; }

.pv-system { display: grid; gap: 24px; align-items: center; }
.pv-system__text p:not(.pv-eyebrow):not(.pv-lead) { margin-top: 12px; }
@media (min-width: 960px) { .pv-system { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

.pv-check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.92rem; line-height: 1.45; cursor: pointer; }
.pv-check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--pv-amber); flex: none; }
.pv-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pv-formular__fehler { color: var(--pv-rot); font-weight: 700; background: #fdeceb; border-radius: var(--pv-r-s); padding: 12px 14px; }
.pv-feld__fehler { color: var(--pv-rot); font-size: 0.85rem; font-weight: 700; }
.pv-upload input[type="file"] { width: 100%; padding: 14px; border: 1.5px dashed var(--pv-linie-stark); border-radius: 14px; background: var(--pv-paper); font: inherit; font-size: 0.92rem; cursor: pointer; }
.pv-upload input[type="file"]::file-selector-button { font: inherit; font-weight: 800; border: 0; border-radius: 999px; padding: 10px 16px; margin-right: 12px; background: var(--pv-navy); color: #fff; cursor: pointer; }
.pv-upload__liste { display: grid; gap: 6px; margin-top: 8px; }
.pv-upload__liste li { display: flex; justify-content: space-between; gap: 10px; font-size: 0.88rem; background: var(--pv-paper); border-radius: 10px; padding: 8px 12px; }
.pv-upload__liste li.is-fehler { background: #fdeceb; color: var(--pv-rot); }
.pv-upload__liste button { border: 0; background: none; color: var(--pv-rot); font-weight: 800; cursor: pointer; }

/* ---------------------------------------------------------------- Rechner – Ergebnis */

.pv-erg { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 28px); }
.pv-erg > *, .pv-erg__grid > * { min-width: 0; }
.pv-erg__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.pv-erg__kopf .pv-eyebrow { margin-bottom: 6px; }
.pv-varianten { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 5px; background: var(--pv-soft); border-radius: 999px; }
.pv-varianten button { border: 0; background: none; border-radius: 999px; padding: 10px 18px; font-weight: 850; font-size: 0.92rem; color: var(--pv-h2); cursor: pointer; min-height: 44px; line-height: 1.2; }
.pv-varianten button[aria-pressed="true"] { background: #fff; color: var(--pv-h1); box-shadow: 0 4px 14px rgba(15, 43, 70, 0.12); }
.pv-varianten button span { display: block; font-size: 0.75rem; font-weight: 700; color: var(--pv-text); }
@media (max-width: 560px) { .pv-varianten { width: 100%; grid-auto-columns: minmax(0, 1fr); border-radius: 18px; } .pv-varianten button { border-radius: 14px; padding: 8px 10px; font-size: 0.86rem; hyphens: auto; } }
.pv-erg__beschrieb { font-size: 0.97rem; color: var(--pv-h2); max-width: 820px; }

.pv-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pv-kpi { min-width: 0; }
.pv-kpi__zusatz { overflow-wrap: anywhere; }
@media (max-width: 420px) { .pv-kpi__name { font-size: 0.72rem; letter-spacing: 0.04em; } .pv-kpi { padding: 14px; } }
.pv-kpi { background: var(--pv-paper); border: 1px solid var(--pv-linie); border-radius: var(--pv-r-m); padding: 16px; display: flex; flex-direction: column; gap: 2px; }
.pv-kpi__wert { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 950; letter-spacing: -0.045em; color: var(--pv-h1); line-height: 1.05; font-variant-numeric: tabular-nums; }
.pv-kpi__wert small { font-size: 0.55em; font-weight: 800; letter-spacing: -0.01em; margin-left: 2px; }
.pv-kpi__name { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pv-text); }
.pv-kpi__zusatz { font-size: 0.85rem; color: var(--pv-text); }
.pv-kpi--haupt { background: linear-gradient(145deg, var(--pv-navy-2), var(--pv-navy)); border: 0; grid-column: 1 / -1; }
.pv-kpi--haupt .pv-kpi__wert { color: #fff; }
.pv-kpi--haupt .pv-kpi__name, .pv-kpi--haupt .pv-kpi__zusatz { color: rgba(255, 255, 255, 0.75); }
.pv-kpi--akzent .pv-kpi__wert { color: var(--pv-amber-dunkel); }
.pv-balken { height: 8px; border-radius: 8px; background: rgba(16, 40, 63, 0.1); overflow: hidden; margin-top: 8px; }
.pv-balken span { display: block; height: 100%; width: var(--w, 0%); background: var(--pv-btn); border-radius: 8px; transition: width 0.9s var(--pv-ease); }
@media (min-width: 760px) { .pv-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pv-kpi--haupt { grid-column: span 4; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; padding: 22px 26px; } }
@media (min-width: 1100px) { .pv-kpis { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); } .pv-kpi--haupt { grid-column: auto; grid-row: span 1; flex-direction: column; align-items: flex-start; } }

.pv-erg__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1000px) { .pv-erg__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
.pv-karte-box { background: #fff; border: 1px solid var(--pv-linie); border-radius: var(--pv-r-l); padding: clamp(18px, 2.5vw, 26px); }
.pv-karte-box h3 { font-size: 1.1rem; font-weight: 900; color: var(--pv-h1); letter-spacing: -0.02em; margin-bottom: 14px; }
.pv-kosten { display: grid; gap: 0; }
.pv-kosten > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--pv-linie); font-size: 0.95rem; }
.pv-kosten dt { color: var(--pv-text); }
.pv-kosten dd { margin: 0; font-weight: 800; color: var(--pv-ink); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.pv-kosten .is-foerderung dd { color: var(--pv-gruen); }
.pv-kosten .is-summe { border-bottom: 0; padding-top: 14px; font-size: 1.08rem; }
.pv-kosten .is-summe dt, .pv-kosten .is-summe dd { color: var(--pv-h1); font-weight: 900; }
.pv-kosten .is-unter dt { padding-left: 14px; font-size: 0.88rem; }
.pv-kosten .is-unter dd { font-weight: 650; font-size: 0.88rem; color: var(--pv-text); }
.pv-kosten__hinweis { font-size: 0.8rem; margin-top: 10px; }
.pv-aufklapp { margin-top: 6px; }
.pv-aufklapp summary { cursor: pointer; font-weight: 800; color: var(--pv-petrol); font-size: 0.92rem; padding: 8px 0; }
.pv-ausstattung { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pv-ausstattung li { display: inline-flex; align-items: center; gap: 6px; background: var(--pv-petrol-soft); color: #0b5670; border-radius: 999px; padding: 6px 12px; font-size: 0.85rem; font-weight: 800; }

.pv-chart { width: 100%; height: auto; display: block; font-family: var(--pv-font); overflow: visible; }
.pv-chart__achse { stroke: var(--pv-linie); stroke-width: 1; }
.pv-chart__raster { stroke: var(--pv-linie); stroke-dasharray: 3 4; }
.pv-chart__beschr { fill: var(--pv-text); font-size: 11px; font-weight: 650; }
.pv-chart__eigen { fill: var(--pv-amber); }
.pv-chart__einsp { fill: var(--pv-amber-hell); opacity: 0.55; }
.pv-chart__verbrauch { fill: none; stroke: var(--pv-navy); stroke-width: 2.5; stroke-linejoin: round; }
.pv-chart__punkt { fill: #fff; stroke: var(--pv-navy); stroke-width: 2; }
.pv-chart rect[data-m]:hover, .pv-chart rect[data-m].is-aktiv { filter: brightness(0.92); }
.pv-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.85rem; margin-top: 10px; }
.pv-legende span { display: inline-flex; align-items: center; gap: 7px; }
.pv-legende i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.pv-legende .l-eigen { background: var(--pv-amber); }
.pv-legende .l-einsp { background: rgba(241, 184, 75, 0.55); }
.pv-legende .l-verbr { height: 3px; border-radius: 2px; background: var(--pv-navy); }
.pv-chart-info { font-size: 0.85rem; min-height: 1.5em; margin-top: 6px; color: var(--pv-ink); font-weight: 650; }

.pv-erg__hinweise { display: grid; gap: 8px; }
.pv-erg__hinweise p { display: flex; gap: 10px; font-size: 0.88rem; background: #fff7e6; border: 1px solid #f6dca6; border-radius: var(--pv-r-s); padding: 12px 14px; color: #6b4708; }
.pv-erg__aktionen { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 560px) { .pv-erg__aktionen .pv-btn { width: 100%; white-space: normal; } }
.pv-annahmen { font-size: 0.85rem; }
.pv-annahmen ul { list-style: disc; padding-left: 18px; display: grid; gap: 4px; margin-top: 6px; }
.pv-zuklein { display: grid; gap: 16px; max-width: 760px; }
.pv-druckkopf, .pv-druckvergleich, .pv-druckfuss { display: none; }

/* ---------------------------------------------------------------- Lead & Danke */

.pv-schritt--lead { margin-top: clamp(28px, 4vw, 44px); }
.pv-lead-box { display: grid; gap: 24px; background: var(--pv-paper); border: 1px solid var(--pv-linie); border-radius: var(--pv-r-xl); padding: clamp(20px, 3.5vw, 40px); scroll-margin-top: calc(var(--pv-header-h) + 16px); }
.pv-lead-box__text { display: flex; flex-direction: column; gap: 6px; }
.pv-lead-box__text .pv-liste-check { margin-top: 14px; font-weight: 700; color: var(--pv-ink); }
.pv-formular--lead { gap: 16px; }
.pv-schritt__nav--lead { justify-content: flex-start; margin-top: 6px; }
.pv-schritt__nav--lead .pv-btn--primaer { margin-left: 0; }
@media (min-width: 1000px) { .pv-lead-box { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px; } }
@media (max-width: 520px) { .pv-schritt__nav .pv-btn { width: 100%; white-space: normal; } .pv-schritt__nav .pv-btn--sekundaer { order: 2; } }

.pv-danke { text-align: center; max-width: 640px; margin: 0 auto; padding: clamp(24px, 6vw, 56px) 0; display: grid; gap: 16px; justify-items: center; }
.pv-danke__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--pv-btn); color: var(--pv-ink); display: grid; place-items: center; }
.pv-danke__icon .pv-i { width: 36px; height: 36px; stroke-width: 2.8; }
.pv-danke__schritte { counter-reset: pv-d; display: grid; gap: 10px; text-align: left; margin: 8px 0; }
.pv-danke__schritte li { counter-increment: pv-d; display: flex; gap: 12px; align-items: center; font-weight: 700; color: var(--pv-ink); }
.pv-danke__schritte li::before { content: counter(pv-d); flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--pv-petrol-soft); color: var(--pv-petrol); display: grid; place-items: center; font-weight: 900; font-size: 0.85rem; }

/* ---------------------------------------------------------------- Bewegung */

.pv-js .pv-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--pv-ease), transform 0.8s var(--pv-ease); }
.pv-js .pv-reveal.is-sichtbar { opacity: 1; transform: none; }

@keyframes pv-zoom { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes pv-dreh { to { transform: rotate(360deg); } }
@keyframes pv-fliessen { to { stroke-dashoffset: -15; } }
@keyframes pv-einblenden { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .pvx *, .pvx *::before, .pvx *::after, .pv-sticky { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .pv-hero__bild.is-aktiv { animation: none; }
  .pv-js .pv-reveal { opacity: 1; transform: none; }
  .pv-fluss__strom.is-aktiv { animation: none; stroke-dasharray: none; opacity: 0.85; }
  .pv-rad::before { animation: none; }
}

/* ---------------------------------------------------------------- Druck / PDF des Ergebnisses */

/* ---------------------------------------------------------------- Ergebnis – Energiesystem (Rahmen, Szenarien, Wärme, Steuer, Grundlagen) */

.pv-wform, .pv-steuer__form { display: grid; gap: 16px; }
.pv-wform__grid { display: grid; gap: 14px; }
@media (min-width: 700px) { .pv-wform__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pv-wform__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pv-feld__label { font-weight: 800; color: var(--pv-ink); font-size: 0.92rem; }
.pv-wform input:not([type="checkbox"]):not([type="radio"]), .pv-wform select, .pv-steuer__form select {
  width: 100%; min-height: 50px; padding: 12px 16px; border: 1.5px solid var(--pv-linie-stark); border-radius: 13px; background: #fff; color: var(--pv-ink);
  font: inherit; font-size: 1rem; font-weight: 500; appearance: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.pv-wform select, .pv-steuer__form select { background-image: linear-gradient(45deg, transparent 50%, var(--pv-navy) 50%), linear-gradient(135deg, var(--pv-navy) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.pv-wform input:focus, .pv-wform select:focus, .pv-steuer__form select:focus { outline: none; border-color: var(--pv-petrol); box-shadow: 0 0 0 4px rgba(15, 111, 143, 0.16); }
.pv-wform input:disabled { background: var(--pv-paper); color: var(--pv-text); }
.pv-btn--link { background: none; border: 0; color: var(--pv-petrol); padding-inline: 8px; text-decoration: underline; text-underline-offset: 3px; }

.pv-tabelle { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 8px 0; }
.pv-tabelle th, .pv-tabelle td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--pv-linie); vertical-align: top; }
.pv-tabelle thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pv-text); }
@media (max-width: 640px) { .pv-tabelle { font-size: 0.76rem; table-layout: fixed; } .pv-tabelle th, .pv-tabelle td { padding: 6px 4px; hyphens: manual; } .pv-tabelle thead th { font-size: 0.66rem; letter-spacing: 0; } }

.pv-kosten .is-rahmen { padding: 14px 0; font-size: 1.12rem; }
@media (max-width: 560px) { .pv-kosten > div { flex-wrap: wrap; gap: 2px 12px; } .pv-kosten dd { margin-left: auto; } .pv-kosten .is-rahmen dd { white-space: normal; } }
.pv-kosten .is-rahmen dt { color: var(--pv-ink); font-weight: 850; }
.pv-kosten .is-rahmen dd { color: var(--pv-h1); font-weight: 900; font-size: 1.18rem; }

/* Vorher / nachher */
.pv-vn__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 10px 0; }
.pv-vn__k { font-weight: 800; color: var(--pv-ink); }
.pv-vn__k .pv-klein { display: block; font-weight: 600; color: var(--pv-text); }
.pv-vn__zeile strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; color: var(--pv-h1); }
.pv-vn__balken { grid-column: 1 / -1; grid-row: 2; display: block; height: 14px; border-radius: 8px; width: var(--w, 0%); transition: width 0.9s var(--pv-ease); }
.pv-vn__balken.is-vorher { background: #c4d0d8; }
.pv-vn__balken.is-nachher { background: var(--pv-btn); }
.pv-vn__fazit { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 12px 14px; border-radius: var(--pv-r-s); background: #eaf6ef; color: #145c3c; font-weight: 650; }
.pv-vn__fazit .pv-i { color: var(--pv-gruen); flex: none; margin-top: 2px; }

/* Szenarien */
.pv-szenarien h3 { font-size: 1.25rem; font-weight: 900; color: var(--pv-h1); letter-spacing: -0.02em; margin-bottom: 6px; }
.pv-szen-grid { display: grid; gap: 14px; margin: 16px 0 6px; }
@media (min-width: 860px) { .pv-szen-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }
.pv-szen { position: relative; background: #fff; border: 1px solid var(--pv-linie); border-radius: var(--pv-r-l); padding: 22px 20px 18px; display: flex; flex-direction: column; gap: 4px; }
.pv-szen h4 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pv-text); font-weight: 850; }
.pv-szen__wert { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 900; color: var(--pv-h1); letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.pv-szen__wert small { font-size: 0.42em; font-weight: 800; margin-left: 6px; color: var(--pv-text); letter-spacing: 0; }
.pv-szen__k { font-size: 0.85rem; color: var(--pv-text); margin-bottom: 8px; }
.pv-szen dl { display: grid; gap: 0; margin-top: 4px; }
.pv-szen dl > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--pv-linie); font-size: 0.88rem; }
.pv-szen dd { margin: 0; font-weight: 800; color: var(--pv-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-szen__text { font-size: 0.82rem; margin-top: auto; padding-top: 10px; }
.pv-szen--betont { background: linear-gradient(160deg, var(--pv-navy-2), var(--pv-navy)); border: 0; box-shadow: var(--pv-schatten-gross); color: var(--pv-text-hell); }
@media (min-width: 860px) { .pv-szen--betont { transform: translateY(-8px); } }
.pv-szen--betont h4, .pv-szen--betont .pv-szen__k, .pv-szen--betont .pv-szen__text, .pv-szen--betont .pv-szen__wert small { color: var(--pv-text-hell); }
.pv-szen--betont .pv-szen__wert { color: var(--pv-gold); }
.pv-szen--betont dl > div { border-color: rgba(255, 255, 255, 0.16); }
.pv-szen--betont dd { color: #fff; }
.pv-szen__badge { position: absolute; top: -12px; right: 18px; background: var(--pv-btn); color: var(--pv-navy-dunkel); font-size: 0.75rem; font-weight: 900; border-radius: 999px; padding: 5px 12px; letter-spacing: 0.02em; }

/* Wärme */
.pv-waerme { border-radius: var(--pv-r-l); padding: clamp(20px, 3vw, 30px); background: linear-gradient(135deg, #fff7e8, #fff); border: 1.5px solid rgba(217, 139, 22, 0.35); }
.pv-waerme__kopf { display: flex; gap: 16px; align-items: flex-start; }
.pv-waerme__icon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--pv-btn); color: var(--pv-navy-dunkel); }
.pv-waerme__icon .pv-i { width: 30px; height: 30px; }
.pv-waerme h3 { font-size: 1.25rem; font-weight: 900; color: var(--pv-h1); letter-spacing: -0.02em; margin-bottom: 4px; }
.pv-waerme__form { margin-top: 16px; }
.pv-waerme__form > summary { list-style: none; display: inline-flex; }
.pv-waerme__form > summary::-webkit-details-marker { display: none; }
.pv-waerme__form[open] > summary { display: none; }
.pv-loesung { border-radius: var(--pv-r-l); padding: clamp(20px, 3vw, 30px); background: #fff; border: 2px solid var(--pv-amber); box-shadow: var(--pv-schatten); display: grid; gap: 14px; }
.pv-loesung h3 { font-size: 1.35rem; font-weight: 900; color: var(--pv-h1); letter-spacing: -0.02em; }
.pv-loesung__teile { display: grid; gap: 10px; }
@media (min-width: 760px) { .pv-loesung__teile { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pv-loesung__teile li { display: flex; gap: 12px; align-items: flex-start; background: var(--pv-paper); border-radius: var(--pv-r-m); padding: 14px; font-size: 0.88rem; }
.pv-loesung__teile .pv-i { width: 26px; height: 26px; color: var(--pv-amber-dunkel); flex: none; }
.pv-loesung__teile strong { display: block; color: var(--pv-ink); font-size: 1rem; }
.pv-loesung .pv-btn { justify-self: start; }

/* Steuer */
.pv-steuer { display: grid; gap: 18px 28px; border-radius: var(--pv-r-l); padding: clamp(20px, 3vw, 30px); background: var(--pv-soft); border: 1px solid var(--pv-linie); }
@media (min-width: 980px) { .pv-steuer { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .pv-steuer__hinweis, .pv-steuer > details { grid-column: 1 / -1; } }
.pv-steuer h3 { font-size: 1.3rem; font-weight: 900; color: var(--pv-h1); letter-spacing: -0.02em; margin: 4px 0 10px; }
.pv-steuer__text p + p { margin-top: 10px; }
.pv-steuer .pv-eyebrow { display: inline-flex; align-items: center; gap: 6px; }
.pv-steuer__form { background: #fff; border-radius: var(--pv-r-m); padding: 18px; border: 1px solid var(--pv-linie); align-content: start; }
.pv-steuer__form h4 { font-weight: 900; color: var(--pv-ink); }
.pv-steuer__ergebnis { border-top: 1px solid var(--pv-linie); padding-top: 12px; }
.pv-steuer__wert { font-size: 1.6rem; font-weight: 900; color: var(--pv-gruen); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pv-steuer__wert--null { color: var(--pv-text); }
.pv-steuer__hinweis { font-size: 0.8rem; background: #fff; border-radius: var(--pv-r-s); padding: 12px 14px; border-left: 4px solid var(--pv-petrol); }
.pv-zeitstrahl { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; counter-reset: none; }
.pv-zeitstrahl li { position: relative; padding: 14px 12px 0; border-top: 6px solid var(--pv-gruen); font-size: 0.85rem; }
.pv-zeitstrahl li.is-teil { border-top-color: #c4d0d8; border-top-style: dashed; }
.pv-zeitstrahl strong { display: block; color: var(--pv-ink); font-size: 0.95rem; }
.pv-quellen { display: grid; gap: 4px; margin: 8px 0; font-size: 0.82rem; }
.pv-quellen a { color: var(--pv-petrol); }

.pv-grundlagen { background: #fff; border: 1px solid var(--pv-linie); border-radius: var(--pv-r-l); padding: 6px clamp(16px, 2.5vw, 24px) 10px; }
.pv-grundlagen[open] { padding-bottom: 20px; }
.pv-grundlagen__liste { display: grid; gap: 4px; padding-left: 18px; list-style: disc; }

.pv-erg > .pv-vn, .pv-erg > .pv-szenarien, .pv-erg > .pv-waerme, .pv-erg > .pv-loesung, .pv-erg > .pv-steuer, .pv-erg > .pv-grundlagen { margin-top: 18px; }

@media print {
  .pv-waerme, .pv-grundlagen, .pv-steuer__form select { display: none !important; }
  .pv-szen--betont { background: #fff !important; color: var(--pv-ink) !important; border: 2px solid var(--pv-amber) !important; box-shadow: none; transform: none; }
  .pv-szen--betont * { color: var(--pv-ink) !important; }
  .pv-szen-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; }
  .pv-szen { padding: 10px; break-inside: avoid; }
  .pv-szen__wert { font-size: 18pt; }
  .pv-steuer, .pv-loesung, .pv-vn { break-inside: avoid; background: #fff !important; padding: 12px !important; }
  .pv-steuer__form label { display: none; }
}

@media print {
  @page { size: A4; margin: 10mm 12mm; }
  body { background: #fff !important; padding: 0 !important; }
  .pvx { font-size: 10.5pt; }
  /* Website-Header/-Footer und alles ausserhalb der PV-Inhalte ausblenden */
  body > header, body > footer, body > nav:not(.pv-sticky) { display: none !important; }
  /* eigene Regel: Browser ohne :has() verwerfen nur diese */
  body *:not(.pvx):not(:has(.pvx)):not(.pvx *):not(.pv-sprite):not(.pv-sprite *) { display: none !important; }
  .site-header, .site-footer, .mobile-cta-bar, .consent-banner, .pv-sticky, .pv-skip, .pv-hero, .pv-fakten, .pvx > section:not(.pv-rechner), .pv-rechner__kopf,
  .pv-schritt:not([data-schritt="ergebnis"]), .pv-erg__aktionen, .pv-varianten, .pv-chart-info, noscript { display: none !important; }
  .pv-rechner { padding: 0; background: none; }
  .pv-rechner__shell { box-shadow: none; border: 0; padding: 0; }
  .pv-container { padding: 0; max-width: none; }
  .pv-druckkopf { display: flex !important; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--pv-amber); padding-bottom: 8px; margin-bottom: 12px; }
  .pv-druckkopf img { height: 34px; width: auto; }
  .pv-druckvergleich { display: block !important; }
  .pv-druckfuss { display: block !important; font-size: 7.5pt; border-top: 1px solid #ccd6dd; padding-top: 6px; margin-top: 8px; }
  .pv-druckvergleich table { width: 100%; border-collapse: collapse; font-size: 9pt; }
  .pv-druckvergleich th, .pv-druckvergleich td { border-bottom: 1px solid #ccd6dd; padding: 2px 6px; text-align: right; }
  .pv-druckvergleich th:first-child, .pv-druckvergleich td:first-child { text-align: left; }
  .pv-kpi--haupt { background: #fff !important; border: 1.5px solid var(--pv-navy) !important; }
  .pv-kpi--haupt .pv-kpi__wert, .pv-kpi--haupt .pv-kpi__name, .pv-kpi--haupt .pv-kpi__zusatz { color: var(--pv-ink) !important; }
  .pv-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .pv-kpi--haupt { grid-column: auto !important; flex-direction: column !important; padding: 10px !important; }
  .pv-kpi { padding: 10px; }
  .pv-kpi__wert { font-size: 16pt; }
  .pv-kpi__name { font-size: 7pt; letter-spacing: 0.02em; }
  .pv-erg__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 10px; }
  .pv-karte-box { padding: 12px 14px !important; }
  .pv-druckvergleich { break-inside: avoid; }
  .pv-erg { display: block; }
  .pv-erg > * + * { margin-top: 10px; }
  .pv-erg__grid { display: block; }
  .pv-erg__grid > .pv-karte-box + .pv-karte-box { margin-top: 10px; }
  .pv-erg__grid > .pv-karte-box:first-child { break-inside: auto; }
  .pv-kosten > div, .pv-chart, .pv-legende { break-inside: avoid; }
  .pv-chart svg, svg.pv-chart { max-height: 50mm; width: 100%; }
  .pv-erg__hinweise { font-size: 7.5pt; line-height: 1.35; }
  .pv-kosten > div { padding: 4px 0; font-size: 9.5pt; }
  .pv-kosten .is-summe { padding-top: 6px; font-size: 10.5pt; }
  .pv-kosten .is-unter dt, .pv-kosten .is-unter dd { font-size: 9pt; }
  .pv-karte-box, .pv-kpi, .pv-erg__hinweise p { break-inside: avoid; }
  .pv-aufklapp > *:not(summary) { display: block !important; }
  .pv-aufklapp summary { display: none; }
  .pv-schritt { animation: none; }
  a[href]::after { content: none !important; }
}

/* ---------------------------------------------------------------- Eigenständige Rechnerseite /solarrechner */

.pv-seitenkopf { padding: calc(var(--pv-header-h) + clamp(28px, 5vw, 56px)) 0 0; background: var(--pv-soft); }
.pv-seitenkopf .pv-lead { max-width: 760px; }
.pv-seitenkopf + .pv-rechner { padding-top: clamp(24px, 4vw, 40px); }
.pv-brotkrumen { font-size: 0.85rem; margin-bottom: 14px; color: var(--pv-text); }
.pv-brotkrumen a { color: var(--pv-text); }