/*
Nur Änderungen kommen hier rein
*/

:root {
	--colorBlauDunkel: rgb(43, 72, 90);
	--colorBlauHell: rgb(24, 170, 213);

	--linkColor: var(--colorBlauHell);
}

header > div {
	/*padding: 5%;
	padding-top: 0;
	padding-bottom: 0;*/
}

header {
	display: block;
	min-height: 107px;
	background-color: #fff;
	margin-bottom: 0px;
	height: 130px;
	padding-bottom: 0px;
}

header:has(img) {
	min-height: 0;
}

header a {
	top: 0;
	display: flex;
	justify-content: flex-start;
	float: none;
	
	margin-top:  -10px;
	margin-left: 5%;
}

header div a img {
	/*width: 136%;*/
	height: 80px;
}

header div#dunkelBlau {
	position: absolute;
	background-color: var(--colorBlauDunkel);
	width: 95%;
	height: 150px;
	top: -16px;
	z-index: 50;
}

header div#hellBlau {
	background-color: var(--colorBlauHell);
	width: 95%;
	margin-left: 5%;
	margin-top: 40px;
	height: 150px;
}

header a img {
	margin-top: 40px;
	margin-bottom: 40px;
	margin-left: 33px;
	height: 90px;
}

h1 {
	color: var(--colorBlauHell);
}

h2, h3 {
	color: var(--colorBlauDunkel);
}

li::marker {
	color: var(--colorBlauDunkel);
}

#introduction {
	background-color: #fff;
	padding: 0;
}

main {
	padding-bottom: 40px;
}

#audit {
	position: absolute; 
	right: 0;
	bottom: 10px;
}

#grid {
	grid-template-columns: 70% 30%;
}

footer {
	background-color: var(--colorBlauHell);
}

footer #end,
footer #apply {
	background-color: var(--colorBlauDunkel);
}

@media screen and (max-width: 770px) {
	#grid {
		grid-template-columns: 60% 40%;
	}
}

@media screen and (max-width: 700px) {

}

@media screen and (max-width: 650px) {
	header {
		margin-bottom: 0;
		padding-bottom: 0;
	}

	header div a img {
		height: 70px;
	}

	header div#dunkelBlau,
	header div#hellBlau {
		height: 130px;
	}

	#grid {
		grid-template-columns: 100%;
	}

	#rangeLocation {
		width: 70%;
	}
}

@media screen and (max-width: 550px) {
	header {
		margin-bottom: 20px;
		padding-bottom: 0;
		height: 80px;
	}

	header div a img {
		height: 60px;
	}

	header div#dunkelBlau,
	header div#hellBlau {
		height: 100px;
	}
}

@media screen and (max-width: 500px) {
	header {
		margin-bottom: 20px;
		padding-bottom: 0;
	}

	header div a img {
		height: 50px;
	}

	#rangeLocation {
		width: 100%;
	}

	#grid {
		margin-bottom: 140px;
	}

	#audit {
		bottom: 20px;
	}
}

@media screen and (max-width: 550px) {
	header div a img {
		height: 40px;
	}
}

@media screen and (max-width: 400px) {
	header {
		margin-bottom: 20px;
		padding-bottom: 0;
	}

	header div a img {
		height: 30px;
	}

	header div#dunkelBlau,
	header div#hellBlau {
		height: 90px;
	}

	#grid {
		margin-bottom: 140px;
	}
}