@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .animated-hero-bg {
    background: linear-gradient(-45deg, #fdfaf6, #f5efe4, #e4d8c0, #fdfaf6);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
  }

   @keyframes smokeShift {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
  }

  .hero-smoke {
    background: radial-gradient(circle at 30% 30%, #e4d8c0 0%, #f5efe4 40%, #fdfaf6 100%);
    background-size: 200% 200%;
    animation: smokeShift 25s ease-in-out infinite;
  } 
  /* Animierter Verlauf 
  @keyframes smokeShift {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
  }

  .hero-smoke {
    background: linear-gradient(-45deg, #e4d8c0, #f5efe4, #fdfaf6);
    background-size: 400% 400%;
    animation: smokeShift 30s ease-in-out infinite;
  }

  /* Fade-Effekt für Mini-Bilder 
  .fade-image {
    position: absolute;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    pointer-events: none;
  }

  /* Elegante Überschrift 
  .elegant-heading {
    font-family: 'Georgia', 'Garamond', serif;
    letter-spacing: 0.05em;
  } 
  /* @keyframes smokeShift {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
  }

  .hero-smoke {
    background:
      url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42mP8z8AARAwMDIQAAX8AGYv2N40AAAAASUVORK5CYII=') repeat,
      linear-gradient(-45deg, #e4d8c0, #f5efe4, #fdfaf6);
    background-blend-mode: overlay;
    background-size: cover, 400% 400%;
    animation: smokeShift 30s ease-in-out infinite;
  } */