/*
 * Bildvergleich (Elementor V4 Atomic Element)
 *
 * Farbe: Die Textfarbe des Elements (Stil Tab > Typografie > Farbe) färbt
 * Trennlinie, Griff, Symbol und Beschriftung über currentColor.
 * Schrift: Beschriftungen erben die Typografie aus dem Stil Tab.
 * Größe, Seitenverhältnis, Rahmen, Radius, Schatten: direkt im Stil Tab.
 *
 * Feintuning über CSS Variablen, z. B. in einer globalen Klasse:
 *   --bildvergleich-flaeche   Hintergrund von Griff und Beschriftung
 *   --bildvergleich-dauer     Dauer der Gleitbewegung
 *   --bildvergleich-kurve     Easing der Gleitbewegung
 */

/* Registrierte Eigenschaft, damit die Position weich animiert werden kann. */
@property --bildvergleich-position {
	syntax: '<percentage>';
	inherits: true;
	initial-value: 50%;
}

/* ------------------------------------------------------------------
 * Wrapper
 * :where() hält die Spezifität bei 0, Stil Tab Klassen gewinnen immer.
 * ------------------------------------------------------------------ */
:where(.bildvergleich) {
	--bildvergleich-position: 50%;
	--bildvergleich-winkel: 0deg;
	--bildvergleich-versatz: 0px;
	--bildvergleich-griffgroesse: 44px;
	--bildvergleich-linienbreite: 2px;
	--bildvergleich-flaeche: rgb(12 14 20 / 0.42);
	--bildvergleich-dauer: 0.45s;
	--bildvergleich-kurve: cubic-bezier(0.22, 1, 0.36, 1);

	position: relative;
	display: block;
	overflow: hidden;
	isolation: isolate;
	line-height: 1.2;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: pan-y;
	cursor: ew-resize;
	transition: --bildvergleich-position var(--bildvergleich-dauer) var(--bildvergleich-kurve);
}

:where(.bildvergleich--vertikal) {
	touch-action: pan-x;
	cursor: ns-resize;
}

:where(.bildvergleich--interaktion-hover) {
	cursor: crosshair;
}

/* Während aktivem Ziehen folgt der Regler ohne Verzögerung. */
.bildvergleich.bildvergleich--aktiv {
	--bildvergleich-dauer: 0s;
}

/* Im Hover Modus bleibt eine minimale Glättung. */
.bildvergleich.bildvergleich--interaktion-hover.bildvergleich--aktiv {
	--bildvergleich-dauer: 0.12s;
}

/* Für Sprünge ohne Animation (Initialisierung, Größenänderung). */
.bildvergleich.bildvergleich--sofort {
	--bildvergleich-dauer: 0s;
}

/* ------------------------------------------------------------------
 * Bilder
 * Das Nachher-Bild liegt im Fluss und bestimmt die Höhe. Setzt man im
 * Stil Tab eine Höhe oder ein Seitenverhältnis, füllen beide Bilder sie.
 * ------------------------------------------------------------------ */
.bildvergleich .bildvergleich__bild {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	pointer-events: none;
	-webkit-user-drag: none;
}

.bildvergleich .bildvergleich__bild--nachher {
	position: relative;
}

.bildvergleich .bildvergleich__bild--vorher {
	position: absolute;
	inset: 0;
	z-index: 1;
	clip-path: polygon(
		0 0,
		var(--bildvergleich-position) 0,
		var(--bildvergleich-position) 100%,
		0 100%
	);
}

.bildvergleich--vertikal .bildvergleich__bild--vorher {
	clip-path: polygon(
		0 0,
		100% 0,
		100% var(--bildvergleich-position),
		0 var(--bildvergleich-position)
	);
}

/* Diagonal: oben und unten um den berechneten Versatz verschoben. */
.bildvergleich--diagonal .bildvergleich__bild--vorher {
	clip-path: polygon(
		0 0,
		calc(var(--bildvergleich-position) + var(--bildvergleich-versatz)) 0,
		calc(var(--bildvergleich-position) - var(--bildvergleich-versatz)) 100%,
		0 100%
	);
}

/* ------------------------------------------------------------------
 * Bildeffekte
 * ------------------------------------------------------------------ */
.bildvergleich--vorher-graustufen .bildvergleich__bild--vorher,
.bildvergleich--nachher-graustufen .bildvergleich__bild--nachher {
	filter: grayscale(1);
}

.bildvergleich--vorher-entsaettigt .bildvergleich__bild--vorher,
.bildvergleich--nachher-entsaettigt .bildvergleich__bild--nachher {
	filter: saturate(0.35);
}

.bildvergleich--vorher-sepia .bildvergleich__bild--vorher,
.bildvergleich--nachher-sepia .bildvergleich__bild--nachher {
	filter: sepia(0.8) saturate(0.9);
}

.bildvergleich--vorher-abgedunkelt .bildvergleich__bild--vorher,
.bildvergleich--nachher-abgedunkelt .bildvergleich__bild--nachher {
	filter: brightness(0.68);
}

/* Bewusst ohne transform: eine Skalierung würde die Clip Kante gegenüber
   der Trennlinie verschieben. */
.bildvergleich--vorher-weichgezeichnet .bildvergleich__bild--vorher,
.bildvergleich--nachher-weichgezeichnet .bildvergleich__bild--nachher {
	filter: blur(3px);
}

/* Dunkler Verlauf oben und unten, damit helle Beschriftungen lesbar bleiben. */
.bildvergleich--mit-verlauf::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgb(0 0 0 / 0.45) 0%,
		rgb(0 0 0 / 0) 28%,
		rgb(0 0 0 / 0) 72%,
		rgb(0 0 0 / 0.45) 100%
	);
}

/* ------------------------------------------------------------------
 * Beschriftungen
 * ------------------------------------------------------------------ */
.bildvergleich__beschriftung {
	position: absolute;
	z-index: 4;
	padding: 0.45em 0.85em;
	border-radius: 0.4em;
	background: var(--bildvergleich-flaeche);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: inherit;
	font-size: 0.875em;
	letter-spacing: 0.01em;
	white-space: nowrap;
	pointer-events: none;
	transition:
		opacity 0.3s ease,
		transform 0.3s var(--bildvergleich-kurve);
}

/* Senkrechte Linie: Vorher links oben, Nachher rechts oben. */
.bildvergleich--horizontal .bildvergleich__beschriftung--vorher {
	top: 1rem;
	left: 1rem;
}

.bildvergleich--horizontal .bildvergleich__beschriftung--nachher {
	top: 1rem;
	right: 1rem;
}

/* Waagerechte Linie: Vorher oben, Nachher unten, jeweils mittig. */
.bildvergleich--vertikal .bildvergleich__beschriftung {
	left: 50%;
	translate: -50% 0;
}

.bildvergleich--vertikal .bildvergleich__beschriftung--vorher {
	top: 1rem;
}

.bildvergleich--vertikal .bildvergleich__beschriftung--nachher {
	bottom: 1rem;
}

/* Diagonal: gegenüberliegende Ecken. */
.bildvergleich--diagonal .bildvergleich__beschriftung--vorher {
	top: 1rem;
	left: 1rem;
}

.bildvergleich--diagonal .bildvergleich__beschriftung--nachher {
	right: 1rem;
	bottom: 1rem;
}

/* Nur bei Hover: sanft ein- und ausblenden. */
.bildvergleich--beschriftung-hover .bildvergleich__beschriftung {
	opacity: 0;
	transform: translateY(-0.35em);
}

.bildvergleich--beschriftung-hover:hover .bildvergleich__beschriftung,
.bildvergleich--beschriftung-hover:focus-within .bildvergleich__beschriftung,
.bildvergleich--beschriftung-hover.bildvergleich--aktiv .bildvergleich__beschriftung {
	opacity: 1;
	transform: none;
}

/* Geräte ohne Hover (Touch) zeigen die Beschriftung immer. */
@media (hover: none) {
	.bildvergleich--beschriftung-hover .bildvergleich__beschriftung {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------------
 * Regler (Trennlinie) und Griff
 * ------------------------------------------------------------------ */
.bildvergleich__regler {
	position: absolute;
	z-index: 3;
	top: 0;
	bottom: 0;
	left: var(--bildvergleich-position);
	width: var(--bildvergleich-linienbreite);
	margin-left: calc(var(--bildvergleich-linienbreite) / -2);
	display: flex;
	align-items: center;
	justify-content: center;
	background: currentColor;
	box-shadow: 0 0 6px rgb(0 0 0 / 0.25);
	outline: none;
}

/* Unsichtbare, breitere Griffzone, damit die Linie gut zu treffen ist. */
.bildvergleich__regler::before {
	content: '';
	position: absolute;
	inset: 0 -14px;
}

.bildvergleich--vertikal .bildvergleich__regler {
	top: var(--bildvergleich-position);
	bottom: auto;
	left: 0;
	right: 0;
	width: auto;
	height: var(--bildvergleich-linienbreite);
	margin: calc(var(--bildvergleich-linienbreite) / -2) 0 0;
}

.bildvergleich--vertikal .bildvergleich__regler::before {
	inset: -14px 0;
}

/* Diagonal: Linie länger als das Bild und gedreht, Überstand wird abgeschnitten. */
.bildvergleich--diagonal .bildvergleich__regler {
	top: -100%;
	bottom: -100%;
	transform: rotate(var(--bildvergleich-winkel));
}

.bildvergleich__griff {
	--griff-drehung: 0deg;
	--griff-skalierung: 1;

	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: var(--bildvergleich-griffgroesse);
	height: var(--bildvergleich-griffgroesse);
	border: var(--bildvergleich-linienbreite) solid currentColor;
	border-radius: 50%;
	background: var(--bildvergleich-flaeche);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: inherit;
	box-shadow: 0 4px 16px rgb(0 0 0 / 0.28);
	transform: rotate(var(--griff-drehung)) scale(var(--griff-skalierung));
	transition:
		transform 0.28s var(--bildvergleich-kurve),
		box-shadow 0.28s ease;
}

/* Der Griff bleibt bei diagonaler Linie aufrecht. */
.bildvergleich--diagonal .bildvergleich__griff {
	--griff-drehung: calc(var(--bildvergleich-winkel) * -1);
}

.bildvergleich--griff-abgerundet .bildvergleich__griff {
	border-radius: 28%;
}

.bildvergleich--griff-quadrat .bildvergleich__griff {
	border-radius: 2px;
}

.bildvergleich--griff-nur-linie .bildvergleich__griff {
	display: none;
}

/* Symbole */
.bildvergleich__griff > svg {
	display: block;
	width: 46%;
	height: 46%;
}

.bildvergleich__symbol--flaeche {
	fill: currentColor;
}

.bildvergleich__symbol--kontur {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Bei waagerechter Linie zeigen die Pfeile nach oben und unten. */
.bildvergleich--vertikal .bildvergleich__symbol {
	rotate: 90deg;
}

/* Hover und Tastaturfokus: leicht größer, mit weichem Schein. */
.bildvergleich__regler:hover .bildvergleich__griff,
.bildvergleich__regler:focus-visible .bildvergleich__griff {
	--griff-skalierung: 1.1;
	box-shadow:
		0 0 0 6px color-mix(in srgb, currentColor 22%, transparent),
		0 6px 20px rgb(0 0 0 / 0.32);
}

/* Beim Ziehen gibt der Griff spürbar nach. */
.bildvergleich--aktiv .bildvergleich__griff {
	--griff-skalierung: 0.94;
}

/* Sichtbarer Fokus für Tastaturnutzer. */
.bildvergleich__regler:focus-visible .bildvergleich__griff {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.bildvergleich--griff-nur-linie .bildvergleich__regler:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ------------------------------------------------------------------
 * Reduzierte Bewegung respektieren
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	:where(.bildvergleich) {
		--bildvergleich-dauer: 0s;
	}

	.bildvergleich__griff,
	.bildvergleich__beschriftung {
		transition: none;
	}
}