/* ---- Webux Vorher-Nachher (before-after) -------------------------------

   Ein einziger Wert steuert den ganzen Vergleich: --posn, eine einheitenlose
   Zahl von 0 bis 100. Daraus leiten sich der Zuschnitt des Vorher-Bilds, die
   Position der Trennlinie und das Ein-/Ausblenden der beiden Labels ab. Das
   Skript schreibt nur diese eine Zahl.

   Ohne JavaScript fehlt `.is-interactive`; dann bleiben Regler und Griff
   unsichtbar und der Rahmen zeigt die Startaufteilung als ruhigen Split -
   immer noch ein lesbarer Vergleich, nie ein totes Bedienelement.

   Selektoren sind bewusst zweistufig gehalten (Modifier + Element, Spezifität
   0,2,0), damit die site-weite assets/css/site.css sie nicht überschreibt.
   ---------------------------------------------------------------------- */

.webux-ba {
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 4vw, 3.25rem);
}

/* --- Kopf --- */
.webux-ba__head {
	max-width: 46rem;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.webux-ba .webux-ba__overline {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	/* Overlines liegen auf hellem Grund und folgen dem Signal-Slug; ohne
	   Signal-Farbe in der Palette bleibt es beim bisherigen Primary. */
	color: var(--wp--preset--color--signal, var(--wp--preset--color--primary, #356b4b));
}

.webux-ba .webux-ba__title {
	margin: 0;
	font-size: clamp(1.9rem, 3.4vw, 2.75rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast, #10180f);
}

.webux-ba .webux-ba__lead {
	margin: 0;
	line-height: 1.65;
	color: var(--wp--preset--color--muted, #5a665c);
}

/* --- Raster -------------------------------------------------------------
   Mobile first: eine Spalte. Die Spaltenzahl aus dem Block greift erst, wenn
   ein Paar nebeneinander überhaupt lesbar bleibt. */
.webux-ba__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2.25rem);
	align-items: start;
}

@media (min-width: 700px) {
	.webux-ba--cols-2 .webux-ba__list,
	.webux-ba--cols-3 .webux-ba__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1040px) {
	.webux-ba--cols-3 .webux-ba__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.webux-ba .webux-ba__item {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	min-width: 0;
}

/* --- Rahmen (Regler-Modus) ---------------------------------------------- */
.webux-ba__frame {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	aspect-ratio: var(--webux-ba-ratio, 4 / 3);
	background: var(--wp--preset--color--surface, #f1f3ef);
	box-shadow:
		0 1px 2px rgba(16, 24, 15, 0.07),
		0 22px 44px -28px rgba(16, 24, 15, 0.45);
	/* Hält Filter und Stapelung der Ebenen lokal. */
	isolation: isolate;
}

.webux-ba__layer {
	position: absolute;
	inset: 0;
}

.webux-ba__layer--after {
	z-index: 1;
}

/* Das Vorher-Bild liegt oben und wird von rechts weggeschnitten. */
.webux-ba__layer--before {
	z-index: 2;
	clip-path: inset(0 calc(100% - var(--posn, 50) * 1%) 0 0);
}

.webux-ba__layer img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Trennlinie und Griff ----------------------------------------------- */
.webux-ba__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--posn, 50) * 1%);
	z-index: 3;
	width: 2px;
	margin-left: -1px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 0 0 1px rgba(16, 24, 15, 0.16);
	pointer-events: none;
}

/* Die Linie markiert die Naht und steht deshalb auch ohne Skript. Der Griff
   verspricht Bedienbarkeit und erscheint erst, wenn es sie gibt. */
.webux-ba__grip {
	display: none;
}

.webux-ba__frame.is-interactive .webux-ba__grip {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 46px;
	height: 46px;
	border-radius: 100px;
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--contrast, #10180f);
	background: rgba(255, 255, 255, 0.94);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 8px 22px rgba(16, 24, 15, 0.3);
}

.webux-ba__grip svg {
	width: 21px;
	height: 21px;
}

/* --- Der eigentliche Regler ---------------------------------------------
   Unsichtbar über den ganzen Rahmen gelegt: liefert Ziehen, Antippen,
   Tastatur und einen echten zugänglichen Namen vom Browser statt aus
   selbstgebautem Drag-Code. touch-action erlaubt weiterhin vertikales
   Scrollen über dem Bild. */
.webux-ba__range {
	position: absolute;
	inset: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	opacity: 0;
	-webkit-appearance: none;
	appearance: none;
	touch-action: pan-y;
	/* Ohne Skript kein Bedienelement: nicht anklickbar, nicht im Tab-Fluss. */
	display: none;
}

.webux-ba__frame.is-interactive .webux-ba__range {
	display: block;
	cursor: ew-resize;
}

/* Der Daumen ist 2 px schmal, nicht griffgross.
   Grund: Der Browser bildet den Wert auf `Spurbreite − Daumenbreite` ab und
   zentriert den Daumen auf dem Zeiger, die Trennlinie steht aber bei
   `--posn %` der voll­en Breite. Bei einem 48 px breiten Daumen laufen die
   zwei Koordinatensysteme bis zu 24 px auseinander - die Naht hinkt dem
   Finger nach. Mit 2 px stimmen sie praktisch überein. Als Grifffläche wird
   der Daumen nicht gebraucht: alle Engines starten das Ziehen bei einem
   Zeigerdruck irgendwo auf der Spur, und die ist der ganze Rahmen. */
.webux-ba__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 2px;
}

.webux-ba__range::-moz-range-thumb {
	width: 2px;
	border: 0;
	border-radius: 0;
}

/* Fokus sitzt auf dem unsichtbaren Regler - sichtbar gemacht wird er am
   Griff (Geschwisterselektor, deshalb steht das input im Markup zuerst).

   Bewusst als `outline`, nicht nur als `box-shadow`: im
   Hochkontrast-/forced-colors-Modus werden Schatten auf `none` gesetzt,
   Outlines nicht - ein reiner Schatten wäre dort gar kein Fokusring. Das
   entspricht auch der Konvention der übrigen Theme-Bausteine. Zusätzlich
   liegt ein Ring am Rahmen selbst, damit er an den Endpositionen nicht am
   `overflow: hidden` des Rahmens abgeschnitten wird. */
.webux-ba__range:focus {
	outline: none;
}

.webux-ba__range:focus-visible ~ .webux-ba__handle .webux-ba__grip {
	outline: 3px solid var(--wp--preset--color--signal, var(--wp--preset--color--primary, #356b4b));
	outline-offset: 2px;
	box-shadow:
		0 0 0 3px var(--wp--preset--color--base, #ffffff),
		0 8px 22px rgba(16, 24, 15, 0.3);
}

.webux-ba__frame:has(.webux-ba__range:focus-visible) {
	outline: 3px solid var(--wp--preset--color--signal, var(--wp--preset--color--primary, #356b4b));
	outline-offset: 3px;
}

/* --- Labels -------------------------------------------------------------
   Über Eck gesetzt, damit beide gleichzeitig lesbar sind. Wandert der Regler
   ganz an einen Rand, blendet sich das Label der verschwundenen Seite aus. */
.webux-ba .webux-ba__badge {
	position: absolute;
	top: 0.875rem;
	z-index: 3;
	padding: 0.35rem 0.8rem;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.35;
	text-transform: uppercase;
	color: #ffffff;
	background: rgba(16, 24, 15, 0.62);
	-webkit-backdrop-filter: blur(8px) saturate(140%);
	backdrop-filter: blur(8px) saturate(140%);
	pointer-events: none;
}

.webux-ba .webux-ba__badge--before {
	left: 0.875rem;
}

.webux-ba .webux-ba__badge--after {
	right: 0.875rem;
	background: var(--wp--preset--color--primary, #356b4b);
}

.webux-ba__frame .webux-ba__badge--before {
	opacity: clamp(0, calc((var(--posn, 50) - 8) / 7), 1);
}

.webux-ba__frame .webux-ba__badge--after {
	opacity: clamp(0, calc((92 - var(--posn, 50)) / 7), 1);
}

/* --- Nebeneinander (split) ----------------------------------------------
   Das Bildformat gilt dem Paar, nicht der Hälfte: ein Doppelbild ist damit
   genauso hoch wie ein Regler-Rahmen derselben Breite. Nur so stehen die
   beiden Darstellungsarten im selben Raster ohne Höhensprünge nebeneinander. */
.webux-ba__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 3px;
	aspect-ratio: var(--webux-ba-ratio, 4 / 3);
	border-radius: 18px;
	overflow: hidden;
	background: var(--wp--preset--color--base, #ffffff);
	box-shadow:
		0 1px 2px rgba(16, 24, 15, 0.07),
		0 22px 44px -28px rgba(16, 24, 15, 0.45);
}

.webux-ba__side {
	position: relative;
	background: var(--wp--preset--color--surface, #f1f3ef);
	min-width: 0;
	min-height: 0;
}

.webux-ba__side img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Ein einzelnes Paar auf schmalem Schirm: untereinander statt zwei
   Briefmarken nebeneinander. Gestapelt trägt wieder jede Hälfte das
   Bildformat, sonst würden beide auf halbe Höhe gequetscht. */
@media (max-width: 460px) {
	.webux-ba__pair {
		grid-template-columns: minmax(0, 1fr);
		aspect-ratio: auto;
	}

	.webux-ba__side img {
		aspect-ratio: var(--webux-ba-ratio, 4 / 3);
	}
}

/* --- Bildunterschrift --------------------------------------------------- */
.webux-ba__meta {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.webux-ba .webux-ba__tag {
	align-self: flex-start;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal, var(--wp--preset--color--primary, #356b4b));
}

.webux-ba .webux-ba__caption {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast, #10180f);
}

.webux-ba .webux-ba__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--wp--preset--color--muted, #5a665c);
}

/* --- Hinweis, dass der Rahmen bedienbar ist -----------------------------
   Zwei kurze Stupser nach dem Laden, danach nie wieder - und gar nicht, wenn
   jemand den Regler schon angefasst hat oder Bewegung reduziert. */
@media (prefers-reduced-motion: no-preference) {
	.webux-ba__frame.is-interactive .webux-ba__grip {
		animation: webux-ba-nudge 2.6s ease 900ms 2;
	}

	.webux-ba__frame.is-touched .webux-ba__grip {
		animation: none;
	}

	@keyframes webux-ba-nudge {
		0%,
		42%,
		100% {
			transform: translate(-50%, -50%) scale(1);
		}
		12% {
			transform: translate(calc(-50% - 8px), -50%) scale(1.05);
		}
		27% {
			transform: translate(calc(-50% + 8px), -50%) scale(1.05);
		}
	}
}

/* --- Druck --------------------------------------------------------------
   Auf Papier gibt es keinen Regler. Statt eines halb abgeschnittenen
   Vorher-Bilds steht dort das Ergebnis. */
@media print {
	.webux-ba__layer--before,
	.webux-ba__handle,
	.webux-ba__range,
	.webux-ba__frame .webux-ba__badge--before {
		display: none;
	}

	.webux-ba__frame,
	.webux-ba__pair {
		box-shadow: none;
	}
}