/* =====================================================================
   Abschluss – Variante D: Fotogalerie als Mosaik
   ===================================================================== */
.pgal { padding-block: clamp(70px, 9vw, 130px); }
.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 16vw, 260px); grid-auto-flow: dense; gap: var(--gap); }
.mosaic figure { grid-column: span 4; margin: 0; position: relative; overflow: hidden; background: var(--bg-2); cursor: zoom-in; }
.mosaic .m-xl { grid-column: span 7; grid-row: span 2; }
.mosaic .m-w { grid-column: span 5; }
.mosaic .m-t { grid-row: span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .5s; }
.mosaic figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 45%); opacity: 0; transition: opacity .4s; }
.mosaic figcaption { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; color: #fff; font-size: 13.5px; line-height: 1.35; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s var(--ease); }
.mosaic figcaption b { display: block; font-size: 17px; }
.mosaic figure:hover img { transform: scale(1.05); }
.mosaic figure:hover::after, .mosaic figure:hover figcaption { opacity: 1; }
.mosaic figure:hover figcaption { transform: none; }
.mosaic figure::before { content: ""; position: absolute; z-index: 3; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.mosaic figure:hover::before { transform: scaleX(1); }
@media (max-width: 900px) {
  .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 42vw; }
  .mosaic figure, .mosaic .m-w { grid-column: span 1; }
  .mosaic .m-xl { grid-column: span 2; grid-row: span 1; }
  .mosaic .m-t { grid-row: span 2; }
  .mosaic figure::after, .mosaic figcaption { opacity: 1; transform: none; }
  .mosaic figcaption { font-size: 12px; left: 10px; bottom: 8px; }
  .mosaic figcaption b { font-size: 14px; }
}