:root{
	--button-color1:#4b618a;
	--button-color2:#283449;	
	--viewport-height: 100vh;
}
@supports (height: 100dvh) {
  :root {
    --viewport-height: 100dvh;
  }
}
*{
	box-sizing:border-box;
    /*-webkit-touch-callout: none; */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
html,body{
	width:100%;
	height:100%;
	overflow:hidden;
	font-size:18px;
}

body{
	border:0;
	margin:0;
	padding:0;
	background-color:#eaeaea;
	font-family: 'Agfa', sans-serif;
	letter-spacing:0.0px;
	font-weight:400;
	overflow:hidden;
	/* transition:filter 0.5s; */
}
body{
	/* max-width: 600px; */
    /* height: 1200px; */
    margin: 0 auto;
    position: relative;
}
/*body.inminigame #grey-box, body.inminigame #user-box{
	filter:blur(5px);
}*/
body.inminigame #main{
	/* filter:blur(5px); */
}
body.mapopen #main{
	/* filter:blur(5px); */
}

#cover{
	background-image:url('../images/001/start.jpg');
}
#cover-tag{
	background-image:url('../images/001/start-tag.png');
	background-size:100%;
	width:200px;
	aspect-ratio:calc(433 / 160);
	position:absolute;
	top:50%;
	right:0;
	transform:translateY(-50%);
}
#cover-logo{
	background-image:url('../images/001/logo.png');
	background-size:100%;
	width:65vw;
	aspect-ratio:calc(641 / 426);
	position:absolute;
	top:20px;
	left:50%;
	transform:translateX(-50%);
}
.cover-button{
	color: #ffffff;
	font-size:1.4rem;
	text-align:center;
	padding:10px 20px;
	cursor:pointer;
	border:0;
	width:200px;
	position:absolute;
	bottom:40px;
	left:50%;
	transform:translateX(-50%);

    background:linear-gradient(to bottom,#5f402e 0%, #342319 100%);
    border-radius:12px;
    box-shadow:0 0 12px rgba(255,255,255,0.7);
	line-height: 1.1;
	cursor:pointer;
	
	-webkit-tap-highlight-color: transparent;
}
#prestart{
	background-image:url('../images/001/prestart.jpg');
	background-size:cover;
	background-position:center;
}
.prestart-item{
	background:rgba(255,255,255,0.75);
	box-shadow:0 0 10px rgba(0,0,0,0.5);
	font-size:1.2rem;
	border-radius:12px;
	color:#284958;
	font-weight:400;
}
.prestart-bottom{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:150px;
	/* aspect-ratio:calc(1080 / 352); */
	background-image:url('../images/001/prestart-bottom.png');
	background-size:100% 150px;
	background-position:bottom;
	background-repeat:no-repeat;
	pointer-events:none;
}
#root h1{
	color:#404d66;
	text-shadow:0 0 10px rgba(255,255,255,0.8);
	font-weight:400;
	font-size:2rem;
	text-align:center;
}
#teamstart{
	display:none;
	opacity:0;
	text-align:center;
	padding:20px;
	/* padding-top:0vh; */
	transition:padding 0.3s;
}
#teamstart._active{
	/* padding-top:10vh; */
}
#start-button{
	transition:translate 0.3s;
}
#teamstart._active #start-button{
	translate:0 -30vh;
}
.team-input{
	border:0;
	appearance: none;;
	background:rgba(255,255,255,0.75);
	box-shadow:0 0 10px rgba(0,0,0,0.5);
	font-size:1.2rem;
	border-radius:12px;
	color:#284958;
	font-weight:400;
	width:80%;
	display:block;
	margin:0 auto;
	text-align:center;
	padding:10px 20px;
}
.team-input::placeholder{
	font-style:italic;
	color:#888888;
}

#debug{
	position:Absolute;
	bottom:0;
	left:0px;
	z-index:1000;
	color:#ffffff;
	display:none;
	font-size:0.6rem;
}
#demo{
	position:Absolute;
	top:350px;
	left:200px;
	z-index:1001;
	color:#ff0000;
	font-size:250px;
	transform-origin:50% 50%;
	transform:rotate(-20deg);
	pointer-events:none;
	display:none;
	animation: demoanim 2s 0s infinite;
	animation-timing-function: linear;
	line-height:1;
}
#demo span{
	font-size:150px;
}
#version{
	position:Absolute;
	bottom:0;
	right:20px;
	z-index:1000;
	color:#ffffff;
	display:none;
	font-size:0.6rem; 
}
#gps{
	position:Absolute;
	top:0;
	left:0;
	z-index:1000;
	color:#ffffff;
	padding:3px;
	padding-left:8px;
	background-color:#aa0000;
	display:none;
	pointer-events:none;
}
#gps img, #gps span{
	display:inline-block;
	vertical-align:middle;
}
.position{
	display:none;
	font-size:1rem;
	position:absolute;
	z-index:51;
	width:60px;
	top:0px;
}
#main-container{
	/*
	height: 1536px;
	width: 2048px;
	overflow:hidden;
	*/
	height: 1536px;
	height:100%;
	width: 100%;
	overflow:hidden;
	position:relative;
	/* transition:filter 0.5s; */
	filter:brightness(100%);
}
#main-container.flash{
	filter:brightness(10000%);
}
#main-container.blur{
	/* filter:blur(5px) brightness(30%); */
	filter:brightness(30%);
}
#flash{
	position:absolute;
	z-index:999;
	width:100%;
	height:100%;
	background-color:#ffffff;
	pointer-events:none;
	display:none;
	top:0;
	left:0;
	opacity:1;
	transition:opacity 2s;
}
#flash._gone{
	opacity:0.0;
}

/* Start */
#start{
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:110;
	
	background-image:url('../images/start-bg.jpg');
	background-size:100%;
	background-repeat:no-repeat;
	background-color:#3d261c;
}
/*
.start-login{
	width:100%;
	padding:60px;
	position:absolute;
	z-index:20;
	transition:bottom 1s;
	bottom:0;
	text-align:center;
}
.start-login-content{
	margin:0 auto;
	text-align:center;
}
.start-login-content img{
	width:60%;
	max-width:350px;
	min-width:150px;
	height:auto;
}
.start-text{
	font-size:2.4rem;
	color:#444444;
	margin-bottom:50px;
	position:relative;
}

.start-input{
	background:transparent;
	padding:25px;
	border:0;
	border-bottom:5px solid #2c2c2c;
	width:100%;
	font-size:4rem;
	margin-bottom:30px;
	color:#2c2c2c;
}
.start-bg1{
	position:absolute;
	width:calc(50% + 1px);
	height:0%;
	padding-bottom:60%;
	top:30%;
	left:0;
	background-image:url('../images/startscreen.jpg');
	background-position:0 0;
	background-size:200% 100%;
	z-index:3;
	transition:left 1s;
}
.start-bg2{
	position:absolute;
	width:50%;
	height:0%;
	padding-bottom:60%;
	top:30%;
	right:0;
	background-image:url('../images/startscreen.jpg');
	background-position:100% 0;
	background-size:200% 100%;
	z-index:2;
	transition:right 1s;
}
.start-bg1 img{
	display:none;
	position:absolute;
	top:0;
	left:100%;
}
.start-bg2 img{
	display:none;
	position:absolute;
	top:0;
	right:100%;
}
.start-video-container{
	z-index:1;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#000000;
	display:none;
}
.start-video{
	opacity:0;
	width:100%;
	height:100%;
	pointer-events:none;
	display:none;
}
.start-video-buttons{
	text-align:center;
	bottom:100px;
	left:0;
	width:100%;
	position:absolute;
	display:none;
}
.start-video-buttons .button{
	display:inline-block;
	margin:0 30px;
	font-size:3rem;
}

.start-bg1._gone{
	left:-51%;
}
.start-bg2._gone{
	right:-51%;
}
.start-bg1._gone img, .start-bg2._gone img{
	display:block;
}
.start-login._gone{
	bottom:-50%;
}
*/


#start-top img{
	width:100%;
	height:auto;
}
#start-bottom{
	line-height:0;
}
#start-bottom img{
	width:100%;
	height:auto;
	line-height:0;
}
#start-title{
	width:100%;
	height:auto;
}
.start-title-content{
	background-image:url('../images/settings-title.png');
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	text-align:center;
	padding:40px;
	max-width:80vw;
	margin:0 auto;
}
.start-title-text{
	font-weight:900;
	font-size:1.8rem;
	line-height:1;
	color:#3d261c;
}
.start-title-subtext{
	font-weight:700;
	font-size:1.0rem;
	line-height:1;
	color:#795f52;
}
#start-ticket{
	padding:30px;
	background-color:rgba(46,37,34,0.4);
	margin:30px 30px;
	margin-top:200px;
	margin-bottom:0;
	width:calc(100% - 60px);
	text-align:center;
	border-radius:12px;
	margin-bottom:40px;
}
.start-ticket-prompt{
	color:#e4c4a3;
	font-size:1.2rem;
}
.start-ticket-content{
	background-image:url('../images/start-ticket.png');
	background-size:100%;
	background-repeat:no-repeat;
	background-position:center;
	padding:20px;
	width:80%;
	aspect-ratio:2;
	margin: 0 auto;
	text-align:center;
}
.start-ticket-input{
	-webkit-appearance: none;
	background:#833141;
	border:0;
	color:#ecdbc7;
	margin-top:40px;
	font-size:1.2rem;
	padding:10px;
	width:100%;
	max-width:260px;
}
.start-button{
	color:#443d3b;
	background-image:url('../images/button-bg.png');
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	text-align:center;
	padding:20px;
	font-size:1.6rem;
	margin-bottom:20px;
}
.loading{
	width:25px;
	height:25px;
	display:inline-block;
	vertical-align:middle;
	opacity:0;
}
.loading img{
	width:100%;
	height:auto;
}
#message{
	display:none;
	padding:30px;
	background-color:rgba(46,37,34,0.4);
	margin:30px 30px;
	margin-top:200px;
	margin-bottom:0;
	width:calc(100% - 60px);
	text-align:center;
	border-radius:12px;
	margin-bottom:40px;
	
	color:#e4c4a3;
	font-size:1.5rem;
}

@media(max-width:600px){
	#start-ticket,#start-message{
		margin-top:10vw;
		padding:10px;
	}
	.start-ticket-input{
		margin-top:6vw;
	}
}


#outro{
	width:100%;
	height:100%;
	pointer-events:none;
	position:absolute;
	top:0;
	left:0;
	z-index:111;
}
#team, #team2{
	position:absolute;
	width:100%;
	height:100%;
	bottom:0;
	background-image:url('../images/screen_rightbar.png'), url('../images/screen_bg.jpg');
	background-size:35px 41px, 100% 100%;
	background-repeat:repeat-y, no-repeat;
	background-position:top right, center;
	text-align:center;
	z-index:99;
	padding-top:0;
    padding-left: 20px;
    padding-right: 20px;
	transition:bottom 0.5s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#team._gone, #team2._gone{
	bottom:101%;
}
#team p{
	font-size:7vw;
	color:#ecd9b8;
	margin-bottom:0.5em;
}
#team input{
	border:0;
	border: 0px solid #ffffff;
	padding:2.4vw;
	background:#875137;
	color:#ffffff;
	font-size:7vw;
	margin-bottom:0.5em;
	position:relative;
	left:0;
    width: 70%;
}
#team .teamname-button, #team2 .teamname-button{
	font-size:7vw;
	color:#443d3b;
	display:inline-block;
    padding: 5vw 10vw;
	width:60%;
	max-width:350px;
	min-width:150px;
	height:auto;
}
.team-content{
	width:90%;
	height:0;
	padding-bottom:90%;
	padding-left:5%;
	margin-right:10%;
	background-image:url('../images/team_bg.png');
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;
}
.team-title{
	font-weight:900;
	color:#3b2518;
	margin-top: 13vw;
    font-size: 6vw;
}
.team-prompt{
	margin-top:19vw;
	color:#795e53;
	font-size:4vw;
}

#team2{
	/* display:none; */
}
.team2-header{
	background-image:url('../images/team-header.png');
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;
	padding:40px 60px 30px;
	position:relative;
	/* z-index:2; */
}

.team2-title{
	font-weight:900;
	color:#3b2518;
    font-size: 6vw;
	line-height:1;
}
.team2-subtitle{
	font-weight:700;
	color:#795f52;
    font-size: 3vw;
	line-height:1;
}
.team2-body{
	background-image:url('../images/team-body.png');
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;
	padding:30px 30px 50px;
	position:relative;
	/* z-index:1; */
	/* top:-10px; */
	width:90%;
}
.team2-input-header{
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-between;
}
.team2-input-header span{
	display:inline-block;
}
.team2-input{
	background-image:url('../images/team-input.png');
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;
	text-align:left;
	position:relative;
}
.team2-input input{
	border:0;
	padding:10px;
	color:#ffffff;
	background:transparent;
	font-size:1.3rem;
	position:relative;
	left:0;
    width: 80%;
}
.team2-input input[name="usernames"]{
    width: 100%;
}
.team2-emoji{
	position:absolute;
	right:3px;
	top:3px;
}
.team2-emoji img{
	width:36px;
	height:auto;
}
.emojicon{
	font-size:2.0rem;
	display:inline-block;
	line-height:1;
}
.team2-emojilist{
	display:none;
	position:absolute;
	right:0;
	bottom:100%;
	background-color:#3b2518;
	padding:10px;
	border-radius:6px;
	border:1px solid rgba(0,0,0,0.5);
}
.team2-emojilist .emojicon{
	line-height:1.5;
}
/*.team2-emojilist img{
	height:36px;
	width:auto;
}*/
.team2-emojilist .emojicon:nth-child(n+11){
	display:none;
}

#clock, #map-button, #info-button, #kraehe, #list-button, #help-button, #highscore-button, #map-help-button, .footer-content{
	/* display:none; */
	/* opacity:0; */
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}


/* Ende */
#ende{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:95;
	background-image:url('../images/startscreen.jpg');
	background-position:center;
	background-size:cover;
	display:none;
	opacity:0;
}
.ende-content{
	position:absolute;
	width:100%;
	height:100%;
	background-color:rgba(255,255,255,0.9);
	text-align:center;
	padding-top:100px;
}
.ende-headline{
	font-size:2rem;
	/* color: #d1b995; */
	position:relative;
	z-index:4;
}
.ende-text{
	margin-top:10px;
	margin-bottom:10px;
	font-size:1.4rem;
	position:relative;
	z-index:4;
}
.ende-code{
	text-align:center;
}
.ende-code img{
	margin:0 auto;
	background-color:#ffffff;
	padding:30px;
}
.ende-team{
	text-align:center;
	font-size:1.2rem;
	font-weight:700;
    margin-bottom: 20px;
}
.ende-email{
	font-size: 1.2rem;
	position:relative;
	top:60px;
	transition:top 0.5s, background-color 0.5s;
	padding:20px;
	background-color:rgba(255,255,255,0.0);
	z-index:10;
}
.ende-email.active{
	top:-240px;
	background-color:rgba(255,255,255,0.9);
}
.ende-email input{
	font-size: 2.8rem;
	padding:15px;
}
.ende-emailmessage{
	font-size: 2.4rem;
	position:relative;
	top:60px;
}
.ende-email-send{
	display:none;
}
.left{ 
	float:left; 
}
.right{ 
	float:right; 
}
.clear{
	clear:both;
}

.interface-headline {
	font-size:4rem;
	color: #d1b995;
	position:relative;
	z-index:199;
	display:none;
}

.interface-subline{
	color: #ffffff; 
	font-size: 2.2rem; 
}

#icon-doublearrow{
	position:absolute;
	z-index:6;
	width:86px;
	height:86px;
	left:-43px;
	top:50%;
	transform:scale(1);
	transition:0.3s;
	cursor:pointer;
	-webkit-tap-highlight-color: transparent;
}
#icon-doublearrow:after{
	content:'';
	display:block;
	width:110px;
	height:110px;
	border:6px solid #ffffff;
	animation: arrowanim 3s 0s infinite;
	animation-timing-function: linear;
	position:absolute;
	top:-55px;
	left:0px;
	border-radius:50%;
	box-sizing:border-box;
}
.gamearea._active #icon-doublearrow:after,.gamearea._hidden #icon-doublearrow:after{
	animation:none;
	opacity:0;
}
#icon-doublearrow:hover{
	transform:scale(1);
}
.icon-doublearrow-content{
	width:100%;
	/* height:63px; */
	/* margin-top:36px; */
	text-align:center;
    top: -50%;
    position: relative;
}
.icon-doublearrow-content img{
	width:100%;
	height:auto;
}

#header{
    width: 100%; 
	height:19.1%;
	position:relative;
	z-index:1;
	position:absolute;
	top:0;
	left:0;
	pointer-events:none;
}

#black-bar {
	/* height: 194px;  */
	/* width: 70%;  */
	/* background-color: #000000;  */
}

.black-bar-container {
	margin-top: 3%; 
	margin-left: 4%; 
}

#top{
    position:Absolute;
    top:0;
    left:0;
    right:0;
    height:60px;
    background:url('../images/001/top_bg.png');
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-position:center;
    z-index:10;
}

#clock {
	position: absolute;
    left: 50%;
    /* right: 25%; */
    width: 100%;
    transform: translateX(-50%);
	max-width:180px;
	top:5px;
	height:50px;
	z-index:19;
	color: #ffffff;
	pointer-events:auto;
	text-align:left;
	letter-spacing:0;
	background-image:url('../images/001/time-bg.png');
	background-repeat:no-repeat;
	background-size:contain;
	background-position:top center;
}

#time-bar-text {
	font-size: 2rem; 
	float:left;
	margin-top:16px;
	width:70%;
	box-sizing:border-box;
	text-align:left;
	pointer-events:none;
}

#time {
	font-size: 2rem;
	/* margin-top:-5px; */
	/* float:right; */
	position:absolute;
	height:45px;
	/* width:270px; */
	left: 26px;
	top:-3px;
	overflow:hidden;
    letter-spacing: -1.5px;
}
#time.anim{
	animation: timepulse 0.5s 0s 8;
}
.time-number{
	position: relative;
    width: 30px;
    margin-right: 0px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
	margin-top:0px;
}
.time-number:nth-child(1){ width:30px; }
.time-number:nth-child(2){ width:10px; }
.time-number:nth-child(3){ width:30px; }
.time-number:nth-child(4){ width:10px; }
.time-number:nth-child(5){ width:30px; }
.time-num{
    color: #c3a38d;
    font-size: 120px;
    font-size: 2.0rem;
    line-height: 1.5;
}
.time-divide{
	position:absolute;
	top:4px;
	left:26px;
    font-size: 2.0rem;
    color: #c3a38d;
}
.time-divide:last-child {
    left: 81px;
}
.red .time-num, .red .time-divide, .chat-timer.red{
	color:#ff3333;
}
#map-button{
	color:#ffffff;
	position:absolute;
    width:20%;
	max-width:150px;
	height:75px;
    left: 10%;
    bottom: 40px;
	cursor:pointer;
	z-index:40;
	background-image:url('../images/001/map-button.png');
	background-size:contain;
	background-repeat:no-repeat;
	background-position:bottom;
}
#map-button .button-label{
    display:none;
}
#map{
	box-sizing:border-box;
	padding-top:0px;
	position:absolute;
	width:100%;
	height:100%;
	top:110%;
	z-index:60;
	transition:1s;
	/* background-color:rgba(0,0,0,0.8); */
	text-align:center;
	line-height:100%;
	/* overflow:hidden; */
}
#map-close{
	position:absolute;
	top:10px;
	right:10px;
	z-index:19;
    width:40px;
    height:40px;
    background:url('../images/001/btn-close-red.png');
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;
}
#map.active{
	top:0;
}
#map-top{
	width:100%;
	aspect-ratio:calc(1080 / 224);
	background-image:url('../images/001/map-top.png');
	background-size:100% 100%;
	background-repeat:no-repeat;
	position:absolute;
	bottom:49%;
	transition:1s;
	transition-delay: 1s;
	z-index:100;
}
#map-bottom{
	width:100%;
	aspect-ratio:calc(1080 / 376);
	background-image:url('../images/001/map-bottom.png');
	background-size:100% 100%;
	background-repeat:no-repeat;
	position:absolute;
	top:49%;
	transition:1s;
	transition-delay: 1s;
	z-index:101;
}
#map-mask{
	overflow:hidden;
	width:100%;
	height:0;
	position:absolute;
	transition:1s;
	top:50%;
	transition-delay: 1s;
}
#map.active #map-top{
	bottom:98%;
}
#map.active #map-bottom{
	top:100%;
}
#map.active #map-mask{
	top:0;
	height:var(--viewport-height);
}

.map-image{
	width:auto;
	height:auto;
	max-width:1800px;
	max-width:85%;
	max-height:1100px;
	position:relative;
	box-sizing:content-box;
	/* border: 20px solid #ffffff; */
	/* border:4px solid #937642; */
}
#map-overlay{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:url('../images/001/map-outer.png');
    
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;
    z-index:10;
    pointer-events: none;
}
#map-content{
    width:100vw;
    height:var(--viewport-height);
    z-index:5;
}
.map-content{
	position:relative;
	height:100%;
	z-index:1;
}
.map-content:after{
	display:inline-block;
	content:'';
	width:1px;
	height:100%;
	vertical-align:middle;
}
.map-image{
	display:inline-block;
	vertical-align:middle;
}
.map-pin{
	position:absolute;
	transition:top 1s linear, left 1s linear;
}
.map-pin-image{
	position:absolute;
	width:30px;
	height:30px;
	left:-15px;
	top:-15px;
}
.map-pin-image._self{
	top:-15px;
}
.map-pin-radius{
	position:absolute;
	border-radius:100%;
	transform:translate(-50%, -50%);
	background-color:rgba(100,150,255,0.3);
	border:2px solid rgba(100,150,255,0.5);
	width:0;
	height:0;
}
#map-title-box, .score-title-box, .passport-title-box, .review-title-box, .ratings-title-box, .feedback-title-box, .google-title-box{
	margin:0 0px;
	position:absolute;
	width:calc(100% - 0px);
}
#map-title, .score-title, .passport-title-box, .review-title-box, .ratings-title-box, .feedback-title-box, .google-title-box{
	background-image: url('../images/settings-title.png');
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;
	padding:10px 20px 30px;
	position:relative;
	z-index:3;
    max-width: 300px;
    margin: 0 auto;
	height:auto;
	color:#3d261c;
}
.map-title-text, .score-title-text, .passport-title-text, .review-title-text, .ratings-title-text, .feedback-title-text, .google-title-text{
	text-align:center;
	font-weight:700;
	font-size:2.0rem;
	line-height:1;
}
.map-title-subtext, .score-title-subtext, .passport-title-subtext, .review-title-subtext, .ratings-title-subtext, .feedback-title-subtext, .google-title-subtext{
	text-align:center;
	font-weight:700;
	font-size:1.2rem;
	line-height:1;
}
.passport-title-text, .review-title-text, .ratings-title-text, .feedback-title-text, .google-title-text{
	font-size:2.0rem;
}
.score-title-text._final{
	font-size:1.5rem;
}
.leaflet-tile-pane{
    filter:grayscale(100%) sepia(50%);
}

#highscore-button{

	max-width:150px;
	height:75px;
    background-size:contain;
    background-repeat:no-repeat;
	background-position:bottom;

	width: 20%;
    position: absolute;
    left: 50%;
    transform:translateX(-50%);
    bottom: 40px;
	cursor:pointer;
	z-index:26;
	background-image:url('../images/001/highscore-button.png');
}
#info-button{
	display:none !important;
    width:20%;
	max-width:150px;
	height:70px;
    position: absolute;
    right: 10%;
    bottom: 40px;
	cursor:pointer;
	z-index:26;
	background-image:url('../images/001/info-button.png');
    background-size:contain;
    background-repeat:no-repeat;
	background-position:bottom;
}
#info-button._anim{
	/* animation: schildanim 4s 0s infinite; */
}
#map-button._anim{
	animation: schildanim 4s 0s infinite;
	/* animation-iteration-count:3; */
}
#help-button{
	position:absolute;
	top:10px;
	right:10px;
	background-image:url('../images/help-button.png');
	width:135px;
	height:98px;
	background-size:contain;
	z-index:16;
}
#help{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:none;
	opacity:0;
	background-image:url('../images/help_overlay.png');
	background-size:100% 100%;
	z-index:54;
}
#map-help-button{
	position:absolute;
	bottom:50px;
	right:60px;
	z-index:16;
}
#map-help-button img{
	width:135px;
	height:98px;
}
#map-help-close{
	position:absolute;
	bottom:20px;
	right:20px;
	z-index:21;
	display:none;
}
#map-help{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:20;
	display:none;
}
#map-help img{
	width:100%;
	height:100%;
}
/*#autoplay{
	position:absolute;
	bottom:20px;
	left:1165px;
	z-index:53;
	transform:scale(0.7);
}*/
#settings-button{
	position:absolute;
	width:100px;
	height:100px;
	position:absolute;
	top:6px;
	left:10px;
    background:url('../images/001/icon-settings.png') center / contain no-repeat;
    width:40px;
    height:40px;
}
#settings{
	display:none;
	background-color:rgba(0,0,0,0.92);
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:110;
	padding: 20px 20px;
	font-size:1.3rem;
	font-weight:700;
	text-align:left;
	background-size:100% 100%;
	background-repeat:no-repeat;
}
.settings-close{
	position:absolute;
	top:20px;
	right:20px;
	z-index:65;
}
#imprint{
	display:none;
	background-color:rgba(0,0,0,0.9);
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:54;
	padding: 20px 20px;
	font-size:1.0rem;
	font-weight:400;
	text-align:left;
	background-size:100% 100%;
	background-repeat:no-repeat;
	color:#ffffff;
	overflow-y:auto;
}
#imprint a{
    text-decoration:underline;
    color:#ffffff;
}
.imprint-close{
	position:absolute;
	top:20px;
	right:20px;
	z-index:65;
}
.imprint-content hr{
	margin:1em 0;
}
.imprint-preview{
	max-width:60px;
	max-height:60px;
	object-fit:cover;
}
.imprint-popup{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#000000;
	padding:20px;
	display:none;
	z-index:70;
}
.imprint-popup img{
	width:100%;
	height:auto;
}
.help-close{
	float:right;
	margin:18px;
	pointer-events:none;
}
.help-close._anim{
	animation: pulse 1.5s 0s infinite;
}
#list-button{
	width:20%;
	max-width:150px;
	height:70px;
    position: absolute;
    right: 10%;
    bottom: 40px;
	cursor:pointer;
	z-index:26;
	background-image:url('../images/001/info-button.png');
    background-size:contain;
    background-repeat:no-repeat;
	background-position:bottom;
}
#list-button._anim{
	animation: schildanim 4s 0s infinite;
}
#list-button._disabled{
	filter:grayscale(100%);
}
.button-label{
	position:absolute;
	bottom:-3px;
	left:0;
	right:0;
	text-align:center;
	color:#b49574;
	text-align:center;
	font-weight:900;
	font-size:0.85rem;
	text-transform:uppercase;
}
#info{
	box-sizing:border-box;
	padding-top:0px;
	position:absolute;
	width:100%;
	height:100%;
	bottom:100%;
	z-index:69;
	transition:1s;
	background-color:rgba(0,0,0,0.2);
	color:#ffffff;
	text-align:center;
	line-height:1.3;
	overflow:hidden;
	background-image:url('../images/001/info-bg.jpg');
	background-size:100% 100%;
	background-repeat:no-repeat;
}
#info-close{
	position:absolute;
	top:20px;
	right:20px;
	z-index:65;
}
#info.active{
	bottom:0;
}
#info.active.instant{
	transition:0s;
}
.info-top{
	padding:30px 0 0;
	text-shadow:0 0 12px rgba(0,0,0,0.5);
	font-size:1.8rem;
	font-weight:700;
}
.info-content{
	padding: 20px 40px;
	font-size:1.1rem;
	font-weight:400;
	text-align:left;
	height:100%;
	overflow-y:auto;
	color:#1e1c19;
	max-height: calc(100% - 100px);
}
.info-content img{
	width:100%;
	height:auto;
}
.info-text{
	/* overflow-y:scroll; */ /* infos zum hotspot scroll problem */ 
	max-height:100%;
	/* display:inline; */
	/* text-align: justify; */
}
.info-image{
	/* float:right; */
	max-width:100%;
	/* margin-right:30px; */
	/* padding-right:80px; */
	/* clip-path: polygon(6% 0,90% 5%,95% 100%,0% 95%); */
	/* background-color: #f5cc6c; */
}
.info-image img{
	width:100%;
	height:auto;
	max-height: 800px;
	/* clip-path: polygon(8% 2%,88% 7%,93% 99%,2% 94%); */
}

#list-close img,#hinweise-close img,#info-close img,#map-close img,#lightbox-close img,#help-close img,.settings-close,.imprint-close,#highscore-close img, #setting-popup-close img{
	width:40px;
	height:40px;
}

#list{
	box-sizing:border-box;
	padding-top:0px;
	position:absolute;
	width:100%;
	height:100%;
	bottom:100%;
	z-index:70;
	transition:1s;
	background-color:rgba(0,0,0,0.2);
	color:#000000;
	text-align:center;
	line-height:1.3;
	overflow:hidden;
	background-image:url('../images/001/list-bg.jpg');
	background-size:100% 100%;
	background-position:center;
}
#list-close{
	position:absolute;
	top:20px;
	right:20px;
	z-index:65;
}
#list-close.anim{
	animation: pulse 1.5s 0s infinite;
}
#list.active{
	bottom:0;
}
#list.active.instant{
	transition:0s;
}
.list-content{
	padding: 20px 30px;
	font-size: 4vw;
	font-weight:400;
	text-align:left;
	height:100%;
	color:#ffffff;
}
.list-content p{
	font-size: 1.2rem;
	color: #715134;
}
.list-title-box{
	clear:both;
}
.list-title{
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;
	position:relative;
	z-index:3;
    margin: 0 auto;
	height:auto;
	color:#715134;
	
	text-align:left;
	font-weight:700;
	font-size:1.8rem;
	line-height:1;
}
.list-scrollbar{
	position:absolute;
	top:116px;
	right:5px;
	width:10px;
	height:30vh;
	background-color:rgba(0,0,0,0.2);
	border-radius:10px;
	z-index:20;
}
/* Top arrow */
.list-scrollbar::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 6px solid rgba(0, 0, 0, 0.4);
}
/* Bottom arrow */
.list-scrollbar::after {
	content: "";
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid rgba(0, 0, 0, 0.4);
}
.list-items{
	max-height: calc(100% - 100px);
	overflow-y:auto;
}
.list-item{
	margin-bottom:30px;
}
.list-item._new{
	animation:fadein 2s 0s ease-in-out forwards;
}
.list-item-title{
	color:#484033;
	font-size:2rem;
}
.list-item-image{
	line-height:0;
	margin-bottom:15px;
}
.list-item-image img{
	width:100%;
	height:auto;
	border:8px solid #ab9d81;
	border-radius:8px;
}
.list-item-image img.portrait{
	max-height:300px;
	width:auto;
	margin:0 auto;
	display:block;
}
.list-item-text{
	color:#484033;
	font-weight:400;
	font-size:1rem;
}
.list-progress{
	margin-top:15px;
	width:100%;
	border:0px solid #ff0000;
	background-color:rgba(0,0,0,0.1);
	border-radius:4px;
}
.list-progressbar{
	background-color:#728e2e;
	width:50%;
	height:10px;
}
.list-progresstext{
	text-align:right;
	margin-bottom:15px;
	color:#484033;
}
#highscore{
	box-sizing:border-box;
	padding-top:0px;
	position:absolute;
	width:100%;
	height:100%;
	bottom:100%;
	z-index:70;
	transition:1s;
	background-color:rgba(0,0,0,0.2);
	color:#000000;
	text-align:center;
	line-height:1.3;
	overflow:hidden;
	background-image:url('../images/001/list-bg.jpg');
	background-size:100% 100%;
	background-position:center;
}
#highscore.active{
	bottom:0;
}
#highscore.active.instant{
	transition:0s;
}
#highscore-close{
	position:absolute;
	top:20px;
	right:20px;
	z-index:65;
}
#highscore .list-title{
	padding-left:30px;
}
.highscore-content{
	padding: 20px 0px;
	font-size: 4vw;
	font-weight:400;
	text-align:left;
	height:100%;
	color:#ffffff;
}
.highscore-items{
	margin-top:30px;
	max-height:calc(var(--viewport-height) - 100px);
	overflow-y:auto;
}
.highscore-item{
	color:#4a4a4a;
	display:flex;
	flex-flow:row nowrap;
	width:100%;
	margin-bottom:5px;
	padding:0 30px;
}
.highscore-item._own{
	/* background-color:rgba(255,255,200,0.8) !important; */
	background-color:rgba(75,125,186,0.8) !important;
	font-weight:700;
	color:#000000;
}
.highscore-number{
	width:40px;
	width: 7vw;
}
.highscore-name{
	flex-grow:1;
	flex-shrink:1;
	word-break: break-word;
}
.highscore-score{
	width:80px;
	width: 13vw;
	text-align:right;
}
.highscore-top .highscore-score{
	padding-top:21px;
}
.highscore-top {
	margin-bottom:15px;
	padding:20px 0;
	background-color:rgba(255,255,255,0.4);
}
.highscore-top .highscore-item{
	padding:10px 30px;
	font-size:1.6rem;
	font-size:6.5vw;
	margin-bottom:0;
	padding-bottom:0;
}
.highscore-top .highscore-item::before{
	display:inline-block;
	content:'';
	background-image:url('../images/001/highscore-gold.png');
	background-size:100%;
	background-repeat:no-repeat;
	aspect-ratio:calc(121 / 178);
	width:15%;
	margin-right:10px;
	flex-shrink:0;
}
.highscore-top .highscore-item:nth-child(1)::before{
	background-image:url('../images/001/highscore-gold.png');
}
.highscore-top .highscore-item:nth-child(2)::before{
	background-image:url('../images/001/highscore-silver.png');
}
.highscore-top .highscore-item:nth-child(3)::before{
	background-image:url('../images/001/highscore-bronze.png');
}

.highscore-top .highscore-number{
	display:none;
}
.highscore-top .highscore-name::before{
	display:block;
	content:'';
	color:rgba(0,0,0,0.5);
	font-size:0.9rem;
}
.highscore-top .highscore-item:nth-child(1) .highscore-name::before{
	content:'1. Platz (Gold)';
}
.highscore-top .highscore-item:nth-child(2) .highscore-name::before{
	content:'2. Platz (Silber)';
}
.highscore-top .highscore-item:nth-child(3) .highscore-name::before{
	content:'3. Platz (Bronze)';
}
#map-screen{
	position:absolute;
	background-image:url('../images/bg_screen_map.png');
	background-size:75%;
	background-repeat:no-repeat;
	background-position:top;
	width:500px;
	height:420px;
	top:-50px;
	left:720px;
	z-index:12;
}
#info-screen{
	position:absolute;
	background-image:url('../images/bg_screen_info.png');
	background-size:85%;
	background-repeat:no-repeat;
	background-position:top;
	width:400px;
	height:374px;
	top:-50px;
	right:430px;
	z-index:13;
}
#list-screen{
	position:absolute;
	background-image:url('../images/bg_screen_list.png');
	background-size:80%;
	background-repeat:no-repeat;
	background-position:top;
	width:400px;
	height:416px;
	top:-50px;
	left:380px;
	z-index:14;
}
#time-screen{
	position:absolute;
	background-image:url('../images/bg_screen_timer.png');
	background-size:65%;
	background-repeat:no-repeat;
	width:500px;
	height:418px;
	top:-15px;
	right:-70px;
	z-index:15;
}

#helper-button{
	position:absolute;
    width:60px;
    height:60px;
	top:5px;
	right:10px;
	z-index:25;
	background-image:url('../images/001/narrator3.png');
	background-position:0 0;
	background-repeat:no-repeat;
	background-size:100% 100%;
}
#helper-button._disabled{
	filter:grayscale(100%);
	pointer-events: none;;
}
#hinweise{
	box-sizing:border-box;
	padding-top:0px;
	position:absolute;
	width:100%;
	height:100%;
	bottom:100%;
	z-index:60;
	transition:1s;
	background-color:rgba(0,0,0,0.8);
	color:#ffffff;
	color:#000000;
	text-align:center;
	line-height:1.3;
	overflow:hidden;
}
#hinweise-close{
	position:absolute;
	top:20px;
	right:20px;
	z-index:65;
}
#hinweise.active{
	bottom:0;
}
.hinweise-container{
	padding: 20px;
	text-align:left;
	height:100%;
	overflow-y:scroll;
	overflow-x:hidden;
	/* margin:20px 100px 130px 100px; */
	
	background-image:url('../images/001/list-bg.jpg');
	background-size:100% 100%;
	background-repeat:no-repeat;
	position:relative;
}
.hinweise-content{
	height: calc(var(--viewport-height) - 250px);
	overflow-y:scroll;
	/* padding-top:200px; */
}
.hinweise-content img{
	max-width:100%;
	height:auto;
}
.hinweise-icon{
	margin-top:10px;
	margin-bottom:10px;
	min-width:100px;
	max-width:140px;
	width:32%;
	flex-shrink:1;
	height:140px;
	background-image:url('../images/001/narrator3.png');
	background-position:left;
	background-repeat:no-repeat;
	background-size:contain;
	position:relative;
	z-index:2;
	/* box-shadow:10px 0 10px rgba(0,0,0,0.5); */
}
.hinweise-text{
	font-size: 1.1rem;
    color: #443d3b;
    padding: 10px 30px;
	padding-left:50px;
	padding-right:10px;
	position:relative;
	left:-40px;
    /* position: absolute;
    top: 69px;
    left: 85px; */
	width:calc(60%);
	flex-grow:1;
    right: 0;
    background-color: rgba(255, 255, 255, 0.5);
}
.hinweise-title{
	
	background-size:100% 100%;
	/* padding:20px 10px; */
	background-repeat:no-repeat;
	font-size:1.8rem;
	width:90%;
	color:#715134;
	text-align:left;
	font-weight:700;
	margin:0 auto;
}
.hinweise-top{
	display:flex;
	flex-flow:row nowrap;
	align-items: center;
	width:calc(100% + 40px);
}

.score-title{
	color:#ffffff;
	font-size:2rem;
	text-align:center;
	margin-top:20px;

	background-image:url('../images/001/highscore-title.png');
	background-size:100% 100%;
	background-repeat:no-repeat;
	max-width:none;
}
.score-container{
	padding:20px;
	padding-bottom:90px;
	/* margin-top:70px; */
	height:calc(var(--viewport-height));
	overflow-y:auto;
	text-align:center;
}
.score-image{
	background-image:url('../images/001/highscore-image.png');
	background-size:contain;
	background-repeat:no-repeat;
	width:calc(100% - 40px);
	aspect-ratio:calc(1000 / 907);
	margin: 80px auto 0;
    max-width: 300px;
    background-position: center;
}
.score-score{
	margin:10px 20px;
	text-align:left;
	color:#7d5a26;
	font-size:1.2rem;
	line-height: 1.4;
	position:relative;
	padding:15px;
	background-image:url('../images/001/highscore-info.png');
	background-size:100% 100%;
	background-repeat:no-repeat;
}
.score-score img{
	height:32px;
	width:auto;
	vertical-align:middle;
	margin-left:5px;
	margin-bottom:3px;
}
.score-line{
	height:20px;
	width:100%;
}
.score-text{
	width:80%;
	text-align:left;
	display:inline-block;
	font-size:1.5rem;
	line-height:1.7;
}
.score-gems{
	display:inline-block;
	width:20%;
	text-align:right;
}
.score-points{
	display:inline-block;
	text-align:right;
}
.score-text._bold,.score-points._bold{
	font-weight:900;
	color:#7d5a26;
}
.score-text._short{
	width:30%;
}
.score-gems._long{
	width:68%;
}
#grey-box {
    left: 15px;
    right: 15px;
    top: 60px;
    bottom: 14vw;
	position:absolute;
	z-index:20;
	
	display:flex;
	flex-flow:column nowrap;
}

.chat-container{
	/* padding:0 3% 0 3%; */
	padding-bottom:40px;
	top:0;
	height:100%;
	overflow-y:scroll;
	overflow-x: hidden;
	position:relative;
	display:flex;
	flex-flow:column nowrap;
}
.chat-userbox{
	flex-shrink:1;
	padding-bottom: 40px;
}
.chat-chats{
	padding-top:50px;
	/* padding-bottom: 40px; */
	/* overflow:hidden; */
	/* overflow-x:hidden; */
	flex-grow:1;
	hyphens:auto;
}
.chat-chats:after{
	content:'';
	display:block;
	clear:both;
}
.chat-outer{
	position:relative;
	transform-origin:50% 50%;
}
.chat-timer{
	text-align:center;
	font-size:3rem;
	width:100%;
	/* min-height:220px; */
	margin-bottom:10px;
	clear:both;
	float:left;
	position:relative;
	padding:10px;
	background-image:url('../images/001/chat-bg1.png');
	background-size:100% 100%;
	background-repeat:no-repeat;
	transform-origin:50% 50%;
	/* transform:rotate(-2deg); */
	/* background-color:#887d69; */
}
.chat-narrator {
	width:100%;
	/* min-height:220px; */
	margin-bottom:10px;
	clear:both;
	float:left;
	position:relative;
	padding:30px 20px;
	background-image:url('../images/001/chat-bg1.png');
	background-size:100% 100%;
	background-repeat:no-repeat;
	transform-origin:50% 50%;
	/* transform:rotate(-2deg); */
	/* background-color:#887d69; */
}
.chat-narartor.large{
	background-image:url('../images/001/chat-bg1-3.png');
}
.chat-narartor.medium{
	background-image:url('../images/001/chat-bg1-2.png');
}
/*.chat-narrator::before {
	display:block;
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:12px;
	height:64px;
	background-image:url('../images/001/chat-bg1-arrow.png');
	background-size:100% 100%;
	background-repeat:no-repeat;
}*/
/*.chat-narrator::after {
	display:block;
	content:'';
	position:absolute;
	top:10px;
	left:25px;
	right:10px;
	bottom:10px;
	border:2px solid #d2c3b2;
	border-radius:8px;
	background-image:url('../images/chat-line.png');
	background-size:100% 23px;
	background-position:0 8px;
	background-repeat:repeat-y;
}
.chat-narrator.narrator2::after {
	border-color:#a0967b;
	background-image:url('../images/chat-line2.png');
}*/
/*.chat-narrator:before{
	content:'';
	display:block;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#fdd26e;
	clip-path: polygon(5% 5%, 45% 1%, 95% 5%, 99% 60%, 96% 85%, 47% 98%, 6% 95%, 1% 55%);
}
.chat-narrator:after{
	content:'';
	display:block;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#887d69;
	clip-path: polygon(calc(5% + 10px) calc(5% + 10px), 45% calc(1% + 10px), calc(95% - 10px) calc(5% + 10px), calc(99% - 15px) 60%, 
					calc(96% - 10px) calc(85% - 10px), 47% calc(98% - 10px), calc(6% + 10px) calc(95% - 10px), calc(1% + 15px) 55%);
}*/
.chat-narrator-left{
	float:left;
	width:72px;
	margin-right:10px;
	margin-left:-20px;
	position:relative;
	z-index:3;
}
.chat-narrator-right{
	width:auto;
	overflow:hidden;
	/* transform:scale(0); */
	/* transform:scale(1); */
	position:relative;
	z-index:4;
}
.narrator {
	width:72px; 
	height:72px;
    /* border-radius:50%; */
    /* border:3px solid #b88956; */
	float:left;
	padding:8px;
    background-image:url('../images/001/narrator.png');
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
}
.narrator img{
	width:100%;
	height:auto;
    display:none;
}
.narrator2 .narrator{
    background-image:url('../images/001/narrator2.png');
}
.narrator3 .narrator{
    background-image:url('../images/001/narrator3.png');
}
.narrator4 .narrator{
    background-image:url('../images/001/narrator4.png');
}
.narrator5 .narrator{
    background-image:url('../images/001/narrator5.png');
}
.narrator6 .narrator{
    background-image:url('../images/001/narrator6.png');
}

.chat-text-narrator {    
	float:left;
	width:calc(100% - 4px);
    font-size: 1.1rem;
	position:relative; 
	margin:2px;
	color:#332d2c;
	white-space: pre-wrap;
	line-height:1.3;
}
.chat-text-narrator img{
	width:auto;
	height:auto;
	max-width:800px;
	max-width:100%;
	/* max-height:600px; */
}

/*.chat-text-narrator:after{
	content:'';
	display:block;
	position:absolute;
	top:calc(100% - 1px);
	width: 0;
    height: 0;
    border-style: solid;
    border-width: 33px 43px 0 0;
    border-color: #ffffff transparent transparent transparent;
	left:30px;
}*/


.chat-time1 {
	font-size: 1.6rem;
	margin-bottom:5px;
	clear:both;	
	color:#ffffff;
	display:none;
	/* margin-right:10px; */
	/* margin-top:10px; */
	/* float: right; */
}

.chat-time2 {
	font-size: 1.6rem;
	margin-bottom:5px;
	clear:both;	
	color:#887d69;
	text-align:right;
	display:none;
}
.chat-user{
	max-width:70%;
	padding:25px;
	/* padding-top:40px; */
	margin-bottom:20px;
	float:right;
	clear:both;
	position:relative;
	
	background-image:url('../images/001/chat-bg.png');
	background-size:100% 100%;
	background-repeat:no-repeat;
	transform-origin:50% 50%;
	/* transform:rotate(2deg); */
}

/*.chat-user:before{
	content:'';
	display:block;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#a8d665;
	clip-path: polygon(5% 5%, 45% 1%, 95% 5%, 99% 60%, 96% 85%, 47% 98%, 6% 95%, 1% 55%);
}
.chat-user:after{
	content:'';
	display:block;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#ffffff;
	clip-path: polygon(calc(5% + 10px) calc(5% + 10px), 45% calc(1% + 10px), calc(95% - 10px) calc(5% + 10px), calc(99% - 15px) 60%, 
					calc(96% - 10px) calc(85% - 10px), 47% calc(98% - 10px), calc(6% + 10px) calc(95% - 10px), calc(1% + 15px) 55%);
}*/
.chat-text {
	/* padding:50px; */
	/* background-color: #5c828e; */
	color: #332d2c;
	float: right; 
	/* border-radius: 15px;  */
	font-size: 1.1rem;
	line-height:1.3;
	position:relative;
	min-width:100px;
	text-align:right;
	text-align:left;
	z-index:3;
}

/*.chat-text:after {
	content:'';
	display:block;
	position:absolute;
	width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 43px 33px 0;
    border-color: transparent #5c828e transparent transparent;
	top:calc(100% - 1px);
	right:30px;
}*/

.chat-template1, .chat-template2{
	display:none;
}
.chat-user._new{
	animation: chatnewtext 0.7s 0.0s forwards;
}
.chat-narrator._new .chat-narrator-left{
	animation: chatnew 0.6s 0.0s forwards;
}
.chat-narrator._new{
	animation: chatnewtext 0.7s 0.0s forwards;
}
.chat-narrator._new .chat-dots{
	/* animation: chatnewdots 2.5s 0.0s forwards; */
}
.chat-narrator .chat-narrator-right._new{
	animation: chatnewtext 0.7s 0.0s forwards;
}
.chat-image{
	width:100%;
	height:auto;
	/* min-height:350px; */ /* For other images -> off*/
	border:2px solid #937642;
}
.chat-textaudio{
	position: absolute;
    top: 69px;
    left: 13px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    border: 2px solid #feecc1;
    background-color: #ffffff;
    text-align: center;
    padding: 10px;
    font-size: 20px;
    /* opacity: 0.0; */
}
.chat-textaudio.active{
	background-color:#84b148;
}
.chat-textaudio.active img{
	filter:brightness(1000%);
}
.chat-textaudio img{
	vertical-align:middle;
	width:20px;
	height:20px;
}
.info-content .chat-textaudio{
	top:auto;
	bottom:100px;
}
.picture-bg{
	width:100%;
	height:auto;
	max-height:none;
	/* border:2px solid #937642; */
	/* min-height:500px; */
}
.picture-box{
	position:relative;
	line-height:0;
	display:inline-block;
}
.picture-image{
	position:absolute;
}
.picture-image.sepia{
	filter:sepia(100%);
}
.picture-image.blackwhite{
	filter:grayscale(100%);
}


.chat-narrator.highlight{
	/* border:1px solid #3d963f; */
}
.chat-narrator.highlight .chat-text-narrator{
	/* filter:drop-shadow(0 0 2px #001686); */
}
/*.chat-narrator.highlight:before{
	content:'';
	position:absolute;
	display:block;
	top:0;
	left:0;
	width:16px;
	height:16px;
	border-radius:50%;
	background-color: #3d963f;
}*/

.chat-narrator.narrator0 .narrator{
	visibility:hidden;
}
.chat-narrator.narrator2, .chat-narrator.narrator3, .chat-narrator.narrator4, .chat-narrator.narrator5{
	background-image:url('../images/001/chat-bg2.png');
}
.chat-narrator.narrator2 .chat-text-narrator{
	/* background-color:#e6dece; */
	color:#332d2c;
}
.chat-narrator.narrator2 .chat-text-narrator:After{
	/* border-top-color:#e6dece; */
}

.chat-dots{
	position:absolute;
	left:220px;
	top:55px;
}
.chat-dot{
	display:inline-block;
	position:relative;
	left:0;
	top:0;
	width:8px;

	height:8px;
	margin-right:4px;
	border-radius:50%;
	background-color:#ffffff;
	animation: chatdothop 1s infinite;
	animation-delay:0s;
}
.chat-dot:nth-child(2){
	animation-delay:0.2s;
}
.chat-dot:nth-child(3){
	animation-delay:0.4s;
}

#user-box {
	position:absolute;
	right: 0px;
	bottom: 0px;
	height: 850px; 
	width: 851px; 
	padding-top:40px;
    padding-left: 300px;
    padding-right: 10px;
	z-index:19;
	background-image:url('../images/bg_screen_user.png');
	background-size:100% 100%;
	/* background-color: #f5f5f5; */
	transition:bottom 0.5s;
}
#user-box._active{
	bottom:150px;
}
#grey-box, #main {
	transition:filter 0.2s;
}
.user-box-container{
	float:left;
	width:80%;
	margin-left:10%;
	position:relative;
	/* margin-top:65px; */
}
.user-box-answer-divide{
	display:none;
	float:left;
	background-image:url('../images/chat-divide.png');
	background-position:center;
	background-repeat:no-repeat;
	width:100%;
	height:32px;
}
.user-boxes {
	float:left;
	width:94%; 
	margin:10px 3%;
	color: #ffffff;
    background:linear-gradient(to bottom,var(--button-color1) 0%, var(--button-color2) 100%);
    border-radius:12px;
    box-shadow:0 0 12px rgba(255,255,255,0.5);
	font-size:1.3rem;
	line-height: 1.1;
	text-align:center;
	padding:10px 10px;
	cursor:pointer;
	
	animation: userboxanim 3s 1.9s infinite;
	-webkit-tap-highlight-color: transparent;
}
/* .user-boxes.type2{ */
	/* background-image: url('../images/button-bg-user2.png'); */
/* } */
/* .user-boxes.type3{ */
	/* background-image: url('../images/button-bg-user3.png'); */
/* } */
.green-box {
	/* float:left; */
	width:90%; 
	margin-left:5%;
	margin-bottom:40px;
	color: #ffffff;
	/* background-color: #008616; 	 */
    background:linear-gradient(to bottom,var(--button-color1) 0%, var(--button-color2) 100%);
    border-radius:12px;
    box-shadow:0 0 12px rgba(255,255,255,0.5); 
	/* border-radius: 15px;  */
	font-size:1.5rem;
	text-align:center;
	padding:10px;
	cursor:pointer;
	-webkit-tap-highlight-color: transparent;
}
.chat-chats .green-box {
	float:left;
}


.green-box._anim{
	animation: infoanim 4s 0s infinite;
}
.setting, .setting-info{
	width:100%; 
	/* margin:0 auto; */
	margin-bottom:5px;
	background-image: url('../images/001/setting-off.png'); 	
	background-size:100% 100%; 
	font-size:1.2rem;
	text-align:center;
	padding:15px 15px 25px;
	cursor:pointer;
	color:#f7e8c6;
	-webkit-tap-highlight-color: transparent;
	font-family: 'Agfa';
	font-weight:400;
	text-transform:uppercase;
}
.setting-info{
	background-image: url('../images/001/setting-info.png'); 
}
.setting:active, .setting-info:active{
	filter:brightness(130%);
}
.setting.green{
	background-image: url('../images/001/setting-on.png'); 
	color:#c6f4d4;
}
.setting.red{
	background-image: url('../images/001/setting-red.png'); 
	color:#f4c6c6;
}
.settings-bg{
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;
	padding:20px 0px 60px 0px;
	position:relative;
	z-index:2;
	top:0px;
    max-width: 420px;
	width: calc(100% + 11px);
    margin: 0 auto;
    max-height: 100%;
    overflow-y: auto;
	left:-5px;
}
.settings-title{
	color:#edd8c6;
	text-align:left;
	position:relative;
	z-index:3;
    max-width: 420px;
    margin: 0 auto;
}
.settings-title h1{
	color:#edd8c6;
	text-align:left;
	font-size:1.8rem;
	font-weight:700;
	margin:0;
}
.setting-type1{
}
.setting-type2{
	display:none;
	flex-flow:row wrap;
}
.setting-type2 .setting{
	width:calc(100% - 50px);
}
.setting-type2 .setting-info{
	width:45px;
}
.setting-warning{
	position:fixed;
	bottom:20px;
	left:20px;
	right:20px;
	background-color:#c32f2f;
	padding:15px;
	border-radius:10px;
	text-align:center;
}
.setting-warning h1{
	color:#ffffff;
	font-size:1.4rem;
	margin:0;
}
.setting-warning p{
	color:#ffffff;
	font-size:1.1rem;
	margin:0;
}
.setting-help{
	color:#ffffff;
	font-size:1.0rem;
	padding:0 10px;
}
#setting-popup{
	display:none;
	position:fixed;
	top:50%;
	transform:translateY(-50%);
	left:20px;
	right:20px;
	color:#333333;
	background-color:#ffffff;
	border-radius:10px;
	padding:20px;
	z-index:55;
	font-size:1rem;
}
#setting-popup-close{
	position:absolute;
	top:5px;
	right:5px;
}
.setting-popup-content{
	padding-right:10px;
	padding-top:10px;
}
.setting-popup-text{
	display:none;
}
.setting-popup-text b{
	font-size:1.1rem;
}
.button {
	color: #ffffff;
	font-size:1.4rem;
	text-align:center;
	padding:20px;
	cursor:pointer;
	border:0;

    background:linear-gradient(to bottom,var(--button-color1) 0%, var(--button-color2) 100%);
    border-radius:12px;
    box-shadow:0 0 12px rgba(255,255,255,0.5);
	line-height: 1.1;
	cursor:pointer;
	
	-webkit-tap-highlight-color: transparent;
}
.button.red, .green-box.red {
	/* background-color: #860d00; */
	background-image: url('../images/button-bg-red.png');
}

.minigame-message{
	font-size:2.1rem;
	margin-bottom:50px;
	color:#ffffff;
}
.minigame-message span{
	font-weight:700;
}
.minigame-input{
	width:100%;
	color:#000000;
	background-color:transparent;
	border:0;
	padding:25px;
	font-size:20px;
	font-weight:400;
	/* box-shadow:         inset 0 0 10px rgba(0,0,0,0.2); */
	/* display:none; */
	margin-top:20px;
	margin-top:0px;
	margin-bottom:20px;

	background-image: url(../images/001/chat-bg1.png);
    background-size: 100% 100%;
}
.minigame-input::placeholder{
	color:#999999;
}

#toast, #hinweise-toast{
	/* width:1080px; */
	/* height:100px; */
	position:absolute;
	left:30px;
	top:-120px;
	/* background-color:rgba(255,255,255,0.95); */
	/* box-shadow:0 0 35px rgba(0,0,0,0.2); */
	background-image:url('../images/001/chat-bg1.png');
	background-size:100% 100%;
	background-repeat:no-repeat;
	padding:10px;
	z-index:1000;
	opacity:0;
    display:none;
}
#hinweise-toast{
	height:auto;
	top:-320px;
	padding:20px;
	left:0;
	display:none;
	color:#443d3b;
}
.toast-image {
	width:60px; 
	height:60px; 
	border:3px solid #f5f5f5; 
	border-radius:50%;
	overflow:hidden;  
	float:left; 
	margin-top:10px;
	margin-left:10px;
}
.toast-image img{
	width:100%;
	height:auto;
}
.toast-text{
	font-size:1.3rem;
	margin:10px 40px 0;
	color:#000000;
}
.toast-buttons{
	/* margin:0 20px 0; */
	text-align:center;
}
.toast-button{
	display:inline-block;
	margin:5px 5px;
	color: #ffffff;	
	font-size:1.0rem;
	text-align:center;
	padding:10px;
	cursor:pointer;
	border:0;

    background:linear-gradient(to bottom,var(--button-color1) 0%, var(--button-color2) 100%);
    border-radius:12px;
    box-shadow:0 0 12px rgba(255,255,255,0.5);
	line-height: 1.1;
	cursor:pointer;
	
	-webkit-tap-highlight-color: transparent;
}
.toast-button._red{
	background:linear-gradient(to bottom,#8a4b4b 0%, #492828 100%);
}
.toast-button._green{
	/* background-color: #008616;  */
}

#toast.type2{
	width:1400px;
	left:400px;
	height:195px;
	padding:25px;
}
#toast.type2 .toast-text{
	float:left;
}
#toast.type2 .toast-buttons{
	float:left;
}

#toast.narrator2{
	background-image:url('../images/001/chat-bg2.png');
}
#toast.narrator2 .chat-text-narrator{
	/* background-color:#e6dece; */
	color:#d66666;
}
.icon-question{
	position:relative;
	float:right;
	margin-top:0px;
	margin-bottom:40px;
	/* background-color:#863128; */
	background:url('../images/question-bg.png');
	background-size:cover;
	/* border-radius:50%; */
	width:123px;
	height:123px;
	cursor:pointer;
	z-index:2;
	font-size:8rem;
	line-height:6rem;
	text-align:center;
	padding-top:5px;
	box-sizing:border-box;
	color:#863128;
	/* font-style:italic; */
	font-weight:700;
	transform-origin:50% 50%;
	transform:rotate(15deg);
	-webkit-tap-highlight-color: transparent;
}
.questionbox{
	top:0;
	position:absolute;
	right:0px;
	width:800px;
	/* height:250px; */
	z-index:1;
	display:none;
	pointer-events:none;
}
.questionbox-content{
	color:#ffffff;
	font-size:2.1rem;
	max-width:800px;
}

.questionbox{
	position:absolute;
	right:0px;
	top:140px;
	padding:50px;
	background-color:#863128;
	z-index:50;
	display:none;
}
.questionbox:after{
	display:block;
	content:'';
	position:absolute;
	width:0px;
	height:0px;
	top:-80px;
	right:30px;
	border:40px solid transparent;
	border-bottom:40px solid #863128;
}



#main{
	height: 100%;
	width:100%;
	overflow:hidden;
	position:relative;
	background-image:url('../images/001/game_bg.jpg');
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;
	background-color:#322421;
}
.main-screen{
	/* background-image:url('../images/bg_screen_main.png'); */
	background-size:100% 100%;
	position:absolute;
	bottom:0;
	left:-30px;
	width:1200px;
	height:850px;
}

#footer{
	/* height: 77px;  */
	width: 100%;
	background-image:url('../images/001/footer_bg.png');
	background-size:100% 100%;
	position:absolute;
	bottom:0;
    height:70px;
	z-index:20;
}
.footer-content{
	padding:0 0;
	position:absolute;
    bottom:10px;
	left:0;
    right:0;
    text-align:center;
}
.footer-ende{
	text-align:center;
	padding:16px;
	color:#ffffff;
	font-size:1.8rem;
	display:none;
}
#selectroute{
	position:fixed;
	top:50px;
	left:50px;
	background-color:#ffffff;
	padding:50px;
	border-radius:30px;
	box-shadow:4px 4px 12px rgba(0,0,0,0.2);
	z-index:200;
	font-size:25px;
	line-height:1.5;
	display:none;
}
#resetgame{
	position:fixed;
	top:20px;
	background-color:#ffffff;
	padding:10px;
	border-radius:10px;
	box-shadow:2px 2px 8px rgba(0,0,0,0.2);
	z-index:101;
	font-size:1.2rem;
	line-height:1.3;
	display:none;
	left:10px;
	right:10px;
}
#resetgame .button{
	padding:10px 20px;
	width:100%;
	text-align:center;
	margin-bottom:15px;
}
#resetgame .button.red{
	background:linear-gradient(to bottom,#8a4b4b 0%, #492828 100%);
}
#lightbox{
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	z-index:100;
	background-color:rgba(0,0,0,0.7);
	display:none;
	opacity:0;
	align-items: center;
}
#lightbox-content{
	position:absolute;
	transform-origin:50% 50%;
	text-align:center;
	transform:scale(0.5);
	transition:transform 1s;
	width:100%;
}
#lightbox-content.big{
	transform:scale(1);
}
#lightbox-close{
	position:absolute;
	top:20px;
	right:20px;
	z-index:20;
}
#lightbox-bg{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
}
.stage{
	color: #ffffff; 
	display:inline-block; 
	padding:0px;
	margin-right:4px;
	margin-left:4px;
	/* background-image: url('../images/stage_off.png'); */
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
    background:#516079;
	transform-origin:50% 50%;
	width:16px;
	height:16px;
    border-radius:50%;
	text-align:center;
    border:2px solid #bfbfbf;
    opacity:0.5;
}
.stage.active{
    opacity:1;
    background:#94a4bf;
	/* background-image: url('../images/stage_on.png'); */
}
.stage:last-child{
	/* transform:scale(1.2); */
}

.stage-bar {
	height: 63px;
	width: 100%; 
	/* background-image: url('../images/stage-button.png'); */
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
	transform-origin:50% 50%;
	transform:scale(0.88);
	float: left;
	margin-bottom:5px;
	position:relative;
	text-align:center;
}
.stage-bar-filled {
	/* background-image: url('../images/stage-button-glow.png');  */
}
.stage-bar-filled:last-of-type {
	/* filter:none; */
}
.stage-bar-filled:after{
	/*display:inline-block;
	content:'';
	width:40px;
	height:40px;
	margin:12px;
	border:5px solid #f2c482;
	border:5px solid #888888;
	border-radius:50%;*/
}
.stage-marker{
	display:inline-block;
	content:'';
	width:47px;
	height:47px;
	margin:17px 0;
	border:5px solid #f2c482;
	border-radius:50%;
	position:absolute;
	/* transform-origin:50% 50%; */
	/* transform:scale(0.88); */
	margin-left:-11px;
}

.stage-text{
	text-align:center;
	padding-top:15px;
	font-size:1.2rem;
}

#takepicture-container{
	position:relative;
	display:block;
	margin:0 auto;
	width:100%;
	height:100%;
}
.takepicture-buttonbox{
	position:absolute;
	margin-top:0px;
	bottom:20px;
	left:0;
	right:0;
	text-align:center;
	display: flex;
    justify-content: center;
}
.takepicture-button{
	display:inline-block;
	font-size:1.5rem;
	/* font-weight:700; */
	padding:20px;
	/* background-image: url('../images/button-bg2.png');  */
}
.takepicture-ok{
	display:inline-block;
	display:none;
	font-size:1.5rem;

	/* font-weight:700; */
	padding:20px;
	/* background-image: url('../images/button-bg2.png');  */
	/* margin-right:50px; */
}
.takepicture-bg{
	width: 1200px;
    height: 950px;
	margin:0 auto;
}
.takepicture-reset{
	display:inline-block;
	display:none;
	font-size:1.5rem;
	margin-left:30px;
}
.takepicture-recamera{
	float:right;
	font-size:1.2rem;
	margin-bottom:30px;
	width:auto;
	text-align:center;
}
#picture{
	display:none;
}
h2{
	margin-bottom:1em;
}

#video{
	position:fixed;
	width:1000px;
	height:500px;
	top:0;
	left:0;
	z-index:100;
}
video{
	width:1200px;
	height:900px;
}
video#takepicture-video{
	width: 100%;
    height: 100%;
	/* aspect-ratio:4/5; */
	/* max-height:70vh; */
	object-fit:cover;
	/* border:1px solid blue; */
}
._schablone video#takepicture-video{
	/* aspect-ratio:9/16; */
	/* max-height:70vh; */
	object-fit:cover;
    position: absolute;
    /* top: 75px; */

	top: 80px;
    height: calc(100% - 128px);
}
video.chat-video{
	width:100%;
	height:auto;
	padding:0px;
}
#lightbox .chat-video{
	pointer-events:none;
}
.chat-audio{
	width:100%;
	transform: scale(1.0);
    margin-left: 0px;
    width: 100%;
}
#videoElement{
	display:none;
}
#logo{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#222d33;
	z-index:109;
	text-align:center;
	display:flex;
	justify-content:center;
	align-items: center;
	display:none;
}
#logo img{
	opacity:0;
	width:90%;
	max-width:518px;
	height:auto;
}
#prestartlogo{
	text-align:center;
}
#prestartlogo img{
	width:800px;
	height:auto;
	margin-top:150px;
	margin-bottom:100px;
}

.hinweise-item{
	/* margin-top:40px; */
	margin-bottom:10px;
	padding:20px;
	/* border-bottom:2px solid #ffffff; */
	background-image: url('../images/001/hint-bg.png'); 	
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;	
}
.hinweise-item-unlock{
	color: #000000;	
	font-size:1.2rem;
	text-align:center;
	cursor:pointer;
	display:block;
	margin:0 auto;
	/* width:690px; */
	/* background-color: #008616; 	 */	
	background-size:100% 100%; 
	padding:10px 30px;
	cursor:pointer;
	border:0;
}
.hinweise-item-unlock._inactive{
	opacity:0.4;
	/* filter:brightness(80%); */
}
.hinweise-item-text{
	display:none;
	color:#000000;
	font-size:1.3rem;
	/* text-shadow:1px 3px 4px rgba(0,0,0,1); */
	/* padding-left:150px; */
	position:relative;
	/* min-height:106px; */
}
.hinweise-headline{
	font-weight:400;
	color:#d1b995;
	color:#000000;
	font-size:3.8rem;
	font-weight:700;
	margin:0;
	margin-top:0px;
	margin-bottom:0.5em;
}
.hinweise-gem{
	background-image:url('../images/001/Gem.png');
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
	display:inline-block;
	width:30px;
	aspect-ratio:1;
    vertical-align: middle;
}
#confetti{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	pointer-events:none;
}
#black{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:#000000;
	opacity:0;
	display:none;
	z-index:100;
}
#black.demo{
	display:block;
	animation: blackdemoanim 60s 0s infinite;
	animation-timing-function: linear;
	pointer-events:none;
}
#license{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:#ffffff;
	display:none;
	z-index:100000;
	pointer-events:none;
}
#license-text{
	color:#000000;
	font-size:60px;
	text-align:center;
	padding-top:500px;
}

.tour-button{
	color: #ffffff;
	background:transparent;
	/* background-color: #008616; 	 */
	background-image: url('../images/button-bg.png'); 	
	background-size:100% 100%; 
	font-size:3rem;
	text-align:center;
	padding:30px 20px;
	cursor:pointer;
	border:0;
	margin:0 auto;
	margin-bottom:40px;
	max-width:1000px;
}
.prestart-message{
	font-size:2rem;
	text-align:center;
	color:#000000;
}
#landscape{
	display:none;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	background-color:#57392d;
	color:#c9a783;
	font-size:1.8rem;
	padding:40px;
	background-image:url('../images/bg_landscape.jpg');
	background-size:100% 100%;
	background-repeat:no-repeat;
	z-index:1001;
}
#landscape img{
	max-height:50vh;
	width:auto;
}
body.prestart{
	background-color:#ffffff;
}
.back-button{
	position:absolute;
	top:10px;
	left:10px;
}
.back-button img{
	width:40px;
	height:auto;
}
.passport-image{
	width:80%;
	max-width:600px;
	margin:0 auto;
}
.passport-text{
	background-image:url('../images/pass-downloadbg.png');
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;
	text-align:center;
	width:80%;
	max-width:600px;
	color:#ecdbc7;
	padding:10px;
	margin:0 auto;
	font-weight:900;
	font-size:1.3rem;
}
.passport-container, .review-container, .ratings-container, .feedback-container, .google-container{
	padding:20px 0;
	text-align:center;
	max-height:calc(var(--viewport-height) - 60px);
	/* max-height:calc(100vh); */
	overflow-y:auto;
	/* padding-bottom:100px; */
}
.passport-buttons{
	text-align:center;
}
.passport-button{
	margin:0 10px;
	display:inline-block;
}
.passport-button img{
	width:60px;
	height:auto;
}
.passport-open-button{
	background-image:url('../images/button-bg-short.png');
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;
	font-size:1.3rem;
	text-align:center;
	width:60%;
	max-width:150px;
	color:#3d261c;
	padding:10px;
	margin:0 auto;
	position:relative;
	top:-30px;
}
.passport-open{
	display:none;
	width:95%;
	margin-left:5%;
}
.passport-openimage{
	width:100%;
	height:auto;
}
.passport-reviewtitle, .review-reviewtitle, .ratings-reviewtitle, .feedback-reviewtitle, .google-linktitle, .google-reviewtitle{
	margin:10px 35px -5px;
	padding:5px 5px 10px;
	background-color:rgba(0,0,0,0.3);
	text-align:center;
	color:#ecdbc7;
	transform:rotate(1deg);
	position:relative;
	font-weight:900;
	z-index:1;
}
.google-linktitle{
	margin-top:-5px;
	transform:rotate(0);
}
.google-linktitle a{
	color:#ecdbc7;
}
.passport-reviewbutton, .review-reviewbutton, .ratings-reviewbutton, .google-reviewbutton, .feedback-reviewbutton, .google-linkbutton{
	padding:10px;
	margin:0px 30px 40px;
	text-align:center;
	background-image:url('../images/review-button.png');
	background-size:100% 100%;
	color:#3f443b;
	font-size:1.5rem;
	position:relative;
	z-index:2;
}
.ratings-reviewbutton{
	margin:30px 40px 0;
}
.ratings-reviewtitle{
	margin:-4px 35px 10px;
	transform:rotate(0);
}
.review-reviewtitle{
	margin-top:20px;
}
.review-reviewbutton.inactive, .google-reviewbutton.inactive{
	opacity:0.5;
}
.review-root, .ratings-root, .google-root, .feedback-root, .google-root{
	display:none;
	position:absolute;
	z-index:5;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image: url(../images/screen_bg.jpg);
    background-size: 100% 100%;
}
.review-inst-container{
	margin-top:20px;
	position:relative;
}
.review-inst-title{
	background-image: url('../images/review-titlebg.png');
	background-size: 100% 100%;
	text-align:center;
	margin:0 40px 0;
	padding:10px;
	color:#3f443b;
	font-size:1.4rem;
	position:relative;
	z-index:2;
}
.review-inst-box{
	border:2px solid #ad8e77;
	border-radius:8px;
	padding:60px 15px 5px;
	position:relative;
	top:-40px;
	margin:0 30px 0px;
	text-align:left;
	line-height:1.3;
}
.review-inst-box img{
	float:left;
	width:30px;
	height:auto;
	margin-right:5px;
	margin-top:3px;
	
}
.review-inst{
	width:auto;
	overflow:hidden;
	color:#f6e7c6;
	font-size:1.1rem;
}
img.review-arrow{
	position:absolute;
	top:97%;
	width:70px;
	height:auto;
	right:58%;
}
.review-printoutbox{
	text-align:right;
	position:relative;
	top:-100px;
	margin-bottom:-40px;
}
.review-printout{
	width:40%;
	margin-right:55px;
}
@media(max-width:650px){
	.review-printoutbox{
		top:-50px;
	}
}
.review-rating{
	background-image:url('../images/review-ratingbg.png');
	background-size:100% 100%;
	padding:10px 20px 30px;
	margin:0 30px;
}
.review-ratingtitle, .ratings-box-title{
	text-align:center;
	font-size:1.3rem;
	color:#3d261c;
}
.review-ratingstars{
	margin-top:20px;
	text-align:center;
}
.review-ratingstars img{
	width:18%;
	margin:0.5%;
}
.review-ratinginfo{
	font-size:1rem;
	color:#e4c4a3;
}
.ratings-ratingstars{
	text-align:center;
	margin-top:25px;
}
.ratings-ratingstars img{
	width:10%;
	margin:0.5%;
}
.ratings-box-text textarea{
	-webkit-appearance: none;
	background:transparent;
	color: #3d261c;
	border:0;
	padding:5px;
	width:100%;
	height:175px;
	font-family:'Agfa', sans-serif;
	font-weight:300;
	font-size:1.1rem;
	margin-top:20px;
}
.ratings-box-text textarea::placeholder{
	font-style:italic;
}
.ratings-box{
	background-image:url('../images/rating-bg.png');
	background-size:100% 100%;
	padding:10px 20px 30px;
	margin:0 30px;
}
.google-iframe{
	margin:30px;
}
#google{
	border:0;
}
.feedback-icon{
	width:60%;
	padding:20px;
	margin: auto;
	background-image:url('../images/feedback-bg.png');
	background-size:100% 100%;
	display:flex;
	text-align:center;
	flex-flow:column nowrap;
	align-items:center;
	justify-items:center;
	margin-top:25px;
	margin-bottom:25px;
}
.feedback-icontext{
	color:#3f443b;
	font-weight:900;
	font-size:1.3rem;
	line-height:1.3;
}
.feedback-iconimage{
	width:70%;
}
.feedback-box{
	width:60%;
	margin: auto;
	background-image:url('../images/feedback-boxbg.png');
	background-size:100% 100%;
	color:#e4c4a3;
	font-weight:300;
	font-size:0.9rem;
	text-align:center;
	padding:15px;
	margin-bottom:25px;
	line-height:1.3;
}
.feedback-boxtext{
	font-weight:900;
	font-size:1.3rem;
}
.google-passport{
	max-width:400px;
	margin:0 auto;
	height:auto;
}
.google-arrow{
	text-align:center;
	margin-top:25px;
	color:#f6e7c6;
}
.google-arrow img{
	width:30px;
	height:auto;
	margin-right:5px;
	margin-top:3px;
}
.google-submitbox{
	margin:20px 20px 0px;
	background-image:url('../images/001/setting-off.png');
	background-size:100% 100%;
	/* max-width:500px; */
	color:#f6e7c6;
	font-size:1.3rem;
	padding:20px;
}
.google-submitbox img{
	width:50px;
	height:auto;
	vertical-align:middle;
	margin-right:15px;
	opacity:0.5;
}
.google-submitbox.active img{
	opacity:1;
}
.google-linkbutton a{
	text-decoration:none;
	color:#3f443b;
}
#pause{
	display:none;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:rgba(0,0,0,0.8);
	color:#ffffff;
	font-weight:700;
	font-size:1.5rem;
	text-align:center;
	flex-flow:column nowrap;
	justify-content:center;
	align-items:center;
	padding:30px;
}
#pause img{
	max-width:150px;
	height:auto;
}

@media(max-width:450px){
	.score-score{
		/* font-size:1.0rem; */
	}
	.score-text{
		/* font-size:1.0rem; */
	}
}
@media(max-width:400px){
	.small-score{
		display:none;
	}
}

@keyframes chatnew {
	0% {  opacity:0;}
	100% {  opacity:1;}
}
/*@keyframes chatnewuser {
	0% { transform: rotate(-20deg) translate(2000px,0);}
	100% { transform: rotate(2deg) translate(0,0);}
}*/
@keyframes chatnewtext {
	0% { transform: scale(0.0);}
	70% { transform: scale(1.1);}
	100% { transform: scale(1.0);}
}
@keyframes chatnewdots {
	0% { opacity:0;}
	20% { opacity:1;}
	98% { opacity:1;}
	100% { opacity:0;}
}

@keyframes chatdothop {

  0%   {top:0}
  25%  {top:-10px;}
  50%  {top:0;}

  75%  {top:0;}
  100% {top:0;}
}
@keyframes infoanim {
  0%   {transform:scale(1); filter:brightness(100%);}
  15%  {transform:scale(1.1); filter:brightness(150%);}
  30% {transform:scale(1); filter:brightness(100%);}
}
@keyframes schildanim {
  0%   {filter:brightness(100%);}
  20%  {filter:brightness(200%);}
  40% {filter:brightness(100%);}
}
@keyframes mapanim {
  0%   {transform:scale(1); filter:brightness(100%);}
  50%  {transform:scale(1.2); filter:brightness(150%);}
  100% {transform:scale(1); filter:brightness(100%);}
}
@keyframes userboxanim {
  0%   {transform:scale(1); filter:brightness(100%);}
  50%  {transform:scale(1.05); filter:brightness(120%);}
  100% {transform:scale(1); filter:brightness(100%);}
}
@keyframes arrowanim {
  0%   {transform:scale(1); opacity:0;}
  30%  {transform:scale(1.4); opacity:1;}
  60% {transform:scale(1.8); opacity:0;}
  100% {transform:scale(1.8); opacity:0;}
}
@keyframes pulse {
  0%   {transform:scale(1); }
  50%  {transform:scale(1.4); }
  100% {transform:scale(1); }
}
@keyframes turn {
  0%   {transform:rotate(0);}
  100% {transform:rotate(360deg);}
}
@keyframes timepulse {
  0%   {opacity:0; transform:scale(1.0);}
  25%   {opacity:1; }
  50%   {opacity:1; transform:scale(1.1);}
  75%   {opacity:1; }
  100% {opacity:0; transform:scale(1.0);}
}
@keyframes demoanim{
  0%   {opacity:0; }
  40%  {opacity:0.0; }
  60%  {opacity:0.8; }
  80%  {opacity:0.8; }
  100% {opacity:0; }
}
@keyframes blackdemoanim{
  0%   {visibility:hidden; opacity:1; }
  93%  {visibility:hidden; opacity:1; }
  96%  {visibility:visible; opacity:1; }
  99%  {visibility:hidden; opacity:1; }
  100% {visibility:hidden; opacity:1; }
}

@font-face {
    font-family: 'Agfa';
    src: url('../font/AgfaRotisSansSerif.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Agfa';
    src: url('../font/AgfaRotisSansSerifBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Agfa';
    src: url('../font/AgfaRotisSansSerifLight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Agfa';
    src: url('../font/AgfaRotisSansSerifExtra.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

/* Game styles */

.gamearea{
	position:absolute;
	left:100%;
	width:100%;
	height:100%;
	/* border-left:20px solid white; */
	transition:left 0.6s;
	transition-timing-function: ease-in-out;
	z-index:105; /* über footer */
	top:0;
	background-image:url('../images/001/minigame_top1.png'), url('../images/001/minigame_bottom1.png'), url('../images/001/minigame_bg1.jpg');
	background-size: 100%, 100%, 100% 100%;
	background-position: top, bottom, center;
    background-repeat: no-repeat;;
}
.gamearea._hidden{
	left:calc(100% + 50px);
}
.gamearea.instant{
	transition:0s;
}
.gamearea._active{
	left:0%;
}
.gamearea._active #icon-doublearrow{
	left:-50px;
}
.gamearea._score{
	background-image:url('../images/001/highscore-bg.jpg');
	background-size:100% 100%;
}
#gamearea-container{
	/* padding:10px; */
	height:100%;
	overflow-y:auto;
}
.gamearea-gamecontent{
	top:0;
	left:0;
	right:0;
	bottom:0;
	position:absolute;
	z-index:5;
}
.gamearea-gamecontent._schablone{
	float:none;
	width:100%;
	margin:0 auto;
	height:886px;
	background:#000000;
}
.gamearea._wiregame .gamearea-gamecontent{
	float:none;
	width:100%;
	margin:0 auto;
	position:absolute;
	z-index:5;
}
/*.gamearea-gamecontent._schablone .gamearea-questionbox{
	background:#738035;
	width:370px;
	height:886px;
}
.gamearea-gamecontent._schablone .gamearea-questionbox-content{
	width:auto;
	height:auto;
	margin-top:200px;
	margin-left:40px;
	margin-right:40px;
}*/
.gamearea-gamecontent._schablone .game-schablonenspiel-container{
	display:none;
}
.gamearea-headline-slogan{
	float:left;
	margin-left:40px;
	/* font-family: 'ballpark', serif; */
	font-size:4rem;
	color:#c71d0a;
}
.gamearea-headline-spielname{
	font-size:1.5rem;
	margin-top:0px;
	color:#ffffff;
	text-align:left;
}

.gamearea-icon-question{
	position:absolute;
	right:5px;
	top:5px;
	z-index:10;
	background-size:100%;
	background-repeat:no-repeat;
	background-position:top right;
	
	background-image:url('../images/001/narrator3.png');
	width: 50px;
    height: 50px;
	background-size:cover;
	/* border-radius:50%; */
	/* border:4px solid rgba(255,255,255,0.8); */
	
}
.gamearea-icon-question._wimmel{
	/* right:110px; */
	/* top:60px; */
	/* right:60px; */
}
.gamearea-questionbox{
	position:absolute;
	right:70px;
	top:240px;
	padding:50px;
	background-color:#863128;
	z-index:50;
	display:none;
}
.gamearea-questionbox:after{
	display:block;
	content:'';
	position:absolute;
	width:0px;
	height:0px;
	top:-79px;
	right:30px;
	border:40px solid transparent;
	border-bottom:40px solid #863128;
}
.gamearea-questionbox._schablone{
    right: 250px;
    top: 0px;
	padding:40px;
}
.gamearea-questionbox._schablone:after{
	top:85px;
	right:-79px;
	border:40px solid transparent;
	border-left:40px solid #863128;
}
.gamearea-questionbox._wimmel{
	/* right:110px; */
}
.gamearea-questionbox-content{
	color:#ffffff;
	font-size:2.1rem;
	max-width:800px;
}
._schablone .gamearea-questionbox-content{
	max-width:none;
}
.gamearea-gameheader{
	position:absolute;
	top:0;
	left:0;
	right:0;
	width:100%;
	z-index:6;
	text-align:center;
	padding:30px;
	padding-top:30px;
	pointer-events:none;
	background-image:url('../images/001/top_bg.png');
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;
}
.gamearea-gamefooter{
	/* float:left; */
	width:100%;
	/* height:160px; */
	position:absolute;
	transition:bottom 0.6s;
	bottom:0;
	left:0;
	z-index:6;
	text-align:center;
	margin-bottom:20px;
}
.gamearea-gamefooter._kreuzwort{
	top:350px;
	bottom:auto;
}
.gamearea-gamefooter._active{
	/* top:-620px; */
}
.gamearea-gamefooter._arschloss{
	position:absolute;
	top:auto;
	left:0;
	bottom:0;
	z-index:6;
}
.gamearea-gamefooter._schablone{
	background-image:url('../images/001/bottom_bg.png');
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;
	text-align:center;
	margin-bottom:0;
	width:100%;
}
.schablone-text{
	margin-top:30px;
}
.gamearea-gamefooter._schablone._active{
	bottom:50vh;
}
.gamearea-gamefooter._schablone .schablone-input{
	border:2px solid transparent;
	width:100%;
	margin:0 auto;
}
.gamearea-gamefooter._schablone._active .schablone-input{
	border:2px solid #0000ff;
	border-radius:8px;
}
.gamearea-gamefooter._schablone .minigame-answerinput{
	position:absolute;
	left:0;
	right:50%;
	top:0;
	bottom:0;
}
.gamearea-gamefooter-button, .game-kreuzwort-button{
	min-width:250px;
	cursor:pointer;
	border:0;

	color: #ffffff;
    background:linear-gradient(to bottom,var(--button-color1) 0%, var(--button-color2) 100%);
    border-radius:12px;
    box-shadow:0 0 12px rgba(255,255,255,0.5);
	font-size:1.3rem;
	line-height: 1.1;
	text-align:center;
	padding:10px 10px;
	cursor:pointer;
	
	-webkit-tap-highlight-color: transparent;
}
.gamearea-gamefooter-button{
	float:none;
	display:inline-block;
}
._schablone .gamearea-gamefooter-button{
	position:relative;
	top: 13px;
	min-width:120px;
	display:inline-block;
}
._kreuzwort  .gamearea-gamefooter-button{
	position:relative;
	min-width:120px;
	display:inline-block;
}
.game-kreuzwort-button{
	margin-top:0;
	float:right;
}
.kreuzwort-solution-title{
	font-size:0.7rem;
	color:#ffffff;
}
.minigame-answerinput{
	opacity:0.0;
	position:absolute;
	left:0;
    width: 100%;
    font-size:2rem;
	
	top: 40px;
    width: 100%;
    font-size: 3rem;
}
.minigame-answerinput2{
	margin-left:400px;
	border:0;
	border-bottom:2px solid #000000;
	font-size:4rem;
	width:800px;
	padding:15px;
	color:#000000;
}

.game-char{
	position:absolute;
	width:100%;
	bottom:105%;
	font-size:60px;
	text-align:center;
	color:#ffffff;
}

/* SORTIERSPIEL */
.gamearea-gameheader._sortier{
	background:transparent;
	z-index:4;
}
@media(max-height:500px){
	.gamearea-gameheader._sortier .gamearea-headline-spielname{
		display:none;
	}
}
@media(min-height:600px){
	.gamearea-gameheader._sortier{
		padding-top:50px;
	}
}
@media(min-height:700px){
	.gamearea-gameheader._sortier .gamearea-headline-spielname{
		margin-bottom:10px;
	}
}
.gamearea-gameheader._sortier .gamearea-headline-spielname{
	color:#312819;
	font-size:1.5rem;
	text-align:center;
}
.gamearea-gameheader._sortier .game-sortierbox-gametitle{
	text-align:center;
}
.game-sortierspiel-container{
	margin-top:0px;
	padding:20px;
	margin-left:0px;
	position:absolute;
	display:flex;
    flex-flow:row wrap;
    gap:20px;
    transform: translateY(-50%);
	justify-content: center;
    width: 100%;
    top: 52%;
}
.game-sortierspiel-box{
	width:calc(50% - 20px);
    position:relative;
	/* border:1px dashed #808080; */
	margin:0px;
	/* background-color:#ffffff; */
	pointer-events: none;
}
@media(max-height:550px){
	.game-sortierspiel-box{
		width:calc(40% - 20px);
		height:23vh;
		height:139px;
		height: 32vw;
	}
	.game-sortierspiel-container{
		top:50%;
	}
}
.game-sortierbox-audio{
	pointer-events:auto;
	display:none;
}
.game-sortierspiel-audio{
	position:absolute;
	top:50%;
	left:50%;
	translate: -50% -30%;
	z-index:9;
}
.game-sortierspiel-audio .chat-textaudio{
	top:0;
	left:0;
	width:15vw;
	height:15vw;
	display:flex;
	flex-flow:column nowrap;
	justify-content:center;
	align-items:center;
	position:relative;
}
.game-sortierspiel-audio .chat-textaudio img{
	width:50%;
	height:50%;
}
#sortier-progress{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	pointer-events:none;
}
.game-sortierspiel-image{
    position:relative;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
    width:100%;
    aspect-ratio:1;
	pointer-events: auto;
	border:2px solid #fbdd97;
	touch-action: none; /* CRUCIAL */
	user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}
.game-sortierbox-footer-runden{
	float:left;
	width:20%;
	font-size:2.2rem;
	text-align:center;
	margin-top:30px;
	color:#595959;
	margin-left:40px;
}
.game-sortierbox-footer-runden-anzahl{
	/* font-size:4rem; */
	font-size:2.3rem;
	color:#ffffff;
	/* margin-top:-5px; */
	display:inline-block;
	text-align:center;
}
.game-sortierbox-gametitle{
	/* width:50%; */
	font-size:1.2rem;
	color:#ffffff;
	text-align:center;
}
.sortier-name{
	/* position:absolute; */
	width:100%;
	/* bottom:105%; */
	font-size:1.5rem;
	text-align:center;
	color:#ffffff;
}
@media(max-width:400px){
	.sortier-name{
		font-size:1.2rem;
	}
}

/* WIMMELBILD */
.game-wimmelbild-container{
	display: flex;
    height: 100%;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    align-items: center;
}
.game-wimmelbild-bild{
	/* float:left; */
	width:100%;
	height:100%;
	position:relative;
	background-repeat:no-repeat;
	background-size:100% 100%;
}
.game-wimmelbild-footer-fehler{
	position:absolute;
	bottom:-20px;
	left:0;
	background-image:url('../images/001/wimmelbild-fehler.png');
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;
	width:120px;
	height:120px;
	display:flex;
	align-items:center;
	justify-content: center;
}
.game-wimmelbild-footer-text{
	float:left;
	color:#ffffff;
	margin-left:20px;
	font-size:1.2rem;
	margin-top:10px;
}
.game-wimmelbild-fehlerkreis{
	position:absolute;
	width:50px;
	height:50px;
	border-radius:50%;
	border:4px solid #8aff00;
	opacity:0.0;
}
.game-wimmelbild-inner{
	position:absolute;
	left:-25px;
	top:-25px;
	right:-25px;
	bottom:-25px;
	left:0;
	top:0;
	right:0;
	bottom:0;
	border-radius:50%;
	background-color:rgba(0,255,0,0.0);
}
.game-wimmelbild-tipp{
	position:absolute;
	width:80px;
	height:80px;
	top:200px;
	left:200px;
	border-radius:50%;
	border:5px solid #888888;
	z-index:5;
	opacity:0;
	pointer-events:none;
}
.game-wimmelbild-falsch{
	position:absolute;
	width:80px;
	height:80px;
	top:200px;
	left:200px;
	border-radius:50%;
	border:5px solid #ff0000;
	z-index:5;
	pointer-events:none;
	opacity:0;
}

/* SCHABLONENSPIEL */
.game-schablonenspiel-container{
	position:relative;
}
.game-schablonenspiel-bild{
	float:left;
	width:100%;
	height:945px;
	background-image:url('../images/test/wimmelbild.jpg');
	background-repeat:no-repeat;
	background-size:120%;
	background-position:50% 50%;
	/* display:none; */
}
.game-schablonenspiel-schablone{
	position:absolute;
	width:100%;
	height:945px;
	/* background-image:url('../images/test/schablonenspiel.jpg'); */
	background-size:cover;
	background-repeat:no-repeat;
}
.game-schablonenspiel-footer-loesungswort{
	display:inline-block;
	font-size:1.2rem;
	font-size:1.4rem;
	text-align:center;
	/* margin-top:30px; */
	font-weight:600;
	/* margin-left:100px; */
	color:#ffffff;
	width:58%;

	text-align:left;
}
._kreuzwort .game-schablonenspiel-footer-loesungswort{
	width:100%;
	display:block;
}
.gamearea-schablone{
	position:absolute;
	top:75px;
    left: 0;
    width: 100%;
    /* height: 100%; */
    bottom:0;
    /* aspect-ratio: 89/115; */
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    z-index:50;
}
.gamearea-schablone-left, .gamearea-schablone-right{
	position:absolute;
	top:75px;
	bottom:0;
	left:0;
	width:0;
	background-color:rgba(0,0,0,0.85)
}
.gamearea-schablone-right{
	right:0;
	left:auto;
}


/* KREUZWORTRÄTSEL NEW */
.gamearea.kreuzwort{
	/* overflow:hidden; */
}
.gamearea.kreuzwort .gamearea-headline-spielname{
	margin:40px;
}
.cross-container{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	overflow:hidden;
}
.cross-raster{
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0;
	/* overflow:hidden; */
	color:#414141;
	transform-origin: 0 0;
}
/*.cross-raster::before{
	content:'';
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:10px;
	height:10px;
	background-color:red;
}*/
.cross-raster-bullet{
	margin: 0;
    position: absolute;

	background-color:#425679;
	border:1px solid #bbab86;
	color:#ffffff;
	text-align:center;
	font-size:1rem;
	font-weight:600;
	/* padding:10px; */
	box-sizing:border-box;
	border-radius:50%;
	width:26px;
	height:26px;
	text-align:center;
}
.cross-question-bullet{
	float:left;
	background-color:#425679;
	border:1px solid #bbab86;
	color:#ffffff;
	text-align:center;
	font-size:1.8rem;
	font-weight:600;
	margin-right:10px;
	margin-left:10px;
	/* padding:10px; */
	box-sizing:border-box;
	border-radius:50%;
	width:40px;
	height:40px;
	text-align:center;
	line-height: 1.1;
}

.cross-questions{
	width: 100%;
	aspect-ratio:calc(9 / 16);
	position:absolute;    
	top: 95%;
	font-size:2.4rem;
	color:#595959;
	background-image:url('../images/001/crossword_bg.png');
	background-size:100% 100%;
	padding:30px;
	padding-top:100px;
	z-index:5;
	transition:top 0.5s;
}
.cross-questions._active{
	top:23px;
}
@media(min-height:500px){
	.cross-questions._active{
		top:50px;
	}
}
@media(min-height:600px){
	.cross-questions._active{
		top:80px;
	}
}
@media(min-height:700px){
	.cross-questions._active{
		top:130px;
	}
}
.cross-questions-close{
    position:absolute;
	top:50px;
	right:5px;
	z-index:19;
    width:40px;
    height:40px;
    /* background:url('../images/001/btn-close-red.png');
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat; */
	padding:5px;
	font-size:1rem;
	width:120px;
	line-height: 1.5;
}
.cross-questions-indexes{
}
.cross-questions-prompt{
	font-size:1.1rem;
	color:#ffffff;
	margin-left:10px;
}
.cross-questions-outer{
	border-top:2px solid #bbab86;
	border-bottom:2px solid #bbab86;
	position:absolute;
	bottom:120px;
	left:0;
	right:0;
	padding:10px 20px;
	background-color:rgba(255,255,255,0.2);
	text-align:center;
}
.cross-index{
	display:inline-block;
	background-color:#425679;
	border:1px solid #bbab86;
	color:#ffffff;
	text-align:center;
	font-size:1.8rem;
	font-weight:600;
	margin-right:10px;
	margin-left:10px;
	/* padding:10px; */
	box-sizing:border-box;
	border-radius:50%;
	width:40px;
	height:40px;
	text-align:center;
	line-height: 1.1;
}
.cross-index:active, .cross-raster-bullet:active{
	filter:brightness(200%);
}
.cross-raster-box{
	position:absolute;
	width:26px;
	height:26px;
	border:1px solid #808080;
	/* padding-top:10px; */
	text-transform:uppercase;
	font-weight:600;
	font-size:1rem;
	line-height:1.4;
	background-color:#ffffff;
	text-align: center;
}
.cross-raster-box._farbig{
	background-color:#b39c7d;
}
.cross-raster-box-index{
	position:absolute;
	font-weight:700;
	bottom:0px;
	right:0px;
	line-height:1;
	font-size:0.7rem;
}
.cross-solution{
	position:absolute;
	bottom:50px;
	left:0;
	width:100%;
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-evenly;
}
.cross-solution-left{

}
.cross-solution-right{

}
.cross-solution-button{
	position: relative;
	min-width: 120px;
	display: inline-block;
	padding:10px 20px;
}
.cross-solution-title{
	font-size:0.7rem;
	color:#ffffff;
}
.cross-solution-box{
	display:inline-block;
	width:24px;
	height:24px;
	border:1px solid #959595;
	background-color:#ffffff !important;
	text-transform:uppercase;
	margin:0;
	margin-left:-1px;
	position:relative;
	vertical-align:top;
	font-size:1rem;
	float:left;
    text-align: center;
    line-height: 1.4;
}
.cross-solution-index{
	position:absolute;
	top:100%;
	left:3px;
	color:#ffffff;
}
.cross-question-box{
	clear:both;
	margin-bottom:40px;
	position:relative;
	/* width:100%; */
	/* position:Absolute; */
}
.cross-question-box._active .cross-question-inputs{
	outline:2px solid #0000ff; 
	outline-offset: 4px;
}
.cross-question-text{
	overflow:hidden;
	font-size: 1.1rem;
    color: #595959;
}
.cross-question-inputs{
	margin-top:20px;
	margin-left:10px;
}
.cross-question-inputs::after{
	content:'';
	display:block;
	clear:both;
}
.cross-question-input-box{
	display:inline-block;
	width:calc((100vw - 60px) / 10);
	height:calc((100vw - 60px) / 10);
	border:1px solid #959595;
	background-color:#ffffff !important;
	text-transform:uppercase;
	margin:0;
	margin-left:-1px;
	position:relative;
	vertical-align:top;
	font-size: 6vw;
	float:left;
    text-align: center;
    line-height: 1.4;
}
.cross-question-inputs[maxlength="11"] .cross-question-input-box{
	width:calc((100vw - 60px) / 11);
	height:calc((100vw - 60px) / 11);
	font-size:5.6vw;
}
.cross-question-inputs[maxlength="12"] .cross-question-input-box{
	width:calc((100vw - 60px) / 12);
	height:calc((100vw - 60px) / 12);
	font-size:5.4vw;
}
.cross-question-inputs[maxlength="13"] .cross-question-input-box{
	width:calc((100vw - 60px) / 13);
	height:calc((100vw - 60px) / 13);
	font-size:5.2vw;
}
.cross-question-inputs[maxlength="14"] .cross-question-input-box{
	width:calc((100vw - 60px) / 14);
	height:calc((100vw - 60px) / 14);
	font-size:5.0vw;
}
.cross-question-input{
	clear:both;
	color:#000000;
	font-size:2.0rem;
	display:inline-block;
	width:100%;
	height:200px;
	height:100%;
	vertical-align: middle;
	font-weight:700;
	position:absolute;
	top:0;
	left:0;
	border:0;
	opacity:0.0;
	/*appearance: none;
    background: transparent;
	border-radius:4px;*/
}
.cross-question-input:focus{
	border:2px solid #0000ff;
}
.cross-questions-send{
	padding:10px;
	width:200px;
	margin:0 auto;
}


/* KREUZWORTRÄTSEL */
.game-kreuzwort-container{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
}
.game-kreuzwort-kasten{
	/* float:left; */
	display:inline-block;
	width:24px;
	height:24px;
	border:1px solid #959595;
	margin-left:-1px;
	margin-bottom:10px;
	margin-top:10px;
	margin-right:0px;
	padding-top:0px;
	text-transform:uppercase;
	position:relative;
	vertical-align:top;

	width:38px;
	height:38px;
	border:1px solid #927c56;
	border-radius:6px;
	background-color:rgba(0,0,0,0.5) !important;
	margin-right: 1px;
	text-align:center;
}
._kreuzwort .game-kreuzwort-kasten{
	/* float:left; */
	display:inline-block;
	width:24px;
	height:24px;
	border:1px solid #959595;
	background-color:#ffffff !important;
	margin-left:-1px;
	margin-bottom:10px;
	margin-top:10px;
	margin-right:0px;
	padding-top:0px;
	text-transform:uppercase;
	position:relative;
	vertical-align:top;
}
.game-kreuzwort-inputs .game-kreuzwort-kasten{
	display:inline-block;
	width:24px;
	height:24px;
	border:1px solid #959595;
	background-color:#ffffff !important;
	text-transform:uppercase;
	margin:0;
	margin-left:-1px;
	position:relative;
	vertical-align:top;
	font-size:1rem;
	float:left;
}
.game-kreuzwort-punkt{
	float:left;
	font-size:3rem;
	margin:0 20px;
	margin-top:30px;
	color:#ffffff;
}
.game-kreuzwort-loesungskasten{
	float:left;
	width:71px;
	font-size:1.2rem;
	font-weight:300;
	text-transform:uppercase;
}
.game-kreuzwort-footer-loesungswort{
	float:left;
	width:70%;
	font-size:2.4rem;
	text-align:center;
	margin-top:70px;
	font-weight:600;
	margin-left:40px;
	text-transform:uppercase;
}
.game-kreuzwort-fragenkatalog{
	width: 100%;
	aspect-ratio:calc(16 / 9);
	position:absolute;    
	top: calc(var(--viewport-height) - 200px);
	font-size:2.4rem;
	color:#595959;
	background-image:url('../images/001/crossword_bg.png');
	background-size:100% 100%;
	padding:30px;
	padding-top:100px;
	z-index:5;
}
.game-kreuzwort-bullet{
	float:left;
	background-color:#008616;
	border:1px solid #008616;
	color:#ffffff;
	text-align:center;
	font-size:0.8rem;
	font-weight:600;
	margin-right:20px;
	margin-left:20px;
	/* padding:10px; */
	box-sizing:border-box;
	border-radius:50%;
	width:20px;
	height:20px;
	text-align:center;
}
.game-kreuzwort-bullettext{
	overflow:hidden;
	font-size: 1.0rem;
    color: #595959;
	/* margin-bottom:40px; */
	/* margin-top:10px; */
}
.game-kreuzwort-box{
	clear:both;
	margin-bottom:40px;
	position:relative;
	/* width:100%; */
	/* position:Absolute; */
}
.game-kreuzwort-raster{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	overflow:hidden;
	/* background:rgba(255,255,255,0.5); */
	/* font-size:1.8rem; */
	color:#414141;
	/* position:relative; */
}
.game-kreuzwort-rasterbox{
	position:absolute;
	width:20px;
	height:20px;
	border:1px solid #808080;
	padding-top:10px;
	text-transform:uppercase;
	font-weight:600;
	font-size:2rem;
	background-color:#ffffff;
	text-align: center;
}
.game-kreuzwort-rasterbox._farbig, .game-kreuzwort-kasten{
	background-color:#b39c7d;
}
.game-kreuzwort-antwortbox .game-kreuzwort-kasten{
	background-color:#ffffff;
	text-transform: uppercase;
    font-weight: 600;
    font-size: 2.4rem;
    text-align: center;
}
.game-kreuzwort-fragebox{
	padding-left:5px;
	margin-top:20px;
	float:left;
	width:45%;
}
.game-kreuzwort-antwortbox{
	overflow:hidden;
	width:auto;
	width:40%;
	float:left;
	padding-left:2px;
}
.game-kreuzwort-rastermarker{
	position:absolute;
	font-weight:700;
	bottom:2px;
	right:4px;
	font-size:0.8rem;
}
.game-kreuzwort-raster .game-kreuzwort-bullet{
	margin:0;
	float:none;
	position:absolute;
}

.gamearea-gamefooter .game-kreuzwort-rastermarker{
	bottom:-15px;
}

.game-kreuzwort-antwortcontainer{
	position:absolute;
	width:100%;
	left:0;
	background-color:#ffffff;
	padding:10px;
	top:400px;
	padding-left:10px;
	padding-right:10px;
	/*7transition:opacity 1s;*/
}
.game-kreuzwort-prompt{
	color:#ffffff;
	display:inline-block;
	margin-top:30px;
	font-weight:700;
}
.game-kreuzwort-input{
	clear:both;
	color:#000000;
	font-size:2.0rem;
	display:inline-block;
	border-bottom:2px solid #ffffff;
	width:100%;
	height:60px;
	vertical-align: middle;
	font-weight:700;
	position:absolute;
	bottom:0;
	left:0;
	border:0;
	opacity:0;
}
.game-takepicture{
	/* background-color:#ffffff; */
	padding-top:0px;
	padding-bottom:0px;
	height:100%;
}
.game-takepicture video{
	transform: scale(-1, 1);
}
.zahlenschloss-pin{
	color:#2c2c2c;
	font-size:2.3rem;
	position:relative;
    /* text-shadow: 0 2px 8px rgba(0,0,0,0.8); */
	
	width:834px;
	height:393px;
	
	padding:40px;
	background-image:url('../images/zahlenschloss.png');
	background-size:100% 100%;
	background-repeat:no-repeat;
	transform-origin:50% 50%;
	margin-top:170px;
	margin-left:100px;
}
.zahlenschloss{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image:url('../images/Zahlgenschloss-Background.png');
	background-position:center;
	background-size:260px;
	background-repeat:no-repeat;    
	display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.zahlenschloss-container{
	/* width: 600px; */
    height: 100px;
	overflow:hidden;
}
.zahlenschloss-number{
	position:relative;
	width:1rem;
	margin-right:26px;
	text-align:center;
	display:inline-block;
	vertical-align:top;
}
.zahlenschloss-number:last-child{
	margin:0;
}
.zahlenschloss-num{
	color:#253445;
	font-size: 2rem;
    line-height: 4rem;
}
.gamearea-gamefooter._zahlenschloss{
	position:absolute;
	top:auto;
	left:0;
	bottom:0px;
}

.game-uhrzeit-container{
	width:100%;
	height:800px;
	position:relative;
}
.game-uhrzeit-uhr{
	position:relative;
	display:inline-block;
	width:800px;
	height:800px;
	/* border-radius:50%; */
	/* background-color:#555555; */
	/* border:10px solid #999999; */
	background-image:url('../images/uhrzeit_bg.png');
	background-position:center;
	background-size:contain;
	margin-right:400px;
}
.game-uhrzeit-zeiger{
	position:absolute;
	transform-origin:42px 50%;
}
.game-uhrzeit-zeiger._zeiger1{
	/* background-color:#ff0000; */
    width: calc(28% + 30px);
    height: 100px;
    top: calc(50% - 50px);
    left: calc(50% - 45px);
	z-index:1;
	
	background-image:url('../images/HourHand.png');
	background-repeat:no-repeat;
	background-size:100% 100%;
	transform:rotate(-30deg);
	transform:rotate(-90deg);
}
.game-uhrzeit-zeiger._zeiger2{
	/* background-color:#00ff00; */
    width: calc(45% + 30px);
    height: 86px;
    top: calc(50% - 43px);
    left: calc(50% - 43px);
	z-index:2;
	background-image:url('../images/MinuteHand.png');
	background-repeat:no-repeat;
	background-size:100% 100%;
	transform:rotate(-150deg);
	transform:rotate(-90deg);
}
.game-uhrzeit-zeiger._zeiger3{
	background-color:#0000ff;
	width:calc(40% + 30px);
	height:10px;
	top:calc(50% - 5px);
	left:calc(50% - 30px);
	z-index:3;
	display:none;
}
.game-uhrzeit-zeiger._disabled{
	opacity:0.5;
	z-index:0;
	pointer-events:none;
}
.game-uhrzeit-center{
	position:absolute;
	z-index:4;
	width:90px;
	height:90px;
	border-radius:50%;
	background-color:#6f6f6f;
	top:calc(50% - 45px);
	left:calc(50% - 45px);
	box-shadow:2px 2px 6px rgba(0,0,0,0.3);
}
.game-uhrzeit-text{
	position:absolute;
	top:0;
	left:0;
	font-size:40px;
	color:#ffffff;
	opacity:0;
	pointer-events:0;
}
.game-uhrzeit-lampen{
	position:absolute;
	top:0px;
	right:360px;
	width:280px;
	font-size:40px;
	color:#ffffff;
}
.game-uhrzeit-lampe{
	width:130px;
	height:auto;
	vertical-align:middle;
}
.gamearea-gamecontent._uhrzeit{
	display: flex;
	align-items: center; 
	justify-content: center; 
	text-align: center;
}


.game-zeitraten-container{
	width:100%;
	height:100%;
	position:relative;
	background-image:url('../images/time-center.png'), url('../images/time.png');
	background-size: 100px 100px, 100% 100%;
	background-repeat:no-repeat;
	background-position:50% 44%, center;
}
.game-zeitraten-button{
	width:100px;
	height:150px;
	/* border-radius:50%; */
	/* box-shadow:0 0 40px rgba(0,0,0,0.3), inset 0 0 40px rgba(0,0,0,0.4); */
	/* border:3px solid rgba(255,255,255,0.52); */
	position:absolute;
	background-position:center;
	background-size:100% 100%;
}
.game-zeitraten-button._button1{
	/* background-color:hsl(0,100%,50%); */
	top:15%;
	left:15%;
	background-image:url('../images/time_Button1.png');
	opacity:0.4;
}
.game-zeitraten-button._button2{
	/* background-color:hsl(60,100%,50%); */
	top:15%;
	right:15%;
	background-image:url('../images/time_Button2.png');
	opacity:0.4;
}
.game-zeitraten-button._button3{
	/* background-color:hsl(120,100%,50%); */
	bottom:15%;
	right:15%;
	background-image:url('../images/time_Button3.png');
	opacity:0.4;
}
.game-zeitraten-button._button4{
	/* background-color:hsl(180,100%,50%); */
	bottom:15%;
	left:15%;
	background-image:url('../images/time_Button4.png');
	opacity:0.4;
}

.game-zeitraten-button._button1._pressed{
	/* box-shadow:0 0 40px rgba(0,0,0,0.3); */
	/* background-color:hsl(0,100%,30%); */
	/* background-image:url('../images/time_Button1.png'); */
	opacity:1;
}
.game-zeitraten-button._button2._pressed{
	/* box-shadow:0 0 40px rgba(0,0,0,0.3); */
	/* background-color:hsl(60,100%,30%); */
	/* background-image:url('../images/time_Button2.png'); */
	opacity:1;
}
.game-zeitraten-button._button3._pressed{
	/* box-shadow:0 0 40px rgba(0,0,0,0.3); */
	/* background-color:hsl(120,100%,30%); */
	/* background-image:url('../images/time_Button3.png'); */
	opacity:1;
}
.game-zeitraten-button._button4._pressed{
	/* box-shadow:0 0 40px rgba(0,0,0,0.3); */
	/* background-color:hsl(180,100%,30%); */
	/* background-image:url('../images/time_Button4.png'); */
	opacity:1;
}
.game-zeitraten-text{
	color:#ffffff;
	font-weight:700;
	text-align:center;
	width:100%;
	height:100%;
	position:absolute;
	font-size:3rem;
	opacity:0;
	pointer-events:none;
	
	display: flex;
	align-items: center; 
	justify-content: center; 
	text-align: center;
	z-index:3;
}
.game-zeitraten-radar{
	width:1000px;
	height:1000px;
	background-image:url('../images/Radar.png');
	background-position:center;
	background-size:100% 100%;
	position:absolute;
	opacity:0.9;
	transform-origin:50% 50%;
	animation: radaranim 1.73s forwards linear;
	animation-iteration-count:infinite;
	left:420px;
	top:50px;
	pointer-events:none;
	z-index:1;
}
.game-zeitraten-line{
	width:1000px;
	height:1000px;
	background-image:url('../images/RadarIndicator.png');
	background-position:center;
	background-size:100% 100%;
	position:absolute;
	opacity:0.5;
	transform-origin:50% 50%;
	animation: radarlineanim 1.73s forwards linear;
	animation-iteration-count:infinite;
	transform:rotate(0deg);
	z-index:2;
}
.gamearea-icon-question._zeitraten{
	/* top:45%; */
}

.game-quiz-container{
	width:95%;
	margin:0 auto;
    height: 100%;
    overflow-y: auto;
	position:relative;
}
.game-quiz-timer{
	width:110px;
	height:110px;
	margin-left:auto;
	margin-right:30px;
	/* margin-bottom:20px; */
	margin-top:40px;
	position:relative;
}
.game-quiz-timerbg{
	width:100%;
	height:100%;
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;
	background-image:url('../images/001/quiz_timer_background.png');
}
.game-quiz-timersphere{
	display:none;
}
.game-quiz-timertime{
	position:absolute;
	color:#ffffff;
	font-size:2.2rem;
	text-align:center;
	width:100%;
	height:100%;
	line-height:107px;
	top:0;
}
.game-quiz-number{
	float: left;
    color: #ffffff;
    /* width: 200px; */
    font-size: 1.3rem;
    text-align: center;
    position: absolute;
    top: 55px;
    left: 43px;
}
.game-quiz-counter{
	float: right;
    /* width: 300px; */
    text-align: left;
    position: absolute;
    top: 93px;
    left: 43px;
    width: 135px;
}
.game-quiz-count-green{
	display:inline-block;
	border-radius:50%;
	background-color:#88b14a;
	width:20px;
	height:20px;
	margin-right:5px;
	border: 2px solid #ffffff;
}
.game-quiz-count-red{
	display:inline-block;
	border-radius:50%;
	background-color:#d25766;
	width:20px;
	height:20px;
	margin-right:6px;
	border: 2px solid #ffffff;
}
.game-quiz-question{
	clear:both;
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;
	padding:18px;
	width:100%;
	color:#353535;
	min-height:50px;
	box-sizing:border-box;
	
	font-size:1.6rem;
	font-weight:700;
	text-align:center;
	margin-top:0px;
	line-height:1.2;
}

.game-quiz-buttons{
	margin-top:10px;
}
.game-quiz-button{
	display:inline-block;
	width:calc(100% - 10px);
	margin:5px;
	margin-bottom:20px;
	padding:10px;
	transform:scale(1.0);
    background:linear-gradient(to bottom,var(--button-color1) 0%, var(--button-color2) 100%);
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;
	transition:filter 0.2s, transform 0.2s;
	vertical-align:top;
    border-radius:12px;
	line-height: 1.1;
	font-size:1.3rem;
	font-weight:400;
    box-shadow:0 0 12px rgba(255,255,255,0.7);
	color: #ffffff;
	text-align:center;
	cursor:pointer;
	-webkit-tap-highlight-color: transparent;
}
.game-quiz-button:active{
	filter:brightness(90%);
	transform:scale(0.9);
}
/* .game-quiz-button._button2{ background-image:url('../images/quiz_answerbox_2_neutral.png'); } */
/* .game-quiz-button._button3{ background-image:url('../images/quiz_answerbox_3_neutral.png'); } */
/* .game-quiz-button._button4{ background-image:url('../images/quiz_answerbox_4_neutral.png'); } */

.game-quiz-button._correct{ background:linear-gradient(to bottom,#4b8a4b 0%, #28492b 100%); }
/* .game-quiz-button._button2._correct{ background-image:url('../images/quiz_answerbox_2_true.png'); color:#ffffff; } */
/* .game-quiz-button._button3._correct{ background-image:url('../images/quiz_answerbox_3_true.png'); color:#ffffff; } */
/* .game-quiz-button._button4._correct{ background-image:url('../images/quiz_answerbox_4_true.png'); color:#ffffff; } */

.game-quiz-button._wrong{ background:linear-gradient(to bottom,#8a4b4b 0%, #492828 100%); }
/* .game-quiz-button._button2._wrong{ background-image:url('../images/quiz_answerbox_2_false.png'); color:#ffffff; } */
/* .game-quiz-button._button3._wrong{ background-image:url('../images/quiz_answerbox_3_false.png'); color:#ffffff; } */
/* .game-quiz-button._button4._wrong{ background-image:url('../images/quiz_answerbox_4_false.png'); color:#ffffff; } */
.game-quiz-box{
	/*background-image:url('../images/lager-bg2.png');
	background-size:100% 100%;
	background-repeat:no-repeat;*/
	padding:20px;
}

.picture-container{
	background-image:url('../images/001/list-bg.jpg');
	background-size:100% 100%;
	background-position:top;
	background-repeat:no-repeat;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* justify-content: space-between; */
}
.picture-divider{
	width:100%;
	height:70px;
}
.picture-box-container{
	flex-shrink: 1;
    flex-grow: 0;
    height: calc(var(--viewport-height) - 277px);
    text-align: center;
}
.picture-box{
	/* width:80%; */
	height:100%;
	margin:0 auto;
	border:8px solid #ac9c82;
	border-radius:8px;
	box-shadow:0 0 14px rgba(0,0,0,0.5);
	display: inline-block;
}
.picture-box img{
	width: auto;
    height: 100%;
}
.picture-footer{
	background-image:url('../images/001/prestart-bottom.png');
	background-size:100% 100%;
	background-position:top;
	background-repeat:no-repeat;
	padding:30px;
	padding-top:50px;
}
.picture-prompt{
	padding:5px;
	background-color:#230f06;
	border-radius:12px;
	border:1px solid #6f5b50;
	color:#ffffff;
	width:90%;
	margin: 20px auto;
	text-align:center;
}
.picture-buttons{
	position:relative;
	display:flex;
	flex-flow:row nowrap;
	gap:20px;
	justify-content:space-evenly;
}
.picture-button{
	padding:5px 15px;
	background:linear-gradient(to bottom, #473426 0%, #241b14 100%);
	border:1px solid #614f43;
	box-shadow:0 0 16px rgba(255,255,255,0.7);
	text-align:center;
	border-radius:8px;
}
.picture-button img{
	width:40px;
	height:auto;
}
.picture-email{
	display:none;
	position:absolute;
	bottom:110%;
	background-color:rgb(107 81 54 / 90%);
	padding:20px;
	box-shadow:0 4px 12px rgba(0,0,0,0.2);
	text-align:center;
	font-size:1rem;
	border-radius:12px;
	color:#ffffff;
}
.picture-email-input{
	background-color:#eeeeee;
	border:1px solid #aaaaaa;
	border-radius:6px;
	padding:5px;
	font-size:1.2rem;
	margin:10px 0;
}
.picture-email-button{
	font-size:1.2rem;
	padding:10px 20px;
}

.ar-reset{
	float:right;
	/* margin-top:40px; */
	/* margin-bottom:-50px; */
	position: absolute;
    top: 61px;
    right: 68px;
}

.game-arschloss-container{
	position:relative;
}
.game-arschloss-container video{
	width:100% !important;
	height:80vh !important;
	position:absolute;
	top:10vh !important;
	object-fit: cover;
}
#scan-outer, #scan-inner{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-position:center;
	background-size:100% 100%;
	background-repeat:no-repeat;
    z-index:4;
}
#scan-overlay{
	position:absolute;
	top: 30%;
    left: 30%;
    width: 40%;
    height: 40%;
	background-position:center;
	background-size:100% 100%;
	background-repeat:no-repeat;
    z-index:3;
}


.wire-tops{
	position:absolute;
	width:100%;
	height:100%;
}
.wire-bottoms{
	position:absolute;
	width:100%;
	height:100%;
}
.wire-top, .wire-bottom{
	position:absolute;
	top: 5%;
    width: 12%;
    height: 15%;
	/* border:1px solid #000000;			 */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  z-index:2;
}
.wire-bottom{
	top:auto;
	bottom:5%;
}
#wiregame_canvas{
    position: absolute;
	z-index:1;
	
}
.gamearea._wiregame{
	background-image:url('../images/wiregame_bg.png'), url('../images/screen_bg.jpg');
    background-size: contain, 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.gamearea._wiregame #gamearea-container{
	padding:0;
}
.mindar-ui-overlay{
	pointer-events:none;
}

@keyframes questionanim {
	0% { transform:scale(1); }
	50% { transform:scale(1.2); filter:brightness(150%)}
	100% { transform:scale(1); filter:brightness(100%)}
}
@keyframes radaranim{
	0% { opacity:1; }
	50% { opacity:0.9; }
	99% { opacity:0.9; }
	100% { opacity:1; }
}
@keyframes radarlineanim{
	0% { transform:rotate(0deg); opacity:1.3; }
	100% { transform:rotate(360deg); opacity:0.1; }
}
@keyframes fadein {
	0% { opacity:0; filter:blur(20px) brightness(500%); }
	100% { opacity:1; filter:blur(0) brightness(100%);}

}
/*.game-kreuzwort-antwortcontainer._active{
	opacity:1;
}*/