/*
 * KDR — Homepage Hero (Startseite)
 * Loaded by the kdr child theme (see functions.php).
 * Applies to the native-Elementor hero section (Container > Image (logo) +
 * Heading (tagline)), targeted via the "kdr-hero-media" / "kdr-hero-overlay"
 * CSS classes set on the Containers in Elementor's Advanced tab.
 */

.kdr-hero-media {
	/* Pinned (position: sticky) at the top of the viewport for as long as
	   .kdr-sec-hero (its containing block, sized by kdr-hero-scroll.js)
	   has room left — that's what keeps this section from scrolling away
	   until the width/height/radius shrink has finished. It releases into
	   normal scrolling automatically once that room runs out. */
	position: sticky !important;
	top: 0;
	overflow: hidden;
	/* Full viewport height at rest — kdr-hero-scroll.js shrinks this down
	   to 80vh as the page scrolls, together with the width/radius shrink. */
	height: 100vh;
	min-height: 100vh;
	margin-top: 0;
	box-sizing: border-box;
	/* Square corners by default — kdr-hero-scroll.js rounds them from 0px
	   to 73px as the page scrolls, together with the width shrink. This
	   overrides the 73px border-radius Elementor has natively set on this
	   container so the "at rest" state starts square instead. */
	border-radius: 0px !important;
	/* Centers the block as kdr-hero-scroll.js shrinks its width on scroll. */
	margin-left: auto;
	margin-right: auto;
}

/* Belt-and-suspenders centering: keeps the shrinking media block centered
   even if the flex item's own auto margins get overridden anywhere. */
.kdr-sec-hero {
	justify-content: center;
}

/* Subtle dark scrim at the bottom so the light logo/tagline stay legible
   over whatever background photo/video is placed behind them */
.kdr-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 26, 10, 0) 45%, rgba(20, 26, 10, 0.45) 100%);
	pointer-events: none;
	z-index: 1;
}

.kdr-hero-overlay {
	position: absolute !important;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 32px 64px 56px;
	gap: 18px;
	z-index: 2;
	pointer-events: none;
}

.kdr-hero-overlay > * {
	pointer-events: auto;
}

.kdr-hero-logo img {
	max-width: 360px;
	width: 100%;
	height: auto;
	display: block;
}

.kdr-hero-tagline {
	margin: 0;
}

@media (max-width: 1024px) {
	.kdr-hero-overlay {
		padding: 24px 40px 40px;
		gap: 14px;
	}
	.kdr-hero-logo img {
		max-width: 280px;
	}
}

@media (max-width: 767px) {
	.kdr-hero-overlay {
		padding: 20px 24px 28px;
		gap: 10px;
	}
	.kdr-hero-logo img {
		max-width: 200px;
	}
}
@media (max-width: 600px) {

	.kdr-hero-media {
		height:350px !important;
	}
}