/* source-sans-pro-regular - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('/fonts/source-sans-pro-v21-latin-regular.woff2') format('woff2'),
       url('/fonts/source-sans-pro-v21-latin-regular.woff') format('woff');
}
/* source-sans-pro-italic - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('/fonts/source-sans-pro-v21-latin-italic.woff2') format('woff2'),
       url('/fonts/source-sans-pro-v21-latin-italic.woff') format('woff');
}
/* source-sans-pro-600 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('/fonts/source-sans-pro-v21-latin-600.woff2') format('woff2'),
       url('/fonts/source-sans-pro-v21-latin-600.woff') format('woff');
}
@media screen, projection { html { height: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
  *, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }
  body { margin: 0; font: 100%/1.4 Source Sans Pro, sans-serif; }
  article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
  h1, h2, h3, h4, h5, h6 { font-size: 100%; margin: 0; }
  h1, h2 { margin-bottom: 1.4em; letter-spacing: 2px; }
  h1 { font-size: 200%; text-transform: lowercase; }
  h2 { font-size: 112.5%; text-transform: uppercase; }
  h3 { margin-bottom: 0.35em; font-size: 112.5%; text-transform: lowercase; letter-spacing: 1px; }
  p, ul, ol, dl, form, pre, table, blockquote, figure { margin: 0 0 0.7em; padding: 0; }
  ul ul, ol ol, ul ol, ol ul { margin: 0.7em 0; padding-left: 18px; }
  a { color: inherit; background: transparent; }
  #menu a { text-decoration: none; }
  a:active, a:hover { outline: 0; }
  b, strong { font-weight: bold; }
  img { max-width: 100%; height: auto; -ms-interpolation-mode: bicubic; border: 0; }
  hr { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; margin: 2.8em 0; border-top: 1px solid #444; border-bottom: 1px solid #444; }
  button, input, optgroup, select, textarea { margin: 0; color: inherit; font: inherit; }
  button, select { text-transform: none; }
  button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
  input { line-height: normal; }
  fieldset { margin: 0; padding: 0; border: none; }
  textarea { overflow: auto; }
  table { border-collapse: collapse; border-spacing: 0; }
  small { font-size: 80%; }
  /* atf */
  .container { position: relative; }
  header { position: absolute; z-index: 100; opacity: 1; top: 0; left: 0; right: 0; padding: 0 10px; padding-top: 80px; color: #fff; font-size: 87.5%; text-transform: uppercase; letter-spacing: 1px; -webkit-transition: color .4s, border-color .4s, opacity .2s; transition: color .4s, border-color .4s, opacity .2s; -webkit-transform: translateZ(0); transform: translateZ(0); }
  header:before { content: 'CP'; position: absolute; top: 24px; left: 32px; width: 32px; height: 42px; background: url(/assets/icons.svg) no-repeat 8px 16px; }
  header > div { width: 980px; margin: 0 auto; }
  header h1 { float: left; width: 20%; margin: 0; font-size: 100%; text-transform: uppercase; font-weight: normal; }
  header h1 a { font-weight: bold; text-decoration: none; letter-spacing: 2px; }
  header h1 a, header h1 a:hover { color: inherit; border-color: inherit; }
  header p { float: left; margin: 0; }
  header ul { list-style: none; margin: 0; padding: 0; margin-left: 60%; font-size: 0px; text-align: justify; text-justify: distribute; }
  header ul:after { content: ''; display: inline-block; width: 100%; }
  header li { display: inline-block; font-size: 14px; font-size: .87rem; }
  header li a { display: block; position: relative; text-decoration: none; }
  header li a:after { content: ''; position: absolute; left: 0; top: -64px; width: 64px; height: 64px; }
  .js-ready header { position: fixed; }
  .js-ready header li a:after { background-image: url(/assets/icons.png); background-repeat: no-repeat; background-position: 1000px 1000px; }
  .transit .icon { opacity: 0; }
  .transit header { opacity: 0; }
  header[data-current="profil"] { color: #fff; }
  header[data-current="profil"]:before { background-position: 8px 16px; }
  header[data-current="profil"] a[href="#profil"] { cursor: default; }
  header[data-current="profil"] a[href="#profil"]:after { top: -68px; left: 18px; background-position: 0 -64px; }
  header[data-current="profil"] ~ #profil:after { background-position: 0 0; }
  header[data-current="profil"] h1 { position: relative; }
  header[data-current="profil"] h1:after { content: ''; position: absolute; left: -20px; bottom: -24px; height: 16px; width: 220px; background: url(/assets/icons.png) no-repeat 20px -128px; }
  header[data-current="ueber-mich"] { color: #ff6c2f; }
  header[data-current="ueber-mich"]:before { background-position: -120px 16px; }
  header[data-current="ueber-mich"] a[href="#ueber-mich"] { cursor: default; }
  header[data-current="ueber-mich"] a[href="#ueber-mich"]:after { top: -48px; left: -14px; width: 96px; height: 48px; background-position: -64px -64px; }
  header[data-current="ueber-mich"] ~ #ueber-mich:after { background-position: -128px 0; }
  header[data-current="ueber-mich"] ~ #ueber-mich .content:before { background-position: -128px 0; }
  header[data-current="projekte"] { color: #fff; }
  header[data-current="projekte"] a[href="#projekte"] { cursor: default; }
  header[data-current="projekte"] a[href="#projekte"]:after { top: auto; bottom: -32px; left: -4px; width: 72px; height: 24px; background-position: -192px -64px; }
  header[data-current="projekte"] ~ #projekte:after { background-position: 0 0; }
  header[data-current="links"] { color: #ff6c2f; }
  header[data-current="links"]:before { background-position: -120px 16px; }
  header[data-current="links"] a[href="#links"] { cursor: default; }
  header[data-current="links"] a[href="#links"]:after { left: -16px; background-position: -256px -256px; }
  header[data-current="links"] ~ #links:after { background-position: -128px 0; }
  header[data-current="links"] ~ #links .content:before { background-position: -128px 0; }
  header[data-current="kontakt"] { color: #fff; }
  header[data-current="kontakt"] a[href="#kontakt"] { cursor: default; }
  header[data-current="kontakt"] a[href="#kontakt"]:after { top: auto; bottom: -72px; left: -4px; background-position: 0 -384px; }
  header[data-current="kontakt"] ~ #kontakt:after { background-position: 0 0; }
  section { position: relative; min-height: 46em; min-height: 100vh; padding: 0 10px; border: 1px solid transparent; }
  section:after { content: ''; position: absolute; bottom: 20px; right: 20px; width: 24px; height: 24px; background: url(/assets/icons.svg) no-repeat 0 0; }
  section > div { min-height: 100vh; position: relative; color: inherit; background-color: inherit; }
  .js-ready .current + section > div { position: fixed; top: 0 !important; left: 0; right: 0; }
  .page { position: relative; width: 980px; margin: 0 auto; padding-top: 13em; padding-bottom: 4em; }
  .content { position: relative; margin-left: 20%; }
  .content:before { content: ''; position: absolute; top: -12px; left: -20px; width: 24px; height: 24px; background: url(/assets/icons.svg) no-repeat 0 0; }
  .icon { position: absolute; background: url(/assets/icons.svg) no-repeat; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition: opacity .1s; transition: opacity .1s; }
  .no-svg .icon { background-image: url(/assets/icons.png); }
  /* ttb */
  #profil { color: #fff; background-color: #00cdde; }
  #profil h1 { margin-bottom: 0; }
  #profil .wrap { position: relative; margin-left: 50%; }
  #profil .wrap:before { content: ''; position: absolute; top: -24px; left: -24px; width: 24px; height: 24px; background: url(/assets/icons.svg) no-repeat 0 0; }
  #profil > div:after { content: ''; position: absolute; background: url(/assets/icons.svg) no-repeat; bottom: 20px; left: 20%; margin-left: -20px; width: 146px; height: 58px; background-position: -256px -128px; }
  #ueber-mich { color: #ff6c2f; background-color: #f4f3ee; }
  #ueber-mich .content { width: 52%; }
  #ueber-mich .content:before { top: -24px; left: -24px; }
  #ueber-mich .statement { position: relative; overflow: hidden; }
  #ueber-mich figure { float: left; width: 160px; border: 8px solid #fff; }
  #ueber-mich figure img { display: block; }
  #ueber-mich h2 { margin-left: 180px; padding-top: 2em; letter-spacing: 1px; }
  #ueber-mich .wrap { position: relative; margin-left: 180px; }
  #ueber-mich .wrap:before { content: ''; position: absolute; top: -20px; left: -20px; width: 24px; height: 24px; background: url(/assets/icons.svg) no-repeat -128px 0; }
  #ueber-mich .icon_1 { top: 186px; right: -72px; width: 72px; height: 72px; background-position: 0 -192px; }
  #ueber-mich .icon_2 { bottom: -24px; left: -112px; width: 80px; height: 80px; background-position: -128px -192px; }
  #projekte { color: #fff; background-color: #8e9a36; }
  #projekte .content { margin-left: 0; }
  #projekte .icon_1 { top: -62px; left: 16%; width: 120px; height: 32px; background-position: -256px -192px; }
  #pnav { position: absolute; top: -8px; right: 20px; z-index: 100; }
  #pnav button { display: inline-block; cursor: pointer; padding: 0 .5em .25em; margin: 0; color: #fff; font-size: 32px; line-height: 0; background: #8e9a36; border: none; }
  #pnav button:before { content: ''; display: inline-block; height: 32px; }
  #pnav button:focus { outline: none; }
  .projects { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
  .projects ul { list-style: none; margin: .5em 0; }
  .projects li { cursor: pointer; display: inline-block; width: 3em; margin: 0 2px 0 0; text-align: center; line-height: 2; border: 1px solid #fff; border-color: rgba(255, 255, 255, 0.2); }
  .projects li.active { border-color: #fff; }
  .main { position: relative; overflow: hidden; width: 100%; height: 640px; background: #fff; }
  .project { opacity: 1; visibility: visible; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #fff; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: opacity .2s 0s, -webkit-transform 1s 0s, visibility 0s 1s; transition: opacity .2s 0s, transform 1s 0s, visibility 0s 1s; }
  .project.current { opacity: 1; visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: opacity .2s 0s, -webkit-transform 1s 0s, visibility 0s 0s; transition: opacity .2s 0s, transform 1s 0s, visibility 0s 0s; background: #fff; }
  .project.current ~ .project { opacity: 0; visibility: hidden; -webkit-transform: translate3d(1200px, 0, 0); transform: translate3d(1200px, 0, 0); -webkit-transition: opacity .2s 1s, -webkit-transform 1s 0s, visibility 0s 1.2s; transition: opacity .2s 1s, transform 1s 0s, visibility 0s 1.2s; }
  .intro { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 22em; color: #8e9a36; background: #fff; }
  .ord { position: absolute; top: 25%; left: 50%; width: 2em; margin-left: -1em; font-size: 125%; line-height: 1; text-align: center; }
  .ord:before { content: ''; position: absolute; top: -24px; left: -24px; width: 24px; height: 24px; background: url(/assets/icons.svg) no-repeat -256px 0; }
  .inner { position: absolute; left: 20px; right: 20px; bottom: 20px; }
  .wrapper { height: 100%; padding: 20px 0 20px 20px; padding-left: 22em; }
  .images { pointer-events: none; position: relative; height: 100%; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; -webkit-transform: translateZ(0); transform: translateZ(0); }
  .images img { display: inline-block; vertical-align: top; margin-right: 5px; height: 100%; width: auto; max-width: none; }
  .project.current .images { pointer-events: auto; }
  #links { color: #ff6c2f; background-color: #f4f3ee; }
  #links .content { padding-right: 32%; }
  #links h2 { margin-bottom: 3em; }
  #links dt { text-transform: uppercase; font-weight: bold; }
  #links dd { margin: 0 0 1.4em; padding: 0; }
  #links .icon_1 { top: 4em; left: -292px; width: 224px; height: 144px; background: url(/assets/icons.svg) no-repeat -128px -320px; }
  #links .icon_2 { bottom: -24px; right: 7em; width: 80px; height: 64px; background: url(/assets/icons.svg) no-repeat 0 -320px; }
  #kontakt { color: #fff; background-color: #ff6c2f; }
  #kontakt:after { content: none; }
  #kontakt .content { width: 460px; }
  #kontakt .content:before { top: -24px; left: -24px; }
  #kontakt .content:after { content: ''; position: absolute; bottom: -24px; right: -24px; width: 24px; height: 24px; background: url(/assets/icons.svg) no-repeat 0 0; }
  .vcard { position: relative; font-size: 150%; text-transform: uppercase; letter-spacing: 1px; }
  .vcard p { max-width: none; }
  .vcard strong { letter-spacing: 3px; }
  .vcard a { text-decoration: none; }
  .vcard ~ p { float: left; width: 12em; margin-left: -14em; margin-top: -10em; }
  footer { position: relative; overflow: hidden; z-index: 100; margin: -3em 0; width: 100%; height: 3em; color: #fff; text-align: right; }
  footer .page { padding-top: 0; padding-bottom: 0; }
  footer a { color: #fff; text-decoration: none; background: #ff6c2f; }
  footer p:after { content: ''; display: inline-block; width: 32px; height: 22px; margin: 0 -52px 0 20px; background: url(/assets/icons.svg) no-repeat -320px 0; }
  .no-svg footer p:after { background-image: url(/assets/icons.png); }
  #layer { position: relative; z-index: 101; background: #FFF; font-size: 82.5%; line-height: 1.333; }
  #layer h1 { font-size: 100%; letter-spacing: 0; }
  #inner { height: 100%; overflow: auto; padding: 20px 20px; color: #ff6c2f; }
  #close { cursor: pointer; position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; color: #ff6c2f; text-indent: -1000em; background: url(/assets/icons.svg) no-repeat -376px 0px; }
  .col { display: inline-block; vertical-align: top; width: 49%; padding-right: 4%; } }
@media only screen { .page, header > div { width: auto; max-width: 980px; } }
@media only screen and (max-height: 768px) { .projects .main { height: 460px; } }
@media only screen and (min-width: 980px) { header { padding-top: 100px; }
  .page { padding-top: 14em; } }
@media only screen and (max-width: 1024px) { .js-ready .current + section > div { position: relative; top: auto !important; } }
@media only screen and (max-width: 1060px) { header:before { top: 5px; left: 8px; }
  .vcard ~ p { float: none; width: 100%; margin-left: 0; margin-top: 0; }
  footer p:after { margin: 0 0 0 20px; } }
@media only screen and (max-width: 980px) { header:before { top: 5px; left: 8px; }
  header h1 { width: 38%; float: none; }
  header h1:after { display: none; }
  header p { margin-left: 0; }
  header ul { margin-top: -1.4em; margin-left: 46%; }
  #profil .wrap { margin-left: 40%; }
  .vcard { font-size: 125%; } }
@media only screen and (max-width: 48em) { h1 { text-align: center; }
  h2 { font-size: 100%; text-align: center; }
  .container { min-height: 0 !important; }
  header { position: absolute; padding-top: 20px; padding-bottom: 20px; text-align: center; background: #00cdde; -webkit-transition: all .2s; transition: all .2s; -webkit-transform: translateZ(0); transform: translateZ(0); }
  header h1, header p { width: 100%; }
  header h1 { margin-bottom: 0.35em; }
  header p { margin-bottom: 1.4em; }
  header ul { margin-left: 0; margin-top: 0; text-align: center; }
  header li { min-width: 48%; margin: .5%; line-height: 1.25; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 3px; -webkit-transition: border-color .2s; transition: border-color .2s; }
  header a { display: block; padding: .5em; }
  .js-ready header { position: absolute; }
  .js-ready header ul a:after { display: none; }
  header[data-current="profil"] h1:after { top: -16px; bottom: auto; left: auto; right: 0; background-position: 48px -128px; }
  #nav-opener { display: none; cursor: pointer; position: absolute; top: 7px; right: 10px; width: 32px; height: 32px; background: url(/assets/menu.svg) no-repeat; }
  .open #nav-opener { background-position: 0 -32px; }
  /* Content */
  section:after { bottom: 10px; right: 10px; }
  .js-ready .current + section > div { position: relative; top: auto !important; }
  .page { padding-top: 6em; }
  section, section > div, .page { min-height: 0 !important; }
  #profil { padding-top: 180px; }
  .fixed header { position: fixed; min-height: 46px; color: #ff6c2f; background: rgba(255, 255, 255, 0.9); }
  .fixed header:before { top: 0; left: 5px; background-position: -120px 16px !important; }
  .fixed header h1, .fixed header p { display: none; }
  .fixed header ul { max-height: 0; margin-left: 46px; margin-right: 46px; overflow: hidden; -webkit-transition: max-height .6s; transition: max-height .6s; }
  .fixed header li { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 108, 47, 0.3); }
  .fixed header li:hover { border-color: #ff6c2f; }
  .fixed header.open ul { max-height: 200px; }
  .fixed #nav-opener { display: block; }
  .content { margin-left: 0; }
  * .content:before { display: none; }
  #profil .content { width: 100%; }
  #profil h1 { margin-bottom: .5em; font-size: 150%; }
  #profil h1 br { display: none; }
  #profil .wrap { position: relative; margin-left: 0; }
  #profil .wrap:before { display: none; }
  #profil .icon_3 { bottom: 10px; }
  #ueber-mich .content { width: 100%; }
  #ueber-mich .wrap { margin-left: 0; }
  #ueber-mich .wrap:before { display: none; }
  #ueber-mich .icon_1 { top: auto; bottom: -88px; right: 40%; width: 72px; height: 72px; background: url(/assets/icons.svgz) no-repeat 0 -192px; }
  #ueber-mich .icon_2 { display: none; }
  #projekte .content { margin-left: 0; margin-right: -10px; }
  #projekte .icon_1 { display: none; }
  .projects { font-size: 12px; }
  .projects .main { height: 320px; }
  .intro { width: 36%; }
  .inner { left: 10px; right: 10px; bottom: 10px; }
  .wrapper { padding-left: 36%; padding-top: 10px; padding-bottom: 10px; }
  #links .content { padding-right: 0; }
  #links h2 { margin-bottom: 1.4em; }
  #links .icon_1 { display: none; }
  #links .icon_2 { bottom: -76px; right: 7em; width: 80px; height: 64px; background: url(/assets/icons.svgz) no-repeat 0 -320px; }
  #kontakt { text-align: center; }
  #kontakt .content { width: 100%; }
  #kontakt .content:after { display: none; }
  #kontakt .all { max-width: 60%; margin: 0 auto 1.4em; }
  .col { display: block; width: 100%; } }
@media only screen and (max-width: 20em) { .col { width: 100%; padding-right: 0; }
  #links dl { -webkit-columns: 1; -moz-columns: 1; columns: 1; } }
@media \0screen\,screen\9 { .js-ready .current + section > div { position: relative; top: auto !important; }
  #close { text-indent: 0; font-size: 32px; border: 1px solid white; } }
@media print { * { background: transparent !important; color: #000 !important; text-shadow: none !important; -webkit-filter: none !important; filter: none !important; -ms-filter: none !important; }
  @page { margin: 1cm; }
  body { font: 10pt/1.2 'Helvetica Neue',sans-serif; }
  h1 { font-size: 140%; }
  h2 { font-size: 120%; margin: 0 0 1em; }
  h3, h4, h5, h6 { font-size: 100%; margin: 0; }
  h2, h3 { page-break-after: avoid; }
  p, h2, h3 { orphans: 3; widows: 3; }
  p { margin: 0 0 1em; }
  ul, ol { margin: 1em 0; }
  li { margin: 0 0 0 1em; padding: 0; }
  a, a:visited { text-decoration: underline; }
  img { max-width: 100% !important; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  img { max-width: 100% !important; page-break-inside: avoid; }
  hr { margin: 2em 0; border: 0; border-bottom: 1px solid #000; }
  article { page-break-before: always; }
  ul, img { page-break-inside: avoid; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; page-break-after: auto; }
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  #nav, .icon, .projects button, .projects ul, .vcard img, footer { display: none; }
  section, section > div { min-height: 0 !important; }
  section { padding: 0 0 1.5em 0; margin: 1.5em 0; border-bottom: 1px solid #000; }
  .statement figure { width: 200px; } }