/* === Overlay: beide Varianten unterstützen (#lightbox-overlay UND #lb-overlay) === */
#lightbox-overlay,
#lb-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 16px;
}

/* sichtbar schalten (.open für lightbox-overlay, .active für lb-overlay) */
#lightbox-overlay.open,
#lb-overlay.active{
  display: flex;
}

/* Bild IMMER mittig & groß einpassen */
#lightbox-overlay img,
#lb-overlay img{
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(0,0,0,.8);
}

/* Buttons (falls vorhanden) */
#lightbox-close,
#lightbox-prev,
#lightbox-next{
  position: fixed;
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  padding: 10px 14px;
  font: 600 18px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  cursor: pointer;
  border-radius: 10px;
  backdrop-filter: blur(4px);
}

#lightbox-close{ top: 20px; right: 20px; }
#lightbox-prev { top: 50%; left: 20px;  transform: translateY(-50%); }
#lightbox-next { top: 50%; right: 20px; transform: translateY(-50%); }

@media (max-width: 640px){
  #lightbox-prev, #lightbox-next{
    top: auto; bottom: 20px; transform: none;
  }
}