/* ============================================================
   Komponente: kategorie-karte
   ------------------------------------------------------------
   Quelle: Figma „Screens: App und Web" → Sub Categories Inhalte
   Cards, node 12908:19792, ausgelesen am 04.09.2026.

   Eine Kategorie im Inhalte-Panel: Icon im Kreis, Titel,
   Erklärung. Achterliste, Einfachauswahl — genau eine Kategorie
   ist zu einem Zeitpunkt geöffnet.

   AKTIV IST HIER KEIN CHIP-ZUSTAND, SONDERN EIN ORT. Die Karte
   trägt trotzdem die Chip-Grammatik der Einfachauswahl (§5):
   2-px-Rand in label-outline-active, KEIN Häkchen. Das ✓ würde
   Mehrfachauswahl behaupten.

   Der Zustand hängt an aria-current="page", nicht an
   aria-pressed: die Karte schaltet nichts um, sie führt an
   einen Ort — dieselbe Begründung wie im Navigationsstreifen.

   Setzt tokens.css und base.css voraus.

   VERWENDUNG
     <button class="kategorie-karte" type="button" aria-current="page">
       <span class="kategorie-karte__kreis">
         <svg class="ikon"><use href="#icon-kat-magazine"></use></svg>
       </span>
       <span class="kategorie-karte__texte">
         <span class="kategorie-karte__titel">Magazine & Zeitungen</span>
         <span class="kategorie-karte__erklaerung">Ganze Ausgaben und ihre Artikel</span>
       </span>
     </button>

   ------------------------------------------------------------
   GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE
     76   Höhe der Karte.
     52   Kreis um das Icon.
     2    Glow-Blur im Aktiv-Zustand (Figma drop-shadow 0 0 2).
          Die Glow-Tokens kennen 4, 10 und 25 — 2 gibt es nicht.
          Deshalb steht hier --glow-blur-s (4): der Glow ist reine
          Verstärkung, den Zustand trägt der 2-px-Rand (§5), und
          ein eigener Wert für 2 wäre ein neues Token.
   ============================================================ */

.kategorie-karte {
  display: flex;
  align-items: center;
  gap: var(--space-sm);                    /* 12 */
  width: 100%;
  height: 76px;                            /* gemessen, siehe Kopf */
  padding: var(--space-sm);                /* 12 */
  border-radius: var(--radius-md);

  background-color: var(--surface-card);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;

  /* Kein border: der Aktiv-Zustand wächst den Strich von 1 auf
     2 px, und ein border würde dabei den Inhalt um 1 px
     verschieben (§23.6). Beide Zustände liegen deshalb als
     box-shadow — genau wie beim Chip. */
  border: 0;
  box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline);
}

.kategorie-karte__kreis {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;                             /* gemessen, siehe Kopf */
  height: 52px;
  border-radius: var(--radius-full);

  /* Vertieft, nicht heller: der Kreis liegt auf einer Karte, und
     dort geht die Fläche eine Stufe nach unten (§5, §6). */
  background-color: var(--label-fill-inverted);
  box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline);
  color: var(--text-accent);
}

.kategorie-karte__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  min-width: 0;
}

.kategorie-karte__titel {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-medium-text);
  line-height: var(--line-height-medium-text);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.kategorie-karte__erklaerung {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-small-text);
  line-height: var(--line-height-small-text);
  font-weight: var(--font-weight-regular);
  color: var(--text-description);
}

/* ------------------------------------------------------------
   Aktiv
   ------------------------------------------------------------
   2 px in label-outline-active, dazu der Glow als Verstärkung.
   Der Glow ist NIE das alleinige Signal (WCAG 1.4.1) — hier
   trägt der Rand, und der Rand allein reicht.
   ------------------------------------------------------------ */

.kategorie-karte[aria-current="page"] {
  box-shadow:
    inset 0 0 0 var(--outline-active) var(--label-outline-active),
    var(--glow-chip);
}

/* ------------------------------------------------------------
   Zustände
   ------------------------------------------------------------ */

/* Hover und Press stehen seit dem 04.09.2026 an der Komponente
   (11397:3491 und 11397:3507) und sind daraus übernommen:

     Hover  Fläche wechselt auf icon-button-fill-hover, der
            Rand bleibt label-outline
     Press  dieselbe Fläche, Rand auf icon-button-outline-press

   Vorher stand hier ein Rand in ghost-outline und die Fläche
   blieb — geraten, nicht gemessen. */

@media (hover: hover) and (pointer: fine) {
  .kategorie-karte:hover:not([aria-current="page"]) {
    background-color: var(--button-icon-button-fill-hover);
  }
}

.kategorie-karte:active:not([aria-current="page"]) {
  background-color: var(--button-icon-button-fill-hover);
  box-shadow: inset 0 0 0 var(--outline-default) var(--button-icon-button-outline-press);
}

.kategorie-karte:active {
  transform: scale(0.99);
}

.kategorie-karte {
  transition:
    transform        calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out),
    background-color calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out),
    box-shadow       calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .kategorie-karte:active {
    transform: none;
  }
}

/* ============================================================
   OFFEN
   ------------------------------------------------------------
   · Der Glow trägt in Figma Blur 2, die Tokens kennen 4/10/25.
   · Der Ruhe-Rand liegt als box-shadow an der Karte selbst;
     Hover ersetzt nur die Fläche, damit der Rand stehen bleibt.
   ============================================================ */