body {
  text-align: center;
}

body:before {
  content: '';
  display: inline-block;
  height: 100vh;
  vertical-align: middle;
}


h1 {
  font-size: 1em;
  font-weight: normal;
  line-height: 2;
  height: 5px;
  width: 5px;
  overflow: hidden;
  position: absolute;
}


.grid {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
}


.grid div:before,
.grid div:after,
.grid div nav {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
}

.grid div:before,
.grid div:after {
  content: '';
  background-repeat: no-repeat;
}

.grid div:before {
  width: 150px;
}

.grid div:after,
.grid div nav {
  width: 480px;
  border-left: 1px solid black;
}


.grid div:nth-child(1):before,
.grid div:nth-child(1):after {
  height: 70px;
  border-bottom: 1px solid black;
}

.grid div:nth-child(1):before {
  background-image: url('Layout/gelb.jpg');
  background-position: right bottom;
}

.grid div:nth-child(1):after {
  background-image: url('Layout/olejko_o.gif');
  background-position: 30px bottom;
}


.grid div:nth-child(2):before,
.grid div:nth-child(2):after {
  height: 166px;
}

.grid div:nth-child(2):before {
  background-image: url('Layout/graueck.gif');
  background-position: right top;
}

.grid div:nth-child(2):after {
  background-image: url('Layout/olejko_u.gif');
  background-position: 30px top;
}


.grid div:nth-child(3):after {
  display: none;
}

.grid ul {
  margin: 0 0 0 10px;
}


@media (max-width: 767px), print {
  .grid {
    width: 100%;
  }

  .grid div:before {
    width: 19%;
  }

  .grid div:after,
  .grid div nav {
    width: 81%;
  }

  .grid div:nth-child(1):after {
    background-position: 10px bottom;
  }

  .grid div:nth-child(2):before,
  .grid div:nth-child(2):after {
    height: 126px;
  }

  .grid div:nth-child(2):after {
    background-position: 10px top;
  }


  .grid ul {
    margin: -10px 0 -10px 10px;
  }

  .grid li {
    display: block;
  }
  .grid li:before {
    display: none;
  }

  .grid a {
    display: inline-block;
    padding: 10px 0;
  }
}


@media print {
  .grid div:nth-child(1):after {
    content: 'olejko.de';
    font-family: monospace;
    font-weight: bold;
    font-size: 2em;
  }

  .grid div:nth-child(2) {
    height: 10px;
  }

  .grid div:nth-child(1):before,
  .grid div:nth-child(2):before,
  .grid div:nth-child(2):after {
    background-image: none;
  }
}