/* Wiederverwendbarer dunkler Zwischen-CTA */

.ls-cta-strip {
	position: relative;
	display: grid;
	gap: 1.5rem;
	overflow: hidden;
	margin-top: clamp(3rem, 7vw, 5rem);
	padding: 1.6rem;
	border-radius: 1.15rem;
	background:
		radial-gradient(circle at 82% 35%, rgb(227 78 134 / 18%), transparent 18rem),
		linear-gradient(105deg, #35172d, #542244 68%, #48203b);
	box-shadow: 0 1rem 2.8rem rgb(43 22 38 / 15%);
	color: #fffaf4;
}

.ls-cta-strip__content {
	position: relative;
	z-index: 2;
}

.ls-cta-strip__content h2 {
	margin: 0;
	color: #fffaf4;
	font-family: var(--ls-font-display);
	font-size: clamp(1.9rem, 8vw, 3rem);
	font-weight: var(--ls-weight-medium);
	letter-spacing: -0.03em;
	line-height: 1.02;
}

.ls-cta-strip__content p {
	margin: 0.65rem 0 0;
	color: rgb(255 250 244 / 76%);
	font-family: var(--ls-font-body);
	font-size: 0.92rem;
	line-height: 1.55;
}

.ls-cta-strip__button {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem 1.35rem;
	border-radius: 999px;
	background: linear-gradient(100deg, var(--ls-color-accent, #e34e86), var(--ls-color-secondary, #f1601e));
	color: #fff;
	font-family: var(--ls-font-body);
	font-size: 0.92rem;
	font-weight: var(--ls-weight-medium);
	text-decoration: none;
	transition: box-shadow 180ms ease, transform 180ms ease;
}

.ls-cta-strip__button:hover {
	box-shadow: 0 0.9rem 1.8rem rgb(227 78 134 / 28%);
	transform: translateY(-2px);
}

.ls-cta-strip__button:focus-visible {
	outline: 3px solid rgb(255 255 255 / 78%);
	outline-offset: 4px;
}

.ls-cta-strip__branch,
.ls-cta-strip__orb {
	position: absolute;
	pointer-events: none;
	user-select: none;
}

.ls-cta-strip__branch {
	bottom: -3rem;
	left: -2.5rem;
	width: 10rem;
	opacity: 0.42;
	rotate: 9deg;
}

.ls-cta-strip__orb {
	top: -2.4rem;
	right: -2.2rem;
	width: 8rem;
	opacity: 0.75;
}

.ls-cta-strip__branch img,
.ls-cta-strip__orb img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 40rem) {
	.ls-cta-strip__button {
		justify-self: start;
		width: auto;
	}
}

@media (min-width: 64rem) {
	.ls-cta-strip {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 2rem;
		min-height: 8.5rem;
		padding: 1.75rem 4.75rem 1.75rem 7.5rem;
	}

	.ls-cta-strip__content h2 {
		font-size: 2.55rem;
	}

	.ls-cta-strip__branch {
		bottom: -3.4rem;
		left: -1.25rem;
		width: 10.5rem;
	}

	.ls-cta-strip__orb {
		top: -3rem;
		right: -1.75rem;
		width: 9.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ls-cta-strip__button {
		transition: none;
	}
}