@import url('https://fonts.googleapis.com/css2?family=Blinker:wght@100;200;300;400;600;700;800;900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:wght@100;300;400;500;700;900&display=swap');

*,
::before,
::after {
	box-sizing: border-box
}

html {
	height: 100%;
	font-size: 100%;
}

h1 {
	font: 300 clamp(2.6rem, 5.3vw, 5.5rem)/1.2 "Open Sans", sans-serif;
	text-align: center;
	color: white;
	margin: 0;
}

h2 {
	font: 400 clamp(1.5rem, 2.8vw, 3rem)/1.2 "Open Sans", sans-serif;
	text-align: center;
	color: white;
	margin: 0;
}

h3 {
	font: 600 clamp(1rem, 1.1vw, 1.4rem)/clamp(1.2rem, 1.4vw, 1.8rem) "Open Sans", sans-serif;
	text-align: left;
	color: white;
	margin: 0;
}

p {
	color: white;
	font: 200 max(1rem, 1vw)/1.2 "Roboto", sans-serif;
	margin: 0;
	text-align: left;

	a:link {
		color: white;
		text-decoration: none;
	}

	a:focus {
		color: white;
	}

	a:hover {
		color: red;
	}

	a:active {
		color: red;
	}

	a:visited {
		color: white;
	}
}

code {
	display: block;
	white-space: pre;
	tab-size: 4;
	font: 500 clamp(.9rem, .9vw, .98rem)/clamp(.92rem, 1.1vw, 1.2rem) 'Courier New', Courier, monospace;
	text-align: left;
	color: white;
	margin: .5rem 0 .5rem 0;
	overflow: hidden;
}

body {
	background: white;
	border: 0;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	height: 100%;
	max-width: 3840px;
	display: grid;
	grid-template-rows: 1fr auto;
	grid-template-columns: auto;

	/*fix Header-Bereich:*/
	header {
		position: fixed;
		display: grid;
		grid-template-columns: auto auto;
		align-items: center;
		z-index: 50;
		top: 0;
		width: 100%;
		background: transparent;
		transition: background-color 0.5s, height 1s ease;
		height: 4.5vw;
		min-height: 3vw;
		max-height: 5vw;

		div {
			grid-column: 1;
			width: 12vw;
			height: 3vw;
			margin: 0 0 0 1vw;
			background: url(../img/logo01.png) no-repeat center center / contain;
			transition: background-image 0.5s ease-in-out;
		}

		div:hover {
			background: url(../img/logo01a.png) no-repeat center center / contain;
			cursor: pointer;
		}

		nav {
			grid-column: 2;
			display: grid;
			grid-template-columns: repeat(6, auto);
			justify-content: right;
			padding: 0 1% 0 0;

			a,
			a:after,
			a:before {
				font: 300 max(.9rem, .9vw)/1.3 "Roboto", sans-serif;
				display: block;
				padding: .8rem 1rem;
				text-decoration: none;
				color: silver;
				margin: 0 10px;
				transition: all .2s;
			}

			a {
				position: relative;
				z-index: 1;
			}

			a:hover {
				color: black;
				text-decoration: none;

			}

			a:after {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				width: 100%;
				height: 1px;
				content: '.';
				color: transparent;
				background: #f89605;
				visibility: none;
				opacity: 0;
				z-index: -1;
			}

			a:hover:after {
				opacity: 1;
				visibility: visible;
				height: 70%;
				border: 1px solid hidden;
				border-radius: 7px;
			}
		}
	}

	header.sticky {
		background-color: rgba(243, 242, 242, 0.92);
		box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 1px;
		height: 3.5vw;
		min-height: 3vw;
		max-height: 4vw;

		div {
			width: 9.6vw;
			height: 2.1vw;
			margin: 0 0 0 .6vw;
			background: url(../img/logo01a.png) no-repeat center center / contain;
		}

		div:hover {
			background: url(../img/logo01.png) no-repeat center center / contain;
		}

		nav {
			a {
				color: rgb(48, 48, 48);
			}
		}
	}

	@media (width <=1280px) {
		header {
			grid-template-columns: auto;
			justify-content: center;
			height: 10.5vw;
			max-height: 11.5vw;
			min-height: 9.5vw;

			div {
				width: 36vw;
				min-width: 35vw;
				height: 8vw;
				min-height: 7vw;
			}

			nav {
				display: none;
			}
		}

		header.sticky {
			height: 9.5vw;
			max-height: 10.5vw;
			min-height: 8.5vw;
			background: rgba(255, 255, 255, 0.874);

			div {
				width: 30vw;
				min-width: 29vw;
				height: 6.5vw;
				min-height: 5.5vw;
			}
		}
	}

	@media (width <=1280px) and (orientation: landscape) {
		header {
			height: 6vw;
			min-height: 5vw;

			div {
				height: 4.5vw;
				min-height: 4vw;
				width: 18vw;
				min-width: 17vw;
			}
		}

		header.sticky {
			height: 5vw;
			min-height: 4vw;

			div {
				height: 4vw;
				min-height: 3vw;
				width: 16vw;
				min-width: 14vw;
			}
		}
	}

	/*fix Header Ende*/

	main {
		grid-row: 1;
		display: grid;
	}

	footer {
		grid-row: 2;
		display: grid;
		grid-template-columns: auto auto;
		background: url(../img/bg_foo.png) no-repeat center top / cover;

		nav {
			grid-column: 1;
			display: grid;
			grid-template-columns: repeat(6, auto);
			justify-content: left;
			height: 4vh;
			margin: clamp(1.7rem, 1.9vw, 2.3rem) 0 0 0;

			a,
			a:after,
			a:before {
				font: 200 max(.9rem, .9vw)/1.3 "Roboto", sans-serif;
				display: block;
				padding: .8rem 1rem;
				text-decoration: none;
				color: white;
				margin: 0 10px;
				transition: all .2s;
			}

			a {
				position: relative;
				z-index: 1;
			}

			a:hover {
				color: black;
				text-decoration: none;

			}

			a:after {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				width: 100%;
				height: 1px;
				content: '.';
				color: transparent;
				background: #4af805;
				visibility: none;
				opacity: 0;
				z-index: -1;
			}

			a:hover:after {
				opacity: 1;
				visibility: visible;
				height: 70%;
				border: 1px solid hidden;
				border-radius: 7px;
			}
		}

		@media (width <=1280px) {
			background: url(../img/bg_foo_1920.png) no-repeat center top / cover;

			nav {
				grid-template-rows: repeat(6, auto);
				grid-template-columns: auto;
				justify-content: left;
				height: auto;
				padding: 0 0 1vh 0;
			}

		}

		div {
			grid-column: 2;
			display: flex;
			justify-content: right;
			align-items: start;
			padding: .5rem;
			margin: clamp(1.5rem, 1.7vw, 2rem) 0 0 0;
			min-height: 12vh;

			p {
				font: 300 clamp(0.5rem, 0.55rem + 0.2vw, .9rem)/clamp(0.6rem, 0.59rem + 0.5vw, 1rem) "Roboto", sans-serif;
			}
		}
	}
}

#code {
	header {
		background: transparent url(../img/bg_header.png) no-repeat center bottom / cover;
		/* korr Höhe */
		height: 9vh;
		min-height: 5vw;
		max-height: 10vh;

		div {
			/* korr Abst weg rdg */
			margin: 0 0 1vw 1vw;
		}

		nav {
			/* korr Abst weg rdg */
			padding: 0 1vw 1vw 0;

			a,
			a:after,
			a:before {
				font: 200 max(.9rem, .9vw)/1.3 "Roboto", sans-serif;
				color: white;
			}

			a:hover {
				color: black;
			}

			a:after {
				color: transparent;
			}
		}
	}

	main {
		grid-template-rows: auto 1fr;
		background: url(../img/code/bg.jpg) no-repeat center top / contain;

		hgroup {
			grid-row: 1;
			display: grid;
			justify-content: center;
			margin: clamp(26vw, 28vw, 30vw) 0 2vw 0;

			p {
				color: #818080;
				font-weight: 300;
				width: 70vw;
			}
		}

		article {
			grid-row: 2;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-template-rows: 1fr;
			background: url(../img/code/bg_unt.jpg) no-repeat center center / cover;
			margin: 0 0 2vw 0;

			div {
				display: flex;
				flex-direction: column;
				justify-content: start;
				align-items: center;

				ul li {
					list-style: none;
					display: flex;
					flex-direction: column;

					h2 {
						margin: 0 0 .5vw 0;
						text-align: left;
					}

					h3 {
						margin: .5vw 0 .2vw 0;
					}

					a {
						font: 300 max(.9rem, .75vw)/1.3 "Roboto", sans-serif;
						color: white;
						text-align: left;
						text-decoration: none;
					}

					a:hover {
						color: rgb(241, 59, 3);
					}

					a:visited {
						color: rgb(249, 249, 6);
					}
				}
			}

			.css {
				grid-column: 1;
				background: rgba(11, 247, 7, 0.546);
			}

			.html {
				grid-column: 2;
				background: rgba(244, 3, 3, 0.477);
			}

			.php {
				grid-column: 3;
				background: rgba(3, 164, 245, 0.539);

			}

			.javascr {
				grid-column: 4;
				background: rgba(220, 2, 240, 0.505);

			}
		}
	}

	@media (width <=1280px) {
		header {
			background: transparent;
			/* korr Höhe */
			height: 6vh;
			min-height: 4vw;
			max-height: 7vh;

			div {
				/* korr Abst*/
				margin: 0 0 0 1vw;
			}
		}

		main {
			background: url(../img/code/bg_1920.jpg) no-repeat center top / contain;
			margin: clamp(2rem, 11vw, 4.5rem) 0 0 0;

			hgroup {
				margin: clamp(84vw, 85vw, 86vw) 0 2vw 0;

				p {
					width: 90vw;
				}
			}

			article {
				grid-template-columns: 1fr 1fr;
				grid-template-rows: 1fr 1fr;

				.css {
					grid-column: 1;
					grid-row: 1;
				}

				.html {
					grid-column: 2;
					grid-row: 1;
				}

				.php {
					grid-column: 1;
					grid-row: 2;
				}

				.javascr {
					grid-column: 2;
					grid-row: 2;
				}
			}
		}
	}

	@media (width <=1280px) and (orientation: landscape) {
		header {
			background: transparent;
			justify-content: left;
			/* korr Höhe */
			height: 6vh;
			min-height: 4vw;
			max-height: 7vh;

			div {
				/* korr Abst*/
				margin: 0 0 0 1vw;
			}
		}

		main {
			background: url(../img/code/bg.jpg) no-repeat center top / contain;

			hgroup {
				margin: clamp(26vw, 28vw, 30vw) 0 2vw 0;

			}

			article {
				grid-template-columns: 1fr 1fr 1fr 1fr;
				grid-template-rows: 1fr;

				.css {
					grid-column: 1;
					grid-row: 1;
				}

				.html {
					grid-column: 2;
					grid-row: 1;
				}

				.php {
					grid-column: 3;
					grid-row: 1;
				}

				.javascr {
					grid-column: 4;
					grid-row: 1;
				}
			}
		}
	}
}

#index {

	header {
		nav {

			a,
			a:after,
			a:before {
				font: 200 max(.9rem, .9vw)/1.3 "Roboto", sans-serif;
				color: black;
			}

			a:hover {
				color: white;
			}

			a:after {
				color: transparent;
			}
		}
	}

	header.sticky {
		background-color: rgba(243, 242, 242, 0.92);
		box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 1px;

		div {
			width: 9.6vw;
			height: 2.1vw;
			margin: 0 0 0 .6vw;
			background: url(../img/logo01a.png) no-repeat center center / contain;
		}

		div:hover {
			background: url(../img/logo01.png) no-repeat center center / contain;
		}

		nav {
			a {
				color: rgb(48, 48, 48);
			}
		}
	}

	main {
		grid-template-rows: auto 1fr;
		background: url(../img/index/bg.jpg) no-repeat center top / contain;

		article {
			grid-row: 1;
			display: grid;
			justify-content: center;
			align-items: start;

			p {
				font: 300 clamp(.95rem, 1.3vw, 1.6rem)/1.15 "Roboto", sans-serif;
				color: dimgray;
				width: 60vw;
				margin: clamp(28vw, 29vw, 30vw) 0 1vw 0;

			}
		}

		aside {
			grid-row: 2;
			display: grid;
			justify-content: center;
			align-items: start;
			padding: .5vw 0 2vw 0;

			div {
				background: url(../img/index/mehr.png) no-repeat center center / contain;
				width: 15vw;
				height: 3vw;
				transition: background-image .2s ease-in;
			}

			div:hover {
				background: url(../img/index/mehr02.png) no-repeat center center / contain;
				cursor: pointer;
			}
		}
	}

	@media (width <=1280px) {
		background: url(../img/index/bg_1280.jpg) no-repeat left top / contain;

		header {
			display: none;
		}

		main {
			article {
				p {
					font: 400 clamp(.95rem, 1.3vw, 1.6rem)/1.15 "Roboto", sans-serif;
					width: 90vw;
					margin: clamp(77vw, 78vw, 79vw) 0 0 0;
				}
			}

			aside {
				padding: 1vh 0 3vh 0;

				div {
					width: 20vh;
					height: 4.5vh;
				}

			}
		}
	}

	@media (width <=1280px) and (orientation: landscape) {
		background: url(../img/index/bg.jpg) no-repeat left top / contain;

		header {
			display: grid;
			background: transparent url(../img/bg_header_weiss.png) no-repeat center bottom / cover;

			div {
				height: 3.5vw;
				min-height: 3vw;
				width: 15vw;
				min-width: 12.5vw;
				margin: 0;
			}
		}

		main {
			article {
				p {
					width: 85vw;
					margin: clamp(30vw, 31vw, 32vw) 0 0 0;
				}
			}

			aside {
				padding: 1vh 0 2vw 0;

				div {
					width: 18vw;
					height: 4vw;
				}

			}
		}
	}
}

#kontakt {
	main {
		background: url(../img/kontakt/bg.jpg) no-repeat center top / contain;

		article {
			margin: clamp(25vw, 28vw, 30vw) 16vw 0 16vw;

			p {
				font: 300 clamp(.95rem, 1.3vw, 1.6rem)/1.15 "Roboto", sans-serif;
				color: dimgray;
			}
		}
	}

	@media (width <=1280px) {
		main {
			background: url(../img/kontakt/bg_1920.jpg) no-repeat center top / contain;
			margin: clamp(9.5vw, 10.5vw, 11.5vw) 0 0 0;

			article {
				margin: clamp(79vw, 86vw, 90vw) 1vw 3vw 3vw;

				p {
					font: 300 clamp(.95rem, 1.3vw, 1.6rem)/1.15 "Roboto", sans-serif;
					color: dimgray;
					margin: 0 auto;
				}
			}
		}
	}

	@media (width <=1280px) and (orientation: landscape) {
		main {
			background: url(../img/kontakt/bg.jpg) no-repeat center top / contain;
			margin: 0;

			article {
				margin: clamp(25vw, 28vw, 29vw) 2vh 3vh 4vh;
			}
		}
	}
}

#projekte {
	background: url(../img/projekte/bg_unt.jpg) repeat;

	main {
		grid-template-rows: auto auto;

		hgroup {
			grid-row: 1;
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: auto auto;
			justify-content: center;
			align-items: start;
			background: url(../img/projekte/bg.jpg) no-repeat center bottom / cover;
			padding: 8vw 0 4vw 0;


			h1 {
				grid-row: 1;
			}

			p {
				grid-row: 2;
				margin: 1vw 12vw 0 12vw;
			}
		}

		article {
			grid-row: 2;
			display: grid;
			/*grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));*/
			grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
			gap: .5rem;
			padding: 1vw .5rem 2vw .5rem;

			figure {
				box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
				border: 1px solid hidden;
				border-radius: 8px;
				background: white;
				margin: 0;
				overflow: hidden;

				* {
					box-sizing: border-box;
					transition: all 0.25s ease;
				}

				img {
					width: 100%;
					aspect-ratio: 16/9;
				}

				a {
					text-decoration: none;
				}

				figcaption {
					padding: .5rem .75rem 1rem 1rem;

					h3 {
						margin: 0 0 .25rem 0;
						font-weight: 400;
						color: black;
					}

					p {
						color: black;
						font: 300 clamp(.9rem, .9vw, .98rem)/clamp(.92rem, 1.1vw, 1.2rem) "Roboto", sans-serif;
					}
				}
			}

			figure:hover {
				transition: all 0.3s ease;
				background: orange;
				box-shadow: rgb(246, 246, 245) 0px 1px 4px;

			}

			figure:hover img {
				transform: scale(1.1);
			}
		}
	}

	@media (width <=1280px) {
		main {
			hgroup {
				padding: 8vh 0 6vh 0;

				p {
					margin: 1vh 4vh 0 4vh;
				}
			}

			article {
				grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
				padding: 1vh .5rem 2vh .5rem;
			}
		}
	}

	@media (width <=1280px) and (orientation: landscape) {
		main {
			hgroup {
				padding: 18vh 0 7vh 0;

				p {
					margin: 2vh 8vh 0 10vh;
				}
			}
		}
	}
}

#start {
	main {
		grid-template-rows: auto auto 1fr;
		background: url(../img/startseite/bg.jpg) no-repeat center top / contain;
		margin: clamp(3vw, 4vw, 5vw) 0 0 0;

		article {
			grid-row: 2;
			margin: clamp(27vw, 28vw, 29vw) 0 0 0;
			padding: 0 16vw 0 16vw;

			p {
				font: 300 clamp(.95rem, 1.3vw, 1.6rem)/1.15 "Roboto", sans-serif;
				color: dimgray;
			}
		}

		aside {
			grid-row: 3;
			display: grid;
			grid-template-columns: auto auto;
			grid-template-rows: auto auto;
			justify-content: center;
			align-items: end;
			padding: 1vw 0 4vw 0;
			gap: .5rem;

			h1 {
				grid-row: 1;
				grid-column: 1/3;
				color: #818080;
				margin: 0 0 .8vw 0;
			}

			p {
				grid-row: 2;
				display: grid;
				grid-template-rows: subgrid;
				font-weight: 300;
				width: 35vw;
				background: url(../img/startseite/bgTxt.jpg) no-repeat left bottom / cover;
				border: 1px solid hidden;
				border-radius: 8px;
				padding: .9rem;
			}
		}
	}

	@media (width <=1280px) {
		main {
			background: url(../img/startseite/bg_1280.jpg) no-repeat center top / contain;
			margin: clamp(8.5vw, 9.5vw, 10.5vw) 0 0 0;


			article {
				margin: clamp(79vw, 86vw, 90vw) 0 0 0;
				padding: 0 1vw 0 2vw;

				p {
					font: 300 clamp(.95rem, 1.3vw, 1.6rem)/1.15 "Roboto", sans-serif;
					color: dimgray;
					margin: 0 auto;
				}
			}

			aside {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding: 1vw 0 4vw 0;

				h1 {
					margin: 0 0 .8vw 0;
				}

				p {
					width: 95vw;
				}
			}
		}
	}

	@media (width <=1280px) and (orientation: landscape) {
		main {
			background: url(../img/startseite/bg.jpg) no-repeat center top / contain;
			margin: clamp(4vw, 5vw, 6vw) 0 0 0;

			article {
				margin: clamp(25vw, 28vw, 29vw) 0 0 0;
				padding: 0 2vh 0 4vh;
			}
		}
	}
}

#tipps {
	background: url(../img/tipps/bg01.jpg) no-repeat center top / 100% auto;

	main {
		grid-template-rows: auto auto;

		hgroup {
			grid-row: 1;
			display: grid;
			justify-content: center;
			margin: clamp(20vw, 26vw, 30vw) 0 0 0;

			p {
				font-weight: 300;
				color: #818080;
				margin: 1vw 12vw 0 12vw;
			}
		}

		article {
			grid-row: 2;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
			gap: .5rem;
			padding: 1vw .5rem 3vw .5rem;

			figure {
				box-shadow: rgba(247, 247, 247, 0.205) 0px 1px 4px;
				border: 1px solid hidden;
				border-radius: 8px;
				background: rgba(3, 0, 0, 0.584);
				margin: 0;
				overflow: hidden;

				* {
					box-sizing: border-box;
					transition: all 0.25s ease;
				}

				img {
					width: 100%;
					aspect-ratio: 16/9;
				}

				a {
					text-decoration: none;
				}

				figcaption {
					padding: .5rem .75rem 1rem 1rem;

					h3 {
						margin: 0 0 .5rem 0;
					}

					p {
						font: 300 clamp(.9rem, .9vw, .98rem)/clamp(.92rem, 1.1vw, 1.2rem) "Roboto", sans-serif;
					}
				}
			}

			figure:hover {
				transition: all 0.3s ease;
				background: orange;
				box-shadow: rgb(247, 142, 13) 0px 1px 4px;

			}

			figure:hover img {
				transform: scale(1.1);
			}
		}
	}

	@media (width <=1280px) {
		background: url(../img/tipps/bg_1920.jpg) no-repeat center 3.2rem / contain;

		main {
			hgroup {
				p {
					margin: clamp(68vw, 70vw, 72vw) 3vw 3vw 3vw;
				}
			}

			article {
				padding: .5vh 1vh 2vh 1vh;
			}
		}

		@media (width <=1280px) and (orientation: landscape) {
			background: url(../img/tipps/bg01.jpg) no-repeat center top / 100% auto;

			header {
				justify-content: left;
			}

			main {
				hgroup {
					margin: clamp(20vw, 26vw, 30vw) 0 0 0;

					p {
						margin: 3vh 8vh 3vh 10vh;
					}
				}

				article {
					padding: 1.5vw 1vw 1.5vw 1vw;
				}
			}
		}
	}
}

#tipps2 {
	main {
		grid-template-rows: auto auto;

		hgroup {
			grid-row: 1;
			display: grid;
			grid-template-rows: auto auto 1fr;
			justify-content: center;
			align-items: center;
			background: url(../img/tipps/bg_rdg.png) no-repeat center bottom/cover, url(../img/tipps/bg_li.png) no-repeat left center/contain, url(../img/tipps/bg_re.png) no-repeat right center/contain, url(../img/tipps/bg_mi.png) repeat-x center/contain;

			div {
				grid-row: 1;
				margin: 4vw 0 0 0;

				p {
					font: 200 max(.7rem, .7vw)/1.3 "Roboto", sans-serif;
					text-align: center;
					color: rgb(249, 249, 6);
					margin: .9rem .9rem;

					a:link {
						font: 300 max(.7rem, .7vw)/1.3 "Roboto", sans-serif;
						color: rgb(249, 249, 6);
						text-decoration: none;
					}

					a:hover {
						color: red !important;
					}

					a:visited {
						color: rgb(249, 249, 6);
					}
				}
			}

			h1 {
				grid-row: 2;
			}

			p {
				grid-row: 3;
				margin: 1vw 18vw 3vw 18vw;
			}
		}

		article {
			grid-row: 2;
			padding: 1vw 18vw 3vw 18vw;

			h2 {
				font: 600 clamp(1rem, 1.2vw, 1.6rem)/1.3 "Open Sans", sans-serif;
				color: black;
				text-align: left;
				margin: 1vw 0 0 0;
			}

			p {
				color: black;
				font-weight: 300;
			}
		}

		section {
			/*f shorthand seite*/
			grid-row: 2;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
			gap: .5rem;
			padding: 1vw .5rem 3vw .5rem;

			div {
				padding: .75rem;
				background: #818080;
				border: 1px solid transparent;
				border-radius: 8px;

				h3 {
					margin: 0 0 0 .25rem;
				}
			}
		}
	}

	@media (width <=1280px) {
		main {
			hgroup {
				padding: 8vh 0 4vh 0;

				div {
					margin: 0 0 .8vw 0;

					p {
						font: 300 clamp(1.1rem, 1.4vw, 1.5rem)/1.3 "Roboto", sans-serif;
						margin: .9rem .9rem;

						a {
							font: 300 clamp(1.1rem, 1.4vw, 1.5rem)/1.3 "Roboto", sans-serif;
						}
					}
				}

				p {
					margin: 1vh 2vh 0 2vh;
				}
			}

			article {
				padding: .5vh 2vh 2vh 2vh;

				h2 {
					margin: 1vh 0 0 0;
				}

				p {
					font: 300 clamp(1.1rem, 1.4vw, 1.5rem)/1.3 "Roboto", sans-serif;
					margin: .5vh 0 1vh 0;
				}
			}
		}
	}

	@media (width <=1280px) and (orientation: landscape) {
		main {
			hgroup {
				padding: 16vh 0 6vh 0;

				div {
					margin: 0 0 .1vw 0;

					p {
						font: 300 clamp(.6rem, .8vw, .9rem)/1.2 "Roboto", sans-serif;
						margin: .9rem .9rem;

						a {
							font: 300 clamp(.6rem, .8vw, .9rem)/1.2 "Roboto", sans-serif;
						}
					}
				}

				p {
					font: 300 clamp(.7rem, .9vw, 1rem)/1.3 "Roboto", sans-serif;
					margin: 1vw 1vw 1vw 2vw;
				}
			}

			article {
				padding: 1vh 2vw 2vh 2vw;

				h2 {
					font: 400 clamp(1.8rem, 2vw, 2.2rem)/1.2 "Open Sans", sans-serif;
					margin: 2vh 0 0 0;
				}

				p {
					font: 300 clamp(.7rem, .9vw, 1rem)/1.3 "Roboto", sans-serif;
					margin: .5vh 0 0 0;
				}
			}
		}
	}
}

#uebermich {
	background: url(../img/uebermich/bg.jpg) no-repeat center top / 100% auto;

	main {
		grid-template-rows: 1fr;

		article {
			grid-row: 1;
			display: grid;
			justify-content: center;
			align-items: start;
			margin: clamp(26vw, 27vw, 28vw) 0 0 0;

			p {
				width: 55vw;
				font-weight: 300;
				color: black;

				a {
					color: black;
				}

				a:hover {
					color: red;
				}
			}
		}
	}

	@media (width <=1280px) {
		background: url(../img/uebermich/bg_1280.jpg) no-repeat center 7vh / contain;

		main {
			article {
				margin: clamp(88vw, 45vh, 90vw) 0 3vw 1vw;

				p {
					width: 95vw;
				}
			}
		}
	}

	@media (width <=1280px) and (orientation: landscape) {
		background: url(../img/uebermich/bg.jpg) no-repeat center top / 100% auto;

		main {
			article {
				grid-row: 1;
				display: grid;
				justify-content: center;
				align-items: start;
				margin: clamp(27vw, 28vw, 29vw) 0 0 0;

				p {
					width: 70vw;
					font-weight: 300;
				}
			}
		}
	}
}