/* Dijkstra Schritt fuer Schritt (dijkstra-film.js); Steuerung, Text und Legende aus suchbaum-film.css */
.dijkstra-film { margin: .5rem 0 1rem; }
.dijkstra-film .df-graph svg { width: 100%; max-width: 640px; }
.dijkstra-film svg .gsvg-kreis, .dijkstra-film svg .gsvg-kante { transition: fill .3s, stroke .3s, stroke-width .3s; }
.dijkstra-film svg .df-wert, .dijkstra-film svg .df-strich { transition: opacity .3s ease, fill .3s; }
.dijkstra-film svg .df-weg { opacity: 0; }

/* Knoten: festgelegt (gruen), gerade festgelegt (orange), Nachbar in Pruefung (blau gestrichelt) */
.dijkstra-film svg .df-fest .gsvg-kreis { fill: #bbf7d0; stroke: #15803d; stroke-width: 3; }
.dijkstra-film svg .df-aktiv .gsvg-kreis { fill: #fdba74; stroke: #c2410c; stroke-width: 4; }
.dijkstra-film svg .df-pruefen .gsvg-kreis { fill: #e0ecff; stroke: #2563eb; stroke-width: 4; stroke-dasharray: 5 3; }
.dijkstra-film svg .gsvg-kante.df-kante { stroke: #ea580c; stroke-width: 5; }

/* Werte an den Knoten: vorlaeufig dunkel, endgueltig gruen, ersetzt grau und durchgestrichen */
.sf-bereit svg .df-wert { fill: #1e293b; }
.sf-bereit svg .df-wert.df-endgueltig { fill: #15803d; }
.sf-bereit svg .df-wert.df-alt { fill: #94a3b8; }
.dijkstra-film svg .df-wert.df-neu { animation: df-auftauchen .5s ease-out; transform-box: fill-box; transform-origin: center; }
.dijkstra-film svg .df-strich.df-neu { stroke-dasharray: 60; animation: df-streichen .5s ease-out; }
@keyframes df-auftauchen { from { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.35); } to { transform: scale(1); opacity: 1; } }
@keyframes df-streichen { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .dijkstra-film svg .df-wert.df-neu, .dijkstra-film svg .df-strich.df-neu { animation: none; }
}
@media print {
  .dijkstra-film svg .df-weg { opacity: 1; }
}

.df-l-fest::before { background: #bbf7d0; border-color: #15803d !important; }
.df-l-aktiv::before { background: #fdba74; border-color: #c2410c !important; }
.df-l-pruefen::before { background: #e0ecff; border-color: #2563eb !important; border-style: dashed !important; }
.sf-legende .df-l-alt::before { display: none; }
.df-l-alt s { color: #94a3b8; font-weight: 700; text-decoration-color: #dc2626; text-decoration-thickness: 2px; margin-right: .3rem; }