.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: 337px;height: 280px;}

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

.headteampic{
	width: 72px;
	height: 72px;
	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: 136px;
	height: 30px;
	/* border:1px solid; */
	padding: 4px;
	}

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


.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: 530px;
	height: 238px;
	/* border:1px solid; */
	font-family:  var(--font-main);
	font-size: 12pt;
	overflow:auto;
	padding:5px;
	text-align: justify;
}

.headnewstext::-webkit-scrollbar {
background-color: var(--akzent2);
border:3px solid var(--hintergrund2);
width: 7px;
scrollbar-width: thin;
height:7px;
}

headnewstext::-webkit-scrollbar-thumb {border-radius:100px;
   background-color: var(--akzent2) !important;
}



.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;
	}

.headplottext::-webkit-scrollbar {
background-color: var(--akzent2);
border:3px solid var(--hintergrund2);
width: 7px;
scrollbar-width: thin;
height:7px;
}

.headplottext::-webkit-scrollbar-thumb {border-radius:100px;
   background-color: var(--akzent2) !important;
}

/*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::-webkit-scrollbar {
background-color: var(--akzent2);
border:3px solid var(--hintergrund2);
width: 7px;
scrollbar-width: thin;
height:7px;
}

.headwantedbox2::-webkit-scrollbar-thumb {border-radius:100px;
   background-color: var(--akzent2) !important;
}

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


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


.headwantedbox3::-webkit-scrollbar {
background-color: var(--akzent2);
border:3px solid var(--hintergrund2);
width: 7px;
scrollbar-width: thin;
height:7px;
}

.headwantedbox3::-webkit-scrollbar-thumb {border-radius:100px;
   background-color: var(--akzent2) !important;
}


.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;}

.headhauspunkte{height: 272px;overflow: auto;}

.headhauspunkte .morrigan i{
	color: #940000;
	float: left;
	font-size: 30px;
	}

.headhauspunkte .morrigan .count{
		color: #940000;
	float: left;
	font-size: 30px;
}

.headhauspunkte .brigid i{
	color:#5549f4;
	float: left;
	font-size: 30px;}

.headhauspunkte .brigid .count{
		color: #5549f4;
	float: left;
	font-size: 30px;
}

.headhauspunkte .cernunnos i{
	color:#044b07;
	float: left;
	font-size: 30px;}

.headhauspunkte .cernunnos .count{
	color:#044b07;
	float: left;
	font-size: 30px;}

.headhauspunkte .cerridwen i{
	color:#902efe;
	float: left;
	font-size: 30px;}

.headhauspunkte .cerridwen .count{
	color:#902efe;
	float: left;
	font-size: 30px;}

.headhauspunkte .lugh i{
	color:#cbbc41;
	float: left;
	font-size: 30px;}

.headhauspunkte .lugh  .count{
	color:#cbbc41;
	float: left;
	font-size: 30px;}


.headhauspunkte .cervus i{color:#70cab7;
	float: left;
	font-size: 30px;}

.headhauspunkte .cervus .count{
	color:#70cab7;
	float: left;
	font-size: 30px;}

.headhauspunkte .aper i{color:#c5916c;
	float: left;
	font-size: 30px;}

.headhauspunkte .aper .count{color:#c5916c;
	float: left;
	font-size: 30px;}


.headhauspunkte .lutra i{color:#8690df;
	float: left;
	font-size: 30px;}

.headhauspunkte .lutra .count{color:#8690df;
	float: left;
	font-size: 30px;}


.headhauspunkte .lynx i{color:#d17777;
	float: left;
	font-size: 30px;}

.headhauspunkte .lynx .count{color:#d17777;
	float: left;
	font-size: 30px;}


.headhauspunkte .lupus i{color:#ebec8f;
	float: left;
	font-size: 30px;}

.headhauspunkte .lupus .count{color:#ebec8f;
	float: left;
	font-size: 30px;}