*{
    --color-highlight: #f57d3c;
    --color-highlight-weg: #d82410;
}
@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 100;
    src: url(roboto/roboto-v30-latin-100.woff2) format("woff2"),url(roboto/roboto-v30-latin-100.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 300;
    src: url(roboto/roboto-v30-latin-300.woff2) format("woff2"),url(roboto/roboto-v30-latin-300.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    src: url(roboto/roboto-v30-latin-regular.woff2) format("woff2"),url(roboto/roboto-v30-latin-regular.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    src: url(roboto/roboto-v30-latin-500.woff2) format("woff2"),url(roboto/roboto-v30-latin-500.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    src: url(roboto/roboto-v30-latin-700.woff2) format("woff2"),url(roboto/roboto-v30-latin-700.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 900;
    src: url(roboto/roboto-v30-latin-900.woff2) format("woff2"),url(roboto/roboto-v30-latin-900.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 100;
    src: url(roboto/roboto-v47-latin-ext-100.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 300;
    src: url(roboto/roboto-v47-latin-ext-300.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    src: url(roboto/roboto-v47-latin-ext-500.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 900;
    src: url(roboto/roboto-v47-latin-ext-900.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    src: url(roboto/roboto-v47-latin-ext-regular.woff2) format("woff2")
}

:root {
    --size: 100px;
}

.app * {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    outline-color: transparent;
    outline-style: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* margin: 0;
    padding: 0;*/
}

.app *:focus {
    outline: none !important
}

:root {
    font-family: Roboto,"sans-serif";
    font-size: 16px;
    background-color: #00000000;
    color: #fff;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%
}

#app html, #app body {
    background-color: #000;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    touch-action: none
}

.waiting * {
    cursor: wait !important;
}

div, a, button {
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    -webkit-user-drag: none
}

.noselect, img, svg {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none
}

a:link, a:visited, a:hover, a:active {
    color: #fff;
    text-decoration: none
}

iframe {
    border-style: none;
    border: none;
    width: 100%;
    height: 100%
}

.app {
    width: 100vw;
    height: 100vh;
    height: 100svh;
    background-color: transparent;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    -webkit-overflow-scrolling: touch
}

.app #stage {
    width: 100vw;
    height: 100vh;
    height: 100svh;
    background-color: #000;
    padding: 0;
    margin: 0;
    /*
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    */
    overflow: hidden
}

.element {
    position: absolute;
    border: none;
    padding: 0;
    margin: 0;
    backface-visibility: hidden;
    transform-origin: 0px 0px;
    will-change: transform,opacity;
    transform: translateZ(0);
    /*  opacity: 0;*/
    /* visibility: hidden;*/
   /* pointer-events: none*/
}

#presentation {
    overflow: hidden;
    pointer-events: none;
   
}

    #presentation:has(.elementViewer.visible) {
       /* box-shadow: 1px 2px 10px #0006;*/
        pointer-events: auto;
    }
    #presentation .elementViewer {
        box-shadow: 1px 2px 10px #0006;
    }

#presentation iframe {
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px)
}

#presentation video {
    position: absolute;
    /*top: 0px;
    left: 0px;*/
   /* width: 100%;
    aspect-ratio:16/9;*/
}
    #presentation canvas {
        /*  position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        aspect-ratio: 16/9;*/
        max-height: 100%;
        max-width: 100%;
    }
    #presentation img:not(.navigationImage) {
    position: absolute;
   /* top: 0px;
    left: 0px;*/
   /* width: 100%;
    aspect-ratio: 16/9;*/
} #survey13, #survey17 {
    box-shadow: 1px 2px 10px #0006;
    background-color: #fff
} iframe.r7s34vn4pala6 {
    border-style: none;
    border: 0;
    width: 100%;
    height: 100%
} .subtitleContainer {
    /*visibility: hidden;*/
    display: flex;
    justify-content: center;
} .subtitleContainer div {
    background-color: #000;
    color: #fff;
    border: 0px solid transparent;
    border-radius: 7px;
    font-family: "Roboto", "sans-serif";
    font-weight: 500;
    text-align: center;
    padding: 5px 15px;
} .subtitle {
    position: absolute;
    border: none;
    padding: 0;
    margin: 0;
    backface-visibility: hidden;
    transform-origin: 0px 0px;
    will-change: transform,opacity;
    transform: translateZ(0);
    visibility: visible;
    width: 100%;
    z-index: 6;
    opacity: 1;
    pointer-events: none !important;
    font-size: 12px;
    bottom: 5px;
} .subtitleContainer.rfx49a81n61csu.rfx49a81n61csu {
    display: flex;
    justify-content: center
} .subtitleContainer.rfx49a81n61csu div.rfx49a81n61csu {
    background-color: #000;
    color: #fff;
    border: 0px solid transparent;
    border-radius: 7px;
    font-family: Roboto,"sans-serif";
    font-weight: 500;
    text-align: center;
    padding: 5px 15px
} #controls {
    pointer-events: none;
} 
  #controls.never, #controls.demand{
      display:none
  }
  .menu.rmez9va1dl7oa3.rmez9va1dl7oa3 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    z-index: 100000;
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity:0;
} .menu button {
    pointer-events: auto;
}
/*.horizontal.rmez9va1dl7oa3.rmez9va1dl7oa3 {
    transform-origin: center top;
    flex-direction: row;
    width: 100%;
    opacity: 1;
}
.vertical.rmez9va1dl7oa3.rmez9va1dl7oa3 {
    transform-origin: left center;
    flex-direction: column;
    height: 100%;
    opacity: 1;
}*/
button.rmez9va1dl7oa3.rmez9va1dl7oa3 {
    background-color: #fff;
    color: #71727c;
    fill: #71727c;
    border: 0px solid transparent;
    border-radius: 18%;
    cursor: pointer;
    font-family: Roboto,"sans-serif";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    margin: calc(var(--size) * .06);
    appearance: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: var(--size);
    height: var(--size);
    box-shadow: 1px 1px 10px #00000026;
    -webkit-box-shadow: 1px 1px 10px rgba(0,0,0,.15);
    -moz-box-shadow: 1px 1px 10px rgba(0,0,0,.15);
    transition: border-radius .2s ease-in-out
} button.rmez9va1dl7oa3.rmez9va1dl7oa3:hover {
        animation: .4s 1 normal rmez9va1dl7oa3-slidein
    } @keyframes rmez9va1dl7oa3-slidein {
    25% {
        background-color: #f3f3f3;
        color: #303035;
        fill: #303035
    }
} button.rmez9va1dl7oa3.rmez9va1dl7oa3:active {
    box-shadow: 2px 2px 2px #0000004d inset;
    -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.3) inset;
    -moz-box-shadow: 2px 2px 2px rgba(0,0,0,.3) inset
} button.rmez9va1dl7oa3 svg.rmez9va1dl7oa3 {
    opacity: 0;
    transform-origin: center;
    transition: opacity .12s ease-in-out 0s;
    position: absolute;
    transform: translate(-50%,-50%)
} button.rmez9va1dl7oa3:active svg.rmez9va1dl7oa3 {
    transform: translate(-50%,-50%) scale(.9)
} button.rmez9va1dl7oa3 svg.visible.rmez9va1dl7oa3 {
    opacity: 1;
    transition: opacity .12s ease-in-out .08s
} button.hide.rmez9va1dl7oa3.rmez9va1dl7oa3 {
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none
}
.playMenu.horizontal .playBtn, .playMenu.vertical .playBtn {
    border-radius: 0!important
}
.playMenu.horizontal .menuBtn, .playMenu.vertical .menuBtn, .playMenu.horizontal .closeBtn, .playMenu.vertical .closeBtn {
    border-radius: 50% !important
}
.playMenu.horizontal .langBtn {
    border-radius: 25% 0 0 25% !important
}
.playMenu.vertical .langBtn {
    border-radius: 25% 25% 0 0 !important
}
.playMenu.horizontal .fwdBtn {
    border-radius: 0 25% 25% 0 !important
}
.mobileBtn{
    display: none;
}
.mobile .mobileBtn {
    display: block;
    z-index: 1;
}
.mobile button {
    position: absolute;
}
.menu.mobile {
    justify-content: left !important;
}

.menu.mobile.opened {
    justify-content: center !important;
}
    .menu.mobile.opened button {
        position: relative;
    }
.mobileBtnClosed {
    opacity: 1!important;
}
.opened .mobileBtnClosed {
    opacity: 0 !important;
}
 .mobileBtnOpen {
    opacity: 0;
}
.opened .mobileBtnOpen {
    opacity: 1 !important;
}  
.playMenu.vertical .fwdBtn {
    border-radius: 0 0 25% 25% !important
} .menuIcn.rmez9va1dl7oa3.rmez9va1dl7oa3 {
    width: calc(var(--size) * .35);
    height: calc(var(--size) * .35)
} .backIcn.rmez9va1dl7oa3.rmez9va1dl7oa3 {
    width: calc(var(--size) * .35);
    height: calc(var(--size) * .35)
} .playIcn.rmez9va1dl7oa3.rmez9va1dl7oa3, .pauseIcn.rmez9va1dl7oa3.rmez9va1dl7oa3 {
    width: calc(var(--size) * .32);
    height: calc(var(--size) * .32)
} .docsIcn.rmez9va1dl7oa3.rmez9va1dl7oa3 {
    width: calc(var(--size) * .46);
    height: calc(var(--size) * .46)
} .mailIcn.rmez9va1dl7oa3.rmez9va1dl7oa3, .closeIcn.rmez9va1dl7oa3.rmez9va1dl7oa3, .fwdIcn.rmez9va1dl7oa3.rmez9va1dl7oa3, .rwdIcn {
    height: calc(var(--size) * .4);
    width: calc(var(--size) * .4)
}
.restartIcn.rmez9va1dl7oa3.rmez9va1dl7oa3, .mobileBtnClosed {
    height: calc(var(--size) * .43);
    width: calc(var(--size) * .43)
} .langIcn.rmez9va1dl7oa3.rmez9va1dl7oa3, .muteIcn.rmez9va1dl7oa3.rmez9va1dl7oa3 {
    height: calc(var(--size) * .69);
    width: calc(var(--size) * .69)
} .fullscreenIcn.rmez9va1dl7oa3.rmez9va1dl7oa3 {
    width: calc(var(--size) * .72);
    height: calc(var(--size) * .72)
} #expertIcn.rmez9va1dl7oa3.rmez9va1dl7oa3 {
    width: calc(var(--size) * .43);
    height: calc(var(--size) * .43);
    display: none
} .dark.menu.rmez9va1dl7oa3.rmez9va1dl7oa3 {
    color: #fff
} .dark.rmez9va1dl7oa3 button.rmez9va1dl7oa3 {
    background-color: #494a50;
    color: #ddd;
    fill: #ddd;
    box-shadow: 1px 1px 3px #00000080,-1px -1px 1px #ffffff80;
    -webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,.5),-1px -1px 1px 0px rgba(255,255,255,.5);
    -moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,.5),-1px -1px 1px 0px rgba(255,255,255,.5)
} .dark.rmez9va1dl7oa3 button.rmez9va1dl7oa3:hover {
    background-color: #242529;
    color: #fff;
    fill: #fff
} .dark.rmez9va1dl7oa3 button.rmez9va1dl7oa3:active {
    box-shadow: 2px 2px 2px #000 inset;
    -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,1) inset;
    -moz-box-shadow: 2px 2px 2px rgba(0,0,0,1) inset
}
    #background {
    display:none;
}
        #background:has(.visible) {
            display: block;
        }
    #background img, #background iframe, #background video {
    height: 100%;
    position: absolute;
    border: none;
    padding: 0;
    margin: 0;
    backface-visibility: hidden;
} #background img, #background video /*#background iframe not working if it's translated, because parent is full screen 0,0*/ {
    transform-origin: 0px 0px;
    transform: translate(-50%,-50%)
} .btn-start {
    margin: 0;
    padding: 0 0 0 7px;
    background-color: #fff;
    border: 1px solid #71727c;
    border-radius: 60px;
    width: 120px;
    height: 120px;
    justify-content: center;
    justify-items: center;
    align-items: center;
    display: flex;
    position: absolute;
    cursor: pointer;
    left: calc(50% - 60px);
    top: calc(50% - 60px);
    z-index: 1100;
    transition: border .2s ease-in-out
} .btn-start:hover {
    border: 1px solid black
} .btn-start svg path {
    fill: #71727c;
    transition: fill .2s ease-in-out
} .btn-start:hover svg path {
    fill: #000
} .loaderWrapper {
    width: 100px;
    height: 100px;
    margin: 0;
    padding: 9px;
    background-color: #fff;
    border: 1px solid #71727c;
    border-radius: 60px;
    position: absolute;
    left: calc(50% - 60px);
    top: calc(50% - 60px);
    z-index: 1001;
    justify-content: center;
    justify-items: center;
    align-items: center;
    display: flex
} .loaderWrapper h3 {
    position: absolute;
    color: #71727c;
    text-align: center;
    padding: 4px 0 0 6px
} .loader {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    animation: 1s linear infinite normal loaderanimation
} @keyframes loaderanimation {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
} .blur {
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-backdrop-filter: blur(10px) brightness(.7);
    backdrop-filter: blur(10px) brightness(.7);
    z-index: 1000;
    background-color: transparent;
    transition: opacity .3s ease-in-out 0s,visibility 0s ease-in-out .3s,pointer-events 0s ease-in-out .3s
}
.select-wrapper {
    text-align: center;
}
.mode-select{
    min-height:150px;
}
.language-select, .mode-select, .mic-select {
    margin: 0;
    padding: 0;
    background-color: #fff;
    border: none;
    border-radius: 8px;
    width: 300px;
    /*height: 160px;*/
    padding: 20px 0;
    justify-content: center;
    justify-items: center;
    align-items: center;
    flex-direction: column;
    display: flex;
    position: absolute;
    left: calc(50% - 150px);
    top: calc(50% - 80px);
    z-index: 1500;
    color: #71727c
}
    .language-select h2, .mode-select h2, .mic-select h2 {
        margin: 0;
        padding: 0;
        font-size: 24px;
        font-weight: 700
    } .language-select label {
    padding: 5px 0 15px;
    font-size: 18px;
    font-weight: 400;
    display: block;
}
    .language-select button, .mode-select button, .mic-select button {
        color: #fff;
        background-color: #71727c;
        padding: 12px 22px;
        border: none;
        border-radius: 6px;
        margin: 0 6px;
        cursor: pointer;
        font-size: 16px
    }
    .language-select select, .mic-select select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        text-indent: .01px;
        text-overflow: "";
        -ms-word-break: normal;
        word-break: normal;
        outline: none;
        box-shadow: none;
        color: #fff;
        background: #71727c url("data:image/svg+xml,%3Csvg%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%201L5%208h10l-5-7zm0%2018l5-7H5l5%207z%22%2F%3E%3C%2Fsvg%3E ") no-repeat right 5px center/15%;
        padding: 12px 42px 12px 22px;
        border: none;
        border-radius: 6px;
        margin: 0 6px;
        cursor: pointer;
        font-size: 16px
    }
        .language-select select::-ms-expand, .mic-select select::-ms-expand {
            display: none
        }
    .language-select option, .mic-select option {
        font-weight: 400;
        display: block;
        white-space-collapse: collapse;
        text-wrap: nowrap;
        min-height: 30px;
        padding: 5px;
        margin: 5px
    }

.mic-select {
    width:unset;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.mode-wrapper{
    margin-bottom:15px;
}
.modeSelector {
    text-align: center;
    margin-top: 15px;
}.navigation {
    font-size: 16px;
    box-sizing: border-box;
    font-family: Roboto,"sans-serif";
    color: #555;
    margin: 0;
    padding: 0;
    background-color: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease-in-out 0s,visibility 0s ease-in-out .3s,pointer-events 0s ease-in-out .3s;
    width: 100%;
    height: 100%
} .navigation.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transition: opacity .3s ease-in-out 0s,visibility 0s ease-in-out 0s,pointer-events 0s ease-in-out 0s
}
nav {
    background-color: #000000d1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: visible;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(168,173,179,.5) transparent;
    z-index: 1101;/*998;*/
} nav::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent
} nav::-webkit-scrollbar-thumb {
    border: 4px solid rgba(0,0,0,0);
    background-clip: padding-box;
    border-radius: 32px;
    background-color: #a8adb380
} nav::-webkit-scrollbar-thumb:hover {
    border: 2px solid rgba(0,0,0,0);
    background-color: #a8adb3
} nav::-webkit-scrollbar-track {
    background: transparent
} nav.downloads ul li a, nav.downloads ul li span, nav.downloads ul li div {
    font-family: Roboto,sans-serif;
    font-style: normal;
    display: block;
    font-weight: 400;
    font-size: 22px;
    text-decoration: none;
    padding: 20px 0 10px;
    text-align: center;
    color: #fff;
    text-transform: none;
    transition: all .2s ease-in-out;
    text-shadow: 1px 1px 2px rgba(0,0,0,.5);
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
} nav.navigations ul li a, nav.navigations ul li span, nav.navigations ul li div {
    display: block;
    font-size: 1.8rem;
    text-decoration: none;
    padding: 20px 0;
    text-align: left;
    color: #fff;
    font-weight: 400;
    text-transform: uppercase;
    transition: all .2s ease-in-out;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between
}
    nav.navigations ul li div:empty {
        padding:0;
    }nav.subtitles ul li a, nav.subtitles ul li span, nav.subtitles ul li div {
        display: block;
        font-size: 1.6em;
        text-decoration: none;
        padding: 10px 0;
        text-align: center;
        color: #fff;
        font-weight: 400;
        text-transform: uppercase;
        transition: all .2s ease-in-out;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
        cursor: pointer;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center
    } nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 50%;
    top: 170px;
    transition: all .3s ease-in-out;
    transform: translate(-50%);
    width: 540px
} nav ul li {
    transform: translateY(50px);
    opacity: 0
} nav ul li a, nav ul li div {
    cursor: pointer
} nav ul li span.headline {
    font-weight: 700;
    font-size: 32px;
    padding: 50px 0 10px
} nav ul li span.docDesc {
    font-weight: 300;
    font-size: 15px;
    padding: 0 0 10px
} nav ul li a:hover, nav ul li div:hover {
        color: var(--color-highlight);
        margin-left: 10px
    } nav ul li.selected a, nav ul li.selected div {
        color: var(--color-highlight);
    } nav ul li a:hover:before, nav ul li div:hover:before {
        background-color: var(--color-highlight);
        
    } nav ul li a.default:before, nav ul li a.pdf:before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path fill='%23ffffff' d='M18,15v3H6v-3H4v3c0,1.1,.9,2,2,2h12c1.1,0,2-.9,2-2v-3H18z M13,10.2V4h-2v6.2 M7.5,10.2L12,16l4.5-5.8'/></svg>")
} nav ul li a.vid:before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path fill='%23ffffff' d='M20,4H4C2.9,4,2,4.9,2,6v12c0,1.1,.9,2,2,2h16c1.1,0,2-.9,2-2V6C22,4.9,21.1,4,20,4z M9.5,16.5v-9l7,4.5L9.5,16.5z'/></svg>");
    background-size: auto 22px
} nav ul li a.url:before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='490.2' height='490.2'><path fill='%23ffffff' d='M434.3,254.2v126.3c0,29.7-24.1,53.8-53.8,53.8H109.6c-29.7,0-53.8-24.1-53.8-53.8V109.7c0-29.7,24.1-53.8,53.8-53.8H236V0 H109.6C49.2,0,0,49.2,0,109.6v270.9C0,441,49.2,490.2,109.6,490.2h270.9c60.4,0,109.6-49.2,109.6-109.6V254.2H434.3z'/><path fill='%23ffffff' d='M490.2,0h-170c-1.7,0-3.2-.3-4.8,0L383,67.7l-164,164.2l39.4,39.4l164.1-164.1l67.7,67.7V0z'/></svg>");
    background-size: auto 16px
} nav ul li a.zip:before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='75' height='88'><path fill='%23ffffff' d='M45.2,8.9c-.8,0-1.4-.1-2-.1c-9.5,0-19.1,0-28.6,0c-3.5,0-4.6,1.1-4.6,4.6c0,9.5,0,19.1,0,28.6c0,.6,0,1.2,0,1.8 c-2.4,0-4.6,0-7,0c0-.6,0-1.1,0-1.7c0-9.6,0-19.2,0-28.7C3,6.1,7.4,1.8,14.6,1.8c11.4,0,22.8,0,34.1,0c0.8,0,1.8,.4,2.4,1 c7.1,7,14.1,14,21.1,21.1c0.5,.5,1,1.3,1,1.9c0.1,5.8,0,11.5,0,17.3c0,.2-.1,.4-.1,.7c-2.2,0-4.5,0-6.8,0c0-4.6,0-9.2,0-13.9 c-7.1,0-14,0-21.1,0C45.2,22.9,45.2,15.9,45.2,8.9z M52.3,14.1c0,2.9,0,5.7,0,8.6c2.9,0,5.7,0,8.6,0C58,19.8,55.2,17,52.3,14.1z'/><path fill='%23ffffff' d='M16.8,56.5c-4.7,0-9.1,0-13.7,0c0-2.3,0-4.6,0-6.9c7.7,0,15.4,0,23.2,0c-.1,3.1,.4,6.1-1.7,9c-4,5.7-7.3,11.4-11,17.3 c-.3,.5-.6,1-1.1,1.8c4.7,0,9.1,0,13.7,0c0,2.4,0,4.7,0,7c-7.7,0-15.3,0-23.2,0c0.1-2.8-.6-5.6,1.2-8.3 c4.1-6.1,7.7-12.1,11.5-18.2C16.1,57.7,16.4,57.2,16.8,56.5z'/><path fill='%23ffffff' d='M50,49.7c4.6,0,9.3-.4,13.9,.1c5.7,.6,9.7,5.9,9.3,11.1c-.4,5.2-5.3,9.5-11.1,9.7c-1.4,.1-2.9,0-4.4,0 c0,4.7,0,9.3,0,14c-2.6,0-5,0-7.6,0C50,73.1,50,61.4,50,49.7z M57.6,63.5c1.6,0,3.1,.1,4.5,0c1.9-.2,3.1-1.6,3.1-3.3 c0-1.8-1.2-3.3-3.1-3.5c-1.5-.2-3.1,0-4.6,0C57.6,59,57.6,61.2,57.6,63.5z'/><path fill='%23ffffff' d='M34.3,49.6c2.5,0,5,0,7.5,0c0,11.7,0,23.4,0,35.1c-2.5,0-4.9,0-7.5,0C34.3,73,34.3,61.4,34.3,49.6z'/></svg>");
    background-size: auto 19px
} nav.active ul {
    top: 30px;
    padding-bottom: 60px
} nav.active ul li {
    transform: translateY(0);
    opacity: 1;
    transition: all .3s ease-in-out;
    transition-delay: calc(var(--n) * .1s);
    border-top: 1px solid #aaaaaa
} nav.active ul li:has(div) > a:after {
    color: #ffffff;
    content: '▾'
} nav.active ul li:has(li) > a:after {
    transform: rotate(180deg);
} nav.active ul li:last-of-type {
    border-bottom: 1px solid #aaaaaa
} nav.active ul li li, nav.active ul li li:last-of-type {
    border: none
}
    /*one level deep*/
    nav.active ul li li a, nav.active ul li li div {
        font-size: 1.2rem;
        text-transform: none;
        padding: 0 0 20px 10px
    }
    /*2 level deep*/
    nav.active ul li li li a, nav.active ul li li li div {
        font-size: 1.2rem;
        text-transform: none;
        padding: 0 0 20px 20px
    }
    /*3 level deep*/
    nav.active ul li li li li a, nav.active ul li li li li div {
        font-size: 1.2rem;
        text-transform: none;
        padding: 0 0 20px 30px
    }
.toggle-btn {
    display: block;
    position: fixed;
    z-index: 1102;/* 999;*/
    right: 10px;
    top: 10px;
    cursor: pointer;
    background-color: #fff;
    border-radius: 50%;
    padding: 7px 10px;
    transition: background-color .2s ease-in-out;
    transform-origin: right top;
    transform: scale(1.2)
} .toggle-btn:hover {
    background-color: #f3f3f3
} .toggle-btn .bar {
    width: 30px;
    height: 4px;
    margin: 6px auto;
    background-color: #71727c;
    transition: background-color .2s ease-in-out
} .toggle-btn:hover .bar {
    background-color: #303035
} .toggle-btn .bar:nth-child(1) {
    transform: translateY(10px) rotate(45deg)
} .toggle-btn .bar:nth-child(2) {
    opacity: 0;
    visibility: hidden
} .toggle-btn .bar:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg)
}
.elementViewer {
    opacity: 0;
    pointer-events: none;
    
}
  .elementViewer.visible {
    opacity: 1;
    pointer-events: auto
} .elementViewer.fadeMode.visible {
    transition: opacity .5s ease-in-out 0s;
}
canvas.elementViewer.visible {
    opacity: .998;
 
}
  /*canvas.elementViewer.visible {
    transition: opacity .5s ease-in-out 0s;
    opacity: .998;*/
/*    pointer-events: auto manu:why?? i need it gone, so background can be clicked*/
/*}*/ 
/*#sweep .elementViewer {
    position: absolute;
    width: 100%;
    height: 100%
}*/
.elementViewer.fadeMode {
        transition: opacity .5s ease-in-out 0s;
    }

    .fadeMode .elementViewer{
        transition: opacity .5s ease-in-out 0s;
    }
.fadeMode .elementViewer.visible {
    transition: opacity .5s ease-in-out 0s;
} 
    #presentation .navigationWrapper {
    position: absolute;
    width: 100%;
    height: 100%
} .optionwrapper {
    cursor: pointer
} .overlayControlDivs {
    position: absolute !important;
    cursor: pointer;
    z-index: 9999;
    pointer-events:all;
} @media only screen and (max-width:767px) {
        nav .active ul {
        top: 80px
    }

    nav ul {
        width: 90%;
        max-width: 540px
    }

    nav.navigations ul li a,
    nav.navigations ul li span,
    nav.navigations ul li div {
        font-size: 1.4rem
    }
    
    }
.mainVideo, .mainVideo canvas, .mainVideo video {
    pointer-events: none !important;
    /*transition: all 0.5s linear;*/
} #svg_2 {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
} #svg_2.off {
        animation: dashOff 0.8s;
        animation-fill-mode: both;
    } #svg_2.on {
        animation: dashOn 0.8s;
        animation-fill-mode: both;
    } @keyframes dashOff {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
} @keyframes dashOn {

    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 1000;
    }
} #timeline-button {
   position:relative;
  
} .timeline-svg {
    position: absolute;
    top: -5px;
    left: -5px;
    width: calc(100% - var(--size)* .06);
    height: calc(100% - var(--size)* .06);
    border-radius: 18%;
} .timeline-path {
    stroke: red;
    stroke-width: 10;
    fill: none;
    stroke-dasharray: 370; /* Circumference of the border (approx 2 * π * radius for a 50px radius circle) */
    stroke-dashoffset: 370;
    transition: stroke-dashoffset 0.5s linear;
}

#rotateDevice {
    color:black;
    display: none;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    position: fixed;
    z-index: 10022;
    align-items: center;
    justify-content: center;
    font-family: Speedee,Helvetica,Arial,sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 100%;
    flex-direction: column;
    gap: 20px;
    top: 0;
}

    #rotateDevice img {
        width: 10vw;
    }

.video-clip {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: end;
    justify-content:center;
}
.mainVideo.top .video-clip {
    align-items: start;
}
.mainVideo.fullscreen .video-clip {
    align-items: center;
}
/*#sweep {
    position: absolute
}

    #sweep video, #sweep canvas {
        width: 100%;
    }*/

.navigationWrapperOverlay {
    position: absolute !important;
    z-index: 1000 !important;
    cursor:pointer;
}
    .navigationWrapperOverlay img {
        width: 100%;
    }

#mainVideo, #mainVideoSwitch {
   /* width: 100%;*/
    /*height: 100%;*/
    position: absolute;
  /*  max-height: 100%;*/
   
}
 #canvas {
    /*width: 100%;*/
    /*height: 100%;*/
    position: absolute;
    max-height: 100%;
    max-width: 100%;
}
#waitForSession{
    width:80%;
    text-align:center;
}
#micBtn {
    border: 0;
    border-radius: 20vw;
    width: min(15vw,10vh);
    height: min(15vw,10vh);
    background-color: rgba(255, 255, 255, 0.4);
    background-size: 50% auto;
    background-repeat: no-repeat;
    background-position: center;
    color: #000000;
    cursor: pointer;
    z-index: 50;
    bottom: 3vh;
    position: absolute;
    right:  5vh;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    /* background-image: url('../img/micIcn.svg');*/
    pointer-events: auto;
    background-image: url("data:image/svg+xml,%3Csvg id='Ebene_1' data-name='Ebene 1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 830.3 830.3'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23000; stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M275.1,512.4c.2.2.3.5.5.7,32.3,47.3,85.2,72.3,139.6,72,54.4.3,107.3-24.8,139.6-72,.2-.2.3-.5.5-.7.5-.7.9-1.4,1.4-2.1,18.2-27.4,28.4-60.3,28.4-95.4v-237c0-35.1-10.1-68-28.4-95.4-.5-.7-.9-1.4-1.4-2.1-.2-.2-.3-.5-.5-.7C522.4,32.5,469.5,7.4,415.1,7.7c-54.4-.3-107.3,24.8-139.6,72-.2.2-.3.5-.5.7-.5.7-.9,1.4-1.4,2.1-18.2,27.4-28.4,60.3-28.4,95.4v237c0,35.1,10.1,68,28.4,95.4.5.7.9,1.4,1.4,2.1h.1ZM415.1,76.1c24.9,0,49.8,9.2,69.4,26.2,20.1,18.4,32.5,45.1,32.5,75.6v237c0,30.5-12.3,57.2-32.5,75.6-19.6,17-44.5,26.2-69.4,26.2s-49.8-9.2-69.4-26.2c-20.1-18.4-32.5-45.1-32.5-75.6v-237c0-30.5,12.3-57.2,32.5-75.6,19.6-17,44.5-26.2,69.4-26.2h0Z'/%3E%3Cpath class='cls-1' d='M686.7,381.5c-8.2.8-13.5,1.7-18.7,4.8-9.6,5.6-15.3,13.1-15.3,29.2s-2.1,32.2-4.7,48.3c-22,108.6-82.3,189.1-233,189.1s-210.6-80.5-232.6-189.1c-2.6-16.1-4.7-32.2-4.7-48.3s-5.7-23.6-15.3-29.2c-5.2-3.1-11.5-4.8-18.7-4.8-20.3,0-33.9,13.5-33.9,33.9,0,105.2,52.4,198,134.3,252.6,28.9,20.4,58.6,34,93.1,42.6,13.6,3.4,30.5,6.8,44.1,6.8v71.3c0,20.3,13.5,33.9,33.9,33.9s33.9-13.6,33.9-33.9v-71.3c13.6,0,30.5-3.4,44.1-6.8,34.4-8.6,64-22.1,92.8-42.4,0,0,.2,0,.3-.2,81.9-54.6,134.3-147.4,134.3-252.6-2-36.2-33.9-33.9-33.9-33.9Z'/%3E%3C/svg%3E");
}


    #micBtn.muted
     {
        background-image: url("data:image/svg+xml,%3Csvg id='Ebene_1' data-name='Ebene 1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 830.3 830.3'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23000; stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath class='cls-1' d='M312.9,369.2v-191.3c0-30.5,12.3-57.2,32.5-75.6,19.6-17,44.5-26.2,69.4-26.2h0c24.9,0,49.8,9.2,69.4,26.2,17.5,16,29.1,38.2,31.9,63.8l55.4-55.4c-4.1-9.9-9.2-19.3-15.1-28.2-.5-.7-.9-1.4-1.4-2.1-.2-.2-.3-.5-.5-.7C522.1,32.5,469.2,7.4,414.8,7.7c-54.4-.3-107.3,24.8-139.6,72-.2.2-.3.5-.5.7-.5.7-.9,1.4-1.4,2.1-18.2,27.4-28.4,60.3-28.4,95.4v237c0,7.1.4,14.2,1.2,21.1l66.8-66.8Z'/%3E%3Cpath class='cls-1' d='M514.1,438.8c-4.6,20.5-15.1,38.3-29.9,51.7-13.2,11.4-28.8,19.3-45.1,23.3l-66.4,66.4c13.7,3.4,27.9,5,42.2,5,54.4.3,107.3-24.8,139.6-72,.2-.2.3-.5.5-.7.5-.7.9-1.4,1.4-2.1,18.2-27.4,28.4-60.3,28.4-95.4v-46.8l-70.7,70.7Z'/%3E%3C/g%3E%3Crect class='cls-1' x='-75.3' y='374.9' width='968.9' height='66.6' rx='33.3' ry='33.3' transform='translate(-168.8 408.9) rotate(-45)'/%3E%3Cg%3E%3Cpath class='cls-1' d='M189.2,493c-2.7-9.5-5-19.2-7.1-29.2-2.6-16.1-4.7-32.2-4.7-48.3s-5.7-23.6-15.3-29.2c-5.2-3.1-11.5-4.8-18.7-4.8-20.3,0-33.9,13.5-33.9,33.9,0,46.1,10.1,89.8,28.3,129l51.4-51.4Z'/%3E%3Cpath class='cls-1' d='M686.4,381.5c-8.2.8-13.5,1.7-18.7,4.8-9.6,5.6-15.3,13.1-15.3,29.2s-2.1,32.2-4.7,48.3c-22,108.6-82.3,189.1-233,189.1s-71.8-5.4-99.5-15.2l-46.2,46.2c21.2,11.9,43.3,20.6,67.9,26.7,13.6,3.4,30.5,6.8,44.1,6.8v71.3c0,20.3,13.5,33.9,33.9,33.9s33.9-13.6,33.9-33.9v-71.3c13.6,0,30.5-3.4,44.1-6.8,34.4-8.6,64-22.1,92.8-42.4,0,0,.2,0,.3-.2,81.9-54.6,134.3-147.4,134.3-252.6-2-36.2-33.9-33.9-33.9-33.9Z'/%3E%3C/g%3E%3C/svg%3E");
    }


#micSettings {
    border: 0;
    border-radius: 20vw;
    width: min(15vw,10vh);
    height: min(15vw,10vh);
    background-color: rgba(255, 255, 255, 0.4);
    background-size: 50% auto;
    background-repeat: no-repeat;
    background-position: center;
    color: #000000;
    cursor: pointer;
    z-index: 50;
    bottom: 3vh;
    position: absolute;
    right: calc(5vh + min(15vw,10vh));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    pointer-events: auto;
    background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 36 36'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23000; stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M30.7,21l-2.5-1.9v-2l2.5-1.9c.5-.4.6-1,.3-1.5l-2.6-4.5c-.3-.5-.9-.8-1.5-.5l-2.9,1.2c-.6-.4-1.1-.7-1.8-1l-.4-3.1c0-.6-.6-1-1.2-1h-5.2c-.6,0-1.1.4-1.2,1l-.4,3.1c-.6.3-1.2.6-1.8,1l-2.9-1.2c-.5-.2-1.2,0-1.5.5l-2.6,4.5c-.3.5-.2,1.2.3,1.6l2.5,1.9v2l-2.5,1.9c-.5.4-.6,1-.3,1.5l2.6,4.5c.3.5.9.8,1.5.5l2.9-1.2c.6.4,1.1.7,1.8,1l.4,3.1c0,.6.6,1,1.2,1h5.2c.6,0,1.1-.4,1.2-1l.4-3.1c.6-.3,1.2-.6,1.8-1l2.9,1.2h.4c.4,0,.8-.2,1-.6l2.6-4.5c.3-.5.2-1.2-.3-1.5h.1ZM18,22.5c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5,4.5,2,4.5,4.5-2,4.5-4.5,4.5Z'/%3E%3C/svg%3E");
}