/* 1. generelle Einstellungen */

:root {
    --primary: #030529;
    --primary-opacity: rgba(3, 5, 41, 0.7);
    --primary-opacity1: rgba(3, 5, 41, 0.9);
    --primary-opacity2: rgba(3, 5, 41, 0.3 );
    --primary-opacity3: rgba(3,5,41, 0.1);
    --primary2: #e31e99;
    --primary2-opacity: rgba(227, 30, 153, 0.9);
    --logo-color: #e31e99;
    --color-h1: #fff;
    --color-a: #fff;
    --box-shadow: 0 0.5vw 6vw #7806a0;
    --text-shadow:  -1px 1px 1px hsl(284, 93%, 33%),
                    -1px 2px 1px hsl(284, 93%, 34%), 
                    -1px  3px 1px hsl(284, 93%, 35%),  
                    -1px 4px 1px hsl(284, 93%, 36%); 
    --border-bottom: #7806a0; 
    --logo-shadow: -1px 1px 1px hsl(284, 93%, 33%),
                   -1px 2px 1px hsl(284, 93%, 34%), 
                   -1px  3px 1px hsl(284, 93%, 35%),  
                   -1px 4px 1px hsl(284, 93%, 36%); 
    --logo-shadow-footer: -1px 1px 1px hsl(284, 93%, 33%),
                          -1px 2px 1px hsl(284, 93%, 33%), 
                          -1px  3px 1px hsl(284, 93%, 33%),  
                          -1px 4px 1px hsl(284, 93%, 33%); 
}

/*
Fonts
*/

    @font-face { font-family: 'Arise'; src: url('../fonts/Arise.ttf') ; }
    @font-face { font-family: 'AriseN'; src: url('../fonts/Arise.otf') ; }
    @font-face { font-family: 'OpenSans'; src: url('../fonts/OpenSans-Regular.ttf') ; }
    @font-face { font-family: 'OpenSansI'; src: url('../fonts/OpenSans-Italic.ttf') ; }
    @font-face { font-family: 'AD'; src: url('../fonts/ArchitectsDaughter.ttf') ; }

/* Scrollbar */

::-webkit-scrollbar {
    width: 0.5vw;
  }
  ::-webkit-scrollbar-track {
    background: #eee;
    border: 0.5px solid var(--primary2);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--primary2);
    border: 0.1vw solid #eee;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
  }

  
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    hyphens: auto;
    font-family: 'OpenSans';
    scroll-behavior: smooth;
}
body {
    background-color: var(--primary);
    overflow-x: hidden;
}
a {
    text-decoration: none;
    color: var(--primary);
    font-weight: 900;
}
/*
Scrollup Button normal
*/

#scrollBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
    border: 2px solid var(--first-color);
    outline: none;
    background-color: var(--primary2);
    color: white;
    cursor: pointer;
    border-radius: 50%;
    margin: 0 1em;
    padding: 5px 10px;
    box-shadow: -1px 3px 15px rgba(0,0,0,1);
  }
  #scrollBtn i  {
    color: var(--primary);
    font-size: 2em;
   
  }
  #scrollBtn:hover {
      transform: scale(0.95);
  }


@media screen and (min-width: 768px) and (max-width: 1023px) {
    #scrollBtn i  {
        font-size: 2em;
        padding: 0.35em 0.5em;
      } 
}
    
    
@media screen and (min-width: 1024px) {
    
    #scrollBtn i {
        font-size: 2em;
        padding: 0em ;
    }

}
.transparenterhintergrund1 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: rgba(3, 5, 41, 0.8);
    box-sizing: border-box;
}
.transparenterhintergrund11 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: rgba(3, 5, 41, 0.9);
    box-sizing: border-box;
}
.transparenterhintergrund12 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
}
.transparenterhintergrund2 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    background-color: var(--primary) ;
    box-sizing: border-box;
}
.transparenterhintergrund3 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: rgba(3, 5, 41, 0.8);
    box-sizing: border-box;;
    padding: 2vw 0 5vw;
}
.transparenterhintergrund4 {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: rgba(3, 5, 41, 0.6);
    box-sizing: border-box;;
}
.transparenterhintergrund5 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: rgba(3, 5, 41, 0.4);
    box-sizing: border-box;;
    padding: 2vw 0 5vw;
}
.transparenterhintergrund6 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    background-color: var(--primary-opacity);
    box-sizing: border-box;
    padding: 5vw 0;
    z-index: 1;
    border-radius: 40px;
}
.wrapper {
    position: relative;
}
header {
    position: relative;
    top: 0;
    width: 100%;
    height: 8em;
    background-color: var(--primary);
    padding: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 998;
    box-shadow: var(--box-shadow);
}
#logo {
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 10px;
    left: 10px;
    background: linear-gradient(135deg, rgba(255,255,255, 0.1), rgba(255,255,255,0.05));
    backdrop-filter: blur(10px);
    border-radius: 1em;
    border:  1px solid rgba(255,255,255,0.1);
    box-shadow: 0 8px 32px 0 rgba(0,0,0, 0.37);
}
#logo img {
    width: 100%;
}
header .logo-text {
    font-size: 45px;
    font-weight: 500;
    color: var(--primary2);
    font-family: 'Arise';
    text-shadow: var(--text-shadow);
    margin-left: 200px;
}
header .logo-text span{
    color: #fff;
    font-size: 30px;
    padding-left: 20px;
    text-shadow: var(--text-shadow);
}
header ul {
    display: flex;
    margin: 0;
    padding: 0 20px 0 0;
    height: 70px;
}
header ul li {
    line-height: 4em;
}
header ul li a {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 900;
    padding: 0 20px;
}
ul li a.active,
ul li a:hover {
    color: var(--primary2);
}

/* Section Produkt */

#section-product {
    width: 100%;
    min-height: 70vh;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    border-top: 1px solid var(--logo-color);
    background-color: var(--primary-opacity3);
}
.produkt {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5vw 0;
}
.produkt .produkt-box {
    position: relative;
    width: 25%;
    height: 30vh;
    background-color: var(--primary-opacity);
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 0.5vw;
    border: 1px solid #7806a0;
    box-shadow: inset 0 0 0.1em #0a3064, inset 0 0 0.2em #0a3064, inset 0 0 0.9em #0a3064, 0 0 15px #7806a0;
    border-radius: 1vw;
    transition: .9s;
    overflow: hidden;
}
.produkt .produkt-box:hover {
    transform: translateY(-7px);
    transition: .5s;
}
.produkt .produkt-box.box1 {
   background-image: url(../images/Hintergrund/eports.jpg);
   background-size: cover;
}
.produkt .produkt-box.box2 {
   background-image: url(../images/Hintergrund/gaming.jpg);
   background-size: contain;
}
.produkt .produkt-box.box3 {
   background-image: url(../images/Logo/Logo-tryit.png);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}
.produkt .produkt-box.box4 {
    background-image: url(../images/Hintergrund/tabletop.jpg);
    background-size: cover;
 }
.produkt .produkt-box.box1 h3,
.produkt .produkt-box.box2 h3,
.produkt .produkt-box.box3 h3,
.produkt .produkt-box.box4 h3 {
    font-size: 2.5vw;
    color: #fff;
    z-index: 4;
}
.produkt .produkt-box .produkt-box-btn  {
    position: relative;
    display: inline-block;
    background: var(--primary);
    color: #fff;
    margin-top: 2vw;
    padding: 10px 30px;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: 500;
    border-radius: 0.5vw;
    border: 2px solid var(--primary2);
}
.produkt .produkt-box .produkt-box-btn a {
    color: #fff;
}


/*
1.3. Footer
*/

section.footer {
    width: 100%;
    background-color: var(--primary);
}
section.footer .footer-row1 {
    width: 100%;
    margin: 0 auto;  
    padding: 2em;
    display: grid;
    grid-template-columns: 100%;
}
section.footer .footer-row1 .footer-box2,
section.footer .footer-row1 .footer-box3,
section.footer .footer-row1 .footer-box4 {
    width: 90%;  
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
section.footer .footer-row1 .footer-box5 {
    width: 90%;  
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
section.footer .footer-row1 .footer-box5 .some-box {
    width: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
} 
section.footer .footer-row1 .footer-box2 h3,
section.footer .footer-row1 .footer-box3 h3,
section.footer .footer-row1 .footer-box4 h3,
section.footer .footer-row1 .footer-box5 h3 {
    font-size: 20px;   
    padding:  2em 0 1em;
    color: var(--primary2);
}
section.footer .footer-row1 p {
    font-size: 16px;
    color: var(--color-a);
}
section.footer .footer-row1 i {
    margin-right: 1em;
    font-size: 0.9rem; 
    font-weight: 900; 
    color: var(--primary2); 
}
section.footer .footer-row1 .footer-box5 i,
section.footer .footer-row1 .footer-box5 a {
    margin-right: 1em;
    font-size: 0.9rem; 
    font-weight: 500; 
    color: var(--color-a); 
}
section.footer .footer-row1 .footer-box1 {
    display: none;
}
section.footer .footer-row2 {
    width: 90%;
    height: auto;
    margin: 0 auto;
    padding: 1em 0;
    border-top: 0.1em solid var(--primary2);  
}
section.footer .footer-row2 .footer-row2-box1 {
    display: flex;
    justify-content: center;
    align-items: center;
}
section.footer .footer-row2 .footer-row2-box1 a {
    text-decoration: none;
    font-family: 'OpenSans', sans-serif !important;
    font-size: 0.8rem; 
    font-weight: 500;
    padding: 0 0.5em;
    color: var(--color-a);
}
section.footer .footer-row2 .footer-row2-box2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2em;
}
section.footer .footer-row2 .footer-row2-box2 p {
    font-size: 12px;
    color: var(--color-a);
}
section.footer .footer-row2 .footer-row2-box2 span {
    font-family: 'AD';  
    font-weight: 500; 
    font-size: 0.9rem;
    color: var(--color-a);
}
section.footer .footer-row2 .footer-row2-box2 a {
    text-decoration: none;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    section.footer .footer-row1 {
        width: 90%;
        height: auto;
        margin: 0 auto;  
        display: grid;
        grid-template-columns: 60% 40%;
    }
    section.footer .footer-row1 h3 {
        font-size: 1.1rem;
        text-align: center;
        padding-bottom: 0.5em;
    }
    section.footer .footer-row1 p {
        font-size: 1rem;
    }
    section.footer .footer-row1 i {
        font-size: 1rem;
    }
    section.footer .footer-row1 .footer-box1 {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    section.footer .footer-row1 .footer-box1 img {
        width: 15%;
    }
    section.footer .footer-row1 .footer-box2,
    section.footer .footer-row1 .footer-box3,
    section.footer .footer-row1 .footer-box4 {
        align-items: flex-start;
    }
    section.footer .footer-row2 .footer-row2-box1 a {
        font-size: 1.2rem;
    }
    section.footer .footer-row2 .footer-row2-box2 {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }   
    section.footer .footer-row2 .footer-row2-box2 p {
        padding: 0 1em;
        font-size: 1.1rem;
    }      
    section.footer .footer-row2 .footer-row2-box2 span {
        font-size: 1rem;
    }
}

@media screen and (min-width: 1024px) {
    section.footer {
        width: 100%;
        height: auto;
    }
    section.footer .footer-row1 {
        width: 80%;
        height: auto;
        margin: 0 auto;  
        padding: 2em;
        display: grid;
        grid-template-columns: 10% 22% 20% 20% 35%;
    }
    section.footer .footer-row1 h3 {
        font-size: 1rem;   
        padding-bottom: 0.4em;
    }
    section.footer .footer-row1 i {
        margin-right: 0.9em;
        font-size: 0.8rem; 
        font-weight: 900; 
    }
    section.footer .footer-row1 p {
        margin: 0;
        font-size: 0.9rem; 
    }
   
    section.footer .footer-row1 .footer-box1 {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    section.footer .footer-row1 .footer-box1 img {
        width: 40%;
    }
    section.footer .footer-row1 .footer-box2,
    section.footer .footer-row1 .footer-box3,
    section.footer .footer-row1 .footer-box4,
    section.footer .footer-row1 .footer-box5 {
        width: 100%;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;   
    }
    section.footer .footer-row1 .footer-box5 .some-box {
        width: 80%;
        display: grid;
        grid-template-columns: 50% 50%;
    }
    section.footer .footer-row2 {
        width: 80%;
        height: auto;
        margin: 0 auto;
        padding: 1em 0 ;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    section.footer .footer-row2 .footer-row2-box1 a {
        text-decoration: none;
        padding-left: 1em;
        font-family: 'OpenSans', sans-serif !important;
        font-size: 12px; 
        transition: all 0.5s ease-in-out;
    }
    section.footer .footer-row2-box1 a:hover {
        transform: translateY(-2px) !important;
        color: var(--primary2); 
    }
    section.footer .footer-row2 .footer-row2-box2 {
        display: flex;
        flex-direction: row;
        margin: 1em;
    }
    section.footer .footer-row2-box2 p {
        margin: 0 ;
        padding-right: 1rem ;
        font-size: 0.9rem !important;
    }
    section.footer .footer-row2-box2 span {
        font-family: 'ParkLaneNF';  
        font-weight: 900; 
        font-size: 0.9rem !important;
        color: #777;
    }
    section.footer .footer-row2-box2 a {
        text-decoration: none;
    }
}

@media screen and (min-width: 1600px) {
    section.footer .footer-row1 .footer-box1 {
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
    }
    section.footer .footer-row1 .footer-box1 img {
        width: 80%;
    }
    section.footer .footer-row1 h3 {
        font-size: 1.1rem;
        padding-bottom: 0.4em;
    }
    section.footer .footer-row1 p {
        font-size: 1rem
    }
    section.footer .footer-row2 .footer-row2-box1 a {
        font-size: 1rem; 
    }
    section.footer .footer-row2-box2 p {
        font-size: 1rem !important;
    }  
    section.footer .footer-row2-box2 span {
        font-size: 1rem !important;
    }  
}


/* Tuniere */
/* neu */

section.play {
    width: 100%;
    background-color: var(--primary);
}
section.play .play-row {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary);
    border-top: 0.1px solid var(--primary2);
    border-bottom: 0.1px solid var(--primary2);
}
section.play .play-row h2 {
    font-family: 'Arise';
    font-size: 2.5vw;
    color: var(--logo-color);
    padding: 1em 0;
}
  section.play .content {
    width: 100%;
    margin: auto;
    overflow: auto;
    padding: 6em 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  section.play .content .card {
    margin-bottom: 2rem;
    box-shadow: none;
  }
  
  section.play .content .card img {
    width: 100%;
    z-index: 3;
  }
  section.play .content .card .card-txt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 1em;
  }
  section.play .content .card h2 {
    font-size: 2.5rem;
    color: var(--logo-color);
    padding-bottom: 1em;
  }
  section.play .content .card h3 {
    margin: 1rem 0;    
    color: var(--primary2);
  }
  section.play .content .card .card-txt p {
    padding: 0 3em;    
    color: #fff;
  }
  section.play .content .btn {
    display: inline-block;
    background-color: var(--primary2);
    padding: 0.4em 1.5em;
    margin: 2em 0;
    text-align: center;
    cursor: pointer;
    border-radius: 0.5em;
  }
  section.play .content .btn a {
    color: #fff;
  }
  #service .content .btn:hover {
    opacity: 0.8;
  }
  
  @media screen and (min-width: 768px) and (max-width: 1023px) {
    .title-text h2 {  
        padding: 0 0.5em 1em;
    } 
  }
  
  @media screen and (min-width: 1024px) {
    section.play .content {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        grid-gap: 0.5px;
        overflow: hidden;
    }
    .title-text h2 {  
        text-align: center;
        padding: 0 1em;
    }
    section.play .content .card {
        min-width: 100%;
        margin: 2em auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        text-align: left;
    }
    section.play .content .card .card-txt {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 0 8em;
      }
    section.play .content .card h3 {
     
        font-size: 1.3rem;   
        text-align: left;
    }
    section.play .content .card .card-txt ul {
        padding-left: 2em;
    }
    section.play .content .card .card-txt li {
        font-size: 1.3rem;   
        padding: 0;
        color: var(--color-h1);
        list-style-type: disc;
    }
    section.play .content .card .card-txt .crossplay ul {
        display: flex;
        flex-direction: row;
        gap: 2em;
        padding-top: 2em;
    }
    section.play .content .card .card-txt .crossplay ul li {
        list-style: none;
    }
    section.play .content .card .card-txt .crossplay ul li i {
        font-size: 1.8rem;
    }
    section.play .content .card img {
        width: 100%;
        height: 100%;
    }
    section.play .content .card > div {
        width: 100%;
        margin: auto 0;
    }
    section.play .content .card:nth-child(even) img {
        order: 2;
    }
    section.play .content .card .card-txt.left {
        margin-left: -0.5em;
    }
    section.play .content .card .card-txt.right {
        margin-left: 0.5em;
        z-index: 2;
    }
    section.play .content .btn {
       margin-left: 1em;
      }
    section.play .content .card .card-txt .register p {
        padding-left: 1em;
    }
    section.play .content .card .card-txt .register a {
        color: var(--primary2);
        font-size: 1.2rem;
        padding-left: 1em;
    }
    
  }
  

/* alt */
/*
section.play {
    width: 100%;
    background-color: red;
}
section.play .play-row {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary);
    border-top: 2px solid var(--logo-color);
    border-bottom: 2px solid var(--logo-color);
}
section.play .play-row h2 {
    font-family: 'Arise';
    font-size: 2.5vw;
    color: var(--logo-color);
    padding: 1.5vw 0;
}
.play-event-row {
    width: 90%;
    margin: 5em auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.play-event-box {
    width: 100%;
    border: 1px solid var(--logo-color);
    border-radius: 1vw;
    margin: 2vw 0.5vw;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 15vw 1fr;
    background-color: var(--primary);
    position: relative;
}
.play-event-box h3 {
    color: var(--logo-color);
    text-align: center;
    font-size: 1vw;
}
.play-event-box h4 {
    font-size: 0.7vw;
    color: var(--color-a);
    padding: 0 2vw;
    margin: 0.2vw;
}
.box-header-fifa {
    background-image: url(../images/events/kilian.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    border-top-right-radius: 1vw;
    border-top-left-radius: 1vw;
    border-bottom: 2px solid var(--primary2);
    grid-column: 1/2;
    grid-row: 1/2;
}
.box-header-mw2 {
    background-image: url(../images/events/MW21.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    border-top-right-radius: 1vw;
    border-top-left-radius: 1vw;
    border-bottom: 2px solid var(--primary2);
    grid-column: 1/2;
    grid-row: 1/2;
}
.box-header-rocket {
    background-image: url(../images/events/RocketLeague.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    border-top-right-radius: 1vw;
    border-top-left-radius: 1vw;
    border-bottom: 2px solid var(--primary2);
    grid-column: 1/2;
    grid-row: 1/2;
}
.box-header-fortnite {
    background-image: url(../images/events/fortnite.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    border-top-right-radius: 1vw;
    border-top-left-radius: 1vw;
    border-bottom: 2px solid var(--primary2);
    grid-column: 1/2;
    grid-row: 1/2;
}
.event-disc {
    padding-top: 1vw;
}
.event-disc ul {
    display: flex;
    align-items: center;
    padding: 1vw 0 1vw 2vw;
}
.event-disc i {
    color: var(--color-a);
    padding-right: 1vw;
}
.play-event-box .box-inner {
    display: flex;
    justify-content: center;
    color: #aaa;
    font-size: 0.5vw;
}
.play-event-box .box-inner span {
    padding: 0 5px 0 15px;
    font-weight: 900;
}
.event-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}
.event-btn button {
    background-color: var(--logo-color);
    color: var(--primary);
    padding: 10px;
    border-radius: 10px;
    margin: 20px;
    font-size: 0.6vw;
    font-weight: 900;
    width: auto;
}


/* EVENTS */
/* neu */

section.events {
    width: 100%;
    background-color: var(--primary);
    padding-bottom: 5em;
}
section.events .events-row {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 0.1px solid var(--primary2);
    border-bottom: 0.1px solid var(--primary2);
}
section.events .events-row h2 {
    font-family: 'Arise';
    font-size: 2.5vw;
    color: var(--logo-color);
    padding: 1em 0;
}
section.events .content {
    width: 95%;
    height: 100%;
    margin: 6em auto;
    display: grid;
    grid-template-columns: 55% 45%;
}
section.events .content .content-img {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto;
}
section.events .content .content-img .row {
    width: 100%;
    height: 100%;
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: auto auto;
    box-sizing: border-box;
}
section.events .content .content-img .row .event-card-panel {
    position: relative;
    width: 100%;
    height: 34vh;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 80% 20%;
    overflow: hidden;
}
section.events .content .content-img .row .event-card-panel#img1 {
    background-image: url(../images/events/MW2.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
section.events .content .content-img .row .event-card-panel#img2 {
    background-image: url(../images/events/fc25.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
section.events .content .content-img .row .event-card-panel#img3 {
    background-image: url(../images/events/tekken.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
section.events .content .content-img .row .event-card-panel#img4 {
    background-image: url(../images/events/monsterhunter.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
section.events .content .content-img .row .event-card-panel#img5 {
    background-image: url(../images/events/rocket.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
section.events .content .content-img .row .event-card-panel#img6 {
    background-image: url(../images/events/fortnite.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
section.events .content .content-img .row .event-card-panel#img7 {
    background-image: url(../images/events/lol.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
section.events .content .content-img .row .event-card-panel#img8 {
    background-image: url(../images/events/cardgaming.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
section.events .content .content-img .row .event-card-panel .event-textBx {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-opacity1);
    color: var(--primary2);
    font-family: 'OpenSans';
    font-weight: 700;
}
section.events .content .content-img .row .event-card-panel .event-textBx p {
    font-size: 1.5rem;
    padding: 1em 0;
}
section.events .content .content-txt {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
}
section.events .content .content-txt h2 {
    color: var(--primary2);
    font-size: 2rem;
}
section.events .content .content-txt h3 {
    color: var(--primary2);
    font-size: 1.7rem;
    padding-top: 1em;
}
section.events .content .content-txt p {
    width: 60%;
    font-size: 1.4rem;
    padding-top: 3em;
}
/* alt */

/*
section.event {
    width: 100%;
    padding-bottom: 2em;
    border-top: 1px solid var(--border-bottom);
}
section.event .play-row {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary);
    border-top: 2px solid var(--logo-color);
    border-bottom: 2px solid var(--logo-color);
}
section.event .play-row h2 {
    font-family: 'Arise';
    font-size: 2.5vw;
    color: var(--logo-color);
    padding: 1.5vw 0;
}
section.event .event-box {
    width: 90%;
    margin: 1em auto;
    display: grid;
    grid-template-columns: 100%;
    box-sizing: border-box;
    padding: 0;
}
section.event .event-box .event-imgBx img {
    width: 100%;
}
section.event .event-box .event-textBx {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-opacity1);
    color: var(--primary2);
    font-family: 'OpenSans';
    font-weight: 700;
}
section.event .event-box .event-textBx p {
    font-size: 1.1rem;
    padding: 1vw;
}
section.event .event-box .event-card-panel1,
section.event .event-box .event-card-panel2,
section.event .event-box .event-card-panel3,
section.event .event-box .event-card-panel4,
section.event .event-box .event-card-panel5, 
section.event .event-box .event-card-panel6,
section.event .event-box .event-card-panel7,
section.event .event-box .event-card-panel8 {
    position: relative;
    width: 100%;
    height: 34vh;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 80% 20%;
    border-radius: 0em;
    border: 2px solid var(--primary2);
    overflow: hidden;
    margin-top: 1em;
    border-radius: 1vw;
}
section.event .event-box .event-card-panel1 {
    background-image: url(../images/events/MW2.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
section.event .event-box .event-card-panel2 {
    background-image: url(../images/events/fifa23.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
section.event .event-box .event-card-panel3 {
    background-image: url(../images/events/RocketLeague.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
section.event .event-box .event-card-panel4 {
    background-image: url(../images/events/fortnite.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
section.event .event-box .event-card-panel5 {
    background-image: url(../images/events/lol2.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
section.event .event-box .event-card-panel6 {
    background-image: url(../images/events/tt.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
section.event .event-box .event-card-panel7 {
    background-image: url(../images/events/yugioh.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
section.event .event-box .event-card-panel8 {
    background-image: url(../images/events/pokemon.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    section.event .event-row h2 {  
        padding: 2em 1em; 
    }
    section.event .event-row h2 span {  
        padding-right: 0.3em;
    }
    section.event .event-row h2 br {  
        display: none;
    }
    section.event .event-box {
        width: 95%;
        margin: 1em auto;
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(3, 33%);
        grid-template-rows: auto auto;
        box-sizing: border-box;
    }
    section.event .event-box .event-card-panel1,
    section.event .event-box .event-card-panel2,
    section.event .event-box .event-card-panel3,
    section.event .event-box .event-card-panel4,
    section.event .event-box .event-card-panel5,
    section.event .event-box .event-card-panel6,
    section.event .event-box .event-card-panel7,
    section.event .event-box .event-card-panel8 {
        position: relative;
        width: 100%;
        height: 30vh;
    }
    section.event .event-box .event-textBx p {
        font-weight: 600;
    }
}

@media screen and (min-width: 1024px) {
    section.event {
        width: 100%;
        padding-bottom: 2em;
        border-top: 1px solid var(--border-bottom);
    }
    section.event .event-row h2 {  
        padding: 0 0 2em; 
    }
    section.event .event-row h2 br {  
        display: none;
    }
    section.event .event-box {
        width: 70%;
        margin: 5em auto;
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(4, 24%);
        box-sizing: border-box;
    }
    section.event .event-box .event-textBx p {
        padding: 0.5vw;
        font-size: 1.1vw;
    }
    section.event .event-box .event-card-panel1,
    section.event .event-box .event-card-panel2,
    section.event .event-box .event-card-panel3,
    section.event .event-box .event-card-panel4,
    section.event .event-box .event-card-panel5,
    section.event .event-box .event-card-panel6,
    section.event .event-box .event-card-panel7,
    section.event .event-box .event-card-panel8 {
        position: relative;
        width: 100%;
        margin-top: 0.5em;
        height: 35vh;
        border-radius: none;
        transition: 0.5s ease-in-out;
    }
    section.event .event-box .event-card-panel1:hover,
    section.event .event-box .event-card-panel2:hover,
    section.event .event-box .event-card-panel3:hover,
    section.event .event-box .event-card-panel4:hover,
    section.event .event-box .event-card-panel5:hover,
    section.event .event-box .event-card-panel6:hover,
    section.event .event-box .event-card-panel7:hover,
    section.event .event-box .event-card-panel8:hover {
        box-shadow: 0 1px 19px 5px #666;
    }
    section.event .event-box .event-textBx p {
        font-weight: 600;
    }
}

@media screen and (min-width: 1600px) {
    section.event .event-box .event-card-panel1,
    section.event .event-box .event-card-panel2,
    section.event .event-box .event-card-panel3,
    section.event .event-box .event-card-panel4,
    section.event .event-box .event-card-panel5,
    section.event .event-box .event-card-panel6 {
        box-shadow: none;
    }
}

/* TEAM */

/* alt

section.team {
    width: 100%;
    margin: 0 auto;
}
section.team .team-desc {
    width: 80%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 60% 40%;
    background-color: var(--primary);
}
section.team .team-info {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--primary2);
} 
section.team .team-info h2 { 
    font-family: 'OpenSans', sans-serif;  
    color: #fff;
    text-transform: uppercase;
    text-shadow: var(--text-shadow); 
    font-size: 5vw;
    padding-bottom: 20px;   
}
section.team .team-info h3 {
    color: #e31e99;
    font-size: 5.5vw;
    font-weight: 900;
    font-family: 'Arise', sans-serif;
    text-transform: uppercase ;
    letter-spacing: 1vw;
    text-shadow: 1px 2px 55px #e31e99;   
    padding-left: 1vw;  
}
section.team .team-pages {
    width: 100%;
    height: 380vh;
    background-color: var(--primary);
}
.team-pages .TBOX {
    width: 100%;
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.team-pages .TBOX:nth-child(1) {
    position: relative;
}
.team-pages div:nth-child(2) {
    position: relative; 
}
.team-pages div:nth-child(3) {
    position: relative;
}
.team-pages .TBOX-card {
    border: 2px solid #fff;
    width: 80%;
    height: 60%;
    background: #030529;  
    border-radius: 40px;
    box-shadow: 0  0 15px #7806a0;
    border: 1px solid #7806a0;
    margin-top: 5em;

}
.team-pages .TBOX-card {
    position: absolute;
    width: 25vw;
    height: 25vw;
    background: #000;
    border: 2px solid #e31e99;
    border-radius: 0.7rem;
 
}
.team-pages .TBOX-card .image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
}
.team-pages .TBOX-card .image img {
    width: 100%;
    transition: .5s;
}
.team-pages .TBOX-card:hover .image img {
    opacity: .5;
    transform: translateX(30%);
}
.team-pages .TBOX-card .details {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
    background: #250008;
    transition: .5s;
    transform-origin: left;
    transform: perspective(2000px) rotateY(-90deg);
    border-radius: 10px;
}
.team-pages .TBOX-card:hover .details {
    transform: perspective(2000px) rotateY(0deg);
}
.team-pages .TBOX-card .details .center {
    padding: 20px;
    text-align: center;
    background: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.team-pages .TBOX-card .details .center h1 {
    margin: 0;
    padding: 0;
    color: #030529;
    line-height: 1.6vw;
    font-size: 1.3vw;
    text-transform: uppercase;
    font-family: 'Arise';
}
.team-pages .TBOX-card .details .center h1 span {
    font-size: 0.8vw;
    color: #262626;
}
.team-pages .TBOX-card .details .center p {
    margin: 10px 0;
    padding: 0;
    font-size: 1vw;
    color: #262626;
    font-weight: 900;
}
.team-pages .TBOX-card .details .center ul {
    margin: 1vw auto 0;
    padding: 0;
    display: table;    
}
.team-pages .TBOX-card .details .center ul li {
    list-style: none;
    margin: 0 5px;
    float: left;
}
.team-pages .TBOX-card .details .center ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #030529;
    width: 2vw;
    height: 2vw;
    border-radius: 50%;
    border: 2px solid #e31e99;
    box-sizing: border-box;
    text-align: center;
    transform: .5s;
}
.team-pages .TBOX-card .details .center ul li a:hover {
    background: #e31e99;
    color: #fff;
}
*/

/*  Team neu  */

.raceWrapper{
	width: 100%;
	height: 100vh;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 15vh 55vh 35vh;
}
.races {
	width:fit-content;
	height: 35vh;
	display:flex;
	flex-wrap:nowrap;
	grid-column: 1/2;
	grid-row: 3/4;
	padding: 1em 0 10em;
    background-color: var(--primary);
    border-bottom: 0.5px solid var(--primary2);
}
.races .content {
	flex-shrink: 0;
	width: auto;
	display: grid;
	grid-template-columns: 12vw 1fr;
	margin: 0 5em;
	overflow: hidden;
}
.races .content:first-child {
    margin-left: 5em;
}
.races .content .box-img {
	width: 100%;
	grid-column: 1/2;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 2em;
}
.races .content .box-img#PL {
	background-image: url(../images/team/Phillip\ Lomoth\ alias\ Mobsy\ Gaming\ Social\ Media.jpg);
}
.races .content .box-img#PB {
	background-image: url(../images/team/Patrick\ Bansomer\ alias\ Al\ Sahir\ Social\ Media.jpg);
}
.races .content .box-img#MR {
	background-image: url(../images/team/Maik\ Radtke\ alias\ Maikipedia\ TableTop\ .jpg);
}
.races .content .box-img#PF {
	background-image: url(../images/team/Philip\ Frömming\ alias\ BullitGold\ Gaming.jpg);
}
.races .content .box-img#LS {
	background-image: url(../images/team/Leon\ Schorn\ alias\ Schorny\ Techniker\ .jpg);
}
.races .content .box-TxT {
	width: 100%;
	height: 100%;
	grid-column: 2/3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	justify-items: center;
	padding-left: 2em;
}
.races .content .box-TxT h1 {
	font-size: 2rem;
	color: var(--primary2);
	margin: 0;
}
.races .content .box-TxT h1 span {
	font-size: 1.5rem;
	color: var(--color-h1);
}
.races .content .box-TxT p {
	font-size: 1.5rem;
	margin: 0;
	padding-top: 0.5em;
    color: var(--color-h1);
}
.races .content .box-TxT .some {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-top: 2em;
}
.races .content .box-TxT .some i {
	padding-right: 1em;
	font-size: 2rem;
	color: var(--primary2);
}
section.about {
	width: 100%;
}
section.about .about-row {
	width: 100%;
	height: 15vh;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--primary);
    border-top: 0.5px solid var(--primary2);
	border-bottom: 0.5px solid var(--primary2);
	grid-column: 1/2;
	grid-row: 1/2;
}
section.about .about-row h2 {
	font-family: 'Arise';
	font-size: 2.5vw;
	color: var(--logo-color);
}
.container-about {
	width: 100%;
	height: 55vh;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: var(--primary);
	grid-column: 1/2;
	grid-row: 2/3;
    color: var(--color-h1);
}
.container-about .row {
	width: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 100%;
	justify-content: space-around;
}
.service-about-box {
	width: 100%;
	margin-bottom: 0.5em;
	padding-bottom: 1em;
	display: grid;
	border: 0.1em solid gray;
	border-radius: 1em;
	overflow: hidden;
	position: relative;
	color: var(--color-h1);
	background-color: var(--bg-color-white) ;
	transition: all 0.5s ease;
}
.service-about-text {
	width: 100%;
	margin: 0 auto;
	grid-column: 1/3;
	grid-row: 2/3;
	display: flex;

}
.service-about-text h2 {
	font-size: 1.6rem;
	font-weight: bolder;   
	color: var(--first-color);
	padding: 0.5em 0;
}
.service-about-text p {
	font-size: 1.2rem;
	padding: 0.5em 3em;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.guest-service h1 br {  
			display: none;
	}
	.container-about .row {
			width: 95%;
			margin: 0 auto;
			display: grid;
			grid-template-columns: repeat(3, 32%);
			justify-content: space-around;
	}
}   

@media screen and (min-width: 1024px) {
	.container-about h3 {
			width: 50%;
			text-align: center;
			text-wrap: balance;
			padding: 2em 0;
	}
	.container-about .row {
			width: 80%;
			margin: 0 auto;
			display: grid;
			grid-template-columns: repeat(2, 50%);
			justify-content: space-around;
	}
	.service-about-box {
			
			border: 0.1em solid transparent;
	}
	.service-about-text {
			width: 80%;
			margin: 0 auto;
			grid-column: 1/3;
			grid-row: 2/3;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
		}

}

@media only screen and (min-width: 1600px) {
	
}

/* Log In */

.wrapper-login {
    width: 100vw;
    background-color: var(--primary);
    position: relative;
}
.member-desc {
    width: 100%;
    padding-bottom: 2em;
}
.wrapper-login .member-desc .member-row {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--primary);
    border-top: 0.1px solid var(--primary2);
    border-bottom: 0.1px solid var(--primary2);
}
.member-desc .member-row h2 {
    font-family: 'Arise';
    font-size: 2.5vw;
    color: var(--logo-color);
    padding: 1em 0;
}
.member-desc .content {
    width: 100%;
    margin: auto;
    overflow: hidden;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .member-desc .content .card {
    margin-bottom: 2rem;
    box-shadow: none;
  }
  
  .member-desc .content .card img {
    width: 100%;
    z-index: 3;
  }

.member-desc .desc-box {
    width: 50%;
    margin: 2em auto 0;
    padding: 1em 0 0;
    text-wrap: balance;
    text-align: justify;
}
.member-desc .desc-box h3 {
    text-align: center;
    padding-bottom: 2em;
    font-size: 1.5rem;
    color: var(--color-h1);
}
.member-desc .desc-box p {
    text-align: center;
    padding-bottom: 2em;
    font-size: 1.2rem;
    color: var(--color-h1);
}




@media screen and (min-width: 768px) and (max-width: 1023px) {
    
}

@media screen and (min-width: 1024px) {

    .member-desc .content .card {
        min-width: 100%;
        margin: 2em auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .member-desc .content .card.start {
        margin: 8em auto ;
    }
    .member-desc .content .card .card-image {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .member-desc .content .card .card-image img {
        width: 50%;
    }
    .member-desc .content .card .card-txt {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 5em;
        margin: 0;
      }
    .member-desc .content .card-txt h3 {
        font-size: 2rem;
        text-align: center;   
        color: var(--primary2);
        padding-bottom: 2em;
    }
    .member-desc .content .card p {
        font-size: 1.5rem;
        text-align: center;   
        color: var(--color-h1);
        text-wrap: balance;
    }

    .member-desc .content .card img {
        width: 100%;
        height: 100%;
    }
    .member-desc .content .card > div {
        width: 100%;
        margin: auto 0;
    }
    .member-desc .content .card:nth-child(even) img {
        order: 2;
    }
    .member-desc .content .card .card-txt.left h3 {
        font-size: 1.5rem;
        text-align: right;   
        color: var(--primary2);
        padding: 0;
    }
    .member-desc .content .card .card-txt.left p {
        font-size: 1.2rem;
        text-align: right;   
        color: var(--color-h1);
        padding: 1em 0;
    }
    .member-desc .content .card .card-txt.right h3 {
        font-size: 1.5rem;
        text-align: left;   
        color: var(--primary2);
        padding: 0;
    }
    .member-desc .content .card .card-txt.right p {
        font-size: 1.2rem;
        text-align: left;   
        color: var(--color-h1);
        padding: 1em 0;
    }
    section.faq {
        width: 50%;
        height: 30vh;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    section.faq .faq-txt {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    section.faq .faq-txt h4 {
        font-size: 2.5rem;
        color: var(--color-h1);
    }
    section.faq .faq-txt h4 span {
       color: var(--primary2);
    }
    section.faq .faq-txt p {
        color: var(--color-h1);
        padding: 2em 0;
    }
    section.faq .faq-txt .btn-faq button {
        background-color: var(--primary2);
        padding: 1em;
        border-radius: 1em;
    }
    section.faq .faq-txt .btn-faq button a {
        color: var(--color-h1);
    }
    section.faq .faq-img {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    section.faq .faq-img img {
        width: 80%;
    }
    section.preis {
        width: 100%;
        height: 80vh;
        margin: 10em auto;
    }
    section.preis .preis-content {
        width: 80%;
        height: 100%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 70% 30%;
        background-image: url(../images/news/clubhouse.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top;
    }
    section.preis .preis-content .preis-image {
        width: 100%;
        height: 100%;
    }
    section.preis .preis-content .preis-txt {
        position: relative;
        width: 100%;
        height: 100%;
        grid-row: 2/3;
        background: var(--primary2-opacity);
    }
    section.preis .preis-content .preis-txt-content {
        position: absolute;
        width: 60%;
        height: 40vh;
        margin: 0 20%;
        top: -20vh;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2em;
    }
    section.preis .preis-content .preis-txt-content .box {
        width: 100%;
        background-color: var(--primary);
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 30% 70%;
        border-radius: 1em;
    }
    section.preis .preis-content .preis-txt-content .box .headline {
        width: 90%;
        margin: 1em auto;
        padding: 1em;
        background-color: var(--primary2);
        border-radius: 1em;
        box-shadow: var(--box-shadow);
    }
    section.preis .preis-content .preis-txt-content .box .headline h3 {
        font-size: 2rem;
    }
    section.preis .preis-content .preis-txt-content .box .headline p {
        font-size: 1rem;
        color: var(--color-h1);
    }
    section.preis .preis-content .preis-txt-content .box .row-member  {
        width: 80%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        font-size: 1rem;
        color: var(--color-h1);
    }
    section.preis .preis-content .preis-txt-content .box .row  {
        width: 80%;
        height: 100%;
        margin: 0 auto;
        padding: 2em 0;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 80% 20%;
        font-size: 1rem;
        color: var(--color-h1);
    }
    section.preis .preis-content .preis-txt-content .box .row i {
        color: var(--primary2);
        padding-right: 1em;
    }
    section.preis .preis-content .preis-txt-content .box .row button {
        padding: 1em;
        background-color: var(--primary2);
        box-shadow: none;
        color: var(--color-h1);
        border-radius: 1em;
        width: 40%;
        height: 100%;
    }
}


@media screen and (min-width: 1600px) {
    .member-desc .why-box .why-box-panel  {
        box-shadow: none;
    }
}
.login {
    width: 70vw;
    margin: 0 auto;
    padding: 10vh 0;
    height: auto;
    display: grid;
    grid-template-columns: 49.5% 49.5%;
    grid-template-rows: 15% 69% 15%;
    grid-gap: 1%;
}
.login-logo-box {
    width: 100%;
    height: 100%;
    grid-column: 1/2;
    grid-row: 1/4;
    background: url(../images/Logo/Logo-tryit.png) no-repeat;
    background-size: contain;
    background-position: center;
}
.login-box {
    width: 100%;
    height: 100%;
    grid-column: 2/3;
    grid-row: 2/3;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container {
    position: relative;
    width: 80%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary);
    box-shadow: 25px 25px 75px rgba(0,0,0,0.25),
    10px 10px 70px rgba(0,0,0,0.25),
    inset 5px 5px 10px rgba(0,0,0,0.25),
    inset 5px 5px 20px rgba(255,255,255,0.2),
    inset -5px -5px 15px rgba(0,0,0,0.75);
    border-radius: 0.5em;
    padding: 1em 1em 0;
}
.container p {
    color: var(--logo-color);
    font-size: 1.5vw;
    padding: 1em 0 0;
    text-align: center;
}
.container h1 {
    color: var(--logo-color);
    text-align: center;
    padding: 1em 1em 2em ;
    font-size: 1.5vw;
}
.container h1 span {
    font-family: 'Arise';
    color: var(--logo-color);
    font-size: 2.2vw;
}
.inputs_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.login .container form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
form .inputs_container#login_box input {
    height: 2.5vw;
    width: 12vw;
    margin: 0 0.5vw 1vw;
    padding: 0 1.5vw;
    border-radius: 0.5vw;
    border: 0.5px solid var(--logo-color);
    background-color: var(--primary);
    box-shadow: 3px 3px 6px rgba(0,0,0,0.212);
    color: #fff;
    font-size: 0.7vw;
    box-sizing: border-box;
}
form .inputs_container#login_box input:hover {
    background-color: #47505f;
}
form .inputs_container#login_box input:focus {
    outline: none;
    background-color: #47505f;
    width: 12vw;
}
form .inputs_container#login_box input::placeholder {
    color: rgb(159,161,190);
}

form .inputs_container#register_box input:hover {
    background-color: #47505f;
}
form .inputs_container#register_box input:focus {
    outline: none;
    background-color: #47505f;
    width: 12vw;
}
form .inputs_container#login_box input::placeholder {
    color: rgb(159,161,190);
}
form button {
    font-size: 0.9vw;
    font-weight: 900;
    color: var(--color-h1);
    background-color: var(--primary);
    letter-spacing: 2px;
    padding: 0.5vw 2vw;
    border-radius: 0.5vw;
    border: 0.5px solid var(--logo-color);
}
form button:hover {
    background-color: var(--color-h1);
    color: var(--primary);
    border: 0.5px solid var(--color-h1);
}
.login .container button a{
    text-decoration: none;
    color: var(--primary2);
    font-weight: 900;
    
}
.login .register p {
    color: rgb(159,161,190);
    font-size: 1rem;
    margin: 1em 0 2em;
}
.login .register p a {
    padding-left: 1em;
    color: var(--color-h1);
}
/* carousel */
.carousel{
    height: 100vh;
    margin-top: -8em;
    width: 100vw;
    overflow: hidden;
    position: relative;
}
.carousel .list .item{
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0 0 0 0;
}
.carousel .list .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.carousel .list .item .content{
    position: absolute;
    top: 20%;
    width: 35%;
    left: 30%;
    padding: 3em;
    transform: translateX(-50%);
    padding-right: 0%;
    box-sizing: border-box;
    color: #fff;
    text-shadow: 0 5px 10px #0004;
    background: linear-gradient(135deg, rgba(255,255,255, 0.1), rgba(255,255,255,0.05));
    backdrop-filter: blur(10px);
    border-radius: 2em;
    border:  1px solid rgba(255,255,255,0.1);
    box-shadow: 0 8px 32px 0 rgba(0,0,0, 0.37);
}
.carousel .list .item .author{
    font-weight: bold;
    letter-spacing: 10px;
    margin-top: 1em;
    color: var(--primary2);
    font-family: 'Arise';
    font-size: 45px;
    font-weight: 500; 
    text-shadow: var(--text-shadow);
}
.carousel .list .item .author span {
    font-family: 'OS';
    font-size: 25px;
    padding-left: 1em;
    color: #fff;
}
.carousel .list .item .title,
.carousel .list .item .topic{
    font-size: 5em;
    font-weight: bold;
    line-height: 1.3em;
}
.carousel .list .item .topic{
    color: #e31e99;
}
.carousel .list .item .des{
    padding-right: 5em;
    font-size: 1rem;
}
.carousel .list .item .buttons{
    display: grid;
    grid-template-columns: repeat(2, 200px);
    grid-template-rows: 40px;
    gap: 5px;
    margin-top: 20px;
    margin-bottom: 3em;
}
.carousel .list .item .buttons button{
    border: none;
    background-color: #e31e99;
    color: #000;
    letter-spacing: 3px;
    font-family: Poppins;
    font-weight: 900;
}
.carousel .list .item .buttons button:nth-child(2){
    background-color: #e31e99;
    border: 1px solid #000;
    color: #eee;
}
/* thumbail */
.thumbnail{
    position: absolute;
    bottom: 50px;
    left: 50%;
    width: max-content;
    z-index: 100;
    display: flex;
    gap: 20px;
}
.thumbnail .item{
    width: 150px;
    height: 220px;
    flex-shrink: 0;
    position: relative;
}
.thumbnail .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
.thumbnail .item .content{
    color: #fff;
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
}
.thumbnail .item .content .title{
    font-weight: 500;
}
.thumbnail .item .content .description {
    font-weight: 300;
}
/* arrows */
.arrows{
    position: absolute;
    top: 80%;
    right: 52%;
    z-index: 100;
    width: 300px;
    max-width: 30%;
    display: flex;
    gap: 10px;
    align-items: center;
}
.arrows button{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #eee4;
    border: none;
    color: #fff;
    font-family: monospace;
    font-weight: bold;
    transition: .5s;
}
.arrows button:hover{
    background-color: #fff;
    color: #000;
}

/* animation */
.carousel .list .item:nth-child(1){
    z-index: 1;
}

/* animation text in first item */
.carousel .list .item:nth-child(1) .content
{
    filter: blur(20px);
    opacity: 0;
    animation: showBG .5s 1s linear 1 forwards;
}
@keyframes showBG {
    to{
        filter: blur(0px);
        opacity: 1;
    }
}

.carousel .list .item:nth-child(1) .content .author,
.carousel .list .item:nth-child(1) .content .title,
.carousel .list .item:nth-child(1) .content .topic,
.carousel .list .item:nth-child(1) .content .des,
.carousel .list .item:nth-child(1) .content .buttons
{
    transform: translateY(50px);
    filter: blur(20px);
    opacity: 0;
    animation: showContent .5s 1s linear 1 forwards;
}
@keyframes showContent{
    to{
        transform: translateY(0px);
        filter: blur(0px);
        opacity: 1;
    }
}
.carousel .list .item:nth-child(1) .content .title{
    animation-delay: 1.2s!important;
}
.carousel .list .item:nth-child(1) .content .topic{
    animation-delay: 1.4s!important;
}
.carousel .list .item:nth-child(1) .content .des{
    animation-delay: 1.6s!important;
}
.carousel .list .item:nth-child(1) .content .buttons{
    animation-delay: 1.8s!important;
}
/* create animation when next click */
.carousel.next .list .item:nth-child(1) img{
    width: 150px;
    height: 220px;
    position: absolute;
    bottom: 50px;
    left: 50%;
    border-radius: 30px;
    animation: showImage .5s linear 1 forwards;
}
@keyframes showImage{
    to{
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

.carousel.next .thumbnail .item:nth-last-child(1){
    overflow: hidden;
    animation: showThumbnail .5s linear 1 forwards;
}
.carousel.prev .list .item img{
    z-index: 100;
}
@keyframes showThumbnail{
    from{
        width: 0;
        opacity: 0;
    }
}
.carousel.next .thumbnail{
    animation: effectNext .5s linear 1 forwards;
}

@keyframes effectNext{
    from{
        transform: translateX(150px);
    }
}

/* running time */

.carousel .time{
    position: absolute;
    z-index: 1000;
    width: 0%;
    height: 3px;
    background-color: var(--logo-color);
    left: 0;
    bottom: 0;
}

.carousel.next .time,
.carousel.prev .time{
    animation: runningTime 4s linear 1 forwards;
}
@keyframes runningTime{
    from{ width: 100%}
    to{width: 0}
}


/* prev click */

.carousel.prev .list .item:nth-child(2){
    z-index: 2;
}

.carousel.prev .list .item:nth-child(2) img{
    animation: outFrame 0.5s linear 1 forwards;
    position: absolute;
    bottom: 0;
    left: 0;
}
@keyframes outFrame{
    to{
        width: 150px;
        height: 220px;
        bottom: 50px;
        left: 50%;
        border-radius: 20px;
    }
}

.carousel.prev .thumbnail .item:nth-child(1){
    overflow: hidden;
    opacity: 0;
    animation: showThumbnail .5s linear 1 forwards;
}
.carousel.next .arrows button,
.carousel.prev .arrows button{
    pointer-events: none;
}
.carousel.prev .list .item:nth-child(2) .content .author,
.carousel.prev .list .item:nth-child(2) .content .title,
.carousel.prev .list .item:nth-child(2) .content .topic,
.carousel.prev .list .item:nth-child(2) .content .des,
.carousel.prev .list .item:nth-child(2) .content .buttons
{
    animation: contentOut 1.5s linear 1 forwards!important;
}

@keyframes contentOut{
    to{
        transform: translateY(-150px);
        filter: blur(20px);
        opacity: 0;
    }
}
@media screen and (max-width: 678px) {
    .carousel .list .item .content{
        padding-right: 0;
    }
    .carousel .list .item .content .title{
        font-size: 30px;
    }
}

/*  Slider */

.wrapper-slider {
    width: 100%;
    height: 100%;
    padding: 5em 0;
    background-color: var(--primary);
}
.slider-logos {
    position: relative;
    overflow: hidden;
    padding: 0;
    white-space: nowrap;
  }
  
  .slider-logos:hover .logos-slide {
    animation-play-state: paused;
  }
  .logos-slide {
    display: inline-block;
    animation: 50s slide infinite linear;
  }
  @keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
  }
  .logos-slide img{
    height: 50px;
    margin: 0 2em;
  }
  .logos-slide a {
    padding: 0;
  }
  .slider-logos:hover .logos-slide.back {
    animation-play-state: paused;
  }
  .logos-slide.back {
    display: inline-block;
    animation: 50s slideback infinite linear;
  }
  @keyframes slideback {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
  }
  
  /* Small devices (portrait tablets and large phones, 600px and up) */
  @media only screen and (min-width: 600px) {
  
  }
  
  /* Medium devices (landscape tablets, 768px and up) */
  @media only screen and (min-width: 768px) {
    .slider-logos {
      padding: 0 0 5em;
    }
    .logos-slide img{
      height: 100px;
    }
  }
  
  /* Large devices (laptops/desktops, 992px and up) */
  @media only screen and (min-width: 992px) {
    
  }
  
  /* Extra large devices (large laptops and desktops, 1200px and up) */
  @media only screen and (min-width: 1200px) {
    .logos-slide img{
      height: 4em;
    }
  }
  
  /* Extra large devices (large laptops and desktops, 1920px and up) */
  @media only screen and (min-width: 1920px) {
  
  }
  
  main .section-slider{
    width: min(1200px, 90vw);
    margin: auto;
    padding: 0 0 1.5em;
  }
  .slider{
    width: 100%;
    height: var(--height);
    overflow: hidden;
    mask-image: linear-gradient(to right,transparent, #000 10% 90%,transparent);
    padding: 0 0 1.5em;
  }
  .slider .list{
    display: flex;
    width: 100%;
    height: 100%;
    min-width: calc(var(--width) * var(--quantity));
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .slider .list .item{
    width: var(--width);
    height: var(--height);
    position: absolute;
    left: 100%;
    animation-delay: calc( (50s / var(--quantity)) * (var(--position) - 1) - 50s)!important;
  }
  .slider .list .item img{
    width: 100%;
  }

  .slider:hover .item{
    animation-play-state: paused!important;
    filter: grayscale(1);
  }
  .slider .item:hover{
    filter: grayscale(0);
  }
  .slider[reverse="true"] .item{
    animation: reversePlay 50s linear infinite;
  }
  @keyframes reversePlay{
    from{
        left: calc(var(--width) * -1);
    }to{
        left: 100%;
    }
  }

/* Turniere 

.event-scroller {
    display: grid;
    gap: 1em;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
  .event-scroller.snaps-inline {
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: 1em;
  }
  .event-scroller.snaps-inline > * {
    scroll-snap-align: start;
  }
  .scroller-element {
    width: 600px;
  }
  section.play {
    width: 100%;
    margin: 0;
  }
  section.play .play-row {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary);
    border-top: 2px solid var(--logo-color);
    border-bottom: 2px solid var(--logo-color);
  }
  section.play .play-row h2 {
    font-family: 'Arise';
    font-size: 2.5vw;
    color: var(--logo-color);
    padding: 2vw 0;
  }
  .play-event-box {
    width: 100%;
    border: 1px solid var(--logo-color);
    border-radius: 1vw;
    margin: 2vw 0.5vw;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 15vw 1fr;
    background-color: var(--primary);
    position: relative;
  }
  .play-event-box h3 {
    color: var(--logo-color);
    text-align: left;
    font-size: 1vw;
    padding: 1vw 2vw;
  }
  .play-event-box h4 {
    font-size: 0.8vw;
    color: var(--color-a);
    padding: 0 2vw;
    margin: 0.2vw;
  }
  .box-header {
    width: 100%;
    border-top-right-radius: 1vw;
    border-top-left-radius: 1vw;
    border-bottom: 2px solid var(--primary2);
    grid-column: 1/2;
    grid-row: 1/2;
    overflow: hidden;
  }
  .box-header img {
    inline-size: 100%;
    object-fit: cover;
  }
  .event-disc {
    padding-top: 1vw;
  }
  .event-disc ul {
    display: flex;
    align-items: center;
    padding: 1vw 0 1vw 2vw;
  }
  .event-disc i {
    color: var(--color-a);
    padding-right: 1vw;
    font-size: 1vw;
  }
  .play-event-box .box-inner {
    display: flex;
    justify-content: flex-start;
    color: #aaa;
    font-size: 0.6vw;
    padding-left: 1.5vw;
  }
  .play-event-box .box-inner span {
    padding: 0 5px 0 15px;
  }
  .event-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1vw 0;
  }
  .event-btn button {
    background-color: var(--logo-color);
    padding: 10px;
    border-radius: 10px;
    margin: 20px;
    font-size: 0.6vw;
    font-weight: 900;
    width: auto;
  }
  .event-btn a {
    color: #fff;
  }