:root {
    --dat-main-color-dark-blue: #103366;
    --dat-main-color-dark-yellow: #ffd100;
    --dat-main-color-light-blue: #6f96c2;
    --dat-color-grey: #e4e7eb;
    --dat-color-white: #fff;
    --dat-color-grey-2:#DCDCDC;
    --dat-color-white-rgb : 255,255,255;
    --dat-color-grey-rgb: 228,231,235;
  
    --base-font-family: "Fira Sans", sans-serif;
    --dat-text-color-dark-blue: var(--dat-main-color-dark-blue);
    --dat-text-color-light-blue: var(--dat-main-color-light-blue);
    --dat-text-color-white: var(--dat-color-white);
    --dat-text-color-header-hover: #57749b;
    --dat-font-size: 1rem;
    --dat-font-line-height: 1.5;
    --dat-nav-text-color-hover: #007aff;
    --dat-navigation-text-font-size: 1rem;
    --dat-text-header-caption: 3rem;
    --dat-text-caption: 1.5rem;
    --dat-link-color: var(--dat-text-color-light-blue);
    --dat-link-hover-color: var(--dat-text-color-dark-blue);
    --dat-link-font-weight: 600;

    --dat-container-gray-bg-color: var(--dat-color-grey);
    --dat-container-blue-bg-color: var(--dat-main-color-dark-blue);
    --dat-container-blue-text-color: var(--dat-color-white);


    --dat-btn-width: 156px;
    --dat-btn-primary-bg: var(--dat-main-color-dark-yellow);
    --dat-btn-primary-color: var(--dat-main-color-dark-blue);
    --dat-btn-primary-border-color: var(--dat-main-color-dark-yellow);
    --dat-btn-primary-hover-color: var(--dat-main-color-light-blue);
    --dat-btn-primary-hover-bg: #fff;
    --dat-btn-primary-hover-border-color: var(--dat-main-color-light-blue);
    --dat-btn-primary-focus-shadow-rgb: 219, 185, 15;
    --dat-btn-primary-active-color: var(--dat-main-color-light-blue);
    --dat-btn-primary-active-bg: #f1f5f9;
    --dat-btn-primary-active-border-color: var(--dat-main-color-light-blue);
    --dat-btn-primary-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --dat-btn-primary-disabled-color: #000;
    --dat-btn-primary-disabled-bg: var(--dat-main-color-dark-yellow);
    --dat-btn-primary-disabled-border-color: var(--dat-main-color-dark-yellow);

    --dat-btn-secondary-bg: #fff;
    --dat-btn-secondary-color: var(--dat-main-color-dark-blue);
    --dat-btn-secondary-border-color: var(--dat-main-color-dark-blue);
    --dat-btn-secondary-hover-color: var(--dat-main-color-light-blue);
    --dat-btn-secondary-hover-bg: #fff;
    --dat-btn-secondary-hover-border-color: var(--dat-main-color-light-blue);
    --dat-btn-secondary-focus-shadow-rgb: 219, 185, 15;
    --dat-btn-secondary-active-color: var(--dat-main-color-light-blue);
    --dat-btn-secondary-active-bg: #f1f5f9;
    --dat-btn-secondary-active-border-color: var(--dat-main-color-light-blue);
    --dat-btn-secondary-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --dat-btn-secondary-disabled-color: #000;
    --dat-btn-secondary-disabled-bg: var(--dat-main-color-dark-yellow);
    --dat-btn-secondary-disabled-border-color: var(--dat-main-color-dark-yellow);
    --dat-btn-secondary-dark-bg: var(--dat-main-color-dark-blue);
    --dat-btn-secondary-dark-color: var(--dat-text-color-white);
    --dat-btn-secondary-dark-hover-bg: #fff;
    --dat-btn-secondary-dark-hover-color: var(--dat-main-color-light-blue);
    --dat-btn-secondary-dark-hover-border-color: #fff;
  
    --dat-text-banner-font-size: 1.5rem;
    --dat-text-banner-content-font-size: 3rem;
  
    --container-max-width: 84rem;

}

body {
    color: var(--dat-text-color-dark-blue);
    font-size: var(--dat-font-size) !important;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    font-weight: 600;
}

h1, h2, h3, h4, h5, h6 > .categoryName {
    color: var(--dat-text-color-dark-blue) !important;
}


/*LINKS */

a:not(.navigation_link, .info_link) {
    color: var(--dat-link-color);
    font-weight: var(--dat-link-font-weight, normal);
}

a:not(.navigation_link, .info_link):hover {
    color: var(--dat-link-hover-color);
}


/* END LINKS */

/* BREADCRUMBS */

.cs-breadCrumb {
    margin-top: 5em;
}

/* END BREADCRUMBS */


/* NAVIGATION */

header .cs-categoriesBox, header #infoblock .cs-shortnav {
    background: #fff;
    width: 100%;
    align-content: flex-start;
    padding-left: 30px;
    top: -30px;
}

header .cs-categoriesBox .cs-megaMenu > ul > li > a , header .cs-categoriesBox .cs-categoriesTop.cs-container.cs-largeMenu  > ul > li >.cs-menuItem >  a{
    font-family: var(--base-font-family);
    font-weight: 600;
    font-style: normal;
    color: var(--dat-main-color-dark-blue);
    line-height: var(--dat-font-line-height);
    font-size: 1rem;

}

header .cs-categoriesBox .cs-megaMenu ul.noList {
}


header .cs-categoriesBox .cs-megaMenu ul.noList .cs-megaMenuContainer ul.noList {
    justify-content: flex-start;
    display: flex;
}

header .cs-megaMenuContainer a {
    font-family: var(--base-font-family);
    font-weight: 600;
    font-style: normal;
    font-size: var(--dat-font-size);
    color: var(--dat-main-color-dark-blue);
    line-height: var(--dat-font-line-height);

}

header .cs-categoriesMegaMenu .cs-megaMenu > ul > li .cs-megaMenuContainer {
    border: 0;
    border-top: 2px solid rgba(16, 51, 102, 0.2);
    padding: 0.5em 0 0 0;


}

.cs-headerContent .cs-miniButtons ul li {
    border: 3px solid var(--dat-main-color-dark-blue);
    /*height: fit-content;*/
    overflow: hidden;
    position: relative;
    transition: all 0.6s ease-in-out;
    font-size: 14px;

}

a.navigation_link {
    text-decoration-color: var(--dat-main-color-dark-yellow);
}

a.navigation_link:hover, .cs-megaMenuContainer a:hover {
    text-decoration: underline;
    text-decoration-color: var(--dat-main-color-dark-yellow);
    color: var(--dat-main-color-light-blue) !important;
    text-underline-offset: 15px;
    text-decoration-thickness: 2px;

}

.cs-mobileCategorys .cs-miniButtons {
     display: inline-flex !important; 
      border-bottom: 1px solid black;
    width: 100%;

}

.cs-mobileCategorys .cs-miniButtons ul {
     display: inline-flex; 
        margin-bottom: 20px;
      justify-content: space-between;
    width: 100%;
}

.cs-mobileCategorys .cs-miniButtons ul li {
     height: auto; 
}

.cs-mobileCategorys .cs-lang {
     position: absolute;
    top: 0;
}

.cs-mobileCategorys .cs-mobileCategorysHeader{
  background: var(--dat-main-color-dark-blue);
}

.cs-overlayButton.cs-overlayMenuButton{
   background: var(--dat-main-color-dark-blue); 
}


/* END NAVIGATION */

/* BANNER */

.cs-body .slider-wrapper .nivoSlider{

  /*display: inline-flex;*/
}

.cs-body .slider-wrapper .nivoSlider .nivo-caption {
    font-family: var(--base-font-family) !important;
    font-weight: bold;
    opacity: 1;
    /*max-width: 45%;*/
    margin: 0 !important;
  /*
   background:linear-gradient(to right,#e9ecef 60% ,rgba(255,255,255, 0.6));
  */
    background: var(--dat-color-grey);
    left: 0;
    text-align: center;
  clip-path: polygon(0% 0%, 82% 0, 100% 50%, 82% 100%, 0% 100%);

}

.theme-default .nivo-caption .cs-captionWrapper {
    /*background: #fff;*/
      text-align: center;
      max-width: 50%;

}

.cs-body .slider-wrapper .nivoSlider .nivo-caption:has(.nivo-box .nivoSlider img:hover):hover{
   background: red;
  clip-path: none;
}

.action-slide-box {
    display: inline-flex;
    margin-top: 30px;
    gap: 20px;
    justify-content: center;

}


.cs-body .slider-wrapper .cs-captionWrapper a {
    color: var(--dat-text-color-dark-blue);
}

/* BANNER END */

/*TOP BAR */
/*
header{
     position: fixed;
      background: #fff;
      z-index: 1000;
      width: 100%;
    }
*/


header .cs-topBar, .cs-loginpagebody .cs-header {
    background: var(--dat-main-color-dark-blue);
    line-height: var(--dat-font-line-height);
    padding:3px 0;
}

header .cs-topPages > ul > li a, a.selector_lang_link  {
    color: var(--dat-text-color-white);
    font-weight: 600;
    font-size: var(--dat-font-size);
    line-height: var(--dat-font-line-height);


}

header .cs-miniwk a{
      display: inline-flex;
}

header .cs-miniButtons .cs-svgIcon {
    margin: 0.4em;
}

header .cs-miniButtons > ul > li {
    margin: 0 0.2em;
}

header .cs-miniButtons > ul > li.cs-searchBar{
   position: static; 
}

header .cs-topPages .cs-svgIcon path{
    fill: var(--dat-text-color-white);
    transition: all 0.6s ease-in-out;

}

header .cs-topPages .cs-svgIcon {
    top: 0;
}



a.info_link:hover, a.selector_lang_link:hover {
    color: var(--dat-text-color-header-hover);

}


/* END TOP BAR */


/*FOOTER*/

.cs-footerRow.top {
    color: var(--dat-text-color-white) !important;
    background: var(--dat-main-color-dark-blue) !important;
}

.cs-footerRow.top .cs-container {
    color: var(--dat-text-color-white) !important;

}

.cs-footerBoxContent > ul > li a, .cs-footerBoxContent a {
    color: var(--dat-text-color-light-blue);
}


.cs-footerBoxContent > ul > li a:hover, .cs-footerBoxContent a:hover {
    color: var(--dat-text-color-header-hover);
}

/* END FOOTER */



/* CATEGORY */
.cs-categoryList .cs-categoryPreview a {
    color: var(--dat-main-color-dark-blue);
}

.cs-categoryPreview .cs-categoryPicture img {
    min-height: 300px !important;
   /* object-fit: cover; */ 
    width: 100%;
}

.cs-startSlider, .nivoSlider {
    max-height: 500px;
    /*margin-bottom: 35px !important;*/
    margin-bottom: 0;
}

.theme-default .nivo-caption .cs-captionWrapper {
    /*margin-left: 340px; */
    margin: 0 auto;
}

/* CATEGORY END */

/* BUTTONS */

.btn.btn-primary, .btn-primary, .cs-button3 {
    background: var(--dat-btn-primary-bg);
    color: var(--dat-btn-primary-color);
    border: 3px solid var(--dat-btn-primary-border-color) !important;
    font-size: var(--dat-font-size);
    font-weight: 600;
    padding: 1.25rem .375rem;
    border-width: 3px;
    width: var(--dat-btn-width);
    line-height: 0;
    text-align: center;
    transition: all 0.35s ease-in-out;
    position: relative;

}

.btn-primary.outborder:hover, .cs-button3.outborder:hover {
    background: var(--dat-btn-primary-hover-bg) !important;
    color: var(--dat-btn-primary-hover-color) !important;
    border-color: transparent !important;
}

.btn.btn-primary:not(.btn-slide, .dark, .outborder):hover, .btn-primary:not(.btn-slide, .dark, .outborder):hover, .cs-button3:not(.btn-slide, .dark, .outborder):hover {
    background: var(--dat-btn-primary-hover-bg) !important;
    color: var(--dat-btn-primary-hover-color) !important;
    border-color: var(--dat-btn-primary-hover-border-color) !important;

}

.btn-secondary, .cs-button1, .cs-button2 {
    background: var(--dat-btn-secondary-bg);
    color: var(--dat-btn-secondary-color);
    border: 3px solid var(--dat-btn-secondary-border-color) !important;
    font-size: var(--dat-font-size);
    font-weight: 600;
    padding: 1.25rem .375rem;
    border-width: 3px;
    width: var(--dat-btn-width);
    line-height: 0;
    text-align: center;
    transition: all 0.3s ease-in-out;
    z-index: 1;

    position: relative;


}

.btn.btn-secondary.dark, .btn-secondary.dark, .cs-button1.dark, .cs-button2.dark {
    background: var(--dat-btn-secondary-dark-bg);
    color: var(--dat-btn-secondary-dark-color);
}

.btn.btn-secondary.dark:hover, .btn-secondary.dark:hover, .cs-button1.dark:hover, .cs-button2.dark:hover {
    background: var(--dat-btn-secondary-dark-hover-bg) !important;
    color: var(--dat-btn-secondary-dark-hover-color) !important;
    border-color: var(--dat-btn-secondary-dark-hover-border-color) !important;
}


.btn.btn-secondary:not(.btn-slide, .dark, .outborder):hover, .btn-secondary:not(.btn-slide, .dark, .outborder):hover, .cs-headerContent .cs-miniButtons ul li:hover, .cs-button1:not(.btn-slide, .dark, .outborder):hover, .cs-button2:not(.btn-slide, .dark, .outborder):hover {
    background: var(--dat-btn-secondary-hover-bg) !important;
    color: var(--dat-btn-secondary-hover-color) !important;
    border-color: var(--dat-btn-secondary-hover-border-color) !important;

}


.cs-headerContent .cs-miniButtons ul li:hover .cs-svgIcon path{
    fill: var(--dat-btn-secondary-hover-color);
    transition: all 0.3s ease-in-out;

}

.cs-miniwk:hover a, .cs-miniwk:hover span {
  color: var(--dat-btn-secondary-hover-color);
      transition: all 0.3s ease-in-out;

 }


.btn.btn-primary.btn-slide, .btn-primary.btn-slide {
    background: linear-gradient(to left, #24bced 50%, var(--dat-main-color-dark-yellow) 50%);
    background-size: 200% 100%;
    background-position: 0;
    transition: background-position 0.6s;
    color: #000000;

}

.btn.btn-secondary.btn-slide, .btn-secondary.btn-slide {
    background: linear-gradient(to left, #24bced 50%, var(--dat-main-color-dark-blue) 50%);
    background-size: 200% 100%;
    background-position: 0;
    transition: background-position 0.6s;
    color: var(--dat-text-color-white);

}


.btn.btn-secondary.btn-slide:hover, .btn-secondary.btn-slide:hover, .btn.btn-primary.btn-slide:hover, .btn-primary.btn-slide:hover {
    background-position: -100% 0 !important;

}

.cs-backToShopping a.btn-primary {
    color: var(--dat-btn-primary-color) !important;

}

.cs-backToShopping a.btn-secondary {
    color: var(--dat-btn-secondary-color) !important;
55px
}

.btn-secondary.slide-effect::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -3px;
    bottom: -3px;
    left: -3px;
    right: -3px;
    background: linear-gradient(to right, #103366 40%, #6f96c2 60%);
    background-size: 250% 100%;
    background-position: 0;
    transition: background-position .3s ease-in-out;

}


.btn-secondary:hover.slide-effect::before {
    background-position: 100% 0;
}

.btn-secondary.slide-effect::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
}

.button-w-300{
   width: 300px; 
}

/*OVERRIDE BUTTONS COSMOSHOP */
.cs-body .cs-button1, .cs-body .cs-button2 {
    background: var(--dat-btn-secondary-bg) !important;
    color: var(--dat-btn-secondary-color) !important;
    padding: 0 !important;
    line-height: 40px;


}

.cs-body .cs-button3 {
    background: var(--dat-btn-primary-bg) !important;
    color: var(--dat-btn-primary-color) !important;
    padding: 10px !important;
    line-height: 30px;


}

.cs-button1.dark, .cs-button2.dark {
    background: var(--dat-btn-secondary-dark-bg) !important;
    color: var(--dat-btn-secondary-dark-color) !important;
    padding: 0 !important;
    line-height: 40px;
}

input[type="submit"].requestBtn {
    background: var(--dat-btn-secondary-bg) !important;
    color: var(--dat-btn-secondary-color) !important;
    border: 3px solid var(--dat-btn-secondary-border-color) !important;
    font-size: var(--dat-font-size);
    font-weight: 600;
    padding: 1.25rem .375rem;
    border-width: 3px;
    width: var(--dat-btn-width);
    line-height: 0;
    text-align: center;
    transition: all 0.3s ease-in-out;
    z-index: 1;

    position: relative;

}

input[type="submit"].requestBtn:hover {
    background: var(--dat-btn-secondary-hover-bg) !important;
    color: var(--dat-btn-secondary-hover-color) !important;
    border-color: var(--dat-btn-secondary-hover-border-color) !important;
}

/*END OVERRIDE */

.cs-addArticleRow .btn-secondary, .cs-addArticleRow .btn-primary {
    margin: 0 10px;
    line-height: 10px;
}

.cs-filterButton img {
    top: 0;

}

.cs-filterButton span {
    top: 0;
}

/* BUTTONS END */

/* CONTAINERS */

.container-grey {
    background: var(--dat-container-gray-bg-color);
    color: var(--dat-main-color-dark-blue);
}

.container-blue {
    background: var(--dat-container-blue-bg-color);
    color: var(--dat-container-blue-text-color) !important;

}

.cs-container {
    color: var(--dat-text-color-dark-blue);
    width: auto;
    max-width: unset;
}
.cs-checkout .cs-container{
   max-width: var(--container-max-width); 
}

.cs-subtitle {
    color: inherit;
}

.cs-formRow {
    color: var(--dat-text-color-dark-blue);

}

.cs-formRow .label, .cs-formRow input, .cs-formRow .cs-contactAdress {
    color: var(--dat-text-color-dark-blue);
}

aside.cs-aside:has(.leftNavigationBox) {
    display: none;
}

section.cs-mainContent {
    width: 100%;
}


sub {
    font-size: .75em;
}


header .cs-container, footer .cs-container{
   max-width: var(--container-max-width);  
  
  
}

/* END CONTAINERS */

/* INPUTS */

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-content: center;
    justify-content: center;
    font-size: 20px !important;
    border: 2px solid black;
    text-align: center;
    line-height: 18px;
    color: #fff;
    border-radius: 5px;
    margin-left: 5px;

}

input[type="checkbox"]::before {
    content: "";
    width: 1rem;
    height: 1rem;
    background-color: transparent;
    transition: all 0.3s;


}

input[type="checkbox"]:hover::before {
    content: "\2713";
    background-color: #103366;
    border-color: #103366 !important;

}

input:checked[type="checkbox"] {
    border-color: #103366 !important;
}

input:checked[type="checkbox"]::before {
    content: "\2713";
    background-color: #103366;
    border-color: #103366 !important;
}

.form-check-input[type="radio"] {
    margin-left: 10px !important;
}

label:has(input[type="radio"]) {
    padding: 10px;
    background: var(--dat-color-grey);
}

label:has(input:checked[type="radio"]), label:has(input[type="radio"]):hover {
    /*background: var(--dat-main-color-dark-blue);*/
    transition: all 0.3s;
    background: linear-gradient(to left, #24bced 50%, var(--dat-main-color-dark-blue) 50%);
    background-size: 200% 100%;
    background-position: 0;
    transition: background-position 0.6s;
    color: var(--dat-text-color-white);
}

label:has(input:checked[type="radio"]):hover{
   background-position: -100% 0 !important; 
}




input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select, textarea {
    padding: 0.5em !important;
    border-radius: 0;
    color: var(--dat-text-color-dark-blue);
}

.cs-rechnungsanschrift input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select, textarea {
    padding: 0.9em !important;

}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="date"]:focus,
select:focus, textarea:focus, .form-control:focus, .form-select:focus {
    border-color: #8899b3 !important;
    box-shadow: 0 0 0 .25rem rgba(136, 153, 179, 0.25);
    color: var(--dat-text-color-dark-blue);

}

.invalid, .valid {
    position: relative;
}

.invalid input, .invalid select, .invalid textarea {
    border-color: #a94442;
    padding-left: 40px !important;
}

.valid input, .valid select, .valid textarea {
    border-color: #42a948;
    padding-left: 40px !important;

}


.invalid::before, .valid::before {
    height: 42px;
    width: 1.5em;
    display: inline-block;
    position: absolute;
    font: normal normal normal 14px / 1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    top: 32px;
    z-index: 1;
    color: var(--dat-color-white);
    line-height: 35px;
    text-align: center;
    font-size: 24px;
}

.invalid::before {
    content: "\D7";
    background: #a94442;

}

.valid::before {
    content: "\2713";
    background: #42a948;

}

/* END INPUTS */

/* ICONS TAG */

i {
    color: var(--dat-main-color-light-blue);
    font-size: 16px;
}

i:hover {
    color: var(--dat-main-color-dark-blue);
}

/* END ICONS TAG */

/*Category Preview */
.cs-categoryPreview .cs-categoryName, .cs-categoryPreview .cs-categoryName a {
    -webkit-transform: none;
    transform: none;
    left: auto;
    min-width: 100%;
    position: relative;
    font-size: 1.1rem;
    text-align: left;

}

.cs-categoryPreview .cs-categoryName:is(+ .cs-categoryPicture:hover):hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
    transition: all 0.2s ease-in;
}

/*END Category Preview */

/* UI WIDGET */

.ui-widget-content {
    color: var(--dat-text-color-dark-blue) !important;
    font-size: var(--dat-font-size) !important;
}

/* END UI WIDGET */


.full-width {
    width: 100% !important;
}


.cs-secondInfoBox {
    color: var(--dat-main-color-dark-blue);
}

/* SCROLLUP BUTTON AND SCROLLBAR */
.cs-scrollup {
    border: 1px solid var(--dat-main-color-dark-blue);
    color: var(--dat-main-color-dark-blue);
    padding: .75rem;
    line-height: 1;
    font-size: 1.5rem;
    width: auto;
    height: auto;
    background: var(--dat-color-white);
    top: auto !important;
    bottom: 50px;
    right: 50px;
}

.cs-scrollup .cs-svgIcon {
    width: auto !important;
    height: auto !important;
    font: normal normal normal 14px / 1 FontAwesome;
    font-size: inherit;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: var(--dat-main-color-dark-blue);
}

.cs-backToShopping a {
    text-align: center;
}

/*END SCROLLUP BUTTON AND SCROLLBAR */

/* LOGINPAGE */
body.cs-loginpagebody{
  background: var(--dat-color-grey-2);
}

body.cs-loginpagebody .cs-header{
  display: none;
  width: 100% !important;
  height: 50px;
  background: var(--dat-main-color-dark-blue);
  position: fixed;
  top: 0;
  left: 0;
  text-align: unset;
}



body.cs-loginpagebody .cs-header .cs-topPages .cs-svgIcon path {
    fill: var(--dat-text-color-header-hover);
    top: 3px !important;

}

body.cs-loginpagebody .cs-header .cs-topPages > ul > li a:hover {
    color: var(--dat-text-color-white);

}

body.cs-loginpagebody .cs-header .cs-topPages > ul > li a:hover .cs-svgIcon path {
    fill: var(--dat-text-color-white);

}

body.cs-loginpagebody .cs-header .cs-topPages > ul > li a, a.selector_lang_link  {
    color: var(--dat-text-color-header-hover);
    font-weight: 600;
    font-size: var(--dat-font-size);
    line-height: var(--dat-font-line-height);

}

body.cs-loginpagebody .login-action-buttons{
  display: inline-flex;
}


body.cs-loginpagebody .cs-footerCopyright{
    margin-top: 0;
    display: inline-flex;
}

body.cs-loginpagebody .cs-footerCopyright ul {
   flex-direction: column; 
}

body .cs-login .cs-login-header{
  height: 82px;
  background: var(--dat-main-color-dark-blue);
  color: var(--dat-text-color-white) !important;
  display: inline-flex;
  width: 100%;
  justify-content: space-between;
  padding: 0 15px;
  align-items: end;
  padding-bottom: 8px;
}


body .cs-login .cs-login-header h1, 
body .cs-login .cs-login-header h2, 
body .cs-login .cs-login-header h3, 
body .cs-login .cs-login-header h4, 
body .cs-login .cs-login-header h5{
  color: var(--dat-text-color-white) !important;
}    

body .cs-login .img-logo-login{
   max-width: 60px;
    display: block;
    position: relative;
    top: 45px; 
}


body .cs-login{
   min-height: 400px; 
  background: #E4E7EB;
   min-width: 540px;
}

body .cs-login .login-box-footer{
   display: flex;
    justify-content: space-between; 
  align-items: center;
  padding-bottom: 20px;
}

body .cs-login .login-box-footer .cs-submit{
  margin-right: 10px;
}

body .cs-login .login-box-footer .cs-submit input{
  min-width: 134px;
}

body .cs-login .cs-form{
  padding: 0 1.5rem;
}

body .cs-login .cs-form input:not(.cs-button1, .cs-button2, .cs-button3){
  background: var(--dat-text-color-white) !important;
  border-color: var(--dat-text-color-white);
}

body .cs-login .cs-form .cs-formRow .cs-formRow-column {
   width: 70%; 
}

body .cs-login .cs-form .cs-dsBox{
   font-size: 14px; 
  margin: 1em 0.3em;
}

body .cs-login .cs-form .cs-forgotPassword{
  font-size: 14px;
}


/* END LOGINPAGE */

.grid{
   display: inline-grid; 
}

.grid-columns-2{
   grid-template-columns: 60% 40%; 
}

.cs-startTextBox{
 background: var(--dat-text-color-white); 
}

.grey-box{
   background: var(--dat-color-grey); 
}

.block_startpage{
  position: relative;
  height: 463px;
}



.block_startpage.second_block{
   /* VARIANT FOR SMALL SCREEN height: 560px; */
  height: 700px;
}

.block_startpage h1, 
.block_startpage h2,
.block_startpage h3,
.block_startpage h4,
.block_startpage h5{
   margin-bottom: 10px;
}

.block_startpage.first_block h2{
   font-size: 39px !important; 
}

.block_startpage .cs-button3{
  margin-top: 30px;
  line-height: 16px;
}

.block_startpage.grey-box{
  padding-right:0;
  background: var(--dat-color-grey);
}

.block_startpage .grid-columns-2{
  padding: 39px 0;
  height: 100%;
}

.block_startpage.first_block{
  height: 600px;
}


.block_startpage.first_block .grid-columns-2{
   grid-template-columns: 50% 50%; 
  align-content: center;
}

.block_startpage .grid-columns-2 .column-left{
    margin: auto 60px;

  padding: 20px 100px;
}

.block_startpage.second_block .grid-columns-2 .column-left{
  padding: 20px 11em;
  margin: auto 60px;
}

.block_startpage.first_block .grid-columns-2 .column-left{
  padding: 20px;
  padding-left: 11em;
}

.block_startpage.first_block .grid-columns-2 .column-right{
    padding: 20px 100px;
      white-space: break-spaces;
    /*margin: auto 60px; */

}


.block_startpage .grid-columns-2 img{
  height: 100%;
  object-fit: cover;
}
article.cs-categoryPreview {
  width: calc(100% / 2 - 2em) !important;
}

.cs-header-category{
  margin: 4rem 0 2rem 0;
  font-size: 1.7rem !important;
}


.category-startpage-container{
    max-width: 84em;
 }

.category-startpage-container .cs-subtitle{
  margin-bottom: 3em;
  text-align:left;
}

footer .cs-footerBoxContent input{
   background: transparent; 
   color: var(--dat-color-white);
}


footer .cs-footerBoxContent input::placeholder{
   color: var(--dat-color-white); 
}

footer .cs-footerBoxContent input:focus{
   background: transparent; 
     color: var(--dat-color-white);

}

footer .cs-footerBoxContent .cs-button3{
   line-height: 16px; 
}

footer .cs-footerBox{
   width: 50%; 
}

footer .cs-footerTop{
   justify-content: space-between; 
}

.cs-footerBoxHeader{
   font-weight: 700 !important; 
   font-size: 1.3rem !important;
}


.startpage_banner_custom .nivo-main-image{
       width: calc(100% + 164px) !important;
    left: -166px; 
    position: relative;
  display: block;
  max-height: inherit;
}

.startpage_banner_custom .nivo-main-image img{
    width: 100%;
    max-height: inherit;
    object-fit: cover;
    object-position: left top;
}


.startpage_banner_custom .nivo-caption{
  display: block !important;
  position: relative !important;
  
  font-family: var(--base-font-family) !important;
    font-weight: bold;
    opacity: 1;
    max-width: 100%;
    margin: 0 !important;
    z-index: 1;
  /*
   background:linear-gradient(to right,#e9ecef 60% ,rgba(255,255,255, 0.6));
  */
    background: var(--dat-color-grey);
    left: 0;
    text-align: center;
  /*clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);*/
  clip-path: polygon(0% 0%, 82% 0, 100% 50%, 82% 100%, 0% 100%);
  max-height: inherit;
}

.startpage_banner_custom .nivo-caption .caption-wrapper{
      display: flex;
    flex-direction: column;
    justify-content: center;
  text-align:left;
    height: 100%;
  color: var(--dat-main-color-dark-blue);
  max-height: inherit;
}

.cs-listPager{
  display: none;
}

.info-art-box{
  color: var(--dat-main-color-dark-blue) !important;
  justify-content: space-between;
  padding: 0 3px;
}

.info-art-box a, .info-art-box .priceBox .price span, article.cs-articlePreviewSmall .cs-articlePreviewSmallDescriptionBox a{
   color: var(--dat-main-color-dark-blue) !important; 
}

article.cs-articlePreviewSmall .cs-articlePreviewSmallDescriptionBox a{
   font-size:unset;
  font-weight:unset;
   
}

.info-art-box .priceBox{
   text-align: end; 
}

.info-art-box .priceBox .priceRow {
   float: unset !important; 
}

.info-art-box-details{
  font-size: 0.7rem;
  padding: 0 3px;
}

.info-art-box-details .cs-actionButton, article.cs-articlePreviewSmall .cs-actionButton{
   font-size: 0.9rem; 
    margin-top: 30px;
}

.info-art-box-details .cs-actionButton a:after, article.cs-articlePreviewSmall .cs-actionButton a:after{
   content: "";
   width: 7px;
  height: 7px;
    border: solid var(--dat-link-color);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 1px;
    transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  position: relative;
  left: 5px;
  top: -1px;
}

.info-art-box-details .cs-actionButton a:hover:after, article.cs-articlePreviewSmall .cs-actionButton a:hover:after{
  border-color: var(--dat-link-hover-color);
}

.cs-articlePreview{
   max-height: 400px; 
}

article.cs-articlePreview .pictureContainer {
  /* min-height: 268px !important; 
  min-height: unset;
  */
}

article.cs-articlePreview .pictureContainer a {
    border: 2px solid #97989a;
}


article.cs-articlePreview .pictureContainer a img{
    /*height: 268px;*/
    object-fit: contain;
}

article.cs-articlePreview .pictureContainer a img.no-image-artikel{
    object-fit: cover;
}

.cs-category article.cs-articlePreview{
  margin-bottom: 50px;
  max-height: 600px;
}

.cs-category .categoryHeader{
   font-size: 1.5rem !important; 
}

h3.cs-siteHeading.header_latest_artickel{
   text-align: left; 
  text-transform: unset;
}

h3.cs-siteHeading.header_latest_artickel:before{
   content: unset; 
}

.cs-siteHeading.header_latest_artickel span{
  padding: unset;
  font-size: 1.5rem !important;
}

.cs-category header .cs-headerContent:after{
    content: "";
    width: 100%;
    background: #E5E5E5;
  content: "";
    height: 120px;
    top: -49px;
    display: block;
    position: relative;
}


.social-media-links {
  font-size: 1.75rem;
  margin-top: 50px;
}

.social-media-links a{
  font-size: 1.75rem;
  margin: .25rem 1.5rem .25rem 0
}

.social-media-links .cs-svgIcon {
  width: 1em;
  height: 1em;
}

.social-media-links .cs-svgIcon path {
  fill: #6f96c2;
}

.social-media-links .cs-svgIcon:hover path {
  fill: var(--dat-color-white);
}

.cs-button3.button-in-banner{
   min-width: 140px;
    width: 140px;
  line-height: 16px;
}

.newsletter-abon input, .newsletter-abon input[type="email"]{
   padding: 0.5em !important; 
}

 .cs-start .cs-categoryList{
   /*justify-content: center; */
   width: 100%;
}

.cs-newCustomer {
   margin-top: 100px; 
}

.cs-newCustomer, .cs-box{
   margin-top: 60px; 
}

.cs-form .cs-formRow span.label{
   position: relative;
  left: 0;
}

.cs-category .cs-box{
   margin-top: 0; 
}

.cs-detail .cs-box{
   margin-top: 90px; 
}

.cs-articleAmountBox input[type="number"]{
  padding: 0.5em !important;
}


.cs-articleDetail .basketBlock .cs-articleAmount{
   align-items: baseline; 
}

.cs-articlePictureBox{
   border: 2px solid #97989a; 
}

.cs-articlePictureBox .cs-addPicBox .cs-galleryImageBox{
   margin: 1em 0 0 0;
  border: 2px solid #97989A;
  border-left: 0;
  border-bottom: 0;
}

.cs-articleDetail .cs-articleName {
   font-weight: bold; 
}

ul.horizontal{
  display: inline-flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
}

ul.horizontal li:after, ul.list-footer-info li:after{
   content: "|";
   height: inherit;
   color: var(--dat-text-color-light-blue);
   left: 7px;
    position: relative;
  
}

ul.horizontal li:last-child:after, ul.list-footer-info li:last-child:after{
   content: "";
  
}


.cs-footerRow.bottom{
   background: #E4E7EB; 
  height: 45px;
}

.cs-footerRow.bottom .cs-footerInner{
   height: inherit; 
}

.cs-footerRow.bottom .cs-footerBoxContent{
   display: flex;
  width: 100%;
  justify-content: flex-end;
  height: inherit;
}

footer .cs-footerTop{
   padding: 40px 0 60px 0px; 
}

.text-in-banner{
   font-size: var(--dat-text-banner-font-size);
}

.text-in-banner.header{
   font-size: var(--dat-text-banner-font-size); 
   font-weight: normal;
}


.text-in-banner.content{
   font-size: var(--dat-text-banner-content-font-size);
   margin-bottom: 55px;
}


.cs-addSitesBox h1 {
   padding: 20px 0; 
}

.full-width-block{
   width: 100%; 
}

.startpage_banner_custom{
      background-color: var(--dat-color-grey);
    /*background-image: url("/user_html/1721140897/pix/user_img/images/Bannersoon.png");*/
   background-image: url("/user_html/1721140897/pix/user_img/images/last_version/Banner-Bild_1694x906px.jpg"); 
    background-repeat: no-repeat;
    height: 600px;
  background-position-x: right;
  /*background-size: 61%; */
  background-size: contain;
}

.startpage_banner_custom .grid-container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: var(--container-max-width);
  margin: auto; 
  height: 100%;
}

.startpage_banner_custom .banner-wrapper{
   width: 100%;
  display: flex;
        clip-path: polygon(0% 0%, 82% 0, 100% 50%, 82% 100%, 0% 100%);
  background-color: var(--dat-color-grey);
  align-items: center;

}


.startpage_banner_custom .banner-caption{
    font-family: var(--base-font-family) !important;
    font-weight: bold;
    color: var(--dat-main-color-dark-blue);
  

}

.startpage_banner_custom .nivo-main-image{
    width: calc(100% + 164px) !important;
    left: -166px;
    position: relative;
    display: block;
    max-height: inherit;
}

.startpage_banner_custom .nivo-main-image img{
    width: 100%;
    max-height: inherit;
    object-fit: cover;
    object-position: left top;
}

.cs-footerBoxContent{
   font-size: 0.9rem; 
}

.category-image-back{
   background-repeat: no-repeat;
   background-size: 100%;
   
}
.block_startpage.second_block h2{
    font-size: 2rem !important;
}
    .block_startpage.second_block img{
     position: absolute;
    /* max-width: 50%; */
    right: 0;
    height: 100%;
    max-width: 40%;  
      top: 0;
      padding: 60px 0;
      object-fit: cover;
  }

    .datenschutz-container h2, .datenschutz-container h3, .datenschutz-container h4, .datenschutz-container h5,
    .impressum-container h2, .impressum-container h3, .impressum-container h4, .impressum-container h5,
    .agb-container h2, .agb-container h3, .agb-container h4, .agb-container h5
  {
        margin-bottom: 20px;
    }


.cs-headerContent.checkout-header{
   margin: 0 auto;
    padding: 20px 0;
    margin-bottom: 10px; 
}

.checkout-header .cs-container {
   width: 100%; 
   margin: 0 auto;
   align-items: center;
}

.checkout-header .cs-logo img{
       position: relative;
    /*height: 126px;*/
  height: 126px;

    width: 80px;
    z-index: 100;
    max-width: 80px; 
}

header #infoblock{
  width: 100%;
}

header #infoblock .cs-shortnav{
   justify-items: flex-end; 
}

article.cs-articlePreview .artnamBox {
  margin-bottom: 10px;
}

.checkout-button-submit{
   width: 100% !important; 
}

.artnamBox a,  .priceBox .priceRow .price span {
      font-size: 1.2rem;
      
}

    .info-art-box-details, .cs-lagerBox {
        font-size: 1rem !important;
    }
.cs-mainContent:has(.container-account){
   margin-top: 30px; 
}

.cs-mainContent:has(.cs-versandKostenRechner){
   margin-top: 60px; 
}

.cs-miniButtons ul{
   gap: 10px; 
}

.cs-articleDetail .cs-articlePriceInfo{
   text-decoration: none;
}
.cs-articleDetail .cs-articlePriceInfo a{
   text-decoration: underline;
}

.cs-searchBlock{
   border:1px solid var(--dat-color-grey-2); 
}

.cs-miniwk span, .cs-miniwk a {
   color:  var(--dat-main-color-dark-blue);
}


#liveSearchResult ul.cs-livesearch li {
    background: var(--dat-main-color-dark-blue);
    color: #fff;
    border: 1px solid var(--dat-color-grey-2);
}

#liveSearchResult ul.cs-livesearch li:hover{
   background: var(--dat-main-color-light-blue) !important; 
}

#liveSearchResult .cs-allArticles:hover {
  background: var(--dat-main-color-dark-blue) !important;
  color: #fff !important;
}


#liveSearchResult .cs-allArticles:hover  a{
  color: #fff !important;
  transition: color .75s ease-in-out;
}

.cs-checkout .btn-secondary:hover a{
   color: var(--dat-main-color-light-blue) !important; 
}

.box-1.auflagenermittlung{

  margin-top: 80px;
}

.cs-searchBar .cs-searchBlock {
   background: var(--dat-main-color-dark-blue); 
}

.container-information-article{
       position: relative;
    display: flex
;
    flex-direction: column; 
}

.artnamBox h3 {
  -webkit-line-clamp: 2;
    min-height: 48px; 
}

#cookieAlertWrapper {
z-index:20070 !important;
}

.cs-detail #tabs{
 margin-top: unset; 
}

#leadprintbutton{
   padding: 4px 15px; 
}