@layer components {
	
	/* ── Filters ─────────────────────────────────── */

	.filter-list-desktop {
		display: grid;
		grid-template-columns: repeat(4, 1fr);

		width: 100%;

		gap: var(--gap-md);
		align-items: flex-start;
	}

	.filter-sort {
		margin-left: auto;
	}

	.filter-input {
		position: relative;
		display: inline-block;
		width: 100%;
	}

	/* ── Sort row ─────────────────────────────────── */

	.filter-sort-wrapper {
		position: relative;
		display: block;
		margin-left: auto;
	}

	/* ── Trigger ─────────────────────────────────── */

	.filter-input-trigger {
		display: inline-flex;
		align-items: center;
		gap: var(--gap-sm);
		width: 100%;

		padding: var(--padding-2xs) var(--padding-2xs) var(--padding-2xs)
			var(--padding-xs);

		background: var(--filter-input-bg);
		border: var(--border-xs) solid var(--filter-input-border-color);

		cursor: pointer;
		font-size: var(--fs-sm);
		line-height: var(--size-5);
		white-space: nowrap;

		transition: background-color 0.2s ease, border-color 0.2s ease;

		&:focus-visible {
			outline-width: 2px;
			outline-offset: 0;
		}

		&[aria-expanded="true"] svg {
			transform: rotate(180deg);
		}

		svg {
			width: var(--size-6);
			height: var(--size-6);
			flex-shrink: 0;
		}
	}

	.filter-input-label {
		font-weight: var(--font-weight-medium);
	}

	/* ── Count badge ─────────────────────────────── */

	.filter-input-count {
		opacity: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: var(--filter-input-count-size);
		height: var(--filter-input-count-size);
		padding: 0 var(--padding-3xs);

		border-radius: var(--radius-full);
		background: var(--background-black);
		color: var(--text-neutral-inverse);

		font-size: var(--fs-xs);
		font-weight: var(--font-weight-bold);
		line-height: 1;
		margin-left: auto;

		&.is-visible {
			opacity: 1;
		}
	}

	/* ── Desktop Dropdown ────────────────────────── */

	.filter-input-dropdown {
		position: absolute;
		top: calc(100% + var(--size-1));
		left: 0;
		z-index: var(--filter-input-z);
		min-width: 280px;
		background: var(--filter-input-bg);
		border: var(--border-xs) solid var(--filter-input-border-color);

		display: grid;
		grid-template-rows: 1fr;
		transition: grid-template-rows 0.25s ease, opacity 0.2s ease;

		&.is-collapsed {
			grid-template-rows: 0fr;
			opacity: 0;
			pointer-events: none;
		}
	}

	.filter-input-dropdown-inner {
		min-height: 0;
		overflow: hidden;
	}

	.filter-title-dropdown {
		padding: var(--padding-xs) var(--padding-xs) 0;
		font-weight: var(--font-weight-bold);
	}

	/* ── Checkbox list (shared desktop + mobile) ─── */

	.filter-input-list {
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: var(--gap-sm);

		padding: var(--padding-xs) 0;

		max-height: var(--filter-input-dropdown-max-height);
		overflow-y: auto;
	}

	.filter-input-item {
		padding: 0 var(--padding-xs);
	}

	.filter-input-item-label {
		display: flex;
		align-items: center;
		gap: var(--gap-sm);
		cursor: pointer;
		user-select: none;
	}

	/* Hidden native checkbox */
	.filter-input-checkbox {
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
		margin: 0;
		pointer-events: none;
	}

	/* Custom checkbox visual */
	.filter-input-item-check {
		flex-shrink: 0;
		width: var(--size-5);
		height: var(--size-5);
		border: var(--border-xs) solid var(--filter-input-border-color);
		border-radius: var(--radius-xs);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: auto;

		transition: background-color 0.15s ease, border-color 0.15s ease;

		&::after {
			content: "";
			display: block;
			width: 10px;
			height: 6px;
			border-left: 2px solid var(--text-neutral-inverse);
			border-bottom: 2px solid var(--text-neutral-inverse);
			transform: rotate(-45deg) translateY(-1px);
			opacity: 0;
			transition: opacity 0.1s ease;
		}
	}

	.filter-input-checkbox:checked + .filter-input-item-check {
		background: var(--background-black);
		border-color: var(--border-black);

		&::after {
			opacity: 1;
		}
	}

	.filter-input-checkbox:focus-visible + .filter-input-item-check {
		outline: 3px solid var(--border-neutral);
		outline-offset: 2px;
	}

	.filter-input-item-text {
		flex: 1;
		font-size: var(--fs-sm);
		line-height: var(--lh-tighter);
		text-align: left;
	}

	.filter-input-item-tally {
		font-size: var(--fs-sm);
		flex-shrink: 0;
	}

	/* ── Action buttons ──────────────────────────── */

	.filter-input-actions {
		display: flex;
		flex-direction: column;
		gap: var(--gap-sm);
		padding: var(--padding-xs);

		.btn {
			display: block;
			text-align: center;
			width: 100%;
		}
	}

	/* ── Hide mobile ─────────────────────────────────── */

	/* ── Sort Select ─────────────────────────────── */
	/* Natives <select>, gestaltet wie .filter-input-trigger.
	   Browser mit appearance: base-select erhalten zusätzlich
	   die Dropdown-Liste im Stil von .filter-input-dropdown. */

	/* Icons liegen über dem Select (Desktop + Mobile) */
	.filter-sort {
		--filter-sort-icon-space: calc(var(--size-6) + var(--gap-sm));

		position: relative;
		display: inline-flex;
		align-items: center;
	}

	.filter-sort-icon,
	.filter-sort-caret {
		position: absolute;
		top: 50%;
		translate: 0 -50%;
		display: flex;
		pointer-events: none;

		svg {
			width: var(--size-6);
			height: var(--size-6);
			transition: transform 0.2s ease;
		}
	}

	@media (min-width: 992px) {
		.filter-sort-icon {
			left: var(--padding-xs);
		}

		.filter-sort-caret {
			right: var(--padding-2xs);
		}

		.filter-sort-select {
			-webkit-appearance: none;
			appearance: none;
			border-radius: 0;
			padding: var(--padding-2xs)
				calc(var(--padding-2xs) + var(--filter-sort-icon-space))
				var(--padding-2xs)
				calc(var(--padding-xs) + var(--filter-sort-icon-space));

			background: var(--filter-input-bg);
			border: none;

			cursor: pointer;
			font-size: var(--fs-sm);
			font-weight: var(--font-weight-medium);
			line-height: var(--size-5);
			white-space: nowrap;

			&:focus-visible {
				outline-width: 2px;
				outline-offset: 0;
			}
		}

		@supports selector(:open) {
			.filter-sort:has(.filter-sort-select:open) .filter-sort-caret svg {
				transform: rotate(180deg);
			}
		}

		@supports (appearance: base-select) {
			.filter-sort-select,
			.filter-sort-select::picker(select) {
				appearance: base-select;
			}

			.filter-sort-select {
				field-sizing: content;

				&::picker-icon {
					display: none;
				}
			}

			.filter-sort-select::picker(select) {
				position-area: block-end span-inline-start;
				margin-top: var(--size-1);
				min-width: 280px;
				padding: var(--padding-xs) 0;

				background: var(--filter-input-bg);
				border: var(--border-xs) solid var(--filter-input-border-color);
				border-radius: 0;
				box-shadow: none;
				color: inherit;

				transition: opacity 0.2s ease, display 0.2s allow-discrete,
					overlay 0.2s allow-discrete;

				@starting-style {
					opacity: 0;
				}
			}

			.filter-sort-select:not(:open)::picker(select) {
				opacity: 0;
			}

			.filter-sort-select optgroup {
				display: flex;
				flex-direction: column;
				gap: var(--gap-sm);

				padding: 0 var(--padding-xs);
				color: inherit;
				opacity: 1;
			}

			/* Gruppentitel = bisheriger "Sortieren nach"-Titel.
			   <legend> statt label-Attribut, damit kein Browser-Einzug entsteht. */
			.filter-sort-select legend {
				color: inherit;
				padding: 0;
				margin: 0;
				font-size: 1rem;
				font-weight: var(--font-weight-bold);
			}

			.filter-sort-select option {
				display: flex;
				align-items: center;
				gap: var(--gap-sm);
				padding: 0;

				font-size: var(--fs-sm);
				font-weight: var(--font-weight-regular);
				line-height: var(--lh-tighter);
				cursor: pointer;

				&:hover,
				&:focus-visible,
				&:checked {
					background: none;
				}

				&:focus-visible {
					outline: 2px solid currentColor;
					outline-offset: 2px;
				}

				/* Check-Icon rechts wie bisher */
				&::checkmark {
					order: 1;
					margin-left: auto;
					content: "";
					width: var(--size-6);
					height: var(--size-6);
					background: currentColor;
					mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpolyline points='40 144 96 200 224 72' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")
						center / contain no-repeat;
				}
			}
		}
	}

	@media (max-width: 991.999px) {
		.filter-list-desktop {
			display: none;
		}
	}
}