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

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

body {
    height: 100%;
	min-height: 100vh; 
	margin: 0; padding: 0;
	background: #F5F5DC;
	font-family: 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
}

img {
border: none;
width: auto;
max-width: 78%;
animation:fadein 1s;           /* weiches einblenden */
}

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

a, a:visited {
color: #000;
font-weight: normal;
text-decoration: underline;
padding: 6px 4px; 
}

a:hover {
color: #000;   /*** #293f5e; ***/
font-weight: normal;
text-decoration: none;
background: #d8e6f7;
transition: background 0.5s ease;           /* weiches einblenden */
}

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

/********/

#wrapper {
position:relative;
margin:0;
width: 100%;
background: #fff;
}

.header {
position:relative;
width: 100%;
background: #799ecc;
min-height: 120px;
border-bottom: 10px solid #fff;
}
.headin {
position:relative;
margin-left: auto;
margin-right: auto;
float: none;
max-width: 980px;
text-align: center;
}

.headin p{
padding: 10px 0 20px 0;
color: #fff;
font-weight: normal;
font-size: 1.4em; 
text-align: center;
letter-spacing: 0.05em;
}



.logotop{
diplay: block;
padding: 30px 10px 10px 10px;
max-width: auto;
font-size: 2.3em;
color: #fff;
font-weight: normal;
text-align: center;
}
.logotop a:link, .logotop a:visited{
color: #fff;
background:0;
text-decoration: none; 
}

.logotop a:hover {
color: #000;
background:0;
transition: color 0.8s ease;  
}

.content{
clear: both;
position: relative;
width: 100%;
padding-bottom: 30px;
animation:fadein 0.6s;           /* weiches einblenden */
-moz-animation:fadein 1.0s;
-webkit-animation:fadein 0.5s;
}

.content2{
clear: both;
position: relative;
padding: 20px 0 60px 0;
width: 100%;
background: #d8e6f7;
animation:fadein 0.6s;           /* weiches einblenden */
-moz-animation:fadein 1.0s;
-webkit-animation:fadein 0.5s;
}

.feature {
position:relative;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0; 
width: 100%;
max-width: 980px;
padding: 0;
text-align: center;
}

h1, h2, h3, h4 {font-family: 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;}

h1, h2 {
margin: 0;
padding: 20px 10px 10px 0;
font-size: 1.5em;
color: #799ecc; 
text-transform: none;
z-index: 999;
font-weight: normal;
}

h3 {
margin: 0;
padding: 25px 10px 10px 0;
font-size: 2em;
color: #799ecc; 
text-transform: none;
z-index: 999;
font-weight: normal;
}

h4 {
margin: 0;
padding: 25px 10px 10px 0;
font-size: 1.2em;
color: #799ecc; 
text-transform: none;
z-index: 999;
font-weight: bold;
}


p {
margin: 0;
padding: 15px 5px;
font-size: 1em;
line-height: 1.7em;
color: #2f3d43;
font-weight: 400;
}

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

.feature ul { margin: 10px 20px; padding: 0;} 
.feature li {
margin: 0 0 10px 60px;
padding: 0;
font-size: 0.95em;
line-height: 1.6em;
color: #2f3d43;
list-style-type: disc;
} 

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

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

em {font-style: italic;}

.alignleft {float: none; text-align: left !important;}
.alignright {float: right; padding: 0 0 0 35px;}
.alignnone {float: none; padding: 0;}
.clear {clear: both;}

iframe {margin: 15px 0; width: 94%; height: 100%; min-height: 550px; border:0;} 


/**** footer ****/

.footer {
clear: both;
position: relative;
float: none;
margin: 0 0;
padding: 30px 0 40px 3%;
width: 97%;
min-height: 5em;
text-align: center;
color: #f1edea;
font-size: 0.95em;
background: #333;  /* #333; */
border-top: 1px solid #fff;
}

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

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

.topbutton {float: right; padding: 10px; margin: 0 30px 0 0; background: #799ecc; border: 1px solid #333; border-radius: 24px; }



/** 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;}}


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



/*		alle Größen */

@media only screen and (min-width: 601px) and (max-width: 2200px) {

}


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

@media only screen and (min-width: 320px) and (max-width: 600px) {
    
	body {width: 100%; min-width: 280px; padding: 0 0 60px 0;}
	img {width: auto; max-width: 76%; max-height: auto;}
	.header {min-height: 5em;}
	.logotop {font-size: 1.5em;}
	.inhalt {min-height: auto;}
	.fifty {margin: 10px 0 0 0; text-align: center; width: 95%; max-width: 95%; height: auto;}
    h1, h2 {padding: 15px 10px; font-size: 1.7em;}
	h3 {padding: 15px 10px; font-size: 1.6em;}
	.feature li { margin: 0 0 10px 20px; hyphens: auto;}
	 p {padding: 10px; font-size: 0.9em; line-height: 1.5em; hyphens: none;}
	.alignleft {float: none; padding: 10px; hyphens: auto;}
	.footer {line-height: 2em; text-align: center;}
	.topbutton {float: none; padding: 10px; margin: 30px 60px 30px 60px; }

}