@charset "UTF-8";


/*reset*/

ul, ol, dl { 
	padding: 0;
	margin: 0;
}

a img { 
	border: none;
}

a:link {
    color: #c6c758;	
    text-decoration: none; 
}

a:visited {
    color: #c6c758;	
    text-decoration: none;
}

a:hover, a:active, a:focus {
	text-decoration: none;

}

/*Clearfix*/

.clearfix:after {clear:both;content:"."; display:block; height:0;visibility:hidden;}


/*HTML5 für ältere Browser*/

header,nav,section,article,aside,footer,hgroup {display: block;}



/*Typo*/



h1, h2, h3 { 
    color: #c6c758;
    margin: 0 auto;
    font-weight: 300;
    line-height: 130%; 
    text-align:center;
    font-size: 1.4em;
    width:90%;
    }

h1 {
    width: 80%;
    position: relative;
    top: 9em;
	color:#c6c758;
    }

h3 {
    margin-top:2em;
    }


h2 a:link {
    border-bottom: 2px solid #c6c758;
    padding: 0 0.3em;
    }

h2 a:hover {
    background-color: #c6c758;
    color: #767676;
    border-bottom: 2px solid #c6c758;
    }

div section h3, div section h2{
    color:#767676;
    }

p {
	margin: 2em auto 3em;
	width:80%;
	text-align:center;
	color: #fff;
	}

p.span2{
	color: #373737;
	margin-top:1em;
	}
 

/*general properties*/


body {
    color: #c6c758;
    font: 95%/160% "Source Sans Pro",Arial, Helvetica,sans-serif;
    background-color:#767676;
    padding:0;
    margin:0;
    font-weight:300;
    letter-spacing:0.03em;
    }

section {	
	margin: 0 auto; 
    overflow:hidden;
	padding-bottom:3em;
	min-height: 38em;
	position:relative;
	}

section.interface {	
	padding-bottom:0;
	}

article {	
    margin-top:3em;
	min-height: 24em;
    }


.whitebg {
    background-color:#fff;
    width:100%
    }



.img {
    margin: 0 auto;
    text-align: center;
    height: auto;
    max-width: 100%;
    display:block;
}

.img.display{
	display:none;
}
.img.smartphone{
	margin-top:4em;
	margin-bottom:2em;
}



/*Sprite*/
.logo, .next, .instruments a.gridbtn, .instruments a.harpbtn, .instruments a.pianobtn, .next2, .back, .back2, .leapmotion, .facebook, .top, .beuth  {
    background: url("../images/sprite.png") no-repeat scroll 0 0 transparent;
}

.bg {
    height:550px;
	position:relative;
    }



.logo {
    background-position: -938px 0;
    height: 70px;
    position: relative;
    top: 3em;
    margin: 0 auto;
    width: 219px;
    }
.beuth {
    background-position: -200px -200px;
    height: 70px;
    margin: 0 auto;
    width: 158px;
    display:block;
    
    }


.bg_interface {
    background: url("../images/interface.jpg") no-repeat scroll 50% 0 transparent;
    width: 100%;
    height:400px;
    margin: 0 auto;
    margin-top:2em;
    background-size:373px 433px;
    -webkit-background-size:373px 433px;
    -moz-background-size:373px 433px;
    -o-background-size:373px 433px;
    }

.next {
    background-position: 0 -230px;
    text-indent: -20000px;
    height: 40px;
    width: 40px;
    display: block;
    margin: 0 auto;
    transition: background-position 0.3s;
    -webkit-transition: background-position 0.3s; 
    -moz-transition: background-position 0.3s; 
    -o-transition: background-position 0.3s; 
        position: relative;
    top: 1em;
    }
    
.leapmotion {
    background-position:0 -800px;
    text-indent: -20000px;
    height: 74px;
    width: 242px;
    display: block;
    margin: 9em auto 3em;
    }

.facebook {
    background-position:0 -880px;
    text-indent: -20000px;
    height: 74px;
    width: 74px;
    display: block;
    margin: 0em auto 3em;
    }
.next2 {
    background-position: -73px -230px;
    text-indent: -20000px;
    height: 40px;
    width: 40px;
    display: block;
    margin: 0 auto;
    transition: background-position 0.3s;
    -webkit-transition: background-position 0.3s; 
    -moz-transition: background-position 0.3s; 
    -o-transition: background-position 0.3s; 
    position: relative;
    top: 18em;
}

.top {
    background-position: 0 -354px;
    text-indent: -20000px;
    height: 40px;
    width: 40px;
    display: block;
    margin: 2em auto;
    transition: background-position 0.3s;
    -webkit-transition: background-position 0.3s; 
    -moz-transition: background-position 0.3s; 
    -o-transition: background-position 0.3s; 
    position: relative;
    top: 1em;
    }

.back {
    background-position:0 -296px;
    text-indent: -20000px;
    height: 35px;
    width: 40px;
    display: block;
    margin: 0 auto;
    transition: background-position 0.3s;
    -webkit-transition: background-position 0.3s;
    -moz-transition: background-position 0.3s;
    -o-transition: background-position 0.3s;
    position: relative;
    top: 1em;
    }

.back2 {
    background-position:-73px -296px;
    text-indent: -20000px;
    height: 35px;
    width: 40px;
    display: block;
    margin: 0 auto;
    transition: background-position 0.3s;
    -webkit-transition: background-position 0.3s;
    -moz-transition: background-position 0.3s;
    -o-transition: background-position 0.3s;
    position: relative;
    top: 18em;
    }


a:hover.back {
    background-position: 0 -301px;
    background-color:transparent;
    }

a:hover.back2 {
    background-position: -73px -301px;
    background-color:transparent;
    }


a:hover.next {
    background-position: 0 -225px;
    background-color:transparent;
    }


a:hover.next2 {
    background-position: -73px -225px;
    background-color:transparent;
    }


/*Instruments Choice*/

.instruments a {
    height: 140px;
    display: block;
    width: 91px;
    margin: 3em 10px;
    }

.instruments{
    overflow:hidden;
    width:111px;
    margin: 0 auto;
    }

.instruments a.gridbtn{
    background-position: 0 -450px;
    }

.instruments a.harpbtn{
    background-position: -178px -450px;
    }

.instruments a.pianobtn{
    background-position: -355px -450px;
    }

.instruments a:hover.gridbtn{
    background-position: 0 -621px;
    }

.instruments a:hover.harpbtn{
    background-position: -178px -621px;
    }

.instruments a:hover.pianobtn{
    background-position: -355px -621px;
    }

	

/*Tabs*/


ul.tabs {
    display: table;
    list-style: none;
    padding:0;
    margin: 0 auto 3em;
    }

ul.tabs li{
    float: left;
    }

ul.tabs li a {
    display: block;
    padding: 0.3em 0.4em 0.3em 0.7em;
    background-color: #545454;
    color: #c6c758;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    float: left;
    margin: 0.2em;
    border-radius: 7px;
    font-size: 1.2em;
    transition: background-color 0.3s, color 0.3s;
    -webkit-transition: background-color 0.3s, color 0.3s;
    }


ul.tabs li a.active {
    background-color: #4b4b4b;
    color: #ffee00;
    }






/*responsive slider*/

.rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 98%;
    max-width:746px;
    padding: 0;
    margin: 0 auto;
    }

.rslides li {
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0;
    }

.rslides li:first-child {
    position: relative;
    display: block;
    float: left;
    }

.rslides img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    border:none;
    } 



/*responsive video*/

.elastic-video {
	position: relative;
	padding-bottom: 55%;
	padding-top: 15px;
	height: 0;
	overflow: hidden;
}
.elastic-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.elastic-video-wrapper {
    width: 90%;
    margin: 0 auto 1em;
}




@media only screen 
and (min-width : 600px)  {
    h1, h2, h3 {
    width:80%;
    font-size: 1.5em;
    margin-top: 2em;
    margin-bottom:2em
    }
    
    h1 {
    top: 24em;
    }
    
    section {
    min-height: 50em;
    }
    .logo {	
    margin: 0 auto;
    background-position: -542px 0;
    width: 335px;
    top:6em;
    height:91px;
    }
    
    .bg {
    height:1024px;
    }
    
    article {	
    margin-top:3em;
    min-height: 45em;
    }
        
    
    .bg_interface {
    -webkit-background-size:746px 865px;
    -moz-background-size:746px 865px;
    height:629px;
    width:100%
    }
    
    .next2,.back2 {
    top: 35em;
    }

    .next,.back,.top {    
    top: 0em;
    }
      
    
    .instruments a{
    height: 140px;
    display: block;
    width: 91px;
    float:left;
    margin: 30px;
    }
    .instruments{
    overflow:hidden;
    width:453px;
    margin: 0 auto;
    }
    
    ul.tabs li a {
    padding: 0.3em 0.9em 0.3em 1em;
    margin: 0.5em;
    }
    .img.mt {
    margin-top: 5em;
    margin-bottom: 5em;
    }	
    
    .img.display{
    display:block;
    }
    .img.smartphone{
    display:none;
    }
	
}



@media only screen 
and (min-width : 768px)  {

	body {
	font-size: 100%;

	}
	.back,.top {
	 position:absolute;
    top: 47em;left:47%
    }

	.next {
	 position:absolute;
    top: 50em;left:47%
    }
    
	section {	
	min-height: 1024px;
	}
		
	article {	
	margin-top:3em;
	min-height: 33em;
	}
	
	
	.logo {
	background-position: 0 0;
	height: 174px;
	position: relative;
	top: 4em;
	margin:0 auto;
	width:513px;
	}	

	
	.bg_interface {
	margin-top:0;
	height:840px;
	}   
	
	.bg {
	height:1024px;
	}
	
	p {
	margin: 0 auto 3em;
	width:60%;
	}
	
	h1 {
	top: 12em;
	}
	ul.tabs li a:hover, ul.tabs li a.active {
	background-color: #4b4b4b;
	color: #ffee00;
	}	
	p.span2 {
	font-size: 0.8em;
	line-height: 130%;
	}

}






@media only screen 
and (min-width : 900px)  {


	section {	
	max-width: 980px;
	margin: 0 auto; 
	min-height:1000px;
	padding-bottom:3em;
	}
	
	section.interface {	
	min-height:780px;
	}
	
	
	article {
	margin-top: 1em;
	min-height: 36em;
	} 
	
	section.interface {
	padding-bottom:0
	}	
	
	
	.bg {
	height:800px;
	}
	
	h1 {
	font-size: 1.5em;
	position: relative;
	top: 11em
	}
	
	
	h3, h2 {
	width:80%;
    margin-top:2em;
    margin-bottom: 1em;
	}
	
	.next2, .back2  {
	top: 24em;
	}
	
    
    .back,.top {
	 position:absolute;
    top: 35em;left:47%
    }

	.next {
	 position:absolute;
    top: 37.5em;left:47%
    }
    
    .img.mt {
	margin-top: 3em;
	margin-bottom: 3em;
	}

    .bg_interface {
    -webkit-background-size:560px 649px;
    -moz-background-size:560px 649px;
    height:625px;
    margin-top:3em

    }
    .leapmotion {
    margin: 6em auto 6em;
    }
    p {
	margin: 0 auto 2em;
	width: 70%;
	}
	.elastic-video-wrapper {
    width: 65%;
    margin: 0 auto ;
	}
	p.span2 {
    width: 27%;
    float: left;
    text-align: left;
    margin-left: 8%;
    }
    p.span3 {
    width: 25%;
    float: left;
    text-align: left;
    padding-top: 1em;
    margin-left: 4%;
	}

	.box {
	width: 77%;
	margin: 0 auto;
	margin-top:5em;
	}


}

.impr {
font-weight: bold;
font-size: 10px;
text-align: right;
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
width: 40px;
margin-top: 160px;
float: right;
}

.impr a {
color: #efefef;
}

/* ...dein bisheriger kompletter Movoo-Code hier... */

/* ---------------------- */
/* Cookie Consent Banner  */
/* ---------------------- */

.consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: #150f10;
    color: #fff;
    z-index: 1000;
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
    font-size: 14px;
    line-height: 1.6;
    padding: 20px 40px;
    box-sizing: border-box;
}

.consent-banner.is-hidden {
    display: none;
}

.consent-banner-content {
    display: flex;
    align-items: center;
    gap: 32px;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.consent-banner-content > div:first-child {
    flex-grow: 1;
}

.consent-banner-content p {
    margin: 0;
    font-size: 14px;
}

.consent-banner-content a {
    color: #ffe600;
    text-decoration: underline;
    transition: color 0.2s;
}
.consent-banner-content a:hover {
    color: #fff34f;
}

.english-text {
    margin-top: 10px;
    opacity: 0.85;
    color: #bbbbbb;
}

.consent-banner-actions {
    display: flex; 
    align-items: center;
    flex-shrink: 0;
    gap: 10px;
}

.consent-banner-actions button,
.consent-button {
    background-color: #fff;
    color: #150f10;
    border: none;
    padding: 10px 22px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 14px;
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
    transition: background-color 0.18s;
    text-align: center;
}

.consent-banner-actions button#consent-decline-button {
    margin-left: 10px;
}

.consent-banner-actions button:hover,
.consent-button:hover {
    background-color: #c6c758;
    color: #150f10;
}

/* --- Iframe-Platzhalter (Vimeo etc.) --- */
.iframe-placeholder {
    background-color: #2a2826;
    border: none;
    height: 40px;
    min-height: auto;
    width: 280px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #c6c758;
    border-radius: 6px;
    margin: 0 auto;
    font-size: 14px;
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
}
.iframe-placeholder-button {
    background: transparent;
    border: none;
    color: #c6c758;
    cursor: pointer;
    text-decoration: underline;
    font-size: 13px;
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
    padding: 0 4px;
    margin-left: 10px;
}
.iframe-placeholder-button:hover {
    color: #fff;
    text-decoration: underline;
}