/* The theme's .title class forces text-transform:capitalize (fine for English-style Title
   Case headings). Our German copy uses correct German capitalization (only nouns/sentence
   starts) written directly in the HTML - forcing every word capitalized breaks German
   grammar visually ("Wohnraum Für Jede Lebenslage" instead of "Wohnraum für jede
   Lebenslage"). Show text exactly as authored instead. */
.title,
.heading-section .title {
	text-transform: none;
}

/* Loaded after bundle.css. The theme's own CSS references Next.js's generated font
   name (__Syne_c1a642) whose @font-face files we didn't copy over - point body at the
   Google-hosted Syne font instead (same source order wins, both are a plain `body` rule). */
body {
	font-family: 'Syne', sans-serif;
}

/* scroll-up.css ships its own lime-green (--primary-color), left over from the previous
   theme. Same widget accent as the support button: light blue. */
:root {
	--primary-color: #dfedf3;
}

/* Scroll-to-top button (.prgoress_indicator) is the project's own original component
   (same markup as datahuntly.com, our sibling site) - not something theme shipped.
   scroll-up.css positions it right:26px/bottom:35px already; just align its right
   offset with the support widget (right:24px) so both sit on the same vertical line. */
.prgoress_indicator {
	right: 24px;
}
/* The theme's own bundle also defines a bare, global .active-progress class (unrelated reveal
   utility, different purpose) - scroll-up.css's .prgoress_indicator.active-progress rule
   would still win on specificity, but our JS toggling that shared class name on every
   scroll tick risked interfering with whatever else on the page also uses it. Use our own
   unique class instead so there's zero name collision with The theme's CSS at all. */
.prgoress_indicator {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) !important;
}
/* --primary-color (#dfedf3) is light, fine for the ring stroke but unreadable for the
   chevron glyph itself against a white circle - force that one piece dark. */
.prgoress_indicator::after,
.prgoress_indicator:hover::after {
	color: #101010;
}

/* Hide any browser-drawn scrollbar arrow buttons (some Windows/Chrome themes render classic
   up/down spinner arrows at the ends of the scrollbar track) - purely cosmetic OS chrome,
   not part of the page, but it sits close enough to our fixed widget buttons to read as
   part of them. Only Chromium honors ::-webkit-scrollbar-button; harmless elsewhere. */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(16,16,16,.25); border-radius: 999px; }

/* Support widget - widget.css ships its own lime-green (--support-accent), left over from
   the previous theme. Button itself: light blue. */
:root {
	--support-accent: #dfedf3;
}
.support-widget__trigger {
	color: #101010;
	box-shadow: 0 12px 28px rgba(254, 86, 49, .45);
}

/* Highlight badge for key words in body copy - same pattern as immohunter.app's hero text
   (pill-shaped highlight on "Echtzeit"/"WBS"), recolored to the site's own orange instead
   of their pink. */
.text-highlight {
	color: var(--Primary, #fe5631);
	font-weight: 700;
}

/* Header CTA - replaces the hotline block. Outline pill, black by default; orange
   (site Primary) only appears on hover/press, per explicit user direction. No circle -
   a plain thin arrow after the label. */
.tf-btn-outline-arrow {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	text-decoration: none;
	font-weight: 700;
	font-size: 12.5px;
	border-radius: 999px;
	padding: 4px 8px;
	border: 1px solid var(--Text-primary, #101010);
	color: var(--Text-primary, #101010);
	background: transparent;
	transition: .2s;
}
.tf-btn-outline-arrow .badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: inherit;
}
.tf-btn-outline-arrow .badge svg {
	width: 14px;
	height: 14px;
	stroke-width: 2px;
}
.tf-btn-outline-arrow:hover,
.tf-btn-outline-arrow:active {
	border-color: var(--Primary, #fe5631);
	color: var(--Primary, #fe5631);
}
/* Compact single-letter logo mark - shown instead of the full wordmark on narrow screens
   where header-right (lang + button + hamburger) already needs most of the width. */
.site-logo {
	display: inline-flex;
	align-items: center;
}
.site-logo .logo-letter {
	display: none;
	font-family: 'Syne', sans-serif;
	font-size: 24px;
	font-weight: 800;
	color: var(--Text-primary, #101010);
}

@media (max-width: 767px) {
	.site-logo .logo-full { display: none; }
	.site-logo .logo-letter { display: block; }

	/* Featured Properties - only 4 listing cards on phones, the full 6-card grid is too
	   long to scroll through on a small screen. */
	.fillters-wrap.mb-0 > .card-house:nth-child(n+5) {
		display: none;
	}

	/* Language switcher next to the hamburger menu, CTA button next to the language
	   switcher - left to right: [logo letter] ... [button] [lang] [menu]. */
	.header-right {
		display: flex;
		align-items: center;
	}
	.header-right .tf-btn-outline-arrow { order: 1; }
	.header-right .lang-switch { order: 2; }
	.header-right .mobile-button { order: 3; }
}

/* Header language switcher - thin, minimal, sits next to the CTA */
.lang-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.lang-switch__trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	font-family: 'Syne', sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: var(--Text-primary, #101010);
	cursor: pointer;
	padding: 8px 4px;
}
.lang-switch__trigger svg {
	width: 12px;
	height: 12px;
	transition: transform .2s;
}
.lang-switch.is-open .lang-switch__trigger svg {
	transform: rotate(180deg);
}
.lang-switch__list {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	background: #fff;
	border: 1px solid var(--Line, #e4e4e4);
	border-radius: 14px;
	min-width: 88px;
	padding: 6px;
	box-shadow: 0 12px 28px rgba(16,16,16,.12);
	z-index: 20;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .15s ease, transform .15s ease;
}
.lang-switch.is-open .lang-switch__list {
	opacity: 1;
	transform: translateY(0);
}
.lang-switch__list a {
	display: block;
	text-align: center;
	padding: 8px 10px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 600;
	color: var(--Text-secondary, #5c6368);
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.lang-switch__list a:hover,
.lang-switch__list a.is-active {
	background: var(--Bg-light, #f9f7f3);
	color: var(--Text-primary, #101010);
}

/* The theme's CSS ships several one-shot "reveal on scroll" classes (clip-path/opacity:0 by
   default, a GSAP ScrollTrigger flips them to visible via .active-animate). We stripped
   the Next.js scripts that would ever add that class, so without this override every
   element using them (about-section image included) stays permanently invisible. */
.tf-animate-1, .tf-animate-2, .tf-animate-3, .tf-animate-4 {
	clip-path: inset(0 0 0 0) !important;
	opacity: 1 !important;
	transform: none !important;
}
.effect-item {
	opacity: 1 !important;
}

/* Categories section: the image (.tab-content-wrap) is position:absolute, fixed-width
   (693px), floating over the list. The list column itself has no reserved width, so it
   only avoids the image by luck - short English words ("Villa", "Houses") never reach
   that far right. Our German labels are longer and run straight under the image at
   narrower viewports. Reserve real space for the image so text never collides with it. */
.section-categories .tabs-hover-wrap > div:first-child {
	max-width: 600px;
}

/* Overflow fix - The theme's own layout hits full 100vw + fixed-width elements (the search
   tab widget under the hero) that push past the viewport at some breakpoints, causing a
   horizontal scrollbar on the whole page. */
*, *::before, *::after {
	box-sizing: border-box;
}
html {
	overflow-x: hidden;
	width: 100%;
	max-width: 100vw;
}
body {
	overflow-x: hidden;
	width: 100%;
	max-width: 100vw;
	position: relative;
}

/* .infiniteslide is a JS-driven marquee (clones its content 5x for a seamless loop, then
   JS translateX's it). We stripped the Next.js scripts, so it just sits fully expanded,
   un-clipped and un-animated - clip it at its own wrapper instead of relying on the
   page-level overflow-x:hidden above. */
.wrap-infiniteslide {
	overflow: hidden;
	max-width: 100%;
}

/* The hero's text+button row has `flex-wrap` but no shrink/wrap safety margin, so on
   real browsers (which reserve scrollbar width Playwright doesn't) the button gets
   pushed a few px past the edge instead of wrapping to its own line. */
.page-title .content > .d-flex.justify-content-between {
	row-gap: 20px;
}
.page-title .content > .d-flex.justify-content-between > .text-body-2 {
	flex: 1 1 320px;
	min-width: 0;
}
.page-title .content > .d-flex.justify-content-between > a.tf-btn,
.page-title .content > .d-flex.justify-content-between > div {
	flex-shrink: 0;
}