/* ==========================================================================
   Richtung A · Foto-Lightbox (lightbox.js)
   Fotos mit großer Version bekommen einen Lupen-Knopf und öffnen sich groß auf warmem, abgedunkeltem Grund.
   ========================================================================== */

/* Auslöser im Foto */
img[data-full] { cursor: zoom-in; }
.lb-zoom {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: zoom-in;
  background: rgba(255, 255, 255, .9); color: var(--ink);
  box-shadow: 0 8px 20px -10px rgba(35, 29, 26, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), background .2s;
}
.lb-zoom .ico { width: 20px; height: 20px; }
.lb-zoom:hover { background: #FFFFFF; }
.lb-zoom:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.member__photo .lb-zoom { right: 10px; bottom: 10px; width: 36px; height: 36px; }
@media (hover: hover) and (pointer: fine) {
  .lb-zoom { opacity: 0; transform: scale(.85); }
  .lb-host:hover .lb-zoom, .lb-zoom:focus-visible { opacity: 1; transform: none; }
}

/* Seite hinter der offenen Lightbox nicht scrollen (Breite der Bildlaufleiste ausgleichen) */
html.lb-open { overflow: hidden; }
html.lb-open body { padding-right: var(--lb-gap, 0px); }

/* Dialog */
.lb {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 64px 16px 20px; border: 0; background: transparent; color: #FFFFFF;
  overflow: hidden; overscroll-behavior: contain;
}
.lb[open] { display: grid; place-items: center; }
.lb::backdrop { background: rgba(30, 23, 19, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lb__fig { margin: 0; display: grid; justify-items: center; gap: 14px; max-width: 100%; }
.lb__img {
  display: block; width: auto; height: auto;
  max-width: min(100%, 1680px); max-height: calc(100dvh - 150px);
  border-radius: var(--r-img); background: var(--night);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .75);
  user-select: none; -webkit-user-drag: none;
}
.lb__cap { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 14px; max-width: 72ch; padding-inline: 8px; text-align: center; font-size: .9375rem; line-height: 1.45; color: rgba(255, 255, 255, .86); }
.lb__count { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .58); }
.lb__count:empty { display: none; }

.lb__btn {
  position: absolute; z-index: 2; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #FFFFFF;
  background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .2s;
}
.lb__btn .ico { width: 24px; height: 24px; }
.lb__btn:hover { background: rgba(255, 255, 255, .24); }
.lb__btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.lb__close { top: 12px; right: 12px; }
.lb__prev, .lb__next { top: 50%; translate: 0 -50%; }
.lb__prev { left: 12px; }
.lb__next { right: 12px; }
.lb__prev .ico { rotate: 90deg; }
.lb__next .ico { rotate: -90deg; }
.lb.is-single .lb__prev, .lb.is-single .lb__next { display: none; }
@media (min-width: 900px) {
  .lb { padding: 72px 96px 28px; }
  .lb__close { top: 20px; right: 24px; }
  .lb__prev { left: 24px; }
  .lb__next { right: 24px; }
}
/* Schmal: Pfeile unten neben der Bildunterschrift statt über dem Bild */
@media (max-width: 759px) {
  .lb { padding-bottom: 76px; }
  .lb__prev, .lb__next { top: auto; bottom: 14px; translate: none; }
  .lb__prev { left: calc(50% - 60px); }
  .lb__next { right: calc(50% - 60px); }
}

/* Ein- und Ausblenden */
.lb[open] .lb__fig { animation: lb-in .38s var(--ease); }
.lb[open]::backdrop { animation: lb-fade .3s ease-out; }
.lb.is-closing .lb__fig { opacity: 0; transform: scale(.97); transition: opacity .18s ease-in, transform .18s ease-in; }
.lb.is-closing::backdrop { opacity: 0; transition: opacity .18s ease-in; }
.lb.is-closing .lb__btn { opacity: 0; transition: opacity .12s; }
@keyframes lb-in { from { opacity: 0; transform: scale(.96); } }
@keyframes lb-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .lb[open] .lb__fig, .lb[open]::backdrop { animation: none; }
  .lb-zoom { transition: none; }
}
html.reduce-motion .lb[open] .lb__fig, html.reduce-motion .lb[open]::backdrop { animation: none; }