/* ============================================================
   ZUSATZ-REGELN E — balkonkraftwerk-coburg.html
   Nur Regeln, für die es in tokens/base/components/sections und in
   _extra-a.css keine Entsprechung gibt. Ausschliesslich Tokens,
   keine Hex- oder px-Werte.
   ============================================================ */

/* ------------------------------------------------------------
   1 · .cta__inner--form — Abschluss-CTA mit eingebettetem Formular
   Warum neu: `.cta__inner` ist auf Text links / Buttonzeile rechts
   ausgelegt (`align-items: center`, `.cta__text { max-width: 48ch }`).
   Auf dieser Seite steht im Abschluss kein Button, sondern das
   Formular selbst — eine hohe Karte, die oben bündig mit dem Text
   beginnen muss und eine eigene Mindestbreite braucht, sonst wird sie
   vom Textblock auf eine unbrauchbare Spaltenbreite gedrückt.
   Spiegelbildlich zu `.cta__inner--callback` in _extra-b.css, dort
   aber für eine Buttonzeile statt für ein Formular.
   ------------------------------------------------------------ */
.cta__inner--form { align-items: start }
.cta__inner--form .cta__text { flex: 1 1 24rem; max-width: var(--measure) }
.cta__inner--form .form { flex: 1 1 27rem; min-width: 0 }

/* ------------------------------------------------------------
   2 · .form--single — vertikaler Rhythmus im einstufigen Formular
   Warum neu: `.form` in sections.css setzt die Abstände über
   `.form__step { display: grid; gap: … }`. Ein Formular ohne Schritte
   hat deshalb gar keinen Abstand zwischen Feldgruppen, Consent und
   Button — sie kleben aneinander. `_extra-c.css` löst dasselbe Problem
   auf der Kontaktseite über `.contactpage .form`; hier fehlt dieser
   Seitenkontext, also bekommt das Formular eine eigene Klasse.
   ------------------------------------------------------------ */
.form--single > * + * { margin-top: var(--space-5) }

/* ------------------------------------------------------------
   3 · .caseband — drei Rechenbeispiele nebeneinander
   Warum neu: `.statband` zeigt drei einzelne Kennzahlen, `.figures`
   eine einzelne Rechnung als Zeilentabelle. Hier stehen drei
   vollständige Fälle nebeneinander, jeder mit Titel, Leitzahl und
   zwei Nebenwerten. Aufbau und Fugenraster sind von `.statband`
   übernommen, damit beide Bänder auf der Seite gleich wirken.
   ------------------------------------------------------------ */
.caseband { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--border); margin-top: var(--space-7) }
.caseband > div { background: var(--bg); padding: var(--space-6); display: grid; gap: var(--space-3); align-content: start }
.caseband__size { font-size: var(--fs-label); font-weight: var(--fw-black); letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--green-600) }
.caseband__val { font-size: var(--fs-stat-lg); font-weight: var(--fw-black); letter-spacing: -.045em; color: var(--green); line-height: 1 }
.caseband__val span { display: block; font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: var(--ls-flat); color: var(--text-muted); margin-top: var(--space-2) }
.caseband__list { display: grid; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5 }
.caseband__list b { color: var(--text); font-weight: var(--fw-bold) }

@media (max-width: 860px) {
  .caseband { grid-template-columns: 1fr }
}

/* ------------------------------------------------------------
   4 · .steps--4 — vier Schritte ohne Scrollen
   Warum neu: `.steps` zeigt bewusst rund drei von sieben Schritten und
   lässt weiterscrollen. Der Ablauf dieser Seite hat genau vier, und der
   vierte ist der Kern der Zusage („Anmeldung übernehmen wir") – er darf
   nicht hinter einem Pfeil liegen. Ab 901px passen alle vier nebeneinander;
   darunter bleibt der Slider aus sections.css unverändert.
   ------------------------------------------------------------ */
@media (min-width: 901px) {
  .steps--4 { grid-auto-columns: calc((100% - 3 * var(--card-gap)) / 4) }
}