/* static/storyboard/fahrplan.css – Storyboard als Fahrplan (static/storyboard/fahrplan.js). Farben nur über Token. */
.sb-fp{display:none;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 14px;border-bottom:1px solid var(--border);
  background:var(--surface);font-size:12.5px}
.sb-fp.an{display:flex}
.sb-fp-t{font-weight:700;letter-spacing:.2px}
.sb-fp-phasen{display:flex;align-items:center;gap:4px}
.sb-fp-ph{padding:2px 8px;border-radius:20px;border:1px solid var(--border);color:var(--text-dim);white-space:nowrap}
.sb-fp-ph.an{color:var(--text);border-color:color-mix(in srgb,var(--primary) 45%,transparent);background:color-mix(in srgb,var(--primary) 8%,transparent)}
.sb-fp-pf{color:var(--text-dim)}
.sb-fp-st{color:var(--text-dim);flex:1 1 120px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-fp .btn{white-space:nowrap}
.sb-fp .sb-sp{flex:1}

.sb-fp-punkt{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none;background:var(--text-dim)}
.sb-fp-punkt.a-gruen{background:var(--success)}
.sb-fp-punkt.a-gelb{background:var(--warning)}
.sb-fp-punkt.a-rot{background:var(--danger)}
.sb-fp-punkt.a-grau{background:color-mix(in srgb,var(--text-dim) 55%,transparent)}
.sb-k > .sb-fp-punkt{position:absolute;right:7px;bottom:7px;z-index:3;width:11px;height:11px;box-shadow:0 0 0 2px var(--surface)}

.sb-fp-karte{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.sb-fp-z{display:flex;align-items:center;gap:7px;font-size:12.5px;line-height:1.35;flex-wrap:wrap}
.sb-fp-uhr{display:flex;align-items:center;gap:8px;font-size:12.5px}
.sb-fp-uhr input{width:110px;padding:4px 6px}

.sb-fp-scroll{max-height:56vh;overflow:auto}
.sb-fp-tab{border-collapse:collapse;font-size:12.5px}
.sb-fp-tab td{padding:7px 6px;border-bottom:1px solid var(--border);vertical-align:middle}
.sb-fp-tab tr{cursor:pointer}
.sb-fp-tab tr:hover td{background:color-mix(in srgb,var(--primary) 6%,transparent)}
.sb-fp-ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.sb-fp-bef{display:flex;align-items:flex-start;gap:10px;padding:9px 2px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.sb-fp-bef-t{flex:1;min-width:220px;font-size:12.5px;line-height:1.4}
.sb-fp-bef-k{display:flex;gap:6px;flex-wrap:wrap}
.sb-fp-chip{font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;border:1px solid var(--border);white-space:nowrap}
.sb-fp-chip.konflikt{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.sb-fp-chip.hinweis{color:var(--warning);border-color:color-mix(in srgb,var(--warning) 45%,transparent)}
.sb-fp-chip.bestaetigt{color:var(--text-dim)}

.sb-fp-feld{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-dim);margin-bottom:10px}

.sb-fp-alle{margin-top:14px;padding:12px 14px}
.sb-fp-alle-k{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.sb-fp-alle-k .sb-sp{flex:1}

.sb-fp-paket{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;margin-bottom:14px;
  border-color:color-mix(in srgb,var(--primary) 40%,transparent)}
.sb-fp-paket .sb-sp{flex:1}

@media (max-width:700px){
  .sb-fp{padding:6px 10px}
  .sb-fp-phasen{display:none}
}