/* PG-Immo Skin — property-specific styles
 * Tokens (--color-*, --space-*, --font-*) are defined in
 * themes/pg-immo/assets/css/main.css. This file only sets property UI. */

/* ---------- Archive grid wrapper ---------- */
.immomakler-archive {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--section-py-tight) var(--container-padding);
}

.pg-property-grid {
	display: grid;
	row-gap: 70px;
	column-gap: 20px;
	grid-template-columns: 1fr;
}

@media (min-width: 40em) {
	.pg-property-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60em) {
	.pg-property-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile: Cards laufen full-bleed bis an die Viewport-Kante (Figma 127:3) —
   das Grid kompensiert das Container-Padding der jeweiligen Section. Gilt
   überall, wo Cards gerendert werden (Archive, Teaser, Related, Region). */
@media (max-width: 60em) {
	.pg-property-grid {
		margin-inline: calc(-1 * var(--container-padding));
	}
}

/* ---------- Archiv-Titelblock — mobile kompakt & zentriert (Figma 6003:699) ---------- */
@media (max-width: 60em) {
	.immomakler-archive .archive-title {
		margin: 0 0 4px;
		font-size: 28px;
		line-height: 35px;
		font-weight: 500;
		text-align: center;
	}

	.immomakler-archive .archive-subtitle {
		margin: 0 0 24px;
		font-size: 18px;
		line-height: 24px;
		font-weight: 400;
		text-align: center;
		color: #4D4D4D;
	}

	/* Filter-Wrap kompensiert das Archive-Padding — sein .container bringt
	   die 15px selbst mit. Ohne das stünde der Filterinhalt doppelt
	   eingerückt (30px statt 15px). Margin-bottom trennt den Suchen-Button
	   von der ersten Property-Card. */
	.immomakler-archive .pg-property-filter-wrap {
		margin-inline: calc(-1 * var(--container-padding));
		margin-bottom: 48px;
	}
}

/* Reset wp-immomakler default wrapper bits we don't want */
.properties.immomakler-archive-grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}
@media (min-width: 40em) { .properties.immomakler-archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60em) { .properties.immomakler-archive-grid { grid-template-columns: repeat(3, 1fr); } }

/* Vendor injiziert inline `.immomakler-single { max-width: …px }` via
   Customizer-Option — verengt die ganze Detail-Seite. Theme steuert die
   Breite selbst (Container/Body-Padding), Vendor-Constraint zurücksetzen. */
body .immomakler-single,
body .immomakler-archive {
	max-width: none;
}

/* Vendor-Bootstrap (immomakler-bootstrap.min.css) zwingt `.immomakler
   .container` per Media-Query auf 750/970/1170px Breite mit 15px Inner-
   Padding. Das verengt unsere Sections innerhalb `.immomakler-single`
   anders als auf der Startseite. Vendor-Constraint hier (unlayered)
   überschreiben, sodass `.container` überall die Theme-Werte nutzt
   (max-width 1440px, padding-inline clamp(24, 6vw, 86px)). */
body .immomakler .container,
body .immomakler-single .container,
body .immomakler-archive .container {
	width: auto;
	max-width: var(--container-max);
	padding-inline: var(--container-padding);
}

/* ---------- Property Card (Figma "Region Detail" layout) ----------
   Atomares Komponenten-Modul. Damit die Karte überall identisch rendert
   (Front-Page-Section, Archive, Detail-Page "Weitere Immobilien", Region-
   Detail-Page, …), sind ALLE Sub-Element-Regeln in einen nested Block
   unter `.property-card` gesteckt. Native CSS-Nesting kompiliert daraus
   Selektoren der Form `.property-card .property-card__foo` (Spezifität
   0,2,0), die jedes Vendor-Selector vom Typ `.immomakler <element>`
   (0,1,1) schlägt — egal in welchem Kontext die Karte platziert ist.

   Regel: Neue Card-Eigenschaften IMMER innerhalb dieses `.property-card`-
   Blocks deklarieren, nicht als Top-Level-Selector. */
/* Selektor doppelt — `.property-card.property-card` (Spezifität 0,2,0)
   schlägt Vendor-Reset `.immomakler article { display: block }` (0,1,1)
   und stellt den flex-column-Layout sicher (CTAs alignen pro Row). */
.property-card.property-card {
	background: #F5F5F5;
	color: var(--color-text);
	display: flex;
	flex-direction: column;
	overflow: hidden;

	/* Media + overlays */
	& .property-card__media {
		position: relative;
		aspect-ratio: 410 / 260;
		overflow: hidden;
		background: var(--color-bg-soft);
	}

	& .property-card__media-link {
		display: block;
		width: 100%;
		height: 100%;
		color: inherit;

		&:hover { opacity: 1; }
	}

	& .property-card__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		transition: transform 0.6s ease;
	}

	&:hover .property-card__image { transform: scale(1.04); }

	& .property-card__image--placeholder {
		background:
			linear-gradient(135deg, var(--color-bg-soft) 25%, transparent 25%) -10px 0,
			linear-gradient(225deg, var(--color-bg-soft) 25%, transparent 25%) -10px 0,
			linear-gradient(315deg, var(--color-bg-soft) 25%, transparent 25%),
			linear-gradient(45deg, var(--color-bg-soft) 25%, transparent 25%);
		background-size: 20px 20px;
		background-color: #fafaf8;
	}

	/* Top-left badge stack */
	& .property-card__badges {
		position: absolute;
		top: var(--space-3);
		left: var(--space-3);
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		z-index: 2;
	}

	& .property-card__badge {
		display: inline-flex;
		align-items: center;
		padding: 4px 10px;
		font-family: var(--font-myriad);
		font-size: 11px;
		line-height: 1.2;
		font-weight: var(--font-weight-medium);
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--color-bg);
		background: var(--color-text);
	}

	/* "NEU" — Eck-Ribbon top-left, 66×66 weiß @ 60 %, Text rotiert -45° */
	& .property-card__badge--new {
		position: absolute;
		top: 0;
		left: 0;
		width: 66px;
		height: 66px;
		z-index: 3;
		background: linear-gradient(135deg, rgb(255 255 255 / 0.6) 50%, transparent 50%);
		pointer-events: none;
	}

	& .property-card__badge--new__text {
		position: absolute;
		top: 18px;
		left: -8px;
		width: 66px;
		transform: rotate(-45deg);
		transform-origin: center;
		text-align: center;
		font-family: var(--font-haboro);
		font-weight: 800;
		font-size: 12px;
		line-height: 1;
		color: #282828;
		letter-spacing: 0;
	}

	/* "Keine Öl- oder Gasheizung" — grünes Eck-Ribbon top-right (Figma):
	   110px-Schrägband #567E53 @ 50 % (::before, clip-path mit Kerbe zur
	   Mitte), darüber 66px-Eckdreieck @ 85 % mit weißem Kreis-Icon
	   (Asset icon-card-eco.svg) und +45° rotiertem weißem Text. */
	& .property-card__badge--green {
		position: absolute;
		top: 0;
		right: 0;
		width: 110px;
		height: 110px;
		z-index: 3;
		pointer-events: none;

		&::before {
			content: "";
			position: absolute;
			inset: 0;
			background: rgb(86 126 83 / 0.5);
			clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 50%);
		}
	}

	& .property-card__badge--green__icon {
		position: absolute;
		top: 0;
		right: 0;
		width: 66px;
		height: 66px;
		display: block;
	}

	& .property-card__badge--green__text {
		position: absolute;
		top: 43px;
		left: 4px;
		width: 108px;
		transform: rotate(45deg);
		transform-origin: center;
		text-align: center;
		font-family: var(--font-myriad);
		font-weight: 600;
		font-size: 9px;
		line-height: 10px;
		color: #fff;
		letter-spacing: 0.02em;
		text-transform: uppercase;
	}

	& .property-card__badge--status { background: #6b6b6b; }
	& .property-card__badge--reserviert { background: #b78c2a; }
	& .property-card__badge--verkauft   { background: #6b6b6b; }
	& .property-card__badge--vermietet  { background: #6b6b6b; }

	/* Bottom overlay: price strip + action icons.
	   Figma 409×107: linear-gradient von unten #000 @ 60% nach oben transparent.
	   Gradient sorgt dafür, dass weißer Preis und Icons auf hellem Foto lesbar
	   bleiben — Verlauf läuft sanft aus, oberer Bildbereich bleibt unverdeckt. */
	& .property-card__overlay {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		min-height: 107px;
		padding-top: 60px;
		background: linear-gradient(to top, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0));
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 0;
		z-index: 2;
		pointer-events: none; /* re-enabled on children */
	}

	& .property-card__price {
		pointer-events: auto;
		margin: 0;
		padding: 0 16px 14px;
		background: transparent;
		color: #fff;
		font-family: var(--font-myriad);
		font-size: 16px;
		line-height: 18px;
		font-weight: 600;
		font-style: italic;
		letter-spacing: 0;
		min-width: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-shadow: 0 1px 4px rgb(0 0 0 / 0.5);
	}

	& .property-card__actions {
		pointer-events: auto;
		list-style: none;
		margin: 0;
		padding: 0 14px 14px 0;
		display: flex;
		align-items: center;
		gap: 12px;
		background: transparent;
	}

	& .property-card__action-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		transition: opacity var(--transition-fast);

		& img { display: block; }
		&:hover { opacity: 0.85; }
	}

	/* Body */
	& .property-card__body {
		padding: 18px 14px 14px 15px;
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		flex: 1;
	}

	& .property-card__title {
		/* Card-Titel in Myriad Semibold (Sans), nicht Haboro (Serif) — Figma
		   "Screendesign" zeigt Sans; Mobile-Titel war bereits Myriad. Feedback
		   KW25 "falsche Schrift". */
		font-family: var(--font-myriad);
		font-size: 22px;
		line-height: 28px;
		font-weight: 600;
		color: #000;
		margin: 0;
		min-height: 56px; /* 2 Zeilen, hält Card-Höhen im Grid konsistent */

		& a {
			color: inherit;
			text-decoration: none;

			&:hover { text-decoration: underline; text-underline-offset: 3px; }
		}
	}

	& .property-card__specs {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 20px;
		font-family: var(--font-myriad);
		font-size: 16px;
		line-height: 22px;
		font-weight: 400;
		color: #4D4D4D;
	}

	& .property-card__spec {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-width: 0;
		padding-block: 8px;
		border-bottom: 3px solid rgb(122 122 122 / 0.15);

		& span {
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	& .property-card__spec-icon {
		flex-shrink: 0;
		color: #4D4D4D;
	}

	/* Footer CTAs — eingerückt 15 links / 14 rechts / 11 unten gem. Figma. */
	& .property-card__footer {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
		margin: 0;
		padding: 0 14px 11px 15px;
	}

	& .property-card__cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 0;
		border: 0;
		padding: 11px 8px 12px;
		height: 41px;
		font-family: var(--font-myriad);
		font-size: 16px;
		line-height: 18px;
		font-weight: 700;
		letter-spacing: 0;
		text-transform: none;
		color: #fff;
		width: 100%;
		text-decoration: none;

		&.btn--ghost-soft {
			background: #A4ACB1;
			color: #fff;

			&:hover { background: #8B949A; }
		}

		&.btn--primary {
			background: #626A6F;
			color: #fff;
			border-color: #626A6F;

			&:hover { background: #4D5560; border-color: #4D5560; }
		}
	}

	/* ---------- Mobile (<60em) — Figma iPhone-Card ---------- */
	@media (max-width: 60em) {
		& .property-card__media {
			aspect-ratio: 393 / 264;
		}

		/* Titel mobil in Myriad Semibold statt Haboro (Figma 127:3) */
		& .property-card__title {
			font-family: var(--font-myriad);
			font-size: 20px;
			line-height: 25px;
			font-weight: 600;
			min-height: 0;
		}

		& .property-card__body {
			padding: 23px 21px 0 20px;
			gap: 16px;
		}

		& .property-card__footer {
			padding: 23px 17px 17px 15px;
		}
	}
}

/* ----------  Section-Button "Weitere Immobilien" / "Mehr ansehen" ----------
   `.section--properties-teaser__more .btn` ist im Theme @layer sections
   definiert — verliert daher gegen unlayered Vendor-CSS wie `.immomakler a`.
   Hier (unlayered im Skin-CSS) mit ausreichender Spezifität neu deklarieren,
   damit der Button überall (auch innerhalb .immomakler-Wrapper) gleich
   rendert. */
.section--properties-teaser .section--properties-teaser__more {
	text-align: center;
	margin-top: 78px;
	margin-bottom: 0;
}

/* Mobile: enger an die Grid-Karten (Figma DEV-03, Rectangle 93 = 42px).
   Muss hier (unlayered) stehen — eine @layer-Regel in main.css verliert
   gegen die unlayered Basisregel oben. */
@media (max-width: 60em) {
	.section--properties-teaser .section--properties-teaser__more {
		margin-top: 42px;
	}
}

.section--properties-teaser__more .btn.btn--ghost-soft {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 188px;
	height: 41px;
	padding: 11px 16px 12px;
	background: transparent;
	border: 1px solid #4D4D4D;
	border-radius: 0;
	color: #4D4D4D;
	font-family: var(--font-myriad);
	font-size: 16px;
	line-height: 18px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;

	&:hover {
		background: #4D4D4D;
		color: #fff;
		border-color: #4D4D4D;
	}
}

/* ---------- Property Card — Pitch variant ("Noch nicht passend?") ----------
   Layout-Spiegel der `.property-card`: oberer Bildbereich (Headline+Subline
   auf Image-Overlay), darunter solider #A4ACB1-Body mit Fließtext, Footer
   mit zwei CTAs (gleiches Split-Grid wie reguläre Card).
   Selector doppelt für Spezifität 0,2,0 — neutralisiert Vendor `.immomakler
   article { display: block }`. */
.property-card.property-card--pitch {
	background: #A4ACB1;
	color: #fff;
	display: flex;
	flex-direction: column;
	overflow: hidden;

	& .property-card--pitch__head {
		position: relative;
		aspect-ratio: 410 / 260;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding: 16px 20px;
		background-color: #4D4D4D;
		background-size: cover;
		background-position: center;
		color: #fff;
	}

	& .property-card--pitch__headline {
		/* Pitch-Headline in Myriad (Sans), nicht Haboro (Serif) — Figma-
		   Screendesign zeigt Sans. Feedback KW25 "falsche Schrift". */
		font-family: var(--font-myriad);
		font-size: 20px;
		line-height: 25px;
		font-weight: 400;
		color: #fff;
		margin: 0 0 12px;
	}

	& .property-card--pitch__subline {
		font-family: var(--font-myriad);
		font-style: italic;
		font-weight: 600;
		font-size: 16px;
		line-height: 18px;
		color: #fff;
		margin: 0;
	}

	& .property-card--pitch__body {
		flex: 1;
		padding: 18px 52px 14px;
		text-align: center;
		font-family: var(--font-myriad);
		font-size: 16px;
		line-height: 22px;
		font-weight: 400;
		color: #fff;

		& p {
			font-family: var(--font-myriad);
			font-size: 16px;
			line-height: 22px;
			font-weight: 400;
			color: #fff;
			margin: 0 0 12px;
		}
		& p:last-child { margin-bottom: 0; }
	}

	& .property-card--pitch__footer {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
		margin: 0;
		padding: 0 14px 11px 15px;
	}

	& .property-card--pitch__cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 41px;
		padding: 0 8px;
		border: 0;
		border-radius: 0;
		font-family: var(--font-myriad);
		font-size: 16px;
		line-height: 18px;
		font-weight: 700;
		letter-spacing: 0;
		text-decoration: none;
		color: #fff;
		cursor: pointer;
		transition: background-color 0.2s ease;
	}

	& .property-card--pitch__cta--more {
		background: #fff;
		color: #4D4D4D;

		&:hover { background: #EAEBEC; color: #4D4D4D; }
	}

	& .property-card--pitch__cta--inquiry {
		background: #626A6F;
		color: #fff;

		&:hover { background: #4D5560; color: #fff; }
	}
}

/* ---------- No results ---------- */
.pg-property-noresult {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--space-9) var(--container-padding);
}

.pg-property-noresult__title {
	font-family: var(--font-haboro);
	font-size: var(--font-size-h2);
	margin: 0 0 var(--space-3);
}

.pg-property-noresult__text {
	font-family: var(--font-myriad);
	color: var(--color-text-muted);
	margin: 0;
}

/* ---------- Pill Filter Bar (sticky below header) ----------
   Komplett unter .pg-property-filter-wrap genested: hebt die Spezifität
   über die elementweiten Vendor-Resets des Bootstrap-Parent-Skins
   (.immomakler h2 / summary / label / input …) — gleiches Muster wie
   .property-card. */
.pg-property-filter-wrap {
	position: sticky;
	top: var(--header-height, 131px);
	z-index: 90; /* below header (100), above content */
	background: var(--color-bg);
	transition: box-shadow var(--transition-base);

	/* Sticky-Schatten nur Desktop — mobil ist der Filter nicht sticky
	   (position: relative im Mobile-Block). */
	@media (min-width: 60em) {
		&.is-stuck {
			box-shadow: 0 6px 12px rgb(0 0 0 / 0.06);
		}
	}

	& .pg-property-filter {
		margin: 0;
	}

	& .pg-property-filter__inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		/* Mehr Abstand links/rechts der Suchbegriffe (Feedback KW25):
		   48px Gap → 24px je Seite des Trennstrichs. */
		gap: 48px;
		/* Etwas mehr Luft zwischen Header und Suchleiste (Feedback KW25). */
		padding-block: 22px 14px;
	}

	/* Heading "Bitte treffen Sie Ihre Auswahl" — nur Mobile sichtbar */
	& .pg-property-filter__heading {
		display: none;
	}

	/* Submit button — pushed to the right via auto-margin */
	& .pg-property-filter__submit {
		--pg-filter-submit-bg: #A4ACB1;
		margin-inline-start: auto;
		padding: 12px 16px 10px 15px;
		background: var(--pg-filter-submit-bg);
		border-color: var(--pg-filter-submit-bg);
		color: #fff;
		font-family: var(--font-myriad);
		font-size: 16px;
		line-height: 18px;
		font-weight: 700;
		letter-spacing: 0;
		text-transform: none;

		&:hover {
			background: transparent;
			color: var(--pg-filter-submit-bg);
		}
	}

	/* ---------- Pill (single filter control) ---------- */
	& .pg-pill {
		position: relative;
		display: inline-block;
	}

	& .pg-pill__summary {
		list-style: none;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 40px;
		padding: 11px 0;
		background: transparent;
		border: 1px solid transparent;
		border-radius: 20px;
		font-family: var(--font-myriad);
		font-size: 16px;
		line-height: 18px;
		font-weight: 400;
		color: #4D4D4D;
		transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);

		&::-webkit-details-marker { display: none; }
		&:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
	}

	/* Boxed variant — Objekt-ID */
	& .pg-pill--boxed .pg-pill__summary {
		padding-inline: 20px;
		background: rgb(122 122 122 / 0.10);
		border: 0.51px solid #000;
		font-weight: 600;

		&:hover { background: rgb(122 122 122 / 0.18); }
	}

	/* Plain pills — hairline divider between adjacent plain pills */
	& .pg-pill:not(.pg-pill--boxed) + .pg-pill:not(.pg-pill--boxed)::before {
		content: "";
		position: absolute;
		/* Trennstrich mittig im 48px-Gap (Feedback KW25). */
		left: -24px;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 40px;
		background: #000;
	}

	& .pg-pill:not(.pg-pill--boxed) .pg-pill__summary:hover {
		color: var(--color-text);
	}

	/* Open-State: kein Background-Highlight, nur der Caret rotiert (Indikator).
	   Boxed-Variante (Objekt-ID) behält ihren eigenen Hover. */
	& .pg-pill--boxed[open] .pg-pill__summary {
		background: rgb(122 122 122 / 0.18);
	}

	& .pg-pill--has-value:not([open]) .pg-pill__summary {
		color: var(--color-text);
	}

	& .pg-pill__icon { flex-shrink: 0; display: block; }
	& .pg-pill__caret {
		flex-shrink: 0;
		display: block;
		transition: transform var(--transition-fast);
	}
	& .pg-pill[open] .pg-pill__caret { transform: rotate(180deg); }

	& .pg-pill__label {
		white-space: nowrap;
		max-width: 220px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Dropdown panel */
	& .pg-pill__dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 5;
		min-width: 190px;
		padding: 0;
		background: #A4ACB1;
		border: 0;
		box-shadow: 0 6px 24px rgb(0 0 0 / 0.08);
	}

	& .pg-pill__dropdown--input {
		min-width: 260px;
		padding: var(--space-3);
	}
	& .pg-pill__dropdown--list  {
		padding: 0;
		/* Breite an den längsten Eintrag anpassen, damit Preis-Bänder wie
		   "€ 1.000.000 – € 2.000.000" einzeilig bleiben (Feedback KW25). */
		width: max-content;
		min-width: 190px;
		max-width: min(380px, 92vw);
	}
	& .pg-pill__dropdown--range {
		display: flex;
		gap: var(--space-3);
		min-width: 280px;
		padding: var(--space-3);
	}

	/* Choice row (radio/checkbox) — ist ein <label>; margin: 0 neutralisiert
	   den Vendor-Reset (.immomakler label { margin-bottom: 5px }) */
	& .pg-pill__choice {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		min-height: 41px;
		margin: 0;
		padding: 11px 16px;
		cursor: pointer;
		font-family: var(--font-myriad);
		font-style: italic;
		font-size: 16px;
		line-height: 18px;
		font-weight: 600;
		color: #fff;
		border-bottom: 1px solid #fff;
		transition: background-color var(--transition-fast);

		&:last-child { border-bottom: 0; }
		&:hover { background: rgb(255 255 255 / 0.12); }

		& input { position: absolute; opacity: 0; pointer-events: none; }

		&:has(input:checked) {
			background: rgb(255 255 255 / 0.18);

			&::after {
				content: "";
				margin-inline-start: auto;
				width: 16px;
				height: 16px;
				background: #fff;
				-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M2 7.5L5.5 11L12 3.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
				        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M2 7.5L5.5 11L12 3.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
			}
		}
	}

	& .pg-pill__choice-label { flex: 1; white-space: nowrap; }

	/* Inputs inside dropdown */
	& .pg-pill__input {
		width: 100%;
		padding: 10px 14px;
		border: 1px solid var(--color-border);
		background: var(--color-bg);
		font: inherit;
		font-size: 14px;

		&:focus { outline: 2px solid var(--color-text); outline-offset: 2px; }
	}

	& .pg-pill__range-field {
		display: flex;
		flex-direction: column;
		gap: 4px;
		flex: 1;
	}

	& .pg-pill__range-label {
		font-family: var(--font-myriad);
		font-size: 12px;
		color: var(--color-text-muted);
		letter-spacing: 0.04em;
	}

	& .pg-pill__empty {
		margin: 0;
		padding: 12px 16px;
		font-family: var(--font-myriad);
		font-size: 14px;
		color: #fff;
		font-style: italic;
	}
}

/* Filter sitzt direkt über dem properties-teaser — Section-Padding-Top reicht
   für die ~112px Distanz zur Headline (siehe Figma). */
.pg-property-filter-wrap + .section--properties-teaser { padding-top: clamp(48px, 7vw, 100px); }

/* Single-Detail: Abstand zwischen grauer Kontakt-Section ("Wir beraten Sie
   gerne") und "Weitere Immobilien" reduzieren (Feedback KW25). Die Kontakt-
   Section bringt unten bereits 80px mit — der Section-Top-Abstand entfällt. */
.pg-property-single + .section--properties-teaser { padding-top: 0; }

/* "Zurück zur Übersicht"-Button — nur mobil, unter der Galerie (Figma DEV-03).
   Liegt im selben grauen Block (--color-bg-soft) wie die Thumbnail-Strip
   darüber: kein Top-Padding an der Bar, der Abstand kommt aus dem
   padding-bottom der Thumbnail-Strip → durchgehende graue Fläche. */
.pg-property-single .pg-property-back,
.pg-property-single .pg-property-back-bar { display: none; }
@media (max-width: 60em) {
	.pg-property-single .pg-property-back-bar {
		display: block;
		background: var(--color-bg-soft);
		padding: 0 var(--container-padding) 10px;
		margin-bottom: 35px;
	}
	.pg-property-single .pg-property-back {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		margin: 0;
		min-height: 41px;
		padding: 12px 16px;
		background: #A4ACB1;
		color: #fff;
		font-family: var(--font-myriad);
		font-size: 16px;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		text-decoration: none;
		transition: background-color var(--transition-fast);
	}
	.pg-property-single .pg-property-back:hover { background: #8B949A; }
	.pg-property-single .pg-property-back__icon { flex-shrink: 0; }
}

.pg-property-grid--loading {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* ---------- Mobile: Objektsuche-Overlay (<60em, Figma DEV-03) ----------
   Trigger-Leiste unten öffnet ein Vollbild-Dunkel-Overlay mit weißen
   Filter-Zeilen (Icon + LABEL + Chevron) und inline aufklappenden Optionen. */
.pg-filter-trigger { display: none; }
.pg-filter-close   { display: none; }

@media (max-width: 60em) {
	/* Sticky Trigger-Leiste unten */
	.pg-filter-trigger {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		width: 100%;
		min-height: 56px;
		padding: 16px;
		background: #6B7378;
		color: #fff;
		border: 0;
		font-family: var(--font-myriad);
		font-size: 16px;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		cursor: pointer;
	}
	.pg-filter-trigger__icon { flex-shrink: 0; }

	/* Platz unten freihalten, damit die fixe Trigger-Leiste den Footer
	   nicht überlagert (nur auf Seiten mit Objektsuche). */
	body:has(.pg-filter-trigger) { padding-bottom: 56px; }

	.pg-property-filter-wrap {
		position: static;
		top: auto;
	}

	/* Das Formular wird zum Vollbild-Overlay (verborgen bis is-filter-open) */
	.pg-property-filter-wrap .pg-property-filter {
		position: fixed;
		inset: 0;
		z-index: 200;
		overflow-y: auto;
		background: rgb(74 79 82 / 0.97);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}
	.pg-property-filter-wrap.is-filter-open .pg-property-filter {
		opacity: 1;
		visibility: visible;
	}

	.pg-property-filter-wrap .pg-property-filter__inner {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		max-width: none;
		min-height: 100%;
		padding: 64px 24px 40px;
	}

	/* Schließen-X oben links */
	.pg-filter-close {
		position: absolute;
		top: 18px;
		left: 18px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		padding: 0;
		color: #fff;
		background: none;
		border: 0;
		cursor: pointer;

		& svg { display: block; width: 20px; height: 20px; }
	}

	/* Overlay zeigt keinen Titel */
	.pg-property-filter__heading { display: none; }

	/* Objekt-ID: weiß umrandete Pill */
	.pg-property-filter .pg-pill--boxed {
		display: block;
		width: 100%;
		margin: 8px 0 18px;
	}
	.pg-property-filter .pg-pill--boxed .pg-pill__summary {
		width: 100%;
		padding: 13px 22px;
		background: transparent;
		border: 1px solid #fff;
		border-radius: 999px;
		color: #fff;
		font-weight: 600;
	}

	/* Filter-Zeilen: Icon + LABEL + Chevron, weiße Trennstriche */
	.pg-property-filter .pg-pill:not(.pg-pill--boxed) {
		display: block;
		width: 100%;
		border-bottom: 1px solid rgb(255 255 255 / 0.4);
	}
	.pg-property-filter .pg-pill:not(.pg-pill--boxed) + .pg-pill:not(.pg-pill--boxed)::before {
		display: none;
	}
	.pg-property-filter .pg-pill:not(.pg-pill--boxed) .pg-pill__summary {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		min-height: 52px;
		padding: 14px 4px;
		background: transparent;
		border: 0;
		border-radius: 0;
		color: #fff;
		text-transform: uppercase;
		font-weight: 600;
		letter-spacing: 0.04em;
	}

	/* Icons + Chevron weiß einfärben */
	.pg-property-filter .pg-pill__summary .pg-pill__icon,
	.pg-property-filter .pg-pill--boxed .pg-pill__icon {
		display: inline-block;
		flex-shrink: 0;
		filter: brightness(0) invert(1);
	}
	.pg-property-filter .pg-pill__caret {
		margin-inline-start: auto;
		filter: brightness(0) invert(1);
	}
	.pg-property-filter .pg-pill__label {
		flex: 1;
		max-width: none;
		text-align: left;
		color: #fff;
	}

	/* Optionen klappen inline auf (kein Popover) */
	.pg-property-filter .pg-pill__dropdown {
		position: static;
		width: 100%;
		min-width: 0;
		background: transparent;
		box-shadow: none;
		padding: 0 0 12px 36px;
	}
	.pg-property-filter .pg-pill__dropdown--input,
	.pg-property-filter .pg-pill__dropdown--range {
		padding: 6px 0 16px;
	}

	/* Optionen: weiß, kursiv, Häkchen rechts bei Auswahl */
	.pg-property-filter .pg-pill__choice {
		min-height: 0;
		padding: 9px 0;
		gap: 8px;
		color: #fff;
		font-style: italic;
		font-weight: 400;
		border-bottom: 0;
	}
	.pg-property-filter .pg-pill__choice:hover { background: transparent; }
	.pg-property-filter .pg-pill__choice input {
		position: absolute;
		opacity: 0;
		pointer-events: none;
	}
	.pg-property-filter .pg-pill__choice-label { flex: 1; color: #fff; }
	.pg-property-filter .pg-pill__choice:has(input:checked) { background: transparent; }
	.pg-property-filter .pg-pill__choice:has(input:checked)::after {
		content: "";
		margin-inline-start: auto;
		width: 18px;
		height: 18px;
		background: #fff;
		-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M2 7.5L5.5 11L12 3.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
		        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M2 7.5L5.5 11L12 3.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
	}

	/* Objekt-ID-Eingabefeld auf Dunkel */
	.pg-property-filter .pg-pill__input {
		background: rgb(255 255 255 / 0.12);
		border: 1px solid rgb(255 255 255 / 0.6);
		color: #fff;
	}
	.pg-property-filter .pg-pill__input::placeholder { color: rgb(255 255 255 / 0.6); }

	/* Zimmer-Grid kompakt */
	.pg-property-filter .pg-pill__dropdown--zimmer {
		display: grid;
		grid-template-columns: repeat(6, auto);
		justify-content: start;
		gap: 12px 22px;
	}
	.pg-property-filter .pg-pill__choice--compact { padding: 0; }

	/* "Immobilien suchen"-Button — vollbreit */
	.pg-property-filter .pg-property-filter__submit {
		width: 100%;
		margin: 28px 0 0;
		padding: 16px;
		border: 0;
		border-radius: 0;
		background: #A4ACB1;
		color: #fff;
		text-transform: none;
	}

	/* Hintergrund-Scroll sperren, solange das Overlay offen ist */
	body.pg-filter-open { overflow: hidden; }

	/* FAB + Trigger-Leiste hinter dem offenen Overlay ausblenden */
	body.pg-filter-open .pg-contact-fab { display: none; }
	.pg-property-filter-wrap.is-filter-open .pg-filter-trigger { visibility: hidden; }
}

/* ---------- Single Property Page ----------
   Komplett unter .pg-property-single genested (gleiches Muster wie
   Filter-Bar und .property-card): die elementweiten Vendor-Resets des
   Bootstrap-Parent-Skins (.immomakler main/summary/aside/label …,
   Spezifität 0,1,1) schlagen sonst Single-Class-Regeln — dadurch brachen
   u. a. display:contents (Mobile-Reihenfolge) und das Flex-Layout der
   Akkordeon-Summaries (unsichtbare Chevrons). */
.pg-property-single {
	padding-bottom: var(--space-9);

	& .pg-property-single__gallery-bleed {
		max-width: var(--container-max);
		margin-inline: auto;
	}

	& .pg-property-single__body {
		max-width: var(--container-max);
		margin-inline: auto;
		padding: 76px var(--container-padding) 0;
	}

	& .pg-property-single__head {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		margin-bottom: var(--space-7);
	}

	& .pg-property-single__eyebrow {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 40px;
		margin-bottom: 20px;
		padding: 0 15px;
		border: 1px solid #4D4D4D;
		font-family: var(--font-myriad);
		font-size: 16px;
		line-height: 18px;
		font-weight: 700;
		letter-spacing: 0;
		text-transform: none;
		color: #4D4D4D;
	}

	& .pg-property-single__title {
		font-family: var(--font-haboro);
		font-size: 35px;
		line-height: 50px;
		font-weight: 400;
		color: #000;
		margin: 0;
	}

	& .pg-property-single__status {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	& .pg-property-single__status-pill {
		display: inline-block;
		padding: 6px 14px;
		background: #4D4D4D;
		color: #fff;
		font-family: var(--font-myriad);
		font-size: 14px;
		line-height: 18px;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	& .pg-property-single__status-pill--reserviert { background: #b78c2a; }
	& .pg-property-single__status-pill--verkauft   { background: #4D4D4D; }
	& .pg-property-single__status-pill--vermietet  { background: #4D4D4D; }

	& .pg-property-single__layout {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-7);
	}

	@media (min-width: 60em) {
		& .pg-property-single__layout {
			grid-template-columns: minmax(0, 666px) minmax(0, 408px);
			gap: var(--space-8);
			align-items: start;
			justify-content: space-between;
		}
	}

	& .pg-property-single__main {
		max-width: 666px;
	}

	/* ---------- Gallery ---------- */
	& .pg-gallery {
		margin: 0;
		display: flex;
		flex-direction: column;
	}

	& .pg-gallery__stage {
		position: relative;
		background: var(--color-bg-soft);
		aspect-ratio: 1320 / 650;
		overflow: hidden;
	}

	& .pg-gallery__hero {
		display: block;
		width: 100%;
		height: 100%;
	}

	& .pg-gallery__hero img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	/* Nav-Pill: weiß, Pfeile 13px vom Rand / 25px vom Trenner. */
	& .pg-gallery__nav-group {
		position: absolute;
		bottom: 29px;
		left: 50%;
		transform: translateX(-50%);
		display: inline-flex;
		align-items: center;
		height: 50px;
		background: #fff;
	}

	& .pg-gallery__nav {
		display: inline-flex;
		align-items: center;
		align-self: stretch;
		width: 55px;
		background: transparent;
		color: var(--color-text);
		border: 0;
		padding: 0;
		cursor: pointer;
		transition: opacity var(--transition-fast);

		&:hover { opacity: 0.6; }

		/* SVG ist intrinsisch 10×18 (90°-Chevron); auf 19px Höhe skalieren. */
		& svg { display: block; height: 19px; width: auto; }
	}

	& .pg-gallery__nav--prev { justify-content: flex-start; padding-left: 13px; }
	& .pg-gallery__nav--next { justify-content: flex-end;   padding-right: 13px; }

	& .pg-gallery__nav-divider {
		flex: 0 0 auto;
		width: 1px;
		height: 26px;
		background: #7A7A7A;
	}

	& .pg-gallery__thumbs-strip {
		background: var(--color-bg-soft);
		padding-block: 11px;
		padding-inline: var(--container-padding);
		display: flex;
		justify-content: center;
	}

	& .pg-gallery__thumbs {
		list-style: none;
		margin: 0;
		padding: 8px;
		background: #fff;
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
		justify-content: center;
	}

	& .pg-gallery__thumb {
		display: block;
		width: 99px;
		aspect-ratio: 99 / 68;
		overflow: hidden;
		background: var(--color-bg-soft);
		position: relative;
		transition: opacity var(--transition-fast);
		border: 0;
		padding: 0;
		cursor: pointer;
	}

	& .pg-gallery__thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	& .pg-gallery__thumb:not(.is-active):hover { opacity: 0.85; }

	@media (max-width: 60em) {
		/* Figma DEV-03: Thumbnails klein (~50×34) direkt auf der grauen Strip-
		   Fläche — KEIN weißer Kasten. Strip-Padding bildet den durchgehenden
		   grauen Block mit der Zurück-Bar darunter (14px Abstand zu beiden). */
		& .pg-gallery__thumbs-strip { padding: 10px var(--container-padding); }
		/* EINE weiße Box um alle Thumbs (Figma DEV-03): 4px Innenrand, 4px
		   zwischen den Bildern (nicht 2×4px), kein grauer Spalt dazwischen.
		   Box umschließt die Thumbs (kein width:100%) und sitzt zentriert. */
		& .pg-gallery__thumbs {
			background: #fff;
			padding: 4px;
			flex-wrap: wrap;
			justify-content: center;
			gap: 4px;
		}
		& .pg-gallery__thumb { width: 50px; flex: 0 0 50px; }
	}

	/* ---------- Description / data list ---------- */
	& .pg-property-section { margin-bottom: var(--space-7); }

	& .pg-property-section__title {
		font-family: var(--font-haboro);
		font-size: var(--font-size-h3);
		font-weight: var(--font-weight-regular);
		margin: 0 0 var(--space-4);
		border-bottom: 1px solid var(--color-border);
		padding-bottom: var(--space-3);
	}

	& .pg-property-data {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
		margin: 0;
		font-family: var(--font-myriad);
	}

	@media (min-width: 40em) {
		& .pg-property-data { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-7); }
	}

	& .pg-property-data__row {
		display: flex;
		justify-content: space-between;
		gap: var(--space-3);
		padding: var(--space-3) 0;
		border-bottom: 1px solid var(--color-border);
	}

	& .pg-property-data__label {
		color: var(--color-text-muted);
		font-size: var(--font-size-body);
	}

	& .pg-property-data__value {
		color: var(--color-text);
		font-size: var(--font-size-body);
		font-weight: var(--font-weight-medium);
		text-align: end;
	}

	/* ---------- Sidebar — sticky on desktop ---------- */
	& .pg-property-sidebar {
		display: flex;
		flex-direction: column;
		gap: 0;
		max-width: 408px;
	}

	@media (min-width: 60em) {
		& .pg-property-sidebar {
			position: sticky;
			top: calc(var(--header-height) + var(--space-5));
		}
	}

	/* ---------- Objektdaten panel (Sidebar) ---------- */
	& .pg-objektdaten {
		background: #A4ACB1;
		color: #fff;
		padding: 32px 28px;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	& .pg-objektdaten__title {
		font-family: var(--font-haboro);
		font-weight: 400;
		font-size: 28px;
		line-height: 25px;
		color: #fff;
		margin: 0;
	}

	& .pg-objektdaten__list {
		display: flex;
		flex-direction: column;
	}

	& .pg-objektdaten__row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		padding-block: 12px;
		border-bottom: 1px solid rgb(255 255 255 / 0.25);
		font-family: var(--font-myriad);
		font-size: 16px;
		line-height: 22px;
	}

	& .pg-objektdaten__label {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		color: #fff;
		font-weight: 400;
	}

	& .pg-objektdaten__icon {
		width: 18px;
		height: auto;
		flex-shrink: 0;
		filter: brightness(0) invert(1); /* schwarze SVGs → weiß */
	}

	& .pg-objektdaten__value {
		color: #fff;
		font-weight: 400;
		text-align: right;
	}

	& .pg-objektdaten__price {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 12px;
		padding-top: 16px;
		border-top: 1px solid rgb(255 255 255 / 0.4);
	}

	& .pg-objektdaten__price-label {
		font-family: var(--font-myriad);
		font-size: 16px;
		line-height: 22px;
		font-weight: 700;
		color: #fff;
	}

	& .pg-objektdaten__price-value {
		font-family: var(--font-myriad);
		font-style: italic;
		font-weight: 600;
		font-size: 24px;
		line-height: 22px;
		color: #fff;
		text-align: right;
	}

	& .pg-objektdaten__cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 41px;
		min-height: 0;
		padding: 0 16px;
		background: #626A6F;
		border: 1px solid #626A6F;
		color: #fff;
		font-family: var(--font-myriad);
		font-size: 16px;
		line-height: 18px;
		font-weight: 700;
		text-decoration: none;
		box-shadow: 0 4px 4px 0 rgb(0 0 0 / 0.25);

		&:hover { background: #4D5560; border-color: #4D5560; color: #fff; text-decoration: none; }
	}

	/* "Noch Fragen?" — eigene weiße Box unter dem grauen Panel. */
	& .pg-objektdaten-contact {
		background: #fff;
		border: 1px solid #A4ACB1;
		height: 70px;
		padding: 0 28px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
	}

	& .pg-objektdaten-contact__label {
		font-family: var(--font-myriad);
		font-size: 16px;
		line-height: 22px;
		font-weight: 700;
		color: #4D4D4D;
	}

	& .pg-objektdaten-contact__icons {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
		gap: 16px;
	}

	& .pg-objektdaten-contact__icons li {
		display: flex;
		align-items: center;
	}

	& .pg-objektdaten-contact__icons li + li {
		padding-left: 16px;
		border-left: 1px solid #7A7A7A;
	}

	& .pg-objektdaten-contact__icons a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		transition: opacity var(--transition-fast);

		&:hover { opacity: 0.7; }
	}

	& .pg-objektdaten-contact__icons img {
		display: block;
	}

	/* Das Teilen-Icon (icon-grid-forward.svg) ist weiß ausgelegt (für dunkle
	   Card-Overlays). Auf der hellen Kontaktbox muss es dunkel sein, sonst
	   ist es unsichtbar (Feedback KW25 — "Teilen-Icon fehlt"). */
	& .pg-objektdaten-contact__icon--share {
		filter: brightness(0);
	}

	/* ---------- Accordion ---------- */
	& .pg-accordion {
		border-bottom: 1px solid #7A7A7A;
	}

	& .pg-accordion:first-of-type {
		border-top: 1px solid #7A7A7A;
	}

	& .pg-accordion__summary {
		list-style: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 15px;
		padding: 18px 0;

		&::-webkit-details-marker { display: none; }
		&:focus-visible { outline: 2px solid var(--color-text); outline-offset: 4px; }
	}

	& .pg-accordion__title {
		font-family: var(--font-myriad);
		font-size: 20px;
		line-height: 25px;
		font-weight: 600;
		color: #000;
	}

	/* Mobile: Akkordeon-Titel 18px (Figma DEV-03). */
	@media (max-width: 60em) {
		& .pg-accordion__title { font-size: 18px; }
	}

	/* Chevron > der bei [open] auf v rotiert. */
	& .pg-accordion__icon {
		width: 10px;
		height: 18px;
		flex-shrink: 0;
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='18' viewBox='0 0 10 18' fill='none'><path d='M0.5 0.5L9 9L0.5 17.5' stroke='%23000'/></svg>");
		background-repeat: no-repeat;
		background-position: center;
		transition: transform var(--transition-fast);
	}

	& .pg-accordion[open] .pg-accordion__icon {
		transform: rotate(90deg);
	}

	& .pg-accordion__panel {
		padding: 8px 0 24px;
	}

	/* Description / equipment / location text */
	& .pg-property-prose {
		font-family: var(--font-myriad);
		font-size: 16px;
		line-height: 22px;
		font-weight: 400;
		color: #000;
	}

	& .pg-property-prose p { margin: 0 0 var(--space-4); }
	& .pg-property-prose p:last-child { margin-bottom: 0; }
	& .pg-property-prose h3 { font-family: var(--font-haboro); font-size: var(--font-size-h4); margin: var(--space-5) 0 var(--space-3); }

	/* Preis-Chip (nur Mobile sichtbar) — sitzt zwischen Galerie und Titel.
	   Figma 6004:246: 41px hoch, bg #959CA0 @ 15 %, Haboro Italic 16/18. */
	& .pg-property-single__price-chip {
		display: none; /* default off; Mobile-Block schaltet ein */
		padding: 11px 20px 12px;
		background: rgb(149 156 160 / 0.15);
		font-family: var(--font-haboro);
		font-style: italic;
		font-size: 16px;
		line-height: 18px;
		font-weight: 400;
		color: #000;
		align-self: flex-start;
	}


	/* ---------- Features list ---------- */
	& .pg-property-features {
		list-style: none;
		padding: 0;
		margin: 0;
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-2) var(--space-5);
		font-family: var(--font-myriad);
		font-size: var(--font-size-body);
	}

	@media (min-width: 40em) {
		& .pg-property-features { grid-template-columns: repeat(2, 1fr); }
	}
	@media (min-width: 60em) {
		& .pg-property-features { grid-template-columns: repeat(3, 1fr); }
	}

	& .pg-property-features__item {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		padding-block: var(--space-2);
		border-bottom: 1px solid var(--color-border);
	}

	& .pg-property-features__icon { flex-shrink: 0; color: var(--color-text); }

	/* ---------- Anfrage-Sektion (#anfrage) — "Wir beraten Sie gerne!" ----------
	   Vollbreite graue Sektion unter dem Layout (Figma 6004:246), enthält
	   single/contactform.php (Gravity Form). */
	& .pg-property-contact-section {
		margin-top: 96px;
		background: rgb(149 156 160 / 0.2);
		padding: 72px 0 80px;
	}

	& .pg-property-contact {
		max-width: var(--container-max);
		margin-inline: auto;
		padding-inline: var(--container-padding);
		scroll-margin-top: calc(var(--header-height, 131px) + 24px);
	}

	& .pg-property-contact__title {
		font-family: var(--font-haboro);
		font-size: 28px;
		line-height: 35px;
		font-weight: 500;
		color: #000;
		margin: 0 0 16px;
	}

	& .pg-property-contact__intro {
		font-family: var(--font-myriad);
		font-size: 16px;
		line-height: 22px;
		color: #000;
		max-width: 640px;
		margin: 0 0 24px;
	}

	& .pg-property-contact__ref {
		font-family: var(--font-myriad);
		font-size: var(--font-size-small);
		color: var(--color-text-muted);
		margin: 0 0 var(--space-4);
	}

	/* Kontaktperson-Internas (single/contact-property.php) */
	& .pg-property-contact__photo {
		margin: 0 0 var(--space-4);

		& img {
			width: 96px;
			height: 96px;
			object-fit: cover;
			border-radius: var(--radius-pill);
		}
	}

	& .pg-property-contact__name {
		font-family: var(--font-haboro);
		font-size: var(--font-size-h4);
		margin: 0;
	}

	& .pg-property-contact__firma {
		font-family: var(--font-myriad);
		font-size: var(--font-size-small);
		color: var(--color-text-muted);
		margin: 4px 0 var(--space-3);
	}

	& .pg-property-contact__links {
		list-style: none;
		padding: 0;
		margin: var(--space-3) 0 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		font-family: var(--font-myriad);
	}

	& .pg-property-contact__links a {
		color: var(--color-text);
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	/* Gravity-Form im Anfrage-Block: nutzt den globalen Form-Skin des
	   Themes (.pg-immo-contact-form_wrapper in main.css) — gleiche Optik
	   wie die Kontakt-Sektion der Startseite. */

	/* ---------- Mobile (<60em) — Detailseite nach Figma 6004:246 ---------- */
	@media (max-width: 60em) {
		/* Preis-Chip sitzt direkt unter der Galerie */
		& .pg-property-single__body {
			padding-top: 0;
		}

		/* Reihenfolge mobil (Feedback KW25): Titel → Objektbeschreibung →
		   Objektdaten → restliche Akkordeons. main wird display:contents,
		   Kinder per `order` sortiert. */
		& .pg-property-single__layout {
			display: flex;
			flex-direction: column;
			gap: 0;
		}

		& .pg-property-single__main {
			display: contents;
		}

		/* Head mobil zentriert (Figma DEV-03: Titel, Eyebrow, Status mittig). */
		& .pg-property-single__head {
			order: 1;
			gap: 32px;
			margin-bottom: 48px;
			align-items: stretch;
			text-align: center;
		}

		& .pg-property-single__status { justify-content: center; }

		/* Reihenfolge mobil: Head → ALLE Akkordeons → Objektdaten darunter
		   (Figma DEV-03). Akkordeons in Dokumentreihenfolge (order 2),
		   Objektdaten-Sidebar zuletzt (order 3). */
		& .pg-property-single__main .pg-accordion { order: 2; }

		& .pg-property-sidebar {
			order: 3;
			max-width: none;
			margin-top: 66px;
			margin-bottom: 64px;
		}

		/* Eyebrow als zentrierte Pille mit Rahmen einblenden (Figma DEV-03).
		   Abstand nach unten regelt der Head-Flex-Gap (32px). */
		& .pg-property-single__eyebrow {
			display: block;
			/* height:auto hebt das feste height:40px der Desktop-Basisregel auf —
			   sonst schneidet der Rahmen bei umbrechendem Text (z.B. „… Tirol")
			   durch die zweite Zeile. Padding ergibt einzeilig weiterhin ~40px. */
			height: auto;
			border: 1px solid #A4ACB1;
			padding: 11px 16px;
			margin: 0;
			text-align: center;
			font-family: var(--font-myriad);
			font-size: 16px;
			line-height: 18px;
			font-weight: 700;
			letter-spacing: 0;
			text-transform: none;
			color: #4D4D4D;
		}

		/* Preis-Chip oben ausblenden — der Kaufpreis steht in den Objektdaten
		   weiter unten (Figma DEV-03). */
		& .pg-property-single__price-chip { display: none; }

		/* Mobile H1 — Haboro 500 / 28 / 35, zentriert (Figma DEV-03) */
		& .pg-property-single__title {
			font-size: 28px;
			line-height: 35px;
			font-weight: 500;
			text-align: center;
		}

		/* Galerie: Thumbnails AN (Figma DEV-03 zeigt sie), Stage fix 311px,
		   Nav-Pille kompakt (Figma: 70.4×32, Chevrons ~8px) */
		& .pg-gallery__thumbs-strip { display: flex; }

		& .pg-gallery__stage {
			aspect-ratio: auto;
			height: 311px;
		}

		/* Nav-Pille 88×40, Chevrons 14px, Trenner 20px (Figma DEV-03,
		   Group 19 / SVG viewBox 88×40). */
		& .pg-gallery__nav-group {
			bottom: 9px;
			height: 40px;
		}

		& .pg-gallery__nav {
			width: 44px;

			& svg { height: 14px; }
		}

		& .pg-gallery__nav--prev { padding-left: 10px; }
		& .pg-gallery__nav--next { padding-right: 10px; }

		& .pg-gallery__nav-divider { height: 20px; }

		/* Objektdaten: helles 2-Spalten-Grid, Titel Myriad Semibold 20 */
		& .pg-objektdaten {
			background: transparent;
			color: var(--color-text);
			padding: 0;
			gap: 16px;
		}

		& .pg-objektdaten__title {
			font-family: var(--font-haboro);
			font-size: 28px;
			line-height: 34px;
			font-weight: 400;
			color: #000;
			text-align: center;
			padding-bottom: 13px;
			border-bottom: 0;
		}

		/* Objektdaten mobil EINSPALTIG (Feedback KW25 — "einspaltig, nicht
		   zweispaltig"). */
		& .pg-objektdaten__list {
			display: grid;
			grid-template-columns: 1fr;
			column-gap: 24px;
			row-gap: 0;
		}

		/* Zeile: Icon + Label links, Wert rechts (Figma DEV-03). */
		& .pg-objektdaten__row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
			padding-block: 14px;
			border-bottom: 1px solid rgb(122 122 122 / 0.25);
			color: #4D4D4D;
		}

		/* Feste Icon-Spalte (18px), damit ALLE Labels auf einer Linie starten —
		   auch Zeilen ohne Icon (Feedback KW25 — "Icons sollen auf Linie sein"). */
		& .pg-objektdaten__label {
			display: grid;
			grid-template-columns: 18px auto;
			align-items: center;
			gap: 8px;
			color: #4D4D4D;
		}

		/* Label-Text einblenden (Figma DEV-03: Icon + Label + Wert). */
		& .pg-objektdaten__label-text {
			display: inline;
			font-family: var(--font-myriad);
			font-size: 16px;
			line-height: 22px;
		}

		& .pg-objektdaten__value {
			color: #4D4D4D;
			font-weight: 400;
			text-align: right;
		}

		/* Icons auf #4D4D4D einfärben (Figma DEV-03). Die SVGs sind #A4ACB1;
		   brightness(0) → schwarz, invert(0.302) → 30,2% Grau = #4D4D4D. */
		& .pg-objektdaten__icon {
			filter: brightness(0) invert(0.302);
			width: 16px;
		}

		/* Kaufpreis in den Objektdaten (Figma DEV-03) — dunkler Text auf weiß.
		   KEIN eigener border-top: der Trenner ist die border-bottom der
		   letzten Datenzeile (sonst doppelte Linie). 39px Abstand ab Trenner
		   = 16px Flex-Gap (.pg-objektdaten) + 23px padding-top. */
		& .pg-objektdaten__price {
			display: flex;
			border-top: 0;
			padding-top: 23px;
		}
		& .pg-objektdaten__price-label { color: #4D4D4D; }
		& .pg-objektdaten__price-value {
			color: #4D4D4D;
			font-size: 24px;
			line-height: 22px;
		}

		/* CTA „Jetzt anfragen" am Ende der Objektdaten-Liste, helle Variante */
		& .pg-objektdaten__cta {
			margin-top: 8px;
			background: #A4ACB1;
			border-color: #A4ACB1;
			box-shadow: none;

			&:hover { background: #8B949A; border-color: #8B949A; }
		}

		/* „Noch Fragen?"-Kontakt-Box: im finalen Mobile-Figma (DEV-03) vorhanden.
		   Höhe 49px, 12px Abstand zum CTA darüber (Sidebar-Gap ist 0). */
		& .pg-objektdaten-contact {
			display: flex;
			height: 49px;
			padding: 0 16px;
			margin-top: 12px;
		}

		/* Akkordeons: kein Top-Border auf dem ersten (Mock), Chevron ∨/∧ */
		& .pg-accordion:first-of-type { border-top: 0; }

		& .pg-accordion__icon { transform: rotate(90deg); }
		& .pg-accordion[open] .pg-accordion__icon { transform: rotate(270deg); }

		/* Anfrage-Sektion kompakter */
		& .pg-property-contact-section {
			margin-top: 56px;
			padding: 48px 0 56px;
		}
	}
}

/* ---------- Pagination (Archiv) ----------
   AKTUELL NICHT GERENDERT — der Include ist in archive/loop-grid-property.php
   auskommentiert. Styles bleiben für eine spätere Reaktivierung erhalten.
   Vendor-Markup (.paginator / .num-posts / .pages-nav / .immomakler-order-by)
   im PG-Stil: Ergebniszähler links (Myriad), Sortier-Dropdown als Pill rechts
   (angelehnt an die Filter-Pills), Seitenlinks als 40px-Boxen. Genested für
   Vendor-Override-Schutz (Bootstrap col-xs-Floats etc.). */
.pg-property-pagination {
	margin-top: 48px;

	& .paginator {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 16px 24px;
		margin: 0;
	}

	/* Bootstrap-Grid-Floats (col-xs-6) neutralisieren */
	& .num-posts,
	& .pages-nav {
		float: none;
		width: auto;
		padding: 0;
		text-align: left;
	}

	& .num-posts {
		font-family: var(--font-myriad);
		font-size: 16px;
		line-height: 22px;
		color: #4D4D4D;
	}

	& .pages-nav {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
		margin-inline-start: auto;
	}

	/* Seitenlinks (immomakler_pagination → .page-numbers) */
	& .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 40px;
		height: 40px;
		padding: 0 var(--space-3);
		border: 1px solid var(--color-border);
		font-family: var(--font-myriad);
		font-size: 16px;
		color: var(--color-text);
		text-decoration: none;
		transition: background-color var(--transition-fast);

		&:hover { background: var(--color-bg-soft); }

		&.current {
			background: var(--color-text);
			color: var(--color-bg);
			border-color: var(--color-text);
		}
	}

	/* Sortier-Dropdown — Pill wie "Objektnummer" in der Filter-Bar */
	& .immomakler-order-by {
		position: relative;

		& .dropdown-toggle {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			min-height: 40px;
			padding: 11px 20px;
			background: rgb(122 122 122 / 0.10);
			border-radius: 20px;
			font-family: var(--font-myriad);
			font-size: 12px;
			line-height: 18px;
			font-weight: 600;
			color: #4D4D4D;
			cursor: pointer;
			transition: background-color var(--transition-fast);

			&:hover { background: rgb(122 122 122 / 0.18); }
		}

		/* Bootstrap-Caret (Border-Dreieck) → Filter-Chevron */
		& .caret {
			display: inline-block;
			width: 12px;
			height: 7px;
			margin: 0;
			border: 0;
			background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'><path d='M0.35 0.35L5.82 5.82L11.29 0.35' stroke='%237A7A7A'/></svg>") no-repeat center / contain;
		}

		/* Aufklappliste im Stil der Filter-Dropdowns (grau, weiße Rows) */
		& .dropdown-menu {
			left: auto;
			right: 0;
			min-width: 220px;
			margin-top: 4px;
			padding: 0;
			background: #A4ACB1;
			border: 0;
			border-radius: 0;
			box-shadow: 0 6px 24px rgb(0 0 0 / 0.08);
			list-style: none;

			& li { margin: 0; }

			& a {
				display: block;
				padding: 11px 16px;
				font-family: var(--font-myriad);
				font-style: italic;
				font-size: 16px;
				line-height: 18px;
				font-weight: 600;
				color: #fff;
				border-bottom: 1px solid #fff;
				text-decoration: none;
				transition: background-color var(--transition-fast);

				&:hover { background: rgb(255 255 255 / 0.12); color: #fff; }
			}

			& li:last-child a { border-bottom: 0; }

			/* Aktive Sortierung (Bootstrap .disabled) — markiert wie eine
			   gewählte Filter-Option */
			& li.disabled a {
				background: rgb(255 255 255 / 0.18);
				cursor: default;
			}
		}
	}

	@media (max-width: 60em) {
		margin-top: 40px;
	}
}

/* Gallery hidden trigger items */
.pg-property-gallery__item--hidden { display: none; }