/*
 * FAQ (.ps-faq, core/details): links Überschrift, rechts die Fragen als Aufklapper.
 * Die Antworten stehen im HTML (details), auch wenn sie zugeklappt sind.
 */

.ps-start .ps-faq {
	background: var(--leinen);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(32px, 5vw, 96px);
	align-items: start;
}
@media (min-width: 960px) {
	.ps-start .ps-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
	.ps-start .ps-faq__kopf { position: sticky; top: calc(var(--header-h) + 32px); }
}
.ps-start .ps-faq__kopf { display: grid; gap: 20px; }
.ps-start .ps-faq__kopf > .is-style-ps-dachzeile { margin-bottom: -2px; }
.ps-start .ps-faq__kopf p:not(.is-style-ps-dachzeile) { color: var(--text-muted); font-size: var(--fs-small); }

.ps-start .ps-faq__liste { border-top: 1px solid var(--border-default); }
.ps-start .ps-faq__eintrag { border-bottom: 1px solid var(--border-default); }
.ps-start .ps-faq__eintrag > summary {
	position: relative;
	display: block;
	padding: 22px 56px 22px 0;
	list-style: none;
	cursor: pointer;
	font: 400 21px/1.35 var(--font-display);
	color: var(--text-strong);
	transition: color var(--dur-fast);
}
.ps-start .ps-faq__eintrag > summary::-webkit-details-marker { display: none; }
.ps-start .ps-faq__eintrag > summary:hover { color: var(--tanne-700); }
.ps-start .ps-faq__eintrag > summary::before,
.ps-start .ps-faq__eintrag > summary::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 16px;
	height: 1.5px;
	background: var(--tanne-600);
	transition: transform var(--dur-base) var(--ease-out);
}
.ps-start .ps-faq__eintrag > summary::after { transform: rotate(90deg); }
.ps-start .ps-faq__eintrag[open] > summary::after { transform: rotate(0deg); }
.ps-start .ps-faq__eintrag > summary:focus-visible { outline: 2px solid var(--sonne-500); outline-offset: 4px; }
.ps-start .ps-faq__eintrag > :not(summary) { padding: 0 56px 24px 0; max-width: 68ch; color: var(--text-body); }
.ps-start .ps-faq__eintrag[open] > :not(summary) { animation: ps-faq-auf 400ms var(--ease-out); }
@keyframes ps-faq-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (max-width: 599px) {
	.ps-start .ps-faq__eintrag > summary { font-size: 19px; padding-right: 44px; }
	.ps-start .ps-faq__eintrag > :not(summary) { padding-right: 0; }
}