/* ==========================================================================
   Websmarty – Branchen-Landingpages für Anzeigen (Fashion, Beauty, …)
   Aufbau: template-parts/pages/landing.php
   ========================================================================== */

/* Reduzierte Kopfleiste: nur Logo und Button, auch auf kleinen Handys sichtbar */
.has-minimal-header .site-header__actions {
	margin-left: auto;
}

.header-cta--landing {
	display: inline-flex;
}

@media (max-width: 29.99em) {
	.header-cta--landing {
		min-height: 2.5rem;
		padding: 0.5rem 0.95rem;
		font-size: var(--fs-xs);
	}
}

/* Hero ------------------------------------------------------------------- */

.lp-hero {
	overflow-x: clip;
	padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(3.5rem, 2rem + 5vw, 6.5rem);
}

.lp-hero__grid {
	display: grid;
	gap: var(--s-16);
	align-items: center;
}

.lp-hero__copy {
	display: grid;
	gap: var(--s-6);
}

.lp-hero__title {
	max-width: 14em;
	font-size: clamp(2.25rem, 1.4rem + 3.2vw, 4.1rem);
	text-wrap: balance;
}

/* Kurze Fachbegriffe wie „Fashion-Brands“ nicht am Bindestrich trennen */
.lp-hero__title em,
.lp-levers .h2 em,
.lp-proof .h2 em {
	white-space: nowrap;
}

.lp-points {
	display: grid;
	gap: var(--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-points li {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	color: var(--c-text);
	font-weight: 500;
}

.lp-points .icon {
	--icon-size: 1.15rem;
	flex: none;
	margin-top: 0.2em;
	padding: 0.15rem;
	border-radius: 50%;
	background: var(--c-accent-soft);
	color: var(--c-accent);
	stroke-width: 2.5;
}

/* Shopify-Partner-Logo und belegbare Fakten */
.lp-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-4) var(--s-6);
	padding-top: var(--s-5);
	border-top: 1px solid var(--c-line);
}

.lp-partner {
	display: flex;
	align-items: center;
	margin: 0;
}

.lp-partner__logos {
	display: flex;
	align-items: center;
	gap: var(--s-4);
}

.lp-partner__logos img {
	width: auto;
	height: 2.1rem;
}

.lp-partner__label {
	margin-right: var(--s-3);
	color: var(--c-text-3);
	font-size: var(--fs-xs);
}

.lp-trust__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-1) var(--s-4);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--c-text-2);
	font-size: var(--fs-sm);
}

.lp-trust__facts li {
	display: inline-flex;
	align-items: center;
	gap: var(--s-4);
}

.lp-trust__facts li + li::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--c-accent);
}

/* Grafik mit schwebenden Branchen-Symbolen */
.lp-hero__media {
	position: relative;
	padding: var(--s-8) var(--s-4);
}

.lp-orbit {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.lp-orbit__icon {
	position: absolute;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-md);
	background: linear-gradient(180deg, var(--c-surface-3), var(--c-surface-2) 70%);
	box-shadow:
		inset 0 1px 0 var(--c-highlight),
		0 1rem 2rem -1rem var(--c-shadow);
	color: var(--c-accent);
	animation:
		ws-orbit-in 600ms var(--ease-out) calc(1100ms + var(--i) * 140ms) backwards,
		ws-orbit-float 6s ease-in-out calc(1800ms + var(--i) * 400ms) infinite;
}

.lp-orbit__icon .icon {
	--icon-size: 1.45rem;
}

.lp-orbit__icon--1 {
	top: 0;
	left: 0;
	rotate: -8deg;
}

.lp-orbit__icon--2 {
	top: 58%;
	right: -0.75rem;
	rotate: 7deg;
}

.lp-orbit__icon--3 {
	bottom: 0;
	left: 12%;
	rotate: 6deg;
}

.lp-orbit__icon--4 {
	right: 10%;
	bottom: -0.5rem;
	rotate: -5deg;
	width: 2.5rem;
	height: 2.5rem;
}

.lp-orbit__icon--4 .icon {
	--icon-size: 1.2rem;
}

/* Bis die Grafik sichtbar ist, warten die Symbole (nur mit JS) */
.js .lp-orbit:not(.is-playing) .lp-orbit__icon {
	animation-play-state: paused;
}

@keyframes ws-orbit-in {
	from {
		opacity: 0;
		transform: scale(0.6) translateY(0.75rem);
	}
}

@keyframes ws-orbit-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-0.45rem);
	}
}

@media (min-width: 64em) {
	.lp-hero__grid {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	}

	.lp-hero__media {
		padding: var(--s-10) var(--s-6) var(--s-10) var(--s-8);
	}
}

/* Probleme --------------------------------------------------------------- */

.lp-pains__grid {
	display: grid;
	gap: var(--s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-pain {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--s-2) var(--s-5);
	padding: var(--s-6);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	background: var(--c-bg-raised);
}

.lp-pain__icon {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--c-surface-2);
	color: var(--c-text-2);
}

.lp-pain__icon .icon {
	--icon-size: 1.3rem;
}

.lp-pain__title {
	margin: 0;
	font-size: var(--fs-h5);
	font-weight: 600;
	line-height: 1.25;
}

.lp-pain__text {
	margin: 0;
	color: var(--c-text-2);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

@media (min-width: 48em) {
	.lp-pains__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Hebel der Branche ------------------------------------------------------ */

.lp-levers__grid {
	display: grid;
	gap: var(--s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-lever__core {
	display: grid;
	align-content: start;
	gap: var(--s-4);
	padding: var(--s-6);
}

.lp-lever__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.lp-lever__num {
	color: var(--c-text-3);
	font-family: var(--ff-display);
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.lp-lever__title {
	margin: 0;
	font-size: var(--fs-h5);
	font-weight: 600;
	line-height: 1.25;
	text-wrap: balance;
}

.lp-lever__text {
	margin: 0;
	color: var(--c-text-2);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

@media (min-width: 40em) {
	.lp-levers__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.lp-levers__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (hover: hover) and (pointer: fine) {
	.lp-lever:hover .lp-lever__num {
		color: var(--c-accent);
		transition: color var(--dur-base) var(--ease-out);
	}
}

/* Leistungen ------------------------------------------------------------- */

.lp-services__grid {
	display: grid;
	gap: var(--s-12);
}

.lp-services__head {
	display: grid;
	align-content: start;
	gap: var(--s-5);
}

.lp-person {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	margin-top: var(--s-2);
}

.lp-person__photo {
	flex: none;
	width: 3.5rem;
	padding: 0.2rem;
	border: 1px solid var(--c-accent-line);
	border-radius: 50%;
}

.lp-person__photo .media-slot {
	--ratio: 1 / 1;
	border-radius: 50%;
}

.lp-person p {
	display: grid;
	margin: 0;
}

.lp-person__name {
	color: var(--c-text);
	font-weight: 600;
}

.lp-person__role {
	color: var(--c-text-3);
	font-size: var(--fs-sm);
}

.lp-services__list {
	display: grid;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--c-line);
	list-style: none;
}

.lp-service {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--s-5);
	align-items: start;
	padding-block: var(--s-6);
	border-bottom: 1px solid var(--c-line);
}

.lp-service__title {
	margin: 0 0 var(--s-1);
	font-size: var(--fs-h5);
	font-weight: 600;
}

.lp-service__text {
	margin: 0;
	color: var(--c-text-2);
	line-height: 1.6;
}

@media (min-width: 64em) {
	.lp-services__grid {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		gap: var(--s-16);
	}

	.lp-services__head {
		position: sticky;
		top: calc(var(--header-h) + var(--header-gap) * 2 + 1.5rem);
	}
}

/* Formen der Zusammenarbeit --------------------------------------------- */

.lp-models__grid {
	display: grid;
	gap: var(--s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-model__core {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	padding: var(--s-8) var(--s-6) var(--s-6);
}

.lp-model__title {
	margin: var(--s-1) 0 0;
	font-size: var(--fs-h4);
	font-weight: 600;
}

.lp-model__text {
	margin: 0;
	color: var(--c-text-2);
	line-height: 1.6;
}

.lp-model__fit {
	display: flex;
	align-items: flex-start;
	gap: var(--s-2);
	margin: auto 0 0;
	padding: var(--s-3) var(--s-4);
	border-radius: var(--r-md);
	background: var(--c-accent-soft);
	color: var(--c-text);
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.45;
}

.lp-model__fit .icon {
	--icon-size: 1rem;
	flex: none;
	margin-top: 0.15em;
	color: var(--c-accent);
}

.lp-models .section-cta {
	justify-content: center;
	text-align: center;
}

@media (min-width: 56em) {
	.lp-models__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Referenzen und Bewertungen -------------------------------------------- */

.lp-proof__refs {
	margin-bottom: var(--s-10);
}

.lp-proof__reviews {
	display: grid;
	gap: var(--s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-proof__reviews .review {
	height: 100%;
}

@media (min-width: 56em) {
	.lp-proof__reviews {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Anfrage: Shop-Check und Termin ---------------------------------------- */

.lp-request {
	background:
		radial-gradient(60% 50% at 20% 0%, color-mix(in srgb, var(--c-accent) 6%, transparent), transparent 70%),
		var(--c-bg);
	scroll-margin-top: calc(var(--header-h) + var(--header-gap) * 2);
}

.lp-request__grid {
	display: grid;
	gap: var(--s-6);
	align-items: start;
}

.lp-form-shell {
	scroll-margin-top: calc(var(--header-h) + var(--header-gap) * 2 + 1rem);
}

.lp-form-core {
	padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
}

.lp-form__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--s-5);
	align-items: start;
	margin-bottom: var(--s-6);
}

.lp-form__head h2 {
	margin: 0 0 var(--s-2);
}

.lp-form__head p {
	margin: 0;
}

#termin {
	scroll-margin-top: calc(var(--header-h) + var(--header-gap) * 2 + 1rem);
}

@media (min-width: 64em) {
	.lp-request__grid {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
		gap: var(--s-8);
	}
}

/* Fester Button unten (nur mobil) ---------------------------------------- */

.lp-sticky {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--z-dim);
	padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
	border-top: 1px solid var(--c-line-strong);
	background: color-mix(in srgb, var(--c-bg) 88%, transparent);
	backdrop-filter: blur(12px);
	transform: translateY(110%);
	transition: transform var(--dur-base) var(--ease-out);
}

.lp-sticky.is-visible {
	transform: translateY(0);
}

@media (min-width: 48em) {
	.lp-sticky {
		display: none;
	}
}

/* Bewegung reduzieren ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.lp-orbit__icon {
		animation: none;
	}

	.lp-sticky {
		transition: none;
	}
}