/* Ablaufkarten - gemeinsames Stylesheet der animierten Beispielkarten.
   Genutzt von src/components/ablauf/ (Uhr und Stepper) und den vier Karten:
     ew  Einwertung          index.html            ew-flow.css
     rw  Weg einer Anfrage   reichweite.html       rw-flow.css
     vv  Gespraechsleitfaden vorvertrieb.html      vv-flow.css   (helle Karte, .ab-hell)
     bd  Abgleich auf Karte  bestandsdatenbank.html bd-flow.css
   Hier steht, was alle vier teilen: Stepper mit Zeitsegmenten, Szenenwechsel, und die Atome
   Option, Feld, Schreibmarke, Haken, Pruefzeile, Balken, Auftritt. Was nur eine Karte braucht,
   steht in deren eigenem Stylesheet.

   Jeder sichtbare Zustand haengt an data-state oder einer is-Klasse. Die Komponente setzt nur
   diese Attribute und zwei Laufvariablen, die der Bildlauf pro Frame auf die Wurzel schreibt:
   --ab-lauf (Fuellstand des aktiven Stepper-Segments, 0 bis 1) und --ab-fortschritt (fuer
   .ab-balken). Beides ohne Renderdurchgang, damit 60 Bilder je Sekunde nichts kosten. */

.ab-karte {
  --ab-akzent: #6b8dff;
  /* ruhiges Ausklingen fuer Zustandswechsel, Feder fuer alles, was neu erscheint */
  --ab-ease: cubic-bezier(.2, .7, .2, 1);
  --ab-feder: cubic-bezier(.34, 1.45, .64, 1);
  --ab-linie: rgba(255, 255, 255, 0.12);
  --ab-flaeche: rgba(255, 255, 255, 0.03);
  --ab-text: #ffffff;
  --ab-lauf: 0;
  --ab-fortschritt: 0;
}
/* Helle Karte auf weissem Grund - nur die Toene wechseln, die Mechanik bleibt. */
.ab-karte.ab-hell {
  --ab-akzent: #2453ff;
  --ab-linie: rgba(0, 0, 0, 0.1);
  --ab-flaeche: #f8f9fa;
  --ab-text: #000000;
}

/* --- Stepper: Nummern, nur der aktive Schritt klappt sein Wort aus --- */
.ab-schritt {
  display: flex;
  align-items: center;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: color 300ms ease;
}
.ab-hell .ab-schritt { color: rgba(0, 0, 0, 0.35); }
.ab-schritt:hover { color: rgba(255, 255, 255, 0.75); }
.ab-hell .ab-schritt:hover { color: rgba(0, 0, 0, 0.65); }
.ab-schritt:focus-visible { outline: 2px solid var(--ab-akzent); outline-offset: 4px; }
.ab-schritt .ab-nr { transition: color 300ms ease; }
.ab-schritt .ab-wort {
  display: inline-block;
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 450ms var(--ab-ease), margin-left 450ms var(--ab-ease), opacity 250ms ease;
}
.ab-schritt[data-state="active"] { color: var(--ab-text); }
.ab-schritt[data-state="active"] .ab-nr { color: var(--ab-akzent); }
.ab-schritt[data-state="active"] .ab-wort {
  max-width: 12rem;
  margin-left: 0.5rem;
  opacity: 1;
  transition: max-width 450ms var(--ab-ease), margin-left 450ms var(--ab-ease), opacity 300ms ease 150ms;
}
.ab-schritt[data-state="done"] .ab-nr { color: var(--ab-akzent); }

/* Die Segmente tragen die Zeit: das aktive fuellt sich ueber die Dauer seiner Szene, danach
   bleibt es als erledigt stehen - der Uebergang ist nahtlos, weil beide bei scaleX(1) liegen. */
.ab-segmente { display: grid; gap: 0.375rem; }
.ab-segment {
  position: relative;
  height: 2px;
  border-radius: 999rem;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.ab-hell .ab-segment { background: rgba(0, 0, 0, 0.08); }
.ab-segment-fuellung {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ab-akzent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: opacity 250ms ease;
}
.ab-segment[data-state="done"] .ab-segment-fuellung { transform: scaleX(1); opacity: 0.55; }
.ab-segment[data-state="active"] .ab-segment-fuellung { transform: scaleX(var(--ab-lauf)); }
/* Angehalten (Zeiger auf dem Stepper, Tastaturfokus): der Fuellstand friert sichtbar ein. */
.ab-karte[data-pausiert="true"] .ab-segment[data-state="active"] .ab-segment-fuellung { opacity: 0.5; }

/* --- Buehne: Szenen liegen uebereinander und blenden weich. Das Grid stapelt sie in einer
   Zelle - die hoechste Szene bestimmt die Hoehe, die anderen verteilen ihren Inhalt als Spalte.
   Das ist verlaesslicher als ein geratenes min-height an der Karte. --- */
.ab-buehne { display: grid; }
.ab-szene {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 400ms ease, transform 400ms ease, visibility 0s linear 400ms;
}
.ab-szene.is-aktiv { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* --- Auswahlfelder: anvisiert (der Zeiger steht darauf), dann gewaehlt --- */
.ab-option {
  position: relative;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--ab-linie);
  background: var(--ab-flaeche);
  padding: 0.65rem 0.8rem;
  font-family: Inter, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.85);
  transition: border-color 400ms ease, background-color 400ms ease, color 400ms ease,
    box-shadow 400ms ease, transform 400ms var(--ab-ease);
}
.ab-hell .ab-option { color: rgba(0, 0, 0, 0.8); }
.ab-option.is-anvisiert {
  border-color: rgba(107, 141, 255, 0.45);
  background: rgba(107, 141, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(107, 141, 255, 0.08);
}
.ab-option.is-gewaehlt {
  border-color: rgba(107, 141, 255, 0.7);
  background: rgba(107, 141, 255, 0.12);
  box-shadow: none;
  color: var(--ab-text);
  animation: ab-griff 450ms var(--ab-feder);
}
.ab-hell .ab-option.is-gewaehlt { border-color: rgba(36, 83, 255, 0.5); background: rgba(36, 83, 255, 0.07); }
/* Ein einzelner Ring laeuft nach aussen aus - die Bestaetigung des Klicks. */
.ab-option.is-gewaehlt::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(107, 141, 255, 0.8);
  pointer-events: none;
  animation: ab-welle 700ms var(--ab-ease) forwards;
}
@keyframes ab-griff { 0% { transform: scale(0.97); } 60% { transform: scale(1.015); } 100% { transform: none; } }
@keyframes ab-welle { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.05); opacity: 0; } }

/* Der Haken in der Ecke einer Karte wird gezeichnet, nicht eingeblendet. */
.ab-option-haken {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 0.8rem;
  height: 0.8rem;
  color: var(--ab-akzent);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 250ms ease, transform 400ms var(--ab-feder);
}
.ab-option.is-gewaehlt .ab-option-haken { opacity: 1; transform: none; }

/* Chips wachsen um ihren Haken, statt ihn nur einzublenden. */
.ab-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  border-radius: 999rem;
  font-size: 0.72rem;
}
.ab-chip .ab-haken {
  width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  transition: width 350ms var(--ab-ease), margin-left 350ms var(--ab-ease), opacity 250ms ease;
}
.ab-chip.is-gewaehlt .ab-haken { width: 0.7rem; margin-left: 0.4rem; opacity: 1; }

/* --- Der Haken gefuellter Felder: der Pfad wird nachgezogen --- */
.ab-haken { flex: none; color: var(--ab-akzent); }
.ab-haken path { stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset 400ms var(--ab-ease) 120ms; }
.is-gewaehlt .ab-haken path,
.is-gefuellt .ab-haken path,
.is-da .ab-haken path { stroke-dashoffset: 0; }

/* --- Schreibmarke: steht in dem Feld, das gerade an der Reihe ist --- */
.ab-caret {
  display: block;
  flex: none;
  width: 1px;
  height: 1.05em;
  background: rgba(255, 255, 255, 0.8);
  animation: ab-blinken 1s steps(2, end) infinite;
}
.ab-hell .ab-caret { background: rgba(0, 0, 0, 0.7); }
@keyframes ab-blinken { 50% { opacity: 0; } }

/* --- Felder: anvisiert, dann gefuellt --- */
.ab-feld dt {
  font-family: Inter, sans-serif;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6);
  transition: color 300ms ease;
}
.ab-hell .ab-feld dt { color: #666666; }
.ab-feld.is-anvisiert dt { color: rgba(255, 255, 255, 0.85); }
.ab-hell .ab-feld.is-anvisiert dt { color: rgba(0, 0, 0, 0.75); }
.ab-feld dd {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.3rem;
  min-height: 2.4rem;
  border-radius: 10px;
  border: 1px solid var(--ab-linie);
  background: var(--ab-flaeche);
  padding: 0.55rem 0.75rem;
  font-family: Inter, sans-serif;
  font-size: 0.85rem;
  color: var(--ab-text);
  transition: border-color 400ms ease, background-color 400ms ease, box-shadow 400ms ease,
    transform 400ms var(--ab-ease);
}
.ab-feld dd.is-anvisiert {
  border-color: rgba(107, 141, 255, 0.55);
  background: rgba(107, 141, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(107, 141, 255, 0.08);
  transform: translateY(-1px);
}
.ab-feld dd.is-gefuellt { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.05); }
.ab-hell .ab-feld dd.is-gefuellt { border-color: rgba(0, 0, 0, 0.18); background: #ffffff; }
.ab-feld dd .ab-haken { margin-left: auto; opacity: 0; transform: scale(0.4); transition: opacity 250ms ease, transform 400ms var(--ab-feder); }
.ab-feld dd.is-gefuellt .ab-haken { opacity: 1; transform: none; }
/* Ein einzelner Wert faellt aus 8px ein und wird dabei scharf. */
.ab-wert { display: inline-block; min-width: 0; animation: ab-fuellen 520ms var(--ab-feder) both; }
.ab-wert-lang { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes ab-fuellen {
  0% { opacity: 0; transform: translateY(8px); filter: blur(2px); }
  100% { opacity: 1; transform: none; filter: none; }
}
/* Getippte Zeichen: dieselbe Bewegung, kuerzer, damit Tippen schnell wirkt. Sie brauchen eine
   gemeinsame Huelle - .ab-feld dd ist ein Flex-Container mit gap, sonst stuende zwischen jedem
   einzelnen Zeichen ein halber Zentimeter Luft. */
.ab-getippt { display: inline-block; min-width: 0; white-space: pre; }
.ab-ziffer { display: inline-block; animation: ab-ziffer 380ms var(--ab-feder) both; }
@keyframes ab-ziffer {
  0% { opacity: 0; transform: translateY(8px); filter: blur(2px); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* --- Pruefzeilen: die laufende dreht, die erledigte hakt ab --- */
.ab-check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255, 255, 255, 0.45);
  transform: translateX(-4px);
  transition: color 450ms ease, transform 450ms var(--ab-ease);
}
.ab-check.is-laeuft { color: rgba(255, 255, 255, 0.7); transform: none; }
.ab-check.is-fertig { color: rgba(255, 255, 255, 0.9); transform: none; }
.ab-check-text { flex: 1 1 auto; min-width: 0; }
.ab-check-wert {
  flex: none;
  margin-left: auto;
  white-space: nowrap;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  font-variant-numeric: tabular-nums;
  transition: color 450ms ease;
}
.ab-check.is-fertig .ab-check-wert { color: rgba(255, 255, 255, 0.7); }
.ab-check-icon {
  position: relative;
  flex: none;
  width: 1rem;
  height: 1rem;
  border-radius: 999rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: border-color 300ms ease, background-color 300ms ease;
}
.ab-check.is-laeuft .ab-check-icon { border-color: rgba(107, 141, 255, 0.35); }
/* der drehende Bogen sitzt auf dem Ring, solange die Zeile arbeitet */
.ab-check.is-laeuft .ab-check-icon::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid transparent;
  border-top-color: var(--ab-akzent);
  animation: ab-dreht 700ms linear infinite;
}
.ab-check.is-fertig .ab-check-icon { border-color: var(--ab-akzent); background: rgba(107, 141, 255, 0.15); }
.ab-check.is-fertig .ab-check-icon::after {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.12rem;
  width: 0.28rem;
  height: 0.5rem;
  border: solid var(--ab-akzent);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  animation: ab-haken-setzt 300ms var(--ab-feder) both;
}
@keyframes ab-dreht { to { transform: rotate(360deg); } }
@keyframes ab-haken-setzt { 0% { opacity: 0; transform: rotate(45deg) scale(0.4); } 100% { opacity: 1; transform: rotate(45deg) scale(1); } }

/* --- Balken, der mit der Szenenzeit laeuft statt in Spruengen --- */
.ab-balken { transform-origin: left center; transform: scaleX(var(--ab-fortschritt)); }

/* --- Auftritt: was nacheinander erscheint --- */
.ab-auftritt { opacity: 0; transform: translateY(10px); transition: opacity 450ms ease, transform 450ms var(--ab-ease); }
.ab-auftritt.is-da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ab-szene, .ab-option, .ab-check, .ab-feld dd, .ab-auftritt, .ab-segment-fuellung { transition: none; }
  .ab-caret, .ab-wert, .ab-ziffer, .ab-option.is-gewaehlt, .ab-option.is-gewaehlt::after,
  .ab-check.is-laeuft .ab-check-icon::before, .ab-check.is-fertig .ab-check-icon::after { animation: none; }
  .ab-caret { display: none; }
}