/* Lightbox fuer Artikelbilder (js/site.js). Wird in beiden Designs geladen. */
.lightbox-trigger { cursor: zoom-in; }
.lightbox-trigger:focus-visible { outline: 3px solid #ff008c; outline-offset: 2px; }
.lightbox {
  width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
  margin: 0; padding: 0; border: 0;
  background: rgba(10, 12, 14, .94); color: #fff;
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(0, 0, 0, .3); }
.lightbox[open] { display: grid; place-items: center; animation: lightbox-in .2s ease; }
.lightbox-figure {
  position: static; margin: 0; padding: 56px 56px 16px;
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.lightbox-img {
  max-width: 100%; max-height: calc(100vh - 112px);
  width: auto; height: auto; object-fit: contain;
  border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  transition: opacity .2s;
  cursor: default;
}
.lightbox.is-loading .lightbox-img { opacity: .35; }
.lightbox-caption {
  position: static; display: block; opacity: 1;
  max-width: 960px; padding: 0; background: none; box-shadow: none;
  color: #eee; font-size: 15px; font-style: italic; text-align: center;
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; display: grid; place-items: center;
  width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff;
  font: 400 32px/1 system-ui, sans-serif; cursor: pointer;
  transition: background-color .15s;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover,
.lightbox-close:focus-visible, .lightbox-prev:focus-visible, .lightbox-next:focus-visible {
  background: #ff008c; outline: 0;
}
.lightbox-close { top: 12px; right: 12px; }
.lightbox-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lightbox.is-single .lightbox-prev, .lightbox.is-single .lightbox-next { display: none; }
@media (max-width: 600px) {
  .lightbox-figure { padding: 56px 8px 16px; }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 12px; transform: none; }
}
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lightbox[open] { animation: none; } }