/* =========================================================
   Umpa 7egments Hero
   Hintergrund: Full Width
   Inhalt: gleiche Breite wie Seite / Elementor Container
   ========================================================= */

.umpa-7egments-hero,
.umpa-7egments-hero * {
	box-sizing: border-box;
}

.umpa-7egments-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;
	min-height: 100dvh;
	padding: 0;
	color: var(--umpa-7egments-text, #ffffff);

	--umpa-event-main: #cf2030;
	--umpa-event-dark: #12060a;
	--umpa-event-deep: #25070d;
	--umpa-event-glow: #ff3b4f;
	--umpa-event-gold: #ffb347;

	background:
		radial-gradient(circle at 16% 18%, rgba(207, 32, 48, 0.42), transparent 30%),
		radial-gradient(circle at 82% 12%, rgba(255, 179, 71, 0.20), transparent 28%),
		radial-gradient(circle at 65% 82%, rgba(255, 59, 79, 0.28), transparent 34%),
		linear-gradient(135deg, #12060a 0%, #25070d 42%, #cf2030 100%);
}

.umpa-7egments-hero::before,
.umpa-7egments-hero::after {
	content: "";
	position: absolute;
	z-index: -2;
	width: 42vw;
	height: 42vw;
	min-width: 320px;
	min-height: 320px;
	border-radius: 999px;
	filter: blur(40px);
	opacity: 0.5;
	pointer-events: none;
	animation: umpa-7egments-orb-float 12s ease-in-out infinite alternate;
}

.umpa-7egments-hero::before {
	left: -14vw;
	top: -12vw;
	background: var(--umpa-event-main);
	box-shadow: 0 0 120px rgba(207, 32, 48, 0.75);
}

.umpa-7egments-hero::after {
	right: -12vw;
	bottom: -16vw;
	background: var(--umpa-event-gold);
	box-shadow: 0 0 140px rgba(255, 179, 71, 0.45);
	animation-delay: -4s;
}

.umpa-7egments-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	opacity: 0.55;
	pointer-events: none;
}

.umpa-7egments-hero__bg::before {
	content: "";
	position: absolute;
	inset: -40%;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
		linear-gradient(0deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		radial-gradient(circle at center, rgba(207, 32, 48, 0.16), transparent 38%);
	background-size: 72px 72px, 72px 72px, 100% 100%;
	transform: rotate(12deg);
	animation: umpa-7egments-grid-shift 28s linear infinite;
}

.umpa-7egments-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.10) 45%, transparent 62%),
		radial-gradient(circle at 50% 52%, transparent 18%, rgba(0, 0, 0, 0.46) 100%),
		linear-gradient(to bottom, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.42));
	animation: umpa-7egments-light-sweep 7s ease-in-out infinite;
}

/*
 * Wichtig:
 * Dieser Container macht die Hero-Inhalte gleich breit wie deine Seite.
 * Außen: var(--umpa-container-wide), z. B. 1440px
 */
.umpa-7egments-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	gap: clamp(24px, 4vw, 72px);
	width: min(100% - 2rem, var(--umpa-container-wide));
	max-width: var(--umpa-container-wide);
	min-height: 100vh;
	min-height: 100svh;
	min-height: 100dvh;
	margin-inline: auto;
    
}

/*
 * Textbereich nutzt dieselbe Logik wie normale Seiteninhalte.
 */
.umpa-7egments-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: var(--umpa-container);
	padding-block: clamp(48px, 7vw, 110px);
	padding-inline: 0;
	animation: umpa-7egments-content-enter 900ms cubic-bezier(.2, .8, .2, 1) both;
    padding-inline: clamp(1rem, 3vw, 2rem);
}

body.has-glass-header-overlay .umpa-7egments-hero__content {
	padding-top: max(
		clamp(48px, 7vw, 110px),
		calc(var(--umpa-header-height) + var(--umpa-header-offset) + 32px)
	);
}

.umpa-7egments-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	margin-bottom: 20px;
	padding: 10px 15px;
	border: 1px solid rgba(255, 255, 255, 0.20);
	border-radius: 999px;
	background:
		linear-gradient(
			135deg,
			rgba(207, 32, 48, 0.38),
			rgba(255, 255, 255, 0.08)
		);
	color: #ffffff;
	box-shadow:
		0 18px 50px rgba(207, 32, 48, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.18);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.umpa-7egments-hero__eyebrow::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 99px;
	background: var(--umpa-event-gold);
	box-shadow:
		0 0 18px rgba(255, 179, 71, 0.95),
		0 0 36px rgba(207, 32, 48, 0.65);
}

.umpa-7egments-hero__title {
	margin: 0;
	color: transparent;
	background:
		linear-gradient(
			var(--umpa-title-gradient-angle, 135deg),
			var(--umpa-title-gradient-one, #ffffff) 0%,
			var(--umpa-title-gradient-two, #ffe1e5) 38%,
			var(--umpa-title-gradient-three, var(--umpa-event-gold, #ffb347)) 100%
		);
	-webkit-background-clip: text;
	background-clip: text;
	font-size: clamp(42px, 6vw, 92px);
	font-weight: 950;
	line-height: 0.94;
	letter-spacing: -0.065em;
	text-wrap: balance;
	text-shadow: 0 18px 70px rgba(207, 32, 48, 0.22);
}

.umpa-7egments-hero__text {
	max-width: 580px;
	margin: 24px 0 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(17px, 1.6vw, 21px);
	line-height: 1.65;
}

.umpa-7egments-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

.umpa-7egments-hero__button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 15px 24px;
	overflow: hidden;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
	transition:
		transform 220ms ease,
		box-shadow 220ms ease,
		background 220ms ease,
		color 220ms ease,
		border-color 220ms ease;
}

.umpa-7egments-hero__button:focus-visible {
	outline: 3px solid var(--umpa-7egments-accent, #72f2ff);
	outline-offset: 4px;
}

.umpa-7egments-hero__button--primary {
	color: #08111f;
	background: var(--umpa-7egments-accent, #72f2ff);
	box-shadow: 0 20px 50px rgba(114, 242, 255, 0.32);
}

.umpa-7egments-hero__button--secondary {
	color: var(--umpa-7egments-text, #ffffff);
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.umpa-7egments-hero__button:hover {
	transform: translateY(-3px);
}

/*
 * Rechte Hero-Spalte.
 */
.umpa-7egments-hero__visual {
	position: relative;
	min-width: 0;
	min-height: 100vh;
	min-height: 100svh;
	min-height: 100dvh;
	overflow: hidden;
	animation: umpa-7egments-visual-enter 1100ms cubic-bezier(.2, .8, .2, 1) both;
}

.umpa-7egments-hero__image-mask {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(14px, 2vw, 24px);
	width: 100%;
	height: 100%;
	min-height: 100%;
	overflow: hidden;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
}

.umpa-7egments-hero__image-mask::before,
.umpa-7egments-hero__image-mask::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	z-index: 4;
	height: 22%;
	pointer-events: none;
}

.umpa-7egments-hero__image-mask::before {
	top: 0;
	background: linear-gradient(to bottom, rgba(8, 17, 31, 0.95), transparent);
}

.umpa-7egments-hero__image-mask::after {
	bottom: 0;
	background: linear-gradient(to top, rgba(8, 17, 31, 0.95), transparent);
}

.umpa-7egments-hero__focus-glow {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 3;
	width: 100%;
	height: 36%;
	transform: translate(-50%, -50%);
	border-top: 1px solid rgba(255, 255, 255, 0.20);
	border-bottom: 1px solid rgba(255, 255, 255, 0.20);
	background:
		radial-gradient(circle at center, rgba(114, 242, 255, 0.15), transparent 70%),
		linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
	pointer-events: none;
}

.umpa-7egments-hero__image-column {
	position: relative;
	z-index: 2;
	height: 100%;
	overflow: visible;
}

.umpa-7egments-hero__image-column--left {
	transform: translateY(-14vh);
}

.umpa-7egments-hero__image-column--right {
	transform: translateY(14vh);
}

.umpa-7egments-hero__image-track {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 2vw, 24px);
	will-change: transform;
}

.umpa-7egments-hero__image-track--up {
	animation: umpa-7egments-image-up var(--umpa-7egments-speed, 18s) cubic-bezier(.65, 0, .35, 1) infinite;
}

.umpa-7egments-hero__image-track--down {
	animation: umpa-7egments-image-down var(--umpa-7egments-speed, 18s) cubic-bezier(.65, 0, .35, 1) infinite;
}

.umpa-7egments-hero__image-card {
	position: relative;
	height: 42vh;
	min-height: 280px;
	overflow: hidden;
	border-radius: clamp(22px, 2.2vw, 34px);
	background: rgba(255, 255, 255, 0.1);
	box-shadow:
		0 24px 60px rgba(0, 0, 0, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.16);
	transform: translateZ(0);
}

.umpa-7egments-hero__image-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, transparent 45%, rgba(0, 0, 0, 0.18)),
		linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 42%);
	pointer-events: none;
}

.umpa-7egments-hero__image-card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Animations */

@keyframes umpa-7egments-image-up {
	0%,
	12% {
		transform: translateY(0);
	}

	22%,
	34% {
		transform: translateY(calc(-1 * (42vh + clamp(14px, 2vw, 24px))));
	}

	44%,
	56% {
		transform: translateY(calc(-2 * (42vh + clamp(14px, 2vw, 24px))));
	}

	66%,
	78% {
		transform: translateY(calc(-3 * (42vh + clamp(14px, 2vw, 24px))));
	}

	88%,
	100% {
		transform: translateY(calc(-4 * (42vh + clamp(14px, 2vw, 24px))));
	}
}

@keyframes umpa-7egments-image-down {
	0%,
	12% {
		transform: translateY(calc(-4 * (42vh + clamp(14px, 2vw, 24px))));
	}

	22%,
	34% {
		transform: translateY(calc(-3 * (42vh + clamp(14px, 2vw, 24px))));
	}

	44%,
	56% {
		transform: translateY(calc(-2 * (42vh + clamp(14px, 2vw, 24px))));
	}

	66%,
	78% {
		transform: translateY(calc(-1 * (42vh + clamp(14px, 2vw, 24px))));
	}

	88%,
	100% {
		transform: translateY(0);
	}
}

@keyframes umpa-7egments-orb-float {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	100% {
		transform: translate3d(8vw, 5vw, 0) scale(1.18);
	}
}

@keyframes umpa-7egments-grid-shift {
	0% {
		transform: translate3d(0, 0, 0) rotate(12deg);
	}

	100% {
		transform: translate3d(70px, 70px, 0) rotate(12deg);
	}
}

@keyframes umpa-7egments-light-sweep {
	0%,
	100% {
		opacity: 0.25;
		transform: translateX(-8%);
	}

	50% {
		opacity: 0.65;
		transform: translateX(8%);
	}
}

@keyframes umpa-7egments-content-enter {
	0% {
		opacity: 0;
		transform: translateY(24px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes umpa-7egments-visual-enter {
	0% {
		opacity: 0;
		transform: translateY(30px) scale(0.97);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Tablet */

@media (max-width: 1024px) {
	.umpa-7egments-hero {
		min-height: 100vh;
		min-height: 100svh;
		min-height: 100dvh;
	}

	.umpa-7egments-hero__inner {
		grid-template-columns: 1fr;
		grid-template-rows: 52vh auto;
		gap: 0;
		width: min(100% - 2rem, var(--umpa-container-wide));
		max-width: var(--umpa-container-wide);
		min-height: auto;
	}

	.umpa-7egments-hero__visual {
		order: -1;
		width: 100%;
		min-height: 52vh;
		height: 52vh;
	}

	.umpa-7egments-hero__content {
		width: 100%;
		max-width: var(--umpa-container);
		padding-block: clamp(34px, 7vw, 70px);
		padding-inline: 0;
		text-align: center;
		margin-inline: auto;
	}

	body.has-glass-header-overlay .umpa-7egments-hero__content {
		padding-top: clamp(34px, 7vw, 70px);
	}

	.umpa-7egments-hero__eyebrow,
	.umpa-7egments-hero__buttons {
		margin-inline: auto;
	}

	.umpa-7egments-hero__buttons {
		justify-content: center;
	}

	.umpa-7egments-hero__text {
		margin-inline: auto;
	}

	.umpa-7egments-hero__image-mask {
		padding-inline: 0;
		gap: 12px;
	}

	.umpa-7egments-hero__image-column--left {
		transform: translateY(-16vh);
	}

	.umpa-7egments-hero__image-column--right {
		transform: translateY(8vh);
	}

	.umpa-7egments-hero__image-card {
		height: 34vh;
		min-height: 210px;
		border-radius: 0;
	}

	@keyframes umpa-7egments-image-up {
		0%,
		12% {
			transform: translateY(0);
		}

		22%,
		34% {
			transform: translateY(calc(-1 * (34vh + 12px)));
		}

		44%,
		56% {
			transform: translateY(calc(-2 * (34vh + 12px)));
		}

		66%,
		78% {
			transform: translateY(calc(-3 * (34vh + 12px)));
		}

		88%,
		100% {
			transform: translateY(calc(-4 * (34vh + 12px)));
		}
	}

	@keyframes umpa-7egments-image-down {
		0%,
		12% {
			transform: translateY(calc(-4 * (34vh + 12px)));
		}

		22%,
		34% {
			transform: translateY(calc(-3 * (34vh + 12px)));
		}

		44%,
		56% {
			transform: translateY(calc(-2 * (34vh + 12px)));
		}

		66%,
		78% {
			transform: translateY(calc(-1 * (34vh + 12px)));
		}

		88%,
		100% {
			transform: translateY(0);
		}
	}
}

/* Mobile */

@media (max-width: 680px) {
	.umpa-7egments-hero {
		min-height: 100vh;
		min-height: 100svh;
		min-height: 100dvh;
	}

	.umpa-7egments-hero__inner {
		width: min(100% - 2rem, var(--umpa-container-wide));
		max-width: var(--umpa-container-wide);
		grid-template-rows: 48vh auto;
	}

	.umpa-7egments-hero__visual {
		order: -1;
		width: 100vw;
		min-height: 48vh;
		height: 48vh;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	.umpa-7egments-hero__image-mask {
		width: 100vw;
		height: 48vh;
		min-height: 48vh;
		padding: 0;
		gap: 8px;
	}

	.umpa-7egments-hero__image-mask::before,
	.umpa-7egments-hero__image-mask::after {
		height: 25%;
	}

	.umpa-7egments-hero__focus-glow {
		height: 42%;
	}

	.umpa-7egments-hero__image-column--left {
		transform: translateY(-18vh);
	}

	.umpa-7egments-hero__image-column--right {
		transform: translateY(8vh);
	}

	.umpa-7egments-hero__image-card {
		height: 32vh;
		min-height: 190px;
		border-radius: 0;
	}

	.umpa-7egments-hero__content {
		width: 100%;
		max-width: var(--umpa-container);
		padding-block: 36px 52px;
		padding-inline: 0;
		text-align: center;
		margin-inline: auto;
	}

	.umpa-7egments-hero__title {
		font-size: clamp(36px, 12vw, 54px);
		letter-spacing: -0.055em;
	}

	.umpa-7egments-hero__text {
		margin-inline: auto;
		font-size: 16px;
	}

	.umpa-7egments-hero__buttons {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.umpa-7egments-hero__button {
		width: 100%;
	}

	@keyframes umpa-7egments-image-up {
		0%,
		12% {
			transform: translateY(0);
		}

		22%,
		34% {
			transform: translateY(calc(-1 * (32vh + 8px)));
		}

		44%,
		56% {
			transform: translateY(calc(-2 * (32vh + 8px)));
		}

		66%,
		78% {
			transform: translateY(calc(-3 * (32vh + 8px)));
		}

		88%,
		100% {
			transform: translateY(calc(-4 * (32vh + 8px)));
		}
	}

	@keyframes umpa-7egments-image-down {
		0%,
		12% {
			transform: translateY(calc(-4 * (32vh + 8px)));
		}

		22%,
		34% {
			transform: translateY(calc(-3 * (32vh + 8px)));
		}

		44%,
		56% {
			transform: translateY(calc(-2 * (32vh + 8px)));
		}

		66%,
		78% {
			transform: translateY(calc(-1 * (32vh + 8px)));
		}

		88%,
		100% {
			transform: translateY(0);
		}
	}
}

/* Motion Reduce */

@media (prefers-reduced-motion: reduce) {
	.umpa-7egments-hero,
	.umpa-7egments-hero *,
	.umpa-7egments-hero::before,
	.umpa-7egments-hero::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
	}

	.umpa-7egments-hero__image-track--up,
	.umpa-7egments-hero__image-track--down {
		animation: none !important;
		transform: translateY(0) !important;
	}
}