@charset "UTF-8";
/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework
 *
 * (en) Screen layout for YAML examples
 * (de) Bildschirmlayout für YAML-Beispiele
 *
 * @copyright       Copyright 2005-2009, Dirk Jesse
 * @license         CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-C (http://www.yaml.de/en/license/license-conditions.html)
 * @link            http://www.yaml.de
 * @package         yaml
 * @version         3.2
 * @revision        $Revision: 430 $
 * @lastmodified    $Date: 2009-10-27 21:15:57 +0100 (Di, 27. Okt 2009) $
 */

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

/* menu icon */



/*produkt slider*/
	.rslidesres {
		display:none !important;
	}

	.slideresnav {
		display:none;
	}

	.mobile-carousel {
		display: none !important;
	}

	#header #header-mobile-nav {
		display: none;
	}


}


/*slider*/

 @media screen and (min-width: 200px) and (max-width:974px){
	.slidenav {
		display:none;
	}

	.table_scroller {
	  width: 100%;
	  overflow-y: auto;
	  margin: 0 0 1em;
	}

	.table_scroller::-webkit-scrollbar {
	  -webkit-appearance: none;
	  width: 14px;
	  height: 14px;
	}

	.table_scroller::-webkit-scrollbar-thumb {
	  border-radius: 8px;
	  border: 3px solid #fff;
	  background-color: rgba(0, 0, 0, .3);
	}

 }

 @media screen and (min-width: 200px) and (max-width:900px){
	.rslides {
		display:none;
	}



	.rslidesres {
		display:block;
	}

 }

 @media screen and (min-width: 900px) and (max-width:974px){
	.rslides {
		display:block;
	}


	.rslidesres {
		display: none;
	}
 }


 @media screen and (max-width:974px){


	/* HEADER */

	.field.fieldFilter {
		display: none;
	}

	#headerLogo img {
		/*margin-top: 25px;*/
		margin-left: 15px;
		max-width: 70%;
		height: auto;
	}

	.mobile-switch {
		font-family: Arial;
		float: right;
		margin: 10px 20px 0 0;
		line-height: 22px;
		font-size: 15px;
	}

	.mobile-switch a{
		color: c00 !important;
		font-weight:. bold !important;
		font-size:18px !important;
	}

	.mobile-switch a.active{
		color: grey !important;
	}

	.mobile-switch a:hover{
		color: grey !important;
	}
	
	.mobile-switch li, .mobile-switch li a {
		display: inline !important;
		border-bottom: none !important;
		margin-left: 0 !important;
		padding-left: 0 !important;
		font-size: 18px !important;
	}
	
	.mobile-switch li a {
		color: #cc0000 !important;
	}

	#servicemenu{
		display:none !important;
	}

	/*mobile navigation*/

	#subnav {
		border-bottom: 4px solid #cdcdcd;
	}

	#subnav a {
		background-image: none !important;
	}

	#header #header-mobile-nav {
		width: 100%;
		display:block;
		height: 90px;
		font-family: wuerthextra_bold_cond, Arial, Helvetica, sans-serif;
	}

	#header #header-mobile-nav #nav-mobile {
		position: absolute;
		border-top: 4px solid #cdcdcd;
		border-left: 4px solid #cdcdcd;
		border-bottom: 4px solid #cdcdcd;
		top: 100px;
		box-sizing: border-box;
		width: 300px;
		z-index: 1000;
		background-color: #fff;
		list-style-type: none;
		display: none;
	}

	#header #header-mobile-nav #nav-mobile li .icon{
		background-position: -262px -287px;
		background-repeat: no-repeat;
		width: 10px;
		height: 17px;
		float: left;
		margin: 5px 10px 0 10px;
	}


	#header #header-mobile-nav #nav-mobile li {
		padding: 8px 0;
		width: 100%;
		padding-left: 0px;
		margin: 0;
		text-align: left;
		border-bottom: 3px solid #cdcdcd;
		color: #000000;
		font-size: 21px;
		line-height: 27px;
		padding-left: 0px;
		display: block;
		overflow: hidden;
	}

	#header #header-mobile-nav #nav-mobile li span.label {
		height: 26px;
		overflow: hidden;
		display: block;
		cursor: pointer;
		text-transform: uppercase;
	}

	#header #header-mobile-nav #nav-mobile li span.label.active {
		color: #cc0000;
	}

	#header #header-mobile-nav #nav-mobile li p.navLink {
		display: block;
		overflow: hidden;
		display: none;
		position: relative;
		margin-bottom: 0;
		text-transform: uppercase;
	}

	#header #header-mobile-nav #nav-mobile li:last-child {
		border-bottom: 0;
	}

	#header #header-mobile-nav li a{
		color: #000000;
		font-size: 18px;
		line-height: 27px;
		padding-left: 10px;
		display: block;
		margin-left: 30px;
	}

	#header #header-mobile-nav li a.active {
		color: #cc0000;
	}

	#header #header-mobile-nav li a:hover {
		color: #cc0000;
	}



	#header #header-mobile-nav img {
		float: left;
		margin-top: 20px;
	}

	#header #header-mobile-nav #nav-mobile ul {
		display: none;
		position: relative;
		padding-left: 0px;
		list-style-type: none;
		padding-top: 5px;
	}

	#header #header-mobile-nav #nav-mobile li ul.subnav {
		display: none;
	}

	#header #header-mobile-nav #nav-mobile li.open > ul,
	#header #header-mobile-nav #nav-mobile li.open .navLink {
		display: block;
	}

	#header #header-mobile-nav #nav-mobile li ul li {
		box-sizing: border-box;
		font-size: 15px;
		font-weight: normal;
		font-family: Arial, Arial, Helvetica, sans-serif;
		border-bottom: 0;
		padding: 2px 0 2px 20px;
		border-bottom: 1px solid #cdcdcd;
	}

	#header #header-mobile-nav #nav-mobile li ul li a{
		font-size: 15px;
		line-height: 19px;
		padding: 3px 10px 0 0;
	}

	#header #header-mobile-nav #nav-mobile li ul li ul {
		margin: 0px 0 10px 0;
	}

 	#header #header-mobile-nav #nav-mobile li ul li ul li {
		border-bottom: 0;
	}


	#menu-icon {
		display:inline-block;
		background-position: -475px -173px !important;
		width: 40px;
		height: 40px;
		background-color: #ffffff;
		float: right;
		margin: 20px 10px 0 0;
	}

	#mobile-icons {
		display: inline-block;
		float: right;
		width: 130px;
		height: 21px;
		margin-top: 28px;
		margin-right: 20px;
	}

	#mobile-icons .icon {
		width: 21px;
		height: 21px;
		background-position: 0 0;
		display: inline-block;
		float: left;
		margin-right: 28px;
	}

	#mobile-icons .icon.login {
		background-position: -457px -734px;
		padding-left: 0px !important;
		cursor: pointer;
	}

	#mobile-icons .icon.cart {
		background-position: -423px -734px;
		cursor: pointer;
		margin-right: 0;
	}

	#mobile-icons .icon.search {
		background-position: -389px -734px;
		cursor: pointer;
	}


	/* ShopIntegration */

	.btnOpenUserHeader {
		margin-left: 0 !important;
		padding-left: 0 !important;
		font-size: 21px !important;
		text-transform: uppercase !important;
	}

	.service_detail_text .btnOpenUserHeader {
		font-size: 13px !important;
	}


	.btnOpenUserHeader .icon{
		background-position: 0 0 !important;
		width: 27px !important;
		height: 27px !important;
		margin-top: 0 !important;

	}

	#headerUserlayer .arrow {
		display: none !important;
	}

	#header #headerUserlayer .layerColumns {
		background: none !important;
	}

	#header #headerUserlayer .layerColumns.fixed .layerColumn .columnFooter {
		position: relative !important;
		left: 0 !important;
		top: 0 !important;
		display: block !important;
	}

	#headerUserlayer .layerColumn {
		width: 100% !important;
		height: auto !important;
		float: left !important;
	}

	#headerUserlayer .layerColumn .border {
		padding-left: 0 !important;
	}

	#headerUserlayer .formGroup {
		width: 100% !important;
	}

	#headerUserlayer .form label,
	#headerUserlayer .form .label {
		display: block !important;
		font-family: Arial, Arial, Helvetica, sans-serif !important;
		font-weight: normal !important;
		margin-bottom: 3px !important;
		font-size: 16px !important;
		text-transform: none !important;
	}

	.formGroup .colorButton.blue {
		width: 100% !important;
	}

	.pullRight {
		float: left !important;
	}

	#accessDataBox {
		margin-bottom: 30px !important;
	}

	#accessDataBox input {
		float: left !important;
		margin-right: 5px !important;
	}

	#accessDataBox label {
		float: left !important;
		width: 80% !important;
		line-height: 16px !important;
	}


	/* CONTENT */

	#col1 {
		display: none !important;
	}


	/* carousel */
	.mobile-carousel {
		display: block;
	}

	.section-title {
		color: #cc0000;
		font-size: 18px;
		line-height: 26px;
		font-family: wuerthextra_bold_cond, Arial, Helvetica, sans-serif;
		margin-bottom: 5px;
	}

	.text-produkt {
		color: black;
		font-weight: bold;
	}

	.text-produkt .price {
		color: #cc0000;
		font-size: 28px;
		line-height: 1.5;
		font-family: wuerthextra_bold_cond, Arial, Helvetica, sans-serif;
		font-weight: normal;
		display: block;
		bottom: 5px;
	}
	.main-div-produkt {
		text-align: center;
	}

	.main-div-produkt .img-container {
		display:inline-block;
	}

	p {
		line-height:16px; /*Wrth: Angabe fuer FF unter 64-bit Windows-Systemen*/
	}

	/* FOOTER */
	#footer #footerLayerContainer:not(.flexible),
	#footer #footerLayerContainer.flexible .footerColumn:not(.resVisible) {
		display: none !important;
	}

	#footer #footerLayerContainer.flexible .footerColumn.resVisible{
		width: 50% !important;
		padding: 25px 5px 0 0;
	}
	#footer #footerLayerContainer.flexible .footerColumn span.linkText {
		width: 70% !important;
	}

	#footer #footerLayerContainer.flexible .clear {
		display: none;
	}

	#footer #footerInfo {
		float: left;
		width: 50%;
	}

	#footer #footerNavigation {
		float: right;
		width: 50%;
		padding-top: 0px;
		margin-right: 0px;
		margin-left: 0px;
	}

	#footer #footerNavigation ul {
		float: right;
		margin-top: 7px ;
	}

	#footer #footerNavigation ul li {
		float: none;
		width: 100%;
		list-style-type: none;
		margin: 0;
		padding: 0 0 5px 0px;
		display: block;
	}



	/*ORGANIZE*/

	.res-table {
		border-bottom: 1px #cdcdcd solid;
		margin-bottom: 5px;
	}

	.last-res{
		border-bottom: 0px !important;
		margin-bottom: 5px;
	}





		/*------------------------------------------------------------------------------------------------------*/

	/**
	 * (en) Formatting content container
	 * (de) Formatierung der Inhalts-Container
	 *
	 * |-------------------------------|
	 * | #header                       |
	 * |-------------------------------|
	 * | #col1   | #col3     | #col2   |
	 * | 25%     | flexible  | 25%     |
	 * |-------------------------------|
	 * | #footer                       |
	 * |-------------------------------|
	 */
	/*#col1 {
		display: none;
	}*/

	.page_margins {
		width: 100%;
	}

	body .page_margins {
    margin-bottom: 20px;
}

	#breadcrumb {
		/*display:none;*/
	}

	#col2 {
		width: 100%;
		float: left;
	}

	#col2_content {
		padding: 10px 20px 10px 10px;
	}

	#col3_content {
		padding: 10px;
	}

	#col3 {
/*		margin:0;*/
		float: left;
		margin-left: 0px !important;
		margin-right: 0px !important;
		width: 100%;
	}

	#header #headerToolbar,
	#header #headerToolbar, #header #headerToolbar .page_margins {
		height: 10px;
	}

	#header #headerToolbar .page_margins .page ul {
		display: none !important;
	}

	#header .languageChooser {
		float:left;
		background-color: #cdcdcd;
		color: #fff;
		height: 36px;
		width: 80px;
		padding-top: 6px;
	}

	#header .languageChooser a{
		color: #fff;
		display: block;
		text-align: right;
		margin-right: 14px;

	}

	#header .languageChooser span{
		width: 13px;
		background-position: -1px -36px;
		background-repeat: no-repeat;
		padding: 0 7px;
	}

	#header .languageChooser a:hover{
		text-decoration: underline;
	}

	#header .languageChooser ul{
		display:none;
		margin-top: 5px;
		background-color: #cdcdcd;
		z-index: 100000;
	}

	#header .languageChooser ul li{
		z-index: 100000;
		padding-bottom: 5px;
		padding-top: 5px;
		position: relative;
		background: #cdcdcd;
	}

	#header .languageChooser:hover ul {
		display: block;
	}

	#header .languageChooser ul li:hover{
		display: block;
	}

	#header #headerToolbar ul li a {
		color #fff;
	}

	#header #headerNavigation .navigation {
		right: 0px;
		top:60px;
		width: 100%;
	}

	#header #headerNavigation .navigation li {
		float: none;

		padding-left: 20px;
		list-style: none;
	}

	
	#responsiveSearch {
		position: relative;
		background-color: #ebedf2;
		width: 100%;
		height: 42px;
		display: none;
		margin-bottom: 20px;
	}
	
	#header #responsiveSearch #headerSearch {
		left: 0;
		width: 100%;
		box-sizing: border-box;
		top: 0;
	}
	
	#header #responsiveSearch #headerSearch .page_margins {
		width: 100%;
	}
	
	#header #headerSearch .field.fieldTerm {
		float: right;
		/*width: 812px;*/
		width: 100% !important;
		position: relative;
	}

	#header #headerSearch .field.fieldTerm .searchfield {
		border: 1px solid #fff;
		padding: 0px;
		font-size: 16px;
		float: left;
		margin: 7px 0px 0px 19px;
		width: 80%;
		font-family: Arial,Verdana,sans-serif;
	}

	#header #headerSearch .field.fieldTerm .searchbut
	{
		width: 20px;
		height: 19px;
		float: right;
		margin: 7px 7px 0px 0px;
		display: block;
		overflow: hidden;
		background: url(../../newimages/icon-sprites.png) no-repeat -28px 0px;
		border: none;
		font-size: 0px;
		line-height: 0px;
		text-indent: -1000px;
		cursor: pointer;
	}

	#header #headerSearch .field.fieldTerm .searchbut.busy {
		background: url(../../newimages/loader-linear-19px.gif) no-repeat center center;
	}


	#header #headerSearch .field.fieldTerm .ui-menu {
		padding: 0px;
	}

	#header #headerSearch .field.fieldTerm .ui-autocomplete {
		left: 0px !important;
		top: 33px !important;
		border:none;
		border-bottom: 1px solid #4d4d4d;
		width: 100% !important;
	}

	#header #headerSearch .field.fieldTerm .ui-autocomplete .ui-autocomplete-text {
		color: white;
		font-weight: bolder;
		background-color: #4d4d4d;
		padding: 4px 4px 4px 4px;
		font-size: 13px;
		width: 98% !important;
		float:left;
	}

	#header #headerSearch .field.fieldTerm .ui-autocomplete .ui-autocomplete-headline {
		color: #fff;
		font-weight: bolder;
		background-color: #666;
		padding: 4px 4px 4px 4px;
		font-size: 13px;
	}

	#header #headerSearch .field.fieldTerm .ui-autocomplete .ui-autocomplete-item {
		background-color: #e7e7e7 !important;
		float: left;
		display: block;
		}

	#header #headerSearch .field.fieldTerm .ui-autocomplete .ui-autocomplete-item a {
		font-size: 12px;
		line-height: 19px;
		color: black;
		cursor: pointer;
		padding: 5px 5px 1px 5px;
		display: block;
		height: 42px;
	}

	#header #headerSearch .field.fieldTerm .ui-autocomplete .ui-autocomplete-item a.ui-state-focus,
	#header #headerSearch .field.fieldTerm .ui-autocomplete .ui-autocomplete-item a.ui-state-hover,
	#header #headerSearch .field.fieldTerm .ui-autocomplete .ui-autocomplete-item a.ui-state-active {
		cursor: pointer;
		border: none;
		margin: 0px !important;
		background-color: #CC0000;
		color: #fff;
	}

	#header #headerSearch .field.fieldTerm .ui-autocomplete .ui-autocomplete-item  a span.strongRed {
		color: #C00;
	}

	#header #headerSearch .field.fieldTerm .ui-autocomplete .ui-autocomplete-item a.ui-state-focus span.strongRed,
	#header #headerSearch .field.fieldTerm .ui-autocomplete .ui-autocomplete-item a.ui-state-hover span.strongRed,
	#header #headerSearch .field.fieldTerm .ui-autocomplete .ui-autocomplete-item a.ui-state-active span.strongRed {
		color: #fff !important;
		text-decoration: underline !important;
	}


	#header #headerSearch .field.fieldTerm .ui-autocomplete .ui-autocomplete-item  a .image {
		padding-top: 2px;
		margin-right: 5px;
		float: left;
	}

	#header #headerSearch .field.fieldTerm .ui-autocomplete .ui-autocomplete-item  a .value,
	#header #headerSearch .field.fieldTerm .ui-autocomplete .ui-autocomplete-item  a .label,
	#header #headerSearch .field.fieldTerm .ui-autocomplete .ui-autocomplete-item  a .description {
		float: left;
	}

	#header #headerSearch .field.fieldTerm .ui-autocomplete .ui-autocomplete-item  a .label {
		width: 100%;
	}


	#header #headerSearch .field.full {
		width: 100%;
	}

	#header #headerNavigation {
		display:none;
	}

	.cols_3 {
		margin-top: 15px !important;
	}

	#footer {
		margin-top: 0px;
	}
	
	/* Prefooter */
	.prefooter {
		display: none;
	}
 }


@media screen and (max-width: 974px){
	.yform div.form_text select,
	.yform div.type-select select,	
	input[type="color"],
	input[type="date"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="email"],
	input[type="month"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="text"],
	input[type="time"],
	input[type="url"],
	input[type="week"],
	select:focus,
	textarea {
	  font-size: 16px;
	}
	
	.yform div.error.main {
		width: 97%;
		box-sizing: border-box;
	}
	
	body {
		padding-bottom: 0px !important;
	}

	.subcolumns {
		overflow: unset;
	}

	.mod-content-filter .group-filter .filter-label {
		width: 47% !important;
		margin: 0 2% 10px 0 !important;
	}

	.mod-content-filter .group-filter .filter-label i {
		display: none;
	}

	#header #headerToolbar .page_margins .mod.mod-locator {
		display: none !important;
	}

	#footer .page_margins {
		margin-bottom: 0px;
	}

	#footer #footerInfo {
		float: left;
		width: 100%;
	}

	#footer #footerNavigation {
		float: left;
		width: 100%;
		padding-top: 0px;
		margin-right: 0px;
		margin-left: 0px;
	}

	#footer #footerInfo ul,
	#footer #footerNavigation ul {
		float: left;
		margin-top: 20px ;
		margin-left: 0px;
	}

	#footer #footerInfo ul li,
	#footer #footerNavigation ul li {
		width: 100%;
		float: left;
		padding-right: 0px;
	}
}

@media screen and (max-width: 768px) {
	#mobile-icons {
		width: auto;
		margin-right: 10px;
	}

	#mobile-icons .icon {
		margin-right: 10px;
	}
}

@media screen and (max-width: 478px){
	#footer #footerLayerContainer.flexible .footerColumn.resVisible{
		width: 100% !important;
	}
}

@media screen and (max-width: 280px){
	#headerLogo img {
		max-width: 50%;
	}

	#header #header-mobile-nav #nav-mobile {
		width: 100%;
	}
}