/* ==========================================================================
   Feature Showcase Widget (#35) — Premium 2026
   Strip (alternierend) + Grid (Bento-Magazin) + Cards (3 Varianten-Rhythmus)
   ========================================================================== */

/* 1. Widget-Scope Custom Properties
   ========================================================================== */

.kw-feature-showcase {
	--kwl-fs-card-bg: var(--kwl-bg, #ffffff);
	--kwl-fs-card-border: var(--kwl-border, #e2e8f0);
	--kwl-fs-card-radius: var(--kwl-radius-lg, 12px);
	--kwl-fs-text-color: var(--kwl-text, #1a202c);
	--kwl-fs-title-color: var(--kwl-text, #1a202c);
	--kwl-fs-subtitle-color: var(--kwl-text-muted, #718096);
	--kwl-fs-desc-color: var(--kwl-text-muted, #718096);
	--kwl-fs-accent: var(--kwl-accent, #BD9B5C);
	--kwl-fs-btn-bg: var(--kwl-accent, #BD9B5C);
	--kwl-fs-btn-color: var(--kwl-btn-text, #ffffff);
	--kwl-fs-btn-radius: var(--kwl-radius-md, 8px);
	--kwl-fs-img-ratio: 4 / 3;
	--kwl-fs-img-radius: var(--kwl-radius-md, 8px);
	--kwl-fs-img-overlay: var(--kwl-accent, #BD9B5C);
	--kwl-fs-img-hover-scale: 1.03;
	--kwl-fs-gap: var(--kwl-space-xl, 2rem);
	--kwl-fs-padding: 1.5rem;
	--kwl-fs-badge-bg: var(--kwl-accent, #BD9B5C);
	--kwl-fs-badge-color: var(--kwl-primary, #00315d);
	--kwl-fs-badge-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	--kwl-fs-icon-glow: drop-shadow(0 0 6px rgba(189, 155, 92, 0.35));
	--kwl-fs-hover-ring: 0 0 0 1px rgba(189, 155, 92, 0.15);
	--kwl-fs-card-text-inverse: #ffffff;
	--kwl-fs-card-text-inverse-muted: rgba(255, 255, 255, 0.9);
	--kwl-fs-card-icon-size: 48px;
	--kwl-fs-card-overlay-opacity: 0.55;
	--kwl-fs-thumb-title-color: #ffffff;

	display: flex;
	flex-direction: column;
	gap: var(--kwl-fs-gap);
}

/* 2. Shared Component Bridges
   ========================================================================== */

.kw-feature-showcase [data-kwl-card] {
	--kwl-card-bg: var(--kwl-fs-card-bg);
	--kwl-card-border: var(--kwl-fs-card-border);
	--kwl-card-accent: var(--kwl-fs-accent);
	--kwl-card-radius: var(--kwl-fs-card-radius);
	--kwl-card-lift: -4px;
}

.kw-feature-showcase [data-kwl-icon-circle] {
	--kwl-icon-color: var(--kwl-fs-accent);
	--kwl-icon-size: 44px;
}

/* 3. Strip Layout — Mobile First
   ========================================================================== */

.kw-fs__section {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	align-items: stretch;
	background: var(--kwl-fs-card-bg);
	border-top: 3px solid var(--kwl-fs-accent);
	border-radius: var(--kwl-fs-card-radius);
	box-shadow:
		var(--kwl-shadow-md),
		inset 0 1px 0 rgba(255, 255, 255, 0.15);
	overflow: hidden;
	transition:
		box-shadow 350ms var(--kwl-ease-material),
		transform 350ms var(--kwl-ease-material);
}

/* Subtiler Gold-Glow auf Border-Top */
.kw-fs__section::before {
	content: "";
	position: absolute;
	top: -3px;
	left: 10%;
	right: 10%;
	height: 3px;
	background: linear-gradient(
		to right,
		transparent,
		color-mix(in srgb, var(--kwl-fs-accent) 50%, transparent),
		transparent
	);
	filter: blur(4px);
	z-index: 1;
	pointer-events: none;
}

/* Alternierende Sektionen: subtile Hintergrund-Tönung */
.kw-fs__section:nth-child(even) {
	background: color-mix(in srgb, var(--kwl-fs-accent) 2%, var(--kwl-fs-card-bg));
}

.kw-fs__section--no-image {
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.kw-fs__section {
		grid-template-columns: 55fr 45fr;
	}

	.kw-fs__section--no-image {
		grid-template-columns: 1fr;
	}

	.kw-fs__section:nth-child(even) .kw-fs__image-wrap {
		order: 2;
	}

	.kw-fs__section:nth-child(even) .kw-fs__content {
		order: 1;
	}
}

/* 4. Grid / Bento Layout
   ========================================================================== */

.kw-feature-showcase--grid {
	display: grid;
	grid-template-columns: 1fr;
}

/* Grid-Items: Volle Karten */
.kw-fs__item {
	container-type: inline-size;
	overflow: hidden;
	border-radius: var(--kwl-fs-card-radius);
	display: flex;
	flex-direction: column;
}

/* Tablet+: Hero (3fr) + Side (2fr) nebeneinander */
@media (min-width: 768px) {
	.kw-feature-showcase--grid {
		grid-template-columns: 3fr 2fr;
	}

	.kw-fs__item--hero .kw-fs__title {
		font-size: var(--kwl-fsize-h2, 2rem);
	}
}

/* 4a. Thumbnail-Kacheln (Items 3+)
   ========================================================================== */

.kw-fs__thumbs {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--kwl-space-md, 0.75rem);
}

.kw-fs__thumb {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--kwl-fs-card-radius);
	background: var(--kwl-fs-card-bg);
}

/* Bild füllt die gesamte Kachel */
.kw-fs__thumb-image {
	position: absolute;
	inset: 0;
}

.kw-fs__thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms var(--kwl-ease-material);
}

/* Titel-Overlay am unteren Rand */
.kw-fs__thumb-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--kwl-space-md, 0.75rem);
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.75) 0%,
		rgba(0, 0, 0, 0.35) 60%,
		transparent 100%
	);
	z-index: 1;
}

.kw-fs__thumb-title {
	color: var(--kwl-fs-thumb-title-color);
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-fsize-small, 0.875rem);
	font-weight: var(--kwl-fw-semibold);
	line-height: var(--kwl-lh-snug);
	margin: 0;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Stretched Link — ganzer Thumb klickbar */
.kw-fs__thumb-link {
	--kwl-link-color: var(--kwl-fs-text-color, var(--kwl-text, #1a202c));
	--kwl-link-hover-color: var(--kwl-fs-text-color, var(--kwl-text, #1a202c));
}

.kw-fs__thumb-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.kw-fs__thumb-link:focus-visible {
	outline: none;
}

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

/* Thumb Hover */
@media (hover: hover) {
	.kw-fs__thumb:hover .kw-fs__thumb-img {
		transform: scale(1.08);
	}

	.kw-fs__thumb:hover .kw-fs__thumb-overlay {
		background: linear-gradient(
			to top,
			rgba(0, 0, 0, 0.85) 0%,
			rgba(0, 0, 0, 0.45) 60%,
			rgba(0, 0, 0, 0.1) 100%
		);
	}
}

.kw-fs__thumb:active .kw-fs__thumb-img {
	transform: scale(1.03);
}

/* Thumb Scroll-Reveal */
.kw-feature-showcase[data-animations="true"] .kw-fs__thumb {
	opacity: 0;
	transform: translateY(16px) scale(0.95);
	transition:
		opacity 500ms var(--kwl-ease-entrance),
		transform 500ms var(--kwl-ease-entrance);
	transition-delay: calc(var(--kwl-stagger-index, 0) * 80ms);
}

.kw-feature-showcase[data-animations="true"] .kw-fs__thumbs.is-visible .kw-fs__thumb {
	opacity: 1;
	transform: translateY(0) scale(1);
}

@supports (animation-timeline: view()) {
	.kw-feature-showcase[data-animations="true"] .kw-fs__thumb {
		opacity: unset;
		transform: unset;
		transition: none;
	}
}

/* 5. Image — Overflow Hidden, Aspect-Ratio, Hover Zoom
   ========================================================================== */

.kw-fs__image-wrap {
	position: relative;
	overflow: hidden;
	border-radius: var(--kwl-fs-img-radius);
}

/* Strip: Bild füllt die volle Spalte, kein eigener Radius */
.kw-fs__section .kw-fs__image-wrap {
	border-radius: 0;
}

.kw-fs__image-wrap .kw-fs__image {
	display: block;
	width: 100%;
	aspect-ratio: var(--kwl-fs-img-ratio);
	object-fit: cover;
	transition: transform 600ms var(--kwl-ease-material);
}

/* Cinematic Multi-Stop Gradient Overlay */
.kw-fs__image-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--kwl-fs-img-overlay) 30%, transparent) 0%,
		color-mix(in srgb, var(--kwl-fs-img-overlay) 10%, transparent) 30%,
		transparent 60%
	);
	pointer-events: none;
	transition: opacity 350ms ease;
}

/* 6. Badge — Glassmorphism-Pill
   ========================================================================== */

.kw-fs__badge {
	position: absolute;
	top: var(--kwl-space-sm, 0.5rem);
	right: var(--kwl-space-sm, 0.5rem);
	padding: 0.3rem 0.85rem;
	background: color-mix(in srgb, var(--kwl-fs-badge-bg) 85%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--kwl-fs-badge-color);
	font-size: var(--kwl-fsize-caption, 0.75rem);
	font-weight: var(--kwl-fw-bold);
	line-height: var(--kwl-lh-body);
	letter-spacing: var(--kwl-ls-broad);
	text-transform: uppercase;
	border-radius: var(--kwl-radius-full, 9999px);
	border: 1px solid color-mix(in srgb, var(--kwl-fs-badge-bg) 40%, transparent);
	box-shadow: var(--kwl-fs-badge-shadow);
	z-index: 1;
}

/* 7. Content — Heading, Subtitle, Desc
   ========================================================================== */

.kw-fs__content {
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-sm, 0.5rem);
	padding: var(--kwl-fs-padding);
	flex: 1;
}

/* Strip: Großzügigeres Padding */
.kw-fs__section .kw-fs__content {
	padding: var(--kwl-space-lg, 1.5rem) var(--kwl-space-xl, 2rem);
	justify-content: center;
}

/* Icon-Circle mit Hover-Glow */
.kw-fs__icon {
	margin-block-end: var(--kwl-space-xs, 0.25rem);
	transition: transform 250ms ease, filter 250ms ease;
}

.kw-fs__icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Title */
.kw-fs__title {
	color: var(--kwl-fs-title-color);
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-fsize-h3, 1.5rem);
	line-height: var(--kwl-lh-snug);
	margin: 0;
	overflow-wrap: break-word;
	padding-block-end: var(--kwl-space-sm, 0.5rem);
}

/* Subtitle — kursiv + Letterspacing für Eleganz */
.kw-fs__subtitle {
	color: var(--kwl-fs-subtitle-color);
	font-style: italic;
	font-size: var(--kwl-fsize-body, 1rem);
	line-height: var(--kwl-lh-body);
	letter-spacing: var(--kwl-ls-subtle);
	margin: 0;
}

/* Description — Lesekomfort */
.kw-fs__desc {
	color: var(--kwl-fs-desc-color);
	font-size: var(--kwl-fsize-body, 1rem);
	line-height: var(--kwl-lh-loose);
	margin: 0;
	overflow-wrap: break-word;
	max-width: 60ch;
}

/* Grid: Text-Clamp für kleinere Karten */
.kw-feature-showcase--grid .kw-fs__item:not(.kw-fs__item--hero) .kw-fs__desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* CTA Button (Shared Component — Variante wählbar via Elementor) */
/* Visuelle Styles kommen aus kwl-shared-components.css (0,2,0). */
/* Hier nur die Brücke: Elementor-Controls → CSS Custom Properties. */

/* Gradient: Text dunkel auf Gold */
.kw-feature-showcase [data-kwl-btn="gradient"] {
	--kwl-btn-bg: var(--kwl-fs-btn-bg, var(--kwl-accent, #BD9B5C));
	--kwl-btn-color: var(--kwl-fs-btn-color, var(--kwl-accent-contrast, #00315d));
	--kwl-btn-radius: var(--kwl-fs-btn-radius);
}

/* Outline + Inverted: Text = Button-BG-Farbe (Gold), nicht Gradient-Text (Weiß) */
.kw-feature-showcase [data-kwl-btn="outline"],
.kw-feature-showcase [data-kwl-btn="inverted"] {
	--kwl-btn-bg: var(--kwl-fs-btn-bg, var(--kwl-accent, #BD9B5C));
	--kwl-btn-color: var(--kwl-fs-btn-bg, var(--kwl-accent, #BD9B5C));
	--kwl-btn-radius: var(--kwl-fs-btn-radius);
}

/* Widget-spezifische Layout-Properties */
.kw-fs__cta {
	align-self: flex-start;
	margin-block-start: var(--kwl-space-md, 1rem);
	padding: 0.65rem 1.5rem;
	font-size: var(--kwl-fsize-small, 0.875rem);
}

/* 8. Content Stagger Reveal (Elemente innerhalb einer Sektion)
   ========================================================================== */

.kw-feature-showcase[data-animations="true"] .kw-fs__content > * {
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity 500ms var(--kwl-ease-entrance),
		transform 500ms var(--kwl-ease-entrance);
}

/* Stagger-Delays für Content-Elemente */
.kw-feature-showcase[data-animations="true"] .kw-fs__content > :nth-child(1) { transition-delay: 150ms; }
.kw-feature-showcase[data-animations="true"] .kw-fs__content > :nth-child(2) { transition-delay: 250ms; }
.kw-feature-showcase[data-animations="true"] .kw-fs__content > :nth-child(3) { transition-delay: 350ms; }
.kw-feature-showcase[data-animations="true"] .kw-fs__content > :nth-child(4) { transition-delay: 450ms; }
.kw-feature-showcase[data-animations="true"] .kw-fs__content > :nth-child(5) { transition-delay: 550ms; }

/* Sichtbar wenn Sektion/Item .is-visible hat */
.kw-feature-showcase[data-animations="true"] .is-visible .kw-fs__content > * {
	opacity: 1;
	transform: translateY(0);
}

/* 9. Scroll-Driven Reveal (Sektions-Level) + Parallax
   ========================================================================== */

@keyframes kw-fs-reveal {
	from {
		opacity: 0;
		transform: translateY(32px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes kw-fs-parallax {
	from {
		transform: scale(1.08) translateY(-3%);
	}
	to {
		transform: scale(1.08) translateY(3%);
	}
}

@supports (animation-timeline: view()) {
	.kw-feature-showcase[data-animations="true"] .kw-fs__section,
	.kw-feature-showcase[data-animations="true"] .kw-fs__item {
		animation: kw-fs-reveal linear both;
		animation-timeline: view();
		animation-range: entry 10% entry 75%;
	}

	.kw-feature-showcase--strip[data-animations="true"] .kw-fs__image-wrap .kw-fs__image {
		animation: kw-fs-parallax linear both;
		animation-timeline: view();
		animation-range: entry 0% exit 100%;
	}
}

/* JS IntersectionObserver Fallback (Sektions-Level) */
.kw-feature-showcase[data-animations="true"] .kw-fs__section,
.kw-feature-showcase[data-animations="true"] .kw-fs__item {
	opacity: 0;
	transform: translateY(32px);
	transition:
		opacity 700ms var(--kwl-ease-entrance),
		transform 700ms var(--kwl-ease-entrance);
	transition-delay: calc(var(--kwl-stagger-index, 0) * 100ms);
}

.kw-feature-showcase[data-animations="true"] .kw-fs__section.is-visible,
.kw-feature-showcase[data-animations="true"] .kw-fs__item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Wenn animation-timeline nativ unterstützt wird, Fallback deaktivieren */
@supports (animation-timeline: view()) {
	.kw-feature-showcase[data-animations="true"] .kw-fs__section,
	.kw-feature-showcase[data-animations="true"] .kw-fs__item {
		opacity: unset;
		transform: unset;
		transition: none;
	}

	/* Content-Stagger nur im Fallback-Modus (JS) */
	.kw-feature-showcase[data-animations="true"] .kw-fs__content > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* 10. Stagger-Index (Grid) */
.kw-feature-showcase--grid .kw-fs__item {
	transition-delay: calc(var(--kwl-stagger-index, 0) * 100ms);
}

/* ====================================================================
   10a. CARDS LAYOUT — 3 Varianten im diagonalen Rhythmus
   Light (heller Hintergrund) | Image (Bild+Overlay) | Dark (Primary-BG)
   ==================================================================== */

.kw-feature-showcase--cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--kwl-fs-gap);
}

@media (min-width: 480px) {
	.kw-feature-showcase--cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.kw-feature-showcase--cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Basis-Card — kein overflow: hidden hier, blockiert animation-timeline: view()
   Clipping stattdessen auf Kind-Elemente (.kw-fs__card-bg + .kw-fs__card-inner) */
.kw-fs__card {
	position: relative;
	display: flex;
	flex-direction: column;
	container-type: inline-size;
	border-radius: var(--kwl-fs-card-radius);
	text-align: center;
	transition:
		box-shadow 350ms var(--kwl-ease-material),
		transform 350ms var(--kwl-ease-material);
}

.kw-fs__card-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kwl-space-sm, 0.5rem);
	padding: var(--kwl-space-xl, 2rem) var(--kwl-space-lg, 1.5rem);
	flex: 1;
	overflow: hidden;
	border-radius: inherit;
}

/* Variante 1: Light — heller Hintergrund, dunkler Text */
.kw-fs__card--light {
	background: var(--kwl-fs-card-bg);
	border: 1px solid var(--kwl-fs-card-border);
	box-shadow: var(--kwl-shadow-md);
	--kwl-btn-bg: var(--kwl-primary, #00315d);
	--kwl-btn-color: var(--kwl-fs-card-text-inverse);
	--kwl-btn-radius: var(--kwl-fs-btn-radius);
}

.kw-fs__card--light .kw-fs__card-title {
	color: var(--kwl-primary, #00315d);
}

.kw-fs__card--light .kw-fs__card-desc {
	color: var(--kwl-fs-desc-color);
}

/* SVG-Icons: color steuert fill via currentColor */
.kw-fs__card--light .kw-fs__card-icon {
	color: var(--kwl-primary, #00315d);
}

/* Variante 2: Image — Bild-Hintergrund mit Overlay */
.kw-fs__card--image {
	background: var(--kwl-primary, #00315d);
	box-shadow: var(--kwl-shadow-md);
	--kwl-btn-bg: var(--kwl-fs-card-text-inverse);
	--kwl-btn-color: var(--kwl-fs-card-text-inverse);
	--kwl-btn-hover-color: var(--kwl-primary, #00315d);
	--kwl-btn-radius: var(--kwl-fs-btn-radius);
}

.kw-fs__card-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	border-radius: inherit;
}

/* Spezifitaet (0,3,0) gegen Elementor V4 img-Overrides */
.kw-feature-showcase .kw-fs__card--image .kw-fs__card-bg-img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	transition: transform 600ms var(--kwl-ease-material);
}

/* Primary-Overlay ueber dem Bild — opacity statt color-mix(var()) fuer Zuverlaessigkeit */
.kw-fs__card--image .kw-fs__card-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--kwl-primary, #00315d);
	opacity: var(--kwl-fs-card-overlay-opacity);
	z-index: 1;
}

.kw-fs__card--image .kw-fs__card-title {
	color: var(--kwl-fs-card-text-inverse);
}

.kw-fs__card--image .kw-fs__card-desc {
	color: var(--kwl-fs-card-text-inverse-muted);
}

.kw-fs__card--image .kw-fs__card-icon {
	color: var(--kwl-fs-card-text-inverse);
}

/* Variante 3: Dark — Primary-Hintergrund, weißer Text */
.kw-fs__card--dark {
	background: var(--kwl-primary, #00315d);
	box-shadow: var(--kwl-shadow-md);
	--kwl-btn-bg: var(--kwl-fs-card-text-inverse);
	--kwl-btn-color: var(--kwl-fs-card-text-inverse);
	--kwl-btn-hover-color: var(--kwl-primary, #00315d);
	--kwl-btn-radius: var(--kwl-fs-btn-radius);
}

.kw-fs__card--dark .kw-fs__card-title {
	color: var(--kwl-fs-card-text-inverse);
}

.kw-fs__card--dark .kw-fs__card-desc {
	color: var(--kwl-fs-card-text-inverse-muted);
}

.kw-fs__card--dark .kw-fs__card-icon {
	color: var(--kwl-fs-card-text-inverse);
}

/* Card-Icon (kein data-kwl-icon-circle hier — eigenes Styling) */
.kw-fs__card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--kwl-fs-card-icon-size);
	height: var(--kwl-fs-card-icon-size);
	margin-block-end: var(--kwl-space-xs, 0.25rem);
}

/* Inline-SVG Icons (IconService): SVGs bringen ihre Farb-Attribute selber mit
   (Outline-Icons mit fill="none" stroke="currentColor", Filled mit
   fill="currentColor"). Größe ist der einzige globale Override. */
.kw-fs__card-icon svg {
	width: 100%;
	height: 100%;
}

/* Fallback: Bild-Upload Icons */
.kw-fs__card-icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Card-Title */
.kw-fs__card-title {
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-fsize-h3, 1.5rem);
	font-weight: var(--kwl-fw-bold);
	line-height: var(--kwl-lh-snug);
	margin: 0;
	overflow-wrap: break-word;
}

/* Card-Description */
.kw-fs__card-desc {
	font-size: var(--kwl-fsize-body, 1rem);
	line-height: var(--kwl-lh-prose);
	margin: 0;
	overflow-wrap: break-word;
}

/* Card-CTA — Layout-Overrides (Basis aus data-kwl-btn Shared Component) */
.kw-fs__card-cta {
	align-self: center;
	margin-block-start: auto;
	text-transform: uppercase;
	letter-spacing: var(--kwl-ls-widest);
	font-size: var(--kwl-fsize-small, 0.875rem);
	font-weight: var(--kwl-fw-bold);
}

/* Cards: Scroll-Reveal (IO Fallback) */
.kw-feature-showcase--cards[data-animations="true"] .kw-fs__card {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 600ms var(--kwl-ease-entrance),
		transform 600ms var(--kwl-ease-entrance),
		box-shadow 350ms var(--kwl-ease-material);
	transition-delay: calc(var(--kwl-stagger-index, 0) * 80ms);
}

.kw-feature-showcase--cards[data-animations="true"] .kw-fs__card.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@supports (animation-timeline: view()) {
	.kw-feature-showcase--cards[data-animations="true"] .kw-fs__card {
		animation: kw-fs-reveal linear both;
		animation-timeline: view();
		animation-range: entry 25% entry 100%;
		opacity: unset;
		transform: unset;
		transition:
			box-shadow 350ms var(--kwl-ease-material);
	}
}

/* 11. @media (hover: hover) — Bild-Zoom, Lift, Glow
   ========================================================================== */

@media (hover: hover) {
	/* Bild-Zoom */
	.kw-fs__image-wrap:hover .kw-fs__image {
		transform: scale(var(--kwl-fs-img-hover-scale));
	}

	/* Overlay faded leicht bei Hover — mehr Bild sichtbar */
	.kw-fs__image-wrap:hover::after {
		opacity: 0.6;
	}

	/* Strip: Hover-Lift + Premium Shadow */
	.kw-feature-showcase--strip .kw-fs__section:hover {
		box-shadow:
			var(--kwl-shadow-hover),
			var(--kwl-fs-hover-ring);
		transform: translateY(-3px);
	}

	/* Icon-Circle: Hover-Glow */
	.kw-fs__icon:hover {
		transform: scale(1.08);
		filter: var(--kwl-fs-icon-glow);
	}

	/* Grid: Border-Top Intensivierung bei Hover */
	.kw-feature-showcase--grid .kw-fs__item[data-kwl-card]:hover {
		border-top-color: var(--kwl-fs-accent);
	}

	/* Cards: Hover-Lift */
	.kw-fs__card:hover {
		box-shadow: var(--kwl-shadow-hover);
		transform: translateY(-3px);
	}

	/* Cards Image: Bild-Zoom bei Hover */
	.kw-fs__card--image:hover .kw-fs__card-bg-img {
		transform: scale(1.06);
	}

	/* Cards Dark/Image: Subtiler weißer Tint statt voller Outline-Fuellung */
	.kw-fs__card--dark .kw-fs__card-cta[data-kwl-btn]:hover,
	.kw-fs__card--image .kw-fs__card-cta[data-kwl-btn]:hover {
		background: rgba(255, 255, 255, 0.15);
		color: var(--kwl-fs-card-text-inverse);
		border-color: var(--kwl-fs-card-text-inverse);
	}
}

/* 12. :focus-visible — 3px Focus Ring (BFSG)
   ========================================================================== */

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

/* 13. Dark Mode (Token-Kaskade + Premium)
   ========================================================================== */

@media (prefers-color-scheme: dark) {

	/* Token-Kaskade */
	.kw-feature-showcase {
		--kwl-fs-card-bg: var(--kwl-bg, #1a202c);
		--kwl-fs-card-border: var(--kwl-border, #4a5568);
		--kwl-fs-text-color: var(--kwl-text, #f7fafc);
		--kwl-fs-title-color: var(--kwl-text, #f7fafc);
		--kwl-fs-subtitle-color: var(--kwl-text-muted, #a0aec0);
		--kwl-fs-desc-color: var(--kwl-text-muted, #a0aec0);
		--kwl-fs-badge-bg: rgba(0, 0, 0, 0.6);
		--kwl-fs-badge-color: #ffffff;
		--kwl-fs-badge-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
		--kwl-fs-icon-glow: drop-shadow(0 0 8px rgba(189, 155, 92, 0.4));
		--kwl-fs-hover-ring: 0 0 0 1px rgba(189, 155, 92, 0.2);
	}

	/* Strip: Shadows rgba() im Dark (nie color-mix) */
	.kw-fs__section {
		box-shadow:
			0 2px 8px rgba(0, 0, 0, 0.25),
			inset 0 1px 0 rgba(255, 255, 255, 0.04);
		border-top-color: var(--kwl-fs-accent);
	}

	/* Strip: Gold-Glow dezenter im Dark */
	.kw-fs__section::before {
		filter: blur(6px);
		opacity: 0.5;
	}

	/* Alternierende Sektionen Dark */
	.kw-fs__section:nth-child(even) {
		background: color-mix(in srgb, var(--kwl-fs-accent) 3%, var(--kwl-fs-card-bg));
	}

	/* Strip: Hover Shadow Dark */
	@media (hover: hover) {
		.kw-feature-showcase--strip .kw-fs__section:hover {
			box-shadow:
				0 4px 16px rgba(0, 0, 0, 0.35),
				0 8px 24px rgba(0, 0, 0, 0.2),
				var(--kwl-fs-hover-ring);
		}
	}

	/* Image-Overlay: rgba() statt color-mix() */
	.kw-fs__image-wrap::after {
		background: linear-gradient(
			to top,
			rgba(0, 0, 0, 0.45) 0%,
			rgba(0, 0, 0, 0.15) 30%,
			transparent 60%
		);
	}

	/* Badge: Dark Glassmorphism */
	.kw-fs__badge {
		background: rgba(0, 0, 0, 0.65);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		border-color: rgba(255, 255, 255, 0.08);
		box-shadow: var(--kwl-shadow-md);
	}

	/* Icon-Circle: Dark Background + Border (wie smart-voucher-box) */
	.kw-feature-showcase [data-kwl-icon-circle] {
		background: color-mix(in srgb, var(--kwl-fs-accent) 10%, var(--kwl-bg, #1a202c));
		border-color: color-mix(in srgb, var(--kwl-fs-accent) 18%, var(--kwl-border, #4a5568));
	}

	/* Grid Cards: Dark Shadow Override */
	.kw-feature-showcase--grid .kw-fs__item[data-kwl-card] {
		box-shadow: var(--kwl-shadow-md);
	}

	@media (hover: hover) {
		.kw-feature-showcase--grid .kw-fs__item[data-kwl-card]:hover {
			box-shadow: var(--kwl-shadow-lg);
		}

		/* Icon-Hover Glow: Token überschrieben in Dark-Kaskade oben */
	}

	/* Thumbnails Dark */
	.kw-fs__thumb {
		box-shadow: var(--kwl-shadow-md);
	}

	.kw-fs__thumb-overlay {
		background: linear-gradient(
			to top,
			rgba(0, 0, 0, 0.85) 0%,
			rgba(0, 0, 0, 0.4) 60%,
			transparent 100%
		);
	}

	.kw-fs__thumb:has(.kw-fs__thumb-link:focus-visible) {
		outline-color: var(--kwl-focus, #c9a84c);
	}

	/* Button Dark Shadows */
	.kw-feature-showcase [data-kwl-btn="gradient"] {
		box-shadow:
			0 2px 6px rgba(0, 0, 0, 0.3),
			inset 0 1px 0 rgba(255, 255, 255, 0.1);
	}

	/* Focus heller (konsistent mit allen Widgets) */
	.kw-fs__cta:focus-visible {
		outline-color: var(--kwl-focus, #c9a84c);
	}

	/* Cards Dark Mode */
	.kw-fs__card--light {
		background: var(--kwl-bg-alt, #2d3748);
		border-color: var(--kwl-border, #4a5568);
		border-top: 3px solid var(--kwl-accent, #BD9B5C);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
		--kwl-btn-bg: var(--kwl-accent, #BD9B5C);
		--kwl-btn-color: var(--kwl-accent-contrast, #00315d);
	}

	.kw-fs__card--light .kw-fs__card-title {
		color: var(--kwl-text, #f7fafc);
	}

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

	.kw-fs__card--light .kw-fs__card-icon {
		color: var(--kwl-text, #f7fafc);
	}

	.kw-fs__card--dark {
		background: color-mix(in srgb, var(--kwl-primary, #63b3ed) 12%, var(--kwl-bg, #1a202c));
		border: 1px solid var(--kwl-border, #4a5568);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	}

	.kw-fs__card--image {
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	}

	/* Image-Overlay intensiver im Dark */
	.kw-fs__card--image .kw-fs__card-bg::after {
		background: #000000;
		opacity: 0.75;
	}

	@media (hover: hover) {
		.kw-fs__card:hover {
			box-shadow: var(--kwl-shadow-lg);
		}

		/* Dark/Image Outline-Hover Override — (0,5,0) schlaegt Shared-Component Dark */
		.kw-feature-showcase--cards .kw-fs__card--dark .kw-fs__card-cta[data-kwl-btn]:hover,
		.kw-feature-showcase--cards .kw-fs__card--image .kw-fs__card-cta[data-kwl-btn]:hover {
			background: rgba(255, 255, 255, 0.15);
			color: var(--kwl-fs-card-text-inverse);
			border-color: var(--kwl-fs-card-text-inverse);
		}
	}
}

/* 14. Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.kw-feature-showcase .kw-fs__section,
	.kw-feature-showcase .kw-fs__item {
		animation: none;
		opacity: 1;
		transform: none;
		transition: none;
	}

	.kw-fs__image-wrap .kw-fs__image {
		transition: none;
	}

	.kw-fs__image-wrap::after {
		transition: none;
	}

	.kw-fs__icon {
		transition: none;
	}

	/* Content-Stagger deaktivieren */
	.kw-feature-showcase .kw-fs__content > * {
		opacity: 1;
		transform: none;
		transition: none;
	}

	/* Thumbnails */
	.kw-feature-showcase .kw-fs__thumb {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.kw-fs__thumb-img {
		transition: none;
	}

	/* Cards */
	.kw-feature-showcase .kw-fs__card {
		animation: none;
		opacity: 1;
		transform: none;
		transition: none;
	}

	.kw-fs__card-bg-img {
		transition: none;
	}

	@media (hover: hover) {
		.kw-feature-showcase--strip .kw-fs__section:hover {
			transform: none;
		}

		.kw-fs__icon:hover {
			transform: none;
			filter: none;
		}

		.kw-fs__image-wrap:hover .kw-fs__image,
		.kw-fs__thumb:hover .kw-fs__thumb-img,
		.kw-fs__card--image:hover .kw-fs__card-bg-img {
			transform: none;
		}

		.kw-fs__image-wrap:hover::after {
			opacity: 1;
		}

		.kw-fs__card:hover {
			transform: none;
		}
	}
}

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