/* Vermieten-Rechner.
 *
 * Aufbau aus betriebsrenten-rechner.css uebernommen, damit die Werkzeug-Seiten
 * gleich aussehen. Zwei Klassen sind umbenannt, weil sie hier etwas anderes tragen:
 *   .block-rest    zeigt, was am Ende uebrig bleibt (die erste Pflicht-Ausgabe)
 *   .block-urteil  zeigt den Ja-Nein-Satz (die zweite Pflicht-Ausgabe)
 *
 * ⚠️ Die beiden Bloecke muessen optisch klar verschieden bleiben. Der eine ist eine
 * Zahl, der andere ein Urteil ueber diese Zahl. Wer sie angleicht, macht aus zwei
 * Aussagen eine, und das Video verspricht zwei.
 */

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

/* ---------- 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: 3px; 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: 3px; 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: 3px; 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: 3px;
  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: 3px;
  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-rest {
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--gold);
  border-radius: 3px;
  padding: 26px;
  margin-bottom: 26px;
}
.block-rest .kpi { font-size: clamp(2.4rem, 1.6rem + 3vw, 3.4rem); line-height: 1.05; margin: 6px 0 8px; }
.block-rest .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-urteil {
  background: rgba(10, 23, 48, 0.045);
  border: 1px dashed rgba(10, 23, 48, 0.28);
  border-radius: 3px;
  padding: 26px;
}
.block-urteil .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: 3px; }
.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-rest, .block-urteil { padding: 20px 18px; }
}


/* Drei Zustaende des Urteils. Der dritte ist der wichtigste:
 * Solange nichts eingegeben ist, gibt es KEIN Urteil, auch kein beruhigendes.
 * Beim ersten Testlauf sagte die Rechnung bei leerem Formular "reicht aus". */
.block-urteil .urteil {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.35rem, 1rem + 1.6vw, 1.9rem);
  line-height: 1.25;
  margin: 6px 0 10px;
}
.block-urteil.ist-ja   .urteil { color: #2E6B4F; }
.block-urteil.ist-nein .urteil { color: #A03C2E; }
.block-urteil.ist-leer .urteil { color: var(--ink-soft); font-style: italic; }
.block-urteil .urteil-begruendung {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.block-urteil .urteil-rechnung {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  font-size: 14px;
  color: var(--ink-soft);
}