/* neucha-regular - latin */
@font-face {
  font-family: 'Neucha';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/neucha-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Neucha'),
       url('../fonts/neucha-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/neucha-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/neucha-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/neucha-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/neucha-v12-latin-regular.svg#Neucha') format('svg'); /* Legacy iOS */
}




/* ALLGEMEIN */

html {
	font-family: 'Neucha';
	font-weight: normal;
	font-size: 2.2vh;
	background: black;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

body {
	margin: 0;
	background: url('../img/hg.jpg') no-repeat fixed;
	background-size: auto 100vh;
}

* {box-sizing: inherit;}

img {max-width: unset;}

p {margin: 0.5em 0;}
a {color: #0168b3; text-decoration: none;}
a:hover {color: black;}

tr:nth-child(2n) {background: #0004;}
tr:nth-child(2n+1) {background: #fff4;}

td {vertical-align: top; padding: 4px 2px;}
td:first-child {min-width: 9em;}

.hidden {display: none;}
.linksbuendig p,
.linksbuendig table,
.boxen .block.linksbuendig p {text-align: left;}

.pn-ProductNav_Wrapper {
  position: relative;
  box-sizing: border-box;
  max-width: 217vh;
  /*margin: 0 auto;*/
}

.pn-ProductNav {
  /* Make this scrollable when needed */
  overflow-x: auto;
  /* We don't want vertical scrolling */
  overflow-y: auto;
  /* For WebKit implementations, provide inertia scrolling */
  -webkit-overflow-scrolling: touch;
  /* We don't want internal inline elements to wrap */
  /*white-space: nowrap;*/
  /* If JS present, let's hide the default scrollbar */
  /* positioning context for advancers */
  position: relative;
}
.js .pn-ProductNav {
  /* Make an auto-hiding scroller for the 3 people using a IE */
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
  /* Remove the default scrollbar for WebKit implementations */
.js .pn-ProductNav::-webkit-scrollbar {
  display: none;
}

.pn-ProductNav_Contents {
  /*height: 100vh;*/
  float: left;
  transition: -webkit-transform 2s ease-in-out;
  transition: transform 2s ease-in-out;
  transition: transform 2s ease-in-out, -webkit-transform 4s ease-in-out;
  position: relative;
  overflow: hidden;
}

.pn-ProductNav_Contents-no-transition {
  transition: none;
}

.pn-ProductNav_Link {
	display: none;
}

.pn-Advancer {
  /* Reset the button */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  padding: 0;
  border: 0;
  /* Now style it as needed */
  position: absolute;
  top: 0;
  bottom: 0;
  /* Set the buttons invisible by default */
  opacity: 0;
  transition: opacity .3s;
}
.pn-Advancer:focus {
  outline: 0;
}
.pn-Advancer:hover {
  cursor: pointer;
}

.pn-Advancer_Left {
  left: 5px;
}
[data-overflowing="both"] ~ .pn-Advancer_Left, [data-overflowing="left"] ~ .pn-Advancer_Left {
  opacity: 1;
}

.pn-Advancer_Right {
  right: 5px;
}
[data-overflowing="both"] ~ .pn-Advancer_Right, [data-overflowing="right"] ~ .pn-Advancer_Right {
  opacity: 1;
}

.pn-Advancer_Left img {transform: rotate(180deg);}
.pn-Advancer img {width: 34px;}
.pn-Advancer img:hover {opacity: 0.5;}


/******** Objekte *********/

.objekt {
	cursor: pointer;
	position: absolute;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.objekt img {width: 100%; cursor: url("../buehne-img/cursor-pointer.png"), pointer;}


.beweglich .rot {transition: 0.3s;}
.beweglich .rot:hover {filter: sepia(1);}



/******** unsichtbare Objekte (klickbare Flächen) *********/

/* DEV */
/* .unsichtbar div {background: #f004;} /*

#obj_hackbrett {
  top: 50.5vh; left: 126vh; width: 19vh; height: 18vh;
}
#obj_zither {
  top: 36vh; left: 93vh; width: 23vh; height: 8vh;;
}

#obj_bawue {
  top: 46vh; left: 91vh; width: 28vh; height: 5.5vh;
}
#obj_aaa {
  top: 50vh; left: 100vh; width: 10vh; height: 5vh;
}
#obj_aaa {
  top: 50vh; left: 100vh; width: 10vh; height: 5vh;
}
#obj_aaa {
  top: 50vh; left: 100vh; width: 10vh; height: 5vh;
}


/* Unsichtbare Objekte bei Hover hervorheben */
.unsichtbar .rot,
#obj_metronom {
	transition: opacity 0.3s; z-index: 1;
}
.unsichtbar .rot::before,
#obj_metronom::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: radial-gradient(circle, rgba(255,255,0,0.5) 0%, rgba(0,0,0,0) 60%);
  z-index: -1;
  transition: opacity 0.3s linear;
  opacity: 0;
}
.unsichtbar .rot:hover::before,
#obj_metronom:hover::before {
  opacity: 1;
}



.unsichtbar img {height: 100%;}




/* ******* bewegliche Objekte ******** */

/* DEV */
/* .objekt {opacity: 0.7;} */
/* Akkordeon */
#obj_akkordeon {
	top: 47.2vh;
    left: 23.8vh;
}
#obj_akkordeon {
	top: 47.2vh;
    left: 23.8vh;
}
#obj_akkordeon img {width: 11.4vh;}
#obj_akkordeon.clicked {animation-name: ani_akkordeon; animation-duration: 1s; transform-origin: 53% 75%; animation-timing-function: ease;}
@keyframes ani_akkordeon {
  0%   {}
  50%  {top: 47.2vh;}
  80%  {top: 46.2vh;}
  100% {} 
}

/* Geige */
#obj_geige {
	top: 69.3vh;
	left: 93vh;
}
#obj_geige img {width: 24.7vh;}
#obj_geige.clicked {animation-name: ani_geige; animation-duration: 2s; transform-origin: 53% 75%; animation-timing-function: linear;}
@keyframes ani_geige {
  0%   {}
  25%  {transform: rotate(20deg);}
  75%  {transform: rotate(-20deg);}
  100% {} 
}

/* Gitarre */
#obj_gitarre {
	top: 17.2vh;
	left: 48.7vh;
}
#obj_gitarre img {width: 11vh;}
#obj_gitarre.clicked {animation-name: ani_gitarre; animation-duration: 6s; transform-origin: 40% 95%; animation-timing-function: linear;}
@keyframes ani_gitarre {
  0%   {}
  25%  {transform: rotate(5deg);}
  75%  {transform: rotate(-2deg);}
  100% {} 
}

/* Mikro */
#obj_mikro {
	top: 55.6vh;
    left: 77.8vh;
}
#obj_mikro img {width: 7.7vh;}
#obj_mikro.clicked {animation-name: ani_mikro; animation-duration: 3s; transform-origin: 53% 75%; animation-timing-function: ease;}
@keyframes ani_mikro {
  0%   {}
  50%  {transform: rotate(50deg);}
  100% {} 
}

/* Saxofon */
#obj_saxofon {
	top: 55.7vh;
	left: 54.5vh;
}
#obj_saxofon img {width: 12.6vh;}
#obj_saxofon.clicked {animation-name: ani_saxofon; animation-duration: 2s; transform-origin: 50% 90%; animation-timing-function: linear;}
@keyframes ani_saxofon {
  0%   {}
  25%  {transform: rotate(5deg);}
  75%  {transform: rotate(-5deg);}
  100% {} 
}

/* Trompete */
#obj_trompete {
	top: 65.9vh;
	left: 43.3vh;
}
#obj_trompete img {width: 6.3vh;}
#obj_trompete.clicked {animation-name: ani_trompete; animation-duration: 4s; transform-origin: 50% 40%; animation-timing-function: ease;}
@keyframes ani_trompete {
  0%   {}
  15%  {top: 50vh; left: 45vh; transform: rotate(-100deg);}
  30%  {left: 46vh; transform: rotate(-90deg);}
  50%  {left: 43vh; transform: rotate(-110deg);}
  70%  {left: 44vh; transform: rotate(-100deg);}
  85%  {top: 50vh; left: 45vh; transform: rotate(-100deg);}
  100% {} 
}

/* AAA */
#obj_aaa {
	top: 40.7vh;
	left: 16.5vh;
}
#obj_aaa img {width: 6.5vh;}
#obj_aaa.clicked {animation-name: ani_aaa; animation-duration: 2s; transform-origin: 53% 75%; animation-timing-function: linear;}
@keyframes ani_aaa {
  0%   {}
  25%  {transform: rotate(20deg);}
  75%  {transform: rotate(-20deg);}
  100% {} 
}



/* LMJ */
#obj_lmj {
	top: 25.7vh;
	left: 126.2vh;
}
#obj_lmj img {width: 6.4vh;}
#obj_lmj.clicked {animation-name: ani_lmj; animation-duration: 0.5s; transform-origin: 53% 75%; animation-timing-function: linear;}
@keyframes ani_lmj {
  0%   {}
  35%  {top: 25vh;}
  100% {} 
}



/* Fliege */
#obj_fliege {
	top: 22.5vh;
	left: 52.1vh;
	animation: ani_fliege 10s;
	animation-timing-function: ease-in-out;
}
#obj_fliege img {width: 2.6vh;}
@keyframes ani_fliege {
  0%   {top: 22vh; left: 50.7vh;}
  33%  {top: 22.9vh; left: 52.5vh;}
  66%  {top: 22.5vh; left: 50.7vh;}
  100% {top: 22vh; left: 50.7vh;} 
}
#obj_fliege.clicked {animation: ani_fliege_active 20s;}
@keyframes ani_fliege_active {
  10%  {top: 31vh; left: 105.5vh; animation-timing-function: ease-in-out;}
  25%  {top: 28vh; left: 170vh;}
  30%  {top: 30vh; left: 170vh;}
  45%  {top: 63vh; left: 145vh;}
  50%  {top: 62vh; left: 144vh;}
  65%  {top: 7.5vh; left: 121vh;}
  85%  {top: 8.3vh;  left: 63.8vh;}  
  100% {top: 22vh; left: 50.7vh;} 
}

/* Lampe */
#obj_lampe {
	left: 183.4vh;
    top: 26.3vh;
}
#obj_lampe img {width: 12vh; filter: saturate(0.4) brightness(0.8); transition: 1s;}
#obj_lampe.clicked img {filter: saturate(1.3) brightness(1);}


/* Metronom */
#obj_metronom {
	top: 40.7vh;
	left: 16.5vh;
}
#obj_metronom img {width: 6.5vh;}
#obj_metronom.clicked {animation-name: ani_metronom; animation-duration: 2s; transform-origin: 53% 75%; animation-timing-function: linear;}
@keyframes ani_metronom {
  0%   {}
  25%  {transform: rotate(20deg);}
  75%  {transform: rotate(-20deg);}
  100% {} 
}


/* Social: Facebook / Instagram / YouTube */
#obj_facebook {
	left: 145.6vh;
	top: 83.7vh;
}
#obj_facebook img {width: 5vh;}
#obj_facebook.clicked {animation-name: ani_social; animation-duration: 1s; transform-origin: 50% 25%; animation-timing-function: ease;}

#obj_instagram {
	left: 131.7vh;
	top: 87.2vh;
}
#obj_instagram img {width: 5.4vh;}
#obj_instagram.clicked {animation-name: ani_social; animation-duration: 1s; transform-origin: 50% 25%; animation-timing-function: ease;}

#obj_youtube {
	left: 118.6vh;
	top: 90vh;
}
#obj_youtube img {width: 5.2vh;}
#obj_youtube.clicked {animation-name: ani_social; animation-duration: 1s; transform-origin: 50% 25%; animation-timing-function: ease;}


@keyframes ani_social {
  0%   {}
  25%  {transform: rotate(10deg);}
  75%  {transform: rotate(-6deg);}
  100% {} 
}


/* Spende */
#obj_spende {
	top: 34.7vh;
	left: 28.4vh;
}
#obj_spende img {width: 5vh;}
#obj_spende.clicked {animation-name: ani_spende; animation-duration: 0.5s;}
@keyframes ani_spende {
  0%   {}
  45%  {top: 30vh; animation-timing-function: ease-in;}
  100% {} 
}


/* Stern */
#obj_stern {
	left: -2vh;
	top: -12vh;
    animation-name: stern_pendelt;
	transform-origin: 50% 0;
	animation-duration: 3s;
	animation-timing-function: ease-in-out;
}
@keyframes stern_pendelt {
  0%   {transform: rotate(-0.6deg);}
  50%  {transform: rotate(0.6deg);}
  100% {transform: rotate(-0.6deg);} 
}


#obj_stern img {width: 32vh;}
#obj_stern .stern-an {position: absolute; opacity: 0; transition: 1s;}

#obj_stern.clicked .stern-an {opacity: 1;}






.background {width: 164.6vh; height: auto; cursor: url("../buehne-img/cursor.png"), auto;}

area {cursor: url("../buehne-img/cursor-pointer.png"), pointer;}



/* Boxen */
.boxen {position: fixed; top: 0; z-index: 1;}

.boxen .block {
	display: none;
	position: absolute;
	width: 320px;
	max-width: 80vw;
	max-height: 50vh;
	background: white;
	overflow: hidden;
	overflow-y: scroll;
	padding: 5px 10px;
	text-align: center;
	border: 2px solid black;
	border-radius: 3px;
	box-shadow: 0 0 5px #0005;
}
.boxen .active {display: block;}
.boxen h2 {display: none;}
.boxen h3 {text-transform: uppercase;}
.boxen a:hover {color: black; background: #fff;}

.boxen #metronom {margin-left: 9vh;}
.boxen #stern {margin-left: 9vh;}
.boxen #virus {width: 320px;}
.boxen #wolle {margin-left: 9vh;}



/* Footer */
#footer {position: absolute; right: 0; bottom: 0; font-size: 0.6em;}
#footer ul {list-style: none;}
#footer li {display: inline-block; padding-right: 1em;}
#footer a {color: white; text-decoration: none;}




/*********** SCHMAL ***********/
@media (max-width:550px) {

.boxen .block {margin-left: -40px;}

}


/*********** HOCH ***********/
@media (min-height:800px) {
	
  html {font-size: 17px;}
 
}