/* Reellauf-Band aller Guides. ERZEUGT von produktion/guide-werkzeuge/reellauf-bauen.py,
   nicht von Hand aendern. Dauer und Weg setzt reellauf.js je Band als Variable. */

/* Ohne Skript bleibt der Platzhalter leer und nimmt keinen Platz, statt dessen steht der
   <noscript>-Link darunter. */
.reellauf:empty { display:none; }
.reellauf__ohne { margin:22px 0 0; text-align:center; }

/* 🔴 Luft ueber und unter der Reihe, 16.09.2026. Das Band klippt waagerecht (overflow:hidden),
   und die Kachel war genauso hoch wie das Band. Beim Vergroessern im Hover wurde sie oben und
   unten abgeschnitten, die runden Ecken waren deshalb nicht zu sehen. Das Polster faengt den
   Zuwachs (rund 9 px je Seite bei scale 1.045) und den Schatten auf; der Aussenabstand ist um
   dieselbe Hoehe kleiner, damit die Reihe an derselben Stelle sitzt wie vorher. */
/* Rechnung fuer die Luft unten: Zuwachs im Hover 396 x 0,045 / 2 = 9 px, dazu der Schatten
   mit 8 px Versatz und 20 px Unschaerfe = 37 px. 46 px Polster lassen 9 px Reserve, der
   Schatten laeuft also vollstaendig aus, bevor das Band klippt. Oben: 9 + (20 - 8) = 21 px < 26. */
.reellauf { position:relative; z-index:2; width:100%; margin-top:38px; padding:26px 0 46px; overflow:hidden; }
.reellauf::before, .reellauf::after {
  content:""; position:absolute; top:0; bottom:0; width:120px; z-index:3; pointer-events:none;
}
.reellauf::before { left:0;  background-image: linear-gradient(90deg, var(--papier), rgba(247,244,238,0)); }
.reellauf::after  { right:0; background-image: linear-gradient(90deg, rgba(247,244,238,0), var(--papier)); }
.reellauf__spur { display:flex; width:max-content; will-change:transform; animation: reellauf-lauf var(--reellauf-dauer, 60s) linear infinite; }
/* Haelt bei Tastaturfokus und unter dem Mauszeiger an. Seit 30.09.2026 uebernimmt guide-v2.js
   das Band: die Maus steuert Tempo und Richtung, in der Mitte steht es still. Diese Regeln
   gelten nur, wenn guide-v2.js die Steuerung nicht uebernimmt. */
.reellauf:hover .reellauf__spur,
.reellauf:focus-within .reellauf__spur { animation-play-state: paused; }
@keyframes reellauf-lauf { from { transform: translate3d(0,0,0); } to { transform: translate3d(var(--reellauf-weg, -50%),0,0); } }

/* Die Kachel ist das Cover selbst mit runder Maske, ohne Rahmen. Masse und Seitenverhaeltnis
   wie in der Vorlage (400 x 565 und die Stufen darunter), mal 0,7 seit 13.09.2026. */
.reellauf__kachel {
  position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;
  width:280px; flex:0 0 280px; height:396px; margin-right:16px;
  border-radius:16px; background: var(--nacht); color:#fff; text-decoration:none;
}
/* 🔴 Kein filter auf dem Bild (16.09.2026). Sobald das Bild beim Ueberfahren einen filter
   bekommt, klippt Chromium die skalierte Kachel nicht mehr an ihrer runden Maske: die Ecken
   werden eckig. Der Hover zeigt die Kachel deshalb nur groesser, mit Schatten. */
.reellauf__kachel img { width:100%; height:100%; object-fit:cover; object-position: 50% 6%; border-radius:inherit; display:block; }
.reellauf__leer { border-radius:inherit; }
/* Kein blauer Ring und kein Abdunkeln der uebrigen (16.09.2026): der Ring wirkte an 8 px
   Radius eckig, das Abdunkeln unruhig. */
@media (hover: hover) {
  .reellauf__kachel { transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease; }
  .reellauf .reellauf__kachel:hover {
    transform: scale(1.045); z-index:4;
    box-shadow: 0 8px 20px rgba(20,19,15,0.24);
  }
}
/* Reel ohne Cover: die Kachel bleibt in der Reihe, statt dass sie fehlt. */
.reellauf__leer {
  display:block; width:100%; height:100%;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 10px, rgba(255,255,255,0) 10px 20px);
}
.reellauf__kachel:focus-visible { outline:3px solid var(--marke); outline-offset:3px; z-index:4; }
.reellauf__schild {
  position:absolute; inset:20px auto auto 20px; z-index:10;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:20px;
  background-color:#363636ba; border:1px solid var(--marke);
  box-shadow: 0 0 0 1px rgba(87,197,251,0.20), 0 0 14px rgba(87,197,251,0.55), inset 0 0 10px rgba(87,197,251,0.16);
  font-size:10px; line-height:12px; font-weight:500; letter-spacing:1px; text-transform:uppercase;
  color:#fff; white-space:nowrap;
}
.reellauf__raute { flex:0 0 auto; color: var(--marke); filter: drop-shadow(0 0 4px rgba(87,197,251,0.75)); }
@media (max-width: 991px) { .reellauf__kachel { width:329px; flex-basis:329px; height:465px; } }
@media (max-width: 767px) { .reellauf { margin-top:18px; } .reellauf__kachel { width:246px; flex-basis:246px; height:348px; } }
@media (max-width: 479px) {
  .reellauf__kachel { width:181px; flex-basis:181px; height:255px; }
  /* Schmale Kacheln: das Schild lag oben ueber Nummer und Titel des Covers und lief bei langen
     Labels ueber den Rand (15.09.2026). Kleiner, an der Unterkante, nie breiter als die Kachel. */
  .reellauf__schild {
    inset:auto auto 8px 8px; max-width: calc(100% - 16px); gap:6px; padding:6px 9px; border-radius:14px;
    font-size:9px; line-height:11px; letter-spacing:0.06em; overflow:hidden; text-overflow:ellipsis;
  }
}
@media (prefers-reduced-motion: reduce) { .reellauf__spur { animation:none; } }