/* Später CSS für neuen Player ergänzen */
.toggle-video { position: relative; margin-bottom: 20px; width: 100%; background-color: #000000; }
.toggle-video--berry { background-color: #aa005f; }
.video-item .toggle-video img { margin-bottom: 0; max-width: 100%; height: auto; margin: 0 auto; }
.toggle-video:before { content: ""; width: 60px; height: 60px; position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -30px; border-radius: 50%; border: none; background: #000073 url(../icons/file_video.svg) center center no-repeat; background-size: 24px 24px; }

.video-item { background-color: #000000; }
.video-item.video-hidden button { display: block; }
.video-item.video-hidden iframe { display: none; }
.video-item button { display: none; }
.video-item iframe { display: block; width: 100%;
  height: auto; margin-bottom: 20px; aspect-ratio: 16 / 9; }

.lightbox__media .video-item { width: 640px; }
.lightbox__media .toggle-video { margin-bottom: 0; }
.lightbox__media iframe { margin-bottom: 0; }

.audio-wrapper img { width: 100%; height: auto;
  max-height: unset; aspect-ratio: 1 / 1; }

.iframe-item { position: relative; margin-bottom: 20px; width: 100%; }
.iframe-item button { position: absolute; }
.toggle-iframe { position: relative; }
.toggle-iframe:before { content: ""; width: 60px; height: 60px; position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -30px; border-radius: 50%; border: none; background: #000073 url(../icons/file_video.svg) center center no-repeat; background-size: 24px 24px; }

.cm_media .span8r figure.audio, .cm_media .span8r figure.video { display: flex; flex-wrap: wrap;align-items: flex-start; }
.cm_media .span8r figure { margin-bottom: 20px; }
.cm_media .span8r figure .vjs-audio { width: 288px; height: 288px; }
.cm_media .span8r figure .audio-wrapper { width: 288px; height: 288px; margin-right: 20px; }
.cm_media .span8r figure .toggle-audio { margin-right: 20px; }
.cm_media .span8r figure figcaption { width: 440px; }
.cm_media .span8r figure.image figcaption { width: 100%; }
.cm_media .span8r figure.video figcaption { width: 100%; }
.cm_media .span8r figure.remote_video figcaption { width: 100%; }
.cm_media .span8r figure .vjs-video { width: 100%; }
.cm_media .span8r figure .vjs-video ~ figcaption { width: 100%; }
.cm_media .span8r figure .vjs-youtube { width: 100%; }
.cm_media .span8r figure .vjs-youtube ~ figcaption { width: 100%; }
.cm_media .span8r figure iframe { margin-bottom: 20px; }
.cm_media .span8r figure iframe ~ figcaption { width: 100%; }

@media only screen and (max-width: 1270px) {
 .cm_media .span8r figure .vjs-audio { width: 240px; height: 240px; }
 .cm_media .span8r figure .audio-wrapper { width: 240px; height: 240px; }
 .cm_media .span8r figure .toggle-audio { width: 240px; height: 240px; }
 .cm_media .span8r figure figcaption { width: 360px; }
}

@media only screen and (max-width: 1080px) {
	.cm_media .span8r figure .vjs-audio { width: 210px; height: 210px; }
  .cm_media .span8r figure .audio-wrapper { width: 210px; height: 210px; }
  .cm_media .span8r figure .toggle-audio { width: 210px; height: 210px; }
	.cm_media .span8r figure figcaption { width: 310px; }
}

@media only screen and (max-width: 880px) {
  .cm_media .span8r figure .vjs-audio { width: 300px; height: 300px; }
  .cm_media .span8r figure .audio-wrapper { width: 300px; height: 300px; }
  .cm_media .span8r figure .toggle-audio { width: 300px; height: 300px; }
  .cm_media .span8r figure figcaption { width: 100%; }
}

@media only screen and (max-width: 670px) {
  .cm_media .span8r figure .vjs-audio { width: 260px; height: 260px; }
  .cm_media .span8r figure .audio-wrapper { width: 260px; height: 260px; }
  .cm_media .span8r figure .toggle-audio { width: 260px; height: 260px; }
}

@media only screen and (max-width: 420px) {
  .cm_media .span8r figure.audio { display: block; }
}

/* Native Chrome Player */
::-webkit-media-controls-enclosure {
  border-radius: 0;
  opacity: 0.8;
}