/**
 * S+W Stellenangebote — Widget-Styles.
 *
 * Abstände folgen dem Gesetz der Nähe: was zusammengehört, steht zusammen.
 * Vier klar unterscheidbare Stufen (etwa 1 : 3 : 6 : 9), damit die Gruppierung
 * ohne Trennlinien lesbar ist — ein gleichmäßiger Rhythmus würde alle Ebenen
 * gleich laut machen:
 *
 *   tight   ( 8px)  Überschrift und ihr Text sind EIN Gedanke
 *                   (Bezeichnung → Rahmenbedingungen)
 *   lead    (16px)  Anlauf: die Einleitung führt in die erste Stelle hinein —
 *                   näher als ein eigener Absatz, aber luftiger als „tight",
 *                   weil hier zwei Absätze aufeinandertreffen statt
 *                   Überschrift und zugehöriger Text
 *   block   (26px)  zwei Absätze innerhalb desselben Abschnitts
 *                   (Kontaktzeilen → Schlusssatz)
 *   group   (52px)  zwei gleichrangige Einträge derselben Gruppe
 *                   (Stelle zu Stelle)
 *   section (78px)  neuer Sinnabschnitt
 *                   (Titel | Stellen | Wir bieten | Bewerbung)
 *
 * Die vierte Stufe ist der Punkt, an dem das Gesetz der Nähe trägt: stünden
 * zwei Stellen so weit auseinander wie die Stellen vom „Wir bieten"-Block,
 * läse sich jede Stelle als eigener Abschnitt statt als Eintrag einer Liste.
 *
 * Der Abstand steht als margin-top am UNTEREN Element, nicht als gap am
 * Container: nur so lässt sich je Übergang eine andere Stufe wählen.
 *
 * Schriftgrößen setzt dieses Widget bewusst nicht — sie kommen aus den
 * Kit-Globals, siehe Kommentar bei den Überschriften weiter unten.
 */

.sw-stellen {
	--sw-stellen-color: var(--sw-color-text, #1D1D1B);

	/* Abstandsleiter — Basis ist der Widget-Abstand der Elementor-Spalte
	   (--sw-space-stack, 26px). „tight" ist bewusst deutlich kleiner als die
	   Zeilenhöhe des Fließtexts, sonst liest sich der Zusammenhang nicht. */
	--sw-stellen-tight: 0.5rem;
	--sw-stellen-lead: 1rem;
	--sw-stellen-block: var(--sw-space-stack, 1.625rem);
	--sw-stellen-group: calc(var(--sw-space-stack, 1.625rem) * 2);
	--sw-stellen-section: calc(var(--sw-space-stack, 1.625rem) * 3);

	/* Flex-Spalte statt Grid: sw-animations.js vergibt den Stagger-Index bei
	   Grid-Gruppen spaltenweise (`i % cols`) — bei einer Spalte bekämen also
	   alle Blöcke die 0 und blendeten gleichzeitig ein. Als Flex-Container
	   läuft der fortlaufende Index 0..N, die Blöcke folgen aufeinander.
	   gap bleibt 0 — den Rhythmus setzt die Leiter weiter unten. */
	display: flex;
	flex-direction: column;
	gap: 0;
	font-family: var(--sw-font-sans, 'Meta Pro', 'Fira Sans', sans-serif);
	color: var(--sw-stellen-color);
}

/* Elementor/Theme setzen an Überschriften und Absätzen eigene Außenabstände.
   Erst alles auf null, dann vergeben die Regeln unten je Übergang die Stufe. */
.sw-stellen > *,
.sw-stellen p,
.sw-stellen h2,
.sw-stellen h3 {
	margin: 0;
}

/* ---------- Die Leiter ---------- */

/* Neuer Sinnabschnitt. Auch der Titel bekommt diese Luft nach unten, damit
   die Einleitung nicht zu ihm, sondern zur Stelle darunter zu gehören scheint. */
.sw-stellen__vorteile,
.sw-stellen__bewerbung,
.sw-stellen__titel + .sw-stellen__einleitung,
.sw-stellen__titel + .sw-stellen__stelle {
	margin-top: var(--sw-stellen-section);
}

/* Zwei Stellen sind gleichrangige Einträge einer Liste, kein neuer Abschnitt —
   deutlich getrennt, aber enger als der Sprung zum nächsten Abschnitt. */
.sw-stellen__stelle + .sw-stellen__stelle {
	margin-top: var(--sw-stellen-group);
}

/* „Für unsere Filialen … suchen wir als" ist der Satzanfang, den die
   Stellenbezeichnung vollendet — die beiden dürfen nicht auseinanderfallen. */
.sw-stellen__einleitung + .sw-stellen__stelle {
	margin-top: var(--sw-stellen-lead);
}

/* Ein margin-top am ersten Kind schöbe den ganzen Block nach unten; bei
   leerem Titel oder leerer Einleitung greift genau das. */
.sw-stellen > :first-child {
	margin-top: 0;
}

/*
 * Größe und Zeilenhöhe der Überschriften kommen bewusst NICHT aus diesem
 * Widget, sondern aus den Kit-Globals (`.elementor-kit-5 h2/h3`) — dieselbe
 * Quelle, aus der sich die vorherigen Heading-Widgets bedient haben. Damit
 * bleibt das Schriftbild der Sektion unverändert und pflegt sich weiter
 * zentral im Kit. Hier steht nur, was das Kit nicht abdeckt.
 */
.sw-stellen .sw-stellen__titel,
.sw-stellen .sw-stellen__bezeichnung {
	color: inherit;
}

/* ---------- Einzelne Stelle ---------- */

/* Bezeichnung und Rahmenbedingungen sind eine Einheit — enger Verbund. */
.sw-stellen__stelle {
	display: flex;
	flex-direction: column;
	gap: var(--sw-stellen-tight);
}

/* Kleiner, nicht fetter Zusatz hinter der Bezeichnung („m/w/d“). */
.sw-stellen__zusatz {
	font-size: 0.8em;
	font-weight: 400;
	white-space: nowrap;
}

/* ---------- Wir bieten ---------- */

/* „Wir bieten“ + Liste bilden einen zusammenhängenden Absatz — die Zeilen
   laufen ohne Zwischenraum durch, wie im PDF. */
.sw-stellen__vorteile > * {
	margin: 0;
}

.sw-stellen__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sw-stellen__vorteil {
	display: flex;
	gap: 0.4em;
}

/* Der Marker hängt in einer eigenen Spalte, damit mehrzeilige Punkte
   im Text eingerückt umbrechen statt unter das Pluszeichen zu rutschen. */
.sw-stellen__marker {
	flex: 0 0 auto;
	font-weight: 700;
}

/* ---------- Bewerbung ---------- */

/* Kontaktzeilen und Schlusssatz sind zwei Absätze desselben Abschnitts. */
.sw-stellen__bewerbung {
	display: flex;
	flex-direction: column;
	gap: var(--sw-stellen-block);
}

.sw-stellen .sw-stellen__link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sw-stellen .sw-stellen__link:hover,
.sw-stellen .sw-stellen__link:focus-visible {
	color: var(--sw-color-wine, #631C39);
}

.sw-stellen .sw-stellen__link:focus-visible {
	outline: 2px solid var(--sw-color-wine, #631C39);
	outline-offset: 3px;
	border-radius: 2px;
}