/**
* Block Name: geschichte
*/

section.geschichte {
  background-color: var(--bg-hell-alt);
  overflow: hidden;
}

/* Swiper Navigation & Overlay */

section.geschichte .js_swiper {
  --swiper-navigation-size: 20px;
}

section.geschichte .js_swiper .swiper-button-next,
section.geschichte .js_swiper .swiper-button-prev {
  transition: 0.3s linear;
  background-color: #000;
  border-radius: 100px;
  color: #ffffff;
  padding: 20px;
  opacity: 0;
}

section.geschichte
  .js_swiper:hover
  .swiper-button-next:not(.swiper-button-disabled),
section.geschichte
  .js_swiper:hover
  .swiper-button-prev:not(.swiper-button-disabled) {
  opacity: 1;
}

section.geschichte .js_swiper .swiper-button-next {
  transform: translate(-30px, 100px);
}

section.geschichte .js_swiper .swiper-button-prev {
  transform: translate(30px, 100px);
}

section.geschichte .js_swiper:after,
section.geschichte .js_swiper:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 200px;
  bottom: 0;
  display: block;
  opacity: 1;
  transition: 0.3s linear;
}

section.geschichte .js_swiper:after {
  left: 0;
  background: linear-gradient(to left, rgba(243, 238, 232, 0) 0%, #f3eee8);
  z-index: 1;
}

section.geschichte .js_swiper::before {
  right: 0;
  background: linear-gradient(to right, rgba(243, 238, 232, 0) 0%, #f3eee8);
  z-index: 2;
}

/* Swiper Slide Content */

section.geschichte .card_frame {
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

section.geschichte .card_frame .img_wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  right: 0px;
  bottom: 0px;
}

section.geschichte .card_frame .img_frame {
  position: relative;
  padding-top: 270px;
  margin: 0;
  width: 100%;
  overflow: hidden;
}

section.geschichte .card_frame hr {
  width: 120%;
  display: inline-block;
  border-top: 5px solid #000;
  position: relative;
  z-index: 1;
  transform: translateY(70px);
}

@media (max-width: 992px) {
  section.geschichte .js_swiper::before,
  section.geschichte .js_swiper:after {
    display: none;
  }

  section.geschichte .js_swiper .swiper-button-next {
    transform: translate(-10px, 130px);
    opacity: 1;
  }
  section.geschichte .js_swiper .swiper-button-prev {
    transform: translate(10px, 130px);
    opacity: 1;
  }
}