/*
 * inserato-stellenanzeigen.css
 *
 * Gehoert zum Plugin und wird ueber wp_enqueue_style() geladen.
 * Farben und Typografie kommen als CSS-Variablen aus den Einstellungen
 * dazu und ueberschreiben die Vorgaben in dieser Datei.
 */

/* === Inserato Stellenanzeigen ============================================== */
.sjt-job,.sjt-jobs{
	--sjt-accent:#d8232a;
	--sjt-ink:#111821;
	--sjt-muted:#5b6774;
	--sjt-line:#e4e9ef;
	--sjt-soft:#f6f8fa;
	--sjt-radius:20px;
	--sjt-hero-img:none;
	box-sizing:border-box !important;
	display:block !important;
	float:none !important;
	clear:both !important;
	position:relative;
	width:auto !important;
	max-width:1120px !important;
	margin:0 auto 2.5em !important;
	padding:0 !important;
	color:var(--sjt-ink);
	text-align:left !important;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
	font-size:16px;
	line-height:1.62;
	font-weight:400;
	letter-spacing:normal;
	text-transform:none;
	-webkit-font-smoothing:antialiased;
}
.sjt-job--modern{
	background:#fff;
	border:1px solid var(--sjt-line);
	border-radius:var(--sjt-radius);
	overflow:hidden;
	box-shadow:0 14px 40px rgba(15,23,32,.08);
}
.sjt-job *,.sjt-job *::before,.sjt-job *::after,
.sjt-jobs *,.sjt-jobs *::before,.sjt-jobs *::after{box-sizing:border-box !important;}

/* Element-Resets mit erhoehter Spezifitaet (schlaegt Theme-Defaults) */
.sjt-job[data-sjt] p,.sjt-job[data-sjt] ul,.sjt-job[data-sjt] ol,.sjt-job[data-sjt] li,
.sjt-job[data-sjt] h2,.sjt-job[data-sjt] h3,.sjt-job[data-sjt] h4,
.sjt-job[data-sjt] dl,.sjt-job[data-sjt] dt,.sjt-job[data-sjt] dd,
.sjt-jobs[data-sjt] p,.sjt-jobs[data-sjt] ul,.sjt-jobs[data-sjt] li,
.sjt-jobs[data-sjt] h2,.sjt-jobs[data-sjt] h3,.sjt-jobs[data-sjt] h4{
	margin:0;padding:0;border:0;background:none;
	font-family:inherit;letter-spacing:normal;text-transform:none;
}
.sjt-job[data-sjt] ul,.sjt-jobs[data-sjt] ul{list-style:none !important;}
.sjt-job[data-sjt] li,.sjt-jobs[data-sjt] li{list-style:none !important;text-indent:0 !important;}
.sjt-job[data-sjt] li::before,.sjt-job[data-sjt] li::marker,
.sjt-jobs[data-sjt] li::before,.sjt-jobs[data-sjt] li::marker{content:none;}
.sjt-job[data-sjt] a,.sjt-jobs[data-sjt] a{text-decoration:none;box-shadow:none;border:0;}
.sjt-job[data-sjt] img,.sjt-job[data-sjt] svg,
.sjt-jobs[data-sjt] img,.sjt-jobs[data-sjt] svg{max-width:100% !important;height:auto;display:inline-block;vertical-align:middle;}
.sjt-job .sjt-icon,.sjt-jobs .sjt-icon{width:20px;height:20px;flex:0 0 20px;}

/* --- Hero (Layout modern) -------------------------------------------- */
.sjt-hero{
	position:relative;
	display:block;
	padding:clamp(28px,5vw,56px) clamp(20px,4vw,52px);
	background:linear-gradient(135deg,#0f1a26 0%,#1b2b3d 55%,#243a51 100%);
	color:#fff;
	isolation:isolate;
	overflow:hidden;
}
.sjt-hero__media,
.sjt-hero__veil{position:absolute;inset:0;display:block;pointer-events:none;}
.sjt-job--has-image .sjt-hero__media{
	background-image:var(--sjt-hero-img);
	background-size:cover;
	background-position:center;
	filter:blur(3px) saturate(.9);
	transform:scale(1.06);
	z-index:-2;
}
.sjt-job--has-image .sjt-hero__veil{
	background:linear-gradient(135deg,rgba(10,17,25,.90) 0%,rgba(12,22,33,.78) 45%,rgba(15,27,40,.68) 100%);
	-webkit-backdrop-filter:blur(2px);
	backdrop-filter:blur(2px);
	z-index:-1;
}
.sjt-hero__inner{position:relative;z-index:1;max-width:820px;}
.sjt-hero__eyebrow{
	display:inline-block;
	margin:0 0 14px !important;
	padding:5px 12px;
	border-radius:999px;
	background:rgba(255,255,255,.14);
	border:1px solid rgba(255,255,255,.22);
	color:#fff;
	font-size:12.5px;
	font-weight:600;
	letter-spacing:.06em !important;
	text-transform:uppercase !important;
	line-height:1.4;
}
.sjt-hero__title{
	margin:0 0 22px !important;
	color:#fff !important;
	font-size:clamp(26px,4.4vw,44px) !important;
	line-height:1.14 !important;
	font-weight:800 !important;
	letter-spacing:-.02em !important;
	overflow-wrap:break-word;
	hyphens:auto;
}
.sjt-facts{
	display:flex !important;
	flex-wrap:wrap !important;
	gap:10px 12px !important;
	margin:0 !important;
	padding:0 !important;
}
.sjt-fact{
	display:flex !important;
	align-items:center;
	gap:10px;
	min-width:0;
	padding:10px 16px;
	border-radius:14px;
	background:rgba(255,255,255,.12);
	border:1px solid rgba(255,255,255,.18);
	color:#fff;
	font-size:15px;
	line-height:1.3;
}
.sjt-fact svg{color:rgba(255,255,255,.8);}
.sjt-fact span{display:block;min-width:0;}
.sjt-fact__key{
	display:block;
	font-size:11px;
	font-weight:600;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:rgba(255,255,255,.68);
	margin-bottom:1px;
}
.sjt-fact strong{font-weight:700;color:#fff;word-break:break-word;}

/* --- Body (Layout modern) -------------------------------------------- */
.sjt-body{
	display:grid !important;
	grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
	gap:clamp(18px,2.4vw,28px);
	padding:clamp(22px,3.6vw,44px) clamp(20px,4vw,52px);
	background:#fff;
}
.sjt-block{
	display:block;
	min-width:0;
	padding:clamp(18px,2.2vw,26px);
	background:var(--sjt-soft);
	border:1px solid var(--sjt-line);
	border-radius:16px;
}
.sjt-block__title{
	display:flex !important;
	align-items:center;
	gap:10px;
	margin:0 0 14px !important;
	padding:0 0 12px !important;
	border-bottom:2px solid rgba(0,0,0,.06) !important;
	color:var(--sjt-ink) !important;
	font-size:17px !important;
	line-height:1.3 !important;
	font-weight:700 !important;
}
.sjt-block__title svg{color:var(--sjt-accent);}
.sjt-block--fliesstext{grid-column:1/-1;background:#fff;border-color:transparent;padding-left:0;padding-right:0;}
.sjt-absatz{
	margin:0 0 10px !important;
	color:#2c3742;
	font-size:15.5px;
	line-height:1.65;
	overflow-wrap:break-word;
}
.sjt-absatz:last-child{margin-bottom:0 !important;}
.sjt-block--fliesstext .sjt-list{margin:0 0 10px !important;}
.sjt-block--fliesstext .sjt-list:last-child{margin-bottom:0 !important;}
.sjt-sheet__absatz{
	margin:0 0 8px !important;
	font-size:15px;
	line-height:1.6;
	overflow-wrap:break-word;
}
.sjt-sheet__absatz:last-child{margin-bottom:0 !important;}
.sjt-sheet__absatz + .sjt-sheet__list{margin-bottom:8px !important;}
.sjt-sheet__list + .sjt-sheet__absatz{margin-top:8px !important;}
.sjt-list{display:block;margin:0 !important;padding:0 !important;}
.sjt-list li{
	position:relative;
	display:block;
	margin:0 0 10px !important;
	padding:0 0 0 26px !important;
	color:#2c3742;
	font-size:15.5px;
	line-height:1.6;
	overflow-wrap:break-word;
}
.sjt-list li:last-child{margin-bottom:0 !important;}
.sjt-list li::after{
	content:"";
	position:absolute;
	left:2px;
	top:.62em;
	width:8px;
	height:8px;
	border-radius:50%;
	background:var(--sjt-accent);
	opacity:.85;
}

/* --- CTA -------------------------------------------------------------- */
.sjt-cta{
	display:flex !important;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap:18px;
	padding:clamp(20px,3vw,32px) clamp(20px,4vw,52px);
	background:#0f1a26;
	color:#fff;
}
.sjt-cta__text{flex:1 1 260px;min-width:0;}
.sjt-cta__actions{display:flex !important;flex-wrap:wrap;gap:10px;flex:0 0 auto;}
.sjt-cta__lead{
	margin:0 0 4px !important;
	color:#fff !important;
	font-size:19px !important;
	font-weight:700 !important;
	line-height:1.3 !important;
}
.sjt-cta__sub{
	margin:0 !important;
	color:rgba(255,255,255,.72) !important;
	font-size:14.5px !important;
	line-height:1.55 !important;
}
.sjt-btn{
	display:inline-flex !important;
	align-items:center;
	justify-content:center;
	gap:10px;
	flex:0 0 auto;
	margin:0;
	padding:15px 28px !important;
	border:0;
	border-radius:999px;
	background:var(--sjt-accent) !important;
	color:#fff !important;
	font-family:inherit;
	font-size:16px !important;
	font-weight:700 !important;
	line-height:1.2 !important;
	text-decoration:none !important;
	text-transform:none !important;
	letter-spacing:normal !important;
	cursor:pointer;
	transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
	box-shadow:0 8px 22px rgba(216,35,42,.35);
}
.sjt-btn:hover,.sjt-btn:focus{
	color:#fff !important;
	transform:translateY(-2px);
	filter:brightness(1.06);
	box-shadow:0 12px 28px rgba(216,35,42,.42);
	text-decoration:none !important;
}
.sjt-btn:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.sjt-btn--ghost{
	background:transparent !important;
	border:1px solid rgba(255,255,255,.35) !important;
	box-shadow:none;
	font-weight:600 !important;
	padding:14px 22px !important;
}
.sjt-btn--ghost:hover{background:rgba(255,255,255,.10) !important;box-shadow:none;}

/* --- Layout A4 -------------------------------------------------------- */
.sjt-job--a4{max-width:900px !important;}
.sjt-sheet{
	display:block;
	max-width:210mm;
	margin:0 auto;
	padding:clamp(24px,5vw,26mm) clamp(20px,5vw,22mm);
	background:#fff;
	border:1px solid var(--sjt-line);
	box-shadow:0 10px 34px rgba(15,23,32,.09);
	font-size:15.5px;
	line-height:1.6;
	color:#1a2028;
}
.sjt-sheet__head{
	display:flex !important;
	flex-wrap:wrap;
	align-items:flex-end;
	justify-content:space-between;
	gap:12px;
	margin-bottom:14px;
}
.sjt-sheet__logo{max-height:64px;width:auto;}
.sjt-sheet__firma{font-size:20px;font-weight:700;letter-spacing:-.01em;}
.sjt-sheet__kicker{
	margin:0 !important;
	color:var(--sjt-muted) !important;
	font-size:12px !important;
	font-weight:600 !important;
	letter-spacing:.12em !important;
	text-transform:uppercase !important;
	text-align:right;
}
.sjt-sheet__sep{margin:0 8px;opacity:.5;}
.sjt-sheet__rule{height:2px;background:var(--sjt-ink);margin:0 0 22mm 0;}
.sjt-sheet__title{
	margin:0 0 6px !important;
	color:var(--sjt-ink) !important;
	font-size:clamp(24px,3.4vw,32px) !important;
	line-height:1.18 !important;
	font-weight:700 !important;
	letter-spacing:-.015em !important;
	overflow-wrap:break-word;
}
.sjt-sheet__pensum{
	margin:0 0 20px !important;
	color:var(--sjt-accent) !important;
	font-size:18px !important;
	font-weight:600 !important;
}
.sjt-sheet__meta{
	display:flex !important;
	flex-wrap:wrap;
	gap:0 32px;
	margin:0 0 26px !important;
	padding:12px 0 !important;
	border-top:1px solid var(--sjt-line) !important;
	border-bottom:1px solid var(--sjt-line) !important;
}
.sjt-sheet__metaitem{min-width:120px;}
.sjt-sheet__meta dt{
	margin:0 0 1px !important;
	color:var(--sjt-muted) !important;
	font-size:10.5px !important;
	font-weight:700 !important;
	letter-spacing:.1em !important;
	text-transform:uppercase !important;
}
.sjt-sheet__meta dd{margin:0 !important;font-size:15px !important;font-weight:600 !important;}
.sjt-sheet__body{display:block;}
.sjt-sheet__block{margin:0 0 22px;break-inside:avoid;page-break-inside:avoid;}
.sjt-sheet__blocktitle{
	margin:0 0 8px !important;
	color:var(--sjt-ink) !important;
	font-size:16px !important;
	font-weight:700 !important;
	line-height:1.35 !important;
}
.sjt-sheet__list{margin:0 !important;padding:0 !important;}
.sjt-sheet__list li{
	position:relative;
	margin:0 0 5px !important;
	padding:0 0 0 18px !important;
	font-size:15px;
	line-height:1.55;
	overflow-wrap:break-word;
}
.sjt-sheet__list li::after{
	/*
	 * Ein runder Punkt, wie im modernen Layout und auf dem Portal. Vorher
	 * war es hier ein waagrechter Strich — im Editor sah man einen Punkt,
	 * im A4-Inserat einen Strich.
	 *
	 * Die Farbe bleibt die Schriftfarbe und nicht die Akzentfarbe: Das A4-
	 * Blatt ist fuer den Druck gedacht.
	 */
	content:"";
	position:absolute;
	left:2px;
	top:.62em;
	width:6px;
	height:6px;
	border-radius:50%;
	background:var(--sjt-ink);
}
.sjt-sheet__foot{
	margin-top:24px;
	padding-top:14px;
	border-top:1px solid var(--sjt-line);
}
.sjt-sheet__closing{margin:0 0 4px !important;font-size:15px !important;}
.sjt-sheet__kontakt{margin:0 !important;font-size:15px !important;font-weight:600 !important;}
.sjt-sheet__kontakt a{color:var(--sjt-accent) !important;text-decoration:underline !important;}
.sjt-sheet__actions{display:flex !important;flex-wrap:wrap;gap:10px;margin-top:18px;}
.sjt-sheet__actions .sjt-btn{padding:13px 24px !important;font-size:15px !important;border-radius:4px;box-shadow:none;}
.sjt-sheet__actions .sjt-btn--ghost{
	background:#fff !important;
	color:var(--sjt-ink) !important;
	border:1px solid var(--sjt-line) !important;
}
.sjt-sheet__actions .sjt-btn--ghost:hover{background:var(--sjt-soft) !important;}

/* --- Layout Block ----------------------------------------------------- */
/* Der Kopf ist aus einer Druckvorlage gemessen und nicht geschaetzt: Der
   Satzspiegel ist dort 474 pt breit, das grosse Bild nimmt 58 Prozent davon
   ein, das zweite die restlichen 42. Darum stehen hier Prozente und keine
   runden Pixelwerte — und darum stehen sie hier und nicht im PHP.

   Die Inhaltsbloecke benutzen bewusst die Klassen von «modern»
   (.sjt-block, .sjt-list, .sjt-absatz). Nur das Kartenaussehen wird
   zurueckgenommen: In diesem Layout sind es Abschnitte eines Dokuments,
   keine Kacheln. */
/* Abstand ringsum.
   Das Grundgeruest setzt padding:0, weil «modern» seinen Rahmen selbst
   mitbringt und A4 seinen Satzspiegel im Blatt hat. Block hat weder das
   eine noch das andere — ohne diese Regel stehen Bild und Text am
   nackten Rand des Inhaltsbereichs. */
.sjt-job--block{
	max-width:900px !important;
	/* Rand wie in der Druckvorlage: seitlich rund ein Zehntel der
	   Satzbreite, oben und unten weniger. Prozente, weil die Vorlage
	   Verhaeltnisse vorgibt und keine Pixel. */
	padding:clamp(18px,4%,44px) clamp(18px,8%,84px) !important;
}
/* Kein Abstand im Raster, in keiner Richtung.
   Die beiden Bilder sollen sich mit den Ecken beruehren — das grosse
   oben links, das zweite unten rechts, diagonal Ecke an Ecke. Jeder
   Abstand im Raster zieht genau diese Ecken auseinander. Den Abstand
   zum Text macht deshalb das Textfeld selbst. */
.sjt-tafel__kopf{
	display:grid;
	gap:0;
	margin:0 0 clamp(18px,2.4vw,26px);
}
.sjt-tafel__reihe{
	display:grid;
	grid-template-columns:58fr 42fr;
	gap:0;
}
.sjt-tafel__gross{grid-column:1;}
/* Das Logo steht oben, nicht mittig: In der Vorlage sitzt es auf der
   Hoehe der Bildoberkante. */
.sjt-tafel__marke{grid-column:2;align-self:start;justify-self:end;text-align:right;}
.sjt-tafel__intro{grid-column:1;padding:clamp(14px,2.2vw,26px) clamp(16px,2.6vw,30px) 0 0;}
.sjt-tafel__klein{grid-column:2;}
/* Fehlt das zweite Bild, nimmt der Text die ganze Breite — eine leere
   Spalte stehen zu lassen waere ein Loch im Satz. */
.sjt-tafel__intro:only-child{grid-column:1/-1;}
.sjt-tafel__gross img,.sjt-tafel__klein img{
	display:block;
	width:100%;
	height:auto;
	border-radius:4px;
}
.sjt-tafel__logo{
	display:block;
	width:auto;
	max-width:100%;
	max-height:96px;
	margin-left:auto;
}
.sjt-tafel__firma{
	display:block;
	color:var(--sjt-ink) !important;
	font-size:18px;
	font-weight:700;
}
.sjt-tafel__title{
	margin:0 0 6px !important;
	padding:0 !important;
	color:var(--sjt-ink) !important;
	font-size:clamp(23px,3vw,32px) !important;
	line-height:1.18 !important;
	font-weight:800 !important;
}
.sjt-tafel__fakten{
	margin:0 0 clamp(16px,2.2vw,24px) !important;
	color:var(--sjt-muted) !important;
	font-size:15.5px;
}
.sjt-tafel__body{display:block;}
.sjt-job--block .sjt-block{
	background:none !important;
	border:0 !important;
	border-radius:0 !important;
	padding:0 !important;
	margin:0 0 clamp(16px,2.2vw,22px) !important;
}
.sjt-job--block .sjt-block:last-child{margin-bottom:0 !important;}
.sjt-job--block .sjt-block__title{
	margin:0 0 8px !important;
	padding:0 !important;
	border:0 !important;
	font-size:18px !important;
}
.sjt-tafel__foot{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin:clamp(16px,2.2vw,24px) 0 0;
}
/* Das Bewerbungsformular folgt unmittelbar auf die Knoepfe und bringt
   oben keinen eigenen Abstand mit. */
.sjt-job--block .sjt-bewerbung{margin-top:clamp(26px,3.6vw,44px);}
/* Der Geist-Knopf ist fuer den dunklen Balken in «modern» gemacht: weisse
   Schrift, weisser Rahmen, kein Hintergrund. Hier steht er auf Weiss und
   waere unsichtbar — vorhanden, anklickbar und nicht zu sehen.

   Beim Darueberfahren kommt ein zweites Mal Weiss: Die erzeugte
   Typografie setzt «.sjt-btn,.sjt-btn:hover{color:#fff !important}» fuer
   alle Knoepfe. Dagegen hilft nur eine Regel mit eigenem :hover — zwei
   Klassen plus Pseudoklasse schlagen eine Klasse plus Pseudoklasse,
   unabhaengig von der Reihenfolge. Deshalb steht hier beides. */
.sjt-tafel__foot .sjt-btn--ghost{
	background:#fff !important;
	color:var(--sjt-accent) !important;
	border:1px solid var(--sjt-accent) !important;
}
.sjt-tafel__foot .sjt-btn--ghost:hover,
.sjt-tafel__foot .sjt-btn--ghost:focus{
	background:var(--sjt-accent) !important;
	border-color:var(--sjt-accent) !important;
	color:#fff !important;
	box-shadow:none;
}
@media (max-width:640px){
	/* Eine Spalte. Die festen grid-column-Angaben muessen mit zurueck,
	   sonst legt der Browser eine zweite, leere Spalte an. */
	.sjt-tafel__reihe{grid-template-columns:1fr;}
	.sjt-tafel__gross,.sjt-tafel__marke,
	.sjt-tafel__intro,.sjt-tafel__klein{grid-column:1;}
	.sjt-tafel__marke{justify-self:start;text-align:left;}
	.sjt-tafel__logo{margin-left:0;}
}
@media print{
	/* Die Bilder bleiben — genau sie sind in diesem Layout der Zweck. */
	.sjt-job--block{max-width:none !important;padding:0 !important;}
	.sjt-tafel__foot{display:none !important;}
	.sjt-tafel__title{font-size:21pt !important;}
	.sjt-job--block .sjt-block,
	.sjt-tafel__kopf{break-inside:avoid;page-break-inside:avoid;}
}

/* --- Layout Banner ------------------------------------------------------ */
/* Aus der Vorlage eines Kunden gemessen, Seite 595 pt breit:
   Bildband randabfallend 604 x 208 pt (2,9 zu 1), Claim 14 pt bei 7,8 %
   von links, Logo buendig an der rechten Bandkante, Satzspiegel mit
   8,4 % Rand, Beschriftungsspalte der Faktenzeile 23 % der Satzbreite,
   QR-Code 99 pt im Quadrat (20 % der Satzbreite).
   Darum Prozente: Die Vorlage gibt Verhaeltnisse vor, keine Pixel. */
.sjt-job--banner{
	max-width:1000px !important;
	background:#fff;
}
.sjt-band{
	position:relative;
	display:block;
	aspect-ratio:2.9/1;
	min-height:190px;
	overflow:hidden;
	background:var(--sjt-soft);
}
.sjt-band__bild{
	position:absolute;
	inset:0;
	width:100% !important;
	height:100% !important;
	object-fit:cover;
	object-position:center;
}
/* Ein heller Verlauf von links. In der Vorlage ist die linke Bildhaelfte
   zufaellig hell; bei einem anderen Bild stuende der Claim sonst auf
   Dunkel und waere weg. */
.sjt-band__schleier{
	position:absolute;
	inset:0;
	background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.75) 34%,rgba(255,255,255,0) 62%);
}
.sjt-band__claim{
	position:absolute;
	left:7.8%;
	top:34%;
	right:42%;
	margin:0 !important;
	color:#404040 !important;
	font-size:clamp(17px,2.2vw,27px) !important;
	line-height:1.28 !important;
	font-weight:700 !important;
}
.sjt-band__logo{
	position:absolute;
	right:1%;
	bottom:6%;
	width:auto !important;
	max-width:30%;
	max-height:34%;
}
.sjt-band__satz{
	padding:clamp(20px,4%,42px) clamp(18px,8.4%,88px) clamp(24px,5%,52px);
}
.sjt-band__vorzeile{
	margin:0 0 clamp(10px,1.4vw,16px) !important;
	font-size:15.5px;
	line-height:1.5;
}
.sjt-band__title{
	margin:0 0 clamp(14px,2vw,22px) !important;
	padding:0 !important;
	color:var(--sjt-accent) !important;
	font-size:clamp(22px,2.9vw,31px) !important;
	line-height:1.2 !important;
	font-weight:700 !important;
}
/* Das Pensum steht klein hinter dem Titel, so wie in der Vorlage. */
.sjt-band__pensum{
	display:inline;
	white-space:nowrap;
	font-size:.55em;
	font-weight:600;
}
.sjt-band__intro{margin:0 0 clamp(16px,2.2vw,24px);}
.sjt-band__fakten{
	display:grid !important;
	grid-template-columns:minmax(104px,23%) minmax(0,1fr);
	gap:6px 12px;
	margin:0 0 clamp(18px,2.6vw,28px) !important;
	padding:0 !important;
	font-size:15.5px;
}
.sjt-band__fakten dt{
	margin:0 !important;
	color:var(--sjt-accent) !important;
	font-weight:600;
}
.sjt-band__fakten dd{margin:0 !important;color:var(--sjt-ink) !important;}
.sjt-band__bloecke{display:block;}
/* Wie im Block-Layout: Abschnitte eines Dokuments, keine Kacheln. */
.sjt-job--banner .sjt-block{
	background:none !important;
	border:0 !important;
	border-radius:0 !important;
	padding:0 !important;
	margin:0 0 clamp(16px,2.4vw,24px) !important;
}
.sjt-job--banner .sjt-block:last-child{margin-bottom:0 !important;}
/* Klein, fett, in der Akzentfarbe — in der Vorlage sind die Blocktitel
   sogar kleiner als der Fliesstext. */
.sjt-job--banner .sjt-block__title{
	margin:0 0 8px !important;
	padding:0 !important;
	border:0 !important;
	color:var(--sjt-accent) !important;
	font-size:15px !important;
	letter-spacing:.01em;
}
.sjt-job--banner .sjt-list{padding-left:clamp(10px,3.6%,20px) !important;}
.sjt-band__schluss{
	display:grid;
	grid-template-columns:minmax(0,1fr) auto;
	gap:clamp(16px,3vw,32px);
	align-items:end;
	margin:clamp(20px,3vw,32px) 0 0;
}
.sjt-band__frage-titel{
	margin:0 0 8px !important;
	padding:0 !important;
	color:var(--sjt-accent) !important;
	font-size:15px !important;
	font-weight:700 !important;
}
.sjt-band__frage a{color:var(--sjt-accent) !important;}
.sjt-band__qr{
	margin:0 !important;
	text-align:center;
}
.sjt-band__qr img{
	display:block;
	width:clamp(90px,20%,132px);
	min-width:90px;
	height:auto;
}
.sjt-band__qr figcaption{
	margin-top:6px;
	color:#404040 !important;
	font-size:12px;
	font-weight:700;
}
.sjt-band__foot{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin:clamp(18px,2.6vw,28px) 0 0;
}
/* Derselbe Grund wie im Block-Layout: Der Geist-Knopf ist fuer den
   dunklen Balken gemacht und waere hier unsichtbar — in Ruhe wie beim
   Darueberfahren. */
.sjt-band__foot .sjt-btn--ghost{
	background:#fff !important;
	color:var(--sjt-accent) !important;
	border:1px solid var(--sjt-accent) !important;
}
.sjt-band__foot .sjt-btn--ghost:hover,
.sjt-band__foot .sjt-btn--ghost:focus{
	background:var(--sjt-accent) !important;
	border-color:var(--sjt-accent) !important;
	color:#fff !important;
	box-shadow:none;
}
.sjt-job--banner .sjt-bewerbung{margin-top:clamp(26px,3.6vw,44px);}
@media (max-width:640px){
	.sjt-band{aspect-ratio:auto;min-height:0;}
	.sjt-band__bild{position:static;height:auto !important;}
	.sjt-band__schleier{display:none;}
	/* Auf dem Telefon steht der Claim unter dem Bild statt darauf — ueber
	   einem 2,9-zu-1-Ausschnitt bliebe fuer ihn kein Platz. */
	.sjt-band__claim{position:static;right:auto;margin:12px 16px 0 !important;}
	.sjt-band__logo{position:static;margin:10px 16px 14px auto;max-width:48%;max-height:60px;}
	.sjt-band__fakten{grid-template-columns:1fr;gap:0;}
	.sjt-band__fakten dt{margin-top:8px !important;}
	.sjt-band__fakten dt:first-child{margin-top:0 !important;}
	.sjt-band__schluss{grid-template-columns:1fr;}
	.sjt-band__qr{text-align:left;}
}
@media print{
	/* Das Band bleibt — es ist der Grund fuer dieses Layout. */
	.sjt-job--banner{max-width:none !important;}
	.sjt-band__satz{padding-left:0 !important;padding-right:0 !important;}
	.sjt-band__foot{display:none !important;}
	.sjt-band,.sjt-band__schluss,.sjt-job--banner .sjt-block{break-inside:avoid;page-break-inside:avoid;}
}

/* --- Kontaktbox (alle Layouts) --------------------------------------- */
/* Steht in jedem Layout unter dem Inserat und bleibt beim Drucken stehen.
   Sie ist der einzige Ort, an dem Adresse, Telefon und E-Mail als Text
   erscheinen — Schaltflaechen sind auf Papier nicht anklickbar. */
.sjt-kontaktbox{
	margin:clamp(18px,2.4vw,26px) 0 0;
	padding:clamp(14px,1.8vw,20px) clamp(16px,2vw,22px);
	background:var(--sjt-soft);
	border:1px solid var(--sjt-line);
	border-radius:14px;
}
/* Im Layout «modern» sitzt die Box im gerahmten Kasten und braucht
   denselben Seitenabstand wie der Rumpf. */
.sjt-job--modern .sjt-kontaktbox{
	margin:0 clamp(20px,4vw,52px) clamp(22px,3.6vw,44px);
}
.sjt-kontaktbox__titel{
	margin:0 0 10px !important;
	padding:0 !important;
	color:var(--sjt-ink) !important;
	font-size:16px !important;
	line-height:1.3 !important;
	font-weight:700 !important;
}
.sjt-kontaktbox__liste{
	display:grid !important;
	grid-template-columns:max-content minmax(0,1fr);
	gap:4px 16px;
	margin:0 !important;
	padding:0 !important;
	font-size:15.5px;
}
.sjt-kontaktbox__liste dt{
	margin:0 !important;
	color:var(--sjt-muted) !important;
	font-weight:600;
}
.sjt-kontaktbox__liste dd{
	margin:0 !important;
	color:var(--sjt-ink) !important;
	overflow-wrap:break-word;
}
.sjt-kontaktbox__liste a{color:var(--sjt-accent) !important;}
/* Nur auf Papier: Am Bildschirm steht man schon auf dem Inserat. */
.sjt-nurdruck{display:none !important;}
@media (max-width:640px){
	.sjt-kontaktbox__liste{grid-template-columns:1fr;gap:0 0;}
	.sjt-kontaktbox__liste dt{margin-top:8px !important;}
	.sjt-kontaktbox__liste dt:first-child{margin-top:0 !important;}
}
@media print{
	.sjt-kontaktbox{
		margin:14mm 0 0 !important;
		padding:4mm 0 0 !important;
		background:none !important;
		border:0 !important;
		border-top:1px solid #999 !important;
		border-radius:0 !important;
		break-inside:avoid;
		page-break-inside:avoid;
	}
	.sjt-kontaktbox__liste a{color:#000 !important;text-decoration:none !important;}
	.sjt-nurdruck{display:block !important;}
}

/* --- Uebersicht nach Kategorie --------------------------------------- */
/* Die Ueberschrift bleibt die des Themes: Sie steht auf einer Seite
   neben anderen Ueberschriften und soll aussehen wie diese. Geregelt
   wird nur der Abstand, den sonst niemand setzt. */
.sjt-jobs__heading{margin:0 0 clamp(12px,1.6vw,18px) !important;}
.sjt-gruppen .sjt-jobs{margin-bottom:clamp(28px,4vw,48px) !important;}
.sjt-gruppen .sjt-jobs:last-child{margin-bottom:0 !important;}

/* --- Liste ------------------------------------------------------------ */
.sjt-jobs{max-width:1120px !important;}
.sjt-rows{display:grid !important;gap:10px;}
.sjt-row{
	display:block;
	background:#fff;
	border:1px solid var(--sjt-line);
	border-radius:14px;
	transition:border-color .16s ease,box-shadow .16s ease;
}
.sjt-row:hover{border-color:#c2ccd8;box-shadow:0 8px 22px rgba(15,23,32,.08);}
.sjt-row__inner{
	display:flex !important;
	flex-wrap:wrap;
	align-items:center;
	gap:10px 18px;
	width:100%;
	padding:16px 18px;
	background:none;
	border:0;
	color:inherit !important;
	font-family:inherit;
	font-size:inherit;
	text-align:left;
	cursor:pointer;
}
.sjt-row__main{flex:1 1 240px;min-width:0;}
.sjt-row__title{
	margin:0 !important;
	color:var(--sjt-ink) !important;
	font-size:17.5px !important;
	font-weight:700 !important;
	line-height:1.3 !important;
	overflow-wrap:break-word;
}
.sjt-row:hover .sjt-row__title{color:var(--sjt-accent) !important;}
.sjt-row__fields{
	display:flex !important;
	flex-wrap:wrap;
	gap:6px 8px;
	margin-top:6px !important;
}
.sjt-chip{
	display:inline-block !important;
	padding:3px 10px;
	background:var(--sjt-soft);
	border:1px solid var(--sjt-line);
	border-radius:999px;
	color:#3c4855;
	font-size:13px;
	line-height:1.5;
	white-space:nowrap;
	max-width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
}
.sjt-chip--accent{
	background:rgba(216,35,42,.08);
	border-color:rgba(216,35,42,.25);
	color:#a71b21;
	font-weight:600;
}
.sjt-row__go{
	flex:0 0 auto;
	display:inline-flex !important;
	align-items:center;
	gap:8px;
	color:var(--sjt-accent) !important;
	font-size:14.5px;
	font-weight:600;
	white-space:nowrap;
}
.sjt-row__go svg{width:18px;height:18px;flex:0 0 18px;}
.sjt-empty{
	padding:32px 20px;
	background:var(--sjt-soft);
	border:1px dashed var(--sjt-line);
	border-radius:14px;
	color:var(--sjt-muted);
	text-align:center;
}

/* Akkordeon (ohne JavaScript) */
.sjt-acc{
	background:#fff;
	border:1px solid var(--sjt-line);
	border-radius:14px;
	overflow:hidden;
}
.sjt-acc > summary{
	display:block;
	padding:16px 18px;
	cursor:pointer;
	list-style:none;
}
.sjt-acc > summary::-webkit-details-marker{display:none;}
.sjt-acc[open] > summary{border-bottom:1px solid var(--sjt-line);background:var(--sjt-soft);}
.sjt-acc__body{padding:8px 0 0;}
.sjt-acc__body .sjt-job{margin:0 !important;max-width:none !important;border:0;box-shadow:none;border-radius:0;}
.sjt-acc__body .sjt-sheet{border:0;box-shadow:none;max-width:none;}

/* Popup */
.sjt-modal{
	width:min(1000px,94vw);
	max-width:min(1000px,94vw);
	max-height:92vh;
	padding:0;
	border:0;
	border-radius:18px;
	background:#fff;
	color:var(--sjt-ink);
	overflow:hidden;
}
.sjt-modal::backdrop{background:rgba(9,15,22,.62);}
.sjt-modal__scroll{max-height:92vh;overflow-y:auto;overscroll-behavior:contain;}
.sjt-modal__scroll .sjt-job{margin:0 !important;max-width:none !important;border:0;border-radius:0;box-shadow:none;}
.sjt-modal__scroll .sjt-sheet{border:0;box-shadow:none;max-width:none;}
.sjt-modal__close{
	position:absolute;
	top:12px;
	right:12px;
	z-index:5;
	display:inline-flex !important;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	padding:0;
	border:0;
	border-radius:50%;
	background:rgba(255,255,255,.92);
	color:#111821;
	cursor:pointer;
	box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.sjt-modal__close:hover{background:#fff;}
.sjt-modal__close svg{width:20px;height:20px;}

/* --- Mobile ---------------------------------------------------------- */
@media (max-width:640px){
	.sjt-job--modern{border-radius:14px;}
	.sjt-job{margin-bottom:1.6em !important;}
	.sjt-fact{width:100%;}
	.sjt-cta{flex-direction:column;align-items:stretch;text-align:left;}
	.sjt-cta__actions{flex-direction:column;}
	.sjt-btn{width:100%;}
	.sjt-sheet__kicker{text-align:left;}
	.sjt-sheet__rule{margin-bottom:16px;}
	.sjt-row__inner{flex-direction:column;align-items:flex-start;}
	.sjt-modal{width:100vw;max-width:100vw;max-height:100vh;border-radius:0;}
	.sjt-modal__scroll{max-height:100vh;}
}
@media (prefers-reduced-motion:reduce){
	.sjt-btn{transition:none;}
	.sjt-btn:hover{transform:none;}
}

/* --- Druck ----------------------------------------------------------- */
@media print{
	.sjt-noprint,.sjt-row__go,.sjt-cta__actions{display:none !important;}
	.sjt-job,.sjt-sheet{box-shadow:none !important;border:0 !important;margin:0 !important;max-width:none !important;}
	.sjt-hero{background:#fff !important;color:#000;padding-left:0;padding-right:0;}
	.sjt-hero__title,.sjt-fact,.sjt-fact strong,.sjt-hero__eyebrow{color:#000 !important;}
	.sjt-fact,.sjt-hero__eyebrow{background:none !important;border-color:#999 !important;}
	.sjt-hero__media,.sjt-hero__veil{display:none !important;}
	.sjt-body{padding-left:0;padding-right:0;}
	.sjt-block{background:none !important;border:0 !important;padding:0 0 12px !important;}
	.sjt-cta{background:#fff !important;color:#000;padding-left:0;padding-right:0;}
	.sjt-cta__lead,.sjt-cta__sub{color:#000 !important;}
	.sjt-btn{display:none !important;}
	.sjt-sheet{padding:0 !important;}
}

/* === Bewerbungsformular ============================================== */
.sjt-bewerbung{
	max-width:1120px;
	margin:0 auto 2.5em;
	padding:1.8rem;
	box-sizing:border-box;
	background:var(--sjt-soft);
	border:1px solid var(--sjt-line);
	border-radius:var(--sjt-radius);
	color:var(--sjt-ink);
	text-align:left;
}
.sjt-bewerbung__titel{
	margin:0 0 1.2rem;
	font-size:1.3rem;
}
.sjt-bewerbung__raster{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:1rem;
}
.sjt-bewerbung__feld{margin:0 0 1.1rem;}
.sjt-bewerbung__feld label{
	display:block;
	font-weight:600;
	font-size:.92rem;
	margin-bottom:.3rem;
}
.sjt-bewerbung__feld input[type=text],
.sjt-bewerbung__feld input[type=email],
.sjt-bewerbung__feld textarea{
	width:100%;
	box-sizing:border-box;
	padding:.6rem .7rem;
	border:1px solid var(--sjt-line);
	border-radius:8px;
	font-size:1rem;
	font-family:inherit;
	background:#fff;
	color:var(--sjt-ink);
}
.sjt-bewerbung__feld textarea{min-height:8rem;line-height:1.6;resize:vertical;}
.sjt-bewerbung__feld small{
	display:block;
	margin-top:.35rem;
	color:var(--sjt-muted);
	font-size:.84rem;
}
.sjt-bewerbung__zustimmung label{
	font-weight:400;
	font-size:.9rem;
	display:flex;
	gap:.5rem;
	align-items:flex-start;
	line-height:1.5;
}
.sjt-bewerbung__zustimmung input{margin-top:.2rem;flex:none;}

/*
 * Die Falle bleibt fuer Menschen unsichtbar, fuer Skripte aber vorhanden.
 * Dasselbe steht zusaetzlich am Element selbst: Laedt dieses Stylesheet
 * einmal nicht, saehe man sonst ein Feld mit der Aufforderung, es leer zu
 * lassen — und wer es ausfuellt, dessen Bewerbung verschwaende lautlos.
 */
.sjt-falle{
	position:absolute !important;
	left:-9999px !important;
	width:1px;height:1px;
	overflow:hidden;
}

.sjt-hinweis{
	padding:.8rem 1rem;
	border-radius:8px;
	margin:0 0 1.2rem;
	font-size:.95rem;
}
.sjt-hinweis--ok{background:#e7f6ec;border:1px solid #a5d6b7;color:#14532d;}
.sjt-hinweis--fehler{background:#fdeaea;border:1px solid #f0b4b4;color:#7f1d1d;}
.sjt-hinweis:focus{outline:2px solid var(--sjt-accent);outline-offset:3px;}

/* --- Gesammelte Anhaenge ---------------------------------------------- */
.sjt-anhang__liste{
	display:block;
	margin:8px 0 0 !important;
	padding:0 !important;
	list-style:none !important;
}
.sjt-anhang__liste li{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	margin:0 0 4px !important;
	padding:6px 10px !important;
	border:1px solid #d9dee4;
	border-radius:6px;
	background:#f7f9fa;
	font-size:14px;
	line-height:1.4;
}
.sjt-anhang__liste li::before,.sjt-anhang__liste li::after{content:none !important;}
.sjt-anhang__name{overflow-wrap:anywhere;}
.sjt-anhang__weg{
	flex:0 0 auto;
	border:0;
	padding:2px 6px;
	background:none;
	color:#7f1d1d;
	font-size:13px;
	text-decoration:underline;
	cursor:pointer;
}
.sjt-anhang__weg:hover,.sjt-anhang__weg:focus{color:#4a0f0f;}
.sjt-anhang__meldung{
	margin:6px 0 0 !important;
	color:#7f1d1d;
	font-size:14px;
}

@media print{
	.sjt-bewerbung{display:none !important;}
}