/*
 * Reset, Schrifteinbindung, Grundtypografie, Grundelemente.
 * Keine fest verdrahteten Werte — alles über Tokens aus tokens.css.
 */

@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/ibm-plex-sans-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--av-font-sans);
	font-size: var(--av-text-body-size);
	line-height: var(--av-text-body-line);
	font-weight: var(--av-text-body-weight);
	color: var(--av-color-text);
	background: var(--av-color-bg);
	-webkit-font-smoothing: antialiased;
}

img,
picture,
svg {
	max-width: 100%;
	display: block;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
	margin: 0 0 var(--av-space-lg);
}

h1,
h2,
h3,
h4 {
	color: var(--av-color-base);
	font-weight: 700;
}

h1 {
	font-size: var(--av-text-h1-size);
	line-height: var(--av-text-h1-line);
	font-weight: var(--av-text-h1-weight);
	letter-spacing: var(--av-text-h1-tracking);
}

h2 {
	font-size: var(--av-text-h2-size);
	line-height: var(--av-text-h2-line);
	font-weight: var(--av-text-h2-weight);
	letter-spacing: var(--av-text-h2-tracking);
}

h3 {
	font-size: var(--av-text-h3-size);
	line-height: var(--av-text-h3-line);
	font-weight: var(--av-text-h3-weight);
}

h4 {
	font-size: var(--av-text-h4-size);
	line-height: var(--av-text-h4-line);
	font-weight: var(--av-text-h4-weight);
}

p {
	color: var(--av-color-text-secondary);
	max-width: var(--av-text-body-measure);
}

small,
.av-small {
	font-size: var(--av-text-small-size);
	line-height: var(--av-text-small-line);
}

a {
	color: var(--av-color-action);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--av-color-action);
	outline-offset: 2px;
	border-radius: var(--av-radius-sm);
}

button {
	font-family: inherit;
}

/* Zahlenfelder — tabellarische Ziffern */
.av-num {
	font-variant-numeric: tabular-nums;
}

/* Sprungmarke „Zum Inhalt springen" */
.av-skip-link {
	position: absolute;
	top: -100px;
	left: var(--av-space-lg);
	z-index: 1000;
	background: var(--av-color-action);
	color: var(--av-color-text-on-action);
	padding: var(--av-space-md) var(--av-space-lg);
	border-radius: var(--av-radius-sm);
	font-weight: 600;
	font-size: var(--av-text-small-size);
	transition: top 0.15s ease;
}

.av-skip-link:focus {
	top: var(--av-space-lg);
}

/* Screenreader-only */
.av-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.av-container {
	max-width: var(--av-container);
	margin: 0 auto;
	padding: 0 var(--av-space-xl);
}

@media (max-width: 480px) {
	.av-container {
		padding: 0 var(--av-space-lg);
	}
}