/* Vereinsfotos wie auf dem Tisch: lose, überlappend, per Hover oder Fokus nach vorne. */
:root {
  --photo-shadow: 2px 5px 10px oklch(20% 0.025 345 / 0.18);
  --photo-shadow-raised: 6px 16px 24px oklch(20% 0.025 345 / 0.28);
}
.gallery-filters { margin-bottom: var(--space-lg); }
.gallery-hint { text-align: center; font-size: 13px; margin-bottom: var(--space-lg); color: var(--color-muted); }
.gallery-grid { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); width: 100%; padding-block: var(--space-xl); }
.gallery-grid .scattered-photo { position: relative; min-width: 0; margin: 0; z-index: var(--photo-layer, 1); }
.gallery-image { display: block; width: 100%; min-width: 0; margin: 0; padding: var(--space-xs) var(--space-xs) var(--space-sm); border: 0; border-radius: 2px; color: var(--color-ink); background: var(--color-white); box-shadow: var(--photo-shadow); text-align: center; cursor: pointer; transform-origin: 50% 50%; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.gallery-image img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; pointer-events: none; }
.photo-portrait .gallery-image img { aspect-ratio: 4 / 5; }
.photo-caption { display: block; padding-top: var(--space-sm); font-size: 12px; line-height: 1.5; }
.gallery-grid.is-scattered { display: block; padding: 0; }
.gallery-grid.is-scattered .scattered-photo { position: absolute; left: 0; top: 0; width: var(--photo-width); transform: translate(var(--photo-x), var(--photo-y)) rotate(var(--photo-angle)); }
.gallery-grid .scattered-photo.is-raised { z-index: 60; }
.gallery-grid .scattered-photo:focus-within { z-index: 90; }
.gallery-grid .scattered-photo:hover { z-index: 100; }
.scattered-photo:focus-within .gallery-image, .scattered-photo.is-raised .gallery-image { transform: rotate(calc(-1 * var(--photo-angle, 0deg))) translateY(-6px) scale(1.05); box-shadow: var(--photo-shadow-raised); }
.gallery-image:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.gallery-image:active { box-shadow: var(--photo-shadow-raised); }
@media (hover: hover) and (pointer: fine) {
  .scattered-photo:hover .gallery-image { transform: rotate(calc(-1 * var(--photo-angle, 0deg))) translateY(-8px) scale(1.07); box-shadow: var(--photo-shadow-raised); }
}
@media (max-width: 52rem) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 35rem) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
  .gallery-image { padding: var(--space-2xs) var(--space-2xs) var(--space-xs); }
  .photo-caption { padding-top: var(--space-xs); font-size: 10px; }
  .gallery-hint { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-image { transition: none; }
}