/* TOJA · Immobilien-Karussell
   ----------------------------------------------------------------------
   Die Kacheln bleiben, wie Propstack sie liefert. Nur ihre Anordnung
   ändert sich: aus dem starren Raster wird eine Bahn, die sich seitlich
   verschieben lässt - mit Pfeilen, per Wischen und mit den Pfeiltasten.
   ---------------------------------------------------------------------- */

.toja-karussell {
	position: relative;
}

/* ------------------------------------------------------------- Die Bahn */

.toja-karussell__bahn {
	display: flex !important;
	/* Das Seiten-CSS setzt hier einen eigenen Abstand; das Karussell rechnet
	   die Kachelbreite aus diesem Wert, beide muessen zusammenpassen. */
	gap: 24px !important;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	/* Platz fuer den Schatten der angehobenen Kachel */
	padding: 10px 4px 44px;
	margin: -10px -4px -36px;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
	/* Laedt ein Bild nach, waehrend die Bahn geblaettert ist, kann der
	   Browser die Stelle von sich aus nachkorrigieren und dabei an den
	   Anfang zurueckspringen. Das hier schaltet die Nachkorrektur ab. */
	overflow-anchor: none;
}

.toja-karussell__bahn::-webkit-scrollbar { display: none; }

/**
 * Die Breite steht bewusst doppelt da und mit Vorrang.
 * Sobald die Maus auf einer Kachel steht, verliert genau diese Kachel
 * ihre normalen Groessenangaben - ohne Vorrang schrumpft sie dann auf
 * wenige Pixel zusammen und die ganze Reihe rutscht durcheinander.
 * Mit `!important` bleibt das Mass in jedem Fall stehen.
 */
.toja-karussell__bahn > * {
	flex: 0 0 calc((100% - 48px) / 3) !important;
	width: calc((100% - 48px) / 3) !important;
	min-width: 0 !important;
}

/**
 * Warum kein Einrasten (scroll-snap)?
 * Es sorgt zwar fuer saubere Zwischenstopps, laesst die Bahn aber jedes
 * Mal neu einrasten, wenn sich eine Kachel veraendert - und das tut sie,
 * sobald die Maus daraufsteht und sie sich anhebt. Die Bahn sprang dann
 * eine Kachel weiter, ohne dass jemand geklickt hat. Die Pfeile und die
 * Punkte rechnen den Zielpunkt ohnehin selbst aus, das Einrasten wird
 * also nicht gebraucht.
 */

/**
 * Bilder werden erst beim Heranblaettern geladen. Bis dahin hat das Bild
 * keine eigene Groesse, und weil im Seiten-CSS Hoehe 100 Prozent steht,
 * wuchs der Bildbereich ins Uferlose - die Kacheln waren dreimal so hoch
 * wie vorgesehen. Das Bild liegt deshalb hier im Bildbereich statt in
 * dessen Textfluss: Damit gibt allein das Seitenverhaeltnis 4:3 die Hoehe
 * vor, geladen oder nicht.
 */
.toja-karussell__bahn .tjps-card__media {
	height: auto !important;
	overflow: hidden;
}

.toja-karussell__bahn .tjps-card__media img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

@media (max-width: 900px) {
	.toja-karussell__bahn { gap: 16px !important; }
	.toja-karussell__bahn > * {
		flex-basis: calc((100% - 16px) / 2) !important;
		width: calc((100% - 16px) / 2) !important;
	}
}

@media (max-width: 600px) {
	.toja-karussell__bahn > * {
		flex-basis: 86% !important;
		width: 86% !important;
	}
}

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

.toja-karussell__pfeil {
	position: absolute;
	top: 38%;
	z-index: 3;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--color-line, #DCE5EF);
	background: #fff;
	color: var(--color-blue-deep, #1F4685);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 26px rgba(15, 30, 60, .18);
	transition: background-color 200ms ease, color 200ms ease, opacity 200ms ease;
}

.toja-karussell__pfeil:hover {
	background: var(--color-blue-deep, #1F4685);
	color: #fff;
}

.toja-karussell__pfeil:focus-visible {
	outline: 3px solid var(--color-blue, #2B5FAD);
	outline-offset: 3px;
}

.toja-karussell__pfeil svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.toja-karussell__pfeil--zurueck { left: -22px; }
.toja-karussell__pfeil--vor { right: -22px; }

.toja-karussell__pfeil[hidden],
.toja-karussell__pfeil:disabled {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 1180px) {
	.toja-karussell__pfeil--zurueck { left: 2px; }
	.toja-karussell__pfeil--vor { right: 2px; }
}

@media (max-width: 600px) {
	.toja-karussell__pfeil { width: 42px; height: 42px; top: 34%; }
}

/* --------------------------------------------------------------- Punkte */

.toja-karussell__punkte {
	display: flex;
	justify-content: center;
	gap: 9px;
	margin-top: 22px;
}

.toja-karussell__punkt {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--color-line, #DCE5EF);
	cursor: pointer;
	transition: background-color 200ms ease, width 200ms ease;
}

.toja-karussell__punkt[aria-current="true"] {
	width: 26px;
	border-radius: 999px;
	background: var(--color-blue-deep, #1F4685);
}

.toja-karussell__punkt:focus-visible {
	outline: 3px solid var(--color-blue, #2B5FAD);
	outline-offset: 3px;
}

/* Wer Bewegung reduziert haben moechte, bekommt keine Schiebe-Animation. */
@media (prefers-reduced-motion: reduce) {
	.toja-karussell__bahn { scroll-behavior: auto; }
	.toja-karussell__punkt { transition: none; }
}