/* =========================================================================
   JUSTIMMO Integration – Stylesheet (Liste + Detail zusammengeführt)
   Farben zentral als Variablen, alle Selektoren namespaced (.justimmo-* / .ji-*)
   ========================================================================= */

:root {
	--ji-accent: #C9A27F;   /* warmer Akzent (Preis, Buttons, Navigation) */
	--ji-accent-dark: #B6916D;
	--ji-badge: #C0392B;    /* "VERMITTELT"-Badge */
	--ji-border: #e6e6e6;
	--ji-text: #333;
}

/* =========================================================================
   1) FILTERFORMULAR
   ========================================================================= */
.justimmo-filter {
	margin-bottom: 20px;
	max-width: 640px;
}

/* Zeile mit zwei nebeneinanderliegenden Feldern (Immobilienart + Vermarktung) */
.justimmo-filter .ji-filter-row {
	display: flex;
	gap: 12px;
}
.justimmo-filter .ji-filter-row .ji-ff {
	flex: 1 1 0;
	min-width: 0;
}

/* Einzelnes Filterfeld: Label über Auswahl */
.justimmo-filter .ji-ff {
	margin-bottom: 12px;
}
.justimmo-filter .ji-ff label {
	display: block;
	margin-bottom: 4px;
	font-size: .95em;
	color: #555;
}
.justimmo-filter select {
	width: 100%;
	padding: 8px 10px;
	box-sizing: border-box;
}
.justimmo-filter .ji-filter-submit {
	padding: 8px 18px;
	cursor: pointer;
}

@media (max-width: 600px) {
	.justimmo-filter .ji-filter-row { flex-direction: column; gap: 0; }
}

/* =========================================================================
   2) IMMOBILIEN-LISTE
   ========================================================================= */
.justimmo-listing {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 20px 0;
	align-items: stretch;
}

/* Der <a> um jede Karte ist das Flex-Item.
   flex-grow: 0 -> Karten bleiben immer gleich breit; eine nicht
   vollständige letzte Zeile bleibt linksbündig, der Rest bleibt leer. */
.ji-link {
	flex: 0 0 calc((100% - 40px) / 3);
	display: block;
	text-decoration: none;
	color: inherit;
}

.justimmo-container {
	position: relative;
	background: #fff;
	border: 1px solid #ddd;
	padding: 15px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-height: 500px;
	height: 100%;
}

/* "VERMITTELT"-Badge */
.justimmo-container .ji-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	background: var(--ji-badge);
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	line-height: 1;
	padding: 6px 8px;
	border-radius: 4px;
	letter-spacing: .3px;
}

.justimmo-image {
	width: 100%;
	height: 200px;
	overflow: hidden;
	margin-bottom: 10px;
}
.justimmo-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.justimmo-title {
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 10px;
	color: var(--ji-text);
}

.justimmo-bottom { margin-top: auto; }

/* Kauf/Miete-Badge unten rechts in der Ort-Zeile (Markenbeige, weiße Schrift) */
.ji-deal-badge {
	display: inline-block;
	background: var(--ji-accent);
	color: #fff;
	font-size: .9em;          /* Größe/Art wie .justimmo-category */
	padding: 3px 10px;
	border-radius: 6px;
	white-space: nowrap;
}

.justimmo-meta {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}
.justimmo-category { font-size: .9em; color: #555; }
.justimmo-price    { font-size: 1em; color: var(--ji-accent); font-weight: bold; }

.justimmo-floorarea { font-size: .9em; color: var(--ji-text); margin-bottom: 10px; }

.justimmo-location {
	font-size: .9em;
	color: var(--ji-text);
	margin-bottom: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

/* Liste responsive */
@media screen and (max-width: 768px) {
	.ji-link { flex: 0 0 calc((100% - 20px) / 2); }
}
@media screen and (max-width: 480px) {
	.ji-link { flex: 0 0 100%; }
	.justimmo-container { min-height: 350px; }
	.justimmo-title { margin-bottom: 5px; }
	.justimmo-container .ji-badge { font-size: 11px; padding: 5px 7px; }
}

/* =========================================================================
   3) DETAILANSICHT – Grundgerüst
   ========================================================================= */
.ji-detail-wrap {
	margin: 0 auto;
	max-width: 1200px;
}

.ji-detail-wrap h1.ji-title {
	font-size: clamp(24px, 3.2vw, 44px) !important;
	line-height: 1.2 !important;
	margin: 0 0 16px;
}
@media (min-width: 1400px) {
	.ji-detail-wrap h1.ji-title { font-size: 48px !important; }
}

.ji-badge-inline {
	display: inline-block;
	margin-left: 10px;
	padding: 6px 10px;
	background: var(--ji-badge);
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	border-radius: 4px;
	vertical-align: middle;
	letter-spacing: .3px;
}

.ji-detail-grid { display: block; gap: 32px; }
@media (min-width: 1024px) {
	.ji-detail-grid { display: grid; grid-template-columns: 1fr 360px; }
}

/* =========================================================================
   4) GALERIE
   ========================================================================= */
.ji-gallery { margin-bottom: 16px; }

.ji-main-img {
	position: relative;
	background: #f7f7f7;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.ji-main-img img {
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: contain;
	border-radius: 8px;
	cursor: zoom-in;
	display: block;
}

.ji-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	appearance: none;
	background: transparent !important;
	border: none !important;
	padding: 0;
	margin: 0;
	width: auto;
	height: auto;
	box-shadow: none !important;
	color: var(--ji-accent);
	font-size: 42px;
	line-height: 1;
	cursor: pointer;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .25);
}
.ji-prev { left: 8px; }
.ji-next { right: 8px; }
.ji-nav:hover { color: var(--ji-accent-dark); }

.ji-thumbs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
}
.ji-thumbs img {
	width: 88px;
	height: 58px;
	object-fit: cover;
	cursor: pointer;
	border-radius: 6px;
	opacity: .9;
}
.ji-thumbs img.active {
	outline: 2px solid var(--ji-accent);
	opacity: 1;
}

/* =========================================================================
   5) RECHTE SPALTE / BOXEN
   ========================================================================= */
.ji-aside { position: relative; }
@media (min-width: 1024px) {
	.ji-aside { position: sticky; top: 16px; height: fit-content; }
}

.ji-box {
	border: 1px solid var(--ji-border);
	padding: 14px 16px;
	margin-bottom: 16px;
	background: #fff;
}

.ji-price { font-size: 22px; font-weight: 700; margin-bottom: 8px; color: var(--ji-accent); }

.ji-dl { margin: 0; }
.ji-dl dt { font-weight: 600; margin-top: 8px; }
.ji-dl dd { margin: 2px 0 8px; }

/* =========================================================================
   6) BESCHREIBUNG mit Auf-/Zuklappen
   ========================================================================= */
.ji-desc-wrap h2 { margin: 16px 0 8px; }

.ji-desc {
	position: relative;
	max-height: 320px;
	overflow: hidden;
	transition: max-height .25s ease;
}
.ji-desc::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 60px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
	pointer-events: none;
}
.ji-desc.open {
	max-height: none;
	overflow: visible;
}
.ji-desc.open::after { display: none; }

.ji-toggle {
	margin-top: 8px;
	border: 1px solid #ddd;
	background: #f6f6f6;
	padding: 8px 12px;
	border-radius: 8px;
	cursor: pointer;
	font: inherit;
}

/* =========================================================================
   7) ANFRAGEFORMULAR
   ========================================================================= */
.ji-msg-success { color: #137a3b; margin: 0 0 8px; }
.ji-msg-errors  { color: #c00; margin: 0 0 8px 18px; padding: 0; }

.ji-field { margin-bottom: 8px; }
.ji-box input[type="text"],
.ji-box input[type="email"],
.ji-box select,
.ji-box textarea {
	width: 100%;
	padding: 6px 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	box-sizing: border-box;
}
.ji-box input[type="checkbox"] { margin-right: 4px; }

.ji-btn {
	margin-top: 6px;
	width: 100%;
	padding: 10px 12px;
	border: none;
	border-radius: 4px;
	background: var(--ji-accent);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}
.ji-btn:hover { background: var(--ji-accent-dark); }

/* Checkbox-Layout mobil sauber ausrichten */
@media (max-width: 640px) {
	.ji-aside .ji-box .ji-form .ji-presets label {
		display: flex;
		align-items: center;
		gap: 6px;
		margin: 6px 0;
		line-height: 1.2;
		padding-left: 0 !important;
	}
	.ji-aside .ji-box .ji-form .ji-presets input[type="checkbox"],
	.ji-aside .ji-box .ji-form .ji-field input[type="checkbox"] {
		-webkit-appearance: auto !important;
		appearance: auto !important;
		width: 16px !important;
		height: 16px !important;
		transform: none !important;
		margin: 0 !important;
		flex: 0 0 16px;
	}
	.ji-aside .ji-box .ji-form .ji-field label {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		line-height: 1.25;
	}
}

/* =========================================================================
   8) LIGHTBOX
   ========================================================================= */
.ji-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .92);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}
.ji-lightbox.open { display: flex; }
.ji-lightbox img { max-width: 95vw; max-height: 90vh; object-fit: contain; }
.ji-lightbox .ji-nav { color: var(--ji-accent); font-size: 54px; text-shadow: none; }
.ji-lightbox .ji-prev { left: 24px; }
.ji-lightbox .ji-next { right: 24px; }
.ji-lightbox .ji-close {
	position: absolute;
	top: 14px;
	right: 14px;
	border: none;
	background: transparent;
	color: #fff;
	font-size: 32px;
	cursor: pointer;
}