header { position: fixed; z-index: 1000; left: 0; top: 0; right: 0; background: white; color: var(--schwarz); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12); } /*body.scrolled header { top: -66px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06); }*/ header:before { display: block; content: ""; position: absolute; z-index: 1; left: 0; top: 35px; right: 0; height: 2px; background: var(--hellgrau); } header:after { display: block; content: ""; position: absolute; z-index: 2; left: 0; top: 0; right: 50%; bottom: 60px; background: var(--gelb); } #header-main { position: relative; z-index: 3; } #header-main .container-1440 { max-width: 1360px; } #header-main > div { position: relative; height: 134px; background: white; } #header-main > div:before { display: block; content: ""; position: absolute; z-index: 1; left: 0; top: 35px; right: 0; height: 2px; background: var(--hellgrau); } body.scrolled #header-main > div:before { display: none; } #header-logo { position: absolute; z-index: 2; left: 0; bottom: 0; width: 304px; height: 134px; background-image: url("/www_partner/pages/img/logo_profi.svg"); background-repeat: no-repeat; background-position: -50px 0; background-size: auto 100%; } #header-logo a { position: absolute; z-index: 3; left: 30px; top: 20px; right: 30px; bottom: 20px; } /*#header-logo:before { display: block; content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 230px; background: var(--gelb); } #header-logo:after { display: block; content: ""; position: absolute; left: 230px; top: 0; border-style: solid; border-width: 67px 27px; border-color: var(--gelb) transparent transparent var(--gelb); } #header-logo a { position: absolute; z-index: 3; left: 60px; top: 39px; right: 60px; bottom: 49px; background-image: url("/www_partner/pages/img/hasler.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; }*/ #header-service { position: absolute; top: 0; right: 20px; } #header-service > div { border-left: 1px solid var(--dunkelgrau); } #header-service > div:first-child { border-left: none; } #header-service > div#hs-language a, #header-service > div#hs-language span { display: block; padding: 0 10px; font: 20px/35px 'FSDillonMedium'; } #header-service > div#hs-language a { color: var(--schwarz); background: white; text-decoration: none !important; text-transform: uppercase; } #header-service > div#hs-language a:hover { color: var(--rot); } #header-service > div#hs-language span { color: white; background: var(--schwarz); text-transform: uppercase; } #header-service > div#hs-service { padding: 0 30px; } #header-service > div#hs-service a { display: block; padding: 0 10px; font: 18px/35px 'FSDillonMedium'; color: var(--schwarz); background: white; text-decoration: none !important; transition: all 0.3s; } #header-service > div#hs-service a:hover { color: var(--rot); } #header-service > div#hs-call a { height: 35px; padding: 0 40px; color: var(--schwarz); background: white; text-decoration: none !important; } #header-service > div#hs-location a { height: 35px; padding: 0 40px; color: var(--schwarz); background: white; text-decoration: none !important; } .header-service-sub { z-index:123456} #header-icons { position: absolute; bottom: 0; right: 20px; left: 304px; } #hi-navi ul { position: relative; } #hi-navi li { list-style: none; padding: 0; } #hi-navi li > a { position: relative; display: block; text-decoration: none !important; color: inherit; } #hi-navi li > a > div:first-child { position: relative; display: flex; align-items: center; justify-content: center; height: 48px; min-width: 48px; } #hi-navi li > a > div:first-child i { position: relative; z-index: 2; font-size: 30px; transition: font-size 0.3s; line-height: 48px; } #hi-navi li > a:hover > div:first-child i { font-size: 28px; } #hi-navi li > a > div:first-child:before { display: block; content: ""; position: absolute; left: calc(50% - 24px); top: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--hellgrau); opacity: 0; } /*#hi-navi li:hover > a > div:first-child i { font-size: 28.5px; }*/ #hi-navi li:hover > a > div:first-child:before { opacity: 1; left: calc(50% - 28px); top: -4px; width: 56px; height: 56px; } #hi-navi li:hover > a > div:nth-child(2) { padding-top: 5px; } body.scrolled #hi-navi ul { min-width: 236px; } body.scrolled #hi-navi li { padding-left: 30px; } body.scrolled #hi-navi li:first-child { padding-left: 0px; } body.scrolled #hi-navi li:hover > a { color: var(--schwarz50); } body.scrolled #hi-navi li:hover > a > div:first-child:before { opacity: 0; } body.scrolled #hi-navi li:hover > a > div:nth-child(2) { padding-top: 0; } @media screen and (max-width: 768px){ body.scrolled #hi-navi li { padding-left: 0px; } } #hi-navi li > a > div:nth-child(2) { height: 33px; font: 15px/23px "FSDillon"; white-space: nowrap; overflow: hidden; opacity: 1; transition: padding 0.3s; } #hi-navi li > a > span { display: none; position: absolute; z-index: 10; top: 0; left: 50%; min-width: 24px; font: 15px/24px 'FSDillonBold'; text-align: center; background: var(--gelb); border-radius: 12px; box-shadow: var(--schattenbasketcount); } #hi-navi li.myshop > a > span { display: flex !important; align-items: center; justify-content: center; height: 24px; font-size: 12px; background: var(--gruen); color: white; transition: opacity 0.3s; } #hi-navi li.full > a > span { display: block; } body.scrolled #hi-navi li a > div:nth-child(2) { height: 0; width: 0; opacity: 0; } body.scrolled #hi-navi li a > div:nth-child(2):before { display: none; } #hi-navi nav { padding-top: 0.5rem; } #hi-navi nav .span { display: block; border-top: 1px solid rgba(255,255,255,0.8); border-bottom: 1px solid rgba(255,255,255,0.8); line-height: 37px; color: white; text-decoration: none; letter-spacing: 0.025em; } #hi-navi nav .span:last-child { border-bottom: none; } #hi-navi nav .span i { display: inline-block; width: 39px; } #hi-navi nav .span span { font: 18px/37px "FSDillonBold"; } #hi-navi nav .a { display: block; padding: 4px 10px 4px 39px; font: 17px/19px "FSDillon"; color: white; text-decoration: none; transition: padding 0.3s; letter-spacing: 0.5px; } #hi-navi nav .a:hover { padding: 4px 0px 4px 49px; } #hi-navi nav > div { margin-bottom: 20px; } #hi-navi nav > div > div { margin-top: 10px; } .span + .a { margin-top: 10px; } .a + .span { margin-top: 20px; } #hi-navi .header-service-sub { display: none; position: absolute; right: 0; top: 83px; min-width: 280px; max-width: 100vW; padding: 25px; background: var(--schwarz); color: white; } #hi-navi .hMyshop .header-service-sub { padding: 0; } #hi-navi .hMyshop .header-service-sub > div { padding: 25px; } body.scrolled #hi-navi .header-service-sub { top: 50px; } #hi-navi li.hMyshop .header-service-sub { display: block; height: 0; transition: all 0.3s; overflow: hidden; max-height: calc(100vH - 74px); overflow-y: auto; } #hi-navi li.hMyshop.open .header-service-sub { height: var(--height); } @media screen and (max-width: 1279px){ #hi-navi .header-service-sub { top: 50px; } } /*@media screen and (min-width: 960px) and (max-width: 1279px){ #header-logo { height: 68px; background-position: 0; } }*/ #hi-navi li.open .header-service-sub { display: block; } #hi-navi li.open > a:after { display: block; content: ""; position: absolute; left: calc(50% - 14px); bottom: -2px; border-style: solid; border-width: 0 14px 11px 14px; border-color: transparent transparent var(--schwarz) transparent; } #hi-navi .header-service-sub-header-title { padding: 0 20px 0 0; font: 24px/26px "FSDillonBold"; letter-spacing: 0.005em; } #hi-navi .header-service-sub-close { font-size: 14px; line-height: 14px; cursor: pointer; } #hi-navi #leftside-navigation { position: static; float: none; margin: 0; padding: 20px; } #hi-navi #leftside-navigation * { position: static !important; float: none; width: auto !important; min-width: 0; height: auto; margin: 0 !important; transition: none !important; } #hi-navi #leftside-navigation ul li { padding: 0; border-bottom: 1px solid var(--dunkelgrau); } #hi-navi #leftside-navigation ul li:last-child { border-bottom: none; } #hi-navi #leftside-navigation ul li a { display: flex; align-items: center; justify-content: space-between; width: auto; padding: 10px 0; } #hi-navi #leftside-navigation ul li a:hover { color: var(--rot) !important; } #hi-navi #leftside-navigation ul li a > div { background: none !important; border: none; color: inherit !important; } #hi-navi #leftside-navigation ul li a > div:first-child i { font-size: 1rem; } #hi-navi #leftside-navigation ul li a > div:first-child:before { display: none !important; } #hi-navi #leftside-navigation ul li a > div:last-child { width: calc(100% - 50px) !important; padding: 0; white-space: nowrap; font: 16px/19px 'FSDillonMedium'; opacity: 1 !important } @media screen and (max-width: 990px){ #hi-navi li#hMyshop:hover a > div:first-child:before { border-radius: 50%; } } #hi-search { padding: 0 70px 14px 70px } /*-----| HEADER: Search |--------------------------------------------------------------------------------------------------------------*/ #es_container form button { width: 46px; height: 42px; border: 0; text-align: center; font-size: 22px; line-height: 42px; padding: 0; background: var(--rot); color: white; border-radius: 0px 6px 6px 0px; } #es_container form input { height: 42px; line-height: 40px; padding: 0 46px 0 22px; background: white; color: var(--schwarz); border: 1px solid var(--dunkelgrau) !important; border-right: none !important; border-radius: 6px 0px 0px 6px !important; box-shadow: none !important; outline: none !important; } #es_container form input::placeholder { color: var(--schwarz50) !important; } #es_container form #searchcancel { width: 46px; height: 42px; text-align: center; font-size: 23px; line-height: 40px; border-top: 1px solid var(--dunkelgrau); border-bottom: 1px solid var(--dunkelgrau); color: var(--dunkelgrau); cursor: pointer; } #es_shadow { display: none; position: fixed; z-index: 9999; left: 0; top: 194px; right: 0; bottom: 0; background: rgba(0,0,0,0.5); } body.scrolled #es_shadow { top: 139px; } body.elasticsearch #es_shadow { display: block; } body.elasticsearch { overflow: hidden; } #es_result { display: none; position: fixed; z-index: 10001; left: 0; top: 194px; right: 0; bottom: 50px; } body.scrolled #es_result { top: 139px; } 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: 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 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; } #es_result .esr_header_nonfixed { padding: 20px 20px 20px 10px; font-size: 20px; line-height: 24px; font-weight: 300; color: #494949; } #es_result #esr_lef .esr_header_nonfixed { padding: 20px 20px 40px 10px; } @media screen and (max-width: 768px){ #es_result > div > #esr_footer { height: auto; } } /*-----| HEADER: RESPONSIVE |--------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width: 768px){ /*@media screen and (max-width: 959px){*/ /*body.scrolled header { top: -62px; }*/ header { box-shadow: none; } header #header-main { height: 132px;box-shadow: 0px 2px 4px rgba(61, 61, 63, 0.2); } header #header-main > div:before { display: none; } header #header-service { display: none !important; } #header-logo { top: 0; bottom: auto; width: calc(100vW - 192px); height: 62px; background-size: auto 82px; background-position: -34px -10px; } /*#header-logo:before { width: 103px; } #header-logo:after { left: 103px; border-width: 31px 14px; border-color: var(--gelb) white white var(--gelb); } #header-logo a { left: 20px; top: 15px; right: 0; bottom: 19px; background-position: left center; }*/ header #header-icons { left: 20px; bottom: 14px; right: 88px; height: 56px; align-items: center; } header #header-icons #hi-search { padding: 0; max-width: 100%; } header #header-icons #hi-navi { position: fixed; top: 0px; right: 15px !important; height: 62px; align-items: center !important; } header #es_container form input { max-width: calc(100% - 92px); } header #header-icons #hi-navi li#hFav, header #header-icons #hi-navi li#hCompare { display: none; } header #header-icons #hi-navi li { padding-bottom: 0; } header #header-icons #hi-navi li a > div:nth-child(2) { display: none; } header #hHamburger { position: absolute; right: -20px; bottom: -62px; width: 68px; height: 50px; } header #hHamburger > div { position: absolute; left: 0; top: 8px; display: flex; align-items: center; width: 34px; height: 34px; overflow: hidden; } header #hHamburger > div > div { position: relative; width: 34px; height: 2px; background: var(--schwarz); transition: all 0.3s; } header #hHamburger > div > div:before, header #hHamburger > div > div:after { display: block; content: ""; position: absolute; left: 0; width: 34px; height: 2px; background: var(--schwarz); transition: all 0.3s; } header #hHamburger > div > div:before { top: -9px; } header #hHamburger > div > div:after { bottom: -9px; } body.navi header #hHamburger > div > div { height: 0px; } body.navi header #hHamburger > div > div:before { top: -1px; transform: rotate(45deg); } body.navi header #hHamburger > div > div:after { bottom: -1px; transform: rotate(-45deg); } #header-navigation { position: fixed; z-index: 2; top: 134px; right: -100%; bottom: 0; width: 100%; transition: all 0.3s; } /*body.scrolled #header-navigation { top: 70px; }*/ body.navi #header-navigation { right: 0; } #header-navigation .level_0, #header-navigation .level_1, #header-navigation .level_2, #header-navigation .level_3 { position: absolute; z-index: 3; top: 0; bottom: 0; width: 100%; right: -100%; transition: right 0.3s; background: white; overflow-y: auto; overflow-x: hidden; transition: all 0.3s; } #header-navigation .level_0 { z-index: 1; right: 0; } #header-navigation .level_1 { z-index: 2; } #header-navigation .level_2 { z-index: 3; } #header-navigation .level_3 { z-index: 4; } #header-navigation .level_1.open, #header-navigation .level_2.open, #header-navigation .level_3.open { right: 0; } #header-navigation .level_0 > nav { padding: 30px 20px; } #header-navigation .level_0 > nav ul { margin: 0; padding: 0; } #header-navigation .level_0 > nav ul li { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--dunkelgrau); } #header-navigation .level_0 > nav ul li a { display: flex; justify-content: space-between; align-items: center; height: 50px; padding-right: 20px; color: var(--schwarz); text-decoration: none; } #header-navigation .level_0 > nav ul li a span { font-family: 'FSDillonBold'; font-size: 22px; } #header-navigation .level_0 .l0-location { padding: 20px 20px 40px 20px; } #header-navigation .level_0 .l0-service ul { margin: 0; padding: 0 20px; } #header-navigation .level_0 .l0-service ul li { padding-bottom: 3px; list-style: none; } #header-navigation .level_0 .l0-service ul li a { display: flex; align-items: center; height: 50px; padding: 0 0 0 10px; background: var(--hellgrau); color: var(--schwarz); text-decoration: none; } #header-navigation .level_0 .l0-service ul li a i { width: 47px; } #header-navigation .level_0 .l0-service ul li a span { width: calc(100% - 47px); font-family: 'FSDillonMedium'; font-size: 20px; line-height: 22px; } #header-navigation .level_0 .cmsNavi_icon ul { display: flex; justify-content: center; margin: 0; padding: 40px 10px; } #header-navigation .level_0 .cmsNavi_icon ul li { padding: 0 10px; list-style: none; } #header-navigation .level_0 .cmsNavi_horizontal ul li:last-child { padding-right: 0; } #header-navigation .level_0 .cmsNavi_icon ul li a { display: block; width: 40px; height: 40px; border-radius: 20px; line-height: 40px; text-align: center; font-size: 20px; background: var(--schwarz); color: white; } #header-navigation .level_0 .cmsNavi_icon ul li a:hover { background: var(--rot); } #header-navigation .level_0 .cmsNavi_icon ul li a i { line-height: 40px; } #header-navigation .level_0 .cmsNavi_icon ul li a span { display: none; } #header-navigation .level_0 .l0-lang { height: 52px; border-top: 1px solid var(--dunkelgrau); } #header-navigation .level_0 .l0-lang ul { display: flex; margin: 0; padding: 0; } #header-navigation .level_0 .l0-lang ul li { list-style: none; border-left: 1px solid var(--dunkelgrau); } #header-navigation .level_0 .l0-lang ul li:first-child { flex-grow: 1; border-left: 0; } #header-navigation .level_0 .l0-lang ul li span { display: block; padding: 0 18px; line-height: 51px; opacity: 0.7; font-family: 'FSDillon'; font-size: 17px; } #header-navigation .level_0 .l0-lang ul li.current span { opacity: 1; background: var(--schwarz); color: white; font-family: 'FSDillonMedium'; font-size: 20px; text-transform: uppercase; } #header-navigation .level_0 .l0-lang ul li a { display: block; padding: 0 18px; line-height: 51px; font-family: 'FSDillonMedium'; font-size: 20px; text-transform: uppercase; color: var(--schwarz); text-decoration: none; } #header-navigation .level_1 .container { width: 100%; max-width: 100% !important; } #header-navigation .level_1 .p-3 { padding: 10px !important; } #header-navigation .level_1 > nav { padding: 20px; } #header-navigation .level_1 > nav ul { margin: 0; padding: 0; } #header-navigation .level_1 > nav ul li { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--dunkelgrau); } #header-navigation .level_1 > nav ul li a { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 20px 0 65px; color: var(--schwarz); text-decoration: none; } #header-navigation .level_1 > nav ul li a > span { display: flex; align-items: center; } #header-navigation .level_1 > nav ul li a > span > i { display: block; margin-left: -60px; width: 60px; font-size: 30px; } #header-navigation .level_1 > nav ul li a > span > span.hi-icon { display: block; margin-left: -60px; width: 60px; font-size: 30px; } #header-navigation .level_1 > nav ul li a > span > span.hi-icon span { display: block; height: 30px; width: 30px; background-size: contain; background-repeat: no-repeat; background-position: center; } #header-navigation .level_1 > nav ul li a > span > span { font-family: 'FSDillonMedium'; font-size: 18px; line-height: 22px; max-width: 100%; } #header-navigation .level_2 > nav { padding: 20px; } #header-navigation .level_2 > nav ul { margin: 0; padding: 0; } #header-navigation .level_2 > nav ul li { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--hellgrau); } #header-navigation .level_2 > nav ul li a { display: flex; align-items: center; height: 70px; padding: 0 20px 0 5px; color: var(--schwarz); text-decoration: none; } /*#header-navigation .level_2 > nav ul li a > i { display: block; width: 60px; font-size: 30px; }*/ #header-navigation .level_2 > nav ul li a > span { font-family: 'FSDillonMedium'; font-size: 18px; line-height: 25px; max-width: 100%; } #header-navigation .level_back { padding: 0; } #header-navigation .level_back .btn { display: flex; justify-content: space-between; align-items: center; } #header-navigation .level_back .btn span { font-family: 'FSDillonMedium'; font-size: 27px; } #es_shadow, #es_result { top: 134px; } body.scrolled #es_shadow, body.scrolled #es_result { top: 134px; } #es_result > div { width: calc(100vW - 40px); } #esr_right {display: none} #esr_left {width: 100% !important} body.navi #hc-toggler { display: none; } } /*#header-navigation nav > ul > li > div > div { background: none !important; } #header-navigation nav > ul > li > div > div > div { background: rgba(235,239,240,0.9) !important; }*/ body { padding: 132px 0 0 0; } @media screen and (min-width: 1280px){ body { padding: 194px 0 0 0; } body header { position: fixed; } body.scrolled-desktop header { top: -66px; } body.scrolled-desktop #header-logo { width: 300px; height: 68px; background-size: auto 88px; background-position: -19px -10px; } /*body.scrolled-desktop #header-logo:before { width: 180px;} body.scrolled-desktop #header-logo:after { left: 180px; border-width: 34px 14px; } body.scrolled-desktop #header-logo a { top: 18px; bottom: 16px; }*/ /* body.scrolled-desktop header { position: fixed; top: -194px; background: var(--schwarz); color: white; } body.scrolled-desktop #header-main > div { background: var(--schwarz); } body.scrolled-desktop.scrollup header { top: -66px; } body.scrollup header { transition: all 0.3s !important; } body.scrolled-desktop #hi-navi li a:hover { color: var(--schwarz) !important; } */ #hi-navi li a > div:nth-child(2) { padding: 0 10px; } header #hHamburger { display: none; } #header-navigation { position: static; } #header-navigation nav > ul > li.subnavi > a:before { display: block; content: ""; position: absolute; left: calc(50% - 13px); bottom: 0; border-style: solid; border-width: 13px; border-color: transparent transparent var(--hellgrau) transparent; opacity: 0; } #header-navigation nav > ul > li.hover > a:before { opacity: 1; } #header-navigation nav > ul { margin: 0; padding: 0 18px; } #header-navigation nav > ul > li { list-style: none; } #header-navigation nav > ul > li:first-child a { text-align: left; } #header-navigation > div > nav > ul > li:last-child > a { text-align: right; } #header-navigation nav > ul > li > a { display: block; position: relative; padding: 18px; font: 23px/24px 'FSDillonMedium'; color: inherit; text-decoration: none; text-align: center; letter-spacing: 0.025em; } #header-navigation nav > ul.hover > li > a, #header-navigation nav > ul:hover > li > a { color: var(--schwarz50); } #header-navigation nav > ul:hover > li:hover > a, #header-navigation nav > ul.hover > li.current > a { color: inherit; } #header-navigation nav > ul > li > div { height: 0; position: fixed; left: 0; top: 194px; right: 0; opacity: 0; overflow: hidden; } body.scrolled-desktop #header-navigation nav > ul > li > div { top: 128px; } #header-navigation nav > ul > li > div > div { height: 0; position: relative; overflow: visible; } #header-navigation nav > ul > li > div > div > div { position: absolute; left: 0; top: 0; right: 0; background: var(--hellgrau); padding: 30px 40px } #header-navigation nav > ul > li > div > div > div .hi-box ul { padding: 0 } /*body.scrolled #header-navigation nav > ul > li > div { top: 128px; }*/ #header-navigation nav > ul > li.hover > div { height: auto; opacity: 1; overflow: visible; } #header-navigation nav > ul > li > div > div > div { height: auto; max-height: calc(100vH - 194px); overflow-x: hidden; overflow-y: auto; } body.scrolled #header-navigation nav > ul > li > div > div > div { max-height: calc(100vH - 128px); } /*#header-navigation nav > ul > li > div > div > div > div { max-height: calc(100vH - 214px); overflow-x: hidden; overflow-y: auto; }*/ /******************************* STUFE 3 STANDORT *****************************************************/ .hi-sub-987, .hi-sub-988 { height: 100%; overflow: hidden; } .hi-sub-987 .hi-sub-half, .hi-sub-988 .hi-sub-half { position: absolute; top: 0; bottom: 0; width: 50%; } .hi-sub-987 .hi-sub-half.hi-sub-half-master, .hi-sub-988 .hi-sub-half.hi-sub-half-master { left: 0; } .hi-sub-987 .hi-sub-half.hi-sub-half-sub, .hi-sub-988 .hi-sub-half.hi-sub-half-sub { right: -50%; opacity: 0; transition: all 0.3s; border-left: 1px solid var(--dunkelgrau); } .hi-sub-987 .hi-sub-half.hi-sub-half-sub.show, .hi-sub-988 .hi-sub-half.hi-sub-half-sub.show { right: 0; opacity: 1; } /*#header-navigation nav > ul > li#navi_613 > div { height: auto; opacity: 1; }*/ #header-navigation .hi-article { padding: 0; } #header-navigation .hi-article .p-3 { padding: 0; } #header-navigation .hi-article .p-3 .p-3 { padding: 20px 15px; } #header-navigation .hi-box { position: relative; } #header-navigation .hi-box.hi-box-more { position: relative; } #header-navigation .hi-box.hi-box-more:before{ display: block; content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: var(--dunkelgrau); } #header-navigation .hi-article .cms_img { position: relative; padding: 30.9% !important; } #header-navigation .hi-article .cms_img picture { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } #header-navigation .hi-article .cms_img picture img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } #header-navigation .hi-box ul { display: flex; flex-wrap: wrap; } #header-navigation .hi-box ul li { list-style: none; } #header-navigation .hi-box ul li a { width: 100%; min-height: 50px; padding: 20px 25px 0 15px; color: var(--schwarz); text-decoration: none; transition: all 0.3s; letter-spacing: 0.5px;; } #header-navigation .hi-box ul li.hover a, #header-navigation .hi-box ul li a:hover { padding: 20px 15px 0 25px; color: black; } #header-navigation .hi-box ul li a .hi-icon { min-width: 65px; font-size: 40px; line-height: 50px; } #header-navigation .hi-box ul li a span.hi-icon { width: 65px; } #header-navigation .hi-box ul li a .hi-icon > span { display: block; width: 40px; height: 40px; background-repeat: no-repeat; background-position: center; background-size: contain; } #header-navigation .hi-box ul li a div { flex-grow: 1; font: 23px/25px 'FSDillonMedium'; } #header-navigation .hi-box ul li a .hi-more { font-size: 16px; line-height: 50px; } #header-navigation .hi-sub { position: absolute; z-index: 1; top: 45px; left: 20px; right: 20px; opacity: 0; transition: opacity 0.5s; } #header-navigation .hi-sub.show { position: relative; z-index: 2; top: 0; left: 0; opacity: 1; } #es_shadow, #es_result { top: 194px; } body.scrolled #es_shadow, body.scrolled #es_result { top: 128px; } /*body.scrolled.scrollup #es_shadow, body.scrolled.scrollup #es_result { top: 128px; }*/ body.scrolled header #hi-navi > nav { padding-top: 0 !important; padding-bottom: 13px; } } @media screen and (min-width: 769px) and (max-width: 1279px){ /*@media screen and (min-width: 960px) and (max-width: 1279px){*/ body { padding: 134px 0 0 0; } body header { position: fixed; } header { box-shadow: none; } body.scrolled header { top: -66px; } body.scrolled-desktop #header-logo { width: 300px; height: 68px; background-size: auto 88px; background-position: -20px -10px; } /*body.scrolled #header-logo { width: 300px; height: 68px; } body.scrolled #header-logo:before { width: 180px;} body.scrolled #header-logo:after { left: 180px; border-width: 34px 14px; } body.scrolled #header-logo a { top: 18px; bottom: 16px; }*/ #header-main { box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12); } header #hi-navi > nav { padding-top: 0 !important; } header #hi-navi > nav li { padding: 0 5px !important; } #hi-navi li a > div:nth-child(2) { display: none; } header #hHamburger { position: relative; width: 79px; height: 50px; margin: 0 0 8px 10px; padding-left: 12px; border-left: 2px solid var(--hellgrau); } header #hHamburger > div { position: absolute; left: 22px; top: 8.5px; display: flex; align-items: center; width: 33px; height: 33px; overflow: hidden; } header #hHamburger > div > div { position: relative; width: 33px; height: 2px; background: var(--schwarz); transition: all 0.3s; } header #hHamburger > div > div:before, header #hHamburger > div > div:after { display: block; content: ""; position: absolute; left: 0; width: 33px; height: 2px; background: var(--schwarz); transition: all 0.3s; } header #hHamburger > div > div:before { top: -9px; } header #hHamburger > div > div:after { bottom: -9px; } body.navi header #hHamburger > div > div { height: 0px; } body.navi header #hHamburger > div > div:before { top: -1px; transform: rotate(45deg); } body.navi header #hHamburger > div > div:after { bottom: -1px; transform: rotate(-45deg); } header #header-icons { height: 99px; align-items: center !important; } body.scrolled header #header-icons { height: 68px; } header #hi-search { max-width: calc(100% - 321px); padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 60px !important; } .loggedin header #hi-search { max-width: calc(100% - 379px); padding-bottom: 0 !important; padding-right: 60px !important; } body.scrolled header #hi-search { max-width: calc(100% - 321px); padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body.scrolled.loggedin header #hi-search { max-width: calc(100% - 379px); padding-bottom: 0 !important; padding-right: 0 !important; padding-right: 60px !important; } header #es_container form input { max-width: calc(100% - 92px); } #header-navigation { position: fixed; z-index: 2; top: 134px; right: -100%; bottom: 0; width: 100%; background: var(--schwarz50t); opacity: 0; overflow-x: hidden; overflow-y: auto; } body.scrolled #header-navigation { top: 68px; } body.navi #header-navigation { right: 0; opacity: 1; } body.navi #header-navigation .level_0 { right: 0; } #header-navigation .level_0, #header-navigation .level_1, #header-navigation .level_2, #header-navigation .level_3 { position: absolute; z-index: 3; top: 0; bottom: 0; width: 540px; right: -540px; transition: right 0.3s; background: white; overflow-y: auto; overflow-x: hidden; transition: all 0.3s; } #header-navigation .level_0 { z-index: 1; } #header-navigation .level_1 { z-index: 2; } #header-navigation .level_2 { z-index: 3; } #header-navigation .level_3 { z-index: 4; } #header-navigation .level_1.open, #header-navigation .level_2.open, #header-navigation .level_3.open { right: 0; } #header-navigation .level_0 > nav { padding: 50px; } #header-navigation .level_0 > nav ul { margin: 0; padding: 0; } #header-navigation .level_0 > nav ul li { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--hellgrau); } #header-navigation .level_0 > nav ul li a { display: flex; justify-content: space-between; align-items: center; height: 70px; padding-right: 25px; color: var(--schwarz); text-decoration: none; } #header-navigation .level_0 > nav ul li a span { font-family: 'FSDillonBold'; font-size: 30px; } #header-navigation .level_0 .cmsNavi_icon ul { display: flex; justify-content: start; margin: 0; padding: 0 50px; } #header-navigation .level_0 .cmsNavi_icon ul li { padding-right: 25px; list-style: none; } #header-navigation .level_0 .cmsNavi_horizontal ul li:last-child { padding-right: 0; } #header-navigation .level_0 .cmsNavi_icon ul li a { display: block; width: 56px; height: 56px; border-radius: 28px; line-height: 56px; text-align: center; font-size: 24px; background: var(--schwarz); color: white; } #header-navigation .level_0 .cmsNavi_icon ul li a:hover { background: var(--rot); } #header-navigation .level_0 .cmsNavi_icon ul li a i { line-height: 56px; } #header-navigation .level_0 .cmsNavi_icon ul li a span { display: none; } #header-navigation .level_1 > nav { padding: 0 50px 50px 50px; } #header-navigation .level_1 > nav ul { margin: 0; padding: 0; } #header-navigation .level_1 > nav ul li { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--hellgrau); } #header-navigation .level_1 > nav ul li a { display: flex; align-items: center; height: 70px; padding: 0 20px 0 65px; color: var(--schwarz); text-decoration: none; } #header-navigation .level_1 > nav ul li a > span { display: flex; align-items: center; } #header-navigation .level_1 > nav ul li a > span > i { display: block; margin-left: -60px; width: 60px; font-size: 30px; } #header-navigation .level_1 > nav ul li a > span > span.hi-icon { display: block; margin-left: -60px; width: 60px; font-size: 30px; } #header-navigation .level_1 > nav ul li a > span > span.hi-icon span { display: block; height: 30px; width: 30px; background-size: contain; background-repeat: no-repeat; background-position: center; } #header-navigation .level_1 > nav ul li a > span > span { font-family: 'FSDillonMedium'; font-size: 22px; line-height: 25px; max-width: 100%; } #header-navigation .level_2 > nav { padding: 30px 50px 50px 50px; } #header-navigation .level_2 > nav ul { margin: 0; padding: 0; } #header-navigation .level_2 > nav ul li { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--hellgrau); } #header-navigation .level_2 > nav ul li a { display: flex; align-items: center; height: 70px; padding: 0 20px 0 5px; color: var(--schwarz); text-decoration: none; } #header-navigation .level_2 > nav ul li a > i { display: block; width: 60px; font-size: 30px; } #header-navigation .level_2 > nav ul li a > span { font-family: 'FSDillonMedium'; font-size: 22px; line-height: 25px; max-width: 100%; }} #header-navigation .level_3 > nav { padding: 30px 50px 50px 50px; } #header-navigation .level_3 > nav ul { margin: 0; padding: 0; } #header-navigation .level_3 > nav ul li { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--hellgrau); } #header-navigation .level_3 > nav ul li a { display: flex; align-items: center; height: 70px; padding: 0 20px 0 5px; color: var(--schwarz); text-decoration: none; } #header-navigation .level_3 > nav ul li a > i { display: block; width: 60px; font-size: 30px; } #header-navigation .level_3 > nav ul li a > span { font-family: 'FSDillonMedium'; font-size: 22px; line-height: 25px; max-width: 100%; } #header-navigation .level_back { padding: 65px 50px 0 50px; } #header-navigation .level_back .btn { display: flex; justify-content: space-between; align-items: center; } #header-navigation .level_back .btn span { font-family: 'FSDillonMedium'; font-size: 27px; } #es_shadow, #es_result { top: 134px; } body.scrolled #es_shadow, body.scrolled #es_result { top: 68px; } /******************************* STUFE 3 STANDORT *****************************************************/ .hi-sub-987 { height: 100%; overflow: hidden; } .hi-sub-987 .hi-sub-half { position: absolute; top: 0; bottom: 0; width: 50%; } .hi-sub-987 .hi-sub-half.hi-sub-half-master { left: 0; } .hi-sub-987 .hi-sub-half.hi-sub-half-sub { right: -50%; opacity: 0; transition: all 0.3s; border-left: 1px solid var(--dunkelgrau); } .hi-sub-987 .hi-sub-half.hi-sub-half-sub.show { right: 0; opacity: 1; } /*-----| HEADER: MWST |--------------------------------------------------------------------------------------------------------------*/ #mwst { position: absolute; z-index: 909; left: 0; right: 0; } #mwst > div { position: relative; } .shop #mwst > div { max-width: 100%; } #mwst > div > div { position: absolute; top: 35px; right: 38px; height: 30px; padding: 0 5px 0 10px; } #mwst > div > div { background: white; } body.home #mwst > div > div { top: 11px; } #mwst .input-group { height: 20px; z-index: 999;} #mwst .mwst-text { padding: 0 7px; font: 17px/20px 'FSDillon'; color: var(--schwarz50); } #mwst .mwst_1 .mwst-text.mwst-text-1 { color: var(--schwarz); } #mwst .mwst_0 .mwst-text.mwst-text-0 { color: var(--schwarz); } #mwst .form-switch { position: relative; min-height: 20px; height: 20px; width: 38px; margin: 0; padding: 0; border: 1px solid var(--schwarz); border-radius: 10px; cursor: pointer; } #mwst .form-switch input { position: absolute; top: 3px; width: 12px; height: 12px; margin: 0; padding: 0; border-radius: 6px; border: none; box-shadow: none; outline: none; } #mwst .mwst_1 .form-switch { background: var(--schwarz); } #mwst .mwst_0 .form-switch { background: white; } #mwst .mwst_1 .form-switch input { right: 3px; background: white; } #mwst .mwst_0 .form-switch input { left: 3px; background: var(--schwarz); } @media screen and (min-width: 1280px){ #mwst { top: 194px; } } @media screen and (min-width: 960px) and (max-width: 1279px){ #mwst { top: 134px; } } @media screen and (max-width: 959px){ #mwst { top: 107px; } #mwst > div > div { right: 10px; } } /*-----| HEADER: CSS ANIMATIONS |--------------------------------------------------------------------------------------------------------------*/ body.loaded header, body.loaded #header-main > div, body.loaded #header-navigation nav > ul > li > a, body.loaded #header-navigation nav > ul > li > a:before, body.loaded #header-navigation nav > ul > li > div, body.loaded #header-logo, body.loaded #hs-language a, body.loaded #hs-service a, body.loaded #hi-navi li a > div:first-child:before, body.loaded #hi-navi li a, body.loaded #hi-navi li a > div:nth-child(2) { transition: all 0.3s; }