/* Header */

:root {
	--before-opacity: 0.0;
}

body.scrolling {
	--before-opacity: 0.3; 
}


/* Header Overlay */
.header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 92, 137, var(--before-opacity));
	z-index: 1;
	pointer-events: none;
	transition: background 1.0s ease;
}


.header {
    width: 100vw;
   height: var(--header-height);
    background-size: cover !important;
    position: relative;
    background-position: center center !important; 
    overflow: visible;
	position: relative;
	z-index: 2;
}


.header .inner-bg {
    width: 100vw;
    height: 100%;
    background-size: cover !important;
    position: relative;
    background-position: center center !important; 
    overflow: hidden;

}

.header .inner-bg .content {
    color: #FFF;
    height:var(--header-height);
   width:calc(100vw - var(--main-padding) * 2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	z-index: 9;
	position: relative;
}

.header .inner-bg .content p {
	padding-bottom: 15px;
	text-align: center;
	line-height: 1.5em;
	padding-left: 80px;
	padding-right: 80px;
}

.header .inner-bg .content h1 {
	color:var(--farbe-1) !important;
}

.header p {
	color:#FFF !important;
}


.header_content {
	 width:calc(100vw - var(--main-padding) * 2);
	 margin-left:var(--main-padding);
	background: var(--farbe-3);
	margin-top:-100px;
	border-radius: var(--radius);
	position: absolute;
	z-index: 3;
	padding:40px;
	width: calc(60% - var(--main-padding));
	color:#FFF;
	bottom: -80px;
	box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

.header_content span {
	opacity: 0.8;
	font-size: 17px;
}

.header_content h1 {
	color:#FFF !important;
	font-size: var(--font-size-h3);
	padding-top:15px;
	padding-bottom: 15px;
	line-height: 1.4em;
}





@media (max-width: 768px) {

	/* HEADER GRUNDSTRUKTUR */
	.header {
		height: auto !important;
		display: flex;
		flex-direction: column;
	}

	.header::before {
		height: 100%;
	}

	/* BILD */
	.header .inner-bg {
		width: 100%;
		height: 220px; /* Standard Höhe */
		background-size: cover !important;
		background-position: center center !important;
	}

	/* OPTIONAL: Custom Height wenn gesetzt */
	.header[data-mobile-height]:not([data-mobile-height=""]) .inner-bg {
		height: calc(var(--mobile-header-height) * 1vh);
	}

	/* CONTENT */
	.header_content {
		position: relative;
		bottom: auto;
		margin: 0;
		margin-top: -40px; /* leicht überlappen (optional) */
		width: calc(100% - var(--main-padding) * 2 - 50px);
		margin-left: var(--main-padding);
		padding: 25px;
		border-radius: var(--radius);
	}

	.header_content h1 {
		font-size: 22px;
		line-height: 1.3em;
	}

	.header_content span {
		font-size: 14px;
	}

	.header p {
		font-size: 16px !important;
		line-height: 1.5em;
	}
}