@charset "UTF-8";
/**
 * @license
 * MyFonts Webfont Build ID 4020509, 2021-02-26T06:55:47-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: TTNormsPro-Bold by TypeType
 * URL: https://www.myfonts.com/fonts/type-type/tt-norms/bold/
 * 
 * Webfont: TTNormsPro-Normal by TypeType
 * URL: https://www.myfonts.com/fonts/type-type/tt-norms/normal/
 * 
 * 
 * Webfonts copyright: Copyright (c) 2016-2019 by TypeType. Designers Ivan Gladkikh, Pavel Emelyanov. Technical designers Vika Usmanova, Olexa Volochay, Nadyr Rakhimov, Yuri Nakonechny. All rights reserved.
 * 
 * © 2021 MyFonts Inc
*/
/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3d591d");
@font-face {
  font-family: "TTNormsPro-Normal";
  src: url("webFonts/TTNormsProNormal/font.woff2") format("woff2"), url("webFonts/TTNormsProNormal/font.woff") format("woff"); }

@font-face {
  font-family: "TTNormsPro-Bold";
  src: url("webFonts/TTNormsProBold/font.woff2") format("woff2"), url("webFonts/TTNormsProBold/font.woff") format("woff"); }

.section.intro {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto auto auto auto auto 1fr;
  row-gap: 3em;
  background: #f8e35c;
  grid-template-areas: '. . .' '. logo .' '. slogan .' '. image .' '. text .' '. download .' '. . .';
  /* Will be commented in again in a later step.

  // ######################################
  // Minimum width 375px
  // ######################################

  @include minWidth(375px) {
    .slogan {
      max-width: 12em;
    }

    .one-liner {
      .extra-text-for-bigger-screens {
        display: inline;
      }
    }
  }

  // ######################################
  // Landscape
  // ######################################

  @include landscape {
    grid-template-columns: 1fr auto auto 1fr;
    grid-template-rows: 1fr auto auto auto 1fr;
    row-gap: 4em;
    column-gap: 1.8em;

    grid-template-areas:
      '. . . . '
      '. header header .'
      '. slogan slogan .'
      '. text image .'
      '. . . .';

    & > .logo,
    & > .button.download {
      display: none;
    }

    .header {
      display: grid;
      grid-template-columns: auto 1fr auto;
      grid-template-areas: 'logo menu download';
      column-gap: 2em;
      align-items: baseline;

      .logo {
        grid-area: logo;
        width: 9em;
      }

      .menu {
        display: grid;
        grid-area: menu;
        grid-auto-flow: column;
        white-space: nowrap;
        column-gap: 2em;
        font-size: 0.8em;
        justify-self: center;
      }

      .download {
        grid-area: download;
        font-size: $text-20;
      }
    }

    .slogan {
      font-size: 1.5em;
      align-self: center;
    }

    .one-liner {
      text-align: right;
      align-self: center;
      justify-self: right;
      max-width: 13em;
      font-size: 0.75em;
    }

    .screenshot-full {
      align-self: center;
      justify-self: left;
      max-width: 50em;
    }
  }
  */ }
  .section.intro .logo {
    grid-area: logo;
    width: 100%;
    max-width: 12em;
    justify-self: center; }
  .section.intro .header {
    display: none;
    grid-area: header; }
  .section.intro .slogan {
    grid-area: slogan;
    color: #e34a3b;
    text-align: center;
    justify-self: center;
    max-width: 10em; }
  .section.intro .aud-img {
    grid-area: image;
    justify-self: flex-end;
    filter: drop-shadow(5px 5px 14px rgba(0, 0, 0, 0.51)); }
  .section.intro .screenshot-full {
    max-height: 10.5em;
    width: 13.5em;
    justify-self: center; }
  .section.intro .one-liner {
    grid-area: text;
    color: #e34a3b;
    text-align: center;
    max-width: 11.3em;
    justify-self: center; }
    .section.intro .one-liner .extra-text-for-bigger-screens {
      display: none; }
  .section.intro .button {
    color: #e34a3b;
    border-color: #e34a3b;
    align-self: baseline;
    justify-self: center; }
    .section.intro .button.download {
      grid-area: download; }

.section.purpose {
  display: grid;
  background: #dcf0a5;
  color: #468966;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto auto auto auto 1fr;
  row-gap: 3em;
  grid-template-areas: '. . .' '. headline .' '. image .' '. one-liner .' '. download .' '. . .';
  /* Will be commented in again in a later step.

  @include landscape {
    $padding: 2.5em;
    $overlap: 6em;
    $sub-headline-fontsize: 2em;
    font-size: 1.05em;
    & > div {
      padding: $padding $padding $padding $padding;
    }
    grid-template-columns: 45% 55%;
    grid-template-rows: auto 1fr;
    gap: 0em;
    grid-template-areas:
      'headline sub-headline'
      'change-the-world one-liner';

    .headline {
      grid-area: headline;
      justify-self: right;
      align-self: top;

      .text {
        width: 5em;
        text-align: right;
      }
    }
    .sub-headline {
      display: grid;
      grid-area: sub-headline;
      background-color: $green-dark;
      color: $green-bright;

      .text {
        display: inline-block;
        max-width: 7em;
        font-family: TTNormsPro-Bold;
      }
      .image {
        display: inline-block;
        margin-top: $padding;
        margin-bottom: -$overlap;
        font-size: inherit;
        width: 30em;
      }
    }

    .download {
      display: none;
    }

    .change-the-world {
      display: grid;
      grid-area: change-the-world;
      background-color: $green-dark;
      color: $green-bright;

      .text {
        max-width: 6em;
        text-align: right;
        justify-self: right;
        align-self: end;
        font-family: TTNormsPro-Bold;
      }
    }

    .one-liner {
      display: grid;
      grid-area: one-liner;
      padding-top: 0px;
      margin-top: $overlap;
      justify-self: left;

      .text {
        font-size: 1.3em;
        max-width: 15em;
        align-self: end;
        text-align: left;
      }
    }
  }

  // ##################################
  // Landscape Bigger Devices
  // ##################################
  @include portraitMinWidth($iPadShortSide + px) {
    font-size: 0.8em;
  }*/ }
  .section.purpose .headline {
    grid-area: headline;
    justify-self: center;
    max-width: 18em; }
    .section.purpose .headline .text {
      text-align: center; }
  .section.purpose .sub-headline {
    display: grid;
    grid-area: image; }
    .section.purpose .sub-headline .text {
      display: none; }
    .section.purpose .sub-headline .image {
      width: 100%;
      max-width: 15.5em;
      justify-self: center;
      border-radius: 0.625em; }
  .section.purpose .change-the-world {
    display: none; }
  .section.purpose .one-liner {
    justify-self: center;
    align-self: top;
    grid-area: one-liner; }
    .section.purpose .one-liner .text {
      max-width: 15em;
      text-align: center; }
  .section.purpose .download {
    grid-area: download;
    border-color: #468966;
    justify-self: center; }

.section.midi {
  display: grid;
  background: #000000;
  color: #ffffff;
  grid-auto-columns: auto;
  grid-auto-rows: 1fr auto auto auto auto 1fr;
  row-gap: 3em;
  grid-template-areas: ' . ' ' header ' ' image ' ' one-liner ' ' download ' ' . ';
  /* @include landscape {
    grid-template-columns: 1fr auto auto 1fr;
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: 1.5em;
    row-gap: 4em;

    grid-template-areas:
      '. . . .'
      '. header header .'
      '. one-liner image .'
      '. . . .';

    .header {
      grid-area: header;
      justify-self: center;
      max-width: 11em;
    }

    .one-liner {
      grid-area: one-liner;
      max-width: 13em;
      text-align: left;
    }

    .image {
      grid-area: image;
      align-self: center;
    }

    .download {
      display: none;
    }
  } */ }
  .section.midi .header {
    display: grid;
    grid-area: header;
    max-width: 10em;
    text-align: center;
    justify-self: center; }
  .section.midi .image {
    grid-area: image;
    max-width: 15em;
    border: solid #ffffff 3px;
    border-radius: 20px;
    justify-self: center; }
  .section.midi .one-liner {
    display: grid;
    grid-area: one-liner;
    max-width: 18em;
    justify-self: center;
    text-align: center; }
  .section.midi .download {
    grid-area: download;
    color: #ffffff;
    border-color: #ffffff;
    justify-self: center; }

.section.how-its-done {
  display: grid;
  background: #dcf0a5;
  color: #468966;
  grid-template-columns: 1fr auto auto 1fr;
  grid-template-rows: 1fr auto auto auto auto auto 1fr;
  column-gap: 1em;
  row-gap: 4em;
  grid-template-areas: '. . . .' '. headline headline .' '. a text1 .' '. b text2 .' '. c text3 .' '. newsletter newsletter .' '. . . .';
  /* & > div {
    border-radius: 50%;
  } */ }
  .section.how-its-done .button {
    border: 1px solid;
    color: #468966; }
  .section.how-its-done .number {
    display: grid;
    border: 2px solid;
    color: #468966;
    text-align: center;
    border-radius: 50%;
    height: 2.35em;
    width: 2.375em;
    align-items: center; }
    .section.how-its-done .number.one {
      grid-area: a; }
    .section.how-its-done .number.two {
      grid-area: b; }
    .section.how-its-done .number.three {
      grid-area: c; }
  .section.how-its-done .headline {
    grid-area: headline;
    justify-self: center; }
  .section.how-its-done .text1 {
    grid-area: text1;
    max-width: 12em; }
  .section.how-its-done .text2 {
    grid-area: text2;
    max-width: 12em; }
  .section.how-its-done .text3 {
    grid-area: text3;
    max-width: 12em; }
  .section.how-its-done .newsletter {
    display: grid;
    grid-area: newsletter;
    gap: 2em; }
  .section.how-its-done .mail {
    justify-self: center; }
    .section.how-its-done .mail .button {
      padding: 10px 17px;
      border: 2px solid;
      border-radius: 0.625em; }
  .section.how-its-done .subscribe {
    justify-self: center; }
    .section.how-its-done .subscribe .button {
      padding: 10px 10px;
      background: #468966;
      color: #dcf0a5;
      margin-top: 0em;
      border-radius: 0.625em; }
  @media (orientation: landscape) {
    .section.how-its-done {
      column-gap: 1em;
      row-gap: 3em;
      font-size: 1.25em; }
      .section.how-its-done .headline {
        font-size: 3.125em; } }

.section.await-you {
  display: grid;
  background: #ffbabf;
  color: #96558a;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto auto 1fr;
  row-gap: 4em;
  grid-template-areas: '. . .' '. headline .' '. text .' '. . .'; }
  .section.await-you .headline {
    grid-area: headline;
    max-width: 7em;
    justify-self: center;
    text-align: center; }
  .section.await-you .text {
    display: grid;
    grid-area: text;
    gap: 4em;
    justify-items: center;
    text-align: center; }
  .section.await-you .text1 {
    max-width: 16em; }
  .section.await-you .text2 {
    max-width: 17em; }
  .section.await-you .text3 {
    max-width: 14em; }
  @media (orientation: landscape) {
    .section.await-you {
      row-gap: 3em; }
      .section.await-you .headline {
        font-size: 3.125em; } }

.section.background {
  display: grid;
  background: #73c6ff;
  color: #5345eb;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto auto 1fr;
  row-gap: 4em;
  grid-template-areas: '. . .' '. headline .' '. text .' '. . .'; }
  .section.background .headline {
    grid-area: headline;
    justify-self: center; }
  .section.background .text {
    display: grid;
    grid-area: text;
    gap: 4em;
    justify-items: center;
    text-align: center; }
  .section.background .text1 {
    max-width: 17em; }
  .section.background .text2 {
    max-width: 17em; }
  .section.background .text3 {
    max-width: 17.5em; }
  @media (orientation: landscape) {
    .section.background {
      row-gap: 3em; }
      .section.background .headline {
        font-size: 3.125em; } }

.section.people {
  display: grid;
  background: #ffbabf;
  color: #96558a;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto auto auto auto auto auto auto 1fr;
  row-gap: 3em;
  grid-template-areas: '. . .' '. headline .' '. gabriel .' '. text1 .' '. markus .' '. text2 .' '. david .' '. text3 .' '. . .'; }
  .section.people .headline {
    grid-area: headline;
    max-width: 7em;
    text-align: center;
    justify-self: center; }
  .section.people .image {
    max-width: 7em;
    border-radius: 10px;
    border: 1px solid white;
    justify-self: center; }
  .section.people .gabriel {
    grid-area: gabriel; }
  .section.people .text {
    justify-self: center;
    max-width: 13em; }
  .section.people .text1 {
    grid-area: text1; }
  .section.people .markus {
    grid-area: markus; }
  .section.people .text2 {
    grid-area: text2; }
  .section.people .david {
    grid-area: david; }
  .section.people .text3 {
    grid-area: text3; }
  @media (orientation: landscape) {
    .section.people {
      column-gap: 1em;
      row-gap: 3em; }
      .section.people .headline {
        font-size: 3.125em; }
      .section.people .text {
        max-width: 25em; }
      .section.people .image {
        max-width: 10em; } }

.section.connect-one-another {
  background: #dcf0a5;
  color: #468966;
  display: grid;
  grid-template-columns: 1fr auto auto auto 1fr;
  grid-template-rows: auto auto auto auto auto auto 1fr;
  row-gap: 4em;
  column-gap: 0em;
  grid-template-areas: '. . . . .' '. headline headline headline .' '. text1 text1 text1 .' '. mail mail mail .' '. text2 text2 text2 .' '. logo logo logo .' '. . . . .'; }
  .section.connect-one-another .headline {
    grid-area: headline;
    max-width: 7em;
    text-align: center;
    justify-self: center; }
  .section.connect-one-another .text1 {
    grid-area: text1;
    max-width: 13em;
    text-align: center;
    justify-self: center; }
  .section.connect-one-another .mail {
    grid-area: mail;
    justify-self: center;
    width: 5em; }
  .section.connect-one-another .text2 {
    grid-area: text2;
    max-width: 15em;
    text-align: center;
    justify-self: center; }
  .section.connect-one-another .logos {
    display: grid;
    row-gap: 2em;
    grid-area: logo;
    justify-self: center; }
    .section.connect-one-another .logos .image {
      width: 3.5em;
      height: 100%; }
    .section.connect-one-another .logos .logo1 {
      display: grid;
      grid-auto-flow: column;
      gap: 2em; }
      .section.connect-one-another .logos .logo1 .youtube {
        width: 4.7em; }
    .section.connect-one-another .logos .logo2 {
      display: grid;
      grid-auto-flow: column;
      gap: 2em; }
      .section.connect-one-another .logos .logo2 .twitter {
        width: 4.7em; }
  @media (orientation: landscape) {
    .section.connect-one-another {
      row-gap: 3em;
      column-gap: 0em; }
      .section.connect-one-another .headline {
        font-size: 3.125em; }
      .section.connect-one-another .logos {
        row-gap: 1.4em; }
      .section.connect-one-another .mail {
        width: 5.2em; } }

.section.impressum {
  background: #000000;
  color: #ffffff;
  display: grid;
  min-height: 7vh;
  grid-template-rows: 9em 1fr 9em;
  grid-template-areas: '.' 'footer' '.'; }
  .section.impressum .footer {
    display: grid;
    grid-area: footer;
    row-gap: 4em; }
    .section.impressum .footer .logo {
      filter: invert(1);
      justify-self: center;
      max-width: 12em; }
    .section.impressum .footer .text.impressum {
      justify-self: center; }
    .section.impressum .footer .text.data-protection {
      justify-self: center; }
    .section.impressum .footer .text.contact {
      justify-self: center; }

.section.thank {
  background: #ffffff;
  color: #000000;
  display: grid;
  padding-top: 4em;
  row-gap: 4em; }
  .section.thank .headline {
    justify-self: center; }
  .section.thank .text1 {
    max-width: 13.25em;
    justify-self: center;
    text-align: center; }
  .section.thank .item {
    display: grid;
    row-gap: 4em;
    max-width: 16.4em;
    justify-self: center; }
    .section.thank .item .image {
      justify-self: center;
      width: 10em; }
    .section.thank .item .text {
      text-align: center;
      font-size: 0.938em; }
  @media (orientation: landscape) {
    .section.thank .item {
      max-width: 28em; } }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html {
  padding: env(safe-area-inset);
  -webkit-text-size-adjust: 110%; }

body {
  font-family: TTNormsPro-Normal;
  width: 100%;
  min-width: 320px; }

.color-burn {
  width: 100%;
  height: 100%;
  text-align: cover;
  position: absolute;
  background: radial-gradient(ellipse, white 0%, #828282 100%);
  z-index: 999;
  mix-blend-mode: color-burn;
  pointer-events: none; }

.button {
  background: transparent;
  border: solid black 0.15em;
  border-radius: 0.75em;
  padding: 0.418em;
  text-align: center;
  font-size: 1.25em;
  /* font-weight: bold; */ }

.container {
  max-width: 100%;
  display: grid;
  width: 100%; }

.section {
  min-height: 100vh;
  width: 100%; }
  .section .headline-50 {
    font-size: 3.125em;
    font-family: TTNormsPro-Bold; }
  .section .headline-40 {
    font-size: 2.5em;
    font-family: TTNormsPro-Bold; }
  .section .headline-35 {
    font-size: 2.188em;
    font-family: TTNormsPro-Bold; }
  .section .headline-30 {
    font-size: 1.875em;
    font-family: TTNormsPro-Bold; }
  .section .text-20 {
    font-size: 1.25em; }
  .section .text-15 {
    font-size: 0.938em; }