@import "fonts.css";
@import "navigation.css";
@import "frontpage.css";
@import "footer.css";
@import "legaltext.css";
@import "forms.css";
/* Basiselemente */
:root {
	--headerfooterbg: rgb(26, 39, 48);
	--akzentfarbe: rgb(225, 196, 162);
	--akzent2: rgb(210, 166, 114);
	--akzent3: rgb(40, 60, 74);
	--akzentSilber: rgba(0, 0, 0, 0.05);
	font-size: clamp(0.625rem, 0.5434rem + 0.4082vi, 0.875rem);
	font-family: 'Lato', sans-serif;
}

/* Basis-Layout */
* {
	box-sizing: border-box;
	padding: 0px;
	margin: 0px;
}
html,
body {
	height: 100%;
	font-family: 'Lato', sans-serif;
	/* font-size: clamp(0.625rem, 0.4871rem + 0.6897vi, 0.875rem); */
	line-height: 1.6;
	text-size-adjust: none;
}
header,
main,
footer {
	padding: 0px;
}



/* Schriften */
a {
	text-decoration: none;
	color: #000;
}
p,
a {
	font-size: 1.2rem;
}
h1 {
	font-size: 2.4rem;
	font-weight: 300;
	text-align: center;
	border-bottom: 1px solid var(--akzent2);
	margin-bottom: 1em;
}
header {
	position: sticky;
	top: 0px;
	z-index: 100;
	background-color: var(--headerfooterbg);
	background-image: url("../images/heroimage.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	color: white;
	border-bottom: 1rem solid white;
}
.container {
	max-width: 1600px;
	margin: 0px auto;
	padding: 0px 1em 1em 1em;
}
header .container {
	display: grid;
	grid-template-rows: minmax(50px, 4vw) 1fr;
	grid-template-columns: 1fr;
	gap: 1em;
	justify-content: center;
	padding-top: 1.5em;
}
.logocontainer {
	height: 100%;
	max-height: 100px;
	/* display: grid; */
}
.logocontainer a {
	object-fit: contain;
}
.logocontainer img {
	display: block;
	margin: 0px auto;
	width: auto;
	height: 100%;
}
.hero {
	padding-bottom: 1em;
	width: 100%;
	max-width: 800px;
	margin: 0px auto;
}
.hero h1 {
	margin-bottom: 0px;
}
.hero h2 {
	margin: 0.5em;
}
.hero h2,
.hero p {
	text-align: center;
}
.desktopherotext {
	display: block;
}
.mobileherotext {
	display: none;
}
main {
	position: relative;
}
body > footer {
	position: sticky;
	top: 100vh;
	color: #fff;
	background-color: var(--headerfooterbg);
}
@media only screen and (max-width:500px) {
	.logocontainer {
		/* min-width: 150px; */
		height: 10vmin;
		max-height: 50px;
	}
	.logocontainer img {
		margin-bottom: 0.5rem !important;
	}
	.desktopherotext {
		display: none;
	}
	.mobileherotext {
		display: block;
	}
}
@media only screen and (max-height: 500px) {
	.desktopherotext {
		display: none;
	}
	.mobileherotext {
		display: block;
	}
}