/* Loading Process
-------------------------------------------------------------------------------------- */
/* Loading Transition */
.video-player video,
.evc .video__controls,
.image-slider .image-slider__slides {
  transition: opacity 0.3s;
}
.video-player.loading video,
.video-player video.loading-state,
.evc.loading-state .video__controls,
.image-slider.loading .image-slider__slides {
  opacity: 0 !important;
}
/* Load video when poster is loaded */
.video-player video {
  opacity: 0;
}
.video-player video.poster-loaded {
  opacity: 1;
}

/* Shared Media UI Elements
-------------------------------------------------------------------------------------- */
/* Fullscreen Toggle */
.video__control.fullscreen-toggle,
.fullscreen-toggle {
  position: absolute;
  top: 17px;
  right: 24px;
  z-index: 20;
  transition: opacity: 0.3s ease;

  background: none;
  border: none;
  color: black;
  font-size: 18px;
  cursor: pointer;
  padding: 0 5px;

	background-image: url('../img/fullscreen.svg');
  background-repeat: no-repeat;
  background-size: contain;
  width: 30px;
  height: 30px;
}
.fullscreen-toggle.is-fullscreen {
	background-image: url('../img/close.svg');
  width: 40px;
  height: 40px;
}

/* Image Slider Element
-------------------------------------------------------------------------------------- */
.image-slider {
  background-color: black;
}
/* Image */
.image-slider img {
  aspect-ratio: 7 / 5;
  object-fit: contain;
}
/* Controls */
.image-slider__prev,
.image-slider__next {
  position: absolute;
  cursor: pointer;
  z-index: 10;
  background-repeat: no-repeat;
  /*
  width: 35px;
  height: 35px;
  top: 50%;
  transform: translateY(-50%);
  */
  top: 0;
  width: 75px;
  height: 100%;
  background-position: 20px center;
}
.image-slider__prev {
  /*left: 20px;*/
  left: 0;
  background-position: left 20px center;

  background-image: url(../img/arrow-left.svg);
}
.image-slider__next {
  /*right: 20px;*/
  right: 0;
  background-position: right 20px center;

  background-image: url(../img/arrow-right.svg);
}
/* Video Player Element
-------------------------------------------------------------------------------------- */
.video-player {
  position: relative;
}
.video__element {
  position: relative; /* Needed for Safari 13 to show fullscreen toggle */
}
/* Audio Element */
.content-item--audio .video__element {
  object-fit: contain;
}
/* Info and Control Elements inside Video Player Element */
.video.has-started .content-type-tag {
  display: none;
}
.video-player .video__control--fullscreen.fullscreen-toggle {
  opacity: 0;
}
.video.has-started .video__control--fullscreen,
.video.is-playing .video__control--fullscreen {
  opacity: 1;
  /* Für Mobil ausblenden */
  /*opacity: 0;*/
}

/* Poster Image */
.video .video__poster {
  z-index: 2;
  transition: opacity 0.3s ease; /* Weicher Übergang */
  opacity: 0;

  background-size: contain;
  background-position: center;
  z-index: 2;
  pointer-events: none; /* Klicks gehen durch das Poster ans Video (falls gewünscht) */
  transition: opacity 0.4s ease-in-out;
}
.video.poster-is-visible:not(.has-started) .video__play-button-overlay,
.video.poster-is-visible .video__poster {
  opacity: 1;
}
.video .video__play-button-overlay {
  background-size: cover;
  opacity: 0;
}

.content-item--audio .video .video__play-button-overlay {
  background-size: contain;
}

/* Video Ending Transition */
.video.is-ending .content-type-tag,
.video.is-ending .video__play-button-overlay .video-player__play-icon {
  /*transition: opacity 0.4s ease-in;*/
}
.video .video__subtitle {
  transition: opacity 0.4s ease-in-out;
}
.video.is-ending .video__subtitle,
.video.is-ending .video__element {
  opacity: 0 !important;
}
.evc.is-ending .video__control--playpause {
	background-image: url('../img/pause.svg') !important;
}
/*
.video.is-ending .content-type-tag,
.video.is-ending .video__play-button-overlay .video-player__play-icon {
  opacity: 0 !important;
}
*/
.video.is-ending .video__element {
}

/* Subtitles */
.video.poster-is-visible .video__subtitle,
.video.poster-is-visible .video__element::cue {
  opacity: 0;
}
.video__element::cue {
  background: transparent;
  color: transparent;
  font-family: sans-serif;
  font-size: 18px;
}
.video__subtitle {
  position: absolute;
  bottom: 10%; /* Dein gewünschter Abstand nach unten */
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 960px;
  text-align: center;
  pointer-events: none; /* Klicks gehen durch zum Video */
  color: white;
  font-family: sans-serif;
  font-size: 16px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  z-index: 10;
  line-height: 1.2em;
}
.video.is-fullscreen .video__subtitle {
  bottom: 100px;
}
@media (min-width: 1024px) {
  /* Subtitles */
  .content-item__image.is-fullscreen .video__element::cue,
  .video.is-fullscreen .video__subtitle {
    bottom: 140px;
    font-size: 24px;
  }
}
@media (max-width: 650px) {
  .video__subtitle,
  .video.is-fullscreen .video__element::cue,
  .video__element::cue {
    font-size: 14px;
    max-width: 500px;
  }
}
/* External Video Controls
-------------------------------------------------------------------------------------- */
/* Prepare customization of default Style */
.video__controls {
  opacity: 1; /* Overwrite Standard style of Video Player Module */
}
.video__controls,
.video__controls * {
  box-sizing: border-box;
}
.video__control {
  background: none;
  border: none;
  color: black;
  font-size: 18px;
  cursor: pointer;
  padding: 0 5px;
}
.video__progress-slider, .video__volume-slider {
  background: none;
}

/* External Video Controls */
.evc .video__controls {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px 20px;
  background: none;
  color: white;
  display: flex;
  align-items: center;
  z-index: 10; /* Stellen Sie sicher, dass es über dem Video liegt */
}
.evc .video__controls .video__control--playpause {
  margin-right: 10px;
}

/* Hide and show controls */
.evc.is-controls-visible .video__controls { /* evc = external video controls */
  pointer-events: auto;
}
.evc {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}
.no-transitions .evc {
  transition-duration: 0s !important;
}
.evc.is-controls-visible {
  height: 60px;
}
.video__control--playpause {
	background-image: url('../img/play.svg');
  background-repeat: no-repeat;
  background-size: contain;
  width: 42px;
  height: 42px;
}
.video__control--playpause.is-playing {
	background-image: url('../img/pause.svg');
}
.video-player__play-icon {
    width: 70px;
    height: 70px;
}
@media (min-width: 1024px) {
  .evc .video__controls .video__control--playpause {
      margin-right: 20px;
  }
  .video-player__play-icon {
    width: 85px;
    height: 85px;
  }
  .evc.is-controls-visible {
    height: 75px;
  }
  .video__control--playpause {
    width: 65px;
    height: 65px;
  }
  .evc .video__controls {
    padding: 10px 0 10px 25px;
    /* gap: 25px; */ /* Wird von Safari 13 nicht unterstützt */
  }
  .evc .video__controls .video__control--playpause {
      margin-right: 25px; /* Fix */
  }
  .video.has-started .video__control--fullscreen {
    /*opacity: 1;*/
    /* Für Desktop einblenden  */
    opacity: 1;
  }
}

/* Fullscreen
-------------------------------------------------------------------------------------- */
/* Video Image */
.content-item__image.is-fullscreen {
  display: flex;
  justify-content: center;
}
.content-item__image.is-fullscreen .video {
  height: 100vh;
  aspect-ratio: auto !important;
}
.content-item__image.is-pseudo-fullscreen .video {
  height: 100dvh;
}
.content-item__image.is-fullscreen .video__element {
  /*position: relative;*/
  position: absolute;
  /*width: 100%;*/
  width: 100vw;
  height: 100%;
  box-sizing: content-box;
  object-fit: contain;
  aspect-ratio: auto !important;
}
/* Content Type Tag + Media Source Credits */
.content-item__image.is-fullscreen .content-item__source,
.content-item__image.is-fullscreen .video .content-type-tag {
  display: none;
}
/* Fullscreen Toggle */
.content-item__image.is-fullscreen .fullscreen-toggle-wrapper {
  position: relative;
  top: 30px;
  width: 100%;
  max-width: 1420px;
}
.content-item__image.is-fullscreen .video__control.fullscreen-toggle {
  opacity: 1 !important;
  left: 30px;
	background-image: url('../img/menu-back.svg');
  top: 0;
}
/* Video Controls */
.content-item__image.is-fullscreen .content-item__image__sub {
  position: absolute;
  bottom: 0;
  width: 100%;
  max-width: 1420px;
}
.content-item__image.is-fullscreen .evc {
  height: 90px;
}
.content-item__image.is-fullscreen .content-item__image__sub .evc .video__controls {
  padding-left: 30px;
  padding-right: 30px;
}
@media (min-width: 1024px) {
  /* Fullscreen Toggle */
  .content-item__image.is-fullscreen .video__control.fullscreen-toggle {
    left: 50px;
  }
  /* Video Controls */
  .content-item__image.is-fullscreen .content-item__image__sub .evc .video__controls {
    padding-left: 50px;
    padding-right: 50px;
  }
}

/* Progress Bar
-------------------------------------------------------------------------------------- */
/*generated with Input range slider CSS style generator (version 20211225)
https://toughengineer.github.io/demo/slider-styler*/
input[type=range].video__progress-slider {
  height: 27px;
  -webkit-appearance: none;
}

/*progress support*/
input[type=range].video__progress-slider.slider-progress {
  --range: calc(var(--max) - var(--min));
  --ratio: calc((var(--value) - var(--min)) / var(--range));
  --sx: calc(0.5 * 27px + var(--ratio) * (100% - 27px));
}
input[type=range].video__progress-slider:focus {
  outline: none;
}

/*webkit*/
input[type=range].video__progress-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 27px;
  height: 27px;
  border-radius: 16px;
  background: #2950AC;
  border: none;
  margin-top: calc(8px * 0.5 - 27px * 0.5);
}
input[type=range].video__progress-slider::-webkit-slider-runnable-track {
  height: 8px;
  border: none;
  border-radius: 0;
  background: #A0E3EE;
  box-shadow: none;
}
input[type=range].video__progress-slider.slider-progress::-webkit-slider-runnable-track {
  background: linear-gradient(#2950AC,#2950AC) 0/var(--sx) 100% no-repeat, #A0E3EE;
}

/*mozilla*/
input[type=range].video__progress-slider::-moz-range-thumb {
  width: 27px;
  height: 27px;
  border-radius: 16px;
  background: #2950AC;
  border: none;
}
input[type=range].video__progress-slider::-moz-range-track {
  height: 8px;
  border: none;
  border-radius: 0;
  background: #A0E3EE;
  box-shadow: none;
}
input[type=range].video__progress-slider.slider-progress::-moz-range-track {
  background: linear-gradient(#2950AC,#2950AC) 0/var(--sx) 100% no-repeat, #A0E3EE;
}

/*ms*/
input[type=range].video__progress-slider::-ms-fill-upper {
  background: transparent;
  border-color: transparent;
}
input[type=range].video__progress-slider::-ms-fill-lower {
  background: transparent;
  border-color: transparent;
}
input[type=range].video__progress-slider::-ms-thumb {
  width: 27px;
  height: 27px;
  border-radius: 16px;
  background: #2950AC;
  border: none;
  margin-top: 0;
  box-sizing: border-box;
}
input[type=range].video__progress-slider::-ms-track {
  height: 8px;
  border-radius: 0;
  background: #A0E3EE;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
}
input[type=range].video__progress-slider.slider-progress::-ms-fill-lower {
  height: 8px;
  border-radius: 0px 0 0 0px;
  margin: 0;
  background: #2950AC;
  border: none;
  border-right-width: 0;
}

@media (min-width: 1024px) {
  /*progress support*/
  input[type=range].video__progress-slider.slider-progress {
    --range: calc(var(--max) - var(--min));
    --ratio: calc((var(--value) - var(--min)) / var(--range));
    --sx: calc(0.5 * 40px + var(--ratio) * (100% - 40px));
  }
  input[type=range].video__progress-slider {
    height: 40px;
  }

  /*webkit*/
  input[type=range].video__progress-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    margin-top: calc(12px * 0.5 - 40px * 0.5);
  }
  input[type=range].video__progress-slider::-webkit-slider-runnable-track {
    height: 12px;
  }
  input[type=range].video__progress-slider.slider-progress::-webkit-slider-runnable-track {
    background: linear-gradient(#2950AC,#2950AC) 0/var(--sx) 100% no-repeat, #A0E3EE;
  }

  /*mozilla*/
  input[type=range].video__progress-slider::-moz-range-thumb {
    width: 40px;
    height: 40px;
    border-radius: 20px;
  }
  input[type=range].video__progress-slider::-moz-range-track {
    height: 12px;
  }
  input[type=range].video__progress-slider.slider-progress::-moz-range-track {
    background: linear-gradient(#2950AC,#2950AC) 0/var(--sx) 100% no-repeat, #A0E3EE;
  }
  input[type=range].video__progress-slider::-ms-thumb {
    width: 40px;
    height: 40px;
    border-radius: 20px;
  }
  input[type=range].video__progress-slider::-ms-track {
    height: 12px;
  }
  input[type=range].video__progress-slider.slider-progress::-ms-fill-lower {
    height: 12px;
  }
}