/* CLAUDE: assets/css/faq-fix.css – RADIKALER FAQ-FIX */
/* CLAUDE: Minimalistisches CSS das GARANTIERT funktioniert */
/* CLAUDE: Plus-Icon LINKS, kein blockierendes CSS, natives <details> Verhalten */

/* ============================================================
   CLAUDE: GLOBALER RESET – Entfernt ALLE blockierenden Styles
   ============================================================ */

/* CLAUDE: Kritisch: Alle Details/Summary Elemente zurücksetzen */
details,
details *,
summary,
summary * {
	pointer-events: auto !important;
	user-select: auto !important;
	-webkit-user-select: auto !important;
}

/* ============================================================
   CLAUDE: FAQ-ITEM – Minimales Container-Styling
   ============================================================ */

/* CLAUDE: FAQ-Item Container */
.faq-item {
	background: white;
	border: 2px solid #E5E5E5;
	border-radius: 8px;
	margin-bottom: 1rem;
	overflow: hidden;
}

/* CLAUDE: Hover-State */
.faq-item:hover {
	border-color: #767676;
}

/* CLAUDE: Opened-State */
.faq-item[open] {
	border-color: #C19A6B;
}

/* ============================================================
   CLAUDE: SUMMARY – Frage mit Plus-Icon LINKS
   ============================================================ */

/* CLAUDE: Summary-Element (Frage) */
.faq-item summary {
	cursor: pointer;
	padding: 1.25rem 1.5rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: #3B2A1A;
	line-height: 1.4;
	list-style: none;
	display: flex;
	align-items: flex-start; /* CLAUDE: flex-start statt center für mehrzeiligen Text */
	gap: 0.75rem; /* CLAUDE: Abstand zwischen Plus und Text */
}

/* CLAUDE: Text-Container für präzise Flexbox-Ausrichtung */
/* CLAUDE: Nimmt den restlichen Platz ein, verhindert Text-Überlauf */
.faq-item summary .faq-question-text {
	flex: 1;
	min-width: 0; /* CLAUDE: Wichtig für text-overflow in Flexbox */
	line-height: 1.4;
	padding-top: 0.1rem; /* CLAUDE: Micro-Adjustment für optische Ausrichtung mit Plus-Icon */
}

/* CLAUDE: Browser-Marker entfernen */
.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary::marker {
	display: none;
}

/* CLAUDE: KRITISCH: Entfernt das RECHTE Plus-Icon aus faq.css */
/* CLAUDE: Überschreibt alle ::after Pseudo-Elemente */
.faq-item summary::after,
.wp-block-details.faq-item > summary::after,
details.faq-item > summary::after {
	display: none !important;
	content: none !important;
}

/* CLAUDE: Plus-Icon VOR dem Text (::before statt ::after) */
.faq-item summary::before {
	content: '+';
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	font-weight: 300;
	line-height: 1; /* CLAUDE: Line-height 1 für zentriertes Plus-Icon */
	color: #C19A6B;
	background: #F7F5F2;
	border-radius: 4px;
	transition: transform 300ms ease;
	margin-top: 0.05rem; /* CLAUDE: Feinjustierung für optische Ausrichtung mit erster Textzeile */
}

/* CLAUDE: Icon ändert sich bei geöffnetem Item */
.faq-item[open] summary::before {
	content: '−';
}

/* CLAUDE: Summary Hover-State */
.faq-item summary:hover {
	background-color: rgba(0, 0, 0, 0.02);
}

/* ============================================================
   CLAUDE: ANSWER – Antwort-Container
   ============================================================ */

/* CLAUDE: Antwort-Container (alle Child-Elemente von details) */
.faq-item > div,
.faq-item > p {
	padding: 0 1.5rem 1.25rem 1.5rem;
	font-size: 1rem;
	line-height: 1.6;
	color: #1f1f1f;
	margin: 0;
}

/* CLAUDE: Mehrere Paragraphs */
.faq-item > div > p,
.faq-item > div p {
	margin: 0 0 1rem 0;
}

.faq-item > div > p:last-child,
.faq-item > div p:last-child {
	margin-bottom: 0;
}

/* ============================================================
   CLAUDE: RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
	.faq-item summary {
		font-size: 1rem;
		padding: 1rem 1.25rem;
	}

	.faq-item summary::before {
		width: 28px;
		height: 28px;
		font-size: 1.75rem;
	}

	.faq-item > div,
	.faq-item > p {
		padding: 0 1.25rem 1rem 1.25rem;
	}
}