.page.page-template-page-placeholder {
  background: #034883;
  color: #fff !important;
}

.page.page-template-page-placeholder header {
  display: none;
}

.page.page-template-page-placeholder hr {
  color: #fff;
  border-width: 2px;
  opacity: 1;
  width: 0;
  animation: 2.2s expandLine forwards;
}

@keyframes expandLine {
  100% {
    width: 100%;
  }
}

.page.page-template-page-placeholder .coming-soon {
  animation: 1.5s fadeInRight;
  font-family: "ofelia-display", serif;
  color: #fff;
}

@keyframes fadeInRight {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

.soon-text .animated-letter {
  display: inline-block;
  transition: transform 0.3s ease, color 0.5s ease;
}

/* Staggered Color Change Animation */
@keyframes colorChange {
  from {
    color: white;
  }
  to {
    color: var(--final-color);
  }
}

/* Staggered Wave Animation */
@keyframes wave {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes show {
  100% {
    opacity: 1;
  }
}

/* Apply staggered animations */
.soon-text .animated-letter:nth-child(1) {
  --final-color: #a38bc1;
  animation: colorChange 1s 1.1s forwards, wave 1s 1.2s ease-in-out 1;
}
.soon-text .animated-letter:nth-child(2) {
  --final-color: #a9c6a9;
  animation: colorChange 1s 1.2s forwards, wave 1s 1.4s ease-in-out 1;
}
.soon-text .animated-letter:nth-child(3) {
  --final-color: #71b2d1;
  animation: colorChange 1s 0.1s forwards, wave 1s 0s ease-in-out 1,
    show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
  opacity: 0;
}
.soon-text .animated-letter:nth-child(4) {
  --final-color: #c1888f;
  animation: colorChange 1s 0.1s forwards, wave 1s 0s ease-in-out 1,
    show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;

  opacity: 0;
}
.soon-text .animated-letter:nth-child(5) {
  --final-color: #f49b5e;
  animation: colorChange 1s 0.1s forwards, wave 1s 0s ease-in-out 1,
    show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
  opacity: 0;
}
.soon-text .animated-letter:nth-child(6) {
  --final-color: #dabd72;
  animation: colorChange 1s 0.1s forwards, wave 1s 0s ease-in-out 1,
    show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
  opacity: 0;
}

.last-letter {
  display: inline-block;
  transition: transform 1s ease-in-out;
}

/* font sizes */

@media (min-width: 320px) {
  .page.page-template-page-placeholder .coming-soon {
    font-size: 42px;
  }
}

@media (min-width: 375px) {
  .page.page-template-page-placeholder .coming-soon {
    font-size: 49px;
  }
}

@media (min-width: 420px) {
  .page.page-template-page-placeholder .coming-soon {
    font-size: 57px;
  }
}

@media (min-width: 576px) {
  .page.page-template-page-placeholder .coming-soon {
    font-size: 64px;
  }
}

@media (min-width: 1199px) {
  .page.page-template-page-placeholder .coming-soon {
    font-size: 77px;
  }
}

@media (min-width: 1440px) {
  .page.page-template-page-placeholder .coming-soon {
    font-size: 84px;
  }
}

@media (max-width: 992px) {
  .page.page-template-page-placeholder .coming-soon {
    width: 100%;
    height: auto;
  }
}

.entry p:not(.lead) {
  color: #fff !important;
}

.viola {
  color: #a38bc1 !important;
}

.grun {
  color: #a9c6a9 !important;
}

.blau {
  color: #71b2d1 !important;
}

.rot {
  color: #c1888f !important;
}

.orange {
  color: #f49b5e !important;
}
.gelb {
  color: #dabd72 !important;
}