/* =========================================================================
   Neubau — new-build developments (index + project page)
   ---------------------------------------------------------------------------
   A development is browsed the way one reads a prospectus: large photography,
   a serif voice for the names, and facts as short ranges rather than tables of
   dashes. Everything is scoped under .neubau and consumes the shipped
   "Aubergine & Warm Stone" tokens from app.css, with fallbacks so the section
   still renders correctly if those tokens ever move.
   ========================================================================= */
.neubau {
	--nb-ink:        var(--ti-ink, #1e1a1c);
	--nb-ink-soft:   var(--ti-ink-2, #4a4247);
	--nb-muted:      var(--ti-muted, #8a7f86);
	--nb-stone:      var(--ti-stone, #f7f2ec);
	--nb-surface:    var(--ti-surface, #ffffff);
	--nb-line:       var(--ti-line, #e7ded2);
	--nb-line-strong: var(--ti-line-strong, #dccfbe);
	--nb-plum:       var(--bs-primary, #5a2a7e);
	--nb-plum-deep:  var(--bs-primary-dark, #3f1c5c);
	--nb-tint:       var(--ti-brand-tint, #f1eaf6);
	--nb-gold:       var(--ti-gold, #cda15e);
	--nb-save:       var(--ti-save, #2e6b54);
	--nb-serif:      var(--ti-serif, "Lora", Georgia, "Times New Roman", serif);

	color: var(--nb-ink);
}

.neubau-body {
	padding-bottom: 4rem;
}

/* --- Shared bits --------------------------------------------------------- */
.neubau-eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nb-plum);
}

.neubau-eyebrow__sep {
	color: var(--nb-line-strong);
}

.neubau-section__title {
	font-family: var(--nb-serif);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 1.25rem;
	color: var(--nb-ink);
}

.neubau-section__title::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2px;
	margin-top: 0.6rem;
	background: var(--nb-gold);
}

/* --- Hero ---------------------------------------------------------------- */
.neubau-hero {
	position: relative;
	background: linear-gradient(180deg, var(--nb-stone) 0%, rgba(247, 242, 236, 0) 100%);
	border-bottom: 1px solid var(--nb-line);
	padding: 1.25rem 0 2.5rem;
	margin-bottom: 2rem;
}

.neubau-hero__crumbs {
	margin-bottom: 1.25rem;
	font-size: 0.8125rem;
	background: none;
	padding: 0;
}

.neubau-hero__title {
	font-family: var(--nb-serif);
	font-size: clamp(2rem, 4.5vw, 3rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin-bottom: 1rem;
}

/* the single gold flourish the redesign hangs under its mastheads */
.neubau-hero__title::after {
	content: "";
	display: block;
	width: 3rem;
	height: 3px;
	margin-top: 0.9rem;
	background: var(--nb-gold);
}

.neubau-hero__lead {
	max-width: 62ch;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--nb-ink-soft);
	margin-bottom: 1rem;
}

.neubau-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0;
	font-size: 0.875rem;
	color: var(--nb-muted);
}

.neubau-hero__count {
	font-weight: 600;
	color: var(--nb-ink);
}

.neubau-hero__dot {
	color: var(--nb-line-strong);
}

/* --- Filters ------------------------------------------------------------- */
.neubau-filters {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	padding: 1.125rem 1.25rem;
	margin-bottom: 2rem;
	background: var(--nb-surface);
	border: 1px solid var(--nb-line);
	border-radius: 10px;
	box-shadow: 0 12px 32px -28px rgba(30, 26, 28, 0.55);
}

.neubau-filters__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.875rem;
}

.neubau-filters__label {
	flex: 0 0 auto;
	min-width: 7rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nb-muted);
}

.neubau-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.neubau-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--nb-line-strong);
	border-radius: 999px;
	background: var(--nb-surface);
	color: var(--nb-ink-soft);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.neubau-chip:hover,
.neubau-chip:focus-visible {
	border-color: var(--nb-plum);
	color: var(--nb-plum);
	background: var(--nb-tint);
	text-decoration: none;
}

.neubau-chip--active {
	background: var(--nb-plum);
	border-color: var(--nb-plum);
	color: #fff;
}

.neubau-chip--active:hover,
.neubau-chip--active:focus-visible {
	background: var(--nb-plum-deep);
	border-color: var(--nb-plum-deep);
	color: #fff;
}

.neubau-chip__count {
	font-variant-numeric: tabular-nums;
	font-size: 0.75rem;
	font-weight: 600;
	opacity: 0.7;
}

/* --- Project grid -------------------------------------------------------- */
.neubau-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-bottom: 3rem;
}

@media (min-width: 576px) {
	.neubau-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.neubau-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Rest on the hairline border alone; the lift and its aubergine-tinted shadow
   are the hover state, the same contract the search result cards follow. */
.neubau-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--nb-surface);
	border: 1px solid var(--nb-line);
	border-radius: 12px;
	color: inherit;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.neubau-card:hover,
.neubau-card:focus-visible {
	transform: translateY(-3px);
	border-color: var(--nb-line-strong);
	box-shadow: 0 18px 40px -20px rgba(42, 17, 64, 0.28);
	color: inherit;
	text-decoration: none;
}

.neubau-card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--nb-stone);
	overflow: hidden;
}

.neubau-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.neubau-card:hover .neubau-card__image {
	transform: scale(1.03);
}

.neubau-card__image--placeholder {
	object-fit: contain;
	padding: 2rem;
	opacity: 0.5;
}

.neubau-card__offer {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.94);
	color: var(--nb-ink);
	box-shadow: 0 2px 10px rgba(30, 26, 28, 0.18);
}

.neubau-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.125rem 1.25rem 1.25rem;
}

.neubau-card__place {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	margin-bottom: 0.4rem;
	font-size: 0.8125rem;
	color: var(--nb-muted);
}

.neubau-card__place svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	color: var(--nb-muted);
}

.neubau-card__title {
	font-family: var(--nb-serif);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 0.35rem;
}

.neubau-card:hover .neubau-card__title {
	color: var(--nb-plum);
}

.neubau-card__subtitle {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 0.9rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--nb-ink-soft);
}

/* The price range speaks serif like every price on the portal; the remaining
   ranges follow as one quiet meta line instead of a chip pile. */
.neubau-card__facts {
	margin: auto 0 0;
	padding: 0.9rem 0 0;
	border-top: 1px solid var(--nb-line);
}

.neubau-card__price {
	font-family: var(--nb-serif);
	font-size: 1.5rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	color: var(--nb-ink);
	margin-bottom: 0.4rem;
}

.neubau-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.55rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--nb-ink-soft);
}

/* hairline separators rather than dots: when the row wraps, a trailing
   hairline disappears into the line end instead of stranding a dot at the
   start of the next line */
.neubau-card__meta li {
	white-space: nowrap;
}

.neubau-card__meta li:not(:last-child) {
	border-right: 1px solid var(--nb-line-strong);
	padding-right: 0.55rem;
}

/* --- Pagination ---------------------------------------------------------- */
.neubau-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 2.25rem;
}

.neubau-pagination__step {
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--nb-line-strong);
	border-radius: 999px;
	background: var(--nb-surface);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--nb-ink);
	text-decoration: none;
}

a.neubau-pagination__step:hover {
	border-color: var(--nb-plum);
	background: var(--nb-tint);
	color: var(--nb-plum-deep);
}

.neubau-pagination__step--off {
	border-style: dashed;
	color: var(--nb-muted);
}

.neubau-pagination__status {
	font-size: 0.875rem;
	color: var(--nb-muted);
}

/* --- Empty state --------------------------------------------------------- */

.neubau-empty {
	padding: 2.5rem 1.5rem;
	margin-bottom: 3rem;
	text-align: center;
	background: var(--nb-surface);
	border: 1px dashed var(--nb-line-strong);
	border-radius: 12px;
}

.neubau-empty p {
	max-width: 46ch;
	margin: 0 auto 1.25rem;
	color: var(--nb-ink-soft);
}

/* --- FAQ ----------------------------------------------------------------- */
.neubau-faq {
	padding-top: 1rem;
	border-top: 1px solid var(--nb-line);
}

.neubau-faq__items {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 768px) {
	.neubau-faq__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem 2.5rem;
	}
}

.neubau-faq__question {
	font-family: var(--nb-serif);
	font-size: 1.0625rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.neubau-faq__answer {
	margin-bottom: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--nb-ink-soft);
}

/* =========================================================================
   Project page
   ========================================================================= */
.neubau-gallery {
	background: var(--nb-ink);
	margin-bottom: 1.5rem;
}

/* Same geometry as the listing gallery: app.css sizes .swiper to 520px and
   Swiper measures each slide off its photo, so the two carousels have to agree
   on the height or the slides come out the wrong width. */
.neubau-gallery .swiper-slide img {
	height: 520px;
	object-fit: cover;
}

/* listing.css shrinks every .swiper to 320px on phones; the photos have to
   follow or their bottom 200px are silently clipped by the container. */
@media (max-width: 767.98px) {
	.neubau-gallery .swiper-slide img {
		height: 320px;
	}
}

.neubau-detail .breadcrumb {
	font-size: 0.8125rem;
}

.neubau-detail__head {
	padding-bottom: 1.5rem;
	margin-bottom: 1.75rem;
	border-bottom: 1px solid var(--nb-line);
}

.neubau-detail__title {
	font-family: var(--nb-serif);
	font-size: clamp(1.875rem, 3.5vw, 2.5rem);
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 0.5rem;
}

.neubau-detail__subtitle {
	max-width: 54ch;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--nb-ink-soft);
	margin-bottom: 0.75rem;
}

.neubau-detail__address {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0;
	font-size: 0.9375rem;
	color: var(--nb-muted);
}

.neubau-detail__address svg {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	color: var(--nb-plum);
}

.neubau-notice {
	padding: 0.875rem 1.125rem;
	margin-bottom: 1.5rem;
	background: var(--nb-stone);
	border: 1px solid var(--nb-line-strong);
	border-radius: 8px;
	font-size: 0.9375rem;
	color: var(--nb-ink-soft);
}

/* --- Key facts ----------------------------------------------------------- */
.neubau-facts {
	margin-bottom: 2.5rem;
}

.neubau-facts__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin-bottom: 0;
	background: var(--nb-surface);
	border: 1px solid var(--nb-line);
	border-radius: 10px;
	overflow: hidden;
}

@media (min-width: 768px) {
	.neubau-facts__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Each cell draws its own hairlines into the 1px grid gaps, and the outer ring
   is clipped away by the container. Colouring the gaps by way of the grid's own
   background would paint the leftovers of a last row that does not fill up. */
.neubau-facts__item {
	padding: 0.9rem 1.1rem;
	background: var(--nb-surface);
	box-shadow: 0 0 0 1px var(--nb-line);
}

.neubau-facts__item dt {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nb-muted);
	margin-bottom: 0.25rem;
}

/* figures in the serif voice, like every spec value of the redesign */
.neubau-facts__item dd {
	margin-bottom: 0;
	font-family: var(--nb-serif);
	font-size: 1.1875rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1.35;
	color: var(--nb-ink);
}

/* the price is the figure the page is read for: a full-width masthead row
   with the section's one gold flourish under the number */
.neubau-facts__item--price {
	grid-column: 1 / -1;
}

.neubau-facts__item--price dd {
	font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem);
	line-height: 1.15;
}

.neubau-facts__item--price dd span {
	display: inline-block;
	border-bottom: 3px solid var(--nb-gold);
	padding-bottom: 3px;
}

/* --- Prose --------------------------------------------------------------- */
.neubau-prose {
	margin-bottom: 2.5rem;
}

.neubau-prose__block + .neubau-prose__block {
	margin-top: 1.75rem;
}

/* sub-headings read as small aubergine eyebrows, like the Exposé's */
.neubau-prose__title {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nb-plum);
	margin-bottom: 0.5rem;
}

.neubau-prose p {
	max-width: 68ch;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--nb-ink-soft);
	margin-bottom: 0;
}

/* --- Characteristics ----------------------------------------------------- */
.neubau-tags {
	margin-bottom: 2.5rem;
}

.neubau-tags__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* calm stone chips with a pine "included" check, the Exposé's feature style */
.neubau-tag {
	padding: 0.42rem 0.72rem;
	border: 1px solid var(--nb-line);
	border-radius: 6px;
	background: var(--nb-stone);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--nb-ink);
}

.neubau-tag::before {
	content: "\2713\00a0\00a0";
	color: var(--nb-save);
	font-weight: 700;
}

/* --- Units --------------------------------------------------------------- */
.neubau-units {
	margin-bottom: 2.5rem;
}

.neubau-units__hint,
.neubau-units__empty {
	max-width: 62ch;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--nb-ink-soft);
}

.neubau-units__empty {
	padding: 1.125rem 1.25rem;
	background: var(--nb-stone);
	border-radius: 10px;
	margin-bottom: 0;
}

/* --- Developer card ------------------------------------------------------ */
.neubau-developer {
	position: sticky;
	top: 1.5rem;
	padding: 1.375rem 1.25rem;
	background: var(--nb-surface);
	border: 1px solid var(--nb-line);
	border-radius: 12px;
	/* the aubergine-tinted glow the listing contact card carries */
	box-shadow: 0 18px 44px -22px rgba(42, 17, 64, 0.28);
}

.neubau-developer__title {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nb-muted);
	margin-bottom: 1rem;
}

.neubau-developer__logo {
	display: block;
	max-width: 160px;
	height: auto;
	margin-bottom: 1rem;
}

.neubau-developer__company {
	font-family: var(--nb-serif);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.35;
	margin-bottom: 0.75rem;
}

.neubau-developer__row {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	margin-bottom: 0.75rem;
	font-size: 0.9375rem;
}

.neubau-developer__label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nb-muted);
}

.neubau-developer__phone {
	font-weight: 600;
	color: var(--nb-plum);
}

.neubau-developer__cta {
	margin: 1rem 0 0.5rem;
}

.neubau-developer__hint {
	margin: 0 0 0.25rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--nb-muted);
}

.neubau-developer__links {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-top: 0.875rem;
	margin-top: 0.5rem;
	border-top: 1px solid var(--nb-line);
}

.neubau-developer__link {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--nb-ink-soft);
	text-decoration: none;
}

.neubau-developer__link::after {
	content: " \2197";
	color: var(--nb-line-strong);
}

.neubau-developer__link:hover {
	color: var(--nb-plum);
	text-decoration: underline;
}

.neubau-developer__imprint {
	padding-top: 0.875rem;
	margin-top: 0.875rem;
	border-top: 1px solid var(--nb-line);
	font-size: 0.8125rem;
	color: var(--nb-muted);
}

.neubau-developer__imprint summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--nb-ink-soft);
}

.neubau-developer__imprint p {
	margin: 0.6rem 0 0;
	line-height: 1.6;
}

/* --- Related ------------------------------------------------------------- */
.neubau-related {
	padding-top: 2rem;
	border-top: 1px solid var(--nb-line);
}

.neubau-related .neubau-grid {
	margin-bottom: 1.5rem;
}

.neubau-related__all {
	margin-bottom: 0;
	font-size: 0.9375rem;
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.neubau-card,
	.neubau-card__image {
		transition: none;
	}

	.neubau-card:hover {
		transform: none;
	}

	.neubau-card:hover .neubau-card__image {
		transform: none;
	}
}