/* VIVA Vorher/Nachher */
.viva-vn {
	--vn-pos: 50%;
	--vn-farbe: #aa1313;
	--vn-linie: 2px;
	--vn-pfeil: 23px;
	--vn-label-grund: #ffffffa1;
	--vn-label-farbe: #000;
	position: relative;
	overflow: hidden;
	line-height: 0;
	user-select: none;
}
.viva-vn img {
	display: block;
	width: 100%;
	height: auto;
}
.viva-vn-vorher {
	position: absolute;
	inset: 0;
	height: 100% !important;
	object-fit: cover;
	clip-path: inset(0 calc(100% - var(--vn-pos)) 0 0);
}
.viva-vn-griff {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--vn-pos);
	width: var(--vn-linie);
	margin-left: calc(var(--vn-linie) / -2);
	background: var(--vn-farbe);
	pointer-events: none;
}
/* Zwei Pfeile links und rechts der Linie. */
/* Gemessen am Original: je Pfeil rund 23 x 40 px, 10 px neben der Linie. */
.viva-vn-griff::before,
.viva-vn-griff::after {
	content: "";
	position: absolute;
	top: 50%;
	border-top: calc(var(--vn-pfeil) * 0.87) solid transparent;
	border-bottom: calc(var(--vn-pfeil) * 0.87) solid transparent;
	transform: translateY(-50%);
}
.viva-vn-griff::before {
	right: 10px;
	border-right: var(--vn-pfeil) solid var(--vn-farbe);
}
.viva-vn-griff::after {
	left: 10px;
	border-left: var(--vn-pfeil) solid var(--vn-farbe);
}
.viva-vn-label {
	position: absolute;
	top: calc(50% + 20px);
	transform: translateY(-50%);
	padding: 5px 10px;
	line-height: 1.4;
	background: var(--vn-label-grund);
	color: var(--vn-label-farbe);
	pointer-events: none;
}
.viva-vn-label-vorher {
	left: 10px;
}
.viva-vn-label-nachher {
	right: 10px;
}
.viva-vn-regler {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
}