.dj-offcanvas-open .dj-offcanvas  {
         z-index                 : 5000!important;
         }

.sticky-menu {
         z-index                 : 2;
         position                : fixed;
         top                     : 0;
         width                   : 100%;
         opacity                 : 0.95;
         background              : white; }

.sticky-menu .sticky-menu-container {
         display                 : grid;
         z-index                 : 500;
}

.header-scroll {
         box-shadow              : rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.menu-bg,
.logo-bg {
         background-color        : var(--menu-bg);
         }
.menu-zeile-bg {
         background-color        : var(--bg-header);
         }

/* #######################################*/
/* ALLGEMEINE EINSTELLUNG STICKY-HEADER */
@media screen and (min-width: 1400px) {
.sticky-menu .sticky-menu-container {
         grid-template-columns   : auto repeat(12, 105px) auto;

}}
@media screen and (min-width: 1200px) and (max-width: 1400px) {
.sticky-menu .sticky-menu-container {
         grid-template-columns   : auto repeat(12, 95px) auto;
}}
@media screen and (min-width: 1000px) and (max-width: 1200px) {
.sticky-menu .sticky-menu-container {
         grid-template-columns   : auto repeat(12, 75px) auto;
}}

@media screen and (min-width: 850px) and (max-width: 1000px) {
.sticky-menu .sticky-menu-container {
         grid-template-columns   : auto repeat(10, 80px) auto;
}}
@media screen and (min-width: 700px) and (max-width: 850px) {
.sticky-menu .sticky-menu-container {
         grid-template-columns   : auto repeat(10, 68px) auto;
}}
@media screen and (max-width: 700px) {
.sticky-menu .sticky-menu-container {
         grid-template-columns   : auto repeat(6, 15%) auto;
}}



@media screen and (min-width: 1200px) {
 /* Sticky-Menu-Bereich */
.header-normal{
         height                  : 12em;}

.header-scroll {
         height                  : 9em;}

.main-start{
         padding-top             : 12em;}

.menu-bg {
         grid-column             : 1 / 15;
         grid-row                : 1 / 2;}

.menu-zeile-bg {
         grid-column             : 1 / 15;
         grid-row                : 2 / 3;}
.suchen{
         grid-column             : 9 / 14;
         grid-row                : 1 / 2;}

.menu-zeile {
         grid-column             : 2 / 14;
         grid-row                : 2 / 3;
         display                 : flex;}
.menu-top{
         width                   : 55%;
         align-self              : center;}

.juspo-logo {
         width                   : 40%;
         text-align              : center;
         padding                 : 1em;}

.header-normal .juspo-logo img {
         height                  : 150px;
         width                   : auto;}
.header-scroll .juspo-logo img {
         height                  : 90px;
         width                   : auto;}
}

/**##################################### */

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

.header-normal{
         height                  : 10em;}

.header-scroll {
         height                  : 9em;}

.main-start{
         padding-top             : 12em;}

.menu-bg {
         grid-column             : 1 / 15;
         grid-row                : 1 / 2;}

.menu-zeile-bg {
         grid-column             : 1 / 15;
         grid-row                : 2 / 3;}
.suchen{
         grid-column             : 9 / 14;
         grid-row                : 1 / 2;}

.menu-zeile {
         grid-column             : 2 / 14;
         grid-row                : 2 / 3;
         display                 : flex;}
.menu-top{
         width                   : 55%;
         align-self              : center;}

.juspo-logo {
         width                   : 40%;
         text-align              : center;
         padding                 : 1em;}

.header-normal .juspo-logo img {
         height                  : 150px;
         width                   : auto;}
.header-scroll .juspo-logo img {
         height                  : 90px;
         width                   : auto;}


         }

/* #######################################*/



/* Menu fuer Mobil - 13 Spalten */
@media screen and (min-width: 700px) and (max-width: 1000px)  {

.header-normal{
         height                  : 10em;}

.header-scroll {
         height                  : 6em;}

.main-start{
         padding-top             : 10em;}

.menu-bg {
         grid-column             : 1 / 13;
         grid-row                : 1 / 2;}

.menu-zeile-bg {
         grid-column             : 1 / 13;
         grid-row                : 2 / 3;}
.suchen{
         grid-column             : 9 / 12;
         grid-row                : 1 / 2;}

.menu-zeile {
         grid-column             : 2 / 12;
         grid-row                : 2 / 3;
         display                 : flex;}
.menu-top{
         width                   : 100%;
         align-self              : center;}

.juspo-logo {
         width                   : 100%;
         text-align              : center;
         padding                 : 1em;}

.header-normal .juspo-logo img {
         height                  : 120px;
         width                   : auto;}
.header-scroll .juspo-logo img {
         height                  : 80px;
         width                   : auto;}
.header-scroll .juspo-logo {
         padding                 : .25em;}

}


@media screen and (min-width: 600px) and (max-width: 700px)  {

.header-normal{
         height                  : 7em;}

.header-scroll {
         height                  : 6em;}

.main-start{
         padding-top             : 9em;}

.menu-bg {
         grid-column             : 1 / 9;
         grid-row                : 1 / 2;}

.menu-zeile-bg {
         grid-column             : 1 / 9;
         grid-row                : 2 / 3;}
.suchen{
         grid-column             : 2 / 8;
         grid-row                : 1 / 2;}

.menu-zeile {
         grid-column             : 2 / 8;
         grid-row                : 2 / 3;
         display                 : flex;}
.menu-top{
         width                   : 68%;
         align-self              : center;}

.juspo-logo {
         width                   : 30%;
         text-align              : right;
         padding                 : 1em;}

.header-normal .juspo-logo img {
         height                  : auto;
         width                   : 100%;}
.header-scroll .juspo-logo img {
         height                  : auto;
         width                   : 60%;}
.header-scroll .juspo-logo {
         padding                 : .25em;}




}

@media screen and (max-width: 600px)   {

.header-normal{
         height                  : 13em;}

.header-scroll {
         height                  : 8em;}

.main-start{
         padding-top             : 14em;}

.menu-bg {
         grid-column             : 1 / 9;
         grid-row                : 1 / 2;}

.menu-zeile-bg {
         grid-column             : 1 / 9;
         grid-row                : 2 / 3;}
.suchen{
         grid-column             : 2 / 8;
         grid-row                : 1 / 2;}

.menu-zeile {
         grid-column             : 2 / 8;
         grid-row                : 2 / 3;
         display                 : grid;}
.menu-top{
         grid-column             : 2 / 8;
         grid-row                : 2 / 3;
         align-self              : center;}

.juspo-logo {
         grid-column             : 2 / 8;
         grid-row                : 1 / 2;
         text-align              : center;
         padding                 : 0.5em;}

.header-normal .juspo-logo img {
         height                  : 110px;
         width                   : auto;}
.header-scroll .juspo-logo img {
         height                  : 60px;
         width                   : auto;}
.header-scroll .juspo-logo {
         padding                 : .25em;}

}

/* Navigation */
ul.mod-menu {
         width           : 100%;
         display         : flex!important;
         justify-content : flex-start;}

ul.mod-menu li {
         list-style      : none;
         margin-left     : 0.45em;
         margin-right    : 0.45em;}


.menu li a {
         height          : 60px;
         font-size       : 100%;
         font-weight     : bold;
         color           : var(--menu-text);

         text-decoration : none;
         letter-spacing  : 0.1em;}

@media screen and (min-width: 600px)  {
.menu li a {
         padding         : 0.25em 0.75em;
         }
           }

@media screen and (max-width: 600px)  {
.menu li a {
         padding         : 0.25em 1%;
         }
           }

.menu li a:hover {
    color                : var(--menu-text-hover);
    border-bottom        : 5px solid var(--menu-text-border);


    }

.menu li.active a {
    color                : var(--menu-text-active);
    border-bottom        : 5px solid var(--menu-text-border);
    }


























[class$="-scroll"],
[class$="-normal"],
h1, img {
         transition              : all .6s ease;
         }