/* ==========================================================================
   envitron 2026 - faq.css
   FAQ-Sektion mit nativen <details>/<summary>-Accordions.
   Tokens aus main.css.
   ========================================================================== */

.faq-section {
	padding-block: clamp(2.5rem, 6vw, 5rem);
	background: var(--white);
}

.faq-section__intro {
	display: grid;
	gap: var(--space-3);
	background: var(--brand-50);
	border-left: 4px solid var(--brand-500);
	padding: var(--space-5) var(--space-5);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-7);
	color: var(--ink-800);
}
.faq-section__intro p { margin: 0; }
.faq-section__intro p:last-child {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
	margin-top: var(--space-2);
}

/* ------------------------------------------------------------- Liste */
.faq-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--space-3);
}
.faq-list__item { margin: 0; }

/* ------------------------------------------------------------- Item */
.faq {
	background: var(--white);
	border: 1px solid var(--ink-300);
	border-radius: var(--radius-md);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.faq[open] {
	border-color: var(--brand-300);
	box-shadow: 0 6px 20px -12px rgba(40, 167, 69, 0.25);
}

/* Question (Summary) */
.faq__question {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-5);
	font-weight: 600;
	color: var(--ink-900);
	font-size: var(--fs-md);
	user-select: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { display: none; content: ""; }
.faq__question:hover { color: var(--brand-700); }
.faq__question:focus-visible {
	outline: 3px solid var(--brand-500);
	outline-offset: -3px;
	border-radius: var(--radius-md);
}

.faq__q-text { flex: 1; line-height: 1.4; }

.faq__icon {
	flex: 0 0 auto;
	display: inline-flex;
	width: 1.75rem;
	height: 1.75rem;
	align-items: center;
	justify-content: center;
	color: var(--brand-700);
	background: var(--brand-50);
	border-radius: 50%;
	transition: transform var(--transition-med), background var(--transition-fast), color var(--transition-fast);
}
.faq__icon svg { width: 1rem; height: 1rem; }
.faq[open] .faq__icon {
	transform: rotate(180deg);
	background: var(--brand-500);
	color: var(--white);
}

/* Answer */
.faq__answer {
	padding: 0 var(--space-5) var(--space-5);
	color: var(--ink-700);
	line-height: var(--lh-relaxed);
	border-top: 1px solid var(--ink-100);
	padding-top: var(--space-4);
}
.faq__answer p { margin: 0 0 var(--space-3); }
.faq__answer p:last-child { margin-bottom: 0; }

/* Ghost-Dark-Button-Variante (heller BG -> dunkler Button mit Outline) */
.button--ghost-dark {
	background: transparent;
	color: var(--ink-900);
	border-color: var(--ink-300);
}
.button--ghost-dark:hover {
	background: var(--ink-900);
	color: var(--white);
	border-color: var(--ink-900);
}

/* Print: alle FAQs offen drucken */
@media print {
	.faq { break-inside: avoid; }
	.faq__answer { display: block !important; }
	.faq__icon { display: none; }
}

/* Reduced Motion: Icon-Rotation skippen */
@media (prefers-reduced-motion: reduce) {
	.faq__icon { transition: none; }
	.faq[open] .faq__icon { transform: none; }
}