/* ==========================================================================
   ActivityList Widget (#29) — Card-Grid / List
   Mobile First | Dark Mode | Reduced Motion | hover:hover | BFSG
   Premium-CSS: Weather-Referenz-Pattern, FaqList-Pill/Search-Pattern
   ========================================================================== */

/* ---------- 1. Custom Properties (Widget-Scope) ---------- */

.kw-activity-list {
	--kwl-al-bg: var(--kwl-activity-list-bg, transparent);
	--kwl-al-border: var(--kwl-activity-list-border, var(--kwl-border, #e2e8f0));
	--kwl-al-radius: var(--kwl-activity-list-radius, var(--kwl-radius-md, 8px));
	--kwl-al-card-bg: var(--kwl-activity-list-card-bg, var(--kwl-bg, #ffffff));
	--kwl-al-card-border: var(--kwl-activity-list-card-border, var(--kwl-border, #e2e8f0));
	--kwl-al-card-radius: var(--kwl-activity-list-card-radius, var(--kwl-radius-md, 8px));
	--kwl-al-heading-color: var(--kwl-activity-list-heading-color, var(--kwl-text, #1a202c));
	--kwl-al-title-color: var(--kwl-activity-list-title-color, var(--kwl-text, #1a202c));
	--kwl-al-desc-color: var(--kwl-activity-list-desc-color, var(--kwl-text, #1a202c));
	--kwl-al-meta-bg: var(--kwl-activity-list-meta-bg, color-mix(in srgb, var(--kwl-accent, #BD9B5C) 12%, var(--kwl-bg, #ffffff)));
	--kwl-al-meta-color: var(--kwl-activity-list-meta-color, var(--kwl-focus, #7B6835));
	--kwl-al-icon-color: var(--kwl-activity-list-icon-color, var(--kwl-accent, #BD9B5C));
	--kwl-al-btn-bg: var(--kwl-activity-list-btn-bg, var(--kwl-primary, #00315d));
	--kwl-al-btn-color: var(--kwl-activity-list-btn-color, var(--kwl-btn-text, #ffffff));
	--kwl-al-btn-bg-hover: var(--kwl-activity-list-btn-bg-hover, var(--kwl-primary-hover, #1e3a5f));
	--kwl-al-search-bg: var(--kwl-activity-list-search-bg, var(--kwl-bg, #ffffff));
	--kwl-al-search-border: var(--kwl-activity-list-search-border, var(--kwl-border, #e2e8f0));
	--kwl-al-highlight: var(--kwl-activity-list-highlight, color-mix(in srgb, var(--kwl-accent, #BD9B5C) 25%, transparent));
	--kwl-al-pill-bg: var(--kwl-activity-list-pill-bg, color-mix(in srgb, var(--kwl-primary, #00315d) 6%, var(--kwl-bg, #ffffff)));
	--kwl-al-pill-border: var(--kwl-activity-list-pill-border, color-mix(in srgb, var(--kwl-primary, #00315d) 18%, var(--kwl-border, #e2e8f0)));
	--kwl-al-pill-active-bg: var(--kwl-activity-list-pill-active-bg, var(--kwl-primary, #00315d));
	--kwl-al-pill-color: var(--kwl-activity-list-pill-color, var(--kwl-text, #1a202c));
	--kwl-al-pill-active-color: var(--kwl-activity-list-pill-active-color, var(--kwl-btn-text, #ffffff));
	--kwl-al-img-ratio: var(--kwl-activity-list-img-ratio, 16 / 9);
	--kwl-al-img-radius: var(--kwl-activity-list-img-radius, var(--kwl-radius-sm, 4px));
	--kwl-al-columns: 1;

	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-md, 1rem);
}

/* ---------- 2. Überschrift ---------- */

.kw-activity-list__heading {
	margin: 0;
	color: var(--kwl-al-heading-color);
	font-family: var(--kwl-font-heading);
}

/* Mehr Luft zwischen Heading-Block (inkl. Subtitle) und erster Toolbar.
   Greift über .kwl-heading-subtitle (Trait-Output) + Folge-Element. */
.kw-activity-list .kwl-heading-subtitle + .kw-activity-list__toolbar,
.kw-activity-list .kwl-heading-subtitle + .kw-activity-list__filters,
.kw-activity-list__heading + .kw-activity-list__toolbar,
.kw-activity-list__heading + .kw-activity-list__filters {
	margin-top: var(--kwl-space-md, 1rem);
}

/* ---------- 3. Toolbar (Search + Counter + Layout-Toggle) ---------- */

.kw-activity-list__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kwl-space-sm, 0.5rem);
}

/* Mobile (§376/§380): Search-Bar volle Breite, Counter+Toggles in zweiter Zeile.
   DOM-Reihenfolge: Search → Counter → Layout-Toggle → Filter-Btn.
   `margin-inline-end: auto` auf Counter pusht Layout-Toggle + Filter-Btn
   an den rechten Rand. Ab Tablet: wieder einreihig. */
@media (max-width: 520px) {
	.kw-activity-list__search-wrap {
		flex: 1 1 100%;
	}

	.kw-activity-list__counter {
		margin-inline-end: auto;
	}
}

/* Entfernungs- und Schwierigkeits-Filter: Label auf Mobile als eigene Zeile
   über die Pills, statt inline — Pills bekommen damit die volle Breite
   und das Label hat seinen eigenen Atemraum (§376). */
@media (max-width: 520px) {
	.kw-activity-list__filters--difficulty,
	.kw-activity-list__filters--distance {
		align-items: stretch;
	}

	.kw-activity-list__filters--difficulty .kw-activity-list__filter-label,
	.kw-activity-list__filters--distance .kw-activity-list__filter-label {
		flex: 1 1 100%;
	}
}

/* ---------- Mobile Filter-Toggle in der Toolbar (§378) ---------- */

/* Filter-Button sitzt in der Toolbar neben dem Layout-Toggle.
   Icon-Only-Button im gleichen Stil wie die Layout-Buttons (44×44 px).
   Auf Desktop ausgeblendet, Filter-Panel immer direkt sichtbar. */
.kw-activity-list__filter-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0.375rem;
	border: 1px solid var(--kwl-al-border);
	border-radius: var(--kwl-al-radius);
	background: var(--kwl-al-search-bg);
	color: var(--kwl-text-muted, #718096);
	cursor: pointer;
	transition: background var(--kwl-transition, 200ms ease),
	            color var(--kwl-transition, 200ms ease),
	            border-color var(--kwl-transition, 200ms ease);
}

.kw-activity-list__filter-btn > svg {
	width: 20px;
	height: 20px;
}

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

/* Active-State wenn Panel geöffnet ist (JS setzt aria-expanded="true").
   Auf Desktop immer true → auf Desktop sieht der Button "aktiv" aus,
   ist dort aber unsichtbar. */
.kw-activity-list__filter-btn[aria-expanded="true"] {
	background: var(--kwl-primary, #00315d);
	color: var(--kwl-btn-text, #ffffff);
	border-color: var(--kwl-primary, #00315d);
}

@media (hover: hover) {
	.kw-activity-list__filter-btn:not([aria-expanded="true"]):hover {
		background: var(--kwl-bg-alt, #f7fafc);
		color: var(--kwl-text, #1a202c);
	}
}

/* V4-Pink-Sticky-Focus-Reset (§371-Pattern) — Elementor V4 Kit-CSS
   überschreibt sonst nach Mausklick den aria-expanded-State mit Pink. */
.kw-activity-list__filter-btn:not([aria-expanded="true"]):focus:not(:hover) {
	background: var(--kwl-al-search-bg);
	color: var(--kwl-text-muted, #718096);
	border-color: var(--kwl-al-border);
}

.kw-activity-list__filter-btn[aria-expanded="true"]:focus:not(:hover) {
	background: var(--kwl-primary, #00315d);
	color: var(--kwl-btn-text, #ffffff);
	border-color: var(--kwl-primary, #00315d);
}

/* Badge mit Filter-Count in der oberen rechten Ecke des Buttons.
   Kompakt als kleine Blase, hebt sich durch Accent-Farbe ab. */
.kw-activity-list__filter-badge {
	position: absolute;
	top: -4px;
	inset-inline-end: -4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border: 2px solid var(--kwl-al-search-bg);
	border-radius: var(--kwl-radius-full, 9999px);
	background: var(--kwl-accent, #BD9B5C);
	color: var(--kwl-btn-text, #ffffff);
	font-size: 11px;
	font-weight: var(--kwl-fw-semibold);
	line-height: 1;
	white-space: nowrap;
}

.kw-activity-list__filter-badge[hidden] {
	display: none;
}

/* Filter-Button ist auf ALLEN Viewports sichtbar — neben dem Layout-Toggle.
   Auf Desktop initial aria-expanded=true (Panel offen), auf Mobile initial
   aria-expanded=false (Panel zu). JS togglet via matchMedia (§380).

   Progressive Enhancement: ohne JS bleibt `hidden` nie gesetzt → Panel
   ist auf allen Viewports sichtbar. Kein leerer Filter-Zustand. */
.kw-activity-list__filter-panel[hidden] {
	display: none;
}

.kw-activity-list__filter-panel {
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-sm, 0.5rem);
}

/* --- Search Bar (FaqList-Pattern: Icon-Sektion + Input) --- */

.kw-activity-list__search-wrap {
	flex: 1 1 200px;
	display: flex;
	align-items: stretch;
	border: 1px solid var(--kwl-al-search-border);
	border-radius: var(--kwl-al-radius);
	background: var(--kwl-al-search-bg);
	overflow: hidden;
	transition: border-color var(--kwl-transition, 200ms ease),
	            box-shadow var(--kwl-transition, 200ms ease);
}

.kw-activity-list__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-activity-list__search-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3rem;
	background: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 8%, var(--kwl-al-search-bg));
	border-right: 1px solid var(--kwl-al-search-border);
	color: var(--kwl-accent, #BD9B5C);
}

.kw-activity-list__search-icon > svg {
	width: 20px;
	height: 20px;
}

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

.kw-activity-list__search:focus-visible {
	outline: none;
}

.kw-activity-list__search::placeholder {
	color: var(--kwl-text-muted, #718096);
	opacity: 1;
}

/* Browser-eigenen Cancel-Button entfernen */
.kw-activity-list__search::-webkit-search-cancel-button,
.kw-activity-list__search::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

/* --- Counter --- */

.kw-activity-list__counter {
	font-size: var(--kwl-fsize-caption, 0.875rem);
	color: inherit;
	opacity: 0.7;
	font-weight: var(--kwl-fw-medium);
	white-space: nowrap;
}

/* --- Layout Toggle --- */

.kw-activity-list__layout-toggle {
	display: flex;
	gap: 2px;
	border: 1px solid var(--kwl-al-border);
	border-radius: var(--kwl-al-radius);
	overflow: hidden;
}

.kw-activity-list__layout-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0.375rem;
	border: none;
	background: var(--kwl-bg, #ffffff);
	color: var(--kwl-text-muted, #718096);
	cursor: pointer;
	transition: background var(--kwl-transition, 200ms ease),
	            color var(--kwl-transition, 200ms ease);
}

.kw-activity-list__layout-btn.is-active {
	background: var(--kwl-primary, #00315d);
	color: var(--kwl-btn-text, #ffffff);
}

.kw-activity-list__layout-btn:active {
	opacity: 0.8;
}

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

.kw-activity-list__layout-btn:not(.is-active):focus:not(:hover) {
	background: var(--kwl-bg, #ffffff);
	color: var(--kwl-text-muted, #718096);
}

.kw-activity-list__layout-btn.is-active:focus:not(:hover) {
	background: var(--kwl-primary, #00315d);
	color: var(--kwl-btn-text, #ffffff);
}

/* ---------- 4. Filter-Pills (Premium — FaqList-Pattern) ---------- */

.kw-activity-list__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kwl-space-sm, 0.5rem);
	align-items: center;
}

.kw-activity-list__filters + .kw-activity-list__filters {
	margin-top: var(--kwl-space-xs, 0.25rem);
}

.kw-activity-list__filter-label {
	font-size: var(--kwl-fsize-caption, 0.75rem);
	font-weight: var(--kwl-fw-semibold, 600);
	color: var(--kwl-text-muted, #64748b);
	text-transform: uppercase;
	letter-spacing: var(--kwl-ls-wide, 0.04em);
	white-space: nowrap;
}

.kw-activity-list__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem 0.875rem;
	min-height: 44px;
	min-width: 44px;
	border: 1px solid var(--kwl-al-pill-border);
	border-radius: var(--kwl-radius-full, 9999px);
	background: var(--kwl-al-pill-bg);
	color: var(--kwl-al-pill-color);
	font-size: var(--kwl-fsize-caption, 0.875rem);
	font-weight: var(--kwl-fw-medium);
	letter-spacing: var(--kwl-ls-subtle);
	line-height: 1.2;
	font-family: var(--kwl-font-body);
	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-activity-list__pill.is-active {
	background: var(--kwl-al-pill-active-bg);
	color: var(--kwl-al-pill-active-color);
	border-color: var(--kwl-al-pill-active-bg);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--kwl-al-pill-active-bg) 22%, transparent);
}

.kw-activity-list__pill:active {
	transform: scale(0.95);
}

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

.kw-activity-list__pill.is-active:focus-visible {
	outline-color: var(--kwl-accent, #BD9B5C);
}

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

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

/* ---------- Unterkategorien-Pills (§373) ---------- */

.kw-activity-list__filters--sub {
	padding-left: var(--kwl-space-md, 1rem);
	border-left: 2px solid color-mix(in srgb, var(--kwl-al-pill-active-bg) 25%, transparent);
}

.kw-activity-list__filters--sub[hidden] {
	display: none;
}

.kw-activity-list__pill--sub {
	padding: 0.375rem 1rem;
	font-size: var(--kwl-fsize-small, 0.8125rem);
	font-weight: var(--kwl-fw-regular, 400);
	border-width: 1px;
	background: transparent;
	color: var(--kwl-text-muted, #64748b);
	border-color: color-mix(in srgb, var(--kwl-al-pill-border) 70%, transparent);
}

.kw-activity-list__pill--sub[hidden] {
	display: none;
}

.kw-activity-list__pill--sub.is-active {
	background: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 16%, transparent);
	color: var(--kwl-accent, #BD9B5C);
	border-color: var(--kwl-accent, #BD9B5C);
	box-shadow: none;
}

.kw-activity-list__pill--sub:not(.is-active):focus:not(:hover) {
	background: transparent;
	color: var(--kwl-text-muted, #64748b);
	border-color: color-mix(in srgb, var(--kwl-al-pill-border) 70%, transparent);
}

.kw-activity-list__pill--sub.is-active:focus:not(:hover) {
	background: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 16%, transparent);
	color: var(--kwl-accent, #BD9B5C);
	border-color: var(--kwl-accent, #BD9B5C);
}

.kw-activity-list__pill--sub.is-active:focus-visible {
	outline-color: var(--kwl-accent, #BD9B5C);
}

@media (hover: hover) {
	.kw-activity-list__pill:not(.is-active):hover {
		background: color-mix(in srgb, var(--kwl-al-pill-active-bg) 8%, transparent);
		border-color: color-mix(in srgb, var(--kwl-al-pill-active-bg) 50%, transparent);
		color: var(--kwl-al-pill-active-bg);
		box-shadow: 0 2px 8px color-mix(in srgb, var(--kwl-al-pill-active-bg) 12%, transparent);
	}

	.kw-activity-list__pill.is-active:hover {
		box-shadow: 0 4px 16px color-mix(in srgb, var(--kwl-al-pill-active-bg) 40%, transparent);
	}

	.kw-activity-list__pill--sub:not(.is-active):hover {
		background: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 8%, transparent);
		border-color: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 40%, transparent);
		color: var(--kwl-accent, #BD9B5C);
		box-shadow: none;
	}

	.kw-activity-list__layout-btn:not(.is-active):hover {
		background: var(--kwl-bg-alt, #f7fafc);
		color: var(--kwl-text, #1a202c);
	}
}

/* ---------- 5. Items Grid ---------- */

.kw-activity-list__items {
	display: grid;
	grid-template-columns: repeat(var(--kwl-al-columns, 1), 1fr);
	gap: var(--kwl-space-lg, 1.5rem);
}

/* ---------- 6. Card (Shared [data-kwl-card]) ---------- */

/* --- Card Bridge: Widget → Shared [data-kwl-card] --- */
.kw-activity-list [data-kwl-card] {
	--kwl-card-bg: var(--kwl-bg, #ffffff);
}

.kw-activity-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* --- Card: Image --- */

.kw-activity-card__image-wrap {
	position: relative;
	overflow: hidden;
}

.kw-activity-card__image {
	display: block;
	width: 100%;
	aspect-ratio: var(--kwl-al-img-ratio, 16 / 9);
	object-fit: cover;
}

.kw-activity-card__badge {
	position: absolute;
	bottom: var(--kwl-space-sm, 0.5rem);
	inset-inline-start: var(--kwl-space-sm, 0.5rem);
	padding: 0.25rem 0.75rem;
	border-radius: var(--kwl-radius-sm, 4px);
	background: var(--kwl-primary, #00315d);
	color: var(--kwl-btn-text, #ffffff);
	font-size: var(--kwl-fsize-caption, 0.875rem);
	font-weight: var(--kwl-fw-semibold);
	white-space: nowrap;
	backdrop-filter: blur(4px);
	border: 1px solid color-mix(in srgb, var(--kwl-primary, #00315d) 70%, transparent);
}

/* Fallback-Pfad: Card ohne Bild. Ohne position: relative hier würde das
   absolut positionierte `.__badge` auf den nächsten position-relative-
   Ancestor zurückfallen (Elementor-Widget-Wrapper) und irgendwo am
   unteren Rand des Widgets landen (§379). Stattdessen: Badge im Fluss
   statt absolut, Container ohne extra-Padding. */
.kw-activity-card__badge-only {
	padding: var(--kwl-space-sm, 0.5rem) var(--kwl-space-md, 1rem) 0;
}

.kw-activity-card__badge-only .kw-activity-card__badge {
	position: static;
}

/* --- Card: Content --- */

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

.kw-activity-card__title {
	margin: 0;
	font-size: var(--kwl-fsize-h4, 1.125rem);
	font-family: var(--kwl-font-heading);
	font-weight: var(--kwl-fw-bold);
	line-height: var(--kwl-lh-snug);
}

.kw-activity-card__title a {
	--kwl-link-color: var(--kwl-al-title-color);
	--kwl-link-hover-color: var(--kwl-primary, #00315d);
}

.kw-activity-card__title a:active {
	opacity: 0.8;
}

.kw-activity-card__title a:focus-visible {
	border-radius: 2px;
}


.kw-activity-card__desc {
	margin: 0;
	color: var(--kwl-al-desc-color);
	font-size: var(--kwl-fsize-body, 1rem);
	line-height: var(--kwl-lh-prose);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Card: Meta-Chips (Accent-Tinted — FAQ-Topic-Badge-Pattern) --- */

.kw-activity-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kwl-space-xs, 0.25rem);
	margin-top: auto;
}

.kw-activity-card__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.625rem;
	border-radius: var(--kwl-radius-full, 9999px);
	background: var(--kwl-al-meta-bg);
	color: var(--kwl-al-meta-color);
	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-accent, #BD9B5C) 20%, transparent);
}

.kw-activity-card__chip > svg {
	width: 14px;
	height: 14px;
	color: var(--kwl-al-icon-color);
}

/* --- Card: 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-activity-list [data-kwl-btn="gradient"] {
	--kwl-btn-bg: var(--kwl-al-btn-bg, var(--kwl-accent, #BD9B5C));
	--kwl-btn-color: var(--kwl-al-btn-color, var(--kwl-accent-contrast, #00315d));
}

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

/* Widget-spezifische Layout-Properties */
.kw-activity-card__btn {
	padding: 0.625rem 1.25rem;
	margin-top: auto;
	min-height: 44px;
}

/* ---------- 7. List Layout ---------- */

.kw-activity-list.is-list .kw-activity-list__items {
	grid-template-columns: 1fr;
}

/* Mobile-First: Vertikal stapeln als Basis, ab 480px horizontales Listen-Layout */
.kw-activity-list.is-list .kw-activity-card {
	flex-direction: column;
	max-height: none;
	overflow: hidden;
}

.kw-activity-list.is-list .kw-activity-card__image-wrap {
	flex: none;
	max-width: 100%;
}

.kw-activity-list.is-list .kw-activity-card__image {
	width: 100%;
	height: 100%;
	/* Mobile-First: Seitenverhältnis auf Mobilgeräten, ab 480px auto (volle Höhe der Card) */
	aspect-ratio: var(--kwl-al-img-ratio, 16 / 9);
	object-fit: cover;
}

.kw-activity-list.is-list .kw-activity-card__content {
	flex: 1;
	min-width: 0;
	justify-content: center;
	padding: var(--kwl-space-sm, 0.5rem) var(--kwl-space-md, 1rem);
}

.kw-activity-list.is-list .kw-activity-card__desc {
	-webkit-line-clamp: 2;
}

.kw-activity-list.is-list .kw-activity-card__meta {
	margin-top: 0;
}

.kw-activity-list.is-list .kw-activity-card__btn {
	margin-top: 0;
	align-self: flex-start;
	padding: 0.375rem 1rem;
	min-height: 44px;
	font-size: var(--kwl-fsize-caption, 0.875rem);
}

/* Mobile-First: Ab 480px horizontales Listen-Layout.
   Bild-Wrap streckt sich auf Card-Höhe (align-self: stretch), Card-Höhe wird
   vom Text-Content bestimmt (nicht vom Bild-Intrinsic). Bild absolut-positioniert
   innerhalb des Wraps — sonst zieht die natürliche Bildhöhe die Card in die Länge
   (§376 → Hotfix in v5.14.1). min-height sichert ein vernünftiges Minimum
   wenn der Text-Content kurz ist. */
@media (min-width: 480px) {
	.kw-activity-list.is-list .kw-activity-card {
		flex-direction: row;
		align-items: stretch;
	}

	.kw-activity-list.is-list .kw-activity-card__image-wrap {
		flex: 0 0 240px;
		max-width: 240px;
		position: relative;
		min-height: 180px;
	}

	.kw-activity-list.is-list .kw-activity-card__image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
	}
}

/* ---------- 8. Highlight ---------- */

.kw-activity-list .kw-al-highlight {
	background: var(--kwl-al-highlight);
	border-radius: 2px;
	padding: 0 2px;
}

/* ---------- 9. No Results ---------- */

.kw-activity-list__no-results {
	text-align: center;
	padding: var(--kwl-space-xl, 2rem);
	color: var(--kwl-text-muted, #718096);
	font-weight: var(--kwl-fw-medium);
}

/* ---------- 10. Hidden Utility ---------- */

.kw-activity-list .is-hidden {
	display: none;
}

/* ---------- 11. Dark Mode ---------- */

@media (prefers-color-scheme: dark) {
	.kw-activity-card__badge {
		background: var(--kwl-accent, #BD9B5C);
		color: var(--kwl-bg, #1a202c);
		border-color: transparent;
	}

	.kw-activity-card__chip {
		border-color: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 30%, transparent);
	}

	.kw-activity-list__layout-btn {
		background: var(--kwl-bg-alt, #2d3748);
	}

	.kw-activity-list__layout-btn:not(.is-active):focus:not(:hover) {
		background: var(--kwl-bg-alt, #2d3748);
		color: var(--kwl-text-muted, #718096);
	}

	.kw-activity-list__filter-btn:not([aria-expanded="true"]) {
		background: var(--kwl-bg-alt, #2d3748);
		border-color: var(--kwl-border, #4a5568);
	}

	.kw-activity-list__filter-btn:not([aria-expanded="true"]):focus:not(:hover) {
		background: var(--kwl-bg-alt, #2d3748);
		color: var(--kwl-text-muted, #a0aec0);
		border-color: var(--kwl-border, #4a5568);
	}

	.kw-activity-list__search-wrap {
		background: var(--kwl-bg-alt, #2d3748);
		border-color: var(--kwl-border, #4a5568);
	}

	.kw-activity-list__search-icon {
		background: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 12%, var(--kwl-bg-alt, #2d3748));
		border-right-color: var(--kwl-border, #4a5568);
	}

	.kw-activity-list__search {
		color: var(--kwl-text, #f7fafc);
	}

	.kw-activity-list__filters--sub {
		border-left-color: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 35%, transparent);
	}

	.kw-activity-list__pill--sub {
		color: var(--kwl-text-muted, #a0aec0);
		border-color: color-mix(in srgb, var(--kwl-border, #4a5568) 70%, transparent);
	}

	.kw-activity-list__pill--sub:not(.is-active):focus:not(:hover) {
		color: var(--kwl-text-muted, #a0aec0);
		border-color: color-mix(in srgb, var(--kwl-border, #4a5568) 70%, transparent);
	}

}

/* ---------- 12. Reduced Motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.kw-activity-card__title a,
	.kw-activity-list__pill,
	.kw-activity-list__search-wrap,
	.kw-activity-list__layout-btn {
		transition: none;
	}

	.kw-activity-list__pill:active {
		transform: none;
	}
}

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