:root {
	--color-font: rgb(56 55 55); /* #383737 */
	--color-dark-blue: rgb(26 58 91);
	--color-light-blue: rgb(133 203 210);
	--color-accent-red: rgb(234 75 46);
	--color-ocean-blue: rgb(119 221 204);
	--color-ocean-green: rgb(119 221 159);
	--color-spring-green: rgb(186 213 72);
	--color-bright-yellow: rgb(255 221 0);
	--color-light-gray: rgb(246 246 246);
	--color-dark-gray: var(--color-font);
	--color-dark-gray-trans: rgba(56 55 55 / 85%);
	--color-white: rgb(255 255 255);
	--color-black: rgb(0 0 0);
	--color-border: var(--color-font);
	--color-border-medium: rgb(112 112 112);
	--color-border-light: rgba(56 55 55 / 25%);

	/* typograpy */

	/* grade L / regular */
	--font-size-base: 20px;
	--font-size-copytext-large: var(--font-size-base);
	--line-height-copytext-large: calc(1.4 * var(--font-size-base));
	--font-size-headline-large: calc(1.25 * var(--font-size-base));
	--line-height-headline-large: calc(1.5 * var(--font-size-base));

	/* grade XL */
	--font-size-copytext-super: calc(1.25 * var(--font-size-base));
	--line-height-copytext-super: calc(1.75 * var(--font-size-base));
	--font-size-super-subtitle: calc(1.6 * var(--font-size-base));
	--line-height-super-subtitle: calc(1.9 * var(--font-size-base));
	--font-size-super-title: calc(1.6 * var(--font-size-base));
	--line-height-super-title: calc(1.9 * var(--font-size-base));

	/* grade S */
	--font-size-copytext-small: calc(0.8 * var(--font-size-base));
	--line-height-copytext-small: calc(1.1 * var(--font-size-base));
	--font-size-headline-small: var(--font-size-base);
	--line-height-headline-small: calc(1.2 * var(--font-size-base));

	/* grade XS */
	--font-size-captions: calc(0.7 * var(--font-size-base));
	--line-height-captions: calc(0.9 * var(--font-size-base));

	/* grade XXS */
	--font-size-footnotes: calc(0.6 * var(--font-size-base));
	--line-height-footnotes: calc(0.8 * var(--font-size-base));

	/* blockqoute */
	--font-size-blockquote: calc(1.5 * var(--font-size-copytext-large));
	--line-height-blockquote: calc(1.5 * var(--line-height-copytext-large));

	/* vertical rhythm */
	--vr-base-unit: 16px;
	--vr-spacing-05: calc(0.5 * var(--vr-base-unit));
	--vr-spacing-1: var(--vr-base-unit);
	--vr-spacing-2: calc(2 * var(--vr-base-unit));
	--vr-spacing-3: calc(3 * var(--vr-base-unit));
	--vr-spacing-4: calc(4 * var(--vr-base-unit));
	--vr-spacing-5: calc(5 * var(--vr-base-unit));

	/* horizontal rhythm */
	--hr-base-unit: 16px;
	--hr-spacing-05: calc(0.5 * var(--hr-base-unit));
	--hr-spacing-1: var(--hr-base-unit);
	--hr-spacing-2: calc(2 * var(--hr-base-unit));
	--hr-spacing-3: calc(3 * var(--hr-base-unit));

	/* global dimensions */
	--page-width: 1600px;
	--content-width: 1300px;
	--content-width-slim: 856px;
	--header-height: 68px;
	--hero-height: 680px;
	--hero-banner-height: 210px;
	--logo-width: 170px;

	/* animations */
	--animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

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

html,
body {
	min-width: 100%;
	overflow-x: hidden;
	height: 100vh;
	scroll-behavior: smooth;
	margin: 0;
	font-family: CircularXXWeb, Arial, sans-serif;
	font-size: var(--font-size-copytext-large);
	line-height: var(--line-height-copytext-large);
	font-weight: 400;
	color: var(--color-font);
	background: var(--color-white);
}

/* page structure */
.page {
	display: block;
	position: relative;
	width: 100%;
	margin: 0 auto;
}

.container,
.frame {
	display: block;
	margin: 0 auto;
	max-width: var(--page-width);
	width: 100%;
	padding: 0 var(--hr-spacing-2);
}

.frame {
	border-top: var(--vr-spacing-3) solid var(--color-white);
	border-bottom: var(--vr-spacing-3) solid var(--color-white);
}

.frame-wide-light-gray {
	background: var(--color-light-gray);
	border-color: var(--color-light-gray);
}

.frame-no-vertical-margins:first-of-type {
	border-bottom: 0 !important;
}

.frame-no-vertical-margins:not(:first-of-type) {
	border: 0 !important;
}

.frame-no-vertical-margins + .frame {
	border-top: 0 !important;
}

.frame-no-vertical-margin-bottom {
	border-bottom: 0 !important;
}

.frame--inner {
	max-width: var(--content-width);
	margin: 0 auto;
	position: relative;
}

.frame .frame {
	padding: 0;
}

.frame-slim {
	max-width: var(--content-width-slim);
}

/* grids */
.grid {
	display: grid;
	gap: var(--vr-spacing-2) var(--hr-spacing-2);
	grid-template-columns: 100%;
}

.grid .frame {
	border: 0;
	padding: 0;
}

#sticky-navigation-anchor {
	position: absolute;
	top: 500px;
	left: 0;
	width: 1px;
	height: 1px;
}

/* block elements */
header {
	position: relative;
}

h1,
h2,
h3,
h4,
.headline,
.headline--medium,
.headline--small {
	font-weight: 700;
	margin: 0 0 var(--vr-spacing-1);
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

h1,
.headline {
	font-size: var(--font-size-super-title);
	line-height: var(--line-height-super-title);
}

h2,
.headline--medium {
	font-size: var(--font-size-super-title);
	line-height: var(--line-height-super-title);
}

h3,
.headline--small {
	font-size: var(--font-size-headline-large);
	line-height: var(--line-height-headline-large);
}

.supersubtitle {
	font-size: var(--font-size-super-subtitle);
	line-height: var(--line-height-super-subtitle);
}

p,
ol,
li {
	margin: 0 0 var(--vr-spacing-1);
}

p.bodytext--xl {
	font-size: var(--font-size-copytext-super);
	line-height: var(--line-height-copytext-super);
}

blockquote {
	margin: var(--vr-spacing-2) var(--vr-spacing-5);
	font-size: 30px;
	line-height: var(--line-height-blockquote);
}

ol {
	margin: 0 0 var(--vr-spacing-1) var(--hr-spacing-1);
}

ul ul,
ul ol,
ol ul,
ol ol {
	margin-top: var(--vr-spacing-1);
}

img,
svg {
	display: block;
	width: 100%;
	height: auto;
}

.image-caption {
	font-size: var(--font-size-captions);
	line-height: var(--line-height-captions);
	padding-top: var(--vr-spacing-1);
	max-width: calc(var(--page-width) / 2);
}

iframe {
	border: 0;
	display: block;
}

/* inline elements */
a {
	color: var(--color-font);
	text-decoration: underline;
	cursor: pointer;
}

.more-link {
	text-transform: uppercase;
	text-decoration: none;
}

a:hover,
a:hover span.more-link {
	color: var(--color-light-blue);
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

/* more link */
.more-link::before {
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	padding-right: var(--hr-spacing-05);
	font: var(--fa-font-light);
	content: '\f178';
}

/* back link */
.more-link--reverse::before {
	content: '\f177';
}

/* components */
.btn {
	font-weight: 500;
	border: 2px solid var(--color-border);
	border-radius: 999px;
	padding: calc(var(--vr-spacing-1) * 0.5) calc(var(--vr-spacing-1) * 1.5);
	display: inline-block;
	outline: none;
	text-decoration: none;
	margin: var(--hr-spacing-1) 0;
	cursor: pointer;
	color: inherit;
}

.btn:hover {
	background: var(--color-dark-gray);
	color: var(--color-white);
}

.idot {
	position: absolute;
	top: calc(-1 * var(--vr-spacing-1));
	left: calc(-1 * var(--hr-spacing-2));
	display: block;
	width: auto;
	height: 54px;
}

.list--arrows {
	padding-left: var(--hr-spacing-1);
}

.list--arrows > li {
	padding-left: var(--hr-spacing-1);
}

.list--arrows > li::marker {
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font: var(--fa-font-light);
	content: '\f178';
}

/* helpers */
.hidden {
	display: none !important;
}

.nowrap {
	white-space: nowrap;
}

.collapsed {
	max-height: 0 !important;
}

@media screen and (min-width: 700px) {
	.grid--4cols,
	.grid--3cols,
	.grid--2cols {
		grid-template-columns: repeat(2, calc(50% - var(--hr-spacing-2) / 2));
	}

	.grid--2cols-66-33 {
		grid-template-columns: calc(66% - var(--hr-spacing-2) / 2) calc(33% - var(--hr-spacing-2) / 2);
	}

	.grid--2cols-33-66 {
		grid-template-columns: calc(33% - var(--hr-spacing-2) / 2) calc(66% - var(--hr-spacing-2) / 2);
	}
}

@media screen and (min-width: 950px) {
	.idot {
		left: calc(-1 * var(--hr-spacing-3));
	}
}

@media screen and (min-width: 1000px) {
	.grid--4cols {
		grid-template-columns: repeat(4, calc(25% - var(--hr-spacing-2) / 2));
	}

	.grid--3cols {
		grid-template-columns: repeat(3, calc(33% - var(--hr-spacing-2) / 2));
	}
}

@media screen and (min-width: 1300px) {
	.container,
	.frame {
		padding: 0;
	}
}