/* Suchbaum Schritt fuer Schritt (suchbaum-film.js) */
.suchbaum-film { margin: .5rem 0 1rem; }
.suchbaum-film .sf-bilder { align-items: flex-start; }
.suchbaum-film svg .gsvg-knoten-g, .suchbaum-film svg .gsvg-kante { transition: opacity .35s ease; }
.suchbaum-film svg .gsvg-kreis, .suchbaum-film svg .gsvg-kante { transition: fill .3s, stroke .3s, stroke-width .3s; }
.suchbaum-film svg .sf-weg { opacity: 0; }

/* Ast, an dem gerade gearbeitet wird: orange in Graph und Baum */
.suchbaum-film svg .sf-pfad .gsvg-kreis { fill: #ffedd5; stroke: #ea580c; stroke-width: 3; }
.suchbaum-film svg .sf-aktiv .gsvg-kreis { fill: #fdba74; stroke: #c2410c; stroke-width: 4; }
.suchbaum-film svg .gsvg-kante.sf-pfad { stroke: #ea580c; stroke-width: 5; }
/* Neu dazugekommene Knoten (im Graphen: die Nachbarn, die unter den Knoten kommen) */
.suchbaum-film svg .sf-neu .gsvg-kreis { stroke: #2563eb; stroke-width: 4; stroke-dasharray: 5 3; }
.suchbaum-film .sf-baum svg .gsvg-knoten-g.sf-neu { animation: sf-auftauchen .45s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes sf-auftauchen { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Ergebnis eines Astes */
.suchbaum-film svg .sf-ziel .gsvg-kreis { fill: #bbf7d0; stroke: #15803d; stroke-width: 3; }
.suchbaum-film svg .sf-sackgasse .gsvg-kreis { fill: #e5e7eb; stroke: #6b7280; stroke-dasharray: 4 3; }
.suchbaum-film svg .sf-sackgasse text { fill: #6b7280; }

.sf-steuerung { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; padding: .5rem .6rem;
  background: #0f172a; border-radius: 10px; color: #e2e8f0; }
.sf-knopf { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 1.25rem;
  line-height: 1; cursor: pointer; flex: 0 0 44px; }
.sf-knopf:hover:not(:disabled), .sf-knopf:focus-visible { background: rgba(255, 255, 255, .15); }
.sf-knopf:disabled { opacity: .35; cursor: default; }
.sf-play { background: #ea580c; }
.sf-play:hover:not(:disabled) { background: #c2410c; }
.sf-leiste { flex: 1 1 200px; display: flex; gap: 3px; height: 28px; align-items: center; cursor: pointer; touch-action: none;
  min-width: 160px; outline-offset: 3px; }
.sf-stueck { flex: 1; height: 8px; background: rgba(255, 255, 255, .25); border-radius: 3px; overflow: hidden; transition: height .15s; }
.sf-leiste:hover .sf-stueck { height: 12px; }
.sf-fuellung { height: 100%; width: 0; background: #f97316; }
.sf-zaehler { font-size: .9rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sf-tempo { font-size: .9rem; display: inline-flex; align-items: center; gap: .3rem; }
.sf-tempo select { font-size: 16px; padding: .1rem .3rem; border-radius: 6px; }
.sf-text { min-height: 3em; margin: .5rem 0 0; padding: .6rem .8rem; border-left: 4px solid #ea580c; background: #fff7ed;
  border-radius: 0 8px 8px 0; font-size: 1.05rem; }
@media (max-width: 560px) {
  .sf-leiste { order: 5; flex-basis: 100%; }
}
@media print {
  .sf-steuerung, .sf-text { display: none; }
  .suchbaum-film svg .sf-weg { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .suchbaum-film .sf-baum svg .gsvg-knoten-g.sf-neu { animation: none; }
}
.sf-legende { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .4rem 0 0; font-size: .9rem; color: #475569; }
.sf-legende span::before { content: ''; display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: .35rem;
  vertical-align: -2px; border: 3px solid; box-sizing: border-box; }
.sf-l-pfad::before { background: #fdba74; border-color: #c2410c !important; }
.sf-l-neu::before { background: #e0ecff; border-color: #2563eb !important; border-style: dashed !important; }
.sf-l-ziel::before { background: #bbf7d0; border-color: #15803d !important; }
.sf-l-sack::before { background: #e5e7eb; border-color: #6b7280 !important; border-style: dashed !important; }
@media print { .sf-legende { display: none; } }