/* ============================================================
   ZUSATZ-REGELN A — balkonkraftwerk.html · photovoltaik-privat.html
   Nur Regeln, für die es in tokens/base/components/sections keine
   Entsprechung gibt. Ausschliesslich Tokens, keine Hex- oder px-Werte.
   ============================================================ */

/* ------------------------------------------------------------
   1 · .on-light — helle Insel in einer dunklen Sektion
   Warum neu: Die China-Vergleichstabelle steht laut Konzept auf dunklem
   Grund. `.compare` bringt jedoch eigene helle Zellflächen mit
   (thead, .compare__col--us) und `.verdict` ebenfalls — der von
   `.section--invert` geerbte weisse Text wäre darin unlesbar. Statt
   Farbwerte zu überschreiben, dreht `.on-light` die semantische Ebene
   zurück, genau spiegelbildlich zu `.on-dark` in tokens.css.
   ------------------------------------------------------------ */
.on-light {
  --bg: var(--white);
  --bg-muted: var(--grey-200);
  --text: var(--ink);
  --text-muted: var(--ink-60);
  --border: var(--grey);
  --border-strong: var(--grey-500);
  background: var(--bg);
  color: var(--text);
}
.on-light .eyebrow { color: var(--green-600) }
.on-light .arrowlink { color: var(--green) }
.on-light .checks svg { color: var(--green-600) }

/* ------------------------------------------------------------
   2 · .region__chip — Ort ohne eigene Unterseite
   Warum neu: `.region__list` stylt bisher nur `a`. Beide Seiten führen
   aber alle acht Orte des Einsatzgebiets auf, von denen nur drei eine
   eigene Seite haben. Die übrigen brauchen dieselbe Chip-Form, dürfen
   aber weder wie ein Link aussehen noch auf Hover reagieren.
   ------------------------------------------------------------ */
.region__chip {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  border: var(--bw) solid var(--border);
  color: var(--text-muted);
  cursor: default;
}

/* ------------------------------------------------------------
   3 · .figures — kompakte Zahlentabelle der Beispielrechnung
   Warum neu: `.compare` ist eine Gegenüberstellung zweier Spalten mit
   Kopfzeile. Die Beispielrechnung ist dagegen eine reine Position/Wert-
   Aufstellung mit hervorgehobener Ergebniszeile — dafür gibt es bisher
   keine Sektion.
   ------------------------------------------------------------ */
.figures { margin-top: var(--space-6); border: var(--bw) solid var(--border) }
.figures th, .figures td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: var(--bw) solid var(--border);
  vertical-align: baseline;
}
.figures th { font-weight: var(--fw-semi); color: var(--text) }
.figures td { text-align: right; font-weight: var(--fw-bold); white-space: nowrap }
.figures td span { display: block; font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--text-muted); white-space: normal }
.figures tr:last-child th, .figures tr:last-child td { border-bottom: 0 }
.figures__sum { background: var(--green-100) }
.figures__sum th, .figures__sum td { color: var(--green); font-weight: var(--fw-black); font-size: var(--fs-sub) }

/* ------------------------------------------------------------
   4 · .swap — Vorher/Nachher-Paar im Ersatzstrom-Erklärstück
   Warum neu: Die beiden Tab-Panels stellen je einen Zustand dar
   (Netzausfall ohne / mit Anlage). `.cards` ist ein gleichrangiges
   Raster; hier braucht es eine führende Zustandszeile über der
   Kartenreihe. Rein additiv, kein Duplikat bestehender Regeln.
   ------------------------------------------------------------ */
.swap__state {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-left: var(--bw-strong) solid var(--yellow);
  background: var(--bg-muted);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sub);
}
.swap__state svg { width: var(--space-6); height: var(--space-6); flex: none; color: var(--yellow) }

/* ------------------------------------------------------------
   5 · Abstands-Utilities
   Warum neu: Beide Seiten setzen mehrfach einen Abstand zwischen zwei
   eigenständigen Bausteinen derselben Sektion (Tabelle → Akkordeon,
   Karten → Bild). base.css kennt dafür nur `.stack` für durchgehende
   Geschwisterketten. Damit entfallen Inline-Styles in den Seiten.
   ------------------------------------------------------------ */
.spaced { margin-top: var(--space-8) }
.spaced--sm { margin-top: var(--space-6) }
.spaced--xs { margin-top: var(--space-5) }

/* Break-even-Rechnung mit dem Design-Skill optimiert: Tabelle füllt die Breite,
   die Ergebniszeile (Break-even) wird zur dunklen Bühne mit gelbem Wert. */
.figures { width: 100% }
.figures__sum { background: var(--green) }
.figures__sum th { color: var(--white) }
.figures__sum td { color: var(--yellow) }
/* Die Zusatzzeile in .figures td span erbt sonst --text-muted (Grau) und stünde
   auf dem grünen Grund der Ergebniszeile bei 1,6:1 – unlesbar. */
.figures__sum td span { color: rgb(var(--rgb-white) / .8) }

/* Ergebnis-Bühne der Beispielrechnung · der Break-even ist der Höhepunkt (§0/§4):
   große gelbe Zahl auf grünem Grund, statt einer kleinen Tabellenzeile. */
.figstage { margin-top: var(--space-5); background: var(--green); color: var(--white);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8);
  padding: var(--space-6) var(--space-7) }
.figstage__main { display: flex; flex-direction: column; gap: var(--space-1); flex: none }
.figstage__label { font-size: var(--fs-label); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: rgb(var(--rgb-white) / .7) }
.figstage__num { font-size: var(--fs-stat-lg); font-weight: var(--fw-black); color: var(--yellow);
  line-height: 1; letter-spacing: -.04em }
.figstage__num span { font-size: .34em; font-weight: var(--fw-bold); color: var(--white);
  letter-spacing: 0; margin-left: .25em }
.figstage__note { flex: 1 1 18rem; font-size: var(--fs-sm); color: rgb(var(--rgb-white) / .85);
  line-height: 1.55; max-width: var(--measure) }
.figstage__note b { color: var(--white); font-weight: var(--fw-black) }

/* Beispielrechnung als Zwei-Spalten (Text/Ergebnis links, Tabelle rechts):
   kompakter als der gestapelte Block, kein toter Weißraum, unter 70% Höhe. */
.figrow { align-items: start }
.figrow .figures { margin-top: 0 }

/* Bauteil-Liste (Hersteller & Qualität): 4 bekannte Komponenten scannbar als 2×2
   direkt am Kern — ersetzt das separate Siegelband und den Wiederhol-Absatz. */
.speclist { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-5) }
.speclist li { display: flex; gap: var(--space-3); align-items: flex-start }
.speclist svg { width: 20px; height: 20px; flex: none; color: var(--green-600); margin-top: 3px }
.speclist b { display: block; font-size: var(--fs-sm); color: var(--heading); font-weight: var(--fw-black); line-height: 1.3 }
.speclist span { display: block; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; margin-top: 2px }
@media (max-width: 560px) { .speclist { grid-template-columns: 1fr } }

/* „In jedem Paket enthalten" · macht den gemeinsamen Lieferumfang (§ Überschrift
   „ein Lieferumfang") sichtbar statt ihn im Akkordeon zu verstecken. Ein begrenztes
   weißes Panel auf der grauen Sektion, 3×2 scannbar. */
.included { background: var(--white); border: var(--bw) solid var(--border);
  padding: clamp(20px, 3vw, 32px); margin-top: var(--space-6) }
.included__title { font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--green-600);
  margin-bottom: var(--space-4) }
.included__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3) var(--space-6) }
.included__list li { display: flex; gap: var(--space-3); align-items: center;
  font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: 1.35 }
.included__list svg { width: 20px; height: 20px; flex: none; color: var(--green-600) }
@media (max-width: 720px) { .included__list { grid-template-columns: 1fr 1fr } }
@media (max-width: 480px) { .included__list { grid-template-columns: 1fr } }