/**
 * ImmoTemplates Core - Frontend-Styles fuer Immobilien-Uebersicht und -Exposé.
 * Portiert aus dem Theme "immotemplates-code" (style.css), nur auf den Templates
 * archive-immobilien.php / single-immobilien.php geladen. Bewusst ohne Header-/
 * Footer-/Navigations-Styles, die kommen vom jeweils aktiven Theme.
 */

:root {
	--accent: #4B6355;
	--bg: #F7F4EE;
	--ink: #1F2420;
	--ink-soft: #2B2F2A;
	--muted: #5B6259;
	--line: #E4DFD3;
	--card: #FFFFFF;
	--radius: 2px;
	--gutter: 20px;
	--section-bg: #3B4A3D;
}

@media (min-width: 900px)  {
:root {
		--gutter: 64px;
	}
}

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: "Work Sans", system-ui, sans-serif;
	background: var(--bg);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	font-size: 15px;
	line-height: 1.6;
}

h1, h2, h3 {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 0;
	font-weight: 500;
}

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

button {
	cursor: pointer;
	font-family: inherit;
	/*
	 * iOS/Safari blendet beim Antippen eines Buttons standardmaessig einen
	 * grauen "Tap-Highlight"-Schatten in Button-Form ein, auch wenn der Button
	 * selbst transparent ist - bei den runden Icon-Buttons (Slider-/Lightbox-
	 * Pfeile, Schliessen-Button) sah das wie ein unerwuenschter Kreis-Hintergrund
	 * aus. Hier global fuer alle Buttons deaktiviert.
	 */
	-webkit-tap-highlight-color: transparent;
}

input, textarea, select {
	font-family: inherit;
}

img {
	max-width: 100%;
	display: block;
}

.wrap {
	max-width: var(--immotpl-content-width, 1160px);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	box-sizing: border-box;
}

/*
 * Ab 900px (Desktop-Breite, selber Breakpoint wie die Header-Zeile mit
 * Logo links / Social-Icons rechts) faellt das innere Gutter-Padding weg,
 * damit Text und Inhalte innerhalb von .wrap/.content-grid/.contact-section
 * buendig mit dem Header abschliessen statt zusaetzlich eingerueckt zu sein.
 * Auf Mobil bleibt das Gutter erhalten, da der Header dort anders (gestapelt)
 * aufgebaut ist und der Inhalt sonst randlos an den Bildschirmrand stossen wuerde.
 */
@media (min-width: 900px)  {
.wrap {
		padding-left: 0;
		padding-right: 0;
	}
}

/*
 * Oben (direkt unterm Header) und unten (direkt überm Footer) Abstand zum
 * restlichen Seiteninhalt, auf Übersicht und Exposé identisch. Umschließt
 * jeweils den kompletten Template-Inhalt zwischen get_header() und
 * get_footer().
 */
.immotpl-core-page-pad {
	padding-top: 50px;
	padding-bottom: 50px;
}

@media (min-width: 900px)  {
.immotpl-core-page-pad {
		padding-bottom: 100px;
	}
}

.card,
.immotpl-card {
	background: var(--card);
	border: 1px solid var(--line);
}

#nav-toggle {
	display: none;
}

.hero-header {
	position: relative;
	padding-top: 24px;
	padding-bottom: 20px;
}

.hero-back {
	display: inline-block;
	margin-top: 10px;
	font-size: 13px;
	color: var(--accent);
	white-space: nowrap;
}

.hero-media {
	display: flex;
	align-items: stretch;
	gap: 20px;
	margin: 0 var(--gutter);
	position: relative;
	height: 300px;
}

@media (max-width: 899px)  {
.hero-media {
		gap: 12px;
	}
}

@media (min-width: 900px)  {
.hero-media {
		height: 440px;
	}
}

.hero-slider {
	position: relative;
	flex: 1 1 68%;
	min-width: 0;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(135deg, #3B4A3D 0%, #6C7C63 58%, #BFB393 100%);
}

.hero-slider-track {
	display: flex;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/*
	 * touch-action: pan-x statt des Browser-Standards "auto" - damit uebernimmt
	 * der Slider selbst sauber das horizontale Wischen (inkl. Scroll-Snap), waehrend
	 * ein vertikaler Finger-Zug zuverlaessig an die Seite durchgereicht wird, statt
	 * dass der Browser bei jedem Touch neu raten muss, ob horizontal oder vertikal
	 * gemeint war. Genau dieses Raten/Ueberschneiden hat vorher den "instabilen"/
	 * "verschobenen" Eindruck erzeugt (der Slider ruckte beim eigentlich vertikalen
	 * Scrollen der Seite leicht mit). Wischen zum Bildwechsel bleibt dadurch erhalten,
	 * die Pfeil-Buttons (per JS/scrollLeft) funktionieren unabhaengig davon weiter.
	 */
	touch-action: pan-x;
}

.hero-slider-track::-webkit-scrollbar {
	display: none;
}

.hero-slide {
	flex: 0 0 100%;
	height: 100%;
	scroll-snap-align: start;
	background-size: cover;
	background-position: center;
	cursor: pointer;
}

.hero-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: rgba(31, 36, 32, 0.6);
	color: var(--bg);
	cursor: pointer;
	transition: background 0.15s ease;
	padding: 0;
}

.hero-slider-arrow--prev {
	left: 12px;
}

.hero-slider-arrow--next {
	right: 12px;
}

.hero-slider-arrow:hover {
	background: rgba(31, 36, 32, 0.85);
}

/*
 * Hoehere Spezifitaet als das generische Theme-Default
 * "[type=button], [type=submit], button { border: 1px solid rgb(204,51,102); border-radius: 3px; }"
 * und Elementors ".elementor-kit-6 button { border-radius: 10px; }" - sonst
 * gewinnt je nach Ladereihenfolge der generische rote Rahmen/Radius statt
 * unserem eigenen runden, randlosen Pfeil. Dieselbe Theme-Regel setzt ausserdem
 * "display: block" (statt unserem flex), dadurch landete das SVG-Pfeilsymbol
 * als normales Inline-Element auf der Textgrundlinie statt zentriert zu werden -
 * sichtbar an einem leichten Versatz nach oben, obwohl der Kreis selbst schon
 * rund war. display/align-items/justify-content hier deshalb mit abgesichert.
 * Ausserdem setzt Elementors Kit-CSS ".elementor-kit-6 button { background-color:
 * var(--e-global-color-primary); }" mit Spezifitaet (0,1,1) objektiv hoeher als
 * unsere bisherige einfache Basis-Regel - dadurch schimmerte ein helles Tan/Beige
 * statt unseres dunklen, halbtransparenten Kreis-Hintergrunds durch. Hier deshalb
 * mit der korrekten Hintergrundfarbe abgesichert.
 */
.immotpl-core-page-pad .hero-slider-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(31, 36, 32, 0.6);
}

/*
 * Elementors Kit-CSS bringt auch eigene Hover/Focus-Regeln mit
 * (".elementor-kit-6 button:hover/:focus { background-color:
 * var(--e-global-color-secondary); }"), Spezifitaet (0,2,1) - das liegt sogar
 * ueber unserer obigen page-pad-Regel (0,2,0) UND ueber der bisherigen einfachen
 * ".hero-slider-arrow:hover"-Regel (0,2,0). Beim Hovern/Fokussieren blitzte
 * dadurch kurz Elementors Sekundaerfarbe statt unseres dunkleren Hover-Tons auf.
 * Hier deshalb mit noch hoeherer Spezifitaet (0,3,0) explizit abgesichert.
 */
.immotpl-core-page-pad .hero-slider-arrow:hover,
.immotpl-core-page-pad .hero-slider-arrow:focus,
.immotpl-core-page-pad .hero-slider-arrow:active {
	background: rgba(31, 36, 32, 0.85);
}

.hero-slider-counter {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 4px 10px;
	background: rgba(31, 36, 32, 0.6);
	color: var(--bg);
	font-size: 12px;
	letter-spacing: 0.02em;
}

.hero-thumbs {
	flex: 0 0 30%;
	max-width: 320px;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
}

.hero-thumb {
	flex: 0 0 170px;
	width: 100%;
	border: 2px solid transparent;
	padding: 0;
	border-radius: var(--radius);
	background-size: cover;
	background-position: center;
	cursor: pointer;
	opacity: 0.85;
	transition: opacity 0.15s ease;
}

.hero-thumb:hover {
	opacity: 1;
}

.hero-thumb.is-active {
	opacity: 1;
	border-color: #000000;
}

/*
 * Hoehere Spezifitaet als das generische Theme-Default
 * "[type=button], [type=submit], button { border: 1px solid rgb(204,51,102); border-radius: 3px; }"
 * und Elementors ".elementor-kit-6 button { border-radius: 10px; }" - sonst
 * gewinnt je nach Ladereihenfolge der rote Standard-Rahmen bzw. der groessere
 * Radius statt unseres eigenen (transparent, bzw. schwarz bei Auswahl).
 * Zusaetzlich setzt Elementors Kit-CSS ".elementor-kit-6 button { background-color:
 * var(--e-global-color-primary); }" objektiv hoehere Spezifitaet (0,1,1) als unsere
 * bisherige einfache Basis-Regel - hier deshalb "background-color: transparent"
 * mit abgesichert, damit das Vorschaubild nicht von einem Elementor-Farbton
 * (hellbraun/tan) ueberdeckt wird. Das Hintergrundbild selbst (background-image per
 * Inline-Style) ist davon unberuehrt, nur background-color wird neutralisiert.
 */
.immotpl-core-page-pad .hero-thumb {
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--radius);
	background-color: transparent;
}

.immotpl-core-page-pad .hero-thumb.is-active {
	border-color: #000000;
}

/*
 * Gleiches Prinzip wie oben: Elementors Kit-CSS setzt auch bei :hover/:focus
 * eine eigene Hintergrundfarbe mit hoeherer Spezifitaet (0,2,1) als unsere
 * bisherige page-pad-Regel (0,2,0) - hier mit background-color (nicht background,
 * um das per Inline-Style gesetzte Hintergrundbild nicht zu ueberschreiben)
 * nochmal explizit neutralisiert.
 */
.immotpl-core-page-pad .hero-thumb:hover,
.immotpl-core-page-pad .hero-thumb:focus,
.immotpl-core-page-pad .hero-thumb:active {
	background-color: transparent;
}

@media (max-width: 899px)  {
.hero-thumbs {
		display: none;
	}
.hero-slider {
		flex: 1 1 100%;
	}
}

.hero-photo-note {
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 6px 12px;
	background: rgba(247, 244, 238, 0.92);
	border-radius: var(--radius);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
}

.hero-meta {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.hero-tag {
	padding: 5px 12px;
	background: var(--accent);
	color: var(--bg);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: var(--radius);
}

.hero-status {
	padding: 5px 12px;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: var(--radius);
}

/*
 * Die drei Status-Varianten (hero-status--available/--reserved/--sold, siehe
 * immotpl_core_status_badge_variant() in inc/templates.php) hatten bisher gar
 * keine eigene Hintergrundfarbe hinterlegt - der Badge blieb deshalb komplett
 * ohne Hintergrund, obwohl die Markup-Klasse dafuer laengst existiert. Jetzt mit
 * den bestehenden Palette-Variablen nachgeruestet, analog zum .hero-tag-Badge.
 */
.hero-status--available {
	background: var(--accent);
	color: var(--bg);
}

.hero-status--reserved {
	background: var(--muted);
	color: var(--bg);
}

.hero-status--sold {
	background: var(--ink);
	color: var(--bg);
}

.hero-location {
	font-size: 16px;
	opacity: 0.88;
	color: var(--muted);
}

.hero-title {
	color: var(--ink);
	font-size: 28px;
	line-height: 1.2;
}

@media (min-width: 900px)  {
.hero-title {
		font-size: 42px;
		line-height: 1.18;
	}
}

.subnav {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}

body.admin-bar .subnav {
	top: 32px;
}

@media (max-width: 782px)  {
body.admin-bar .subnav {
		top: 46px;
	}
}

.subnav-inner {
	display: flex;
	gap: 18px;
	padding-top: 14px;
	padding-bottom: 14px;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}

@media (min-width: 900px)  {
.subnav-inner {
		gap: 30px;
		font-size: 12px;
		letter-spacing: 0.05em;
	}
}

.content-grid {
	max-width: var(--immotpl-content-width, 1160px);
	margin: 0 auto;
	padding: 40px var(--gutter) 0;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

@media (min-width: 900px)  {
.content-grid {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (min-width: 980px)  {
.content-grid {
		grid-template-columns: 1fr 360px;
		gap: 56px;
		padding-top: 56px;
	}
}

.main-col {
	display: flex;
	flex-direction: column;
	gap: 48px;
	min-width: 0;
}

@media (min-width: 900px)  {
.main-col {
		gap: 64px;
	}
}

.section-title {
	font-size: 21px;
}

@media (min-width: 900px)  {
.section-title {
		font-size: 24px;
	}
}

.section-block {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

@media (min-width: 900px)  {
.section-block {
		gap: 20px;
	}
}

.stat-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

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

.stat-tile {
	background: var(--card);
	padding: 16px 16px;
}

@media (min-width: 900px)  {
.stat-tile {
		padding: 20px 22px;
	}
}

.stat-label {
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 6px;
}

.stat-value {
	font-size: 18px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media (min-width: 900px)  {
.stat-value {
		font-size: 19px;
	}
}

.desc-text p {
	font-size: 16px;
	line-height: 1.75;
	color: var(--ink-soft);
	margin: 0 0 16px;
}

.desc-text p:last-child {
	margin-bottom: 0;
}

.legal-content {
	padding-top: 48px;
	padding-bottom: 64px;
}

.legal-content h1,
.legal-content h2,
.legal-content h3 {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 32px 0 12px;
}

.legal-content h1:first-child,
.legal-content h2:first-child,
.legal-content h3:first-child {
	margin-top: 0;
}

.legal-content p,
.legal-content li {
	font-size: 15px;
	line-height: 1.75;
	color: var(--ink-soft);
}

.legal-content p {
	margin: 0 0 16px;
}

.legal-content ul,
.legal-content ol {
	margin: 0 0 16px;
	padding-left: 20px;
}

.legal-content a {
	color: var(--accent);
}

.legal-content table {
	border-collapse: collapse;
	margin: 0 0 16px;
	width: 100%;
}

.legal-content table td,
.legal-content table th {
	border: 1px solid var(--line);
	padding: 8px 10px;
	text-align: left;
	font-size: 14px;
}

/*
 * 0.3.27: Button fuer [immotpl_widerrufsbelehrung], wenn eine PDF statt Text
 * hinterlegt ist. Eigene Klasse statt .btn-primary (das ist auf eine feste
 * Elternklasse .immotpl-core-page-pad angewiesen, um Elementors Kit-Linkfarbe
 * zu ueberschreiben - siehe Kommentar dort), da dieser Button auf einer frei
 * gebauten Elementor-Seite ohne diesen Vorfahren steht. Alle Eigenschaften mit
 * !important, aus demselben Grund wie bei den Slider-Punkten in 0.3.25.
 */
.immotpl-legal-pdf-button {
	display: inline-block !important;
	padding: 13px 28px !important;
	background: var(--accent) !important;
	color: #FFFFFF !important;
	border-radius: var(--radius) !important;
	font-size: 16px !important;
	letter-spacing: 0.02em !important;
	text-decoration: none !important;
}

.immotpl-legal-pdf-button:hover {
	color: #FFFFFF !important;
	opacity: 0.9;
}

.ausstattung-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px 32px;
}

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

.ausstattung-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
}

.energy-scale {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 4px;
}

.energy-scale-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.energy-scale-bar {
	display: flex;
	align-items: center;
	height: 26px;
	padding-left: 12px;
	min-width: 44px;
	width: calc(20% + (var(--step, 0) / 8) * (80% - 34px));
	border-radius: var(--radius);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	opacity: 0.62;
	transition: width 0.15s ease, opacity 0.15s ease;
}

.energy-scale-row.is-current .energy-scale-bar {
	opacity: 1;
}

.energy-scale-check {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ink);
	color: var(--bg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}

.data-table {
	display: flex;
	flex-direction: column;
}

.data-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 18px;
	border-bottom: 1px solid var(--line);
	font-size: 16px;
}

@media (min-width: 900px)  {
.data-row {
		padding: 13px 22px;
	}
}

.data-row:last-child {
	border-bottom: none;
}

.data-row span:first-child {
	color: var(--muted);
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

@media (min-width: 640px)  {
.gallery-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: 130px;
	}
.gallery-grid > :first-child {
		grid-column: span 2;
		grid-row: span 2;
	}
}

.gallery-tile {
	border-radius: var(--radius);
	min-height: 130px;
	background-size: cover;
	background-position: center;
	cursor: pointer;
}

.grundriss-box {
	padding: 20px;
	display: flex;
	justify-content: center;
	overflow-x: auto;
}

@media (min-width: 900px)  {
.grundriss-box {
		padding: 32px;
	}
}

.grundriss-box svg {
	max-width: 100%;
	height: auto;
}

.grundriss-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.grundriss-tile {
	overflow: hidden;
	border-radius: var(--radius);
	cursor: pointer;
}

.grundriss-tile img {
	width: 100%;
	height: auto;
	display: block;
}

.lage-map {
	border: 1px solid var(--line);
	border-radius: 0;
	overflow: hidden;
	position: relative;
}

#lage .lage-map {
	margin-top: 10px;
}

.lage-map .immotpl-osm-map {
	display: block;
}

.lage-text {
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink-soft);
	margin: 14px 0 0;
}

.similar-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

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

.similar-card {
	display: flex;
	flex-direction: column;
}

.similar-photo {
	height: 130px;
	background-size: cover;
	background-position: center;
	background-color: #8C8066;
}

.similar-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.similar-tag {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--accent);
}

.similar-title {
	font-size: 16px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.similar-meta {
	font-size: 16px;
	color: var(--muted);
}

.sidebar-card {
	position: static;
	display: flex;
	flex-direction: column;
	padding: 22px;
	gap: 18px;
}

@media (min-width: 980px)  {
.sidebar-card {
		position: sticky;
		top: 64px;
		padding: 26px;
	}
}

@media (min-width: 980px)  {
body.admin-bar .sidebar-card {
		top: 96px;
	}
}

.sidebar-price-label {
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 4px;
}

.sidebar-price {
	font-size: 24px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media (min-width: 900px)  {
.sidebar-price {
		font-size: 26px;
	}
}

.sidebar-divider {
	height: 1px;
	background: var(--line);
}

.sidebar-agent {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sidebar-agent-avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: linear-gradient(135deg, #6C7C63, #3B4A3D);
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
}

.sidebar-agent-name {
	font-size: 16px;
	font-weight: 500;
}

.sidebar-agent-role {
	font-size: 12px;
	color: var(--accent);
}

.sidebar-contact {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 16px;
	color: var(--ink-soft);
}

.btn-primary {
	padding: 13px 0;
	background: var(--accent);
	color: var(--bg);
	border: none;
	border-radius: var(--radius);
	font-size: 16px;
	letter-spacing: 0.02em;
	text-align: center;
}

/*
 * Elementor laedt seine eigenen, global auf der ganzen Kundenseite geltenden
 * Kit-Typo-Regeln (z. B. ".elementor-kit-6 a" fuer die Standard-Linkfarbe,
 * ".elementor-kit-6 h2" fuer Ueberschriften) mit derselben CSS-Spezifitaet wie
 * .btn-primary bzw. .contact-intro h2 - je nach Ladereihenfolge gewinnt dann
 * Elementor und ueberschreibt z. B. die Schriftfarbe von "Jetzt anfragen" (grauer
 * statt heller Text, dadurch auf der Akzentfarbe kaum lesbar) oder macht die
 * Ueberschrift im "Interesse geweckt?"-Kasten schwarz statt weiss. Fix ueber
 * hoehere Spezifitaet (zusaetzlicher .immotpl-core-page-pad-Vorfahre) statt
 * !important, analog zur Pagination-Korrektur in 0.3.7.
 */
.immotpl-core-page-pad .btn-primary,
.immotpl-core-page-pad .btn-primary:hover {
	color: #FFFFFF;
}

.contact-section {
	max-width: var(--immotpl-content-width, 1160px);
	margin: 48px auto 0;
	padding: 0 var(--gutter);
	box-sizing: border-box;
}

@media (min-width: 900px)  {
.contact-section {
		margin-top: 64px;
		padding-left: 0;
		padding-right: 0;
	}
}

.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 780px)  {
.contact-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.contact-intro {
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--section-bg);
	color: var(--bg);
}

@media (min-width: 900px)  {
.contact-intro {
		padding: 44px;
	}
}

.contact-intro h2 {
	font-size: 20px;
	color: var(--bg);
}

@media (min-width: 900px)  {
.contact-intro h2 {
		font-size: 22px;
	}
}

/*
 * Hoehere Spezifitaet als Elementors globale ".elementor-kit-6 h2"/".elementor-kit-6 a"
 * Kit-Regeln, siehe Kommentar bei .immotpl-core-page-pad .btn-primary weiter oben.
 * Ohne das wird die Ueberschrift hier schwarz statt weiss (auf dunklem
 * --section-bg-Hintergrund quasi unsichtbar) und Telefon-/E-Mail-Links grau
 * statt weiss.
 */
.immotpl-core-page-pad .contact-intro h2 {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 500;
	text-transform: none;
	font-size: 20px;
	color: #FFFFFF;
}

@media (min-width: 900px)  {
.immotpl-core-page-pad .contact-intro h2 {
		font-size: 22px;
	}
}

.immotpl-core-page-pad .contact-intro,
.immotpl-core-page-pad .contact-intro p,
.immotpl-core-page-pad .contact-intro-details,
.immotpl-core-page-pad .contact-intro-details a {
	color: #FFFFFF;
}

.contact-intro p {
	font-size: 16px;
	line-height: 1.7;
	opacity: 0.88;
	margin: 0;
}

.contact-intro-details {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 16px;
	font-size: 16px;
	line-height: 1.5;
	opacity: 0.92;
}

.contact-intro-details a {
	color: inherit;
}

.contact-intro-name {
	font-weight: 500;
}

.contact-form {
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

@media (min-width: 900px)  {
.contact-form {
		padding: 44px;
	}
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.form-field label {
	font-size: 12px;
	color: var(--muted);
}

.form-field input,
.form-field textarea,
.jet-form-builder__field:not(.hidden-field):not(.checkradio-field) {
	padding: 11px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 16px;
	width: 100%;
	box-shadow: none;
	background: var(--card);
	font-family: inherit;
	color: inherit;
}

.form-field textarea,
.jet-form-builder__field.textarea-field {
	resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus,
.jet-form-builder__field:not(.hidden-field):not(.checkradio-field):focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: none;
}

.contact-form button[type="submit"],
.jet-form-builder button[type="submit"],
.jet-form-builder__submit button {
	padding: 13px 28px;
	background: var(--accent);
	color: var(--bg);
	border: none;
	border-radius: var(--radius);
	font-size: 16px;
	align-self: flex-start;
}

.archive-intro {
	padding-top: 32px;
	padding-bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

@media (min-width: 900px)  {
.archive-intro {
		padding-top: 48px;
	}
}

.eyebrow {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.archive-intro h1 {
	font-size: 26px;
	line-height: 1.25;
}

@media (min-width: 900px)  {
.archive-intro h1 {
		font-size: 34px;
	}
}

.archive-lead {
	font-size: 16px;
	color: var(--muted);
	max-width: 620px;
	margin: 0;
	line-height: 1.6;
}

.filter-bar {
	position: static;
	margin-top: 24px;
}

@media (min-width: 980px)  {
.filter-bar {
		position: sticky;
		top: 0;
		z-index: 10;
	}
}

.filter-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	padding-left: 0;
	padding-right: 0;
}

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

@media (min-width: 980px)  {
.filter-form {
		grid-template-columns: 1fr 1fr 1.3fr 1fr 1fr auto;
		align-items: end;
		gap: 16px;
	}
}

.filter-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.filter-field label {
	font-size: 16px;
	color: var(--muted);
}

.filter-field select,
.filter-field input {
	padding: 10px 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 16px;
	background: var(--card);
	color: var(--ink);
	width: 100%;
}

.filter-submit {
	grid-column: 1 / -1;
	padding: 11px 22px;
	background: var(--accent);
	color: var(--bg);
	border: none;
	border-radius: 0;
	font-size: 16px;
}

@media (min-width: 980px)  {
.filter-submit {
		grid-column: auto;
	}
}

/*
 * Hoehere Spezifitaet als das generische Theme-Default
 * "[type=button], [type=submit], button { border: 1px solid rgb(204,51,102); border-radius: 3px; }"
 * - sonst behaelt der Filter-Button trotz border:none/border-radius:0 oben
 * den roten Standard-Rahmen samt Radius. Vorsorglich (0.3.15) auch die
 * Hintergrundfarbe hier mit abgesichert, da Elementors Kit-CSS
 * ".elementor-kit-6 button { background-color: var(--e-global-color-primary); }"
 * mit Spezifitaet (0,1,1) hoeher liegt als unsere bisherige einfache
 * Basis-Regel (0,1,0) und denselben Farbton durchsetzen wuerde.
 */
.immotpl-core-page-pad .filter-submit {
	padding: 11px 22px;
	border: none;
	border-radius: 0;
	background: var(--accent);
}

/*
 * Vorsorglich auch hier (0.3.16): Elementors Kit-CSS setzt bei :hover/:focus
 * eine eigene Hintergrundfarbe mit hoeherer Spezifitaet (0,2,1) als unsere
 * obige page-pad-Regel (0,2,0).
 */
.immotpl-core-page-pad .filter-submit:hover,
.immotpl-core-page-pad .filter-submit:focus,
.immotpl-core-page-pad .filter-submit:active {
	background: var(--accent);
}

.results-header {
	padding-top: 22px;
	padding-left: 0;
	padding-right: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

@media (min-width: 640px)  {
.results-header {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.results-count {
	font-size: 16px;
	color: var(--muted);
}

.sort-form {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
}

.sort-form label {
	color: var(--muted);
	white-space: nowrap;
}

.sort-form select {
	padding: 8px 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 16px;
	background: var(--card);
	color: var(--ink);
}

.sort-submit {
	padding: 8px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--card);
	font-size: 16px;
}

.property-grid {
	padding-top: 20px;
	padding-bottom: 8px;
	padding-left: 0;
	padding-right: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

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

@media (min-width: 980px)  {
.property-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 22px;
	}
}

.property-card {
	display: flex;
	flex-direction: column;
	text-decoration: none !important;
	color: inherit;
}

.property-photo {
	height: 160px;
	background-size: cover;
	background-position: center;
	position: relative;
	background-color: #6C7C63;
}

.property-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 10px;
	background: var(--accent);
	color: var(--bg);
	font-size: 11px;
	border-radius: var(--radius);
}

/*
 * "Miete" hat bewusst keine eigene Hintergrundfarbe mehr - nutzt dieselbe
 * (im Backend unter Design > Akzentfarbe einstellbare) Farbe wie "Kauf".
 */

.property-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.property-title {
	font-size: 16px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 600;
	color: var(--ink) !important;
}

.property-meta {
	font-size: 16px;
	color: var(--muted);
}

.property-meta-icon {
	display: flex;
	align-items: center;
	gap: 6px;
}

.eckdaten-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 26px;
}

.eckdaten-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.eckdaten-icon {
	display: inline-block;
	flex-shrink: 0;
}

.property-price {
	font-size: 16px;
	margin-top: 2px;
}

.no-results {
	grid-column: 1 / -1;
	padding: 40px 0;
	color: var(--muted);
	font-size: 16px;
}

.pagination {
	padding-top: 16px;
	padding-bottom: 56px;
	padding-left: 0;
	padding-right: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/*
 * Höher spezifisch als .pagination allein, weil das aktive Theme ebenfalls
 * eine generische .pagination-Regel mitbringt (justify-content: space-between),
 * die sonst je nach Ladereihenfolge gewinnt und die Seitenzahlen an die
 * äußeren Ränder schiebt statt sie mittig zusammenzuhalten.
 */
.immotpl-core-page-pad .pagination {
	justify-content: center;
}

.page-link {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	font-size: 16px;
	border-radius: var(--radius);
	color: var(--ink);
}

.page-link.is-active {
	background: var(--accent);
	color: var(--bg);
	border-color: var(--accent);
}

.immotpl-social-icons {
	display: flex;
	align-items: center;
	gap: 14px;
}

.immotpl-social-icon {
	display: inline-flex;
	color: inherit;
}

.immotpl-social-icon:hover {
	opacity: 0.75;
}

.contact-intro-details .immotpl-social-icons {
	margin-top: 10px;
}

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(31, 36, 32, 0.92);
	padding: 40px var(--gutter);
}

.lightbox[aria-hidden="true"] {
	display: none;
}

.lightbox-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: calc(100vh - 140px);
}

.lightbox-image {
	max-width: 100%;
	max-height: calc(100vh - 140px);
	object-fit: contain;
}

.lightbox-caption {
	margin-top: 16px;
	color: var(--bg);
	font-size: 14px;
	text-align: center;
	min-height: 1.2em;
}

.lightbox-close {
	position: absolute;
	top: 20px;
	right: var(--gutter);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	color: var(--bg);
	cursor: pointer;
}

/*
 * Bewusst ohne Kreis-Hintergrund (vorher ein kaum sichtbarer heller Schimmer,
 * rgba(247,244,238,0.12)) - auf Kundenwunsch schlicht/klassisch gehalten, das
 * Pfeilsymbol steht direkt frei auf dem dunklen Lightbox-Hintergrund, analog zu
 * Elementors eigener nativer Lightbox. Hover-Feedback jetzt ueber Opacity statt
 * Hintergrundfarbe.
 */
.lightbox-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--bg);
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.lightbox-arrow--prev {
	left: var(--gutter);
}

.lightbox-arrow--next {
	right: var(--gutter);
}

.lightbox-arrow:hover {
	opacity: 0.65;
}

/*
 * Hoehere Spezifitaet als das generische Theme-Default
 * "[type=button], [type=submit], button { border: 1px solid rgb(204,51,102); border-radius: 3px; }"
 * und Elementors ".elementor-kit-6 button { border-radius: 10px; }" - betrifft
 * sowohl die Lightbox-Pfeile als auch den Schliessen-Button. Dieselbe Theme-Regel
 * setzt ausserdem "display: block" (statt unserem flex), dadurch landeten die
 * SVG-Symbole (Pfeile und X) als normales Inline-Element auf der Textgrundlinie
 * statt zentriert zu werden - sichtbar an einem leichten Versatz nach oben.
 * display/align-items/justify-content hier deshalb mit abgesichert.
 * Neu entdeckt (0.3.15): Elementors eigenes Kit-CSS ".elementor-kit-6 button {
 * background-color: var(--e-global-color-primary); }" hat Spezifitaet (0,1,1) -
 * objektiv hoeher als unsere bisherige einfache Basis-Regel (0,1,0), gewinnt also
 * unabhaengig von der Ladereihenfolge. Dadurch blieb trotz "background: transparent"
 * in der Basis-Regel ein helles Tan/Beige hinter Pfeilen und X sichtbar. Hier mit
 * "background: transparent" nochmal explizit abgesichert, jetzt mit ausreichender
 * Spezifitaet (0,2,0).
 */
.immotpl-core-page-pad .lightbox-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
}

.immotpl-core-page-pad .lightbox-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
}

/*
 * 0.3.16: trotz 0.3.15 war der Elementor-Hintergrund bei Mouse-Hover bzw. nach
 * dem Anklicken (Fokus) immer noch kurz sichtbar. Grund: Elementors Kit-CSS hat
 * zusaetzlich eigene Hover/Focus-Regeln (".elementor-kit-6 button:hover/:focus {
 * background-color: var(--e-global-color-secondary); }") mit Spezifitaet (0,2,1) -
 * das liegt sogar ueber unserer obigen Basis-Regel (0,2,0), die nur den
 * Normalzustand abdeckt. Hier deshalb mit noch hoeherer Spezifitaet (0,3,0)
 * explizit fuer :hover/:focus/:active abgesichert.
 */
.immotpl-core-page-pad .lightbox-arrow:hover,
.immotpl-core-page-pad .lightbox-arrow:focus,
.immotpl-core-page-pad .lightbox-arrow:active,
.immotpl-core-page-pad .lightbox-close:hover,
.immotpl-core-page-pad .lightbox-close:focus,
.immotpl-core-page-pad .lightbox-close:active {
	background: transparent;
}

body.lightbox-open {
	overflow: hidden;
}

/*
 * 0.3.23: [immobilien_slider] - zeigt per Default 3 Objekte gleichzeitig
 * (1 auf Mobil, 2 ab 640px, 3 ab 980px, siehe Breakpoints unten), die
 * Breite/den Abstand pro Slide übernimmt assets/frontend.js zur Laufzeit
 * (getBoundingClientRect), die CSS-Breakpoints hier legen nur fest, WIE
 * VIELE Karten nebeneinander passen.
 */
.immobilien-slider {
	position: relative;
}

.immobilien-slider-viewport {
	overflow: hidden;
}

.immobilien-slider-track {
	display: flex;
	align-items: stretch;
	gap: 22px;
	transition: transform 0.6s ease;
	will-change: transform;
}

.immobilien-slider-slide {
	flex: 0 0 100%;
	max-width: 100%;
}

.immobilien-slider-slide .property-card {
	height: 100%;
}

@media (min-width: 640px)  {
.immobilien-slider-slide {
		flex: 0 0 calc((100% - 22px) / 2);
		max-width: calc((100% - 22px) / 2);
	}
}

@media (min-width: 980px)  {
.immobilien-slider-slide {
		flex: 0 0 calc((100% - 44px) / 3);
		max-width: calc((100% - 44px) / 3);
	}
}

.immobilien-slider-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
}

.immobilien-slider-dot {
	width: 6px !important;
	height: 6px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: #C7C2B4 !important;
	box-shadow: none !important;
	cursor: pointer !important;
}

.immobilien-slider-dot.is-active,
.immobilien-slider-dot:hover {
	background: var(--ink) !important;
}

/*
 * 0.3.23: [immotpl_team] - Team-Übersicht, analog zum früheren "Unser Team"-
 * Bereich im Theme "immotemplates-code" (bdohi.myrdbx.io/ueber-uns/).
 * .card liefert bereits Hintergrund/Rahmen (siehe oben), hier nur noch das
 * kartenspezifische Layout.
 *
 * 0.3.28: Feste Spaltenzahl (1/2/3 je Breakpoint) durch auto-fit ersetzt, da
 * bei Kunden mit z. B. nur zwei statt drei Mitarbeitern in der 3-Spalten-
 * Ansicht eine leere dritte Spalte rechts stehenblieb (unausgewogen,
 * linksbündig wirkend). minmax(min(260px, 100%), 340px) lässt die Browser-
 * Grid-Engine selbst so viele Spalten wie moeglich in dieser Breite bilden
 * (auf schmalen Bildschirmen automatisch nur eine, ohne Overflow), leere
 * Spalten werden von auto-fit kollabiert, justify-content:center zentriert
 * die tatsaechlich belegten Spalten dann in der Zeile - funktioniert damit
 * automatisch korrekt fuer jede Mitarbeiterzahl, nicht nur 2 oder 3.
 */
.immotpl-team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 340px));
	justify-content: center;
	gap: 22px;
}

.immotpl-team-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.immotpl-team-photo {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	background-color: #6C7C63;
}

.immotpl-team-photo img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: none !important;
	margin: 0 !important;
	object-fit: cover !important;
	object-position: center center !important;
}

.immotpl-team-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.immotpl-team-name {
	font-size: 18px;
	font-weight: 600;
	color: var(--ink);
}

.immotpl-team-position {
	font-size: 14px;
	color: var(--accent);
	margin-bottom: 8px;
}

.immotpl-team-contact {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--muted);
}

.immotpl-team-contact a {
	color: inherit;
	text-decoration: none;
}

.immotpl-team-contact svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.immotpl-team-text {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--muted);
	line-height: 1.5;
}