:root {
  --primary: #44a12b;
  --secondary: #ffcc00;
  --tertiary: #235B43;
  --four:#A22237;
  --five:#DF4417;
  --grey: #818a89;
  --darkgrey: #414345;
  --black: #414345;
  --white: #fff;
  --white95: rgb(255 255 255/95%);
  --fontfam: 'Clan';
  --lightgreen: #f0f0ed;
}

span.label {
    background: var(--primary) !important;
    color: var(--white);
}
.cs-body .slider-wrapper .cs-captionWrapper a{
 border-bottom: unset !important; 
}

.cs-galleryContainer{
  background: rgb(255 255 255 / 80%) !important;
}
.cs-galleryContainer .cs-gallerySidebar .cs-galleryPics .cs-galleryImageBox:hover, .cs-galleryContainer .cs-gallerySidebar .cs-galleryPics .cs-galleryImageBox.cs-activePicture{
  outline: 3px solid var(--primary) !important;
}
/*---------------------------SLIDER--------------------------*/

.theme-default .nivo-controlNav a.active{
 background: var(--primary) !important; 
}
.theme-default .nivo-controlNav a{
 background: var(--secondary) !important; 
}
div#startseite_de > img,
.nivoSlider > img,
.nivo-slice > img{
    max-height: 60vh !important;
    height: 60vh !important;
    object-fit: cover;
}
body .cs-startSlider {
    max-width: 100% !important;
    width: 100%;
}
.nivo-caption{
    opacity: 1 !important;   
}
.theme-default .nivo-directionNav a:hover{
 background: url(/user_html/1692613471/pix/user_img/Bilder/arrows-solid.png) no-repeat!important; 
}
.theme-default .nivo-directionNav a{
 background: url(/user_html/1692613471/pix/user_img/Bilder/arrows-transparent.png) no-repeat!important; 
}
.theme-default a.nivo-nextNav {
    background-position: -30px 0 !important;
}
.theme-default a.nivo-nextNav:hover {
    background-position: -30px 0 !important;
}

.nivo-controlNav {
    padding: 0 !important;
    margin-top: -21px;
    z-index: 999999 !important;
    position: absolute;
    background: transparent !important;
    left: 48%;
}
.moko-slider-box {
    border-radius: 3px;
    background: var(--white95);
    padding: 25px;
  margin-top: 25px; 
  margin-bottom: 25px;
  font-family: var(--fontfam) !important;
}


.kd-slider-box{
 font-family: var(--fontfamily); 
  padding: 3em 0;
}
.moko-slider-caption, 
.moko-slider-text{
 color: var(--darkgrey); 
}

.moko-slider-title{
 font-size: 3.5em; 
  font-weight: bold;
 color: var(--primary); 
}
.moko-slider-text{
 font-size: 1em; 
  font-weight: regular;
  margin-bottom: 1em;
}
.moko-slider-caption{
 font-size: 1.5em; 
  font-weight: light;
}
.moko-slider-button {
  background: var(--tertiary);
  padding: 10px 20px;
  min-width: 150px;
  text-align: center;
  color: var(--white) !important;
  margin-left: 8px;
  color: var(---white);
  transition: 0.3s;
}
.moko-slider-button:hover {
background: var(--secondary);
  transition: 0.3s;
}
.moko-slider-button a {
  color: var(---white);
}

div#moko-cta-box {
    display: inline-flex;
}

/*---------------------------LOGIN PAGE--------------------------*/
.cs-loginpagebody >div > div > a > img {
    max-width: 343px !important;
    margin-bottom: 0px;
}
body.cs-body.cs-loginpagebody .cs-wrapper .cs-lang {
    top: 1em;
    position: relative;
    float: right;
}
body.cs-loginpagebody {
    background-image: url(/user_html/1712240289/pix/user_img/Assets/KlasmannDeilmann-neuesStartbild-Onlineshop2.jpg);
    min-height: 100vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
body.cs-body.cs-loginpagebody>div {
    background: var(--white95);
}
body.cs-body.cs-loginpagebody>div*{
    color: var(--black); 
}

body.cs-body.cs-loginpagebody>div>div>a {
    color: var(--white) !important;
}
.cs-forgotPassBox, .cs-forgotPassBox>h1 {
    color: var(--white) !important;
}







/*---------------------------HEADER--------------------------*/
header .cs-topBar {
    background: var(--white) !important;
}
.cs-logo {
    max-width: 180px;
}
.cs-topPages * {
    color: var(--darkgrey) !important;
}
.cs-informationsHeader {
    background: var(--primary) !important;
    color: var(--white) !important;
}

.cs-miniButtons ul li div svg path, 
.cs-miniButtons ul li a svg path{
    fill: var(--primary) !important;
  transition: 0.3s;
}
.cs-miniButtons ul li div:hover svg path, 
.cs-miniButtons ul li a:hover svg path{
    fill: var(--secondary) !important;
}



/*-------------KATEGORIELEISTE-------------*/
ul.cs-categories1 li div a {
    padding: 1em !important;    
  font-size: 1.2em;
    font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
}
ul.cs-categories2 li div a {
    padding: 1em !important;    
  font-size: 1.2em;
    font-weight: 600;
  text-transform: none; 
  letter-spacing: unset;
}

ul.cs-categories1 li div a span.cs-categorieName, 
ul.cs-categories1 li div a span svg path{
    color: var(--white);
    transition: 0.3s;
  fill: var(--white);

}
ul.cs-categories1 li:hover div a span.cs-categorieName, 
ul.cs-categories1 li:hover div a span svg path{
    color: var(--secondary);
    fill: var(--secondary);

}

ul.cs-categories2 li div a span.cs-categorieName {
    color: var(--black) !important;
    transition: 0.3s;

}
ul.cs-categories2 li:hover div a span.cs-categorieName {
    color: var(--primary) !important;
}
ul.cs-categories2 {
    box-shadow: 0px 6px 10px var(--lightgreen);
}




.categoryPicture {
    display: none;
}
article.cs-categoryPreview div h2 a {
    font-weight: bold !important;
}
.cs-start .cs-categoriesBox{
    margin-bottom: 0px !important;  
}

.cs-categoriesBox{
    background: var(--darkgrey) !important; 
}

/*-------------MEGA MENÜ-------------
.cs-categoriesMegaMenu .cs-megamenu div ul li a span{
  color: var(--white);
    transition: 0.2s;

}
.cs-categoriesMegaMenu .cs-megamenu div ul li a:hover span{
  color: var(--secondary);
    transition: 0.2s;
}
.cs-megaMenu ul li a svg path{
    fill: var(--white); 
    transition: 0.2s;
}
.cs-megaMenu ul li a svg path:hover{
    fill: var(--secondary); 
    transition: 0.2s;
}
.cs-megaMenuContainer a:hover{
 text-decoration: none !important; 
}*/




/*
.cs-categoriesBox div div ul li a span.categorieName{
    color: var(--white); 
    transition: 0.2s;

}
.cs-categoriesBox div div ul li a:hover span.categorieName {
    color: var(--secondary);
    transition: 0.2s;

}
.cs-categoriesBox div div ul li:nth-child(4) a:hover span.categorieName {
    color: red !important;
    transition: 0.2s;

}

li.categoriesLevel2 a span{
    color: var(--darkgrey) !important;
    transition: 0.2s;

}
li.categoriesLevel2 a span:hover{
    transition: 0.2s;
    color: var(--primary) !important;
}*/








/*---------------------------ARTIKELLISTING--------------------------*/
.cs-priceFormat {
    display: flex !important;
    flex-direction: column;
    align-content: flex-start;
    justify-content: center;
    align-items: flex-start;
}
section.cs-mainContent {
    width: 100% !important;
}
@media only screen and (min-width: 900px){
  .cs-category article.cs-articlePreview{
    width: calc(100% /4 - 2em) !important;
}
section.cs-mainContent {
    width: 100%;
}
}
.artnamBox>h3>a {
    font-size: 16px;
    font-weight: 600;
}
.artnamBox h3 a span {
    color: var(--primary);
}
.cs-articlePreviewSmallDescriptionBox>h3>a {
    font-weight: 600 !important;
}
.cs-searchResults .cs-articlePreview {
    width: calc(100%/4 - 2em) !important;
}
article.cs-articlePreviewSmall .cs-articlePreviewSmallDescriptionBox a {
    hyphens: auto !important; 
}
.cs-categoryPicture>a>img {
    max-height: 200px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 200px;
    /*width: 370px;*/
}
.cs-articleDetail .cs-articlePriceInfo{
text-decoration: none !important; 
}
h1.categoryHeader {
    font-weight: 600;
}
h1.cs-articleName {
    font-weight: 600 !important;
}
.artnamBox * {
    font-weight: 600;
}
.cs-articlePreviewSmallPriceBox>div>div>div>span, 
article.cs-articlePreview .priceBox .priceRow .price span{
    color: var(--grey);
}

.cs-categoryPicture>a>img {
    object-fit: contain;
}
span.eigenschaft-name, 
.cs-detailArtnum.cs-detailItems>span{
    font-weight: 600;
}

span.listpagerButtonActive {
    color: var(--primary);
}
article.cs-articlePreview, 
article.cs-articlePreviewSmall{
    padding: 0.5em 1em;
      transition: 0.2s;
  border: 1px solid var(--lightgreen);
  border-radius: 4px;

}
article.cs-articlePreview:hover, 
article.cs-articlePreviewSmall:hover{
    background: var(--lightgreen);
      transition: 0.2s;
    border: 1px solid var(--lightgreen);

}
.cs-category article.cs-articlePreview, .cs-searchResults .cs-articlePreview{
 box-shadow: unset !important; 
}








/*-------------BADGE-------------*/


.cs-badgesBox .badgeYellow{
    background: var(--secondary) !important;  
}
article.cs-articlePreview .cs-auszeichnungenItem, 
.cs-articleDetail .cs-auszeichnungenItem{
    width: auto;
}
.cs-badgesBox.cs-right{
    right: 0%;  
}
.cs-badgesBox .singleBadge {
    position: relative;
    padding: 0.5em 0.5em !important;
    font-size: 0.8rem;
    margin-bottom: 0.1em;
    border-radius: 3px;
    height: auto !important; 
    width: auto !important;
    align-items: center;
    justify-content: center;
    display: flex;
}
.cs-badgesBox {
    min-height: auto !important;
}
.cs-badgesBox .badgeGreen {
    background: #b6c932 !important;
}

/*---------------------------PDF BUTTON--------------------------*/

.tabcontent.tab1>li {
    cursor: pointer;
    width: fit-content;
}
a.moko-pdf{
  margin-top:20px;
background: var(--secondary);
    color: var(--white);
    padding: 1em;
    text-decoration: none !important;
  border: 2px solid var(--secondary);
  transition: 0.2s;
      font-weight: bold;

}

a.moko-pdf:hover{
background: var(--white);
    color: var(--tertiary);
    padding: 1em;
    text-decoration: none !important;
    border: 2px solid var(--tertiary);
    transition: 0.2s;
  cursor:  pointer;


}





/*---------------------------AUSBLENDEN--------------------------*/
body.cs-body.cs-loginpagebody>div>div>h1, 
 
a.shippingCostPopup, 
div#lieferzeitStr{
    display: none !important;
}

/*Bestellvorgang ausblenden*/
.moll-versandkosten, 
.moll-versandkosten-betrag, 
.cs-footer .cs-payments, 
body.cs-body.cs-checkout .cs-container>div.cs-infoBox, 
.cs-mwst, 
.cs-mwstBox, 
.cs-prices:nth-child(3{
    display: none !important;
}

/*Produktdetailseite*/
.cs-inStock, 
span.priceStars{
    display: none !important;  
}





















/*---------------------------BESTELLVORGANG--------------------------*/
/*Bestellvorgang: Kästen Steps oben umfärben*/

.cs-statusbar li.cs-basketSteps.active {
    background: var(--primary) !important;
}
.cs-statusbar li.cs-basketSteps.active>span, .cs-statusbar li.cs-basketSteps.active>a {
    color: #fff !important;
}
li.cs-basketSteps {
    background: #fff !important;
    border: 2px solid var(--primary);
}





















/*---------------------------ARTIKELDETAILSEITE--------------------------*/

.cs-inStock, .cs-middleStock {
    font-size: 17px;
}
.cs-articleDetail .cs-articleName {
    font-size: 2.3rem !important;
    color: var(--primary)  !important;
}
.cs-articleRightBox .price {
    color: var(--primary) !important;
    font-weight: 600;
}
/*Ampelsystem Bestand*/
.cs-outOfStock{
    color: rgb(245 65 0) !important;  
}

.pagiIcons a:hover svg path {
    fill: var(--primary) !Important;
  transition: 0.2s;
}


form div .cs-inStock {
    display: none !important;
}
/* zzgl. MwSt. zzgl. Versandkosten unter Preis auf Detailseite ausblenden*/
.cs-articlePriceInfo{
    display:none; 
}

/*-------------TABS-------------*/
.tabs.activeTab>span {
    color: var(--primary);
}

/*-------------FRAGE PRODUKT-------------*/
.frageprodukt {
    display: none !important;
}
.cs-articleQuestion>.cs-infoBox {
    background: white !important;
    color: var(--black);
}










/*-------------BUNDLE-------------*/
.box-1 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;;
    align-items: flex-start;
}
.box-1 > .additionalArticleBox {
    margin-bottom: 3.3em;
}

@media only screen and (max-width: 780px){
    .box-1 > .additionalArticleBox {
        max-width: 50%;
        width: 50%;
    }
}
@media only screen and (min-width: 780px){
    .box-1 > .additionalArticleBox {
        max-width: 33.33%;
        width: 33.33%;
    }
}
@media only screen and (min-width: 1100px){
    .box-1 > .additionalArticleBox {
        max-width: 25% !important;
        width: 25% !important;
    }
}
@media only screen and (min-width: 1600px){
    .box-1 > .additionalArticleBox {
        max-width: 15% !important;
        width: 15% !important;
    }
}









/*-------------BUNDLE BILDER-------------*/
#bundleComponents .additionalArticleImage img {
    height: 113px !important;
}


aside.cs-aside {
    display: none !important;
}




















/*---------------------------MOBILE MENU--------------------------*/
.cs-overlayButton.cs-overlayMenuButton, 
.cs-mobileInfosites.cs-hidden.cs-overlay>div{
    background: var(--primary) !important;
}

.cs-mobileCategorysHeader.noselect {
    background: var(--secondary) !Important;
}
.cs-overlayButton.cs-overlayMenuButton{
 background: unset !Important; 
}








/*---------------------------MASSTABELLE--------------------------*/
table.blueTable {
  border: 1px solid var(--primary);
  background-color: var(--white);
  width: 100%;
  max-width: 800px;
  text-align: left;
  border-collapse: collapse;
}
table.blueTable td, table.blueTable th {
  border: 1px solid var(--black);
  padding: 6px 6px;
}
table.blueTable tbody td {
  font-size: 13px;
}
table.blueTable tr:nth-child(even) {
  background: var(--white);
}
table.blueTable thead {
  background: var(--primary);
}
table.blueTable thead th {
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
  text-align: left;
}
table.blueTable tfoot td {
  font-size: 14px;
}
table.blueTable tfoot .links {
  text-align: right;
}
table.blueTable tfoot .links a{
  display: inline-block;
  background: var(--primary);
  color: var(--white);
  padding: 2px 8px;
  border-radius: 5px;
}
















/*---------------------------SORTIEREN--------------------------*/

.cs-filterButton.cs-overlayButton.cs-standardButton {
    display: none;
}
.cs-galleryImageBox:hover {
    outline-color: var(--secondary) !important;
}
.cs-galleryImageBox.cs-activePicture {
    outline-color: var(--primary) !important;
}
#liveSearchResult ul.cs-livesearch li a{
    color: var(--black); 
    transition: 0.2s;
}
#liveSearchResult ul.cs-livesearch li a:hover{
    color: var(--primary); 
    transition: 0.2s;
}
#liveSearchResult ul.cs-livesearch li{
    background: white !important;  
}
.cs-contactForm > .cs-infoBox {
    background: white;
    color: var(--black);
}
.cs-contactForm>h1 {
    color: var(--primary);
    font-weight: 600;
}


/* Lieferzeit ausblenden*/