/* archive.php CSS */


section.archive .card_frame {
  box-shadow: var(--BoxShadowDefault);
}

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

/* CARD IMAGE */

section.archive .img_wrapper .icon {
  position: absolute;
  z-index: 1;
  top: 15px;
  left: 15px;
  background-color: var(--Weiss);
  border-radius: 100px;
  height: 45px;
  width: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}

section.archive .img_wrapper .icon .material-symbols-outlined {
  color: var(--Rot);
  font-size: 28px;
}

/* CARD CONTENT */

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

section.archive .content_frame .timestamp {
  opacity: 0.35;
}

section.archive .content_frame .card_heading {
  color: var(--Rot);
}

/* CONTENT BUTTON */

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

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

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

/* TEASER CATEGORY STYLING */

/* AQUA */

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

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

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

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

section.archive .card_frame.aqua:hover .btn-primary svg path {
  fill: var(--AquaBlau);
}

/* FITNESS */

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

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

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

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

section.archive .card_frame.fitness:hover .btn-primary svg path {
  fill: var(--FitnessGrun);
}

/* ICE */

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

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

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

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

section.archive .card_frame.ice:hover .btn-primary svg path {
  fill: var(--IceTurkis);
}

/* EVENTS */

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

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

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

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

section.archive .card_frame.events:hover .btn-primary svg path {
  fill: var(--EventsLila);
}

/* WELLNESS */

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

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

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

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

section.archive .card_frame.wellness:hover .btn-primary svg path {
  fill: var(--WellnessOrange);
}

@media (max-width: 1199px) {
  section.hero_2 {
    margin-top: 120px;
  }
}

@media (max-width: 992px) {
  section.hero_2 h1 {
    margin-bottom: 0 !important;
  }
}

@media (min-width: 992px) {
  section.archive .cards_wrapper .col-12 {
    margin-top: 30px;
  }
  section.archive .cards_wrapper .col-12:nth-child(3n + 2) {
    margin-top: 0px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  section.archive .cards_wrapper .col-12:nth-child(odd) {
    margin-top: 30px;
  }
}

@media (max-width: 767px) {
  section.archive .cards_wrapper {
    margin-top: 100px;
  }
  section.archive .cards_wrapper .col-12:not(:last-child) {
    margin-bottom: 30px;
  }
}