/* ==========================================================================
   MW Elementor Widgets – Video-Kundenstimmen
   Übernahme der Shopify-Section "Vitalove Kundenstimmen" (testimonial-motion).
   Einstellbare Werte kommen als CSS-Variablen aus Elementor:
   --vt-bg --vt-text --vt-accent --vt-button --vt-button-text
   --vt-play-bg --vt-play-color --vt-play-size --vt-max-width --vt-min-image --vt-clamp
   Kartenfarben (Karten-Galerie): --vt-card-1 … --vt-card-4, wechseln der Reihe nach
   ========================================================================== */

.mw-vt {
	--vt-bg: #F7F4EC;
	--vt-text: #17382C;
	--vt-accent: #5B8D64;
	--vt-button: #17382C;
	--vt-button-text: #FFFFFF;
	--vt-button-hover: color-mix(in srgb, var(--vt-button) 88%, var(--vt-button-text));
	--vt-play-bg: rgba(255, 255, 255, .92);
	--vt-play-color: var(--vt-text);
	--vt-play-size: 58px;
	--vt-max-width: 1450px;
	--vt-min-image: 45%;
	--vt-clamp: 4;
	--vt-card-1: #DDE8D5;
	--vt-ease: cubic-bezier(.22, 1, .36, 1);

	position: relative;
	width: 100%;
	max-width: var(--vt-max-width);
	margin-inline: auto;
	overflow: hidden;
	color: var(--vt-text);
}
.mw-vt * { box-sizing: border-box; }

.mw-vt__gallery {
	position: relative;
	display: block;
	padding-top: 40px;
	padding-bottom: 10px;
	container-type: inline-size;
}

/* --------------------------------------------------------------------------
   Buttons gegen Theme-Styles absichern (Hello & Co. färben <button> ein)
   -------------------------------------------------------------------------- */
.mw-vt .mw-vt__control,
.mw-vt .mw-vt__control:hover,
.mw-vt .mw-vt__control:focus,
.mw-vt .mw-vt__select,
.mw-vt .mw-vt__select:hover,
.mw-vt .mw-vt__select:focus,
.mw-vt .mw-vt__play,
.mw-vt .mw-vt__play:hover,
.mw-vt .mw-vt__play:focus {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	min-height: 0;
	font: inherit;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   Steuerung
   -------------------------------------------------------------------------- */
.mw-vt__controls {
	position: relative;
	z-index: 20;
	display: flex;
	gap: 12px;
	justify-content: center;
	height: 48px;
}
.mw-vt .mw-vt__control {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	color: var(--vt-text);
	cursor: pointer;
	background: color-mix(in srgb, var(--vt-bg) 92%, transparent);
	border: 1px solid color-mix(in srgb, var(--vt-text) 10%, transparent);
	border-radius: 50%;
	box-shadow: 0 8px 24px color-mix(in srgb, var(--vt-text) 8%, transparent);
	transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}
.mw-vt .mw-vt__control:hover {
	color: var(--vt-button-text);
	background: var(--vt-button-hover);
	transform: translateY(-2px);
}
.mw-vt__control svg {
	width: 22px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
}
.mw-vt .mw-vt__control:focus-visible,
.mw-vt .mw-vt__select:focus-visible,
.mw-vt .mw-vt__play:focus-visible,
.mw-vt .mw-vt__button:focus-visible {
	outline: 3px solid var(--vt-accent);
	outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Bühne und Karten
   -------------------------------------------------------------------------- */
.mw-vt__stage {
	position: relative;
	height: clamp(360px, 36cqi, 545px);
	margin: -48px auto 0;
	touch-action: pan-y;
}
.mw-vt__person {
	--card-left: 50%;
	--card-top: clamp(120px, 9vw, 138px);
	position: absolute;
	top: var(--card-top);
	left: var(--card-left);
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: clamp(80px, 8.3cqi, 133px);
	height: clamp(101px, 10.5cqi, 168px);
	overflow: visible;
	color: var(--vt-text);
	background: var(--vt-card, var(--vt-card-1));
	border: 0 solid var(--vt-bg);
	border-radius: clamp(13px, 1.3cqi, 21px);
	box-shadow: 0 14px 35px color-mix(in srgb, var(--vt-text) 10%, transparent);
	transform: translateX(-50%);
	transform-origin: center;
	transition:
		top 720ms var(--vt-ease),
		left 720ms var(--vt-ease),
		width 720ms var(--vt-ease),
		height 720ms var(--vt-ease),
		border-width 480ms ease,
		border-radius 720ms var(--vt-ease),
		opacity 300ms ease,
		box-shadow 720ms ease;
	will-change: top, left, width, height;
}
.mw-vt__person[data-slot="-6"] { --card-left: 9.85%;  --card-top: -1.9cqi; }
.mw-vt__person[data-slot="-5"] { --card-left: 9.85%;  --card-top: 9.45cqi; }
.mw-vt__person[data-slot="-4"] { --card-left: 19%;    --card-top: 2.1cqi; }
.mw-vt__person[data-slot="-3"] { --card-left: 19%;    --card-top: 13.45cqi; }
.mw-vt__person[data-slot="-2"] { --card-left: 28.15%; --card-top: 7.9cqi; }
.mw-vt__person[data-slot="-1"] { --card-left: 37.3%;  --card-top: 12.5cqi; }
.mw-vt__person[data-slot="1"]  { --card-left: 62.7%;  --card-top: 12.5cqi; }
.mw-vt__person[data-slot="2"]  { --card-left: 71.85%; --card-top: 7.9cqi; }
.mw-vt__person[data-slot="3"]  { --card-left: 81%;    --card-top: 13.45cqi; }
.mw-vt__person[data-slot="4"]  { --card-left: 81%;    --card-top: 2.1cqi; }
.mw-vt__person[data-slot="5"]  { --card-left: 90.15%; --card-top: 9.45cqi; }
.mw-vt__person[data-slot="6"]  { --card-left: 90.15%; --card-top: -1.9cqi; }

.mw-vt__person:nth-child(4n+2) { --vt-card: var(--vt-card-2, var(--vt-card-1)); }
.mw-vt__person:nth-child(4n+3) { --vt-card: var(--vt-card-3, var(--vt-card-1)); }
.mw-vt__person:nth-child(4n+4) { --vt-card: var(--vt-card-4, var(--vt-card-1)); }

.mw-vt__person.is-active {
	--card-left: 50%;
	--card-top: 6.5cqi;
	z-index: 15;
	width: clamp(186px, 18cqi, 272px);
	height: clamp(300px, 28cqi, 430px);
	border-width: clamp(5px, .6cqi, 9px);
	border-radius: clamp(19px, 2.1cqi, 34px);
	box-shadow: 0 24px 54px color-mix(in srgb, var(--vt-text) 20%, transparent);
}
.mw-vt__person.is-outside {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}
.mw-vt__person.is-no-transition,
.mw-vt__person.is-no-transition * { transition: none !important; }

.mw-vt .mw-vt__select {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	cursor: pointer;
	background: transparent;
	border: 0;
	border-radius: inherit;
}
.mw-vt__person.is-active .mw-vt__select { pointer-events: none; }

/* --------------------------------------------------------------------------
   Vorschaubild
   -------------------------------------------------------------------------- */
.mw-vt__portrait {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	min-height: 0;
	overflow: hidden;
	border-radius: inherit;
	transition: border-radius 720ms ease;
}
.mw-vt__person.is-active .mw-vt__portrait {
	height: auto;
	min-height: var(--vt-min-image);
	border-radius: clamp(13px, 1.4cqi, 22px) clamp(13px, 1.4cqi, 22px) 8px 8px;
}
.mw-vt .mw-vt__portrait img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	/* Köpfe nicht abschneiden: Ausschnitt eher oben ansetzen */
	object-position: center 22%;
	border-radius: 0;
}
.mw-vt__placeholder {
	display: grid;
	width: 100%;
	height: 100%;
	opacity: .35;
	place-items: end center;
}
.mw-vt__placeholder svg {
	width: 90%;
	fill: color-mix(in srgb, var(--vt-text) 65%, transparent);
}

/* Play-Button: deckt das ganze Bild ab, nur auf der aktiven Karte klickbar */
.mw-vt .mw-vt__play {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--vt-play-color);
	cursor: pointer;
	background: transparent;
	border: 0;
	border-radius: 0;
	pointer-events: none;
}
.mw-vt__person.is-active .mw-vt__play { pointer-events: auto; }

.mw-vt__play-icon {
	display: grid;
	place-items: center;
	width: var(--vt-play-size);
	height: var(--vt-play-size);
	background: linear-gradient(135deg, var(--vt-play-bg), var(--vt-play-bg-2, var(--vt-play-bg)));
	border-radius: 50%;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
	transform: scale(.5);
	opacity: .9;
	transition: transform 420ms var(--vt-ease), opacity 220ms ease;
}
.mw-vt__play-icon svg {
	width: 42%;
	height: 42%;
	margin-left: 6%;
	fill: currentColor;
}
.mw-vt__person.is-active .mw-vt__play-icon {
	transform: scale(1);
	opacity: 1;
	transition-delay: 200ms;
}
.mw-vt__person.is-active .mw-vt__play:hover .mw-vt__play-icon { transform: scale(1.08); transition-delay: 0ms; }

.mw-vt__duration {
	position: absolute;
	left: 10px;
	bottom: 10px;
	padding: 4px 8px;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .02em;
	background: rgba(0, 0, 0, .55);
	border-radius: 99px;
	opacity: 0;
	transition: opacity 220ms ease;
}
.mw-vt__person.is-active .mw-vt__duration { opacity: 1; transition-delay: 300ms; }

.mw-vt__notice {
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 8px;
	z-index: 6;
	padding: 6px 8px;
	color: #7a1c1c;
	font-size: 11px;
	line-height: 1.3;
	text-align: center;
	background: #fde8e8;
	border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Text der aktiven Karte
   -------------------------------------------------------------------------- */
.mw-vt__info { display: none; }
.mw-vt__person.is-active .mw-vt__info {
	position: relative;
	z-index: 4;
	display: grid;
	flex: 0 0 auto;
	gap: 2px;
	padding: clamp(9px, .8cqi, 13px) clamp(9px, .85cqi, 14px) clamp(10px, .9cqi, 14px);
	text-align: center;
	opacity: 0;
	transform: translateY(6px);
	animation: mw-vt-fade-in 300ms ease 250ms forwards;
	pointer-events: none;
}
@keyframes mw-vt-fade-in { to { opacity: 1; transform: none; } }

.mw-vt .mw-vt__text {
	display: -webkit-box;
	margin: 0 0 5px;
	overflow: hidden;
	font-size: clamp(11px, .85cqi, 13px);
	font-weight: 400;
	line-height: 1.38;
	opacity: .82;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--vt-clamp);
}
.mw-vt .mw-vt__name {
	font-size: clamp(11px, .9cqi, 14px);
	font-weight: 700;
	line-height: 1.2;
}
.mw-vt .mw-vt__role {
	color: var(--vt-accent);
	font-size: clamp(8px, .6cqi, 10px);
	font-weight: 750;
	line-height: 1.3;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Fortschritt, Button, Leerzustand
   -------------------------------------------------------------------------- */
.mw-vt__progress {
	display: none;
	gap: 5px;
	justify-content: center;
}
.mw-vt__progress span {
	width: 5px;
	height: 5px;
	background: var(--vt-text);
	border-radius: 50%;
	opacity: .18;
	transition: width 260ms ease, opacity 260ms ease;
}
.mw-vt__progress span.is-active {
	width: 18px;
	border-radius: 99px;
	opacity: .7;
}

.mw-vt .mw-vt__button {
	display: flex;
	width: fit-content;
	min-height: 52px;
	gap: 16px;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	padding: 11px 19px 11px 24px;
	color: var(--vt-button-text);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	background: var(--vt-button);
	border-radius: 999px;
	transition: transform 180ms ease, background 180ms ease;
}
.mw-vt .mw-vt__button:hover {
	color: var(--vt-button-text);
	background: var(--vt-button-hover);
	transform: translateY(-3px);
}
.mw-vt__button svg {
	width: 20px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.6;
}

.mw-vt__empty {
	display: grid;
	gap: 7px;
	padding: 40px 20px;
	text-align: center;
	border: 1px dashed currentColor;
	border-radius: 12px;
	opacity: .7;
}

/* ==========================================================================
   Ansicht «Runde Bilder»
   ========================================================================== */
.mw-vt--circles {
	--vt-cols: 3;
	--vt-circle: 380px;
	--vt-gap: 40px;
	--vt-row-gap: 56px;
	--vt-ring: #C9A45C;
	--vt-ring-width: 10px;
	--vt-ring-offset: 5px;
	--vt-ring-speed: 450ms;
	--vt-play-bg: #D2AE66;
	--vt-play-bg-2: #A8803C;
	--vt-play-color: #FFFFFF;
	--vt-play-size: 84px;
	--vt-caption-gap: calc(min(var(--vt-play-size), 26cqi) / 2 + 20px);
	--vt-caption-width: 100%;
	overflow: visible;
}

.mw-vt .mw-vt__circles {
	display: grid;
	grid-template-columns: repeat(var(--vt-cols), minmax(0, 1fr));
	column-gap: var(--vt-gap);
	row-gap: var(--vt-row-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.mw-vt .mw-vt__circle-item {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	margin: 0;
	padding: 0;
	text-align: center;
}
.mw-vt .mw-vt__circle-item::before { content: none; }

/* Kreis (Button) – gegen Theme-Button-Styles abgesichert */
.mw-vt .mw-vt__circle,
.mw-vt .mw-vt__circle:hover,
.mw-vt .mw-vt__circle:focus {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	display: block;
	width: min(100%, var(--vt-circle));
	min-height: 0;
	aspect-ratio: 1 / 1;
	margin: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	line-height: 1;
	text-transform: none;
	background: var(--vt-ring);
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
}
.mw-vt div.mw-vt__circle { cursor: default; }
.mw-vt .mw-vt__circle:focus-visible { outline: 3px solid var(--vt-accent); outline-offset: 5px; }

.mw-vt__circle-img {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	/* Ruhezustand: Bild leicht nach oben versetzt, unten blitzt eine goldene Sichel hervor */
	transform: translate(calc(var(--vt-ring-offset) * -.35), calc(var(--vt-ring-offset) * -1));
	transition: inset var(--vt-ring-speed) var(--vt-ease), transform var(--vt-ring-speed) var(--vt-ease);
	background: var(--vt-card-1);
	border-radius: 50%;
}
.mw-vt .mw-vt__circle-img img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	/* Ausschnitt eher oben, damit Köpfe nicht abgeschnitten werden */
	object-position: center 25%;
	border-radius: 0;
}
/* Hover/Fokus: voller Ring */
.mw-vt .mw-vt__circle:hover .mw-vt__circle-img,
.mw-vt .mw-vt__circle:focus-visible .mw-vt__circle-img {
	inset: var(--vt-ring-width);
	transform: none;
}

/* Play-Button sitzt halb über dem unteren Rand */
.mw-vt--circles .mw-vt__play-icon {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 2;
	width: min(var(--vt-play-size), 26%);
	height: auto;
	aspect-ratio: 1 / 1;
	color: var(--vt-play-color);
	opacity: 1;
	transform: translate(-50%, 50%);
	transition: transform 300ms var(--vt-ease);
}
.mw-vt--circles .mw-vt__circle:hover .mw-vt__play-icon { transform: translate(-50%, 50%) scale(1.07); }

.mw-vt__caption {
	width: 100%;
	max-width: var(--vt-caption-width);
	margin-top: var(--vt-caption-gap);
}
.mw-vt .mw-vt__caption-line {
	margin: 0;
	color: var(--vt-text);
	font-size: clamp(18px, 1.7vw, 26px);
	font-weight: 300;
	line-height: 1.25;
}
.mw-vt--circles .mw-vt__name {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}
.mw-vt--circles .is-inline .mw-vt__role {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: none;
}
.mw-vt--circles .mw-vt__caption-line:not(.is-inline) .mw-vt__role {
	display: block;
	margin-top: 6px;
	font-size: 12px;
}
.mw-vt--circles .mw-vt__text {
	display: -webkit-box;
	margin: 10px 0 0;
	overflow: hidden;
	color: var(--vt-text);
	font-size: 15px;
	line-height: 1.5;
	opacity: .8;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--vt-clamp);
}

@media (max-width: 1024px) { .mw-vt--circles { --vt-cols: 2; --vt-gap: 28px; } }
@media (max-width: 767px)  { .mw-vt--circles { --vt-cols: 1; } }

.mw-vt--circles .mw-vt__button { margin-top: 44px; }


/* ==========================================================================
   Ansicht «Runde Bilder» als Slider = Karten-Galerie mit Kreisen
   (gleiche Bewegung, Steuerung und Autoplay wie die Karten)
   ========================================================================== */
.mw-vt--round {
	--vt-round-active: clamp(200px, 20cqi, 320px);
	--vt-round-small: clamp(72px, 8.3cqi, 128px);
	overflow: hidden;
}
.mw-vt--round .mw-vt__stage {
	height: calc(6.5cqi + var(--vt-round-active) + var(--vt-play-size) / 2 + 64px);
}
.mw-vt--round .mw-vt__person,
.mw-vt--round .mw-vt__person.is-active {
	width: var(--vt-round-small);
	height: var(--vt-round-small);
	padding: 0;
	background: var(--vt-ring);
	border: 0;
	border-radius: 50%;
	box-shadow: none;
}
.mw-vt--round .mw-vt__person.is-active {
	width: var(--vt-round-active);
	height: var(--vt-round-active);
}
.mw-vt--round .mw-vt__portrait,
.mw-vt--round .mw-vt__person.is-active .mw-vt__portrait {
	position: static;
	height: 100%;
	min-height: 0;
	overflow: visible;
	background: transparent;
	border-radius: 50%;
}
.mw-vt--round .mw-vt__person { --vt-in: 0px; }
.mw-vt--round .mw-vt__portrait img,
.mw-vt--round .mw-vt__portrait .mw-vt__placeholder {
	position: absolute;
	top: var(--vt-in);
	left: var(--vt-in);
	width: calc(100% - var(--vt-in) * 2);
	height: calc(100% - var(--vt-in) * 2);
	max-width: none;
	object-fit: cover;
	object-position: center 25%;
	background: var(--vt-card-1);
	border-radius: 50%;
	transform: translate(calc(var(--vt-ring-offset) * -.35), calc(var(--vt-ring-offset) * -1));
	transition: top var(--vt-ring-speed) var(--vt-ease), left var(--vt-ring-speed) var(--vt-ease), width var(--vt-ring-speed) var(--vt-ease), height var(--vt-ring-speed) var(--vt-ease), transform var(--vt-ring-speed) var(--vt-ease);
}
.mw-vt--round .mw-vt__portrait .mw-vt__placeholder { overflow: hidden; }
/* Hover/Fokus: voller Ring (kleine Kreise mit halber Breite) */
.mw-vt--round .mw-vt__person.is-active:hover .mw-vt__portrait img,
.mw-vt--round .mw-vt__person.is-active:hover .mw-vt__placeholder,
.mw-vt--round .mw-vt__person.is-active:focus-within .mw-vt__portrait img,
.mw-vt--round .mw-vt__person.is-active:focus-within .mw-vt__placeholder {
	--vt-in: var(--vt-ring-width);
	transform: none;
}
.mw-vt--round .mw-vt__person:not(.is-active):hover .mw-vt__portrait img,
.mw-vt--round .mw-vt__person:not(.is-active):hover .mw-vt__placeholder {
	--vt-in: calc(var(--vt-ring-width) / 2);
	transform: none;
}

/* Play-Button halb über dem unteren Rand (wird nicht vom runden Bild abgeschnitten) */
.mw-vt--round .mw-vt__play { border-radius: 50%; }
.mw-vt--round .mw-vt__play-icon {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: min(var(--vt-play-size), 30%);
	height: auto;
	aspect-ratio: 1 / 1;
	transform: translate(-50%, 50%) scale(.6);
}
.mw-vt--round .mw-vt__person.is-active .mw-vt__play-icon { transform: translate(-50%, 50%); }
.mw-vt--round .mw-vt__person.is-active .mw-vt__play:hover .mw-vt__play-icon { transform: translate(-50%, 50%) scale(1.07); }
.mw-vt--round .mw-vt__duration { display: none; }

/* Text unter dem aktiven Kreis */
.mw-vt--round .mw-vt__person.is-active .mw-vt__info {
	position: absolute;
	top: calc(100% + min(var(--vt-play-size), 30%) / 2 + 16px);
	left: -60%;
	right: -60%;
	display: block;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}
.mw-vt--round .mw-vt__caption-line { font-size: clamp(17px, 1.6cqi, 24px); }

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 989px) {
	.mw-vt__stage { height: 380px; }
	.mw-vt__person[data-slot="-6"],
	.mw-vt__person[data-slot="-5"],
	.mw-vt__person[data-slot="5"],
	.mw-vt__person[data-slot="6"] {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
	}
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 749px) {
	.mw-vt__gallery { padding-bottom: 24px; }
	.mw-vt__controls { height: 42px; }
	.mw-vt .mw-vt__control { width: 40px; height: 40px; }
	.mw-vt__stage { height: 350px; margin-top: 8px; }

	.mw-vt__person {
		width: 78px;
		height: 100px;
		border-radius: 13px;
	}
	.mw-vt__person[data-slot="-2"] { --card-left: 4%;  --card-top: 130px; }
	.mw-vt__person[data-slot="-1"] { --card-left: 21%; --card-top: 165px; }
	.mw-vt__person[data-slot="1"]  { --card-left: 79%; --card-top: 165px; }
	.mw-vt__person[data-slot="2"]  { --card-left: 96%; --card-top: 130px; }
	.mw-vt__person[data-slot="-6"],
	.mw-vt__person[data-slot="-5"],
	.mw-vt__person[data-slot="-4"],
	.mw-vt__person[data-slot="-3"],
	.mw-vt__person[data-slot="3"],
	.mw-vt__person[data-slot="4"],
	.mw-vt__person[data-slot="5"],
	.mw-vt__person[data-slot="6"] {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
	}
	.mw-vt__person.is-active {
		--card-top: 10px;
		width: 196px;
		height: 320px;
		border-width: 5px;
		border-radius: 19px;
	}
	.mw-vt:not(.mw-vt--circles) .mw-vt__text { font-size: 11px; }
	.mw-vt:not(.mw-vt--circles) .mw-vt__name { font-size: 12px; }
	.mw-vt:not(.mw-vt--circles) .mw-vt__role { font-size: 9px; }
	.mw-vt__progress { display: flex; }
	.mw-vt .mw-vt__button { margin-top: 14px; }
}

/* Runde Slider-Ansicht: Tablet / Mobile */
@media (max-width: 989px) {
	.mw-vt--round { --vt-round-active: clamp(200px, 28cqi, 280px); }
}
@media (max-width: 749px) {
	.mw-vt--round {
		--vt-round-active: min(240px, 62vw);
		--vt-round-small: 70px;
	}
	.mw-vt--round .mw-vt__person.is-active { --card-top: 10px; }
	.mw-vt--round .mw-vt__stage { height: calc(10px + var(--vt-round-active) + var(--vt-play-size) / 2 + 70px); }
	.mw-vt--round .mw-vt__person[data-slot="-1"],
	.mw-vt--round .mw-vt__person[data-slot="1"] { --card-top: 150px; }
	.mw-vt--round .mw-vt__person[data-slot="-2"],
	.mw-vt--round .mw-vt__person[data-slot="2"] { --card-top: 110px; }
	.mw-vt--round .mw-vt__person.is-active .mw-vt__info { left: -20%; right: -20%; }
}

@media (prefers-reduced-motion: reduce) {
	.mw-vt__person,
	.mw-vt__portrait,
	.mw-vt__circle-img,
	.mw-vt--round .mw-vt__portrait img,
	.mw-vt__play-icon,
	.mw-vt__duration,
	.mw-vt .mw-vt__control,
	.mw-vt .mw-vt__button {
		transition-duration: .01ms;
		transition-delay: 0ms;
	}
	.mw-vt__person.is-active .mw-vt__info {
		animation-duration: .01ms;
		animation-delay: 0ms;
	}
}

/* ==========================================================================
   Harte Absicherung gegen Theme- und Elementor-Kit-Button-Styles
   (Kit-CSS lädt nach dem Widget-CSS und färbt sonst alle <button> ein)
   ========================================================================== */
.mw-vt button.mw-vt__select,
.mw-vt button.mw-vt__select:hover,
.mw-vt button.mw-vt__select:focus,
.mw-vt button.mw-vt__select:active,
.mw-vt button.mw-vt__play,
.mw-vt button.mw-vt__play:hover,
.mw-vt button.mw-vt__play:focus,
.mw-vt button.mw-vt__play:active {
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--vt-play-color) !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transform: none !important;
}

.mw-vt button.mw-vt__control,
.mw-vt button.mw-vt__control:focus,
.mw-vt button.mw-vt__control:active {
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	color: var(--vt-text) !important;
	font-size: 16px !important;
	line-height: 1 !important;
	background: color-mix(in srgb, var(--vt-bg) 92%, transparent) !important;
	border: 1px solid color-mix(in srgb, var(--vt-text) 10%, transparent) !important;
	border-radius: 50% !important;
	box-shadow: 0 8px 24px color-mix(in srgb, var(--vt-text) 8%, transparent) !important;
	text-shadow: none !important;
}
.mw-vt button.mw-vt__control:hover {
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	color: var(--vt-button-text) !important;
	background: var(--vt-button-hover) !important;
	border: 1px solid transparent !important;
	border-radius: 50% !important;
}

.mw-vt button.mw-vt__circle,
.mw-vt button.mw-vt__circle:hover,
.mw-vt button.mw-vt__circle:focus,
.mw-vt button.mw-vt__circle:active {
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	color: inherit !important;
	background: var(--vt-ring) !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transform: none !important;
}