/* ============================================================================
 * COMPONENT · tc-xp-bar
 * ----------------------------------------------------------------------------
 * „Wie weit bin ich noch vom nächsten Rang?" — eine Zeile mit Ziel und Rest,
 * darunter ein Balken.
 *
 * WARUM ALS KOMPONENTE (20.08.2026, Tim: „In meinem Profil sollte es auch eine
 * Anzeige geben, wie viele XP ich von einem Level entfernt bin. Das steht
 * aktuell nur im Dashboard."): Damit liegt dasselbe Muster auf zwei Seiten,
 * und ab zwei gehört es in die Library (CLAUDE.md §3, Heuristik 2). Die
 * Dashboard-Fassung hiess `.dash-fortschritt__xp*` und ist hierher gezogen —
 * sonst haetten zwei Balken mit demselben Zweck zwei Stilblaetter gehabt, und
 * der zweite waere beim ersten Feinschliff vergessen worden.
 *
 * ⚠️ NICHT ANZEIGEN, WENN ES KEINEN NAECHSTEN RANG GIBT. Auf der hoechsten
 * Stufe waere ein Balken ohne Ziel eine Verhoehnung — die Aufrufstellen
 * pruefen `info.nextLevel`, bevor sie ihn zeichnen.
 *
 * HTML-Pattern:
 *   <div class="tc-xp-bar">
 *     <div class="tc-xp-bar__kopf">
 *       <span>Nächster Rang: Wyrdstone-Baron</span>
 *       <span>noch 35 XP</span>
 *     </div>
 *     <div class="tc-xp-bar__bahn">
 *       <div class="tc-xp-bar__fuellung" style="width:72%"></div>
 *     </div>
 *   </div>
 * ========================================================================== */

.tc-xp-bar {
  margin-top: var(--tc-space-4, 16px);
}

.tc-xp-bar__kopf {
  display: flex;
  justify-content: space-between;
  gap: var(--tc-space-2, 8px);
  margin-bottom: 5px;
  font-size: 0.78rem;
  color: var(--tc-text-muted, #9e9e9e);
}

.tc-xp-bar__bahn {
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.tc-xp-bar__fuellung {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg,
    var(--tc-accent, #a1917a),
    var(--tc-highlight, #d4c4a0));
  /* Der Balken laeuft beim Betreten einmal auf seinen Wert — dieselbe
     Bewegung wie bei den Zahlen, damit der Block als Einheit wirkt. */
  transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Kein `animation: none` — hier gibt es keine Animation, sondern einen
   Uebergang. Der faellt weg, der Endzustand bleibt (CLAUDE.md §9). */
@media (prefers-reduced-motion: reduce) {
  .tc-xp-bar__fuellung { transition: none; }
}