/* 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.withbg {
  position: relative;
  color: rgb(var(--c-neutral-lightest));
}

.slider.withbg::before {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(var(--c-neutral-darkest), 0.85);
  content: '';
  display: block;
  z-index: 1;
}

.slider.withbg > .col100,
.slider.withbg > div {
  position: relative;
  z-index: 2;
}

.slider.withbg a,
.slider.withbg h2,
.slider.withbg h3,
.slider.withbg h4 {
  color: rgb(var(--c-neutral-lightest));
}

.partner .slider__iteminner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  margin: 0 5px;
  padding: 1rem;
  border: 1px solid rgb(var(--c-neutral-light));
  background: rgb(var(--c-neutral-lightest));
  text-align: center;
  box-sizing: border-box;
}

.partner .slider__iteminner a {
  display: block;
  width: 100%;
}

.partner .slider__iteminner img {
  max-height: 100px;
  max-width: 80%;
  width: auto;
  height: auto;
}
