:root {
  --Hell-Blau-1: #496BFF;
  --Dunkel-Blau-1: #0A0234;
  --Dunkel-Blau-2: #151B3D;
  --Dunkel-Blau-3: #1E2747;
  --Weiß: #F2F5FF;
  --Grau-1: #C4C4C4;
  --Grau-2: #8A8A8A;
  --Schwarz: #000000;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Tektur', sans-serif;
  color: var(--Weiß);
}
main {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.background{
  background: linear-gradient(180deg, #09022F 0%,#1A0F6D 100%);
  min-height: 100vh;
  width: 100vw;
}
.static-page{
  max-width: 960px;
  margin: 0 auto;
  padding: 80px 24px 120px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  line-height: 1.6;
}
.static-page h1{
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 8px;
}
.static-page h2{
  font-size: 24px;
  font-weight: 600;
  margin-top: 18px;
  margin-bottom: 6px;
}
.static-page p,
.static-page li{
  color: var(--Weiß);
  font-size: 18px;
}
.static-page ul{
  padding-left: 22px;
  display: grid;
  gap: 6px;
}
.home-bg,.skinselector-bg,.password-change-form-bg,.password-change-done-bg{
  background: linear-gradient(180deg, #09022F 0%,#1A0F6D 100%);
  height: 100vh;
  width: 100vw;
}
.login-bg,.signup-bg,.password-reset-form-bg,.password-reset-done-bg,.password-reset-confirm-bg,
.password-reset-complete-bg{
  background: linear-gradient(180deg, #1A0F6D 0%,#3626CC 100%);
  height: 100vh;
  width: 100vw;
}
.page-container{
  height: 100vh;
  width: 100vw;
  padding-top: 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.form {
display: flex;
width: 25vw;
flex-direction: column;
align-items: center;
gap: 1.04vw;
flex-shrink: 0;
}
.form-container{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.04vw;
}
.form div label{
 display: none;
}
.form div input{
 display: flex;
width: 25vw;
height: 6.00vh;
padding: 0 1.04vw;
align-items: center;
gap: 0.52vw;
flex-shrink: 0;

/*style*/
border-radius: 0.84vw;
border: none;
background: var(--Hell-blau-opacity, rgba(73, 107, 255, 0.53));

/* Text style */
color: var(--Weiß, #F2F5FF);
font-family: Tektur;
font-size: 1.25vw;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.form div input::placeholder{
/* Text style */
color: var(--hell-blau-schrift, #92A6FF);
font-family: Tektur;
font-size: 1.25vw;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.form div input:focus{
  outline: none;
  box-shadow: 0 0 0.3125rem 0.125rem var(--Hell-Blau-1, #496BFF);
}

.bigbutton{
width: 26vw;
padding-top: 2.08vw;
padding-bottom: 2.08vw;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.52vw;

/* Text style */
text-align: center;
font-family: Tektur;
font-size: 2.5vw;
font-style: normal;
font-weight: 600;
line-height: normal;

/* Button style */
border-radius: 2.6vw;
border: none;
box-shadow: 0 0.21vw 0.21vw 0 rgba(255, 255, 255, 0.25) inset, -0.31vw -0.26vw 0.54vw 0.05vw rgba(10, 2, 52, 0.48) inset, 0 0.21vw 0.21vw 0 rgba(10, 2, 52, 0.43);
}
.bigbutton:hover{
width: 27vw;
padding-top: 2.34vw;
padding-bottom: 2.34vw;
cursor: pointer;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.52vw;
}

.bigbutton:active{
  /* Button-clicked */
box-shadow: 0 -0.21vw 0.21vw 0 rgba(255, 255, 255, 0.25) inset, 0.31vw 0.26vw 0.54vw 0.05vw rgba(10, 2, 52, 0.48) inset;
}
.smallbutton{
display: flex;
width: 15vw;
height: 2.76vw;
padding: 0.57vw 0;
border: none;
justify-content: center;
align-items: center;

/* Text style */
font-family: Tektur;
font-size: 1.25vw;
font-style: normal;
font-weight: 400;
line-height: normal;
border-radius: 0.78vw;

/* Button style */
box-shadow: 0 0.21vw 0.21vw 0 rgba(255, 255, 255, 0.25) inset, -0.31vw -0.26vw 0.54vw 0.05vw rgba(10, 2, 52, 0.48) inset, 0 0.21vw 0.21vw 0 rgba(10, 2, 52, 0.43);
}
.smallbutton:hover{
cursor: pointer;
align-items: center;
justify-content: center;
width: 15.2vw;
height: 2.97vw;
padding: 0.68vw 0.68vw;
}

.smallbutton:active{
  /* Button-clicked */
box-shadow: 0 -0.21vw 0.21vw 0 rgba(255, 255, 255, 0.25) inset, 0.31vw 0.26vw 0.54vw 0.05vw rgba(10, 2, 52, 0.48) inset;
}
.smallround {
  border-radius: 0.94vw;
  display: flex;
width: 2.76vw;
height: 2.76vw;
padding: 0.31vw;
flex-direction: column;
justify-content: center;
align-items: center;
/* small butten */
border: none;
box-shadow: 0 0.1vw 0.21vw 0 rgba(255, 255, 255, 0.25) inset, -0.1vw -0.1vw 0.54vw 0.05vw rgba(10, 2, 52, 0.48) inset, 0 0.1vw 0.21vw 0 rgba(10, 2, 52, 0.43);
}
.smallround:active{
  /* Button-clicked */
box-shadow: 0 -0.21vw 0.21vw 0 rgba(255, 255, 255, 0.25) inset, 0.31vw 0.26vw 0.54vw 0.05vw rgba(10, 2, 52, 0.48) inset;
}
.smallround:hover{
  width: 2.97vw;
  height: 2.97vw;
  padding: 0.42vw;
}
.varientbutton{
  display: flex;
width: 7.5vw;
height: 2.6vw;
padding: 0.92vh 0;
border: none;
justify-content: center;
align-items: center;
/*text style*/
color: var(--Button-Button_blau, #496BFF);
    
/*style*/
border-radius: 0.78vw;
background: var(--Button-Button_white, #F2F5FF);

/* button */
box-shadow: 0 0.21vw 0.21vw 0 rgba(255, 255, 255, 0.25) inset, -0.31vw -0.26vw 0.54vw 0.05vw rgba(10, 2, 52, 0.48) inset, 0 0.21vw 0.21vw 0 rgba(10, 2, 52, 0.43);
/* Text style */
font-family: Tektur;
font-size: 1.25vw;
font-style: normal;
font-weight: 400;
line-height: normal;
border-radius: 0.78vw;
}
.varientbutton:hover{
cursor: pointer;
align-items: center;
justify-content: center;
width: 7.7vw;
height: 2.8vw;
}
.varientbutton:active{
background: var(--Button-Button_white, #F2F5FF);
box-shadow: 0 -0.21vw 0.21vw 0 rgba(255, 255, 255, 0.25) inset, 0.31vw 0.26vw 0.54vw 0.05vw rgba(10, 2, 52, 0.48) inset;
color: var(--Button-Button_blau, #496BFF);
}
.varientbutton.active{
background: var(--Button-Button_white, #F2F5FF);
box-shadow: 0 -0.21vw 0.21vw 0 rgba(255, 255, 255, 0.25) inset, 0.31vw 0.26vw 0.54vw 0.05vw rgba(10, 2, 52, 0.48) inset;
color: var(--Button-Button_blau, #496BFF);
}  
.buttoncontainer{
  height:2.97vw;
  width:15.2vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.varientbuttoncontainer{
  height:4.75vh;
  width:7.7vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.smallbuttoncontainer{
  height: 2.97vw;
  width: 2.97vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bigbuttoncontainer{
  height: 13.5vh;
  width: 27vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.primary {
/*style*/
background: var(--Button-Button_blau, #496BFF);
color: var(--Button-Button_white, #F2F5FF);
text-decoration: none;
}
.secondary {
/*style*/
background: var(--Button-Button_white, #F2F5FF);
color: var(--Button-Button_blau, #496BFF);
text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 1.88vw;
  margin: 0;
  font-family: 'Tektur', sans-serif;
  color: var(--Weiß);
}

p {
  font-size: 1.25vw;
  margin: 0;
  font-family: 'Tektur', sans-serif;
  color: var(--Weiß);
}

.logo {
  width: 25vw;
  height: auto;
}
.fake-footer{
  position: relative;
  justify-self: flex-end;
  font-size: 1vw;
  width: 100%;
  text-align: center;
  padding: 12px 0;
  color: var(--Hell-Blau-1);
}
.fake-footer a{
  color: var(--Hell-Blau-1);
  text-decoration: none;
}
.fake-footer a:hover{
  text-decoration: underline;
}
.helptext, .errorlist{
padding: 0.52vw;
/* Text style */
font-family: 'Tektur', sans-serif;
font-size: 0.78vw;
font-weight: 400;
color: var(--Weiß, #F2F5FF);
}
.helptext ul{
  margin-left: 1.04vw;
}
.errorlist li{
  margin-left: 1.04vw;
  color: red ;
}
/* Only hide overflow for game page */
body.runninggame-bg {
  overflow: hidden;
}

body.runninggame-bg footer {
  display: none;
}
/* Game page: fill viewport without scrolling */
body.runninggame-bg main {
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  gap: 0;
}

body.runninggame-bg main > div {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

@media screen and (min-width: 3440px) {
  .form {
    display: flex;
    width: 25vw;
    flex-direction: column;
    align-items: center;
    gap: 1.0vw;
    flex-shrink: 0;
}
  .form div{
    display: flex;
    flex-direction: column;
    gap: 0.2vw;
  }
  .form div input{
  display: flex;
  width: 25vw;
  height: 6.0vh;
  padding: 0 1.04vw;
  align-items: center;
  gap: 0.52vw;
  flex-shrink: 0;

  /*style*/
  border-radius: 0.84vw;
  border: none;
  background: var(--Hell-blau-opacity, rgba(73, 107, 255, 0.53));

  /* Text style */
  color: var(--Weiß, #F2F5FF);
  font-family: Tektur;
  font-size: 1.25vw;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  }
  .form div input::placeholder{
  /* Text style */
  color: var(--hell-blau-schrift, #92A6FF);
  font-family: Tektur;
  font-size: 1.25vw;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  }
  .form div input:focus{
    outline: none;
    box-shadow: 0 0 0.3125rem 0.125rem var(--Hell-Blau-1, #496BFF);
  }

  .helptext, .errorlist{
padding: 0.20vw;
/* Text style */
font-family: 'Tektur', sans-serif;
font-size: 0.58vw;
font-weight: 400;
color: var(--Weiß, #F2F5FF);
}
.helptext ul{
  margin-left: 1.04vw;
}
.errorlist li{
  margin-left: 1.04vw;
  color: red ;
}
}

@media screen and (min-width: 2560px) and (min-height: 960px) {
  /* Anpassungen für große Bildschirme mit Höhe >=960px und Breite >=2560px */
  /* Alle Größen werden von der Fensterhöhe abhängig gemacht, indem vw durch vh ersetzt wird, wo sinnvoll */
  /* Werte angepasst, um Elemente recht groß zu halten, aber zur Höhe zu passen */
  .page-container {
    height: 100vh;
    width: 100vw;
    padding-top: 15vh; /* erhöht */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

  .form {
    display: flex;
    width: 40vh; /* erhöht für Größe */
    flex-direction: column;
    align-items: center;
    gap: 1.56vh; /* erhöht */
    flex-shrink: 0;
  }

  .form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.56vh;
  }

  .form div input {
    display: flex;
    width: 25vw;
    height: 6.0vh;
    padding: 0 1.04vw;
    align-items: center;
    gap: 0.52vw;
    flex-shrink: 0;
    border-radius: 0.84vw;
    border: none;
    background: var(--Hell-blau-opacity, rgba(73, 107, 255, 0.53));
    color: var(--Weiß, #F2F5FF);
    font-family: Tektur;
    font-size: 2.25vh;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .form div input::placeholder {
    color: var(--hell-blau-schrift, #92A6FF);
    font-family: Tektur;
    font-size: 2.25vh;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
 
  

  .bigbutton {
    width: 42vh; /* erhöht */
    padding-top: 3.12vh;
    padding-bottom: 3.12vh;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.78vh;
    text-align: center;
    font-family: Tektur;
    font-size: 4vh; /* erhöht */
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    border-radius: 3.9vh;
    border: none;
    box-shadow: 0 0.315vh 0.315vh 0 rgba(255, 255, 255, 0.25) inset, -0.465vh -0.39vh 0.81vh 0.075vh rgba(10, 2, 52, 0.48) inset, 0 0.315vh 0.315vh 0 rgba(10, 2, 52, 0.43);
  }

  .bigbutton:hover {
    width: 43vh; /* erhöht */
    padding-top: 3.51vh;
    padding-bottom: 3.51vh;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.78vh;
  }

  .smallbutton {
    display: flex;
    width: 24vh; /* erhöht */
    height: 4.14vh;
    padding: 0.855vh 0;
    border: none;
    justify-content: center;
    align-items: center;
    font-family: Tektur;
    font-size: 2vh; /* erhöht */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border-radius: 1.17vh;
    box-shadow: 0 0.315vh 0.315vh 0 rgba(255, 255, 255, 0.25) inset, -0.465vh -0.39vh 0.81vh 0.075vh rgba(10, 2, 52, 0.48) inset, 0 0.315vh 0.315vh 0 rgba(10, 2, 52, 0.43);
  }

  .smallbutton:hover {
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 24.2vh;
    height: 4.455vh;
    padding: 1.02vh 1.02vh;
  }


  .varientbutton {
    display: flex;
    width: 12vh; /* erhöht */
    height: 3.9vh;
    padding: 1.38vh 0;
    border: none;
    justify-content: center;
    align-items: center;
    color: var(--Button-Button_blau, #496BFF);
    border-radius: 1.17vh;
    background: var(--Button-Button_white, #F2F5FF);
    box-shadow: 0 0.315vh 0.315vh 0 rgba(255, 255, 255, 0.25) inset, -0.465vh -0.39vh 0.81vh 0.075vh rgba(10, 2, 52, 0.48) inset, 0 0.315vh 0.315vh 0 rgba(10, 2, 52, 0.43);
    font-family: Tektur;
    font-size: 2vh; /* erhöht */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .varientbutton:hover {
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 12.2vh;
    height: 4.2vh;
  }
  .buttoncontainer{
    width: 24.2vh;
    height: 4.455vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .varientbuttoncontainer{
    width: 12.2vh;
    height: 4.2vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .bigbuttoncontainer {
    width: 43vh; /* erhöht */
    padding-top: 3.51vh;
    padding-bottom: 3.51vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: 3vh; /* erhöht */
    margin: 0;
    font-family: 'Tektur', sans-serif;
    color: var(--Weiß);
  }

  p {
    font-size: 2vh; /* erhöht */
    margin: 0;
    font-family: 'Tektur', sans-serif;
    color: var(--Weiß);
  }

  .logo {
    width: 40vh; /* erhöht */
    height: auto;
  }

  .fake-footer {
    position: relative;
    justify-self: flex-end;
    font-size: 1.5vh; /* erhöht */
    width: 100%;
    text-align: center;
    padding: 1.8vh 0;
    color: var(--Hell-Blau-1);
  }

  .helptext, .errorlist {
    padding: 0.78vh;
    font-family: 'Tektur', sans-serif;
    font-size: 1.17vh; /* erhöht */
    font-weight: 400;
    color: var(--Weiß, #F2F5FF);
  }

  .helptext ul {
    margin-left: 1.56vh;
  }

  .errorlist li {
    margin-left: 1.56vh;
    color: red;
  }
}