/*
 * fx11_vorher_nachher — eine Vergleichsflaeche, darunter die Bildpaar-Leiste.
 *
 * Farben, Schriftgroessen und Laufweiten kommen ausschliesslich aus den Tokens in
 * css/project.css. Hier stehen nur Layout, Abstaende und Zustaende dieses Moduls.
 * Reihenfolge: 1. Kopf, 2. Vergleichsflaeche, 3. Leiste, 4. Media-Queries zuletzt.
 */

/* ---------- 1 Kopfzeile ---------- */

section.fx11_vorher_nachher .fx11_kopf {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 48px;
	margin-bottom: 36px;
}

section.fx11_vorher_nachher .fx11_topline {
	margin: 0 0 18px;
}

section.fx11_vorher_nachher .fx11_titel {
	margin: 0;
}

section.fx11_vorher_nachher .fx11_untertitel {
	margin: 14px 0 0;
	max-width: 520px;
}

/* Der Hinweistext steht rechts neben der Ueberschrift und bleibt schmal. */
section.fx11_vorher_nachher .fx11_hinweis {
	margin: 0;
	max-width: 380px;
}

/* ---------- 2 Vergleichsflaeche ---------- */

section.fx11_vorher_nachher .fx11_flaeche {
	position: relative;
	/* Die Schnittkante. Wird vom JS gesetzt; 50 % ist der Stand ohne JavaScript. */
	--fx11-pos: 50%;
	/*
	 * Die Flaeche folgt dem Bildformat statt es zu beschneiden. --fx11-verhaeltnis
	 * kommt aus dem Template und ist auf 0.7 bis 2.4 begrenzt.
	 *
	 * Gerechnet wird ueber die Hoehe: sie ist an der Bildschirmhoehe gedeckelt (auf
	 * 1440x750 ist die Hoehe die knappe Groesse, und unter der Flaeche steht noch
	 * die Bildpaar-Leiste). Die Breite ergibt sich daraus ueber das Verhaeltnis und
	 * bleibt nie breiter als der Container.
	 */
	--fx11-hoehe: min(640px, var(--fx-buehne-mittel));
	aspect-ratio: var(--fx11-verhaeltnis, 2.1);
	width: min(100%, calc(var(--fx11-hoehe) * var(--fx11-verhaeltnis, 2.1)));
	margin-inline: auto;
	overflow: hidden;
	background: var(--fx-white);
	touch-action: pan-y;
	cursor: ew-resize;
	user-select: none;
	-webkit-user-select: none;
}

/*
 * Hochkantfotos: die Flaeche darf deutlich hoeher werden, sonst bliebe sie bei
 * gleicher Hoehe nur halb so breit wie ein Querformat und wirkte verloren.
 */
section.fx11_vorher_nachher .fx11_flaeche--hoch {
	--fx11-hoehe: min(700px, 70vh);
}

/* Alle Paare liegen uebereinander, sichtbar ist immer genau eins. */
section.fx11_vorher_nachher .fx11_paar {
	position: absolute;
	inset: 0;
}

section.fx11_vorher_nachher .fx11_paar[hidden] {
	display: none;
}

/* Das Vorher-Bild liegt ueber dem Nachher-Bild und wird rechts der Kante beschnitten. */
section.fx11_vorher_nachher .fx11_clip {
	position: absolute;
	inset: 0;
	z-index: 1;
	clip-path: inset(0 calc(100% - var(--fx11-pos)) 0 0);
}

section.fx11_vorher_nachher .fx11_bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

section.fx11_vorher_nachher .fx11_linie {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--fx11-pos);
	z-index: 2;
	width: 4px;
	margin-left: -2px;
	background: var(--fx-white);
	pointer-events: none;
}

section.fx11_vorher_nachher .fx11_griff {
	position: absolute;
	top: 50%;
	left: var(--fx11-pos);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 76px;
	height: 76px;
	margin: -38px 0 0 -38px;
	background: var(--fx-white);
	color: var(--fx-navy);
	box-shadow: var(--fx-shadow-griff);
	pointer-events: none;
}

/*
 * Traeger der mitwandernden Marken: sitzt genau auf der Kante, die beiden Schilder
 * haengen mit 18px Abstand links und rechts daran.
 */
section.fx11_vorher_nachher .fx11_marken {
	position: absolute;
	bottom: 28px;
	left: var(--fx11-pos);
	z-index: 3;
	pointer-events: none;
}

section.fx11_vorher_nachher .fx11_label {
	position: absolute;
	bottom: 0;
	padding: 13px 18px;
	color: var(--fx-white);
	white-space: nowrap;
}

section.fx11_vorher_nachher .fx11_label--vorher {
	right: 18px;
	background: var(--fx-navy);
}

section.fx11_vorher_nachher .fx11_label--nachher {
	left: 18px;
	background: var(--fx-azure);
}

section.fx11_vorher_nachher .fx11_tag {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;
	padding: 12px 18px;
	background: var(--fx-overlay);
	color: var(--fx-white);
	pointer-events: none;
}

/*
 * Der Regler liegt unsichtbar ueber der ganzen Flaeche: er traegt Tastatur- und
 * Screenreader-Bedienung, waehrend das Ziehen per Pointer im JS passiert.
 */
section.fx11_vorher_nachher .fx11_regler {
	position: absolute;
	inset: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: ew-resize;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
}

section.fx11_vorher_nachher .fx11_regler::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 76px;
	height: 76px;
}

section.fx11_vorher_nachher .fx11_regler::-moz-range-thumb {
	width: 76px;
	height: 76px;
	border: 0;
	border-radius: 0;
	background: transparent;
}

/* Tastaturfokus: der Regler selbst ist unsichtbar, also zeigt die Linie den Fokus. */
section.fx11_vorher_nachher .fx11_flaeche:has(.fx11_regler:focus-visible) .fx11_linie {
	box-shadow: 0 0 0 2px var(--fx-azure);
}

section.fx11_vorher_nachher .fx11_flaeche:has(.fx11_regler:focus-visible) {
	outline: 2px solid var(--fx-azure);
	outline-offset: -2px;
}

/* ---------- 3 Bildpaar-Leiste ---------- */

/*
 * gap:1px auf der Gitterfarbe ergibt die Haarlinien zwischen den Karten.
 * minmax(0, 1fr) statt 1fr: 1fr ist minmax(auto, 1fr), lange Titel ohne
 * Trennmoeglichkeit wuerden die Spalte sonst aufziehen. Bei mehr als drei Paaren
 * bricht das Raster von allein in weitere Zeilen um.
 */
section.fx11_vorher_nachher .fx11_leiste {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin-top: 1px;
	background: var(--fx-line-tint);
}

/* Weniger als drei Paare: die Leiste fuellt die Zeile, statt rechts eine leere
   Zelle stehen zu lassen. Ab vier Paaren bricht das Raster von allein um. */
section.fx11_vorher_nachher .fx11_leiste--spalten-1 { grid-template-columns: minmax(0, 1fr); }
section.fx11_vorher_nachher .fx11_leiste--spalten-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

section.fx11_vorher_nachher .fx11_karte {
	position: relative;
	display: grid;
	grid-template-columns: clamp(94px, 10.3vw, 132px) minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	min-height: 44px;
	padding: clamp(10px, 1.8vh, 16px) 20px clamp(10px, 1.8vh, 16px) 16px;
	border: 0;
	border-radius: 0;
	background: var(--fx-tint);
	text-align: left;
	cursor: pointer;
	transition: background-color .18s ease;
}

section.fx11_vorher_nachher .fx11_karte:hover,
section.fx11_vorher_nachher .fx11_karte:focus-visible,
section.fx11_vorher_nachher .fx11_karte--aktiv {
	background: var(--fx-white);
}

section.fx11_vorher_nachher .fx11_balken {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 4px;
	background: transparent;
}

section.fx11_vorher_nachher .fx11_karte--aktiv .fx11_balken {
	background: var(--fx-azure);
}

section.fx11_vorher_nachher .fx11_mini {
	position: relative;
	display: block;
	height: clamp(60px, 9vh, 84px);
	overflow: hidden;
	background: var(--fx-line-tint);
}

section.fx11_vorher_nachher .fx11_mini_bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Miniatur zeigt fest halb/halb — links Vorher, rechts Nachher. */
section.fx11_vorher_nachher .fx11_mini_clip {
	position: absolute;
	inset: 0;
	clip-path: inset(0 50% 0 0);
}

section.fx11_vorher_nachher .fx11_mini_linie {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	margin-left: -1px;
	background: var(--fx-white);
}

section.fx11_vorher_nachher .fx11_karte_text {
	display: block;
	min-width: 0;
}

section.fx11_vorher_nachher .fx11_nr {
	display: block;
	margin-bottom: 8px;
	font: 800 var(--fx-fs-label-gross)/1 var(--font-heading);
	font-variant-numeric: tabular-nums;
	color: var(--fx-nummer-aus);
}

section.fx11_vorher_nachher .fx11_karte--aktiv .fx11_nr {
	color: var(--fx-azure);
}

section.fx11_vorher_nachher .fx11_karte_titel {
	display: block;
	font: 600 var(--fx-fs-karte-titel)/1.35 var(--font-body);
	color: var(--fx-navy);
	overflow-wrap: anywhere;
}

section.fx11_vorher_nachher .fx11_fussnote {
	margin: 18px 0 0;
	color: var(--fx-text);
}

/* ---------- 4 Media-Queries (zuletzt) ---------- */

@media (max-width: 991px) {
	section.fx11_vorher_nachher .fx11_kopf {
		display: block;
		margin-bottom: 22px;
	}

	section.fx11_vorher_nachher .fx11_topline {
		margin-bottom: 14px;
	}

	section.fx11_vorher_nachher .fx11_untertitel {
		margin-top: 12px;
	}

	section.fx11_vorher_nachher .fx11_hinweis {
		margin-top: 12px;
		max-width: none;
	}

	/*
	 * Randlos: die Flaeche laeuft ueber die Seitenstege der .fx-band hinaus und
	 * nimmt die volle Breite. Die Hoehe folgt auch hier dem Bildformat — mit einer
	 * festen Hoehe waere von einem Hochkantfoto wieder nur ein Streifen zu sehen.
	 */
	/*
	 * Querformat: randlos ueber die Seitenstege, wie im Entwurf — es fuellt die
	 * Breite ohnehin aus.
	 */
	section.fx11_vorher_nachher .fx11_flaeche:not(.fx11_flaeche--hoch) {
		--fx11-hoehe: min(380px, var(--fx-buehne-mittel));
		width: auto;
		margin-inline: calc(var(--fx-gutter) * -1);
		max-height: var(--fx11-hoehe);
	}

	/*
	 * Hochformat: kein Randlos-Zug. Die Flaeche ist dort schmaler als der Steg,
	 * der negative Rand haette sie nach links aus der Mitte gezogen — bei 768px
	 * lag sie 188px daneben.
	 */
	section.fx11_vorher_nachher .fx11_flaeche--hoch {
		--fx11-hoehe: min(560px, 62vh);
		margin-inline: auto;
	}

	section.fx11_vorher_nachher .fx11_griff {
		gap: 6px;
		width: 56px;
		height: 56px;
		margin: -28px 0 0 -28px;
	}

	section.fx11_vorher_nachher .fx11_griff .fx-icon {
		width: 16px;
		height: 16px;
	}

	section.fx11_vorher_nachher .fx11_regler::-webkit-slider-thumb {
		width: 56px;
		height: 56px;
	}

	section.fx11_vorher_nachher .fx11_regler::-moz-range-thumb {
		width: 56px;
		height: 56px;
	}

	section.fx11_vorher_nachher .fx11_marken {
		bottom: 16px;
	}

	section.fx11_vorher_nachher .fx11_label {
		padding: 10px 12px;
	}

	section.fx11_vorher_nachher .fx11_label--vorher {
		right: 12px;
	}

	section.fx11_vorher_nachher .fx11_label--nachher {
		left: 12px;
	}

	section.fx11_vorher_nachher .fx11_tag {
		padding: 9px 14px;
	}

	/* Mobil steht im Tag nur die Zaehlung, der Titel steht ohnehin in der Leiste. */
	section.fx11_vorher_nachher .fx11_tag_titel {
		display: none;
	}

	/* Die Leiste wird zur wischbaren Kartenreihe, ebenfalls randlos. */
	section.fx11_vorher_nachher .fx11_leiste {
		display: flex;
		gap: 1px;
		margin-inline: calc(var(--fx-gutter) * -1);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	section.fx11_vorher_nachher .fx11_leiste::-webkit-scrollbar {
		display: none;
	}

	section.fx11_vorher_nachher .fx11_karte {
		flex: 0 0 172px;
		scroll-snap-align: start;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		min-height: 48px;
		padding: 12px;
	}

	section.fx11_vorher_nachher .fx11_mini {
		height: 90px;
	}

	section.fx11_vorher_nachher .fx11_nr {
		margin-bottom: 6px;
	}

	section.fx11_vorher_nachher .fx11_fussnote {
		margin-top: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	section.fx11_vorher_nachher .fx11_karte {
		transition: none;
	}
}