/* Einheitlicher Hover für sämtliche Fotos im Seiteninhalt. */
main :is(.photo-surface, .leader-photo, .home-team-strip > div, .team-hero-mosaic > div) > img {
  filter: var(--photo-rest-filter, var(--photo-room-filter));
  transform: scale(1);
  transform-origin: center;
  transition: filter .55s ease, transform .55s ease, clip-path .55s ease;
}

main .hero-image > img {
  --photo-rest-filter: saturate(.6) contrast(1.07) brightness(.91);
}

main :is(.leader-photo, .home-team-strip > div, .team-hero-mosaic > div) > img {
  --photo-rest-filter: grayscale(1);
}

main :is(.photo-surface--portrait) > img {
  --photo-rest-filter: var(--photo-portrait-filter);
}

main :is(.photo-surface:not(.hero-image):not(.jobs-hero-photo), .leader-photo, .home-team-strip > div, .team-hero-mosaic > div) {
  overflow: hidden;
}

/* Diese beiden Rahmen tragen überstehende Beschriftungen und Ecklinien.
   Deshalb wird nur das Foto selbst innerhalb seiner ursprünglichen Fläche beschnitten. */
main :is(.hero-image, .jobs-hero-photo) > img { clip-path: inset(0); }

@media (hover: hover) and (pointer: fine) {
  main :is(.photo-surface, .leader-photo, .home-team-strip > div, .team-hero-mosaic > div):hover > img,
  main .gallery-item:focus-visible > img {
    filter: var(--photo-rest-filter, var(--photo-room-filter)) brightness(1.07);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  main :is(.photo-surface, .leader-photo, .home-team-strip > div, .team-hero-mosaic > div):hover > img,
  main .gallery-item:focus-visible > img {
    transform: scale(1.025);
  }

  /* (1 - 1 / 1.025) / 2 hält die sichtbaren Bildkanten an derselben Stelle. */
  main :is(.hero-image, .jobs-hero-photo):hover > img { clip-path: inset(1.219512%); }
}

@media (prefers-reduced-motion: reduce) {
  main :is(.photo-surface, .leader-photo, .home-team-strip > div, .team-hero-mosaic > div) > img {
    transition: none;
  }
}