html {
  scroll-behavior: smooth;
}

body{
    margin: 0;
    padding: 0;
    background-color:  #262628;
    color: #fff;
    font-family:  sans-serif, Arial, Helvetica;
	
}


a{
	text-decoration: none;
	color: #fff;
}





header{
 position: absolute;
 width: 100%;

}

#headerContent{
	max-width: 1000px;
    margin: 0 auto;
    padding: 10px;
}

h1{
	font-size: 60px;
	margin-bottom: 20px;
}

h2{
	font-size: 50px;
}

h3{
	font-size: 30px;
	margin: 0;
}

h4{
	font-size: 20px;
	margin: 0;
}



.h1BackGrean{
	background-color: #6b9945;
	padding: 2% 2% 2% 0;
	border-radius: 15px;
	color: #262628;
}

.h1Zusatz{
	margin: 0;
	position: relative;
	left: 160px;
	font-weight: 900;
	width:fit-content;
}

.topImg{
	background-image: url(img/top_img.jpg);
    background-color: #262628;
    background-position: top;
    background-repeat: no-repeat;
    background-size: inherit;
}



section{
    padding: 20px 0;
}

.sectionFooter{
	padding: 150px 0;
}


.arenaTop{
    max-width: 1000px;
    margin: 0 auto;
    padding: 180px 10px 20px 10px;
}

.arena{
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px;
}

.arena50{
    width: 46%;
    padding: 1%;
    margin: 1%;
}

.arenaT{
	width: 46%;
    padding: 1%;
    margin: 0 auto;
}

.tabelle{
	margin-left: 130px;
	max-width: 460px;
}

.tabelle li{
background-image: url("img/kreuz.png"); 
  background-position: left; 
  background-repeat: no-repeat; 
  padding-left: 30px;
  display: block;
  font-size: 18px;
  font-weight: 900;
}

#logo{
	float: left;
}


nav{
	font-size: 22px;
	border-radius: 15px;
	padding: 5px 15px;
	width: fit-content;
	float: right;
	margin-top: 2px;
}	

.zuUns{
	font-size: 22px;
	border-radius: 15px;
	padding: 5px 15px;
	width: fit-content;
}


#gallery img{
	width: 18%;
	margin: 1%;
}

/*text lesen*/

.textNone{
	display: none;
}

.textArena{
	width: 500px;
	height: 500px;
	margin: 10px;
	position: fixed;
	top: 40px;
	padding: 30px;
	background-color: #6b9945;
	z-index: 9;
	border-radius: 15px;
	overflow-y: scroll;
	transform: translate(-290px, 10px);
	left: 50%;
	box-shadow: 0 0 17px 1px #000;
}

/*blendet den scrollbar aus*/
.textArena::-webkit-scrollbar {
    display: none;
}

.textArena{
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
  }

.weiterLesen{
	padding: 5px 12px;
	border-radius: 15px;
	background-color: #6b9945;
	font-size: 18px;
}

.weiterLesenSchliesen{
	font-size: 22px;
	transform: rotate(45deg);
	float: right;
	position: sticky;
	top:1px;
	background-color: #6b9945;
	border-radius: 35px;
	padding: 1px 9px;
}




.textCenter{
	text-align: center;
}

.tLeft{
	text-align: left;
}

.tRight{
	text-align: right;
}

footer{
	background-color: #000;
}

footer a{
	font-size: 10px;
	color: #808080;
}

footer p{
	font-size: 8px;
}


.left{
    float: left;
}

.right{
    float: right;
}

.clear{
	clear: both;
}

img{
	max-width: 100%;
	vertical-align: bottom;
}


/*scroll ani*/
.boxScroll{
	opacity: 0;
}

.aniScroll{
	animation-name: example;
  animation-duration: 2s;
  position: relative;
  opacity: 1;
}

@keyframes example {
	from {top: 300px;
	opacity: 0;}
	to {top: 0px;
	opacity: 1;}
}


/*erschein animation*/
.boxZeig{
	opacity: 0;
}

.boxZAni{
	animation-name: bza;
  animation-duration: 4s;
  opacity: 1;
}

@keyframes bza {
	from {opacity: 0;}
	to {opacity: 1;}
}

/*cookie*/
#cookieArena{
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translate(-170px,0px);
    width: 300px;
    padding: 20px;
    background-color: #6b9945;
	border-radius: 15px;
}

#cookieArena input{
	background-color: #262628;
    border: none;
    padding: 10px 15px;
    color: #fff;
    border-radius: 15px;
}





/*Farben*/
.cWeiss{
    color: #ffffff;
}

.cGreen{
    color: #6b9945;
}

.cBlack{
    color: #262628;
}

.bGreen{
    background-color: #6b9945;
}

.bBlack{
    background-color: #262628;
}


/*mobile*/

@media only screen and (max-width: 600px) {

h1{
	font-size: 55px;
}

.tabelle{
	margin-left: 0;
	max-width: 400px;
}

.tabelle li{
    font-size: 15px;
}

#gallery img{
	width: 98%;
	margin: 1%;
	position: sticky;
	top:240px;
}

.pause{
	position: sticky;
	top:60px;
}

.textArena{
	width: 300px;
	transform: translate(-190px, 10px);
}

.tRight{
	text-align: left;
}

.arenaT{
	width: 76%;
}


.left,
.right{
	float: none;
}

.arena50{
	width: auto;
}

.pfeil4{
	transform: rotate(90deg);
}


#cookieArena p{
	font-size: 12px;
}

	
}