/* ===========================================================
   Betana FAQ Accordion – Frontend Styles

   v1.0.1: Farben liegen jetzt fest auf den echten betana.de-
   Markenfarben, OHNE Umweg ueber var(--e-global-color-*)-
   Fallbacks. Grund: Auf betana.de sind die Elementor-Kit-Slots
   "Primary" (schwarz) und "Secondary" (fast-weiss) nie auf die
   Marke umgestellt worden - nur "Accent" traegt zufaellig das
   richtige Gruen. Der alte Fallback-Code fiel dadurch auf
   schwarz/fast-weiss zurueck (unlesbare Tabs/Fragen). Jetzt
   unabhaengig vom jeweiligen Kit-Zustand immer korrekt; pro
   Widget weiterhin ueber die Elementor-Style-Controls
   ueberschreibbar (siehe class-widget-betana-faq.php).
   =========================================================== */

.bfaq-wrapper {
	--bfaq-color-primary:      #55ad75;
	--bfaq-color-primary-dark: #004d1c;
	--bfaq-color-tint:         #dfeee5;

	--bfaq-tab-bg:          #f5f7f6;
	--bfaq-tab-text:        var(--bfaq-color-primary-dark);
	--bfaq-tab-active-bg:   var(--bfaq-color-primary);
	--bfaq-tab-active-text: #ffffff;

	--bfaq-q-color:   var(--bfaq-color-primary-dark);
	--bfaq-a-color:   #3a3a3a;
	--bfaq-open-bg:   var(--bfaq-color-tint);
	--bfaq-border:    #e3e8e5;

	--bfaq-radius:  8px;
	--bfaq-spacing: 1rem;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size:   16px;
	color:       var(--bfaq-a-color);
	line-height: 1.6;
	max-width: 100%;
}

/* Optionale, bewusst risikoarme Anlehnung an Elementor-Typografie:
   nur Schriftart/-groesse (keine Farben!) uebernehmen, falls im
   Kit gesetzt - mit sicherem Fallback auf obige Werte. */
.bfaq-wrapper[data-use-kit-typography="yes"] {
	font-family: var(--e-global-typography-text-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	font-size:   var(--e-global-typography-text-font-size, 16px);
}

.bfaq-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	margin: -1px; padding: 0; border: 0;
}

/* --- Tabs (CSS-only, radio + label, funktioniert ohne JavaScript) --- */
.bfaq-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-bottom: var(--bfaq-spacing);
}

.bfaq-tab-radio {
	position: absolute;
	width: 1px; height: 1px;
	opacity: 0;
	pointer-events: none;
}

.bfaq-tab-label {
	display: inline-block;
	cursor: pointer;
	user-select: none;
	padding: .7em 1.2em;
	border-radius: var(--bfaq-radius);
	background: var(--bfaq-tab-bg);
	color: var(--bfaq-tab-text);
	font-weight: 600;
	font-size: .95em;
	transition: background .2s ease, color .2s ease, transform .15s ease;
	border: 1px solid var(--bfaq-border);
}

.bfaq-tab-label:hover {
	transform: translateY(-1px);
}

.bfaq-tab-radio:checked + .bfaq-tab-label {
	background: var(--bfaq-tab-active-bg);
	color: var(--bfaq-tab-active-text);
	border-color: var(--bfaq-tab-active-bg);
}

.bfaq-tab-radio:focus-visible + .bfaq-tab-label {
	outline: 2px solid var(--bfaq-color-primary);
	outline-offset: 2px;
}

/* --- Panels: nur das zur aktiven Radio-Auswahl passende Panel zeigen.
   Generisch ueber :nth-of-type() gekoppelt, keine dynamischen IDs im CSS noetig. --- */
.bfaq-panel { display: none; }

.bfaq-wrapper:has(.bfaq-tabs .bfaq-tab-radio:nth-of-type(1):checked)  .bfaq-panels .bfaq-panel:nth-of-type(1)  { display: block; }
.bfaq-wrapper:has(.bfaq-tabs .bfaq-tab-radio:nth-of-type(2):checked)  .bfaq-panels .bfaq-panel:nth-of-type(2)  { display: block; }
.bfaq-wrapper:has(.bfaq-tabs .bfaq-tab-radio:nth-of-type(3):checked)  .bfaq-panels .bfaq-panel:nth-of-type(3)  { display: block; }
.bfaq-wrapper:has(.bfaq-tabs .bfaq-tab-radio:nth-of-type(4):checked)  .bfaq-panels .bfaq-panel:nth-of-type(4)  { display: block; }
.bfaq-wrapper:has(.bfaq-tabs .bfaq-tab-radio:nth-of-type(5):checked)  .bfaq-panels .bfaq-panel:nth-of-type(5)  { display: block; }
.bfaq-wrapper:has(.bfaq-tabs .bfaq-tab-radio:nth-of-type(6):checked)  .bfaq-panels .bfaq-panel:nth-of-type(6)  { display: block; }
.bfaq-wrapper:has(.bfaq-tabs .bfaq-tab-radio:nth-of-type(7):checked)  .bfaq-panels .bfaq-panel:nth-of-type(7)  { display: block; }
.bfaq-wrapper:has(.bfaq-tabs .bfaq-tab-radio:nth-of-type(8):checked)  .bfaq-panels .bfaq-panel:nth-of-type(8)  { display: block; }
.bfaq-wrapper:has(.bfaq-tabs .bfaq-tab-radio:nth-of-type(9):checked)  .bfaq-panels .bfaq-panel:nth-of-type(9)  { display: block; }
.bfaq-wrapper:has(.bfaq-tabs .bfaq-tab-radio:nth-of-type(10):checked) .bfaq-panels .bfaq-panel:nth-of-type(10) { display: block; }

/* Browser ohne :has()-Unterstuetzung: alle Panels sichtbar (immer noch lesbar / crawlbar). */
@supports not selector(:has(a)) {
	.bfaq-panel { display: block; }
}

/* --- Akkordeon (natives <details>/<summary>, funktioniert ohne JavaScript) --- */
.bfaq-item {
	border-bottom: 1px solid var(--bfaq-border);
}

.bfaq-item:last-child {
	border-bottom: none;
}

.bfaq-question {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: .85em .9em;
	font-weight: 600;
	line-height: 1.4;
	color: var(--bfaq-q-color);
	transition: color .15s ease;
}

.bfaq-question:hover {
	color: var(--bfaq-color-primary);
}

.bfaq-question::-webkit-details-marker { display: none; }
.bfaq-question::marker { content: ""; }

.bfaq-icon {
	flex: none;
	position: relative;
	width: 1em;
	height: 1em;
}
.bfaq-icon::before,
.bfaq-icon::after {
	content: "";
	position: absolute;
	background: var(--bfaq-color-primary);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}
.bfaq-icon::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
}
.bfaq-icon::after {
	left: 50%;
	top: 0;
	height: 100%;
	width: 2px;
	margin-left: -1px;
}
.bfaq-item[open] .bfaq-icon::after {
	transform: rotate(90deg);
	opacity: 0;
}

.bfaq-answer {
	padding: 0 .9em 1.1em;
	color: var(--bfaq-a-color);
	animation: bfaqFadeIn .2s ease;
}

.bfaq-answer p {
	margin: 0 0 .8em;
}
.bfaq-answer p:last-child {
	margin-bottom: 0;
}

.bfaq-item[open] {
	background: var(--bfaq-open-bg);
	border-radius: var(--bfaq-radius);
	border-bottom-color: transparent;
}

@keyframes bfaqFadeIn {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.bfaq-empty {
	padding: 1em;
	color: var(--bfaq-a-color, #666);
}

/* --- Responsive --- */
@media (max-width: 600px) {
	.bfaq-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: .3rem;
		scrollbar-width: thin;
	}
	.bfaq-tab-label {
		white-space: nowrap;
		font-size: .88em;
		padding: .6em 1em;
	}
	.bfaq-question {
		font-size: .96em;
	}
}