/* Kipppunkt-Rechner (Zulage gegen Kosten), nutzt die Tokens aus style.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: 999px;
  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: 18px; 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.6; margin: -12px 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: 9px; 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: 78px; 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: 999px; 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); }

/* ---------- Kostensaetze, aufklappbar ---------- */
.kosten-details {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border-subtle);
}
.kosten-details > summary {
  cursor: pointer; list-style: none; font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--gold-ink); display: flex; align-items: center; gap: 8px;
}
.kosten-details > summary::-webkit-details-marker { display: none; }
.kosten-details > summary::after {
  content: '+'; margin-left: auto; font-size: 17px; line-height: 1; color: var(--ink-soft);
}
.kosten-details[open] > summary::after { content: '\2212'; }
.kosten-details-hint { font-size: 12.5px; color: var(--ink-soft); margin: 12px 0 18px; line-height: 1.55; }

/* ---------- Ergebnis ---------- */
.kpi-card--hero {
  background: var(--navy); border: 1px solid var(--border-subtle); border-left: 4px solid var(--gold);
  border-radius: 14px; padding: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  margin-bottom: 18px;
}
.kpi-label { font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(244, 236, 220, 0.7); }
.kpi-value { font-family: 'Newsreader', serif; font-weight: 500; font-size: 40px; color: var(--gold); line-height: 1; }
.kpi-sub { font-size: 13px; color: rgba(244, 236, 220, 0.7); line-height: 1.5; }

.zahlen-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.zahl-box { border: 1px solid var(--border-subtle); border-radius: 14px; padding: 16px 18px; background: var(--white-soft); }
.zahl-box .zb-head { font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.zahl-box .zb-wert { font-family: 'Newsreader', serif; font-weight: 500; font-size: 24px; color: var(--navy); margin: 4px 0 2px; line-height: 1; }
.zahl-box .zb-sub { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }

/* ---------- Einordnung ---------- */
.einordnung {
  padding: 16px 20px; border-radius: 12px; font-size: 14px; line-height: 1.55;
  border-left: 4px solid var(--gold); background: var(--ivory); color: var(--ink);
}
.einordnung strong { color: var(--navy); }
.einordnung.ist-darueber { border-left-color: #C06A22; }
.einordnung .eo-titel { display: block; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.einordnung.ist-darueber .eo-titel { color: #C06A22; }

.hinweis-box {
  margin-top: 18px; padding: 16px 20px; background: rgba(10, 23, 48, 0.04);
  border: 1px solid var(--border-subtle); border-radius: 12px;
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.55;
}
.hinweis-box strong { color: var(--navy); }
.hinweis-box + .hinweis-box { margin-top: 12px; }

.quellenzeile {
  margin-top: 18px; font-size: 12px; color: var(--ink-soft); line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* ---------- Disclaimer ---------- */
.disclaimer-band {
  margin-top: 36px; padding: 18px 22px; background: rgba(10, 23, 48, 0.04);
  border: 1px solid var(--border-subtle); border-radius: 12px;
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; display: flex; gap: 12px;
}
.disclaimer-band svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--gold-ink); margin-top: 1px; }
.disclaimer-band 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) {
  .zahlen-paar { grid-template-columns: 1fr; }
  .kpi-value { font-size: 34px; }
}

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

/* Ehepartner-Schalter: tauscht die Bemessungsgrundlage aus (Paragraf 84 Satz 3 und 4 EStG),
   deshalb bewusst abgesetzt vom normalen Reglerblock und nicht als weiterer Regler. */
.partner-schalter {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
}
.ps-zeile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--navy);
  font-weight: 600;
}
.ps-zeile input[type="checkbox"] {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: var(--gold);
  cursor: pointer;
}
.ps-zeile:hover { color: var(--gold-ink, var(--navy)); }
.partner-schalter .control-hint { margin-top: 12px; }

/* ================= Betriebsrenten-Rechner: die zwei Ergebnisbloecke =================
   ⚠️ Diese zwei Bloecke MUESSEN optisch verschieden bleiben (Research-Auflage 04.08.2026).
   Der obere ist gerechnet und darf wie ein Ergebnis aussehen. Der untere ist gespannt
   und muss wie eine Spanne aussehen. Wer sie angleicht, weil es aufgeraeumter wirkt,
   macht aus der belastbaren Zahl eine geschaetzte, und die Trennung war umsonst. */

.block-gerechnet {
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--gold);
  border-radius: 16px;
  padding: 26px;
  margin-bottom: 26px;
}
.block-gerechnet .kpi { font-size: clamp(2.4rem, 1.6rem + 3vw, 3.4rem); line-height: 1.05; margin: 6px 0 8px; }
.block-gerechnet .kpi-unter { font-size: 15px; color: var(--ink-soft); margin-bottom: 22px; }

.aufschluesselung { margin: 0 0 22px; }
.aufschluesselung > div { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--border-subtle); }
.aufschluesselung dt { font-size: 15px; color: var(--ink-soft); margin: 0; }
.aufschluesselung dd { font-size: 15px; margin: 0; font-variant-numeric: tabular-nums; }
.aufschluesselung .summe dt, .aufschluesselung .summe dd { font-weight: 700; color: var(--ink); }

.baender { margin-bottom: 22px; }
.baender ul { list-style: none; margin: 10px 0 12px; padding: 0; }
.baender li { display: flex; justify-content: space-between; gap: 18px; padding: 7px 0; }
.band-name { font-size: 15px; color: var(--ink-soft); }
.band-wert { font-size: 15px; font-variant-numeric: tabular-nums; }
.band-hinweis { font-size: 15px; color: var(--ink-soft); }

/* Der gespannte Block: bewusst OHNE weisse Karte, damit er nicht wie ein Ergebnis wirkt. */
.block-gespannt {
  background: rgba(10, 23, 48, 0.045);
  border: 1px dashed rgba(10, 23, 48, 0.28);
  border-radius: 16px;
  padding: 26px;
}
.block-gespannt .gespannt-intro { font-size: 15px; color: var(--ink-soft); margin-bottom: 20px; }
.spanne { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.spanne-fall { text-align: center; padding: 16px 8px; background: rgba(255, 255, 255, 0.6); border-radius: 12px; }
.spanne-rendite { display: block; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.spanne-wert { display: block; font-size: clamp(1.1rem, 0.8rem + 1.1vw, 1.5rem); font-weight: 700; font-variant-numeric: tabular-nums; }
.spanne-hinweis { font-size: 15px; color: var(--ink-soft); }

/* Die Ehrlich-dazu-Kaesten tragen die Richtung der Auslassung. Nie kleiner setzen als
   den Fliesstext daneben, siehe die 15px-Auflage bei den Empfehlungs-Karten. */
.ehrlich-dazu {
  margin-top: 20px; padding: 16px 18px;
  background: rgba(201, 168, 95, 0.10);
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
}
.ehrlich-dazu p { font-size: 15px; line-height: 1.55; margin: 6px 0 0; color: var(--ink); }

@media (max-width: 640px) {
  .spanne { grid-template-columns: 1fr; }
  .block-gerechnet, .block-gespannt { padding: 20px 18px; }
}