.blurr {
  filter: blur(50px);
  transition: filter 0.8s linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrambleTextPlugin.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const cards = document.querySelectorAll(".media");
  const headings = document.querySelectorAll(".marquee-big-txt");

  if (!cards.length || !headings.length) return;

  // Originaltexte merken
  const originalTexts = Array.from(headings).map(h => h.textContent);

  cards.forEach(card => {
    card.addEventListener("mouseenter", () => {
      const newTitle = card.getAttribute("data-bg-heading-titel");
      if (newTitle) {
        headings.forEach(h => {
          gsap.to(h, {
            duration: 1.2, 
            scrambleText: {
              text: newTitle,
              chars: "upperCase", // oder "lowerCase", "symbols", eigenes String-Set
              revealDelay: 0.3,
              tweenLength: true
            },
            ease: "power2.out"
          });
        });
      }
    });

    card.addEventListener("mouseleave", () => {
      headings.forEach((h, i) => {
        gsap.to(h, {
          duration: 1.2,
          scrambleText: {
            text: originalTexts[i],
            chars: "©ª15®°™±",
            revealDelay: 0.1,
						speed: 1.4,
            tweenLength: false
          },
          ease: "power2.out"
        });
      });
    });
  });
});
</script>