/* Galerie (Justified Rows) und Lightbox Les Bergers Mystiques — aus dem abgenommenen Entwurf v3 ausgelagert. Quelle: design-entwurf/index.html, Zeilen 714-820 (unveraendert uebernommen). ACHTUNG: Die Einbindungsreihenfolge in ist bedeutungstragend. */ /* ============ GALERIE: Justified Rows + Lightbox (dunkle Bühne) ============ */ #galerie { background: var(--gal-bg); transition: background 0.5s ease; } /* Kopf zentriert über der breiten Galerie (linksbündig wirkte versetzt) */ #galerie .section-head { text-align: center; margin-left: auto; margin-right: auto; } #galerie .section-head h2 { color: var(--band-ink); } #galerie .section-head p:not(.lead-in) { color: color-mix(in srgb, var(--band-ink) 72%, transparent); } #galerie .lead-in { color: var(--band-kicker); } /* Teal #7FA9A8 wäre 3.94:1 — Fail */ /* Breiten-Cap (User-Wunsch): Galerie bricht aus dem 1200er-Wrap aus, Deckel 1720px; section-head bleibt im normalen Wrap (Editorial-Breakout). 96px-Puffer deckt Wrap-Padding + Scrollbar — kein X-Overflow. */ #galerie .mosaic { --galw: min(1720px, 100vw - 96px); width: var(--galw); margin-left: calc((var(--galw) - 100%) / -2); } /* Pre-Layout/No-JS-Fallback: greift nur für DIREKTE Kinder — nach dem JS-Layout liegen die Tiles in .mrow und die Regeln sind inert. Verhindert den „12s-Vollbreiten-Stapel" auf langsamen Verbindungen. */ .mosaic { display: flex; flex-wrap: wrap; gap: 14px; } .mosaic > .tile { flex: 1 1 300px; height: 300px; min-width: 220px; } .mrow { display: flex; gap: 14px; flex: 1 1 100%; } .tile { position: relative; overflow: hidden; display: block; flex: 0 0 auto; border-radius: var(--radius); cursor: zoom-in; border: none; padding: 0; background: none; box-shadow: 0 10px 30px rgba(35,28,20,0.09); } .tile img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.7s cubic-bezier(0.22,1,0.36,1); } .tile:hover img { transform: scale(1.05); } /* band-kicker statt accent: accent wäre 1.97:1 auf Fir — Fokus unsichtbar */ .tile:focus-visible { outline: 3px solid var(--band-kicker); outline-offset: 3px; } .tile .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 16px 12px; font-size: 13px; font-weight: 500; color: #F6F0E4; /* 0.74 + Schatten: 0.62 scheiterte auf Schnee/Himmel (bis 1.76:1) */ background: linear-gradient(180deg, rgba(20,30,26,0) 0%, rgba(20,30,26,0.74) 100%); text-shadow: 0 1px 2px rgba(0,0,0,0.45); opacity: 0; transition: opacity 0.35s ease; text-align: left; } .tile:hover .cap, .tile:focus-visible .cap { opacity: 1; } /* Touch: KEINE Caption auf der Kachel (verdeckte die Fotos) — der Titel steht in der Lightbox, die per Tap ohnehin sofort aufgeht */ @media (hover: none) { .tile .cap { display: none; } } /* sanftes Einschweben (Inhalt bleibt ohne JS voll sichtbar) */ .tile.settle { transform: translateY(16px); transition: transform 0.7s cubic-bezier(0.22,1,0.36,1); } .tile.settle.in { transform: none; } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 200; /* Backdrop deckt den ganzen Viewport (inset:0 = lvh auf iOS); der INHALT bleibt aber oberhalb der Safari-Leiste, sonst liegt die Caption darunter */ padding-bottom: var(--vp-bar); display: none; align-items: center; justify-content: center; background: color-mix(in srgb, var(--cine-bg) 92%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .lightbox.open { display: flex; } .lightbox img { max-width: min(92vw, 1400px); /* 160px-Band reserviert: Caption stand sonst auf hellem Foto (Schnee) */ max-height: min(82vh, calc(100vh - 160px)); max-height: min(82svh, calc(100svh - 160px)); border-radius: 10px; box-shadow: 0 30px 90px rgba(0,0,0,0.5); } .lb-cap { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; color: var(--creme); font-family: var(--font-display); font-style: italic; font-size: 19px; } .lb-cap small { display: block; font-family: var(--font-body); font-style: normal; font-size: 12px; letter-spacing: 0.18em; opacity: 0.7; margin-top: 6px; } .lb-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(248,243,234,0.5); background: rgba(20,30,26,0.4); color: var(--creme); font-size: 22px; cursor: pointer; transition: background 0.2s; } .lb-btn:hover { background: rgba(20,30,26,0.75); } .lb-prev { left: 26px; } .lb-next { right: 26px; } .lb-close { position: absolute; top: 22px; right: 26px; width: 46px; height: 46px; border-radius: 50%; border: none; background: rgba(20,30,26,0.5); color: var(--creme); font-size: 20px; cursor: pointer; } @media (max-width: 900px) { #galerie .mosaic { --galw: calc(100vw - 56px); } .lb-btn { width: 44px; height: 44px; } .lb-prev { left: 10px; } .lb-next { right: 10px; } } @media (prefers-reduced-motion: reduce) { .tile img, .tile.settle, .swall-tile img { transition: none; } .tile.settle { transform: none; } }