/** singulary-ui/faq — Sektionskopf über einem responsiven FAQ-Raster (native <details>). */

.fyh-faq {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	background: var(--wp--preset--color--base);
	padding-block: var(--wp--preset--spacing--50, clamp( 2rem, 4vw, 3rem ));
	padding-left: var(--wp--custom--layout--gutter, var(--wp--style--root--padding-left, 1.5rem));
	padding-right: var(--wp--custom--layout--gutter, var(--wp--style--root--padding-right, 1.5rem));
}

/* Die Sektion selbst ist die Fläche. Kein zusätzlicher Rahmen um den Rahmen:
   dadurch bleibt die Hierarchie so ruhig wie bei einer redaktionellen FAQ. */
.fyh-faq__box {
	position: relative;
	padding: 0;
}

/* Ein Kopfbereich, darunter genau ein Fragenraster. */
.fyh-faq__grid {
	display: grid;
	gap: clamp( 1.5rem, 3vw, 2.35rem );
	align-items: start;
}

.fyh-faq.is-columns-one .fyh-faq__grid {
	width: 100%;
	grid-template-columns: minmax( 0, 1fr );
	gap: clamp( 2rem, 3.5vw, 2.75rem );
}

.fyh-faq.is-columns-one {
	padding-block: var(--wp--custom--layout--section-space, clamp(4rem, 5.5vw, 5rem));
}

.fyh-faq.is-columns-one .fyh-faq__h2 {
	max-width: none;
	font-size: var(--wp--custom--type--section-size, clamp(1.875rem, 3vw, 2.5rem));
}

.fyh-faq.is-columns-one .fyh-faq__intro {
	max-width: 48ch;
}

.fyh-faq.is-columns-one .fyh-faq__list {
	gap: .75rem;
}

.fyh-faq.is-columns-one .fyh-faq__item {
	border-radius: 22px;
}

.fyh-faq.is-columns-one .fyh-faq__q {
	min-height: 4.75rem;
	padding: 1.3rem 1.5rem;
}

.fyh-faq.is-columns-one .fyh-faq__a {
	padding: 0 1.5rem 1.45rem;
}

.fyh-faq__left {
	display: block;
	min-width: 0;
}

.fyh-faq__intro-card {
	display: flex;
	flex-direction: column;
	gap: .8rem;
	justify-content: center;
	min-width: 0;
	padding: clamp( .15rem, .8vw, .5rem ) 0;
}

/* Ruhiger redaktioneller Marker ohne dekoratives Signet. */
.fyh-faq__eyebrow { --sgui-rubric-margin: 0; }

.fyh-faq__h2 { margin: 0; max-width: 23ch; font-size: var(--wp--custom--type--section-size, clamp(1.875rem, 3vw, 2.5rem)); line-height: var(--wp--custom--type--section-leading, 1.15); font-weight: var(--wp--custom--type--section-weight, 650); letter-spacing: var(--wp--custom--type--section-tracking, -.025em); color: var(--wp--preset--color--ink); text-wrap: balance; }
.fyh-faq__h2 span { color: var(--wp--preset--color--muted); }
.fyh-faq__intro { margin: 0; max-width: 52ch; font-size: clamp( .9rem, 1.2vw, 1rem ); line-height: 1.6; color: var(--wp--preset--color--muted); text-wrap: pretty; }

/* Nur auf der Startseite: zwei eigenständige, gleichwertige FAQ-Spalten.
   Die Blockdaten bleiben katalogisiert; Unterseiten verwenden weiterhin das
   normale ein- oder zweispaltige FAQ-Raster. */
.fyh-faq.is-audience-split { padding-block: var(--wp--custom--layout--section-space, clamp(4rem, 5.5vw, 5rem)); }
.fyh-faq__audience-shell { display: flex; flex-direction: column; gap: clamp( 1.5rem, 2.5vw, 2rem ); }
.fyh-faq__audience-grid { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: clamp( 1.25rem, 2.4vw, 2rem ); align-items: start; }
.fyh-faq__audience { display: flex; min-width: 0; flex-direction: column; gap: clamp( 1.35rem, 2.2vw, 1.75rem ); }
.fyh-faq__audience .fyh-faq__intro-card { min-height: 0; padding: 0; }
.fyh-faq__audience .fyh-faq__h2 { max-width: none; font-size: var(--wp--custom--type--section-size, clamp(1.875rem, 3vw, 2.5rem)); }
.fyh-faq__audience .fyh-faq__list { gap: .75rem; }
.fyh-faq__audience .fyh-faq__item { border-radius: 18px; }
.fyh-faq__audience .fyh-faq__q { min-height: 4.5rem; padding: 1.15rem 1.25rem; }
.fyh-faq__audience .fyh-faq__a { padding: 0 1.25rem 1.3rem; }

/* Accordion (native <details>): ab Desktop zeilenweise 01|02, 03|04 … */
.fyh-faq__list { display: grid; grid-template-columns: minmax( 0, 1fr ); gap: .5rem clamp( .75rem, 1.6vw, 1rem ); align-items: start; min-width: 0; counter-reset: fyhfaq; }
.fyh-faq__item { min-width: 0; height: auto; overflow: clip; border: 1px solid var(--wp--preset--color--hairline); border-radius: 14px; background: var(--wp--preset--color--base); transition: background .2s ease, border-color .2s ease; }
.fyh-faq__item:not([open]):not(.is-pinned-open):hover { border-color: color-mix( in srgb, var(--wp--preset--color--ink) 22%, var(--wp--preset--color--hairline) ); background: var(--wp--preset--color--base); }
.fyh-faq__item[open],
.fyh-faq__item.is-pinned-open { border-color: color-mix( in srgb, var(--wp--preset--color--ink) 18%, var(--wp--preset--color--hairline) ); background: var(--wp--preset--color--base); }
.fyh-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; padding: .9rem 1rem; cursor: pointer; list-style: none; }
.fyh-faq__q--static { margin: 0; cursor: default; }
.fyh-faq__q::-webkit-details-marker { display: none; }
.fyh-faq__q:focus:not(:focus-visible) { outline: none; }
.fyh-faq__q:focus-visible { outline: 2px solid var(--wp--custom--ui--primary, var(--wp--preset--color--brand, #801518)); outline-offset: 3px; border-radius: 12px; }
.fyh-faq__q > span:first-child { display: flex; align-items: baseline; font-size: clamp( .96rem, 1.25vw, 1.04rem ); font-weight: 600; letter-spacing: -.015em; line-height: 1.32; color: var(--wp--preset--color--ink); overflow-wrap: anywhere; }
.fyh-faq__chev { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.5rem; height: 1.5rem; border: 0; background: transparent; color: var(--wp--preset--color--muted); font-size: 1.35rem; font-weight: 400; line-height: 1; transition: transform .25s ease, color .25s ease; }
.fyh-faq__item[open] .fyh-faq__chev { transform: rotate( 45deg ); color: var(--wp--preset--color--ink); }
.fyh-faq__a { padding: 0 1rem 1rem; }
.fyh-faq__a p { margin: 0; max-width: 62ch; font-size: .92rem; line-height: 1.62; color: var(--wp--preset--color--muted); overflow-wrap: anywhere; }
.fyh-faq__item[open] .fyh-faq__a { animation: fyh-faq-in .28s ease; }
@keyframes fyh-faq-in { from { opacity: 0; transform: translateY( -4px ); } to { opacity: 1; transform: none; } }

@media ( min-width: 860px ) {
	.fyh-faq.is-columns-two .fyh-faq__list {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		grid-auto-rows: auto;
		align-items: start;
	}

	/* Progressive Enhancement: Ohne JavaScript bleibt das semantische Raster
	   lesbar. Sobald die blockeigene Geometrie aktiv ist, laufen die beiden
	   Spalten unabhaengig. Eine lange offene Antwort erzeugt dadurch keinen
	   Leerraum mehr unter der parallelen geschlossenen Karte. */
	.fyh-faq.is-columns-two .fyh-faq__list.is-independent-columns {
		position: relative;
	}

	:where(.fyh-faq).is-columns-two .fyh-faq__list.is-independent-columns > .fyh-faq__item {
		position: absolute;
		box-sizing: border-box;
		align-self: start;
	}
}

@media ( max-width: 859px ) {
	.fyh-faq__audience-grid { grid-template-columns: minmax( 0, 1fr ); gap: clamp( 2.75rem, 8vw, 4rem ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.fyh-faq__chev { transition: none; }
	.fyh-faq__item[open] .fyh-faq__a { animation: none; }
}