h1 {
  font-family: 'Literata', serif;
  font-weight: 500;
  font-style: normal;
  /* optional: größer, mehr Abstand etc. */
  letter-spacing: 0.05em;
  font-size: 21vw;

  opacity: 0; 
  animation: fadeIn 2s ease forwards;
  margin-top: 5rem;
  margin-bottom: 3rem;

  font-family: "BBH Sans Hegarty", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.triangle-grid {
  display: flex;
  flex-wrap: nowrap;
  width: auto;
  height: auto;

  overflow: hidden;
  background-color: black;


    transform: translateX(-200%);
  animation: slideIn 3s ease forwards;
  animation-delay: 3s;
}

.triangle {
  width: 0; 
  height: 0; 
  border-left: 6vw solid transparent;
  border-right: 6vw solid transparent;
  
  border-bottom: 10vw solid var(--pink);
}

.triangle:first-child {
  /* erstes Dreieck */
    border-left: 0 solid transparent;
  border-bottom: 10vw solid var(--turkies);

}

.triangle:last-child {
      border-right: 0 solid transparent;
border-bottom: 10vw solid var(--turkies);

}

nav {
      opacity: 0;
  transform: translateY(-50px);
  animation: slideDown 0.8s ease-out 2s forwards;
}

#construction {
  font-size: 1.5rem;
  color: var(--pink);
  background-color: black;


  font-family: "BBH Sans Hegarty", sans-serif;
  font-weight: 400;
  font-style: normal;
  padding: .5rem;

    width: auto;
  height: auto;
      transform: translateX(-300%);
  animation: slideIn 3s ease forwards;
  animation-delay: 3s;
}

#claim {
    font-family: "BBH Sans Hegarty", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 5rem;
  color: var(--pink);
  text-align: center;
  margin-bottom: 2rem;

  opacity: 0; 
  animation: fadeIn 2s ease forwards;
  animation-delay: 2s;

  /* -webkit-text-stroke: 3px black;  */
}