@charset "UTF-8";
/* root */

:root {
  --btn: 100%;
  --hue: 0deg;
}

/* Body */
body {
	font-family: source-sans-pro;
	background-color: gray;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-style: normal;
	cursor: url(Icons/Cursor_go.gif) 10 40, pointer;
	font-weight: 200;
}

/* Main Container */
.bookmark-container {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	height: 100%;
	position: fixed;
	top: 0;
	bottom: 0px;
	left: 0px;
	background-color: greenyellow;
	cursor: url(Icons/Cursor_go.gif) 10 40, pointer;
}

.bookmark-header {
	position: relative;
	display: flex;
	flex-direction: row;
/*	justify-content: space-between; */
	align-items: center;
	width: 100%;
	height: 10%;
    background: linear-gradient(90deg, rgba(100,0,0,1) 0%, rgba(244,226,10,1) 35%, rgba(0,255,255,1) 100%);
}

.Tafel {
	display: flex;
	position: absolute;
	border-style: solid;
	border-color: mediumblue;
	border-radius: 10%;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: aqua;
}
	
#Tafel1 {
	width: 10%;
	height: 80%;
	margin-left: 1%;
}

#Tafel2 {
	width: 10%;
	height: 80%;
	margin-left: 89%;
}

.Tabelle {
	font-size: 14pt;
	font-weight: normal;
	text-align: center;
	color: black;
	height: auto;
	width: 100%;
	word-wrap: break-word;
	hyphens: auto;
}

th {
	font-size: 14pt;
	font-weight: bolder;
}

.Schild {
	display: flex;
	background-color: transparent;
	position: absolute;
	justify-content: center;
	align-items: center;
	width: 20%;
	height: 100%;
    margin-left: 40%;
}

.bookmark-logo {
    display: block;
	width: auto;
	height: 80%;
}

.bookmark-grid {
	display: grid;
	width: 100%;
	height: 85%;
/*	grid-template-columns: calc(85vh/12*1.385) calc(100% - 85vh/6*1.385) calc(85vh/12*1.385); */
	grid-template-columns: min(6%, calc(85vh/12*1.42)) auto min(6%, calc(85vh/12*1.42));
	grid-template-areas: "area_1 area_2 area_3";
	grid-template-rows: auto;
	background-color: aquamarine;
	margin: 0px;
	padding: 0px;
/*	justify-items: stretch;
	align-items: stretch;  */	
}


.bookmark-stage {
	justify-content: space-around;
    grid-area: area_2;
	background-color: darkcyan;
	width: 100%;
	height: 100%;
	margin: 0px;
	position: relative;
}

.creatures {
    display: flex;
	width: 8%; 
    height: auto;
    border: none;
	margin: 0px;
	padding: 0px 0px;
    justify-content: center;
	align-items: center;
	position: absolute;
	cursor: url(Icons/Cursor_show.gif) 10 40, pointer;
	background-color: transparent;
	visibility: hidden;
/*	--path: 'M70,40 C-70,70 70,70 70,-40'; */
	--path: '';
	offset-path: path(var(--path));
}

 .Pfade {
	display: none;
	position: absolute;
}

svg {
	width: 300px;
	height: 300px;
	background: white;
	border: 1px solid;
}

.Pfad01 {
	display: none;
	position: absolute;
	offset-path: path('M-70,-40 C-70,70 70,70 70,-40');
}

.creature {
	display: flex;
	width: 80%;
	height: auto;
	margin: 0px;
	padding: 0px;
}

.spotlight {
    display: flex;
	width: auto;
    height: 50%;
	background-color: gray;
    border-style: solid;
	border-color: coral;
	border-radius: 10%;
	margin: 0px;
	padding: 0px 0px;
    justify-content: center;
	align-items: center;
	position: absolute;
	visibility: hidden;
}

.superstar {
	display: flex;
	width: auto;
	height: auto;
	margin: 0px;
	padding: 0px;
/*	visibility: hidden; */
}

/* Quelle: olivergast- horizontales dropdown */

nav {                    	/* vertikales Menu */
	display: flex;
	flex-direction: row;
	grid-area: area_1;
	align-items: stretch;
	width: 100%;
	height: 100%; 
	background: linear-gradient(0deg, rgba(100,0,0,1) 0%, rgba(244,226,10,1) 35%, rgba(0,255,255,1) 100%);
}

nav ul {					/* Alle Listenelemente */
  margin: 0;
  padding: 0;
}

nav ul li {					/* alle einzelnen Buttons */
	position: relative;
 	list-style: none;
}
 
/* nav ul ul { */
.supi	{					/* Unterlisten		*/			
	position: absolute;     /* virtuelle Park-Position */
	display: block;
	visibility: hidden;
	width: 100%;
	top: 0%;
	left: 100%;
	margin: 0px;
	padding: 0px;
	z-index: 2;
}


nav ul li:hover > ul {		/* Verzweigung */
	display: block;
	visibility: visible;
	border-color:chartreuse;
}

nav ul li:last-child {
	border-bottom: medium; 
	border-bottom-color: mediumblue;
}

#bookmark-navigation-right {
	grid-area: area_3;
	margin: 0px;
	padding: 0px;
	background-color: rosybrown;
}

.suppi {
	position: absolute;     /* virtuelle Park-Position */
	display: block;
	visibility: hidden;
	width: 100%;
	top: 0%;
	right: 100%;
	margin: 0px;
	padding: 0px;
	z-index: 2;
}

.bookmark-button {
    display: flex;
	flex-direction: row;
	box-sizing: border-box;
    justify-content: center;
/*    align-items: stretch; */
	width: 100%;
 /*   height: auto; */
	background-color: skyblue;
	border-top: medium;
	border-left: medium;
	border-right: medium;
	border-bottom: thin;
	border-color: MediumBlue;
	border-style: solid;
	margin: 0px;
	padding: 0px 0px;
	cursor: url(Icons/Cursor_show.gif) 20 10, pointer;
/*	position: absolute; */
}

.active {
	 display: block;
	 border-color: OrangeRed;
	 visibility: visible;
	 z-index: 1;
}

.visible {
	 visibility: visible;
	 z-index: 1;
}

.boomark-button:focus{
/*	border-color: red;    */
/*	border-bottom: medium; */
}


.bookmark-button:hover {
	filter: brightness(140%);
/*	border-bottom: thick;  */
/*	border-bottom-color: red; */
/*	border-color: rebeccapurple;  */
	cursor: url(Icons/Cursor_show.gif) 30 30, pointer;
}


.bookmark-button:active {
	cursor: url(Icons/Cursor_show.gif) 30 30, pointer;
	display: block;
	visibility: visible;
	box-sizing: border-box;
}


.button-image {
	display: block;
    width: 100%;
	height: auto;
	margin: 0px;
	padding: 0px;
}

#showTorch {
	position: absolute;
	cursor: not-allowed;
    pointer-events: none;
	border-bottom: medium solid;
	border-bottom-color: mediumblue;
}

#showGlass {
	position: absolute;
	cursor: not-allowed;
    pointer-events: none;
	border-bottom: medium solid;
	border-bottom-color: mediumblue; 
	border-radius: 20%;
	background-color: #CCCCCC;
	background-image: url("Icons/Clemens.png");
	background-size: cover;
	background-attachment: fixed; 
	background-repeat: no-repeat;
	background-position: top left;  
}

 #imgGlass {
	opacity: 0%;
} 

#clickControl {
	visibility: hidden;
	position: absolute;
}


.bookmark-footer {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 5%;
	bottom: 0px;
	left: 0px;
	border: 0px;
	padding: 0px;
	padding-bottom: 0px;
	background: linear-gradient(90deg, rgba(100,0,0,1) 0%, rgba(244,226,10,1) 35%, rgba(0,255,255,1) 100%);
}

.bookmark-seal {
	position: absolute;
	display: flex;
	color:  aqua;
	width: auto;
	height: auto;
	border: 0;
	margin: 0;
	padding: 0;
	margin-left: 1%;
/*	visibility: hidden; */
}

.brighthue {
    filter: brightness(var(--btn)) hue-rotate(var(--hue));
}