@font-face {
  font-display: swap;
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/pt-sans-narrow-v19-latin-regular.woff2') format('woff2'),
       url('../fonts/pt-sans-narrow-v19-latin-regular.ttf') format('truetype');
}


.bb-animation{
	display:flex;
	position:fixed;
	width:100%;
	height:100%;
	background:transparent;
	justify-content:center;
	align-items:center;
	left:0;
	top:0;
	bottom:0;
	right:0;
	z-index: 200;	
	background:rgba(39,52,139,0.5);
}

.bb-animation.show{
	display:flex !important;
}

.bb-animation .canvas{
	display:block;
	position:relative;
	aspect-ratio: 1617 / 1085;
	height:calc( 100vh - 200px );
	width:auto;
	box-shadow:5px 5px 15px rgba(39, 52, 139,0.5);
	overflow:hidden;
	
	transform:scale(0,0) rotate(-180deg);
	opacity:0;
	transition:.35s all ease;
	visibility:hidden;
}


@media(min-height:751px) and (max-aspect-ratio: 950 / 820 ){
	.bb-animation .canvas{
		height:auto;
		width:calc( 100vw - 20px );
	}
}

@media(max-height:750px){
	.bb-animation .canvas{
		height:calc( 100vh - 100px );
	}
}

@media(min-height:501px) and (max-aspect-ratio: 986 / 740 ){
	.bb-animation .canvas{
		height:auto;
		width:calc( 100vw - 20px );
	}
}

@media(max-height:500px){
	.bb-animation .canvas{
		height:calc( 100vh - 20px );
	}
}

@media(max-height:501px) and (max-aspect-ratio: 714 / 482 ){
	.bb-animation .canvas{
		height:auto;
		width:calc( 100vw - 20px );
	}
}

.bb-animation .canvas.show{
	visibility:visible;
	transform:scale(1,1);
	opacity:1;
	transition:.35s all ease;
}

.bb-animation .canvas .dummy{
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.bb-animation .canvas .ray{
	display:block;
	position:absolute;
	top:-5%;
	left:-5%;
	width:110%;
	height:110%;
	object-fit:cover;
	animation: rotateClockwise 7.5s linear infinite;
}

.bb-animation .canvas .shine{
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:transparent;
}

.bb-animation .canvas .shine::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;

  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255,255,255,0.5) 50%,
    transparent 60%
  );

  transform: translateX(-100%);
}

.bb-animation.anim .canvas .shine::after {
  animation: shineMove 8s ease-in-out infinite;
  animation-offset: 5s;
}

@keyframes shineMove {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.bb-animation .canvas .neu{
	display:block;
	position:absolute;
	width:15.3%;
	left:19.25%;
	top:6.3%;
	
	transform: scale(0);
	opacity: 1;
}

.bb-animation .canvas .limo{
	display:block;
	position:absolute;
	width:24%;
	left:15%;
	top:21.1%;
	
	transform: scale(0);
	opacity: 1;
}

.bb-animation .canvas .kracherl{
	display:block;
	position:absolute;
	width:44.3%;
	left:5.5%;
	top:17.5%;
	
	transform: scale(0);
	opacity: 1;
}

.bb-animation .canvas .bubble{
	display:block;
	position:absolute;
	width:41.6%;
	left:52%;
	top:9%;
	aspect-ratio: 1343 / 936;
	
	transform: scale(0);
	opacity: 1;
}

.bb-animation .canvas .bubble IMG{
	display:block;
	position:absolute;
	width:100%;
	left:0;
	top:0;
	right:0;
	bottom:0;
	height:100%;
}

.bb-animation .canvas .bubble .txt{
	display:block;
	position:absolute;
	width:100%;
	left:0;
	top:0;
	right:0;
	bottom:0;
	padding: 4.5% 5% 0 6.8%;
	color: #FFF;
	font-family: 'PT Sans Narrow';
	font-size: calc( ( 100vh - 200px ) * 0.0335 );
	line-height:1.32;
}

@media(min-height:751px) and (max-aspect-ratio: 950 / 820 ){
	.bb-animation .canvas .bubble .txt{
		font-size: calc( ( 100vw - 20px ) * 0.0226 );
	}
}

@media(max-height:750px){
	.bb-animation .canvas .bubble .txt{
		font-size: calc( ( 100vh - 100px ) * 0.0335 );
	}
}

@media(min-height:501px) and (max-aspect-ratio: 986 / 740 ){
	.bb-animation .canvas .bubble .txt{
		font-size: calc( ( 100vw - 20px ) * 0.0226 );
	}
}

@media(max-height:500px){
	.bb-animation .canvas .bubble .txt{
		font-size: calc( ( 100vh - 20px ) * 0.0335 );
	}
}

@media(max-height:501px) and (max-aspect-ratio: 714 / 482 ){
	.bb-animation .canvas .bubble .txt{
		font-size: calc( ( 100vw - 20px ) * 0.0226 );
	}
}

.bb-animation .canvas .bubble .txt SPAN{
	opacity: 0;
	transform: translateY(10px);
}

.bb-animation .canvas .bubble .txt SPAN.show{
	animation: fadeInWord 0.4s ease forwards;
}

@keyframes fadeInWord {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bb-animation .canvas .zucker{
	display:block;
	position:absolute;
	width:13%;
	left:75.7%;
	top:54.5%;
	
	transform: scale(0);
	opacity: 1;
}

.bb-animation .canvas .bua{
	display:block;
	position:absolute;
	width:19.1%;
	left:53.5%;
	top:55.2%;
	aspect-ratio:616 / 931;
	
	transform: scale(0);
	opacity: 1;
}

.bb-animation .canvas .bua IMG{
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	bottom:0;
	right:0;
}

.bb-animation .canvas .bua IMG.bua-auge{
	animation: auge 5s infinite;
}

.bb-animation .canvas .bua.sprechen IMG.bua-mund1{
	animation: mund1 .5s infinite;
}

.bb-animation .canvas .bua.sprechen IMG.bua-mund2{
	animation: mund2 .75s infinite;
}

.bb-animation .canvas .bua.still IMG.bua-auge{
	animation: auge 7.5s infinite;
}

.bb-animation .canvas .bua.still IMG.bua-mund1{
	display:block !important;
	opacity:1 !important;
}

.bb-animation .canvas .bua.still IMG.bua-mund2{
	display:none !important;
	opacity:0 !important;
}

.bb-animation .canvas .balken{
	display:block;
	position:absolute;
	width:100%;
	left:0;
	bottom:0;
	height:17.8%;
	background:#27348B;
}

.bb-animation .canvas .closex{
	display:block;
	position:absolute;
	width:2%;
	right:2.15%;
	top:2.8%;
}

.bb-animation .canvas .closex IMG{
	display:block;
	position:relative;
	width:100%;
	height:auto;
}

.bb-animation .canvas .closex:hover{
	transform:scale(1.25,1.25);
}

.bb-animation .canvas .weitere-infos{
	display:block;
	position:absolute;
	width:16.8%;
	right:18.7%;
	bottom:7.5%;
	
	transform: scale(0);
	opacity: 1;
}

.bb-animation .canvas .weitere-infos IMG{
	display:block;
	position:relative;
	width:100%;
	height:auto;
}

.bb-animation .canvas .weitere-infos.ready:hover{
	transform:scale(1.05,1.05) !important;
}

.bb-animation .canvas .holunder{
	display:block;
	position:absolute;
	width:14.9%;
	left:11.0%;
	top:50.6%;
	
	transform: scale(0);
	opacity: 1;
}

.bb-animation .canvas .kraeuter{
	display:block;
	position:absolute;
	width: 15.0%;
	left: 30.0%;
	top: 50.6%;
	
	transform: scale(0);
	opacity: 1;
}

.bb-animation .canvas .himbeere{
	display:block;
	position:absolute;
	width: 13.5%;
	left: 21.2%;
	top: 47.9%;
	
	transform: scale(0);
	opacity: 1;
}

@media(max-width:679px){
	.bb-animation .canvas{
		aspect-ratio: 589 / 1009 !important;
		height:calc( 100vh - 130px ) !important;
		width:auto !important;
	}
	
	.bb-animation .canvas .dummy{ display:none; }	
	.bb-animation .canvas .ray{   }
	.bb-animation .canvas .bubble, .bb-animation .canvas .bua, .bb-animation .canvas .zucker{ display: none !important; }
	
	.bb-animation .canvas .closex {
	  width: 5.5%;
	  right: 6.2%;
	  top: 2.9%;
	}
	
	.bb-animation .canvas .neu {
		width: 30%;
		left: 34%;
		top: 10.5%;
	}
	
	.bb-animation .canvas .kracherl {
		width: 85%;
		left: 8%;
		top: 19.5%;
	}
	
	.bb-animation .canvas .limo {
		width: 46%;
		left: 26%;
		top: 22%;
	}
	
	.bb-animation .canvas .balken {
		height: 11.2%;
		z-index:11;
	}
	
	.bb-animation .canvas .weitere-infos {
		width: 48%;
		right: 26%;
		bottom: 4%;
		z-index:12;
	}
	
	.bb-animation .canvas .holunder {
		width: 40%;
		left: 5.5%;
		top: 48.5%;
	}
	
	.bb-animation .canvas .kraeuter {
		width: 40%;
		left: 54.0%;
		top: 48%;
	}
	
	.bb-animation .canvas .himbeere {
		width: 38%;
		left: 30.8%;
		top: 45.5%;
	}
	
	.bb-animation .canvas .shine::after {
	  content: "";
	  position: absolute;
	  top: -100%;
	  left: -100%;
	  width: 300%;
	  height: 300%;
	  transform: translateX(-150%);
	}

	.bb-animation.anim .canvas .shine::after {
	  animation: shineMoveMob 8s ease-in-out infinite;
	  animation-offset: 5s;
	}
}

@media(max-width:679px) and (max-aspect-ratio: 422 / 747){
	.bb-animation .canvas{
		width:calc( 100vw - 20px ) !important;
		height:auto !important;
	}
}

@keyframes shineMoveMob {
	  0% {
		transform: translateX(-150%);
	  }
	  50% {
		transform: translateX(150%);
	  }
	  100% {
		transform: translateX(150%);
	  }
	}

/* Animstart */
.bb-animation.anim .canvas .weitere-infos{
	animation: popBounce 1.0s cubic-bezier(0.18,0.4,.6,1) forwards;
	animation-delay:3.0s;
}

.bb-animation.anim .canvas .ready{
	animation none !important;
	transform: scale(1);
}

.bb-animation.anim .canvas .neu{
	animation: popBounce 1.0s cubic-bezier(0.18,0.4,.6,1) forwards;
	animation-delay:0s;
	transform-origin: center;
}

.bb-animation.anim .canvas .limo{
	animation: popBounceSimple .4s cubic-bezier(0.18,0.4,.6,1) forwards;
	animation-delay:1.75s;
}

.bb-animation.anim .canvas .kracherl{	
	animation: popBounceSimple .4s cubic-bezier(0.18,0.4,.6,1) forwards;
	animation-delay:1.25s;
}

.bb-animation.anim .canvas .bubble{
	animation: bubbleIn .2s cubic-bezier(0.18,0.4,.6,1) forwards;
	animation-delay:4.0s;
}
.bb-animation.anim .canvas .zucker{
	animation: zuckerIn .3s cubic-bezier(0.18,0.4,.6,1) forwards;
	animation-delay:8.5s;
}
.bb-animation.anim .canvas .bua{
	animation: buaIn .5s cubic-bezier(0.18,0.4,.6,1) forwards;
	animation-delay:3s;
}
.bb-animation.anim .canvas .holunder{
	animation: bottleIn .5s cubic-bezier(0.18,0.4,.6,1) forwards;
	animation-delay:2.25s;
}
.bb-animation.anim .canvas .kraeuter{	
	animation: bottleIn .5s cubic-bezier(0.18,0.4,.6,1) forwards;
	animation-delay:2.45s;
}
.bb-animation.anim .canvas .himbeere{
	animation: bottleIn .5s cubic-bezier(0.18,0.4,.6,1) forwards;
	animation-delay:2.6s;
}

.bb-animation.anim .canvas .holunder.shaking{
	animation: shaking 6s infinite;
	transform: scale(1);
}

.bb-animation.anim .canvas .kraeuter.shaking{
	animation: shaking 6s infinite;
	animation-delay:1.0s;
	transform: scale(1);
}

.bb-animation.anim .canvas .himbeere.shaking{
	animation: shaking 6s infinite;
	animation-delay:1.5s;
	transform: scale(1);
}

.bb-animation.anim .canvas .neu.shaking{
	animation: shaking 4s infinite;
	animation-delay:5s;
	transform: scale(1);
}

.bb-animation.anim .canvas .zucker.pulsating{
	animation: pulsating 3s infinite;
	animation-delay:0s;
	transform: scale(1);
}

.bb-animation.anim .canvas .limo.pulsating{
	animation: pulsating2 5s infinite;
	animation-delay:0s;
	transform: scale(1);
}

.bb-animation.anim .canvas .kracherl.pulsating{	
	animation: pulsating2 5s infinite;
	animation-delay:0s;
	transform: scale(1);
}

@keyframes pulsating2 {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@keyframes pulsating {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes shaking {
  0%   { transform: translateX(0); }
  2%   { transform: translateX(-3px) rotate(-2deg); }
  4%   { transform: translateX(3px) rotate(2deg); }
  6%   { transform: translateX(-3px) rotate(-2deg); }
  8%   { transform: translateX(3px) rotate(2deg); }
  10%  { transform: translateX(-2px) rotate(-1deg); }
  12%  { transform: translateX(2px) rotate(1deg); }
  14%  { transform: translateX(-1px); }
  16%  { transform: translateX(1px); }
  18%  { transform: translateX(0); }
  20%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}

@keyframes rotateClockwise {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(2deg) scale(1.05,1.05);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes popBounce {

  0% {
    transform: scale(0) rotate(-10deg);
    opacity: 0;
  }

  40% {
    transform: scale(1.15) rotate(6deg); /* Overshoot */
    opacity: 1;
  }

  55% {
    transform: scale(0.95) rotate(-4deg);
	opacity: 1;
  }

  70% {
    transform: scale(1.05) rotate(2deg);
  }

  85% {
    transform: scale(0.98) rotate(-1deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes popBounceSimple {

  0% {
    transform: scale(2);
    opacity: 0;
  }

  100% {
    transform: scale(1);
	opacity: 1;
  }
}

@keyframes bottleIn {

  0% {
    transform: translate(-10%,100%);
    opacity: 0;
  }

  100% {
    transform: translate(0%,0%);
	opacity: 1;
  }
}

@keyframes buaIn {

  0% {
    transform: translate(-10%,100%) scale(0.5) rotate(10deg);
    opacity: 0;
  }

  100% {
    transform: translate(0%,0%);
	opacity: 1;
  }
}

@keyframes bubbleIn {

  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  100% {
    transform: scale(1.0);
	opacity: 1;
  }
}

@keyframes zuckerIn {

  0% {
    transform: scale(5);
    opacity: 0;
  }
  
  87% {
    transform: scale(0.85);
	opacity: 1;
  }
  
  97% {
    transform: scale(1.08);
	opacity: 1;
  }
  
  99% {
    transform: scale(0.96);
	opacity: 1;
  }

  100% {
    transform: scale(1.0);
	opacity: 1;
  }
}

@keyframes auge {

  0% {
    opacity: 0;
  }
  
  30% {
    opacity: 0;
  }
  
  31% {
    opacity: 1;
  }
  
  39% {
    opacity: 1;
  }
  
  40% {
    opacity: 0;
  }
  
  84% {
    opacity: 0;
  }
  
  85% {
    opacity: 1;
  }
  
  90% {
    opacity: 1;
  }
  
  91% {
    opacity: 0;
  }

  100% {
	opacity: 0;
  }
}

@keyframes mund1 {

  0% {
    opacity: 0;
  }
  
  30% {
    opacity: 0;
  }
  
  31% {
    opacity: 1;
  }
  
  51% {
    opacity: 1;
  }
  
  52% {
    opacity: 0;
  }
  
  75% {
    opacity: 0;
  }
  
  76% {
    opacity: 1;
  }
  
  91% {
    opacity: 1;
  }
  
  92% {
    opacity: 0;
  }

  100% {
	opacity: 0;
  }
}

@keyframes mund2 {

  0% {
    opacity: 1;
  }
  
  30% {
    opacity: 1;
  }
  
  31% {
    opacity: 0;
  }
  
  51% {
    opacity: 0;
  }
  
  52% {
    opacity: 1;
  }
  
  75% {
    opacity: 1;
  }
  
  76% {
    opacity: 0;
  }
  
  91% {
    opacity: 0;
  }
  
  92% {
    opacity: 1;
  }

  100% {
	opacity: 1;
  }
}