/* Eigener Video-Player der Videoprojekte (Portal + Dashboard). Farben kommen aus der jeweiligen Seite. */

.sp { --sp-accent: var(--accent, #e78408); --sp-max-h: 72vh; display: grid; gap: 10px; min-width: 0; }
.sp-stage {
  position: relative; width: 100%; max-width: calc(var(--sp-max-h) * var(--sp-ratio, 1.7778)); margin-inline: auto;
  aspect-ratio: 16 / 9; background: #000; overflow: hidden; border-radius: var(--sp-radius, 22px);
  box-shadow: var(--shadow, 0 14px 36px -14px rgba(0, 0, 0, 0.4)); -webkit-user-select: none; user-select: none;
}
.sp-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; cursor: pointer; }
.sp-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; background: #000; }
.sp-frame.on { opacity: 1; }

.sp-locked .sp-stage video { cursor: crosshair; }

.sp-spinner { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; opacity: 0; pointer-events: none; animation: sp-spin 0.8s linear infinite; }
.sp-waiting .sp-spinner { opacity: 1; transition: opacity 0.2s 0.4s; }
@keyframes sp-spin { to { transform: rotate(360deg); } }

/* Steuerleiste */
.sp-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sp-btn { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink, #1e1c1b); cursor: pointer; }
.sp-btn:hover { background: color-mix(in srgb, var(--ink, #000) 8%, transparent); }
.sp-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sp-bar .sp-btn:first-child { width: 40px; height: 40px; background: var(--sp-accent); color: var(--accent-ink, var(--on-accent, #fff)); }
.sp-bar .sp-btn:first-child:hover { filter: brightness(1.06); }
.sp-time { flex: none; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink, #1e1c1b); min-width: 3.2em; }
.sp-total { color: var(--muted, #6e6966); text-align: right; }

/* Zeitleiste = Spulbalken mit Markern */
.sp-timeline { position: relative; flex: 1; min-width: 60px; height: 34px; display: flex; align-items: center; cursor: pointer; touch-action: none; outline: none; }
.sp-timeline:focus-visible .sp-track { box-shadow: 0 0 0 2px var(--sp-accent); }
.sp-track { position: relative; width: 100%; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink, #000) 13%, transparent); overflow: hidden; transition: height 0.15s; }
.sp-timeline:hover .sp-track, .sp-scrubbing .sp-track { height: 8px; }
.sp-buffered { position: absolute; inset: 0 auto 0 0; width: 0; background: color-mix(in srgb, var(--ink, #000) 10%, transparent); }
.sp-played { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--sp-accent); }
.sp-head { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 0 2px var(--sp-accent); pointer-events: none; z-index: 2; }
.sp-scrubbing .sp-head { transform: scale(1.25); }
.sp-marker {
  position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; padding: 0; z-index: 1;
  border-radius: 50%; border: 2.5px solid var(--bg, #fff); background: var(--sp-accent); cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.15s;
}
.sp-marker:hover, .sp-marker.active { transform: scale(1.35); z-index: 3; }
.sp-marker.team { background: var(--ink-soft, #3d3936); }
.sp-marker.done { background: var(--ok, #1f9d55); }

/* Vorschau beim Darüberfahren */
.sp-tip { position: absolute; bottom: 30px; left: 0; z-index: 5; transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; pointer-events: none; opacity: 0; transition: opacity 0.12s; }
.sp-tip.on { opacity: 1; }
.sp-tip-img { display: block; border-radius: 8px; background: #000; box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.5); border: 2px solid rgba(255, 255, 255, 0.9); }
.sp-tip.no-img .sp-tip-img { display: none; }
.sp-tip-time { padding: 2px 8px; border-radius: 999px; background: rgba(20, 19, 19, 0.85); color: #fff; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Vollbild: Bild so groß wie möglich, Leiste darunter */
.sp.sp-full { background: #000; padding: 12px 16px 16px; grid-template-rows: minmax(0, 1fr) auto; height: 100vh; --ink: #f2f0ee; --muted: #b8b4b0; --bg: #000; }
.sp.sp-full .sp-stage { max-width: none; width: auto; height: 100%; max-height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }

@media (max-width: 560px) {
  .sp { --sp-max-h: 64vh; }
  .sp-bar { gap: 4px; }
  .sp-btn { width: 32px; height: 32px; }
  .sp-total { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sp-spinner { animation: none; } }
.sp-frame { z-index: 1; }
.sp-spinner { z-index: 2; }