@font-face {
    font-family: 'ChangaOne';
    src: url('/font/ChangaOne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'Rubik-Bold';
    src: url('/font/Rubik-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'Rubik-Regular';
    src: url('/font/Rubik-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  

/* ----------------------------- */

.gamefont{
    font-family: 'ChangaOne', sans-serif;
}

.textfont{
    font-family: 'Rubik-Regular', sans-serif;
}

.textfont-bold{
    font-family: 'Rubik-Bold', sans-serif;
}

.whitefont{
    color: white;
}

.orangefont{
    color: #ffaf00;
}

.bluefont{
    color:#00fff1;
}

.redfont{
    color: #d82741;
}

.fontsize_extrabig{
    font-size: 5rem;
    line-height: 5rem;
}

.fontsize_big{
    font-size: 3rem;
}

.fontsize_medium{
    font-size: 2rem;
}

.fontsize-text_medium{
    font-size: 1.5rem;
}

.fontsize-text_small{
    font-size: 1.2rem;
}



/* ----------------------------- */

.verlauf-blau{
    background: linear-gradient(180deg, #0091ea 0%, #0a2f99 100%);
}

.verlauf-gruendunkel{
    background: linear-gradient(180deg, #0a7a3a 0%, #1c4409 100%);
}

.verlauf-orange{
    background: linear-gradient(180deg, #ffaf00 0%, #f87906 100%);
}

.verlauf-lila{
    background: linear-gradient(180deg, #8224ff 0%, #520756 100%);
}

.verlauf-gruenhell{
    background: linear-gradient(180deg, #a3ff15 0%, #005106 100%);
}

.verlauf-rot{
    background: linear-gradient(180deg, #ff5a72 0%, #6b0a3f 100%);
}

.counter-background-orange{
    background-image: url("/media/buttons/button_klein-orange.png");
}

.counter-background-blau{
    background-image: url("/media/buttons/button_klein-blau.png");
}

.counter-background-rot{
    background-image: url("/media/buttons/button_klein-rot.png");
}

.verlauf-rot .button p,
.verlauf-rot .button-rund p,
.verlauf-rot .counter p {
  color: white !important; /* oder dein Rot-Ton */

}

/* ----------------------------- */

body{
    margin: 0;
    padding: 0;
}

p{
    margin: 0px;
}

.wrapper{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    background-attachment: fixed;
    background-size: cover;
    width: 100vw;
    min-height: 100vh;
}

.content{
    
    /*height: 100%;*/
    width: 100%;
    max-width: 800px;
    padding: 25px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    min-height: 100vh;
    
justify-content: flex-start;
}

.counter{
    position: absolute;
    width: fit-content;
    right: 25px;
    top: 30px;

    background-repeat: no-repeat;    
    background-size: contain;        
    background-position: center;
}

.counter p{
    font-family: 'ChangaOne', sans-serif;
    color: white;
    font-size: 3rem;
    padding: 20px 30px;
    transform: translateY(-2px);
   
}

.runderhintergrund{
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2); 
    display: flex;
    align-items: center;
    justify-content: center;
}

.runderhintergrund img{
    width: 100%;
}

.image-fullsize{
    width: 100%;
    max-width: 600px;
}

.centercontent{
    justify-content: center;
}

.buttonend{
    align-self: flex-end;
    margin-top: auto;
   
}

.bildrahmenquadrat{
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 25px;
    border: 15px solid rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.box{
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 30px;
    padding: 25px;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hintergrundbalken-links{
    background-color: rgba(0, 0, 0, 0.2);
        border-radius: 0px 30px 30px 0px;
        padding: 20px 40px ;
        margin-left: -25px;
        align-self: flex-start;
    }


    .wissen-intro-balken{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 40px;
    }
    
    .wissen-intro-balken .grafik-wissen{
        width: 100px;
    }
    
    .wissen-intro-balken p{
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 30px 0px 0px 30px;
        padding: 20px 40px ;
        margin-right: -25px;
    }
    
    
/* ----------------------------------------------------------- */

.footer{
    background-color: #334076;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 25px 40px 25px 40px;
}

.footer a{
    text-decoration: none;
}

.footer a:hover{

}