.kreis {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25); /* Leichte weiße Transparenz */
  backdrop-filter: blur(15px); /* Der edle Glas-Effekt */
  border: 2px solid rgba(113, 201, 206, 0.5); /* Feine silberne Kante */
  box-shadow: 0 0 40px rgba(58, 190, 249, 0.4); /* Der blaue Glow */
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  animation: appearIn 1.5s ease-out 2s forwards; /* Erscheint nach 2 Sek. */
  opacity: 0;
}

@keyframes appearIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
}

/* 1. Basiszustand: Fallback für Safari & Browser ohne Scroll-Animation Support */
header .custom-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  background: #06162d !important; /* Festes Dunkelblau */
  border-bottom: 2px solid #e2e8f0; /* Deine neue Border-Farbe */
  transition: all 0.4s ease;
}

/* 2. Scroll-Logik: Header erst beim Scrollen einblenden */
@supports (animation-timeline: scroll()) {
  header .custom-header {
    /* Startzustand: Komplett unsichtbar */
    transform: translateY(-100%);
    opacity: 0;
    border-bottom: 2px solid transparent;

    /* Animation-Steuerung */
    animation: revealHeader linear both;
    animation-timeline: scroll();
    /* Erscheint sanft zwischen 50px und 200px Scrolltiefe */
    animation-range: 50px 200px;
  }
}

/* 3. Die Animations-Schritte */
@keyframes revealHeader {
  from {
    transform: translateY(-100%);
    opacity: 0;
    background: transparent !important;
    border-bottom-color: transparent;
  }
  to {
    transform: translateY(0);
    opacity: 1;
    background: #06162d !important; /* Festes Dunkelblau ohne Blur */
    border-bottom-color: #e2e8f0; /* Deine Ziel-Farbe für die Border */
  }
}

/* 4. Hover-Effekt für die Menüpunkte */
header .custom-header a:hover {
  color: #e2e8f0 !important; /* Harmonisiert mit der neuen Border-Farbe */
  text-shadow: 0 0 8px rgba(226, 232, 240, 0.4);
}

@keyframes slow-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating-image {
  /* Wir nutzen !important, um sicherzugehen, dass kein anderes CSS dazwischenfunkt */
  animation: slow-rotate 120s linear infinite !important;
  
  /* Sicherstellen, dass das Element transformiert werden kann */
  display: block !important; 
  margin-left: auto;
  margin-right: auto;
}

.rotating-image:hover {
  animation-play-state: paused;
}

/* 1. Einzigartiger Name für die Animation, um Konflikte zu vermeiden */
@keyframes heartBeatSlow {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03); /* Nur 3% größer - sehr dezent */
  }
  100% {
    transform: scale(1);
  }
}

/* 2. Die Klasse für dein Bild */
.mein-edles-puls-bild {
  /* Wichtig: Ohne Block/Inline-Block funktioniert transform oft nicht */
  display: inline-block !important; 
  
  /* Die Animation */
  animation: heartBeatSlow 6s ease-in-out infinite !important;
  
  /* Damit das Bild beim Skalieren nicht flackert oder unscharf wird */
  will-change: transform;
  transform: translateZ(0);
}