/*
 * Stellen-Seiten (single-/archive-koenig_job.php + Shortcodes).
 * Design = Unterseiten-Muster aus dem Figma:
 *   Detail    → "News – Detail" (528:22598)
 *   Übersicht → "News" (528:22191)
 *
 * Breiten: breit 1392 px (60 px Rand bei 1512), schmal 922 px.
 * Typo (Figma-Styles, Mobilwerte aus TYPOGRAFIE-REFERENZ):
 *   H1 Nunito Sans Light 56/1.2 (mobil 36)      Titel
 *   H3 Nunito Sans Light 32 (mobil 24)          Abschnitts-Titel
 *   H4 Nunito Sans Light 26 (mobil 20)          Karten-Titel
 *   H5 Mada Regular 18, Laufweite 4 % (mobil 16) Labels, Versalien
 *   p  Mada Light 18/1.6 (mobil 16)
 * Farben/Schriften über die CSS-Variablen aus inc/global-style-bridge.php.
 */

.kj {
	--kj-schwarz: var(--color-text, #2e2d2e);
	--kj-grau: var(--color-overlay-bg, #625e58);
	--kj-rot: var(--color-brand, #cd1e14);
	--kj-gold: var(--color-gold, #907947);
	--kj-hell: var(--color-surface-alt, #efefef);
	--kj-heading: var(--font-heading, 'Nunito Sans', sans-serif);
	--kj-body: var(--font-body, 'Mada', sans-serif);
	--kj-rand: clamp(16px, 4vw, 60px);
	color: var(--kj-schwarz);
	font-family: var(--kj-body);
}

/* Hello Elementor begrenzt jedes .site-main auf max. 1140 px (live am
   29.10.2026 gemessen). Die Stellenseiten brauchen die volle Breite
   (randloses Bild, 1392-px-Spalte) – die Spalten setzen .kj__wide/.kj__narrow. */
body:not([class*="elementor-page-"]) .site-main.kj {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

.kj--single,
.kj--archive {
	padding-bottom: clamp(80px, 9vw, 140px);
}

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

/* Spalten ---------------------------------------------------------- */
.kj .kj__wide {
	width: 100%;
	max-width: calc(1392px + 2 * var(--kj-rand));
	margin-inline: auto;
	padding-inline: var(--kj-rand);
}

.kj .kj__narrow {
	width: 100%;
	max-width: calc(922px + 2 * var(--kj-rand));
	margin-inline: auto;
	padding-inline: var(--kj-rand);
}

/* Typo-Bausteine --------------------------------------------------- */
.kj .kj__title {
	margin: 0;
	font-family: var(--kj-heading);
	font-weight: 300;
	font-size: clamp(36px, 2.6vw + 16px, 56px);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--kj-schwarz);
	overflow-wrap: anywhere;
	hyphens: auto;
}

.kj .kj__h {
	margin: 0 0 30px;
	font-family: var(--kj-heading);
	font-weight: 300;
	font-size: clamp(24px, 1vw + 18px, 32px);
	line-height: 1.36;
	text-transform: uppercase;
	color: var(--kj-schwarz);
}

.kj .kj__meta,
.kj .kj__overline {
	margin: 0;
	font-family: var(--kj-body);
	font-weight: 400;
	font-size: clamp(16px, 0.25vw + 15px, 18px);
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kj-grau);
}

.kj .kj__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 60px;
}

.kj .kj__text,
.kj .kj__lead {
	font-family: var(--kj-body);
	font-weight: 300;
	font-size: clamp(16px, 0.25vw + 15px, 18px);
	line-height: 1.6;
	color: var(--kj-schwarz);
}

.kj .kj__text > :first-child,
.kj .kj__lead > :first-child {
	margin-top: 0;
}

.kj .kj__text > :last-child,
.kj .kj__lead > :last-child {
	margin-bottom: 0;
}

.kj .kj__text p,
.kj .kj__lead p {
	margin: 0 0 1em;
}

.kj .kj__text ul,
.kj .kj__text ol {
	margin: 0 0 1em;
	padding-left: 1.2em;
}

.kj .kj__text li + li {
	margin-top: 0.25em;
}

.kj .kj__text strong,
.kj .kj__lead strong {
	font-weight: 500;
}

.kj .kj__text h3,
.kj .kj__text h4 {
	margin: 1.5em 0 0.6em;
	font-family: var(--kj-heading);
	font-weight: 300;
	font-size: clamp(20px, 0.6vw + 16px, 26px);
	text-transform: uppercase;
}

/* Links im Text: Linie beim Hover kommt aus assets/css/links.css. */

/* Pfeil (Figma "Vector 2", gleiche Form wie im Button) --------------- */
.kj .kj__arrow {
	display: inline-block;
	flex: 0 0 auto;
	width: 17.63px;
	height: 13.46px;
	background-color: var(--kj-rot);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.337 14.166'%3E%3Cpath d='M0 7.08302H17.6299M10.9004 13.8125L17.6299 7.08302L10.9004 0.353553' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.337 14.166'%3E%3Cpath d='M0 7.08302H17.6299M10.9004 13.8125L17.6299 7.08302L10.9004 0.353553' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.2s ease;
}

.kj .kj__arrow--left {
	transform: scaleX(-1);
}

/* ==================================================================
   Detailseite (Figma "Landingpage – Karriere – Detail", 608:28858).
   Aufbau/Abstände wie die Objekt-Detailseite der König-Immobilien-Seite
   (onoffice-theme/templates/estate/detail.php, Tailwind-Werte → px):
     Rand 24 px, ab 768 px 36 px · Titel mt 36 → 80 (ab 1024)
     Linie mt 32 → 48 · Labels/Einleitung mt 20, Spalten-Gap 20
     Bild mt 56 → 96, 393:330 → 1512:750 · Inhalt mt 56 → 80,
     links Headline + Knopf (Gap 39), rechts Text.
   Farben König Sylt: Titel/Headline Gold, Text/Labels Blau, Linie Gold.
   Markup: single-koenig_job.php.
   ================================================================== */

.kj--single {
	--kj-blau: var(--color-blue, #232c3c);
	color: var(--kj-blau);
}

/* Inhaltsspalte: max. 1390 px INHALT (content-box), Rand 24 / 36 px. */
.kj .kj__rand {
	box-sizing: content-box !important;
	max-width: var(--content-max-width, 1390px);
	margin-inline: auto;
	padding-inline: 24px;
}

@media (min-width: 768px) {
	.kj .kj__rand {
		padding-inline: 36px;
	}
}

.kj--single .kj__head {
	padding-top: clamp(24px, 3vw, 40px);
}

/* Zurück: Mada Regular 16 (Handy 14), Blau, Pfeil Gold, Gap 20.
   Hover: Text Gold, Pfeil rückt nach links. */
.kj .kj__back,
.kj .kj__back:hover,
.kj .kj__back:focus,
.kj .kj__back:visited {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	font-family: var(--kj-body);
	font-weight: 400;
	font-size: clamp(14px, 13.30px + 0.179vw, 16px);
	line-height: 1.6;
	color: var(--kj-blau, #232c3c);
	text-decoration: none;
	transition: color 0.2s ease;
}

.kj .kj__back:is(:hover, :focus-visible) {
	color: var(--kj-gold);
}

.kj .kj__back-pfeil {
	flex: 0 0 auto;
	color: var(--kj-gold);
	transition: transform 0.2s ease;
}

.kj .kj__back:is(:hover, :focus-visible) .kj__back-pfeil {
	transform: translateX(-4px);
}

.kj .kj__back:focus-visible {
	outline: 2px solid var(--kj-gold);
	outline-offset: 4px;
}

/* Titel: H1 Gold, Handy 28 → 36 (wie Immobilien-Detail), ab 640 px
   36 → 56. Max. 941 px wie im Figma. */
.kj--single .kj__title {
	max-width: 941px;
	margin: 36px 0 0;
	font-size: clamp(28px, 6.4vw + 4px, 36px);
	line-height: 1.2;
	color: var(--kj-gold);
	hyphens: auto;
}

@media (min-width: 640px) {
	.kj--single .kj__title {
		font-size: clamp(36px, 28.98px + 1.787vw, 56px);
		hyphens: manual; /* Trennung nur am Handy, sonst "GE-SUCHT" */
	}
}

@media (min-width: 1024px) {
	.kj--single .kj__title {
		margin-top: 80px;
	}
}

.kj--single .kj__linie {
	height: 0;
	margin-top: 32px;
	border-top: 1px solid var(--kj-gold);
}

@media (min-width: 1024px) {
	.kj--single .kj__linie {
		margin-top: 48px;
	}
}

/* Labels links, Einleitung rechts (gleiche Spaltenbreite wie unten). */
.kj--single .kj__head-row {
	display: grid;
	gap: 40px;
	margin-top: 20px;
}

@media (min-width: 1024px) {
	.kj--single .kj__head-row--zwei {
		grid-template-columns: 1fr 1fr;
		column-gap: 20px;
	}
}

.kj--single .kj__meta {
	align-self: start;
	gap: 12px 32px;
	color: var(--kj-blau);
}

@media (min-width: 1024px) {
	.kj--single .kj__meta {
		column-gap: 72px;
	}
}

.kj--single .kj__lead,
.kj--single .kj__text {
	color: var(--kj-blau);
}

/* Bild randlos. */
.kj--single .kj__hero {
	position: relative;
	margin: 56px 0 0;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.04);
	aspect-ratio: 393 / 330;
}

@media (min-width: 1024px) {
	.kj--single .kj__hero {
		margin-top: 96px;
		aspect-ratio: 1512 / 750;
	}
}

.kj--single .kj__hero img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
}

/* Inhalt zweispaltig. */
.kj--single .kj__body {
	display: grid;
	gap: 48px;
	margin-top: 56px;
}

@media (min-width: 1024px) {
	.kj--single .kj__body {
		grid-template-columns: 1fr 1fr;
		column-gap: 20px;
		margin-top: 80px;
	}
}

.kj--single .kj__body-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 39px;
	align-self: start;
}

/* Headline: H3 Gold, max. 627 px. */
.kj--single .kj__body-links .kj__h {
	max-width: 627px;
	margin: 0;
	font-size: clamp(24px, 21.19px + 0.715vw, 32px);
	line-height: normal;
	color: var(--kj-gold);
}

.kj--single .kj__body-links .kj__button {
	margin: 0;
}

/* Rechte Spalte: p Blau; Zwischenüberschriften als H5 (Mada Regular 18,
   Versalien, 4 %), davor eine Leerzeile wie im Figma. */
.kj--single .kj__body-rechts .kj__h,
.kj--single .kj__body-rechts .kj__h5,
.kj--single .kj__body-rechts .kj__text :is(h2, h3, h4, h5, h6) {
	margin: 1.6em 0 0;
	font-family: var(--kj-body);
	font-weight: 400;
	font-size: clamp(16px, 15.30px + 0.179vw, 18px);
	line-height: 1.6;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kj-blau);
}

.kj--single .kj__body-rechts .kj__text > :first-child,
.kj--single .kj__body-rechts > .kj__section:first-child > .kj__h {
	margin-top: 0;
}

.kj--single .kj__body-rechts .kj__section,
.kj--single .kj__body-rechts .kj__section + .kj__section {
	margin-top: 0;
}

.kj--single .kj__body-rechts .kj__text ul,
.kj--single .kj__body-rechts .kj__text ol {
	margin: 0 0 1em;
	padding-left: 1.4em;
}

.kj--single .kj__body-rechts .kj__text li + li {
	margin-top: 0;
}

/* Eckdaten: Zeilen mit dünnen Linien (wie Fakten im Immobilien-Detail). */
.kj--single .kj__section--fakten {
	margin-top: 64px !important;
}

.kj--single .kj__section--fakten .kj__h5 {
	margin: 0 0 16px;
}

.kj .kj__fakten {
	margin: 0;
	border-bottom: 1px solid rgba(35, 44, 60, 0.3);
}

.kj .kj__fakt {
	display: grid;
	grid-template-columns: minmax(140px, 260px) 1fr;
	gap: 4px 24px;
	padding: 12px 0;
	border-top: 1px solid rgba(35, 44, 60, 0.3);
}

.kj .kj__fakt dt {
	font-family: var(--kj-body);
	font-weight: 400;
	font-size: clamp(16px, 0.25vw + 15px, 18px);
	line-height: 1.6;
}

.kj .kj__fakt dd {
	margin: 0;
	font-family: var(--kj-body);
	font-weight: 300;
	font-size: clamp(16px, 0.25vw + 15px, 18px);
	line-height: 1.6;
}

@media (max-width: 600px) {
	.kj .kj__fakt {
		grid-template-columns: 1fr;
	}
}

/* Elementor-Vorlagen je Unternehmen (CTA-Kasten, Sektion darunter).
   Volle Breite; die Vorlage bringt ihre Innenabstände selbst mit. */
.kj--single .kj__vorlage--cta {
	margin-top: 56px;
	scroll-margin-top: 120px; /* Sprung über "Jetzt bewerben": nicht unter dem Sticky-Header */
}

.kj--single .kj__vorlage--sektion {
	margin-top: 80px;
}

@media (min-width: 1024px) {
	.kj--single .kj__vorlage--cta {
		margin-top: 96px;
	}

	.kj--single .kj__vorlage--sektion {
		margin-top: 150px; /* Figma: CTA-Kasten → beiger Bereich */
	}
}

.kj--single .kj__body + .kj__vorlage--sektion,
.kj--single > .kj__rand + .kj__vorlage--sektion {
	margin-top: 56px;
}

@media (min-width: 1024px) {
	.kj--single > .kj__rand + .kj__vorlage--sektion {
		margin-top: 96px;
	}
}

/* Endet die Seite mit der Sektion, liegt sie direkt am Footer. */
.kj--single:has(> .kj__vorlage--sektion:last-child) {
	padding-bottom: 0;
}

/* Buttons ----------------------------------------------------------- */
.kj .elementor-button {
	text-decoration: none;
	white-space: nowrap;
}

.kj .elementor-button-content-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

/* ==================================================================
   Übersicht König Sylt (Figma "Landingpage – Karriere", 608:28611).
   Markup: inc/karriere-liste.php, Verhalten: assets/js/karriere.js.
   Seitenrand/Breite wie die Immobilienliste der König-Immobilien-Seite.
   ================================================================== */

.kj-liste,
.kj__card {
	/* König-Sylt-Blau (Elementor Global Color, über die Style-Bridge). */
	--kj-blau: var(--color-blue, #232c3c);
}

/* Seitenrand wie .oo-seitenrand: Handy 24px, ab 768px 36px; die
   1390px Höchstbreite gilt für den INHALT (content-box) und schließt
   damit bündig mit den Elementor-Containern ab. */
.kj-liste {
	box-sizing: content-box !important;
	max-width: var(--content-max-width, 1390px);
	margin-inline: auto;
	padding-inline: 24px;
	color: var(--kj-blau);
}

@media (min-width: 768px) {
	.kj-liste {
		padding-inline: 36px;
	}
}

/* Ohne Elementor-Hero darüber etwas Luft nach oben. */
.kj--ohne-hero .kj-liste {
	padding-top: clamp(40px, 5vw, 80px);
}

/* H5: Mada Regular 18, Versalien, 4 % Laufweite, Blau. */
.kj-liste .kj-h5 {
	margin: 0;
	font-family: var(--kj-body) !important;
	font-size: clamp(16px, 15.30px + 0.179vw, 18px) !important;
	font-weight: 400 !important;
	line-height: normal !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: var(--kj-blau) !important;
}

/* Goldlinie 36px unter den Pillen, Karten 66px darunter. */
.kj-liste .kj-filter {
	margin-bottom: clamp(40px, 4.4vw, 66px);
}

.kj-liste .kj-filter__titel {
	margin: 0 0 16px;
}

.kj-liste .kj-filter__zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

/* Pille (Figma "CTA – sekundär"): h 50, px 30, Radius 25, 1px Blau,
   Mada Regular 16/1.6.
   passiv: weiß, blaue Schrift – Hover: König-Hellgrau
   aktiv:  blau gefüllt, weiße Schrift
   !important, weil Elementor-Kit/Hello und links.css Links stylen. */
.kj-liste .kj-pille,
.kj-liste .kj-pille:visited,
.kj-liste .kj-pille:hover,
.kj-liste .kj-pille:focus {
	display: inline-flex !important;
	align-items: center;
	box-sizing: border-box;
	height: 50px;
	margin: 0;
	padding: 10px 30px !important;
	border: 1px solid var(--kj-blau) !important;
	border-radius: 25px !important;
	background: var(--color-surface, #fff) !important;
	font-family: var(--kj-body) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	white-space: nowrap;
	color: var(--kj-blau) !important;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.kj-liste .kj-pille:hover {
	background: var(--kj-hell) !important;
}

.kj-liste .kj-pille.is-aktiv,
.kj-liste .kj-pille.is-aktiv:hover,
.kj-liste .kj-pille.is-aktiv:focus {
	background: var(--kj-blau) !important;
	color: var(--color-surface, #fff) !important;
	cursor: default;
}

.kj-liste .kj-pille:focus-visible {
	outline: 2px solid var(--kj-blau) !important;
	outline-offset: 3px !important;
}

.kj-liste .kj-filter__linie {
	height: 0;
	margin-top: 36px;
	border-top: 1px solid var(--kj-gold);
}

/* Raster: zwei Spalten, 16px Abstand (686 + 16 + 686 ≈ 1390). */
.kj-liste .kj-raster {
	display: grid;
	grid-template-columns: 1fr;
	gap: 64px 16px;
}

@media (min-width: 768px) {
	.kj-liste .kj-raster {
		grid-template-columns: repeat(2, 1fr);
	}
}

.kj-liste [hidden] {
	display: none !important;
}

/* Leerzustand. */
.kj-liste .kj-leer {
	max-width: 640px;
	margin: 0 auto;
	padding: 24px 16px 80px;
	text-align: center;
}

@media (min-width: 768px) {
	.kj-liste .kj-leer {
		padding-top: 40px;
		padding-bottom: 112px;
	}
}

.kj-liste .kj-leer__icon {
	display: block;
	margin: 0 auto;
	color: var(--kj-gold);
}

.kj-liste .kj-leer .kj-leer__titel {
	margin: 32px 0 16px;
	font-family: var(--kj-body) !important;
	font-size: clamp(20px, 17.89px + 0.536vw, 26px) !important;
	font-weight: 400 !important;
	line-height: normal !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--kj-blau) !important;
}

.kj-liste .kj-leer .kj-leer__text {
	max-width: 460px;
	margin: 0 auto 40px;
	font-family: var(--kj-body) !important;
	font-size: clamp(16px, 15.30px + 0.179vw, 18px) !important;
	font-weight: 300 !important;
	line-height: 1.6 !important;
	color: var(--kj-blau) !important;
}

.kj-liste .kj-leer .kj__button {
	display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
	.kj-liste .kj-pille {
		transition: none !important;
	}
}

/* Karten (Figma 608:28647 ff.) --------------------------------------
   Bild 686 × 420, oben ein weißer Verlauf (200px hoch) mit dem Logo
   des Unternehmens (140 × 46, 30px links / 28px oben). Darunter 20px,
   Goldlinie, Anstellungsart links / Unternehmen rechts (H5, Blau),
   20px, Titel H4 Blau (max. 75 % breit). */
.kj .kj__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 60px 20px;
}

@media (min-width: 768px) {
	.kj .kj__grid {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 100px;
	}
}

.kj .kj__card-link,
.kj .kj__card-link:hover,
.kj .kj__card-link:focus {
	display: block;
	color: inherit;
	text-decoration: none;
}

.kj .kj__card-media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--kj-hell);
	aspect-ratio: 686 / 420;
}

.kj .kj__card-img,
.kj .kj__card-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.kj .kj__card-verlauf {
	/* Wie die Unternehmens-Karten der Startseite (Figma 608:28429):
	   200 px hoch, oben deckend, bei 29.8 % noch 92 %, dann transparent.
	   Hier in Weiß (Seitenhintergrund), auf der Startseite in Sand. */
	position: absolute;
	inset: 0 0 auto;
	height: min(200px, 60%);
	background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.92) 29.8%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
}

.kj .kj__card-logo {
	/* Logo wie auf der Startseite: 30 px links, 28 px oben, 46 px hoch
	   (Querformat-Logos -> ca. 140 px breit), Handy 24/20 px und 40 px. */
	position: absolute;
	top: 28px;
	left: 30px;
	display: block;
	width: auto;
	height: 46px;
	max-width: calc(100% - 60px);
	object-fit: contain;
	object-position: left center;
}

@media (max-width: 767px) {
	.kj .kj__card-logo {
		top: 20px;
		left: 24px;
		height: 40px;
		max-width: calc(100% - 48px);
	}
}

.kj .kj__card-body {
	display: block;
	margin-top: 20px;
	padding-top: 10px;
	border-top: 1px solid var(--kj-gold);
}

.kj .kj__card .kj__card-meta {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 4px 24px;
	margin: 0 0 20px;
	font-size: clamp(16px, 0.25vw + 15px, 18px);
	font-weight: 400;
	line-height: normal;
	letter-spacing: 0.04em;
	color: var(--kj-blau);
}

.kj .kj__card-firma {
	text-align: right;
}

.kj .kj__card-title {
	margin: 0;
	max-width: 75%;
	font-family: var(--kj-heading);
	font-weight: 300;
	font-size: clamp(20px, 0.6vw + 16px, 26px);
	line-height: 1.36;
	text-transform: uppercase;
	color: var(--kj-blau);
	transition: color 0.2s ease;
}

@media (max-width: 767px) {
	.kj .kj__card-title {
		max-width: none;
	}
}

/* Hover: Linie unter dem Titel (assets/css/links.css). */

.kj .kj__card-link:focus-visible {
	outline: 2px solid var(--kj-blau);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.kj .kj__back-pfeil,
	.kj .kj__card-img {
		transition: none;
	}
}

/* Nur für Screenreader (eigene Klasse, unabhängig vom Parent-Theme). */
.kj .kj__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}