/* domain	start-v7-1.macht.design - index.php */
.hero-section {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.full-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%; /* Wichtig: Die Höhe muss fix 100% sein */
  width: auto;   /* Die Breite ergibt sich aus dem Seitenverhältnis (25/100) */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.glass-box {
  fill: rgba(255, 255, 255, 0.9); 
}

.hero-section:hover .glass-box {
  fill: rgba(255, 255, 255, 0.8);
  transition: fill 0.5s ease;
}

text.upper {
      text-transform: uppercase;
    }

.svg-overlay text {
  /* Überschreibt das Attribut im SVG für bessere Kontrolle */
  font-size: 14px; 
  transform-origin: 17.5px 50px;
  animation: solarFadeIn 1.5s ease-out forwards;
  animation-delay: 0.5s; 
  opacity: 0;
}
@media (max-width: 480px) {
  .svg-overlay {
    width: 50%;
  }
}

@media (max-width: 600px) {
  .svg-overlay text {
    font-size: 8px; 
  }
}

@keyframes solarFadeIn {
  from {
    opacity: 0;
    /* da der Text um -90 Grad gedreht ist, wirkt translateX wie ein 'von unten kommen' */
    transform: rotate(-90deg) translateX(-30px); 
  }
  to {
    opacity: 1;
    transform: rotate(-90deg) translateX(0);
  }
}