@charset "UTF-8";
/* CSS Document */


.wort-animation {
	position:relative;
	left:8%;
  display: flex;
  align-items: center;
  width: fit-content;
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  font-size: clamp(32px, 6vw, 80px);
  line-height: 1.2;
}

.wort-fenster {
  position: relative;
  width: 5.1em;
  height: 1.2em;
  overflow: hidden;
}

.wort-liste {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: #006588;
  animation: durchlauf 12s linear infinite;
}

.wort-liste span {
  display: block;
  height: 1.2em;
  line-height: 1.2;
  white-space: nowrap;
}

.endung {
  color: #000;
  white-space: nowrap;
}

@keyframes durchlauf {
  0%, 13% {
    transform: translateY(-6em);
  }
  20%, 33% {
    transform: translateY(-4.8em);
  }
  40%, 53% {
    transform: translateY(-3.6em);
  }
  60%, 73% {
    transform: translateY(-2.4em);
  }
  80%, 93% {
    transform: translateY(-1.2em);
  }
  100% {
    transform: translateY(0);
  }
}


.fade-in {
  animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}






/*projectfader*/

.projfader {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
	border-radius:50%;
}

.projfader img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

.projfader img.active {
  opacity: 1;
}