/* Animation zu Abschnitt 06 "Fuer Dritte bauen", Unterabschnitt "Darunter liegt
   immer dieselbe Abfolge". Ohne JavaScript oder vor dem ersten Klick sieht das
   SVG exakt so aus wie das bestehende, unbewegte Diagramm: alle neuen Elemente
   (Klasse sc-fx) sind unsichtbar, solange kein Ablauf laeuft. Farben kommen
   ausschliesslich ueber die vorhandenen Diagrammklassen aus style.css
   (dg-box, dg-box-warn, dg-box-live, dg-line-*, dg-tag, dg-tag-warn,
   dg-label-xs) oder ueber eigene Klassen, die dieselben --Variablen nutzen. */

#sc-figure .sc-fx{
  opacity:0;
}

/* sanftes Ein-/Ausblenden bei Klassenwechseln bzw. Opacity-Umschaltung durch
   das Skript -- reine CSS-Transition, kein zusaetzlicher anime-Tween noetig.
   Reduzierte Bewegung schaltet Transitions global in style.css ab. */
#sc-figure .sc-fx,
#sc-figure .dg-box,
#sc-figure .dg-box-warn,
#sc-figure .dg-box-live,
#sc-figure #sc-top-l1,
#sc-figure #sc-top-cross,
#sc-figure #sc-top-abbruch,
#sc-figure #sc-bottom-l1,
#sc-figure #sc-bottom-l2,
#sc-figure #sc-bottom-l3,
#sc-figure #sc-bottom-flowline,
#sc-figure #sc-bottom-fertig,
#sc-figure #sc-bottom-bgtitle,
#sc-figure #sc-bottom-bglabel{
  transition:opacity .2s ease, fill .2s ease, stroke .2s ease;
}

#sc-figure .sc-marker{
  fill:var(--muted);
  stroke:var(--surface);
  stroke-width:1.5px;
}
#sc-figure #sc-bottom-marker{
  fill:var(--accent);
}

#sc-figure .sc-track{
  fill:var(--surface);
  stroke:var(--line-strong);
  stroke-width:1;
}
#sc-figure .sc-fill{
  fill:var(--muted);
}

#sc-figure .sc-card-rect{
  fill:var(--surface);
  stroke:var(--accent);
  stroke-width:1.4;
}
#sc-figure .sc-card-text{
  fill:var(--text);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.02em;
}

/* Knopfzeile unter dem Diagramm */
.sc-controls{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:6px;
}

/* zwei Schrittlisten nebeneinander, darunter gestapelt auf schmalen Ansichten */
.sc-steps-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line-strong);
  margin-top:18px;
}
@media (max-width:620px){
  .sc-steps-wrap{grid-template-columns:1fr}
}
.sc-steps-col{
  background:var(--surface);
  padding:14px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sc-steps-head{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
}
.sc-steps-col.sc-col-top .sc-steps-head{color:var(--warn)}
.sc-steps-col.sc-col-bottom .sc-steps-head{color:var(--accent)}


.sc-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;
}