/* super allgemeiner scheiß*/
img{max-width:100%;}

body{ margin:0px; font-family: sans-serif;}
.hidden{ display:none;
}
.semihidden{opacity: 0.1; }

.warning{
	color: yellow;
	font-weight:bold;
	padding-left: 20px;
	position:relative;
}
.error{
	color: yellow;
	font-weight:bold;
	padding-left: 20px;
	position:relative;
}
.warning::before,.error::before{
	content: "!";
	display:inline-block;
	    font-size: 25px;
    position: absolute;
    left: 0;
    top: -5px;
}
	
}

/* bauprojekte */
.bauprojekte{
	width:100%;
	height: 400px;
	position:relative;
}
.bauprojekte .feld {
	position:relative;
	width:100px;
	float:left;
}

.bauprojekte img{
	max-width:100%;
}

.spielfeld{
	z-index:1;
	position: relative;
	height: 100vh;
	width: 100%;
	margin: 0px;
}
.vorschau_overlay{
	display:none;
	z-index:2;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	
}

.overlay_backlink{
	z-index:-1;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background-color: rgba(0,0,0,0.5);
}

.is_neighbouring{
	filter: invert();
}

/* - -- -- - -- --- - 
Vorschauoverlay
- - - -- - -- - -- - -
*/

.vorschau_overlay .overlay_content{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.vorschau_overlay .overlay_content .acard{
	font-size:40px;
	width: 500px;
	height: 750px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

.vorschau_overlay .acard h4{
	margin-bottom: 6px;
	line-height:1.1em;
}
.vorschau_overlay .acard p{
	border-top: 2px solid black;
	margin-top: 4px;
	padding-top: 11px;
	align-self: end;
}

.vorschau_overlay .overlay_content .acard .backsidecard{
	display:none;
}

.vorschau_overlay .overlay_content .acard .frontsidecard{
	
}

/* 
------------------------
spielvariablen
------------------------
*/

.spielvariablen{
	position:absolute;
	z-index:10;
	background-color:rgba(0,0,0,0.5);
	top:20px;
	right:20px;
	padding:20px;
	color:#ffffff;
}



/*
-------------------
Spielerzeugs 
-------------------
*/

/* spielerfeld */
.spielerfeld[data-activespieler="active"]{
	display:block;
}
.spielerfeld[data-activespieler="inactive"]{
	display:none;
}
.spielerdetails{
	position:absolute;
	background-color:rgba(0,0,0,0.5);
	top:20px;
	left:20px;
	padding:20px;
	z-index:10;
}

.spielerfeld .felder::before{
	position:absolute;
	top:-30px;
	left:0;
	font-weight:bold;
	padding:4px 20px;
	min-width: 200px;
	width:calc(100% - 40px);
	color:#ffffff;
	background-color:rgba(0,0,0,0.5);
	content:"gezogene Felder:";
	display:block;
}
.spielerfeld .felder div{width:100px; display: inline-block;}
.spielerfeld .felder{
	position:absolute;
	background-color:rgba(0,0,0,0.5);
	top:290px;
	left:20px;
	padding:20px;
	z-index:10;
}

/* spielerdetails */
.spielerdetails{
	color:#fff;
	font-weight:bold;
}

/* spieler Schulkomplex */
.schulkomplex{
	width:70%;
	height:400px;
	position:absolute;
	background-color:rgba(0,0,0,0.5);
	bottom:230px;
	left:50%;
	transform:translateX(-50%);
	z-index:10;
}

.feldwirdangelegt .schulkomplex{
	width: 100%;
	height: 100vh;
	top: 0;
	z-index: 20;
	background-color:rgba(0,0,0,0.8);
}

.feldwirdangelegt .schulkomplex .schulkomplexbacklink{
	position:absolute;
	width:100%;
	height:100%;
	background-color:transparent;
	content:'';
	display:block;
}


/* spielerbuttons */
.interactions{
	position:absolute;
	background-color:rgba(0,0,0,0.5);
	top:80px;
	left:20px;
	padding:20px;
	z-index:10;
}

.interactions .interactionbutton{
	padding:5px; background-color:green; color:white; cursor:pointer; margin-bottom:10px; display:block;
}
.interactions .interactionbutton:hover{
	background-color:blue;
}
.interactions .nextplayer{
	
}
.interactions .feldziehen{
	
}
.interactions .karteziehen{
}

/* kartenstapel */
.kartenstapel{
display: flex;
width: 100%;
position: absolute;
top: 5px;
align-items: center;
justify-content: center;
gap: 20px;
}
.kartenstapel .karten{
	width: 88px;
height: 132px;
	background-color: #0f0f0f;
	background-image: url(../karten/wizardcard_back_base.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position:relative;
}
.kartenstapel .karten.kartenTurnier{
	margin-right:40px;
	background-image: url(../karten/wizardcard_back_turnier.png);
}
.kartenstapel .karten.kartenAblage{
	margin-left:40px;
	background-image: url(../karten/wizardcard_trash.png);
}

.acard{
	width: 88px;
	height: 132px;
	background-color: #0f0f0f;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position:absolute;
	border-left:1px solid #444444;
	border-top:1px solid #535353;
	font-size: 13px;
	line-height:0.8em;
}
.acard:nth-child(even){
	border-left:1px solid #353535;
	border-top:1px solid #454545;
}
.acard:nth-child(3n+0){
	border-left:1px solid #666666;
	border-top:1px solid #777777;
}
.acard:nth-child(4n+0){
	border-left:1px solid #404040;
	border-top:1px solid #616161;
}
.kartenstapel .karten .acard+.acard{left:2px;top:2px;}	
.kartenstapel .karten .acard+.acard+.acard{left:3px;top:3px;}
.kartenstapel .karten .acard+.acard+.acard+.acard{left:4px;top:4px;}
.kartenstapel .karten .acard+.acard+.acard+.acard+.acard{left:5px;top:5px;}
.kartenstapel .karten .acard+.acard+.acard+.acard+.acard+.acard{left:6px;top:6px;}
.kartenstapel .karten .acard+.acard+.acard+.acard+.acard+.acard+.acard{left:7px;top:7px;}
.kartenstapel .karten .acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard{left:8px;top:8px;}
.kartenstapel .karten .acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard{left:9px;top:9px;}
.kartenstapel .karten .acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard{left:10px;top:10px;}
.kartenstapel .karten .acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard{left:11px;top:11px;}
.kartenstapel .karten .acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard{left:12px;top:12px;}
.kartenstapel .karten .acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard{left:13px;top:13px;}
.kartenstapel .karten .acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard{left:14px;top:14px;}
.kartenstapel .karten .acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard{left:15px;top:15px;}
.kartenstapel .karten .acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard{left:16px;top:16px;}
.kartenstapel .karten .acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard{left:17px;top:17px;}
.kartenstapel .karten .acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard{left:18px;top:18px;}
.kartenstapel .karten .acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard{left:19px;top:19px;}
.kartenstapel .karten .acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard{left:20px;top:20px;}
.kartenstapel .karten .acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard+.acard{left:21px;top:21px;}


.acard .frontsidecard, .acard .backsidecard{
	background-image: url(../karten/wizardcard_back_base.png);
	width:100%;
	height: 100%;
	background-color: #0f0f0f;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.acard.color-wettkampf .backsidecard{
	background-image: url(../karten/wizardcard_back_turnier.png);
}

.kartenstapel .karten .acard .frontsidecard{
	display:none;
}
.acard .backsidecard{
	position:absolute;
	top:0;
	left:0;
}
.acard.color-wettkampf .frontsidecard{
	background-color: #0f0f0f;
	background-image: url(../karten/punkte/wizardcard_gelb.png);
}
.acard.color-rot .frontsidecard{
	background-color: #0f0f0f;
	background-image: url(../karten/alchemie/wizardcard_rot.png);
}
.acard.color-blau .frontsidecard{
	background-color: #0f0f0f;
	background-image: url(../karten/elementarmagie/wizardcard_blau.png);
}
.acard.color-gruen .frontsidecard{
	background-color: #0f0f0f;
	background-image: url(../karten/golemantie/wizardcard_gruen.png);
}
.acard.color-schwarz .frontsidecard{
	background-color: #0f0f0f;
	background-image: url(../karten/schwarzmagie/wizardcard_schwarz.png);
}

/* kartencontent texte */

.acard h3{
	font-size: 0.6em;
	position: absolute;
	top: 7.9001%;
	padding-left: 16%;
	padding-right: 16%;
	font-size: 0.6em;
	text-align: left;
}
.cardcontent{
	display:grid;
	position: absolute;
	top: 19.9001%;
	padding-left: 16%;
	padding-right: 16%;
	height: 71%;
}
.acard h4{
	font-size: 0.6em;	
	text-align: left;
	margin-bottom: 0px;
	line-height:1.1em;
}
.acard p{
	font-size: 0.6em;
	text-align: left;
	border-top: 1px solid black;
	margin-top: 2px;
	padding-top: 1px;
	line-height:1.1em;
	align-self: end;
}

.kartenstapel .karten:hover, .kartenstapel .karten:focus{
	opacity:0.8;
	cursor:pointer;
}
.kartenstapel .karten::before{
	display:block;
	position:absolute;
	bottom:-34px;
}
.kartenstapel .karten.kartenTurnier::before{
	content:'Turnierkarten';
	
	
}
.kartenstapel .karten.kartenAlchemie::before{
content:'Alchemie';
}				
.kartenstapel .karten.kartenGolemmantie::before{
content:'Golemantie';
}
.kartenstapel .karten.kartenElementarmagie::before{
content:'Elementarmagie';
}
.kartenstapel .karten.kartenSchwarzmagie::before{
content:'Schwarzmagie';
}


/* Karten auf der Hand Handkarten Spielerkarten */
.spielerfeld .karten{
	width:100%;
	position:absolute;
	bottom:-10px;
	z-index:15;
	text-align: center;
	
}
.spielerfeld .karten .acard{
	width:150px;
	height:220px;
	position:relative;
	display: inline-block;
	transition: all 0.2s;
	top:0;
	cursor:pointer;
	margin-right: 3px;
margin-left: 3px;
}
.spielerfeld .karten .acard .backsidecard{
	display:none;
}
.spielerfeld .karten .acard:hover, .spielerfeld .karten .acard:focus{
	top:-30px;
}

/* karten ausspielen */

.docardcontainer{
	z-index: 1;
	position: absolute;
	left: -470px;
	font-size: 30px;
	max-width: 200px;
}

.docardcontainer .spielekarte{
	    padding: 15px;
    background-color: #999;
    border: 2px solid green;
    border-radius: 20px;
    cursor:pointer;
    text-align:center;

}
.docardcontainer .spielekarte:hover, .docardcontainer .spielekarte:focus{
	background-color: #efefef;
}

/* debugbereich new */
.debugbutton{background-color: #ccc; color:#000;padding:5px 10px; margin-bottom:5px;cursor:pointer;}
.debugbutton:hover{color: #ccc; background-color:#000;}

/* schulkomplex - angelegte Bauprojekte */
.schulkomplex .angelegtesFeld{width:100px; position:absolute;z-index:2;}
.schulkomplex .angelegtesFeld.clickableplaceholder{opacity:0.5; cursor:pointer;z-index:1;}
.schulkomplex .angelegtesFeld.clickableplaceholder:hover{opacity:1;z-index:3;}


.schulkomplex .angelegtesFeld[data-positiony="0"]{bottom:0;}
.schulkomplex .angelegtesFeld[data-positiony="1"]{bottom:85px;}
.schulkomplex .angelegtesFeld[data-positiony="2"]{bottom:170px;}
.schulkomplex .angelegtesFeld[data-positiony="3"]{bottom:255px;}
.schulkomplex .angelegtesFeld[data-positiony="4"]{bottom:340px;}
.schulkomplex .angelegtesFeld[data-positiony="5"]{bottom:425px;}
.schulkomplex .angelegtesFeld[data-positiony="6"]{bottom:510px;}
.schulkomplex .angelegtesFeld[data-positiony="7"]{bottom:595px;}
.schulkomplex .angelegtesFeld[data-positiony="8"]{bottom:680px;}
.schulkomplex .angelegtesFeld[data-positiony="9"]{bottom:765px;}
.schulkomplex .angelegtesFeld[data-positiony="10"]{bottom:850px;}

.schulkomplex .angelegtesFeld.evenY[data-positionx="0"]{left:100px;}
.schulkomplex .angelegtesFeld.evenY[data-positionx="1"]{left:200px;}
.schulkomplex .angelegtesFeld.evenY[data-positionx="2"]{left:300px;}
.schulkomplex .angelegtesFeld.evenY[data-positionx="3"]{left:400px;}
.schulkomplex .angelegtesFeld.evenY[data-positionx="4"]{left:500px;}
.schulkomplex .angelegtesFeld.evenY[data-positionx="5"]{left:600px;}
.schulkomplex .angelegtesFeld.evenY[data-positionx="6"]{left:700px;}
.schulkomplex .angelegtesFeld.evenY[data-positionx="7"]{left:800px;}
.schulkomplex .angelegtesFeld.evenY[data-positionx="8"]{left:900px;}
.schulkomplex .angelegtesFeld.evenY[data-positionx="9"]{left:1000px;}
.schulkomplex .angelegtesFeld.evenY[data-positionx="10"]{left:1100px;}

.schulkomplex .angelegtesFeld.oddY[data-positionx="0"]{left:50px;}
.schulkomplex .angelegtesFeld.oddY[data-positionx="1"]{left:150px;}
.schulkomplex .angelegtesFeld.oddY[data-positionx="2"]{left:250px;}
.schulkomplex .angelegtesFeld.oddY[data-positionx="3"]{left:350px;}
.schulkomplex .angelegtesFeld.oddY[data-positionx="4"]{left:450px;}
.schulkomplex .angelegtesFeld.oddY[data-positionx="5"]{left:550px;}
.schulkomplex .angelegtesFeld.oddY[data-positionx="6"]{left:650px;}
.schulkomplex .angelegtesFeld.oddY[data-positionx="7"]{left:750px;}
.schulkomplex .angelegtesFeld.oddY[data-positionx="8"]{left:850px;}
.schulkomplex .angelegtesFeld.oddY[data-positionx="9"]{left:950px;}
.schulkomplex .angelegtesFeld.oddY[data-positionx="10"]{left:1050px;}


#version{position:fixed; bottom:0;text-align: center; width: 100%; opacity: 0.5;}