@colorBase: #990000;

@colorHighlight: @colorBase;
@colorHighlightPressed: shade(@colorHighlight, 15%);;


@colorText: #4a4a4a;
@colorBorder: #666666;
@colorBorder2: #cccccc;
@colorTextAlt: #FFF;



/* EFFECT DEFINITION */

.button-effect() {
	box-shadow:0 0.2rem 0.4rem rgba(0,0,0,0.15);
	transition:all 0.1s;
	transition-timing-function:cubic-bezier(0.4, 0.0, 0.2, 1);
}
.button-effect-hover() {
	box-shadow:0 0.1rem 0.2rem rgba(0,0,0,0.15);
	transform:scale(0.95);
	transition:all 0.05s;
}
.button-effect-mini() {
	box-shadow:0 0.2rem 0.4rem rgba(0,0,0,0.15);
	transition:all 0.1s;
	transition-timing-function:cubic-bezier(0.4, 0.0, 0.2, 1);
}
.button-effect-mini-hover() {
	box-shadow:0 0.1rem 0.2rem rgba(0,0,0,0.15);
	transform:scale(0.95);
	transition:all 0.05s;
}

/* END EFFECT DEFINITION */



@font-face {
    font-family: 'klausfriedrichnormal';
    src: url('fonts/klaus___-webfont.eot');
    src: url('fonts/klaus___-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/klaus___-webfont.woff') format('woff'),
         url('fonts/klaus___-webfont.ttf') format('truetype'),
         url('fonts/klaus___-webfont.svg#klausfriedrichnormal') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*
@font-face {
    font-family: 'klausfriedrich';
    src: url('fonts/klaus-webfont.eot');
    src: url('fonts/klaus-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/klaus-webfont.woff') format('woff'),
         url('fonts/klaus-webfont.ttf') format('truetype'),
         url('fonts/klaus-webfont.svg#klausfriedrichnormal') format('svg');
    font-weight: normal;
    font-style: normal;
}
*/

*, a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
}
:focus {
	outline:none;
}

html {
	font-size:24px;
	height:100%;
}
@media screen and (max-width:1200px) {
	html {
		font-size:2vw;
	}
}
@media screen and (max-width:800px) {
	html {
		font-size:16px;
	}
}
body {
	font-size:1rem;
	height:100%;
}
html, body {
	overflow:hidden;
}
* {
	margin:0;
	box-sizing:border-box;
	font-weight:normal;
}

h1 {
	position:absolute;
	top:2rem;
	left:2rem;
	margin:0;
	
	z-index:10;
	
	font-size: 32px;
    font-weight: lighter;
    margin: 0;
    color: black;
    font-family: 'Droid Serif';
}
a {
	text-decoration:none;
	color:#ff0c00;
}
p {
	margin-bottom:0.75em;
}
b {
	font-weight:700;
}

/* ICON */

span.Icon {
	font-family: 'rcOutput', Arial;
	font-style: normal;
	font-weight: normal;
	font-size: 36px;
	font-size: 1.5rem;
	line-height: 1;
	vertical-align: text-top;
	text-align:center;

	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;

	display: inline-block;
	background: transparent center center;
	width: 1em;
	height: 1em;
	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;

	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;

	/* Support for IE. */
	font-feature-settings: 'liga';
	/*
	backface-visibility: hidden;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
	transform: translateZ(0);
	*/
	
	pointer-events:none ! important;
}

/* END ICON */

/* BUTTON */

button.Button,
a.Button,
.ButtonGroup a {
	.Text{
		font-size:1.5rem; /* Label klein */
		line-height:1;
		font-family:'klausfriedrichnormal';
		//font-family:'Droid Sans';
		//font-size:1rem;
		display: inline-block;
		pointer-events:none;
		user-select: none;
		transform:translateY(1px); /* adjust */
		
		vertical-align:middle;
		color:@colorText;
		margin-left:0em;
	}
}
button.Button,
a.Button {
	font-size:0.9em;
	
	line-height:1.0;
	padding:0.5rem 1.5rem;
	display:inline-block;
	xxcolor:white;
	background-color:white;
	box-sizing:border-box;
	border-radius:1000px;
	border:0px solid none;
	
	text-decoration:none ! important;
	-webkit-font-smoothing:antialiased; 
	vertical-align:top;
	will-change:transform;
	.button-effect();

	&.disabled {
		opacity:0.0;
		pointer-events:none;
	}
	&.hover:not(.disabled) {
		xxbackground-color:@colorHighlightPressed;
		.button-effect-hover();
	}
	&.iconRight .Text {
		padding-right:0.25rem;
	}
	&.iconLeft .Text {
		padding-left:0.25rem;
	}
	span.Icon {
		pointer-events:none;
		vertical-align:middle;
	}
	&[data-style=Positive] {
		background:#4FAB30;
	}
		&.hover[data-style=Positive] {
			background:shade(#4FAB30, 15%);
		}
	&[data-style=Neutral] {
		background:#757575;
	}
		&.hover[data-style=Neutral] {
			background:shade(#757575, 15%);
		}
	&[data-style=Negative] {
		background:#E84511;
	}
		&.hover[data-style=Negative] {
			background:shade(#E84511, 15%);
		}
	
	/* PASSIVE / INVERSE BUTTON */

	&.passive {
		background:none;
		color:@colorHighlight;
		padding-left:0;
		padding-right:0;
		border-radius:0;
		box-shadow:none;

		.Text {
			font-size:0.85rem; /* Label gross */
		}
		&.hover:not(.disabled) {
			color:@colorHighlightPressed;
			box-shadow:none;
			transform:none;
			background-color:transparent;
		}
	}

	&.inverse {
		color:@colorHighlight;
		background-color:white;
	
		&.hover:not(.disabled) {
			background:white;
			color:@colorHighlightPressed;
		}
		&.passive {
			background:none;
			color:white;
		}
		&.passive.hover {
			background:none;
			color:white;
		}
	}
}



/* END BUTTON */

/* ICONBUTTON */

a.IconButton {
	line-height:1.0;
	padding:0.5rem;
	display:inline-block;
	color:@colorText;
	background-color:rgba(255,255,255,0.5);
	box-sizing:border-box;
	border-radius:1000px;
	text-decoration:none ! important;
	.button-effect-mini();

	&.disabled,
	&.flex-disabled { /* erfunden */
		pointer-events:none;
		opacity:0.5;
	}
	&.hover:not(.disabled) {
		.button-effect-mini-hover();
	}
	&.selected {
		background:@colorHighlight ! important; /* erfunden */
		color:white ! important; /* erfunden */
	}

	/* PASSIVE / INVERSE */
	&.inverse {
		color:white;
		background-color:@colorHighlight;
		
		&.hover:not(.disabled) {
			background:white;
			color:@colorHighlight;
		}
	}
}

/* END ICONBUTTON */



.Gombrich {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	font-family: 'Droid Serif';
	
	color:@colorText;
}
.Scene {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:0;
	transition:all 0.5s;
	
	background:white;
}

a.Info {
	display:block;
	position:absolute;
	top:1rem;
	right:1rem;
	z-index:20;
	
	span.Icon {
		display:block;
	}
}

body.State_Intro .GombrichIntro,
body.State_Game .GombrichGame,
body.State_Summary .GombrichSummary {
	opacity:1;
	z-index:1;
	transition-delay:0.5s;
}


.GombrichIntro,
.GombrichSummary {
	
	display:flex;
	flex-direction:column;
	padding:1rem;
	
	.Headline {
		//position:absolute;
		//top:2.1rem;
		left:2rem;
		right:2rem;
		//bottom:0;
		font-family:'klausfriedrichnormal';
		line-height:1.2;
		margin-top:auto;
		h2 {
			font-size:1.5rem;
		}
	}
	div.Text {
		//position:absolute;
		//top:6rem;
		left:2rem;
		right:2rem;
		//bottom:0;
		margin-bottom:auto;
	}
	.Buttons {
		position:absolute;
		bottom:2rem;
		right:2rem;
		
		transition:opacity 0.5s;
	}
	.Buttons2 {
		position:absolute;
		bottom:2rem;
		left:2rem;
		
		transition:opacity 0.5s;
	}
}

.GombrichIntro .Headline {
	text-align:center;
	//top:400px;
	h2 {
		font-size:6rem;
		line-height:1;
		margin-bottom:0.2em;
		@media screen and (max-width:800px) {
			font-size:12vw;
		}
	}
}
.GombrichIntro div.Text {
	text-align:center;
	//top:600px;
	font-family:'klausfriedrichnormal';
	font-size:1.33333rem;
}

.GombrichSummary {
	display:block;
	padding:1rem;
	
	.IconButton {
		float:right;
	}
	
	.Result {
		display:flex;
		flex-direction:row;
		justify-content:center;
		height:90%;
		max-width:1100px; // Breite Ergebnisscreen ggf. hier beschraenken
		margin:0 auto;
	}
	.Result2 {
		display:flex;
		flex-direction:column;
		justify-content:center;
		height:100%;
	}
}
.GombrichSummary .Headline {
	h2 {
		font-size:1.833333rem;
	}
}
.GombrichSummary div.Text {
	font-size:1rem;
	font-family:'klausfriedrichnormal';
	font-size:1.33333rem;
}

.GombrichQuiz {
	position:absolute;
	top:0;
	left:2rem;
	right:2rem;
	bottom:0;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	
	.Counter {
		position:absolute;
		top:0.5rem;
		left:0;
		font-size:0.66667rem;
		display:none;
	}
	.Question {
		padding-top:1.8rem;
		font-family:'klausfriedrichnormal';
		line-height:1.2;
		//height:6rem;
		margin-right:3.5rem; // Button i
		
		h2 {
			font-size:1.8333rem;
			font-size:1.5rem;
			@media screen and (max-width:800px) {
				font-size:calc(10px + 3vw);
				font-size:calc(10px + 2vw);
			}
		}
	}
	.AnswersContainer {
		//display: flex;
		//justify-content: center; /* align horizontal */
		//align-items: center; /* align vertical */
		width:100%;
		max-width:80vh;
		max-width:calc(100vh - 6.5rem - 9.8rem);
		@media screen and (min-aspect-ratio: 8/5) and (max-width:1400px) {
			max-width:calc(280vh - 6.5rem - 9.8rem);
		}
		margin: 0 auto;
	}
	.Answers {
		position:relative;
		//height:800px;
		max-width:900px;
		@media screen and (min-aspect-ratio: 8/5) and (max-width:1400px) {
			max-width:1400px;
		}
		margin:0px auto;;
		z-index:3;
		
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
		xxoutline:1px solid rgba(102,102,102,0.05);
		
		.Answer {
			//position:absolute;
			position:relative;
			width:400px;
			width:45%;
			//height:400px;
			padding-bottom:45%;
			display: flex;
			justify-content: center; /* align horizontal */
			align-items: center; /* align vertical */
			pointer-events:none;
			margin-bottom:2rem;
			
			@media screen and (min-aspect-ratio: 8/5) and (max-width:1400px) {
				width:21%;
				padding-bottom:21%;
				margin-bottom:0;
			}
			
			.Image {
				position:absolute;
				top:50%;
				left:50%;
				box-shadow: 0 3px 6px rgba(0,0,0,0.3);
				box-shadow: 0 5px 9px rgba(0,0,0,0.3);
				xxwill-change:transform;
				cursor:pointer;
				pointer-events:initial;
				transform:rotateZ(var(--elem-rot, 0)) translateX(-50%) translateY(-50%);
				transform-style: preserve-3d;//
			}
			.Image:before {
				content:'';
				display:block;
				position:absolute;
				top:0;
				left:0;
				right:0;
				bottom:0;
				border:1px solid @colorBorder2;
				transition:all 0.5s;
				z-index:2;
				opacity:0.5;
				display:none;
			}
			.Image:after {
				content:'';
				display:block;
				position:absolute;
				top:0;
				left:0;
				right:0;
				bottom:0;
				border:5px solid transparent;
				//border:7px solid transparent;
				transition:all 0.5s;
				z-index:2;
			}
			
			&.hover:not(.enlarge) {
				transform:scale(1.02);
			}
			&.hover .Image:after {
				xxborder-color:fade(@colorBorder, 50%);
			}
			&.selected {
				xxz-index:1;
			}
			&.selected .Image:after {
				border-color:fade(@colorBorder, 100%);
			}
			&.correct .Image:after {
				border-color:fade(#669900, 100%);
			}
			&.selected.false .Image:after {
				border-color:fade(#990000, 100%);
				border-color:fade(#cc0000, 100%);
			}
			
			.img {
				background-position:center center;
				background-size:cover;
			}
			.img,
			img {
				display:block;
				position:absolute;
				width:100%;
			}
		}
		
		.Answer {
			xxopacity:0;
			animation:plop 0.3s backwards;
			//margin-left:-200px;
			//margin-top:-200px;
			transition:all 0.3s;
		}
		.Answer.Answer_1 {
			//top:200px;
			//left:200px;
			animation-delay:0.5s;
		}
		.Answer.Answer_2 {
			//top:200px;
			//left:700px;
			animation-delay:0.8s;
		}
		.Answer.Answer_3 {
			//top:600px;
			//left:200px;
			animation-delay:1.1s;
		}
		.Answer.Answer_4 {
			//top:600px;
			//left:700px;
			animation-delay:1.4s;
		}
		
		.Answer.correct {
			xxz-index:2;
		}
		.Answer.enlarged2 {
			animation:none;
			transform:scale(2);
			transform:scale(2) rotateZ(var(--elem-rot2, 0)) ! important;
			opacity:1;
			//top:400px;
			//left:400px;
			z-index:2;
			transition:all 0.3s;
			xxtransition-delay:0.5s;
		}
		.Answer.Answer_1.enlarged2 {
			transform:scale(2) rotateZ(var(--elem-rot2, 0)) translateX(30%) translateY(calc(25% + 0.5rem)) ! important;
		}
		.Answer.Answer_2.enlarged2 {
			transform:scale(2) rotateZ(var(--elem-rot2, 0)) translateX(-30%) translateY(calc(25% + 0.5rem)) ! important;
		}
		.Answer.Answer_3.enlarged2 {
			transform:scale(2) rotateZ(var(--elem-rot2, 0)) translateX(30%) translateY(calc(-25% - 0.5rem)) ! important;
		}
		.Answer.Answer_4.enlarged2 {
			transform:scale(2) rotateZ(var(--elem-rot2, 0)) translateX(-30%) translateY(calc(-25% - 0.5rem)) ! important;
		}
		@media screen and (min-aspect-ratio: 8/5) and (max-width:1400px) {
			.Answer.Answer_1.enlarged2 {
				transform:scale(2) rotateZ(var(--elem-rot2, 0)) translateX(30%) translateY(0%) ! important;
			}
			.Answer.Answer_2.enlarged2 { 
				transform:scale(2) rotateZ(var(--elem-rot2, 0)) translateX(15%) translateY(0%) ! important;
			}
			.Answer.Answer_3.enlarged2 {
				transform:scale(2) rotateZ(var(--elem-rot2, 0)) translateX(-15%) translateY(0%) ! important;
			}
			.Answer.Answer_4.enlarged2 {
				transform:scale(2) rotateZ(var(--elem-rot2, 0)) translateX(-30%) translateY(0%) ! important;
			}
		}
		.Answer.enlarged2 .Image {
			box-shadow: 10px 20px 30px rgba(0,0,0,0.4);
			transition:all 0.3s;
			xxtransition-delay:1.3s;
		}
		.Answer.enlarged2 .Image:after {
			opacity:0;
			xxtransition-delay:0.5s;
		}
		
		.FlipButton,
		.FlipButton2 {
			position:absolute;
			top:-0.5rem;
			right:-0.5rem;
			transform:scale(0.5);
			opacity:0;
			z-index:-1;
			pointer-events:none;
		}
		.FlipButton2 {
			position:absolute;
			left:-0.5rem;
			right:auto;
			transform:scale(0.5) rotateY(180deg);
		}
		.FlipButton .Icon,
		.FlipButton2 .Icon {
			display:block;
		}
		.Answer.enlarged2:not(.flipped) .FlipButton,
		.Answer.enlarged2.flipped .FlipButton2 {
			opacity:1;
			z-index:2000;
			pointer-events:all ! important;
			transition:all 0.2s;
			transition-delay:0.5s;
		}
		.Answer.enlarged2 .FlipButton a,
		.Answer.enlarged2 .FlipButton2 a {
			pointer-events:inherit ! important;
		}
		
		.Answer .Image .Caption {
			position:absolute;
			top:0rem;
			left:0rem;
			right:0rem;
			bottom:0rem;
			overflow:hidden;
			font-family:'Droid Sans';
			font-size:0.35rem;
			opacity:0;
			padding:0.5rem 0.5rem;
			
			background:white;
			transition:all 0.3s;
			transform:rotateY(180deg);
			
			&:before {
				display:block;
				content:'';
				width:1.5rem;
				height:1.25rem;
				float:right;
			}
		}
		.Answer .Image .Caption2 {
			//max-width:175px;
		}
		.Answer.enlarged2.flipped .Image .Caption {
			opacity:1;
		}
		.Answer.enlarged2.flipped .Image {
			transform:rotateZ(var(--elem-rot, 0)) translateX(-50%) translateY(-50%) rotateY(180deg);
		}
		
	}
	//&.Solved .Answers .Answer {
	&.Answered .Answers .Answer {
		animation:none;
	}
	.Answers .Answer .Image .img,
	.Answers .Answer .Image img {
		transition:filter 0.3s;
		xxtransition-delay:1.0s;
	}
	&.Enlargement .Answers .Answer:not(.enlarged) .Image .img,
	&.Enlargement .Answers .Answer:not(.enlarged) .Image img {
		filter:blur(5px);
	}
	/*
	&.Answered .Answers,
	&.Answered .Answers * {
		pointer-events:none ! important;
	}
	*/

	.Bottom {
		display:flex;
		padding-bottom:2rem;
		justify-content:space-between;
		@media screen and (max-width:800px) {
			flex-wrap:wrap;
		}
		margin-top:1rem;

	}
	.Buttons {
		//position:absolute;
		//bottom:2rem;
		//right:0rem;
		
		transition:opacity 0.5s;
		transition-delay:2s;
		@media screen and (max-width:800px) {
			order:12;
		}

	}
	.Buttons2 {
		//position:absolute;
		//bottom:2rem;
		//left:0rem;
		
		transition:opacity 0.5s;
		transition-delay:2s;
		@media screen and (max-width:800px) {
			order:11;
		}
	}
	&:not(.CanAdvance) .Buttons {
		opacity:0.5;
		opacity:0;
		pointer-events:none;
		transition-delay:0.3s;
	}
}
.Progress2 {
	display:none;
	@media screen and (max-width:800px) {
		display:block;
		width:100%;
		order:2;
	}
}
.Progress {
	//position:absolute;
	//bottom:2rem;
	height:2rem;
	//left:10rem;
	//right:10rem;
	@media screen and (max-width:800px) {
		//bottom:5rem;
		//left:0;
		//right:0;
		order:1;
		margin:0 auto;
		margin-bottom:1rem;
	}
	text-align:center;
	z-index:2;
	
	.Item {
		position:relative;
		margin:0.25rem 0.25rem 0 0.25rem;
		width:1rem;
		height:1rem;
		display:inline-block;
		vertical-align:bottom;
		
		&:before {
			content:'';
			position:absolute;
			top:0;
			left:0;
			right:0;
			bottom:0;
			border-radius:1000px;
			background:#FFF;
			transition:all 0.5s;
		}
		&.current:before {
			background:#666666;
		}
		
		&:after {
			content:'';
			position:absolute;
			top:0.3rem;
			left:0.3rem;
			right:0.3rem;
			bottom:0.3rem;
			border-radius:1000px;
			background:#666666;
			transition:all 0.5s;
		}
		&.current:after {
			background:#fff;
		}
		&.correct:after {
			background:#669900;
		}
		&.false:after {
			background:#990000;
			background:#cc0000;
		}
	}
}

@keyframes plop {
	0% {opacity:0; transform:scale(0.5);}
	70% {opacity:1; transform:scale(1.03);}
	100% {opacity:1; transform:scale(1);}
}