#logo {
  position: relative;
  z-index: 10;
  max-width: 512px;
  width: 90vw;
  height: auto;
  opacity: 1; /* Anfangswerte setzen */
  animation: logoZoomFade 1s forwards ease;
  will-change: opacity, transform;
}


@keyframes logoZoomFade {
  0% {
    transform: scale(0.6);
    opacity: 1;
  }
  16% {
    transform: scale(0.9);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

#splash {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 5;
}

#golden-hour {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #FFD200, #FF0064);
  animation: backgroundFadeOut 3s 0s forwards ease;
  will-change: opacity;
}

#porcelain-sheen {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fff, #f8fdf7);
  animation: backgroundFadeOut 3s 0s forwards ease;
  will-change: opacity;
}

@keyframes backgroundFadeOut {
  0% { 
    opacity: 1; 
  }
  100% { 
    opacity: 0; 
  }
}

.body-background-orange {
  background-color: #fdfaf7;
}

.body-background-green {
  background-color: #f8fdf7;
}

.soft-background-gold {
  background-color: #FFF7DB ;
}

.soft-background-orange {
  background-color: #fff3e0;
}

.soft-background-green {
  background-color: #e0ffe2;
}

.soft-background-blue {
  background-color: #E0F2FF;
}

.clean-background-blue {
  background-color: #F3F5F8;
}

.clean-background-green {
  background-color: #F0F7F0;
}

.clean-background-gold {
  background-color: #F0F7F0;
}