/* ── Lightbox (geteilt) ──
   Genutzt von galerie.html, freiwilligenarbeit.html und projekt.html via js/lightbox.js. */
:root { --g-gold: #fdc425; --g-ink: #0d1c2f; }
.g-ico { display: block; flex: none; }

/* ── Lightbox ── */
.g-lb { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: rgba(8, 15, 25, 0.96); padding: 4.5rem 1rem 1.5rem; }
.g-lb[hidden] { display: none; }
.g-lb__fig { margin: 0; max-width: min(92vw, 72rem); display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.g-lb__fig img { max-width: 100%; max-height: calc(100svh - 11rem); width: auto; height: auto; border-radius: 6px; object-fit: contain; background: #111c2a; }
.g-lb__cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.25rem 1rem; text-align: center; color: #fff; }
.g-lb__title { font-size: 1.0625rem; font-weight: 600; }
.g-lb__counter { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); }
.g-lb__btn {
  position: absolute; z-index: 2; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08); color: #fff; transition: background-color 0.2s, color 0.2s;
}
.g-lb__btn:hover { background: #fff; color: var(--g-ink); }
.g-lb__btn:focus-visible { outline: 3px solid var(--g-gold); outline-offset: 3px; }
.g-lb__close { top: 1rem; right: 1rem; }
.g-lb__prev { left: 1rem; top: 50%; translate: 0 -50%; }
.g-lb__next { right: 1rem; top: 50%; translate: 0 -50%; }
@media (max-width: 640px) {
  .g-lb { padding-inline: 0.5rem; }
  .g-lb__prev, .g-lb__next { top: auto; bottom: 1rem; translate: none; }
  .g-lb__prev { left: calc(50% - 3.5rem); }
  .g-lb__next { right: calc(50% - 3.5rem); }
  .g-lb__fig img { max-height: calc(100svh - 15rem); }
  .g-lb__fig { margin-bottom: 3.5rem; }
}