/* ============================================================
   tc-wizard-steps -- Schritt-Indikator fuer mehrstufige Wizards
   ------------------------------------------------------------
   Library-first Organismus. Geplanter Konsum: BB Pre-Game
   (7 Steps) + BB Post-Game (Wizard). Reine Darstellung --
   welcher Schritt aktiv/erledigt ist, bestimmt das System-JS.

   DS-Konvention (siehe DESIGN-SYSTEM-DURCHZIEHEN.md):
     aktiv (aktueller Schritt) = --tc-highlight (Glanz)
     erledigt                  = --tc-success
     offen (upcoming)          = gedaempft (--tc-text-muted)
   Datenfarben werden nicht verwendet; alles theme-getrieben.

   Markup (BEM), a11y: als <ol> rendern, aktiver Schritt
   aria-current="step". Beispiel:
     <ol class="tc-wizard-steps">
       <li class="tc-wizard-steps__step is-done">
         <span class="tc-wizard-steps__marker">1</span>
         <span class="tc-wizard-steps__label">Gegner</span>
       </li>
       <li class="tc-wizard-steps__step is-active" aria-current="step">
         <span class="tc-wizard-steps__marker">2</span>
         <span class="tc-wizard-steps__label">Fans</span>
       </li>
       <li class="tc-wizard-steps__step">
         <span class="tc-wizard-steps__marker">3</span>
         <span class="tc-wizard-steps__label">Wetter</span>
       </li>
     </ol>

   Varianten: --compact (nur Marker, Labels aus, enge Screens).
   ASCII-only: Haken-Glyph als 6-stelliges Escape (\002713).
   ============================================================ */

.tc-wizard-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0 var(--tc-space-1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tc-wizard-steps::-webkit-scrollbar { display: none; }

.tc-wizard-steps__step {
  position: relative;
  flex: 1 1 0;
  min-width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tc-space-2);
  text-align: center;
  color: var(--tc-text-muted);
}

/* Verbindungslinie: liegt links vom Marker und verbindet zum Vorgaenger.
   Bei flex 1 1 0 sind alle Schritte gleich breit -> Linie = Spaltenbreite
   minus Markerdurchmesser (30px), zentriert zwischen den Markern.

   ⚠️ IHRE HOEHE HAENGT VOM ICON AB (08.09.2026, #493). Der Schritt ist
   `flex-direction: column` — steht ein `__icon` darueber, rutscht der Marker
   nach unten, und eine feste 15 zoege die Linie quer durch die Zeichen.
   `--tc-ws-linie` wird per :has() gesetzt (siehe unten); faellt :has() aus,
   gilt der Wert ohne Zeichen, und das ist der haeufigere Fall. */
.tc-wizard-steps__step {
  --tc-ws-linie: 15px;            /* Mitte des 30px-Markers */
}
.tc-wizard-steps__step:has(.tc-wizard-steps__icon) {
  --tc-ws-linie: 43px;
}

.tc-wizard-steps__step::before {
  content: "";
  position: absolute;
  top: var(--tc-ws-linie);
  left: calc(-50% + 15px);
  width: calc(100% - 30px);
  height: 2px;
  margin-top: -1px;
  background: var(--tc-border-subtle);
  z-index: 0;
}
.tc-wizard-steps__step:first-child::before { display: none; }

/* Marker (nummerierter Knoten) */
.tc-wizard-steps__marker {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: var(--tc-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-sm);
  font-weight: var(--tc-weight-bold);
  background: var(--tc-bg-surface-2);
  border: 2px solid var(--tc-border-subtle);
  color: var(--tc-text-muted);
  transition:
    background 0.2s var(--tc-ease-out),
    border-color 0.2s var(--tc-ease-out),
    color 0.2s var(--tc-ease-out),
    box-shadow 0.2s var(--tc-ease-out);
}

.tc-wizard-steps__label {
  font-size: var(--tc-text-2xs);
  font-weight: var(--tc-weight-semibold);
  line-height: 1.2;
  max-width: 11ch;
  color: var(--tc-text-muted);
}

/* ---------- Zustand: erledigt ---------- */
.tc-wizard-steps__step.is-done { color: var(--tc-text-default); }
.tc-wizard-steps__step.is-done::before { background: var(--tc-success); }
.tc-wizard-steps__step.is-done .tc-wizard-steps__marker {
  background: var(--tc-success);
  border-color: var(--tc-success);
  /* ⚠️ NICHT --tc-text-on-accent. Success ist eine helle Datenfarbe (#4ade80),
     die Accent-Flaeche ist dunkel — und fuenf Themes setzen das Accent-Token
     deshalb auf #ffffff. Gemessen am 01.09.2026: Weiss auf Success = 1,74 in
     AoS, Blood Bowl, Community, The Old World und Pathfinder. Der erledigte
     Schritt war dort unbeschriftet. Mit dem richtigen Token 9,99. */
  color: var(--tc-text-on-highlight, #1a1a1a);
  font-size: 0;
}
.tc-wizard-steps__step.is-done .tc-wizard-steps__marker::after {
  content: "\002713";
  font-size: var(--tc-text-sm);
}
.tc-wizard-steps__step.is-done .tc-wizard-steps__label { color: var(--tc-text-default); }

/* ---------- Zustand: aktiv (aktueller Schritt) ---------- */
.tc-wizard-steps__step.is-active { color: var(--tc-highlight); }
.tc-wizard-steps__step.is-active::before { background: var(--tc-success); }
.tc-wizard-steps__step.is-active .tc-wizard-steps__marker {
  background: rgba(var(--tc-accent-rgb), 0.14);
  border-color: var(--tc-highlight);
  color: var(--tc-highlight);
  box-shadow: 0 0 0 4px rgba(var(--tc-accent-rgb), 0.12);
  animation: tc-wizard-pulse 2s var(--tc-ease-default) infinite;
}
.tc-wizard-steps__step.is-active .tc-wizard-steps__label {
  color: var(--tc-highlight);
  font-weight: var(--tc-weight-bold);
}

@keyframes tc-wizard-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(var(--tc-accent-rgb), 0.12); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--tc-accent-rgb), 0.05); }
}

/* ---------- Variante: kompakt (nur Marker) ---------- */
.tc-wizard-steps--compact .tc-wizard-steps__step { min-width: 40px; gap: 0; }
.tc-wizard-steps--compact .tc-wizard-steps__label { display: none; }

/* ---------- Optional klickbar (Schritt-Sprung) ----------
   Wizard-Steps sind standardmaessig NICHT interaktiv (linearer
   Fluss ueber Footer-Buttons). Wird ein Sprung gewuenscht, den
   Schritt als <button> rendern und .is-clickable setzen; das
   Padding hebt die Trefferflaeche auf >=44px an. */
.tc-wizard-steps__step.is-clickable {
  cursor: pointer;
  padding: 7px var(--tc-space-1) 0;
  background: none;
  border: 0;
  font: inherit;
}
.tc-wizard-steps__step.is-clickable:focus-visible { outline: none; }
.tc-wizard-steps__step.is-clickable:focus-visible .tc-wizard-steps__marker {
  box-shadow: 0 0 0 3px rgba(var(--tc-accent-rgb), 0.5);
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .tc-wizard-steps__marker { transition: none; }
  .tc-wizard-steps__step.is-active .tc-wizard-steps__marker { animation-duration: 0.01ms;
 animation-iteration-count: 1;
 animation-delay: -1ms; }
}

/* ---------- schmale Viewports ---------- */
@media (max-width: 480px) {
  .tc-wizard-steps__step { min-width: 52px; }
  .tc-wizard-steps__label { max-width: 8ch; }
}

/* ==========================================================================
   ICON-SLOT und VERBINDER (Taskwerk #163, Tims Freigabe 01.09.2026)
   --------------------------------------------------------------------------
   Uebernommen aus `tc-wizard` (mordheim-battle.css), das am selben Tag
   zurueckgezogen wurde: Es war die zweite Antwort auf "wie sieht eine
   Schrittleiste aus", hatte null Nutzer ausserhalb der Bibliothek und trug
   #2e7d32/#4caf50 hart kodiert statt --tc-success.

   Was mitgekommen ist, ist genau das, was es konnte und diese Komponente
   nicht: ein Zeichen ueber der Beschriftung und eine sichtbare Verbindung
   zwischen den Schritten. Alles andere (Zahl, Zustaende, Farben) hatte
   tc-wizard-steps bereits besser — mit <ol>/<li>, aria-current und Tokens.
   ========================================================================== */

/* Ein Zeichen statt oder ueber der Zahl. Optional: Wer keins setzt, sieht
   die Leiste wie bisher. */
.tc-wizard-steps__icon {
  font-size: 1.15rem;
  line-height: 1;
  margin-bottom: 2px;
}

/* ⚠️ `--verbunden` LEGTE BIS ZUM 08.09.2026 EINEN ZWEITEN VERBINDER NEBEN
   DEN VORHANDENEN (#493). Die Basis zeichnet ihre Linie seit jeher als
   `::before`; die Variante kam am 07.09. dazu und brachte ein eigenes
   `::after` mit. Ohne Zeichen lagen beide auf 15px genau uebereinander —
   deshalb ist es niemandem aufgefallen. MIT Zeichen trennten sie sich, und
   im ersten Rollout auf Mordheim standen zwei Linien im Bild: eine auf
   Marker-Hoehe, eine quer durch die Icons.

   Die Variante staerkt jetzt den vorhandenen Verbinder, statt einen zweiten
   danebenzustellen: dicker (3px), gerundet, kraeftigere Farbe, mit Uebergang.
   Die Hoehenrechnung steht bei der Basisregel und gilt fuer beide. */
.tc-wizard-steps--verbunden .tc-wizard-steps__step::before {
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: var(--tc-border-default);
  transition: background var(--tc-motion-normal, 300ms ease);
}

/* Erledigt heisst: der Weg dahinter ist zurueckgelegt. Der Verbinder liegt
   LINKS vom Marker, gehoert also zum Schritt davor — deshalb faerbt ihn
   dieser Schritt, nicht sein Vorgaenger. */
.tc-wizard-steps--verbunden .tc-wizard-steps__step.is-done::before,
.tc-wizard-steps--verbunden .tc-wizard-steps__step.is-active::before {
  background: var(--tc-success);
}

/* Unter 480px stehen die Schritte zu eng fuer eine Linie dazwischen. */
@media (max-width: 480px) {
  .tc-wizard-steps--verbunden .tc-wizard-steps__step::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-wizard-steps--verbunden .tc-wizard-steps__step::before {
    transition-duration: 0.01ms;
  }
}