/*
    Additional Header Stylings:
    Big Image incl. Headline, Teaser and Links
    Navigation and Main Menu
*/
/* 
    Created on : 08.03.2022
    Author     : Heiko Goeb, dq180
    @todo:owl-wrapper: width 100vw; height variable
*/


/* Variablen */
:root {
	--bgLightGray: #f2f2f2;
	--headerHeightMobile:90vh;
	--headerHeightDesktop:74vh;
        --colorHeaderText: #fff;
        --colorPink: rgb(163,25,91);
}

/*Header-Welle */
.header-navigation::after{
	content:'';
	position: absolute;
	top: -150px;
	left: 0;
	width: 100vw;
	height: 155px;
	overflow:hidden;
    z-index:-1;
	background: url('./images/img_grossewelle_40.png') -390px 75px, url('./images/img_kleinewelle_100.png') -25px 101px, url('./images/img_mittlerewelle_70.png') -5px 75px, url('./images/img_grossewelle_60.png') -160px 43px,url('./images/img_grossewelle_40.png') -480px 21px;
	background-repeat: repeat-x;
}
.header-nav-wrapper::after{
	content:'';
	position: absolute;
	top: 95px;
	left: 0;
	width: 100vw;
	height: 125px;
	overflow:hidden;
	background: url('./images/img-welle-unter-menu.png') -35px -50px;
	background-repeat: repeat-x;	
    background-color: #fff;
}

/* Owl-Carousel*/
/* .owl-carousel .owl-wrapper {
    width: 100vw!important;
    height:var(--headerHeightDesktop);
    overflow:hidden;    
}
.owl-carousel .owl-item {
   width: 40vw!important;
} */
.owl-carousel .owl-item img {     
    object-position: center;
    object-fit: cover;
    display: block;
    width: 100%;
    height: 80vh;
    overflow: hidden;
}

/* Header */
.header-startseite, .header-startseite .header-top{ width: 100vw; }
#home { 
        max-height: var(--headerHeightMobile)!important;
        z-index:0;
}
#header.header-startseite {
	position:sticky;
	top:0;
	height:var(--headerHeightMobile);
}
#header.header-startseite .header-bg-img { 
	height: var(--headerHeightMobile);
	overflow:hidden;
}
#header.header-startseite .header-top {
	position: fixed;
	top: 0;
	left: 0;
	padding: 0!important;	
}
#header.header-startseite .header-top .container-fluid {
	padding: 0 !important;
} 

#header.header-startseite .header-bg-img .bg-img-container { 
    width: 100vw;
    height: 100%;
}

#header.header-startseite .bg-img-container .bg-img-image {
    object-fit:cover;
    object-position: center bottom;
    min-height:var(--headerHeightMobile);
    width: 100vw;
}
#header.header-startseite .bg-img-container .bg-img-caption {
    position: absolute!important;
    top: 200px;
    left: 30px;
}

/*Text im Header*/
#header.header-startseite .bg-img-caption span{
    color: var(--colorHeaderText);
    display: block;
}
#header.header-startseite .bg-img-caption .style-h1{
    font-size: 3.5rem;
    line-height: 3.6rem;
    font-weight: 800;
    color: var(--colorHeaderText);
    text-shadow: 0 0 4px rgba(0,0,0,.7);
}
#header.header-startseite .bg-img-caption strong {
    color: var(--colorHeaderText);
}

#header.header-startseite .bg-img-caption .style-teaser{
    font-weight:800;
}
#header.header-startseite .bg-img-caption .style-button {
    font-size: .85rem!important;
    font-weight: bold;
    letter-spacing: .05rem;
    padding: 2px 5px 2px 10px;
    border: 0;
    border-radius: 15px 0 0 15px;
    overflow: hidden;
    margin-top: .5rem;
}
#header.header-startseite .bg-img-caption .style-button::after {
    content: '>';
    display: inline-block;
    position: absolute;
    font-size: .85rem!important;
    font-weight: 800;
    padding: 2px 7px 2px 6px;
    border: 0;
    border-radius: 0 15px 15px 0;
    background: var(--colorPink);
    overflow: hidden;
    margin-top: -2px;
    margin-left: 5px;
}
    
/*Main Menu */
.header-nav { background: transparent; }
.header-navigation { z-index: 800; }
.header-navigation {
	position: sticky;
	top:0;
	margin-top: -13vh;
}
.header-navigation  .header-nav-wrapper {
	background: var(--bgLightGray)!important;
}
.header-navigation  ul.dropdown {
/*	background:transparent !important;*/
}
.header-nav-wrapper.scroll-to-fixed-fixed {
	height: 100px!important;
}

.cdsNaviOverlayButton .fa.fa-th {
    font-family: FontAwesome !important;
    font-weight: normal;
}

/* anpassung Main */
.main-content { 
	z-index: 500;
/*	margin-top: var(--headerHeightMobile);*/
	background: #fff; 
}


/*Responsiv*/
@media (min-width:768px){

}

@media (min-width:900px){
     .menuzord-menu {
            display: flex;
            flex-wrap: nowrap;
            flex-direction: row;
            max-width: 73%;
            position: absolute;
            right: 9px;
            margin-top: 26px;
    }
    .menuzord-menu > li > a {
        padding: 8px 10px;
        border-radius: 3px;
    }
}

/*eg. ipad pro, laptop screens*/
@media (min-width:992px){
        #home { max-height: var(--headerHeightDesktop)!important;}
        
	#header.header-startseite .header-bg-img { 
		height: var(--headerHeightDesktop);
		overflow:hidden;
	}
	#header.header-startseite .header-bg-container .bg-img-image {
		object-position: center;
		min-height:var(--headerHeightDesktop);
		width: auto;
	}
	#header.header-startseite .bg-img-container .bg-img-caption {
		top:12vh;
		max-width: 60vw;
	}
	.main-content { 
		margin-top: 0;
		background: #fff; 
	}
}

/*desktops, large laptop screens */
@media (min-width:1200px){
	#header.header-startseite .bg-img-container .bg-img-caption {
		top:12vh;
		max-width: 66vw;
	}
}

/*retina*/
@media (min-width:1600px){
	#header.header-startseite .bg-img-container .bg-img-caption {
		top:12vh;
		max-width: 40vw;
	}
}