/* buehnennebel (Kegel auch für spotlight) */
/* Bühnennebel: Dunst + zwei Scheinwerferkegel, die langsam schwenken (nur Drehung → günstig) */
.fx-haze { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.fx-haze > span { --kw: 400cqh; position: absolute; left: 0; top: 0; width: calc(100cqw + var(--kw)); height: 100%; background: url("/static/img/fx/nebel-dunst.webp") repeat-x 0 0 / var(--kw) 100%;
  opacity: .3; animation: fx-drift 120s linear infinite; }
/* Kegel als vorberechnetes Bild (mit Dithering gegen Streifen), läuft im Bild nach unten ganz aus */
.fx-beam { position: absolute; top: -2%; left: var(--bx); height: var(--bh, 125%); aspect-ratio: 1 / 2; translate: -50% 0; transform-origin: 50% 0;
  background: var(--img) center top / 100% 100% no-repeat; opacity: var(--o, 1);
  animation: fx-schwenk var(--d) ease-in-out var(--dl, 0s) infinite alternate; }
/* Bühnennebel: Die Strahler sind immer Licht im RAUM – nie im Flyer. Sie laufen im Hintergrund der Kachel
   bzw. der Seite; der Flyer steht davor. Über dem Flyer liegt nur ein Hauch Dunst (keine Kanten, kein Licht). */
.fx-beam--a { --img: url("/static/img/fx/kegel-rot.webp"); --d: 11s; }
.fx-beam--b { --img: url("/static/img/fx/kegel-warm.webp"); --d: 14s; --dl: -5s; }
.fx-flyer .fx-haze > span { opacity: .22; }

/* Detailseite */
.fx-page .fx-beam--a { --bx: 22%; --von: -24deg; --bis: 16deg; }
.fx-page .fx-beam--b { --bx: 78%; --von: 20deg; --bis: -18deg; }
/* normale Kachel: kürzer, endet vor dem unteren Rand */
.fx-tile .fx-beam--a { --bx: 22%; --bh: 75%; --o: .85; --von: -18deg; --bis: 14deg; }
.fx-tile .fx-beam--b { --bx: 78%; --bh: 75%; --o: .9; --von: 14deg; --bis: -14deg; }
/* große erste Kachel: breiter Raum */
.tile.is-next .fx-tile .fx-beam--a { --bx: 34%; --bh: 120%; --von: -26deg; --bis: 18deg; }
.tile.is-next .fx-tile .fx-beam--b { --bx: 82%; --bh: 120%; --von: 22deg; --bis: -20deg; }