/* ============================================================
   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>
       <svg class="kategorie-karte__pfeil"><use href="#icon-chevron"></use></svg>
     </button>

   Ohne Ziel (Screen fehlt noch): <span> statt <button>,
   Modifier --ohne-ziel. Sieht sonst gleich aus, Pfeil inklusive.

   ------------------------------------------------------------
   GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE
     76   Höhe der Karte.
     52   Kreis um das Icon.
     4,5 x 10  Pfeil. Native Größe der Figma-Komponente,
          derselbe Chevron wie in der Optionsliste.
     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);
}

/* ------------------------------------------------------------
   Der Pfeil: nur dort, wo er auch etwas verspricht
   ------------------------------------------------------------
   Der Chevron rechts sagt „das führt woanders hin" — und das
   stimmt nur mobil. Dort ist die Kategorie ein eigener Screen,
   den man betritt und aus dem man zurückkommt. Auf Tablet liegt
   dieselbe Liste in einem Overlay, wie ein Mega-Menü: man klickt
   eine Kategorie an, die Liste schließt sich, man bleibt wo man
   ist. Ein Pfeil würde dort eine Reise ankündigen, die nicht
   stattfindet. Lisi, 10.09.2026.

   Der Breakpoint steht hier stellvertretend für das Verhalten:
   die Liste ist an beiden Breiten dasselbe Stück Markup, und was
   sich unterscheidet, ist allein die Art, wie sie sich öffnet.
   Wird die Liste einmal auch breit als eigener Screen benutzt,
   gehört daraus eine benannte Variante statt einer Media Query.

   AUCH KARTEN OHNE ZIEL TRAGEN DEN PFEIL. Dass ihr Screen im
   Prototyp fehlt, ist eine Lücke im Prototyp, keine Aussage über
   die Kategorie: sie verhält sich genau wie die anderen, der
   Screen kommt später. Dieselbe Begründung wie beim Ausgrauen —
   es fehlt der Screen, nicht die Berechtigung.

   Icon und Maße wie beim Chevron der Optionsliste: dasselbe
   Zeichen, dieselbe native Größe (4,5 x 10), dieselbe Farbe.
   overflow: visible, weil der Sprite die viewBox um den halben
   Strich aufweitet (AGENTS.md §16).
   ------------------------------------------------------------ */

.kategorie-karte__pfeil {
  display: none;
  overflow: visible;
  flex-shrink: 0;
  width: 4.5px;                            /* native Größe, siehe oben */
  height: 10px;
  color: var(--text-description);
}

@media (max-width: 767px) {
  .kategorie-karte__pfeil {
    display: block;
  }
}

/* ------------------------------------------------------------
   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);
}

/* ...ABER NUR IM OVERLAY.

   Der Rand beantwortet die Frage „wo bin ich gerade?". Die stellt
   sich nur, wenn Liste und Inhalt gleichzeitig zu sehen sind —
   also im Overlay ab Tablet. Mobil ist die Liste ein eigener
   Screen: man tippt eine Kategorie an, verlässt die Liste, und
   mit Zurück kommt man wieder. Wer die Liste sieht, ist in keiner
   Kategorie. Dieselbe Unterscheidung wie beim Pfeil weiter oben,
   und dieselbe Einschränkung: der Breakpoint steht hier für das
   Verhalten. Lisi, 10.09.2026.

   Die Ansage für den Screenreader gehört dazu — aria-current
   darf mobil gar nicht erst gesetzt werden, das kann CSS nicht
   erledigen. Im Prototyp macht das prototyp.js. */

@media (max-width: 767px) {
  .kategorie-karte[aria-current="page"] {
    box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline);
  }
}

/* ------------------------------------------------------------
   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;
  }
}

/* ------------------------------------------------------------
   Ohne Ziel
   ------------------------------------------------------------
   Dieselbe Lage wie beim Shortcut (shortcut.css): eine Kategorie
   steht in der Liste, aber ihr Screen ist im Prototyp nicht
   gebaut. Sie bleibt trotzdem sichtbar — die Liste soll zeigen,
   was es am Standort gibt, nicht nur was klickbar ist.

   Als <span> ausgezeichnet, nicht als <button>: sie ist damit
   nicht in der Tab-Reihenfolge und meldet sich beim Screenreader
   nicht als Bedienelement. Ein Button, der nichts tut, ist eine
   Zusage, die nicht eingelöst wird.

   Volle Farbe, kein Ausgrauen. Ausgegraut hieße „hier darfst du
   gerade nicht" — es fehlt aber der Screen, nicht die
   Berechtigung.

   Ergänzt am 10.09.2026.
   ------------------------------------------------------------ */

.kategorie-karte--ohne-ziel {
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .kategorie-karte--ohne-ziel:hover:not([aria-current="page"]) {
    background-color: var(--surface-card);
  }
}

.kategorie-karte--ohne-ziel:active:not([aria-current="page"]) {
  background-color: var(--surface-card);
  box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline);
}

.kategorie-karte--ohne-ziel: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.
   ============================================================ */