header {width: 100%; height: 80px; background: #fff}
header #header-grid{max-width: 1200px; height: 100%; margin: auto; 
                    display: grid; 
                    grid-template-columns: 150px calc(100% - 150px);
                    grid-template-rows: 33.333% 33.333% 33.333%;
                    grid-template-areas: "logo topbar"
                                         "logo menu"
                                         "logo menu"
}            
header #h-logo-div{grid-area: logo; justify-self: center; align-self: center;  display: flex; justify-content: center; align-items: center}
header #h-logo-div > a > img{height: 50px}
/*header #h-content{width: calc(100% - 100px); height: 100%}*/
#topbar{grid-area: topbar; display: flex; justify-content: flex-end; align-items: center}
/*header #h-content #menu{width: 100%; height: 50px; display: flex; justify-content: space-around; align-items: flex-end}*/
#mobile-overlay{grid-area: menu; display: flex; justify-content: space-around; align-items: flex-end}
header #menu{ display: flex; justify-content: space-around; align-items: flex-end; width: 100%}

header #menu .h-m-item{padding: 10px 20px;}
header #menu .h-m-item:hover{cursor: pointer; background: #005D90}

header #menu .unfold-box{position: absolute; margin-top: 10px; margin-left: -20px;  
                         z-index: 99999; background: #fff; display: none;
                         box-shadow: 0px 10px 18px -9px rgba(0,0,0,0.2);
                         -webkit-box-shadow: 0px 10px 18px -9px rgba(0,0,0,0.2);
                         -moz-box-shadow: 0px 10px 18px -9px rgba(0,0,0,0.2);
}
header #menu .unfold-box .underpoints:hover{display: block}
header #menu .unfold-box .u-item-box > a{padding: 0 30px; display: block}
header #menu .unfold-box .u-item-box:hover{background: #005D90; box-shadow: 4px 4px 12px rgba(0,0,0,0.2)}
.unfold-box .u-item-box:hover > a{color: #fff}
header #menu .unfold-box .u-item-box:last-of-type{border-bottom: none}
.unfold-box .u-item-box > a{font-weight: 500; font-size: 15px; text-decoration: none; color: #36414A; line-height: 45px}
header #menu .h-m-item:hover{background: #005D90}

header #menu .unfold-box .underpoints{display: none; min-width: 100%; position: absolute;
                                      left: 100%; background: #fff;
                                      box-shadow: 0px 10px 18px -9px rgba(0,0,0,0.2);
                                      -webkit-box-shadow: 0px 10px 18px -9px rgba(0,0,0,0.2);
                                      -moz-box-shadow: 0px 10px 18px -9px rgba(0,0,0,0.2);}
.underpoints{padding: 0; list-style: none}
.underpoints li:last-of-type{border-bottom: none}
.underpoints li a{color: #36414A; font-size: 14px; text-decoration: none; font-weight: 400; display: block; padding: 10px 20px}
@keyframes menu{from{opacity: 0}to{opacity: 1}}

#topbar a{margin: 0 4px; color: grey; display: flex}
#mobile-menu-div{display: none}

/*GROSSER ALS 850PX*/
@media only screen and (min-width: 970px){
    header #menu .h-m-item{display: flex}
    header #menu .h-m-item:hover > .unfold-box{display: block; animation: menu 0.3s; margin-top: 30px !important}
    header #menu .h-m-item .mobile-menu-header > a{color: #36414A; text-decoration: none; font-size: 16px}
    header #menu .h-m-item > .unfold-arrow{transform: rotate(0deg); align-self: flex-end; justify-self: flex-end}
    header #menu .h-m-item:hover > .unfold-arrow{visibility: hidden;}
    header #menu .h-m-item:hover .mobile-menu-header > a{color: #fff}
    header #menu .u-item-box:hover > .underpoints{display: block; animation: menu 0.3s}
    .underpoints li:hover{background: #005D90}
    .underpoints li:hover a{color: #fff}
    .unfold-arrow{transform: rotate(270deg)}
    .unfold-arrow > img{height: 18px}
    .u-item-box{display: flex; align-content: center; justify-content: space-between}
    .u-item-box:hover > .unfold-arrow > img{opacity: 0;}
    .underpoints > li {min-height: 45px}
    #placeholder-menu{display: none}
}

/*KLEINER ALS 850PX*/
@media only screen and (max-width: 970px){
    #mobile-overlay{background: #fff; z-index: 9999; position: fixed; right: 0; bottom: 0; top: 80px; overflow: auto}
    #mobile-menu-div{grid-area: menu; display: flex;  justify-content: flex-end; align-items: center; padding-right: 15px}
    #mobile-menu-div > img{height: 30px}
    header #h-logo-div{align-items: flex-end !important}
    .only-mobile-first-start{display: none; left: 100vw}
    .only-mobile-display-none{animation: close-menu 0.35s; left: 100vw; display: block !important}
    
    .only-mobile-first-start .unfold-arrow{animation: open-menu-arr 1s}
    .only-mobile-display-block .unfold-arrow{animation: open-menu-arr 1s}
    .only-mobile-display-none .unfold-arrow{animation: close-menu-arr 0.3s}

    @keyframes open-menu-arr {
        from{opacity: 0}
        to{opacity: 1}
    }
    @keyframes close-menu-arr{

        from{opacity: 1}
        to{opacity: 0}
    }

    @keyframes close-menu{
        from{left: 0}
        to{left: 100vw}
    }

    .only-mobile-display-block{animation: open-menu 0.35s;  left: 0; display: block !important}
    @keyframes open-menu{
        from{left: 100vw}
        to{left: 0}
    }
    header{position: fixed; z-index:999999; box-shadow: 0 0 12px rgba(0, 0, 0, 0.3); left: 0}
    #menu{grid-area: none; position: relative; background: #fff; overflow: hidden; display: block !important}
    .h-m-item {
        font-weight: 500 !important;
        padding: 0;
        margin: 0 50px;
        padding: 15px 0 10px 0 !important;
        border-bottom: solid 1px #e4e4e4;
        display: grid;
        grid-template-areas:"header arrow" 
                            "area2 area2";
        grid-template-columns: 70% 30%;
    }
    .h-m-item > a{font-size: 16px}
    header #menu .h-m-item:hover{background: #fff}
    header #menu .h-m-item .mobile-menu-header > a{color: #36414A; text-decoration: none; font-size: 15px}
    header #menu .h-m-item:hover .mobile-menu-header > a{color: #36414A; font-weight: 600 !important}
    header #menu .unfold-box{position: relative; box-shadow: none; margin-left: 0; background: #fff; grid-area: area2;}
    .unfold-box .u-item-box:first-of-type{border-top: solid 1px #ddd !important}
    /*.unfold-box .u-item-box{border-top: solid 1px #f3f3f3}*/
    .u-item-box {
        display: grid;
        grid-template-columns: 70% 30%;
        grid-template-areas: "title arrow" 
                            "dropdown dropdown"
    }
    .u-item-box a{padding: 0 10px !important; font-weight: 400 !important; grid-area: title; font-size: 14px !important; color: #36414acc}
    .u-item-box .dropdown-area-3{grid-area: arrow; display: flex; align-items: center}
    .u-item-box:hover{background: #fff !important; box-shadow: none !important}
    .u-item-box:hover > a{color: #36414A !important; animation: change-font-size 0.3s; font-weight: 600 !important;}

    .underpoints{background: #fff !important; margin-top: 0 !important; position: relative !important; left: 0 !important; box-shadow: none !important; grid-area: dropdown}
    .underpoints  li a{font-weight: 400 !important; padding: 10px 20px !important}

    .mobile-menu-header{ grid-area: header}
    .unfold-arrow{grid-area: arrow; justify-self: flex-end}
    .unfold-arrow > img{height: 25px}
    /*.h-m-item:hover > .unfold-box,
    .h-m-item:focus > .unfold-box {
        display: block !important;
        animation: menu 0.3s
    }*/
    .dropdown{display: block !important}
    .dropdown-close{display:none}

    .arr-up{transform: rotate(180deg); transition-duration: 0.25s;}
    .arr-down{transform: rotate(0deg); transition-duration: 0.25s;}

    #placeholder-menu{display: block; height: 80px; width: 100vw; background: #fff}

}

/*KLEINER ALS 550px*/
@media only screen and (max-width: 550px){
    #mobile-overlay{top: 100px}
    header{height: 100px}
    header #header-grid {
        grid-template-areas:"topbar topbar" 
                            "logo menu" 
                            "logo menu"
    }
    header #h-logo-div{justify-self: flex-start; padding-left: 15px}
    #topbar{background: #F3F3F3; justify-content: center}
    #menu{min-height: calc(100vh - 80px);}
    .h-m-item{margin: 0 30px}
    #placeholder-menu{height: 100px}
}