/*TABLET CSS*/
/*Fonts============================*/
    @font-face {
      font-family: "PilowLava";
      src: url("../font/Pilowlava-Regular.woff2") format('woff');
    }

    @font-face {
      font-family: "SpaceGrotesk";
      src: url("../font/SpaceGrotesk[wght].woff2") format('woff');
    }



/*Typografie============================*/

    h1 {
      display: none;
      font-family: "PilowLava";
      font-size: 2.5vw;
    }

    p {

      margin: 0;

      font-family: "SpaceGrotesk";
      font-size: 2.5vw;
      color: white;

      filter: drop-shadow(5px 5px 7px rgba(0, 0, 0, 0.9));
    }

    .textEbene p {
      margin-top: 2vw;
    }

    p small {
      font-size: 2.5vw;
    }

    span {
      font-weight: 600;
    }
/*Body============================*/

    body {
      /*  background-image: url("../../img/testbild2.jpg");
      background-size: 100vw;
      background-position: center -15vw;*/

      margin: 0;
      position: relative;
    }


/*containerGesamt============================*/
    .containerGesamt{
      position: relative;
    }

/*anweisungEbene============================*/

/*anweisungEbene============================*/

    #anweisungEbene{
      position: absolute;
      display: flex;
      flex-wrap: wrap;
      align-content: start;
      justify-content: center;

      z-index: 2;

      width: 45vw;
      height: 50vw;

      margin-top: 35vw;
      padding-top: 2vw;
      padding-left: 3vw;
      margin-left:50vw;
    }

    .anweisungContainer{
      width: 25vw;
      margin-right: 0.5vw;
      margin-bottom: 3vw;

    }

    .anweisungIcon{
      height: 5vw;
      margin-bottom: 0.5vw;
    }


    #anweisungIconT{
      padding-top: 0.3vw;
      padding-bottom: 0.3vw;
      height: 4.4vw;
    }

    #anweisungIconUV{
      padding-top: 0.3vw;
      padding-bottom: 0.3vw;
      height: 4.4vw;
    }

    #anweisungIconPlay{
      padding-top: 0.3vw;
      padding-bottom: 0.3vw;
      height: 4.4vw;
    }



/*header============================*/

    header {
      display: flex;
      flex-wrap: wrap;

      position: absolute;
      z-index: 2;

      padding-top: 5vw;
      padding-left: 5vw;
      padding-bottom: 2.5vw;
    }

    .titelWrapper {
      display: flex   ;
      flex-wrap: wrap;

      width: 95vw;

      padding-bottom: 1.5vw;
      margin: auto;
    }

    .titelWort {
      max-height: 6.9vw;

      padding-bottom: 1vw;
      margin-right: 3vw;

      filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5))
    }

    #mit {
      margin-right: 0;
    }



/*buttonEbene============================*/

    /*buttonEbene____________________*/
    .buttonEbene  {
      display: flex;
      flex-wrap: wrap;
      justify-content: start;
      align-items: start;

      width: 95vw;

      padding-top: 0;
      margin-top: 0;
    }


    /*button____________________*/
        .button {
          display: inline-block;
          position: relative;
          z-index: 1;
          height: 5vw;
          width: 5vw;

          padding: 0;
          margin-left: 0;
          margin-right: 3vw;


          border: none;
          background: none;
        }

        /*marginLeft vom ersten Button entfernen*/
        #textButton {
          margin-left: 0;
        }



    /*glassmorphismn____________________*/
        .glassmorphism {
          backdrop-filter: blur(12px);
          position: relative;}

          @supports (background: -moz-element(#hintergrundBild)) and (not (backdrop-filter: blur(10px))) {
            .glassmorphism {
              position: relative;
            }
        .glassmorphism::before {
          background-attachment: fixed;
          background-image: -moz-element(#hintergrundBild);
          content: "";
          filter: blur(1px) saturate(65%) brightness(110%) opacity(40%); /* ADDED */
          position: absolute;
          left: 0; right: 0; top: 0; bottom: 0;
          z-index: -1;
        }
      }

      /*buttonContent____________________*/
          .buttonContent {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;

            z-index: 2;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            margin: 0;

            font-family: "SpaceGrotesk";
            font-weight: 300;
            font-size: 3vw;
            color: white;
            letter-spacing: 1px;
            text-decoration: none;
            text-transform: uppercase;
            overflow: hidden;

            background-color: hsla(0, 0%, 100%, 0.05);
            box-shadow: 2px 2px 12px 1px rgba(0, 0, 0, 0.3);
            border: 0.05px solid hsla(0, 0%, 97%, 0.4);
            border-top: 1px solid rgba(255, 255, 255, 0.8);
            border-left: 1px solid rgba(255, 255, 255, 0.6);
            border-radius: 0.25vw;

            cursor: Pointer;
            transition: all .3s ease-in-out;

            --buttonContentTranslateX: 0;
          }

          /*gradient1 erstellen, als Pseudoelement*/
              .buttonContent::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 50%;
                height: 100%;
                background:
                linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
                transform: skewX(40deg) translateX(var(--buttonContentTranslateX));
                transition: all .5s ease-out;
              }

          /*gradient1 vorher/nachher*/
              .button::before,
              .button::after {
                content: '';
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                height: 3vw;
                width: 3vw;
                border-radius: 0.25vw;
                transition: all .4s ease-in-out;
                transition-delay: 0s;
              }

              /*gradient2 erstellen, Pseudoelement*/
                  .buttonContent::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 50%;
                    height: 100%;
                    background:
                    linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
                    transform: skewX(40deg) translateX(var(--buttonContentTranslateX));
                    transition: all .5s ease-out;
                  }

                  /*gradient1 vorher/nachher*/
                      .button::before,
                      .button::after {
                        content: '';
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        height: 5vw;
                        width: 5vw;
                        border-radius: 0.25vw;
                        transition: all .4s ease-in-out;
                        transition-delay: 0s;
                      }





/*overlayEbene============================*/
    .overlayEbeneContainer {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;

      display: flex;
      flex-flow: column;
      position: absolute;

      width: 50vw;
      padding-left: 5vw;
      margin-left: 0;

      align-items: left;
      justify-content: left;
    }

/*textEbene============================*/
    .textEbene {
      margin: 0;
      width: 40vw;

      color: white;
    }


/*hintergrundEbene============================*/
    .hintergrundEbeneContainer {
      z-index: 1;
      position: relative;
    }

    .hintergrundSzene {
      height: 100%;
    }

    .a-enter-ar {
      display: none;
    }


/*audioPlayer============================*/

    .audioPlayer {
      width: auto;
    }

    .playerControls {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      flex-flow: row;


      justify-content: space-between;
      align-items: center;
    }

        #playAudio {
          -webkit-appearance: none;
          outline: none;
          cursor: pointer;
          border: none;
          background: none;

          margin-right: 1.5vw;
        }

        #seekObjContainer{
          position: relative;
          min-width: 59vw;
          height: 0.2vw;
          margin-right: 1vw;
        }

        #seekObjContainer #seekObj {
            position:relative;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.35);
          }

          #percentage {
              position: absolute;
              left: 0;
              top: 0;
              height: 100%;
              background-color: #f85f2d;
            }
          }

/* ENDE TABLET Ansicht */