#animation2 {
    overflow: hidden;
    display: none;
    width: 60%;
    margin: auto auto 100px auto;
    height: auto;
    max-height: 1000px;
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    z-index: 9;
    background-color: white;
}

.headA {
    text-align: center;
    color: #4d7735;
    margin: 0;
}

.arrowA {
    width: 50%;
}

#seseragiA {
    grid-row: 3;
    grid-column: 3;
    z-index: 5;
    justify-self: center;
    align-self: center;
    /* animation: ltr 20s infinite linear; */
    background-image: -webkit-linear-gradient(0deg,
            #eda54f 0%,
            #eda54f 50%,
            #92cceb 50%,
            #92cceb 100%);
    background-image: linear-gradient(90deg,
            #eda54f 0%,
            #eda54f 50%,
            #92cceb 50%,
            #92cceb 100%);
    background-size: 200%;
}

#arrA {
    grid-row: 3;
    grid-column: 3;
    z-index: 6;
    width: 20%;
    justify-self: center;
    align-self: center;
    /* animation: flip 20s infinite linear; */
}

#cold-fanA {
    grid-row: 4;
    grid-column: 3;
    z-index: 5;
    width: 70%;
    align-self: center;
    justify-self: center;
    /* animation: rotateLeft 20s infinite linear;
    animation-delay: 10s; */
}

#hot-fanA {
    grid-row: 2;
    grid-column: 3;
    z-index: 5;
    width: 70%;
    align-self: center;
    justify-self: center;
    /* animation: rotateRight 20s infinite linear; */
}

#rA {
    grid-row: 4;
    color: black;
    grid-column: 4 / 6;
    margin: 0;
    border: 2px solid #92cceb;
    padding: 5px;
    border-radius: 5px;
    z-index: 5;
    justify-self: center;
    align-self: center;
    /* animation: switch 20s infinite linear; */
}

#lA {
    grid-row: 2;
    color: black;
    grid-column: 1 / 3;
    margin: 0;
    border: 2px solid #eda54f;
    padding: 5px;
    border-radius: 5px;
    z-index: 5;
    justify-self: center;
    align-self: center;
    /* animation: switch 20s infinite linear;
    animation-delay: 10s; */
}

#inA {
    grid-row: 4;
    grid-column: 2;
    margin: 0;
    color: #eda54f;
    font-weight: bold;
    z-index: 5;
    justify-self: center;
    align-self: start;
}

#inA:before {
    content: "屋内の熱を蓄積";
    animation: changeIN 20s infinite linear;
}

#outA {
    grid-row: 2;
    grid-column: 4;
    margin: 0;
    color: #01479d;
    font-weight: bold;
    z-index: 5;
    justify-self: center;
    align-self: end;
}

#outA:before {
    content: "屋外に排気";
    animation: changeOUT 20s infinite linear;
}


/* Language Config */
#outA:before {
    content: "Luft ausstoßen";
    animation: changeOUT 20s infinite linear;
}

#inA:before {
    content: "Wärme speichern";
    animation: changeIN 20s infinite linear;
}

#ZA-container {
    grid-row: 1 / 6;
    grid-column: 3;
    z-index: 90;
    background-color: transparent;
    border-radius: 50%;
    /* animation: rotate 10s infinite linear; */
}

#ZA {
    background: #4d7735;
    height: 15%;
    left: 49.5%;
    position: relative;
    top: 16%;
    transform-origin: -10% 60%;
    width: 6px;
}

#clock {
    grid-row: 1 / 6;
    grid-column: 1 / 6;
    z-index: 89;
    width: 60%;
    background-color: transparent;
    border-radius: 50%;
    align-self: center;
    justify-self: center;
    opacity: 0.25;
}

#head1 {
    grid-row: 1;
    grid-column: 3;
    align-self: end;
  }
  
  #head2 {
    grid-row: 5;
    grid-column: 3;
  }
  
  #head3 {
    grid-row: 3;
    grid-column: 5;
    align-self: center;
  }
  
  #head4 {
    grid-row: 3;
    grid-column: 1;
    align-self: center;
  }
    
  #ahA {
    grid-row: 3;
    grid-column: 2;
    z-index: 5;
    justify-self: center;
    align-self: center;
    /* animation: flip 20s infinite linear; */
  }
  
  #acA {
    grid-row: 3;
    grid-column: 4;
    z-index: 5;
    justify-self: center;
    align-self: center;
    /* animation: flip 20s infinite linear; */
  }


  @keyframes ltr {
    0% {
      background-position: 100% 0%;
    }
    50% {
      background-position: 0% 0%;
    }
    100% {
      background-position: 100% 0%;
    }
  }
  
  @keyframes switch {
    0% {
      opacity: 0;
    }
    45% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    95% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  
  @keyframes changeOUT {
    0% {
      opacity: 0;
    }
    4% {
      opacity: 1;
    }
    46% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    54% {
      opacity: 1;
    }
    96% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      content: "屋外より給気";
    }
  }
  
  @keyframes changeIN {
    0% {
      opacity: 0;
    }
    4% {
      opacity: 1;
    }
    46% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    54% {
      opacity: 1;
    }
    96% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      content: "屋内に熱を放出";
    }
  }
  
  @keyframes rotate {
    100% {
      transform: rotateZ(360deg);
    }
  }
  
  @keyframes flip {
    0% {
      transform: scale(1);
    }
    49% {
      transform: scale(1);
    }
    50% {
      transform: scaleX(-1);
    }
    99% {
      transform: scaleX(-1);
    }
    100% {
      transform: scaleX(1);
    }
  }
  
  @keyframes rotateRight {
    0% {
      transform: rotate(0deg);
    }
    16.6% {
      transform: rotate(360deg);
    }
    33.2% {
      transform: rotate(720deg);
    }
    50%,
    100% {
      transform: rotateZ(1080deg);
    }
  }
  
  @keyframes rotateLeft {
    0% {
      transform: rotate(0deg);
    }
    16.6% {
      transform: rotate(-360deg);
    }
    33.2% {
      transform: rotate(-720deg);
    }
    50%,
    100% {
      transform: rotateZ(-1080deg);
    }
  }