* {
  margin: 0;
  padding: 0;
}

.slides-container {
  position: relative;
  width: minmax(1fr, 350px);
  background-color: #f0f0f0;
  margin: 3em auto 5em auto;
}

.mySlides img {
  width: 100%;
  height: auto;
}

.mySlides {
  width: 100%;
  height: auto;
}

.mySlides#hoch img {
  /* max-height: 477px;
  width: auto; */
  /* max-width: 350px; */
  height: auto;
  width: 100%;
  margin: auto;
}

.overlay {
  position: absolute;
  top: 40%;
  bottom: 8%;
  left: 0;
  right: 0;
}

.TextImBild img {
  display: block;
}

.TextImBild span {
  background-color: hsla(0, 0%, 96%, 0.5);
  position: absolute;
  bottom: 2.3em;
  padding: 0.2em;
  line-height: 1.2em;
  font-size: 0.9em;
  font-size: 1em;
  /* text-align: center; */
  width: 100%;
}

body.projekt1 .TextImBild span {
  bottom: auto;
  top: 0em;
}

.TextImBild#hoch span {
  /* max-width: 350px; */
  left: 50%;
  transform: translateX(-50%);
}

.img:before {
  content: " ";
  display: block;
  /* adjust 'height' to position overlay content vertically */
  height: 40%;
}

button.slide-right {
  font-size: 1.5em;
  opacity: 0.5;
  float: right;
  margin-right: 5px;
}

button.slide-left {
  font-size: 1.5em;
  opacity: 0.5;
  float: left;
  margin-left: 5px;
}

@media screen and (min-width: 400px) {
  /* .TextImBild#hoch span {
    max-width: 350px;
  } */
}

@media screen and (min-width: 780px) {
  button.slide-right {
    font-size: 3em;
  }
  button.slide-left {
    font-size: 3em;
  }

  .TextImBild span {
    bottom: 2.1em;
    /* line-height: 1.5em; */
    /* font-size: 1em; */
  }
}

@media screen and (min-width: 800px) {
  .slides-container {
    width: 80vw;
    width: 720px;
    margin: -3em auto 5em auto;
  }
}

@media screen and (min-width: 1000px) {
  .slides-container {
    width: 50vw;
    width: 720px;
  }
}