/**
 * Daily Marketing FAQ – Frontend-Styles.
 *
 * Alle Werte hängen an CSS-Variablen mit neutralen Vorgaben: Ohne jede
 * Einstellung erbt der Block Schrift und Textfarbe vom Theme und sieht
 * unauffällig aus. Die Design-Seite im Backend überschreibt nur die
 * Variablen, die dort tatsächlich gesetzt wurden.
 *
 * Alles ist auf .dm-faq gescoped und kann das Theme nicht beeinflussen.
 */

.dm-faq {
	/* Farben */
	--dm-ink: currentColor;
	--dm-accent: currentColor;
	--dm-paper: #ffffff;
	--dm-border: currentColor;
	--dm-hover: rgba( 0, 0, 0, 0.045 );

	/* Notruf-/Abschluss-Block */
	--dm-cta-bg: #16181d;
	--dm-cta-ink: #ffffff;
	--dm-cta-muted: #d8dade;
	--dm-btn-bg: #ffffff;
	--dm-btn-ink: #16181d;
	--dm-btn-bg-hover: #3a3f4a;
	--dm-btn-ink-hover: #ffffff;

	/* Maße */
	--dm-max: 980px;
	--dm-border-width: 2px;
	--dm-radius: 0px;
	--dm-gap: 16px;

	/* Typografie – relativ, damit sie jedem Theme folgt */
	--dm-title-size: clamp( 1.75rem, 1.1rem + 2.4vw, 2.7rem );
	--dm-title-line: 1.2;
	--dm-q-size: 1.25em;
	--dm-a-size: 1em;
	--dm-a-line: 1.5;

	box-sizing: border-box;
	max-width: var( --dm-max );
	margin-right: auto;
	margin-left: auto;
	padding: 60px 20px 80px;
	color: var( --dm-ink );
}

.dm-faq *,
.dm-faq *::before,
.dm-faq *::after {
	box-sizing: inherit;
}

/* Breite/volle Ausrichtung: Band darf breit sein, der Text bleibt begrenzt. */
.dm-faq.alignwide,
.dm-faq.alignfull {
	max-width: none;
}

.dm-faq.alignwide > *,
.dm-faq.alignfull > * {
	max-width: var( --dm-max );
	margin-right: auto;
	margin-left: auto;
}

/* ---- Überschrift ---- */

.dm-faq__title {
	margin: 0 0 12px;
	font-size: var( --dm-title-size );
	line-height: var( --dm-title-line );
	text-align: center;
}

.dm-faq__intro {
	max-width: 62ch;
	margin: 0 auto 44px;
	line-height: var( --dm-a-line );
	text-align: center;
}

/* ---- Akkordeon ---- */

.dm-faq__list {
	display: grid;
	gap: var( --dm-gap );
}

.dm-faq__item {
	border: var( --dm-border-width ) solid var( --dm-border );
	border-radius: var( --dm-radius );
	background: var( --dm-paper );
}

.dm-faq__q {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px 22px;
	font-size: var( --dm-q-size );
	font-weight: 700;
	line-height: 1.25;
	cursor: pointer;
	list-style: none; /* Standard-Dreieck von <summary> entfernen */
	transition: background-color 0.15s ease;
}

.dm-faq__q::-webkit-details-marker {
	display: none;
}

.dm-faq__q:hover {
	background: var( --dm-hover );
}

/* Plus-/Minus-Zeichen. Rein dekorativ – den Auf-/Zu-Zustand meldet <details> selbst. */
.dm-faq__q::after {
	content: "";
	flex: 0 0 auto;
	width: 0.92em;
	height: 0.92em;
	margin-top: 0.18em;
	margin-left: auto;
	background:
		linear-gradient( var( --dm-accent ), var( --dm-accent ) ) center / 100% 0.19em no-repeat,
		linear-gradient( var( --dm-accent ), var( --dm-accent ) ) center / 0.19em 100% no-repeat;
	transition: transform 0.18s ease;
}

/* Geöffnet: Hintergrund bleibt unverändert, aus dem Plus wird ein Minus. */
.dm-faq__item[open] > .dm-faq__q::after {
	background: linear-gradient( var( --dm-accent ), var( --dm-accent ) ) center / 100% 0.19em no-repeat;
	transform: rotate( 90deg );
}

/* Sichtbarer Tastaturfokus. */
.dm-faq__q:focus-visible {
	outline: 3px solid var( --dm-ink );
	outline-offset: -6px;
}

.dm-faq__a {
	padding: 4px 22px 24px;
}

.dm-faq__a > * {
	max-width: 68ch;
}

.dm-faq__a p,
.dm-faq__a li {
	font-size: var( --dm-a-size );
	line-height: var( --dm-a-line );
}

.dm-faq__a p {
	margin: 0 0 14px;
}

.dm-faq__a > :last-child {
	margin-bottom: 0;
}

.dm-faq__a a {
	color: var( --dm-ink );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dm-faq__a a:hover,
.dm-faq__a a:focus {
	color: var( --dm-accent );
}

/* ---- Abschluss-Block mit Telefonnummer ---- */

.dm-faq__cta {
	margin-top: 40px;
	padding: 32px 24px;
	border-radius: var( --dm-radius );
	background: var( --dm-cta-bg );
	color: var( --dm-cta-ink );
	text-align: center;
}

.dm-faq__cta p {
	margin: 0 0 20px;
	font-size: 1.15em;
	line-height: 1.3;
}

.dm-faq__tel {
	display: inline-block;
	padding: 16px 28px;
	border: 3px solid var( --dm-btn-bg );
	border-radius: var( --dm-radius );
	background: var( --dm-btn-bg );
	color: var( --dm-btn-ink );
	font-size: 1.7em;
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dm-faq__tel:hover,
.dm-faq__tel:focus {
	border-color: var( --dm-btn-bg-hover );
	background: var( --dm-btn-bg-hover );
	color: var( --dm-btn-ink-hover );
}

.dm-faq__tel:focus-visible {
	outline: 3px solid var( --dm-cta-ink );
	outline-offset: 3px;
}

.dm-faq__cta small {
	display: block;
	margin-top: 16px;
	color: var( --dm-cta-muted );
	font-size: 0.8em;
	line-height: var( --dm-a-line );
}

.dm-faq__cta small a {
	color: var( --dm-btn-bg );
}

/* ---- Mobil / Umbruch bis 320px ---- */

@media ( max-width: 768px ) {

	.dm-faq {
		padding: 40px 16px 56px;
		--dm-q-size: 1.1em;
	}

	.dm-faq__intro {
		margin-bottom: 28px;
	}

	.dm-faq__q {
		gap: 12px;
		padding: 16px;
	}

	.dm-faq__a {
		padding: 2px 16px 20px;
	}

	.dm-faq__cta {
		padding: 24px 16px;
	}

	.dm-faq__tel {
		padding: 14px 18px;
		font-size: 1.35em;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.dm-faq__q,
	.dm-faq__q::after,
	.dm-faq__tel {
		transition: none;
	}
}