nav {
  width: 100%;
font-weight:900;
    height:50px;
	background:rgba(255,255,255,0.7) 50%,
}

#checkbox1,
.toggle {
  display: none;
}

.menu {
  padding: 0;
  margin: 0;
  max-width: 767px;
  height: 50px;
  display: flex;
  flex-direction: row;
 /* justify-content: space-around;
  align-items: center;*/
  list-style-type: none;
}

.menu li a {
  text-decoration: none;
    color:var(--lilablau);
  align-self: center;
  padding: 10px 16px;
  transition: background .2s linear;
     letter-spacing: 1px
}



/* –––––––––––––––––––––––––––––––––––––––––––– */

@media screen and (max-width: 767px) {
    
    
nav {
    background:#bfd2de;
    font-size:1rem;
    height:auto;

}    
    
  .toggle {
    clear: both;
    display: block;
    text-align: center;
    font-size: 30px;
    line-height: 40px;
    cursor: pointer;
    width: 100%;
    height: 40px;
    color: #3e4b74;
    background: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.7) 20%, rgba(255,255,255,0.2) 100%);
    transition: all .1s linear;
  }
  .toggle:hover {
    background:rgba(255,255,255,0.5)
  }
  #checkbox1:checked + label .mobil li {
    opacity: 1;
    visibility: visible;
    transition: all .7s linear;
  }

  #checkbox1:checked + label .mobil {
    height: 200px;
  }
  .menu {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 0px;
    transition: height .3s linear;
      float:none;
  }
  .menu li {
    display: flex;
    /* magic */
    align-self: center;
    width: 100%;
    opacity: 0;
    visibility: hidden;
     /* border: solid 1px red;
      margin:0;*/
  }
  .menu li a {
    width: 100%;
    text-align: center;
    align-self: center;
    align-content: center;
    color:#fff;
    text-transform:uppercase;
      font-weight:900;
      background-color:var(--lilablau);
      letter-spacing: 1px
  }

}



/*.mobil li a {
  color: #3e4b74;
}

.mobil li a:hover {
  text-decoration: underline;
}*/