/*
 * Neusch-Frediani Immobilien -- Theme-Stylesheet.
 * Design nahezu 1:1 nach der bisherigen WIX-Vorlage www.neusch-frediani.com.
 */

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../../fonts/open-sans-v44-latin-regular.woff2") format("woff2");
}

@font-face {
	font-family: "Open Sans";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../../fonts/open-sans-v44-latin-italic.woff2") format("woff2");
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../../fonts/open-sans-v44-latin-600.woff2") format("woff2");
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../../fonts/open-sans-v44-latin-700.woff2") format("woff2");
}

:root {
	--nf-color-navy: #1E3054;
	--nf-color-blaugrau: #B2BED4;
	--nf-color-sand: #CBB492;
	--nf-color-textblau: #283B62;
	--nf-color-accent: #EA492E;
	--nf-color-cream: #F5ECD9;
	--nf-font-base: "Open Sans", Arial, Helvetica, sans-serif;
}

html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	margin: 0;
	font-family: var(--nf-font-base);
	font-size: 15px;
	line-height: 1.6;
	color: var(--nf-color-textblau);
	background-color: var(--nf-color-cream);
	background-image: url("../img/paper-texture.jpg");
	background-repeat: repeat;
	background-position: top left;
}

/*
 * Unterseiten wirken im WIX-Original deutlich heller als die Startseite
 * (siehe docs/wix-referenzwerte-unterseiten.md, Abschnitt 1a: WIX rendert
 * das Hintergrundbild dort mit ~60% Deckkraft statt 100%). Bei unserer
 * Papier-Textur erzeugen wir denselben Effekt ueber einen weissen
 * Aufheller-Layer vor der Textur. Die Startseite (body.home, gesetzt durch
 * is_front_page()) behaelt die volle, unveraenderte Textur.
 */
body:not(.home) {
	background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url("../img/paper-texture.jpg");
}

body:not(.home) .nf-header {
	background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url("../img/paper-texture.jpg");
}

/* Wasserzeichen auf dem helleren Unterseiten-Grund minimal nachjustiert,
   damit es trotz aufgehelltem Hintergrund dezent sichtbar bleibt. */
body:not(.home) .nf-page-wrap::before {
	color: rgba(255, 255, 255, 0.07);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.nf-skip-link {
	position: fixed;
	top: -50px;
	left: 0;
	z-index: 10000;
	padding: 10px 16px;
	background: var(--nf-color-navy);
	color: #fff;
	transition: top 0.15s ease-in-out;
}

.nf-skip-link:focus {
	position: fixed;
	top: 0;
	width: auto;
	height: auto;
	clip: auto;
}

/*
 * Spezifitätshinweis: Hello Elementors reset.css definiert ebenfalls eine
 * blanke "a"-Regel (Farbe + text-decoration:none) und lädt NACH diesem
 * Stylesheet -- bei gleicher Spezifität gewinnt sonst reset.css. Deshalb
 * hier bewusst "body a" statt nur "a", damit unsere Regel zuverlässig
 * gewinnt. Betrifft A4: Links/Telefon/E-Mail sollen navy sein, Orange
 * bleibt Akzentfarbe für bewusst gesetzte Buttons/Badges.
 */
body a {
	color: var(--nf-color-textblau);
	text-decoration: underline;
}

/* Wasserzeichen "NEUSCH-FREDIANI IMMOBILIEN" hinter dem Seiteninhalt */
.nf-page-wrap {
	position: relative;
	overflow-x: hidden;
}

.nf-page-wrap::before {
	content: "NEUSCH-FREDIANI IMMOBILIEN";
	position: absolute;
	top: 40px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: clamp(40px, 8vw, 160px);
	font-weight: 700;
	letter-spacing: 4px;
	color: rgba(255, 255, 255, 0.045);
	z-index: 0;
	pointer-events: none;
	user-select: none;
}

.nf-page-wrap > * {
	position: relative;
	z-index: 1;
}

/* ---------- Header ---------- */

.nf-header {
	background-color: var(--nf-color-cream);
	background-image: url("../img/paper-texture.jpg");
	background-repeat: repeat;
}

.nf-header__inner {
	position: relative;
	max-width: 1400px;
	margin: 0 auto;
	padding: 24px 32px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
}

/*
 * Desktop-Content-Breite: die WIX-Vorlage hat eine feste 980px-Content-Spalte
 * (Logo+Nav+Ribbon), zentriert im Viewport (Referenzwerte, docs/wix-
 * referenzwerte.md). Ribbon/Logo werden ab hier absolut relativ zu diesem
 * Container positioniert, Nav bekommt ihre Y-Position ueber margin-top.
 */
@media (min-width: 1024px) {
	.nf-header__inner {
		width: 980px;
		max-width: 980px;
		min-height: 156px;
		padding: 0;
	}
}

.nf-ribbon {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	top: 6px;
	left: 4px;
	width: auto;
	height: 40px;
	background-color: rgba(30, 48, 84, 0.85);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
	color: rgb(178, 190, 212);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	padding: 0 16px;
	transform: rotate(-8deg);
	transform-origin: center center;
}

.nf-ribbon:hover,
.nf-ribbon:focus {
	filter: brightness(1.15);
}

/* Desktop-Position der Ribbon-Bounding-Box: x=271/y=35 bei 1440px-Viewport
   (Referenzwerte) entspricht, zurueckgerechnet auf das unrotierte Element
   relativ zur 980px-Content-Spalte, top:48px/left:44px. */
@media (min-width: 1024px) {
	.nf-ribbon {
		position: absolute;
		top: 48px;
		left: 0;
	}
}

.nf-logo {
	display: block;
	margin: 0 auto;
}

.nf-logo img {
	display: block;
	height: auto;
	width: 260px;
	max-width: 100%;
	margin: 0 auto;
}

/*
 * Desktop-Logo-Zentrierung: das Ribbon links hat ein anderes Breitenmass als
 * die Wortmarke -- ueber justify-content:space-between allein landet die
 * Wortmarke dadurch rechts der echten Seitenmitte (Befund P2). Ab dem
 * Desktop-Breakpoint wird die Wortmarke deshalb unabhaengig vom Ribbon exakt
 * auf die Mitte von .nf-header__inner zentriert.
 */
@media (min-width: 1024px) {
	.nf-logo {
		position: absolute;
		top: 15px;
		left: 50%;
		transform: translateX(-50%);
		margin: 0;
	}

	.nf-logo img {
		width: 286px;
		height: 58px;
	}
}

/*
 * Spezifitätshinweis (wie oben bei "body a"): Hello Elementors reset.css
 * enthält eine Regel für [type="button"], die bei diesem <button
 * type="button"> dieselbe Spezifität (0,0,1,0) wie ".nf-nav-toggle" hat und
 * NACH diesem Stylesheet lädt -- ohne Ankerklasse gewinnt sonst reset.css
 * und der Burger bleibt auch auf Desktop sichtbar (display:inline-block,
 * durch den Flex-Elternkontext zu "block" blockifiziert). Deshalb hier
 * ".nf-header .nf-nav-toggle" statt nur ".nf-nav-toggle".
 */
.nf-header .nf-nav-toggle {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 8px;
}

.nf-nav-toggle__bar {
	display: block;
	width: 26px;
	height: 3px;
	margin: 5px 0;
	background-color: var(--nf-color-navy);
}

.nf-primary-nav {
	width: 100%;
	margin-top: 18px;
}

/* Nav-Y-Position: y=102 relativ zur 980px-Content-Spalte (Referenzwerte). */
@media (min-width: 1024px) {
	.nf-primary-nav {
		margin-top: 102px;
	}
}

.nf-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 14px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	border-bottom: 1px solid rgba(30, 48, 84, 0.15);
}

.nf-menu li {
	position: relative;
}

.nf-menu a {
	display: block;
	padding: 6px 10px;
	color: var(--nf-color-textblau);
	text-decoration: none;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: normal;
}

.nf-menu li.current-menu-item > a,
.nf-menu li.current-menu-ancestor > a,
.nf-menu a:hover,
.nf-menu a:focus {
	color: var(--nf-color-sand);
}

.nf-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background-color: var(--nf-color-navy);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
	z-index: 20;
	display: none;
}

.nf-menu li:hover > .sub-menu,
.nf-menu li:focus-within > .sub-menu {
	display: block;
}

.nf-menu .sub-menu a {
	color: var(--nf-color-sand);
	padding: 8px 18px;
	white-space: nowrap;
	font-size: 13px;
}

.nf-menu .sub-menu a:hover,
.nf-menu .sub-menu a:focus {
	color: var(--nf-color-blaugrau);
}

/* ---------- Footer ---------- */

.nf-footer {
	background-color: var(--nf-color-navy);
	color: #fff;
}

.nf-footer__inner {
	max-width: 1400px;
	margin: 0 auto;
	/* Footer-Gesamthoehe 122px wie Vorlage: 68px-Badges + 2x27px */
	padding: 27px 32px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.nf-footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	font-size: 13px;
}

.nf-footer-menu li:not(:last-child)::after {
	content: "|";
	margin: 0 8px;
	color: rgba(255, 255, 255, 0.5);
}

.nf-footer-menu a {
	color: #fff;
	text-decoration: none;
}

.nf-footer-menu a:hover,
.nf-footer-menu a:focus {
	text-decoration: underline;
}

.nf-footer__badges {
	display: flex;
	align-items: center;
	gap: 12px;
}

.nf-footer__badges img {
	display: block;
	/* Badge-Groesse wie Vorlage (78x68) — lesbar */
	height: 68px;
	width: auto;
}

.nf-footer__address {
	font-style: normal;
	font-size: 13px;
	white-space: nowrap;
}

/* ---------- Responsive ---------- */

@media (max-width: 1023px) {
	.nf-header .nf-nav-toggle {
		display: block;
		order: 2;
	}

	.nf-ribbon {
		order: 1;
	}

	.nf-logo {
		order: 3;
		width: 100%;
		margin: 8px 0 0;
	}

	.nf-logo img {
		margin: 0 auto;
	}

	.nf-header__inner {
		align-items: center;
	}

	.nf-primary-nav {
		order: 4;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.2s ease-in-out;
	}

	.nf-primary-nav.is-open {
		max-height: 600px;
	}

	.nf-menu {
		flex-direction: column;
		border-bottom: none;
	}

	.nf-menu .sub-menu {
		position: static;
		display: none;
		box-shadow: none;
		background-color: rgba(30, 48, 84, 0.06);
	}

	.nf-menu li.is-open > .sub-menu {
		display: block;
	}

	.nf-footer__inner {
		flex-direction: column;
		text-align: center;
	}
}

/* ---------- SEO-H1 ohne sichtbaren Seitentitel (A2) ---------- */

/*
 * Die WIX-Vorlage zeigt keinen großen Seitentitel -- die Seiten steigen
 * direkt mit Hero-Bild bzw. Fließtext ein. Das H1-Heading-Widget bleibt aus
 * SEO-/Struktur-Gründen pro Seite genau einmal im DOM erhalten (Inhalt =
 * Seitentitel), wird aber wie ".screen-reader-text" visuell ausgeblendet.
 * Betroffen: Home, Maklerbüro, Immobilien anbieten, Immobilien suchen,
 * Projektentwicklung, Immobilienverwaltung, Kontakt. Impressum und
 * Datenschutzerklärung behalten ihren sichtbaren Titel (siehe Abgleich-
 * Doku B9/B10).
 */
.elementor-element-f867478b,
.elementor-element-fb4b5c98,
.elementor-element-c4a912cf,
.elementor-element-ac66ef71,
.elementor-element-2b91f6f6,
.elementor-element-db269a8a,
.elementor-element-27025654 {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ---------- Home: Leistungskarten dreispaltig (B2) ---------- */

/*
 * Die Elementor-Container-Breakpoint-Logik liefert für diese "boxed"
 * Container keine Breiten-CSS (bekanntes Verhalten bei content_width=boxed
 * ohne eigenes Breiten-Control auf dem Kind) -- die drei Karten haben ohne
 * diese Regel volle Breite und stapeln sich dadurch. Direkte Breitenangabe
 * behebt das zuverlässig, unabhängig von Elementors Custom-Property-Kette.
 */
@media (min-width: 768px) {
	.elementor-element-d1747c77,
	.elementor-element-97345f94,
	.elementor-element-02c041a3 {
		flex: 0 1 31% !important;
		width: 31% !important;
		max-width: 31%;
	}
}

@media (max-width: 767px) {
	.elementor-element-d1747c77,
	.elementor-element-97345f94,
	.elementor-element-02c041a3 {
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100%;
	}
}

/*
 * Kartenköpfe: der lange, einzeilige Titel "IMMOBILIENVERWALTUNG" reißt
 * sonst aus der navyblauen Box heraus (kein Leerzeichen zum Umbrechen) --
 * bei 31%-Spaltenbreite auf Desktop ebenso wie bei voller Breite auf
 * schmalen Mobilviewports. Kleinere Schrift + word-break als
 * Sicherheitsnetz, deshalb ohne Breakpoint-Einschränkung.
 */
.elementor-element-f424ab71 .elementor-heading-title,
.elementor-element-0b4e6aa9 .elementor-heading-title,
.elementor-element-3decc145 .elementor-heading-title {
	font-size: 20px;
	word-break: break-word;
}

/* ---------- immowelt-Bewertungskarte (B4) ---------- */

/*
 * Gleiches Breiten-Problem wie bei den Leistungskarten (B2): die
 * Container-Breite aus den Elementor-Settings kommt bei diesen "boxed"
 * Containern nicht im generierten CSS an. Ohne diese Regel ist die Karte
 * so breit wie ihre Elternspalte statt eines kompakten Kärtchens.
 * Betrifft Maklerbüro (5503efd2), Immobilienverwaltung (914177c9) und
 * Kontakt (7d472b80).
 */
.elementor-element-5503efd2,
.elementor-element-914177c9,
.elementor-element-7d472b80 {
	width: 220px !important;
	max-width: 100%;
	flex: 0 0 220px !important;
}

/*
 * Maklerbüro: Textspalte und Bewertungskarte sollen nebeneinander stehen
 * (Vorlage: Text links, Karte rechts). Gleiche Ursache wie oben -- die
 * Breite der Textspalte kommt ebenfalls nicht im CSS an.
 */
@media (min-width: 768px) {
	.elementor-element-1af76a10 {
		flex: 1 1 auto !important;
		width: auto !important;
		max-width: 600px;
	}
}

/* ---------- Kontaktformular (Ninja Forms) ---------- */

/*
 * Ninja Forms rendert clientseitig über JS (Backbone-Templates); die
 * Grundstruktur (.field-wrap als Flexbox, Label/Element per "order")
 * kommt bereits aus dem Plugin-eigenen display-structure.css. Wir
 * überschreiben hier nur Farben und Maße für die 1:1-Optik zum früheren
 * Contact-Form-7-Formular (mittlerweile entfernt, siehe CHANGELOG).
 *
 * Präfix-Kollision beachten: Theme und Plugin verwenden zufällig
 * beide "nf-" (Neusch-Frediani vs. Ninja Forms). Deshalb ist hier
 * ausnahmslos jede Regel unter .nf-contact-form gescoped -- so treffen
 * unsere Theme-Regeln nie ungewollt auf ein Ninja-Forms-Formular
 * außerhalb dieses Containers und umgekehrt.
 */

.nf-contact-form .nf-form-fields-required {
	display: none;
}

.nf-contact-form .nf-field-container {
	margin-bottom: 5px;
}

.nf-contact-form .nf-field-container.submit-container {
	margin-bottom: 0;
}

.nf-contact-form .nf-field-container .nf-field-label {
	margin-bottom: 0;
}

.nf-contact-form .nf-field-label label,
.nf-contact-form .nf-field-label .nf-label-span {
	font-weight: 600;
	font-size: 14px;
	color: var(--nf-color-textblau);
}

.nf-contact-form .ninja-forms-req-symbol {
	color: inherit;
}

.nf-contact-form .nf-field-element input.ninja-forms-field:not([type="checkbox"]):not([type="submit"]),
.nf-contact-form .nf-field-element textarea.ninja-forms-field {
	font-family: var(--nf-font-base);
	font-size: 15px;
	color: #fff;
	background-color: rgba(0, 46, 93, 0.35);
	border: none;
	border-radius: 0;
	width: 100%;
}

.nf-contact-form .nf-field-element input.ninja-forms-field:not([type="checkbox"]):not([type="submit"]) {
	padding: 0 12px;
	height: 32px;
	line-height: 32px;
}

.nf-contact-form .nf-field-element input.ninja-forms-field::placeholder,
.nf-contact-form .nf-field-element textarea.ninja-forms-field::placeholder {
	color: #fff;
	opacity: 0.9;
}

.nf-contact-form .nf-field-element textarea.ninja-forms-field {
	min-height: 130px;
	height: 130px;
	padding: 10px 12px;
	resize: vertical;
}

.nf-contact-form .nf-field-element input.ninja-forms-field:focus,
.nf-contact-form .nf-field-element textarea.ninja-forms-field:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--nf-color-navy);
}

/* Datenschutz-Checkbox: eigene Zeile, bewusst OHNE die Feldfläche der
   übrigen Eingaben (sonst navy-blauer Balken hinter der Checkbox --
   derselbe Stolperstein wie zuvor beim CF7-Pendant). Die Reihenfolge
   Checkbox-vor-Label kommt bereits aus display-structure.css (.label-right
   setzt .nf-field-element vor .nf-field-label per "order"). */
.nf-contact-form .checkbox-wrap {
	gap: 8px;
	align-items: flex-start;
}

.nf-contact-form .checkbox-container .nf-field-label {
	padding-left: 0;
}

.nf-contact-form .checkbox-container .nf-field-label label {
	font-weight: 400;
	font-size: 13px;
	color: var(--nf-color-textblau);
}

.nf-contact-form .checkbox-container .nf-field-label a {
	color: var(--nf-color-textblau);
}

.nf-contact-form .checkbox-wrap input[type="checkbox"].ninja-forms-field {
	accent-color: var(--nf-color-navy);
	margin-top: 3px;
}

.nf-contact-form .submit-container .nf-field-element {
	display: flex;
	justify-content: flex-end;
}

.nf-contact-form .submit-container input[type="submit"].ninja-forms-field {
	background-color: var(--nf-color-textblau);
	color: #fff;
	border: 0;
	border-radius: 0;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 10px 28px;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.nf-contact-form .submit-container input[type="submit"].ninja-forms-field:hover,
.nf-contact-form .submit-container input[type="submit"].ninja-forms-field:focus {
	background-color: #3B5384;
}

.nf-contact-form .nf-response-msg {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-radius: 2px;
	font-size: 14px;
	border: 1px solid #2e7d32;
	color: #2e7d32;
}

.nf-contact-form .nf-error-msg {
	color: var(--nf-color-accent);
	font-size: 12px;
	margin-top: 2px;
}

/*
 * Spam-Schutz-Köderfelder ("webseite", "zeitstempel", siehe
 * inc/nf-antispam.php) außerhalb des sichtbaren Bereichs positionieren --
 * bewusst NICHT nur display:none, das erkennen manche Bots und lassen das
 * Feld dann in Ruhe. Screenreader werden zusätzlich per aria-hidden und
 * tabindex="-1" ferngehalten (siehe assets/js/antispam.js).
 */
.nf-contact-form .nf-antispam-trap {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	margin: 0 !important;
}

/* Kontakt-Seite: Bewertungs-Badge als Overlay auf dem Hero-Bild (Design-Feinschliff Runde 2) */
.nf-kontakt-hero-wrap {
	position: relative;
}

@media (min-width: 768px) and (max-width: 1023px) {
	.nf-kontakt-hero-wrap .nf-badge-overlay {
		position: absolute;
		top: 32px;
		left: 40px;
		z-index: 5;
	}
}

/*
 * Praezisions-Fix Runde 7: Der Hero-Wrap (.nf-kontakt-hero-wrap) ist
 * edge-to-edge (volle Viewport-Breite), das Hero-Bild selbst aber ueber den
 * Elementor-Kit-Wert "container_width: 1000px" horizontal zentriert
 * (bekannte Container-Falle -- Elementors eigene _offset_x/_offset_y-Werte
 * fuer das Badge beziehen sich auf den vollen Wrap, nicht auf das darin
 * zentrierte Bild -- das Badge landete dadurch am linken Browserrand statt
 * im Bild). Ab 1024px rechnen wir die Bild-Innenposition ueber calc() nach:
 * Bildrand links = (Viewport - 1000px) / 2; Badge = Bildrand + 27px/28px
 * (Referenzwerte docs/wix-referenzwerte-unterseiten.md §4). !important, da
 * Elementors eigene .elementor-element-7d472b80-Regel (3 Klassen) sonst
 * spezifischer ist als diese Zwei-Klassen-Regel.
 */
@media (min-width: 1024px) {
	.nf-kontakt-hero-wrap .nf-badge-overlay {
		position: absolute;
		top: 28px !important;
		left: calc(50% - 473px) !important;
		z-index: 5;
	}
}

/* Hero-Bild Kontakt: unveraendert, volle Wrap-Breite, 350px hoch. */
.nf-hero-fixed img {
	width: 100% !important;
	height: 350px !important;
	object-fit: cover;
	display: block;
}

/*
 * Hero-Bilder Maklerbuero / Immobilien anbieten / Immobilien suchen /
 * Projektentwicklung / Immobilienverwaltung: individuelle Hoehe je Seite
 * gemaess WIX-Referenzwerten (Praezisions-Fix Runde 7,
 * docs/wix-referenzwerte-unterseiten.md §2). Breite bleibt bei 100% des
 * 1000px-Kit-Content-Containers (~980px WIX-Vorlage).
 */
.nf-hero-244 img,
.nf-hero-336 img,
.nf-hero-392 img {
	width: 100% !important;
	object-fit: cover;
	display: block;
}

.nf-hero-244 img {
	height: 244px !important;
}

.nf-hero-336 img {
	height: 336px !important;
}

.nf-hero-392 img {
	height: 392px !important;
}

/*
 * Maklerbuero-Signatur: soll die Namenszeile wie eine Brief-Unterschrift
 * ueberlappen statt sauber darueberzustehen (docs/wix-referenzwerte-
 * unterseiten.md §3). Bildbreite 250px per Widget-Setting, Hoehe hier auf
 * 84px gedeckelt (object-fit: contain, keine Verzerrung); der negative
 * Abstand zur Namenszeile sitzt als _margin-Setting direkt am Text-Widget.
 */
.nf-signature-fixed img {
	width: 250px !important;
	height: 84px !important;
	object-fit: contain;
	object-position: left center;
}

/*
 * Der Signatur-Widget-Wrapper erbt Elementors Standard-"text-align:center"
 * und sitzt zudem -- bekannte Container-Breiten-Falle, siehe Kommentar
 * oben zur Bewertungskarte -- in einer versehentlich vollen statt der
 * eingestellten 600px-Spalte. Ohne diese Regel zentriert sich das
 * Signatur-Bild weit rechts der Namenszeile und die gewollte Ueberlappung
 * (siehe .nf-signature-fixed img oben) geht optisch verloren.
 */
.nf-signature-fixed {
	text-align: left !important;
}

/*
 * Hero-Video horizontal zentrieren: Elementor 4.1 schreibt align_items/
 * align_self der Container nicht ins generierte CSS (gemessen: .e-con-inner
 * bleibt align-items:normal). Deshalb Zentrierung hier im Theme -- Referenz
 * WIX: Video-Box x=477 bei 1440px (docs/wix-referenzwerte.md).
 */
.elementor-element-e7a13c1b > .e-con-inner {
	align-items: center !important;
}

/*
 * Home, drei Leistungs-Karten (Maklerbüro/Projektentwicklung/
 * Immobilienverwaltung): Titel- und Subline-Boxen sollen ihren Inhalt
 * vertikal und horizontal zentrieren (justify-content/align-items sind in
 * den Container-Settings bereits auf "center" gesetzt, landen aber -- wie
 * beim Hero-Video oben -- nicht im generierten Elementor-CSS). Deshalb hier
 * als Theme-Fallback (Feedback-Runde 6).
 */
.elementor-element-8e21d07a > .e-con-inner,
.elementor-element-0ee71ee8 > .e-con-inner,
.elementor-element-d638bd57 > .e-con-inner,
.elementor-element-8fa8fd8e > .e-con-inner,
.elementor-element-be56df89 > .e-con-inner,
.elementor-element-131d30bb > .e-con-inner {
	justify-content: center !important;
	align-items: center !important;
}

/*
 * Home, Immowelt-Ratingbadge (iframe) unten rechts neben dem Porträt
 * positionieren -- ersetzt das früher hier eingebaute statische
 * Nachbau-Badge (Feedback-Runde 6).
 */
.elementor-element-nfportraitwrap {
	position: relative !important;
}

@media (min-width: 768px) {
	.elementor-element-nfratingbadge1 {
		position: absolute !important;
		right: 0 !important;
		bottom: 0 !important;
		left: auto !important;
		top: auto !important;
		margin: 0 !important;
		z-index: 6 !important;
	}
}

@media (max-width: 767px) {
	.elementor-element-nfratingbadge1 {
		position: static !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		width: 220px !important;
		margin: 12px auto 0 !important;
	}
}