/**
 * Frontend-Styles für Jobs (Liste + Detail).
 * Handle: birke-jobs. Wird nur geladen, wenn der CSS-Schalter an ist.
 * Alle Selektoren sind bewusst schlicht/klassenbasiert und nutzen wo möglich
 * Theme-Variablen (z. B. --muted) mit sinnvollem Fallback.
 */

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

.birke-jobs__group {
	font-family: var(--font-sans);
	list-style: none;
	margin: 0;
	padding: 0;
}

.birke-jobs__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.birke-jobs__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-top: 1px solid var(--color-ink, #1A1A1A);
	padding: 1.5rem 0;
	color: currentColor;
	text-decoration: none;
	line-height: 1.2;
}

.birke-jobs__item:first-child {
	border-top: none;
}

.birke-jobs__item:hover {
	color: currentColor;
	text-decoration: none;
}

.birke-jobs__item .arw {
    flex-shrink: 0;
    display: inline-block;
    width: 1.5rem;
    height: calc(1.5rem * 10 / 14);
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M9.1 0 14 5l-4.9 5-1.19-1.21 2.85-2.89H0V4.17h10.8L7.9 1.22 9.09.01Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M9.1 0 14 5l-4.9 5-1.19-1.21 2.85-2.89H0V4.17h10.8L7.9 1.22 9.09.01Z'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0;
    transform: translateX(-0.4em) translateY(-0.18em);
    transition: opacity var(--dur, 0.3s) var(--ease, 0.1s),
                transform var(--dur, 0.3s) var(--ease, 0.1s);
}

.birke-jobs__item:hover .arw {
    opacity: 1;
    transform: translateX(0) translateY(-0.18em);
}

.birke-jobs__link {
	flex: 1;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	text-decoration: none!important;
	color: inherit;
	font-size: var(--font-size-lead);
	font-weight: 600;
}

.birke-jobs__item-subtitle {
	font-style: normal;
	font-size: var(--font-size-p);
	font-weight: 400;
	color: var(--color-muted);
}

/* --------------------------------------------------------------- Detail --- */




.birke-job__header {
	text-align: center;
	margin-block: 1.5rem 2rem;
}

.birke-job__title {
	font-family: var(--font-serif);
	font-weight: var(--font-weight-normal, 400);
	margin: 0 0 0.5rem;
	text-wrap: balance;
	hyphens: none;
}

.birke-job__subtitle {
	font-weight: 600;
	margin: 0;
}

.birke-job__intro {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 4vw, 2rem);
}

.birke-job__intro-media img {
	display: block;
	width: 100%;
	height: auto;
}

.birke-job__sections-title {
	font-weight: 700;
	margin-block: 2.5rem 1.5rem;
}

.birke-job__section {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem 2rem;
	padding-block: 1.25rem;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.birke-job__section-heading {
	margin: 0;
	font-family: var(--font-serif, Georgia, "Times New Roman", serif);
	font-weight: 400;
}

.birke-job__section-list {
	margin: 0;
	padding-left: 1.1rem;
}

.birke-job__section-list li {
	margin-bottom: 0.35rem;
}

.birke-job__motto {
	margin-block: 2.5rem 1.5rem;
	font-size: 1.6rem;
	line-height: 1.2;
}

.birke-job__apply {
	margin-block: 2.5rem;
}

.birke-job__apply--split {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.birke-job__contact-heading {
	font-family: var(--font-sans);
	font-size: var(--font-size-h2);
	line-height: 1.1;
	font-weight: var(--font-weight-bold);
	margin: 0 0 1rem;
}

.birke-job__contact-hint {
	margin-bottom: 1rem;
}

.birke-job__contact-address {
	font-style: normal;
}

.birke-job__mailclass {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 0.08em;
	transition: text-decoration-thickness 0.15s;
}

.birke-job__mailclass:hover {
	text-decoration-thickness: 0.12em;
}

/* ------------------------------------------------------- ab 48rem breit --- */
@media (min-width: 48rem) {
	.birke-job__intro {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}

	.birke-job__section {
		grid-template-columns: 1fr 2fr;
	}

	.birke-job__apply--split {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}