@import url("button.css");
@import url("highlight-section.css");
@import url("boxes-section.css");

:root {
	--colorPrimary: #3289cc;
	--colorPrimaryDark: #00366a;
	--colorAccent: #ffa600;
	--colorPrimaryLight: #e6ebf1;
	--colorGray: #aeaeae;
	--colorLightGray: #d3d3d3;
	--colorDarkGray: #6a6a6a;
	--colorBorder: #e1e1e1;
	--colorFont: #555;
	--space: 15px;
	--spaceQuarter: calc(var(--space) / 4);
	--spaceHalf: calc(var(--space) / 2);
	--spaceDouble: calc(var(--space) * 2);
	--spaceTripple: calc(var(--space) * 3);
	--spaceQuadrupel: calc(var(--space) * 4);
	--spaceSectionPadding: 120px;
	--buttonSize: var(--space);
	--borderRadius: var(--spaceHalf);
	--borderRadiusSmall: var(--spaceQuarter);
	--borderRadiusBigger: var(--spaceDouble);
}

#line {
	max-width: 1000px;
	margin: auto;
	height: 1px;
	background-color: #dedede;
}

ul {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

.logo {
	max-width: 200px;
}

a {
	color: var(--colorPrimaryDark);
	text-decoration: none;
}

a:hover {
	color: var(--colorAccent) !important;
}

h1,h2,h3,h4,p {
	margin: 0;
}

h1 {
	font-size: 2.5rem;
}

h1 a {
	font-weight: 800;
}

h2 {
	color: var(--colorPrimaryDark);
}

body {
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	margin: 0;
	background-color: #fff;
	color: var(--colorFont);
}

header {
	padding-top: var(--spaceSectionPadding);
	padding-bottom: var(--spaceSectionPadding);
	text-align: center;
}
main .section {
	padding-top: var(--spaceSectionPadding);
	padding-bottom: var(--spaceSectionPadding);
}

.section {
	max-width: 1300px;
	margin: auto;
	line-height: 1.5;
	padding-right: var(--spaceDouble);
	padding-left: var(--spaceDouble);
}

footer {
	background-color: var(--colorPrimaryDark);
	padding-top: var(--spaceSectionPadding);
	padding-bottom: var(--spaceSectionPadding);
}

footer a {
	color: #fff !important;
}

footer .section {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

@media screen and (max-width: 900px) {
	footer .section {
		flex-direction: column;
		text-align: center;
		gap: var(--spaceSectionPadding);
	}

	footer .logo-wrapper {
		align-items: center;
	}
}

footer .section .links {
	display: flex;
	justify-content: space-between;
}

footer ul{
	display: flex;
	gap: var(--spaceDouble);

}

footer ul li {
	color: #fff;
}

footer .logo-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--space);
}

footer .impressum {
	display: flex;
	flex-direction: column;
	gap: var(--spaceHalf);
	color: #fff;
	max-width: 300px;
}

footer .impressum .description {
	font-size: 0.8rem;
	opacity: 0.5;
}

footer .impressum:hover .description {
	opacity: 1;
}