.pcboy-gallery__thumbnails { margin-top: 13px; } .pcboy-gallery { --pcboy-gallery-columns: 6; --pcboy-gallery-gap: 12px; --pcboy-gallery-main-height: 560px; --pcboy-gallery-main-ratio: 16 / 9; position: relative; width: 100%; } .pcboy-gallery *, .pcboy-gallery *::before, .pcboy-gallery *::after { box-sizing: border-box; } .pcboy-gallery__figure { margin: 0 0 var(--pcboy-gallery-gap); } .pcboy-gallery__stage { position: relative; display: flex; width: 100%; min-height: 0; padding: 0; align-items: center; justify-content: center; overflow: hidden; border: 0; background: #f3f3f3; color: inherit; } .pcboy-gallery--lightbox-enabled .pcboy-gallery__stage { cursor: zoom-in; } .pcboy-gallery__stage:disabled { cursor: default; } .pcboy-gallery__main-image { display: block; width: 100%; height: auto; object-fit: contain; } .pcboy-gallery--main-fixed .pcboy-gallery__stage { height: var(--pcboy-gallery-main-height); } .pcboy-gallery--main-ratio .pcboy-gallery__stage { aspect-ratio: var(--pcboy-gallery-main-ratio); } .pcboy-gallery--main-fixed .pcboy-gallery__main-image, .pcboy-gallery--main-ratio .pcboy-gallery__main-image { height: 100%; } .pcboy-gallery__zoom { position: absolute; right: 14px; bottom: 14px; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 999px; background: rgba(0, 0, 0, 0.68); color: #fff; font-size: 26px; line-height: 1; pointer-events: none; } .pcboy-gallery__caption { padding-top: 8px; min-height: 1.5em; } .pcboy-gallery__thumbnails { display: grid; grid-template-columns: repeat(var(--pcboy-gallery-columns), minmax(0, 1fr)); gap: var(--pcboy-gallery-gap); } .pcboy-gallery__thumbnail { height: 110px; padding: 0; overflow: hidden; border: 0; background: transparent; cursor: pointer; transition: opacity 160ms ease, transform 160ms ease; } .pcboy-gallery__thumbnail:hover, .pcboy-gallery__thumbnail:focus-visible { opacity: 1 !important; transform: translateY(-1px); } .pcboy-gallery__thumbnail.is-active { outline: 3px solid #222; outline-offset: -3px; opacity: 1; } .pcboy-gallery__thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; } .pcboy-gallery__lightbox[hidden] { display: none; } .pcboy-gallery__lightbox { position: fixed; z-index: 2147483000; inset: 0; display: grid; grid-template-columns: minmax(44px, 7vw) 1fr minmax(44px, 7vw); align-items: center; background: rgba(0, 0, 0, 0.94); color: #fff; } .pcboy-gallery__lightbox-content { display: flex; min-width: 0; height: 100vh; padding: 40px 0 24px; flex-direction: column; align-items: center; justify-content: center; } .pcboy-gallery__lightbox-image { display: block; max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; } .pcboy-gallery__lightbox-caption { padding-top: 10px; text-align: center; } .pcboy-gallery__lightbox-counter { padding-top: 4px; font-size: 0.875rem; opacity: 0.75; } .pcboy-gallery__lightbox-close, .pcboy-gallery__lightbox-prev, .pcboy-gallery__lightbox-next { border: 0; background: transparent; color: #fff; cursor: pointer; } .pcboy-gallery__lightbox-close { position: absolute; top: 12px; right: 18px; z-index: 3; padding: 8px; font-size: 42px; line-height: 1; } .pcboy-gallery__lightbox-prev, .pcboy-gallery__lightbox-next { height: 100%; font-size: clamp(44px, 7vw, 88px); } body.pcboy-gallery-lightbox-open { overflow: hidden; } /* Die Lightbox wird beim Öffnen direkt unter verschoben. Dadurch kann sie nicht von z-index-/transform-Stacking-Contexts des Themes oder von Elementor-Containern unterhalb eines Menüs festgehalten werden. */ body > .pcboy-gallery__lightbox { isolation: isolate; } .pcboy-gallery__empty { padding: 24px; border: 1px dashed #999; text-align: center; } @media (max-width: 767px) { .pcboy-gallery__lightbox { grid-template-columns: 46px 1fr 46px; } } @media (prefers-reduced-motion: reduce) { .pcboy-gallery__thumbnail { transition: none; } }