html, body {
    overflow-x: hidden;
  }
.p-Header-Index{
    font-size: 82pt;
    font-variant: small-caps;
    font-weight: bold;
    text-shadow: 5px 3px 15px;
    text-align: center;
    color: antiquewhite;
    background-color: forestgreen;
    margin: 10px;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    max-width: 1100px;
    border-radius: 10px ;
    transition-duration: 1000ms; 
}
.versteckt{
    font-size: 20pt;
    text-align: center;
    color: forestgreen;
    position: absolute;
    left: 50%;
    top: 145px;
    transform: translateX(-50%);
}

.p-Header-Index-Link{
    text-decoration: none;
}


.p-Header-Index:hover {
    transform: scale(1.1);transition-duration: 1000ms;opacity: 0;
    
}

header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}
.banner-Index{
    max-width: 95%;
    height: auto;
    margin: 0 10px 10px 20px;}


.container{
    display: flex;
    flex-wrap: wrap;
    
}
.box-art{
    flex: 1;
    margin-left: 20px;
    transform: rotate(0deg);
    transition-duration: 1500ms;
      
}

.box-art.active {
    display: flex;
    flex-wrap: wrap;
    transform: rotate(-180deg) scale(1.4);
    margin-left: 100px;
    margin-right: 350px;
    background-image: linear-gradient(66deg,rgb(230, 236, 230), forestgreen);
    padding: 10px;
    border-radius: 12%;
    max-width: 250px;
    transition-duration: 1500ms;
  }
  .box-art.active .h1-Index
  {opacity: 0;}

.box-art.active .p1
      {margin: 0;
        padding: 0 15% 0 0;
        font-size: 18pt;
        color:black;
        font-weight: 600;
         text-align: center;
        text-shadow: 10px 7px 10px;
        transform:rotate(-180deg)
    }

.box-art .p1
{margin: 0;
    padding: 0;
    font-size: 18pt;
    color:rgb(255, 255, 255);
transform:rotate(180deg)}

.box-art.active .Geschichte{
    opacity: 1.0;
    font-size: 32px;
    font-weight: 900;
    padding: 0 12px 0 0;
    text-decoration: underline; color: black;
    transform: rotateX(180deg)rotateY(540deg);
    transition-duration: 3000ms;
  }
 .Geschichte{
    opacity: 0.0;
    
}
  /* dient dazu das, dass  "Unsere Geschichte" eingeblendet wird */

.box-links{
    flex:1 ;
    /* margin-bottom: 800px; */
    margin-top: 10px;  }

a:hover {
    color: chocolate; transition: 0.7s;

}


body{
  background-image: url(./Platz2.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  
}
.h1-Index{
    color: black;
    text-decoration: underline;
    cursor: pointer;
    border: groove;
    border-color: rgb(41, 36, 36);
    max-width: 230px;
    margin-left: 55px;
    text-align: center;
    border-radius: 5px 30px 5px 30px;background: linear-gradient(to right, rgb(200, 230, 200),forestgreen);
}
html, body {
    width: 100%;
    height: auto;
    margin: 0;
    
}
body{
    font-size: 25px;
}
.article
{max-width: 350px;
    }

      


.Saison23-24{
    border: solid;
    border-width: 2px;
    border-color: forestgreen;
    border-radius: 30px 30px 5px 5px;
    background: linear-gradient(to left, forestgreen, rgb(162, 228, 162));
    max-width: 280px;
    text-align: center;
}

.Alte-Herren{
    border: solid;
    border-width: 2px;
    border-color: forestgreen;
    border-radius: 5px 5px 5px 5px;
    background: linear-gradient(to left, forestgreen, rgb(162, 228, 162));
    max-width: 280px;
    text-align: center;
}

.B-Jugend{
    border: solid;
    border-width: 2px;
    border-color: forestgreen;
    border-radius: 5px 5px 5px 5px;
    background: linear-gradient(to left, forestgreen, rgb(162, 228, 162));
    max-width: 280px;
    text-align: center;
}

.C-Jugend{
    border: solid;
    border-width: 2px;
    border-color: forestgreen;
    border-radius: 5px 5px 5px 5px;
    background: linear-gradient(to left, forestgreen, rgb(162, 228, 162));
    max-width: 280px;
    text-align: center;
}

.D-Jugend{
    border: solid;
    border-width: 2px;
    border-color: forestgreen;
    border-radius: 5px 5px 5px 5px;
    background: linear-gradient(to left, forestgreen, rgb(162, 228, 162));
    max-width: 280px;
    text-align: center;
}

.trainer{
    border: solid;
    border-width: 2px;
    border-color: forestgreen;
    border-radius: 30px 5px 30px 5px;
    background: linear-gradient(to left, forestgreen, rgb(162, 228, 162));
    max-width: 280px;
    text-align: center;
   
}
.training{
    border: solid;
    border-width: 2px;
    border-color: forestgreen;
    border-radius: 30px 5px 30px 5px;
    background: linear-gradient(to left, forestgreen, rgb(162, 228, 162));
    max-width: 280px;
    text-align: center;
    
    
}
.erfolge{
    border: solid;
    border-width: 2px;
    border-color: forestgreen;
    border-radius: 30px 5px 30px 5px;
    background: linear-gradient(to left, forestgreen, rgb(162, 228, 162));
    max-width: 280px;
    text-align: center;
    
}

.impressum{
    border: solid;
    border-width: 2px;
    border-color: forestgreen;
    border-radius: 30px 5px 30px 30px;
    background: linear-gradient(to left, forestgreen, rgb(162, 228, 162));
    max-width: 280px;
    text-align: center;  
}
.formular
{border: solid;
    border-width: 2px;
    border-color: forestgreen;
    border-radius: 30px 5px 30px 30px;
    background: linear-gradient(to left, forestgreen, rgb(162, 228, 162));
    max-width: 280px;
    text-align: center; }

.sponsoren{
    height: 100px;
    margin-top: 100px;
    border: solid 5px green;
    border-style: double;
    background-color: bisque;
    display: flex;
    flex-direction: row;
}
.sponsorenP{
    font-size: 18pt;
    margin-top: 7px;
    margin-left: 7px;


    
}
.sponsorenP2{
    font-size: 18pt;
    margin-top: 7px;
}
.sponsor1{
    width: 100px;
}
.div1{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 18px;
    padding-bottom: 4px;




 }
 footer{
    display: flex;
    flex-wrap: wrap
    ;width: 100%;
    }


 .div2{
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 2px;
    background-color: rgb(168, 165, 165);
    height: 18px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
 }

 .div3
    {background-color: rgb(146, 145, 145);
    height: 35px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    justify-content: right;
    padding: 2px 0 2px 0;
    
    font-size: 8pt;
    line-height: 0.45rem;
}

.div3 a{
    text-decoration: none;
    color: rgb(224, 220, 214);
    /* justify-content: right; */
    margin-right: 1%;}