@font-face {
	font-family: 'Jost';
	src: url('../fonts/jost_vf.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Noto Emoji';
	src: url('../fonts/NotoEmoji.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	/* padding 0.65×2 + link-padding 0.45×2 + Zeile + border */
	--ds-nav-height: calc(2.2rem + 1em * var(--line-height, 1.64) + 2px);
}

.ds-nav {
	position: sticky;
	top: 0;
	z-index: 10000;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
	justify-content: center;
	padding: 0.65rem 1rem;
	background: var(--color-neutral-1000, #fff);
	border-bottom: 2px solid var(--color-neutral-200, #353535);
	box-shadow: 0 2px 10px oklch(0% 0 0 / 0.08);
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 1rem;
}

.ds-nav a {
	color: var(--color-neutral-200, #353535);
	text-decoration: none;
	padding: 0.45rem 1rem;
	border-radius: 6px;
	border: 1px solid transparent;
	font-weight: 500;
}

.ds-nav a:hover {
	color: var(--color-dermis-400);
	border-color: var(--color-dermis-600);
	background: oklch(75% 0.14 180 / 0.1);
}

.ds-nav a[aria-current="page"] {
	color: var(--color-neutral-1000, #fff);
	font-weight: 600;
	background: var(--color-dermis-600);
	border-color: var(--color-dermis-600);
}