/*04_header.css*/
#header_left_div, #header_nav_div, header, #header_right_div{
	align-items: center;
    display:flex;
	font-family:var(--04_header_font_family);	
	justify-content: center;
	z-index:1000;
}

#header_left_div{
	background-color:var(--04_header_div_left_bgColor,var(--04_header_banner_bgColor));
}

#header_nav_div{
	background-color:var(--04_header_div_nav_bgColor);
	border-top-left-radius:10px;
}

header{
	background-color:var(--04_header_bgColor,var(--04_header_banner_bgColor));
	border-top-right-radius:10px;
}

#header_right_div{
	background-color:var(--04_header_div_right_bgColor,var(--04_header_banner_bgColor));
}



#header_bannertitle_h1 {
    color:var(--04_header_title_color);	
	font-size: var(--04_header_title_font_size, 2rem);
	letter-spacing:var(--04_header_title_letter_spacing,0.3rem);
	margin: 0;
	padding-top: var(--04_header_title_padding-top,0px);
    text-align:center;	

}

#header_subtitle_h2 {
	color:var(--04_header_subtitle_color);
    font-size:var(--04_header_subtitle_font_size);
	font-weight:var(--04_header_subtitle_font_weight);
	font-style:var(--04_header_subtitle_font_style);
    letter-spacing:var(--04_header_subtitle_letter_spacing);
    position:relative;	
    text-align: center;
    top:-10px;
	margin: 0;	
	
}

header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--04_header_title_subtitle_gap, 0.3rem); /* Abstand zwischen h1 und h2 */
}

div#banner_navigation_wrapper {
	position: sticky;
	top: 0;
	z-index: 1000;

	transition: box-shadow 0.25s ease;
	border-radius: 0.6rem 0.6rem 0 0;
}

#banner_header.is_scrolled {
	box-shadow:
		0 0.4rem 1rem rgba(0, 0, 0, 0.18),
		0 2rem 2rem -1rem var(--04_header_bgColor);

	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

@media (max-width: 768px) {
	#header_left_div,#header_nav_div,#header_right_div {
		display:none;
	}
	
	header {
		width:100vw;
	}
}

@media (min-width: 769px) and (max-width: 1199px) {

    #banner_navigation_wrapper {
        grid-column: 1 / -1;

        grid-template-columns:
            var(--03_grid_nav_width_1199)
            var(--03_grid_main_width_1199);
    }
	
	#header_left_div,
	#header_nav_div,
	#header_right_div {
		display: none;
	}	

}