/* ========================================
   Immobilien - Filterleiste
   ======================================== */

.immo-filter-group{
	display:flex;
	flex-direction:column;
	gap:0.4rem;
	flex:1;
	min-width:0;
}

.immo-filter-label{
	font-size:0.8rem;
	font-variation-settings:var(--font-condensed);
	color:var(--color-darkgrey);
	text-transform:uppercase;
	letter-spacing:0.03em;
}

.immo-filter-buttons{
	display:flex;
	gap:0.4rem;
	flex-wrap:wrap;
}

.immo-filter-btn{
	padding:0.35rem 0.9rem;
	border:var(--border-width) solid var(--color-blue);
	border-radius:var(--button-border-radius);
	background:var(--color-white);
	color:var(--color-blue);
	font-family:inherit;
	font-size:0.85rem;
	font-weight:700;
	cursor:pointer;
	transition:background 0.2s ease, color 0.2s ease;
}

.immo-filter-btn:hover{
	background:var(--color-lightblue);
}

.immo-filter-btn.active{
	background:var(--color-blue);
	color:var(--color-white);
}

.immo-filter-select{
	padding:0.35rem 0.9rem;
	border:var(--border-width) solid var(--input-border-color);
	border-radius:var(--button-border-radius);
	background:var(--input-background);
	color:var(--input-color);
	font-family:inherit;
	font-size:0.85rem;
	cursor:pointer;
}

/* ========================================
   Immobilien - Liste
   ======================================== */
.immo-liste{
	padding:var(--padding-content);
}

/* ========================================
   Immobilien - Karte (Basis)
   ======================================== */
.immo-card{
	display:flex;
	flex-direction:column;
	background:var(--color-white);
	border-radius:var(--border-radius);
	overflow:hidden;
	text-decoration:none;
	color:var(--text-color);
	transition:box-shadow 0.2s ease;
}

.immo-card:hover{
	box-shadow:0 4px 20px rgba(0, 0, 0, 0.12);
}

.immo-card-image{
	position:relative;
	aspect-ratio:4/3;
	overflow:hidden;
	background:var(--color-lightgrey);
}

.immo-card-image img{
	width:100%;
	height:100%;
	object-fit:cover;
}

/* Karte - Swiper */
.immo-card-swiper{
	width:100%;
	height:100%;
}

.immo-card-swiper .swiper-slide{
	display:flex;
	align-items:center;
	justify-content:center;
}

.immo-card-swiper .swiper-slide img{
	width:100%;
	height:100%;
	object-fit:cover;
}

.immo-card-swiper .swiper-slide a{
	display:block;
	width:100%;
	height:100%;
}

.immo-card-swiper .swiper-button-prev,
.immo-card-swiper .swiper-button-next{
	color:var(--color-white);
	--swiper-navigation-size:1.2rem;
	background:rgba(0, 0, 0, 0.35);
	width:2rem;
	height:2rem;
	border-radius:50%;
	opacity:0;
	transition:opacity 0.2s ease;
}

.immo-card:hover .swiper-button-prev,
.immo-card:hover .swiper-button-next{
	opacity:1;
}

.immo-card-swiper .swiper-button-prev:hover,
.immo-card-swiper .swiper-button-next:hover{
	background:rgba(0, 0, 0, 0.6);
}

/* NEU-Badge: Eckband oben rechts */
.immo-badges{
	position:absolute;
	top:0;
	right:0;
	z-index:2;
	overflow:visible;
}

.immo-badges .badge-neu{
	display:block;
	position:absolute;
	top:1.25rem;
	right:-2.25rem;
	width:9rem;
	text-align:center;
	transform:rotate(45deg);
	border-radius:0;
	font-variation-settings:var(--font-condensed);
}

/* VERKAUFT / RESERVIERT: unten im Bild */
.immo-card-status{
	position:absolute;
	top:1rem;
	left:0;
	display:flex;
	z-index:2;
	border-top-right-radius:var(--border-radius);
	border-bottom-right-radius:var(--border-radius);
	overflow:hidden;
}

.immo-card-status .badge{
	padding:0 0.5rem 0 0.25rem;
}

.badge{
	display:inline-block;
	font-size:1.25rem;
	font-weight:700;
	text-transform:uppercase;
	font-variation-settings:var(--font-condensed);
}

.badge-neu{
	font-size:1.75rem;
	font-weight:700;
	line-height:1.1;
	text-transform:uppercase;
	background:var(--color-red);
	color:var(--color-white);
}

.badge-reserviert{
	background:var(--color-green);
	color:var(--color-white);
}

.badge-verkauft{
	background:var(--color-red);
	color:var(--color-white);
}

/* Karte - Body */
.immo-card-body{
	flex:1 1 auto;
	display:flex;
	flex-direction:column;
	gap:0.4rem;
	padding:var(--padding-box);
	text-decoration:none;
	color:var(--text-color);
}

a.immo-card-body:hover{
	color:var(--text-color);
}

.immo-card-type{
	font-size:0.75rem;
	text-transform:uppercase;
	letter-spacing:0.05em;
	color:var(--color-darkgrey);
	font-variation-settings:var(--font-condensed);
}

.immo-card-title{
	flex:1 1 auto;
	font-family:var(--font-family-header);
	font-size:1.1rem;
	line-height:1.3;
	margin:0;
	color:var(--color-black);
	overflow:hidden;
	font-variation-settings:var(--font-regular);
}

.immo-card-location{
	/* font-size:0.85rem; */
	color:var(--color-black);
}

.immo-card-details{
	display:flex;
	gap:1rem;
	font-size:0.85rem;
	color:var(--color-darkgrey);
	padding-top:0.4rem;
	border-top:1px solid var(--color-lightgrey);
	margin-top:0.3rem;
}

.immo-card-details > div{
	display:flex;
	align-items:center;
	gap:0.2rem;
}

.immo-card-details .material-symbols-outlined{
	font-size:1rem;
	color:var(--color-blue);
}

.immo-card-price-meta{
	display:flex;
	justify-content:space-between;
	align-items:baseline;
	border-top:1px solid var(--color-blue);
	padding-top:0.5rem;
	margin-top:0.25rem;
}

.immo-card-price{
	font-family:var(--font-family-header);
	font-size:1.15rem;
	font-weight:700;
	color:var(--color-black);
}

.immo-card-meta{
	font-size:0.85rem;
	color:var(--color-black);
	font-variation-settings:var(--font-condensed);
}

.immo-card-teaser{
	& h1,
	& h2,
	& h3,
	& h4,
	& h5,
	& h6{
		font-family:var(--font-family-header);
		font-size:1.1rem;
		line-height:1.3;
		color:var(--color-blue);
		margin:0;
	}
}

/* ========================================
   Immobilien - Highlights Slider
   ======================================== */
.immo-highlights .immo-card{
	width:calc((var(--main-width) - 2 * var(--gap-contentNarrow)) / 3);
	height:100%;
}

/* ========================================
   Immobilien - Detail
   ======================================== */
 
/* Topbar */
.immo-detail-topbar{
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.immo-detail-title{
	margin:0;
	color:var(--color-black);
}

/* ========================================
   Galerie (Grid)
   ======================================== */
.immo-gallery-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:var(--gap-contentNarrow);
}

.immo-gallery-grid-single{
}

.immo-gallery-main{
	position:relative;
	overflow:hidden;
	border-radius:var(--border-radius);
	aspect-ratio:4/3;
}

.immo-gallery-main > .immo-gallery-link{
	display:block;
	height:100%;
}

.immo-gallery-main img{
	width:100%;
	height:100%;
	object-fit:cover;
}

.immo-gallery-side{
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-template-rows:1fr 1fr;
	gap:var(--gap-contentNarrow);
	aspect-ratio:4/3;
	overflow:hidden;
}

.immo-gallery-side > .immo-gallery-link{
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
	overflow:hidden;
	border-radius:var(--border-radius);
}

.immo-gallery-side img{
	display:block;
}

.immo-gallery-more-overlay{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(var(--color-blue-rgb), 0.55);
	color:var(--color-white);
	font-size:1rem;
	font-weight:700;
	pointer-events:none;
}

.immo-gallery-hidden{
	display:none;
}

/* ========================================
   Detail - Zwei-Spalten-Layout
   ======================================== */
.immo-detail-content{
	display:grid;
	grid-template-columns:2fr 1fr;
	gap:var(--gap-contentImmo);
	margin-bottom:2rem;
}

.immo-detail-main{
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:var(--gap-contentImmo);
}

.immo-detail-sidebar{
	background: var(--color-white);
	border-radius: var(--border-radius);
	padding: var(--padding-box);
	position:sticky;
	top:calc(2rem + var(--topnav-height));
	align-self:start;
}

/* ========================================
   Detail - Preis-Leiste
   ======================================== */
.immo-detail-price-bar{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:1rem;
}

.immo-detail-price{
	display:flex;
	flex-direction:column;
}

.immo-detail-price-value{
	font-family:var(--font-family-header);
	font-size:1.6rem;
	font-weight:700;
	color:var(--color-black);
}

.immo-detail-courtage{
	font-size:0.85rem;
	color:var(--color-darkgrey);
}

.immo-detail-actions{
	display:flex;
	gap:0.75rem;
	align-items:center;
}

/* ========================================
   Detail - Kategorisierte Eckdaten (volle Breite, 4 Spalten)
   ======================================== */
.immo-detail-facts{
	background:var(--color-white);
	border-radius: var(--border-radius);
	padding: var(--padding-box);
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:var(--gap-contentNarrow);
	margin-bottom:1rem;
}

.immo-facts-category{
	min-width:0;
	border-right:2px solid var(--color-blue);
}

.immo-facts-category:last-child{
	border-right:0 none;
}

.immo-detail-facts .immo-facts-grid{
	grid-template-columns:1fr;
}

.immo-facts-category-header{
	display:flex;
	gap:0.25rem;
	align-items:center;
	margin-bottom:1rem;
}

.immo-facts-category-header > div{
	display:flex;
	justify-content:center;
	align-items:center;
	width:1.25rem;
	aspect-ratio:1/1;
}

.immo-facts-category-header > div > img{
	width:100%;
}

.immo-facts-category-header h4{
	font-family:var(--font-family-header);
	font-size:1.15rem;
	font-weight:700;
	color:var(--text-header-color);
	margin:0;
}

.immo-facts-grid{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:1rem;
}

.immo-fact{
	display:flex;
	flex-direction:column;
}

.immo-fact-label{
	font-size:0.9rem;
}

.immo-fact-value{
	font-weight:500;
}

.immo-zusatz{
}

/* ========================================
   Detail - Sidebar (sticky)
   ======================================== */

/* ========================================
   Detail - Sektionen (Texte)
   ======================================== */
.immo-detail-section{
	background: var(--color-white);
	border-radius: var(--border-radius);
	padding: var(--padding-box);
}

.immo-detail-section h3{
	font-size:1.2rem;
	margin-bottom:0.75rem;
}

.immo-text{
	line-height:1.6;
}

.immo-zusatz-text{
	font-weight:700;
	margin-bottom:0.5rem;
}

.immo-ausstattung-liste{
	list-style:none;
	padding:0;
	margin:0;
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:0.4rem;
}

.immo-ausstattung-liste li{
	padding:0.3rem 0;
	padding-left:1.5rem;
	position:relative;
}

.immo-ausstattung-liste li::before{
	content:'check';
	font-family:'Material Symbols Outlined';
	position:absolute;
	left:0;
	color:var(--color-green);
	font-size:1rem;
}

/* ========================================
   Detail - Energieausweis
   ======================================== */
.immo-epass-layout{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:2rem;
	align-items:start;
}

.immo-epass-table{
	width:100%;
	border-collapse:collapse;
}

.immo-epass-table td{
	padding:0.5rem 0;
	border-bottom:1px solid var(--color-lightgrey);
	font-size:0.9rem;
}

.immo-epass-table td:first-child{
	color:var(--color-darkgrey);
	padding-right:1rem;
}

.immo-epass-table td:last-child{
	text-align:right;
	font-weight:700;
}

.immo-epass-label{
	display:flex;
	flex-direction:column;
	gap:0.75rem;
	padding-top:0.25rem;
}

.immo-epass-klasse-header{
	display:flex;
	align-items:center;
	gap:0.75rem;
	font-size:0.9rem;
	color:var(--color-darkgrey);
}

.immo-epass-badge{
	display:flex;
	align-items:center;
	justify-content:center;
	width:2.5rem;
	height:2.5rem;
	border-radius:0.5rem;
	font-size:1.5rem;
	font-weight:700;
	margin-left:auto;
}

.immo-epass-scale{
	display:flex;
	gap:0.25rem;
}

.immo-epass-scale-item{
	flex:1;
	height:1.1rem;
	border-radius:0.2rem;
	opacity:0.7;
	transition:opacity 0.2s ease;
}

.immo-epass-scale-item.immo-epass-active{
	opacity:1;
	outline:2px solid currentColor;
	outline-offset:1px;
	position:relative;
}

.immo-epass-scale-range{
	display:flex;
	justify-content:space-between;
	font-size:0.75rem;
	color:var(--color-darkgrey);
}

/* Zurueck-Button unterhalb Content */
.immo-detail-bottom{
	text-align:center;
	padding:1.5rem 0;
	margin-bottom:1rem;
}

/* ========================================
   Detail - Sidebar
   ======================================== */
.immo-sidebar-box{
	display:flex;
	flex-direction:column;
	gap:1rem;
}

.immo-sidebar-box h4{
	font-family:var(--font-family-header);
	font-size:1.2rem;
	font-weight:700;
	color:var(--text-header-color);
	margin:00;
}

.immo-sidebar-buttons{
	display:flex;
	flex-direction:column;
	gap:1.5rem;
}

/* ========================================
   Kontaktformular
   ======================================== */
.immo-kontakt{
	background:var(--color-white);
	border-radius:var(--border-radius);
	padding:2rem;
}

.immo-kontakt h3{
	font-size:1.3rem;
	margin-bottom:0.5rem;
}

.immo-kontakt > p{
	color:var(--color-darkgrey);
	margin:0 0 1.5rem 0;
}

/* Status-Banner */
.immo-kontakt-status{
	display:flex;
	align-items:center;
	gap:0.5rem;
	padding:0.75rem 1rem;
	border-radius:var(--border-radius);
	font-size:0.9rem;
	margin-bottom:1.5rem;
	line-height:1.5;
}

.immo-kontakt-status > span{
	font-size:2rem;
	flex-shrink:0;
}

.immo-kontakt-status-reserviert{
	background:rgba(var(--color-green-rgb), 0.15);
	color:var(--color-green);
}

.immo-kontakt-status-verkauft{
	background:rgba(var(--color-red-rgb), 0.15);
	color:var(--color-red);
}

/* Formular */
.immo-kontakt-fields{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:var(--gap-contentSmall);
	margin-bottom:var(--gap-contentSmall);
}

.immo-kontakt-field{
	display:flex;
	flex-direction:column;
	gap:0.25rem;
}

.immo-kontakt-field label{
	font-size:0.85rem;
	font-weight:700;
	font-variation-settings:var(--font-condensed);
}

.immo-kontakt-field label.pflicht::after{
	content:'*';
	color:var(--color-red);
	margin-left:0.15rem;
}

.immo-kontakt-field input{
	padding:0.5rem;
	border:var(--border-width) solid var(--input-border-color);
	border-radius:0.5rem;
	background:var(--input-background);
	font-family:inherit;
	font-size:inherit;
}

#immoEmailBest{
	display:none;
}

.immo-kontakt-datenschutz{
	display:flex;
	gap:0.5rem;
	align-items:flex-start;
	font-size:0.85rem;
	line-height:1.5;
	margin-bottom:var(--gap-contentSmall);
	padding:0.5rem;
	border-radius:0.5rem;
}

.immo-kontakt-datenschutz input[type="checkbox"]{
	margin-top:0.2rem;
	flex-shrink:0;
}

.immo-kontakt-datenschutz a{
	color:var(--link-color);
	text-decoration:underline;
}

.immo-kontakt-datenschutz a:hover{
	color:var(--link-hover-color);
}

.immo-kontakt-submit{
	margin-top:0.5rem;
}

.immo-kontakt-submit .button{
	padding:0.65rem 2rem;
	font-size:1rem;
}

/* Erfolg / Fehler */
.immo-kontakt-erfolg{
	display:flex;
	align-items:center;
	gap:0.5rem;
	padding:1rem;
	background:rgba(65, 164, 55, 0.15);
	border-radius:0.5rem;
	color:var(--color-green);
	font-weight:700;
}

.immo-kontakt-erfolg .material-symbols-outlined{
	font-size:1.5rem;
}

.immo-kontakt-fehler{
	padding:0.75rem 1rem;
	background:rgba(205, 25, 25, 0.15);
	border-radius:0.5rem;
	color:var(--color-red);
	font-size:0.9rem;
	margin-bottom:var(--gap-contentSmall);
}

/* ========================================
   Verwaltung (NICHT AENDERN)
   ======================================== */
.form > .immo-admin-bilder-row{
	flex-direction:column;
}

.immo-admin-bilder{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
	gap:0.75rem;
	width:100%;
}

.immo-admin-bild{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:0.3rem;
	text-align:center;
}

.immo-admin-bild img{
	max-width:100%;
	height:auto;
}

.immo-admin-bild small{
	word-break:break-word;
	font-size:0.75rem;
	color:var(--color-darkgrey);
}