/**
 * STRYKE Base — Vorher/Nachher-Vergleich
 *
 * Zwei Zustände, und der erste ist der wichtige:
 *
 *   OHNE `data-ready`  — kein JavaScript. Beide Bilder stehen untereinander,
 *                        beide beschriftet, der Regler ist ausgeblendet. Es
 *                        gibt keinen Vergleich, aber es fehlt kein Inhalt.
 *   MIT `data-ready`   — das Skript hat übernommen. Die Bilder liegen
 *                        übereinander, `--stryke-compare-pos` schneidet das
 *                        obere zu.
 *
 * Die Reihenfolge ist Absicht: Der Ausfall-Zustand steht im Stylesheet zuerst
 * und braucht keine Bedingung. Wäre es umgekehrt, hinge die Lesbarkeit der
 * Seite daran, dass ein Skript lädt.
 *
 * KEINE FESTEN FARBWERTE. Alles hängt an den Rollenvariablen des
 * Design-Systems und dreht sich damit mit dem Hell/Dunkel-Modus. Die
 * `var(--stryke-…)`-Fallbacks greifen nur, wenn das Theme-CSS ausfällt.
 */

.stryke-compare {
	--stryke-compare-pos: 50%;
	--stryke-compare-ratio: 3 / 2;
	--stryke-compare-line: var(--stryke-bg, #ffffff);
	--stryke-compare-grip: var(--stryke-bg, #ffffff);
	--stryke-compare-grip-ink: var(--stryke-text, #111111);
	--stryke-compare-label-bg: rgb(var(--stryke-bg-rgb, 255 255 255) / 88%);
	--stryke-compare-label-ink: var(--stryke-text, #111111);

	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	overflow: hidden;
}

.stryke-compare__pane {
	position: relative;
	margin: 0;
	width: 100%;
	aspect-ratio: var(--stryke-compare-ratio);
	overflow: hidden;
}

.stryke-compare__pane img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Beide Bilder MÜSSEN deckungsgleich liegen. Ein abweichendes
	   Seitenverhältnis springt sonst beim Ziehen — deshalb schneidet
	   `cover` gegen das erzwungene Verhältnis des Rahmens. */
}

.stryke-compare__label {
	position: absolute;
	bottom: 12px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--stryke-compare-label-bg);
	color: var(--stryke-compare-label-ink);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
}

.stryke-compare__label--before {
	left: 12px;
}

.stryke-compare__label--after {
	right: 12px;
}

/* Trennlinie und Griff gehören zum Vergleich — ohne Skript gibt es keinen. */
.stryke-compare__divider,
.stryke-compare__range {
	display: none;
}

/* ---------------------------------------------------------------------------
   Mit JavaScript: der eigentliche Vergleich
   --------------------------------------------------------------------------- */

/* Die HÖHE KOMMT VOM UNTEREN BILD, nicht vom Rahmen.
 *
 * Naheliegend wäre, dem Rahmen `aspect-ratio` zu geben und beide Bildflächen
 * absolut darin zu legen. Genau das ist am 2026-08-10 auf dem Handy
 * auseinandergefallen: Sobald `aspect-ratio` am Rahmen nicht greift — und ein
 * Inline-Style am Element reicht dafür —, ist der Rahmen 0 px hoch, die
 * absoluten Bildflächen ragen heraus und der nachfolgende Text liegt mitten
 * im Bild.
 *
 * Deshalb bleibt „nachher" im normalen Fluss und trägt die Höhe; nur „vorher"
 * liegt absolut darüber und wird beschnitten. Der Rahmen kann dann gar nicht
 * mehr zusammenfallen. */
.stryke-compare[data-ready] {
	display: block;
	touch-action: pan-y;
}

.stryke-compare[data-ready] .stryke-compare__pane--after {
	position: relative;
}

.stryke-compare[data-ready] .stryke-compare__pane--before {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

/* Das obere Bild wird beschnitten, nicht in der Breite gestaucht: `clip-path`
   lässt die Bildgeometrie unangetastet. Mit `width` zu arbeiten würde das
   Motiv zusammenschieben, und der Vergleich wäre keiner mehr. */
.stryke-compare[data-ready] .stryke-compare__pane--before {
	clip-path: inset(0 calc(100% - var(--stryke-compare-pos)) 0 0);
}

.stryke-compare[data-ready] .stryke-compare__divider {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--stryke-compare-pos);
	width: 2px;
	margin-left: -1px;
	background: var(--stryke-compare-line);
	pointer-events: none;
}

.stryke-compare[data-ready] .stryke-compare__grip {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--stryke-compare-grip);
	box-shadow: 0 2px 10px rgb(0 0 0 / 22%);
	display: grid;
	place-items: center;
}

/* Zwei Pfeile, rein aus Rahmen gezeichnet — kein Icon-Font, kein SVG-Abruf. */
.stryke-compare[data-ready] .stryke-compare__grip::before,
.stryke-compare[data-ready] .stryke-compare__grip::after {
	content: "";
	position: absolute;
	width: 7px;
	height: 7px;
	border-top: 2px solid var(--stryke-compare-grip-ink);
	border-right: 2px solid var(--stryke-compare-grip-ink);
}

.stryke-compare[data-ready] .stryke-compare__grip::before {
	transform: rotate(-135deg);
	margin-left: -12px;
}

.stryke-compare[data-ready] .stryke-compare__grip::after {
	transform: rotate(45deg);
	margin-left: 12px;
}

/* Der native Regler liegt unsichtbar über der ganzen Fläche. Er bleibt das
   BEDIENELEMENT — Tastatur, Screenreader und Touch kommen darüber, gezeichnet
   wird nur der Griff daneben. Ein selbstgebautes Div könnte davon nichts. */
.stryke-compare[data-ready] .stryke-compare__range {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	-webkit-appearance: none;
	appearance: none;
	cursor: ew-resize;
}

.stryke-compare[data-ready] .stryke-compare__range::-webkit-slider-runnable-track {
	background: transparent;
	border: 0;
	height: 100%;
}

.stryke-compare[data-ready] .stryke-compare__range::-moz-range-track {
	background: transparent;
	border: 0;
	height: 100%;
}

/* Der Daumen ist durchsichtig, aber vorhanden: Er trägt den Tastaturfokus und
   die Touch-Fläche. Größe = Griff, damit sich beides deckt. */
.stryke-compare[data-ready] .stryke-compare__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: transparent;
	border: 0;
	cursor: ew-resize;
}

.stryke-compare[data-ready] .stryke-compare__range::-moz-range-thumb {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: transparent;
	border: 0;
	cursor: ew-resize;
}

/* Fokus muss sichtbar sein — sonst ist die Tastaturbedienung zwar da, aber
   niemand sieht, wo er gerade steht. Der Ring sitzt am Griff, weil der Regler
   selbst unsichtbar ist. */
.stryke-compare[data-ready]:has(.stryke-compare__range:focus-visible) .stryke-compare__grip {
	outline: 3px solid var(--stryke-primary-fill, #0f62a8);
	outline-offset: 3px;
}

/* Rückfall für Browser ohne `:has()`: dann bekommt der Regler selbst den Ring. */
@supports not selector(:has(*)) {
	.stryke-compare[data-ready] .stryke-compare__range:focus-visible {
		outline: 3px solid var(--stryke-primary-fill, #0f62a8);
		outline-offset: -3px;
	}
}

/* Beim Ziehen stört die Beschriftung unter dem Finger. */
.stryke-compare[data-ready] .stryke-compare__label {
	transition: opacity 0.18s ease;
}

.stryke-compare[data-ready][data-dragging] .stryke-compare__label {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.stryke-compare[data-ready] .stryke-compare__label {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Schmale Schirme
   ---------------------------------------------------------------------------
   Der Griff bleibt bei 44 px — das ist die Mindestgröße für eine Fingerfläche
   und darf NICHT mitschrumpfen, auch wenn er auf kleinem Schirm groß wirkt.
   Kleiner wird nur, was nicht angefasst wird: Beschriftungen und Ränder.

   Das Seitenverhältnis regelt das Widget je Breite (Vorgabe 1:1 am Handy) —
   ein 3:2-Streifen ist auf 390 px nur 260 px hoch, darin sieht man keinen
   Unterschied. Deshalb steht es hier NICHT im Stylesheet: Der Kunde soll es
   im Panel ändern können. */
@media (max-width: 767px) {
	.stryke-compare {
		gap: 8px;
	}

	.stryke-compare__label {
		bottom: 8px;
		padding: 5px 9px;
		font-size: 10px;
		letter-spacing: 0.1em;
	}

	.stryke-compare__label--before {
		left: 8px;
	}

	.stryke-compare__label--after {
		right: 8px;
	}

	/* Am Handy wird gewischt, nicht gezielt — ein etwas breiterer Strich ist
	   unter dem Daumen besser zu sehen. */
	.stryke-compare[data-ready] .stryke-compare__divider {
		width: 3px;
		margin-left: -1.5px;
	}
}