@media only screen and (orientation: portrait) and (max-width:767px){
       header { border-top:solid 1px #cccccc;}
        
    }

/*----------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (orientation:portrait){
.logo-horizontal{display:block;}     
header { height: 66px; width: 100% ; /* 100% Breite des Viewports */}  
.left, .right {height: 100%; /* 100% Höhe innerhalb des Headers */}
.left-content { margin-left: 20px;}
.right-content {width: 50px; margin-right: 20px;}
}   

@media only screen and (max-height:320px) and (orientation:portrait){
header {height: 50px;} 
.logo-horizontal-light, .logo-horizontal-dark {width:50px;}
.left-content {margin-left: 15px;}
.right-content {margin-right: 15px;}
}


@media only screen and (min-height:1920px) and (max-height:2499px) and (orientation:portrait){
header {height: 90px;} 
.logo-horizontal-light, .logo-horizontal-dark {width:90px;}
.left-content {margin-left: 35px;}
.right-content {margin-right: 35px;margin-top: 20%;}
}

@media only screen and (min-height:2500px) and (orientation:portrait){
header {height:166px;}
.logo-horizontal-light, .logo-horizontal-dark {width:140px;}
.left-content {margin-left: 55px;}
.right-content {margin-right: 85px; margin-top: 40%;}  
}



/*----------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width:1439px) and (orientation:landscape){
.logo-vertical{display:block;}   
header {
        flex-direction: column;
        height: 100%; /* 100% Höhe des Viewports */
        width:  66px;
    }  
.left, .right {width: 100%; /* 100% Breite innerhalb des Headers */}  
.left-content {margin-top: 20px;}
.right-content {height: 50px; margin-bottom: 20px;}
    
}

@media only screen and (max-width:320px) and (orientation:landscape){
header {height: 100%; width: 50px;} 
.logo-vertical-light, .logo-vertical-dark {height:60px;}
.left-content {margin-top: 15px;}
.right-content {margin-bottom: 15px;}
}


/*--------------header Umbruch*/
@media only screen and (min-width:1440px) and (orientation:landscape){
.logo-horizontal{display:block;}    
header {height: 66px; width: 100vw; /* 100% Breite des Viewports */}  
.left, .right {
 height: 100%; /* 100% Höhe innerhalb des Headers */
}
.left {display: flex;}
.left-content {margin-left: 25px;}
.right-content {width: 50px; margin-right: 25px;}
}   

@media only screen and (min-width:1920px) and (max-width:3499px) and (orientation:landscape){
header {height:90px;}
.logo-horizontal-light, .logo-horizontal-dark {width:90px;}
.left-content {margin-left: 35px;}
.right-content {margin-right: 35px; margin-top: 15%;}  
}

@media only screen and (min-width:3500px) and (orientation:landscape){
header {height:166px;}
.logo-horizontal-light, .logo-horizontal-dark {width:140px;}
.left-content {margin-left: 55px;}
.right-content {margin-right: 105px; margin-top: 33%;}  
}