/* Sparplan-Kosten-Rechner, nutzt die Tokens aus style.css.

   ⚠️ DOPPELUNG MIT ABSICHT, ALS SCHULD VERMERKT (31.08.2026).
   Der Block „Hero bis Ergebnis" steht fast gleich in einmalanlage-rechner.css,
   ratenkredit-rechner.css und den uebrigen Rechner-Stylesheets. Richtig waere
   eine gemeinsame `rechner-basis.css`. Die haette an diesem Abend 15 live
   stehende Rechnerseiten angefasst, fuer eine Folge, die am 07.09. laeuft.
   Wer die Basis spaeter herausloest, findet die Kandidaten mit
   `grep -l "rechner-grid" site/assets/*.css`. */

/* ---------- 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);
}
.control-field input {
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--navy);
  border: none; background: transparent; outline: none; width: 64px; 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); }

/* ---------- 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.7); }

/* ---------- Die Kostentabelle, das Herz der Seite ---------- */
/* ⛔ `table-layout: fixed` IST HIER KEINE KOSMETIK. Ohne sie zieht die
   laengste Zeilenbeschriftung die Spalten auseinander, und auf dem Handy
   schiebt die Tabelle die Seite waagerecht raus. Befund vom 23.08.2026 an
   den Vergleichstabellen, gleiche Ursache. */
.kosten-tabelle { width: 100%; border-collapse: collapse; table-layout: fixed; margin-bottom: 4px; }
/* ⛔ EINE FREMDE REGEL AUS style.css MUSS HIER ZURUECKGENOMMEN WERDEN
   (Befund 31.08.2026 an der Handy-Ansicht). Dort steht global
   `thead th[scope=col] { width:190px; min-width:190px }`. Geschrieben wurde
   das fuer die Vergleichstabellen, die in `.vgl-huelle` mit `overflow-x:auto`
   stecken und deshalb breiter sein duerfen als das Fenster.
   Diese Tabelle hat drei kurze Spalten und keinen Scroll-Kasten. Ohne die
   Ruecknahme erbt sie 3 x 190 plus Zeilenkopf, also 760 Pixel, und wurde bei
   375 Pixel Fensterbreite ABGESCHNITTEN statt scrollbar: die Spalte
   „woechentlich" war auf dem Handy unerreichbar. Das faellt an keiner
   Ueberlauf-Messung auf, weil die Seite selbst nicht breiter wird.

   ⚠️ ZWEI REGELN, NICHT EINE. Die Kopfzelle traegt `min-width:190px`, die
   TABELLE selbst zusaetzlich `min-width:760px`. Wer nur die Kopfzelle
   zuruecknimmt, misst danach immer noch 760 Pixel und sucht an der falschen
   Stelle weiter. Beide muessen zurueck. */
.kosten-tabelle { min-width: 0; border-collapse: collapse; border-spacing: 0; }
.kosten-tabelle thead th[scope="col"] { width: auto; min-width: 0; }
.kosten-tabelle th, .kosten-tabelle td {
  padding: 13px 14px; text-align: right; border-bottom: 1px solid var(--border-subtle);
  font-size: 15px; color: var(--ink);
}
.kosten-tabelle thead th { font-size: 13px; font-weight: 700; color: var(--navy); text-align: right; }
.kosten-tabelle th[scope="row"] { text-align: left; font-weight: 600; color: var(--navy); font-size: 14px; }
.kosten-tabelle td.zahl { font-family: 'Newsreader', serif; font-size: 19px; color: var(--navy); }
/* Die Zelle, an der die Folge haengt: der teure Fall. */
.kosten-tabelle td.ist-teuer { color: #C06A22; font-weight: 600; }
.kosten-tabelle tr.zeile-gleich td.zahl { 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); }

/* ---------- 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; }
  .kosten-tabelle th, .kosten-tabelle td { padding: 11px 8px; font-size: 14px; }
  .kosten-tabelle td.zahl { font-size: 17px; }
  .kpi-card--hero .kpi-value { font-size: 32px; }
}

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