body.gallery-page #breit > p.gallery-group {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: .8rem;
  margin: 0 0 3.2rem;
}

body.gallery-page #breit > p.gallery-group a { display: block; overflow: hidden; border-radius: .75rem; background: var(--legacy-forest); text-decoration: none; box-shadow: 0 8px 20px rgba(19, 45, 36, .11); }
body.gallery-page #breit > p.gallery-group img.rahmen { width: 100%; height: 122px; margin: 0; border: 0; border-radius: .75rem; box-shadow: none; object-fit: cover; transition: transform .45s cubic-bezier(.2,.75,.25,1), opacity .3s; }
body.gallery-page #breit > p.gallery-group a:hover img, body.gallery-page #breit > p.gallery-group a:focus-visible img { opacity: .88; transform: scale(1.09) rotate(-1deg); }
body.gallery-page #breit > p.gallery-group a:focus-visible { outline: 3px solid var(--legacy-lime); outline-offset: 3px; }

.gallery-modal { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3.5rem); background: rgba(6, 23, 18, .94); opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease; }
.gallery-modal.is-open { opacity: 1; visibility: visible; }
.gallery-modal__frame { width: min(100%, 1080px); max-height: 100%; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .85rem; transform: translateY(18px) scale(.96); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.gallery-modal.is-open .gallery-modal__frame { transform: none; }
.gallery-modal__image-wrap { min-height: 0; overflow: hidden; position: relative; border-radius: 1rem; background: #102b22; box-shadow: 0 25px 75px rgba(0,0,0,.38); }
.gallery-modal__image { width: 100%; max-height: min(76vh, 800px); object-fit: contain; opacity: 0; transform: scale(1.04); transition: opacity .35s ease, transform .5s cubic-bezier(.2,.8,.25,1); }
.gallery-modal__image.is-ready { opacity: 1; transform: none; }
.gallery-modal__caption { position: absolute; right: 0; bottom: 0; left: 0; padding: 1.7rem 1.4rem .9rem; color: white; background: linear-gradient(transparent, rgba(0,0,0,.62)); font-size: .75rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.gallery-modal__close, .gallery-modal__nav { display: grid; place-items: center; color: white; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.08); cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.gallery-modal__close:hover, .gallery-modal__nav:hover, .gallery-modal__close:focus-visible, .gallery-modal__nav:focus-visible { color: var(--legacy-deep); background: var(--legacy-lime); outline: 0; }
.gallery-modal__close { width: 42px; height: 42px; position: absolute; top: -52px; right: 0; border-radius: 50%; font-size: 1.35rem; }
.gallery-modal__controls { display: grid; gap: .65rem; }
.gallery-modal__nav { width: 45px; height: 45px; border-radius: 50%; font-size: 1.35rem; }
.gallery-modal__count { color: rgba(255,255,255,.63); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-align: center; }
body.gallery-open { overflow: hidden; }

@media (max-width: 620px) {
  body.gallery-page #breit > p.gallery-group { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
  body.gallery-page #breit > p.gallery-group img.rahmen { height: 135px; }
  .gallery-modal { padding: 1rem; }
  .gallery-modal__frame { display: block; }
  .gallery-modal__image { max-height: 72vh; }
  .gallery-modal__close { top: -51px; }
  .gallery-modal__controls { display: flex; align-items: center; justify-content: center; margin-top: 1rem; }
  .gallery-modal__count { min-width: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-modal, .gallery-modal__frame, .gallery-modal__image, body.gallery-page #breit > p.gallery-group img.rahmen { transition: none; }
}