/* ============== Eigene Lightbox Retro ======== */

/* Thumbnails */

.crime-img {
cursor: pointer;
max-width: 100%;
transition: 0.9s ease;
}

.crime-img:hover {
filter: sepia(100%) contrast(120%);
}

/* Lightbox Basis */
#lightbox {
display: none;
position: fixed;
z-index: 9999;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
background: rgba(10,10,10,0.0); 
transition: opacity 0.9s ease, background 0.9s ease;
}

#lightbox {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Aktiv (Einblenden) */
#lightbox.active {
opacity: 1;
pointer-events: auto;
background: rgb(0, 0, 0,1.0);
}

/* Bild */
#lightbox-img {
display: block;
max-width: 95%;
max-height: 95%;
transform: scale(1); /* zuvor 0.85 */
opacity: 0;
transition: transform 0.9s ease, opacity 0.9s ease;

}

/* Aktiv → Zoom rein */
#lightbox.active #lightbox-img {
transform: scale(1);
opacity: 1;
}

/* Close Button */
#lightbox-close {
position: absolute;
top: 20px;
right: 30px;
font-size: 40px;
color: #cfc6a4;
cursor: pointer;
opacity: 0;
transition: opacity 0.9s ease;
}

#lightbox.active #lightbox-close {
opacity: 1;
}

/* Caption */
#lightbox-caption {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);

  color: #cfc6a4;
  font-family: "Courier New", monospace;
  font-size: 16px;

  text-align: center;
  max-width: 80%;
}

/* Vignette Effekt */
#lightbox::after {
content: "";
position: absolute;
inset: 0;
/* box-shadow: inset 0 0 400px rgba(0,0,0,0.9); */
pointer-events: none;
}

/* Closing Zustand */
#lightbox.closing {
opacity: 0;
/*background: rgba(10,10,10,0.0);*/
}

/* Bild fährt zurück */
#lightbox.closing #lightbox-img {
transform: scale(0.9);
opacity: 0;
}

/* Close Button verschwindet */
#lightbox.closing #lightbox-close {
opacity: 0;
}

/* Vignette direkt auf dem Bild */
.lightbox-inner::after {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0.9) 100%
  );

  pointer-events: none;
  transition: opacity 0.9s ease;
}

.lightbox-inner {
  position: relative;
  display: block;
  align-items: center;
  justify-content: center;

  max-width: 90%;
  max-height: 90%;
  margin: auto;
}

#lightbox-img {
  display: block;

  max-width: 100%;
  max-height: 90vh;

  width: auto;
  height: auto;

  margin: auto;
}
/* ================= MOBILE OPTIMIERUNG ================= */

@media (max-width: 768px) {
  .crime-img {
    max-width: 100%;
    margin-bottom: 20px;
  }

  .crime-img {
    cursor: default;
  }
}

.lightbox-inner {
  position: relative;
  display: inline-block;
}