@keyframes open {
     from {
       left: -100vw;
     }
     to {
       left: 0;
     }
   }

   #burgerbutton {
     display: none;
   }
   /* Im Produktiven Einsatz sollte der Text-Teil des Label-Elements vielleicht durch eine Hintergrund-Grafik ersetzt werden. */

   .burgerimage {
     position: absolute;
     top: 5px;
     left: 10px;
     font-size: 3.0em;
     cursor: pointer;
     transition: transform 0.8s ease;
     color: #1C1C1C;
     margin: 0px;
   }

   nav {
     background-color: #fff;
     display: block;
     height: 70px;
     /*border-bottom: 3px solid red;*/
     position: fixed;
     top: 5px;
     left: 0;
     width: 60px;
     z-index: 100;
     opacity: 1.0;
   }

   nav ul {
     display: none;
     position: fixed;
     top: 53px;
     margin: 0;
     padding: 0;
     width: 50vw;
     list-style: none;
   }

   nav ul li {
     display: block;
     width: auto;
   }

   nav ul li a {
     text-decoration: none;
     color: #0000FF;
     background-color: #fff;
     border-bottom: 1px solid darkred;
     display: block;
     padding: 20px;
     transition: background 0.5s ease;
   }

   nav ul li a:hover {
     background-color: pink;
     color: darkred;
   }

   #burgerbutton:checked ~ ul {
     display: block;
     animation-name: open;
     animation-duration: 0.8s;
   }

   #burgerbutton:checked ~ .burgerimage {
     transform: rotate(360deg);
   }

@media only screen and (max-width: 850px) {
  .burgerimage {
    left: 5px;
    top: 3px;
    font-size: 3.5em;
  }
  nav ul {
    top: 60px;
    width: 70vw;

  }
}

@media only screen and (max-width: 500px) {
  .burgerimage {
    left: 5px;
    top: 1px;
    font-size: 2.8em;
  }
  nav ul {
    top: 60px;
    width: 70vw;
  }
  nav ul li a {
    padding: 12px;
  }
  nav {
    height: 60px;
    width: 50px;
  }
}