/* DEPLA lightbox (native dialog). Contract: docs/build/komponenten.md
   Reference: docs/referenz/messestaende/lightbox-offen.png */
html.has-lightbox { overflow: hidden; }
.c-lightbox {
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-white);
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}
@supports (height: 100dvh) { .c-lightbox { height: 100dvh; } }
.c-lightbox::backdrop { background: var(--color-overlay); }
.c-lightbox[open] { display: grid; place-items: center; animation: c-lightbox-in var(--ease-base); }
.c-lightbox__figure {
  display: grid;
  place-content: center;
  justify-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 44px 0 8px; /* room for the close button above the image */
}
.c-lightbox__stage { position: relative; display: grid; place-items: center; max-width: 95vw; }
.c-lightbox__img {
  display: block;
  max-width: 95vw;
  max-height: calc(100vh - 92px);
  width: auto;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity var(--ease-base);
}
.c-lightbox.is-loading .c-lightbox__img { opacity: 0; }
.c-lightbox__nav,
.c-lightbox__close {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: opacity var(--ease-base);
}
.c-lightbox__nav {
  top: 50%;
  width: 50px;
  height: 65px;
  transform: translateY(-50%);
  background: var(--color-white-90);
  color: var(--color-heading);
}
.c-lightbox__nav--prev { left: 0; }
.c-lightbox__nav--next { right: 0; }
.c-lightbox__nav:hover { opacity: var(--hover-opacity); }
.c-lightbox__nav svg { width: 30px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.c-lightbox.is-single .c-lightbox__nav { display: none; }
.c-lightbox__close {
  bottom: 100%;
  right: 0;
  width: 36px;
  height: 36px;
  background: none;
  color: var(--color-white);
}
.c-lightbox__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.c-lightbox__close:hover { opacity: var(--hover-opacity); }
.c-lightbox button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.c-lightbox__caption {
  max-width: 95vw;
  min-height: 1.5em;
  margin-top: .5rem;
  font: var(--fw-light) var(--fs-small) / 1.5 var(--font-body);
  text-align: center;
  color: var(--color-on-dark-strong);
}
.c-lightbox__count:empty { display: none; }
.c-lightbox__count { opacity: .7; }
@media (max-width: 767px) {
  .c-lightbox__nav { width: 40px; height: 52px; }
}
@keyframes c-lightbox-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .c-lightbox[open] { animation: none; }
  .c-lightbox__img { transition: none; }
}