/* Kontaktseite: Hero */

.ls-contact-hero {
	position: relative;
	isolation: isolate;
	overflow: clip;
	background:
		radial-gradient(
			circle at 14% 42%,
			rgb(241 96 30 / 8%),
			transparent 22rem
		),
		radial-gradient(
			circle at 85% 28%,
			rgb(227 78 134 / 8%),
			transparent 24rem
		),
		var(--ls-color-cream);
	color: var(--ls-color-ink);
}

.ls-contact-hero__background {
	position: absolute;
	z-index: -1;
	inset: 0;
	pointer-events: none;
}

.ls-contact-hero__wash {
	position: absolute;
	border-radius: 42% 58% 54% 46% / 48% 42% 58% 52%;
	filter: blur(0.35rem);
	opacity: 0.4;
}

.ls-contact-hero__wash--pink {
	top: 7%;
	right: -9rem;
	width: clamp(18rem, 42vw, 37rem);
	aspect-ratio: 1.1;
	background:
		radial-gradient(
			circle at 45% 45%,
			rgb(227 78 134 / 17%),
			rgb(227 78 134 / 6%) 56%,
			transparent 74%
		);
	transform: rotate(-8deg);
}

.ls-contact-hero__wash--apricot {
	bottom: -8rem;
	left: -9rem;
	width: clamp(20rem, 44vw, 40rem);
	aspect-ratio: 1.2;
	background:
		radial-gradient(
			circle at 50% 50%,
			rgb(241 96 30 / 12%),
			rgb(239 128 101 / 5%) 55%,
			transparent 75%
		);
	transform: rotate(9deg);
}

.ls-contact-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	min-height: calc(100svh - 4.5rem);
	padding-block:
		clamp(4.5rem, 14vw, 6.5rem)
		0;
}

.ls-contact-hero__content {
	position: relative;
	z-index: 6;
	max-width: 39rem;
}

.ls-contact-hero__eyebrow {
	margin: 0 0 1rem;
	color: var(--ls-color-pink);
	font-family: var(--ls-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ls-contact-hero__title {
	max-width: 12ch;
	margin: 0;
	color: var(--ls-color-primary);
	font-family: var(--ls-font-display);
	font-size: clamp(3.1rem, 14vw, 5rem);
	font-weight: 450;
	line-height: 0.92;
	letter-spacing: -0.05em;
	text-wrap: balance;
}

.ls-contact-hero__lead {
	max-width: 34rem;
	margin: 1.4rem 0 0;
	color: var(--ls-color-text-muted);
	font-family: var(--ls-font-body);
	font-size: clamp(1rem, 2.8vw, 1.125rem);
	font-weight: 400;
	line-height: 1.65;
	text-wrap: pretty;
}

.ls-button--contact-hero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	min-height: 3.5rem;
	margin-top: 1.75rem;
	padding: 0.9rem 1.75rem;
	border: 2px solid transparent;
	border-radius: var(--ls-radius-pill);
	background:
		linear-gradient(
			105deg,
			var(--ls-color-orange),
			var(--ls-color-pink)
		);
	box-shadow: var(--ls-shadow-button);
	color: #fff;
	font-family: var(--ls-font-body);
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition:
		box-shadow var(--ls-transition-fast),
		transform var(--ls-transition-fast),
		filter var(--ls-transition-fast);
}

.ls-button--contact-hero:focus-visible {
	outline: 3px solid var(--ls-color-focus);
	outline-offset: 4px;
}

.ls-contact-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 1rem;
	margin: 1.4rem 0 0;
	padding: 0;
	color: var(--ls-color-text-muted);
	font-family: var(--ls-font-body);
	font-size: 0.86rem;
	line-height: 1.4;
	list-style: none;
}

.ls-contact-hero__trust li {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.ls-contact-hero__trust-icon {
	color: var(--ls-color-orange);
	font-size: 1.05rem;
	font-weight: 600;
}

.ls-contact-hero__visual {
	position: relative;
	z-index: 2;
	min-height: clamp(28rem, 122vw, 38rem);
	margin-top: 2rem;
	margin-inline: calc(var(--ls-page-gutter) * -1);
}

.ls-contact-hero__portrait {
	position: absolute;
	z-index: 3;
	right: 50%;
	bottom: -0.35rem;
	display: block;
	width: clamp(21rem, 94vw, 31rem);
	max-width: none;
	height: auto;
	pointer-events: none;
	transform: translateX(50%);
	transform-origin: bottom center;
	user-select: none;
}

.ls-contact-hero__portrait img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	pointer-events: none;
	user-select: none;
}

.ls-contact-hero__sun {
	position: absolute;
	z-index: 1;
	top: 3%;
	right: 10%;
	width: clamp(5rem, 20vw, 7rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(
			circle at 35% 30%,
			#f9c48e,
			#efa77d 68%,
			#ef8065
		);
	box-shadow: 0 0 3rem rgb(241 96 30 / 10%);
	opacity: 0.72;
}

.ls-contact-hero__note {
	position: absolute;
	z-index: 5;
	top: 3%;
	right: 1%;
	max-width: 8rem;
	color: var(--ls-color-primary);
	font-family: var(--ls-font-script);
	font-size: clamp(1.5rem, 6vw, 2rem);
	font-weight: 500;
	line-height: 0.95;
	text-align: center;
	text-wrap: balance;
	transform: rotate(-5deg);
}

.ls-contact-hero__note-heart {
	display: block;
	width: 1.5rem;
	height: auto;
	margin: 0.5rem auto 0;
	color: var(--ls-color-primary);
}

.ls-contact-hero__branch {
	position: absolute;
	z-index: 4;
	right: -1.25rem;
	bottom: 4%;
	width: clamp(5.5rem, 22vw, 8.5rem);
	height: auto;
	color: var(--ls-color-orange);
	opacity: 0.63;
	transform: rotate(6deg);
}

.ls-anchor-target {
	display: block;
	height: 1px;
	overflow: hidden;
	scroll-margin-top: calc(var(--ls-header-height) + 1rem);
}

body.admin-bar .ls-anchor-target {
	scroll-margin-top: calc(var(--ls-header-height) + 32px + 1rem);
}

@media screen and (max-width: 782px) {
	body.admin-bar .ls-anchor-target {
		scroll-margin-top: calc(var(--ls-header-height) + 46px + 1rem);
	}
}

@media (min-width: 48rem) {
	.ls-contact-hero__inner {
		padding-top: clamp(5.5rem, 9vw, 7rem);
	}

	.ls-contact-hero__title {
		font-size: clamp(4.4rem, 9vw, 6rem);
	}

	.ls-contact-hero__visual {
		min-height: 42rem;
		margin-top: 0;
	}

	.ls-contact-hero__portrait {
		right: 31%;
		width: clamp(31rem, 62vw, 39rem);
		transform: none;
	}

	.ls-contact-hero__sun {
		top: 2%;
		right: 8%;
		width: 8rem;
	}

	.ls-contact-hero__note {
		top: 2%;
		right: 2%;
		max-width: 9rem;
		font-size: 2.15rem;
	}

	.ls-contact-hero__branch {
		right: 2%;
		bottom: 6%;
		width: 9rem;
	}
}

@media (min-width: 64rem) {
	.ls-contact-hero__inner {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: clamp(1.5rem, 2.6vw, 2.75rem);
		min-height: clamp(42rem, 78vh, 50rem);
		padding-block: 5.25rem 0;
	}

	.ls-contact-hero__content {
		grid-column: 1 / span 6;
		align-self: center;
		padding-bottom: 3rem;
	}

	.ls-contact-hero__visual {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		width: 100vw;
		min-height: 100%;
		margin: 0 0 0 -50vw;
	}

	.ls-contact-hero__title {
		max-width: 10.5ch;
		font-size: clamp(5rem, 6vw, 6.65rem);
		line-height: 0.91;
	}

	.ls-contact-hero__lead {
		max-width: 36rem;
		margin-top: 1.6rem;
		font-size: 1.1rem;
	}

	.ls-contact-hero__portrait {
		right: max(
			1rem,
			calc((100vw - var(--ls-container)) / 2)
		);
		bottom: -1rem;
		width: clamp(34rem, 40vw, 43rem);
		transform: none;
	}

	.ls-contact-hero__sun {
		top: 3%;
		right: max(
			5rem,
			calc((100vw - var(--ls-container)) / 2 + 7rem)
		);
		width: clamp(7rem, 8vw, 9rem);
	}

	.ls-contact-hero__note {
		top: 12%;
		right: max(
			0.5rem,
			calc((100vw - var(--ls-container)) / 2 - 6.5rem)
		);
		max-width: 9.5rem;
		font-size: clamp(1.85rem, 2.3vw, 2.4rem);
	}

	.ls-contact-hero__branch {
		right: max(
			-1rem,
			calc((100vw - var(--ls-container)) / 2 - 3rem)
		);
		bottom: 4%;
		width: clamp(8rem, 9vw, 10.5rem);
	}
}

@media (min-width: 90rem) {
	.ls-contact-hero__content {
		grid-column: 1 / span 6;
	}

	.ls-contact-hero__portrait {
		width: clamp(38rem, 38vw, 46rem);
	}

	.ls-contact-hero__note {
		right: max(
			0.75rem,
			calc((100vw - var(--ls-container)) / 2 - 6rem)
		);
	}
}

@media (hover: hover) and (pointer: fine) {
	.ls-button--contact-hero:hover {
		box-shadow: 0 1rem 2.2rem rgb(91 36 80 / 22%);
		filter: saturate(1.06);
		transform: translateY(-2px);
	}

	.ls-button--contact-hero:hover span:last-child {
		transform: translateX(0.25rem);
	}

	.ls-button--contact-hero span:last-child {
		transition: transform var(--ls-transition-fast);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.ls-contact-hero__sun {
		animation: ls-contact-sun-float 8s ease-in-out infinite alternate;
	}

	.ls-contact-hero__branch {
		animation: ls-contact-branch-float 7s ease-in-out infinite alternate;
		transform-origin: bottom center;
	}
}

@keyframes ls-contact-sun-float {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-0.4rem);
	}
}

@keyframes ls-contact-branch-float {
	from {
		transform: translateY(0) rotate(6deg);
	}

	to {
		transform: translateY(-0.3rem) rotate(4deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ls-contact-hero__sun,
	.ls-contact-hero__branch,
	.ls-button--contact-hero {
		animation: none;
		transition: none;
	}
}