body {
  margin: 0;
  padding: 0;
  position: relative;
}

.menu-toggle {
  width: 40px;
  height: 30px;
  position: absolute;
  top: 14px;                                                      /* hier Abstand von oben der Menü Navigation - Burger - ändern */
  left: 20px;                                                     /* hier Abstand von rechts der Menü Navigation - Burger - ändern */
  cursor: pointer;
  z-index: 111;
}
.menu-toggle.on .one {
  -moz-transform: rotate(45deg) translate(7px, 7px);
  -ms-transform: rotate(45deg) translate(7px, 7px);
  -webkit-transform: rotate(45deg) translate(7px, 7px);
  transform: rotate(45deg) translate(7px, 7px);
}
.menu-toggle.on .two {
  opacity: 0;
}
.menu-toggle.on .three {
  -moz-transform: rotate(-45deg) translate(8px, -10px);
  -ms-transform: rotate(-45deg) translate(8px, -10px);
  -webkit-transform: rotate(-45deg) translate(8px, -10px);
  transform: rotate(-45deg) translate(8px, -10px);
}

.one,
.two,
.three {
  width: 100%;
  height: 5px;
  background: #ffffff;                                            /* hier Farbe der Menü Navigation - Burger - ändern */
  margin: 6px auto;
  backface-visibility: hidden;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

nav ul {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;                      /* hier Schriftart der Menü Punkte ändern */
  list-style: none;
  margin: 100px auto;                                             /* hier Abstand von oben der Menü Punkte ändern */
  text-align: left;
}
nav ul.hidden {
  display: none;
}
nav ul a {
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  text-decoration: none;
  color: #ffffff;                                   /* hier Farbe der Menü Punkte ändern */
  margin-left:50px;                                 /* hier Abstand von links der Menü Punkte ändern */
  font-size:18px;                                      /* hier Schriftgröße der Menü Punkte ändern */
  letter-spacing:1px;
  line-height:22px;                                 /* hier Zeilenabstand der Menü Punkte ändern */
  width: 0px;                                       /* hier Breite des Rollover der Menü Punkte ändern */
  display: block;
}
nav ul a:hover {
  /*background-color: rgba(0, 0, 0, 0.5);*/
  color: #ffffff;                                    /* hier Farbe des Rollover der Menü Punkte ändern */
}

.menu-section{
    transition: height 0.5s ease-out;
    overflow: hidden;
    z-index: 110;
    width: 100%;
    min-width: 320px;
    height:0px;                                     /* hier Breite des Menü Hintergrunds ändern */
    right: 0px;                                     /* hier Abstand von rechts des Menü Hintergrunds ändern */
    background-color: rgba(130, 40, 50, 1);           /* hier Farbe und Transparenz des Menü Hintergrunds ändern */
    position: absolute;
}

.menu-section.on {
  display: block;
  transition: height 0.5s ease-in;
}