/* ── Hero Widget ─────────────────────────────────────────── */

/* Full-width: Parent-Container auf 100% oeffnen statt 100vw-Breakout */
.e-con:has(> .e-con-inner > .elementor-widget-hpc_hero) {
	max-width: 100% !important;
	padding: 0 !important;
}
.e-con > .e-con-inner:has(> .elementor-widget-hpc_hero) {
	max-width: 100% !important;
	padding: 0 !important;
}

.elementor-widget-hpc_hero {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	background: var(--e-global-color-primary);
}

/* Editor: Overlay-Handles erzeugen keine horizontale Scrollbar */
.elementor-editor-active .elementor-widget-hpc_hero {
	overflow: hidden;
}

.hpc-hero {
	position: relative;
	overflow: hidden;
	max-width: 1920px;
	margin-inline: auto;
	background-size: cover;
	background-position: center;
}

/* Video + Image: fluid 16:9 → 4:3 → 1:1 */
.hpc-hero--video,
.hpc-hero--image {
	height: clamp(56.25vw, 39.1vw + 329px, 100vw);
	max-height: calc(1920px * 9 / 16);
}

/* Ohne Bild: primary Background, reduzierte Hoehe */
.hpc-hero--no_image {
	min-height: clamp(180px, 20vw, 250px);
	background-color: var(--e-global-color-primary);
}

.hpc-hero--no_image .hpc-hero__content {
	padding-top: clamp(140px, 12vw, 200px);
}

/* Bild (halbe Hoehe): gleiche Hoehe wie no_image, aber mit Hintergrundbild + Overlay */
.hpc-hero--image_half {
	min-height: clamp(180px, 20vw, 250px);
}

.hpc-hero--image_half .hpc-hero__content {
	padding-top: clamp(140px, 12vw, 200px);
}

.hpc-hero--image_half .hpc-hero__content,
.hpc-hero--no_image .hpc-hero__content {
	padding-bottom: clamp(40px, 6vw, 120px);
}

/* ── Background Image (<picture> fuer LCP) ─────────────── */

.hpc-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hpc-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Video ──────────────────────────────────────────────── */

.hpc-hero__video {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hpc-hero__video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Overlay (radial gradient via ::before) ─────────────── */
/* Immer bei video/image — Farben steuerbar per Style-Controls */

.hpc-hero--video::before,
.hpc-hero--image::before,
.hpc-hero--image_half::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.75;
	background: radial-gradient(
		ellipse at var(--hpc-hero-overlay-pos, center),
		var(--hpc-hero-overlay-center, transparent) 0%,
		var(--hpc-hero-overlay-edge, #000) 100%
	);
}

/* ── Content ────────────────────────────────────────────── */

.hpc-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: clamp(100px, 7.5vw, 140px) 10px clamp(70px, 5.5vw, 100px);
}

.hpc-hero__content-inner {
	display: flex;
	flex-direction: column;
	align-items: inherit;
	gap: clamp(10px, 1.2vw, 16px);
	max-width: 800px;
	text-align: center;
}

.hpc-hero__eyebrow {
	font-family: var(--e-global-typography-b392e80-font-family), Sans-serif;
	font-size: var(--e-global-typography-b392e80-font-size);
	line-height: var(--e-global-typography-b392e80-line-height);
	text-transform: var(--e-global-typography-b392e80-text-transform);
	letter-spacing: var(--e-global-typography-b392e80-letter-spacing);
	color: var(--e-global-color-1e65a15);
}

.hpc-hero__heading {
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
	font-size: var(--e-global-typography-primary-font-size);
	font-weight: var(--e-global-typography-primary-font-weight);
	line-height: var(--e-global-typography-primary-line-height);
	color: var(--e-global-color-1e65a15);
	margin: 0;
}

.hpc-hero__excerpt {
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	line-height: var(--e-global-typography-text-line-height);
	color: var(--e-global-color-1e65a15);
	max-width: 768px;
	margin: 0 !important;
}

/* Button nutzt Elementor-Standard-Klassen, kein eigenes Styling noetig */
.hpc-hero__button-wrap {
	margin-top: 8px;
}

/* ── Accent Notes ───────────────────────────────────────── */

.hpc-hero__accent-notes {
	position: absolute;
	bottom: clamp(5px, 1.5vw, 20px);
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
}

/* Content braucht unten Platz fuer Accent Notes */
.hpc-hero:has(.hpc-hero__accent-notes) .hpc-hero__content {
	padding-bottom: clamp(50px, 7vw, 100px);
}


/* ── Logo-Fly (Navbar-Logo in Hero-Mitte) ─────────────── */

/* Transition-Kill Ausnahmen fuer Logo-Fly */
#navbarlogo {
	transition: translate 0.5s cubic-bezier(0, 0, 0.2, 1),
				scale 0.3s cubic-bezier(0, 0, 0.2, 1) !important;
}

#navbarlogo.hero-logo-ready {
	translate: 0 var(--hero-offset-y);
	scale: var(--hero-scale);
	transition: translate 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
				scale 0.8s cubic-bezier(0.6, 0, 0.15, 1) !important;
}

body.menu-active #navbarlogo.hero-logo-ready {
	transition: none !important;
}