@import url("//hello.myfonts.net/count/334210");
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline; }

article, aside, details, figcaption, figure, footer, header, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:after, blockquote:before, q:after, q:before {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

.clearfix:after {
  content: "";
  display: block;
  clear: both; }

img {
  width: 100%;
  max-width: 100%; }

@font-face {
  font-family: 'Mafra';
  src: url("webfonts/334210_0_0.eot");
  src: url("webfonts/334210_0_0.eot?#iefix") format("embedded-opentype"), url("webfonts/334210_0_0.woff2") format("woff2"), url("webfonts/334210_0_0.woff") format("woff"), url("webfonts/334210_0_0.ttf") format("truetype"); }
@font-face {
  font-family: 'Mafra';
  src: url("webfonts/334210_1_0.eot");
  src: url("webfonts/334210_1_0.eot?#iefix") format("embedded-opentype"), url("webfonts/334210_1_0.woff2") format("woff2"), url("webfonts/334210_1_0.woff") format("woff"), url("webfonts/334210_1_0.ttf") format("truetype");
  font-weight: 700; }
@font-face {
  font-family: 'BrandonGrotesque';
  src: url("webfonts/334210_2_0.eot");
  src: url("webfonts/334210_2_0.eot?#iefix") format("embedded-opentype"), url("webfonts/334210_2_0.woff2") format("woff2"), url("webfonts/334210_2_0.woff") format("woff"), url("webfonts/334210_2_0.ttf") format("truetype");
  font-weight: 700; }
@font-face {
  font-family: 'BrandonGrotesque';
  src: url("webfonts/334210_3_0.eot");
  src: url("webfonts/334210_3_0.eot?#iefix") format("embedded-opentype"), url("webfonts/334210_3_0.woff2") format("woff2"), url("webfonts/334210_3_0.woff") format("woff"), url("webfonts/334210_3_0.ttf") format("truetype"); }
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; }
  *:focus {
    outline: none; }

html, body {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0; }

body {
  overflow: hidden;
  font-family: 'Mafra', serif; }

.lineHeight13 {
  line-height: 1.3; }

.pt12 {
  font-size: 1rem;
  letter-spacing: 0.06em; }
  @media screen and (max-width: 65rem) {
    .pt12 {
      font-size: 0.85rem; } }
  @media screen and (min-width: 100rem) {
    .pt12 {
      font-size: 1.2rem; } }

.pt14 {
  font-size: 1.2rem; }
  @media screen and (max-width: 65rem) {
    .pt14 {
      font-size: 1rem; } }
  @media screen and (min-width: 100rem) {
    .pt14 {
      font-size: 1.4rem; } }

.pt19 {
  font-size: 1.5rem; }
  @media screen and (max-width: 75rem) {
    .pt19 {
      font-size: 1.3rem; } }
  @media screen and (max-width: 65rem) {
    .pt19 {
      font-size: 1.2rem; } }
  @media screen and (max-width: 28rem) {
    .pt19 {
      font-size: 1.1rem; } }
  @media screen and (min-width: 100rem) {
    .pt19 {
      font-size: 1.7rem; } }

.pt26 {
  font-size: 1.9rem; }
  @media screen and (max-width: 65rem) {
    .pt26 {
      font-size: 1.6rem; } }
  @media screen and (max-width: 28rem) {
    .pt26 {
      font-size: 1.4rem; } }
  @media screen and (min-width: 100rem) {
    .pt26 {
      font-size: 2.1rem; } }

.pt28 {
  font-size: 2.1rem; }
  @media screen and (max-width: 65rem) {
    .pt28 {
      font-size: 1.8rem; } }
  @media screen and (max-width: 28rem) {
    .pt28 {
      font-size: 1.6rem; } }
  @media screen and (min-width: 100rem) {
    .pt28 {
      font-size: 2.3rem; } }

.pt60 {
  font-size: 4.7rem; }
  @media screen and (max-width: 65rem) {
    .pt60 {
      font-size: 3rem; } }
  @media screen and (max-width: 36rem) {
    .pt60 {
      font-size: 2.5rem; } }
  @media screen and (min-width: 100rem) {
    .pt60 {
      font-size: 5.5rem; } }

.pt170 {
  font-size: 13rem; }
  @media screen and (max-width: 65rem) {
    .pt170 {
      font-size: 10rem; } }
  @media screen and (max-width: 43rem) {
    .pt170 {
      font-size: 8rem; } }
  @media screen and (max-width: 36rem) {
    .pt170 {
      font-size: 6rem; } }
  @media screen and (max-width: 28rem) {
    .pt170 {
      font-size: 4.5rem; } }
  @media screen and (max-width: 21rem) {
    .pt170 {
      font-size: 4rem; } }
  @media screen and (min-width: 100rem) {
    .pt170 {
      font-size: 15rem; } }

.serif {
  font-family: 'Mafra', serif; }

.sansSerif {
  font-family: 'BrandonGrotesque', sans-serif; }

.bold {
  font-weight: 700; }

.regular {
  font-weight: 500; }

.uppercase {
  text-transform: uppercase; }

.alignCenter {
  text-align: center; }

.flexbox {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%; }

.wrapper {
  background: #f3edef;
  position: absolute;
  top: 2rem;
  bottom: 2rem;
  left: 2rem;
  right: 2rem;
  overflow: auto; }
  @media screen and (max-width: 700px) {
    .wrapper {
      bottom: 1.5rem;
      left: 1rem;
      right: 1rem; } }

.close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0; }
  .close svg {
    transition: transform 0.5s ease-in-out; }
    .close svg line {
      fill: none;
      stroke: #3c3732;
      stroke-linecap: round;
      stroke-linejoin: round; }
  .close.animate svg {
    transform: rotate(45deg); }

#intro, #prolog, #epilog, #buttons, #videoBG, .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; }

#intro {
  z-index: 5;
  color: white;
  transition: opacity 0.8s ease-in-out 2s, z-index 0.1s linear 3s;
  overflow: hidden; }
  #intro .wrapper {
    background: #d20823;
    overflow: hidden; }
  #intro .inFuenfAkten, #intro .wurst, #intro .logo, #intro .introBg {
    position: absolute;
    z-index: 2;
    transition: all 0.8s ease-in-out 2s; }
  #intro .inFuenfAkten {
    top: 3%;
    left: 35%;
    width: 30%;
    line-height: 1.4; }
  #intro .wurst {
    width: 100%;
    top: 50%;
    line-height: 1;
    transform: translateY(-50%); }
  #intro .logo {
    left: 50%;
    width: 14rem;
    bottom: 5%;
    transform: translateX(-50%) translateY(0rem); }
    @media screen and (max-height: 600px) {
      #intro .logo {
        bottom: 3%; } }
    @media screen and (max-width: 700px) {
      #intro .logo {
        width: 10rem; } }
  #intro .introBg {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-image: url("introBg.jpg");
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat; }
  .hideIntroStep1 #intro .inFuenfAkten {
    top: calc(50vh + 6.5rem); }
    @media screen and (max-height: 600px) {
      .hideIntroStep1 #intro .inFuenfAkten {
        top: calc(50vh + 4rem); } }
    @media screen and (max-height: 400px) {
      .hideIntroStep1 #intro .inFuenfAkten {
        top: calc(50vh + 3rem); } }
  .hideIntroStep1 #intro .logo {
    transform: translateX(-50%) translateY(10rem);
    opacity: 0; }
  .hideIntroStep1 #intro .introBg {
    opacity: 0; }
  .hideIntroStep2 #intro {
    pointer-events: none;
    z-index: -1;
    opacity: 0; }

#prolog, #epilog {
  z-index: 4;
  transition: opacity 0.6s ease-in-out, z-index 0.1s linear 1s; }
  #prolog.normalFade, #epilog.normalFade {
    transition: opacity 0.6s ease-in-out; }
  #prolog .prologHeader, #epilog .prologHeader {
    position: absolute; }
  #prolog .spalten, #epilog .spalten {
    width: calc(4/6 * 100%);
    max-width: 75rem;
    max-height: 100%;
    overflow: auto; }
    @media screen and (max-width: 60rem) {
      #prolog .spalten, #epilog .spalten {
        width: 75%; } }
    @media screen and (max-width: 50rem) {
      #prolog .spalten, #epilog .spalten {
        width: 100%;
        padding: 3rem 12.5%; } }
    @media screen and (max-width: 40rem) {
      #prolog .spalten, #epilog .spalten {
        padding: 3rem 8.5%; } }
    #prolog .spalten .spalte, #epilog .spalten .spalte {
      display: inline-block;
      vertical-align: top;
      width: 50%; }
      #prolog .spalten .spalte.spalte1, #epilog .spalten .spalte.spalte1 {
        padding-right: 1rem; }
      #prolog .spalten .spalte.spalte2, #epilog .spalten .spalte.spalte2 {
        padding-left: 1rem; }
      @media screen and (max-width: 50rem) {
        #prolog .spalten .spalte, #epilog .spalten .spalte {
          display: block;
          width: 100%; }
          #prolog .spalten .spalte.spalte1, #epilog .spalten .spalte.spalte1 {
            padding-right: 0; }
          #prolog .spalten .spalte.spalte2, #epilog .spalten .spalte.spalte2 {
            padding-left: 0;
            margin-top: 1rem; } }
    #prolog .spalten p, #epilog .spalten p {
      text-indent: 1.2rem;
      display: inline-block; }
      #prolog .spalten p:first-child, #epilog .spalten p:first-child {
        text-indent: 0; }
  #prolog .prologHeader, #epilog .prologHeader {
    bottom: 5%;
    left: 40%;
    width: 20%; }

.hideProlog #prolog {
  opacity: 0;
  z-index: -1; }

#epilog {
  opacity: 0;
  pointer-events: none;
  z-index: 4; }
  #epilog .narrowText {
    display: block;
    width: 20em;
    margin: 0 auto;
    max-height: 100%;
    max-width: 85%; }

@media screen and (max-width: 50rem) {
  .narrowText, #epilog .narrowText {
    width: 100%;
    max-width: 100%;
    padding: 3rem 12.5%;
    overflow: auto; } }
@media screen and (max-width: 40rem) {
  .narrowText, #epilog .narrowText {
    padding: 3rem 8.5%; } }

#buttons {
  z-index: 3; }
  #buttons a {
    position: absolute;
    bottom: 50%;
    left: 50%; }
    #buttons a:link, #buttons a:visited {
      text-transform: uppercase;
      color: white;
      text-decoration: none; }
    #buttons a .beschriftung, #buttons a .linie {
      position: absolute;
      opacity: 0;
      transition: opacity 0.2s ease-in-out, transform 0.5s ease-out;
      pointer-events: none; }
    #buttons a .beschriftung.links {
      transform: translateX(-1rem); }
    #buttons a .beschriftung.rechts {
      transform: translateX(1rem); }
    #buttons a svg polyline {
      fill: none;
      stroke: #fff; }
    #buttons a svg text {
      fill: white;
      font-size: 70%; }
    @media screen and (min-width: 43rem) {
      #buttons a:hover svg {
        opacity: 1; }
      #buttons a:hover .beschriftung.links, #buttons a:hover .beschriftung.rechts {
        transform: translateX(0); } }
  .videoPlaying #buttons {
    pointer-events: none; }
  #buttons #flaschenButton {
    width: 5.2vh;
    height: 17%;
    transform: translateX(-23.2vh) translateY(5vh); }
    #buttons #flaschenButton svg {
      width: 21rem;
      right: 34%;
      top: -7.5rem;
      height: 8rem; }
  #buttons #plattenspielerButton {
    width: 23vh;
    height: 9%;
    transform: translateX(-16.5vh) translateY(6vh); }
    #buttons #plattenspielerButton svg {
      width: 31rem;
      left: -24.3rem;
      top: -10.5rem;
      height: 12rem; }
  #buttons #plattenstapelButton {
    width: 18vh;
    height: 9%;
    transform: translateX(10vh) translateY(6vh); }
    #buttons #plattenstapelButton svg {
      width: 25rem;
      right: -22.5rem;
      bottom: 3rem;
      height: 11rem; }
  #buttons #bilderButton {
    width: 36vh;
    height: 39vh;
    transform: translateX(1vw) translateY(-5vh); }
    #buttons #bilderButton svg {
      width: 26rem;
      left: -24rem;
      bottom: 47%;
      height: 9rem; }
  @media screen and (min-aspect-ratio: 16 / 9) {
    #buttons #flaschenButton {
      width: 3.2%;
      height: 21.5%;
      transform: translateX(-13.2vw) translateY(6vh); }
    #buttons #plattenspielerButton {
      width: 13%;
      height: 9%;
      transform: translateX(-9vw) translateY(6vh); }
    #buttons #plattenstapelButton {
      width: 10%;
      height: 9%;
      transform: translateX(5.5vw) translateY(6vh); }
    #buttons #bilderButton {
      width: 20%;
      height: 44%;
      transform: translateX(1vw) translateY(-7vh); } }

#videoBG {
  z-index: 2;
  overflow: hidden; }
  #videoBG video {
    position: absolute;
    top: -0.5vh;
    left: 50vw;
    transform: translateX(-50%);
    height: 101vh;
    width: calc( 101vh * 1.77 ); }
    @media screen and (min-aspect-ratio: 16 / 9) {
      #videoBG video {
        top: 50vh;
        left: 0;
        height: calc( 100vw * 1.77 );
        width: 100vw;
        transform: translateY(-50%); } }
  @media screen and (max-width: 700px) and (orientation: portrait) {
    #videoBG video {
      transform: rotate(90deg) translateY(-50%) translateX(-50%);
      transform-origin: 0 0;
      top: 50vh;
      left: 50vw;
      height: 101vw;
      width: calc( 101vw * 1.77 ); } }

#weinVideo, #platteVideo {
  z-index: -1; }

#wurstLogo {
  position: absolute;
  top: 1rem;
  z-index: 7;
  width: 30%;
  left: 35%;
  opacity: 0;
  pointer-events: none;
  font-size: 2rem;
  line-height: 1;
  text-shadow: 4px 4px 2px rgba(150, 150, 150, 0.3);
  color: white;
  letter-spacing: 0.03em;
  transition: opacity 0.4s ease-in-out 2s, font-size 0.2s ease-in-out, letter-spacing 0.2s ease-in-out; }
  .hideIntroStep2 #wurstLogo {
    opacity: 1;
    pointer-events: all; }
  #wurstLogo a:link, #wurstLogo a:visited, #wurstLogo a:hover, #wurstLogo a:focus {
    text-decoration: none;
    color: inherit; }
  #wurstLogo:hover {
    letter-spacing: 0.055em; }

.overlay {
  z-index: 4;
  transition: opacity 0.6s ease-in-out;
  opacity: 0;
  pointer-events: none; }
  .overlay.show {
    opacity: 1 !important;
    pointer-events: all !important; }
  .overlay.grau line, .overlay.rot line, .overlay.schwarz line {
    stroke: white; }
  .overlay.grau .wrapper {
    background: #3c3732; }
  .overlay.rot .wrapper {
    background: #d20823; }
  .overlay.schwarz .wrapper {
    background: #000; }

#menuOverlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out;
  z-index: 6;
  color: white; }
  #menuOverlay .wrapper {
    text-align: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: auto; }
    #menuOverlay .wrapper a:link, #menuOverlay .wrapper a:visited, #menuOverlay .wrapper a:hover, #menuOverlay .wrapper a:focus {
      text-decoration: none;
      color: white; }
    #menuOverlay .wrapper .mainNav li {
      padding-bottom: 0.75rem; }
      #menuOverlay .wrapper .mainNav li a {
        display: inline-block;
        line-height: 1;
        transition: letter-spacing 0.2s ease-in-out; }
        #menuOverlay .wrapper .mainNav li a .border {
          height: 2px; }
        #menuOverlay .wrapper .mainNav li a.topLevelNav:hover {
          letter-spacing: 0.07rem; }
    #menuOverlay .wrapper footer {
      position: absolute;
      bottom: 2rem;
      left: 0;
      right: 0;
      line-height: 1.6; }
      @media screen and (max-width: 600px) {
        #menuOverlay .wrapper footer {
          bottom: 1rem; } }
      @media screen and (max-height: 600px) {
        #menuOverlay .wrapper footer {
          bottom: 0.5rem; } }
      #menuOverlay .wrapper footer .links, #menuOverlay .wrapper footer .impressumContent {
        transition: max-height 0.4s ease-in-out;
        overflow: hidden; }
      #menuOverlay .wrapper footer .links {
        max-height: 4rem; }
        #menuOverlay .wrapper footer .links a {
          display: block;
          transition: letter-spacing 0.2s ease-in-out; }
          #menuOverlay .wrapper footer .links a:hover {
            letter-spacing: 0.03em; }
          @media screen and (max-height: 400px) {
            #menuOverlay .wrapper footer .links a {
              display: inline-block;
              margin: 0 2rem; } }
      #menuOverlay .wrapper footer .impressumContent {
        max-height: 0;
        padding: 0 1rem;
        background: #3c3732; }
        @media screen and (max-width: 600px) {
          #menuOverlay .wrapper footer .impressumContent {
            font-size: 0.75rem;
            line-height: 1.2; } }
      #menuOverlay .wrapper footer.showContent .links {
        max-height: 0;
        transition: max-height 0.2s ease-in-out; }
      #menuOverlay .wrapper footer.showContent .impressumContent {
        max-height: 50vh; }
    #menuOverlay .wrapper .close line {
      stroke: #fff; }
  .openMenu #menuOverlay {
    opacity: 1;
    pointer-events: all; }
  #menuOverlay #subMenu {
    max-height: 0;
    transition: all 0.2s ease-in-out;
    overflow: hidden; }
    #menuOverlay #subMenu.open {
      max-height: 4rem;
      padding: 0.75rem 0 1rem; }
      @media screen and (max-height: 600px) {
        #menuOverlay #subMenu.open {
          max-height: 3rem; } }
    #menuOverlay #subMenu li {
      display: inline-block;
      margin: 0 1rem; }
      #menuOverlay #subMenu li a {
        display: inline-block;
        line-height: 1.4; }
        #menuOverlay #subMenu li a .border {
          height: 1px; }

#downloadOverlay {
  color: white; }
  #downloadOverlay .textBlock {
    width: 13em;
    max-width: 100%;
    margin: 0 auto; }
  #downloadOverlay .buttons {
    margin-top: 4.5rem; }
    @media screen and (max-height: 600px) {
      #downloadOverlay .buttons {
        margin-top: 2rem; } }
    #downloadOverlay .buttons a {
      margin: 0 0.5rem 0.5rem;
      border: 1px solid white;
      padding: 1.7em 2.8em 1.35em;
      transition: all 0.2s ease-in-out;
      text-transform: uppercase;
      text-decoration: none;
      color: white;
      display: inline-block; }
      #downloadOverlay .buttons a:hover {
        box-shadow: inset 0 0 0 5px #fff; }

#galleryOverlay {
  pointer-events: none; }
  #galleryOverlay .siema {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1; }
    #galleryOverlay .siema * {
      height: 100%; }
    #galleryOverlay .siema .slide {
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      position: relative; }
      #galleryOverlay .siema .slide video {
        width: 100%;
        height: 100%; }
      #galleryOverlay .siema .slide .play {
        color: white;
        border: 1px solid white;
        display: inline-block;
        cursor: pointer;
        padding: 2rem 2.2rem 1.7rem;
        position: absolute;
        top: 50%;
        left: 50%;
        height: auto;
        transform: translateX(-50%) translateY(-50%);
        transition: all 0.2s ease-in-out; }
        #galleryOverlay .siema .slide .play:hover {
          box-shadow: inset 0 0 0 5px #fff; }
        #galleryOverlay .siema .slide .play.hide {
          opacity: 0; }
  #galleryOverlay .close {
    z-index: 2; }
  #galleryOverlay .controlsWrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: none; }
    #galleryOverlay .controlsWrapper .controls {
      position: absolute;
      top: 10%;
      bottom: 10%;
      left: 0;
      width: 30%;
      cursor: pointer; }
      #galleryOverlay .controlsWrapper .controls svg {
        position: absolute;
        top: 50%;
        left: 15%;
        transform: translateX(50%) translateY(-50%);
        width: 2.5rem;
        height: 4.7rem; }
        @media screen and (max-width: 700px) {
          #galleryOverlay .controlsWrapper .controls svg {
            left: 5%;
            width: 1.8rem;
            height: 3.5rem; } }
        #galleryOverlay .controlsWrapper .controls svg polyline {
          fill: none;
          stroke: #fff;
          stroke-width: 0.82px; }
      #galleryOverlay .controlsWrapper .controls.next {
        left: auto;
        right: 0;
        /*background-image: url('images/next.png');
        background-position: 85% center;*/ }
        #galleryOverlay .controlsWrapper .controls.next svg {
          left: auto;
          right: 15%;
          transform: translateX(-50%) translateY(-50%); }
          @media screen and (max-width: 700px) {
            #galleryOverlay .controlsWrapper .controls.next svg {
              right: 5%; } }
  #galleryOverlay.show .controlsWrapper .controls {
    pointer-events: all; }

#audioControls {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%); }
  @media screen and (max-width: 1024px) {
    #audioControls {
      bottom: 4rem; } }
  #audioControls.show {
    z-index: 3; }
  #audioControls > div {
    width: 2rem;
    height: 2rem;
    display: inline-block;
    margin: 0 0.4rem;
    cursor: pointer; }
  #audioControls svg {
    width: 100%;
    height: 100%; }
  #audioControls #titelListe {
    height: 1.65rem;
    position: relative;
    transition: all 0.2s ease-in-out, height 0.1s; }
    #audioControls #titelListe line {
      fill: none;
      stroke: #fff; }
    #audioControls #titelListe svg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      transition: all 0.2s ease-in-out; }
    #audioControls #titelListe #linie1 {
      transform-origin: 100% 0; }
    #audioControls #titelListe #linie3 {
      transform-origin: 100% 100%; }
    #audioControls #titelListe.open {
      height: 2rem;
      transform: translateX(-5px) translateY(2px); }
      #audioControls #titelListe.open #linie1 {
        transform: rotate(-45deg) translateY(4px); }
      #audioControls #titelListe.open #linie2 {
        opacity: 0; }
      #audioControls #titelListe.open #linie3 {
        transform: rotate(45deg) translateY(-4px); }
  #audioControls .playPause {
    height: 1.7rem; }
    #audioControls .playPause svg {
      fill: none;
      stroke: #fff; }
    #audioControls .playPause .play {
      display: none; }
    #audioControls .playPause.paused .pause {
      display: none; }
    #audioControls .playPause.paused .play {
      display: inline-block; }
  #audioControls #audioPlayer {
    display: none; }

#titelOverlay.show {
  z-index: 3; }
#titelOverlay .wrapper {
  background-color: transparent;
  color: white; }
#titelOverlay ul {
  text-align: center;
  max-height: 100%;
  overflow: auto; }
  #titelOverlay ul li {
    cursor: pointer; }
    @media screen and (max-height: 600px) and (orientation: landscape) {
      #titelOverlay ul li {
        display: inline-block;
        width: 31%; }
        #titelOverlay ul li:nth-child(1) {
          width: 25%; }
        #titelOverlay ul li:nth-child(2) {
          width: 25%; }
        #titelOverlay ul li:nth-child(3) {
          width: 45%; } }
    #titelOverlay ul li .titel {
      margin-top: 0.3em;
      margin-bottom: 1.5em;
      letter-spacing: 0.02em; }
      @media screen and (max-height: 800px) {
        #titelOverlay ul li .titel {
          margin-top: 0.15em; } }
      @media screen and (max-height: 700px) {
        #titelOverlay ul li .titel {
          margin-bottom: 1.2em; } }
    #titelOverlay ul li .subtitel {
      display: inline-block; }

.animatedBorder .border {
  max-width: 0;
  transition: all 0.3s ease-out;
  width: 100%;
  height: 1px;
  background-color: white;
  overflow: hidden;
  margin: -3px auto 0; }
.animatedBorder.activeSong .border, .animatedBorder.active .border, .animatedBorder:hover .border {
  max-width: 100%; }
.animatedBorder .subtitel .border {
  margin-top: 0; }

#kaufenOverlay .wrapper {
  padding-top: 6rem;
  overflow: auto; }
  @media screen and (max-height: 800px) {
    #kaufenOverlay .wrapper {
      padding-top: 4rem; } }
  @media screen and (min-height: 1200px) {
    #kaufenOverlay .wrapper {
      padding-top: 14rem; } }
  @media screen and (min-height: 1400px) {
    #kaufenOverlay .wrapper {
      padding-top: 20rem; } }
#kaufenOverlay h2 {
  margin-bottom: 2rem; }
#kaufenOverlay form {
  width: 25rem;
  max-width: 85%;
  margin: 0 auto;
  max-height: 35rem;
  overflow: hidden;
  transition: max-height 0.8s ease-in-out; }
  #kaufenOverlay form fieldset {
    margin: 0.5rem 0 1rem; }
    #kaufenOverlay form fieldset input {
      font-size: 1.2rem; }
  #kaufenOverlay form label {
    display: block;
    margin-bottom: 5px; }
  #kaufenOverlay form input {
    display: block;
    background: none;
    border: 1px solid #3c3734;
    padding: 7px 10px 3px;
    text-align: center;
    font-family: 'BrandonGrotesque', sans-serif;
    width: 100%;
    -webkit-appearance: none;
    border-radius: 0; }
    #kaufenOverlay form input.error {
      border: 1px solid red; }
  #kaufenOverlay form input[type=submit] {
    width: auto;
    margin: 2rem auto 0;
    padding: 1.5rem 2rem 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out; }
    #kaufenOverlay form input[type=submit]:hover {
      box-shadow: inset 0 0 0 5px #3c3734; }
  #kaufenOverlay form .plz, #kaufenOverlay form .ort {
    display: inline-block; }
  #kaufenOverlay form .plz {
    width: 30%;
    margin-right: 5%; }
  #kaufenOverlay form .ort {
    width: 65%; }
#kaufenOverlay #vinyl {
  display: block;
  width: 40rem;
  max-width: 100%;
  margin: 0 auto; }
#kaufenOverlay .feedback {
  max-height: 0;
  transition: all 0.2s ease-in-out 1s;
  overflow: hidden; }
#kaufenOverlay.formSubmitted form {
  max-height: 0; }
#kaufenOverlay.formSubmitted .feedback {
  max-height: 5rem;
  padding: 5px; }

@media screen and (max-width: 400px) {
  .notOnSmartphone {
    display: block; } }

#loadingScreen {
  pointer-events: none;
  transition: opacity 0.2s ease-in-out 0.2s, z-index 0.2s linear 0.4s; }
  #loadingScreen.hide {
    opacity: 0 !important;
    z-index: -1 !important; }
  #loadingScreen #loadingText {
    width: 6rem;
    height: 1.5rem; }

#introBGImg {
  opacity: 0;
  pointer-events: none;
  z-index: -5; }

.noBGVideo video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none; }

/*# sourceMappingURL=wurst.css.map */