/* Main */

html, body {
    padding:0;
    margin:0;
    height:100%;
    font-family: var(--main-font-familiy);
    color: var(--main-font-color);
    z-index: 1;
}
    
body {
    top:0;
    left:0;
    height:100%;
    width:100%;
    -moz-hyphens:auto;
    -o-hyphens:auto;
    -webkit-hyphens:auto;
    -ms-hyphens:auto;
    hyphens:auto;
    background-color: var(--main-bg-fill-color);
}
    
.grid {
    float:left;
    padding:0px;
    min-height:1px;
}
    
*, *:before, *:after {
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}
    
.clearfix::before,.clearfix::after {
    content:" ";
    display:table;
}
    
.clearfix::after {
    clear:both;
}
    
.clearfix {
    *zoom:1; /* Für den IE6 und IE7 */
}

.container {
    position: relative;
}
    
    
::selection {
    background:var(--main-highlight-color);
}

::-moz-selection {
    background:var(--main-highlight-color);
}    
    
.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
    
.responsive-video {
    position: relative;
    width:100%;
    padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
    padding-top: 0px;
    height: 0;
}
    
.sponsorenevents{
    width:75px;
    height:auto;
    margin:2.5%;
    float:left;
    text-align:center;
    vertical-align:middle;
    line-height:0;
}

/* Main Div Sizes */
.w5 {width:5%;}
.w10 {width:10%;}
.w15 {width:15%;}
.w20 {width:20%;}
.w25 {width:25%;}
.w30 {width:30%;}
.w50 {width:50%;}
.w40 {width:40%;}
.w60 {width:60%;}
.w70 {width:70%;}
.w80 {width:80%;}
.w90 {width:90%;}
.w100 {width:100%;}

.fixedw10 {width:10%;}
.fixedw15 {width:15%;}
.fixedw20 {width:20%;}
.fixedw25 {width:25%;}
.fixedw30 {width:30%;}
.fixedw50 {width:50%;}
.fixedw40 {width:40%;}
.fixedw60 {width:60%;}
.fixedw70 {width:70%;}
.fixedw80 {width:80%;}
.fixedw90 {width:90%;}
.fixedw100 {width:100%;}

.specialw30 {width:30%;}

.hi5{min-height:5vh;}
.hi10 {min-height: 10vh;}
.hi15 {min-height: 15vh;}
.hi20 {min-height: 20vh;}
.hi25 {min-height: 25vh;}
.hi30 {min-height: 30vh;}
.hi35 {min-height: 35vh;}
.hi40 {min-height: 40vh;}
.hi45 {min-height: 45vh;}
.hi50 {min-height: 50vh;}
.hi55 {min-height: 55vh;}
.hi60 {min-height: 60vh;}
.hi65 {min-height: 65vh;}
.hi80 {min-height: 80vh;}
.hi100 {min-height:100vh;}

.hifull {height:100%;}

.z1{z-index: 1;}
.z2{z-index: 2;}
.z3{z-index: 3;}
.z4{z-index: 4;}
.z5{z-index: 5;}
.z6{z-index: 6;}
.z7{z-index: 7;}
.z8{z-index: 8;}
.z9{z-index: 9;}
.z10{z-index: 10;}

.space-1{padding:1%;}
.space-2{padding:2%;}
.space-3{padding:3%;}
.space-4{padding:4%;}
.space-5{padding:5%;}
.space-6{padding:6%;}
.space-7{padding:7%;}
.space-8{padding:8%;}
.space-9{padding:9%;}
.space-10{padding:10%;}
.space-15{padding:15%;}
.space-20{padding:20%;}


.PC {
    display:block;
}
.tablet {
    display:none;
}
.handy {
    display:none;
}

/*Styling of Elements*/

p {
    font-size: var(--main-font-size);
    line-height: 1.8em;
}

a:link {text-decoration:none; color:var(--link-main-color);}
a:focus { color:var(--link-focus-color); }
a:visited { color:var(--link-visitied-color); }
a:hover { color:var(--link-hover-color); }
a:active { color:var(--link-active-color); }

/*site classes */
.title {
    padding:5%;
    font-size: 2.4vw;
    line-height: normal;
    text-align: center;
    overflow: hidden;
}

.formularHolder {
    width:80%;
    position: absolute;
    z-index: 9;
    display: none;
    top: 10%;
    left: 10%;
    background: rgba(228, 228, 228, 0.905);
    border-radius: 15px;
    border: 1px solid rgba(43, 43, 43, 0.285);
    overflow: hidden;
    backdrop-filter: blur(3px);
}

.FormContent{
    padding: 2%;
  }

.warnbox {
    position: sticky;
    z-index: 10;
    display: none;
    top: 20%;
    left: 25%;
    background: rgb(153, 58, 58);
    border-radius: 15px;
}

.btn-close {
    margin: 0;
    border: 0;
    padding: 0;
    background: hsl(216, 100, 50);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 150ms;
    position: absolute;
    top:30px;
    right:30px;
}

.btn-close:after {
    content: '';
    height: 30px;
    border-left: 2px solid #fff;
    position: absolute;
    transform: rotate(45deg);
    left: 20px;
}

.btn-close:before {
    content: '';
    height: 30px;
    border-left: 2px solid #fff;
    position: absolute;
    transform: rotate(-45deg);
    left: 20px;
}

.btn-close:hover,
.btn-close:focus {
    transform: rotateZ(90deg);
    background: hsl(216, 100, 40);
}
  
.visually-hidden {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}

.AddButton {
    width:auto;
    background-color:#2f6a2f;
    color:#f8f8f8;
    padding:2%;
    border-radius: 20px;
}
.AddButton:hover {
    background-color:#419841;
    color:#000000;
}

.footer {
    padding:2%;
    text-align: center;
}
.footer-relativ {
    padding:2%;
    text-align: center;
}

.tableholder{
    overflow-y: none;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
    }
.tableholder::-webkit-scrollbar { 
        display: none;  /* Safari and Chrome */
    }

.bigger{width: 100%;}


@media screen and (max-width :1028px) {
    
    .PC {
        display:none;
    }
    .tablet {
        display:block;
    }
    .handy {
        display:none;
    }

    .title {  
        font-size: 6vw;
    }

    .left-banner{
        display: block;
        width:20%;
    }
    .middle-banner{
        padding:0% 5% 5% 5%;
        width: 80%;
    }
}

@media screen and (max-width :720px) {
    .PC {
        display:none;
    }
    .tablet {
        display:none;
    }
    .handy {
        display:block;
    }
    
    .title {  
        font-size: 7vw;
    }

    .left-banner{
        display: none;
    }
    .middle-banner{
        width: 100%;
    }

    .w5 {width:2%;}
    .w10 {width:5%;}
    .w15 {width:5%;}
    .w20 {width:5%;}
    .w25 {width:5%;}
    .w30 {width:5%;}
    .w50 {width:90%;}
    .w40 {width:90%;}
    .w60 {width:90%;}
    .w70 {width:90%;}
    .w80 {width:90%;}
    .w90 {width:96%;}
    .w100 {width:100%;}

    .tableholder{
        overflow-y: scroll;
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        -webkit-overflow-scrolling: touch;
            scrollbar-width: none;  /* Firefox */
        }
    .tableholder::-webkit-scrollbar { 
            display: none;  /* Safari and Chrome */
        }

    .bigger{width: 150%;}

    .formularHolder {
        width:96%;
        position: absolute;
        z-index: 9;
        display: none;
        top: 2%;
        left: 2%;
        background: rgba(228, 228, 228, 0.905);
        border-radius: 1px;
        border: 1px solid rgba(43, 43, 43, 0.285);
        overflow: hidden;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
    
    .FormContent{
        padding: 2%;
      }
}