/*
 * Detailseite einer Stelle und die Bewerbungsseiten.
 *
 * Wie die Übersicht: Farben und Rundungen aus CSS-Variablen, Selektoren
 * gescopt als `.ls-job .element`, damit Divi jederzeit übersteuern kann.
 *
 * Maße gegen die echte Seite geprüft (25.09.2026, leistenschneider.org):
 * Grundschrift 14px, Zeilenhöhe 1.7, Radius 20px, graue Fläche #f4f4f4,
 * Abschnittsüberschriften in Versalien und Petrol, keine Schatten.
 *
 * Aufbau: Stellentext links, eine Spalte rechts mit Eckdaten, Knopf und
 * Ansprechpartner. Die Spalte steht im Quelltext vorne und wird per Grid
 * nach rechts gesetzt – siehe class-detail.php.
 */

/* Nur für Screenreader: die Beschriftungen der Eckdaten und der
   Kontaktzeilen. Sichtbar tragen die Icons die Bedeutung. */
.ls-job .ls-job__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Aufteilung ---------- */

.ls-job .ls-job__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20em;
	gap: 2.4em;
	align-items: start;
}

.ls-job .ls-job__main {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
}

.ls-job .ls-job__aside {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 1.3em;
	min-width: 0;
}

/*
 * Die Spalte läuft beim Scrollen mit – aber nur auf hohen Fenstern.
 *
 * Zwei Sackgassen davor, beide selbst gebaut:
 *
 * Den Eckdaten-Kasten allein anzuheften schiebt ihn über die Kästen darunter,
 * sobald die hochscrollen. Kontakt und Vertrauenspunkte verschwinden dann
 * hinter ihm und sind nicht mehr erreichbar.
 *
 * Die ganze Spalte unbedingt anzuheften ist genauso falsch, sobald sie höher
 * ist als das Fenster: Sie bleibt oben kleben, ihr unteres Ende bleibt
 * abgeschnitten, und die Telefonnummer sieht niemand mehr. Mit Eckdaten,
 * Kontakt und vier Vertrauenspunkten wird sie rund 780 Pixel hoch, plus
 * Abstand zur Kopfzeile – auf einem Notebook mit 800 Pixel Fensterhöhe geht
 * das nicht auf.
 *
 * Deshalb die Bedingung an der Fensterhöhe. Darunter scrollt die Spalte ganz
 * normal weg; der Bewerbungs-Knopf steht am Ende des Textes ohnehin noch
 * einmal.
 */
@media (min-height: 62em) {
	.ls-job .ls-job__aside {
		position: sticky;
		/* Abstand für Divis mitlaufende Kopfzeile. */
		top: 7em;
	}
}

/* ---------- Eckdaten und Kontakt ---------- */

.ls-job .ls-job__facts {
	margin: 0;
	padding: 0;
}

.ls-job .ls-job__fact {
	display: flex;
	align-items: flex-start;
	gap: .6em;
	margin: 0 0 .7em;
}

.ls-job .ls-job__fact:last-child {
	margin-bottom: 0;
}

.ls-job .ls-job__fact dd {
	margin: 0;
	color: var(--ls-text);
	font-size: 1em;
	font-weight: 600;
	line-height: 1.45;
}

/* Der Standort ist die erste Angabe und die wichtigste – sein Icon trägt
   die Akzentfarbe, die übrigen bleiben zurückgenommen. */
.ls-job .ls-job__salary {
	margin: 1.2em 0 0;
	padding-top: 1.1em;
	border-top: 1px solid var(--ls-line);
}

.ls-job .ls-job__salary-amount {
	display: block;
	color: var(--ls-text);
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.25;
}

.ls-job .ls-job__salary-unit {
	display: block;
	margin-top: .1em;
	color: var(--ls-muted);
	font-size: .9em;
	line-height: 1.4;
}

.ls-job .ls-job__hint {
	margin: .8em 0 0;
	color: var(--ls-muted);
	font-size: .9em;
	line-height: 1.5;
	text-align: center;
}

.ls-job .ls-job__contact-name {
	margin: 0 0 .6em;
	color: var(--ls-text);
	font-weight: 700;
}

.ls-job .ls-job__contact-line {
	display: flex;
	align-items: flex-start;
	gap: .6em;
	margin: 0 0 .45em;
	line-height: 1.5;
}

.ls-job .ls-job__contact-line:last-child {
	margin-bottom: 0;
}

.ls-job .ls-job__contact-line a {
	color: var(--ls-accent);
	overflow-wrap: anywhere;
}

/* ---------- Stellentext ---------- */

.ls-job .ls-job__prose > :first-child {
	margin-top: 0;
}

.ls-job .ls-job__prose > :last-child {
	margin-bottom: 0;
}

/* Die Blocküberschriften kommen aus dem Cockpit („Zusammenfassung",
   „Anforderungen", „Was wir bieten") und sind durchweg kurz – sie vertragen
   die Versalienschreibung der übrigen Abschnittsüberschriften der Website
   und binden die Stellenseite damit ins Haus ein. */
.ls-job .ls-job__prose h2 {
	margin: 2em 0 .7em;
}

.ls-job .ls-job__prose h2:first-child {
	margin-top: 0;
}

.ls-job .ls-job__prose p {
	margin: 0 0 1em;
}

.ls-job .ls-job__prose ul,
.ls-job .ls-job__prose ol {
	margin: 0 0 1.2em;
	padding-left: 1.3em;
}

.ls-job .ls-job__prose li {
	margin-bottom: .45em;
}

/* ---------- Bewerbungs-Knopf ---------- */

.ls-job .ls-job__apply {
	margin: 1.1em 0 0;
}

.ls-job .ls-job__apply--unten {
	margin: 2.4em 0 0;
	padding-top: 1.8em;
	border-top: 1px solid var(--ls-line);
}

/*
 * Der wichtigste Punkt der Seite. Kräftige Fläche, großzügige Maße, eigene
 * Schriftgröße – er darf nicht aussehen wie ein Link im Fließtext. Divi setzt
 * für Links nur `color`, deshalb reicht eine gescopte Klassenregel.
 *
 * Kein Schatten: die Website benutzt nirgends einen.
 */
.ls-job .ls-job__apply-button {
	display: block;
	/* Schmale Spalte: bei 1.1em bricht „Auf diese Stelle bewerben" auf zwei
	   Zeilen und der Knopf sieht aus, als hätte er sich verschluckt. Am Ende
	   des Textes, wo Platz ist, wird er wieder größer. */
	padding: .95em 1.2em;
	border: none;
	border-radius: var(--ls-button-radius);
	background: var(--ls-button-bg);
	color: var(--ls-button-text);
	font-size: 1em;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: background .15s ease;
}

.ls-job .ls-job__apply-button:hover,
.ls-job .ls-job__apply-button:focus {
	background: var(--ls-button-hover);
	color: var(--ls-button-text);
	text-decoration: none;
}

/* Am Ende des Textes steht der Knopf nicht in einer schmalen Spalte – dort
   wäre volle Breite über 40em unangenehm zu treffen. */
.ls-job .ls-job__apply--unten .ls-job__apply-button {
	display: inline-block;
	padding: 1em 2.6em;
	font-size: 1.1em;
}

.ls-job .ls-job__back {
	margin: 1.6em 0 0;
}

.ls-job .ls-job__back a {
	color: var(--ls-accent);
	font-weight: 600;
}

/*
 * Die Bewerbungsseiten standen hier einmal mit. Sie sind raus: `detail.css`
 * lädt nur auf Stellenseiten (`is_singular( POST_TYPE )`), ein `.ls-widget`
 * liegt dort nie innerhalb eines `.ls-job`. Die Regeln konnten nie greifen.
 * Zuständig ist `widgets.css`.
 */

/* ---------- Schmalere Fenster ---------- */

/*
 * Unter rund 62em ist für zwei Spalten kein Platz. Die Spalte steht im
 * Quelltext vorne, rutscht hier also von selbst über den Text – Eckdaten und
 * Knopf stehen damit vor den Anforderungen und nicht dahinter.
 */
@media (max-width: 62em) {
	.ls-job .ls-job__layout {
		display: block;
	}

	.ls-job .ls-job__aside {
		position: static;
		display: block;
		margin-bottom: 2.2em;
	}

	.ls-job .ls-job__card + .ls-job__card {
		margin-top: 1.3em;
	}
}

@media (max-width: 40em) {
	.ls-job .ls-job__apply--unten .ls-job__apply-button {
		display: block;
	}
}

/* Divis Beitrags-Meta auf Stellenseiten ausblenden.
   Dort steht "von | 21. Aug 2026" – ohne Autor, weil importierte Stellen
   keinen haben, und mit einem Datum, das für eine Stellenanzeige nichts
   aussagt. Sieht aus wie ein Fehler und ist einer. */
.single-ls_stelle .et_post_meta_wrapper > .post-meta,
.single-ls_stelle .entry-title + .post-meta {
	display: none;
}