/* ==========================================================================
   FAQ Widget — Premium Design 2026
   KW Lobby | Merged FaqList + FaqDetail
   ========================================================================== */

/* 1. Custom Properties (Widget-Scope → referenziert --kwl-* Tokens) */
.kw-faq {
	--kwl-faq-bg: var(--kwl-bg, #ffffff);
	--kwl-faq-border: var(--kwl-border, #e2e8f0);
	--kwl-faq-accent: var(--kwl-accent, #BD9B5C);
	--kwl-faq-radius: var(--kwl-radius-lg, 12px);
	--kwl-faq-heading-color: var(--kwl-text, #1a202c);
	--kwl-faq-question-color: var(--kwl-text, #1a202c);
	--kwl-faq-question-bg: var(--kwl-bg, #ffffff);
	--kwl-faq-answer-color: var(--kwl-text, #1a202c);
	--kwl-faq-answer-bg: var(--kwl-bg-alt, #f7fafc);
	--kwl-faq-link-color: var(--kwl-primary, #00315d);
	--kwl-faq-chevron-color: var(--kwl-text-muted, #718096);
	--kwl-faq-search-bg: var(--kwl-bg, #ffffff);
	--kwl-faq-search-border: var(--kwl-border, #e2e8f0);
	--kwl-faq-search-color: var(--kwl-text, #1a202c);
	--kwl-faq-highlight: color-mix(in srgb, var(--kwl-faq-accent) 25%, transparent);
	--kwl-faq-pill-bg: color-mix(in srgb, var(--kwl-primary, #00315d) 6%, var(--kwl-faq-bg));
	--kwl-faq-pill-border: color-mix(in srgb, var(--kwl-primary, #00315d) 18%, var(--kwl-border, #e2e8f0));
	--kwl-faq-pill-active-bg: var(--kwl-primary, #00315d);
	--kwl-faq-pill-color: var(--kwl-text, #1a202c);
	--kwl-faq-pill-active-color: var(--kwl-btn-text, #ffffff);
	--kwl-faq-icon-color: var(--kwl-faq-accent);
}

/* 2. Card Container (base via [data-kwl-card]) */
.kw-faq[data-kwl-card] {
	--kwl-card-accent: var(--kwl-faq-accent, var(--kwl-accent, #BD9B5C));
}

.kw-faq {
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-md, 1rem);
	padding: var(--kwl-space-lg, 1.5rem);
}

/* 3. Ueberschrift — Gold-Separator */
.kw-faq-heading {
	margin: 0 0 var(--kwl-space-sm, 0.5rem);
	font-size: var(--kwl-fsize-h2, 1.5rem);
	font-family: var(--kwl-font-heading);
	font-weight: var(--kwl-fw-bold);
	color: var(--kwl-faq-heading-color);
	line-height: var(--kwl-lh-snug);
	padding-bottom: var(--kwl-space-sm, 0.5rem);
	--kwl-separator-height: 3px;
}

.kw-faq-heading[data-kwl-separator="gold"]::after {
	width: 60%;
	right: auto;
}

/* 4. Search Bar */
.kw-faq-search-wrap {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--kwl-faq-search-border);
	border-radius: var(--kwl-radius-md, 8px);
	background: var(--kwl-faq-search-bg);
	overflow: hidden;
	transition: border-color var(--kwl-transition, 200ms ease),
	            box-shadow var(--kwl-transition, 200ms ease);
}

.kw-faq-search-wrap:focus-within {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
	border-color: var(--kwl-focus, #7B6835);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--kwl-focus, #7B6835) 15%, transparent);
}

.kw-faq-search-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3rem;
	background: color-mix(in srgb, var(--kwl-faq-icon-color) 12%, transparent);
	border-right: 1px solid var(--kwl-faq-search-border);
	color: var(--kwl-faq-icon-color);
}

.kw-faq-search-icon > svg {
	width: 20px;
	height: 20px;
}

.kw-faq-search {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	padding: 0.75rem 1rem;
	border: none;
	border-radius: 0;
	background: transparent;
	color: var(--kwl-faq-search-color);
	font-size: var(--kwl-fsize-body, 1rem);
	-webkit-appearance: none;
	appearance: none;
}

.kw-faq-search::-webkit-search-cancel-button,
.kw-faq-search::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.kw-faq-search:focus-visible {
	outline: none;
}

.kw-faq-search::placeholder {
	color: var(--kwl-faq-chevron-color);
	opacity: 1;
}

/* 5. Filter Pills */
.kw-faq-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kwl-space-sm, 0.5rem);
}

.kw-faq-pill {
	position: relative;
	overflow: hidden;
	padding: 0.5rem 1.25rem;
	min-height: 44px;
	min-width: 44px;
	border: 1.5px solid var(--kwl-faq-pill-border);
	border-radius: var(--kwl-radius-full, 9999px);
	background: var(--kwl-faq-pill-bg);
	color: var(--kwl-faq-pill-color);
	font-size: var(--kwl-fsize-caption, 0.875rem);
	font-weight: var(--kwl-fw-medium);
	letter-spacing: var(--kwl-ls-subtle);
	cursor: pointer;
	transition: background var(--kwl-transition, 200ms ease),
	            color var(--kwl-transition, 200ms ease),
	            border-color var(--kwl-transition, 200ms ease),
	            box-shadow var(--kwl-transition, 200ms ease);
}

.kw-faq-pill.is-active {
	background: var(--kwl-faq-pill-active-bg);
	color: var(--kwl-faq-pill-active-color);
	border-color: var(--kwl-faq-pill-active-bg);
	box-shadow: var(--kwl-shadow-md);
}

/* Shimmer-Sweep auf Active Pill */
.kw-faq-pill.is-active::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		175deg,
		transparent 40%,
		color-mix(in srgb, var(--kwl-faq-pill-active-color) 12%, transparent) 50%,
		transparent 60%
	);
	transform: translateX(-100%);
	pointer-events: none;
}

@media (hover: hover) {
	.kw-faq-pill.is-active:hover::after {
		transform: translateX(100%);
		transition: transform 600ms ease;
	}
}

@media (hover: hover) {
	.kw-faq-pill:hover {
		background: color-mix(in srgb, var(--kwl-faq-pill-active-bg) 8%, transparent);
		border-color: color-mix(in srgb, var(--kwl-faq-pill-active-bg) 50%, transparent);
		color: var(--kwl-faq-pill-active-bg);
		box-shadow: var(--kwl-shadow-sm);
	}

	.kw-faq-pill.is-active:hover {
		box-shadow: var(--kwl-shadow-lg);
	}
}

.kw-faq-pill:active {
	transform: scale(0.95);
}

.kw-faq-pill:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

/* 6. Accordion Items (<details>/<summary>) */
.kw-faq-items {
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-sm, 0.5rem);
}

.kw-faq-item {
	border: 1px solid var(--kwl-faq-border);
	border-left: 3px solid transparent;
	border-radius: var(--kwl-radius-md, 8px);
	background: var(--kwl-faq-bg);
	overflow: hidden;
	box-shadow: var(--kwl-shadow-sm);
	transition: box-shadow var(--kwl-transition, 200ms ease),
	            transform var(--kwl-transition, 200ms ease),
	            border-color var(--kwl-transition, 200ms ease);
}

@media (hover: hover) {
	.kw-faq-item:hover {
		transform: translateY(-2px);
		box-shadow: var(--kwl-shadow-md);
		border-color: color-mix(in srgb, var(--kwl-faq-accent) 20%, var(--kwl-faq-border));
	}
}

/* Gold-Akzent bei geoeffnetem Item */
.kw-faq-item[open] {
	border-left-color: var(--kwl-faq-accent);
	box-shadow: var(--kwl-shadow-lg);
	border-color: color-mix(in srgb, var(--kwl-primary, #00315d) 25%, var(--kwl-faq-border));
	border-left-color: var(--kwl-faq-accent);
	transform: translateY(-1px);
}

/* Nativen Marker entfernen */
.kw-faq-summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: var(--kwl-space-sm, 0.5rem);
	padding: var(--kwl-space-md, 1rem);
	background: var(--kwl-faq-question-bg);
	cursor: pointer;
	min-height: 44px;
	transition: background var(--kwl-transition, 200ms ease);
}

.kw-faq-summary::-webkit-details-marker {
	display: none;
}

.kw-faq-summary::marker {
	content: '';
}

.kw-faq-summary:active {
	opacity: 0.9;
}

.kw-faq-summary:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: -3px;
}

@media (hover: hover) {
	.kw-faq-summary:hover {
		background: color-mix(in srgb, var(--kwl-bg-alt, #f7fafc) 60%, transparent);
	}
}

/* FAQ-Icon (SVG aus Icon-Bibliothek, kein Circle) */
.kw-faq-item-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	color: var(--kwl-faq-icon-color, var(--kwl-accent, #BD9B5C));
}

.kw-faq-item-icon svg {
	width: var(--kwl-faq-icon-size, 20px);
	height: var(--kwl-faq-icon-size, 20px);
}

/* Question */
.kw-faq-question {
	flex: 1;
	margin: 0;
	font-size: clamp(0.875rem, 0.83rem + 0.22vw, 1.1rem);
	font-weight: var(--kwl-fw-semibold);
	color: var(--kwl-faq-question-color);
	line-height: var(--kwl-lh-relaxed);
}

/* Topic Badge */
.kw-faq-topic-badge {
	flex-shrink: 0;
	padding: 0.25rem 0.625rem;
	border-radius: var(--kwl-radius-full, 9999px);
	background: color-mix(in srgb, var(--kwl-faq-accent) 12%, var(--kwl-faq-bg));
	color: var(--kwl-focus, #7B6835);
	font-size: var(--kwl-fsize-caption, 0.875rem);
	font-weight: var(--kwl-fw-semibold);
	white-space: nowrap;
	border: 1px solid color-mix(in srgb, var(--kwl-faq-accent) 20%, transparent);
}

/* Chevron */
.kw-faq-chevron {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-left: auto;
	position: relative;
	transition: transform var(--kwl-transition, 200ms ease);
}

.kw-faq-chevron::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--kwl-faq-chevron-color);
	border-bottom: 2px solid var(--kwl-faq-chevron-color);
	transform: translate(-50%, -65%) rotate(45deg);
	transition: transform var(--kwl-transition, 200ms ease);
}

.kw-faq-item[open] > .kw-faq-summary .kw-faq-chevron::before {
	transform: translate(-50%, -35%) rotate(-135deg);
	border-color: var(--kwl-faq-accent);
}

/* 7. Progressive Animation (Chrome/Edge 129+) */
@supports (interpolate-size: allow-keywords) {
	.kw-faq-item {
		interpolate-size: allow-keywords;
	}

	.kw-faq-item::details-content {
		block-size: 0;
		overflow-y: clip;
		transition: block-size 300ms ease,
		            content-visibility 300ms ease allow-discrete;
	}

	.kw-faq-item[open]::details-content {
		block-size: auto;
	}
}

/* 8. Answer Content */
.kw-faq-answer {
	padding: var(--kwl-space-md, 1rem);
	background: var(--kwl-faq-answer-bg);
	color: var(--kwl-faq-answer-color);
	border-top: 1px solid var(--kwl-faq-border);
	line-height: var(--kwl-lh-prose);
	--kwl-link-color: var(--kwl-faq-link-color);
	--kwl-link-hover-color: var(--kwl-primary-hover, #1e3a5f);
}

.kw-faq-short-answer {
	margin: 0 0 var(--kwl-space-sm, 0.5rem);
	font-style: italic;
	color: var(--kwl-faq-question-color);
}

.kw-faq-full-answer {
	margin-bottom: var(--kwl-space-sm, 0.5rem);
}

/* Default-Linkfarbe fuer Editor-Inhalte — data-kwl-link-scope deckt nur
   :hover/:active/:focus ab, NICHT den Normalzustand. (0,2,1) gegen V4 (0,1,1). */
.kw-faq .kw-faq-full-answer a {
	color: var(--kwl-faq-link-color);
}

.kw-faq-full-answer p {
	margin: 0 0 var(--kwl-space-sm, 0.5rem);
}

.kw-faq-full-answer img {
	max-width: 100%;
	height: auto;
	border-radius: var(--kwl-radius-sm, 4px);
	margin: var(--kwl-space-sm, 0.5rem) 0;
}

.kw-faq-full-answer ul,
.kw-faq-full-answer ol {
	padding-left: 1.5rem;
	margin: 0 0 var(--kwl-space-sm, 0.5rem);
}

/* Search Highlight */
.kw-faq-highlight {
	background: var(--kwl-faq-highlight);
	border-radius: 2px;
	padding: 0 2px;
}

/* 9. Read-More Link — Accent Underline */
.kw-faq-read-more {
	--kwl-link-color: var(--kwl-faq-link-color);
	--kwl-link-hover-color: var(--kwl-primary-hover, #1e3a5f);
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	min-height: 44px;
	font-weight: var(--kwl-fw-medium);
	position: relative;
}

.kw-faq-read-more::before {
	content: '';
	position: absolute;
	bottom: 8px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--kwl-faq-accent);
	transition: width 300ms ease;
}

.kw-faq-read-more:active {
	opacity: 0.8;
}

.kw-faq-read-more span {
	display: inline-block;
	transition: transform var(--kwl-transition, 200ms ease);
}

@media (hover: hover) {
	.kw-faq-read-more:hover::before {
		width: calc(100% - 1.5rem);
	}

	.kw-faq-read-more:hover span {
		transform: translateX(4px);
	}
}

/* No Results */
.kw-faq-no-results {
	text-align: center;
	padding: var(--kwl-space-xl, 2rem);
}

.kw-faq-no-results-text {
	color: var(--kwl-faq-question-color);
	font-weight: var(--kwl-fw-medium);
	margin: 0;
}

.kw-faq-no-results-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--kwl-space-sm, 0.5rem);
	flex-wrap: wrap;
	margin-block-start: var(--kwl-space-md, 1rem);
	padding: var(--kwl-space-md, 1rem);
	border-left: 3px solid var(--kwl-faq-accent, #BD9B5C);
	background: color-mix(in srgb, var(--kwl-faq-accent, #BD9B5C) 6%, var(--kwl-faq-bg, #ffffff));
	border-radius: var(--kwl-radius-sm, 0.375rem);
}

/* Visibility utility */
.kw-faq .is-hidden {
	display: none;
}

/* 10. Image Two-Column Layout (Mobile-First: 1 Spalte, ab 768px 2 Spalten) */
.kw-faq-answer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--kwl-space-md, 1rem);
	align-items: start;
}

@media (min-width: 768px) {
	.kw-faq-answer-grid {
		grid-template-columns: 2fr 3fr;
	}
}

.kw-faq-image-trigger {
	display: block;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	width: 100%;
	border-radius: var(--kwl-radius-sm, 0.375rem);
	overflow: hidden;
}

.kw-faq-image-trigger:active {
	opacity: 0.85;
}

.kw-faq-image-trigger:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

.kw-faq-img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--kwl-radius-sm, 0.375rem);
}

/* Elementor V4 Pink-Hover-Override (Spezifitaet 0,2,0+) */
.kw-faq .kw-faq-image-trigger:hover,
.kw-faq .kw-faq-image-trigger:focus {
	background: transparent;
	color: var(--kwl-faq-accent, #BD9B5C);
	border-color: var(--kwl-faq-accent, #BD9B5C);
	opacity: 0.9;
}

.kw-faq .kw-faq-feedback-btn:hover,
.kw-faq .kw-faq-feedback-btn:focus {
	color: var(--kwl-text, #1a202c);
}

.kw-faq .kw-faq-feedback-btn[data-vote="yes"]:hover {
	border-color: var(--kwl-success, #2f855a);
	background: color-mix(in srgb, var(--kwl-success, #2f855a) 8%, var(--kwl-faq-bg, #ffffff));
	color: var(--kwl-success, #2f855a);
}

.kw-faq .kw-faq-feedback-btn[data-vote="no"]:hover {
	border-color: var(--kwl-error, #c53030);
	background: color-mix(in srgb, var(--kwl-error, #c53030) 8%, var(--kwl-faq-bg, #ffffff));
	color: var(--kwl-error, #c53030);
}

/* 11. Feedback */
.kw-faq-feedback {
	display: flex;
	align-items: center;
	gap: var(--kwl-space-sm, 0.5rem);
	padding-top: var(--kwl-space-sm, 0.5rem);
	margin-top: var(--kwl-space-sm, 0.5rem);
	border-top: 1px solid var(--kwl-faq-border, #e2e8f0);
}

.kw-faq-feedback-label {
	font-size: var(--kwl-fsize-small, 0.875rem);
	color: var(--kwl-faq-answer-color, #1a202c);
}

.kw-faq-feedback-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: var(--kwl-space-xs, 0.375rem);
	border: 1px solid var(--kwl-faq-border, #e2e8f0);
	border-radius: var(--kwl-radius-sm, 0.375rem);
	background: var(--kwl-faq-bg, #ffffff);
	color: var(--kwl-faq-answer-color, #1a202c);
	cursor: pointer;
	transition: background var(--kwl-transition, 200ms ease),
	            border-color var(--kwl-transition, 200ms ease);
}

.kw-faq-feedback-btn:active {
	transform: scale(0.95);
}

.kw-faq-feedback-btn:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

.kw-faq-feedback-btn .kwl-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.kw-faq-feedback-btn[data-vote="yes"]:hover {
	border-color: var(--kwl-success, #2f855a);
	background: color-mix(in srgb, var(--kwl-success, #2f855a) 8%, var(--kwl-faq-bg, #ffffff));
}

.kw-faq-feedback-btn[data-vote="no"]:hover {
	border-color: var(--kwl-error, #c53030);
	background: color-mix(in srgb, var(--kwl-error, #c53030) 8%, var(--kwl-faq-bg, #ffffff));
}

.kw-faq-feedback-thanks {
	font-size: var(--kwl-fsize-small, 0.875rem);
	color: var(--kwl-success, #2f855a);
	font-weight: var(--kwl-fw-medium);
}

/* 12. Contact Fallback */
.kw-faq-contact-fallback {
	display: flex;
	align-items: center;
	gap: var(--kwl-space-sm, 0.5rem);
	flex-wrap: wrap;
	padding: var(--kwl-space-md, 1rem);
	margin-top: var(--kwl-space-md, 1rem);
	border-left: 3px solid var(--kwl-faq-accent, #BD9B5C);
	background: color-mix(in srgb, var(--kwl-faq-accent, #BD9B5C) 6%, var(--kwl-faq-bg, #ffffff));
	border-radius: var(--kwl-radius-sm, 0.375rem);
}

.kw-faq-contact-text {
	color: var(--kwl-faq-question-color, #1a202c);
	font-size: var(--kwl-fsize-body, 1rem);
}

.kw-faq-contact-link {
	--kwl-link-color: var(--kwl-faq-accent, #BD9B5C);
	--kwl-link-hover-color: var(--kwl-faq-accent, #BD9B5C);
	font-weight: var(--kwl-fw-semibold);
}

.kw-faq-contact-link:hover {
	text-decoration: underline;
}

.kw-faq-contact-link:active {
	opacity: 0.8;
}

/* 13. Single FAQ Page */
.kw-faq-single {
	max-width: 48rem;
	margin: 0 auto;
	padding: var(--kwl-space-lg, 1.5rem);
}

.kw-faq-single__title {
	font-family: var(--kwl-font-heading, serif);
	font-size: var(--kwl-fsize-h1, clamp(1.75rem, 3vw, 2.5rem));
	color: var(--kwl-text, #1a202c);
	margin: 0 0 var(--kwl-space-sm, 0.5rem);
}

.kw-faq-single__topics {
	display: flex;
	gap: var(--kwl-space-xs, 0.375rem);
	flex-wrap: wrap;
	margin-bottom: var(--kwl-space-md, 1rem);
}

.kw-faq-single__image {
	margin-bottom: var(--kwl-space-md, 1rem);
}

.kw-faq-single__image .kw-faq-img {
	max-width: 100%;
	height: auto;
	border-radius: var(--kwl-radius-md, 0.5rem);
}

.kw-faq-single__content {
	color: var(--kwl-text, #1a202c);
	line-height: var(--kwl-lh-loose);
	margin-bottom: var(--kwl-space-xl, 2rem);
}

.kw-faq-single__related {
	border-top: 1px solid var(--kwl-border, #e2e8f0);
	padding-top: var(--kwl-space-lg, 1.5rem);
	margin-top: var(--kwl-space-lg, 1.5rem);
}

.kw-faq-single__related-heading {
	font-family: var(--kwl-font-heading, serif);
	font-size: var(--kwl-fsize-h3, clamp(1.125rem, 2vw, 1.5rem));
	color: var(--kwl-text, #1a202c);
	margin: 0 0 var(--kwl-space-md, 1rem);
}

.kw-faq-single__related-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kw-faq-single__related-list li {
	padding: var(--kwl-space-sm, 0.5rem) 0;
	border-bottom: 1px solid var(--kwl-border, #e2e8f0);
}

.kw-faq-single__related-list li:last-child {
	border-bottom: none;
}

.kw-faq-single__related-list a {
	--kwl-link-color: var(--kwl-primary, #00315d);
	--kwl-link-hover-color: var(--kwl-accent, #BD9B5C);
	display: flex;
	align-items: center;
	gap: var(--kwl-space-sm, 0.5rem);
	font-weight: var(--kwl-fw-medium);
}

.kw-faq-single__related-list a:active {
	opacity: 0.8;
}

.kw-faq-single__related-list .kwl-icon {
	color: var(--kwl-accent, #BD9B5C);
	flex-shrink: 0;
}

/* ─── 14. Category Tiles (Kategorie-Kachel-Modus) ─── */

.kw-faq-category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
	gap: var(--kwl-space-md, 1rem);
}

.kw-faq-category-tile {
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-xs, 0.375rem);
	padding: var(--kwl-space-lg, 1.5rem);
	border: 1px solid var(--kwl-faq-border);
	border-radius: var(--kwl-faq-radius);
	background: var(--kwl-faq-bg);
	cursor: pointer;
	text-align: left;
	min-height: 44px;
	box-shadow: var(--kwl-shadow-sm);
	appearance: none;
	transition: box-shadow var(--kwl-transition, 200ms ease),
	            transform var(--kwl-transition, 200ms ease),
	            border-color var(--kwl-transition, 200ms ease);
}

.kw-faq-category-name {
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-fsize-h4, clamp(1rem, 0.95rem + 0.25vw, 1.25rem));
	font-weight: var(--kwl-fw-bold);
	color: var(--kwl-faq-heading-color);
	line-height: var(--kwl-lh-snug);
}

.kw-faq-category-desc {
	font-size: var(--kwl-fsize-small, 0.875rem);
	color: var(--kwl-text-muted, #64748b);
	line-height: var(--kwl-lh-relaxed);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.kw-faq-category-count {
	margin-top: auto;
	padding-top: var(--kwl-space-xs, 0.375rem);
	font-size: var(--kwl-fsize-caption, 0.8125rem);
	font-weight: var(--kwl-fw-semibold);
	color: var(--kwl-faq-accent);
	letter-spacing: var(--kwl-ls-wide);
}

@media (hover: hover) {
	.kw-faq-category-tile:hover {
		transform: translateY(-3px);
		box-shadow: var(--kwl-shadow-lg);
		border-color: color-mix(in srgb, var(--kwl-faq-accent) 40%, var(--kwl-faq-border));
	}
}

.kw-faq-category-tile:active {
	transform: scale(0.98);
}

.kw-faq-category-tile:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

/* V4 Reset: Kachel-Buttons (0,2,1 gegen .elementor-kit-X button) */
.kw-faq .kw-faq-category-tile:hover {
	color: var(--kwl-faq-heading-color);
	background: var(--kwl-faq-bg);
	border-color: color-mix(in srgb, var(--kwl-faq-accent) 40%, var(--kwl-faq-border));
}

.kw-faq .kw-faq-category-tile:focus,
.kw-faq .kw-faq-category-tile:active {
	color: var(--kwl-faq-heading-color);
	background: var(--kwl-faq-bg);
}

/* V4 Reset: Filter-Pills — :not(:hover), damit Hover+Focus-Kombi den Hover-Style behält */
.kw-faq .kw-faq-pill:not(.is-active):focus:not(:hover) {
	color: var(--kwl-faq-pill-color);
	background: var(--kwl-faq-pill-bg);
	border-color: var(--kwl-faq-pill-border);
}

.kw-faq .kw-faq-pill.is-active:focus:not(:hover) {
	color: var(--kwl-faq-pill-active-color);
	background: var(--kwl-faq-pill-active-bg);
	border-color: var(--kwl-faq-pill-active-bg);
}

/* Detail-Phase (Phase 2) */
.kw-faq-detail-header {
	display: flex;
	align-items: center;
	gap: var(--kwl-space-md, 1rem);
	flex-wrap: wrap;
	margin-bottom: var(--kwl-space-sm, 0.5rem);
}

.kw-faq-back-btn {
	align-self: flex-start;
}

.kw-faq-category-active-name {
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-fsize-h3, clamp(1.125rem, 1rem + 0.5vw, 1.5rem));
	font-weight: var(--kwl-fw-bold);
	color: var(--kwl-faq-heading-color);
	line-height: var(--kwl-lh-snug);
}

.kw-faq-category-active-name:empty {
	display: none;
}

/* 15. Dark Mode */
@media (prefers-color-scheme: dark) {
	.kw-faq {
		--kwl-faq-bg: var(--kwl-bg, #1a202c);
		--kwl-faq-border: var(--kwl-border, #4a5568);
		--kwl-faq-accent: var(--kwl-accent, #d4b87a);
		--kwl-faq-heading-color: var(--kwl-text, #f7fafc);
		--kwl-faq-question-color: var(--kwl-text, #f7fafc);
		--kwl-faq-question-bg: var(--kwl-bg, #1a202c);
		--kwl-faq-answer-color: var(--kwl-text, #f7fafc);
		--kwl-faq-answer-bg: color-mix(in srgb, var(--kwl-bg-alt, #2d3748) 80%, transparent);
		--kwl-faq-link-color: var(--kwl-primary, #63b3ed);
		--kwl-faq-chevron-color: var(--kwl-text-muted, #a0aec0);
		--kwl-faq-search-bg: var(--kwl-bg, #1a202c);
		--kwl-faq-search-border: var(--kwl-border, #4a5568);
		--kwl-faq-search-color: var(--kwl-text, #f7fafc);
		--kwl-faq-pill-bg: color-mix(in srgb, var(--kwl-primary, #63b3ed) 12%, var(--kwl-faq-bg));
		--kwl-faq-pill-border: color-mix(in srgb, var(--kwl-primary, #63b3ed) 30%, var(--kwl-border, #4a5568));
		--kwl-faq-pill-color: var(--kwl-text, #f7fafc);
		--kwl-faq-pill-active-bg: var(--kwl-primary, #63b3ed);
		--kwl-faq-pill-active-color: var(--kwl-bg, #1a202c);
		--kwl-faq-icon-color: var(--kwl-faq-accent);
		--kwl-faq-highlight: color-mix(in srgb, var(--kwl-faq-accent) 40%, transparent);
	}

	.kw-faq-item {
		background: var(--kwl-faq-bg);
	}

	.kw-faq-topic-badge {
		background: color-mix(in srgb, var(--kwl-faq-accent) 20%, var(--kwl-faq-bg));
		color: var(--kwl-faq-accent);
	}

	.kw-faq-item[open] {
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25),
		            0 0 0 1px rgba(99, 179, 237, 0.2);
		border-color: color-mix(in srgb, var(--kwl-primary, #63b3ed) 35%, var(--kwl-faq-border));
		border-left-color: var(--kwl-faq-accent);
	}

	.kw-faq-heading[data-kwl-separator="gold"]::after {
		background: linear-gradient(to right, var(--kwl-accent, #d4b87a), color-mix(in srgb, var(--kwl-accent, #d4b87a) 30%, transparent), transparent);
	}

	.kw-faq-feedback-btn[data-vote="yes"]:hover {
		border-color: var(--kwl-success, #48bb78);
		background: color-mix(in srgb, var(--kwl-success, #48bb78) 15%, var(--kwl-faq-bg));
		color: var(--kwl-success, #48bb78);
	}

	.kw-faq-feedback-btn[data-vote="no"]:hover {
		border-color: var(--kwl-error, #fc8181);
		background: color-mix(in srgb, var(--kwl-error, #fc8181) 15%, var(--kwl-faq-bg));
		color: var(--kwl-error, #fc8181);
	}

	.kw-faq-feedback-thanks {
		color: var(--kwl-success, #48bb78);
	}

	.kw-faq-contact-fallback,
	.kw-faq-no-results-cta {
		background: color-mix(in srgb, var(--kwl-faq-accent) 8%, var(--kwl-faq-bg));
	}

	.kw-faq-single__title,
	.kw-faq-single__content,
	.kw-faq-single__related-heading {
		color: var(--kwl-text, #f7fafc);
	}

	.kw-faq-single__related {
		border-top-color: var(--kwl-border, #4a5568);
	}

	.kw-faq-single__related-list li {
		border-bottom-color: var(--kwl-border, #4a5568);
	}

	.kw-faq-single__related-list a {
		--kwl-link-color: var(--kwl-primary, #63b3ed);
	}

	.kw-faq-category-tile {
		background: var(--kwl-faq-bg);
	}

	.kw-faq-category-desc {
		color: var(--kwl-text-muted, #a0aec0);
	}

	.kw-faq-category-active-name {
		color: var(--kwl-text, #f7fafc);
	}
}

@media (hover: hover) and (prefers-color-scheme: dark) {
	.kw-faq-item:hover {
		border-color: color-mix(in srgb, var(--kwl-faq-accent) 20%, var(--kwl-faq-border));
	}

	.kw-faq-summary:hover {
		background: color-mix(in srgb, var(--kwl-bg-alt, #2d3748) 60%, transparent);
	}

	.kw-faq-pill:hover {
		background: color-mix(in srgb, var(--kwl-faq-pill-active-bg) 15%, transparent);
	}

	.kw-faq-contact-link:hover {
		color: color-mix(in srgb, var(--kwl-faq-accent) 75%, #ffffff);
	}

	.kw-faq-category-tile:hover {
		border-color: color-mix(in srgb, var(--kwl-faq-accent) 35%, var(--kwl-faq-border));
	}
}

/* 16. Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	@media (hover: hover) {
		.kw-faq-item:hover {
			transform: none;
		}
	}

	.kw-faq-search-wrap,
	.kw-faq-search,
	.kw-faq-pill,
	.kw-faq-item,
	.kw-faq-summary,
	.kw-faq-chevron,
	.kw-faq-chevron::before,
	.kw-faq-read-more,
	.kw-faq-read-more::before,
	.kw-faq-read-more span,
	.kw-faq-heading,
	.kw-faq-feedback-btn,
	.kw-faq-category-tile {
		transition: none;
	}

	.kw-faq-item[open],
	.kw-faq-pill:active,
	.kw-faq-feedback-btn:active,
	.kw-faq-category-tile:active {
		transform: none;
	}

	@media (hover: hover) {
		.kw-faq-category-tile:hover {
			transform: none;
		}
	}

	@supports (interpolate-size: allow-keywords) {
		.kw-faq-item::details-content {
			transition: none;
		}
	}
}

/* 17. Responsive */
@media (min-width: 768px) {
	.kw-faq-summary {
		padding: var(--kwl-space-md, 1rem) var(--kwl-space-lg, 1.5rem);
	}

	.kw-faq-answer {
		padding: var(--kwl-space-md, 1rem) var(--kwl-space-lg, 1.5rem);
	}
}

/* V4 Pink-Reset: zentral in kwl-shared-components.css via [data-kwl-link] (§281) */