/* laufband.css — Laufband + Lightbox (landing/laufband.js, Nachtpaket 1715, Block 3).
 *
 * Nur Token aus /design.css und Farben aus dem Kern-Abdruck — keine
 * px-Größe, keine Farbe (werkzeug/design_faelle.py).
 *
 * Ohne Skript (keine Klasse .laufband-aktiv) ist jede Reihe eine
 * wischbare Bildreihe. Mit Skript läuft sie; bei prefers-reduced-motion
 * steht sie und bekommt Pfeile.
 */

.laufband { position: relative; display: grid; gap: var(--abstand-2); padding: var(--abstand-3) 0 var(--abstand-1); }

.laufband-reihe { display: flex; gap: var(--abstand-2); overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; }
.laufband-reihe img { height: var(--band-bild-hoehe); width: auto; flex: none; display: block;
  border: var(--linie-breite) solid var(--linie); border-radius: var(--rund-klein); background: var(--karte); }

/* ---- mit Skript */
.laufband-aktiv .laufband-reihe { overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none;
  -webkit-user-select: none; }
.laufband-aktiv .laufband-reihe.laufband-gezogen { cursor: grabbing; }
.laufband-spur { display: flex; width: max-content; will-change: transform; }
.laufband-satz { display: flex; gap: var(--abstand-2); padding-right: var(--abstand-2); }

.laufband-bild { flex: none; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--rund-klein);
  transition: transform var(--dauer-kurz) var(--kurve); }
.laufband-bild:hover { transform: translateY(calc(-1 * var(--abstand-0))); }
.laufband-gezogen .laufband-bild { cursor: grabbing; }

.laufband-aktiv .laufband-spur { animation: laufband-links var(--laufband-dauer, 60s) linear infinite; }
.laufband-aktiv [data-richtung="rechts"] .laufband-spur { animation-name: laufband-rechts; }
.laufband-aktiv .laufband-reihe:hover .laufband-spur,
.laufband-aktiv .laufband-reihe:focus-within .laufband-spur,
.laufband-angehalten .laufband-spur { animation-play-state: paused; }

@keyframes laufband-links  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes laufband-rechts { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.laufband-halt { justify-self: end; font: inherit; font-size: var(--schrift-fein); color: var(--text-leise);
  background: none; border: var(--linie-breite) solid var(--linie); border-radius: var(--radius-pille);
  padding: var(--abstand-0) var(--abstand-2); cursor: pointer; display: none; }
.laufband-aktiv .laufband-halt { display: inline-block; }

.laufband-pfeile { display: none; justify-content: flex-end; gap: var(--abstand-1); }
.laufband-pfeil { font: inherit; font-size: var(--titel-4); line-height: 1; min-width: var(--tippziel);
  min-height: var(--tippziel); color: var(--text); background: var(--papier);
  border: var(--linie-breite) solid var(--linie); border-radius: var(--radius-pille); cursor: pointer; }

/* ---- stehend: nichts läuft von selbst, Pfeile blättern, Wischen scrollt */
@media (prefers-reduced-motion: reduce) {
  .laufband-aktiv .laufband-reihe { overflow-x: auto; scroll-snap-type: x proximity; }
  /* .laufband-reihe mit dabei: sonst gewinnt die Richtungsregel oben an Spezifität */
  .laufband-aktiv .laufband-reihe .laufband-spur { animation: none; transform: none; }
  .laufband-kopie { display: none; }
  .laufband-satz { padding-right: 0; }
  .laufband-aktiv .laufband-pfeile { display: flex; }
  .laufband-aktiv .laufband-halt { display: none; }
  .laufband-bild:hover { transform: none; }
}

/* ---- Lightbox: Vollbild */
.lightbox { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0;
  padding: var(--abstand-6) var(--abstand-10); border: 0; background: color-mix(in srgb, var(--anthrazit) 94%, transparent);
  color: var(--auf-dunkel); }
.lightbox::backdrop { background: color-mix(in srgb, var(--anthrazit) 60%, transparent); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox-figur { margin: 0; display: grid; gap: var(--abstand-2); justify-items: center; }
/* Grenzen in Sichtfeld-Einheiten, nicht in %: in der schrumpfenden Figur
   ergäbe max-width: 100% die Breite 0 — das Bild war unsichtbar (Aufnahme
   24.09.2026). Abzug = Innenabstand des Dialogs + Platz für den Bildtext. */
.lightbox-bild { max-width: calc(100vw - 2 * var(--abstand-10));
  max-height: calc(100vh - 2 * var(--abstand-6) - var(--abstand-8)); width: auto; height: auto;
  object-fit: contain; border-radius: var(--rund-klein); }
.lightbox-text { font-size: var(--schrift-klein); text-align: center; }
.lightbox-knopf { position: absolute; font: inherit; font-size: var(--titel-3); line-height: 1; min-width: var(--tippziel);
  min-height: var(--tippziel); color: var(--auf-dunkel); background: color-mix(in srgb, var(--auf-dunkel) 12%, transparent);
  border: 0; border-radius: var(--radius-pille); cursor: pointer; }
.lightbox-knopf:hover { background: color-mix(in srgb, var(--auf-dunkel) 24%, transparent); }
.lightbox-zurueck { left: var(--abstand-2); top: 50%; transform: translateY(-50%); }
.lightbox-weiter  { right: var(--abstand-2); top: 50%; transform: translateY(-50%); }
.lightbox-zu      { right: var(--abstand-2); top: var(--abstand-2); }
html.lightbox-offen { overflow: hidden; }

@media (max-width: 720px) {          /* = --bruch-handy */
  .lightbox { padding: var(--abstand-8) var(--abstand-1); }
  .lightbox-bild { max-width: calc(100vw - 2 * var(--abstand-1));
    max-height: calc(100vh - 2 * var(--abstand-8) - var(--abstand-8)); }
  .lightbox-zurueck, .lightbox-weiter { top: auto; bottom: var(--abstand-2); transform: none; }
}