/* ==========================================================================
	Hotel A bis Z Widget — Mobile-First CSS
	Widget #26 | KW Lobby
	Premium: Entrance-Animationen, Buchstaben-Navigation, Scroll-Driven Fades
	========================================================================== */

/* 0. Scroll-Driven Fade-Masken (animierbare Custom Properties)
	Firefox-Fallback: initial-value wird als statischer Wert genutzt
	(rechter Fade permanent sichtbar → zeigt an, dass gescrollt werden kann) */
@property --kwl-abc-fade-left {
	syntax: "<length>";
	inherits: false;
	initial-value: 0;
}

@property --kwl-abc-fade-right {
	syntax: "<length>";
	inherits: false;
	initial-value: 24px;
}

@keyframes kw-abc-scrollfade {
	0% {
		--kwl-abc-fade-left: 0;
		--kwl-abc-fade-right: 1.5rem;
	}
	10% {
		--kwl-abc-fade-left: 1.5rem;
	}
	90% {
		--kwl-abc-fade-right: 1.5rem;
	}
	100% {
		--kwl-abc-fade-left: 1.5rem;
		--kwl-abc-fade-right: 0;
	}
}

/* 1. Custom Properties (Widget-Scope → referenziert --kwl-* Tokens) */
.kw-abc-list {
	/* Container */
	--kwl-abc-bg: var(--kwl-bg, #ffffff);
	--kwl-abc-border: var(--kwl-border, #e2e8f0);
	--kwl-abc-accent: var(--kwl-accent, #BD9B5C);
	--kwl-abc-radius: var(--kwl-radius-lg, 12px);
	--kwl-abc-heading-color: var(--kwl-text, #1a202c);
	--kwl-abc-card-shadow: var(--kwl-shadow-md);
	--kwl-abc-card-shadow-hover: var(--kwl-shadow-hover);

	/* Buchstaben-Nav */
	--kwl-abc-letter-bg: color-mix(in srgb, var(--kwl-primary, #00315d) 6%, transparent);
	--kwl-abc-letter-color: var(--kwl-text-muted, #718096);
	--kwl-abc-letter-active-bg: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 15%, transparent);
	--kwl-abc-letter-active-color: var(--kwl-accent, #BD9B5C);
	--kwl-abc-letter-hover-bg: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 10%, transparent);

	/* Buchstaben-Header */
	--kwl-abc-header-color: var(--kwl-primary, #00315d);
	--kwl-abc-header-line: var(--kwl-border, #e2e8f0);
	--kwl-abc-header-glass: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 5%, var(--kwl-abc-bg));

	/* Einträge */
	--kwl-abc-entry-color: var(--kwl-text, #1a202c);
	--kwl-abc-entry-bg: var(--kwl-bg, #ffffff);
	--kwl-abc-answer-color: var(--kwl-text, #1a202c);
	--kwl-abc-answer-bg: var(--kwl-bg-alt, #f7fafc);
	--kwl-abc-link-color: var(--kwl-primary, #00315d);
	--kwl-abc-chevron-color: var(--kwl-text-muted, #718096);

	/* Suche */
	--kwl-abc-search-bg: var(--kwl-bg, #ffffff);
	--kwl-abc-search-border: var(--kwl-border, #e2e8f0);
	--kwl-abc-search-color: var(--kwl-text, #1a202c);
	--kwl-abc-highlight: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 25%, transparent);
}

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

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

/* 3. Überschrift (mit Gold-Separator wie PriceList) */
.kw-abc-heading {
	margin: 0;
	flex: 1;
	font-size: var(--kwl-fsize-h2, 1.5rem);
	font-family: var(--kwl-font-heading);
	font-weight: var(--kwl-fw-bold);
	color: var(--kwl-abc-heading-color);
	line-height: var(--kwl-lh-snug);
	padding-bottom: var(--kwl-space-sm, 0.5rem);
	--kwl-separator-height: 3px;
}

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

/* 4. Suchfeld (Flex — Icon + Input) */
.kw-abc-search-wrap {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--kwl-abc-search-border);
	border-radius: var(--kwl-abc-radius);
	background: var(--kwl-abc-search-bg);
	overflow: hidden;
	transition: border-color var(--kwl-transition, 200ms ease),
				box-shadow var(--kwl-transition, 200ms ease);
}

.kw-abc-search-wrap:focus-within {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
	border-color: var(--kwl-focus, #7B6835);
}

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

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

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

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

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

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

/* 5. Buchstaben-Navigation (Scroll-Strip Mobil + Wrapping Grid Desktop) */
.kw-abc-letter-nav {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: var(--kwl-space-xs, 0.25rem);
	padding: var(--kwl-space-sm, 0.5rem);
	position: sticky;
	top: 0;
	z-index: 10;
	background-color: color-mix(in srgb, var(--kwl-abc-bg, #ffffff) 92%, transparent);
	border-radius: var(--kwl-abc-radius);
	border: 1px solid color-mix(in srgb, var(--kwl-abc-border) 50%, transparent);
	box-shadow: var(--kwl-shadow-md);
	/* Mobil: Horizontaler Scroll-Strip */
	overflow-x: auto;
	scrollbar-width: none;
	/* Statische Fade-Maske; @property initial-values sind Firefox-Fallback */
	mask: linear-gradient(
		to right,
		transparent,
		#000 var(--kwl-abc-fade-left) calc(100% - var(--kwl-abc-fade-right)),
		transparent
	);
}

/* Scroll-Driven Fade-Animation (Chrome 115+) — Firefox nutzt @property-Initial-Values */
@supports (animation-timeline: scroll()) {
	.kw-abc-letter-nav {
		animation: kw-abc-scrollfade linear;
		animation-timeline: scroll(self x);
	}
}

.kw-abc-letter-nav::-webkit-scrollbar {
	display: none;
}

.kw-abc-letter-nav .kw-abc-letter-btn {
	/* Kompletter Browser-Button-Reset (verhindert native OS-Farben + Theme/Elementor-Overrides) */
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Mobile: Kein Schrumpfen, min 44px Touch-Target (BFSG) */
	flex-shrink: 0;
	min-width: 44px;
	min-height: 44px;
	padding: 0.25rem;
	margin: 0;
	border: none;
	border-radius: var(--kwl-radius-sm, 4px);
	background: none;
	background-color: var(--kwl-abc-letter-bg, color-mix(in srgb, var(--kwl-primary, #00315d) 6%, transparent));
	color: var(--kwl-abc-letter-color, #718096);
	font-size: var(--kwl-fsize-caption, 0.875rem);
	font-weight: var(--kwl-fw-semibold);
	line-height: var(--kwl-lh-none);
	cursor: pointer;
	transition: background-color var(--kwl-transition, 200ms ease),
				color var(--kwl-transition, 200ms ease),
				box-shadow var(--kwl-transition, 200ms ease);
}

/* Active-State für alle Geräte (verhindert Browser-Default-Highlight) */
.kw-abc-letter-nav .kw-abc-letter-btn:active:not(:disabled) {
	background: none;
	background-color: var(--kwl-abc-letter-active-bg, color-mix(in srgb, var(--kwl-accent, #BD9B5C) 15%, transparent));
	color: var(--kwl-abc-letter-active-color, #BD9B5C);
}

/* Hover NUR auf Geräten die echten Hover unterstützen (Maus/Trackpad) */
@media (hover: hover) {
	.kw-abc-letter-nav .kw-abc-letter-btn:hover:not(:disabled) {
		background: none;
		background-color: var(--kwl-abc-letter-hover-bg, rgba(189, 155, 92, 0.1));
		color: var(--kwl-abc-letter-active-color, #BD9B5C);
		transform: scale(1.1);
	}
}

/* Hohe Spezifität + background-color Longhand → schlägt Theme/Elementor button-Resets */
.kw-abc-list .kw-abc-letter-nav .kw-abc-letter-btn.is-active {
	background: none;
	background-color: var(--kwl-abc-letter-active-bg, color-mix(in srgb, var(--kwl-accent, #BD9B5C) 15%, transparent));
	color: var(--kwl-abc-letter-active-color, #BD9B5C);
	box-shadow: 0 1px 4px color-mix(in srgb, var(--kwl-accent, #BD9B5C) 20%, transparent);
	border-bottom: 2px solid var(--kwl-accent, #BD9B5C);
}

/* is-active schlägt auch :hover (Maus ruht auf sticky Nav beim Scrollen) */
@media (hover: hover) {
	.kw-abc-list .kw-abc-letter-nav .kw-abc-letter-btn.is-active:hover {
		background: none;
		background-color: var(--kwl-abc-letter-active-bg, color-mix(in srgb, var(--kwl-accent, #BD9B5C) 15%, transparent));
		color: var(--kwl-abc-letter-active-color, #BD9B5C);
		transform: none;
	}
}

.kw-abc-letter-nav .kw-abc-letter-btn.is-disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

/* V4-Pink-Reset (Sticky-Focus nach Mausklick) — :not(:hover) erhält Hover-Style */
.kw-abc-letter-nav .kw-abc-letter-btn:not(.is-active):focus:not(:hover) {
	outline: none;
	box-shadow: none;
	background: none;
	background-color: var(--kwl-abc-letter-bg, color-mix(in srgb, var(--kwl-primary, #00315d) 6%, transparent));
	color: var(--kwl-abc-letter-color, #718096);
}

.kw-abc-letter-nav .kw-abc-letter-btn.is-active:focus:not(:hover) {
	outline: none;
	box-shadow: none;
	background: none;
	background-color: var(--kwl-abc-letter-active-bg, color-mix(in srgb, var(--kwl-accent, #BD9B5C) 15%, transparent));
	color: var(--kwl-abc-letter-active-color, #BD9B5C);
}

/* Eigener Focus-Ring NUR bei Tastatur-Navigation */
.kw-abc-letter-nav .kw-abc-letter-btn:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

/* 6. Buchstaben-Sektions-Header (WOW-Moment) */
.kw-abc-section {
	scroll-margin-top: 5rem;
}

.kw-abc-letter-header {
	display: flex;
	align-items: center;
	gap: var(--kwl-space-md, 1rem);
	padding: var(--kwl-space-md, 1rem);
	margin-bottom: var(--kwl-space-md, 1rem);
	background:
		linear-gradient(
			135deg,
			color-mix(in srgb, var(--kwl-accent, #BD9B5C) 8%, var(--kwl-abc-bg)),
			color-mix(in srgb, var(--kwl-primary, #00315d) 6%, var(--kwl-abc-bg))
		);
	border-left: 3px solid var(--kwl-accent, #BD9B5C);
	border-radius: 0 var(--kwl-radius-md, 8px) var(--kwl-radius-md, 8px) 0;
	box-shadow: var(--kwl-shadow-md);
}

/* Progressive Enhancement: JS fügt .kw-abc-animated hinzu → Header starten unsichtbar */
.kw-abc-animated .kw-abc-letter-header {
	opacity: 0;
	transform: translateY(16px);
}

.kw-abc-animated .kw-abc-letter-header.is-visible {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 500ms ease, transform 500ms var(--kwl-ease-soft);
}

.kw-abc-letter {
	font-size: clamp(2.5rem, 3vw + 1rem, 4rem);
	font-family: var(--kwl-font-heading);
	font-weight: var(--kwl-fw-extrabold);
	color: var(--kwl-abc-header-color);
	line-height: var(--kwl-lh-none);
	flex-shrink: 0;
	text-shadow: 0 1px 2px color-mix(in srgb, var(--kwl-abc-header-color) 15%, transparent);
}

.kw-abc-letter-line {
	flex: 1;
	height: 3px;
	background: linear-gradient(
		to right,
		var(--kwl-accent, #BD9B5C),
		color-mix(in srgb, var(--kwl-accent, #BD9B5C) 40%, transparent) 40%,
		transparent
	);
	border-radius: 2px;
}

/* 6b. Header + Footer Actions (Überschrift + Print/Download — konsistent mit PriceList) */
.kw-abc-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--kwl-space-sm, 0.5rem);
	flex-wrap: wrap;
}

.kw-abc-actions {
	display: flex;
	gap: var(--kwl-space-xs, 0.375rem);
	flex-shrink: 0;
}

/* Pill-Button (wie kw-pl-print-btn) */
.kw-abc-list .kw-abc-action-btn {
	border-radius: var(--kwl-radius-full, 9999px);
	padding: 0.5rem;
	gap: 0.375rem;
	flex-shrink: 0;
	font-size: var(--kwl-fsize-small, 0.875rem);
}

.kw-abc-list .kw-abc-action-btn svg {
	flex-shrink: 0;
}

@media (min-width: 481px) {
	.kw-abc-list .kw-abc-action-btn {
		padding: 0.5rem 1rem 0.5rem 0.75rem;
	}
}

@media (max-width: 480px) {
	.kw-abc-action-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

/* Footer-Aktionen (wenn keine Überschrift vorhanden) */
.kw-abc-footer-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--kwl-space-xs, 0.375rem);
	padding-top: var(--kwl-space-sm, 0.5rem);
}

/* 6c. Icon im Summary */
.kw-abc-item-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--kwl-abc-accent);
}

.kw-abc-item-icon svg {
	width: 100%;
	height: 100%;
}

/* 7. Akkordeon-Einträge (<details>/<summary>) */
.kw-abc-content {
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-md, 1rem);
}

.kw-abc-section > .kw-abc-item {
	margin-bottom: var(--kwl-space-xs, 0.25rem);
}

.kw-abc-item {
	border: 1px solid var(--kwl-abc-border);
	border-radius: var(--kwl-abc-radius);
	background: var(--kwl-abc-entry-bg);
	overflow: hidden;
	box-shadow: var(--kwl-shadow-sm);
	transition: box-shadow var(--kwl-transition, 200ms ease),
				border-color var(--kwl-transition, 200ms ease),
				transform var(--kwl-transition, 200ms ease);
}

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

.kw-abc-item[open] {
	border-left: 3px solid var(--kwl-accent, #BD9B5C);
	transform: translateY(-1px);
	box-shadow: var(--kwl-shadow-lg);
}

/* Nativen Marker entfernen */
.kw-abc-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-abc-entry-bg);
	cursor: pointer;
	min-height: 44px;
	-webkit-tap-highlight-color: transparent;
	transition: background var(--kwl-transition, 200ms ease);
}

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

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

/* Delegation an :focus-visible (Tastatur-Only-Ring) */
.kw-abc-summary:focus {
	outline: none;
}

/* Eigener Focus-Ring NUR bei Tastatur-Navigation */
.kw-abc-summary:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: -3px;
}

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

.kw-abc-summary:active {
	background: color-mix(in srgb, var(--kwl-bg-alt, #f7fafc) 80%, transparent);
}

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

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

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

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

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

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

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

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

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

.kw-abc-answer p:last-child {
	margin-bottom: 0;
}

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

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

.kw-abc-answer a {
	color: var(--kwl-abc-link-color);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--kwl-transition, 200ms ease);
}

@media (hover: hover) {
	.kw-abc-answer a:hover {
		color: var(--kwl-primary-hover, #1e3a5f);
	}
}

.kw-abc-answer a:active {
	color: var(--kwl-primary-hover, #1e3a5f);
}

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

/* 9b. Image Two-Column Layout */
.kw-abc-answer-grid {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: var(--kwl-space-md, 1rem);
	align-items: start;
}

@media (max-width: 767px) {
	.kw-abc-answer-grid {
		grid-template-columns: 1fr;
	}
}

.kw-abc-image-trigger {
	display: block;
	padding: 0;
	border: none;
	background: none;
	cursor: zoom-in;
	border-radius: var(--kwl-radius-sm, 4px);
	overflow: hidden;
}

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

.kw-abc-img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--kwl-radius-sm, 4px);
}

/* Elementor V4 Hover-Override */
.kw-abc-list .kw-abc-image-trigger:hover,
.kw-abc-list .kw-abc-image-trigger:focus {
	background: transparent;
	color: var(--kwl-abc-accent, #BD9B5C);
	border-color: var(--kwl-abc-accent, #BD9B5C);
}

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

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

/* No Results */
.kw-abc-no-results {
	text-align: center;
	padding: var(--kwl-space-xl, 2rem);
	color: var(--kwl-abc-entry-color);
	font-weight: var(--kwl-fw-medium);
}

/* Visibility utilities */
.kw-abc-list .is-hidden {
	display: none;
}

/* 10. Dark Mode */
@media (prefers-color-scheme: dark) {
	.kw-abc-list {
		--kwl-abc-bg: var(--kwl-bg, #1a202c);
		--kwl-abc-border: var(--kwl-border, #4a5568);
		--kwl-abc-accent: var(--kwl-accent, #d4b87a);
		--kwl-abc-heading-color: var(--kwl-text, #f7fafc);
		--kwl-abc-letter-bg: color-mix(in srgb, var(--kwl-primary, #63b3ed) 12%, transparent);
		--kwl-abc-letter-color: var(--kwl-text-muted, #a0aec0);
		--kwl-abc-letter-active-bg: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 20%, transparent);
		--kwl-abc-letter-hover-bg: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 15%, transparent);
		--kwl-abc-header-color: var(--kwl-primary, #63b3ed);
		--kwl-abc-header-line: var(--kwl-border, #4a5568);
		--kwl-abc-header-glass: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 5%, var(--kwl-abc-bg));
		--kwl-abc-entry-color: var(--kwl-text, #f7fafc);
		--kwl-abc-entry-bg: var(--kwl-bg, #1a202c);
		--kwl-abc-answer-color: var(--kwl-text, #f7fafc);
		--kwl-abc-answer-bg: color-mix(in srgb, var(--kwl-bg-alt, #2d3748) 80%, transparent);
		--kwl-abc-link-color: var(--kwl-primary, #63b3ed);
		--kwl-abc-chevron-color: var(--kwl-text-muted, #a0aec0);
		--kwl-abc-search-bg: var(--kwl-bg, #1a202c);
		--kwl-abc-search-border: var(--kwl-border, #4a5568);
		--kwl-abc-search-color: var(--kwl-text, #f7fafc);
		--kwl-abc-highlight: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 40%, transparent);
	}

	.kw-abc-letter-nav {
		background-color: var(--kwl-abc-bg, #1a202c);
		border-color: color-mix(in srgb, var(--kwl-abc-border) 50%, transparent);
		box-shadow: var(--kwl-shadow-lg);
	}

	.kw-abc-letter-header {
		background:
			linear-gradient(
				135deg,
				color-mix(in srgb, var(--kwl-accent, #BD9B5C) 10%, var(--kwl-abc-bg)),
				color-mix(in srgb, var(--kwl-primary, #63b3ed) 8%, var(--kwl-abc-bg))
			);
		box-shadow: var(--kwl-shadow-lg);
	}

	.kw-abc-letter {
		text-shadow: 0 0 12px color-mix(in srgb, var(--kwl-primary, #63b3ed) 25%, transparent);
	}

	.kw-abc-item[open] {
		box-shadow: var(--kwl-shadow-lg);
		border-color: color-mix(in srgb, var(--kwl-primary, #63b3ed) 40%, var(--kwl-abc-border));
	}

	.kw-abc-list .kw-abc-letter-nav .kw-abc-letter-btn.is-active {
		background: none;
		background-color: var(--kwl-abc-letter-active-bg, rgba(189, 155, 92, 0.2));
		box-shadow: 0 1px 6px color-mix(in srgb, var(--kwl-accent, #BD9B5C) 25%, transparent);
	}

	.kw-abc-letter-line {
		background: linear-gradient(
			to right,
			var(--kwl-accent, #BD9B5C),
			color-mix(in srgb, var(--kwl-accent, #BD9B5C) 30%, transparent) 50%,
			transparent
		);
	}

	.kw-abc-item-icon {
		color: var(--kwl-abc-accent);
	}
}

/* 11. Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	.kw-abc-letter-nav {
		scroll-behavior: auto;
		animation: none;
	}

	.kw-abc-search-wrap,
	.kw-abc-letter-nav .kw-abc-letter-btn,
	.kw-abc-summary,
	.kw-abc-chevron,
	.kw-abc-chevron::before,
	.kw-abc-answer a,
	.kw-abc-action-btn {
		transition: none;
	}

	.kw-abc-item {
		transition: none;
		transform: none;
	}

	@media (hover: hover) {
		.kw-abc-item:hover {
			transform: none;
		}
	}

	.kw-abc-item[open] {
		transform: none;
	}

	.kw-abc-letter-header,
	.kw-abc-animated .kw-abc-letter-header {
		opacity: 1;
		transform: none;
		transition: none;
	}

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

/* 12. Responsive */
@media (min-width: 768px) {
	.kw-abc-list {
		padding: var(--kwl-space-lg, 1.5rem);
	}

	.kw-abc-letter-nav {
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--kwl-space-sm, 0.5rem);
		overflow-x: visible;
		animation: none;
		mask: none;
	}

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

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

	.kw-abc-letter-header {
		padding: var(--kwl-space-md, 1rem) var(--kwl-space-lg, 1.5rem);
	}
}

/* 13. Dark Mode Hover (nur auf Geräten mit echtem Hover) */
@media (hover: hover) and (prefers-color-scheme: dark) {
	.kw-abc-item:hover {
		transform: translateY(-2px);
		box-shadow: var(--kwl-shadow-hover);
	}

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

@media (prefers-color-scheme: dark) {
	.kw-abc-summary:active {
		background: color-mix(in srgb, var(--kwl-bg-alt, #2d3748) 90%, transparent);
	}
}

/* --- Elementor V4 Reset — Spezifität (0,2,1) gegen Pink-Hover --- */

/* V4 Pink-Reset: zentral via [data-kwl-link-scope] auf .kw-abc-answer (§281) */