:root {
  --fontSizeDesktop: 18px;
  --fontSizePortrait: 6.2vw;
  --fontSizeLandscape: 3.1vh;
  --rot: #d52946;
  --lila: #32286c;
/*  --lilaBright: #5a5098;*/
  --lilaBright: #bab5d9;
  --gruen: #c32e04;
  --gelb: #c32e04;
  --tuerkis: #00b596;
  --tuerkis-bright: #bfece5;
  --tuerkis-bright--transparent: rgba(191, 236, 229, 0.5);
  --rosa: #edc4c6;
  --lang-button--color: #bab5d9;
  font-size: var(--fontSizePortrait)
  
}
.noselect {
        -webkit-touch-callout: none; /* iOS Safari */
          -webkit-user-select: none; /* Safari */
           -khtml-user-select: none; /* Konqueror HTML */
             -moz-user-select: none; /* Old versions of Firefox */
              -ms-user-select: none; /* Internet Explorer/Edge */
                  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}
#wrapper, #mainContainer, #webgl-container,#loading-overlay,#label-container,.loading-bg{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  color: white;
}

header, nav,.sub-menu,#nav-item-bottom{
  background: var(--lila);
}

header{
  text-align: left;
  position: fixed;
  z-index: 999;
  width: 100%;
  font-size: 6.2vw;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  transition: transform 400ms ease-out;
}

#loading-overlay{
  background: var(--rosa);
  -webkit-transition: opacity 500ms ease-in;
  transition: opacity 500ms ease-in;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

#wrapper.loading header{
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
#wrapper.loading #loading-overlay{
  opacity: 1;
  pointer-events: all;
}

.header-content{
  max-width: 1400px;
  left: 0;
  right: 0;
  margin: auto;
  line-height: 0;
}
.logo{
  display: inline-block;
}
.logo img{
  height: 16vw;
  margin-top: 2vw;
  margin-bottom: 2vw;
  margin-left: 2.9vw;
  display: block;
}

nav {
  position: absolute;
  text-align: left;
  top: 100%;
  right: 0;
  transform-origin: top;
  transition: transform 250ms ease-in-out;
  -webkit-transform: translateX(105%);
  transform: translateX(105%);
  font-size: 1em;
  line-height: 1.2em;
}

#wrapper.is-mobile nav{
  max-height: 90vh;
  overflow-y: scroll;
}
.is-active nav {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}
.is-resizing nav{
  transition-duration: 0s;
}
nav ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-item{
  color: white;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
header.no-interaction .nav-item{
  pointer-events: none;
}
.nav-item span, .nav-item-content{
   padding: 0.22em 2.02em .22em .8em;
}
.nav-item span{
  pointer-events: none;
}

.nav-item:hover{
  color: var(--lila);
  background-color: white;
}

.sub-menu{
  text-align: left;
  width: 100%;
  transform-origin: top;
  overflow: hidden;
  height: 0;
  transition: height 200ms ease-in-out;
}

.sub-menu .nav-item{
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-left: 1em;
}

header:not(.is-interactive) .nav-item{
  pointer-events: none !important;
}

.sub-menu .nav-item:hover svg path,.sub-menu .nav-item:hover svg polygon{
  fill: var(--lila);
}

.nav-item svg{
  height: 2.4em;
  display: inline-block;
}  
.nav-item .hackerl{
  fill: white;
  position: absolute;  
  -webkit-transform: translateX(100%) scale(0.6);
  transform: translateX(100%) scale(0.6);
}
.nav-item .hackerl:not(.is-visible){
  display: none;
}
.nav-item svg{
  margin:  0.3em .4em;
}

#nav-item-bottom{
  width: 100%;
}

.nav-item-content{
  display: flex;
  justify-content: flex-start;
}
#nav-item-bottom svg{
  margin: 0;
  padding: 0;
  height: auto;
  width: 1.5em;
  margin: 0.2em 0 0.2em -0.2em;
}


#nav-item-back path{
  fill: white;
}
#nav-item-back:hover path{
  fill: var(--rot);
}
#nav-item-logo{
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 50%;
}

.nav-toggle{
  position: absolute;
  width: 16vw;
  height: 16vw;
  right: 2.9vw;
  top: 2vw;
  
  overflow: hidden;
  cursor: pointer;
}

.nav-toggle-line{
  position: absolute;
  width: 68%;
  height: 5%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: white;
  transition: transform 200ms ease-in-out;
}

.nav-toggle-line:nth-child(1){
  -webkit-transform: translateY(-440%);
  transform: translateY(-440%);
}
.nav-toggle-line:nth-child(3){
  -webkit-transform: translateY(440%);
  transform: translateY(440%);
}


#header.is-active .nav-toggle-line:nth-child(1),
.overlay-mid .nav-toggle-line:nth-child(1){
  -webkit-transform: translateY(0%) rotate(-45deg);
  transform: translateY(0%) rotate(-45deg);
}
#header.is-active .nav-toggle-line:nth-child(2),
.overlay-mid .nav-toggle-line:nth-child(2){
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}
#header.is-active .nav-toggle-line:nth-child(3),
.overlay-mid .nav-toggle-line:nth-child(3){
  -webkit-transform: translateY(0%) rotate(45deg);
  transform: translateY(0%) rotate(45deg);
}

#active-item{
  pointer-events: none;
}
#active-item, .active-item-label{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.active-item-label{
  -webkit-transform: translateY(-105%);
  transform: translateY(-105%);
  transition: transform 400ms ease-in-out;
  font-size: 5vw;
  pointer-events: none;
}

header[data-activelabel="product-1"] #active-item .active-item-label.product-1,
header[data-activelabel="product-2"] #active-item .active-item-label.product-2,
header[data-activelabel="product-3"] #active-item .active-item-label.product-3,
header[data-activelabel="product-4"] #active-item .active-item-label.product-4,
header[data-activelabel="product-5"] #active-item .active-item-label.product-5,
header[data-active="0"] #active-item .active-item-label.koerper,
header[data-active="1"] #active-item .active-item-label.zyklus
{
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}

.active-item-label{
  display: flex;
  justify-content: center;
  align-items: center;
}
.active-item-label svg{
  height: auto;
  width: 2em;
  margin-right: .25rem;
}
.active-item-label.product-5 svg{
  width: 1.9rem;
  max-height: 80%;
}

#ar-button{
  position: absolute;
  width: 2.3rem;
  bottom: 0;
  right: 0;
  z-index: -1;
  right: .4rem;
  -webkit-transform: translate(150%,115%);
  transform: translate(150%,115%);
  cursor: pointer;
  pointer-events: none;
  transition: transform 200ms ease-in-out;
}
#ar-button.is-active{
  -webkit-transform: translate(0,115%);
  transform: translate(0,115%);
  pointer-events: all;
  -webkit-animation: arButtonBlinkAnim .5s ease-in-out 4 7s;
  animation: arButtonBlinkAnim .5s ease-in-out 4 7s;
}
#ar-button:hover svg polygon,
#ar-button:hover svg polyline{
  stroke: var(--lila);
}
#ar-button:hover{
  background: white;
}

#ar-button{
  background: var(--lila);
}
#ar-button polyline,#ar-button polygon{
  stroke: white;
}

@-webkit-keyframes arButtonBlinkAnim {
   0%   {  background: var(--lila)}
   50%  {  background: var(--tuerkis) }
   100% {  background: var(--lila)}
}
@keyframes arButtonBlinkAnim {
   0%   {  background: var(--lila)}
   50%  {  background: var(--tuerkis) }
   100% {  background: var(--lila)}
}

/*OVERLAYS*/


.overlay-wrapper{
  position: absolute;
  bottom: 0;
  width: 100%;
  transition: transform 250ms ease-in-out;
  -webkit-transform: translateY(calc(160% + 2.6em));
  transform: translateY(calc(160% + 2.6em));
}

#wrapper[data-active-overlay="koerper"] #overlay-body.is-active{
  -webkit-transform: translateY(-3.6em);
  transform: translateY(-3.6em);
}

#wrapper[data-active-overlay="zyklus"] #overlay-zyklus{
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.timeline-wrapper{
  position: relative; 
  font-size: 3.8vw;
  width: 92%;
  left: 0;
  right: 0;
  margin: auto;
  margin-bottom: calc(1vh + 2vw);
  margin-bottom: 1.1em;
  height: 2.16em;
}
.timeline-wrapper .button-play-pause{
  height: 100%;
  width: 8%;
  width: 2.16em;
  height: 2.16em;
  cursor: pointer;
  position: relative;
  transition: transform 100ms ease-in-out;
  transform-origin: 40% 50%;
  background: var(--lila);
  border-radius: 50%;
}

.timeline-wrapper .button-play-pause .button-play{
  width: auto;
  height: 70%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  margin-left: 24%;
  transform-origin: 20% 50%;
  transition: all 0.25s;
  opacity: 1;
}

.button-play-pause .button-pause-part, .button-play-pause .button-play path{
  background: white;
  fill:white;
}

.button-play-pause .button-pause-part{
  width: 13%;
  height: 56%;
  top: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  border-radius: .4em;
  transition: all 0.25s;
  transform-origin: 50% 50%;
}
.button-play-pause .button-pause-part:nth-child(1){
  left: 33%;
  -webkit-transform: scale(0.5, 0.7);
  transform: scale(0.5, 0.7);
}
.button-play-pause .button-pause-part:nth-child(2){
  right: 33%;
  -webkit-transform: scale(.7, 0.1);
  transform: scale(.7, 0.1);
}
.button-play-pause.is-playing .button-pause-part{
  -webkit-transform: scale(1);
  transform: scale(1);
}
.button-play-pause.is-playing .button-play{
  -webkit-transform: scale(0.25,.7);
  transform: scale(0.25,.7);
}
#wrapper:not(.is-mobile) .button-play-pause:hover{
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.button-play-pause:not(:hover){
  animation: playButtonAnimation 5s forwards 2s infinite;
}
.button-play-pause.is-playing{
  animation: none;
}

@-webkit-keyframes playButtonAnimation {
   0%   {  -webkit-transform: scale(1); background: var(--lila)}
   8%   {  -webkit-transform: scale(1.1); background: var(--tuerkis)}
   16%  {  -webkit-transform: scale(.8); background: var(--lila)}
   24%  {  -webkit-transform: scale(1.1); background: var(--tuerkis)}
   32%  {  -webkit-transform: scale(.8); background: var(--lila)}
   40%  {  -webkit-transform: scale(1.1); background: var(--tuerkis)}
   48%  {  -webkit-transform: scale(1); background: var(--lila)}
   100% {  -webkit-transform: scale(1); background: var(--lila)}
}
@keyframes playButtonAnimation {
   0%   {  transform: scale(1); background: var(--lila)}
   8%  {  transform: scale(1.1); background: var(--tuerkis)}
   16%  {  transform: scale(.8); background: var(--lila)}
   24%  {  transform: scale(1.1); background: var(--tuerkis)}
   32%  {  transform: scale(.8); background: var(--lila)}
   40%  {  transform: scale(1.1); background: var(--tuerkis)}
   48%  {  transform: scale(1); background: var(--lila)}
   100% {  transform: scale(1); background: var(--lila)}
}
#timeline-wrapper-zyklus,
#timeline-wrapper-body{
  cursor: pointer;
}
#body-timeline,
#zyklus-timeline{
  display: flex;
  align-items: stretch;
  position: absolute;
  background: white;
  width: calc(100% - 2em);
  width: calc(100% - 2.5em);
  height: 100%;
  top: 0;
  right: 0;
  color: black;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  overflow: hidden;
}
#body-timeline-fill,
#zyklus-timeline-fill{
  background: var(--tuerkis);
  position: absolute;
  height: 100%;
  width: 100%;
  transform-origin: center left;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}
.body-interval,
.zyklus-interval{
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex: 1;
  font-size: .8em;
  white-space: break-spaces;
}
.zyklus-interval:not(:last-child),
.body-interval:not(:last-child){
  border-right: 1px solid var(--lila);
}

#overlay-body[data-step="0"] #body-interval-1,
#overlay-body[data-step="1"] #body-interval-1,
#overlay-body[data-step="2"] #body-interval-2,
#overlay-body[data-step="3"] #body-interval-3,
#overlay-body[data-step="4"] #body-interval-4,
#overlay-body[data-step="5"] #body-interval-5,
#overlay-body[data-step="6"] #body-interval-6,
#overlay-body[data-step="7"] #body-interval-6,
#overlay-body[data-step="8"] #body-interval-7,
#overlay-body[data-step="9"] #body-interval-8,
#overlay-body[data-step="10"] #body-interval-9{
  font-weight: 700;
  color: white;
  background: var(--tuerkis);
  background: rgba(0, 181, 150, 0.5);
  background: rgb(127, 218, 202 , 0.5);
  -webkit-animation: zyklusIntervalAnimation .2s ease-in-out;
  animation: zyklusIntervalAnimation .2s ease-in-out;
}

.timeline-wrapper[data-interval="1"] #zyklus-interval-1,
.timeline-wrapper[data-interval="2"] #zyklus-interval-1,
.timeline-wrapper[data-interval="3"] #zyklus-interval-1,
.timeline-wrapper[data-interval="4"] #zyklus-interval-1,
.timeline-wrapper[data-interval="5"] #zyklus-interval-1,
.timeline-wrapper[data-interval="2"] #zyklus-interval-2,
.timeline-wrapper[data-interval="3"] #zyklus-interval-2,
.timeline-wrapper[data-interval="4"] #zyklus-interval-2,
.timeline-wrapper[data-interval="5"] #zyklus-interval-2,
.timeline-wrapper[data-interval="3"] #zyklus-interval-3,
.timeline-wrapper[data-interval="4"] #zyklus-interval-3,
.timeline-wrapper[data-interval="5"] #zyklus-interval-3,
.timeline-wrapper[data-interval="4"] #zyklus-interval-4,
.timeline-wrapper[data-interval="5"] #zyklus-interval-4{
  font-weight: 700;
  color: white;
  background: var(--tuerkis);
  background: rgba(0, 181, 150, 0.5);
  -webkit-animation: zyklusIntervalAnimation .2s ease-in-out;
  animation: zyklusIntervalAnimation .2s ease-in-out;
}
#zyklus-interval-1{
  /* text-indent: -.5em; */
  flex: 1.56;
}
#zyklus-interval-2{
  flex: 1.9;
}
#zyklus-interval-3{
  flex: 1;
}
#zyklus-interval-4{
  flex: 1.8;
  /* text-indent: .5em; */
}

#zyklus-interval-1{
  /* text-indent: -.5em; */
  flex: 1.56;
}
.body-interval:hover,
.zyklus-interval:hover{
  background: var(--tuerkis-bright);
  color: black !important;
}

.timeline-wrapper[data-interval="1"] #zyklus-interval-1:hover,
.timeline-wrapper[data-interval="2"] #zyklus-interval-1:hover,
.timeline-wrapper[data-interval="2"] #zyklus-interval-2:hover,
.timeline-wrapper[data-interval="3"] #zyklus-interval-1:hover,
.timeline-wrapper[data-interval="3"] #zyklus-interval-2:hover,
.timeline-wrapper[data-interval="3"] #zyklus-interval-3:hover,
.timeline-wrapper[data-interval="4"] #zyklus-interval-1:hover,
.timeline-wrapper[data-interval="4"] #zyklus-interval-2:hover,
.timeline-wrapper[data-interval="4"] #zyklus-interval-3:hover,
.timeline-wrapper[data-interval="4"] #zyklus-interval-4:hover
{
  background: var(--tuerkis-bright--transparent) !important;
}

@-webkit-keyframes zyklusIntervalAnimation {
   0%   {  -webkit-transform: scale(1)}
   30%  {  -webkit-transform: scale(1.1,1.3)}
   100% {  -webkit-transform: scale(1)}
}
@keyframes zyklusIntervalAnimation {
   0%   {  transform: scale(1)}
   30%  {  transform: scale(1.1,1.3)}
   100% {  transform: scale(1)}
}
.zyklus-schild{
  transition: opacity 0.2s ease-out, transform 0.3s cubic-bezier(0.4, 0.0, 0.6, 1.2);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.zyklus-schild-container{
  position: absolute;
  width: 73%;
  display: flex;
  bottom: 84%;
  transform-origin: bottom left;
  transition: opacity 0.2s ease-out, transform 0.3s cubic-bezier(0.4, 0.0, 0.6, 1.2);
  pointer-events: none;
  opacity: 0;
  -webkit-transform: scale(.5,.1) rotate(20deg);
  transform: scale(.5,.1) rotate(20deg);
}
#zyklus-schild-container-1{
  left: 20%;
}
#zyklus-schild-1{
  -webkit-transform: translateX(-23%);
  transform: translateX(-23%);
}
#zyklus-schild-container-2{
  left: 44.5%;
}
#zyklus-schild-2{
  -webkit-transform: translateX(-23%);
  transform: translateX(-23%);
}
#zyklus-schild-container-3{
  left: 66.5%;
}
#zyklus-schild-3{
  -webkit-transform: translate(-23%,1%);
  transform: translate(-23%,1%);
}
#zyklus-schild-container-4{
  left: 89.5%;
}
#zyklus-schild-4{
  -webkit-transform: translate(-76.5%,1%);
  transform: translate(-76.5%,1%);
}
#wrapper[data-active-overlay="zyklus"] .timeline-wrapper[data-interval="1"] #zyklus-schild-container-1,
#wrapper[data-active-overlay="zyklus"] .timeline-wrapper[data-interval="2"] #zyklus-schild-container-2,
#wrapper[data-active-overlay="zyklus"] .timeline-wrapper[data-interval="3"] #zyklus-schild-container-3,
#wrapper[data-active-overlay="zyklus"] .timeline-wrapper[data-interval="4"] #zyklus-schild-container-4{
  opacity:1;
  -webkit-transform: scale(1) rotate(0deg);
  transform: scale(1) rotate(0deg);
}
.zyklus-schild-linien{
  position: absolute;
  width: 23%;
  transform-origin: 100% 100%;
  -webkit-transform: scale(.1);
  transform: scale(.1);
  opacity: 0;
  transition: transform 0.15s ease-in;
}

#zyklus-schild-linien-1{
  margin-top: -38%;
  left: -20%;
}
#zyklus-schild-linien-2{
  margin-top: -69%;
  left: -20%;
}
#zyklus-schild-linien-3{
  margin-top: -38%;
  left: -20%;
}
#zyklus-schild-linien-4{
  margin-top: -53%;
  left: -25%;
  -webkit-transform: scale(-.1,.1);
  transform: scale(-.1,.1);
}

.timeline-wrapper[data-interval="1"] #zyklus-schild-linien-1,
.timeline-wrapper[data-interval="2"] #zyklus-schild-linien-2,
.timeline-wrapper[data-interval="3"] #zyklus-schild-linien-3,
.timeline-wrapper[data-interval="4"] #zyklus-schild-linien-4{
  transition: transform 0.2s cubic-bezier(.4, 0, .29, 1.47) 0.2s;
  opacity:1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.timeline-wrapper[data-interval="4"] #zyklus-schild-linien-4{
  -webkit-transform: scale(-1,1);
  transform: scale(-1,1);
}

.overlay-drawer-wrapper{
  height: 66%;
}

.overlay-drawer{
  font-size: .8rem;
  font-weight: 500;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.drawer-background{
  background: rgba(197, 59, 73, 0.75);
  position: absolute;
  width: 100%;
  height: 101%;
  bottom: 0;
}

.overlay-drawer-toggle{
  background: var(--rot);
  width: 100%;
  height: 3.6em;
  position: relative;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  overflow: hidden;
  cursor: pointer;
}

.drawer-arrow{
  position: absolute;
  width: 1.65em;
  height: 1.65em;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  transition: transform 150ms ease-in-out;
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  background: url(../img/overlay-arrow.svg);
  background-position: center;
  background-repeat: no-repeat;
}
.drawer-arrow img{
  width: 100%;
}

.drawer-text{
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 17%;
  line-height: 1em;
  font-size: 1em;
  text-align: center;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  transition: transform 150ms ease-in-out, opacity 150ms;
}


.overlay-drawer-wrapper.is-visible{
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
.overlay-drawer-wrapper.is-active{
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
#drawer-container:not(.is-active).show-hint .overlay-drawer-toggle{
  animation: animation-drawer--blink .8s 3;
}

@-webkit-keyframes animation-drawer--blink {
  0%   {  background: var(--rot)}
  30%   {  background: var(--tuerkis)}
  100%   {  background: var(--rot)}
}
@keyframes animation-drawer--blink {
  0%   {  background: var(--rot)}
  30%   {  background: var(--tuerkis)}
  100%   {  background: var(--rot)}
}

.overlay-drawer-wrapper.is-active .drawer-text{
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  opacity: 0;
}

.overlay-drawer-wrapper.is-active .overlay-drawer-toggle{
  height: 2.6em;
}

.overlay-drawer-wrapper.is-active .drawer-arrow{
  width: 2.2em;
  height: 2.2em;
  -webkit-transform: translateY(10%);
  transform: translateY(10%);
}

#overlay-scrollable-wrapper{
  overflow-y: auto;
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
}
.drawer-line{
  width: 100%;
  height: 1px;
  background: white;
  position: absolute;
  top: 0;
  left: 0;
}
.drawer-section{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.drawer-content{
  margin: 1.5rem 0 3rem 0;
  /* DYNAMIC TEXT UPDATE */
  margin: 1.5rem 0 2.5rem 0;
}

.drawer-section img{
  margin: 0;
  height: 8rem;
}
.drawer-section .drawer-section-text-small{
  font-size: .6rem
}


.drawer-section .rfr-container{
  display: inline-block;
  position: relative;
}
.drawer-section .rfr{
  margin: 0;
  height: 1.4rem !important;
  position: absolute;
  left: -2rem;
  top: -1.2rem;
}

.drawer-section .overlay-button{
  width: 8rem;
  height: auto;
  margin: 1.5rem 0;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(.42, 0, .42, 1.47);
}

.drawer-section .overlay-button.is-inactive{
  pointer-events: none;
}
.is-hidden{
  display: none;
}
.drawer-section .overlay-button:hover{
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.drawer-section img.image-margins-1{
  margin: -1.5rem 0;
}

.drawer-section img.image-margins-2{
  margin: 1rem 0 0 0;
}

.drawer-section img.image-margins-3{
  margin: 1rem 0 .5rem 0;
}

.drawer-section img.image-margins-4{
  margin: 1rem 0 0 0;
  height: 6rem;
}

.drawer-section img.image-margins-5{
  margin: -1.5rem 0 -.4rem 0;
}

.drawer-section .drawer-arrow{
  position: relative;
}

.drawer-section-text{
  text-align: center;
  margin: 1rem 1rem .5rem 1rem;
}

.drawer-section-text-intro{
  text-align: center;
  font-size: .8rem;
  margin: 0.5rem 2.2rem .5rem 2.2rem;
}

#overlay-model-loading .loading-bg{
  background: var(--rosa);
  opacity: 0.75;
}

#overlay-model-loading{
  -webkit-transform: translate(0,0);
  transform: translate(0,0);
  opacity: 0;
  height: 100%;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  pointer-events: none;
  transition: opacity 300ms ease-in-out;
}

#overlay-model-loading.is-visible{
  opacity: 1;
  pointer-events: all;
}

#wrapper.loading #loading-overlay .loading-indicator,
#overlay-model-loading.is-visible .loading-indicator{
  width: 25vw;
  height: 25vw;
  max-width: 100px;
  max-height: 100px;
  border: .5rem solid var(--rot);
  border-top-color: transparent;
  border-radius: 50%;
  position: absolute;
  transition: opacity 500ms ease-in-out;
  opacity: 1;
}

#wrapper.loading #loading-overlay .loading-indicator,
#overlay-model-loading.is-visible .loading-indicator{
  -webkit-animation: loadingInicatorAnim 1.2s linear infinite;
  animation: loadingInicatorAnim 1.2s linear infinite;
  opacity: 1;
}

@-webkit-keyframes loadingInicatorAnim {
   0%   {  -webkit-transform: rotate(0deg)}
   100% {  -webkit-transform: rotate(360deg)}
}
@keyframes loadingInicatorAnim {
   0%   {  transform: rotate(0deg)}
   100% {  transform: rotate(360deg)}
}

/*AR OVERLAY*/
/*--------------------------------------------------------*/

.overlay-mid{
  position: fixed;
  width: 100%;
  height: calc(100% - 20vw);
  bottom: 0;
  left: 0;
  z-index: 30;
  font-size: 2.2vh;
  transition: transform 0.25s ease-in-out;
  pointer-events: all;
}
.overlay-mid-wrapper{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay-mid:not(.is-active){
  -webkit-transform: translateX(101%);
  transform: translateX(101%);
  pointer-events: none;
}

.overlay-mid .nav-toggle{
  z-index:40;
}

.overlay-mid .drawer-background{
  z-index: -1;
}

.overlay-mid .drawer-section-text{
  margin: 1em 1em .5em 1em;
}
.overlay-mid .drawer-section img{
  height: 8em;
}
.overlay-mid #bewegDichImg{
  height: 10em;
  margin-left: -2em;
}
.overlay-mid .drawer-section img.overlay-button{
  height: 4em;
  width: auto;
  margin: 1em 0em;
}
.drawer-section-spacer{
  height: 1em;
}

.overlay-mid .drawer-background{
  transform-origin: 0% 0%;
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);
  transition: transform 0.2s ease-in-out;
}

.overlay-mid.is-active .drawer-background{
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
}

.overlay-mid .drawer-section{
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  opacity: 0;
  transition: transform 0.2s ease-in-out,opacity 0.2s ease-in-out;;
}
.overlay-mid.is-active .drawer-section{
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  opacity: 1;
}

.overlay-mid .drawer-section[data-animorder="0"]{
  transition-delay: 0.1s;
}
.overlay-mid .drawer-section[data-animorder="1"]{
  transition-delay: 0.2s;
}
.overlay-mid .drawer-section[data-animorder="2"]{
  transition-delay: 0.3s;
}
.overlay-mid .drawer-section[data-animorder="3"]{
  transition-delay: 0.4s;
}

#zyklusNextImg{
  height: 15em;
}

/*--------------------------------------------------------*/



#label-container{
  font-size: 20px;
  pointer-events: none;
  display: none;
}
#label-container.is-visible{
  display: block;
}

#label-container .label-wrapper{
  position: absolute;
  width: 20em;
  max-width: 50vw;
  top: 50%;
  left: 10%;
  display: none;
  transform-origin: 0 0;
}

#label-container .label-wrapper .label-img-container{
  transform-origin: 10% 90%;
  -webkit-transform: translate(-10%, -90%) scale(.01,.5) rotate(20deg);
  transform: translate(-10%, -90%) scale(.01,.5) rotate(20deg);
  z-index: 9;
  opacity: 0;
  position: absolute;
  width: 100%;
  transition: all 200ms cubic-bezier(0.4, 0.0, 0.6, 1.2);
}
#label-container .label-wrapper.anim-slow.is-active .label-img-container{
  transition: all 300ms cubic-bezier(0.4, 0.0, 0.6, 1.2);
}
#label-container .label-wrapper .label-img-container img{
  z-index: 9;
  width: 100%;
  -webkit-transform: translateY(-12%) translateZ(0);
  transform: translateY(-12%) translateZ(0);
}

#label-container .label-wrapper.label-wobble.is-active .label-img-container img{
  transform-origin: 10% 90%;
  -webkit-animation: labelWobbelAnim 1s forwards 3 .25s ease-in-out;
  animation: labelWobbelAnim 1s forwards 3 .25s ease-in-out;
}

@-webkit-keyframes labelWobbelAnim {
   0%   { -webkit-transform: rotate(0) translateY(-12%)}
   10%   { -webkit-transform: rotate(2deg)translateY(-12%)}
   20%   { -webkit-transform: rotate(-2deg)translateY(-12%)}
   30%   { -webkit-transform: rotate(2deg)translateY(-12%)}
   40%   { -webkit-transform: rotate(-2deg)translateY(-12%)}
   50%   { -webkit-transform: rotate(0deg)translateY(-12%)}
   100% { -webkit-transform: rotate(0)translateY(-12%)}
}
@keyframes labelWobbelAnim {
   0%   { transform: rotate(0) translateY(-12%)}
   10%   { transform: rotate(2deg)translateY(-12%)}
   20%   { transform: rotate(-2deg)translateY(-12%)}
   30%   { transform: rotate(2deg)translateY(-12%)}
   40%   { transform: rotate(-2deg)translateY(-12%)}
   50%   { transform: rotate(0deg)translateY(-12%)}
   100% { transform: rotate(0)translateY(-12%)}
}

#label-vulva.is-active .label-img-container img{
  transform-origin: 10% 90%;
  -webkit-animation: vulvaLabelAnim 1s forwards 1 ease-in-out;
  animation: vulvaLabelAnim 1s forwards 1 ease-in-out;
}

@-webkit-keyframes vulvaLabelAnim {
   0%   { -webkit-transform: scale(1); transform-origin: 10% 90%;}
   40%  { -webkit-transform: scale(6); transform-origin: 12% 90%;}
   50%  { -webkit-transform: scale(6); transform-origin: 12% 90%;}
   100% { -webkit-transform: scale(1); transform-origin: 10% 90%;}
}
@keyframes vulvaLabelAnim {
   0%   { transform: scale(1); transform-origin: 10% 90%;}
   40%   { transform: scale(6); transform-origin: 12% 90%;}
   50%   { transform: scale(6); transform-origin: 12% 90%;}
   100% { transform: scale(1); transform-origin: 10% 90%;}
}

#label-container .label-wrapper.is-active .label-img-container{
  opacity: 1;
  -webkit-transform: translate(-10%, -90%) scale(1);
  transform: translate(-10%, -90%) scale(1);
  pointer-events: all;
}
.label-poi{
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: calc(4vw + 4vh);
  height: calc(4vw + 4vh);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin:0% 0%;
  opacity: 0;
}
.label-wrapper.is-visible .label-poi{
  pointer-events: all;
}


#label-container.is-visible .label-wrapper[data-animorder="0"].is-visible .label-poi{
  -webkit-animation: labelPoiAnimation 1s forwards .1s;
  animation: labelPoiAnimation 1s forwards .1s;
}
#label-container.is-visible .label-wrapper[data-animorder="1"].is-visible .label-poi{
  -webkit-animation: labelPoiAnimation 1s forwards .2s;
  animation: labelPoiAnimation 1s forwards .2s;
}
#label-container.is-visible .label-wrapper[data-animorder="2"].is-visible .label-poi{
  -webkit-animation: labelPoiAnimation 1s forwards .3s;
  animation: labelPoiAnimation 1s forwards .3s;
}
#label-container.is-visible .label-wrapper[data-animorder="3"].is-visible .label-poi{
  -webkit-animation: labelPoiAnimation 1s forwards .4s;
  animation: labelPoiAnimation 1s forwards .4s;
}
#label-container.is-visible .label-wrapper[data-animorder="4"].is-visible .label-poi{
  -webkit-animation: labelPoiAnimation 1s forwards .5s;
  animation: labelPoiAnimation 1s forwards .5s;
}


@-webkit-keyframes labelPoiAnimation {
   0%   { opacity: 0}
   100% { opacity: 1}
}
@keyframes labelPoiAnimation {
   0%   { opacity: 0}
   100% { opacity: 1}
}

.label-poi-center{
  z-index: -1;
  background: #952B1F;
  background: #D52947;
  background: var(--rot);
  border: 2px solid #952B1F;
  position: absolute;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  -webkit-transform: scale(.9);
  transform: scale(.9);
}
.label-poi:hover .label-poi-center{
  background: #952B1F;
  background: white;
  border: .1rem solid #D52947;
  -webkit-transform: scale(1);
  transform: scale(1);
}

@media (min-aspect-ratio: 1/2){
  
  .overlay-mid{
    height: calc(100% - 10vh);
  }
  
  header{
    font-size: 3.1vh;
  }
  
  #active-item{
    font-size: 2.5vh;
  }
  
  .active-item-label{
    font-size: 2.5vh;
    opacity: 0;
  }
  
  .logo img{
    height: 8vh;
    margin-top: 1vh;
    margin-bottom: 1vh;
    margin-left: 1.45vh;
  }
  
  .nav-toggle{
    width: 8vh;
    height: 8vh;
    right: 1.45vh;
    top: 1vh;
  }
  
  .timeline-wrapper{
    position: relative; 
    font-size: 3vh;
    max-width: 160vh;
    margin-bottom: calc(1vh + 2vw);
    margin-bottom: 1.1em;
    height: 2.16em;
  }  
  
  #wrapper:not(.is-mobile) .timeline-wrapper{
    font-size: 1.9vh;
  }
  
  .zyklus-schild-container{
    width: 73%;
    max-width: 35vh;
    bottom: 84%;
  }
  
  #wrapper:not(.is-mobile) #label-container .label-wrapper{
    max-width: 500px;
    max-width: calc(10vw + 20vh);
  }  
  
  #wrapper:not(.is-mobile) .overlay-mid{
    height: calc(100% - 10vh);
  }
}
@media screen and (max-width: 639px){
  .active-item-label span span:first-of-type{
    transform: translateY(-.5em);
    display: block;
  }
  .active-item-label span span:last-of-type{
    transform: translateY(.5em);
    display: block;
  }
}
@media screen and (min-width: 640px) {

  :root{
    font-size: var(--fontSizeDesktop);
  }
  #wrapper:not(.is-mobile) header{
    font-size: 1rem;
  }
  #wrapper:not(.is-mobile) .header-content{
    display: flex;
    flex-direction: row;
  }

  #wrapper:not(.is-mobile) header .logo img{
    height: 100px;
    margin-top: 18px;
    margin-bottom: 10px;
    margin-left: 20px;
  }
  
  #wrapper:not(.is-mobile) header nav{
    width: 100%;
    transition: transform 0s ease-in-out;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    margin-left: -5%;
    margin-left: -10%;
  }

  #wrapper:not(.is-mobile) header nav {
    position: relative;
    top: 0;
    bottom: 0;
    background: transparent;
  }
  #wrapper:not(.is-mobile) header nav > ul{
    height: 100%;
  }
  #wrapper:not(.is-mobile) header nav > ul > li{
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    top: auto;
    bottom: 0;
  }
  #wrapper:not(.is-mobile) header .nav-item{
    min-width: 100px;
    text-align: center;
  }
  #wrapper:not(.is-mobile) header[data-active="2"] #nav-item-produkte{
    color: var(--lila);
    background-color: white;
  }
  #wrapper:not(.is-mobile) header .nav-item span{
     padding: 0.22em 1.4em;
  }
  #wrapper:not(.is-mobile) header .sub-menu{
    position: absolute;
  }

  #wrapper:not(.is-mobile) header .sub-menu .nav-item{
    padding-left: 0;
    justify-content: center;
  }
  #wrapper:not(.is-mobile) header .nav-item svg{
    height: 2.2em;
  }
  #wrapper:not(.is-mobile) header .nav-item .hackerl{ 
    -webkit-transform: translateX(100%) scale(0.8);
    transform: translateX(100%) scale(0.8);
  }
  
  #wrapper:not(.is-mobile) header .nav-toggle{
    display: none;
  }
  
  #wrapper:not(.is-mobile) header #active-item{
    position: absolute;
    font-size: 1em;
    width: 100%;
    height: auto;
    top: auto;
    bottom: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    overflow: hidden;
    line-height: 2.2em;
    height: 2.2em;
  }
  
  #wrapper:not(.is-mobile) header #active-item svg path, #wrapper:not(.is-mobile) header #active-item svg polygon{
    fill: var(--lila);
  }
  

  #wrapper:not(.is-mobile) .label-poi{
    width: 50px;
    height: 50px;
  }
  
  #wrapper:not(.is-mobile) header .active-item-label{
    color: var(--lila);
    position: absolute;
    bottom: 0;
    top: auto;
    left: 0;
    width: 100%;
    background: white;
  }
  
  #wrapper:not(.is-mobile) header .active-item-label{
    -webkit-transform: translateY(-105%);
    transform: translateY(-105%);
    transition: transform 200ms ease-in-out;
    font-size: 1.2em;
    pointer-events: none;
  }

  #wrapper:not(.is-mobile) header #nav-item-bottom{
    display: none;
  }
  
  #wrapper:not(.is-mobile) .timeline-wrapper{
    font-size: 1.1rem;
    max-width: 1200px;

  }    
  
  #wrapper:not(.is-mobile) #overlay-scrollable-wrapper{
    width: calc(100% - 40px);
    margin: 0 20px;
  }
  
  #wrapper:not(.is-mobile) .overlay-drawer{
    font-size: 1rem;
  } 
  
  #wrapper:not(.is-mobile) .drawer-section img {
    margin: 0;
    width: auto;
    height: 10rem;
  }
  
  .drawer-section:not(.is-mobile) .drawer-section-text-intro{
    font-size: 1.1rem
  }
  
  .drawer-section:not(.is-mobile) .drawer-section-text-small{
    font-size: .8rem
  }
  
  #wrapper:not(.is-mobile) #frauen-container{
    width: 20rem;
  }
  
  #wrapper:not(.is-mobile) .drawer-section .rfr{
    height: 2.6rem !important;
    left: -3.7rem;
    top: -2.1rem;
  }
  
  #wrapper:not(.is-mobile) .drawer-section #button-start-next {
    width: .4em;
    height: auto;
  }
  
  #wrapper:not(.is-mobile) .drawer-section .overlay-button {
    width: 16rem;
  }
  
  #wrapper:not(.is-mobile) .drawer-section img.image-margins-1{
    margin: -3rem 0;
  }

  #wrapper:not(.is-mobile) .drawer-section img.image-margins-2{
    margin: 2rem 0 0 0;
  }

  #wrapper:not(.is-mobile) .drawer-section img.image-margins-3{
    margin: 2rem 0 1rem 0;
  }

  #wrapper:not(.is-mobile) .drawer-section img.image-margins-4{
    margin: 2rem 0 0 0;
    height: 12rem;
  }
  #wrapper:not(.is-mobile) .drawer-section img.image-margins-5{
    margin: -3rem 0 -.8rem 0;
  }
  #wrapper:not(.is-mobile) .overlay-drawer-wrapper{
    height: 45rem;
    max-height: calc(100% - 15em) !important;
  }
  
  #wrapper:not(.is-mobile) #muffel-container{
    width: 75vh;
    max-width: 500px;
  }
  #wrapper:not(.is-mobile) #muffel-confetti-container{
    width: calc(75vh - 96px);
    max-width: 500px;
    height: calc(83vh - 106px);
    max-height: 550px;
    padding: 0 !important;
  } 
  #wrapper:not(.is-mobile) #overlay-muffel-confetti {
    height: calc(100% - 128px);
  }
  #wrapper:not(.is-mobile) #ar-button{
    width: 3rem;
    -webkit-transform: translate(150%,200%);
    transform: translate(150%,200%);
    right: 15px;
  }
  
  #wrapper:not(.is-mobile) #ar-button.is-active{
    -webkit-transform: translate(0%,200%);
    transform: translate(0%,200%);
  }
  
  #wrapper:not(.is-mobile) .overlay-mid{
    height: calc(100vh - 230px);
    top: 165px;
    font-size: 2vh;
    font-size: calc(70vh - 161px);
  }   
  #wrapper:not(.is-mobile) .overlay-mid .nav-toggle{
    width: 40px;
    height: 40px;
    
  }   
  #wrapper:not(.is-mobile) .overlay-mid .nav-toggle .nav-toggle-line{
    height: 3px;
  } 
  
  #wrapper:not(.is-mobile) .overlay-mid .drawer-background{
    background: var(--rot)
  } 
  #wrapper:not(.is-mobile) .overlay-mid-wrapper{
    width: 70%;
    height: 70%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
  }
  
  #wrapper:not(.is-mobile) .overlay-mid-center{
    margin: 0;
  }
  
  #wrapper:not(.is-mobile) .drawer-section-spacer{
    display: none;
  }
  
  #wrapper:not(.is-mobile) #qrCode {
    display: block;
    height: 0.5em;
    margin: 0.06em 0 0.06em 0;
  }

  #wrapper:not(.is-mobile) #zyklusNextImg {
    display: block;
    height: 0.5em;
    margin: 0;
  }
  #wrapper:not(.is-mobile) .overlay-mid .drawer-section-text {
    margin: .1em .1em .05em .1em;
    margin: 0;
    font-size: .05em;
    line-height: 1.4em
  }
  #nav-item-lang{
    position: absolute !important;
    right: 0;
  }
}
@media screen and (min-height: 720px){
  #wrapper:not(.is-mobile) .overlay-mid .drawer-section-text {
    font-size: 1rem;
  }
}

@media screen and (min-width: 820px) {
  #wrapper:not(.is-mobile) .header-content{
    display: block;
  }
  #wrapper:not(.is-mobile) header nav{
    width: auto;
    margin-left: 0;
  }
  #wrapper:not(.is-mobile) header .nav-item {
    min-width: 120px;
    text-align: center;
  }
}

@media (orientation: landscape) {
  
  #wrapper.is-mobile header {
    
    font-size: 3.8vh;
  
  }
  
  #wrapper.is-mobile header .logo img{
    height: 10vh;
    margin-top: 1.25vh;
    margin-bottom: 1.25vh;
    margin-left: 1.8vh;
    display: block;
  }
  
  #wrapper.is-mobile header .nav-toggle,#wrapper.is-mobile .overlay-mid .nav-toggle{
    width: 10vh;
    height: 10vh;
    right: 1.8vh;
    top: 1.25vh;
  }
  #ar-button{
    width: 10vh;
  }
  
  #wrapper.is-mobile .overlay-mid{
    font-size: 3vh;
    height: calc(100% - 12.5vh);
  }
  
  #wrapper.is-mobile .overlay-mid .drawer-section-text{
    margin: 1em 1em .5em 1em;
  }
  #wrapper.is-mobile .overlay-mid .drawer-section img{
    height: 8em;
  }
  #wrapper.is-mobile .overlay-mid #bewegDichImg{
    height: 10em;
    margin-left: -2em;
  }
  #wrapper.is-mobile .overlay-mid .drawer-section img.overlay-button{
    height: 4em;
    width: auto;
    margin: 1em 0em;
  }
  #wrapper.is-mobile .drawer-section-spacer{
    height: 2em;
  }
  #wrapper.is-mobile .drawer-section-splitter{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #wrapper.is-mobile .drawer-section-splitter .drawer-section{
    width: 17em;
    height: 15em;
    display: flex;
    justify-content: flex-start;
    white-space: nowrap;
  }
}

.scrollable-content:not(.is-active){
  display: none;
}

#drawer-container[data-activedrawer="0"] #drawer-intro,
#drawer-container[data-activedrawer="1"] #drawer-product-1,
#drawer-container[data-activedrawer="2"] #drawer-product-2,
#drawer-container[data-activedrawer="3"] #drawer-product-3,
#drawer-container[data-activedrawer="4"] #drawer-product-4,
#drawer-container[data-activedrawer="5"] #drawer-product-5
{
  display: block;
}
#drawer-container[data-activedrawer="0"] #drawer-content-intro.is-hidden,
#drawer-container[data-activedrawer="0"] #drawer-content-intro:not(.is-hidden) #drawer-content-body
{
  display: none;
}


model-viewer{
  display: none;
}

#overlay-muffel,
#overlay-muffel-confetti {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 90%;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#muffel-container,
#muffel-confetti-container{
  position: absolute;
  width: 80vh;
  max-width: 100vw;
  height: 0;
  margin-top: 0%;
  padding-bottom: 128%;
  overflow: hidden;
  z-index: 20;
}
#muffel-confetti-container{
  padding-bottom: 110%;
}

#muffel-confetti-container{
  z-index: 21;
}
#muffel-container img,
#muffel-confetti-container img{
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  bottom: 0;
  margin: auto;
}

#muffel-confetti-container #muffel-confetti-img{
  width: 65%;
  left: -3%;
  bottom: -53%;
  top: auto;
}
#muffel-confetti-container #muffel-confetti-text{
  width: 60%;
  right: 5%;
  top: 2.5%;
  bottom: auto;
  transition: opacity 0.2s ease-out, transform 0.3s cubic-bezier(0.4, 0.0, 0.6, 1.2);
  -webkit-transform: scale(.5,.1) rotate(20deg);
  transform: scale(.5,.1) rotate(20deg);
  opacity: 0;
  transform-origin: 8% 100%;
}
#muffel-confetti-container.is-visible #muffel-confetti-text{
  transition-delay: 0.3s;
  -webkit-transform: scale(1) rotate(0deg);
  transform: scale(1) rotate(0deg);
  opacity: 1;
}
#muffel-confetti-container #muffel-confetti-button-img{
  width: 100%;
  height: auto;
  position: relative;
  transition: transform 0.5s;
}

#muffel-confetti-container #muffel-confetti-button-img:hover{
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
#muffel-confetti-container #muffel-confetti-button-img:hover + #muffel-confetti-logo-img{
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

#muffel-confetti-container.is-visible #muffel-confetti-button{
  transition-delay: 0.5s;
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  pointer-events: all;
  cursor: pointer;
}
#muffel-confetti-container #muffel-confetti-logo-img{
  position: absolute;
  height: 80%;
  width: auto;
  left: 30%;
  pointer-events: none;
  transition: transform 0.2s;
}

#muffel-container #muffel-img,
#muffel-confetti-container #muffel-confetti-img,
#muffel-container #muffel-deadend-img{
  transition: all 0.4s cubic-bezier(.4, 0, .38, 1.33);
}
#muffel-container #lupe-img,
#muffel-container #muffel-deadend-schild-img{
  transition: all .5s cubic-bezier(.4, 0, .35, 1.29);
}

#muffel-confetti-container #muffel-confetti-img,
#muffel-container #muffel-img,
#muffel-container #muffel-deadend-img,
#muffel-container #muffel-deadend-schild-img,
#muffel-container #lupe-img{
  top: 100%;
  opacity: 0;
}

#muffel-container.is-visible #muffel-img,
#muffel-confetti-container.is-visible #muffel-confetti-img,
#muffel-container.is-visible #lupe-img{
  top: 0;
  opacity: 1;
}

#muffel-container #muffel-deadend-img,
#muffel-container #muffel-deadend-schild-img{
  max-height: 50vh;
}


#muffel-container.is-visible-deadend #muffel-deadend-img,
#muffel-container.is-visible-deadend #muffel-deadend-schild-img{
  top: 0;
  opacity: 1;
}

#lupe-img{
  transform-origin: 60% 85%;
}
#muffel-container.is-visible #lupe-img{
  -webkit-animation: muffelLupeAnim .25s forwards 5 .2s;
  animation: muffelLupeAnim .25s forwards 5 .2s;
}
@-webkit-keyframes muffelLupeAnim {
   0%   {  -webkit-transform: rotate(0deg)}
   50%  {  -webkit-transform: rotate(15deg)}
   100% {  -webkit-transform: rotate(0deg)}
}
@keyframes muffelLupeAnim {
   0%   {  transform: rotate(0deg)}
   50%  {  transform: rotate(15deg)}
   100% {  transform: rotate(0deg)}
}

#label-container.is-pulsing .label-poi .label-poi-center{
  -webkit-animation: poiPulseAnimation 3s forwards 1 1s;
  animation: poiPulseAnimation 3s forwards 1 1s;
}

@-webkit-keyframes poiPulseAnimation {
   0%  {  -webkit-transform: scale(.9); background: var(--rot)}
   10% {  -webkit-transform: scale(1); background: var(--rosa)}
   33% {  -webkit-transform: scale(.9); background: var(--rot)}
   43% {  -webkit-transform: scale(1); background: var(--rosa)}
   66% {  -webkit-transform: scale(.9); background: var(--rot)}
   76% {  -webkit-transform: scale(1); background: var(--rosa)}
   100%{  -webkit-transform: scale(.9); background: var(--rot)}
}
@keyframes poiPulseAnimation {
   0%  {  transform: scale(.9); background: var(--rot)}
   10% {  transform: scale(1); background: var(--rosa)}
   33% {  transform: scale(.9); background: var(--rot)}
   43% {  transform: scale(1); background: var(--rosa)}
   66% {  transform: scale(.9); background: var(--rot)}
   76% {  transform: scale(1); background: var(--rosa)}
   100%{  transform: scale(.9); background: var(--rot)}
}

#drawer-container{
  z-index: 30;
}

#frauen-container{
  position: relative;
  overflow: hidden;
  width: 10rem;
  height: auto;
}

.image-frauen{
  width: 100%;
  height: auto !important;
  transition: left 0.4s cubic-bezier(.42, 0, .37, 1.45) 0.1s, opacity 0.4s cubic-bezier(.42, 0, .37, 1.45) 0.1s;
}

.image-frauen-left,
.image-frauen-right{
  position: absolute;
  left: 0;
  top: 0;
}

.image-frauen-left{
  left: 30%;
  left: 15%;
}
.image-frauen-right{
  position: absolute;
  left: -25%;
  left: -10%;
}

#drawer-container[data-activedrawer="0"].is-active .image-frauen
{
  opacity: 1;
  left: 0;
}

#wrapper:not(.intern) #nav-item-bottom a{
  display: none !important;
}
.icon-wink-inline{
  background-image: url(../img/produkte/overlays/zwinker-01.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 1.0em;
  height: 1.0em;
  margin-bottom: -.15em;
  display: inline-block;
}
.icon-clap-inline{
  background-image: url(../img/produkte/overlays/clap-hands-statt-daumen.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 1.4em;
  height: 1.4em;
  margin-bottom: -.2em;
  display: inline-block;
}

#overlay-mid:not(.ar-overlay) #ar-overlay-mobile{
    display: none;
}
#wrapper:not(.is-mobile) #overlay-mid:not(.ar-overlay) #ar-overlay-desktop{
    display: none;
}
#wrapper #overlay-mid:not(.zyklus-overlay) #zyklus-next-overlay{
    display: none;
}
#wrapper #overlay-mid.zyklus-overlay #ar-overlay-desktop,
#wrapper #overlay-mid.zyklus-overlay #ar-overlay-mobile{
    display: none;
}

#overlay-ar-weiter{
  text-decoration: underline;
  cursor: pointer;
}

#wrapper:not(.ar-ready) #ar-overlay-mobile{
    display: none;
}

#wrapper.ar-ready #ar-overlay-desktop{
    display: none;
}

#wrapper:not(.is-mobile).ar-ready #overlay-mid.ar-overlay .overlay-mid-wrapper{
    width: 100% !important;
    height: 100% !important;
}
#wrapper:not(.is-mobile).ar-ready .overlay-mid #ar-overlay-mobile .drawer-section-text{
  font-size: 1.8vh;
  margin: .5em;
}

#wrapper:not(.is-mobile).ar-ready .overlay-mid #ar-overlay-mobile{
  font-size: 1.8vh;
  margin: 0em;
}
#wrapper:not(.is-mobile).ar-ready .overlay-mid #ar-overlay-mobile #button-start-ar{
  height: auto;
  margin-top: 1em;
}

#wrapper:not(.ar-ready).is-mobile #ar-button{
  display: none;
}
#db{
    position: absolute;
    bottom: -23%;
    left: -23%;
    width: 150%;
    opacity: 0.5;
}

#body-timeline span{
  color: transparent !important;
}




/* DYNAMIC DRAWER SIZE */

#drawer-container, .overlay-drawer{
  display: flex;
  flex-direction: column;
  height: max-content;
}
.overlay-drawer-wrapper{
  height: max-content !important;
}
#overlay-scrollable-wrapper,
.overlay-drawer{
  position: relative;
}

#overlay-scrollable-wrapper{
  max-height: 65vh;
}

#drawer-container h1{
  margin-top: 0;
}
#overlay-drawer-toggle{
  position: absolute;
}
#ar-overlay-text{
  max-width: 70%;
}
.zyklus-interval span{
  font-size: .9em;
  letter-spacing: -0.07em;
}

#drawer-content-intro{
  margin-top: 2rem;
}



/* LANGUAGE MENU */

#nav-item-lang #menu_lang{
  padding: 0.22em 0.8em 0.22em 2.22em !important;
  position: relative;
}
#nav-item-lang,
#nav-item-lang .nav-item{
  position: relative;
  min-width: auto !important;
  /* width: auto; */
}

#menu_lang svg{
  height: 70% !important;
  width: auto;
  margin: 0;
  left: 0.8em;
  position: absolute;
}

.nav-item a{
  color: inherit;
  text-decoration: none;
  height: 2em;
  display: flex;
  align-items: center;
}
#menu_lang svg{
  fill: var(--lang-button--color);
}
#nav-item-lang:hover svg{
  fill: var(--lila);
}
#nav-item-lang:not(:hover) #menu_lang{
  color: var(--lang-button--color);
}

#menu-lang--current{
  padding: 0 !important;
  margin: 0 !important;
}
#sub-menu--lang a span{
  padding-left: 1.22em;
}