/* Abrechnungsbereich — additive Gestaltung.
 *
 * Zwei Dinge passieren hier, beide bewusst getrennt von stil.css:
 *
 * 1. Abstands- und Radius-Token (Q-DESIGN.08/.09). Der Bestand kennt für Farben und
 *    Schriften durchgehend Token, für Abstände und Radien nicht — dort stehen 62
 *    border-radius-Rohwerte mit zwölf verschiedenen Größen. Die Abrechnung führt das
 *    Raster additiv ein; der Dispositionsbereich bleibt unangetastet (Entscheidung
 *    vom 30.08.2026). Die Namen sind bewusst bereichsneutral gewählt: Taugen die
 *    Token global, wandern sie nach Absprache mit Simon nach stil.css — ohne dass
 *    eine Abrechnungsdatei umbenannt werden muss.
 *
 * 2. Gestaltung des Bereichs selbst, ausschließlich unter #bereichAbrechnung und
 *    ausschließlich über Token — keine festen Farben, Schriften, Abstände, Radien.
 *
 * Die Radius-Stufen folgen dem gemessenen Bestand (häufigste Werte 4/5/6/8 px),
 * damit der Bereich neben der Disposition nicht fremd wirkt: Die visuelle
 * Gesamtausrichtung ist noch offen (docs/abrechnung-leitplanken.md).
 */

:root {
  /* Seit #60 Aliase auf das zentrale Designsystem in stil.css —
     kein paralleler Namensraum mehr, Werte identisch. */
  --abstand-1: var(--space-1);
  --abstand-2: var(--space-2);
  --abstand-3: var(--space-3);
  --abstand-4: var(--space-4);
  --abstand-5: var(--space-5);
  --abstand-6: var(--space-6);
  --radius-klein: var(--radius-sm);
  --radius-mittel: var(--radius-md);
  --radius-gross: var(--radius-lg);
  --radius-rund: 50%;
}

#bereichAbrechnung 
#bereichAbrechnung .abrechnungInhalt {
  padding: var(--abstand-4) var(--abstand-5);
  display: grid;
  gap: var(--abstand-4);
  max-width: 72rem;
}

#bereichAbrechnung .abrechnungKarte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-mittel);
  padding: var(--abstand-4) var(--abstand-5);
}

#bereichAbrechnung .abrechnungKarte h3 {
  margin: 0 0 var(--abstand-2);
}

/* Beträge: rechtsbündig, Tabellenziffern — Q-DESIGN, Register ABR-12.03.06. */
#bereichAbrechnung .betrag {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  text-align: right;
}