html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

body {
   
    background-repeat: no-repeat;
    background-position: Center Center;
    background-image: url("../img/watt.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: Center Center;
    margin: 0;
    background-position: Center Center;
    background-attachment: fixed;
    font-size: 14px;
    font-family: 'Verdana';
}

   
  
    .navbar {

        position:fixed; 
        top:0px;
        height: 100px;
        width: 100%;
        background-color: rgb(205, 225, 241);  
        padding-top: 7px;
        padding-left: 10px;
    
    } 


    ul { position: fixed;    
         height: 120px;
         width: 100%;
         margin-left: 13%;
         float: left;
        
     
       }  

       li { 
        list-style:none;
        display:inline-flex;
        line-height: 5;
        font-size: 16px;
        color:white;
        position:top;
       
 
      
    
    }
    
     li a { text-decoration:none;
        color:grey;
        font-size: 15px;
        font-family: sans-serif; 
        padding: 0 20px;
        display:block;
        margin-bottom: 10px;
       
    }
 
    li a:hover { text-decoration:none;
     color:red;
    
 }
  

 /* -- Index Page Anfang -- */    

#headline {
    height: 100%;
    width: 40%;
    position: fixed;
    right: 30%;
    top:300px;
    font-family: sans-serif; 
    color:white;
    z-index: 99999;   
}

h1 { font-size: 16;
    color:whitesmoke;
    text-align:center;
    }

p {font-size: 15px; 
    color:whitesmoke;
    margin-top: 19px;
    line-height: 25px;
    text-align:center;  
    }

    span { 
        font-weight: bolder;
        font-size:larger ;
    }

    #logo { 
        position:fixed;
        height:120px;
        left:30px;
        top:10px;
        z-index:99999;
        border: 2px solid gainsboro;
         margin: 12px;
        filter: grayscale(0%);
         }



         #impressum {

            height: 20px;
            position: fixed;
            top:300px;
            font-family: sans-serif; 
            color:rgb(255, 240, 103);
            top: 190px;
            left: 43px;
            z-index: 99999
        }   

        #impressum a {

           font-size: 14px; 
           color:rgb(216, 213, 213);
           font-weight: 700;
           line-height: 35px;
           text-decoration: none;           
        }


        #Hardwaretext {
            height: 100%;
            width: 100%;
            float: left;
            top:300px;
            z-index: 99999;
        }
        #Hardwaretext h1 {font-size: 20px;
            color:rgb(236, 11, 11);
            line-height: 20px;
            margin-top: 50px;
        }

        #Hardwaretext p {font-size: 13px; 
            color:rgb(34, 50, 138);
            margin-top: 15px;
            line-height: 19px;
            font-family: sans-serif;
            padding: 30px; 
            text-align: left;
            
            }

             #gallerie {
                height: 100%;
                width: 50%;
                position: absolute;
                right: 220px;
                top:500px;
                margin:5px;
              
            }   
            
            #gallerie img {

                width:100%;
                border: 2px solid white;
                margin: 12px;
                filter: grayscale(0%);
             
                }  


                #kontaktangaben {
                    height: 100%;
                  
                    position: fixed;
                    left:30%; 
                    top:200px;
              
                    
                }
    
                   #kontaktangaben img {
                        border: 1px solid white;
                        width: 500px; 
    
                    
                   }
                
                   .flagge {
                    margin:20px; 
                    width:40px;
                    border: 2px solid white; 
                }
        




 /* Untermenü Referenzen / 
 Der Text in den Spalten ist im Hardwaretext der für die ganze Page gilt definiert*/    
 
            


@media screen and (max-width:950px) {

    
    .navbar { 
     
        width: 180px;
        height: 400px;
        float:left;
        top:180px; 
        padding-top:15px;
        padding-left: 0px;
        margin-left: 0px;
        padding-right: 20px; 
      }
  
      ul { flex-direction: column;
         
          height: 60px;
          width: 100%;
          padding-top: 1px;
          margin-left: 0px;       
          z-index: 10000000;
      
        }  
     
      li {
         
          width:100%;     
          line-height: 2.6;
         
  
      }
  
      li a {
          padding: 0 30 px;
          font-size: 14px;
          font-family: sans-serif; 
          display:inline-flex;
         
  
      }
      #headline {
        height: 100%;
        width: 40%;
        position: fixed;
        right: 20%;
        top:300px;
        font-family: sans-serif; 
        color:white;
        z-index: 99999;   
    }
    


    
    /* --  Referenzen Anfang -- */    
  
            
   /* -- Referenzen Ende --- */


    #gallerie {
        height: 100%;
        width: 50%;
        position: absolute;
        left: 250px;
        top:600px;
        margin:5px;
      
    }   
    
    #gallerie img {

        width:100%;
        border: 2px solid white;
        margin: 12px;
        filter: grayscale(0%);
        top:700px;


}

#Hardwaretext {
    height: 100%;
    width: 100%;
    float: left;
    right: 250px;
    top:300px;
    z-index: 99999;
}
#Hardwaretext h1 {font-size: 18px;
    color:rgb(34, 50, 138);
    line-height: 20px;
    margin-top: 50px;
}


#Hardwaretext p {font-size: 13px; 
    color:rgb(48, 26, 145);
    margin-top: 15px;
    line-height: 19px;
    font-family: sans-serif;
    padding: 30px; 
    font-weight:100;
    
    }

    span { 
        font-weight: bolder;
        font-size:larger ;
    }


    #impressum {

        height: 20px;
        position: absolute;
        top:25px;
        font-family: sans-serif;
        color:white;
        left: 200px;
       
    }   

    #impressum a {

        font-size: 12px; 
        color: rgb(4, 47, 110);
        font-weight: 700;
        line-height: 30px;
        text-decoration: none;   
       
     }


     #kontaktangaben {
        height: 100%; 
        position: fixed;
        left:200px; 
        top:200px;
  
        
    }

       #kontaktangaben img {
            border: 1px solid white;
            width: 500px; 

        
       }


    }

         


@media screen and (max-width:466px) {


    #logo { 
        position:absolute;
        height:70px;
        left:230px;
        border: 2px solid gainsboro;
        margin: 12px;
        filter: grayscale(0%);
        z-index: 99999999;
    }
       


    .navbar { 
     
        width: 100%;
        height: 400px;
        float:left;
        top:180px; 
        position:absolute;
        padding-left: 0px;
        margin-left: 0px;
        padding-top:15px;
     
      }
  
      ul { flex-direction: column;
         
          height: 60px;
          width: 100%;
          position:absolute;
          padding-top: 1px;
          margin-left: 0%;       
          z-index: 10000000;
      
        }  
     
      li {
          width:100%;     
          line-height: 2.6;
        
         
  
      }
  
      li a {
          padding: 0 10 px;
          font-size: 14px;
          font-family: sans-serif; 
          display:inline-flex;

      }


      #impressum {

        height: 20px;
        position: absolute;
        top:100px;
        font-family: sans-serif; 
        color:rgb(57, 15, 247);
        left: 243px;
        z-index: 99999
    }   

    #impressum a {

       font-size: 12px; 
       color: rgb(7, 69, 163);
       font-weight: 700;
       line-height: 30px;
       text-decoration: none;   
      
    }
    #headline { 
        display:none;
    }

    #kontaktangaben {
        width:100%; 
      
        position: absolute;
       left:0px; 
        top:570px;
  
        
    }

       #kontaktangaben img {
            border: 1px solid white;
            width: 100%; 

        
       }



    }