/* lichtorgel2 – Multi-Lichtorgel wie im Calavera: 9 farbige Kreise auf einmal (Calavera-Farben). Die Gruppe blitzt
   an einer Stelle auf, huscht ein kurzes Stück über die Wand (dreht sich dabei ein wenig), verlischt und taucht nach
   einer kurzen Pause woanders wieder auf. Abfolge vorberechnet (9 Auftritte, Zyklus 9.8 s); nur
   transform und opacity. Auf der Kachel und der Seite im Hintergrund, nicht auf dem Flyer. */
.fx-lo2 { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.lo2-gruppe { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0;
  animation: lo2-huschen 9.76s linear calc(var(--fx-delay, 0s) * -1) infinite; }
.lo2-dreh { position: absolute; left: 0; top: 0; animation: lo2-drehen 23s linear infinite; }
.lo2-gruppe i { position: absolute; left: calc(var(--x) * var(--ks) * 1.08); top: calc(var(--y) * var(--ks) * 1.08);
  width: var(--ks); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: var(--lo, .5);
  background: radial-gradient(circle closest-side, var(--c) 0 72%, transparent 100%); }
@keyframes lo2-huschen { 0.000% { transform: translate(47.6cqw, 42.9cqh) rotate(0deg) scale(1.00); opacity: 0; animation-timing-function: linear; } 0.717% { transform: translate(47.6cqw, 42.9cqh) rotate(0deg) scale(1.00); opacity: 1; animation-timing-function: cubic-bezier(.25, .6, .35, 1); } 7.110% { transform: translate(63.4cqw, 56.0cqh) rotate(-35deg) scale(1.00); opacity: 1; animation-timing-function: ease-in; } 8.340% { transform: translate(63.4cqw, 56.0cqh) rotate(-35deg) scale(1.00); opacity: 0; animation-timing-function: steps(1, end); } 10.901% { transform: translate(75.5cqw, 26.5cqh) rotate(0deg) scale(0.96); opacity: 0; animation-timing-function: linear; } 11.619% { transform: translate(75.5cqw, 26.5cqh) rotate(0deg) scale(0.96); opacity: 1; animation-timing-function: cubic-bezier(.25, .6, .35, 1); } 17.737% { transform: translate(55.3cqw, 21.5cqh) rotate(-32deg) scale(0.96); opacity: 1; animation-timing-function: ease-in; } 18.966% { transform: translate(55.3cqw, 21.5cqh) rotate(-32deg) scale(0.96); opacity: 0; animation-timing-function: steps(1, end); } 25.114% { transform: translate(63.0cqw, 47.3cqh) rotate(0deg) scale(0.88); opacity: 0; animation-timing-function: linear; } 25.832% { transform: translate(63.0cqw, 47.3cqh) rotate(0deg) scale(0.88); opacity: 1; animation-timing-function: cubic-bezier(.25, .6, .35, 1); } 31.132% { transform: translate(60.5cqw, 36.3cqh) rotate(-18deg) scale(0.88); opacity: 1; animation-timing-function: ease-in; } 32.362% { transform: translate(60.5cqw, 36.3cqh) rotate(-18deg) scale(0.88); opacity: 0; animation-timing-function: steps(1, end); } 33.899% { transform: translate(50.4cqw, 73.7cqh) rotate(0deg) scale(1.07); opacity: 0; animation-timing-function: linear; } 34.616% { transform: translate(50.4cqw, 73.7cqh) rotate(0deg) scale(1.07); opacity: 1; animation-timing-function: cubic-bezier(.25, .6, .35, 1); } 41.741% { transform: translate(30.8cqw, 65.0cqh) rotate(-8deg) scale(1.07); opacity: 1; animation-timing-function: ease-in; } 42.971% { transform: translate(30.8cqw, 65.0cqh) rotate(-8deg) scale(1.07); opacity: 0; animation-timing-function: steps(1, end); } 45.532% { transform: translate(24.5cqw, 38.3cqh) rotate(0deg) scale(0.88); opacity: 0; animation-timing-function: linear; } 46.250% { transform: translate(24.5cqw, 38.3cqh) rotate(0deg) scale(0.88); opacity: 1; animation-timing-function: cubic-bezier(.25, .6, .35, 1); } 51.480% { transform: translate(14.1cqw, 24.2cqh) rotate(-5deg) scale(0.88); opacity: 1; animation-timing-function: ease-in; } 52.709% { transform: translate(14.1cqw, 24.2cqh) rotate(-5deg) scale(0.88); opacity: 0; animation-timing-function: steps(1, end); } 54.246% { transform: translate(35.1cqw, 33.8cqh) rotate(0deg) scale(1.12); opacity: 0; animation-timing-function: linear; } 54.964% { transform: translate(35.1cqw, 33.8cqh) rotate(0deg) scale(1.12); opacity: 1; animation-timing-function: cubic-bezier(.25, .6, .35, 1); } 59.769% { transform: translate(30.5cqw, 50.0cqh) rotate(-21deg) scale(1.12); opacity: 1; animation-timing-function: ease-in; } 60.999% { transform: translate(30.5cqw, 50.0cqh) rotate(-21deg) scale(1.12); opacity: 0; animation-timing-function: steps(1, end); } 63.561% { transform: translate(74.3cqw, 25.1cqh) rotate(0deg) scale(0.98); opacity: 0; animation-timing-function: linear; } 64.278% { transform: translate(74.3cqw, 25.1cqh) rotate(0deg) scale(0.98); opacity: 1; animation-timing-function: cubic-bezier(.25, .6, .35, 1); } 71.561% { transform: translate(59.9cqw, 34.7cqh) rotate(-33deg) scale(0.98); opacity: 1; animation-timing-function: ease-in; } 72.791% { transform: translate(59.9cqw, 34.7cqh) rotate(-33deg) scale(0.98); opacity: 0; animation-timing-function: steps(1, end); } 74.328% { transform: translate(76.0cqw, 28.3cqh) rotate(0deg) scale(1.12); opacity: 0; animation-timing-function: linear; } 75.045% { transform: translate(76.0cqw, 28.3cqh) rotate(0deg) scale(1.12); opacity: 1; animation-timing-function: cubic-bezier(.25, .6, .35, 1); } 80.092% { transform: translate(63.3cqw, 22.1cqh) rotate(6deg) scale(1.12); opacity: 1; animation-timing-function: ease-in; } 81.321% { transform: translate(63.3cqw, 22.1cqh) rotate(6deg) scale(1.12); opacity: 0; animation-timing-function: steps(1, end); } 87.470% { transform: translate(31.0cqw, 22.5cqh) rotate(0deg) scale(0.88); opacity: 0; animation-timing-function: linear; } 88.187% { transform: translate(31.0cqw, 22.5cqh) rotate(0deg) scale(0.88); opacity: 1; animation-timing-function: cubic-bezier(.25, .6, .35, 1); } 96.209% { transform: translate(48.7cqw, 29.6cqh) rotate(-34deg) scale(0.88); opacity: 1; animation-timing-function: ease-in; } 97.438% { transform: translate(48.7cqw, 29.6cqh) rotate(-34deg) scale(0.88); opacity: 0; animation-timing-function: steps(1, end); } 100% { transform: translate(47.6cqw, 42.9cqh) scale(1.00); opacity: 0; } }
@keyframes lo2-drehen { to { transform: rotate(360deg); } }
.lo2-tile { --ks: min(21cqw, 30cqh); --lo: .5; }
.lo2-page { --ks: 150px; --lo: .36; }
@media (max-width: 640px) { .lo2-page { --ks: 96px; } }
@media (prefers-reduced-motion: reduce) { .lo2-gruppe { opacity: 1; transform: translate(50cqw, 45cqh); } }