/* mtr-km-deps: basis */
/* Stellenagent: Anmeldeformular für die Benachrichtigung bei neuen Stellen.
   Eingabefelder, Auswahlfeld und Schaltfläche übernehmen Höhe, Radius und
   Farben der Seite. Die Bereiche stehen in einem Auswahlfeld mit Mehrfachwahl;
   ohne Skript bleiben die Kästchen als gewöhnliche Liste sichtbar. */

.mtr-agent {
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	color: var(--mtr-tx, #202020);
}

/* Karte: weiße Fläche mit feinem Rahmen, für graue Abschnitte */

.mtr-agent--karte {
	padding: 25px;
	border: 1px solid var(--mtr-line, #D8D8D8);
	border-radius: var(--mtr-rad, 5px);
	background: #fff;
}

.mtr-agent__titel {
	margin: 0 0 8px;
	font-size: 1.5rem;
	line-height: 1.25;
}

.mtr-agent__text {
	margin: 0 0 20px;
	font-size: 1rem;
	line-height: 1.6;
}

/* Steht keine Einleitung unter der Überschrift, braucht das Formular selbst den Abstand. */

.mtr-agent__titel + .mtr-agent__formular,
.mtr-agent__titel + .mtr-agent__meldung {
	margin-top: 20px;
}

.mtr-agent__formular {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mtr-agent__zeile {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mtr-agent__label {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--mtr-ink, #37424C);
}

.mtr-agent__pflicht {
	color: var(--mtr-red-dunkel, #C11C29);
	font-weight: 400;
}

.mtr-agent input.mtr-agent__eingabe {
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 11px 16px;
	box-sizing: border-box;
	border: 1px solid var(--mtr-line, #D8D8D8);
	border-radius: var(--mtr-rad, 5px);
	background: #fff;
	color: var(--mtr-tx, #202020);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.2s ease;
}

.mtr-agent input.mtr-agent__eingabe::placeholder {
	color: #6B7480;
	opacity: 1;
}

.mtr-agent input.mtr-agent__eingabe:hover {
	border-color: #b9b9b9;
}

.mtr-agent input.mtr-agent__eingabe:focus {
	outline: 3px solid var(--mtr-red, #E62332);
	outline-offset: 2px;
	border-color: var(--mtr-line, #D8D8D8);
}

/* Fehlerzustand wie im Bewerbungsformular: Rahmen im dunklen Rot, sobald ein
   Pflichtfeld nach der Eingabe ungültig ist (vorher bleibt das Feld ruhig). */

.mtr-agent input.mtr-agent__eingabe:user-invalid,
.mtr-agent input.mtr-agent__haken:user-invalid {
	border-color: var(--mtr-red-dunkel, #C11C29);
}

.mtr-agent__hilfe {
	color: #4a4a4a;
	font-size: 0.875rem;
	line-height: 1.45;
}

/* Einheitliche Kästchen: eigene Optik statt der Browservorgabe */

.mtr-agent input.mtr-agent__haken {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border: 2px solid var(--mtr-ink, #37424C);
	border-radius: var(--mtr-rad, 5px);
	background: #fff no-repeat center;
	background-size: 15px 15px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mtr-agent input.mtr-agent__haken:checked {
	border-color: var(--mtr-red-dunkel, #C11C29);
	background-color: var(--mtr-red-dunkel, #C11C29);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6 9.8 17.4 19 7.2'/%3E%3C/svg%3E");
}

.mtr-agent input.mtr-agent__haken:focus-visible {
	outline: 3px solid var(--mtr-red, #E62332);
	outline-offset: 3px;
}

/* Bereiche: Auswahlfeld mit Mehrfachwahl */

.mtr-agent__bereiche {
	gap: 8px;
}

.mtr-agent__box {
	position: relative;
}

.mtr-agent button.mtr-agent__schalter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 16px;
	box-sizing: border-box;
	border: 1px solid var(--mtr-line, #D8D8D8);
	border-radius: var(--mtr-rad, 5px);
	background: #fff;
	color: var(--mtr-tx, #202020);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

/* Ohne Skript trägt die Schaltfläche das Attribut hidden. Die Regel oben setzt
   display:flex und würde die Browserregel [hidden]{display:none} überstimmen,
   deshalb steht sie hier noch einmal mit gleicher Gewichtung. */

.mtr-agent button.mtr-agent__schalter[hidden] {
	display: none;
}

.mtr-agent button.mtr-agent__schalter:hover {
	border-color: #b9b9b9;
}

.mtr-agent button.mtr-agent__schalter:focus-visible {
	outline: 3px solid var(--mtr-red, #E62332);
	outline-offset: 2px;
	border-color: var(--mtr-line, #D8D8D8);
}

.mtr-agent__schaltertext {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.mtr-agent__schaltertext[data-leer-an="ja"] {
	color: #6B7480;
}

.mtr-agent__winkel {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-top: -4px;
	border-right: 2px solid var(--mtr-ink, #37424C);
	border-bottom: 2px solid var(--mtr-ink, #37424C);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.mtr-agent button.mtr-agent__schalter[aria-expanded="true"] .mtr-agent__winkel {
	margin-top: 3px;
	transform: rotate(225deg);
}

.mtr-agent__felder {
	margin: 0;
	padding: 0;
	border: 0;
}

.mtr-agent__auswahl {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 10px;
}

.mtr-agent__kasten {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 6px 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	cursor: pointer;
}

/* Mit Skript: Kästchen klappen unter dem Auswahlfeld auf */

.mtr-agent__bereiche--bereit .mtr-agent__legende {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

.mtr-agent__bereiche--bereit .mtr-agent__liste {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 30;
	max-height: 290px;
	padding: 8px 16px;
	overflow-y: auto;
	box-sizing: border-box;
	border: 1px solid var(--mtr-line, #D8D8D8);
	border-radius: var(--mtr-rad, 5px);
	background: #fff;
	box-shadow: 0 14px 34px rgba(32, 32, 32, 0.12);
}

.mtr-agent__bereiche--bereit .mtr-agent__liste[hidden] {
	display: none;
}

.mtr-agent__bereiche--bereit .mtr-agent__auswahl {
	margin-top: 0;
}

.mtr-agent__bereiche--bereit .mtr-agent__kasten:hover {
	color: var(--mtr-red-dunkel, #C11C29);
}

/* Gewählte Bereiche als abwählbare Marken unter dem Feld */

.mtr-agent__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2px;
}

.mtr-agent__chips:empty {
	display: none;
}

.mtr-agent button.mtr-agent__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	margin: 0;
	padding: 0 10px 0 12px;
	border: 1px solid var(--mtr-line, #D8D8D8);
	border-radius: var(--mtr-rad, 5px);
	background: var(--mtr-surf, #F8F8F8);
	color: var(--mtr-tx, #202020);
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.mtr-agent button.mtr-agent__chip:hover,
.mtr-agent button.mtr-agent__chip:focus-visible {
	border-color: var(--mtr-red, #E62332);
	color: var(--mtr-red-dunkel, #C11C29);
}

.mtr-agent button.mtr-agent__chip:focus-visible {
	outline: 3px solid var(--mtr-red, #E62332);
	outline-offset: 2px;
}

.mtr-agent__chip-x {
	position: relative;
	display: inline-block;
	width: 12px;
	height: 12px;
}

.mtr-agent__chip-x::before,
.mtr-agent__chip-x::after {
	content: "";
	position: absolute;
	top: 5px;
	left: 0;
	width: 12px;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
}

.mtr-agent__chip-x::before {
	transform: rotate(45deg);
}

.mtr-agent__chip-x::after {
	transform: rotate(-45deg);
}

/* Einwilligung wie im Bewerbungsformular: Kästchen links, Text daneben, ohne
   eigene Fläche. Eine feine Linie trennt sie von den Auswahlfeldern darüber. */

.mtr-agent__einwilligung {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: 14px;
	align-items: start;
	padding: 20px 0 0;
	border-top: 1px solid var(--mtr-line, #D8D8D8);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.mtr-agent input.mtr-agent__haken--einwilligung {
	margin-top: 1px;
}

.mtr-agent__einwilligungstext,
.mtr-agent .mtr-agent__einwilligungstext label,
.mtr-agent .mtr-agent__einwilligungstext a {
	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
	line-height: 1.55;
}

.mtr-agent .mtr-agent__einwilligungstext label {
	display: inline;
	margin: 0;
	cursor: pointer;
}

/* Kurze Auskunft zur Verarbeitung, direkt unter der Einwilligung. Ruhiger als
   der Einwilligungstext, aber gut lesbar (Kontrast 8,86 auf Weiss). */

.mtr-agent__hinweis {
	margin: -8px 0 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: #4a4a4a;
}

.mtr-agent__link {
	color: var(--mtr-red-dunkel, #C11C29);
	text-decoration: underline;
}

.mtr-agent__link:hover,
.mtr-agent__link:focus-visible {
	color: var(--mtr-red, #E62332);
}

/* Die Schaltfläche folgt dem Buttonsystem der Seite: 48 px hoch, 26 px
   Polsterung, 2 px Rand, 1 rem in 700, Vollton in MTR-Rot. Die Auszeichnung
   mit drei Klassen ist nötig, weil die Website-Einstellungen von Elementor
   allen Schaltflächen sonst Großbuchstaben und Sperrschrift geben. */

.mtr-agent .mtr-agent__knopf.elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-height: 48px;
	padding: 0 26px;
	border: 2px solid var(--mtr-red, #E62332);
	border-radius: var(--mtr-rad, 5px);
	background: var(--mtr-red, #E62332);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mtr-agent .mtr-agent__knopf.elementor-button:hover,
.mtr-agent .mtr-agent__knopf.elementor-button:focus-visible {
	background: var(--mtr-red-dunkel, #C11C29);
	border-color: var(--mtr-red-dunkel, #C11C29);
	color: #fff;
}

.mtr-agent .mtr-agent__knopf.elementor-button:focus-visible {
	outline: 3px solid var(--mtr-red, #E62332);
	outline-offset: 3px;
}

.mtr-agent .mtr-agent__knopf.elementor-button[disabled] {
	opacity: 0.6;
	cursor: default;
	transform: none;
}

@media (max-width: 767px) {
	.mtr-agent--karte {
		padding: 18px;
	}

	.mtr-agent button.mtr-agent__chip {
		min-height: 44px;
		padding: 0 12px 0 14px;
	}

	.mtr-agent .mtr-agent__knopf.elementor-button {
		width: 100%;
		min-height: 46px;
		padding: 0 16px;
		font-size: 0.9375rem;
	}
}

/* Statuszeile: unsichtbar, wird aber von Vorleseprogrammen gelesen */

.mtr-agent__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Falle für Maschinen: für Menschen unsichtbar, für Vorleseprogramme ausgeblendet */

.mtr-agent__falle {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Meldungen wie im Bewerbungsformular: weißer Kasten mit feiner Linie und
   Symbol. Bestätigung grün mit Haken, Fehler mit dunkelrotem Text und Symbol,
   ohne roten Rahmen. Die Antwort nach dem Absenden steht unter dem Knopf, dort,
   wo der Blick nach dem Klick ist. */

.mtr-agent__meldung,
.mtr-agent__antwort {
	position: relative;
	margin: 0 0 18px;
	padding: 13px 16px 13px 46px;
	border: 1px solid var(--mtr-line, #D8D8D8);
	border-radius: var(--mtr-rad, 5px);
	background: #fff;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.mtr-agent__meldung::before,
.mtr-agent__antwort::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 14px;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--mtr-agent-symbol) center / contain no-repeat;
	mask: var(--mtr-agent-symbol) center / contain no-repeat;
}

.mtr-agent__antwort {
	order: 99;
	margin: 0;
}

.mtr-agent__antwort[hidden] {
	display: none;
}

.mtr-agent__meldung--ok,
.mtr-agent__antwort[data-art="ok"] {
	--mtr-agent-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.4l2.7 2.7L16.2 9.4'/%3E%3C/svg%3E");
	border-color: #BCDEC8;
	background: #EAF6EE;
	color: #1E4E2C;
}

.mtr-agent__meldung--fehler,
.mtr-agent__antwort[data-art="fehler"] {
	--mtr-agent-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.4v.1'/%3E%3C/svg%3E");
	border-color: var(--mtr-line, #D8D8D8);
	background: #fff;
	color: var(--mtr-red-dunkel, #C11C29);
	font-weight: 600;
}

.mtr-agent__editorhinweis {
	margin: 8px 0 0;
	color: #4a4a4a;
	font-size: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
	.mtr-agent .mtr-agent__knopf.elementor-button,
	.mtr-agent__winkel,
	.mtr-agent button.mtr-agent__schalter,
	.mtr-agent input.mtr-agent__eingabe,
	.mtr-agent input.mtr-agent__haken,
	.mtr-agent button.mtr-agent__chip {
		transition: none;
	}

	.mtr-agent .mtr-agent__knopf.elementor-button:hover,
	.mtr-agent .mtr-agent__knopf.elementor-button:focus-visible {
		transform: none;
	}
}