/* ============================================================
   Komponente: sprach-label
   ------------------------------------------------------------
   Quelle: Figma „Design System" → language label, 11211:1955
   (DE / EN / FR), und die Instanz in „newsfeed cards"
   (13849:15182), ausgelesen am 05.09.2026.

   Sagt, in welcher Sprache ein Beitrag geschrieben ist. Steht
   nur dort, wo die Sprache VOM ERWARTETEN ABWEICHT — an einer
   deutschen Meldung in einer deutschen App wäre „DE" Rauschen.

   Fahne UND Kürzel, nicht nur die Fahne: eine Flagge ist ein
   Land und keine Sprache, und auf 16 px ist sie kaum zu
   unterscheiden. Das Kürzel trägt, die Fahne hilft beim Finden
   (WCAG 1.4.1 sinngemäß — nie ein Signal allein).

   Setzt tokens.css und base.css voraus.

   VERWENDUNG
     <span class="sprach-label">
       <img class="sprach-label__fahne" src="…/flagge-en.jpg" alt="">
       EN
     </span>

   Die Fahne trägt alt="" — sie wiederholt nur, was daneben
   steht. Wer den Screenreader nutzt, hört „EN".

   ------------------------------------------------------------
   GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE
     16   Fahne. In der freistehenden Komponente 36, in der
          Newsfeed-Karte 16 — hier gilt die kleinere, weil das
          Label dort vorkommt.
     5    Abstand Fahne zu Kürzel. Die Skala kennt 4 und 8.
     26   Höhe (4 + 18 + 4).
   ============================================================ */

.sprach-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;                                /* gemessen, siehe Kopf */
  flex-shrink: 0;
  width: fit-content;

  padding: var(--space-2xs) var(--space-xs) var(--space-2xs) var(--space-2xs);   /* 4 / 8 / 4 / 4 */
  border-radius: var(--radius-full);
  background-color: var(--label-fill-inverted);

  /* Innerer Schatten statt border: die Breite ergibt sich aus dem
     Inhalt (AGENTS.md §8a). */
  box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline);

  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 % */
  color: var(--label-text);
  white-space: nowrap;
}

.sprach-label__fahne {
  display: block;
  flex-shrink: 0;
  width: 16px;                             /* gemessen, siehe Kopf */
  height: 16px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

/* ============================================================
   OFFEN
   ------------------------------------------------------------
   · Die freistehende Komponente (11211:1955) ist 49 x 26 mit
     einer 36er Fahne; in der Newsfeed-Karte sind es 16. Zwei
     Größen für dasselbe Label — zu klären, ob das Absicht ist.
   · Die 5 stehen in keiner Abstandsskala. So gemessen.
   ============================================================ */