@charset "utf-8";
/* CSS Document */
/*Schriften*/
		
	@font-face {
  		font-family: "Amarante";
  		src: 	url("font/Amarante-Regular.woff2") format("woff2"),
       			url("font/Amarante-Regular.woff") format("woff"),
       			url("font/Amarante-Regular.ttf") format("truetype");
  		font-display: swap;
}

	@font-face {
  		font-family: "Cormorant";
  		src: 	url("font/Cormorant-VariableFont_wght.woff2") format("woff2"),
       			url("font/Cormorant-VariableFont_wght.woff") format("woff"),
       			url("font/Cormorant-VariableFont_wght.ttf") format("truetype");
  		font-weight: 100 900; /* weil variable Font */
  		font-style: normal;
  		font-display: swap;
}
/*CSS*/
		
/*Page Grundlegend*/
	:root {
			--bg80: rgba(33,39,52,0.80);
			--bg100: rgba(33,39,52,1.00);
			--schrift1: rgba(205,197,186,1.00);
			--input80: rgba(48,40,49,0.80);
			--input100: rgba(48,40,49,1.00);
			--hervorhebung: rgba(238,155,58,1.00);
			--darksouls80: rgba(82,0,2,0.70);
			--darksouls: rgba(82,0,2,1.00);	
			--schwarz20: rgba(0,0,0,0.2);
			--schwarz30: rgba(0,0,0,0.3);
			--schwarz50: rgba(0,0,0,0.5);
			--schwarz80: rgba(0,0,0,0.8);
			--schwarz100: rgba(0,0,0,1.0);
		
		}		

		img { 
			max-width: 100%;
			height: auto;
			box-sizing:border-box;
			}
		*	{
			margin: 0; 
			padding: 0;
			box-sizing: border-box;
		}
		picture {
			text-align: center;
		}
		picture img {
			border-radius: 10px;
		}
/*
		html {
			font: 1.2rem Arial, sans-serif;
		}
*/
		body {
			counter-reset: nummerierung;
			background-image: url("img/forest1.jpg");
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			background-attachment:fixed;
			height: 100vh;
			font-family: "Amarante", Arial, sans-serif;
			overflow-x: hidden; /* nur horizontales Abschneiden */
  			overflow-y: auto;   /* vertikales Scrollen erlauben */
			padding-bottom: 150px;
			transition: 1s;
			font-size: 1rem;
			
			
		}
		
		h1, h2, h3 {
			font-family: amarante;
			color: var(--schrift1);
			
			font-weight: bold;
			text-align: center;
			
			padding: 10px;

			
		}
		h1 {
			font-size: 2rem;
			background:var(--bg80);
			border-bottom:  solid 1px var(--schrift1);
			height: 60px;
		}
		h2 {
			font-size: 1.5rem;
		
		}
		h3 {font-size: 1.2rem;}
		ul {
			list-style-type: none;
			Padding: 10px 15px;
			line-height: 1.5rem;
		}
		
		footer {
			display:flex;
			background: var(--bg80);
			color: var(--schrift1);
			font-size: 0.8rem;
			height: 30px;
			justify-content: space-between;
			padding: 5px 10px;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index:200;
		}
		footer a {
			text-decoration: none;
			color: #cdc5ba;
		}
@media (min-width: 768px) {
	body {font-size: 1.2rem;}
	
		h1 {
			font-size: 3rem;
			
			height: 80px;
		}
		h2 {
			font-size: 2rem;
		
		}
		h3 {font-size: 1.5rem;
	}
		ul {Padding: 10px 20px;	}
		footer {padding: 5px 150px;}	
		}

@media (min-width: 1200px) {
		h1 {
			font-size: 4rem;
			
			height: 100px;
		}
		h2 {
			font-size: 2.5rem;
		
		}
		h3 {font-size: 2rem;}
		ul {Padding: 10px 35px;	}
		footer {padding: 5px 200px;}
		
	
}
/*Grundlegende Klassen*/
		.layout {
			position: absolute;
			top: 60px;
			left: -100vw;
			opacity: 100%;
			transition: 0.5s;

		}
		
		.layout > div{
			width: 95vw;
			color:var(--schrift1);	
			margin: 2% auto;
			background:var(--bg80);
			padding: 0.5% 2% 2% 2%;
			border-radius: 10px;
		}
		.layout2 {
			position: absolute;
			top: 100px;
			left: -100vw;
			opacity: 100%;
			transition: 0.5s;
			width: 95vw;
			
			margin: 2% auto;
			background:var(--bg80);
			border: 2px solid var(--schrift1);
			border-radius: 10px;
			color: var(--schrift1);
		}

		.layout2 img {
/*			max-width: 50%;*/
/*			margin: 2%;*/
			border: 1px solid var(--schrift1);
			border-radius: 10px;
			
		}		

		.inputcontainer {
/*			margin: 2%;*/
			border: 1px solid var(--schrift1);
			border-radius: 10px;
			padding: 2%;
			color: var(--schrift1);
			background-color: var(--input80);
		}
		.inputcontainer h3 {
			font-size: 1.4rem;
			font-family: "Cormorant", serif;
			color: var(--schwarz50);
			text-align: left;
		}
		
		.borderbox	{
			border: 2px solid var(--schrift1);
			border-radius: 10px;
			padding: 4%;
			margin-top: 2%;
		}	
		.layout .borderbox {
			
			text-align: center;	
			padding: 2%;
			overflow: hidden;
		}
		
		.mittig {
			align-content: center;
/*			margin: 0 auto;*/
			display: block;
		}
		.button1 {
			display:block;
			margin: 10px auto;
			background: var(--bg80);
			font-family: "Amarante", Arial, sans-serif;
			color: var(--schrift1);
			height: 3rem;
			font-size: 1.5rem;
			box-shadow: -1px -1px 10px var(--schrift1), 1px 1px 10px var(--schrift1);
			border-radius: 10px;
			transition: 0.5s;
			
			
		}
		.button1:hover {
			background: var(--bg100);
			box-shadow: -1px -1px 50px var(--schrift1), 1px 1px 50px var(--schrift1), inset 5px 5px 10px var(--schwarz50);
			cursor: pointer;
		}
		.button2 {
			
			margin: 10px auto;
			background: var(--input80);
			height: 2.5rem;
			font-size: 1.2rem;
			font-family: "Amarante", Arial, sans-serif;
			box-shadow: -1px -1px 10px var(--schrift1), 1px 1px 10px var(--schrift1);
			border-radius: 10px;
			color: var(--schrift1);
			transition: 0.5s;
			padding: 0 10px;
			
			
		}
		.button2:hover {
			background: var(--input100);
			box-shadow: -1px -1px 30px var(--schrift1), 1px 1px 30px var(--schrift1), inset 5px 5px 10px var(--schwarz50);
			cursor: pointer;
			
		}
		.button3 {
			
			margin: 10px auto;
			background: var(--darksouls80);
/*			height: 2rem;*/
			font-size: 1.0rem;
			font-family: amarante;
			box-shadow: -1px -1px 10px var(--schrift1), 1px 1px 10px var(--schrift1);
			border-radius: 10px;
			color: var(--schrift1);
			border: 1px solid black;
			transition: 0.5s;
			padding: 0 10px;
			
			
		}
		.button3:hover {
			background: var(--darksouls);
			box-shadow: -1px -1px 30px black, 1px 1px 30px black, inset 5px 5px 10px var(--schwarz50);
			cursor: pointer;
			
		}

		.bildbutton {
			
/*			margin: 10 auto;*/
			background: none;
			height: auto;
			box-shadow: -1px -1px 10px var(--schrift1), 1px 1px 10px var(--schrift1);
			border-radius: 10px;
			border: 1px solid black;
			transition: 0.5s;
		
		}
		.bildbutton:hover {
			background: var(--darksouls);
			box-shadow: -1px -1px 30px black, 1px 1px 30px black, inset 5px 5px 10px var(--schwarz50);
			cursor: pointer;
			
		}
.bildbutton ~ p {text-align: center;}
		#start4 .bildbutton ~ p {
			display:none;
		}
		.displaynone {
			display:none !important;
		}

@media (min-width: 768px) {
	.layout {top: 80px;}
	.layout > div {width: 70vw;}
	.layout2 {width: 70vw;}
	
	.button1 {
			height: 4rem;
			font-size: 2.5rem;
		}
	.button2 {	
			height: 3rem;
			font-size: 1.5rem;
		}
	.bildbutton ~ p {font-size: 1.5rem}	
			
}

@media (min-width: 1200px) {
	.layout {top: 100px;}
	.button1 {
			height: 6rem;
			font-size: 4rem;
	}
	.button2 {	
			height: 4rem;
			font-size: 2rem;
		}
	#start4 .bildbutton ~ p {
			display:block;
			font-size: 1rem;	
		}
	.bildbutton ~ p {font-size: 1.8rem}	
}
/*ein und ausblenden der Sections*/

		#start.unsichtbar, 
		#start2.unsichtbar,
		#start3.unsichtbar,
		#start4.unsichtbar,
		#start5.unsichtbar,
		#start6.unsichtbar{

		opacity: 0%;
		transition: 1s;
		}

		#start.viewport, 
		#start2.viewport,
		#start3.viewport,
		#start4.viewport,
		#start5.viewport,
		#start6.viewport,
		#gamewin.viewport,
		#gameover.viewport{

			transition: 2s;
			top: 60px;
			left: 1vw;
		}

@media (min-width: 768px) {
	#start.viewport, 
		#start2.viewport,
		#start3.viewport,
		#start4.viewport,
		#start5.viewport,
		#start6.viewport,
		#gamewin.viewport,
		#gameover.viewport{

			
			top: 80px;
			left: 15vw;
		}
}
	@media (min-width: 1200px) {
		#start.viewport, 
		#start2.viewport,
		#start3.viewport,
		#start4.viewport,
		#start5.viewport,
		#start6.viewport,
		#gamewin.viewport,
		#gameover.viewport{

			
			top: 100px;
			
		}
}	
/*Sections chronologisch*/
		#start {
			opacity: 100%;
			transition: 1s;
			top: 60px;
			left: 1vw;
		}
		
		#alert {
			font-size: 1.2rem;

		}

		#ichbinbereit {
			width: 50%;
		}
	


		#start2 input {
			background: var(--input80);
			width: 40%;
			height: 2.5rem;
			text-align: center;
			color: var(--schrift1);
			font-size: 1.2rem;
			padding: 5px;
			border-radius: 10px;
			border: solid 1px var(--schrift1);
			box-shadow: -10px -10px -50px black, 10px 10px -50px black;
			box-shadow: inset 5px 5px 10px var(--schwarz50);
		}
		#start2 .button2 {
			width: 25%;
			margin-left: 20px;
	
		}
		.klassenwahl {
			border: solid 1px var(--schrift1);
			border-radius: 10px;
			box-shadow: -10px -10px 50px black, 10px 10px 50px black;
			
		}
		.klassenwahl:hover {
/*			border: solid 5px var(--schrift1);*/
			outline: solid 5px var(--schrift1);
			cursor: pointer;
		}
		#start3 > div:first-child {
			text-align: center;
		}
	
		#start3 input[type="radio"] {
			display: none;
		}
		#krieger, #Jäger, #Magier, #Bollwerk {
			padding: 0;
			justify-content: center;
			text-align: left;
			display: flex;
			flex-direction: column-reverse;
			max-height: 0;
			width: 100%;
			visibility: hidden;
			opacity: 0%;
			transition: 1s ease;
			overflow: hidden;
			
		}

		#krieger picture,
		#Jäger picture,
		#Magier picture,
		#Bollwerk picture {
			padding: 0;
			margin: 2% 0 2% 5%;
			width: 90%;
			height: auto;
			justify-content: right;
			object-fit: cover;
			border-radius: 10px;			
		}
		#krieger img,
		#Jäger img,
		#Magier img,
		#Bollwerk img {
			border: solid 1px var(--schrift1);}

		#check_krieger:checked ~ #Krieger,
		#check_jäger:checked ~ #Jäger,
		#check_magier:checked ~ #Magier,
		#check_bollwerk:checked ~ #Bollwerk{

			max-height: 2000px;
		
			visibility: visible;
			opacity: 100%; 
			padding: 2%;
		}

		#check_krieger:checked ~ .flex4 label[for="check_krieger"] img,
		#check_jäger:checked ~ .flex4 label[for="check_jäger"] img,
		#check_magier:checked ~ .flex4 label[for="check_magier"] img,
		#check_bollwerk:checked ~ .flex4 label[for="check_bollwerk"] img
{ 
			box-shadow: -10px -10px 40px var(--schrift1), 10px 10px 40px var(--schrift1); 
		}


		#start3 ul {
			margin: 25px 2% 40px;
		}
		.statuswert {
			height: 10px;
			width: 10px;
			border: 1px solid rgba(65, 143, 62, 0.62);
			display: inline-block;
			margin: 3px;
			transform: translateY(3px);
			border-radius: 10px;
			background-color: rgb(158, 188, 49);
			box-shadow: -1px -1px 5px var(--schrift1), 1px 1px 5px var(--schrift1), inset 4px 4px 3px var(--schwarz50);
		}
		#start3 span {
			width: 140px;
			display: inline-block;
			font-weight: bold;
			font-size: 1.1rem;
		}
		.kampftext {
		  	white-space: pre-line;
		}
		.gegnertext {
		  	white-space: pre-line;
		}
		.gegnerimg {
			width: 279px;
			min-width: 279px;
			max-width: 279px;
			height: auto;
			
	
}
		.gegnerlebenbox {
		    width: 70%;
			height: 15px;
			border: 1px solid black;
			border-radius: 10px;
			background: var(--input100);
			margin: 0 auto;
			position: relative;
			z-index: 104;
			overflow: hidden;
		}

		.gegnerleben {
			height: 100%;
			width: 100%;           /* JS überschreibt diesen Wert */
			background: var(--darksouls);
			transition: width 0.5s ease;  
			z-index: 103;
}
		.gegnertextbox {
	
		}
		
		.verursachterSchaden,
		.nahkampfzeit{
			background: var(--input80);
			border-radius: 10px;
			border: 1px solid black;
			box-shadow: inset 4px 4px 3px var(--schwarz50),inset -4px -4px 3px var(--schwarz50);
			display: inline;
			width: 40%;
			padding: 2%;
			margin: 2% auto;
			display:block;
			
		}
		.verursachterSchaden p,
		.nahkampfzeit p{
			display: inline;
		}
		.randompos {
			position: fixed;
			top: 10vh;
			left: 50vw;
			z-index: 201;
		}

		.magie-grid {
			display: grid;
			grid-template-columns: 9fr 1fr;
			grid-template-rows: auto;
		}

		.magie-container {
			position: relative;
			width: 90%;
			height: 30px;
			border: 2px solid black;
			background: var(--input80);
			margin: auto;
			overflow: hidden;
			border-radius: 5px;
		}

		.magie-balken {
		  position: absolute;
		  top: 0;
		  left: 0;
		  height: 100%;
		  width: 0%;
		  background: linear-gradient(90deg,rgba(199, 87, 87, 1) 0%, rgba(219, 191, 64, 1) 100%);
/*		  background: linear-gradient(90deg,rgba(199, 87, 87, 1) 10%, rgba(219, 191, 64, 1) 45%, rgba(46, 125, 50, 1) 80%, rgba(4, 201, 14, 1) 100%);*/
			
		  cursor: pointer;
		  transition: width 0.05s linear;
		}
		.magie-stopp-button {
			
/*			margin: 10 auto;*/
			background: none;
			height: auto;
/*			box-shadow: -1px -1px 10px var(--schrift1), 1px 1px 10px var(--schrift1);*/
			border-radius: 50%;
			overflow: hidden;
			border: 1px solid black;
			cursor: pointer;
			
		}
		.magie-stopp-button img {
			border-radius: 50%;
    		display: block; 
    		width: 110%;
    		height: 110%;
			

}
		.magie_animation {
			box-shadow: -1px -1px 10px var(--schrift1), 1px 1px 10px var(--schrift1);
/*			Wird über js überschrieben*/
		}
		
		.fluchtErfButton button {
			width: 100%;
			background: var(--input80);
		}

		#belohnung-section {
		  position: fixed;
		  top: 20%;
		  left: 50%;
		  transform: translateX(-50%);
		  background: var(--schwarz90);
		  color: white;
		  padding: 20px;
		  border-radius: 10px;
		  text-align: center;
		  z-index: 1000;

}

		#belohnung-auswahl {
			margin: 10px;
			padding: 10px 20px;
			cursor: pointer;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: auto auto;
			}

		#belohnung-auswahl div{
			margin: 5%;
		}

		#Haendler-auswahl {
			margin: 10px;
			padding: 10px 20px;
			cursor: pointer;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: auto auto;
			}
		
		#Haendler-auswahl div {
			margin: 5%;
		}
		.belohnung-item {
			text-align: center;
		}


		#start6 {
			margin: 2% 0;
		}
		#Händlerbild {
			width: 80%; 
			border: 2px solid var(--schrift1);
			border-radius: 5px;
			display: block;
			margin: 10px auto;	
		}
		#start6 p {
			padding: 2% 7%;
		}
		.seelen {
	
			width: 8%;
			display: inline;
			border-radius: 10px;
  			height: auto;
  			object-fit: cover;
  			border: solid 1px var(--schrift1);
		}
		.seelenkosten::after{
			content: "  ";
		}
		.seelenkosten {
			font-siz: 0.8rem;
			font-style: italic;
			display: inline;
		}
		#Handlerfehler {
			color: var(--darksouls);
		}
		.Händlerdisable {
			filter: grayscale(100%);
		  	opacity: 0.6;
		  	pointer-events: none; /* blockiert Klicks */
		  	cursor: default;
			transition: 1s;
		}
		@media (min-width: 768px) {
			#start {top: 80px;
					left: 15vw;
				}
			#alert {font-size: 1.7rem;}

			#start2 input {	
					height: 3rem;
					font-size: 1.5rem;
				}
			.statuswert {
					height: 10px;
					width: 25px;
					margin: 4px;
					transform: translateY(5px);
				}
			#start3 span {width: 110px;}
			#start3 ul {padding: 10px;}
		}
@media (min-width: 1200px) {
	#start {top: 100px;	}
	#alert {font-size: 2rem;}
	#start2 input {	
			height: 4rem;
			font-size: 2rem;
		}
	#krieger, #Jäger, #Magier, #Bollwerk {	flex-direction: row;}

		
#krieger picture, #Jäger picture, #Magier picture, #Bollwerk picture {
	width: 40%;}
	.statuswert {
			height: 13px;
			width: 28px;
			margin: 4px;
			transform: translateY(7px);
		}
	
	#start3 ul {padding: 10px 20px;}


		.gegnerimg {
			width: 372px;
			min-width: 372px;
			max-width: 372px;
}
	}
	
@media (min-width: 1600px) {
	.statuswert {
			height: 15px;
			width: 40px;
			margin: 5px;
			transform: translateY(8px);
		}
	#start3 span {width: 140px;}
	#start3 ul {padding: 10px 35px;}
}
/*Animationen im Gameverhalten */

		.animation_red {
			background: red;
	}

		.bildshake {
			display: inline-block; /* wichtig, damit transform wirkt */
			animation: shake 0.5s ease-in-out;
	}
/*Gamewinscreen */
#gamewin > .zweispalter50 {
	flex-direction: column;
}
#gamewin {
			position:fixed;
			top:10%;
			
			left:15%;
			right:15%;
			max-height: 80vh;
			background: var(--bg80);
			color: var(--schrift1);
			border: 2px solid var(--schrift1);
			border-radius: 10px;
		/*	visibility: hidden;          
    		opacity: 0;*/
			transition: background 10s ease;
	overflow-y: auto;
			z-index: 201; 
			
}
#gamewin img {
	border: 1px solid var(--schrift1);
	margin: 10px;
	
}
#gamewin picture {
	flex:3;
}
#gamewin .zweispalter50 > div {
	margin: 20px;
	flex: 7;
	width: auto;
	
}
#gamewin p {
	margin: 20px;
	
}

/*Gameoverscreen*/
		#gameover {
			position:fixed;
			top:0;
			bottom:0;
			left:0;
			right:0;
			background: var(--schwarz20);
			visibility: hidden;          
    		opacity: 0;
			transition: background 10s ease;
			z-index: 199; 
		}
		#gameover h2 {
			font-family: "Cormorant", serif;
			color: var(--darksouls);
			width: 100%;
			font-size: 4rem;
			font-weight: lighter;
			line-height: 7rem;
			background: linear-gradient(90deg,rgba(0, 0, 0, 0.2) 10%, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0.8) 80%, rgba(0, 0, 0, 0.2) 100%);
			margin-top: 18vh;
		}
		#gameover p{
			font-family: "Cormorant", serif;
			color: var(--darksouls);
			font-size: 2rem;
			font-weight: lighter;
			background: linear-gradient(90deg,rgba(0, 0, 0, 0.0) 10%, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0.8) 80%, rgba(0, 0, 0, 0.0) 100%);
			margin-top: 10vh;
			text-align: center;
			opacity: 0;
			transition-delay: 6s;
			transition: 4s;
		}
		#gameover button{
			
			background-color: var(--schwarz100);
			border: solid 2px black;
			box-shadow: -1px -1px 10px var(--darksouls), 1px 1px 10px var(--darksouls);
			margin-top: 2vh;
			padding: 0 10px;
			opacity: 0;
			transition-delay: 20s;
			transition: 4s;
		}	

		#gameover button:hover {
			
			box-shadow: -1px -1px 50px var(--darksouls), 1px 1px 50px var(--darksouls), inset 5px 5px 10px var(--schwarz50);
			
		}
		#gameover a {
			font-family: "Cormorant", serif;
			text-decoration: none;
			color: var(--schrift1);
			
		}
		
		#gameover.gameoverani {

			background: var(--schwarz80);
			visibility: visible;         
			opacity: 1;
		}
		#gameover.gameoverani h2{
			opacity: 1;
			animation: g_wachsen1 10s forwards, g_pulsieren1 10s ease-in-out infinite 10s;

		}
		#gameover.gameoverani p {
			animation: g_erscheinen 8s forwards;
		}
		#gameover.gameoverani button{
			animation: g_erscheinen 15s forwards;
		}
		
@media (min-width: 768px) {	
		#gamewin > .zweispalter50 {
	flex-direction: row;
}
		#gameover h2 {
			font-size: 6rem;
			line-height: 10rem;
			margin-top: 20vh;
		}
		#gameover.gameoverani h2{animation: g_wachsen2 10s forwards, g_pulsieren2 10s ease-in-out infinite 10s;	}
}
@media (min-width: 1200px) {	
		#gameover h2 {
			font-size: 8rem;
			line-height: 15rem;
			margin-top: 25vh;
		}
		#gameover.gameoverani h2{animation: g_wachsen3 10s forwards, g_pulsieren3 10s ease-in-out infinite 10s;	}
}

		/*Seitenleisten*/
				
		#aside_opener {
			position: fixed;
			top: 50vh;
			left: -2px;
			background-color: var(--input80);
			color: var(--schrift1);
			border-bottom-right-radius: 60px;
			border-top-right-radius: 60px;
			border: solid 2px var(--schrift1);
			width: 30px;
			height: 60px;
			transition: 1s;
			z-index: 102;
			cursor: pointer;  


		}		

		#aside_opener aside {
			position: fixed;
			top: -51vh;
			bottom: -1; /*	-1/-51 da sonst ein Rand entehen würde, Aside ist an anderes Objekt geknüpft welches einen Rand hat,daher die umgehungslösung*/
			left:0;
			min-width: 100vw;
			min-height: 100vh;
			background-color: var(--input80);
			color: var(--schrift1);
			border-right: solid 3px var(--schrift1);
			transform: translateX(-100vw);
			transition: 1s;
			z-index: 101;
			overflow-y: auto;
			overflow-x: hidden;
			max-height: 100vh;
		}

		
		#aside_opener:hover {
			curser: pointer;
			box-shadow:  10px 0px 30px var(--schrift1);
		}
		#aside_opener:hover  aside{
			box-shadow: -1px -1px 30px var(--schrift1), 1px 1px 30px var(--schrift1);
		}
		#aside_checker {
			display:none;
		}
		#aside_checker:checked ~ aside {
			transform: translateX(0vw);
		}
		#aside_checker:checked ~  #aside_opener {
			transform: translateX(100vw);
		}

		/*Inventar*/

		/* Button/Opener */
		#inventar_opener {
		  position: fixed;
		  top: 50vh;
		  right: -2px;
		  background-color: var(--input80);
		  color: var(--schrift1);
		  border-bottom-left-radius: 60px;
		  border-top-left-radius: 60px;
		  border: solid 2px var(--schrift1);
		  width: 30px;
		  height: 60px;
		  transition: 1s;
		  z-index: 102;
		  cursor: pointer;  
		}

		
		#inventar_opener aside {
		  position: fixed;
		  top: -51vh;
		  right: 0;
		  width: 100vw;                  
		  height: 100vh;
		  background-color: var(--input80);
		  color: var(--schrift1);
		  border-left: solid 3px var(--schrift1);
		  transform: translateX(100%);  
		  transition: transform 0.8s ease;
		  z-index: 101;
		  overflow-y: auto;
		  overflow-x: hidden;
		}
		#inventar_checker {
			display:none;}
		/* Effekt, wenn die Checkbox aktiv ist */
/*
		#inventar_checker:checked ~ #inventar_opener aside {
			transform: translateX(0);     
			transform: translateY(-50vh);
		}
*/
		#inventar_checker:checked + #inventar_opener{
		  transform: translateX(-100vw);     
		
		}

		/* Hover-Effekt auf den Button */
		#inventar_opener:hover {
		  box-shadow: 10px 0px 30px var(--schrift1);
		}

		#inventar_opener:hover aside {
		  box-shadow: -1px -1px 30px var(--schrift1), 1px 1px 30px var(--schrift1);
		}
		aside h2 {
			text-decoration: underline;
			font-size: 3rem;
			line-height: 5rem;
		
		}
		aside h3 {
			font-size: 2rem;;
			padding: 0px;

		}
		.lebensbox {
			width: 80vw;        
			height: 30px;
			border: 2px solid var(--schrift1);
			border-radius: 10px;
			background: var(--input100);
			margin: 0 auto;
			position: relative;
			z-index: 104;
			overflow: hidden;
		}

		.lebenspunkte {
			height: 100%;
			width: 100%;           /* JS überschreibt diesen Wert */
			background: limegreen;
			transition: width 0.5s ease;  
			z-index: 103;
}
		#a_lebenspunkte {
			color: lightgreen;
			text-align: right;
			margin: 0 10vw;
			display:block;
}

		.a_werte {
			font-size: 5rem;;
			text-align: center;
			padding: 0 50px;
			
			
		}

		aside .playername {
			font-size: 2.2rem;
			font-weight: bold;
			margin: 0 10px;
			text-align: center;
			
		}
		aside #w_klasse {
			text-align: center;
			font-size: 1.7rem;
		}
		aside img {
			border-radius: 10px;
			height: auto;
			object-fit: cover;
			border: solid 1px var(--schrift1);
			max-height: 100px;
			max-width: 100px;
			
		}
		aside .borderbox {
			background: var(--schwarz30);
			margin:0 10%;
			padding: 2%;
		}		
		aside .borderbox:hover {
					background: var(--bg100);
				}
		aside .zweispalter50 {
			max-height: 150px;
			justify-content: center;
			
		}
.inventar {
  display: flex;
  flex-direction: column;
  height: 100vh;            /* oder: min-height: 100vh / 100% je nach Layout */
  box-sizing: border-box;
  padding: 1rem;
}

/* optional: Abstand unter der Überschrift */
.inventar > h2 {
  margin: 0 0 1rem 0;
}

/* schiebe #seelenposition ganz nach unten */
#seelenposition {
  margin-top: auto;         /* schiebt dieses Element an den unteren Rand */
  border-top: 1px solid var(--schrift1);
  padding: 10px;
}
#seelenposition h3, #seelenposition p {
	font-size: 5vw;
	
}
#seelenposition img {
	height: 8vw;
	width: 8vw;
}
.inventar .borderbox {
	margin: 8px 0;
/*	position: relative;*/
}
.inventar .zweispalter50 {
	justify-content: space-between;
	min-height: 65px;
	align-items: center;
	 text-align: center;
}

.inventar h3 {
	font-size: 4vw;
	align-items: center;
	  text-align: center;
	
}
.inventar .zweispalter50 img {
		height: 63px;
		width: 63px;
}
.inventar .tooltip {

	max-height: 0;
	overflow: hidden;
	opacity: 0;

	transition: 0.5s;
	transition-delay: 1s;
	
}
.inventar .borderbox:hover .tooltip {

	max-height: 500px;
	opacity: 100;
}

@media (min-width: 768px) {	

		#aside_opener aside {
			width: 13vw;
			min-width: 13vw;
			transform: translateX(-13vw);
		}
		#aside_checker:checked ~  #aside_opener {
			transform: translateX(13vw);
		}
		#inventar_opener aside {
			width: 13vw;
			min-width: 13vw;
			transform: translateX(13vw);
		}
		#inventar_checker:checked ~  #inventar_opener {
			transform: translateX(-13vw);
		}
		aside h2 {
			font-size: clamp(1rem, 2.0vw, 2.2rem);
			max-width: 12.5vw;
}
		aside h3 { font-size:1.5vw;}
		.lebensbox {
		width: 11vw; 
		margin: 0 1vw;
	}
		#a_lebenspunkte {margin: 0 1vw;}
		aside .playername {
			font-size: 1.5rem;			
		}
		aside #w_klasse {
			text-align: right;
			padding: 0 1vw 0 0;
			font-size: 1rem;
		}
		.a_werte {
			font-size: 3.2vw;
			height: 3.5vw;
			width: 3.5vw;
			padding: 0;
			
		}
		aside .zweispalter50 img {
			max-height: auto;
			max-width: auto;
			margin-left: 0;
			justify-content:space-between;
	}
		aside img {
			width: 40%;
			height: auto;			
			max-height: auto;
			max-width: auto;
		
		}
		aside .borderbox {
			background: var(--schwarz30);
			margin:0;
		}		
	#seelenposition h3, #seelenposition p {
		font-size: 1.5vw;
	
}
		#seelenposition img {
			height: 1.5vw;
			width: 1.5vw;
}
	.inventar .zweispalter50 {
	display:block;
}
.inventar h3 {
	font-size: 1.2vw;
	
	
}
	
}
@media (min-width: 1200px) {
		.inventar .zweispalter50 {
	display:flex;
}
	.inventar h3 {
	font-size: 1vw;
	
	
}
	
}

/*Spalterei*/
		
		.zweispalter50,
		.zweispalterBox{
			display: flex;
			justify-content: space-between;
		}
		.Gridspalterbild {grid-area: img1;}
		.Gridspaltertextbox {grid-area: txt1;}
		.Gridspalteraktionen {grid-area: box1;}


		.gridspalter {
			padding: 2%;
			display: grid;
			gap: 10px;
			margin-bottom: 2%;
		
			grid-template-columns: 1fr;
			grid-template-rows: auto auto auto;
			grid-template-areas: 
				"txt1"
				"img1"
				"box1"
				
				
		}
		
		.gridspalter > div {
			margin: 2%;
			
			justify-self: center;
			
		}
	
		.zweispalterBox{
			padding: 2%;
		}
		
		.aktionflex {
			display:flex;
			justify-content: space-between;
			padding-bottom: 2%;
		}
		.aktionflex > div {
			width: 15%;
			display: flex;
			flex-direction: column;
		
			
		}
		
		.flex4 {
			display: flex;
			justify-content: space-between;
			padding: 2%;
		}

		.flex4 figure img {
			width: 80%;
		}
		.flex4 figure figcaption {
			display: none;
		}

		.flexhorizontal {

			display: flex;
			
			flex-direction: column;
			justify-content: space-between;
			max-height: 80vh;
/*			overflow: auto;*/
			gap: 0.5vw;
			padding: 1vw;
			
			
		}
@media (min-width: 768px) {
		
}
@media (min-width: 900px) {
		.aktionflex > div {width: 19%;	}
		.gridspalter {
			grid-template-columns: 1fr 1fr;
			grid-template-rows: auto auto;
			grid-template-areas: 
				"img1 txt1"
				"box1 box1"
		}
}
	@media (min-width: 1200px) {
		.zweispalter50 > div {
			width: 49%;
		}
		.aktionflex > div {width: 15%;	}
			.gridspalter {
			grid-template-columns: 3fr 7fr;
			grid-template-rows: auto auto;
			grid-template-areas: 
				"img1 txt1"
				"img1 box1"
		}
}	
	

/*Zusatzseiten Impressum Datenschutz Kontakt*/

		.backend {
			max-width: 70vw;
			color:var(--schrift1);	
			margin: 2% auto;
			
		}
		
		.backend > div {
			background:var(--bg80);
			margin: 2% 0;
			padding: 0 0 10px;
			border-radius: 10px;
			
		}
		.backend h2 {
			background:var(--bg100);
			border-bottom:  solid 1px var(--schrift1);
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
		}
		.backend p {
			padding: 10px;
		}
	
		.backend a {
			color:var(--schrift1);
		}
		.footerabstand {
			min-height: 50px;
			
			
		}
		
		.backend h2::before {
			counter-increment: nummerierung;
			content: " "counter(nummerierung)". ";
		}
		.backend .zweispalter50 {
		flex-direction: column;
}		

@media (min-width: 1200px) {
		.backend .zweispalter50 {
			flex-direction: row;
}		

}


/*---------Kontaktformular------------------*/
		#kontakt {
			padding: 4%;
		}
		
		#kontakt input, #kontakt textarea {
			background: var(--input80);
			width: 80%;
			color: var(--schrift1);
			font-size: 1rem;
			padding: 5px;
			border-radius: 10px;
			border: solid 1px var(--schrift1);
			box-shadow: -10px -10px -50px black, 10px 10px -50px black;
			box-shadow: inset 5px 5px 10px var(--schwarz50);
		}

		#kontakt p {
			font-size: 1rem;
			padding: 4% 0 1%;
		}
	
		#error_msg { color: red; margin-bottom: 10px; white-space: pre-line; }		

		#kontakt .flex5-95 {
			display: flex;
		}

		#kontakt .flex5-95 div:first-child {
			align-content: center;
			padding: 10px;
		}

		#kontakt .flex5-95 div:last-child {
			padding: 10px;
			margin: 10px;
			width: 100%;
		}

		#kontakt .flex5-95 input {
			width: 35px;
			height: 35px;
			max-width: 50px;;
		}

		#kontakt .flex5-95 p {
			font-size: 1.3rem ;
		}

		#kontakt img {
			display:block;
			margin: auto;	
		}
		#kontakt input[type="submit"].button {
			width: 100%;
			background: var(--bg80);
			height: 4rem;
			font-size: 2.5rem;
			font-family: amarante;
			box-shadow: -10px -10px 15px black, 10px 10px 15px black;
			
			
		}
		#kontakt input[type="submit"].button:hover {
			background: var(--bg100);
			box-shadow: -10px -10px 25px black, 10px 10px 25px black,inset 5px 5px 10px var(--schwarz50);
			cursor: pointer;
		}
	@media (min-width: 768px) {
		#kontakt p {font-size: 1.5rem;}
	}
	@media (min-width: 1200px) {
			#kontakt p {font-size: 2rem;}
		}
/* Animationen */
		.glow-frame {
		  animation: glow 2s ease-in-out forwards;
		}
		@keyframes glow {
		  0% {
			box-shadow: 0 0 0px var(--schrift1);
			border: 2px solid var(--schrift1);
			filter: drop-shadow(0 0 0 yellow);  
		  }
		  50% {
			box-shadow: 0 0 20px var(--schrift1);
			border: 10px solid var(--schrift1);
			filter: drop-shadow(0 0 20px yellow);  
		  }
		  100% {
			box-shadow: 0 0 0px var(--schrift1);
			border: 2px solid var(--schrift1);
			filter: drop-shadow(0 0 0 yellow);  
		  }
		}
		@keyframes g_wachsen1 {
			0% 	{font-size: 4rem;}
			50%	{opacity: 1;font-size: 6rem;}
		/*	60%	{}*/
			100%{opacity: 0.7;font-size: 6.5rem;}

			}
		@keyframes g_wachsen2 {
			0% 	{font-size: 6rem;}
			50%	{opacity: 1;font-size: 9rem;}
		/*	60%	{}*/
			100%{opacity: 0.7;font-size: 10rem;}

			}
		@keyframes g_wachsen3 {
			0% 	{font-size: 8rem;}
			50%	{opacity: 1;font-size: 12rem;}
		/*	60%	{}*/
			100%{opacity: 0.7;font-size: 13rem;}

			}
		@keyframes g_erscheinen {
			0% {opacity: 0;}
			50% {opacity: 0;}
			100% {opacity: 1;}
		}
		@keyframes g_pulsieren1 {
			0% {font-size: 6.5rem;}
			50% {font-size: 6rem;}
			100% {font-size: 6.5rem;}
		}
		@keyframes g_pulsieren2 {
			0% {font-size: 10rem;}
			50% {font-size: 9rem;}
			100% {font-size: 10rem;}
		}
		@keyframes g_pulsieren3 {
			0% {font-size: 13rem;}
			50% {font-size: 12rem;}
			100% {font-size: 13rem;}
		}
		@keyframes shake {
		  	0% { transform: translate(0, 0); }
		  	20% { transform: translate(-50px, 0); }
		 	40% { transform: translate(50px, 0); }
		  	60% { transform: translate(-50px, 0); }
		  	80% { transform: translate(50px, 0); }
		  	100% { transform: translate(0, 0); }
		}