/* mtr-km-deps: basis */
/* Stellensuche: Suchfeld mit Lupe und der Trefferliste, die beim Tippen erscheint.
   Die Liste liegt als eigene Ebene unter dem Feld, damit sie den Seiteninhalt
   nicht verschiebt. Farben, Radius und Schrift kommen aus den gemeinsamen Werten. */

.mtr-suche {
	position: relative;
	width: 100%;
	max-width: 420px;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

.mtr-suche__feld {
	position: relative;
	display: flex;
	align-items: center;
}

.mtr-suche__lupe {
	position: absolute;
	left: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mtr-ink, #37424C);
	pointer-events: none;
}

.mtr-suche input.mtr-suche__eingabe {
	width: 100%;
	height: 48px;
	margin: 0;
	padding-block: 0;
	padding-inline: 44px 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.4;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
}

.mtr-suche input.mtr-suche__eingabe::placeholder {
	color: #6B7480;
	opacity: 1;
}

/* Im Fokus nur der äußere Ring. Der Rahmen des Feldes behält seine
   Normalfarbe, sonst liegen zwei rote Linien übereinander. */
.mtr-suche input.mtr-suche__eingabe:focus {
	outline: 2px solid var(--mtr-red, #E62332);
	outline-offset: 2px;
}

.mtr-suche input.mtr-suche__eingabe::-webkit-search-cancel-button,
.mtr-suche input.mtr-suche__eingabe::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

/* Trefferliste */

.mtr-suche__panel {
	position: absolute;
	z-index: 40;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	padding: 6px;
	border: 1px solid var(--mtr-line, #D8D8D8);
	border-radius: var(--mtr-rad, 5px);
	background: #fff;
	box-shadow: 0 10px 30px rgba(32, 32, 32, 0.12);
}

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

.mtr-suche__treffer {
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 60vh;
	overflow-y: auto;
}

.mtr-suche__treffer-zeile {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mtr-suche__panel a.mtr-suche__link,
.mtr-suche__panel a.mtr-suche__link:hover,
.mtr-suche__panel a.mtr-suche__link:focus-visible {
	text-decoration: none;
}

.mtr-suche__link {
	display: block;
	min-height: 44px;
	padding: 10px 12px;
	border-radius: var(--mtr-rad, 5px);
	color: var(--mtr-tx, #202020);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mtr-suche__titel {
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
}

.mtr-suche__merkmale {
	display: block;
	margin-top: 2px;
	color: var(--mtr-ink, #37424C);
	font-size: 0.8125rem;
	line-height: 1.4;
}

a.mtr-suche__link:hover,
a.mtr-suche__link:focus-visible,
.mtr-suche__treffer-zeile[data-aktiv="ja"] .mtr-suche__link {
	background: var(--mtr-red, #E62332);
	color: #fff;
	outline: none;
}

a.mtr-suche__link:hover .mtr-suche__merkmale,
a.mtr-suche__link:focus-visible .mtr-suche__merkmale,
.mtr-suche__treffer-zeile[data-aktiv="ja"] .mtr-suche__merkmale {
	color: #fff;
}

/* Kein Treffer und Link auf alle Stellen */

.mtr-suche__leer {
	margin: 0;
	padding: 12px;
	color: var(--mtr-tx, #202020);
	font-size: 0.875rem;
	line-height: 1.6;
}

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

.mtr-suche__leer-link {
	display: inline-block;
	margin-top: 4px;
	color: var(--mtr-red-dunkel, #C11C29);
	font-weight: 700;
	text-decoration: underline;
}

.mtr-suche__alle {
	display: block;
	margin-top: 4px;
	padding: 12px;
	border-top: 1px solid var(--mtr-line, #D8D8D8);
	color: var(--mtr-red-dunkel, #C11C29);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
}

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

.mtr-suche__alle:hover,
.mtr-suche__alle:focus-visible {
	text-decoration: underline;
}

/* Vorschau im Editor: alles ruhig und ohne eigene Ebene */

.mtr-suche--editor .mtr-suche__panel {
	position: static;
	margin-top: 8px;
	box-shadow: none;
}

.mtr-suche__editorhinweis {
	margin: 8px 0 0;
	color: var(--mtr-ink, #37424C);
	font-size: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
	.mtr-suche__link {
		transition: none;
	}
}

/* Verweis auf den Stellenagenten am Ende der Trefferliste. Ohne Treffer steht er schon im Satz darüber. */
.mtr-suche__leer:not([hidden]) ~ .mtr-suche__agent {
	display: none;
}

.mtr-suche__agent {
	margin: 4px 0 0;
	padding: 10px 12px 6px;
	border-top: 1px solid var(--mtr-line, #D8D8D8);
	color: var(--mtr-ink, #37424C);
	font-size: 0.875rem;
	line-height: 1.6;
}

.mtr-suche__panel .mtr-suche__agent a {
	padding: 10px 0;
	color: var(--mtr-ink, #37424C);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mtr-suche__panel .mtr-suche__agent a:hover,
.mtr-suche__panel .mtr-suche__agent a:focus-visible {
	color: var(--mtr-red-dunkel, #C11C29);
}