/* Ersparnis-Rechner smile+ (/produkte/smile-plus/#rechner) – nur auf dieser Seite geladen (Meta „css: rechner“).
   Schrift-Rollen wie base.css: Abschnittstitel h2, Fließtext step-0, Kleingedrucktes/Label step--1, Kennzahl step-2. */
.rechner { display: grid; gap: var(--space-m); grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
@media (max-width: 52rem) { .rechner { grid-template-columns: 1fr; } }

.rechner__form { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-m);
  display: grid; gap: var(--space-s); box-shadow: var(--shadow); }
.rechner__modus { border: 0; padding: 0; margin: 0; min-width: 0; }
.rechner__modus legend { font-size: var(--step--1); font-weight: 700; color: var(--color-ink); margin-bottom: .4rem; padding: 0; }
.rechner__seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--color-surface); border-radius: 999px; padding: 4px; }
.rechner__seg label { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 999px;
  font-weight: 600; cursor: pointer; color: var(--color-muted); text-align: center; line-height: 1.2; padding-inline: .5rem; }
.rechner__seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rechner__seg label:has(input:checked) { background: #fff; color: var(--color-ink); box-shadow: 0 1px 3px rgba(20,19,19,.15); }
.rechner__seg label:has(input:focus-visible) { outline: 3px solid var(--color-primary); outline-offset: 2px; }

.rechner__feld { display: grid; gap: .3rem; }
.rechner__feld[hidden] { display: none; }
.rechner__feld > label { font-size: var(--step--1); font-weight: 700; }
.rechner__input { display: flex; align-items: stretch; border: 1px solid #8a8f94; border-radius: var(--radius); background: #fff; overflow: hidden; }
.rechner__input:focus-within { outline: 3px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-ink); }
.rechner__input input { flex: 1; min-width: 0; border: 0; padding: .7rem .8rem; font: inherit; font-size: var(--step-0); color: var(--color-ink); background: none; }
.rechner__input input:focus { outline: none; }
.rechner__input input[aria-invalid="true"] { background: #fdecea; }
.rechner__input span { display: flex; align-items: center; padding: 0 .8rem; background: var(--color-surface); color: var(--color-muted);
  font-size: var(--step--1); white-space: nowrap; border-left: 1px solid var(--color-line); }
.rechner__hint { font-size: var(--step--1); color: var(--color-muted); }

/* Ergebnis: feste Zeilen, Werte einzeilig → Höhe ändert sich beim Tippen nicht */
.rechner__erg { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-m); box-shadow: var(--shadow);
  display: grid; gap: var(--space-s); }
.rechner__liste { display: grid; grid-template-columns: 1fr auto; gap: .45rem var(--space-s); margin: 0; align-items: baseline; }
.rechner__liste dt { color: var(--color-muted); font-size: var(--step--1); }
.rechner__liste dd { margin: 0; text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rechner__liste dd small { display: block; font-weight: 400; font-size: var(--step--1); color: var(--color-muted); white-space: nowrap; }
.rechner__netto { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); border-top: 1px solid var(--color-line); padding-top: var(--space-s); }
.rechner__netto-titel { grid-column: 1 / -1; font-size: var(--step--1); font-weight: 700; color: var(--color-ink); }
.rechner__netto div { background: var(--color-surface); border-radius: var(--radius); padding: var(--space-xs) var(--space-s); }
.rechner__netto p { font-size: var(--step--1); color: var(--color-muted); }
.rechner__netto strong { display: block; font-size: var(--step-2); line-height: 1.15; color: var(--color-accent-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rechner__netto strong.is-neg { color: #b3261e; } /* 6,1:1 auf Surface */
.rechner__be { font-size: var(--step--1); color: var(--color-muted); }
.rechner__be strong { color: var(--color-ink); }
.rechner__cta { justify-self: stretch; justify-content: center; text-align: center; }
.rechner__erg.is-leer .rechner__cta { visibility: hidden; }
.rechner__erg.is-leer .rechner__liste dd, .rechner__erg.is-leer .rechner__netto strong, .rechner__erg.is-leer .rechner__be strong { opacity: .35; }
.rechner__hinweis { font-size: var(--step--1); color: var(--color-muted); border-left: 3px solid var(--color-primary); padding-left: var(--space-xs); }
.rechner__hinweis a { color: var(--color-primary-text); }
.rechner-nojs { max-width: 68ch; }
/* Mobil: feste Wertspalte → Zeilenumbrüche der Beschriftungen ändern sich beim Tippen nicht */
@media (max-width: 40rem) {
  .rechner__form, .rechner__erg { padding: var(--space-s); }
  .rechner__liste { grid-template-columns: minmax(0, 1fr) 9.5rem; }
}