@layer landingpage {
	/* global */
	:root {
		--accent-color: var(--color--secondary);
		--headline-color: var(--color--primary);
	}

	/* text color */

	/* :where(h1, h2, h3, h4, h5, h6):not(.blue-bg *) {
		color: var(--headline-color);
	} */

	:where(strong):not(.blue-bg *) {
		color: var(--headline-color);
	}

	:where(p, li, ul, ol) {
		color: currentColor;
	}

	/* setup for blue background */
	.blue-bg {
		--background-color: var(--color--primary);
		--text-color: var(--color--white);

		background-color: var(--background-color);
		color: var(--text-color);
	}

	.blue-bg .eyebrow {
		color: currentColor;
	}

	.blue-bg .button {
		background-color: var(--accent-color);
		color: var(--background-color);
		border: 1px solid var(--accent-color);
	}

	.blue-bg .button:hover {
		background-color: var(--text-color);
		color: var(--background-color);
		border-color: var(--text-color);
	}

	.blue-bg .button:active {
		background-color: transparent;
		color: var(--text-color);
		border-color: var(--text-color);
	}

	.is-color-accent {
		color: var(--accent-color);
	}

	.is-bg-accent {
		background-color: var(--accent-color);
	}

	/* hero section */

	.ss-hero__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: var(--border-radius-md);
		aspect-ratio: 1;
	}

	.ss-hero__logo {
		width: clamp(12rem, 20vw, 18rem);
		margin-bottom: var(--spacer--m);
	}

	/* Solution section */

	@media screen and (width >= 64em) {
		.ss-solutions .grid:nth-child(odd) .grid__item:has(img) {
			order: -999;
		}
	}

	.ss-grid-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: var(--border-radius-md);
	}

	.ss-list {
		list-style: none;
		padding-left: 1.5em;
		margin-left: 0;
	}

	.ss-list li::before {
		content: "→";
		font-size: 1.1em;
		line-height: 1;
		color: var(--accent-color);
		font-weight: 600;
		margin-left: -1.5em;
		margin-right: 0.5em;
	}

	.ss-list.ss-list--checkmark li::before {
		content: "✓";
	}

	/* FAQ */

	.faq-item {
		border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
	}

	.faq-question {
		cursor: pointer;
		padding: var(--spacer--m) 0;
		margin: 0;
		position: relative;
		transition: color 0.3s ease;
		font-size: var(--font-size--h6);
		line-height: 1.3;
		user-select: none;
	}

	.faq-question::after {
		content: "+";
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		font-size: 1.5rem;
		font-weight: 300;
		transition: transform 0.3s ease;
		color: var(--accent-color);
	}

	.faq-question:hover {
		color: var(--accent-color);
	}

	.faq-item.active .faq-question::after {
		content: "−";
		transform: translateY(-50%);
	}

	.faq-answer {
		display: grid;
		grid-template-rows: 0fr;
		overflow: hidden;
		transition: grid-template-rows 0.3s ease;
		padding: 0;
	}

	.faq-item.active .faq-answer {
		grid-template-rows: 1fr;
		padding-bottom: var(--spacer--m);
	}

	.faq-answer > div {
		min-height: 0;
	}

	.faq-answer p {
		margin: 0;
		color: color-mix(in srgb, var(--text-color) 85%, transparent);
		line-height: 1.4;
	}

	/* CTA section*/

	:root {
		--pulse-color: var(--accent-color);
		--pulse-opacity-start: 40%;
		--pulse-opacity-end: 0%;
	}

	.cta-wrapper {
		padding: clamp(1.5rem, 4vw, 6rem);
		border-radius: var(--border-radius-md);
		border: 3px solid var(--accent-color);
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		box-shadow: 0 0 2rem rgba(252, 163, 17, 0.6);
		animation: pulse 2.5s infinite !important;
		z-index: 1;
	}

	.cta-wrapper::before {
		z-index: -1;
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: var(--border-radius-md);
		box-shadow: 0 0 2rem
			color-mix(in srgb, var(--accent-color) 70%, transparent);
	}

	@-webkit-keyframes pulse {
		0% {
			-webkit-box-shadow: 0 0 0 0 rgba(252, 163, 17, 0.7);
		}
		70% {
			-webkit-box-shadow: 0 0 0 2rem rgba(252, 163, 17, 0);
		}
		100% {
			-webkit-box-shadow: 0 0 0 0 rgba(252, 163, 17, 0);
		}
	}

	@keyframes pulse {
		0% {
			-moz-box-shadow: 0 0 0 0 rgba(252, 163, 17, 0.7);
			box-shadow: 0 0 0 0 rgba(252, 163, 17, 0.7);
		}
		70% {
			-moz-box-shadow: 0 0 0 2rem rgba(252, 163, 17, 0);
			box-shadow: 0 0 0 2rem rgba(252, 163, 17, 0);
		}
		100% {
			-moz-box-shadow: 0 0 0 0 rgba(252, 163, 17, 0);
			box-shadow: 0 0 0 0 rgba(252, 163, 17, 0);
		}
	}

	/* Partner section */

	.grid.grid--partners {
		--gap: clamp(1rem, 2.5vw, 3rem);
	}

	@media screen and (width >= 64em) {
		.grid.grid--partners {
			grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
			grid-template-rows: repeat(auto-fill, auto auto auto);
		}
	}

	.grid.grid--partners .grid__item {
		padding: clamp(2rem, 2.5vw, 3rem);
		border-radius: var(--border-radius-md);
		border: 2px solid var(--color--neutral-900);
		background-color: var(--color--white);
		display: grid;
		grid-template-rows: auto 1fr auto;
	}

	@supports (grid-template-rows: subgrid) {
		@media screen and (width >= 64em) {
			.grid.grid--partners .grid__item {
				grid-template-rows: subgrid;
				grid-row: span 3;
			}
		}
	}

	.grid.grid--partners .grid__item :where(p, h3) {
		color: initial;
	}

	.partners__name {
		color: var(--background-color);
	}

	.partners__logo {
		width: clamp(12rem, 20vw, 18rem);
		aspect-ratio: 25/8;
		object-fit: contain;
		max-width: 100%;
		margin: 0 auto;
		height: auto;
		margin-bottom: var(--spacer--m);
	}

	/* Vorteile section */

	.grid.grid--vorteile {
		--gap: clamp(1rem, 2.5vw, 3rem);
	}

	@media screen and (width >= 64em) {
		.grid.grid--vorteile {
			grid-template-columns: repeat(2, 1fr);
			align-items: stretch;
		}
	}

	.grid.grid--vorteile .grid__item {
		padding: clamp(2rem, 2.5vw, 3rem);
		border-radius: var(--border-radius-md);
		border: 1px solid color-mix(in srgb, currentColor 70%, transparent);
	}

	.vorteile-icon {
		width: clamp(3.5rem, 10vw, 6rem);
		aspect-ratio: 1;
		color: var(--accent-color);
		overflow: hidden;
		margin-bottom: var(--spacer--s);
	}

	.vorteile-icon svg {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* Infographic section */

	@media screen and (width >= 64em) {
		.grid--infographic .grid__item:has(.ss-infographic__img) {
			order: -999;
		}
	}

	.ss-infographic__img {
		width: 100%;
	}
}