* {
    margin:0;
    font-family:"Open Sans";
    font-size:12pt;
    font-weight:normal;
}

html {
    margin:0;
    padding:0;
    font-family:"Open Sans";
    font-size:12pt;
}
h1,h2,h3,h4 {
    font-family:"Open Sans";
    color:#4b4f54;
    text-align:left;
}
h1 {
    font-size:2.0em;
    font-weight:700;
}
h2 {
    font-size:1.4em;
    font-weight:600;
    color:#005eb8;
}
h3 {
    padding:10px 0;
    font-size:1.1em;
    font-weight:600;
    color:#005eb8;
}

@media (orientation: portrait) {  /* Hochformat */
    #grid {
        display: grid;
        grid-template-areas: "logo vvs vvs"
                             "mnr_header_p mnr_header_p mnr_header_p"
                             "clickpath clickpath clickpath"
                             "menu menu menu"
                             "sidetopmenu sidetopmenu sidetopmenu"
                             "blank blank blank"
                             "content content content";
        grid-template-columns: 115px 90px 1fr;
        grid-template-rows: 100px 30px 56px auto 30px 25px auto;
        grid-gap:0px;
    }
    #vvs_title, #mnr_header, #clickpath_prompt, #menu_gap, #left, #support, #version {
        display:none;
    }
}

@media (orientation: landscape) { /* Querformat */
    #grid {
        display: grid;
        grid-template-areas: "logo vvs vvs_title mnr_header"
                             "clickpath_prompt clickpath_prompt clickpath clickpath"
                             "menu_gap menu_gap menu menu"
                             "blank blank blank blank"
                             "left left content content"
                             "support support support version";
        grid-template-columns: 115px 110px 4fr 1fr;
        grid-template-rows: 100px 30px 56px 25px 1fr 30px;
        grid-gap:0px;
    }
    #mnr_header_p, #sidetopmenu {
        display:none;
    }
}

#logo {
    grid-area:logo;
    background-color:#005eb8;
    margin-left:0px;
    border:0px;
}
#logo img {
    margin:5px 0px 5px 25px;
}
#vvs {
    left:auto;
    grid-area:vvs;
    background-color:#005eb8;
    font-family:"Open Sans";
    font-size:30pt;
    font-weight:800;
    font-style:italic;
    letter-spacing:0.1em;
    color:#fff;
}
.inner_vvs {
    font-family:"Open Sans";
    font-size:30pt;
    letter-spacing:0.1em;
    color:#fff;
    height:100px;
    display:table-cell;
    vertical-align:middle;
    padding-left:25px;
}
.v_center {
    font-family:"Open Sans";
    font-size:12pt;
    color:#fff;
    height:30px;
    display:table-cell;
    vertical-align:middle;
}

#vvs_title {
    grid-area:vvs_title;
    background-color:#005eb8;
    font-family:"Open Sans";
    font-size:30pt;
    font-weight:normal;
    letter-spacing:0.1em;
    font-style:normal;
    /* align-:center;
    justify-self:start; */
    color:#fff;
}
#mnr_header {
    grid-area:mnr_header;
    background-color:#005eb8;
    font-family:"Open Sans";
    font-size:12pt;
    font-weight:normal;
    color:#fff;
}
#mnr_header_p {
    grid-area:mnr_header_p;
    background-color:#005eb8;
    font-family:"Open Sans";
    font-size:12pt;
    font-weight:normal;
    color:#fff;
}

.bottom {
    height:100px;
    font-size:11pt;
    color:#fff;
    display:table-cell;
    vertical-align:bottom;
}
#clickpath_prompt {
    grid-area:clickpath_prompt;
    background-color:#fff;
    font-family:"Open Sans";
    font-size:12pt;
    font-weight:normal;
    color:#4b4f54;
}
#clickpath {
    grid-area:clickpath;
    background-color:#fff;
    font-family:"Open Sans";
    font-size:12pt;
    font-weight:normal;
    color:#4b4f54;
}
#clickpath a {
    font-weight:bold;
    text-decoration:none;
}
#menu_gap {
    grid-area:menu_gap;
    /* background-color:#005eb8; */
    background-color:#c4c7c9;
}
#menu {
    grid-area:menu;
    /* background-color:#005eb8; */
    background-color:#c4c7c9;
    font-family:"Open Sans";
    font-size:12pt;
    font-weight:bold;
    color:#fff;
}
#sidetopmenu {
    background:transparent;
}

#hamburger_menu {
    width:30px;
    background-color:#005eb8;
    /* background-color:#ff0; */
}
#hamburger_menu .hamburg {
    display:block;
    background:#005eb8;
    width:25px;
    height:25px;
    position:relative;
    margin:0px auto;
    margin-top:160px;
    /* border-radius:4px; */
    transition:border-radius .5s;
}
#hamburger_menu .line {
    position:absolute;left:3px;
    height:4px;
    width:20px;
    background:#fff;
    border-radius:2px;
    display:block;
    transition:0.5s;
    transform-origin:center;
}
#hamburger_menu .line:nth-child(1) { top:4px; }
#hamburger_menu .line:nth-child(2) { top:10px; }
#hamburger_menu .line:nth-child(3) { top:16px; }

#blank {
    grid-area:blank;
    /* background-color:#fff; */
    background:transparent;
}
#left {
    grid-area:left;
    background-color:#fff;
}
#content {
    grid-area:content;
    background-color:#fff;
}
#support {
    grid-area:support;
    background-color:#005eb8;
    font-family:"Open Sans";
    font-size:12pt;
    font-weight:bold;
    color:#fff;
}
#version {
    grid-area:version;
    background-color:#005eb8;
    font-family:"Open Sans";
    font-size:12pt;
    font-weight:bold;
    color:#fff;
}
div.startbox {
    width:640px;
    border:1px solid #000;
    margin:0px auto 25px 0px;
    background-color:#005eb8;
    color:#eee;
    padding:10px;
    font-family:Open Sans;
}
