@charset "UTF-8";
/*
 * Platz für eigene Änderungen direkt als CSS
 * Die hier gemachten Änderungen überschreiben ggfs. andere Styles, da diese Datei als letzte geladen wird.
 */
#comparelist-badge, #badge-wl-count, .fa-sup {
  background-color: #445055;
  text-align: center;
  padding: 0.05em 0.35em 0.05em 0.3em;
  font-weight: 700;
  margin-top: 0;
  font-family: "Raleway", sans-serif;
}

.box-content-wrapper p {
  line-height: 2rem;
}

.exo h1, h2, h3, h4, h5, p, span {
  font-family: "Exo 2", sans-serif;
}

@media (max-width: 575px) {
  p {
    font-size: 15px;
  }
}
h1, h2 {
  font-family: "Exo 2", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
}

@media (max-width: 767px) {
  h1 {
    font-size: 2.1rem;
  }
  h2 {
    font-size: 1.5rem;
  }
}
h3 {
  font-family: "Exo 2", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
}

h4 {
  font-family: "Exo 2", sans-serif;
  font-size: 1rem;
  font-weight: 700;
}

.wn-header-container {
  margin-top: -1rem;
  background-position-x: left !important;
}

.wn-header-outer {
  display: flex;
  flex-direction: column;
}

.wn-horizontal-scroll {
  overflow-x: auto;
  justify-content: start;
  padding: 0 2rem;
  font-size: 0.75rem;
}

.wn-horizontal-scroll::-webkit-scrollbar {
  display: none;
}

.wn-center {
  text-align: center;
}

@media (min-width: 768px) {
  .wn-horizontal-scroll {
    justify-content: center;
  }
}
.wn-einsatzbereiche {
  aspect-ratio: 16/10;
  border-radius: 1rem;
  width: 100%;
  background-size: 100% 100% !important;
  background-position: center;
  cursor: pointer;
  transition: all 300ms ease-in-out;
}

.wn-einsatzbereiche:hover {
  background-size: 130% 130% !important;
}

.wn-einsatzbereiche p {
  padding-top: 0.5rem;
  text-shadow: 0 0 10px #000;
  text-transform: uppercase;
  font-weight: 600;
}
@media (max-width: 767px) {
  .wn-einsatzbereiche p {
    font-size: 1rem !important;
    line-height: 1.2rem;
  }
}

.wn-kategorie-element-inner {
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  max-width: 152px;
  margin-bottom: 1rem;
}

.wn-kategorie-element-inner p {
  font-weight: 700;
  color: #445055;
  text-align: center;
}

.wn-kategorie-element-inner:hover {
  background: #445055;
  cursor: pointer;
}

.wn-kategorie-element-inner:hover .wn-kategorie-element-top {
  background: linear-gradient(0deg, #0072BC, #5eb9f1);
}

.wn-kategorie-element-inner:hover p {
  color: white;
}

.wn-kategorie-element-inner .wn-kategorie-element-top {
  border-radius: 999px;
  background: linear-gradient(0deg, #212121, #353535);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  margin-bottom: 1rem;
  transition: all 300ms ease-in-out;
}
@media (max-width: 991px) {
  .wn-kategorie-element-inner .wn-kategorie-element-top {
    padding: 1rem;
  }
  .wn-kategorie-element-inner .wn-kategorie-element-top img {
    width: 50px !important;
    height: 50px !important;
  }
}

div:has(> div.wn-kategorie-grid) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.wn-kategorie-grid {
  width: 100%;
  max-width: 992px;
}
@media (max-width: 991px) {
  .wn-kategorie-grid {
    margin-right: 0;
    margin-left: 0;
  }
}

.wn-safecase-inner h1, .wn-safecase-inner h2, .wn-safecase-inner h3, .wn-safecase-inner p {
  color: white;
}

.wn-safecase-inner {
  padding: 2rem;
  width: 100%;
}
@media (min-width: 992px) {
  .wn-safecase-inner {
    padding: 3rem;
  }
}

.wn-safecase-image {
  width: 100%;
  background-image: url("/media/image/storage/opc/bako-safecase.png");
  background-size: cover;
  aspect-ratio: 16/10;
}

.wn-safecase-outer {
  display: flex;
  overflow: hidden;
  flex-direction: column;
}

.wn-header-inner {
  width: 100%;
}

.wn-header-image {
  width: 100%;
}

.wn-header-image {
  width: 100%;
  background-image: url("/media/image/storage/opc/case-freigestellt.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  aspect-ratio: 3/2;
  display: block;
}
@media (max-width: 575px) {
  .wn-header-image {
    aspect-ratio: 1;
  }
}

@media (min-width: 768px) {
  .wn-header-container {
    background-position-x: right !important;
  }
  .wn-header-outer {
    flex-direction: row;
  }
  .wn-safecase-inner {
    width: 60%;
  }
  .wn-safecase-image {
    width: 40%;
    min-height: 406px;
  }
  .wn-safecase-outer {
    flex-direction: row;
  }
  .wn-header-inner {
    width: 60%;
  }
  .wn-header-image {
    display: none;
  }
}
@media (min-width: 992px) {
  .wn-safecase-inner {
    width: 40%;
  }
  .wn-header-inner {
    width: 40%;
  }
  .wn-safecase-image {
    width: 60%;
    min-height: 406px;
  }
  .wn-header-image {
    display: block;
    width: 60%;
    min-height: 375px;
    aspect-ratio: initial;
    background-position: left 4rem bottom -2rem;
  }
}
.wn-href-primary {
  color: #0072BC;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.05rem;
}

.wn-href-secondary, .wn-href-secondary:hover {
  color: #95D2EB;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.05rem;
}

.wn-href-primary::after, .wn-href-secondary::after {
  padding-left: 0.5rem;
  content: "›";
}

.wn-we-bako-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
@media (max-width: 767px) {
  .wn-we-bako-image {
    min-height: auto !important;
  }
  .wn-we-bako-image > div {
    width: 100%;
  }
}

.wn-category-container {
  width: calc(100vw - 2rem);
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0;
}
@media (max-width: 991px) {
  .wn-category-container {
    width: 100vw;
  }
}

@media (min-width: 768px) {
  .wn-we-bako-image {
    display: none;
  }
}
@media (min-width: 992px) {
  .wn-we-bako-image {
    display: flex;
  }
  .wn-category-container {
    width: 100%;
    left: unset;
    transform: none;
    border-radius: 14px;
  }
}
.productlist-filter-headline {
  text-transform: uppercase !important;
  font-family: "Exo 2", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #0072BC;
  border-bottom: none !important;
}

.wn-category-list-item::before {
  content: "+" !important;
  order: 2;
}

.wn-category-list-item::after, .box .btn-filter-box::after {
  display: none !important;
}

.wn-category-list-item[aria-expanded=true]::before, :not(.navbar-toggler)[data-toggle=collapse][aria-expanded=true]::after {
  transform: none !important;
  content: "-" !important;
}

aside .nav-panel > .nav > .active > .nav-link {
  border-bottom: none !important;
  cursor: pointer;
}

aside .nav-panel .active > .nav-link a {
  color: #0072BC !important;
}

aside .nav-panel > ul > li > .nav-link {
  font-size: 1.25rem;
}
aside .nav-panel .nav-link {
  font-weight: 700;
  font-size: 1rem;
  transition: none;
}

.box-categories .dropdown .collapse, .box-categories .dropdown .collapsing {
  background: #0072BC !important;
  border-radius: 0.5rem;
}
.box-categories .dropdown .collapse .nav-link a,
.box-categories .dropdown .collapse .nav-item a,
.box-categories .dropdown .collapse .nav-link::before, .box-categories .dropdown .collapsing .nav-link a,
.box-categories .dropdown .collapsing .nav-item a,
.box-categories .dropdown .collapsing .nav-link::before {
  color: #CCC !important;
  font-size: 1rem;
}
.box-categories .dropdown .collapse .nav-item.active > a, .box-categories .dropdown .collapse .nav-item.active > span > a, .box-categories .dropdown .collapsing .nav-item.active > a, .box-categories .dropdown .collapsing .nav-item.active > span > a {
  color: #95D2EB !important;
}

.box .input-group {
  border-radius: 999px !important;
}

.box .input-group input {
  border-radius: 0.5rem 0 0 0.5rem !important;
  color: white;
  background: #333333;
  border-right: none;
  padding: 1rem;
}

.box .input-group .input-group-prepend .input-group-text {
  border-radius: 0 0.5rem 0.5rem 0 !important;
  color: white;
  background: #333333;
  padding: 1rem;
}

.box .btn-filter-box span {
  text-transform: uppercase;
  font-size: 1.25rem;
  font-weight: 700;
}

.box .btn-filter-box[aria-expanded=true]::before {
  transform: none !important;
  content: "\f068" !important;
}

.box .btn-filter-box::before {
  content: "+" !important;
  font-size: 1.25rem;
  font-weight: 700;
  order: 2;
}

.box .box-filter-hr {
  background: #333333;
}

@media (min-width: 1024px) {
  .wn-kategorie-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem;
  }
}
@media (min-width: 768px) {
  .wn-kategorie-header {
    margin-bottom: 3rem;
  }
}

.wn-kategorie-header-image img {
  box-shadow: 0 11px 16px rgba(0, 0, 0, 0.5019607843);
  border-radius: 1rem;
}

.wn-kategorie-header-image img {
  aspect-ratio: 16/9;
  object-fit: contain;
  width: 100%;
}

.h2 {
  font-family: "Exo 2", sans-serif;
  font-size: 3rem;
  color: #0072BC !important;
  font-weight: 700;
}
@media (max-width: 767px) {
  .h2 {
    font-size: 1.8rem;
  }
}

.desc p {
  font-family: "Exo 2", sans-serif;
  color: #445055 !important;
}

.btn-outline-secondary {
  border-radius: 0.75rem !important;
  background: #0072BC !important;
  color: white !important;
  border: none !important;
}

.btn-outline-secondary.active {
  background: #445055 !important;
}

#ed_list {
  border-radius: 0.75rem 0 0 0.75rem !important;
}

#ed_gallery {
  border-radius: 0 0.75rem 0.75rem 0 !important;
}

.productlist-page-nav-header-m .pagination {
  display: none;
}
@media (max-width: 767px) {
  .productlist-page-nav-header-m.productlist-page-nav {
    margin-top: 2rem;
  }
  .productlist-page-nav-header-m.productlist-page-nav .displayoptions > div {
    margin-bottom: 0.3rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

.pagination {
  gap: 5px;
  align-items: center;
}
.pagination .page-item.dropdown .dropdown-menu {
  gap: 5px;
}
.pagination .page-item .page-link {
  background-color: #445055;
  color: #fff;
  border-radius: 6px;
}
.pagination .page-item.active .page-link {
  color: #fff;
  background-color: #0072BC;
}

#product-list .product-wrapper {
  margin-bottom: 4rem;
}

/*# sourceMappingURL=custom.css.map */