:root {
--radiusAll: 20px;
--radiusPill: 50em;
--radiusSmallAll: 8px;
--radiusSmallTop: 8px 8px 0px 0px;
--dpg-backgroundgreen: rgba(148,192,69,1);
--dpg-darkgreen: #5e952f;
}

body, html{
font-family: 'Fira Sans',sans-serif;
}

header {
float: none;
width: 100%;
}


.details-body .row{
margin-right: 0px!important;
margin-left: 0px!important;
}

.details-body .row > *{
padding-right: 0px!important;
padding-left: 0px!important;
}




h1, h1.parentGroupName, .parentGroupName > h1{
margin-bottom: 2rem;
font-family: 'Fira Sans',sans-serif;
color: rgb(148,192,69);
text-transform: none;
text-align: center;
font-size: 3.5rem;
border-bottom: 0;
font-style: italic;
font-weight: bold;
letter-spacing: 0.3px;
padding-bottom: 1rem;
}


.show-mobil{
display: none!important;
}

.hide-mobil{
display: block!important;
}

.mobilnav{
display: none;
}


.modal-footer .btn-close{
background:none;
background-color: rgba(68,68,68,0.3);
min-width: 90px;
min-height: 25px;
padding: .25em 1em;
}

h2{
border-bottom: 0;
font-family: 'Fira Sans',sans-serif;
color: rgb(148,192,69);
text-transform: none;
font-style: italic;
}


h3{
border-bottom: 0;
font-family: 'Fira Sans',sans-serif;
color: rgb(148,192,69);
text-transform: none;
}

h5, h6{
font-size: 24px;
font-weight: bold;
text-transform: none;
font-family: 'Fira Sans',sans-serif;
color: rgb(148,192,69);
text-transform: none;
}

h1 > a, h2 > a, h3 > a, h4 > a, h5 > a{
text-decoration: none;
}

hr{
color: rgb(148, 192, 69);	
}

.text-right{
text-align: right!important;
}

#toTop{
z-index: 1200!important;
left: 50%!important;
right: 50%!important;
bottom: 5px!important
}


#toTop:hover{
background: none repeat scroll 0 0 rgba(148,192,69,1);
}


.innerplayer{
position: relative;
padding-bottom: 56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
margin: 2rem 0px 3rem 0px;	
}


.innerplayer iframe, .innerplayer object,
.innerplayer embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


ol > li{
padding-bottom: 0.5em;
}


#content {
min-height: unset;
}

.sectionstart{
padding-top: 0px;
}

.sectionwide{
background-size: cover;
background-position: center center;
min-height: 300px;
height: 300px;
position: relative;
float: none;
display: block;
clear: both;
margin: 0px 0px 5rem 0px;
}


.sectionwide:before {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.3);
}


.sectionwide .bubble-bg{
overflow: visible;

}



.bubble-link, #content a.bubble-link{
position: absolute;
left: 0;
display: inline-block;
padding: 8px 20px 8px 20px;
margin: 0px 0px 0px -40px;
background-color: rgb(148,192,69);
color: #ffffff!important;
font-size: 1rem;
font-weight: 600;
border-radius: 16px 16px 16px 16px;
text-align: center;
text-decoration: none;
}

.bubble-link:hover, #content a.bubble-link:hover{
background-color: rgb(255,255,255);
color: rgb(148,192,69)!important;
}

.bubble-bg{
background: transparent URL('/custom/shop/templates/rollrasen_perfekt_gruen/site/pics/bubble_orange.svg') no-repeat;
background-size: contain;
background-position: center center;
max-width: 515px;
max-height: 320px;
width: 515px;
height: 320px;
overflow: hidden;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
align-content: stretch;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
z-index: 9;
position: relative;
}


.bubble{
width: 100%;
padding: 5px 65px 12px 65px;
}

.bubble-text-robdefault{
background: transparent URL('/custom/shop/templates/rollrasen_perfekt_gruen/site/pics/bubble_orange.svg') no-repeat;
background-size: 100% auto;
background-position: center center;
max-width: 470px;
max-height: 300px;
width: 470px;
height: 300px;
xoverflow: hidden;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
position: relative;
padding: 45px 20px 10px 180px;

}



.bubble-text-robdefault.heckenbaeume{
padding: 45px 10px 10px 220px;
}

.bubble-text-robdefault.dachbegruenung{
margin-left: 40px;
}


.bubble-text-robdefault:before{
content: '';
display: block;
width: 190px;
height: 280px;
position: absolute;
left: -8px;
top: 20px;
margin: 0px 0px;
padding: 0px 0px;
z-index: 0;
}


.bubble-text-robdefault p{
color: #ffffff;
font-size: 1rem;
padding: 0px 0px 0px 12px;
margin-bottom: 12px;
text-align: left;
line-height: 120%;
position: relative;
}

.bubble-text-robdefault p:first-child{
padding: 0px 0px 0px 0px;
}


.bubble-text-robdefault p:before{
content: '\f00c';
font-family: 'Font Awesome 5 Free';
display: inline-block;
color: #ffffff;
font-size: 15px;
font-weight: 600;
padding: 0px 8px 0px 0px;
margin: 0px 0px 0px -20px;
text-align: center;
}


.bubble-text-robdefault p:first-child:before{
display: none;
}

.bubble-text-robdefault.showmaster:before{
background: transparent URL('/custom/shop/templates/rollrasen_perfekt_gruen/site/pics/rob_showmaster.png') no-repeat left center;
background-size: 100% auto;
}

.bubble-text-robdefault.dachbegruenung:before{
background: transparent URL('/custom/shop/templates/rollrasen_perfekt_gruen/site/pics/rob_dachbegruenung.png') no-repeat left center;
background-size: 100% auto;
width: 210px;
height: 280px;
left: -39px;
}


.bubble-text-robdefault.maehroboter:before{
background: transparent URL('/custom/shop/templates/rollrasen_perfekt_gruen/site/pics/rob_maehroboter.png') no-repeat left center;
background-size: 100% auto;
width: 210px;
height: 280px;
}


.bubble-text-robdefault.heckenbaeume:before{
background: transparent URL('/custom/shop/templates/rollrasen_perfekt_gruen/site/pics/rob_hecken-baeume.png') no-repeat left center;
background-size: 100% auto;
width: 215px;
height: 240px;
left: -4px;
}

.bubble-text-robdefault.pflegeduenger:before{
background: transparent URL('/custom/shop/templates/rollrasen_perfekt_gruen/site/pics/rob_duenger.png') no-repeat left center;
background-size: 100% auto;
width: 210px;
height: 280px;
}

.bubble-text-robdefault.bewaesserung:before{
background: transparent URL('/custom/shop/templates/rollrasen_perfekt_gruen/site/pics/rob_bewaesserung.png') no-repeat left center;
background-size: 100% auto;
width: 210px;
height: 280px;
}
.sectionwide .bubble-bg{
margin-top: -25px;
max-width: 550px;
max-height: 350px;
width: 550px;
height: 350px;
}

.sectionwide.img-left .bubble-bg{
margin-left: 25px;
}


.sectionwide.img-right .bubble-bg{
margin-right: 25px;
}






.bubble p{
color: #ffffff;
font-size: 1rem;
padding: 0px 0px;
margin-bottom: 12px;
text-align: center;
line-height: 120%;
text-shadow: 1px 1px rgb(198, 133, 10);
}

.sectionwide .bubble p{
color: #363636;
text-shadow: 1px 1px rgb(255, 219, 150);
}


.bubble p > strong, .bubble-text-robdefault p > strong{
text-transform: uppercase;
font-size: 1.1rem;
}

.siteend{
background: rgba(242, 242, 242, 1) URL('/data/media/images/cms/footer_bg_adobeStock_65642879.jpg') no-repeat;
background-size: cover;
background-position: center center;
min-height: 300px;
height: 300px;
position: relative;
}

.siteend:before{
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.3);
}

.siteendrasen{
background: rgba(242, 242, 242, 1) URL('/data/media/images/cms/rollrasen_siteend_start_2_agriv.jpg') no-repeat;
background-size: cover;
background-position: center center;
min-height: 300px;
height: 300px;
position: relative;
}


textarea:focus, input:focus, a:focus, button:focus, button:active{
outline: none;
border: 0;
box-shadow: none!important;
}

select:focus{
outline: none;
box-shadow: none!important;
border: 1px solid #ced4da!important;
}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}


button, button:focus, button:active{
background-color: transparent;
border: 0!important;
outline: 0!important;
border-width: 0!important;
}


.pager li>a, .pager li>span{
text-decoration: none;
color: #fff!important;
}

.header:before{
content: '';
display: block;
width: 100%;
height: 42px;
background-color: rgb(148,192,69);
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
top: 0;
left: 0;
z-index: 0;
position: absolute;
}


.header {
min-height: 100px;
max-height: 186px;
height: auto;
height: auto;
padding: 0px 0px 0px 0px;
border-bottom: solid 1px rgba(115,113,112, 0.4);
display: block;
border-bottom: 0;
overflow:visibile;
}

.header::before {
height:86px;
}

.header .container {
min-height: 80px;
height: auto;
position: relative;
max-width: 85% !important;
}

.header .container .firstcol{
max-width: 350px;
position: relative;
}

.header .container .lastcol{
max-width: 1024px;
}


.top-bar {
height: 86px;
float: none;
padding: 0px 0px 0px 0px;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
align-items: flex-start;
align-content: flex-start;
}


.top-bar .bar-dropdown{
float: none;
}

.topinfo{
width: calc((100% / 2) - 160px);
text-align: center;
color: #ffffff;
min-height: 42px;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
text-align: center;
height: 100%;
}

.topinfo p{
text-align: center;
color: #ffffff;
font-size: 1rem;
line-height: 100%;
padding: 0px 0px 0px 0px;
margin: 0px auto 0px auto;
max-width: 250px;

}
.topinfo p a, .topinfo p a:hover, .topinfo p a:visited, .topinfo p a:active{
color: #ffffff;
text-decoration: none;
cursor: text;
}

.topinfo .b2b-link-button{
text-align: center;
color: rgb(50, 102, 6);
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
font-size: 0.9rem;
line-height: 100%;
padding: 5px 20px 5px 20px;
margin: 10px auto 0px auto;
display: block;
border-radius: 12px;
background-color: #fcb934;
min-width: fit-content;
width: 100%;
max-width: 250px;
text-decoration: none !important;
}


.topinfo .b2b-link-button:hover{
background-color: rgb(50, 102, 6);
color: rgb(255, 255, 255);
text-shadow: 1px 1px 1px rgba(50, 102, 6,0.8);
}


.mobilnav .b2b-link-button{
text-align: center;
color: rgb(50, 102, 6)!important;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
font-size: 1rem;
line-height: 100%;
padding: 10px 5px 10px 5px;
margin: 10px 20px 10px 20px;
display: block;
border-radius: 12px;
background-color: #fcb934;
width: 100%;
text-decoration: none !important;
}

.mobilnav .b2b-link-button:hover{
background-color: rgb(50, 102, 6);
color: rgb(255, 255, 255)!important;
text-shadow: 1px 1px 1px rgba(50, 102, 6,0.8);
}


.topinfo.toporderinfo{
width: calc(100% - 160px);
}


.logo {
max-height: unset;
position: absolute;
width: auto;
text-align: left;
display: block;
margin: 30px 0px 0px 0px;
z-index: 99;
top: 0px;
left: 0px;
}

.logo > a{
display: inline-block;
}


.logo img {
width: auto;
/*height: 212px;*/
height: 100%;
max-height: 212px;
margin: 0px 0px 0px 0px;

}



.header .navbar {
position: relative;
display: inline-block;
bottom: 0;
height: 100px;
overflow: visibile;
border: 0;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100%;
float: none;
}

.header .navbar .menu ul.navbar-nav{
height: 100%;
}

.sitesearch{
min-width: 370px;
width: calc((100% / 2) - 160px);
height: 100%;
background: none;
display: flex;
flex-direction: column;
justify-content: center;
align-content: flex-start;
text-align: left;
}

.sitesearch.siteorderhead{
width: 100%;
display: block;
max-height: 60px;
height: 60px;
position: relative;
}


.sitesearch.siteorderhead::before{
position: absolute;
width: 100%;
height: 30px;
box-shadow: 0px 7px 9px rgba(145, 137, 137, 0.4);
content: '';
top: -30px;
left: 0;
z-index: 3;
}
}


.sitesearch .search-header{
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px;
background: none repeat scroll 0 0 rgba(0,0,0,0);
float: none;
display: block;
width: 100%;
position: relative;
}



.ui-autocomplete.ui-front{
position: absolute;
top: 68px;
left: 0;
cursor: default;
right: 0;
margin: 0px auto auto 20px;
max-width: 302px!important;
width: auto;
z-index: 1800;
}

.ui-autocomplete.ui-front.ui-menu{
background-color: #FFFFFF;
}

.ui-autocomplete.ui-front.ui-menu .ui-menu-item{
background-color: #FFFFFF;
padding: 0px 0px 0px 0px;
}


.ui-autocomplete.ui-front.ui-menu .ui-menu-item:hover{
background-color: rgb(219, 238, 184);
}


.ui-autocomplete.ui-front.ui-menu .ui-menu-item > a{
display: block;
width: 100%;
padding: 4px 0px 4px 8px;
}

.ui-autocomplete.ui-front.ui-menu .ui-menu-item strong{
display: block;
width: 100%;
font-weight: 600;
font-size: 0.95rem;
padding: 4px 0px 4px 8px;
}

.ui-autocomplete.ui-front.ui-menu .ui-menu-item span{
display: block;
width: 100%;
font-size: 0.85rem;
padding: 0px 0px 4px 8px;
}


.sitesearch .search-header input[type=text], .search-header form input{
background-color: #FFFFFF;
border-radius: 25px 0px 0px 25px;
padding: 0px 20px 0px 20px;
margin: 0px 0px 0px 0px;
line-height: 40px;
max-width: calc(100% - 55px);
max-width: 838px;
width: 100%;
font-size: 0.85rem;
color: rgba(78,73,77,0.8);
height: 40px;
float: none;
}


.search-header form {
width: 100%;
float: none;
display: flex;
height: 40px;
min-height: 40px;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: flex-start;
line-height: 40px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}



.sitesearch .search-header .submitbutton{
display: block;
float: none;
position: relative;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 55px;
height: 40px;
background-color: rgb(94, 149, 47);
color: #ffffff;
font-size: 20px;
text-decoration: none;
border: 0;
border-radius: 0px 25px 25px 0px;
line-height: 40px;
text-align: center;
}

.sitesearch .search-header .submitbutton > i{
margin-right: 5px;
}


.header .navbar  .menu {
max-width: 100%;
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: none;
height: 100%;
}


.header .navbar  .menu ul.navbar-nav{
float: none;
margin: 0;
padding: 0;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch;
align-content: flex-start;
}


.topicon{
display: block;
position: relative;
width: 72px;
min-height: 63px;
border-radius: 0px 0px 20px 20px;
text-align: center;
vertical-align: middle;
padding: 0px 0px 0px 0px;
margin: 0px 0px 15px 20px;
color: #ffffff;
}


.topicon.btn-orange{
background-color: #fcb934;
}


.topicon.btn-green{
background-color: #5e952f;
}


.topicon.btn-red{
background-color: rgb(166, 54, 54);
}


.topicon .btn{
display: block;
width: 100%;
height: 100%;
color: #ffffff;
font-size: 25px;
text-align: center;
cursor: pointer;
}


#infoCartButton .cartbutton {
margin: 0px 0px 0px 0px;
display: block;
width: 100%;
height: 100%;
color: #ffffff;
font-size: 25px;
text-align: center;
cursor: pointer;
letter-spacing: 0;
line-height: 50px;
position: relative;
}


.topicon:hover{
padding-top: 15px;
margin-bottom: 0px;
}


.top-bar button.show-nav{
display: block;
color: #ffffff;
font-size: 25px;
text-align: center;
cursor: pointer;
letter-spacing: 0;
line-height: 50px;
position: relative;
width: 72px;
min-height: 63px;
border-radius: 0px 0px 20px 20px;
vertical-align: middle;
padding: 0px 0px 0px 0px;
margin: 0px auto 15px 0px;
background-color: #5e952f!important;
}


.topicon.icon-nav {
display: none;
color: #ffffff;
font-size: 25px;
text-align: center;
cursor: pointer;
letter-spacing: 0;
line-height: 50px;
position: relative;
width: 72px;
min-height: 63px;
border-radius: 0px 0px 20px 20px;
vertical-align: middle;
padding: 0px 0px 0px 0px;
margin: 0px auto 15px 0px;
margin-right: auto;
margin-bottom: 15px;
margin-left: 0px;
background-color: #5e952f !important;
}



.top-bar button.show-nav {
display: block;
color: #ffffff;
font-size: 25px;
text-align: center;
cursor: pointer;
letter-spacing: 0;
line-height: 50px;
position: relative;
width: auto;
min-height: 1px;
border-radius: 0px 0px 20px 20px;
vertical-align: middle;
padding: 0px 0px 0px 0px;
margin: 0px auto 15px 0px;
margin-right: auto;
margin-bottom: 15px;
margin-left: 0px;
background-color: #5e952f !important;
}


.topicon.icon-search{
background-color: #5e952f;
display: none;
}


.icon-search .searchbutton{
margin: 0px 0px 0px 0px;
display: block;
width: 100%;
height: 100%;
color: #ffffff;
font-size: 25px;
text-align: center;
cursor: pointer;
letter-spacing: 0;
line-height: 50px;
position: relative;
padding: 2px 7px;
} 	


.icon-nav .show-nav{
margin: 0px 0px 0px 0px;
display: block;
width: 100%;
height: 100%;
color: #ffffff;
font-size: 25px;
text-align: center;
cursor: pointer;
letter-spacing: 0;
line-height: 50px;
position: relative;
padding: 2px 7px;
} 	



.headerkey{
/*min-height: 520px;*/
/*max-height: 520px;*/
min-height: 480px;
max-height: 480px;
overflow: hidden;
position: relative;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}


.headerkey .videobg{
display: flex;
justify-content: center;
align-items: center;
right: 0;
bottom: 0;
top: 0;
left:0;
min-width: 100%;
min-height: 100%;
position: absolute;
z-index: 0;
overflow: hidden;
}


.headerkey .videobg.bgvideotop{
right: 0;
bottom: auto;
top: 0;
left:0;
}

.headerkey .headhome {
background-image: URL('/data/media/videos/header_start_perfekt_gruen.jpg');
background-position: center center;
background-size: cover;
}

.groupheader.headerkey{
background-image: URL('/data/media/videos/header_start_perfekt_gruen.jpg');
background-position: center center;
background-size: cover;
}

.voucher.headerkey{
background-position: center center;
background-size: cover;
}



.pageheader{
box-shadow: inset 0px 7px 9px rgba(145, 137, 137, 0.4);
}


.header{
box-shadow: 0px 7px 9px rgba(145, 137, 137, 0.4);
}


.block-first.pageheader{
background-position: center center;
background-size: cover;
max-height: 480px;
}

footer {
background: none;
background-color: rgba(242, 242, 242, 1);
border-top: 0;
color: rgb(80,75,79);
padding-bottom: 35px;
padding-top: 50px;
float: none!important;
}

.footer-box li a, .footer-box p , .footer-box a{
display: block;
color: rgb(80,75,79);
font-size: 0.8rem;
text-decoration: none;
}

footer .footer-box {
padding: 2rem;
}

footer h5, footer h6 {
font-size: 0.85rem;
font-weight: bold;
text-transform: uppercase;
color: rgba(80,75,79, 0.8);
margin: 1.5rem 0px 0px 0px;
font-family: 'Fira Sans', sans-serif;
font-weight: 600;
}


.footer-box.linkbox ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

}

.footer-box.linkbox ul li{
width: 50%;
}

.payment-box a, .kontaktbox a{
display: inline;
}


.payment-box a:hover, .kontaktbox a:hover, .linkbox a:hover{
text-decoration: underline;
}

footer p{
font-family: 'Fira Sans', sans-serif;
}

.kontaktbox p{
padding-left: 25px;
font-family: 'Fira Sans', sans-serif;
}


.kontaktbox p > i{
margin-left: -20px;
margin-right: 10px;
}


.kontaktbox p.sociallink > i{
font-size: 18px;
}

.payment-box li{
padding-top: 8px;
padding-bottom: 8px;
}

.payment-box p{
line-height: 140%;
}

.bottom-line {
background-color: rgba(148,192,69,1);
border-top: 0;
min-height: 15px;
color: rgb(255,255,255);
font-size: 0.8rem;
vertical-align: middle;
padding: 12px 0px 12px 0px;
}

.bottom-line p, .bottom-line a, .bottom-line p a{
padding: 0px;
margin-bottom: 0px;
color: rgb(255,255,255);
font-size: 0.8rem;
text-decoration: none;
}

.bottom-line .container{
padding: 0rem 2.5rem;

}

.agrilogo{
position: relative;
text-align: right;
padding-right: 2rem;
}

.agrilogo a{
display: block;
position: absolute;
right: 10px;
top: -65px;
max-height: 80px;
height: 80px;
padding: 5px 10px;
background-color: #ffffff;
border-radius: 12px;
}

.agrilogo a img{
width: auto;
height: 100%;
display: inline-block;
}


#selectPartner{
z-index: 10600!important;
}




/* Navigation */


.navbar-expand-lg .navbar-nav .nav-link, .navbar-nav .nav-link{
transition: 0;
}

.navbar-expand-lg .navbar-nav .nav-link, .navbar-nav .nav-item{
transition: 0.5s;
}


.navbar-nav > li.nav-item{
padding: 0px 0px 0px 4px;
margin: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
background-color: transparent;
position: relative;
z-index: 11;

}


.navbar-nav > li.nav-item::before{
content: '';
position: absolute;
top: 0;
left:-24px;
width: 24px;
height: 24px;
opacity: 0;
background-color: rgba(147,191,68, 1);
z-index: 1;
display: block;
}

.navbar-nav > li.nav-item::after{
content: '';
position: absolute;
top: 0;
left:-24px;
width: 24px;
height: 24px;
opacity: 0;
border-radius: 0px 12px 0px 0px;
background-color: white;
z-index: 2;
display: block;
}

.fixed-top .navbar-nav > li.nav-item::after{
display: none;
}

.fixed-top .navbar-nav > li.nav-item > a.nav-link{
border-radius: 12px 12px 0px 0px;
}


.navbar-nav  li span.dropdown-toggle{
display: none;
}


.navbar-nav > li.nav-item > a.nav-link{
border-radius: 12px 0px 0px 0px;
padding: 0px 10px 0px 10px !important;
display: flex;
text-align: center;
line-height: 100%;
width: 100%;
margin: 0px 0px 0px 0px;
height: 100%;
font-size: 1.1rem;
letter-spacing: 0.03em;
font-weight: 400;
background-color: transparent;
color: rgba(0, 0, 0, 0.7);
vertical-align: middle;
line-height: 100%;
align-content: center;
align-items: center;
text-transform: none;
background-color: rgba(255,255,255,0);
}


.navbar-nav > li > a:hover{
color: rgba(0, 0, 0, 0.6)!important;
}

.navbar-nav > li:hover, .navbar-nav > li.active{
border-radius: 0px 0px 0px 0px;
}

.navbar-nav > li:hover::before, .navbar-nav > li:hover::after{
opacity: 1;
}

.navbar-nav ul > li:hover, .navbar-nav ul >  li.active{
border-radius: 0px 0px 0px 0px;
}

.navbar-nav li.nav-green:hover, .xnavbar-nav li.nav-green.active{
background-color: rgb(147,191,68);
}

.navbar-nav li.nav-green:hover > a, .navbar-nav li.nav-green.active > a{
background-color: rgb(255,255,255);
color: rgba(147,191,68, 1)!important;

}



.navbar-nav li.nav-green2:hover, .navbar-nav li.nav-green2.active{
background-color: rgb(94,145,44);
}

.navbar-nav li.nav-green2:hover > a, .navbar-nav li.nav-green2.active > a{
background-color: rgb(255,255,255);
color: rgb(94,145,44)!important;

}

.navbar-nav li.nav-red:hover, .navbar-nav li.nav-red.active{
background-color: rgb(227, 7, 19);
}

.navbar-nav li.nav-red:hover > a, .navbar-nav li.nav-red.active > a{
background-color: rgb(255,255,255);
color: rgb(227, 7, 19)!important;
z-index: 1100;
}

.navbar-nav li.nav-blue:hover, .navbar-nav li.nav-blue.active{
background-color: rgb(69, 144, 186);
}

.navbar-nav li.nav-blue:hover > a, .navbar-nav li.nav-blue.active > a{
background-color: rgb(255,255,255);
color: rgb(69, 144, 186)!important;
}


.navbar-nav li.nav-orange:hover, .navbar-nav li.nav-orange.active{
background-color: rgb(239, 123, 0);
}

.navbar-nav li.nav-orange:hover > a, .navbar-nav li.nav-orange.active > a{
background-color: rgb(255,255,255);
color: rgb(239, 123, 0)!important;

}


.navbar-nav li.nav-grey:hover, .navbar-nav li.nav-grey.active{
background-color: rgb(207, 183, 24);
}

.navbar-nav li.nav-grey:hover > a, .navbar-nav li.nav-grey.active > a{
background-color: rgb(255,255,255);
color: rgb(207, 183, 24)!important;

}

.navbar-nav > li.nav-item:nth-child(1){
z-index: 1107!important;
}

.navbar-nav > li.nav-item:nth-child(2){
z-index: 1106!important;
}

.navbar-nav > li.nav-item:nth-child(3){
z-index: 1105!important;
}

.navbar-nav > li.nav-item:nth-child(4){
z-index: 1104!important;
}


.navbar-nav > li.nav-item:nth-child(5){
z-index: 1103!important;
}


.navbar-nav > li.nav-item:nth-child(6){
z-index: 1102!important;
}


.navbar-nav > li.nav-item:nth-child(7){
z-index: 1101!important;
}

.dropdown-toggle:after{
display: none;
}


.header .navbar .menu ul.dropdown-menu:before{
content: '';
display: inline-block;
width: 100%;
max-width: calc(100% - 4px);
border-top: 4px solid rgb(255,255,255);
position: absolute;
z-index: 3;
margin-top: -4px;
}


.header .navbar .menu ul.dropdown-menu{
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
border-radius: 0px 0px 20px 20px;
padding: 0px 4px 10px 4px;
margin: 0px 0px 0px 0px;
box-shadow: none!important;
top: 100px;
left: 0;
width: 300px;
min-width: 140%;
z-index: -1;
}

.header .navbar .menu ul.dropdown-menu.show {
display: flex!important;
}


.header .navbar .menu ul.dropdown-menu > li{
background-color: #ffffff;
margin: 0px 0px 0px 0px;
border-bottom: 0;
flex-grow: 1;
text-align: left;
min-width: 100px;
text-transform: none;
}

.header .navbar .menu ul.dropdown-menu > li:last-child{
border-bottom: 0px solid rgb(255,255,255);
border-radius: 0px 0px 20px 20px;
padding-bottom: 8px;
}

.header .navbar .menu ul.dropdown-menu > li > a{
margin: 0px 0px;
text-transform: none;
}



.header .navbar .menu ul.dropdown-menu  {
transform: scaleY(0);    
transform-origin: top;
transition: transform 0.26s ease;
}


.navbar-nav > li.nav-item:hover > ul.dropdown-menu  {
transform: scaleY(1);
}


/* 3. ebene */

.header .navbar .menu ul.dropdown-menu ul.dropdown-menu{
transform: scaleX(0);    
transform-origin: left;
transition: transform 0.26s ease;
top: 57px;
left: 100%;
width: 100%;
min-width: unset;
max-width: 315px;
margin-left: 0px;
padding-left: 0px;
}

.navbar-nav > li.nav-item > ul.dropdown-menu >  li.nav-item:hover{
transform: scaleX(1);
}


.header .navbar .menu ul.dropdown-menu ul.dropdown-menu > li .nav-link{
padding: 16px 15px 17px 15px;
}



.header .navbar .menu li.nav-green ul.dropdown-menu {
border-left: 0px solid rgb(147,191,68);
border-right: 0px solid rgb(147,191,68);
border-bottom: 8px solid rgb(147,191,68);
border-top: 0px solid rgb(147,191,68);
background-color: rgb(147,191,68);
}

.header .navbar .menu li.nav-green ul.dropdown-menu > li{
border-bottom: solid 1px rgba(147,191,68, 0.8);
}

.header .navbar .menu li.nav-green ul.dropdown-menu > li > a{
color: rgba(147,191,68, 1)!important;
}


.header .navbar .menu li.nav-green ul.dropdown-menu:before{
border-top: 4px solid rgb(147,191,68);
}

.header .navbar .menu li.nav-green ul.dropdown-menu > li.active > a, .header .navbar .menu li.nav-green ul.dropdown-menu > li.active, .header .navbar .menu li.nav-green ul.dropdown-menu > li.active-last > a, .header .navbar .menu li.nav-green ul.dropdown-menu > li.active-last{
background-color: rgba(147,191,68, 1) !important;
color: rgba(255,255,255, 1) !important;
}



.header .navbar .menu li.nav-red ul.dropdown-menu {
border-left: 0px solid rgb(227, 7, 19);
border-right: 0px solid rgb(227, 7, 19);
border-bottom: 8px solid rgb(227, 7, 19);
border-top: 0px solid rgb(227, 7, 19);
background-color: rgb(227, 7, 19);
}

.header .navbar .menu li.nav-red ul.dropdown-menu > li{
border-bottom: solid 1px rgba(227, 7, 19, 0.8);
}

.header .navbar .menu li.nav-red ul.dropdown-menu > li > a{
color: rgba(227, 7, 19, 1)!important;
}


.header .navbar .menu li.nav-red ul.dropdown-menu:before{
border-top: 4px solid rgb(227, 7, 19);
}

.header .navbar .menu li.nav-blue ul.dropdown-menu {
border-left: 0px solid rgb(69, 144, 186);
border-right: 0px solid rgb(69, 144, 186);
border-bottom: 8px solid rgb(69, 144, 186);
border-top: 0px solid rgb(69, 144, 186);
background-color: rgb(69, 144, 186);
}

.header .navbar .menu li.nav-blue ul.dropdown-menu > li{
border-bottom: solid 1px rgba(69, 144, 186, 0.8);
}

.header .navbar .menu li.nav-blue ul.dropdown-menu > li > a{
color: rgba(69, 144, 186, 1)!important;
}

.header .navbar .menu li.nav-blue ul.dropdown-menu:before{
border-top: 4px solid rgb(69, 144, 186);
}

.header .navbar .menu li.nav-orange ul.dropdown-menu {
border-left: 0px solid rgb(239, 123, 0);
border-right: 0px solid rgb(239, 123, 0);
border-bottom: 8px solid rgb(239, 123, 0);
border-top: 0px solid rgb(239, 123, 0);
background-color: rgb(239, 123, 0);
width: 300px;
min-width: 140%;
}

.header .navbar .menu li.nav-orange ul.dropdown-menu > li{
border-bottom: solid 1px rgba(239, 123, 0, 0.8);
}

.header .navbar .menu li.nav-orange ul.dropdown-menu > li > a{
color: rgba(239, 123, 0, 1)!important;
}

.header .navbar .menu li.nav-orange ul.dropdown-menu:before{
border-top: 4px solid rgb(239, 123, 0);
}


.header .navbar .menu li.nav-grey ul.dropdown-menu {
border-left: 0px solid rgb(207, 183, 24);
border-right: 0px solid rgb(207, 183, 24);
border-bottom: 8px solid rgb(207, 183, 24);
border-top: 0px solid rgb(207, 183, 24);
background-color: rgb(207, 183, 24);
}

.header .navbar .menu li.nav-grey ul.dropdown-menu > li{
border-bottom: solid 1px rgba(207, 183, 24, 0.8);
}

.header .navbar .menu li.nav-grey ul.dropdown-menu > li > a{
color: rgba(207, 183, 24, 1)!important;
}

.header .navbar .menu li.nav-grey ul.dropdown-menu:before{
border-top: 4px solid rgb(207, 183, 24);
}


.header .navbar .menu li.nav-green2 ul.dropdown-menu {
border-left: 0px solid rgb(94,145,44);
border-right: 0px solid rgb(94,145,44);
border-bottom: 8px solid rgb(94,145,44);
border-top: 0px solid rgb(94,145,44);
background-color: rgb(94,145,44);
}

.header .navbar .menu li.nav-green2 ul.dropdown-menu > li{
border-bottom: solid 1px rgba(94,145,44, 0.8);
}

.header .navbar .menu li.nav-green2 ul.dropdown-menu > li > a{
color: rgba(94,145,44, 1)!important;
}

.header .navbar .menu li.nav-green2 ul.dropdown-menu:before{
border-top: 4px solid rgb(94,145,44);
}

.mm-wrapper--position-left .mm-slideout.fixed, .mm-wrapper--position-right .mm-slideout.fixed{
-webkit-transform: none!important;
transform: none!important;
}



.header .navbar.fixed-top{
position: fixed;
width: 100%;
background-color: rgb(147,191,68);
height: 60px;
box-shadow: 0px 5px 10px -5px rgba(68, 68, 68, 0.8);
border-radius: 0px 0px 0px 0px;
animation-name: fadeInUp;
animation-duration: 0.5s;
top:0;
}

.header .navbar.fixed-top .menu {
max-width: 1140px;
width: 100%;
margin: 0px auto;
}

.header .navbar.fixed-top .navbar-nav > .nav-item, .header .navbar.fixed-top .navbar-nav > .nav-item > a{
color: #ffffff;
}


.header .navbar.fixed-top .menu ul.dropdown-menu{
top: 60px;
}


@keyframes fadeInUp {
from { opacity: 0; top: -60px; }
to { opacity: 1; top: 0;}
}



/* info cart */
#infoCartWrapper{
padding: 2rem 2rem;
overflow: auto;
z-index: 9050;
}

#infoCartWrapper.offcanvas-end{
border-left: 1px solid rgba(0,0,0,.2) !important;
max-width: 90%;
}


#infoCartWrapper .offcanvas-header, #mobilSearchWrapper .offcanvas-header{
padding: 0rem 0rem 1rem 0rem;
border-bottom: solid 1px rgba(223,223,223,1);
}


#infoCartWrapper .offcanvas-header .btn-close, #mobilSearchWrapper .offcanvas-header .btn-close{

}

#infoCartWrapper .offcanvas-body.shop-cart{
padding: 1.8rem 0rem 0rem 0rem;
}

#infoCartWrapper .shop-cart ul{
list-style-type: none!important;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}




.infocartamount{
position: absolute;
min-width: 25px;
min-height: 25px;
display: block;
border: solid 2px rgb(250,186,52);
background-color: #ffffff;
color: rgb(250,186,52);
font-size: 16px;
font-weight: 700;
text-align: center;
line-height: 20px;
border-radius: 50% 50%;
z-index: 5;
top: 12px;
right: 7px;
width: 25px;
height: 25px;
}


.infototal:before{
content: '';
display: block;
width: 120px;
height: 145px;
position: absolute;
top: -20px;
left: 0;
background: #ffffff URL('/custom/shop/templates/rollrasen_perfekt_gruen/site/pics/rob_showmaster.png') no-repeat left center;
background-size: 100% auto;
}

.infototal{
position: relative;
padding-top: 32px;
}

.infototal h6{
text-align: right;
color: rgba(0,0,0,0.7);
text-transform: uppercase;
font-size: 1.4rem;
margin: 20px 0px 0px 0px;
}

.checkout-btn.button-orange{
width: 100%;
text-align: center;
color: #fff;
background-color: rgb(250,186,52);
border-color: rgb(250,186,52);
margin: 5rem 0px 0px 0px;
}


.infocart-pos{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
border-bottom: solid 1px rgba(223,223,223,1);
}

.offcanvas-body.shop-cart{
overflow-y: hidden;
}

.cart-product-image-wrapper{
display: none;
}

.infocartwrapper{
overflow-y: auto;
max-height: calc(100vh - 350px);
}


.cart-product-sums{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch;
align-content: stretch;
}


.infocart-pos .productAttribute{
font-size: 0.85rem;
font-weight: 400;
padding: 12px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}


.infocart-pos .productAttribute > span {
display: inline-block;
width: auto;
margin-right: 0px;
min-width: 110px;

}

.cart-product-product{
width: 100%;
}

.cart-product-product p{
font-size: 1rem;
padding: 0px 0px 0px 0px;
margin:  0px 0px 0px 0px;
}

.infocart-pos .productPrice{
text-align: right;
color: rgba(0,0,0,0.7);
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0;
}


.infocart-pos .productPrice .productNo{
display: block;
font-size: 0.85rem;
font-weight: 400;
}


.cartButtonWrapperDetails .in-cart {
background-color: #fcb934;
border-color: #fcb934;
border-width: 2px;
color: #ffffff;
border-radius: 50%;
height: 30px;
line-height: 30px;
margin: 0;
padding-right: 1px;
position: absolute;
right: 0;
text-align: center;
top: -20px;
width: 30px;
font-weight: 900;
font-size: 1.1rem;
}



body.offcanvas-active{
overflow:hidden;
}


body.offcanvas-active .dropdown-toggle{

}

.screen-darken{
height: 100%; width:0%;
z-index: 30;
position: fixed; top: 0; right: 0; 
opacity:0; visibility:hidden;
background-color: rgba(34, 34, 34, 0.6);
transition:opacity .2s linear, visibility 0.2s, width 2s ease-in;
}

.screen-darken.active{
z-index:10; 
transition:opacity .3s ease, width 0s;
opacity:1;
width:100%;
visibility:visible;
}



/* mobil search offcanvas */
#mobilSearchWrapper{
background-color: rgba(148,192,69,1);
color: #FFFFFF;
max-width: 90%;
padding: 2rem 2rem;
overflow: auto;
z-index: 9040;
}


#mobilSearchWrapper .offcanvas-header, #mobilSearchWrapper .offcanvas-header h5{
color: #FFFFFF;
}

#mobilSearchWrapper .mobilsearch{
padding: 1rem 0px 0px 0px;
}


#mobilSearchWrapper .mobilsearch .input-search{
width: 100%;
display: block;
color: var(--bs-gray);
}

#mobilSearchWrapper .mobilsearch .submitbutton{
width: 100%;
display: block;
background-color: var(--dpg-darkgreen);
border-color:  var(--dpg-darkgreen);
color: #ffffff;
margin: 1rem 0px 0px 0px;
padding: .375rem .75rem;
font-size: 1rem;
border-radius: .25rem;
}

/* gruppen start */
.sectiongroup{
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: stretch;
align-items:  stretch;
align-content: stretch;
position: relative;
}


.sectiongroup > .container{
margin-bottom: 0rem;
}

.sectiongroup .row.img-left{
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: stretch;
align-items:  stretch;
align-content: stretch;
width: 100%;
}

.sectiongroup .row.img-right{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: stretch;
align-items:  stretch;
align-content: stretch;
width: 100%;
}

.sectiongroup .row.img-right .colimg{
text-align: right;
}

.sectiongroup .row.img-left .colimg{
text-align: left;
}

.sectiongroup .row-groups {
margin-top: 4rem!important;
border-radius: 12px 12px 0px 0px;
overflow: hidden;
}

.sectiongroup .row-groups > div {
max-width: 100%;
width: 330px;
padding: 0px 0px;
}


.sectiongroup .colimg{
margin-top: 4rem;
}


.sectiongroup .coltext{
margin-top: 4rem;
}


.sectiongroup .sectionwide{
margin: 8rem 0px 6rem 0px;
}


.coltext h2{
font-size: 3rem;
margin-bottom: 1.5rem;
}

#content .coltext h2 a:hover{
text-decoration: none!important;
}

#content .sectiongroup .nav-green .coltext .groupstartheader > a{
color: rgb(147,191,68)!important;
}


#content .sectiongroup .nav-red .coltext .groupstartheader > a{
color: rgb(227, 7, 19)!important;
}

#content .sectiongroup .nav-blue .coltext .groupstartheader > a{
color: rgb(69, 144, 186) !important;
}

#content .sectiongroup .nav-orange .coltext .groupstartheader > a{
color: rgb(239, 123, 0)!important;
}

#content .sectiongroup .nav-grey .coltext .groupstartheader > a{
color: rgb(207, 183, 24)!important;
}

.colimg img{
max-width: 250px;
max-height: 300px;

}

.sectiongroup .groupfooter{
order: 3;
}


.sectiongroup .sectionwide{
order: 4;
}


.sectiongroup .groupfooter{
background-color: rgba(100, 179, 44, 0.3);
color: rgb(100, 179, 44);
text-align: right;
padding: 12px 0px;
border-radius: 0px 0px 12px 12px!important;
margin: 0px auto!important;
}

#content .groupfooter > a{
font-size: 1rem;
color: rgb(100, 179, 44);
text-align: right;
text-decoration: none;
font-weight: 600;
display: block;
padding: 0px 0px;
margin: 0px 15px;
}


.groupthumb > a{
display: inline-block;
width: 100%;
height: 100%;
position: relative;
}

.groupthumb > a span{
position: absolute;
z-index: 9;
top: 0;
right: 0;
background-color: rgb(148,192,69);
display: inline-block;
padding: 6px 14px 6px 16px;
color: #FFFFFF;
font-size: 0.95rem;
border-radius: 0px 0px 0px 12px;
line-height: 1.5rem;
min-width: 125px;
text-align: right;
}



.groupthumb img {
max-width: 100%;
width: 100%;
height: 100%;
object-fit: cover;
}

/* produktgruppen */

.groupgallery{
margin: 2rem 0px 2rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: stretch;
align-items:  stretch;
align-content: stretch;
position: relative;
}

.groupgallery .inner-products{
margin-bottom: 2rem;
max-width: 50%;
min-width: calc(100% / 4);
}


.groupgallery .inner-products.col-double{
max-width: 50%;
min-width: calc(100% / 2);
}




.groupwrapper{
border: solid 1px rgb(148,192,69);
display: block;
border-radius: 20px 20px 20px 20px;
height: 100%;
overflow: hidden;
position: relative;
}


.groupthumb{
width: 100%;
text-align: center;
min-height: 300px;
max-height: 300px;
height: 300px;
overflow: hidden;
}



.groupwrapper .grouptext{
padding: 16px 8px 35px 8px;
position: relative;
}


.grouptext h3, #content .grouptext h3 > a, .inner-products h3 > a{
text-transform: uppercase;
color: rgb(148,192,69)!important;
font-weight: 700;
font-size: 1.2rem;
text-decoration: none;
}


.list-grouptext2 h2{
margin: 25px 0px 15px 0px;
font-size: 1.7rem;
}


.groupmore{
position: absolute;
bottom: 0;
padding: 8px 0px 0px 8px;
width: 100%;
text-align: right;
}


#content .groupmore a{
display: inline-block;
color: #ffffff!important;
background-color: rgb(148,192,69);
text-decoration: none;
font-size: 1rem;
font-weight: 600;
padding: 5px 15px;
text-align: center;
min-width: 50%;
border-radius: 20px 0px 0px 0px;
}


.rollrasen-list .groupwrapper{
display: flex;
flex-direction: column;
justify-content: stretch;
}

.rollrasen-list .grouptext {
height: 100%;
display: flex;
flex-direction: column;
}

.rollrasen-list .groupteaser{
flex-grow:1;
}

.rollrasen-list .grouptext h3, .rollrasen-list .grouptext h3 > a{
font-size: 1.4rem;
}


/* Produkt Liste */

#itemsList, #itemsVariantsList.voucher {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: space-between;
padding-right: 0px!important;
padding-left: 0px!important;
gap: 20px;
}


#itemsList .inner-products, #itemsVariantsList.voucher .inner-products{
border: solid 1px rgb(148,192,69);
display: block;
border-radius: 20px 20px 20px 20px;
overflow: hidden;
position: relative;
padding-left: 0px !important;
padding-right: 0px !important;
margin: 0px 0px 0px 0px;
width: calc((100% / 3) - 20px);
max-width: 33.33333%;
min-width: calc((100% / 3) - 20px);
/*align-self: flex-start;*/
align-self: stretch;
}


#itemsList .inner-products > div{
height: 100%;
}


#productaddon .inner-products{
border: solid 1px rgb(148,192,69);
display: block;
border-radius: 20px 20px 20px 20px;
overflow: hidden;
position: relative;
padding-left: 0px !important;
padding-right: 0px !important;
margin: 0px 20px 0px 20px;
}

#productaddon .inner-products .list-thumb > a img, #productaddon .inner-products .list-thumb > img{
width: 100%;
}

.listitem-wrapper p{
margin-bottom: 0rem !important;
}

.listitem-wrapper {
border: 0;
position: relative;
height: 100%;
display: flex;
flex-direction: column;
}


#xitemsList:after {
content: "";
flex: auto;
}
#itemsList .inner-products:nth-child(4n+4){
/*margin-right: auto;*/
}



#itemsList.voucher .inner-products, #itemsVariantsList.voucher .inner-products{
width: calc((100% / 2) - 20px);
max-width: 50%;
min-width: calc((100% / 2) - 20px);
}

#itemsList.voucher  .inner-products .listcontent-order, #itemsVariantsList.voucher .inner-products .listcontent-order{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-content: center;
align-items: center;
width: 100%;
}

#itemsList.voucher  .inner-products .listcontent-order .item-listcart, #itemsVariantsList.voucher  .inner-products .listcontent-order .item-listcart{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
width: 100%;
}


#itemsList.voucher  .inner-products .listcontent-order .item-listcart label, #itemsVariantsList.voucher  .inner-products .listcontent-order .item-listcart label{
margin: 0px 0px 0px 0px;
padding: 0px 10px 0px 0px;
}

#itemsList.voucher  .inner-products .listcontent-order .item-listprice, #itemsVariantsList.voucher  .inner-products .listcontent-order .item-listprice{
max-width: 50%;
}


#itemsList.voucher  .inner-products .item-listcart .addToCartInput, #itemsVariantsList.voucher  .inner-products .item-listcart .addToCartInput{
max-width: 80px;
min-height: 36px;
}

#itemsList.voucher  .inner-products .cartButtonWrapper button, #itemsVariantsList.voucher  .inner-products .cartButtonWrapper button{
min-width: 80px;
width:80px;
min-height: 36px;
}


#itemsList.voucher  .inner-products .cartButtonWrapper button > .fa, #itemsVariantsList.voucher  .inner-products .cartButtonWrapper button > .fa{
margin-left: auto;
margin-right: auto;
}

.list-thumb{
height: auto;
max-height: 350px;
display: block;
position: relative;
text-align: center;
}


.list-thumb .list-logo{
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
display: block;
z-index: 9;
margin: 0px 5px 5px 0px;
}

.list-thumb .list-logo img{
width: 100%;
height: auto;
vertical-align: bottom;
}


.list-thumb:after {
content: "";
display: block;
padding-bottom: 100%;
}


.list-thumb > a img, .list-thumb > img{
margin: auto auto;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
left: 0;
right: 0;
top: 0;
bottom: 0;
}

.list-thumb .list-special-offer, .variants-col .col.productImageSmall .list-special-offer{
position: absolute;
top: 0;
left: 0;
width: 100%;
}

.list-thumb .stock-is-empty, .variants-flex .productImageSmall .stock-is-empty{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 5;
border-top: solid 1px rgb(148,192,69);
padding: 8px 4px;
}

#noteSave{
display: inline-block;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
width: 100%;
}

.notification-save{
display: none!important;
}

.notification-save p{
padding: .375rem .75rem;
font-size: 1rem;
margin: 0px 0px;
color: #ffffff;
font-weight: 400;
line-height: 1.5;
}

div:target .notification-save {
display: inline-block;
color: #ffffff;
background-color: rgb(148,192,69);
border-radius: 0px 0px 20px 20px;
width: 100%;
padding: 0px 0px;
margin: 0px 0px;
}

div:target .notification-send {
display: none;
}



.list-special-offer span, .detail-special-offer span {
color: #ffffff;
display: block;
padding: 0px 8px;
font-size: 16px;
line-height: 30px;
margin-bottom: 5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
width: 100%;
text-align: center;
}

.detail-special-offer span {
max-width: 100%;
float: none;
margin-right: 0px;
}


.item-offer {
background-color: rgb(189, 14, 34);
}

.list-special-offer i, .detail-special-offer i{
margin-right: 8px;
}

.detail-special-offer span{
border-radius: var(--radiusPill);
}


.list-special-offer .badge-fruit, .detail-special-offer .badge-fruit{
width: 100%;
max-width: 100px;
background-color: rgb(244, 206, 54);
color: rgb(215, 148, 22);
font-size: 11px;
border-radius: 0px 0px 20px 0px;
min-height: 26px;
vertical-align: middle;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: center;
align-items: center;
padding: 5px 0px 5px 5px;
text-align: center;
}

.detail-special-offer .badge-fruit{
width: 100%;
min-width: 140px;
max-width: 140px;
justify-content: flex-start;
text-align: left;
padding: 5px 5px 5px 5px;
}

.variants-col .col.productImageSmall .list-special-offer .badge-fruit, .detail-special-offer .badge-fruit{
border-top-left-radius: 15px;
}

.list-special-offer .badge-fruit p, .detail-special-offer .badge-fruit p{
text-align: left;
color: rgb(123, 87, 18);
font-size: 11px!important;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
line-height: 100%;
}

.list-special-offer .badge-fruit .fas, .detail-special-offer .badge-fruit .fas{
margin: 0px 8px 0px 8px;
font-size: 20px;
}

.hinweis-lieferzeit{
margin: 12px 0px;
border-radius: 20px 20px 20px 20px;
position: relative;
isolation: isolate;
z-index: 900;
}




.label-lieferzeit{
display: block;
width: 100%;
padding: 8px 0px;
margin: 0px 0px;
background-color: rgba(252, 185, 52, 1);
color: rgba(0, 0, 0,0.8);
font-size: 1rem;
text-align: center;
border-radius: 20px 20px 0px 0px;
line-height: 100%;
font-weight: 400;
letter-spacing: 0.5px;
cursor: pointer;
text-align: center;
position: relative;
}



.label-lieferzeit i{
margin-left: 8px;
margin-right: 8px;
position: absolute;
left: 0;
top: calc(50% - 8px);
}

.hinweis-lieferzeit .label-lieferzeit > span{
display: block;
text-align: center;
}

.hinweis-lieferzeit .label-lieferzeit > span:nth-child(3){
padding-top: 6px;
}

.content-lieferzeit{
padding: 12px 18px;
background-color: rgba(254, 227, 174, 1);
color: rgb(100, 179, 44);
font-size: 0.95rem;
border-top: solid 1px #ffffff;
display: block;
border-radius: 0px 0px 20px 20px;
font-weight: 400;
position: relative;
z-index: 1000;
}


#content .content-lieferzeit p{
font-size: 0.95rem;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.hinweis-lieferzeit:hover .content-lieferzeit, .hinweis-lieferzeit:focus .content-lieferzeit{
display: block;
cursor: default;
}


.hinweis-lieferzeit:hover .label-lieferzeit{
border-radius: 20px 20px 0px 0px;
}


.variants-col .label-lieferzeit i{
position: relative;
}

.variants-col .hinweis-lieferzeit{
margin: 12px 0px 0px 0px!important;
position: relative;
}


.variants-col .label-lieferzeit{
text-align: left;
line-height: 100%;
letter-spacing: 0.1px;
margin: 0px 0px 0px 0px!important;
border-radius: 20px 20px 20px 20px!important;
font-size: 0.85rem;
}

.variants-col .hinweis-lieferzeit .content-lieferzeit{
display: none!important;
}

.variants-col .hinweis-lieferzeit:hover .content-lieferzeit{
display: block!important;
}

.variants-col .hinweis-lieferzeit .content-lieferzeit{
position: absolute;
z-index: 1000;
}

#content .variants-col .hinweis-lieferzeit .content-lieferzeit p{
font-size: 0.85rem!important;
}

.variants-col .hinweis-lieferzeit:hover .label-lieferzeit{
border-radius: 15px 15px 0px 0px!important;
}


.variants-col .label-lieferzeit > span{
width: 80%;
display: inline-block;
text-align: left;
font-size: 0.85rem;
vertical-align: top;
line-height: 100%;
}



.xinner-products img, .xlist-thumb img, .xgroupthumb img{
background: #e8f2e0;
animation-name: loadingpulse;
animation-duration: 3s; 
animation-timing-function: linear;
animation-delay: 0ms; 
animation-iteration-count: infinite; 
animation-direction: alternate;
animation-fill-mode: none;
animation-play-state: running;
}

@keyframes loadingpulse {
from {background-color: #ffffff;}
to {background-color: #e8f2e0;}
}

.listcontent {
background-color: rgba(148,192,69,0.2);
border-top: solid 1px rgb(148,192,69);
padding: 15px 10px 10px 10px;
align-self: stretch;
/*height: 100%;*/
flex-grow: 1;
display: flex;
flex-direction: column;
}

.listcontent h3 {
border-bottom: 0px;
text-transform: none;
font-size: 1.25rem;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-height: 1px;
text-shadow: 1px 1px #ffffff;
color: rgb(100, 179, 44) !important;
}

.listcontent .product-short{
min-height: 75px;
flex-grow: 1;
}



.item-listprice .price-addon a{
color: rgb(148, 192, 69);
}


.item-listprice .price small{
font-size: 65%;
}

.listcontent p.article-number {
font-size: 0.8rem !important;
margin-bottom: 0px;
}


.listcontent .productAttribute > span{
display: inline-block;
min-width: 130px;
}

.item-listprice {
position: relative;
width: 100%;
display: inline-block;
float: none;
text-align: right;
padding-bottom: 8px;
}



.item-listprice span.price {
font-size: 1.6rem;
line-height: 44px;
}

.price-options{
display: flex;
flex-direction: row;
justify-content: flex-end;
align-content: flex-end;
align-items: center;
width: 100%;
flex-wrap: wrap;
}





.price-options span[class^='priceUndiscounted_']{
display: inline-block;
width: 100%;
text-align: right;
font-size: 1rem;
line-height: 1rem;
}


.detail-information .price-options span[class^='priceUndiscounted_']{
font-size: 1rem;
line-height: 1rem;
}

.detail-information .price-options span[class^='priceUndiscounted_'] strike{
font-size: 1.55rem;
line-height: 1rem;
}

.detail-information .price-tag .priceblock span.price.specialprice, .item-listprice span.price.specialprice{
color: rgb(189, 13, 29);
}

.price-options .price-savings{
width: auto;
text-align: right;
margin-right: 10px;
font-size: 1.15rem;
color: rgb(189, 14, 34);

}


.detail-information .price-options .price-savings{
display: inline-block!important;
width: 100%;
text-align: right;
margin-right: 0px;
font-size: 1.25rem;
color: rgb(189, 14, 34);
font-weight: 700;
}

.detail-information .price-options span[class^='specialPriceValid_']{
color: rgb(189, 14, 34);
padding-bottom: 12px;
}



#pageNav{
margin: 2rem 0px 2rem 0px;
float: none!important;
padding: 10px 10px;
}

.pageNav, #pageNav{
cursor: auto;
}

.pageNav nav{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
align-content: center;

}

.pageNav .nav-pages{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
align-content: center;
}

.pageNav nav div{
padding: 0px 8px;
}

.pageNav .nav-pages a{
padding: 8px 10px;
background-color: rgba(255, 255, 255, 0.55);
margin: 0px 5px;
width: 35px;
text-decoration: none;
font-weight: bolder;
}

.pageNav .nav-pages a:hover{
	color: #373737!important;
	background-color: rgba(148, 192, 69, 0.2);
}

.pageNav .nav-pages strong{
padding: 8px 10px;
margin: 0px 5px;
width: 35px;
background-color: rgba(148, 192, 69, 0.2);
}



.pageNav .nav-pages-info, .pageNav .nav-entries{
border-left: solid 1px rgba(55, 55, 55, 1);
border-right: solid 1px rgba(55, 55, 55, 1);
}

.list-special-offer > div.label-red{
color: #ffffff;
background-color: rgb(189, 13, 29);
line-height: 100%;
padding: 8px 50px;
display: block;
font-size: 1rem;
font-weight: 600;
margin: 0px 0px 0px 0px;
text-transform: uppercase;
text-align: center;
}

.label-circle{
border-radius: 50em;
}

.label-rotate{
position: absolute;
transform:rotate(-45deg);
top: 30px;
left: -40px;
z-index: 99;
}


/* Detailseite */

.nomobilheader{
}

.mobilheader{
display: none;
width: 95%;
margin: 0px auto  2rem auto;
}

.mobilheader .header-1{
font-size: 1.8rem !important;
font-family: 'Fira Sans',sans-serif;
color: rgb(148,192,69);
text-transform: none;
text-align: left;
border-bottom: 0;
font-style: italic;
font-weight: 500;
line-height: 1.2;

}

.mobilheader .header-2{
font-family: 'Fira Sans',sans-serif;
color: rgb(148,192,69);
text-transform: none;
text-align: left;
margin-top: 0;
margin-bottom: .5rem;
font-weight: 500;
line-height: 1.2;
font-size: 1.3rem !important;
}


.single-post-desc{
margin-bottom: 1rem;
}

.single-post-desc p{
margin-bottom: 0.5rem;
}

.branch-select, .branch-selected{
border-radius: var(--radiusAll);
border: solid 1px rgb(128, 168, 57);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-content: center;
align-items: center;
margin: 1rem 0px 1rem 0px;
}


.branch-select .branch-text{
color: rgba(128, 168, 57, 1)!important;
margin-bottom: 0rem!important;
}



.branch-text{
padding: 5px 15px 5px 20px;
margin: 0px 0px 0px 0px!important;
}


.branch-selected{
border-radius: var(--radiusAll);
border: solid 1px rgb(128, 168, 57);
}

.branch-selected .branch-text p, .branch-selected .branch-text{
color: rgba(148,192,69, 1)!important;
}


.branch-select button, .branch-selected button{
float: right;
width: 65px;
height: 100%;
display: block;
color: #ffffff;
min-height: 60px;
font-size: 22px;
border-radius: 0px 20px 20px 0px;
}

.branch-selected button.btn-success, .branch-select button.btn-selectred{
background-color: rgba(128, 168, 57)!important;
border-color: rgba(128, 168, 57)!important;
}

.fachhaendler{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-content: flex-end;
margin: 1rem 0px 1rem 0px;
padding: 20px 20px 20px 20px;
border: solid 1px rgba(148,192,69, 1);
border-radius: var(--radiusAll);
background-color: rgba(202, 198, 190, 0.3);
}

.fachhaendler img{
max-width: 180px;
max-height: 100px;
height: auto;
width: auto;
}

.fachhaendler div:first-child{
width: calc(100% / 2);
max-width: calc(100% / 2);
border-right: solid 1px rgba(148,192,69, 1);
padding-right: 1rem;
margin-right: 1rem;
}

.fachhaendler p{
font-size: 0.9rem !important;
line-height: 180%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.fachhaendler div:last-child{
vertical-align: bottom;
align-self: flex-end;
text-align: left;
width: calc(100% / 2);
}

.logo-col{
min-height: 100px;
vertical-align: bottom;
display: flex;
}

.logo-col img{
max-width: 100%;
max-height: 110px;
height: auto;
width: auto;
margin-left: auto;
margin-right: 0px;
margin-top: auto;
display: block;
align-self: flex-start;
margin-bottom: 0px;
}



.box-row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: flex-start;
row-gap: 30px;
column-gap: 40px;
}

.box-row p{
width: calc((100% / 4) - 30px);
max-width: calc((100% / 4) - 30px);
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 1em;
border: solid 1px rgb(221, 221, 221);
border-radius: 6px 6px;
}


.startpaket .fab{
font-size: 55px;
color: #3c763dba;
float: right;
position: absolute;
right: 15px;
top: 30px;
}

.startpaket .fab.second{
font-size: 55px;
color: #64b32c;
opacity: 1;
float: right;
position: absolute;
right: 32px;
top: 24px;
-webkit-transform: rotate(-32deg);
transform: rotate(-32deg);
}

/* garantie */
.box-info-garantie{
color: rgba(0,0,0,0.8);
margin: 0rem 0px 0rem 0px;
}

.box-info-garantie .inner{
background-color: #cfe8c0;
background-image: none;
padding: 20px 30px 20px 30px;
margin: 0rem 0px 0rem 0px;
}

.box-info-garantie .inner h3{
color: #ffffff!important;
font-size: 1.3rem;
background-color: rgba(100,179,44,1);
border-bottom: 0;
margin-left: -20px;
margin-right: -20px;
text-align: center;
padding: 10px 0px;
}


/* Starterpaket info */

.box-garantie > .awinfo{
float: left;
margin: 0px 0px 0px 12px;
line-height: 1.8rem;
}


.awinfo .fas {
font-size: 18px;
font-weight: 900;
min-width: 18px;
min-height: 18px;
line-height: 18px;
text-align: center;
color: #fff;
}

.box-garantie{
background-color: rgba(100,179,44,1);
position: relative;
display: block;
float: left;
width: 100%;
margin-top: -1px;
text-align: center;
padding: 5px;
}

.box-garantie > p{
color: #fff!important;
margin: 0px 0px 0px 0px;
line-height: 1.8rem;
cursor: pointer;
}


.buy-select-block.startpaket{
background-color: rgba(148,192,69,0.35);
padding: 1rem;
border-radius: 20px 20px 0px 0px;
clear: both;
}


#productFullText h2, #productFullText h3{
font-size: 1.55rem;
}


.detail-information > div{
margin-left: 40px;
}


.detail-information .label{
margin-left: 0px;
}


.detail-information .productAttribute .productNo {
font-weight: 600;
display: inline-block;
min-width: 160px;
white-space: nowrap;
}

.option-row, .productfeature p{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items:  flex-start;
align-content: stretch;
margin: 0px 0px 0px 0px;
padding: 8px 8px 8px 8px;
}

.option-row:nth-child(even), .productfeature p:nth-child(even){
background-color: rgba(193,193,193,0.3);
}

.productfeature{
margin-bottom: 3rem;
}

.productfeature small{
font-size: 0.75rem;
line-height: 0.85rem;
}


.details-body #content h4{
text-transform: uppercase;
font-size: 1.2rem;
font-weight: 700;
margin-top: 2rem;
margin-bottom: 1rem;
}

.details-text ul{
column-count: 2;
column-gap: 40px;
list-style-type: circle;
padding-left: 1rem;
}

.details-text ul li{
padding-bottom: 12px;
}


.productfeature .accordion-item{
border: 0;
}


.productfeature h4{
width: 100%;
display: block;
margin: 3rem 0px 10px 0px;
padding: 0px 0px 5px 8px;
font-size: 1.1rem;
}


#flexSearchContentArea .accordion-item, .accordion-sort .accordion-item{
border: 0;
}

.productfeature .accordion-item .accordion-header, #flexSearchContentArea .accordion-item .accordion-header, .accordion-sort .accordion-item .accordion-header{
width: 100%;
display: block;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size: 1.1rem;
border: solid 1px #c0c0c0;
border-radius: 1.5rem;
color: #64b32c;
font-weight: 600;
overflow: hidden;
}


.productfeature .accordion-item .accordion-header .accordion-button, #flexSearchContentArea .accordion-item .accordion-header .accordion-button{
background-color: transparent;
color: #64b32c;
padding: 0.85rem 1.25rem;
font-size: 1.1rem;
overflow: hidden;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0);
}

.productfeature .accordion-item .accordion-header .accordion-button:not(.collapsed), #flexSearchContentArea .accordion-item .accordion-header .accordion-button:not(.collapsed){
background-color: #64b32c;
color: #ffffff;
border-radius: 1rem;
border: solid 1px #64b32c;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0);
}

.accordion-button:not(.collapsed):after {
height: 100%;
background-color: transparent;
border:0;
min-width: 60px;
position: absolute;
right: -1px;
border-radius: 1rem 0em 0rem 1rem;
text-align: center;
vertial-align: middle;
background-position: center center;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
transform: rotate(-180deg);
}

.accordion-button:after {
height: 100%;
background-color: #64b32c;
border: solid 2px #64b32c;
min-width: 60px;
position: absolute;
right: -1px;
border-radius: 0 1rem 1rem 0;
text-align: center;
vertial-align: middle;
background-position: center center;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}


.accordion-body {
padding: 1rem 0.25rem;
}

.productfeature .accordion-item{
margin-bottom: 2rem;
}


.option-row .col-name, .productfeature p > strong{
min-width: 280px;
width: 280px;
max-width: 280px;
font-weight: 600;
padding-right: 10px;
display: inline-block;
}

.option-row .col-value, .productfeature p{

}


.component-list{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: stretch;
align-items: stretch;
align-content: start;
margin: 0px 0px 2rem 0px;
padding: 0px 0px 0px 0px;
gap: 40px;
}


.component-list .component-item{
min-width: 15%;
width: calc((100% / 5) - 32px);
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-radius: 12px 12px;
border: solid 0px rgba(210,210,210,0.8);
overflow: hidden;
}


.component-list .component-item .component-image{
width: 100%;
overflow: hidden;
text-align: center;
position: relative;
border-radius: 12px 12px;
border: solid 2px rgba(210,210,210,0.8);
}


.component-list .component-item .component-image:after {
content: "";
display: block;
padding-bottom: 100%;
}


.component-list .component-item .component-image img{
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
min-height: 100%;
min-width: 100%;
margin: auto auto;
position: absolute;
width: 100%;
}

.component-list .component-item p > strong{
font-weight: normal;
}

.component-list .component-item > p{
text-align: center;
font-size: 0.85rem!important;
margin: 8px 0px 8px 0px;
padding: 0px 6px 0px 6px;
vertical-align: middle;
}

.component-header{
margin-bottom: 1rem;
}

.component-header p{
font-weight: 700;
}

.carousel-control-next{
margin: auto auto auto 0px!important;
align-self: flex-start;
}


.carousel-control-next{
margin: auto 0px auto auto!important;
align-self: flex-end;
}

.lightbox.fade.show{
opacity: 1!important;
}

.modal-open .modal{
z-index: 1257!important;
}

.modal-backdrop{
z-index: 1207!important;
}

#productaddon{
margin-bottom: 2rem;
}

#productaddon .Zslider{
width: 95%;
margin: 0px auto;
}


.modal-header, .modal-header > h4 {
background-color: rgb(148,192,69);
color: #ffffff !important;
}

.modal-body .btn-success{
background-color: rgb(148,192,69);
border-color: rgb(148,192,69);
}

.modal-body #branches .table > thead > tr > th {
background-color: rgba(148,192,69,1);
}



/* Partslist */

.grid-row-product-detail{
display: grid;
grid-template-columns: repeat(2, 50%);
grid-template-rows: auto 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
grid-auto-rows: auto;
}

.grid-row-product-detail .prod-col-1 { grid-area: 1 / 1 / 2 / 2;  justify-self: start;}
.grid-row-product-detail .prod-col-3 { grid-area: 1 / 2 / 3 / 3;  justify-self: start;}
.grid-row-product-detail .prod-col-2 { grid-area: 2 / 1 / 3 / 2;  justify-self: start;} 


.grid-row-product-detail, .grid-row-product-detail .prod-col-1, .grid-row-product-detail .prod-col-2, .grid-row-product-detail .prod-col-3{
max-width: 1140px;
}


.div-table{
display: table;
caption-side: bottom;
border-collapse: collapse;
}

.div-table-tr{
display: table-row;
}


.div-table-td{
display: block;
}


.partTable{
width: 100%;
background-color: rgba(242, 242, 242, 1);
border-radius: 0px 0px 8px 8px;
}

.partTable  tr  td, .partTable .div-table-tr .div-table-td {
padding: 0px 12px;
}

.partTable tr, .partTable .div-table-tr{
border-bottom: solid 1px rgba(148,192,69, 1);
}


.partTable .plOptions{
width: 100%;
margin-bottom: 20px;
margin-top: 20px;
}


.partTable .plOptions  tr  td, .partTable .plOptions  tr, .partTable .plOptions .div-table-tr .div-table-td, .partTable .plOptions .div-table-tr {
padding: 0px 0px;
border-bottom: 0px;
}

.partTable .plOptions td > table, .partTable .plOptions .div-table-td > .div-table{
margin-bottom: 10px;
margin-top: 12px;
}

.productPartsListe{
display: block;
position: relative;
clear: both;
float: none;
}

.productPartsListe h4{
text-transform: none!important;
font-size: 1.1rem!important;
font-weight: 600!important;
margin: 2rem 0px 0px 0px!important;
background-color: rgba(147,191,68, 0.8);
color: #444444;
padding: 10px 12px 8px 12px;
border-radius: 8px 8px 0px 0px;
}


.partsDescription{
background-color: rgba(242, 242, 242, 1);
}

.productPartsListe .partsInfobox, .productPartsListe .partsAmount{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-content: center;
align-items: center;
padding-left: 10px;
}


.productPartsListe .partsAmount{
justify-content: flex-start;
margin-bottom: 8px;
}

.productPartsListe .partsInfobox p, .productPartsListe .partsAmount p{
margin: 0px 0px 0px 0px;
}

.productPartsListe .partsInfobox .partsInfoName{
font-size: 1rem;
font-weight: 600;
text-align: left;
}

.productPartsListe .partsInfobox .partsInfoPreis, .productPartsListe .partsInfobox .partsInfoPreis p{
font-size: 1.2rem!important;
font-weight: 500;
white-space: nowrap;
text-align: right;
color: #64b32c;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}


.productPartsListe .partsAmount .addToCartInput{
max-width: 60px;
margin-left: 20px;
}


.productPartsListe .partsInfoWrapper{
display: flex;
flex-direction: row;
justify-content: flex-start;
}

.productPartsListe .partsInfotext{
width: auto;
max-width: 100%;
font-size: 0.85rem!important;
padding-top: 12px;
}


.partsInfotext ul{
margin-top: 12px;
padding-left: 1rem;
columns: 2;
column-gap: 40px;
}

.partsInfotext ul li{
padding: 2px 0px 5px 0px;
}

.partsInfotext .more-info{
margin-bottom: 0rem;
text-align: center;
}

.partsInfotext .more-info > a{
text-decoration: none;
font-weight: 600;
}

.partsInfotext .more-info > a:hover{
text-decoration: underline;
}


.productPartsListe .partsInfoIMG{
width: 100%;
height: 170px;
max-width: 170px;
padding-right: 12px;
padding-top: 12px;
}




.productPartsListe .partsInfoIMG > img{
width: auto;
height: 100%;
max-height: 100%;
object-fit: cover;
border-radius: 6px;
}


.plOptions .checkboxCoupled{
float: left;
width: 35px;
height: 35px;
display: inline-block;
position: relative;
}

.plOptions .plSelectOptions{
float: left;
display: inline-block;
width: calc(100% - 35px);
position: relative;
}

.plOptions .plSelectOptions .plImage{
}

.plInfotext{
padding-left: 35px;
}



.cart-wrapper .partslist-pos i{
color: #64b32c !important;
font-size: 0.85rem;
}

.infocart-pos.partslist-pos i{
font-size: 0.85rem;
margin-right: 8px;
}

.cartItem .partslist-pos {
padding: 4px 8px;
}

.cartItem .partslist-pos i{

font-size: 0.85rem;
}


/* Filter */

.flexSearchConfigWide{
display: block;
float: none;
margin: 0px auto;
padding: 0px 0px;
width: 96%;
}


.flexSearchItemWide{
margin-bottom: 15px;
}

.flexSearchFooter {
margin-top: 0px;
text-align: right;
}


.flexSearchValueRow{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.flexSearchValueRow .flexSearchValue{
flex-grow: 1;
}

.flexSearchValueRow .rightText > button{
max-width: 34px;
max-height: 34px;
height: 34px;
width: 34px;
line-height: 34px;
margin-left: 10px;
padding: 0px 10px 0px 10px;
text-align: center;
vertical-align: middle;
}

.selectedFilter{
display: inline-block;
position: relative;
padding: 0px 15px 0px 0px;
margin: 20px 0px;
}

.movelast{
order: 99;
}

.flexcolumn{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: flex-start;
gap: 20px;
}

.flexcolumn .flexSearchItemWide{
width: calc((100% / 3) - 50px);
max-width: calc((100% / 3) - 50px);
flex-grow: initial;
float: none;
display: inline-block;
margin: 0px 40px 20px 0px;
min-width: 300px;
padding-right: 15px;
padding-bottom: 15px;
border-bottom: solid 1px rgb(204, 203, 203);
}


.flexcolumn div.flexSearchItemWide:nth-of-type(3n){
margin-right: 0px;
}








#flexSearchContentArea{
background-color: rgba(242, 242, 242, 1);
border-radius: 1rem 1rem 0px 0px;

}


#flexSearchContentArea h5{
background-color: rgb(94,149,47);
color: #ffffff;
border-radius: 1rem;
border: solid 1px rgb(94,149,47);
box-shadow: inset 0 -1px 0 rgba(0,0,0,0);
font-size: 1.1rem;
padding: 1rem 1.25rem;
}

#flexSearchContentArea h5 > i{
margin-right: 15px;
}


.selectedFilter-wrapper{
display: block;
width: 100%;
}



.selectedFilter > input, .selectedFilter > p{
border-radius: var(--radiusPill);
border: 0;
background-color: rgb(147,191,68);
color: #ffffff;
font-size: 0.9rem;
padding: 5px 35px 5px 15px;

position: relative;
}

.selectedFilter::before{
content: "\f00d";
display: block;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 0.9rem;
width: 25px;
height: 25px;
position: absolute;
top: 0;
bottom: 0;
right: 15px;
color: #ffffff;
padding: 5px  0px 5px 0px;
z-index:1;
}


.filter-nolink.selectedFilter::before{
display: none;
}

.filterreset{
display: block;
width: 100%;
clear: both;
}



.flexSearchFooter{
display: block;
width: 100%;
clear: both;
text-align: right;
margin: 1rem 0px 0px 0px;
padding-bottom: 1rem;
}

.flexSearchItemWide h4{
font-size: 12pt;
font-weight: 600;
margin: 0px 0px 10px 0px;
}

.flexSearchPropertyDescription{
min-height: 3.5rem;
}

.flexSearchNoOption{
background-color: #ffffff;
text-align: center;
font-size: 0.85rem;
color: rgb(170, 71, 66);
padding: 5px 0px;
}

.flex-result{
background-color: rgba(210, 205, 205,1);
border-radius: 0px 0px 8px 8px;
border-bottom: solid 1px rgba(94,149,47, 0.8);
}

.flex-result > p{
display: block;
float: none;
margin: 0px auto;
padding: 15px 0px;
width: 96%;
text-align: center;
font-weight: 900;
}

.flexcolumn .form-select{
max-width: 100%;
}

.sortoption{
width: 100%;

margin: 2rem 0px 20px 0px;
display: block;
isolation: isolate;

}

.form-select, select.input-style{
border-radius: 8px;
max-width: 250px;
color: #888d93;
font-size: 0.85rem;

}

.form-select option, select.input-style option{
color: #888d93;
font-size: 0.85rem;
}


.form-select.show-mobil, select.input-style.show-mobil{
margin-left: auto;
margin-right: auto;
}


.sortoption .accordion-header, .accordion-flex .accordion-header, .sortoption .accordion-button, #flexSearchContentArea .accordion-item .accordion-header .accordion-button{
position: relative;
z-index: 2;
background-color: #ffffff;
color: rgb(94,149,47);
font-size: 1.1rem;
padding: 1rem 1.25rem;
}

.sortoption .accordion-collapse, .accordion-flex .accordion-collapse{
background-color: rgba(242, 242, 242, 1);
border-top: solid 2rem rgba(242, 242, 242, 1);
margin-top: -2rem;
}


.sortoption .accordion-body fieldset {
width: 90%;
display: block;
position: relative;
background-color: transparent;
border-radius: 0;
border-bottom: 0;
margin: 0px auto 0px auto;
}

.sortoption .accordion-button:not(.collapsed), #flexSearchContentArea .accordion-item .accordion-header .accordion-button:not(.collapsed) {
background-color: rgb(94,149,47);
color: #ffffff;
border-radius: 1rem;
border: solid 1px rgb(94,149,47);
box-shadow: inset 0 -1px 0 rgba(0,0,0,0);
}


.sortoption .accordion-body, .accordion-flex .accordion-body {
width: 100%;
display: block;
position: relative;
background-color: rgba(242, 242, 242, 0);
margin-bottom: 25px;
border-radius: 8px;
border-bottom: solid 1px rgba(94,149,47, 0.8);
position: relative;
z-index: 1;
padding: 3rem 0.25rem -2rem 0.25rem;
}


.sortoption .form-radiogroup{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-content: center;
align-items: center;
}

.sortoption .form-radiogroup label {
margin-bottom: 0px;
font-size: 0.85rem;
font-weight: 400;
}


.sortoption .accordion-button::after, .accordion-flex .accordion-button::after{
height: 100%;
background-color: rgb(94,149,47);
border: solid 2px rgb(94,149,47);
}



.empty-search, .search-resultword{
display: block;
width: 100%;
background-color: rgba(242, 242, 242, 1);
border-radius: var(--radiusAll);
padding: 15px 5px;
text-align: center;
}

.empty-search p, .search-resultword p{
font-size: 1rem;
padding: 5px 0px;
margin: 0px 0px 0px 0px;
}

.search-resultword p em{
font-style: italic;
font-size: 1.2rem;
}

.search-resultword  .highlight {
font-weight: 900;
}

/* Slider */
.single-product-tab {
float: none;
margin-bottom: 40px;
width: 100%;
max-height: 750px;
overflow: hidden;
}

.single-product-tab .tab-content {
position: relative;
float: none;
border-radius: 15px;
margin-bottom: 70px;
min-height: 450px;
max-height: 550px;
overflow: hidden;
}


.slider.slider-nav:not(:has(img)) {
display: none;
}

.slick-slider {
position: relative;
display: block;

}

.slick-list {
margin: 0 -12px;
width: 100%;
}

.slick-slide {
margin: 0 12px;
}

.slick-track{
display: flex!important;
}


.slick-prev, .slick-next{
z-index: 99;
background-color: rgba(255,255,255,0.7)!important;
}

.slick-prev:hover, .slick-next:hover{
background-color: rgba(255,255,255,0.85)!important;
}

.slider.slider-nav{
display: flex;
}

.slick-track .slick-slide{
max-height: 550px;
border-radius: 15px;
border: solid 1px rgb(221, 221, 221);
overflow: hidden;
}

.swipe-items .slick-track{
height: 100%;
max-height: 550px;
}

.swipe-items .slick-track .slick-slide{
height: 546px;
max-height: 550px;
}

.slider.slider-nav .plant-sliderimg, .slider.slider-nav .prod-sliderimg{
max-height: 130px;
max-width: 130px;
width: 130px;
overflow: hidden;
border-radius: 15px;
border: solid 1px rgb(221, 221, 221);
position: relative;
min-height: 130px;
min-width: 130px;
}

.slider.slider-nav .plant-sliderimg::after, .slider.slider-nav .prod-sliderimg::after{
content: "";
display: block;
padding-bottom: 100%;
}


.productImage{
border-radius: 15px;
border: solid 1px rgb(221, 221, 221);
display: block !important;
height: 100% !important;
max-width: 100% !important;
cursor: pointer;
width: 100%;
object-fit: cover;
}


.slick-track{
min-height: 130px;
}


.slider.slider-nav .plant-sliderimg .productImage, .slider.slider-nav .prod-sliderimg .productImage{
position: absolute;
}

.slider.slider-nav .prod-sliderimg .productImage{
min-width: 130px;
min-height: 130px;
}

.slick-prev {
left: 0px!important;
height: 100%!important;
width: 40px!important;

}

.slick-next {
right: 0px!important;
height: 100%!important;
width: 40px!important;
}

/*  Video */

.produkt-video{
width: 100%;
max-width: 100%;
position: relative;
border-radius: 15px;
}

.produkt-video .innerplayer {
position: relative;
padding-bottom: 51%;
padding-top: 30px;
height: 0;
overflow: hidden;
border-radius: 15px;
float: none;
}

.produkt-video .innerplayer iframe,  
.produkt-video .innerplayer object,  
.produkt-video .innerplayer embed, 
.produkt-video .innerplayer video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 15px;
}





/* Option Select*/

.productAttributeGrid{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 30px;
grid-column-gap: 10px;
grid-row-gap: 0px; 
padding: .25rem 1rem;
align-items: center;
position: sticky;
top: 0;
background-color: #FFFFFF;
}

.productAttributeGrid .grid-col{
font-size: 0.85rem;
font-weight: 500;
text-align: left;
padding: 0px 0px;
}

.product-select .dropdown{
width: 100%;
display: block;
margin: 20px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size: 1.1rem;
border: solid 1px #c0c0c0;
border-radius: 1.5rem;
color: #64b32c;
font-weight: 600;
position: relative;
}

.product-select .dropdown button.dropdown-toggle {
width: 100%;
background-color: transparent;
color: rgb(100, 179, 44);
padding: 0.85rem 1.25rem;
font-size: 1.1rem;
overflow: hidden;
box-shadow: rgba(0, 0, 0, 0) 0px -1px 0px inset;
text-align: left;
}


.product-select .dropdown::after {
height: 100%;
width: 1.25rem;
margin-left: auto;
content: "";
background-color: rgb(100, 179, 44);
border: 2px solid rgb(100, 179, 44);
min-width: 60px;
position: absolute;
right: -1px;
top: 0;
z-index: -1;
border-radius: 0px 1.5rem 1.5rem 0px;
text-align: center;
background-position: center center;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: 1.25rem;
transition: transform .2s ease-in-out;
}


.product-select .dropdown.open >  .dropdown-menu {
display: grid;
}

.product-select .dropdown.open{
border-radius: 1.5rem 1.5rem 0px 0px;
}

.product-select .dropdown.open::after{
border-radius: 0px 1.5rem 0rem 0px;
}

.product-select .dropdown-menu {
position: absolute;
z-index: 1000;
display: none;
min-width: 10rem;
padding: 0px 0px;
margin: 0;
font-size: 1rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #c0c0c0;
border-radius: 0;
width: 100%;
max-height: 400px;
overflow: auto;
}

.product-select .dropdown-menu .dropdown-item:nth-child(even){
background-color: rgba(192, 192, 192, 0.35);
}

.product-select .dropdown-menu .dropdown-item{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 55px;
grid-column-gap: 10px;
grid-row-gap: 0px; 
justify-items: center;
min-width: calc((100% / 4) - 30px);
}


.product-select .dropdown-menu .dropdown-item:hover{
text-decoration: none;
}

.dropdown-item .productAttribute{
font-size: 0.85rem!important;
font-weight: 400;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
align-self: center;
text-align: left;
width: 100%;
}

.detail-information .dropdown-item .productAttribute .productNo{
font-weight: 500;
display: inline-block;
min-width: auto;
white-space: nowrap;
}

.detail-information .dropdown-item .productAttribute span {
font-weight: 400;
}

.detail-information .dropdown-item .price-tag{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-content: center;
align-items: center;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
text-align: right;
}

.dropdown-item .price-tag span.price{
font-size: 1.1rem;
text-align: right;
font-weight: 600;
width: 100%;
padding: 0px 0px 0px 0px;
}

.dropdown-item .ready-for-shipment-variants > .label{
min-width: 100%;
font-size: 0.65rem;
border-radius: 0rem;
padding: 0px 0px  0px 0px;
margin: 0px 0px 0px 0px;
background-color: transparent!important;
text-align: right;
}


.dropdown-item  .ready-for-shipment-variants{
padding: 0px 0px  0px 0px;
margin: 0px 0px 0px 0px;
}

.detail-information .dropdown-item .label.label-success {
color: #5cb85c;
}

.detail-information .dropdown-item .label.label-danger {
color: #d9534f;
}


.detail-information .dropdown-item .label.label-warning {
color: rgba(252, 185, 52, 1);
}

/* Buy and Select */

.buy-select-block {
display: block;
width: 100%;
padding: 12px 0px 12px 0px;
margin: 2px 0px;
float: none;
position: relative;
background-color: transparent;
border: 0;
border-radius: var(--radiusAll);
clear: both;
}

.buy-select-block p{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.buy-select-block .addToCartRow{
background-color: transparent;
border: solid 1px rgba(148,192,69, 1) !important;
border-radius: var(--radiusAll);
padding: 12px 12px 12px 12px;
}


.buy-select-block  .addtoCartBush{
background-color: transparent;
border: solid 1px rgba(148,192,69, 1) !important;
border-radius: var(--radiusAll);
padding: 12px 12px 12px 12px;
display: flex;
align-content: center;
align-items: center;
}

.buy-select-block  .addtoCartBush .unitrow{
align-items: center;
}

.buy-select-block::before {
content: '';
width: 0;
height: 0;
display: none;

}

.buy-select-block::after {
content: '';
width: 0;
height: 0;
display: none;
}



.last-block.buy-select-block {
min-height: 60px;
max-height: 60px;
height: 60px;
margin: 0px 0px;
}


.last-block.buy-select-block > a{
line-height: 3rem;
}


.last-block.buy-select-block .btn-selectgreen{
background-color: rgb(147,191,68) !important;
border-color: rgb(147,191,68) !important;
}


.detail-information .addToCartRow .label{
border-radius: 20px 20px 0px 0px;
}


.detail-information .addToCartRow .btn.btn-warning{
border-radius: 0px 0px 20px 20px;
width: calc(100% + 24px);
margin: 0px -12px 0px -12px;
}



.buy-select-block .btn-success, .cartButtonWrapperDetails > button{
width: 100%!important;
min-width: 255px;
min-height: 3em;
border-radius: var(--radiusAll);
font-size: 1.1rem;
}


.cartButtonWrapperDetails > button .fa{
padding: 0px 12px;
font-size: 20px;
}

.buy-select-block .addToCartRow > div, .buy-select-block .addToCartRow  div.form-group {
margin-bottom: 0px;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
align-content: flex-start;
align-items: center;
}


.buy-select-block .addToCartRow > div .col:last-child{
max-width:80px;
}

.buy-select-block .addToCartRow .buy-amount{
color: rgba(148,192,69, 1)!important;
font-size: 1.15rem!important;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.buy-select-block .addToCartRow{
vertical-align: middle;
}

.buy-select-block .addToCartRow label{
font-size: 1.1rem;
font-weight: 400;
padding: 0px 8px 0px 0px;
margin: 0px 0px 0px 0px;
width: 100%;
}


.buy-select-block .addToCartRow .addToCartInput{
max-width: 60px;
}

.detail-information .price-tag{
background-color: transparent;
display: block;
width: 100%;
padding: 12px 0px 20px 0px;
margin: 0px 0px 0px 0px;
}




.detail-information .productNotification{
background-color: rgba(252, 185, 52, 1);
border: solid 1px rgba(1252, 185, 52, 1);
border-radius: var(--radiusAll);
padding: 12px 12px 12px 12px;
clear: both;
float: none;
margin-left: auto;
width: calc(100% - 65px);
margin-right: 15px;
}



.offer-button{
display: block;
width: 100%;
padding: 12px 0px 12px 0px;
margin: 0px 0px;
position: relative;
background-color: transparent;
}


.offer-button > a, #content .offer-button > a{
font-size: 1.1rem;
color: #ffffff !important;
background-color: #d42b00 !important;
border-color: #d42b00 !important;
height: auto !important;
padding: 12px 15px 12px 15px;
min-height: 34px;
text-align: center;
display: block;
width: 100%;
text-decoration: none;
border-radius: var(--radiusAll);
}

.offer-button > a span{
display: block;
margin: 0px auto;
}


/* Calculator */

.pressureCalculator{
font-family: arial, helvetica;
font-size: 14px;
display: block;
padding: 1rem 13rem 1rem 1rem;
margin: 2rem 0px;
background-color: rgba(136,170,233,0.6);
border: solid 1px  rgba(136,170,233,1);
border-radius: 6px;
max-width: 50%;
}

.pressureCalculator{
background: rgba(136,170,233,0.6) URL('/custom/shop/templates/rollrasen_perfekt_gruen/site/pics/bewaesserung_druck.png') no-repeat 98% center;
background-size: auto 88%;
}


.pressureCalculator form{
margin: 0px 0px 0px 0px;
}

.pressureCalculator .formrow{
width: 100%;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: flex-start;
align-content: center;
align-items: center;
margin: 0px 0px 8px 0px;
}

.pressureCalculator .formrow > div{
min-width: 30px;
}

.pressureCalculator .formrow label{
display: block;
margin: 0px 0px 0px 0px;
}

.pressureCalculator .formrow input{
padding: 4px 4px;
font-size: 12px;
margin: 6px 0px;
}

.mathicon{
padding: 0px 5px;
text-align: center;
vertical-align: bottom;
font-size: 32px;
font-weight: bolder;
align-self: end;
}


.pressureCalculator .formrow .input-result{
margin: 6px 6px;
max-width: 50px;
background-color: rgba(255,255,255,0.4);
border: solid 1px  rgba(136,170,233,1);
font-size: 14px;
-moz-appearance: textfield;
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button
-webkit-appearance: none;
}


.pressureCalculator .formrow .input-result:focus{
border: solid 1px  rgba(136,170,233,1);
outline: none;
}


.pressureCalculator .buttonrow{
border-top: solid 1px  rgba(136,170,233,1);
padding: 12px 0px 0px 0px;
text-align: center;
margin: 0px 0px 0px 0px;
}


.pressureCalculator .buttonrow button{
padding: 5px 5px 5px 5px;
text-align: center;
font-size: 14px;
font-weight: bold;
width: 100%;
color: #ffffff;
background-color: rgba(61,104,182,1);
border: solid 1px rgba(61,104,182,1);
border-radius: 6px;
line-height: 140%;
cursor: pointer;
}

/* Varianten */

.variants-flex{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
align-items: stretch;
}

.variants-row{
width: 48%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px; 
position: relative;
margin-bottom: 2rem;
display: flex;
align-content: stretch;
}

.variants-col{
background-color: rgba(148,192,69,0.2);
border-radius: 15px 15px 15px 15px;
}

.variants-col > div, .variants-col > form, .variants-col .row{
height: 100%;
display: flex;
}

.variants-col .col{
margin-left: 0px;
}

.variants-col .col.productImageSmall{
margin-left: 0px;
max-height: 100%;
min-height: 220px;
overflow: hidden;
position: relative;
max-width: 40%;
}

.variants-col .price-tag{
position: relative;
margin-top: 0px;
}


.variants-col p.productAttribute{
margin-bottom: 0rem!important;
}


.variants-col img.productImageSmall{
border-radius: 15px;
border: solid 1px rgb(221, 221, 221);
max-width: 100%!important;
height: 100%!important;
width: 100%;
object-fit: cover;
}

.variants-col small.price-addon{
position: relative;
white-space: nowrap;
bottom: 0px;
right: 0;
display: block;
}

.variants-header{
font-size: 1.3rem;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px; 
}

.variants-header > a{
text-decoration: none;
font-size: 1.2rem;
color: #64b32c !important;
font-weight: 700;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px; 
}

.text-left .add-to-cart{
text-align: left!important;	
display: none;
}

.variant-attributes {
margin-bottom: 1rem;
}


.variant-attributes .productAttribute {
font-size: 0.95rem;
}


.variant-attributes .productAttribute .productNo{
font-weight: 600;
display: inline-block;
min-width: 125px;
white-space: nowrap;
font-size: 0.95rem;
}



.ready-for-shipment-variants > .label, .detail-information .label{
border-radius: 50rem;
padding: 0.5rem 1rem 0.5rem 1rem;
display: inline-block;
min-width: 140px;
}

.productInfo{
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
align-content: stretch;
align-items: stretch;
padding: 15px 15px 15px 15px!important;
}


.productInfo > div{
margin-left: 15px;
margin-right: 15px;
}

small.price-addon {
color: #444444;
font-size: 13px;
position: relative;
white-space: nowrap;
bottom: 0;
right: 0;
display: block;
}


.item-listprice small.price-addon{
position: relative;
white-space: nowrap;
bottom: 0px;
left: 0px;

}


.detail-information .label-infoshipping{
display: block;
color: #444444;
position: relative;
line-height: 30px;
text-align: left;
border-radius: var(--radiusAll);
border: solid 1px rgb(128, 168, 57);
margin: 1rem 0px 0rem 0px;
padding: 12px 60px 12px 20px;
border: solid 1px rgba(148,192,69, 1);
border-radius: var(--radiusAll);
background-color: rgba(202, 198, 190, 0.3);
}


.detail-information .label-infoshipping::after{
content: '\f0d1';
font-family: "Font Awesome 5 Free";
font-size: 22px;
font-weight: 600;
position: absolute;
right: 0px;
background-color: rgba(128, 168, 57) !important;
color: #ffffff;
border-radius: 0px 20px 20px 0px;
display: flex;
top: 0;
height: 100%;
width: 60px;
min-width: 60px;
justify-content: center;
align-content: center;
align-items: center;
}


/* Frage Box */

.box-questions{
border-radius: 15px;
display: block;
position: relative;
overflow: hidden;
margin-left: 20px;
margin-top: 2.5rem;
}


.prod-col-2 .box-questions{
margin-left: 0px;
margin-top: 0px;
}

.detail-information .box-questions{
margin-left: 0px;
}


.box-questions .box-shipping .marke-info{
text-align: left;
display: flex;
flex-direction: row;
flex-wrap: wrap;

}

.box-questions .box-shipping .marke-info > p{
width: 100%;
display: block;
flex-grow: 1;
}

.box-questions .box-shipping .marke-info .col{
width: calc(100% / 2);
}

.box-questions .box-kontakt{
background-color: rgba(252, 185, 52, 1);
display: block;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: #ffffff;
}

.box-questions .box-shipping{
background-color: rgba(252, 185, 52, 0.3);
display: block;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: right;
}

.box-kontakt .box-inner, .box-shipping .box-inner{
padding: 20px 20px;
margin: 0px 0px 0px 0px;
}

.box-kontakt p, .box-kontakt p a{
color: #ffffff;
font-size: 1rem;
}

#content .box-kontakt a, #content .box-kontakt p a{
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
color: #ffffff!important;
border: solid 1px #fff;
border-radius: 12px;
padding: 8px 12px;
}

#content .box-kontakt a:hover, #content .box-kontakt p a:hover{
background-color: rgba(254,234,194,1);
color: #444444!important;
}


#content .box-shipping a, #content .box-shipping p a{
text-decoration: none;
font-weight: 700;
font-size: 1.1rem;
display: inline-block;
line-height: 1.2rem;
}

#content .box-shipping a > span{
font-weight: 900;
font-size: 1rem;
padding: 0px 0px 0px 5px;
vertical-align: middle;
}

.cart-head{
border-radius: 8px 8px 0px 0px;
}

#voucherBox .cart-head{
background-color: #fcb934;
border-radius: var(--radiusSmallTop);
}

#voucherBox.cart-total-box > ul, #voucherBox.cart-total-box > ul > li > input{
border: solid 1px #fcb934;
}

#voucherBox .btn-success.disabled, #voucherBox .btn-success:disabled{
background-color: #fcb934;
border-color: #fcb934;
}


/* Vorteile Sonderbereich */
.prod_vorteile .row > div > div{
border: solid 1px #64b32c;
margin: 12px;
min-height: 200px;
}

.prod_vorteile .row > div{
padding: 0px 0px !important;
}

.prod_vorteile h3{

}

/* Forms */

.btn-success{
background-color: rgb(147,191,68);
border-color: rgb(147,191,68)!important;
}

.btn-success:hover {
color: #fff;
background-color: #5e952f;
border-color: #5e952f;
}

.btn-success.submit{
padding: .375rem 25px;
min-width: 250px;
}

fieldset{
width: 100%;
display: block;
position: relative;
background-color: rgba(242, 242, 242, 1);
margin-bottom: 25px;
border-radius: 8px;
border-bottom: solid 1px rgba(147,191,68, 0.8);
}

fieldset legend {
background-color:  rgba(147,191,68, 0.8);
border-bottom: 0;
line-height: 35px;
font-weight: 600;
font-size: 1rem;
color: #ffffff;
padding: 0px 12px 0px 12px;
border-radius: 8px 8px 0px 0px;
}



fieldset label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 400;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
border:1px solid rgba(206, 212, 218, 1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(206, 212, 218, 0.6);
outline: 0 none;
}

.form-control:focus{
border: 1px solid #ced4da;
}

fieldset .form-group label, fieldset .check-box{
color: rgba(68, 68, 68, 0.8);
}

fieldset .check-box{
padding: 12px 12px 12px 0px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-content: center;
align-items: center;
}

fieldset .check-box > *{
display: block;
}

fieldset .check-box label{
margin-left: 8px;
}

.form-radiogroup{
display:flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
align-content: flex-start;
flex-wrap: nowrap;
}


.form-radiogroup .form-check{
margin-right: 20px;
}

fieldset .form-group .input-style {
border-radius: 4px;
}

fieldset .form-group.sidebyside label{
width: calc(100% - 250px);
max-width: 50%;
flex: 0 0 50%;
}

.form-group {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
align-items: center;
}

.form-group.grouparea{
align-content: flex-start;
align-items: flex-start;
}


/* custom checkbox */


.checkboxCoupled .form-check-input, .checkboxCoupled .form-check-input:focus, .checkboxCoupled input[type="checkbox"]:focus {
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
border: solid 1px rgba(128, 168, 57)!important;
outline-offset: 0;
outline: var(--dpg-darkgreen);
cursor: pointer;
}

.checkboxCoupled .form-check-input:checked {
background-color: rgba(128, 168, 57);
border-color: rgba(128, 168, 57);
}


/* Gutscheine */
.voucher-sale{
margin-bottom: 3rem;
}

.voucher-sale .bubble-button, .voucher-sale a.bubble-button{
background-color: rgba(255, 255, 255,0.7);
border:  solid 1px rgba(255, 255, 255,0.9);
display: block;
border-radius: var(--radiusPill);
color: #64b32c!important;
text-decoration: none;
text-align: center;
padding: 8px 15px;
width: 100%;
font-weight: 600;
margin-top: 15px;
}

.voucher-sale a.bubble-button:hover{
background-color: rgba(255, 255, 255,1);
}

/* Bestellvorgang */

.orderable-info{
border: solid 2px rgb(176, 42, 55);
margin: 2rem 0px;
padding: 2rem 2rem 1.5rem 2rem;
color: rgb(176, 42, 55)!important;
border-radius: var(--radiusAll);
background-color:rgba(115,113,112,0.1);
text-align:center;
}

.orderable-info p, .orderable-info p em{
color: rgb(176, 42, 55)!important;
margin-bottom: 0.5rem;
}

.orderable-info p em{
font-weight: 600;
}



.cart-head > h2 {
color: #FFF !important;
width: 98%;
margin:auto;
}

#formNav{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items:center;
align-content: center;
}

#formNav hr{
width: 100%;
flex-grow: 1;
}

#formNav .btn.btn-success{
margin-left: auto;
min-width: 120px;
}

#formNav > a{
margin-right: 12px;
}

.box-info-password{
padding: 20px 0px;
width: 100%;
margin: 0rem auto;
}


.box-info-register{
margin: 1rem auto;
background-color: rgba(148,192,69,0.2) !important;
padding: 20px;
border-radius: var(--radiusSmallAll);
width: 100%;
}

.box-info-register p{
padding: 0px 0px;
margin: 0px 0px;
}


.progress .progress-bar{
background: rgba(252,185,52,1)!important;
}
.order-withregistration, .order-guest {
margin-bottom: 4rem;
background-color: rgba(148,192,69,0.2)!important;
padding: 20px;
border-radius: var(--radiusSmallAll);
}


.order-login .heading2{
border-radius: var(--radiusSmallAll);
}


.box-branchinfo h5, .box-infocart h5 {
font-size: 1rem;
color: #5e952f !important;
border-bottom: 2px solid #5e952f;
padding: 4px 4px 4px 12px;
margin: 0px 0px 12px -12px;
}


.heading2 > h2, .heading6 > h2{
color: #5e952f !important;
font-weight: 600;
}

.option-useshipto{
background-color: rgba(148,192,69,0.2) !important;
padding: 20px;
border-radius: var(--radiusSmallAll);

}

.option-useshipto .form-group{
margin-bottom: 0px;
}

.option-useshipto label.checkbox{
width: 100%;
cursor: pointer;
color: #5e952f !important;
}

fieldset.shipping-info{
border-bottom: solid 1px rgb(252, 185, 52);
background-color: rgba(252, 185, 52, 0.2);
}

fieldset.shipping-info legend{
background-color: rgba(252, 185, 52, 0.8);
}


.group-order-wrapper, .order-okoverview{
width: 100%;
display: block;
position: relative;
background-color: rgba(242, 242, 242, 1);
margin: 0px 0px 45px 0px;
border-radius: var(--radiusSmallAll);
border-bottom: solid 1px rgba(147,191,68, 0.8);
}

.group-order-wrapper h4, .order-okoverview h4 {
background-color: rgba(147,191,68, 0.8);
border-bottom: 0;
line-height: 35px;
font-weight: 600;
font-size: 1rem;
color: #ffffff;
padding: 0px 12px 0px 12px;
border-radius: var(--radiusSmallTop);
}


.group-dispatcher, .group-payment {
margin-bottom: 0px;
padding-bottom: 0px;
border-bottom: 0;
margin: 0px 12px 0px 12px;
}



.orderinfo-box p{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}

.group-order-wrapper .order-memo{
background-color: transparent;
}

.group-order-wrapper.mt-4{
margin-top: 4rem!important;
}

.sumtable{
border: 1px solid #64b32c;
}


.order-okoverview .inner-products {
padding: 0px 0px !important;
margin: 20px 38px 20px 0px;
border: 1px solid #D6D6D6;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
min-height: 300px;
background-color: #ffffff!important;
}


#trustbadgeCustomCheckoutContainer{
margin: 0px auto 4rem auto;
}

#trustbadgeCustomCheckoutContainer a, #content #trustbadgeCustomCheckoutContainer a{
color: rgb(77, 77, 77) !important;
}

#trustbadgeCustomCheckoutContainer div[id*="Button"] a, #content #trustbadgeCustomCheckoutContainer div[id*="Button"] a{
color: #ffffff !important;
}


/* SALE Winterinspektion */


.sale-info-winter{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
position: relative;
margin: 2rem auto;
padding: 0px 0px;
max-width: 800px;
}



.sale-info-image{
width: 50%;
max-width: 300px;
min-width: 300px;
}




.sale-info-text{
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-content: center;
align-items: center;
position: relative;
font-weight: 600;
font-size: 1.2rem;
width: 100%;
}

#content .sale-info-text p{
font-size: 1.2rem;
max-width: 80%;
margin: 1rem auto 3rem auto;
}


.sale-button{
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-content: center;
align-items: center;
text-align: center;
border-radius: 50em;
background-color: red;
width: 100%;
height: 100%;
color: #ffffff;
max-width: 300px;
max-height: 150px;
min-width: 300px;
min-height: 150px;
font-size: 26px;
}


#content .sale-button a{
font-size: 26px;
color: #ffffff!important;
text-decoration: none;
}

.sale-button .saleprice, #content  .sale-button a .saleprice{
display: block;
font-weight: 900;
font-size: 26px;
}


.asksam .single-img{
border-radius: 15px;
border: solid 1px rgb(221, 221, 221);
display: block !important;
height: 100% !important;
max-width: 100% !important;
cursor: pointer;
width: 95%;
object-fit: cover;
margin-right: 25px;
overflow: hidden;
position: relative;
}

.asksam .single-img img{
width: 100%;
height: 100%;
display: block;
position: absolute;
}

.asksam .single-img:after {
content: "";
display: block;
padding-bottom: 100%;
}

.asksam .product-short-attribute p{
margin-bottom: 0.5rem;
}







/* register */


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

.ordertable-wrapper .table th{
background-color: #c8d3b2;
padding: 10px 8px;

}


@media all and (max-width: 1320px) {
.header .container {
max-width: 1140px!important;
}
}



@media (min-width: 769px){
#mm-mobilmenu {
display: none!important;
}

}




/* ============ mobile view ============ */
@media all and (max-width: 991px) {

.box-row p{
width: calc((100% / 3) - 20px);
max-width: calc((100% / 3) - 20px);
}

.grid-row-product-detail{
grid-template-columns: minmax(100%, 991px);
grid-template-rows: repeat(3, auto);
grid-column-gap: 0px;
grid-row-gap: 0px; 
}

.grid-row-product-detail .prod-col-1 { grid-area: 2 / 1 / 3 / 2; margin-top: 50px;}
.grid-row-product-detail .prod-col-3  { grid-area: 1 / 1 / 2 / 2; }
.grid-row-product-detail .prod-col-2 { grid-area: 3 / 1 / 4 / 2; } 


.swipe-items .slick-track .slick-slide {
height: 768px;
max-height: 768px;
width: 100%;
max-width: 768px;
margin-left: auto;
margin-right: auto;
}


.mobilnav{
display: block;
}

h1{
font-size: 1.8rem!important;
}

.sitesearch {
display: none;
}	


.topicon.icon-nav, .topicon.icon-search {
display: block;

}


.header .navbar .menu li.dropdown ul.dropdown-menu {
display: none!important;
}

.header .navbar .menu li.dropdown > ul.dropdown-menu.show{
display: flex !important;
opacity: 1 !important;
}

.dropdown-menu.show > li.dropdown > .dropdown-menu.show {
display: flex !important;
opacity: 1 !important;
}

.show-mobil{
display: block!important;
}

.hide-mobil{
display: none!important;
}

.header .navbar .menu ul.navbar-nav {
float: none;
margin: 0;
padding: 0;
width: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: stretch;
align-items:  flex-start;
align-content: flex-start;
}

.header nav {
top: 0px;
width: 100%;
right: 0px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

.header .navbar .menu{
height: 100%;
}

.topinfo{
display: none;
}

.navbar-nav > li.nav-item{
border-radius: 0px 0px 0px 0px;
text-align: left;
min-width: 100%;
}

.navbar-nav > li.nav-item, .header nav .menu ul li{
border-radius: 0px 0px 0px 0px;
padding: 0px 0px 0px 12px;
text-align: left;
min-width: 100%;
position: relative;
}

.navbar-nav > li.nav-item.active{
padding: 4px 0px 4px 12px;
}


.navbar-nav > li.nav-item > a.nav-link{
width: 100%;
border-radius: 16px 0px 0px 16px;
text-align: left;
padding: 6px 0px 6px 22px!important;
line-height: 50px;
}

.header .navbar .menu li.dropdown ul.dropdown-menu{
display: none;
}

.navbar-nav li span.dropdown-toggle{
position: absolute;
right: 0;
top: 0;
bottom: 0px;
height: 100%;
display: block;
width: 25px;
height: 70px;
text-align: center;
padding: 6px 10px 6px 0px !important;
line-height: 50px;
font-weight: 600;
color: rgba(0,0,0,0.5);
cursor: pointer;
}

.header .navbar .menu ul.dropdown-menu.show {
display: flex !important;
opacity: 1!important;
}

.header .navbar .menu ul.dropdown-menu.show {
transform: none;
transform-origin: top;
transition: none;
}

.header .navbar .menu .dropdown-toggle.show em{
transform: rotate(90deg);
display: inline-block;
}


.navbar-nav li.nav-green, .navbar-nav li.nav-green.active{
background-color: rgb(147,191,68);
}

.navbar-nav li.nav-red, .navbar-nav li.nav-red.active{
background-color: rgb(227, 7, 19);
}

.navbar-nav li.nav-blue, .navbar-nav li.nav-blue.active{
background-color: rgb(69, 144, 186);
}

.navbar-nav li.nav-orange, .navbar-nav li.nav-orange.active{
background-color: rgb(239, 123, 0);
}

.navbar-nav li.nav-grey, .navbar-nav li.nav-grey.active{
background-color: rgb(207, 183, 24);
}

.navbar-nav li.nav-green2, .navbar-nav li.nav-green2.active{
background-color: rgb(94,145,44);
}


.header .navbar .menu ul.dropdown-menu > li:first-child{
border-radius: 20px 0px 0px 0px;
}

.header .navbar .menu ul.dropdown-menu > li:last-child{
border-radius: 0px 0px 0px 20px;
padding-bottom: 0px;
}



.header .navbar .menu ul.dropdown-menu:before{
display: none!important;
}

.header .navbar .menu ul.dropdown-menu{
border-radius: 20px 0px 20px 0px;
padding: 0px 0px 10px 0px;
margin: 0px 0px 0px 0px;
box-shadow: none !important;
width: 100%;
min-width: 100%;
z-index: -1;
}

.header .navbar .menu li.nav-green ul.dropdown-menu{
border-bottom-width: 0px;
}

.header .navbar .menu li.nav-red ul.dropdown-menu{
border-bottom-width: 0px;
}

.header .navbar .menu li.nav-blue ul.dropdown-menu{
border-bottom-width: 0px;
}

.header .navbar .menu li.nav-orange ul.dropdown-menu{
border-bottom-width: 0px;
}

.header .navbar .menu li.nav-grey ul.dropdown-menu{
border-bottom-width: 0px;
}


.navbar-nav > li.nav-item ul.dropdown-menu li > a{
padding: 18px 0px 18px 8px !important;
}


.header .navbar .menu ul.dropdown-menu.show ul.dropdown-menu{
transform: none!important;
transform-origin: top!important;
transition: none!important;
}


.dropdown-menu.show > li.dropdown > .dropdown-menu{
display: block;
display: flex !important;
opacity: 1 !important;
}


.offcanvas-header{ 
display:flex; 
flex-wrap: nowrap;
}

.header .navbar.mobile-offcanvas{
visibility: hidden;
transform:translateX(-100%);
border-radius:0; 
display:block;
position: fixed;  top: 0; left:0;
height: 100%; width:80%;
z-index: 1200; 
overflow-y: scroll;
overflow-x: hidden;
transition: visibility .3s ease-in-out, transform .3s ease-in-out;
background-color: rgba(206,222,192,1);
}

.header .navbar.mobile-offcanvas.show{
visibility: visible;
transform: translateX(0);
}
.header .navbar.mobile-offcanvas .container, .header .navbar.mobile-offcanvas .menu{
display: block;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
background-color: #FFFFFF;
}



/* welcome */

.bubble-bg {
width: 100%;
width: calc(100% + (calc(var(--bs-gutter-x) * .9) * 2));
padding: 5px 0px 12px 75px;
background-size: auto 100%;
margin-left: calc(calc(var(--bs-gutter-x) * .9) * -1);
}


.bubble-text-robdefault{
padding: 45px 0px 10px 60px;
width: 90%;
background-size: auto 100%;
}

.bubble-text-robdefault.heckenbaeume{
padding: 45px 0px 10px 50px;
}

.bubble-text-robdefault.dachbegruenung{
margin-left: 0px;
}


.bubble-text-robdefault.showmaster::before, .bubble-text-robdefault.bewaesserung::before, .bubble-text-robdefault.heckenbaeume::before, .bubble-text-robdefault.dachbegruenung::before, .bubble-text-robdefault.maehroboter::before{
width: 120px;
height: 280px;
left: -68px;

}


.sectiongroup{
width: 100%;
max-width: calc(100% - 20px);
padding: 0px 0px 0px 0px;
margin: 0px auto 0px auto;
}


.sectiongroup.productgroup{
width: 100%;
max-width: 100%;
}

.sectiongroup .container{
width: 100%;
padding: 0px 0px 0px 0px;
margin: 0px auto 0px auto;
}

.sectiongroup .groupfooter{
margin: 0px 0px 0px 0px!important;
display: none;
}


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


.coltext h2 {
font-size: 1.8rem;
margin-bottom: 0.5rem;
word-break: break-all;
}


.sectiongroup .row-groups > div{
max-width: 100%;
width: 50%;
padding: 0px 0px;
flex: 1 0 100%;
margin-top: 1rem !important;

}


.sectiongroup .groupthumb{
border-radius: 12px 12px 12px 12px;
}

.groupthumb > a span{
min-width: 100%;
width: 100%;
border-radius: 0px 0px 0px 0px;
}


.sectiongroup .sectionwide {
margin-left: -10px;
margin-right: -10px;
}

.sectionwide .bubble-bg {
margin-top: -25px;
max-width: 550px;
max-height: 350px;
width: 100%;
height: 350px;
margin-left: auto !important;
padding: 0px 0px 0px 0px !important;
margin-right: auto;
}

.sectionwide .bubble{
width: 92%;
padding: 5px 5px 12px 5px;
margin-left: auto;
margin-right: auto;
}


footer .footer-box {
padding: 2rem 0rem;
}

footer{
padding-bottom: 55px;
}

.agrilogo a{
right: -25px;
top: auto;
bottom: 25px;
max-height: 80px;
height: 80px;
}

.pageNav nav{
flex-wrap: wrap;	
}

.pageNav .nav-group-back{
order: 3;	
}

.pageNav  .nav-pages-info{
order: 1;
width: 50%;
border-left: 0;
border-right: 0;
margin-bottom: 18px;
text-align: right;
}	

.pageNav  .nav-pages{
	order: 4;
}

.pageNav .nav-entries{
order: 2;
width: 50%;
border-left: solid 1px rgba(55, 55, 55, 1);
border-right: 0;
margin-bottom: 18px;
text-align: left;
}


.pageNav .nav-group-next{
	order: 5;
}
}
/* ============ mobile view .end// ============ */


@media all and (max-width: 767px){

.header .row{
flex-wrap: nowrap;
}


.box-row p{
width: 100%;
max-width: 100%;
hyphens: auto;
}

.bubble-text-robdefault.heckenbaeume {
padding: 45px 0px 10px 50px;
}

.top-bar .icon-search, .top-bar .icon-nav, .top-bar button.show-nav, .top-bar .topicon{
margin-left: 0px;
margin-right: 0px;
margin-bottom: 15px;
max-width: 45px;
width: 45px;
}

.top-bar {
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
}


.icon-user{
display: none;
}



.topicon-search {
display: flex;
}

.logo {
max-height: unset;
position: absolute;
width: 88%;
min-width: unset;
text-align: left;
display: block;
margin: 20px 0px 0px 0px;
z-index: 99;
top: 0px;
left: 0px;
}




.logo img {
width: 100%;
height: auto;
max-height: unset;
margin: 0px 0px 0px 0px;
}


.sitesearch{
min-width: auto;
width: 100%;
height: 100%;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-end;
}





.header .navbar.mobile-offcanvas .container, .header .navbar.mobile-offcanvas .menu{
background-color: rgb(147,191,68);
}


.nav-item, .nav-item > a{
position: relative;
}

.navbar-nav li span.dropdown-toggle, .navbar-nav li span.dropdown-toggle.show{
line-height: 100%;
width: 40px;
font-size: 18px;
height: 100%;
max-height: 70px;
padding: 0px 10px 0px 0px !important;
display: grid!important;
color: rgba(255, 255, 255, 0.7);
}

.nav-item.active span.dropdown-toggle.show,  .nav-item span.dropdown-toggle.show{
color: rgb(147,191,68);
}


.navbar-nav > li.nav-item > a.nav-link{
color: rgba(255, 255, 255, 0.7);
background-color: rgba(255,255,255,0.4);
height: auto;
}

.navbar-nav li span.dropdown-toggle em{
margin: auto auto;
}


.nav-item.active span.dropdown-toggle{
color: rgb(147,191,68);
}


.navbar-nav > li.nav-item, .header nav .menu ul li{
padding: 4px 0px 4px 12px;
}




.navbar-nav li.nav-green:hover > a, .navbar-nav li.nav-green.active > a {
background-color: rgb(255,255,255) !important;
color: rgba(147,191,68, 1) !important;
}


.headerkey .videobg > video{
width: 100%;
height: auto;
max-height: 140px;
}

footer{
padding-top: 0px;
}

.footer-box li a, .footer-box p, .footer-box a{
font-size: 0.95rem;
}

.footer-box.linkbox ul li {
width: 100%;
}


footer .payment-box{
padding: 2rem 0rem;
}

.sectiongroup .row.img-left .colimg, .sectiongroup .row.img-right .colimg{
text-align: left;
position: absolute;
top: -6rem;
right: 0;
}

.sectiongroup .coltext {
margin-top: 4rem;
width: 100%;
}


.infototal::before{
width: 30%;
height: 145px;
}


/* Listen */
.groupgallery .inner-products{
max-width: 100%!important;
min-width: 100%!important;
}

.groupgallery .col-xs-6 {
width: 100%;
padding-right: 0px;
padding-left: 0px;
}

.groupgallery {
padding-right: 0px!important;
padding-left: 0px!important;
}

.component-list .component-item{
min-width: 15%;
width: calc((100% / 2) - 20px);
}

.pressureCalculator {
max-width: 100%;
padding: 1rem 1rem 3rem 1rem;
background-size: auto 138px;
background-position: 98% bottom;
}

.pressureCalculator .buttonrow button{
width: 65%;
padding: 20px 25px;
}

.pressureCalculator .formrow input {
width: 90%;
}



.sectiongroup .row-groups{
margin-left: 20px!important;
margin-right: 20px!important;
}


/* Produkte */


.grid-row-product-detail{
grid-template-columns: minmax(100%, 360px);
grid-template-rows: repeat(3, auto);
grid-column-gap: 0px;
grid-row-gap: 0px; 
}


.grid-row-product-detail .prod-col-1 { grid-area: 1 / 1 / 2 / 2;  margin-top: 0px;}
.grid-row-product-detail .prod-col-3  { grid-area: 2 / 1 / 3 / 2; }
.grid-row-product-detail .prod-col-2 { grid-area: 3 / 1 / 4 / 2; } 

.details-text ul{
column-count: 1;
column-gap: 0px;
}

.col-xs-12{
width: 100%!important;
}

.single-product-tab {
margin-bottom: 0px;
float: none;
}


.block{
padding: 20px 0px 70px 0px;
}


#itemsList .inner-products, #itemsList.voucher .inner-products, #itemsVariantsList.voucher .inner-products {
width: 100%;
max-width: unset;
flex-basis: 100%;
}

.block-first.pageheader, .block-first.groupheader, .headerkey {
padding: 0px 0px;
max-height: 140px;
min-height: 140px;
}


.block-first.pageheader{
min-height: auto;
}

.nomobilheader h1, .nomobilheader h1.parentGroupName{
text-align: left;
}

.nomobilheader{
display: none!important;
}

.mobilheader{
display: block;
}

.detail-information > div {
margin-left: 0px;
}

.productPartsListe .partsInfobox, .productPartsListe .partsAmount {
flex-wrap: wrap;
}

.productPartsListe .partsInfobox .partsInfoPreis, .productPartsListe .partsInfobox .partsInfoPreis p {
width: 100%;
}

.productPartsListe .partsInfobox .partsInfoPreis{
order: 1;
order: 1;
margin-top: -0.5em;
padding-bottom: 0.4em;
}

.productPartsListe .partsInfobox .partsInfoName{
order: 2;
}

.productPartsListe .partsInfoIMG{
margin-left: 0px;
max-width: 120px;
}

.productPartsListe .partsInfoIMG > img {
width: 100%;
height: auto;
max-height: 100%;
min-width: 100px;
max-width: 100px;
}


.single-product-tab .tab-content {
margin-bottom: 20px;
min-height: unset;
}

.plOptions .checkboxCoupled{
margin-top: 1.5em;
}


.logo-col img{
max-width: 90px;
}

.fachhaendler{
flex-wrap: wrap;
flex-direction: column;
}

.fachhaendler div.col, .fachhaendler div{
width: 100%!important;
}

.fachhaendler div:first-child{
padding-bottom: 1rem;
margin-bottom: 1rem;
width: 100%!important;
max-width: unset;
border-right: 0;
padding-right: 0px;
margin-right: 0px;
border-bottom: solid 1px rgba(148,192,69, 1);
}

.fachhaendler div:last-child{
align-self: flex-start;
text-align: left;
}


.partsInfotext ul{
columns: 1;
column-gap: 0px;
}

.infobox-shipping{
display: block;
float: none;
width: 100%;
}


.box-questions {
margin-bottom: 2rem;
margin-left: auto;
margin-right: auto;

}

.option-row, .productfeature p{
flex-direction: column;
flex-wrap: wrap;
}

.option-row .col-name, .productfeature p > strong{
width: 100%;
max-width: 100%;
padding-right: 0px;
}

.buy-select-block .addToCartRow .addToCartInput, .buy-select-block .addtoCartBush .addToCartInput {
max-width: 60px;
}

.variants-row{
width: 100%;
}

.variant-attributes .productAttribute .productNo {
min-width: 100%;

}

.variants-col .row{
/*flex-direction: column;*/
}

.variants-col .col.productImageSmall, .variants-col .productInfo{
/*width: 100%;*/
/*max-width: 100%;*/
max-height: 100%;
height: 100%;
}

.variants-col .label-lieferzeit{
display: inline-block;
}

.variants-col .label-lieferzeit > span {
float: right;
}

.sectionwide {
height: 100vh;
display: flex;
}

.sectionwide .container, .sectionwide .container .row > *{
padding-right: 0px;
padding-left:0px;
margin-top: auto;
margin-bottom: auto;
align-self: center;
}

.block-first.pageheader{
background-size: cover;
background-repeat: no-repeat;
}

.block-first.pageheader[style]{
min-height: 140px!important;
max-height: 140px!important;

}



.swipe-items .slick-track .slick-slide{
height: 390px;
max-height: 390px;
width: 100%;
max-width: 390px;
margin-left: auto;
margin-right: auto;
}


/* Formulare*/


fieldset .form-group label {
max-width: 100%;
width: 100%;
min-width: 100%;
flex: 0 0 100%;
}
fieldset .form-group .input-style {
max-width: 100%;
width: 100%;
min-width: 100%;
flex: 0 0 100%;
}

.form-check.fullwidth {
width: 100%;
margin-left: 0px;
}

fieldset .form-group.fullwidth label {
min-width: auto;
max-width: calc(100% - 35px);
width: calc(100% - 35px);
}



/* Cart */

.homelist-block ul.tooltip-btn label::after, .cartColAmount .form-group label::after {
right: 10px;
}

.cartColAmount .form-group input.addToCartInput, .cartColAmount .form-group .btn-success {
width: 100%;
}

.homelist-block ul.tooltip-btn input, .cartColAmount .form-group input.addToCartInput {
padding-right: 45px;
}


.progress {
margin-bottom: 30px;
margin-top: 30px;
}

.order-guest .btn-success, .order-withregistration .btn-success, .order-login .btn-white {
width: 100%;
white-space: break-spaces;
}

.orderinfo-box p {
display: flex;
flex-direction: column;
}

#formNav {
padding-bottom: 2rem;
justify-content: space-between;
}

#formNav hr{
order: 1;
}

#formNav .btn-success{
order: 2;
width: 100%;
margin-bottom: 2rem;
}

#formNav > a{
order: 3;
}

}



/* mobil Navigation */


.mm-divider{
background-color: var(--dpg-darkgreen);
background: var(--dpg-darkgreen);
background-image: none;
max-height: 3px;
height: 3px;
min-height: 3px;
}



.mm-navbar--tabs span {
display: inline-block;
margin-inline-start: 8px;
}
.mm-wrapper--opened .mm-wrapper__blocker{
background: rgba(0,0,0,.6);
box-shadow: inset 6px 0px 14px rgb(0, 0, 0);
}

.mm-navbars--bottom, .mm-navbars--bottom .mm-navbar {
border-top: 1px solid var(--mm-color-border);
background-color: var(--dpg-darkgreen);
}


.mm-navbars--bottom  .mm-navbar a{ 
color: #ffffff!important;
font-size: 22px;
}

.mm-navbar__tab{
color: var(--dpg-darkgreen)!important;
}

.mm-navbar__tab.mm-navbar__tab--selected{
color: #ffffff!important;
}

.mm-panel .loginform{
display: flex;
flex-direction: column;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
}

.mm-panel .loginform label, .mm-panel .loginform input{
width: 100%;
min-width: 100%;
display: block;
}

.mm-panel .loginform label{
padding-top: 12px;
padding-bottom: 6px;
}

.mm-panel .loginform input{
font-size: 17px;
line-height: 17px;
padding: 4px 8px 4px 8px;
border-radius: 4px 4px;
border: solid 1px var(--dpg-darkgreen);
}

.mm-panel .loginform input.submit{
margin-top: 12px;
padding: 4px 8px 4px 8px;
background-color: var(--dpg-darkgreen);
border-radius: 4px 4px;
border: 0px;
color: #ffffff;
font-size: 17px;
line-height: 25px;
cursor: pointer;
}

.mm-menu--position-left, .mm-menu--position-left-front{
box-shadow: 0 0 10px rgba(0,0,0,.3);
}

.mm-menu--offcanvas {

}





/* Header Image Animation */
#headerkey {
display: block;
height: 100%;
width: 100%;
margin: 0px 0px;
min-height: 100%;
}


#headerkey img {
width: 100%;
height: 100%;
animation-name: headerkeyFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite; 
animation-duration: 20s;
animation-direction: alternate;
position:absolute;
object-fit: cover;
}

#headerkey img:nth-of-type(1) {
animation-delay: 18s;
}

#headerkey img:not(:first-child):not(:last-child) {
animation-delay: 10s;
}

#headerkey img:last-child {
animation-delay: 2s;
}

@keyframes headerkeyFadeInOut {
/* distributing times evenly */
0% {
opacity: 1;
}
25% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}

@media (min-width: 1400px){
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
max-width: 1140px!important;
}
}




/* Register B2B */
.bubble-text-long{
height: 500px;
max-height: unset;
padding: 45px 0px 10px 180px;
}


.bubble-bg:has(.bubble-text-long){
max-height: unset;
height: auto;
background: none;
isolation: isolate;
}

.bubble-text-robdefault.bubble-text-long{
background: none;
}


.bubble-bg:has(.bubble-text-long)::after{
content: '';
width: 97%;
height: 90%;
background-color: rgb(251,186,52);
position: absolute;
top: 10px;
left: 0;
z-index: -1;
border-radius: 68em 29em 38em 29em;
}


.bubble-text-long p:first-of-type{
padding-bottom: 0.8rem;
}

.bubble-text-long small{
font-size: 0.75rem;
}


.vcenter{
margin: 3rem 0px auto 0px;
}


.btn-b2b-register{
padding: 12px 10px;
text-align: center;
margin: 50px auto 0px auto;
min-width: 80%;
display: flex;
font-weight: 600;
font-size: 1.2rem;
flex-direction: row;
width: fit-content;
justify-content: center;
align-content: center;
align-items: center;
border-radius: 12px;
}

@media (max-width: 600px) {
.vcenter {
margin: 0rem 0px auto 0px;
}

.bubble-text-long {
height: 550px;
padding: 45px 0px 10px 50px!important;
}

.pageNav .nav-group-back{
order: 3;	
padding-bottom: 18px;
}

.pageNav .nav-pages {
  flex-flow: wrap;
  place-content: center;
  align-items: center;
}

.pageNav .nav-pages a, .pageNav .nav-pages strong{
	margin-bottom: 10px;
}

.pageNav .nav-group-next{
	order: 5;
	padding-top: 8px;
}

}

.mm-wrapper--opened, .mm-wrapper--opened body{
width: 100%;
}