/* Eigener Videoplayer für „Unsere Flotte in Bewegung“ (.u-flotte__video).
   Gebaut von assets/js/video-player.js. Ohne JavaScript bleiben die Standard-
   Bedienelemente des Browsers sichtbar. Farben nur aus der CI: Grün #1D9355,
   Text #3C3E3D, Weiß. */

.u-flotte__video.vp {
  position: relative;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.u-flotte__video.vp video {
  object-fit: contain;
  cursor: pointer;
}
.u-flotte__video.vp:focus-visible { outline: 3px solid #1D9355; outline-offset: 3px; }

/* Großer Start-Knopf */
.vp__big {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 55%);
  cursor: pointer;
  transition: opacity .25s ease, visibility .25s ease;
}
.vp__big-icon {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #1D9355;
  color: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
  transition: transform .2s ease, background-color .2s ease;
}
.vp__big-icon svg { width: 34px; height: 34px; margin-left: 4px; }
.vp__big:hover .vp__big-icon { transform: scale(1.06); background: #187a47; }
.vp__big:focus-visible .vp__big-icon { outline: 3px solid #fff; outline-offset: 3px; }
.vp.is-started .vp__big { opacity: 0; visibility: hidden; }

/* Steuerleiste */
.vp__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 36px 20px 14px;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.vp.is-started .vp__bar { opacity: 1; transform: none; pointer-events: auto; }
.vp.is-started.is-playing.is-idle .vp__bar { opacity: 0; transform: translateY(6px); pointer-events: none; }
.vp.is-started.is-playing.is-idle video { cursor: none; }
/* Pausiert oder Tastaturfokus in der Leiste: Leiste immer sichtbar */
.vp.is-started .vp__bar:focus-within { opacity: 1; transform: none; pointer-events: auto; }

.vp__row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vp__btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color .15s ease;
}
.vp__btn:hover { background: rgba(255, 255, 255, .18); }
.vp__btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.vp__btn svg { width: 22px; height: 22px; }
.vp__btn [hidden] { display: none; }

.vp__time {
  flex: none;
  min-width: 92px;
  padding: 0 8px;
  font-family: 'Lato', system-ui, sans-serif;
  font-size: 14px;
  line-height: 24px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vp__spacer { flex: 1 1 auto; }

/* Fortschrittsbalken */
.vp__seek {
  position: relative;
  height: 22px;
  margin: 0 8px 4px;
  cursor: pointer;
  touch-action: none;
  outline: none;
}
.vp__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .3);
  overflow: hidden;
  transition: height .15s ease, margin-top .15s ease;
}
.vp__seek:hover .vp__track,
.vp__seek.is-drag .vp__track,
.vp__seek:focus-visible .vp__track { height: 8px; margin-top: -4px; }
.vp__seek:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
.vp__buffer,
.vp__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
}
.vp__buffer { background: rgba(255, 255, 255, .35); }
.vp__fill { background: #1D9355; }
.vp__thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
  transform: scale(0);
  transition: transform .15s ease;
  pointer-events: none;
}
.vp__seek:hover .vp__thumb,
.vp__seek.is-drag .vp__thumb,
.vp__seek:focus-visible .vp__thumb { transform: scale(1); }

/* Lautstärke */
.vp__vol {
  display: flex;
  align-items: center;
}
.vp__range {
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  height: 22px;
  margin: 0;
  padding: 0;
  background: transparent;
  opacity: 0;
  cursor: pointer;
  transition: width .2s ease, opacity .2s ease, margin .2s ease;
}
.vp__vol:hover .vp__range,
.vp__vol:focus-within .vp__range { width: 80px; margin: 0 8px 0 2px; opacity: 1; }
.vp__range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, #1D9355 var(--v, 100%), rgba(255, 255, 255, .3) var(--v, 100%));
}
.vp__range::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.vp__range::-moz-range-progress { height: 4px; border-radius: 2px; background: #1D9355; }
.vp__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}
.vp__range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.vp__range:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Vollbild */
.u-flotte__video.vp:fullscreen {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto;
  background: #000;
}
.u-flotte__video.vp:-webkit-full-screen {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto;
  background: #000;
}

@media (max-width: 600px) {
  .vp__big-icon { width: 68px; height: 68px; }
  .vp__big-icon svg { width: 28px; height: 28px; }
  .vp__bar { padding: 28px 8px 8px; }
  .vp__btn { width: 44px; height: 44px; }
  .vp__time { min-width: 0; padding: 0 4px; font-size: 13px; }
  .vp__vol .vp__range { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vp__big, .vp__big-icon, .vp__bar, .vp__track, .vp__thumb, .vp__range { transition: none; }
}