body {
  min-width: 100%;
  min-height: 100%;
  padding: 0;
  margin: 0; }

body, input {
  font-family: "Open Sans", sans-serif; }

h1 {
  text-align: center;
  position: relative;
  font-size: 35vw;
  line-height: 1em;
  font-weight: 800;
  top: -.53125em;
  margin-top: 50vh;
  color: #86113d; }
  h1 span {
    letter-spacing: -.1em;
    display: inline-block;
    margin-right: .1em; }
  h1 b {
    font-weight: 800;
    display: inline-block;
    position: relative;
    width: 23vw;
    height: 23vw;
    line-height: .595em;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    color: #FFF;
    background-color: #bc275e; }

.wrapper {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  background: #000;
  overflow: hidden; }

.panel {
  -webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); }
  .panel.start {
    background-color: #FFF;
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0; }
    .panel.start.off {
      -moz-transform: translateX(-25%);
      -webkit-transform: translateX(-25%);
      -o-transform: translateX(-25%);
      -ms-transform: translateX(-25%);
      transform: translateX(-25%); }
  .panel.level, .panel.end {
    background-color: #bc275e;
    position: absolute;
    width: 107.692%;
    top: 0;
    bottom: 0;
    left: 0;
    margin: -7.692vw 0;
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -o-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%); }
    .panel.level.ready, .panel.end.ready {
      -moz-transform: translateX(85.7218%);
      -webkit-transform: translateX(85.7218%);
      -o-transform: translateX(85.7218%);
      -ms-transform: translateX(85.7218%);
      transform: translateX(85.7218%); }
    .panel.level.on, .panel.end.on {
      -moz-transform: translateX(-7.18%);
      -webkit-transform: translateX(-7.18%);
      -o-transform: translateX(-7.18%);
      -ms-transform: translateX(-7.18%);
      transform: translateX(-7.18%); }
    .panel.level.off, .panel.end.off {
      -moz-transform: translateX(-25%);
      -webkit-transform: translateX(-25%);
      -o-transform: translateX(-25%);
      -ms-transform: translateX(-25%);
      transform: translateX(-25%); }
  .panel.overview.i1 {
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -o-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%); }
  .panel.overview.i2 {
    -moz-transform: translateX(6.58974%);
    -webkit-transform: translateX(6.58974%);
    -o-transform: translateX(6.58974%);
    -ms-transform: translateX(6.58974%);
    transform: translateX(6.58974%); }
  .panel.overview.i3 {
    -moz-transform: translateX(13.17949%);
    -webkit-transform: translateX(13.17949%);
    -o-transform: translateX(13.17949%);
    -ms-transform: translateX(13.17949%);
    transform: translateX(13.17949%); }
  .panel.overview.i4 {
    -moz-transform: translateX(19.76923%);
    -webkit-transform: translateX(19.76923%);
    -o-transform: translateX(19.76923%);
    -ms-transform: translateX(19.76923%);
    transform: translateX(19.76923%); }
  .panel.overview.i5 {
    -moz-transform: translateX(26.35897%);
    -webkit-transform: translateX(26.35897%);
    -o-transform: translateX(26.35897%);
    -ms-transform: translateX(26.35897%);
    transform: translateX(26.35897%); }
  .panel.overview.i6 {
    -moz-transform: translateX(32.94872%);
    -webkit-transform: translateX(32.94872%);
    -o-transform: translateX(32.94872%);
    -ms-transform: translateX(32.94872%);
    transform: translateX(32.94872%); }
  .panel.overview.i7 {
    -moz-transform: translateX(39.53846%);
    -webkit-transform: translateX(39.53846%);
    -o-transform: translateX(39.53846%);
    -ms-transform: translateX(39.53846%);
    transform: translateX(39.53846%); }
  .panel.overview.i8 {
    -moz-transform: translateX(46.12821%);
    -webkit-transform: translateX(46.12821%);
    -o-transform: translateX(46.12821%);
    -ms-transform: translateX(46.12821%);
    transform: translateX(46.12821%); }
  .panel.overview.i9 {
    -moz-transform: translateX(52.71795%);
    -webkit-transform: translateX(52.71795%);
    -o-transform: translateX(52.71795%);
    -ms-transform: translateX(52.71795%);
    transform: translateX(52.71795%); }
  .panel.overview.i10 {
    -moz-transform: translateX(59.30769%);
    -webkit-transform: translateX(59.30769%);
    -o-transform: translateX(59.30769%);
    -ms-transform: translateX(59.30769%);
    transform: translateX(59.30769%); }
  .panel.overview.i11 {
    -moz-transform: translateX(65.89744%);
    -webkit-transform: translateX(65.89744%);
    -o-transform: translateX(65.89744%);
    -ms-transform: translateX(65.89744%);
    transform: translateX(65.89744%); }
  .panel.overview.i12 {
    -moz-transform: translateX(72.48718%);
    -webkit-transform: translateX(72.48718%);
    -o-transform: translateX(72.48718%);
    -ms-transform: translateX(72.48718%);
    transform: translateX(72.48718%); }
  .panel.overview.i13 {
    -moz-transform: translateX(79.07692%);
    -webkit-transform: translateX(79.07692%);
    -o-transform: translateX(79.07692%);
    -ms-transform: translateX(79.07692%);
    transform: translateX(79.07692%); }
  .panel.end.overview {
    -moz-transform: translateX(85.66667%);
    -webkit-transform: translateX(85.66667%);
    -o-transform: translateX(85.66667%);
    -ms-transform: translateX(85.66667%);
    transform: translateX(85.66667%); }
  .panel a {
    display: block;
    position: absolute;
    text-align: center;
    font-weight: 800;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    -webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
    -ms-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
    cursor: pointer;
    left: 1.35vw;
    font-size: 5vw;
    width: 5vw;
    height: 5vw;
    background-color: #FFF;
    color: #bc275e; }
    .panel a.next {
      line-height: .85em;
      bottom: 7.692vw;
      margin-bottom: 5vh; }
    .panel a.menu {
      line-height: .42em;
      bottom: 7.692vw;
      margin-bottom: 5vh; }
    .panel a.close {
      line-height: .645em;
      top: 7.692vw;
      margin-top: -20vh;
      font-size: 7vw; }
  .panel.level.overview a {
    left: 1.0vw; }
  .panel.end.overview a.close {
    margin-top: 5vh; }
  .panel.end.overview a.menu {
    margin-bottom: -20vh; }
  .panel.overview a.next {
    cursor: default;
    color: #FFF !important; }
  .panel.overview.falsch a.next {
    color: #000 !important;
    background-color: #000; }
  .panel.overview .inhalt {
    display: none; }
  .panel.overview.i13 .inhalt {
    display: block;
    -webkit-transition: opacity 10ms linear 1s;
    -moz-transition: opacity 10ms linear 1s;
    -ms-transition: opacity 10ms linear 1s;
    -o-transition: opacity 10ms linear 1s;
    transition: opacity 10ms linear 1s;
    opacity: 0; }
  .panel .inhalt {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100vw;
    margin: 7.692vw 0;
    -moz-transform-origin: 0 50%;
    -webkit-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
    -ms-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
    will-change: transform; }
  .panel .inhalt.gespielt {
    -moz-transform: scale(0.91);
    -webkit-transform: scale(0.91);
    -o-transform: scale(0.91);
    -ms-transform: scale(0.91);
    transform: scale(0.91); }
  .panel h2 {
    position: absolute;
    font-weight: 800;
    text-align: center;
    font-size: 15vw;
    line-height: 1em;
    width: 38.2%;
    top: 50vh;
    margin-top: -.5em;
    left: 0;
    color: #86113d; }
    .panel h2 span {
      letter-spacing: -.033em; }
    .panel h2 b {
      font-weight: 800;
      display: inline-block;
      margin-left: .125em; }
  .panel .feld {
    position: absolute;
    top: 50vh;
    left: 69.1vw;
    width: 96vm;
    width: 96vmin;
    height: 96vm;
    height: 96vmin;
    max-width: 59.328vw;
    max-height: 59.328vw;
    -moz-transform: translateX(-55%) translateY(-50%);
    -webkit-transform: translateX(-55%) translateY(-50%);
    -o-transform: translateX(-55%) translateY(-50%);
    -ms-transform: translateX(-55%) translateY(-50%);
    transform: translateX(-55%) translateY(-50%); }
    .panel .feld p {
      font-size: 4.5vw;
      line-height: 1.2em;
      display: block;
      overflow: hidden;
      margin: 0;
      text-align: center;
      color: rgba(255, 255, 255, 0.5); }
      .panel .feld p b {
        font-weight: 300;
        display: block;
        position: relative; }
      .panel .feld p b.fix10 {
        letter-spacing: -.15em;
        left: -.15em; }
      .panel .feld p.horizontal b {
        float: left;
        width: 9.0909%; }
    .panel .feld p.vertikal {
      float: left;
      width: 9.0909%; }
    .panel .feld .dots {
      position: absolute;
      top: 9.0909%;
      left: 9.0909%;
      right: 0;
      bottom: 0; }
      .panel .feld .dots s {
        display: block;
        position: absolute;
        width: 100%;
        top: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(255, 255, 255, 0);
        -webkit-transition: background 300ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition: background 300ms cubic-bezier(0.77, 0, 0.175, 1);
        -ms-transition: background 300ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition: background 300ms cubic-bezier(0.77, 0, 0.175, 1);
        transition: background 300ms cubic-bezier(0.77, 0, 0.175, 1); }
        .panel .feld .dots s.on {
          background-color: rgba(255, 255, 255, 0.5); }
      .panel .feld .dots i {
        display: block;
        float: left;
        width: 10%;
        height: 0;
        padding-top: 10%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        -moz-transform: scale(0.2);
        -webkit-transform: scale(0.2);
        -o-transform: scale(0.2);
        -ms-transform: scale(0.2);
        transform: scale(0.2);
        background-color: #86113d;
        -webkit-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
        -ms-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
        transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1); }
      .panel .feld .dots i.aktiv {
        -moz-transform: scale(0.9);
        -webkit-transform: scale(0.9);
        -o-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
        background-color: #fff;
        cursor: pointer; }
      .panel .feld .dots i.falsch {
        -moz-transform: scale(0.9);
        -webkit-transform: scale(0.9);
        -o-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
        background-color: #000 !important; }
      .panel .feld .dots i.display {
        background-color: #bc275e; }

@media screen and (min-aspect-ratio: 1830 / 1130) {
  .panel .feld p {
    font-size: 7.275vh; } }