/* Referenzen: Bilder laufen langsam durch, die Mitte ist groß.
   Positionen setzt js/ref-flow.js; ohne JavaScript ist es ein Wisch-Band. */
.ref-flow{
  --rf-w: clamp(170px, 50vw, 340px);
  padding-bottom: clamp(24px, 3vw, 48px);
}
.ref-flow-stage{
  position: relative;
  overflow: hidden;
  height: calc(var(--rf-w) * 1.3);
  touch-action: pan-y;
  outline-offset: -3px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ref-flow-card{
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--rf-w);
  aspect-ratio: 1440 / 1300;
  margin: calc(var(--rf-w) * 1300 / 1440 / -2) 0 0;
  border-radius: 14px;
  overflow: hidden;
  background: #e6e6e9;
  will-change: transform, opacity;
}
.ref-flow-card img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}
.ref-flow-cap{
  min-height: 64px;
  margin-top: 8px;
  padding-inline: var(--home-gutter, 20px);
  text-align: center;
}
.ref-flow-cap b{
  display: block;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 400;
  letter-spacing: -.01em;
  transition: opacity .25s;
}
.ref-flow-cap span{
  display: block;
  margin-top: 2px;
  color: #63656c;
  font-size: 15px;
  transition: opacity .25s;
}
.ref-flow-cap.is-swapping b,
.ref-flow-cap.is-swapping span{ opacity: 0; }

/* Ohne JavaScript: horizontales Wisch-Band mit Namen unter jedem Bild. */
.ref-flow:not(.is-enhanced) .ref-flow-stage{
  display: flex;
  gap: 14px;
  height: auto;
  overflow-x: auto;
  padding-inline: var(--home-gutter, 20px);
  scroll-snap-type: x mandatory;
  -webkit-mask-image: none;
  mask-image: none;
}
.ref-flow:not(.is-enhanced) .ref-flow-card{
  position: relative;
  top: auto;
  flex: none;
  margin: 0;
  scroll-snap-align: center;
}
.ref-flow:not(.is-enhanced) .ref-flow-cap{ display: none; }