/*
 * bw-imageslider — Ersatz fuer EXT:slick (CType image, layout 4100)
 * Reines CSS-Scroll-Snap, kein jQuery. Ohne JavaScript bleibt der Slider
 * als horizontal scrollbarer Bilderstreifen bedienbar.
 * Breakpoints entsprechen der frueheren slick-Konfiguration:
 * <600 = 1 Bild, 600-1023 = 2, 1024-1399 = 3, ab 1400 = 4.
 */

.bw-imageslider {
    position: relative;
    margin-bottom: 1.5rem;
}

.bw-imageslider__track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0;
    margin: 0;
}

.bw-imageslider__track::-webkit-scrollbar {
    display: none;
}

.bw-imageslider__track:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.bw-imageslider__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bw-imageslider__slide img {
    display: block;
    max-width: 100%;
    height: auto;
}

.bw-imageslider__caption {
    margin-top: .5rem;
    font-size: .875rem;
    text-align: center;
}

@media (min-width: 600px) {
    .bw-imageslider__slide { flex-basis: calc((100% - 10px) / 2); }
}

@media (min-width: 1024px) {
    .bw-imageslider__slide { flex-basis: calc((100% - 20px) / 3); }
}

@media (min-width: 1400px) {
    .bw-imageslider__slide { flex-basis: calc((100% - 30px) / 4); }
}

/* Navigation — wird per JS eingeblendet (hidden-Attribut entfernt) */

.bw-imageslider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.bw-imageslider__nav:hover,
.bw-imageslider__nav:focus-visible {
    background: rgba(0, 0, 0, .8);
}

.bw-imageslider__nav[disabled] {
    opacity: .3;
    cursor: default;
}

.bw-imageslider__nav--prev { left: -1.25rem; }
.bw-imageslider__nav--next { right: -1.25rem; }

@media (max-width: 599px) {
    .bw-imageslider__nav--prev { left: .25rem; }
    .bw-imageslider__nav--next { right: .25rem; }
}

.bw-imageslider__dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    margin-top: .75rem;
}

.bw-imageslider__dot {
    width: .6rem;
    height: .6rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: currentColor;
    opacity: .3;
    cursor: pointer;
}

.bw-imageslider__dot[aria-selected="true"] {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .bw-imageslider__track { scroll-behavior: auto; }
}