/* Rentnervisum-Rechner (/rentnervisum-rechner/) – nutzt die Farbvariablen aus thailand.css */
.rechner { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.5rem 0 1rem; padding: 1.2rem;
  background: var(--accent-bg); border: 1px solid var(--line); border-radius: 12px; }
@media (min-width: 46rem) {
  .rechner { grid-template-columns: 1fr 1fr 1fr; row-gap: 0; }
  /* Subgrid: Beschriftung, Feld und Hinweis stehen in allen drei Spalten auf gleicher Höhe */
  .rechner-feld { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
  .rechner-feld label { align-self: end; }
}
.rechner-feld label { display: block; font-weight: 700; margin: 0 0 .35rem; line-height: 1.35; }
.rechner-feld input { width: 100%; box-sizing: border-box; font: inherit; font-size: 1.15rem; padding: .7rem .8rem;
  border: 1px solid var(--muted); border-radius: 8px; background: var(--card); color: var(--fg); }
.rechner-feld input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.rechner-feld .klein { margin: .4rem 0 0; font-size: .85rem; line-height: 1.45; color: var(--muted); }

.rechner-ergebnis { display: grid; gap: .9rem; margin: 0 0 2rem; }
.rechner-kurz { margin: 0; padding: .9rem 1rem; background: var(--card); border-left: 4px solid var(--accent);
  border-radius: 6px; line-height: 1.5; }
.rechner-hinweis { margin: 0; padding: .9rem 1rem; background: var(--warn-bg); border-left: 4px solid var(--warn-line);
  border-radius: 6px; }
.rechner-karte { padding: 1rem 1.1rem; background: var(--card); border: 1px solid var(--line);
  border-left: 5px solid var(--line); border-radius: 10px; }
.rechner-karte.ok { border-left-color: var(--ok); }
.rechner-karte.nein { border-left-color: var(--bad); }
.rechner-karte.leer .rechner-zahl { color: var(--muted); }
.rechner-karte h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.rechner-karte p { margin: .3rem 0 0; line-height: 1.55; }
.rechner-zahl { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rechner-karte.ok .rechner-zahl { color: var(--ok); }
.rechner-karte.nein .rechner-zahl { color: var(--bad); }
#kurstabelle td, #kurstabelle th { font-variant-numeric: tabular-nums; }