/**
 * Kirby Slider Plugin
 * Version: 1.1.2
 */

.slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background-color: rgb(255 255 255 / 0.5);
  color: rgb(31 41 55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 200ms, background-color 200ms;
  cursor: pointer;
  border: 0;
}

.slider:hover .slider__btn,
.slider:focus-within .slider__btn {
  opacity: 1;
}

.slider__btn:hover {
  background-color: rgb(255 255 255 / 0.85);
}

.slider__btn--prev { left: 0.5rem; }
.slider__btn--next { right: 0.5rem; }

.slider__btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

@media (prefers-color-scheme: dark) {
  .slider__btn {
    background-color: rgb(0 0 0 / 0.5);
    color: rgb(243 244 246);
  }
  .slider__btn:hover {
    background-color: rgb(0 0 0 / 0.8);
  }
}

/* --- Lightbox-Link (Option "Bilder vergrößerbar") --- */
.slider__zoom{
  display:block;
  max-height:100%;
  cursor:zoom-in;
  line-height:0;           /* verhindert Extra-Abstand unter dem Bild */
}
.slider__zoom img{
  transition:transform 250ms ease;
}
.slider__zoom:hover img{
  transform:scale(1.02);
}
.slider__zoom:focus-visible{
  outline:2px solid var(--accent,#1C4E65);
  outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  .slider__zoom img{transition:none}
  .slider__zoom:hover img{transform:none}
}

/* --- Höhenbegrenzung (ab 1.2.1) ---
   Der Wert kommt als Inline-Variable --slider-max-h vom Container und
   wird direkt auf das Bild angewendet. Eine max-height am Container
   allein wirkt nicht, weil das Bild sich über eine Prozentangabe
   begrenzt – und die braucht eine feste Elternhöhe. */
.slider__img{
  max-height:var(--slider-max-h, 24rem);
  height:auto;
  width:auto;
  max-width:100%;
  object-fit:contain;
}
.slider__zoom{
  max-height:var(--slider-max-h, 24rem);
}