html {
	overflow-x: hidden;
	/* prevent overflow-x on mobile devices */
	height: 100%;
	/* ensures that position: sticky remains functional */
	--primary-alpha-75: color-mix(in oklch, var(--primary), transparent 75%);
	--primary-alpha-50: color-mix(in oklch, var(--primary), transparent 50%);
	--primary-alpha-25: color-mix(in oklch, var(--primary), transparent 25%);
	--primary-white-75: color-mix(in oklch, var(--primary), white 75%);
	--primary-white-50: color-mix(in oklch, var(--primary), white 50%);
	--complementary-alpha-95: color-mix(in srgb, var(--complementary), transparent 95%);
	--complementary-alpha-85: color-mix(in srgb, var(--complementary), transparent 85%);
	--complementary-alpha-75: color-mix(in srgb, var(--complementary), transparent 75%);
	--complementary-alpha-50: color-mix(in srgb, var(--complementary), transparent 50%);
	--complementary-alpha-25: color-mix(in srgb, var(--complementary), transparent 25%);
	--complementary-white-75: color-mix(in srgb, var(--complementary), white 75%);
	--complementary-white-50: color-mix(in srgb, var(--complementary), white 50%);
}

* {
	box-sizing: border-box;
	/*  tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. */
}

/* body */
/* ------------------------ */

body {
	--body-margin-min: 0;
	/* so I don't get problems with the header */
	--body-margin-max: 300px;
	--body-margin-set: 5vw;
	--body-margin: clamp(var(
	--body-margin-min), var(--body-margin-set), var(--body-margin-max));
	--default-padding-x: 2rem;
	--default-padding-y: 2rem;
	display: flex;
	flex-direction: column;
	grid-auto-flow: row;
	grid-template-columns: 1fr;
	overflow-x: hidden;
	/* prevent overflow-x on mobile devices */
	/*! height: 137%; */
	/* ensures that position: sticky remains functional */
	/* mobile layout */
	margin: 0 0;

	/* style */
	background-color: whitesmoke;
}

@supports(background-color: color-mix(in oklch, white, black)) {
	body {
		background-color: var(--complementary-alpha-75);
	}
}

/* banner */
/* ------------------------ */
[role="banner"] {
	width: 100vw;
	grid-column: 1 / -1;
	grid-row: 1 / span 1;
	/* style */
	margin-bottom: -1px;
	margin-left: 0;
	margin-right: 0;
	height: clamp(100px, 10svh, 250px);
}

/* nav */
/* ------------------------ */
[role="navigation"] {
	padding: var(--default-padding-y) var(--default-padding-x);
	border-bottom: thin none black;
	position: absolute;
	grid-row: 1;
	grid-column: 1;
	width: 100%;
	height: -moz-fit-content;
	height: fit-content;
	right: 2%;
}

/* main */
/* ------------------------ */
main {
	display: flex;
	flex-direction: column;
	row-gap: 30px;
	padding: var(--default-padding-y) var(--default-padding-x);
	width: 100%;
	/* style */
	/*! background-image: url('/assets/imgs/f48d518b1d88ee66d9a794af0bf41c84-1920x2143.webp'); */
}

/* aside */
/* ------------------------ */
aside {
	grid-column: 1 / 3;
	grid-row: 3 / span 1;
	display: flex;
	margin: 0 30px;
}

/* footer */
/* ------------------------ */
footer {
	grid-area: footer;
	width: 80vw;
	margin: auto;
	border-top: thin solid black;
}

/* @media(640px) */
/* ------------------------ */

@media (min-width: 640px) {

	/* add more margin */
	body {
		--body-margin-min: 50px;
		--body-margin-max: 300px;
		--body-margin-set: 5vw;
		--body-margin: clamp(var(--body-margin-min), var(--body-margin-set), var(--body-margin-max));
		display: grid;
		align-content: start;
		justify-items: center;
		align-items: start;
		justify-content: normal;
		grid-auto-rows: auto;
		grid-auto-flow: row;
		grid-template-columns: var(--body-margin) repeat(5, minmax(auto, 1fr)) var(--body-margin);
	}

	[role="banner"] {
		height: clamp(100px, 20svh, 250px);
		grid-column: 1 / -1;
		grid-row: 1 / span 1;
	}

	[role="navigation"] {
		grid-column: 1 / -1;
		grid-row: 1 / span 1;
	}

	main {
		grid-column: 1 / -1;
		grid-row: 3 / span 1;
		margin: 0 1rem;
	}

	aside {
		grid-column: 1 / 3;
		grid-row: 3 / span 1;
	}

}

/* @media(1024px) */
/* ------------------------ */

@media (min-width: 1024px) {

	/* 5 Spalten */
	body {
		--body-margin-min: 50px;
		--body-margin-max: 300px;
		--body-margin-set: 5vw;
		--body-margin: clamp(var(--body-margin-min), var(--body-margin-set), var(--body-margin-max));
		-moz-column-gap: 0px;
		column-gap: 0px;
		row-gap: 0px;
		align-content: start;
		justify-items: center;
		align-items: start;
		justify-content: normal;
		grid-auto-rows: auto;
		grid-auto-flow: row;
		grid-template-columns: var(--body-margin) repeat(5, minmax(auto, 1fr)) var(--body-margin);
	}

	[role="banner"] {
		height: clamp(100px, 30svh, 250px);
		grid-column: 1 / -1;
		grid-row: 1 / span 1;
		/* background-color: var(--complementary-alpha-85); */
	}

	[role="navigation"] {
		position: static;
		grid-column: 2 / 3;
		grid-row: 2 / span 1;
		border-bottom: none;
	}

	main {
		grid-column: 3 / -2;
		grid-row: 2 / span 1;
	}

	aside {
		grid-column: 1 / 3;
		grid-row: 3 / span 1;
	}

	#line-1 {
		display: block;
		width: 100%;
		border-bottom: 1px solid black;
		grid-row: 2 / 2;
		grid-column: 2 / 4;
	}

	#area-1 {
		display: block;
		width: 43%;
		aspect-ratio: 1;
		grid-row: 2 / 6;
		grid-column: 1 / span 2;
		background-color: var(--primary-alpha-50);
		clip-path: ellipse(75% 80% at 14.58% 15.5%);
		z-index: -1;
		place-self: start start;
		border-left: 1px solid black;
		border-top: 1px solid black;
	}

	#area-1::after {
		content: 'Härer Gerüst-bau';
		font-size: min(2vw, 2rem);
		width: 50%;
		display: block;
		word-wrap: normal;
		font-family: RobotoCondensed;
		/*! border-left: 2px solid black; */
		/*! border-top: 2px solid black; */
	}

	#area-2 {
		display: block;
		height: 100vh;
		border-right: 1px solid black;
		grid-row: 2 / 6;
		grid-column: 1 / span 2;
		justify-self: end;
		width: 100%;
		/* background-color: var(--complementary-alpha-75); */
		z-index: -2;
	}

}

/* @media(1280px) */
/* ------------------------ */

@media (min-width: 1280px) {

	/* add more margin */
	body {
		--body-margin-min: 50px;
		--body-margin-max: 300px;
		--body-margin-set: 5vw;
		--body-margin: clamp(var(--body-margin-min), var(--body-margin-set), var(--body-margin-max));
	}
}

/* data-background */
body[data-background]::before {
	content: "";
	position: absolute;
	/*! top: 0; */
	/*! left: 0; */
	width: 100%;
	height: 100%;
	/* background-image: url('/assets/imgs/f48d518b1d88ee66d9a794af0bf41c84-1920x2143.webp'); */
	background-color: #05ff5a00;
	z-index: -999;

	background-blend-mode: lighten;
	filter: grayscale(0%) brightness(100%);
	background-origin: border-box;

	opacity: 0.2;
}