/**
 * NMW FAQs – Frontend-Styles
 * Alle Farben/Größen sind als CSS-Variablen gesetzt und pro Instanz
 * über Inline-Styles (Shortcode-Attribute / Divi-Modul / Einstellungen)
 * überschreibbar. Für vollständig freie Gestaltung einfach die
 * .nmw-faqs* Klassen im eigenen Theme-CSS überschreiben.
 */

.nmw-faqs {
	/* Defaults (Fallback, falls keine Inline-Variablen gesetzt sind). */
	--nmw-faq-q-bg: #ffffff;
	--nmw-faq-q-bg-active: #f5f7fa;
	--nmw-faq-q-color: #1a1a1a;
	--nmw-faq-a-bg: #ffffff;
	--nmw-faq-a-color: #444444;
	--nmw-faq-border: #e2e6ea; /* Trennlinie unter der Frage. */
	/* Rahmen der FAQ-Box je Seite (Breite/Stil/Farbe). */
	--nmw-faq-border-top-width: 1px;
	--nmw-faq-border-top-style: solid;
	--nmw-faq-border-top-color: #e2e6ea;
	--nmw-faq-border-right-width: 1px;
	--nmw-faq-border-right-style: solid;
	--nmw-faq-border-right-color: #e2e6ea;
	--nmw-faq-border-bottom-width: 1px;
	--nmw-faq-border-bottom-style: solid;
	--nmw-faq-border-bottom-color: #e2e6ea;
	--nmw-faq-border-left-width: 1px;
	--nmw-faq-border-left-style: solid;
	--nmw-faq-border-left-color: #e2e6ea;
	--nmw-faq-icon: #1a73e8;
	--nmw-faq-accent: #1a73e8;
	--nmw-faq-radius: 8px;
	--nmw-faq-spacing: 12px; /* Legacy-Fallback (einzelner Innenabstand). */
	--nmw-faq-pad-top: 12px;
	--nmw-faq-pad-right: 16px;
	--nmw-faq-pad-bottom: 12px;
	--nmw-faq-pad-left: 16px;
	--nmw-faq-q-size: 17px;
	--nmw-faq-a-size: 16px;
	--nmw-faq-icon-size: 18px;

	display: block;
	margin: 0 0 1.5em;
}

.nmw-faqs * {
	box-sizing: border-box;
}

.nmw-faqs__item {
	border-top: var(--nmw-faq-border-top-width) var(--nmw-faq-border-top-style) var(--nmw-faq-border-top-color);
	border-right: var(--nmw-faq-border-right-width) var(--nmw-faq-border-right-style) var(--nmw-faq-border-right-color);
	border-bottom: var(--nmw-faq-border-bottom-width) var(--nmw-faq-border-bottom-style) var(--nmw-faq-border-bottom-color);
	border-left: var(--nmw-faq-border-left-width) var(--nmw-faq-border-left-style) var(--nmw-faq-border-left-color);
	border-radius: var(--nmw-faq-radius);
	background: var(--nmw-faq-q-bg);
	margin-bottom: 10px;
	overflow: hidden;
}

.nmw-faqs__item:last-child {
	margin-bottom: 0;
}

/* Überschrift-Wrapper (h2..h6 / div) neutralisieren. */
.nmw-faqs__heading {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
}

/* Frage (Toggle-Button). */
.nmw-faqs__question {
	display: flex;
	align-items: center;
	gap: 0.75em;
	width: 100%;
	margin: 0;
	padding: var(--nmw-faq-pad-top) var(--nmw-faq-pad-right) var(--nmw-faq-pad-bottom) var(--nmw-faq-pad-left);
	background: var(--nmw-faq-q-bg);
	color: var(--nmw-faq-q-color);
	font-size: var(--nmw-faq-q-size);
	font-weight: 600;
	line-height: 1.35;
	text-align: left;
	border: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.nmw-faqs__question-text {
	flex: 1 1 auto;
}

.nmw-faqs__question:hover {
	color: var(--nmw-faq-accent);
}

.nmw-faqs__question:focus-visible {
	outline: 2px solid var(--nmw-faq-accent);
	outline-offset: -2px;
}

.nmw-faqs__item.is-open > .nmw-faqs__heading > .nmw-faqs__question {
	background: var(--nmw-faq-q-bg-active);
}

/* Icon-Position links. */
.nmw-faqs--icons-left .nmw-faqs__icon {
	order: -1;
}

/* Antwort-Panel. */
.nmw-faqs__panel {
	overflow: hidden;
	background: var(--nmw-faq-a-bg);
	transition: height 0.3s ease;
	will-change: height;
}

.nmw-faqs__panel[hidden] {
	display: none;
}

.nmw-faqs__answer {
	padding: var(--nmw-faq-pad-top) var(--nmw-faq-pad-right) var(--nmw-faq-pad-bottom) var(--nmw-faq-pad-left);
	color: var(--nmw-faq-a-color);
	font-size: var(--nmw-faq-a-size);
	line-height: 1.6;
	border-top: 1px solid var(--nmw-faq-border);
}

.nmw-faqs__answer > *:first-child {
	margin-top: 0;
}

.nmw-faqs__answer > *:last-child {
	margin-bottom: 0;
}

/* =========================================================
 * Icons – rein per CSS gezeichnet, Farbe über --nmw-faq-icon.
 * ========================================================= */
.nmw-faqs__icon {
	position: relative;
	flex: 0 0 auto;
	/* Icon-Größe steuert die Box UND die em-basierten Innenformen. */
	font-size: var(--nmw-faq-icon-size);
	width: 1em;
	height: 1em;
	color: var(--nmw-faq-icon);
	transition: transform 0.3s ease;
}

/* --- Plus / Minus --- */
.nmw-faqs--icon-plusminus .nmw-faqs__icon::before,
.nmw-faqs--icon-plusminus .nmw-faqs__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.nmw-faqs--icon-plusminus .nmw-faqs__icon::before {
	width: 100%;
	height: 2px;
}

.nmw-faqs--icon-plusminus .nmw-faqs__icon::after {
	width: 2px;
	height: 100%;
}

.nmw-faqs--icon-plusminus .nmw-faqs__item.is-open .nmw-faqs__icon {
	transform: rotate(180deg);
}

.nmw-faqs--icon-plusminus .nmw-faqs__item.is-open .nmw-faqs__icon::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

/* --- Chevron --- */
.nmw-faqs--icon-chevron .nmw-faqs__icon::before {
	content: "";
	position: absolute;
	top: 42%;
	left: 50%;
	width: 0.55em;
	height: 0.55em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
}

.nmw-faqs--icon-chevron .nmw-faqs__item.is-open .nmw-faqs__icon {
	transform: rotate(180deg);
}

/* --- Pfeil (Shaft + Kopf) --- */
.nmw-faqs--icon-arrow .nmw-faqs__icon::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 12%;
	width: 2px;
	height: 0.72em;
	background: currentColor;
	transform: translateX(-50%);
}

.nmw-faqs--icon-arrow .nmw-faqs__icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 58%;
	width: 0.42em;
	height: 0.42em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
}

.nmw-faqs--icon-arrow .nmw-faqs__item.is-open .nmw-faqs__icon {
	transform: rotate(180deg);
}

/* --- Dreieck (Caret) --- */
.nmw-faqs--icon-caret .nmw-faqs__icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-left: 0.32em solid transparent;
	border-right: 0.32em solid transparent;
	border-top: 0.4em solid currentColor;
	transform: translate(-50%, -50%);
}

.nmw-faqs--icon-caret .nmw-faqs__item.is-open .nmw-faqs__icon {
	transform: rotate(180deg);
}

/* --- Plus im Kreis --- */
.nmw-faqs--icon-pluscircle .nmw-faqs__icon {
	border: 2px solid currentColor;
	border-radius: 50%;
}

.nmw-faqs--icon-pluscircle .nmw-faqs__icon::before,
.nmw-faqs--icon-pluscircle .nmw-faqs__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
}

.nmw-faqs--icon-pluscircle .nmw-faqs__icon::before {
	width: 52%;
	height: 2px;
}

.nmw-faqs--icon-pluscircle .nmw-faqs__icon::after {
	width: 2px;
	height: 52%;
}

.nmw-faqs--icon-pluscircle .nmw-faqs__item.is-open .nmw-faqs__icon {
	transform: rotate(135deg);
}

/* --- Kein Icon --- */
.nmw-faqs--icon-none .nmw-faqs__icon {
	display: none;
}

/* Barrierefreiheit: reduzierte Bewegung. */
@media (prefers-reduced-motion: reduce) {
	.nmw-faqs__panel,
	.nmw-faqs__icon,
	.nmw-faqs__question {
		transition: none !important;
	}
}