/**
 * Styles für die Abschnitts-Tabs der Stellenanzeige (Sprungnavigation).
 */

.ifjob-section-nav {
	position: sticky;
	top: 0;
	z-index: 40;
	background: #fff;
	border-bottom: 1px solid #ececec;
}

.ifjob-section-nav ul {
	display: flex;
	gap: clamp(1rem, 4vw, 2.5rem);
	list-style: none;
	margin: 0 auto;
	padding: 0 1rem;
	max-width: var(--wp--style--global--wide-size, 1200px);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.ifjob-section-nav ul::-webkit-scrollbar {
	display: none;
}

.ifjob-section-nav li {
	flex-shrink: 0;
}

.ifjob-section-nav a {
	display: block;
	padding: 0.9rem 0 0.75rem;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small, 0.95rem);
	text-decoration: none;
	color: inherit;
	border-bottom: 4px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

.ifjob-section-nav a:hover {
	border-bottom-color: color-mix(in srgb, var(--wp--preset--color--cta, #9cc416) 45%, transparent);
}

.ifjob-section-nav a.is-active {
	border-bottom-color: var(--wp--preset--color--cta, #9cc416);
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
}

/* --- Tab-Modus: Panels --- */

.ifjob-tab-panel[hidden] {
	display: none !important;
}

.ifjob-tab-panel.is-active {
	animation: ifjob-panel-in 0.3s ease both;
}

@keyframes ifjob-panel-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ifjob-tab-panel.is-active {
		animation: none;
	}
}

/* Ankerziele: Abstand zur sticky Navigation beim Anspringen */
#ueber-die-stelle,
#aufgaben,
#ihr-profil,
#vorteile,
#standort,
#bewerben {
	scroll-margin-top: 90px;
}