:root {
	--yellow: yellow;
	--black: #000;
	--darkGray: #666;
	--gray: #ddd;
	--lightGray: #f2f2f2;

	--breakpointXS: 0;
	--breakpointS: 600px;
	--breakpointM: 768px;
	--breakpointL: 992px;
	--breakpointXL: 1200px;

	--sizeXS: 13px;
	--sizeS: 18px;
	--sizeM: 24px;
	--sizeL: 36px;
	--sizeXL: 48px;
	--sizeXXL: 60px;
	--sizeXXXL: 72px;
}

@font-face {
	font-family: "Soehne Breit";
	src: url("../fonts/soehne-breit-web-buch.woff") format("woff");
}

* {
	box-sizing: border-box;
}

html,
body {
	position: relative;
	/* cursor: url('favicon.png'), auto;	 */
}

a, a:hover, button {
	color: var(--black);
}

body {
	padding: 0;
	font-family: "Soehne Breit";
	font-size: var(--sizeS);
	line-height: 1.4;
	background-color: var(--lightGray);
}

.body p {
	margin-top: 0;

	font-family: aktiv-grotesk, sans-serif;
	font-weight: 400;
	font-style: normal;
}

.page {
	margin: var(--sizeS);
}

strong {
	font-weight: 400 !important;
}

a {
	display: inline;
	text-decoration: none;
	color: inherit;
}

label {
	display: block;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	line-height: 1.2;
	font-weight: normal;
}

input,
button,
select,
textarea {
	font-family: inherit;
	/* font-size: inherit; */
	-webkit-padding: 0.4em 0;
	padding: 0.4em;
	margin: 0 0 0.5em 0;
	border: 1px solid;
	border-radius: 2px;
}

input:disabled {
	color: var(--lightGray);
}

button:disabled {
	color: #999;
}

button:not(:disabled):active,
button:hover {
	background-color: var(--lightGray);
}

button:focus {
	border-color: var(--darkGray);
}

.mb-0 {
	margin-bottom: 0;
}

.mb-2 {
	margin-bottom: var(--sizeS);
}

.mb-10 {
	margin-bottom: 100px;
}

.mb-20 {
	margin-bottom: 200px;
}

.mt-2 {
	margin-top: var(--sizeS);
}

.mt-10 {
	margin-top: 100px;
}

.mt-20 {
	margin-top: 200px;
}

h1 {
	font-size: var(--sizeL);
}

h2 {
	font-size: var(--sizeL);
}

h3 {
	font-size: var(--sizeM);
}

@media (min-width: 1441px) {
	h1 {
		font-size: var(--sizeXXL);
	}

	h2 {
		font-size: var(--sizeXL);
	}

	h3 {
		font-size: var(--sizeL);
	}

	body {
		font-size: var(--sizeM);
	}
}