/* XXX> cur 2026-09-24: (Nachmarkierung) Ganzes File: Custom Styles */

/* This file can be used for custom styling */

:root {
  --black: #000000;
  --white: #FFFFFF;
  --grey-dark: #89A1C0;
  --grey: #E7ECF2;
  --grey-light: #F3F6F9;
  --accent-rotation: 90deg;
  
  --accent-color-light: color-mix(in srgb, var(--accent-color), #FFFFFF 93%);
  --main-color-light: color-mix(in srgb, var(--main-color), #FFFFFF 93%);
  
  --main-accent-gradient: linear-gradient(var(--accent-rotation), var(--main-color) 0%, var(--accent-color) 100%);
  --accent-main-gradient: linear-gradient(var(--accent-rotation), var(--accent-color) 0%, var(--main-color) 100%);
  --accent-light-gradient: linear-gradient(var(--accent-rotation), var(--accent-color) 0%, var(--accent-color-light) 100%);
  
  --main-transparent-gradient-top: linear-gradient(to top, var(--main-color) 10%, transparent 70%);
  
  --accent-pattern: linear-gradient(
                      110deg,
                      var(--accent-color) 0%,
                      var(--accent-color) 30%,
                      color-mix(in srgb, var(--accent-color), var(--white) 20%) 30.1%,
                      color-mix(in srgb, var(--accent-color), var(--white) 20%) 40%,
                      transparent 40.1%
                    ),
                    linear-gradient(
                      70deg,
                      color-mix(in srgb, var(--accent-color), var(--white) 50%) 0%,
                      color-mix(in srgb, var(--accent-color), var(--white) 50%) 40%,
                      var(--white) 40.1%,
                      var(--white) 100%
                    );
  --accent-light-pattern: linear-gradient(
                            110deg,
                            color-mix(in srgb, var(--accent-color), var(--white) 40%) 0%,
                            color-mix(in srgb, var(--accent-color), var(--white) 40%) 30%,
                            color-mix(in srgb, var(--accent-color), var(--white) 60%) 30.1%,
                            color-mix(in srgb, var(--accent-color), var(--white) 60%) 40%,
                            transparent 40.1%
                          ),
                          linear-gradient(
                                  70deg,
                                  color-mix(in srgb, var(--accent-color), var(--white) 80%) 0%,
                                  color-mix(in srgb, var(--accent-color), var(--white) 80%) 40%,
                                  var(--white) 40.1%,
                                  var(--white) 100%
                          );
  
  --main-pattern: linear-gradient(
                      110deg,
                      var(--main-color) 0%,
                      var(--main-color) 30%,
                      color-mix(in srgb, var(--main-color), var(--white) 20%) 30.1%,
                      color-mix(in srgb, var(--main-color), var(--white) 20%) 40%,
                      transparent 40.1%
                    ),
                    linear-gradient(
                      70deg,
                      color-mix(in srgb, var(--main-color), var(--white) 50%) 0%,
                      color-mix(in srgb, var(--main-color), var(--white) 50%) 40%,
                      var(--white) 40.1%,
                      var(--white) 100%
                    );
  --main-light-pattern: linear-gradient(
                                  110deg,
                                  color-mix(in srgb, var(--main-color), var(--white) 40%) 0%,
                                  color-mix(in srgb, var(--main-color), var(--white) 40%) 30%,
                                  color-mix(in srgb, var(--main-color), var(--white) 60%) 30.1%,
                                  color-mix(in srgb, var(--main-color), var(--white) 60%) 40%,
                                  transparent 40.1%
                          ),
                          linear-gradient(
                                  70deg,
                                  color-mix(in srgb, var(--main-color), var(--white) 80%) 0%,
                                  color-mix(in srgb, var(--main-color), var(--white) 80%) 40%,
                                  var(--white) 40.1%,
                                  var(--white) 100%
                          );
  
  --grey-pattern: linear-gradient(
                    110deg,
                    var(--grey-dark) 0%,
                    var(--grey-dark) 30%,
                    color-mix(in srgb, var(--grey-dark), var(--white) 20%) 30.1%,
                    color-mix(in srgb, var(--grey-dark), var(--white) 20%) 40%,
                    transparent 40.1%
                  ),
                  linear-gradient(
                    70deg,
                    color-mix(in srgb, var(--grey-dark), var(--white) 50%) 0%,
                    color-mix(in srgb, var(--grey-dark), var(--white) 50%) 40%,
                    var(--white) 40.1%,
                    var(--white) 100%
                  );
  
  @media (max-width: 600px) {
    --accent-pattern: linear-gradient(
                              110deg,
                              var(--accent-color) 0%,
                              var(--accent-color) 60%,
                              color-mix(in srgb, var(--accent-color), var(--white) 20%) 60.1%,
                              color-mix(in srgb, var(--accent-color), var(--white) 20%) 70%,
                              transparent 70.1%
                      ),
                      linear-gradient(
                              70deg,
                              color-mix(in srgb, var(--accent-color), var(--white) 50%) 0%,
                              color-mix(in srgb, var(--accent-color), var(--white) 50%) 70%,
                              var(--white) 70.1%,
                              var(--white) 100%
    );
    --accent-light-pattern: linear-gradient(
                                    110deg,
                                    color-mix(in srgb, var(--accent-color), var(--white) 40%) 0%,
                                    color-mix(in srgb, var(--accent-color), var(--white) 40%) 60%,
                                    color-mix(in srgb, var(--accent-color), var(--white) 60%) 60.1%,
                                    color-mix(in srgb, var(--accent-color), var(--white) 60%) 70%,
                                    transparent 70.1%
                            ),
                            linear-gradient(
                                    70deg,
                                    color-mix(in srgb, var(--accent-color), var(--white) 80%) 0%,
                                    color-mix(in srgb, var(--accent-color), var(--white) 80%) 70%,
                                    var(--white) 70.1%,
                                    var(--white) 100%
    );
    
    --main-pattern: linear-gradient(
                            110deg,
                            var(--main-color) 0%,
                            var(--main-color) 60%,
                            color-mix(in srgb, var(--main-color), var(--white) 20%) 60.1%,
                            color-mix(in srgb, var(--main-color), var(--white) 20%) 70%,
                            transparent 70.1%
                    ),
                    linear-gradient(
                            70deg,
                            color-mix(in srgb, var(--main-color), var(--white) 50%) 0%,
                            color-mix(in srgb, var(--main-color), var(--white) 50%) 70%,
                            var(--white) 70.1%,
                            var(--white) 100%
    );
    --main-light-pattern: linear-gradient(
                                  110deg,
                                  color-mix(in srgb, var(--main-color), var(--white) 40%) 0%,
                                  color-mix(in srgb, var(--main-color), var(--white) 40%) 60%,
                                  color-mix(in srgb, var(--main-color), var(--white) 60%) 60.1%,
                                  color-mix(in srgb, var(--main-color), var(--white) 60%) 70%,
                                  transparent 70.1%
                          ),
                          linear-gradient(
                                  70deg,
                                  color-mix(in srgb, var(--main-color), var(--white) 80%) 0%,
                                  color-mix(in srgb, var(--main-color), var(--white) 80%) 70%,
                                  var(--white) 70.1%,
                                  var(--white) 100%
    );
    
    --grey-pattern: linear-gradient(
                            110deg,
                            var(--grey-dark) 0%,
                            var(--grey-dark) 60%,
                            color-mix(in srgb, var(--grey-dark), var(--white) 20%) 60.1%,
                            color-mix(in srgb, var(--grey-dark), var(--white) 20%) 70%,
                            transparent 70.1%
                    ),
                    linear-gradient(
                            70deg,
                            color-mix(in srgb, var(--grey-dark), var(--white) 50%) 0%,
                            color-mix(in srgb, var(--grey-dark), var(--white) 50%) 70%,
                            var(--white) 70.1%,
                            var(--white) 100%
    );
  }
  
  --font: Inter;
  --container-width: 1600px;
  --container-padding: 40px;
  --container-padding-lg: 40px;
  --container-padding-sm: 20px;
  --cms-padding: 30px;
  
  --product-img-ratio: 1280 / 720;
  --header-height: 95px;
  --mobile-header-height: 70px;
  --default-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);

  @media (max-width: 1199px) {
    --header-height: var(--mobile-header-height);
    --container-padding: var(--container-padding-sm);
    --cms-padding: 20px;
  }
}
.container,
.container-fluid {
  width: 100%;
  max-width: var(--container-width);
  padding-inline: var(--container-padding);
}

/* Icons */
@font-face {
  font-family: 'Amsler-Icons';
  src:
    url('resources/fonts/icons/Amsler-Icons.ttf?xo29hy') format('truetype'),
    url('resources/fonts/icons/Amsler-Icons.woff?xo29hy') format('woff'),
    url('resources/fonts/icons/Amsler-Icons.svg?xo29hy#Amsler-Icons') format('svg');
}

.accent-pattern-bg {
  background: var(--accent-pattern) !important;;
}
.accent-light-pattern-bg {
  background: var(--accent-light-pattern) !important;;
}
.grey-pattern-bg {
  background: var(--grey-pattern) !important;;
}
.main-pattern-bg {
  background: var(--main-pattern) !important;
}
.main-light-pattern-bg {
  background: var(--main-light-pattern) !important;
}


.bi-bell:before,
.bi-cart:before,
.bi-cart2:before,
.bi-cart-fill:before,
.bi-bag:before,
.bi-envelope:before,
.bi-envelope-fill:before,
.bi-geo:before,
.bi-bicycle:before,
.bi-moto:before,
.bi-geo-alt:before,
.bi-globe:before,
.bi-heart:before,
.bi-heart-fill:before,
.bi-person:before,
.bi-person-fill:before,
.bi-search:before,
.bi-telephone:before,
.bi-telephone-fill:before {
  font-family: 'Amsler-Icons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bi-bicycle:before {
  content: "\e90a";
}
.bi-moto:before {
  content: "\e909";
}

.bi-bell:before {
  content: "\e900";
}

.bi-cart:before,
.bi-cart2:before,
.bi-cart-fill:before,
.bi-bag:before {
  content: "\e901";
}
.bi-envelope:before,
.bi-envelope-fill:before {
  content: "\e902";
}
.bi-geo:before,
.bi-geo-alt:before {
  content: "\e903";
}
.bi-globe:before {
  content: "\e904";
}
.bi-heart:before,
.bi-heart-fill:before {
  content: "\e905";
}
.bi-person:before,
.bi-person-fill:before {
  content: "\e906";
}
.bi-search:before {
  content: "\e907" !important;
}
.bi-telephone:before,
.bi-telephone-fill:before {
  content: "\e908";
}
.bi-chevron-left:before {
  content: "\f12f";
}
.bi-chevron-right:before {
  content: "\f138";
}


/* Schriften */
h1.content,
.heading-1,
.pps-heading-1 {
  @media (min-width: 768px) {
    font-size: 40px;
  }
  
  > a {
    font-size: inherit !important;
  }
}
h2.content,
.heading-2,
.pps-heading-2 {
  @media (min-width: 768px) {
    font-size: 36px;  
  }
}
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: var(--font);
  font-weight: 700;
}

h1.content,
h2.content,
.pps-heading-1,
.pps-heading-2 {
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
  hyphens: auto;
  
    &:not(.bp) {
        &:before {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 4px;
            border-radius: var(--border-radius-content);
            background-color: var(--accent-color);
        }
    }
}
h2.content,
.pps-heading-2 {
  margin-bottom: 20px;
}
p,
dd,
dt,
.pps-heading-1,
.pps-heading-2,
.pps-heading-3,
.pps-heading-4,
.pps-heading-5 {
  line-height: 1.5em;
}
/*
.pps-heading-5:not(.preisanzeige) span,
span.mwst_info {
  display: block;
  color: var(--grey-dark);
  line-height: 1.5em;
  font-size: 16px;
}
*/
.pps-heading-5.preisanzeige {
  margin-bottom: 0;
}

.as_link {
  &:has(.bi) {
    display: inline-flex;
    gap: 5px;
  }
}
i {
  font-size: 14px;
  line-height: 1.5em;
}
.cell:not(.sortimentsinfo) {
  ul {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    
    > li {
      flex: 1 1 100%;
    }
  }
}
li {
  line-height: 1.5em;
  
  > a {
    display: inline;
  }
}


/* Scrollbars */
/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--main-color) var(--grey-light);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: var(--grey-light);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
  border-radius: 20px;
}


/* Allgemein */
.kat_actions,
.kat_actions_filter {
  padding: 0;
  box-shadow: none;
}
hr {
    border-color: var(--grey);
    border-width: 2px;
}
.contenthaupt hr,
.content hr {
    height: 2px;
    background-color: var(--grey);
}
.product_content_sub .btn:not(.touchspin-spinner) {
    margin-bottom: 0;
}


/* Mobile Hauptnavigation */
@media (min-width: 768px) AND (max-width: 1199px) {
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse.collapse:not(.in) {
    display: none !important;
  }
}
header.hauptnav_td .dl-menuwrapper.open {
    z-index: 10000;
    top: var(--mobile-header-height) !important;

    .dl-menu {
        top: 0px !important;
    }
}

/* Hauptnavigation */
body:has(.maintenance) {
    .maintenance {
        position: fixed;
        z-index: 1;
        top: auto;
        bottom: 0;
        padding-block: 10px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 700;
    }
}
div.header_subnav {
  &:not(:has(.ibox)) {
    display: none;
  }

  .container {
      position: absolute;
      top: 0;

      .language_container {
          display: flex;
          gap: 15px;
          margin-right: -45px;
      }
  }
}
header.hauptnav_td {
  top: 0 !important;

  @media (max-width: 767px) {
    z-index: 9999;
    position: sticky;
    top: 0;
  }
    
  @media (max-width: 1199px) {
    min-height: var(--mobile-header-height);
      
    &:not(:has(> .uvp_toggle_wrapper)) {
      margin-bottom: 60px !important;
    }
    
    .visible-xs {
      display: block !important;
    }
    .hidden-xs {
      display: none !important;
    }
    #navbar-mobile {
        padding-inline: 0;

        > .navbar-header {
            position: sticky;
            min-height: var(--mobile-header-height);
            margin-inline: 0;

            > .navbar-header-flex {
                min-height: inherit;
                column-gap: var(--container-padding);

                > .left {
                    .navbar-brand > img {
                        padding-inline: var(--container-padding) 0;
                    }
                }
                > .right {
                    display: flex;
                    gap: 3px;
                    margin-left: auto;

                    .navbar-toggle {
                        color: var(--main-color);
                        &.to_account {
                            font-size: 18px;
                        }
                    }
                }
                > .dl-trigger {
                    display: inline-flex;
                    flex-direction: column;
                    flex-wrap: wrap;
                    justify-content: center;
                    align-content: center;
                    align-items: flex-end;
                    flex: 0 0 40px;
                    aspect-ratio: 1 / 1;
                    padding: 0;
                    margin-right: var(--container-padding);
                    margin-left: -10px;
                    border-radius: 50%;
                    background-color: var(--accent-color-light);

                    &.dl-active {
                        .icon-bar {
                            margin-top: 4px;
                            border-color: var(--accent-color);

                            + .icon-bar {
                                margin-bottom: -2px;
                                margin-top: 6px;
                            }
                        }
                    }

                    .icon-bar {
                        width: 20px;
                        border-width: 2px;
                        border-color: var(--main-color);

                        + .icon-bar {
                            margin-top: 4px;
                        }
                    }
                }
            }
        }
    }
    .dl-menuwrapper {
      > ul.dl-menu {
        top: var(--mobile-header-height);
        padding-bottom: var(--mobile-header-height);
        
        > li {
          &:first-child {
            margin-top: 0;
          }
        }
        
        li {
          gap: 0;

          .dl-submenu {
            margin-bottom: 5px;
            flex: none;
          }
          
          &.dl-back {
            &:after {
              font-weight: 400;
              font-size: 14px;
            }
            > a {
              padding-left: 30px;
              font-size: 14px;
            }
          }
          
          button.sub,
          a {
            &:not(.link-sprache) {
              border-top: 1px solid var(--grey);
            }
            
            &.sub {
              padding-inline: 15px;
              width: 46px;
              > .bi:before {
                transform: none;
              }
            }
          }
          a.sub {
            flex: 0 1 auto;
            height: auto;
            
            &:before {
              content: '\f282';
              font-family: bootstrap-icons;
              font-weight: 400;
            }
          }
        }
        li:not(#box_content_hauptnav_mobile) {
            li.dl-back {
                border-bottom: 1px solid var(--grey);
            }
            li:not(.dl-back) {
                > a {
                    background: var(--grey-light);
                    color: var(--main-color);
                    border-top: none !important;
                    margin: 5px 15px;
                    padding: 10px 10px;
                    border-radius: var(--border-radius-content);
                    transition: background ease-in-out .2s;

                    &:hover,
                    &:hover + a {
                        background: var(--grey);
                    }
                }
                > a:not(.sub)[data-has-child-categories="true"] {
                    margin-right: 0;
                    border-bottom-right-radius: 0;
                    border-top-right-radius: 0;
                }
                > a.sub {
                    margin-left: 0;
                    border-bottom-left-radius: 0;
                    border-top-left-radius: 0;
                }
                &.dl-kat-titel {
                    color: var(--main-color);
                    padding: 5px 15px;
                }
                &.dl-alle-anzeigen > a {
                    margin-block: 0;
                    padding: 0;
                    font-weight: 500;
                    background: transparent;
                    transition: color ease-in-out .2s;

                    &:hover {
                        color: var(--accent-color);
                    }
                }
            }
        }
      }
      .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0;
      }
      #box_content_hauptnav_mobile {
        margin: 0;
        padding-block: 0;

        > a {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-top: 0;

          &:not(:first-child) {
            border-top: 1px solid var(--grey);
          }
          &:first-child {
              margin-top: 0;
          }

          &:has(+.sub.dl-static) {
            &:after {
              transition: all ease-out .3s;
              display: block;
              content: "\f282";
              font-family: bootstrap-icons;
              font-weight: 400;
            }
            &.active {
              color: var(--accent-color);

              + .sub.dl-static {
                display: block;
                opacity: 1
              }
              &:after {
                rotate: 180deg;
              }
            }
          }
        }
        > .sub.dl-static,
        > .title {
          flex: 1 1 100%;
          margin: 0;
          
          &.sub.dl-static {
            transition: all ease-out .3s;
            display: none;
            opacity: 0;
            padding: 0;
            margin-bottom: 10px;
            
            > a,
            > .title {
              padding-block: 8px;
              font-size: 14px;
              font-weight: 400; 
              border: 0;
            }
            
            &:hover {
              color: inherit;
            }
          }
        }
      }
    }
  }
  .container_hauptnavigation {
    min-height: var(--header-height);
    gap: var(--container-padding);
    padding-block: var(--container-padding-sm);
    
    @media (max-width: 1399px) {
      gap: var(--container-padding-sm);
    }
    
    .hauptnavigation_bottom {
      .nav_slidemenu {
        &:not(:last-child) {
          margin-right: calc(var(--container-padding-sm) - 5px);
        }
        .sf-menu,
        .sf-megamenu {
          z-index: 9999;
          display: inline-flex;
          flex-wrap: wrap;
          column-gap: calc(var(--container-padding-sm) - 5px);
          
          /* Hovered Element extenden */
          &.sf-megamenu {
            > li {
              &.sfHover {
                &:after {
                  content: '';
                  width: 100%;
                  height: 30px;
                  position: absolute;
                  left: 0;
                  bottom: 0;
                }
              }
            }
          }
          
          > li {
            > a {
              padding-inline: 5px;
              background: var(--white);
              
              @media (max-width: 1399px) {
                font-size: 15px;
              }
              
              &:before {
                transition: all ease-in-out .3s;
                pointer-events: none;
                z-index: -1;
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                translate: -50% -50%;
                width: calc(100% + var(--container-padding-sm));
                height: 4px;
                border-radius: var(--border-radius-content);
                background: var(--accent-color);
                opacity: 0;
              }
              &.kat_in_pfad,
              &.kat_aktiv,
              &.boxlink_in_path,
              &.boxlink_active,
              &:has(~ ul > li > .boxlink_active) {
                &:before {
                  opacity: 1;
                }
              }
            }
            .sf-mega {
              padding-block: var(--container-padding-sm);
              max-height: min(600px, calc(100vh - 200px));
              overflow: auto;
              border-color: var(--grey);
              
              [class*="col-"] {
                width: 100%;
                
                > .sf-mega-section {
                  > ul {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: flex-start;
                    align-content: flex-start;
                    
                    > li {
                      flex: 1 1 25%;
                      
                      > a {
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        
                        &.kat_aktiv,
                        &.kat_in_pfad,
                        &:hover {
                          img {
                            border-color: var(--accent-color);
                          }
                        }
                        
                        &:has(> img) {
                          + ul {
                            display: none;
                          }
                        }
                        
                        img {
                          transition: all ease-out .3s;
                          object-fit: cover;
                          aspect-ratio: 3/1;
                          border: 1px solid var(--grey);
                          border-radius: var(--border-radius-content);
                        }
                        .bi {
                          font-size: 18px;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
          
          &.sf-menu {
            > li {
              > a {
                &:has(~ ul > li > .boxlink_active) {
                  color: var(--accent-color);
                }
              }
              > ul {
                max-height: min(1000px, calc(100vh - 100px));
                overflow: auto;
                border-radius: var(--border-radius-content);
                
                > li {
                  &:first-child {
                    padding-top: 10px;
                  }
                  &:last-child {
                    padding-bottom: 10px;
                  }
                  > a {
                    padding-block: 8px;
                    padding-inline: var(--container-padding-sm);
                    font-size: 16px;
                    
                    @media (max-width: 1399px) {
                      padding-block: 6px;
                      padding-inline: 15px;
                      font-size: 14px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .hauptnavigation_left {
      .top_titel {
        #shoplogo[src$=".svg"] {
          @media (max-width: 1455px) {
            height: 35px; 
          }
          @media (max-width: 1399px) {
              height: 25px;
          }  
        }
      }
    }
    .hauptnavigation_right {
      flex: 0 0 auto;
      
      .top_stern {
        .toggle-switch {
          @media (max-width: 1399px) {
              display: none;
          }
        }
        .ibox {
          
          &.quicksearch_container {
            position: initial;
            
            .quicksearch_link {              
              &:not(.collapsed) {
                .bi:before {
                  color: var(--accent-color);
                }
              }
            }
          }
          
          > div.ibox_top {
            > a.ibox_top {
              transition: all ease-out .3s;
              
              [class*="bi-"]:before {
                transition: all ease-out .3s;
                font-size: 22px;
              }
            }
          }
        }
      }
    }
  }
  #login_box_ibox_content {
      z-index: 999;
  }
}


/* Sprachwahl */
div.ibox.language_container {
  margin-left: 15px;
  
  > div.ibox_content {
    > a.ibox_content {
      border-left: 0;
      padding: 4px 8px;
      border-radius: var(--border-radius-content);
      
      &.active {
        background: var(--accent-color);
        color: var(--white);
      }
    }
  }
}


/* Quicksearch */
.hauptnav_td {
    #search-navbar-collapse-desktop {
        transition: opacity ease-out .3s;
        pointer-events: none;
        display: block !important;
        top: auto;
        bottom: 0;
        left: 50%;
        translate: -50% 100%;
        transform: none;
        box-shadow: none;
        width: calc(100vw - 15px);
        opacity: 0 !important;
        background-color: var(--main-color);

        &[aria-expanded="true"] {
            pointer-events: auto;
            opacity: 1 !important;
        }

        > form.suchformular {
            position: relative;
            max-width: var(--container-width);
            margin-inline: auto;
            padding-inline: calc(var(--container-padding) - 15px);
            height: 50px;
        }

        .input-group {
            display: flex;

            > #quicksearch_suchstring {
                transition: all ease-out .3s;
                order: 2;
                padding-inline: 0;
                height: 50px;

                &:focus-visible {
                    box-shadow: none !important;
                }
            }

            > .input-group-btn {
                width: auto;

                > .btn {
                    margin: 0;

                    > .bi {
                        &:before {
                            font-size: 16px;
                            font-weight: 700 !important;
                        }
                    }
                }
            }
        }
    }
    &:has(.vororder_active) {
        #search-navbar-collapse-desktop {
            width: 100vw;
            border-top: 1px solid #FFFFFF;
        }
    }
}

/* Autocomplete */
.autocomplete-suggestions {
  &.quicksearch_suchstring {
    width: 100% !important;
    max-width: 100% !important;
    
    .autocomplete-suggestion {
      padding-inline: var(--container-padding);
    }
  } 
}
div.autocomplete-suggestions[class*="wk_inline_add_nr"] {
    top: calc(100% - 12px) !important;
    left: 0 !important;
    right: auto !important;
    max-width: 100% !important;
    width: 100% !important;
}


/* Startseite */
@media (max-width: 1199px) {
  section:not([class*="col-"]) > .content_td > .bg_wrapper:first-child,
  section:not([class*="col-"]) > .content_td > .btn-bearbeiten:first-child + .bg_wrapper, 
  section:not([class*="col-"]) > .content_td > .splide + .bg_wrapper,
  section:not([class*="col-"]) > .content_td > .splide + .btn-bearbeiten + .bg_wrapper,
  section:not([class*="col-"]) > .content_td > .blog_detail_page > .blog_content_max {
    margin-top: -40px;
  }
}

.bg_wrapper div.stretch {
  align-items: stretch !important;
}

h2.content.start {
  z-index: 1;
  position: relative;
  margin-inline: auto;
  margin-left: max(var(--container-padding), calc((100dvw - var(--container-width) + 2 * var(--container-padding) - 15px) / 2)) !important;
  margin-bottom: 0;
  translate: 0 calc(100%);
  
  &:has(+ .startartikel),
  &:has(+ .start_kategorien_container) {
    + .start_kategorien_container {
      margin-top: calc(-2 * var(--cms-padding));
    }
    + .startartikel,
    + .start_kategorien_container .kat_content {
      padding-top: calc(2 * var(--cms-padding) + 90px);
    }
  }
}
div.startartikel,
div.optionsartikel {
  &.splide {
    > .splide__track {      
      div.artikel_box {
        max-width: 360px;
        margin-bottom: 20px;
        justify-content: flex-start;
        
        @media (max-width: 767px) {
          max-width: 260px;
        }
        
         *:focus-visible {
           outline-offset: 5px !important;
         }
      }
    }
    > .splide__arrows {
      pointer-events: none;
      position: absolute;
      left: 50%;
      top: calc(2 * var(--cms-padding) + 10px);
      translate: -50% 0;
      width: 100%;
      max-width: var(--container-width);
      padding-inline: var(--container-padding);
      display: flex;
      justify-content: flex-end;
      gap: 15px;
      
      @media (max-width: 550px) {
        gap: 5px;
      }
      
      > .splide__arrow {
        pointer-events: auto;
        position: relative;
        top: 0;
        transform: none;
        height: 48px;
        
        @media (max-width: 550px) {
          height: 36px;
          
          &:before {
            font-size: 16px;
          }
        }
      }
      
    }
  }
}
div.startartikel {
  max-width: 100%;
  padding: 0;
  margin: 0;
  margin-top: calc(-2 * var(--cms-padding));
  background-color: var(--grey-light);
  
  &.splide {
    > .splide__track {
      padding-block: 0 var(--container-padding);
      padding-inline: max(var(--container-padding), calc((100dvw - var(--container-width) + 2 * var(--container-padding) - 15px) / 2)) !important;
    }
  }
}


/* Artikelliste */
.kat_actions > .row {
  display: flex;
  align-items: center;
}
.artikelliste_mehrspaltig {
  > .row {
    margin-inline: -10px;
    
    [class*="col-"] {
      padding-inline: 10px;
      
      @media (min-width: 1200px) AND (max-width: 1399px) {
        width: 50%;
      }
    }
  }
}
#form_suchsortierung_simple {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
#form_suchsortierung_simple label {
  letter-spacing: -4px;
  font-size: 0;
  order: 2;
}
#form_suchsortierung_simple .order_sortierung {
  font-size: 20px;
  font-weight: 500;
}
#form_suchsortierung_simple .order_sortierung i:last-child {
  margin-left: -5px;
}
#form_suchsortierung_simple .order_sortierung:hover {
  cursor: pointer;
}
#form_suchsortierung_simple .order_sortierung input {
  display: none;
}
#form_suchsortierung_simple select {
  padding: 0;
  border: 0;
}
#form_suchsortierung_simple option {
  text-transform: none;
}

#form_suchsortierung_simple .order_sortierung {
  transition: transform ease-in-out .3s;
}
#form_suchsortierung_simple .order_sortierung.rotate {
  transform: rotate(180deg);
}

.order_sortierung i {
  width: 36px;
  height: 36px;
  text-align: center;
  background-color: var(--accent-color);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.artikel_box {
  transition: all ease-out .3s;
  position: relative;
  
  &:has(*:focus),
  &:hover {
    border-color: var(--accent-color-light);
  }
  
  > div.artikel_box_bild {
    div.aktion_corner,
    div.promo_corner {
      top: -10px;
      left: -10px;
      
      + div.aktion_corner {
        top: 35px;
      }
    }
    img.artikel_box_bild.artikel_box_bild_ratio  {
      /*object-fit: contain;*/
    }
    @media (max-width: 767px) {
      padding: 10px 10px 0;
    }
  }
  > div.artikel_box_content_wrapper {
    font-size: 14px;
    
    @media (max-width: 767px) {
      padding: 10px;
    }
    
    > div:not(:first-child) {
      margin-top: 10px;
    }
    
    a.content:not(.artikel_box_name):link,
    a.content:not(.artikel_box_name):visited {
      font-size: 14px;  
    }
    
    div.artikel_box_hersteller_artikel_nr {
      margin-top: 0px;
    }
    
    > div.artikel_box_nr_lager {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      gap: 5px;
      
      > div.artikel_box_nr {
        display: inline-flex;
        gap: 2px;
        color: var(--grey-light);
        font-weight: 600;
        max-width: 100%;
        
        > span {
          padding: 4px 6px;
          background-color: var(--main-color);
          border-radius: var(--border-radius-content) 0 0 var(--border-radius-content);
          flex-shrink: 0;
          max-width: 250px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
            
          &:only-of-type {
            border-radius: var(--border-radius-content)
          }
          
          > a {
            display: inline-flex;
            gap: 3px;
            font-size: 14px;
            color: var(--main-color);
            font-weight: 600;
          }
        }

        > span.artikel_box_hersteller_artikel_nr {
          flex: 1;
          background-color: var(--grey-light);
          color: var(--main-color);
          border-radius: 0 var(--border-radius-content) var(--border-radius-content) 0;
        }
        
        .bi {
          font-size: 18px;
        }
      }
      > div.artikel_box_lager {
        
      } 
    }

    > div.artikel_box_preis {
      align-content: flex-end;
      align-items: flex-end;
      gap: 0;
      padding-right: 40px;
      
      .strike_through_price,
      del {
        display: block;
      }
      
      &:has(+ .cta-buttons .anzahl_inline_wrapper) {
        padding-right: 140px;
      }
      
      @media (max-width: 767px) {
        flex-wrap: nowrap;
        padding: 0 0 45px !important;
      }
      
      > div.uvp_preis {
        &:has(+ div) {
          color: var(--grey-dark);
        }
      }
    }
    > .cta-buttons {
      pointer-events: none;
      position: absolute;
      right: 0;
      bottom: 0;
      flex-direction: column;
      justify-content: stretch;
      align-items: flex-end;
      gap: 0;
      height: 100%;
      opacity: 1;
      margin: 0 !important;
      padding: 20px;
      
      @media (max-width: 767px) {
        padding: 10px;
      }
      
      > * {
        pointer-events: auto;
      }
      
      .btn.as-icon {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-radius: 50% !important;
        width: 36px;
        aspect-ratio: 1;
        background-color: var(--accent-color);
        color: var(--white);
          
          .bi {
              &:before {
                  vertical-align: top;
              }
          }
        
        &:first-child {
          margin-bottom: auto;
        }
        &:has(.bi-heart) {
          background-color: transparent;
          color: var(--accent-color)
        }
        &:has(.bi-heart-fill) {
          background-color: var(--main-color);
          color: var(--white);
        }
        &.btn-primary {
          position: absolute;
          bottom: 20px;
          right: 20px;
          
          @media (max-width: 767px) {
            bottom: 10px;
            right: 10px;
          }
        }
      }      
    }
  }
}

/* Artikelliste einspaltig */
.artikelliste_einspaltig_content .artikel_nr_wrapper {
  display: inline-block;
}

.artikelliste_einspaltig_content .artikelliste_einspaltig_preis {
  display: inline-block;
  float: right;
  margin-top: 25px;
}

.artikelliste_einspaltig_content .lagerampel span {
    text-wrap: auto;
}

/* Aktuelles / Werbungen */
.artikelliste_mehrspaltig:has(.aktuelles_box) > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  
    &:before,
    &:after {
      display: none;
    }
}
.artikelliste_einspaltig {
  ~ .aktuelles_box {
    width: 100%;
    height: 260px;
    float: none;
  }

  div.uvp_preis {
    &:has(+ .artikelliste_preis) {
       color: var(--grey-dark);
     }
  }

  div.aktion_corner img,
  div.promo_corner img {
    max-width: 80%;
  }
}
.aktuelles_box {
    @media (max-width: 600px) {
        width: 100%;
        height: 260px;
    }
    
    > a {
        transition: all ease-out .3s;
        display: block;
        height: calc(100% - 20px);
        border-radius: var(--border-radius-content);
        outline: 2px solid transparent !important;
        
        > div.artikel_box {
            height: 100%;
        }
        
        &:focus,
        &:hover {
            outline-color: var(--accent-color) !important;
            outline-offset: 6px !important;
        }
    }
    div.artikel_box {
        z-index: 0;
        position: relative;
        height: calc(100% - 20px);
        border: 0;
        
        > .artikel_box_content_wrapper {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            align-content: flex-start;
            justify-content: flex-end;
            width: 100%;
            height: 100%;
            max-width: 100%;
            padding: var(--cms-padding);
            border-radius: var(--border-radius-content);
            background: var(--main-transparent-gradient-top);
            font-size: 16px;
            
            > div:not(:first-child) {
                margin-top: 5px;
            }
            
            > * {
                margin: 0;
                color: var(--white);
            }
        }
        > .background {
            z-index: -1;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            transition: all ease-in-out .3s;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            border-radius: var(--border-radius-content);
        }
    }
}
.artikelliste_einspaltig_content .lagerampel span {
    text-wrap: auto;
}
.artikelliste_einspaltig_image {
    padding: 0;
    overflow: visible;
}
.artikelliste_einspaltig_content {
    padding: 0;
}
.einspaltig_sub {
    float: left;
}

@media (max-width: 500px) {
    .einspaltig_sub.cf .anzahl_inline_wrapper {
        max-width: 80px;
    }
}


/* Breadcrumb */
.container:has(>.breadcrumb_wrapper) {
  z-index: 2;
  position: sticky;
  top: var(--header-height);
  margin-top: -60px;
  margin-bottom: 60px;
  overflow: auto;
  box-shadow: 0 0 0 100vmax var(--grey-light);
  clip-path: inset(0 -100vmax);
  background-color: var(--grey-light);

  .breadcrumb_wrapper {
      display: flex;
      position: relative;
      align-items: center;
  }

  .breadcrumb_content_wrapper {
      direction: rtl;
      overflow-x: scroll;
      scrollbar-width: none;
  }
  
  .breadcrumb {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 0;
    padding-block: 15px;
    background-color: var(--grey-light);
    direction: ltr;
    width: max-content;
    
    &.only {
      > li {
        &:nth-last-child(2) {
          font-weight: 700;
        }
        &:last-child {
          display: none;
        }
      }
    }
    
    &:before {
      z-index: -1;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      box-shadow: 0 0 0 100vmax var(--grey-light);
      clip-path: inset(0 -100vmax);
      background-color: var(--grey-light);
    }
    
    > li {
      display: inline-flex;
      align-items: center;
      color: var(--main-color);
      font-size: 14px;
      
      + li {
        &:before {
          display: inline-block;
          content: '';
          width: 8px;
          height: 3px;
          margin-inline: 10px;
          padding: 0;
          border-radius: var(--border-radius-content);
          background-color: var(--main-color);
        }
      }
      
      &:last-child {
        font-weight: 700;
        padding-right: var(--container-padding);
      }
      
      > a:link,
      > a:visited {
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        white-space: nowrap;
      }
    }
  }
}


/* Kategorien */
.start_kategorien_container {
  div.kat_content {
    padding-block: 0 var(--cms-padding);
    padding-inline: max(var(--container-padding), calc((100dvw - var(--container-width) + 2 * var(--container-padding) - 15px) / 2)) !important;
    background-color: var(--grey-light);
    
    > .row {      
      [class*="col-"] {
        &:nth-child(3) {
          
        }
      }
    }
  }
}
div.kat_content {
  > .row {
    margin-inline: -10px;
    
    [class*="col-"] {
      padding-inline: 10px;
    }
  }
  
  @media (max-width: 991px) {
    [class*="col-"] {
      width: 100%;
    }
  }
  div.artikel_box {
    overflow: hidden;
    cursor: pointer;
    position: relative;
    border: 0;
    background: var(--grey-light);
    border-radius: var(--border-radius-content);
    
    &:not([class*="pattern"]):hover {
      background: var(--grey);
      box-shadow: none;
    }
    
    > div.artikel_box_bild {
      padding: var(--container-padding-sm);
      
      > a {
        display: block;
        
        img.artikel_box_bild {
          transition: all ease-out .3s;
          transform-origin: center;
          object-fit: contain;
          width: 100%;
          height: 120px;
          mix-blend-mode: multiply;
        }
      }
    }
    > div.artikel_box_content_wrapper {
      display: none;
    }
    &[class*="pattern"] {
      > div.artikel_box_bild {
        padding: 0;
        
        > a {          
          img.artikel_box_bild {
            transform-origin: center right;
            object-position: right center;
            height: 240px;
          }
        }
      }
      > div.artikel_box_content_wrapper {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        padding: var(--cms-padding);
        
        > div.artikel_box_name {
          > a.artikel_box_name.content {
            color: var(--white);
            font-size: 26px;
            text-transform: uppercase;
          }
        }
        
        > div.artikel_box_button {
          .btn {
            border-color: var(--white);
            color: var(--white)
          }
        }
        
        > div:not(:first-child) {
          margin-top: 20px;
        }
      }
    }    
    &:hover {
      > div.artikel_box_bild {
        img.artikel_box_bild {
          transform: scale(1.1);
        }
      }
      > div.artikel_box_content_wrapper {
        > div.artikel_box_button {
          .btn {
            background-color: var(--white);
            color: var(--accent-color);
          }
        }
      }
    }
  }
}


/* Linke Spalte */
.container > .row:has(.col_left[class*="col-"]) {
  margin-inline: calc(-1 * var(--container-padding));
  
  .col_left {
    position: sticky;
    top: calc(var(--header-height) + 50px);
    right: calc(100% - 380px);
    height: calc(100vh - (var(--header-height) + 50px));
    width: 380px;
    overflow-y: auto;
    margin-top: -60px;
    padding-block: 60px;
    padding-inline: var(--container-padding);
    
    @media (max-width: 1199px) {
      display: none;
    }
    
    &:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 2px;
      background: var(--grey-light);
    }
  }
  .col_content {
    left: 380px;
    width: calc(100% - 380px);
    padding-inline: var(--container-padding);
    
    @media (max-width: 1199px) {
      left: 0;
      width: 100%;
    }
  }
}
.col_left {  
  div.left_nav {
    > ul {
      > li {
        
        a.left {
          padding-block: 10px;
          padding-right: 15px;
          border-radius: var(--border-radius-content);
        }
        
        &:not(:has(.kat_in_pfad)):not(:has(.kataktiv)) {
          display: none;
        }
        > .kat_in_pfad {
          display: none;
          
          + ul {
            > li {
              > .kat_inaktiv,
              > .kat_in_pfad {
                display: none;
                
                + ul {
                  > li {
                    > .kataktiv,
                    > .kat_inaktiv,
                    > .kat_in_pfad {
                      display: none;
                      
                      + ul {
                        > li {
                          padding-block: 5px;
                          
                          a.left {
                            &.kataktiv,
                            &.kat_in_pfad {
                              display: flex;
                              justify-content: space-between;
                              align-items: center;
                              
                              &:after {
                                content: "\f138";
                                font-family: bootstrap-icons;
                                font-size: 18px;
                                font-weight: 400;
                              }
                            }
                          }
                          
                          > .kat_inaktiv {
                            background: var(--grey-light);
                            
                            &:hover {
                              background: var(--grey);
                            }
                          }
                          > .kat_in_pfad,
                          > .kataktiv {
                            background: var(--main-accent-gradient);
                            color: var(--white);
                            font-weight: 600;
                            
                            + ul {
                              padding-block: 10px;
                              
                              > li {
                                > a.left {
                                  padding-block: 5px;
                                  
                                  &.kataktiv,
                                  &.kat_inaktiv {
                                    background: none;
                                  }
                                  &:hover,
                                  &.kat_in_pfad,
                                  &.kataktiv {
                                    color: var(--accent-color);
                                  }
                                  
                                  + ul {
                                    margin-block: 5px 10px;
                                    background: var(--accent-color-light);
                                    border-radius: var(--border-radius-content);
                                    
                                    a.left {
                                      font-size: 15px;
                                      border-radius: 0;
                                      padding-block: 8px 6px;
                                      border-bottom: 2px solid var(--white);
                                      
                                      &.kat_in_pfad,
                                      &.kataktiv {
                                        color: var(--accent-color);
                                      }
                                      &.kat_inaktiv {
                                        &:hover {
                                          color: var(--accent-color);
                                        }
                                      }
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}


/* Lagerampel */
div.lagerampel {
  font-size: 14px;
  font-weight: 700;
  display: inline-block;

  .lagerampel_symbol {
    display: none;
  }
  span[style*="lager-color"] {
    display: inline-block;
    background-color: color-mix(in srgb, var(--lager-color), transparent 90%);
    border-radius: var(--border-radius-content);
    padding: 4px 8px;
    color: var(--lager-color);
    font-size: 14px;
    font-weight: 600;
      
    @media (max-width: 767px) {
      font-size: max(12px,calc(16px * 0.8));  
    }
  }
}

div.lagerampel > .lagerampel_symbol.brown {
    background-color: saddlebrown;
}

/* Filter */
.kat_actions_filter {
  gap: calc(.5 * var(--container-padding-sm));
  
  
  &:not(:has(.katfilter_widget_content:nth-child(3))) {
    #toggle-filter {
      display: none;
    }
  }
  #toggle-filter {
    padding: 10px;
    background: var(--accent-main-gradient);
    color: var(--white);
    
    &:hover {
      opacity: .8;
    }
    
    .bi {
      position: relative;
      padding: 0;
      
      &.bi-chevron-up:before {
        content: "\f2ea";
      }
      &.bi-chevron-down:before {
        content: "\f4fe";
      }
    }
    
  }
  .katfilter_content {
    padding: 0;
    
    .katfilter_widgets {
      > .btn {
        box-shadow: 0 0 0 1px var(--border_color_content) inset;
        line-height: 1.5em;
        flex: 1 1 auto;
        max-width: none;
        
        @media (min-width: 768px) {
          flex: 0 0 auto;
        }
      }
      
      &.more {
        .katfilter_widget_content {
          display: block !important;
        }
      }
      
      > .katfilter_widget_content {
        &:nth-child(3) {
          ~ .katfilter_widget_content {
            display: none;
          }
        }
        
        > .katfilter_widget_title {
          > .title_only_aria {
            align-items: stretch;
          }
          span.label.selected_filters {
              max-width: calc(100vw - 160px);
          }
          &:has(.close_aria_only) {
            background-color: var(--grey-light);
            
            > li {
              > a {
                color: var(--main-color);
              }
            }
          }
          &:has(.close_aria_only:not(.hidden)) {
            background-color: var(--main-color);

            > li {
              > a {
                color: var(--white);
              }
            }
          }
          > li {
            > a {
              line-height: 1.5em;
            }
          }
        }
        > .katfilter_widget_elements > li.apply_filter_container > .apply_filter_cta.btn {
            background-color: var(--white);
        }
      }
    }
  }
}


/* Kat-Actions */
.kat_actions_wrapper {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--container-padding-sm);
  justify-content: flex-end;

  .kat_actions {
    flex: 0 0 auto;
    
    &.kat_actions_filter {
      flex: 1 1 auto;
    }
    
    > .row {
      flex-wrap: wrap;
      margin: 0;
      gap: var(--container-padding-sm);
      
      &:before,
      &:after {
        display: none;
      }
      
      > [class*="col-"] {
        flex: 0 0 auto;
        width: auto;
        padding: 0;
        
        .ansicht_auswahl {
          display: flex;
          
          a {
            transition: all ease-out .3s;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: auto;
            aspect-ratio: 1;
            border-radius: 50%;
            border: 1px solid var(--accent-color-light);
            font-size: 20px;
            line-height: 1;
            background-color: var(--accent-color-light);
            opacity: 1;
            
            &:hover {
              color: var(--main-color);
            }
            &.aktiv {
              color: var(--white);
              background-color: var(--accent-color);
            }
          }
        }
      }
    }
  }
}
#form_suchsortierung_simple {
  select.form-control {
    padding: 8px 10px;
    font-size: 14px;
  }
  .control-label {
    position: absolute;
    top: 0;
    left: 0;
    display: block !important;
    color: var(--grey-dark);
    font-size: 14px;
    translate: 0 -100%;
  }
}


/* Blättern */
div.blaettern {
  border-top: 1px solid var(--accent-color);
  
  &:has(.btn[disabled]) {
    border-color: var(--accent-color-light);
  }
  
  .btn.btn-primary {
    margin-block: 0 var(--container-padding);
    margin-inline: auto;
    border: 0;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    color: var(--white);
    font-size: 16px;
    font-weight: 600;
    
    &[disabled] {
      color: var(--accent-color);
      background: var(--accent-color-light);
      opacity: 1;
    }
  }
}


/* Artikeldetail */
#preis {
  margin-block: 30px;
  &:has(.preisanzeige) {
    .uvp_preis {
      color: var(--grey-dark);

      .strike_through_price_container span {
        display: inline-block;
      }

      .strike_through_price_container .hp {
        text-decoration: none;
      }
    }
  }
  .uvp_preis,
  .preisanzeige {
    line-height: normal;
  }
  .mwst_info {
    font-weight: 600;
    color: var(--grey-dark);
  } 
}

.product_detail {
  > form {
    > .row {
      margin-inline: calc(-1 * var(--container-padding-sm));
      
      > [class*="col-"] {
        padding-inline: calc(1.5 * var(--container-padding-sm));
        
        @media (max-width: 991px) {
          width: 100%;
        }        
        @media (min-width: 992px) {
          width: 50%;
        }
        
        .product_image_container {
          margin-bottom: var(--container-padding);
          
          .kleinbild {
            img.artikel_bild {
              aspect-ratio: var(--product-img-ratio);
              object-fit: cover;
            }
          }
          .microbilder {
            flex-wrap: nowrap;
            
            &:not(:has(.visible)) {
              > li {
                opacity: .6;
                
                &:first-child {
                  opacity: 1;
                }
              }
            }
            
            > li {
              transition: all ease-out .3s;
              flex: 0 0 auto;
              padding: 10px;
              border-radius: var(--border-radius-content);
              background-color: var(--grey-light);
              
              &:not(.visible) {
                opacity: .6;
              }
              
              > img {
                aspect-ratio: var(--product-img-ratio);
                object-fit: cover;
                box-shadow: none;
                mix-blend-mode: multiply;
                width: 120px;
              }
            }
          }
          
        }
        .product_content_container {
          margin-bottom: var(--container-padding);
          
          div.artikel_nr_lager {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;  
            
            .product_content_sub {
              padding: 0;
            }
            
            > .artikel_nr {
              display: inline-flex;
              gap: 2px;              
              color: var(--main-color);
              font-size: 14px;
              font-weight: 600;
              
              > span {
                padding: 4px 6px;
                background-color: var(--grey-light);
                border-radius: var(--border-radius-content) 0 0 var(--border-radius-content);
                
                &:last-child {
                  border-radius: 0 var(--border-radius-content) var(--border-radius-content) 0;
                }
              }
              
              .bi {
                font-size: 18px;
              }
              
              a {
                display: inline-flex;
                gap: 3px;
                font-size: 14px;
                color: var(--main-color);
              }
              
              .strong-500 {
                display: none;
              }
            }
          }

          > .product_content_sub {
            > .vororder_preisabweichung {
              display: inline-block;
            }
          }
        }
      }
    }
  }
}

.product_info {
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.panels-flex {
  display: flex;
  flex-wrap: wrap;
  gap: calc(3 * var(--container-padding-sm));
  row-gap: 0;
  
  .panel-group {
    flex: 1 1 400px;
    
    &:not(:has(.panel)) {
      display: none;
    }
    
    @media (max-width: 991px) {
      flex: 1 1 100%;
    }
  }
}

.panel-group {
  > .panel.product_info {
    &:has(.in:not(.collapsed)) {
      border-color: var(--accent-color);
    }
    > .panel-heading {
      .panel-title > a {
        color: var(--main-color);
        font-size: 20px;
        font-weight: 700;
        
        &:not(.collapsed) {
          color: var(--accent-color);
        }
      }
    }
    > .panel-collapse {
      > .panel-body {
        .pps-heading-4 {
          margin-bottom: 15px;
          color: var(--main-color);
          
          &:not(:first-child) {
            margin-top: 20px;
          }
        }
      }
    }
  }
}


/* Youtube Videos */
.yt_video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  margin-bottom: 20px;
}

.yt_video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* Merkliste / Schnellbestellung */
.fast_order,
form[name*="merkliste"] {
  .form-control,
  .btn {
    margin-block: 5px;
  }
}


/* Merkmale */
.artikel_eigenschaften {
  margin-bottom: 10px;
  
  > dt,
  > dd {
    border-top: 1px solid var(--grey);
    padding-block: 10px;
  }
  
  > dd {
    flex: 1 1 calc(100% - 150px);
  }
}

.artikel_eigenschaften > dt {
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: break-word;
}

.artikel_eigenschaften {
  > dd {
    flex: 1 1 calc(100% - 200px);
  }
}

@media (min-width: 768px) {
  .artikel_eigenschaften > dt {
    flex: 0 0 200px;
  }
}

.preisanzeige {
  .waehrung {
    font-size: 100%;
  }
}


/* Downloads */
.download_btn {
  transition: all ease-out .3s;
  display: inline-flex;
  gap: 7px;
  margin-bottom: 7px;
  margin-right: 7px;
  padding: 14px 20px;
  border-radius: var(--border-radius-content);
  background-color: var(--grey-light);
  color: var(--main-color);
  
  &:hover {
    opacity: .8;  
  }
  
  .bi {
    font-size: 20px;
  }
  
  > a:link,
  > a:visited {
    color: var(--main-color);
  }
}


/* Optionsartikel */
.optionsartikel {
  margin: 0;
  padding: calc(2 * var(--cms-padding)) 0;
  
  [class*="col-"] {
    padding: 0;
    width: auto;
    float: none;
  }
  .optionsartikel_bild img {
    width: 100%;
  }
  
  div.artikel_box {
    border: 2px solid var(--accent-color-light);
    
    .form_optionsartikel {
      display: flex;
    }
  }
  
  &:nth-child(2n - 1) {
    box-shadow: 0 0 0 100vmax var(--grey-light);
    clip-path: inset(0 -100vmax);
    background-color: var(--grey-light);
  }
}

/* Subartikel / Optionsartikel */
.subartikel:has(> .optionsartikel) {
    > .optionsartikel {
        box-shadow: none;
        background-color: transparent;
        
        h2.content {
            margin-bottom: 5px;
            padding-bottom: 0;
            color: var(--main-color);
            font-size: 26px;
            
            &:before {
                display: none;
            }
            
            @media (max-width: 767px) {
                font-size: calc(26px * .8);
            }
        }
        
        &.splide {
            visibility: visible;
            padding: 0;
            
            > .splide__track {
                
                &:has(.splide__slide:nth-child(4)) {
                    &:before,
                    &:after {
                        z-index: 1;
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: var(--container-padding-sm);
                        background: linear-gradient(to bottom, var(--white), transparent);
                    }
                    &:after {
                        top: auto;
                        bottom: 0;
                        rotate: 180deg;
                    }
                }
                > .splide__list {
                    flex-wrap: wrap;
                    gap: var(--container-padding-sm);
                    overflow: auto;
                    max-height: 500px;
                    scrollbar-width: none;
                    padding: 10px 2px 2px !important;

                    > .splide__slide {
                        flex: 1 1 100%;

                        div.artikel_box {
                            gap: var(--container-padding-sm);
                            flex-wrap: nowrap;
                            max-width: 100%;
                            margin: 0;
                            padding: var(--container-padding-sm);

                            &.active {
                                box-shadow: 0 0 0 1px var(--accent-color);
                            }

                            > div.artikel_box_bild {
                                flex: 0 0 80px;
                                padding: 0;

                                .flag_bild_wrapper {
                                    height: 100%;

                                    a {
                                        display: block;
                                        height: inherit;

                                        img {
                                            height: inherit;
                                            padding: 0;
                                        }
                                    }
                                }
                            }
                            > div.artikel_box_content_wrapper {
                                padding: 0;

                                > div.artikel_box_nr {

                                }

                                > div.artikel_box_name {
                                    .artikel_box_name {
                                        font-size: 14px;
                                    }
                                }
                                > div.artikel_box_preis {
                                    flex-direction: row;
                                    font-size: 14px;
                                }
                            }
                        }
                    }

                }
            }
        }
    }
}


/* passend zu */
.passend_zu {
  margin-bottom: 15px;
  
  > .passend_zu_entity:first-child {
    font-weight: 700;
  }

  > .passend_zu_entity {
    display: flex;
    flex-direction: row;
    gap: 15px;

    > .passend_zu_art_nr {
      flex: 0 1 150px;
    }

    > .passend_zu_art_bez {
      flex: 0 1 300px;
    }

    > .passend_zu_art_brand {
      flex: 0 1 200px;
    }
  }
}


/* Alles / Weniger anzeigen */
.trigger_less,
.trigger_more {
  display: none !important;
}
.show_more,
.show_less {
  overflow: hidden;
  position: relative;
  height: 350px;
  
  ~ .trigger_less {
    display: none !important;
  }
  ~ .trigger_more {
    display: inline-flex !important;
  }
  
  &:after {
    pointer-events: none;
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, transparent, var(--white));
    display: block;
  }
  &.show_more {
    height: max-content;
    
    ~ .trigger_less {
      display: inline-flex !important;
    }
    
    ~ .trigger_more {
      display: none !important;
    }
    
    &:after {
      display: none;
    }
  }
}
  
  
  /* wk-sticky */
#wk_sticky {
  > .container {
    > .bild {
      > img {
        max-height: 80px;
        width: auto;
      }
    }
  }
}

/* Slider */
.shop_table .content_td .splide {
  &.fullscreen {
    @media (max-width: 1199px) {
      margin-top: -60px;
    }
    
    > .splide__track {
      > .splide__list {
        > .splide__slide {
          
          @media (max-width: 991px) {
            height: 300px;
          }
          
          img:not(.artikel_box_bild) {
            height: 100%;
          }
          
          .container {
            padding-inline: var(--container-padding);
            
            @media (max-width: 767px) {
              translate: 0 50%;
              bottom: 50%;
              left: 0;
            }
            
            .splide_content {
              width: 100%;
              max-width: 100%;
              padding: 0;
              
              .pps-heading-2 {
                margin: 0;
                padding: 0;
                font-size: 40px;
                
                @media (min-width: 768px) {
                  font-size: 80px;
                  line-height: 1.2em;
                }
                
                &:before {
                  display: none;
                }
              }
              p.content {
                margin-bottom: 30px;
                font-size: 20px;
                font-weight: 300;
                
                @media (min-width: 768px) {
                  font-size: 40px;
                }
              }
              .btn {
                &:not([style]) {
                  background: transparent;
                  border: 2px solid var(--white);
                  color: var(--white);
                  
                  &:hover {
                    opacity: 1;
                    background: var(--white);
                    color: var(--accent-color);
                  }
                }
              }
            } 
          }
        }
      }
    }
    .splide__arrows {
      > .splide__arrow {
        top: auto;
        bottom: 0;
        transform: none;
        height: 64px;
        
        &:before {
          font-size: 24px;
          
          @media (max-width: 768px) {
            font-size: 20px;
          }
        }
        
        @media (max-width: 768px) {
          height: 48px;
        }
        
        &.splide__arrow--prev {
          left: 0;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        }
        &.splide__arrow--next {
          right: 0;
          border-top-right-radius: 0;
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
    }
  }
  &.sortimentsinfo_wrapper {
    > .splide__arrows {
      > .splide__arrow {
        &.splide__arrow--prev {
          left: -6px;
        }
        &.splide__arrow--next {
          right: -6px;
        }
      }
    }
  }
  &.microbilder_wrapper {
    overflow: visible;
    margin-block: var(--container-padding-sm) 0;

    > .splide__arrows {
      > .splide__arrow {
        top: 0;
        bottom: auto;
        transform: translate(0, -200%);
        border-radius: 50%;
        background-color: var(--white);
        box-shadow: var(--default-box-shadow);
        
        &[disabled],
        &:not(:hover) {
          &:before {
            color: var(--main-color);
          }
        }
      }
    }
  }
  .splide__pagination {
    bottom: 20px;
    
    @media (max-width: 767px) {
      bottom: 15px;
    }
    
    .splide__pagination__page {
      transition: all ease-out .3s;
      height: 20px;
      width: 20px;
      opacity: 1;
      margin: 0 5px;
      border: 2px solid var(--white);
      
      @media (max-width: 767px) {
        height: 16px;
        width: 16px;
      }
      
      &.is-active {
        transform: none;
        width: 40px;
        background-color: var(--accent-color);
        
        @media (max-width: 767px) {
          width: 30px;
        }
      }
    }
  }
  .splide__arrows {
    &:has([disabled] + [disabled]) {
      display: none;
    }
    > .splide__arrow {
      opacity: 1;
      height: 48px;
      width: auto;
      aspect-ratio: 1;
      background-color: var(--accent-color);
      border-radius: var(--border-radius-content);
      
      &[disabled] {
        opacity: .7;
      }
      
      &:before {
        content: "\f285";
        font-size: 20px;
        font-family: bootstrap-icons;
        color: var(--white);
      }
      
      &.splide__arrow--prev {
        &:before {
          transform: scaleX(-1);
        }
      }
      &:not([disabled]):hover {
        background-color: var(--main-color);
      }
      
      > svg {
        display: none;
      }
    }
  }
}


/* Buttons */
.btn.btn-default {
  transition: all ease-out .3s;
  background-color: transparent;
  
  &:hover {
    background-color: transparent;
  }
}
.btn:not(.touchspin-spinner):not(.btn-lg):not(.btn-sm):not(.btn-xs):not(.navbar-toggle) {
  @media (max-width: 767px) {
    font-size: 14px;
  }
}


/* Touchspin */
.anzahl_inline_wrapper {
  margin: 0;
}
.einspaltig_sub.cf .anzahl_inline_wrapper {
  margin-right: 5px !important;
}
.bootstrap-touchspin {
  > .input-group-btn {
    > .btn {
      border-radius: var(--border-radius-content);
      
      &:hover {
        border-color: var(--grey-dark);
        background: var(--accent-color-light);
      }
    }
    &:first-child {
      > .btn {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
    &:last-child {
      > .btn {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }
  > .form-control {
    border-inline: 0;
  }
}

.wk_artikelzeile,
.artikel_box {
  .anzahl_inline_wrapper {
    max-width: 100px !important;
  }
  .bootstrap-touchspin {
    > .input-group-btn {
      > .btn {
        padding-block: 7px;
        font-size: 14px !important;
        font-weight: 700;
      }
    }
    > .form-control {
      padding: 7px 0;
      font-size: 14px !important;
      font-weight: 700;
    }
  }
  &.artikel_box {
    &:has(.btn-primary) {
      .anzahl_inline_wrapper {
        margin-right: 40px;
      } 
    }
  }
}


/* Brands */
.brands_wrapper {
  transition: all ease-in-out .3s;
  padding-block: calc(2 * var(--cms-padding));
  box-sizing: content-box;
  
  &:only-child {
    padding-top: 0;
  }
  
  > .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--cms-padding);

    @media (max-width: 991px) {
      gap: calc(var(--cms-padding) / 2);
    }
    
    &:before,
    &:after {
      display: none;
    }
    
    > .brands_categories {
      flex: 1 1 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--container-padding-sm);
      margin-bottom: var(--container-padding-sm);
      
      > .btn {
        position: relative;
        border: 0;
        background: var(--grey-light);
        color: var(--main-color);
        box-shadow: none;
        
        &:focus,
        &:hover {
          background: var(--accent-color-light);
        }
        
        &.active {
          background: var(--accent-color);
          color: var(--white);
          
          > .bi {
            opacity: 1;
          }
        }
        
        > .bi {
          transition: all ease-out .3s;
          position: absolute;
          top: 50%;
          left: 0;
          translate: -50% -50%;
          opacity: 0;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 24px;
          height: auto;
          aspect-ratio: 1;
          border-radius: 50%;
          background-color: var(--accent-color);
          box-shadow: 0 0 0 2px var(--white);
        }
      }
    }
    
    > .brands_box {
      flex: 0 0 260px;
      display: none;
      
      @media (max-width: 991px) {
        flex: 0 1 calc(33.333% - 2 * var(--cms-padding) / 6);
      }
      
      img {
        mix-blend-mode: multiply;
        border-radius: var(--border-radius-content);
      }
      
      > a {
        display: block;
        transition: all ease-in-out .3s;
        border-radius: var(--border-radius-content);
        
        &:focus,
        &:hover {
          background-color: var(--accent-color-light);
        }
      }
      
      &.active {
        display: block;
      }
    }
  }
}


/* CMS */
.gjs-row {
  align-items: flex-start;
}
.bg_wrapper {
  padding-block: calc(2 * var(--cms-padding));
  
  > [class*="container"] {
    .row {
      
      @media (max-width: 767px) {
        &[data-height_prc] {
          min-height: 220px !important;
        }
      }
      
      &.brands {
        justify-content: center;
        
        > .cell {
          flex: 0 0 260px;
        }
      }
      
      .cell {
        padding: 0;
        width: auto;
        line-height: 1;
        
        &:not(.background_color):not(.background_image):not(.background_video) {
          .panel-body {
            margin-inline: 0;
          }
        }
        
        &.background_color,
        &.background_video,
        &.background_image {
          padding: var(--cms-padding);
          border-radius: var(--border-radius-content);
          
          &.overlay {
            
            &:before {
              z-index: 0;
              border-radius: var(--border-radius-content);
            }
            &.dark:before {
              
            }
            &.light:before {
              
            }
          }
        }
        
        h2.content:only-child {
          margin-bottom: 20px;
        }
        .cell_content {

        }
      }
    }
  }
}


/* Blog */
.start_kategorien_container ~ #blog_container {
  justify-content: center;
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding: calc(2 * var(--cms-padding)) var(--container-padding) var(--container-padding);

  > h2.content {
    flex: 0 0 auto;
  }
  
  > .blog_container_elem.blog_tools,
  > .blog_content {
    flex: 0 0 100%;
  }
  
  > .blog_content {
    justify-content: center;
  }

  .blog_tool_title {
    text-align: center;
  }
  .blog_categories_list, .blog_recent_posts_list, .blog_additional_posts_container, .blog_recent_posts_list .recent_post .recent_post_title, .blog_categories_list .blog_category, .blog_recent_posts_list .recent_post {
    justify-content: center;
  }
  
  > hr,
  .blog_tools {
    display: none;
  }
  .blog_box {
    
    @media (min-width: 1px) {
      &:nth-child(4) ~ .blog_box {
        display: none;
      }
    }
    @media (min-width: 1200px) {
      &:nth-child(3) ~ .blog_box {
        display: none;
      }
    }
    
    @media (max-width: 991px) {
      margin-right: auto;
      flex: 0 0 calc(50% - var(--container-padding-sm) / 2);
    }
  }
  
  + .btn {
    width: 260px;
    max-width: 100%;
    position: relative;
    left: 50%;
    translate: -50% calc(-1 * var(--container-padding));
  }
}
@media (max-width: 991px) {
  .blog_container_elem {
    .bb_date {
      justify-content: center;
    }
  }
}
#blog_container {
  align-items: flex-start;
  gap: 30px !important;

  .blog_container_elem.blog_content {
    .bb_date {
      justify-content: center;
    }
  }

  > h2.content {
    flex: 1 1 100%;
    margin-bottom: 0;
  }
  
  > .blog_content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--container-padding-sm);
    padding-bottom: var(--container-padding);
    
    > .blog_box {
      flex: 0 0 calc(33.333% - var(--container-padding-sm));
      margin: 0;
      background-color: var(--grey-light);
      border: 1px solid var(--grey-light);
      box-shadow: none;
      border-radius: var(--border-radius-content);

      @media (max-width: 1199px) {
        flex: 0 0 calc(50% - var(--container-padding-sm) / 2);
      }
      
      @media (max-width: 600px) {
        flex: 0 0 100%;
        
        .bb_head {
          height: 180px;
        }
      }
      
      &:hover {
        border-color: var(--grey-dark);
      }
      
      > .bb_head {
        > .embed-responsive {
          height: 100%;
        }
      }
      .bb_body {
        padding: var(--cms-padding);
        
        .bb_date {
          margin-bottom: -5px;
        }
      }      
    }
  }
  .bb_date {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  div.cell_content.video,
  div.cell_content.image {
    margin-inline: 0;
    margin-bottom: 0;
    
    &:not(:first-child) {
      margin-top: 0;
    }
  }
}



/* Footer */
footer {
  .bg_wrapper {
    padding-block: var(--container-padding-sm);
    
    .row {
      .cell {
        .row {
          flex-wrap: nowrap;
          
          .cell {
            flex: 0 1 auto;
          }
        }
        
        &:last-child {
          flex-grow: 0;
        }
      }
    }
    
    &:first-of-type {
      > [class*="container"] {
        > .row {
          > .cell {
            &:first-child,
            &:nth-child(2) {
              a {
                display: inline-flex;
                align-items: flex-start;
                gap: 8px;
                margin-bottom: 8px;
                
                &:hover {
                  &:before {
                    color: var(--main-color);
                  }
                }
                
                &:before {
                  transition: all ease-out .3s;
                  width: 28px;
                  height: auto;
                  aspect-ratio: 1;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background-color: var(--white);
                  border-radius: 6px;
                  line-height: 1;
                  color: var(--accent-color);
                  font-family: Amsler-Icons;
                  font-weight: 700;
                }
                &[href*="maps"] {
                  &:before {
                    content: "\e903";
                  }
                }
                &[href*="tel:"] {
                  &:before {
                    content: "\e908";
                  }
                }
                &[href*="mailto:"] {
                  &:before {
                    content: "\e902";
                  }
                }
              }
            }
          }
        }  
      }
    }
    
    &:last-child {
      .row {
        .cell {
          &:last-child {
            flex-basis: auto;
            
            p.cell_content {
              display: flex;
              flex-wrap: wrap;
              gap: var(--container-padding-sm);
              row-gap: calc(.5 * var(--container-padding-sm));
            }
          }
        }
      }
    }
    
    .cell_content {
      line-height: 1.8em;
      
      &.image {
        a {
          margin-top: 10px;
          
          &[href*="facebook"],
          &[href*="instagram"],
          &[href*="linkedin"] {
            transition: all ease-out .3s;
            
            &:hover {
              color: var(--main-color);
            }
            
            &:before {
              content: "\f344";
              font-size: 26px;
              font-family: bootstrap-icons;
              line-height: 1;
            }
            &[href*="instagram"] {
              &:before {
                content: "\f437";
              }
            }
            &[href*="linkedin"] {
              &:before {
                content: "\f472";
              }
            }
            > img {
              display: none;
            }
          }
        }
        
        + .cell_content.image[full_width] {
          margin-left: 15px;
        }
      }
      
      + .cell_content {
        margin-top: 5px;
      }
    }    
  }
}

/* Ersatzartikel */
.ersatzartikel {
  background-color: var(--accent-color-light);
  margin-left: 12px;
}

/* Dokumentensuche */
.suche_dokumente{
  margin-bottom: 50px;
}

/* Schnellbestellung */
#schnellbestellungForm {
  > tbody {
    > tr {
      > th {
        &:first-child {
          width: 140px !important;
        }
      }
      > td {
        
      }
    }
  }
}


/* Tooltips */
.tooltip.in {
  opacity: 1;
  font-weight: 600;
}


/* Bestellungen */
.bestellung-filter-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--container-padding-sm);
  row-gap: 10px;
  
  > input {
    flex: 1 1 300px;
    
    @media (max-width: 991px) {
      flex: 1 1 100%;
    }
  }
  > select {
    flex: 0 1 260px;
    
    @media (max-width: 991px) {
      flex: 1 1 50%;
    }
  }
}
.backlog_container,
.bestellungen_container {
  overflow-x: auto;
  padding-block: var(--container-padding-sm);
  
  .orders,
  .backlog {
/* XXX> asa/cur 2026-10-16: (RMA Ruecksendeprozess) min-width fuer Rueckgabe-Spalte */
    min-width: 1360px;
/* <XXX */
  }
  
  .backlog_header,
  .order_header {
    display: flex;
    gap: var(--container-padding-sm);
    margin-bottom: var(--container-padding-sm);
    padding: calc(.5 * var(--container-padding-sm));
    border-bottom: 2px solid var(--grey);
    
    > div {
      flex: 1 1 220px;
      font-weight: 600;
      
      &:first-child,
      &:nth-child(2) {
        flex-basis: 140px;
      }
    }
  }
  .order_elements,
  .backlog_elements {
    display: flex;
    flex-direction: column;
    gap: calc(.5 * var(--container-padding-sm));
    
    hr {
      display: none;
    }
    
    > .backlog_item,
    > .order_item {
      display: flex;
      align-items: center;
      min-height: 55px;
      gap: var(--container-padding-sm);
      padding: calc(.5 * var(--container-padding-sm));
      border-radius: var(--border-radius-content);
      font-weight: 300;
      
      &:nth-child(2n) {
        background-color: var(--grey-light);
      }
      
      > div {
        overflow: hidden;
        flex: 1 1 220px;
        
        &:first-child,
        &:nth-child(2) {
          flex-basis: 140px;
        }
        
        > * {
          overflow: hidden;
          display: block;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
.weitere_bestellungen_btn {
  padding-block: var(--container-padding-sm);
}


/* Kundenaccount / Onboarding */
.kundenaccount_login {
  align-items: center !important;
}


.login_box,
.alert,
.login_direkt_box,
.login_identity_box {
  border-radius: var(--border-radius-content);
}

.login_box,
.login_direkt_box,
.login_identity_box {
  box-shadow: none;
  background-color: rgba(248, 248, 250, 1);
}
.login_box input {
  background-color: #FFFFFF;
}
.kundenaccount_login {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 30px;
  margin-bottom: 60px;
}
.kundenaccount_login > div {
  flex: 1 1 550px;
}
.kundenaccount_login .login_box {
  margin: 0;
  padding: 30px;
}
.kundenaccount_login .login_box .form-group:last-child,
.kundenaccount_login .login_box .form-group:has(+ script:last-child) {
  margin-bottom: 0;
}
.kundenaccount_login [class*="offset"] {
  width: 100%;
  margin: 0;
}

.alert-onboarding {
  display: flex;
  flex-wrap: wrap;
  column-gap: 56px;
  row-gap: 10px;
  padding: 30px;
  background-color: var(--accent-color);
  margin-bottom: 0;
}
.alert-onboarding > .text > * {
  color: #FFFFFF !important;
  margin-bottom: 10px;
  font-weight: 500;
}
.alert-onboarding > .btn {
  margin-top: auto;
  color: rgba(var(--accent-color),1) !important;
  background: #FFFFFF !important;
}
@media (max-width: 991px) {
  .alert-onboarding {
    flex-wrap: wrap;
  }
}

.neukunden_formular {
  img {
    max-width: 100%;
  }
}

.kontakt_neukundenformular {
  max-width: 650px;
  margin-top: 15px;
  margin-bottom: 25px;
}

/* Vororder WK */
.progress {
  width: 100%;
  max-width: 250px;
  background-color: #e0e0e0;
  border-radius: 10px;
  height: 20px;
  overflow: hidden;
  float: right;
}

.progress-bar {
  height: 100%;
  width: 0%; /* Startwert */
  background-color: var(--main-color);
  transition: width 0.5s ease-in-out;
}

.progress_bar_wrapper {
  margin-bottom: 15px;
}

/* WK-Layer */
.art_img img {
  max-width: 75px;
  height: auto;
}

/* Warenkorb */
.wk_vororder_preisabweichung {
  display: inline-block;
  float: right;
}

.wk_inline_add_container .input-group {
  display: flex;
}

#wk_inline_add_nr {
  flex: 1 1 250px;
}
#wk_inline_add_anzahl {
  flex: 0 0 80px;
}

.wk_inline_add_container .input-group .input-group-btn {
  flex: 0 0 60px;
}
.warenkorb_container {
    --additional-actions-padding: 65px;
    &.uebersicht {
        --additional-actions-padding: 10px;
        
        div.tbl_ger,
        div.tbl_ung,
        div.tbl_titel {
            > .row {
                > [class*="col-"] {
                    &:first-child {
                        ~ div {
                            flex: 0 0 calc(50% / 4);
                            
                            &:last-child {
                                flex: 0 0 calc(50% / 4);
                                @media (max-width: 767px) {
                                    flex: 1 1 auto;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
    div.tbl_titel {
        > .row {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-inline: -10px;

            &:before,
            &:after {
                display: none;
            }
            
            > [class*="col-"] {
                padding-inline: 10px;
                width: auto;

                &:first-child {
                    flex: 0 0 50%;
                    margin-right: auto;

                    ~ div {
                        flex: 0 0 calc((50% - 55px) / 4);
                        
                        @media (max-width: 991px) {
                            flex: 0 0 calc((50% - 55px) / 3);
                        }

                        &:last-child {
                            flex: 0 0 55px;
                        }
                    }
                }
            }
        }
    }
    div.wk_artikelzeile {
        .row {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-inline: -10px;
            
            &:before,
            &:after {
                display: none;
            }
            
            > [class*="col-"] {
                padding-inline: 10px;

                &:not(:last-child) {
                    width: auto;
                }
                
                &:first-child {
                    flex: 0 0 50%;
                    margin-right: auto;
                    
                    ~ div {
                        flex: 0 0 calc((50% - 55px) / 4);

                        @media (max-width: 991px) {
                            flex: 0 0 calc((50% - 55px) / 3);
                        }

                        @media (max-width: 767px) {
                            &[class="visible-xs col-xs-12"] {
                                flex: 0 0 100%;
                            }
                        }
                        
                        .tbl_titel {
                            [class*="col-"] {
                                flex: 0 0 50%;
                            }
                        }
                        
                        &:last-child {
                            flex: 0 0 55px;
                        }
                        
                        @media (max-width: 767px) {
                            flex: 1 1 auto;
                        }
                    }

                    @media (max-width: 767px) {
                        flex: 1 1 auto;
                    }
                    
                    &[class="col-xs-12"] {
                        flex: 0 0 100%;
                    }
                }
            }
        }
        .wk_artikel {
            display: flex;
            gap: 10px;
            align-items: center;

            > a:has(.wk_minibild) {
                display: block;
                margin: 0;
                
                .wk_minibild {
                    width: auto;
                    aspect-ratio: 16/12;
                    object-fit: cover;
                }
            }
            > .wk_artikel_body {
                flex: 1;
                
                > .wk_body_flex {
                    display: flex;
                    gap: 10px;
                    align-items: flex-start;
                    
                    > div {
                        flex: 0 1 180px;
                    }

                    div.lagerampel {
                        font-weight: 400;
                        
                        span[style*="lager-color"] {
                            padding: 0;
                            background-color: transparent;
                        }
                    }
                }
            }
        }
    }
    div.wk_config.lieferland,
    div.wk_config.versandart,
    div.tbl_total,
    div.tbl_info {
        > .row {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            flex-wrap: wrap;
            margin-inline: -10px;

            &:before,
            &:after {
                display: none;
            }
            [class*="col-"] {
                width: auto;
                flex: 0 0 auto;
                margin: 0;
                padding-inline: 10px;

                &:last-child:not(:only-child) {
                    flex: 0 0 200px;
                    padding-right: var(--additional-actions-padding);
                }
            }
            @media (max-width: 767px) {
                flex-wrap: nowrap;
                justify-content: space-between;
                
                @media (max-width: 600px) {
                    flex-wrap: wrap;
                }
                
                > [class*="col-"] {
                    flex: 1 1 60% !important;
                    padding-right: 10px !important;
                }
            }
        }
        &.tbl_total {
            > .row {
                [class*="col-"] {
                    &:nth-last-child(2) {
                        flex: 0 0 145px;
                        white-space: nowrap;
                        
                        &:not(:has(+ div > .btn)) {
                            flex: 0 0 200px;
                        }
                    }
                    &:last-child {
                        flex: 0 0 55px;
                        padding-right: 10px;
                        
                        &:not(:has(>.btn)) {
                            display: none;
                        }
                    }
                }
            }
        }
        &.wk_config.lieferland,
        &.wk_config.versandart {
            .dropdown {
                .btn {
                    justify-content: space-between !important;
                    width: 100%;
                    white-space: nowrap;
                }
            }
        }
    }
    &.lieferland_versand {
        div.wk_config,
        div.tbl_titel {
            
            &.tbl_titel {
                .row {
                    > [class*="col-"] {
                        &:first-child {
                            flex: 0 0 auto;
                        }
                    }
                }
            }
            .row {
                justify-content: center;

                > [class*="col-"] {
                    &:first-child {
                        flex: 0 0 140px;
                        text-align: center;
                    }
                    &:last-child {
                        padding-right: 10px;
                    }
                    
                    &.col-xs- {
                        display: none;
                    }
                    
                    .form-control,
                    .dropdown {
                        width: 300px;
                    }
                }
            }    
        }
    }
}
.versandart-dropdown {
    
}
div.bestelldaten {
    &.row {
        margin-inline: -10px;
        
        [class*="col-"] {
            padding-inline: 10px;

            @media (max-width: 991px) {
                &:not(:last-child) {
                    > .row {
                        margin-bottom: 10px;
                    }
                }
            }
            .row {
                margin-inline: -10px;
            }
        }
    }
}
div.kunde_zusatzdaten,
div.kundeadresse {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: var(--container-padding-sm);
    row-gap: 2px;
    margin-bottom: var(--container-padding-sm);
    box-shadow: none;
    border: 2px solid var(--grey);
    
    > .adresse {
      display: flex;
      column-gap: 5px;
      flex-wrap: wrap;
      flex: 1 1 auto;
      padding-right: 24px;
      white-space: nowrap;
        
      > .content {
        &[data-empty],  
        &:not(:has(>span)) {
            display: none;
        }
        &:not(:last-child):not(:has(+ [data-empty])) {
            > span {
                &:last-child {
                    &:after {
                        content: ',';
                    }
                }
            }   
        }
      }
    }
    .pps-heading-4 {
        margin-bottom: 0;
        font-size: 16px;
        
        @media (max-width: 767px) {
          font-size: 14px;
        }
        
        &:empty {
            display: none;
        }
    }
    > .row,
    .kundeadresse_info {
        flex: 1 1 100%;

        &:has([style*="none"]) {
            margin-top: 0;
        }

        #weitere_informationen_kundenadresse,
        #weitere_informationen_lieferadresse,
        #weitere_informationen_adresse, 
        #weitere_informationen_rechnungsadresse {
            margin-top: 0;
        }
        #weitere_informationen_adresse_titel,
        #weitere_informationen_kundenadresse_titel {
            position: absolute;
            top: var(--container-padding-sm);
            right: var(--container-padding-sm);
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 24px;
            height: auto;
            aspect-ratio: 1;
            border-radius: 50%;
            background: var(--accent-color);
            
            .bi:before {
                color: var(--white);
                font-weight: 700;   
            }

            &:hover {
                background: var(--main-color);
            }
        }
    }
}
div.wk_kasse {
    > .row {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: wrap;
        margin-inline: -10px;

        &:before,
        &:after {
            display: none;
        }
        > [class*="col-"] {
            width: auto;
            flex: 1 1 100%;
            margin-inline: 0;
            padding-inline: 10px 65px;
            
            @media (max-width: 767px) {
                padding-inline: 10px;
            }
            
            .btn[disabled] {
                .bi {
                    pointer-events: none;
                }
            }
        }
    }
}

/* Bestellpfad */
h1.content.bp {
    display: block;
    text-align: center;
    padding-inline: calc(2 * 48px + 20px);
    color: var(--accent-color);
    
    @media (max-width: 767px) {
        text-align: left;
        padding-inline: 0 calc(2 * 36px + 20px);
    }
}

.bp_row {
    position: relative;
    margin-bottom: 40px;
    
    .bp_arrows {
        z-index: 1;
        pointer-events: none;
        position: absolute;
        height: 64px;
        bottom: -40px;
        left: 0;
        display: flex;
        gap: 15px;
        align-items: center;
        justify-content: space-between;
        translate: 0 100%;
        width: 100%;

        @media (max-width: 767px) {
            justify-content: flex-end;
            height: 48px;
        }
        
        #bp_next,
        #bp_prev {
            pointer-events: auto;
            padding: 0;
            width: 48px;
            height: auto;
            aspect-ratio: 1;
            border-radius: 50%;
            font-size: 26px;
            background: var(--accent-color);

            &#bp_next {
                margin-left: auto;
            }
            
            @media (max-width: 767px) {
                width: 36px;
                font-size: 22px;

                &#bp_next {
                    margin-left: 0;
                }
            }
            
            &:hover {
                background: var(--main-color);
            }
        }
    }
}


/* Adressen */
#kasse_formular {
    .my_adresses {
        .adress {            
            .adress_feld {
                flex-wrap: wrap;
                align-items: center;
                justify-content: flex-start;
                flex-direction: row;
                gap: 5px;
                text-align: left;
                padding-right: 45px;
            }
            .btn {
                &.default-delivery-adress,
                &.change_adress {
                    justify-content: flex-start;
                    border-radius: var(--border-radius-content);
                    
                    &.default-delivery-adress.change_adress {
                        border-top-left-radius: 0;
                    }
                }
                &.edit {
                    background: var(--accent-color);
                    color: var(--white);
                    
                    &:hover,
                    &:focus {
                        background: var(--main-color);
                    }
                }
            }
        }
        + .alert {
            width: calc(100% - 20px);
            margin-inline: auto;
            margin-block: -20px 0;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    }
    .kasse_formular_trennlinie {
        margin-block: var(--container-padding-sm);
        height: 2px;
        background-color: var(--main-color-light);

        @media (min-width: 1200px) {
            margin-inline: auto;
            width: 66.6667%;
        }
    }
    #address-felder-container {
        > .form-group {
            &:not(:has([name="Bemerkungen"])):not(:has([name*="Attribut"])) {
                display: none;
            }
        }
    }
    .form-group.bezahlungsarten {
        display: none;
    }
}






/* UVP Toggle */
.product_detail {
  .uvp_toggle {
    float: right;
    top: -60px;
    
    @media (max-width: 1199px) {
      top: -40px;
    }
    
    #uvp_toggle {
      + label {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }
    }
  }
}
.uvp_toggle {
  position: relative;
  display: inline-block;
  pointer-events: all;
  
  #uvp_toggle {
    position: absolute;
    left: 0;
    pointer-events: none;
    height: 100%;
    margin: 0;
    background: transparent;
    box-shadow: none !important;
    outline: none !important;
    
    &:after {
      content: "\f28a";
      top: 50%;
      left: 10px;
      translate: 0 -50%;
      background: transparent !important;
      color: var(--main-color);
      font-family: bootstrap-icons;
    }
    
    + label {
      transition: all ease-in-out .3s;
      cursor: pointer;
      margin: 0;
      padding-block: 8px;
      padding-inline: 30px 10px;
      background-color: var(--grey-light);
      border-top-left-radius: 0 !important;
      border-top-right-radius: 0 !important;
      border-radius: var(--border-radius-content);
      color: var(--main-color);
      font-size: 14px;

      @media (max-width: 1399px) {
        font-size: 12px;
      }
    }
    &:hover,
    &:focus {
      &:after {
        color: var(--accent-color);
      }
      + label {
        color: var(--accent-color);
      }
    }
    &:checked {
      &:after {
        content: "\f26a";
        color: var(--white);
      }
      + label {
        color: var(--white);
        background-color: var(--accent-color);
      }
    }
  } 
}



/* Warenkorb Print */
@media print {
  .hauptnavigation_left .top_titel .visible-print,
  .top_titel.visible-print,
  .wk_artikel_body span.vororder_info,
  #shoplogo_druck {
    display: none !important;
  }

  .warenkorb_container input {
    border: none !important;
    text-align: left;
  }

  .offerte_anrede {
    margin-bottom: 50px;
  }

  .offerte_anrede + h1.bp {
    padding-left: 0;
  }

  .wk_delete,
  .nur_uvp,
  .navbar-header-flex {
    visibility: hidden !important;
  }

  .warenkorb_container .tbl_ger .hidden-xs,
  .warenkorb_container .tbl_ung .hidden-xs {
    display: none !important
  }
}

/* // XXX> zli 2026-01-05: (Verkaufsstellen filtern) Filters layout */
#map_legend {
  margin-top: 15px;
}
.vk_filters_row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.vk_filters_row #vk_search_input {
    flex: 1 1 180px;
}

.vk_filters_row #vk_search_input:focus {
    z-index: 1;
}

.vk_filters_row #vk_filter_kanton,
.vk_filters_row #vk_filter_marke {
    flex: 0 0 200px;
}
div#haendler-map *:focus-visible,
div#map *:focus-visible {
  z-index: unset;
}
@media (max-width: 600px) {
  .vk_filters_row #vk_search_input {
    flex: 1 1 100%;
  }
  .vk_filters_row #vk_filter_kanton,
  .vk_filters_row #vk_filter_marke {
    flex: 1 1 calc(50% - 5px);
  }
}

.gm-style-iw-c {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    padding: 10px !important;
}

.gm-style-iw-d {
    overflow: hidden !important;
    max-width: 300px;
}

.gm-ui-hover-text {
    button {
        top: 10px !important;
        right: 10px !important;
    }
}

/* Rückstände */
.backlog {
  display: flex;
  flex-direction: column;
}

.backlog_header {
  display: flex;
  font-weight: 700;
}

.backlog_item {
  display: flex;
}

/* Salesorder detail view */
.nochmals_bestellen {
  margin-left: 10px;
}

.vororder_info span {
  color: #ffffff;
  background-color: var(--accent-color);
  border-radius: 50%;
}

/* Vororder */
.vororder_active {
  pointer-events: none;
  display: block !important;
  transform: none;
  background-color: var(--main-color);
  opacity: 1 !important;
  z-index: 5;
  width: 100%;
  transition: all ease-in-out .15s;
  text-align: center;
  color: white;
  font-weight: 700;
  font-size: 24px;
  height: 50px;
  line-height: 50px;
    @media (max-width: 767px) {
        position: absolute;
    }
}
@media (max-width: 767px) {
  .vororder_active {
    font-size: 14px;
  }
}
/* The container */
@media (max-width: 540px) {
    .toggle-switch {
        flex: 1 1 100%;
    }
}
.toggle-switch {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
  color: var(--main-color);
  font-weight: 500;
    
  @media (max-width: 1399px) {
    position: absolute;
    top: var(--header-height);
    left: var(--container-padding);
    padding-block: 8px;
    padding-inline: 10px;
    background-color: var(--grey-light);  
    border-radius: var(--border-radius-content);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    font-size: 12px;
  }
  @media (max-width: 1199px) {
      left: 0;
      border-bottom-left-radius: 0;
      padding-inline: var(--container-padding) 10px;
  }
  &.hidden-xxx {
    @media (min-width: 1400px) {
        display: none;
    }      
  }
}

/* Angepasste Abstände je nach Funktionen in Hauptnavigation */    
.shop_table:has(.quicksearch_permanent),
.shop_table:has(.vororder_active) {
    .container:has(>.breadcrumb_wrapper),
    .toggle-switch,
    .uvp_toggle_wrapper {
        top: calc(var(--header-height) + 50px);
    }
    
    .col_content {
        padding-top: 50px;
        
        @media (max-width: 991px) {
            padding-top: 40px;
        }
    }

    .col_left {
        top: calc(var(--header-height) + 100px) !important;
        height: calc(100vh - (var(--header-height) + 100px)) !important;
    }

    &:has(.vororder_active):has(.quicksearch_permanent) {
        .quicksearch_permanent {
            border-top: 1px solid #FFFFFF;
            top: calc(var(--header-height) + 50px);
        }
        .col_content {
            padding-top: 100px;

            @media (max-width: 991px) {
                padding-top: 80px;
            }
        }
        .col_left {
            top: calc(var(--header-height) + 150px) !important;
            height: calc(100vh - (var(--header-height) + 150px)) !important;
        }
    }
}
.shop_table:has(.quicksearch_permanent) {
    .toggle-switch,
    .uvp_toggle_wrapper,
    .container:has(>.breadcrumb_wrapper) {
        top: calc(var(--header-height) + 50px);
    }
    &:has(.vororder_active) {
        .toggle-switch,
        .uvp_toggle_wrapper,
        .container:has(>.breadcrumb_wrapper) {
            top: calc(var(--header-height) + 101px);
        }
    }
    
    .toggle-switch,
    .uvp_toggle_wrapper {        
        @media (min-width: 1200px) {
            padding-inline: 0;
        }
    }
}
.shop_table:has(.quicksearch_container .navbar-collapse:is(.in, .collapsing:not([aria-expanded="false"]))) {
    .toggle-switch,
    .uvp_toggle_wrapper,
    .container:has(>.breadcrumb_wrapper) {
        top: calc(var(--header-height) + 50px);
    }
    &:has(.vororder_active) {
        .toggle-switch,
        .uvp_toggle_wrapper,
        .container:has(>.breadcrumb_wrapper) {
            top: calc(var(--header-height) + 101px);
        }
    }
}
.shop_table:has(.uvp_toggle_wrapper) {
    .container:has(>.breadcrumb_wrapper) {
        padding-top: 40px;
        
        @media (min-width: 1400px) {
            padding-top: 0 !important;
        }
    }
}


/* Hide default checkbox */
.toggle-switch input {
    pointer-events: none;
    position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* The track (background) */
.slider {
  position: relative;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc; /* Off color */
  transition: .4s;
  border-radius: 50px;
  height: 20px;
  width: 40px;
  margin: 0;
}

/* The knob (white circle) */
.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

/* When checked: change background color */
input:checked + .slider {
  background-color: #3498db; /* Blue from your image */
}

/* When checked: move the knob to the right */
input:checked + .slider:before {
  transform: translateX(21px);
}

/* Such-Icon im Header ausblenden */
body[data-kat-stufe] .quicksearch_link {
  display: none;
}
/* Permanente Quicksearch */
.navbar-header form.suchformular {
    margin-top: 0;
}
form.suchformular #quicksearch_suchstring + span > button {
  border: 1px solid #134381;
  border-left: 0;
  color: #FFFFFF;
  background-color: #134381;
  background-image: none;
  padding-inline: 15px;
  border-radius: 0px;
  height: 50px;
}

.quicksearch_permanent > form.suchformular {
  position: relative;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: calc(var(--container-padding) - 15px);
  border-radius: 0px;
  height: 50px;
}

form.suchformular #quicksearch_suchstring::placeholder {
  color: #ffffff;
}

.quicksearch_permanent {
  z-index: 3;
  position: absolute;
  top: var(--header-height);
  left: 0;
  width: 100%;
  background-color: var(--main-color);

  .input-group {
    display: flex;
      
    > #quicksearch_suchstring {
      border: 1px solid #134381;
      border-right: 0;
      color: #FFFFFF;
      font-weight: 500;
      background-color: #134381;
      box-shadow: none;
      order: 2;
      padding-inline: 0;
      text-align: left;
      height: 50px;
    
      &:focus-visible {
         box-shadow: none !important;
         outline: 0px;
         border-radius: 0px !important;
       }
    }
    
    > .input-group-btn {
      width: auto;
    
      > .btn {
        margin: 0;
        border: 1px solid #DDDDDD;
        border-left: 0;
        background-image: none;
        padding-inline: 15px;
        border-radius: 6px;
    
        > .bi {
        &:before {
           font-size: 20px;
           font-weight: 700 !important;
         }
        }
      }
    }
  }
}



header > .uvp_toggle_wrapper {
  pointer-events: none;
  position: absolute;
  /*z-index: 5;*/
  top: var(--header-height);
    
  @media (max-width: 1199px) {
    padding-right: 0;
      
    #uvp_toggle {
      + label {
          padding-right: var(--container-padding);
          border-bottom-right-radius: 0;
      }
    }
  }
}



div.aktion_corner img,
div.promo_corner img {
  max-height: 35px;
  max-width: none;
  width: auto;
}

div.artikel_box_preis {
    display: flex;
    flex-direction: column;
    align-content: flex-start !important;
    justify-content: center;
    width: 100%;
    max-width: 300px;
    overflow: hidden;
    box-sizing: border-box;
}

div.artikel_box_preis > div {
    width: 100%;
}

.artikel_box_preis div.uvp_preis,
.artikel_box_preis .artikel_preis,
.artikel_box_preis .strike_through_price {
    width: 100% !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex !important;
    justify-content: space-between;
}

/*
.artikel_box_preis div.uvp_preis,
.artikel_box_preis .artikel_preis,
.artikel_box_preis .strike_through_price,*/
.artikelliste_einspaltig_preis .uvp_preis,
.artikelliste_einspaltig_preis .artikelliste_preis,
.artikelliste_einspaltig_preis .artikelliste_preis .artikel_preis,
.artikelliste_einspaltig_preis .artikelliste_preis .artikel_preis .strike_through_price {
    width: 150px;
    display: flex !important;
    justify-content: space-between;
}
.artikelliste_einspaltig_preis .artikelliste_preis {
    flex-wrap: wrap;
}
.optionsartikel .artikel_box_content_wrapper {
    flex-grow: 1;
}

.artikel_box_preis .strike_through_price,
.artikelliste_einspaltig_preis .artikelliste_preis .artikel_preis .strike_through_price {
  color: var(--grey-dark);
  text-decoration: none;
}
.artikel_box_preis .strike_through_price span,
.artikelliste_einspaltig_preis .artikelliste_preis .artikel_preis .strike_through_price span {
  text-decoration: line-through;
}
.artikel_box_preis .strike_through_price span:first-child,
.artikelliste_einspaltig_preis .artikelliste_preis .artikel_preis .strike_through_price span:first-child {
  text-decoration: none !important;
}

#preis .uvp_preis,
#preis #artikel_preis {
  display: flex;
  align-items: flex-end;
  gap: 25px;
}

#preis .uvp_preis span:first-child,
#preis #artikel_preis > span:first-child {
  flex: 0 0 60px;
}

#preis .uvp_preis span:nth-child(2),
#preis #artikel_preis > span:nth-child(2) {
  flex: 0 0 150px;
  text-align: right;
}

#preis .uvp_preis span:nth-child(3),
#preis #artikel_preis > span:nth-child(3) {
  text-align: left;
}

#preis .mwst_info {
  font-size: 16px;
  color: var(--grey-dark);
}

div.kundendaten_box {
  flex-direction: row;
  gap: 50px;
}

.konditionen {
  background-color: var(--grey-light);
  padding: 25px;
  border-radius: var(--border-radius-content);
  margin-bottom: 15px;
}

.konditionen > .kondition {
  display: flex;
  gap: 25px;
}

.konditionen > .kondition .kondition_label {
  flex: 1 1 250px;
}

.konditionen > .kondition .kondition_wert {
  flex: 0 0 50px;
  text-align: right;
}

.konditionen > a {
  margin-top: 10px;
}

.schnellbestellung.alert-info {
  padding: 5px !important;
}

/* Priceinfo */
.preisinfo_tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.preisinfo_tooltip i {
  background-color: var(--accent-color);
  color: #ffffff;
  border-radius: 50%;
  height: 25px;
  width: 25px;
  text-align: center;
  display: inline-block;
}
.preisinfo_tooltip:hover .price_info_content {
  visibility: visible;
}

.price_info_content {
  visibility: hidden;
  position: absolute;
  z-index: 5;
  background-color: var(--grey-light);
  padding: 15px;
  border-radius: var(--border-radius-content);
  font-style: normal;
  bottom: 100%;
  left: 15px;
  font-size: 14px;
  color: #333;
  transform: translateX(-100%);
}

.price_info_content .preis_info {
  display: flex;
  flex-direction: column;
}
.price_info_content .preis_info > div {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;
}

.price_info_content .preis_info > div:first-child {
  margin-bottom: 10px;
}

.price_info_content .preis_info > div > span:first-child {
  flex: 0 0 100px;
  display: flex;
  justify-content: space-between;
}

.price_info_content .preis_info > div > span:last-child {
  flex: 0 0 80px;
  text-align: right;
}

@media (max-width: 767px) {
  #preis .uvp_preis,
  #preis #artikel_preis {
    gap: 0px;
    flex-wrap: wrap;
  }

  #preis .uvp_preis .mwst_info,
  #preis #artikel_preis .mwst_info {
    padding-left: 5px;
  }

  #preis .uvp_preis > span,
  #preis #artikel_preis > span {
    flex-shrink: 0;
    white-space: nowrap;
    margin-right: 5px;
  }

  .preisinfo_tooltip {
    flex-shrink: 1;
  }

  div.startartikel, div.optionsartikel {
    &.splide {
      > .splide__arrows {
        display: none;
      }
    }
  }
  h2.content.start {
    &:has(+ .startartikel), &:has(+ .start_kategorien_container) {
      + .startartikel,
      + .start_kategorien_container .kat_content {
        padding-top: calc(2 * var(--cms-padding) + 80px);
      }
    }
  }
}

#shop_table ~ .swal2-container {
  top: 0px !important;
}


/* Image Map Explosionszeichnung */
.image_map_wrapper {
    .image-map-container {
        .map-hotspot {
            transition: all ease-in-out .3s;
            outline: 0;
            border-radius: var(--border-radius-content);
            background: var(--accent-color);
            opacity: 0;

            &.hovered {
                opacity: .3;
            }
        }
        > map {
            area {
                cursor: pointer;
            }
        }
    }
}
.map-hotspot-anchor {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}



/* XXX> kja 2026-05-20: (Schnellbestellung) Aktionszeile CSV / Merkliste / Leeren */
.wk_zusatzaktionen_inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5em;
}

.wk_zusatzaktionen_left {
  flex: 0 0 auto;
}

.wk_zusatzaktionen_right {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35em;
  flex: 0 0 auto;
  margin-left: auto;
}

.wk_schnellbestellung_csv_panel {
  width: 100%;
  margin-top: 0.5em;
}

.wk_schnellbestellung_csv_panel_body {
  padding: 0.75em 0 0;
}

.wk_csv_file_hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.wk_csv_file_group button {
    width: 180px;
}

.wk_csv_file_group {
    display: flex;
    margin-bottom: 0.5em;
}

.wk_csv_file_group input {
    flex: 1 0 250px;
}

#wk_csv_bulk_btn:disabled {
    cursor: wait !important;
}

/* XXX> tma/cur 2026-08-19: (Schnellbestellung) Schnellbestellung via CSV-File im Warenkorb Overlay-Darstellung */
.wk_csv_bulk_overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
}

.wk_csv_bulk_overlay.is-visible {
    display: flex;
}

.wk_csv_bulk_overlay_inner {
    background: #fff;
    color: #111;
    padding: 2em 2.5em;
    border-radius: 8px;
    text-align: center;
    min-width: 240px;
    max-width: 90vw;
}

.wk_csv_bulk_overlay_clock {
    display: inline-block;
    font-size: 2.5rem;
    animation: wk_csv_bulk_spin 1.2s linear infinite;
}

.wk_csv_bulk_overlay_title {
    margin: 0.75em 0 0.25em;
    font-weight: 600;
}

.wk_csv_bulk_overlay_progress {
    margin: 0;
}

@keyframes wk_csv_bulk_spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* <XXX */

.wk_csv_bulk_feedback {
  margin-top: 0.5em;
}

.kommission_wrapper {
    position: relative;
    display: inline-block; /* oder inline-flex */
}

.kommission_icon {
  font-size: 20px;
}

.kommission_inputfeld {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    z-index: 10;
    min-width: 300px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.kommissionstext_input {
    width: 100%;
    box-sizing: border-box;
}


.checkbox input {
    transition: none;
}

.vertreter_kundensuche button.btn {
    height: 54px;
}
/* // <XXX */