/*
 * Bewerbungsseiten: unser Rahmen und das Formular von zvoove.
 *
 * Das Bewerbungs-Widget bringt – anders als das Initiativbewerbungs-Widget –
 * **kein** Stylesheet mit. Es rendert nacktes Markup in den Seiteninhalt und
 * überlässt die Gestaltung der Website. Ohne die Regeln hier stehen Felder,
 * Knöpfe und Fehlermeldungen im Browser-Standard.
 *
 * Die Klassennamen (`rn…`) stammen aus dem ausgelieferten Widget-Bundle. Sie
 * sind nicht dokumentiert und können sich ohne Ankündigung ändern – deshalb
 * greift jede Regel möglichst flach und nichts bricht, wenn eine Klasse
 * verschwindet: Dann sieht das Feld aus wie vorher, nicht kaputt.
 *
 * Werte entsprechen dem Kontaktformular der Website (Child-Theme,
 * Gravity-Forms-Block): weiße Felder ohne Rahmen, Radius 20px, orange
 * Knöpfe als Pille mit Hover ins Teal.
 */

/* ---------- Aufteilung: Formular links, Kontextspalte rechts ---------- */

/*
 * Wie Übersicht und Detailseite. Die Spalte steht im Quelltext vorne und
 * wird hier nach rechts gesetzt – auf dem Handy liegt sie damit über dem
 * Formular. Man sieht zuerst, worauf man sich bewirbt, und nicht erst nach
 * zwanzig Eingabefeldern.
 */
.ls-widget .ls-widget__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20em;
	gap: 2.4em;
	align-items: start;
}

.ls-widget .ls-widget__main {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
}

.ls-widget .ls-widget__aside {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 1.3em;
	min-width: 0;
}

/* Anheften nur auf hohen Fenstern – dieselbe Begründung wie auf der
   Detailseite: Eine Spalte, die höher ist als das Fenster, klebt oben und
   ihr unteres Ende bleibt für immer abgeschnitten. */
@media (min-height: 62em) {
	.ls-widget .ls-widget__aside {
		position: sticky;
		top: 7em;
	}
}

/* ---------- Kästen der Spalte ---------- */

.ls-widget .ls-widget__card-kicker {
	margin: 0 0 .3em;
	color: var(--ls-accent);
	font-size: .95em;
	font-weight: 500;
}

/* Versalien in der Akzentfarbe: die Hausschrift der Abschnittsüberschriften
   der Website. Bei 1.4em fett gilt die 3:1-Grenze, die #0099a4 auf Weiß mit
   3,45:1 einhält. */
.ls-widget .ls-widget__stelle-titel {
	margin: 0 0 .7em;
	color: var(--ls-text);
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
}

.ls-widget .ls-widget__fakt {
	display: flex;
	align-items: flex-start;
	gap: .6em;
	margin: 0 0 .55em;
	color: var(--ls-text);
	font-size: .95em;
	line-height: 1.5;
}

.ls-widget .ls-widget__gehalt {
	margin: 1em 0 0;
	padding-top: .9em;
	border-top: 1px solid var(--ls-line);
}

.ls-widget .ls-widget__gehalt-betrag {
	display: block;
	color: var(--ls-text);
	font-size: 1.3em;
	font-weight: 700;
	line-height: 1.25;
}

.ls-widget .ls-widget__gehalt-bezug {
	display: block;
	margin-top: .1em;
	color: var(--ls-muted);
	font-size: .9em;
	line-height: 1.4;
}

.ls-widget .ls-widget__zurueck {
	margin: 1em 0 0;
	font-size: .95em;
}

.ls-widget .ls-widget__zurueck a {
	color: var(--ls-accent);
	font-weight: 600;
}

/* ---------- Ohne gültige Stelle ---------- */

/* Der Leerzustand von /bewerbung/ benutzt denselben Kasten wie die Danke-
   und Fehlerseiten – siehe „Danke- und Fehlerseiten" weiter unten. Hier
   steht nur noch der Abstand nach oben. */
.ls-widget--leer {
	padding-top: .5em;
}

/* ---------- Abschnitte des Formulars ---------- */

/*
 * Der Browser-Standardrahmen um `fieldset` muss in beiden Formularen weg.
 */
.ls-widget fieldset {
	margin: 0 0 2.2em;
	padding: 0;
	border: none;
}

.ls-widget fieldset:last-of-type {
	margin-bottom: 0;
}

/*
 * Die Hausschrift für Abschnittsüberschriften gilt nur im **Bewerbungs**-
 * Widget (`.rnFormWrapper`): Dort gliedert `legend` echte Abschnitte,
 * „Persönliche Informationen" und „Überprüfen und senden".
 *
 * Das Initiativbewerbungs-Widget benutzt `legend` dagegen für ein einzelnes
 * Feld – „Handynummer" stand dadurch als große Versalienüberschrift mitten
 * zwischen zwei Eingabefeldern. Ungescopt trifft die Regel beide Formulare;
 * die beiden Widgets teilen sich kein einziges Klassenvokabular.
 */
.ls-widget .rnFormWrapper legend {
	display: block;
	float: none;
	width: 100%;
	margin: 0 0 1em;
	padding: 0;
}

/* ---------- Überschrift des Formulars ---------- */

.ls-widget .rnVacancyTitle {
	margin: 0 0 1.5em;
	color: var(--ls-text);
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.3;
}

.ls-widget .rnTitlePrefix {
	display: block;
	color: var(--ls-muted);
	font-size: .8em;
	font-weight: 500;
}

.ls-widget .rnIntroduction {
	margin-bottom: 1.4em;
	color: var(--ls-muted);
}

/* ---------- Felder ---------- */

.ls-widget .rnFieldList,.ls-widget .rnFields {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ls-widget .rnField,.ls-widget .rnFormGroup {
	margin: 0 0 1.2em;
}

.ls-widget .rnLabel,.ls-widget label {
	display: block;
	margin-bottom: .35em;
	color: var(--ls-text);
	font-size: .95em;
	font-weight: 600;
}

/*
 * Pflichtfeld.
 *
 * Das Widget hängt die Klasse `required` an das **ganze** Beschriftungs-Span,
 * nicht an ein Sternchen. Sie einzufärben macht jede Pflichtbeschriftung
 * orange – die halbe Seite sah aus wie eine Fehlermeldung. Also ein
 * Sternchen anhängen und die Schrift in Ruhe lassen.
 */
.ls-widget .rnLabel .required::after {
	content: " *";
	color: var(--ls-button-bg);
	font-weight: 700;
}

.ls-widget input[type="text"],.ls-widget input[type="email"],.ls-widget input[type="tel"],.ls-widget input[type="number"],.ls-widget input[type="date"],.ls-widget select,.ls-widget textarea,.ls-widget .rnFormControl {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: .65em 1.1em;
	border: none;
	border-radius: var(--ls-field-radius);
	background-color: var(--ls-field-bg);
	box-shadow: inset 0 0 0 1px var(--ls-line);
	color: var(--ls-text);
	font: inherit;
	font-size: 1em;
	line-height: 1.5;
}

.ls-widget textarea {
	min-height: 8em;
	border-radius: 14px;
	resize: vertical;
}

.ls-widget input:focus,.ls-widget select:focus,.ls-widget textarea:focus {
	box-shadow: inset 0 0 0 1px var(--ls-accent), 0 0 0 3px rgba(0, 153, 164, .15);
	outline: none;
}

/* Kästchen und Auswahlknöpfe tragen ebenfalls `rnFormControl`. Ohne diese
   Regel bekämen sie Feldbreite, Polsterung und Rundung ab. */
.ls-widget input[type="checkbox"],.ls-widget input[type="radio"] {
	width: auto;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.ls-widget .rnRadioboxList {
	display: flex;
	flex-wrap: wrap;
	gap: .4em 1.4em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ls-widget .rnRadioboxList label,.ls-widget .rnRadiobox {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	margin: 0;
	font-weight: 400;
}

/*
 * Kästchen-Felder: Beschriftung neben das Kästchen, nicht darüber.
 *
 * Das Widget rendert erst die Beschriftung als Block, darunter das Kästchen –
 * die Einwilligung stand dadurch über einem verwaisten Kästchen. `:has()`
 * dreht das um. Browser ohne `:has()` bekommen die ursprüngliche Anordnung:
 * untereinander, aber bedienbar.
 */
.ls-widget .rnField:has(.rnCheckbox) {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: .7em;
}

.ls-widget .rnField:has(.rnCheckbox) > .rnLabel {
	order: 2;
	margin: 0;
	font-weight: 400;
	line-height: 1.5;
}

.ls-widget .rnField:has(.rnCheckbox) > .rnFieldWrap {
	order: 1;
	flex: 0 0 auto;
	margin-top: .15em;
}

/* Telefonfeld: Länderwahl und Nummer nebeneinander. */
.ls-widget .rnInternationalPhone,.ls-widget .rnPhone {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	align-items: center;
}

.ls-widget .rnPhoneCountry,.ls-widget .rnPhonePrefix {
	flex: 0 0 auto;
}

.ls-widget .rnPhoneCountry select {
	width: auto;
	min-width: 10em;
}

.ls-widget .rnPhoneNumberInput {
	flex: 1 1 10em;
	min-width: 0;
}

/*
 * Dateiauswahl.
 *
 * Aufbau des Widgets: ein Kasten mit Dateiname, einem **dekorativen** Span
 * „Datei auswählen" und dem echten `input[type=file]` daneben. Wer den Span
 * wie einen Knopf gestaltet und das Feld stehen lässt, bekommt zwei Knöpfe
 * nebeneinander – einen, der nichts tut, und den des Browsers. Genau das war
 * hier der Fall.
 *
 * Richtig: Das echte Feld deckt den ganzen Kasten ab und ist unsichtbar. Ein
 * Klick irgendwo im Kasten öffnet die Dateiauswahl, die Tastaturbedienung
 * bleibt am echten Feld.
 */
.ls-widget .rnFileUpload {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: .8em;
	align-items: center;
	padding: .9em 1.1em;
	border: 1px dashed var(--ls-line);
	border-radius: var(--ls-field-radius);
	background: var(--ls-soft-bg);
}

.ls-widget .rnFileUpload:focus-within {
	border-color: var(--ls-accent);
	border-style: solid;
	box-shadow: 0 0 0 3px rgba(0, 153, 164, .15);
}

.ls-widget .rnFilename {
	order: 2;
	color: var(--ls-muted);
	font-size: .95em;
}

.ls-widget .rnFileUpload .rnAction {
	order: 1;
	flex: 0 0 auto;
	padding: .5em 1.4em;
	border-radius: var(--ls-button-radius);
	background: var(--ls-field-bg);
	box-shadow: inset 0 0 0 2px var(--ls-text);
	color: var(--ls-text);
	font-size: .95em;
	font-weight: 700;
	line-height: 1.4;
}

.ls-widget .rnFileUpload input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: none;
	border-radius: var(--ls-field-radius);
	background: none;
	box-shadow: none;
	opacity: 0;
	cursor: pointer;
}

/* ---------- Hinweise und Fehler ---------- */

.ls-widget .rnHint,.ls-widget .rnHelpText,.ls-widget .rnDescription {
	margin-top: .3em;
	color: var(--ls-muted);
	font-size: .9em;
}

.ls-widget .rnErrors,.ls-widget .rnErrorContainer {
	margin-top: .35em;
	color: #b3261e;
	font-size: .9em;
}

/*
 * Die Datenschutz-Einwilligung.
 *
 * Seit zvoove am 13.10.2026 die Zustimmungsfelder getrennt hat, nutzt das
 * Bewerbungsformular dafür den eigenen Feldtyp `PrivacyStatement`. Dessen
 * Container umschließt **nur das Kästchen**, der Zustimmungstext steht als
 * Beschriftung daneben – angeordnet von der Regel `:has(.rnCheckbox)` weiter
 * oben, genau wie bei der WhatsApp-Zeile darunter.
 *
 * Hier stand vorher eine graue Fläche mit Polsterung und Radius. Die war für
 * das frühere Markup gedacht, in dem Kästchen und Text zusammen im Container
 * lagen. Jetzt umrandete sie ein einzelnes Kästchen: ein freistehender grauer
 * Block von 48 Pixeln Breite neben dem Text – und die zwei Einwilligungen
 * sahen unterschiedlich aus, obwohl sie dasselbe tun.
 *
 * Deshalb keine eigene Fläche mehr. Beide Zeilen werden gleich gesetzt; das
 * Pflichtfeld unterscheidet sich allein durch das Sternchen.
 */
.ls-widget .rnPrivacyStatement {
	font-size: inherit;
}

.ls-widget .rnPrivacyStatement label {
	display: flex;
	align-items: flex-start;
	gap: .7em;
	margin: 0;
	font-weight: 400;
}

.ls-widget .rnPrivacyStatement a {
	color: var(--ls-accent);
}

/*
 * Das WhatsApp-Logo in der zweiten Einwilligung.
 *
 * Kommt als Bild mitten im Beschriftungstext, mit fest eingebauten
 * Stilangaben. Ohne Zutun rutscht es aus der Zeile. Etwas kleiner gesetzt
 * passt es in den meisten Breiten neben den Text, statt allein umzubrechen.
 */
.ls-widget .rnLabel img,
.ls-widget .rnPrivacyStatement img {
	margin-top: 0 !important;
	vertical-align: middle !important;
	max-width: 88px;
	height: auto;
}

/* ---------- Knöpfe ---------- */

/* `.rnAction` steht hier bewusst nicht: Diese Klasse trägt im Widget nur der
   dekorative Span der Dateiauswahl, kein Bedienelement. */
.ls-widget button,.ls-widget .rnButton,.ls-widget input[type="submit"] {
	display: inline-block;
	padding: .85em 2.2em;
	border: none;
	border-radius: var(--ls-button-radius);
	background: var(--ls-button-bg);
	color: var(--ls-button-text);
	font: inherit;
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
}

.ls-widget button:hover,.ls-widget button:focus,.ls-widget .rnButton:hover,.ls-widget .rnButton:focus {
	background: var(--ls-button-hover);
	color: var(--ls-button-text);
}

/* „Zurück" ist keine Hauptaktion – ruhiger setzen. */
.ls-widget .rnPrev {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--ls-line);
	color: var(--ls-text);
}

.ls-widget .rnPrev:hover,.ls-widget .rnPrev:focus {
	background: var(--ls-soft-bg);
	color: var(--ls-text);
}

.ls-widget .rnButtons,.ls-widget .rnPrevNextContainer {
	display: flex;
	flex-wrap: wrap;
	gap: .7em;
	margin-top: 1.8em;
}

/* Unter rund 62em ist für zwei Spalten kein Platz. Die Spalte steht im
   Quelltext vorne, rutscht also von selbst über das Formular. */
@media (max-width: 62em) {
	.ls-widget .ls-widget__layout {
		display: block;
	}

	.ls-widget .ls-widget__aside {
		position: static;
		display: block;
		margin-bottom: 2.2em;
	}

	.ls-widget .ls-widget__card + .ls-widget__card {
		margin-top: 1.3em;
	}
}

@media (max-width: 480px) {
	.ls-widget button,.ls-widget .rnButton {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* Hinweis für Besucher ohne JavaScript. Ohne den bliebe die Seite leer –
   die Formulare sind Custom Elements und erscheinen dann gar nicht. */
.ls-widget .ls-widget__noscript {
	padding: 1.2em 1.5em;
	border-left: 4px solid var(--ls-button-bg);
	border-radius: 0 12px 12px 0;
	background: var(--ls-soft-bg);
}

.ls-widget .ls-widget__noscript p {
	margin: 0;
}

.ls-widget .ls-widget__noscript p + p {
	margin-top: .4em;
}

.ls-widget .ls-widget__noscript a {
	color: var(--ls-accent);
}

/* ---------- Danke- und Fehlerseiten ---------- */

/*
 * Motivkompass: BEWAHRER. Nach dem Absenden ist der Moment für Bestätigung
 * und Ruhe, nach einem Fehlschlag für einen Weg zurück. Deshalb ein ruhiger
 * Kasten statt Fließtext auf weißer Fläche – und ein Zeichen, das den
 * Ausgang auf einen Blick sagt.
 *
 * Der Text im Kasten kommt aus dem Seiteneditor und gehört dem Kunden.
 */
/* Breite bleibt seine eigene Sache – Polsterung und Fläche kommen aus
   .ls-panel--gross. */
.ls-status .ls-status__card {
	max-width: 34em;
}

.ls-status .ls-status__zeichen {
	margin: 0 0 .8em;
	line-height: 1;
}

.ls-status .ls-icon {
	width: 2.6em;
	height: 2.6em;
	margin: 0;
	stroke-width: 1.8;
}

.ls-status--danke .ls-icon {
	color: var(--ls-accent);
}

.ls-status--fehler .ls-icon {
	color: var(--ls-button-bg);
}

.ls-status .ls-status__stelle {
	margin: 0 0 .5em;
	color: var(--ls-muted);
	font-size: .95em;
	line-height: 1.5;
}

.ls-status .ls-status__stelle strong {
	color: var(--ls-text);
}

/* Die Überschrift des Kunden steht als h2 im Seitentext. */
.ls-status .ls-status__text > :first-child {
	margin-top: 0;
}

.ls-status .ls-status__text > :last-child {
	margin-bottom: 0;
}

.ls-status .ls-status__text p {
	margin: 0 0 .9em;
}

.ls-status .ls-status__text a {
	color: var(--ls-accent);
}

.ls-status .ls-status__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: .9em 1.4em;
	align-items: center;
	margin: 1.6em 0 0;
	padding-top: 1.4em;
	border-top: 1px solid var(--ls-line);
}

.ls-status .ls-status__button {
	display: inline-block;
	padding: .85em 2em;
	border-radius: var(--ls-button-radius);
	background: var(--ls-button-bg);
	color: var(--ls-button-text);
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}

.ls-status .ls-status__button:hover,.ls-status .ls-status__button:focus {
	background: var(--ls-button-hover);
	color: var(--ls-button-text);
	text-decoration: none;
}

.ls-status .ls-status__link {
	color: var(--ls-accent);
	font-weight: 600;
}

@media (max-width: 480px) {
	.ls-status .ls-status__card {
		padding: 1.6em 1.3em;
	}

	.ls-status .ls-status__button {
		display: block;
		width: 100%;
		text-align: center;
	}
}


/* ---------- „So geht es weiter" ---------- */

/*
 * Steht unter dem Formular, ohne eigenen Knopf. Zwei orange Knöpfe
 * übereinander – unserer und der des Fußbereichs – sahen aus wie ein Fehler.
 * Drei ruhige Schritte trennen sie durch Inhalt statt durch Leere.
 *
 * Motivkompass: BEWAHRER. Wer gerade seinen Lebenslauf hochlädt, fragt sich,
 * wann er etwas hört.
 */
.ls-widget .ls-widget__steps {
	margin: 3em 0 0;
	padding: 2em 2em 2.2em;
	border-radius: var(--ls-panel-radius);
	background: var(--ls-soft-bg);
}

.ls-widget .ls-widget__steps-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.6em;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.ls-widget .ls-widget__step {
	display: flex;
	align-items: flex-start;
	gap: .8em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ls-widget .ls-widget__step-nr {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	border-radius: 100px;
	background: var(--ls-accent);
	color: #ffffff;
	font-size: .95em;
	font-weight: 700;
	line-height: 1;
}

.ls-widget .ls-widget__step-text {
	display: block;
	font-size: .95em;
	line-height: 1.55;
}

.ls-widget .ls-widget__step-text strong {
	display: block;
	margin-bottom: .2em;
	color: var(--ls-text);
	font-weight: 700;
}

.ls-widget .ls-widget__step-text span {
	color: var(--ls-muted);
}

/* Nebeneinander nur, solange drei Spalten lesbar bleiben. */
@media (max-width: 52em) {
	.ls-widget .ls-widget__steps-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.2em;
	}
}

@media (max-width: 30em) {
	.ls-widget .ls-widget__steps {
		padding: 1.6em 1.3em 1.8em;
	}
}

/* ---------- Initiativbewerbungs-Widget (oe_*) ---------- */

/*
 * Dieses Widget bringt ein eigenes Stylesheet mit und benutzt ein völlig
 * anderes Klassenvokabular als das Bewerbungs-Widget: `oe_` statt `rn`. Die
 * beiden teilen sich keine einzige Klasse. Hier steht deshalb nur, was unsere
 * eigenen generischen Regeln dort anrichten – und wie die beiden Formulare
 * trotzdem wie Geschwister aussehen.
 *
 * Klassennamen am 25.09.2026 aus dem gerenderten DOM gelesen.
 */

/*
 * Auswahlknöpfe und Kästchen standen untereinander, jeder auf einer eigenen
 * Zeile. Ursache war unsere eigene Regel `label { display: block }` – das
 * Widget setzt jede Option als `label`. „Herr / Frau / Keine Anrede" braucht
 * keine drei Zeilen.
 */
.ls-widget .oe_radioList,
.ls-widget .oe_checkboxList {
	display: flex;
	flex-wrap: wrap;
	gap: .4em 1.4em;
}

.ls-widget .oe_radioListElement,
.ls-widget .oe_checkboxListElement {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	margin: 0;
	font-weight: 400;
}

.ls-widget .oe_radioListElement .oe_label,
.ls-widget .oe_checkboxListElement .oe_label {
	margin: 0;
	font-weight: 400;
}

/*
 * Die eigene Überschrift des Formulars bleibt weg.
 *
 * Sie lautet „Initiativbewerbung" – wortgleich mit der Seitenüberschrift drei
 * Zentimeter darüber. Zweimal dasselbe Wort untereinander liest sich wie ein
 * Fehler, und die Angabe geht nicht verloren: Die Seitenüberschrift sagt sie
 * bereits.
 *
 * Die saubere Lösung liegt nicht hier, sondern im Cockpit: Wird das Formular
 * dort umbenannt (etwa „Ihre Angaben"), trägt die Überschrift wieder etwas
 * bei und diese Regel kann weg. Verschwindet die Klasse `oe_title` in einer
 * neuen Widget-Fassung, erscheint die Überschrift von selbst wieder – das ist
 * der harmlose Ausgang.
 */
.ls-widget .oe_title {
	display: none;
}

/* Die Kartenauswahl der Niederlassung bekommt denselben Radius wie unsere
   übrigen Flächen, damit sie nicht als Fremdkörper im Formular steht. */
/*
 * Der Absende-Knopf.
 *
 * zvooves eigenes Stylesheet bringt `.oe_widget button{background-color:gray}`
 * mit – dieselbe Spezifität wie unsere Regel `.ls-widget button` (0,1,1).
 * Bei Gleichstand entscheidet die Ladereihenfolge, und ihr Stylesheet wird
 * nach unserem eingebunden. Folge: Der Knopf, mit dem man die Bewerbung
 * abschickt, stand grau mitten in einer orangefarbenen Seite. Die Rundung kam
 * von uns, die Fläche von zvoove – ein Zwitter, den niemand entschieden hat.
 *
 * Auf der Bewerbungsseite fiel das nicht auf: Jenes Widget bringt gar kein
 * Stylesheet mit, dort gibt es nichts, was gewinnen könnte.
 *
 * Mit dem zusätzlichen `.oe_widget` kommen wir auf (0,2,1) und damit über
 * zvooves Regel – ohne !important und ohne auf die Reihenfolge zu wetten.
 */
.ls-widget .oe_widget button {
	background: var(--ls-button-bg);
	color: var(--ls-button-text);
}

.ls-widget .oe_widget button:hover,
.ls-widget .oe_widget button:focus {
	background: var(--ls-button-hover);
	color: var(--ls-button-text);
}

/*
 * Das WhatsApp-Logo in der Einwilligung.
 *
 * Seit der Aufteilung der Zustimmungsfelder (zvoove, 13.10.2026) steht im
 * Feldtext ein Bild mit fest eingebauten Stilangaben:
 * `vertical-align:top; margin-top:-9px; width:100px`. Das hebt es um gut
 * zwanzig Pixel über die Zeile, in der es steht.
 *
 * Inline-Stile schlägt man nur mit !important – sonst müsste zvoove das
 * Markup ändern. Die Regel ist eng auf dieses eine Bild gefasst.
 */
.ls-widget .oe_checkboxListElement img {
	margin-top: 0 !important;
	vertical-align: middle !important;
	max-width: 100px;
	height: auto;
}

.ls-widget .oe_googleMaps {
	overflow: hidden;
	border-radius: var(--ls-field-radius);
}