/* SFW Vorher/Nachher Slider */

.sfw-ba {
	--sfw-ba-pos: 50%;
	--sfw-ba-divider-color: #fff;
	--sfw-ba-divider-width: 2px;
	--sfw-ba-handle-size: 46px;
	--sfw-ba-handle-bg: #fff;
	--sfw-ba-handle-color: #111;
	--sfw-ba-handle-radius: 50%;
	--sfw-ba-label-offset: 16px;

	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.sfw-ba--horizontal { touch-action: pan-y; }
.sfw-ba--vertical   { touch-action: pan-x; }

.sfw-ba img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	pointer-events: none;
	-webkit-user-drag: none;
}

.sfw-ba__before { display: block; }

.sfw-ba__after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	-webkit-clip-path: inset(0 0 0 var(--sfw-ba-pos));
	clip-path: inset(0 0 0 var(--sfw-ba-pos));
}

.sfw-ba--vertical .sfw-ba__after {
	-webkit-clip-path: inset(var(--sfw-ba-pos) 0 0 0);
	clip-path: inset(var(--sfw-ba-pos) 0 0 0);
}

.sfw-ba__after img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Trennlinie */
.sfw-ba__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--sfw-ba-pos);
	width: var(--sfw-ba-divider-width);
	background: var(--sfw-ba-divider-color);
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 3;
}

.sfw-ba--vertical .sfw-ba__divider {
	left: 0;
	right: 0;
	top: var(--sfw-ba-pos);
	bottom: auto;
	width: auto;
	height: var(--sfw-ba-divider-width);
	transform: translateY(-50%);
}

/* Griff */
.sfw-ba__handle {
	position: absolute;
	left: var(--sfw-ba-pos);
	top: 50%;
	transform: translate(-50%, -50%);
	width: var(--sfw-ba-handle-size);
	height: var(--sfw-ba-handle-size);
	border-radius: var(--sfw-ba-handle-radius);
	background: var(--sfw-ba-handle-bg);
	color: var(--sfw-ba-handle-color);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
	cursor: ew-resize;
	z-index: 4;
	line-height: 1;
}

.sfw-ba--vertical .sfw-ba__handle {
	left: 50%;
	top: var(--sfw-ba-pos);
	cursor: ns-resize;
}

.sfw-ba--vertical .sfw-ba__handle svg { transform: rotate(90deg); }

.sfw-ba__handle:focus-visible {
	outline: 2px solid var(--sfw-ba-handle-color);
	outline-offset: 3px;
}

/* Beschriftungen */
.sfw-ba__label {
	position: absolute;
	top: var(--sfw-ba-label-offset);
	z-index: 2;
	line-height: 1.3;
	white-space: nowrap;
	pointer-events: none;
	transition: opacity .2s ease;
}

.sfw-ba__label--before { left: var(--sfw-ba-label-offset); }
.sfw-ba__label--after  { right: var(--sfw-ba-label-offset); }

.sfw-ba--labels-fade.sfw-ba--dragging .sfw-ba__label { opacity: 0; }

/* Solange JS noch nicht gelaufen ist: Nachher-Bild sauber halbiert zeigen */
.sfw-ba:not([data-sfw-ba-ready]) .sfw-ba__handle { cursor: default; }