/* CLAUDE: assets/css/faq.css – FAQ-Akkordeon-Styles */
/* CLAUDE: Styling für FAQ-Section mit nativem <details> Element UND Custom-Button-Akkordeon */
/* CLAUDE: Verwendet CSS-Variablen aus theme.json (--wp--preset--color--*, etc.) */
/* CLAUDE: Max. 400 Zeilen, unterstützt BEIDE FAQ-Varianten (Startseite + FAQ-Seite) */
/* CLAUDE: WICHTIG: Kompatibel mit WordPress Core Details-Block UND Custom-Akkordeon */

/* ============================================================
   CLAUDE: FAQ-SECTION – Base-Styles
   ============================================================ */

/* CLAUDE: KRITISCH: Globales CSS-Reset für alle Details/Summary Elemente */
/* CLAUDE: Überschreibt ALLE möglichen blockierenden Styles */
details {
	/* CLAUDE: Pointer-Events global aktivieren */
	pointer-events: auto !important;

	/* CLAUDE: Keine transform die Layout beeinflussen könnte */
	transform: none !important;
}

details summary {
	/* CLAUDE: Pointer-Events global aktivieren – KRITISCH für Klickbarkeit */
	pointer-events: auto !important;

	/* CLAUDE: Position relative für ::after Pseudo-Element */
	position: relative !important;

	/* CLAUDE: Cursor pointer für Klick-Feedback */
	cursor: pointer !important;
}

/* CLAUDE: FAQ-Section-Container (Full-Width-Background) */
/* CLAUDE: Ändern: Für andere Hintergrundfarben --bg-color anpassen */
.faq-section {
	/* CLAUDE: Padding oben/unten für Section-Spacing */
	padding-top: var(--wp--preset--spacing--xl, 4rem);
	padding-bottom: var(--wp--preset--spacing--xl, 4rem);

	/* CLAUDE: Hintergrundfarbe (aus theme.json) */
	background-color: var(--wp--preset--color--bg, #F7F5F2);

	/* CLAUDE: Position für Scroll-Anker (#faq) */
	position: relative;
}

/* CLAUDE: FAQ-Section-Header (Überschrift + Intro) */
.faq-section__header {
	/* CLAUDE: Zentrierte Ausrichtung */
	text-align: center;

	/* CLAUDE: Spacing nach unten (Abstand zu Items) */
	margin-bottom: var(--wp--preset--spacing--lg, 2.5rem);

	/* CLAUDE: Max-Width für bessere Lesbarkeit */
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/* CLAUDE: FAQ-Section-Titel (H2) */
.faq-section__title {
	/* CLAUDE: Schriftgröße aus theme.json (XXL = 2rem) */
	font-size: var(--wp--preset--font-size--xxl, 2rem);

	/* CLAUDE: Farbe aus theme.json (Primary = Tiefbraun) */
	color: var(--wp--preset--color--primary, #3B2A1A);

	/* CLAUDE: Font-Weight für Headings */
	font-weight: 700;

	/* CLAUDE: Line-Height für Headlines */
	line-height: 1.2;

	/* CLAUDE: Spacing nach unten */
	margin-bottom: var(--wp--preset--spacing--sm, 1rem);
}

/* CLAUDE: FAQ-Section-Intro (Paragraph) */
.faq-section__intro {
	/* CLAUDE: Schriftgröße leicht größer als Base (Large = 1.125rem) */
	font-size: var(--wp--preset--font-size--lg, 1.125rem);

	/* CLAUDE: Farbe für sekundäre Texte (Gray-Medium) */
	color: var(--wp--preset--color--gray-medium, #767676);

	/* CLAUDE: Line-Height für Fließtext */
	line-height: 1.6;

	/* CLAUDE: Margin-Bottom entfernen (letzter Child-Element) */
	margin-bottom: 0;
}

/* ============================================================
   CLAUDE: FAQ-ITEMS-CONTAINER – Layout
   ============================================================ */

/* CLAUDE: FAQ-Items-Container (Flex-Layout für gleichmäßige Abstände) */
.faq-items {
	/* CLAUDE: Max-Width für bessere Lesbarkeit */
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;

	/* CLAUDE: Gap zwischen Items (Small = 1rem) */
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm, 1rem);
}

/* ============================================================
   CLAUDE: FAQ-ITEM – UNIVERSELLE Styles (für beide Varianten)
   ============================================================ */

/* CLAUDE: FAQ-Item-Container (funktioniert für <details> UND <div>) */
/* CLAUDE: Sehr hohe Spezifität für Überschreiben von WP-Core-Styles */
/* CLAUDE: Ändern: Für andere Border-Colors oder Shadows anpassen */
.wp-block-group.faq-section .wp-block-group.faq-items details.wp-block-details.faq-item.has-border-color,
.wp-block-group.faq-section details.faq-item,
details.wp-block-details.faq-item.has-border-color,
.faq-items > .faq-item,
.faq-item {
	/* CLAUDE: Hintergrundfarbe (Weiß für Kontrast) – WICHTIG! */
	background-color: #FFFFFF !important;

	/* CLAUDE: Border für subtile Abgrenzung – SICHTBAR! */
	border: 2px solid #E5E5E5 !important;
	border-color: #E5E5E5 !important;

	/* CLAUDE: Border-Radius für moderne Optik */
	border-radius: 8px !important;

	/* CLAUDE: Transition für Hover-Effekt */
	transition: border-color 200ms ease, box-shadow 200ms ease !important;

	/* CLAUDE: Overflow hidden für saubere Border-Radius */
	overflow: hidden !important;

	/* CLAUDE: Padding KOMPLETT entfernen (wird auf summary/button/content angewendet) */
	padding: 0 !important;

	/* CLAUDE: Width 100% für volle Breite */
	width: 100% !important;

	/* CLAUDE: Box-Sizing für korrekte Breiten-Berechnung */
	box-sizing: border-box !important;

	/* CLAUDE: Margin für Spacing zwischen Items */
	margin-bottom: 1rem !important;

	/* CLAUDE: Box-Shadow für bessere Sichtbarkeit */
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* CLAUDE: FAQ-Item Hover-State (beide Varianten) */
.wp-block-details.faq-item:hover,
details.faq-item:hover,
.faq-items > .faq-item:hover,
.faq-item:hover {
	/* CLAUDE: Border-Farbe dunkler bei Hover */
	border-color: #767676 !important;

	/* CLAUDE: Subtiler Shadow-Effekt bei Hover */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* CLAUDE: FAQ-Item Opened-State (beide Varianten) */
/* CLAUDE: [open] für <details>, .is-open für Custom-Akkordeon */
.wp-block-details.faq-item[open],
details.faq-item[open],
.faq-item.is-open,
.faq-item[open] {
	/* CLAUDE: Border-Farbe Akzent bei geöffnetem Item */
	border-color: #C19A6B !important;

	/* CLAUDE: Shadow-Effekt bei geöffnetem Item */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;

	/* CLAUDE: Overflow weiterhin hidden bei geöffnetem Item */
	overflow: hidden !important;
}

/* ============================================================
   CLAUDE: FAQ-SUMMARY – Frage-Button (Native <summary> Element)
   ============================================================ */

/* CLAUDE: FAQ-Summary-Element (natives <summary> für Toggle) */
/* CLAUDE: Hohe Spezifität für Überschreiben von WP-Core-Styles */
/* CLAUDE: Ändern: Für andere Font-Sizes oder Colors anpassen */
.wp-block-details.faq-item > summary,
details.faq-item > summary,
.faq-item summary {
	/* CLAUDE: Cursor-Pointer für klickbares Element */
	cursor: pointer !important;

	/* CLAUDE: Pointer-Events AKTIVIEREN (kritisch für Klickbarkeit!) */
	pointer-events: auto !important;

	/* CLAUDE: Z-Index für Klickbarkeit über anderen Elementen */
	z-index: 10 !important;

	/* CLAUDE: Padding innerhalb Summary – WICHTIG für Klickfläche */
	padding: 1.25rem 1.5rem !important;

	/* CLAUDE: Schriftgröße leicht größer als Base */
	font-size: 1.125rem !important;

	/* CLAUDE: Font-Weight für Hervorhebung */
	font-weight: 600 !important;

	/* CLAUDE: Farbe Primary (Tiefbraun) */
	color: #3B2A1A !important;

	/* CLAUDE: Line-Height für mehrzeilige Fragen */
	line-height: 1.4 !important;

	/* CLAUDE: Transition für Hover-Effekt */
	transition: background-color 200ms ease, color 200ms ease !important;

	/* CLAUDE: User-Select verhindern (Text nicht markierbar bei Klick) */
	user-select: none !important;
	-webkit-user-select: none !important;

	/* CLAUDE: List-Style entfernen (Browser-Default Marker) */
	list-style: none !important;

	/* CLAUDE: Flexbox für Text + Icon */
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 1rem !important;

	/* CLAUDE: Position relative für ::after Icon */
	position: relative !important;

	/* CLAUDE: Margin entfernen */
	margin: 0 !important;

	/* CLAUDE: Width 100% für volle Breite */
	width: 100% !important;

	/* CLAUDE: Box-Sizing für korrekte Breiten-Berechnung */
	box-sizing: border-box !important;
}

/* CLAUDE: Browser-Default-Marker entfernen (Webkit/Chrome/Safari) */
.wp-block-details.faq-item > summary::-webkit-details-marker,
details.faq-item > summary::-webkit-details-marker,
.faq-item summary::-webkit-details-marker {
	display: none !important;
}

/* CLAUDE: Browser-Default-Marker entfernen (Firefox) */
.wp-block-details.faq-item > summary::marker,
details.faq-item > summary::marker,
.faq-item summary::marker {
	display: none !important;
	content: '' !important;
}

/* CLAUDE: Summary Hover-State */
.wp-block-details.faq-item > summary:hover,
details.faq-item > summary:hover,
.faq-item summary:hover {
	/* CLAUDE: Hintergrundfarbe leicht dunkler bei Hover */
	background-color: rgba(0, 0, 0, 0.02) !important;
}

/* CLAUDE: Summary Focus-State (Accessibility) */
.wp-block-details.faq-item > summary:focus,
details.faq-item > summary:focus,
.faq-item summary:focus {
	/* CLAUDE: Outline für Keyboard-Navigation */
	outline: 2px solid #C19A6B !important;
	outline-offset: -2px !important;
}

/* CLAUDE: Custom Icon für Summary (Plus/Minus-Symbol via ::after) */
/* CLAUDE: WICHTIG: Funktioniert für natives <summary> Element */
/* CLAUDE: Ändern: Für andere Icons content anpassen */
.wp-block-details.faq-item > summary::after,
details.faq-item > summary::after,
.faq-item summary::after {
	/* CLAUDE: Plus-Icon (Unicode) */
	content: '+' !important;

	/* CLAUDE: Flex-Shrink verhindern (Icon bleibt immer gleich groß) */
	flex-shrink: 0 !important;
	flex-grow: 0 !important;

	/* CLAUDE: Icon-Größe */
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	max-width: 32px !important;

	/* CLAUDE: Icon-Farbe (Akzent = Ocker) */
	color: #C19A6B !important;

	/* CLAUDE: Text-Alignment für zentriertes Icon */
	text-align: center !important;
	line-height: 32px !important;

	/* CLAUDE: Schriftgröße für Icon */
	font-size: 2rem !important;

	/* CLAUDE: Font-Weight für Icon */
	font-weight: 300 !important;

	/* CLAUDE: Transition für Rotation-Animation */
	transition: transform 300ms ease, color 200ms ease !important;

	/* CLAUDE: Display flex für bessere Kontrolle */
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	/* CLAUDE: Margin links entfernen (flexbox space-between macht das) */
	margin: 0 !important;

	/* CLAUDE: Pointer-Events DEAKTIVIEREN (Klicks gehen durch zum Summary) */
	pointer-events: none !important;

	/* CLAUDE: Z-Index niedriger als Summary */
	z-index: 1 !important;
}

/* CLAUDE: Icon bei geöffnetem Item (Minus-Symbol) */
/* CLAUDE: Ändern: Für Rotation statt Minus-Symbol transform: rotate(45deg) verwenden */
.wp-block-details.faq-item[open] > summary::after,
details.faq-item[open] > summary::after,
.faq-item[open] summary::after {
	/* CLAUDE: Minus-Icon (Unicode) */
	content: '−' !important;
}

/* ============================================================
   CLAUDE: FAQ-QUESTION – Custom Button (Startseite-Variante)
   ============================================================ */

/* CLAUDE: FAQ-Question-Button (Custom-Akkordeon für Startseite) */
/* CLAUDE: Identische Styles wie <summary> Element */
.faq-items > .faq-item > .faq-question,
.faq-item .faq-question,
.faq-question {
	/* CLAUDE: Button-Reset (native Browser-Styles entfernen) */
	width: 100% !important;
	text-align: left !important;
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	font-family: inherit !important;

	/* CLAUDE: Padding innerhalb Button */
	padding: 1.25rem 1.5rem !important;

	/* CLAUDE: Schriftgröße leicht größer als Base */
	font-size: 1.125rem !important;

	/* CLAUDE: Font-Weight für Hervorhebung */
	font-weight: 600 !important;

	/* CLAUDE: Farbe Primary (Tiefbraun) */
	color: #3B2A1A !important;

	/* CLAUDE: Line-Height für mehrzeilige Fragen */
	line-height: 1.4 !important;

	/* CLAUDE: Flexbox für Text + Icon */
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 1rem !important;

	/* CLAUDE: Transition für Hover-Effekt */
	transition: background-color 200ms ease, color 200ms ease !important;

	/* CLAUDE: User-Select verhindern */
	user-select: none !important;
	-webkit-user-select: none !important;

	/* CLAUDE: Margin entfernen */
	margin: 0 !important;
}

/* CLAUDE: FAQ-Question Hover-State */
.faq-question:hover {
	/* CLAUDE: Hintergrundfarbe leicht dunkler bei Hover */
	background-color: rgba(0, 0, 0, 0.02) !important;
}

/* CLAUDE: FAQ-Question Focus-State (Accessibility) */
.faq-question:focus {
	/* CLAUDE: Outline für Keyboard-Navigation */
	outline: 2px solid #C19A6B !important;
	outline-offset: -2px !important;
}

/* CLAUDE: FAQ-Question-Text (Span innerhalb Button) */
.faq-question__text {
	/* CLAUDE: Flex-Grow für Text (nimmt verfügbaren Platz ein) */
	flex: 1 1 auto !important;
}

/* CLAUDE: FAQ-Question-Icon (SVG-Container) */
.faq-question__icon {
	/* CLAUDE: Flex-Shrink verhindern (Icon bleibt immer gleich groß) */
	flex-shrink: 0 !important;

	/* CLAUDE: Icon-Größe */
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;

	/* CLAUDE: Icon-Farbe (Akzent = Ocker) */
	color: #C19A6B !important;

	/* CLAUDE: Transition für Rotation-Animation */
	transition: transform 300ms ease !important;

	/* CLAUDE: Display Block für bessere Kontrolle */
	display: inline-block !important;
}

/* CLAUDE: FAQ-Question-Icon bei geöffnetem Item (Rotation) */
.faq-item.is-open .faq-question__icon {
	/* CLAUDE: 180° Rotation für "Minus"-Effekt (Plus wird zu Minus) */
	transform: rotate(180deg) !important;
}

/* CLAUDE: FAQ-Icon Vertikale Linie (wird bei .is-open ausgeblendet) */
.faq-item.is-open .faq-icon-vertical {
	/* CLAUDE: Opacity auf 0 für sanftes Ausblenden */
	opacity: 0 !important;
	transition: opacity 200ms ease !important;
}

/* ============================================================
   CLAUDE: FAQ-ANSWER – Antwort-Container (beide Varianten)
   ============================================================ */

/* CLAUDE: FAQ-Answer-Container (funktioniert für <details> UND Custom-Akkordeon) */
/* CLAUDE: Hohe Spezifität für Überschreiben von WP-Core-Styles */
.wp-block-details.faq-item > .faq-answer,
.wp-block-details.faq-item > p.faq-answer,
.wp-block-details.faq-item > div,
details.faq-item > .faq-answer,
details.faq-item > p,
details.faq-item > div,
.faq-items > .faq-item > .faq-answer,
.faq-item .faq-answer,
.faq-item > div {
	/* CLAUDE: Padding für Spacing (links/rechts/unten) */
	padding: 0 1.5rem 1.25rem 1.5rem !important;

	/* CLAUDE: Schriftgröße Base (1rem = 16px) */
	font-size: 1rem !important;

	/* CLAUDE: Line-Height für Fließtext */
	line-height: 1.6 !important;

	/* CLAUDE: Textfarbe (Ink = Dunkelgrau) */
	color: #1f1f1f !important;

	/* CLAUDE: Margin-Bottom entfernen (wird via Padding gesteuert) */
	margin-bottom: 0 !important;

	/* CLAUDE: Margin-Top für Spacing nach Summary */
	margin-top: 0 !important;

	/* CLAUDE: Width 100% für volle Breite */
	width: 100% !important;

	/* CLAUDE: Box-Sizing für korrekte Breiten-Berechnung */
	box-sizing: border-box !important;
}

/* CLAUDE: FAQ-Answer für Custom-Akkordeon (Startseite) */
/* CLAUDE: Max-Height-Animation für Slide-Effekt */
.faq-items > .faq-item > .faq-answer {
	/* CLAUDE: Max-Height 0 standardmäßig (geschlossen) */
	max-height: 0 !important;

	/* CLAUDE: Overflow hidden für Slide-Effekt */
	overflow: hidden !important;

	/* CLAUDE: Transition für Slide-Animation */
	transition: max-height 300ms ease !important;

	/* CLAUDE: Padding 0 wenn geschlossen */
	padding: 0 !important;
}

/* CLAUDE: FAQ-Answer bei geöffnetem Item (Custom-Akkordeon) */
.faq-item.is-open > .faq-answer {
	/* CLAUDE: Max-Height auf großen Wert (wird via JS präzise gesetzt) */
	max-height: 2000px !important;

	/* CLAUDE: Padding wiederherstellen */
	padding: 0 1.5rem 1.25rem 1.5rem !important;
}

/* CLAUDE: FAQ-Answer-Content (Inner-Container) */
.faq-answer__content,
.faq-answer__content > p,
.faq-answer > p {
	/* CLAUDE: Margin für Paragraphs entfernen */
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* CLAUDE: Mehrere Paragraphs innerhalb <details> oder Custom-Akkordeon */
.wp-block-details.faq-item > p + p,
details.faq-item > p + p,
.faq-answer__content > p + p,
.faq-item p + p {
	/* CLAUDE: Margin-Top für Absatz-Spacing */
	margin-top: 1rem !important;
	padding-top: 0 !important;
}

/* ============================================================
   CLAUDE: FAQ-SECTION-CTA – Call-to-Action-Button
   ============================================================ */

/* CLAUDE: FAQ-Section-CTA-Container (zentriert) */
.faq-section__cta {
	/* CLAUDE: Zentrierte Ausrichtung */
	text-align: center !important;

	/* CLAUDE: Spacing nach oben (Abstand zu Items) */
	margin-top: var(--wp--preset--spacing--lg, 2.5rem) !important;
}

/* ============================================================
   CLAUDE: RESPONSIVE – Mobile & Tablet Anpassungen
   ============================================================ */

/* CLAUDE: Tablet-Breakpoint (768px und kleiner) */
@media (max-width: 768px) {
	/* CLAUDE: FAQ-Section Padding reduzieren */
	.faq-section {
		padding-top: 2.5rem !important;
		padding-bottom: 2.5rem !important;
	}

	/* CLAUDE: FAQ-Summary/Button Schriftgröße reduzieren */
	.wp-block-details.faq-item > summary,
	details.faq-item > summary,
	.faq-item summary,
	.faq-question {
		font-size: 1rem !important;
		padding: 1rem 1.25rem !important;
	}

	/* CLAUDE: FAQ-Answer Padding reduzieren */
	.wp-block-details.faq-item > .faq-answer,
	.wp-block-details.faq-item > p,
	details.faq-item > p,
	.faq-item .faq-answer {
		padding: 0 1.25rem 1rem 1.25rem !important;
	}

	/* CLAUDE: FAQ-Answer-Content bei Custom-Akkordeon */
	.faq-item.is-open > .faq-answer {
		padding: 0 1.25rem 1rem 1.25rem !important;
	}
}

/* CLAUDE: Mobile-Breakpoint (640px und kleiner) */
@media (max-width: 640px) {
	/* CLAUDE: FAQ-Items Gap reduzieren */
	.faq-items {
		gap: 0.75rem !important;
	}

	/* CLAUDE: FAQ-Item Border-Radius reduzieren */
	.wp-block-details.faq-item,
	details.faq-item,
	.faq-item {
		border-radius: 6px !important;
	}

	/* CLAUDE: FAQ-Summary/Button Icon kleiner */
	.wp-block-details.faq-item > summary::after,
	details.faq-item > summary::after,
	.faq-item summary::after,
	.faq-question__icon {
		width: 28px !important;
		height: 28px !important;
		min-width: 28px !important;
		line-height: 28px !important;
		font-size: 1.75rem !important;
	}

	/* CLAUDE: FAQ-Summary/Button Padding weiter reduzieren */
	.wp-block-details.faq-item > summary,
	details.faq-item > summary,
	.faq-item summary,
	.faq-question {
		padding: 0.875rem 1rem !important;
	}
}

/* ============================================================
   CLAUDE: ACCESSIBILITY – Verbesserte Zugänglichkeit
   ============================================================ */

/* CLAUDE: Reduced-Motion für Nutzer mit Präferenz */
/* CLAUDE: Entfernt Animationen für bessere Accessibility */
@media (prefers-reduced-motion: reduce) {
	.wp-block-details.faq-item,
	details.faq-item,
	.faq-item,
	.wp-block-details.faq-item > summary,
	details.faq-item > summary,
	.faq-item summary,
	.faq-question,
	.faq-question__icon,
	.faq-answer,
	.wp-block-details.faq-item > summary::after,
	details.faq-item > summary::after,
	.faq-item summary::after {
		transition: none !important;
	}
}

/* CLAUDE: High-Contrast-Mode Support */
/* CLAUDE: Stellt sicher, dass Borders sichtbar bleiben */
@media (prefers-contrast: high) {
	.wp-block-details.faq-item,
	details.faq-item,
	.faq-item {
		border-width: 3px !important;
	}

	.wp-block-details.faq-item > summary:focus,
	details.faq-item > summary:focus,
	.faq-item summary:focus,
	.faq-question:focus {
		outline-width: 3px !important;
	}
}