/* ===================================================================
   MARQUEE

   A horizontal strip of images that runs continuously, the way the
   reference site teases its gallery above the newsletter. Full-bleed:
   the strip is meant to run past both edges of the page, so it reads as
   something passing through rather than a row that has been placed.

   The loop is seamless because the script prints the set twice and the
   animation travels exactly half the track — at -50% the second copy
   sits precisely where the first one started, so the reset is invisible.
   =================================================================== */

.marquee {
  overflow: hidden;
  /* full-bleed out of the .wrap column it sits in */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  /* nothing here should catch a horizontal scroll */
  overscroll-behavior-x: none;
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  width: max-content;
  animation: marquee-run var(--marquee-duration, 60s) linear infinite;
}

/* Hovering holds the strip still so a picture can actually be looked at
   and clicked; without this the target moves out from under the cursor. */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee-run {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* Every frame the same shape, and the shape is declared rather than
   inherited from the file. That is not only a house-style choice: the
   loop travels exactly half the track, so the track's width has to be
   known before the pictures arrive. With natural widths a lazily loaded
   image contributes nothing until it decodes, the track grows underneath
   the running animation, and the seam becomes visible. */
.marquee__item {
  display: block;
  flex: 0 0 auto;
  /* Zweite Reduktion, nochmal -25% (war clamp(8.36rem, 5.32rem + 9.12vw,
     15.2rem), davor 11rem/7rem+12vw/20rem). Zusammen sind die Bilder
     jetzt rund 43% kleiner als in der ersten Fassung.

     Der Zwischenstand war nicht "nicht angekommen" — die -24% standen
     hier und wurden von nichts überschrieben. Sie waren nur wörtlich
     genommen und im Ergebnis immer noch zu groß. */
  height: clamp(6.27rem, 3.99rem + 6.84vw, 11.4rem);
  aspect-ratio: 3 / 2;
  position: relative;
  overflow: hidden;
}
.marquee__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.marquee__item:hover img { opacity: 0.82; }

@media (prefers-reduced-motion: reduce) {
  /* no travel; the strip becomes a plain row the visitor can scroll */
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}