@charset "UTF-8";
/*



// Font misc.

$font-letter-spacing-uppercase: 75 / 100 * 1px;



// Colors

$color-ci-1: #f1c9df; // rosa, Gehirn
$color-ci-2: #515a9f; // lila, Gehirn
$color-ci-3: #6eabad; // grün, Text
$color-ci-4: #e6e2c5; // beige, Hintergrund
$color-movie-empire-bg: #75888b;

$color-fine-line: #cccccc;

$color-form-line: #dddddd;
$color-form-bg: #f8f8f8;


$color-text: #666666;
$color-text-light: #999999;
$color-text-inverse: #ffffff;
$color-link: darken($color-ci-1, 20%);
$color-link-active: $color-ci-2;
$color-headline: #000000;

$color-page-background: #ffffff;
$color-header-background: #e6e2c5;
$color-content-background: #ffffff;



// Sizes

$header-height: 78px;
$header-height-small: 50px;
$stimulus-content-width: 800px;
$stimulus-content-padding: 24px;
$stimulus-profile-pic-width: 160px;
$blog-content-width: 990px;



$max-width: 1206;
$max-width-pixel: $max-width * 1px;
$margin-to-screen-without-pixel: 20; 
$margin-to-screen: $margin-to-screen-without-pixel * 1px; 

$margin-header-to-content: 30px; 
$header-with-burger-height: 170px;
$header-with-burger-height-small: 150px;
$header-with-burger-height-smaller-without-radio: 105px;
$header-with-burger-height-smallest: 80px;

$header-mkonline-with-burger-height: $header-with-burger-height - 10px;
$header-mkonline-with-burger-height-small: $header-with-burger-height-small - 10px;
$header-mkonline-with-burger-height-smaller-without-radio: $header-with-burger-height-smaller-without-radio - 10px;
$header-mkonline-with-burger-height-smallest: $header-with-burger-height-smallest - 10px;

$margin-copyright-to-image: 3px; 
$margin-image-to-text: 20px; 
$margin-link-blocks: 20px; 

$image-max-width: 331px;


$hp-teaser-width: 382;
$hp-teaser-width-pixel: $hp-teaser-width * 1px;
$hp-slide-height: 466px;
$hp-slide-height-2: 300px;
$hp-slide-height-3: 200px;
$hp-slide-left: (2 * $hp-teaser-width + $margin-to-screen-without-pixel * 3 / 2) * 100 / $max-width;
$hp-slide-left-percent: $hp-slide-left * 1%;
$hp-slide-right: $hp-teaser-width * 100 / $max-width * 1%;
$hp-slide-right-padding: 100% - $hp-slide-right;


$col-width-content: 904; 
$col-width-content-pixel: $col-width-content * 1px; 
$col-width-content-percent: $col-width-content * 100 / $max-width * 1%; 
$col-width-content-percent-bigger: 80%; 
$col-width-nav: 275; 
$col-width-nav-pixel: $col-width-nav * 1px; 
$col-width-nav-percent: $col-width-nav * 100 / $max-width * 1%;
$col-width-nav-percent-smaller: 17%;

$col-home-left: 794;
$col-home-right: 382;
$col-home-left-pixel: $col-home-left * 1px;
$col-home-right-pixel: $col-home-right * 1px;
$col-home-left-percent: $col-home-left * 100 / $max-width * 1%;
$col-home-right-percent: $col-home-right * 100 / $max-width * 1%;

$col-mkonline-width-content: 794; 
$col-mkonline-width-content-pixel: $col-mkonline-width-content * 1px; 
$col-mkonline-width-content-percent: $col-mkonline-width-content * 100 / $max-width * 1%; 
$col-mkonline-width-content-percent-bigger: $col-mkonline-width-content-percent; 
$col-mkonline-width-aside: 382; 
$col-mkonline-width-aside-pixel: $col-mkonline-width-aside * 1px; 
$col-mkonline-width-aside-percent: $col-mkonline-width-aside * 100 / $max-width * 1%;
$col-mkonline-width-aside-percent-smaller: $col-mkonline-width-aside-percent;

$footer-padding-col: 20px;

$news_list_height: 180px;
$news_list_image_width: 270px;
$news_list_margin_bottom: 30px;


// Shadows / Opacities
$shadow-zoom-color: #000000;
$shadow-zoom-opacity: 20 / 100;

$shadow-caption-color: #000000;
$shadow-caption-inverse-color: #ffffff;
$shadow-caption-opacity: 90 / 100;
$shadow-caption-offset: 1px;
$shadow-caption-blur: 5px;
$opacity-copyright: 100 / 100;
$figure-caption-background-opacity: 90 / 100;

$shadow2-caption-opacity: 85 / 100;
$shadow2-caption-offset: 0;
$shadow2-caption-blur: 1px;
$shadow3-caption-opacity: 90 / 100;
$shadow3-caption-offset: 0;
$shadow3-caption-blur: 0;




// Gradients









// Breakpoints

$breakpoint-small-header: "(max-width:670px)";
$breakpoint-smaller-header: "(max-width:374px)";
$breakpoint-blog-sidebar: "(max-width:660px)";









*/
/*

@mixin mixin-gradient-2-steps ($direction1, $direction2, $color1, $alpha1, $percentage1, $color2, $alpha2, $percentage2) {
    background-color: $color1;
    background: -moz-linear-gradient($direction1, rgba($color1,$alpha1) $percentage1, rgba($color2,$alpha2) $percentage2);
    background: -webkit-linear-gradient($direction1, rgba($color1,$alpha1) $percentage1,rgba($color2,$alpha2) $percentage2);
    background: linear-gradient($direction2, rgba($color1,$alpha1) $percentage1,rgba($color2,$alpha2) $percentage2);
}

@mixin mixin-gradient-3-steps ($direction1, $direction2, $color, $alpha1, $percentage1, $alpha2, $percentage2, $alpha3, $percentage3) {
    background-color: $color;
    background: -moz-linear-gradient($direction1, rgba($color,$alpha1) $percentage1, rgba($color,$alpha2) $percentage2, rgba($color,$alpha3) $percentage3);
    background: -webkit-linear-gradient($direction1, rgba($color,$alpha1) $percentage1, rgba($color,$alpha2) $percentage2,rgba($color,$alpha3) $percentage3);
    background: linear-gradient($direction2, rgba($color,$alpha1) $percentage1, rgba($color,$alpha2) $percentage2,rgba($color,$alpha3) $percentage3);
}

@mixin mixin-gradient-4-steps ($direction1, $direction2, $color, $alpha1, $percentage1, $alpha2, $percentage2, $alpha3, $percentage3, $alpha4, $percentage4) {
    background-color: $color;
    background: -moz-linear-gradient($direction1, rgba($color,$alpha1) $percentage1, rgba($color,$alpha2) $percentage2, rgba($color,$alpha3) $percentage3, rgba($color,$alpha4) $percentage4);
    background: -webkit-linear-gradient($direction1, rgba($color,$alpha1) $percentage1, rgba($color,$alpha2) $percentage2, rgba($color,$alpha3) $percentage3, rgba($color,$alpha4) $percentage4);
    background: linear-gradient($direction2, rgba($color,$alpha1) $percentage1, rgba($color,$alpha2) $percentage2, rgba($color,$alpha3) $percentage3, rgba($color,$alpha4) $percentage4);
}

*/


/* pt-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/asts/fonts/pt-sans-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* pt-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: url('/asts/fonts/pt-sans-v17-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* pt-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: url('/asts/fonts/pt-sans-v17-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* pt-sans-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: url('/asts/fonts/pt-sans-v17-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* titillium-web-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 200;
  src: url('/asts/fonts/titillium-web-v17-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 200;
  src: url('/asts/fonts/titillium-web-v17-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 300;
  src: url('/asts/fonts/titillium-web-v17-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 300;
  src: url('/asts/fonts/titillium-web-v17-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: url('/asts/fonts/titillium-web-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 400;
  src: url('/asts/fonts/titillium-web-v17-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 600;
  src: url('/asts/fonts/titillium-web-v17-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 600;
  src: url('/asts/fonts/titillium-web-v17-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 700;
  src: url('/asts/fonts/titillium-web-v17-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 700;
  src: url('/asts/fonts/titillium-web-v17-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 900;
  src: url('/asts/fonts/titillium-web-v17-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


* {
  padding: 0;
  margin: 0;
  border: 0;
  font-size: 1em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-weight: 400;
  background-repeat: no-repeat; }

html {
  -webkit-text-size-adjust: 100%; }

ul {
  list-style-type: none; }

a {
  text-decoration: none; }

em {
  font-style: normal; }

input[type=text], input[type=submit] {
  border-radius: 0;
  -webkit-appearance: none; }

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

body {
  font-family: "PT Sans", "sans serif";
  font-size: 1.125em;
  line-height: 1.5em;
  color: #666666;
  background-color: #e6ebee;
  min-height: 100vh;
  font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased; }

.Wrapper, .Wrapper2 {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  padding: 0 2em; }

.clear {
  clear: both; }

a {
  color: #000000;
  text-decoration: underline; }

.cntr {
  text-align: center; }

img.full {
  width: 100%;
  height: auto; }

#videoLogo {
  display: none; }

.noStage article {
  margin-top: 8em; }

h1, h2 {
  font-family: "Titillium Web", "sans serif";
  font-size: 2em;
  line-height: 1.125em;
  margin-bottom: 0.25em;
  color: #a8111c;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  clear: both; }

h2 {
  margin-top: 2em; }
  h2 span.pre {
    display: block;
    color: #666666;
    font-size: 0.5em;
    line-height: 1.125em; }
  h2 span.br {
    display: block; }

h3 {
  font-family: "Titillium Web", "sans serif";
  font-size: 1.375em;
  line-height: 1.25em;
  margin-top: 1em;
  margin-bottom: 0.25em;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  clear: both; }

h4 {
  font-family: "Titillium Web", "sans serif";
  font-size: 1em;
  line-height: 1.25em;
  margin-top: 1em;
  margin-bottom: 0.25em;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  clear: both; }

p {
  margin-bottom: 0.75em; }

button, input[type=submit], a.button {
  display: inline-block;
  text-decoration: none;
  font-family: "Titillium Web", "sans serif";
  font-size: 1.5em;
  line-height: 1.25em;
  letter-spacing: 1px;
  color: #a8111c;
  background-color: #ffffff;
  text-transform: uppercase;
  border-radius: 0.5em;
  padding: 0.5em 1em;
  cursor: pointer;
  margin-top: 1em;
  -webkit-transition: font-size 0.1s ease-out, margin-top 0.1s ease-out, margin-bottom 0.1s ease-out;
  transition: font-size 0.1s ease-out, margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; }
  button:hover, input[type=submit]:hover, a.button:hover {
    margin-top: 0.75em;
    font-size: 1.625em; }
  button a, input[type=submit] a, a.button a {
    color: #a8111c;
    text-decoration: none; }

article button, article input[type=submit], article a.button {
  font-size: 1em;
  margin: 20px 0 30px 0;
  -webkit-box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.15);
          box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.15);
  -webkit-transition: none;
  transition: none; }
  article button:hover, article input[type=submit]:hover, article a.button:hover {
    font-size: 1em;
    margin: 21px 0 29px 1px;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.075);
            box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.075); }

@media (max-height: 600px) {
  .Home button {
    display: none; } }

@media (max-height: 350px) {
  .Home #bgvideo .Arrow {
    bottom: -4px; } }

@media (max-width: 700px) {
  .Wrapper, .Wrapper2 {
    padding: 0 1.125em; }
  h1, h2 {
    font-size: 1.75em;
    line-height: 1.125em; } }

@media (max-width: 400px) {
  .Wrapper, .Wrapper2 {
    padding: 0 1em; }
  h1, h2 {
    font-size: 1.625em;
    line-height: 1.125em; }
  h3 {
    font-size: 1.25em;
    line-height: 1.25em; } }

@media (max-width: 666px) {
  button, input[type=submit] {
    font-size: 1.5em;
    line-height: 1.25em;
    padding: 0.5em 1em;
    margin-top: 1em; } }

@media (max-width: 500px) {
  body {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto; } }

.Portrait {
  float: right;
  width: 31.25%; }
  .Portrait img {
    margin-top: 4.25em;
    width: 100%;
    height: auto; }

.Bio {
  float: left;
  width: 65%; }

@media (max-width: 666px) {
  .Portrait {
    float: none;
    width: 100%; }
    .Portrait img {
      margin-top: 0.5em;
      max-width: 300px; }
  .Bio {
    float: none;
    width: 100%; } }

.ColLeft {
  width: 47.5%;
  float: left; }

.ColRight {
  width: 47.5%;
  float: right; }

.Col_2_3 {
  width: 65%;
  float: left; }

.Col_1_3 {
  width: 33.333%;
  float: right; }

.Kontakt {
  text-align: right; }
  .Kontakt h3 {
    font-size: 1.125em;
    line-height: 1.25em; }
  .Kontakt p {
    font-size: 0.825em;
    line-height: 1.25em; }
  .Kontakt a {
    text-decoration: none;
    color: #666666; }
    .Kontakt a:hover {
      text-decoration: underline; }

.vimeo {
  margin-top: 1.5em;
  padding: 56.25% 0 0 0;
  position: relative; }
  .vimeo iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1em;
    -webkit-box-shadow: 0 0 35px rgba(0, 0, 25, 0.33);
            box-shadow: 0 0 35px rgba(0, 0, 25, 0.33); }

@media (max-width: 600px) {
  .ColLeft, .ColRight {
    width: 100%;
    float: none; } }

@media (max-width: 767px) {
  .Col_2_3, .Col_1_3 {
    width: 100%;
    float: none; }
  .Kontakt {
    text-align: center;
    margin-top: 2em; }
    .Kontakt h3 {
      font-size: 1.25em;
      line-height: 1.25em; }
    .Kontakt p {
      font-size: 1em;
      line-height: 1.25em; }
    .Kontakt a {
      text-decoration: none;
      color: #666666; }
      .Kontakt a:hover {
        text-decoration: underline; } }

div.cms {
  float: left;
  width: 30%;
  margin-top: 1.5em; }
  div.cms .logo {
    display: block;
    width: 100%;
    height: 120px;
    margin-bottom: 0.5em;
    background-color: rgba(255, 255, 255, 0.33);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain; }
  div.cms a {
    display: block;
    line-height: 1.25em;
    text-decoration: none; }
    div.cms a span {
      text-decoration: none;
      display: block;
      font-size: 0.825em;
      line-height: 1.25em;
      color: #666666;
      margin-top: 0.25em; }

div.cms3, div.cms2 {
  margin-right: 5%; }

div.cms1 .logo {
  background-image: url("../bilder/logo_cms_1.png"); }

div.cms2 .logo {
  background-image: url("../bilder/logo_cms_2.png"); }

div.cms3 .logo {
  background-image: url("../bilder/logo_cms_3.png"); }

@media (max-width: 767px) {
  div.cms {
    float: none;
    width: 100%;
    margin-top: 4em;
    /*
            .logo {
                display: block;
                width: 100%;
                height: 120px;
                margin-bottom: 0.5em;
                background-color: rgba(#ffffff, 0.33);
                background-position: center center;
                background-repeat: no-repeat;
                background-size: contain;
            }
            */ } }

header {
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 850;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
  background-color: rgba(140, 163, 175, 0); }
  header li {
    display: inline-block; }
    header li a {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
      -webkit-transition: font-size 0.2s, padding-bottom 0.2s, margin-top 0.2s, margin-bottom 0.2s;
      transition: font-size 0.2s, padding-bottom 0.2s, margin-top 0.2s, margin-bottom 0.2s;
      font-size: 1.125em;
      line-height: 1em;
      color: #ffffff;
      text-decoration: none;
      text-transform: uppercase;
      display: block;
      padding: 0.75em 1em 0.375em 1em;
      margin: 1em 1.5em;
      text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
      border-bottom: 2px solid rgba(255, 255, 255, 0);
      letter-spacing: 0.05em; }
      header li a:hover {
        border-bottom-color: #ffffff; }
    header li.Active a {
      border-bottom-color: #ffffff; }
    header li.home {
      display: none; }
  header #Logo {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    -webkit-transition: top 0.2s, left 0.2s, background-size 0.2s, background-position 0.2s;
    transition: top 0.2s, left 0.2s, background-size 0.2s, background-position 0.2s;
    position: fixed;
    top: 1.125em;
    left: 48%;
    left: 2em;
    z-index: 900;
    background: url("sprite.png") -100px 0 no-repeat;
    background-size: 600px 800px;
    width: 150px;
    height: 44px;
    cursor: pointer; }
  header.Small {
    background-color: rgba(140, 163, 175, 0.85); }
    header.Small li a {
      font-size: 1em;
      margin-top: 0;
      margin-bottom: 0;
      padding-bottom: 0.75em; }
    header.Small #Logo {
      top: 0.4em;
      left: 1em;
      background: url("sprite.png") -75px 0 no-repeat;
      background-size: 450px 600px; }

.noStage header {
  background-color: rgba(140, 163, 175, 0.85); }

.Burger {
  width: 52px;
  height: 48px;
  background: url("sprite.png") 0 0 no-repeat;
  background-size: 600px 800px;
  position: fixed;
  top: 10px;
  right: 10px;
  cursor: pointer;
  display: none;
  z-index: 900; }

@media (max-width: 1399px) {
  header {
    text-align: right; } }

@media (max-width: 1399px) {
  header li a {
    padding: 0.75em 1em 0.375em 1em;
    margin: 1em 0.5em; } }

@media (max-width: 1023px) {
  header {
    text-align: center; }
    header li a {
      margin-left: 0.75em;
      margin-right: 0.75em;
      padding-right: 0.5em;
      padding-left: 0.5em; }
    header #Logo {
      top: 5px;
      left: 48%;
      background-position: -50px 0;
      background-size: 300px 400px;
      width: 75px;
      height: 22px; }
    header.Small #Logo {
      top: -25px;
      left: 48%;
      background-position: -50px 0;
      background-size: 300px 400px;
      width: 73px;
      height: 25px; } }

@media (max-width: 767px) {
  header nav.Main {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    background-color: #8ca3af;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
            box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
    display: none; }
    header nav.Main ul {
      margin: 3.5em 0 1em 0; }
      header nav.Main ul li {
        display: block;
        width: 100%;
        padding-top: 1px; }
        header nav.Main ul li a {
          margin: 0;
          border-bottom: 0;
          padding-bottom: 0.75em;
          padding-top: 0.625em;
          padding-bottom: 0.25em; }
          header nav.Main ul li a:hover {
            background-color: #aabbc4; }
        header nav.Main ul li.Active a {
          background-color: #aabbc4; }
        header nav.Main ul li.home {
          display: block; }
  header #Logo {
    top: 11px;
    left: 20px;
    background-position: -100px 0;
    background-size: 600px 800px;
    width: 150px;
    height: 43px; }
  header.Small {
    background-color: none; }
    header.Small li a {
      font-size: 1.125em; }
    header.Small #Logo {
      top: 11px;
      left: 20px;
      background-position: -100px 0;
      background-size: 600px 800px;
      width: 150px;
      height: 43px; }
  .Burger {
    display: block; } }

footer {
  margin-top: 3em;
  border-top: 1px solid #c8d3d9; }
  footer p {
    color: #8ca3af;
    margin-bottom: 0;
    text-align: center;
    font-size: 0.75em;
    line-height: 1em; }
  footer a {
    display: inline-block;
    color: #8ca3af;
    text-decoration: none;
    padding: 1em 1em;
    margin: 0 0.5em; }
    footer a:hover {
      text-decoration: underline; }

.Overlay {
  position: fixed;
  background-color: rgba(200, 211, 217, 0.75);
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 800;
  display: none; }

#bgvideoWrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
  background-color: #b9c7cf; }
  #bgvideoWrapper video {
    display: block;
    width: 100%;
    height: auto; }

#bgvideo {
  width: 100%;
  height: 100vh;
  overflow: hidden; }
  #bgvideo h1 {
    font-size: 2.75em;
    line-height: 1em;
    color: #ffffff; }
    #bgvideo h1 span.x {
      display: block;
      margin: 0 auto;
      width: 300px;
      height: 340px;
      background: url("sprite.png") -150px -150px no-repeat;
      background-size: 600px 800px; }
    #bgvideo h1 span {
      display: block; }
  #bgvideo button {
    -webkit-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.5);
            box-shadow: 0 1px 20px rgba(0, 0, 0, 0.5); }
  #bgvideo .Arrow {
    display: block;
    width: 55px;
    height: 56px;
    background: url("sprite.png") 0 -140px no-repeat;
    background-size: 600px 800px;
    position: absolute;
    bottom: 10px;
    left: 30%;
    z-index: 100;
    cursor: pointer; }

/*
#bgvideo:after { content: ""; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgTWFjaW50b3NoIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI4RkZBQTgzNzg1NzExRTU4NTQyODc3OUM4MTZGMUREIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI4RkZBQTg0Nzg1NzExRTU4NTQyODc3OUM4MTZGMUREIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjhGRkFBODE3ODU3MTFFNTg1NDI4Nzc5QzgxNkYxREQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjhGRkFBODI3ODU3MTFFNTg1NDI4Nzc5QzgxNkYxREQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz66uHInAAAAIUlEQVR42mL5//8/AyMj42YGIGBigABfEMEIkoEBgAADAKvuBwVS8BAjAAAAAElFTkSuQmCC); background-size: 3px 3px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
*/
#bgvideo .inner {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  display: table;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.75); }

#bgvideo .inner > div {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  padding: 0 2em; }

.bgImage {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; }

.bgImageHome {
  background-image: url("../bilder/videostill_home.jpg"); }

.bgImageVideo {
  background-image: url("../bilder/videostill_video.jpg"); }

.bgImageAbout {
  background-image: url("../bilder/webagentur-komplexmedia-muenchen.jpg"); }

.bgImageContact {
  background-image: url("../bilder/kontakt-komplexmedia.jpg"); }

.bgImageRef {
  background-image: url("../bilder/referenzen.jpg"); }

.bgImageWeb {
  background-image: url("../bilder/websites_apps_agentur_komplexmedia.jpg"); }

@media (max-width: 767px) {
  #bgvideo h1 {
    font-size: 2.25em;
    line-height: 1em; }
    #bgvideo h1 span.x {
      width: 225px;
      height: 255px;
      background-position: -112.5px -112.5px;
      background-size: 450px 600px; } }

@media screen and (max-width: 767px) and (orientation: landscape) {
  #bgvideo h1 span.x {
    width: 150px;
    height: 170px;
    background-position: -75px -75px;
    background-size: 300px 400px; }
  #bgvideo button, #bgvideo input[type=submit] {
    font-size: 1.25em;
    line-height: 1.25em;
    padding: 0.375em 0.75em;
    margin-top: 0.75em; } }

@media screen and (orientation: landscape) and (max-height: 767px) {
  #bgvideo h1 span.x {
    width: 225px;
    height: 255px;
    background-position: -112.5px -112.5px;
    background-size: 450px 600px; } }

@media screen and (orientation: landscape) and (max-height: 400px) {
  #bgvideo h1 span.x {
    width: 150px;
    height: 170px;
    background-position: -75px -75px;
    background-size: 300px 400px; } }

@media (max-width: 666px) {
  #bgvideo h1 {
    font-size: 1.75em;
    line-height: 1em; }
  #bgvideo button, #bgvideo input[type=submit] {
    font-size: 1.25em;
    line-height: 1.25em;
    padding: 0.375em 0.75em;
    margin-top: 0.75em; } }

@media (max-width: 500px) {
  #bgvideo {
    overflow-wrap: normal;
    word-wrap: normal;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: manual; }
    #bgvideo h1 span {
      display: none; } }

@media screen and (orientation: portrait) {
  .bgImageAbout {
    background-image: url("../bilder/webagentur-komplexmedia-muenchen-2.jpg"); } }

/*
@media screen and (orientation:landscape) and (max-width:667px) {
    #bgvideo {
        h1 {
            //font-size: 2.25em;
            //line-height: 1em;
            span.x {
                width: 300px/2;
                height: 340px/2;
                background-position: -150px/2 -150px/2;
                background-size: $background-size-half;
            }
        }
    }
}
*/
.Referenzen ul {
  margin-top: 1em; }
  .Referenzen ul li {
    width: 33.333%;
    display: block;
    float: left;
    min-height: 170px;
    padding-right: 1em;
    font-size: 0.75em;
    line-height: 1.25em;
    text-align: center; }
    .Referenzen ul li span {
      display: block;
      width: 100%;
      height: 120px;
      margin-bottom: 0.5em;
      background-color: rgba(255, 255, 255, 0.33);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: contain; }
  .Referenzen ul::after {
    content: '';
    display: block;
    clear: both; }

.Referenzen h2 {
  margin-top: 1.25em; }
  .Referenzen h2:first-child {
    margin-top: 2em; }

.Referenzen .l1 {
  background-image: url("../bilder/logo_1.png"); }

.Referenzen .l2 {
  background-image: url("../bilder/logo_2.png"); }

.Referenzen .l3 {
  background-image: url("../bilder/logo_3.png"); }

.Referenzen .l4 {
  background-image: url("../bilder/logo_4.png"); }

.Referenzen .l5 {
  background-image: url("../bilder/logo_5.png"); }

.Referenzen .l6 {
  background-image: url("../bilder/logo_6.png"); }

.Referenzen .l7 {
  background-image: url("../bilder/logo_7.png"); }

.Referenzen .l8 {
  background-image: url("../bilder/logo_8.png"); }

.Referenzen .l9 {
  background-image: url("../bilder/logo_9.png"); }

.Referenzen .l10 {
  background-image: url("../bilder/logo_10.png"); }

.Referenzen .l11 {
  background-image: url("../bilder/logo_11.png"); }

.Referenzen .l12 {
  background-image: url("../bilder/logo_12.png"); }

.Referenzen .l14 {
  background-image: url("../bilder/logo_14.png"); }

.Referenzen .l15 {
  background-image: url("../bilder/logo_15.png"); }

.Referenzen .l16 {
  background-image: url("../bilder/logo_16.png"); }

.Referenzen .l17 {
  background-image: url("../bilder/logo_17.png"); }

.Referenzen .l18 {
  background-image: url("../bilder/logo_18.png"); }

.Referenzen .l19 {
  background-image: url("../bilder/logo_19.png"); }

.Referenzen .l20 {
  background-image: url("../bilder/logo_20.png"); }

.Referenzen .l21 {
  background-image: url("../bilder/logo_21.png"); }

.Referenzen .l22 {
  background-image: url("../bilder/logo_22.png"); }

.Referenzen .l23 {
  background-image: url("../bilder/logo_23.png"); }

.Referenzen .l24 {
  background-image: url("../bilder/logo_24.png"); }

.Referenzen .l25 {
  background-image: url("../bilder/logo_25.png"); }

.Referenzen .l26 {
  background-image: url("../bilder/logo_26.png"); }

.Referenzen .l27 {
  background-image: url("../bilder/logo_27.png"); }

@media (max-width: 650px) {
  .Referenzen ul li {
    width: 50%; } }

@media (max-width: 440px) {
  .Referenzen ul li {
    width: 100%;
    float: none; } }

form .Row {
  width: 100%;
  position: relative;
  margin-top: 1em;
  padding-left: 120px; }
  form .Row label {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 0.375em; }
  form .Row input[type=text], form .Row textarea {
    width: 100%;
    font-family: "PT Sans", "sans serif";
    font-size: 1em;
    line-height: 1em;
    padding: 0.625em 1em;
    color: #666666; }
    form .Row input[type=text]::-webkit-input-placeholder, form .Row textarea::-webkit-input-placeholder {
      font-size: 0.875em;
      font-style: italic;
      color: rgba(102, 102, 102, 0.67);
      color: #8ca3af; }
    form .Row input[type=text]:-ms-input-placeholder, form .Row textarea:-ms-input-placeholder {
      font-size: 0.875em;
      font-style: italic;
      color: rgba(102, 102, 102, 0.67);
      color: #8ca3af; }
    form .Row input[type=text]::-ms-input-placeholder, form .Row textarea::-ms-input-placeholder {
      font-size: 0.875em;
      font-style: italic;
      color: rgba(102, 102, 102, 0.67);
      color: #8ca3af; }
    form .Row input[type=text]::placeholder, form .Row textarea::placeholder {
      font-size: 0.875em;
      font-style: italic;
      color: rgba(102, 102, 102, 0.67);
      color: #8ca3af; }
    form .Row input[type=text].Error, form .Row textarea.Error {
      border-color: #cc0000;
      background-color: #ffeeee; }
      form .Row input[type=text].Error::-webkit-input-placeholder, form .Row textarea.Error::-webkit-input-placeholder {
        color: rgba(204, 0, 0, 0.8); }
      form .Row input[type=text].Error:-ms-input-placeholder, form .Row textarea.Error:-ms-input-placeholder {
        color: rgba(204, 0, 0, 0.8); }
      form .Row input[type=text].Error::-ms-input-placeholder, form .Row textarea.Error::-ms-input-placeholder {
        color: rgba(204, 0, 0, 0.8); }
      form .Row input[type=text].Error::placeholder, form .Row textarea.Error::placeholder {
        color: rgba(204, 0, 0, 0.8); }
  form .Row textarea {
    height: 7em; }

form input[type=submit] {
  margin: 20px 0 30px 120px; }
  form input[type=submit]:hover {
    margin: 21px 0 29px 121px;
    font-size: 1em; }

form .MessageGood, form .MessageBad {
  border: 1px solid #cc0000;
  background-color: rgba(204, 0, 0, 0.05);
  color: #cc0000;
  padding: 0.5em 1em;
  margin-top: 1em;
  display: none; }

form .MessageGood {
  border-color: #00CC00;
  background-color: rgba(0, 153, 0, 0.05);
  color: #009900; }

@media (max-width: 600px) {
  form .Row {
    padding-left: 0; }
    form .Row label {
      position: relative;
      top: auto;
      left: auto;
      padding: 0 0 0.25em 0;
      display: block; }
  form input[type=submit] {
    margin-left: 0; } }

.cc-window {
  opacity: 1;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease; }

.cc-window.cc-invisible {
  opacity: 0; }

.cc-animate.cc-revoke {
  -webkit-transition: -webkit-transform 1s ease;
  transition: -webkit-transform 1s ease;
  transition: transform 1s ease;
  transition: transform 1s ease, -webkit-transform 1s ease; }

.cc-animate.cc-revoke.cc-top {
  -webkit-transform: translateY(-2em);
          transform: translateY(-2em); }

.cc-animate.cc-revoke.cc-bottom {
  -webkit-transform: translateY(2em);
          transform: translateY(2em); }

.cc-animate.cc-revoke.cc-active.cc-bottom, .cc-animate.cc-revoke.cc-active.cc-top, .cc-revoke:hover {
  -webkit-transform: translateY(0);
          transform: translateY(0); }

.cc-grower {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 1s;
  transition: max-height 1s; }

.cc-link, .cc-revoke:hover {
  text-decoration: underline; }

.cc-revoke, .cc-window {
  position: fixed;
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: Helvetica,Calibri,Arial,sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  z-index: 9999; }

.cc-window.cc-static {
  position: static; }

.cc-window.cc-floating {
  padding: 2em;
  max-width: 24em;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column; }

.cc-window.cc-banner {
  padding: 1em 1.8em;
  width: 100%;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row; }

.cc-revoke {
  padding: .5em; }

.cc-header {
  font-size: 18px;
  font-weight: 700; }

.cc-btn, .cc-close, .cc-link, .cc-revoke {
  cursor: pointer; }

.cc-link {
  opacity: .8;
  display: inline-block;
  padding: .2em; }

.cc-link:hover {
  opacity: 1; }

.cc-link:active, .cc-link:visited {
  color: initial; }

.cc-btn {
  display: block;
  padding: .4em .8em;
  font-size: .9em;
  font-weight: 700;
  border-width: 2px;
  border-style: solid;
  text-align: center;
  white-space: nowrap; }

.cc-banner .cc-btn:last-child {
  min-width: 140px; }

.cc-highlight .cc-btn:first-child {
  background-color: transparent;
  border-color: transparent; }

.cc-highlight .cc-btn:first-child:focus, .cc-highlight .cc-btn:first-child:hover {
  background-color: transparent;
  text-decoration: underline; }

.cc-close {
  display: block;
  position: absolute;
  top: .5em;
  right: .5em;
  font-size: 1.6em;
  opacity: .9;
  line-height: .75; }

.cc-close:focus, .cc-close:hover {
  opacity: 1; }

.cc-revoke.cc-top {
  top: 0;
  left: 3em;
  border-bottom-left-radius: .5em;
  border-bottom-right-radius: .5em; }

.cc-revoke.cc-bottom {
  bottom: 0;
  left: 3em;
  border-top-left-radius: .5em;
  border-top-right-radius: .5em; }

.cc-revoke.cc-left {
  left: 3em;
  right: unset; }

.cc-revoke.cc-right {
  right: 3em;
  left: unset; }

.cc-top {
  top: 1em; }

.cc-left {
  left: 1em; }

.cc-right {
  right: 1em; }

.cc-bottom {
  bottom: 1em; }

.cc-floating > .cc-link {
  margin-bottom: 1em; }

.cc-floating .cc-message {
  display: block;
  margin-bottom: 1em; }

.cc-window.cc-floating .cc-compliance {
  -ms-flex: 1 0 auto;
  -webkit-box-flex: 1;
          flex: 1 0 auto; }

.cc-window.cc-banner {
  -ms-flex-align: center;
  -webkit-box-align: center;
          align-items: center; }

.cc-banner.cc-top {
  left: 0;
  right: 0;
  top: 0; }

.cc-banner.cc-bottom {
  left: 0;
  right: 0;
  bottom: 0; }

.cc-banner .cc-message {
  -ms-flex: 1;
  -webkit-box-flex: 1;
          flex: 1; }

.cc-compliance {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -webkit-box-align: center;
          align-items: center;
  -ms-flex-line-pack: justify;
  align-content: space-between; }

.cc-compliance > .cc-btn {
  -ms-flex: 1;
  -webkit-box-flex: 1;
          flex: 1; }

.cc-btn + .cc-btn {
  margin-left: .5em; }

@media print {
  .cc-revoke, .cc-window {
    display: none; } }

@media screen and (max-width: 900px) {
  .cc-btn {
    white-space: normal; } }

@media screen and (max-width: 414px) and (orientation: portrait), screen and (max-width: 736px) and (orientation: landscape) {
  .cc-window.cc-top {
    top: 0; }
  .cc-window.cc-bottom {
    bottom: 0; }
  .cc-window.cc-banner, .cc-window.cc-left, .cc-window.cc-right {
    left: 0;
    right: 0; }
  .cc-window.cc-banner {
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column; }
  .cc-window.cc-banner .cc-compliance {
    -ms-flex: 1;
    -webkit-box-flex: 1;
            flex: 1; }
  .cc-window.cc-floating {
    max-width: none; }
  .cc-window .cc-message {
    margin-bottom: 1em; }
  .cc-window.cc-banner {
    -ms-flex-align: unset;
    -webkit-box-align: unset;
            align-items: unset; } }

.cc-floating.cc-theme-classic {
  padding: 1.2em;
  border-radius: 5px; }

.cc-floating.cc-type-info.cc-theme-classic .cc-compliance {
  text-align: center;
  display: inline;
  -ms-flex: none;
  -webkit-box-flex: 0;
          flex: none; }

.cc-theme-classic .cc-btn {
  border-radius: 5px; }

.cc-theme-classic .cc-btn:last-child {
  min-width: 140px; }

.cc-floating.cc-type-info.cc-theme-classic .cc-btn {
  display: inline-block; }

.cc-theme-edgeless.cc-window {
  padding: 0; }

.cc-floating.cc-theme-edgeless .cc-message {
  margin: 2em 2em 1.5em; }

.cc-banner.cc-theme-edgeless .cc-btn {
  margin: 0;
  padding: .8em 1.8em;
  height: 100%; }

.cc-banner.cc-theme-edgeless .cc-message {
  margin-left: 1em; }

.cc-floating.cc-theme-edgeless .cc-btn + .cc-btn {
  margin-left: 0; }