@layer base {
	:root {
		--wasser: #0c2d69;
		--erde: #554c4b;
		--erdemed: #807271;
		--erdelight: #c8bcbd;
		--lehm: #e2c0a4;
		--orange: #c54408;
		--rot: #9d0d1c;
		--green: #516f5c;
		--text: #000000;

		--alice: "Alice", sans-serif;
		--din: "DIN", sans-serif;
		--maxwidth: 52.8125rem;
	}

	@font-face {
		font-family: "Alice";
		src: url("fonts/Alice-Regular.woff2") format("woff2");
		font-weight: 400;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "DIN";
		src: url("fonts/d-din-webfont.woff2") format("woff2");
		font-weight: 400;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "DIN";
		src: url("fonts/d-din-bold-webfont.woff2") format("woff2");
		font-weight: 700;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "DIN";
		src: url("fonts/d-din-italic-webfont.woff2") format("woff2");
		font-weight: 400;
		font-style: italic;
		font-display: swap;
	}
	body {
		font-family: var(--din), sans-serif;
		color: var(--text);
		background-color: white;

		&.service {
			padding-left: 2vw;
			padding-right: 2vw;
			&::before {
				content: "";
				z-index: 1;
				pointer-events: none;
				position: fixed;
				inset: 0 auto 0 0;
				width: 2vw;
				background-color: var(--orange);
			}
		}
	}

	main {
		min-height: 100vh;
	}

	.blocks {
		padding: 2rem 0;
	}
}