@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
@media screen, projection { html { height: 100%; box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
  *, *:before, *:after { box-sizing: inherit; }
  body { min-height: 100%; margin: 0; padding: 0 10px; color: #707076; font: 112.5%/1.5 "Source Sans Pro", sans-serif; background: url(/assets/dots.png) #fff; -webkit-font-smoothing: antialiased; }
  article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
  h1, h2, h3, h4 { font-weight: normal; font-size: 100%; margin: 0; }
  h1 { margin: 0 0 1.5em; padding: .25em 0; color: #900; letter-spacing: 2px; text-transform: uppercase; border-bottom: 2px dotted #900; }
  h2 { margin-bottom: 0.75em; }
  p, ul, ol, figure { margin: 0 0 0.75em; }
  a { color: inherit; text-decoration: none; background-color: transparent; -ms-touch-action: manipulation; touch-action: manipulation; }
  a:active, a:hover { outline: 0; }
  img { max-width: 100%; height: auto; border: 0; -ms-interpolation-mode: bicubic; }
  /* */
  .container { width: 1000px; min-height: 100vh; margin: 0 auto; padding: 0 10px; background: #fff; }
  header { padding: 20px 30px 15px; color: #fff; background: #900; border-radius: 0 0 30px 30px; }
  header h1 { margin: 0 0 15px; text-align: right; line-height: 0; }
  header h1 a { display: inline-block; width: 220px; max-width: 76%; margin: 0; }
  header h1 img { width: 100%; }
  header address { font-style: normal; }
  header p { margin: 0; padding: 0; font-size: 0; text-align: justify; text-justify: distribute; }
  header p:after { content: ''; display: inline-block; width: 100%; }
  header span { display: inline-block; font-size: 16px; font-size: 1.125rem; }
  header .sep { font-size: 1rem; }
  .main { margin-top: 30px; }
  .main { *zoom: 1; }
  .main:before, .main:after { content: " "; display: table; }
  .main:after { clear: both; }
  nav { float: left; width: 8em; }
  .content { margin-left: 8.5em; }
  /* menu */
  #menu { position: relative; width: 8em; left: -5px; margin: 0; padding: 0; list-style: none; }
  #menu li { position: relative; text-align: center; font-weight: bold; font-weight: 600; border-radius: 28px; }
  #menu a { display: block; padding: 4.2em .5em .6em; color: #900; font-size: 1em; line-height: 1; background: #ccc; border: 5px solid #fff; border-radius: 30px; background-clip: padding-box; -webkit-transition: color .2s; transition: color .2s; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; }
  #menu a:hover { color: #fff; }
  #menu .current a { color: #fff; background: #777; }
  #menu li:first-child a { position: relative; color: #fff; text-indent: -999em; background: url("/assets/heart.png") no-repeat center center #900; background-image: url("/assets/heart.svg"), none; }
  #menu li:first-child a:before { content: ''; width: 15px; height: 10px; position: absolute; top: -8px; left: 30px; background: #900; }
  #menu li:nth-child(1) ~ li { margin-top: -4em; }
  #menu li:nth-child(1) { z-index: 9; }
  #menu li:nth-child(2) { z-index: 8; }
  #menu li:nth-child(3) { z-index: 7; }
  #menu li:nth-child(4) { z-index: 6; }
  #menu li:nth-child(5) { z-index: 5; }
  #menu li:nth-child(6) { z-index: 4; }
  #menu li:nth-child(7) { z-index: 3; }
  #menu li:nth-child(8) { z-index: 2; }
  #menu li:nth-child(9) { z-index: 1; }
  #menu li:nth-child(10) { z-index: 0; }
  /* */
  .intro { overflow: hidden; }
  .intro figure { float: right; max-width: 200px; }
  .intro > div { padding-right: 220px; }
  .slider { position: relative; min-height: 300px; margin-top: -32px; padding-left: 30px; padding-right: 30px; overflow: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-touch-callout: none; }
  .slider > a { display: none; position: absolute; z-index: 200; opacity: .4; top: 50%; left: -30px; width: 0px; margin-top: -15px; border: 30px solid transparent; border-right-color: #ccc; border-right-color: rgba(0, 0, 0, 0.6); -webkit-transition: opacity .4s; transition: opacity .4s; -webkit-tap-highlight-color: transparent; }
  .slider > a:hover { opacity: 1; }
  .slider > a + a { border-right-color: transparent; border-left-color: #ccc; border-left-color: rgba(0, 0, 0, 0.6); left: auto; right: -28px; }
  .slider_nav .slider a { display: block; }
  .slides { position: relative; bottom: -32px; white-space: nowrap; overflow-x: auto; -webkit-transform: translateZ(0); transform: translateZ(0); z-index: 0; -webkit-overflow-scrolling: touch; }
  .chrm .slides { -webkit-overflow-scrolling: none; }
  .slide { position: relative; width: 100%; display: inline-block; vertical-align: top; text-align: center; line-height: 1; border-right: 2px solid #fff; border-bottom: 30px solid #fff; -webkit-transform: translateZ(0); transform: translateZ(0); }
  .slide img { max-height: 640px; vertical-align: middle; }
  .slide div { position: absolute; z-index: 2; left: 0; right: 0; bottom: 10px; padding: 0 20px; white-space: normal; color: #3e3e42; text-shadow: 0 1px 0 white; font-size: 92%; line-height: 1.5; text-align: center; }
  .slide span { display: inline-block; padding: 10px 20px; background: rgba(255, 255, 255, 0.9); }
  .slide span:empty { display: none; }
  .item { overflow: hidden; padding-bottom: 1.5em; border-bottom: 2px dotted #900; margin-bottom: 1.5em; }
  .item:last-child { border-bottom: none; }
  .item strong { text-transform: uppercase; font-weight: normal; }
  .v-center { max-width: 100%; position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; }
  .v-center iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  .konzeption .item { padding-right: 120px; }
  .konzeption .img { float: right; width: 100px; margin-right: -120px; }
  .referenzen ul { list-style: none; padding: 0; }
  footer { padding: 1.5em 0; }
  footer p { margin: 0; }
  footer a { color: #900; display: inline-block; width: 8em; text-align: center; } }
@media only screen { .container { width: auto; max-width: 1200px; } }
@media only screen and (min-width: 1200px) { header h1 { margin: 10px 0 25px; }
  #menu { width: 9em; }
  #menu a { padding: 4.5em .5em .75em; }
  nav { width: 9em; }
  .content { margin-left: 10em; } }
@media only screen and (max-width: 49.5em) { body { font-size: 100%; }
  h1 { text-align: center; }
  header h1 { text-align: center; }
  header p { text-align: center; }
  header span { padding: 0 .5em; font-size: .92rem; }
  header .sep { display: none; }
  .main { margin-top: 20px; }
  nav { float: none; width: 100%; }
  .content { margin-left: 0; margin-top: 20px; }
  #menu { width: auto; text-align: justify; text-justify: distribute; font-size: 0; margin-right: -10px; }
  #menu:after { content: ''; display: inline-block; width: 100%; }
  #menu li { display: inline-block; width: 20%; font-size: .92rem; text-align: center; }
  #menu li:first-child a { background-size: auto 72%; }
  #menu a { display: block; padding: .75em .5em .75em; color: #900; font-size: 1em; line-height: 1; background: #ccc; border: 5px solid #fff; }
  .js #menu li:first-child ~ li { margin-top: 0; }
  .intro figure { max-width: 32%; margin: 0 0 1.5em 10px; }
  .intro > div { padding-right: 0; }
  footer { text-align: center; } }
@media only screen and (max-width: 33.9em) { body { padding: 0 5px; }
  header { padding: 10px 20px 10px; border-radius: 0 0 15px 15px; }
  header h1 { margin-bottom: 10px; }
  .main { margin-top: 10px; }
  .content { margin-top: 10px; }
  .container { padding: 0 5px; }
  #menu { text-align: center; }
  #menu li { width: 48%; float: none; display: inline-block; }
  #menu li a { border-radius: 15px; }
  #menu li:first-child { width: 60%; display: block; margin: 0 auto; }
  .slider { padding-left: 15px; padding-right: 15px; }
  .slider > a { left: -15px; border-width: 15px; }
  .slider > a + a { right: -13px; } }
@media only screen and (max-height: 768px) { .slide img { max-height: 460px; }
  .slider > a { top: 33%; } }
@media \0screen\,screen\9 { .slider { margin-top: 0; }
  .slides { bottom: 0; } }