.topbar + .main-header {
    transition: padding-top .2s linear;
}

.topbar {
    z-index: 1000001;
}

@media screen and (min-width:768px) {

    .topbar.open-submenu + .main-header,
    .topbar.open-submenu-fixed + .main-header {
        padding-top: calc(1.4rem + (var(--bs-body-line-height) * var(--bs-topbar-font-size)));
    }
}

@media screen and (min-width:992px) {

    .topbar.open-submenu-fixed ~ main.main-content header.without_header,
    .topbar.open-submenu-fixed ~ main.main-content header.intro--hero {
        grid-template-rows: 165px 3rem auto auto;
    }

    .topbar.open-submenu-fixed ~ main#produktfinder header.intro--hero {
        grid-template-rows: 165px auto auto auto;
    }

    .topbar.open-submenu-fixed ~ main.hoppe-product-page {
        margin-top: 8rem;
    }
}

@media screen and (min-width:1200px) {

    .topbar.open-submenu-fixed ~ main#produktfinder header.intro--hero,
    .topbar.open-submenu-fixed ~ main#page_without_headerimage header.intro--hero {
        grid-template-rows: 215px auto auto auto;
    }

    .topbar.open-submenu-fixed ~ main.hoppe-product-page {
        margin-top: 11rem;
    }
}

.topbar .hg--submenu {
    background-color: var(--bs-gray-300);
    position: relative;
    /*padding-right: 3.5rem;*/
    transition: height .2s linear;
    height: 0;
    z-index: 1;
}

.topbar .hg--submenu-fixed {
    background-color: var(--bs-gray-300);
    position: absolute;
    padding-right: 0;
    transition: height .2s linear;
    height: 0;
    top: calc(1.875rem + 2px);
    left: 50%;
    transform: translateX(-50%);
}

.topbar .hg--submenu .btn-close {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    transition: opacity .2s ease-in-out;
}

.topbar.open-submenu .hg--submenu .btn-close {
    opacity: .5;
    z-index: 1;
    pointer-events: auto;
}

.topbar.open-submenu .hg--submenu .btn-close:hover {
    opacity: .75;
}

.topbar .hg--submenu > div {
    height: 0;
    overflow: hidden;
    transition: height .2s linear;
    padding: 0 3.5rem;
	display: none !important;
}

.topbar .hg--submenu > div.is--open,
.topbar.open-submenu .hg--submenu {
    height: calc(1.4rem + var(--bs-body-line-height) * var(--bs-topbar-font-size));
	display: flex !important;
	margin: auto;
}

.topbar .hg--submenu-fixed > div.submenu-fixed,
.topbar.open-submenu-fixed .hg--submenu-fixed {
    height: calc(1.4rem + var(--bs-body-line-height) * var(--bs-topbar-font-size));
}

/*
body:not(.fixed-header) .topbar.open-submenu .hg--submenu-fixed {
	height:0;
}
*/


.topbar a[data-submenu] {
    transition: background-color .2s ease-in-out;
}

.topbar a.is--active {
    font-weight: var(--fw-bold);
    background-color: var(--bs-gray-300);
}


/* Move down Content if topbar submenu is opened */
body:not(.submenu2) .topbar ~ .main-content {
    transition: padding-top .2s linear;
}

body:not(.submenu2) .topbar ~ .main-content .intro-hero--image {
    transition: height .2s linear, margin-top .2s linear;
}

@media screen and (min-width:768px) {
    body:not(.submenu2) .topbar.open-submenu ~ .main-content {
        padding-top: calc(1.4rem + var(--bs-body-line-height) * var(--bs-topbar-font-size));
    }

    body:not(.submenu2) .topbar.open-submenu-fixed ~ .main-content {
        padding-top: calc(1.4rem + var(--bs-body-line-height) * var(--bs-topbar-font-size));
    }

    body:not(.submenu2) .topbar.open-submenu ~ .main-content .intro-hero--image {
        1margin-top: calc(-1.4rem - var(--bs-body-line-height) * var(--bs-topbar-font-size));
        height: calc(100% + 1.4rem + var(--bs-body-line-height) * var(--bs-topbar-font-size));
    }

    body:not(.submenu2) .topbar.open-submenu-fixed ~ .main-content .intro-hero--image {
        margin-top: calc(-0.2rem - var(--bs-body-line-height) * var(--bs-topbar-font-size));
        height: calc(100% + 1.4rem + var(--bs-body-line-height) * var(--bs-topbar-font-size));
    }
}

.submenu2 .topbar ~ .main-content {
    transition: border-top-width .2s linear;
    border-top: 0 solid #FFF;
    ;
}

.submenu2 .topbar.open-submenu ~ .main-content {
    border-top-width: calc(1.4rem + var(--bs-body-line-height) * var(--bs-topbar-font-size));
}

.submenu2 .topbar.open-submenu-fixed ~ .main-content {
    border-top-width: calc(1.4rem + var(--bs-body-line-height) * var(--bs-topbar-font-size));
}


/*    HERO Height FIX    */


.topbar {
    transition: all 0.2s ease-in-out;
    background: none;
}

.intro-hero--image img {
    transition: all 0.2s ease-in-out;
    1margin-top: 0;
}




@media (min-width:1200px) {

    .submenu-is-open:not(.logged-in) .intro-hero--image img {
        1margin-top: 4rem;
    }

    .topbar.open-submenu {
        background: var(--bs-gray-300);
    }

}

@media (min-width:1460px) {

    .submenu-is-open:not(.logged-in) .intro-hero--image img {
        1margin-top: 4rem;
    }

    

}

@media (min-width:768px) {
    .topbar.open-submenu,
    .logged-in .topbar.open-submenu-fixed {
        /*background: var(--bs-gray-300);*/
        background: white;
    }
    
    .topbar.open-submenu {
        /*background: var(--bs-gray-300);*/
        background: white;
    }
}

@media (min-width:1700px) {

    .submenu-is-open:not(.logged-in) .intro-hero--image img {
        1margin-top: 2.5rem;
    }

    

}

.intro-hero--image img {
    transform: none;
}

.intro-hero--image {
    transition: all 0.5s ease-in-out;
    mar2gin-top: 0 !important;
}

.intro-hero--image {
    /*transform: scale(1.05) translatey(39px) !important;*/
    transform: scale(1.05) translatey(39px) !important;
    height: calc(100% + 2rem) !important;
}

body.submenu-is-open .intro-hero--image {
    1margin-top: 0px !important;
    1transform: none !important;
    1height: calc(100% + 3rem) !important;
}

@media (min-width:1460px) {
    .intro-hero--image {
        /*transform: scale(1.05) translatey(32px) !important;*/
        transform: scale(1.05) translatey(32px) !important;
    }
}