html{
 font-family: Open Sans, Helvetica, Arial, sans-serif;
 scroll-behavior: smooth;
}


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

.grid-container {
  
  border: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0px;
}

.grid-item {
  border: none;
}

.gutter{
  margin-top: 0px;
}



@media (min-width: 300px) {
  
  .item-1 {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    padding: 0px;
    background-color: #1a171b;

  }

  .item-2 {
    grid-row: 2 / 3;
    grid-column: 1 / 3;
    padding: 0px;
    background-color: #ffffff;

  }
  
  .visitenkarte{
    width: 100%;
  }
}

@media (min-width: 576px){
  .item-1 {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    padding: 0px;
    background-color: #1a171b;
  }

  .item-2 {
    grid-row: 2 / 3;
    grid-column: 1 / 3;
    padding: 0px;
    background-color: #ffffff;
  }
  
}


@media (min-width: 767px) {
  .item-1 {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    padding: 0px;
    background-color: #1a171b;
  }

  .item-2 {
    grid-row: 2 / 3;
    grid-column: 1 / 3;
    padding: 0px;
    background-color: #ffffff;
  }
  .visitenkarte{
    padding-left: 10%;
    padding-right: 10%;
  }
  
}



@media (min-width: 992px) { /*ab hier nebeneinander*/
  .item-1 {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    padding: 0px;
    background-color: #1a171b;
  }

  .item-2 {
    
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    padding: 0px;
    background-color: #ffffff;
  }
  
  .visitenkarte{
    width: 100%;
    padding: 0px;
  }
}

@media (min-width: 1200px) {
  .visitenkarte{
    width: 100%;
    padding-top: 10%;
    padding-left: 20%;
    padding-right: 20%;
  }
  #schwarz{
    padding-left: 0px;
  }
}

@media (min-width: 1900px){
  .visitenkarte{
    width: 100%;
    padding-top: 0px;
    padding-left: 20%;
    padding-right: 20%;
  }
  #schwarz{
    padding-left: 0px;
  }
}


@media (min-width: 3800px){
  
}