/* Rechner-Seite — ergänzt /stil.css, nutzt dieselben CSS-Variablen */
.reiter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.reiter button{padding:11px 20px;font-size:.95rem;font-weight:600;font-family:inherit;
  color:var(--grau);background:var(--weiss);border:1.5px solid var(--linie);border-radius:8px;
  cursor:pointer;transition:border-color .15s,color .15s}
.reiter button:hover{border-color:var(--akzent);color:var(--akzent)}
.reiter button.aktiv{background:var(--akzent);border-color:var(--akzent);color:#fff}
.bereich{display:none}
.bereich.aktiv{display:block}
.rechner-form{display:grid;gap:18px;max-width:520px}
.rechner-form label{display:block;font-weight:600;font-size:.95rem;margin-bottom:6px}
.rechner-form input{width:100%;padding:11px 14px;font-size:1.05rem;font-family:inherit;
  color:var(--tinte);background:var(--weiss);border:1.5px solid var(--linie);border-radius:8px}
.rechner-form input:focus{outline:none;border-color:var(--akzent)}
.rechner-form .feldhinweis{font-size:.85rem;color:var(--grau);margin-top:4px}
.ergebnis{margin-top:26px;background:var(--weiss);border:1.5px solid var(--akzent);border-radius:10px;padding:22px;max-width:520px}
.ergebnis .zahl{font-size:1.9rem;font-weight:750;color:var(--tinte);margin:4px 0}
.ergebnis p{color:var(--grau);font-size:.95rem}
.ergebnis .jahr{margin-top:10px;padding-top:10px;border-top:1px solid var(--linie)}
.fussnote.abstand-oben{margin-top:22px}