html,
body {
  margin: 0;
  padding: 0;
  }

body{
  /*width: 100vw;*/
  /*height: 100vh;*/
  /*height: 100%;*/
  /*min-height: 100%;*/
  /*box-sizing: border-box; */
  /*background: linear-gradient(280deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);*/
  /*display: flex;*/
  justify-content: center;
  align-items: center;
}

body > * {
  margin: 0;
  padding: 0;
  box-sizing: inherit; 
}

.menu__toggler {
  position: fixed;
  top: 20px;
  /*left: 20px;*/
  right: 20px;
  z-index: 9999;
  height: 28px;
  width: 28px;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
 }

nav,
nav::after,
nav::before {
  position: absolute;
  content:'';
  width: 28px;
  height: 2.5px;
  background: #FAFAFA;
  border-radius: 20px;
  /*transition: 500ms cubic-bezier(0.77,0,0.175, 1);*/
  transition: 800ms cubic-bezier(0.77,0,0.175, 1);

}

/*span::before{
  top: -8px;
}

span::after{
  top: 8px;
}

.menu__toggler.active > span {
  background: transparent;
}

.menu__toggler.active > span::after,
.menu__toggler.active > span::before {
  background: #005C9C;
  top: 0;
 
}

.menu__toggler.active > span::before { 
  transform: rotate(-225deg);
}

.menu__toggler.active > span::after { 
  transform: rotate(225deg);
}*/

nav::before{
  top: -8px;
}

nav::after{
  top: 8px;
}

.menu__toggler.active > nav {
  background: transparent;

}

.menu__toggler.active > nav::after,
.menu__toggler.active > nav::before {
  background: #bbac90;
  top: 0;
 
}

.menu__toggler.active > nav::before { 
  transform: rotate(-225deg);

}

.menu__toggler.active > nav::after { 
  transform: rotate(225deg);

}

.menu{
  /*position: absolute;*/
  position: fixed; /* nach toggen polygonform bleibt konstant*/
  z-index: 998;
  right: -100%;
  /*background: #FFF;*/
  /*background: #ac0f1ab5;*/
  background: #ac0f1aed;
  height: 100%;
  /*width: 30%;*/
  /*clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);*/
  clip-path: polygon(0 0, 100% 0, 100% 100%, 35% 100%);
  padding: 100px;
  /*display: flex; nav-text mittig zentriert*/
  flex-direction: column;
  justify-content: center;
  /*transition: 800ms left cubic-bezier(0.77, 0, 0.175, 1);*/
  transition: 800ms right cubic-bezier(0.77, 0, 0.175, 1);
  margin: 0%; /* toggle aus => top ohne Lücke*/
  /*-webkit-transition: left 500ms, right 500ms, opacity 500ms;*/
  text-align: -moz-right;
  /*text-align: -moz-center;*/
}

.menu.active {
  /*left: 0%;*/
  right: 0%;
  margin: 0%;
  position: fixed;

}
/*body:after{
  width: 100%;
  height: 100%;
  background-color: rgba(166, 77, 121, 1);
  opacity: 0.8;
}*/






ul li{
  list-style: none;
  width: max-content;
  top: 10%;
}

.menu a {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  text-decoration: none;
  /*color: #005c9c;*/
  color: #bbac90;
  line-height: 3em;
  text-decoration: none;

}

.menu a:hover{
    color: white;
    -webkit-transition: all 0.9s ease 0s;   /* <= Chrome, Safari, Opera */
    -moz-transition: all 0.9s ease 0s;      /* <= Firefox */
    transition: all 0.9s ease 0s;

}


/*MEDIA SMARTPHONE*/
@media screen and (max-width:600px){
  /*Ham-Menu*/
html,
body {
  margin: 0;
  padding: 0;
  }

body{
  /*width: 100vw;*/
  /*height: 100vh;*/
  /*height: 100%;*/
  /*min-height: 100%;*/
  /*box-sizing: border-box; */
  /*background: linear-gradient(280deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);*/
  /*display: flex;*/
  justify-content: center;
  align-items: center;
}

body > * {
  margin: 0;
  padding: 0;
  box-sizing: inherit; 
}

.menu__toggler {
  position: fixed;
  top: 20px;
  /*left: 20px;*/
  right: 20px;
  z-index: 9999;
  height: 28px;
  width: 28px;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
 }

nav,
nav::after,
nav::before {
  position: absolute;
  content:'';
  width: 28px;
  height: 2.5px;
  background: #FAFAFA;
  border-radius: 20px;
  /*transition: 500ms cubic-bezier(0.77,0,0.175, 1);*/
  transition: 800ms cubic-bezier(0.77,0,0.175, 1);

}

/*span::before{
  top: -8px;
}

span::after{
  top: 8px;
}

.menu__toggler.active > span {
  background: transparent;
}

.menu__toggler.active > span::after,
.menu__toggler.active > span::before {
  background: #005C9C;
  top: 0;
 
}

.menu__toggler.active > span::before { 
  transform: rotate(-225deg);
}

.menu__toggler.active > span::after { 
  transform: rotate(225deg);
}*/

nav::before{
  top: -8px;
}

nav::after{
  top: 8px;
}

.menu__toggler.active > nav {
  background: transparent;

}

.menu__toggler.active > nav::after,
.menu__toggler.active > nav::before {
  background: #bbac90;
  top: 0;
 
}

.menu__toggler.active > nav::before { 
  transform: rotate(-225deg);

}

.menu__toggler.active > nav::after { 
  transform: rotate(225deg);

}

.menu{
  /*position: absolute;*/
  position: fixed; /* nach toggen polygonform bleibt konstant*/
  z-index: 998;
  right: -100%;
  /*background: #FFF;*/
  /*background: #ac0f1ab5;*/
  background: #ac0f1aed;
  height: 100%;
  /*width: 30%;*/
  /*clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);*/
  clip-path: polygon(0 0, 100% 0, 100% 100%, 35% 100%);
  padding: 60px 50px 0px 100px;
  /*display: flex; nav-text mittig zentriert*/
  flex-direction: column;
  justify-content: center;
  /*transition: 800ms left cubic-bezier(0.77, 0, 0.175, 1);*/
  transition: 800ms right cubic-bezier(0.77, 0, 0.175, 1);
  margin: 0%; /* toggle aus => top ohne Lücke*/
  /*-webkit-transition: left 500ms, right 500ms, opacity 500ms;*/
  text-align: -moz-right;
  /*text-align: -moz-center;*/
    font-weight: bold;

}

.menu.active {
  /*left: 0%;*/
  right: 0%;
  margin: 0%;
  position: fixed;

}
/*body:after{
  width: 100%;
  height: 100%;
  background-color: rgba(166, 77, 121, 1);
  opacity: 0.8;
}*/






ul li{
  list-style: none;
  width: max-content;
  top: 10%;
}

.menu a {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  text-decoration: none;
  /*color: #005c9c;*/
  color: #bbac90;
  line-height: 2.5em;
  text-decoration: none;

}

.menu a:hover{
    color: white;
    -webkit-transition: all 0.9s ease 0s;   /* <= Chrome, Safari, Opera */
    -moz-transition: all 0.9s ease 0s;      /* <= Firefox */
    transition: all 0.9s ease 0s;

  }
}