.wrapper-video {
	max-width: 720px;
}

.responsive-video {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 0;
    position: relative;
	text-align: center;
}

.responsive-video iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    border-radius: 8px;
}


/* Nur Auflösungen bis SM */
@media (max-width: 559px) {

.wrapper-video {
	max-width: 559px;
}

.video-wall, iframe[data-src] {
  min-height: 200px;
}

.video-wall p {
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 20px;
}


}

/*Vor 560px: SM ; Danach: MD*/
@media (min-width: 560px) {

.wrapper-video {
	max-width: 739px;
}

.video-wall, iframe[data-src] {
  min-height: 260px;
}

}


/*LG*/
@media (min-width: 740px) {

.wrapper-video {
	max-width: 720px;
}

.video-wall, iframe[data-src] {
	min-height: 438px;
}


}







iframe {
  display: inline-block;
}

iframe[data-src] {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><text text-anchor="middle" alignment-baseline="central" y="50%" font-size="1em" fill="black"><tspan x="50%" dy="-1.5em">Dieses Video kann nur mit</tspan><tspan x="50%" dy="1.5em">aktiviertem JavaScript</tspan><tspan x="50%" dy="1.5em">abgespielt werden</tspan></text></svg>');
}

.video-wall, iframe[data-src] {
  width: 100%;
  margin: 0;
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1000px rgb(66 147 33 / 70%);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.video-wall h4 {
  display: block;
  text-align: center;
  margin: 0;
}

.video-wall div {
  overflow-y: auto;
}

.video-wall p {
  color: white;
  text-align: center;
}

.video-wall a {
  color: white;
}

.video-wall .video-link {
  display: block;
  white-space: nowrap;
  font-size: 0.8em;
  margin: 0;
  position: absolute;
  left: 50%;
  bottom: 6em;
  transform: translateX(-50%);
}

.video-wall .button {
  appearance: none;
  cursor: pointer;
  display: block;
  border: 0 none;

  text-align: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  border-radius: 8px;
  background: white;
  color:  var(--itzehoer-green);
  font-size: 20px;
  font-weight: bold;
  line-height: 24px;
  padding: 12px 32px;
  margin: 0;
  text-decoration: none;
}

.video-wall .button:hover {
  background-color: var(--itzehoer-darkgreen-image-overlay);
  color: #FFF;
}