/* Allgemeines Styling */

@keyframes breathingGradient {
  0%, 100% {
    background-image: radial-gradient(circle at center 35%, rgba(255,255,255,0.3) 20%, rgba(0,0,0,1) 80%);
  }
  50% {
    background-image: radial-gradient(circle at center 35%, rgba(255,255,255,0.5) 30%, rgba(0,0,0,1) 70%);
  }
}
  
  /* Hero-Bereich */
  .hero {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 140vh; /* Erhöht die Höhe, um den Gradienten auslaufen zu lassen */
    /*background: radial-gradient(circle at center 35%, rgba(255,255,255,0.3) 20%, rgba(0,0,0,1) 60%);*/
    background: radial-gradient(circle at center 35%, rgba(255,255,255,0.3) 20%, rgba(0,0,0,1) 60%);
    /*animation: breathingGradient 8s ease-in-out infinite;*/
    text-align: center;
    margin-bottom: 0;
    overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at center 35%, rgba(255,255,255,0.5) 30%, rgba(0,0,0,1) 50%);
  opacity: 0;
  transition: opacity 4s ease-in-out;
  z-index: 0;
}

.hero:hover::before {
  opacity: 1;
}

.hero-content {
  position: absolute;
  top: 50vh; /* Zentriert den Inhalt in den ursprünglichen 100vh */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
  
  .hero-content h1 {
    font-size: 2.5vw;
    font-weight: 400;
    line-height: 1.2;
  }

  #name {
    font-size: 6vw;
    font-weight: 700; /* Fettgedruckter Name */
    /*cursor: pointer;*/
  }

  .hero-content p {
    font-size: 1.8vw;
    color: rgba(255, 255, 255, 0.8);
  }