/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 320px) {
  
  .test
  {
    background-color:rgb(229, 255, 0);
  }

  h1
  {
    font-size: 2.4rem
  }

  .animated-text {
  font-size: 1rem;
  animation: laufweiteAnim 5s ease-in-out forwards;
  /* Ausgangszustand: normale Laufweite */
  letter-spacing: normal;
  display: inline-block;
  color: #020065;
  font-weight: bold;
  text-transform: uppercase;
  }

  @keyframes laufweiteAnim {
    from {
      letter-spacing: normal;
    }
    to {
      letter-spacing: 0.2rem; /* Laufweite erhöhen */
    }
  }

}



/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
  
  .test
  {
    background-color:rgb(255, 0, 170);
  }

  .animated-text {
  font-size: 1.5rem;
  animation: laufweiteAnim 5s ease-in-out forwards;
  /* Ausgangszustand: normale Laufweite */
  letter-spacing: normal;
  display: inline-block;
  color: #020065;
  font-weight: bold;
    text-transform: uppercase;
  }

  @keyframes laufweiteAnim {
    from {
      letter-spacing: normal;
    }
    to {
      letter-spacing: 0.4rem; /* Laufweite erhöhen */
    }
  }

}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {

  .test
  {
    background-color:rgb(47, 0, 255);
  }

  .animated-text {
    font-size: 24px;
    animation: laufweiteAnim 5s ease-in-out forwards;
    /* Ausgangszustand: normale Laufweite */
    letter-spacing: normal;
    display: inline-block;
    color: #020065;
    font-weight: bold;
      text-transform: uppercase;
  }

  @keyframes laufweiteAnim {
    from {
      letter-spacing: normal;
    }
    to {
      letter-spacing: 0.6em; /* Laufweite auf das 1,5-fache erhöhen */
    }
  }
    
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {

  .test
  {
    background-color:rgb(0, 255, 85);
  }

}

/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

  .test
  {
    background-color:aqua;
  }

}

/* XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
  
  .test
  {
    background-color: blueviolet;
  }

}