/*
 * Umfulana – moderne, helle Lightbox.
 * Überschreibt das dunkle LightGallery-Default (schwarzer Backdrop, weiße
 * Controls). Wird in app.css NACH lightgallery.css importiert, damit die
 * Regeln bei gleicher Spezifität gewinnen. Betrifft alle Galerien.
 */

/* Heller, weicher Hintergrund statt Schwarz — Seite darf nur minimal durchscheinen.
   Die Deckkraft verlässt sich bewusst NICHT auf den Blur: Chrome/Android meldet
   backdrop-filter zwar als unterstützt (@supports true), rendert ihn aber teils
   nicht — eine blur-abhängig niedrigere Deckkraft schien dort stark durch. */
.lg-backdrop {
    background-color: rgb(250 250 249 / 0.97); /* stone-50 */
    backdrop-filter: blur(24px) saturate(1.1);
    -webkit-backdrop-filter: blur(24px) saturate(1.1);
}

/* Das Foto vom hellen Grund abheben: Rundung + weicher Schatten */
.lg-outer .lg-image {
    border-radius: 0.75rem;
    box-shadow: 0 30px 90px -25px rgb(28 25 23 / 0.45); /* stone-900 */
}
/* Am Smartphone füllt das Foto die volle Breite — eine Rundung direkt am Bildschirmrand
   wirkt dort abgeschnitten, deshalb randbündig ohne Rundung und Schatten (alfa-2663). */
@media (max-width: 767px) {
    .lg-outer .lg-image {
        border-radius: 0;
        box-shadow: none;
    }
}

/* Toolbar transparent, Icons + Zähler dunkel */
.lg-outer .lg-toolbar {
    background: transparent;
}
.lg-outer .lg-toolbar .lg-icon,
.lg-outer .lg-counter {
    color: rgb(87 83 78 / 0.9); /* stone-600 */
    text-shadow: none;
    transition: color 0.15s ease, opacity 0.15s ease;
}
.lg-outer .lg-toolbar .lg-icon:hover {
    color: #1c1917; /* stone-900 */
}

/* Navigationspfeile: helle runde Buttons mit dunklem Pfeil */
.lg-actions .lg-next,
.lg-actions .lg-prev {
    background-color: rgb(255 255 255 / 0.85);
    color: #292524; /* stone-800 */
    border-radius: 9999px;
    box-shadow: 0 4px 20px -6px rgb(28 25 23 / 0.3);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.lg-actions .lg-next:hover:not(.disabled),
.lg-actions .lg-prev:hover:not(.disabled) {
    background-color: #fff;
    color: #1c1917;
}

/* Bildunterschrift dunkel und dezent statt weiß auf schwarzem Balken */
.lg-sub-html {
    background: transparent;
    color: #44403c; /* stone-700 */
    text-shadow: 0 1px 2px rgb(255 255 255 / 0.6);
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Miniaturen-Leiste (falls je aktiviert) an den hellen Look angleichen */
.lg-outer .lg-thumb-outer {
    background-color: rgb(245 245 244 / 0.9); /* stone-100 */
}

/* Miniaturen-Leiste am Desktop (alfa-2663): aktive Miniatur grün statt lightGallery-Rot */
.lg-outer .lg-thumb-item {
    border-color: transparent;
    opacity: 0.7;
    transition: border-color 0.2s ease, opacity 0.2s ease;
}
.lg-outer .lg-thumb-item.active,
.lg-outer .lg-thumb-item:hover {
    border-color: #16a34a; /* green-600 */
    opacity: 1;
}

/*
 * Fotoliste auf dem Smartphone (alfa-2663, Plugin utils/lgPhotoList.js): Vollbild-Overlay mit
 * allen Fotos untereinander, liegt UNTER der Lightbox (lg-backdrop 1040 / lg-outer 1050), damit
 * ein Tipp auf ein Foto die Lightbox darüber öffnet und die Liste beim Schließen wieder da ist.
 */
.lg-photo-list {
    position: fixed;
    inset: 0;
    z-index: 1030;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background-color: #fafaf9; /* stone-50 */
    color: #292524; /* stone-800 */
}
.lg-photo-list[hidden] {
    display: none;
}
body.lg-photo-list-open {
    overflow: hidden;
}
.lg-photo-list__bar {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(0.5rem, env(safe-area-inset-top)) 0.75rem 0.5rem 1rem;
    background-color: rgb(250 250 249 / 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgb(28 25 23 / 0.08);
}
.lg-photo-list__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #57534e; /* stone-600 */
}
.lg-photo-list__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: #292524;
    cursor: pointer;
}
.lg-photo-list__close:hover,
.lg-photo-list__close:focus-visible {
    background-color: rgb(28 25 23 / 0.06);
    outline: none;
}
.lg-photo-list__close svg {
    width: 1.5rem;
    height: 1.5rem;
}
.lg-photo-list__items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem max(1.5rem, env(safe-area-inset-bottom));
}
.lg-photo-list__item {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: #e7e5e4; /* stone-200, Platzhalter bis das Bild da ist */
    cursor: pointer;
    scroll-margin-top: 3.75rem; /* unter der sticky Leiste landen */
}
.lg-photo-list__item:focus-visible {
    outline: 2px solid #16a34a;
    outline-offset: 2px;
}
.lg-photo-list__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lg-photo-list__item figcaption {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0.375rem;
    max-width: 85%;
    padding: 0.25rem 0.625rem;
    border-radius: 0.25rem;
    background-color: rgb(255 255 255 / 0.85);
    font-size: 0.75rem;
    line-height: 1.25;
    font-weight: 600;
    color: #44403c; /* stone-700 */
}

/*
 * Video-Slides (alfa-2663, Plugin utils/lgVideoSlide.js): der Player liegt exakt über dem
 * Poster-Bild des Slides. .lg-img-wrap hat font-size 0 / nowrap — für den Consent-Text zurücksetzen.
 */
.lg-outer .lg-video-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    overflow: hidden;
    border-radius: 0.75rem;
    background-color: #1c1917;
    font-size: 1rem;
    line-height: 1.4;
    white-space: normal;
    text-align: left;
}
@media (max-width: 767px) {
    .lg-outer .lg-video-overlay {
        border-radius: 0;
    }
}
/* Player-Container in Slide UND Fotoliste (utils/videoPlayer.js) */
.lg-video-player > iframe,
.lg-video-player > video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background-color: #000;
}
.lg-video-player .usercentrics_consent-layer {
    position: absolute;
    inset: 0;
}
.lg-photo-list__player {
    position: absolute;
    inset: 0;
    background-color: #1c1917;
}
.lg-photo-list__item--video {
    cursor: default;
}
/* Badge und Bildunterschrift dürfen die Player-Bedienung nicht verdecken */
.lg-photo-list__item--video .lg-photo-list__badge,
.lg-photo-list__item--video figcaption {
    pointer-events: none;
}
/* Zoom hat auf einem Video nichts zu suchen */
.lg-outer.lg-video-slide .lg-zoom-in,
.lg-outer.lg-video-slide .lg-zoom-out,
.lg-outer.lg-video-slide .lg-actual-size {
    display: none;
}
/* Fotoliste: Video-Einträge tragen ein Badge oben links */
.lg-photo-list__badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    background-color: rgb(220 38 38 / 0.92); /* red-600 */
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}