/* ============================================================
   Kreowsky – Bild-Vergleich Block (Frontend)
   ============================================================ */

.kreowsky-image-compare {
	position:    relative;
	display:     block;
	width:       100%;
	user-select: none;
	cursor:      ew-resize;
}

/* ── Bild-Bereich ─────────────────────────────────────────── */

.kreowsky-ic-images {
	position: relative;
	overflow: hidden;
	display:  block;
}

/* Vorher-Bild – bestimmt die Containerhöhe */
.kreowsky-ic-before {
	display: block;
	width:   100%;
	height:  auto;
}

/* Nachher-Bild – absolut überlagert, via clip-path beschnitten */
.kreowsky-ic-after-wrap {
	position:  absolute;
	inset:     0;
	clip-path: inset(0 0 0 50%); /* Startwert; JS überschreibt dies */
}

.kreowsky-ic-after {
	display:    block;
	width:      100%;
	height:     100%;
	object-fit: cover;
}

/* Vertikale Trennlinie auf den Bildern */
.kreowsky-ic-image-line {
	position:       absolute;
	top:            0;
	bottom:         0;
	left:           50%; /* JS aktualisiert diesen Wert */
	width:          2px;
	background:     rgba(255, 255, 255, 0.75);
	transform:      translateX(-50%);
	pointer-events: none;
	box-shadow:     0 0 8px rgba(0, 0, 0, 0.4);
}

/* ── Steuerleiste ─────────────────────────────────────────── */

.kreowsky-ic-bar {
	position:        relative;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         10px 16px;
	background:      #1a1a1a;
	cursor:          ew-resize;
}

/* Horizontale Linie hinter allem */
.kreowsky-ic-bar::before {
	content:        '';
	position:       absolute;
	left:           0;
	right:          0;
	top:            50%;
	height:         2px;
	background:     rgba(255, 255, 255, 0.2);
	pointer-events: none;
}

/* ── Linke / rechte Seite ─────────────────────────────────── */

.kreowsky-ic-bar-left,
.kreowsky-ic-bar-right {
	display:     flex;
	align-items: center;
	gap:         8px;
	position:    relative;
	z-index:     1;
}

.kreowsky-ic-bar-thumb {
	display:    block;
	width:      28px;
	height:     28px;
	object-fit: contain;
	flex-shrink: 0;
}

.kreowsky-ic-bar-label {
	font-size:   13px;
	line-height: 1.2;
	color:       rgba(255, 255, 255, 0.8);
	white-space: nowrap;
}

/* ── Schiebe-Handle ─────────────────────────────────────────── */

.kreowsky-ic-handle-btn {
	position:        absolute;
	top:             50%;
	left:            50%; /* JS aktualisiert diesen Wert */
	transform:       translate(-50%, -50%);
	z-index:         2;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           32px;
	height:          32px;
	padding:         0;
	border-radius:   50%;
	background:      transparent;
	border:          2px solid rgba(255, 255, 255, 0.65);
	cursor:          ew-resize;
	transition:      border-color 0.15s ease, transform 0.15s ease;
}

.kreowsky-ic-handle-btn:hover,
.kreowsky-ic-handle-btn:focus-visible {
	border-color: #fff;
	transform:    translate(-50%, -50%) scale(1.12);
	outline:      none;
}

/* Standard-Pfeile: ◂ ▸ */
.kreowsky-ic-handle-arrows {
	display:     flex;
	align-items: center;
	gap:         2px;
}

.kreowsky-ic-handle-arrows::before {
	content:     '‹';
	font-size:   15px;
	line-height: 1;
	color:       rgba(255, 255, 255, 0.9);
}

.kreowsky-ic-handle-arrows::after {
	content:     '›';
	font-size:   15px;
	line-height: 1;
	color:       rgba(255, 255, 255, 0.9);
}

/* Hochgeladenes Handle-Icon */
.kreowsky-ic-handle-icon {
	display:    block;
	width:      16px;
	height:     16px;
	object-fit: contain;
}