/* ============================================================
   Komponente: facette-header
   ------------------------------------------------------------
   Quelle: Figma „Design System" → facette header,
   Komponenten-Satz 11761:276, ausgelesen am 04.09.2026.

   Kopfzeile einer Facette in den Filter-Screens: Titel, daneben
   der gewählte Wert in Grau, rechts der Chevron. Klappt die
   Optionsliste darunter auf und zu.

   GANZFLÄCHIG TAPPBAR — die Komponente IST das Ziel, 357 x 45.
   Die Vorlage in „Filter screen elements" ist nur 25 hoch; die
   45 kommen aus 10 px Innenabstand oben und unten und erfüllen
   damit die 44er-Untergrenze (§11.2).

   TITEL UND WERT STEHEN INLINE NEBENEINANDER, nicht
   untereinander. Der Wert schrumpft und bekommt drei Punkte,
   wenn der Platz nicht reicht — der Titel nie.

   Setzt tokens.css und base.css voraus.

   VERWENDUNG
     <button class="facette-header" type="button"
             aria-expanded="false" aria-controls="genre-liste">
       <span class="facette-header__name">
         <span class="facette-header__titel">Genre</span>
         <span class="facette-header__wert">1 ausgewählt</span>
       </span>
       <svg class="facette-header__pfeil" aria-hidden="true">
         <use href="#icon-chevron-unten"></use>
       </svg>
     </button>

   ------------------------------------------------------------
   GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE
     45        Höhe (10 + 25 + 10).
     10        Innenabstand oben und unten. Die Skala kennt 8
               und 12.
     10 x 4,55 Chevron.
   ============================================================ */

.facette-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  height: 45px;                            /* gemessen, siehe Kopf */
  padding: 10px 0;                         /* gemessen, siehe Kopf */
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.facette-header__name {
  display: flex;
  align-items: center;
  gap: var(--space-xs);                    /* 8 */
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.facette-header__titel {
  flex-shrink: 0;
  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);
}

/* Der Wert gibt nach, nicht der Titel: „Genre" muss immer
   lesbar bleiben, „3 ausgewählt" darf kürzen. */
.facette-header__wert {
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  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 Chevron zeigt nach unten (zu) und dreht sich beim Öffnen.
   Er trägt text-description, nicht label-text: er ist ein
   Zustandshinweis, und label-text wäre dafür zu präsent — so
   steht es ausdrücklich in der Figma-Doku. */
.facette-header__pfeil {
  display: block;
  overflow: visible;
  flex-shrink: 0;
  width: 10px;                             /* gemessen, siehe Kopf */
  height: 4.55px;
  color: var(--text-description);
  transition: transform calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out);
}

.facette-header[aria-expanded="true"] .facette-header__pfeil {
  transform: rotate(180deg);
}

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

@media (hover: hover) and (pointer: fine) {
  .facette-header:hover .facette-header__pfeil {
    color: var(--text-primary);
  }
}

@media (prefers-reduced-motion: reduce) {
  .facette-header__pfeil {
    transition: none;
  }
}

/* ============================================================
   OFFEN
   ------------------------------------------------------------
   · Die 10 px oben und unten stehen in keiner Abstandsskala
     (die kennt 8 und 12). Sie sind so gemessen.
   · Hover steht nicht an der Komponente. Hier hellt sich der
     Chevron auf — die Zeile selbst bleibt ruhig, weil sie
     keine eigene Fläche hat.
   · Die Icon-Hauptkomponente trägt label-text; der Chevron ist
     hier per Override auf text-description gebunden. Wird die
     Icon-Komponente umgestellt, kann das entfallen.
   ============================================================ */