:root {
  --bodyFontSize: 1rem;
  --bodyFontColor: #000;
  --primaryFontColor:  #212529;
  --primaryBackground: #d10019;
  --primarySvgFill:  #d10019;
  --menuBackground: rgba(83, 94, 93, 0.9);
  --primaryFont: 'Helvetica Neue LTW05';
  --secondaryFont: 'Helvetica Neue LTW05';
  --secondaryFont: 'Helvetica Neue LTW05'; /*Exo 2*/
  --logoWidth: 275px;
  --shopWidth: 91em;
  --secondaryFontWeight: 800;
  --secondaryItalic: normal;
  --scrollBackground: #D10019;
  --scrollFill: #ffffff;
  --scrollHoverBackground: #878787;
  --accent: #d10019;
  }

  .cs-warningBox {
  background-color: #d10019;
  color: #000;
  padding: 1em 1.5em;
  margin-top: 2em;
  font-weight: bold;
  border-radius: 6px;
  }

      /* Newsletter ausblenden */
  footer .cs-footerRow.newsletter {
    border-bottom: 1px solid #f2f2f2;
    display: none !important;
  }




  /* Artikeltab farbe*/
  #tabs .tabs.activeTab span {
    font-weight: 400;
    background: var(--primaryBackground);
    color: #fff !important;
  }


  /* Artikelansicht Warenkorbanzeige auf gleiche höhe gesetzt */
  html body #mengenEingabeContainer .cs-articleAmountBox #wkmenge {border-color: var(--primaryFontColor);padding-bottom: 8px;}


  .checkoutStep4 .cs-paymentBox.active:after, 
  .checkoutStep4 .cs-shippingBox.active:after {content: "";display: none; /* Versteckt den Punkt */}
  .checkoutStep4 .cs-paymentBox.active, 
  .checkoutStep4 .cs-shippingBox.active {border: 3px solid var(--primaryBackground) !important; /* Dynamische Umrandungsfarbe */}

  /* wacker scrollup button (ohne Schatten + smooth) */
  .cs-scrollup.cs-wacker{background-color:var(--scrollBackground);transition:opacity .35s ease,transform .35s cubic-bezier(.3,0,.15,1),visibility 0s linear .35s;transform:scale(.9);visibility:hidden;opacity:0;width:43px;height:38px;bottom:5em;right:23px;box-shadow:none !important;}
  .cs-scrollup.cs-wacker.visible{opacity:1;transform:scale(1);visibility:visible;transition:opacity .35s ease,transform .35s cubic-bezier(.3,0,.15,1),visibility 0s;cursor:pointer;}
  .cs-scrollup.cs-wacker:hover{background:var(--scrollHoverBackground);box-shadow:none !important;}
  .cs-scrollup.cs-wacker button{height:100%;display:flex;align-items:center;border:0;background:var(--scrollBackground);padding-left:10px;padding-top:3px;cursor:pointer;box-shadow:none !important;}
  .cs-scrollup.cs-wacker button:hover{background:var(--scrollHoverBackground);box-shadow:none !important;}
  .cs-scrollup.cs-wacker button svg{height:19px;box-shadow:none !important;}
  .cs-scrollup.cs-wacker button svg use{fill:var(--scrollFill);}


  /* header */
  /* Close Button "X" vergrößern --> */ svg.cs-svgIcon.bi.bi-x {width: 1.6em;}


  /* tmp hide*/
  .cs-detailIcons .cs-downloadIcon svg path {fill: var(--primarySvgFill);}


  /* detail */
  #tabs .tabs {padding: 8px 20px;cursor: pointer;}
  #tabs .tabs.activeTab {font-weight: 300;background: var(--primaryBackground);color: #fff;}
  #tabs .tabs.activeTab span {border-bottom: 0 solid #000;color: #ffffff;}
  #tabs .tabs span {font-size: 20px;color: #000;}
  #tabs .tabContainer {border-bottom: 1px solid var(--primaryBackground);}
  #tabs .tabcontent {display: none;padding: 2em 0;} /* Abstand zwischen Beschreibung und Tab vergoessern */


  /* demand articles */
  .cs-demandContainer {background: #d8d8d8;width: 100%;height: 40px;margin-bottom: 5em;position: relative;}
  .cs-demandContainer .cs-demandArrows {display: flex;justify-content: space-around;position: absolute;width: 100%;bottom: -40px;}
  .cs-demandContainer .cs-demandArrows .cs-demandQuantity {position: relative;text-align: right;top: -49px;position: absolute;left: 0;}
  .cs-demandContainer .cs-demandArrows .cs-demandQuantity svg {max-width: 40px;position: relative;right: -18px;top: 5px;}
  .cs-demandContainer .cs-demandArrows .cs-demandQuantity .cs-demandQuantAb {position: relative;top: -13px;}
  .cs-demandContainer .cs-demandArrows .cs-demandQuantity .cs-demandQuantPrice {position: relative;top: -21px;font-weight: 800;font-size: 20px;}
  .cs-demandContainer .cs-extraWidth {min-width: 100px;}
  .cs-demandBox {margin: 3em 0 4em 0;}
  .cs-demandProgress {background: #d10019;position: absolute;top: 0;height: 40px;width: 100px;color: #fff;display: flex;align-items: center;justify-content: right;padding-right: 1em;font-weight: 500;text-transform: none;}
  .cs-demandNextStep {font-size: 19px;font-weight: 600;line-height: 25px;position: relative;top: 13px;}
  .cs-greyHr {width: 100%;background: #d8d8d8;height: 1px;margin: 24px 0;}
  .cs-demandProgressBar {
      background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
      background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
      background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
      -webkit-background-size: 40px 40px;
      background-size: 40px 40px;
        -webkit-animation: cs-progressBar 2s linear infinite;
      -o-animation: cs-progressBar 2s linear infinite;
      animation: cs-progressBar 2s linear infinite;
  }
  @-webkit-keyframes cs-progressBar {
    0% {
      background-position: 0 40px;
    }
    100% {
      background-position: 0 0;
    }
  }

  @-moz-keyframes cs-progressBar {
    0% {
      background-position: 0 40px;
    }
    100% {
      background-position: 0 0;
    }
  }


  .cs-newStaffelBox {margin: 1em 0;}
  .cs-newStaffelBox table {width: 100%;}
  .cs-newStaffelBox table th {background: var(--primaryBackground);color: #000;text-align: center;padding: 7px 0;}
  .cs-newStaffelBox table td {background: #fff;text-align: center;padding: 6px 0;}
  .cs-newStaffelBox .cs-articleBlockPriceBox {display: none;}
  .cs-newStaffelBox .cs-grundPreise {font-size: 11px;}


  /* badges angepasst 7% neigung
  .cs-badgesBox .badgeGreen,
  .cs-badgesBox .badgeYellow{background:#d10019;color:#fff;font-family:var(--secondaryFont);text-transform:none;font-weight:var(--secondaryFontWeight);font-style:var(--secondaryItalic);display:inline-block;transform:rotate(-7deg);transform-origin:center;}
  .cs-badgesBox .singleBadge{position:relative;padding:1em;font-size:0.8rem;margin-bottom:0.1em;border-radius:100%;height:4em;width:4em;display:flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box;}
  .cs-badgesBox .singleBadge span,.cs-badgesBox .singleBadge strong{display:flex;align-items:center;justify-content:center;line-height:1;text-align:center;transform:rotate(-7deg);transform-origin:center;}
  */


  /* Badges als Flag angepasst */
  article.cs-articlePreview{position:relative;}
  .cs-badgesBox{position:absolute;top:37px;right:20px;left:auto;z-index:5;}
  .cs-badgesBox .singleBadge{border-radius:0 !important;width:auto !important;height:auto !important;min-width:52px;min-height:auto !important;padding:11px 13px !important;margin:0 !important;display:flex;align-items:center;justify-content:center;box-sizing:border-box;}
  .cs-badgesBox .badgeGreen /* NEU */ {background:#d10019 ;color:#ffffff;font-family:var(--secondaryFont);text-transform:none;font-weight:700;font-style:normal;border-radius:0 !important;transform:none !important;line-height:1;}
  .cs-badgesBox .badgeYellow /* SPECIAL */ {background:#d10019;color:#ffffff;font-family:var(--secondaryFont);text-transform:none;font-weight:700;font-style:normal;border-radius:0 !important;transform:none !important;line-height:1;}
  @media (max-width:768px){.cs-badgesBox{top:35px;right: 20px; left:auto;}.cs-badgesBox .singleBadge{min-width:46px;padding:9px 11px !important;font-size:0.75rem;}}
  @media (max-width:420px){.cs-badgesBox{top:40px; right: 20px; left:auto;}.cs-badgesBox .singleBadge{min-width:42px;padding:8px 10px !important;font-size:0.7rem;}}
  .cs-articleDetail .cs-badgesBox {left:auto;top: 9%;right: 0px;}


  /* "Das koennte Ihnen auch gefallen" Kacheln badge neu positionieren */
  .slick-slider article.cs-articlePreview {position: relative;}
  .slick-slider article.cs-articlePreview .cs-badgesBox { position: absolute;top: 45px;left: auto; right: 10px; z-index: 5;}
  /* Tablet */
  @media (max-width: 1024px) {.slick-slider article.cs-articlePreview .cs-badgesBox {top: 45px;left: auto; right: 10px;}}
  /* Mobile */
  @media (max-width: 767px) {.slick-slider article.cs-articlePreview .cs-badgesBox {top: 35px;left: auto; right: 10px;}}

  /* "Zuletzt gesehen" Kacheln badge neu positionieren */
  .lastViewVBox article.cs-articlePreview {position: relative;}
  .lastViewVBox article.cs-articlePreview .cs-badgesBox {position: absolute;top: 45px;left: auto; right: 20px;z-index: 5;}
  /* Tablet */
  @media (max-width: 991px) {.lastViewVBox article.cs-articlePreview .cs-badgesBox {top: 60px;left: auto; right: 20px;}}
  /* Mobile */
  @media (max-width: 767px) {.lastViewVBox article.cs-articlePreview .cs-badgesBox {top: 70px;left: auto; right: 20px;}  }


  /*awards*/
  html body.cs-body .ui-dialog {max-height: 100vh;overflow: hidden;font-family: 'Helvetica Neue LTW05' !important;}






  /* menu */
  .cs-categoriesMegaMenu .cs-megaMenu > ul > li .cs-megaMenuContainer {background: var(--menuBackground);border: 0;color: #fff !important;padding: 2em;}
  .cs-categoriesMegaMenu .cs-megaMenu > ul > li .cs-megaMenuContainer a {color: #fff !important;font-size: 1.1rem;}
  .cs-categoriesMegaMenu .cs-megaMenu > ul > li .cs-megaMenuContainer .cs-megamenu {font-size: 1.1rem;}
  .cs-categoriesMegaMenu .cs-megaMenu > ul > li .cs-megaMenuContainer .cs-megamenu > div > ul {display: flex;flex-wrap: wrap;}
  .cs-categoriesMegaMenu .cs-megaMenu > ul > li .cs-megaMenuContainer .cs-megamenu > div > ul > li {width: calc(100%/6);}
  .cs-categoriesMegaMenu .cs-megaMenu > ul > li > a {display: inline-block; position: relative;text-transform: none;padding: 1em 28px 1em 0;font-family: var(--secondaryFont);font-weight: 500;font-style: var(--secondaryItalic);}
  .cs-categoriesMegaMenu .cs-megaMenu > ul > li:hover > a {color: #000;}
  .cs-categoriesMegaMenu .cs-megaMenu > ul > li:hover svg path {fill: var(--primarySvgFill);}
  .cs-categoriesMegaMenu .cs-megaMenu > ul > li .cs-megaMenuContainer ul li ul li a {font-size: 1.1rem;padding-left: 1em;}
  html body .cs-categoriesBox {margin-bottom: 2em !important;}
  .cs-categoriesMegaMenu .cs-megaMenu > ul > li .cs-megaMenuContainer a {padding: 1em 1em;}
  .cs-categoriesBox {background: #ffffff !important;}
  .cs-categoriesMegaMenu .cs-megaMenu > ul > li.activeRub > a > span {color: var(--primaryFontColor);}
  /* Rote Leiste unter den Rubriken auf der Startseite */
  .cs-start .cs-categoriesBox {
    margin-bottom: 0em !important;
    border-bottom: 3px solid #d10019;
  }

  .cs-categoriesMegaMenu .cs-megaMenu > ul > li > a span {
  position: relative;
  display: inline-block;
  }
  /* Roter Balken auf Hover oder aktivem Menüpunkt */
  .cs-categoriesMegaMenu .cs-megaMenu > ul > li > a span::after {
  content: "";
  position: absolute;
  bottom: -10px; /* ⬅️ Hier den Abstand anpassen */
  left: 0;
  width: 100%;
  height: 3.8px;
  background-color: #d10019;
  display: none;
  }
  .cs-categoriesMegaMenu .cs-megaMenu > ul > li:hover > a span::after,
  .cs-categoriesMegaMenu .cs-megaMenu > ul > li.activeRub > a span::after { display: block;  }
  .cs-categoriesMegaMenu .cs-megaMenu > ul {display: flex;justify-content: center;} /* Kategorien zentrieren */


  /* KOMPAKTER HEADER (nach Kundenwunsch)  */
  header .cs-headerContent {margin: 0 auto;padding: 0px 0;margin-bottom: 0px;}

  /* Login Page */
  body.cs-body.cs-loginpagebody .cs-wrapper {
    max-width: 55em;
    width: 55em;
    padding: 2em;
    border: 0 solid #ddd;
    border-radius: 0.1em;
    position: relative;
  }



  /* SLIDER ANFANG */
  /* .theme-default .nivo-controlNav a.active {background: #d10019 !important;} .theme-default .nivo-controlNav a {background: #000000 !important;} */

  /* Sliderpfeile aendern */
  .theme-default .nivo-directionNav a {width: 48px; height: 48px; display: block; background-color: transparent !important; text-indent: -9999px; /* Text verstecken */ overflow: hidden; opacity: 1;  }
  /* Linker Pfeil */
  .theme-default .nivo-prevNav { background: transparent url('/cosmoshop/1764926718/pix/user_img/chevron-left.svg') center center no-repeat !important;background-size: 18px;}
  /* Rechter Pfeil */
  .theme-default .nivo-nextNav { background: transparent url('/cosmoshop/1764926718/pix/user_img/chevron-right.svg') center center no-repeat !important;background-size: 18px;}

  /* Balken statt Punkte unter dem Slider */
  .theme-default .nivo-controlNav a {display: inline-block;width: 40px !important;height: 6px !important;margin: 0 4px !important;background: #E6E6E6 !important;border-radius: 0 !important;position: relative !important;overflow: hidden !important;}
  .theme-default .nivo-controlNav a::after {content: "";position: absolute;top: 0;left: 0;height: 100%;width: 0;background: #DB011C;}  /* innerer Füllbalken */
  .theme-default .nivo-controlNav a.active {background: #E6E6E6 !important;} /* aktiver Balken – behält Hintergrund */
  .theme-default .nivo-controlNav a.active::after {animation: progressFill 5s linear forwards;} /* roter Fortschrittsbalken im aktiven Element */
  @keyframes progressFill {0%   { width: 0; background: #d10019; } 100% { width: 100%; background: #d10019; }} /* Keyframes für "Füllung läuft" Effekt */
  html body .theme-default .nivo-caption .cs-captionWrapper {align-items: flex-start;/* neu – Inhalt linksbündig ausrichten */text-align: left;/* neu – Text links ausrichten */float: right;display: flex;height: auto;color:#000000;padding: 2em;max-width: 33%;flex-direction: column;justify-content: center;background: rgb(255 255 255 / 55%);top: 30%;position: relative; margin-right: auto;}
  html body .theme-default .nivo-caption {opacity: 1;}
  .cs-body .slider-wrapper .nivoSlider .nivo-caption {max-width: var(--shopWidth);left: 0;}
  .theme-default .nivo-caption {font-family: var(--primaryFont), sans-serif !important;}
  .cs-sliderButton { background: transparent;/* durchsichtig */color: #000000;/* schwarze Schrift */display: inline-block;width: 200px;text-align: center;padding: 10px;border: 2px solid #d10019;/* rote Umrandung */ transition: all 0.3s ease; /* sanfter Übergang */ margin: 2em 0 0 0; }
  .cs-sliderButton:hover {border-color: #878787;/* graue Umrandung beim Hover */background: transparent;/* bleibt durchsichtig */ }
  /* Link im Button */
  html body.cs-body .slider-wrapper .nivoSlider .cs-sliderButton a {text-decoration: none !important;color: #000000;/* schwarze Schrift */border: 0;font-weight: 600;display: block; /* klickbare Fläche über gesamten Button */}
  /* Nur Fließtext linksbündig – Button bleibt mittig */
  .nivo-caption p {text-align: left !important;}
  .cs-captionWrapper > div:not(.cs-sliderButton) {text-align: left !important;}
  .cs-sliderButton {text-align: center !important;}
  .cs-sliderHeader {font-family: var(--secondaryFont);font-size: 25px;font-weight: var(--secondaryFontWeight);font-style: var(--secondaryItalic);}
  .cs-sliderContent {max-width: 100%;margin-top: 2em;font-size: 18px;}
  body .cs-startSlider {margin-bottom: 1em;}

   .cs-captionWrapper .cs-sliderButton,.cs-captionWrapper .cs-sliderButton * {text-align: center !important;} /* Code damit der Text im Button zentriert bleibt ! */
  /* SLIDER ENDE */

  
  /* button colors */
  body.cs-body.cs-loginpagebody .cs-wrapper .cs-lang {top: 0;position: relative;float: right;}
  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 footer .cs-footerNewsletterBox.input .cs-newsletterSubmit,
  html body.cs-body .wkAddLayer .cs-checkoutBtn {background: var(--primaryBackground); color: #ffffff; transition: background-color 0.3s ease, color 0.3s ease; font-weight: 500;} 
  html body.cs-body .wkAddLayer .cs-checkoutBtn {background: transparent; color: #000000; display: inline-block;width: 200px;text-align: center;padding: 10px;border: 2px solid #d10019; transition: all 0.3s ease;  margin: 2em 0 0 0; } 
  html body.cs-body .cs-checkoutBtn:hover {border-color: #878787; background: transparent;color:#000000}
  html body.cs-body .wkAddLayer {color: #000000;}
  .wkAddLayer .cs-checkoutBtn a {
    color: #000000;
    display: contents;
  } 
  html body.cs-body .ui-dialog .ui-dialog-titlebar,
  html body.cs-body .ui-dialog .ui-dialog-titlebar-close,
  html body.cs-body .cs-filterButton {background: var(--primaryBackground) !important;}
  html body.cs-body .ui-dialog {font-size: 1rem;}

  html body.cs-body .cs-button1 { background: transparent; color: #000000; display: inline-block;width: 200px;text-align: center;padding: 10px;border: 2px solid #d10019; transition: all 0.3s ease;  margin: 2em 0 0 0; }
  html body.cs-body .cs-button1:hover {border-color: #878787; background: transparent;color:#000000}
  .cs-basketStepOne .cs-voucherButton { text-decoration: none; background: #fff; padding: 10px; border-radius: 0px; margin-top: 4px; display: inline-block; width: 100% !important;text-align: center;}

  /* preview */
  article.cs-articlePreview h3 .cs-artPreviewName {font-family: var(--secondaryFont);font-size: 20px;color: var(--primaryFontColor);font-weight: var(--secondaryFontWeight);font-style: var(--secondaryItalic);}
  article.cs-articlePreview .cs-previewBottomBox {display: flex;justify-content: space-between;}
  article.cs-articlePreview .cs-previewBottomBox .cs-badgesBox.cs-right {right: auto;top: auto;z-index: 2;left: auto;position: relative;display: flex;}
  article.cs-articlePreview .artnamBox {margin-top: 20px;}
  article.cs-articlePreview .cs-shortDesc {margin: -10px 0 10px 0;color: #212529;font-weight: 400;overflow: hidden;position: relative;}
  article.cs-articlePreview .cs-auszeichnungenItem {margin-right: 10px;}
  article.cs-articlePreview .priceBox .priceRow .price {font-family: var(--secondaryFont);font-size: 20px;font-weight: var(--secondaryFontWeight);color: var(--primaryFontColor);font-style: var(--secondaryItalic);}
  article.cs-articlePreview .priceBox .priceRow .price span {color: var(--primaryFontColor);font-size: 20px;}
  article.cs-articlePreview .cs-previewBox {font-weight: 300;color: #212529; font-size:11pt;}
  article.cs-articlePreview .cs-previewBox a {color: #000000;text-decoration: underline;}
  article.cs-articlePreview .cs-seperator {margin: 0 7px;}
  article.cs-articlePreview .cs-hoverlay .cs-actionButton {border-radius: 0;}
  article.cs-articlePreview .priceBox .priceRow {float: right;}
  article.cs-articlePreview .priceBox .cs-priceFormat {text-align: right;}
  article.cs-articlePreview .priceBox .basePrice {color: #777;}
  article.cs-articlePreview .priceBox .priceRow .price span {font-size: 25px;font-weight: 800;}
  article.cs-articlePreview .rentals-hint-rentable {display: none;}
  article.cs-articlePreview .cs-priceFormat .priceRow .price span.priceFrom {font-size: 20px;}
  article.cs-articlePreview .cs-lagerBox {font-size: 12px;}
  article.cs-articlePreview .cs-lagerBox .cs-stock1 {color: #16b339;}
  article.cs-articlePreview .cs-lagerBox .cs-stock2 {color: #f58820;}
  article.cs-articlePreview .cs-lagerBox .cs-stock3 {color: #E05048;}
  .cs-artnum {font-size:14px;}
  /* Rote Unterstreichung bei Artikelnamen */ .cs-articleDetail .cs-articleDetailMiddleBox .cs-articleRightBox h1{color:var(--primaryFontColor);height:auto;font-size:2.3rem;font-weight:800;position:relative;display:inline-block;padding-bottom:10px;}
  /* Rote Unterstreichung bei Artikelnamen */ .cs-articleDetail .cs-articleDetailMiddleBox .cs-articleRightBox h1::after{content:"";display:block;width:100px;height:4px;background:#d10019;margin-top:0px;}
  
  /* "Das koennte dir auch gefallen" Artikelkacheln */
  .slick-slider .slick-slide {height: auto;}
  .slick-slider .slick-slide > div {height: 100%;}
  .slick-slider article.cs-articlePreview {border: 1px solid #cfcfcf;padding: 10px;padding-top: 0px;padding-bottom: 0px;background: #ffffff;box-sizing: border-box;height: 100%;display: flex;flex-direction: column;}
  .slick-slider .slick-track {display: flex !important;}
  .slick-slider .slick-slide {height: inherit !important;}

  /* Schnellbestellansicht */
  .fastorder-item > * {display: table-cell;font-size: 10pt;vertical-align: middle;}

  /* Abstand zw bildern und hinweis */
  .cs-bannerRow .cs-bannerItem {background-size: cover;background-repeat: no-repeat;background-position: center center;margin-bottom: 1em;}





  /* Farbe Graue Box Startseite */
  .cs-startseitenArtikel {background: #e6e6e6;padding: 3em 0 3em 0;margin-top: 3em;}
  .cs-startTextBox {padding: 1em 0;background: #e6e6e6;}
  

  /* detailansicht picture scroll */
  html body .cs-articleDetail .cs-articleDetailMiddleBox .cs-articleLeftBox {flex: 1;position: sticky;top: 2em;height: 100%;overflow: hidden;padding-bottom: 2em;padding-top:2em;z-index: 99;}

  /* ARTIKELDETAILANSICHT HINTERGRUNDFARBE IN WEIß */
  .cs-articleDetail .cs-articleDetailMiddleBox .cs-articleRightBox {padding-top: 1em;max-width: 52%;background: #ffffff;}
  body .cs-articleDetail .cs-greyBox {background: #ffffff;position: absolute;height: 100%;width: 100vw;left: calc((-100vw + 1419px) / 2);top: 0;right: 0;z-index: -1;display: table;}
  .cs-articleDetail .cs-articleDetailMiddleBox {position: relative; background: #ffffff;}


  /* Roter strich unter kategorie bei Artikelansicht */
  html body .cs-categoriesBox {
  margin-bottom: 2em !important;
  border-bottom: 3px solid #D1021A;
  }



  /*awards*/
  html body.cs-body .ui-dialog {max-height: 100vh;overflow: hidden;font-family: 'Helvetica Neue LTW05' !important; }

  /* BUTTONS */
  html body .cs-articleDetail .cs-newdetailTopBox .cs-button1 {width: 100%; }
  html body .cs-body .cs-button1:hover {background-color: #878787 !important;}
    



  /* footer */
  .cs-footerRow.cs-hinweis {text-align: center;margin-top: 2em;}
  footer .cs-footerPayments ul {justify-content: center;}
  footer .cs-footerRow.top {
    background: #ffffff;
    color: #000000;
  }
  .cs-footerBoxContent a {color: #000000;}
  footer .cs-footerTop {
    position: relative;
    padding: 20px 15px 10px 15px;
    margin-top: 25px;
  }

  footer .cs-footerRow.top {
    position: relative;
    z-index: 1;
  }

  /* obere Linie */
  footer .cs-footerRow.top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #d10019;
    z-index: 2;
  }

  /* untere Linie */
  footer .cs-footerRow.top::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #d10019;
    z-index: 2;
  }
  /* Footerhinweis */
  .cs-footerRow.cs-hinweis {
    text-align: center;
    margin-top: 0em;
    background-color: #e6e6e6;
  }
  footer .cs-copyrightBox {
    text-align: center;
    padding: 17px 5px;
    width: 100%;
    background-color: #e6e6e6;
    margin: 0px;
  }
  .cs-footerRow.cs-hinweis {
    text-align: center;
    padding-top: 15px;
    margin-top: 0em;
    background-color: #e6e6e6;
  }
  /* Footer ENDE */



  /* Prouctlisting */
  .cs-productListing article {
    border: 1px solid #cfcfcf;
    padding: 20px;
    background: #fff;
  }
  /* Productlisting ENDE */




  /* ============================================
   MEGA MENU – Strukturierte Spalten & elegantes Layout
   ============================================ */

  /* Haupt-Container des Mega-Menüs */
  .cs-categoriesMegaMenu .cs-megaMenu > ul > li .cs-megaMenuContainer {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  padding: 2em 2.5em;
  color: #111;
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  transition: all 0.25s ease;
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 999;
  }

  /* Mega-Menü sichtbar beim Hover über Hauptkategorie (Top-Navi) */
  .cs-categoriesMegaMenu .cs-megaMenu > ul > li:hover .cs-megaMenuContainer {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  }

  /* Spalten-Layout */
  .cs-categoriesMegaMenu .cs-megaMenu > ul > li .cs-megaMenuContainer .cs-megamenu > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2em;
  }

  /* Spalten-Listen */
  .cs-categoriesMegaMenu .cs-megaMenu > ul > li .cs-megaMenuContainer .cs-megamenu > div > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  }

  /* Hauptkategorie-Titel im Dropdown-Menü */
  .cs-categoriesMegaMenu .cs-megaMenu > ul > li .cs-megaMenuContainer .cs-megamenu > div > ul > li > a {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  color: #000 !important;
  margin-bottom: 0.5em;
  padding-bottom: 0.3em;
  transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
  }

  /* Hauptkategorie-Titel HOVER */
  .cs-categoriesMegaMenu .cs-megaMenu > ul > li .cs-megaMenuContainer .cs-megamenu > div > ul > li > a:hover {
  color: var(--primaryBackground) !important;
  transform: scale(1.08) translateY(-2px);
  text-shadow: 0 0 6px rgba(0,0,0,0.1);
  }

  /* Unterstreichung für alle Links im Mega-Menü deaktivieren */
  .cs-categoriesMegaMenu .cs-megaMenu a,
  .cs-categoriesMegaMenu .cs-megaMenu a:hover,
  .cs-categoriesMegaMenu .cs-megaMenu a:focus,
  .cs-categoriesMegaMenu .cs-megaMenu a:active {
  text-decoration: none !important;
  }

  /* ============================================
   Pfeile für Kategorien mit Unterpunkten
   ============================================ */

  .cs-categoriesMegaMenu .cs-megaMenu > ul > li .cs-megaMenuContainer ul li:has(ul) > a {
  position: relative;
  padding-right: 18px;
  }

  .cs-categoriesMegaMenu .cs-megaMenu > ul > li .cs-megaMenuContainer ul li:has(ul) > a {
  position: relative;
  display: inline-flex;       /* Text + Pfeil nebeneinander */
  align-items: center;
  gap: 0.4em;                /* Abstand zwischen Text und Pfeil */
  padding-right: 0;           /* keinen extra Platz mehr rechts */
  }

  .cs-categoriesMegaMenu .cs-megaMenu > ul > li .cs-megaMenuContainer ul li:has(ul) > a::after {
  content: "▾";
  margin-left: 0.4em;
  position: static;           /* nicht mehr absolut */
  transform: none;
  font-size: 0.8em;
  color: #999;
  transition: transform 0.25s ease, color 0.25s ease;
  }


  /* ============================================
   Unterkategorien – öffnen/schließen über .is-open
   ============================================ */

  /* Grundzustand: Unterkategorien versteckt, langsame Transition fürs Schließen */
  .cs-categoriesMegaMenu .cs-megaMenu > ul > li .cs-megaMenuContainer ul li > ul {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition:
    max-height 0.4s ease-in,
    opacity    0.4s ease-in,
    transform  0.4s ease-in;
  margin-top: 0.3em;
  padding-left: 0.8em;
  }

  /* Sichtbar, wenn LI die Klasse .is-open hat → schnelles AUFKLAPPEN */
  .cs-categoriesMegaMenu .cs-megaMenu > ul > li .cs-megaMenuContainer ul li.is-open > ul {
  max-height: 500px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    max-height 0.2s ease-out,
    opacity    0.2s ease-out,
    transform  0.2s ease-out;
  }

  /* Unterkategorien-Links */
  .cs-categoriesMegaMenu .cs-megaMenu > ul > li .cs-megaMenuContainer ul li > ul > li {
  margin: 0.3em 0;
  }

  .cs-categoriesMegaMenu .cs-megaMenu > ul > li .cs-megaMenuContainer ul li > ul > li > a {
  display: block;
  padding: 4px 0;
  font-size: 0.95rem;
  color: #555 !important;
  transition: color 0.2s ease;
  }

  /* Hover-Effekt für Unterlinks */
  .cs-categoriesMegaMenu .cs-megaMenu > ul > li .cs-megaMenuContainer ul li > ul > li > a:hover {
  color: var(--primaryBackground) !important;
  }

  /* MEGA MENU ENDE */


  /* Beide Buttons gleich stylen */ /*
  .cs-backToShopping .cs-checkoutBtn,
  .cs-checkoutBtn {
  background: var(--primaryBackground);
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  text-align: center;
  display: inline-block;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  }

  .cs-backToShopping .cs-checkoutBtn:hover,
  .cs-checkoutBtn:hover {
  background-color: #a00015; 
  color: #ffffff;
  }

  .cs-backToShopping .cs-checkoutBtn {
  width: auto !important;
  margin: 0 !important;
  }  */
  

  /* Code fuer Groessentabelle Zusatzseite */
  .hm-sizeguide{max-width:1100px;margin:0 auto;padding:24px 16px;font-family:inherit}
  .hm-sizeguide h1{margin:0 0 10px;text-align:center}
  .hm-sizeguide .hm-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 18px}
  .hm-sizeguide .hm-nav a{display:inline-block;padding:10px 14px;border:1px solid #ddd;border-radius:999px;background:#fff;color:#111;text-decoration:none}
  .hm-sizeguide .hm-nav a:hover{border-color:#111}
  .hm-sizeguide .hm-note{background:#f7f7f7;border:1px solid #e5e5e5;border-radius:8px;padding:12px 14px;margin:0 0 22px}
  .hm-sizeguide .hm-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;margin:0 0 18px}
  @media(max-width:820px){.hm-sizeguide .hm-grid{grid-template-columns:1fr}}
  .hm-sizeguide .hm-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #e5e5e5;border-radius:8px;background:#fff}
  .hm-sizeguide table{width:100%;min-width:720px;border-collapse:collapse;font-size:14px}
  .hm-sizeguide th,.hm-sizeguide td{padding:10px 12px;border-bottom:1px solid #eee;text-align:center;vertical-align:middle}
  .hm-sizeguide th{background:#f2f2f2;font-weight:700}
  .hm-sizeguide td:first-child,.hm-sizeguide th:first-child{text-align:left;font-weight:700;white-space:nowrap}
  html { scroll-behavior: smooth; }.hm-sizeguide h2 { scroll-margin-top: 120px; } /* Wert an Headerhöhe anpassen */
  /* Keine Rundungen innerhalb der Größentabelle */ .hm-sizeguide *, .hm-sizeguide table, .hm-sizeguide th, .hm-sizeguide td, .hm-sizeguide a, .hm-sizeguide img, .hm-sizeguide .hm-note, .hm-sizeguide .hm-tablewrap { border-radius: 0 !important; }
  /* Code fuer Groessentabelle Zusatzseite Ende */
  


  /* Neue Tabansicht – Linien oben & unten */
  #tabs .tabContainer{border-top:1px solid #d10019;border-bottom:1px solid #d10019;box-shadow:none;background:#fff;} #tabs .tabContainer.cs-flex{flex-wrap:nowrap !important;align-items:stretch;}
  #tabs .tabs{padding:18px 28px;cursor:pointer;background:transparent;position:relative;border-radius:0 !important;} #tabs .tabs span{font-size:20px;color:#000;}
  #tabs .tabs.activeTab{background:transparent !important;color:#000 !important;font-weight:500;} #tabs .tabs.activeTab::after{content:"";position:absolute;left:28px;right:28px;bottom:0;height:6px;background:#d10019;}
  #tabs .tabs.activeTab span{color:#000 !important;border-bottom:0 !important;font-weight:400;background:none;} 

    /* Vollbreite Linien oben/unten über den ganzen Viewport */
  #tabs .tabContainer{position:relative;border:0;box-shadow:none;background:#fff;}
  #tabs .tabContainer::before,
  #tabs .tabContainer::after{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:100vw;
    height:1px;              /* Strichstärke */
    background:#d10019;
    pointer-events:none;
  }
  #tabs .tabContainer::before{top:0;}
  #tabs .tabContainer::after{bottom:0;}

  /* Responsive */
  @media (max-width:768px){#tabs .tabContainer.cs-flex{flex-wrap:wrap !important;} #tabs .tabs{flex:1 1 50%;padding:12px 14px;text-align:center;} #tabs .tabs span{font-size:16px;line-height:1.2;display:block;} #tabs .tabs.activeTab::after{left:14px;right:14px;height:4px;}}
  @media (max-width:420px){#tabs .tabs{flex:1 1 100%;padding:12px 12px;} #tabs .tabs span{font-size:15px;} #tabs .tabs.activeTab::after{left:12px;right:12px;}}
  

  footer .cs-footerBox .cs-footerBoxHeader{
  font-family: var(--secondaryFont);
  text-transform: none;
  font-weight: var(--secondaryFontWeight);
  font-style: var(--secondaryItalic);
  }

/*_________________________________________________ ANFANG CODE FÜR BLOGBEITRAG ___________________________________________________*/

  /* Container für alle FAQ-Inhalte */

  .faq-container {
    max-width: 900px;
    margin: auto;
    background-color: transparent;
  }
 
  /* FAQ-Item-Wrap */

  .faq-item {
    border-top: 1px solid #ddd;
    overflow: hidden;
  }
 
  /* Frage-Button-Stil */

  .faq-question {
    cursor: pointer;
    padding: 16px;
    background-color: transparent;
    font-family: 'Exo 2', sans-serif;
    font-style: italic;
    font-weight: 900;
    font-size: 26px;
    color: rgb(10, 187, 239);

  }
 
  /* Antwort-Block (geschlossen) */

  .faq-answer {
    max-height: 0;
    opacity: 0;
    padding: 0 16px;
    background-color: transparent;
    border-bottom: 1px solid #ddd;
    transition: max-height 0.3s ease-in, opacity 0.2s ease-out;

  }
 
  /* Antwort-Block (sichtbar bei .active) */

  .faq-item.active .faq-answer {
    max-height: 500px;
    opacity: 1;
    padding: 16px;
  }


 
/*_________________________________________________ ENDE CODE FÜR BLOGBEITRAG ___________________________________________________*/


  /* Artikelansicht Warenkorbanzeige auf gleiche höhe gesetzt */
  html body #mengenEingabeContainer .cs-articleAmountBox #wkmenge {border-color: var(--primaryFontColor);padding-bottom: 12px;}


  /* Artikel download Button in der Artikelansicht */
  .cs-newPriceRow svg path { fill: #404040;}


  /* "NEWSLETTER ABONNIEREN" auf gleicher höhe im Footer */
  footer .cs-footerNewsletterBox.heading{
    font-family: var(--secondaryFont);
    text-transform: none;
    font-weight: var(--secondaryFontWeight);
    font-style: var(--secondaryItalic);
    margin-bottom: 13px;
  }



  /* Nachweis dropdown menü + buttons bei den Nachweispflichtigen Positionen in unser Style verändert */
  .nachweis-eingabe-head-frontend {
    cursor: pointer;
    border: 1px solid #afafaf;
    display: inline-block;
    padding: 0.1em 0.6em;
    border-radius: 0px;
    background: #f7f7f7;
    margin-top: 1em;
  }
  .ui-button .ui-icon {
    background-image: none !important;
  }
  .nachweisOverviewFilterForm .cs-nachweisFilterRow button {
    display: block;
    margin: 1em 0 !important;
    padding: 0.3em 0.6em !important; /* Abstand */
    background-color: #f7f7f7 !important; /* Hintergrundfarbe */
    border: 1px solid #afafaf !important; /* Rand */
    font-size: 17px !important; /* Schriftgröße */
    text-align: left; /* Text links ausrichten */
    color: #000 !important; /* Textfarbe */
    font-family: Cambria, serif !important; 
    position: relative !important;
  }
  .nachweisOverviewFilterForm .cs-nachweisFilterRow button::before {
    content: "\e8cc"; /* Ersetze dies durch den Unicode deines Icons */
    font-family: cs; /* Stelle sicher, dass die Font-Family "cs" korrekt eingebunden ist */
    font-size: 1.2em;
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;

    font-style: normal;
    font-weight: 400;
    speak: none;

    text-decoration: inherit;
    width: auto;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
  }



  /* Checkout boxen werden bei Auswahl in Firmenfarben angezeigt */
  .checkoutStep4 .cs-paymentBox,.checkoutStep4 .cs-shippingBox {
    border: 1px solid #000;
    border-radius: 0.2em;
    margin-right: 1em;
    position: relative;
    margin-bottom: 0.5em;
  }

  .checkoutStep4 .cs-paymentBox.active:after, 
  .checkoutStep4 .cs-shippingBox.active:after {
    content: "";
    display: none; /* Versteckt den Punkt */
  }

  .checkoutStep4 .cs-paymentBox.active, 
  .checkoutStep4 .cs-shippingBox.active {
    border: 3px solid var(--primaryBackground) !important; /* Dynamische Umrandungsfarbe */
     /* Falls du abgerundete Ecken möchtest */
  }

  /* Schließen-Button bei "Ähnliche Artikel"*/
  html body.cs-body .ui-dialog .ui-dialog-titlebar-close {
    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  html body.cs-body .ui-dialog .ui-dialog-titlebar-close::before {
    content: "×"; /* schönes X */
    font-size: 28px;
    color: #ffffff;
    text-indent: 0; /* ::before bleibt sichtbar */
  }

  /* cosmoshop numbers none #46575 
  html body article.cs-articlePreview .cs-numbers {display: none;} */


  /* Merkliste Anzahl der Artikel Farbe */
  html body.cs-category .cs-articleCount {padding-left: 4px;color: #000000;font-size: 16px; } 



  /* fastorder detail */
  .fastorder-productListing{list-style:none;padding:0;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#333;background-color:#fff}
  .fastorder-productListing .fastorder-item{display:grid;grid-template-columns:64px 1fr 140px 100px 130px;gap:16px;align-items:center;padding:12px 16px;border-bottom:1px solid #eef2f5}
  .fastorder-productListing .fastorder-item-header{background-color:#f8fafc;font-weight:600;color:#64748b;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid #e2e8f0}
  .fastorder-productListing .fastorder-item-header>span:nth-of-type(4){text-align:right}
  .fastorder-productListing .fastorder-item img{display:block;max-width:100%;height:auto;border-radius:4px;background-color:#f1f5f9}
  .fastorder-productListing .fastorder-item span[itemprop=name]{font-weight:500;color:#1e293b;font-size:.95rem}
  .fastorder-productListing .fastorder-item span:nth-child(3){font-size:.85rem;color:#64748b}
  .fastorder-productListing .cs-priceFormat{font-weight:600;color:#0f172a;font-size:1rem;text-align:right;white-space:nowrap}
  .fastorder-productListing .cs-articleAmountBox{position:relative;display:inline-flex;align-items:center;background-color:#f1f5f9;border-radius:6px;padding:4px;width:120px;justify-content:space-between}
  .fastorder-productListing .fastorder-quantityInput{width:50px;border:none;background:0 0;text-align:center;font-weight:600;font-size:.95rem;color:#1e293b;order:2;-moz-appearance:textfield}
  .fastorder-productListing .fastorder-quantityInput::-webkit-inner-spin-button,.fastorder-productListing .fastorder-quantityInput::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
  .fastorder-productListing .fastorder-quantityInput:focus{outline:0}
  .fastorder-productListing .cs-amountIcon{cursor:pointer;color:#64748b;transition:color .2s,background-color .2s;padding:6px;border-radius:4px;width:28px;height:28px;display:flex;align-items:center;justify-content:center}
  .fastorder-productListing .cs-amountIcon:hover{background-color:#e2e8f0;color:#0f172a}
  .fastorder-productListing .cs-articleMinus{order:1}
  .fastorder-productListing .cs-articlePlus{order:3}
  .fastorder-productListing .fastorder-item .cs-articleAmountBox>svg{top:calc(50% - 1.1em);cursor:pointer;position:absolute;z-index:99}

  @media (max-width: 768px) {
    .fastorder-productListing .fastorder-item-header{display:none}
    .fastorder-productListing .fastorder-item{grid-template-columns:80px 1fr;grid-template-rows:auto auto auto;gap:8px 16px;padding:16px}
    .fastorder-productListing .fastorder-item span:nth-child(1){grid-column:1;grid-row:1 / span 3;align-self:start}
    .fastorder-productListing .fastorder-item span[itemprop=name]{grid-column:2;grid-row:1}
    .fastorder-productListing .fastorder-item span:nth-child(3){grid-column:2;grid-row:2}
    .fastorder-productListing .fastorder-item span:nth-child(4){grid-column:2;grid-row:3;justify-self:start;margin-top:4px}
    .fastorder-productListing .cs-priceFormat{text-align:left}
    .fastorder-productListing .cs-articleAmountBox{grid-column:2;grid-row:3;justify-self:end;margin-top:4px}
  }