* {
	box-sizing: border-box;
}

html {
	margin: 0;
	height: 100%;
	width: 100%;
	background-color: var(--color-background);
	color: var(--color-text);
	font-family: "Noto Sans", sans-serif;
	font-size: var(--text-body-size);
	font-weight: var(--text-body-weight);
	line-height: var(--text-body-line-height);
}

body {
	display: flex;
	flex-direction: column;
	height: calc(100% - var(--height-header) - var(--spacing-5));
	width: 100%;
	margin: calc(var(--height-header) + var(--spacing-5)) 0 0;
	scroll-padding-top: calc(var(--height-header) + var(--spacing-5));
	overflow-x: hidden;
}

@supports (overflow-x: clip) {
	body {
		overflow-x: clip;
	}
}

main {
	flex-grow: 1;
}

main > *:not(.full-width) {
	max-width: var(--max-width-with-spacing-horizontal);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spacing-horizontal);
	padding-right: var(--spacing-horizontal);
}

section,
article,
.payload-richtext > *:not(:where(p, h1, h2, h3, h4, h5, h6):has(+ :where(p, h1, h2, h3, h4, h5, h6))):not(.no-spacing)  {
	margin-bottom: var(--spacing-vertical-content);
}

.payload-richtext > *:last-child {
	margin-bottom: 0;
}

.payload-richtext > img,
.payload-richtext > picture,
.payload-richtext > a {
	display: block;
}

img {
	max-width: 100%;
	height: auto;
}

picture {
	line-height: 0;
}

h1,
.h1 {
	font-size: var(--text-h1-size);
	font-weight: var(--text-h1-weight);
	line-height: var(--text-h1-line-height);
	margin-top: 0;
	margin-bottom: var(--spacing-6);
}

h2,
.h2 {
	font-size: var(--text-h2-size);
	font-weight: var(--text-h2-weight);
	line-height: var(--text-h2-line-height);
	margin-top: 0;
	margin-bottom: var(--spacing-6);
}

h3,
.h3 {
	font-size: var(--text-h3-size);
	font-weight: var(--text-h3-weight);
	line-height: var(--text-h3-line-height);
	margin-top: 0;
	margin-bottom: var(--spacing-5);
}

.sub-headline {
	font-size: var(--text-sub-headline-size);
	font-weight: var(--text-sub-headline-weight);
	line-height: var(--text-sub-headline-line-height);
	color: var(--color-text-subtle);
}

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

a {
	text-decoration: none;
	color: var(--color-link);

	&:hover,
	&:focus-visible {
		text-decoration: underline;
	}
}

button {
	all: unset;
	outline: revert;
}

.button {
	--button-padding-horizontal: var(--spacing-5);
	--button-padding-vertical: var(--spacing-4);

	display: inline-block;
	padding: var(--button-padding-vertical) var(--button-padding-horizontal);
	font-weight: var(--text-weight-medium);
	border-radius: 3px;
	cursor: pointer;
	border: 2px solid transparent;
	transition: background 0.2s, color 0.2s, border-color 0.2s;

	&:hover,
	&:focus-visible {
		text-decoration: none;
	}
}


.button.button-small {
	--button-padding-horizontal: var(--spacing-4);
	--button-padding-vertical: var(--spacing-3);

	font-size: var(--text-small-size);
}

.button.button-filled {
	background: var(--color-button-filled-background);
	color: var(--color-button-filled-text);

	&:hover,
	&:focus-visible {
		background: var(--color-button-filled-background-hover);
		color: var(--color-button-filled-text-hover);
	}
}

.button.button-outline {
	background: var(--color-button-outline-background);
	color: var(--color-button-outline-text);
	border-color: var(--color-button-outline-text);

	&:hover,
	&:focus-visible {
		background: var(--color-button-outline-background-hover);
		color: var(--color-button-outline-text-hover);
		border-color: var(--color-button-outline-background-hover);
	}
}

.button.button-ghost {
	background: var(--color-button-ghost-background);
	color: var(--color-button-ghost-text);

	&:hover,
	&:focus-visible {
		background: var(--color-button-ghost-background-hover);
		color: var(--color-button-ghost-text-hover);
	}
}