@font-face {
	font-family:Stratos;
	font-style:normal;
	font-weight:400;
	font-display:swap;
	src:local("Stratos"),
	url(/assets/fonts/stratosweb-regular.eot) format("eot"),
	url(/assets/fonts/stratosweb-regular.woff) format("woff")
}

@font-face {
    font-family:Stratos;
    font-style:normal;
    font-weight:500;
    font-display:swap;
    src:local("Stratos"),
    url(/assets/fonts/stratosweb-medium.eot) format("eot"),
    url(/assets/fonts/stratosweb-medium.woff) format("woff")
}

@font-face {
    font-family:Stratos;
    font-style:normal;
    font-weight:700;
    font-display:swap;
    src:local("Stratos"),
    url(/assets/fonts/stratosweb-bold.eot) format("eot"),
    url(/assets/fonts/stratosweb-bold.woff) format("woff")
}

@font-face {
    font-family:Manrope;
    font-style:normal;
    font-weight:300;
    font-display:swap;
    src:local("Manrope Light"),
    url(/assets/fonts/manrope-v14-latin-300.woff2) format("woff2")
}

@font-face {
    font-family:Manrope;
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:local("Manrope Regular"),
    url(/assets/fonts/manrope-v14-latin-regular.woff2) format("woff2")
}

@font-face {
    font-family:Manrope;
    font-style:normal;
    font-weight:500;
    font-display:swap;
    src:local("Manrope Medium"),
    url(/assets/fonts/manrope-v14-latin-500.woff2) format("woff2")
}

@font-face {
    font-family:Manrope;
    font-style:normal;
    font-weight:700;
    font-display:swap;
    src:local("Manrope Bold"),
    url(/fonts/manrope-v14-latin-700.woff2) format("woff2")
}

:root {
	color-scheme: light dark; /* both supported */

/*
Primär: #ffffb3
Sekundär: #95b3d7
Hintergrund: #291413
*/

	--space-xs: 0.25rem;
	--space-s: 0.5rem;
	--space-m: 1rem;
	--space-l: 1.5rem;
	--space-xl: 2.5rem;
	--space: var(--space-m);
	
	--size: var(--size-m);
	--size-xs: 1.625rem;
	--size-s: 1.875rem;
	--size-m: 2.25rem;
	--size-l: 2.75rem;
	--size-xl: 3.5rem;
	--icon-size-s: 1.25em;
	--icon-size-m: 1.5em;
	--icon-size-l: 2.25em;
	--icon-size: var(--icon-size-m);
	
	--font-size-xxs: 0.75rem;
	--font-size-xs: 0.8125rem;
	--font-size-s: 0.875rem;
	--font-size: var(--font-size-m);
	--font-size-m: 1rem;
	--font-size-l: 1.125rem;
	--font-size-xl: 1.375rem;
	--font-size-xxl: 1.75rem;
	--font-size-xxxl: 2.5rem;
	--line-height-xs: 1.25;
	--line-height-s: 1.375;
	--line-height-m: 1.625;

	--border-radius: var(--border-radius-m);
	--border-radius-s: 0.25em;
	--border-radius-m: 0.25em;
	--border-radius-l: 0.5em;
	--border-radius-xl: 0.75em;
	--border-radius-xxl: 1em;

	/* hsl(65, 55%, 25%) */
	--tint: hsl(65, 55%, 92%);
	--tint-5pct: rgba(244, 246, 223, 0.05);
	--tint-10pct: rgba(244, 246, 223, 0.1);
	--tint-20pct: rgba(244, 246, 223, 0.2);
	--tint-30pct: rgba(244, 246, 223, 0.3);
	--tint-40pct: rgba(244, 246, 223, 0.4);
	--tint-50pct: rgba(244, 246, 223, 0.5);
	--tint-60pct: rgba(244, 246, 223, 0.6);
	--tint-70pct: rgba(244, 246, 223, 0.7);
	--tint-80pct: rgba(244, 246, 223, 0.8);
	--tint-90pct: rgba(244, 246, 223, 0.9);

	--shade: #291413;
	--shade-5pct: rgba(41, 20, 19, 0.05);
	--shade-10pct: rgba(41, 20, 19, 0.1);
	--shade-20pct: rgba(41, 20, 19, 0.2);
	--shade-30pct: rgba(41, 20, 19, 0.3);
	--shade-40pct: rgba(41, 20, 19, 0.4);
	--shade-50pct: rgba(41, 20, 19, 0.5);
	--shade-60pct: rgba(41, 20, 19, 0.6);
	--shade-70pct: rgba(41, 20, 19, 0.7);
	--shade-80pct: rgba(41, 20, 19, 0.8);
	--shade-90pct: rgba(41, 20, 19, 0.9);
	
	--contrast: var(--shade);
	--contrast-5pct: var(--shade-5pct);
	--contrast-10pct: var(--shade-10pct);
	--contrast-20pct: var(--shade-20pct);
	--contrast-30pct: var(--shade-30pct);
	--contrast-40pct: var(--shade-40pct);
	--contrast-50pct: var(--shade-50pct);
	--contrast-60pct: var(--shade-60pct);
	--contrast-70pct: var(--shade-70pct);
	--contrast-80pct: var(--shade-80pct);
	--contrast-90pct: var(--shade-90pct);
	
	--body-text-color: var(--contrast-90pct);
	--header-text-color: var(--contrast-90pct);
	--secondary-text-color: var(--contrast-70pct);
	--tertiary-text-color: var(--contrast-50pct);
	--disabled-text-color: var(--contrast-30pct);
	
	--base-color: rgb(255, 255, 255);
	
	--bottom-background-color: rgba(255, 255, 255, 0.33);
}

@media (prefers-color-scheme: dark) {
	:root {
		--contrast: var(--tint);
		--contrast-5pct: var(--tint-5pct);
		--contrast-10pct: var(--tint-10pct);
		--contrast-20pct: var(--tint-20pct);
		--contrast-30pct: var(--tint-30pct);
		--contrast-40pct: var(--tint-40pct);
		--contrast-50pct: var(--tint-50pct);
		--contrast-60pct: var(--tint-60pct);
		--contrast-70pct: var(--tint-70pct);
		--contrast-80pct: var(--tint-80pct);
		--contrast-90pct: var(--tint-90pct);
		
		--base-color: #291413;
		--body-text-color: var(--contrast-90pct);
		--secondary-text-color: var(--contrast-70pct);
		--tertiary-text-color: var(--contrast-50pct);
		--disabled-text-color: var(--contrast-30pct);

		--bottom-background-color: rgb(41, 20, 19, 0.5);
	}
}

body {
	font-family: "Gill Sans MT", Manrope, Helvetica, Arial, sans-serif;
	background-color: var(--base-color);
	line-height: var(--line-height-m);
	font-size: var(--font-size-m);
	color: var(--body-text-color);
	position: relative;
	overflow: hidden;
	height: 100vh;
	width: 100%;
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4, h5, h6, .button, a, a > span, a > label, link, [theme~="badge"], [theme~="title"] {
	font-family: "Century Gothic", Stratos, Helvetica, Arial, sans-serif;
	color: var(--header-text-color);
}

:where(h1) {
	font-size: var(--font-size-xxxl);
}

:where(h2) {
	font-size: var(--font-size-xxl);
}

:where(h3) {
	font-size: var(--font-size-xl);
}

:where(h4) {
	font-size: var(--font-size-l);
}

:where(h5) {
	font-size: var(--font-size-m);
}

:where(h6) {
	color: var(--header-text-color);
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

:where(h1, h2, h3, h4, h5, h6) {
	line-height: var(--line-height-xs);
	font-weight: 600;
	margin-block: 0;
}

p, h1, h2, h3, h4, h5, h6 {
	padding: 0;
	margin: 0;
}

#bottom {
	background-color: var(--bottom-background-color);
	color: var(--body-text-color);
	backdrop-filter: blur(5px);
	padding: var(--space-xs);
	position: fixed;
	height: 2.4rem;
	bottom: 0;
	left: 0;
}

#bottom-container {
	max-width: 68rem;
	flex-wrap: wrap;
}

#copyright {
	font-size: var(--font-size-xs);
}

#bottom-buttons > a {
	transition: background-color 0.15s ease-in-out, text-decoration 0.15s ease-in-out;
	padding: var(--space-xs) var(--space-s);
	font-size: var(--font-size-xxs);
	background-color: transparent;
	color: var(--body-text-color);
	text-decoration: none;
}

#bottom-buttons > a > span {
	color: var(--body-text-color);
}

#bottom-buttons > a:hover {
	background-color: var(--tint-10pct);
	text-decoration: underline;
}

#outlet {
	box-sizing: border-box;
	height: 100vh;
	width: 100%;
	margin: 0;
}

.container {
	max-width: 68rem;
}

.vertical-container,
.horizontal-container {
	align-items: flex-start;
	box-sizing: border-box;
	display: flex;
}

.vertical-container {
	flex-direction: column;
}

.horizontal-container {
	flex-direction: row;
}

.button {
	transition: background-color 0.15s ease-in-out;
	background-color: var(--contrast-5pct);
	border-radius: var(--border-radius-m);
	display: block;
}

.button > a {
	padding: 0 calc(var(--size-m) / 3 + var(--border-radius-m) / 2);
	text-decoration: none;
	cursor: default;
	display: flex;
}

.button > a > span {
	line-height: var(--line-height-xs);
	padding: calc(var(--size-m) / 6) 0;
}

.button:hover {
	background-color: var(--contrast-10pct);
}

.scroller {
	display: block;
	height: 100%;
	width: 100%;
}

.button[theme~="large"] > a {
	padding: 0 calc(var(--size-l) / 3 + var(--border-radius-l) / 2);
	font-size: var(--font-size-l);
}

.button[theme~="large"] > a > span {
	padding: calc(var(--size-l) / 6) 0;
	line-height: var(--line-height-s);
}

/* Padding */
[theme~="padding-xl"] {
	padding: var(--space-xl);
}

[theme~="padding-l"] {
	padding: var(--space-l);
}

[theme~="padding"],
[theme~="padding-m"] {
	padding: var(--space-m);
}

[theme~="padding-s"] {
	padding: var(--space-s);
}

[theme~="padding-xs"] {
	padding: var(--space-xs);
}

/* Margin */
[theme~="margin-xl"] {
	margin: var(--space-xl);
}

[theme~="margin-l"] {
	margin: var(--space-l);
}

[theme~="margin"],
[theme~="margin-m"] {
	margin: var(--space-m);
}

[theme~="margin-s"] {
	margin: var(--space-s);
}

[theme~="margin-xs"] {
	margin: var(--space-xs);
}

[theme~="margin-right-xs"] {
	margin-right: var(--space-xs);
}

/* Spacing */
[theme~="spacing-xl"] {
	gap: var(--space-xl);
}

[theme~="spacing-l"] {
	gap: var(--space-l);
}

[theme~="spacing"],
[theme~="spacing-m"] {
	gap: var(--space-m);
}

[theme~="spacing-s"] {
	gap: var(--space-s);
}

[theme~="spacing-xs"] {
	gap: var(--space-xs);
}

[theme~="flex-fill"] {
	flex-grow: 1;
}

/* Align-Items */
[theme~="align-items-flex-start"] {
	align-items: flex-start;
}

[theme~="align-items-center"] {
	align-items: center;
}

[theme~="align-items-flex-end"] {
	align-items: flex-end;
}

/* Justify-Content */
[theme~="justify-content-flex-start"] {
	justify-content: flex-start;
}

[theme~="justify-content-center"] {
	justify-content: center;
}

[theme~="justify-content-flex-end"] {
	justify-content: flex-end;
}

/* Height & Width */
[theme~="full-width"] {
	width: 100%;
}

[theme~="full-height"] {
	height: 100%;
}

[theme~="full-size"] {
	height: 100%;
	width: 100%;
}

/* Border */
[theme~="border-radius-s"] {
	border-radius: var(--border-radius-s);
}

[theme~="border-radius"],
[theme~="border-radius-m"] {
	border-radius: var(--border-radius-m);
}

[theme~="border-radius-l"] {
	border-radius: var(--border-radius-l);
}

[theme~="border-radius-xl"] {
	border-radius: var(--border-radius-xl);
}

[theme~="border-radius-xxl"] {
	border-radius: var(--border-radius-xxl);
}

/* Scoller */
[theme~="scroll-auto"] {
	overflow: auto;
}

[theme~="scroll-none"] {
	overflow: hidden;
}

[theme~="scroll-v"] {
	overflow-x: hidden;
	overflow-y: auto;
}

[theme~="scroll-h"] {
	overflow-y: hidden;
	overflow-x: auto;
}

/* Position */
[theme~="pos-relative"] {
	position: relative;
}

[theme~="pos-absolute"] {
	position: absolute;
}

/* Text */
[theme~="text-center"] {
	text-align: center;
}

[theme~="no-text-wrap"] {
	white-space: nowrap;
}

@media only screen and (max-width: 660px) {
	[theme~="no-margin-on-mobile"] {
		margin-right: 0;
		margin-left: 0;
	}
	
	[theme~="no-padding-left-right-on-mobile"] {
		padding-right: 0;
		padding-left: 0;
	}
	
	[theme~="hide-on-mobile"] {
		display: none;
	}
}