@charset "utf-8";


/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}


/********************************************
   ALLGEMEIN
********************************************/ 
* {margin:0;padding:0;border:0;}

html {overflow-y:scroll;}
html, body {}
body {background-color:#ccc; color:#333;text-align:left;}
*:first-child+html body {}
*html body {overflow:auto;}

p {margin-bottom:10px;}
h1, h2, h3 {color:#336699;font-weight:normal; text-transform:uppercase;}
h3 {text-transform:none;}
a  {color:#333;text-decoration:none;}
a:hover {text-decoration:underline;}
ul {list-style-type:none}

/********************************************
   SCHRIFTGRÖSSEN
********************************************/ 
body {font:18px/24px 'Roboto', sans-serif;}
#nav ul li a{font-size:20px;letter-spacing: 0.05em;}
#kontaktbox {font-size:20px;}
#imp ul li a{font-size:16px;letter-spacing: 0.05em;}
h1 {font-size:25px; line-height:30px;margin-bottom:20px;letter-spacing: 0.05em; }
h2 {font-size:18px; line-height:24px;margin:30px 0 5px 0;letter-spacing: 0.05em; }
h3 {font-size:18px; line-height:24px;}
#footertxt {font-size:16px;}

/********************************************
   SCHRIFTFORMATIERUNG
********************************************/ 
#nav ul li a{color:#336699; text-transform:uppercase}
#kontaktbox {color:#cc3333; text-transform:uppercase}
#imp ul li a{color:#336699; text-transform:uppercase}

/********************************************
   KLASSEN
********************************************/ 
.flre{float:right; margin:0 0 0 10px;}
.col {color:#336699;}
.col_rot {color:#cc3333;}

/********************************************
   LAYOUT
********************************************/ 
#wrap {width:1900px;}
#top{position:relative; display:block;background-color:#fff;}
#kontaktbox {float:right;margin-right:2%; margin-top:20px;}
#nav {margin-left:25%;border-top:4px solid #336699;overflow:auto; }
#header{background-color:#fff;}
#btn-start{background: url(../img/btn_start.png) no-repeat; background-size: contain; position:absolute;top:-150px;right:10%;width:15%;z-index:1000}
#content {padding:4% 25%; background: url(../img/bg-inhalt-gelb.gif) #fff 0 0 no-repeat;background-size: contain;margin:0 auto;display:block;position:relative}
#footer{background: url(../img/bg-footer.png) #ccc no-repeat; background-size: contain; overflow:auto;padding:1% 25%}

/********************************************
   TOP/HEADER
********************************************/ 
#top img.logo{float:left; margin:15px 0 0 2%; width:15%}
#header img {width:100%}
#btn-start img{width:100%}

/********************************************
   CONTENT
********************************************/ 
#content a {color:#336699}
#content ul {margin-bottom:20px; margin-left:20px;list-style-type:disc;}
#bilder{overflow:auto;margin: 30px 0}
#bilder div{float:left;width:48%;color:#336699}
#bilder div.eins{margin-right:4%!important;}
#bilder img {width:100%}

iframe {width:100%;height:600px;}
/********************************************
   NAVI
********************************************/ 
#nav ul li.navmobile{display:none;}
#nav ul, #imp ul {overflow:auto;}

#nav {position:relative}
#nav ul {overflow:visible;}
#nav ul li{display:inline;overflow:auto;}
#nav ul li a {display:block;padding-top:10px; float:left;margin-right:4%!important;}
#nav ul li a:hover {text-decoration:none;background: url(../img/icon-menu-on-gelb.png) center 0 no-repeat;}
#nav ul li a.current {font-weight:bold; background: url(../img/icon-menu-on-gelb.png) center 0 no-repeat;}
#nav ul li a.erster {}
#nav ul li a.letzter {margin-right:0!important;}

#kontaktbox ul li {float:left;}
#kontaktbox ul li span{line-height:36px}
#kontaktbox ul li img{float:left;margin-right:10px;background: url(../img/icon-mail.png)  #fff no-repeat; background-size: contain;transition: background 1s ease-in-out}
#kontaktbox ul li img{width:36px}
#kontaktbox ul li img:hover{background-color:#f9c9c6;}
#kontaktbox ul li a.btn-phone{color:#cc3333}
#kontaktbox ul li a.btn-phone img{background: url(../img/icon-phone.png) #fff no-repeat; background-size: contain;transition: background 1s ease-in-out}
#kontaktbox ul li a.btn-phone img:hover{background-color:#f9c9c6;}
#kontaktbox ul li  a:hover{text-decoration:none;}

#imp {float:left;padding-top:5px;}
#imp ul {margin-right:5%%!important;}
#imp ul li{float:left; margin-right:20px;}
#imp ul li a {padding:1px;}
#imp ul li a:hover {text-decoration:underline;}


/*Style 'show menu' label button and hide it by default*/
.show-menu {display: none;}
.show-menu {position:absolute;z-index:500;top:0;left:0;text-transform:uppercase; font-weight:bold; color:#336699;font-size:14px;background: url(../img/icon-menu-on.png) 20px 0 no-repeat;text-align:left;padding:10px;margin-left:2%!important;}
.show-menu img{}
.show-menu img:hover{}


/*Hide checkbox*/
input[type=checkbox]{display: none;}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #nav{display: block;}

/********************************************
MEDIA QUERIES FOR A RESPONSIVE LAYOUT
********************************************/ 

@media screen and (max-width: 1905px) {
#wrap {width:100%}
}

@media screen and (max-width: 1024px) {
body {font-size:12px; line-height:14px;}
#content {}
#nav ul li a{font-size:12px;}
#kontaktbox {font-size:12px;}
#kontaktbox ul li img{width:25px}
#kontaktbox ul li a.btn-phone span{display:none;}
#kontaktbox ul li a.btn-phone img{float:right;margin-right:0px;}
#btn-start{background: url(../img/btn_start_150.png) no-repeat; background-size: contain; top:-75px;}


#imp ul li a{font-size:10px;}
h1 {font-size:14px; line-height:20px;margin-bottom:10px; }
h2 {font-size:12px; line-height:16px;margin:15px 0 5px 0; }
h3 {font-size:12px; line-heigth:16px;}
#footertxt {font-size:12px;line-heigth:14px;}
}


@media screen and (max-width: 600px) {
#top {text-align:center;border-top:2px solid #336699;}
#top img.logo{float:none; margin:15px 0 15px 0; width:240px}
#kontaktbox ul li a.btn-phone span{display:none;}
#btn-start{background: url(../img/btn_start_90.png) no-repeat; background-size: contain;width:90px; top:-75px;}

#imp{display:none;}

#content {padding:4% 2%;background-image:none;}
#footer{padding:15px 2%}


#kontaktbox {position:absolute; top:5px;right:5px;margin:0;}
#kontaktbox ul li a.btn-phone img{float:none;margin-right:0px;}


/********************************************
Responsive Styles Menu
/*********************************************/

#nav {position:absolute;margin:0px;top:0px;border-top:0px solid #336699; border-bottom:2px solid #336699;overflow:visible;width:100%;z-index:1000; display:none;}
#nav ul li.navmobile{display:block;}

#nav ul {margin:0;padding-left:0;width:100%;overflow:auto;}
#nav ul li{display:block;margin:0;border-bottom:1px solid #006ab5;background-color:#fff;text-align:left;}
#nav ul li:hover{background-color: #f9c9c6;}
#nav ul li a, #nav ul li a.erster {display:block;float:none;padding:10px;margin-left:2%!important;font-size:14px;}
#nav ul li a:hover, #nav ul li a:active {font-weight:normal;}
#nav ul li a.current, #nav ul li a:hover { background-image:none;}

/*Display 'show menu' link*/
.show-menu {display:block;}
}