.site-grid {
  grid-template-areas:
    ". top-a  top-a  top-a  top-a  ." 
    ". topl-1 topr-1 topr-1 topr-1 ." 
    ". banner banner banner banner ." 
 
    
    ". top-b  top-b  top-b  top-b  ." 
    ". side-l comp   comp   side-r ." 
    "bot-a bot-a  bot-a  bot-a  bot-a  bot-a" 
    "bot-b bot-b  bot-b  bot-b  bot-b  bot-b" 
    "bot-c bot-c  bot-c  bot-c  bot-c  bot-c"  
    "bot-d bot-d  bot-d  bot-d  bot-d  bot-d" 
    "bot-e bot-e  bot-e  bot-e  bot-e  bot-e"
    "bot-f bot-f  bot-f  bot-f  bot-f  bot-f"
    "bot-g bot-g  bot-g  bot-g  bot-g  bot-g"
    "bot-h bot-h  bot-h  bot-h  bot-h  bot-h"
    "bot-i bot-i  bot-i  bot-i  bot-i  bot-i"
}


.container-header {
    background-color: #260D0F;
    background-image: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    position: relative;
    z-index: 10;
    margin: 0;
       display: flex;
  flex-direction: row; 
}
.container-header .grid-child {
    padding: 0em !important;
}

  .container-banner {
   padding-right: 0px !important;
     padding-left: 0px !important;
  width: 100%;
    height:auto;
  margin-left: auto;
  margin-right: auto;
}

.header-space   {
  padding-right: 15.5%;
  padding-left: 15.5%;
}
.container-topli{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  
/*    background-image: url(/images/system/logo-axel.jpg);
  background-repeat:no-repeat;
   */
}





    
    
    
    
    
    


.container-topre{
    grid-area: topr-1;
    
}


.container-topre {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    align-items: center;
}

.container-bottom-c {
 grid-area:bot-c
}
.container-bottom-d {
 grid-area:bot-d
  
}

.container-bottom-e {
 grid-area:bot-e
}
.container-bottom-f {
 grid-area:bot-f  
}

.container-bottom-g {
 grid-area:bot-g
}
.container-bottom-h {
 grid-area:bot-h
}
.container-bottom-i {
 grid-area:bot-i
}

.container-top-a, .container-top-b   {
  padding-right: 15.5%;
  padding-left: 15.5%;
}


.container-bottom-a,
.container-bottom-b,
.container-bottom-c,
.container-bottom-d,
.container-bottom-e,
.container-bottom-f,
.container-bottom-g,
.container-bottom-h,
.container-bottom-i,


{
 position:relative;
   padding-top: 30px;
    padding-right: 15.5%;
    padding-bottom: 30px;
    padding-left: 15.5%;
}
 .container-bottom-c>*,
.container-bottom-d>*,
.container-bottom-e>*,
.container-bottom-f>*,
.container-bottom-g>*,
.container-bottom-h>*,

.container-bottom-i>*
{
 flex:1;
 margin:.5em 0;
  
}
 

.container-top-a {
  background: #520F15;
}
.container-bottom-a {
  background: #ff0000;
}
.container-bottom-b {
  background: #00ff00;
}
.container-bottom-c {
  
  background: #260D0F;
    /*background-image: url(/images/modul-hg/baum4-06.png);*/
 
}

.container-bottom-d {
  background: #fff;
}

.container-bottom-e {
  background: #ff0000;
}
.container-bottom-f {
  background: #fff;
 }

/*Module untereinander darstellen-falls mal nötig
.grid-child.container-bottom-f {
    flex-direction: column !important;
  margin-top: 100px;
  margin-bottom:100px;
}
*/


.container-bottom-g {
  background: #260D0F;
  color:#fff;
}


@media (max-width: 991.98px) {
.container-bottom-c,
.container-bottom-d,
.container-bottom-e,
.container-bottom-f,
.container-bottom-g,
  .container-bottom-h,
  .container-bottom-i
 {
    flex-direction: column;
  }
  
  
.align-self-start {
    align-self: flex-start!important;
}
.align-self-center {
    align-self: center!important;
}
  
.align-self-end {
    align-self: flex-end!important;
}