.v-vlite{--vlite-colorPrimary:#ff7f15;--vlite-transition:0.25s ease;--vlite-controlBarHeight:60px;--vlite-controlBarHorizontalPadding:10px;--vlite-controlBarBackground:linear-gradient(0deg,#000 -50%,transparent);--vlite-controlsColor:#fff;--vlite-controlsOpacity:0.9;--vlite-progressBarHeight:5px;--vlite-progressBarBackground:rgba(0,0,0,.25);font-family:-apple-system,blinkmacsystemfont,segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;overflow:hidden;position:relative}.v-vlite,.v-vlite *{box-sizing:border-box}.v-vlite.v-audio{--vlite-controlsColor:#000;border-radius:8px;box-shadow:0 2px 15px rgba(0,0,0,.1)}.v-vlite.v-video{aspect-ratio:16/9;background-color:#000}.v-vlite::-webkit-full-screen{height:100%;width:100%}.v-vlite::-moz-full-screen,::-moz-full-screen .v-vlite{height:100%;width:100%}.v-vlite video::-webkit-media-controls{display:none!important}.v-vlite.v-paused .v-controlBar.v-hidden{opacity:1}.v-vlite.v-paused:not(.v-firstStart) .v-poster,.v-vlite.v-playing .v-bigPlay,.v-vlite.v-playing .v-poster{opacity:0;visibility:hidden}.v-vlite iframe.vlite-js{pointer-events:none}.v-container,.v-media,.v-media>iframe{height:100%;width:100%}.v-controlButton,.v-media{position:relative}.v-controlButton{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;height:100%;justify-content:center;opacity:var(--vlite-controlsOpacity);outline:none;padding:0;transition:opacity var(--vlite-transition);width:40px}.v-controlButton *{pointer-events:none}.v-controlButton.v-controlPressed .v-iconUnpressed,.v-controlButton:not(.v-controlPressed) .v-iconPressed{display:none}.v-controlButton:focus-visible{outline:2px dashed var(--vlite-colorPrimary);outline-offset:-4px}.v-controlButton svg{fill:var(--vlite-controlsColor)}.v-controlButton.v-playPauseButton svg{height:17px;width:15px}.v-controlButton.v-volumeButton svg{height:20px;width:24px}.v-controlButton.v-fullscreenButton svg{height:20px;width:20px}@media (hover:hover){.v-controlButton:hover{opacity:1}}.v-bigPlay{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;height:58px;left:50%;opacity:var(--vlite-controlsOpacity);outline:none;padding:0;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);transition:opacity var(--vlite-transition);width:58px;z-index:3}.v-bigPlay *{pointer-events:none}.v-bigPlay svg{fill:var(--vlite-controlsColor);height:100%;width:100%}@media (hover:hover){.v-bigPlay:hover{opacity:1}}@keyframes loader{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.v-loader{align-items:center;display:flex;height:calc(100% - var(--vlite-controlBarHeight));left:0;opacity:0;position:absolute;top:0;transition:opacity var(--vlite-transition),visibility var(--vlite-transition);visibility:hidden;width:100%;z-index:5}.v-loaderContent{margin:0 auto;position:relative;text-align:center;top:calc(var(--vlite-controlBarHeight)/2);width:70px}.v-loaderContent>div{animation:loader 1.4s ease-in-out infinite both;background-color:var(--vlite-controlsColor);border-radius:100%;display:inline-block;height:18px;width:18px}.v-loaderContent .v-loaderBounce1{animation-delay:-.32s}.v-loaderContent .v-loaderBounce2{animation-delay:-.16s}.v-loading.v-playing .v-loader{opacity:1;visibility:visible}.v-overlay{height:calc(100% - var(--vlite-controlBarHeight))}.v-overlay,.v-poster{left:0;position:absolute;top:0;width:100%}.v-poster{background-color:#000;background-position:50% 50%;background-repeat:no-repeat;background-size:cover;cursor:pointer;height:100%;opacity:0;visibility:hidden;z-index:2}.v-poster.v-active{opacity:1;visibility:visible}.v-controlButtonIcon{display:none;left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%)}.v-playPauseButton{flex-shrink:0}.v-time{align-items:center;color:var(--vlite-controlsColor);display:flex;font-size:14px;height:100%;margin-right:auto}.v-progressBar{width:calc(100% - var(--vlite-controlBarHorizontalPadding)*2)}.v-progressBarStyle{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;margin:0;outline:none;touch-action:manipulation;transition:height var(--vlite-transition),top var(--vlite-transition);-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.v-progressBarStyle:focus-visible{outline:2px dashed var(--vlite-colorPrimary);outline-offset:2px}.v-progressBarStyle::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--vlite-colorPrimary) 0,var(--vlite-progressBarBackground) 0);background:linear-gradient(to right,var(--vlite-colorPrimary) var(--vlite-progressValue,0),var(--vlite-progressBarBackground) var(--vlite-progressValue,0));border:none;border-radius:var(--vlite-progressBarHeight);height:var(--vlite-progressBarHeight)}.v-progressBarStyle::-moz-range-track{background:linear-gradient(to right,var(--vlite-colorPrimary) 0,var(--vlite-progressBarBackground) 0);background:linear-gradient(to right,var(--vlite-colorPrimary) var(--vlite-progressValue,0),var(--vlite-progressBarBackground) var(--vlite-progressValue,0));border:none;border-radius:var(--vlite-progressBarHeight);height:var(--vlite-progressBarHeight)}.v-progressBarStyle::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--vlite-colorPrimary);border:none;border-radius:50%;height:calc(var(--vlite-progressBarHeight)*2);margin-top:calc((var(--vlite-progressBarHeight)/2)*-1);width:calc(var(--vlite-progressBarHeight)*2)}.v-progressBarStyle::-moz-range-thumb{background:var(--vlite-colorPrimary);border:none;border-radius:50%;height:calc(var(--vlite-progressBarHeight)*2);margin-top:calc((var(--vlite-progressBarHeight)/2)*-1);width:calc(var(--vlite-progressBarHeight)*2)}.v-volumeButton{flex-shrink:0;transition:transform var(--vlite-transition),opacity var(--vlite-transition)}.v-controlBar{align-items:center;display:flex;height:var(--vlite-controlBarHeight);justify-content:flex-end;padding-left:var(--vlite-controlBarHorizontalPadding);padding-right:var(--vlite-controlBarHorizontalPadding);padding-top:calc(var(--vlite-progressBarHeight) + 10px);position:relative;text-align:right;transition:opacity var(--vlite-transition);width:100%}.v-controlBar.v-hidden{opacity:0}.v-audio .v-playPauseButton{order:1}.v-audio .v-progressBar{height:25px;order:2}.v-audio .v-time{order:3;padding:0 8px 0 12px}.v-audio .v-progressBar+.v-volumeArea,.v-audio .v-progressBar+.v-volumeButton{order:4}.v-audio .v-controlBar{padding-top:0}.v-video .v-progressBar{height:calc(var(--vlite-progressBarHeight) + 10px)}.v-video .v-controlBar{background:var(--vlite-controlBarBackground);bottom:0;left:0;position:absolute}.v-video .v-controlBar .v-progressBar{align-items:flex-end;display:flex;left:50%;position:absolute;top:0;transform:translateX(-50%)}@media (hover:hover){.v-controlBar:hover{opacity:1!important}}

* {
  box-sizing: border-box;
}
body {
  background: gray;
  font-family: 'Roboto', sans-serif;
  margin:0;
  padding:0;
  background-color:#555;
  background-repeat:repeat-y;
  background-size:cover;
  background-attachment: fixed;
}
.v-video {
  width: 640px;
  max-width: 100vw;
  max-height: 80vh;
  aspect-ratio: 16/9;
}
.video-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem 2rem;
  max-width: 640px;
}
.video-container.live .v-time {
  visibility: hidden;
}
.video-container:not(.haserror) .v-poster {
  visibility: hidden;
}
.video-error {
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-size: 1.5em;
  color: #F88;
  z-index: 100;
}
.counter {
  position: absolute;
  bottom: 3em;
  right: 1em;
  color: #fff;
}
.counter:empty {
  visibility: hidden;
}
.counter::before {
  content: '\01F4AC\00A0';
}
.outline {
  font-weight: bold;
  text-shadow:  1px  1px 1px black,
    1px -1px 1px black,
    -1px  1px 1px black,
    -1px -1px 1px black;
}
.title {
  font-size:1.5em;
  font-weight:bold;
  padding-bottom:0.5rem;
}
.message {
  font-size:1.8em;
  font-weight:1000;
  padding:0.5em;
  color:white;
}
.video-container .v-bigPlay {
  width:100px;
  height:100px;
  border-radius: 100px;
}
.video-list {
  display: flex;
  gap: 1rem;
  padding: 2rem;
  flex-wrap: wrap;
}
.video-item {
  position: relative;
  width: 320px;
  max-width: 100vw;
  max-height: 180px;
  aspect-ratio: 16/9;
  font-size: 1.5rem;
  cursor: pointer;
  background-color: #888;
  border-radius: 0.5rem;
  box-shadow: 2px 2px 10px 2px #333;
  overflow: hidden;
}
.video-item .item-poster {
  display: block;
  opacity: 0.5;
  width: 100%;
  height: 100%;
}
.video-item .icon {
  display: block;
  position: absolute;
  top: 25%;
  width: 100%;
  text-align: center;
}
.video-item.live.online:after {
  content: 'Online';
  display: block;
  position: absolute;
  top: 0.5rem;
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.1em;
  color: #0C0;
  text-shadow: 1px 1px 1px black;
}
.video-item.live.online .icon {
  filter: invert(53%) sepia(76%) saturate(2757%) hue-rotate(85deg) brightness(120%) contrast(124%);
}
.video-item.live:not(.online):after {
  content: 'Zurzeit keine Übertragung';
  display: block;
  position: absolute;
  top: 0.5rem;
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.1em;
  color: #800;
  text-shadow: 1px 1px 1px black;
}
.video-item.live:not(.online) .icon {
  color: #600;
}
.video-item label {
  display: block;
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 0.5rem;
  font-weight: bold;
  color: #ddf;
  text-align: center;
}
.v-poster {
  z-index: 0;
}
@media (min-width: 500px) and (max-width: 719px) {
.video-item {
  flex-basis: calc(50% - 1rem);
  width: auto;
}
}
@media (min-width: 720px) {
.video-container, .video-list {
  padding: 0 2rem;
}
}
@media (max-width: 719px) {
.video-container, .video-list {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
.v-video {
  max-width: 100vw;
}
.video-list {
  justify-content: center;
}
}

.default-poster, .default-poster:after {
  background-image: url('data:image/svg+xml, <svg viewBox="-19 -19 163 130" xmlns="http://www.w3.org/2000/svg"><path d="M12.1 0h98.6A12 12 0 0 1 123 12.1v71.5a12 12 0 0 1-12.2 12.2H12.1A12 12 0 0 1 0 83.6V12.1A12 12 0 0 1 12.1 0m43 31.2 20.6 14.4a3 3 0 0 1 .1 4.8L55.4 64.6a3 3 0 0 1-4.8-2.3V33.6q0-.8.5-1.6a3 3 0 0 1 4-.8M94 79.5v10.4h16.8a6.3 6.3 0 0 0 6.3-6.3v-4.1zm-5.8 10.4V79.5h-23v10.4zm-28.8 0V79.5H35.7v10.4zm-29.4 0V79.5H6v4.1a6.3 6.3 0 0 0 6 6.4zM6 73.6h111V22.2H6zm82-57.2V5.9H65v10.4zm6-10.5v10.4h23v-4.2a6.3 6.3 0 0 0-6.3-6.2zM59.2 16.4V5.9H35.7v10.4zm-29.4 0V5.9H12A6.3 6.3 0 0 0 5.8 12v4.2z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: " ";
}