/* Rhenus Vorteile — Multi-Slide Peek-Karussell (2 auf Desktop, 1 ab Tablet). Scoped .rh-vt, Vanilla. */

.rh-vt {
	--rh-vt-accent: #ffcc01;
	--rh-vt-ink: #1a1a1a;
	--rh-vt-muted: #5f5f63;
	position: relative;
	font-family: inherit;
}
.rh-vt * { box-sizing: border-box; }

/* overflow:hidden = Seiten-Clip + verhindert Seiten-Overflow; Padding = Platz fuer Schatten */
.rh-vt__view { position: relative; overflow: hidden; padding: 46px 0; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.rh-vt__view.is-drag { cursor: grabbing; }
.rh-vt__view img, .rh-vt__view svg { pointer-events: none; }

.rh-vt__track {
	display: flex;
	gap: 22px;
	will-change: transform;
	transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rh-vt__track.no-anim { transition: none; }

.rh-vt__slide { flex: 0 0 42%; }

.rh-vt__card {
	height: 100%;
	min-height: 210px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 16px;
	padding: 26px 28px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	box-shadow: 0 18px 38px -22px rgba(0, 0, 0, 0.2);
}

.rh-vt__ic {
	color: var(--rh-vt-accent);
	font-size: 34px;
	line-height: 1;
	margin-bottom: 14px;
}
.rh-vt__ic svg { width: 1em; height: 1em; fill: currentColor; }
.rh-vt__t { font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--rh-vt-ink); margin: 0 0 8px; }
.rh-vt__x { font-size: 14.5px; line-height: 1.6; color: var(--rh-vt-muted); }

/* Rand-Verlauf (Gradient inline) */
.rh-vt__fade { position: absolute; top: 0; bottom: 0; width: 9%; min-width: 40px; z-index: 3; pointer-events: none; }
.rh-vt__fade--l { left: 0; }
.rh-vt__fade--r { right: 0; }

/* Fortschrittslinie (dezent) */
.rh-vt__prog { position: relative; height: 2px; margin: 14px auto 0; max-width: 88%; border-radius: 2px; background: rgba(0, 0, 0, 0.05); overflow: hidden; }
.rh-vt__bar { position: absolute; left: 0; top: 0; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--rh-vt-accent); opacity: 0.5; border-radius: 2px; }

/* Tablet: 1 Karte + Peek */
@media (max-width: 999px) {
	.rh-vt__slide { flex-basis: 68%; }
}
/* Mobil: 1 Karte, kleiner Peek */
@media (max-width: 600px) {
	.rh-vt__view { padding: 34px 0; }
	.rh-vt__slide { flex-basis: 80%; }
	.rh-vt__fade { width: 6%; min-width: 18px; }
	.rh-vt__card { min-height: 190px; padding: 22px 22px; }
	.rh-vt__t { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.rh-vt__track { transition: none; }
	.rh-vt__prog { display: none; }
}