/* KW Atelier – FAQ-Widget (Phase 4, Schicht 1). Akkordeon aus Frage-Antwort-
   Paaren über natives <details>/<summary>. Zwei Darstellungen: verbundene Liste
   (eine ruhige, zusammenhängende Liste mit feinen Trennlinien – geöffnete Frage
   warm hervorgehoben) und Karten. Frage in der Serifen-Schrift (Quincy), Gold-
   Medaillon dreht beim Öffnen. Kopf-Zicklinde in drei Platzierungen.

   Komplett ohne JS – Aufklappen (::details-content + interpolate-size, mit Sofort-
   Fallback), Medaillon-Drehung, Hover und Scroll-Reveal sind reines CSS. Farben aus
   Tokens; lokale --kwat-faq-* mit Marken-Fallback, vom Stil-Tab überschreibbar.
   Regeln & Rationale: includes/Widgets/CLAUDE.md. Kein !important. */

.kwat-faq {
	--kwat-faq-radius: var(--kwat-radius-lg);
	--kwat-faq-question-color: var(--kwat-color-text);
	--kwat-faq-answer-color: color-mix(in srgb, var(--kwat-color-text) 84%, var(--kwat-color-text-muted));
	--kwat-faq-accent-color: var(--kwat-color-accent);
	--kwat-faq-open-surface: var(--kwat-color-surface);
	--kwat-faq-border-color: var(--kwat-color-border);

	/* Abgeleitete Maße: Medaillon-Größe steuert auch den Antwort-Einzug. */
	--kwat-faq-medallion: 2.6rem;
	--kwat-faq-pad-inline: var(--kwat-space-5);
	--kwat-faq-pad-block: var(--kwat-space-4);

	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--kwat-space-5);
	color: var(--kwat-faq-answer-color);
	font-family: var(--kwat-font-body);
	font-size: var(--kwat-text-base);
	line-height: 1.6;
}

/* ── Kopf (Sektions-Überschrift + optionale Zicklinde) ───────────────────────── */
.kwat-faq__head {
	display: flex;
	flex-direction: column;
	gap: var(--kwat-space-3);
}

.kwat-faq__heading {
	min-width: 0;
}

/* Die geteilte Überschrift-Komponente bringt eigene Ränder mit → im FAQ-Kopf neutral. */
.kwat-faq__heading .kwat-heading {
	margin: 0;
}

/* ── Verbundene Liste: ein zusammenhängendes Objekt, feine Trennlinien ───────── */
.kwat-faq__items {
	position: relative;
	border: 1px solid var(--kwat-faq-border-color);
	border-radius: var(--kwat-faq-radius);
	/* Runde Ecken auch für offene Flächen + begrenzt die Aufklapp-Animation. */
	overflow: clip;
	background: var(--kwat-color-bg);
	box-shadow: var(--kwat-shadow-md);
}

/* Trennlinie nur ZWISCHEN den Einträgen (etwas zarter als der Außenrahmen). */
.kwat-faq__item + .kwat-faq__item {
	border-top: 1px solid color-mix(in srgb, var(--kwat-faq-border-color) 60%, transparent);
}

/* Geöffneter Eintrag: warm hervorgehoben – DAS ist die Hierarchie. */
.kwat-faq__item[open] {
	background: var(--kwat-faq-open-surface);
}

/* Eine offene Frage grenzt sich nach unten zart von ihrer Antwort ab. */
.kwat-faq__item[open] + .kwat-faq__item {
	border-top-color: transparent;
}

/* ── Frage-Kopf (das <summary>) ─────────────────────────────────────────────── */
.kwat-faq__summary {
	display: flex;
	align-items: center;
	gap: var(--kwat-space-4);
	padding: var(--kwat-faq-pad-block) var(--kwat-faq-pad-inline);
	min-block-size: 56px;
	cursor: pointer;
	/* Natives Aufklapp-Dreieck ausblenden – wir zeichnen ein eigenes Medaillon. */
	list-style: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--kwat-duration-base) var(--kwat-ease-standard);
}

.kwat-faq__summary::-webkit-details-marker {
	display: none;
}

.kwat-faq__summary::marker {
	content: "";
}

/* Fokusring innen, da die Liste ihren Inhalt beschneidet (overflow: clip). */
.kwat-faq__summary:focus-visible {
	outline: var(--kwat-focus-width) solid var(--kwat-color-focus);
	outline-offset: calc(-1 * var(--kwat-focus-width));
}

/* Frage in der warmen Serifen-Schrift – Charakter und klare Hierarchie. */
.kwat-faq__question {
	flex: 1 1 auto;
	margin: 0;
	font-family: var(--kwat-font-heading);
	font-size: var(--kwat-text-lg);
	font-weight: 600;
	line-height: 1.28;
	color: var(--kwat-faq-question-color);
	text-wrap: balance;
	overflow-wrap: break-word;
	transition: color var(--kwat-duration-base) var(--kwat-ease-standard);
}

.kwat-faq__item[open] .kwat-faq__question {
	color: var(--kwat-faq-accent-color);
}

/* ── Symbol-Medaillon (reines CSS; füllt sich und dreht beim Öffnen) ─────────── */
.kwat-faq__indicator {
	position: relative;
	flex: 0 0 auto;
	inline-size: var(--kwat-faq-medallion);
	block-size: var(--kwat-faq-medallion);
	border-radius: 50%;
	color: var(--kwat-faq-accent-color);
	background: color-mix(in srgb, var(--kwat-faq-accent-color) 12%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kwat-faq-accent-color) 26%, transparent);
	transition:
		background-color var(--kwat-duration-base) var(--kwat-ease-standard),
		color var(--kwat-duration-base) var(--kwat-ease-standard),
		box-shadow var(--kwat-duration-base) var(--kwat-ease-standard);
}

.kwat-faq__indicator::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 0.6rem;
	block-size: 0.6rem;
	border-inline-end: 2.5px solid currentColor;
	border-block-end: 2.5px solid currentColor;
	transform: translate(-50%, -65%) rotate(45deg);
	transition: transform var(--kwat-duration-base) var(--kwat-ease-standard);
}

.kwat-faq__item[open] .kwat-faq__indicator {
	color: var(--kwat-color-text-inverse);
	background: var(--kwat-faq-accent-color);
	box-shadow: none;
}

.kwat-faq__item[open] .kwat-faq__indicator::before {
	transform: translate(-50%, -35%) rotate(-135deg);
}

/* ── Hover: nur geschlossene Fragen reagieren (offene sind schon getönt) ──────── */
@media (hover: hover) {
	.kwat-faq__item:not([open]) .kwat-faq__summary:hover {
		background-color: color-mix(in srgb, var(--kwat-faq-open-surface) 55%, transparent);
	}

	.kwat-faq__item:not([open]) .kwat-faq__summary:hover .kwat-faq__question {
		color: var(--kwat-faq-accent-color);
	}

	.kwat-faq__item:not([open]) .kwat-faq__summary:hover .kwat-faq__indicator {
		background: color-mix(in srgb, var(--kwat-faq-accent-color) 20%, transparent);
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kwat-faq-accent-color) 38%, transparent);
	}
}

/* ── Antwort: fluchtet mit dem Fragetext (Einzug = Medaillon + Abstand) ───────── */
.kwat-faq__answer {
	padding-block: var(--kwat-space-1) var(--kwat-space-5);
	padding-inline: calc(var(--kwat-faq-pad-inline) + var(--kwat-faq-medallion) + var(--kwat-space-4)) var(--kwat-faq-pad-inline);
	color: var(--kwat-faq-answer-color);
	text-wrap: pretty;
}

.kwat-faq__answer > * {
	max-inline-size: 64ch;
}

.kwat-faq__answer > :first-child {
	margin-block-start: 0;
}

.kwat-faq__answer > :last-child {
	margin-block-end: 0;
}

/* Auf schmaler Breite kein tiefer Einzug – die Antwort nutzt die volle Breite. */
@media (max-width: 30rem) {
	.kwat-faq__answer {
		padding-inline: var(--kwat-faq-pad-inline);
	}
}

/* ── Antwort-Links: Elementor-V4-„Pink"-Reset (V4 setzt color: inherit auf <a>).
   Die .kwat-faq-Doppelung propagiert die Pseudo-Spezifität (anders als :where()). ── */
.kwat-faq .kwat-faq__answer a {
	color: var(--kwat-color-accent);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--kwat-color-accent) 45%, transparent);
	text-underline-offset: 0.15em;
	text-decoration-thickness: 2px;
}

.kwat-faq.kwat-faq .kwat-faq__answer a:is(:hover, :focus, :focus-visible, :active) {
	color: var(--kwat-color-accent-hover);
	text-decoration-color: var(--kwat-color-accent-hover);
}

.kwat-faq.kwat-faq .kwat-faq__answer a:focus-visible {
	outline: var(--kwat-focus-width) solid var(--kwat-color-focus);
	outline-offset: var(--kwat-focus-offset);
}

/* ── Karten-Variante: jede Frage eine eigene Karte mit Abstand ────────────────── */
.kwat-faq--layout-cards .kwat-faq__items {
	border: 0;
	background: none;
	overflow: visible;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	gap: var(--kwat-space-3);
}

.kwat-faq--layout-cards .kwat-faq__item {
	border: 1px solid var(--kwat-faq-border-color);
	border-radius: var(--kwat-radius-md);
	background: var(--kwat-color-surface);
	box-shadow: var(--kwat-shadow-md);
	overflow: clip;
}

.kwat-faq--layout-cards .kwat-faq__item + .kwat-faq__item {
	border-top: 1px solid var(--kwat-faq-border-color);
}

.kwat-faq--layout-cards .kwat-faq__item[open] {
	background: color-mix(in srgb, var(--kwat-color-surface) 86%, #fff);
	border-color: color-mix(in srgb, var(--kwat-color-accent) 30%, var(--kwat-faq-border-color));
}

.kwat-faq--layout-cards .kwat-faq__item[open] + .kwat-faq__item {
	border-top-color: var(--kwat-faq-border-color);
}

/* ── Editor-Hinweis (leer) nutzt die geteilte .kwat-widget-empty (shared.css). ── */

/* ── Sanftes Aufklappen: ::details-content (mit Sofort-Fallback) ─────────────────
   interpolate-size erlaubt die Höhen-Animation von 0 → auto. Ohne Support klappt
   der Inhalt ohne Übergang auf – funktional identisch. */
@supports (interpolate-size: allow-keywords) {
	.kwat-faq__item {
		interpolate-size: allow-keywords;
	}

	.kwat-faq__item::details-content {
		block-size: 0;
		overflow: clip;
		opacity: 0;
		transition:
			block-size var(--kwat-duration-base) var(--kwat-ease-standard),
			opacity var(--kwat-duration-base) var(--kwat-ease-standard),
			content-visibility var(--kwat-duration-base) allow-discrete;
	}

	.kwat-faq__item[open]::details-content {
		block-size: auto;
		opacity: 1;
	}
}

/* ── Scroll-Reveal: View Timeline (CSS, kein JS). Die Liste hebt sich als Ganzes
   sanft an – ruhiger als ein Stagger und ohne Clip-Konflikt mit der Animation. ── */
@supports (animation-timeline: view()) {
	.kwat-faq--reveal .kwat-faq__items {
		animation: kwat-faq-rise linear both;
		animation-timeline: view();
		animation-range: entry 5% entry 35%;
	}
}

@keyframes kwat-faq-rise {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Bewegung reduzieren (BFSG) ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.kwat-faq--reveal .kwat-faq__items {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.kwat-faq__item,
	.kwat-faq__summary,
	.kwat-faq__question,
	.kwat-faq__indicator,
	.kwat-faq__indicator::before {
		transition: none;
	}

	@supports (interpolate-size: allow-keywords) {
		.kwat-faq__item::details-content {
			transition: none;
		}
	}
}

/* ── Windows-Kontrastmodus ───────────────────────────────────────────────────── */
@media (forced-colors: active) {
	.kwat-faq__items,
	.kwat-faq--layout-cards .kwat-faq__item {
		border: 1px solid CanvasText;
	}
}