/* bx-faq-18 – aus Brixies „FAQ Section 18“ (0093-faq-section-18.json) */
.bx-faq-18__container { flex-direction: column; align-items: center; row-gap: var(--wf-container-gap); width: 1080px; }
.bx-faq-18__container-info { align-items: center; row-gap: var(--wf-space-s); width: 1080px; }
.bx-faq-18__tagline { font-weight: 600; color: var(--wf-color-neutral-950); margin-bottom: 0px; }
.bx-faq-18__heading { font-size: var(--wf-text-2xl); text-align: center; }
.bx-faq-18__description { text-align: center; width: 540px; }
.bx-faq-18__accordion { display: flex; flex-direction: column; gap: 0px; border-top-width: 1px; border-left-width: 1px; border-style: solid; border-color: var(--wf-color-neutral-trans-20); flex-grow: 0; }
.bx-faq-18__item { border-right-width: 1px; border-bottom-width: 1px; border-style: solid; border-color: var(--wf-color-neutral-trans-20); }

/* ---- Dart-Treff, Gestaltung 3 (stil.md): nur --wf-*-Variablen ---- */
/* 9 FAQ: dunkle Section in Rauchbraun. Eine ruhige Liste zwischen feinen Messinglinien, ohne Kästen; Plus in Messing.
   Darunter der Satz „Deine Frage ist nicht dabei?“ mittig mit „Anrufen“. */
.bx-faq-18 { background-color: var(--wf-color-neutral-950); color: var(--wf-color-white-trans-80); }
.bx-faq-18__container { width: 90rem; max-width: 100%; row-gap: var(--wf-space-3xl); }
.bx-faq-18__container-info { width: 100%; row-gap: var(--wf-space-m); }
.bx-faq-18__heading { font-size: var(--wf-text-3xl); font-weight: 800; line-height: 1.08; color: var(--wf-color-white); }
.bx-faq-18 .wf-eyebrow { display: flex; align-items: center; justify-content: center; gap: var(--wf-space-s);
	margin-bottom: var(--wf-space-m); font-family: var(--wf-font-body); font-size: var(--wf-text-s); font-weight: 700;
	letter-spacing: .2em; line-height: 1.4; text-transform: uppercase; color: var(--wf-color-primary); }
.bx-faq-18 .wf-eyebrow::before,
.bx-faq-18 .wf-eyebrow::after { content: ""; width: 4rem; border-top: 1px solid currentColor; }
.bx-faq-18__accordion { width: 100%; border: 0; border-top: 1px solid var(--wf-color-primary-trans-40); }
.bx-faq-18__item { border: 0; border-bottom: 1px solid var(--wf-color-primary-trans-40); }

.bx-faq-18 .bx-card-faq-13__container-info { width: 100%; row-gap: var(--wf-space-xs); align-items: center; }
.bx-faq-18 .bx-card-faq-13__heading { font-size: var(--wf-text-xl); font-weight: 600; color: var(--wf-color-white); }
.bx-faq-18 .bx-card-faq-13__description { font-size: var(--wf-text-m); color: var(--wf-color-white-trans-70); margin-bottom: var(--wf-space-s); }
.bx-faq-18 .wp-block-button__link { font-family: var(--wf-font-body); font-size: var(--wf-text-m); font-weight: 700; letter-spacing: .02em;
	padding: var(--wf-space-s) var(--wf-space-l); border-radius: var(--wf-button-radius); border: 1px solid var(--wf-color-primary);
	background: var(--wf-color-primary); color: var(--wf-color-neutral-950); }
.bx-faq-18 .wp-block-button__link:hover { background: var(--wf-color-primary-trans-90); }
.bx-faq-18 a[href^="tel:"].wp-block-button__link::before { content: ""; width: 1.1em; height: 1.1em; background: currentColor;
	-webkit-mask: url("../../assets/vendor/tabler/phone.svg") center / contain no-repeat; mask: url("../../assets/vendor/tabler/phone.svg") center / contain no-repeat; }

/* ---- Änderungen Runde 1 (Deniz’ Auswahl, 11.11.2026) ---- */
@media (max-width: 767px) { .bx-faq-18 .wp-block-button__link { width: auto; align-self: flex-start; }
	.bx-faq-18 .wp-block-buttons, .bx-faq-18 .wf-buttons { align-items: flex-start; } }

/* ---- FAQ als Details-Blöcke (12.11.2026): Frage und Antwort im Editor bearbeitbar, öffnet ohne Skript ---- */
/* Frage = <summary> wie zuvor die Überschrift im Akkordeon, das Plus als Maske in Messing, offen um 45° gedreht. */
/* Details-Block als Block: Er trägt wf-block (Grundstile: Flex-Spalte, align-items: flex-start). Neuere Browser (Chrome ab 131)
   wenden display auch auf <details> an, dann schrumpfte die Frage auf ihren Text und das Plus stand direkt dahinter. */
.bx-faq-18__item { display: block; }
.bx-faq-18__item > summary { display: flex; justify-content: space-between; align-items: center; column-gap: var(--wf-space-xl);
	padding: var(--wf-space-m) 0; cursor: pointer; list-style: none; font-family: var(--wf-font-body); font-size: var(--wf-text-l);
	font-weight: 600; line-height: 1.3; color: var(--wf-color-white); }
.bx-faq-18__item > summary::-webkit-details-marker { display: none; }
.bx-faq-18__item > summary::after { content: ""; flex: none; width: var(--wf-text-l); height: var(--wf-text-l); background: var(--wf-color-primary);
	-webkit-mask: url("../../assets/vendor/tabler/plus.svg") center / contain no-repeat; mask: url("../../assets/vendor/tabler/plus.svg") center / contain no-repeat; transition: transform .2s ease; }
.bx-faq-18__item[open] > summary::after { transform: rotate(45deg); }
.bx-faq-18__item > :not(summary) { padding-right: var(--wf-space-3xl); font-size: var(--wf-text-m); color: var(--wf-color-white-trans-80); }
.bx-faq-18__item > :not(summary) + :not(summary) { margin-top: var(--wf-space-xs); }
.bx-faq-18__item > :last-child:not(summary) { padding-bottom: var(--wf-space-m); }
@media (max-width: 767px) {
	.bx-faq-18__item > summary { font-size: var(--wf-text-m); }
	.bx-faq-18__item > :not(summary) { padding-right: 0; }
}

/* ---- Icons: Tabler Icons (assets/vendor/tabler/, MIT) statt selbst gezeichneter Masken (Deniz, 12.11.2026) ---- */