/**
 * C4mulo5 Slider – wiederverwendbarer Karussell-Core
 *
 * Markup-Struktur:
 *   <div class="c4m5-slider" data-slides-desktop="4" ...>
 *     <div class="c4m5-slider__viewport">
 *       <div class="c4m5-slider__track">
 *         <div class="c4m5-slider__slide">...</div>
 *         <div class="c4m5-slider__slide">...</div>
 *       </div>
 *     </div>
 *   </div>
 *
 * Pfeile und Dots werden per JS eingefügt.
 */

/* ═══ Reset Mesmerize ::before/::after ══════════════════════════ */
.c4m5-slider::before,
.c4m5-slider::after,
.c4m5-slider__track::before,
.c4m5-slider__track::after,
.c4m5-slider__slide::before,
.c4m5-slider__slide::after {
    display: none !important;
    content: none !important;
}

/* ═══ CONTAINER ═══════════════════════════════════════════════ */
.c4m5-slider {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.c4m5-slider__viewport {
    overflow: hidden;
    margin: 0 -4px;  /* Überhang-Trick für angeschnittene Slides rechts */
    padding: 4px;    /* Platz für Schatten */
}

.c4m5-slider__track {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.c4m5-slider__slide {
    flex: 0 0 auto;
    box-sizing: border-box;
    user-select: none;
}

/* ═══ PFEILE ═══════════════════════════════════════════════════ */
.c4m5-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: #ffffff;
    color: #1a5490;
    border-radius: 50%;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.c4m5-slider__arrow:hover:not(:disabled) {
    background: #1a5490;
    color: #ffffff;
    transform: translateY(-50%) scale(1.08);
}

.c4m5-slider__arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.c4m5-slider__arrow svg {
    width: 20px;
    height: 20px;
}

.c4m5-slider__arrow--prev { left: -8px; }
.c4m5-slider__arrow--next { right: -8px; }

@media (max-width: 1024px) {
    .c4m5-slider__arrow { width: 36px; height: 36px; }
    .c4m5-slider__arrow svg { width: 16px; height: 16px; }
    .c4m5-slider__arrow--prev { left: 4px; }
    .c4m5-slider__arrow--next { right: 4px; }
}

/* ═══ DOTS ══════════════════════════════════════════════════════ */
.c4m5-slider__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.c4m5-slider__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #d1d5db;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.c4m5-slider__dot:hover { background: #9ca3af; }

.c4m5-slider__dot.is-active {
    background: #1a5490;
    transform: scale(1.2);
}

/* ═══ Focus-Styles (Barrierefreiheit) ═══════════════════════════ */
.c4m5-slider__arrow:focus-visible,
.c4m5-slider__dot:focus-visible {
    outline: 3px solid #29aae4;
    outline-offset: 2px;
}