/**
 * KW Lobby — Stellen-Einzelseite (Single-Post Template).
 *
 * Aufbau: Kopf mit Dachzeile, Titel und Eckdaten-Band, darunter Split-Layout
 * (Text links, mitlaufende Eckdaten-Karte rechts ab 900px), abgesetzter
 * Bewerbungs-Abschnitt.
 *
 * Leitgedanke: Ein Bewerber entscheidet in Sekunden, ob die Stelle passt. Die
 * vier Kriterien dafuer (Pensum, Geld, Start, Ort) stehen deshalb ueber der
 * ersten Textzeile — und die drei inhaltlich verschiedenen Listen sind auch
 * optisch verschieden, damit sie sich nicht zu einer grauen Masse addieren.
 */

.kw-job-single {
	--kw-job-gap: var(--kwl-space-lg, 24px);
	--kw-job-radius: var(--kwl-radius-lg, 16px);

	/*
	 * Gold in zwei Rollen: --kwl-accent (#BD9B5C) traegt auf hellem Grund nur
	 * rund 2,4:1 und ist damit ausschliesslich fuer Linien, Flaechen und
	 * dekorative Symbole brauchbar. Wo Gold als *Text* erscheint, muss die
	 * dunklere Variante her — im Dunkelmodus flippt sie auf ein helles Gold.
	 */
	--kw-job-gold-line: var(--kwl-accent, #BD9B5C);
	--kw-job-gold-text: var(--kwl-focus, #7B6835);

	padding: var(--kwl-space-xl, 40px) 0;
	container-type: inline-size;
}

.kw-job-single__shell {
	max-width: 1100px;
	margin: 0 auto;
	padding-inline: var(--kwl-space-md, 16px);
	display: flex;
	flex-direction: column;
	gap: var(--kw-job-gap);
}

.kw-job-single__article {
	padding: var(--kwl-space-lg, 24px);
	background: var(--kwl-bg, #fff);
	border-radius: var(--kw-job-radius);
}

/* ── Kopfbereich ────────────────────────────────────────────────────── */

.kw-job-single__header {
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-sm, 12px);
	padding-bottom: var(--kwl-space-lg, 24px);
	margin-bottom: var(--kwl-space-lg, 24px);
	border-bottom: 1px solid var(--kwl-border, #e2e8f0);
}

.kw-job-single__kicker {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	color: var(--kw-job-gold-text);
	font-size: var(--kwl-fsize-small, 0.85rem);
	font-weight: var(--kwl-fw-semibold, 600);
	letter-spacing: var(--kwl-ls-ultra, 0.12em);
	text-transform: uppercase;
}

.kw-job-single__kicker-sep {
	color: var(--kw-job-gold-line);
}

.kw-job-single__title {
	margin: 0;
	font-family: var(--kwl-font-heading, inherit);
	font-size: var(--kwl-fsize-display-sm, clamp(1.8rem, 4vw, 2.5rem));
	line-height: var(--kwl-lh-tight, 1.15);
	color: var(--kwl-text, currentColor);
	max-width: 24ch;
}

/* ── Eckdaten-Band ──────────────────────────────────────────────────── */

.kw-job-single__band {
	list-style: none;
	padding: 0;
	margin: var(--kwl-space-xs, 4px) 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--kwl-space-md, 16px);
}

.kw-job-single__band-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
}

.kw-job-single__band-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 34px;
	block-size: 34px;
	border-radius: var(--kwl-radius-full, 999px);
	background: color-mix(in oklab, var(--kw-job-gold-line) 16%, transparent);
	color: var(--kw-job-gold-text);
}

.kw-job-single__band-icon svg {
	inline-size: 18px;
	block-size: 18px;
}

.kw-job-single__band-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.kw-job-single__band-label {
	color: var(--kwl-text-muted, currentColor);
	font-size: var(--kwl-fsize-caption, 0.78rem);
	font-weight: var(--kwl-fw-semibold, 600);
	letter-spacing: var(--kwl-ls-wide, 0.05em);
	text-transform: uppercase;
	line-height: var(--kwl-lh-snug, 1.3);
}

.kw-job-single__band-value {
	color: var(--kwl-text, currentColor);
	font-weight: var(--kwl-fw-semibold, 600);
	line-height: var(--kwl-lh-snug, 1.3);
	font-variant-numeric: tabular-nums;
	text-wrap: balance;
}

/* ── Kopf-Handlungsaufruf ───────────────────────────────────────────── */

.kw-job-single__header-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kwl-space-sm, 12px) var(--kwl-space-md, 16px);
	margin-top: var(--kwl-space-xs, 4px);
}

.kw-job-single__deadline {
	margin: 0;
	color: var(--kwl-text-muted, currentColor);
	font-size: var(--kwl-fsize-small, 0.9rem);
	font-variant-numeric: tabular-nums;
}

/* ── Split-Layout ───────────────────────────────────────────────────── */

.kw-job-single__layout {
	display: grid;
	gap: var(--kw-job-gap);
	grid-template-columns: minmax(0, 1fr);
}

@container (min-width: 900px) {
	.kw-job-single__layout {
		grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
	}

	.kw-job-single__sidebar {
		position: sticky;
		top: calc(var(--kwl-nav-height, 80px) + var(--kwl-space-md, 16px));
		align-self: start;
	}
}

/* ── Inhalts-Sektionen ──────────────────────────────────────────────── */

.kw-job-single__content {
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-xl, 32px);
	min-width: 0;
}

.kw-job-single__section-heading {
	margin: 0 0 var(--kwl-space-sm, 12px);
	font-family: var(--kwl-font-heading, inherit);
	font-size: var(--kwl-fsize-h3, 1.5rem);
	color: var(--kwl-text, currentColor);
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Kurze Gold-Haarlinie als Auszeichnung — traegt keine Information und ist
   deshalb rein dekorativ; sie waechst mit, statt eine feste Breite zu setzen. */
.kw-job-single__section-heading::after {
	content: "";
	flex: 1 1 auto;
	block-size: 1px;
	background: linear-gradient(
		to right,
		color-mix(in oklab, var(--kw-job-gold-line) 70%, transparent),
		transparent
	);
}

.kw-job-single__intro {
	margin: 0;
	font-size: var(--kwl-fsize-lead, 1.1rem);
	line-height: var(--kwl-lh-relaxed, 1.55);
	color: var(--kwl-text, currentColor);
	max-width: 70ch;
}

.kw-job-single__section-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kw-job-single__section-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--kwl-text, currentColor);
	line-height: var(--kwl-lh-body, 1.55);
}

.kw-job-single__item-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--kw-job-gold-text);
	/* Auf die erste Textzeile ausgerichtet, nicht auf die Kastenmitte. */
	margin-block-start: 0.15em;
}

.kw-job-single__item-icon svg {
	inline-size: 17px;
	block-size: 17px;
}

.kw-job-single__item-text {
	min-width: 0;
}

/* Variante „Liste": Aufgaben und Profil — gefuehrt, aber ruhig. */
[data-kwl-job-section="list"] .kw-job-single__section-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 70ch;
}

/* Variante „Raster": Wir bieten — jede Zusage eine eigene Flaeche. Das hebt
   die Vorteile heraus, ohne sie zu Werbung zu machen. */
[data-kwl-job-section="grid"] .kw-job-single__section-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--kwl-space-sm, 12px);
}

@container (min-width: 620px) {
	[data-kwl-job-section="grid"] .kw-job-single__section-list {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}
}

[data-kwl-job-section="grid"] .kw-job-single__section-item {
	padding: var(--kwl-space-sm, 12px) var(--kwl-space-md, 14px);
	background: var(--kwl-bg-alt, #f7fafc);
	border: 1px solid var(--kwl-border, #e2e8f0);
	border-radius: var(--kwl-radius-md, 8px);
}

/* ── Eckdaten-Karte ─────────────────────────────────────────────────── */

.kw-job-single__facts {
	padding: var(--kwl-space-md, 18px);
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-sm, 12px);
}

.kw-job-single__facts-heading {
	margin: 0;
	font-family: var(--kwl-font-heading, inherit);
	font-size: var(--kwl-fsize-h4, 1.15rem);
	color: var(--kwl-text, currentColor);
	padding-bottom: var(--kwl-space-xs, 8px);
}

/* Die Verguetung ist die meistgesuchte Angabe und steht deshalb vor der
   Aufzaehlung, nicht darin. */
.kw-job-single__salary {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--kwl-space-sm, 12px);
	background: color-mix(in oklab, var(--kw-job-gold-line) 12%, transparent);
	border-radius: var(--kwl-radius-md, 8px);
}

.kw-job-single__salary-label {
	color: var(--kwl-text-muted, currentColor);
	font-size: var(--kwl-fsize-caption, 0.78rem);
	font-weight: var(--kwl-fw-semibold, 600);
	letter-spacing: var(--kwl-ls-wide, 0.05em);
	text-transform: uppercase;
}

.kw-job-single__salary-value {
	color: var(--kwl-text, currentColor);
	font-size: var(--kwl-fsize-h5, 1.15rem);
	font-weight: var(--kwl-fw-bold, 700);
	font-variant-numeric: tabular-nums;
	text-wrap: balance;
}

.kw-job-single__facts-list {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-sm, 12px);
}

.kw-job-single__fact dt {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--kwl-fsize-caption, 0.78rem);
	color: var(--kwl-text-muted, currentColor);
	text-transform: uppercase;
	letter-spacing: var(--kwl-ls-wide, 0.05em);
	font-weight: var(--kwl-fw-semibold, 600);
}

.kw-job-single__fact-icon {
	display: inline-flex;
	color: var(--kw-job-gold-text);
}

.kw-job-single__fact-icon svg {
	inline-size: 15px;
	block-size: 15px;
}

.kw-job-single__fact dd {
	margin: 2px 0 0;
	/* Auf die Textkante der Beschriftung ausgerichtet (Symbol + Abstand). */
	padding-inline-start: calc(15px + 8px);
	color: var(--kwl-text, currentColor);
	font-variant-numeric: tabular-nums;
}

.kw-job-single__apply-btn {
	align-self: stretch;
	text-align: center;
	margin-top: var(--kwl-space-xs, 4px);
}

.kw-job-single__apply-hint {
	margin: 0;
	text-align: center;
	color: var(--kwl-text-muted, currentColor);
	font-size: var(--kwl-fsize-caption, 0.8rem);
	line-height: var(--kwl-lh-snug, 1.35);
}

/* Im Kopf steht der Knopf neben dem Fristhinweis und darf dort nicht auf
   volle Breite gehen. */
.kw-job-single__header-cta .kw-job-single__apply-btn {
	align-self: auto;
	margin-top: 0;
}

/* ── Mitlaufende Bewerben-Leiste (nur schmale Bildschirme) ──────────── */

.kw-job-single__mobile-bar {
	display: none;
}

@container (max-width: 899px) {
	.kw-job-single__mobile-bar {
		position: sticky;
		bottom: var(--kwl-space-sm, 12px);
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--kwl-space-sm, 12px);
		margin-top: var(--kwl-space-lg, 24px);
		padding: 10px 12px;
		background: var(--kwl-bg, #fff);
		border: 1px solid var(--kwl-border, #e2e8f0);
		border-radius: var(--kwl-radius-full, 999px);
		box-shadow: var(--kwl-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.14));
	}

	/*
	 * Ohne Spalte steht die Eckdaten-Karte im Textfluss, direkt oberhalb der
	 * mitlaufenden Leiste — beide trugen denselben Knopf, und beim Scrollen lagen
	 * sie uebereinander. Auf schmalen Bildschirmen uebernimmt die Leiste diese
	 * Rolle; die Karte bleibt die Uebersicht, die sie ist.
	 */
	.kw-job-single__facts .kw-job-single__apply-btn,
	.kw-job-single__apply-hint {
		display: none;
	}

	.kw-job-single__mobile-salary {
		min-width: 0;
		padding-inline-start: 8px;
		color: var(--kwl-text, currentColor);
		font-weight: var(--kwl-fw-semibold, 600);
		font-size: var(--kwl-fsize-small, 0.9rem);
		font-variant-numeric: tabular-nums;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.kw-job-single__mobile-btn {
		flex: 0 0 auto;
	}
}

/* ── Bewerbungs-Abschnitt ───────────────────────────────────────────── */

.kw-job-single__apply {
	margin-top: var(--kwl-space-xl, 32px);
	padding: var(--kwl-space-lg, 24px) var(--kwl-space-md, 16px);
	background: var(--kwl-bg-alt, #f7fafc);
	border-radius: var(--kw-job-radius);
}

.kw-job-single__apply-intro {
	text-align: center;
	max-width: 60ch;
	margin: 0 auto var(--kwl-space-lg, 24px);
}

.kw-job-single__apply-heading {
	margin: 0 0 var(--kwl-space-sm, 12px);
	font-family: var(--kwl-font-heading, inherit);
	font-size: var(--kwl-fsize-h2, 1.75rem);
	color: var(--kwl-text, currentColor);
	/*
	 * Der gemeinsame Gold-Trenner setzt seine Linie auf `bottom: 0`. Ohne
	 * Innenabstand liegt sie unmittelbar an den Unterlaengen und liest sich als
	 * Unterstreichung des letzten Wortes statt als Auszeichnung der Zeile.
	 */
	padding-bottom: var(--kwl-space-sm, 12px);
}

.kw-job-single__apply-lead {
	margin: 0;
	color: var(--kwl-text-muted, currentColor);
	line-height: var(--kwl-lh-relaxed, 1.55);
}

.kw-job-single__form {
	max-width: 780px;
	margin-inline: auto;
	padding: var(--kwl-space-lg, 24px);
	background: var(--kwl-bg, #fff);
	border-radius: var(--kwl-radius-md, 12px);
}

/* ── Absende-Button des Bewerbungsformulars ─────────────────────────────
   Fluent Forms liefert ihn weiss auf seinem Blau #1a7efb — gemessen 3,87:1
   und damit unter der BFSG-Schwelle von 4,5:1, ausgerechnet beim wichtigsten
   Element der Seite.

   Fluent faerbt den Button inline im Body mit
   `form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style)` (0,3,1) und liest
   die Flaeche aus `--fluentform-primary`. Deshalb zwei Eingriffe:

   1. Flaeche ueber die Variable — gesetzt am Formular selbst, nicht am
      aeusseren Container: Fluent definiert sie auf `.fluentform`, das
      dazwischen liegt und eine Definition weiter oben ueberschreiben wuerde.
   2. Schrift ueber Spezifitaet (0,4,1) statt `!important` (§401), weil der
      Inline-Block `color: #ffffff` festschreibt.

   Ergebnis ist dieselbe Gold/Navy-Kombination wie bei den uebrigen Buttons:
   Schrift auf Flaeche 4,9:1 und Flaeche gegen Karte 6,1:1 — beide ueber der
   Schwelle (4,5:1 Text, 3:1 Bedienelement). Weiss auf Gold laege bei 3,7:1,
   Navy als Flaeche bei nur 1,24:1 gegen die dunkle Karte. */

.kw-job-single__form .fluentform,
.kw-job-single__form form.frm-fluent-form {
	--fluentform-primary: var(--kwl-btn-gold, #7B653C);
}

.kw-job-single__form form.frm-fluent-form .ff-btn-submit.ff_btn_style {
	color: var(--kwl-btn-gold-text, #00315d);
}

.kw-job-single__form .ff-btn-submit {
	min-block-size: 44px;
	padding-inline: 1.5rem;
	border-radius: var(--kwl-radius-md, 8px);
	font-weight: var(--kwl-fw-semibold, 600);
	letter-spacing: var(--kwl-ls-wide, 0.02em);
}

.kw-job-single__form .ff-btn-submit:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

/* ── Zurueck-Button ─────────────────────────────────────────────────── */

.kw-job-single__back {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.kw-job-single__back svg {
	width: 18px;
	height: 18px;
}

/* ── Kontrastmodus ──────────────────────────────────────────────────────
   `color-mix()`-Flaechen werden dort zu Graustufen und koennen ganz
   verschwinden. Die betroffenen Elemente bekommen deshalb Systemfarben und
   eine sichtbare Kante. */

@media (forced-colors: active) {
	.kw-job-single__band-icon,
	.kw-job-single__salary {
		background: Canvas;
		border: 1px solid CanvasText;
		color: CanvasText;
	}

	.kw-job-single__section-heading::after {
		background: CanvasText;
	}

	[data-kwl-job-section="grid"] .kw-job-single__section-item,
	.kw-job-single__mobile-bar {
		border-color: CanvasText;
	}
}