body { padding: 136px 0 0 0; } @media (max-width: 1399px){ body { padding: 82px 0 0 0; } } @media (max-width: 991px){ body { padding: 132px 0 0 0; } } header { position: fixed; z-index: 200; left: 0; top: 0; right: 0; } #main-header { border-bottom: 3px solid; position: relative; z-index: 1; } #header-logo a { position: relative; display: block; height: 100%; } /*#header-middle { max-width: 880px; }*/ @media (min-width: 992px){ #header-sortiment { max-width: 250px; } #header-search { max-width: 600px; } } #header-service li { position: relative; list-style: none; } #main-navigation li.header-language, #header-service li.header-language { padding: 0.375rem; } #main-navigation li.header-language ul > li, #header-service li.header-language ul > li { padding: 0.125rem; } #main-navigation li.header-language ul > li > span, #main-navigation li.header-language ul > li > a, #header-service li.header-language ul > li > span > span, #header-service li.header-language ul > li > a { display: block } #main-navigation li.header-language ul > li > span > span, #main-navigation li.header-language ul > li > a > span, #header-service li.header-language ul > li > span > span, #header-service li.header-language ul > li > a > span { display: block; width: 26px; height: 26px; background-repeat: no-repeat; background-position: center; background-size: 16px auto; border: 1px solid #878786; border-radius: 50%; } #main-navigation li.header-language ul > li > a:hover > span, #header-service li.header-language ul > li > a:hover > span { border: 2px solid #212529; } #main-navigation li.header-language ul > li > span > span, #header-service li.header-language ul > li > span > span { border: 2px solid #212529; } #header-service li.header-basket a { position: relative; } #header-service li.header-basket a span { display: none; position: absolute; right: -8px; bottom: -4px; width: 16px; height: 16px; line-height: 15px; font-size: 11px; text-align: center; border-radius: 50%; } #header-service li.header-basket.full a span { display: block; } #header-service li.header-service-with-sub { position: relative; } #header-service li.header-service-with-sub > a { position: relative; z-index: 5; } #header-service li.header-service-with-sub:hover:after { display: block; content: ""; position: absolute; z-index: 2; left: 0; top: 0; right: 0; bottom: 0; background: #ffffff; } #header-service li.header-service-with-sub:hover { box-shadow: 0 0 10px rgba(0,0,0,0.5); z-index: 10; } #header-service li.header-service-with-sub:hover a { color: #0069b4 !important; } #header-service li.header-service-with-sub > div { display: none; position: absolute; z-index: 2; top: 46px; right: 0; background: white; box-shadow: 0 0 10px rgba(0,0,0,0.5); } #header-service li.header-service-with-sub:hover > div { display: block; } #header-service li.header-service-with-sub:hover:after { display: block; content: ""; position: absolute; z-index: 2; left: 0; top: 0; right: 0; bottom: 0; background: #e3e7eb; } #header-service li.header-service-with-sub:hover > div a { color: #000000 !important; } #header-service li.header-service-with-sub:hover > div a:hover { color: #0069b4 !important; } #header-service li.header-service-with-sub .preview { max-height: 80vH; width: 80vW; max-width: 400px; overflow: auto; } #header-service li.header-service-with-sub .preview.preview600 { max-width: 600px; } #header-service li.header-service-with-sub .previewimage { width: 68px; } #header-service li a.sort { display: block; width: 24px; height: 24px; background-repeat: no-repeat; background-size: 80% auto; background-position: center; } #header-service li a.sort.sort_1 { background-image: url('/www_partner/pages/img/sortiment/sortiment_fehr_878786.svg'); } #header-service li a.sort.sort_1:hover { background-image: url('/www_partner/pages/img/sortiment/sortiment_fehr_0069b3.svg'); } body.scrolled #header-service li a.sort.sort_1 { background-image: url('/www_partner/pages/img/sortiment/sortiment_fehr_white.svg'); } body.scrolled #header-service li a.sort.sort_1:hover { background-image: url('/www_partner/pages/img/sortiment/sortiment_fehr_black.svg'); } #header-service li a.sort.sort_2 { background-image: url('/www_partner/pages/img/sortiment/sortiment_holzbau_878786.svg'); } #header-service li a.sort.sort_2:hover { background-image: url('/www_partner/pages/img/sortiment/sortiment_holzbau_0069b3.svg'); } body.scrolled #header-service li a.sort.sort_2 { background-image: url('/www_partner/pages/img/sortiment/sortiment_holzbau_white.svg'); } body.scrolled #header-service li a.sort.sort_2:hover { background-image: url('/www_partner/pages/img/sortiment/sortiment_holzbau_black.svg'); } #header-service li a.sort.sort_3 { background-image: url('/www_partner/pages/img/sortiment/sortiment_holzbau_878786.svg'); } #header-service li a.sort.sort_3:hover { background-image: url('/www_partner/pages/img/sortiment/sortiment_holzbau_0069b3.svg'); } body.scrolled #header-service li a.sort.sort_3 { background-image: url('/www_partner/pages/img/sortiment/sortiment_holzbau_white.svg'); } body.scrolled #header-service li a.sort.sort_3:hover { background-image: url('/www_partner/pages/img/sortiment/sortiment_holzbau_black.svg'); } .header-service-sub-body #leftside-navigation { margin: 0 !important; padding: 0; } .header-service-sub-body #leftside-navigation ul { width: auto !important; margin: 0 !important; padding: 0; } .header-service-sub-body #leftside-navigation ul li a { display: flex; flex-wrap: nowrap; width: auto !important; } .header-service-sub-body #leftside-navigation ul li.current a { background: #7f7f7f; color: #ffffff !important; } .header-service-sub-body #leftside-navigation ul li.current a:hover { color: #ffffff !important; cursor: default; } .header-service-sub-body #leftside-navigation ul li a div { position: static !important; } .header-service-sub-body #leftside-navigation ul li a div:nth-of-type(1) { width: 32px; font-size: 15px; } .header-service-sub-body #leftside-navigation ul li a div:nth-of-type(2) { padding-left: 4px; font-size: 14px; } #header-sortiment { height: 37px; } #header-sortiment > ul { position: relative; height: 37px; margin-bottom: -70px; background: #ffffff; padding: 0; border: 1px solid #e3e7eb; overflow: hidden; transition: height 0.3s; } #header-sortiment > ul:hover { height: 107px; } #header-sortiment > ul:before { display: block; content: ""; position: absolute; top: 14px; right: 7px; border-style: solid; border-width: 8px 6px; border-color: #e3e7eb transparent transparent transparent; } #header-sortiment > ul:hover:before { border-color: #878786 transparent transparent transparent; } #header-sortiment > ul > li { list-style: none; } #header-sortiment > ul > li > span, #header-sortiment > ul > li > a { display: block; height: 35px; padding: 5px 30px 5px 10px; line-height: 25px; color: #878786; white-space: nowrap; } #header-sortiment > ul > li > a:hover { color: #0069b4; } body.sortiment #header-sortiment { display: block !important; position: fixed; left: 0; top: 83px; right: 0; max-width: 100%; padding: 0.75rem; height: auto; background: #878786; } body.sortiment #header-sortiment > ul { height: 107px; } /*******| Header NAVIGATION |*********************************************************************************************************************/ #main-navigation li { position: relative; list-style: none; } #main-navigation .navi-li-1:hover .navi-a-1 { text-decoration: none; background: #f8f9fa; } #main-navigation .navi-li-1.current .navi-a-1 { margin-bottom: -1px; text-decoration: none; background: #f8f9fa; border-style: solid; border-width: 0 1px 1px 1px; border-color: transparent #dcdcdc #f8f9fa #dcdcdc; } #main-navigation .navi-li-1 .navi-ul-2 { display: none; } #main-navigation .navi-li-1.open .navi-ul-2 { display: block; } #main-navigation .navi-li-2 { border-top: 1px solid #dcdcdc; } #main-navigation .navi-li-2:first-child { border-top: none; } body.scrolled #main-navigation > div { display: block !important; padding: 1.5rem!important; } body.scrolled #main-navigation > div > div { padding-left: 1.5rem!important; } body.scrolled #header-hamburger { display: block !important; } body.scrolled #main-navigation { display: block !important; position: fixed; top: 83px; right: -400px; bottom: 0; width: 400px; margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; } body.scrolled.navi #main-navigation { right: 0; transition: all 0.5s; } body.scrolled #main-navigation .navi-ul-1 { display: block!important; padding: 0 !important; } body.scrolled #main-navigation .navi-a-1 i { float: right; line-height: inherit; margin-left: 2rem; } body.scrolled #main-navigation .navi-li-1 .navi-ul-2 { display: none!important; position: static!important; border: none!important; } body.scrolled #main-navigation .navi-li-1.open .navi-ul-2 { display: block!important; } body.scrolled #main-navigation .navi-li-1.open .navi-a-2 { text-align: left!important; white-space: normal; } body.scrolled #main-navigation .navi-li-1.open .navi-ul-3 { display: block!important; position: static!important; } body.scrolled #main-navigation .navi-li-1.open .navi-a-3 { padding: 0.5rem 1.5rem; white-space: normal; } @media (min-width: 1400px){ #main-navigation .navi-a-1 i { display: none; } #main-navigation .navi-li-1:hover .navi-ul-2 { display: block; } #main-navigation .navi-ul-2 { position: absolute; left: 0; top: 100%; min-width: 100%; border-style: solid; border-width: 0 1px 3px 1px; } #main-navigation #navi-finder .navi-ul-2 { left: -100%; right: auto; min-width: 300%; } #main-navigation #navi-info .navi-ul-2 { left: -100%; right: auto; } #main-navigation .navi-a-2 { white-space: nowrap; text-align: left !important; } #main-navigation .navi-ul-3 { width: 100%; } #main-navigation .navi-a-3 { padding: 0 1.5rem; white-space: nowrap; text-align: left !important; } } @media (max-width: 1399px){ #main-navigation .navi-a-2 { padding: 0.5rem 1.5rem!important; } #main-navigation > div { padding: 0.5rem 1.5rem!important; } } @media (min-width: 768px){ #header-logo { width: 150px; } #header-service { order: 2; } } @media (min-width: 769px) AND (max-width: 1399px){ #main-navigation { display: block!important; position: fixed; top: 83px; right: -400px; bottom: 0; width: 400px; margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; transition: all 0.5s; } body.navi #main-navigation { right: 0; } .navi-ul-1 { display: block!important; padding: 0 !important; } .navi-a-1 i { float: right; line-height: inherit; margin-left: 2rem; } .navi-li-1.open .navi-ul-2 { display: block!important; position: static!important; border: none!important; } .navi-li-1.open .navi-a-2 { text-align: left!important; } .navi-li-1.open .navi-ul-3 { display: block!important; position: static!important; } .navi-li-1.open .navi-a-3 { padding: 0.5rem 1.5rem; } } @media (max-width: 959px){ #header-service li.header-service-with-sub > div { position: fixed; z-index: 1; top: 62px; left: 2vW; right: 2vW; } #header-service li.header-service-with-sub .preview { width: 100%; max-width: 100%; } } @media (max-width: 768px){ #main-navigation { display: block!important; position: fixed; top: 83px; right: -100vW; bottom: 0; width: 100vW; margin: 0; padding: 0; border: none!important; overflow-x: hidden; overflow-y: auto; transition: all 0.5s; } body.navi #main-navigation { right: 0; } .navi-ul-1 { display: block!important; padding: 0 !important; } .navi-a-1 i { float: right; line-height: inherit; margin-left: 2rem; } .navi-li-1.open .navi-ul-2 { display: block!important; position: static!important; border: none!important; } .navi-li-1.open .navi-a-2 { text-align: left!important; } .navi-li-1.open .navi-ul-3 { display: block!important; position: static!important; } .navi-li-1.open .navi-a-3 { padding: 0.5rem 1.5rem; } .header-myshop > div.header-service-sub { display: none !important; } } .header-mobile-language > span { display: block; padding: 0.5rem; font-weight: 600; } .header-mobile-language > ul { display: flex; } /*******| Header Search |*********************************************************************************************************************/ #es_shadow { display: none; position: fixed; z-index: 9999; left: 0; top: 83px; right: 0; bottom: 0; background: rgba(0,0,0,0.5); } body.elasticsearch #es_shadow { display: block; } #es_container { position: relative; border-style: solid; border-width: 0 0 1px 0; } #es_container form button { display: block; border: none; outline: none; background: none; line-height: 37px !important; } #es_container form input { border: none; outline: none; background: none; } @media (min-width: 992px){ #es_container { position: relative; border-style: solid; border-width: 0 0 2px 0; } #es_container form button { background: #e3e7eb !important; padding-left: 8px !important; line-height: 34px !important; } #es_container form input { background: #e3e7eb !important; padding: 6px 0 !important; line-height: 22px !important; } body.scrolled #es_container { border-width: 0; } body.scrolled #es_container form button { line-height: 37px !important; } body.scrolled #es_container form input { line-height: 25px !important; } } #es_result { display: none; position: fixed; z-index: 10001; left: 0; top: 83px; right: 0; bottom: 50px; } body.elasticsearch #es_result { display: block; } #es_result > div { display: flex; position: relative; min-height: 200px; max-height: 100%; width: 80vW; max-width: 800px; margin: 0 auto; padding: 0 0 52px 0; border-top: 1px solid #888888; background: #ffffff; box-shadow: 0 0 9px 0 rgba(0,0,0,.16); } #es_result > div > #esr_footer { position: absolute; left: 0; bottom: 0; right: 0; height: 52px; padding: 10px 20px; background: #dfdfdf; } #es_result > div > #esr_footer button { position: relative; display: inline-flex; padding: 5px 20px; border: none; border-radius: 3px; outline: 0; font-size: 15px; font-weight: 500; text-decoration: none; color: #fff; background: #777777; cursor: pointer; line-height: 22px; white-space: initial; transition: background 250ms ease-in-out; } #es_result > div > #esr_footer button:hover { background: #494949 } #es_result > div > div#esr_left { position: relative; max-height: 100%; padding: 54px 0 0 0; overflow-x: hidden; overflow-y: auto; } #es_result > div > div#esr_right { position: relative; max-height: 100%; overflow-x: hidden; overflow-y: auto; } #es_result > div > div#esr_left { width: 50%; border-right: 2px solid #f6f6f6; } #es_result > div > div#esr_right { width: 50%; } #es_result > div > div > .esr_header { position: absolute; left: 0; top: 0; right: 0; padding: 20px 20px 10px; font-size: 20px; line-height: 24px; font-weight: 300; color: #494949; } #es_result > div > div > .esr_list ul { padding: 0 10px 20px 10px; } #es_result > div > div#esr_left > .esr_list ul li { position: relative; overflow: hidden; } #es_result > div > div#esr_left > .esr_list ul li a { display: flex; align-items: flex-start; padding: 10px 15px; border-top: 1px solid #e6e6e6; color: #494949; cursor: pointer; transition: all 0.5s; } #es_result > div > div#esr_left > .esr_list ul li a:focus { outline: none; color: #005da5 !important;} #es_result > div > div#esr_left > .esr_list ul li a:hover { color: #005da5 !important; background: #f6f6f6 !important; } #es_result > div > div#esr_left > .esr_list ul li:first-child a { border-top: none; } #es_result > div > div#esr_left > .esr_list ul li a div:first-child { min-width: 75px; height: 60px; position: relative; } #es_result > div > div#esr_left > .esr_list ul li a div:first-child picture { display: inline-block; width: 60px; height: 60px; } #es_result > div > div#esr_left > .esr_list ul li a div:first-child picture img { width: 100%; height: 100%; object-fit: contain; } #es_result > div > div#esr_left > .esr_list ul li a div:last-child { width: 100%; } #es_result > div > div#esr_left > .esr_list ul li a div:last-child > span { display: inline-block; width: 100%; } #es_result > div > div#esr_left > .esr_list ul li a div:last-child > span:first-child { font-size: 15px; line-height: 22px; } #es_result > div > div#esr_left > .esr_list ul li a div:last-child > span:last-child { font-size: 11px; line-height: 18px; } #es_result > div > div#esr_right > div > div.esr_klassen { padding: 0 0 20px 0; border-top: 2px solid #f6f6f6; } #es_result > div > div#esr_right > div > div > .esr_header_nonfixed { padding: 20px 20px 10px; font-size: 20px; line-height: 24px; font-weight: 300; color: #494949; } #es_result > div > div#esr_right > div > div ul { padding-bottom: 0; } #es_result > div > div#esr_right > div > div.esr_marken ul li a { display: block; line-height: 1px; } #es_result > div > div#esr_right > div > div.esr_klassen ul li a { display: block; padding: 0 10px; border: none; line-height: 28px; font-size: 15px; text-decoration: none; color: #888888; transition: all 0.5s; } #es_result > div > div#esr_right > div > div.esr_klassen ul li a:hover > span:last-child { opacity: 1; background: #f6f6f6; right: 0; } #es_result > div > div#esr_right > div > div.esr_klassen ul li a:hover { color: #005da5; background: #f6f6f6; } #es_result > div > div#esr_right > div > div.esr_klassen ul li a:hover { background-image: linear-gradient(to right,transparent,#f6f6f6); } #es_result > div > div#esr_right > div > div.esr_klassen ul li a > span:last-child { position: absolute; align-items: center; opacity: 0; right: -20px; padding: 0 10px; transition: all .5s; } @media (max-width: 991px){ #es_result > div > div#esr_left { width: 1000%; } #es_result > div > div#esr_right { display: none; } } @media (max-width: 991px){ #header-sortiment { position: relative; z-index: 2; } #main-navigation { top: 132px !important; } body #header-search { display: block!important; position: fixed; z-index: 1; left: 0; top: 83px; right: 0; padding: 0 !important; background: #ffffff; } body #header-search > div { padding: 0 28px; } body #header-search input { line-height: 2rem; } body #es_shadow { top: 132px; } body #es_result { top: 132px; bottom: 16px; } body #es_result { padding: 0 16px; } body #es_result > div { width: 100%; } } @media (max-width: 959px){ #filter > span { top: 96px; right: -24px; width: 24px; height: 48px; padding: 6px 0; line-height: 36px; } #filter.open > span { top: 0; left: 50%; width: 48px; height: 24px; padding: 0; border-radius: 0 0 3px 3px; margin-left: -24px; line-height: 24px; } } @media (max-width: 768px){ body #header-search > div { padding: 0 16px; } .block_50000.p-2 { padding: 0.5rem 1rem !important } #filter-header { padding-left: 1rem !important; } } footer p { margin-bottom: 2rem !important; } footer a { color: white !important; opacity: 0.8; } footer a:hover { color: white !important; opacity: 1; } footer .p-2 { padding: 1rem !important; } footer a.btn-cms { border-radius: 3px !important; padding: 3px 12px !important; font-weight: 400 !important; } footer .align_24 a.btn-cms { background: white !important; color: #0069b4 !important; border-color: white !important; } footer .footer-padding-150-050 .p-2 { padding: 1.5rem !important; } footer .footer-padding-150-050 .p-2 .p-2 { padding: 0.5rem !important; } body.scrolled #es_container form input { color: #222222 !important; } #hOtherCustomer a i { display: inline-block; width: 24px; height: 28px; background-image: url('/pagespartner/img/switch_user_7f7f7f.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; } #hOtherCustomer:hover a i { background-image: url('/pagespartner/img/switch_user_0069b3.svg'); } body.scrolled #hOtherCustomer a i { background-image: url('/pagespartner/img/switch_user_ffffff.svg'); } body.scrolled #hOtherCustomer:hover a i { background-image: url('/pagespartner/img/switch_user_000000.svg'); } #hOtherCustomer.othercustomer a i { background-image: url('/pagespartner/img/switch_user_fa0000.svg') !important; }