@charset "UTF-8";
/* Farben  ambiente-selct.de 
   color: #01747b;                                                                                      
	html: #fff; (weiss)
   body:  #f8f8f8; (helles grau)
*/
                                                                        
* {
   margin: 0;
   padding: 0;
   border: 0;
   list-style-type: none;
   outline: none;
}


*, *:before, *:after {
   -moz-box-sizing: border-box; 
   -webkit-box-sizing: border-box;          
   box-sizing: border-box;    
} 

/* ####################### links ########################## */      
a { color: #01747b; text-decoration: none;   outline: none;    }    /* ambiente-select farben */  
a:visited { color: #01747b; text-decoration: none; }
a:hover, a:focus, a:active { color: #01747b; text-decoration: underline; }

/* ##################### content #####################  */

html {   
   font-size: 16px;    
   font-size: 100%;   
   height: 100.1%;   
   background: #fff; 
}  

body {
   background: #f8f8f8;
   color: #666;
   font-family: Verdana,Helvetica,sans-serif;
   margin: 0 auto;
   font-size: 16px;         
   font-size: 1rem;
   font-weight: normal;
   line-height: 181.25%;
   line-height: 1.625em;      
   margin: 0 auto;
   padding: 0;
} 

p {   
   background: transparent;
   margin-bottom: 0.5em;
}

 /* Raster */      
.columns {
   float: left;
   padding-left: 1em;    
   padding-right: 1em;                 
}

.row {
   width: auto;
} 

.row:before, .row:after {
   content: '';
   display: table;
}  
  
.row:after {
   clear: both;
}  
  
.row .row {
   margin-left: -1em;
   margin-right: -1em;
}   

h1, h2, h3, h4, h5, h6 {     
   font-size: 100%;
   font-weight: normal;
   margin-bottom: 0.5em;
}

.logo > a { text-decoration: none; }   /* h1 */

h1 { 
   font-size: 32px; 
   font-size:  2rem; 
   font-family: Tahoma, Arial, sans-serif; 
   font-family: 'Open Sans Condensed', sans-serif;
}

h2 { 
   font-size: 24px; 
   font-size:  1.500rem; 
   font-family: Tahoma, Arial, sans-serif;
   font-weight: normal; 
}  

h3 { 
   font-size: 18px; 
   font-size:  1.125rem; 
   font-family: Tahoma, Arial, sans-serif;  
} 

h4, h5, h6 { font-size: 16px; font-size:  1.000rem; } 

/* main navigation */

.nav-main {    
   width: 100%;
   clear: both;
}
.nav-main .navp {    
   height: 1px;
}


.nav-main ul {    
   list-style-type: none;
}

.nav-main li  {    
   width: 100%;  
}

.nav-main li  a {    
   display: block;     
}

.nav-main .active {    
   background:  #01747b;
   color: white;     
}

.active > a:hover {    
   text-decoration: none;
}

.nav-main .active a {    
   color:  #fff;
}
   
.shoplink {
   background:  #e8710c;
   text-align: center;
   display:  inline;
   font-size: 0.813em;
   text-align: center;
   margin-top: 0.5em;
   padding: 0.5em;  
   border-radius: 5px; 
}

.header-site {  
   width: auto;   
   clear: both;
   float: none;
   min-height: 2em;    
   margin: 0 auto;
   padding: 0;
   background:  #01747B; 
   overflow: visible;
   background-image: linear-gradient(#01747b, #fff);
   -moz-background-image:  linear-gradient(#01747b, #fff); 
   -webkit-background-image: linear-gradient(#01747b, #fff); 
   -moz-background-clip:  linear-gradient(#01747b, #fff); 
   -webkit-background-clip: linear-gradient(#01747b, #fff);opacity: 1.5;
}

.logo {  
   margin: 0 auto;   
   height: 7em;  
   color: #fff;
}

.logo a {  
   color: #fff;
}

.headline{  
   display: inline-block;
   font-family: Tahoma, Arial, sans-serif; 
   font-family: 'Open Sans Condensed', sans-serif;
   font-weight: bold;
   font-size: 2.25rem;                   
   margin-top: 0.500em; 
   color: #FAFAFA;
   margin-right: 5px; 
} 

#wrapper {
   position: relative;        
   margin: 0 auto;       
} 

/* seitenüberschrift h1 */
.headline-site {
   font-style: italic;
   padding: 0.500em 0 0em 0;
   font-family: Tahoma, Arial, sans-serif; 
   font-family: 'Open Sans Condensed', sans-serif;
   font-size: 28px;   /* 28px */     
   font-size: 1.75rem;   /* 28px */
   margin-bottom: 0.563em;  
} 

.container {
   margin: 0 auto;  
   padding: 1em;  
   overflow: hidden;         
}

.content-site {
   padding-bottom: 1em;
   background: #efefef;
   background: #f8f8f8;
}

/* Abstände */
.top { margin-top: 1em; }
.left { margin-left: 1em; }  
.right { margin-right: 1em; }  
.bottom { margin-bottom: 1em; }  
.top-neg { margin-top: -1em; }
.left-neg { margin-left: -1em; }  
.right-neg{ margin-right: -1em; }  
.bottom-neg { margin-bottom: -1em; }

/* img */
img { 
   max-width: 100%;
   height: auto;
}  

.img-box-80l, .img-box-160l, .img-box-240l, 
.img-box-320l, .img-box-400l { 
   float: left;
   margin-right: 0.750em;
   margin-bottom: 0.750em;      
} 

.img-box-80r, .img-box-160r, .img-box-240r, 
.img-box-320r, .img-box-400r { 
   float: right;
   margin-left: 0.750em;
   margin-bottom: 0.750em;   
} 
 
.img-box-80l, .img-box-80r { width: 5em; height: auto; }  
.img-box-160l, .img-box-160r  { width: 10em; height: auto; } 
.img-box-240l, .img-box-240r { width: 15em; height: auto; } 
.img-box-320l, .img-box-320r {width: 100%; max-width: 20em; height: auto; } 
.img-box-400l, .img-box-400r { width: 25em; height: auto; } 

/*   border bottom */
.bb {  
   clear: both;
   border-bottom: 1px solid #ddd;
   margin: 3% 0;
   height: 1px;
}

/* bildunterschrift  */
.bu {
   font-size: 11px; 
   font-size: 0.6875rem; 
   line-height: 200%;
   margin-bottom: 1em;
   text-align: left;
} 

/* zubehör */
.zubehoer li {       
   margin-left: 2em;
   list-style-type: square;
   list-style-position: inside;
}

.clear {  clear: both; height: 1px; }
.cl {  clear: left; height: 1px;  }  
.cr {  clear: right; height: 1px;  } 

.fl { float: left; } 
.fr { float: right; }
.pull{ float: left; } 
.push { float: right; }

.center {
   text-align: center;
}

 /* #################### Tabelle ############## */
.table-pk   {     
   border: 1px solid #b2dfee;    
   padding: 5px;
   text-align: center;
   background: #F2f2f2;
   font-weight: normal;
   font-size: 12px;
   font-size: 0.75rem;
   width: 100%;
   margin: 1em 0;   
}

tr {
    font-weight: normal;
    font-size: 12px;
    font-size: 0.75rem;
    width: 33%;
}

th {
   background: #ffcf0d;
   font-weight: bold;
   font-size: 12px;
   font-size: 0.75rem;
   width: 33%;
   padding: 6px;
}

.table-pk tr:nth-child(odd){
 background: hsla(48, 100%, 53%, 0.3);  /*   #ffcd0d; 30% deckkraft  */     
}

.table-pk td {
   padding: 2px 2px;
   vertical-align: top; 
   width: 33%;        
 } 

/* sidebar     */
.sidebar-site {
   width: 100%;
   background: #fff;
}

.sidebar-site .box1, .sidebar-site .box2, .sidebar-site .box3  {
   padding-top: 1em;
   padding-bottom: 1em;
}

/* teaser container */
.teaser-col {
   width: 100%;
   margin: 0;
   padding:  0;
}

.teaser-col h3 {
   background: #ff9900;
   font-style: italic;
   margin: 0;
   width: 100%;
   margin-bottom: 0.5%;
   padding-left: 0.8%;
}

.teaser-img {
   max-width: 100%;
   height: auto;
}

.teaser-txt {
   font-size: 14px;
   font-size: 0.875rem; 
   line-height: 1.625em;  
}

/* link zum kopf der seite  */
.nach-oben {
   text-align: center;
   padding: 2em;
}

/* .footer */
.row.footer-site .nach-oben a {
   color: #fff;
}

.footer-site {
   background:  #01747B; 
   background-image: linear-gradient(#f8f8f8, #01747b);
   -moz-background-image:  linear-gradient(#01747b, #fff); 
   -webkit-background-image: linear-gradient(#01747b, #fff); 
   -moz-background-clip:  linear-gradient(#01747b, #fff); 
   -webkit-background-clip: linear-gradient(#01747b, #fff); 
   margin: 0 auto; 
   width: 100%;
}

.footer {
   margin: 0 auto; 
   padding: 0;       
}

.footer-menu {
   color: #fff;      
}


/* footer boxen 1-4  */

ul.tuev h3, ul.wunschhzg h3, ul.pluspunkte h3  {
   text-align: center;    
}

ul.tuev li, ul.wunschhzg li, ul.pluspunkte li  {
   list-style-type: square;  
   list-style-position: inside; 
   margin-left: 1.5em;      
}

.footerbox-1, .footerbox-2, .footerbox-3, .footerbox-4 { 
   min-height: 730px;
   max-height: 1000px;   
   font-size: 13px; 
   font-size: 0.8125rem;
   color: #222; 
} 
  
.footerbox-1 h2, .footerbox-2 h2, .footerbox-3 h2, .footerbox-4 h2 {
   font-family: Tahoma, Arial, sans-serif; 
   background:  #01747b; padding: 1em 0 1em 1em;
   font-size: 18px;      
   font-size: 1.125rem;
   text-transform: uppercase;
   margin: 5px -0.563em;
   padding: 0.625em;
   color:#fff;
}   

.footerbox-1 { background: #ffcd0d; }/* #ffcd0d; normale deckkraft 1.0 #ffcd0d;*/
.footerbox-2 { background: #e8a60c; } /* #e8a60c; */     
.footerbox-3 { background: #ff9900; } /* #ff9900; */    
.footerbox-4 { background:  #e8710c; }  /* #e8710c; */  


.footer-menu  {
   padding: 2em 2em 2em 0;
   margin-top: 2em;
   font-weight: normal;        
}

.footer-menu a {
   padding: 2em 2em 2em 0;
   padding: 1em;   
   margin-top: 2em;
   color: #fff;      
}

/* 767px 47.9375em    */  

@media (max-width: 47.9375em)   { 

body {   
   font-size: 14px;      
   font-size: 0.875rem;
}

h1, h2, h3, h4, h5, h6 {     
   margin-bottom: 1em;
   line-height: 1em;
}

h2, h3, h4, h5, h6 {     
   margin-top: 1em;
}

h1 { font-size: 20px; font-size:  1.250rem; }
h2 { font-size: 18px; font-size:  1.125rem; }  
h3 { font-size: 18px; font-size:  1.125rem; } 
h4 { font-size: 16px; font-size:  1rem; } 
h5 { font-size: 16px; font-size:  1rem; }  
h6 { font-size: 16px; font-size:  1rem; }  

.nav-main li {  
   float: left;
   width: 50%;     
   padding: 1em 0; 
   border:  1px solid #f2f2f2; 
}

.nav-main li a {
   text-align: center;
}

.container .logo {  
   position: relative;
} 

.container {
   max-width: 47.9375em;   /* 767px */ 
   min-width: 20em;   /* 320px */  
   margin: 0 auto; 
   padding: 0;   
}

.header-site {  
   padding: 0em 0 0em 1em;
   max-height: 5.3125em;
   min-height: 3em;    
}

.logo {  
   margin: 0 auto;   
   min-height: 3em;  
   max-height: 6em;
}

.headline {  
   font-family: Tahoma, Arial, sans-serif; 
   font-family: 'Open Sans Condensed', sans-serif;
   font-size: 1.25rem;
   margin-top: 0.500em;   
}

#nav-goto img {    
   position: absolute;
   right: 0.500em;
   top: 0.500em;
   width: 33px;
   height: auto;
   background:transparent;
}
  
#wrapper {     
   max-width: 47.9375em;   /* 767px */ 
   margin: 0 auto;
   padding: 1em 0 0 0; 
}

.row p { 
   padding: 0;
}

.content-site {
   margin-top: 1em;        
} 

.bu {
   font-size: 10px; 
   font-size: 0.625rem; 
   line-height: 200%;
   text-align: left;
} 

.nav-main li  a {    
   text-align: center;  
}

.teaser-col h3 {
   padding: 0.5em 0.5em 0.5em 0.8%;
}

.footer {
   max-width: 47.9375em;   /* 767px */ 
   min-width: 20em;   /* 320px */  
   margin: 0 auto;
} 

.footer-menu a {
   padding: 0 1em;   
   margin-top: 2em;
   color: #fff;      
}

/* footer box  */  
.footerbox-1, .footerbox-2, .footerbox-3, .footerbox-4 { 
   min-height: 100px;
   max-height: 1000px; 
   padding-bottom: 1em;  
} 

/*start col-sm-1 bis col-sm-12 */ 
.col-sm-1 {
   width: 8.333333333333333%;
}

.col-sm-2 { 
   width: 16.66666666666667%;
}  


.col-sm-3 { 
   width: 25%;
}

.col-sm-4 { 
   width: 33.33333333333333%;
} 

.col-sm-5 { 
   width: 41.66666666666667%;
}

.col-sm-6 {
   width: 50%;
} 
 
.col-sm-7 { 
   width: 58.33333333333333%;
}

.col-sm-8 { 
   width: 66.66666666666667%;
} 

.col-sm-9 { 
   width: 75%;
}

.col-sm-10 { 
   width: 83.33333333333333%;
} 

.col-sm-11 { 
   width: 91.66666666666667%;
}        

.col-sm-12 { 
   width: 100%;
}  

/*    ende col-sm-12      */  

/*    col-sm-offset-      */       

.col-sm-offset-1 {
   margin-left: 8.333333333333333%;
}

.col-sm-offset-2 { 
   margin-left: 16.66666666666667%;
}  


.col-sm-offset-3 { 
   margin-left: 25%;
}

.col-sm-offset-4 { 
   margin-left: 33.33333333333333%;
} 

.col-sm-offset-5 { 
   margin-left: 41.66666666666667%;
}

.col-sm-offset-6 {
   margin-left: 50%;
} 
 
.col-sm-offset-7 { 
   margin-left: 58.33333333333333%;
}

.col-sm-offset-8 { 
   margin-left: 66.66666666666667%;
} 

.col-sm-offset-9 { 
   margin-left: 75%;
}

.col-sm-offset-10 { 
   margin-left: 83.33333333333333%;
} 

.col-sm-offset-11 { 
   margin-left: 91.66666666666667%;
}    
/* col-sm-12 offset ende */
   
} /* max-width: 767px end  */