/*
 * Meine Anzeigen: die Liste der eigenen Stellenanzeigen und das Formular
 * darunter.
 *
 * Nur, was die gemeinsamen Bausteine nicht mitbringen. `.oo-notice` kommt
 * aus dem Theme (`base.css`); hier steht die Anordnung der eigenen Liste und
 * des Eingabeformulars. Eingebunden wird diese Datei erst mit der Übersicht
 * (Aufgabe 5) — bis dahin ruht sie ungeladen im Plugin.
 */

/* --------------------------------------------------------------- Eigene Liste */

.oo-jobs-mine {
	margin: 0 0 var(--oo-card-gap);
	padding: 0;
	list-style: none;
}

.oo-jobs-mine__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	padding: 12px 14px;
	border: 1px solid var(--oo-line);
	border-radius: var(--oo-radius-small, 6px);
}

.oo-jobs-mine__item + .oo-jobs-mine__item {
	margin-top: 8px;
}

.oo-jobs-mine__title {
	font-weight: 600;
}

.oo-jobs-mine__state {
	color: var(--oo-ink-quiet);
	font-size: 13px;
}

/*
 * Die Knöpfe stehen in einem eigenen `<form>` je Zeile — jede Zeile trägt
 * die Kennung ihrer Anzeige im verborgenen Feld. Deshalb `flex-basis: 100%`
 * statt die Knöpfe in die Fließreihenfolge der Zeile einzureihen: Sie
 * gehören sichtbar zu dieser einen Anzeige, nicht zur Kopfzeile.
 */
.oo-jobs-mine__actions {
	display: flex;
	flex-basis: 100%;
	gap: 8px;
}

/*
 * Eine eigene Regel, nicht `.oo-btn-quiet` aus der Kopfleiste: Jene ist für
 * dunklen Hintergrund gedacht (heller Text bei reduzierter Deckkraft), hier
 * steht der Knopf auf hellem Grund. Das „Ablehnen" der Warteschlange teilt sie
 * sich — beides sind Schritte, die man bewusst geht: erreichbar, aber nicht
 * einladend.
 */
.oo-jobs-mine__actions .oo-btn-quiet,
.oo-review__actions .oo-btn-quiet {
	padding: 5px 12px;
	border: 1px solid var(--oo-line-strong);
	border-radius: var(--oo-radius-small, 6px);
	background: transparent;
	color: var(--oo-ink-quiet);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

.oo-jobs-mine__actions .oo-btn-quiet:hover,
.oo-jobs-mine__actions .oo-btn-quiet:focus-visible,
.oo-review__actions .oo-btn-quiet:hover,
.oo-review__actions .oo-btn-quiet:focus-visible {
	background: var(--oo-surface-quiet);
}

/*
 * „Ändern" ist ein Verweis und kein Knopf — es schreibt nichts, es öffnet das
 * Formular. Damit die Zeile trotzdem aus gleich aussehenden Schaltflächen
 * besteht, bekommt er dieselbe Form und muss dafür zwei Dinge zurücknehmen,
 * die ein Verweis von sich aus mitbringt: die Unterstreichung und die
 * Zeilenhöhe des Fließtexts.
 */
.oo-jobs-mine__actions a.oo-btn-quiet {
	display: inline-block;
	line-height: 1.4;
	color: var(--oo-ink-quiet);
	text-decoration: none;
}

/*
 * Der Ablehnungsgrund steht unter seiner Anzeige, über die ganze Breite: Er ist
 * ein Satz und kein Etikett, und in der Fließreihenfolge der Kopfzeile stünde
 * er neben dem Zustand, als wäre er ein zweiter.
 */
.oo-jobs-mine__reason {
	flex-basis: 100%;
	margin: 4px 0 0;
	padding: 8px 12px;
	background: var(--oo-surface-quiet);
	border-left: 3px solid var(--oo-accent);
	border-radius: var(--oo-radius-small, 6px);
	font-size: 13px;
}

/* -------------------------------------------------------------------- Formular */

.oo-jobs-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 480px;
}

.oo-jobs-field {
	display: block;
	font-size: 14px;
}

.oo-jobs-field span {
	display: block;
	margin-bottom: 3px;
	color: var(--oo-ink-quiet);
}

.oo-jobs-field input,
.oo-jobs-field select,
.oo-jobs-field textarea {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--oo-line-strong);
	border-radius: var(--oo-radius-small, 6px);
	background: var(--oo-surface, #fff);
	color: var(--oo-ink);
	font: inherit;
	font-size: 14px;
}

.oo-jobs-field textarea {
	resize: vertical;
}

/*
 * Ein fehlendes Pflichtfeld bekommt einen roten Rand statt eines eigenen
 * Fehlertexts je Feld — `oo_jobs_validate()` liefert nur Feldnamen, keine
 * Sätze. Nur bei der Kontaktangabe steht darunter zusätzlich ein Satz, weil
 * dort drei Felder gemeinsam gemeint sind und ein roter Rand an dreien allein
 * nicht erklärt, warum.
 */
.oo-jobs-field.is-missing input,
.oo-jobs-field.is-missing select,
.oo-jobs-field.is-missing textarea {
	border-color: var(--oo-accent);
}

.oo-jobs-hint {
	margin: 0;
	color: var(--oo-ink-quiet);
	font-size: 13px;
}

.oo-jobs-error {
	margin: 0;
	color: var(--oo-accent);
	font-size: 13px;
}

/*
 * Die Knopfzeile am Fuß des Formulars. Beim Ändern steht neben dem Knopf ein
 * „Abbrechen"; beim Anlegen steht der Knopf allein, und die Zeile ändert daran
 * nichts. `align-items: center`, damit der Verweis auf der Mittellinie des
 * Knopfes sitzt und nicht auf seiner Grundlinie.
 */
.oo-jobs-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

/*
 * Ruhiger als der Knopf daneben und ohne eigene Fläche: Abbrechen ist der
 * Ausgang, nicht die Richtung. Trotzdem unterstrichen — es ist ein Verweis,
 * und ein Verweis, der aussieht wie Text, wird nicht gefunden.
 */
.oo-jobs-form__cancel {
	color: var(--oo-ink-quiet);
	font-size: 14px;
	text-decoration: underline;
}

/*
 * Eigene Regel, nicht `.oo-btn` aus der Kopfleiste: Jene ist für die dunkle
 * Navy-Leiste gedacht (weiße Fläche, dunkler Text), hier steht der Knopf im
 * hellen Formular. Die Warteschlange teilt sie sich — ihr „Freigeben" ist
 * derselbe Knopf an derselben Art von Stelle, und zwei Regeln dafür wären
 * früher oder später zwei Formen.
 */
.oo-jobs-form .oo-btn,
.oo-review__actions .oo-btn {
	align-self: flex-start;
	padding: 9px 18px;
	border: 0;
	border-radius: var(--oo-radius);
	background: var(--oo-accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.oo-jobs-form .oo-btn:hover,
.oo-jobs-form .oo-btn:focus-visible,
.oo-review__actions .oo-btn:hover,
.oo-review__actions .oo-btn:focus-visible {
	background: var(--oo-accent-dark, #7d2f2f);
}

/* --------------------------------------------------------------- Warteschlange
 *
 * Die Prüfseite unter /jobs/review/. Sie gab ihre Klassen von Anfang an aus,
 * bekam aber nie eine einzige Regel dazu — bis zum 04.09.2026 waren das nackte
 * Absätze untereinander, in denen die Moderation Betrieb, Ort und Kontaktdaten
 * nicht auseinanderhalten konnte.
 *
 * Die Kachelform kommt aus dem Theme (`.oo-card`), die Knöpfe teilen sich ihre
 * Regeln mit dem Formular weiter oben. Hier steht nur, was dazwischen liegt.
 */

.oo-review__entry h2 {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.35;
}

/*
 * Wie lange dieser Eintrag schon wartet. Klein und gedämpft, solange alles
 * seinen Gang geht — die Zahl ist eine Auskunft, keine Mahnung.
 *
 * Ab vierzehn Tagen wechselt sie in den Akzentton: Das ist der Tag, an dem die
 * Mahnung an die Moderation herausgeht, und ab dem der Eintrag auf dieser Seite
 * auffallen soll. Ohne diese Zeile stützte sich die Begründung der
 * Dreißig-Tage-Regel auf eine Auffälligkeit, die es nicht gab.
 */
.oo-review__waiting {
	margin: -6px 0 12px;
	color: var(--oo-ink-quiet);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}

.oo-review__waiting.is-alt {
	color: var(--oo-accent);
	font-weight: 600;
}

/*
 * Beschriftung und Wert nebeneinander in zwei Spalten statt hintereinander in
 * einem Absatz. Die Moderation liest hier acht Angaben untereinander und
 * vergleicht sie mit dem, was sie erwartet — dafür müssen die Werte auf einer
 * Kante beginnen. `max-content` in der ersten Spalte, damit die längste
 * Beschriftung sie bestimmt und nicht ein geratener Wert.
 */
.oo-review__line {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0 16px;
	margin: 0 0 4px;
	font-size: 14px;
}

.oo-review__line span {
	color: var(--oo-ink-quiet);
}

/*
 * Der Anzeigentext, eingerückt und ruhiger gesetzt als die Angaben darüber: Er
 * ist die Selbstauskunft des Betriebs, keine geprüfte Angabe — derselbe
 * Unterschied wie beim `.oo-about` des Verzeichnisses, und er soll ohne
 * Überschrift zu sehen sein.
 */
.oo-review__text {
	margin: 14px 0;
	padding-left: 12px;
	border-left: 2px solid var(--oo-line);
	color: var(--oo-ink-soft);
	font-size: 14px;
}

.oo-review__text p {
	margin: 0 0 8px;
}

.oo-review__text p:last-child {
	margin-bottom: 0;
}

/*
 * „Schon einmal abgelehnt" — der Hinweis, dass hier keine neue Anzeige liegt,
 * sondern eine überarbeitete. Wer ihn überliest, prüft dieselbe Sache noch
 * einmal von vorn. Dieselbe Bauform wie `.oo-previous-decision` im Verzeichnis
 * und wie der Ablehnungsgrund in der eigenen Liste: abgesetzte Fläche, farbiger
 * Strich links, keine eigene Kachel.
 */
.oo-review__previous {
	margin: 0 0 14px;
	padding: 10px 14px;
	background: var(--oo-surface-quiet);
	border-left: 3px solid var(--oo-accent);
	border-radius: var(--oo-radius-small, 6px);
	font-size: 14px;
}

.oo-review__previous p {
	margin: 0 0 4px;
}

.oo-review__previous p:last-child {
	margin-bottom: 0;
}

/*
 * Die Entscheidung: Grundfeld und beide Knöpfe in einer Zeile, durch einen
 * Strich vom Geprüften getrennt. Das Feld wächst, die Knöpfe nicht — und auf
 * schmalen Geräten bricht die Zeile um, statt über den Rand hinauszulaufen.
 *
 * `align-items: flex-end`, damit die Knöpfe auf der Unterkante des Eingabefelds
 * stehen und nicht auf der seiner Beschriftung.
 */
.oo-review__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--oo-line);
}

.oo-review__reason {
	flex: 1 1 240px;
	font-size: 14px;
}

.oo-review__reason span {
	display: block;
	margin-bottom: 3px;
	color: var(--oo-ink-quiet);
}

.oo-review__reason input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--oo-line-strong);
	border-radius: var(--oo-radius-small, 6px);
	background: var(--oo-surface, #fff);
	color: var(--oo-ink);
	font: inherit;
	font-size: 14px;
}

/*
 * Unter 560 px stehen Beschriftung und Wert untereinander. Zwei Spalten, deren
 * erste „Anstellungsart" heißt, lassen für den Wert daneben nichts übrig.
 */
@media (max-width: 560px) {
	.oo-review__line {
		display: block;
		margin-bottom: 8px;
	}

	.oo-review__line span {
		display: block;
		font-size: 12.5px;
	}
}

/* ------------------------------------------------------------------- Übersicht
 *
 * Die Tabelle unter /jobs/. Dieselben Bausteine wie der Fortbildungskalender
 * (`.oo-cal` in optometrie-events/assets/events.css), unter eigenem Namen —
 * zwei Plugins, jedes für sich lauffähig.
 */

/* ------------------------------------------------------------------ Rahmen */

.oo-jobs {
	border: 1px solid var(--oo-line);
	border-radius: var(--oo-radius);
	background: var(--oo-surface, #fff);
	overflow: hidden;
}

/* ------------------------------------------------------------- Filterleiste */

.oo-jobs__bar {
	padding: 14px 16px 12px;
	border-bottom: 1px solid var(--oo-line);
	background: var(--oo-surface-sunken, #f9fafb);
}

/*
 * Ohne Skript nützt die Leiste nichts — sie erscheint erst, wenn das Skript
 * sie eingeschaltet hat. Die Tabelle darunter steht dann trotzdem vollständig
 * da; ungefiltert ist besser als gar nicht.
 */
.oo-jobs:not(.is-interaktiv) .oo-jobs__bar {
	display: none;
}

.oo-jobs__search {
	position: relative;
	margin-bottom: 10px;
}

.oo-jobs__search input {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--oo-line-strong);
	border-radius: var(--oo-radius-small, 7px);
	background: var(--oo-surface, #fff);
	font: inherit;
	font-size: 14px;
}

.oo-jobs__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.oo-jobs__chip {
	padding: 5px 12px;
	border: 1px solid var(--oo-line-strong);
	border-radius: 999px;
	background: var(--oo-surface, #fff);
	color: var(--oo-ink-quiet);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

.oo-jobs__chip.is-on {
	background: var(--oo-accent);
	border-color: var(--oo-accent);
	color: #fff;
	font-weight: 600;
}

.oo-jobs__num {
	margin-left: 5px;
	opacity: .65;
	font-variant-numeric: tabular-nums;
}

.oo-jobs__radius {
	display: flex;
	align-items: center;
	gap: 6px;
}

.oo-jobs__radius input,
.oo-jobs__radius select {
	padding: 5px 10px;
	border: 1px solid var(--oo-line-strong);
	border-radius: var(--oo-radius-small, 7px);
	background: var(--oo-surface, #fff);
	color: var(--oo-ink);
	font: inherit;
	font-size: 13px;
}

.oo-jobs__radius input {
	width: 70px;
}

.oo-jobs__reset {
	margin-left: auto;
	border: 0;
	background: none;
	color: var(--oo-accent);
	font: inherit;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

.oo-jobs__count {
	margin: 10px 0 0;
	color: var(--oo-ink-quiet);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- Tabelle */

/*
 * Der Umschlag scrollt, nicht die Seite. Eine Tabelle, die breiter ist als
 * ihre Spalte, schiebt sonst das ganze Layout zur Seite.
 */
.oo-jobs__scroll {
	overflow-x: auto;
}

.oo-jobs__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.oo-jobs__table th {
	padding: 0;
	border-bottom: 1px solid var(--oo-line);
	text-align: left;
	font-weight: 600;
	white-space: nowrap;
}

.oo-jobs__table th button {
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
	padding: 9px 16px;
	border: 0;
	background: none;
	color: var(--oo-ink-quiet);
	font: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: left;
	cursor: pointer;
}

.oo-jobs:not(.is-interaktiv) .oo-jobs__table th button {
	cursor: default;
}

/*
 * Der Pfeil zeigt die Sortierrichtung und liegt in `aria-sort` doppelt vor —
 * einmal für das Auge, einmal für die Vorlesefunktion.
 */
.oo-jobs__arrow::before {
	content: "↕";
	opacity: .3;
}

.oo-jobs__table th[aria-sort="ascending"] button,
.oo-jobs__table th[aria-sort="descending"] button {
	color: var(--oo-accent);
}

.oo-jobs__table th[aria-sort="ascending"] .oo-jobs__arrow::before {
	content: "↑";
	opacity: 1;
}

.oo-jobs__table th[aria-sort="descending"] .oo-jobs__arrow::before {
	content: "↓";
	opacity: 1;
}

.oo-jobs__table td {
	padding: 11px 16px;
	border-bottom: 1px solid var(--oo-line);
	vertical-align: top;
}

.oo-jobs__table tbody tr:last-child td {
	border-bottom: 0;
}

.oo-jobs__table tbody tr:hover td {
	background: var(--oo-surface-sunken, #f9fafb);
}

/* ------------------------------------------------------------------ Zellen */

.oo-jobs__title {
	display: block;
	font-weight: 600;
	line-height: 1.35;
}

.oo-jobs__employer {
	display: block;
	margin-top: 2px;
	color: var(--oo-ink-quiet);
	font-size: 12.5px;
}

/*
 * Der gewuenschte Beginn. Ruhiger gesetzt als der Titel und lauter als der
 * Betrieb: Er entscheidet mit darueber, ob die Stelle ueberhaupt in Frage
 * kommt — wer im Maerz frei wird, ueberliest „ab sofort" sonst und liest die
 * ganze Anzeige umsonst.
 */
.oo-jobs__starts {
	display: block;
	margin-top: 2px;
	color: var(--oo-ink-soft);
	font-size: 12.5px;
}

/*
 * Der Beschreibungstext, zugeklappt in der Zeile.
 *
 * Ein `<details>` und kein Skriptaufbau: Es klappt ohne JavaScript auf, ist mit
 * der Tastatur bedienbar und meldet seinen Zustand von sich aus. Der sichtbare
 * Fokus kommt aus dem Theme (`base.css`, `:focus-visible`) — hier steht deshalb
 * nichts dazu; eine eigene Regel wäre eine zweite, die veraltet.
 *
 * `display: block` beim Aufklapper, weil die Zelle ihre Bausteine untereinander
 * setzt (Titel, Betrieb, Beginn) und ein `<details>` sonst in derselben Zeile
 * wie der Beginn stünde.
 */
.oo-jobs__more {
	display: block;
	margin-top: 6px;
}

/*
 * Der Griff sieht aus wie ein Verweis, weil er sich wie einer verhält: Ein Klick
 * darauf zeigt mehr. Das Dreieck bleibt stehen — es ist das einzige Zeichen
 * dafür, dass hier etwas auf- und wieder zugeht, und der Browser dreht es
 * mit.
 */
.oo-jobs__more > summary {
	display: list-item;
	width: fit-content;
	color: var(--oo-accent);
	font-size: 12.5px;
	cursor: pointer;
}

.oo-jobs__more > summary:hover {
	text-decoration: underline;
}

/*
 * Der Text steht enger als der Fließtext des Theme, aber weiter als die
 * Tabellenzeilen: Er ist zu lesen und nicht zu überfliegen. Die Breite ist
 * gedeckelt, weil die Tabelle die volle Fensterbreite nutzt (`oo-wide`) —
 * achtzig Zeichen sind auch hier die Grenze, ab der eine Zeile schwer
 * zurückzufinden ist.
 */
.oo-jobs__text {
	max-width: 68ch;
	margin-top: 6px;
	color: var(--oo-ink-soft);
	font-size: 13px;
	line-height: 1.6;
}

.oo-jobs__text p {
	margin: 0 0 .6em;
}

.oo-jobs__text p:last-child {
	margin-bottom: 0;
}

.oo-jobs__contact {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
}

.oo-jobs__contact a {
	color: var(--oo-accent);
	text-decoration: underline;
}

.oo-jobs__c-city {
	width: 1%;
	color: var(--oo-ink-quiet);
	font-size: 13px;
	white-space: nowrap;
}

.oo-jobs__c-type {
	width: 1%;
}

.oo-jobs__type {
	display: inline-block;
	padding: 2px 6px;
	border: 1px solid var(--oo-line-strong);
	border-radius: 4px;
	color: var(--oo-ink-quiet);
	font-size: 10.5px;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.oo-jobs__c-date {
	width: 1%;
	color: var(--oo-ink-quiet);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.oo-jobs__empty {
	margin: 0;
	padding: 28px 16px;
	color: var(--oo-ink-quiet);
	text-align: center;
}

/* -------------------------------------------------------------- Schmal */

/*
 * Unter 700 px wird aus jeder Zeile ein Block: Titel und Art nebeneinander,
 * darunter Ort und Datum. Eine vierspaltige Tabelle passt auf kein Telefon.
 */
@media (max-width: 700px) {
	.oo-jobs__table,
	.oo-jobs__table tbody,
	.oo-jobs__table tr,
	.oo-jobs__table td {
		display: block;
	}

	.oo-jobs__table thead {
		display: none;
	}

	.oo-jobs__table tbody tr {
		display: grid;
		grid-template-areas:
			"titel art"
			"ort   datum";
		grid-template-columns: 1fr auto;
		gap: 2px 10px;
		padding: 12px 14px;
		border-bottom: 1px solid var(--oo-line);
	}

	.oo-jobs__table tbody tr td {
		padding: 0;
		border: 0;
	}

	.oo-jobs__table tbody tr:hover td {
		background: none;
	}

	.oo-jobs__c-title { grid-area: titel; }
	.oo-jobs__c-type { grid-area: art; width: auto; justify-self: end; }
	.oo-jobs__c-city { grid-area: ort; width: auto; }
	.oo-jobs__c-date { grid-area: datum; width: auto; justify-self: end; }
}

/*
 * Der Weg zum eigenen Einstellen, unter der Übersicht.
 *
 * Steht bewusst nach der Tabelle und nicht davor: Wer sucht, soll zuerst die
 * Anzeigen sehen. Der Abstand ist der doppelte Zeilenabstand der Tabelle, damit
 * der Knopf nicht wie ihre letzte Zeile wirkt.
 */
.oo-jobs__submit {
	margin-top: 2rem;
}

/* ------------------------------------------------------- Einzelne Anzeige */

/*
 * Die eigene Seite unter /jobs/listing/<slug>/.
 *
 * Sie behält die Lesebreite des Theme (kein `oo-wide`): Hier steht Fließtext,
 * den jemand liest, und keine Tabelle, die jemand überfliegt.
 */
.oo-job__employer {
	margin: -.4rem 0 1.2rem;
	color: var(--oo-ink-quiet);
}

/*
 * Die Angaben als Beschreibungsliste: Bezeichnung und Wert gehören paarweise
 * zusammen, und genau das sagt `<dl>` einer Vorlesefunktion. Jedes Paar liegt in
 * einem eigenen `<div>` — ohne den Umschlag ließen sich `<dt>` und `<dd>` nicht
 * als Zeile setzen.
 */
.oo-job__facts {
	margin: 0 0 1.4rem;
	padding: 14px 16px;
	border: 1px solid var(--oo-line);
	border-radius: var(--oo-radius-small, 6px);
	background: var(--oo-surface-quiet, #fbfbfc);
	font-size: 14px;
}

.oo-job__facts > div {
	display: flex;
	gap: 10px;
}

.oo-job__facts > div + div {
	margin-top: 4px;
}

.oo-job__facts dt {
	flex: 0 0 9rem;
	color: var(--oo-ink-quiet);
}

.oo-job__facts dd {
	margin: 0;
}

.oo-job__text {
	line-height: var(--oo-line-height);
	color: var(--oo-ink-soft);
}

.oo-job__text p {
	margin: 0 0 1em;
}

.oo-job__apply {
	margin-top: 1.6rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--oo-line);
}

.oo-job__apply h2 {
	margin: 0 0 .4rem;
	font-size: 16px;
}

/*
 * Die Kontaktangaben sind derselbe Baustein wie in der Tabellenzeile, und dort
 * sind sie klein gesetzt. Auf dieser Seite sind sie der Zweck des Besuchs.
 */
.oo-job__apply .oo-jobs__contact {
	font-size: 15px;
}

.oo-job__back {
	margin-top: 2rem;
	font-size: 13px;
}