/*
 * LSM Stellenanzeigen – Frontend
 * Alle Werte kommen als CSS-Variablen aus Stellenanzeigen → Design.
 * Selektoren bewusst spezifisch, damit Theme-/Elementor-Button-Styles nicht durchschlagen.
 */
/*
 * Volle Breite erzwingen – auch in zentrierenden Flex-Containern (z. B. Elementor-Container
 * mit „Ausrichtung: Mitte“), die ihren Inhalt sonst auf die Mindestbreite schrumpfen.
 * width:100vw liefert eine große Wunschbreite, max-width:100% begrenzt auf den verfügbaren Platz.
 */
.lsm-job,
.lsm-job-wrap {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100%;
	align-self: stretch;
	text-align: left;
}
.lsm-job { margin: 0 0 3em; font-size: var(--lsm-job-text-size, inherit); }
.lsm-job.lsm-job--single { padding-top: var(--lsm-job-single-pt, 60px); padding-bottom: var(--lsm-job-single-pb, 40px); }
.lsm-job + .lsm-job { padding-top: 3em; border-top: 1px solid rgba(0, 0, 0, .12); }

.lsm-job .lsm-job__head { margin-bottom: var(--lsm-job-block-gap, 28px); }
.lsm-job .lsm-job__intro {
	margin: 0 0 .5em;
	font-weight: 700;
	font-size: var(--lsm-job-intro-size, inherit);
	color: var(--lsm-job-intro-color, inherit);
}
.lsm-job .lsm-job__title {
	margin: 0 0 var(--lsm-job-title-margin, 16px);
	color: var(--lsm-job-title-color, inherit);
	font-family: var(--lsm-job-title-font, revert);
	line-height: 1.05;
	font-size: var(--lsm-job-title-size, revert);
	font-weight: var(--lsm-job-title-weight, revert);
	text-transform: var(--lsm-job-title-transform, none);
}

.lsm-job .lsm-job__block { margin: 0 0 var(--lsm-job-block-gap, 28px); }
.lsm-job .lsm-job__block-title {
	margin: 0 0 var(--lsm-job-heading-margin, 8px);
	font-size: var(--lsm-job-heading-size, 1.15em);
	font-weight: var(--lsm-job-heading-weight, revert);
	color: var(--lsm-job-heading-color, inherit);
	text-decoration: var(--lsm-job-heading-decoration, underline);
	text-underline-offset: 3px;
}

/* ---------- Bulletpoints ---------- */
.lsm-job .lsm-job__list {
	margin: 0;
	padding-left: var(--lsm-job-list-indent, 20px);
	list-style: var(--lsm-job-list-style, disc) outside;
	font-size: var(--lsm-job-list-size, inherit);
	color: var(--lsm-job-list-color, inherit);
}
.lsm-job .lsm-job__list li { margin: 0 0 var(--lsm-job-list-gap, 6px); padding: 0; list-style: inherit; }
.lsm-job .lsm-job__list li:last-child { margin-bottom: 0; }
.lsm-job .lsm-job__list li::marker { color: var(--lsm-job-bullet-color, currentColor); }

/* ---------- Tabs ---------- */
.lsm-job .lsm-job__tabs { margin: 0 0 var(--lsm-job-block-gap, 28px); }
.lsm-job .lsm-job__tablist { display: none; }
.lsm-job .lsm-job__tabs.is-js .lsm-job__tablist {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--lsm-job-tab-justify, flex-start);
	gap: var(--lsm-job-tab-gap, 4px);
	margin: 0;
	padding: 0;
	border-bottom: var(--lsm-job-tab-line-width, 0px) solid var(--lsm-job-tab-line, #333);
}
.lsm-job .lsm-job__tablist button.lsm-job__tab {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	flex: var(--lsm-job-tab-grow, 0 0 auto);
	width: auto;
	min-height: 0;
	margin: 0;
	padding: var(--lsm-job-tab-padding-y, 11px) var(--lsm-job-tab-padding-x, 21px);
	border: var(--lsm-job-tab-border-width, 0px) solid var(--lsm-job-tab-border-color, transparent);
	border-radius: var(--lsm-job-tab-radius, 3px) var(--lsm-job-tab-radius, 3px) var(--lsm-job-tab-radius-bottom, var(--lsm-job-tab-radius, 3px)) var(--lsm-job-tab-radius-bottom, var(--lsm-job-tab-radius, 3px));
	box-shadow: none;
	background: var(--lsm-job-tab-bg, #eee);
	color: var(--lsm-job-tab-color, #333);
	font-family: inherit;
	font-size: var(--lsm-job-tab-size, 1em);
	font-weight: var(--lsm-job-tab-weight, 600);
	line-height: 1.3;
	letter-spacing: normal;
	text-align: center;
	text-transform: var(--lsm-job-tab-transform, none);
	text-decoration: none;
	text-shadow: none;
	cursor: pointer;
	transition: background-color .15s, color .15s, border-color .15s;
}
.lsm-job .lsm-job__tablist button.lsm-job__tab:hover,
.lsm-job .lsm-job__tablist button.lsm-job__tab:focus {
	background: var(--lsm-job-tab-hover-bg, #e0e0e0);
	color: var(--lsm-job-tab-hover-color, var(--lsm-job-tab-color, #333));
	border: var(--lsm-job-tab-border-width, 0px) solid var(--lsm-job-tab-border-color, transparent);
	box-shadow: none;
}
.lsm-job .lsm-job__tablist button.lsm-job__tab[aria-selected="true"],
.lsm-job .lsm-job__tablist button.lsm-job__tab[aria-selected="true"]:hover,
.lsm-job .lsm-job__tablist button.lsm-job__tab[aria-selected="true"]:focus {
	background: var(--lsm-job-tab-active-bg, #333);
	color: var(--lsm-job-tab-active-color, #fff);
	border-color: var(--lsm-job-tab-active-bg, #333);
}
.lsm-job .lsm-job__tablist button.lsm-job__tab:focus-visible {
	outline: 2px solid var(--lsm-job-tab-active-bg, #333);
	outline-offset: 2px;
}

.lsm-job .lsm-job__panel { margin: 0 0 var(--lsm-job-block-gap, 28px); }
.lsm-job .lsm-job__tabs.is-js .lsm-job__panel { margin: 0; padding: var(--lsm-job-tab-content-gap, 20px) 0 0; }
.lsm-job .lsm-job__tabs.is-js .lsm-job__panel-title { display: none; }
.lsm-job .lsm-job__panel[hidden] { display: none; }

/* ---------- Abschluss & Button ---------- */
.lsm-job .lsm-job__outro p { margin: 0 0 .75em; }
.lsm-job .lsm-job__outro .lsm-job__outro-lead { font-weight: var(--lsm-job-outro-lead-weight, 700); }
.lsm-job .lsm-job__outro a.lsm-job__button {
	display: inline-block;
	margin-top: .5em;
	padding: var(--lsm-job-button-padding-y, 12px) var(--lsm-job-button-padding-x, 28px);
	border: var(--lsm-job-button-border-width, 0px) solid var(--lsm-job-button-border-color, transparent);
	border-radius: var(--lsm-job-button-radius, 3px);
	box-shadow: none;
	background: var(--lsm-job-button-bg, #333);
	color: var(--lsm-job-button-color, #fff);
	font-size: var(--lsm-job-button-size, 1em);
	font-weight: var(--lsm-job-button-weight, 600);
	line-height: 1.3;
	text-transform: var(--lsm-job-button-transform, none);
	text-decoration: none;
	transition: background-color .15s, color .15s;
}
.lsm-job .lsm-job__outro a.lsm-job__button:hover,
.lsm-job .lsm-job__outro a.lsm-job__button:focus {
	background: var(--lsm-job-button-hover-bg, var(--lsm-job-button-bg, #000));
	color: var(--lsm-job-button-hover-color, var(--lsm-job-button-color, #fff));
	text-decoration: none;
}

/* ---------- darstellung="liste" ---------- */
.lsm-job-teaser { list-style: none; margin: 0; padding: 0; }
.lsm-job-teaser li { border-bottom: 1px solid rgba(0, 0, 0, .12); }
.lsm-job-teaser a { display: block; padding: 1em 0; text-decoration: none; }
.lsm-job-teaser strong { display: block; }
.lsm-job-teaser span { font-size: .9em; opacity: .75; }

/* ---------- Übersicht: Kacheln ---------- */
.lsm-job-wrap .lsm-job-grid {
	/* Flexbox statt Grid, damit auch eine angebrochene letzte Reihe zentriert werden kann */
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--lsm-job-tile-justify, center);
	gap: var(--lsm-job-tile-gap, 40px);
	margin: 0 0 2em;
}
.lsm-job-wrap a.lsm-job-card {
	display: flex;
	align-items: var(--lsm-job-tile-valign, flex-start);
	align-content: var(--lsm-job-tile-valign, flex-start); /* kein Zusatzabstand, wenn Bild über dem Text steht */
	gap: 28px;
	min-height: var(--lsm-job-tile-min-height, 220px);
	padding: var(--lsm-job-tile-padding, 40px);
	border: var(--lsm-job-tile-border-width, 0px) solid var(--lsm-job-tile-border-color, transparent);
	border-radius: var(--lsm-job-tile-radius, 40px);
	background: var(--lsm-job-tile-bg, #fff);
	box-shadow: var(--lsm-job-tile-shadow, 0 10px 40px rgba(0, 0, 0, .08));
	color: inherit;
	text-align: left;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}
.lsm-job-wrap a.lsm-job-card:hover,
.lsm-job-wrap a.lsm-job-card:focus-visible {
	transform: translateY(var(--lsm-job-tile-lift, -4px));
	color: inherit;
	text-decoration: none;
}
.lsm-job-wrap a.lsm-job-card:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.lsm-job-wrap .lsm-job-grid > a.lsm-job-card {
	container-type: inline-size;
	box-sizing: border-box;
	flex: 0 0 calc((100% - (var(--lsm-job-cols, 3) - 1) * var(--lsm-job-tile-gap, 40px)) / var(--lsm-job-cols, 3));
	max-width: 100%;
}
.lsm-job-wrap .lsm-job-card__media { flex: 0 0 var(--lsm-job-tile-img-width, 130px); }
/* Schmale Kachel: Bild über den Text statt daneben */
@container (max-width: 440px) {
	.lsm-job-wrap .lsm-job-card.has-image .lsm-job-card__media { flex-basis: auto; width: min(var(--lsm-job-tile-img-width, 130px), 100%); }
}
.lsm-job-wrap a.lsm-job-card.has-image { flex-wrap: wrap; }
.lsm-job-wrap a.lsm-job-card.has-image .lsm-job-card__body { flex: 1 1 220px; }
.lsm-job-wrap .lsm-job-card__media img { display: block; width: 100%; height: auto; }
.lsm-job-wrap .lsm-job-card__media[hidden] { display: none; }
.lsm-job-wrap .lsm-job-card__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lsm-job-wrap .lsm-job-card__title {
	margin: 0;
	color: var(--lsm-job-tile-title-color, inherit);
	font-size: var(--lsm-job-tile-title-size, revert);
	font-weight: var(--lsm-job-tile-title-weight, revert);
	text-transform: var(--lsm-job-tile-title-transform, uppercase);
	line-height: 1.15;
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word; /* nur Notbremse für sehr lange Wörter */
}
.lsm-job-wrap .lsm-job-card__meta {
	color: var(--lsm-job-tile-meta-color, inherit);
	font-size: var(--lsm-job-tile-meta-size, .95em);
	opacity: .85;
}
.lsm-job-wrap .lsm-job-card__more {
	color: var(--lsm-job-tile-more-color, var(--lsm-job-tile-title-color, inherit));
	font-weight: 600;
}
.lsm-job-wrap .lsm-job-card__meta[hidden],
.lsm-job-wrap .lsm-job-card__more[hidden] { display: none; }

/* ---------- Keine Stellen aktiv ---------- */
.lsm-job-wrap .lsm-job-empty {
	margin: 0 0 1em;
	text-align: var(--lsm-job-empty-align, center);
	color: var(--lsm-job-empty-color, inherit);
	font-size: var(--lsm-job-empty-size, revert);
}

/* ---------- Detailseite: Vorschau-Hinweis (nur für angemeldete Redakteure sichtbar) ---------- */
.lsm-job .lsm-job__preview-notice {
	margin: 0 0 1.5em;
	padding: .75em 1em;
	border-left: 4px solid #dba617;
	background: #fcf9e8;
	color: #3c3b3a;
	font-weight: 600;
}

/* ---------- Detailseite: Zurück-Link ---------- */
.lsm-job .lsm-job__back { margin: 0 0 1.5em; }
.lsm-job .lsm-job__back--bottom { margin: 2em 0 0; }
.lsm-job .lsm-job__back a { color: var(--lsm-job-back-color, inherit); text-decoration: none; font-weight: 600; }
.lsm-job .lsm-job__back a:hover { text-decoration: underline; }