.mp-listings-slider{
	position:relative;
	isolation:isolate;
	width:100%;
	--mp-card-width:300px;
	overflow:visible; /* Pfeile duerfen nicht abgeschnitten werden */
}

.mp-slider-viewport{
	overflow-x:auto;
	overflow-y:visible;
	width:100%;
	padding:12px;
	margin:-12px;
	scrollbar-width:none;
}

.mp-slider-viewport::-webkit-scrollbar{
	display:none;
}

.mp-slider-track{
	display:flex;
	flex-wrap:nowrap;
	gap:20px;
	align-items:stretch;
}

.mp-slide{
	flex:0 0 var(--mp-card-width);
	max-width:var(--mp-card-width);
}

/* ============================================================
   SLIDER PFEILE – BUTTON + ICON
   - Keine Hardcodes: Tokens/Color-Mix
   - BFSG: sichtbarer :focus-visible
============================================================ */

.mp-slider-arrow{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	z-index:20;

	width:40px;
	height:40px;
	border-radius:50%;

	/* leicht transparent, aber aus Theme-Tokens abgeleitet */
	background:color-mix(in srgb, var(--bg-main) 92%, transparent);
	border:1px solid color-mix(in srgb, var(--text-main) 18%, transparent);
	box-shadow:var(--shadow-sm);

	cursor:pointer;
	appearance:none;
	-webkit-appearance:none;
}

.mp-slider-arrow:hover{
	background:var(--bg-main);
	box-shadow:var(--shadow-md);
}

.mp-slider-arrow:focus-visible{
	outline:2px solid color-mix(in srgb, var(--brand-primary) 55%, transparent);
	outline-offset:2px;
}

/* Position */
.mp-arrow-prev{ left:10px; }
.mp-arrow-next{ right:10px; }

/* Icon (Chevron) */
.mp-slider-arrow::before{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:10px;
	height:10px;

	/* Token statt #333 */
	border:2px solid var(--text-main);
	border-left:0;
	border-bottom:0;
}

/* Richtung */
.mp-arrow-prev::before{
	transform:translate(-50%, -50%) rotate(225deg);
}

.mp-arrow-next::before{
	transform:translate(-50%, -50%) rotate(45deg);
}

/* per JS toggled */
.mp-slider-arrow.is-hidden{
	display:none;
}