/* ---------------------------------------------------------
   Basisgestaltung und Layoutbereiche
   ---------------------------------------------------------*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
} 
* {
	margin:0;          
	padding:0;
}    
html {
  font-family:  Arial, Verdana, sans-serif;
  font-size: 62.5%; 
  -ms-text-size-adjust: 100%; /* Prevent iOS text size adjust after orientation change */ 
  -webkit-text-size-adjust: 100%;      
}
body { 
  font-size: 24px; font-size: 2.4rem;
  color: #5f604b;
  min-width: 320px;
  margin: 0 auto;
}

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

TABLE, TR, TD, TH {   
  font-family:  Arial, Verdana, sans-serif;
  font-size: 24px; font-size: 2.4rem;
  font-weight:400;
	vertical-align:top;
	border-spacing: 0px;
	border-style: none;
	border-collapse: collapse;
}
 
A {
  color:#ee3425;
  text-decoration:none;
  outline: 0;
}   
A IMG {border:0;}

B, STRONG {font-weight:700;} 

P {
  margin-bottom:38px;
  line-height:1.6em;
}

H1,H2,H3,H4,H5,H6 {color:#ee3425;font-weight:400;}  
H1 { 
  font-size:60px;font-size: 6.0rem; 
  margin-bottom:80px;
}
.bg-red {background-color:#ee3425;color:#fff;}
  
H2 { 
  font-size:24px;font-size: 2.4rem; 
  margin-bottom:10px;
}   
H3 { 
  font-size:18px;font-size: 1.8rem; 
  margin-bottom:15px;
  color:#5f604b;
}    

 
/* Elemente verstecken */  
.hideme {
  display:none;
}

/* Clearfix */
.clearfix:after,
.row:after {
	content    : ".";
	display    : block;
	clear      : both;
	font-size  : 0;
	height     : 0;
	visibility : hidden;
}
.clear { clear: both; } 
                               
::-moz-selection {
	background: #5f604b;
	color: #fff;
	text-shadow: none
}
::selection {
	background: #5f604b;
	color: #fff;
	text-shadow: none
}

/* GRID basics */ 
.reframe { width: 1232px; max-width: 96%; margin: 0 auto; position:relative; } 

[class*=colgroup] .col {
	margin-left:3%;
	float:left
} 

[class*=colgroup] .col:first-of-type { margin-left:0 }
#cards .col, #telcontact .col { width:22.75%; }
#cards .col:nth-of-type(4n+1), #telcontact .col:nth-of-type(4n+1) {
	clear:left;
	margin-left:0
}

.colgroup-3 .col { width:31.3%;}
.colgroup-3 .col:nth-of-type(3n+1) {
	clear:left;
	margin-left:0
}
  
.colgroup-2 .col { width:48.5%;}
.colgroup-2 .col:nth-of-type(2n+1) {
	clear:left;
	margin-left:0
}
.colgroup-1 .col {
	width:100%;
	margin-left:0
}   
.colgroup-text .col {
	width:65%;
	margin-left:0
} 
                      

   
/* HEADER */ 
HEADER[role="banner"] {
  position:fixed;
  width:100%;
	height:50px;
  font-size: 14px; font-size: 1.4rem;
  color: #5f604b; 
  background-color:#efefed;
  z-index:1000; 
}          
HEADER[role="banner"] A {
  font-size: 14px; font-size: 1.4rem;
  color: #5f604b; 
} 

.col1 {float:left;text-align:left;width:30%;line-height:50px;}
.col1 A {padding-left:20px;background: url(../icon_info.png) left center no-repeat;} 
.col2 {float:left;text-align:center;width:40%;line-height:50px;}  
.col2 A {padding:10px 0 10px 25px;background: url(../icon_standort.png) 0 center no-repeat;} 
.col3 {float:right;text-align:right;width:30%;line-height:50px;}  
.col3 A {padding-left:20px;background: url(../icon_mail.png) left center no-repeat;}         


#logo {
	display:block;
  width: 170px;
  height: 61px;
  margin:40px 0; 
}         
 
#toggleMenu {
  display:none;
  position:absolute;
  right:20px;
  bottom:20px;
  height:34px;
  width:34px;
  cursor:pointer; 
}             



/* # slider ############### */ 
#slider { 
  position:relative;
  height:auto;
  overflow: hidden !important;
  z-index:500;
}
#slider IMG { 
  max-width: 100%;
  height: auto;
  width:100%;
  display:block;
} 
   
#slider .item {
	height:auto;
	width:100%;
	position:relative; 
}
#slider .inside {
	position:relative;
	margin:0 auto;
	text-align:left;
	max-width : 1232px;  
  height:100%;
  max-height:600px;
	padding:0; 
} 
#slider .inside .claim {
	position:absolute; 
	height:174px;
	width:530px;
  padding:30px 60px;
  right:10px;
  bottom:48px;
	background-color:rgba(255,255,255, 0.8);
  font-size: 24px; font-size: 2.4rem;
}    
#slider .inside .claim P {
  line-height:1.4;
  margin-bottom:12px;
  text-transform:uppercase;
}   
#slider .inside .claim A.arrow {
  display:inline-block;
  font-size: 14px; font-size: 1.4rem;
  background: url(../pfeil_small.png) right center no-repeat;
  padding-right:12px;
  margin-bottom:0;
  text-decoration:none; 
  text-transform:uppercase;
}

/* # CYCLE  #####*/  
#slider .cycle-slideshow { width: 100%; padding: 0; position: relative; height:auto; display:table;}
/* pager */
#pager-frame { 
	text-align:center; 
  width: 100%;
  height:auto;
  padding:0;
  position: absolute; left:0;bottom: 20px; overflow: hidden; 
  z-index:1500;
}          
#pager1 {    
	margin:0 auto;
	max-width : 1232px;
  padding-right:10px; 
  text-align:right; 
}
#pager1 span { 
  font-family: arial; font-size: 0; width: 10px; height: 10px;margin:0 0 0 6px;  
  display: inline-block; color: #ddd; cursor: pointer;
  background: url(../bubbles_white.png) 0 0 no-repeat;  
}
#pager1 span.cycle-pager-active { color: #fff;background-position:-20px 0;}
.cycle-pager > * { cursor: pointer;}  
.disabled { opacity: .5; filter:alpha(opacity=50); } 

     



/* MAIN */ 
MAIN {
  float:left;
  width:100%;  
  padding-top:50px;
  overflow:hidden;
}

SECTION {  
  padding-top:60px;
  overflow:hidden;
}  
.nopad {  
  padding-top:0;
}

.center {text-align:center;}  

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

A.arrow {
  display:inline-block;
  background: url(../pfeil.png) right center no-repeat;
  padding-right:22px;
  margin-bottom:15px;
  text-decoration:underline;
}

#contact {
  background-color:#fafafa;
}      
 
#cards {
  padding:30px 0 60px 0;
  overflow:hidden; 
}
#cards .col {
  position:relative; 
} 
#cards .col IMG {
  display:block; 
  max-width: 100%;
  height: auto; 
  -webkit-transition: opacity 0.2s ease;
  -moz-transition: opacity 0.2s ease;
  -ms-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}   
#cards A:hover IMG {
  opacity: 0.8; 
} 

#cards P {
  position:absolute;
  left:0;right:0;
  bottom:50px;
  text-align:center;
  margin:0;
}   
#cards A {
  color: #5f604b; 
}   

#telcontact {
  padding:30px 0 60px 0;   
  overflow:hidden; 
} 
#telcontact .col {
  position:relative; 
  background-color:#fafafa;
  text-align:center;
} 
#telcontact .col IMG {
  display:block; 
  height: auto;   
  width: auto; 
  margin:110px auto 70px;
}   
#telcontact P {
  text-align:center;
  margin:0 0 45px;
}   


/* # Teaser Slider ############### */ 
#teaser {margin-bottom:40px;}
#teaser .col { 
	position:relative;
  margin-bottom:35px;
} 
#teaser IMG { 
  max-width: 100%;
  height: auto;
  width:100%;
  display:block;
} 
   
#teaser .cat {
	position:absolute;
  left:0;
  top:0;
  min-width:82px;
  height:22px;
  line-height:22px;
  text-align:center; 
  color:#fff;   
  font-size: 14px; font-size: 1.4rem;
  background-color:#e30613;
  z-index:10000;
}
   
#teaser A.item {
  display:block;
	height:auto;
	width:100%;
  color:#5f604b;
	position:relative;
}
#teaser .title {
	position:absolute;
  left:0;
  top:0; 
  padding:40px 50px 0;
}    
#teaser .title P {
  line-height:1.2;
  font-size: 36px; font-size: 3.6rem;
  margin-bottom:12px;
  border-bottom:2px solid #e30613;
}   
#teaser .title .price {
  font-size: 18px; font-size: 1.8rem;
  color:#e30613;
  margin-bottom:0; 
  border:0;
}   

/* # CYCLE  #####*/ 
#teaser .cycle-slideshow { width: 100%; padding: 0; position: relative; border:2px solid #f5f5f5; }

/* pager */
#teaser .cycle-pager { 
    text-align: center; width: 100%; z-index: 500; position: absolute; bottom: 40px; overflow: hidden;
}
#teaser .cycle-pager span { 
  font-family: arial; font-size: 0; width: 10px; height: 10px;margin:0 0 0 6px;  
  display: inline-block; color: #ddd; cursor: pointer;
  background: url(../bubbles.png) 0 0 no-repeat; 
}
#teaser .cycle-pager span.cycle-pager-active { color: #b4b4ac;background-position:-20px 0;} 
#teaser .cycle-pager > * { cursor: pointer;} 

 /* prev / next links */
#teaser .cycle-prev, #teaser .cycle-next { position: absolute; top: 0; width: 52px; z-index: 800; height: 100%; cursor: pointer; }
#teaser .cycle-prev { left: 0;  background: url(../prev.png) 50% 50% no-repeat;}
#teaser .cycle-next { right: 0; background: url(../next.png) 50% 50% no-repeat;}
            


 
/* FOOTER */
FOOTER[role="contentinfo"] { 
  color: #5f604b;
  font-size:14px;font-size: 1.4rem; 
  background-color: #efefed;
  padding:8px ;
  clear:both;
}                
 
FOOTER A {
  text-decoration:none;
  color: #5f604b;
  font-weight:400;
}
 
FOOTER P {
  line-height:1.8;
  margin-bottom:0;
} 
  
FOOTER .col {
  float:left;
  width:50%;
} 
FOOTER .col:nth-child(2) {
  text-align:right;
} 
 

/* contact + form */
#contact .col { 
  text-align:center;  
}

.formcol1 {
  width:46%;
	float: left;
}       
.formcol2 { 
  width:46%;
	float: right;
	font-size: 14px;font-size: 1.4rem;
  color:#b9b9b9;
}
 
#contactform {
  width:100%;
  max-width:850px;
  padding:40px 0 80px 0;
  margin:0 auto;  
  text-align:center; 
	font-size: 14px;font-size: 1.4rem;
} 

#contactform LABEL {
  display:block;
	width:130px;
	height:24px;
	font-size: 14px;font-size: 1.4rem;
  color:#b9b9b9; 
  text-transform:uppercase;
  text-align:left; 
}  
#contactform INPUT.formtext {
	width:100%;
	height:35px;
  padding:0 10px;
	border:1px solid #d5d5d5;
	font-size: 14px;font-size: 1.4rem;
	margin-bottom:25px;
  text-align:left; 
}    
#contactform INPUT.check {
  padding:0 10px;
	border:1px solid #d5d5d5; 
  text-align:left; 
}
#contactform TD {
	font-size: 14px;font-size: 1.4rem;  
  text-align:left; 
} 


#contactform INPUT.submit {
	display:inline-block;
	margin:0 auto;
	width:350px;
  height:40px;
	padding:0;
	font: 14px; font-size: 1.4rem;
	color:#fff;
  background-color: #ee3425;
	border:0;
	margin-top:55px;  
	cursor:pointer;
}   
  

INPUT.reqboth {
  left: -999em;
  position: absolute;
}



/* ---------------------------------------------------------
   @media
   ---------------------------------------------------------*/     
 
   
@media screen and  (max-width: 1024px) {  

  #teaser .title {
    padding:30px 35px 0;
  }      
  
  #telcontact .col IMG {
    margin:60px auto 40px;
  }    

}              
      
/* ---------------------------------------------------------*/  
 
   
@media screen and  (max-width: 900px) {     
 
  HEADER DIV, HEADER A { font-size:12px;font-size: 1.2rem !important; } 
  .colgroup-text .col {width:85%; }                  

  #cards P{
    bottom: 35px;
    font-size:22px; font-size:2.2rem;
  }       
  #telcontact P {
    font-size:18px; font-size:1.8rem;
  }   
  
  #teaser .title P {
    font-size: 28px; font-size: 2.8rem;
  }   

}     
      
/* ---------------------------------------------------------*/  
   
@media screen and (max-width: 768px) {    
                              
  header .col2 {display:none;}
  header .col1,header .col3  {width:50% !important;}            

  #cards P {
    bottom: 25px;
    font-size:20px; font-size:2.0rem; 
  }   
  .colgroup-text .col {width:100%; }    
  
  #slider .inside .claim {
    height: 124px;
    width: 500px;
    padding: 15px 20px;
    right: 10px;
    bottom: 48px;
    font-size: 18px;font-size: 1.8rem;    
  } 
  
  #teaser .title {
    padding:30px 25px 0;
  }      
  
  #teaser .title P {
    font-size: 22px; font-size: 2.2rem;
  }          
  #teaser .title P.price {
    font-size: 14px; font-size: 1.4rem;
  }    
  
  #teaser .cycle-pager {
    bottom: 20px;
  }      

                           

} /* Ende @media */  

/* ---------------------------------------------------------*/    
   
@media screen and (max-width: 680px) {                

  #cards P, {
    font-size:17px; font-size:1.7rem; 
  }   
  
  #teaser .title {
    padding:30px 15px 0;
  }      
  
  #teaser .title P {
    font-size: 18px; font-size: 1.8rem;
  }          
  #teaser .title P.price {
    font-size: 12px; font-size: 1.2rem;
  }  
     
  #telcontact P {
    font-size:22px; font-size:2.2rem; 
  }   
  #telcontact .col { width:48.5%; margin-bottom:10px;}
  #telcontact .col:nth-of-type(2n+1) {
  	clear:left;
  	margin-left:0;
  }     
}

   

/* Ende @media */             
                                     

/* ---------------------------------------------------------*/    
   
@media screen and (max-width: 560px) {  
  
  H1 { 
    font-size:40px;font-size: 4.0rem; 
    margin-bottom:60px;
  }     

  #teaser .col {
    width: 100%;
    margin-left:0;
  }   
  #teaser .title P {
    font-size: 24px; font-size: 2.4rem;
  } 
  #teaser .title {
    padding:30px 15px 0;
  }   
  #teaser .title P.price {
    font-size: 16px; font-size: 1.6rem;
  }   

}

   

/* Ende @media */             
/* ---------------------------------------------------------*/    
   
@media screen and (max-width: 480px) { 

  header .col1  {display:none;} 
  header .col3  {width:100% !important;} 
  
  #slider .inside .claim {
    height: 80px;
    width: 300px;
    padding: 5px 10px;
    right: 10px;
    bottom: 34px;
    font-size: 14px;font-size: 1.4rem;    
  }


  #cards .col{ width:48.5%; margin-bottom:10px;}
  #cards .col:nth-of-type(2n+1) {
  	clear:left;
  	margin-left:0;
  }              

  #cards P {
    bottom: 26px;
    font-size:19px; font-size:1.9rem; 
  }      
  #telcontact P {
    font-size:18px; font-size:1.8rem; 
  }     
  
  .formcol1 {
    width:100%;
  	float: none;
  }       
  .formcol2 { 
    width:100%;
  	float: none;
  }     
  #contactform INPUT.formtext {
    margin-bottom: 12px;
  }
  #contactform INPUT.submit {
    width: 260px;
    margin-top: 40px;
}

   

/* Ende @media */        
/* ---------------------------------------------------------*/ 
	
/* ---------------------------------------------------------
   Print styles
   ---------------------------------------------------------*/
@media print {
  * {
    color:#000 !important;
    box-shadow:none !important;
    text-shadow:none !important;
		background:transparent !important;
    }
	html { background-color:#fff; }
	nav { display:none; }

	/* Show link destinations in brackets after the link text */
	a[href]:after { content: " (" attr(href) ") "; }
	a[href] {
		font-weight:bold;
		text-decoration:underline;
		color:#06c;
		border:none;
	}
	/* Don't show link destinations for JavaScript or internal links */ 
	a[href^="javascript:"]:after, a[href^="#"]:after { content:""; }
	
	/* Show abbr title value in brackets after the text */
	abbr[title]:after { content: " (" attr(title) ")"; }

	figure { 
		margin-bottom:1em; 
		overflow:hidden;
	}

	figure img { border:1px solid #000; }
}



/* END */