/*
 *
 * Grid – black.t-CMS
 * ----------------------------
 * 12 Spalten Grid
 * 1170px Breite für den Inhalt
 * 1200px Breite final
 *
 */

* {
  margin      : 0;
  padding     : 0;
  box-sizing  : border-box;
}

*:before,
*:after {
  box-sizing  : border-box;
}

.clear,
.clear:before,
.clear:after,
.container:before,
.container:after,
.row:before,
.row:after {
  content : " ";
  display : table;
}

.clear,
.clear:after,
.container:after,
.row:after {
  clear   : both;
}

.container {
  max-width   : 1200px;
  width       : 100%;
  margin      : 0 auto;
}

.row {
  width   : 100%;
}

/* 12 Columns */

.col-12 { width : calc(100%           - 30px);  }
.col-11 { width : calc(91.66666667%   - 30px);  }
.col-10 { width : calc(83.33333333%   - 30px);  }
.col-9  { width : calc(75%            - 30px);  }
.col-8  { width : calc(66.66666667%   - 30px);  }
.col-7  { width : calc(58.33333333%   - 30px);  }
.col-6  { width : calc(50%            - 30px);  }
.col-5  { width : calc(41.66666667%   - 30px);  }
.col-4  { width : calc(33.33333333%   - 30px);  }
.col-3  { width : calc(25%            - 30px);  }
.col-2  { width : calc(16.66666667%   - 30px);  }
.col-1  { width : calc(8.33333333%    - 30px);  }

/* Special Coloumn */

.col-five-special {
  width : calc(20% - 30px);
}

/* Grid Global */

.col-12,
.col-11,
.col-10,
.col-9,
.col-8,
.col-7,
.col-6,
.col-5,
.col-4,
.col-3,
.col-2,
.col-1{
  margin  : 0 15px;
}

.col-11,
.col-10,
.col-9,
.col-8,
.col-7,
.col-6,
.col-5,
.col-4,
.col-3,
.col-2,
.col-1{
  float : left;
}


/* ====== Breakpoints – Dektop First ====== */

@media screen and (max-width: 1024px) {

  .col-11 { width : calc(75%            - 30px);  }
  .col-10 { width : calc(66.66666667%   - 30px);  }
  .col-9  { width : calc(50%            - 30px);  }
  .col-3  { width : calc(50%            - 30px);  }
  .col-2  { width : calc(33.33333333%   - 30px);  }
  .col-1  { width : calc(25%            - 30px);  }

}


@media screen and (max-width: 768px) {

  .col-11 { width : calc(66.66666667%   - 30px);  }
  .col-2  { width : calc(33.33333333%   - 30px);  }
  .col-1  { width : calc(33.33333333%   - 30px);  }

}

@media screen and (max-width: 667px) {

  .col-12 { width : calc(100%           - 10px);  }
  .col-11 { width : calc(100%   - 10px);  }
  .col-10 { width : calc(50%            - 10px);  }
  .col-9  { width : calc(50%            - 10px);  }
  .col-8  { width : calc(100%           - 10px);  }
  .col-7  { width : calc(50%            - 10px);  }
  .col-6  { width : calc(50%            - 10px);  }
  .col-5  { width : calc(50%            - 10px);  }
  .col-4  { width : calc(100%           - 10px);  }
  .col-3  { width : calc(50%            - 10px);  }
  .col-2  { width : calc(50%            - 10px);  }
  .col-1  { width : calc(33.33333333%   - 10px);  }

  .col-1.fill   { width : calc(100%           - 10px);  }

  .col-12,
  .col-11,
  .col-10,
  .col-9,
  .col-8,
  .col-7,
  .col-6,
  .col-5,
  .col-4,
  .col-3,
  .col-2,
  .col-1{
    margin  : 0 5px;
  }

}

@media screen and (max-width: 414px) {

  .col-11 { width : calc(100%           - 10px);  }
  .col-10 { width : calc(100%           - 10px);  }
  .col-9  { width : calc(100%           - 10px);  }
  .col-7  { width : calc(100%           - 10px);  }
  .col-5  { width : calc(100%           - 10px);  }
  .col-6  { width : calc(100%           - 10px);  }
  .col-3  { width : calc(100%           - 10px);  }
  .col-1  { width : calc(50%            - 10px);  }

  .col-2.fill   { width : calc(100%           - 10px);  }

}