* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -ms-content-zooming: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family:"Open Sans";
  font-size: 1em;
  background-color: #3f3b38;
  color: #fff;
}

body.mobile{
	font-size:75% !important;
}
body.mobile .icon{
	font-size:120%;
}
body.desktop{
	font-size:85%;
}
body.desktop .icon{
	font-size:140%;
}

a, a:hover, a:active, a:visited {
  text-decoration: none;
  color: inherit;
  outline:0;
  img{background:transparent;
  -webkit-tap-highlight-color: rgba(0,0,0,0);}
  transition-property: color;
  transition-duration: 0.3s;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}


#pano {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#pano > div > div:first-child{
	background-color:transparent !important;
	opacity:1 !important;
	background-image:radial-gradient(closest-side,transparent 50%,rgba(39,35,32,0.3) 80%, rgba(39,35,32,0.8) 130%), linear-gradient(transparent 0%,transparent 80%,rgba(39,35,32,.4) 100%), linear-gradient(transparent 100%,transparent 20%,rgba(39,35,32,.4) 0%);

	}


#titleBar{
	position:absolute;
	top:12em;
	left:50%;
	transform:translateX(-50%);
	text-align:center;
	text-transform:uppercase;
	text-shadow: #222 1px 1px 2px;
	font-size:1.0em;
	
}
#titleBar .sceneName {

  padding:.5em 1em;
  border: 1px solid #fff;
}



#controlBar{
	text-align:center;
	position:fixed;
	bottom:calc(2.5em + 4vh);
	width:100%;
	text-shadow: #222 1px 1px 2px;
	height:0;
}
#controlBar > a{
	position:relative !important;	
	display:block;
	left:auto;
	
}
#controlBar .text{
   font-family:"Open Sans";
}


@keyframes hint_animation {
    0% {
			opacity:1;
			top:50%;
		}
   50% {
			opacity:1;
			top:50%;
		}
	90% {
			opacity:0;
			top:50%;
		}
	100%{
			opacity:0;
			top:-100%;
		}
}
.hint{
	display:none;
	position:absolute;
	top:50%;
	left:50%;
	transform:translateX(-50%) translateY(-50%);
	font-size:320%;
	color:rgba(255,255,255,.4);
	opacity:1;
	text-align:center;
	/*transition: 10s opacity 1s, 1s top .1s; */
	//text-shadow: #222 1px 1px 2px;
	
	animation-name: hint_animation;               
    animation-duration: 1.2s;
	animation-delay: 2s;
    animation-iteration-count: 8;
	animation-timing-function: linear;
	animation-fill-mode: forwards;	
	
}
.hint .icon{
	top:1em;
}



#sceneList {
  position: absolute;
  top: auto;
  bottom:calc(0em + 10vh);
  bottom:calc(8.5em + 6vh);
  left:calc(.5em + 2.2vw);
  width: auto;
  margin-left: 0;
  max-height:0;
  opacity:0;
  overflow:hidden;
  padding-bottom:0 !important;
  transition: 2s max-height 0s, opacity .5s;
  padding-top:0 !important;
  text-shadow: #222 1px 1px 2px;
}

#sceneList .scenes {
  width: 100%;
}

#sceneList.enabled {
 	margin-left:0;
	opacity:1;
	transition: max-height 0s, opacity .5s;
	max-height:300px;
}

#sceneList .scene, 
#sceneList .overview {
  display: block;
  width: 100%;
  border:1px solid transparent;
}

#sceneList .scene .text,
#sceneList .overview .text {
  width: 100%;
  height: 100%;
  padding: .5em 1em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.no-touch #sceneList .scene:hover {
 
}

#sceneList .scene.current {
	border:1px solid #fff;
}

/* Hide scene list when only a single scene exists */
body.single-scene #sceneList, body.single-scene #sceneListToggle {
  display: none;
}






body.fullscreen-enabled #fullscreenToggle {
  display: block;
}

#fullscreenToggle {
  display: none !important;
  position: absolute;
  top: 0;
  right: 0;
  width: 2em;
  height: 2em;
  margin-right:calc(.5em + 2.5vw);
  float:right;
  
}

#fullscreenToggle .icon {
  position: absolute;
  width:100%;
  height:100%;
}
#fullscreenToggle .icon .text {
	display:none !important
}
#fullscreenToggle .icon::before {
  position: absolute;
  top:50%;
  left:50%;
  transform:translateX(-50%) translateY(-50%);
}

#fullscreenToggle .icon.on {
  display: none;
}

#fullscreenToggle .icon.off {
  display: block;
}

#fullscreenToggle.enabled .icon.on {
  display: block;
}

#fullscreenToggle.enabled .icon.off {
  display: none;
}




#autorotateToggle {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 2em;
  height: 2em;

}

#autorotateToggle .icon {
  position: absolute;
  width:100%;
  height:100%;
}
#autorotateToggle .icon::before {
  position: absolute;
  top:50%;
  left:50%;
  transform:translateX(-50%) translateY(-50%);
}

#autorotateToggle .icon.on {
  display: none;
}

#autorotateToggle .icon.off {
  display: block;
}

#autorotateToggle.enabled .icon.on {
  display: block;
}

#autorotateToggle.enabled .icon.off {
  display: none;
}

/*.mobile  #autorotateToggle{*/
 #autorotateToggle{
	right:0 !important;
	float:right;
	/*margin-right:1em;*/
	margin-right:calc(.5em + 2.5vw);
	padding:0;
}
/*
.desktop #autorotateToggle{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
}
*/



#sceneListToggle {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 2em;
  height: 2em;
  
  margin-left:calc(.5em + 2.2vw);float:left;
  /* display:none !important; */
  
}

#sceneListToggle .icon {
  position: absolute;
  width:100%;
  height:100%;
}
#sceneListToggle .icon::before {
  position: absolute;
  top:50%;
  left:50%;
  transform:translateX(-50%) translateY(-50%);
  font-size:120%;
}

#sceneListToggle .icon.on {
  display: none;
}

#sceneListToggle .icon.off {
  display: block;
}

#sceneListToggle.enabled .icon.on {
  display: block;
}

#sceneListToggle.enabled .icon.off {
  display: none;
}


/* TELEARBEIT */

#sceneListToggle .text {
  position: absolute;
  top: 20%;
  left: 2.5em;
  font-size:.9em;
}

/* /TELEARBEIT */


#viewUp,
#viewDown,
#viewLeft,
#viewRight,
#viewIn,
#viewOut{
	display:none !important;
}

body.view-control-buttons .viewControlButton {
  display: block;
}

.viewControlButton {
  display: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color:rgba(59,55,52,0.8);
}

.viewControlButton .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

@media (max-width: 600px) {
  body.view-control-buttons .viewControlButton {
    display: none;
  }
}




.link-hotspot,
.info-hotspot{
	top: 0;
	width:4em;
	height:4em;
	margin-left:-2em;
	margin-top:-2em;
	opacity:1;
	
}
.mobile .link-hotspot,
.mobile .info-hotspot{
	font-size:65%;
	opacity:.8;
}


.no-touch .link-hotspot:hover,
.no-touch .info-hotspot:hover{
	z-index:200;
}



.info-hotspot-icon{
  width: 100%;
  height: 100%;
  cursor: pointer;	
  border-radius:100px;
  position:relative;
  background-color:rgba(59,55,52,.7);
  border:2px solid #fff;
}


.info-hotspot-icon.color_red{background-color:red;}
.info-hotspot-icon.color_green{background-color:green;}
.info-hotspot-icon.color_yellow{background-color:yellow;}

.mobile .info-hotspot-icon{
	border:1px solid #fff;
}



.info-hotspot-icon::after{
	font-size:1.5em;
	position:absolute;
	top:50%;
	left:50%;
	transform:translateX(-50%) translateY(-50%);
	z-index:300;
	
}
.info-hotspot-icon::before{
	content:'' !important;
	position:absolute;
	width:calc(4px + 100%);
	height:calc(4px + 100%);
	left:-2px;
	top:-2px;
	border-radius:100px;
	background-color:transparent;
	border:2px solid rgba(255,255,255,1);
	box-sizing:border-box;
	z-index:-1;
	
	animation-name: hotspot_pulse;		
	animation-duration:2s;		
	animation-iteration-count: infinite;
	animation-timing-function: linear;	
	
	
}

@keyframes hotspot_pulse {
    0% {
			transform:scale(1.0);
			border:2px solid rgba(255,255,255,1);
			
		}
	25% {
			transform:scale(1.25);
			border:7px solid rgba(255,255,255,.7);

		}
	50% {
			transform:scale(1.5);
			border:12px solid rgba(255,255,255,.0);

		}
	51% {
			transform:scale(1.0);
			border:2px solid rgba(255,255,255,.0);

		}
	100% {
			transform:scale(1.0);
			border:2px solid rgba(255,255,255,1);
		}
}

@keyframes mobile_hotspot_pulse {
    0% {
			transform:scale(1.0);
			border:2px solid rgba(255,255,255,1);
			
		}
	25% {
			transform:scale(1.25);
			border:5.5px solid rgba(255,255,255,.7);

		}
	50% {
			transform:scale(1.5);
			border:9px solid rgba(255,255,255,.0);

		}
	51% {
			transform:scale(1.0);
			border:2px solid rgba(255,255,255,.0);

		}
	100% {
			transform:scale(1.0);
			border:2px solid rgba(255,255,255,1);
		}
}


@keyframes anim_bounce_icon{
	0%  {transform:translateY(0);}
	/*
	10% {transform:translateY(0);}
	20% {transform: translateY(-1vh);}
	25% {transform:translateY(0);}
	30% {transform: translateY(-.5vh);}
	*/
	40% {transform:translateY(0);}
}
@keyframes anim_bounce_shadow_icon{
	0%  {transform: translateX(-50%) translateY(-50%) scale(1);color:rgba(255,255,255,1);}
	/*
	10% {transform:translateY(0);}
	20% {transform: translateY(-1vh);}
	25% {transform:translateY(0);}
	30% {transform: translateY(-.5vh);}
	*/
	25% {transform: translateX(-50%) translateY(-47%) scale(1.3);color:rgba(255,255,255,.8);}
	50% {transform: translateX(-50%) translateY(-44%) scale(1.6);color:rgba(255,255,255,0);}
	51% {transform: translateX(-50%) translateY(-50%) scale(1);color:rgba(255,255,255,0);}
}




.icon-speech::after{
	content: "\e02c";
	font-size:130%;
}

.icon-camera::after{
	content: "\e032";
	font-size:130%;	
}

.icon-camrecorder::after{
	content: "\e071";
	font-size:130%;
}
.icon-game-controller::after{
	content: "\e01b";
	font-size:130%;
}
.icon-volume-2::after{
	content: "\e0a0";
	font-size:130%;
}
.icon-info::after{
	content: "\e08b";
	font-size:130%;
}

.link-hotspot-icon::before{
	content: "\e081" !important; 
	position:absolute;
	top:calc(50% - .5em);
	left:calc(50% - .5em);
	font-family:"ElegantIcons";
	color:rgba(59,55,52,1);
	font-size:300%;
	
	text-shadow: #fff  1px  1px 1px,
				 #fff -1px  1px 1px,
				 #fff  1px -1px 1px,
				 #fff -1px -1px 1px,
				 rgb(255,255,255,1)  0px  0px 0px;
	
	animation-name: anim_bounce_icon;		
	animation-duration:2s;		
	animation-iteration-count: infinite;
	animation-timing-function: linear;	

}
.link-hotspot-icon::after{
	font-family:"ElegantIcons";
	content: "\e081" !important; 
	color:rgba(255,255,255,1);
	font-size:300%;
	z-index:-1;

	position:absolute;
	top:50%;
	left:50%;
	transform: translateX(-50%) translateY(-50%);
	
	animation-name: anim_bounce_shadow_icon;		
	animation-duration:2s;		
	animation-iteration-count: infinite;
	animation-timing-function: linear;		

}


.link-hotspot-tooltip,
.info-hotspot-tooltip {
  position: absolute; 
  z-index:-1;
  left: 100%;
  top:.5em;
  margin-left: -.8em;
  font-size: 1em;
  max-width: 300px;
  height:70%;
  line-height:70%;
  padding:.9em 1.5em 0em 2em;
  /* background-color:rgba(59,55,52,0.85); */
  background-image:linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(59,55,52,.1) .2em ,rgba(59,55,52,.2) .5em, rgba(59,55,52,0.7) 1.4em);
  border-top:1px solid rgba(199,195,192,0.8);
  border-right:1px solid rgba(179,175,172,0.8);
  border-bottom:1px solid rgba(139,135,132,0.8);
  border-top-right-radius:5px;
  border-bottom-right-radius:5px;
  text-transform:uppercase;
  
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  -ms-transform: translateX(-8px);
  -webkit-transform: translateX(-8px);
  transform: translateX(-8px);
  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      opacity 0.3s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              opacity 0.3s;
}


.link-hotspot-tooltip{
	 margin-left: .7em;
	 border-left:1px solid rgba(79,75,72,0.8);
	 border-top-left-radius:5px;
	 border-bottom-left-radius:5px;
	 padding:.9em 1.5em 0em 1.5em;
}




.no-touch .link-hotspot:hover .link-hotspot-tooltip,
.no-touch .info-hotspot:hover .info-hotspot-tooltip {
  opacity: 1;
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

/* Prevent tooltip from triggering */
.link-hotspot-tooltip,
.info-hotspot-tooltip {
  pointer-events: none;
}
.no-touch .link-hotspot:hover .link-hotspot-tooltip,
.no-touch .info-hotspot:hover .info-hotspot-tooltip {
  pointer-events: all;
}

/* Fallback mode without pointer-events (IE8-10) */
.tooltip-fallback .link-hotspot-tooltip,
.tooltip-fallback .info-hotspot-tooltip {
  display: none;
}
.no-touch .tooltip-fallback .link-hotspot:hover .link-hotspot-tooltip,
.no-touch .tooltip-fallback .info-hotspot:hover .info-hotspot-tooltip {
  display: block;
}



.info-hotspot-modal {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 11000 !important;
  background-color:rgba(59,55,52,0.9);
  line-height: 1.6em;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out 0.5s,
              visibility 0s 0.7s;
}

.info-hotspot-modal .inner_container{
	position:relative;
	max-width:1400px;
	margin:0 auto;
	margin-top:10em;
	height:calc(100% - 18.5em);
	padding-right: calc(.5em + 2.5vw);
	padding-left: calc(.5em + 2.5vw);
}

.info-hotspot-modal.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease-in-out,
              visibility 0s 0s;
}

.info-hotspot-modal.visible .info-hotspot-text {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out 0.4s;
  transition: opacity 0.3s ease-in-out 0.4s;
}

.info-hotspot-modal.visible .info-hotspot-header {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out 0.2s;
  transition: opacity 0.3s ease-in-out 0.2s;
}

.info-hotspot-modal .info-hotspot-header {
  position:relative;
  padding-left:1em;
  padding-top:1em;
  padding-bottom:1em;
  overflow:hidden;
  box-sizing:content-box;
  height:50px;
  -webkit-transition: opacity 0.3s ease-in-out 0.2s;
  transition: opacity 0.3s ease-in-out 0.2s;
}

.info-hotspot-modal .info-hotspot-icon-wrapper {
  position:absolute;
  width: 50px;
  height: 50px;
  left:1em;
}
.mobile .info-hotspot-modal .info-hotspot-icon-wrapper {
  width: 40px;
  height: 40px;
}

.info-hotspot-modal .info-hotspot-icon {
	width:100%;
	height:100%;
  margin: 0;
  font-size:1em;
	z-index:10;	
	border-radius:100px;
	border:2px solid rgba(255,255,255,.9);
	z-index:10;
	 cursor: default;
}
.mobile .info-hotspot-modal .info-hotspot-icon{
	font-size:.8em;	
}

.mobile .info-hotspot-modal .info-hotspot-icon::before{	
	animation-name: mobile_hotspot_pulse;		
	animation-duration:2s;		
	animation-iteration-count: infinite;
	animation-timing-function: linear;	
}

.info-hotspot-modal .info-hotspot-title-wrapper {
	position:absolute;
	padding: 0 calc(1em + 1vw);
	box-sizing:border-box;
	width: calc(100% - 100px - 2em);
	height:50px;
	left:calc(50px + 1em);
	display: flex;
	align-items: center;
	justify-content: left;
	font-size:1.4em;
}
.mobile .info-hotspot-modal .info-hotspot-title-wrapper{
	font-size:1.1em;
	width: calc(100% - 80px - 2em);
	left:calc(40px + 1em);
	height:40px;
}

.info-hotspot-modal .info-hotspot-title {
  display: block;
  text-transform:uppercase;

}

.info-hotspot-modal .info-hotspot-close-wrapper {
  position:absolute;
  right:0;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.mobile .info-hotspot-modal .info-hotspot-close-wrapper{
	width: 40px;
	height: 40px;
}


.info-hotspot-modal .info-hotspot-close-icon {
  width: 100%;
  height: 100%;
  z-index:10;	
  border-radius:100px;
  position:relative;

}

.info-hotspot-modal .info-hotspot-close-icon::before{
	font-family:"ElegantIcons";
	content:"\4d" !important;
	font-size: 2.5em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	z-index: 300;
}



:root {
  --abstand_aussen: calc(.5em + .5vw);
  --abstand_innen: calc(1em + 2vw);
}

ul{
	padding-left: 1em;
	list-style-type: disc;
}

.info-hotspot-modal .info-hotspot-text {
	position:absolute;
	top:calc(50px + 2.5em);
	bottom:2em;
	right: calc(.5em + 2.5vw - var(--abstand_aussen));
	left: calc(.5em + 2.5vw);
	box-sizing:border-box;
	padding-top:var(--abstand_aussen);
	padding-bottom:1.5em;
	padding-right:1em;
	padding-left:1em;
    overflow-y: auto;
	overflow-x:hidden;
    opacity: 0;
	border-top:1px solid #666;
	border-bottom:1px solid #666;
    -webkit-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out; 
	 background-image:linear-gradient(rgba(59,55,52,.4) 0%, transparent 3%, transparent 97%, rgba(59,55,52,.4) 100%);
	
	display:flex;
	/*
	align-items:center;
	*/
}
	
.info-hotspot-modal .container{
	display:flex;
	flex-wrap:wrap;
	width:calc(100% + var(--abstand_aussen));
	justify-content:center;
	margin:auto;
	
	/*width:100%;*/
	
	/*
	position:sticky;
	top:var(--abstand_aussen);
	*/
}
.info-hotspot-modal .subcontainer{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	/*width:100%;*/
}

.info-hotspot-modal .box{
	border:1px solid #777;

	margin-right:var(--abstand_aussen);
	margin-bottom:var(--abstand_aussen);
	z-index:1;
}
.info-hotspot-modal .box_text{
	background-color:rgba(255,255,255,.9);
	padding:var(--abstand_innen);
	color:#666;
}
.info-hotspot-modal .box_image{
	 display: flex;
}
.info-hotspot-modal .box_audio_video{
	 display: flex;
}
.info-hotspot-modal .box_iframe{
	 display: flex;
	 position: relative;
    padding-bottom: 53.7%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}
.info-hotspot-modal audio{
	width:100%;
	display:block;
	object-fit:cover;
}

.info-hotspot-modal video{	
	width:100%;
	display:block;
	object-fit:cover;
z-inde	
}

.info-hotspot-modal img{
	width:100%;
	display:block;
	object-fit:cover;
}

.info-hotspot-modal iframe{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

h1{
	font-size:1em;
	text-transform:uppercase;
	margin-bottom:calc(var(--abstand_innen) - 1vw);
	font-weight:bold;
	
}



/* ##### XXL ##### */
/* @media (min-width: 1900px){ */
	
	.xxl_1_1{flex: 0 1 calc(100% - var(--abstand_aussen));}
	.xxl_1_2{flex: 0 1 calc(50% - var(--abstand_aussen));}
	.xxl_1_3{flex: 0 1 calc(33.33% - var(--abstand_aussen));}
	.xxl_1_4{flex: 0 1 calc(25% - var(--abstand_aussen));}
	.xxl_2_3{flex: 0 1 calc(66.66% - var(--abstand_aussen));}
	.xxl_3_4{flex: 0 1 calc(75% - var(--abstand_aussen));}
	.subcontainer.xxl_1_1{flex: 0 1 calc(100%);}
	.subcontainer.xxl_1_2{flex: 0 1 calc(50%);}
	.subcontainer.xxl_1_3{flex: 0 1 calc(33.33%);}
	.subcontainer.xxl_1_4{flex: 0 1 calc(25%);}
	.subcontainer.xxl_2_3{flex: 0 1 calc(66.66%);}
	.subcontainer.xxl_3_4{flex: 0 1 calc(75%);}	
	
	#titleBar{top:11em;}
	.info-hotspot-modal .inner_container{margin-top:9.5em;height:calc(100% - 19.5em);}
	#controlBar{bottom:calc(6.5em + 4vh);}
/* } */

/* ##### XL ##### */
@media (max-width: 1900px){
	
	.xl_1_1{flex: 0 1 calc(100% - var(--abstand_aussen));}
	.xl_1_2{flex: 0 1 calc(50% - var(--abstand_aussen));}
	.xl_1_3{flex: 0 1 calc(33.33% - var(--abstand_aussen));}
	.xl_1_4{flex: 0 1 calc(25% - var(--abstand_aussen));}
	.xl_2_3{flex: 0 1 calc(66.66% - var(--abstand_aussen));}
	.xl_3_4{flex: 0 1 calc(75% - var(--abstand_aussen));}
	.subcontainer.xl_1_1{flex: 0 1 calc(100%);}
	.subcontainer.xl_1_2{flex: 0 1 calc(50%);}
	.subcontainer.xl_1_3{flex: 0 1 calc(33.33%);}
	.subcontainer.xl_1_4{flex: 0 1 calc(25%);}
	.subcontainer.xl_2_3{flex: 0 1 calc(66.66%);}
	.subcontainer.xl_3_4{flex: 0 1 calc(75%);}	
	
	.info-hotspot-modal .inner_container{margin-top:9.5em;height:calc(100% - 17.5em);}
	#controlBar{bottom:calc(6.5em + 4vh);}
}

/* ##### L ##### */
@media (max-width: 1366px){
	
	.l_1_1{flex: 0 1 calc(100% - var(--abstand_aussen));}
	.l_1_2{flex: 0 1 calc(50% - var(--abstand_aussen));}
	.l_1_3{flex: 0 1 calc(33.33% - var(--abstand_aussen));}
	.l_1_4{flex: 0 1 calc(25% - var(--abstand_aussen));}
	.l_2_3{flex: 0 1 calc(66.66% - var(--abstand_aussen));}
	.l_3_4{flex: 0 1 calc(75% - var(--abstand_aussen));}

	.subcontainer.l_1_1{flex: 0 1 calc(100%);}
	.subcontainer.l_1_2{flex: 0 1 calc(50%);}
	.subcontainer.l_1_3{flex: 0 1 calc(33.33%);}
	.subcontainer.l_1_4{flex: 0 1 calc(25%);}
	.subcontainer.l_2_3{flex: 0 1 calc(66.66%);}
	.subcontainer.l_3_4{flex: 0 1 calc(75%);}
	
	#titleBar{top:10em;}
	.info-hotspot-modal .inner_container{margin-top:8.5em;height:calc(100% - 13.5em);}
	#controlBar{bottom:calc(2.5em + 4vh);}
	#sceneList {bottom:calc(4.5em + 6vh);}

}

/* ##### M ##### */
@media (max-width: 1024px){
	
	.m_1_1{flex: 0 1 calc(100% - var(--abstand_aussen));}
	.m_1_2{flex: 0 1 calc(50% - var(--abstand_aussen));}
	.m_1_3{flex: 0 1 calc(33.33% - var(--abstand_aussen));}
	.m_1_4{flex: 0 1 calc(25% - var(--abstand_aussen));}
	.m_2_3{flex: 0 1 calc(66.66% - var(--abstand_aussen));}
	.m_3_4{flex: 0 1 calc(75% - var(--abstand_aussen));}
	.subcontainer.m_1_1{flex: 0 1 calc(100%);}
	.subcontainer.m_1_2{flex: 0 1 calc(50%);}
	.subcontainer.m_1_3{flex: 0 1 calc(33.33%);}
	.subcontainer.m_1_4{flex: 0 1 calc(25%);}
	.subcontainer.m_2_3{flex: 0 1 calc(66.66%);}
	.subcontainer.m_3_4{flex: 0 1 calc(75%);}
	
	#titleBar{top:9em;}
	.info-hotspot-modal .inner_container{margin-top:8.5em;}
	.info-hotspot-modal .inner_container{height:calc(100% - 13.5em);}
}

/* ##### S ##### */
@media (max-width: 768px){
	
	.s_1_1{flex: 0 1 calc(100% - var(--abstand_aussen));}
	.s_1_2{flex: 0 1 calc(50% - var(--abstand_aussen));}
	.s_1_3{flex: 0 1 calc(33.33% - var(--abstand_aussen));}
	.s_1_4{flex: 0 1 calc(25% - var(--abstand_aussen));}
	.s_2_3{flex: 0 1 calc(66.66% - var(--abstand_aussen));}
	.s_3_4{flex: 0 1 calc(75% - var(--abstand_aussen));}
	
	.subcontainer.s_1_1{flex: 0 1 calc(100%);}
	.subcontainer.s_1_2{flex: 0 1 calc(50%);}
	.subcontainer.s_1_3{flex: 0 1 calc(33.33%);}
	.subcontainer.s_1_4{flex: 0 1 calc(25%);}
	.subcontainer.s_2_3{flex: 0 1 calc(66.66%);}
	.subcontainer.s_3_4{flex: 0 1 calc(75%);}
	
	.info-hotspot-modal .inner_container{margin-top:8em;}
	.info-hotspot-modal .inner_container{height:calc(100% - 12.5em);}
}

/* ##### XS ##### */
@media (max-width: 560px){
	
	.xs_1_1{flex: 0 1 calc(100% - var(--abstand_aussen));}
	.xs_1_2{flex: 0 1 calc(50% - var(--abstand_aussen));}
	.xs_1_3{flex: 0 1 calc(33.33% - var(--abstand_aussen));}
	.xs_1_4{flex: 0 1 calc(25% - var(--abstand_aussen));}
	.xs_2_3{flex: 0 1 calc(66.66% - var(--abstand_aussen));}
	.xs_3_4{flex: 0 1 calc(75% - var(--abstand_aussen));}

	.subcontainer.xs_1_1{flex: 0 1 calc(100%);}
	.subcontainer.xs_1_2{flex: 0 1 calc(50%);}
	.subcontainer.xs_1_3{flex: 0 1 calc(33.33%);}
	.subcontainer.xs_1_4{flex: 0 1 calc(25%);}
	.subcontainer.xs_2_3{flex: 0 1 calc(66.66%);}
	.subcontainer.xs_3_4{flex: 0 1 calc(75%);}
	
	.info-hotspot-modal .inner_container{margin-top:7em;}
	.info-hotspot-modal .inner_container{height:calc(100% - 11.5em);}
	
	.info-hotspot-modal .info-hotspot-text {
		top:calc(40px + 2.5em);
		bottom:2em;
	}
}