body {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--c-text);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	line-height: var(--lh-tight);
	font-weight: 600;
	/* German compounds are long: Verschiebedatum, Arbeitszeiterfassung. Let them
	   break rather than overflow a 320px screen. */
	overflow-wrap: break-word;
	hyphens: auto;
}

h1 {
	font-size: var(--fs-2xl);
}
h2 {
	font-size: var(--fs-xl);
}
h3 {
	font-size: var(--fs-lg);
}

p + p {
	margin-top: var(--s-3);
}

a {
	color: var(--c-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--c-primary-hover);
}

small,
.text-sm {
	font-size: var(--fs-sm);
}

.text-muted {
	color: var(--c-text-muted);
}

.text-numeric {
	font-variant-numeric: tabular-nums;
}

/* Visible only to screen readers, but still focusable — used by the skip link. */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* A focus ring that is obvious in bright sunlight. */
:focus-visible {
	outline: 3px solid var(--c-focus);
	outline-offset: 2px;
}