/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'),
       url('fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-v20-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('fonts/roboto-v20-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-v20-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('fonts/roboto-v20-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-v20-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

a,abbr,acronym,address,applet,big,blockquote,body,caption,cite,code,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,iframe,img,input,ins,kbd,label,legend,li,object,ol,p,pre,q,s,samp,small,span,
strike,strong,sub,sup,table,tbody,td,textarea,tfoot,th,thead,tr,tt,ul,var {margin:0;padding:0;border:0;outline:0;font-size:100%;font-family:'Roboto',Arial, Helvetica, sans-serif;letter-spacing:0; }
:focus { outline:0; } body{font-size:10px;line-height:1;color:#8e8e8e;background:#fff; } ol,ul{list-style:none; } blockquote:after,blockquote:before,q:after,q:before {content:""; } blockquote,q{quotes:"" ""}
* { font-variant-ligatures: none; }
html { overflow-x:hidden; }
* { -webkit-font-feature-settings: "liga" 0, "dlig" 0; }
* {	-webkit-font-variant-ligatures: no-common-ligatures; font-variant-ligatures: no-common-ligatures; }

html {overflow:-moz-scrollbars-vertical; overflow-y:scroll} .nodisplay{display:none} .clear, .c { clear:both; float:none; } .clearr, .cr { clear:right; float:none; } .clearl, .cl { clear:left; float:none; }
html, body { margin:0; padding:0; height:100%; width:100%; font-family: 'Roboto',sans-serif; background:#fff; position:relative; }

video {
  pointer-events: none;
}

.header { position:relative; }
.header .intro { position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%); text-align:center; }



.footer-inner, .grid { width:940px; margin:0 auto; }

.page { padding:150px 0; }

h1 { font:400 50px/1.2em 'Roboto',sans-serif; color:#fff; text-align:center; }
h2 { font:700 25px/1.6em 'Roboto',sans-serif; color:#000; margin-top:0; margin-bottom:2em; }
h3 { font:700 18px/1.5em 'Roboto',sans-serif; color:#000; margin-top:0; margin-bottom:0em; }

p { font:400 18px/1.5em 'Roboto',sans-serif; color:#000; margin-top:0; margin-bottom:1em; }
p a { font:inherit; color:inherit; text-decoration:underline; }
.intro p { font:400 25px/1.5em 'Roboto',sans-serif; color:#fff; margin-bottom:0 !important; }

.kontakt-row { margin-top:100px; }
.kontakt-row::after { content:""; display:table; clear:both; }
.kontakt-row { margin-left:0px; margin-right:0px; }
.kontakt-row > div  { float:left; width:33.333333%; padding:0 0px; box-sizing:border-box; }


footer { margin-top:100px; }
footer ul { display:table; margin:0 auto; }
footer ul li { display:inline-block; margin:0 15px; }
footer ul li a { font:400 12px/1.3em 'Roboto',sans-serif; color:#aaa; text-transform:uppercase; letter-spacing:0.1em; text-decoration:none; }

.youtube-video-container { position:relative; margin:50px 0; }
.youtube-video-container > img { width:100%; height:auto; display:block; }
.youtube-video-container > video { width:100%; height:auto; display:block; }
.youtube-video-container .container-inner { position:absolute; top:0; left:0; width:100%; height:100%; }
.youtube-video-container .container-inner > a { width:160px; opacity:0.5; position:absolute; top:50%; left:50%; display:block; transform:translate(-50%,-50%); }
.youtube-video-container .container-inner > a img { width:100%; height:auto; }
.youtube-video-container .container-inner .container-text { position:absolute; bottom:0; left:0; width:100%; box-sizing:border-box; background:rgba(0,0,0,.3); padding:10px; }
.youtube-video-container .container-inner .container-text p { font:400 14px/1.5em 'Roboto',sans-serif; color:#fff; text-align:center; margin:0 !important; }
.youtube-video-container .container-inner .container-text p a { font:inherit; color:inherit; }
.youtube-video-container .container-inner .container-text p a:hover {text-decoration:underline; }


.projekte-container { margin:25px 0 50px 0; }
.projekte-container > h3 a { color:#000; text-decoration:none; font:700 18px/1.5em 'Roboto',sans-serif; display:inline-block; padding-left:25px; position:relative; }
.projekte-container > h3 a:hover { color:#0259bd; }
.projekte-container > h3 a > span { display:block; width:15px; height:15px; border:1px solid #000; position:absolute; left:0; top:3px; }
.projekte-container > h3 a > span span:nth-child(1) { display:block; width:1px; height:11px; background:#000; top:2px; left:7px; position:absolute; }
.projekte-container > h3 a.open > span span:nth-child(1) { display:none; width:1px; height:11px; background:#000; top:2px; left:7px; position:absolute; }
.projekte-container > h3 a > span span:nth-child(2) { display:block; width:11px; height:1px; background:#000; top:7px; left:2px; position:absolute; }
.projekte-liste { display:none; }
.projekt { margin:25px 0; border-bottom:1px solid #ccc; padding-bottom:25px; }
.projekt .titel { font:600 14px/1.7em 'Roboto',sans-serif; text-transform:uppercase; letter-spacing:0.035em; margin-bottom:5px; }
.projekt .titel span { font:400 15px/1.5em 'Roboto',sans-serif; color:#000; text-transform:none; letter-spacing:0.015em; }
.projekt .meta { display:grid; grid-template-columns:250px 1fr 1fr; }
.projekt .beschreibung { font:400 14px/1.7em 'Roboto',sans-serif; padding-top:5px; padding-right:50px; }
.projekt .meta ul { padding-top:5px; }
.projekt .meta ul li { font:400 14px/1.7em 'Roboto',sans-serif; color:#000; }
.projekt .meta ul li em { font:500 14px/1.7em 'Roboto',sans-serif; color:#000; display:inline-block; width:140px; }


@media screen and (max-width: 1000px) {
  .footer-inner, .grid { width:100%; margin:0 auto; padding:0 25px; box-sizing:border-box; }
  h1 { font-size:42px; }
}

@media screen and (max-width: 767px) {
  .kontakt-row > div  { float:left; width:100%; padding:0 0px; box-sizing:border-box; }
  .projekt .meta { display:block;  }
}

@media screen and (max-width: 480px) {
  .page { padding:100px 0; }
  h1 { font-size:32px; }
  h2 { font-size:20px; }
  h3, p { font-size:16px; }
  .intro p { font-size:18px; }
}