/**
** Projekt Slider
** This file contains the styles for the project slider.
*/

/** Container **/

.wp-block-uagb-container.cont-project-slider.background {
  padding-top: var(--cont-gap);
  padding-bottom: var(--cont-gap);
  margin-bottom: 0 !important;
}

.wp-block-uagb-container.cont-project-slider .projekte-slider-wrapper {
  /*padding-right: calc(var(--gap-l) * 2);*/
  padding-left: calc(var(--gap-l) + var(--gap-xl));
}

.wp-block-uagb-container.cont-project-slider .swiper-slide {
  margin-right: var(--gap-m);
  overflow: hidden;
}

.wp-block-uagb-container.cont-project-slider .projekte-slider-heading h2 {
  margin: 0;
}

.wp-block-uagb-container.cont-project-slider .projekte-slider-heading-inner h2 {
  margin-top: 0;
}

a.projekte-slide-link,
a.projekte-slide-link * {
  color: var(--ast-global-color-0);
  text-decoration: none !important;
}

.wp-block-uagb-container.cont-project-slider .swiper-slide .image-container {
  overflow: hidden;
}

.wp-block-uagb-container.cont-project-slider .swiper-slide img {
  width: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

@media (min-width: 876px) {
  .wp-block-uagb-container.cont-project-slider .swiper-slide img:hover {
    transform: scale(1.1);
  }
}

.wp-block-uagb-container.cont-project-slider .swiper-slide:nth-child(odd) img {
  aspect-ratio: 1 / 1.0789 !important;
  /* 410 px von breite 380 = 107.89% */
  width: 100%;
  overflow: hidden;
}

.wp-block-uagb-container.cont-project-slider .swiper-slide:nth-child(even) img {
  aspect-ratio: 1 / 0.8289 !important;
  /* 315px von breite 380 = 82.89% */
  width: 100%;
  overflow: hidden;
}

.wp-block-uagb-container.cont-project-slider .projekte-slider-heading {
  margin-left: calc(var(--gap-l) * 2);
  margin-bottom: var(--gap-m);
}

.wp-block-uagb-container.cont-project-slider
  .projekte-slider-heading
  .projekte-slider-heading-inner {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
}

.wp-block-uagb-container.cont-project-slider .swiper-slide > p {
  font-size: var(--h1-font-size);
  font-style: normal;
  font-weight: 400;
  line-height: 1.29;
  margin-bottom: var(--gap-s) !important;
}

.wp-block-uagb-container.cont-project-slider .swiper-slide .projekte-kunde {
  margin-bottom: var(--gap-s);
  margin-top: var(--gap-m);
}

.wp-block-uagb-container.cont-project-slider .swiper-slide h5 {
  margin: 0 !important;
}

/** Button **/

/* default = light or green background = black and outline */

.wp-block-uagb-container.cont-project-slider:not(.background-dark)
  .projekte-slider-heading
  .uagb-buttons-repeater.ast-outline-button {
  border: 1px solid var(--ast-global-color-3);
}

.wp-block-uagb-container.cont-project-slider:not(.background-dark)
  .projekte-slider-heading
  .uagb-buttons-repeater.ast-outline-button
  .uagb-button__link {
  color: var(--ast-global-color-3);
}

/* hover */

.wp-block-uagb-container.cont-project-slider:not(.background-dark)
  .projekte-slider-heading
  .uagb-buttons-repeater.ast-outline-button:hover {
  border: 1px solid var(--ast-global-color-3);
  background-color: var(--ast-global-color-3);
}

.wp-block-uagb-container.cont-project-slider:not(.background-dark)
  .projekte-slider-heading
  .uagb-buttons-repeater.ast-outline-button:hover
  .uagb-button__link {
  color: var(--ast-global-color-1);
}

/* dark background */

.wp-block-uagb-container.cont-project-slider.background-dark
  .projekte-slider-heading
  .uagb-buttons-repeater.ast-outline-button {
  background-color: var(--ast-global-color-4);
  border: 1px solid var(--ast-global-color-4);
}

.wp-block-uagb-container.cont-project-slider.background-dark
  .projekte-slider-heading
  .uagb-buttons-repeater.ast-outline-button
  .uagb-button__link {
  color: var(--ast-global-color-3);
}

/* hover */

.wp-block-uagb-container.cont-project-slider.background-dark
  .projekte-slider-heading
  .uagb-buttons-repeater.ast-outline-button:hover {
  border: 1px solid var(--ast-global-color-1);
  background: none;
}

.wp-block-uagb-container.cont-project-slider.background-dark
  .projekte-slider-heading
  .uagb-buttons-repeater.ast-outline-button:hover
  .uagb-button__link {
  color: var(--ast-global-color-1);
}

/** Scrollbar **/

.wp-block-uagb-container.background-dark .swiper-scrollbar {
  background-color: rgba(255, 255, 255, 0.3) !important;
  opacity: 1 !important;
}

.swiper-scrollbar-drag {
  border-radius: 0 !important;
  background: var(--ast-global-color-0) !important;
}

.wp-block-uagb-container.background-dark .swiper-scrollbar-drag {
  background-color: var(--ast-global-color-1) !important;
  opacity: 1 !important;
  border-radius: 0 !important;
}

.wp-block-uagb-container.cont-project-slider .swiper-scrollbar {
  width: 55%;
  max-width: unset !important;
  position: relative;
  margin-left: 0;
  margin-right: auto;
  left: 0;
  margin-bottom: calc(var(--gap-l) + var(--gap-m));
  border-radius: 0 !important;
}

.wp-block-uagb-container.cont-project-slider:not(.background-dark)
  .swiper-scrollbar
  .swiper-scrollbar-drag {
  background-color: var(--ast-global-color-0) !important;
}

/** arrows **/

.swiper-arrows {
  position: relative;
  margin-left: 51vw;
  width: 6.471em;
  top: -90px;
}

.wp-block-uagb-container.cont-project-slider.background-dark
  .swiper-arrows
  div {
  border: 1px solid var(--ast-global-color-4);
}

.swiper-arrows div {
  border: 1px solid var(--ast-global-color-3);
  border-radius: 100%;
  cursor: pointer;
  width: 2.824em;
  height: 2.824em;
}

.swiper-arrows div svg {
  display: none;
}

.swiper-arrows div::after {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  width: 1em;
  height: 1em;
  background-image: url(../../../img/button-arrow.svg);
}

div.swiper-button-prev::after {
  transform: rotate(180deg) !important;
}

.wp-block-uagb-container.cont-project-slider.background-dark
  .swiper-arrows
  div::after {
  background-image: url(../../../img/button-arrow-green.svg);
}

/*----------------- Responsive -------------*/

@media (max-width: 1500px) {
  .wp-block-uagb-container.cont-project-slider .swiper-arrows {
    margin-left: 60vw;
  }
}

@media (max-width: 1200px) {
}

@media (max-width: 1200px) {
  .wp-block-uagb-container.cont-project-slider {
    padding-right: 0 !important;
  }
  .wp-block-uagb-container.cont-project-slider .swiper-arrows {
    display: none;
  }
  .wp-block-uagb-container.cont-project-slider .projekte-slider-wrapper {
    padding-left: 0;
  }
  .wp-block-uagb-container.cont-project-slider .projekte-slider-heading {
    margin-left: 30px;
  }
  .wp-block-uagb-container.cont-project-slider .swiper-scrollbar {
    margin-left: 20px;
    width: 100% !important;
  }
  .wp-block-uagb-container.cont-project-slider .projekte-slider-heading-inner {
    flex-direction: column;
    align-items: start !important;
  }
}

@media (max-width: 567px) {
  .wp-block-uagb-container.cont-project-slider .swiper-scrollbar {
    margin-bottom: var(--gap-m) !important;
    width: 90vw !important;
  }
  /*
  .wp-block-uagb-container.cont-project-slider .swiper-slide {
    width: 285px !important;
  }
    */
}

@media (min-width: 1200px) {
  .projekte-swiper {
    margin-right: 20px !important;
  }
}