/* =========================================================
   Hero
========================================================= */

:root {
	--slider-header-offset: 0px;
	--slider-accent: #EF6301;
	--slider-accent-hover: #CF5400;
}


/* =========================================================
   Hero Grundaufbau
========================================================= */

.hero-image {
	position: relative;

	width: 100%;

	overflow: hidden;

	background: #081923;
}


/* Startseite */
.hero-image--home {
	aspect-ratio: 2240 / 1000;
}


/* Unterseiten */
.hero-image--subpage {
	height: clamp(430px, 36vw, 800px);
}


/* =========================================================
   Hero Hintergrundbild
========================================================= */

.hero-image__background {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	pointer-events: none;
	user-select: none;
}


/* =========================================================
   Dunkler Verlauf hinter dem Text
========================================================= */

.hero-image::before {
	content: "";

	position: absolute;
	inset: 0;

	z-index: 2;

	pointer-events: none;

	background: var(--bg-hero-image-overlay);
}


/* =========================================================
   Text Overlay
========================================================= */

.logo-slider {
	position: absolute;

	top: var(--slider-header-offset);
	right: 0;
	bottom: 0;
	left: 0;

	z-index: 5;

	width: 100%;
	height: calc(100% - var(--slider-header-offset));

	pointer-events: none;
}


/* Bootstrap Container auf volle Höhe */
.logo-slider > .container,
.logo-slider > .container > .row {
	height: 100%;
}


/* =========================================================
   Overlay Inhalt
========================================================= */

.slider-content {
	width: 100%;
	max-width: 650px;

	margin-bottom: clamp(35px, 6vh, 85px);

	color: #ffffff;

	pointer-events: auto;
}


/* =========================================================
   Überschrift
========================================================= */

.slider-content__title {
	max-width: 650px;

	margin: 0 0 14px;

	font-size: clamp(2.4rem, 4.2vw, 4.7rem);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.035em;

	color: var(--color-slider-content-title);

	text-shadow:
		0 2px 8px var(--slider-content-shadow);
}


/* =========================================================
   Subline / Text
========================================================= */

.slider-content__text {
	max-width: 600px;

	margin: 0 0 24px;

	font-size: clamp(1rem, 1.4vw, 1.35rem);
	font-weight: 400;
	line-height: 1.35;
	color: var(--color-slider-content-text);

	text-shadow:
		0 2px 6px var(--slider-content-shadow);
}


/* =========================================================
   Große Laptops
========================================================= */

@media (max-width: 1399.98px) {

	.hero-image--subpage {
		height: clamp(410px, 38vw, 540px);
	}

	.slider-content {
		max-width: 570px;
		margin-bottom: clamp(30px, 5vh, 65px);
	}

	.slider-content__title {
		font-size: clamp(2.3rem, 4vw, 4rem);
	}

	.slider-content__text {
		font-size: clamp(1rem, 1.3vw, 1.2rem);
	}

}


/* =========================================================
   Kleine Laptops
========================================================= */

@media (max-width: 1199.98px) {

	.hero-image--subpage {
		height: 440px;
	}

	.slider-content {
		max-width: 500px;
		margin-bottom: 40px;
	}

	.slider-content__title {
		margin-bottom: 12px;

		font-size: clamp(2.1rem, 3.8vw, 3.4rem);
	}

	.slider-content__text {
		margin-bottom: 20px;

		font-size: 1rem;
	}

}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 1023.98px) {

	.hero-image--home {
		aspect-ratio: 16 / 9;
	}

	.hero-image--subpage {
		height: 400px;
	}

	.hero-image__background {
		object-position: 62% center;
	}

	.hero-image::before {
		background:
			linear-gradient(
				90deg,
				rgba(7, 15, 27, 0) 0%,
				rgba(7, 15, 27, 0) 38%,
				rgba(7, 15, 27, 0) 62%,
				rgba(7, 15, 27, 0) 88%
			);
	}

	.slider-content {
		max-width: 430px;
		margin-bottom: 30px;
	}

	.slider-content__title {
		font-size: clamp(2rem, 5vw, 2.9rem);
	}

	.slider-content__text {
		max-width: 420px;

		line-height: 1.45;
	}

}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 767.98px) {

	.hero-image--home,
	.hero-image--subpage {
		height: 340px;
		aspect-ratio: auto;
	}

	.hero-image__background {
		object-position: 66% center;
	}

	

	.slider-content {
		max-width: 100%;

		margin-bottom: 24px;
	}

	.slider-content__title {
		font-size: clamp(1.9rem, 9vw, 2.7rem);
		line-height: 1.02;
	}

	.slider-content__text {
		font-size: 0.95rem;
	}

	.slider-content__text br {
		display: none;
	}

}


/* =========================================================
   Smartphone
========================================================= */

@media (max-width: 575.98px) {

	.hero-image--home,
	.hero-image--subpage {
		height: 300px;
	}

}


/* =========================================================
   Reduzierte Bewegung
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.slider-content *,
	.slider-content {
		animation: none !important;
		transition: none !important;
	}

}