.headlink{
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    display: block;
    text-align: center;
    background-color: var(--hintergrund1);
    text-transform: uppercase;
    z-index: 12;
    line-height: 110%;
    font-size: 16pt;
    padding: 10px;
    }

.headlink a{
 font-family: var(--font-headline1);
 font-size:16pt;
 color:var(--link1);
 display: inline-flex;
 width: 200px;
 padding: 10px;
 text-align: center;
 /* flex-direction: row; */
 align-items: center;
 justify-content: center;
 }

.headlink a:hover{
	font-family: var(--font-headline1);
	color:var(--link2);
}

/* Dropdown Button */
.dropbtn {
  background-color: var(--hintergrund1);
  color: var(--link1);
  font-family: var(--font-headline1);
  text-transform: uppercase;
  font-size: 17pt;
  border: none;
   width:200px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--hintergrund1);
  min-width: 160px;
  z-index: 1;  
  border-radius:1px;
}

/* Links inside the dropdown */
.dropdown-content a {
	font-size:17pt;
 color: var(--link1);
  text-decoration: none;
  display: block;
  border-radius:1px;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color:var(--link1);
color: var(--hintergrund1);
font-family: var(--font-headline1);
font-size:17pt;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
background-color: var(--hintergrund1);
color: var(--link1);
font-size:17pt;
font-family: var(--font-headline1);
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
width: 200px;
background-color:var(--hintergrund1);
color: var(--link1);
font-size:17pt;
font-family: var(--font-headline1);
}


.headtabbed{
	width: 1300px;
	height: 340px;
	/* border: 1px solid; */
	margin: 0px 0px 11px 0px;}

.headtabbed figure {
    display: block;
    margin: 0;
    border-bottom: 1px solid var(--hintergrund1);
    clear: both;
}

.headtabbed > input,
.headtabbed figure > div {
 display: none;
}

.headtabbed figure>div {
  padding: 5px;
  width: 1286px;
  height: 280px;
  border: 1px solid var(--hintergrund2);
  background: var(--hintergrund2);
  color: var(--font-color1);
}

headnav label {
   float: left;
   padding: 3px;
   /* border-right: 1px solid var(--hintergrund1); */
   background: var(--akzent2);
   color: var(--hintergrund3);
   width: 317px;
   height: 30px;
   font-size: 18px;
   text-align: center;
   font-family: var(--font-main);
   text-transform: uppercase;
   margin: 0px 1px;
}

headnav label:nth-child(1) {
 /* border-left: 1px solid var(--link2); */
}

headnav label:hover {
 
 background: var(--hintergrund2); 
 color:var(--akzent3);
}

headnav label:active {
 background: var(--link2);
}

#headtab1:checked ~ headnav label[for="headtab1"],
#headtab2:checked ~ headnav label[for="headtab2"],
#headtab3:checked ~ headnav label[for="headtab3"],
#headtab4:checked ~ headnav label[for="headtab4"]{
  background: var(--hintergrund2);
  color: var(--akzent3);
  position: relative;
  border-bottom: none;
}

#headtab1:checked ~ headnav label[for="headtab1"]:after,
#headtab2:checked ~ headnav label[for="headtab2"]:after,
#headtab3:checked ~ headnav label[for="headtab3"]:after,
#headtab4:checked ~ headnav label[for="headtab4"]:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: -1px;
}

#headtab1:checked ~ figure .headtab1,
#headtab2:checked ~ figure .headtab2,
#headtab3:checked ~ figure .headtab3,
#headtab4:checked ~ figure .headtab4 {
	display: block;
}





.headerhead1{font-family: var(--font-headline1);
	font-size:16pt;
	border-bottom:1px solid var(--akzent2);
	color: var(--akzent3);
	text-align:center;}


/*About us*/

.headerbox1{width: auto;height: auto;float:left;margin: 4px;}

.headertext1{
	font-family:  var(--font-main);
	font-size: 12pt;
	text-align:justify;
	width: 376px;
	height: 229px;
	padding: 4px;
	overflow: auto;
	}

/*Team*/
.headerbox2{width: auto;height: 279px;float:left;/* border: 1px solid; */}

.headerteam2{font-family: var(--font-headline1);
	font-size:13pt;
	border-bottom:1px solid var(--akzent2);
	color: var(--akzent3);
	text-align:center;}

.headerteambox1{width: 320px;height: 280px;}

.headerteamtext{
	font-family:  var(--font-main);
	font-size: 11pt;
	text-align:center;
	width: auto;
	height: 130px;
	overflow:auto;
	padding: 5px;
	/* border: 1px solid; */
	}

.headteampic{width:70px;
	height:70px;
	padding:2px;
	border:1px solid var(--akzent2);}

.headteampic:hover{border-radius:100px;
	border:1px solid var(--akzent2);
-webkit-transition: all ease 0.6s;
-moz-transition: all ease 0.6s;
-o-transition: all ease 0.6s;
transition: all ease 0.6s;}


/*Housepoints, News & Plots*/
.headbox1{
	width: 300px;
	height: 302px;
	float:left;
	margin:0px 1px 0px 0px;
	overflow: auto;}

.headbox2{width: auto;height: auto;float:left;margin:0px 1px 0px 0px;}

.headhpbox0{width: 300px;height: 276px;}

.headhpbox1{
	float:left;
	margin:1px;
	width: 145px;
	height: 145px;
	/* border:1px solid; */
	}

.headhphaus{
    text-align: center;
    height: 38px;
    }

.headhphaus .gryffindor{
	font-family:  var(--font-main);
	background-image: linear-gradient(180deg,#ef6a6a,#ef6a6a, #bec1bf);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	/* border-bottom:1px solid #ef6a6a; */
	text-transform: uppercase;
	font-size: 11pt;
	}
	
.headhphaus .gryffindor .count{
font-family:  var(--font-main);
color: var(--font-color1);}
	
.headhphaus .hufflepuff{
	font-family:  var(--font-main);
	  background-image: linear-gradient(180deg,#efe76a,#efe76a, #bec1bf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	text-transform: uppercase;
	font-size: 11pt;
	}
	
.headhphaus .hufflepuff .count{
font-family:  var(--font-main);
color: var(--font-color1);}

.headhphaus .ravenclaw{
	font-family:  var(--font-main);
	background-image: linear-gradient(180deg,#6a7eef,#6a7eef, #bec1bf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	text-transform: uppercase;
	font-size: 11pt;
	}
	
.headhphaus .ravenclaw .count{
font-family:  var(--font-main);
color: var(--font-color1);}	
	
.headhphaus .slytherin{
	font-family:  var(--font-main);
	background-image: linear-gradient(180deg,#6aef76,#6aef76, #bec1bf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	text-transform: uppercase;
	font-size: 11pt;
	}
	
.headhphaus .slytherin .count{
font-family:  var(--font-main);
color: var(--font-color1);}	
	
	
.headhpgryff{
	width: 117px;
	height: 100px;
	background-image:url(/images/haus/gryffhead.png);
	/* border:1px solid; */
	}	

.headhphuff{
	width:145px;
	height:100px;
	background-image:url(/images/haus/huffhead.png);}	


.headhpraven{
	width:145px;
	height:100px;
	background-image:url(/images/haus/ravenhead.png);}	


.headhpslyth{
	width:145px;
	height:100px;
	background-image:url(/images/haus/slythhead.png);}	



.headnewsbox{
	width: auto;
	height: auto;
	/* border:1px solid; */
	}

.headnewsheadline1{
	font-family: var(--font-headline1);
	font-size: 16pt;
	border-bottom:1px solid var(--akzent2);
	color: var(--akzent3);
	text-align:center;
	}

.headnewsheadline2{font-family: var(--font-headline1);
	font-size:13pt;
	border-bottom:1px solid var(--akzent2);
	color: var(--akzent3);
	text-align:center;}

.headnewstext{
	width: 548px;
	height: 238px;
	/* border:1px solid; */
	font-family:  var(--font-main);
	font-size: 12pt;
	overflow:auto;
	padding:5px;
	text-align: justify;
	}

.headplotbox{
	width: auto;
	height: auto;
	/* border:1px solid; */
	}

.headplotheadline1{
	font-family: var(--font-headline1);
	font-size: 16pt;
	border-bottom:1px solid var(--akzent2);
	color: var(--akzent3);
	text-align:center;
	}

.headplotheadline2{font-family: var(--font-headline1);
	font-size:13pt;
	border-bottom:1px solid var(--akzent2);
	color: var(--akzent3);
	text-align:center;}

.headplottext{
	width: 400px;
	height: 239px;
	/* border:1px solid; */
	font-family:  var(--font-main);
	font-size:13pt;
	overflow:auto;
	padding:5px;
	text-align: justify;
	}

/*Calendar & Weather*/

.headbox3{
	width: auto;
	height: auto;
	/* float:left; */
	/* margin:0px 1px 0px 0px; */
	}

.headbox4{
	width: 573px;
	height: 279px;
	float:left;
	margin:0px 1px 0px 0px;
	/* border: 1px solid; */
	}

.headcalbox{
	width: 1282px;
	height: 274px;
	/* overflow:auto; */
	/* padding:5px; */
	}

.headcalbox1{
	width: 419px;
	height:auto;
	margin:1px;
	float:left;
	}

.headcalheadline{font-family: var(--font-headline1);
	font-size:13pt;
	border-bottom:1px solid var(--akzent2);
	color: var(--akzent2);
	text-align:center;}

.headweabox1{
	width: 196px;
	height: 287px;
	/* border:1px solid; */
	float: left;
	margin: 0px 1px 0px 0px;
	}

.headweahead{font-family: var(--font-headline1);
	font-size:13pt;
	border-bottom:1px solid var(--akzent2);
	color: var(--akzent3);
	text-align:center;}

.headweatext{
	width:auto;
	text-align:justify;
	height: 252px;
	/* border:1px solid; */
	font-family:  var(--font-main);
	font-size:13pt;
	overflow:auto;
	padding:5px;
	}


/*Wanted & Aufnahmestopps*/

.headbox5{width: 641px;height: 248px;margin:1px;float:left;}

.headwantedbox1{
	width:auto;
	height:100px;}

.headunwantedtext{
	width:auto;
	text-align:justify;
	height: 63px;
	/* border:1px solid; */
	font-family: var(--font-main);
	font-size:13pt;
	overflow:auto;
	padding:5px;
	}

.headwantedbox2{
	width:auto;
	height: 112px;
	padding:5px;
	overflow:auto;
	list-style:none;
}

.headwantedbox2 a{
	border:1px solid var(--akzent2);
	width: 45%;
	display:block;
	margin: 2px;
	float: left;
	padding: 2px 2px 2px 15px;
}


.headwantedbox3{
	width:auto;
	height: 208px;
	padding:5px;
	overflow:auto;
	list-style:none;
	}

.headwantedbox3 a{
		border:1px solid var(--akzent2);
		width: 95%;
		display:block;
		margin: 2px;
		padding: 2px 2px 2px 15px;
	}

.headwantedhead1{font-family: var(--font-headline1);
	font-size:16pt;
	border-bottom:1px solid var(--akzent2);
	color: var(--akzent3);
	text-align:center;}

.headwantedhead2{font-family: var(--font-headline1);
	font-size:13pt;
	border-bottom:1px solid var(--akzent2);
	color: var(--akzent3);
	text-align:center;}