/*
 * Jobmesse — Betriebsprofile
 *
 * Eigenständiges Stylesheet. Es übernimmt nichts aus Superio und setzt
 * nichts von einem Theme voraus. Die Werte stammen aus einer Messung der
 * bisherigen Seite (computed styles), nicht aus Abschreiben von Regeln:
 *
 *   Display-Schrift  LuckiestGuy      Titel 32px / ls 0.96px
 *   Fließtext        Signika 15/26.25 Farbe #202124
 *   Karten           #fff, 2px #000, Schatten 4px 4px 0 0 #000
 *   Akzent           #f07e26          Buttons r=10px
 *   Pillen           rgba(10,10,10,.15) r=50px
 *   Container        1320px, 40px Innenabstand
 *
 * Die Schriften liegen bereits selbstgehostet unter /wp-content/fonts/.
 * Wir binden sie hier erneut ein, damit dieses Plugin auch dann steht,
 * wenn das alte Custom-CSS (das am Theme hängt) verschwindet.
 */

/* ---------------------------------------------------------------- Fonts */

@font-face {
	font-family: 'LuckiestGuy';
	src: url('/wp-content/fonts/luckiestguy-webfont.woff') format('woff'),
	     url('/wp-content/fonts/luckiestguy-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Signika';
	src: url('/wp-content/fonts/signika-latin-400-normal.woff2') format('woff2'),
	     url('/wp-content/fonts/signika-latin-400-normal.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Signika';
	src: url('/wp-content/fonts/signika-latin-600-normal.woff2') format('woff2'),
	     url('/wp-content/fonts/signika-latin-600-normal.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Signika';
	src: url('/wp-content/fonts/signika-latin-700-normal.woff2') format('woff2'),
	     url('/wp-content/fonts/signika-latin-700-normal.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* --------------------------------------------------------------- Tokens */

/*
 * .jm-page  — eine ganze Seite, die uns gehört (Betrieb, Beruf, Liste)
 * .jm-scope — ein Block innerhalb einer fremden Seite (Shortcode Merkliste).
 *             Gleiche Gestaltungswerte, aber ohne Hintergrund und Rahmen.
 */
.jm-page,
.jm-scope {
	--jm-ink: #202124;
	--jm-muted: #77838f;
	--jm-line: #000;
	--jm-accent: #f07e26;
	--jm-accent-ink: #fff;
	--jm-card: #fff;
	--jm-shadow: 4px 4px 0 0 #000;
	--jm-pill: rgba(10, 10, 10, .15);

	--jm-display: 'LuckiestGuy', 'Signika', Verdana, Arial, sans-serif;
	--jm-text: 'Signika', Verdana, Arial, sans-serif;

	--jm-max: 1320px;
	--jm-gap: 30px;
	--jm-pad: 30px;

	font-family: var(--jm-text);
	font-size: 15px;
	line-height: 1.75;
	color: #000;
}

.jm-page,
.jm-scope {
	/* Volle Zeilenbreite auch dann, wenn das Theme den Elternbereich als
	   Flex-Container führt (GeneratePress tut das). Ohne diese Angabe
	   schrumpft der Block auf seinen Inhalt und klebt am linken Rand,
	   statt sich mittig zu setzen. */
	width: 100%;
}

.jm-page {
	/* Der Grashintergrund gehörte bisher zum Custom-CSS des Themes.
	   Er steht hier, damit das Profil auch nach einem Theme-Wechsel
	   auf seinem eigenen Untergrund sitzt. */
	background-image: url('/wp-content/plugins/otbt/bg_grass.jpg');
	background-position: center top;
	background-repeat: repeat;
	padding: 0 0 80px;
}

.jm-scope *,
.jm-scope *::before,
.jm-scope *::after { box-sizing: border-box; }

.jm-container {
	max-width: var(--jm-max);
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}

.jm-page *,
.jm-page *::before,
.jm-page *::after { box-sizing: border-box; }

/* ----------------------------------------------------------- Kartenrahmen */

.jm-card {
	background: var(--jm-card);
	border: 2px solid var(--jm-line);
	box-shadow: var(--jm-shadow);
	overflow: hidden;
}

.jm-cover {
	line-height: 0;
}

.jm-cover img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.jm-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 422px;
	gap: 15px;
	padding: 40px;
	align-items: start;
}

/* ---------------------------------------------------------------- Typo */

.jm-title {
	font-family: var(--jm-display);
	font-size: 32px;
	line-height: 1.3;
	letter-spacing: .96px;
	font-weight: 500;
	color: var(--jm-ink);
	margin: 0 0 24px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.jm-h2 {
	font-family: var(--jm-display);
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: .54px;
	font-weight: 500;
	color: var(--jm-ink);
	margin: 0 0 16px;
}

.jm-section { margin-bottom: 40px; }
.jm-section:last-child { margin-bottom: 0; }

.jm-prose { color: #000; }
.jm-prose p { margin: 0 0 1em; }
.jm-prose > *:last-child { margin-bottom: 0; }
.jm-prose img { max-width: 100%; height: auto; }
.jm-prose a { color: var(--jm-accent); }

/* ------------------------------------------------------------- Favorit */

.jm-fav {
	background: none;
	border: 0;
	padding: 4px;
	cursor: pointer;
	line-height: 0;
	color: var(--jm-ink);
	flex: none;
}

.jm-fav svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
}

.jm-fav.is-on { color: var(--jm-accent); }
.jm-fav.is-on svg { fill: currentColor; stroke: currentColor; }

/* --------------------------------------------------------- Seitenspalte */

.jm-side {
	display: flex;
	flex-direction: column;
	gap: var(--jm-gap);
}

.jm-box {
	background: var(--jm-card);
	border: 2px solid var(--jm-line);
	box-shadow: var(--jm-shadow);
	padding: var(--jm-pad);
}

.jm-box-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}

.jm-logo {
	flex: none;
	width: 60px;
	line-height: 0;
}

.jm-logo img {
	width: 100%;
	height: auto;
	display: block;
}

.jm-box-title {
	font-family: var(--jm-display);
	font-size: 18px;
	line-height: 1.25;
	letter-spacing: .54px;
	font-weight: 500;
	color: var(--jm-ink);
	margin: 0;
}

.jm-box-title-plain { margin-bottom: 20px; }

/* Eckdaten: Label links, Wert rechts */
.jm-facts { margin: 0 0 16px; }

.jm-fact {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 2px 0;
}

.jm-fact dt {
	font-weight: 400;
	color: var(--jm-ink);
	flex: none;
}

.jm-fact dd {
	margin: 0;
	text-align: right;
	color: var(--jm-ink);
	overflow-wrap: anywhere;
}

.jm-fact a { color: inherit; text-decoration: none; }
.jm-fact a:hover { color: var(--jm-accent); }

.jm-socials {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
}

.jm-socials img { width: 20px; height: 20px; display: block; }

/* ------------------------------------------------------------- Buttons */

.jm-btn {
	display: block;
	width: 100%;
	text-align: center;
	font-family: var(--jm-text);
	font-size: 15px;
	font-weight: 700;
	line-height: 30px;
	padding: 9px 30px;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.jm-btn-primary {
	background: var(--jm-accent);
	color: var(--jm-accent-ink);
}

.jm-btn-primary:hover,
.jm-btn-primary:focus { background: #d96c1a; color: #fff; }

.jm-btn-tour {
	background: var(--jm-ink);
	color: #fff;
	margin-top: 12px;
}

.jm-btn-tour:hover { background: #000; color: #fff; }

.jm-btn-block { margin-top: 8px; }

/* ------------------------------------------------------------ Formular */

.jm-form { display: flex; flex-direction: column; gap: 14px; }

.jm-form select,
.jm-form input[type="email"],
.jm-form input[type="text"],
.jm-form textarea {
	width: 100%;
	font-family: var(--jm-text);
	font-size: 15px;
	line-height: 1.6;
	color: var(--jm-ink);
	background: #fff;
	border: 2px solid var(--jm-line);
	border-radius: 10px;
	padding: 12px 16px;
}

.jm-form textarea { resize: vertical; min-height: 140px; }

.jm-form select:focus,
.jm-form input:focus,
.jm-form textarea:focus {
	outline: 2px solid var(--jm-accent);
	outline-offset: 1px;
}

.jm-form ::placeholder { color: var(--jm-muted); opacity: 1; }

/* Honeypot und Screenreader-Label aus dem Blickfeld nehmen */
.jm-hp,
.jm-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.jm-note { border-radius: 10px; padding: 12px 16px; margin: 0 0 16px; }
.jm-note ul { margin: 0; padding-left: 18px; }
.jm-note-ok { background: #e7f5ec; border: 2px solid #1f7a3f; color: #14562c; }
.jm-note-error { background: #fdecea; border: 2px solid #b32d2e; color: #8a1f20; }

/* ----------------------------------------------------------- Jobkarten */

.jm-job-list { display: flex; flex-direction: column; gap: var(--jm-gap); }

.jm-job {
	background: #fff;
	border: 2px solid var(--jm-line);
	box-shadow: var(--jm-shadow);
	padding: 28px 30px 28px 50px;
}

.jm-job-title {
	font-family: var(--jm-display);
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: .54px;
	font-weight: 500;
	margin: 0 0 7px;
}

.jm-job-title a { color: var(--jm-ink); text-decoration: none; }
.jm-job-title a:hover { color: var(--jm-accent); }

.jm-job-cats {
	font-size: 14px;
	color: var(--jm-ink);
	margin-bottom: 12px;
	line-height: 24.5px;
}

.jm-cat {
	color: var(--jm-ink);
	text-decoration: none;
	white-space: nowrap;
}

.jm-cat:hover { color: var(--jm-accent); }

.jm-cat-icon {
	width: 18px;
	height: 18px;
	vertical-align: -4px;
	margin-right: 5px;
}

/*
 * Die Pillenzeile ist 2px hoeher als die Pillen selbst und haelt 3px
 * Abstand — beides kam bisher vom Textfluss (Zeilenkasten und das
 * Leerzeichen zwischen den Elementen). Im Flex-Layout gibt es weder das
 * eine noch das andere, also stehen die Werte hier.
 */
.jm-job-types {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 3px;
	min-height: 27px;
}

.jm-pill {
	display: inline-block;
	background: var(--jm-pill);
	color: #0a0a0a;
	font-size: 13px;
	line-height: 22.75px;
	padding: 1px 20px;
	border-radius: 50px;
	text-decoration: none;
}

.jm-pill:hover { background: rgba(10, 10, 10, .25); color: #0a0a0a; }

/* -------------------------------------------------------------- Fotos */

.jm-photo-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.jm-photo { display: block; line-height: 0; border: 2px solid var(--jm-line); }
.jm-photo img { width: 100%; height: 140px; object-fit: cover; display: block; }

.jm-video-frame iframe,
.jm-video-frame video { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }

/* ------------------------------------------------------------ Schmaler */

@media (max-width: 1024px) {
	.jm-body { grid-template-columns: 1fr; }
	.jm-photo-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
	.jm-page { padding: 20px 0 50px; }
	.jm-container { padding: 0 16px; }
	.jm-body { padding: 24px 20px; }
	.jm-title { font-size: 24px; }
	.jm-cover img { height: 140px; }
	.jm-photo-grid { grid-template-columns: repeat(2, 1fr); }
	.jm-fact { flex-direction: column; gap: 0; }
	.jm-fact dd { text-align: left; }
}


/* ------------------------------------------------------- Frage-Kästen */

/*
 * Die Kästen kommen aus dem Beitragsinhalt (wp:html-Blöcke) und heißen
 * dort seit jeher .unternehmensfrage-button / -content. Wir übernehmen
 * die Namen, damit vorhandene Inhalte unverändert funktionieren.
 */

.jm-prose .unternehmensfrage-button {
	display: block;
	width: 100%;
	text-align: left;
	font-family: var(--jm-text);
	font-size: 15px;
	font-weight: 600;
	color: var(--jm-ink);
	background: #cfe3f5;
	border: 0;
	border-radius: 8px;
	padding: 12px 18px 12px 40px;
	cursor: pointer;
	position: relative;
}

.jm-prose .unternehmensfrage-button:hover { background: #bcd8f0; }

.jm-prose .unternehmensfrage-button::before {
	content: '';
	position: absolute;
	left: 18px;
	top: 50%;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	/* Pfeil über die Rahmen statt über transform: das alte Custom-CSS
	   dreht ihn bei .opened ebenfalls über die Rahmen. Ein zusätzliches
	   rotate() hätte beides gegeneinander aufgehoben — der offene Kasten
	   zeigte dann wieder nach unten. */
	border-top: 6px solid currentColor;
	border-bottom: none;
	transform: translateY(-50%);
}

.jm-prose .unternehmensfrage-button.opened::before {
	border-top: none;
	border-bottom: 6px solid currentColor;
}

.jm-prose .unternehmensfrage-content.jm-panel {
	/* Das alte Custom-CSS setzt hier display:none und ließ die Kästen
	   von jQuery per slideToggle einblenden. Wir animieren stattdessen
	   die Höhe — dafür muss das Element sichtbar sein. Steht bewusst
	   hier, damit es auch dann greift, wenn das Custom-CSS mit dem
	   Theme verschwindet. */
	display: block;
	overflow: hidden;
	max-height: 0;
	transition: max-height .28s ease;
	background: #eaf3fb;
	border-radius: 8px;
	margin: 0 0 14px;
	padding: 0 24px;
}

.jm-prose .unternehmensfrage-content.jm-panel.is-open {
	padding: 18px 24px;
	margin-left: 48px;
}

@media (prefers-reduced-motion: reduce) {
	.jm-prose .unternehmensfrage-content.jm-panel { transition: none; }
	.jm-prose .unternehmensfrage-button::before { transition: none; }
}

/* ---------------------------------------------------------- Lightbox */

.jm-lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 40px 60px;
	background: rgba(0, 0, 0, .88);
}

.jm-lb.is-open { display: flex; }

body.jm-lb-lock { overflow: hidden; }

.jm-lb-stage {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.jm-lb-stage img {
	max-width: 100%;
	max-height: calc(100vh - 140px);
	object-fit: contain;
	border: 2px solid #fff;
	background: #fff;
}

.jm-lb-count { color: #fff; font-family: var(--jm-text); font-size: 14px; }

.jm-lb-close,
.jm-lb-nav {
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border: 0;
	cursor: pointer;
	line-height: 1;
	border-radius: 50%;
	flex: none;
}

.jm-lb-close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 44px;
	height: 44px;
	font-size: 30px;
}

.jm-lb-nav { width: 48px; height: 48px; font-size: 32px; }

.jm-lb-close:hover,
.jm-lb-nav:hover { background: rgba(255, 255, 255, .28); }

.jm-lb-nav[hidden] { display: none; }

@media (max-width: 640px) {
	.jm-lb { padding: 20px 8px; }
	.jm-lb-nav { width: 40px; height: 40px; font-size: 26px; }
}

/* ------------------------------------------- Hinweis auf externe Links */

#external-link-popup {
	position: fixed;
	inset: 0;
	z-index: 99998;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .6);
}

#external-link-inner {
	background: #fff;
	border: 2px solid var(--jm-line);
	box-shadow: var(--jm-shadow);
	border-radius: 10px;
	padding: 28px;
	max-width: 460px;
	font-family: var(--jm-text);
	color: var(--jm-ink);
}

#external-link-inner button {
	font-family: var(--jm-text);
	font-size: 15px;
	font-weight: 700;
	border: 0;
	border-radius: 10px;
	padding: 9px 22px;
	margin: 12px 8px 0 0;
	cursor: pointer;
}

#continue-button { background: var(--jm-accent); color: #fff; }
#cancel-button { background: rgba(10, 10, 10, .15); color: #0a0a0a; }

/* Kopfzeile der Jobliste mit Link zur vollständigen Übersicht */
.jm-jobs-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 16px;
}

.jm-jobs-head .jm-h2 { margin-bottom: 0; }

.jm-more {
	font-family: var(--jm-text);
	font-size: 14px;
	color: var(--jm-accent);
	text-decoration: none;
	white-space: nowrap;
}

.jm-more:hover { text-decoration: underline; }

/* ==================================================== Betriebsübersicht */

/*
 * Zweispaltiges Raster, gemessen an der bisherigen Seite:
 * Karten 603px breit, 30px Abstand in beide Richtungen,
 * Innenabstand 30px, Logo 80x80.
 */

.jm-body-liste {
	display: block;
	padding: 40px;
}

.jm-count {
	font-family: var(--jm-text);
	font-size: 15px;
	line-height: 26.25px;
	color: var(--jm-ink);
	margin: 0 0 30px;
}

.jm-emp-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
	align-items: start;
}

.jm-emp {
	color: var(--jm-muted);
	background: var(--jm-card);
	border: 2px solid var(--jm-line);
	box-shadow: var(--jm-shadow);
	padding: 30px;
	display: flex;
	align-items: flex-start;
	gap: 20px;
	cursor: pointer;
}

.jm-emp-logo {
	flex: none;
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.jm-emp-logo img {
	max-width: 80px;
	max-height: 80px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.jm-emp-text { min-width: 0; }

.jm-emp-title {
	font-family: var(--jm-display);
	font-size: 18px;
	line-height: 23.4px;
	letter-spacing: .54px;
	font-weight: 500;
	margin: 0 0 8px;
}

.jm-emp-title a { color: var(--jm-ink); text-decoration: none; }
.jm-emp-title a:hover { color: var(--jm-accent); }

.jm-emp-loc {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	font-size: 14px;
	line-height: 24.5px;
	color: #000;
	padding: 3px 0;
}

.jm-pin {
	flex: none;
	width: 15px;
	height: 15px;
	margin-top: 5px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
}

.jm-empty { font-size: 15px; color: var(--jm-muted); }

@media (max-width: 900px) {
	.jm-emp-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
	.jm-body-liste { padding: 24px 20px; }
	.jm-emp { padding: 20px; gap: 14px; }
	.jm-emp-logo { width: 60px; height: 60px; }
	.jm-emp-logo img { max-width: 60px; max-height: 60px; }
}

/* ========================================================== Berufsseite */

/*
 * Gemessen an der bisherigen Seite /job/<slug>/. Der Kartenrahmen, die
 * Spaltenbreite (422px) und das Titelbild (200px) sind dieselben wie beim
 * Betriebsprofil — sie stehen weiter oben und gelten hier mit.
 *
 * Nicht nachgebaut ist der Kasten "Job Overview": er steht zwar im alten
 * Markup, ist dort aber per display:none abgeschaltet.
 */

/*
 * Die Seitenspalte ragt rechts 15px über den Innenabstand hinaus — das
 * kam bisher daher, dass das Raster von Bootstrap seine negativen
 * Ränder (-15px) gegen die Spaltenabstände rechnete. Sichtbar ist davon
 * nur, dass die Spalte 15px breiter beginnt; wir bilden es über den
 * kleineren rechten Innenabstand nach, statt negative Ränder zu erben.
 * Ergebnis wie gemessen: Inhalt links 102..916, Spalte rechts 931..1353.
 */
/*
 * Ohne Titelbild beginnt der Inhalt 120px unter der Kartenkante, mit
 * Titelbild 50px darunter. Die alte Seite kam auf dieselben Werte über
 * zwei addierte Abstände (Karte 40px bzw. 170px, plus 80px vom Raster),
 * wobei das Bild im oberen Abstand lag. Bei uns steht das Bild im Fluss,
 * deshalb reicht ein Wert je Fall.
 */
.jm-page-beruf .jm-body { padding: 120px 25px 40px 40px; }
.jm-page-beruf .has-cover .jm-body { padding-top: 50px; }

.jm-job-head { margin-bottom: 50px; }

/* Die Überschrift der Beschreibung steht hier 20px über dem Text, nicht
   16px wie sonst — gemessen an der bisherigen Seite. */
.jm-page-beruf .jm-about .jm-h2 { margin-bottom: 20px; }

.jm-page-beruf .jm-fav { padding: 0; }

/* Fließtext und Sprechblasentext stehen hier gedämpft, nicht schwarz. */
.jm-page-beruf .jm-prose,
.jm-bubble-text { color: var(--jm-muted); }

.jm-page-beruf .jm-title {
	font-size: 26px;
	line-height: 33.8px;
	letter-spacing: .78px;
	margin: 0;
	gap: 10px;
}

.jm-page-beruf .jm-fav svg { width: 25px; height: 25px; }

/* Berufsfelder unter dem Titel: Koffer-Symbol, dann die Felder mit
   ihren eigenen Icons — kommagetrennt in einer Zeile. */
/* Bewusst kein Flex-Layout: die Zeile ist Fließtext mit Kommas dazwischen.
   In einem Flex-Container fallen die Leerzeichen nach den Kommas weg, die
   Aufzählung klebte dann zusammen. */
.jm-job-cats-head {
	font-size: 14px;
	line-height: 24.5px;
	color: var(--jm-muted);
	margin: 5px 0 0;
}

.jm-job-cats-head .jm-cat { color: #696969; }
.jm-job-cats-head .jm-cat:hover { color: var(--jm-accent); }

.jm-case {
	display: inline-block;
	width: 17px;
	height: 17px;
	margin-right: 9px;
	vertical-align: -3px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linejoin: round;
	color: var(--jm-ink);
}

/* Abstand und Zeilenhoehe stehen jetzt bei .jm-job-types fuer alle Karten. */
.jm-page-beruf .jm-job-types { margin-top: 12px; }

.jm-page-beruf .jm-about { margin-bottom: 50px; }
.jm-page-beruf .jm-about .jm-prose p { margin: 0 0 20px; }

/* ------------------------------------------- Betriebe zu diesem Beruf */

.jm-job-employers .jm-h2 {
	font-size: 19px;
	line-height: 24.7px;
	letter-spacing: .57px;
	margin: 0 0 21px;
}

.jm-h2-empty {
	text-align: center;
	color: grey;
}

.jm-emp-cards { display: flex; flex-direction: column; gap: var(--jm-gap); }

.jm-jobemp {
	background: var(--jm-card);
	border: 2px solid var(--jm-line);
	box-shadow: var(--jm-shadow);
	padding: 30px;
	display: flex;
	align-items: center;
	gap: 5px;
	transition: background-color .35s ease-in-out, box-shadow .35s ease-in-out;
}

/* Wie bisher: die ganze Karte hebt sich beim Überfahren an. */
.jm-jobemp:hover {
	background-color: #f07e262b;
	box-shadow: 8px 8px 0 0 #000;
}

.jm-jobemp-logo {
	flex: none;
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	overflow: hidden;
	line-height: 0;
}

.jm-jobemp-logo img {
	max-width: 80px;
	max-height: 80px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.jm-jobemp-text { min-width: 0; }

.jm-jobemp-title {
	/* Anders als in der Betriebsübersicht steht der Name hier in der
	   Fließtextschrift — gemessen an der bisherigen Seite. */
	font-family: var(--jm-text);
	font-size: 18px;
	line-height: 23.4px;
	letter-spacing: .54px;
	font-weight: 500;
	color: var(--jm-ink);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.jm-jobemp-title a { color: var(--jm-ink); text-decoration: none; }
.jm-jobemp-title a:hover { color: var(--jm-accent); }

.jm-jobemp-social { line-height: 0; }
.jm-jobemp-social img { width: 20px; height: 20px; display: block; }

.jm-jobemp-metas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Kein Zeilenabstand: brechen die Angaben um, sollen sie so eng
	   stehen wie normaler Fließtext — sonst wächst die Karte. */
	gap: 0 20px;
	font-size: 15px;
	line-height: 26.25px;
	color: var(--jm-ink);
}

.jm-jobemp-meta { display: inline-flex; align-items: center; gap: 6px; }
.jm-jobemp-meta a { color: inherit; text-decoration: none; }
.jm-jobemp-meta a:hover { color: var(--jm-accent); }

.jm-env,
.jm-tel {
	flex: none;
	width: 15px;
	height: 15px;
	fill: currentColor;
}

.jm-jobemp-meta .jm-pin { margin-top: 0; }

/* ------------------------------------------- Sprechblase mit der Person */

.jm-dialog { margin-top: 50px; }

.jm-bubble {
	position: relative;
	max-width: 300px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 0 20px rgba(0, 0, 0, .15);
	/* Unten 13px statt 16px: so endete die Blase auch bisher unter dem
	   Text. Zustande kam das dort über einen negativen Außenabstand, den
	   die Spitze wieder ausglich — gemessen sind es 13px, und die
	   schreiben wir hier direkt hin. */
	padding: 16px 16px 13px;
	margin: -50px 0 20px;
}

/* Die Spitze sitzt rechts unten und zeigt zur Person darunter. */
.jm-bubble::after {
	content: '';
	position: absolute;
	top: 100%;
	right: 41px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 7px 0 7px;
	border-color: #fff transparent transparent transparent;
}

.jm-bubble-title {
	font-family: var(--jm-display);
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: .48px;
	color: #333;
	/* Inline-block ohne unteren Abstand: Titel und Text laufen direkt
	   ineinander, wie bisher. */
	display: inline-block;
	margin: 0 12px 0 0;
}

.jm-bubble-text { font-size: 15px; line-height: 26.25px; }

.jm-person {
	position: relative;
	height: 300px;
}

.jm-person img {
	position: absolute;
	right: 0;
	bottom: 0;
	width: auto;
	height: 100%;
}

@media (max-width: 1024px) {
	/* Einspaltig rutscht die Person unter den Text — dort braucht sie
	   keinen Sockel von 300px mehr. */
	.jm-dialog { margin-top: 20px; }
	.jm-bubble { margin-top: 0; max-width: none; }
	.jm-person { height: auto; text-align: right; }
	.jm-person img { position: static; height: 300px; display: inline-block; }
}

@media (max-width: 640px) {
	.jm-page-beruf .jm-title { font-size: 22px; }
	.jm-job-head { margin-bottom: 30px; }
	.jm-jobemp { padding: 20px; flex-direction: column; align-items: flex-start; gap: 14px; }
	.jm-jobemp-metas { gap: 4px 14px; }
}

/* ========================================================== Merkliste */

/*
 * Shortcode [jobmesse_favoriten]. Sitzt in einer fremden Seite, bringt
 * deshalb keinen eigenen Rahmen mit — nur die beiden Listen.
 */

.jm-favoriten .jm-fav-block { margin-bottom: 50px; }
.jm-favoriten .jm-fav-block:last-child { margin-bottom: 0; }

.jm-favoriten .jm-h2 {
	font-size: 19px;
	line-height: 24.7px;
	letter-spacing: .57px;
	margin: 0 0 21px;
}

/*
 * Das Herz sitzt in der oberen rechten Ecke der Karte — und zwar an der
 * Karte selbst, nicht am Titel. Über den Titel ausgerichtet lag es bei
 * den Betrieben falsch: deren Karte zentriert Logo und Text senkrecht,
 * das Herz rutschte dadurch in die Mitte und blieb an der Textbreite
 * kleben statt am Kartenrand (gemessen: 48px von oben, 253px von rechts
 * statt 30/32 wie bei den Berufen).
 */
.jm-favoriten .jm-job,
.jm-favoriten .jm-jobemp { position: relative; }

.jm-favoriten .jm-fav {
	position: absolute;
	top: 28px;
	right: 30px;
	padding: 0;
}

/* Platz freihalten, damit lange Namen nicht unter das Herz laufen. */
.jm-favoriten .jm-job-title,
.jm-favoriten .jm-jobemp-title { padding-right: 40px; }

.jm-favoriten .jm-job { padding: 28px 30px; }

/* Beim Entfernen blendet die Karte aus, statt einfach zu verschwinden. */
.jm-favoriten .jm-job,
.jm-favoriten .jm-jobemp { transition: opacity .25s ease; }

.jm-favoriten .is-removing { opacity: 0; }

.jm-favoriten .jm-empty { color: var(--jm-muted); }
.jm-favoriten .jm-empty a { color: var(--jm-accent); }

/* ========================================================= Berufsliste */

/*
 * /jobliste/ — gemessen an der bisherigen Seite /jobs/:
 *   Karte     x=60 w=1320, Innenabstand 40
 *   Überschrift 32px LuckiestGuy, 28px Abstand nach unten, volle Breite
 *   Spalten   links 804, Abstand 30, rechts 402
 *   Jobkarte  804 breit, Innenabstand 30, Titel bei 52px, Abstand 30
 *
 * Filter und Sortierung des Altplugins stehen zwar im Markup, sind dort
 * aber per CSS abgeschaltet und waren nie sichtbar — deshalb fehlen sie
 * hier ganz.
 */

.jm-body-jobliste { display: block; padding: 40px; }

.jm-list-title {
	font-family: var(--jm-display);
	font-size: 32px;
	line-height: 41.6px;
	letter-spacing: .96px;
	font-weight: 500;
	color: var(--jm-ink);
	/* Oben wie unten 28px: die Überschrift stand bisher als h2 im
	   Textfluss und brachte ihre Ränder von dort mit. */
	margin: 28px 0;
}

.jm-list-cols {
	display: flex;
	align-items: flex-start;
	gap: 30px;
}

.jm-list-main { flex: 1 1 auto; min-width: 0; }
.jm-list-side { flex: 0 0 402px; }

.jm-page-jobliste .jm-empty { color: var(--jm-muted); }
.jm-page-jobliste .jm-empty a { color: var(--jm-accent); }

/* Die Sprechblase hängt hier tiefer als auf der Berufsseite. */
.jm-page-jobliste .jm-dialog { margin-top: 100px; }

/*
 * Kulisse hinter der Person: halbdurchsichtig, ragt nach rechts hinaus.
 * Die Auswahl muss .jm-person img übertreffen — sonst zieht die Regel von
 * der Berufsseite (ein Typ mehr, also gewichtiger) das Bild auf volle Höhe
 * und an den rechten Rand.
 */
.jm-person img.jm-person-bg {
	right: -100px;
	bottom: 30px;
	height: 70%;
	opacity: .5;
}

@media (max-width: 1024px) {
	.jm-list-cols { flex-direction: column; }
	.jm-list-side { flex: 1 1 auto; width: 100%; }
	.jm-page-jobliste .jm-dialog { margin-top: 20px; }
	/* Einspaltig ist für die Kulisse kein Platz mehr. */
	.jm-person-bg { display: none; }
}

@media (max-width: 640px) {
	.jm-body-jobliste { padding: 24px 20px; }
	.jm-list-title { font-size: 24px; line-height: 1.3; }
}

/* Koffer in der Jobkarte: etwas enger als auf der Berufsseite (25px bis
   zum ersten Berufsfeld statt 26px) — so war es gemessen. */
.jm-case-sm { margin-right: 8px; }

/* ================================================== Betrieb hinzufügen */

/*
 * Das bisherige Formular lief über Contact Form 7 und war ungestaltet —
 * Standardfelder des Browsers, graue Schaltfläche. Hier bekommt es die
 * Gestaltung der übrigen Seiten: dieselben Rahmen, Schriften und Farben
 * wie das Kontaktformular auf den Betriebsprofilen.
 */

.jm-betriebsformular { max-width: 850px; }

.jm-form-gross { gap: 22px; }

.jm-form-gruppe {
	font-family: var(--jm-display);
	font-size: 26px;
	line-height: 33.8px;
	letter-spacing: .78px;
	font-weight: 500;
	color: var(--jm-ink);
	margin: 28px 0 0;
}

.jm-feld { display: flex; flex-direction: column; gap: 6px; }

.jm-feld > label,
.jm-feld legend {
	font-size: 15px;
	line-height: 1.5;
	color: var(--jm-ink);
	font-weight: 600;
	padding: 0;
}

.jm-feld fieldset { border: 0; margin: 0; padding: 0; }
.jm-feld legend { margin-bottom: 8px; }

.jm-pflicht { color: var(--jm-accent); font-weight: 700; }

.jm-form-hinweis {
	font-size: 15px;
	line-height: 26.25px;
	color: var(--jm-muted);
	margin: 0 0 4px;
}

.jm-form-klein {
	font-size: 13px;
	line-height: 1.5;
	color: var(--jm-muted);
	margin: 2px 0 0;
}

/* Auswahlfelder: großzügige Trefferfläche, Text neben dem Kästchen */
.jm-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 24px;
	color: var(--jm-ink);
	padding: 5px 0;
	cursor: pointer;
	font-weight: 400;
}

.jm-option input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	accent-color: var(--jm-accent);
	cursor: pointer;
}

.jm-form input[type="tel"],
.jm-form input[type="url"],
.jm-form input[type="file"] {
	width: 100%;
	font-family: var(--jm-text);
	font-size: 15px;
	line-height: 1.6;
	color: var(--jm-ink);
	background: #fff;
	border: 2px solid var(--jm-line);
	border-radius: 10px;
	padding: 12px 16px;
}

.jm-form input[type="file"] { padding: 10px 12px; cursor: pointer; }

.jm-form input[type="file"]::file-selector-button {
	font-family: var(--jm-text);
	font-size: 14px;
	font-weight: 700;
	color: var(--jm-ink);
	background: var(--jm-pill);
	border: 0;
	border-radius: 8px;
	padding: 8px 16px;
	margin-right: 14px;
	cursor: pointer;
}

.jm-form input[type="file"]:hover::file-selector-button { background: rgba(10, 10, 10, .25); }

.jm-btn-senden { width: auto; min-width: 220px; margin-top: 6px; }

.jm-note-ok p,
.jm-note-error p { margin: 0 0 8px; }
.jm-note-ok p:last-child,
.jm-note-error p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
	.jm-form-gruppe { font-size: 22px; line-height: 1.3; }
	.jm-btn-senden { width: 100%; }
}

/* Sicherheitsfrage: schmaler als die übrigen Felder, sie ist kurz. */
.jm-feld-captcha input[type="text"] { max-width: 320px; }

/* ------------------------------------------------ 360°-Rundgänge (Übersicht) */

.jm-rg-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--jm-gap);
}

.jm-rg-card {
	display: block;
	background: var(--jm-card);
	border: 2px solid var(--jm-line);
	box-shadow: var(--jm-shadow);
	text-decoration: none;
	color: inherit;
	transition: transform .12s ease, box-shadow .12s ease;
}

.jm-rg-card:hover,
.jm-rg-card:focus-visible {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 0 #000;
}

.jm-rg-shot {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #202124;
	border-bottom: 2px solid var(--jm-line);
}

.jm-rg-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.jm-rg-title {
	display: block;
	font-family: var(--jm-display);
	font-size: 18px;
	line-height: 23.4px;
	letter-spacing: .54px;
	font-weight: 500;
	color: var(--jm-ink);
	padding: 18px 20px;
}

.jm-rg-card:hover .jm-rg-title,
.jm-rg-card:focus-visible .jm-rg-title {
	color: var(--jm-accent);
}

@media (max-width: 700px) {
	.jm-rg-grid { grid-template-columns: 1fr; }
}