@layer landingpage {
	/* HERO */

	@media screen and (width < 64em) {
		.hero__img {
			padding: 1rem 1rem 0 1rem;
			background-color: var(--color--white);
			border-radius: var(--border-radius-md);
		}
	}

	/* ----- TESTIMONIALS ----- */

	/* SWIPER Slider */

	:root {
		--swiper-navigation-color: var(--color--primary-600);
		--swiper-theme-color: var(--color--primary-600);
	}

	@media screen and (width >= 40em) {
		.swiper {
			--content-max-width: var(--container--lg);
			width: min(var(--content-max-width), 100% - (var(--padding-inline) * 2));
			margin-inline: auto;
			position: relative;
		}

		/* Add fade effect on left and right edges */
		.swiper::before,
		.swiper::after {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			width: 15vw;
			z-index: 10;
			pointer-events: none;
		}

		.swiper::before {
			left: 0;
			background: linear-gradient(
				to right,
				var(--color-background-primary),
				transparent
			);
		}

		.swiper::after {
			right: 0;
			background: linear-gradient(
				to left,
				var(--color-background-primary),
				transparent
			);
		}

		.swiper-button-next,
		.swiper-button-prev {
			padding: 2rem;
			background: var(--color--primary-700);
			border-radius: var(--border-radius-sm);
			color: var(--color--white);
			z-index: 15;
		}
	}

	.swiper-slide.testimonial {
		background-color: var(--color--white);
		border: 1px solid var(--color--neutral-200);
		border-radius: var(--border-radius-md);
		display: flex;
		align-items: center;
	}

	@media screen and (width < 40em) {
		.swiper-slide {
			padding-bottom: 2rem;
		}
	}

	.slider-card {
		padding: clamp(1.5em, 4vw, 4em);
		text-align: center;
		display: grid;
		place-items: center;
		gap: 0.5rem;
		width: 100%;
	}

	/* Testimonials */

	.testimonial__rating {
		margin-bottom: 1rem;
	}

	.testimonial__rating svg {
		height: 1.1em;
		fill: #eec301;
	}

	.testimonial__quote {
		margin-bottom: var(--spacer--s);
		font-size: 1.4em;
		color: var(--color--primary-700);
		text-wrap: balance;
		line-height: 1.3;
	}

	@media screen and (width < 40em) {
		.testimonial__quote {
			font-size: 1.2em;
		}
	}

	.testimonial__quote::before {
		content: open-quote;
		margin-right: -0.15em;
		font-size: 1.2em;
		line-height: 0.7;
	}

	.testimonial__quote::after {
		content: close-quote;
		margin-left: -0.15em;
		font-size: 1.2em;
		line-height: 0.7;
	}

	.testimonial__author {
		text-transform: uppercase;
		font-weight: 500;
		color: var(--color--neutral-400);
		letter-spacing: 0.1em;
	}

	/* ----- Das erwartet Sie (unser Angebot) ----- */

	.analysis {
		display: flex;
		flex-direction: column;
		row-gap: var(--spacer--m);
	}

	.analysis__wrap {
		display: flex;
		align-items: start;
		gap: var(--spacer--m);
	}

	.analysis__icon {
		width: 3em;
		opacity: 0.7;
	}

	.analysis__img-wrap {
		position: relative;
		aspect-ratio: 4/5;
		overflow: hidden;
		border-radius: var(--border-radius-md);
	}

	@media screen and (width < 40em) {
		.analysis__icon {
			width: 3.5em;
		}

		.analysis__wrap {
			display: flex;
			flex-direction: column;

			gap: var(--spacer--s);
		}
	}

	.analysis__price {
		position: absolute;
		top: 0;
		left: 0;
		background-color: var(--color--white);
		color: var(--color--primary);
		padding: 1rem;
		font-size: var(--font-size--h4);
		font-weight: 500;
		border-radius: 0 0 var(--border-radius-md) 0;
	}

	/* ----- Unsere Strategie ----- */

	.strategy__pyramid {
		background-color: var(--color--white);
		border-radius: var(--border-radius-md);
		padding: clamp(1em, 4vw, 4em);
	}

	.strategy__list {
		list-style: none;
		padding-left: 0;
		margin-left: 0;
		display: flex;
		flex-direction: column;
		gap: var(--spacer--s);
	}

	.strategy__list li p {
		margin: 0;
	}

	@media (width >= 64em) {
		#strategy .grid:nth-of-type(odd) img {
			order: 9999;
		}
	}
	/* ----- Experten ----- */

	.expert__grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
		grid-template-rows: auto;
		gap: clamp(2rem, 4vw, 4rem);
	}

	.expert__card {
		background-color: color-mix(in oklab, var(--color--white), transparent 60%);
		padding: var(--spacer--l);
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		border-radius: var(--border-radius-md);
		border: 1px solid var(--color--neutral-200);
	}

	.expert__card p {
		text-wrap: balance;
	}

	.expert__img {
		width: clamp(8rem, 20vw, 12rem);
		border-radius: 50%;
		aspect-ratio: 1;
		margin-bottom: var(--spacer--s);
	}

	@media screen and (width < 40em) {
		.expert__grid {
			display: flex;
			flex-direction: column;
		}

		.expert__card {
			padding: var(--spacer--m);
		}
	}

	/* ----- Ihre Vorteile ----- */

	@media screen and (width >= 40em) {
		.advantages {
			padding: var(--spacer--l);
		}
	}

	.advantages .grid {
		justify-items: center;
	}

	.advantages__list-wrapper {
		padding: clamp(1.5rem, 4vw, 4rem);
		background-color: var(--color--white);
		border-radius: var(--border-radius-md);
		width: fit-content;
	}

	.advantages__list {
		font-weight: 500;
		font-size: var(--font-size--h6);
		list-style: none;
		padding-left: 2rem;
	}

	.advantages__list li::before {
		content: "✓";
		color: var(--color--primary);
		margin-left: -1.5rem;
		margin-right: 0.5rem;
	}
}