/* = grid
----------------------------------------------------------------*/
.container, .container-fluid {
  margin-right: auto;
  margin-left: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

/*===============   grid    ====================*/

.container, .container-fluid, .wrapper {
	width: 1230px; 
	padding: 0 30px;
}

.container .row {
	margin-left: -30px;
}

.container [class*="grid_"] {
  float: left;
  min-height: 1px;
  margin-left: 30px; 
}

/* = 100er
--------------------*/
.container .grid_1 {
  width: 70px; }
.container .grid_2 {
  width: 170px; }
.container .grid_3 {
  width: 270px; }
.container .grid_4 {
  width: 370px; }
.container .grid_5 {
  width: 470px; }
.container .grid_6 {
  width: 570px;}
.container .grid_7 {
  width: 670px; }
.container .grid_8 {
  width: 770px; }
.container .grid_9 {
  width: 870px; }
.container .grid_10 {
  width: 970px; }
.container .grid_11 {
  width: 1070px; }
.container .grid_12 {
  width: 1170px; } 
  
.container .preffix_1 {
  margin-left: 130px; }
.container .preffix_2 {
  margin-left: 230px; }
.container .preffix_3 {
  margin-left: 330px; }
.container .preffix_4 {
  margin-left: 430px; }
.container .preffix_5 {
  margin-left: 530px; }
.container .preffix_6 {
  margin-left: 630px; }
.container .preffix_7 {
  margin-left: 730px; }
.container .preffix_8 {
  margin-left: 830px; }
.container .preffix_9 {
  margin-left: 930px; }
.container .preffix_10 {
  margin-left: 1030px; }
.container .preffix_11 {
  margin-left: 1130px; }
.container .preffix_12 {
  margin-left: 1230px; }
  



/* = iPad quer
-----------------------------*/
@media (min-width: 980px) and (max-width: 1199px) {
  .container, .container-fluid {
    width: 980px; padding: 0 20px; }

  .container .row {
    margin-left: -20px; }
  .container [class*="grid_"] {
    float: left;
    min-height: 1px;
    margin-left: 20px; }
  .container .grid_1 {
    width: 60px; }
  .container .grid_2 {
    width: 140px; }
  .container .grid_3 { 
    width: 220px; }
  .container .grid_4 {
    width: 300px; }
  .container .grid_5 {
    width: 380px; }
  .container .grid_6 {
    width: 460px; }
  .container .grid_7 {
    width: 540px; }
  .container .grid_8 {
    width: 620px; }
  .container .grid_9 {
    width: 700px; }
  .container .grid_10 {
    width: 780px; }
  .container .grid_11 {
    width: 860px; }
  .container .grid_12 { 
    width: 940px; }
	
  .container .preffix_1 {
    margin-left: 100px; }
  .container .preffix_2 {
    margin-left: 180px; }
  .container .preffix_3 {
    margin-left: 260px; }
  .container .preffix_4 {
    margin-left: 340px; }
  .container .preffix_5 {
    margin-left: 420px; }
  .container .preffix_6 {
    margin-left: 500px; }
  .container .preffix_7 {
    margin-left: 580px; }
  .container .preffix_8 {
    margin-left: 660px; }
  .container .preffix_9 {
    margin-left: 740px; }
  .container .preffix_10 {
    margin-left: 820px; }
  .container .preffix_11 {
    margin-left: 900px; }
  .container .preffix_12 {
    margin-left: 980px; } 
}


/*  iPad hochform
------------------------------*/
@media (min-width: 768px) and (max-width: 979px) {
  .container, .container-fluid { 
	width: 768px;
	padding: 0 10px; }

  .container .row {
    margin-left: -20px; }
  .container [class*="grid_"] {
    float: left;
    min-height: 1px;
    margin-left: 20px; }
  .container .grid_1 { width: 44px; }
  .container .grid_2 { width: 108px; }
  .container .grid_3 { width: 172px; }
  .container .grid_4 { width: 236px; }
  .container .grid_5 { width: 300px; }
  .container .grid_6 { width: 364px; }
  .container .grid_7 { width: 428px; }
  .container .grid_8 { width: 492px; }
  .container .grid_9 { width: 556px; }
  .container .grid_10 { width: 620px; }
  .container .grid_11 { width: 684px; }
  .container .grid_12 { width: 748px; }
  
  .container .preffix_1 { margin-left: 84px; }
  .container .preffix_2 { margin-left: 148px; }
  .container .preffix_3 { margin-left: 212px; }
  .container .preffix_4 { margin-left: 276px; }
  .container .preffix_5 { margin-left: 340px; }
  .container .preffix_6 { margin-left: 404px; }
  .container .preffix_7 { margin-left: 468px; }
  .container .preffix_8 { margin-left: 532px; }
  .container .preffix_9 { margin-left: 596px; }
  .container .preffix_10 { margin-left: 660px; }
  .container .preffix_11 { margin-left: 724px; }
  .container .preffix_12 { margin-left: 788px; } 
}


/*  querformat
------------------------------*/
@media (min-width: 680px) and (max-width: 767px) {

  .container, .container-fluid {
	width: 730px;
	padding: 0 10px; }

  .container .row {
    margin-left: -20px; }
  .container [class*="grid_"] {
    float: left;
    min-height: 1px; 
    margin-left: 20px; }
	
  .container .grid_1 { width: 40px; }
  .container .grid_2 { width: 100px; }
  .container .grid_3 { width: 160px; }
  .container .grid_4 { width: 220px; }
  .container .grid_5 { width: 280px; }
  .container .grid_6 { width: 340px; }
  .container .grid_7 { width: 400px; }
  .container .grid_8 { width: 460px; }
  .container .grid_9 { width: 520px; }
  .container .grid_10 { width: 580px; }
  .container .grid_11 { width: 640px; }
  .container .grid_12 { width: 700px;  }
  
  .container .preffix_1 { margin-left: 40px; }
  .container .preffix_2 { margin-left: 100px; }
  .container .preffix_3 { margin-left: 160px; }
  .container .preffix_4 { margin-left: 220px; }
  .container .preffix_5 { margin-left: 280px; }
  .container .preffix_6 { margin-left: 340px; }
  .container .preffix_7 { margin-left: 400px; }
  .container .preffix_8 { margin-left: 460px; }
  .container .preffix_9 { margin-left: 520px; }
  .container .preffix_10 { margin-left: 600px; }
  .container .preffix_11 { margin-left: 640px; }
  .container .preffix_12 { margin-left: 700px; } 
}



/*  querformat iPhone 6/7/8
--------------------------------------------------*/
@media (max-width: 679px) {


  .container, .container-fluid { 
	width: 620px;
	padding: 0 10px; }

  .container .row {
    margin-left: -10px; }
  .container [class*="grid_"] {
    float: left;
    min-height: 1px; 
    margin-left: 10px; }
	
  .container .grid_1 { width: 40px; }
  .container .grid_2 { width: 90px; }
  .container .grid_3 { width: 140px; }
  .container .grid_4 { width: 190px; }
  .container .grid_5 { width: 240px; }
  .container .grid_6 { width: 290px;}
  .container .grid_7 { width: 340px; }
  .container .grid_8 { width: 390px; }
  .container .grid_9 { width: 440px; }
  .container .grid_10 { width: 490px; }
  .container .grid_11 { width: 540px; }
  .container .grid_12 { width: 590px;  }
}


/*  hochformat galaxy s9 + iPhone 
--------------------------------------------------*/
@media (max-width: 420px) {
  .container, .container-fluid { 
	width: 340px;
	padding: 0 10px; }

  .container .row {
    margin-left: -10px; }
  .container [class*="grid_"] {
    float: left;
    min-height: 1px; 
    margin-left: 10px; }
	
  .container [class*="grid_"] {
    float: left;
    min-height: 1px; 
    margin-left: 10px;
	width: 300px;}
}


.container:before, .container-fluid:before, .row:before, .container:after, .container-fluid:after, .row:after {
  display: table;
  content: "";
  line-height: 0; }
.container:after, .container-fluid:after, .row:after {
  clear: both; }

/* = ende grid
----------------------------------------------------------------------------------------------------------------------------------*/