/**
 * Styles für das Suchprofil-Formular in drei Schritten
 * [immomakler-propstack-suchprofil].
 *
 * Eigene Datei, weil das Formular auf einer eigenen Seite (/suchauftrag)
 * steht - dort lädt WP-ImmoMakler seine Archiv-Styles nicht.
 *
 * Eingebunden aus beon-immomakler-shortcodes.php, zusammen mit
 * beon-propstack-suchprofil.js.
 *
 * ------------------------------------------------------------------------
 * Gestaltung: gewichtetes Raster mit Untergruppen, Felder ohne Kasten.
 *
 * Jedes Feld bekommt die Breite, die sein Inhalt braucht - PLZ schmal, Straße
 * breit. Die Eingaben selbst haben keinen Rahmen, nur eine Unterlinie; das
 * nimmt dem Formular die vielen Kanten, die es als Feldersammlung erscheinen
 * ließen. Dieselbe Haltung wie das Suchfeld auf der Startseite.
 *
 * Die sechs Ja/Nein-Felder der Ausstattung werden vom Script zu anklickbaren
 * Schaltern - aus sechs Auswahllisten mit Beschriftung wird eine Zeile.
 * ------------------------------------------------------------------------
 *
 * Zwei Zustände: Ohne JavaScript stehen alle Abschnitte untereinander, die
 * Blätter-Schaltflächen bleiben unsichtbar (sie tragen im HTML hidden) und die
 * Ausstattung bleibt bei ihren Auswahllisten. Mit JavaScript setzt das Script
 * die Klasse .beon-ps--js.
 *
 * Selektoren tragen durchgängig .beon-ps als Präfix: Das mitgelieferte
 * Bootstrap 3 des Plugins und das Theme gestalten .form-control, .btn, button
 * und label mit Regeln, die eine einzelne Klasse überstimmen.
 */

.beon-ps {
	max-width: 68em;
	font-family: var(--sourcesans3, "Helvetica Neue", Arial, sans-serif);
	color: var(--color-navy-900, #001731);
}

/* ====================================================================== *
 * Fortschrittsanzeige
 * ====================================================================== */

.beon-ps .beon-ps__steps {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 var(--abstand-xl, 44px);
	padding: 0;
	list-style: none;
}

.beon-ps .beon-ps__step {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 0;
	min-width: 0;
	color: var(--color-gray-500, #5b5b5b);
	font-size: var(--size-13, 13px);
	font-weight: 500;
	letter-spacing: var(--letter-spacing-1, 1px);
	text-transform: uppercase;
}

/*
 * Verbindungslinie zum vorigen Schritt. Sie sitzt am Listenelement und wird
 * per order nach vorn geholt - so lässt sie sich beim ersten Schritt einfach
 * weglassen, ohne die Abstände zu verändern.
 */
.beon-ps .beon-ps__step + .beon-ps__step::before {
	content: "";
	order: -1;
	flex: 1 1 auto;
	height: var(--stroke-width-1, 1px);
	margin: 0 14px;
	background-color: var(--color-gray-400, #d6d6d6);
}

.beon-ps .beon-ps__step-nr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: var(--stroke-width-1, 1px) solid var(--color-gray-400, #d6d6d6);
	background-color: transparent;
	color: var(--color-gray-500, #5b5b5b);
	font-family: var(--mercurydisplay, Georgia, serif);
	font-size: var(--size-16, 16px);
	letter-spacing: normal;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.beon-ps .beon-ps__step-titel {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.beon-ps .beon-ps__step.is-current {
	color: var(--color-navy-900, #001731);
}

.beon-ps .beon-ps__step.is-current .beon-ps__step-nr {
	border-color: var(--color-navy-900, #001731);
	background-color: var(--color-navy-900, #001731);
	color: #fff;
}

.beon-ps .beon-ps__step.is-done {
	color: var(--color-gold-700, #b28e3b);
	cursor: pointer;
}

.beon-ps .beon-ps__step.is-done .beon-ps__step-nr {
	border-color: var(--color-gold-600, #c29b40);
	color: var(--color-gold-700, #b28e3b);
}

/* ====================================================================== *
 * Abschnitte und Gruppen
 * ====================================================================== */

.beon-ps .beon-ps__pane[hidden] {
	display: none;
}

.beon-ps:not(.beon-ps--js) .beon-ps__pane + .beon-ps__pane {
	margin-top: var(--abstand-xl, 44px);
	padding-top: var(--abstand-xl, 44px);
	border-top: var(--stroke-width-1, 1px) solid var(--color-gray-300, #f2f2f2);
}

.beon-ps .beon-ps__pane-titel {
	margin: 0 0 var(--abstand-xl, 36px);
	font-family: var(--mercurydisplay, Georgia, serif);
	font-size: var(--size-22, 24px);
	font-weight: 400;
	line-height: 1.2;
	color: var(--color-navy-900, #001731);
}

/* Die Schrittzählung ist ohne JavaScript irreführend - es gibt dann keine. */
.beon-ps .beon-ps__pane-zaehler {
	display: none;
	margin-bottom: 6px;
	color: var(--color-gold-700, #b28e3b);
	font-family: var(--sourcesans3, "Helvetica Neue", Arial, sans-serif);
	font-size: var(--size-12, 12px);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-1-4, 1.4px);
	text-transform: uppercase;
}

.beon-ps.beon-ps--js .beon-ps__pane-zaehler {
	display: block;
}

.beon-ps .beon-ps__gruppe + .beon-ps__gruppe {
	margin-top: var(--abstand-xl, 38px);
}

/*
 * Zwischenüberschrift der Gruppe: klein, golden, gesperrt. Bewusst kein
 * größerer Titel - sie soll ordnen, nicht mit der Abschnittsüberschrift
 * konkurrieren.
 */
.beon-ps .beon-ps__gruppe-titel {
	margin: 0 0 var(--abstand-md, 18px);
	color: var(--color-gold-700, #b28e3b);
	font-family: var(--sourcesans3, "Helvetica Neue", Arial, sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--letter-spacing-1-4, 1.4px);
	text-transform: uppercase;
}

/* ====================================================================== *
 * Das Raster
 * ====================================================================== */

/*
 * WICHTIG: Bootstraps .row bringt einen Clearfix über ::before und ::after
 * mit. In einem Grid-Container werden daraus zwei vollwertige Rasterzellen -
 * eine leere Zelle vor und eine nach den Feldern. Genau das hat die erste
 * Spalte leer gelassen und alle Felder um eine Position verschoben.
 *
 * content:none allein genügt nicht in jedem Browser, deshalb zusätzlich
 * display:none.
 */
.beon-ps .row::before,
.beon-ps .row::after {
	content: none;
	display: none;
}

/*
 * Zwölf Spalten als Grundlage, damit sich Breiten wie ein Viertel, ein Drittel
 * oder sieben Zwölftel sauber ausdrücken lassen.
 */
.beon-ps .row {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--abstand-lg, 26px) var(--abstand-lg, 26px);
	margin: 0;
}

/* Standardbreite: ein Drittel. Gilt auch für Felder, die das Plugin ergänzt. */
.beon-ps .row > .form-group {
	grid-column: span 4;
	min-width: 0;
	margin: 0;
	padding: 0;
	float: none;
	width: auto;
}

/* --- Feldbreiten nach Inhalt ------------------------------------------ */

/*
 * Zugriff über den Feldnamen, weil das Plugin an der Feldgruppe keine
 * unterscheidende Klasse setzt. :has() ist dafür der einzige Weg, ohne das
 * Markup des Plugins anzufassen.
 *
 * Der Namensanfang statt des vollen Namens: Auswahllisten heißen
 * "client_salutation[]", einfache Felder "client_salutation" - mit ^= trifft
 * eine Regel beide Formen.
 */

/* Kurze Angaben. */
.beon-ps .row > .form-group:has([name^="client_salutation"]),
.beon-ps .row > .form-group:has([name^="client_academic_title"]),
.beon-ps .row > .form-group:has([name^="client_zip_code"]) {
	grid-column: span 2;
}

/* Mittlere Angaben. */
.beon-ps .row > .form-group:has([name^="client_city"]) {
	grid-column: span 3;
}

/*
 * Vor- und Nachname je ein Drittel: Zusammen mit Anrede und Titel (je zwei
 * Zwölftel) ergibt das genau zwölf - die Gruppe "Name" passt damit in eine
 * Zeile. Mit je fünf Zwölfteln war der Nachname umgebrochen.
 */
.beon-ps .row > .form-group:has([name^="client_first_name"]),
.beon-ps .row > .form-group:has([name^="client_last_name"]) {
	grid-column: span 4;
}

/*
 * Adresse: 5 + 2 + 3 + 2 = 12. Auch diese Gruppe passt damit in eine Zeile,
 * statt das Land allein in eine zweite zu schicken.
 */
.beon-ps .row > .form-group:has([name^="client_street"]) {
	grid-column: span 5;
}

.beon-ps .row > .form-group:has([name^="client_country"]) {
	grid-column: span 2;
}

/* Kontakt: 7 + 5 = 12. */
.beon-ps .row > .form-group:has([name^="client_email"]) {
	grid-column: span 7;
}

.beon-ps .row > .form-group:has([name^="client_phone"]) {
	grid-column: span 5;
}

/* Auswahllisten der Suche: vier gleich breite Spalten in einer Reihe. */
.beon-ps .row > .form-group:has([name^="query_marketing_type"]),
.beon-ps .row > .form-group:has([name^="query_rs_types"]),
.beon-ps .row > .form-group:has([name^="query_rs_categories"]),
.beon-ps .row > .form-group:has([name^="query_locations"]) {
	grid-column: span 3;
}

/* Alles, was über die ganze Breite gehört. */
.beon-ps .row > .form-group:has(textarea),
.beon-ps .row > .form-group.form-check,
.beon-ps .row > .form-group.col-xs-12 {
	grid-column: 1 / -1;
}

/* ====================================================================== *
 * Felder ohne Kasten
 * ====================================================================== */

/*
 * Nur eine Unterlinie statt eines Rahmens. Die Linie sitzt am Feld selbst und
 * nicht an der Feldgruppe: Bereichsfelder (von/bis) haben zwei Eingaben und
 * brauchen zwei Linien.
 */
.beon-ps .form-group > label {
	display: block;
	margin-bottom: 4px;
	color: var(--color-gray-500, #5b5b5b);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--letter-spacing-1, 1px);
	text-transform: uppercase;
}

.beon-ps .form-control {
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 8px 2px;
	border: 0;
	border-bottom: var(--stroke-width-1, 1px) solid var(--color-gray-400, #d6d6d6);
	border-radius: 0;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	color: var(--color-navy-900, #001731);
	font-family: inherit;
	font-size: var(--size-16, 16px);
	line-height: 1.4;
	transition: border-color 200ms ease;
}

.beon-ps .form-control::placeholder {
	color: var(--color-gray-500, #5b5b5b);
	opacity: 0.65;
}

.beon-ps .form-control:hover {
	border-bottom-color: var(--color-navy-900, #001731);
}

/*
 * Fokus über die Linie statt über einen Rahmen: Die Linie wird golden und
 * doppelt so dick. box-shadow statt einer dickeren border, damit die Zeile
 * beim Fokussieren nicht um einen Pixel springt.
 */
.beon-ps .form-control:focus {
	outline: none;
	border-bottom-color: var(--color-gold-600, #c29b40);
	box-shadow: 0 1px 0 0 var(--color-gold-600, #c29b40);
}

.beon-ps textarea.form-control {
	/* Das Plugin liefert rows="10" - das sprengt den Abschnitt. */
	height: auto;
	min-height: 6em;
	padding: 8px 10px;
	border: var(--stroke-width-1, 1px) solid var(--color-gray-400, #d6d6d6);
	resize: vertical;
}

.beon-ps textarea.form-control:focus {
	border-color: var(--color-gold-600, #c29b40);
	box-shadow: none;
}

/* Zahlenfelder ohne die Pfeilchen - sie stören die ruhige Linie. */
.beon-ps input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.beon-ps input[type="number"]::-webkit-outer-spin-button,
.beon-ps input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* --- Bereichsfelder von/bis ------------------------------------------- */

/*
 * Das Plugin verschachtelt hier Bootstrap-Spalten in der Feldgruppe:
 * label.col-xs-12, dann zwei div.col-xs-6 mit je einer Eingabe. Die Floats
 * werden aufgelöst und durch ein eigenes kleines Raster ersetzt - mit einem
 * Gedankenstrich dazwischen statt zweier beschrifteter Kästen.
 */
/*
 * Alle vier Bereiche werden ausdrücklich benannt und zugewiesen. Ohne die
 * Namen käme der Gedankenstrich in eine eigene Zeile: Die automatische
 * Platzierung im Raster arbeitet nur vorwärts, und das Pseudo-Element steht
 * im Markup hinter den beiden Eingaben - Spalte 2 wäre dann schon passiert.
 */
.beon-ps .form-group:has(> .col-xs-6) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	grid-template-areas:
		"label    label    label"
		"von      trenner  bis";
	align-items: center;
	column-gap: 10px;
}

.beon-ps .form-group:has(> .col-xs-6) > label {
	grid-area: label;
}

/*
 * Die Bootstrap-Spalten innerhalb der Feldgruppe auflösen - auch die des
 * Labels, das beim Bereichsfeld col-xs-12 trägt.
 */
.beon-ps .form-group > [class*="col-"] {
	float: none;
	width: auto;
	min-width: 0;
	padding: 0;
}

.beon-ps .form-group > .col-xs-6:first-of-type {
	grid-area: von;
}

.beon-ps .form-group > .col-xs-6:last-of-type {
	grid-area: bis;
}

/*
 * Der Gedankenstrich zwischen von und bis.
 *
 * Ohne den Ausgleich nach unten sitzt er auf der Mitte des Feldes und damit
 * unter der Textzeile - er sah dort wie ein Unterstrich aus. Die Eingaben
 * haben unten 8px Innenabstand plus die Linie; derselbe Betrag hebt den Strich
 * auf die Höhe des Textes.
 */
.beon-ps .form-group:has(> .col-xs-6)::after {
	content: "–";
	grid-area: trenner;
	align-self: center;
	padding-bottom: 9px;
	color: var(--color-gray-500, #5b5b5b);
}

/* ====================================================================== *
 * Ausstattung als Schalter
 * ====================================================================== */

/*
 * Sechs Auswahllisten mit je einer Beschriftung werden zu einer Zeile
 * anklickbarer Schalter. Das Script baut sie und blendet die Listen aus; die
 * Listen bleiben im Formular und tragen weiterhin den Wert.
 *
 * Ohne JavaScript passiert nichts davon - dann bleiben die Listen sichtbar und
 * bedienbar.
 */
.beon-ps .beon-ps__gruppe[data-beon-ps-stil="chips"] .row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Umgewandelte Felder verstecken - der Schalter tritt an ihre Stelle. */
.beon-ps .form-group.beon-ps__feld--chip {
	display: none;
}

/*
 * Der Haken liegt absolut am linken Rand und belegt keinen Platz im Fluss.
 *
 * Vorher war er immer vorhanden und nur unsichtbar - das reservierte bei jedem
 * nicht gewählten Schalter rund 20 Pixel Leerraum vor dem Wort. Absolut
 * positioniert bleibt die Breite trotzdem konstant: Beim Anklicken springt
 * nichts, und die Zeile bricht nicht neu um.
 */
.beon-ps .beon-ps__chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 11px 22px;
	border: var(--stroke-width-1, 1px) solid var(--color-gray-400, #d6d6d6);
	border-radius: 0;
	background-color: transparent;
	color: var(--color-navy-900, #001731);
	font-family: inherit;
	font-size: var(--size-14, 14px);
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease;
}

.beon-ps .beon-ps__chip::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 8px;
	width: 11px;
	height: 8px;
	transform: translateY(-50%);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='%23001731' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M2 6.5 6 10.5 14 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0;
	transition: opacity 150ms ease;
}

.beon-ps .beon-ps__chip:hover {
	border-color: var(--color-navy-900, #001731);
}

.beon-ps .beon-ps__chip[aria-pressed="true"] {
	border-color: var(--color-gold-600, #c29b40);
	background-color: var(--color-gold-600, #c29b40);
	font-weight: 500;
}

.beon-ps .beon-ps__chip[aria-pressed="true"]::before {
	opacity: 1;
}

.beon-ps .beon-ps__chip:focus {
	outline: none;
}

.beon-ps .beon-ps__chip:focus-visible {
	outline: var(--stroke-width, 2px) solid var(--color-gold-600, #c29b40);
	outline-offset: 3px;
}

/* ====================================================================== *
 * Einwilligungen
 * ====================================================================== */

/*
 * Aufbau des Plugins, wichtig für die Selektoren: Der Eingabe-Kasten steckt
 * INNERHALB des label, es gibt kein umgebendes Element dafür.
 *
 *   <div class="form-group form-check col-xs-12">
 *     <label><input type="checkbox"> Text</label>
 *   </div>
 */
.beon-ps .beon-ps__gruppe[data-beon-ps-stil="liste"] .row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--abstand-md, 14px);
}

/*
 * Die Beschriftung ist hier ein ganzer Satz und keine Feldbezeichnung -
 * Versalien und Sperrung aus der Regel oben müssen deshalb zurückgenommen
 * werden.
 */
.beon-ps .form-check > label {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	margin: 0;
	color: var(--color-navy-900, #001731);
	font-size: var(--size-14, 14px);
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.5;
	text-transform: none;
	cursor: pointer;
}

/*
 * appearance:none statt Verstecken und Nachbauen: Damit bleibt das echte
 * Eingabefeld im Layout - Tastatur, Screenreader und die Pflichtfeld-Prüfung
 * des Browsers funktionieren unverändert. Ein ausgeblendetes Pflichtfeld
 * würde das Absenden mit "not focusable" blockieren, ohne Meldung für den
 * Besucher.
 */
.beon-ps .form-check input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	position: static;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	border: var(--stroke-width-1, 1px) solid var(--color-gold-600, #c29b40);
	border-radius: 0;
	background-color: transparent;
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.beon-ps .form-check input[type="checkbox"]:checked {
	background-color: var(--color-gold-600, #c29b40);
	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'%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-ps .form-check input[type="checkbox"]:focus:not(:focus-visible) {
	outline: none;
}

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

.beon-ps .form-check label a {
	color: var(--color-gold-700, #b28e3b);
}

.beon-ps .required_field {
	margin: var(--abstand-lg, 22px) 0 0;
	color: var(--color-gray-500, #5b5b5b);
	font-size: var(--size-13, 13px);
}

/* ====================================================================== *
 * Schaltflächen
 * ====================================================================== */

.beon-ps .beon-ps__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--abstand-md, 16px);
	margin-top: var(--abstand-xl, 44px);
	padding-top: var(--abstand-lg, 26px);
	border-top: var(--stroke-width-1, 1px) solid var(--color-gray-300, #f2f2f2);
}

/*
 * !important bei Farbe und Fläche.
 *
 * Nötig, weil das Theme seine Buttons global einfärbt - vor dieser Änderung
 * erschien "Weiter" in Magenta statt in Gold. Die Theme-Regel gewinnt
 * unabhängig von der Reihenfolge, weil sie höher gewichtet ist bzw. selbst
 * !important trägt. Betroffen sind nur diese drei Eigenschaften; alles andere
 * kommt ohne aus.
 *
 * Derselbe Weg, den auch der Absende-Button des Kontaktformulars in der
 * immomakler.css geht.
 */
.beon-ps .beon-ps__nav .beon-ps__weiter,
.beon-ps .beon-ps__nav .beon-ps__senden {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	/* Schiebt die Hauptaktion an das rechte Ende der Zeile. */
	margin-left: auto;
	padding: 17px 36px;
	border: var(--stroke-width-1, 1px) solid var(--color-gold-600, #c29b40) !important;
	border-radius: 0;
	background-color: var(--color-gold-600, #c29b40) !important;
	background-image: none !important;
	box-shadow: none;
	color: var(--color-navy-900, #001731) !important;
	font-family: inherit;
	font-size: var(--size-13, 13px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: var(--letter-spacing-1-4, 1.4px);
	text-transform: uppercase;
	text-shadow: none;
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.beon-ps .beon-ps__nav .beon-ps__weiter:hover,
.beon-ps .beon-ps__nav .beon-ps__senden:hover,
.beon-ps .beon-ps__nav .beon-ps__weiter:focus-visible,
.beon-ps .beon-ps__nav .beon-ps__senden:focus-visible {
	border-color: var(--color-gold-700, #b28e3b) !important;
	background-color: var(--color-gold-700, #b28e3b) !important;
	color: var(--color-navy-900, #001731) !important;
}

/* "Zurück" bleibt zurückhaltend: nur Text mit Linie beim Zeigen. */
.beon-ps .beon-ps__nav .beon-ps__zurueck {
	padding: 17px 0;
	border: 0 !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none;
	color: var(--color-navy-900, #001731) !important;
	font-family: inherit;
	font-size: var(--size-13, 13px);
	font-weight: 500;
	letter-spacing: var(--letter-spacing-1-4, 1.4px);
	text-transform: uppercase;
	cursor: pointer;
	transition: color 200ms ease;
}

.beon-ps .beon-ps__nav .beon-ps__zurueck:hover,
.beon-ps .beon-ps__nav .beon-ps__zurueck:focus-visible {
	color: var(--color-gold-700, #b28e3b) !important;
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/*
 * Steht mit Bedacht NACH den Button-Regeln und mit dem Elementtyp im
 * Selektor: Die Regeln oben setzen display:inline-flex und haben dieselbe
 * Gewichtung wie ein reines [hidden] - der Absende-Button blieb dann in
 * Schritt 1 und 2 sichtbar, obwohl das Script ihn versteckt hatte.
 */
.beon-ps .beon-ps__nav button[hidden] {
	display: none;
}

.beon-ps .beon-ps__nav button:focus {
	outline: none;
}

.beon-ps .beon-ps__nav button:focus-visible {
	outline: var(--stroke-width, 2px) solid var(--color-navy-900, #001731);
	outline-offset: 3px;
}

/* ====================================================================== *
 * Erfolgsmeldung
 * ====================================================================== */

/*
 * Nach dem Absenden ersetzt das Plugin das Formular durch eine Meldung mit
 * den Bootstrap-Klassen .alert.alert-success.
 */
.beon-ps .alert-success {
	margin: 0;
	padding: var(--abstand-lg, 26px);
	border: 0;
	border-left: 3px solid var(--color-gold-600, #c29b40);
	border-radius: 0;
	background-color: var(--color-gray-300, #f2f2f2);
	color: var(--color-navy-900, #001731);
	font-size: var(--size-16, 16px);
}

/* ====================================================================== *
 * Schmale Bildschirme
 * ====================================================================== */

/*
 * Ab hier wird das Zwölfer-Raster zu vier Spalten, und jedes Feld nimmt die
 * ganze Breite. Feine Abstufungen wie "zwei Zwölftel" ergeben auf dem Handy
 * keinen Sinn - dort ist jede Angabe eine Zeile.
 */
@media (max-width: 767px) {
	.beon-ps .row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--abstand-md, 18px);
	}

	.beon-ps .row > .form-group,
	.beon-ps .row > .form-group:has([name^="client_salutation"]),
	.beon-ps .row > .form-group:has([name^="client_academic_title"]),
	.beon-ps .row > .form-group:has([name^="client_zip_code"]),
	.beon-ps .row > .form-group:has([name^="client_city"]),
	.beon-ps .row > .form-group:has([name^="client_country"]),
	.beon-ps .row > .form-group:has([name^="client_first_name"]),
	.beon-ps .row > .form-group:has([name^="client_last_name"]),
	.beon-ps .row > .form-group:has([name^="client_phone"]),
	.beon-ps .row > .form-group:has([name^="client_street"]),
	.beon-ps .row > .form-group:has([name^="client_email"]),
	.beon-ps .row > .form-group:has([name^="query_marketing_type"]),
	.beon-ps .row > .form-group:has([name^="query_rs_types"]),
	.beon-ps .row > .form-group:has([name^="query_rs_categories"]),
	.beon-ps .row > .form-group:has([name^="query_locations"]) {
		grid-column: 1 / -1;
	}

	/* Nur die Nummern - drei Titel nebeneinander wären nicht mehr lesbar. */
	.beon-ps .beon-ps__step-titel {
		display: none;
	}

	.beon-ps .beon-ps__step {
		flex: 0 0 auto;
	}

	.beon-ps .beon-ps__step + .beon-ps__step::before {
		flex: 0 0 26px;
		margin: 0 10px;
	}

	.beon-ps .beon-ps__nav .beon-ps__weiter,
	.beon-ps .beon-ps__nav .beon-ps__senden {
		flex: 1 1 auto;
		margin-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.beon-ps .beon-ps__step-nr,
	.beon-ps .form-control,
	.beon-ps .beon-ps__chip,
	.beon-ps .beon-ps__chip::before,
	.beon-ps .beon-ps__nav button,
	.beon-ps .form-check input[type="checkbox"] {
		transition: none;
	}
}

/* ====================================================================== *
 * Auswahllisten (bootstrap-select)
 * ====================================================================== */

/*
 * Fünf Felder des Formulars sind Auswahllisten - Anrede, Vermarktungsart,
 * Objekttyp, Objektarten sowie Ort und Region. Das Plugin verwandelt sie per
 * bootstrap-select in ein Button-Menü: Aus dem select wird ein
 * div.bootstrap-select mit einem button darin, das eigentliche Feld wandert
 * unsichtbar hinein.
 *
 * Ohne diese Regeln behielten genau diese Felder ihren Bootstrap-Kasten,
 * während alle anderen nur eine Unterlinie haben - der auffälligste
 * Stilbruch, den das Formular haben könnte.
 *
 * Die Selektoren sind bewusst lang: bootstrap-select bringt eigene Regeln mit
 * mehreren Klassen mit, und sein Stylesheet lädt nach diesem.
 */

/*
 * Der doppelte Unterstrich.
 *
 * bootstrap-select kopiert beim Aufbau ALLE Klassen des select auf seinen
 * eigenen Container - also auch form-control. Damit bekam der Container die
 * Unterlinie aus der Feldregel weiter oben, und der Button darin bekam seine
 * eigene: zwei Linien übereinander.
 *
 * Deshalb wird der Container hier ausdrücklich zurückgesetzt. Die Klasse
 * form-control steht mit im Selektor, damit die Regel die Feldregel auch
 * gewichtsmässig überstimmt.
 */
.beon-ps .bootstrap-select,
.beon-ps .bootstrap-select.form-control {
	width: 100% !important;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.beon-ps .bootstrap-select > .dropdown-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--abstand-sm, 8px);
	width: 100%;
	height: auto;
	margin: 0;
	padding: 8px 2px;
	border: 0;
	border-bottom: var(--stroke-width-1, 1px) solid var(--color-gray-400, #d6d6d6);
	border-radius: 0;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	color: var(--color-navy-900, #001731);
	font-family: inherit;
	font-size: var(--size-16, 16px);
	font-weight: 400;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	text-shadow: none;
	transition: border-color 200ms ease;
}

.beon-ps .bootstrap-select > .dropdown-toggle:hover,
.beon-ps .bootstrap-select.open > .dropdown-toggle {
	border-bottom-color: var(--color-navy-900, #001731);
	background-color: transparent;
	color: var(--color-navy-900, #001731);
}

.beon-ps .bootstrap-select > .dropdown-toggle:focus {
	outline: none !important;
	border-bottom-color: var(--color-gold-600, #c29b40);
	box-shadow: 0 1px 0 0 var(--color-gold-600, #c29b40);
}

/* Noch nichts gewählt: Beschriftung zurückgenommen. */
.beon-ps .bootstrap-select > .dropdown-toggle.bs-placeholder,
.beon-ps .bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option-inner-inner {
	color: var(--color-gray-500, #5b5b5b);
}

.beon-ps .bootstrap-select .filter-option {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * Bootstraps .caret ist ein Border-Dreieck. Es wird zurückgesetzt und als
 * Chevron neu gezeichnet - gleiche Form wie in der Filterleiste des Archivs.
 */
.beon-ps .bootstrap-select .bs-caret {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.beon-ps .bootstrap-select .bs-caret .caret {
	position: static;
	width: 0.42em;
	height: 0.42em;
	margin: -0.2em 0 0;
	border: 0;
	border-right: var(--stroke-width, 2px) solid var(--color-gold-600, #c29b40);
	border-bottom: var(--stroke-width, 2px) solid var(--color-gold-600, #c29b40);
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 200ms ease;
}

.beon-ps .bootstrap-select.open .bs-caret .caret {
	transform: rotate(-135deg);
	margin-top: 0.14em;
}

/* --- Die aufgeklappte Liste ------------------------------------------- */

.beon-ps .bootstrap-select .dropdown-menu {
	margin: 4px 0 0;
	padding: 0;
	border: var(--stroke-width-1, 1px) solid var(--color-gray-300, #f2f2f2);
	border-radius: 0;
	background-color: #fff;
	box-shadow: 0 12px 28px rgba(0, 10, 25, 0.14);
}

.beon-ps .bootstrap-select .dropdown-menu .inner {
	padding: 0;
}

.beon-ps .bootstrap-select .dropdown-menu li a {
	padding: 10px 16px;
	color: var(--color-navy-900, #001731);
	font-size: var(--size-14, 14px);
	white-space: normal;
}

.beon-ps .bootstrap-select .dropdown-menu li a:hover,
.beon-ps .bootstrap-select .dropdown-menu li a:focus {
	background-color: var(--color-gray-300, #f2f2f2);
	color: var(--color-navy-900, #001731);
}

.beon-ps .bootstrap-select .dropdown-menu li.selected a,
.beon-ps .bootstrap-select .dropdown-menu li.active a {
	background-color: var(--color-navy-900, #001731);
	color: #fff;
}

/* Häkchen der Mehrfachauswahl in Gold, solange die Zeile nicht aktiv ist. */
.beon-ps .bootstrap-select .dropdown-menu li a .check-mark {
	color: var(--color-gold-600, #c29b40);
}

.beon-ps .bootstrap-select .dropdown-menu li.selected a .check-mark,
.beon-ps .bootstrap-select .dropdown-menu li.active a .check-mark {
	color: #fff;
}

/* Gruppentitel in den Listen "Objektarten" und "Ort und Region". */
.beon-ps .bootstrap-select .dropdown-menu .dropdown-header {
	padding: 10px 16px 4px;
	color: var(--color-gold-700, #b28e3b);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--letter-spacing-1, 1px);
	text-transform: uppercase;
}

/* Suchfeld innerhalb langer Listen (Ort und Region). */
.beon-ps .bootstrap-select .bs-searchbox {
	padding: 12px;
	border-bottom: var(--stroke-width-1, 1px) solid var(--color-gray-300, #f2f2f2);
}

.beon-ps .bootstrap-select .bs-searchbox .form-control {
	height: auto;
	padding: 9px 11px;
	border: var(--stroke-width-1, 1px) solid var(--color-gray-400, #d6d6d6);
	box-shadow: none;
	font-size: var(--size-14, 14px);
}

.beon-ps .bootstrap-select .bs-searchbox .form-control:focus {
	border-color: var(--color-gold-600, #c29b40);
	box-shadow: none;
}

/* Die Schaltfläche "markierte auswählen" am Fuß der Mehrfachauswahl. */
.beon-ps .bootstrap-select .bs-donebutton .btn {
	border: 0 !important;
	border-radius: 0;
	background-color: var(--color-gold-600, #c29b40) !important;
	color: var(--color-navy-900, #001731) !important;
	font-size: var(--size-13, 13px);
	letter-spacing: var(--letter-spacing-1-4, 1.4px);
	text-transform: uppercase;
}