/**
 * Modul M47 – Bewerbung
 *
 * Entwurf: Karriereseite 68:2286 (Schritt 1), Detailseite 64:1540 (Schritt 3).
 *
 * Zwei Spalten: links Ansprache und Foto, rechts das Formularfeld. Das Feld
 * ist dasselbe Bauteil wie die Stellenzeilen (m46) — Milchglas, weisser
 * Schein —, nur groesser; die Auswahlzeilen darin sind ebenfalls dieselben,
 * inklusive der roten Fassung fuer die getroffene Wahl.
 *
 * Die Maszahlen stammen aus dem Entwurf bei 1920px (Container 1514):
 * Sektionskante -> Kopf 189, Feld 749x802, Inhalt darin 649 breit.
 *
 * Grundgroesse ist 17px, deshalb 1rem = 17px, 0.882rem = 15px,
 * 1.2941rem = 22px, 2.0588rem = 35px.
 */

.m47_bewerbung {
	/* Das Foto laeuft unten aus der Sektion — hier wird es abgeschnitten.
	   `clip` und nicht `hidden`: `hidden` macht die Sektion zu einem
	   Scrollbereich. Der laesst sich zwar nicht von Hand rollen, aber sehr
	   wohl vom Browser — `scrollIntoView()` und `focus()` verschieben beim
	   Schrittwechsel dann den Inhalt IN der Sektion nach oben, und der obere
	   Abstand verschwindet. `clip` beschneidet genauso, ohne Scrollbereich. */
	overflow: hidden;
	overflow: clip;
}

/**
 * Zusaetzlicher Schleier aus 20% Schwarz.
 *
 * Der Entwurf legt ihn in dieser Sektion ueber Grundton, Glut und Koernung
 * (Knoten 68:2015) — der Grundton faellt dadurch von #1B1B1A (27) auf gut 21.
 * Die Sektion "Dein Einstieg bei Aristotherm" darueber hat ihn NICHT, deshalb
 * steht er hier und nicht in `.ari_glut`.
 *
 * Der Schleier ist ein eigenes Element und kein `::before`: `.ari_dunkel`
 * benutzt dieses Pseudoelement bereits fuer die Koernung, und project.css
 * wird nach dem Modul-Stylesheet geladen — die Regel hier wuerde also
 * verlieren.
 *
 * `.ari_glut::after` liegt auf z-index -1, der Schleier auf 0 darueber, und
 * `.ari_dunkel > .mM_container` steht mit z-index 1 ueber beidem. Das Foto
 * liegt im Container und damit ueber dem Schleier — wie im Entwurf.
 */
.m47_bewerbung .m47_schleier {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		/* Der Schleier selbst. */
		linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)),
		/* Und die Vignette: eine Ellipse, die genau in die Sektion passt —
		   in der Mitte durchsichtig, an der Kante voll im Grundton. Sie
		   blendet Punktraster, Glut UND Koernung zu den Raendern hin aus.
		   Ohne sie stehen die Punkte bis in die Ecken (gemessen Amplitude 12
		   statt 1) und der rote Schein bekommt keinen Rand, an dem er
		   ausklingt.

		   `closest-side` ist Pflicht: ohne Groessenangabe legt CSS den
		   100-%-Halt an die ECKE, die Ellipse waere dann um Wurzel 2 zu gross
		   und die Vignette griffe erst gar nicht. */
		radial-gradient(ellipse closest-side at 50% 50%,
			rgba(27, 27, 26, 0) 0%, var(--flaeche_dunkel) 100%);
	pointer-events: none;
}

.m47_bewerbung .m47_raster {
	position: relative;
	display: grid;
	/* 593 : 749 ist das Verhaeltnis aus dem Entwurf. Als fr-Anteile
	   geschrieben, damit beide Spalten zusammen schmaler werden statt dass
	   eine von beiden den Rest frisst. */
	grid-template-columns: minmax(0, 593fr) minmax(0, 749fr);
	gap: 172px;

	/* Der Entwurf setzt den Kopf 189px unter die Sektionskante. Der
	   Standardabstand (--modul_abstand) bringt 124 davon mit, der Rest
	   haengt hier — so bleibt der ACF-Abstand weiter wirksam. */
	margin-top: 65px;
}

/* --- Linke Spalte ------------------------------------------------------- */

.m47_bewerbung .m47_kopf {
	margin: 0;
}

.m47_bewerbung .m47_kopf h1,
.m47_bewerbung .m47_kopf h2,
.m47_bewerbung .m47_kopf h3 {
	margin-bottom: 0;
	color: #FFFFFF;
}

.m47_bewerbung .m47_text {
	margin-top: 30px;
	font-size: 1rem;
	line-height: 20px;
	color: rgba(255, 255, 255, .5);
}

/* Der Parent faerbt ueber `* { color: var(--font_color) }` alles neu — die
   Farbe muss deshalb an den Elementen selbst haengen, nicht nur am Kasten. */
.m47_bewerbung .m47_text p,
.m47_bewerbung .m47_text li {
	margin: 0 0 40px;
	font-size: 1rem;
	line-height: 20px;
	color: rgba(255, 255, 255, .5);
}

.m47_bewerbung .m47_text > *:last-child {
	margin-bottom: 0;
}

.m47_bewerbung .m47_person {
	margin: 20px 0 0;
	font-size: 1rem;
	line-height: 20px;
	color: #FFFFFF;
}

.m47_bewerbung .m47_person_name {
	font-weight: 700;
	color: #FFFFFF;
}

.m47_bewerbung .m47_person_strich {
	margin: 0 6px;
	color: #FFFFFF;
}

.m47_bewerbung .m47_person_rolle {
	color: #FFFFFF;
}

.m47_bewerbung .m47_links_container {
	margin-top: 26px;
}

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

.m47_bewerbung .m47_bild {
	position: absolute;
	top: 349px;
	left: 144px;
	width: 470px;
	max-width: 100%;
	height: auto;
	/* Hinter dem Text, damit die Schaltflaeche daneben klickbar bleibt. */
	z-index: 0;
	pointer-events: none;
}

.m47_bewerbung .m47_ansprache,
.m47_bewerbung .m47_feld {
	position: relative;
	z-index: 1;
}

/* --- Formularfeld ------------------------------------------------------- */

.m47_bewerbung .m47_feld .wpcf7 {
	margin: 0;
}

.m47_bewerbung .ari_bew {
	display: flex;
	flex-direction: column;
	min-height: 802px;
	/* 49 statt 50: der 1px-Rahmen zaehlt im Entwurf zur Kante. */
	padding: 0 49px 42px;

	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 5px;
	background-color: rgba(255, 255, 255, .1);
	-webkit-backdrop-filter: blur(3.5px);
	backdrop-filter: blur(3.5px);
	box-shadow: 0 4px 100px 10px rgba(255, 255, 255, .1);
}

/* --- Fortschritt -------------------------------------------------------- */

/**
 * Der Balken liegt auf der oberen Kante des Feldes — oben also gerade,
 * unten rund (Entwurf 68:2028, Spur #515150).
 *
 * Die Fuellung laeuft rechts NICHT gerade aus, sondern in derselben Rundung
 * wie der Fortschrittsbalken des Leistungs-Sliders auf der Startseite: die
 * obere Kante reicht weiter als die untere. Die Form steht als
 * --ari_balken_spitze in der project.css, damit beide Balken dieselbe
 * benutzen. Ihre Breite waechst mit der Hoehe mit (6px x 0.9615 = 5.769),
 * sonst wuerde sie flachgezogen.
 */
.m47_bewerbung .ari_bew_lauf {
	position: relative;
	flex: none;
	width: 100%;
	height: 6px;
	border-radius: 0 0 5px 5px;
	background-color: #515150;
}

.m47_bewerbung .ari_bew_lauf_fuellung {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	/* Startwert ohne JavaScript: Schritt 1 von 3. */
	width: 33.3333%;

	/* Der Schein gehoert an dieses Element, die Form an die Pseudoelemente
	   darunter: ein Beschnitt am Element selbst wuerde nach dem Filter
	   greifen und den Schein gleich wieder wegschneiden. Chrome nimmt den
	   Wert bei drop-shadow als Standardabweichung — der Entwurf hat
	   `0 0 15px 3px`, das entspricht rund 7.5 plus Streuung. */
	filter: drop-shadow(0 0 9px rgba(220, 25, 32, .5));
	transition: width .45s cubic-bezier(.22, .61, .36, 1);

	--ari_bew_spitze: 5.769px;
}

.m47_bewerbung .ari_bew_lauf_fuellung::before {
	content: '';
	position: absolute;
	inset: 0 var(--ari_bew_spitze) 0 0;
	border-radius: 0 0 0 5px;
	background-color: var(--primarbutton_background_color);
}

.m47_bewerbung .ari_bew_lauf_fuellung::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: var(--ari_bew_spitze);
	height: 100%;
	background-color: var(--primarbutton_background_color);
	-webkit-mask: var(--ari_balken_spitze) center / var(--ari_bew_spitze) 100% no-repeat;
	mask: var(--ari_balken_spitze) center / var(--ari_bew_spitze) 100% no-repeat;
}

/* Am Ende ist nichts mehr angeschnitten — die Spur ist voll. */
.m47_bewerbung .ari_bew_lauf_fuellung.is_voll::before {
	inset: 0;
	border-radius: 0 0 5px 5px;
}

.m47_bewerbung .ari_bew_lauf_fuellung.is_voll::after {
	display: none;
}

/* --- Schritte ----------------------------------------------------------- */

/* Ohne JavaScript stehen alle drei Schritte untereinander — das Formular
   bleibt vollstaendig und absendbar. Erst das Skript blendet um und schaltet
   dabei auch die Weiter-/Zurueck-Knoepfe frei. */
.m47_bewerbung .ari_bew_schritt {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.m47_bewerbung .ari_bew_schritt.is_verborgen {
	display: none;
}

.m47_bewerbung .ari_bew_weiter,
.m47_bewerbung .ari_bew_zurueck {
	display: none;
}

.m47_bewerbung .ari_bew.is_geschaltet .ari_bew_weiter,
.m47_bewerbung .ari_bew.is_geschaltet .ari_bew_zurueck {
	display: inline-flex;
}

/* In der festen Fassung (Stellen-Detailseite) gibt es nur den dritten
   Schritt — hinter „Zurueck" laege dort nichts. Der Entwurf zeigt an dieser
   Stelle (64:1519) folgerichtig nur die Absendetaste.

   Die lange Kette ist noetig: die Taste traegt die Parent-Klassen
   `button secondary on_dark`, und project.css wird NACH den Modul-Stylesheets
   geladen. Deren Regel setzt `display: flex` und schlaegt bei gleicher
   Staerke jede kuerzere Fassung hier. */
section.m47_bewerbung.m47_bewerbung_fest .ari_bew_zurueck.button {
	display: none;
}

.m47_bewerbung .ari_bew_zaehler {
	margin: 40px 0 0;
	font-family: var(--font_base);
	font-weight: 400;
	font-size: 1rem;
	line-height: 20px;
	color: #FFFFFF;
}

.m47_bewerbung .ari_bew_kopfzeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 12px;
}

.m47_bewerbung .ari_bew_kopf {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
	font-family: var(--font_extd);
	font-weight: 800;
	font-size: 2.0588rem;
	line-height: 1;
	text-transform: uppercase;
	color: #FFFFFF;
}

.m47_bewerbung .ari_bew_pflicht {
	flex: none;
	margin: 0;
	font-size: 1rem;
	line-height: 20px;
	color: #FFFFFF;
}

.m47_bewerbung .ari_bew_rumpf {
	margin-top: 70px;
}

/* --- Auswahlzeilen (Schritt 1 und 2) ------------------------------------ */

.m47_bewerbung .ari_bew_auswahl {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.m47_bewerbung .ari_bew_zeile {
	position: relative;
	display: flex;
	/* Oben statt mittig: sobald ein Stellentitel umbricht, sass der Kreis
	   neben der LUECKE zwischen den Zeilen statt neben dem Text. Damit
	   einzeilige Zeilen dabei gleich hoch bleiben, ist das senkrechte Polster
	   aus der Zeilenhoehe ausgerechnet: 26 + 2 x 20 + 2px Rahmen = 68, also
	   genau die bisherige Hoehe. Mehrzeilige werden dadurch luftiger. */
	align-items: flex-start;
	gap: 21px;

	min-height: 68px;
	/* 24 statt 25: der Auswahlkreis sitzt im Entwurf auf 1042, also 24 hinter
	   der Kante der Inhaltsspalte (1018). */
	padding: 20px 24px;

	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 5px;
	background-color: rgba(255, 255, 255, .1);

	cursor: pointer;
	transition: border-color .35s, background-color .35s;
}

/* Kein eigenes `backdrop-filter` — im Entwurf hat jede Zeile eines, im
   Browser darf sie keines haben: liegt ein Milchglas IM Milchglas, nimmt
   Chrome die halbdurchsichtige Flaeche des Feldes ein zweites Mal in den
   Hintergrund auf, und die Zeile wird deutlich zu hell (gemessen 91 statt
   67). Der Blur des Feldes wirkt ohnehin schon fuer alles darin. */

/* Ausgeblendete Stellen in Schritt 2: passen nicht zum gewaehlten Einstieg. */
.m47_bewerbung .ari_bew_zeile.is_verborgen {
	display: none;
}

.m47_bewerbung .ari_bew_radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.m47_bewerbung .ari_bew_kreis {
	position: relative;
	flex: none;
	/* Auf die Mitte der ERSTEN Textzeile: (26 - 23) / 2. */
	margin-top: 1.5px;
	width: 23px;
	height: 23px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	transition: border-color .3s, background-color .3s;
}

.m47_bewerbung .ari_bew_kreis::after {
	content: '';
	position: absolute;
	top: 4px;
	left: 4px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background-color: var(--primarbutton_background_color);
	transform: scale(0);
	transition: transform .25s cubic-bezier(.22, .61, .36, 1);
}

.m47_bewerbung .ari_bew_zeile_text {
	/* Stellentitel werden lang. `min-width: 0` erlaubt dem Flexkind, schmaler
	   als sein Inhalt zu werden, `anywhere` bricht notfalls im Wort. */
	min-width: 0;
	/* hyphens zuerst: „Anlagenmechaniker" wird damit an einer Silbe getrennt
	   (die Seite ist `lang="de"`). `anywhere` bleibt als Notnagel darunter —
	   ohne es bricht ein Wortungetuem in Browsern ohne deutsche Trennmuster
	   gar nicht. */
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: anywhere;
	font-family: var(--font_base);
	font-weight: 500;
	font-size: 1.2941rem;
	line-height: 26px;
	color: #FFFFFF;
}

/* Getroffene Wahl — dieselbe rote Fassung wie der Hover der Stellenzeilen
   (Entwurf 68:2200). */
.m47_bewerbung .ari_bew_zeile:has(.ari_bew_radio:checked) {
	border-color: var(--primarbutton_background_color);
	background-color: rgba(220, 25, 32, .2);
	background-image: linear-gradient(180deg, rgba(220, 25, 32, 0) 0%, rgba(220, 25, 32, .1) 100%);
}

.m47_bewerbung .ari_bew_radio:checked ~ .ari_bew_kreis {
	border-color: var(--primarbutton_background_color);
	background-color: rgba(220, 25, 32, .2);
}

.m47_bewerbung .ari_bew_radio:checked ~ .ari_bew_kreis::after {
	transform: scale(1);
}

.m47_bewerbung .ari_bew_radio:focus-visible ~ .ari_bew_kreis {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
	.m47_bewerbung .ari_bew_zeile:hover {
		border-color: rgba(255, 255, 255, .35);
	}

	.m47_bewerbung .ari_bew_zeile:has(.ari_bew_radio:checked):hover {
		border-color: var(--primarbutton_background_color);
	}
}

/* --- Felder (Schritt 3) ------------------------------------------------- */

.m47_bewerbung .ari_bew_gitter {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 59px 50px;
}

.m47_bewerbung .ari_bew_voll {
	grid-column: 1 / -1;
}

.m47_bewerbung .ari_bew_zusatz.is_verborgen {
	display: none;
}

.m47_bewerbung .ari_bew_label {
	display: block;
	font-family: var(--font_base);
	font-weight: 400;
	font-size: .882rem;
	line-height: 18px;
	color: #FFFFFF;
	cursor: pointer;
}

/* CF7 legt um jedes Feld einen eigenen <span>. Der darf die Lage nicht
   veraendern — und muss `static` bleiben, weil das Dateifeld sich sonst an
   ihm statt an `.ari_bew_datei` ausrichtet. */
.m47_bewerbung .ari_bew_feld .wpcf7-form-control-wrap {
	position: static;
	display: block;
	margin-top: 7px;
}

.m47_bewerbung .ari_bew_feld input[type="text"],
.m47_bewerbung .ari_bew_feld input[type="email"],
.m47_bewerbung .ari_bew_feld input[type="tel"] {
	display: block;
	width: 100%;
	height: 33px;
	padding: 0 0 13px;

	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .3);
	border-radius: 0;
	background-color: transparent;

	font-family: var(--font_base);
	font-weight: 400;
	font-size: 1rem;
	line-height: 20px;
	color: #FFFFFF;
	transition: border-color .3s;
}

.m47_bewerbung .ari_bew_feld input::placeholder {
	color: rgba(255, 255, 255, .3);
	opacity: 1;
}

.m47_bewerbung .ari_bew_feld input:focus {
	outline: none;
	border-bottom-color: #FFFFFF;
}

/* Dateifelder: der eigentliche <input type="file"> liegt unsichtbar ueber
   der ganzen Zeile — nur so laesst sich die Beschriftung frei setzen. Der
   sichtbare Text traegt zuerst den Platzhalter und danach den Dateinamen. */
.m47_bewerbung .ari_bew_datei {
	position: relative;
	display: block;
	height: 33px;
	margin-top: 7px;
	padding-bottom: 13px;
	border-bottom: 1px solid rgba(255, 255, 255, .3);
	transition: border-color .3s;
}

.m47_bewerbung .ari_bew_datei .wpcf7-form-control-wrap {
	position: static;
	display: block;
	margin-top: 0;
}

.m47_bewerbung .ari_bew_datei input[type="file"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.m47_bewerbung .ari_bew_datei_text {
	display: block;
	overflow: hidden;
	font-family: var(--font_base);
	font-weight: 400;
	font-size: 1rem;
	line-height: 20px;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: rgba(255, 255, 255, .3);
	pointer-events: none;
}

.m47_bewerbung .ari_bew_datei.is_gefuellt .ari_bew_datei_text {
	color: #FFFFFF;
}

.m47_bewerbung .ari_bew_datei:focus-within {
	border-bottom-color: #FFFFFF;
}

/* --- Weiteres Dokument -------------------------------------------------- */

.m47_bewerbung .ari_bew_mehr {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	align-self: flex-start;
	margin-top: 56px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.m47_bewerbung .ari_bew_mehr.is_verborgen {
	display: none;
}

/* Im Entwurf (64:1531) ist der Kreis eine VOLLE weisse Flaeche mit rotem
   Zeichen — kein Ring wie die Auswahlkreise darueber. */
.m47_bewerbung .ari_bew_mehr_kreis {
	flex: none;
	display: grid;
	place-items: center;
	width: 23px;
	height: 23px;
	border: 0;
	border-radius: 50%;
	background-color: #FFFFFF;
	font-family: var(--font_base);
	font-weight: 400;
	font-size: .882rem;
	line-height: 1;
	color: var(--primarbutton_background_color);
	transition: background-color .3s, color .3s;
}

.m47_bewerbung .ari_bew_mehr_text {
	font-family: var(--font_base);
	font-weight: 400;
	font-size: .882rem;
	line-height: 18px;
	color: #FFFFFF;
}

@media (hover: hover) and (pointer: fine) {
	.m47_bewerbung .ari_bew_mehr:hover .ari_bew_mehr_kreis {
		background-color: var(--primarbutton_background_color);
		color: #FFFFFF;
	}
}

/* --- Absenden ----------------------------------------------------------- */

.m47_bewerbung .ari_bew_leiste {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
	/* Schiebt die Leiste an den unteren Rand des Feldes — im Entwurf sitzt
	   sie in beiden Schritten 42px ueber der Kante. */
	margin-top: auto;
	padding-top: 37px;
}

.m47_bewerbung .ari_bew_leiste > .ari_bew_zurueck {
	margin-right: auto;
}

.m47_bewerbung .ari_bew_knoepfe {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	gap: 20px;
}

/* Die Ladeanzeige von CF7 steht hinter der Schaltflaeche und haelt dort auch
   im Ruhezustand Platz — die Knoepfe stuenden dadurch rund 90px vor der
   rechten Kante, waehrend sie in Schritt 1 und 2 buendig sitzen. Deshalb aus
   dem Fluss genommen und links neben die Knopfgruppe gelegt. */
.m47_bewerbung .ari_bew_leiste .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 100%;
	margin: 0 12px 0 0;
	transform: translateY(-50%);
}

/* Im Entwurf steht die Datenschutzzeile einzeilig neben der Schaltflaeche.
   Der Zurueck-Knopf kommt hier zusaetzlich dazu und nimmt gut 110px — die
   Zeile bricht dadurch auf zwei Zeilen um. Die Schaltflaechen selbst duerfen
   dabei nicht schrumpfen, sonst bricht ihre Beschriftung. */
.m47_bewerbung .ari_bew_schutz {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	margin-right: auto;
}

.m47_bewerbung .ari_bew_leiste .button {
	flex: none;
}

.m47_bewerbung .ari_bew_leiste .mM_button_text {
	white-space: nowrap;
}

.m47_bewerbung .ari_bew_schutz .wpcf7-form-control-wrap,
.m47_bewerbung .ari_bew_schutz .wpcf7-acceptance,
.m47_bewerbung .ari_bew_schutz .wpcf7-list-item,
.m47_bewerbung .ari_bew_schutz .wpcf7-list-item label {
	display: block;
	margin: 0;
}

.m47_bewerbung .ari_bew_schutz input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: none;
	display: block;
	width: 23px;
	height: 23px;
	margin: 0;
	border: 1px solid #FFFFFF;
	border-radius: 3px;
	background-color: transparent;
	cursor: pointer;
	transition: background-color .25s, border-color .25s;
}

.m47_bewerbung .ari_bew_schutz input[type="checkbox"]:checked {
	border-color: var(--primarbutton_background_color);
	background-color: var(--primarbutton_background_color);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5 4.3 7.8 11 1.2' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 10px;
}

.m47_bewerbung .ari_bew_schutz_text {
	font-family: var(--font_base);
	font-weight: 400;
	font-size: .882rem;
	line-height: 18px;
	color: #FFFFFF;
	cursor: pointer;
}

.m47_bewerbung .ari_bew_schutz_text a {
	color: #FFFFFF;
	text-decoration: underline;
}

/* --- Meldungen ---------------------------------------------------------- */

.m47_bewerbung .wpcf7-not-valid-tip {
	display: block;
	margin-top: 8px;
	font-size: .882rem;
	line-height: 16px;
	color: #FF6B6B;
}

.m47_bewerbung .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 14px 20px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 5px;
	font-size: .882rem;
	line-height: 20px;
	color: #FFFFFF;
}

.m47_bewerbung form.sent .wpcf7-response-output {
	border-color: rgba(255, 255, 255, .5);
}

.m47_bewerbung form.invalid .wpcf7-response-output,
.m47_bewerbung form.failed .wpcf7-response-output,
.m47_bewerbung form.aborted .wpcf7-response-output {
	border-color: var(--primarbutton_background_color);
}

/* --- Umbrueche ---------------------------------------------------------- */

@media screen and (max-width: 1399px) {

	.m47_bewerbung .m47_raster {
		gap: 100px;
	}

	.m47_bewerbung .m47_bild {
		left: 90px;
	}

	.m47_bewerbung .ari_bew {
		padding: 0 36px 36px;
	}

	.m47_bewerbung .ari_bew_zeile {
		/* 26 + 2 x 10 + 2px Rahmen = 48. Die Mindesthoehe MUSS mitwandern:
		   bei 68 blieb der Kasten 68 hoch, der Inhalt war nur 48 — und weil
		   die Zeile `align-items: flex-start` hat (Basisregel, damit der Kreis
		   bei umbrechenden Titeln neben dem Text steht), sass alles 20px zu
		   hoch statt mittig. Gemessen bei 1300px: Kreis 13 oben / 33 unten. */
		min-height: 48px;
		padding: 10px 20px;
	}
}

@media screen and (max-width: 1199px) {

	.m47_bewerbung {
		overflow: visible;
	}

	.m47_bewerbung .m47_raster {
		grid-template-columns: minmax(0, 1fr);
		/* Kein Zeilenabstand: die drei Bloecke setzen ihre Abstaende selbst,
		   weil das Foto NEGATIV unter das Formular greifen muss. */
		row-gap: 0;
		column-gap: 60px;
		margin-top: 0;
	}

	/* Reihenfolge: Text, Foto, Formular. Im Quelltext steht das Foto zuletzt
	   (auf dem Schreibtisch liegt es absolut in der linken Spalte); einspaltig
	   soll es zwischen Text und Formular stehen, damit das Formular sich
	   darueberlegen kann. */
	.m47_bewerbung .m47_ansprache { order: 1; }
	.m47_bewerbung .m47_bild      { order: 2; }
	.m47_bewerbung .m47_feld      { order: 3; }

	/* Einspaltig steht das Foto als eigener Block zwischen Text und Formular,
	   und das Formular legt sich darueber — die beiden verschwinden dahinter,
	   statt einfach abgeschnitten zu sein. Das Formular ist Milchglas
	   (`rgba(255,255,255,.1)` + `backdrop-filter`), sie schimmern also
	   verwaschen durch; genau das laesst sie hinter der Scheibe stehen.

	   Das Bild endet dabei GENAU an der Oberkante des Formulars — kein
	   negativer Rand. Eine Ueberlappung waere hier verkehrt: das Formular ist
	   Milchglas (`rgba(255,255,255,.1)` + `backdrop-filter`), die Beine
	   schimmerten verwaschen hindurch, statt verdeckt zu sein. Was nicht
	   hinter der Scheibe liegt, kann auch nicht durchscheinen.

	   Der Anschnitt sitzt ueber `aspect-ratio` und nicht ueber eine feste
	   Hoehe, damit er bei jeder Fensterbreite an derselben Stelle des MOTIVS
	   liegt. 548 / 727 zeigt die oberen 71 % der 1024 Bildpunkte — das ist
	   die halbe Oberschenkelhoehe.

	   Nachgemessen am Alphakanal der Freistellung, nicht geschaetzt: bis
	   Zeile 632 (62 %) sind es zwei zusammenhaengende Silhouetten, ab 656
	   (64 %) vier — dort trennen sich die Beine, das ist der Schritt. Die
	   Fuesse enden bei 97 %, das Knie liegt also auf halber Beinlaenge bei
	   rund 80 %, die Oberschenkelmitte bei 71 %.

	   `object-position` haelt dabei die Oberkante fest. */
	.m47_bewerbung .m47_bild {
		position: static;
		display: block;
		width: 100%;
		max-width: 470px;
		margin-top: 48px;
		margin-bottom: 0;
		aspect-ratio: 548 / 727;
		height: auto;
		object-fit: cover;
		object-position: 50% 0;
	}

	.m47_bewerbung .ari_bew {
		min-height: 0;
	}

	.m47_bewerbung .ari_bew_rumpf {
		margin-top: 50px;
	}

	.m47_bewerbung .ari_bew_leiste {
		padding-top: 50px;
	}
}

@media screen and (max-width: 767px) {

	.m47_bewerbung .ari_bew_gitter {
		gap: 40px 30px;
	}

	.m47_bewerbung .ari_bew_mehr {
		margin-top: 40px;
	}

	.m47_bewerbung .ari_bew_leiste_senden {
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.m47_bewerbung .ari_bew_schutz {
		flex: 1 1 100%;
		margin-right: 0;
	}
}

@media screen and (max-width: 575px) {

	.m47_bewerbung .ari_bew {
		padding: 0 24px 28px;
	}

	.m47_bewerbung .ari_bew_kopf {
		font-size: 1.7059rem;
	}

	.m47_bewerbung .ari_bew_rumpf {
		margin-top: 34px;
	}

	.m47_bewerbung .ari_bew_gitter {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.m47_bewerbung .ari_bew_auswahl {
		gap: 16px;
	}

	.m47_bewerbung .ari_bew_zeile {
		/* 22 + 2 x 18 + 2px Rahmen = 60, wieder genau die Mindesthoehe. */
		gap: 14px;
		min-height: 60px;
		padding: 18px 18px;
	}

	.m47_bewerbung .ari_bew_kreis {
		/* (22 - 20) / 2 bei der kleineren Zeilenhoehe. */
		margin-top: 1px;
		width: 20px;
		height: 20px;
	}

	.m47_bewerbung .ari_bew_kreis::after {
		top: 3.5px;
		left: 3.5px;
		width: 11px;
		height: 11px;
	}

	.m47_bewerbung .ari_bew_zeile_text {
		font-size: 1.1176rem;
		line-height: 22px;
	}

	.m47_bewerbung .ari_bew_leiste {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 16px;
		padding-top: 34px;
	}

	.m47_bewerbung .ari_bew_leiste > .ari_bew_zurueck {
		margin-right: 0;
	}

	.m47_bewerbung .ari_bew_knoepfe {
		flex-wrap: wrap;
		gap: 16px;
	}
}

/* Unter rund 400px reichen die beiden Schaltflaechen nebeneinander nicht mehr
   (zusammen gut 295px), das Feld wuerde sich sonst breiter machen als das
   Fenster. Ab hier stehen sie untereinander. */
@media screen and (max-width: 400px) {

	.m47_bewerbung .ari_bew {
		padding: 0 18px 24px;
	}

	.m47_bewerbung .ari_bew_leiste {
		flex-direction: column;
		align-items: stretch;
	}

	.m47_bewerbung .ari_bew_knoepfe {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.m47_bewerbung .ari_bew_leiste .button {
		width: 100%;
		justify-content: center;
	}

	.m47_bewerbung .ari_bew_zeile {
		padding: 18px 14px;
	}
}