/* ============================================================================
   ABSTÄNDE, RADIEN, RAHMEN & GRÖSSEN
   ----------------------------------------------------------------------------
   Nur Skala-Werte verwenden — keine willkürlichen px. 4px-Basis.
============================================================================ */

:root {

  --space-px:1px;--space-0:0;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;

  /* ========================= RADIEN — GENAU DREI (§1.4) =====================
       --radius-element  12px  Knöpfe, Felder, Zeilen, Menü-Einträge, Chips
       --radius-flaeche  16px  Karten, Kacheln, Tabellenflächen, Kontextleiste
       --radius-pill     Pille Pillen, Badges, Avatare, Zähler
       --radius-zeile    = element  die Zeile IN einer Fläche (Tabellenzeile) —
                         eigene Rolle, weil ein Stil sie eckig stellen darf,
                         während Knopf und Feld ihre Rundung behalten
     Alte Stufen sm…2xl bleiben als ABBILDUNG auf diese drei stehen.
     ==================================================================== */
  --radius-element:0.75rem;--radius-flaeche:1rem;--radius-pill:9999px;
  --radius-zeile:var(--radius-element);

  /* ---- --radius-marke — Form der Kleinelemente ----
     ⚠ BEWUSSTE vierte Radius-Rolle, Abweichung von § 1.4 (genau drei Radien)
     — nicht versehentlich vereinheitlichen. Betroffene Elemente sind 16–36px
     groß; ein absoluter Radius würde kleine Elemente stark und große schwach
     runden, deshalb PROZENTUAL (25 %) statt einem der drei --radius-*-Tokens. */
  --radius-marke:25%;
  --radius-none:0;--radius-sm:var(--radius-element);--radius-md:var(--radius-element);--radius-lg:var(--radius-flaeche);--radius-xl:var(--radius-flaeche);--radius-2xl:var(--radius-flaeche);--radius-full:var(--radius-pill);
  --border-width-thin:1px;--border-width-thick:2px;

  --icon-xs:0.875rem;--icon-sm:1rem;--icon-md:1.25rem;--icon-lg:1.5rem;--icon-xl:2rem;
  --avatar-xs:1.5rem;--avatar-sm:2rem;--avatar-md:2.5rem;--avatar-lg:3rem;--avatar-xl:4rem;--avatar-radius:var(--radius-full);

  --control-height-sm:2rem;--control-height-md:2.5rem;--control-height-lg:3rem;
  --row-height-compact:2.25rem;--row-height-comfortable:2.75rem;
}