/* document.execCommand('BackgroundImageCache', false, true); */

/*normalisierung marign, padding, body rausgenommen, da sonst mit schatten probleme!*/
html 
{	/* soll IE Flackern unterdruechen */
	filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

body { background-color:#20232b;  } 

a, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, select, p, blockquote, th, td 
{
margin:0;
padding: 0;
outline:none; /* fuer IE, auch ergäzen für Inputfelder */  
color: inherit;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
/* draggable:false; /*???*/

}
* {
	text-decoration: none;
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */  
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
  tap-highlight-color: rgba(0,0,0,0);
  tap-highlight-color: transparent; /* For some Androids */
} 
div, nav, .head {
  user-select: none;          /* Likely future */  
} 
*:active, *:vistited {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
  tap-highlight-color: rgba(0,0,0,0);
  tap-highlight-color: transparent; /* For some Androids */
}
div {	/* border:1px solid green; /* */ }


/*normalisierung font-size header*/

h1, h2, h3, h4, h5, h6
{
font-size:100%;
}

/*entfernt list-style aus listen*/

ol
{ list-style:none; }
ul
{ list-style-type:square; list-style-position:outside;  }
ul li 
{ margin-left: 1.0em; padding-left: 0.5em; }


/*normalisiert font-style und font-weight auf normal*/

address, caption, cite, code, dfn, em, strong, th, var
{
font-style:normal;
font-weight: normal;
}


/*normalisiert tabellen*/
table
{
border-collapse: collapse;
border-spacing:0;
}

/*entfernt border aus fieldset und img*/
fieldset, img
{
border:0;
vertical-align:bottom;
}

/*richtet text in caption und th links aus*/
caption, th
{
text-align:left;
}

/*entfernt anfuehrungszeichen aus q*/
q:before, q:after
{
content:'';
}
/* zeichen aus q */
q:before, q:after
{
content:'';
}
/* 	Formatunabhaenige Definitionen
A===============A===============A===============A===============
Hinweise:
evtl fuer iOS :focus hinzufügen
*/

html {
	height: 100%;
}
body {
	position: relative;  
	text-align:left; 
	/* font-family: 'Exo 2', sans-serif; /**/
	font-family: 'Open Sans', sans-serif; 
	font-weight: 200; 
	font-style: normal;
	font-size: 4vmin; 
	/* color:#fffbf0; /**/
	color: #ddd;
	overflow: hidden;
	height:120%; /*position:fixed; */  
	/* overflow-y:scroll; /* um Chrome auf Android zu richten => geht genau nicht */ 
}
/* 	Grundfarbe: #fffbf0
90% = e5e1d7
80% = cdcac0
70% = b3b0a8
60% = 9a9791
50% = 807d78
40% = 666460
30% = 4d4b48
*/
/* 	Grundfarbe: #baeaff
90% = a8d3e5
80% = 95bbcc
70% = 82a4b3
60% = 708d99
50% = 5d7580
40% = 4a5e66
30% = 38464d
20% = 252e33
10% = 13171a
*/

body {
	height: 100%;
	margin: 0;
	padding: 0;
	/*background-image: url('../_img/escheresque_ste.png'); /**/
	/*background-image: url('../_img/black-linen-2.png'); /**/
	/*background-image: url('../_img/3px-tile.png'); /**/
	background-image: url('../_img/inspiration-geometry.png'); /**/
	background-image: url('../_img/low-contrast-linen.png'); /**/


	background-repeat:repeat; /**/
	/* background-color:  #232c2c; */
	background-color:  #38464d;
}
#wrap 	
{	
	position: relative; 
	overflow: hidden;
	/* display: table; */
	width: 100vw;  height: 100vh; 
	text-align:left; 
	/* background-image: linear-gradient(135deg, #666 0%, #222 100%); */
}
/* ===========================================
Default 
==============================================*/
#std_header{
	position: fixed;
	display: table-cell; 
	width: 70vw; height: 15vw;
	right: 15vw;  /* da vmax nicht von IE unterstuetzt */
	text-align: center;
	vertical-align: middle;

	font-weight: 800; /**/
	font-size: 10vmin; 
	/* color:#403f3c; */
	color:#545b5f;

	/* border-style:solid; border-width:1px; border-color:#00ff00; /**/
}
#std_header h1 {
	display: block;
	padding-top: 0.3vmin; /**/
}
#std_footer {
	position: fixed;
	/* position: absolute; */
	text-align: center;

	font-weight: 800; /**/
	font-size: 8vmin; 
	/* color:#403f3c; */
	color:#545b5f;

	width: 70vw; height: 15vw;
	right: 15vw; bottom: 0; /* da vmax nicht von IE unterstuetzt */
	/* border-style:solid; border-width:1px; border-color:#00ff00;	/**/
}
#std_footer div {
	padding-top: 1.5vmin;
}

#std_showtest { /* Test-Div auf jeder Seite darstellbar */
	position: absolute;
	width: 50vmin; height: 50vmin;
	border-style:solid; border-width:1px; border-color: red;
	font-size: 2vmin; 
	white-space: normal;

}
.cache_load
{
	/* benoetigt, weil der EI Hintergründe nicht automatisch cached */
	position: absolute;
	left: 0px; top: 0px; 
	height: 1px; width: 1px; 
	border:0;
	display:none;	
}

@-webkit-keyframes std_fadeIn { 
  0%   { opacity: 0; }
  30%   { opacity: 0.1; }
  100% { opacity: 1; }
}
@-moz-keyframes std_fadeIn {
  0%   { opacity: 0; }
  30%   { opacity: 0.1; }
  100% { opacity: 1; }
}
@-o-keyframes std_fadeIn {
  0%   { opacity: 0; }
  30%   { opacity: 0.1; }
  100% { opacity: 1; }
}
@keyframes std_fadeIn {
  0%   { opacity: 0; }
  30%   { opacity: 0.1; }
  100% { opacity: 1; }
}
.std_opac000, .std_opac001  { opacity: 0 ; } 

.std_opac100, .std_opac001 {
  -webkit-animation: std_fadeIn 0.5s ease-in; /* Safari 4+ */
  -moz-animation:    std_fadeIn 0.5s ease-in; /* Fx 5+ */
  -o-animation:      std_fadeIn 0.5s ease-in; /* Opera 12+ */
  animation:         std_fadeIn 0.5s ease-in; /* IE 10+, Fx 29+ */
}


/*==================================================================
 loader icon from http://tobiasahlin.com/spinkit/
==================================================================*/
.spinner {
  width: 10vmin; height: 10vmin;
  position: relative;
  text-align: center;
  
  -webkit-animation: sk-rotate 2.0s infinite linear;
  animation: sk-rotate 2.0s infinite linear;
}

.dot1, .dot2 {
  top: 0;
  /* left: -60%; top: -60%; */
  width: 60%; height: 60%;
  display: inline-block;
  position: absolute;
  background-color: #807d78;
  border-radius: 100%;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.dot2 {
  bottom: 0;
  top: auto;
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

/*==================================================================
Exclusiv fuers Hochformat 
==================================================================*/
@media only screen and (orientation: portrait) {

	#std_showtest { /* Test-Div auf jeder Seite darstellbar */
		left: 25vmin; bottom: 0;
	}

} /* Ende Hochformat */

/*==================================================================
		Exclusiv fuers Querformat 
		====================================================================*/

@media only screen and (orientation:landscape)
{
	#std_header{
		position: absolute;
		left: 0; top:0; 
		display: table-cell;
		text-align: center;
		vertical-align: middle;
		width: 70vh; height: 15vh;
		transform-origin: 0 0;
		transform: translate(0, 85vh) rotate(-90deg); /**/
		/* left: 5vw; top:50vh; /* da vmax nicht von IE unterstuetzt */
		/* border-style:solid; border-width:1px; border-color:#00ff00; /**/
	}
	#std_footer {
		position: absolute;
		text-align: center;
		display: table-cell;
		vertical-align: middle;
		right: 0; bottom: 0; /* da vmax nicht von IE unterstuetzt */
		width: 70vh; height: 15vh;
		transform-origin: 70vh 15vh; /**/
		transform: translate(0, -85vh) rotate(-90deg); /**/
		/* border-style:solid; border-width:1px; border-color:#00ff00;	 /**/
	}

	#std_showtest { /* Test-Div auf jeder Seite darstellbar */
		right: 0; top: 25vmin;
	}

}
/* 	Formatunabhaenige Definitionen
A===============A===============A===============A===============
Hinweise:
evtl fuer iOS :focus hinzufügen
*/

/* Menue alle Formate */

/*=====================================*/
#ro2_knopf {
	/*
	position: absolute;
	left: 0; top: 0; 
	margin: 1vmin;
	width: 15vmin; height: 15vmin;
	border-bottom-right-radius: 75%; 
	border-top-left-radius: 4vmin; 
	overflow: hidden; 
	*/

	position: absolute;
	right: 0; top: 0; 
	margin: 1vmin;
	width: 15vmin; height: 15vmin;
	border-bottom-left-radius: 75%; /**/
	border-top-right-radius: 27%; /**/

}	
#ro2_knopf .popup {
	position: absolute;
	top: 12vmin; left: 3vmin;
	width: 28vmin; height: 70vmin; /*###*/
	margin: 0; /* 5vmin 5vmin 5vmin; ; */
	transition: inherit;
	/* visibility: hidden; */
}
#lu_knopf { 
	position: fixed;
	/* position: absolute; */
	left: 0; bottom: 0; 
	margin: 1vmin;
	width: 15vmin; height: 15vmin;
	border-top-right-radius: 12vmin;
	border-bottom-left-radius: 4vmin;
}
#lo2_knopf {
	/*
	position: absolute;
	right: 0; top: 0; 
	margin: 1vmin;
	width: 15vmin; height: 15vmin;
	border-bottom-left-radius: 75%;
	border-top-right-radius: 27%;
	*/

	position: absolute;
	left: 0; top: 0; 
	margin: 1vmin;
	width: 15vmin; height: 15vmin;
	border-bottom-right-radius: 75%; /**/
	border-top-left-radius: 4vmin; /**/
	overflow: hidden; /**/
}
#lo2_knopf {
	position: absolute;
	left: -7vmin; top: -7vmin; 
	margin: 1vmin;
	width: 20vmin; height: 20vmin;
	/* border-bottom-right-radius: 75%; /**/
	border-radius: 50%; /**/
	/* border-top-left-radius: 4vmin; /**/
	overflow: hidden; /**/
	border-color: rgba(255, 255, 0, 0.7); /* #fad691; */
}
/* ================================================== */
#ru_knopf {
	position: fixed;
	/* position: absolute; */
	right: -7vmin; bottom: -7vmin; 
	/* width: 15vmin; height: 15vmin; */
	width: 24vmin; height: 24vmin;
	/* border-top-left-radius: 75%;
	border-bottom-right-radius: 4vmin; */
	border-radius: 50%; 
	margin: 1vmin;
	border-color: rgba(255, 128, 255, .5); /* #fa9cf7; */
	overflow: hidden; 
}
#ru_knopf #minmax_button  {
	bottom: 7.5vmin; right: 7.5vmin; /**/
	width: 12vmin; height: 12vmin; 
}

#ro2_knopf {
	position: fixed;
	right: -7vmin; top: -7vmin; 
	margin: 1vmin;
	border-color: rgba(128, 255, 255, .5); /* #7ef9fa; */
}
#lu_knopf {
	position: fixed;
	/* position: absolute; */
	left: -7vmin; bottom: -7vmin; 
	margin: 1vmin;
	border-color: rgba(128, 255, 128, .5); /* #81fa78; */
}
#lo2_knopf, #lu_knopf, #ro2_knopf{
	margin: 1vmin;
	width: 24vmin; height: 24vmin;
	border-radius: 50%; 
	overflow: hidden; 
	/* background-image: radial-gradient(circle at 7vmin 7vmin, #fff 0%, #444 50%, #444 100%); /* #888 70%, */
	/* border-color: #000; */
	/* opacity: 0.5; */
}
/**/
.icon, .block_icon, .cam_icon, #minmax_button {
	position: absolute;
	-webkit-filter: brightness(0.65);
	filter: brightness(0.65);
}
_:-ms-lang(x), .icon, .block_icon { opacity: 0.65; /* workaround for IE 11 */ }

.close_icon {
	position: absolute;
	visibility: hidden;
}

.icon { width: 40%; height: 40%; }
.close_icon { width: 4vmin; height: 4vmin; }
.block_icon { width: 5vmin; height: 5vmin; }
.cam_icon  { width: 14vmin; height: 14vmin; }

/* ======= ECKE ======== */
.ecke, .ecke_leer
{
	margin: 0.5vmin;
	width: 15vmin; height: 15vmin; /**/
	/* width: calc(7.5vw + 7.5vh); height: calc(7.5vw + 7.5vh); /**/
	border-radius: 13.5%; /**/
	/* box-sizing: border-box;	/**/
	box-shadow: 0.2vmin 0.2vmin 1vmin 0.8vmin rgba(0,0,0, 0.3);
	background: none;

	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out; /**/

	/* background-color: rgba(88,88,88, 0.2); */
	border-style: dashed; /**/
	border-style: solid; /**/
	border-width: 0.25vmin; 
	border-color:#807d78; /**/

	opacity: 1;	
	overflow: hidden;
}
.ecke
{
	cursor: pointer;
}
.ecke:hover/*, .ecke_leer:hover*/
{
	margin: 0.7vmin;
	width: 14.8vmin; height: 14.8vmin;
	/* background-color: rgba(88,88,88, 0.4); /**/
	/* background-image: linear-gradient(170deg, #343434 0%, #555 100%); /**/
	/* background-color: #222; */
	background-color: #4a5e66;
	/* background-image: linear-gradient(to top left, #252e33, #4a5e66); */
	box-shadow: 0.2vmin 0.2vmin 0.5vmin 1vmin rgba(0,0,0, 0.3);

	border-style: solid; /**/
	border-color:#807d78; /**/
}
.ecke:active
{
	/* margin: 1vmin; */
	width: 14.4vmin; height: 14.4vmin;
	/* background-color: rgba(88,88,88, 0.7); */
	/* background-image: linear-gradient(170deg, #343434 0%, #555 100%); /**/
	/* background-color: #222; */
	background-color: #4a5e66;
	background-image: linear-gradient(to top left, #252e33, #4a5e66);
	box-shadow: 0.2vmin 0.2vmin 0.2vmin 0.5vmin rgba(0,0,0, 0.5);
	border-style: solid; /**/
	border-color: #fffbf0; /**/
}
#lo2_knopf.ecke:hover, #lu_knopf.ecke:hover
{	/* Besonders, weil sonst zu dunkel */
	/* background-image: linear-gradient(to top left, #252e33, #5d7580); */
}
#lo2_knopf.ecke:active, #lu_knopf.ecke:active
{	/* Besonders, weil sonst zu dunkel */
	background-image: linear-gradient(to top left, #4a5e66, #38464d); /* 38464d */
}

.ecke:hover .icon, .ecke .icon:hover, .ecke:hover .cam_icon, .ecke.cam_icon:hover, .ecke:hover #minmax_button
{
	-webkit-filter: brightness(0.8);
	filter: brightness(0.8);
	z-index: 10;
}
_:-ms-lang(x), .ecke:hover .icon, .ecke .icon:hover, .ecke:hover .cam_icon, .ecke.cam_icon:hover, .ecke:hover #min_maxbutton
{ opacity: 0.8; /* workaround for IE 11 */ }

/*.ecke_leer:hover .block_icon, .ecke_leer .block_icon:hover 
{
	-webkit-filter: brightness(0.7);
	filter: brightness(0.7);
	z-index: 10;
}
_:-ms-lang(x), .ecke_leer:hover .block_icon, .ecke_leer .block_icon:hover { opacity: 0.7;  }
*/
.ecke:active .icon, .ecke .icon:active, .ecke:active .cam_icon, .ecke .cam_icon:active  
{s
	-webkit-filter: brightness(1);
	filter: brightness(1);
	z-index: 15;
}
_:-ms-lang(x), .ecke:active .icon, .ecke .icon:active, .ecke:active .cam_icon, .ecke .cam_icon:active { opacity: 1; /* workaround for IE 11 */ }

#lo2_knopf.ecke .icon
{
	top: 8vmin; left: 8vmin; /**/
	width: 10vmin; height: 10vmin; 
}
#lo2_knopf.ecke .cam_icon
{
	top: 7vmin; left: 8vmin; /**/
	width: 12vmin; height: 12vmin%; 
}
#ro2_knopf.ecke .icon {
	top: 9vmin; right: 9vmin; /**/
	width: 9vmin; height: 9vmin; 
}
#ro2_knopf.ecke .close_icon {
	/* top: -10vmin; left: -10vmin; /**/
	top: 3.7vmin; right: 3.7vmin;
	width: 6vmin; height: 6vmin; 
}
#ru_knopf.ecke .icon {
	bottom: 9.5vmin; right: 8.5vmin; /**/
	width: 9vmin; height: 9vmin; 
}
#ru_knopf.ecke_leer .block_icon {
	bottom: 3.7vmin; right: 3.7vmin; /**/
	width: 7vmin; height: 7vmin; 
}
.ecke .icon { visibility: visible; }
.ecke .close_icon { visibility: hidden; }
.ecke .head { visibility: hidden; }
.ecke .popup { visibility: hidden; }
.block_icon { visibility: hidden; }

.ecke_leer .icon { visibility: hidden; }
.ecke_leer .close_icon { visibility: hidden; }
.ecke_leer .head { visibility: hidden; }
.ecke_leer .popup { visibility: hidden; }
.ecke_leer .block_icon { visibility: visible; }

/* ======= AKTIV ======== */
.aktiv {
	margin: 3vmin;
	border-style:solid; 
	border-color:#807d78; /**/
	border-width: 0.2vmin; 
	border-radius: 5%; /**/

	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out; /**/

	/* background-image: url('../_img/escheresque_ste_hell04.png'); /**/
	background-repeat:repeat; /**/
	box-shadow: 0.2vmin 0.2vmin 1vmin 1vmin rgba(0,0,0, 0.5); /**/

	z-index: 50;
}
#ro2_knopf.aktiv {
	right: 0; top: 0;
	margin: 0;
	width: 48vmin; height: 57vmin;
	border-radius: 0px; /**/
	border-bottom-left-radius: 10vmin; /**/
	/* border-top-left-radius: 10%; /**/
	/* border-top-left-radius: 10%; /**/
	/* background-color: #222; */
	background-color: #4a5e66;
	background-image: linear-gradient(to top left, #252e33, #4a5e66);
}

#ro2_knopf.aktiv .close_icon { 
	/* right: 38vmin; top: 4.5vmin; */
	left: 38vmin; top: 4.5vmin; 
	-webkit-filter: brightness(0.7);
	filter: brightness(0.7);
	visibility: visible; 	
}
_:-ms-lang(x), #ro2_knopf.aktiv .close_icon { opacity: 0.7; /* workaround for IE 11 */ }

#ro2_knopf.aktiv .head {
	position: absolute;
	/*right: 4.2vmin; top: 2.5vmin; /**/
	left: 5.5vmin; top: 2.5vmin; /**/
	color: #807d78;
	color: #BBB;
	font-weight: 800; /**/
	/* font-size: 200%; /**/
	font-size: 150%; /**/
}

.aktiv .icon, .aktiv_klein .icon, .aktiv_mittel1 .icon, .aktiv_mittel2 .icon, .aktiv_gross .icon {	visibility: hidden; }
.aktiv .close_icon, .aktiv_klein .close_icon, .aktiv_mittel1 .close_icon, .aktiv_mittel2 .close_icon, .aktiv_gross .close_icon { visibility: visible; }
.aktiv .head, .aktiv_klein .head, .aktiv_mittel1 .head, .aktiv_mittel2 .head, .aktiv_gross .head {	visibility: visible; }
.aktiv .popup, .aktiv_klein .popup, .aktiv_mittel1 .popup, .aktiv_mittel2 .popup, .aktiv_gross .popup {	visibility: visible; }

.aktiv:hover .close_icon, .aktiv .close_icon:hover 
{
	-webkit-filter: brightness(0.7);
	filter: brightness(0.7);
	z-index: 10;
}
_:-ms-lang(x), .aktiv:hover .close_icon, .aktiv .close_icon:hover { opacity: 0.7; /* workaround for IE 11 */ }

.aktiv:active .close_icon, .aktiv .close_icon:active 
{
	-webkit-filter: brightness(1);
	filter: brightness(1);
	z-index: 15;
}
_:-ms-lang(x), .aktiv:active .close_icon, .aktiv .close_icon:active { opacity: 1; /* workaround for IE 11 */ }


#ro2_knopf .popup > .menu2_item { /**/

	display: block; /**/
	/* margin: 1vmin 0 1vmin 0.5vmin; /**/
	margin: 1vmin 0 0vmin 0vmin; /**/
	box-sizing: border-box; /**/
	float: left;
	list-style: none; 
	color: #4d4b48;
	color: #555;
	/* background-color: none; */
}
.menu2_item a {
	display: block; 
	box-sizing: border-box; /**/
	/* margin: 0.5vmin; /**/
	padding: 0 0 2vmin 2vmin;
	/* width: 30vmin; height: 10vmin; /**/
	width: 38vmin; height: 7vmin;
	font-size: 5vmin;
	/* border-radius: 5vmin;  /**/
	border-radius: 1vmin;  /**/
	/* box-shadow: 0.5vw 0.5vw 0.5vw 0 rgba(0,0,0, 0.5); /**/

	/* background-color: rgba(88,88,88, 0.2); /**/
	border-style: solid; 
	border-width: 0.2vmin 0 0 0; 

	border-color:#b3b0a8; /**/
	/* color: #b3b0a8; /**/
	color: #cdcac0; /**/
	color: #ddd; /**/
	text-align: left;
	/*text-align: center; */
}
.menu2_item a:link,
.menu2_item a:visited
{
	text-decoration: none;
	/* color: #b3b0a8; /**/
}
.menu2_item a:hover
{
	-webkit-tap-highlight-color: rgba(0,0,0,0); /* wegen Chrome */
	tap-highlight-color: rgba(0,0,0,0);
	text-decoration: none;
	color: #fffbf0;
	color: #FFF;
	background-image: linear-gradient(170deg, #343434 0%, #555 100%); /**/
	background-image: linear-gradient(170deg, #252e33 0%, #4a5e66 100%); /**/
	
	border-style:none; /**/
	/* border-color:#fffbf0; /**/
	box-shadow: 0.5vw 0.5vw 0.5vw 0 rgba(0,0,0, 0.5); /**/
}
.menu2_item a:active
{
	-webkit-transform: translate(0.3vmin, 0.3vmin);
	-moz-transform: translate(0.3vmin, 0.3vmin);
	-ms-transform: translate(0.3vmin, 0.3vmin);
	-o-transform: translate(0.3vmin, 0.3vmin); /**/
	transform: translate(0.3vmin, 0.3vmin); 
	box-shadow: 0.3vw 0.3vw 0.5vw 0 rgba(0,0,0, 0.5);
}
/**/
/* ===========INFO ru_knopf============================ */
#ru_knopf.aktiv_klein, #ru_knopf.aktiv_mittel1, #ru_knopf.aktiv_mittel2, #ru_knopf.aktiv_gross {
	/* margin: 3vmin; */
	margin: 0;
	right: -.5vmin; bottom: -.5vmin; 

	border-style:solid; 
	/* border-color: #807d78; /**/
	border-width: 0.2vmin; 
	border-radius: 0vmin; /**/
	border-top-left-radius: 4vmin; /**/
	/* border-top-left-radius: 25%; /**/
	/* border-bottom-right-radius: 0; /**/
	margin: 0 0 0 0;

	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out; /**/

	/* background-image: url('../_img/escheresque_ste_hell04.png'); /**/
	/* background-color: #222; /**/
	background-color: #4a5e66;
	background-image: linear-gradient(to top left, #252e33, #4a5e66);
	/* background-repeat:repeat; /**/
	box-shadow: 0.2vmin 0.2vmin 1vmin 1vmin rgba(0,0,0, 0.3); /**/

	z-index: 50;
}
#ru_knopf.aktiv_klein {
	width: 32vmin; height: 32vmin;
}
#ru_knopf.aktiv_mittel1 {
	width: 50vmin; height: 50vmin;
}
#ru_knopf.aktiv_mittel2 {
	width: 65vmin; height: 65vmin;
}
#ru_knopf.aktiv_gross {
	width: 80vmin; height: 80vmin;
}
.aktiv_klein .close_icon, 
.aktiv_mittel1 .close_icon,
.aktiv_mittel2 .close_icon,
.aktiv_gross .close_icon
 {
	position: absolute;
	-webkit-filter: brightness(0.7);
	filter: brightness(0.7);
	visibility: visible; 	
}
_:-ms-lang(x), .aktiv_klein .close_icon, 
.aktiv_mittel1 .close_icon,
.aktiv_mittel2 .close_icon,
.aktiv_gross .close_icon { opacity: 0.7; /* workaround for IE 11 */ }

.aktiv_klein .close_icon
 {
	/* left: 5vmin; bottom: 3vmin; /**/
	right: 5vmin; top: 2vmin; /**/
	width: 3vmin; height: 3vmin;
}

.aktiv_mittel1 .close_icon, .aktiv_mittel2 .close_icon  {
	/* left: 5vmin; bottom: 3.5vmin; /**/
	right: 5vmin; top: 3.5vmin; /**/
}

.aktiv_gross .close_icon {
	/* left: 5vmin; bottom: 4vmin; /**/
	right: 5vmin; top: 5.5vmin; /**/
}

#ro2_knopf.aktiv .close_icon:hover, 
.aktiv_klein .close_icon:hover, 
.aktiv_mittel1 .close_icon:hover, 
.aktiv_mittel2 .close_icon:hover, 
.aktiv_gross .close_icon:hover 
{
	-webkit-filter: brightness(0.7);
	filter: brightness(0.7);
	z-index: 10;
}
_:-ms-lang(x), #ro2_knopf.aktiv .close_icon:hover, 
.aktiv_klein .close_icon:hover, 
.aktiv_mittel1 .close_icon:hover, 
.aktiv_mittel2 .close_icon:hover, 
.aktiv_gross .close_icon:hover { opacity: 0.7; /* workaround for IE 11 */ }

#ro2_knopf.aktiv:active .close_icon, #ro2_knopf.aktiv .close_icon:active, 
.aktiv_klein:active .close_icon, .aktiv_klein .close_icon:active, 
.aktiv_mittel1:active .close_icon, .aktiv_mittel1 .close_icon:active, 
.aktiv_mittel2:active .close_icon, .aktiv_mittel2 .close_icon:active, 
.aktiv_gross:active .close_icon, .aktiv_gross .close_icon:active 
{
	-webkit-filter: brightness(1);
	filter: brightness(1);
	z-index: 10;
}
_:-ms-lang(x), #ro2_knopf.aktiv:active .close_icon, #ro2_knopf.aktiv .close_icon:active, 
.aktiv_klein:active .close_icon, .aktiv_klein .close_icon:active, 
.aktiv_mittel1:active .close_icon, .aktiv_mittel1 .close_icon:active, 
.aktiv_mittel2:active .close_icon, .aktiv_mittel2 .close_icon:active, 
.aktiv_gross:active .close_icon, .aktiv_gross .close_icon:active { opacity: 1; /* workaround for IE 11 */ }

.aktiv_klein .head {
	position: absolute;
	/* right: 2vmin; bottom: 1vmin; /**/
	left: 5vmin; top: 1vmin; /**/
	box-sizing: border-box; /**/
	font-weight: 800; /**/
	font-size: 100%; /**/
	transition: 0.3s ease-in-out;
	color: #807d78;
	color: #BBB;
}

.aktiv_mittel1 .head, .aktiv_mittel2 .head  {
	position: absolute;
	/* right: 3vmin; bottom: 1.5vmin; /**/
	left: 5vmin; top: 1.5vmin; /**/
	box-sizing: border-box; /**/
	font-weight: 800; /**/
	font-size: 150%; /**/
	transition: 0.3s ease-in-out;
	color: #807d78;
	color: #BBB;
}
.aktiv_gross .head {
	position: absolute;
	/* right: 5vmin; bottom: 2vmin; /**/
	left: 5vmin; top: 2vmin; /**/
	box-sizing: border-box; /**/
	font-weight: 800; /**/
	font-size: 200%; /**/
	transition: 0.3s ease-in-out;
	color: #807d78;
	color: #BBB;
}

#ru_knopf .popup {
	position: absolute;
	/* left: 2.5vmin; top: 2.5vmin; /**/
	margin: 2.5vmin 2.5vmin 2.5vmin 2.5vmin;
	/* text-indent: 2.5vmin; */
	box-sizing: border-box; /**/
	font-size: 80%; 
	/* transition: 1s ease-in-out; /**/
	/* color: #807d78; /**/
}
.aktiv_klein .popup {
	left: 2.5vmin; top: 6vmin; /**/
}
.aktiv_mittel1 .popup, .aktiv_mittel2 .popup {
	left: 2.5vmin; top: 8vmin; /**/
}
.aktiv_gross .popup {
	left: 2.5vmin; top: 12vmin; /**/
}

/* =========Flaggen lu_knopf ============================== */
.back_icon { /* ### */
	/* position: absolute; width: 7.5vmin; height: 5vmin; top: 6vmin; right: 4.5vmin; /**/
	-webkit-filter: brightness(0.4);
	filter: brightness(0.4);
	border: solid 1px #000; /*#807d78; /**/
	position: absolute; 
	width: 9vmin; height: 6vmin; 
	bottom: 12vmin; left: 8vmin;
	/* border: solid 1px #b3b0a8; /**/
}
.front_icon { /* ### */
	-webkit-filter: brightness(0.4);
	filter: brightness(0.4);
	border: solid 1px #000; /*#807d78; /**/
	position: absolute; 
	width: 9vmin; height: 6vmin; 
	bottom: 10vmin; left: 10vmin;
	/* border: solid 1px #b3b0a8; /**/
}
#lu_knopf:hover .back_icon { /* ### */
	-webkit-filter: brightness(0.8);
	filter: brightness(0.8);
	z-index: 7;
	border: solid 1px #666; /*#807d78; /**/
}
_:-ms-lang(x), #lu_knopf:hover img:nth-child(1)  { opacity: 0.8; /* workaround for IE 11 */ } /* ### */

#lu_knopf:active { /* ### */
	box-shadow: 0.2vw 0.2vw 0.2vw 0.2vw rgba(0,0,0, 0.5);
	/* background-image: linear-gradient(170deg, #343434 0%, #555 100%); 
	border-color:#fffbf0;
	border-style:solid; */
}
#lu_knopf:active .back_icon { /* ### */
	-webkit-filter: brightness(1);
	filter: brightness(1);
	border: solid 1px #AAA; /*#807d78; /**/
}
_:-ms-lang(x), #lu_knopf:hover img:nth-child(1)  { opacity: 1; /* workaround for IE 11 */ } /* ### */

#h2_as {
	font-weight: 200; /**/
	font-size: 250%; 
	line-height: 0.9;
	color:#cdcac0;
	color:#DDD;
	/* float: left; /**/
	text-shadow: 0.3vmin 0.3vmin 0.5vmin #000000;
	margin: 0 4vmin 4vmin 0;
}
#mitte_as {
	position: absolute;
  	top: 50%; left: 50%;
	transform: translate(-50%, -50%); /**/
	width: 90vmin; height: 70vmin; /**/
	box-sizing: border-box; /**/
	border-color:#b3b0a8;
	border-color:#BBB;
	border-style: dashed;  /**/
	border-style: none;  /**/
	border-width:1px ; /**/
 	overflow: hidden;
	transition: all 0.2s ease;
}
#main_as {
	position: relative; */
	display: block;  /* workaround fuer IE */
	top: 0; left: 0;
	width: 100%; 
/*	box-sizing: border-box; /**/
/* 	overflow: hidden;
	transition: all 0.2s ease; */
	border-width:1px ; /**/
}
#mainEcke_as {
 	position: absolute;
	top: 0; right: 0; /**/
	width: 15vw; height: 15vh;
	border-width: 2px 2px 0 0;
	border-color:#807d78; 
	border-color:#888; 
	border-style:dashed; /**/
}

#posterWrap_as {
 	/* position: absolute;
  	bottom: 0; left: 0; /**/
	width: 100%;
	margin-top: 8vmin;
	box-sizing: border-box; /**/
	overflow-x: auto;
	overflow-y: hidden;
	/* border-style:dashed; /**/
	border-style: none;  /**/
}
#posterSel_ps {
 	position: absolute;
	height: 60vmin; width: 100%;
	bottom: 0; left: 0;
	box-sizing: border-box; /**/
}
.poster_as
{
	position: relative; 
	margin: 0 6vmin 4vmin 0;
	width: 30vmin;  height: 42vmin; /* 50x70 */
	box-sizing: border-box; /**/

	box-shadow: 0.5vw 0.5vw 0.5vw 0 rgba(0,0,0, 0.5);
	float: left; /* slide */
	text-decoration:none;
	-webkit-filter: brightness(0.8);
	filter: brightness(0.8);
	/* text-align: center; */
 	overflow:hidden;
	/* border-width: 1.5px 0 0 1px ; /**/
	border: solid 0.2vmin #807d78; 
}
_:-ms-lang(x), .poster_as { opacity: 0.8; /* workaround for IE 11 */ }

.poster_as:hover, 
.poster_as:active 
{ 
	-webkit-tap-highlight-color: rgba(0,0,0,0); /* wegen Chrome */
	tap-highlight-color: rgba(0,0,0,0);
	text-decoration: none;
	color: #b3b0a8;
	color: #BBB;
	-webkit-filter: brightness(1);
	filter: brightness(1);
}
.poster_as:active {
	/* border-width: 1px; */
	border-color: #b3b0a8; /**/
	border-color: #BBB; /**/
}
.poster_as img {
	position: absolute;
	left: 0; top: 0;
	width: 100%;  height: 100%; /**/
}
.poster_as .spinner {
	left: 10vmin; top: 16vmin;
}

_:-ms-lang(x), .poster_as:hover { opacity: 1; /* workaround for IE 11 */ }
_:-ms-lang(x), .poster_as:active { opacity: 1; /* workaround for IE 11 */ }


/*==================================================================
		Exclusiv fuers Hochformat 
	==================================================================*/
@media only screen and (orientation: portrait) {



} /* Ende Hochformat */

/*==================================================================
		Exclusiv fuers Querformat 
====================================================================*/

@media only screen and (orientation:landscape) and (min-aspect-ratio: 3/2)
{
	#mitte_as {
		width: 126vmin; /**/
	}


} /* Ende Querformat *//*==================================================================
		Großes Quadrat und allgemeine Einstellungen, 100%-Werte
	==================================================================*/
#mitte_comp {
  position: absolute;
  top: 50%; left: 50%;
  width: 85vw; height: 90vh; 
  transform: translate(-50%, -50%); 
  box-sizing: border-box;/**/
  padding: 1vmin; /**/
  /* transition: all 0.2s ease; */
  -webkit-border-radius: 1vmin;
  -moz-border-radius: 1vmin;
  border-radius: 1vmin;
  /* box-shadow: 0.5vmin 0.5vmin 0.5vmin 0.5vmin rgba(0,0,0, 0.5); /**/
  /* border-style:dashed; border-width: 2px; border-color:#807d78; /**/

  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out; /**/

    border-style:solid; 
    /* border-width: 1px; /**/
    border-color:#807d78; /**/
    border-width: 0.2vmin; 
    border-radius: 5%; /**/
    border-bottom-right-radius: 20%; /**/
    border-top-left-radius: 10%; /**/

  font-size: 90%;

}
#main_comp  {
    /* left: 0; top: 0; /**/
    display: block; 
    /* width: 70vmin; height: 70vmin; /**/
    width: 100%; height: 100%; /**/
    margin: 1vmin; 
    float: left;
}
input.comp_radio {
  /* position: relative; /**/
  width: 1vw;
  height: 1vw;
  /* opacity: 0; /**/
  display: none; /**/
  background-color: grey;
}
input.comp_radio+label{
  position: relative; /**/
  display:block; 
  /* float: left; /**/
  border-width: 2px;
  border-style: solid;
  border-color: blue;
  margin: 0.5vw;
  width: 5vw;
  height: 5vw;
  opacity: 1;
  font-size: 2.5vw;
  text-align: center;

  /* =================== */
  display: block; 
  box-sizing: border-box; /**/
  float: left;
  /* margin: 1.5vmin; /**/
  /* padding: 2.5vmin 1vmin 1vmin 1vmin; /**/
  padding-top: 0.5vw;
  border-radius: 1vw; 
  box-shadow: 0.5vw 0.5vw 0.5vw 0 rgba(0,0,0, 0.5); /**/

  background-color: rgba(88,88,88, 0.2);
  border-style: solid; 
  border-width: 0.2vmin; 
  border-color:#b3b0a8; /**/ 
  color: #fff;
  text-align: center;
  vertical-align: middle;
}
input.comp_radio:checked+label{
  background-color: #777;
  color: #fff;
  font-weight: bold;
  /* color: #000; */
}
.comp_container{
  float: left; /**/
  width: 100%;
  height: 6vw;
  list-style-type: none;
  margin-bottom: 1.5vw;
}  
.comp_container:nth-child(10) {
  /* float: none; /**/
}  
.comp_thumb {
  float: left; /**/
  border-style: solid; 
  border-width: 0.2vmin; 
  border-color:#b3b0a8; /**/ 
  margin: 0vw 2vw 0vw 0.5vw ;
  width: 6vw;
  height: 6vw;
  box-shadow: 0.5vw 0.5vw 0.5vw 0 rgba(0,0,0, 0.5); /**/
  }
  .button_comp {
    display: block; 
    box-sizing: border-box; /**/
    float: left;
    margin: 1.5vmin; /**/
    padding: 2.5vmin 1vmin 1vmin 1vmin;
    width: 32vmin; height: 10vmin;
    font-size: 3.2  vmin; /**/
    border-radius: 5vmin;  /**/
    box-shadow: 0.5vw 0.5vw 0.5vw 0 rgba(0,0,0, 0.5); /**/

    background-color: rgba(88,88,88, 0.2);
    border-style: solid; 
    border-width: 0.2vmin; 
    font-weight: 200 !important; 
    font-style: normal !important; 

    border-color:#b3b0a8; /**/ 
    color: #b3b0a8;
    text-align: center;
}


/*==================================================================
		Großes Quadrat und allgemeine Einstellungen, 100%-Werte
	==================================================================*/
#mitte_ho { /* normal = Querformat*/
	position: absolute;
	top: 50%; left: 50%;
	/* width: 100vmin; height: 90vmin; */
	width: 130vmin; height: 88vmin; 
	transform: translate(-50%, -50%); 
    border-color: #666460; 
    border-color: #666; 
    color: #e5e1d7;
    color: #EEE;
}
#main_ho {
	position: absolute;
	box-sizing: border-box;/**/
	width: 100%; height: 100%; 
	margin-top: 0vmin;
	overflow: hidden;
    border-color: #666460; 
    border-color: #666; 
}
#ho_tile1, #ho_tile2, #ho_tile3, #ho_tile4, #ho_tile5, #ho_tile6 {
	box-sizing: border-box;/**/
	width: 41vmin; height: 41vmin; 
    border-style: solid; /**/
    /* border-style: none; /**/
    border-width: 1px; 
    border-radius: 1.5vmin; /**/
    border-color: #666460; /* */
    border-color: #666; 
    /* border-color: inherit; /**/
    margin: 1vmin;
    float: left;
    overflow: hidden;
	box-shadow: 0.5vw 0.5vw 0.5vw 0 rgba(0,0,0, 0.5);
}
#mitte_ho:active #ho_tile1,
#mitte_ho:active #ho_tile2,
#mitte_ho:active #ho_tile3,
#mitte_ho:active #ho_tile4,
#mitte_ho:active #ho_tile5,
#mitte_ho:active #ho_tile5 {
	border-color: #9a9791;
	border-color: #999;
}

#ho_tile1 img { height: 110%; width: auto; }
#ho_tile2 img {	width: auto; height: 100%; }	
#ho_tile3 img { width: auto; height: 100%; margin-left:  -30%; }
#ho_tile4 img {	height: auto; width: 100%; margin-top: -10%; }	
#ho_tile5 img { width: auto; height: 100%; margin-left: -35%; }
#ho_tile6 img { height: 100%; width: auto; margin-left: -30%; }	

h2.ho_h2{
	position: absolute;
	left: 4vmin; top: 3vmin;
	font-weight: 800; /**/
	color:#cdcac0;
	color:#DDD;
	text-align: left;
	text-shadow: 0.3vmin 0.3vmin 0.5vmin #000000;

	font-size: 5vmin; 
	line-height: 6vmin;
}
#ho_klickit img {
	position: absolute;
	left: 57vmin; top: 47vmin;
	width: 12vmin; height: auto; 

	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out; /**/

	opacity: 0.6 ;
}
#ho_klickit img:hover {
	opacity: 1 ;
}
@media only screen and (orientation: portrait){ 
	#mitte_ho {
	width: 88vmin; height: 130vmin; 
	}
	#ho_klickit img {
		left: 20vmin; top: 90vmin;
	}
}
/* Quadrat */
@media only screen and (min-aspect-ratio: 5/8) and (max-aspect-ratio: 8/5) { /* Quadrat groß */

	#mitte_ho {
		width: 88vmin; height: 88vmin;  
		font-size: 80%;
	}
	#ho_tile1, #ho_tile2, #ho_tile3, #ho_tile4, #ho_tile5, #ho_tile6  {
		width: 42vmin; height: 42vmin; 
	}
	#ho_tile5, #ho_tile6 {
		visibility: hidden;
	}
	h2.ho_h2 {
		/* keine Änderung */
	} /**/
	#ho_klickit img {
		left: 72vmin; top: 30vmin;
	}
}

@media only screen and (min-aspect-ratio: 13/16) and (max-aspect-ratio: 16/13) { /* Quadrat klein */

	#mitte_ho {
		width: 75vmin; height: 75vmin;  
		font-size: 80%;
	}
	#ho_tile1, #ho_tile2, #ho_tile3, #ho_tile4, #ho_tile5, #ho_tile6  {
		width: 35vmin; height: 35vmin; 
	    margin: 0.86vmin;
	}
	#ho_tile5, #ho_tile6 {
		visibility: hidden;
	}
	h2.ho_h2 {
		left: 3.4vmin; top: 3.4vmin;
		font-size: 4.3vmin; 
		line-height: 5.14vmin;
	} 
	#ho_klickit img {
		left: 60vmin; top: 25vmin;
		width: 10vmin; height: auto; 
	}

}
#home_poster {
	display: block; 
	box-sizing: border-box; /**/
	-webkit-filter: brightness(0.9);
	filter: brightness(0.9);
}
#cookieDialog{
	position: fixed;
	left: 12vmin; bottom: 3vmin; 
	width: 80vmin;  height: 30vmin; /**/
	/* background-image: linear-gradient(170deg, #343434 0%, #555 100%); /**/
	box-shadow: 0.2vmin 0.2vmin 0.5vmin 1vmin rgba(0,0,0, 0.3);
	border-style: solid; /**/
	border-width: 1px; /**/
	border-color: #807d78; /**/
	border-color: #888; /**/
	/* background-color: #f00; /**/
	border-radius: 2vmin; /**/
	/* border-top-right-radius: 5vmin; /**/
	/* border-top-left-radius: 5vmin; /**/
	/* opacity: 1;	*/
	font-size: 3vmin; 
	background-color: #4a5e66;
	background-image: linear-gradient(to top left, #252e33, #4a5e66);
	color: #fffbf0;
	color: #FFF;
	z-index: 10;
}
#cookieText{
	display: block;
	/* height: 30vmin; /**/
	padding: 2vmin 2vmin 2vmin 3vmin;
}

/*==================================================================
		Großes Quadrat und allgemeine Einstellungen, 100%-Werte
	==================================================================*/
#mitte_lega {
	position: absolute;
	top: 50%; left: 50%;
	width: 90vmin; height: 90vmin; 
	transform: translate(-50%, -50%); 
	box-sizing: border-box;/**/
	/* transition: all 0.2s ease; */
	-webkit-border-radius: 1vmin;
	-moz-border-radius: 1vmin;
	border-radius: 1vmin;
	/* box-shadow: 0.5vmin 0.5vmin 0.5vmin 0.5vmin rgba(0,0,0, 0.5); /**/
	/* border-style:dashed; border-width: 2px; border-color:#807d78; /**/

	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out; /**/

}
/*h2.le_h2{
	font-weight: 800; 
	font-size: 160%; 
	line-height: 1.1;
	margin: 0 4vmin 4vmin 0;
}*/
h2.h2_lega {
	font-size: 90%; 
	font-weight: 600; /**/
	line-height: 1.0;
	color: inherit;
}
h3.h3_lega {
	font-size: 90%; 
	font-weight: 600; /**/
	color: inherit;
	margin-top: 1vmin;
}
#cont_1of3 p, #cont_2of3 p, #cont_3of3 p {
	font-size: 80%; 
	/* font-weight: 600; /**/
	line-height: 1.5;
	color: inherit;
	margin: 1vmin 0 3vmin 0;

} 

/* Default */
#cont_1of3, #cont_2of3, #cont_3of3, 
#cont_1of3.inaktiv, #cont_2of3.inaktiv, #cont_3of3.inaktiv {
	position: absolute;
	box-sizing: border-box;
	top: 10vmin; 
	/* width: 90vmin; height: 80vmin; */
	width: 100%; height: 89%;
	background-color: #444; 
	background-color: #4a5e66;
	background-color: #38464d;
	border-style: solid;
	/* border-color: #807d78; /**/
	border-color: #666460;
	border-color: #666;
	border-width: 0.15vmin 0.15vmin 0.15vmin 0.15vmin; 

	padding: 4vmin; 

	-webkit-border-radius: 0 0 3vmin 3vmin;
	-moz-border-radius: 0 0 3vmin 3vmin;
	border-radius: 2vmin 2vmin 3vmin 3vmin;
	box-shadow: 0.5vmin 0.5vmin 0.5vmin 0.5vmin rgba(0,0,0, 0.5); /**/

}
#cont_1of3.aktiv_lega, #cont_2of3.aktiv_lega, #cont_3of3.aktiv_lega {
	background-color: #222; 
	background-color: #252e33;
	background-color: #38464d;
	color:#fffbf0;
	color:#FFF;
	z-index: 10;
}
#tab_1of3, #tab_2of3, #tab_3of3,
#tab_1of3.inaktiv_lega, #tab_2of3.inaktiv_lega, #tab_3of3.inaktiv_lega {
	position: absolute;
	box-sizing: border-box;/**/
	top: -10vmin; 
	height: 10.1vmin;
	width: 31%; 
	background-color: #444;
	background-color: #4a5e66;

	border-style: solid;
	border-color: #807d78; 
	border-color: #888; 
	border-width: 0.15vmin 0.15vmin 0vmin 0.15vmin; /*#807d78; */

	-webkit-border-radius: 3vmin 3vmin 0 0;
	-moz-border-radius: 3vmin 3vmin 0 0;
	border-radius: 3vmin 3vmin 0 0;

	color:#cdcac0;
	color:#ddd;

	padding: 0.8vmin 3vmin 0.8vmin 3vmin; 
	/* box-shadow: 0.5vmin 0 1vmin 0.2vmin rgba(0,0,0, 0.5); /**/

}
.inaktiv_lega {
	cursor: pointer;
}
#tab_1of3.aktiv_lega, #tab_2of3.aktiv_lega, #tab_3of3.aktiv_lega {
	background-color: inherit;
	color: inherit;
	border-color: #666460;
	border-color: #666;
	z-index: 11; /**/
}
#tab_1of3 { left: 2%; }
#tab_2of3 { left: 34%; }
#tab_3of3 { left: 66%; }

#cont_1of3 img{
	width: 85%; 
	height: auto;
}
#tab_1of3.inaktiv_lega:hover, #tab_2of3.inaktiv_lega:hover, #tab_3of3.inaktiv_lega:hover {
	border-color:#fffbf0;
	border-color:#FFF;
	color:#fffbf0;
	color:#FFF;
}
.le_li {
	font-weight: 300; /**/
	margin-left: 4.5vmin; /**/
	padding-left: 1vmin; /**/
	/* font-size: 80%; /**/
}
.le_lu {
	font-weight: 600; /**/
	margin-top: 2vmin;
	font-size: 80%; 
}


/*==================================================================
		Exclusiv fuers Hochformat, 140%-Werte 
	==================================================================*/
@media only screen and (orientation: portrait) and (max-aspect-ratio: 5/8){
	#mitte_lega {
			width: 90vmin; height: 126vmin; /**/
	}
} /* Ende Hochformat */

/*==================================================================
		Exclusiv fuers Querformat, 140%-Werte 
====================================================================*/

@media only screen and (orientation:landscape) and (min-aspect-ratio: 8/5) {
	#mitte_lega {
		width: 126vmin; height: 90vmin; /**/
		font-size: 120%; 

	}
	#cont_1of3 img{
		height: 100%; 
		width: auto; 
	}
	h2.h2_lega {
		font-size: 80%; 
	}
} /* Ende Querformat */

/*==================================================================
		In der Nähe des Quadrats => kleines Quadrat, 80%-Werte
====================================================================*/

@media only screen and (min-aspect-ratio: 5/6) and (max-aspect-ratio: 6/5) {
	#mitte_lega {
		width: 80vmin; height: 80vmin; /**/
		font-size: 90%;
	}
} /* Ende Quadrat *//*==================================================================
		Großes Quadrat und allgemeine Einstellungen, 100%-Werte
	==================================================================*/
#mitte_li { /* Querformat und Standards   */
	position: absolute;
	top: 50%; left: 50%;
	/* width: 100vmin; height: 90vmin; */
	width: 100vmin; height: 88vmin; 
	transform: translate(-50%, -50%); 

	box-sizing: border-box;/**/
	/* transition: all 0.2s ease; */
	-webkit-border-radius: 1vmin;
	-moz-border-radius: 1vmin;
	border-radius: 1vmin;
}
#main_li{
	position: absolute;
	box-sizing: border-box;/**/
	width: 100%; height: 100%; 
	margin-top: 0vmin;
}

h2.li_h2{
	font-weight: 800; /**/
	font-size: 160%; 
	line-height: 1.1;
	color:#807d78;
	color:#AAA;
	/* float: left; /**/
	margin: 0 4vmin 4vmin 0;
}
.li_li {
	margin-bottom: 2vmin;
}
@media only screen and (orientation: portrait){ /* Hochformat */
	#mitte_li {
	width: 88vmin; height: 100vmin; 
	}
}
/* Quadrat */
@media only screen and (min-aspect-ratio: 5/8) and (max-aspect-ratio: 8/5) { /* Quadrat groß */

	#mitte_li {
		width: 88vmin; height: 88vmin;  
		font-size: 80%;
	}
}

@media only screen and (min-aspect-ratio: 13/16) and (max-aspect-ratio: 16/13) { /* Quadrat klein */

	#mitte_li {
		width: 75vmin; height: 75vmin;  
		font-size: 80%;
	}
}

 /* Bordered form */
#mitte_lo {
    position: absolute;
    top: 50%; left: 50%;
    width: 90vmin; height: 90vmin; 
    transform: translate(-50%, -50%); 

    box-sizing: border-box;/**/
    box-shadow: 0.5vmin 0.5vmin 0.5vmin 0.5vmin rgba(0,0,0, 0.5); /**/

    border-style:solid; 
    border-color:#807d78; /**/
    border-width: 0.2vmin; 
    border-radius: 5%; /**/
    border-bottom-right-radius: 25%; /**/
    border-top-left-radius: 10%; /**/

    background-image: url('../_img/escheresque_ste_hell04.png'); /**/
    background-repeat:repeat; /**/


    /* transition: all 0.2s ease; */
/*    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out; /**/

}
#main_lo  {
    /* left: 0; top: 0; /**/
    display: block; 
    width: 70vmin; height: 70vmin; /**/
    /* width: 50vw; height: 50vmin; /**/
    margin: 5vmin; 
    float: left;

    /* -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; /**/

    /*box-shadow: 0.2vmin 0.2vmin 1vmin 1vmin rgba(0,0,0, 0.5); /**/

}
#main_lo p:first-of-type:first-letter {
    font-size: 270%; 
    float: left;
    line-height: 0.7;
    margin: 2.5vmin 1vmin 0 0;
    font-weight: 600; /**/
}
#main_lo .mess_01 {
    display: block;
    position: absolute;
    top: 55vmin; 
    width: 70vmin; 
    float left;
}

.lo_input, .lo_label, .lo_select, .lo_textarea, .lo_button {
    font-family: inherit;
    font-family: 'Open Sans', sans-serif; 

    font-weight: 200; 
    font-style: normal;
    text-decoration: none;
}
.lo_form {
    /* border: 3px solid #f1f1f1; */
    display: block;
}
.lo_label {
    float: left;
    height: 5vmin; width: 40vmin;
    display: inline-block;
    /* padding: 3vmin; /**/
    margin-bottom: 1vmin;
    /* margin-bottom: 2vmin; /**/

    display: inline-block;
    /* font-style: italic; */
}
/* Full-width inputs */
.lo_input[type=text], .lo_input[type=password] {
    /* position: absolute; /**/
    float: left;
    height: 7vmin; width: 40vmin;
    /* padding: 3vmin; /**/
    margin-bottom: 3vmin;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 1vmin; /**/
    box-sizing: border-box;
    padding-left: 1.5vmin;
    padding-bottom: 0.5vmin;
    font-size: 90%; /**/
    color: black;
    background-color: #cdcac0;
    font-weight: 400; 
    font-style: normal;
}

.lo_button {
    display: block; 
    box-sizing: border-box; /**/
    float: left;
    margin-top: 4vmin; /**/
    padding: 0 1vmin 1.5vmin 1vmin;
    width: 40vmin; height: 6vmin;
    font-size: 4vmin; /**/
    border-radius: 2vmin;  /**/
    box-shadow: 0.5vw 0.5vw 0.5vw 0 rgba(0,0,0, 0.5); /**/

    background-color: rgba(88,88,88, 0.2);
    border-style: solid; 
    border-width: 0.2vmin; 
    font-weight: 200; 
    font-style: normal; 

    border-color:#b3b0a8; /**/
    color: #b3b0a8;
    text-align: center;
}
.lo_button:link,
.lo_button:visited
{
    text-decoration: none;
    /* color: #b3b0a8; /**/
}
.lo_button:hover
{
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* wegen Chrome */
    tap-highlight-color: rgba(0,0,0,0);
    text-decoration: none;
    color: #fffbf0;
    background-image: linear-gradient(170deg, #343434 0%, #555 100%); /**/
    border-color:#fffbf0; /**/
    outline: none;
}
.lo_button:active
{
    /*-webkit-transform: translate(0.3vmin, 0.3vmin);
    -moz-transform: translate(0.3vmin, 0.3vmin);
    -ms-transform: translate(0.3vmin, 0.3vmin);
    -o-transform: translate(0.3vmin, 0.3vmin); /**/
    transform: translate(0.3vmin, 0.3vmin); 
    box-shadow: 0.3vw 0.3vw 0.5vw 0 rgba(0,0,0, 0.5);
    outline: none;
}

.lo_button {
    float: none;
    margin-top: 5vmin;
}
/*==================================================================
        Exclusiv fuers Querformat, 140%-Werte 
====================================================================*/

@media only screen and (orientation:landscape) and (min-aspect-ratio: 3/1)
{

    #mitte_lo {
        position: absolute;
        top: 50%; left: 50%;
        width: 70vw; height: 90vmin; 
        border-radius: 4.5vmin; /**/
        border-bottom-right-radius: 22.5vmin; /**/
        border-top-left-radius: 9vmin; /**/
        border-width: 2px; 
    }
    #main_lo  {
        left: 0; top: 0;
        width: 64vw; height: 85vmin; /**/
        margin: 1.5vw 1vw 3vw 1vw; 
        float: left;
        font-size: 2vw;
    }

#main_lo .mess_01 {
    display: none;
    float: none;
}
    .lo_form {
        /* border: 3px solid #f1f1f1; */
        /* padding: 3vmin; */
        /* padding: 1.5vw 3vw 3vw 3vw; */
    }
    .lo_label {
        float: left;
        height: 3.5vw; width: 18vw;
        display: inline-block;
        /* padding: 3vmin; /**/
        margin-bottom: 1vw; /**/
        margin-left: 1.5vw;
        font-size: 2vw;
    }
    /* Full-width inputs */
    .lo_input[type=text], .lo_input[type=password] {
        /* position: absolute; /**/
        float: left;
        height: 3.5vw; width: 20vw;
        padding-left: vw;
        margin-bottom: 1vw; /**/
        font-size: 1.8vw;
        border-radius: 0.5vw; /**/
    }
    .lo_input[type=text] {
        /* position: absolute; /**/
        margin-right: 10vw;
    }
    .lo_button {
        height: 3vw; width: 20vw;
        float: left;
        /* padding: 14px 20px; /**/
        font-size: 2vw;
        margin-top: 0;
        margin-left: 3vw;
        border-radius: 1vw; /**/
        border-width: 1px; 
    }

    a.enable_cookies {
        display: block;
        margin-top: 4vw;
    }

} /* Ende Querformat */

#nav_v_bild, #nav_n_bild, #haupt_bild_PD, #curr_bild_th, #prev_bild_th, #next_bild_th {
	-webkit-border-radius: 1vmin;
	-moz-border-radius: 1vmin;
	border-radius: 1vmin;
	box-shadow: 0.5vmin 0.5vmin 0.5vmin 0.5vmin rgba(0,0,0, 0.5); /**/
	border-style: solid;
	/* border-width: 2px; /**/
	border-width: 0.15vmin; /**/
	border-color: #888;	
}
#nav_v_bild.myMouseOut, #nav_v_bild, #nav_n_bild.myMouseOut, #nav_n_bild {
	width: 16vmin; height: 16vmin;
	transition: all 0.5s ease; 
	-webkit-filter: brightness(0.5);
	filter: brightness(0.5);
	transform:translateZ(0); /* wegen Chrome Bug #62363 */
	z-index: 2;
	overflow: hidden;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	box-shadow: 0.2vmin 0.2vmin 1vmin 0.8vmin rgba(0,0,0, 0.3);
}
_:-ms-lang(x), #nav_v_bild, #nav_n_bild{
	opacity: 0.5; /* workaround for IE 11 */
}
#nav_v_bild, #nav_v_bild.myMouseOut {
	position: absolute;
	/* transform: rotate(-3deg); */
	z-index: 7; 
}
#nav_n_bild, #nav_n_bild.myMouseOut {
	position: absolute;
	/* transform: rotate(3deg); */
	z-index: 7; 
}
#nav_v_bild.myHover, #nav_v_bild.noJS:hover{
	/* transform: scale(1.05) rotate(-4deg); */
	transform: scale(1.05);
	border-color:#b3b0a8;
	border-color:#BBB;
}
#nav_v_bild:active {
	/* transform: scale(1.0) rotate(-3deg);*/
	transform: scale(1.0);
	transition: all 0.1s;
	border-color:#fffbf0;
	border-color:#FFF;
}
#nav_n_bild.myHover, #nav_n_bild.noJS:hover{
	/* transform: scale(1.05) rotate(4deg);*/
	transform: scale(1.05);
	border-color:#b3b0a8;
	border-color:#BBB;
}
#nav_n_bild:active {
	/* transform: scale(1.0) rotate(3deg); */
	transform: scale(1.0);
	transition: all 0.1s;
	border-color:#fffbf0;
	border-color:#FFF;
}
#nav_v_bild.myHover, #nav_v_bild.noJS:hover, #nav_v_bild:active, #nav_n_bild.myHover, #nav_n_bild.noJS:hover, #nav_n_bild:active {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	tap-highlight-color: rgba(0,0,0,0);
	-webkit-filter: brightness(1);
	filter: brightness(1);
	opacity: 1; /* workaround for IE 11 */
	z-index: 7; 
	border-color:#fffbf0;
	border-color:#FFF;
}
#nav_v_bild .my_normal, #nav_n_bild .my_nomal {
	-webkit-filter: brightness(0.5);
	filter: brightness(0.5);
	opacity: 0.5; /* workaround for IE 11 */
	border-color:#888;
	z-index: 0; 
}

#haupt_bild_PD {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%); 
	box-sizing: content-box;/**/
	opacity: 1 ;
	/* transition: all 0.2s ease; /**/
	z-index: 5; 
}
#curr_bild_th, #next_bild_th, #prev_bild_th {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%); 
	box-sizing: content-box;/**/
}
#curr_bild_th.normal {
	opacity: 1 ;
	z-index: 5; 
}
#prev_bild_th.normal  {
	opacity: 1 ;
	transform: translate(-400%, -50%); 
}
#next_bild_th.normal {
	opacity: 1 ;
	transform: translate(200%, -50%); 
}
/*
#haupt_bild_PD:active {
	transition: all 0; 
	opacity: 0;
}
*/
#nav_n_bild #go_PD {
	position: absolute;
	left: 3vmin; top: 1vmin;
	font-weight: 700; /**/
	font-size: 100%; 
	color: #fffbf0;
	color:#FFF;
	text-shadow: 0.5vmin 0.5vmin 0.5vmin #000000;
}
@-webkit-keyframes mo_fadeIn { 
  0%   { opacity: 0; }
  30%   { opacity: 0.1; }
  100% { opacity: 1; }
}
@-moz-keyframes mo_fadeIn {
  0%   { opacity: 0; }
  30%   { opacity: 0.1; }
  100% { opacity: 1; }
}
@-o-keyframes mo_fadeIn {
  0%   { opacity: 0; }
  30%   { opacity: 0.1; }
  100% { opacity: 1; }
}
@keyframes mo_fadeIn {
  0%   { opacity: 0; }
  30%   { opacity: 0.1; }
  100% { opacity: 1; }
}
#haupt_bild_PD.mo_opac000 { opacity: 0 ; } 
#haupt_bild_PD.mo_opac101 { opacity: 1 ; } 

#nav_n_bild.mo_opac101, #nav_v_bild.mo_opac101 { opacity: 0.5 ; }

#haupt_bild_PD.mo_opac100 {
  -webkit-animation: mo_fadeIn 1s ease-in; /* Safari 4+ */
  -moz-animation:    mo_fadeIn 1s ease-in; /* Fx 5+ */
  -o-animation:      mo_fadeIn 1s ease-in; /* Opera 12+ */
  animation:         mo_fadeIn 1s ease-in; /* IE 10+, Fx 29+ */
}
#nav_n_bild.mo_opac100, #nav_v_bild.mo_opac100 {
  -webkit-animation: mo_fadeIn 1s ease-in; /* Safari 4+ */
  -moz-animation:    mo_fadeIn 1s ease-in; /* Fx 5+ */
  -o-animation:      mo_fadeIn 1s ease-in; /* Opera 12+ */
  animation:         mo_fadeIn 1s ease-in; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes th_backToMid { 0% { } 100% { -webkit-transform: translate(-50%, -50%); } }
@-moz-keyframes th_backToMid { 0% { } 100% { -moz-transform: translate(-50%, -50%); } }
@-o-keyframes th_backToMid { 0% { } 100% { -o-transform: translate(-50%, -50%); } }
@keyframes th_backToMid { 0% { } 100% { transform: translate(-50%, -50%); } }

@-webkit-keyframes th_backToMidx { 0% { } 100% { top: 50%; left: 50%; transform: translate(-50%, -50%); } }
@-moz-keyframes th_backToMidx { 0% { } 100% { top: 50%; left: 50%; transform: translate(-50%, -50%); } }
@-o-keyframes th_backToMidx { 0% { } 100% { top: 50%; left: 50%; transform: translate(-50%, -50%); } }
@keyframes th_backToMidx { 0% { } 100% { top: 50%; left: 50%; transform: translate(-50%, -50%); } }

@-webkit-keyframes th_ToRight { 0% { } 100% { -webkit-transform: translate(50%, -50%); } }
@-moz-keyframes th_ToRight { 0% { } 100% { -moz-transform: translate(50%, -50%); } }
@-o-keyframes th_ToRight { 0% { } 100% { -o-transform: translate(50%, -50%); } }
@keyframes th_ToRight { 0% { } 100% { transform: translate(50%, -50%); } }

#haupt_bild_PD.th_back_xyz {
  -webkit-animation: th_backToMid 0.5s ease-out; /* Safari 4+ */
  -moz-animation:    th_backToMid 0.5s ease-out; /* Fx 5+ */
  -o-animation:      th_backToMid 0.5s ease-out; /* Opera 12+ */
  animation:         th_backToMid 0.5s ease-out; /* IE 10+, Fx 29+ */
}
#haupt_bild_PD.th_back {
	top: 50%; left: 50%;
	transform: translate(-50%, -50%); 
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out; /**/
}
#haupt_bild_PD.th_org {
  -webkit-animation: th_backToMid 0.5s ease-out; /* Safari 4+ */
  -moz-animation:    th_backToMid 0.5s ease-out; /* Fx 5+ */
  -o-animation:      th_backToMid 0.5s ease-out; /* Opera 12+ */
  animation:         th_backToMid 0.5s ease-out; /* IE 10+, Fx 29+ */
}
#haupt_bild_PD.th_links_slow {
	position: absolute;
	/* left: 0%; */
	transform: translate(-100vw, -50%); 
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	-ms-transition: all 0.5s;
	transition: all 0.5s ; /*ease-out*/
}

.th_slow_in {
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	transition: all 0.5s ;  /*ease-out*/
	opacity: 1;
}
.th_slow_out {
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	transition: all 0.5s ;  /*ease-out*/
	opacity: 0;
}
.th_slow_portrait {
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	transition: all 0.4s ;  /*ease-out*/
	opacity: 1;
}
.th_slow_landscape {
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	transition: all 0.4s ; 
	opacity: 1;
}

.th_smooth_move {
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	-ms-transition: all 0.5s;
	transition: all 0.4s;  /**/
}
#haupt_bild_PD.th_links_frei {
	position: absolute;
	/* left: 0%; */
	transform: translate(-100vw, -50%); 
}
#haupt_bild_PD.th_rechts_slow {
	position: absolute;
	/*transform: translate(-100vmin, -50%); */
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	transition: all 0.5s /* ease-out*/; /**/
}
#haupt_bild_PD.th_rechts_stay {
	position: absolute;
	top: 50%; left: 100%;
}
/*
#mitte:active, 
#mitte:visited
{
	// transform: scale(1.1); 
	border-color:#b3b0a8; 
	//transform-origin: 50% 50%;
	transform: scale(1.1); 
}
*/
/*
#haupt_bild_PD img {
	border-radius: 1vmin;
	border-color:#b3b0a8;
}
#haupt_bild_PD img:active {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	tap-highlight-color: rgba(0,0,0,0);
}
#haupt_bild_PD a:active {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	tap-highlight-color: rgba(0,0,0,0);
}
*/
#curr_alb_titel, #prev_alb_titel, #next_alb_titel {
	position: absolute;
	font-weight: 400; /**/
	top: -6.5vw; left: 1vw;	
	text-align: left;
	font-size: 100%; 
	color: #9a9791;
	color: #999;
	text-shadow: 0.5vh 0.5vh 0.5vh rgba(0,0,0, 1);
	/* opacity: inherit; */
}
#curr_bild_titel, #prev_bild_titel, #next_bild_titel {
	position: absolute;
	/* width: 45vh; height: 5vh; /**/
	font-weight: 400; /**/
	right: 1vw;	bottom: -6vw; 
	text-align: right;
	font-size: 90%; 
	color: #9a9791;
	color: #999;
	text-shadow: 0.5vh 0.5vh 0.5vh rgba(0,0,0, 1);
	/* opacity: inherit; */
}
/*==================================================================
		Exclusiv fuers Hochformat 
		==================================================================*/
		@media only screen and (orientation: portrait) {

	#nav_v_bild {
		left: 10vw; bottom:15vh;
		left: 10vw; bottom:10vh;
	}
	#nav_n_bild {
		right: 10vw; top:15vh;
		right: 10vw; top:10vh;
	}
} /* Ende Hochformat */

/*==================================================================
		Exclusiv fuers Querformat 
		====================================================================*/

@media only screen and (orientation:landscape)
{
	#nav_v_bild, #nav_v_bild {
		position: absolute;
		/* left: 10vw; bottom:10vw; /* da vmax nicht von IE unterstuetzt */
		/* left: 15vw; bottom:10vh; /* da vmax nicht von IE unterstuetzt */
		left: 10vw; top:42vh; /* da vmax nicht von IE unterstuetzt */
	}
	#nav_n_bild {
		position: absolute;
		/* right: 10vw; top:10vw; /* da vmax nicht von IE unterstuetzt */
		right: 15vw; top:10vh; /* da vmax nicht von IE unterstuetzt */
		right: 10vw; top:42vh; /* da vmax nicht von IE unterstuetzt */
	}
	#curr_alb_titel, #prev_alb_titel, #next_alb_titel {
		position: absolute;
		width: 45vh; height: 5vh;
		transform-origin: 0 0;
		transform: rotate(-90deg);
		left: -6.7vh;	top: 46vh; 
		text-align: right;
	}
	#curr_bild_titel, #prev_bild_titel, #next_bild_titel {
		position: absolute;
		width: 45vh; height: 5vh;
		transform-origin: 0 0;
		transform: rotate(-90deg);
		right: -45vh;	bottom: -4vh; 
		text-align: left;
		line-height: 1.7;

	}
}	#h2_ps {
	font-weight: 200; /**/
	font-size: 300%; 
	line-height: 0.9;
	color:#cdcac0;
	color:#DDD;
	text-shadow: 0.3vmin 0.3vmin 0.5vmin #000000;
	/* float: left; /**/
	margin: 0 0 4vmin 0;
	text-align: right;
}
#mitte_ps {
	position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%); /**/
  /* width: 75vw; height: 75vh; /**/
  width: 90vmin; height: 60vmin; /* 5.8.2017 */
	box-sizing: border-box; /**/
	border-color:#b3b0a8;
	border-color:#BBB;
	/* border-style: dashed;  /**/
	border-style: none;  /**/
	/* border-width:1px ; /**/
 	overflow: hidden;
	transition: all 0.2s ease;
}
#main_ps {
	position: relative; */
	display: block;  /* workaround fuer IE */
  top: 0; left: 0;
  width: 100%; height: 50vh;
/*	box-sizing: border-box; /**/
/* 	overflow: hidden;
	transition: all 0.2s ease; */
}
#main_ps .rund_knopf {
	position: absolute; 
	right: 3vmin; bottom: 6vmin; /**/
	font-weight: 700; /**/
	font-size: 100%; 
	text-align: center;
	padding-top: 4vmin;
}

#mainEcke_ps {
 	position: absolute;
	top: 0; right: 0; /**/
	width: 15vmin; height: 15vmin;
	border-width: 2px 2px 0 0;
	border-color:#807d78; 
	border-color:#888; 
	border-top-right-radius: 15vmin; /**/
	border-style: dashed; /**/
}

#thumbsWrap_ps {
 	position: absolute;
	bottom: 0; left: 0; /**/ 
	height: 32vmin; width: 100%;
	box-sizing: border-box; /**/
	overflow-x: auto;
	overflow-y: hidden;
	border-width: 0 2px 0 2px;
	border-color:#b3b0a8; 
	/* border-style:dashed; /**/
	border-style: none;  /**/
}
#thumbsSel_ps {
 	position: absolute;
	bottom: 0; left: 0;
	height: 28vmin; width: 100%;
	box-sizing: border-box; /**/
	background: url(../_img/FilmstreifenHG09.png) repeat-x; /**/
	/* background-position: 0 0;  */
	background-size: auto 26vmin; 
	background-position: -41px 0px; 
	/* background-color: #38464d; /**/
	/* scrollbar-face-color:00458C; /* Farbe des Schiebebalkens + der Scroll up & down pfeile der der Scrollbalken */
	/* scrollbar-shadow-color:ff0000; /* Die Farbe des Schattens der Scrollbalken */
	/* scrollbar-highlight-color:ffffff; /*Die Lichtern (links) der Scrollbalken */
	/* scrollbar-3dlight-color:FFFFFF; /* 3D effekt Farbe */
	scrollbar-darkshadow-color: #000000; /* Farbe den Schattens der ganz rechts ist /**/
	/* scrollbar-track-color:FFFFFF; /* Farbe von der Laufleiste der Scrollbalken */
	/* scrollbar-arrow-color:FFFFFF; /* Pfeilfarbe von den Scrollbalken */
}
/* ::-webkit-scrollbar-track {
	background: #f00;
} */
.thumb_ps
{
	position: relative; 
	margin: 5.2vmin 0vmin 1vmin 1.2vmin; /**/
	width: 15vmin;  height: 15vmin; 
	box-sizing: border-box; /**/

	/* background: url(../_img/Slide-N-100pz.png) no-repeat; /**/
	/* background-position: 0 0; background-size: 20vh auto ; */
	float:left; /* slide */
	font-size: 1.5vmin;
	/* color:#8e979d; */
	color:#252e33; 
	border-width: 1.5px; 
	/* color:#e5e2d8; */
	text-decoration:none;
	border-radius: 0.5vmin;  
	border-style:solid; border-width: 1px; border-color:#444; /**/
	/* box-shadow: 0.5vw 0.5vw 0.5vw 0 rgba(0,0,0, 0.5); */
	/* background-image: linear-gradient(-10deg, #333 0%, #555 100%); /**/
	-webkit-filter: brightness(1.0);
	filter: brightness(1.0);
	cursor: pointer;
}
_:-ms-lang(x), .thumb_ps { opacity: 0.8; /* workaround for IE 11 */ }

.thumb_ps:hover, 
.thumb_ps:active 
{ 
	-webkit-tap-highlight-color: rgba(0,0,0,0); /* wegen Chrome */
  tap-highlight-color: rgba(0,0,0,0);
	text-decoration: none;
	background-image: linear-gradient(170deg, #343434 0%, #555 100%); /**/
	color: #fffbf0;
  /*border-style:solid; border-width: 2px 1px 1px 2px; border-color:#807d78; /**/
  -webkit-filter: brightness(1.2);
  filter: brightness(1.2);
}
.thumb_ps:active {
	border-width: 1.5px; 
	border-color:#fffbf0; /**/
}

_:-ms-lang(x), .thumb_ps:hover { opacity: 1; /* workaround for IE 11 */ }
_:-ms-lang(x), .thumb_ps:active { opacity: 1; /* workaround for IE 11 */ }


.thumbNo
{
	position: absolute;
	left: 6vmin; top: 17.9vmin;
	/* color: #666460; */
	color: #252e33;
	/* text-shadow: 0.1vmin 0.1vmin 0.1vmin #000000; */
	font-size: 1.2vmin;
	font-size: 80%; 
	font-weight: bold;
}
.thumbGo {
	font-weight: 700; /**/
	font-size: 400%; 
	text-align: center;
	padding-top: 4vmin;
	color: #fffbf0;
	text-shadow: 0.5vmin 0.5vmin 0.5vmin #000000;
}
 

#e {
	/* Ende Anker */
	position: absolute;
  height: 1px; width: 1px;
  bottom: 0; left: 0;
}

/*==================================================================
		Exclusiv fuers Hochformat 
	==================================================================*/
@media only screen and (orientation: portrait) {



} /* Ende Hochformat */

/*==================================================================
		Exclusiv fuers Querformat 
====================================================================*/

@media only screen and (orientation:landscape) and (min-aspect-ratio: 3/2)
{

	#mitte_ps {
		width: 126vmin; /**/
	}



} /* Ende Querformat *//*==================================================================
		Großes Quadrat und allgemeine Einstellungen, 100%-Werte
	==================================================================*/
#mitte_st {
	position: absolute;
	top: 50%; left: 50%;
	width: 90vmin; height: 90vmin; 
	transform: translate(-50%, -50%); 
	box-sizing: border-box;/**/
	padding: 1vmin; /**/
	/* transition: all 0.2s ease; */
	-webkit-border-radius: 1vmin;
	-moz-border-radius: 1vmin;
	border-radius: 1vmin;
	/* box-shadow: 0.5vmin 0.5vmin 0.5vmin 0.5vmin rgba(0,0,0, 0.5); /**/
	/* border-style:dashed; border-width: 2px; border-color:#807d78; /**/

	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out; /**/

    border-style:solid; 
    /* border-width: 1px; /**/
    border-color:#807d78; /**/
    border-color:#888; /**/
    border-width: 0.2vmin; 
    border-radius: 5%; /**/
    border-bottom-right-radius: 20%; /**/
    border-top-left-radius: 10%; /**/

	font-size: 90%;

}
#main_st  {
    /* left: 0; top: 0; /**/
    display: block; 
    /* width: 70vmin; height: 70vmin; /**/
    width: 100%; height: 100%; /**/
    margin: 1vmin; 
    float: left;
}
h2.st_h2{
	position: absolute;
	bottom: 3vmin;
	font-weight: 800; /**/
	font-size: 160%; 
	line-height: 1.1;
	color:#807d78;
	color:#888;
	/* float: left; /**/
	margin: 0 4vmin 4vmin 0;
}
h2.st_h2 a {
	color: inherit; /* nur für chrome, der das allgemeine inherit nicht macht */
}
.std_button {
    display: block; 
    box-sizing: border-box; /**/
    float: left;
	margin: 1.5vmin; /**/
	padding: 0 1vmin 1vmin 1vmin;
    width: 35vmin; height: 6vmin;
    font-size: 4vmin; /**/
    border-radius: 2vmin;  /**/
    /* box-shadow: 0.5vw 0.5vw 0.5vw 0 rgba(0,0,0, 0.5); /**/
    box-shadow: 0.5vw 0.5vw 0.5vw 0 rgba(0,0,0, 0.3); /**/

    background-color: rgba(88,88,88, 0.2);
    border-style: solid; 
    border-width: 0.2vmin; 
    font-weight: 200 !important; 
    font-style: normal !important; 

    border-color:#b3b0a8; /**/ 
    border-color:#BBB; /**/ 
    color: #b3b0a8;
    color: #BBB;
    text-align: center;
}
input.std_button {
    padding-top: 0.8vmin; /**/
}

.std_button:link,
.std_button:visited
{
    text-decoration: none;
    /* color: #b3b0a8; /**/
}
.std_button:hover
{
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* wegen Chrome */
    tap-highlight-color: rgba(0,0,0,0);
    text-decoration: none;
    color: #fffbf0;
    color: #FFF;
    background-image: linear-gradient(170deg, #343434 0%, #555 100%); /**/
   	background-image: linear-gradient(170deg, #252e33 0%, #4a5e66 100%); /**/
    border-color:#fffbf0; /**/
    border-color:#FFF; /**/
    outline: none;
}
.std_button:active
{
    /*-webkit-transform: translate(0.3vmin, 0.3vmin);
    -moz-transform: translate(0.3vmin, 0.3vmin);
    -ms-transform: translate(0.3vmin, 0.3vmin);
    -o-transform: translate(0.3vmin, 0.3vmin); /**/
    transform: translate(0.3vmin, 0.3vmin); 
    box-shadow: 0.3vw 0.3vw 0.5vw 0 rgba(0,0,0, 0.5);
    outline: none;
}




/*==================================================================
		Exclusiv fuers Hochformat, 140%-Werte 
	==================================================================*/
@media only screen and (orientation: portrait) and (max-aspect-ratio: 5/8){
	#mitte_st {
			width: 90vmin; height: 126vmin; /**/
		    border-bottom-right-radius: 28% 20%; /**/
    		border-top-left-radius: 14% 10%; /**/
    		border-bottom-left-radius: 7% 5%; /**/
    		border-top-right-radius: 7% 5%; /**/

	}
	#mitte_st h2 {
		font-size: 200%; 
	}


} /* Ende Hochformat */

/*==================================================================
		Exclusiv fuers Querformat, 140%-Werte 
====================================================================*/

@media only screen and (orientation:landscape) and (min-aspect-ratio: 8/5)
{

	#mitte_st {
		width: 126vmin; height: 90vmin; /**/
		font-size: 120%; 
	    border-bottom-right-radius: 20% 28%; /**/
   		border-top-left-radius: 10% 14%; /**/
  		border-bottom-left-radius: 5% 7%; /**/
   		border-top-right-radius: 5% 7%; /**/
	}
	#mitte_st h2 {
		font-size: 180%; 
	}

} /* Ende Querformat */

/*==================================================================
		In der Nähe des Quadrats => kleines Quadrat, 80%-Werte
====================================================================*/

@media only screen and (min-aspect-ratio: 5/6) and (max-aspect-ratio: 6/5)
{

	#mitte_st {
		width: 80vmin; height: 80vmin; /**/
		font-size: 80%;
	}
	#mitte_st h2 {
		font-size: 150%; 
	}

} /* Ende Quadrat */ /* Bordered form */


#mitte_tb {
    position: absolute;
    top: 50%; left: 50%;
    width: 90vmin; height: 90vmin; 
    transform: translate(-50%, -50%); 

    box-sizing: border-box;/**/
    box-shadow: 0.5vmin 0.5vmin 0.5vmin 0.5vmin rgba(0,0,0, 0.5); /**/

    border-style:solid; 
    border-color:#807d78; /**/
    border-width: 0.2vmin; 
    border-radius: 5%; /**/
    border-bottom-right-radius: 25%; /**/
    border-top-left-radius: 10%; /**/

    background-image: url('../_img/escheresque_ste_hell04.png'); /**/
    background-repeat:repeat; /**/
}
#main_tb  {
    /* left: 0; top: 0; /**/
    display: block; 
    width: 70vmin; height: 70vmin; /**/
    /* width: 50vw; height: 50vmin; /**/
    margin: 5vmin; 
    float: left;

}
#main_tb p:first-of-type:first-letter {
    font-size: 270%; 
    float: left;
    line-height: 0.7;
    margin: 2.5vmin 1vmin 0 0;
    font-weight: 600; /**/
}
#main_tb .mess_01 {
    display: block;
    position: absolute;
    top: 55vmin; 
    width: 70vmin; 
    float left;
}

.tb_input, .tb_label, .tb_select, .tb_button {
    font-family: inherit;
    font-family: 'Open Sans', sans-serif; 

    font-weight: 200; 
    font-style: normal;
    text-decoration: none;
    color: #000;
    font-size: 1.5vmin;
    padding: 0 1vmin 0 0.3vmin;
}
.tb_button {
    height: 3vmin; 
    padding: 0 1vmin 0 1vmin;
}
.tb_form {
    display: block;
}

.tb_white_label {
    font-size: 1.5vmin;
    margin-left: 0.3vmin;
    color: #fff;
}
.tb_60, .tb_30, .tb_25, .tb_20, .tb_15, .tb_10 {
    display: block;
    height: 3vmin;
    float: left;
    padding-left: 1%;
    background-color: #38464d;
    color: #fff;
}
.tb_60 { width: 60%; }
.tb_30 { width: 30%; }
.tb_25 { width: 25%; }
.tb_20 { width: 20%; }
.tb_15 { width: 15%; }
.tb_10 { width: 10%; }

.tb_60 input[type="submit"], .tb_60 input[type="reset"], 
.tb_30 input[type="submit"], .tb_30 input[type="reset"], 
.tb_20 input[type="submit"], .tb_20 input[type="reset"] {
    background-color: #AAA;
}
form[name="addUser"] .tb_25,
form[name="addUser"] .tb_60 {
    background-color: #38464d;
}
.tb_60 input, .tb_30 input, .tb_25 input, .tb_20 input, .tb_15 input, .tb_10 input, .tb_input {
    color: #000;
    padding: 0 1% 0 1%;
    font-family: Times New Roman, serif;
    font-size: 1.8vmin;
    -webkit-user-select: text;  /* Chrome all / Safari all */
    -moz-user-select: text;     /* Firefox all */
    -ms-user-select: text;      /* IE 10+ */
    user-select: text;          /* Likely future */  

}