/* Variablen -------------------------------------------------------------------------------------------- */
:root {
	--main: #008ba9;
    --mainhover: #c30510;
	--white: #fff;
	--secondary: #a37825;
	--borderradius: 3px;
}

/* Schriften ----------------------------------------------------------------------------------------- */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Ubuntu-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/Ubuntu-Medium.ttf') format('truetype');
}



* {
	padding: 0;
	margin:0;
    box-sizing: border-box;
}

html,body {
 height: 100%;
}

body {
	background-color: var(--main);
	font-size: 16px;
	font-family: Ubuntu, Helvetica, Arial, sans-serif;
}
.container {
	 display: flex;
  justify-content: center; 
  align-items: center;     
  min-height: 100vh;       
  padding: 20px;  
}

.content {
	 max-width: 800px;       
  width: 100%;                    
  padding: 20px;
	overflow: auto;
}


.content-inner {
	background-color: var(--white);
	padding: 2em;
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-bottom: 1em;
}

.start .content-inner {

	padding-top: 7em;
	padding-bottom: 8em;

}

.content-link {
	text-align: center;
	color: var(--white);
	font-size: 0.85em;
}
.content-link a:link, .content-link a:hover {
	color: var(--white);
	text-decoration: none;
}
.content-link a:hover {
	color: var(--secondary);

}

.logo {
	padding: 1em 2em 2em 2em;
}
.logo img {
	max-width: 250px;
	min-width: 150px;
	height: 100%;
	object-fit: contain;
}
h1 {
	font-size: 22px;
	font-weight: 500;
	color: var(--main);
	margin-top: 2em;
}
h2 {
	font-size: 19px;
	font-weight: 500;
	color: #000;
	padding-top: 1.5em;
	padding-bottom: 0.5em;
}
.formelement {
	padding-top: 1em;
}
label {
	color: var(--main);
	font-size: 0.85em;
}
.error {
	color: var(--secondary);
	font-weight: 500;
	padding-top: 1em;
}
input {
	font-family: Ubuntu, Helvetica, Arial, sans-serif;
	font-size: 1em;
	padding: 5px;
	border-radius: var(--borderradius);
	border: 2px solid var(--main);
	margin-top: 3px;
}

input.button {
	display: inline-block;
	background-color: var(--main);
	padding: 0.5em 1em 0.6em 1em;
	color: var(--white);
	text-decoration: none;
	border-radius: var(--borderradius);
	margin-top: 1em;
	margin-bottom: 1em;
	border: none;
	cursor: pointer;
}
input.button:hover {
	background-color: var(--secondary);
	border: none;
	cursor: pointer;
}

.content-top {
	text-align: right;
}
/* .content-top a:link, .content-top a:hover {
	display: inline-block;
	background-color: var(--white);
	padding: 0.3em 0.7em 0.4em 0.7em;
	margin-top: 1em;
	margin-bottom: 1em;
	text-decoration: none;
	border-radius: var(--borderradius);
	border: none;
	cursor: pointer;
	color: var(--main);
}
.content-top a:hover {
	background-color: var(--secondary);
	color: var(--white);
} */
.content-top a:link, .content-top a:hover {
	display: inline-block;
	margin-top: 1em;
	margin-bottom: 1em;
	text-decoration: none;
	color: var(--white);
	font-size: 0.85em;
}
.content-top a:hover {
	color: var(--secondary);
} 

@media (max-width: 450px) {
	.container {
    padding: 0;
  }
  .content-inner {
    padding: 0.85em;
  }
	.logo img {
	max-width: 170px;
	min-width: 150px;
	height: 100%;
	object-fit: contain;
}
}