:root {
  --color: #111; /* highlight color */
  --background1: #35312e; /* header */
  --background2: #202258; /* content und navbar */
  --background3: #35312e; /* footer */
  --colorBackground: #cc99ff; /* gleiche wie highlight color nur background für Buttons etc */
}

html body {background-color: var(--background2);font-family: 'Inter', sans-serif;font-size: 17px;position: relative;color: #fff;}
.h1, h1 {color: var(--color);font-family: 'El Messiri', sans-serif;}
html body .cs-mobileCategorys ul li .cs-menuItem svg path {fill: #111;}
.cs-mobileCategorys b, .cs-mobileCategorys strong {font-weight: 400;display: inline;}
.cs-mobileCategorys > ul > li > .cs-menuItem > a  >span > svg {transform: rotate(270deg);}
.cs-shortnav a {color: #111;}


/* checkout */
html body.cs-checkout {color: #111111;}
html body.cs-checkout form#checkoutform {background: #fff;padding: 0 1em;}
html body.cs-checkout .cs-footer,
html body.cs-checkout .cs-footer a {color: #111;}
html body.cs-checkout .logo {
    max-width: 100%;
    margin-top: 0;
}
html body.cs-checkout .cs-statusbar li.cs-basketSteps a, html body.cs-checkout .cs-statusbar li.cs-basketSteps span {color: #111;}

/* livesearch */
html body #liveSearchResult {background-color: #282f4f;border-color: #282f4f;}
html body .cs-topsearch #liveSearchResult ul.cs-livesearch li {background: #0b0e1e;border-bottom: 0 solid #fff;padding: 3px 10px;border-radius: 13px;margin-bottom: 4px;}

/* overlay
html body .cs-mobileCategorys > ul.cs-categories1 > li > ul.cs-categories2 {right: -440px;}*/
html body .cs-mobileCategorys .cs-actCategory {color: #343434;}
html body .cs-mobileCategorys ul li.cs-backMenu span {color: #343434;}
html body.cs-body .cs-mobileCategorys .cs-backMenu svg path {fill: #343434;}

/* startsite */
.cs-startTextBox {background: var(--background1);border: 1px solid #3f3f3f;border-width: 1px 0 1px 0;color: #fff;padding-bottom: 2em;}
.cs-startTextBox h1 {padding: 0;background-color: transparent;font-family: 'El Messiri', sans-serif;color: #cc99ff;}

/* detail */
.cs-articleDetail .cs-imageBox {background: #fcf6e8;display: flex;align-items: center;justify-content: center;padding: 2em 0;}
.cs-articleDetail .cs-articleDetailMiddleBox .cs-articleRightBox h1 {font-size: 37px;}
.cs-articleDetail a {color: #fff;}

/* footer */
html body footer {color: #fff;}
html body footer .cs-footerLogo {width: 40%;display: flex;align-items: center;}
html body footer .cs-footerLogo img {max-width: 280px;}
html body footer .cs-footerBox.cs-service {width: 40%;}
html body footer .cs-footerBox.cs-kontakt {width: 20%;}
html body footer .cs-footerRow.top {background: #35312e;}
html body footer .cs-footerRow.top a {color: #fff;}
html body footer .cs-footerRow.top a:hover {color: #cc99ff;}
html body footer .cs-footerBox .cs-footerBoxHeader {margin: 10px 0px 20px 0;font-weight: 500;font-size: 28px;font-family: 'El Messiri', sans-serif;color: #cc99ff;}
html body footer .cs-footerRow.copyright,
html body footer .cs-footerRow.copyright a {color: #fff;}

/* unterrubriken */
.cs-categoryPreview .cs-categoryPicture > a {display: none;}
.cs-categoryPreview .categoryCount {display: none;}
.cs-categoryView .categoryHeader font {color: #cc99ff;}
.cs-categoryView .categoryHeader b {font-weight: normal;}
html body .cs-categoryPreview .cs-categoryName {background: #35312e;}
html body .cs-categoryPreview .cs-categoryName a {color: #fff;}

/* badges */
.cs-badgesBox .badgeGreen {background: var(--colorBackground);}

article.cs-articlePreviewSmall .cs-articlePreviewSmallDescriptionBox a {color: #dadadd;}

.cs-prim {background: var(--colorBackground);}
.lne-left {line-height: 0.8;}
.line {display: inline-block;background-color: #000;width: 270px;height: 1px;position: relative;line-height: 0.8;position: relative;}
.line-left::before {
    content: '';
    display: inline-block;
    width: 40px;
    height: 1px;
    background-color: #0c1023;
    transform: translateY(-0.3em);
    margin-right: 20px;
}
.line::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 9px;
    transform: translate(-50%, -50%);
    display: inline-block;
    width: 20px;
    height: 5px;
    background-color: #000;
    border-radius: 2px;
}

html body article.cs-articlePreview {border: 1px solid #252839;padding: 0;background: #35312e;margin-bottom: 3em;padding-bottom: 2em;}
html body article.cs-articlePreview .cs-hoverlay {display: none !important;}
html body article.cs-articlePreview .cs-artPreviewName {font-size: 1rem;font-weight: 500;color: #cc99ff;}
html body article.cs-articlePreview .priceBox .priceRow .price span {font-size: 21px;font-weight: 600;color: #e4e4e4;}
html body article.cs-articlePreview .cs-buyButton {position: absolute;bottom: -29px;color: #fff;border-radius: 100px;padding: 1em 4em 1em 2em;cursor: pointer;}
html body article.cs-articlePreview .cs-buyButton:hover:before {right: 2px;}
html body article.cs-articlePreview .cs-buyButton:hover:after {opacity: 0;}
html body article.cs-articlePreview .cs-buyButton a {color: #fff;}

html body article.cs-articlePreview .cs-buyButtonBox {display: flex;justify-content: center;}
html body article.cs-articlePreview .cs-buyButton:before {    
  content: '\f067';
  font-family: "FontAwesome", sans-serif;
  font-size: 12px;
  color: #fff;
  position: absolute;
  top: 52%;
  right: 4px;
  transform: translateY(-50%);
  height: 40px;
  width: 40px;
  padding-right: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 2;
  transition: all 0.3s ease-in-out;
}
html body article.cs-articlePreview .cs-buyButton:after {    
  content: '';
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  height: 40px;
  width: 40px;
  padding-right: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #12172d;
  z-index: 1;
  transition: all 0.4s ease-in-out;
}

/* preview edges */
html body article.cs-articlePreview:before,
html body article.cs-articlePreview:after,
html body article.cs-articlePreview .cs-innerPreview:before,
html body article.cs-articlePreview .cs-innerPreview:after {position: absolute;width: 10px;height: 10px;content: '';border-color: #0c1023;border-style: solid;transition: all 0.4s ease-in-out;}

html body article.cs-articlePreview:before {left: 0;top: 0;border-width: 1px 0 0 1px;border-color: #fff;}
html body article.cs-articlePreview:after {right: 0;top: 0;border-width: 1px 1px 0 0;border-color: #fff;}

html body article.cs-articlePreview .cs-innerPreview:before {right: 0;bottom: 0;border-width: 0 1px 1px 0;border-color: #fff;}
html body article.cs-articlePreview .cs-innerPreview:after {left: 0;bottom: 0;border-width: 0 0 1px 1px;border-color: #fff;}

html body article.cs-articlePreview:hover:before,
html body article.cs-articlePreview:hover:after,
html body article.cs-articlePreview:hover .cs-innerPreview:before,
html body article.cs-articlePreview:hover .cs-innerPreview:after {width: 20px;height: 20px;}
/* preview edges */

html body article.cs-articlePreview .cs-innerPreview {padding: 2px;}
html body article.cs-articlePreview .pictureContainer {align-items: center;justify-content: center;background: #fdf5e6;padding: 10px;}
html body article.cs-articlePreview .pictureContainer img {max-height: 200px;width: auto;}
html body article.cs-articlePreview .pictureContainer a {display: inline-block;width: auto;}

html body article.cs-articlePreviewSmall .cs-articlePreviewSmallPicturebox {align-items: center;justify-content: center;background: #fdf5e6;padding: 10px;}
html body article.cs-articlePreviewSmall .cs-articlePreviewSmallPicturebox img {max-height: 200px;width: auto;}
html body article.cs-articlePreviewSmall .cs-articlePreviewSmallPicturebox a {display: inline-block;width: auto;}

html body .cs-additionalArticle .cs-additionalArticleBox .cs-additionalArticleImage {align-items: center;justify-content: center;background: #fdf5e6;padding: 10px;}
html body .cs-additionalArticle .cs-additionalArticleBox .cs-additionalArticleImage img {max-height: 200px;width: auto;}
html body .cs-additionalArticle .cs-additionalPrice .price {color: var(--color);}

/* breadcrumb */
.cs-breadCrumb a,
.cs-breadCrumb .slash {color: #fff;}
.cs-breadCrumb ul li a b {font-weight: normal;}
.cs-breadCrumb ul li a font {color: #fff;}

/* header */
html body .cs-logo {max-width: 100%;}
html body.cs-body header {background: #0c1023;}
html body.cs-body header .cs-categoriesBox {background: #0b0e1e;margin-bottom: 0;padding: 1em 0;border-top: 1px solid #191f3c;}
html body.cs-body header .cs-svgIcon path {fill: #ffffff;}
html body.cs-body .cs-categoriesBox > .cs-container {display: flex;flex-wrap: wrap;gap: 1em;position: relative;}
html body.cs-body .cs-categoriesBox > .cs-container .cs-catitem a {color: #fff;padding: 0 1em;}
html body.cs-body .cs-categoriesBox > .cs-container .cs-catitem {display: flex;align-items: center;}
.cs-miniButtons .cs-searchBar {display: none;}
.cs-topsearch {position: relative;}
.cs-topsearch input {border: 0;max-width: 100%;border-radius: 36px;padding-left: 19px;width: 500px;border: 1px solid #dadadd ;}
.cs-topsearch #liveSearchResult {position: absolute !important;z-index: 999;width: 100%;padding: 16px;border-radius: 22px;}
.cs-topsearch #liveSearchResult ul.cs-livesearch li {background: #000;border-bottom: 0.1em solid #fff;padding: 3px 10px;border-radius: 13px;}
.cs-topsearch input {background: #35312e;border-color: #35312e;color: #fff;}
header .cs-headerContent {margin-top: 10px;}
.cs-overlayButton.cs-overlayMenuButton {background: #0b0e1e;}
.cs-miniwk span {color: #fff;}
.cs-hotline {position: absolute;right: 0;color: #fff;font-family: 'El Messiri', sans-serif;color: #cc99ff;padding: 6px;font-size: 21px;}
.cs-hotline a {color: #cc99ff;}
.cs-hotline a:hover {color: #fff;}
.cs-hotline span {color: #fff;}
header .cs-miniButtons > ul > li.cs-merkzettel {margin-right: 16px;}

/* krish */
.cs-krish {margin: 8em 0;}
.cs-krish .cs-krishInner {display: flex;flex-wrap: wrap;max-width: 82em;margin: 0 auto;color: #dadada;justify-content: space-between;}
.cs-krish .cs-krishInner .cs-krishImage {width: 37%;display: flex;align-items: center;}
.cs-krish .cs-krishInner .cs-krishImage img {border-radius: 100%;}
.cs-krish .cs-krishInner .cs-krishText {width: 57%;}
.cs-krish .cs-krishInner .cs-krishHeader {color: #cc99ff;font-family: 'El Messiri', sans-serif;font-size: 53px;}
.cs-krish .cs-krishInner .cs-krishText3 {font-family: 'Zeyada', cursive;color: #cc99ff;font-size: 50px;margin-top: 1em;}

/* slider */
.theme-default .nivo-controlNav a.active {background: #DB011C !important;}
.theme-default .nivo-controlNav a {background: #000000 !important;}
html body .theme-default .nivo-caption .cs-captionWrapper {display: flex;height: auto;color: #fff;padding: 2em 0;max-width: 50%;flex-direction: column;justify-content: center;background: rgba(0, 0, 0, 0);top: 20%;position: relative;}
html body .theme-default .nivo-caption {opacity: 1;}
.theme-default .nivo-caption {opacity: 1;}
.theme-default .nivo-caption .cs-captionWrapper {display: flex;max-width: 100%;flex-direction: column;justify-content: flex-end;height: 100%;}
.theme-default .nivo-caption .cs-captionWrapper .heroSlide1 {color: #111;}
.theme-default .nivo-caption .cs-captionWrapper .heroSlide2 {color: #fff;}
.theme-default .nivo-caption .cs-captionWrapper > div {text-align: right;}
.theme-default .nivo-caption .cs-captionWrapper .hero-slide__title {
    font-size: 94px;
    font-weight: 700;
    text-align: left;
    line-height: 79px;font-family: 'El Messiri', sans-serif;
}
.theme-default .nivo-caption .cs-captionWrapper .hero-slide__subtitle {
    font-size: 48px;
    margin-bottom: 0;
    text-align: left;
    padding-left: 8px;
    color: #cc99ff;
    margin-bottom: 1em;
}
.theme-default .nivo-caption .cs-captionWrapper img {display: block;position: relative;}
.theme-default .nivo-caption .cs-captionWrapper .line {margin-bottom: 3em;margin-left: 7px;}

/* generell */
h2.cs-betHeading,
h3.cs-siteHeading {text-align: left;font-size: 34px;text-transform: none;color: #004E9E;letter-spacing: 0;}
h2.cs-betHeading span,
h3.cs-siteHeading span {padding: 0;background-color: transparent;font-family: 'El Messiri', sans-serif;color: #cc99ff;}
h2.cs-betHeading:before,
h3.cs-siteHeading:before {height: 0;}
.cs-subtitle {display: none;}
.cs-badgesBox .singleBadge {border-radius: 9%;}
.cs-breadCrumb {margin: 2em -7px 2em -7px;}
.cs-form .cs-formRow span.label {margin: 0;display: block;position: absolute;top: -10px;left: 0px;background: #fff;padding: 0 6px;border-radius: 0.3em;z-index: 1;color: #111;}
.cs-categoryPreview .cs-categoryName {position: relative;bottom: auto;left: auto;font-size: 0.9rem;font-weight: 600;background: #fff;min-width: 100%;text-align: center;-webkit-transform: unset;transform: unset;}
#categoriesLeft a {background: #35312e;color: #fff;}
#categoriesLeft b {font-weight: normal;}
#categoriesLeft font {color: #fff;}
.leftNavigationBox h4 {color: var(--color);font-weight: 600;font-family: 'El Messiri', sans-serif;font-size: 35px;}
.categoryHeader {color: #cc99ff;font-weight: 600;font-family: 'El Messiri', sans-serif;}
.categoryPicture {display: none;}
#categoriesLeft a:hover {background: transparent;color: var(--color);}

#categoriesLeft .active > a, #categoriesLeft .active1 > a, #categoriesLeft .active2 > a,
#categoriesLeft .active > a font, #categoriesLeft .active1 > a font, #categoriesLeft .active2 > a font {color: #cc99ff;background: #cec9c9;font-weight: 600;}

html body.cs-body .cs-overlayButton.cs-overlayMenuButton,
html body.cs-body .cs-topPages .cs-informationsHeader, 
html body.cs-body .cs-mobileCategorys .cs-mobileCategorysHeader, 
html body.cs-body .cs-compareHeader,
html body.cs-body #bestandsbenachrichtigung .requestBtn,
html body.cs-body .cs-button1,
html body.cs-body .cs-button1:hover,
html body.cs-body footer .cs-footerNewsletterBox.input .cs-newsletterSubmit,
html body.cs-body .wkAddLayer .cs-checkoutBtn,
html body.cs-body .cs-filterButton {background: var(--colorBackground);}
.cs-articleDetail .cs-articlePriceInfo {font-size: 0.7rem;text-decoration: none;}
#tabs .tabs.activeTab span {border-bottom: 1px solid #666;}

.cs-articlecount .cs-heading {margin-right: 5px;}
.cs-listPager .cs-articlecount {border-bottom: 0px solid #393939;}
.cs-articlePager a {color: #fff;}
.cs-articlePager svg path {fill: #fff;}


/* -- */
html body.cs-body header .cs-categoriesBox {
    background: #35312e;
    margin-bottom: 0;
    padding: 1em 0;
    border-top: 1px solid #191f3c;
}
html body.cs-body header {
    background: var(--background1);
}
html body {
    background-color: var(--background2);
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    position: relative;
    color: #fff;
}
.cs-scrollup .cs-svgIcon path {fill: #fff;}

/* 20.11.2023 - Kundenwünsche */
html body,
html body.cs-body header {background-color: #fdf5e6;color: #000;}
html body.cs-body header .cs-svgIcon path,
html body.cs-body .cs-articlePager svg path {fill: #111;}
html body.cs-body .cs-miniwk span,
html body.cs-body .cs-articleDetail a,
html body footer .cs-footerRow.copyright, html body footer .cs-footerRow.copyright a,
article.cs-articlePreviewSmall .cs-articlePreviewSmallDescriptionBox a {color: #000;}
html body.cs-body .cs-krish .cs-krishInner .cs-krishText {color: #000;}
html body.cs-body .cs-articleDetail .cs-detailArtnum,
html body.cs-body .cs-articlePager a {color: #000;}
html body.cs-body .cs-overlayButton.cs-overlayMenuButton svg path {fill: #fff;}
html body.cs-body .cs-galleryContainer .cs-gallerySidebar .cs-galleryNavi {left: -49px;z-index: -1;}
html body article.cs-articlePreview .artnamBox,
html body article.cs-articlePreview .priceBox {padding-left: 1em;}
html body .cs-overlay {background: #35312e;}
html body .cs-mobileCategorys > ul li a {color: #fff;}
html body .cs-mobileCategorys > ul li:hover a {color: #111;}
html body .cs-mobileCategorys ul li .cs-menuItem svg path {fill: #fff;}
html body .cs-mobileCategorys ul li:hover .cs-menuItem svg path {fill: #111;}
.cs-mobileCategorys > ul.cs-categories1 > li > ul.cs-categories2 {background: #35312e;}
.cs-mobileCategorys > ul.cs-categories1 > li > ul.cs-categories2 a {color: #fff;}
.cs-mobileCategorys > ul.cs-categories1 > li > ul.cs-categories2 li:hover a {color: #111;}
html body.cs-body .cs-articlePager svg path {fill: #fff;}
html body .cs-mobileCategorys .cs-actCategory {color: #fff;}
html body.cs-body header .cs-closeOverlay .cs-svgIcon path {fill: #fff !Important;}



html body .cs-bannerRow.cs-bannerLayout1 {display: grid;grid-template-columns: repeat(6, 1fr);grid-gap: 1.5em;margin-top: 2em;}
html body .cs-prim {background: #ccc;}
html body .cs-prim a {color: #000 !important;}
html body article.cs-articlePreview .cs-buyButton:hover:before {right: 2px;background: #000;}
html body article.cs-articlePreview {background: #ffffff;}
html body article.cs-articlePreview .priceBox .priceRow .price span {color: #000;}
html body article.cs-articlePreview .priceBox .priceRow .price span {color: #000;}
html body article.cs-articlePreview .cs-artPreviewName {color: #000;}

html body.cs-body header .cs-categoriesBox {background: #e1d1b4;margin-bottom: 0;padding: 1em 0;border-top: 1px solid #bebebe;color: #000 !important;}
html body.cs-body header .cs-categoriesBox a {color: #000 !important;}
html body.cs-body .cs-hotline span {color: #111 !important;}
html body.cs-body #categoriesLeft a {background: #e1d1b4;color: #111;}
html body footer .cs-footerRow.top {background: #e1d1b4;color: #111;}
html body footer .cs-footerRow.top a {color: #111;}
html body .cs-breadCrumb a, html body .cs-breadCrumb .slash {color: #111;}
html body .cs-topsearch input {background: #e1d1b4;border-color: #e1d1b4;color: #111;}
html body .cs-categoryPreview .cs-categoryName {background: #e1d1b4;}
html body .cs-categoryPreview .cs-categoryName a {color: #111;}
html body footer .cs-footerBox .cs-footerBoxHeader {font-family: 'El Messiri', sans-serif;color: #111;}
html body .categoryHeader {color: #111;}
html body.cs-body .cs-overlayButton.cs-overlayMenuButton, html body.cs-body .cs-topPages .cs-informationsHeader, html body.cs-body .cs-mobileCategorys .cs-mobileCategorysHeader, html body.cs-body .cs-compareHeader, html body.cs-body #bestandsbenachrichtigung .requestBtn, html body.cs-body .cs-button1, html body.cs-body .cs-button1:hover, html body.cs-body footer .cs-footerNewsletterBox.input .cs-newsletterSubmit, html body.cs-body .wkAddLayer .cs-checkoutBtn, html body.cs-body .cs-filterButton {
    background: #111;
}
h2.cs-betHeading, h3.cs-siteHeading {color: #111 !important;}
h2.cs-betHeading span, h3.cs-siteHeading span {color: #111;}
.leftNavigationBox h4 {margin-bottom: 6px;}
#categoriesLeft font {color: #000;font-weight: bold;text-decoration: underline;}
html body .cs-overlay {background: #fff;}
.cs-logo {display: none;}
html body .cs-shortnav {display: block !important;margin-bottom: 1em;}