/* Animation der Laufzeit-Schleife, Abschnitt 01 "Was ein Agent tatsaechlich ist".
   Ohne JavaScript oder vor dem ersten Klick sieht das SVG exakt so aus wie das
   bestehende, unbewegte Diagramm: Marker und Schrittzaehler sind unsichtbar,
   solange die Figur nicht die Klasse is-ready traegt. Farben ausschliesslich
   ueber die Design-Variablen aus style.css. */

.sl-figure .sl-controls{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:6px;
}

.sl-marker,
.sl-counter{
  opacity:0;
}

.sl-figure.is-ready .sl-marker,
.sl-figure.is-ready .sl-counter{
  opacity:1;
}

.sl-marker{
  fill:var(--accent);
  stroke:var(--surface);
  stroke-width:2px;
  transform-box:view-box;
  offset-path:path('M110 127 L330 127 L550 127 L770 127 L770 158 L770 232 L110 232 L110 162 L110 127 L330 127 L315 127 L315 39 L665 39');
  offset-distance:0%;
  offset-rotate:0deg;
}

.sl-counter{
  fill:var(--accent);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* aktiver Kasten waehrend eines Schritts: kraeftigerer Rahmen, dezenter Glanz */
.sl-box-active{
  stroke:var(--accent) !important;
  stroke-width:2px !important;
  filter:drop-shadow(0 0 5px var(--accent-soft));
}

/* Ausgangs-Linie und -Kasten im Moment des Limit-Treffers */
.sl-line-hit{
  stroke:var(--accent) !important;
  stroke-width:1.6 !important;
  stroke-dasharray:none !important;
}
#sl-box-exit.sl-box-active{
  stroke-dasharray:none;
}

@keyframes sl-move{
  0%   { offset-distance:0%; }
  20%  { offset-distance:10%; }
  40%  { offset-distance:20%; }
  60%  { offset-distance:30%; }
  80%  { offset-distance:69.5%; }
  100% { offset-distance:100%; }
}

.sl-figure.is-playing .sl-marker{
  animation:sl-move 8s linear forwards;
}

/* Schrittliste unter der Figur: immer lesbar, aktiver Schritt hervorgehoben */

/* nur fuer Screenreader, kein sichtbarer Effekt, keine Farbe noetig */
.sl-sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (prefers-reduced-motion: reduce){
  .sl-figure.is-playing .sl-marker{
    animation:none;
  }
}