/*
 * Gemeinsame Grundlage aller Frontend-Stylesheets.
 *
 * Übersicht, Detailseite und die Bewerbungsseiten laden jeweils ihr eigenes
 * Stylesheet, teilen sich aber dieselbe Gestaltungssprache. Was hier steht,
 * stand vorher dreimal – mit der absehbaren Folge, dass eine Änderung an
 * einer Stelle die beiden anderen vergaß.
 *
 * Wird als Abhängigkeit vor listing.css, detail.css und widgets.css geladen.
 * Die Variablen setzt `Style::css()` danach als Inline-CSS auf `:root`; die
 * Werte hier sind nur der Rückfall, falls das Inline-CSS fehlt.
 *
 * Zur Spezifität: Einklassige Selektoren (0,1,0) reichen hier. Divi setzt für
 * `a`, `p` und Überschriften Elementregeln (0,0,1) – die werden geschlagen.
 * Die gescopten Regeln `.ls-jobs .element` in den drei Einzeldateien bleiben,
 * wo sie gegen Divis Listen- und Formularregeln antreten müssen.
 *
 * Maße an der echten Website gemessen (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.
 */

.ls-jobs,
.ls-job,
.ls-widget {
	--ls-accent: #0099a4;
	--ls-text: #393936;
	--ls-muted: #6a6a66;
	--ls-line: #e2e2df;
	--ls-soft-bg: #f4f4f4;
	--ls-button-bg: #ffa01a;
	--ls-button-text: #ffffff;
	--ls-button-hover: #0099a4;
	--ls-button-radius: 100px;
	--ls-field-bg: #ffffff;
	--ls-field-radius: 20px;
	--ls-panel-radius: 20px;
}

/* ---------- Icons ---------- */

/*
 * Strich-Icons, inline und in der Textfarbe. Keine Icon-Schrift, keine
 * Emoji: die eine lädt eine weitere Datei, die anderen sehen auf jedem
 * System anders aus und werden vorgelesen.
 *
 * Die Pfade stehen in includes/class-icons.php – an einer Stelle, nicht in
 * jeder Klasse, die ein Icon braucht.
 */
.ls-icon {
	flex-shrink: 0;
	width: 1.1em;
	height: 1.1em;
	vertical-align: -.12em;
	color: #9a9a95;
}

/* Der Ort ist die Angabe, nach der gesucht wird; Kontaktwege und Häkchen
   sind Zusagen. Beide tragen die Akzentfarbe, der Rest bleibt zurückgenommen. */
.ls-icon--pin,
.ls-icon--telefon,
.ls-icon--brief,
.ls-icon--haken,
.ls-icon--haken-kreis {
	color: var(--ls-accent);
}

.ls-icon--haken {
	width: 1.25em;
	height: 1.25em;
	stroke-width: 2.6;
}

.ls-icon--ausruf {
	color: var(--ls-button-bg);
}

/* ---------- Flächen und Überschriften ---------- */

/*
 * Die Hausschrift der Abschnittsüberschriften: Versalien, fett, in Petrol –
 * so stehen „FAIRE BEZAHLUNG NACH TARIF" und „ECHTE ÜBERNAHMECHANCEN" auf
 * der Website. Bei 1.4em fett gilt die 3:1-Grenze, die #0099a4 auf Weiß mit
 * 3,45:1 einhält.
 *
 * Wo wir das Markup selbst bauen, steht die Klasse `.ls-titel` daran. Die
 * drei Selektoren darunter sind Markup, das uns nicht gehört und an dem sich
 * keine Klasse setzen lässt:
 *
 *   .ls-status__text h2      Überschrift aus dem Seitentext des Kunden
 *   .ls-job__prose h2        Blocküberschriften aus dem Cockpit-Feed
 *   .rnFormWrapper legend    Abschnitte des zvoove-Bewerbungsformulars
 *
 * Sie stehen hier mit in der Liste, statt die Deklarationen ein zweites,
 * drittes und viertes Mal zu wiederholen. Mit dem Wurzel-Scope davor, weil
 * Divi für Überschriften eigene Regeln mitbringt – ohne den Scope gewinnt
 * Divi und die Überschrift bleibt grau.
 */
.ls-jobs .ls-titel,
.ls-job .ls-titel,
.ls-widget .ls-titel,
.ls-widget .ls-status__text h2,
.ls-job .ls-job__prose h2,
.ls-widget .rnFormWrapper legend {
	margin: 0 0 .9em;
	color: var(--ls-accent);
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
}

/* ---------- Die Fläche ---------- */

/*
 * Ein Kasten, fünf Verwendungen: Vertrauenspunkte, Initiativ-Kasten der
 * Übersicht, Eckdaten und Kontakt der Detailseite, Stellenkarte der
 * Bewerbungsseite, Danke- und Fehlerkasten.
 *
 * Vorher stand die Fläche fünfmal im CSS, mit drei verschiedenen Polsterungen
 * (1.6/1.5, 1.8/1.6, 2.2/2) – Unterschiede, die niemand entschieden hat. Und
 * als der Vertrauenskasten in diese Datei umzog, nahm ich die Regel in
 * listing.css mit; der Initiativ-Kasten hing daran und stand danach ohne
 * Polsterung da. Genau dafür gibt es jetzt eine Klasse.
 */
.ls-panel {
	padding: 1.7em 1.6em;
	border-radius: var(--ls-panel-radius);
	background: var(--ls-soft-bg);
}

/* Kontur statt Fläche – für den zweiten Kasten einer Spalte, damit nicht
   zwei graue Flächen ineinanderlaufen. */
.ls-panel--rahmen {
	border: 1px solid var(--ls-line);
	background: transparent;
}

/* Der Statuskasten steht allein auf der Seite und darf großzügiger sein. */
.ls-panel--gross {
	padding: 2.2em 2em;
}

/* ---------- Vertrauenspunkte ---------- */

/*
 * „Warum Leistenschneider" – auf Übersicht, Detailseite und beiden
 * Bewerbungsseiten dasselbe. Inhalte und Schalter: includes/class-trust.php.
 *
 * Motivkompass: DENKER. Belege statt Zusprüche.
 */
.ls-trust {
	display: block;
}

.ls-trust__point {
	display: flex;
	gap: .7em;
	margin: 0 0 .85em;
	color: var(--ls-text);
	font-size: .95em;
	line-height: 1.55;
}

.ls-trust__point:last-of-type {
	margin-bottom: 0;
}

.ls-trust__point .ls-icon {
	margin-top: .18em;
}

.ls-trust__foot {
	margin: 1.1em 0 0;
	padding-top: 1em;
	border-top: 1px solid var(--ls-line);
	color: var(--ls-muted);
	font-size: .9em;
	line-height: 1.5;
}

/* ---------- Gemeinsames Verhalten ---------- */

.ls-jobs :is(a, button, input, select, textarea):focus-visible,
.ls-job :is(a, button, input, select, textarea):focus-visible,
.ls-widget :is(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--ls-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.ls-jobs *,
	.ls-job *,
	.ls-widget * {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------- Abstand zum Fußbereich ---------- */

/*
 * Unsere schlichten Seiten – Detailseiten, Bewerbungsstrecke, die
 * Cockpit-Systemseiten – sind keine Divi-Layouts: `.entry-content` endet, der
 * Footer beginnt, ohne jede Polsterung dazwischen. Der letzte Absatz klebte
 * damit am Fußbereich.
 *
 * Die Marke `ls-jobs-seite` setzt `Style::body_class()` genau dort, und
 * ausdrücklich **nicht** auf /stellenanzeigen/: Dort bringt die Divi-Section
 * ihre eigene Polsterung mit, der Zuschlag wäre doppelt.
 *
 * 4em entspricht der Sectionspolsterung der übrigen Seite (57,6px bei 14px
 * Grundschrift). Eine Regel statt einer je Stylesheet – die Cockpit-Seiten
 * zeigen keinen unserer Blöcke und wären von jeder blockbezogenen Regel
 * wieder nicht erfasst worden.
 */
.ls-jobs-seite .entry-content,
.ls-jobs-seite .wp-block-post-content {
	padding-bottom: 4em;
}