@charset "UTF-8";

/* 1.1 Font Definitions */

/* Dr Bold */
@font-face {
  font-family: 'Dr Bold';
  src: url('../fonts/drweb-bold.eot');
  src: url('../fonts/drweb-bold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/drweb-bold.woff') format('woff');
       font-weight: normal;
       font-style: normal;
}

/* Helvetica Neue Pro */
@font-face {
  font-family: 'HelveticaNeueLTPro-Roman';
  src: url('../fonts/35EB63_0_0.eot');
  src: url('../fonts/35EB63_0_0.eot?#iefix') format('embedded-opentype'),
       url('../fonts/35EB63_0_0.woff2') format('woff2'),
       url('../fonts/35EB63_0_0.woff') format('woff'),
       url('../fonts/35EB63_0_0.ttf') format('truetype');}

/* 1.2 Reset & Normalization */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  list-style: none;
}

aside, details, figure,
footer, header, main, menu, nav, section, summary {
  /* Add correct display for IE 9- and some newer browsers */
  display: block;
}

/*   1.3 General Typography */

h1, h2, h3, h4, h5, h6,
p, ul, ol, figure, pre {
  /* Reset font-sizes and normalize margins */
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}

h1 {
  font-family: 'Dr Bold', Helvetica, sans-serif;
  font-size: 40px;
  line-height: 37px;
  letter-spacing: 0.01em;
  font-weight: normal;
}

p {
  padding-bottom: 0.8em;
}

/* Desktop */

.scroll-mobile, .mobile-menu-fix, .wrap-mobile, .wrap-mobile-text,
.wrap-mobile-text-forschung, .wrap-mobile-reader, .wrap-mobile-space,
.menu-mobile-neu {
  display: none;
}

/* Links */

a, .sub .active, .sub a:hover {
  color: #ff3319;
  text-decoration: none;
}

.scroll-mobile a, a:active, a:hover, nav a:active, nav a:hover,
.active { color: black; }

nav a, .sub a, .mobile-menu-links a, .scroll a {
  color: gainsboro;
  text-decoration: none;
}

a:hover .invisible { opacity: 1; }
.scroll a:hover .invisible, .scroll-mobile a:hover .invisible { opacity: 0; }
.scroll a:hover, .scroll-mobile a:hover { opacity: 1; }
a.ghost  { opacity: 0; }
.ghosttotal a:hover  { opacity: 0; }

a.nohover, .mobile-menu-links .active, .scroll .active { color: black !important; }

/* Images */

img { width: 100%; }

.bild { }

.test-bild {
  display: flex;
  background: green;
}

.bild-1, .bild-2, .bild-3 { display: grid; }

.bild-1 {
  grid-column: 1;
  grid-row: 2 / span 4;
}

.bild-2 {
  grid-column: 2;
  grid-row: 5 / span 7;
}

.bild-3 {
  grid-column: 3;
  grid-row: 8 / span 10;
}

/* Texts */

.textprov {
  margin-top: -9px;
  margin-bottom: 9px;
  padding-top: 128px;
}

.test-text {
  margin-top: -9px;
  margin-bottom: 9px;
  padding-top: 128px;
  background: yellow;
}

.test-text-2 {
  margin-top: -9px;
  margin-bottom: 9px;
  padding-top: 25%;
  background: yellow;
}

.textgross {
  padding-top: 64px;
  font-family: 'HelveticaNeueLTPro-Roman', Helvetica, Arial, sans-serif;
  font-size: 1.25em;
}

.textgross-text {
  padding-top: 64px;
  padding-bottom: 64px;
  font-family: 'HelveticaNeueLTPro-Roman', Helvetica, Arial, sans-serif;
  font-size: 1.25em;
}

.textklein {
  padding-top: 64px;
  font-family: 'HelveticaNeueLTPro-Roman', Helvetica, Arial, sans-serif;
  font-size: 1em;
}

.text {
  margin-top: -9px;
  margin-bottom: 9px;
}

.text-1, .text-2, .text-3 {
  display: grid;
  margin-top: -9px;
  margin-bottom: 9px;
}

.text-1 {
  grid-column: 1;
  grid-row: 1;
}

.text-2 {
  grid-column: 2;
  grid-row: 4;
}

.text-3 {
  grid-column: 3;
  grid-row: 7;
}

/* Navigation */

body.menu-mobile-neu { /* ...or body.dialogShowing */
  overflow: hidden;
}









.menu-mobile-neu h1 {
  position: fixed;
  line-height: 1;
  top: 4px;
  left: 10px;
  z-index: 4;
}

.menu-mobile-neu input {
  position: fixed;
  top: 10px;
  right: -1000px;
  height: 20px;
  width: 20px;
  z-index: 5;
  background: yellow;
}

.menu-mobile-neu label {
  position: fixed;
  top: 10px;
  right: 10px;
  height: 32px;
  width: 32px;
  z-index: 101;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.menu-mobile-neu input + label span {
  position: absolute;
  width: 100%;
  height: 2px;
  top: 50%;
  margin-top: -1px;
  left: 0;
  display: block;
  background: none;
  /* transition: .5s; */
}

.menu-mobile-neu label:hover {
  cursor: pointer;
}
.menu-mobile-neu input:checked ~ .mobile-menu {
  opacity: 0;
}

.menu-mobile-neu input:not(:checked) ~ .mobile-menu-close {
  opacity: 0;
}

.menu-mobile-neu input:checked ~ .mobile-menu-close {
  opacity: 1;
}

.menu-mobile-neu input ~ .navi {
  /* background: white; */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  z-index: 3;
  /* transition: .5s; */
  /* transition-delay: .5s; */
  overflow: hidden;
}
.menu-mobile-neu input ~ .navi > ul {
  text-align: left;
  position: absolute;
  top: 0px;
  left: 10px;
}
.menu-mobile-neu input ~ .navi > ul > li {
  opacity: 0;
  /* transition: .5s; */
  /* transition-delay: 0s; */
}
.menu-mobile-neu input ~ .navi > ul > li > a {
  font-size: 30px;
  text-decoration: none;
  color: gainsboro;
  display: block;
  padding-bottom: 6px;
}

.menu-mobile-neu .active {
  color: black !important;
}

.menu-mobile-neu input:checked ~ .navi {
  background: white;
  height: 100%;
  z-index: 4;
  overflow: hidden;
  position: fixed;
  top: 0;
  bottom: 0;
}

.menu-mobile-neu input:checked ~ .navi > ul > li {
  opacity: 1;
  /* transition-delay: .5s; */
}

.menu-mobile-neu input:checked ~ .scroll-mobile {
  opacity: 0;
}














.mobile-menu {
  display: none;
}

nav, .sub {
  position: fixed;
  width: 100%;
  font-size: 40px;
  line-height: normal;
  padding-left: 16px;
  padding-right: 16px;
  z-index: 10;
  background: white;
}

nav {
  top: 0;
  text-align: justify;
  text-justify: inter-word;
  height: 56px;
  padding-top: 2px;
}

.reader {
  background: none;
}

.sub {
  top: 48px;
  color: gainsboro;
  height: 56px;
  z-index: 12;
}

nav:after, .sub:after { /* Justify last line */
    content: '';
    display: inline-block;
    width: 100%;
}

.invisible {
  opacity: 0;
}

.invisible-none {
  display: none !important;
}

.scroll .invisible {
  opacity: 1;
}

.scroll-mobile .invisible {
  opacity: 1;
}

.scroll {
  position: fixed;
  width: 100%;
  font-size: 40px;
  line-height: normal;
  padding-left: 16px;
  padding-right: 16px;
  z-index: 11;
  background: none;
}

/* 2 Layout Helpers & Reusable Components */

/* The Clearfix™: A classic … */
.cf::after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}

/* Layout */

main {
  padding: 16px;
  margin-top: 160px;
}

.wrap-first, .wrap-following, .wrap-2-col, .wrap-teil-1, .wrap-teil-2,
.wrap-teil-3, .wrap-teil-4, .wrap-teil-4-2col, .wrap-teil-4-3col,
.wrap-text-4col {
  display: grid;
  margin: 0 auto;
  grid-template-rows: auto;
  grid-column-gap: 16px;
}

.wrap-first, .wrap-following {
  max-width: 1500px;
  grid-template-columns: repeat(2, 1fr);
}

.wrap-2-col {
  width: 100%;
  grid-template-columns: repeat(2, 1fr) ;
  grid-row-gap: 160px;
}

.wrap-teil-1, .wrap-teil-2 {
  max-width: 1500px;
  grid-template-columns: repeat(2, 1fr) ;
}

.wrap-teil-3 {
  max-width: 1500px;
  grid-template-columns: repeat(3, 1fr) ;
  margin-top: 96px;
  margin-bottom: 96px;
  font-family: 'HelveticaNeueLTPro-Roman', Helvetica, Arial, sans-serif;
}

.wrap-teil-3-oben {
  margin-top: 0px;
}

.wrap-teil-4 {
  max-width: 1500px;
  grid-template-columns: repeat(2, 1fr) ;
  margin-top: 96px;
}

.wrap-teil-4-2col {
  max-width: 1500px;
  grid-template-columns: repeat(2, 1fr) ;
  margin-top: 96px;
}

.wrap-teil-4-3col {
  max-width: 1500px;
  grid-template-columns: repeat(3, 1fr) ;
  margin-top: 96px;
}

.wrap-text-4col {
  width: 100%;
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  margin-top: -96px;
}

.planbild {
  mix-blend-mode: multiply;
}

.plan {
  display: flex;
  background: #F8F8F8;
  padding: 16px;
}

.text-image {
  grid-column: 2 / span 2;
}

/* Content */

.content-col-1 { grid-column: 1; }

.content-col-1-text {
  grid-column: 1;
  align-self: end;
}

.content-col-2 { grid-column: 2; }

.content-col-2-text {
  grid-column: 2;
  align-self: end;
}

.content {
}

.content-0-l {
  grid-column: 1;
}

.content-1-l {
  grid-column: 1;
}

.content-1-r {
  grid-column: 2;
  align-self: end;
}

.content-1-r-ghost {
  display: none;
}

.content-2-l {
  grid-column: 1;
  align-self: end;
}

.content-2-r {
  grid-column: 2;
}

.content-text-1 {
  grid-column: 1;
}

.content-text-1-klein {
  grid-column: 1;
  font-family: 'HelveticaNeueLTPro-Roman', Helvetica, Arial, sans-serif;
  line-height: 1.15;
  font-size: 0.7em;
}

.content-text-2 {
  grid-column: 2;
}

.content-text-3 {
  grid-column: 3;
  font-size: 0.8em;
}

.content-text-3-gross {
  grid-column: 3;
  font-size: inherit;
}

.caption {
  font-family: 'HelveticaNeueLTPro-Roman', Helvetica, Arial, sans-serif;
  font-size: 0.8em;
  line-height: 1;
  padding-top: 8px;
}

.bilder1 { grid-column: 1 / span 6; }

.bilder2-1 { grid-column: 1; }
.bilder2-2 { grid-column: 2; }

.bilder3-1 { grid-column: 1; }
.bilder3-2 { grid-column: 2; }
.bilder3-3 { grid-column: 3; }

.bilder4-1 { grid-column: 1; }
.bilder4-2 { grid-column: 2 / span 3; }

.bilder5-1 { grid-column: 1 / span 2; }
.bilder5-2 { grid-column: 3; }

/* =====  3 Site Layout  ==================================================== */

html {
  background: #fff;
  color: #000;
  font: normal 400 1.1em/1.3 "Dr Bold", Helvetica, Arial, sans-serif;
  text-rendering: auto;
  overflow-y: scroll;
  cursor: auto;
  position: relative;
  min-height: 100%;
  /* Prevent adjustments of font size after orientation
     changes in IE and iOS. */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  /* Highlight color for WebKit-bases touch devices. */
  -webkit-tap-highlight-color: rgba(113, 239, 172, .5);
}

@media all and (max-width: 320px) {
  html {
    /* We decrease the font-size a little-bit for tiny
       screens. Because this stylesheet uses relative units
       everywhere, everything scales nicely. */
    font-size: 1.25em;
  }
}

.space {
  height: 80px;
  bottom: 0;
}

/* Main Content */

@media (max-width: 1100px) {
  nav, .sub, .scroll {
    font-size: 35px;
  }

  h1 {
    font-size: 35px;
    line-height: 34px;
  }
}

@media (max-width: 970px) {
  nav, .sub, .scroll {
    font-size: 30px;
  }

  h1 {
    font-size: 30px;
    line-height: 30px;
  }
}

/* Mobile */
@media (max-width: 768px) {

  .mobile-menu-fix a, .mobile-menu-normal a {
    color: black;
  }

  .menu-mobile-neu, .mobile-menu, .mobile-menu-close, .mobile-menu-fix,
  .scroll-mobile, .mobile-menu-normal {
    display: block;
    top:0;
  }

  .menu-mobile-neu {
    overflow: hidden;
    height: 100%;
  }

  .mobile-menu {
    position: fixed;
    width: 32px;
    height: 32px;
    right: 0;
    padding-right: 10px;
    padding-top: 8px;
    z-index: 100;
  }

  .mobile-menu-close {
    position: fixed;
    width: 34px;
    height: 34px;
    right: 0;
    padding-right: 10px;
    padding-top: 8px;
    z-index:99;
  }

  .mobile-menu-fix {
    position: fixed;
    width: 100%;
    padding-top: 6px;
    padding-bottom: 10px;
    padding-left: 10px;
    /* background: white; */
  }

  .scroll-mobile {
    position: fixed;
    width: 100%;
    padding-top: 6px;
    padding-bottom: 10px;
    padding-left: 10px;
    background: white;
    z-index: 19;
  }

  .mobile-menu-normal {
    position: relative;
    width: 100%;
    padding-top: 6px;
    padding-left: 10px;
  }

  .mobile-menu-links {
    position: absolute;
    display: block;
    width: 100%;
    padding-left: 16px;
    margin-top: -4px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 30px;
    line-height: 30px;
  }

  .mobile-menu-footer {
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0;
    padding-bottom: 12px;
    padding-left: 16px;
  }

  main { padding: 10px; }

  nav, .sub, .wrap-first, .wrap-following, .wrap-teil-1, .wrap-teil-2,
  .wrap-teil-3, .wrap-teil-4, .wrap-text-4col { display: none; }

  h1 {
    font-size: 30px;
    line-height: 30px;
    letter-spacing: 0.01em;
    font-weight: normal;
  }

  p {
    padding-bottom: 1em;
  }



  .content-text-1, .content-text-1-reader {
    grid-column: 1;
    font-family: 'HelveticaNeueLTPro-Roman', Helvetica, Arial, sans-serif;
    font-size: 0.95em;
    line-height: 1.15em;
  }

  .caption {
    font-size: 0.8em;
    line-height: 1;
    padding-top: 0;
  }

  .text {
    margin-top: -9px;
    margin-bottom: 7px;
  }

  .bild {
    display: grid;
  }

  .plan {
    display: block;
    background: #F8F8F8;
    padding: 16px;
    margin-bottom: 5px;
  }

  .bild-mobile {
    margin-bottom: 96px;
  }

  .wrap-mobile, .wrap-teil-4, .wrap-teil-4-2col, .wrap-teil-4-3col {
    display: grid;
    margin: 0 auto;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .wrap-mobile-space {
    display: block;
    margin-top: 96px;
    z-index: 0;
  }

  .wrap-mobile-text {
    display: block;
    margin-top: 96px;
    margin-bottom: 96px;
  }

  .wrap-mobile-text-forschung {
    display: block;
    margin-top: 96px;
  }

  .wrap-mobile-reader {
    display: block;
    margin-top: -48px;
    margin-bottom: 0;
  }

  .content-text-1-reader {
    display: block;
    margin-top: 96px;
    margin-bottom: 96px;
  }

  .bilder1 { grid-column: 1; }

  .bilder2-1 { grid-column: 1; }
  .bilder2-2 { grid-column: 1; }

  .bilder3-1 { grid-column: 1; }
  .bilder3-2 { grid-column: 1; }
  .bilder3-3 { grid-column: 1; }

  .bilder4-1 { grid-column: 1; }
  .bilder4-2 { grid-column: 1; }

  .bilder5-1 { grid-column: 1; }
  .bilder5-2 { grid-column: 1; }
}

/* Diverses */

.errorpage {
  font-family: 'Dr Bold', sans-serif;
  font-size: 25vw;
  line-height: 1vw;
  width: 100%;
  height: 100px;
  text-align: center;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.map {
  height: 0;
  overflow: hidden;
  padding-bottom: 66%;
  position: relative;
  z-index: 0;
}

.map iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}