@media all and (max-width: 600px) {
    
    header {
        font-size: 110%;
        font-weight: 300;
    }
    

    
    .logo {
        width: 65px;
        height: 65px; 
        padding: 20px;
        padding-left: 20px;
        letter-spacing: 0.05em;
    }
    
    header nav {
        float: none;
        display: none;
    }
    
    header:hover nav {
        display: block;
    }
    
    header nav ul li {
        display: block;

    }
    
    header nav ul li a {
        max-width: 135px;
    }
    
    
    h1 {
        font-size: 7.5vw;
        }
    
    
    section {
    padding-left: 4px;
    padding-right: 4px;
    }
    
    h4 {
        padding-bottom: 0;
    }
    

    .fliesstext {
        max-width: 80%;
    }   
    
     .klein-100 {
    min-width: 90%;
    }   

    .leben, .me, .aboutme {
    width: 100%;
    }
    
    .pfeile .next, .pfeile .prev {
        padding: 2%;
    }

   .portrait2 {
    display: inline-block;  
} 
    .portrait {
    display: none; 
}

}

@media all and (max-width: 700px) {
    .container .mix,
    .container .gap{
        width: 49%;
    }
}


@media all and (max-width: 400px) {
    
    .container .mix,
    .container .gap{
        width: 100%;
    } 
    
}