/**
* Block Name: teaser_cards
*/

section.teaser_cards {
  overflow-x: hidden;
}

/* CARD FRAME */

section.teaser_cards .card_frame {
  box-shadow: var(--BoxShadowDefault);
  -webkit-transition: var(--Transition);
  -o-transition: var(--Transition);
  transition: var(--Transition);
}

section.teaser_cards .card_frame:hover {
  box-shadow: var(--BoxShadowDefaultHover);
}

section.teaser_cards .card_wrapper.col-lg-4 .card_frame .img_wrapper {
  padding-bottom: 20px;
}

/* ICON */

section.teaser_cards .img_wrapper .icon {
  position: absolute;
  z-index: 1;
  top: 15px;
  left: 15px;
}

section.teaser_cards .img_wrapper .icon::after {
  position: absolute;
  content: "";
  background-color: var(--Weiss);
  border-radius: 100px;
  height: 40px;
  width: 40px;
  left: 1px;
  top: 1px;
  z-index: -1;
}

section.teaser_cards .img_wrapper .icon svg path {
  fill: var(--Rot);
}

/* CARD CONTENT */

section.teaser_cards .content_frame {
  padding: 30px;
}

/* CONTENT BUTTON */

section.teaser_cards .card_frame:hover .content_frame .btn-primary {
  color: var(--Rot);
}

section.teaser_cards .card_frame:hover .content_frame .btn-primary svg path {
  fill: var(--Rot);
}

/* ********************************** */

/* TEASER CATEGORY STYLING */

/* AQUA */

section.teaser_cards .card_frame.aqua .img_wrapper .icon svg path,
section.teaser_cards .card_frame.aqua:hover .btn-primary svg path {
  fill: var(--AquaBlau);
}

section.teaser_cards .card_frame.aqua .content_frame .card_heading,
section.teaser_cards .card_frame.aqua .icon .material-symbols-outlined,
section.teaser_cards .card_frame.aqua:hover .btn-primary {
  color: var(--AquaBlau);
}

section.teaser_cards .card_frame.aqua .img_frame::after {
  background: var(--AquaBlau);
}

section.teaser_cards .card_frame.aqua {
  box-shadow: var(--BoxShadowAqua);
}

section.teaser_cards .card_frame.aqua:hover {
  box-shadow: var(--BoxShadowAquaHover);
}

/* FITNESS */

section.teaser_cards .card_frame.fitness .img_wrapper .icon svg path,
section.teaser_cards .card_frame.fitness:hover .btn-primary svg path {
  fill: var(--FitnessGrun);
}

section.teaser_cards .card_frame.fitness .content_frame .card_heading,
section.teaser_cards .card_frame.fitness .icon .material-symbols-outlined,
section.teaser_cards .card_frame.fitness:hover .btn-primary {
  color: var(--FitnessGrun);
}

section.teaser_cards .card_frame.fitness .img_frame::after {
  background: var(--FitnessGrun);
}

section.teaser_cards .card_frame.fitness {
  box-shadow: var(--BoxShadowFitness);
}

section.teaser_cards .card_frame.fitness:hover {
  box-shadow: var(--BoxShadowFitnessHover);
}

/* ICE */

section.teaser_cards .card_frame.ice .img_wrapper .icon svg path,
section.teaser_cards .card_frame.ice:hover .btn-primary svg path {
  fill: var(--IceTurkis);
}

section.teaser_cards .card_frame.ice .content_frame .card_heading,
section.teaser_cards .card_frame.ice .icon .material-symbols-outlined,
section.teaser_cards .card_frame.ice:hover .btn-primary {
  color: var(--IceTurkis);
}

section.teaser_cards .card_frame.ice .img_frame::after {
  background: var(--IceTurkis);
}

section.teaser_cards .card_frame.ice {
  box-shadow: var(--BoxShadowIce);
}

section.teaser_cards .card_frame.ice:hover {
  box-shadow: var(--BoxShadowIceHover);
}

/* EVENTS */

section.teaser_cards .card_frame.events .img_wrapper .icon svg path,
section.teaser_cards .card_frame.events:hover .btn-primary svg path {
  fill: var(--EventsLila);
}

section.teaser_cards .card_frame.events .content_frame .card_heading,
section.teaser_cards .card_frame.events .icon .material-symbols-outlined,
section.teaser_cards .card_frame.events:hover .btn-primary {
  color: var(--EventsLila);
}

section.teaser_cards .card_frame.events .img_frame::after {
  background: var(--EventsLila);
}

section.teaser_cards .card_frame.events {
  box-shadow: var(--BoxShadowEvents);
}

section.teaser_cards .card_frame.events:hover {
  box-shadow: var(--BoxShadowEventsHover);
}

/* WELLNESS */

section.teaser_cards .card_frame.wellness .img_wrapper .icon svg path,
section.teaser_cards .card_frame.wellness:hover .btn-primary svg path {
  fill: var(--WellnessOrange);
}

section.teaser_cards .card_frame.wellness .content_frame .card_heading,
section.teaser_cards .card_frame.wellness .icon .material-symbols-outlined,
section.teaser_cards .card_frame.wellness:hover .btn-primary {
  color: var(--WellnessOrange);
}

section.teaser_cards .card_frame.wellness .img_frame::after {
  background: var(--WellnessOrange);
}

section.teaser_cards .card_frame.wellness {
  box-shadow: var(--BoxShadowWellness);
}

section.teaser_cards .card_frame.wellness:hover {
  box-shadow: var(--BoxShadowWellnessHover);
}

/* media */

@media only screen and (max-width: 1199px) and (min-width: 992px) {
  section.teaser_cards .card_wrapper {
    flex: 0 0 40%;
    max-width: 40%;
  }

  section.teaser_cards .card_wrapper .card_content {
    padding-top: 15px;
  }
}

@media (max-width: 992px) {
  section.teaser_cards .js_swiper .swiper-button-next,
  section.teaser_cards .js_swiper .swiper-button-prev {
    padding: 0 20px;
  }

  section.teaser_cards .content_frame .card_heading {
    min-height: max-content;
  }
}

@media (max-width: 575.98px) {
  section.teaser_cards
    .swiper-container
    .swiper-slide:not(.swiper-slide-visible) {
    opacity: 0.5;
  }

  section.teaser_cards .js_swiper .swiper-button-next,
  section.teaser_cards .js_swiper .swiper-button-prev {
    opacity: 1;
  }

  section.teaser_cards .js_swiper .swiper-button-next {
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(255, 255, 255, 0.5)
    );
  }

  section.teaser_cards .js_swiper .swiper-button-prev {
    background: linear-gradient(
      to left,
      rgba(0, 0, 0, 0) 0%,
      rgba(255, 255, 255, 0.5)
    );
  }
}