/* =============================================================================
   Product slider
   ========================================================================== */

.productSlider {
  position: relative;
  padding: 10px 0;

  --swiper-navigation-size: 18px;
  --swiper-navigation-color: rgb(var(--c-neutral-darker));
}

.productSlider__link {
  display: block;
  position: relative;
  overflow: hidden;
}

.productSlider__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 376;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.productSlider__text {
  position: absolute;
  left: 5px;
  bottom: 5px;
  padding: 3px 10px;
  background: rgba(var(--c-neutral-lightest), 0.8);
  color: rgb(var(--c-primary));
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.productSlider__prev,
.productSlider__next {
  width: 52px;
  height: 52px;
  margin-top: -26px;
  border-radius: 50%;
  background: rgba(var(--c-neutral-lightest), 0.8);
  transition: all 0.3s ease;
}

.productSlider__prev {
  left: 20px;
}

.productSlider__next {
  right: 30px;
}

@media (hover: hover) {
  .productSlider__link:hover .productSlider__image {
    transform: scale(1.4);
  }

  .productSlider__link:hover .productSlider__text {
    background: rgb(var(--c-primary));
    color: rgb(var(--c-neutral-lightest));
  }

  .productSlider__prev:hover,
  .productSlider__next:hover {
    background: rgb(var(--c-primary));
    color: rgb(var(--c-neutral-lightest));
  }
}

/* =============================================================================
   Service slider
   ========================================================================== */

.serviceSlider {
  position: relative;
  padding: 0 35px;

  --swiper-navigation-sides-offset: 0;
  --swiper-navigation-size: 45px;
  --swiper-navigation-color: rgb(var(--c-neutral-dark));
}

.serviceSlider__slide {
  padding-top: 30px;
  text-align: center;
}

.serviceSlider__link {
  display: block;
  margin: 0 0.7em;
  color: inherit;
}

.serviceSlider__icon {
  position: relative;
  width: 75px;
  height: 75px;
  margin: 0 auto 1em;

  & .font__far {
    font-size: 70px;
    line-height: 75px;
    color: rgb(var(--c-neutral-dark));
    transition: color 0.35s;
  }
}

.serviceSlider__iconImage {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 75px;
  max-height: 75px;
}

.serviceSlider__iconImage.-hover {
  display: none;
}

.serviceSlider .headline {
  margin-bottom: 0;
}

.serviceSlider__subtitle {
  margin-top: 0.3em;
  line-height: 1.4;
  color: rgb(var(--c-neutral-dark));
}

@media (hover: hover) {
  .serviceSlider__link:hover h3,
  .serviceSlider__link:hover .font__far {
    color: rgb(var(--c-primary));
  }

  .serviceSlider__link:hover .serviceSlider__iconImage {
    display: none;
  }

  .serviceSlider__link:hover .serviceSlider__iconImage.-hover {
    display: block;
  }
}

/* =============================================================================
   Text image special
   ========================================================================== */

.textimageSpecial {
  --textimage-box-bg: var(--c-neutral-lighter);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.textimageSpecial.-space {
  padding: 2em 0;
}

.textimageSpecial__image {
  width: 100%;

  & img {
    display: block;
    width: 100%;
    height: auto;
  }
}

.textimageSpecial__box {
  width: 100%;
  box-sizing: border-box;
  padding: 2em 1.5em;
}

.textimageSpecial__box.-left {
  background: rgb(var(--textimage-box-bg));

  & h3 {
    color: rgb(var(--c-primary));
  }
}

.frame-bg-grey .textimageSpecial,
.content > :not(:nth-child(2n)) .textimageSpecial {
  --textimage-box-bg: var(--c-neutral-lightest);
}

/* =============================================================================
   Linkbox
   ========================================================================== */

.linkbox {
  --linkbox-bg: var(--c-neutral-lighter);
  position: relative;
  margin-bottom: 1em;
  padding: 20px;
  background: rgb(var(--linkbox-bg));
  transition: background 0.3s ease;
}

.frame-bg-grey .linkbox,
.content > :not(:nth-child(2n)) .linkbox {
  --linkbox-bg: var(--c-neutral-lightest);
}

.linkbox.-withLink {
  padding: 0;
}

.linkbox__link {
  display: block;
  padding: 20px 60px 20px 20px;
  color: inherit;
}

.linkbox__title {
  margin-bottom: 0.2em;
  font-size: 125%;
  line-height: 1.4;
  text-transform: uppercase;
  color: rgb(var(--c-primary));
}

.linkbox__subtitle {
  color: rgb(var(--c-neutral-darkest));
}

.linkbox.-withLink::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  width: 25px;
  height: 50px;
  margin-top: -25px;
  background-color: rgb(var(--c-primary));
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 50'%3E%3Cpolyline points='1,1 24,25 1,49' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}

@media (hover: hover) {
  .linkbox.-withLink:hover {
    --linkbox-bg: var(--c-primary);
  }

  .linkbox.-withLink:hover .linkbox__title,
  .linkbox.-withLink:hover .linkbox__subtitle,
  .linkbox.-withLink:hover .linkbox__subtitle a {
    color: rgb(var(--c-neutral-lightest));
  }

  .linkbox.-withLink:hover::after {
    background-color: rgb(var(--c-neutral-lightest));
  }
}

/* =============================================================================
   Panorama
   ========================================================================== */

.panorama {
  position: relative;
}

.panorama__image {
  height: 180px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* =============================================================================
   Media Queries
   ========================================================================== */

@media (min-width: 501px) {
  .panorama__image {
    height: 200px;
  }
}

@media (min-width: 641px) {
  .textimageSpecial__box.-left {
    padding: 2em;
  }

  .textimageSpecial__box.-right {
    padding: 3em 2em;
  }

  .panorama__image {
    height: 250px;
  }
}

@media (min-width: 801px) {
  .textimageSpecial.-space {
    padding: 2.5em 0;
  }

  .panorama__image {
    height: 280px;
  }
}

@media (min-width: 901px) {
  .textimageSpecial__box {
    width: 50%;
  }

  .textimageSpecial__box.-left {
    position: relative;
    z-index: 10;
    margin-top: -3em;
  }

  .panorama__image {
    height: 300px;
  }
}

@media (min-width: 1025px) {
  .textimageSpecial.-space {
    padding: 3em 0;
  }

  .textimageSpecial__box.-left {
    width: 40%;
  }

  .textimageSpecial__box.-right {
    width: 60%;
  }

  .panorama__image {
    height: 420px;
    background-attachment: fixed;
  }
}

@media (min-width: 1181px) {
  .productSlider__text {
    padding: 4px 20px 1px;
    font-size: 135%;
  }

  .textimageSpecial__box.-left {
    padding: 3em 4em;
  }

  .textimageSpecial__box.-right {
    padding: 5em 4em;
  }
}

@media (min-width: 1281px) {
  .textimageSpecial.-space {
    padding: 4em 0;
  }

  .panorama__image {
    height: 550px;
  }
}

@media (min-width: 1361px) {
  .serviceSlider__slider {
    max-width: 1140px;
    margin: 0 auto;
  }
}