@charset "utf-8"; 
html { height: 101%; }

/* ubuntu-regular - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/ubuntu-v20-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/ubuntu-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* ubuntu-700 - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/ubuntu-v20-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/ubuntu-v20-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v34-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('../fonts/open-sans-v34-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v34-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}



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

body{
	margin: 0;
	padding: 0;
	font-family: 'Ubuntu', 'Open Sans', Verdana, sans-serif; 
	background: #2d98bd url(../images/hg.jpg) repeat-x fixed;
}

/*** allgemeine Verweise und Anker ***/

a:focus {outline:none;}

a:link, a:visited{
	color: #CC3333;
	text-decoration: none;
	font-weight: bold;
	padding: 0 4px; 
	margin-left: 4px; 
	background: #dcf4fc;
}

a:hover{
    color: #FF3333;
	text-decoration: underline;
	font-weight: 700; 
}

img { border: none;}
strong {font-weight: 700;}

/************ inhalt = wrapper ***********/

#wrapper {
    position: relative;
    margin-top: 40px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	text-align: left;
	width: 97%;
	max-width: 1100px;
	min-height: 700px;
	}	
#header{
	position: relative;
	top: 0;
	margin:0;
	min-height: 380px;
	background: top center repeat-y fixed; 
	background-size: 100% auto;
	border: 2px solid #fff;	
	-webkit-border-top-left-radius: 14px;
    -webkit-border-top-right-radius: 14px;
    -moz-border-radius-topleft: 14px;
    -moz-border-radius-topright: 14px;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}
#headerbild{
display: none;
}
#language {
margin: -20px 0 0 0;
padding: 0;
height: 40px;
max-width: auto;
}
#language img{
float: right; 
width: auto;
padding: 6px;
margin: 0 9px;
background: #146f8a; 
}

#language a, a:hover{
background: transparent;
}

#logo{
position: relative;
margin: 15% 0 0 0;
float: right;
}
#logo img{
width: auto;
}

.wrap2{
	margin:0;
	height: auto;
	background: transparent;
	}
	
.content{
    float: left;
	height: auto;
	width: 67%;
	background: #dcf4fc;
	border: 6px solid #fff;
	-webkit-border-bottom-right-radius: 14px;
    -webkit-border-bottom-left-radius: 14px;
    -moz-border-radius-bottomright: 14px;
    -moz-border-radius-bottomleft: 14px;
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 14px;
}

.rechts {
float: right;
width: 32%;
min-height: 300px;
margin: 0 0 30px -6px;
padding: 0;
background: #055b74 url(../images/fusslogo.png) no-repeat right bottom;
-webkit-border-bottom-right-radius: 14px;
    -webkit-border-bottom-left-radius: 14px;
    -moz-border-radius-bottomright: 14px;
    -moz-border-radius-bottomleft: 14px;
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 14px;
}
.rechts p {
padding: 10px 8px 10px 15px;
font-size: 0.85em;
color: #fff;
line-height: 1.5em;
font-family: 'Open Sans', Verdana, sans-serif; 
}
.rechts img { 
float: left;
margin: 0 0 0 0;
width: 100%;
height:auto; 
border-top: 6px solid #fff;
border-bottom: 8px solid #fff;
}

.facebook {padding: 20px 0 0 10px; display: block;}

/*** Navigation ****/

#navi{
float:left;
margin: 30px 0 0 0;
padding:0;
font-size: 1em;
font-weight: normal;
line-height: 1.6em;
font-family: 'Open Sans', Verdana, sans-serif; 
}
#navi ul{
list-style: none;
margin: 0;
padding: 0;
height: auto;
}
#navi li{
margin: 0;
}
#navi li a {
display: block;
margin: 0 -2px 0 0;
padding: 3px 0 3px 16px;
font-weight: normal;
color: #005f79;
text-decoration: none;
border-bottom: 1px solid #fff;
min-width: 160px;
background: #dcf4fc;
}
#navi li a:hover{
color: #0083AA;
font-weight: normal;
background: #b8e7f3;
}
#navi a.aktiv, a.aktiv:visited{
padding: 3px 0 3px 16px;
font-weight: bold;
color: #005f79;
background: #fff;
border-bottom: 1px solid #fff;
}
#navi a.aktiv:hover{
font-weight: bold;
color: #E20031;
background: #fff;
border-bottom: 1px solid #fff;
}


/*** Text und Innenteil ***/
.feature{
    margin-left: 200px;
	padding: 10px 20px 10px 0;
	color: #003366;
	min-height: 600px;  
}

.feature p{
    margin: 10px 0 5px 0;
    padding:0;
	font-size: 0.9em;
	line-height: 1.4em;
	font-family: 'Open Sans', Verdana, sans-serif; 
}
.feature img{
	margin: 0;
}
.feature ul {
    margin: 0 20px 20px 40px;
    padding:0;
	font-size: 0.9em;
	line-height: 1.6em;
	font-family: 'Open Sans', Verdana, sans-serif; 
}
.feature li {
margin:0;
padding:0;
}

h1{
 margin: 20px 10px 20px 0;
 font-size: 1.5em;
 color: #003366;
 line-height: 1.3em;
 letter-spacing: -0.01em;
 font-weight: 400;
 font-family: 'Ubuntu', Verdana, sans-serif; 
}
h2{
 margin: 22px 0 6px 0;
 font-size: 1.1em;
 color: #003366;
 line-height: 1.4em;
 font-weight: 700;
 font-family: 'Ubuntu', Verdana, sans-serif; 
}
h3{
   margin:0;
   padding: 20px 10px 2px 10px;
   font-size: 1em;
   color: #fff;
   line-height: 1.8em;
   font-weight: 700;
   background-color: #d50636;
   font-family: 'Ubuntu', Verdana, sans-serif; 
}
h4{
   margin:0;
   padding: 0;
   line-height: 0.1em;
}
.name {
font-weight: bold;
color: #CC3333; 
}



/************** unten footer  ***************/
#footer{
	clear: both; margin:0; min-height: 140px; 
}
a.anker, a.anker:visited{
	text-decoration: none;
	float: left;
}
a.anker:hover{
	text-decoration: none;
	float: left;
}

/*****************RESPONSIVE DESIGN ***************************************************/
/*		PC Layout: ab 900px.   */

@media only screen and (min-width: 901px) and (max-width: 1960px) {
	
	body {
		padding: 0 0 60px;
	}
	#header {
	position: relative;
	margin:0;
	min-height: 380px;
	background: top center repeat-y fixed; 
	background-size: 1120px auto;
}
	
}



/*		Tablet Layout: 768px. */

@media only screen and (min-width: 641px) and (max-width: 900px) {
	
	body {
	    width: 100%;
		max-width: 860px;
		padding: 0 0 60px;
	}
	#navi { float: left; display: block; max-width: 140px; margin-left: 0; padding: 0;} 
	#navi li a, a:hover, #navi a.aktiv, a.aktiv:visited { padding: 3px 0 3px 3%;}
	.content { float: none; display: block; margin-left:0; width: auto;}
	.feature { float: none; display: block; margin-left:160px; padding: 10px 1% 20px 3%;}
	.rechts { float: none; margin: 20px 0; padding:0 0 40px 0; width: 100%; min-height: 100px;}
	.rechts p { padding-left: 4%;}
	.rechts img { float: left; max-width: 360px; margin: 0; border: 15px solid #055b74; }
	h3 { line-height: 1em; margin:0; padding-left: 20px;}
}


/*		Wide Mobile Layout: 480px. */

@media only screen and (min-width: 481px) and (max-width: 640px) {
	
	body {
	width: 100%;
	max-width: 610px;
	padding: 0 0 60px 0;
	}
	#header{ margin:0;min-height: 260px;}
	#logo img {max-width: 220px;}
	#navi { float: none; display: block; width: 100%; margin-left: 0; padding: 0;} 
	#navi li a, a:hover, #navi a.aktiv, a.aktiv:visited { padding: 3px 0 3px 3%;}
	.content { float: none; display: block; margin-right:0; width: auto;}
	.feature { float: none; display: block; margin:0; padding: 10px 1% 20px 3%;}
	.rechts { float: none; margin: 20px 0; padding:0 0 40px 0; width: 100%;}
	.rechts p { padding-left: 4%;}
	.rechts img { width: 100%; margin: 0 0 10px 0;}
	alignleft, alignright {float: none; display: block;}
	h3 {margin:0; padding-left: 4%;}
	
}



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

@media only screen and (min-width: 280px) and (max-width: 480px) {
	  
	body {
		width: 100%; max-width: 470px; padding: 0 0 60px 0;
	}
	#header{ margin:0;min-height: 160px;}
	#logo img {max-width: 170px;}
	#navi { float: none; display: block; width: 99.5%; margin-left: 0; padding: 0;} 
	#navi li a, a:hover, #navi a.aktiv, a.aktiv:visited { padding: 3px 0 3px 3%;}
	.content { float: none; display: block; margin-right:0; width: auto;}
	.feature { float: none; display: block; margin:0; padding: 10px 1% 20px 3%;}
	.rechts { float: none; margin: 20px 0; padding:0 0 40px 0; width: 100%;}
	.rechts p { padding-left: 3%;}
    .rechts img { width: 100%; margin: 0;}
	alignleft, alignright {float: none; display: block;}
	h1 {font-size: 1.2em;}
	h3 {margin:0; padding-left: 3%;}
}