:root {
    --color-00334C: #00334C;
    --color-083c54: #083c54;
    --color-d0b993: #d0b993;
    --color-ed5e16: #ed5e16;
}

.hero-slides {
    background: none;
}

.swiper {
    overflow: hidden;
}

.swiper-wrapper {
    display: flex;
}


.swiper-slide {
    flex: 0 0 100%;
}


body {
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: none;
}

.hng-section {
    padding: 6rem 0;
}

@media (max-width: 480px) {
    .hng-section {
        padding: 4rem 0;
    }
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero-slide {
    width: 100%;
    height: 100vh;
    background: var(--color-083c54);
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px; /* etwas Innenabstand */
}

.hero-slide .hero-text {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.hero-slide h2 {
    margin: 20px 0 10px 0;
    padding: 0 10px;
    font-size: 3rem;
    font-weight: 600;
    line-height: 4rem;
    color: var(--white, #fff);
    text-transform: uppercase;
    hyphens: auto;
}

.hero-slide p {
    color: var(--white, #fff);
    margin-bottom: 20px;
    padding: 0 15px;
    font-size: 1.5rem;
    line-height: 2rem;
}

.hero-slide .hero-display-h1 {
    max-width: 900px;
    font-size: 2.0rem;
    font-weight: 600;
}

.hero-slide .hero-display-h2 {
    color: var(--color-d0b993);
    font-size: 1.5rem;
    font-weight: 600;
}

@media (max-width: 1200px) {
    .hero-slide {
        height: 100dvh;
        height: 100vh;
        background-attachment: scroll;
        padding: 60px 15px;
    }

    .hero-slide h2 {
        font-size: 2.4rem;
        line-height: 3rem;
    }

    .hero-slide p {
        font-size: 1.0rem;
        line-height: 1.8rem;
    }
}

@media (max-width: 768px) {
    .hero-slide {
        height: 100dvh;
        height: 100vh;
        padding: 50px 15px;
    }

    .hero-slide h2 {
        font-size: 1.8rem;
        line-height: 2.2rem;
        margin: 15px 0 5px 0;
    }

    .hero-slide p {
        font-size: 1rem;
        line-height: 1.4rem;
        margin-bottom: 15px;
    }

    .hero-slide .hero-display-h1 {
        font-size: 1.8rem;
    }

    .hero-slide .hero-display-h2 {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .hero-slide {
        height: 100dvh;
        height: 100vh;
        padding: 40px 10px;
    }

    .hero-slide h2 {
        font-size: 1.4rem;
        line-height: 1.8rem;
    }

    .hero-slide p {
        font-size: 0.9rem;
        line-height: 1.3rem;
    }
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/

.ff-button-shape {
    background-color: var(--color-083c54);
    color: var(--white, #fff);
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    padding: .5rem;
    width: 100%;
    display: inline-block;
    margin: auto;
    border-radius: .15rem;
}

.ff-button-shape:hover {
    background-color: var(--color-083c54);
    color: var(--white, #fff);
}

.ff-button-shape:active {
    color: var(--white, #fff) !important;;
}

.ff-button-shape:focus {
    border-color: var(--white, #fff) !important;
    color: var(--white, #fff) !important;
}

.ff-button-ed5e16 {
    background-color: var(--color-ed5e16);
}

.ff-button-d0b993 {
    background-color: var(--color-d0b993);
}

.ff-button-00334C {
    background-color: var(--color-00334C);
}

.ff-button-ffffff {
    background-color: var(--white, #fff);
}

.color-00334C {
    color: var(--color-00334C);
}

.bg-color-00334C {
    background-color: var(--color-00334C);
}

.btn-for-bright-bg:focus {
    border-color: var(--color-00334C) !important;
    color: var(--color-00334C) !important;
}

.btn-for-bright-bg:visited {
    border-color: var(--color-00334C) !important;
    color: var(--white, #fff) !important;
}

.btn-for-bright-bg:active {
    border-color: var(--color-00334C) !important;
    color: var(--color-00334C) !important;
}

/*--------------------------------------------------------------
# hng-konzept
--------------------------------------------------------------*/

.hng-konzept {
    background-color: #ffffff;
    text-align: center;
    padding: 60px 20px;
}

.hng-konzept h2 {
    font-size: 22px;
    font-weight: 700;
    color: #083c54;
    text-transform: uppercase;
    margin-bottom: 40px;
}


.konzept-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 15px;
    background-color: #083c54;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
}

.konzept-item h4 {
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-size: 23px;
}

.konzept-item p {
    color: #333;
    font-size: 15px;
    line-height: 1.5;
    margin: 0 auto;
}


/*--------------------------------------------------------------
    advisor_registration
--------------------------------------------------------------*/

#advisor_registration {
    overflow: hidden;
    background: url(../img/landingpage_berater_werden/advisor_registration.webp) center top;
    background-size: cover;
    background-attachment: fixed;
}

#advisor_registration .advisor_registration-text {
    color: #fff;
    background-color: var(--blue-2);
}

#advisor_registration .hng-button-wrapper {
    padding: 0;
    transform: translate(0, -50%)
}

#advisor_registration .hng-button-wrapper .hng-button {
    width: 100%;
    max-width: 300px;
}

/*--------------------------------------------------------------
    font-sizes
--------------------------------------------------------------*/

.font-size-30px {
    font-size: 30px !important;
}

.font-size-26px {
    font-size: 26px !important;
}

.font-size-22px {
    font-size: 22px !important;
}

.font-size-18px {
    font-size: 18px !important;
}

.font-size-15px {
    font-size: 15px !important;
}

.font-size-14px {
    font-size: 14px !important;
}

.font-size-12px {
    font-size: 12px !important;
}

@media (max-width: 1200px) {
    .font-size-30px {
        font-size: 26px !important;
    }

    .font-size-26px {
        font-size: 22px !important;
    }

    .font-size-22px {
        font-size: 20px !important;
    }

    .font-size-18px {
        font-size: 16px !important;
    }
}

@media (max-width: 768px) {
    .font-size-30px {
        font-size: 24px !important;
    }

    .font-size-26px {
        font-size: 20px !important;
    }

    .font-size-22px {
        font-size: 18px !important;
    }

    .font-size-18px {
        font-size: 15px !important;
    }
}

@media (max-width: 480px) {
    .font-size-30px {
        font-size: 22px !important;
    }

    .font-size-26px {
        font-size: 18px !important;
    }

    .font-size-22px {
        font-size: 16px !important;
    }

    .font-size-18px {
        font-size: 14px !important;
    }
}

/*--------------------------------------------------------------
    hng-advantages
--------------------------------------------------------------*/

.hng-advantages {
    background: linear-gradient(rgba(8, 60, 84, 0.4), rgba(8, 60, 84, 0.8)), url(../img/sections/webp-1920px/arrange_consultation.webp) center top;
    background-size: cover;
    background-attachment: fixed;
    background-color: #00334c;
    text-align: center;
    padding: 60px 20px;
}

.hng-advantages h2 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 40px;
}


.advantages-icon {
    margin: 0 auto 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 50px;
}

.advantages-item h4 {
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: #fff;
}

.advantages-item p {
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
    max-width: 280px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .advantages-item p {
        min-height: 60px;
    }
}

/*--------------------------------------------------------------
    footer
--------------------------------------------------------------*/

#footer .hng-footer-logos {
    max-width: 300px;
    display: grid;
    grid-template-areas:
        "hng-logo hng-logo"
        "systemimmo-logo nettoimmo-logo";
    gap: 2rem;
    margin: 0 auto;
    padding: 2rem 0;
}

#footer .hng-footer-logos img {
    width: 100%;
}

#footer .hng-footer-logos .hng-logo {
    grid-area: hng-logo;
    max-width: 180px;
    justify-self: center;
}

@media (min-width: 768px) {
    #footer .hng-footer-logos .hng-logo {
        max-width: 200px;
    }
}

#footer .hng-footer-logos .systemimmo-logo {
    grid-area: systemimmo-logo;
    text-align: center;
}

#footer .hng-footer-logos .nettoimmo-logo {
    grid-area: nettoimmo-logo;
    text-align: center;
}

/*--------------------------------------------------------------
    swiper pagination
--------------------------------------------------------------*/

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--color-d0b993);
}

/*--------------------------------------------------------------
    Purecounter
--------------------------------------------------------------*/

#purecounter a {
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
}

#purecounter .purecounter {
    font-size: 3rem;
}

.hyphens-custom {
    hyphens: auto;
    word-break: normal;
    overflow-wrap: break-word;
}

.jetzt-berater-werden {
    font-weight: 600;
    line-height: 37px;
}

.mw-600 {
    max-width: 600px;
}

.bg001A27 {
    background: #001A27D0;
}