/*Design und Programmierung by Denis-Muric.de
Copyright © 2023 pineasy.
Alle Rechte vorbehalten.*/

body{
    margin:0;
    padding:0;
    font-family: sans-serif;
    background-color: #f8f8f8;
}

a{
    
    text-decoration: none;
}

p{
    font-size: 15px;
    color: #555555;
}

.p2{
    font-size: 10px;
    color: #555555;
}

h1{
    font-size: 60px;
    color: #555555;
    font-weight: 100;
    margin:0;
}

h2{
    font-size: 60px;
    font-weight: 100;
    margin:0;
}


h3{
    font-size: 48px;
    color: #555555;
    font-weight: 100;
    margin: 5px;
}

.f24{
    font-size: 24px; 
}


header{
    width: 100%;
    position: fixed;
    top: 0;
    background-color: #ffffffc2;;
    backdrop-filter: blur(17px);
    z-index: 10;
}

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

#logo{
    float: left;
}

#menu {
    float: right;
    margin-top: 4px;
   
    padding: 6px;
    border-radius: 15px;
}

#menu:hover {
   /* background-color: #dedede;*/
}

.menuPunkt{
    background-color: #33c2e1;
    padding: 5px;
    border-radius: 30px;
    width: 0px;
    float: left;
    margin-left: 2px;
}

#menuConten {
  
        background-color: #f3f3f3;
        width: 200px;
        padding: 10px;
        border-radius: 15px 0px 15px 15px;
        position: relative;
        right: 0;
        float: right;
        top: 26px;
        box-shadow: 0px 3px 9px 0px #e1dada;
   
}

#menuConten ul{
    margin: 0;
    padding: 11px;
}

#menuConten ul li{
    display: block;
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: #bfbfbf;
}

#menuConten ul li p{
margin-bottom: 3px;
}

#besuher{
    float: right;
    background-color: #e1e1e1;
    border-radius: 15px;
    padding: 2px 10px;
    margin-top: 10px;
    margin-right: 10px;
}

section{
    padding:40px 0;
    margin: 0 20px;
}

section:first-child {
    padding-top: 80px;
    margin: 20px;
  }

.arena{
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

.arena70{
    width: 66%;
    padding: 1%;
    margin: 1%;
}

.arena30{
    width: 26%;
    padding: 1%;
    margin: 1%;
}

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

.anmelden{
        padding: 15px 22px;
        width: fit-content;
        border-radius: 30px;
        color: #fff;
        font-size: 18px;
        font-weight: 100;
    
}

/*Anmelden*/

#anmeldeForm {
    max-width: 500px;
    
    
    padding: 50px;
    margin: 0 auto;
    
}

#anmeldeForm input{
    border-radius: 10px;
    padding: 10px 18px;
    border-width: 1px;
    border-color: #b6b6b6;
    margin: 10px;
    width: 80%;
    border-style: solid;
    font-size: 18px;
}



/*registrieren*/

#anmeldeForm select{
	border-radius: 30px;
    padding: 10px 18px;
    border-width: 1px;
    border-color: #b6b6b6;
    margin: 10px;
    width: 80%;
    border-style: solid;
    font-size: 18px;
}

#regist .bDay1{
	width: 15%;
	border-radius:  30px 0 0 30px;
	margin: 10px 0px;
}

#regist .bDay2{
	width: 15%;
	border-radius:   0;
	margin:0;
}

#regist .bDay3{
	width: 15%;
	border-radius:  0 30px 30px 0;
	margin: 10px 0;
}

/*home*/

.textFarbverlauf{
        background-image: linear-gradient(182deg,#00b2d9,#92278f);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: -6px;
}



/*home preis*/
.preis50{
    width: 36%;
    padding: 5%;
    margin: 2%;
}



/*daten eintargen*/

#vEintrag input{
    border-radius: 15px;
    padding: 10px;
    border: solid 1px #d9d9d9;
    width: 90%;
    margin-bottom: 15px;
}

#vEintrag label{
    margin-left: 15px;
    color: #969696;
}


@keyframes dGA {
  0% {opacity: 0; top: -200px;}
  30% { opacity: 1; top: 100px;}
  70%{opacity: 1; top: 100px;}
  100%{opacity: 0; top: -200px;}
}


.datenGespeichertAni{
	top: -200px;
	opacity:0;
	position: fixed;
 width: 300px;
  padding: 20px 0;
  border-radius: 30px;
  background-color: #92278f;
  animation-name: dGA;
  animation-duration: 4s;
  transform: translate(-150px, 0px);
  left: 50%;
  text-align: center;
  
}




/*footer*/
footer{
background-color: #e4e4e4;
clear: both;
position: relative;
width: 100%;
bottom: 0;
}


footer p{
    font-size: 12px;
}


/*stop effekt*/
.stopEffe1{
    position: sticky;
    top: 10px;
    z-index: 2;
}

.stopEffe2{
    position: sticky;
    top: 20px;
    z-index: 3;
}

.stopEffe3{
    position: sticky;
    top: 30px;
    z-index: 3;
}
.stopEffe4{
    position: sticky;
    top: 40px;
    z-index: 4;
}

/*bild*/
.backImg{
background-color: #cccccc; /* Used if the image is unavailable */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

/*Farbe*/

.cGreen{
    color: #50cd56;
}

.bBlau{
    background-color: #6266ec;
}

.cBlau{
    color: #6266ec;
}

.cHBlau{
    color: #999bf5;
}

.bHBlau{
    background-color: #999bf5;
}

.bLila{
    background-color: #92278f;
}

.cLila{
    color: #92278f;
}


.bGrau{
    background-color: #f4f4f4;
}

.bWeiss{
    background-color: #fff;
}

.cWeiss{
   color: #fff;
}


.h500{
    min-height: 500px;
}


.radius{
    border-radius: 15px;
}

.textRight{
    text-align: right;
}

.textCenter{
    text-align: center;
}

.left{
    float: left;
}

.right{
    float: right;
}


.none{
    display: none;
}

img{
    max-width: 100%;
}

.clear{
    clear: both;
}



/*mobile */ 


@media only screen and (max-width: 600px) {
	
	h2,
	h1{
		font-size: 40px;
	}

    h3{
        font-size: 35px;
    }
	
	.arena70,
	.arena30,
	.arena50,
	.preis50{
		width: auto;
		padding: 10px;
		margin: 25px 10px;
		
	}

    section{
        padding: 10px 0;
    }
	
	.left,
	.right{
		float: none;
	}
  
    .stopEffe1,
    .stopEffe2,
    .stopEffe3,
    .stopEffe4{
        position: relative;
        top:0px;
    }
  
  
  /*daten eintargen*/

#vEintrag input{
    font-size: 16px;
}

#vEintrag label{
    
}


  
  
  
}