#footer {
  margin-top: var(--cont-gap);
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-bottom: -25px;
}

#footer > * {
  position: relative;
  z-index: 1;
}

#footer::after {
  content: "";
  background-image: url(../img/footer-element.svg);
  background-position: bottom;
  background-repeat: no-repeat;
  width: 100vw;
  height: calc(100vw * 471 / 1920);
  max-height: unset !important;
  visibility: visible !important;
  pointer-events: none;
  position: absolute;
  z-index: 0;
  left: 0;
  bottom: 0;
  background-size: 100% auto;
}

/* Boxen */

#footer-wrapper {
  max-width: 1200px;
  justify-self: center;
  margin-left: auto;
  margin-right: auto;
}

#footer .row {
  display: flex;
  gap: 7px;
  justify-content: center;
}

#footer .col-xs-4 {
  background-color: var(--color-shade-1);
  padding: calc(var(--gap-l) + var(--gap-s)) 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--border-radius-10);
  --mysize: 20.57vw;
  width: var(--mysize);
  /*height: calc(var(--mysize) * 0.749);*/
  justify-content: center;
}

#footer .col-xs-4 .widget_media_image {
  margin-bottom: var(--gap-m);
}

#footer .col-xs-4 h4 {
  color: var(--color-gruen);
  margin-bottom: var(--gap-m) !important;
}

#footer .col-xs-4 p,
#footer .col-xs-4 a {
  color: var(--color-anthrazit);
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  line-height: 1.25 !important;
  font-family: var(--headlinefont);
}

#footer .col-xs-4 a:hover {
  color: var(--color-gruen);
}

#footer .col-xs-4 img {
  max-height: 50px !important;
  height: 2.6vw !important;
}

/* Navigation */
#footerleiste .container {
  justify-content: center;
  display: flex;
  gap: calc(var(--gap-l) + var(--gap-s));
  padding: 74px 0;
}

#footerleiste .container a {
  color: var(--color-weiss);
  font-weight: 300;
  line-height: 1.87;
  transition: all 0.5s ease-in-out;
}

#footerleiste .container a:hover {
  color: var(--color-anthrazit);
  text-decoration: none;
}

@media (max-width: 1024px) {
  #footer .col-xs-4 {
    height: unset !important;
  }

  #footer::after {
    background-size: unset;
    /* background-size: contain */
    height: 35vh;
  }

  #footer .col-xs-4 {
    padding-left: var(--gap-m);
    padding-right: var(--gap-m);
  }
}

@media (max-width: 576px) {
  #footer-wrapper {
    width: 85.33vw;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #footer-wrapper .row {
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
  }

  #footerleiste .container {
    flex-direction: column;
    gap: var(--gap-s);
    padding: 40px 0 100px 0;
  }

  #footer .col-xs-4 img {
    height: 7vw !important;
  }

  #footer::after {
    background-size: cover;
    height: 48vh;
  }
}

@media (max-width: 900px) and (min-width: 576px) {
  #footer {
    padding-bottom: 0 !important;
  }

  #footer .col-xs-4 {
    --mysize: 25vw;
  }
}