/* Degressive AfA (Property-Detail, Finanzbereich).
   Struktur wie der Finanzierungsrechner: Balkendiagramm als HEADER oben (volle
   Breite), darunter 50/50 Eingaben | Info + Ergebnis. Farbflächen wie .finance-calc
   (--color-complement-Tönung, --color-bg-alt neutral). Reuse: .panel / .field /
   .list / .hint. Klassen bewusst minimal — Textelemente strukturell gescopet. */

/* Intro unter der Überschrift (erklärt Prinzip + Zielgruppe): volle Breite,
   Farbe/Schriftgröße über die globale .hint-Klasse. Hier nur der Abstand. */
.afa-calc > p {
  margin: 0 0 var(--space-5);
}

/* --- Diagramm-Header (volle Breite oben) --- */
.afa-chart-header {
  margin-block-end: var(--gap-block);
  padding-block-end: var(--gap-inline);
  border-block-end: 0.0625rem solid var(--color-border);
}

/* Chart-Titel */
.afa-chart-header > p:first-child {
  margin: 0 0 var(--space-1);
  font-weight: 600;
}

/* Kurzhinweis unter dem Titel: was die Balken zeigen (Restwert je Jahr). */
.afa-chart-header > p:nth-child(2) {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Achsen-Label (Jahre): der <p> direkt nach dem Diagramm, zentriert. */
.afa-chart-header > .afa-chart + p {
  margin: var(--space-2) 0 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Ergebnis-Zeile (kumulierte Abschreibung) sitzt jetzt im Header, ganz unten:
   getönte Complement-Fläche zum Absetzen (wie .finance-calc-rate). */
.afa-chart-header > p:last-child {
  margin: var(--space-4) 0 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-complement) 12%, var(--color-bg));
  font-size: var(--text-lg);
  font-weight: 600;
  text-align: center;
}

/* Vertikales Balkendiagramm: jede <li> eine Spalte (Restwert-Balken).
   Höhe je Balken via --bar (Prozent der Basis), inline / von afa-calc.js gesetzt.
   padding oben/unten gibt Platz für Wert-Label (über dem 100%-Balken) und
   Jahres-Label (unter der Grundlinie). */
.afa-chart {
  list-style: none;
  margin: 0;
  padding: 1.5rem 0 1.75rem;
  height: calc(15rem + 1.5rem + 1.75rem);
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}
.afa-chart li {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  cursor: pointer;
}
.afa-chart .afa-bar {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: var(--bar, 0%);
  min-height: 2px;
  background: var(--color-complement);
  border-radius: var(--radius) var(--radius) 0 0;
  transition: height 0.4s ease, opacity var(--transition);
}
.afa-chart .afa-bar-value {
  position: absolute;
  inset-inline: 0;
  bottom: calc(var(--bar, 0%) + 0.25rem);
  text-align: center;
  font-size: var(--text-xs);
  white-space: nowrap;
}
.afa-chart .afa-bar-year {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  margin-top: 0.4rem;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Hover (Transparenz-Variante): beim Hover treten die übrigen Balken per
   Opacity zurück, der aktive bleibt voll sichtbar, sein Wert-Label wird betont. */
.afa-chart:has(li:hover) .afa-bar {
  opacity: 0.3;
}
.afa-chart li:hover .afa-bar {
  opacity: 1;
}
.afa-chart li:hover .afa-bar-value {
  color: var(--color-complement);
  font-weight: 700;
}

/* --- 50/50-Raster: Eingaben (links) | Info + Ergebnis (rechts), wie finance-calc --- */
.afa-calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-block);
  align-items: start;
}

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

.afa-calc-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Eckdaten-Liste (Satz, Förder-Zeitfenster): globale .list.check.bg-Komponente
   (Häkchen + neutrale Box). Marker im Section-Akzent (--color-complement). */
.afa-calc .list {
  --list-icon-color: var(--color-complement);
}

/* "Wichtig"-Hinweis (Caveat): neutral, nur fett — keine Signalfarbe. */
.afa-calc-info > .list + p {
  margin: 0;
}
.afa-calc-info > .list + p strong {
  color: var(--color-text);
}

/* Ergebnis-Summe (im Header, siehe .afa-chart-header > p:last-child). */
.afa-calc #afa-sum {
  display: inline-block;
  padding: 0.1em 0.55em;
  border-radius: var(--radius-pill);
  background: var(--color-complement-soft);
  color: var(--color-complement);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .afa-chart .afa-bar {
    transition: none;
  }
}

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

@media (max-width: 30rem) {
  .afa-chart {
    gap: var(--space-1);
  }
  .afa-chart .afa-bar-value {
    font-size: 0.625rem;
  }
}