/*PROJEKTE SLIDER*/

section:has(#projekte-slider) {
  margin-bottom: var(--cont-gap);
}

.projekte-slider img {
  width: 100%;
  margin: 0;
  max-height: 550px;
}

/*
.projekt-image:after,
.esg-entry-cover:after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  left: 0;
  width: 100%;
  background: -moz-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(38, 38, 38, 0.6) 100%
  );

  background: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(38, 38, 38, 0.6) 100%
  );

  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(38, 38, 38, 0.6) 100%
  );
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#99262626', GradientType=0);
}
*/

.projekte-slider .projekt-info {
  display: flex;
  justify-content: space-between;
  background-color: white;
}

.projekte-slider .projekt h4 {
  padding: 0.864em 2em;
  margin-bottom: 0 !important;
}

a.projektlink {
  background-color: var(--color-green);
  color: white;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.864em 2em;
  font-weight: 400;
}

.bx-pager.bx-default-pager {
  display: none;
}

.projekte-slider .bx-controls {
  position: absolute;
  bottom: 0;
}

a.bx-prev {
  background: url("/wp-content/uploads/arrow-left.png");
  background-size: contain;
  width: 22px;
  height: 50px;
  position: absolute;
  top: calc(50% - (0.864em * 2) - var(--h4-font-size));
  left: 40px;
  background-repeat: no-repeat;
  font-size: var(--h4-font-size);
}

a.bx-next {
  background: url("/wp-content/uploads/arrow-right.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 22px;
  height: 50px;
  position: absolute;
  top: calc(50% - (0.864em * 2) - var(--h4-font-size));
  right: 40px;
}

@media all and (max-width: 767px) {
  .cont-projekte-slider {
    margin-left: -7.5vw !important;
    width: 100vw;
  }

  .projekte-slider img {
    max-height: 220px;
  }

  .projekte-slider .projekt h4 {
    font-size: calc(var(--h4-font-size) * 0.7);
    padding: 20px 25px;
  }
  a.projektlink {
    width: 16.8vw;
    font-size: 0;
  }

  a.projektlink::after {
    content: "";
    background-image: url(/wp-content/themes/gerhardter-bau/img/icon-arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 22%;
    height: 33%;
  }

  a.bx-prev,
  a.bx-next {
    background: url("../img/icon-arrow.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 22px;
    height: 50px;
    right: 20px;
  }

  a.bx-prev {
    transform: rotate(180deg);
    left: 20px;
  }
}