/* KW Atelier – geteilte Lightbox (Vollbild-Bildansicht). Wird vom lightbox.js lazy als erzeugt; künftige Widgets liefern nur das Galerie-Markup. Glas-Knöpfe, Gold-Akzent, dunkel. JS steuert nur Zustände. */ .kwat-lightbox { --kwat-lb-backdrop: color-mix(in srgb, #000 92%, transparent); --kwat-lb-btn-bg: color-mix(in srgb, #000 45%, transparent); --kwat-lb-btn-bg-hover: color-mix(in srgb, #000 65%, transparent); --kwat-lb-btn-border: color-mix(in srgb, #fff 16%, transparent); --kwat-lb-panel-bg: color-mix(in srgb, #000 60%, transparent); --kwat-lb-z: 100000; position: fixed; inset: 0; width: 100dvw; height: 100dvh; max-width: none; max-height: none; padding: 0; border: 0; background: transparent; color: #fff; color-scheme: dark; z-index: var(--kwat-lb-z); } .kwat-lightbox::backdrop { background: var(--kwat-lb-backdrop); } .kwat-lightbox[open] { display: flex; align-items: center; justify-content: center; } /* Sanftes Einblenden (Progressive Enhancement). */ @supports (selector(:popover-open)) { @starting-style { .kwat-lightbox[open], .kwat-lightbox[open]::backdrop { opacity: 0; } } .kwat-lightbox[open], .kwat-lightbox[open]::backdrop { opacity: 1; transition: opacity var(--kwat-duration-base) var(--kwat-ease-standard); } } @keyframes kwat-lightbox-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } .kwat-lightbox[open] .kwat-lightbox__inner { animation: kwat-lightbox-in var(--kwat-duration-base) var(--kwat-ease-standard); } /* ── Bild ────────────────────────────────────────────────────────────────── */ .kwat-lightbox__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; max-width: 90vw; max-height: 85vh; } .kwat-lightbox__img { display: block; max-width: 100vw; max-height: 85vh; object-fit: contain; border-radius: var(--kwat-radius-sm); -webkit-touch-callout: none; } @media (min-width: 768px) { .kwat-lightbox__img { max-width: 85vw; max-height: 80vh; } } .kwat-lightbox__img.is-transitioning { view-transition-name: kwat-lightbox-image; } /* Bildwechsel: das neue Bild gleitet aus der Richtung herein, in die geblättert wird – statt eines reinen Überblendens. Das Attribut sitzt am , weil die ::view-transition-Pseudoelemente am Wurzelelement hängen (nicht am Dialog). Das JS dekodiert das Zielbild vor dem Tausch, sonst zeigt der erste Frame ein leeres Bild. */ @media (prefers-reduced-motion: no-preference) { :root[data-kwat-lb-dir]::view-transition-old(kwat-lightbox-image), :root[data-kwat-lb-dir]::view-transition-new(kwat-lightbox-image) { animation-duration: 320ms; animation-timing-function: var(--kwat-ease-entrance, cubic-bezier(.16, 1, .3, 1)); animation-fill-mode: both; } :root[data-kwat-lb-dir="next"]::view-transition-old(kwat-lightbox-image) { animation-name: kwat-lightbox-leave-left; } :root[data-kwat-lb-dir="next"]::view-transition-new(kwat-lightbox-image) { animation-name: kwat-lightbox-enter-right; } :root[data-kwat-lb-dir="prev"]::view-transition-old(kwat-lightbox-image) { animation-name: kwat-lightbox-leave-right; } :root[data-kwat-lb-dir="prev"]::view-transition-new(kwat-lightbox-image) { animation-name: kwat-lightbox-enter-left; } } @keyframes kwat-lightbox-leave-left { to { opacity: 0; transform: translateX(-5%); } } @keyframes kwat-lightbox-enter-right { from { opacity: 0; transform: translateX(5%); } } @keyframes kwat-lightbox-leave-right { to { opacity: 0; transform: translateX(5%); } } @keyframes kwat-lightbox-enter-left { from { opacity: 0; transform: translateX(-5%); } } /* ── Knöpfe (Glas-Optik; 0,2,0 schützt gegen Elementor-V4-Reset) ─────────── */ .kwat-lightbox .kwat-lightbox__close, .kwat-lightbox .kwat-lightbox__prev, .kwat-lightbox .kwat-lightbox__next { position: fixed; z-index: 20; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: #fff; background: var(--kwat-lb-btn-bg); border: 1px solid var(--kwat-lb-btn-border); border-radius: 50%; cursor: pointer; appearance: none; backdrop-filter: blur(8px); transition: background-color var(--kwat-duration-fast) var(--kwat-ease-standard), border-color var(--kwat-duration-fast) var(--kwat-ease-standard), box-shadow var(--kwat-duration-fast) var(--kwat-ease-standard); } .kwat-lightbox__close { top: 20px; right: 20px; } .kwat-lightbox__prev { top: 50%; left: 16px; transform: translateY(-50%); } .kwat-lightbox__next { top: 50%; right: 16px; transform: translateY(-50%); } @media (hover: hover) { /* 0,3,0 schlägt den V4-Hover-Override (Pink). */ .kwat-lightbox .kwat-lightbox__close:hover, .kwat-lightbox .kwat-lightbox__prev:hover, .kwat-lightbox .kwat-lightbox__next:hover { color: #fff; background: var(--kwat-lb-btn-bg-hover); border-color: color-mix(in srgb, var(--kwat-color-accent) 60%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--kwat-color-accent) 25%, transparent); } } .kwat-lightbox .kwat-lightbox__close:focus-visible, .kwat-lightbox .kwat-lightbox__prev:focus-visible, .kwat-lightbox .kwat-lightbox__next:focus-visible { outline: var(--kwat-focus-width) solid var(--kwat-color-focus); outline-offset: var(--kwat-focus-offset); } /* ── Caption + Zähler ────────────────────────────────────────────────────── */ .kwat-lightbox__caption { position: fixed; z-index: 15; bottom: 48px; left: 50%; transform: translateX(-50%); max-width: 70vw; margin: 0; padding: 6px 14px; font-family: var(--kwat-font-body); font-size: var(--kwat-text-sm); text-align: center; color: #fff; background: var(--kwat-lb-panel-bg); border-radius: var(--kwat-radius-sm); pointer-events: none; } .kwat-lightbox__caption:empty { display: none; } .kwat-lightbox__counter { position: fixed; z-index: 15; bottom: 16px; left: 50%; transform: translateX(-50%); padding: 4px 10px; font-family: var(--kwat-font-body); font-size: var(--kwat-text-xs); font-variant-numeric: tabular-nums; color: #fff; background: var(--kwat-lb-panel-bg); border-radius: var(--kwat-radius-sm); pointer-events: none; } /* ── Thumbnail-Leiste (nur Desktop; Mobil reichen Swipe + Pfeile) ────────── */ .kwat-lightbox__strip { display: none; position: fixed; bottom: 92px; left: 50%; transform: translateX(-50%); z-index: 18; gap: 6px; max-width: calc(100vw - 32px); padding: 8px 12px; overflow-x: auto; scrollbar-width: thin; background: var(--kwat-lb-panel-bg); border-radius: var(--kwat-radius-md); view-transition-name: kwat-lightbox-strip; } .kwat-lightbox__strip:has(.kwat-lightbox__thumb) { display: flex; } @media (hover: none) { .kwat-lightbox__strip:has(.kwat-lightbox__thumb) { display: none; } } .kwat-lightbox__thumb { flex: 0 0 auto; width: 56px; height: 56px; padding: 0; background: transparent; border: 2px solid transparent; border-radius: var(--kwat-radius-sm); cursor: pointer; overflow: hidden; transition: border-color var(--kwat-duration-fast) var(--kwat-ease-standard), transform var(--kwat-duration-fast) var(--kwat-ease-standard); } .kwat-lightbox__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (hover: hover) { .kwat-lightbox__thumb:hover { transform: translateY(-2px); border-color: color-mix(in srgb, #fff 50%, transparent); } } .kwat-lightbox__thumb:focus-visible { outline: var(--kwat-focus-width) solid var(--kwat-color-focus); outline-offset: 2px; } .kwat-lightbox__thumb[aria-current="true"] { border-color: var(--kwat-color-accent); transform: translateY(-2px); } /* ── Seite sperren, solange offen ────────────────────────────────────────── */ body:has(.kwat-lightbox[open]) { overflow: hidden; scrollbar-gutter: stable; } /* ── Bildschirmleser-Region ──────────────────────────────────────────────── */ .kwat-lightbox__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ── Bewegung reduzieren ─────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .kwat-lightbox[open] .kwat-lightbox__inner { animation: none; } .kwat-lightbox__close, .kwat-lightbox__prev, .kwat-lightbox__next, .kwat-lightbox__thumb { transition: none; } @supports (selector(:popover-open)) { .kwat-lightbox[open], .kwat-lightbox[open]::backdrop { transition: none; } } } /* ── Windows-Kontrastmodus ───────────────────────────────────────────────── */ @media (forced-colors: active) { .kwat-lightbox .kwat-lightbox__close, .kwat-lightbox .kwat-lightbox__prev, .kwat-lightbox .kwat-lightbox__next { border: 1px solid; } }