body {
	padding-left: 4vw;
	padding-right: 4vw;
	padding-top: 4vw;
}

/* desktop or monitor - based on viewport height */
.container_content {
	display: flex;
	flex-direction: row;
	gap: 3vh;
	justify-content: left;
	padding-bottom: 1vh;
}

.container_header {
	display: flex;
	justify-content: left;
	flex-direction: row;
	gap: 3vh;
}

.contact {
	padding-bottom: 1vh;
	padding-top: 3vh;
	padding-left: 0.5vh;	
}

.content {
	flex: 1;
	max-width: 45vh; 
	box-sizing: border-box;
}

.impressum {
	display: inline-block;
	border-top-color: #C00000;
	border-top-style: solid;
	border-top-width: 1px;
	padding-top: 1vh;
	padding-left: 0.5vh;
	padding-right: 4vh;	
}

.keyword {
	display: inline-block;
	border-bottom-color: #C00000;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	padding-bottom: 1vh;
	padding-left: 0.5vh;
	padding-right: 4vh;
}

.logo {
	padding-bottom: 1vh;
	padding-left: 0.7vh;
}

.paragraph {
	padding-top: 0.5vh;
	padding-bottom: 0vh;
}

.title {
	padding-bottom: 0.5vh;
	padding-left: 0.5vh;
	padding-right: 0.5vh;
}

/* mobil - based on viewport width */
@media (orientation: portrait) {
	body {
		padding-left: 3vw;
		padding-right: 3vw;
		padding-top: 3vw;
	}
	
	.container_content {
		flex-direction: column;
		gap: 3vw;
	}
	
	.container_header {
		flex-direction: column;
		gap: 1vw;
	}

	.contact {
		padding-bottom: 1vw;
		padding-top: 3vw;
		padding-left: 0.5vw;	
	}	
	
	.content {
		max-width: 100vw;
	}
	
	.header {
		
	}

	.impressum {
		padding-top: 1vw;
		padding-left: 0.5vw;
		padding-right: 4vw;	
	}
	
	.keyword {
		padding-bottom: 1vw;
		padding-left: 0.5vw;
		padding-right: 4vw;
	}
	
	.logo {
		padding-left: 1vw;
	}
	
	.paragraph {
		padding-left: 0.5vw;
		padding-right: 0.5vw;
	}

	.title {
		padding-bottom: 0.5vw;
		padding-left: 0.5vw;
		padding-right: 0.5vw;
		padding-top: 0vw;
	}
}

@media (orientation: landscape) and (min-resolution: 2.01dppx) {
	body {
		padding-left: 3vw;
		padding-right: 3vw;
		padding-top: 3vw;
	}
	
	.container_content { 
		display: grid;
		gap: 6vh;
		grid-template-columns: repeat(2, 45vw);
		grid-auto-rows: auto;
	}

	.contact {
		padding-bottom: 1vw;
		padding-top: 3vw;
		padding-left: 0.5vw;	
	}
	
	.content {
		flex: 1;
		max-width: 45vw; 
		box-sizing: border-box;
	}

	.impressum {
		padding-top: 1vw;
		padding-left: 0.5vw;
		padding-right: 4vw;	
	}
	
	.keyword {
		padding-bottom: 1vw;
		padding-left: 0.5vw;
		padding-right: 4vw;
	}
	
	.logo {
		padding-bottom: 1vw;
		padding-left: 1vw;
	}
	
	.paragraph {
		padding-left: 0.5vw;
		padding-right: 0.5vw;
	}

	.title {
		padding-bottom: 0.5vw;
		padding-left: 0.5vw;
		padding-right: 0.5vw;
		padding-top: 0vw;
	}
}