* {
margin:0;
padding:0;
}

:root {
  --braun: #754939;
  --hellbraun: #b78674;
  --rot: #FF4535;
  --gelb: #FBA037;
}

@font-face {
  font-family: 'Gotham', 'Open Sans', Arial;
  src: url('/template/css/fonts/GothamLight.woff2') format('woff2'),
       url('/template/css/fonts/GothamLight.woff') format('woff');
}

@font-face {
    font-family: 'delight_coffee';
    src: url('/template/css/fonts/delight_coffee.woff2') format('woff2'),
         url('/template/css/fonts/delight_coffee.ttf') format('truetype'),
         url('/template/css/fonts/delight_coffee.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: "Open Sans";
  src: url('/template/css/fonts/OpenSans-Regular.woff2') format("woff2"),
       url('/template/css/fonts/OpenSans-Regular.woff') format("woff");
}

@font-face {
    font-family: 'tox_typewriter';
    src: url('/template/css/fonts/tox_typewriter.woff2') format('woff2'),
         url('/template/css/fonts/tox_typewriter.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
  font-family: FontAwesome-solid;
  src: url('/template/css/fontawesome-free-6.2.0-web/webfonts/fa-solid-900.woff2')  format('woff2'),
       url('/template/css/fontawesome-free-6.2.0-web/webfonts/fa-solid-900.woff') format('woff');
}

@font-face {font-family: FontAwesome-reg;
  src: url('/template/css/fontawesome-free-6.2.0-web/webfonts/fa-regular-400.woff2')  format('woff2'),
       url('/template/css/fontawesome-free-6.2.0-web/webfonts/fa-regular-400.woff') format('woff');;
}


body {
font-size: 22px;
color: #754939;
font-family: 'tox_typewriter';
color: var(--braun);
background: #E4F0F0 url(/template/css/images/bg_dots.png) top center repeat;
background-size: cover;
}

header {
display: none;
}

a { text-decoration: none; color: var(--hellbraun); font-weight: bold; }

p { line-height: 25px; }

.wrapper {
margin: 0 auto;
padding: 0px 0px;
}

.col {
width: 50%;
float: left;
}



.clear { clear: both; }

h1 {
font-family: 'delight_coffee', Arial;
margin-bottom: 0px;
font-size: 4.8rem;
font-weight: bold;
color: var(--braun);
}

h2 {
font-family: 'delight_coffee', Arial;
color: #FBA037;
font-size: 4.8rem;
margin-bottom: 0px;
}

h3 {
font-family: 'delight_coffee', Arial;
color: var(--rot);
font-size: 1.5rem;
margin-bottom: 0px;
}

.lastpoowrap { display: none; }

.nesz {
font-size: 2.5rem;
background-color: #2a3340;
border-radius: 15px;
border-radius: 50px;
display: inline-block;
padding: 18px 80px 6px 80px;
margin-bottom: 20px;
}

.large {  font-size: 6rem; }

.fontshit {
width: 100px;
vertical-align: top;
}

.wrap { position: relative;  }

.parts {
position: absolute;
top: 0px;
left: 0px;
width: 700px;
z-index: -1;
}

.lupe {
  	transform: translatey(0px);
  	animation: float 3s ease-in-out infinite;
}

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-20px);
	}
	100% {
		transform: translatey(0px);
	}
}

.statwrap {position: relative;}

.content {
text-align: center;
box-sizing: border-box;
margin-bottom: 100px;
padding: 56px;
width: 100%;
margin-top: 260px;
background-color: #fff;
border-radius: 30px;
-webkit-box-shadow: 0px 6px 40px 0px rgba(207,207,207,1);
-moz-box-shadow: 0px 6px 40px 0px rgba(207,207,207,1);
box-shadow: 0px 6px 40px 0px rgba(207,207,207,1);
}

.contentdev {
text-align: center;
box-sizing: border-box;
margin-bottom: 100px;
padding: 56px;
width: 100%;
background-color: #fff;
border-radius: 30px;
-webkit-box-shadow: 0px 6px 40px 0px rgba(207,207,207,1);
-moz-box-shadow: 0px 6px 40px 0px rgba(207,207,207,1);
box-shadow: 0px 6px 40px 0px rgba(207,207,207,1);
}

.stat_jahr {
position: absolute;
font-family: 'delight_coffee', Arial;
top: -61px;
background-color: var(--rot);
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding: 22px 0px 14px 0px;
margin: 0 auto;
color: #fff;
width: 300px;
text-align: center;
font-size: 2rem;
margin-left: 50%;
left: -150px;
box-sizing: border-box;
}

.reiter {
  position: relative;
display: inline-block;
font-family: 'delight_coffee', Arial;
background-color: var(--rot);
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding: 22px 12px 14px 12px;
margin: 0 auto;
color: #fff;
text-align: center;
font-size: 1.7rem;
box-sizing: border-box;
margin-top: 200px;
}

.reiter:hover { cursor: pointer; }

.r_statistik { position: relative; background-color: #74c3ff; padding: 22px 16px 14px 16px;}

.r_gesamt:after {
  content: "";
  border-bottom: 4px solid blue;
  width: 100%;
}

.r_gesamt.r_active:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(255, 69, 53, 0);
	border-top-color: #FF4535;
	border-width: 20px;
	margin-left: -20px;
}

.r_statistik:before {
content: "";
background-image: url(/template/css/images/icon_neu.png);
width: 38px;
height: 20px;
right: -19px;
top: 5px;
position: absolute;
}

.r_statistik.r_active:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(116, 195, 255, 0);
	border-top-color: #74c3ff;
	border-width: 20px;
	margin-left: -20px;
}



.stat {
width: 49%;
float: left;
padding: 45px 0px;
box-sizing: border-box;
font-family: 'delight_coffee', Arial;
}

footer {
margin: 100px 0 50px 0;
text-align: center;
font-family: 'delight_coffee', Arial;
}

footer a {
font-weight: normal;
color: var(--braun); }

footer a:hover {
color: var(--rot);
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

/*overlay*/
#overlay {

}

#overlay h2 {
font-size: 2.5rem;
}

#mask{
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,0.6);
    z-index:500;
    width:100%;
    height:100%;
    display:none;
}

#overlay:target, #overlay:target + #mask{
    display:block;
    opacity:1;
}

.close{
    display:block;
    position:absolute;
    top:-20px;
    right:-20px;
    background:red;
    color:white;
    height:40px;
    width:40px;
    line-height:40px;
    font-size:35px;
    text-decoration:none;
    text-align:center;
    font-weight:bold;
    -webkit-border-radius:40px;
    -moz-border-radius:40px;
    -o-border-radius:40px;
    border-radius:40px;
}
/*overlay ende */

.h2achieve { font-size: 2.5rem; }

#achievements {
display: flex;
justify-content: center;
gap: 20px;
width: 100%;
margin-bottom: 100px;
margin-top: 80px;
}

.achievement h2 { font-size: 1.5rem; margin-bottom: 20px;}

.achievement {
border: 2px solid var(--gelb);
padding: 110px 20px 30px 20px;
box-sizing: border-box;
flex: 1;
position: relative;
text-align: center;
border-radius: 44px;
}

.achievement.unlocked { background-color: rgba(255,255,255,0.5); }

.achievement img {
position: absolute;
top: -121px;
width: 50%;
left: 50%;
margin-left: -25%;
}

.locked {-webkit-filter: grayscale(1); border: 2px dashed var(--gelb);}

.balken {
  position: relative;
  width: 80%;
  background-color: #293838;
  height: 8px;
  margin: 0 auto;
}

.fortschritt {
position: absolute;
  width: 1%;
  height: 8px;
  z-index: 1;
  background-color: var(--gelb);
}