.header-landing-page {
    text-align: center;
    margin: 2em 2em 1em;
}

.headline-landing-page {
    color: #17A2B8;
    font-weight: 750;
    font-size: clamp(2rem, 3.1vw, 3.5rem);
}

.nav-bar-outer {
    width: 100%;
    height: 5em;
    background-color: #ECECEC;
    box-shadow: 0 5px 10px rgb(138, 146, 147);
    background-clip: padding-box;
    align-content: center;
    box-sizing: border-box;
}

.company-name {
    margin-left: 0.5em;
    font-weight: 800;
    font-size: 1.5em;
    display: flex;
    align-content: center;
}

.logo {
    height: 50px;
}

.logo-div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2em;
    margin-bottom: 1.5em;
}

.landing-page-image {
    width: 500px;
    max-width: 650px;
    border-radius: 10px;
}

.link-to-home {
    height: 5em;
    justify-content: center;
    text-align: center;
}

#btn-to-home {
    margin: 1rem 1rem;
    width: 20rem;
    background-color: #057efc;
    border-radius: 1.4rem;
    padding-right: 1rem;
    border: solid transparent;
    color: white;
    font-weight: 400;
    font-size: 1.2rem;
    height: 3rem;
}

#btn-to-home:hover {
    color: #f5f5f5;
    background-color: #3d9bfd;
    transition: all 0.3s;
    cursor: pointer;
}


.nav-bar-elements {
    font-size: 1.1em;
    margin-left: auto;
    margin-right: 2em;
    display: flex;
    align-items: center;
}

.nav-bar-company-name-and-icon {
    margin-left: 1em;
    display: flex;
    align-items: center;
}

.logo-nav-bar {
    justify-content: center;
    align-items: center;
}

.nav-bar-item {
    padding: 0.3em 0.5em;
    border-radius: 5px;
    /*border: black solid;*/
}

.active{
    color: #17A2B8;
    font-weight: bolder;
}

.no-registration-info {
    color: #dc3545;
    font-size: 1.2rem;
    text-align: center;
    margin: 1em 0;
    font-weight: bold;
}

.footer {
    background-color: #17A2B8; /* Optional: Change footer color to match navbar */
    text-align: center;
    padding: 1em 0;
}

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
}

/*@media only screen and (max-width: 790px) {*/
/*    .nav-bar-elements {*/
/*        width: 100%;*/
/*        position: absolute;*/
/*        justify-content: center;*/
/*        align-items: center;*/
/*        margin-top: 4.5em;*/
/*        padding: 1em;*/
/*        background-color: #ECECEC;*/
/*    }*/
/*}*/

/* Basis-Styling für den Button */
#login-btn {
    border: 2px solid #17a2b8; /* Info-Farbe */
    color: #17a2b8; /* Info-Farbe */
    background-color: transparent; /* Transparenter Hintergrund */
    padding: 0.3rem 1rem; /* Größe L */
    border-radius: 0.25rem; /* Abgerundete Ecken */
    font-weight: 550;
    margin-left: 1em;
    margin-right: 1em;
}

/* Hover-Effekt */
#login-btn:hover {
    background-color: #17a2b8; /* Hintergrundfarbe bei Hover */
    color: #fff; /* Textfarbe bei Hover */
}

/* Aktiver Zustand */
#login-btn:active {
    background-color: #138496; /* Hintergrundfarbe im aktiven Zustand */
    border-color: #138496; /* Rahmenfarbe im aktiven Zustand */
    color: #fff; /* Textfarbe im aktiven Zustand */
}

/* Basis-Styling für den Button */
#register-btn {
    background-color: #17a2b8; /* Info-Farbe */
    color: #fff; /* Textfarbe */
    border: 2px solid transparent; /* Info-Farbe */
    padding: 0.3rem 1rem; /* Größe L */
    border-radius: 0.25rem; /* Abgerundete Ecken */
    font-weight: 550;
}

/* Hover-Effekt */
#register-btn:hover {
    background-color: #138496; /* Hintergrundfarbe bei Hover */
}

/* Aktiver Zustand */
#register-btn:active {
    background-color: #0a6b7c; /* Hintergrundfarbe im aktiven Zustand */
}

.navbar-button:focus {
    font-weight: 650;
}

@media (min-width: 1285px) {
    .burger-menu {
        display: none;
    }

    .nav-bar-elements {
        display: flex!important;
    }
}

@media (max-width: 1285px) {
    .headline-landing-page {
        width: 80%;
        margin: 0 auto;
    }

    .burger-menu {
        position: absolute;
        right: 0;
        padding-right: 1em;
        top: 1em;
        cursor: pointer;
    }

    .nav-bar-outer {
        display: block;
        height: 5em;
        justify-content: space-between;
    }

    .nav-bar-elements {
        display: none;
        position: absolute;
        top: 5em;
        left: 0;
        padding: 1em 2em 1em 2em;
        width: 100%;
        background-color: #c8d7dc;
        align-items: center;
        height: auto;
        box-shadow: 0 5px 10px rgb(138, 146, 147);
        z-index: 1000;
    }

    #login-btn {
        text-align: center;
    }

    /* TODO: NAVBAR wieder anzeigen (LINKS) nach klicken ausgeblendet - Wieso??? ym*/
    .nav-bar-company-name-and-icon {
        margin-top: 0;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: flex-start;
    }

    .company-name {
        margin-top: 0.3em;
    }

    #login-btn {
        margin-top: 1em;
    }


    .nav-bar-inside {
        align-content: center;
    }

    .nav-bar-company-name-and-icon {
        align-content: center;
    }

}

.nav-bar-inside {
    display: flex;
}

.burger-menu-active {
    display: block;
}


@media (max-width: 760px) {
    .landing-page-image {
        width: 400px;
    }

}





/*@media (max-width: 760px) {*/
/*    !*.burger-menu {*!*/
/*    !*    display: none!important;*!*/
/*    !*}*!*/
/*    !*.nav-bar-elements {*!*/
/*    !*    display: none!important;*!*/
/*    !*}*!*/


/*}*/