/* ICON für Hamburger */

#icon{
    position:absolute;
    width:40px;
    height: 37px;
    top: 2rem;
    left: 25px;
    z-index: 1200;
    
  }
  /* für die einzelen Linien*/
  #icon span{
    position:absolute;
    height: 7px;
    border-radius: 2px;
    width: 40px;    
    background-color: var(--gelb);
    border: solid 0.5px #000;
    display: block;
    transition: all 0.5s;
    z-index: 20000;
  }
  /* :nth-child() n-te Kind, pseudoklasse benutzt man wie eine KLasse */
  #icon span:nth-child(1){
    top: 0px;
  }
  #icon span:nth-child(2){
    top: 12px;
  }
  #icon span:nth-child(3){
    top: 24px;
  }


  /* Kreuz mit Rotation , id = icon wird mit Klasse = kreuz verknüpft und mit span verknüpft */
  #icon.kreuz span:nth-child(1) {
    transform: rotate(-135deg); /* 135° */
    top: 19px;
    background-color: var(--gelb);
  }

  #icon.kreuz span:nth-child(2) {
    transform: rotate(135deg);
    top: 18px;
    background-color: var(--gelb);
  }

  #icon.kreuz span:nth-child(3) {
    transform: rotate(135deg);
    top: 18px;
    background-color: var(--gelb);
  }



  /* ____________Menueee______________________________*/


  #menue {
    position: absolute;
    background-color: #fb628b;
    background-color: #fbf7d0;
    background-color: #D0D4FB;
    z-index: 100;
    width: 100%;
    _border-bottom:solid 0.1rem;
  }

  #navId{
    display: block;
    position: sticky;
    top: 0rem;
    z-index: 24400;

  }
  nav ul{
    overflow: hidden; 
   
  }
  nav ul li{
    display:inline; 
   
  }
  nav ul li a{
    font-family: 'Rubik Regular';
    text-decoration: none;
    font-size: 2rem;
    
  }

  
    /* Höhe für das Menu */

  #menue.einblenden{     /* Einstellung für die Klasse einblenden , Höhe auf automatisch */
  height: 100vh;
  background-color: rgba(248, 236, 228, 0.931);
  background-color: #D0D4FB;
  display: block;

  }



/*  NAVIGATION EINGEBLENDET */ 

  #icon{
    display: block; /* !!!!!! Icon wird eingeblendet */
  }
  nav ul{
    height:0px; /* !!!!!! Höhe auf 0, damit die Menu punkte verschwinden */
    overflow: hidden;
    padding-top:90px ;
    transition: all 1s; /* Übergang */
 
   
  }
  nav ul li{
    display: block; /* !!!!!!! damit die Menupunkte untereinander stehen */
    margin: 20px 40px 20px 25px; 

  }

  nav ul li a{
    font-size: 2.4rem;
  }

   
@media (min-width:1024px) {

    #icon {
        display: none;
    } 
    nav ul{
        height:auto;
        max-width: 250px;
        padding: 0px;
        padding-top: 20px;
        padding-bottom: 20px;
        display: block;
        list-style-type: none;
        _border-right: solid #333 0.1rem;
        _border-bottom: solid #333 0.1rem;
       
      }


    nav ul li { 
      margin: 0px 0px 0px 12px;
      display: block;
      padding: 0;
      padding-left: 5%;
      width: 20px;
      font-family:'Rubik Light';
      
    }

    nav ul li a {
      font-size: 2.4rem;
      color: #333;
    }
    
    #menue span{
      display: none;
      height: 0px;
      width: 100%;
      z-index: 2000;
      position: absolute;
    }

    #menue {
      background-color: white;
      background-color: #d0d4fb6e;
      _background-color: #fbf7d0;
      border-bottom-right-radius: 2rem;
      padding-bottom: 2rem;
  

    }

  
    
}