/* ===========================================================================
   M32 — Hero Sub (WKN-Wohnbau Child) — Figma 13:6
   =========================================================================== */

section.m32_hero_sub {
	/* Sub-Hero: feste maximale Hoehe, kleiner als der Haupt-Hero (m25). */
	height: calc(100dvh - var(--m32-header-h, 132px));
	max-height: 710px;
	overflow: hidden;
	color: #fff;
	background: #20232b;
}

section.m32_hero_sub * {
	color: #fff;
}

section.m32_hero_sub .m32_hero_sub_main {
	position: relative;
	height: 100%;
}

section.m32_hero_sub .m32_hero_sub_background {
	position: absolute;
	width: 100%;
	height: 100%;
}

section.m32_hero_sub .m32_hero_sub_image {
	display: block; 
}

section.m32_hero_sub .m32_hero_sub_background::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(10, 37, 64, 0.95) 0%,
		rgba(10, 37, 64, 0.6) 45%,
		rgba(10, 37, 64, 0.05) 75%,
		rgba(10, 37, 64, 0) 100%
	);
	pointer-events: none;
}

section.m32_hero_sub .m32_hero_sub_content {
	position: relative;
	z-index: 2;
	display: flex;
    align-items: end;
	padding-bottom: 124px;
	height: 100%;
}

section.m32_hero_sub .m32_hero_sub_text_container {
	max-width: 500px;
	margin-top: 53px;
}

.m32_scroll_indicator_wrapper {
	display: flex;
	justify-content: center;
	justify-self: end;
	align-items: center;
	width: 66px;
	height: 66px;
	background: #ec7328;
	border: none;
	cursor: pointer;
	margin-top: 62px;
}

.m32_scroll_indicator_wrapper img {
	width: 23px;
	height: 13px;
	transform: rotate(90deg);
	transition: transform 0.2s ease;
}

@keyframes m32_arrow_bob {
	0%, 100% { transform: rotate(90deg) translateX(0); }
	50%      { transform: rotate(90deg) translateX(4px); }
}

.m32_scroll_indicator_wrapper:hover img,
.m32_scroll_indicator_wrapper:focus-visible img {
	animation: m32_arrow_bob 0.9s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.m32_scroll_indicator_wrapper:hover img,
	.m32_scroll_indicator_wrapper:focus-visible img {
		animation: none;
	}
}

@media (max-width: 991px) {
	section.m32_hero_sub .m32_hero_sub_background::after {
		background: linear-gradient(
			50deg, 
			rgba(10, 37, 64, 0.95) 0%, 
			rgba(10, 37, 64, 0.6) 45%, 
			rgba(10, 37, 64, 0.05) 75%, 
			rgba(10, 37, 64, 0) 100%
		);
	}
}

@media (max-width: 767px) {
	section.m32_hero_sub {
		height: auto !important;
		min-height: unset;
	}

	section.m32_hero_sub .m32_hero_sub_content {
		padding-bottom: 74px;
		padding-top: 200px;
	}

	.m32_scroll_indicator_wrapper {
		display: none;
	}
}