/* Innenraum: Mosaik mit Großansicht */
.galerie { padding: clamp(56px, 8vw, 100px) 0; border-top: 1px solid var(--linie); }
.galerie-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 34px; }
.galerie-kopf h2 { margin: 0; }
.galerie-kopf p { margin: 0; color: var(--gedaempft); max-width: 42ch; }
.mosaik { display: grid; grid-template-columns: 1.5fr 1fr 0.8fr; grid-template-rows: 1fr 1fr; gap: 12px; height: clamp(380px, 38vw, 540px); }
.mosaik button { position: relative; padding: 0; border: 0; background: var(--flaeche); overflow: hidden; cursor: pointer; }
.mosaik button img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--bewegung); }
.mosaik button::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, 0.08); pointer-events: none; }
.mosaik .g1 { grid-row: 1 / 3; }
.mosaik .g4 { grid-row: 1 / 3; grid-column: 3; }
.mosaik .mehr { position: absolute; right: 14px; bottom: 14px; background: rgba(var(--grund-rgb), 0.8); color: #fff; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 9px 14px; border: 1px solid rgba(201, 168, 122, 0.5); }
@media (hover: hover) { .mosaik button:hover img { transform: scale(1.04); } }
.mosaik button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 700px) {
  .galerie-kopf { display: block; text-align: center; margin-bottom: 24px; }
  .galerie-kopf p { margin: 12px auto 0; }
  .mosaik { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; height: auto; gap: 8px; }
  .mosaik button { aspect-ratio: 3 / 4; }
  .mosaik .g1 { grid-column: 1 / 4; grid-row: auto; aspect-ratio: 4 / 3; }
  .mosaik .g4 { grid-column: auto; grid-row: auto; }
}
/* Großansicht */
.galerie-dialog { border: 0; padding: 0; background: transparent; width: min(1100px, 94vw); max-width: none; max-height: 92vh; color: var(--schrift); }
.galerie-dialog::backdrop { background: rgba(5, 6, 8, 0.9); }
.galerie-rahmen { position: relative; display: grid; gap: 12px; justify-items: center; }
.galerie-rahmen img { display: block; max-width: 100%; max-height: 80vh; object-fit: contain; border: 1px solid var(--linie); }
.galerie-knopf { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 1px solid rgba(201, 168, 122, 0.5); background: rgba(20, 22, 26, 0.7); color: #c9a87a; font-size: 22px; cursor: pointer; }
.galerie-knopf:hover { background: #c9a87a; color: #16120c; }
.galerie-zu { top: 8px; right: 8px; transform: none; }
.galerie-zurueck { left: 8px; }
.galerie-vor { right: 8px; }
.galerie-zaehler { font-size: 13px; color: #c9ccd1; letter-spacing: 0.12em; }
.galerie-dialog:focus, .galerie-dialog:focus-visible { outline: none; }