/*
 * 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 */
}

/* 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 */
}