/* ============================================================
   Inline-Finanzierungsrechner (Property-Detail, Kostenbereich)
   View: Property::render_finance_calc · JS: page/finance-calc.js
   Abhängige Sub-Section von .costs. Beispielberechnung, keine
   Rechtsverbindlichkeit. Farben/Abstände über Tier-Variablen.
   ============================================================ */

.finance-calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-block);
  align-items: start;
}

/* --- Eingaben (linke Spalte) --- */
.finance-calc-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Hint direkt unter dem zugehörigen Feld andocken (negativer Abstand zum Feld-Gap) */
.finance-calc-inputs > .hint {
  margin-block-start: calc(var(--space-4) * -1 + var(--space-1));
}

/* Number-Input mit Einheit-Suffix (€/%) */
.finance-calc-input {
  position: relative;
  display: block;
}

.finance-calc-input input {
  width: 100%;
  margin: 0;
  padding-inline-end: 2.5rem;
}

/* Abgeleitetes Feld (Zusätzliche Kosten) — nicht editierbar, leicht gedimmt */
.finance-calc-input input[readonly] {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  cursor: default;
}

.finance-calc-input[data-unit]::after {
  content: attr(data-unit);
  position: absolute;
  inset-block: 0;
  inset-inline-end: var(--space-3);
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  pointer-events: none;
}

/* --- Sollzinsbindung-Slider --- */
.finance-calc-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-block-end: var(--space-2);
}

.finance-calc-slider-head label {
  font-weight: 600;
}

.finance-calc-slider-head output {
  color: var(--color-complement);
  font-weight: 700;
}

.finance-calc-slider input[type="range"] {
  width: 100%;
  accent-color: var(--color-complement);
  cursor: pointer;
}

.finance-calc-scale {
  display: flex;
  justify-content: space-between;
  margin-block-start: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- Ergebnis (rechte Spalte) --- */
.finance-calc-results {
  display: flex;
  flex-direction: column;
  margin-block-start: var(--space-3);
  gap: var(--space-4);
}

.finance-calc-rate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-complement) 12%, var(--color-bg));
}

.finance-calc-rate-label {
  font-weight: 700;
}

.finance-calc-rate-value {
  color: var(--color-complement);
  white-space: nowrap;
}

.finance-calc-rate-value strong {
  font-size: var(--text-2xl);
}

.finance-calc-net {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0 var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
}

.finance-calc-net-label {
  font-weight: 700;
}

.finance-calc-net-desc {
  grid-column: 1;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.finance-calc-net strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--color-complement);
  font-size: var(--text-lg);
  white-space: nowrap;
}

/* --- Mobil: einspaltig --- */
@media (max-width: 47.999rem) {
  .finance-calc-grid {
    grid-template-columns: 1fr;
  }
}