/*
 * DocJob24 · Stellenansicht, Version 3 – Ergänzungen zu job-detail-2.css (Child-Theme „DocJob24 Child“)
 * Geladen nur in Version 3, nach job-detail-2.css. Kopfbereich, Bewerbungskarte, Bewerbungsleisten und Karte kommen
 * aus Version 2.
 * Aufbau: rechte Spalte als ein Informationsbereich (Bewerbung · Eckdaten · Arbeitgeber) · Stellenbeschreibung mit
 * Randüberschriften · hervorgehobene Leistungen · Ablauf „Sichtbarkeit Ihres Profils“ mit Schemaskizze ·
 * Arbeitsort · Fragen zur Stelle · ähnliche Stellen mit Hinweis auf den Job-Alarm.
 * Farben: Navy #162136 · Grün #14A077 / #0E7355 · Mint #8FE0C6 · Sand #F7F4EE · Hellgrün #EEF4F1 · Schrift Inter.
 * Bewegung: nur opacity/transform (keine Layoutverschiebung); prefers-reduced-motion schaltet sie über die Regel
 * in job-detail-2.css ab – dann steht der Endzustand der Skizze.
 */

/* ---------- Grundlagen ---------- */
.dj-job-detail .detail-version-dj3,
.dj-job-detail .detail-version-dj3 #primary,
.dj-job-detail .detail-version-dj3 #main,
.dj-job-detail .detail-version-dj3 .single-listing-wrapper {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	max-width: none;
}
.dj-job-detail .detail-version-dj3 { overflow-x: clip; }

.dj-job-detail {
	--dj-sand: #F7F4EE;
	--dj-sand-line: #E6DFD1;
	--dj3-cycle: 15s;
	--dj3-top: 24px;
	--dj-i-eyeoff: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6 6.1c.5-.1.9-.1 1.4-.1 5 0 8.5 4.2 9.5 6-.4.8-1.3 2-2.5 3.2M6.4 7.4C4.6 8.6 3.2 10.4 2.5 12c1 1.8 4.5 6 9.5 6 1.6 0 3-.4 4.2-1'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2M3 3l18 18'/%3E%3C/svg%3E");
	--dj-i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='8.2' r='4.2'/%3E%3Cpath d='M3.8 21c.7-4.4 4.1-7.2 8.2-7.2s7.5 2.8 8.2 7.2z'/%3E%3C/svg%3E");
	--dj-i-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16v-5a6 6 0 0 1 12 0v5l1.5 2h-15z'/%3E%3Cpath d='M10 20.5a2.2 2.2 0 0 0 4 0'/%3E%3C/svg%3E");
}
.admin-bar.dj-job-detail,
.admin-bar .dj-job-detail { --dj3-top: 56px; }

.dj-job :where(ul, ol):is(.dj3-kv, .dj3-chips, .dj3-ojobs, .dj3-flow__steps, .dj3-emp__benefits) {
	margin: 0;
	padding: 0;
	list-style: none;
}
.dj-job :is(.dj3-kv, .dj3-chips, .dj3-ojobs, .dj3-flow__steps, .dj3-emp__benefits) > li::before { content: none; }

/* ---------- Rechte Spalte: ein Informationsbereich (Bewerbung · Eckdaten · Arbeitgeber) ---------- */
.dj-job .dj3-plabel {
	margin: 0 0 12px;
	font: 600 12px/1.3 var(--dj-font);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--dj-mute);
}

/* Eckdaten: Bezeichnung links, Wert rechts */
.dj3-pfacts { container: dj3pfacts / inline-size; }
.dj3-spec { margin: 0; }
.dj3-spec__row {
	display: grid;
	grid-template-columns: minmax(0, 11fr) minmax(0, 14fr);
	gap: 2px 14px;
	padding: 8px 0;
	border-top: 1px solid var(--dj-hair);
}
.dj3-spec__row:first-child { padding-top: 0; border-top: 0; }
.dj3-spec__row:last-child { padding-bottom: 0; }
.dj-job .dj3-spec dt { margin: 0; font: 500 13px/1.45 var(--dj-font); color: var(--dj-mute); overflow-wrap: anywhere; }
.dj-job .dj3-spec dd {
	margin: 0;
	font: 600 14px/1.45 var(--dj-font);
	color: var(--dj-ink);
	overflow-wrap: anywhere;
	-webkit-hyphens: auto;
	hyphens: auto;
}
.dj3-spec dd a { color: var(--dj-ink); text-decoration: underline; text-decoration-color: var(--dj-line-h); text-underline-offset: 3px; }
.dj3-spec dd a:hover { color: var(--dj-gd); text-decoration-color: currentColor; }
.dj3-spec .dj-tags { gap: 4px; }
.dj3-spec .dj-tag { padding: 2px 8px; font-size: 13px; background: #fff; box-shadow: inset 0 0 0 1px var(--dj-hair); }
.dj3-facts__rest { margin-top: 12px !important; padding: 0 !important; border: 0 !important; }
@container dj3pfacts (min-width: 560px) {
	.dj3-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
	.dj3-spec__row:nth-child(2) { padding-top: 0; border-top: 0; }
	.dj3-spec__row:nth-last-child(2):nth-child(odd) { padding-bottom: 0; }
}

/* Arbeitgeber (kompakt – in der rechten Spalte und mobil nach der Stellenbeschreibung) */
.dj3-emp { container: dj3emp / inline-size; min-width: 0; scroll-margin-top: var(--dj3-top); }
.dj3-emp__head { display: flex; align-items: flex-start; gap: 12px; }
.dj3-emp__head .dj-logo { margin-top: 1px; }
.dj3-emp__id { min-width: 0; }
.dj-job .dj3-emp__name {
	font: 700 16px/1.3 var(--dj-font);
	letter-spacing: -.01em;
	color: var(--dj-ink);
	overflow-wrap: anywhere;
}
.dj3-emp__name a {
	color: var(--dj-ink);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}
.dj3-emp__name a:hover { color: var(--dj-gd); text-decoration-color: currentColor; }
.dj-job .dj3-emp__type { margin-top: 3px; font: 600 13.5px/1.4 var(--dj-font); color: var(--dj-text); }
.dj-job .dj3-emp__place { margin-top: 1px; font: 400 13.5px/1.4 var(--dj-font); color: var(--dj-mute); }
.dj-job .dj3-emp__about { margin-top: 12px; font: 400 14px/1.55 var(--dj-font); color: var(--dj-text); }
.dj3-emp__facts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 112px), 1fr));
	gap: 10px 16px;
	margin: 14px 0 0 !important;
}
.dj3-emp__fact { min-width: 0; }
.dj-job .dj3-emp__fact dt { margin: 0 0 1px; font: 500 12.5px/1.35 var(--dj-font); color: var(--dj-mute); }
.dj-job .dj3-emp__fact dd { margin: 0; font: 600 14px/1.4 var(--dj-font); color: var(--dj-ink); overflow-wrap: anywhere; }
.dj3-emp__fact dd a { color: var(--dj-ink); text-decoration: underline; text-decoration-color: var(--dj-line-h); text-underline-offset: 3px; }
.dj3-emp__fact dd a:hover { color: var(--dj-gd); text-decoration-color: currentColor; }
.dj3-emp__block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--dj-hair); }
.dj-job .dj3-emp__h3 { margin-bottom: 8px; font: 600 13px/1.35 var(--dj-font); color: var(--dj-ink); }
.dj3-emp__benefits { display: grid; gap: 3px 20px; }
.dj3-emp__benefits > li {
	position: relative;
	margin: 0;
	padding: 0 0 0 22px;
	font: 400 13.5px/1.4 var(--dj-font);
	color: var(--dj-text);
}
.dj3-emp__benefits > li::after {
	content: "";
	position: absolute;
	left: 1px;
	top: .2em;
	width: 14px;
	height: 14px;
	background: var(--dj-gd);
	-webkit-mask: var(--dj-i-check) center / 14px no-repeat;
	mask: var(--dj-i-check) center / 14px no-repeat;
}
.dj3-emp__socials { margin-top: 12px !important; font-size: 13px !important; }
.dj3-emp .dj-company__extra { margin-top: 12px; font-size: 13.5px; }
.dj3-ojob { margin: 0; padding: 0; }
.dj3-ojob + .dj3-ojob { border-top: 1px solid var(--dj-hair); }
.dj3-ojob__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 1px 12px;
	padding: 7px 0;
	color: var(--dj-ink) !important;
}
.dj3-ojob:first-child .dj3-ojob__link { padding-top: 0; }
.dj3-ojob:last-child .dj3-ojob__link { padding-bottom: 0; }
.dj3-ojob__link::after {
	content: "";
	grid-row: 1 / span 2;
	grid-column: 2;
	width: 15px;
	height: 15px;
	background: var(--dj-line-h);
	-webkit-mask: var(--dj-i-arrow) center / contain no-repeat;
	mask: var(--dj-i-arrow) center / contain no-repeat;
	transition: transform .2s var(--dj-ease), background-color .15s ease;
}
.dj3-ojob__t { font: 600 14px/1.4 var(--dj-font); color: var(--dj-ink); overflow-wrap: anywhere; }
.dj3-ojob__m { font: 400 13px/1.4 var(--dj-font); color: var(--dj-mute); }
.dj3-ojob__link:hover .dj3-ojob__t { color: var(--dj-gd); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.dj3-ojob__link:hover::after { background: var(--dj-gd); transform: translateX(3px); }
.dj3-emp__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 16px;
	margin-top: 14px !important;
	padding-top: 12px;
	border-top: 1px solid var(--dj-hair);
}
.dj3-emp__links .dj-link { font-size: 14.5px; }
.dj3-emp__all { font: 600 13.5px/1.4 var(--dj-font); color: var(--dj-gd) !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.dj3-emp__all:hover { color: var(--dj-ink) !important; }
@container dj3emp (min-width: 560px) {
	.dj3-emp__benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dj-job .dj3-emp__about { max-width: 68ch; }
}

/* Desktop: Bewerbung, Eckdaten und Arbeitgeber in einem Rahmen */
@media (min-width: 992px) {
	.dj3-aside { gap: 24px; padding-bottom: 48px; }
	.dj3-panel {
		position: relative;
		background: #fff;
		border: 1px solid var(--dj-hair);
		border-radius: 14px;
		box-shadow: var(--dj-shadow);
	}
	.dj3-panel > .dj-apply {
		padding: 24px 24px 20px;
		background: none;
		border: 0;
		border-radius: 14px 14px 0 0;
		box-shadow: none;
	}
	.dj3-panel > .dj3-pfacts,
	.dj3-panel__emp > .dj3-emp {
		padding: 18px 24px 20px;
	}
	.dj3-panel > .dj3-pfacts,
	.dj3-panel__emp {
		background: var(--dj-soft);
		border-top: 1px solid var(--dj-hair);
	}
	.dj3-panel__emp:empty { display: none; }
	.dj3-panel > :last-child,
	.dj3-panel:has(> .dj3-panel__emp:empty) > .dj3-pfacts { border-radius: 0 0 13px 13px; }
	/* Kompaktere Bewerbungskarte im Rahmen */
	.dj3-panel .dj-apply__salary { margin-top: 14px; }
	.dj3-panel .dj-apply__amount { font-size: 24px; }
	.dj3-panel .dj-apply__deadline,
	.dj3-panel .dj-apply__salary + .dj-apply__deadline { margin-top: 14px; padding-top: 12px; }
	.dj3-panel .dj-apply__action { margin-top: 16px; }
	.dj3-panel .dj-apply__note { margin-top: 14px !important; padding-top: 12px; }
	.dj3-panel .dj-apply__profile { margin-top: 8px !important; }

	/* Passt der Bereich in die Fensterhöhe, läuft er mit (assets/js/job-detail-3.js setzt „is-fit“);
	   sonst übernimmt nach dem Bereich die kompakte Bewerbungsleiste aus Version 2. */
	.dj3-aside.is-fit .dj3-panel { position: sticky; top: var(--dj3-top); }
	.dj3-aside.is-fit .dj-stick { display: none !important; }
}

/* Mobil und Tablet: Bewerbungskarte wie Version 2, Eckdaten darunter, Arbeitgeber in der Hauptspalte */
@media (max-width: 991.98px) {
	/* Abschnittsbezeichnungen wie in der Hauptspalte („Stellenbeschreibung“, „Arbeitsort“) */
	.dj-job .dj3-plabel {
		margin-bottom: 14px;
		padding-left: 32px;
		background: linear-gradient(currentColor, currentColor) left center / 22px 2px no-repeat;
		font-size: 12.5px;
		letter-spacing: .128em;
		color: var(--dj-gd);
	}
	.dj3-pfacts { margin-top: 28px; padding: 0 2px; }
	.dj3-panel__emp { display: none; }
	.dj-main > .dj3-emp {
		margin-top: 40px;
		padding-top: 32px;
		border-top: 1px solid var(--dj-hair);
	}
}

/* ---------- Hauptspalte: Abstände ---------- */
.dj-main { padding-bottom: 56px; }
.dj-job .dj-main > :is(.dj3-flow, .dj-decide, .dj-section) { scroll-margin-top: var(--dj3-top); }
.dj-job .dj-main > * + :is(.dj-insights, .dj-location, .dj3-contact) {
	margin-top: 44px;
	padding-top: 40px;
	border-top: 1px solid var(--dj-hair);
}
.dj-job .dj-main > :is(.dj3-flow, .dj-decide) + :is(.dj-insights, .dj-location, .dj3-contact) {
	margin-top: 44px;
	padding-top: 0;
	border-top: 0;
}
.dj-job .dj-main > .dmp-report { margin-top: 32px; }
@media (min-width: 992px) {
	.dj-main { padding-top: 44px; }
}

/* ---------- Stellenbeschreibung: Einleitung und Abschnitte mit Randüberschriften ---------- */
.dj3-desc { container: dj3desc / inline-size; }
.dj-job .dj3-desc .dj-h2--compact { margin-bottom: 16px; }
.dj-job .dj3-desc__lead { max-width: 64ch; }
.dj-job .dj3-desc__lead p { font-size: 18px; line-height: 1.66; color: var(--dj-ink); }
.dj-job .dj3-desc__lead p:first-child { font-size: 19px; }
.dj-job .dj3-desc__lead p:last-child { margin-bottom: 0; }
.dj3-desc__sections { margin-top: 26px; border-top: 1px solid var(--dj-hair); }
.dj3-desc__lead + .dj3-desc__sections { margin-top: 28px; }
.dj3-sec {
	padding: 24px 0 26px;
	border-bottom: 1px solid var(--dj-hair);
	scroll-margin-top: var(--dj3-top);
}
.dj3-sec:last-child { padding-bottom: 4px; border-bottom: 0; }
.dj3-sec__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.dj3-sec__num {
	flex: none;
	min-width: 28px;
	font: italic 400 22px/1 var(--dj-serif);
	color: var(--dj-gd);
	font-variant-numeric: lining-nums;
}
.dj-job .dj3-sec__title {
	font: 700 19px/1.3 var(--dj-font);
	letter-spacing: -.012em;
	color: var(--dj-ink);
	overflow-wrap: anywhere;
	-webkit-hyphens: auto;
	hyphens: auto;
}
.dj3-sec__body { min-width: 0; max-width: 66ch; }
.dj-job .dj3-sec__body > :last-child { margin-bottom: 0; }
.dj-job .dj3-desc__outro { max-width: 66ch; margin-top: 22px; font: 400 17px/1.7 var(--dj-font); color: var(--dj-text); }

@container dj3desc (min-width: 640px) {
	.dj3-sec {
		display: grid;
		grid-template-columns: 172px minmax(0, 1fr);
		column-gap: 36px;
		padding: 28px 0 30px;
	}
	/* Randüberschrift bleibt beim Lesen langer Abschnitte im Blick */
	.dj3-sec__head { display: block; position: sticky; top: calc(var(--dj3-top) + 4px); align-self: start; margin: 0; }
	.dj3-sec__num { display: block; margin-bottom: 8px; font-size: 26px; }
	.dj-job .dj3-sec__title { font-size: 18px; line-height: 1.35; }
	.dj3-sec:last-child { padding-bottom: 4px; }
}

/* Listen je Abschnitt */
.dj-job .dj3-desc .dj-prose ul.dj3-list > li { margin-bottom: .55em; }
.dj-job .dj3-desc .dj-prose ul:is(.dj3-list--check, .dj3-list--opt, .dj3-list--benefit) > li { padding-left: 32px; }

/* „Ihr Profil“: erforderlich = Häkchen, wünschenswert = offener Kreis */
.dj-job .dj3-desc .dj-prose ul.dj3-list--check > li::after {
	left: 1px;
	top: .34em;
	width: 18px;
	height: 18px;
	border-radius: 0;
	background: var(--dj-gd);
	-webkit-mask: var(--dj-i-check) center / 16px no-repeat;
	mask: var(--dj-i-check) center / 16px no-repeat;
}
.dj-job .dj3-desc .dj-prose ul.dj3-list--check > li.is-optional::after,
.dj-job .dj3-desc .dj-prose ul.dj3-list--opt > li::after {
	left: 5px;
	top: .6em;
	width: 11px;
	height: 11px;
	border: 2px solid var(--dj-line-h);
	border-radius: 50%;
	background: transparent;
	-webkit-mask: none;
	mask: none;
}
.dj3-req + .dj3-req { margin-top: 18px; }
.dj-job .dj3-desc .dj-prose p.dj3-req__label {
	margin: 0 0 8px;
	font: 600 12px/1.3 var(--dj-font);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dj-mute);
}
.dj-job .dj3-desc .dj-prose .dj3-req ul { margin-bottom: 0; }

/* „Wir bieten“: Leistungen auf hellgrüner Fläche, zweispaltig ab ausreichender Breite */
.dj-job .dj3-sec--bieten .dj3-sec__body {
	max-width: none;
	padding: 20px 24px 10px;
	background: var(--dj-tint);
	border-radius: 12px;
}
.dj-job .dj3-desc .dj-prose ul.dj3-list--benefit { margin-bottom: 0; }
.dj-job .dj3-desc .dj-prose ul.dj3-list--benefit > li {
	margin-bottom: 0;
	padding-bottom: .65em;
	color: var(--dj-ink);
	break-inside: avoid;
}
.dj-job .dj3-desc .dj-prose ul.dj3-list--benefit > li::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: .3em;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(14, 115, 85, .2);
}
.dj-job .dj3-desc .dj-prose ul.dj3-list--benefit > li::after {
	left: 4px;
	top: calc(.3em + 4px);
	width: 14px;
	height: 14px;
	border-radius: 0;
	background: var(--dj-gd);
	-webkit-mask: var(--dj-i-check) center / 14px no-repeat;
	mask: var(--dj-i-check) center / 14px no-repeat;
}
.dj-job .dj3-sec--bieten .dj3-sec__body > p:last-child { margin-bottom: .65em !important; }
@container dj3desc (min-width: 640px) {
	.dj-job .dj3-desc .dj-prose ul.dj3-list--benefit { columns: 2; column-gap: 32px; }
}

/* ---------- Ablauf „Sichtbarkeit Ihres Profils“ ---------- */
.dj3-flow {
	container: dj3flow / inline-size;
	position: relative;
	margin-top: 44px;
	padding: 26px 28px 28px;
	background: var(--dj-sand);
	border: 1px solid var(--dj-sand-line);
	border-radius: 16px;
}
.dj3-flow__head { max-width: 46ch; }
.dj3-flow__grid { display: grid; gap: 22px; margin-top: 16px; }
.dj3-flow__text { min-width: 0; }
@container dj3flow (min-width: 660px) {
	.dj3-flow__head { max-width: none; }
	.dj3-flow__grid { grid-template-columns: minmax(0, 1fr) minmax(400px, 1.1fr); align-items: center; gap: 28px; }
}
/* Schmal: Skizze vor den Schritten */
@container dj3flow (max-width: 659.98px) {
	.dj3-demo { order: -1; }
}
.dj-job .dj3-flow__title {
	margin-top: 10px;
	font: 700 clamp(21px, .5vw + 16px, 25px) / 1.25 var(--dj-font);
	letter-spacing: -.016em;
	color: var(--dj-ink);
	text-wrap: balance;
}
.dj3-flow__title em {
	font-family: var(--dj-serif);
	font-style: italic;
	font-weight: 500;
	letter-spacing: -.01em;
	color: var(--dj-gd);
}
.dj3-flow__steps { margin-top: 0 !important; }
.dj3-flow__step {
	position: relative;
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 0 6px;
	margin: 0;
	padding: 8px 0 8px 16px;
}
.dj3-flow__step::before,
.dj3-flow__step::after {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	bottom: 10px;
	width: 2px;
	border-radius: 1px;
}
.dj3-flow__step::before { background: rgba(22, 33, 54, .1); }
.dj3-flow__step::after {
	background: var(--dj-gd);
	transform: scaleY(0);
	transform-origin: top;
	animation: dj3-p1 var(--dj3-cycle) linear infinite;
}
.dj3-flow__step[data-step="2"]::after { animation-name: dj3-p2; }
.dj3-flow__step[data-step="3"]::after { animation-name: dj3-p3; }
.dj3-flow__num { font: italic 400 19px/1.2 var(--dj-serif); color: var(--dj-gd); }
.dj3-flow__body { min-width: 0; }
.dj3-flow__name { display: block; font: 700 15px/1.35 var(--dj-font); color: var(--dj-ink); }
.dj3-flow__desc { display: block; margin-top: 2px; font: 400 14px/1.5 var(--dj-font); color: var(--dj-text); }

/* Hinweis in der Bewerbungskarte */
.dj3-note-link {
	margin-left: 2px;
	font-weight: 600;
	color: var(--dj-gd) !important;
	text-decoration: underline !important;
	text-decoration-thickness: 1px !important;
	text-underline-offset: 3px;
	white-space: nowrap;
}
.dj3-note-link:hover { color: var(--dj-ink) !important; }

/* ---------- Schemaskizze (rein illustrativ, aria-hidden; der Text trägt die Information) ---------- */
.dj3-demo { container: dj3demo / inline-size; min-width: 0; }
.dj3-demo__frame {
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--dj-hair);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(22, 33, 54, .05), 0 26px 50px -30px rgba(22, 33, 54, .38);
	font-family: var(--dj-font);
	user-select: none;
}
.dj3-demo__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 30px;
	padding: 0 14px;
	border-bottom: 1px solid var(--dj-hair);
	background: #FBFBFC;
}
.dj3-demo__dots { display: flex; gap: 5px; }
.dj3-demo__dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--dj-line); }
.dj3-demo__brand { font: 600 11px/1 var(--dj-font); letter-spacing: .02em; color: var(--dj-mute); }
.dj3-demo__panes { display: grid; }
.dj3-pane { min-width: 0; padding: 13px 13px 14px; }
.dj3-pane--emp { background: #FCFCFD; }
@container dj3demo (min-width: 390px) {
	.dj3-demo__panes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.dj3-pane + .dj3-pane { border-left: 1px solid var(--dj-hair); }
}
/* Zwei Spalten mit wenig Breite: kleinere Bildmarke, damit „Ihr Bewerberprofil“ einzeilig bleibt */
@container dj3demo (min-width: 390px) and (max-width: 459.98px) {
	.dj3-pane { padding: 12px 11px 13px; }
	.dj3-card { padding: 10px 10px; }
	.dj3-card__row { gap: 8px; }
	.dj3-ava { width: 26px; height: 26px; }
	.dj3-ava::after { inset: 6px; }
}
@container dj3demo (max-width: 389.98px) {
	.dj3-pane { padding: 12px 14px 13px; }
	.dj3-pane + .dj3-pane { border-top: 1px solid var(--dj-hair); }
}
.dj-job .dj3-pane__k {
	font: 600 10.5px/1.3 var(--dj-font);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--dj-mute);
}
.dj3-pane__stage { position: relative; height: 138px; margin-top: 10px; }
.dj3-pane__stage > * { position: absolute; top: 0; left: 0; right: 0; }
.dj3-pane__stage--emp { height: 104px; }

.dj3-card { padding: 11px 12px; background: #fff; border: 1px solid var(--dj-hair); border-radius: 10px; }
.dj3-card__row { display: flex; align-items: center; gap: 9px; }
.dj3-card__id { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; min-width: 0; }
.dj3-card__t { overflow: hidden; font: 700 12.5px/1.25 var(--dj-font); color: var(--dj-ink); white-space: nowrap; text-overflow: ellipsis; }
.dj3-ava { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #EEF1F4; }
.dj3-ava::after {
	content: "";
	position: absolute;
	inset: 7px;
	background: #A9B4C5;
	-webkit-mask: var(--dj-i-user) center / contain no-repeat;
	mask: var(--dj-i-user) center / contain no-repeat;
}
.dj3-ava--on { background: var(--dj-gl); box-shadow: inset 0 0 0 1.5px rgba(14, 115, 85, .35); }
.dj3-ava--on::after { background: var(--dj-gd); }
.dj3-sk { display: block; height: 7px; border-radius: 4px; background: #E7ECF0; }
.dj3-sk--w70 { width: 70%; }
.dj3-sk--w60 { width: 60%; }
.dj3-sk--w40 { width: 40%; }
.dj3-sk--w30 { width: 30%; }
.dj3-sk--ink { background: #CBD4DF; }
.dj3-kv { margin-top: 9px !important; }
.dj3-kv li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	padding: 6px 0;
	border-top: 1px solid var(--dj-hair);
	font: 500 11.5px/1.3 var(--dj-font);
	color: var(--dj-mute);
}
.dj3-kv li:last-child { padding-bottom: 0; }
.dj3-kv .dj3-sk { flex: 0 0 auto; }
.dj3-file {
	padding: 2px 7px;
	border-radius: 5px;
	background: var(--dj-canvas);
	font: 700 10px/1.4 var(--dj-font);
	letter-spacing: .04em;
	color: var(--dj-ink);
}

.dj3-jobcard__t {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font: 700 13px/1.3 var(--dj-font);
	color: var(--dj-ink);
}
.dj3-jobcard__s {
	display: block;
	margin-top: 4px;
	overflow: hidden;
	font: 500 11px/1.3 var(--dj-font);
	color: var(--dj-mute);
	white-space: nowrap;
	text-overflow: ellipsis;
}
.dj3-jobcard__btns { display: flex; gap: 6px; margin-top: 12px; }
.dj3-mini {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	height: 28px;
	padding: 0 9px;
	border: 1px solid transparent;
	border-radius: 5px;
	font: 700 11px/1 var(--dj-font);
	white-space: nowrap;
}
.dj3-mini__ic,
.dj3-mini__l { display: inline-grid; }
.dj3-mini__ic > *,
.dj3-mini__l > * { grid-area: 1 / 1; font-weight: 700; }
.dj3-mini--save {
	flex: none;
	width: 28px;
	padding: 0;
	border-color: rgba(14, 115, 85, .35);
	background: var(--dj-gl);
	color: var(--dj-gd);
	animation: dj3-savebox var(--dj3-cycle) linear infinite;
}
.dj3-heart {
	display: block;
	width: 12px;
	height: 12px;
	background: currentColor;
	-webkit-mask: var(--dj-i-heart) center / contain no-repeat;
	mask: var(--dj-i-heart) center / contain no-repeat;
}
.dj3-heart--on { -webkit-mask-image: var(--dj-i-heart-f); mask-image: var(--dj-i-heart-f); }
.dj3-mini--apply {
	flex: 1 1 auto;
	min-width: 0;
	background: var(--dj-gl);
	color: var(--dj-gd);
	animation: dj3-apply var(--dj3-cycle) linear infinite;
}

.dj3-pane__status { position: relative; height: 32px; margin-top: 10px !important; }
.dj3-status {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font: 600 11.5px/1.35 var(--dj-font);
	color: var(--dj-mute);
}
.dj3-status--on { color: var(--dj-gd); }
.dj3-i {
	display: inline-block;
	flex: none;
	width: 13px;
	height: 13px;
	margin-top: 1px;
	background: currentColor;
	-webkit-mask: var(--dj3-i) center / contain no-repeat;
	mask: var(--dj3-i) center / contain no-repeat;
}
.dj3-i--eyeoff { --dj3-i: var(--dj-i-eyeoff); }
.dj3-i--check { --dj3-i: var(--dj-i-check); }

.dj-job .dj3-pane__name {
	margin-top: 6px;
	overflow: hidden;
	font: 700 13.5px/1.3 var(--dj-font);
	color: var(--dj-ink);
	white-space: nowrap;
	text-overflow: ellipsis;
}
.dj-job .dj3-inbox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 10px;
	padding-top: 9px;
	border-top: 1px solid var(--dj-hair);
	font: 600 11.5px/1.3 var(--dj-font);
	color: var(--dj-text);
}
.dj3-count {
	display: inline-grid;
	flex: none;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--dj-gd);
	color: #fff;
	font: 700 11px/20px var(--dj-font);
	text-align: center;
	animation: dj3-count var(--dj3-cycle) linear infinite;
}
.dj3-count > b { grid-area: 1 / 1; font-weight: 700; }
.dj3-empty {
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 10px;
	border: 1.5px dashed var(--dj-line);
	border-radius: 10px;
	text-align: center;
}
.dj3-empty__t { font: 700 12px/1.3 var(--dj-font); color: var(--dj-text); }
.dj3-empty__s { font: 500 11px/1.35 var(--dj-font); color: var(--dj-mute); }
.dj3-app__badge {
	align-self: flex-start;
	padding: 2px 7px;
	border-radius: 4px;
	background: var(--dj-gl);
	font: 700 10px/1.4 var(--dj-font);
	letter-spacing: .02em;
	color: var(--dj-gd);
}
.dj3-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px !important; }
.dj3-chips li {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 3px 7px 3px 6px;
	border-radius: 5px;
	background: var(--dj-tint);
	font: 600 10.5px/1.3 var(--dj-font);
	color: var(--dj-ink);
}
.dj3-chips .dj3-i { width: 11px; height: 11px; margin: 0; color: var(--dj-gd); }
.dj-job .dj3-pane__foot {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin-top: 12px;
	font: 500 11px/1.4 var(--dj-font);
	color: var(--dj-mute);
}
.dj3-pane__foot b { font-weight: 600; color: var(--dj-ink); }

/* Zustände der Skizze: 1 Profil (0–5 s) · 2 Stelle prüfen (5–10 s) · 3 Bewerbung (10–15 s), endlos.
 * Grundwerte = Zustand 3 (Endzustand ohne Bewegung). */
.dj3-st { animation-duration: var(--dj3-cycle); animation-timing-function: linear; animation-iteration-count: infinite; }
.dj3-st--1 { opacity: 0; animation-name: dj3-s1; }
.dj3-st--2 { opacity: 0; animation-name: dj3-s2; }
.dj3-st--3 { opacity: 1; animation-name: dj3-s3; }
.dj3-st--12 { opacity: 0; animation-name: dj3-s12; }
.dj3-st--23 { opacity: 1; animation-name: dj3-s23; }
.dj3-st--3in { opacity: 1; animation-name: dj3-s3in; }
.dj3-st--save0 { opacity: 0; animation-name: dj3-save0; }
.dj3-st--save1 { opacity: 1; animation-name: dj3-save1; }

@keyframes dj3-s1 { 0%, 30% { opacity: 1; } 33.33%, 96.67% { opacity: 0; } 100% { opacity: 1; } }
@keyframes dj3-s2 { 0%, 30% { opacity: 0; } 33.33%, 63.33% { opacity: 1; } 66.67%, 100% { opacity: 0; } }
@keyframes dj3-s3 { 0%, 63.33% { opacity: 0; } 66.67%, 96.67% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dj3-s12 { 0%, 63.33% { opacity: 1; } 66.67%, 96.67% { opacity: 0; } 100% { opacity: 1; } }
@keyframes dj3-s23 { 0%, 30% { opacity: 0; } 33.33%, 96.67% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dj3-s3in {
	0%, 64.5% { opacity: 0; transform: translateY(10px); }
	69%, 96.67% { opacity: 1; transform: none; }
	100% { opacity: 0; transform: none; }
}
@keyframes dj3-save0 { 0%, 44% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes dj3-save1 { 0%, 44% { opacity: 0; } 46%, 100% { opacity: 1; } }
@keyframes dj3-savebox {
	0%, 44% { border-color: var(--dj-line); background-color: #fff; color: var(--dj-ink); }
	46%, 100% { border-color: rgba(14, 115, 85, .35); background-color: var(--dj-gl); color: var(--dj-gd); }
}
@keyframes dj3-apply {
	0%, 62.5% { background-color: var(--dj-btn-bg); color: #fff; transform: none; }
	64% { background-color: var(--dj-btn-bg); color: #fff; transform: scale(.96); }
	66.67%, 96.67% { background-color: var(--dj-gl); color: var(--dj-gd); transform: none; }
	100% { background-color: var(--dj-btn-bg); color: #fff; transform: none; }
}
@keyframes dj3-count {
	0%, 63.33% { background-color: #E3E8EC; color: var(--dj-mute); }
	66.67%, 96.67% { background-color: var(--dj-gd); color: #fff; }
	100% { background-color: #E3E8EC; color: var(--dj-mute); }
}
@keyframes dj3-p1 { 0% { transform: scaleY(0); } 33.33% { transform: scaleY(1); } 33.34%, 100% { transform: scaleY(0); } }
@keyframes dj3-p2 { 0%, 33.33% { transform: scaleY(0); } 66.67% { transform: scaleY(1); } 66.68%, 100% { transform: scaleY(0); } }
@keyframes dj3-p3 { 0%, 66.67% { transform: scaleY(0); } 99.9% { transform: scaleY(1); } 100% { transform: scaleY(0); } }

/* Außerhalb des sichtbaren Bereichs anhalten (assets/js/job-detail-3.js) – alle Teile bleiben im selben Takt. */
.dj3-flow.is-paused *,
.dj3-flow.is-paused *::before,
.dj3-flow.is-paused *::after { animation-play-state: paused !important; }
/* Neustart beim ersten Erscheinen: Animationen kurz entfernen, damit alle Teile gemeinsam bei Schritt 1 beginnen. */
.dj3-flow.is-reset *,
.dj3-flow.is-reset *::before,
.dj3-flow.is-reset *::after { animation: none !important; }

/* ---------- Arbeitsort (kompakt) ---------- */
.dj-job .dj-location .dj-h2--compact,
.dj-job .dj3-contact .dj-h2--compact { margin-bottom: 14px; }
.dj-job .dj-location__text { gap: 8px; padding: 20px 22px; }
.dj-job .dj-location__address { font-size: 16px; }
.dj-job .dj-location .dj-map { min-height: 188px; }

/* ---------- Fragen zur Stelle ---------- */
.dj3-contact__ways { display: flex; flex-wrap: wrap; gap: 10px 40px; margin: 0 !important; }
.dj3-contact__way { min-width: 0; }
.dj-job .dj3-contact__way dt { margin: 0 0 2px; font: 500 13px/1.35 var(--dj-font); color: var(--dj-mute); }
.dj-job .dj3-contact__way dd { margin: 0; font: 600 15px/1.45 var(--dj-font); color: var(--dj-ink); overflow-wrap: anywhere; }
.dj3-contact__way dd a { color: var(--dj-ink); text-decoration: underline; text-decoration-color: var(--dj-line-h); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.dj3-contact__way dd a:hover { color: var(--dj-gd); text-decoration-color: currentColor; }
.dj3-contact__ways + .dj-econtact { margin-top: 18px; }
.dj3-contact > .dj-h2 + .dj-econtact { margin-top: 0; border-top: 0; }
.dj3-contact > .dj-h2 + .dj-econtact .dj-econtact__summary { padding-top: 2px; }

/* ---------- Ende der Stelle (Marke für die mobile Bewerbungsleiste, ohne eigene Darstellung) ---------- */
.dj-job .dj-closing.dj3-end {
	height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: none;
	box-shadow: none;
	clip-path: none;
}
.dj-job .dj-closing.dj3-end::before,
.dj-job .dj-closing.dj3-end::after { content: none; }

/* ---------- Ähnliche Stellen und Job-Alarm (kompakt) ---------- */
.dj-related.dj3-related { padding: 52px 0 60px; }
.dj3-related .dj-related__head { margin-bottom: 22px; }
.dj3-related .dj-h2--display { font-size: clamp(24px, .8vw + 17px, 30px); }
.dj3-alert {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin-top: 22px;
	padding: 14px 18px;
	background: #fff;
	border: 1px solid var(--dj-hair);
	border-radius: 12px;
}
.dj3-related .dj-related__head + .dj3-alert { margin-top: 0; }
.dj3-alert__icon { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--dj-tint); }
.dj3-alert__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 18px;
	height: 18px;
	background: var(--dj-gd);
	-webkit-mask: var(--dj-i-bell) center / contain no-repeat;
	mask: var(--dj-i-bell) center / contain no-repeat;
}
.dj-related .dj3-alert__text { flex: 1 1 320px; min-width: 0; font: 400 14.5px/1.5 var(--dj-font); color: var(--dj-text); }
.dj3-alert__text strong { margin-right: 4px; font-weight: 700; color: var(--dj-ink); }
.dj3-alert__link { flex: none; font-size: 14.5px; }

/* ---------- Mobil ---------- */
@media (max-width: 767.98px) {
	.dj-main { padding-bottom: 40px; }
	.dj-job .dj-main > * + :is(.dj-insights, .dj-location, .dj3-contact) { margin-top: 36px; padding-top: 32px; }
	.dj-job .dj-main > :is(.dj3-flow, .dj-decide) + :is(.dj-insights, .dj-location, .dj3-contact) { margin-top: 36px; }
	.dj3-flow { margin-top: 36px; padding: 22px 18px 22px; border-radius: 14px; }
	.dj-main > .dj3-emp { margin-top: 36px; padding-top: 28px; }
	.dj3-pfacts { margin-top: 24px; }
	.dj-job .dj3-desc__lead p,
	.dj-job .dj3-desc__lead p:first-child { font-size: 17.5px; }
	.dj-job .dj3-sec--bieten .dj3-sec__body { padding: 16px 16px 6px; }
	.dj-job .dj-location .dj-map { min-height: 168px; }
	.dj-related.dj3-related { padding: 40px 0 48px; }
	.dj3-alert { padding: 14px 16px; }
}

/* ---------- Fokus ---------- */
.dj-job :is(.dj3-spec, .dj3-emp__fact, .dj3-emp__links, .dj3-contact__way, .dj-apply__note) a:focus-visible { border-radius: 3px; }
.dj3-ojob__link:focus-visible { outline-offset: 2px !important; border-radius: 4px; }

/* ---------- Druck ---------- */
@media print {
	.dj3-demo, .dj3-alert, .dj3-end { display: none !important; }
	.dj3-flow { padding: 0; border: 0; background: none; }
	.dj3-sec__head { position: static; }
	.dj3-panel { border: 0; box-shadow: none; }
	.dj3-aside.is-fit .dj3-panel { position: static; }
}