/*--------------------------------------Content Wrapper--------------------------------------------
    ---------------------------------max-width wird über Hilfsklasse gesteuert-------------------- */
.wrapper{
  margin-left: auto;
  margin-right: auto;
  height:100%;
} 
  /*--------------------------------------Responsive 12-Grid Flex Layout--------------------------
    ---------------------------------------------------------------------------------------------- */
/* 
   Semantik des Grids:   .wrapper ---- .grid_row ----- .grid_col */


/* Flex-Container Elternelement der .col Flex-Kinder */

.grid__row{
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--gridGutter) * -1) ;
}

/* Spaltenabstand des Grids Basierend auf variable --gridGutter ,Die Variable --gridGutter giebt den Spaltenabstand im Grid an
   Sie wird als Padding an die col gegeben und im margin der row ausgeglichen damit das Grid bündig bleibt
   dem row kann eine zusätzliche klasse gegeben werden welche den Spaltenabstand im Grid verändert
   .grid_gutter-s,l,xl,none - verändern ihn ist keine dieser Klassen vergeben wird der Standardwert aus der Variable genutzt */

.grid__row.grid_gutter-s{
  margin: calc((var(--gridGutter) * -1) / 2);
}
.grid__row.grid_gutter-l{
  margin: calc((var(--gridGutter) * -1) 1.5);
}
.grid__row.grid_gutter-xl{
  margin: calc((var(--gridGutter) * -1) * 2);
}
.grid__row.grid_gutter-none{
  margin: 0px;
}

.grid__row.grid_gutter-s .grid_col{
  padding: calc(var(--gridGutter) / 2);
}
.grid__row.grid_gutter-l .grid_col{
  padding: calc(var(--gridGutter) * 1.5);
}
.grid__row.grid_gutter-xl .grid_col{
  padding: calc(var(--gridGutter) *2);
}
.grid__row.grid_gutter-none .grid_col{
  padding: 0px;
}

/* Flex-Kinder Standardverhalten bei Mobile 100% Breite, ab dem Breakpoint im media verändert sich das Verhalten
  So wird das Grid im Mobile immer Untereinander dargestellt und Verhällt sich so kommplett responsive

  jedes Flex-Kind bekommt 2 klassen .grid_col um sie mobile zu Steuern sowie grid_col-x um sie für tablet und desctop zu steuern */

.grid__col{
  flex:0 0 100%;
  padding: var(--gridGutter);
}
/* Breakpoint ab welchem die .col auch nebeneinander dargestellt werden
   Die Klassen regeln hier wie viele 12el des 12 Spalten Grids die einzelne col einnimt*/


@media only screen and (min-width: 768px) {
.grid__col--1  {
  flex: 0 0 calc((100%/12) * 1);  max-width: calc((100%/12) * 1);
}
.grid__col--2  {
  flex: 0 0 calc((100%/12) * 2);  max-width: calc((100%/12) * 2);
}
.grid__col--3  {
  flex: 0 0 calc((100%/12) * 3);  max-width: calc((100%/12) * 3);
}
.grid__col--4  {
 flex: 0 0 calc((100%/12) * 4);  max-width: calc((100%/12) * 4);
}
.grid__col--5  {
  flex: 0 0 calc((100%/12) * 5);  max-width: calc((100%/12) * 5);
}
.grid__col--6  {
  flex: 0 0 calc((100%/12) * 6);  max-width: calc((100%/12) * 6);
}
.grid__col--7  {
 flex: 0 0 calc((100%/12) * 7);  max-width: calc((100%/12) * 7);
}
.grid__col--8  {
 flex: 0 0 calc((100%/12) * 8);  max-width: calc((100%/12) * 8);
}
.grid__col--9  {
 flex: 0 0 calc((100%/12) * 9);  max-width: calc((100%/12) * 9);
}
.grid__col--10 {
flex: 0 0 calc((100%/12) * 10);  max-width: calc((100%/12) * 10);
}
.grid__col--11 {
  flex: 0 0 calc((100%/12) * 11);  max-width: calc((100%/12) * 11);
}
.grid__col--12 {
  flex: 0 0 calc((100%/12) * 12);  max-width: calc((100%/12) * 12);
}
}