/* ============================================================================
   Maße — Kanten, Radien, Abstände, Zielgrößen (FE-19).
   Kein Wert existiert zweimal. Komponenten enthalten keine nackten Pixel.
   ========================================================================== */

:root {
  /* --- Kanten ------------------------------------------------------------ */
  --border-hairline: 1px;
  --shadow-offset: 4px; /* harter Versatz unter Panels, kein Weichzeichner */
  --shadow-offset-card: 2px; /* flacher Versatz — derzeit ungenutzt, Karten tragen --shadow-offset */
  --shadow-offset-control: 3px; /* derselbe Versatz unter Knöpfen */
  --shadow-offset-control-hover: 6px;
  --shadow-offset-knob: 1px;
  --shadow-blur-knob: 3px;
  --shadow-blur-control-hover: 10px;

  /* --- Bewegung ----------------------------------------------------------- */
  --lift-hover: 2px;
  --motion-fast: 120ms;
  --motion-ease: cubic-bezier(0.2, 0, 0.2, 1);
  --motion-spinner: 700ms;
  /* Auf- und Zuklappen ganzer Flaechen: 120 ms wirken bei der Strecke
     abgehackt, ab etwa 300 ms wartet man darauf. */
  --motion-panel: 220ms;

  /* --- Spinner ------------------------------------------------------------ */
  --size-spinner: 20px;
  --border-spinner: 2px;
  --border-focus: 3px;
  --border-indicator: 4px;

  /* --- Radien ------------------------------------------------------------ */
  /* Ein Wert für Knöpfe, Eingabefelder, Cover und Datumskacheln — er war
     vorher doppelt als --radius-chip und --radius-field vorhanden (FE-19). */
  --radius-control: 10px;

  /* Der Knopf braucht mehr Radius als die übrigen Bedienelemente: Die Squircle
     hält die Ecke länger, dadurch wirkt derselbe Wert dort eckiger. */
  --radius-button: 16px;
  --radius-sm: 8px;
  --radius-card: 22px;
  --radius-panel: 26px;
  --radius-full: 50rem;

  /* --- Abstände ---------------------------------------------------------- */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Geraeteeinzuege. Als WebApp im Vollbild liegen oben die Statusleiste und
     unten der Home-Indikator; im Browser sind beide 0. Sie stehen hier, damit
     keine Komponente `env()` selbst schreiben muss (FE-11). Der Rueckfall
     traegt eine Einheit: `0` allein ist in env() ungueltig, die Erklaerung
     fiele weg und der Einzug waere gar nicht gesetzt. */
  --space-safe-top: env(safe-area-inset-top, 0px);
  --space-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* --- Zielgrößen (NFA-18 / FE-32) --------------------------------------- *
   * ACHTUNG — bewusste Abweichung, entschieden von Tobias am 2026-09-14.
   * Der Wert gilt der HÖHE eines Bedienelements; wo etwas quadratisch ist
   * (Icon-Knopf), gilt er auch der Breite.
   *
   * Wo 35 px steht:
   *   WCAG 2.5.8 (Zielgröße Minimum, AA) verlangt 24 x 24 px — erfüllt.
   *   WCAG 2.5.5 (Zielgröße Erweitert, AAA) verlangt 44 x 44 px — verfehlt.
   *   NFA-18 fordert >= 44 px, Apple 44 pt, Android 48 dp — alle verfehlt.
   *
   * Das ist kein Versehen und keine Sparmaßnahme am falschen Ende: Die
   * gesetzliche Messlatte ist AA, und die hält der Wert mit Abstand. Wer ihn
   * zurückdreht, ändert EIN Token, keinen Aufbau — die Elemente rechnen alle
   * damit.                                                                  */
  --size-target-min: 35px;
  --size-button: 40px; /* früher 38 gezeichnet, NFA-18 fordert 48 — siehe FE-32 */

  --size-chip: 28px; /* Chip ist KEIN Bedienelement, 44 gilt nicht */

  /* --- Bauteilmaße -------------------------------------------------------- *
   * Aus dem Styleguide abgemessen. Stehen hier, damit sie an genau einer Stelle
   * stehen — sonst tauchen sie in fünf Komponenten wieder auf (FE-19).      */
  --size-indicator: 26px; /* Bereichsmarke, Höhe */
  --radius-indicator: 50rem; /* rechte Seite der Marke vollrund */
  --size-brand-mark: 28px;
  --size-avatar: 32px;
  --size-avatar-sm: 28px;
  --size-avatar-lg: 48px;
  --size-avatar-xl: 96px;
  --avatar-overlap: 4px; /* wie weit Avatare einander überlappen */

  /* Schwebende Flächen (Tooltip) — weicher Schatten statt hartem Versatz:
     Sie liegen über der Seite, nicht auf ihr. */
  --shadow-offset-float: 8px;
  --shadow-blur-float: 24px;
  --size-tooltip-max: 280px;
  --size-tooltip-max-lg: 360px;

  /* --- Weitere Bauteile ---------------------------------------------------- */
  --size-step-marker: 28px;
  --size-tabbar-item: 75px; /* Pflichtenheft § 10.5 */
  --size-tabbar: 60px;
  --font-size-stat: 2.75rem; /* 44 — Wireframe G */
  /* Bahn, Hoehe und Knopf muessen zusammenpassen:
     Knopf + 2 x Einzug = Hoehe. 16 + 2 x 3 = 22. */
  --size-switch: 40px;
  --size-switch-block: 22px;
  --size-switch-knob: 16px;
  --size-switch-inset: 3px;
  --size-dialog-max: 34rem;
  --size-dropdown-min: 14rem;
  /* Schmalste Spalte einer Angabe („Dabei seit", „Spielniveau"). */
  --size-fact-min: 9rem;
  --size-rank-place: 2rem; /* Platzziffer der Rangliste, damit Namen fluchten */
  --size-qr: 14rem; /* QR-Code zum Einrichten des zweiten Faktors — gross genug fuer jede Handykamera */
  --size-menu-text-max: 17rem; /* Fliesstext in einem Menue bricht, statt zu wachsen */
  --size-menu-max: 24rem; /* Dropdown darf breiter werden als sein Feld */
  --size-carousel-item: 15rem;
  --size-progress: 10px;
  --size-ring: 128px; /* Fortschrittsring im Dashboard */
  --size-ring-track: 12px; /* Staerke des Rings */
  --size-ring-sm: 40px; /* derselbe Ring in der Zeile */
  --size-ring-track-sm: 4px;

  /* Emblem — der gemeinsame Rahmen von Abzeichen, Stufen und Raengen. */
  /* Das Wappen skaliert als Ganzes: Rahmen, Icon und Schleife sind Anteile
     dieser einen Groesse (FE-75). Fluid, damit es auf dem Telefon nicht die
     halbe Zeile frisst. */
  --size-emblem: 96px;
  --size-emblem-max: 96px; /* Obergrenze, wenn das Wappen am Platz haengt */
  --size-emblem-sm: 32px;
  --size-emblem-xs: 20px; /* Marke oben rechts am Avatar */
  --size-emblem-lg: 128px;

  --size-star: 20px;
  --size-dropzone-block: 132px;
  --size-status-dot: 12px;

  --ratio-image: 1; /* Bilder und Cover sind quadratisch — FE-66 */
  --size-cover: 56px; /* Cover 1:1 und Datumskachel */
  --size-cover-sm: 48px; /* Cover in kompakten Listen */
  /* Eingabefelder sind genau so hoch wie der Knopf, damit Feld und Knopf in
     einer Werkzeugleiste auf einer Linie stehen. Damit gilt für sie dieselbe
     Abweichung von NFA-18 wie für den Knopf (FE-32) — ein Token, kein Umbau. */
  --size-field: var(--size-button);
  --size-dot: 8px; /* Melde-Punkt an Kopfzeilen-Icons */
  --size-icon-eyebrow: 16px;
  --size-nav-item: 38px;
  --size-nav-subitem: 28px;
  --size-page-item: 36px;
  --border-alpha-soft: 55%; /* Deckkraft des Chip-Randes */
  --size-search-min: 8rem; /* darunter ist das Suchfeld nur noch ein Kasten */
  --size-search-max: 480px;

  /* Knopf und Chip haben eine asymmetrische Polsterung: auf der Icon-Seite
     schmaler, weil das Icon selbst schon Luft mitbringt. */
  --button-padding-block: 8px;
  --button-padding-inline: 20px;
  --button-padding-inline-icon: 12px;
  --button-gap: 10px;
  --chip-padding-block: 3px;
  --chip-padding-inline: 10px;
  --chip-padding-inline-icon: 6px;
  --chip-gap: 6px;
  --table-padding-block: 6px;
  --table-padding-inline: 12px;

  /* --- Layout ------------------------------------------------------------ */
  --size-sidebar: 268px;
  --size-topbar: 64px; /* Kopfleiste — Höhe und Klebekante der Seitenleiste */
  --space-edge-left: 24px; /* durchgehende linke Kante der Seitenleiste */
  --size-card-min: 340px; /* schmalste Listen-Karte im Raster */
  --size-prompt-min: 16rem; /* Frage und Text der Aufforderung, bevor sie umbricht */

  /* --- Stapelebenen ------------------------------------------------------ *
   * Aufsteigend, damit an einer Stelle steht, was worüber liegt. Kein
   * schwebendes Element setzt eine nackte Zahl; nur die Ordnung innerhalb
   * eines Bauteils (Emblem: Rahmen, Grund, Inhalt) bleibt lokal.           */
  --layer-badge: 1; /* Wappen am Avatar, Marke an der Ecke */
  --layer-open: 4; /* geöffnete Klick-Fläche samt Auslöser, aufgeklappte Menüs */
  --layer-tooltip: 5; /* schwebender Hinweis — über allem in der Karte, auch über einer offenen Fläche */
  --layer-topbar: 6; /* Kopfleiste — klebt oben und bleibt über allem, was im Inhalt aufklappt */

  /* --- Typografie -------------------------------------------------------- *
   * Barlow liegt selbst gehostet unter packages/ui/fonts (§ 9.3, FE-53).
   * „Barlow Fallback" ist die metrisch angeglichene Systemschrift — sie
   * hält das Layout still, bis die Webfont geladen ist. Siehe ui/fonts.css.
   * Keine Laufweite: die Schrift trägt ihren eigenen Zeichenabstand,
   * letter-spacing bleibt ungesetzt.                                        */
  --font-family: Barlow, "Barlow Fallback", Arial, sans-serif;

  /* Schriftgrössen in rem, damit sie mit der Browsereinstellung wachsen
     (WCAG 1.4.4). Die Kommentare nennen den Wert bei 16 px Grundgrösse. */
  --font-size-brand: 1.25rem; /* 20 */
  --font-size-title: 1.875rem; /* 30 */
  --font-size-card-title: 1.25rem; /* 20 — Titel auf Listen-Karten */
  --font-size-body: 1.125rem; /* 18 */
  --font-size-small: 1rem; /* 16 — Beizeilen, Metatexte, Knopf */
  --font-size-chip: 0.875rem; /* 14 */
  --font-size-nav-sub: 0.8438rem; /* 13,5 */
  --font-size-eyebrow: 0.75rem; /* 12 */
  --font-size-avatar-sm: 0.6875rem; /* 11 */

  /* --- Icons ------------------------------------------------------------- */
  --size-icon: 1em;
  --size-icon-nav: 20px;

  /* In der Kopfleiste steht kein Wort neben dem Symbol — es traegt die
     Aussage allein und ist deshalb das groesste im Haus. Es waechst nach
     innen in seinen Knopf hinein: Die Zielflaeche bleibt 44 px, der Abstand
     zwischen zwei Symbolen wird dabei kleiner. */
  --size-icon-topbar: 24px;
}