html, body{
    margin: 0;
    padding: 0;
}

/* Config body nav_top/aside_left/aside_right */
body.nav_top{
    display: grid;
    grid-template-areas:    'header'
                            'nav'
                            'aside'
                            'main'
                            'footer';
}
body.aside_left{
    display: grid;
    grid-template-columns: 300px calc(100% - 300px);
    grid-template-areas:    'header header'
                            'nav nav'
                            'aside main'
                            'footer footer';
}
body.aside_right{
    display: grid;
    grid-template-columns: calc(100% - 300px) 300px;
    grid-template-areas:    'header header'
                            'nav nav'
                            'main aside'
                            'footer footer';
}
@media only screen and (max-width: 600px) {
    body.aside_left{
        display: grid;
        grid-template-columns: 100%;
        grid-template-areas:    'header'
                                'nav'
                                'aside'
                                'main'
                                'footer';
    }
    body.aside_right{
        display: grid;
        grid-template-columns: 100%;
        grid-template-areas:    'header'
                                'nav'
                                'aside'
                                'main'
                                'footer';
    }
}
/* nav_left (nav_right/nav_top_aside) */

/* Nav: <nav> nav_left/nav_right/nav_center/nav_space_around nav_sticky/nav_fixed -> left/right/nav_button/nav */
nav{
    grid-area: nav;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
nav.nav_sticky{
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 0;
}
nav.nav_fixed{
    position: fixed;
    top: 0;
    width: 100%;
}
nav .nav ul{
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
nav .nav ul li ul{
    display: none;
    position: absolute;
}
nav .nav ul li:hover ul{
    display: block;
}
nav .nav a{
    box-sizing: border-box;
}
nav.nav_left{
  justify-content: flex-start;
}
nav.nav_right{
  justify-content: flex-end;
}
nav.nav_center{
  justify-content: center;
}
nav.nav_space_around{
  justify-content: space-around;
}
nav .nav_button{
    display: none;
}
@media only screen and (max-width: 600px) {
    nav .nav{
        display: none;
        order: 99;
        width: 100%;
    }
    nav .nav ul{
        flex-direction: column;
    }
    nav .nav ul li ul{
        display: block;
        position: static;
    }
    nav .nav_button{
        display: block;
    }
    nav .nav.active{
        display: block;
    }
}

/* Aside: <aside> */
aside{
    grid-area: aside;
    display: flex;
}
aside .aside{
    width: 100%;
    order: 1;
    flex-basis: 100%;
}
aside .bottom{
    align-self: flex-end;
}
aside .aside_button{
    display: none;
}

@media only screen and (max-width: 600px) {
    aside .aside{
        display: none;
    }
    aside .aside.active{
        display: block;
    }
    aside .aside_button{
        display: block;
    }
}

/* Header: <header> */
header{
    grid-area: header;
}

/* Main: <main> */
main{
    grid-area: main;
    width: 100vw;
}

/* Footer: <footer> */
footer{
    grid-area: footer;
}

/* right/left (funktioniert immer) */
.right{
    margin-left: auto !important;
    float: right;
}
.left{
    margin-right: auto;
}

/* bg_img */
.bg_img{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* All: breadcrumb */
.breadcrumb ul{
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
.breadcrumb ul li:before{
    content: '/';
}

/* container/container_full -> container_inner & config -> item_* */
.container{
    box-sizing: border-box;
    width: 100%;
}
.container .container_inner, .container_full .container_inner{
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}
.container .container_inner{
    width: 100%;
    max-width: 1100px;
}
@media (max-width: 1200px) {
  .container .container_inner{
    max-width: 800px;
  }
}
@media (max-width: 900px) {
  .container .container_inner{
    max-width: 600px;
  }
}
.container_full .container_inner{
    width: 100%;
}

/* container Float: container_float_left, container_float_right, container_float_center, container_float_space_between, container_float_space_around */
.container_inner.container_float_left{
    justify-content: flex-start;
}
.container_inner.container_float_right{
    justify-content: flex-end;
}
.container_inner.container_float_center{
    justify-content: center;
}
.container_inner.container_float_space_between{
    justify-content: space-between;
}
.container_inner.container_float_space_around{
    justify-content: space-around;
}

/* container Align: container_align_top, container_align_bottom, container_align_center, container_align_baseline, container_align_stretch */
.container_inner.container_align_top{
    align-items: flex-start;
}
.container_inner.container_align_bottom{
    align-items: flex-end;
}
.container_inner.container_align_center{
    align-items: center;
}
.container_inner.container_align_baseline{
    align-items: baseline;
}
.container_inner.container_align_stretch{
    align-items: stretch;
}

/* item_* / item_s_* */
[class*="item_"] {
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
}
[class*="item_typ"] {
    padding-left: 0;
    padding-right: 0;
}
.item{
    flex-grow: 1;
    min-width: 8.33%;
}
.item_1 {width: 8.33%;}
.item_2 {width: 16.66%;}
.item_3 {width: 25%;}
.item_4 {width: 33.33%;}
.item_5 {width: 41.66%;}
.item_6 {width: 50%;}
.item_7 {width: 58.33%;}
.item_8 {width: 66.66%;}
.item_9 {width: 75%;}
.item_10 {width: 83.33%;}
.item_11 {width: 91.66%;}
.item_12 {width: 100%;}

.hide_on_desktop{
    display: none !important;
}
@media only screen and (max-width: 600px) {
    [class*="item_"] {
        width: 100%;
    }
    item{
        width: 100%;
    }
    .hide_on_desktop{
        display: block !important;
    }
    .hide_on_mobile{
        display: none !important;
    }
}

.item_s{
    flex-grow: 1;
    min-width: 8.33%;
}
.item_s_1 {width: 8.33%;}
.item_s_2 {width: 16.66%;}
.item_s_3 {width: 25%;}
.item_s_4 {width: 33.33%;}
.item_s_5 {width: 41.66%;}
.item_s_6 {width: 50%;}
.item_s_7 {width: 58.33%;}
.item_s_8 {width: 66.66%;}
.item_s_9 {width: 75%;}
.item_s_10 {width: 83.33%;}
.item_s_11 {width: 91.66%;}
.item_s_12 {width: 100%;}

/* Defaults */
h1, h2, h3, h4, h5, h6{
    margin: 0;
    padding: 0;
}
h1{
    font-size: 2em;
    font-weight: 900;
}
h2{
    font-size: 1.5em;
    font-weight: 900;
}
h3{
    font-size: 1.5em;
    font-weight: 400;
}
h4{
    font-size: 1.2em;
    font-weight: 900;
}
h5{
    font-size: 1.2em;
    font-weight: 500;
}
h6{
    font-size: 1em;
    font-weight: 900;
}