/*!
 * VN Lightbox 5.12 - niederastroth.de
 */

/* ------------------------------------------------- Lupensymbol auf dem Bild */

/* Erfasste Bilder auf der Seite. Bewusst als eigene Regel, damit sich der
   Mauszeiger im eigenen CSS überschreiben lässt. */
.vn-zoom-aktiv {
    cursor: zoom-in;
}

/* Dunkler Kreis mit heller Lupe, mittig im Bild - ohne das Bild
   abzudunkeln, wie in der Mobirise-Galerie. */
.vn-zoom-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    color: #fff;
    background: rgba(24, 26, 30, .72);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.82);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s cubic-bezier(.2, .8, .3, 1);
}

.vn-zoom-badge svg {
    width: 24px;
    height: 24px;
}

.vn-zoom-host:hover .vn-zoom-badge,
.vn-zoom-host:focus-within .vn-zoom-badge {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Ohne Mauszeiger gibt es kein Überfahren - dort dauerhaft, etwas dezenter. */
@media (hover: none) {
    .vn-zoom-badge {
        width: 46px;
        height: 46px;
        opacity: .82;
        transform: translate(-50%, -50%) scale(1);
    }

    .vn-zoom-badge svg {
        width: 21px;
        height: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vn-zoom-badge {
        transition: none;
    }
}

/* --------------------------------------------------------- Scrollsperre */

body.vn-lb-lock {
    overflow: hidden !important;
    overscroll-behavior: none;
}

html:has(body.vn-lb-lock) {
    overflow: hidden;
}

/* --------------------------------------------------------------- Overlay */

.vn-lb {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: none;
    background: rgba(8, 9, 12, var(--vn-lb-opacity, .94));
    -webkit-user-select: none;
    user-select: none;
    opacity: 0;
    transition: opacity .22s ease;
}

.vn-lb.is-open {
    display: block;
    opacity: 1;
    animation: vn-lb-in .22s ease;
}

@keyframes vn-lb-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.vn-lb-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: zoom-in;
    touch-action: none;
}

.vn-lb.is-zoomed .vn-lb-stage {
    cursor: grab;
}

.vn-lb.is-zoomed .vn-lb-stage:active {
    cursor: grabbing;
}

.vn-lb-img {
    display: block;
    max-width: none;
    transform-origin: center center;
    will-change: transform;
    -webkit-user-drag: none;
    user-select: none;
    opacity: 1;
    transition: opacity .18s ease;
}

.vn-lb-img.is-swapping,
.vn-lb.is-loading .vn-lb-img {
    opacity: 0;
}

/* ---------------------------------------------------------- Bedienelemente */

.vn-lb-btn {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .18s ease, transform .18s ease;
}

.vn-lb-btn:hover,
.vn-lb-btn:focus-visible {
    background: rgba(255, 255, 255, .22);
    outline: none;
}

.vn-lb-btn:active {
    transform: scale(.92);
}

.vn-lb-btn svg {
    width: 22px;
    height: 22px;
}

.vn-lb-close {
    top: 18px;
    right: 18px;
}

.vn-lb-prev {
    top: 50%;
    left: 18px;
    margin-top: -23px;
}

.vn-lb-next {
    top: 50%;
    right: 18px;
    margin-top: -23px;
}

/* ------------------------------------------------------- Leiste unten */

.vn-lb-bar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    padding: 18px 70px calc(18px + env(safe-area-inset-bottom));
    color: var(--vn-lb-caption-color, rgba(255, 255, 255, .92));
    text-align: center;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
}

.vn-lb-counter {
    font-size: var(--vn-lb-counter-size, 13px);
    letter-spacing: .08em;
    opacity: .7;
}

.vn-lb-caption {
    max-width: 720px;
    font-size: var(--vn-lb-caption-size, 15px);
    line-height: 1.45;
}

.vn-lb-counter:empty,
.vn-lb-caption:empty {
    display: none;
}

/* ---------------------------------------------------------- Ladeanzeige */

.vn-lb-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 3px solid rgba(255, 255, 255, .18);
    border-top-color: rgba(255, 255, 255, .85);
    border-radius: 50%;
    opacity: 0;
    transition: opacity .2s ease;
}

.vn-lb.is-loading .vn-lb-spinner {
    opacity: 1;
    animation: vn-lb-spin .7s linear infinite;
}

@keyframes vn-lb-spin {
    to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------- Mobil */

@media (max-width: 767px) {
    .vn-lb-btn {
        width: 42px;
        height: 42px;
    }

    .vn-lb-close {
        top: calc(12px + env(safe-area-inset-top));
        right: 12px;
    }

    .vn-lb-prev { left: 8px; }
    .vn-lb-next { right: 8px; }

    .vn-lb-bar {
        padding: 14px 56px calc(14px + env(safe-area-inset-bottom));
    }

}

@media (prefers-reduced-motion: reduce) {
    .vn-lb,
    .vn-lb-img,
    .vn-lb-btn {
        transition: none;
    }
}