/**
 * Styles für [immomakler-orte-slider] - Slider mit den Orten, in denen
 * Immobilien vorhanden sind.
 *
 * Eigene Datei, weil der Shortcode für Seiten außerhalb des Immobilienbereichs
 * gedacht ist (Startseite). Dort lädt WP-ImmoMakler seine Styles nicht.
 *
 * Der Slider läuft über Swiper 8 (wp-content/swiperjs). Breite und Anschnitt
 * der Karten kommen aus diesem Stylesheet, Bewegung und Pfeil-Logik von
 * Swiper.
 *
 * Selektoren tragen durchgängig die Elternklasse als Präfix - das Theme-Reset
 * (hello-elementor) stylt Elemente wie button und ul mit höherer Spezifität
 * als eine einzelne Klasse.
 */

/*
 * --beon-orte-peek: wie viel von der nächsten Karte hereinschaut.
 *
 * Wichtig zum Verständnis: overflow:visible und Scrollen schließen sich aus -
 * ein Element mit sichtbarem Überlauf lässt sich nicht scrollen. Der Blick auf
 * die Nachbarkarten entsteht deshalb über die Kartenbreite: Die Karte ist um
 * den Peek-Wert schmaler als die Spur, dadurch ragt die nächste herein.
 */
/*
 * Zentrierter Slider: eine große Karte in der Mitte, links und rechts je eine
 * angeschnittene.
 *
 * --beon-orte-side steuert, wie viel von den Nachbarn zu sehen ist - gemessen
 * an der Gesamtbreite. Bei 25% ist die Mittelkarte rund halb so breit wie der
 * Slider, links und rechts liegt also jeweils genau eine halbe Karte.
 *
 * --beon-orte-scale verkleinert die Nachbarn, dadurch wirkt die Mittelkarte
 * größer, ohne dass sich das Layout verschiebt.
 */
.beon-orte {
	position: relative;
	--beon-orte-gap: 25px;
	--beon-orte-side: 25%;
	--beon-orte-scale: 0.84;
}

/* --- Spur ------------------------------------------------------------- */

/*
 * Aufbau von Swiper 8: .swiper (Ausschnitt) > .swiper-wrapper (Spur) >
 * .swiper-slide. Abstand und Bewegung übernimmt Swiper, hier werden nur die
 * Listen-Vorgaben zurückgesetzt und die Kartenbreite gesetzt.
 */
.beon-orte .beon-orte__viewport {
	/* Der Ausschnitt darf nicht über den Inhaltsbereich hinausragen. */
	width: 100%;
}

.beon-orte .beon-orte__track {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Swiper läuft mit slidesPerView:'auto' und übernimmt genau diese Breite.
 * Der Abstand steckt NICHT in der Breite - den setzt Swiper als eigenen Wert
 * (spaceBetween), der aus derselben CSS-Variablen ausgelesen wird.
 *
 * Rechnung: Von der Gesamtbreite gehen die beiden sichtbaren Nachbaranteile
 * und die beiden Abstände ab, der Rest ist die Mittelkarte.
 */
.beon-orte .beon-orte__slide {
	width: calc(
		100%
		- 2 * var(--beon-orte-side)
		- 2 * var(--beon-orte-gap)
	);
	height: auto;
	margin: 0;
	/*
	 * Nachbarn zurückgenommen. transform verschiebt nichts im Layout, die
	 * Karten bleiben also an ihrer berechneten Position.
	 */
	transform: scale(var(--beon-orte-scale));
	transform-origin: center center;
	opacity: 0.55;
	transition: transform 750ms ease, opacity 750ms ease;
}

/* Die zentrierte Karte in voller Größe. */
.beon-orte .beon-orte__slide.swiper-slide-active {
	transform: scale(1);
	opacity: 1;
}

/* --- Karte ------------------------------------------------------------ */
.beon-orte .beon-orte__card {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	background-color: var(--color-navy-900, #001731);
}

.beon-orte .beon-orte__media {
	display: block;
	aspect-ratio: 4 / 3;
}

.beon-orte .beon-orte__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.beon-orte .beon-orte__card:hover .beon-orte__media img,
.beon-orte .beon-orte__card:focus-visible .beon-orte__media img {
	transform: scale(1.04);
}

/*
 * Verlauf von unten: hält den Text lesbar, egal wie hell das Foto an dieser
 * Stelle ist.
 */
.beon-orte .beon-orte__body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 24px;
	background: linear-gradient(
		180deg,
		rgba(0, 23, 49, 0) 0%,
		rgba(0, 23, 49, 0.75) 55%,
		rgba(0, 23, 49, 0.95) 100%
	);
}

.beon-orte .beon-orte__name {
	font-family: var(--mercurydisplay, inherit);
	font-size: var(--size-22, 22px);
	line-height: 1.2;
}

.beon-orte .beon-orte__count {
	font-size: var(--size-12, 12px);
	font-weight: 500;
	letter-spacing: var(--letter-spacing-1-4, 1.4px);
	text-transform: uppercase;
	color: var(--color-gold-600, #c29b40);
}

.beon-orte .beon-orte__card:focus-visible {
	outline: var(--stroke-width, 2px) solid var(--color-gold-600, #c29b40);
	outline-offset: 3px;
}

/* --- Pfeile ----------------------------------------------------------- */

/*
 * Gibt es nichts zu blättern, setzt Swiper diese Klasse an die Leiste
 * (konfiguriert als lockClass).
 */
.beon-orte .beon-orte__nav--locked {
	display: none;
}

.beon-orte .beon-orte__nav {
	display: flex;
	justify-content: flex-end;
	gap: var(--abstand-sm, 8px);
	margin-top: var(--abstand-lg, 24px);
}

.beon-orte .beon-orte__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: var(--stroke-width-1, 1px) solid var(--color-gray-400, #d6d6d6);
	border-radius: 0;
	background: none;
	cursor: pointer;
	transition: border-color 200ms ease;
}

.beon-orte .beon-orte__arrow::after {
	content: "";
	width: 26px;
	height: 16px;
	background-image: url(/wp-content/uploads/2026/08/arrow-right-long-sharp-light-full.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 300ms ease;
}

/* Ein Icon für beide Richtungen - der Zurück-Pfeil wird gespiegelt. */
.beon-orte .beon-orte__arrow--prev::after {
	transform: rotate(180deg);
}

.beon-orte .beon-orte__arrow:hover,
.beon-orte .beon-orte__arrow:focus-visible {
	border-color: var(--color-gold-600, #c29b40);
}

.beon-orte .beon-orte__arrow--next:hover::after,
.beon-orte .beon-orte__arrow--next:focus-visible::after {
	transform: translateX(5px);
}

.beon-orte .beon-orte__arrow--prev:hover::after,
.beon-orte .beon-orte__arrow--prev:focus-visible::after {
	transform: rotate(180deg) translateX(5px);
}

.beon-orte .beon-orte__arrow:focus-visible {
	outline: var(--stroke-width, 2px) solid var(--color-gold-600, #c29b40);
	outline-offset: 2px;
}

/* Am Anfang bzw. Ende der Spur - setzt das Script. */
.beon-orte .beon-orte__arrow--disabled {
	opacity: 0.35;
	cursor: default;
	border-color: var(--color-gray-400, #d6d6d6);
}

.beon-orte .beon-orte__arrow--disabled:hover::after {
	transform: none;
}

.beon-orte .beon-orte__arrow--prev.beon-orte__arrow--disabled:hover::after {
	transform: rotate(180deg);
}

/* Beschriftung bleibt für Screenreader erhalten, ist aber unsichtbar. */
.beon-orte .beon-orte__arrow-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Responsiv --------------------------------------------------------- */

/*
 * Auf kleineren Bildschirmen bekommen die Nachbarn weniger Raum, sonst bliebe
 * für die Mittelkarte zu wenig übrig. Der Verkleinerungsfaktor wird ebenfalls
 * milder, damit die seitlichen Karten nicht zu Streifen schrumpfen.
 */
@media (max-width: 1023px) {
	.beon-orte {
		--beon-orte-side: 15%;
		--beon-orte-scale: 0.88;
	}
}

@media (max-width: 767px) {
	.beon-orte {
		--beon-orte-side: 8%;
		--beon-orte-gap: 16px;
		--beon-orte-scale: 0.92;
	}
}

@media (prefers-reduced-motion: reduce) {
	.beon-orte .beon-orte__media img,
	.beon-orte .beon-orte__arrow,
	.beon-orte .beon-orte__arrow::after {
		transition: none;
	}

	.beon-orte .beon-orte__card:hover .beon-orte__media img {
		transform: none;
	}
}