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

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

body {
    height: 100%;
	min-height: 100vh; 
	margin: 0; padding: 0;
	font-family: 'Literata', serif;
	
}

img {
border: none;
width: auto;
max-width: 100%;
max-height: 800px;
animation:fadein 0.8s;           /* weiches einblenden */
}

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

a, a:visited {
color: #039de8;
font-weight: 600;
text-decoration: none;
}

a:hover {
color: #979149;    /***  #cf8b4d;   #294052; ***/
font-weight: 600;
text-decoration: none;
}

a:active, a:focus { 
outline: 0; 
}


#wrapper {
position:relative;
margin:0;
padding: 0 0 40px 0;
width: 100%; 
min-height: 100%;   
background: #294052 url("../img/hg_welle.jpg") repeat-y top center fixed;
background-size: contain;
}

.top {height: 30px; width: 100%; background: rgb(19,77,124);
background: linear-gradient(90deg, rgba(19,77,124,1) 34%, rgba(3,157,232,1) 100%);}


.header {
position:relative;
padding: 0;
margin:0; 
width: 100%;
background: #fff;
}

.headin {
position:relative;
float: none;
margin-left: auto;
margin-right: auto;
padding-top: 40px;
min-height: 80px;
max-width: 1000px;
}

.logotop{
float: left;
display: block;
padding: 20px 0 0 15px;
max-width: auto;
font-size: 1.4em;
}

.logotop a, .logotop a:visited{
color: #134d7b;
font-weight: 700;
}

.logotop a:hover{
color: #039de8;
font-weight: 700;
}


/** 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 {
float: right;
display: block;  /** display: block; **/
margin: 16px 0 0 0;
padding: 0 0 0 0;
line-height: 1.8em;
max-width: 600px;
}

nav {float: right;}

nav ul { float: none; list-style: none; margin: 0; padding:0;}
nav > ul > li { float: left; font-family: 'Literata', serif; font-weight: 300;}

nav > ul a, nav > ul a:visited  {
    display: block;
    margin: 0 8px;
	padding: 6px 9px; 
    color: #134d7b;
	font-size: 1.2em;
	font-weight: 400;
    text-decoration: none;
	border: 1px solid #fff;
}

nav > ul a:hover {
    color: #039de8;
	font-weight: 400;
    text-decoration: none;
}
nav > ul a.active {
	color: #039de8;
	border: 1px solid #039de8;
}

nav > ul a.active:hover {
	color: #039de8;
	border: 1px solid #039de8;
}


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

.content{
clear: both;
position: relative;
padding: 0 0 10px 0;
width: 100%;
background: #f8f3f0;
border-bottom: 5px solid #fff;
}

.feature {
position:relative;
margin: 0 auto;
padding: 30px 5px 30px 15px;
max-width: 990px;
min-height: 500px;
animation:fadein 0.5s; 
}


h1, h2, h3, h4 {font-family: 'Literata', serif; letter-spacing: 0;}

h1 {
margin: 0;
padding: 15px 0;
font-size: 2.1em;
color: #0099eb;
text-transform: none;
font-weight: 300;
line-height: 1.6em;
}

h2 {
margin: 0;
padding: 30px 0 5px 0;
font-size: 1.3em;
color: #134d7c;
text-transform: none;
font-weight:700;
}

h3 {
margin: 0;
padding: 20px 0 0 0;
font-size: 1.1em;
color: #134d7c;
font-weight: 700;
}

p {
margin: 0;
padding: 15px 0;
font-size: 0.95em;
line-height: 1.6em;
color: #294052;
font-weight: 400;
hyphens:inherit;
}

.regular {font-size: 1.5em; letter-spacing: 0;}
.halbfett {font-size: 1.5em; letter-spacing: 0;}
.fett {font-weight: 700; letter-spacing: 0;}

.feature ul { margin: 25px 5px 25px 25px; padding: 0; list-style-image: url("../img/dot.png");} 
.feature li {
margin: 0 0 10px 0;
padding: 0;
font-size: 0.95em;
line-height: 1.5em;
color: #2f3d43;
} 
table {margin: 20px 0; background: transparent; border-top: 3px solid #fff; border-collapse:collapse;}
tr {vertical-align: top;}
td {padding: 10px 0; border-bottom: 3px solid #fff; }

.flexcontainer {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin: 0;
}

.fifty {margin: 0 2% -5px 0; padding: 0; width: 48%;}

.sixty {margin: 20px 3% 20px 0; padding: 0; width: 59%;}
.fourty {margin: 0 2% 0 0; padding: 0; width: 36%;}

.button {float: none; display: block; margin: 25px 0;}
.button a, .button a:visited {padding: 15px 20px; text-align: center; width: 90%; max-width: 260px; height: 30px; background: #039de8; color: #fff;  font-weight: 700; border-radius: 30px;}
.button a:hover {background: #979149; color: #fff;  font-weight: 700;}

strong {font-weight: 700; letter-spacing:0em;}
em {font-style: italic;}

.alignleft {float: left; padding: 0 35px 3px 0;}
.alignright {text-align: right; padding: 0;}
.alignnone {float: none; text-align: center; width: 100%; padding: 0;}
.clear {clear: both;}


/************** startseite *********************/

h1.start {
text-align: left; 
margin: 0;
padding: 20px 0 0 0;
font-size: 3.3em;
color: #0099eb;
font-weight: 300;
line-height: 1.1em;
}

h2.start {text-align: left;}

.startbutton {}
.startbutton a, .startbutton a:visited {float: none; display: block; margin: 15px 5px; padding: 15px 5px 10px 20px; text-align: left; width: 95%; min-height: 30px; background: #039de8; color: #fff; border-radius: 30px; font-weight: 700;}
.startbutton a:hover {background: #979149; color: #fff;  font-weight: 700;}

/************** startseite *********************/



/**** footer ****/

.footer {
clear: both;
position: relative;
float: none;
margin: 0 auto 20px auto;
padding: 25px 1%;
max-width: 1000px;
width: 98%;
min-height: 30px;
text-align: center;
color: #ecebf3;
line-height: 2em;
font-size: 0.9em;
background: #293f51;  
opacity: 0.9;
}

.footer a{
 color: #ecebf3;
 padding: 0 5px;
 font-weight: 400;
 white-space: nowrap; 
}

.footer a:hover{
color:#FFF;
padding: 0 5px;
text-decoration: underline; 
}

.topbutton {clear: both; display: block; max-width: 100px; padding: 5px 10px; margin: 20px auto 10px auto; background: #419bc9; border: 1px solid #419bc9; border-radius: 24px; opacity: 1; }



/** weiches Einblenden der Seiten und Bilder **/

@keyframes fadein{from{opacity:0;}to{opacity:1;}}
@-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}
@-webkit-keyframes fadein{from{opacity:0;}to{opacity:1;}}
@-o-keyframes fadein{from{opacity:0;}to{opacity:1;}}


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

/*		große Monitore */

@media only screen and (min-width: 811px) and (max-width: 1980px) {
body {width: 100%; min-width: 811px; padding: 0 0 0 0;}
}

/*		landscape smartphones und notebooks */

@media only screen and (min-width: 601px) and (max-width: 810px) {
body {width: 100%; min-width: 601px; padding: 0 0 40px 0;}
.headin {padding-top: 0px; min-height: 110px; margin-bottom: 60px;}
.logotop {font-size: 1.4em; float: none;}

.menu {float: left; display: block; margin: 10px 0 0 0; line-height: 1.8em; max-width: 700px;}
nav {float: right;}
nav > ul a, nav > ul a:visited  {margin: 0 10px; padding: 4px 8px; font-size: 1em;}

h1.start { font-size: 2em; hyphens: auto;}
.startbutton a, .startbutton a:visited {margin: 15px 5px; padding: 15px 5px; text-align: center; width: 90%; min-height: 30px; color: #fff; border-radius: 12px;}

p {font-size: 0.9em;  hyphens: auto; }
.footer {margin-top: 30px; width: 98%; line-height: 2.2em; text-align: center;} 
}




/*	Mobile Layout: 320px / 480px / 600px Smartphones  */

@media only screen and (min-width: 200px) and (max-width: 600px) {
    
	body {width: 100%; min-width: 200px; padding: 0 0 60px 0;}
	#wrapper {background: #294052 url("../img/hg_wellemobil.jpg") repeat-y top center fixed; background-size: contain;}
	img {width: auto; max-width: 100%; max-height: auto;}
	.top {background: transparent; }
	.headin {padding-top: 40px; min-height: 70px;}
	.logotop {font-size: 1.2em;}
	
	.fifty, .sixty, .fourty {float: none; margin: 10px 0 0 0; text-align: left; width: 100%; max-width: 100%; height: auto;}
	
	.startbutton a, .startbutton a:visited {padding: 15px 5px; text-align: center; width: 90%; max-width: 90%; min-height: 30px; background: #039de8; color: #fff; border-radius: 30px; font-weight: 700;}
	.startbutton a:hover {background: #979149;}
 
     h1  {padding: 15px 0; font-size: 1.8em;}
	 h2  {padding: 15px 0; font-size: 1.3em;}
	 h1.start {padding: 0; font-size: 2em; hyphens: auto;}
	 h2.start  {padding: 15px 0; font-size: 1.2em;}
	 p {font-size: 1em; line-height: 1.8em; hyphens: auto;}
	 .feature li { margin: 0 0 10px 10px; hyphens: inherit;}
	.alignleft {float: none; padding: 0;}
	.footer {margin-top: 40px; width: 98%; line-height: 2.2em; text-align: center;}
	.topbutton {margin-top: 30px; float: none;}
	
	.menu {display: inherit; float: right; margin: 0; padding: 0; width: auto; min-height: auto;}
	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: 55px 0 20px -160px; font-size: 0.95em;  
	      background: #134d7c; border-left: 10px solid #134d7c; cursor: pointer; z-index:999; transition: all 0.3s ease-in-out;}
	
	nav ul {width: 100%; min-width: 200px;}
    nav ul li { float: none; display: block; margin:0;}
    nav ul a, nav ul a:visited { display: block; padding: 10px 0; color: #fff; border:0;} 
	nav ul a:hover   {color: #ede8e6 !important;} 
	nav ul a.active, nav ul a.active:hover  {display: block; padding: 3px 0; color: #fff; 
	border-top: 0; border-bottom: 3px solid #039de8; border-left: 0; border-right: 0;} 
}