/* ═══════════════════════════════════════════════════════
   Rechner · zentrierte Einleitung

   Nur der Kopfbereich. Die Regeln greifen ausschließlich
   über den Modifier .calc__head--mitte, damit styles.css
   und der Rechner selbst unberührt bleiben.
   ═══════════════════════════════════════════════════════ */

.calc__head--mitte{
  max-width:none;                 /* hebt die 60ch aus styles.css auf */
  text-align:center;
  margin-bottom:clamp(40px,4.4vw,58px);
}
/* Zeilenlänge über die volle Breite begrenzen, sonst zerfällt
   die Headline auf grossen Schirmen in eine sehr lange Zeile. */
/* Die lange Headline braucht die volle Rechnerbreite;
   balance verteilt sie gleichmässig auf zwei Zeilen. */
.calc__head--mitte .h2{
  max-width:none;
  margin:0 auto clamp(14px,1.5vw,20px);
  text-wrap:balance;
}
.calc__head--mitte .sub{
  max-width:none;              /* auf dem Desktop passt der Satz in eine Zeile */
  margin-inline:auto;
  text-wrap:balance;
}

@media (max-width:640px){
  .calc__head--mitte{margin-bottom:32px}
  .calc__head--mitte .h2{max-width:none}
}

/* ── Auswahlfelder ────────────────────────────────── */
/* Unter .calc gehängt, damit styles.css unberührt bleibt.
   Geändert werden ausschliesslich Abstände und Ausrichtung —
   Grösse, Farben, Zustände und Typografie bleiben wie sie sind. */

/* styles.css:155 setzt .field label{display:block}. Das ist
   spezifischer als .task{display:flex} — die Auswahlzeile war
   deshalb nie ein Flex-Element und gap/align-items blieben
   wirkungslos. .calc .task ist spezifisch genug, um das zu
   korrigieren, ohne styles.css anzufassen. */
.calc .task{
  display:flex;
  align-items:flex-start;          /* bei zweizeiligem Text oben bündig */
  gap:14px;                        /* trennt Kästchen und Satz sichtbar */
  padding:12px 16px;               /* gleichmässiger Rahmen ringsum */
}

/* Exakt auf die Mitte der ersten Textzeile:
   Zeilenhöhe .95rem × 1,4 = 21,28 px, Kästchen 22 px.
   Der Ausgleich fällt damit auf 0,36 px und bleibt richtig,
   auch wenn sich die Schriftgrösse einmal ändert. */
.calc .task input{
  margin:calc((.95rem * 1.4 - 22px) / 2) 0 0;
}

/* ── Ergebnisbox: vertikal kompakter ──────────────── */
/* Nur Abstände. Schriftgrössen, Farben, Balkenlogik und
   Texte bleiben unberührt — der CTA soll früher sichtbar
   werden, nicht die Box kleiner skaliert. */

.calc .calc__result{padding:clamp(20px,2.1vw,24px)}

/* Kennzahl-Block enger zusammenrücken */
.calc .result__label{margin-bottom:4px}
.calc .result__big{margin-bottom:4px}
.calc .result__sub{margin-bottom:12px}

/* Hebel-Bereich */
.calc .hebel{margin:10px 0 10px;padding-top:14px}
.calc .hebel__k{margin-bottom:8px}
.calc .hbar{margin-bottom:6px}
.calc .hbar__top{margin-bottom:4px}
.calc .hebel__legende{margin-top:8px}

/* Potenzial bleibt prominent, steht aber näher an der Legende */
.calc .result__gain{margin-bottom:8px;line-height:1.4}

/* Kleingedrucktes enger gesetzt — Schriftgrösse unverändert */
.calc .result__note{line-height:1.4;margin-bottom:8px}

/* Knopf schliesst direkt an die Erklärung an */
.calc .btn--wide{margin-top:2px}