/* Animation des Durchstichs, Abschnitt 07 "Der Durchstich".
   Ohne JavaScript sieht das SVG exakt so aus wie das bestehende, unbewegte
   Diagramm: die neuen Elemente (Karte, Zaehler, Fundstellen, Ergebnistext)
   tragen ihr opacity:0 direkt als Inline-Style im Markup und sind daher
   auch ohne dieses Stylesheet unsichtbar. Farben ausschliesslich ueber die
   Design-Variablen aus style.css, per var() live referenziert -- so bleibt
   Hell/Dunkel-Umschaltung ohne Zutun korrekt. */

.ds-card-rect{
  fill:var(--surface);
  stroke:var(--line-strong);
  stroke-width:1.4px;
}
.ds-card-title{
  font-family:var(--sans);
  font-weight:700;
  font-size:9.5px;
  fill:var(--text);
}
.ds-card-sub{
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.01em;
  fill:var(--muted);
}
.ds-card-sub.ds-card-sub-long{
  font-size:7px;
}
.ds-card-sub.ds-card-sub-warn{
  fill:var(--warn);
}
.ds-card-sub.ds-card-sub-flow{
  fill:var(--flow);
}

.ds-agent-counter{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.04em;
  fill:var(--accent);
}
.ds-agent-marks{
  font-family:var(--mono);
  font-size:9px;
  fill:var(--muted);
}

.ds-result-label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.01em;
  fill:var(--text);
}

/* ---------- Bedienzeile ---------- */
.ds-controls{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.ds-controls .btn:disabled,
.ds-controls .btn-ghost:disabled{
  opacity:.5;
  cursor:default;
}

/* ---------- Schrittliste unter der Figur: immer lesbar ---------- */