/**
 * FAQ.
 *
 * Kopf links auf der Inhaltskante (Flucht der Seite), darunter die Fragen - Vorgabe eine Spalte.
 * Spalten, Kopf, Breite und Seite des Plus-Zeichens im Widget einstellbar.
 * Farben und Groessen aus Astra (Modul astra-werte): Frage auf Palette 8 („Subtle
 * Background“, wie die Textflaeche der Collage), Schrift in der Ueberschriftenfarbe,
 * Plus-Zeichen auf der Akzentfarbe.
 *
 * @package DZ_Elements
 */

.dze-faq {
	/* Bewegung beim Auf- und Zuklappen; faq.js nutzt dieselben Werte. */
	--dze-faq-dauer: 0.35s;
	--dze-faq-kurve: cubic-bezier(0.25, 0.8, 0.25, 1);

	display: flex;
	flex-direction: column;
	gap: var(--widgets-spacing-row, 20px);
}

.dze-faq__kopf {
	display: flex;
	flex-direction: column;
	gap: var(--widgets-spacing-row, 20px);
	max-width: var(--dze-lesebreite, 36rem);
}

.dze-faq__titelgruppe {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.dze-faq .dze-faq__titel {
	margin: 0;
}

.dze-faq .dze-faq__einleitung > :first-child {
	margin-block-start: 0;
}

.dze-faq .dze-faq__einleitung > :last-child {
	margin-block-end: 0;
}

/*
 * Spalten aus dem Regler (--dze-faq-spalten, je Geraet), Vorgabe EINE. Bei zwei Spalten
 * verlaengert eine geoeffnete Frage nur ihre eigene Zelle (align-items: start).
 */
.dze-faq__liste {
	display: grid;
	grid-template-columns: repeat(var(--dze-faq-spalten, 1), minmax(0, 1fr));
	align-items: start;
	gap: 1rem var(--widgets-spacing-column, 20px);
}

/* Lesebreite: Liste so schmal wie ein Absatz, bei zentriertem Kopf mittig. */
.dze-faq-breite-lesen .dze-faq__liste {
	max-width: var(--dze-faq-lesebreite, 48rem);
}

.dze-faq-kopf-mitte .dze-faq__kopf {
	align-self: center;
	text-align: center;
}

.dze-faq-kopf-mitte.dze-faq-breite-lesen .dze-faq__liste {
	width: 100%;
	margin-inline: auto;
}

.dze-faq__eintrag {
	margin: 0;
	background: var(--dze-faq-flaeche, var(--ast-global-color-7));
	border-radius: var(--dze-faq-radius, var(--dze-radius, 0));
}

.dze-faq__frage {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	color: var(--dze-ueberschrift, inherit);
	font-family: var(--dze-anzeigeschrift, inherit);
	font-size: var(--dze-h6, 1rem);
	font-weight: 700;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
}

/* Das Standard-Dreieck der Browser ersetzt das Plus-Zeichen. */
.dze-faq__frage::-webkit-details-marker {
	display: none;
}

.dze-faq__frage:focus-visible {
	outline: 3px solid var(--dze-ueberschrift, currentColor);
	outline-offset: 2px;
}

/*
 * Plus/Minus aus zwei Strichen (keine Schrift, kein Icon-Font): ein Quadrat in der
 * Akzentfarbe aus Astra, die Striche fest dunkel (Palette 3). Offen faellt der
 * senkrechte Strich weg - aus Plus wird Minus.
 */
.dze-faq__icon {
	position: relative;
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	background: var(--dze-akzent, currentColor);
}

.dze-faq-icon-links .dze-faq__icon {
	order: -1;
}

.dze-faq-icon-links .dze-faq__frage {
	justify-content: flex-start;
}

.dze-faq-icon-links .dze-faq__frage-text {
	flex: 1;
}

.dze-faq__icon::before,
.dze-faq__icon::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: 0.75rem;
	height: 2px;
	/* Fest dunkel (Palette 3) wie die Schrift im Knopf: das Quadrat ist immer Akzentfarbe,
	   auch auf einer dunklen Flaeche, wo --dze-ueberschrift hell wird. */
	background: var(--ast-global-color-2, #000);
	transform: translate(-50%, -50%);
	transition: transform var(--dze-faq-dauer) var(--dze-faq-kurve);
}

.dze-faq__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.dze-faq__eintrag[open] .dze-faq__icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.dze-faq__antwort {
	padding: 0 1.25rem 1.25rem;
}

/*
 * WEICHES AUF- UND ZUKLAPPEN
 *
 * Chrome/Edge: die Hoehe des Antwortbereichs (::details-content) gleitet von 0 auf `auto` -
 * moeglich durch interpolate-size; content-visibility wird erst am Ende umgeschaltet,
 * damit die Antwort beim Schliessen sichtbar bleibt, bis sie zu ist.
 * Safari/Firefox koennen `auto` noch nicht animieren: dort uebernimmt faq.js die Hoehe.
 * Die Antwort blendet in beiden Faellen zusaetzlich ein und ruckt leicht nach unten.
 */
@supports (interpolate-size: allow-keywords) {
	.dze-faq__eintrag {
		interpolate-size: allow-keywords;
	}

	.dze-faq__eintrag::details-content {
		block-size: 0;
		overflow: clip;
		transition:
			block-size var(--dze-faq-dauer) var(--dze-faq-kurve),
			content-visibility var(--dze-faq-dauer) allow-discrete;
	}

	.dze-faq__eintrag[open]::details-content {
		block-size: auto;
	}
}

/* faq.js: waehrend der Hoehenanimation nichts ueberstehen lassen. */
.dze-faq__eintrag--bewegt {
	overflow: hidden;
}

.dze-faq__antwort {
	transition:
		opacity var(--dze-faq-dauer) var(--dze-faq-kurve),
		translate var(--dze-faq-dauer) var(--dze-faq-kurve);
}

.dze-faq__eintrag:not([open]) .dze-faq__antwort,
.dze-faq__eintrag--zu .dze-faq__antwort {
	opacity: 0;
	translate: 0 -0.5rem;
}

@starting-style {
	.dze-faq__eintrag[open] .dze-faq__antwort {
		opacity: 0;
		translate: 0 -0.5rem;
	}
}

/* Schalter „Bewegung: aus“ im Widget. */
.dze-faq-bewegung-aus .dze-faq {
	--dze-faq-dauer: 0s;
}

/* Einspaltig ueber die volle Inhaltsbreite waeren Antwortzeilen zu lang zum Lesen. */
.dze-faq__antwort > * {
	max-width: var(--dze-faq-textbreite, 46rem);
}

.dze-faq .dze-faq__antwort > :first-child {
	margin-block-start: 0;
}

.dze-faq .dze-faq__antwort > :last-child {
	margin-block-end: 0;
}

/*
 * 767px: Elementors Handy-Grenze. Eigene Variable, damit das Handy nicht die Spalten
 * des Desktops erbt - eine, solange am Handy nichts eingestellt ist.
 */
@media (max-width: 767px) {
	.dze-faq__liste {
		grid-template-columns: repeat(var(--dze-faq-spalten-mobil, 1), minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.dze-faq {
		--dze-faq-dauer: 0s;
	}
}