/*
 * en2x Hero Text – module styles.
 *
 * A single fixed-height hero block: background image (cover, positioned) or a
 * colour fallback, headline + WYSIWYG subtext left-aligned and vertically
 * centered. An optional light breadcrumb bar sits below. Background/text colours
 * come from the configuration as inline styles; font is inherited (Rubik).
 */

.en2x-hero-text {
	display: flex;
	align-items: center;
	font-family: inherit;
}

/* Height steps. */
.en2x-hero-text--gering {
	min-height: 350px;
}

.en2x-hero-text--mittel {
	min-height: 550px;
}

.en2x-hero-text--hoch {
	min-height: 800px;
}

/* Inner: 1600px grid, left-aligned content. */
.en2x-hero-text__inner {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 48px 40px;
}

.en2x-hero-text__headline {
	margin: 0 0 20px;
	font-size: 38px;
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	color: inherit;
}

.en2x-hero-text__text {
	max-width: 760px;
	font-size: 18px;
	line-height: 1.6;
	color: inherit;
}

.en2x-hero-text__text :first-child {
	margin-top: 0;
}

.en2x-hero-text__text :last-child {
	margin-bottom: 0;
}

.en2x-hero-text__text a {
	color: inherit;
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Breadcrumb bar (light strip below the hero).
 * ------------------------------------------------------------------------- */

.en2x-hero-text__breadcrumb {
	background: transparent;
}

/* Tight top gap so the breadcrumb reads as part of the hero element. */
.en2x-hero-text__breadcrumb-inner {
	max-width: 1600px;
	margin: 0 auto;
	padding: 10px 40px 16px;
	font-size: 13px;
	font-weight: 600;
	color: #50575e;
}

.en2x-hero-text__crumb {
	color: #50575e;
	text-decoration: none;
}

.en2x-hero-text__crumb:hover,
.en2x-hero-text__crumb:focus {
	color: var(--en2x-color-headline, #250F51);
}

.en2x-hero-text__crumb-sep {
	margin: 0 6px;
	color: #a7a7b0;
}

/* Current page highlighted in the accent cyan. Darker teal (#0f7c8c) so the
 * text reaches WCAG AA (4,9:1) on the light breadcrumb strip; the bright cyan
 * #34c7d6 was only 2:1. */
.en2x-hero-text__crumb--current {
	color: #0f7c8c;
}

/* ---------------------------------------------------------------------------
 * Responsive: cap heights and tighten spacing on smaller screens.
 * ------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.en2x-hero-text--gering {
		min-height: 280px;
	}

	.en2x-hero-text--mittel {
		min-height: 380px;
	}

	.en2x-hero-text--hoch {
		min-height: 480px;
	}

	.en2x-hero-text__inner {
		padding: 32px 24px;
	}

	.en2x-hero-text__headline {
		font-size: 28px;
	}

	.en2x-hero-text__text {
		font-size: 16px;
	}

	.en2x-hero-text__breadcrumb-inner {
		padding: 8px 24px 14px;
	}
}