/**
 * Blätteranimationen
 */

.blatt_1.animation {
  animation: blatt_1 4s linear infinite;
}

@keyframes blatt_1 {
  0% {
    transform: rotate(-15deg);
  }
  10% {
    transform: rotate(-14deg);
  }
  20% {
    transform: rotate(-13deg);
  }
  30% {
    transform: rotate(-12deg);
  }
  40% {
    transform: rotate(-11deg);
  }
  50% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(-11deg);
  }
  70% {
    transform: rotate(-12deg);
  }
  80% {
    transform: rotate(-13deg);
  }
  90% {
    transform: rotate(-14deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}

.blatt_2.animation {
  animation: blatt_2 3.5s linear infinite;
}

@keyframes blatt_2 {
  0% {
    transform: rotate(20deg);
  }
  10% {
    transform: rotate(19deg);
  }
  20% {
    transform: rotate(18deg);
  }
  30% {
    transform: rotate(17deg);
  }
  40% {
    transform: rotate(16deg);
  }
  50% {
    transform: rotate(15deg);
  }
  60% {
    transform: rotate(16deg);
  }
  70% {
    transform: rotate(17deg);
  }
  80% {
    transform: rotate(18deg);
  }
  90% {
    transform: rotate(19deg);
  }
  100% {
    transform: rotate(20deg);
  }
}

.blatt_3.animation {
  animation: blatt_3 4.5s linear infinite;
}

@keyframes blatt_3 {
  0% {
    transform: rotate(15deg) scaleX(-1);
  }
  10% {
    transform: rotate(16deg) scaleX(-1);
  }
  20% {
    transform: rotate(17deg) scaleX(-1);
  }
  30% {
    transform: rotate(18deg) scaleX(-1);
  }
  40% {
    transform: rotate(19deg) scaleX(-1);
  }
  50% {
    transform: rotate(20deg) scaleX(-1);
  }
  60% {
    transform: rotate(19deg) scaleX(-1);
  }
  70% {
    transform: rotate(18deg) scaleX(-1);
  }
  80% {
    transform: rotate(17deg) scaleX(-1);
  }
  90% {
    transform: rotate(16deg) scaleX(-1);
  }
  100% {
    transform: rotate(15deg) scaleX(-1);
  }
}

.blatt_4.animation {
  animation: blatt_4 4.2s linear infinite;
}

@keyframes blatt_4 {
  0% {
    transform: rotate(50deg) scaleX(-1);
  }
  10% {
    transform: rotate(49deg) scaleX(-1);
  }
  20% {
    transform: rotate(48deg) scaleX(-1);
  }
  30% {
    transform: rotate(47deg) scaleX(-1);
  }
  40% {
    transform: rotate(46deg) scaleX(-1);
  }
  50% {
    transform: rotate(45deg) scaleX(-1);
  }
  60% {
    transform: rotate(46deg) scaleX(-1);
  }
  70% {
    transform: rotate(47deg) scaleX(-1);
  }
  80% {
    transform: rotate(48deg) scaleX(-1);
  }
  90% {
    transform: rotate(49deg) scaleX(-1);
  }
  100% {
    transform: rotate(50deg) scaleX(-1);
  }
}

.blatt_5.animation {
  animation: blatt_5 4.2s linear infinite;
}

@keyframes blatt_5 {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(1deg);
  }
  20% {
    transform: rotate(2deg);
  }
  30% {
    transform: rotate(3deg);
  }
  40% {
    transform: rotate(4deg);
  }
  50% {
    transform: rotate(5deg);
  }
  60% {
    transform: rotate(4deg);
  }
  70% {
    transform: rotate(3deg);
  }
  80% {
    transform: rotate(2deg);
  }
  90% {
    transform: rotate(1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.blatt_6.animation {
  animation: blatt_6 3.7s linear infinite;
}

@keyframes blatt_6 {
  0% {
    transform: rotate(-15deg) scaleX(-1);
  }
  10% {
    transform: rotate(-16deg) scaleX(-1);
  }
  20% {
    transform: rotate(-17deg) scaleX(-1);
  }
  30% {
    transform: rotate(-18deg) scaleX(-1);
  }
  40% {
    transform: rotate(-19deg) scaleX(-1);
  }
  50% {
    transform: rotate(-20deg) scaleX(-1);
  }
  60% {
    transform: rotate(-19deg) scaleX(-1);
  }
  70% {
    transform: rotate(-18deg) scaleX(-1);
  }
  80% {
    transform: rotate(-17deg) scaleX(-1);
  }
  90% {
    transform: rotate(-16deg) scaleX(-1);
  }
  100% {
    transform: rotate(-15deg) scaleX(-1);
  }
}

.blatt_7.animation {
  animation: blatt_7 4.2s linear infinite;
}

@keyframes blatt_7 {
  0% {
    transform: rotate(-35deg);
  }
  10% {
    transform: rotate(-34deg);
  }
  20% {
    transform: rotate(-33deg);
  }
  30% {
    transform: rotate(-32deg);
  }
  40% {
    transform: rotate(-31deg);
  }
  50% {
    transform: rotate(-30deg);
  }
  60% {
    transform: rotate(-31deg);
  }
  70% {
    transform: rotate(-32deg);
  }
  80% {
    transform: rotate(-33deg);
  }
  90% {
    transform: rotate(-34deg);
  }
  100% {
    transform: rotate(-35deg);
  }
}

.blatt_8.animation {
  animation: blatt_8 3.2s linear infinite;
}

@keyframes blatt_8 {
  0% {
    transform: rotate(-15deg);
  }
  10% {
    transform: rotate(-16deg);
  }
  20% {
    transform: rotate(-17deg);
  }
  30% {
    transform: rotate(-18deg);
  }
  40% {
    transform: rotate(-19deg);
  }
  50% {
    transform: rotate(-20deg);
  }
  60% {
    transform: rotate(-19deg);
  }
  70% {
    transform: rotate(-18deg);
  }
  80% {
    transform: rotate(-17deg);
  }
  90% {
    transform: rotate(-16deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}

.blatt_9.animation {
  animation: blatt_9 3.9s linear infinite;
}

@keyframes blatt_9 {
  0% {
    transform: rotate(-25deg) scaleX(-1);
  }
  10% {
    transform: rotate(-24deg) scaleX(-1);
  }
  20% {
    transform: rotate(-23deg) scaleX(-1);
  }
  30% {
    transform: rotate(-22deg) scaleX(-1);
  }
  40% {
    transform: rotate(-21deg) scaleX(-1);
  }
  50% {
    transform: rotate(-20deg) scaleX(-1);
  }
  60% {
    transform: rotate(-21deg) scaleX(-1);
  }
  70% {
    transform: rotate(-22deg) scaleX(-1);
  }
  80% {
    transform: rotate(-23deg) scaleX(-1);
  }
  90% {
    transform: rotate(-24deg) scaleX(-1);
  }
  100% {
    transform: rotate(-25deg) scaleX(-1);
  }
}

.blatt_10.animation {
  animation: blatt_10 3.9s linear infinite;
}

@keyframes blatt_10 {
  0% {
    transform: rotate(20deg) scaleX(-1);
  }
  10% {
    transform: rotate(19deg) scaleX(-1);
  }
  20% {
    transform: rotate(18deg) scaleX(-1);
  }
  30% {
    transform: rotate(17deg) scaleX(-1);
  }
  40% {
    transform: rotate(16deg) scaleX(-1);
  }
  50% {
    transform: rotate(15deg) scaleX(-1);
  }
  60% {
    transform: rotate(16deg) scaleX(-1);
  }
  70% {
    transform: rotate(17deg) scaleX(-1);
  }
  80% {
    transform: rotate(18deg) scaleX(-1);
  }
  90% {
    transform: rotate(19deg) scaleX(-1);
  }
  100% {
    transform: rotate(20deg) scaleX(-1);
  }
}

.blatt_11.animation {
  animation: blatt_11 3.4s linear infinite;
}

@keyframes blatt_11 {
  0% {
    transform: rotate(80deg);
  }
  10% {
    transform: rotate(81deg);
  }
  20% {
    transform: rotate(82deg);
  }
  30% {
    transform: rotate(83deg);
  }
  40% {
    transform: rotate(84deg);
  }
  50% {
    transform: rotate(85deg);
  }
  60% {
    transform: rotate(84deg);
  }
  70% {
    transform: rotate(83deg);
  }
  80% {
    transform: rotate(82deg);
  }
  90% {
    transform: rotate(81deg);
  }
  100% {
    transform: rotate(80deg);
  }
}

.blatt_12.animation {
  animation: blatt_12 5s linear infinite;
}

@keyframes blatt_12 {
  0% {
    transform: rotate(55deg) scaleX(-1);
  }
  10% {
    transform: rotate(56deg) scaleX(-1);
  }
  20% {
    transform: rotate(57deg) scaleX(-1);
  }
  30% {
    transform: rotate(58deg) scaleX(-1);
  }
  40% {
    transform: rotate(59deg) scaleX(-1);
  }
  50% {
    transform: rotate(60deg) scaleX(-1);
  }
  60% {
    transform: rotate(59deg) scaleX(-1);
  }
  70% {
    transform: rotate(58deg) scaleX(-1);
  }
  80% {
    transform: rotate(57deg) scaleX(-1);
  }
  90% {
    transform: rotate(56deg) scaleX(-1);
  }
  100% {
    transform: rotate(55deg) scaleX(-1);
  }
}

/** Tier-Animation **/

.tier_6.animation {
  animation: tier 4s linear infinite;
}

.tier_4.animation {
  animation: tier 4.2s linear infinite;
}

.tier_5.animation {
  animation: tier 3s linear infinite;
}

.tier_1.animation {
  animation: tier 3.1s linear infinite;
}

.tier_7.animation {
  animation: tier 4.3s linear infinite;
}

.tier_2.animation {
  animation: faultier 5.5s linear infinite;
}

.tier_3.animation {
  animation: faultier 4.6s linear infinite;
}

.tier_9.animation {
  animation: faultier 4.8s linear infinite;
}

@keyframes tier {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  98% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes faultier {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  87% {
    opacity: 0.5;
  }
  90% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  98% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}