/* Wirtschaftlichkeitsrechner — Glas-Fassung.
   Genutzt von rechner.html (volle Fassung) und index.html (.rg-kompakt).
   Markup: _includes/rechner-tool.html — Logik: js/rechner.js
   Wird nach css/style.css geladen und überschreibt dort gezielt die Bühne. */

/* ---------- Bühne: dunkler Grund mit zwei weichen, warmen Lichtern ---------- */
.rg-buehne {
  background: #08090a;
  background-image: none !important;   /* seitenweites Punkt-/Linienraster hier aus */
  color: var(--dark-text);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.rg-buehne::before,
.rg-buehne::after {
  content: "";
  position: absolute;
  inset: auto;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
.rg-buehne::before {
  width: 720px; height: 620px; left: -120px; top: 260px;
  background: radial-gradient(circle, rgba(224, 89, 16, 0.1), rgba(224, 89, 16, 0) 70%);
}
/* Nur noch ein warmes Licht rechts oben (vorher zusaetzlich ein violettes: zu bunt) */
.rg-buehne::after {
  width: 820px; height: 700px; right: -160px; top: 120px;
  background: radial-gradient(circle, rgba(255, 170, 90, 0.16), rgba(255, 170, 90, 0) 68%);
}
.rg-buehne > .wrap { position: relative; z-index: 1; }

/* ---------- Glaskarten ---------- */
.rg {
  position: relative;
  /* Ein Satz Masse fuer alle Auswahlfelder - so bleiben sie gleich gross */
  --rg-feld-h: 76px;
  --rg-knopf-h: 44px;
  --rg-luecke: 10px;
}
.rg-kompakt { margin-top: clamp(24px, 3vw, 34px); }
.rg-karte {
  position: relative;
  border-radius: 18px;
  padding: clamp(20px, 2vw, 30px);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035) 40%, rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 30px 80px -30px rgba(0, 0, 0, 0.8);
}
/* Lichtkante, die schräg über die Karte läuft */
.rg-karte::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.1), transparent 28%, transparent 72%, rgba(255, 255, 255, 0.05));
}
/* Schwache Hardware und Browser ohne backdrop-filter: solide Fläche statt Unschärfe */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rg-karte { background: #17181a; }
}
@media (max-width: 700px) {
  .rg-karte { backdrop-filter: blur(12px) saturate(130%); -webkit-backdrop-filter: blur(12px) saturate(130%); }
}

/* ---------- Kopfzeile mit den Profilen ---------- */
.rg-profile {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 8px; margin: 0 0 20px;
}
.rg-marke-zeile {
  font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--dark-text-2); margin-right: auto;
}
.rg-profile-titel {
  font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--dark-text-2); margin-right: 6px;
}
/* Alle drei gleich breit und gleich hoch (Grid statt Flex: keine Restbreite beim letzten Knopf) */
.rg-profile-btns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.rg-profile-btns button {
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--dark-text);
  border-radius: 999px; padding: 0 18px; min-height: var(--rg-knopf-h);
  font: 500 14px var(--font); cursor: pointer; white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.rg-profile-btns button:hover { border-color: rgba(255, 255, 255, 0.34); }

/* ---------- Raster ---------- */
/* Beide Karten sind Rasterzellen derselben Zeile: durch das voreingestellte
   Strecken schliessen sie unten gleich hoch ab. Den freien Platz bekommt
   drinnen die Kurve (.rg-chartbox), damit kein Loch entsteht. */
.rg-grid {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: clamp(18px, 2vw, 28px);
}
.rg-rechnung { display: flex; flex-direction: column; min-height: 0; }

/* ---------- Haus ---------- */
.rg-foto {
  position: relative; margin: -4px 0 10px;
  border-radius: 14px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.rg-foto svg { display: block; width: 100%; height: auto; }
.rg-licht { mix-blend-mode: soft-light; }
.rg-foto [data-lichtband] { transition: transform 2.4s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(260px); }
.rg-foto.ist-ostwest [data-lichtband] { animation: rgWandern 7s ease-in-out infinite alternate; }
@keyframes rgWandern { from { transform: translateX(-80px); } to { transform: translateX(760px); } }
.rg-foto [data-speicherglow] { transition: opacity 0.6s var(--ease); }
.rg-foto [data-kanten] polygon {
  fill: none; stroke: var(--accent-bright); stroke-width: 3; opacity: 0;
  filter: drop-shadow(0 0 8px var(--accent-bright));
}
.rg-foto [data-kanten] polygon.ist-neu { animation: rgNeu 0.6s ease-out; }
@keyframes rgNeu { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.rg-foto figcaption {
  position: absolute; left: 12px; right: 12px; bottom: 10px;
  display: flex; justify-content: space-between; gap: 8px; pointer-events: none;
}
.rg-foto figcaption span {
  background: rgba(10, 10, 11, 0.62);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--dark-text); font-size: 12px; padding: 5px 10px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---------- Regler ---------- */
.rg-feld { margin-top: 26px; }
.rg-feld-kopf, .rg-label { display: block; font-size: 15px; font-weight: 500; color: var(--dark-text); }
.rg-feld-kopf { margin-bottom: 52px; }
.rg-label { margin-bottom: 10px; }
.rg-hinweis { margin-top: 26px; font-size: 12.5px; color: var(--dark-text-2); }
.rg-regler { position: relative; height: 6px; }
.rg-spur { display: block; height: 6px; border-radius: 9px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.rg-spur i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright)); }
.rg-knopf {
  position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 5px solid var(--accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 6px rgba(224, 89, 16, 0.18);
  pointer-events: none;
}
.rg-knopf em {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-style: normal;
  background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 8px;
}
.rg-knopf em::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px;
  border: 5px solid transparent; border-top-color: var(--accent); border-bottom: 0;
}
.rg-knopf em { transform: translateX(calc(-50% + var(--rg-schub, 0px))); }
.rg-knopf em::after { left: calc(50% - var(--rg-schub, 0px)); }
/* Der echte Regler liegt unsichtbar darüber: Maus, Touch und Tastatur bleiben nativ */
.rg-regler input[type="range"] {
  position: absolute; inset: -16px 0; width: 100%; height: auto;
  margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: none;
}
.rg-regler input[type="range"]:focus-visible { outline: none; }
.rg-regler:focus-within .rg-knopf { box-shadow: 0 0 0 4px #08090a, 0 0 0 7px var(--accent-bright); }
.rg-marke {
  position: absolute; top: 14px; transform: translateX(-50%);
  font-size: 11px; color: var(--dark-text-2); white-space: nowrap; pointer-events: none;
}
.rg-marke b { display: block; width: 1px; height: 8px; background: #55585e; margin: 0 auto 4px; }
.rg-feld:has(.rg-regler-marken) { padding-bottom: 30px; }

/* ---------- Umschalter und Chips ---------- */
/* Auswahlfelder (Ausrichtung, Speicher, Zubuchbares): dasselbe Raster, dieselbe
   Kachelgroesse - egal ob zwei oder vier Optionen. minmax(0,1fr) haelt alle Zellen gleich breit. */
.rg-toggle, .rg-chips {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--rg-luecke);
}
.rg-toggle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rg :is(.rg-toggle, .rg-chips) button {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  min-height: var(--rg-feld-h); box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--dark-text); border-radius: 12px; padding: 10px 14px;
  font: 500 14.5px var(--font); cursor: pointer; text-align: left;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.rg :is(.rg-toggle, .rg-chips) button small { font-size: 11.5px; color: var(--dark-text-2); font-weight: 400; }
.rg :is(.rg-toggle, .rg-chips) button:hover { border-color: rgba(255, 255, 255, 0.3); }
/* Ein einziger Aktiv-Stil fuer alle Auswahlknoepfe: ruhige Orangeflaeche statt
   zwei konkurrierender Akzente (vorher Weiss oben, Vollorange unten). */
.rg :is(.rg-toggle, .rg-chips, .rg-profile-btns) button[aria-pressed="true"] {
  background: rgba(224, 89, 16, 0.22);
  border-color: rgba(255, 139, 77, 0.75);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 139, 77, 0.35);
}
.rg :is(.rg-toggle, .rg-chips) button[aria-pressed="true"] small { color: #ffbd94; }
.rg :is(.rg-toggle, .rg-chips, .rg-profile-btns, .rg-schalter) button:focus-visible {
  outline: 2px solid var(--accent-bright); outline-offset: 2px;
}

/* ---------- Kennzahlenband ---------- */
.rg-band {
  /* Vier Kennzahlen in zwei Reihen: in der schmalen Ergebniskarte waeren vier
     Spalten zu eng (abgeschnittene Beschriftungen). */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid rgba(255, 255, 255, 0.12); padding-bottom: 24px;
}
.rg-kz { display: flex; gap: 14px; min-width: 0; min-height: 88px; box-sizing: border-box; }
.rg-kz:nth-child(even) { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, 0.12); }
.rg-kz:nth-child(odd) { padding-right: 22px; }
.rg-kz:nth-child(n+3) { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.rg-ikon {
  width: 44px; height: 44px; flex: 0 0 auto;
  fill: none; stroke: var(--accent-bright); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.rg-kz small { display: block; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #b9bbbe; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-kz b {
  display: block; white-space: nowrap;
  font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; color: #fff;
  letter-spacing: -0.03em; line-height: 1; margin: 8px 0 6px;
  font-variant-numeric: tabular-nums;
}
.rg-kz b small { display: inline; font-size: 0.6em; letter-spacing: 0; text-transform: none; color: #fff; }
.rg-kz > div > span { font-size: 13px; color: var(--dark-text-2); display: block; }

/* ---------- Autarkie-Ring als vierte Kennzahl ---------- */
.rg-kz-autarkie { align-items: center; }
.rg-kz-autarkie > div { min-width: 0; }
.rg-kz-autarkie small { margin-bottom: 8px; white-space: normal; }
.rg-kompakt .rg-fuss { margin-top: 20px; align-items: center; }
/* Kompakt: die Aufstellung steht offen da, der Aufklapper waere hier zu viel Klickerei */
.rg-kompakt .rg-aufstellung { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.rg-kompakt .rg-aufstellung > .rg-kaps { margin-bottom: 4px; }
/* Zahl und Kreis liegen in derselben Grid-Zelle und werden dort zentriert.
   text-box trimmt die Zeile auf Versalhöhe bis Grundlinie, so sitzen die
   Ziffern optisch mittig (vorher: magischer negativer Rand, zu tief). */
.rg-ring { display: grid; justify-items: center; text-align: center; flex: 0 0 auto; }
.rg-ring svg { grid-area: 1 / 1; width: 82px; height: 82px; transform: rotate(-90deg); }
.rg-ring circle { fill: none; stroke-width: 10; stroke: rgba(255, 255, 255, 0.12); }
.rg-ring .rg-ring-fuell { stroke: var(--accent-bright); transition: stroke-dashoffset 0.7s var(--ease); }
.rg-ring b { grid-area: 1 / 1; align-self: center; display: block; font-size: 22px; line-height: 1; text-box: trim-both cap alphabetic; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
/* ---------- Stromkosten: zwei Balken nebeneinander unter dem Band ---------- */
.rg-kosten { margin-top: 20px; }
.rg-kzeilen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.rg-kaps { display: block; font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dark-text-2); }
.rg-kzeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: 8px 12px; font-size: 13.5px; color: var(--dark-text-2); margin-top: 10px;
}
.rg-kzeile > span:first-child { grid-area: 1 / 1; }
.rg-kzeile b { grid-area: 1 / 2; justify-self: end; white-space: nowrap; }
.rg-kzeile .rg-bar { grid-area: 2 / 1 / 3 / 3; }
.rg-bar { display: block; height: 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.rg-bar i { display: block; height: 100%; background: rgba(255, 255, 255, 0.3); transition: width 0.5s var(--ease); }
.rg-bar-gut i { background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright)); }
.rg-kzeile b { color: #fff; font-variant-numeric: tabular-nums; }

/* ---------- Kurve: Hauptdarsteller, nimmt den Rest der Karte ---------- */
/* Die Kurve wird absolut ueber den Rahmen gelegt: so kann sie die Hoehe des
   Rahmens nicht beeinflussen (kein Rueckkopplungs-Loop beim Messen), und
   js/rechner.js setzt die viewBox auf genau dieses Seitenverhaeltnis. */
.rg-chartbox { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-top: 22px; }
.rg-chart-wrap { position: relative; flex: 1 1 auto; min-height: 250px; }
.rg-chart-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.rg-chart-kopf h3 { font-size: 16px; color: #fff; font-weight: 500; }
.rg-schalter { display: flex; gap: 4px; padding: 4px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
.rg-schalter button {
  padding: 7px 16px; border-radius: 999px; font: 400 13px var(--font);
  color: var(--dark-text-2); background: none; border: 0; cursor: pointer;
}
.rg-schalter button[aria-pressed="true"] { color: var(--accent-bright); box-shadow: inset 0 0 0 1px rgba(255, 139, 77, 0.55); }
.rg-chart { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.rg-chart .rg-g { stroke: rgba(255, 255, 255, 0.07); }
.rg-chart .rg-g-null { stroke: rgba(255, 255, 255, 0.3); }
.rg-chart .rg-gv { stroke: rgba(255, 255, 255, 0.08); stroke-dasharray: 4 5; }
.rg-chart .rg-ax { fill: var(--dark-text-2); font-size: 18px; }
.rg-chart .rg-linie { fill: none; stroke: var(--accent-bright); stroke-width: 2.6; }
.rg-chart .rg-amort { fill: #fff; stroke: #0b0c0d; stroke-width: 2; }
.rg-chart .rg-amort-txt { fill: #fff; font-size: 18px; }
.rg-chart .rg-mk { stroke: rgba(255, 255, 255, 0.3); stroke-dasharray: 4 5; }
.rg-chart .rg-punkt { fill: var(--accent-bright); stroke: #0b0c0d; stroke-width: 3; }
.rg-chart .rg-endpunkt { fill: #17181a; stroke: var(--accent-bright); stroke-width: 2.5; }
.rg-chart .rg-endwert { fill: var(--accent-bright); font-size: 20px; font-weight: 600; }
.rg-tip {
  position: absolute;
  --rg-tx: -50%; --rg-ty: calc(-100% - 18px);
  transform: translate(var(--rg-tx), var(--rg-ty));
  background: rgba(16, 17, 18, 0.96); border: 1px solid rgba(255, 139, 77, 0.45);
  border-radius: 10px; padding: 8px 12px; white-space: nowrap;
  font-size: 12px; color: var(--dark-text-2); pointer-events: none;
}
.rg-tip.ist-rechts { --rg-tx: calc(-100% - 10px); }
.rg-tip.ist-unten { --rg-ty: 18px; }
.rg-tip span { display: block; font-size: 11px; }
.rg-tip b { font-size: 18px; color: #fff; }
.rg-tip em { display: block; font-style: normal; color: var(--accent-bright); margin-top: 3px; }

/* ---------- Fuß: Finanzierung, Aufklapper, CTA ---------- */
.rg-fuss {
  display: flex; justify-content: space-between; gap: 20px;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12);
  flex-wrap: wrap; align-items: flex-start;
}
.rg-fuss-text { flex: 1 1 240px; min-width: 0; }
.rg-cta-box { flex: 0 0 auto; }
.rg-klein { font-size: 13px; color: var(--dark-text-2); line-height: 1.6; }
.rg-klein b { color: #fff; font-variant-numeric: tabular-nums; }
.rg-details { display: inline-block; vertical-align: top; margin: 10px 24px 0 0; font-size: 13px; color: var(--dark-text-2); }
.rg-details[open] { display: block; margin-right: 0; }
.rg-details summary { cursor: pointer; list-style: none; color: var(--dark-text-2); }
.rg-details summary::-webkit-details-marker { display: none; }
.rg-details summary::after { content: " +"; color: var(--accent-bright); }
.rg-details[open] summary::after { content: " –"; }
.rg-details summary:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; border-radius: 4px; }
.rg-details > :not(summary) { margin-top: 10px; line-height: 1.6; }
.rg-preisliste { list-style: none; margin: 10px 0 0; padding: 0; }
.rg-preisliste li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.rg-preisliste li b { color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rg-summe { display: flex; justify-content: space-between; gap: 16px; padding-top: 10px; }
.rg-summe[hidden] { display: none; }
.rg-summe b { color: #fff; font-size: 17px; font-variant-numeric: tabular-nums; }
.rg-cta-box { text-align: right; }
.rg-mehr { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--accent-bright); text-decoration: none; }
.rg-mehr:hover { text-decoration: underline; }
.rg-mehr:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; border-radius: 4px; }
.rg-cta {
  display: inline-flex; align-items: center; gap: 16px;
  background: #fe863d; color: #111; border-radius: 999px;
  padding: 14px 26px 14px 16px; font-weight: 600; font-size: 17px;
  white-space: nowrap; text-decoration: none;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.rg-cta:hover { background: #ff9a5c; transform: translateY(-2px); }
.rg-cta:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 3px; }
.rg-cta i { width: 38px; height: 38px; border-radius: 50%; background: #111; color: #fe863d; display: grid; place-items: center; font-style: normal; }
.rg-cta-sub { display: block; font-size: 12px; color: var(--dark-text-2); margin-top: 8px; }

/* ---------- Ergebnis bleibt sichtbar ----------
   Nur wenn die Karte in den Viewport passt (js/rechner.js setzt .rg-haftet),
   sonst scrollt sie normal mit und schliesst unten buendig mit den Eingaben ab. */
@media (min-width: 1081px) {
  .rg-haftet:not(.rg-kompakt) .rg-rechnung {
    position: sticky; top: calc(var(--nav-h) + 16px); align-self: start;
  }
}

/* Feste Leiste auf dem Handy, nur auf der Rechner-Seite */
.rg-leiste { display: none; }
@media (max-width: 760px) {
  .rg:not(.rg-kompakt) .rg-leiste {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 12px clamp(14px, 4vw, 20px);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(12, 13, 14, 0.88);
    backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .rg-leiste p { font-size: 12.5px; color: var(--dark-text-2); line-height: 1.35; min-width: 0; }
  .rg-leiste p b { display: block; font-size: 18px; color: #fff; font-variant-numeric: tabular-nums; }
  .rg-leiste .btn { flex: 0 0 auto; padding: 11px 18px; font-size: 14px; }
  /* Platz, damit die Leiste den Seiteninhalt nicht verdeckt */
  body:has(.rg:not(.rg-kompakt)) { padding-bottom: 74px; }
}

/* ---------- Ergebniskarte füllt die Zeile ----------
   Die Eingabekarte links bestimmt die Höhe der Zeile, die Ergebniskarte wird
   darauf gestreckt (Grid-Standard). Damit unten keine leere Fläche bleibt,
   sind die Kennzahlen oben grösser, und auf der Startseite (kompakt, ohne
   Kurve) teilen sich Kennzahlen, Stromkosten und Preisaufstellung den Rest per
   flex-grow, jede Gruppe zentriert ihren Inhalt: der Fuss mit dem Button sitzt
   immer am Kartenende, egal wie lang die Zahlen oder die Preisliste sind. */
@media (min-width: 701px) {
  .rg-band { padding-bottom: 30px; }
  .rg-kz { gap: 18px; min-height: 112px; align-items: center; }
  .rg-kz:nth-child(n+3) { margin-top: 26px; padding-top: 26px; }
  .rg-ikon { width: 56px; height: 56px; }
  .rg-kz small { font-size: 12.5px; }
  .rg-kz b { font-size: clamp(30px, 2.9vw, 44px); margin: 10px 0 8px; }
  .rg-kz > div > span { font-size: 14px; }
  .rg-ring svg { width: 104px; height: 104px; }
  .rg-ring b { font-size: 28px; }
  .rg-kz-autarkie small { margin-bottom: 10px; }
  .rg-kaps { font-size: 11px; }
  .rg-kzeile { font-size: 15px; }
  .rg-bar { height: 12px; }
  .rg-chart-kopf h3 { font-size: 17px; }

  .rg-kompakt .rg-band { flex: 3 1 auto; grid-auto-rows: minmax(0, 1fr); }
  .rg-kompakt .rg-kosten,
  .rg-kompakt .rg-aufstellung { display: flex; flex-direction: column; justify-content: center; }
  .rg-kompakt .rg-kosten { flex: 1.2 1 auto; margin-top: 0; padding-top: 22px; }
  .rg-kompakt .rg-aufstellung { flex: 1.6 1 auto; margin-top: 0; padding-top: 22px; }
  .rg-kompakt .rg-aufstellung { border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .rg-kompakt .rg-kosten { border-top: 0; }
  .rg-kompakt .rg-preisliste li { padding: 10px 0; font-size: 16px; }
  .rg-kompakt .rg-summe { padding-top: 12px; }
  .rg-kompakt .rg-summe b { font-size: 19px; }
  .rg-kompakt .rg-fuss { margin-top: 0; }
  .rg-kompakt .rg-klein { font-size: 14px; }
}

/* ---------- Umbrüche ---------- */
@media (max-width: 1080px) {
  /* minmax(0,...) statt 1fr: sonst sprengt ein langer Knopftext die Spalte */
  .rg-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .rg-profile { justify-content: flex-start; }
  .rg-marke-zeile { flex: 1 0 100%; margin: 0 0 4px; }
  .rg-chips { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
  .rg-profile-btns { flex: 1 1 100%; }
  .rg-band { grid-template-columns: 1fr; gap: 0; padding-bottom: 20px; }
  .rg-kz { min-height: 104px; }
  .rg-kz-autarkie { min-height: 0; }
  .rg-kz:nth-child(n) { padding: 0; border-left: 0; border-top: 0; margin-top: 0; }
  .rg-kz + .rg-kz { border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: 18px; padding-top: 18px; }
  .rg-kzeilen { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rg-kz b { font-size: 28px; }
  .rg-fuss { flex-direction: column; align-items: stretch; }
  .rg-fuss-text { flex: 0 0 auto; }
  .rg-cta-box { text-align: left; }
  .rg-cta { display: flex; width: 100%; justify-content: center; white-space: normal; text-align: left; font-size: 15px; }
  .rg-cta i { width: 32px; height: 32px; flex: 0 0 auto; }
  .rg-chart .rg-ax, .rg-chart .rg-amort-txt { font-size: 21px; }
  .rg-chart .rg-endwert { font-size: 23px; }
  .rg-tip { font-size: 12px; padding: 8px 10px; }
}
@media (max-width: 460px) {
  .rg-marke-zeile {
  font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--dark-text-2); margin-right: auto;
}
.rg-profile-titel { display: none; }
  .rg-profile-btns button { padding: 9px 14px; font-size: 13px; }
  .rg { --rg-luecke: 8px; }
  .rg-profile-btns button { padding: 0 10px; }
  .rg-chips button { padding: 9px 11px; font-size: 13.5px; }
  .rg-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-foto figcaption { flex-direction: column; align-items: flex-start; gap: 5px; }
  .rg-tip { display: none; }   /* auf dem schmalen Schirm steht die Karte über der Kurve im Weg */
}

/* ---------- Bewegung sparsam ---------- */
@media (prefers-reduced-motion: reduce) {
  .rg-foto.ist-ostwest [data-lichtband] { animation: none; transform: translateX(300px); }
  .rg-foto [data-kanten] polygon.ist-neu { animation: none; }
  .rg-foto [data-lichtband], .rg-foto [data-speicherglow], .rg-ring .rg-ring-fuell, .rg-bar i { transition: none; }
  .rg-cta { transition: none; }
}


/* Gewerbe-Karte: deutlich orange hervorgehobener Button auf dunklem Grund */
.btn-orange {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent-bright); color: #16181b; border: 0;
  padding: 16px 28px; border-radius: 999px; font-weight: 600; font-size: 16px; text-decoration: none;
  box-shadow: 0 10px 30px -12px rgba(255, 139, 77, .7);
  transition: background .25s, transform .25s var(--ease);
}
.btn-orange span { display: inline-flex; align-items: center; gap: 10px; }
.btn-orange:hover { background: #ffa06b; transform: translateY(-2px); }
.btn-orange:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Dachtyp-Fotos (echte Projekte) statt gezeichnetem Haus */
.rg-foto { aspect-ratio: 3 / 2; background: #1a1c1f; }
.rg-dachfoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s var(--ease); }
.rg-dachfoto.ist-an { opacity: 1; }
.rg-toggle.rg-toggle-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }