/* =========================================================================
   ALBA FOR ANIMALS - Lightbox in den Farben des Entwurfs (23.10.2026)
   -------------------------------------------------------------------------
   GLightbox + content-lightbox.css kommen aus qn_masonry_gallery und
   bringen eigene Farben mit (Weinrot, Gruen beim Diashow-Knopf). Diese
   Datei wird von Partials/Media/Vergroesserung.html NACH
   content-lightbox.css per f:asset.css geladen - nur auf Seiten mit
   vergroesserbaren Bildern.

   Bewusst OHNE @layer: Die Bibliotheks-Stile sind ungeschichtet; eine
   Regel in qn.theme wuerde gegen sie immer verlieren. !important nur dort,
   wo content-lightbox.css selbst !important setzt (Abdunkelung,
   Diashow-Knopf).

   Die Farben kommen aus alba-grund.css (--alba-*). Variablen wirken auch
   ausserhalb der Ebene; der zweite Wert ist nur der Rueckfall.
   ========================================================================= */

/* Abdunkelung: warmes Dunkelbraun statt Schwarz */
.goverlay {
  background: rgba(44, 33, 24, .94) !important;   /* --alba-dunkel-2 */
}

/* Vor / Zurueck / Schliessen: dunkle Kachel, Bernstein-Kante */
.glightbox-clean .gnext,
.glightbox-clean .gprev,
.glightbox-clean .gclose {
  background-color: rgba(58, 44, 32, .9);          /* --alba-dunkel */
  border: 1px solid rgba(235, 187, 113, .6);       /* --alba-bernstein-hell */
}
/* Beim Ueberfahren Bernstein - Pfeil dann dunkel, weiss waere auf
   Bernstein kaum lesbar (Kontrast 2,2 : 1) */
.glightbox-clean .gnext:hover,
.glightbox-clean .gprev:hover,
.glightbox-clean .gclose:hover {
  background-color: var(--alba-bernstein, #E29B2E);
}
.glightbox-clean .gnext:hover path,
.glightbox-clean .gprev:hover path,
.glightbox-clean .gclose:hover path {
  fill: var(--alba-dunkel-2, #2C2118);
}
.glightbox-clean .gnext:focus-visible,
.glightbox-clean .gprev:focus-visible,
.glightbox-clean .gclose:focus-visible {
  outline: 2px solid var(--alba-bernstein-hell, #EBBB71);
  outline-offset: 3px;
}

/* Diashow-Knopf (setzt content-lightbox.js ein) */
.qn-glightbox-slideshow-btn {
  background-color: rgba(58, 44, 32, .92) !important;
  border: 1px solid rgba(235, 187, 113, .6) !important;
}
.qn-glightbox-slideshow-btn:hover {
  background-color: var(--alba-bernstein, #E29B2E) !important;
  color: var(--alba-dunkel-2, #2C2118) !important;
}
.qn-glightbox-slideshow-btn:focus {
  outline: 2px solid var(--alba-bernstein-hell, #EBBB71) !important;
}
/* Laeuft die Diashow: Bernstein statt Gruen, ruhiges Pulsieren */
.qn-glightbox-slideshow-btn.qn-playing {
  background-color: var(--alba-bernstein, #E29B2E) !important;
  color: var(--alba-dunkel-2, #2C2118) !important;
  animation: alba-diashow 1.8s ease-in-out infinite !important;
}
.qn-glightbox-slideshow-btn.qn-playing:hover {
  background-color: var(--alba-bernstein-2, #C78828) !important;
}
@keyframes alba-diashow {
  0%, 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, .3), 0 0 0 0 rgba(226, 155, 46, .45); }
  50%      { box-shadow: 0 2px 8px rgba(0, 0, 0, .3), 0 0 0 8px rgba(226, 155, 46, 0); }
}

/* Bildtext unter dem Bild: Papier und die Schriften der Seite.
   Am Telefon legt GLightbox den Text mit Verlauf UEBER das Bild
   (.glightbox-mobile ..., hoehere Spezifitaet) - das bleibt so, nur der
   Verlauf laeuft in Dunkelbraun statt Schwarz aus (Regel weiter unten). */
.glightbox-clean .gslide-description {
  background: var(--alba-papier, #FFFBF4);
}
.glightbox-clean .gslide-title {
  font-family: var(--alba-anzeige, Georgia, serif);
  font-weight: 600;
  color: var(--alba-tinte, #2B2620);
  margin-bottom: 0;
}
.glightbox-clean .gslide-desc {
  font-family: var(--alba-text, system-ui, sans-serif);
  color: var(--alba-umbra, #6B4F36);
}

.glightbox-mobile .glightbox-container .gslide-description {
  background: linear-gradient(to bottom, rgba(44, 33, 24, 0) 0, rgba(44, 33, 24, .85) 100%);
}
.glightbox-mobile .glightbox-container .gslide-title {
  font-family: var(--alba-anzeige, Georgia, serif);
}

/* Bilder im Inhalt nicht beim Ueberfahren vergroessern - das Raster soll
   ruhig stehen. Zeiger (zoom-in) und eine feine Kante zeigen genug. */
.frame a.glightbox:hover img {
  transform: none;
  opacity: 1;
  outline: 2px solid var(--alba-bernstein, #E29B2E);
  outline-offset: 3px;
}

/* Weniger Bewegung gewuenscht: Oeffnen/Blaettern ohne Animation.
   Dauer statt "none" - GLightbox wartet auf animationend. */
@media (prefers-reduced-motion: reduce) {
  .goverlay,
  .glightbox-container .gslide,
  .glightbox-container .gslide * {
    animation-duration: .01ms !important;
  }
  .qn-glightbox-slideshow-btn.qn-playing {
    animation: none !important;
  }
}