/* Die Slides und die Navigation liefert das Swiper-Bundle, hier steht nur das,
   was der Slider im Raster des Templates braucht: die Pfeile in den schmalen
   Spalten 2 und 4, die Slides in der Inhaltsspalte 3. */
.slider > .headline {
  grid-column: 3;
}

.slider > .slider__prev {
  grid-column: 2;
}

/* min-width:0 verhindert, dass der Swiper die Rasterspalte auf die Summe aller
   Slides aufzieht und die Seite horizontal scrollen lässt. */
.slider > .slider__itemwrap {
  grid-column: 3;
  width: 100%;
  min-width: 0;
}

.slider > .slider__next {
  grid-column: 4;
}

.slider__itemwrap {
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 10px;
  position: relative;
  z-index: 0;
}

/* height:auto gleicht die Höhe aller Slides einer Ansicht an */
.slider__item {
  display: flex;
  height: auto;
}

.slider__item > * {
  width: 100%;
}

/* Die Pfeile sind Buttons, deshalb muss das Button-Styling des Templates
   vollständig zurückgesetzt werden - auch für :hover, :focus und :active. */
.slider__prev,
.slider__next,
.slider__prev:hover,
.slider__next:hover,
.slider__prev:focus,
.slider__next:focus,
.slider__prev:active,
.slider__next:active {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  line-height: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.slider__prev:focus-visible,
.slider__next:focus-visible {
  outline: 2px solid rgb(var(--c-primary));
  outline-offset: 4px;
}

.slider__prev svg,
.slider__next svg {
  display: block;
  width: 20px;
  height: 40px;
  margin: 0 auto;
}

.slider .slider__arrow {
  fill: none;
  stroke: rgb(var(--c-primary));
  stroke-width: 2;
  transition: stroke 0.2s ease;
}

@media (hover: hover) {
  .slider__prev:hover .slider__arrow,
  .slider__next:hover .slider__arrow {
    stroke: rgb(var(--c-neutral-dark));
  }
}

.slider__prev.swiper-button-disabled,
.slider__next.swiper-button-disabled,
.slider__prev.swiper-button-lock,
.slider__next.swiper-button-lock {
  visibility: hidden;
}

.slider__iteminner {
  margin: 0 5px;
}

.service__icon {
  width: 100%;
  height: 60px;
}

.service__icon .font__far,
.service__icon .font__fal,
.service__icon .font__fab,
.service__icon .font__fas,
.service__icon .font__fat {
  font-size: 55px;
  display: block;
}

.service__icon img {
  max-height: 60px;
  width: auto;
  max-width: 60px;
}

.service__image.-hover {
  display: none;
}

@media (hover: hover) {
  .service__item:hover .service__image.-nohover {
    display: none;
  }

  .service__item:hover .service__image.-hover {
    display: block;
  }
}