/* -------------------------
   Moderne Lightbox
-------------------------- */

#lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}

#lightbox.open{
  opacity:1;
  pointer-events:auto;
}

/* dunkler Hintergrund */
.lb-overlay{
  position:absolute;
  inset:0;
  background:rgba(129, 129, 129, 0.6);
}

/* Container */
.lb-shell{
  position:relative;
  z-index:1;
  /* max-width:min(1000px, 100vw - 32px); */
  max-height:calc(100vh - 40px);
  margin:auto;
  background:rgba(90, 90, 90, 0.6);
  color:#f5f5f5;
  border: 10px solid white;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Close-Button */
.lb-close{
  position:absolute;
  top:8px;
  right:2%;
  border:none;
  background:transparent;
  color:#fff;
  font-size:1.8rem;
  line-height:1;
  cursor:pointer;
  padding:0.1rem 0.4rem;
  z-index:3;
}

/* Bühne mit Bild und Pfeilen */
.lb-stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}

/* Bild + Caption */
.lb-figure{
  margin:0;
  max-width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.5rem;
}

.lb-figure img{
  max-width:100%;
  max-height:calc(100vh - 140px);
  height:auto;
  display:block;
  
}

#lb-caption{
    position: absolute;
    top: 90%;
    /* font-size:0.85rem; */
    color:#fff;
    background: rgba(90, 90, 90, 0.6);
    padding: 5px 10px;
    border-radius: 5px;

    text-align:center;
}

    .lb-arrow--right{
        position:absolute;
        right:2%;
    }
    .lb-arrow--left{
        position:absolute;
        left:2%;
    }

/* kleine Pfeil-Buttons */
.lb-arrow{
  border:none;
  background:transparent;
  color:#fff;
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  cursor:pointer;
  z-index:3;
  transition:background .15s ease, transform .15s ease;
}

    .lb-arrow:hover{
        background:rgba(255,255,255,0.2);
        transform:translateY(-1px);
    }

/* unsichtbare Klickbereiche links/rechts */
    .lb-hit{
        position:absolute;
        top:0;
        bottom:0;
        width:50%;
        border:none;
        background:transparent;
        padding:0;
        cursor:pointer;
        z-index:2;
    }

    .lb-hit--left{ left:0; }
    .lb-hit--right{ right:0; }

/* Mobile etwas kompakter */
@media (max-width: 899px){
  .lb-shell{
    max-width:calc(100vw - 16px);
  }
    .lb-close{
        top:0px;
        right:2%;
    }
    .lb-arrow{
        width:32px;
        height:32px;
        font-size:1.3rem;
    }
}

/* ≥900px: Bild größer */
@media (min-width: 900px){
    .lb-figure img{
    max-height:calc(100vh - 120px);
    }
}