/* Lightbox: Fotos aus dem Inhalt groß ansehen. Gehört zu assets/js/lightbox.js.
   Das Fenster baut das Skript selbst (natives <dialog>). Animiert werden nur transform und opacity. */

/* ---------- Auslöser im Seiteninhalt ---------- */
main img[data-lb] { cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
main img[data-lb]:focus { outline: none; }
main img[data-lb]:focus-visible { outline: 3px solid var(--focus, #0b57d0); outline-offset: 3px; }
/* in angeschnittenen Behältern (overflow) liegt der Ring innen, sonst wird er abgeschnitten */
.rail img[data-lb]:focus-visible, .lessons img[data-lb]:focus-visible, .stage img[data-lb]:focus-visible,
.photo img[data-lb]:focus-visible, [data-gallery] img[data-lb]:focus-visible { outline-offset: -3px; }

/* ---------- Seite darunter feststellen ---------- */
html.lb-open { overflow: hidden; }

/* ---------- Fenster ---------- */
.lb {
  --u: 1vh;
  --lb-foot: 84px;   /* Platz unten: Bildunterschrift, Zähler, Knöpfe */
  --lb-pad: 12px;    /* Platz oben */
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(10, 10, 12, .92);   /* bewusst ohne backdrop-filter: ruckelt am iPhone */
  color: #fff; font-family: inherit; overflow: hidden; overscroll-behavior: contain;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
@supports (height: 100dvh) { .lb { height: 100dvh; } }
@supports (height: 1svh) { .lb { --u: 1svh; } }
.lb { --lb-h: min(calc(84 * var(--u)), calc(100 * var(--u) - var(--lb-foot) - var(--lb-pad))); }
@media (min-width: 900px) { .lb { --lb-foot: 76px; } }
@media (max-height: 480px) { .lb { --lb-foot: 64px; --lb-pad: 8px; } }
.lb::backdrop { background: transparent; }

.lb[open] { animation: lb-fade 220ms var(--ease-out, cubic-bezier(.16, 1, .3, 1)) backwards; }
.lb[open] .lb__stage { animation: lb-zoom 220ms var(--ease-out, cubic-bezier(.16, 1, .3, 1)) backwards; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lb-zoom { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.lb.is-out { transition: opacity 140ms linear; }
.lb.is-settle { transition: opacity 180ms linear; }

.lb__stage { position: absolute; inset: 0; }
.lb__track { position: absolute; inset: 0; will-change: transform; }
.lb__track.is-glide { transition: transform 180ms var(--ease-out, cubic-bezier(.16, 1, .3, 1)); }
.lb__track.is-fade { transition: opacity 120ms linear; }

.lb__slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--lb-pad) 0 var(--lb-foot); }
.lb__slide.is-empty { visibility: hidden; }

/* Rahmen in Bildgröße: steht schon vor dem Laden, darum kein Springen */
.lb__frame {
  --ar: .75;
  position: relative; flex: none; width: min(92vw, calc(var(--lb-h) * var(--ar))); aspect-ratio: var(--ar);
  border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .06) center / 100% 100% no-repeat;
}
.lb__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 120ms linear; -webkit-user-drag: none; }
.lb__slide.is-ready .lb__img { opacity: 1; }

.lb__spin {
  position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .22); border-top-color: rgba(255, 255, 255, .9);
  opacity: 0; pointer-events: none; transition: opacity 120ms linear;
}
.lb__slide.is-loading .lb__spin { opacity: 1; transition-delay: 250ms; animation: lb-spin .8s linear infinite; }  /* erst nach 250 ms sichtbar, kein Flackern bei schnellen Bildern */
@keyframes lb-spin { to { transform: rotate(360deg); } }

/* ---------- Unterzeile ---------- */
.lb__foot {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;
  padding: 0 76px max(14px, env(safe-area-inset-bottom)); text-align: center; pointer-events: none;
}
.lb__cap {
  margin: 0; max-width: min(640px, 100%); font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .94);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.lb__count { margin: 0; font-size: 13px; line-height: 1.2; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .82); font-variant-numeric: tabular-nums; }
.lb__cap[hidden], .lb__count[hidden] { display: none; }
@media (min-width: 900px) { .lb__foot { padding-inline: 24px; } }

/* ---------- Knöpfe: weiß auf dunkel, 48 px, Kontrast >= 7:1 ---------- */
.lb__btn {
  position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; min-width: 44px; min-height: 44px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .24); border-radius: 50%; background: rgba(32, 32, 36, .82); color: #fff; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-press, 120ms) var(--ease, cubic-bezier(.22, .7, .2, 1)), background-color 160ms linear;
}
.lb__btn svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .lb__btn:hover { background: rgba(74, 74, 82, .94); } }
.lb__btn:active { transform: scale(.96); }
.lb__btn:focus { outline: none; }
.lb__btn:focus-visible { outline: 3px solid var(--focus, #0b57d0); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
.lb__btn[hidden] { display: none; }
.lb__close { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
/* Handy: Pfeile unten links und rechts, neben der Unterzeile (Daumenreichweite) */
.lb__prev, .lb__next { bottom: max(16px, env(safe-area-inset-bottom)); }
.lb__prev { left: max(12px, env(safe-area-inset-left)); }
.lb__next { right: max(12px, env(safe-area-inset-right)); }
/* Rechner: Pfeile mittig an den Rändern */
@media (min-width: 900px) {
  .lb__prev, .lb__next { top: 0; bottom: 0; height: 48px; margin-block: auto; }
  .lb__prev { left: 20px; }
  .lb__next { right: 20px; }
  .lb__close { top: 20px; right: 20px; }
}
@media (max-height: 480px) and (max-width: 899px) { .lb__prev, .lb__next { bottom: 8px; } }

/* ---------- Bewegung reduzieren: nur Überblenden (120 ms), kein Gleiten, kein Skalieren ----------
   Die globale Regel in site.css setzt alle Zeiten auf .001ms; hier gezielt zurück auf 120 ms. */
@media (prefers-reduced-motion: reduce) {
  .lb[open] { animation: lb-fade 120ms linear backwards !important; }
  .lb[open] .lb__stage { animation: lb-fade 120ms linear backwards !important; }
  .lb.is-out, .lb.is-settle { transition: opacity 120ms linear !important; }
  .lb .lb__track.is-fade { transition: opacity 120ms linear !important; }
  .lb .lb__track.is-glide { transition: none !important; }
  .lb .lb__img { transition: opacity 120ms linear !important; }
  .lb .lb__spin { animation: none !important; }
}
@media (forced-colors: active) {
  .lb { background: Canvas; color: CanvasText; }
  .lb__btn { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
}