/* ============================================================
   Komponente: ausgaben-label
   ------------------------------------------------------------
   Quelle: Figma „Screens: App und Web" → Ausgaben label Zeitung,
   Instanz I13844:15536;7865:11995 auf dem Bild-Cover in „Top
   Zeitungen", ausgelesen am 11.09.2026.

   Sagt, wie viele Ausgaben hinter einem Cover liegen: eine
   Boulevardzeitung erscheint mehrmals am Tag, das Cover zeigt
   aber nur eine. Steht deshalb NUR dort, wo es mehr als eine
   gibt — „1 Ausgabe" wäre Rauschen.

   Blau, nicht neutral: §21 gibt Blau die Rolle „ohne deine
   Reaktion kommt es nicht weiter" — hier ist die Reaktion das
   Antippen, um die anderen neun zu sehen. Es ist eine Einladung,
   kein Zustand, und trägt deshalb auch keinen Punkt wie die
   status-label-Familie.

   ------------------------------------------------------------
   DER RING IST KEIN RAHMEN, SONDERN ABSTAND ZUM UNTERGRUND
   In Figma steckt die Pille in einem zweiten Behälter mit 2 px
   Polster in surface-primary. Der ist keine Zierde: das Label
   liegt auf einem Titelblatt, also auf beliebig hellem oder
   dunklem Papier, und ohne diesen Saum liefe der blaue Rand
   irgendwann in eine Schlagzeile.

   Hier steht er als ZWEITER, äußerer Schatten statt als zweites
   Element. Ein äußerer Schatten braucht keinen Platz im Layout —
   das Label bleibt 26 hoch, und wer es setzt, muss nicht zwei
   Kästen ineinanderschachteln.

   Setzt tokens.css und base.css voraus. Zum Platzieren auf einem
   Cover siehe cover.css (.cover__blatt / .cover__marke).

   VERWENDUNG
     <span class="ausgaben-label">10 Ausgaben</span>

   Kein aria-hidden: die Zahl ist eine Auskunft und gehört in den
   Namen des Covers („Bild, 10 Ausgaben").

   ------------------------------------------------------------
   GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE
     26   Höhe der Pille (4 + 18 + 4).
     2    Der Saum ringsum. Die Abstandsskala beginnt bei 4 —
          2 ist hier kein Abstand zwischen Dingen, sondern die
          Dicke einer Trennung, und dafür gibt es kein Token.
     30   Gesamthöhe mit Saum. Steht nur im Kopf, nicht im Code:
          der Saum liegt außerhalb des Layouts.
   ============================================================ */

.ausgaben-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: fit-content;

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

  /* Innen der Rand des Labels, außen der Saum. Beide als
     Schatten: die Breite ergibt sich aus dem Text, und ein
     border würde bei border-box den Text um 1 px einschnüren
     (AGENTS.md §8a). */
  box-shadow:
    inset 0 0 0 var(--outline-default) var(--blue-label-stroke),
    0 0 0 2px var(--surface-primary);           /* gemessen, siehe Kopf */

  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(--blue-label-text);
  white-space: nowrap;
}

/* ============================================================
   OFFEN
   ------------------------------------------------------------
   · Der Saum ist in Figma surface-primary — die Farbe der Seite,
     nicht die des Untergrunds. Auf einer Karte (surface-card)
     stimmte er deshalb nicht. Im Prototyp kommt das Label nur
     auf Covern in der Seite vor; sollte es einmal auf einer
     Karte liegen, gehört der Saum an den Untergrund gebunden
     (SKILL.md §5/§6, „Fläche folgt dem Untergrund").
   ============================================================ */