/* ------------------------------------------------------------------ */
/*  Lightbox-Stile (Aufgabe 3.2)                                       */
/*                                                                    */
/*  Greift automatisch für jede .photo-slot, die ein <img> enthält    */
/*  oder ein data-lightbox-src-Attribut hat. site.js erkennt das beim */
/*  Laden, vergibt die Klasse .is-lightbox und blendet das Overlay    */
/*  bei Klick ein.                                                    */
/* ------------------------------------------------------------------ */

/* Foto innerhalb eines Platzhalters füllt die Box.
   Absolute Positionierung verhindert, dass die Grid-Zentrierung
   (display:grid;place-items:center auf .photo-slot, für die
   Platzhalter-Labels) das Bild oben ausrichtet statt mittig zu croppen. */
.photo-slot img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;border-radius:inherit;
}
/* Wenn die Lightbox aktiv ist, signalisiert der Cursor das. */
.photo-slot.is-lightbox{cursor:zoom-in;}
.photo-slot.is-lightbox:focus-visible{outline:3px solid #fff;outline-offset:3px;}

/* Overlay. */
.lb-overlay{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  animation:lb-fade .18s ease;
}
.lb-overlay[hidden]{display:none;}
@keyframes lb-fade{from{opacity:0;}to{opacity:1;}}

.lb-stage{
  max-width:min(1200px,96vw);
  display:flex;flex-direction:column;align-items:center;gap:14px;
  margin:0;
}
.lb-img{
  max-width:100%;max-height:80vh;height:auto;width:auto;
  border-radius:8px;
  box-shadow:0 30px 60px -10px rgba(0,0,0,.5);
  background:#1a1a1a;
}
.lb-caption{
  color:rgba(255,255,255,.85);font-size:.95rem;text-align:center;
  font-family:'Figtree',sans-serif;
  max-width:90vw;
}
.lb-caption[hidden]{display:none;}

.lb-close,.lb-prev,.lb-next{
  position:absolute;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  width:48px;height:48px;
  border-radius:50%;
  display:grid;place-items:center;
  cursor:pointer;
  transition:background .2s,transform .15s;
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.22);}
.lb-close:active,.lb-prev:active,.lb-next:active{transform:scale(.94);}
.lb-prev:active{transform:translateY(-50%) scale(.94);}
.lb-next:active{transform:translateY(-50%) scale(.94);}
.lb-close{top:20px;right:20px;}
.lb-prev{left:20px;top:50%;transform:translateY(-50%);}
.lb-next{right:20px;top:50%;transform:translateY(-50%);}

.lb-counter{
  position:absolute;top:24px;left:50%;transform:translateX(-50%);
  font-size:.85rem;color:rgba(255,255,255,.7);letter-spacing:.06em;
  font-family:'Figtree',sans-serif;
  font-variant-numeric:tabular-nums;
}
.lb-counter[hidden]{display:none;}

@media(max-width:600px){
  .lb-close{top:12px;right:12px;width:42px;height:42px;}
  .lb-prev,.lb-next{width:42px;height:42px;}
  .lb-prev{left:8px;}
  .lb-next{right:8px;}
  .lb-img{max-height:72vh;}
  .lb-counter{top:18px;}
}