/* Gespraechsleitfaden auf vorvertrieb.html - was nur diese Karte braucht.
   Uhr und Pause kommen aus ../ablauf/ablauf.tsx, die Toene aus ablauf.css ueber .ab-hell.
   Komponente: src/components/vv/VorvertriebLeitfaden.tsx.

   Drei Zustaende je Schritt, wie im Prozess-Panel der Startseite: pending, active, done - und
   final fuer den letzten. Alles Sichtbare haengt an data-state, die Komponente setzt nur das
   Attribut. Die Belege stehen immer im Markup und werden nur gedimmt: wuerden sie erscheinen,
   aenderte die Karte bei jedem Schritt ihre Hoehe. */

/* Die ganze Zeile ist ein Ziel - ein Klick springt auf den Schritt. */
.vv-zeile { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; border-radius: 8px; }
.vv-zeile:focus-visible { outline: 2px solid #2453ff; outline-offset: 4px; }
.vv-schritt[data-state="pending"] .vv-zeile:hover .vv-titel { color: rgba(0, 0, 0, 0.7); opacity: 1; }

/* Die Schiene traegt die Zeit: das Stueck unter dem laufenden Schritt fuellt sich ueber dessen
   Dauer, erledigte Stuecke bleiben voll. Sie sitzt auf der Mitte des Icons (16px breit). */
.vv-linie {
  position: absolute;
  left: 0.4375rem;
  top: 1.4rem;
  bottom: -0.15rem;
  width: 1px;
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.vv-linie-fuellung {
  position: absolute;
  inset: 0;
  background: #000000;
  transform-origin: top center;
  transform: scaleY(0);
  transition: opacity 250ms ease;
}
.vv-schritt[data-state="done"] .vv-linie-fuellung,
.vv-schritt[data-state="final"] .vv-linie-fuellung { transform: scaleY(1); opacity: 0.35; }
.vv-schritt[data-state="active"] .vv-linie-fuellung { transform: scaleY(var(--ab-lauf)); background: #2453ff; }
.ab-karte[data-pausiert="true"] .vv-schritt[data-state="active"] .vv-linie-fuellung { opacity: 0.5; }

/* Icon: Ring im Ruhezustand, drehender Bogen waehrend des Schritts, Haken danach. */
.vv-icon > svg { position: absolute; inset: 0; }
.vv-loader, .vv-dots { display: none; }
.vv-schritt[data-state="pending"] .vv-icon { color: #000000; opacity: 0.18; }
.vv-schritt[data-state="pending"] .vv-titel { color: #666666; opacity: 0.45; }
.vv-schritt[data-state="active"] { animation: vv-ein 320ms cubic-bezier(.25, .46, .45, .94) both; }
.vv-schritt[data-state="active"] .vv-icon { color: #000000; }
.vv-schritt[data-state="active"] .vv-titel { color: #000000; font-weight: 500; }
.vv-schritt[data-state="active"] .vv-check { display: none; }
.vv-schritt[data-state="active"] .vv-loader { display: block; }
.vv-schritt[data-state="active"] .vv-dots { display: flex; color: #2453ff; }
@media (prefers-reduced-motion: no-preference) {
  .vv-schritt[data-state="active"] .vv-dots > * { animation: vv-punkt 900ms ease-in-out infinite; }
  .vv-schritt[data-state="active"] .vv-dots > :nth-child(2) { animation-delay: 150ms; }
  .vv-schritt[data-state="active"] .vv-dots > :nth-child(3) { animation-delay: 300ms; }
}
@keyframes vv-punkt { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.vv-schritt[data-state="done"] .vv-icon { color: #000000; opacity: 0.3; }
.vv-schritt[data-state="done"] .vv-titel { color: #666666; }
.vv-schritt[data-state="final"] .vv-icon { color: #000000; }
.vv-schritt[data-state="final"] .vv-titel { color: #000000; font-weight: 500; }
/* Der Haken wird gezeichnet, sobald der Schritt steht - nicht eingeblendet. */
.vv-check path { stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset 420ms cubic-bezier(.2, .7, .2, 1) 80ms; }
.vv-schritt[data-state="done"] .vv-check path,
.vv-schritt[data-state="final"] .vv-check path { stroke-dashoffset: 0; }
@keyframes vv-ein { 0% { opacity: 0.55; transform: translateY(3px); } 100% { opacity: 1; transform: none; } }

/* Belege: erst gedimmt, mit dem Ergebnis kommen sie nacheinander nach vorn. */
.vv-detail { display: flex; }
.vv-beleg {
  opacity: 0.16;
  transform: translateY(4px);
  transition: opacity 400ms cubic-bezier(.25, .46, .45, .94), transform 400ms cubic-bezier(.25, .46, .45, .94);
}
.vv-beleg-termin {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 999rem;
  background: #000000;
  border: 1px solid #000000;
  padding: 0.25rem 0.625rem;
  font-family: Inter, sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ffffff;
}
.vv-schritt[data-state="done"] .vv-beleg,
.vv-schritt[data-state="final"] .vv-beleg { opacity: 1; transform: none; }

/* Statuszeile: der Punkt pulst, solange der Anruf laeuft. */
.vv-status[data-state="running"] .vv-status-punkt { animation: vv-puls 1.6s ease-in-out infinite; }
.vv-status[data-state="done"] .vv-status-punkt { background: #000000; }
@keyframes vv-puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

@media (prefers-reduced-motion: reduce) {
  .vv-beleg, .vv-linie-fuellung, .vv-check path { transition: none; }
  .vv-schritt[data-state="active"], .vv-status[data-state="running"] .vv-status-punkt { animation: none; }
  .vv-schritt[data-state="active"] .vv-loader { animation: none; }
}