/* Modul „FAQ": links Kopf, rechts native <details>.
   Prototyp: 02 „FAQ". */

.modul--faq { padding-block: var(--sektion-y); }
.modul--faq.modul--linie-oben { padding-top: 0; }

.modul-faq__rahmen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: var(--kopf-gap, clamp(28px, 4vw, 64px));
	align-items: start;
}

.modul-faq__rahmen.fk-linie-oben { padding-top: var(--kopf-abstand); }

/* ---------------------------------------------------------------------- *
 * Einträge
 * ---------------------------------------------------------------------- */

.modul-faq__eintrag { border-top: 1px solid var(--linie-14); }
.modul-faq__eintrag:last-child { border-bottom: 1px solid var(--linie-14); }

.modul-faq__frage {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 18px;
	padding: 20px 0;
	font-size: var(--fs-faq, clamp(17px, 1.5vw, 20px));
	font-weight: var(--fw-h3);
	line-height: var(--lh-zitat);
	cursor: pointer;
	list-style: none;
	transition: color var(--dur-schnell) var(--ease-aus);
}

/* Das Dreieck der Browser ersetzt das Plus rechts. */
.modul-faq__frage::-webkit-details-marker { display: none; }
.modul-faq__frage::marker { content: ""; }

.modul-faq__frage:hover { color: var(--gold); }

/* Die Frage steht in einem eigenen Flex-Element; dort umbrechen wie eine
   Überschrift — nie „kennen?" allein in der zweiten Zeile. */
.modul-faq__frage-text { text-wrap: balance; }

/* Das Plus sitzt auf Höhe der ersten Zeile, auch wenn die Frage umbricht. */
.modul-faq__icon {
	display: flex;
	flex: none;
	align-items: center;
	height: calc(var(--lh-zitat) * 1em);
	color: var(--gold);
}

.modul-faq__icon .fk-icon {
	width: 22px;
	height: 22px;
	transition: transform var(--dur-ui) var(--ease-aus);
}

.modul-faq__eintrag[open] .modul-faq__icon .fk-icon { transform: rotate(45deg); }

.modul-faq__antwort {
	max-width: var(--mass-text);
	padding: 0 0 22px;
	font-size: var(--fs-faq-antwort, 15.5px);
	line-height: var(--lh-text);
	color: var(--text-75);
}

.modul-faq__antwort p { margin: 0; }
.modul-faq__antwort p + p { margin-top: 0.7em; }

.modul-faq__antwort a {
	color: inherit;
	border-bottom: 1px solid var(--linie-30);
}

.modul-faq__antwort a:hover {
	color: var(--gold);
	border-bottom-color: var(--gold);
}