/* roboto-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */
  src: url('fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/roboto-v30-latin-500.eot'); /* IE9 Compat Modes */
  src: url('fonts/roboto-v30-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-500.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */
  src: url('fonts/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/roboto-v30-latin-900.eot'); /* IE9 Compat Modes */
  src: url('fonts/roboto-v30-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-900.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-900.svg#Roboto') format('svg'); /* Legacy iOS */
}

 
/* Demo */
 html {background-position: top center; } /* */

/* Main */
* {padding: 0; margin: 0; box-sizing: border-box; outline: none; font-family: 'Roboto'; }
body {overflow-y: scroll;}
body {display: flex; justify-content: center; align-items: flex-start; height: 100vh;	min-height: 100vh; margin: 0; padding: 0; background-color: #eee; overflow-y: scroll; }
main {display: flex; width: 100%; max-width: 1400px; min-height: 100%; }
aside {width: 300px; background-color: #246aa0; flex-shrink: 0; padding-left: 60px; padding-right: 60px; }
section {flex-grow: 1;  color: #111; background-color: #fff;}

article {padding-left: 100px; padding-right: 100px; padding-top: 80px; padding-bottom: 100px;}
article {  background: #fff;  }
h1 {font-size: 41px; line-height: 120%; font-weight: 900; padding-bottom: 30px;}
h2 {font-size: 32px; line-height: 130%; font-weight: 900; padding-top: 20px; padding-bottom: 30px;}
h3 {font-size: 24px; line-height: 130%; font-weight: 900; padding-top: 20px; padding-bottom: 30px;}
p {font-size: 21px; line-height: 150%;  padding-bottom: 20px;}
header {min-height: 300px; background-size: cover; background-position: center center; text-align: right;}
.button {	padding: 8px 16px;	background-color: #246aa0;	color: #fff;	border-radius: 8px;	cursor: pointer;	text-decoration: none;	padding: 10px 20px;	margin-right: 10px;	margin-bottom: 10px; display: inline-block; line-height: 110%; }
.button:hover {	background-color: #1d537c;}

#lnav {display: inline-block; padding: 10px;}
#lnnav img {width: 50px; margin-right: 10px; margin-top: 10px; }
#lnnav a img {opacity: 0.5;}
#lnnav a.current img {opacity: 1;}
nav ul, nav li {list-style: none; list-style-type: none; padding: 0; margin: 0;}
#mainnav a {font-size: 30px;  display: inline-block; color: #fff; text-decoration: none; padding-bottom: 10px;}
#mainnav a:hover {color: #111;}
#mainnav li.current a{color: #222;}

#meta a {font-size: 16px;  display: inline-block; color: #fff; text-decoration: none; padding-bottom: 10px;}
#meta a:hover {color: #111;}


#social a {font-size: 30px;  display: inline-block; color: #fff; text-decoration: none; padding-bottom: 10px;}
#social a:hover {color: #111;}
#social img {width:50px; margin-right: 15px;}
#social {margin-bottom: 100px;  display: block;}

#logo {margin-bottom: 100px; display: block; margin-top: 50px;}
#mainnav {margin-bottom: 100px;  display: block;}

#navswitch {display: none;}


.page1 section {background-color: #0e161c; color: white; }
.page1 article {  background: linear-gradient(to bottom, rgba(14, 22, 28, 0) 0%, rgba(14, 22, 28, 1) 100px, rgba(14, 22, 28, 1)); margin-top: -150px; padding-top: 100px; }
.page1 header {min-height: 800px; }

article a {color: #246aa0;}
article a:hover {color: #e50046;}
article p img {max-width: 100%;}
p.copy {font-size: 14px; color: #777; padding-top: 50px; text-align: right;}
span.copyright  {font-size: 14px; color: #777;  text-align: right; display: block;}
.navbg {display: none;}

@media screen and (max-width: 900px) { 
	body {background-color: #fff;}
	.page1 main {background-color: #0e161c;}
	.page1 header {min-height: 400px;}
	main {display: block;}
	aside {display: block;}
	section {display: block;}
	aside {position: fixed; top: 0px; bottom: 0px; left: -290px;  transition:  left 300ms; padding: 30px; }
	article {padding-left: 30px; padding-right: 20px;}
	#navswitch {width: 50px; position: fixed; top: 15px; left: 20px; display: block; z-index: 100; cursor: pointer;}
	.cls-1 {fill: #fff; }
	.navbg {background-color: #246aa0;  position: fixed; top: 0px; height: 70px; width: 90px; left: 0px; display: block; z-index: 9; border-bottom-right-radius: 8px;}
	.navopen aside {left: -10px; transition: left 300ms; }
	#logo img {width: 150px;}
	#logo {margin-bottom: 30px;}
	#mainnav {margin-bottom: 30px;}
	#social {margin-bottom: 30px;}
	#meta {margin-bottom: 30px;}
}


form label {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding-right: 20px;
  min-width: 240px;
  display: inline-block;
  vertical-align: top;
}
form input.anm {
  border: 1px solid #aaa;
  width: 100%;
  max-width: 500px;
}
form input {
  padding: 8px 16px;
}
form button {
  padding: 8px 16px;
}
form input[type="checkbox"] {
  /* Doppelte Größe der Checkboxen */
  transform: scale(1.5);
  /* Optional: Hinzufügen von etwas Abstand, um die größeren Checkboxen voneinander zu trennen */
  margin-right: 10px;
}
form button {
  padding: 8px 16px;
}
form select {
  padding: 8px 16px;
  background-color: #fff;
  border: 1px solid #aaa;
  width: 100%;
  max-width: 500px;
}
table {padding: 0; margin: 0;}

input, select, option, td {font-size: 21px;}
.filled {
	border: 1px solid #fff ! important; transition: all 500ms;
}
.filled:hover {
	border: 1px solid #aaa ! important; transition: all 500ms;
}
.unfilled {
	border: 1px solid #f00 ! important; background-color: rgba(255,0,0,0.1); transition: all 500ms;
}
.unfilled:hover {
	border: 1px solid #aaa ! important; transition: all 500ms;
}

article a.button:hover {color: #fff ! important;}