html {
    scroll-behavior: smooth;
}

body {
    font-family: "Sofia Sans", serif;
}

@media (min-width: 0px){
    .Ueberschrift_Profil_faq{
        margin-top: 3svh;
        color: #0d2943;
        font-size: 7svh;
        font-weight: 800;
        margin-bottom: -1vh;
    }
    .Ueberschrift_Name_faq{
        color: #828486;
        margin-bottom: 5vh;
        font-size: 1.75svh;
    }
}

@media (min-width: 0px){
    #renew_pw_bg {
        background-color: #fbfbfd;

        box-shadow: 25px 30px 50px rgb(240, 240, 240);
        padding: 10svh;
        padding-top: 5svh;
        padding-bottom: 5svh;
        margin: 2svh;
        margin-top: 5svh;
        border-radius: 80px;
        transition: 600ms;
    }

    #renew_pw_bg:hover {
        background-color: #ebebed;
    }

    #Main_box_faq {
        color: #4798df;
        font-weight: 400;
    }

    #txt_weitere_probleme {
        font-size: 4svh;
        margin-top: 15svh;
    }

    #txt_allgemeines {
        font-size: 1.75svh;
        color: #4798df;
        font-weight: 500;
        margin-top: 20px;
    }

    
    
.faq-container {
    width: 100%;
    max-width: 100%;
    margin-top: 3svh;
    overflow: hidden;
}



.faq-header {
    padding-left:3vh;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.78svh;
    font-weight: 500;
    color: #0d2943;
    transition: color 0.4s ease;
}

.faq-header:hover {
    color: #4798df;
}

.faq-header .icon {
    font-size: 18px;
    transition: transform 0.4s ease;
}

.faq-answer {
    padding: 0 24px 18px;
    color: #555;
    font-size: 1svh;
    line-height: 1.6;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, max-height 0.3s ease;
    color: #828486;
    font-size: 1.75svh;
    margin-left: 5%;
    margin-right: 5%;
}

.faq-item.open .faq-answer {
    max-height: 500px;
    opacity: 1;
}

.faq-item.open .faq-header .icon {
    transform: rotate(45deg);
}
}