/* ==========================================================================
   Immomakler Einzelobjekt-Ansicht (.immomakler-single)
   Überlagert Bootstraps Panel-/Spalten-Styling mit dem Sallier-Design-System.
   Bootstrap-Klassen (.row, .col-sm-*, .panel, .list-group) bleiben strukturell
   erhalten, werden hier aber optisch vollständig überschrieben.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Globaler Wrapper — CSS-Grid damit Galerie, Titel, Details und Kontakt
   unabhängig voneinander positioniert werden können, auch wenn sie im DOM
   in verschiedenen Bootstrap-Wrappern stecken.
   -------------------------------------------------------------------------- */

.immomakler-single {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	position: relative;
	z-index: 1;

	display: grid;
	grid-template-columns: 0 3fr 2fr 0;
	grid-template-areas:
		"gallery  gallery  gallery  gallery"
		".        title    title    ."
		".        subtitle subtitle ."
		".        details  contact  ."
		".        desc     desc     ."
		"kontakt  kontakt  kontakt  kontakt"
		".        units    units    ."
		".        aehnl    aehnl    .";
	column-gap: 0;
	row-gap: 0;
}


/* Dach-SVG unten rechts — bricht aus dem 1440px-Container heraus, damit die Position
   identisch zur vollen-Breite-Section auf Projektseiten ist.
   right: -99px verschiebt relativ zum Container-Rand, der zusätzliche
   (100vw - 100%) / 2 -Term kompensiert den seitlichen Weißraum auf breiten Viewports. */
.immomakler-single::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: calc(-99px - (100vw - 100%) / 2);
	width: 684px;
	height: 659px;
	background-image: url("/wp-content/uploads/2026/08/Sallier_Dach_hell.svg");
	background-repeat: no-repeat;
	background-size: 684px 659px;
	background-position: right bottom;
	pointer-events: none;
	z-index: -1;
}

/* --------------------------------------------------------------------------
   Grid-Bereiche: direkte Kinder + durch display:contents freigesetzte Elemente
   -------------------------------------------------------------------------- */

/* Direkte Kinder */
.immomakler-single .property-title                 { grid-area: title;    margin-top: 30px; }
.immomakler-single .property-subtitle              { grid-area: subtitle; }
.immomakler-single .immomakler-property-excerpt    { display: none !important; }

/* Buttons-Zeile ausblenden */
.immomakler-single .row:has(.property-actions):not(:has(.immomakler-gallery)) {
	display: none !important;
}

/* Große Inhalts-Row (ROW 1) — display:contents → Kinder landen direkt im Grid */
.immomakler-single .row:has(.immomakler-gallery) {
	display: contents;
}

/* Galerie-Spalte: explizit in gallery-Area platzieren + Bootstrap-Padding entfernen */
.immomakler-single .col-xs-12:has(.immomakler-gallery) {
	grid-area: gallery;
	padding: 0 !important;
	width: 100% !important;
	float: none !important;
}

/* Col-xs-12 mit Beschreibung */
.immomakler-single .col-xs-12:has(.property-description) {
	grid-area: desc;
	padding: 80px 0 !important;
	width: 100% !important;
	float: none !important;
}

/* Wrapper-Row für Karte+Formular: volle Breite → grauer Kontakt-Streifen */
.immomakler-single .row:has(.property-contactform):not(:has(.immomakler-gallery)) {
	grid-area: kontakt;
	display: grid;
	grid-template-columns: var(--space-8) 3fr 2fr var(--space-8); /* eigenes Innen-Padding für grauen Streifen */
	background: #f6f6f6;
	padding-top: 80px;
	padding-bottom: 80px;
	margin-left: 0;
	margin-right: 0;
}

/* Karte und Anfrageformular als direkte Grid-Kinder des Kontakt-Streifens */
.immomakler-single .col-sm-6:has(.property-map) {
	grid-column: 2;
	padding: 0 var(--space-8) 0 0 !important;
	width: 100% !important;
	float: none !important;
}
.immomakler-single .col-sm-6:has(.property-contactform) {
	grid-column: 3;
	padding: 0 !important;
	width: 100% !important;
	float: none !important;
}

/* Einheiten-Tabelle */
.immomakler-single-project-units { grid-area: units; margin-top: var(--space-10); }

/* --------------------------------------------------------------------------
   Titel & Untertitel
   -------------------------------------------------------------------------- */

/* Gleiche Design-Token-Variablen wie die globale h1-Regel in style.css —
   zieht automatisch mit wenn das Design-System geändert wird. */
.immomakler-single .property-title,
.immomakler h1 {
	font-family: var(--font-h1) !important;
	font-size: var(--text-h1) !important;
	font-weight: var(--weight-semibold) !important;
	color: var(--color-primary) !important;
	letter-spacing: var(--tracking-tight) !important;
	text-transform: none !important;
	margin: 0 0 var(--space-2) !important;
	padding-top: 30px !important;
	padding-bottom: 10px !important;
}

.immomakler-single .property-subtitle {
	font-family: var(--font-body) !important;
	font-size: var(--text-body, 18px) !important;
	font-weight: var(--weight-light) !important;
	color: var(--color-text) !important;
	margin: 0 0 var(--space-6) !important;
	padding-bottom: 0 !important;
}

/* Glyphicon-Marker neben dem Standort */
.immomakler-single .property-subtitle .glyphicon {
	display: none;
}

/* --------------------------------------------------------------------------
   Kurzbeschreibung
   -------------------------------------------------------------------------- */

.immomakler-single .immomakler-property-excerpt {
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text);
	max-width: 800px;
	margin: 0 0 var(--space-6) !important;
}

/* --------------------------------------------------------------------------
   Aktionsbuttons (Übersicht, PDF, merken, Direktanfrage)
   -------------------------------------------------------------------------- */

.immomakler-single .property-actions.btn-group,
.immomakler-single .property-navigation.btn-group {
	display: none !important;
}

.immomakler-single .property-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: 0 0 var(--space-8) !important;
}

/* Bootstrap .btn-group löst border-radius/z-index — hier zurücksetzen */
.immomakler-single .property-actions.btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.immomakler-single .property-actions .btn,
.immomakler-single .property-actions a.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0.4em 1.2em;
	background-color: var(--color-primary);
	color: #FFFFFF !important;
	border: 1px solid var(--color-primary);
	border-radius: 0;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: var(--weight-light);
	text-decoration: none;
	text-transform: none;
	letter-spacing: var(--tracking-wide);
	line-height: 1.6;
	cursor: pointer;
	transition: filter var(--transition-fast);
	box-shadow: none;
}

.immomakler-single .property-actions .btn:hover,
.immomakler-single .property-actions a.btn:hover {
	filter: brightness(0.85);
	color: #FFFFFF !important;
	background-color: var(--color-primary);
}

.immomakler-single .property-actions .btn .glyphicon {
	font-size: 13px;
}

/* --------------------------------------------------------------------------
   Bootstrap-Spalte .col-sm-push-5 "unwrappen" — Galerie und Kontaktkarte
   landen direkt im .immomakler-single-Grid.
   -------------------------------------------------------------------------- */

.immomakler-single .col-sm-push-5 {
	display: contents;
}

.immomakler-single .col-sm-pull-7 {
	grid-area: details;
	width: 100% !important;
	right: 0 !important;
	margin-right: 0;
	padding-left: 0;
	padding-right: var(--space-10); /* Abstand zur Kontaktkarte rechts */
	float: none !important;
}

/* --------------------------------------------------------------------------
   Galerie — JS baut .projektseite-galerie-Struktur; CSS kommt vollständig aus projektseite.css
   -------------------------------------------------------------------------- */

/* Die neue Galerie übernimmt grid-area: gallery per JS (inline style).
   Das Original wird per JS versteckt — kein eigener CSS-Block nötig. */
.immomakler-single .immomakler-gallery {
	display: none;
}

/* Plugin setzt display:block + padding:0 auf alle divs im .panel-body — alle Galerie-Elemente
   müssen deshalb mit !important zurückgesetzt werden. */
.immomakler-single .projektseite-galerie-reihe {
	position: absolute !important;
	left: 15px !important;
	bottom: 15px !important;
	padding: 8px !important;
}

.immomakler-single .projektseite-galerie-grid {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	gap: 15px !important;
	padding: 0 !important;
}

.immomakler-single .projektseite-galerie-grid img {
	display: block !important;
	flex: 0 0 auto !important;
	height: clamp(50px, 8vw, 95px) !important;
	width: auto !important;
	aspect-ratio: 16 / 9 !important;
	object-fit: cover !important;
}

.immomakler-single .projektseite-galerie-pfeil {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	color: #FFFFFF !important;
	background: var(--color-primary) !important;
}

/* Aktives Thumbnail hervorheben (gleiche Klasse wie auf Projektseiten) */
.immomakler-single .projektseite-galerie-grid img.ist-aktiv {
	outline: 2px solid var(--color-primary);
	outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   Panel-Chrome entfernen (Bootstrap .panel, .panel-default, .panel-heading,
   .panel-body, .panel-footer)
   -------------------------------------------------------------------------- */

.immomakler-single .panel,
.immomakler-single .panel-default {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
}

.immomakler-single .panel-heading,
.immomakler-single .panel-default > .panel-heading {
	background: transparent !important;
	border: none;
	padding: 0;
	margin: 0 0 var(--space-4);
}

.immomakler-single .panel-heading .panel-title {
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: var(--text-heading);
	color: var(--color-primary) !important;
	margin: 0 !important;
	padding-bottom: 0 !important;
	text-align: left;
}

.immomakler-single .panel-body {
	padding: 0;
}

/* --------------------------------------------------------------------------
   Objektdaten-Liste (.property-details UL.list-group > LI.list-group-item)
   Optik wie .projekt-fakten .et_pb_row_nested
   -------------------------------------------------------------------------- */

.immomakler-single .list-group {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.immomakler-single .list-group-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	padding: 10px 0 !important;
	border: none !important;
	border-bottom: 1px solid var(--border-default) !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--color-text);
}

/* Immomakler rendert innerhalb jedes .list-group-item ein .row mit .dt und .dd */
.immomakler-single .list-group-item .row {
	display: flex;
	flex-wrap: nowrap;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}

.immomakler-single .list-group-item .dt,
.immomakler-single .list-group-item .col-sm-5 {
	flex: 0 0 50% !important;
	width: 50% !important;
	max-width: 50% !important;
	padding-left: 0 !important;
	padding-right: var(--space-3) !important;
	font-size: var(--text-body) !important;
	font-weight: 700 !important;
	color: var(--color-text);
	word-break: normal;
	overflow-wrap: break-word;
}

.immomakler-single .list-group-item .dd,
.immomakler-single .list-group-item .col-sm-7 {
	flex: 0 0 50% !important;
	width: 50% !important;
	max-width: 50% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	font-size: var(--text-body) !important;
	font-weight: var(--weight-light) !important;
	color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Abschnittsüberschriften innerhalb der Panels
   -------------------------------------------------------------------------- */

.immomakler-single .property-details,
.immomakler-single .property-features,
.immomakler-single .property-epass,
.immomakler-single .property-description,
.immomakler-single .property-map,
.immomakler-single .property-contactform,
.immomakler-single .property-contact {
	margin-bottom: var(--space-10);
}


/* --------------------------------------------------------------------------
   Ausstattung (.property-features) — kommaseparierte Liste oder <ul>
   -------------------------------------------------------------------------- */

.immomakler-single .property-features ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-6);
}

.immomakler-single .property-features li {
	font-size: 16px;
	color: var(--color-text);
	font-weight: var(--weight-light);
	padding: var(--space-1) 0;
}

.immomakler-single .property-features li::before {
	content: "–";
	margin-right: var(--space-2);
	color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Kontaktformular-Panel ausblenden
   -------------------------------------------------------------------------- */

.immomakler-contactform-panel { display: none !important; }
.immomakler-single .property-contactform { display: none !important; }
.immomakler-single .property-features { display: none !important; }
.immomakler-single .property-epass { display: none !important; }
/* Lage + Karte sind jetzt im Tab — separate .property-map-Box ausblenden */
.immomakler-single .property-map { display: none !important; }
/* Plugin-Credit-Link ausblenden */
.immomakler-single > a[href*="wp-immomakler"] { display: none !important; }
/* mitarbeiter.css macht jede .et_pb_row mit .mitarbeiter-item (ohne .projekt-fakten) zu einem
   Team-Grid. Das äußere Divi-Row der Immomakler-Seite wird damit erfasst — hier zurücksetzen. */
/* Spezifität (0,3,0): gleich der mitarbeiter.css-Regel die diese Zeile zu einem Team-Grid macht;
   immomakler-single.css lädt später → gewinnt bei gleicher Spezifität durch source order. */
.et_pb_row:has(.immomakler-single):not(.projekt-fakten) {
	display: block !important;
	grid-template-columns: none !important;
}
/* mitarbeiter.css setzt .et_pb_module innerhalb der Zeile auf display:contents — das würde
   auch Divi-Wrapper innerhalb der Immomakler-Seite kollabieren. Hier zurücksetzen. */
.et_pb_row:has(.immomakler-single):not(.projekt-fakten) .et_pb_module,
.et_pb_row:has(.immomakler-single):not(.projekt-fakten) .et_pb_module_inner,
.et_pb_row:has(.immomakler-single):not(.projekt-fakten) .et_pb_mitarbeiter_module {
	display: revert !important;
}

/* Mitarbeiter-Karte: dieselbe Darstellung wie auf der Projektseite (projektseite.css lädt hier
   nicht — Regeln daher direkt übernommen, scoped auf den Immomakler-Kontext). */
.immomakler-single .mitarbeiter-picture,
.immomakler-single .mitarbeiter-info {
	width: 225px;
}
.immomakler-single .mitarbeiter-picture {
	height: 225px;
	padding-top: 0;
}
.immomakler-single .mitarbeiter-item {
	box-shadow: none;
	min-width: 0;
	max-width: 356px;
}
.immomakler-single .mitarbeiter-item:hover {
	transform: none;
	box-shadow: none;
}

/* Immomakler-Kontaktdaten-Box: Rahmen/Hintergrund entfernen, nur Überschrift + Liste ausblenden */
.immomakler-single .property-contact {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
}
.immomakler-single .property-contact .panel-heading,
.immomakler-single .property-contact .list-group {
	display: none !important;
}

/* Bootstrap-Reset (.immomakler a { background: transparent }) für et_pb_button neutralisieren */
.immomakler a.et_pb_button {
	background-color: var(--color-accent) !important;
	color: #fff !important;
}

.immomakler a.et_pb_button:hover {
	background-color: var(--color-accent-hover) !important;
	color: var(--color-surface) !important;
}

.immomakler-single .property-contact .bewerber-button {
	display: block;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--space-6);
}

/* Mitarbeiter-Karte im Kontaktbereich — identisch zu .projekt-fakten in projektseite.css:
   kompaktere Größe (225px statt 280px), kein Schatten, kein Hover-Effekt. */
.immomakler-single .property-contact .mitarbeiter-picture {
	padding: 0 0 var(--space-2) 0 !important;
	width: 225px;
	height: 225px;
}

.immomakler-single .property-contact .mitarbeiter-info {
	width: 225px;
	padding: var(--space-2) 0 var(--space-8) !important;
	box-sizing: border-box;
	text-align: left;
}

.immomakler-single .property-contact .mitarbeiter-item {
	box-shadow: none;
	min-width: 0;
	max-width: 356px;
	margin-left: auto;
	margin-right: auto;
}

.immomakler-single .property-contact .mitarbeiter-item:hover {
	transform: none;
	box-shadow: none;
}

/* Position identisch zu .mitarbeiter-info .mitarbeiter-position in mitarbeiter.css —
   dynamisch über CSS-Variablen, damit Änderungen am Design-System automatisch greifen */
.immomakler-single .property-contact .mitarbeiter-position {
	font-family: var(--font-body) !important;
	font-weight: var(--weight-semibold) !important;
	font-size: 16px !important;
	line-height: 1.3 !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
	color: var(--color-primary) !important;
	margin-bottom: 10px !important;
	min-height: calc(1.3em * 2) !important;
}

/* Kontaktinfos identisch zu .mitarbeiter-contact in mitarbeiter.css — dynamisch */
.immomakler-single .property-contact .mitarbeiter-contact p {
	font-size: var(--text-body) !important;
	display: flex !important;
	align-items: center !important;
	gap: var(--space-2) !important;
}

.immomakler-single .property-contact .mitarbeiter-contact .sallier-icon {
	color: var(--color-primary) !important;
}

.immomakler-single .property-contact .mitarbeiter-contact {
	min-height: 108px;
}

.immomakler-single .property-contact .mitarbeiter-contact a {
	color: var(--color-text) !important;
	text-decoration: none !important;
}

.immomakler-single .property-contact .mitarbeiter-contact a:hover {
	color: var(--color-accent) !important;
}

/* Grid-Wrapper zurücksetzen — fürs Team-Grid gedacht, hier nicht benötigt */
.immomakler-single .property-contact .et_pb_row:has(.mitarbeiter-item) {
	display: block;
}


/* --------------------------------------------------------------------------
   Kontaktformular (.property-contactform)
   -------------------------------------------------------------------------- */

.immomakler-single .property-contactform .wpcf7-form label,
.immomakler-single .property-contactform label {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: var(--weight-light);
	color: var(--color-text);
	display: block;
	margin-bottom: var(--space-1);
}

.immomakler-single .property-contactform input[type="text"],
.immomakler-single .property-contactform input[type="email"],
.immomakler-single .property-contactform input[type="tel"],
.immomakler-single .property-contactform textarea,
.immomakler-single .property-contactform select {
	width: 100%;
	box-sizing: border-box;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--border-default);
	border-radius: 0;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--color-text);
	background: #FFFFFF;
	outline: none;
	transition: border-color var(--transition-fast);
}

.immomakler-single .property-contactform input:focus,
.immomakler-single .property-contactform textarea:focus {
	border-color: var(--color-primary);
}

.immomakler-single .property-contactform input[type="submit"],
.immomakler-single .property-contactform .wpcf7-submit,
.immomakler-single .property-contactform .btn-primary {
	display: inline-block;
	padding: 0.4em 1.4em;
	background-color: var(--color-primary);
	color: #FFFFFF !important;
	border: 1px solid var(--color-primary);
	border-radius: 0;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: var(--weight-light);
	letter-spacing: var(--tracking-wide);
	line-height: 1.6;
	cursor: pointer;
	text-transform: none;
	transition: filter var(--transition-fast);
}

.immomakler-single .property-contactform input[type="submit"]:hover,
.immomakler-single .property-contactform .wpcf7-submit:hover,
.immomakler-single .property-contactform .btn-primary:hover {
	filter: brightness(0.85);
}


/* --------------------------------------------------------------------------
   Kontaktkarte (.property-contact) — grid-area: contact
   -------------------------------------------------------------------------- */

.immomakler-single .property-contact {
	grid-area: contact;
	padding: var(--space-6);
	background: var(--color-surface);
	border: 1px solid var(--border-default);
}

/* Bild-Größe kommt von mitarbeiter.css (.mitarbeiter-picture img) — kein Override nötig */

.immomakler-single .property-contact p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-text);
	margin: 0 0 var(--space-1);
}

.immomakler-single .property-contact a:not(.et_pb_button) {
	color: var(--color-primary) !important;
	text-decoration: none;
}

.immomakler-single .property-contact a:not(.et_pb_button):hover {
	color: var(--color-primary) !important;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Vollbreite-Blöcke (Beschreibung, Karte, Anfrageformular, Einheiten-Tabelle)
   -------------------------------------------------------------------------- */

.immomakler-single .col-xs-12:not(.col-sm-7):not(.col-sm-5) {
	padding-left: 0;
	padding-right: 0;
}

/* Beschreibungstext — globale p-Stile gelten, nur margin ergänzt */
.immomakler-single .property-description p,
.immomakler-single .property-description span {
	font-size: var(--text-body) !important;
	line-height: 24px !important;
	margin: 0 0 var(--space-4);
}

/* --------------------------------------------------------------------------
   Lage-Karte
   -------------------------------------------------------------------------- */

.immomakler-single .property-map iframe {
	width: 100%;
	min-height: 350px;
	border: none;
	display: block;
}

/* --------------------------------------------------------------------------
   Einheiten-Karussell (.immomakler-single-project-units)
   Optik 1:1 wie .projekt-karussell (projekt-karussell.css).
   -------------------------------------------------------------------------- */

.immomakler-single-project-units {
	margin-top: var(--space-10);
	overflow: visible;
}

/* Kopfzeile: Überschrift links, Pfeile rechts */
.immomakler-einheiten-kopf {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 24px;
}

.immomakler-einheiten-kopf h2 {
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: var(--text-heading) !important;
	color: var(--color-primary) !important;
	margin: 0 !important;
	padding-bottom: 0 !important;
}

/* Pfeil-Buttons (identisch zu .projekt-karussell-pfeil) */
.immomakler-einheiten-pfeile {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}

.immomakler-einheiten-pfeil {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--color-primary);
	border-radius: 0;
	color: var(--color-primary);
	cursor: pointer;
	font: inherit;
}

.immomakler-einheiten-pfeil:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Scrollbarer Karussell-Streifen (identisch zu .et_pb_portfolio_items) */
.immomakler-einheiten-karussell {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
	padding: 20px 16px;
	min-height: 500px;
}

.immomakler-einheiten-karussell::-webkit-scrollbar {
	display: none;
}

/* Karte (identisch zu .et_pb_portfolio_item) */
.immomakler-einheiten-karte {
	box-sizing: border-box;
	flex: none;
	width: 560px;
	padding-right: 24px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
}

.immomakler-einheiten-karte:last-child {
	width: 536px;
	padding-right: 0;
}

/* Bild-Container (identisch zu .et_pb_portfolio_image) */
.immomakler-einheiten-karte__bild {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1;
	background: var(--color-surface);
	box-shadow: var(--shadow-soft);
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	overflow: visible;
}

.immomakler-einheiten-karte__bild:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
}

/* Link umhüllt Bild + Meta */
.immomakler-einheiten-karte__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none !important;
}

/* Bild (identisch zu .et_pb_portfolio_image img) */
.immomakler-einheiten-karte__link img {
	width: 100%;
	height: 360px;
	object-fit: cover;
	display: block;
	flex-shrink: 0;
	min-height: 0;
}

/* Platzhalter wenn kein Bild vorhanden */
.immomakler-einheiten-karte__platzhalter {
	width: 100%;
	height: 360px;
	background: var(--color-canvas);
	flex-shrink: 0;
}

/* "Mehr erfahren"-Badge (identisch zu .projekt-karussell-hover-badge) */
.immomakler-einheiten-hover-badge {
	position: absolute;
	top: -12px;
	right: -12px;
	display: flex;
	align-items: center;
	padding: 12px 20px;
	background-color: var(--color-primary);
	color: #FFFFFF;
	font-family: var(--font-body);
	font-weight: var(--weight-semibold);
	font-size: 14px;
	letter-spacing: var(--tracking-wide);
	border-radius: 0;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
	z-index: 3;
}

.immomakler-einheiten-karte__bild:hover .immomakler-einheiten-hover-badge {
	opacity: 1;
	transform: translateY(0);
}

@media (hover: none), (max-width: 768px) {
	.immomakler-einheiten-hover-badge {
		display: none;
	}
}

/* Meta-Bereich (identisch zu .meta .meta a) */
.immomakler-einheiten-karte__meta {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 24px;
}

/* Haupttitel (identisch zu .projekt-schlagworte) */
.immomakler-einheiten-karte__titel {
	display: block;
	margin: 0;
	padding: 0;
	font-family: var(--font-heading);
	font-weight: var(--weight-semibold);
	font-size: 24px;
	line-height: 1.3;
	min-height: calc(24px * 1.3 * 2);
	letter-spacing: var(--tracking-wide);
	color: var(--color-primary);
	text-decoration: none;
}

/* Typ-Zeile — wie .property-subtitle auf der Einzelansicht */
.immomakler-einheiten-karte__typ {
	display: block;
	margin: 4px 0 0;
	padding: 0;
	font-family: var(--font-body);
	font-weight: var(--weight-light);
	font-size: var(--text-body, 18px);
	letter-spacing: normal;
	color: var(--color-text);
	text-decoration: none;
}

.immomakler-aehnliche {
	grid-area: aehnl;
	margin-top: var(--space-16);
}

/* Fakten-Liste (Wohnfläche, Zimmer, Preis) */
.immomakler-einheiten-karte__fakten {
	list-style: none;
	margin: 0 !important;
	margin-top: 16px !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.immomakler-einheiten-karte__fakten li {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
}

.immomakler-einheiten-karte__fakt-label {
	font-family: var(--font-body);
	font-weight: var(--weight-light);
	font-size: var(--text-body);
	letter-spacing: 0.56px;
	color: var(--color-text);
}

.immomakler-einheiten-karte__fakt-wert {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--text-body);
	letter-spacing: 0.56px;
	color: var(--color-text);
}

@media (hover: none) {
	.immomakler-einheiten-karte__bild:hover {
		transform: none;
		box-shadow: var(--shadow-soft);
	}
}

@media (max-width: 767px) {
	.immomakler-einheiten-karussell {
		padding-left: 0;
		padding-right: 0;
	}

	.immomakler-einheiten-karte,
	.immomakler-einheiten-karte:last-child {
		width: 100%;
		padding-right: 0;
	}
}

/* --------------------------------------------------------------------------
   Mittlere Breakpoints (Container berührt den Viewport-Rand)
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1440px) {
	.immomakler-single {
		grid-template-columns: var(--space-8) 3fr 2fr var(--space-8);
	}

	.immomakler-single .row:has(.property-contactform):not(:has(.immomakler-gallery)) {
		grid-template-columns: var(--space-8) 3fr 2fr var(--space-8);
	}
}

/* --------------------------------------------------------------------------
   Mobil
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
	.immomakler-single {
		padding: 0;
		grid-template-columns: var(--space-4) minmax(0, 1fr) var(--space-4);
		grid-template-areas:
			"gallery  gallery  gallery"
			".        title    ."
			".        subtitle ."
			".        details  ."
			".        desc     ."
			".        contact  ."
			"kontakt  kontakt  kontakt"
			".        units    ."
			".        aehnl    .";
	}

	/* Alle direkten Grid-Kinder dürfen maximal 100% der Grid-Spalte einnehmen */
	.immomakler-single > *,
	.immomakler-single .row {
		min-width: 0;
		max-width: 100%;
	}

	/* Bootstrap .row hat margin: 0 -15px — aufheben damit es nicht überläuft */
	.immomakler-single .row {
		margin-left: 0;
		margin-right: 0;
	}

	/* Bootstrap .col-* haben padding: 0 15px — aufheben */
	.immomakler-single .row > [class*="col-"] {
		padding-left: 0;
		padding-right: 0;
		min-width: 0;
		max-width: 100%;
	}

	.immomakler-single .col-sm-pull-7 {
		padding-right: 0;
	}

	.immomakler-single .row:has(.property-contactform):not(:has(.immomakler-gallery)) {
		grid-template-columns: var(--space-4) minmax(0, 1fr) var(--space-4);
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.immomakler-single .col-sm-6:has(.property-map) {
		grid-column: 2;
		padding-right: 0 !important;
		margin-bottom: var(--space-10);
	}

	.immomakler-single .col-sm-6:has(.property-contactform) {
		grid-column: 2;
	}

	.immomakler-single .col-xs-12:has(.property-description) {
		padding: 48px 0 !important;
	}

	/* Dach-SVG auf Mobile ausblenden (zu breit für den Viewport) */
	.immomakler-single::after {
		display: none;
	}

	/* Mitarbeiter-Modul auf Mobile auf 225px begrenzen */
	.immomakler-single .property-contact .mitarbeiter-item {
		max-width: 225px;
	}

	.immomakler-single .property-contact .mitarbeiter-position {
		hyphens: none;
	}

	.immomakler-single .property-contact .mitarbeiter-picture {
		width: 180px !important;
		height: 180px !important;
	}

	.immomakler-single .property-contact .mitarbeiter-info {
		width: 100% !important;
	}

	/* Titel auf Mobile: etwas kompakter */
	.immomakler-single .property-title,
	.immomakler h1 {
		font-size: clamp(28px, 8vw, var(--text-h1)) !important;
	}

	.immomakler-single .list-group-item .immomakler-label,
	.immomakler-single .list-group-item > strong:first-child,
	.immomakler-single .list-group-item > span:first-child {
		flex: 0 0 120px;
	}

	.immomakler-single .property-actions {
		gap: var(--space-2);
	}

	.immomakler-single .property-actions .btn,
	.immomakler-single .property-actions a.btn {
		font-size: 14px;
		padding: 0.35em 0.9em;
	}
}

/* ==========================================================================
   Objektbeschreibung / Lage — Tab-Navigation (Stil wie Projekt-Grid-Filter)
   ========================================================================== */

.immomakler-single .objekt-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: var(--space-6);
}

.immomakler-single .objekt-tabs__tab {
	padding: 8px 20px !important;
	background: transparent !important;
	border: 1px solid var(--color-primary) !important;
	border-radius: 2px !important;
	color: var(--color-primary) !important;
	font-family: var(--font-body) !important;
	font-weight: var(--weight-semibold) !important;
	font-size: 15px !important;
	text-transform: uppercase !important;
	letter-spacing: var(--tracking-wide) !important;
	line-height: normal !important;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.immomakler-single .objekt-tabs__tab--aktiv {
	background: var(--color-primary) !important;
	color: var(--color-surface) !important;
}

.immomakler-single .objekt-tabs__panel {
	display: none;
}

.immomakler-single .objekt-tabs__panel--aktiv {
	display: block;
}