/* Natural High · Das Band der Orte
   ---------------------------------------------------------------------------
   ⭐ HERAUSGELOEST AM 23.08.2026.
   Chris: "Sollten wir das Bilderkarussell auch in die App bei der Session
   reinmachen? Das macht es lebendig, ist ja die Startseite von Mein Bereich."

   Zweimal dieselben Regeln waeren zwei Orte, an denen sie auseinanderlaufen -
   und beim ersten neuen Bild faellt es niemandem auf. Also eine Datei, zwei
   Seiten. Die Bilder selbst stehen in orte.js, ebenfalls an einer Stelle.   */
/* ---- Das Band der Orte -------------------------------------------------
   Chris am 21.08.: "es muss 20-30 % von rechts starten, nach links laufen
   bis 20-30 % links."

   ⭐ KEIN transform. DAS WAR DER GANZE FEHLER.
   Das Band traegt `.auf` - die Einblendung der Seite. Und die endet mit
   `@keyframes auf{to{transform:none}}`. Eine laufende Animation schlaegt
   jede normale Regel: Mein `transform:translateX(-50%)` wurde geloescht,
   sobald die Einblendung durch war. Uebrig blieb `margin-left:50%` ohne
   Gegenzug - das Band stand ab der Seitenmitte und lief rechts hinaus.

   Und warum ich es dreimal richtig gemessen habe: Im versteckten Reiter
   laeuft keine Animation. Dort blieb mein transform stehen, und alles sah
   gut aus. Chris sah es kaputt, ich sah es heil - dieselbe Datei.

   Jetzt kommt die Mitte aus den RAENDERN, nicht aus einer Verschiebung.
   Ein Rand kann von keiner Animation ueberschrieben werden.

   `--band` setzt das Skript auf einen Pixelwert aus der echten
   Seitenbreite (ohne Rollbalken). Faellt das Skript aus, greift der
   Rueckfall 56 % - dann rechnet calc(50% - 56%/2) genau 22 % Rand.      */
.orte-band{
  width:var(--band, 56%);
  margin:clamp(1.8rem,5vh,2.8rem) 0 0 calc(50% - var(--band, 56%) / 2);
  overflow:hidden;
  /* Die Bilder kommen und gehen, statt an einer Kante abgeschnitten zu
     werden. Mit Zwischenstufen, damit auch der Verlauf keine Kante hat. */
  --rand:linear-gradient(90deg,
    transparent 0%, rgba(0,0,0,.35) 5%, rgba(0,0,0,.8) 11%, #000 19%,
    #000 81%, rgba(0,0,0,.8) 89%, rgba(0,0,0,.35) 95%, transparent 100%);
  -webkit-mask-image:var(--rand);
          mask-image:var(--rand);
}
.orte-lauf{
  display:flex; width:max-content; gap:1rem;
  /* Sagt dem Browser vorher Bescheid - dann liegt es einmal auf der
     Grafikkarte und laeuft auch auf dem Telefon ohne Ruckeln. */
  will-change:transform;
  /* Die Dauer setzt das Skript: gleiche GESCHWINDIGKEIT bei jeder Anzahl,
     nicht gleiche Dauer. Sonst rast das Band, sobald Bilder dazukommen. */
  animation:orte-links var(--dauer, 90s) linear infinite;
}
.orte-band:hover .orte-lauf,
.orte-band:focus-within .orte-lauf{animation-play-state:paused}

.orte-lauf img{
  flex:0 0 auto;
  width:clamp(12rem, 20vw, 20rem); height:auto; aspect-ratio:3/2;
  display:block; object-fit:cover; object-position:58% 50%;
  border-radius:14px;
  /* Ring nach INNEN statt border: overflow beschneidet am Innenrand, ein
     Rahmen liesse an den runden Ecken ein Haar stehen. */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  /* Die Bilder sind warm, die Seite ist kuehl und dunkel. Ein Hauch
     weniger Saettigung und Helligkeit, und sie gehoeren dazu, statt zu
     rufen. */
  filter:saturate(.9) brightness(.9);
  transition:filter .6s ease;
}
.orte-band:hover .orte-lauf img{filter:saturate(.98) brightness(1)}

/* Von rechts nach links. Die zweite Haelfte ist die erste noch einmal -
   erst dadurch ist der Sprung von -50 % zurueck auf 0 unsichtbar. */
@keyframes orte-links{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-50%,0,0)}
}

/* Wer das nicht will, bekommt es nicht: das Band steht still. */
@media (prefers-reduced-motion: reduce){
  .orte-lauf{animation:none}}