/* Webux Stellen (field block) - frontend.
   Pixel-ported from the original .lv-ueber-uns-jobs design. */
.webux-joblist {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.webux-joblist__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background: #fff;
	border: 1px solid #ece7de;
	border-radius: 16px;
	padding: 24px 28px 24px 32px;
}

.webux-joblist__title {
	font-size: 19px;
	font-weight: 600;
	color: #1a1a1a;
	margin: 0 0 6px;
}

.webux-joblist__meta {
	font-size: 14px;
	color: #6b6661;
	margin: 0;
}

.webux-joblist__badge {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 14px;
	border-radius: 999px;
	background: #f4efe3;
	color: #1a1a1a;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.26px;
	flex: 0 0 auto;
}

/* ===== Bewerbungs-Button (opt-in) =========================================
   Steht im selben Slot wie das Badge und ersetzt es, sobald Beschriftung und
   Link gesetzt sind. Ohne beides bleibt das Badge - kein Byte am bisherigen
   Markup ändert sich.

   FARBEN: gefüllt in primary-dark, Label weiss - nicht in primary: dort trägt
   Weiss auf dieser Site nur 3.00:1. Gemessen (Weiss auf primary-dark):
   Liventra #6D7A61 = 4.56:1 OK, Theme-Default #6f665e = 5.62:1 OK,
   Stöckli #009C3F = 3.60:1 NICHT OK (Palettenstufe müsste auf ca. #008737
   nachgedunkelt werden). Hover = 12 % Schwarz beigemischt, also dunkler:
   5.60:1 auf Liventra. */
.webux-joblist__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 22px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary-dark, #6f665e);
	color: var(--wp--preset--color--base, #ffffff);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.26px;
	text-decoration: none;
	flex: 0 0 auto;
	transition: background-color 0.15s ease;
}

.webux-joblist__btn:hover,
.webux-joblist__btn:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--primary-dark, #6f665e) 88%, #000);
	color: var(--wp--preset--color--base, #ffffff);
	text-decoration: none;
}

.webux-joblist__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast, #1a1a1a);
	outline-offset: 2px;
}

@media (max-width: 781px) {
	.webux-joblist__row { flex-wrap: wrap; }
}

/* ===== Variante MIT Beschreibung (opt-in) ================================
   Zeilen ohne Abschnitte bleiben ein <div class="webux-joblist__row">.
   Zeilen mit Abschnitten werden zu einer Karte, die dieselbe Klasse traegt -
   und zusaetzlich `webux-joblist__card`. Zwei Gruende:

   1. Chrome-Paritaet: Hintergrund, Rand und Radius kommen aus DERSELBEN Regel
      wie bei der einfachen Zeile. Die beiden Varianten koennen nicht
      auseinanderlaufen; hier steht nur, was anders ist.
   2. Effekt-Engine: inc/webux-effects.php:234 sucht die Kinder ueber den
      Klassen-Token `webux-joblist__row`. Die Klasse MUSS auf dem Element
      sitzen, das den Rahmen zeichnet - sonst blendet der Inhalt ein, waehrend
      der Rahmen schon dasteht.

   Die Karte ist ein Akkordeon: ihre Kopfzeile IST das <summary>, der Chevron
   sitzt rechts aussen. Der Bewerben-Link steht mit darin - siehe render.php,
   warum sein Klick das Panel nicht mitschaltet. */
.webux-joblist .webux-joblist__card {
	display: block;
	padding: 0;
	/* Die Basisregel ist ein Flex-Container; `gap` waere auf einem Block-Element
	   zwar wirkungslos, bliebe aber als gestellte Falle stehen - wer der Karte
	   spaeter ein `display:grid` gibt, bekaeme 24px Spalt, die niemand
	   geschrieben hat. */
	gap: 0;
}

/* Die Kopfzeile IST das <summary> - ein Klick irgendwo in der Zeile klappt die
   Stelle auf, der Chevron sitzt rechts aussen (Akkordeon). Warum der
   Bewerben-Link darin stehen darf, steht in render.php.

   GRID statt Flex, und zwar aus einem Markup-Grund: Inhalt eines <summary> ist
   Phrasing- plus Heading-Content, ein <div> um Titel und Meta waere ungueltig.
   Beide stehen deshalb direkt in der Zeile und werden hier in Spalte 1
   uebereinandergelegt. Padding und Spalt bleiben die der einfachen Zeile,
   damit beide Varianten masslich deckungsgleich sind.

   Die zweite Zeilenspur bleibt auch ohne Meta stehen (dann 0px hoch) - genauso
   wie das leere <p class="__meta"> der einfachen Zeile. Button und Chevron
   ueberspannen beide Spuren und sitzen damit mittig zur ganzen Kopfzeile. */
.webux-joblist .webux-joblist__head {
	display: grid;
	grid-template-columns: 1fr auto auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 24px;
	padding: 24px 28px 24px 32px;
	cursor: pointer;
	list-style: none;            /* Firefox-Twisty */
	-webkit-tap-highlight-color: transparent;
}

/* Safari braucht den Marker separat abgeraeumt. */
.webux-joblist .webux-joblist__head::-webkit-details-marker {
	display: none;
}

/* `min-width: 0` aus demselben Grund wie beim __info der einfachen Zeile: eine
   1fr-Spur ist sonst mindestens so breit wie der laengste unteilbare Titel und
   schoebe den Bewerben-Button aus dem Rahmen. */
.webux-joblist .webux-joblist__head > .webux-joblist__title { grid-area: 1 / 1; min-width: 0; }
.webux-joblist .webux-joblist__head > .webux-joblist__meta  { grid-area: 2 / 1; min-width: 0; }
.webux-joblist .webux-joblist__head > .webux-joblist__btn,
.webux-joblist .webux-joblist__head > .webux-joblist__badge { grid-area: 1 / 2 / span 2; }
.webux-joblist .webux-joblist__head > .webux-joblist__chev  { grid-area: 1 / 3 / span 2; }

/* Gilt bewusst fuer BEIDE Varianten (0,1,0, ohne __head-Prefix): ohne
   `min-width: 0` schrumpft ein Flex-Item nicht unter seinen Inhalt - ein langer
   Stellentitel drueckte in der einfachen Zeile den Bewerben-Button aus dem
   Rahmen. */
.webux-joblist__info {
	min-width: 0;
}

/* Der Titel der aufklappbaren Karte ist eine echte Ueberschrift, damit die
   Abschnitts-Ueberschriften darunter nicht ohne Bezug im Outline haengen.
   Optisch identisch zum <p> der einfachen Zeile; die Werte muessen wiederholt
   werden, weil theme.json Ueberschriften ueber `:root :where(h3)` faerbt. */
.webux-joblist h3.webux-joblist__title {
	font-size: 19px;
	font-weight: 600;
	line-height: inherit;
	letter-spacing: normal;
	color: #1a1a1a;
	margin: 0 0 6px;
}

/* Der Titel behaelt seine 6px Abstand nach unten AUCH ohne Meta-Zeile. Sonst
   waere die Karte genau dann 6px flacher als die einfache Zeile daneben, wenn
   `meta` leer ist - und leer ist es bei den Live-Daten. Die einfache Zeile gibt
   das leere <p class="__meta"> naemlich immer aus: es ist 0px hoch, die 6px
   ueber ihm bleiben aber stehen. Beide Varianten stehen so auf derselben Hoehe.

   Lange Titel: 268px Spalte auf einem 360px-Geraet. Ohne Umbruchhilfe ragt ein
   deutsches Kompositum ("Liegenschaftenbuchhaltung") aus der Karte und erzeugt
   horizontalen Seiten-Scroll, weil weder Karte noch Liste ein overflow setzen. */
.webux-joblist .webux-joblist__title {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* --- Chevron ------------------------------------------------------------- */
/* Zwei Rahmenkanten statt einer Grafik - gleiches Muster wie
   filter-more/style.css. Eigene Farbe statt geerbtem currentColor: er steht
   jetzt in einer Zeile mit dem Titel (#1a1a1a) und soll trotzdem
   zurueckhaltend bleiben. Im Markup aria-hidden - was sich hier oeffnet, sagt
   der unsichtbare Text davor. */
.webux-joblist__chev {
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	color: #6b6661;              /* 5.68:1 auf Weiss */
}

.webux-joblist__more[open] > .webux-joblist__head > .webux-joblist__chev {
	transform: translateY(2px) rotate(-135deg);
}

/* Der Fokusring umfasst die ganze Kopfzeile - sie ist ja auch die ganze
   Schaltflaeche. Zugeklappt folgt er den Rundungen der Karte, aufgeklappt nur
   noch oben. */
.webux-joblist .webux-joblist__head:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: -3px;
	border-radius: 16px;
}

.webux-joblist__more[open] > .webux-joblist__head:focus-visible {
	border-radius: 16px 16px 0 0;
}

@media (hover: hover) {
	.webux-joblist .webux-joblist__head:hover > .webux-joblist__chev {
		color: #1a1a1a;
	}
}

/* --- Aufgeklappter Koerper ----------------------------------------------- */
/* Der Koerper traegt die Sprungmarke: nur wenn das Ziel INNERHALB des <details>
   liegt und nicht das <summary> ist, klappt der Fragmentsprung die Stelle auf
   (in Chrome gemessen, siehe Kommentar in render.php). Gescrollt wird damit auf
   den Beschreibungstext - der Abstand nach oben holt Aufklapp-Zeile, Kopfzeile
   der Karte und die Website-Kopfzeile mit ins Bild (gemessen: Kartenoberkante
   bei y=51px in einem 1280x900-Fenster). */
.webux-joblist__body {
	/* Die Trennlinie sass frueher auf der eigenen Aufklapp-Zeile. Jetzt gehoert
	   sie an den Kopf des Koerpers: dort kommt und geht sie mit dem Panel,
	   statt die Kopfzeile beim Aufklappen um 1px wachsen zu lassen. */
	border-top: 1px solid #ece7de;
	padding: 20px 28px 26px 32px;
	scroll-margin-top: 13rem;
}

/* Abschnitts-Ueberschrift. render.php macht daraus ein echtes <h4>, sobald die
   Redaktion eine Zeile komplett fett auszeichnet - kein eigenes Feld noetig.
   0,2,0 gegen theme.json, das Ueberschriften ueber `:root :where(h4)` mit
   eigener Groesse und 700 faerbt. */
.webux-joblist .webux-joblist__sec-title {
	margin: 22px 0 8px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: normal;
	color: #1a1a1a;              /* 17.40:1 */
}

.webux-joblist .webux-joblist__sec-text > .webux-joblist__sec-title:first-child {
	margin-top: 0;
}

.webux-joblist .webux-joblist__sec-text {
	max-width: 72ch;
	font-size: 16px;
	line-height: 1.65;
	color: #403d3a;              /* 10.79:1 - `muted` (#8a847d) waere mit 3.70:1 zu hell */
	overflow-wrap: break-word;
}

.webux-joblist .webux-joblist__sec-text > :first-child { margin-top: 0; }
.webux-joblist .webux-joblist__sec-text > :last-child  { margin-bottom: 0; }
.webux-joblist .webux-joblist__sec-text p { margin: 0 0 12px; }

.webux-joblist .webux-joblist__sec-text strong,
.webux-joblist .webux-joblist__sec-text b {
	font-weight: 600;
	color: #1a1a1a;
}

.webux-joblist .webux-joblist__sec-text em,
.webux-joblist .webux-joblist__sec-text i {
	font-style: italic;
}

/* Links MUESSEN hier gesetzt werden: theme.json faerbt jeden <a> auf `primary`
   - auf Liventra #8A9A7B = 3.00:1 und damit unter AA. primary-dark traegt:
   Liventra #6D7A61 = 4.56:1, Theme-Default #6f665e = 5.62:1.
   (Stoeckli #009C3F = 3.60:1 NICHT AA - dieselbe offene Baustelle wie beim
   Bewerben-Button weiter oben in dieser Datei.) */
.webux-joblist .webux-joblist__sec-text a {
	color: var(--wp--preset--color--primary-dark, #6f665e);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

.webux-joblist .webux-joblist__sec-text a:hover {
	color: #1a1a1a;
	text-decoration-thickness: 2px;
}

.webux-joblist .webux-joblist__sec-text a:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Die Werkzeugleiste des Textfeldes bietet keine Listen an (die Feld-Engine
   reicht `be.RichText` ohne `multiline` durch). Eine Aufzaehlung kann aber aus
   einer anderen Website oder aus Word eingefuegt werden und ueberlebt
   wp_kses_post() - dann soll sie auch aussehen wie eine. */
.webux-joblist .webux-joblist__sec-text ul,
.webux-joblist .webux-joblist__sec-text ol {
	margin: 0 0 12px;
	padding-left: 1.35em;
}

.webux-joblist .webux-joblist__sec-text ul { list-style: disc; }
.webux-joblist .webux-joblist__sec-text ol { list-style: decimal; }
.webux-joblist .webux-joblist__sec-text li { margin: 0 0 6px; }
.webux-joblist .webux-joblist__sec-text li:last-child { margin-bottom: 0; }
.webux-joblist .webux-joblist__sec-text li::marker { color: #6b6661; }

/* --- Bewegung (opt-in, Konvention aus webux-effects.css) ----------------- */
@media (prefers-reduced-motion: no-preference) {
	.webux-joblist__chev { transition: transform 0.2s ease, color 0.15s ease; }

	/* Hoehenanimation nur dort, wo sie sauber geht (Chrome/Edge 131+). Ohne
	   `interpolate-size` faellt der ganze Block weg und es bleibt beim harten
	   Umschalten - kein Zwischenzustand, kein Sprung. `content-visibility`
	   muss mit `allow-discrete` mitlaufen, sonst verschwindet der Inhalt beim
	   Zuklappen sofort. */
	@supports (interpolate-size: allow-keywords) {
		.webux-joblist__more { interpolate-size: allow-keywords; }

		.webux-joblist__more::details-content {
			block-size: 0;
			overflow: clip;
			transition: block-size 220ms ease, content-visibility 220ms allow-discrete;
		}

		.webux-joblist__more[open]::details-content { block-size: auto; }

		/* Beim Sprung auf eine geteilte Stellen-Adresse oeffnet der Browser das
		   <details> und scrollt dann zum Ziel - aber nur, wenn dessen Hoehe
		   nicht gerade animiert wird. Mit laufender block-size-Transition
		   unterbleibt das Scrollen ganz und wird nie nachgeholt: die Stelle
		   klappt auf, die Seite bleibt oben stehen. Gemessen scrollY 0 statt
		   1531. Beim Klick animiert es unveraendert weiter - :target gilt nur
		   fuer die angesprungene Stelle. */
		.webux-joblist__more:has( > .webux-joblist__body:target )::details-content {
			transition: none;
		}
	}
}

/* --- Mobil --------------------------------------------------------------- */
/* Was die einfache Zeile per `flex-wrap` tut, muss das Grid der Kopfzeile
   ausdruecklich nachbauen: der Bewerben-Button rueckt unter den Titel, der
   Chevron bleibt oben rechts. Ohne diese Regel behaelt der Button seine Spalte
   und quetscht den Titel - auf einem 390px-Geraet gemessen 104px Titelbreite
   und vier Zeilen statt 280px und zwei. */
@media (max-width: 781px) {
	.webux-joblist .webux-joblist__head {
		grid-template-columns: 1fr auto;
	}

	/* Nur ueber Titel und Meta mittig, nicht ueber die ganze Karte. */
	.webux-joblist .webux-joblist__head > .webux-joblist__chev {
		grid-area: 1 / 2 / span 2;
	}

	/* Dritte Spur, linksbuendig. `margin-top` statt `row-gap`: der Spalt soll
	   nur hier entstehen und nicht auch zwischen Titel und Meta. 24px sind der
	   Zeilenabstand, den die gewrappte Flex-Zeile daneben erzeugt. */
	.webux-joblist .webux-joblist__head > .webux-joblist__btn,
	.webux-joblist .webux-joblist__head > .webux-joblist__badge {
		grid-area: 3 / 1;
		justify-self: start;
		margin-top: 24px;
	}
}

/* Bewusst KEINE eigenen Masse fuer die Kopfzeile auf Mobil. Ein engeres
   Padding oder ein erzwungener Umbruch nur hier haette die Karte anders brechen
   lassen als die einfache Zeile daneben - gemessen 18px Hoehenunterschied bei
   identischem Titel auf 500px. Die Kopfzeile teilt sich die Basiswerte mit der
   einfachen Zeile, damit bleiben beide Varianten deckungsgleich. Wer das Mobil-
   Layout aendern will, aendert es fuer BEIDE. */
@media (max-width: 600px) {
	.webux-joblist .webux-joblist__sec-text {
		font-size: 15px;
		hyphens: auto; /* deutsche Komposita in schmaler Spalte */
	}
}

/* --- Druck --------------------------------------------------------------- */
/* `.webux-joblist `-Prefix ueberall: die Mobil-Regeln oben wiegen 0,2,0 und
   gelten auch im Druck, sobald der Seitenkasten schmal ist (Druck vom Telefon,
   kleines Papierformat). Eine 0,1,0-Druckregel verloere dagegen. */
@media print {
	.webux-joblist .webux-joblist__chev { display: none; }
	.webux-joblist .webux-joblist__row { break-inside: avoid; }

	/* Die Trennlinie steht jetzt fest am Koerper, im Druck wird nur der Abstand
	   knapper. */
	.webux-joblist .webux-joblist__body {
		padding-top: 16px;
	}

	/* Zugeklappte Stellen fuer den Druck aufklappen. ALLE DREI Eigenschaften
	   muessen zurueck: der @supports-Block oben steht in einer Media-Query ohne
	   Medientyp, gilt also auch fuer `print`, und laesst dort `block-size: 0`
	   und `overflow: clip` stehen. Nur `content-visibility` aufzuheben, hiesse:
	   in genau den Browsern, die diese Regel ueberhaupt kennen (Chrome/Edge
	   131+), druckt eine zugeklappte Stelle leer - waehrend Safari und Firefox,
	   die den @supports-Block gar nicht erst anwenden, korrekt drucken. Ein
	   Fehler, der beim Testen auf dem Mac unsichtbar bliebe. */
	.webux-joblist .webux-joblist__more::details-content {
		content-visibility: visible;
		block-size: auto;
		overflow: visible;
	}
}