/* ===========================================================================
   viceversa.swiss · Bildstrecke (Mini-Slider) — zu _lib/strecke.php
   Angelegt 19.10.2026. Bilder im selben Mass wie die Einzelbilder der
   Reihen (3:2), darunter Bildzeile, Pfeile und Zähler. Die Pfeile rücken
   beim Darüberfahren leicht, wie im Seitenverzeichnis.

   Mit Skript (html.vv-js): Vorhang — die Bilder liegen gestapelt, das obere
   wird von links nach rechts weggezogen (clip-path, gesetzt von strecke.js);
   im Selbstlauf langsamer (.vv-langsam).
   Ohne Skript: ein Band, das sich seitlich wischen lässt.
   =========================================================================== */

/* ohne Skript: Band */
.vv-strecke-band { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
                   scrollbar-width: none; border-radius: 2px; }
.vv-strecke-band::-webkit-scrollbar { display: none; }
.vv-strecke-bild { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.vv-strecke-bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* mit Skript: Vorhang */
.vv-js .vv-strecke-band { display: block; position: relative; overflow: hidden; aspect-ratio: 3 / 2;
                          touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.vv-js .vv-strecke-band.vv-zieht { cursor: grabbing; }
.vv-js .vv-strecke-bild { position: absolute; inset: 0; will-change: clip-path; }
.vv-js .vv-strecke-bild img { height: 100%; -webkit-user-drag: none; pointer-events: none; }
/* Die Kante des Vorhangs: ein feiner Schatten auf dem Bild, das gezogen wird. */
.vv-js .vv-strecke-bild::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--kante, 0%);
  width: 16px; pointer-events: none; opacity: var(--kante-sicht, 0); transition: opacity .2s ease;
  background: linear-gradient(to left, transparent, color-mix(in srgb, var(--vv-schwarzrot) 40%, transparent)); }
.vv-strecke-band.vv-gleitet .vv-strecke-bild { transition: clip-path .55s cubic-bezier(.4, 0, .2, 1); }
.vv-strecke-band.vv-gleitet .vv-strecke-bild::after { transition: left .55s cubic-bezier(.4, 0, .2, 1), opacity .2s ease .35s; }
/* Selbstlauf: langsamer, sanft an- und auslaufend (1,65 s, siehe LANGSAM in strecke.js) */
.vv-strecke-band.vv-gleitet.vv-langsam .vv-strecke-bild { transition-duration: 1.65s; transition-timing-function: cubic-bezier(.65, 0, .35, 1); }
.vv-strecke-band.vv-gleitet.vv-langsam .vv-strecke-bild::after { transition: left 1.65s cubic-bezier(.65, 0, .35, 1), opacity .3s ease 1.3s; }
.vv-strecke-band:focus-visible { outline: 2px solid var(--vv-rot); outline-offset: 4px; }

.vv-strecke-steuer { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.vv-strecke-zeile { flex: 1 1 auto; font-size: 14px; line-height: 1.4; color: var(--vv-text); }
.vv-strecke-zahl { font-size: 15px; color: var(--vv-text); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: center; }
.vv-strecke-zahl b { font-weight: 600; color: var(--vv-rot); }
.vv-strecke-pfeil { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--vv-feld);
                    background: none; cursor: pointer; display: grid; place-items: center; padding: 0;
                    color: var(--vv-rot); font-size: 24px; line-height: 1; transition: border-color .2s ease; }
.vv-strecke-pfeil::before { display: inline-block; transition: transform .2s ease; margin-top: -3px; }
.vv-strecke-zurueck::before { content: "\2039"; }
/* Anhalten: zwei Striche; angehalten ein Dreieck (weiterlaufen) */
.vv-strecke-pause { width: 32px; height: 32px; font-size: 0; margin-right: 4px; }
.vv-strecke-pause::before { content: ""; width: 8px; height: 10px; margin: 0;
  border-left: 2px solid currentColor; border-right: 2px solid currentColor; box-sizing: border-box; }
.vv-strecke-pause[aria-pressed="true"]::before { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent currentColor; margin-left: 2px; }
.vv-strecke-weiter::before  { content: "\203A"; }
.vv-strecke-pfeil:hover:not(:disabled), .vv-strecke-pfeil:focus-visible { border-color: var(--vv-rot); }
.vv-strecke-zurueck:hover:not(:disabled)::before { transform: translateX(-3px); }
.vv-strecke-weiter:hover:not(:disabled)::before  { transform: translateX(3px); }
.vv-strecke-pfeil:focus-visible { outline: 2px solid var(--vv-rot); outline-offset: 2px; }
.vv-strecke-pfeil:disabled { opacity: .35; cursor: default; }
/* Ohne Skript gibt es keine Pfeile und keinen Zähler — gewischt wird im Band. */
html:not(.vv-js) .vv-strecke-steuer { display: none; }

@media (prefers-reduced-motion: reduce) {
  .vv-strecke-band.vv-gleitet .vv-strecke-bild { transition-duration: .01s; }
  .vv-strecke-pfeil::before { transition: none; }
}
@media print {
  .vv-strecke-steuer { display: none; }
  .vv-strecke-bild:not(:first-child) { display: none; }
}