@font-face {
  font-family: "nitti-grotesk-normal";
  src: url("/fonts/NittiGrotesk-Regular.woff2") format("woff2"),
       url("/fonts/NittiGrotesk-Regular.woff") format("woff");
}

a:not(.vp-header-logo-a) {
	border-bottom: 1px solid #111;
	color: #111;
	text-decoration: none;
}

a:visited {
	color: #111;
}

body {
  /* background-image: url("grid.png?version=2018-08-26"); */
  background-color: #f0f0f0;
  color: #111;
  font-family: "nitti-grotesk-normal", Verdana, sans-serif;
}

figure {
  margin: 0;
}

h1, h2 {
	font-weight: normal;
  margin: 0;
}

p {
  margin: 0;
}

ul {
	list-style-type: none;
	margin: 0;
}

.vp-center {
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;
  padding-right: 30px;
}

.vp-footer {
  margin: 66px auto 44px auto;
}

.vp-font-size-caption {
  font-size: 16px;
  line-height: 22px;
  padding: 6px 0 5px 0;
  word-spacing: 0.2px;
}

.vp-font-size-legal-info {
	font-size: 11px;
	line-height: 11px;
	padding: 2px 0 9px 0;
}

.vp-font-size-medium {
	font-size: 18px;
	line-height: 22px;
  max-width: 600px;
	padding: 6px 0 5px 0;
	word-spacing: 0.2px;
}

.vp-header {
  margin-top: 44px;
}

.vp-home-photos-body {
  display: flex;
  flex-wrap: wrap;
  margin: -11px 0 0 -40px;
}

.vp-home-photos-body figure {
  margin: 22px 0 0 40px;
  max-width: 226px;
}

.vp-home-photos-body figure + figure {
  margin-top: 22px;
}

.vp-home-photos-body img {
  padding-bottom: 5px;
  width: 100%;
}

.vp-horizontal-line {
	background-color: #111;
	height: 2px;
	margin-top: -2px;
  max-width: 600px;
	position: relative;
	top: -3px;
}

.vp-h1 {
	font-size: 23px;
	letter-spacing: -0.4px;
	line-height: 33px;
	margin-top: 66px;
	padding-bottom: 1px;
}

.vp-h2 {
  margin-top: 44px;
}

.vp-list li:not(:last-child) {
  margin-bottom: 11px;
}

.vp-list-en-dashes {
	padding-left: 13px;
	text-indent: -13px;
}

.vp-list-en-dashes li:before {
	content: "\2013\00a0";
}

.vp-list-en-dashes li:not(:last-child) {
  margin-bottom: 11px;
}

.vp-navigation {
  margin-left: auto;
  margin-top: 22px;
}

.vp-p-without-heading {
	margin-top: 44px;
}

.vp-photos-layout {
  display: flex;
  flex-wrap: wrap;
  margin: -44px 0 0 0;
}

.vp-photos-layout figure {
  margin: 44px 0 0 0;
  max-width: 280px;
}

.vp-photos-layout img {
  padding-bottom: 6px;
  width: 100%;
}

.vp-1-space-above {
  margin-top: 11px;
}

.vp-3-spaces-above {
  margin-top: 33px;
}

@media screen and (min-width: 500px) {

  .vp-header {
    display: flex;
    margin-top: 55px;
  }

  .vp-navigation {
    margin-top: 0;
  }

  .vp-photos-layout {
    margin: -44px 0 0 -70px;
  }

  .vp-photos-layout figure {
    margin: 44px 0 0 70px;
  }

}

@media screen and (min-width: 840px) /* 2 Spalten + Scrollleiste: 820 + 20  */ {

  .vp-center {
    max-width: 820px;
  }

  .vp-home-grid {
    column-gap: 40px;
    display: grid;
    grid-template-rows: auto auto 1fr;
    grid-template-columns: 360px 360px;
  }
  .vp-home-working-areas { grid-row-start: 1; grid-column-start: 1; }
  .vp-home-contact { grid-row-start: 1; grid-column-start: 2; }
  .vp-home-address { grid-row-start: 2; grid-column-start: 1; }
  .vp-home-forms { grid-row-start: 2; grid-column-start: 2; }
  .vp-home-jobs { grid-row-start: 3; grid-column-start: 1; }
  .vp-home-links { grid-row-start: 3; grid-column-start: 2; }
  .vp-home-photos { grid-row-start: 4; grid-column-start: 1; grid-column-end: 3; }

  .vp-home-photos .vp-horizontal-line {
    max-width: none;
  }

}

@media screen and (min-width: 1120px) /* 3 Spalten + Scrollleiste: 1100 + 20  */ {

  .vp-center {
    max-width: 1100px;
  }

  .vp-home-photos-body {
    display: block;
  }

  .vp-home-photos-body figure {
    max-width: 240px;
  }

  .vp-home-photos-body img {
    padding-bottom: 2px;
  }

  .vp-home-grid {
    column-gap: 40px;
    display: grid;
    grid-template-rows: auto auto 1fr;
    grid-template-columns: 360px 360px 240px;
  }
  .vp-home-working-areas { grid-row-start: 1; grid-column-start: 1; }
  .vp-home-contact { grid-row-start: 1; grid-column-start: 2; }
  .vp-home-photos { grid-row-start: 1; grid-column-start: 3; grid-row-end: 4; }
  .vp-home-address { grid-row-start: 2; grid-column-start: 1; }
  .vp-home-forms { grid-row-start: 2; grid-column-start: 2; }
  .vp-home-jobs { grid-row-start: 3; grid-column-start: 1; }
  .vp-home-links { grid-row-start: 3; grid-column-start: 2; }

}