#header {
    position: fixed;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    height: var(--header_height);
    width: 100%;
    align-items: center;
    top: 0px;
    background-color: var(--main_color);
    z-index: 3;
    transition: 0.4s;
  }
  
  #header h1 {
    font-size: 1.5rem;
  }
  /*logo css und animation*/
  #header_logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
    position: relative;
  }
  #header_logo_logo{
    height: 100%;
    cursor: pointer;
    object-fit: contain;
    transition: 0.3s;
  }
  #header_logo_note{
    width: 20%;
    height: 20%;
    position: absolute;
    top: 25%;
    left: 20%;
    opacity: 0;
  }
  #header_logo_logo:hover {
    transform: scale(1.1);
  }
  #header_logo_logo:hover ~ #header_logo_note{
    animation: note_movement 1s linear;
  }
  @keyframes note_movement {
    0%{}
    50%{opacity: 1; transform: translateX(-3rem);}
    100%{opacity: 0; transform: translateX(-6rem);}
  }
  
  
  
  
  /*logo css und animation-------ende*/
  
  
  
  #menue {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
  
  .menue_point {
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;
    margin-left: 1.5rem;
  
  
  }
  
  .menue_point_content {
    font-size: 0.9rem;
    text-decoration: none;
    font-weight: bold;
    transition: 0.2s;
  }
  
  .menue_point_content:hover {
    transform: translateY(1px);
  }
  
  
  #burger_menue {
    display: none;
    flex-direction: column;
    justify-content: center;
    position: relative;
    align-items: center;
    height: 2rem;
    width: 3rem;
    margin-right: 1rem;
    margin-left: 1rem;
    z-index: 5;
  }
  
  #burger_menue:hover {
    cursor: pointer;
  
  }
  
  .burger_menue_line {
    display: flex;
    position: absolute;
    width: 3rem;
    height: 0.4rem;
    border-radius: 0.4rem;
    background-color: var(--font_main_color);
    transition: 0.5s;
  
  }
  
  .burger_menue_line:nth-child(1) {
    transform: translateY(0.8rem);
  }
  
  .burger_menue_line:nth-child(3) {
  
    transform: translateY(-0.8rem);
  }



  /*responsive*/
  @media (max-width: 1300px){
   
    #burger_menue{
         display: flex;
     }
     .burger_menue_line.active:nth-of-type(1){
         transform: rotateZ(-45deg);
 
     }
     .burger_menue_line.active:nth-of-type(2){
         transform: translateX(-2rem);
         opacity: 0;
         
     }
     .burger_menue_line.active:nth-of-type(3){
         transform: rotateZ(45deg);
 
     }
     #menue{
         display: flex;
         visibility: hidden;
         flex-direction: column;
         align-items: center;
         justify-content: start;
         position: absolute;
         width: 80%;
         min-width: 20rem;
         height: 100vh;
         top: 0px;
         left: 0px;
         background-color: var(--main_color);
         margin: 0px;
         padding-top: 7rem;
         transition: 0.1s;
         z-index: 4;
         text-align: end;
     }
    
     .menue_point{
         align-self: flex-start;
         margin: 4vh 0vh 4vh 0vh;
         position: relative;
         left: 0rem;
         opacity: 0;
     } 
   
     .menue_point_content{
         font-size: 1.2rem;
         text-align: left;
     }
 
 
 
     
     #menue.active{
         visibility: visible;
     }
     .menue_point.active{
         left: 4rem;
         opacity: 1;
     }
     .menue_point.active:nth-of-type(1){
         transition: 0.1s;
     }
     .menue_point.active:nth-of-type(2){
         transition: 0.3s;
     }
     .menue_point.active:nth-of-type(3){
         transition: 0.5s;
     }
     .menue_point.active:nth-of-type(4){
         transition: 0.7s;
     }
     .menue_point.active:nth-of-type(5){
         transition: 0.9s;
     }
     .menue_point.active:nth-of-type(6){
      transition: 1.1s;
  }
     
    
     
 }