/* ====================================================================== *
 * EIGENE REGELN - hier ist Platz fuer alles, was von Hand dazukommt.
 *
 * Dieser Block bleibt beim Aktualisieren stehen. Alles UNTERHALB der Marke
 * "AB HIER AUTOMATISCH" wird beim naechsten Update komplett ersetzt - eigene
 * Aenderungen gehoeren also hier hinein, nicht weiter unten.
 * ====================================================================== */

/* Eigene CSS-Angaben für WP-ImmoMakler.
Wird nach dem mitgelieferten Plugin-CSS geladen,
Sie können somit die CSS-Angaben überschreiben oder ergänzen */

.immomakler-single .immomakler-single-project-units {
    display: none !important;
}

.immomakler-single  {
    padding: 0 40px !important
}

.immomakler-single > .row  {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.immomakler-single > .row > div  {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.immomakler-single h1 {
    font-size: var(--font-size-xl) !important;
    font-family: var(--mercurydisplay) !important;
    color: var(--color-navy-900) !important;
}

.immomakler-single .beon-gallery-section {
    margin-bottom: 30px;
}

.immomakler-single .row .beon-immo-single-col-right {
    padding-left: 100px !important
}

.immomakler-single .beon-fullwidth {
    width: 100% !important;
}

.immomakler-single .immomakler-gallery {
	margin-bottom: 40px !important;
}

.immomakler-single .immomakler-gallery__main {
	overflow: visible;
}

@media all and (max-width: 767px) {
	.immomakler-single {
		padding: 0 15px !important;
	}

	.beon-immo-single-col-right {
		display: none !important;
	}
}


/* ====================================================================== *
 * AB HIER AUTOMATISCH - nicht von Hand aendern.
 *
 * Zusammengesetzt aus zwei Arbeitsdateien:
 *   contactform.css  - Kontaktbereich und Ansprechpartner-Karte der Detailseite
 *   archive.css      - Filterleiste, Ergebniszeile, Immobilien-Karte,
 *                      Karten-Popup, Carousel
 *
 * Beim Aktualisieren: alles ab dieser Marke loeschen und durch die neuen
 * Fassungen der beiden Dateien ersetzen (contactform.css zuerst).
 * ====================================================================== */

/* Eigene CSS-Angaben für WP-ImmoMakler.
Wird nach dem mitgelieferten Plugin-CSS geladen,
Sie können somit die CSS-Angaben überschreiben oder ergänzen */

.immomakler-single .immomakler-single-project-units {
    display: none !important;
}

.immomakler-single  {
    padding: 0 40px !important
}

.immomakler-single > .row  {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.immomakler-single > .row > div  {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.immomakler-single h1 {
    font-size: var(--font-size-xl) !important;
    font-family: var(--mercurydisplay) !important;
    color: var(--color-navy-900) !important;
}

.immomakler-single .beon-gallery-section {
    margin-bottom: 30px;
}

.immomakler-single .row .beon-immo-single-col-right {
    padding-left: 100px !important
}

.immomakler-single .beon-fullwidth {
    width: 100% !important;
}

.immomakler-single .immomakler-gallery {
	margin-bottom: 20px;
}


/**
 * Styles für den Kontaktbereich der Immobilien-Detailseite.
 *
 * Gehört zum Skin-Override contactform.php
 * (wp-content/plugins/immomakler-child-skin/single/contactform.php).
 *
 * KEINE eigene Datei auf dem Server - der Inhalt gehört in
 * wp-content/plugins/immomakler-child-skin/css/immomakler.css.
 *
 * Unabhängig von beon-immomakler-shortcodes.css - alle Klassen sind mit
 * .beon-cf eigenständig benannt.
 */

/* --- Grundraster: Formular links, Kontaktperson rechts --------------- */
.beon-cf__main {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.beon-cf {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 22em);
	gap: 4em;
	align-items: start;
    background-color:var(--color-gray-300);
    padding-top: 75px;
    padding-bottom: 75px;
    margin-top: 75px;
    box-shadow: var(--color-gray-300) 600px 0, var(--color-gray-300) -600px 0;
}

.beon-cf--no-person {
	grid-template-columns: minmax(0, 1fr);
}

.beon-cf__headline {
	margin-top: 0;
	font-family: var(--mercurydisplay);
	font-weight: 400;
	line-height: 1.15;
}

.beon-cf__intro {
	margin-bottom: 2em;
}

/* --- Kontaktperson --------------------------------------------------- */
.beon-cf__person-photo img {
	display: block;
	width: 100%;
	height: auto;
}

.beon-cf__person-position {
	margin-top: 30px !important;
	margin-bottom: 0.25em !important;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--color-gold-700);
}

.beon-cf__person-name {
	margin-top: 0.5em;
	margin-bottom: 0.75em;
	font-family: var(--mercurydisplay);
	font-size: var(--font-size-l, 1.5em);
	font-weight: 400;
	line-height: 1.2;
}

/*
 * E-Mail und Telefon mit vorangestelltem Icon. flex-start statt center, damit
 * das Icon bei umbrechenden Adressen an der ersten Zeile bleibt.
 */
.beon-cf__person-contact a {
	color: var(--color-navy-900) !important;
}

.beon-cf__person-contact {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 0.35em;
}

.beon-cf__person-contact::before {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 0.2em;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.beon-cf__person-contact--email::before {
	background-image: url(/wp-content/uploads/2026/08/envelope-light-full.svg);
}

.beon-cf__person-contact--phone::before {
	background-image: url(/wp-content/uploads/2026/08/phone-sharp-light-full.svg);
}

/* Lange E-Mail-Adressen dürfen umbrechen, statt aus der Spalte zu laufen. */
.beon-cf__person-contact a {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* --- Formularraster -------------------------------------------------- */

/*
 * Das Plugin liefert Bootstrap-3-Markup mit float-basierten col-*-Spalten.
 * Floats und Innenabstände werden neutralisiert, damit das Grid greift.
 */
.beon-cf__form .immomakler-contactform [class*="col-"] {
	float: none;
	width: auto;
	padding-left: 0;
	padding-right: 0;
}

.beon-cf__form .immomakler-contactform {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1em;
}

/* Standard: jede Feldgruppe über die volle Breite. */
.beon-cf__form .immomakler-contactform .form-group {
	grid-column: 1 / -1;
	margin: 0;
}

.beon-cf-group > div {
	padding-left: 0 !important;
}

/* Einzelfelder auf halbe Breite. */
.beon-cf__form .beon-cf-group--email,
.beon-cf__form .beon-cf-group--company {
	grid-column: 1 / 2;
}

/* Telefon rechts neben E-Mail. */
.beon-cf__form .beon-cf-group--phone {
	grid-column: 2 / 3;
}

/*
 * Gruppen, in denen das Plugin mehrere Felder bündelt (Anrede/Name sowie die
 * Adresse), werden intern selbst zum zweispaltigen Raster - so ist jedes Feld
 * halb so breit wie das Formular.
 */
.beon-cf__form .beon-cf-group--firstname,
.beon-cf__form .beon-cf-group--street,
.beon-cf__form .beon-cf-group--city {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1em;
}

/* Anrede allein in die erste Zeile, Vor- und Nachname in die zweite. */
.beon-cf__form .beon-cf-col--title {
	grid-column: 1 / 2;
	grid-row: 1;
}

.beon-cf__form .beon-cf-col--firstname {
	grid-column: 1 / 2;
	grid-row: 2;
}

.beon-cf__form .beon-cf-col--name {
	grid-column: 2 / 3;
	grid-row: 2;
}

/*
 * Adresse: Straße | Nr. in die erste Zeile, PLZ | Ort in die zweite. Die
 * Anordnung ergibt sich aus der Reihenfolge im Markup.
 */

/*
 * Labels, die allein in einem eigenen Wrapper stehen, dürfen im Raster keine
 * Zelle belegen - sonst rutschen die Felder dahinter eine Position weiter.
 * display:contents löst den Wrapper auf; das Label selbst ist absolut
 * positioniert und belegt daher keine Zelle.
 */
.beon-cf__form .beon-cf-labelwrap {
	display: contents;
}

/*
 * Labels bleiben für Screenreader im Dokument, sind aber unsichtbar - ihr
 * Text steht als Platzhalter im Feld.
 */
.beon-cf__form .beon-cf-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Felder ---------------------------------------------------------- */
.beon-cf__form .form-control {
	width: 100%;
	height: auto;
	padding: 0.85em 1em;
	border: 1px solid transparent;
	border-radius: 0;
	background-color: #fff;
	box-shadow: none;
	font-size: inherit;
	line-height: 1.4;
}

.beon-cf__form .form-control::placeholder {
	color: var(--color-gray-500, #8a8a8a);
	opacity: 1;
}

.beon-cf__form .form-control:focus-visible {
	outline: 2px solid var(--color-gold-700);
	outline-offset: -2px;
}

.beon-cf__form select.form-control {
	appearance: none;
	/* Platz für den Pfeil rechts. */
	padding-right: 2.5em;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 1.35em) center, calc(100% - 1em) center;
	background-size: 0.4em 0.4em, 0.4em 0.4em;
	background-repeat: no-repeat;
}

.beon-cf__form textarea.form-control {
	min-height: 7em;
	resize: vertical;
}

/* Fehlerhafte Felder kennzeichnet das Plugin mit .has-error. */
.beon-cf__form .has-error .form-control,
.beon-cf__form .form-control.has-error {
	border-color: #b3261e;
}

/* --- Einwilligungs-Checkboxen ---------------------------------------- */
.beon-cf__form .checkbox {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.75em;
	align-items: start;
	margin: 0;
	padding: 0;
}

/*
 * Die Kästchen werden über appearance:none umgestaltet, statt sie zu
 * verstecken und per Pseudo-Element nachzubauen. Damit bleibt das echte
 * Eingabefeld im Layout: Tastaturbedienung, Screenreader und die
 * Pflichtfeld-Prüfung des Browsers (required) funktionieren unverändert.
 * Ein ausgeblendetes required-Feld würde die Absendung sonst mit
 * "not focusable" blockieren.
 */
.beon-cf__form .checkbox input[type="checkbox"] {
	appearance: none;
	position: static;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	border: var(--stroke-width-1, 1px) solid var(--color-gold-600);
	border-radius: 0;
	background-color: transparent;
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease;
}

/*
 * Häkchen als eingebettetes SVG: zuverlässiger als ein Pseudo-Element, da
 * Pseudo-Elemente auf input-Feldern nicht in allen Browsern gerendert werden.
 */
.beon-cf__form .checkbox input[type="checkbox"]:checked {
	background-color: var(--color-gold-600);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px 11px;
}

.beon-cf__form .checkbox input[type="checkbox"]:hover {
	border-color: var(--color-gold-700, var(--color-gold-600));
}

/*
 * Das Plugin-Stylesheet setzt einen dicken Fokusring per :focus - der erscheint
 * also auch beim Klicken mit der Maus. Hier wird er auf reine Tastaturbedienung
 * begrenzt: :focus:not(:focus-visible) entfernt ihn bei Mausklick, die Regel
 * darunter zeichnet ihn bei Tastaturfokus CI-konform neu.
 *
 * Bewusst nicht als reines Ersetzen von :focus durch :focus-visible: Browser
 * ohne :focus-visible-Unterstützung würden die komplette Regel verwerfen und
 * hätten dann gar keine Fokus-Anzeige mehr. So bleibt der Ring dort erhalten.
 *
 * Die Selektoren sind absichtlich spezifischer als die Plugin-Regel
 * (.immomakler input[type=checkbox]:focus), damit sie greifen.
 */
.beon-cf__form .checkbox input[type="checkbox"]:focus:not(:focus-visible) {
	outline: none;
}

.beon-cf__form .checkbox input[type="checkbox"]:focus-visible {
	outline: var(--stroke-width-1, 1px) solid var(--color-gold-600);
	outline-offset: 2px;
}

/* Fehlende Einwilligung kennzeichnet das Plugin über .has-error. */
.beon-cf__form .checkbox.has-error input[type="checkbox"],
.beon-cf__form .has-error .checkbox input[type="checkbox"] {
	border-color: #b3261e;
}

.beon-cf__form .checkbox label {
	margin: 0;
	font-size: 0.8em;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
	color: var(--color-navy-900);
}

.beon-cf__form .mandatory {
	display: block;
	font-size: 0.8em;
}

/* --- Absende-Button -------------------------------------------------- */
.beon-cf__form button[type="submit"] {
	font-weight: 500;
    font-size: var(--size-13);
    color: var(--color-navy-900);
    letter-spacing: var(--letter-spacing-1-4);
    padding-block-start: 16px;
    padding-block-end: 16px;
    padding-inline-start: 40px;
    padding-inline-end: 40px;
    border-width: var(--stroke-width-1);
    border-color: var(--color-gold-600);
    border-style: solid;
    background-color: transparent !important;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    align-self: start;
}

/* Pfeil rechts neben der Beschriftung. */
.beon-cf__form button[type="submit"]::after {
	content:"";
	background-image:url(/wp-content/uploads/2026/08/arrow-right-long-sharp-light-full.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	width: 15px;
	height: 15px;
	display: inline-block;
	transition: all 300ms ease;
}

.beon-cf__form button[type="submit"]:hover::after {
	transform: translatex(10px);
}

.beon-cf__form button[type="submit"]:hover,
.beon-cf__form button[type="submit"]:focus-visible {
    background-color: transparent !important;
    color: inherit !important;
}

/*
 * Honigtopf-Feld gegen Spam: bleibt im Layout unsichtbar, darf aber nicht per
 * display:none entfernt werden, damit Bots es ausfüllen.
 */
.beon-cf__form .immomakler-contact-sender-email {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* --- Mobil ----------------------------------------------------------- */
@media (max-width: 900px) {
	.beon-cf {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5em;
	}

	.beon-cf__form .immomakler-contactform,
	.beon-cf__form .beon-cf-group--firstname,
	.beon-cf__form .beon-cf-group--street,
	.beon-cf__form .beon-cf-group--city {
		grid-template-columns: minmax(0, 1fr);
	}

	.beon-cf__form .beon-cf-group--email,
	.beon-cf__form .beon-cf-group--phone,
	.beon-cf__form .beon-cf-group--company,
	.beon-cf__form .beon-cf-col--title,
	.beon-cf__form .beon-cf-col--firstname,
	.beon-cf__form .beon-cf-col--name {
		grid-column: 1 / -1;
		grid-row: auto;
		max-width: none;
	}
}


/*
 * Von dir ergänzt, bei 767px statt 900px: Auf dem Handy weniger Luft oben und
 * unten, und der seitliche Überhang der grauen Fläche wird kleiner.
 *
 * Der box-shadow ist hier kein Schatten, sondern zwei versetzte Kopien der
 * Hintergrundfarbe. So reicht die graue Fläche über den Inhaltsbereich hinaus
 * bis zum Fensterrand, ohne dass der Container selbst breiter werden muss.
 * Auf dem Handy genügen dafür 100px - die 600px der Desktop-Regel würden
 * unnötig große Flächen zeichnen.
 */
@media (max-width: 767px) {
	.beon-cf {
		padding-top: 50px !important;
		padding-bottom: 50px !important;
		box-shadow: var(--color-gray-300) 100px 0, var(--color-gray-300) -100px 0;
	}
}


/* ====================================================================== *
 * Kontaktkarte (contact-property.php)
 * ====================================================================== */

.beon-contact {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 10, 25, 0.14);
}

/*
 * Querformat-Ausschnitt statt Vollporträt - das Foto ist hier ein direktes
 * <img> (kein Wrapper-div mehr), object-fit übernimmt den Zuschnitt
 * unabhängig vom Seitenverhältnis der Originaldatei.
 */
.beon-contact__photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.beon-contact__body {
	padding: 28px 26px 26px;
	background-color: var(--color-navy-900);
	color: #fff;
}

.beon-contact__role {
	display: block;
	margin-bottom: 10px;
	font-size: var(--size-13, 12px);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-1-4, 1.4px);
	text-transform: uppercase;
	color: var(--color-gold-600);
}

/*
 * Die Überschrift "Ihr Ansprechpartner" ist mit der Rolle bewusst nicht mehr
 * als große Schlagzeile gesetzt - Name und Rolle tragen die Karte, die
 * Überschrift bleibt klein und dient nur der Einordnung.
 */
.beon-contact__heading {
	margin: 0 0 4px;
	font-family: var(--sans, inherit);
	/*
	 * !important, weil das Theme h-Elemente global mit einer eigenen
	 * Schriftgroesse belegt - ohne den Zusatz bliebe die Ueberschrift gross.
	 */
	font-size: var(--size-13, 12px) !important;
	font-weight: 600;
	letter-spacing: var(--letter-spacing-1-4, 1.4px);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.beon-contact__name {
	margin: 0 0 20px;
	font-family: var(--mercurydisplay);
	font-size: var(--font-size-m, 1.25em);
	font-weight: 400;
	line-height: 1.2;
	color: inherit;
}

/*
 * Telefon- und Formular-Zeile: schmale Beschriftung links, Wert rechts,
 * durch eine dünne Linie vom Zeilenrand getrennt statt eigener
 * Großbuchstaben-Etiketten - liest sich als Visitenkarte, nicht als Formular.
 */
.beon-contact__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1em;
	padding: 12px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: var(--size-14, 14px);
}

.beon-contact__row span:first-child {
	color: rgba(255, 255, 255, 0.6);
}

/*
 * Telefon- und Formular-Link erben die Kartenfarbe, damit sie auf dunklem
 * Grund lesbar bleiben - Theme-Linkfarben sind für hellen Grund gedacht.
 */
.beon-contact__row a {
	color: inherit;
	text-decoration: none;
}

.beon-contact__row a:hover,
.beon-contact__row a:focus-visible {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/*
 * Exposé-Link: zurückhaltender Text mit Pfeil statt flächigem Button - Gold
 * bleibt damit dem Absende-Button im Formular weiter unten vorbehalten.
 *
 * Selektor bewusst als .beon-contact__body .beon-contact__cta (zwei Klassen,
 * Spezifität 0,2,0) statt nur .beon-contact__cta (0,1,0): Bootstraps
 * ".immomakler a" (eine Klasse + Typ = 0,1,1) ist sonst spezifischer und
 * gewinnt unabhängig von der Ladereihenfolge - der Text würde sonst in der
 * Standard-Linkfarbe statt in Gold erscheinen.
 */
.beon-contact__body .beon-contact__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--color-gold-600);
	color: var(--color-gold-600);
	font-size: var(--size-13, 12.5px);
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-decoration: none;
	transition: gap 200ms ease, color 200ms ease, border-color 200ms ease;
}

/*
 * Das Theme unterstreicht Links beim Hover global. Der Exposé-Link hat schon
 * eine eigene Linie darunter, eine zweite direkt am Text waere zu viel.
 */
.beon-contact__body .beon-contact__cta:hover {
	text-decoration: none !important;
}

.beon-contact__body .beon-contact__cta svg {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
}

.beon-contact__body .beon-contact__cta:hover,
.beon-contact__body .beon-contact__cta:focus-visible {
	gap: 16px;
	color: var(--color-gold-700, var(--color-gold-600));
	border-color: var(--color-gold-700, var(--color-gold-600));
}

.beon-contact__body .beon-contact__cta:focus-visible {
	outline: var(--stroke-width-1, 1px) solid #fff;
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.beon-contact__body .beon-contact__cta {
		transition: none;
	}
}

/*
 * Beim Sprung zum Formular soll die Überschrift nicht unter einem klebenden
 * Seitenkopf verschwinden.
 */
#immomakler-contactform-panel {
	scroll-margin-top: 120px;
}


/**
 * CI-Styles für die Immobilien-Archiv-/Listenansicht.
 *
 * Drei Abschnitte:
 *   1. Filterleiste   - reines CSS. Das Suchformular hat kein Skin-Template,
 *                       es wird in classes/plus/class-immomakler-search.php
 *                       erzeugt; die Dropdowns baut bootstrap-select per JS.
 *                       Umgestaltet wird daher das gerenderte Markup.
 *   2. Ergebniszeile  - Trefferzahl, Blättern und Sortierung. Ebenfalls reines
 *                       CSS auf dem Markup von archive/pagination-property.php
 *                       und archive/orderby-property.php.
 *   3. Immobilien-Karte - gehört zu den Skin-Overrides item-property.php,
 *                       item-property-reference.php und
 *                       item-carousel-property.php, die alle
 *                       archive/card-property.php rendern.
 *
 * KEINE eigene Datei auf dem Server. Der Inhalt gehört in
 *
 *     wp-content/plugins/immomakler-child-skin/css/immomakler.css
 *
 * und zwar zusammen mit dem Inhalt von contactform.css und den eigenen Regeln
 * für die Detailseite. WP-ImmoMakler lädt genau diese eine Datei von selbst
 * nach dem Plugin-CSS, inklusive Cache-Busting.
 *
 * Zur Ladereihenfolge: Das Plugin bindet BEIDE möglichen Custom-Stylesheets
 * ein, wenn es sie findet - <theme>/immomakler/css/immomakler.css und das des
 * ChildSkins. Das des ChildSkins wird später registriert und gewinnt damit bei
 * gleicher Spezifität. Liegt im Theme noch eine alte Fassung, hat sie also
 * keine Wirkung mehr, sorgt aber für Verwirrung - besser löschen.
 *
 * Selektoren sind durchgängig etwas spezifischer gehalten als nötig
 * (Formular-Attribut bzw. zwei Klassen), weil das mitgelieferte Bootstrap 3
 * mit Regeln wie ".immomakler a" oder ".immomakler .btn-default" sonst
 * gewinnt - unabhängig von der Ladereihenfolge.
 */


/* ====================================================================== *
 * 1. Filterleiste
 * ====================================================================== */

/*
 * Ein Raster für die ganze Filterleiste: Dropdowns UND der Suchen-Button
 * liegen in derselben Reihe.
 *
 * Das Plugin verschachtelt den Button tiefer als die Dropdowns
 * (form > div.panel > div.panel-heading > div.search-actions > button). Die
 * Zwischen-Container werden per display:contents aus dem Layout genommen,
 * dadurch werden Dropdowns und Button gemeinsam zu Rasterzellen des Formulars.
 *
 * Die beiden versteckten Felder (post_type, paged) belegen keine Zelle -
 * input[type=hidden] ist per Browser-Standard display:none.
 */
/* --- Rahmen der Archivseite -------------------------------------------- */

/*
 * Von dir gesetzt: Inhaltsbreite und seitlicher Abstand der Archivseite. Die
 * !important sind nötig, weil das Theme den Container selbst begrenzt.
 */
.immomakler-archive {
	max-width: 1240px !important;
	padding: 0 40px !important;
}

.immomakler-archive h1 {
	margin-top: 20px !important;
	margin-bottom: 30px !important;
	font-family: "Playfair Display";
}

/* Der Innenabstand des Formulars kommt aus dem Raster darunter. */
.immomakler-archive #immomakler-search-form {
	padding: 0;
}

/* Bootstrap-Spaltenabstand am rohen select entfernen. */
.immomakler-archive .immomakler-search-taxonomy {
	padding-left: 0 !important;
}

/*
 * Suchauftrags-Panel im Ergebnisbereich ausblenden.
 *
 * Der Suchauftrag selbst ist über die Plugin-Option searchagent_active_in_result
 * abgeschaltet; diese Regel fängt das Panel ab, falls es dennoch gerendert wird.
 */
#immomakler-search-agents-panel {
	display: none;
}

/* --- Filterleiste, Raster ---------------------------------------------- */

[data-immomakler="search-form"] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--abstand-md, 16px);
	align-items: stretch;
	margin-bottom: var(--abstand-xxl, 48px);
}

[data-immomakler="search-form"] .search-taxonomies,
[data-immomakler="search-form"] .panel,
[data-immomakler="search-form"] .panel-heading,
[data-immomakler="search-form"] .search-actions {
	display: contents;
}

/*
 * Wichtig: Bootstrap gibt .row einen Clearfix über ::before/::after. Bei
 * display:contents entfällt nur die Box des Elements selbst - seine
 * Pseudoelemente werden weiterhin erzeugt und würden hier zu vier leeren
 * Rasterzellen. Genau das hat die Dropdowns um eine Spalte verschoben und den
 * Suchen-Button in eine zweite Reihe gedrängt.
 */
[data-immomakler="search-form"] .search-taxonomies.row::before,
[data-immomakler="search-form"] .search-taxonomies.row::after,
[data-immomakler="search-form"] .search-actions.row::before,
[data-immomakler="search-form"] .search-actions.row::after {
	content: none;
	display: none;
}

[data-immomakler="search-form"] .search-taxonomies > .bootstrap-select {
	float: none;
	width: auto;
	padding-left: 0;
	padding-right: 0;
	margin: 0;
}

/* Das rohe <select> bleibt für den Fall ohne JavaScript nutzbar. */
[data-immomakler="search-form"] select.selectpicker {
	width: 100%;
	height: auto;
	padding: 0.85em 1em;
	border: var(--stroke-width-1, 1px) solid var(--color-gray-400);
	border-radius: 0;
	background-color: #fff;
	font-size: var(--size-16, 16px);
}

/* --- Das sichtbare Feld (bootstrap-select rendert einen Button) -------- */
[data-immomakler="search-form"] .bootstrap-select .dropdown-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--abstand-sm, 8px);
	width: 100%;
	/* Füllt die Rasterzelle, damit alle Felder gleich hoch sind. */
	height: 100%;
	/*
	 * min-height zusätzlich zum padding: Bootstrap setzt .btn auf 6px 12px,
	 * und auf der Live-Seite behielt der Button diese Höhe trotz höherer
	 * Spezifität. min-height sichert die Feldhöhe unabhängig davon ab.
	 */
	min-height: 48px;
	padding: 14px 16px;
	border: var(--stroke-width-1, 1px) solid var(--color-gray-400);
	border-radius: 0;
	background-color: #fff;
	box-shadow: none;
	color: var(--color-navy-900);
	font-family: var(--benton-sans);
	font-size: var(--size-16, 16px);
	font-weight: 400;
	text-align: left;
	white-space: nowrap;
	transition: border-color 200ms ease;
}

[data-immomakler="search-form"] .bootstrap-select .dropdown-toggle:hover,
[data-immomakler="search-form"] .bootstrap-select.open .dropdown-toggle {
	border-color: var(--color-navy-900);
	background-color: #fff;
	color: var(--color-navy-900);
}

[data-immomakler="search-form"] .bootstrap-select .dropdown-toggle:focus-visible {
	outline: var(--stroke-width-1, 1px) solid var(--color-gold-600);
	outline-offset: 2px;
}

/* Noch nichts gewählt: Beschriftung zurückgenommen. */
[data-immomakler="search-form"] .bootstrap-select .dropdown-toggle.bs-placeholder .filter-option-inner-inner,
[data-immomakler="search-form"] .bootstrap-select .dropdown-toggle.bs-placeholder .filter-option-inner {
	color: var(--color-gray-500, #5b5b5b);
}

[data-immomakler="search-form"] .bootstrap-select .filter-option {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
 * Bootstraps .caret ist ein Border-Dreieck. Es wird zurückgesetzt und als
 * Chevron neu gezeichnet - gleiche Form wie im Accordion der Detailseite.
 */
[data-immomakler="search-form"] .bootstrap-select .bs-caret {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

[data-immomakler="search-form"] .bootstrap-select .bs-caret .caret {
	position: static;
	width: 0.45em;
	height: 0.45em;
	margin: -0.2em 0 0;
	border: 0;
	border-right: var(--stroke-width, 2px) solid var(--color-gold-600);
	border-bottom: var(--stroke-width, 2px) solid var(--color-gold-600);
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 200ms ease;
}

[data-immomakler="search-form"] .bootstrap-select.open .bs-caret .caret {
	transform: rotate(-135deg);
	margin-top: 0.15em;
}

/* --- Aufgeklappte Liste ----------------------------------------------- */
[data-immomakler="search-form"] .bootstrap-select .dropdown-menu {
	margin: 0;
	padding: 0;
	border: var(--stroke-width-1, 1px) solid var(--color-gray-400);
	border-radius: 0;
	background-color: #fff;
	box-shadow: 0 12px 28px rgba(0, 10, 25, 0.14);
}

[data-immomakler="search-form"] .bootstrap-select .dropdown-menu .inner {
	padding: 0;
}

[data-immomakler="search-form"] .bootstrap-select .dropdown-menu li a {
	padding: 10px 16px;
	color: var(--color-navy-900);
	font-size: var(--size-14, 14px);
	white-space: normal;
}

[data-immomakler="search-form"] .bootstrap-select .dropdown-menu li a:hover,
[data-immomakler="search-form"] .bootstrap-select .dropdown-menu li a:focus {
	background-color: var(--color-gray-300);
	color: var(--color-navy-900);
}

[data-immomakler="search-form"] .bootstrap-select .dropdown-menu li.selected a,
[data-immomakler="search-form"] .bootstrap-select .dropdown-menu li.active a {
	background-color: var(--color-navy-900);
	color: #fff;
}

/* Häkchen der Mehrfachauswahl in Gold, solange die Zeile nicht aktiv ist. */
[data-immomakler="search-form"] .bootstrap-select .dropdown-menu li a .check-mark {
	color: var(--color-gold-600);
}

[data-immomakler="search-form"] .bootstrap-select .dropdown-menu li.selected a .check-mark,
[data-immomakler="search-form"] .bootstrap-select .dropdown-menu li.active a .check-mark {
	color: #fff;
}

/* Suchfeld innerhalb langer Listen (Objektart, Ort). */
[data-immomakler="search-form"] .bootstrap-select .bs-searchbox {
	padding: 12px;
	border-bottom: var(--stroke-width-1, 1px) solid var(--color-gray-400);
}

[data-immomakler="search-form"] .bootstrap-select .bs-searchbox .form-control {
	height: auto;
	padding: 10px 12px;
	border: var(--stroke-width-1, 1px) solid var(--color-gray-400);
	border-radius: 0;
	box-shadow: none;
	font-size: var(--size-14, 14px);
}

[data-immomakler="search-form"] .bootstrap-select .bs-searchbox .form-control:focus-visible {
	outline: var(--stroke-width-1, 1px) solid var(--color-gold-600);
	outline-offset: -1px;
}

/* --- Suchen-Button ---------------------------------------------------- */

/*
 * Der Button ist jetzt eine Rasterzelle wie die Dropdowns und füllt sie
 * vollständig aus. Gold gefüllt, weil er die primäre Aktion ist.
 */
[data-immomakler="search-form"] .search-actions .immomakler-submit.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	float: none;
	width: 100%;
	height: 100%;
	/* Weniger Innenabstand als beim freistehenden Button: die Zellenbreite
	   gibt die Breite vor, der Text soll darin nicht umbrechen. */
	padding: 14px 16px;
	border: var(--stroke-width-1, 1px) solid var(--color-gold-600);
	border-radius: 0;
	background-color: var(--color-gold-600);
	background-image: none;
	box-shadow: none;
	color: var(--color-navy-900);
	font-family: var(--benton-sans);
	font-size: var(--size-13, 13px);
	font-weight: 500;
	letter-spacing: var(--letter-spacing-1-4, 1.4px);
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
	text-shadow: none;
	transition: background-color 200ms ease;
}

[data-immomakler="search-form"] .search-actions .immomakler-submit.btn:hover,
[data-immomakler="search-form"] .search-actions .immomakler-submit.btn:focus-visible {
	background-color: var(--color-gold-700);
	border-color: var(--color-gold-700);
	color: var(--color-navy-900);
}

[data-immomakler="search-form"] .search-actions .immomakler-submit.btn:focus-visible {
	outline: var(--stroke-width-1, 1px) solid var(--color-navy-900);
	outline-offset: 2px;
}

[data-immomakler="search-form"] .search-actions .immomakler-submit .glyphicon {
	top: 0;
	font-size: 13px;
}

/*
 * Merkliste ausgeblendet.
 *
 * Nur eine Sichtbarkeitsregel - das Plugin rendert den Button weiterhin. Soll
 * die Merkliste komplett verschwinden (Filterleiste, Karten und die eigene
 * Merkzettel-Seite), gehört die Plugin-Option "cart_active" deaktiviert; dann
 * kann diese Regel wieder entfallen.
 */
[data-immomakler="search-form"] .search-actions .immomakler-cart-button {
	display: none;
}

/*
 * "Suche zurücksetzen" wird über den Hook immomakler_search_reset_button
 * entfernt (siehe Snippet für die functions.php) - deshalb hier bewusst
 * keine display:none-Regel.
 */

/*
 * Keine eigene Mobil-Regel nötig: das Raster bricht über auto-fit von selbst
 * auf eine Spalte um, der Button wird dabei zur vollen Breite.
 */


/* ====================================================================== *
 * 2. Ergebniszeile: Trefferzahl, Blätternavigation, Sortierung
 * ====================================================================== */

/*
 * Das Plugin setzt Trefferzahl und Blätternavigation als zwei Bootstrap-
 * Spalten in eine Reihe (.paginator.row > .num-posts.col-xs-6 +
 * .pages-nav.col-xs-6). Die Trefferzahl entfällt, übrig bleibt eine Zeile mit
 * Blättern links und Sortierung rechts, abgesetzt durch eine Linie darüber.
 */
.immomakler-archive .paginator {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--abstand-md, 16px);
	margin: 0 0 var(--abstand-lg, 24px);
	padding-top: var(--abstand-md, 16px);
	border-top: var(--stroke-width-1, 1px) solid var(--color-gray-300);
	/* Bewusst keine untere Linie. */
	border-bottom: 0;
}

/* Gleiche Clearfix-Falle wie in der Filterleiste: .row erzeugt ::before/
   ::after, die im Raster sonst leere Zeilen belegen. */
.immomakler-archive .paginator.row::before,
.immomakler-archive .paginator.row::after {
	content: none;
	display: none;
}

/*
 * Trefferzahl ausgeblendet.
 *
 * Bewusst per CSS und nicht über ein Template-Override von
 * archive/pagination-property.php: der Zähler steckt mitten in der
 * Blätterlogik, ein Override würde diese komplett duplizieren und bei
 * Plugin-Updates auseinanderlaufen. Kosten entstehen nicht - der Wert kommt
 * aus $wp_query->found_posts, also ohne zusätzliche Abfrage.
 */
.immomakler-archive .paginator > .num-posts {
	display: none;
}

.immomakler-archive .paginator > .pages-nav {
	float: none;
	width: auto;
	padding-left: 0;
	padding-right: 0;
}

/* Blättern links, Sortierung rechts. */
.immomakler-archive .paginator .pages-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--abstand-sm, 8px);
}

.immomakler-archive .paginator .pages-nav > span {
	font-size: var(--size-14, 14px);
}

.immomakler-archive .paginator .pages-nav a {
	color: var(--color-navy-900);
	text-decoration: none;
}

.immomakler-archive .paginator .pages-nav a:hover,
.immomakler-archive .paginator .pages-nav a:focus-visible {
	color: var(--color-gold-700);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* --- Sortierung, Optik wie die Filterfelder --------------------------- */

.immomakler-archive .immomakler-order-by {
	/* Schiebt die Sortierung an das rechte Ende der Zeile. */
	margin-left: auto;
	position: relative;
}

.immomakler-archive .immomakler-order-by > .dropdown-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--abstand-sm, 8px);
	min-width: 14em;
	min-height: 48px;
	padding: 14px 16px;
	border: var(--stroke-width-1, 1px) solid var(--color-gray-300);
	border-radius: 0;
	background-color: #fff;
	box-shadow: none;
	color: var(--color-navy-900);
	font-family: var(--benton-sans);
	font-size: var(--size-16, 16px);
	cursor: pointer;
	transition: border-color 200ms ease;
}

.immomakler-archive .immomakler-order-by > .dropdown-toggle:hover,
.immomakler-archive .immomakler-order-by.open > .dropdown-toggle {
	border-color: var(--color-navy-900);
}

.immomakler-archive .immomakler-order-by > .dropdown-toggle:focus-visible {
	outline: var(--stroke-width-1, 1px) solid var(--color-gold-600);
	outline-offset: 2px;
}

/* Bootstraps Border-Dreieck als Chevron neu zeichnen, wie in der Filterleiste. */
.immomakler-archive .immomakler-order-by .caret {
	position: static;
	flex: 0 0 auto;
	width: 0.45em;
	height: 0.45em;
	margin: -0.2em 0 0;
	border: 0;
	border-right: var(--stroke-width, 2px) solid var(--color-gold-600);
	border-bottom: var(--stroke-width, 2px) solid var(--color-gold-600);
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 200ms ease;
}

.immomakler-archive .immomakler-order-by.open .caret {
	transform: rotate(-135deg);
	margin-top: 0.15em;
}

.immomakler-archive .immomakler-order-by .dropdown-menu {
	margin: 0;
	padding: 0;
	border: var(--stroke-width-1, 1px) solid var(--color-gray-300);
	border-radius: 0;
	background-color: #fff;
	box-shadow: 0 12px 28px rgba(0, 10, 25, 0.14);
	/* Rechts ausrichten, damit das Menü nicht aus dem Inhalt läuft. */
	right: 0;
	left: auto;
}

.immomakler-archive .immomakler-order-by .dropdown-menu > li > a {
	padding: 10px 16px;
	color: var(--color-navy-900);
	font-size: var(--size-14, 14px);
	white-space: normal;
}

.immomakler-archive .immomakler-order-by .dropdown-menu > li > a:hover,
.immomakler-archive .immomakler-order-by .dropdown-menu > li > a:focus {
	background-color: var(--color-gray-300);
	color: var(--color-navy-900);
}

/* Aktive Sortierung: das Plugin markiert sie mit .disabled. */
.immomakler-archive .immomakler-order-by .dropdown-menu > li.disabled > a {
	background-color: var(--color-navy-900);
	color: #fff;
	cursor: default;
}

@media (max-width: 600px) {
	.immomakler-archive .immomakler-order-by {
		margin-left: 0;
		width: 100%;
	}

	.immomakler-archive .immomakler-order-by > .dropdown-toggle {
		min-width: 0;
	}
}


/* ====================================================================== *
 * 3. Immobilien-Karte (item-property.php)
 * ====================================================================== */

/*
 * Das Raster kommt vom Plugin, hier wird bewusst KEINS gesetzt.
 *
 * Richtigstellung (10.09.2026): Diese Installation läuft NICHT im CSS-Grid,
 * sondern im älteren Spaltenlayout - nachgewiesen über die Diagnose in
 * archive/loop-property.php, die "loop-spalten" gemeldet hat. Ausgeliefert
 * wird also .properties > .row > .property.col-md-*, float-basiert aus
 * Bootstrap 3, nicht .properties.immomakler-archive-grid.
 *
 * Praktische Folge: Anders als in einem Grid dehnen sich die Zellen einer
 * Reihe NICHT auf gleiche Höhe - jede Karte ist so hoch wie ihr Inhalt. Die
 * Regeln unten funktionieren in beiden Layouts; nur auf gleich hohe Karten
 * innerhalb einer Reihe kann man sich hier nicht verlassen.
 */
.properties .property {
	display: flex;
}

.properties .property > .beon-item {
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 10, 25, 0.1);
}

/* --- Ganze Karte klickbar --------------------------------------------- */

/*
 * Die Karte ist als Ganzes anklickbar - ohne einen zusätzlichen Link im
 * Markup. Stattdessen wird der ohnehin vorhandene Titel-Link über die ganze
 * Karte gezogen: Sein ::after-Element liegt absolut über allem.
 *
 * Warum so und nicht die Karte in ein <a> packen: Die Karte enthält bereits
 * Links (Bild, Titel). Verschachtelte <a> sind ungültig, der Browser reißt sie
 * beim Parsen auseinander - das Ergebnis wäre unvorhersehbar.
 *
 * Der Titel färbt sich jetzt schon, sobald der Zeiger irgendwo auf der Karte
 * steht - die Fläche gehört ja zum Link. Genau das ist erwünscht: Es zeigt,
 * dass die ganze Karte klickbar ist.
 *
 * Referenzen bleiben unberührt: Dort gibt der Titel reinen Text aus, es gibt
 * also kein .beon-item__title a, an dem die Regel greifen könnte.
 */
.beon-item {
	position: relative;
}

.beon-item__title a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/* Über dem Inhalt der Karte. */
	z-index: 1;
}

/* --- Bildbereich ------------------------------------------------------ */
.beon-item__media {
	position: relative;
	float: none;
	width: auto;
	padding: 0;
	overflow: hidden;
}

.beon-item__media .thumbnail {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	display: block;
}

.beon-item__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/*
 * Status ("reserviert", "verkauft") als Badge über dem Bild statt als Balken
 * darunter.
 */
.beon-item__media .property-status-bar {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 1px;
	/*
	 * Der Badge liegt über dem Link, der die ganze Karte klickbar macht. Ohne
	 * dies wäre seine Fläche ein toter Bereich - man klickt auf "reserviert"
	 * und nichts passiert.
	 *
	 * Nur hier gesetzt: Die Carousel-Regel weiter unten überschreibt
	 * pointer-events nicht, beide Regeln greifen also gemeinsam.
	 */
	pointer-events: none;
}

.beon-item__media .property-status {
	padding: 8px 14px;
	background-color: var(--color-navy-900);
	color: #fff;
	font-size: var(--size-12, 12px);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-1-4, 1.4px);
	text-transform: uppercase;
}

/* --- Textbereich ------------------------------------------------------ */
.beon-item__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	float: none;
	width: auto;
	padding: var(--abstand-lg, 24px);
}

.beon-item__place {
	display: block;
	margin-bottom: var(--abstand-sm, 8px);
	color: var(--color-gold-700);
	font-size: var(--size-12, 12px);
	font-weight: 500;
	letter-spacing: var(--letter-spacing-1-4, 1.4px);
	text-transform: uppercase;
}

.beon-item__title {
	margin: 0 0 var(--abstand-md, 16px);
	font-family: var(--mercurydisplay);
	font-size: var(--size-22, 22px);
	font-weight: 400;
	line-height: 1.25;
	color: var(--color-navy-900);
	/* Zweizeilig kappen, damit die Karten trotz langer Titel ruhig bleiben. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.beon-item__title a {
	color: inherit;
	text-decoration: none;
}

.beon-item__title a:hover,
.beon-item__title a:focus-visible {
	color: var(--color-gold-700);
	text-decoration: none;
}

/*
 * Der Preis steht in der Fußzeile der Karte, unterhalb der Kennzahlen. Kein
 * unterer Abstand: Den Abstand zum Kartenrand setzt der Innenabstand von
 * .beon-item__body.
 */
.beon-item__price {
	margin: 0;
	font-family: var(--mercurydisplay);
	font-size: var(--size-22, 22px);
	line-height: 1.2;
	color: var(--color-navy-900);
	font-variant-numeric: tabular-nums;
}

/* Zwei Preisangaben (z.B. Kaufpreis und Preis pro m²) untereinander. */
.beon-item__price + .beon-item__price {
	margin-top: 4px;
	font-size: var(--size-16, 16px);
	color: var(--color-gray-500);
}

/* --- Kennzahlen ------------------------------------------------------- */

/*
 * Label über Wert, wie in der Kennzahlen-Leiste der Detailseite - dadurch
 * lesen Liste und Detailseite dieselbe visuelle Sprache.
 */
.beon-item__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(6.5em, 1fr));
	gap: var(--abstand-md, 16px);
	margin: 0 0 var(--abstand-lg, 24px);
	padding-top: var(--abstand-md, 16px);
	border-top: var(--stroke-width-1, 1px) solid var(--color-gray-400);
}

/*
 * Bei Referenzen fällt die Fußzeile weg, dann sind die Kennzahlen das letzte
 * Element - ihr unterer Abstand käme zum Innenabstand der Karte hinzu und die
 * Karte hätte unten sichtbar mehr Luft als die daneben.
 */
.beon-item__facts:last-child {
	margin-bottom: 0;
}

.beon-item__fact {
	min-width: 0;
}

.beon-item__facts dt {
	margin-bottom: 0.3em;
	color: var(--color-gold-700);
	font-size: var(--size-12, 12px);
	font-weight: 500;
	letter-spacing: var(--letter-spacing-1, 1px);
	text-transform: uppercase;
	line-height: 1.3;
}

.beon-item__facts dd {
	margin: 0;
	font-family: var(--mercurydisplay);
	font-size: var(--size-18, 18px);
	line-height: 1.2;
	color: var(--color-navy-900);
	font-variant-numeric: tabular-nums;
}

/* --- Fußzeile der Karte ----------------------------------------------- */

/*
 * In der Fußzeile steht der Preis - früher war es der Button "Details
 * ansehen". Deshalb hier bewusst kein Flex-Layout mehr: Kommen in einem
 * Ausnahmefall zwei Preisangaben zusammen, sollen sie untereinander stehen und
 * nicht nebeneinander.
 *
 * margin-top:auto hält die Fußzeile auch bei kurzen Karten unten - das
 * funktioniert weiterhin, weil sie ein Flex-Element von .beon-item__body ist;
 * ihr eigenes display spielt dafür keine Rolle.
 */
.beon-item__footer {
	margin-top: auto;
	padding-top: var(--abstand-md, 16px);
	border-top: var(--stroke-width-1, 1px) solid var(--color-gray-400);
}

/* --- Bewegung ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	[data-immomakler="search-form"] .bootstrap-select .dropdown-toggle,
	[data-immomakler="search-form"] .bootstrap-select .bs-caret .caret {
		transition: none;
	}
}


/* ====================================================================== *
 * 4. Karten-Popup (archive-map-popup.js)
 * ====================================================================== */

/*
 * Karte an ihrer ursprünglichen Stelle ausblenden, sobald JavaScript
 * vorhanden ist. Die Klasse setzt archive-map-popup.js sofort beim Laden im
 * <head> - also bevor der Browser die Karte zeichnet. Ohne diese Regel
 * blitzte die Karte oben kurz auf und verschwand erst, wenn das Script sie
 * in den Dialog verschoben hat.
 *
 * Im Dialog bleibt sie sichtbar: die Regeln für .beon-map-dialog__body
 * setzen dort display mit !important.
 *
 * Ohne JavaScript fehlt die Klasse - dann bleibt die Karte an Ort und Stelle
 * und ist weiterhin erreichbar.
 */
.beon-map-js .immomakler-map {
	display: none;
}

/* --- Fixierter Button unten rechts ------------------------------------ */
.beon-map-fab {
	position: fixed;
	right: var(--abstand-lg, 24px);
	bottom: var(--abstand-lg, 24px);
	z-index: 900;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 24px;
	border: var(--stroke-width-1, 1px) solid var(--color-gold-600);
	border-radius: 0;
	background-color: var(--color-navy-900);
	box-shadow: 0 6px 24px rgba(0, 10, 25, 0.28);
	color: #fff;
	font-family: var(--benton-sans);
	font-size: var(--size-13, 13px);
	font-weight: 500;
	letter-spacing: var(--letter-spacing-1-4, 1.4px);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}

.beon-map-fab:hover,
.beon-map-fab:focus-visible {
	background-color: var(--color-gold-600);
	color: var(--color-navy-900);
}

/*
 * Fokusring 2px statt 1px: WCAG 2.4.11 verlangt eine deutlich erkennbare
 * Umrandung mit mindestens 3:1 Kontrast zur Nachbarfarbe. Navy auf der
 * goldenen Fläche und gegen den hellen Seitenhintergrund erfüllt das klar.
 *
 * Der zusätzliche weiße Ring per box-shadow trennt die Kontur vom
 * Seiteninhalt - der Button ist fixiert und kann über beliebigen Farben
 * liegen, etwa über einem Immobilienfoto.
 */
.beon-map-fab:focus-visible {
	outline: var(--stroke-width, 2px) solid var(--color-navy-900);
	outline-offset: 3px;
	box-shadow: 0 6px 24px rgba(0, 10, 25, 0.28), 0 0 0 6px rgba(255, 255, 255, 0.9);
}

.beon-map-fab svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

/* --- Dialog ------------------------------------------------------------ */
.beon-map-dialog {
	width: min(1100px, 92vw);
	max-width: none;
	/*
	 * 82vh statt Vollhöhe: darüber bleibt Platz für den Schließen-Button, der
	 * außerhalb der Kartenfläche sitzt.
	 */
	height: min(760px, 82vh);
	max-height: none;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: #fff;
	box-shadow: 0 24px 60px rgba(0, 10, 25, 0.35);
	/*
	 * Sichtbar, damit der Schließen-Button über den oberen Dialogrand hinaus
	 * ragen darf. Die Karte selbst ist rechteckig, es gibt nichts zu clippen.
	 */
	overflow: visible;
}

.beon-map-dialog[open] {
	display: flex;
	flex-direction: column;
}

.beon-map-dialog::backdrop {
	background-color: rgba(0, 23, 49, 0.6);
}

/* Hintergrund während des Popups nicht mitscrollen. */
.beon-map-dialog-open,
.beon-map-dialog-open body {
	overflow: hidden;
}

/* --- Schließen-Button, oberhalb der Karte ----------------------------- */

/*
 * Sitzt außerhalb der Kartenfläche: über dem oberen Rand des Dialogs, rechts
 * bündig. Möglich durch overflow:visible am Dialog; der Dialog ist im
 * geöffneten Zustand positioniert, absolute Kinder beziehen sich daher auf ihn.
 */
.beon-map-dialog__close-form {
	position: absolute;
	right: 0;
	bottom: 100%;
	margin: 0 0 12px;
}

.beon-map-dialog__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: var(--stroke-width-1, 1px) solid rgba(255, 255, 255, 0.7);
	border-radius: 0;
	background: none;
	/* Weiß, weil der Button auf der abgedunkelten Fläche liegt. */
	color: #fff;
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.beon-map-dialog__close:hover,
.beon-map-dialog__close:focus-visible {
	border-color: var(--color-gold-600);
	background-color: var(--color-gold-600);
	color: var(--color-navy-900);
}

/*
 * Fokusring 2px in Weiß: der Button liegt auf der abgedunkelten Fläche
 * (rgba navy 0.6), Weiß hat dort den höchsten Kontrast. Bei Hover wird der
 * Button gold gefüllt - der weiße Ring bleibt auch dann klar erkennbar.
 */
.beon-map-dialog__close:focus-visible {
	outline: var(--stroke-width, 2px) solid #fff;
	outline-offset: 3px;
}

.beon-map-dialog__close svg {
	width: 18px;
	height: 18px;
}

/*
 * Die verschobene Karte auf die volle Dialogfläche bringen.
 *
 * Das Plugin verschachtelt sie mehrfach:
 *   .immomakler-map > .archive-map > [.hidden-xs >] div.immomakler-map-iframe
 *   > iframe.immomakler-map-iframe   (feste Höhe 350px aus dem Plugin-CSS)
 *
 * Bewusst über eine Flex-Kette statt über height:100%: der Dialog-Body ist ein
 * Flex-Element mit computed height:auto, an dem sich Prozenthöhen NICHT
 * auflösen - die Karte blieb dadurch bei ihren 350px. Mit flex:1 auf jeder
 * Ebene erbt jede Stufe die verfügbare Höhe ohne definite Höhenangabe.
 *
 * .hidden-xs ist mit im Selektor, weil das Plugin die Karte dort hineinpackt,
 * wenn die Option "Karte auf Mobilgeräten" aus ist - im Popup wäre sie auf dem
 * Handy sonst leer.
 */
.beon-map-dialog__body,
.beon-map-dialog__body .immomakler-map,
.beon-map-dialog__body .archive-map,
.beon-map-dialog__body .hidden-xs,
.beon-map-dialog__body div.immomakler-map-iframe {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 auto;
	/* Ohne min-height:0 verhindert die Mindestgröße von Flex-Elementen das
	   Schrumpfen und der Inhalt läuft aus dem Dialog. */
	min-height: 0;
	/*
	 * Entscheidend: das Plugin deckelt die Karte mit max-height (350px), nicht
	 * mit height. Ein Zurücksetzen von height allein bleibt deshalb wirkungslos
	 * - erst max-height:none lässt die Flex-Kette bis zur vollen Dialoghöhe
	 * wachsen.
	 */
	height: auto;
	max-height: none;
	width: 100%;
	margin: 0;
	/* .archive-map bringt vom Plugin 20px padding-bottom mit. */
	padding: 0;
}

.beon-map-dialog__body iframe {
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	height: auto;
	max-height: none;
	border: 0;
	display: block;
}

@media (max-width: 600px) {
	/*
	 * Vollbild auf dem Handy. Oberhalb ist dann kein Platz mehr, deshalb
	 * wandert der Schließen-Button in die obere rechte Ecke über die Karte -
	 * mit dunklem Grund, damit er auf jedem Kartenausschnitt lesbar bleibt.
	 */
	.beon-map-dialog {
		width: 100vw;
		height: 100dvh;
	}

	.beon-map-dialog__close-form {
		position: fixed;
		top: 12px;
		right: 12px;
		bottom: auto;
		margin: 0;
	}

	.beon-map-dialog__close {
		border-color: var(--color-navy-900);
		background-color: var(--color-navy-900);
		color: #fff;
	}

	/*
	 * Hier liegt der Button auf der Karte statt auf der abgedunkelten Fläche.
	 * Ein weißer Ring allein ginge über hellen Kartenflächen unter, deshalb
	 * zusätzlich ein dunkler Hof.
	 */
	.beon-map-dialog__close:focus-visible {
		box-shadow: 0 0 0 5px var(--color-navy-900);
	}

	.beon-map-fab {
		right: var(--abstand-md, 16px);
		bottom: var(--abstand-md, 16px);
		padding: 14px 20px;
	}
}

/*
 * Von dir ergänzt: Beim reinen :focus (also auch nach einem Mausklick) bleiben
 * Karten-Button und Schließen-Button navy statt in den Gold-Hover zu wechseln.
 * Sonst blieb der Button nach dem Klick golden stehen, obwohl der Zeiger längst
 * weg war.
 *
 * Die !important sind nötig, weil die Hover-Regeln oben dieselbe Spezifität
 * haben und später im Dokument stehen.
 */
.beon-map-dialog__close:focus,
.beon-map-fab:focus {
	background-color: var(--color-navy-900) !important;
	color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
	.beon-map-fab,
	.beon-map-dialog__close {
		transition: none;
	}
}


/* ====================================================================== *
 * 5. Karten im Carousel (item-carousel-property.php)
 * ====================================================================== */

/*
 * Im Archiv sitzt die Karte in einem Grid, das ihr Höhe und Breite gibt. Im
 * Carousel fehlt dieser Rahmen - OWL setzt die Breite selbst und die Höhe
 * bleibt dem Inhalt überlassen. Deshalb hier die Grundform noch einmal, ohne
 * das Grid vorauszusetzen.
 */
.beon-item--carousel {
	display: flex;
	flex-direction: column;
	width: 100%;
	/* Gleiche Höhe aller Karten im sichtbaren Ausschnitt. */
	height: 100%;
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 10, 25, 0.1);
	transition: box-shadow 250ms ease;
}

.beon-item--carousel:hover {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 18px 38px rgba(0, 10, 25, 0.16);
}

/*
 * Schatten nicht abschneiden.
 *
 * OWL legt über die Bühne ein .owl-stage-outer mit overflow:hidden - nötig,
 * damit die Karten außerhalb des Ausschnitts unsichtbar bleiben. Dadurch wird
 * aber auch der Schatten der Karten an allen vier Kanten gekappt.
 *
 * overflow:hidden schneidet an der *Padding*-Kante ab, nicht am Inhalt.
 * Innenabstand schafft dem Schatten also Platz innerhalb des Ausschnitts; das
 * gleich große negative Außenmaß nimmt den Platz im Layout wieder zurück, die
 * Karten stehen also weiterhin genau dort, wo sie sollen.
 *
 * Bewusst NUR oben und unten: seitlicher Innenabstand würde den Ausschnitt
 * nach außen verschieben, und die nächste Karte lugte am Rand herein. Der
 * Schatten der äußersten Karten wird links und rechts also weiterhin gekappt -
 * bei einem Schatten mit 0 Versatz zur Seite fällt das kaum auf.
 *
 * Der Abstand zwischen den Karten kommt nicht von hier, sondern aus der
 * OWL-Option "margin" (siehe Filter immomakler_carousel_options).
 */
.immomakler-carousel .owl-stage-outer {
	padding: 12px 0 40px;
	margin: -12px 0 -40px;
}

/*
 * OWL macht seine Items zu Flex-Elementen unterschiedlicher Höhe. Damit die
 * Karten in einer Reihe gleich hoch sind, muss die Höhe über die Kette
 * durchgereicht werden.
 */
.owl-carousel .owl-stage {
	display: flex;
}

.owl-carousel .owl-item {
	display: flex;
	height: auto;
}

.owl-carousel .owl-item > * {
	display: flex;
	width: 100%;
}

/*
 * Das Plugin gibt dem alten Carousel-Markup eine feste Bildhöhe über
 * .carousel-property-thumbnail. Unsere Karte nutzt stattdessen das
 * Seitenverhältnis aus Abschnitt 2 - hier wird nur sichergestellt, dass
 * nichts aus der Plugin-Datei dazwischenfunkt.
 */
.beon-item--carousel .beon-item__media {
	height: auto;
	background: none;
}

/*
 * Status-Badge im Carousel.
 *
 * immomakler-plus.css lädt NACH dieser Datei und stylt
 * ".immomakler-carousel .property-status" (orange, eigene Position, feste
 * Breite). Bei gleicher Spezifität würde das Plugin gewinnen - deshalb hier
 * drei Klassen im Selektor, damit der Badge auch im Carousel so aussieht wie
 * in der Listenansicht.
 */
.immomakler-carousel .beon-item__media .property-status-bar {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.immomakler-carousel .beon-item__media .property-status {
	position: static;
	width: auto;
	min-width: 0;
	max-width: none;
	padding: 8px 14px;
	background-color: var(--color-navy-900);
	color: #fff;
	font-size: var(--size-12, 12px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: var(--letter-spacing-1-4, 1.4px);
	text-transform: uppercase;
}

/* Im schmalen Carousel-Ausschnitt reicht eine Spalte für die Kennzahlen. */
/*
 * Bewusst KEINE eigene Kennzahlen-Regel für das Carousel mehr.
 *
 * Früher standen hier engere Spalten und ein kleinerer Zeilenabstand, passend
 * zu den damals auf zwei Werte begrenzten Karten. Seit Archiv, Referenzen und
 * Carousel dieselbe Karte rendern (archive/card-property.php), soll auch die
 * Kennzahlen-Optik dieselbe sein. Die Regel aus Abschnitt 3 gilt damit
 * unverändert; dass im schmaleren Carousel weniger Werte pro Zeile Platz
 * finden, erledigt auto-fit von selbst.
 */

@media (prefers-reduced-motion: reduce) {
	.beon-item--carousel {
		transition: none;
	}
}

/* --- Navigationspfeile ------------------------------------------------- */

/*
 * Ersetzt die grauen Standard-Buttons des OWL-Themes durch das eigene
 * Pfeil-Icon.
 *
 * Spezifität: owl.theme.default.css lädt NACH dieser Datei und stylt
 * ".owl-theme .owl-nav [class*=owl-]" (0,3,0). Beide Klassen des Containers
 * (.immomakler-carousel und .owl-theme) sitzen am selben Element, deshalb
 * ergibt ".immomakler-carousel.owl-theme .owl-nav [class*=…]" 0,4,0 und
 * gewinnt zuverlässig.
 */
/*
 * Von dir umgestellt: Die Pfeile sitzen nicht unter dem Carousel, sondern
 * oberhalb rechts - auf Höhe der Abschnittsüberschrift.
 *
 * position:absolute bezieht sich auf .immomakler-carousel. Der negative
 * top-Wert hebt die Leiste über den oberen Rand hinaus; der Platz dafür muss
 * vom Abschnitt darüber kommen, das Carousel selbst reserviert ihn nicht.
 */
.immomakler-carousel.owl-theme .owl-nav {
	display: flex;
	justify-content: flex-end;
	gap: var(--abstand-sm, 8px);
	margin-top: var(--abstand-lg, 24px);
	position: absolute;
	top: -78px;
	right: 0;
	bottom: auto;
	left: auto;
}

.immomakler-carousel.owl-theme .owl-nav [class*="owl-"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: var(--stroke-width-1, 1px) solid var(--color-gray-400);
	border-radius: 0;
	background: none;
	color: var(--color-navy-900);
	/*
	 * Blendet das Standardzeichen (‹ ›) aus, ohne das span zu entfernen: in
	 * OWL 2.3 trägt genau dieses span das aria-label. Mit display:none hätte
	 * der Button für Screenreader keinen Namen mehr.
	 */
	font-size: 0;
	cursor: pointer;
	transition: border-color 200ms ease, background-color 200ms ease;
}

.immomakler-carousel.owl-theme .owl-nav [class*="owl-"]:hover,
.immomakler-carousel.owl-theme .owl-nav [class*="owl-"]:focus-visible {
	border-color: var(--color-gold-600);
	background: none;
}

.immomakler-carousel.owl-theme .owl-nav [class*="owl-"]:focus-visible {
	outline: var(--stroke-width, 2px) solid var(--color-gold-600);
	outline-offset: 2px;
}

/* Das Icon selbst - beim Zurück-Pfeil gespiegelt. */
.immomakler-carousel.owl-theme .owl-nav [class*="owl-"]::after {
	content: "";
	width: 26px;
	height: 16px;
	background-image: url(/wp-content/uploads/2026/08/arrow-right-long-sharp-light-full.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 300ms ease;
}

.immomakler-carousel.owl-theme .owl-nav .owl-prev::after {
	transform: rotate(180deg);
}

/* Beim Zeigen wandert der Pfeil in seine jeweilige Richtung. */
.immomakler-carousel.owl-theme .owl-nav .owl-next:hover::after,
.immomakler-carousel.owl-theme .owl-nav .owl-next:focus-visible::after {
	transform: translateX(5px);
}

.immomakler-carousel.owl-theme .owl-nav .owl-prev:hover::after,
.immomakler-carousel.owl-theme .owl-nav .owl-prev:focus-visible::after {
	transform: rotate(180deg) translateX(5px);
}

/* Am Anfang bzw. Ende setzt OWL .disabled - nur ohne Endlosschleife. */
.immomakler-carousel.owl-theme .owl-nav [class*="owl-"].disabled {
	opacity: 0.35;
	cursor: default;
}

.immomakler-carousel.owl-theme .owl-nav [class*="owl-"].disabled:hover {
	border-color: var(--color-gray-400);
}

.immomakler-carousel.owl-theme .owl-nav [class*="owl-"].disabled:hover::after {
	transform: none;
}

.immomakler-carousel.owl-theme .owl-nav .owl-prev.disabled:hover::after {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.immomakler-carousel.owl-theme .owl-nav [class*="owl-"],
	.immomakler-carousel.owl-theme .owl-nav [class*="owl-"]::after {
		transition: none;
	}
}

/* ====================================================================== *
 * 6. Mobil
 * ====================================================================== */

/*
 * Von dir ergänzt. Bewusst am Ende der Datei und nicht in den jeweiligen
 * Abschnitten: So steht das Verhalten auf kleinen Bildschirmen an einer
 * Stelle beisammen.
 *
 * Die Regeln für .immomakler-single und .beon-immo-single-col-right gehören
 * NICHT hierher - die Detailseite ist nicht Gegenstand dieser Datei. Sie
 * stehen weiterhin nur in der immomakler.css.
 */
@media (max-width: 767px) {
	.immomakler-archive {
		padding: 0 15px !important;
	}

	/* Sortierung über die volle Breite, ohne Bootstrap-Spaltenabstand. */
	.immomakler-archive .immomakler-order-by {
		padding: 0 !important;
	}
}


/* ====================================================================== *
 * 7. Kartenvorschau im Google-Maps-Infofenster (mapinfo-property.php)
 * ====================================================================== */

/*
 * Diese Regeln wirken in einer anderen Umgebung als alles darüber: Die Karte
 * läuft in einem eigenen iframe, und dort lädt das Plugin die Stylesheets so:
 *
 *   1. ein Inline-<style> im Kopf
 *   2. css/immomakler.css   -> DIESE Datei (über Skin::locate_url, also die
 *                              des ChildSkins; die Basis-CSS des Plugins lädt
 *                              im iframe gar nicht)
 *   3. css/immomakler-plus.css
 *
 * Zwei Folgen daraus:
 *
 * - immomakler-plus.css kommt NACH dieser Datei und gewinnt bei gleicher
 *   Spezifität. Deshalb tragen alle eigenen Elemente .beon-iw*-Klassen: Die
 *   float-basierten Regeln von plus.css hängen an .property-title,
 *   .property-thumbnail und .property-data und greifen hier schlicht nicht.
 *
 * - Auf das Grundstyling des Skins kann sich hier nichts verlassen. Der
 *   Status-Badge etwa ist im iframe völlig unformatiert und wird unten
 *   vollständig selbst gesetzt.
 *
 * Die Größe des Fensters (400 x 200) gibt weiterhin plus.css über
 * .immomakler-map-infowindow vor - Konzept A bleibt absichtlich darin, damit
 * die von Google erzwungene Höhe von 225px nicht überschrieben werden muss.
 */

/* --- Die CI-Variablen im iframe verfügbar machen ---------------------- */

/*
 * WICHTIG: Im Karten-iframe sind die CI-Variablen NICHT definiert.
 *
 * Sie stammen aus dem Theme bzw. aus Elementor, und im iframe lädt weder das
 * eine noch das andere - dort kommen nur ein Inline-<style>, diese Datei und
 * immomakler-plus.css an. Jedes var(--color-navy-900) ohne Fallback wäre damit
 * ungültig, und die Vorschau erschiene in den Standardfarben des Browsers.
 *
 * Deshalb werden die benötigten Werte hier noch einmal gesetzt - und zwar
 * ausschließlich an der body-Klasse der Karten-Seite. Beide Karten-Varianten
 * des Plugins (aktuell und Legacy) setzen sie, und außerhalb des iframes gibt
 * es sie nicht: Die echten Theme-Werte bleiben so unangetastet.
 *
 * Doppelt gesichert: Zusätzlich trägt jeder var()-Aufruf weiter unten seinen
 * Fallback. Änderte das Plugin einmal diese body-Klasse, stimmten die Farben
 * also trotzdem.
 *
 * Bei Änderungen an der CI müssen die Werte hier mitgepflegt werden - eine
 * Verbindung zur Theme-Definition gibt es nicht.
 */
.immomakler-map-iframe-gmaps {
	--color-navy-900: #001731;
	--color-navy-800: #002349;
	--color-gold-600: #c29b40;
	--color-gold-700: #b28e3b;
	--color-gray-300: #f2f2f2;
	--color-gray-400: #d6d6d6;
	--color-gray-500: #5b5b5b;
	--letter-spacing-1: 1px;
	--letter-spacing-1-4: 1.4px;
	--stroke-width-1: 1px;
	--stroke-width: 2px;

	/*
	 * Schriften: Die Webfont-Dateien selbst lädt das iframe ebenfalls nicht -
	 * die @font-face-Regeln stehen im Theme. Die Vorschau nutzt deshalb die
	 * Ersatzschriften dieser Stacks: eine kräftige Antiqua für Titel und
	 * Zahlen, eine neutrale Grotesk für den Rest. Soll dort die echte
	 * Hausschrift erscheinen, muss eine @font-face-Regel in DIESE Datei -
	 * dann greift sie auch im iframe.
	 */
	--mercurydisplay: "Mercury Display", Georgia, "Times New Roman", serif;
	--sourcesans3: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
}

/* --- Der Rahmen, den das Plugin stellt -------------------------------- */

/*
 * Innenabstand raus: Die Karte soll bis an die Fensterkante reichen, das Foto
 * randlos sitzen.
 */
.immomakler .immomakler-map-infowindow {
	padding: 0;
	font-family: var(--sourcesans3, "Helvetica Neue", Arial, sans-serif);
}

/*
 * Mehrere Objekte am selben Marker: Das Plugin setzt .long und eine feste
 * Höhe von 300px. Hier stattdessen automatische Höhe - die gestapelten Karten
 * bestimmen sie, und gescrollt wird im Container von Google
 * (.gm-style-iw-d, auf 225px begrenzt).
 */
/*
 * Höhe dem Inhalt folgen lassen. plus.css setzt 200px (bzw. 300px bei .long) -
 * ein Wert, der zum alten Aufbau passte. Bleibt er stehen, sitzt die Karte in
 * einem Kasten, der weder ihrer Höhe noch den 225px von Google entspricht.
 */
.immomakler .immomakler-map-infowindow,
.immomakler .immomakler-map-infowindow.long {
	height: auto;
}

/* --- Die Karte -------------------------------------------------------- */

.immomakler .beon-iw {
	position: relative;
	display: grid;
	/*
	 * Foto links in fester Breite, der Text nimmt den Rest.
	 *
	 * 150px und nicht mehr: Von den 400px Fensterbreite bleiben damit 210px für
	 * den Text, abzüglich Innenabstand 170px. Zwei Kennzahlen-Spalten haben so
	 * je rund 78px - genug, dass "Wohnfläche ca." einzeilig bleibt. Bei einem
	 * breiteren Foto bricht das Label um, und die Karte wird 13px höher als das
	 * Fenster erlaubt.
	 */
	grid-template-columns: 150px minmax(0, 1fr);
	align-items: stretch;
	width: 100%;
	/* Bei sehr kurzen Inhalten keine gestauchte Karte. */
	min-height: 200px;
	background-color: #fff;
}

/* Trennlinie nur zwischen gestapelten Karten. */
.immomakler .immomakler-map-infowindow.long .beon-iw + .beon-iw {
	border-top: var(--stroke-width-1, 1px) solid var(--color-gray-400, #d6d6d6);
}

/* --- Foto ------------------------------------------------------------- */

.immomakler .beon-iw__media {
	position: relative;
	overflow: hidden;
	background-color: var(--color-gray-300, #f2f2f2);
}

/*
 * Das Foto füllt seine Spalte vollständig. object-fit übernimmt den Beschnitt,
 * unabhängig davon, ob das Original hoch- oder querformatig ist - die
 * Bildgröße immomakler-archive-thumb beschneidet selbst nicht.
 */
.immomakler .beon-iw__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	object-fit: cover;
}

/* --- Status-Badge ----------------------------------------------------- */

/*
 * Vollständig selbst gesetzt: Im iframe bringt keine Plugin-Datei Regeln für
 * .property-status mit.
 */
.immomakler .beon-iw__media .property-status-bar {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 1px;
	/* Klicks gehen an den Link, der die ganze Karte abdeckt. */
	pointer-events: none;
}

.immomakler .beon-iw__media .property-status {
	position: static;
	width: auto;
	max-width: none;
	padding: 5px 10px;
	border: 0;
	border-radius: 0;
	background-color: var(--color-navy-900, #001731);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: var(--letter-spacing-1-4, 1.4px);
	text-transform: uppercase;
	text-align: left;
}

/* --- Textspalte ------------------------------------------------------- */

/*
 * Abstände und Schriftgrößen in diesem Abschnitt sind auf die 225px abgestimmt,
 * die Google dem Fenster erzwingt (.gm-style-iw-d, inline mit !important).
 * Gemessen kommt die Karte damit auf rund 214px. Wer hier Werte erhöht, sollte
 * gegenprüfen - darüber erscheint eine Bildlaufleiste im Fenster.
 */
.immomakler .beon-iw__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding: 16px 18px;
}

.immomakler .beon-iw__place {
	display: block;
	color: var(--color-gold-700, #b28e3b);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: var(--letter-spacing-1-4, 1.4px);
	text-transform: uppercase;
}

.immomakler .beon-iw__title {
	margin: 0;
	border: 0;
	font-family: var(--mercurydisplay, Georgia, "Times New Roman", serif);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--color-navy-900, #001731);
	/* Zwei Zeilen, damit die Karte bei langen Titeln nicht wächst. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/*
 * Drei Klassen im Selektor, weil das Inline-<style> im iframe-Kopf mit
 * ".immomakler .immomakler-map-infowindow a" (0,3,0) die Linkfarbe setzt -
 * teils aus einer Customizer-Option. Gleiche Spezifität reicht hier nicht
 * verlässlich, deshalb eine Klasse mehr.
 */
.immomakler .immomakler-map-infowindow .beon-iw__title a {
	color: var(--color-navy-900, #001731);
	text-decoration: none;
}

.immomakler .immomakler-map-infowindow .beon-iw__title a:hover,
.immomakler .immomakler-map-infowindow .beon-iw__title a:focus-visible {
	color: var(--color-gold-700, #b28e3b);
	text-decoration: none;
}

/*
 * Die ganze Karte klickbar - dasselbe Muster wie in der Listenansicht: Der
 * vorhandene Titel-Link wird über die Fläche gezogen, statt einen zweiten Link
 * ins Markup zu legen.
 */
.immomakler .beon-iw__title a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}

.immomakler .beon-iw__price {
	margin: 0;
	font-family: var(--mercurydisplay, Georgia, "Times New Roman", serif);
	font-size: 19px;
	line-height: 1.2;
	color: var(--color-navy-900, #001731);
	font-variant-numeric: tabular-nums;
}

/* --- Kennzahlen ------------------------------------------------------- */

/*
 * margin-top:auto drückt die Kennzahlen an den unteren Rand - die Karte hat
 * eine feste Höhe, ohne das entstünde darunter eine Lücke.
 */
.immomakler .beon-iw__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 12px;
	margin: auto 0 0;
	padding-top: 10px;
	border-top: var(--stroke-width-1, 1px) solid var(--color-gray-400, #d6d6d6);
}

.immomakler .beon-iw__fact {
	min-width: 0;
}

/*
 * Referenzen haben keinen Preis. Bleiben die Kennzahlen dann unten verankert,
 * klafft zwischen Titel und Trennlinie eine Lücke. Für sie wird die
 * Verankerung deshalb aufgehoben und der Textblock mittig gesetzt - so sitzt
 * der Inhalt optisch ausgewogen, ohne Loch.
 */
.immomakler .beon-iw--reference .beon-iw__text {
	justify-content: center;
}

.immomakler .beon-iw--reference .beon-iw__facts {
	margin-top: 0;
}

/*
 * 9px und weniger Sperrung als sonst in der CI (dort 1px): Nur so passt
 * "Wohnfläche ca." in die 78px breite Spalte. Bricht es um, wächst die Karte
 * über die 225px des Fensters hinaus.
 */
.immomakler .beon-iw__facts dt {
	margin: 0 0 2px;
	color: var(--color-gold-700, #b28e3b);
	font-size: 9px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.immomakler .beon-iw__facts dd {
	margin: 0;
	font-family: var(--mercurydisplay, Georgia, "Times New Roman", serif);
	font-size: 15px;
	line-height: 1.15;
	color: var(--color-navy-900, #001731);
	font-variant-numeric: tabular-nums;
}

/* --- Schmale Fenster -------------------------------------------------- */

/*
 * Auf dem Handy gibt Google dem Fenster weniger Breite, als plus.css mit
 * 400px vorsieht (max-width:100% greift dann). Unter 340px ist für zwei
 * Spalten kein Platz mehr - dann Foto oben, Text darunter.
 */
@media (max-width: 330px) {
	.immomakler .beon-iw {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.immomakler .beon-iw__media {
		aspect-ratio: 3 / 2;
	}

	.immomakler .beon-iw__facts {
		margin-top: 0;
	}
}


/* ====================================================================== *
 * 8. Scrollstopper (scrollstopper-property.php)
 * ====================================================================== */

/*
 * Werbekachel zwischen den Immobilien im Archiv-Raster. Sie sitzt in einer
 * .property-Zelle wie die Karten und übernimmt damit deren Rasterverhalten -
 * .properties .property ist in Abschnitt 3 auf display:flex gesetzt, die
 * Kachel füllt die Zelle also von selbst aus.
 *
 * An welchen Positionen sie erscheint, steht in
 * archive/loop-property.php - dort wird auch mitgegeben, welche der beiden
 * Textvarianten (Suchauftrag / Kontakt) an der Reihe ist. Die Texte selbst
 * stehen in be_on_stopper_variants() in der functions.php des ChildSkins.
 */

.beon-stopper {
	display: flex;
	flex-direction: column;
	/* Text und Button als Block in der Mitte - so wie im Entwurf. */
	justify-content: center;
	width: 100%;
	/*
	 * Mindesthöhe nur als Untergrenze, bewusst DEUTLICH unter der Höhe einer
	 * Immobilien-Karte.
	 *
	 * Der Grund: Im Raster ziehen sich alle Zellen einer Zeile auf die Höhe der
	 * höchsten. Wäre die Kachel höher als die Karten neben ihr, würde sie die
	 * ganze Zeile aufziehen - die Karten bekämen unten eine Lücke, weil ihre
	 * Fußzeile per margin-top:auto am Boden klebt. So bleibt es umgekehrt: Die
	 * Karten geben die Zeilenhöhe vor, die Kachel füllt sie aus.
	 *
	 * Auf dieser Installation läuft das Archiv im Spaltenlayout (float-basiert,
	 * siehe archive/loop-property.php). Dort zieht NICHTS die Zellen auf eine
	 * gemeinsame Höhe - die Untergrenze bestimmt also faktisch immer die Höhe
	 * der Kachel und ist deshalb bewusst grosszügig gewählt, damit sie neben
	 * den Karten nicht verloren wirkt.
	 */
	min-height: 28em;
	padding: 56px 44px;
	/*
	 * Zusaetzlicher Abstand zwischen den beiden Kindern der Kachel, also
	 * zwischen Textblock und Button. Kommt zum margin-bottom des Textes hinzu,
	 * ersetzt es nicht - unten in .beon-stopper__text steht der Hauptanteil.
	 *
	 * Als gap und nicht als weiteres margin: Der Abstand gehoert der Kachel,
	 * nicht dem Text. Kommt spaeter ein drittes Element dazu, etwa eine
	 * Kleinzeile unter dem Button, sitzt es von selbst im gleichen Raster.
	 */
	gap: 20px;
	background-color: var(--color-navy-900, #001731);
}

.beon-stopper__text {
	/*
	 * Der Abstand zum Button. Bewusst grosszuegig: Text und Button sollen als
	 * zwei getrennte Dinge gelesen werden, nicht als ein Block. Der Wert liegt
	 * gleichauf mit dem oberen Innenabstand der Kachel (56px) - so entsteht ein
	 * gleichmaessiger senkrechter Rhythmus.
	 */
	margin: 0 0 56px;
	color: #fff;
	font-family: var(--mercurydisplay, Georgia, "Times New Roman", serif);
	/*
	 * Wächst mit der Kachelbreite: Im dreispaltigen Raster ist eine Zelle rund
	 * 380px breit, auf dem Handy fast die ganze Seite. Eine feste Größe wäre
	 * an einem der beiden Enden falsch.
	 */
	font-size: clamp(28px, 2.4vw + 17px, 38px);
	font-weight: 400;
	line-height: 1.25;
	/* Verhindert eine einzelne Restzeile mit nur einem Wort. */
	text-wrap: balance;
}

/*
 * Die goldene Hervorhebung. Kursiv UND farbig: Die Betonung soll auch ohne
 * Farbwahrnehmung erkennbar bleiben.
 */
.beon-stopper__betonung {
	color: var(--color-gold-600, #c29b40);
	font-style: italic;
}

/* --- Button ------------------------------------------------------------ */

/*
 * Umrissener Button auf dunklem Grund. Zwei Klassen im Selektor, weil
 * ".immomakler a" aus dem mitgelieferten Bootstrap (0,1,1) eine einzelne
 * Klasse überstimmt und die Schriftfarbe kippen würde.
 */
.beon-stopper .beon-stopper__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Nur so breit wie nötig, links ausgerichtet. */
	align-self: flex-start;
	padding: 19px 34px;
	border: var(--stroke-width-1, 1px) solid rgba(255, 255, 255, 0.55);
	border-radius: 0;
	background-color: transparent;
	color: #fff;
	font-family: var(--sourcesans3, "Helvetica Neue", Arial, sans-serif);
	font-size: var(--size-14, 14px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: var(--letter-spacing-1-4, 1.4px);
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.beon-stopper .beon-stopper__cta:hover,
.beon-stopper .beon-stopper__cta:focus-visible {
	border-color: var(--color-gold-600, #c29b40);
	background-color: var(--color-gold-600, #c29b40);
	color: var(--color-navy-900, #001731);
	text-decoration: none;
}

.beon-stopper .beon-stopper__cta:focus {
	outline: none;
}

/*
 * Fokusrahmen in Weiß: Der Button liegt auf Navy, dort hat Weiß den höchsten
 * Kontrast. Beim Hover wird die Fläche golden - der weiße Ring bleibt auch
 * dann klar erkennbar.
 */
.beon-stopper .beon-stopper__cta:focus-visible {
	outline: var(--stroke-width, 2px) solid #fff;
	outline-offset: 3px;
}

/* --- Ganze Kachel klickbar -------------------------------------------- */

/*
 * Wie bei den Immobilien-Karten: Der vorhandene Link wird über die Fläche
 * gezogen, statt einen zweiten ins Markup zu legen.
 */
.beon-stopper-cell {
	position: relative;
}

.beon-stopper .beon-stopper__cta::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}

/* --- Schmale Ansicht -------------------------------------------------- */

/*
 * Einspaltig braucht die Kachel keine 30em Höhe - dort steht sie ohnehin
 * allein in ihrer Reihe und muss zu keiner Karte daneben passen.
 */
@media (max-width: 700px) {
	.beon-stopper {
		min-height: 0;
		padding: 44px 28px;
	}

	/*
	 * Auf dem Handy etwas knapper, aber im gleichen Verhaeltnis zum kleineren
	 * Innenabstand (44px) - ein Abstand von 56px wuerde hier zu viel Leerraum
	 * in eine ohnehin hohe Kachel legen.
	 */
	.beon-stopper__text {
		margin-bottom: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.beon-stopper .beon-stopper__cta {
		transition: none;
	}
}