/*******************************
** ECO Finder Neue Darstellung  
*******************************/

/***** REM / PX ******

0.625rem = 10px
1rem = 16px
1.25rem = 20px
2.5rem = 40px
3.75rem = 60px
7.5rem = 120px

**********************/

/*.finder-links{display: flex;justify-content: space-between;margin-bottom:3rem;gap:15px}*/

.finder-links{margin-bottom:3.75rem;display: grid;gap:1.25rem;grid-template-columns:1fr 1fr}

.finder-links a{flex:1 1;aspect-ratio:1 / 1;background-color:#e8e8e8;display:flex;flex-direction:column;align-items:center;justify-content:space-around;font-size: 1.1rem;font-family: 'National';font-weight: 700;text-decoration:none}
.finder-links a span{text-align:center;line-height: 1.2;color:#000}

.finder-links a.active{color:#fff;background-color:#747474;}
.finder-links a.active span{color:#fff}

.finder-links a.active svg .st0{stroke:#fff}
.finder-links a.active svg .st1{fill:#fff}

@media (min-width: 768px) {
	.finder-links{margin-bottom:7.5rem;display: grid;gap:2.5rem;grid-template-columns:1fr 1fr 1fr}
}

@media (min-width: 1200px) {
	.finder-links{margin-bottom:7.5rem;display: grid;gap:2.5rem;grid-template-columns:1fr 1fr 1fr 1fr 1fr}
	.finder-links svg{max-width:150px;height:auto}
}

@media (min-width: 1400px) {
	.finder-links svg{max-width:200px;height:auto}
}


@media (max-width: 767px) {
	.finder-links{margin-bottom:3.75rem;display: grid;gap:1.25rem;grid-template-columns:1fr}
	.finder-links a{flex:1 1;aspect-ratio:unset;flex-direction:row;align-items:center;justify-content:space-between;font-size: 1.1rem;font-family: 'National';font-weight: 700;text-decoration:none;justify-content: flex-start;}
    .finder-links svg{max-width:120px;height:auto}
}


#filterSubmit{display:none}

/*Filter*/

.filterbox{background-color:#E8E8E8;padding:1.25rem;margin-bottom:3.75rem}


.filterbox-headrow{display:flex;justify-content:space-between;flex-direction:column;}

.filterbox-footrow{font-size:1.1rem; font-weight:700;display:flex;justify-content:center}

.filterbox.open .filterbox-headrow{padding-bottom: 10px;margin-bottom:10px;border-bottom: solid 1px #000;}

.filterbox-headrow div{font-size: 1rem;}
.filterbox-headrow a{text-decoration:none}
/*.filterbox-headrow a::before {
  margin-left: .255em;
  content: url(chevron.svg);
  display:inline-block !important;
  border:0;
  transform: scale(0.5);
  vertical-align:0;
  filter: invert(93%) sepia(18%) saturate(5995%) hue-rotate(330deg) brightness(98%) contrast(99%);
  rotate: 90deg;
  top: 2px;
  position: relative;
}*/

.filterbox-headrow a::before {
  margin-left: .255em;
  content: url(chevron-orange.svg);
  display:inline-block !important;
  border:0;
  transform: scale(0.5);
  vertical-align:0;
  rotate: 90deg;
  top: 2px;
  position: relative;
}


.filterbox-headrow .filterunghdl h3{line-height:1;position:relative;padding-left:1.55rem}
.filterbox-headrow .filterunghdl h3 i{display: flex;flex-direction: column;justify-content: center;position: absolute;left: 0;top: 50%;}
.filterbox-headrow .filterunghdl h3 svg{position:absolute;left:0;font-size:80%;transition: rotate 0.1s;transform-origin: center center;}
.filterbox.open .filterbox-headrow .filterunghdl h3 svg{rotate:50grad;transition: rotate 0.1s;}

.filterbox-headrow .filterunghdl a{color:#000}
.filterbox-headrow .filterunghdl a::before {display:none !important}

.filterbox.collapsed{max-height:60px;min-height:65px;transition: max-height 0.5s}
.filterbox.open{max-height:auto;transition: max-height 0.5s}

#finderReset{font-weight:700}

@media (min-width: 768px) {
	
	.filterbox{padding:3rem;margin-bottom:7.5rem}
	.filterbox.open .filterbox-headrow{flex-direction:row;	border-bottom: 0;padding-bottom: 0;border-bottom:0}
	.filterbox-headrow div{font-size: 1.125rem;}
	.filterbox-headrow .filterunghdl h3{padding-left:1.55rem}
	.filterbox{background-color:#E8E8E8;padding:1.8rem}
	.filterbox.collapsed{max-height:60px;min-height:80px;transition: max-height 0.5s}
	.filterbox-headrow a::before {transform: scale(0.7);}

}

@media (min-width: 992px) {
	.filterbox-headrow .filterunghdl h3{padding-left:2rem}
	.filterbox.collapsed{min-height:90px;}
	.filterbox-footrow{font-size:1.6875rem;}

}

@media (min-width: 1200px) {
	.filterbox-headrow .filterunghdl h3{padding-left:2.25rem}
	.filterbox.collapsed{min-height:94px;}
	.filterbox-headrow .filterunghdl h3 svg{left:-0.05rem;}
}

@media (min-width: 1400px) {
	.filterbox-headrow .filterunghdl h3{padding-left:2.25rem}
	.filterbox.collapsed{min-height:100px;}
	.filterbox-headrow .filterunghdl h3 svg{left:-0.15rem;}
}
@media (max-width: 991px) {
	#finderReset{position:relative;left:-10px;}
}


.filterbox.collapsed > *:not(.filterbox-headrow){visibility:hidden;opacity:0;transition: all 0.1s; }
.filterbox.collapsed .filterbox-headrow > *:not(.filterunghdl){visibility:hidden;opacity:0;transition: all 0.1s; }
.filterbox.open > *:not(.filterbox-headrow){visibility:visible;opacity:1;transition: all 0.1s; }
.filterbox.open .filterbox-headrow > *:not(.filterunghdl){visibility:visible;opacity:1;transition: all 0.1s; }

.dropdown-row.newfilter-row{display:flex;justify-content:start;gap:1.2rem;margin-bottom:1rem;flex-direction:column}
.chkbox-row.newfilter-row{display:flex;justify-content:start;gap:1.2rem;margin-bottom:2rem;flex-direction:column;display:none}

.newfilter-row h3{font-weight:400;font-size:1rem;margin-bottom:.5rem}
.productfilter ul.dropdown-menu{border-radius:0}

.productfilter a.dropdown-item{color:#212529}
.productfilter .dropdown-item.active, .productfilter .dropdown-item:active{background-color:rgb(100,100,100);color:#fff}

#dropdownMenuButton1 + span{position:relative;top:4px}


/**************
** Buttons
**************/

.buttongroup-row{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:1rem}
.buttongroup-row .btn.btn-primary.disabled{border-color:#747474;font-size:1rem;background-color:#747474;color:#E8E8E8;opacity: 1;}
.buttongroup-row .btn.btn-secondary{font-size:1rem;background-color:#F9B233;color:#fff;}




.productfilter.newfilter{background-color:#fff;display:block;font-size:1rem}
.productfilter.newfilter .btn{font-weight: 400;font-size:1.125rem}
.productfilter .dropdown-toggle{color:inherit;text-decoration:none}
.productfilter .dropdown-toggle:active{color:inherit}
/*.productfilter .dropdown-toggle::after {display: inline-block;margin-left: .255em;content: url(chevron.svg);display:inline-block !important;border:0;transform: scale(0.7);vertical-align:0;filter: invert(93%) sepia(18%) saturate(5995%) hue-rotate(330deg) brightness(98%) contrast(99%);}*/
.productfilter .dropdown-toggle::after {display: inline-block;margin-left: .255em;content: url(chevron-orange.svg);display:inline-block !important;border:0;transform: scale(0.7);vertical-align:0;filter:unset}
.productfilter .dropdown-toggle::after{display:none;}
.subfilter-wrap{display:flex;}


@media (min-width: 992px) {
	.newfilter-row h3{margin-bottom:0.125rem;font-size:1.125rem;font-weight:400}
	.chkbox-row.newfilter-row{display:flex;justify-content:start;gap:1.2rem;margin-bottom:2rem;flex-direction:row}
	.dropdown-row.newfilter-row{margin-top:2rem;display:flex;justify-content:start;gap:1.2rem;margin-bottom:2rem;flex-direction:row;flex-wrap:wrap}
	.productfilter.newfilter{background-color:#fff;display:inline-block;font-size:1rem}
}


@media (max-width: 767px) {
	.productfilter:not(.productsubfilter){padding-left:0px}
	.productfilter:not(.productsubfilter) .dropdown-toggle{font-size:1rem !important;
    display: flex;
    width: 100%;
    align-items: normal;
    justify-content: space-between;
   }
}
.dropdown.productfilter.newfilter a.disabled{color:#999;font-style:italic}


/**************
** Checkmark
**************/

.productfilter-chkbox-group{display:flex;flex-direction:column;}
.productfilter-chkbox {position: relative;font-size:1.125rem;}
.productfilter-chkbox i{font-style:normal}
.productfilter-chkbox input {display: none;}
.productfilter-chkbox input~.checkmark {background: transparent;width: 22px;display: inline-block;position: relative;height: 22px;border-radius: 0;vertical-align:middle;margin-right:8px;border:solid 2px #000;}
.productfilter-chkbox input:checked~.checkmark:after,
.productfilter-chkbox input:checked~.checkmark:before {content: '';position: absolute;width: 2px;height: 20px;background: #000;left: 8px;top: -1px;}
.productfilter-chkbox input:checked~.checkmark:after {transform: rotate(-45deg);z-index: 1;}
.productfilter-chkbox input:checked~.checkmark:before {transform: rotate(45deg);z-index: 1;}
.productfilter-chkbox input:checked~.checkmark {width: 22px;display: inline-block;position: relative;height: 22px;border-radius: 0;}
.productfilter-chkbox input:disabled~.checkmark {border-color:#999}
.productfilter-chkbox input:disabled~.checkmark + * {color:#999}


/**************
** Radiobutton Checkmark
**************/


.productfilter-chkbox-group{display:flex;flex-direction:column;}

.productfilter-radiobtn {
  position: relative;
  font-size:1.125rem;
}

.productfilter-radiobtn i{
   font-style:normal
}

.productfilter-radiobtn input {
  display: none;
}

.productfilter-radiobtn input~.checkmark {
  background: transparent;
  width: 22px;
  display: inline-block;
  position: relative;
  height: 22px;
  border-radius: 0;
  vertical-align:middle;
  margin-right:8px;
  border:solid 2px #000;
  border-radius: 50%;
}


.productfilter-radiobtn input:checked~.checkmark:after {
  content: '';
  width: 18px;
  background-color:#fff;
  display: inline-block;
  position: absolute;
  height: 18px;
  vertical-align:middle;
  border:solid 5px #f9b233;
  border-radius: 50%;
  left:0;
  top:0;
}



.productfilter-chkbox-group{display:flex;flex-direction:column;}
.productfilter-radiobtn {position: relative;font-size:1rem;}
.productfilter-radiobtn i{font-style:normal}
.productfilter-radiobtn input {display: none;}
.productfilter-radiobtn input~.checkmark {background: transparent;width: 18px;display: inline-block;position: relative;height: 18px;border-radius: 0;vertical-align:middle;margin-right:8px;border:solid 2px #000;border-radius: 50%;}
.productfilter-radiobtn input:checked~.checkmark:after {content: '';width: 14px;/*background-color:#fff;*/background-color:#f9b233;display: inline-block;position: absolute;height: 14px;vertical-align:middle;border:solid 5px #f9b233;border-radius: 50%;left:0;top:0;}
.productfilter-radiobtn input:checked~.checkmark {width: 18px;display: inline-block;position: relative;height: 18px;border-radius: 50%;}
.productfilter-radiobtn input:disabled~.checkmark {border-color:#999}
.productfilter-radiobtn input:disabled~.checkmark + * {color:#999}

@media (min-width: 992px) {
	.productfilter-radiobtn {font-size:1.125rem;}
	.productfilter-radiobtn input~.checkmark {width: 22px;height: 22px;}
	.productfilter-radiobtn input:checked~.checkmark {width: 22px;height: 22px}
	.productfilter-radiobtn input:checked~.checkmark:after {width: 18px;height: 18px;}

}