/* Singerhaus Runner: das Maskottchen als Lauf-Schleife in einem cremefarbenen Siegel.
   Der Durchmesser kommt über --rs von der Route. Das Sprite hat 24 Bilder in einer Reihe
   (assets/images/real/runner-lauf.webp, aus dem Runner-Loop von TACTYC Dream). */

.runner {
  --rs: 72px;
  position: relative;
  display: block;
  flex: none;
  width: var(--rs);
  height: var(--rs);
  border-radius: 50%;
  background: #F5F1E8;
  overflow: hidden;
}
.runner::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  font-size: calc(var(--rs) * .76);
  width: 1em; height: 1em;
  margin: -.47em 0 0 -.5em;
  background: url("../assets/images/real/runner-lauf.webp") 0 0 / 24em 1em no-repeat;
  animation: runner-lauf 1.45s steps(24) infinite;
}
@keyframes runner-lauf {
  to { background-position-x: -24em; }
}