img { border: none; }
form {margin:0px; padding:0px;}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


.svg-container {
 position: relative; 
 height: 0; 
 width: 100%; 
 padding: 0;
 padding-bottom: 100%; /* override this inline for aspect ratio other than square */
}

.svg-container svg {
 position: absolute; 
 height: 100%; 
 width: 100%; 
 left: 0; 
 top: 0;
}

/* ### HTML ###################################################################### */
html {
	margin: 0px;
	padding: 0px;
	height:100%;
	font-size:62.5%; /*10px*/

}

/* ### BODY ###################################################################### */
body {
	color: #424242;
	font-family: 'Poppins', sans-serif;
	margin: 0px;
	padding: 0px;
	line-height: 1;
	/*font-size:16px;*/
	font-size:62.5%; /*10px*/
	background-position:0px 0px;
	background-repeat:repeat;
	height:100%;
	

	}
	

.site-rahmen {
	position:relative;
	margin:0 auto;
	padding:0;
	display:block;
	max-width:1200px;
	width:100%;
}

.inner {width:96%; margin:0 2%;}


.flexbox { 
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-flex-flow: wrap;
      -ms-flex-flow: wrap;
          flex-flow: wrap;
	  	  
	  }

.nowrap { 
  -webkit-flex-flow: nowrap;
      -ms-flex-flow: nowrap;
          flex-flow: nowrap; 	  
	  }	

.wrap { 
  -webkit-flex-flow: wrap;
      -ms-flex-flow: wrap;
          flex-flow: wrap; 	  
	  }
	  
.space-between { 	    
-webkit-box-pack:justify;
      -ms-flex-pack:justify;
		-webkit-justify-content:space-between;
          justify-content:space-between;
}

.horizontal-mitte {
-webkit-box-flex:1;
      -ms-flex:1 auto;
          flex:1 auto; 
		  display:flex;  
		  -webkit-box-align:center;  
		  -ms-flex-align:center;  
		  align-items:center; 
		  
		  /*-webkit-box-pack:center; 
		  -ms-flex-pack:center; 
		  justify-content:center;*/
		   
		  -ms-flex-item-align:stretch; 
		  align-self:stretch; 
}




/* ### INHALT ###################################################################### */
.clear {clear:both; font-size:1px; line-height:1px; height:1px;}

.text-center {text-align: center;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-justify {text-align: justify;}

main {font-size:1.400rem; line-height: 2.000rem;}

h1 {text-align: center; color: #ee443c; font-size:1.800rem; font-weight: 700; text-transform: uppercase;}
h1:after {content:''; display: block; width:19px; height: 2px; background-color:#ee443c; margin: 2px auto 18px auto;}
h2 {color: #424242; font-size:1.800rem; font-weight: 600;}
h2.rot {color: #ee443c; font-size:1.800rem; font-weight: 600;}
h3 {font-size:1.700rem; font-weight: 500;}
h4 {font-size:1.500rem; font-weight: 600;}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

.rot {color: #ee443c;}


.start_gross {line-height: 150%; font-size:130%;}

div.hg_grau {background-color:#f1f2f1; padding: 55px 0px; margin-bottom: 75px;}

a {
	color: #ee443c;
	text-decoration: none;
}

a:hover {
	color: #424242;
	text-decoration: none;
}


/*Allgemeines*/
p {padding-bottom:12px;}
strong, b {font-weight:600;}
i, em {font-style:italic;}


.klein {font-size:0.938em;}
.linie_1px {line-height:1px; font-size:1px; height:1px; background-color:#b3b3b3; display:block; margin-top:25px; margin-bottom:45px; clear:both;}
.linie_logout {line-height:1px; font-size:1px; height:1px; background-color:#b3b3b3; display:block; margin-top:2px; margin-bottom:25px; clear:both;}

.uppercase {text-transform: uppercase;}


ul {list-style-position:outside; list-style-type:disc; padding-left:20px; padding-top:0px; padding-bottom:0px; margin-top:0px; margin-bottom:0px;}
ol {list-style-position:outside; list-style-type:decimal; padding-left:20px; padding-top:0px; padding-bottom:0px; margin-top:0px; margin-bottom:0px; margin-left:0px;}
ul li {padding-left:3px; padding-bottom:6px;}
ol li {padding-left:3px; padding-bottom:6px;}


.abstand_8px {font-size:8px; line-height:8px; height:8px; background-color:transparent; clear:both;}

.text_15px {font-size: 1.500rem;}
.text_17px {font-size: 1.700rem;}
.text_center {text-align: center; max-width: 780px; margin: auto; margin-bottom: 45px;}


.textbox {margin-bottom: 45px;}

@media screen and (min-width:880px) {
	.text_zweispaltig {

		display: -webkit-box;
	  display: -webkit-flex;
	  display: -ms-flexbox;
	  display: flex;

	  -webkit-flex-flow: wrap;
		  -ms-flex-flow: wrap;
			  flex-flow: wrap;
		-webkit-box-pack:justify;
      -ms-flex-pack:justify;
		-webkit-justify-content:space-between;
          justify-content:space-between;
	}
	
	.textbox {width:46%; }
}

@media screen and (min-width:780px) {

	.textbox_maximum {max-width:760px;}
	.textbox_mitte {margin: auto;}
}


/* ### Bild Text Boxen auf grau ###################################################################### */
.bild_text {max-width:396px; margin: auto; margin-bottom: 35px;}

.bild_text.reverse {
	-webkit-flex-flow: row-reverse nowrap;
			  -ms-flex-flow: row-reverse nowrap;
				  flex-flow: row-reverse nowrap;
	
}

.bt_text {background-color: #fff; padding: 15px 8% 5px 8%; width:100%;}

.bt_text h3 {font-size:1.600rem; font-weight: 600; margin-top: 13px; text-align:center;}
.bt_text h3:after {content:''; display: block; width:19px; height: 2px; background-color:#ee443c; margin: 6px auto 8px auto;}

.bt_text.vmiddle {
	display: -webkit-box;
		  display: -webkit-flex;
		  display: -ms-flexbox;
		  display: flex;

		  -webkit-flex-flow: column nowrap;
			  -ms-flex-flow: column nowrap;
				  flex-flow: column nowrap;
	
	 -webkit-box-pack:center;
      -ms-flex-pack:center;
		-webkit-justify-content:center;
          justify-content:center; 
	
}

.bt_bild {width:100%; position: relative;}


@media screen and (min-width:660px) { 
	
	.bild_text {
		max-width:none; margin:0;
		display: -webkit-box;
		  display: -webkit-flex;
		  display: -ms-flexbox;
		  display: flex;

		  -webkit-flex-flow: nowrap;
			  -ms-flex-flow: nowrap;
				  flex-flow: nowrap;


		margin-bottom: 45px;
	}
	
	.bt_text {width:50%; padding: 15px 2% 5px 2%;}
	.bt_bild {width:50%;  }
}


@media screen and (min-width:980px) { 
	.bt_text {width:60%;}
	.bt_bild {width:40%;  }
}

.bt_bild img {width:100%;  height: auto;}

.bt_logo {text-align: center; margin-bottom: 12px;}
.bt_logo img {max-width: 100%;}
.bt_mehr {text-align: center;}
.bt_mehr a, .bt_mehr span {background-color:#ee443c; color:#fff; background-image:url(../bilder/pfeil_link_w.png); background-size: 16px auto; background-repeat: no-repeat; background-position: 5px 6px; padding: 2px 8px 0px 27px;}
.bt_mehr a:hover, .bt_mehr span:hover {background-color:#757575;}


@media screen and (max-width:400px) { 
	.bt_logo img {max-width:100%;}
}


#werkstattkalender .btn-front {
    border:none;
    color: white;
    border-radius: 0;
    width: 180px;
    font-size: 16px;
    line-height: 16px;
    display: inline-block;
    padding: 0;
    background-color: inherit;
    margin-bottom: 10px;
    margin-left: 2px;
    margin-right: 2px;
    box-shadow: 1px 1px 4px #ccc;
}

#werkstattkalender .btn-front h2 {color:#fff; padding: 10px 16px 4px 16px; text-transform: uppercase; line-height: 1;}

#werkstattkalender .btn-text {padding: 14px 10px 14px 10px;  color:#424242; line-height: 1.35em; font-size:0.9em; }

#werkstattkalender .btn-service-front h2 {
    background: #edad33; }

    #werkstattkalender .btn-service-front:hover h2 {
      background: #da9513; }
#werkstattkalender .btn-service-front .btn-text {background-color: #f7dca8; }
#werkstattkalender .btn-service-front:hover .btn-text {background-color: #edad33; color:#fff; }

  #werkstattkalender .btn-reparatur-front h2{
    background: #63caaf; }

#werkstattkalender .btn-reparatur-front:hover h2{
      background: #3fbb9a; }
#werkstattkalender .btn-reparatur-front .btn-text {background-color: #d5f1ea;}
#werkstattkalender .btn-reparatur-front:hover .btn-text {background-color: #63caaf; color:#fff; }

  #werkstattkalender .btn-erstservice-front h2 {
    background: #27919d; }

   #werkstattkalender .btn-erstservice-front:hover h2 {
      background: #1d6b74; }
#werkstattkalender .btn-erstservice-front .btn-text {background-color: #8acdd5;}
#werkstattkalender .btn-erstservice-front:hover .btn-text {background-color: #27919d; color:#fff; }

#werkstattkalender .btn-neuradmontage-front h2 {
    background: #fff79f; }

    #werkstattkalender .btn-neuradmontage-front h2hover {
      background: #fff366; }

.icon_reperatur_gross {display: inline-block; height: 18px; width: 25px; position: relative;}

.icon_reperatur_gross i { display: block; height: 20px; width: 25px; position: absolute; left:-4px; top:2px;
	background:url(../bilder/icon_reperatur.png) 6px center no-repeat; background-size: 18px; 
	background-image:linear-gradient(transparent, transparent), url(../bilder/icon_reperatur.svg); 
background-image:-webkit-linear-gradient(transparent, transparent), url(../bilder/icon_reperatur.svg); 
background-image:-o-linear-gradient(transparent, transparent), url(../bilder/icon_reperatur.svg); 
background-image:-moz-linear-gradient(transparent, transparent), url(../bilder/icon_reperatur.svg);
	background-color: #ee443c; 
}

.infobox.infobox-solo {max-width: 820px; margin: auto; margin-bottom: 20px; /*box-shadow: 1px 1px 4px #ccc;*/ width: auto; padding:2px 2% 17px 2%;}

.infobox.infobox-solo:hover .bt_mehr span {background-color:#757575;}

.infobox.infobox-solo .i_headline {width: auto; left:-81px; top:45px;}
.infobox.infobox-solo:hover {color:#424242;}


@media screen and (max-width:1065px) { 
    .infobox.infobox-solo {max-width: 620px;}
    
    .infobox.infobox-solo .i_headline {width: 100%; left:0px; top:-20px;}
}

/* ### Bild Text Box auf weiss ###################################################################### */
.bild_text_w {margin-bottom: 35px;}

.bild_text_w.reverse {
	-webkit-flex-flow: row-reverse nowrap;
			  -ms-flex-flow: row-reverse nowrap;
				  flex-flow: row-reverse nowrap;
	
}

.bt_text_w {background-color: #fff; /*padding: 15px 8% 5px 8%;*/ width:100%; padding-top: 25px;}

.bt_bild_w {width:100%; max-width: 320px;}


@media screen and (min-width:660px) { 
	
	.bild_text_w {
		max-width:none; margin:0;
		display: -webkit-box;
		  display: -webkit-flex;
		  display: -ms-flexbox;
		  display: flex;

		  -webkit-flex-flow: nowrap;
			  -ms-flex-flow: nowrap;
				  flex-flow: nowrap;


		margin-bottom: 45px;
	}
	
	.bt_text_w {width:60%; padding: 0px 0 5px 2%;}
	.reverse .bt_text_w {padding: 0px 2% 5px 0;}
	.bt_bild_w {width:40%;  max-width:none;}
}


@media screen and (min-width:980px) { 
	.bt_text_w {width:60%;}
	.bt_bild_w {width:40%; }
	.small .bt_text_w {width:63%;}
	.small .bt_bild_w {width:37%; }
	
}

.bt_bild_w img {width:100%;  height: auto;}


/* ### Fahrräder & Zubehör ###################################################################### */
.fahrradboxen {
		
		display: -webkit-box;
		  display: -webkit-flex;
		  display: -ms-flexbox;
		  display: flex;

		  -webkit-flex-flow: wrap;
			  -ms-flex-flow: wrap;
				  flex-flow: wrap;

		/*-webkit-box-pack:justify;
			  -ms-flex-pack:justify;
				-webkit-justify-content:space-between;
				  justify-content:space-between;*/
		margin-bottom: 45px;
	}


.fahrradbox {width:100%; background-color: #fff; max-width: 396px; margin: auto; margin-bottom: 25px; padding: 0 3% 20px 3%;
	display: -webkit-box;
		  display: -webkit-flex;
		  display: -ms-flexbox;
		  display: flex;
	
			-webkit-box-orient:vertical;
  
  -webkit-box-direction:normal;
  
      -ms-flex-direction:column;
  		-webkit-flex-direction:column;
          flex-direction:column;
			-ms-flex-line-pack: stretch;
			    -webkit-align-content: stretch;
				align-content: stretch;
			-webkit-box-pack: justify;
			    -ms-flex-pack: justify;
			        -webkit-justify-content: space-between;
					justify-content: space-between;
}

@media screen and (min-width:660px) { 
	.fahrradbox {width:48%; margin: inherit; margin-bottom: 25px; margin-right: 4%;}
	.fahrradbox:nth-child(2n+2) { margin-right: 0;}
}

@media screen and (min-width:880px) { 
	.fahrradbox {width:31.874999999999996%; margin-right: 2.188%;}
	.fahrradbox:nth-child(2n+2) { margin-right: 2.188%;}
	.fahrradbox:nth-child(3n+3) { margin-right: 0;}
}


.fahrrad_textarea {
	
	
	
}

.fahrrad_headline {padding: 12px 0 0 0;}
.fahrradbox h2 {text-align: center; color: #424242; font-size:1.800rem; font-weight: 600; text-transform: uppercase; margin-bottom: 3px;}
.fahrradbox h3{text-align: center; color: #424242; font-size:1.800rem; font-weight: 400;}
.fahrrad_headline:after {content:''; display: block; width:19px; height: 2px; background-color:#ee443c; margin: 5px auto 12px auto;}
.fahrrad_bild {margin-bottom: 15px;}
.fahrrad_bild img {width:100%; height: auto;}
.fahrrad_text {padding:15px 8% 5px 8%;}

.fahrrad_infos li {list-style: none; position:relative;}
.fahrrad_infos li:before {content:'●'; color:#ee443c; position: absolute; top:-1px; left:-12px; display: block;}
.fahrrad_preis {font-size:1.600rem; font-weight: 500; border-bottom: 1px solid #ee443c; margin-top: 15px; padding-bottom: 5px;}
.fahrrad_probe {display: inline-block; background-color:#757575; color:#fff; background-image:url(../bilder/pfeil_link_w.png); background-size: 16px auto; background-repeat: no-repeat; background-position: 5px 6px; padding: 2px 8px 0px 27px; margin: 12px 0px 8px 0px;}
.fahrrad_probe:hover {background-color:#ee443c; color:#fff;}
.fahrrad_url {display: inline-block;}

.zubehoer_more {border-top: 1px solid #ee443c; margin-top: 12px; padding-top: 5px;}


/* ### Newsboxen & Team ###################################################################### */

.newsboxen {
		
		display: -webkit-box;
		  display: -webkit-flex;
		  display: -ms-flexbox;
		  display: flex;

		  -webkit-flex-flow: wrap;
			  -ms-flex-flow: wrap;
				  flex-flow: wrap;

		/*-webkit-box-pack:justify;
			  -ms-flex-pack:justify;
				-webkit-justify-content:space-between;
				  justify-content:space-between;*/
		margin-bottom: 45px;
	}

.newsbox {width:100%; background-color: #fff; max-width: 396px; margin: auto; margin-bottom: 25px;}

@media screen and (min-width:660px) { 
	.newsbox {width:48%; margin: inherit; margin-bottom: 25px; margin-right: 4%;}
	.newsbox:nth-child(2n+2) { margin-right: 0;}
}

@media screen and (min-width:880px) { 
	.newsbox {width:31.874999999999996%; margin-right: 2.188%;}
	.newsbox:nth-child(2n+2) { margin-right: 2.188%;}
	.newsbox:nth-child(3n+3) { margin-right: 0;}
}


.news_headline h2 {text-align: center; color: #424242; font-size:1.800rem; font-weight: 600;}
.news_headline h2:after {content:''; display: block; width:19px; height: 2px; background-color:#ee443c; margin: 2px auto 12px auto;}
.news_bild {position: relative;}
.news_bild img {width:100%; height: auto;}
.news_text {padding:15px 8% 5px 8%;}


.team_headline {text-align: center; padding-bottom: 10px;}
.team_headline h2 {text-align: center; color: #424242; font-size:1.800rem; font-weight: 600; text-transform: uppercase;}
.team_headline:after {content:''; display: block; width:19px; height: 2px; background-color:#ee443c; margin: 2px auto 2px auto;}
.team_headline p {padding-bottom: 2px;}
.team_text {padding-bottom: 20px;}

.play_button {position: absolute; left:0px; top:0px; display: block; width:100%;}
.play_button img {width:100%; height: auto;}

/* ### Rubrikenboxen ###################################################################### */

.rubrikboxen {
		
		display: -webkit-box;
		  display: -webkit-flex;
		  display: -ms-flexbox;
		  display: flex;

		  -webkit-flex-flow: wrap;
			  -ms-flex-flow: wrap;
				  flex-flow: wrap;

		/*-webkit-box-pack:justify;
			  -ms-flex-pack:justify;
				-webkit-justify-content:space-between;
				  justify-content:space-between;*/
		margin-bottom: 45px;
	}

.rubrikbox {width:100%; background-color: #fff; max-width: 396px; margin: auto; margin-bottom: 25px; padding-bottom: 12px;}

@media screen and (min-width:660px) { 
	.rubrikbox {width:48%; margin: inherit; margin-bottom: 25px; margin-right: 4%;}
	.rubrikbox:nth-child(2n+2) { margin-right: 0;}
}

@media screen and (min-width:880px) { 
	.rubrikbox {width:31.874999999999996%; margin-right: 2.188%;}
	.rubrikbox:nth-child(2n+2) { margin-right: 2.188%;}
	.rubrikbox:nth-child(3n+3) { margin-right: 0;}
}

.rubrik_headline {text-align: center;}
.rubrikbox h2 {text-align: center; color: #424242; font-size:1.800rem; font-weight: 600;}
.rubrikbox p {padding-bottom: 2px;}
.rubrik_headline:after {content:''; display: block; width:19px; height: 2px; background-color:#ee443c; margin: 2px auto 2px auto;}
.rubrik_bild img {width:100%; height: auto;}
.rubrik_text {padding:15px 8% 5px 8%;}

.rubrik_lb {text-align: center;}
.rubrik_link {display: inline-block; background-color:#757575; color:#fff; background-image:url(../bilder/pfeil_link_w.png); background-size: 16px auto; background-repeat: no-repeat; background-position: 5px 6px; padding: 2px 8px 0px 27px; margin: 12px 0px 8px 0px;}
.rubrik_link:hover {background-color:#ee443c; color:#fff;}



/* ### Map & Adresse ###################################################################### */



.map_adresse {background-color:#fff; padding:25px 3% 25px 3%;}
.map_adresse h2 {text-transform: uppercase; margin-bottom: 5px;}
.map_adresse a {color:#424242;}
.map_adresse a:hover {color:#ee443c;}

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*.map {width:45%;}
.map_adresse {width:45%;}
.map .embed-container {padding-bottom: 100%;} */

@media screen and (min-width:860px) {
	
	.map_flex {
	display: -webkit-box;
		  display: -webkit-flex;
		  display: -ms-flexbox;
		  display: flex;

		  -webkit-flex-flow: wrap;
			  -ms-flex-flow: wrap;
				  flex-flow: wrap;

		-webkit-box-pack:justify;
			  -ms-flex-pack:justify;
				-webkit-justify-content:space-between;
				  justify-content:space-between;
}
	
	.map {width:calc(95% - 300px);}
.map_adresse {width:300px;}
	.map .embed-container { padding-bottom: 75%;}
	
}

@media screen and (min-width:980px) {
	.map .embed-container { padding-bottom: 65%;}
	
}

@media screen and (min-width:1090px) {
	.map .embed-container { padding-bottom: 56.25%;}
	
}


/* ### Header ###################################################################### */
header {font-size:1.400rem;}


.icons_mobil {display:block;}
.sprache {display: block; text-align: center; font-size:1.200rem; margin-top: 25px; margin-bottom: 10px;}

.icons {text-align: center;}

@media screen and (min-width:880px) {
	.icons_mobil {display:none;}
	.sprache { display: inline-block; padding-top: 10px; margin:0; margin-right: 5px;}
	.icons {text-align:inherit;}
}	
.sprache a {color:#424242; margin: 0;}
.sprache a:hover, .sprache a.active {color:#ee443c;}

.linie_top {background-color: #ee443c; height: 4px; width: 100%;}




.icons_re {float: right;}




.icons i {
	display: block;
	width:30px;
	height: 30px;
	color:#ee443c;
}

.icons a {

	height: 30px;
	color:#ee443c;
	margin-left: 5px;
	display: inline-block;
	
}



.icons a span {
	background-color: #fff; 
	height: 30px;
	border-bottom: 1px solid #ee443c;
	border-right: 1px solid #ee443c;
	padding: 0px;
	font-size:0rem;
	text-align: center;
	line-height: 1;
	display: block;
	width:1px;
	-webkit-transition: all 0.6s; /* Safari 3.1 to 6.0 */
    transition: all 0.6s;
}

@media screen and (min-width:880px) {

	.icons a {display: inherit;}
	
.icons a:hover span {
	padding: 10px 10px 0px 10px;
	font-size:1.400rem;
	
}

.icons a.icon_uhr:hover span {
	width:140px;
	
}

.icons a.icon_lage:hover span {
	width:80px;
	
}

.icons a.icon_reperatur:hover span {
	width:180px;
	
}

}	
	
.icon_uhr i {
	background:url(../bilder/icon_uhr.png) 6px center no-repeat; background-size: 18px; 
	background-image:linear-gradient(transparent, transparent), url(../bilder/icon_uhr.svg); 
background-image:-webkit-linear-gradient(transparent, transparent), url(../bilder/icon_uhr.svg); 
background-image:-o-linear-gradient(transparent, transparent), url(../bilder/icon_uhr.svg); 
background-image:-moz-linear-gradient(transparent, transparent), url(../bilder/icon_uhr.svg);
	background-color: #ee443c; 
}

.icon_lage i {
	background:url(../bilder/icon_lage.png) 9px center no-repeat; background-size: 12px 19px; 
	background-image:linear-gradient(transparent, transparent), url(../bilder/icon_lage.svg); 
background-image:-webkit-linear-gradient(transparent, transparent), url(../bilder/icon_lage.svg); 
background-image:-o-linear-gradient(transparent, transparent), url(../bilder/icon_lage.svg); 
background-image:-moz-linear-gradient(transparent, transparent), url(../bilder/icon_lage.svg);
	background-color: #ee443c; 
}

.icon_reperatur i {
	background:url(../bilder/icon_reperatur.png) 6px center no-repeat; background-size: 18px; 
	background-image:linear-gradient(transparent, transparent), url(../bilder/icon_reperatur.svg); 
background-image:-webkit-linear-gradient(transparent, transparent), url(../bilder/icon_reperatur.svg); 
background-image:-o-linear-gradient(transparent, transparent), url(../bilder/icon_reperatur.svg); 
background-image:-moz-linear-gradient(transparent, transparent), url(../bilder/icon_reperatur.svg);
	background-color: #ee443c; 
}
	


.logo_box {width:200px; text-align: center; margin: auto;  z-index: -1; margin-top: 10px; margin-bottom: 20px;}


@media screen and (min-width:880px) {
	.logo_box {margin-top: -16px; padding-bottom: 8px;}
}

@media screen and (max-width:880px) {
	
	.icons_re {display: none; }
	
}





/* ### NAVI ###################################################################### */

header nav ul {text-align: center; margin: 0px; padding: 0px; }
header nav ul ul {padding-bottom: 10px; padding-top: 3px;}
header nav ul li {margin: 0px; list-style: none; display: block; padding:6px 0;}
header nav ul li a:hover, header nav ul li a.active {color:#ee443c;}
header nav ul li a {text-transform: uppercase;  display: block; color:#424242; position:relative;}
header nav ul ul li a {text-transform:none; display: block; color:#424242; padding:0;}

span.helv {font-family: Helvetica, Arial, "sans-serif";}

nav {display: none; padding-bottom: 25px;}

@media screen and (min-width:880px) {
nav { position: relative; padding-bottom: 10px; display: block !important;}
nav .linie {width:100%; height: 1px; background-color:#ee443c; position: absolute; top:24px; }
header nav ul { margin-top: 25px;}
header nav ul li {display: inline-block; padding: 0 2.5%;}
header nav ul li a {text-transform: uppercase;  display: block; color:#424242; position:relative;}

.no-touch header nav ul li a:hover:after, header nav ul li a.active:after {content:''; display: block;
background:url(../bilder/pfeil_navi.png) top center no-repeat; background-size: 16px 8px; height: 8px; width: 100%; position: absolute; top:16px;
	background-image:linear-gradient(transparent, transparent), url(../bilder/pfeil_navi.svg); 
background-image:-webkit-linear-gradient(transparent, transparent), url(../bilder/pfeil_navi.svg); 
background-image:-o-linear-gradient(transparent, transparent), url(../bilder/pfeil_navi.svg); 
background-image:-moz-linear-gradient(transparent, transparent), url(../bilder/pfeil_navi.svg);

}


header nav ul ul {position:absolute; width:100%; left:0px; top:10px; padding: 0px;}
header nav ul ul li {padding: 0 0.5%;}
header nav ul ul li a {padding:3px 3px 2px 3px;}
header nav ul ul li a:hover, header nav ul ul li a.active {background-color:#ee443c; color:#fff;}
.no-touch header nav ul ul li a:hover:after, header nav ul ul li a.active:after {display: none;}


header nav ul li a {margin-bottom:20px;}
header nav ul li a.active {margin-bottom:50px;}

}	
	

.lines-button {display:block; position:absolute; top:10px; height:34px; width:40px; right:12px; z-index:3; background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border:none; padding:0px; text-align:center; cursor:pointer;}

@media screen and (min-width:880px) {
	.lines-button {display:none;}
}

.lines-button:hover {
    opacity: 1;
    filter:alpha(opacity=100);
}
.lines-button:active {
}
.lines {
    background: #ee443c none repeat scroll 0 0;
    border-radius: 0.28571rem;
    display: inline-block;
    height:5px;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
    width:40px;
    /*width: 2rem;*/
}
.lines:before, .lines:after {
    background: #ee443c none repeat scroll 0 0;
    border-radius: 0.28571rem;
    content: "";
    display: inline-block;
    height:5px;
    left: 0;
    position: absolute;
    -webkit-transform-origin: 0.28571rem center 0;
        -ms-transform-origin: 0.28571rem center 0;
            transform-origin: 0.28571rem center 0;
    -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
    width:40px;
    /*width: 2rem;*/
}
.lines:before {
    top:11px;

}
.lines:after {
    top:-12px;
}

.lines-button.close {
    /*-webkit-transform: scale3d(0.8, 0.8, 0.8);
            transform: scale3d(0.8, 0.8, 0.8);*/
}
.lines-button.arrow.close .lines:before, .lines-button.arrow.close .lines:after {
    top: 0;
    width:30px;
    width: 2.22222rem;
}
.lines-button.arrow.close .lines:before {
    -webkit-transform: rotate3d(0, 0, 1, 40deg);
            transform: rotate3d(0, 0, 1, 40deg);
}
.lines-button.arrow.close .lines:after {
    -webkit-transform: rotate3d(0, 0, 1, -40deg);
            transform: rotate3d(0, 0, 1, -40deg);
}
.lines-button.arrow-up.close {
    -webkit-transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, 90deg);
            transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, 90deg);
}
.lines-button.minus.close .lines:before, .lines-button.minus.close .lines:after {
    top: 0;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    width:48px;
    width: 3rem;
}
.lines-button.x.close .lines {
    background: transparent none repeat scroll 0 0;
}
.lines-button.x.close .lines:before, .lines-button.x.close .lines:after {
    top: 0;
    -webkit-transform-origin: 50% 50% 0;
        -ms-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    /*width:48px;
    width: 3rem;*/
}
.lines-button.x.close .lines:before {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
}
.lines-button.x.close .lines:after {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
}


.navi_3 {text-align: center; margin-bottom: 20px;}
.navi_3 ul {padding:0; margin: 0;}
.navi_3 li {list-style: none; display: inline-block; padding: 0 1%; margin: auto;}
.navi_3 a {color:#424242; display: inline-block; }
.navi_3 a:hover, .navi_3 a.active {color:#ee443c;}

/* ### BANNER / SLIDER ###################################################################### */
.banner_box {width: 100%; overflow: hidden; margin-bottom: 45px;}

.banner img {width:200%; height: auto; margin-left: -50%;}


@media screen and (min-width:440px) {
	.banner img {width:150%; height: auto; margin-left: -25%;}
}


@media screen and (min-width:660px) {
	.banner img {width:100%; height: auto; margin:inherit;}
}

.banner_slider {margin-bottom: 35px;}

.slider_bild {position: relative;}

.slider_bild img {width:200%; height: auto;}

.banner_slider .caption {padding: 5px 2%; text-align: center; border-bottom:1px solid #b3b3b3; /*border-top:1px solid #b3b3b3;*/ background-color: #fff; margin-top: 0px;}


@media screen and (min-width:440px) {
	.slider_bild img {width:150%; height: auto; }
}

@media screen and (min-width:660px) {
	.slider_bild img {width:100%; height: auto; margin:inherit;}
}

@media screen and (min-width:880px) {
	.banner_slider .caption {position: absolute; right: 3%; bottom:25px; border-bottom:none; text-align: left; padding: 5px 1%;}
}


/* ### INFOBOXEN ###################################################################### */

.infoboxen { font-size:1.400rem; line-height: 2.00rem; padding-top: 12px;}


.infobox {display: block; width:100%; max-width: 350px; border:1px solid #b3b3b3; text-align: center; position: relative; padding: 25px 2% 15px 2%; color:#424242; margin: auto; margin-bottom: 35px; }
a.infobox:hover {color:#ee443c;}
.infobox .i_headline {position: absolute; top:-12px; left:0px; text-align: center; width: 100%;}
.infobox h2 {background-color:#ee443c; color:#fff; display: inline-block; font-weight: 600; text-transform: uppercase; padding:6px 15px 4px 15px; min-width: 128px;}
.infobox h3 {font-size:1.600rem; font-weight: 600; margin-top: 13px;}
.infobox h3:after {content:''; display: block; width:19px; height: 2px; background-color:#ee443c; margin: 6px auto 8px auto;}

@media screen and (min-width:860px) {
	.infobox {width:31.874999999999996%; margin:inherit; max-width:inherit;}
	
	.flex_infoboxen {
		
		display: -webkit-box;
		  display: -webkit-flex;
		  display: -ms-flexbox;
		  display: flex;

		  -webkit-flex-flow: wrap;
			  -ms-flex-flow: wrap;
				  flex-flow: wrap;

		-webkit-box-pack:justify;
			  -ms-flex-pack:justify;
				-webkit-justify-content:space-between;
				  justify-content:space-between;
	}
	
}

/* ### FOOTER ###################################################################### */
footer {display: block; margin-top: 45px;}
footer p {padding: 0;}
.footer_linie {height: 28px;}
.footer_linie .inner {position:relative; }
.f_top {width:60px; background-color: #fff; position: absolute; right: 0px; top:-7px; text-align: right;}
.f_top a {display: inline-block; text-transform: uppercase; padding-left:22px; font-size:1.500rem; 

background:url(../bilder/pfeil_navi.png) top center no-repeat; background-size: 16px 8px;  background-position: 0px 2px;
	background-image:linear-gradient(transparent, transparent), url(../bilder/pfeil_navi.svg); 
background-image:-webkit-linear-gradient(transparent, transparent), url(../bilder/pfeil_navi.svg); 
background-image:-o-linear-gradient(transparent, transparent), url(../bilder/pfeil_navi.svg); 
background-image:-moz-linear-gradient(transparent, transparent), url(../bilder/pfeil_navi.svg);
}

.f_linie {background-color:#ee443c; height: 1px;  width:100%;}

.footer_box {background-color: #6c6c6c; color:#f1f1f1;}


.footer_box .logo_box {padding-top:35px;}

.f_headline {font-size:1.800rem; font-weight: 200; text-align: center; letter-spacing: 1.2px; padding-bottom: 25px; line-height: 2.800rem;}
.f_headline a:hover {color:#f1f1f1;}
@media screen and (max-width:500px) {
	.f_headline span {display: block;}
}



.f_logos {text-align: center; padding-bottom: 25px;}
.f_logos a {display: inline-block; margin: 0 10px 10px 10px;}

.f_spalten {font-size:1.400rem; line-height: 2.100rem; 
-webkit-flex-flow: wrap;
      -ms-flex-flow: wrap;
          flex-flow: wrap;
}
.f_spalten h3 {text-transform: uppercase; font-size:1.600rem; padding-bottom: 4px; font-weight: 500;}
.f_spalten strong {font-weight: 500;}
.f_spalten a {color:#f1f1f1;}
.f_spalten a:hover {color:#ee443c;}
.link_pfeil_w {background-image:url(../bilder/pfeil_link_w.png); background-size: 16px auto; background-repeat: no-repeat; background-position: 0px 5px; padding-left: 20px;}
.f_spalten a.link_pfeil_r {background-image:url(../bilder/pfeil_link_r.png); background-size: 16px auto; background-repeat: no-repeat; background-position: 0px 5px; padding-left: 20px; color:#ee443c;}
.f_spalten a.link_pfeil_r:hover {color:#f1f1f1;}

.f_spalte { width:100%; margin-bottom: 35px; text-align: center;}


@media screen and (min-width:480px) {
	.f_spalte {width:50%; text-align: left; padding-left:2%; border-right:1px solid #909090;}
	.f_spalten h3 {padding-bottom: 12px;}
}

@media screen and (min-width:800px) {

.f_spalten {
-webkit-flex-flow: nowrap;
      -ms-flex-flow: nowrap;
          flex-flow: nowrap;
}	
	
.f_spalte {width:200px; /*-webkit-flex-basis: 25%; flex-basis: 25%;*/ -webkit-flex-grow: 1; -webkit-flex-shrink: 1; flex-grow: 1; flex-shrink: 1;}	
	
.f_spalte:last-of-type {border-right:none;}

.f_spalte:nth-of-type(1) {-webkit-flex-grow: 0.9; flex-grow: 0.9; padding-left:0;}
.f_spalte:nth-of-type(2) {-webkit-flex-grow: 1; flex-grow: 1;}
.f_spalte:nth-of-type(3) {-webkit-flex-grow: 1; flex-grow: 1;}
.f_spalte:nth-of-type(4) {-webkit-flex-grow: 2; flex-grow: 2;}
}

/* Newsletter Form */

#newsletter_form {margin-top: 5px;}


/* 
--------- Y-FORM ------------ 
*/

.logout {text-align: right;}
.logout a {color: #ee443c;}
.logout a:hover { color: #424242;}


#werkstattkalender .alert ul {display:block;}

.alert ul {display:none;}

.alert, .has-error {
    color: #ee443c;
    
	
	}


.yform .has-error input, .yform .has-error textarea {
	border: 1px solid #ee443c;
}


.yform label {display:none;}
#werkstattkalender .yform .radio label {display:inline-block;}

/* #ycom_form label {display:inline-block;} */
#ycom_form {margin-bottom: 35px;}

.yform .checkbox label {display: block;}


.yform input,
.yform textarea {
    width: 100%;
    box-sizing: border-box; 
	padding:2px 0.8em 0 0.8em;
	line-height:1.6;
	color:#424242;
	margin-bottom: 5px;
	background-color: #f1f2f1;
	border:1px solid #f1f2f1;
	}


.yform textarea {
	height: 110px;
}

.yform select {
	background-color: white;
    border: 1px solid #c8c8c7;
    color: black;
    line-height: 1.6;
    margin-bottom: 0.4em;
    padding: 0 0.8em;
	}

.yform .checkbox input {
	width: auto;
}


.yform .form-captcha {margin-top: 5px;}

.yform .form-captcha label {
	display: block;
      text-align: left;
	  border:none;
	
}

.yform .form-captcha img {
	margin-bottom: 5px;
	display: inline-block;
}

.yform button[type=submit] {
	display: inline-block; background-color:#757575; color:#fff; background-image:url(../bilder/pfeil_link_w.png); background-size: 16px auto; background-repeat: no-repeat; background-position: 5px 4px; padding: 4px 8px 2px 27px; margin: 5px 0px 8px 0px; border:none;
	
}

.yform button[type=submit]:hover {background-color:#ee443c; color:#fff;}


#werkstattkalender input[type="text"].reperaturkalender-suche-input {
padding: 0.5em 0.6em;
display: inline-block;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 3px #ddd;
box-shadow: inset 0 1px 3px #ddd;
border-radius: 4px;
vertical-align: middle;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 0px;
width: 200px;	
}	

/* ### SPECIAL ###################################################################### */

#offline-404-frontend-msg {
    background: darkred none repeat scroll 0 0;
    border: 1px solid #fff;
    color: white;
    font-family: Arial,sans-serif;
    font-size: 13px;
    left: 0;
    padding: 4px;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    z-index: 10000;
}


/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}