@font-face {
  font-family: 'Open Sans';
  src: url('../schriften/OpenSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


.heroanim-text-overlay {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.heroanim-title {
  font-size: 3rem;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: bold;
  color: #fff;
  position: relative;
  white-space: nowrap;
}

/* Basis für Buchstaben, absolut positioniert */
.heroanim-letter {
  position: absolute;
  opacity: 1;
  transition: transform 1.5s ease, opacity 0.5s ease;
  font-weight: 700;
}

/* Startpositionen weit links / rechts */
.heroanim-letter-e {
  left: 0;
  top: 0;
  transform: translateX(-150px);
}

.heroanim-letter-l {
  right: 0;
  top: 0;
  transform: translateX(150px);
}

/* Text, der nachher erscheint */
.heroanim-etique-text,
.heroanim-legal-text {
  opacity: 0;
  transition: opacity 1s ease;
  font-weight: 700;
  display: inline-block;
  white-space: nowrap;
  position: relative;
  top: 0;
}

/* Sichtbar machen */
.heroanim-etique-text.visible,
.heroanim-legal-text.visible {
  opacity: 1;
}

/* Container für finale Wörter (damit sie nebeneinander stehen) */
.heroanim-final-text {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
  position: relative;
  opacity: 0;
  transition: opacity 1s ease;
}

.heroanim-final-text.visible {
  opacity: 1;
}