@charset "utf-8";  /*** UTF Kodierung erspart Sonderzeichenkodierung ***/

html {height: 101%;  scroll-behavior: smooth;}   /* scroll-behavior: smooth;*/

body {height: 100%;
	margin: 0; padding: 0;
	font-family: 'Noto Sans', sans-serif;
	background: #fff; 
}

/**** link im text ****/

a, a:visited {
color: #06627d;
font-weight: 400;
text-decoration: none;
}
a:hover {
color: #fff;
background-color: #06627d;
text-decoration: none;
}
a:active, a:focus { 
outline: 0; 
}
.skiplink {float: left; margin-left: -600px;} 

img {
border: none;
width: auto;
max-width: 100%;
}

/*************/

#wrapper {
top:0;
position:relative;
padding:0;
margin:0;
width: 100%;
background: #edefed;
}
.header {
position:relative;
top:0;
border-top: 10px solid #fff;
min-height: 180px;
background: #fff;
}
.header h1 {
position: relative;
margin-top: -10px;
padding: 0 0 10px 15px;
font-size: 1.3em;
color: #57493e;
letter-spacing: -0.02em;
font-weight: 300;
}

.headin {
margin-left: auto;
margin-right: auto;
max-width: 980px;
width: 100%;
background: #fff;
}

.logotop {}
.logotop a, .logotop a:visited {
float: none; 
display: block; 
margin: 10px 0 0 15px; 
padding: 10px 5px 0 0; 
text-align: left; 
width: auto;
max-width: 400px; 
color: #026d8f;
font-family: 'Noto Sans', sans-serif;
font-size: 2.7em;
letter-spacing: -0.03em;
font-weight: 400;
background-color: #fff;
}
.logotop a:hover {
color: #57493e;  
font-weight: 400;
text-decoration: none;
background-color: #fff;
}

.language {
margin: 0 3px;
float: right;
padding: 5px 5px;
max-width: 300px;
max-height: 40px;
background: #fff;
font-size: 1.3em;
border: 1px solid #ccc;
}


/********************************/

/** Hamburger-Icon wird in Großansicht ausgeblendet **/
   label.open-menu-label {display: none;}
   input#open-menu {display: none;}
   input[type=checkbox]:checked ~ nav {display: none;}

.menu {
position:relative;
display: block;
margin: 0;
width: 100%;
max-width: 970px;
padding: 15px 0 20px 10px;
border-top: 1px solid #fff;
background: #edefed;
}

nav {text-align: left;}

nav ul {list-style: none; margin:0; padding:0;}
nav > ul > li {display: inline-block; margin: 0; padding: 0; list-style: none; background: none; text-transform: none;}

nav > ul a, nav > ul a:visited  {
	padding: 16px 16px 16px 2px; 
	color: #737d7f; 
	font-size: 1em;
	font-weight: 700;
    text-decoration: none;
	background-color: transparent;
}

nav > ul a:hover {
    padding: 16px 16px 16px 2px; 
    color: #389ab3;
	font-weight: 700;
    text-decoration: underline;
	background-color: transparent;
}
nav > ul a.active {
    color:  #00adc7;
	font-weight: 700;
	font-size: 1em;
    text-decoration: none;
	
}
nav > ul a.active:hover {
    color: #389ab3;
	font-weight: 700;
    text-decoration: underline;
}


/**** Inhalte ****/

.content {
margin: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
max-width: 980px; 
width: 100%;
}
.feature {
position: relative; 
padding: 0;
width: auto;
max-width: 100%;
min-height: 600px;
}

.startbox {diplay: block; min-height: 450px; padding: 30px;}
.startbox p {width: 50%; padding: 0 20px 4% 2%; color: #fff; font-size: 1.3em; line-height: 1.6em; text-align: left;}

.flexcontainer {margin: 0; display: flex; flex-wrap: wrap; justify-content: center;}
.fifty {margin: 0; padding: 0 0 -5px 0; width: 50%;}
.fifty img {display: block; float: left; width: auto; max-width: 100%; padding: 0 0 -5px 0;}

.headline {position: relative; display: block; float: none; margin-top: 14%; margin-left: 15px; background-color: transparent; z-index: 3;}
.headline h1 {text-align: right; padding: 5px 0; margin-bottom: 40px; font-size: 2.1em; color: #026d8f; letter-spacing: -0.02em; font-weight: 400; border-bottom: 1px solid #026d8f;}

h2 { margin: 0 10px; padding: 40px 0 10px 0; color: #026d8f; font-size: 2em; letter-spacing: -0.02em; font-weight: 400; border-bottom: 1px solid #026d8f;}

h3 {
margin: 40px 15px 20px 15px;
padding: 0;
color: #026d8f;
font-size: 1.1em;
letter-spacing: 0;
font-weight: 700;
}

p {
margin: 20px 15px 10px 15px;
font-size: 0.95em;
line-height: 1.4em;
color: #2c3d3e;
} 



ul {
margin: 0 0;
padding: 0;
font-size: 1em;
line-height: 1.5em;
color: #2c3b3e;
}

li {
margin: 10px 0 12px 15px;
padding: 0 0 12px 26px;
list-style: none;
background: url(../img/list_icon.png) no-repeat left top;
}

.hochstellen {vertical-align: super; font-size: 0.7em;}
.info {display: block; float: left; background: transparent; margin: 15px; padding: 10px 20px 5px 20px; text-align: left; border: 0px solid #06627d;}
.iconleft {float: left; padding: 0 20px 0 0;}
.clear {clear: both; display: block; float: none; with: 100%; min-height: 1px;}


/*** footer ***/

.footer {
clear: both;
margin: 0 auto; 
max-width: 980px;
width: 100%;
padding: 10px 0 20px 0;
min-height: 140px;
background: #06627d url(../img/vmodell.png) no-repeat center right; 
border-top: 2px solid #fff;
}
.copyright { 
position: relative; 
margin-left: auto;
margin-right: auto;
max-width: 980px; 
}

.copyright img{ 
max-width: 60px; 
}

.copyright p {
text-align: center;
padding: 0 10px;
color: #9bbdc6;
font-size: 0.95em;
line-height: 1.6em;
}

a.hell, a.hell:visited {
margin: 0;
padding: 0 10px; 
color: #e9eded;
text-decoration: none;
white-space: nowrap;
opacity: 0.7;
}

a.hell:hover {
margin: 0;
padding: 0 10px; 
color: #fff;
text-decoration: underline;
background-color: transparent; 
white-space: nowrap;
opacity: 1;
}


/*****************RESPONSIVE DESIGN ******************************/

@media only screen and (min-width: 991px) and (max-width: 2000px) {
	body { padding: 0 0 60px;}
	.content {padding: 0 0;}
	.feature {padding: 0 0 0 0; margin: 0;}
}

/*		Tablet Layout: 786px. */

@media only screen and (min-width: 601px) and (max-width: 990px) {
	body { padding: 0 0 60px;}
	.logotop {padding-top: 10px;}
	.logotop a, .logotop a:visited {padding-left: 5px; font-size: 2.3em; white-space:nowrap;}
	 .header h1 {padding-left: 19px; font-size: 1.3em;}
     .menu {width: 98%;max-width: 98%;padding: 15px 0 25px 10px;}

	nav > ul a, nav > ul a:visited, nav > ul a:hover, nav > ul a.active, nav > ul a.active:hover {padding: 16px 8px 16px 8px; font-size: 0.95em; font-weight: 700;}
	
	.headline h1 {margin-left: 10px; margin-bottom: 40px; text-align: left; font-size: 1.6em;}

	h2 {margin-left: 10px; font-size: 1.4em; letter-spacing: -0.02em; width: 95%;}
	h3 {padding: 0 5px; font-size: 1.3em;}
	p  {padding: 10px 5px; font-size: 0.95em;}
	ul {margin-left: 30px; padding: 0 10px;font-size: 0.95em;line-height: 1.4em;color: #2c3b3e;}
	li {margin: 8px 0 20px 0; padding: 0 20px 0 20px; list-style: none; background: url(../img/list_icon.gif) no-repeat left top;}
	.info {display: block; float: left;}
}






/*	Mobile Layout: Smartphone 280px und landscape. */

@media only screen and (min-width: 220px) and (max-width: 600px) {
	body { width: 100%; max-width: 600px; padding: 0 0 60px 0;}
	.language {margin: 0 3px; padding: 5px 5px; font-size: 1.1em; border: 1px solid #fff;}
	.logotop {padding: 5px;}
	.logotop a, .logotop a:visited {padding-left: 8px; font-size: 1.9em; white-space:nowrap;}
	.header {min-height: 135px;}
	.header h1 {margin-left: 12px; font-size: 1em; max-width: 280px;}
	
	.menu {display: inherit; float: right; margin: -50px 10px 0 0; padding: 0; width: auto; background: #fff; border: 0;}
	input#open-menu {display: none;}
    input[type=checkbox]:checked ~ nav {display: block; cursor: pointer;}
	
    label.open-menu-label {position: relative; float: right; display: block; margin: 0; cursor: pointer;}
	nav {display: none; position: absolute; padding: 10px 0 20px 0; margin: 52px 0 20px -170px; font-size: 0.95em;  
	      background: #06627d; border-left: 10px solid #06627d; cursor: pointer; z-index:999; transition: all 0.3s ease-in-out;}
	
	nav ul {width: 100%; min-width: 220px;}
    nav ul li { float: none; display: block; margin:0;}
    nav ul a, nav ul a:visited { display: block; color: #fff; border:0;} 
	nav ul a:hover   {color: #ede8e6 !important; padding-left: 5px;} 
	nav ul a.active, nav ul a.active:hover  {display: block; color: #fff;} 
	
	.feature {float: none; padding: 3px 0; margin: 0;}
	.headline h1 {text-align: left; padding-left: 0; font-size: 1.3em; margin-bottom: 20px;}
	h2 {margin-left: 10px; font-size: 1.5em; width: 97%;}
	h3 {padding: 0; font-size: 1.0em;}
	p  {padding: 5px 0; font-size: 0.95em;}
	
	.startbox {diplay: block; min-height: 200px; padding: 20px;}
    .startbox p {width: 100%; padding: 90% 0 0 0; color: #fff; font-size: 1em; line-height: 1.6em; text-align: left;}

	ul {margin-left: 0; padding: 0 10px;font-size: 0.95em;line-height: 1.4em;color: #2c3b3e;}
	li {margin: 8px 0 20px 0; padding: 0 20px 0 20px; list-style: none; background: url(../img/list_icon.gif) no-repeat left top;}
	
	.flexcontainer {}
	.fifty {margin-top:0; float: none; width: 100% !important;}
	.fifty img {margin-top: -2px; float: none; width: auto;}
	
	.info {display: block; float: left;}
	.iconleft {float: left; padding: 0 20px 5px 0;}
    .copyright p {text-align: center; padding: 20px 10px;}
	.footer {min-height: 200px; background: #06627d url(../img/vmodell.png) no-repeat center bottom;}
}