/* ============================================================ Mercure — Galerie-Lightbox (Zimmer-Detailseiten) Overlay wird per JS (gallery-lightbox.js) erzeugt & gesteuert. ============================================================ */ /* Galerie-Bilder als anklickbar kennzeichnen */ .gal-mosaic figure { cursor: zoom-in; } .gal-mosaic figure img { transition: filter .2s ease, transform .25s ease; } .gal-mosaic figure:hover img, .gal-mosaic figure:focus-visible img { filter: brightness(1.05); } .gal-mosaic figure:focus-visible { outline: 2px solid var(--c-purple, #a790c4); outline-offset: 3px; } /* Overlay */ .mc-lightbox { position: fixed; inset: 0; /* Über Header (2000), Sticky-Bar & Chat (max-int). Da das Overlay zur Laufzeit als letztes an gehängt wird, gewinnt es bei Gleichstand die Stapelung. */ z-index: 2147483647; display: none; align-items: center; justify-content: center; padding: clamp(12px, 3vw, 48px); background: rgba(18, 16, 22, 0.94); -webkit-tap-highlight-color: transparent; } .mc-lightbox.is-open { display: flex; animation: mcLbFade .18s ease; } @keyframes mcLbFade { from { opacity: 0; } to { opacity: 1; } } /* Bei offener Lightbox: Sticky-Buchungsleiste + Chat-Launcher ausblenden, sonst stoßen deren max-int-z-index unten (Bar) bzw. rechts (Chat) durchs Overlay. */ body.mc-lb-open .mobile-bar, body.mc-lb-open .mc-sticky-bar, body.mc-lb-open .mc-mobile-bar, body.mc-lb-open iframe[src*="dialogshift" i], body.mc-lb-open [id*="dialogshift" i]:not([id*="inline" i]), body.mc-lb-open [class*="dialogshift" i][style*="fixed"], body.mc-lb-open [class*="dialogshift" i][style*="position"] { display: none !important; } .mc-lb-stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; max-height: 100%; } .mc-lb-img { display: block; max-width: min(1120px, 92vw); max-height: 80vh; width: auto; height: auto; object-fit: contain; border-radius: 3px; background: #1a181e; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); } .mc-lb-cap { margin: 0; color: #fff; opacity: .82; font-size: 13px; letter-spacing: .04em; text-align: center; } /* Buttons */ .mc-lb-btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .10); color: #fff; cursor: pointer; transition: background .15s ease, transform .15s ease; } .mc-lb-btn svg { width: 24px; height: 24px; } .mc-lb-btn:hover, .mc-lb-btn:focus-visible { background: var(--c-purple, #a790c4); color: #fff; outline: none; } .mc-lb-close { top: 14px; right: 16px; } .mc-lb-prev { left: 16px; top: 50%; transform: translateY(-50%); } .mc-lb-next { right: 16px; top: 50%; transform: translateY(-50%); } .mc-lb-prev:hover, .mc-lb-prev:focus-visible { transform: translateY(-50%) scale(1.06); } .mc-lb-next:hover, .mc-lb-next:focus-visible { transform: translateY(-50%) scale(1.06); } .mc-lb-counter { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #fff; opacity: .85; font-size: 12px; letter-spacing: .12em; background: rgba(0, 0, 0, .32); padding: 4px 12px; border-radius: 999px; } /* Mobile */ @media (max-width: 680px) { .mc-lb-img { max-width: 94vw; max-height: 74vh; } .mc-lb-btn { width: 44px; height: 44px; } .mc-lb-close { top: 10px; right: 10px; } .mc-lb-prev { left: 8px; } .mc-lb-next { right: 8px; } } @media (prefers-reduced-motion: reduce) { .mc-lightbox.is-open { animation: none; } .gal-mosaic figure img, .mc-lb-btn { transition: none; } }