:root { } .mod_headerblock { position: fixed; z-index: 190; width: 100%; } @media (min-width: 992px) { .mod_headerblock.has_navTopBar.has_navLeftBar { position: absolute; } } .mod_headerblock_spacer { position: relative; height: var(--header-mobile-height-spacer); } @media (min-width: 992px) { /*@media (min-width: 992px) {*/ .mod_headerblock_spacer { height: var(--header-height-spacer); } } /* fachberatung btn start */ .mod_headerblock .btn-fachberatung { position: relative; } .mod_headerblock .btn-fachberatung.withicon .termin-icon { padding-right: 0px; } /* @media (min-width: 996px) { .mod_headerblock .btn-fachberatung.withicon .termin-text { padding-right: 10px; } }*/ /* .mod_headerblock .btn-fachberatung .termin-icon { display: block; width: 30px; height: 30px; fill: var(--color-highlight); transition: fill 0.2s ease; } */ @media (min-width: 768px) { .mod_headerblock .btn-fachberatung .termin-icon { display: none; } } .mod_headerblock .btn-fachberatung .termin-icon svg { max-width: 100%; max-height: 100%; } .mod_headerblock .btn-fachberatung.withicon .termin-icon { display: block; width: 30px; height: 30px; fill: var(--color-highlight); transition: fill 0.2s ease; } @media (min-width: 768px) { .mod_headerblock .btn-fachberatung.withicon .termin-icon { fill: var(--color-white); position: absolute; right: 10px; top: calc(50% - 15px); font-size: 0; } } .mod_headerblock .btn-fachberatung.withicon:hover .termin-icon, .mod_headerblock .btn-fachberatung.withicon:active .termin-icon, .mod_headerblock .btn-fachberatung.withicon:focus .termin-icon { fill: var(--color-highlight); } @media (min-width: 768px) { .mod_headerblock .btn-fachberatung { display: block; } .mod_headerblock .btn-fachberatung.withicon { padding-right: 65px; } .mod_headerblock .btn-fachberatung.withicon .termin-icon { right: 25px; } } .mod_headerblock .btn-fachberatung, .mod_headerblock .btn-fachberatung:visited { color: var(--color-highlight); background-color: var(--color-highlight); } @media (min-width: 768px) { .mod_headerblock .btn-fachberatung, .mod_headerblock .btn-fachberatung:visited { color: var(--color-white); background-color: var(--color-highlight); border-color: var(--color-highlight); } } @media (min-width: 768px) { .mod_headerblock .btn-fachberatung:hover, .mod_headerblock .btn-fachberatung:active, .mod_headerblock .btn-fachberatung:focus { color: var(--color-highlight); background-color: var(--color-white); border-color: var(--color-highlight); } } /* Beratung vereinbaren button raus auf Karriere Seite */ .has_karriereblock_solarlux .mod_headerblock .btn-fachberatung { /* has_modularform_funnel karriereseite karriereDetail gdetail */ display:none; } /* fachberatung btn ende */ /* menu btn start */ .mod_headerblock .btn.navbar-toggler { border-radius: 0; border: none; font-size: 18px; line-height: 20px; font-weight: normal; width: 80px; height: 50px; padding: 0; text-align: center; background-color: transparent; transition: all 0.2s ease; /* text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff, 0px 0px 1px #fff, 0 0 6px #fff; */ min-width:32px; } .scroll50vh:not(.mainmenuOpen).mod_headerblock .btn.navbar-toggler { text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff, 0px 0px 1px #fff, 0 0 6px #fff; } .mod_headerblock :hover .btn.navbar-toggler { } .mainmenuOpen .mod_headerblock .btn.navbar-toggler {} .mod_headerblock .btn.navbar-toggler .navbar-toggler-text { font-size: 0; line-height: 36px; transition: color 0.3s ease; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: center; width: 100%; } .mod_headerblock .btn.navbar-toggler .navbar-toggler-label { font-size: 0; line-height: 0; } @media (min-width: 992px) { .mod_headerblock .btn.navbar-toggler .navbar-toggler-text { font-size: var(--size-default); line-height: var(--line-default); } .mod_headerblock .btn.navbar-toggler .navbar-toggler-label { font-size: var(--size-default); line-height: var(--line-default); } } .mod_headerblock .btn.navbar-toggler .navbar-toggler-text .bar { display: block; font-size: 0; line-height: 0; width: 32px; height: 4px; margin-top: 3px; margin-bottom: 3px; margin-left: auto; margin-right: auto; border-radius: 1px; transition: transform 0.35s ease 0s,background 0.3s ease 0s,box-shadow 0.2s ease; transform: translateX(0); background-color: var(--color-default); } .scroll50vh:not(.mainmenuOpen).mod_headerblock .btn.navbar-toggler .navbar-toggler-text .bar { box-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff, 0px 0px 1px #fff, 0 0 6px #fff; } .mod_headerblock .btn.navbar-toggler.textleft { position: relative; width: 125px; padding: 0 15px; } .mod_headerblock .btn.navbar-toggler.textleft .navbar-toggler-text { } .mod_headerblock .btn.navbar-toggler.textleft .navbar-toggler-text .bar { margin-right: 0; } .mod_headerblock .btn.navbar-toggler.textleft .navbar-toggler-label { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); } .mainmenuOpen .mod_headerblock .btn.navbar-toggler .navbar-toggler-text .bar { box-shadow: none; } .mainmenuOpen .mod_headerblock .btn.navbar-toggler .navbar-toggler-text, .mainmenuOpen .mod_headerblock .btn.navbar-toggler .burgerText { color: var(--color-white); } .mainmenuOpen .mod_headerblock .btn.navbar-toggler .navbar-toggler-text .bar { background-color: var(--color-white); } .mod_headerblock .btn.navbar-toggler:hover .navbar-toggler-text .bar:nth-child(1) { transform: translateX(20px); } .mod_headerblock .btn.navbar-toggler:hover .navbar-toggler-text .bar:nth-child(2) { transform: translateX(5px); } .mod_headerblock .btn.navbar-toggler:hover .navbar-toggler-text .bar:nth-child(3) { transform: translateX(-10px); } /* menu btn ende */ /* top bar start */ .mod_headerblock { background-color: transparent; } .mod_headerblock .navTopBar { height: var(--header-height); display: none; } .mod_headerblock .navTopBar.colored { background-color: var(--color-white); } .mod_headerblock .navTopBar_show_true.navTopBar { display: block; } .mod_headerblock .navTopBar .container-fluid { max-width: var(--headerblock-topbar-content-max-width); } @media (min-width: 992px) { .mod_headerblock.has_navTopBar.has_navLeftBar { } .mod_headerblock.has_navTopBar.has_navLeftBar .navTopBar_show_true.navTopBar .logoCont { margin-top: var(--headerblock-logo-m-top); margin-left: var(--headerblock-logo-m-left); padding: 20px 30px; } .mod_headerblock .navLeftBar .col-nav .btn.navbar-toggler, .mod_headerblock .navLeftBar.btnpos_start .col-nav .btn.navbar-toggler { margin-top: 7vh; } } @media (max-width: 991px) { .mod_headerblock .navTopBar, .mod_headerblock .navTopBar.colored { background-color: var(--color-headerblock-bg); } } .mod_headerblock .navTopBar.overflowhidden { overflow: hidden; } .mod_headerblock .navTopBar .row-nav { height: var(--header-height); } .mod_headerblock .navTopBar .col-nav { height: var(--header-height); justify-content: right; } .mod_headerblock .navTopBar.hasLogo .col-nav { height: var(--header-height); justify-content: space-between; } .mod_headerblock .navTopBar.menubtn_topright .col-nav { padding-right: 0; } .mod_headerblock .navTopBar .navbar-brand { width: 100%; height: 100%; max-width: var(--headerblock-logo-max-width); max-height: var(--headerblock-logo-max-height); display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; padding: 0; margin: 0; transition: all 0.2s ease; } .mod_headerblock .navTopBar .navbar-brand img { object-fit: contain; object-position: left; width: var(--headerblock-logo-max-width); height: var(--headerblock-logo-max-height); transition: all 0.2s ease; } /* nur wenn extra scrolling bild da ist */ .mod_headerblock .navTopBar .withscrollimage.navbar-brand { } .mod_headerblock .navTopBar .withscrollimage.navbar-brand img.normal { display: block; } .mod_headerblock .navTopBar .withscrollimage.navbar-brand img.scrolling { display: none; } .header-sticky .mod_headerblock .navTopBar .withscrollimage.navbar-brand { } .header-sticky .mod_headerblock .navTopBar .withscrollimage.navbar-brand img.normal { display: none; } .header-sticky .mod_headerblock .navTopBar .withscrollimage.navbar-brand img.scrolling { display: block; } .mod_headerblock .navTopBar .logoCont { align-self: center; display: flex; align-items: center; } .mod_headerblock .navTopBar .btnCont { /* flex-shrink: 0; */ width: 100%; justify-content: flex-end; align-self: center; display: flex; align-items: center; } .mod_headerblock .navTopBar .menuCont { flex-shrink: 0; align-self: center; display: flex; justify-content: center; width: 70px; } @media (min-width: 992px) { .mod_headerblock .navTopBar .menuCont { width: 170px; } } @media (min-width: 992px) { .has_navLeftBar.mod_headerblock .navTopBar .menuCont { display: none; } } .has_navLeftBar.mod_headerblock .navTopBar .btnCont { display: none; } .has_navLeftBar.mod_headerblock .navTopBar .btnCont.hasFachberatungbtn { display: flex; } .has_navLeftBar.mod_headerblock .navTopBar .btnCont.hasFachberatungbtn .btn.navbar-toggler { display: block; } @media (min-width: 992px) { .has_navLeftBar.mod_headerblock .navTopBar .btnCont.hasFachberatungbtn .btn.navbar-toggler { display: none; } } @media (max-width: 991px) { .has_navLeftBar.mod_headerblock .navTopBar .btnCont { display: flex; } .has_navLeftBar.mod_headerblock .navTopBar .btnCont.hasFachberatungbtn .btn.navbar-toggler, .has_navLeftBar.mod_headerblock .navTopBar .btnCont .btn.navbar-toggler { display: block; } } .mod_headerblock .changeheightonscroll.navTopBar, .mod_headerblock .changeheightonscroll.navTopBar .row-nav, .mod_headerblock .changeheightonscroll.navTopBar .col-nav { transition: height 0.2s ease; } .header-sticky .mod_headerblock .changeheightonscroll.navTopBar, .header-sticky .mod_headerblock .changeheightonscroll.navTopBar .row-nav, .header-sticky .mod_headerblock .changeheightonscroll.navTopBar .col-nav { height: var(--header-height-sticky); } .header-sticky .mod_headerblock .changeheightonscroll.navTopBar .navbar-brand { max-width: var(--headerblock-logo-max-width-scrolled); max-height: var(--headerblock-logo-max-height-scrolled); } .header-sticky .mod_headerblock .changeheightonscroll.navTopBar .navbar-brand img { width: var(--headerblock-logo-max-width-scrolled); height: var(--headerblock-logo-max-height-scrolled); } @media (max-width: 991px) { /* @media (max-width: 1199px) { */ .mod_headerblock .navTopBar, .mod_headerblock .navTopBar .row-nav, .mod_headerblock .navTopBar .col-nav, .mod_headerblock .navTopBar.hasLogo .col-nav { height: var(--header-mobile-height); } .header-sticky .mod_headerblock .changeheightonscroll.navTopBar, .header-sticky .mod_headerblock .changeheightonscroll.navTopBar .row-nav, .header-sticky .mod_headerblock .changeheightonscroll.navTopBar .col-nav { height: var(--header-mobile-height); } .mod_headerblock .navTopBar .navbar-brand, .mod_headerblock .navTopBar .navbar-brand img, .header-sticky .mod_headerblock .changeheightonscroll.navTopBar .navbar-brand img { height: calc(var(--header-mobile-height) - (var(--header-mobile-logo-padding) * 2)); } .mod_headerblock .navTopBar .col-nav { } .header-sticky .mod_headerblock .navTopBar .withscrollimage.navbar-brand img.normal { display: block; } /* nur normales statt scrolling anzeigen bei mob*/ .header-sticky .mod_headerblock .navTopBar .withscrollimage.navbar-brand img.scrolling { display: none; } } @media (max-width: 991px) { .mod_headerblock .navTopBar .navbar-brand, .mod_headerblock .navTopBar .navbar-brand img, .header-sticky .mod_headerblock .changeheightonscroll.navTopBar .navbar-brand img { width: var(--header-mobile-width); } } /* top bar ende */ /* left bar start */ .has_mod_slider_a .mod_headerblock .navLeftBar { border-right: 3px solid var(--headerblock-leftbar-default-bordercolor); } .has_mod_slider_a:not(.mainmenuOpen) .mod_headerblock.scroll50vh .navLeftBar { border-right: 3px solid transparent; } .mod_headerblock .navLeftBar { height: 100vh; width: var(--headerblock-leftbar-width); max-width: var(--headerblock-leftbar-width); min-width: var(--headerblock-leftbar-width); position: fixed; left: 0; top: 0; transition: background-color 0.2s ease; } .mod_headerblock .navLeftBar .container-fluid { width: 100%; max-width: 100%; min-width: 100%; } .mod_headerblock .navLeftBar.colored { background-color: var(--color-headerblock-bg); transition: background-color 0.2s ease; } .mod_headerblock .navLeftBar.hovercolored:hover { /* background-color:var(--color-headerblock-hover-bg); */ /* color:var(--color-headerblock-hover-text); */ /* border-right: 3px solid var(--color-white); */ background-color: var(--color-white); color: var(--color-default); border-right: 3px solid var(--color-default); } .mod_headerblock .navLeftBar.hovercolored:hover .btn.navbar-toggler .navbar-toggler-text { color: var(--color-default); } .mod_headerblock .navLeftBar.hovercolored:hover .btn.navbar-toggler .navbar-toggler-text .bar { background-color: var(--color-default); } /* leftbar btn hell wenn über slider, dann dunkel wenn gescrollt */ .has_mod_slider_a:not(.mainmenuOpen) .mod_headerblock .navLeftBar .btn.navbar-toggler .navbar-toggler-text { color: var(--color-white); } .has_mod_slider_a:not(.mainmenuOpen) .mod_headerblock .navLeftBar .btn.navbar-toggler .navbar-toggler-text .bar { background-color: var(--color-white); } .has_mod_slider_a:not(.mainmenuOpen) .mod_headerblock.scroll50vh .navLeftBar .btn.navbar-toggler .navbar-toggler-text { color: var(--color-default); } .has_mod_slider_a:not(.mainmenuOpen) .mod_headerblock.scroll50vh .navLeftBar .btn.navbar-toggler .navbar-toggler-text .bar { background-color: var(--color-default); } @media (min-width: 992px) { .mainmenuOpen.mod_headerblock .navLeftBar { z-index: 1; background-color: var(--color-default); background-color: var(--color-headerblock-flyout-bg); border-right: 3px solid var(--color-white); } .mainmenuOpen.mod_headerblock .navLeftBar:hover { background-color: var(--color-default); background-color: var(--color-headerblock-flyout-bg); border-right: 3px solid var(--color-white); } .mainmenuOpen.mod_headerblock .navLeftBar.hovercolored:hover .btn.navbar-toggler .navbar-toggler-text { color: var(--color-white); } .mainmenuOpen.mod_headerblock .navLeftBar.hovercolored:hover .btn.navbar-toggler .navbar-toggler-text .bar { background-color: var(--color-white); } .mainmenuOpen.mod_headerblock .navLeftBar.visible_over_mainmenu { z-index: 15; } } .mod_headerblock .navLeftBar.overflowhidden { overflow: hidden; } .mod_headerblock .navLeftBar .row-nav { padding: 0; } .mod_headerblock .navLeftBar .col-nav { padding: 0; } .mod_headerblock .navLeftBar .col-nav, .mod_headerblock .navLeftBar.btnpos_start .col-nav { justify-content: start; flex-direction: column; flex-wrap: wrap; align-items: center; } .mod_headerblock .navLeftBar.btnpos_center .col-nav { justify-content: center; } .mod_headerblock .navLeftBar.btnpos_center .logoCont { position: absolute; left: 0; top: 0; } .mod_headerblock .navLeftBar, .mod_headerblock .navLeftBar .row-nav, .mod_headerblock .navLeftBar .col-nav { height: 100vh; } .mod_headerblock .navLeftBar .navbar-brand { width: 100%; height: 100%; max-width: var(--headerblock-logo-max-width); max-height: var(--headerblock-logo-max-height); display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; padding: 0; margin: 0; transition: all 0.2s ease; } .mod_headerblock .navLeftBar .navbar-brand img { object-fit: contain; object-position: left; width: 100%; /*var(--headerblock-leftbar-width);*/ /* 100% */ height: var(--headerblock-logo-max-height); transition: all 0.2s ease; } /* nur wenn extra scrolling bild da ist - kein scrolling image bei leftbar logo*/ /* .mod_headerblock .navLeftBar .withscrollimage.navbar-brand {} */ /* .mod_headerblock .navLeftBar .withscrollimage.navbar-brand img.normal{display:block;} */ /* .mod_headerblock .navLeftBar .withscrollimage.navbar-brand img.scrolling{display:none;} */ /* .header-sticky .mod_headerblock .navLeftBar .withscrollimage.navbar-brand {} */ /* .header-sticky .mod_headerblock .navLeftBar .withscrollimage.navbar-brand img.normal{display:none;} */ /* .header-sticky .mod_headerblock .navLeftBar .withscrollimage.navbar-brand img.scrolling{display:block;} */ .mod_headerblock .navLeftBar .logoCont { align-self: start; display: flex; align-items: center; width: 100%; /*var(--headerblock-leftbar-width);*/ /* 100% */ } .mainmenuOpen .mod_headerblock .navLeftBar .logoCont { display: none; } .mainmenuOpen .mod_headerblock .navLeftBar.logo_visible_over_mainmenu .logoCont { display: flex; } @media (max-width: 991px) { .has_navLeftBar.mod_headerblock .navLeftBar { display: none; } .has_navLeftBar.mod_headerblock .navTopBar { display: block; } } /* left bar ende */ .mod_headerblock ul.mainUl { line-height: 30px; padding: 0; list-style: none; margin-bottom: 0; font-size: 18px; font-weight: var(--weight-medium); line-height: 36px; } .mod_headerblock .col-leftColTextLinks { flex-wrap: wrap; align-content: center; margin-top: var(--header-mobile-height); position: relative; } @media (min-width: 992px) { .mod_headerblock .col-leftColTextLinks { margin-top: var(--header-height); } } .mod_headerblock .col-leftColTextLinks .icoLiEntry { text-align: center; line-height: normal; } .mod_headerblock .col-leftColTextLinks .icoLiEntry .ico { height: 100px; padding-bottom: 15px; position: relative; } /* schwarzes svg einf�rben mit filter https://codepen.io/sosuke/pen/Pjoqqp */ .mod_headerblock .col-leftColTextLinks .icoLiEntry .ico img { margin-left: auto; margin-right: auto; height: 100%; width: auto; filter: var(--headerblock-ico-filter); opacity: 1; transition: opacity 0.2s ease; } .mod_headerblock .col-leftColTextLinks .icoLiEntry.active .ico img { filter: var(--headerblock-ico-hover-filter); } .mod_headerblock .col-leftColTextLinks .icoLiEntry .ico img.hover { position: absolute; width: auto; height: calc(100px - 15px); top: 0; left: 50%; transform: translateX(-50%); opacity: 0; filter: var(--headerblock-ico-hover-filter); /* muss partnerspezifisch gefärt werdeb */ } .mod_headerblock .col-leftColTextLinks .icoLiEntry a:hover .ico img { opacity: 0; } .mod_headerblock .col-leftColTextLinks .icoLiEntry a:hover .ico img.hover { opacity: 1; } .mod_headerblock .col-leftColTextLinks .icoLiEntry .txt { margin-bottom: 30px; } @media (min-width: 992px) { .mod_headerblock .col-leftColTextLinks { border-right: 3px solid var(--color-white); margin-top: 0; } .mod_headerblock .col-leftColTextLinks .icoLiEntry .txt { margin-bottom: 60px; } } @media (min-width: 992px) { .mod_headerblock .col-leftColTextLinks .icoLiEntry { font-size: 24px; line-height: 52px; } } @media (min-width: 1600px) { .mod_headerblock .col-leftColTextLinks .icoLiEntry { font-size: 28px; line-height: 56px; margin: 3vh 0; } } .mod_headerblock .closeMenuBtnX { display: block; position: absolute; right: 30px; top: 30px; border-radius: 50%; border: 2px solid; width: 40px; height: 40px; text-align: center; line-height: 35px; font-size: 140%; cursor: pointer; z-index: 20; } @media (min-width: 992px) { .mod_headerblock .closeMenuBtnX { display: block; } } .mod_headerblock .closeMenuBtnX .far { line-height: 35px; } .mod_headerblock .containerCollapsingMenu { position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 9; width: 0px; visibility: hidden; display: block; overflow: hidden; -webkit-transition-property: width, height, visibility, transform; transition-property: width, height, visibility, transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease; transition-timing-function: ease; } .mod_headerblock .containerCollapsingMenu.show { width: 100%; visibility: visible; } .mod_headerblock .containerCollapsingMenu .containerAnimatedScrollableArea { max-width: var(--headerblock-topbar-content-max-width); transform: translateX(-200px); opacity: 0; transition: transform 0.5s ease, opacity 0.5s cubic-bezier(0.55, 0.09, 0.68, 0.53) /* ease in quadratic */; overflow-y: auto; overflow-x: hidden; height: 100vh; padding-left: 1rem; padding-top: 0; padding-right: 1rem; padding-bottom: 0; } .mod_headerblock .containerCollapsingMenu.show .containerAnimatedScrollableArea { transform: translateX(0px); opacity: 1; } @media (min-width: 768px) { .mod_headerblock .containerCollapsingMenu.collapse-vertical { position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 9; height: 0px; width: 100%; visibility: hidden; display: block; overflow: hidden; -webkit-transition-property: height, visibility, transform; transition-property: height, visibility, transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease; transition-timing-function: ease; } .mod_headerblock .containerCollapsingMenu.collapse-vertical.show { height: 100%; visibility: visible; } .mod_headerblock .containerCollapsingMenu.collapse-vertical .containerAnimatedScrollableArea { max-width: var(--headerblock-topbar-content-max-width); transform: translateY(-200px); opacity: 0; transition: transform 0.6s ease, opacity 0.6s cubic-bezier(0.55, 0.09, 0.68, 0.53) /* ease in quadratic */; overflow-y: auto; overflow-x: hidden; height: 0; padding-left: 1rem; padding-top: 0; padding-right: 1rem; padding-bottom: 0; } .mod_headerblock .containerCollapsingMenu.collapse-vertical.show .containerAnimatedScrollableArea { transform: translateY(0px); opacity: 1; height: 100vh; } } /* wenn links nav gegeben */ @media (min-width: 992px) { .mod_headerblock .hasnav_navLeftBar.containerCollapsingMenu .containerAnimatedScrollableArea { padding-left: calc(var(--headerblock-leftbar-width) + 2rem); } } .mod_headerblock .containerCollapsingMenu a { cursor: pointer; color: var(--color-white); transition: color 0.2s ease; } .mod_headerblock .containerCollapsingMenu a:hover, .mod_headerblock .containerCollapsingMenu a:focus { text-decoration: none !important; cursor: pointer; color: var(--color-headerblock-mainmenu-a-hover); } .mod_headerblock .containerCollapsingMenu .active a, .mod_headerblock .containerCollapsingMenu a.active { color: var(--color-headerblock-mainmenu-a-hover); } .mod_headerblock .containerCollapsingMenu a.active .submarker { animation: pulsemarker 0.35s normal forwards ease-in-out; display: inline-block; position: relative; } /* linkes menu */ .mod_headerblock .bg-highlight { background-color: var(--color-default); background-color: var(--color-headerblock-flyout-bg); color: var(--color-white); } .mod_headerblock .col-leftmainmenu { height: 100%; padding-top: 0px; min-width: 50vw; /*prevent word break on collapsing*/ position: relative; } .mod_headerblock .row-leftmainmenu { height: 100%; } .mod_headerblock .col-rightColTextLinks { margin-top: 0; flex-direction: column; } @media (min-width: 992px) { .mod_headerblock .col-rightColTextLinks { padding-left: 40px; padding-right: 40px; } } /* .mod_headerblock .row-leftmainmenu ul { margin-top: 20px; margin-bottom: 20px; padding: 0; list-style: none; margin-bottom: 0; } .mod_headerblock .col-rightColTextLinks ul { margin-top: 20px; margin-bottom: 20px; padding: 0; list-style: none; margin-bottom: 0; } @media (min-width: 992px) { .mod_headerblock .row-leftmainmenu ul { margin-top: var(--header-height); margin-bottom: 20px; } .mod_headerblock .col-rightColTextLinks ul { margin-top: var(--header-height); margin-bottom: 20px; } }*/ .mod_headerblock ul.textlinks { line-height: 30px; padding: 0; list-style: none; margin-bottom: 0; font-size: var(--size-headerblock); font-weight: var(--weight-headerblock); line-height: var(--line-headerblock); } .mod_headerblock ul.textlinks li { padding-left: 0; } .u23design.aktionen_set_is_empty.mod_headerblock ul.textlinks li.navLi_aktionen { display:none !important; } @media (min-width: 768px) { .mod_headerblock ul.textlinks li { padding-left: 20px; } } @media (min-width: 992px) { .mod_headerblock ul.textlinks li { padding-left: 40px; } } @media (min-width: 992px) { .mod_headerblock ul.textlinks li { /* margin-bottom: 20px; */ } .mod_headerblock ul.textlinks li { padding-left: 20px; } } @media (min-width: 1600px) { .mod_headerblock ul.textlinks li { margin-bottom: 20px; } } /* submenu */ .mod_headerblock .col-submenu { height: 100%; } .mod_headerblock .col-submenu .closeSubMenu { font-size: 22px; color: var(--color-default); text-decoration: none; display: inline-block; cursor: pointer; margin-top: 3rem; margin-bottom: 2rem; } .mod_headerblock .col-submenu .closeSubMenu i { margin-right: 5px; } .mod_headerblock .col-submenu .submenu-container { background-color: var(--color-white); height: 100%; position: relative; } .mod_headerblock .col-submenu .submenu-container .bgColorDiv { background-color: var(--color-white); height: 100%; z-index: 1; position: absolute; left: 0; top: 0; width: 100vw; height: 100%; } .mod_headerblock .col-submenu .submenu-container .submenuBackContainer { position: absolute; z-index: 2; width: 100%; align-self: start; padding: 0px 45px; } .mod_headerblock .col-submenu .submenu-container .submenu-container-inner { display: block; position: relative; padding: 10px 45px; z-index: 2; width: 100%; color: var(--color-default); } .mod_headerblock .col-submenu a.link-white, .mod_headerblock .col-submenu a.link-white:visited { color: var(--color-default); } .mod_headerblock .col-submenu a.link-white:hover, .mod_headerblock .col-submenu a.link-white:focus { color: var(--color-highlight); } .mod_headerblock .col-submenu .submenu-container { transform: translateX(400px); opacity: 0; transition: transform 0.2s ease, opacity 0.2s ease; height: 0px; } .submenuOpen.mod_headerblock .col-submenu .submenu-container { transform: translateX(0px); opacity: 1; height: 100%; } .mod_headerblock .col-submenu .submenuContent { transform: translateX(40px); opacity: 0; transition: transform 0.2s ease, opacity 0.2s ease; height: 0; float: left; overflow: hidden; padding-bottom: 0; width: 100%; } .mod_headerblock .col-submenu .submenuContent.vis { transform: translateX(0px); opacity: 1; height: 100%; } .mod_headerblock .col-submenu { height: 100vh; position: absolute; right: 0; top: 0; bottom: 0; left: auto; z-index: -1; opacity: 0; visibility: hidden; } .submenuOpen.mod_headerblock .col-submenu { z-index: 1; opacity: 1; visibility: visible; } .mod_headerblock ul.sublinkSize { line-height: 30px; padding: 0; list-style: none; margin-bottom: 20px; font-size: 18px; font-weight: var(--weight-main); line-height: 36px; } .mod_headerblock ul.sublinkSize li { padding-left: 0; } @media (min-width: 768px) { .mod_headerblock ul.sublinkSize { font-size: 22px; line-height: 44px; } .mod_headerblock ul.sublinkSize li { padding-left: 20px; } } @media (min-width: 992px) { .mod_headerblock ul.sublinkSize li { padding-left: 40px; margin-bottom: 0px; } } @media (min-width: 992px) { .mod_headerblock ul.sublinkSize { font-size: 34px; line-height: 64px; } .mod_headerblock ul.sublinkSize li { padding-left: 0px; } } @media (min-width: 1600px) { .mod_headerblock ul.sublinkSize { } } /* Sonderfall Linara Col Layout */ .mod_headerblock .design5050teilung .row-nav-flyout { display: flex; justify-content: center; background-color: var(--color-highlight); height: 100vh; width: auto; } @media (min-width: 768px) { .mod_headerblock .design5050teilung .row-nav-flyout { border: 38px solid #fff; border-top-width: 0; } .mod_headerblock .design5050teilung .col-leftColTextLinks { margin-left: 8.33333333%; flex: 0 0 auto; width: 41.66666667%; border-right: none; } .mod_headerblock .design5050teilung .col-rightColTextLinks { margin-left: 8.33333333%; flex: 0 0 auto; width: 41.66666667%; } } .mod_headerblock .design5050teilung ul.textlinks { width: auto !important; flex: 0; } .mod_headerblock .design5050teilung ul.textlinks li { margin-bottom: 0px; } .mod_headerblock .design5050teilung .headerRightUl { text-align: right; list-style: none; } .mod_headerblock .design5050teilung .headerRightUl .headline { font-weight: bold; font-size: var(--size-h5); } .mod_headerblock .design5050teilung .headerRightUl li.openingtimes { max-width: 360px; } .mod_headerblock .design5050teilung .navTopBarOverMenu { height: var(--header-height); margin-bottom: 3rem; } .mod_headerblock .design5050teilung .navTopBarOverMenu .logoCont { align-self: center; display: flex; align-items: center; } .mod_headerblock .design5050teilung .navTopBarOverMenu .logoCont .navbar-brand { width: 100%; height: 100%; max-width: var(--headerblock-logo-max-width); max-height: var(--headerblock-logo-max-height); display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; padding: 0; margin: 0; transition: all 0.2s ease; } .mod_headerblock .design5050teilung .navTopBarOverMenu .logoCont .navbar-brand img { object-fit: contain; object-position: left; width: var(--headerblock-logo-max-width); height: var(--headerblock-logo-max-height); transition: all 0.2s ease; } .mod_headerblock .design5050teilung .col-submenu, .mod_headerblock .design5050teilung .col-leftmainmenu { height: auto; } .mod_headerblock .design5050teilung .btn-termin-flyout .text::after { content: ''; display: block; background-size: contain; background-position: center; background-repeat: no-repeat; width: 20px; height: 20px; float: left; margin: 5px 5px 0 0; margin-left: 0px; float: right; margin-left: 0px; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg enable-background='new 0 0 448 512' version='1.1' viewBox='0 0 448 512' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23'%3E%3Cmetadata%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage'/%3E%3Cdc:title/%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23ffffff;%7D%0A%3C/style%3E%3Cpath class='st0' d='m400 64h-48v-52c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52h-192v-52c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52h-48c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-352c0-26.5-21.5-48-48-48zm-352 32h352c8.8 0 16 7.2 16 16v48h-384v-48c0-8.8 7.2-16 16-16zm352 384h-352c-8.8 0-16-7.2-16-16v-272h384v272c0 8.8-7.2 16-16 16zm-252-160h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 96h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm192 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12z'/%3E%3C/svg%3E"); } .mod_headerblock .design5050teilung .btn-termin-flyout:hover .text::after { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg enable-background='new 0 0 448 512' version='1.1' viewBox='0 0 448 512' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23'%3E%3Cmetadata%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage'/%3E%3Cdc:title/%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23679b1b;%7D%0A%3C/style%3E%3Cpath class='st0' d='m400 64h-48v-52c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52h-192v-52c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52h-48c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-352c0-26.5-21.5-48-48-48zm-352 32h352c8.8 0 16 7.2 16 16v48h-384v-48c0-8.8 7.2-16 16-16zm352 384h-352c-8.8 0-16-7.2-16-16v-272h384v272c0 8.8-7.2 16-16 16zm-252-160h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 96h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm192 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12z'/%3E%3C/svg%3E"); } .mod_headerblock .design5050teilung .btn-termin-flyout:hover .text { color: var(--color-highlight); } .mod_headerblock .design5050teilung .btn-tel-flyout .text::after { content: ''; display: block; background-size: contain; background-position: center; background-repeat: no-repeat; width: 20px; height: 20px; float: left; margin: 5px 5px 0 0; margin-left: 0px; float: right; margin-left: 0px; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M493.1,351.3l-108.4-46.5c-12.8-5.5-27.7-1.8-36.5,8.9l-44.1,53.9c-69.4-34.1-125.5-90.2-159.6-159.6l53.9-44.1 c10.7-8.8,14.4-23.7,8.9-36.5L160.8,18.9C154.8,5,139.7-2.6,125,0.8L24.2,24.1C10,27.3-0.1,40,0,54.5C0,307.8,205.3,512,457.5,512 c14.6,0,27.3-10.1,30.5-24.3L511.2,387C514.6,372.3,507,357.3,493.1,351.3z M456.9,480C222.4,479.7,32.3,289.7,32.1,55.2l99.6-23 l46,107.4l-72.8,59.5C153.3,302.3,209.4,358.6,313,407.2l59.5-72.8l107.4,46L456.9,480z'/%3E%3C/svg%3E%0A"); } .mod_headerblock .design5050teilung .btn-tel-flyout:hover .text::after { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23679b1b;%7D%0A%3C/style%3E%3Cpath class='st0' d='M493.1,351.3l-108.4-46.5c-12.8-5.5-27.7-1.8-36.5,8.9l-44.1,53.9c-69.4-34.1-125.5-90.2-159.6-159.6l53.9-44.1 c10.7-8.8,14.4-23.7,8.9-36.5L160.8,18.9C154.8,5,139.7-2.6,125,0.8L24.2,24.1C10,27.3-0.1,40,0,54.5C0,307.8,205.3,512,457.5,512 c14.6,0,27.3-10.1,30.5-24.3L511.2,387C514.6,372.3,507,357.3,493.1,351.3z M456.9,480C222.4,479.7,32.3,289.7,32.1,55.2l99.6-23 l46,107.4l-72.8,59.5C153.3,302.3,209.4,358.6,313,407.2l59.5-72.8l107.4,46L456.9,480z'/%3E%3C/svg%3E%0A"); } .mod_headerblock .design5050teilung .btn-tel-flyout:hover .text { color: var(--color-highlight); } @media (max-width: 767px) { .mod_headerblock .design5050teilung .headerRightUl { margin-right: 5px; } } .headerblock_design_flyoutacc.mod_headerblock .navTopBar .menuCont {position:absolute; right: 0; top: 0; display:none !important;} /* menu btn debug */ .headerblock_design_flyoutacc.mod_headerblock .closeMenuBtnX {display:none;} /* menu btn debug */ .headerblock_design_flyoutacc.mod_headerblock .navLi_karriere, .headerblock_design_flyoutacc.mod_headerblock .navLi_architektur , .headerblock_design_flyoutacc.mod_headerblock .navLi_partner , .headerblock_design_flyoutacc.mod_headerblock .navLi_service , .headerblock_design_flyoutacc.mod_headerblock .navLi_newsletter , .headerblock_design_flyoutacc.mod_headerblock .navLi_kontakt {display:none !important /* debug */} .logoCont, .topBarKategoryOverMenu, .btnCont , .topBarKategory {border:0px solid red;} .mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock { width: 100%; height: 100%; } .headerblock_design_flyoutacc.mod_headerblock .navTopBar.menubtn_topright .col-nav { padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); } .headerblock_design_flyoutacc.mod_headerblock .navTopBar .menuCont { width: 32px; } .headerblock_design_flyoutacc.mod_headerblock .btn.navbar-toggler { width: 32px; } .mod_headerblock .flyoutBackdrop {display:none;} .headerblock_design_flyoutacc.mod_headerblock .flyoutBackdrop { display:block; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: transparent; z-index: -1; pointer-events: all; } .mod_headerblock .navTopBar .topBarKategory, .headerblock_design_flyoutacc.mod_headerblock .topBarKategoryOverMenu { flex-shrink: 1; width: 100%; justify-content: flex-end; align-self: center; display: flex; align-items: center; } .mod_headerblock .navTopBar .topBarKategory + .btnCont, .headerblock_design_flyoutacc.mod_headerblock .topBarKategoryOverMenu + .btnCont { width:260px; width: 400px; transform: scale(1) !important; width: 220px; flex: 0 0 auto; pointer-events: all; } .headerblock_design_flyoutacc.mod_headerblock .btn-fachberatung { width: 100%; pointer-events: all; } .headerblock_design_flyoutacc.mod_headerblock .btn-fachberatung, .headerblock_design_flyoutacc.mod_headerblock .btn-fachberatung:visited { color: var(--color-white); background-color: var(--color-default); border-color: var(--color-default); } .headerblock_design_flyoutacc.mod_headerblock .btn-fachberatung:hover, .headerblock_design_flyoutacc.mod_headerblock .btn-fachberatung:active, .headerblock_design_flyoutacc.mod_headerblock .btn-fachberatung:focus { color: var(--color-white); background-color: var(--color-highlight2); border-color: var(--color-highlight2); } @media (min-width: 768px) { .headerblock_design_flyoutacc.mod_headerblock .btn-fachberatung, .headerblock_design_flyoutacc.mod_headerblock .btn-fachberatung:visited { color: var(--color-white); background-color: var(--color-default); border-color: var(--color-default); } .headerblock_design_flyoutacc.mod_headerblock .btn-fachberatung:hover, .headerblock_design_flyoutacc.mod_headerblock .btn-fachberatung:active, .headerblock_design_flyoutacc.mod_headerblock .btn-fachberatung:focus { color: var(--color-white); background-color: var(--color-highlight2); border-color: var(--color-highlight2); } } .headerblock_design_flyoutacc.mod_headerblock .navTopBarOverMenu .btn-fachberatung, .headerblock_design_flyoutacc.mod_headerblock .navTopBarOverMenu .btn-fachberatung:visited { /* display:none !important; */ /* opacity:0.5; */ color: var(--color-white); background-color: var(--color-default); border-color: var(--color-default); } .headerblock_design_flyoutacc.mod_headerblock .navTopBarOverMenu .btn-fachberatung:hover, .headerblock_design_flyoutacc.mod_headerblock .navTopBarOverMenu .btn-fachberatung:active, .headerblock_design_flyoutacc.mod_headerblock .navTopBarOverMenu .btn-fachberatung:focus { color: var(--color-white); background-color: var(--color-highlight2); border-color: var(--color-highlight2); } .headerblock_design_flyoutacc.mod_headerblock {height: var(--header-height); pointer-events: all;} .scrollheaderheight .headerblock_design_flyoutacc.mod_headerblock {pointer-events: none;} .scrollheaderheight.scrollup .headerblock_design_flyoutacc.mod_headerblock {pointer-events: all;} .headerblock_design_flyoutacc.mod_headerblock .topBarKategory, .headerblock_design_flyoutacc.mod_headerblock .topBarKategoryOverMenu { } .headerblock_design_flyoutacc.mod_headerblock .topBarKategory ul, .headerblock_design_flyoutacc.mod_headerblock .topBarKategoryOverMenu ul { width: 100%; list-style: none; justify-content: start; justify-content: center; position:relative; } .headerblock_design_flyoutacc.mod_headerblock .topBarKategory ul li, .headerblock_design_flyoutacc.mod_headerblock .topBarKategoryOverMenu ul li { width: auto; flex: 0 1 auto; } .headerblock_design_flyoutacc.mod_headerblock .bg-highlight { background: var(--color-highlight); color: var(--color-white); } .headerblock_design_flyoutacc.mod_headerblock .navTopBar .logoCont, .headerblock_design_flyoutacc.mod_headerblock .navTopBarOverMenu .logoCont { align-self: center; display: flex; align-items: center; width:100%; /* max-width:clamp(var(--headerblock-logo-max-width), 22%, var(--headerblock-logocontainer-max-width)); /* min, preferred, max * / */ max-width: var(--headerblock-logocontainer-max-width); height:100%; max-height:var(--headerblock-logocontainer-max-height); pointer-events: all; margin-top: var(--headerblock-logo-m-top); margin-left: var(--headerblock-logo-m-left); } .headerblock_design_flyoutacc.mod_headerblock .navTopBarOverMenu .navbar-brand { width: 100%; height: 100%; max-width: var(--headerblock-logo-max-width); max-height: var(--headerblock-logo-max-height); display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; padding: 0; margin: 0; transition: all 0.2s ease; } @media (max-width: 991px) { .headerblock_design_flyoutacc.mod_headerblock .navTopBar .navbar-brand, .headerblock_design_flyoutacc.mod_headerblock .navTopBarOverMenu .navbar-brand { height: calc(var(--header-mobile-height) - (var(--header-mobile-logo-padding) * 2)); } } .headerblock_design_flyoutacc.mod_headerblock .navTopBar .navbar-brand img, .headerblock_design_flyoutacc.mod_headerblock .navTopBarOverMenu .navbar-brand img { object-fit: contain; object-position: left; width: var(--headerblock-logo-max-width); height: var(--headerblock-logo-max-height); max-width: var(--headerblock-logo-max-width); max-height: var(--headerblock-logo-max-height); transition: all 0.2s ease; } .headerblock_design_flyoutacc.mod_headerblock .containerCollapsingMenu { -webkit-transition-property: width, height, visibility, transform; transition-property: width, height, visibility, transform; -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .headerblock_design_flyoutacc.mod_headerblock .containerCollapsingMenu .containerAnimatedScrollableArea { max-width: var(--headerblock-topbar-content-max-width); transform: translateX(0px); opacity: 0; transition: transform 0.2s ease, opacity 0.2s cubic-bezier(0.55, 0.09, 0.68, 0.53) /* ease in quadratic */; overflow-y: auto; overflow-x: hidden; height: auto; padding-top: 0; padding-bottom: 0; } .headerblock_design_flyoutacc.mod_headerblock .containerCollapsingMenu.show .containerAnimatedScrollableArea { transform: translateX(0px); opacity: 1; } .headerblock_design_flyoutacc.mod_headerblock .navTopBar .container-fluid, .headerblock_design_flyoutacc.mod_headerblock .navTopBarOverMenu .container-fluid, .headerblock_design_flyoutacc.mod_headerblock .containerCollapsingMenu.collapse-vertical .containerAnimatedScrollableArea { max-width: var(--headerblock-topbar-content-max-width); padding-right: var(--bs-gutter-x,.75rem); padding-left: var(--bs-gutter-x,.75rem); } .headerblock_design_flyoutacc.mod_headerblock .navTopBar .row-nav, .headerblock_design_flyoutacc.mod_headerblock .navTopBarOverMenu { height: var(--header-height); } .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar, .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .row-nav, .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .col-nav, .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu , .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .row-nav, .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .col-nav { height: var(--header-height); } /* wenn offen wieder volle höhe */ /* .mainmenuOpen.header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar, .mainmenuOpen.header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .row-nav, .mainmenuOpen.header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .col-nav, .mainmenuOpen.header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu , .mainmenuOpen.header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .row-nav, .mainmenuOpen.header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .col-nav { height: var(--header-height); } */ .headerblock_design_flyoutacc.mod_headerblock .col-submenu .submenu-container .bgColorDiv { background-color: var(--color-medium); } .headerblock_design_flyoutacc.mod_headerblock .col-submenu { height: auto; } .headerblock_design_flyoutacc.mod_headerblock .containerCollapsingMenu { } .headerblock_design_flyoutacc.mod_headerblock .row-nav-flyout { height: auto; } .headerblock_design_flyoutacc.mod_headerblock .containerCollapsingMenu.show .containerAnimatedScrollableArea { height: auto; } @media (min-width: 992px){ .headerblock_design_flyoutacc.mod_headerblock .row-mainmenu { margin-top:-20px; margin-bottom: -40px; } } .headerblock_design_flyoutacc.mod_headerblock .col-leftmainmenu { width:100%; } .headerblock_design_flyoutacc.mod_headerblock .col-leftColTextLinks { border-right: 3px solid var(--color-white); border-right: 0px solid var(--color-white); } @media (max-width: 991px){ .headerblock_design_flyoutacc.mod_headerblock .row-mainmenu { max-height: calc(100vh - var(--header-mobile-height)); overflow-x: hidden; overflow-y: scroll; overflow-y: auto; } } .headerblock_design_flyoutacc.mod_headerblock .row-leftmainmenu { padding-left: calc(var(--bs-gutter-x) * .5) !important; padding-right: calc(var(--bs-gutter-x) * .5) !important; margin-left: 0; margin-right: 0; max-width: var(--headerblock-topbar-content-max-width); --bs-gutter-x: 0; --bs-gutter-y: 0; } .headerblock_design_flyoutacc.mod_headerblock .col-leftColTextLinks { order: 2; width: calc( 100% - var(--headerblock-logocontainer-max-width) ); margin-left: auto; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: calc(var(--bs-gutter-x) * .5); padding-left: 30px; padding-right: 30px; padding-bottom: 45px; padding-bottom: 20px; /* max-height: calc(100vh - var(--header-height)); */ /* overflow-y: auto; */ /* overflow-x: hidden; */ } .headerblock_design_flyoutacc.mod_headerblock .col-rightColTextLinks { order: 1; width: var(--headerblock-logocontainer-max-width) !important; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: calc(var(--bs-gutter-x) * .5); padding-bottom: 45px; padding-bottom: 20px; /* max-height: calc( 100vh - var(--header-height) - 100px); */ /* min-height: 400px; */ /* max-height: 100vh; */ transition: heigt 0.3s ease; padding-bottom: 20px; min-height: 260px; padding-top: 40px; } .headerblock_design_flyoutacc.mod_headerblock .col-rightColTextLinks .extra_menu_html{ width:100%; font-size: var(--size-medium); line-height: var(--line-medium); } .headerblock_design_flyoutacc.mod_headerblock .col-rightColTextLinks .extra_menu_html img{max-width:220px; margin-bottom: 16px;} .headerblock_design_flyoutacc.mod_headerblock .navbar-nav {flex-wrap: wrap;} /* main nav entry */ .headerblock_design_flyoutacc.mod_headerblock .topBarKategory ul li, .headerblock_design_flyoutacc.mod_headerblock .topBarKategoryOverMenu ul li { font-size: var(--size-default); font-weight: var(--weight-default); line-height: var(--line-default); font-family: var(--font-default); } .headerblock_design_flyoutacc.mod_headerblock .topBarKategory ul li a, .headerblock_design_flyoutacc.mod_headerblock .topBarKategoryOverMenu ul li a { padding:0 30px; } @media (min-width: 992px) and (max-width: 1380px){ .headerblock_design_flyoutacc.mod_headerblock .topBarKategory ul, .headerblock_design_flyoutacc.mod_headerblock .topBarKategoryOverMenu ul { display: flex; flex-wrap: nowrap; flex-direction: row !important; justify-content: space-around; align-content: center; align-items: start; text-align: center; } .headerblock_design_flyoutacc.mod_headerblock .topBarKategory ul li, .headerblock_design_flyoutacc.mod_headerblock .topBarKategoryOverMenu ul li { padding:0 5px; } .headerblock_design_flyoutacc.mod_headerblock .topBarKategory ul li a, .headerblock_design_flyoutacc.mod_headerblock .topBarKategoryOverMenu ul li a { padding:0; } } .headerblock_design_flyoutacc.mod_headerblock a { text-decoration:none; } /* main nav colors */ .headerblock_design_flyoutacc.mod_headerblock .topBarKategory .topbarUl .navLi a { text-decoration:none; color: var(--color-default); display:inline-block; } .headerblock_design_flyoutacc.mod_headerblock .topBarKategory .topbarUl .navLi.active a { text-decoration:none; color: var(--color-highlight); } .headerblock_design_flyoutacc.mod_headerblock .navLi .submarker, .headerblock_design_flyoutacc.mod_headerblock .topBarKategory .topbarUl .navLi .submarker, .headerblock_design_flyoutacc.mod_headerblock .containerCollapsingMenu a .submarker, .headerblock_design_flyoutacc.mod_headerblock .containerCollapsingMenu a.active .submarker {display:none;} /* mob marker anzeigen zum ein ausklappen */ @media (max-width: 991px) { .headerblock_design_flyoutacc.mod_headerblock .navLi .submarker.openchild, .headerblock_design_flyoutacc.mod_headerblock .topBarKategory .topbarUl .navLi .submarker.openchild, .headerblock_design_flyoutacc.mod_headerblock .containerCollapsingMenu a .submarker.openchild, .headerblock_design_flyoutacc.mod_headerblock .containerCollapsingMenu a.active .submarker.openchild { display:inline-block; min-width: 50px; min-height: 36px; width: 50px; text-align: center; margin-bottom: 20px; font-size: 0; cursor: pointer; } .headerblock_design_flyoutacc.mod_headerblock .navLi .submarker.openchild:after { content: '\f067'; width: 1.25rem; height: 1.25rem; margin: 0px 0px 0px auto; float: right; font-family: 'Font Awesome 5 Pro'; font-weight: 300; display: block; background-image: none; transform-origin: center; transition: none; transform: translateY(-6px) translateX(0px); font-size: var(--size-headerblock); } .headerblock_design_flyoutacc.mod_headerblock .navLi .activeChild + .submarker.openchild:after { content: '\f068'; } } .headerblock_design_flyoutacc.mod_headerblock .topBarKategory .topbarUl .navLi a.stateaktiv, .headerblock_design_flyoutacc.mod_headerblock .topBarKategory .topbarUl .navLi a:hover, .headerblock_design_flyoutacc.mod_headerblock .topBarKategory .topbarUl .navLi a:active, .headerblock_design_flyoutacc.mod_headerblock .topBarKategory .topbarUl .navLi.active a:hover, .headerblock_design_flyoutacc.mod_headerblock .topBarKategory .topbarUl .navLi.active a:active { text-decoration:none; color: var(--color-highlight); } /* flyoiuzt nav colors */ .headerblock_design_flyoutacc.mod_headerblock .topBarKategoryOverMenu .topbarUl .navLi a { text-decoration:none; color: var(--color-white); display:inline-block; } .headerblock_design_flyoutacc.mod_headerblock .topBarKategoryOverMenu .topbarUl .navLi.active a.stateaktiv. .headerblock_design_flyoutacc.mod_headerblock .topBarKategoryOverMenu .topbarUl .navLi.active a { text-decoration:none; color: var(--color-highlight4); } .headerblock_design_flyoutacc.mod_headerblock .topBarKategoryOverMenu .topbarUl .navLi a.active, .headerblock_design_flyoutacc.mod_headerblock .topBarKategoryOverMenu .topbarUl .navLi a.stateaktiv, .headerblock_design_flyoutacc.mod_headerblock .topBarKategoryOverMenu .topbarUl .navLi a:hover, .headerblock_design_flyoutacc.mod_headerblock .topBarKategoryOverMenu .topbarUl .navLi a:active, .headerblock_design_flyoutacc.mod_headerblock .topBarKategoryOverMenu .topbarUl .navLi.active a:hover, .headerblock_design_flyoutacc.mod_headerblock .topBarKategoryOverMenu .topbarUl .navLi.active a:active { text-decoration:none; color: var(--color-highlight4); } /* flyout sub colors */ .headerblock_design_flyoutacc.mod_headerblock .containerCollapsingMenu a { color: var(--color-white); text-decoration:none; display:inline-block; } .headerblock_design_flyoutacc.mod_headerblock .containerCollapsingMenu a.stateaktiv, .headerblock_design_flyoutacc.mod_headerblock .containerCollapsingMenu .active a, .headerblock_design_flyoutacc.mod_headerblock .containerCollapsingMenu a.active, .headerblock_design_flyoutacc.mod_headerblock .containerCollapsingMenu a:hover, .headerblock_design_flyoutacc.mod_headerblock .containerCollapsingMenu a:active { color: var(--color-highlight4); text-decoration:none; } /* footerUl nav colors */ .headerblock_design_flyoutacc.mod_headerblock .footerUl .navLi a { text-decoration:none; color:var(--color-highlight4); } .headerblock_design_flyoutacc.mod_headerblock .footerUl .navLi a.stateaktiv, .headerblock_design_flyoutacc.mod_headerblock .footerUl .navLi a.active, .headerblock_design_flyoutacc.mod_headerblock .footerUl .navLi a:hover, .headerblock_design_flyoutacc.mod_headerblock .footerUl .navLi a:active { color: var(--color-highlight3); } /* hauptpunkte flyout*/ .headerblock_design_flyoutacc.mod_headerblock ul.mainUl { font-size: var(--size-headerblock); font-weight: var(--weight-headerblock); line-height: var(--line-headerblock); } .headerblock_design_flyoutacc.mod_headerblock ul.mainUl li.navLi { padding: 0 0px 0px; } .headerblock_design_flyoutacc.mod_headerblock ul.mainUl li.navLi .aEntry { display: flex; justify-content: space-between; } .headerblock_design_flyoutacc.mod_headerblock ul.mainUl li.navLi a { padding:0; display:none; /* main nav nicht anzeigen, nur subnav kategorisiert nach nain nav*/ } /* subnav flyout*/ .headerblock_design_textlinks.mod_headerblock ul.mainUl ul.subUl, .headerblock_design_flyoutacc.mod_headerblock ul.mainUl ul.subUl { padding: 0 0 30px; list-style: none; font-size: var(--size-headerblock-subul); font-weight: var(--weight-headerblock-subul); line-height: var(--line-headerblock-subul); } .headerblock_design_textlinks.mod_headerblock ul.mainUl ul.subUl li.subNavLi, .headerblock_design_flyoutacc.mod_headerblock ul.mainUl ul.subUl li.subNavLi { padding: 0 0px 0px; /* todo anpassen wegen lin23 nav line height */ } .headerblock_design_textlinks.mod_headerblock ul.mainUl ul.subUl li.subNavLi a, .headerblock_design_flyoutacc.mod_headerblock ul.mainUl ul.subUl li.subNavLi a { padding:0; display:inline-block; } .headerblock_design_flyoutacc.mod_headerblock .navLi a.openchild { cursor:pointer; } .headerblock_design_flyoutacc.mod_headerblock ul.mainUl li.subNavLiSelf { display:none !important } @media (min-width: 992px) { .headerblock_design_flyoutacc.mod_headerblock ul.mainUl li.subNavLiSelf { display:none !important } .headerblock_design_textlinks.mod_headerblock ul.mainUl ul.subUl.subUlAnimation, .headerblock_design_flyoutacc.mod_headerblock ul.mainUl ul.subUl.subUlAnimation { -webkit-animation: subUlAnimationSeq 0.5s normal forwards; -moz-animation: subUlAnimationSeq 0.5s normal forwards; -o-animation: subUlAnimationSeq 0.5s normal forwards; } } @keyframes subUlAnimationSeq { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0px); } } /* header scroll verhalten */ .headerblock_design_flyoutacc.mod_headerblock { position:absolute; } .scrollheaderheight .headerblock_design_flyoutacc.mod_headerblock { position:fixed; -webkit-animation: headerMoveToFixedSeq 0.3s normal forwards; -moz-animation: headerMoveToFixedSeq 0.3s normal forwards; -o-animation: headerMoveToFixedSeq 0.3s normal forwards; } .mainmenuOpen.scrollheaderheight .headerblock_design_flyoutacc.mod_headerblock { position:fixed; -webkit-animation: headerMoveToFixedSeq 0.0s normal forwards; -moz-animation: headerMoveToFixedSeq 0.0s normal forwards; -o-animation: headerMoveToFixedSeq 0.0s normal forwards; } @keyframes headerMoveToFixedSeq { from { transform: translateY( var(--header-height-negative) ); } to { transform: translateY(0px); } } .scrollheaderheight.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock {} .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar, .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .row-nav, .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .col-nav, .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu , .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .row-nav, .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .col-nav, .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar, .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .row-nav, .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .col-nav, .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu , .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .row-nav, .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .col-nav { height: var(--header-height); transition:height 0.3s ease; } .scrollheaderheight.scrolldown .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar, .scrollheaderheight.scrolldown .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .row-nav, .scrollheaderheight.scrolldown .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .col-nav, .scrollheaderheight.scrolldown .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu , .scrollheaderheight.scrolldown .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .row-nav, .scrollheaderheight.scrolldown .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .col-nav, .scrollheaderheight.scrolldown .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar, .scrollheaderheight.scrolldown .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .row-nav, .scrollheaderheight.scrolldown .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .col-nav, .scrollheaderheight.scrolldown .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu , .scrollheaderheight.scrolldown .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .row-nav, .scrollheaderheight.scrolldown .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .col-nav { height: var(--header-height-sticky); transition:height 0.3s ease; } .scrollheaderheight.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar, .scrollheaderheight.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .row-nav, .scrollheaderheight.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .col-nav, .scrollheaderheight.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu , .scrollheaderheight.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .row-nav, .scrollheaderheight.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .col-nav, .scrollheaderheight.scrolldown.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar, .scrollheaderheight.scrolldown.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .row-nav, .scrollheaderheight.scrolldown.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .col-nav, .scrollheaderheight.scrolldown.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu , .scrollheaderheight.scrolldown.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .row-nav, .scrollheaderheight.scrolldown.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .col-nav, .scrollheaderheight.scrolldown.mainmenuOpen .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar, .scrollheaderheight.scrolldown.mainmenuOpen .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .row-nav, .scrollheaderheight.scrolldown.mainmenuOpen .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .col-nav, .scrollheaderheight.scrolldown.mainmenuOpen .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu , .scrollheaderheight.scrolldown.mainmenuOpen .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .row-nav, .scrollheaderheight.scrolldown.mainmenuOpen .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .col-nav { height: var(--header-height); transition:height 0.3s ease; } .headerblock_design_flyoutacc.mod_headerblock .containerCollapsingMenu { position: relative; top: var(--header-height-negative); } .headerblock_design_flyoutacc.mod_headerblock .containerCollapsingMenu .containerAnimatedScrollableArea { transition: all 0.3s ease; overflow:hidden; } .mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .containerCollapsingMenu .containerAnimatedScrollableArea { transition: all 0.3s ease; overflow:hidden; } /* scroll im menü */ @media (max-width: 991px) and (max-height: 743px) { .mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .containerCollapsingMenu .containerAnimatedScrollableArea { max-height: 100vh; overflow:scroll; overflow-y: scroll; overflow-x: hidden; } } /* unsichtbar bei scrolldown */ .scrollup.scrollheaderheight .headerblock_design_flyoutacc.mod_headerblock {position:fixed;} .mainmenuOpen.scrollheaderheight .headerblock_design_flyoutacc.mod_headerblock {position:fixed;} .mod_headerblock .navTopBar.overflowhidden {overflow:visible;} .headerblock_design_flyoutacc.mod_headerblock .navTopBar.colored {background-color:var(--color-white);} .pns_linara.scrollheaderheight.scrolldown .headerblock_design_flyoutacc.mod_headerblock .navTopBar.colored {background-color:transparent; transition:background-color 0s ease;} .pns_linara.scrollheaderheight.scrolldown .mod_headerblock .navTopBar .logoCont, .pns_linara.scrollheaderheight.scrolldown .headerblock_design_flyoutacc.mod_headerblock .topBarKategory{opacity:0; pointer-events: none; transition:opacity 0.1s ease;} .pns_linara.scrollheaderheight.scrolldown .headerblock_design_flyoutacc.mod_headerblock .navTopBar .menuCont{opacity:0; pointer-events: none; transition:opacity 0.1s ease;} .pns_linara.scrollheaderheight.scrollup .headerblock_design_flyoutacc.mod_headerblock .navTopBar.colored {background-color: var(--color-white); transition:background-color 0.3s ease;} .pns_linara.scrollheaderheight.scrollup .mod_headerblock .navTopBar .logoCont, .pns_linara.scrollheaderheight.scrollup .headerblock_design_flyoutacc.mod_headerblock .topBarKategory{opacity:1; pointer-events: all; transition:opacity 0.3s ease;} .pns_linara.scrollheaderheight.scrollup .headerblock_design_flyoutacc.mod_headerblock .navTopBar .menuCont{opacity:1; pointer-events: all; transition:opacity 0.3s ease;} .pns_linara.scrollheaderheight.scrollup .headerblock_design_flyoutacc.mod_headerblock .navTopBar .menuCont .btn.navbar-toggler {visibility:visible !important;} /* header bei gescrollt und scrollup/hover sticky height statt wieder full height */ @media (min-width: 992px) { .scrollheaderheight.heaader-sticky.scrollup .headerblock_design_flyoutacc.mod_headerblock , .scrollheaderheight.heaader-sticky.scrollup .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .col-nav, .scrollheaderheight.heaader-sticky.scrolldown .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .col-nav, .scrollheaderheight.scrollup .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .col-nav, .scrollheaderheight.scrolldown .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .col-nav, /* .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .col-nav, */ .scrollheaderheight.heaader-sticky.scrollup .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .row-nav, .scrollheaderheight.heaader-sticky.scrolldown .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .row-nav, .scrollheaderheight.scrollup .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .row-nav, .scrollheaderheight.scrolldown .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .row-nav, /* .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .row-nav, */ .scrollheaderheight.heaader-sticky.scrollup .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar, .scrollheaderheight.heaader-sticky.scrolldown .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar, .scrollheaderheight.scrollup .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar, .scrollheaderheight.scrolldown .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar, /* .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar, */ .scrollheaderheight.heaader-sticky.scrollup .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu, .scrollheaderheight.heaader-sticky.scrolldown .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu, .scrollheaderheight.scrollup .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu, .scrollheaderheight.scrolldown .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu /* .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu */ { height: var(--header-height-sticky); } .scrollheaderheight.scrollup .headerblock_design_flyoutacc.mod_headerblock .containerCollapsingMenu, .scrollheaderheight.scrolldown .headerblock_design_flyoutacc.mod_headerblock .containerCollapsingMenu { top: var(--header-height-sticky-negative); } } .headerblock_design_flyoutacc.mod_headerblock ul.footerUl { padding: 0; margin: 0; list-style: none; font-size: var(--size-headerblock-subul); font-weight: var(--weight-headerblock-subul); line-height: var(--line-headerblock-subul); line-height: 200%; } .headerblock_design_flyoutacc.mod_headerblock .closeMenuBtnX { display: none; position: relative; right: 0; top: 0; border: none; width: auto; height: auto; text-align: right; font-size: var(--line-headerblock); line-height: var(--line-headerblock); cursor: pointer; z-index: 20; } .headerblock_design_flyoutacc.mod_headerblock .closeMenuBtnX .far { line-height: 35px; font-size: var(--line-headerblock); line-height: var(--line-headerblock); } .headerblock_design_flyoutacc.mod_headerblock .burgerElement.closeMenu { } /* animierter btn statt bs bars - start*/ .mod_headerblock .burgerElement { cursor: pointer; transition: color 0.3s ease; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: center; } .mod_headerblock .burgerElement .burgerAnimated{} /*.mod_headerblock .burgerElement .burgerText{*/ .mod_headerblock .navbar-toggler.textbelow .burgerElement .burgerText{ font-size: 13px; line-height: 13px; } .mod_headerblock .burgerAnimated { cursor: pointer; width: 32px; height: 32px; position: relative; transition: transform .3s ease,width .3s ease; transform: rotate(0deg); transform-origin: center; } /*text links statt unter den btn bars */ .mod_headerblock .navbar-toggler.textleft .burgerElement { flex-direction: row-reverse; justify-content: space-between; } .mod_headerblock .burgerAnimated.active { transform: rotate(45deg); } .mod_headerblock .burgerAnimated span::after, .mod_headerblock .burgerAnimated span::before { content: ""; border-radius: 1px; position: absolute; width: 100%; height: 4px; background: inherit; transition: left .3s ease,top .3s ease,transform .3s ease,width .3s ease; left: 0; transform-origin: center; } .mod_headerblock .burgerAnimated span::before { top: -10px; } .mod_headerblock .burgerAnimated span::after { top: 10px; } .mod_headerblock .burgerAnimated span { border-radius: 1px; width: 100%; height: 4px; background: var(--color-default); display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: left .3s ease,transform .3s ease; } .mod_headerblock .burgerAnimated:hover:not(.active) span { left: calc(50% + 5px); } .mod_headerblock .burgerAnimated:hover:not(.active) span::before { left: 10px; } .mod_headerblock .burgerAnimated:hover:not(.active) span::after { left: -10px; } .mod_headerblock .burgerAnimated.active span::before { top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-90deg); } .mod_headerblock .burgerAnimated.active span::after { width: 0; } .mod_headerblock .closeMenu .burgerAnimated{ color: var(--color-white); } .mod_headerblock .closeMenu .burgerAnimated span { background: var(--color-white); } /* animierter btn statt bs bars - ende*/ @media (min-width: 992px) { .has_mod_slider_a:not(.mainmenuOpen) .mod_headerblock.has_navLeftBar .burgerText { color: var(--color-white); } .has_mod_slider_a:not(.mainmenuOpen) .mod_headerblock.has_navLeftBar .burgerAnimated span { background-color: var(--color-white); } .has_mod_slider_a:not(.mainmenuOpen) .mod_headerblock.scroll50vh.has_navLeftBar .burgerText { color: var(--color-default); } .has_mod_slider_a:not(.mainmenuOpen) .mod_headerblock.scroll50vh.has_navLeftBar .burgerAnimated span { background-color: var(--color-default); } } @media (max-width: 991px) { .headerblock_design_flyoutacc.mod_headerblock {height: var(--header-mobile-height);} .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar, .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .row-nav, .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .col-nav, .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu , .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .row-nav, .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .col-nav, .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar, .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .row-nav, .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .col-nav, .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu , .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .row-nav, .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .col-nav { height: var(--header-mobile-height); } .scrollheaderheight.scrolldown .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar, .scrollheaderheight.scrolldown .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .row-nav, .scrollheaderheight.scrolldown .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .col-nav, .scrollheaderheight.scrolldown .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu , .scrollheaderheight.scrolldown .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .row-nav, .scrollheaderheight.scrolldown .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .col-nav, .scrollheaderheight.scrolldown .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar, .scrollheaderheight.scrolldown .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .row-nav, .scrollheaderheight.scrolldown .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .col-nav, .scrollheaderheight.scrolldown .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu , .scrollheaderheight.scrolldown .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .row-nav, .scrollheaderheight.scrolldown .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .col-nav { height: var(--header-mobile-height); } .scrollheaderheight.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar, .scrollheaderheight.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .row-nav, .scrollheaderheight.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .col-nav, .scrollheaderheight.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu , .scrollheaderheight.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .row-nav, .scrollheaderheight.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .col-nav, .scrollheaderheight.scrolldown.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar, .scrollheaderheight.scrolldown.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .row-nav, .scrollheaderheight.scrolldown.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .col-nav, .scrollheaderheight.scrolldown.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu , .scrollheaderheight.scrolldown.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .row-nav, .scrollheaderheight.scrolldown.mainmenuOpen .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .col-nav, .scrollheaderheight.scrolldown.mainmenuOpen .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar, .scrollheaderheight.scrolldown.mainmenuOpen .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .row-nav, .scrollheaderheight.scrolldown.mainmenuOpen .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBar .col-nav, .scrollheaderheight.scrolldown.mainmenuOpen .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu , .scrollheaderheight.scrolldown.mainmenuOpen .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .row-nav, .scrollheaderheight.scrolldown.mainmenuOpen .header-sticky .headerblock_design_flyoutacc.mod_headerblock .changeheightonscroll.navTopBarOverMenu .col-nav { height: var(--header-mobile-height); } .headerblock_design_flyoutacc.mod_headerblock .containerCollapsingMenu { top: var(--header-mobile-height-negative); } .headerblock_design_flyoutacc.mod_headerblock .closeMenuBtnX {display:block; top: -5px;} .headerblock_design_flyoutacc.mod_headerblock .closeMenuBtnX.burger { top: -9px;} .headerblock_design_flyoutacc.mod_headerblock .navTopBarOverMenu {} .headerblock_design_flyoutacc.mod_headerblock .logoCont {} .headerblock_design_flyoutacc.mod_headerblock .navTopBar .menuCont {display:block !important; position:relative;} .headerblock_design_flyoutacc.mod_headerblock .navTopBar .topBarKategory, .headerblock_design_flyoutacc.mod_headerblock .topBarKategoryOverMenu {display:none !important;} .mod_headerblock .navTopBar .topBarKategory + .btnCont, .headerblock_design_flyoutacc.mod_headerblock .topBarKategoryOverMenu + .btnCont {display:none !important;} .headerblock_design_flyoutacc.mod_headerblock .col-leftColTextLinks {width:100% !important; order:1; margin-top: 30px; max-height: calc(100vh - var(--header-mobile-height)); padding-left: 0px; padding-right: 0px; max-height:unset;} .headerblock_design_flyoutacc.mod_headerblock .col-rightColTextLinks {width:100% !important; order:2; min-height: auto; max-height: 50vh; padding-left: 0px; padding-right: 0px;} .headerblock_design_flyoutacc.mod_headerblock ul.mainUl li.navLi a {display: inline-block; margin-bottom: 20px;} .headerblock_design_flyoutacc.mod_headerblock ul.mainUl ul.subUl {padding-bottom:66px; margin-left: 46px; padding-left:0 !important;} .headerblock_design_flyoutacc.mod_headerblock ul.mainUl ul.subUl li.subNavLi a {margin-bottom: 0; } .headerblock_design_textlinks.mod_headerblock ul.mainUl li.navLi a {display: inline-block; margin-bottom: 10px;} .headerblock_design_textlinks.mod_headerblock ul.mainUl ul.subUl {padding-bottom:66px; margin-left: 46px; padding-left:0 !important; display:none;} .headerblock_design_textlinks.mod_headerblock ul.mainUl ul.subUl li.subNavLi a {margin-bottom: 0; } .headerblock_design_flyoutacc.mod_headerblock .containerCollapsingMenu .containerAnimatedScrollableArea { transform: translateX(0px); transform: translateY(0px); width:100vw; } } a.atateaktiv, .atateaktiv {color:red !important;} .headerblock_design_textlinks.opt_flyout_textlinks_show_submenu_mob_under_mainli.mod_headerblock {} @media (min-width: 992px) { .headerblock_design_textlinks.opt_flyout_textlinks_show_submenu_mob_under_mainli.mod_headerblock ul.mainUl ul.subUl {display:none !important;} } @media (max-width: 991px) { .headerblock_design_textlinks.opt_flyout_textlinks_show_submenu_mob_under_mainli.mod_headerblock .col-submenu {display:none !important;} } .headLangLink {display:none;} .mod_headerblock .containerCollapsingMenu a {} .mod_headerblock .containerCollapsingMenu a:has(.textlinks_show_icon) { justify-content: start; align-items: center; } .mod_headerblock .containerCollapsingMenu .textlinks_show_icon { display: inline-block; width: 3em; height: 3em; } .mod_headerblock .containerCollapsingMenu a .textlinks_show_icon img.normal { width: auto; height: auto; max-width: 100%; max-height: 100%; } .mod_headerblock .containerCollapsingMenu a:hover .textlinks_show_icon img.normal {} .mod_headerblock .containerCollapsingMenu a .menutitle {} .mod_headerblock ul.textlinks li.navLi .submarker {} .mod_headerblock .submenuContentText5Morelinks {color: var(--color-default);} /* chrome li mit markern wenn ohne ul als Wrapper */ .mod_headerblock ul.submenuContentText5MorelinksText5SelfFirst { display:block; padding-left:0; list-style-type: none; margin-bottom: 0; } .mod_headerblock ul.submenuContentText5AboveLinks { display:block; padding-left:0; list-style-type: none; margin-bottom: 0; } .mod_headerblock .backtotop { position: fixed; /* bottom: -100px; */ top: calc(100vh + 100px); right: 10px; background-color: var(--color-white); color: var(--color-default); border-radius: 50%; text-align: center; display: flex; align-items: center; justify-content: center; line-height: 100%; cursor: pointer; box-shadow: 0px 0px 12px #0004 !important; width: 60px; height: 60px; font-size: 24px; opacity:0; transition:all 0.3s ease; } .scrollup.scroll50vh .mod_headerblock .backtotop { /* bottom:10px; */ top: calc(100vh - 80px); opacity:1; }