/* ── faq.css — Accordion nach dem Live-System von evergreen.media ───────── */

.faq {
	padding-block: 4.5rem;
}

.variant-a main .faq h2 {
	font-size: var(--fs-h2-fluid);
	font-weight: 600;
	margin-bottom: 0;
}

.faq__list {
	margin-block: 3.375rem;
}

.faq__item {
	margin-bottom: 1.125rem;
	background: var(--c-bg);
}

.faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	padding: 0.84375rem 1.40625rem;
	border-radius: var(--radius-sm);
	background: var(--c-surface-olive);
	color: var(--c-text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: var(--lh-body);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.faq__item summary:hover {
	background: var(--c-surface);
}

details.faq__item.disclosure > summary::after {
	content: "";
	width: 0.875rem;
	height: 0.875rem;
	margin-left: auto;
	border-right: 0.09375rem solid currentColor;
	border-bottom: 0.09375rem solid currentColor;
	color: var(--c-text);
	transform: rotate(45deg) translate(-0.125rem, -0.125rem);
	transition: color 0.2s ease, transform 0.2s ease;
}

details.faq__item.disclosure[open] > summary::after {
	content: "";
	color: var(--c-link);
	transform: rotate(225deg) translate(-0.125rem, -0.125rem);
}

.faq__item > p {
	margin: 0;
	padding: 0.84375rem 1.40625rem 1.96875rem;
	color: var(--c-text);
	line-height: 1.8;
}

@media (prefers-reduced-motion: reduce) {
	.faq__item summary,
	details.faq__item.disclosure > summary::after {
		transition: none;
	}
}

@media (max-width: 48rem) {
	.faq {
		padding-block: 3rem;
	}

	.faq__list {
		margin-block: 2.25rem;
	}

	.faq__item summary {
		padding-inline: 1rem;
	}

	.faq__item > p {
		padding-inline: 1rem;
	}
}