/* solar-guide.ch – Förderrechner und Energiesparrechner (Vorlage _src/pages/rechner.html, Skript rechner.js).
   Formular links, Ergebnis rechts; auf schmalen Bildschirmen untereinander. Farben und Masse aus site.css. */
.rechner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.rechner h2 { font-size: clamp(1.35rem, 1.1rem + .7vw, 1.65rem); line-height: 1.2; letter-spacing: -.025em; }
.rechner__form { display: grid; gap: 18px; }
.rechner__feld { position: relative; display: grid; gap: 6px; }
.rechner__feld label { font-size: 15px; font-weight: 600; color: var(--ink); }
.rechner__feld label span { font-weight: 450; color: var(--ink-3); }
.rechner__feld input { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid #9aa4a0; border-radius: var(--radius); background: #fff; color: var(--ink); font: inherit; font-size: 16.5px; }
.rechner__feld input:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.rechner__feld input[aria-invalid="true"] { border-color: #b3261e; }
.rechner__hilfe { font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.rechner__liste { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin: 4px 0 0; padding: 4px; list-style: none; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-pop); }
.rechner__liste li { padding: 10px 12px; border-radius: 3px; font-size: 15.5px; cursor: pointer; }
.rechner__liste li:hover, .rechner__liste li[aria-selected="true"] { background: var(--green-50); }
.rechner__fehler { font-size: 15px; font-weight: 560; color: #b3261e; }
.rechner__form .btn { justify-self: start; }
.rechner__form .btn[disabled] { opacity: .6; cursor: progress; }
.rechner__klein { font-size: 14px; color: var(--ink-3); }

.rechner__ergebnis { min-height: 280px; padding: clamp(22px, 3vw, 34px); border-radius: var(--radius); background: var(--band); }
.rechner__leer p, .rechner__warten p { margin-top: 10px; color: var(--ink-2); }
.rechner__ort { margin-top: 6px; font-size: 15px; color: var(--ink-3); }
.rechner__zahl { margin-top: 22px; }
.rechner__zahl b { display: block; font-size: clamp(2.1rem, 1.6rem + 1.6vw, 2.9rem); line-height: 1.05; font-weight: 720; letter-spacing: -.04em; color: var(--green); font-variant-numeric: tabular-nums; }
.rechner__zahl span { display: block; margin-top: 8px; font-size: 16px; font-weight: 600; color: var(--ink); }
.rechner__zahl small { display: block; margin-top: 3px; font-size: 14.5px; color: var(--ink-2); }
.rechner__werte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 26px 0 0; }
.rechner__werte div { padding-top: 12px; border-top: 1px solid var(--line); }
.rechner__werte dt { font-size: 14px; color: var(--ink-3); }
.rechner__werte dd { margin: 3px 0 0; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rechner__werte dd small { display: block; font-size: 13.5px; font-weight: 450; color: var(--ink-3); }
.rechner__ergebnis h3 { margin-top: 28px; font-size: 17px; letter-spacing: -.01em; }
.rechner__programme { margin: 12px 0 0; padding: 0; list-style: none; }
.rechner__programme li { padding: 14px 0; }
.rechner__programme li + li { border-top: 1px solid var(--line); }
.rechner__programme b { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 16px; }
.rechner__programme b span { font-weight: 600; color: var(--green); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rechner__programme small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ink-3); }
.rechner__programme p { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.rechner__text { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.rechner__hinweise { margin: 10px 0 0; padding-left: 18px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.rechner__weiter { margin-top: 26px; }
.rechner__stand { margin-top: 18px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.rechner__warten { display: flex; flex-direction: column; justify-content: center; min-height: 220px; }
.rechner__warten::before { content: ""; width: 34px; height: 34px; margin-bottom: 18px; border: 3px solid var(--line); border-top-color: var(--green); border-radius: 50%; animation: rechner-dreh .9s linear infinite; }
@keyframes rechner-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rechner__warten::before { animation: none; } }

/* Energiesparrechner «Vorher und nachher» (vom Inhaber am 05.10.2026 gewählt): oben die Stromrechnung als Regler über die ganze Breite,
   darunter links die Ersparnis mit Handlung, rechts zwei Balken (Stromkosten heute, mit Solaranlage) und die 25 Jahre im Überblick.
   Offen auf Weiss, ohne Karte; Grün trägt Zahl und Handlung. */
.spar-buehne { padding-top: clamp(40px, 5vw, 72px); }
.spar { display: grid; gap: clamp(40px, 5.4vw, 72px); }
.spar__frage { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; }
/* Schriftgrade, ruhig gehalten (Vorgabe des Inhabers vom 06.10.2026): eine grosse Zahl (die Ersparnis), der eingestellte Betrag deutlich kleiner,
   beide Überschriften gleich gross; darunter nur vier Grade: 19px Balkenwerte, 16.5px Text, 15px Nebentext, 13.5px Kleingedrucktes */
.spar__betrag, .spar__zahl { line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spar__betrag { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.625rem); letter-spacing: -.03em; color: var(--ink); text-align: right; }
.spar__zahl { margin-top: 14px; font-size: clamp(2.75rem, 1.9rem + 3vw, 4rem); letter-spacing: -.04em; color: var(--green); }
.spar__betrag small, .spar__zahl small { font-size: 16.5px; line-height: 1.3; font-weight: 450; letter-spacing: -.005em; color: var(--ink-3); }
.spar__betrag small { margin-left: 8px; }
.spar__zahl small { display: block; margin-top: 8px; }
.spar .spar__frage h2 { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem); line-height: 1.25; letter-spacing: -.02em; }      /* wie die Überschrift der Antwort */
.spar__eingabe input[type=range] { --stand: 50%; display: block; width: 100%; height: 44px; margin: 14px 0 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.spar__eingabe input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--green) var(--stand), var(--line) var(--stand)); }
.spar__eingabe input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
.spar__eingabe input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--green); }
.spar__eingabe input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -12px; border: 3px solid #fff; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 1px var(--green); transition: transform .2s var(--ease-out); }
.spar__eingabe input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border: 3px solid #fff; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 1px var(--green); }
.spar__eingabe input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
.spar__eingabe input[type=range]:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 3px; }
.spar__skala { display: flex; justify-content: space-between; margin-top: -4px; font-size: 13.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.spar__antwort { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.spar .spar__zahlblock h2 { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem); line-height: 1.25; letter-spacing: -.02em; }      /* stärker als .sec h2 der Site, die nach dieser Datei geladen wird */
.spar__zeit { margin-top: 18px; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.spar__zeit b { font-weight: 650; color: var(--ink); }
.spar__bund { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.spar__zahlblock .btn { margin-top: clamp(22px, 2.6vw, 30px); }
.spar__klein { margin-top: 12px; max-width: 34em; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.spar__stand { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }

/* die zwei Balken: «heute» füllt die ganze Breite, der grüne Balken zeigt, was mit der Anlage bleibt; die helle Fläche daneben ist die Ersparnis */
.spar__zeile + .spar__zeile { margin-top: 22px; }
.spar__zeile p { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 16.5px; color: var(--ink-2); }
.spar__zeile b { font-size: 19px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.spar__spur { position: relative; height: 44px; margin-top: 8px; overflow: hidden; background: var(--band); }
.spar__spur i { position: absolute; inset: 0; transform-origin: left center; transition: transform .5s var(--ease-out); }
.spar__spur .ist-heute { background: var(--ink-2); }
.spar__spur .ist-solar { background: var(--green); }
.spar__spur--solar { background: var(--green-50); box-shadow: inset 0 0 0 1px #c3d5c9; }
.spar__spur--solar span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 15px; font-weight: 600; color: var(--green); white-space: nowrap; transition: opacity .2s; }
.spar__spur--solar.ist-eng span { opacity: 0; }
.spar__lesart { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.spar .spar__bild h3 { margin-top: clamp(30px, 3.4vw, 44px); margin-bottom: 12px; font-size: 16.5px; font-weight: 600; letter-spacing: -.005em; }
/* 25 Jahre der Rechnung: graue Jahre zahlen die Anlage ab, grüne sind frei. Beim Regeln läuft der Wechsel als Welle durch die Leiste */
.spar__leiste { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 3px; height: 30px; }
.spar__leiste i { background: #cfd5d9; transition: background-color .5s var(--ease-out); transition-delay: calc(var(--n, 0) * 14ms); }
.spar__leiste i.ist-frei { background: var(--green); }
.spar__legende { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.spar__legende span { display: inline-flex; align-items: center; gap: 8px; }
.spar__legende i { width: 12px; height: 12px; background: #cfd5d9; }
.spar__legende i.ist-frei { background: var(--green); }
@media (max-width: 900px) {
  /* untereinander: erst die Zahl, dann die Balken, dann Handlung und Hinweise */
  .spar__antwort { display: flex; flex-direction: column; gap: 0; }
  .spar__zahlblock { display: contents; }
  .spar__zahlblock > * { order: 3; }
  .spar__zahlblock > h2, .spar__zahlblock > .spar__zahl { order: 1; }
  .spar__bild { order: 2; margin: 30px 0 8px; }
  .spar__betrag { text-align: left; }
}
@media (max-width: 639px) {
  .spar { gap: 34px; }
  .spar__zeile b { font-size: 18px; }
  .spar__spur { height: 40px; }
  .spar__zahlblock .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .spar__leiste i, .spar__spur i, .spar__eingabe input[type=range]::-webkit-slider-thumb { transition: none; } }

.rechner__so { max-width: 760px; }
.rechner__so ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.rechner__so li, .rechner__so p { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.rechner__so p { margin-top: 16px; }

@media (max-width: 900px) {
  .rechner { grid-template-columns: minmax(0, 1fr); }
  .rechner__ergebnis { min-height: 0; }
}
@media (max-width: 480px) {
  .rechner__werte { grid-template-columns: minmax(0, 1fr); }
  .rechner__form .btn { justify-self: stretch; justify-content: center; }
}

/* Förderrechner für Batteriespeicher (Vorlage _src/pages/foerderrechner-bateriespeicher-schweiz.html, Skript speicherrechner.js):
   die Auswahl des Kantons sieht aus wie die Eingabefelder; eine Antwort in Worten («Keine Förderung möglich») steht kleiner als ein Betrag. */
.rechner__feld select { width: 100%; min-height: 50px; padding: 0 40px 0 14px; border: 1px solid #9aa4a0; border-radius: var(--radius); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111a14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px; color: var(--ink); font: inherit; font-size: 16.5px; -webkit-appearance: none; appearance: none; }
.rechner__feld select:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.rechner__zahl b.ist-text { font-size: clamp(1.5rem, 1.25rem + .9vw, 1.9rem); line-height: 1.15; letter-spacing: -.03em; color: var(--ink); }
.rechner__ergebnis .more { font-size: 15.5px; }