/* Paket 66 — der echte Belegerl (mit Lupe) läuft durch die Buttons der Startseite, wie in der App: 8-Bild-Lauf-Sprite
   (/assets/run/belegerl-run-8.webp?v=p66), so hoch wie der Button, transparent, ganz im Button. Die Laufbewegung berechnet blrun.js
   (Web Animations) – weich anlaufen, Bildwechsel im Takt der Strecke, rechts hinaus, links herein, weich auslaufen. */
.pill.blb { overflow: hidden; isolation: isolate; padding-left: var(--pl, 3.1rem); --fl: 10px; }
.pill.blb.pill-sm { --fl: 7px; }
.blfig { position: absolute; left: var(--fl, 10px); top: 3px; bottom: 3px; aspect-ratio: 150 / 207; z-index: 2; pointer-events: none;
  transform: translate3d(0, 0, 0); will-change: transform; filter: drop-shadow(0 2px 3px rgba(11, 19, 32, .28)); }
.blfig .blspr { position: absolute; inset: 0; display: block; background-repeat: no-repeat; background-size: 800% 100%; background-position: 0% 0%;
  transform-origin: 50% 100%; animation: blr-breathe 2.6s ease-in-out infinite; }
@keyframes blr-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.6px); } }
@media (hover: hover) { .pill.blb:hover:not(.q-go) .blfig .blspr { animation: blr-hop .55s cubic-bezier(.34, 1.56, .64, 1); } }
@keyframes blr-hop { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-3px) scale(1.04); } 70% { transform: translateY(0) scale(.98, 1.02); } }
.pill.blb.q-go .blfig .blspr { animation: none; }
.pill.blb > *:not(.blfig) { transition: opacity .25s ease; }
.pill.blb.q-go .arr { opacity: 0; }
.pill.blb.q-in .blfig { animation: blr-pop .8s cubic-bezier(.22, 1, .36, 1) .1s backwards; }
@keyframes blr-pop { 0% { transform: translate3d(0, 60%, 0) scale(.6); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .blfig, .blfig * { animation: none !important; } }