#nav{
    background: #000041;
    height: 60px;
}



#nav a{
    text-decoration: none;
    color: white;
}

.nav-div{
    float: left;
    position: absolute;
}

.nav-div:nth-child(1){
    left: 3%;
}
.nav-div:nth-child(2){
    left: 20%;
}
.nav-div:nth-child(3){
    left: 37%;
}
.nav-div:nth-child(4){
    left: 54%;
}
.nav-div:nth-child(5){
    right: 5%;
    width: 20%;
}

#search{
    width: 90%;
}

.nav-div,
.Subkategorien,
.SubSubkategorien
{
    background: #000041;
    text-align: center;
    line-height: 2.5rem;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 10px;
    margin-bottom: 10px;
    transition: background-color 0.5s;
    transition-delay: 0.2s;
    border-radius: 4px;  
    min-width: 15%; 

}



.Subkategorien,
.SubSubkategorien
 { 
    position: relative;
    visibility: hidden;  
    height: 0;
    z-index: 1000; 
    margin: 0;
    border-top-left-radius:0;
    border-top-right-radius:0; 
    
}

.SubSubkategorien{
    position: relative;
    width: 80%;
    text-align: center;
    background:  #01285C;
    transition: background-color 0.4s ,width 0.5s;   
    transition-delay: 0.1s;
    transition-timing-function: ease-out; 
    border-radius:4px;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
}

.LetzteSubSubKategorie{
    border-bottom-left-radius:7px;    
}

.Subkategorien li,
.SubSubkategorien li 
{ 
    display: block; 
}

.nav-div:hover,
.nav-div:hover .Subkategorien
{
    background-color: #002877;
}

.nav-div:focus-within,
.nav-div:focus-within .Subkategorien
{
    background-color: #01285C;
}



.nav-div:focus-within .Subkategorien, 
.Subkategorien .Liste:focus-within .SubSubkategorien
{ 
    visibility: visible;
    height: auto;
}

.Subkategorien .Liste:focus-within .SubSubkategorien
{
    background-color: #0049A8;
    width: 110%;   
    font-size:15px; 
}
.Subkategorien .Liste{
    border-bottom-left-radius:7px;    
    border-bottom-right-radius:7px;    
    
}
.Subkategorien .Liste:focus-within{
    background-color: #001E41;
    
}

.Subkategorien .Liste{
    transition: background-color 0.5s;
    transition-delay: 0.2s;
}


#search{
background: #FFFFFF;
height: 25px;
font-weight: bold;
color: #A7A7A7;
padding: 0px 10px;
border: 1px solid #bebebe;
border-radius: 9px;
}

#search:focus{
    color: #040038;
}


/* Große Geräte, Desktop, Laptop */
@media only screen and (max-width : 1200px) {

    #nav{
        height: 100px;
        margin-bottom: 40px;
        
    }

    .nav-div{
        margin: 0%;
        line-height: 3.5rem;
        font-size: 18px;
        border-radius: 0px;
        border-left: none;
        border-right: none;
    }
    .nav-div:nth-child(1),.nav-div:nth-child(2){
        width: 30%;
        border-radius: 0px 0px 10px 10px;
        border-bottom: 1px solid lightblue;
        
    }

    .nav-div:nth-child(3),.nav-div:nth-child(4),.nav-div:nth-child(5){
        width: 33.3%;
        margin-bottom: 30px;
        top: 246px;
    }
   

    .nav-div:nth-child(1){
       left: 15%;
    }

    .nav-div:nth-child(2){
        left: 55%;
    }

    .nav-div:nth-child(3){
        border-radius: 0px 0px 15px 0px;
        left: 0%;
    }
    
    .nav-div:nth-child(4){
        
        border-radius: 0px 0px 25px 25px;
        left: 33.33%;
    }

    .nav-div:nth-child(5){
        border-radius: 0px 0px 0px 15px;
        left: 66.66%;
    }
 }

    /* Kleiner Laptop, neue Mobilfunkgeräte */
@media only screen and (max-width : 992px) { }

    /* normale Mobilfunkgeräte */
@media only screen and (max-width : 768px) 
{ 

    
   
    #nav{
        height: 100px;
        margin-bottom: 40px;
    }

    .nav-div{
        margin: 0%;
        line-height: 3.5rem;
        font-size: 18px;
        border-radius: 0px;
    }
    .nav-div:nth-child(1),.nav-div:nth-child(2){
        width: 30%;
        border-radius: 0px 0px 10px 10px;
        border-bottom: 1px solid lightblue;
        
    }

    .nav-div:nth-child(3),.nav-div:nth-child(4),.nav-div:nth-child(5){
        width: 33.3%;
        margin-bottom: 30px;
        top: 246px;
    }
   

    .nav-div:nth-child(1){
       left: 15%;
    }

    .nav-div:nth-child(2){
        left: 55%;
    }

    .nav-div:nth-child(3){
        border-radius: 0px 0px 15px 0px;
        left: 0%;
    }
    
    .nav-div:nth-child(4){
        
        border-radius: 0px 0px 25px 25px;
        left: 33.33%;
    }

    .nav-div:nth-child(5){
        border-radius: 0px 0px 0px 15px;
        left: 66.66%;
    }
        
}

    /* kleine Mobilfunkgeräte */
@media only screen and (max-width : 480px) 
{ 

 #nav{
     margin-bottom: 190px;
 }
   
    .nav-div:nth-child(1),.nav-div:nth-child(2),.nav-div:nth-child(3),.nav-div:nth-child(4),.nav-div:nth-child(5){
        border-bottom: 1px solid lightblue;
        border-radius: 0px 0px 10px 10px;
        width: 100%;
        
    }

    .Subkategorien .Liste{
        border-bottom: 1px solid lightblue;
        border-radius: 0px 0px 10px 10px;
        width: 100%;
        
    }


   

    .nav-div:nth-child(1){
       left: 0%;
       z-index: 999;
    }

    .nav-div:nth-child(2){
        left: 0%;
        top: 235px;
        z-index: 998;
    }

    .nav-div:nth-child(3){
        left: 0%;
        top: 285px;
        z-index: 997;
    }
    
    .nav-div:nth-child(4){
        left: 0%;
        top: 335px;
        z-index: 996;
    }

    .nav-div:nth-child(5){
        left: 0%;
        top: 385px;
        z-index: 995;
    }

  
    .nav-div:focus-within
    {
        background-color: #010025;
    }

}

    /* alte Mobilfunkgeräte */ 
@media only screen and (max-width : 320px) 
{  
   
}