/* ==================================================
   Bootstrap 5 ↔︎ Design-Tokens + Progress-Micro-Anim
   Zweck: Konsistente Brand-Farben, sehr dünne Linien,
          kurze „letzte-Prozente“-Animation ohne Inline-Styles
   ================================================== */

/* ---- Globale Token-Zuweisungen (für BS & Animation) ----
   - --bs-primary         → mapped auf eure Brand-Farbe
   - --progress-height-thin → exakte Linienstärke in px (keine Rundungsdifferenzen)
   - --motion-progress    → Dauer der Mini-Animation (Bars & Zahlen) */
:root {
  --bs-primary: var(--brand);
  --progress-height-thin: 2px; /* Haarlinie: überall gleich dick */
  --motion-progress: 0.5s; /* kurz & dezent, anpassbar */
}

/* ---- Buttons: erzwinge Brand-Mapping für .btn-primary ----
   (BS 5.3 nutzt interne Variablen – hier auf Tokens gelegt) */
.btn-primary {
  --bs-btn-color: var(--on-brand);
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: var(--on-brand);
  --bs-btn-hover-bg: var(--brand-hover);
  --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-focus-shadow-rgb: 0, 74, 173; /* Fokusring aus Brand abgeleitet */
}

/* ---- Progress: Farbe, Höhe, Breite über Variablen ----
   - Farbe: Balken nutzt Brand
   - Höhe: per .u-progress-thin (px-basiert)
   - Breite: über --pct (kein Inline-Style nötig) */
.progress {
  --bs-progress-bar-bg: var(--brand);
}
.u-progress-thin {
  --bs-progress-height: var(--progress-height-thin);
}

.progress .progress-bar {
  width: var(--pct, 0%);
  transition: width 0.3s ease;
}

/* ---- Prozent-Utilities (bei Bedarf erweitern) ---- */
.u-pct-88 {
  --pct: 88%;
}
.u-pct-90 {
  --pct: 90%;
}
.u-pct-92 {
  --pct: 92%;
}
.u-pct-95 {
  --pct: 95%;
}

/* ---- Mikro-Animation (startet, sobald Wrapper .is-animate hat) ----
   - animiert nur die „letzten Prozente“ von --pct-start → --pct
   - Dauer steuerbar via --motion-progress
   - kein Layout-Shift, da Start-/Zielbreite variabel definiert */
.js-progress.is-animate .progress .progress-bar {
  animation: progress-bump var(--motion-progress) ease-out both;
}

@keyframes progress-bump {
  from {
    width: var(--pct-start, var(--pct, 0%));
  }
  to {
    width: var(--pct, 0%);
  }
}

/* ---- A11y/Reduce Motion: Animation abschalten, wenn gewünscht ---- */
@media (prefers-reduced-motion: reduce) {
  .js-progress.is-animate .progress .progress-bar {
    animation: none;
    width: var(--pct, 0%);
  }
}