@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  #photo-area .pgrid,
  #photo-area .pgrid.pgrid-zoom-saved {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  #photo-area .pitem,
  #photo-area .pgrid.pgrid-zoom-saved .pitem,
  #photo-area .pitem.is-portrait,
  #photo-area .pgrid.pgrid-zoom-saved .pitem.is-portrait,
  #photo-area .pitem.is-square,
  #photo-area .pgrid.pgrid-zoom-saved .pitem.is-square {
    grid-column: auto !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(5, 10, 19, .32) !important;
    box-shadow: none !important;
  }

  #photo-area .pitem::after,
  #photo-area .pgrid.pgrid-zoom-saved .pitem::after {
    display: block !important;
    height: 46px !important;
    background: linear-gradient(
      180deg,
      rgba(5, 10, 19, 0) 0%,
      rgba(5, 10, 19, .18) 58%,
      rgba(5, 10, 19, .34) 100%
    ) !important;
  }

  #photo-area .pitem .pthumb,
  #photo-area .pgrid.pgrid-zoom-saved .pthumb,
  #photo-area .pitem.is-portrait .pthumb,
  #photo-area .pgrid.pgrid-zoom-saved .pitem.is-portrait .pthumb,
  #photo-area .pitem.is-square .pthumb,
  #photo-area .pgrid.pgrid-zoom-saved .pitem.is-square .pthumb {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: var(--photo-aspect-ratio, 4 / 3) !important;
    object-fit: contain !important;
    background: #050a13 !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  #photo-area .pitem .pfoot,
  #photo-area .pgrid.pgrid-zoom-saved .pitem .pfoot {
    position: absolute;
    inset: 0;
    z-index: 4;
    min-height: 0;
    padding: 0;
    pointer-events: none;
    background: transparent;
  }

  #photo-area .pitem .pnum,
  #photo-area .pgrid.pgrid-zoom-saved .pitem .pnum {
    position: absolute;
    left: .48rem;
    bottom: .48rem;
    min-width: 1.72rem;
    height: 1.72rem;
    padding: 0 .5rem;
    pointer-events: auto;
    background: rgba(8, 13, 24, .66) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    color: #fff !important;
    font-size: .76rem !important;
    backdrop-filter: blur(7px);
  }

  #photo-area .pitem .pfoot .pactions,
  #photo-area .pgrid.pgrid-zoom-saved .pitem .pfoot .pactions {
    position: absolute;
    top: .44rem;
    right: .44rem;
    display: inline-flex;
    align-items: center;
    gap: .12rem;
    margin: 0;
    padding: .14rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(8, 13, 24, .46);
    box-shadow: none;
    backdrop-filter: blur(8px);
    pointer-events: auto;
  }

  #photo-area .pitem .pfoot .pact-ic,
  #photo-area .pgrid.pgrid-zoom-saved .pitem .pfoot .pact-ic {
    width: 1.68rem;
    height: 1.68rem;
    border-radius: 999px;
    background: transparent !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: none;
    backdrop-filter: none;
  }

  #photo-area .pitem .pfoot .pact-ic:hover,
  #photo-area .pgrid.pgrid-zoom-saved .pitem .pfoot .pact-ic:hover {
    background: rgba(255, 255, 255, .16) !important;
  }

  #photo-area .pitem .pfoot .pact-del:hover,
  #photo-area .pgrid.pgrid-zoom-saved .pitem .pfoot .pact-del:hover {
    background: rgba(214, 60, 78, .88) !important;
  }

  #photo-area .pitem .pfoot .pact-ic svg,
  #photo-area .pgrid.pgrid-zoom-saved .pitem .pfoot .pact-ic svg {
    width: 13px;
    height: 13px;
  }

  [data-theme="light"] #photo-area .pitem,
  [data-theme="light"] #photo-area .pgrid.pgrid-zoom-saved .pitem {
    background: rgba(237, 242, 250, .42) !important;
  }

  [data-theme="light"] #photo-area .pitem .pthumb,
  [data-theme="light"] #photo-area .pgrid.pgrid-zoom-saved .pthumb {
    background: #edf2fa !important;
  }

  [data-theme="light"] #photo-area .pitem::after,
  [data-theme="light"] #photo-area .pgrid.pgrid-zoom-saved .pitem::after {
    background: linear-gradient(
      180deg,
      rgba(237, 242, 250, 0) 0%,
      rgba(237, 242, 250, .22) 58%,
      rgba(237, 242, 250, .42) 100%
    ) !important;
  }

  [data-theme="light"] #photo-area .pitem .pnum,
  [data-theme="light"] #photo-area .pgrid.pgrid-zoom-saved .pitem .pnum {
    background: rgba(255, 255, 255, .68) !important;
    border-color: rgba(24, 33, 48, .14) !important;
    color: #1d2a3d !important;
  }

  [data-theme="light"] #photo-area .pitem .pfoot .pactions,
  [data-theme="light"] #photo-area .pgrid.pgrid-zoom-saved .pitem .pfoot .pactions {
    background: rgba(255, 255, 255, .52);
    border-color: rgba(24, 33, 48, .12);
  }

  [data-theme="light"] #photo-area .pitem .pfoot .pact-ic,
  [data-theme="light"] #photo-area .pgrid.pgrid-zoom-saved .pitem .pfoot .pact-ic {
    color: #1d2a3d !important;
  }

  [data-theme="light"] #photo-area .pitem .pfoot .pact-ic:hover,
  [data-theme="light"] #photo-area .pgrid.pgrid-zoom-saved .pitem .pfoot .pact-ic:hover {
    background: rgba(24, 33, 48, .08) !important;
  }

  .lb {
    gap: 0 !important;
    padding: 12px !important;
  }

  .lb-stage,
  .lb-gallery .lb-stage {
    width: min(calc(100vw - 32px), 1920px) !important;
    height: calc(100dvh - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
  }

  .lb-stage .lb-img,
  .lb-gallery .lb-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  .lb > .lb-img {
    width: min(calc(100vw - 32px), 1920px) !important;
    height: calc(100dvh - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    object-fit: contain !important;
  }

  .lb-dl {
    position: fixed !important;
    right: 1rem !important;
    bottom: 1rem !important;
    z-index: 302 !important;
  }
}

@supports not (height: 100dvh) {
  @media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
    .lb-stage,
    .lb-gallery .lb-stage,
    .lb > .lb-img {
      height: calc(100vh - 32px) !important;
      max-height: calc(100vh - 32px) !important;
    }
  }
}

/* Foto-Uebersicht: jede Kachel bleibt ausnahmslos quadratisch.
   Die Einzelansicht nutzt .lb-img und zeigt das Foto weiterhin vollstaendig. */
#photo-area .pgrid {
  align-items: stretch !important;
}

#photo-area .pgrid .pitem,
#photo-area .pgrid.pgrid-zoom-saved .pitem,
#photo-area .pgrid .pitem.is-portrait,
#photo-area .pgrid .pitem.is-landscape,
#photo-area .pgrid .pitem.is-square,
#photo-area .pgrid.pgrid-zoom-saved .pitem.is-portrait,
#photo-area .pgrid.pgrid-zoom-saved .pitem.is-landscape,
#photo-area .pgrid.pgrid-zoom-saved .pitem.is-square,
#photo-area .pgrid .pitem.is-local-pending,
#photo-area .pgrid.pgrid-zoom-saved .pitem.is-local-pending {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}

#photo-area .pgrid .pitem .pthumb,
#photo-area .pgrid.pgrid-zoom-saved .pitem .pthumb,
#photo-area .pgrid .pitem.is-portrait .pthumb,
#photo-area .pgrid .pitem.is-landscape .pthumb,
#photo-area .pgrid .pitem.is-square .pthumb,
#photo-area .pgrid.pgrid-zoom-saved .pitem.is-portrait .pthumb,
#photo-area .pgrid.pgrid-zoom-saved .pitem.is-landscape .pthumb,
#photo-area .pgrid.pgrid-zoom-saved .pitem.is-square .pthumb,
#photo-area .pgrid .pitem.is-local-pending .pthumb,
#photo-area .pgrid.pgrid-zoom-saved .pitem.is-local-pending .pthumb {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
}

#photo-area .pgrid .pitem .pfoot,
#photo-area .pgrid.pgrid-zoom-saved .pitem .pfoot {
  position: absolute !important;
  left: .56rem !important;
  right: .56rem !important;
  bottom: .56rem !important;
  inset-block-start: auto !important;
  z-index: 4 !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}

#photo-area .pgrid .pitem .pnum,
#photo-area .pgrid .pitem .pactions,
#photo-area .pgrid .pitem .pact-ic,
#photo-area .pgrid.pgrid-zoom-saved .pitem .pnum,
#photo-area .pgrid.pgrid-zoom-saved .pitem .pactions,
#photo-area .pgrid.pgrid-zoom-saved .pitem .pact-ic {
  pointer-events: auto !important;
}

html.lightbox-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.lightbox-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  width: 100% !important;
}

.lb,
.lb-stage,
.lb-img {
  touch-action: pan-y !important;
}

.lb.lb-swiping,
.lb.lb-swiping .lb-stage,
.lb.lb-swiping .lb-img {
  touch-action: none !important;
}

.lb,
.lb * {
  -webkit-tap-highlight-color: transparent;
}

.lb-scroll-gallery {
  --lb-scroll-width: 100vw;
  background: #000 !important;
  overflow: hidden !important;
  touch-action: pan-y !important;
}

.lb-scroll-gallery .lb-stage {
  width: 100vw !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: contain;
  touch-action: pan-y !important;
  background: #000 !important;
  isolation: isolate;
}

.lb-scroll-gallery .lb-stage::-webkit-scrollbar {
  display: none;
}

.lb-scroll-gallery .lb-track {
  display: flex !important;
  flex-direction: row !important;
  width: max-content !important;
  height: 100% !important;
  min-height: 100% !important;
  transform: translate3d(0, 0, 0);
  transition: none !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  transform-style: preserve-3d;
}

.lb-scroll-gallery.is-animating .lb-track {
  transition: transform var(--lb-scroll-ms, 260ms) cubic-bezier(.22, .61, .36, 1) !important;
}

.lb-scroll-gallery.lb-swiping .lb-track {
  transition: none !important;
}

.lb-scroll-gallery .lb-slide {
  position: relative !important;
  flex: 0 0 var(--lb-scroll-width, 100vw) !important;
  width: var(--lb-scroll-width, 100vw) !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  contain: layout;
  transform: translate3d(0, 0, 0);
  overflow: hidden !important;
  background: #000 !important;
  box-shadow: -2px 0 0 #000, 2px 0 0 #000;
}

.lb-scroll-gallery .lb-img {
  width: var(--lb-scroll-width, 100vw) !important;
  height: 100dvh !important;
  max-width: var(--lb-scroll-width, 100vw) !important;
  max-height: 100dvh !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: #000 !important;
  transform: translate3d(var(--lb-zoom-x, 0px), var(--lb-zoom-y, 0px), 0) scale(var(--lb-zoom-scale, 1)) !important;
  transform-origin: center center !important;
  touch-action: pan-y !important;
  will-change: transform, opacity !important;
}

.lb-scroll-gallery .lb-img.is-loading {
  opacity: 0;
}

.lb-scroll-gallery .lb-img.is-ready {
  opacity: 1;
}

.lb-scroll-gallery .lb-loading {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  min-width: 7.5rem;
  padding: .58rem .9rem;
  border-radius: 999px;
  background: rgba(3, 7, 18, .86);
  border: 1px solid rgba(255, 255, 255, .34);
  color: #fff;
  font-size: .98rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

.lb-scroll-gallery .lb-img.is-ready + .lb-loading {
  display: none;
}

.lb-scroll-gallery .lb-slide.is-empty .lb-loading {
  display: none;
}

@supports not (height: 100dvh) {
  .lb-scroll-gallery .lb-stage,
  .lb-scroll-gallery .lb-slide,
  .lb-scroll-gallery .lb-img {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
  }
}