/*
 * proof/faq. Centred: Figma Home 2373:1604 / 2373:1733 (947 wide, items
 * 24 apart, padding 28 / 32, radius 5, title 20 / 1.5, answer 18).
 * Split: agency 3275:1243 (copy 657, accordion 1041, radius 8, open item
 * padding 24 / 32). Closed items are 86 tall. proof.js (.pf-faqlist)
 * animates opening and closing.
 */

.pf-block.pf-faqsec--centered {
	padding-top: calc(113 * var(--pf-u));
	padding-bottom: calc(196 * var(--pf-u));
}
.pf-block.pf-faqsec--split {
	padding-top: calc(230 * var(--pf-u));
}

/* Accordion */
.pf-block .pf-faqlist {
	display: flex;
	flex-direction: column;
	gap: calc(24 * var(--pf-u));
	counter-reset: pf-faq;
}
.pf-faqsec--centered .pf-faqlist {
	align-self: center;
	width: calc(947 * var(--pf-u));
	max-width: 100%;
	margin-top: calc(70.5 * var(--pf-u));
}
.pf-block .pf-faqitem {
	counter-increment: pf-faq;
	border-radius: calc(5 * var(--pf-u));
	background: #fafafb;
	transition: background-color 0.25s;
}
.pf-block .pf-faqitem[open] {
	background: var(--pf-navy);
}
.pf-block .pf-faqitem-title {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: calc(24 * var(--pf-u));
	padding: calc(28 * var(--pf-u)) calc(32 * var(--pf-u));
	cursor: pointer;
	list-style: none;
}
.pf-block .pf-faqitem-title::-webkit-details-marker {
	display: none;
}
.pf-block .pf-faqitem-title:focus-visible {
	outline: 2px solid var(--pf-blue);
	outline-offset: 2px;
	border-radius: inherit;
}
/* Number, 10 apart, then the question. Figma sets them in Helvetica Neue. */
.pf-block .pf-faqitem-q {
	display: flex;
	gap: calc(10 * var(--pf-u));
	max-width: calc(626 * var(--pf-u));
	font-family: var(--pf-sans);
	font-weight: 400;
	font-size: calc(20 * var(--pf-t));
	line-height: 1.5;
	letter-spacing: -0.03em;
	color: #012234;
}
.pf-block .pf-faqitem-q::before {
	content: counter(pf-faq, decimal-leading-zero);
	color: var(--pf-green);
}
/* Plus / minus, 39 x 30. */
.pf-block .pf-faqitem-title::after {
	content: "";
	flex: none;
	width: calc(39 * var(--pf-u));
	height: calc(30 * var(--pf-u));
	min-width: 24px;
	background: url("../../assets/img/faq-plus.svg") no-repeat center / contain;
}
.pf-block .pf-faqitem[open] > .pf-faqitem-title {
	padding-bottom: calc(12 * var(--pf-u));
}
.pf-block .pf-faqitem[open] > .pf-faqitem-title::after {
	background-image: url("../../assets/img/faq-minus.svg");
}
/* Centred (Home): Figma's icon frames at the row top, unscaled: the plus
   39 x 21.2 (4 higher than centred in 30), the minus 39 x 32 (its row
   stays 30), both 2 in from the 32 padding. */
.pf-block.pf-faqsec--centered .pf-faqitem-title::after {
	height: calc(21.2 * var(--pf-u));
	margin-right: calc(2 * var(--pf-u));
}
.pf-block.pf-faqsec--centered .pf-faqitem[open] > .pf-faqitem-title::after {
	height: calc(32 * var(--pf-u));
	margin-bottom: calc(-2 * var(--pf-u));
}
.pf-block .pf-faqitem[open] .pf-faqitem-q {
	color: #fff;
}
.pf-block .pf-faqitem[open] .pf-faqitem-q::before {
	color: #b5ffa0;
}
.pf-block .pf-faqitem-a {
	padding: 0 calc(32 * var(--pf-u)) calc(28 * var(--pf-u));
	font-size: calc(18 * var(--pf-t));
	line-height: 1.5;
	letter-spacing: -0.03em;
	color: rgba(255, 255, 255, 0.6);
}
.pf-block .pf-faqitem-a > * {
	width: min(100%, calc(626 * var(--pf-u)));
}
/* Not in the design (one paragraph per answer). */
.pf-block .pf-faqitem-a > * + * {
	margin-top: calc(12 * var(--pf-u));
}
.pf-block .pf-faqitem-a a {
	color: #fff;
	text-decoration: underline;
}
.pf-block .pf-faqitem-a strong {
	font-weight: 500;
	color: #fff;
}

/* Split: copy column left, accordion right, tops aligned. */
.pf-faqsec-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: calc(54 * var(--pf-u));
}
.pf-faqsec-copy {
	display: flex;
	flex: none;
	flex-direction: column;
	width: calc(657 * var(--pf-u));
}
/* Figma trims the H2 box to cap height: its line box starts 13.5 above the
   accordion, and 3 lines of 1.18 (not the file's 1.2) put the intro and
   the button where Figma has them. */
.pf-block .pf-faqsec-copy .pf-h2 {
	margin-top: calc(-13.5 * var(--pf-u));
	line-height: 1.18;
}
/* 605 in Figma; 440 keeps its break after "wir antworten". */
.pf-block .pf-faqsec-sub {
	width: calc(440 * var(--pf-u));
	max-width: 100%;
	margin-top: calc(13.5 * var(--pf-u));
	font-size: calc(16 * var(--pf-t));
	line-height: 1.5;
	letter-spacing: -0.04em;
	color: rgba(0, 0, 0, 0.5);
}
.pf-block .pf-faqsec-copy .pf-btn-mail {
	margin-top: calc(40 * var(--pf-u));
}
.pf-faqsec--split .pf-faqlist {
	flex: none;
	width: calc(1041 * var(--pf-u));
}
.pf-block.pf-faqsec--split .pf-faqitem {
	border-radius: calc(8 * var(--pf-u));
}
.pf-block.pf-faqsec--split .pf-faqitem[open] > .pf-faqitem-title {
	padding-top: calc(24 * var(--pf-u));
}
.pf-block.pf-faqsec--split .pf-faqitem-a {
	padding-bottom: calc(24 * var(--pf-u));
}
.pf-block.pf-faqsec--split .pf-faqitem-a > * {
	width: min(100%, calc(860 * var(--pf-u)));
}

@media (max-width: 1024px) {
	.pf-block.pf-faqsec--centered {
		padding-top: 88px;
		padding-bottom: 96px;
	}
	.pf-block.pf-faqsec--split {
		padding-top: 96px;
	}
	.pf-faqsec--centered .pf-faqlist {
		margin-top: 40px;
	}
	.pf-block .pf-faqlist {
		gap: 12px;
	}
	.pf-block .pf-faqitem-title {
		padding: 20px;
	}
	.pf-block .pf-faqitem-q {
		font-size: 17px;
	}
	.pf-block .pf-faqitem-title::after {
		width: 24px;
		height: 22px;
	}
	/* The centred icon as before (the desktop frames are Figma's). */
	.pf-block.pf-faqsec--centered .pf-faqitem-title::after,
	.pf-block.pf-faqsec--centered .pf-faqitem[open] > .pf-faqitem-title::after {
		height: 22px;
		margin: 0;
	}
	.pf-block .pf-faqitem-a {
		padding: 0 20px 20px;
		font-size: 16px;
	}
	.pf-faqsec-row {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
		margin-top: 40px;
	}
	.pf-faqsec-copy,
	.pf-faqsec--split .pf-faqlist {
		width: 100%;
	}
	.pf-block .pf-faqsec-sub {
		font-size: 16px;
	}
	.pf-block .pf-faqsec-copy .pf-btn-mail {
		margin-top: 24px;
	}
}

/* Split variant "guide" (Ratgeber FAQ 10:1874, ratgeber-spec.md §6): the
   label 140 below the block before it; the H2 (56 / 1.2, ls -3 %) starts
   level with the accordion (not cap-trimmed as on the agency page); the
   intro 350 wide, 24 below, ls 0; questions 20 / 1.24 (closed items 81
   tall instead of 86, the plus 39 x 21.2; the minus keeps its 39 x 32
   box without making the row taller); answers 18 / 1.4, ls 0. */
.pf-block.pf-faqsec--guide {
	padding-top: calc(140 * var(--pf-u));
}
/* This file's section label: ls 1px, black 60 %; the rule black 8 %,
   29.5 below the label's top (render: 7541.5 for the label at 7512). The
   row keeps its 86 from the label's top (54 + 1.5). */
.pf-block.pf-faqsec--guide > .pf-label {
	padding-bottom: calc(11.3 * var(--pf-u));
	letter-spacing: 1px;
	color: rgba(0, 0, 0, 0.6);
	border-bottom-color: rgba(0, 0, 0, 0.08);
}
.pf-block.pf-faqsec--guide .pf-faqsec-row {
	margin-top: calc(55.5 * var(--pf-u));
}
.pf-block.pf-faqsec--guide .pf-faqsec-copy .pf-h2 {
	margin-top: 0;
	line-height: 1.2;
	letter-spacing: -0.03em;
}
.pf-block.pf-faqsec--guide .pf-faqsec-sub {
	width: calc(350 * var(--pf-u));
	margin-top: calc(24 * var(--pf-u));
	letter-spacing: normal;
}
.pf-block.pf-faqsec--guide .pf-faqitem-q {
	line-height: 1.24;
}
.pf-block.pf-faqsec--guide .pf-faqitem-title::after {
	height: calc(21.2 * var(--pf-u));
}
.pf-block.pf-faqsec--guide .pf-faqitem[open] > .pf-faqitem-title::after {
	height: calc(32 * var(--pf-u));
	margin-bottom: calc(-7.2 * var(--pf-u));
}
.pf-block.pf-faqsec--guide .pf-faqitem-a {
	line-height: 1.4;
	letter-spacing: normal;
}
/* 862 instead of 860: at ls 0 Chrome's Geist runs a hair wider than
   Figma's, and "…zahlst du transparent" (860.3) would wrap early. */
.pf-block.pf-faqsec--guide .pf-faqitem-a > * {
	width: min(100%, calc(862 * var(--pf-u)));
}

@media (max-width: 1024px) {
	.pf-block.pf-faqsec--guide {
		padding-top: 96px;
	}
	/* The tablet values of .pf-label and .pf-faqsec-row. */
	.pf-block.pf-faqsec--guide > .pf-label {
		padding-bottom: 12px;
	}
	.pf-block.pf-faqsec--guide .pf-faqsec-row {
		margin-top: 40px;
	}
	.pf-block.pf-faqsec--guide .pf-faqsec-sub {
		width: min(100%, 520px);
	}
	.pf-block.pf-faqsec--guide .pf-faqitem-title::after,
	.pf-block.pf-faqsec--guide .pf-faqitem[open] > .pf-faqitem-title::after {
		height: 20px;
		margin-bottom: 0;
	}
	.pf-block.pf-faqsec--guide .pf-faqsec-sub {
		margin-top: 16px;
	}
}

/* Split variant "leistung" (Leistung file FAQ 3174:1352, leistung-spec.md
   §10): the agency geometry, but the text boxes as this file draws them.
   The intro is Figma's 605 (the agency's 440 only reproduces that file's
   break). The answers are 910 wide: Figma sets them in Uncut Sans (not in
   the stack), and Geist needs 900-935 to break after "Akt nach" and
   "Damit" as drawn (the agency's 860 breaks before "nach"). */
.pf-block.pf-faqsec--leistung .pf-faqsec-sub {
	width: calc(605 * var(--pf-u));
}
.pf-block.pf-faqsec--leistung .pf-faqitem-a > * {
	width: min(100%, calc(910 * var(--pf-u)));
}