/**
* Block Name: geschichte
*/

section.geschichte {
  background-color: var(--ecru);
  overflow: hidden;
}

section.geschichte .swiper_nav {
  gap: 22px;
  position: relative;
  z-index: 9;
}

section.geschichte hr {
  border: 3px solid var(--minzgrun);
  opacity: 1;
  width: calc(100% + 33px);
  position: relative;
  margin: 30px 0;
}

section.geschichte .swiper-slide:last-of-type hr {
  width: 100%;
}

section.geschichte .swiper-slide .beschreibung {
  color: var(--sandbeige);
}

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

section.geschichte .js_swiper:before {
  left: 0;
  background: linear-gradient(
    90deg,
    rgba(245, 241, 231, 0.8) 0%,
    rgba(245, 241, 231, 0.2) 79.25%,
    rgba(245, 241, 231, 0) 100%
  );
  z-index: 2;
}

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

section.geschichte .js_swiper:after {
  right: 0;
  background: linear-gradient(
    270deg,
    rgba(245, 241, 231, 0.8) 0%,
    rgba(245, 241, 231, 0.2) 79.25%,
    rgba(245, 241, 231, 0) 100%
  );
  z-index: 2;
}

section.geschichte .swiper_nav .button-prev svg circle,
section.geschichte .swiper_nav .button-next svg circle {
  fill: transparent;
  transition: all 300ms ease-in-out;
}

section.geschichte .swiper_nav .button-prev svg path,
section.geschichte .swiper_nav .button-next svg path {
  transition: all 300ms ease-in-out;
}

section.geschichte .swiper_nav .button-prev:hover svg circle,
section.geschichte .swiper_nav .button-next:hover svg circle {
  fill: var(--sandbeige);
}

section.geschichte .swiper_nav .button-prev:hover svg path,
section.geschichte .swiper_nav .button-next:hover svg path {
  fill: #fff;
}

@media (max-width: 1199px) {
  section.geschichte .js_swiper:before {
    width: 100px;
  }

  section.geschichte .js_swiper:after {
    width: 100px;
  }
}
@media (max-width: 992px) {
  section.geschichte .js_swiper:before {
    width: 50px;
  }

  section.geschichte .js_swiper:after {
    width: 50px;
  }
}