/* ============================================================
   ZUSATZ-REGELN B — photovoltaik-gewerbe.html · gewerbespeicher.html
   Die beiden B2B-Seiten. Nur Regeln, für die es in tokens/base/
   components/sections keine Entsprechung gibt. Ausschliesslich Tokens,
   keine Hex- oder px-Werte (SVG-Strichstärken bleiben einheitenlos).
   ============================================================ */

/* ------------------------------------------------------------
   1 · .leadform — schlanke Ein-Feld-Anforderung im Fliesstext
   Warum neu: `.form` in sections.css ist das grosse, mehrstufige
   Kontaktformular mit eigenem Kartenrahmen und Polster. Beide B2B-Seiten
   brauchen daneben eine kompakte Variante („E-Mail rein, PDF/Unterlagen
   raus") — ein getöntes Kästchen mit Titel, Fliesstext und einer Zeile
   aus Eingabefeld + Button. Kein Schritt-Zustand, keine Fieldsets.
   ------------------------------------------------------------ */
.leadform {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--bg-muted);
  border: var(--bw) solid var(--border);
  border-left: var(--bw-strong) solid var(--yellow);
}
.leadform__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--text);
}
.leadform__text {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.55;
}
.leadform__row {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
}
.leadform__row .field { flex: 1 1 auto; min-width: 0 }
.leadform__row .btn { flex: none }
.leadform .consent { margin-top: var(--space-4) }

@media (max-width: 400px) {
  .leadform__row { flex-direction: column }
}

/* ------------------------------------------------------------
   2 · .hero__content — Textspalte des B2B-Heros
   Warum neu: `.hero--b2b .hero__cols` ist ein zweispaltiges Grid. Die
   Textspalte trägt hier zusätzlich das eingebettete .leadform; ohne
   min-width:0 sprengt dessen Eingabefeld in schmalen Viewports die
   Grid-Spalte. Rein additiv zur Hero-Regel in sections.css.
   ------------------------------------------------------------ */
.hero__content { min-width: 0 }

/* ------------------------------------------------------------
   3 · .calc__legend — Beschriftung einer Auswahlgruppe im Rechner
   Warum neu: `.calc__row label` stylt die Schieberegler-Zeilen. Das
   Lastprofil ist dagegen eine Radio-Gruppe in einem <fieldset>; deren
   <legend> braucht dieselbe Label-Anmutung wie die übrigen Zeilen,
   ohne die Flex-Ausrichtung von `.calc__row label` zu erben.
   ------------------------------------------------------------ */
.calc__legend {
  display: block;
  margin-bottom: var(--space-3);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--text);
}

/* ------------------------------------------------------------
   4 · Lastkurven-Diagramm (nur gewerbespeicher.html)
   Warum neu: `.chart` in sections.css setzt Rahmen, Polster und die
   Legenden-Grundform. Die Konturen selbst (von js/site.js gefüllt) sind
   offene Polylinien — ohne fill:none würden sie als schwarze Flächen
   gerendert. Farben spiegeln die drei Legenden-Schlüssel.
   ------------------------------------------------------------ */
.chart__grid line { stroke: var(--border-strong); stroke-width: 1 }
.chart__hours text {
  font-size: var(--fs-map);
  font-weight: var(--fw-semi);
  fill: var(--ink-60);
}
#sim-path-ist { fill: none; stroke: var(--grey-500); stroke-width: 2 }
#sim-path-neu { fill: none; stroke: var(--green); stroke-width: 2.5 }
#sim-line-kappung { stroke: var(--yellow-600); stroke-width: 2; stroke-dasharray: 6 5 }

.chart__key--ist { background: var(--grey-500) }
.chart__key--neu { background: var(--green) }
.chart__key--kap {
  background: linear-gradient(var(--yellow-600) 0 0) center / 100% var(--bw-strong) no-repeat;
}

/* ------------------------------------------------------------
   5 · .figures / .figure — nummerierte Merksätze (gewerbespeicher.html)
   Warum neu: Der „Leistungspreis"-Block ist eine Reihe erklärender
   Kennsätze (grosse Kennzahl, Titel, Absatz) — weder `.cards` (Karten
   mit Rahmen) noch `.stats` (reine Zahlenkacheln) treffen das. Drei
   gleichrangige Spalten mit betonter Kopfzahl.
   ------------------------------------------------------------ */
.figures {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
}
.figure b {
  display: block;
  font-size: var(--fs-stat-sm);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  line-height: 1;
  color: var(--green);
}
.figure h3 {
  margin-top: var(--space-3);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
}
.figure p {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .figures { grid-template-columns: 1fr; gap: var(--space-6) }
}

/* ------------------------------------------------------------
   6 · .cta__inner--callback — CTA mit Rückruf-Formular
   Warum neu: `.cta__inner` ist ein Flex-Paar Text|Aktion, das seine
   Kinder mittig ausrichtet. Die Rückruf-Variante stellt dem Text ein
   mehrzeiliges Formular gegenüber; das gehört oben ausgerichtet und mit
   definierten Spaltenanteilen, damit es nicht auf Button-Breite kollabiert.
   ------------------------------------------------------------ */
.cta__inner--callback { align-items: start }
.cta__inner--callback .cta__text { flex: 1 1 22rem }
.cta__inner--callback .form { flex: 1 1 26rem }

/* ------------------------------------------------------------
   7 · Abstands-Utility
   Warum neu: Beide Seiten setzen einen bewussten Abstand vor einem
   nachgestellten Hinweisabsatz. base.css kennt dafür nur `.stack` für
   durchgehende Geschwisterketten — hier steht der Absatz allein.
   ------------------------------------------------------------ */
.spaced-top { margin-top: var(--space-8) }

/* Direkter Button in der Leadform braucht Abstand zum Text darüber
   (sonst berührt „Unterlagen anfordern" den Absatz) – Kollisions-Schutz. */
.leadform > .btn { margin-top: var(--space-5) }