/* ### Schriftarten für die Website ### */

@font-face {
    font-family: Formata;
    src: url('fonts/Formata-Regular.otf') format('opentype');
}

@font-face {
    font-family: Formata;
    font-weight: bold;
    src: url('fonts/Formata-Medium.otf') format('opentype');
}

@font-face {
    font-family: 'FormataSC';
    src: url('fonts/Formata-LightCnSC.otf') format('opentype');
}

/* ### Grundeinstellungen ### */

/* Formatierung der Standardelemente */

body {
	font-family: 'Formata', sans-serif;
	font-size: 16px;
	color: #006caf;
	margin: 0px;
	background-color: #ffffff;
	text-decoration: none;
	font-weight: normal;
	text-align: left;
}

p {text-align: left;
	margin-left: 15px;
	margin-right: 15px;
}

h1 {
	font-family: 'Formata', sans-serif;
	font-size: 30px;
	color: #006caf;
	font-weight: bold;
	text-align: left;
	margin-left: 15px;
}

a {
	color: white;
	text-decoration: none; 
}

hr {
  border-top: 2px solid #ffffff;

}

/* allgemeine Formatierung der Layoutelemente */

#page {
	position: relative;
	left: 0px; 
	margin: 0px;
	padding: 0px;
	width: 100%; 
}

#headline {
	position: fixed;
	display: block;
	left: 0px; 
	top: 0px; 
	margin: 0px;
	padding: 0px;
	width: 100%; 
	background-color: #006caf;
	color: #ffffff;
	text-decoration: none;
	line-height: 120%;
	font-weight: normal;
	font-size: 16px;
	font-family: 'FormataSC', sans-serif;
	z-index: 1;
}

#logo {
	position: relative;
	display: inline-block;
	left: 10px; 
	top: 10px; 
	margin: 0px;
	padding: 0px;
	width: 40%; 
	background-image: url('../img/logo.png');
	background-repeat: no-repeat;
	background-position: top;
	background-size: 100% auto;
}

#whiteline {
	position: relative;
	display: inline-block;
	top: 0px;
	margin: 0px;
	padding: 0px;
	width: 100%; 
}

#claim {
	position: relative;
	display: inline-block;
	left: 0px; 
	top: 7px; 
	margin: 0px;
	padding: 0px;
	width: 99%; 
	color: #ffffff;
	text-decoration: none;
	text-align: right;
	font-weight: normal;
	font-size: 36px;
	font-family: 'FormataSC', sans-serif;
}

.textblock {
	float: none;
	position: relative;
	display: block;
	width: 100%;
}

.textblock2 {
	float: none;
	position: relative;
	display: block;
	height: 1000px;
	width: 100%;
}

.textcontainer {
	float: left;
	display: block;
	width: 50%;
}

.imageblock {
	float: none;
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 2/1;
}

.imagecontainer {
	float: left;
	width: 50%;
	aspect-ratio: 1/1;
	background-image: url('../img/leer.jpg');
	background-repeat: no-repeat;
	background-position: top;
	background-size: 100% auto;
}

/* Input Felder */

.inputs {
	float: left;
	display: block;
	width: 50%;
}

::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

label {
	margin-left: 15px;
	font-size: 12px;
	display: flex;
	flex-direction: column;
}

input, select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	float: left;
	width: 90%;
	font-size: 16px;
	color: white;
	border: 0px;
	border-radius: 3px; 
	margin-top: 2px;
	margin-bottom: 6px;
	padding: 5px;
	background-color: #006caf;
}


/* ### Responsive Design Anpassungen ### */

/* Desktop-Computer */
@media (min-width: 1261px) {
	#headline { height: 170px; }
	#logo { width: 475px; height: 110px; }
	#claim { font-size: 36px; }
	.footer {font-size: 10px; }
	#content { 
		display: block;
		position: fixed;
		left: 0px;
		top: 170px; 
		width: 100%;
		height: 100%;
		overflow-y: scroll;
	}
	#menu-opener { display: none; }
	#menu-collapsed { display: none; }
	#menu-open { display: none }
	#menu { 
		display: block; 
		position: fixed; 
		top: 140px; 
		left: 10px; 
		width: 820px; 
		height: 27px; 
		color: white; 
		z-index: 2;	
	}
	.menu-item { 
		float: left; 
		margin-right: 30px; 
		height: 27px; 
		color: white; 
		font-weight: bold;
	}
	.menu-item:hover {
		border-bottom: 2px solid white; 
	}
}

/* normale laptops */
@media only screen
and (min-width: 1025px)
and (max-width: 1260px) {
	#headline { height: 170px; }
	#logo { width: 475px; height: 110px; }
	#claim { font-size: 36px; }
	.footer {font-size: 10px; }
	#content { 
		display: block;
		position: fixed;
		left: 0px;
		top: 170px; 
		width: 100%;
		height: 100%;
		overflow-y: scroll;
	}
	#menu { display: none; }
	#menu-opener { display: none; }
	#menu-collapsed { 
		display: block; 
		position: fixed; 
		top: 140px; 
		left: 10px;
		width: 200px;
		height: 27px; 
		color: white; 
		font-weight: bold;
		z-index: 2;
	}
	#menu-collapsed:hover { 
		border-bottom: 2px solid white; 
	}
	#menu-open { 
		display: none; 
		position: fixed; 
		top: 170px; 
		left: 10px; 
		width: 200px; 
		color: white;
		background-color: #006caf;
		z-index: 2;	
	}
	.menu-item { 
		float: none; 
		margin-top: 15px; 
		margin-left: 15px; 
		margin-right: 15px; 
		height: 35px; 
		color: white; 
		font-weight: bold;
	}
	.menu-item2 { 
		float: none; 
		margin-top: 15px; 
		margin-left: 15px; 
		margin-right: 15px; 
		height: 35px; 
		color: white; 
		font-weight: bold;
	}
	a:hover {
		text-decoration: underline; 
	}
}

/* iPad mini, iPhone 5s und neuer */
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)  {
	#headline { height: 250px; }
	#logo { width: 475px; height: 110px; }
	#claim { font-size: 48px; top: 15px; }
	.footer {font-size: 16px; }
	#content { 
		display: block;
		position: fixed;
		left: 0px;
		top: 250px; 
		width: 100%;
		height: 100%;
		overflow-y: scroll;
	}
	h1 { font-size: 48px; }
	p { font-size: 28px; }
	.textblock2 { height: 2000px; }
	.textcontainer {width: 100%; }
	.imageblock { aspect-ratio: 1/2; }
	.imagecontainer {width: 100%; }
	.inputs { width: 100%; }
	label { font-size: 28px; }
	input, select { 
		font-size: 48px; 
		border-radius: 10px; 
		margin-top: 4px;
		margin-bottom: 12px;
		padding: 10px;}

	#menu-opener { 
		display: block; 
		position: fixed; 
		top: 140px; 
		left: 10px; 
		height: 100px;
		width: 100px;
		border-radius: 10px;
		background-color: white;

		z-index: 2;	
	}
	#menu-collapsed { display: none; }
	#menu { display: none; }
	#menu-open { 
		display: none; 
		position: fixed; 
		top: 250px; 
		left: 10px; 
		width: 500px; 
		color: white;
		background-color: #006caf;
		z-index: 2;	
	}
	.menu-item { 
		float: none; 
		margin-top: 35px; 
		margin-left: 15px; 
		margin-right: 15px; 
		height: 80px; 
		color: white; 
		font-size: 48px;
		font-weight: bold;
	}
	.menu-item2 { display: none; }
}

/* Samsung mit Android 2.x */
@media only screen 
and (min-width : 375px) 
and (max-width : 812px) {
	#headline { height: 250px; }
	#logo { width: 475px; height: 110px; }
	#claim { font-size: 48px; top: 15px; }
	.footer {font-size: 16px; }
	#content { 
		display: block;
		position: fixed;
		left: 0px;
		top: 250px; 
		width: 100%;
		height: 100%;
		overflow-y: scroll;
	}
	h1 { font-size: 48px; }
	p { font-size: 28px; }
	.textblock2 { height: 2000px; }
	.textcontainer {width: 100%; }
	.imageblock { aspect-ratio: 1/2; }
	.imagecontainer {width: 100%; }
	.inputs { width: 100%; }
	label { font-size: 20px; }
	input, select { 
		font-size: 32px; 
		border-radius: 10px; 
		margin-top: 4px;
		margin-bottom: 12px;
		padding: 10px;}

	#menu-opener { 
		display: block; 
		position: fixed; 
		top: 140px; 
		left: 10px; 
		height: 100px;
		width: 100px;
		border-radius: 10px;
		background-color: white;

		z-index: 2;	
	}
	#menu-collapsed { display: none; }
	#menu { display: none; }
	#menu-open { 
		display: none; 
		position: fixed; 
		top: 250px; 
		left: 10px; 
		width: 500px; 
		color: white;
		background-color: #006caf;
		z-index: 2;	
	}
	.menu-item { 
		float: none; 
		margin-top: 35px; 
		margin-left: 15px; 
		margin-right: 15px; 
		height: 80px; 
		color: white; 
		font-size: 48px;
		font-weight: bold;
	}
	.menu-item2 { display: none; }
}

/* ältere Smartphones*/
@media only screen 
and (min-width : 375px) 
and (max-width : 667px) {
	#headline { height: 240px; }
	#logo { width: 425px; height: 100px; }
	#claim { font-size: 40px; top: 15px; }
	.footer {font-size: 16px; }
	#content { 
		display: block;
		position: fixed;
		left: 0px;
		top: 240px; 
		width: 100%;
		height: 100%;
		overflow-y: scroll;
	}
	h1 { font-size: 48px; }
	p { font-size: 28px; }
	.textblock2 { height: 2000px; }
	.textcontainer {width: 100%; }
	.imageblock { aspect-ratio: 1/2; }
	.imagecontainer {width: 100%; }
	.inputs { width: 100%; }
	label { font-size: 20px; }
	input, select { 
		font-size: 32px; 
		border-radius: 10px; 
		margin-top: 4px;
		margin-bottom: 12px;
		padding: 10px;}

	#menu-opener { 
		display: block; 
		position: fixed; 
		top: 130px; 
		left: 10px; 
		height: 100px;
		width: 100px;
		border-radius: 10px;
		background-color: white;

		z-index: 2;	
	}
	#menu-collapsed { display: none; }
	#menu { display: none; }
	#menu-open { 
		display: none; 
		position: fixed; 
		top: 240px; 
		left: 10px; 
		width: 500px; 
		color: white;
		background-color: #006caf;
		z-index: 2;	
	}
	.menu-item { 
		float: none; 
		margin-top: 35px; 
		margin-left: 15px; 
		margin-right: 15px; 
		height: 80px; 
		color: white; 
		font-size: 48px;
		font-weight: bold;
	}
	.menu-item2 { display: none; }
}