/* ==========================================================================
   Berris Carousel – Frontend (Multi-Slide, CSS-Variablen)
   ========================================================================== */

.berris-carousel {
    position: relative;
    width: 100%;
    overflow: visible; /* damit außen liegende Pfeile über den Modulrand ragen können */
    /* Fallback-Defaults, falls Inline-Vars fehlen */
    --bc-slides-d: 3;
    --bc-slides-t: 2;
    --bc-slides-p: 1;
    --bc-gap: 16px;
    --bc-ratio: 16/9;
    --bc-arrow-color: #ffffff;
    --bc-arrow-bg: rgba(0,0,0,0.5);
    --bc-arrow-size: 40px;
    --bc-icon-size: 20px;
    --bc-arrow-offset: 12px;
    --bc-dot-color: rgba(0,0,0,0.25);
    --bc-dot-active: #000000;
    --bc-dot-size: 10px;
}

.berris-car-viewport {
    overflow: hidden;
    width: 100%;
}

.berris-car-track {
    display: flex;
    gap: var(--bc-gap);
    will-change: transform;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    transition-duration: 500ms;
}

/* Slide-Breite = (100% - Lücken) / Anzahl sichtbarer Bilder */
.berris-car-slide {
    flex: 0 0 calc((100% - (var(--bc-slides-d) - 1) * var(--bc-gap)) / var(--bc-slides-d));
    min-width: 0;
}

@media (max-width: 980px) {
    .berris-car-slide {
        flex-basis: calc((100% - (var(--bc-slides-t) - 1) * var(--bc-gap)) / var(--bc-slides-t));
    }
}
@media (max-width: 767px) {
    .berris-car-slide {
        flex-basis: calc((100% - (var(--bc-slides-p) - 1) * var(--bc-gap)) / var(--bc-slides-p));
    }
}

.berris-car-slide-inner {
    position: relative;
    margin: 0;
    width: 100%;
    overflow: hidden;
    aspect-ratio: var(--bc-ratio);
    border-radius: var(--bc-radius, 4px);
}

.berris-car-slide-inner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Caption */
.berris-car-caption {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
    padding: 1.25rem 1rem 0.75rem;
    color: #fff; font-size: 0.9rem; line-height: 1.4;
    background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0));
}

/* Pfeile – Farben/Größe via CSS-Variablen */
.berris-car-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    display: flex; align-items: center; justify-content: center;
    width: var(--bc-arrow-size);
    height: var(--bc-arrow-size);
    background: var(--bc-arrow-bg);
    padding: 0; border: none; border-radius: 50%; cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease; opacity: 0.85;
}
.berris-car-arrow:hover { opacity: 1; transform: translateY(-50%) scale(1.08); }
.berris-car-arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.berris-car-arrow[disabled] { opacity: 0.25; cursor: default; pointer-events: none; }
.berris-car-arrow--prev { left: 12px; }
.berris-car-arrow--next { right: 12px; }
.berris-car-arrow svg {
    width: var(--bc-icon-size);
    height: var(--bc-icon-size);
    stroke: var(--bc-arrow-color);
    fill: none; pointer-events: none;
}

/* Dots – Farben/Größe via CSS-Variablen */
.berris-car-dots {
    display: flex; justify-content: center; gap: 8px;
    margin-top: 14px;
}
.berris-car-dot {
    width: var(--bc-dot-size);
    height: var(--bc-dot-size);
    background: var(--bc-dot-color);
    padding: 0; border: none; border-radius: 50%; cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}
.berris-car-dot:hover { transform: scale(1.2); }
.berris-car-dot.is-active {
    background: var(--bc-dot-active);
    transform: scale(1.15);
}
.berris-car-dot:focus-visible { outline: 2px solid var(--bc-dot-active); outline-offset: 2px; }

/* Builder-Leerzustand */
.berris-car-empty {
    padding: 2rem; text-align: center; color: #888;
    background: #f5f5f5; border: 1px dashed #ccc; border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .berris-car-track { transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Pfeil-Position: innerhalb / außerhalb
   ========================================================================== */
.berris-carousel--arrows-inside .berris-car-arrow--prev { left: var(--bc-arrow-offset, 12px); }
.berris-carousel--arrows-inside .berris-car-arrow--next { right: var(--bc-arrow-offset, 12px); }

.berris-carousel--arrows-outside .berris-car-arrow--prev {
    left: calc(-1 * (var(--bc-arrow-size) + var(--bc-arrow-offset, 12px)));
}
.berris-carousel--arrows-outside .berris-car-arrow--next {
    right: calc(-1 * (var(--bc-arrow-size) + var(--bc-arrow-offset, 12px)));
}

/* Außerhalb der Bilder, aber innerhalb der Modulbreite (Bilder rücken nach innen) */
.berris-carousel--arrows-outside-padded {
    padding-left: calc(var(--bc-arrow-size) + var(--bc-arrow-offset, 12px));
    padding-right: calc(var(--bc-arrow-size) + var(--bc-arrow-offset, 12px));
}
.berris-carousel--arrows-outside-padded .berris-car-arrow--prev { left: 0; }
.berris-carousel--arrows-outside-padded .berris-car-arrow--next { right: 0; }

/* ==========================================================================
   Lightbox
   ========================================================================== */
.berris-car-lb-trigger {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    cursor: zoom-in;
}
.berris-car-lb-trigger img { pointer-events: none; }

.berris-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
    opacity: 0;
    transition: opacity 0.25s ease;
    /* Fallbacks fuer die Steuerelemente */
    --bc-lb-color: #ffffff;
    --bc-lb-bg: rgba(0,0,0,0.5);
    --bc-lb-size: 48px;
    --bc-lb-icon: 22px;
}
.berris-lightbox.is-open {
    display: flex;
    opacity: 1;
}

.berris-lightbox__stage {
    position: relative;
    max-width: 90vw;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.berris-lightbox__img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.berris-lightbox__caption {
    margin-top: 12px;
    color: #fff;
    font-size: 0.95rem;
    text-align: center;
    max-width: 80vw;
}

/* Steuerelemente – relativ zum Viewport-Overlay (immer sichtbar) */
.berris-lightbox__btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--bc-lb-size, 48px);
    height: var(--bc-lb-size, 48px);
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: var(--bc-lb-bg, rgba(0,0,0,0.5));
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 0.9;
    z-index: 2;
}
.berris-lightbox__btn:hover { opacity: 1; transform: scale(1.08); }
.berris-lightbox__btn:focus-visible { outline: 2px solid var(--bc-lb-color, #fff); outline-offset: 2px; }
.berris-lightbox__btn svg {
    width: var(--bc-lb-icon, 22px);
    height: var(--bc-lb-icon, 22px);
    stroke: var(--bc-lb-color, #fff);
    fill: none;
    pointer-events: none;
}

/* Schliessen-Button: Position-Varianten */
.berris-lightbox__close { top: 20px; right: 20px; }
.berris-lightbox--close-top-left   .berris-lightbox__close { right: auto; left: 20px; }
.berris-lightbox--close-top-center .berris-lightbox__close { right: auto; left: 50%; transform: translateX(-50%); }
.berris-lightbox--close-top-center .berris-lightbox__close:hover { transform: translateX(-50%) scale(1.08); }

/* Navigation seitlich (Standard) */
.berris-lightbox__prev { left: 20px;  top: 50%; transform: translateY(-50%); }
.berris-lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }
.berris-lightbox__prev:hover,
.berris-lightbox__next:hover { transform: translateY(-50%) scale(1.08); }

/* Navigation unten zentriert */
.berris-lightbox--nav-bottom .berris-lightbox__prev,
.berris-lightbox--nav-bottom .berris-lightbox__next {
    top: auto;
    bottom: 24px;
    transform: none;
}
.berris-lightbox--nav-bottom .berris-lightbox__prev { left: calc(50% - var(--bc-lb-size, 48px) - 8px); }
.berris-lightbox--nav-bottom .berris-lightbox__next { right: calc(50% - var(--bc-lb-size, 48px) - 8px); }
.berris-lightbox--nav-bottom .berris-lightbox__prev:hover,
.berris-lightbox--nav-bottom .berris-lightbox__next:hover { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
    .berris-lightbox { transition: none; }
}