@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;
	}


}