/* ============================================================
   Komponente: status-label
   ------------------------------------------------------------
   Quelle: Figma „Screens: App und Web" → Labels and tags,
   Instanz I13866:16140;11408:4478 in der Standort-Karte,
   ausgelesen am 04.09.2026.

   Die Status-Label-Familie aus SKILL.md §5: NICHT klickbar,
   deshalb nur abgeschwächte Strokes. Ein voller farbiger Border
   heißt „interaktiv" und würde als aktiver Chip gelesen
   (Affordanz-Regel §5).

   Vier Rollen, dieselbe Form (§21):
     neutral  Zustand ist auch ohne den Nutzer richtig
     blau     ohne Reaktion kommt er nicht weiter
     gruen    fertig geworden, was er angestoßen hat
     rot      auf unserer Seite fehlgeschlagen

   Im Prototyp kommt „aktiv" in grün vor: der Zugang ist
   eingerichtet und läuft — fertig geworden, was angestoßen war.

   ZWEI SIGNALE, NICHT NUR FARBE (§4, WCAG 1.4.1): der Punkt
   trägt die Rolle mit. Ohne ihn hinge der Zustand allein an der
   Textfarbe.

   Setzt tokens.css und base.css voraus.

   VERWENDUNG
     <span class="status-label status-label--gruen">
       <svg class="status-label__punkt"><use href="#icon-dot"></use></svg>
       aktiv
     </span>

   ------------------------------------------------------------
   GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE
     8   Punkt. Native Größe der Figma-Komponente.
     26  Gesamthöhe (4 + 18 + 4; die Zeilenhöhe 18 kommt aus
         dem Token, 12 x 1,5 — die 26 der Komponente gehen nur
         damit auf, nicht mit den 1,3 aus dem Code-Export).
         Unter 44 — das ist richtig:
         das Label ist NICHT klickbar, die Touch-Target-Regel
         §11.2 gilt nur für Bedienelemente.
   ============================================================ */

.status-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);                   /* 4 */
  flex-shrink: 0;

  /* DAS LABEL DARF NIE AUF VOLLE BREITE GEHEN.
     ------------------------------------------------------------
     In einer Flex-Spalte streckt die Voreinstellung
     `align-items: stretch` jedes Kind über die ganze Breite —
     auch ein inline-flex, denn als Flex-Kind wird es zum Block.
     In „Meist gelesen" liefen die Labels dadurch über die ganze
     Zeile: aus „Trend" wurde ein Balken (Lisi, 04.09.2026).

     `width: fit-content` hebt das auf, weil sich Stretch nur auf
     eine Quer-Größe von `auto` anwendet. Anders als
     `align-self: flex-start` ändert es die senkrechte
     Ausrichtung NICHT — in einer Zeile bleibt das Label mittig,
     wie in der Standort-Karte. */
  width: fit-content;

  padding: var(--space-2xs) var(--space-xs);   /* 4 / 8 */
  border-radius: var(--radius-full);

  font-family: var(--font-family-inter);
  font-size: var(--font-size-extra-small-text);
  line-height: var(--line-height-extra-small-text);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-small-text-bold);   /* 1 % */
  white-space: nowrap;

  /* Der Strich als innerer Schatten, nicht als border: bei
     automatischer Höhe zählt ein border oben drauf und machte
     das Label 28 statt 26 hoch. AGENTS.md §8a. Nachgemessen und
     nachgezogen am 04.09.2026. */
  --label-strich: transparent;
  box-shadow: inset 0 0 0 var(--outline-default) var(--label-strich);
}

.status-label__punkt {
  display: block;
  overflow: visible;
  flex-shrink: 0;
  width: 8px;                              /* gemessen, siehe Kopf */
  height: 8px;
  /* Erbt die Rollenfarbe über currentColor. */
}

/* DER TREND-PFEIL ZEIGT NACH OBEN. Im Sprite zeigt das Icon
   nach unten — so exportiert Figma es, und die Komponente dreht
   es dort um 180° (2233:22566: `rotate-180`). Der Export
   liefert die Geometrie VOR der Drehung (AGENTS.md §17), also
   wird hier gedreht.

   Inhaltlich ist das der Punkt: „Trend" heißt steigend. Ein
   Pfeil nach unten sagte das Gegenteil. Lisi, 04.09.2026. */
.status-label--trend .status-label__punkt {
  transform: rotate(180deg);
}

/* ------------------------------------------------------------
   Rollen
   ------------------------------------------------------------ */

.status-label--neutral {
  background-color: var(--label-fill);
  --label-strich: var(--label-outline);
  color: var(--text-description);
}

.status-label--gruen {
  background-color: var(--green-label-fill);
  --label-strich: var(--green-label-stroke);
  color: var(--green-label-text);
}

.status-label--blau {
  background-color: var(--blue-label-fill);
  --label-strich: var(--blue-label-stroke);
  color: var(--blue-label-text);
}

.status-label--rot {
  background-color: var(--warning-red-fill);
  --label-strich: var(--red-label-stroke);
  color: var(--red-label-text);
}

/* ============================================================
   OFFEN
   ------------------------------------------------------------
   · Das Gewicht ist in Figma Regular. SKILL.md §5 nennt für
     Status-Labels Medium. Hier gilt Figma (Entscheidung Lisi,
     04.09.2026) — im System nachzuziehen.
   ============================================================ */