/* Block Name: teaser_cards_col */

/* Teaser Style */

section.teaser_cards_col .card_wrapper .card_frame {
  -webkit-transition: var(--Transition);
  -o-transition: var(--Transition);
  -moz-transition: var(--Transition);
  transition: var(--Transition);
  box-shadow: var(--BoxShadowDefault);
}

section.teaser_cards_col .card_wrapper:hover .card_frame {
  box-shadow: var(--BoxShadowDefaultHover);
}

section.teaser_cards_col .card_frame {
  overflow: hidden; /* do not remove */
}

/* Card Image */

section.teaser_cards_col .img_frame {
  position: relative;
  width: 100%;
  max-width: 30%;
  padding-top: 0;
  -webkit-transition: var(--Transition);
  -o-transition: var(--Transition);
  -moz-transition: var(--Transition);
  transition: var(--Transition);
}

/* overrides .img_frame:after from main stylesheet */
section.teaser_cards_col .img_frame::after {
  content: "";
  display: none;
}

section.teaser_cards_col .card_wrapper:hover .img_frame {
  max-width: 20%;
}

section.teaser_cards_col .icon svg path {
  fill: var(--Rot);
}

/* Content 
 */

/* General  */

section.teaser_cards_col .content_frame {
  padding: 30px;
  border-left: 5px solid var(--Rot);
}

section.teaser_cards_col .card_frame.allgemein .content_frame .card_heading {
  color: var(--Rot) !important;
}

section.teaser_cards_col
  .card_frame.allgemein
  .content_frame
  .link_area:hover
  .btn-primary {
  color: var(--Rot) !important;
}

section.teaser_cards_col
  .card_frame.allgemein
  .content_frame
  .link_area:hover
  .btn-primary
  svg
  path {
  fill: var(--Rot) !important;
}

/* Bild Col */

section.teaser_cards_col .bild_col .icon {
  position: absolute;
  z-index: 1;
  top: 15px;
  left: 15px;
}

/* Text Col */

section.teaser_cards_col .text_col .heading_wrapper .icon {
  position: relative;
  top: 0;
  left: 0;
}

/* blog category dependent color styling */

/* AQUA */

article.category-aqua section.teaser_cards_col .link_area:hover .btn-primary,
article.category-aqua-fr
  section.teaser_cards_col
  .link_area:hover
  .btn-primary {
  color: var(--AquaBlau);
}

article.category-aqua
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .content_frame,
article.category-aqua-fr
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .content_frame {
  border-color: var(--AquaBlau);
}

article.category-aqua
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .icon
  svg
  path,
article.category-aqua-fr
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .icon
  svg
  path {
  fill: var(--AquaBlau);
}

article.category-aqua section.teaser_cards_col .card_frame:not(.allgemein),
article.category-aqua-fr section.teaser_cards_col .card_frame:not(.allgemein) {
  box-shadow: var(--BoxShadowAqua);
}

article.category-aqua
  section.teaser_cards_col
  .card_frame:not(.allgemein):hover,
article.category-aqua-fr
  section.teaser_cards_col
  .card_frame:not(.allgemein):hover {
  box-shadow: var(--BoxShadowAquaHover);
}

/* FITNESS */

article.category-fitness
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .link_area:hover
  .btn-primary,
article.category-fitness-fr
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .link_area:hover
  .btn-primary {
  color: var(--FitnessGrun);
}

article.category-fitness
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .content_frame,
article.category-fitness-fr
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .content_frame {
  border-color: var(--FitnessGrun);
}

article.category-fitness
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .icon
  svg
  path,
article.category-fitness-fr
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .icon
  svg
  path {
  fill: var(--FitnessGrun);
}

article.category-fitness section.teaser_cards_col .card_frame:not(.allgemein),
article.category-fitness-fr
  section.teaser_cards_col
  .card_frame:not(.allgemein) {
  box-shadow: var(--BoxShadowFitness);
}

article.category-fitness
  section.teaser_cards_col
  .card_frame:not(.allgemein):hover,
article.category-fitness-fr
  section.teaser_cards_col
  .card_frame:not(.allgemein):hover {
  box-shadow: var(--BoxShadowFitnessHover);
}

/* EVENTS */

article.category-events
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .link_area:hover
  .btn-primary,
article.category-events-fr
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .link_area:hover
  .btn-primary {
  color: var(--EventsLila);
}

article.category-events
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .content_frame,
article.category-events-fr
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .content_frame {
  border-color: var(--EventsLila);
}

article.category-events
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .icon
  svg
  path,
article.category-events-fr
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .icon
  svg
  path {
  fill: var(--EventsLila);
}

article.category-events section.teaser_cards_col .card_frame:not(.allgemein),
article.category-events-fr
  section.teaser_cards_col
  .card_frame:not(.allgemein) {
  box-shadow: var(--BoxShadowEvents);
}

article.category-events
  section.teaser_cards_col
  .card_frame:not(.allgemein):hover,
article.category-events-fr
  section.teaser_cards_col
  .card_frame:not(.allgemein):hover {
  box-shadow: var(--BoxShadowEventsHover);
}

/* ICE */

article.category-ice
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .link_area:hover
  .btn-primary,
article.category-ice-fr
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .link_area:hover
  .btn-primary {
  color: var(--IceTurkis);
}

article.category-ice
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .content_frame,
article.category-ice-fr
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .content_frame {
  border-color: var(--IceTurkis);
}

article.category-ice
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .icon
  svg
  path,
article.category-ice-fr
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .icon
  svg
  path {
  fill: var(--IceTurkis);
}

article.category-ice section.teaser_cards_col .card_frame:not(.allgemein),
article.category-ice-fr section.teaser_cards_col .card_frame:not(.allgemein) {
  box-shadow: var(--BoxShadowIce);
}

article.category-ice section.teaser_cards_col .card_frame:not(.allgemein):hover,
article.category-ice-fr
  section.teaser_cards_col
  .card_frame:not(.allgemein):hover {
  box-shadow: var(--BoxShadowIceHover);
}

/* WELLNESS */

article.category-wellness
  section.teaser_cards_col
  .link_area:hover
  .btn-primary,
article.category-wellness-fr
  section.teaser_cards_col
  .link_area:hover
  .btn-primary {
  color: var(--WellnessOrange);
}

article.category-wellness
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .content_frame,
article.category-wellness-fr
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .content_frame {
  border-color: var(--WellnessOrange);
}

article.category-wellness
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .icon
  svg
  path,
article.category-wellness-fr
  section.teaser_cards_col
  .card_frame:not(.allgemein)
  .icon
  svg
  path {
  fill: var(--WellnessOrange);
}

article.category-wellness section.teaser_cards_col .card_frame:not(.allgemein),
article.category-wellness-fr
  section.teaser_cards_col
  .card_frame:not(.allgemein) {
  box-shadow: var(--BoxShadowWellness);
}

article.category-wellness
  section.teaser_cards_col
  .card_frame:not(.allgemein):hover,
article.category-wellness-fr
  section.teaser_cards_col
  .card_frame:not(.allgemein):hover {
  box-shadow: var(--BoxShadowWellnessHover);
}

@media (max-width: 992px) {
  section.teaser_cards_col .card_wrapper {
    min-height: max-content;
  }

  section.teaser_cards_col .img_frame {
    max-width: 20%;
  }
}
