/* ═══════════════════════════════════════════════════════════════════════════
   BLUE HORIZON DESIGN SYSTEM — components/collapse.css
   Version: 0.1.1 · Build: 2026-09-22 · Benötigt: tokens.css, base.css
   VENDORED — READ-ONLY.

   0.1.1 — Der Chevron war zu klein und zu blass: --bh-text-xs neben
   einer 14px-Überschrift, dazu --bh-text-muted. Der einzige
   Bedienhinweis der Zeile war das leiseste Zeichen darauf. Jetzt
   --bh-icon-size und --bh-text-tertiary.

   UNGEPRÜFT ist genau eine Sache: die Umbenennung. Die Gestalt läuft seit
   2026-09-22 auf dem Team-Dashboard des Ticketsystems und ist dort
   abgenommen — aber als `.collapsible` aus dem Projekt-CSS. Diese Datei
   ist dieselbe Gestalt unter neuem Namen; dass die Seite sie unter dem
   neuen Namen auch wirklich zieht, muss im Browser nachgesehen werden
   (DESIGN.md §0e). Erst danach fällt diese Zeile.

   Eine Klappe: eine Kopfzeile, die man anfasst, und ein Inhalt, der
   erscheint. Aufgestiegen aus zwei Projekten, die sie unabhängig
   voneinander gebaut hatten — beide als `.collapsible` auf einer
   `<details class="bh-card">` (BACKLOG Punkt 10, Bedarf belegt).

   OHNE JAVASCRIPT. `<details>`/`<summary>` bringt Zustand,
   Tastaturbedienung und Vorlesen vom Browser mit, und ohne Skript bleibt
   der Inhalt erreichbar (DESIGN.md §9). Eine Klappe, die JavaScript
   braucht, ist keine Klappe, sondern ein Versteck.

   ::details-content (Chrome ab 131) ist hier folgenlos: Chrome wickelt
   den Inhalt in eine eigene Box, und diese Datei baut keine Flex-Kette
   durch die Klappe hindurch. Wer das später tut, lese patterns/detail.css
   — dort hat genau das die Kette gebrochen.

   WANN GEKLAPPT WIRD, steht im GUIDE: Menge rechtfertigt Klappen, Rang
   rechtfertigt Zugeklappt-Beginnen. Diese Datei sagt nur, wie es aussieht.

   ── Markup-Vertrag ──────────────────────────────────────────────────

     <details class="bh-card bh-collapse">
       <summary>
         <h3 class="bh-card__title">Titel</h3>
         <span class="bh-badge bh-badge--neutral bh-badge--count">8</span>
         <i class="bh-collapse__chevron" …>            ← zeigt NACH UNTEN
       </summary>
       <div class="bh-collapse__body">…</div>          ← optional, siehe unten
     </details>

   DER CHEVRON ZEIGT ZUGEKLAPPT NACH UNTEN. Die Datei dreht ihn beim
   Öffnen um 180°, sie richtet ihn nicht aus. Wer ein nach rechts
   zeigendes Zeichen einsetzt, dreht es in seinem Projekt vor — sonst
   zeigt es aufgeklappt nach links.
   ═══════════════════════════════════════════════════════════════════════════ */

/* .bh-card.bh-collapse, nicht .bh-collapse allein: beide setzen padding
   und stünden bei gleicher Spezifität gleichauf — dann entschiede die
   Reihenfolge der Dateien, und die ist keine Entscheidung (MIGRATION.md §1).

   overflow: hidden, damit die Fläche der Kopfzeile und die der letzten
   Inhaltszeile am Kartenradius enden. Ohne das steht ein eckiger Balken
   über einer runden Ecke. */
.bh-card.bh-collapse {
  padding: 0;
  overflow: hidden;
}

/* ── Die Kopfzeile ist der Griff ─────────────────────────────────────── */
.bh-collapse > summary {
  display: flex;
  align-items: center;
  /* 8px: Titel und Zähler sind EIN Paar und sollen zusammen lesen. Was
     rechts stehen soll, wird durch margin-left: auto getrennt, nicht
     durch ein Vielfaches derselben Lücke. */
  gap: var(--bh-space-2);

  /* --bh-control-height-touch, nicht 44px: der Wert für einen Finger
     steht schon auf der Skala. Die Kopfzeile ist mit Polster ohnehin
     höher — die Zeile ist ein Boden, kein Maß. */
  min-height: var(--bh-control-height-touch);
  padding: var(--bh-space-4) var(--bh-space-5);

  color: var(--bh-text-secondary);
  cursor: pointer;

  /* Ein Griff ist kein Fließtext: ein Doppelklick soll klappen, nicht
     die Überschrift markieren. */
  user-select: none;

  /* Das Standarddreieck fällt — der Chevron sagt dasselbe, und zwei
     Zeichen für eine Bedeutung wären ein zweiter Kanal (DESIGN.md §0b).
     Beide Zeilen werden gebraucht: list-style für Firefox, der
     Pseudo-Selektor für WebKit. */
  list-style: none;
  transition: background var(--bh-transition), color var(--bh-transition);
}
.bh-collapse > summary::-webkit-details-marker { display: none; }

.bh-collapse > summary:hover {
  background: var(--bh-surface-2);
  color: var(--bh-text-primary);
}
.bh-collapse > summary:focus-visible {
  outline: var(--bh-focus-width) solid var(--bh-focus-color);
  outline-offset: calc(var(--bh-focus-offset) * -1);
}

/* Die Trennlinie gehört an die Kopfzeile, solange etwas darunter steht.
   Zugeklappt wäre sie ein Strich unter nichts. */
.bh-collapse[open] > summary {
  border-bottom: 1px solid var(--bh-border-subtle);
}

/* ── Der Chevron ─────────────────────────────────────────────────────
   margin-left: auto setzt voraus, dass er das LETZTE Kind der Kopfzeile
   ist. Das ist der Vertrag oben; wer etwas dahinter stellt, muss es
   wissen. Feste Breite, damit die Drehung um die Mitte läuft und die
   Zeile beim Klappen nicht springt.                                     */
.bh-collapse__chevron {
  flex: none;
  width: 1em;
  margin-left: auto;
  text-align: center;

  /* --bh-icon-size, nicht --bh-text-xs: Der Chevron ist ein SYMBOL, kein
     Text, und die Symbolskala ist im DS eine eigene (§4). Bis 0.1.0 stand
     hier die Textstufe — 12px neben einer 14px-Überschrift, und in
     --bh-text-muted. Zusammen war der einzige Bedienhinweis der Zeile das
     leiseste daran; gemeldet aus dem Team Hub, wo man ihn kaum fand.
     16px ist dieselbe Größe, die Button, Reiter und Blätterlink für ihre
     Symbole nehmen — die Kopfzeile bekommt also nichts Eigenes.

     --bh-text-tertiary statt --muted: eine Stufe kräftiger. Gedämpft
     bleibt er, denn die Überschrift daneben führt; aber er ist das
     Zeichen, das sagt „hier lässt sich etwas aufklappen", und das darf
     nicht das blasseste auf der Zeile sein. */
  font-size: var(--bh-icon-size);
  color: var(--bh-text-tertiary);
  transition: transform var(--bh-transition), color var(--bh-transition);
}
.bh-collapse__chevron > svg { width: 1em; height: 1em; display: block; }

.bh-collapse[open] .bh-collapse__chevron { transform: rotate(180deg); }
.bh-collapse > summary:hover .bh-collapse__chevron { color: var(--bh-text-primary); }

/* ── Der Inhalt ──────────────────────────────────────────────────────
   KEIN Polster von selbst. Ein Klappinhalt ist mal eine Liste, die von
   Rand zu Rand läuft und ihr Polster in den Zeilen trägt, mal ein
   Textblock, der das Kartenpolster braucht. Ein erzwungenes Polster
   träfe beide gleich und wäre bei der Liste eine Einrückung, die
   niemand bestellt hat — derselbe Grund, aus dem .bh-tabs__panel keinen
   Stapelabstand setzt (DESIGN.md §0c).

   Wer das Kartenpolster will, nimmt __body. Wer es nicht will, lässt
   ihn weg.                                                              */
.bh-collapse__body { padding: var(--bh-space-5); }