/* Nachzahlungs-Rechner Steuerklasse 3 und 5, nutzt die Tokens aus style.css.

   ⚠️ DOPPELUNG MIT ABSICHT, ALS SCHULD VERMERKT (07.09.2026).
   Der Block „Hero bis Ergebnis" steht fast gleich in sparplan-kosten-rechner.css,
   einmalanlage-rechner.css und den uebrigen Rechner-Stylesheets. Richtig waere
   eine gemeinsame `rechner-basis.css`. Kandidaten findet
   `grep -l "rechner-grid" site/assets/*.css`, es sind inzwischen sechzehn.

   ⛔ WARUM HIER KEINE TABELLE STEHT. Der Rechenweg waere als `<table>` naheliegend
   gewesen. style.css setzt global `table { min-width:760px }` und
   `thead th[scope=col] { width:190px; min-width:190px }`, geschrieben fuer die
   Vergleichstabellen in `.vgl-huelle` mit ihrem eigenen Scroll-Kasten. Zusammen
   mit `html, body { overflow-x: clip }` wird eine Tabelle ohne Scroll-Kasten auf
   dem Handy ABGESCHNITTEN statt scrollbar, und keine Ueberlauf-Messung faellt
   darauf an, weil die Seite selbst nicht breiter wird (Befund 31.08.2026 am
   Sparplan-Kosten-Rechner, dort mit zwei Ruecknahme-Regeln repariert).
   Der Rechenweg ist eine Reihe von Zeilen, keine Kreuztabelle. Als Liste gebaut
   entsteht das Problem gar nicht erst, und auf 375 Pixel liest sie sich besser. */

/* ---------- Hero ---------- */
.tool-hero { padding: 64px 0 48px; }
.tool-hero .hero-inner { max-width: 760px; position: relative; }
.privacy-badge {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  padding: 10px 18px; background: rgba(201, 168, 95, 0.12);
  border: 1px solid rgba(201, 168, 95, 0.35); border-radius: 2px;
  font-size: 14px; color: rgba(244, 236, 220, 0.92);
}
.privacy-badge svg { width: 18px; height: 18px; flex-shrink: 0; }
.privacy-badge strong { color: var(--gold); font-weight: 600; }

/* ---------- Layout ---------- */
.tool-section { padding: 48px 0 88px; }
.rechner-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }

.panel-card {
  background: #FFFFFF; border: 1px solid var(--border-subtle);
  border-radius: 3px; padding: 28px;
}
.panel-card h2 {
  font-family: 'Newsreader', serif; font-weight: 500; font-size: 21px;
  color: var(--navy); margin-bottom: 22px;
}
.panel-intro { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: -14px 0 22px; }

/* ---------- Regler ---------- */
.control { margin-bottom: 24px; }
.control:last-child { margin-bottom: 0; }
.control-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; gap: 12px; }
.control-head label { font-size: 15px; font-weight: 700; color: var(--navy); }
.control-field {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--border-subtle); border-radius: 2px; padding: 6px 10px; background: var(--white-soft);
}
/* ⚠️ Breiter als bei den uebrigen Rechnern. Hier stehen Jahresbetraege wie
   „180.000", und bei 64 Pixel schneidet das Feld sie ab, ohne es zu melden. */
.control-field input {
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--navy);
  border: none; background: transparent; outline: none; width: 82px; text-align: right;
}
.control-field .unit { font-size: 14px; color: var(--ink-soft); }

input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  background: linear-gradient(to right, var(--gold) 0%, var(--gold) var(--fill, 50%), #E5DCC8 var(--fill, 50%), #E5DCC8 100%);
  border-radius: 2px; outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--navy); border: 3px solid var(--gold); cursor: pointer;
  transition: transform 140ms var(--ease);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--navy); border: 3px solid var(--gold); cursor: pointer;
}
.control-hint { margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); }

/* Das Feld, ohne das die Zahl nicht entsteht, bekommt eine sichtbare Kante,
   solange es leer steht. Ein leeres Pflichtfeld sieht sonst aus wie eine Null. */
.control.ist-offen .control-field { border-color: var(--gold); background: rgba(201, 168, 95, 0.1); }
.control-hint.ist-offen { color: #9A5B18; font-weight: 600; }

/* ---------- Ergebnis ---------- */
.kpi-stack { display: grid; gap: 14px; margin-bottom: 22px; }
.kpi-card {
  background: #FFFFFF; border: 1px solid var(--border-subtle); border-left: 4px solid var(--gold);
  border-radius: 3px; padding: 18px 22px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.kpi-card--hero { background: var(--navy); border-left-color: var(--gold); flex-direction: column; align-items: flex-start; gap: 6px; }
.kpi-label { font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.kpi-card--hero .kpi-label { color: rgba(244, 236, 220, 0.7); }
.kpi-value { font-family: 'Newsreader', serif; font-weight: 500; font-size: 26px; color: var(--navy); line-height: 1; }
.kpi-card--hero .kpi-value { font-size: 40px; color: var(--gold); }
.kpi-sub { font-size: 13px; color: rgba(244, 236, 220, 0.78); line-height: 1.5; }
/* Solange die Lohnsteuer fehlt, steht dort ein Satz statt einer Zahl. Er darf
   nicht in Ziffern-Groesse gesetzt sein, sonst liest ihn niemand als Aufforderung. */
.kpi-card--hero .kpi-value.ist-aufforderung { font-size: 21px; line-height: 1.35; }

/* ---------- Rechenweg ---------- */
.rechenweg { margin: 0 0 4px; }
.rechenweg-zeile {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--border-subtle);
}
.rechenweg-zeile:first-child { padding-top: 0; }
.rechenweg-name { font-size: 14px; color: var(--ink); }
.rechenweg-name small { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.rechenweg-wert {
  font-family: 'Newsreader', serif; font-size: 18px; color: var(--navy);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.rechenweg-zeile.ist-summe { border-bottom: 2px solid var(--navy); }
.rechenweg-zeile.ist-summe .rechenweg-name { font-weight: 700; color: var(--navy); }
.rechenweg-zeile.ist-summe .rechenweg-wert { font-size: 21px; }
.rechenweg-zeile.ist-abzug .rechenweg-wert { color: var(--gold-ink); }
.tabelle-fuss { font-size: 12.5px; color: var(--ink-soft); margin-top: 10px; line-height: 1.5; }

.scenario-line-box {
  margin-top: 20px; padding: 16px 20px; background: var(--ivory);
  border-radius: 3px; font-size: 14px; color: var(--ink); line-height: 1.55;
}
.scenario-line-box strong { color: var(--navy); }
.scenario-line-box.ist-hinweis { border-left: 4px solid var(--gold); }

/* ---------- Die fuenf Bedingungen ---------- */
/* ⛔ SIE STEHEN NEBEN DER ZAHL, NICHT UNTER DER SEITE (Research-Verdikt
   07.09.2026). Eine Zahl traegt kein Etikett, und wer sie liest, scrollt nicht
   erst zum Fuss. Die erste ist die Abgabepflicht, weil die Zahl ohne sie einen
   Anreiz erzeugt, sich falsch zu verhalten. */
.bedingungen { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border-subtle); }
.bedingungen h3 {
  font-family: 'Newsreader', serif; font-weight: 500; font-size: 17px;
  color: var(--navy); margin-bottom: 14px;
}
.bedingungen ol { list-style: none; margin: 0; padding: 0; counter-reset: bed; }
.bedingungen li {
  position: relative; padding-left: 34px; margin-bottom: 14px;
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.55;
}
.bedingungen li:last-child { margin-bottom: 0; }
.bedingungen li::before {
  counter-increment: bed; content: counter(bed);
  position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ivory); border: 1px solid var(--border-subtle);
  font-size: 12px; font-weight: 700; color: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.bedingungen li strong { color: var(--navy); display: block; margin-bottom: 2px; }
.bedingungen li.ist-pflicht::before { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.bedingungen li.ist-pflicht strong { color: #9A5B18; }

/* ---------- Disclaimer ---------- */
.disclaimer {
  margin-top: 26px; padding: 18px 22px; background: rgba(10, 23, 48, 0.04);
  border: 1px solid var(--border-subtle); border-radius: 3px;
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.55;
}
.disclaimer strong { color: var(--navy); }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .rechner-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 880px) {
  .tool-hero { padding: 48px 0 36px; }
}
@media (max-width: 520px) {
  .panel-card { padding: 22px 18px; }
  .kpi-card--hero .kpi-value { font-size: 32px; }
  .kpi-card--hero .kpi-value.ist-aufforderung { font-size: 18px; }
  .rechenweg-wert { font-size: 17px; }
  .rechenweg-zeile.ist-summe .rechenweg-wert { font-size: 19px; }
  .control-field input { width: 74px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }