<a href="/" class="logo-link">
  <video id="logoVideo" poster="https://vistalino.com/wp-content/uploads/2025/10/Logo_v1-720.jpg" autoplay muted playsinline width="680">
    <source src="https://vistalino.com/wp-content/uploads/2025/10/Logo_Animation_2sad.mp4" type="video/mp4">
    <img src="https://vistalino.com/wp-content/uploads/2025/10/Logo_v1-720.jpg" alt="Vistalino Logo">
  </video>
</a>

.logo-link {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  line-height: 0;
}

#logoVideo {
  max-width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  vertical-align: middle;
  opacity: 1;
  transition: opacity 0.8s ease-in-out;
  background:white;
  border-radius: 2em;
}

#logoVideo.fade-out {
  opacity: 0;
}

/* Für kleinere Bildschirme */
@media (max-width: 768px) {
  #logoVideo {
    width: 100%;
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const logoVideo = document.getElementById('logoVideo');
  
  if (logoVideo) {
    logoVideo.addEventListener('ended', function() {
      // Crossfade-Effekt
      this.classList.add('fade-out');
      
      setTimeout(() => {
        this.load();
        this.removeAttribute('autoplay');
        this.classList.remove('fade-out');
      }, 800); // 800ms für längeren, sanfteren Übergang
    });
  }
});