/* ─────────────────────────────────────────────────────────────────
   A11Y NEU: Fokus-Indikator auf dem Trigger
   ───────────────────────────────────────────────────────────────── */
.mM_custom_select .mM_select_selected:focus-visible {
	outline: 3px solid #ffcb00;
	outline-offset: 3px;
	border-radius: 2px;
}

.mM_custom_select .mM_select_selected:focus:not(:focus-visible) {
	outline: none;
}

/* ─────────────────────────────────────────────────────────────────
   A11Y NEU: Fokus-Indikator auf den Options in der Listbox
   ───────────────────────────────────────────────────────────────── */
.mM_custom_select .mM_select_item:focus-visible {
	outline: 3px solid #ffcb00;
	outline-offset: -3px; /* nach innen, da Listbox eigenen Background hat */
	border-radius: 2px;
}

.mM_custom_select .mM_select_item:focus:not(:focus-visible) {
	outline: none;
}

/* ─────────────────────────────────────────────────────────────────
   A11Y NEU: Natives <select> aus dem Layout nehmen, aber
   im Accessibility-Tree belassen (kein display:none).
   Wird per JS auf aria-hidden="true" + tabindex="-1" gesetzt,
   damit es weder visuell noch per Tab erscheint, aber AT-Tools
   wie z.B. Form-Autofill weiterhin zugreifen können.
   ───────────────────────────────────────────────────────────────── */
.mM_custom_select select {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	pointer-events: none;
}

/* ═════════════════════════════════════════════════════════════════
   ORIGINAL – unveränderte Regeln
   ═════════════════════════════════════════════════════════════════ */

.mM_custom_select {
	position: relative;
}

.mM_custom_select .mM_select_selected {
	cursor: pointer;
}

.mM_custom_select .mM_select_items {
	height: 0;
	overflow: hidden;
	overflow-y: scroll;
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 99;
	background: #fff;
	width: 100%;
}

.mM_custom_select .mM_select_item {
	cursor: pointer;
}

.mM_custom_select .mM_select_arrows svg {
	fill: #0d0d0d;
	width: 15px;
	min-width: 15px;
	height: 11px;
	min-height: 11px;
	
}

.mM_custom_select .mM_select_arrows svg,
.mM_custom_select .mM_select_arrows img {
	transition: transform .4s;
}

.mM_select_selected {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.mM_select_selected.mM_select_arrow_active .mM_select_arrows svg,
.mM_select_selected.mM_select_arrow_active .mM_select_arrows img {
	transform: rotate(180deg);
}