/* glitch – alle paar Sekunden springen Streifen des Flyers kurz zur Seite, mit Farbversatz */
.fx-glitch { position: absolute; inset: 0; }
.fx-glitch i, .fx-glitch b { position: absolute; inset: 0; background: var(--img) center / cover no-repeat; opacity: 0; }
.fx-glitch i:nth-child(1) { clip-path: inset(17% 0 71% 0); animation: fx-glitch-a 5.5s steps(1) var(--fx-delay, 0s) infinite; }
.fx-glitch i:nth-child(2) { clip-path: inset(46% 0 42% 0); animation: fx-glitch-b 5.5s steps(1) var(--fx-delay, 0s) infinite; }
.fx-glitch i:nth-child(3) { clip-path: inset(78% 0 11% 0); animation: fx-glitch-a 5.5s steps(1) calc(var(--fx-delay, 0s) + .09s) infinite; }
.fx-glitch b { clip-path: inset(30% 0 52% 0); filter: hue-rotate(160deg) saturate(2.4); animation: fx-glitch-b 5.5s steps(1) calc(var(--fx-delay, 0s) + .05s) infinite; }
@keyframes fx-glitch-a { 0%, 86% { opacity: 0; transform: none; } 87% { opacity: 1; transform: translateX(-6%); } 88% { transform: translateX(4%); }
  89% { transform: translateX(-2%); } 90%, 94% { opacity: 0; transform: none; } 95% { opacity: 1; transform: translateX(3%); } 95.8%, 100% { opacity: 0; transform: none; } }
@keyframes fx-glitch-b { 0%, 86% { opacity: 0; transform: none; } 87% { opacity: 1; transform: translateX(5%); } 88% { transform: translateX(-7%); }
  89.5%, 100% { opacity: 0; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fx-glitch { display: none; } }
