/* ════════════════════════════════════════════════════════════════════════
   components-catalog.css — GETEILTES Optik-Gerüst des „Daten-Katalog"-Typs
   (gruppierte, aufklappbare, durchsuchbare Liste). Gegenstück zur JS-Engine
   js/shared/catalog.js: eine Optik-Grundlage, mehrere Typen (Trivia, Patch-Notes).

   GETEILT (hier, generische .catalog-*-Klassen, additiv im Markup jedes Typs):
   sticky Suchleiste um die geteilte .search-box · Ergebnis-Zähler · Leerzustand ·
   Treffer-Highlight (mark) · Gruppen-Container + -Kopf + Chevron + Auf-/Zuklappen.

   PRO TYP (in components-<typ>.css): die Eintrags-Zeile selbst + ihr Aufklapp-Body
   + typische Deko (Trivia: Q&A-Badge/Gold-Antwort · Patch-Notes: Datum/Prose-Body) —
   die divergiert inhaltlich zu stark für eine erzwungene Vereinheitlichung.
   Strang: .project/tasks/guides-neuaufbau.md § „DRY / Weg 1".
   ════════════════════════════════════════════════════════════════════════ */

@layer components {
  /* ── Suchleiste: sticky Rahmen um die geteilte .search-box ───────────────── */
  .catalog-search-bar {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-2));
    z-index: 20;
    margin-bottom: var(--sp-1);
    padding: var(--sp-2) 0 10px;
    background: var(--bg-base);
  }

  /* In der sticky Leiste trägt die geteilte .search-box keinen Zusatz-Abstand. */
  .catalog-search-bar .search-box {
    margin-bottom: 0;
  }

  /* ── Ergebnis-Zähler + Leerzustand ──────────────────────────────────────── */
  .catalog-count {
    margin: 10px 2px var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
  }

  .catalog-count b {
    color: var(--accent-bright);
  }

  .catalog-empty {
    padding: var(--sp-10) var(--sp-5);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--text-3);
  }

  .catalog-empty b {
    color: var(--text-2);
  }

  /* ── Gruppen (aufklappbar) ──────────────────────────────────────────────── */
  .catalog-group {
    margin-bottom: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    overflow: hidden;
  }

  .catalog-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px var(--sp-4);
    border: none;
    background: var(--bg-card);
    color: var(--text-1);
    text-align: left;
    font-family: var(--font-head);
    font-size: var(--fs-base);
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
  }

  .catalog-group-head:hover {
    background: var(--bg-card-2);
  }

  /* Eintrags-Zähler rechts im Gruppen-Kopf. */
  .catalog-group-head .cnt {
    margin-left: auto;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-3);
  }

  .catalog-chev {
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--text-2);
    border-bottom: 2px solid var(--text-2);
    transform: rotate(45deg);
    transition: transform var(--t-fast);
  }

  .catalog-group.collapsed .catalog-chev {
    transform: rotate(-45deg);
  }

  .catalog-group.collapsed .catalog-group-body {
    display: none;
  }

  .catalog-group-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: 6px;
  }

  /* ── Treffer-Hervorhebung der Live-Suche ────────────────────────────────── */
  .catalog-block mark {
    padding: 0 1px;
    border-radius: 2px;
    background: var(--accent-glow);
    color: var(--accent-bright);
  }
}