/** base.css changes only for homepage **/
h2 {
    font-size: var(--iduid--FontSize--md);
}

h3 {
    font-size: var(--iduid--FontSize--md);
}

.iduid-main p {
    font-size: var(--iduid--FontSize--sm);
    line-height: var(--iduid--LineHeight--xl);
}

.iduid-button {
    padding: var(--iduid--spacer--lg) var(--iduid--spacer--4xl);
}
.iduid-gray-container h2 {
    color: var(--iduid--color--light-gray2);
}

/** MARGINS , PADDINGS, WIDTH **/
.iduid-padding-tb {
    margin: var(--iduid--spacer--4xl) 0;
}

.iduid-padding-lr {
    padding: 0 var(--iduid--spacer--md);
}

.iduid-width-container {
    max-width: 1254px;
}

.iduid-registration-button {
    a {
        height: 60px;
    }
}
.iduid-registration-button,
.iduid-more-button {
    text-align: center;
    .iduid-button,
    .iduid-portals-more {
        display: block;
    }
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.iduid-header-nav_home {
    height: 30px;
    margin-right: calc(var(--iduid--spacer--md) + 2px);
    width: 30px;
}

.iduid-header-nav_home a {
    display: flex;
    cursor: pointer;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.iduid-main-hero {
    margin-top: 0;
}

.iduid-hero-content {
    column-gap: var(--iduid--spacer--xl);
    padding: 0;
    row-gap: var(--iduid--spacer--lg);
}

.iduid-hero-text {
    order: 2;
    row-gap: var(--iduid--spacer--md);
    & > h2 {
        font-size: var(--iduid--FontSize--2xl);
    }
      & > h3 {
    & > strong {
          position: relative;

    &::after {
         background: url("/account/resources/img/underline-aaecddb627e614b0b746c17bd02fa25b.svg") no-repeat;
         background-size: 110px 8px;
         bottom: -0.625rem;
         content: '';
         height: 0.75rem;
         left: -0.3rem;
         position: absolute;
         right: -0.5rem;
         z-index: -1;
     }
    }
        }
    & > a {
        margin-top: var(--iduid--spacer--md);
    }
}

.iduid-hero-img {
    order: 1;
}

.iduid-hero-img_desktop {
    display: none;
}
/* ==========================================================================
   PROS
   ========================================================================== */
.iduid-pros-icons {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: var(--iduid--spacer--4xl);
}

.iduid-pros-icon {
    display: flex;
    flex-direction: column;
    gap: var(--iduid--spacer--xl);
}

/* ==========================================================================
   FUNCTION
   ========================================================================== */
.iduid-function-content {
    border-radius: 0;
    max-width: 1222px;
    padding: var(--iduid--spacer--4xl) var(--iduid--spacer--md);
}

.iduid-grid-two-columns {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    row-gap: var(--iduid--spacer--4xl);
}

.iduid-function-content-block {
    row-gap: var(--iduid--spacer--xl);
}

.iduid-function-item {
    align-items: center;
    column-gap: var(--iduid--spacer--4xl);
    display: flex;
    font-size: var(--iduid--FontSize--sm);
    justify-content: flex-start;
    & > img {
        background-color: var(--iduid--color--white);
        border-radius: 50%;
        padding: var(--iduid--spacer--xs);
    }
}


/* ==========================================================================
   PORTALS
   ========================================================================== */
.iduid-function-content,
.iduid-portals-content,
.iduid-faq-content {
    row-gap: var(--iduid--spacer--4xl);
}

.iduid-portals-items {
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    grid-column-gap: 5%;
    grid-row-gap: var(--iduid--spacer--xl);
    height: 188px;
    overflow: hidden;
    & > a {
        & > img {
            box-shadow: 0 2px 10px 0 var(--iduid--color--box-shadow);
        }
    }
}

.iduid-portals-more {
    background-color: var(--iduid--color--white);
    color: var(--iduid--color--black);
    cursor: pointer;
    display: inline-block;
    padding: 10px 15px;
}

.iduid-portals-more::before {
    content: 'alle anzeigen' '\00a0' '\00a0' '\00a0' url("/account/resources/img/icons/chevronDown-957fd00452f7c6db3d2f6915843f72bb.svg");
    font-size: var(--iduid--FontSize--md);
}

.iduid-portals-content.active .iduid-portals-more::before {
    content: 'weniger anzeigen' '\00a0' '\00a0' '\00a0' url("/account/resources/img/icons/chevronUp-76bd950ce1c4e40369929b7c8cf21c2b.svg");
    font-size: var(--iduid--FontSize--md);
}

.iduid-portals-content.active .iduid-portals-items {
    height: auto;
}

.iduid-portals-content.active .iduid-portals-items::before {
    display: none;
}

/* ==========================================================================
   FAQ´S
   ========================================================================== */
.iduid-faq-content {
    border-radius: 0;
    max-width: 1222px;
    padding: var(--iduid--spacer--4xl) var(--iduid--spacer--md);
}

/** ICONS **/
.iduid-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.iduid-icon:before {
    content: "";
    height: 40px;
    position: absolute;
    width: 40px;
}

.iduid-icon-item:before {
    content: "";
    height: 20px;
    position: absolute;
    width: 20px;
}

.iduid-icon-badge:before{
    background: url("/account/resources/img/icons/badge-d2a010bf965fb0ab0aebb48310747da9.svg") no-repeat;
    background-size: auto 40px;
}

.iduid-icon-premium:before{
    background: url("/account/resources/img/icons/premium-30c51d3c8b5e99eccc068bc2ca91ba2c.svg") no-repeat;
    background-size: auto 40px;
}

.iduid-icon-secure:before{
    background: url("/account/resources/img/icons/secure-8bc3547291e7229479e5741c7b020d03.svg") no-repeat;
    background-size: auto 40px;
}

.iduid-icon-item.iduid-icon-mail:before{
    height: 17px;
    width: 20px;
}

.iduid-icon-mail:before{
    background: url("/account/resources/img/icons/mail-f988cb8710df274c53603381eb5020e1.svg") no-repeat;
    background-size: auto 16px;
}

.iduid-icon-item.iduid-icon-chevron-right:before {
    background: url("/account/resources/img/icons/chevronRight-b494b71cce47ac78a2f0d1b88d0e77f7.svg") no-repeat;
    background-size: auto 17px;
}
/* ==========================================================================
   CONTACT
   ========================================================================== */
.iduid-contact-content {
    justify-content: normal;
    row-gap: var(--iduid--spacer--lg);
    text-align: center;
    & > h4 {
        font-weight: var(--iduid--FontWeight--semi-bold);
    }
}

.iduid-contact-content .iduid-link-item a {
    gap: var(--iduid--spacer--md);
}

.iduid-contact-content .iduid-icon:before {
    height: 16px;
    position: static;
    width: 20px;
}

.iduid-contact-content p {
    font-size: calc(var(--iduid--FontSize--xs) + 1px);
}

    /** ACCORDION **/
.iduid-accordion {
    row-gap: var(--iduid--spacer--md);
}

.iduid-accordion-content {
    padding: 0 var(--iduid--spacer--md) var(--iduid--spacer--md);
}

.iduid-accordion-item {
    box-shadow: 0 1px 1px 0 var(--iduid--color--box-shadow);
    overflow: hidden;
    padding: 0;
}

.iduid-accordion-trigger-input {
    position: absolute;
    opacity: 0;
}

.iduid-accordion-trigger {
    align-items: center;
    cursor: pointer;
    font-size: var(--iduid--FontSize--md);
    font-weight: var(--iduid--FontWeight--semi-bold);
    justify-content: space-between;
    padding: var(--iduid--spacer--md);
}

.iduid-accordion-trigger::after {
    content: '';
    background: url("/account/resources/img/icons/chevronRight-b494b71cce47ac78a2f0d1b88d0e77f7.svg") no-repeat;
    background-size: auto 20px;
    height: 20px;
    transform: rotate(90deg);
    transition: transform var(--iduid--transitionLength) var(--iduid--transitionTiming);
    width: 20px;
}

.iduid-accordion-trigger-input:checked ~ .iduid-accordion-trigger::after {
    transform: rotate(90deg) rotateX(180deg) rotateY(180deg) translateY(0px) translateX(0px);
}

/** ACCORDION FUNCTIONALITY **/
.iduid-accordion-animation-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows var(--iduid--transitionLength) var(--iduid--transitionTiming);
}

.iduid-accordion-trigger-input:checked ~ .iduid-accordion-animation-wrapper {
    grid-template-rows: 1fr;
}

.iduid-accordion-animation {
    min-height: 0;
}

.iduid-accordion-transform-wrapper {
    transform: translateY(-100%);
    transition: transform var(--iduid--transitionLength) var(--iduid--transitionTiming), visibility 0s var(--iduid--transitionLength) var(--iduid--transitionTiming);
    visibility: hidden;
}

.iduid-accordion-trigger-input:checked ~ .iduid-accordion-animation-wrapper .iduid-accordion-transform-wrapper {
    transform: translateY(0);
    transition: transform var(--iduid--transitionLength) var(--iduid--transitionTiming), visibility 0s linear;
    visibility: visible;
}

/** View for screens larger than 24.375em (= 390px) **/
@media screen and (min-width: 24.375em) {
    .iduid-hero-img_mobile {
        display: none;
    }
    .iduid-hero-img_desktop {
        display: block;
    }
    .iduid-contact-content p {
        font-size: var(--iduid--FontSize--md);
    }
}

/** View for screens larger than 37.5em (= 600px) **/
@media screen and (min-width: 37.5em) {
    .iduid-grid-two-columns {
        column-gap: var(--iduid--spacer--md);
        grid-auto-flow: column;
        grid-template-columns: 1fr 1fr;
    }
    .iduid-function-content-block {
        row-gap: var(--iduid--spacer--4xl);
    }
}

/** View for screens larger than 48em (= 768px) **/
@media screen and (min-width: 48em) {
    .iduid-registration-button,
    .iduid-more-button {
        .iduid-button,
        .iduid-portals-more {
            display: inline-block;
        }
    }
    .iduid-hero-text {
        .iduid-button {
            display: block;
        }
    }
    .iduid-main-hero {
        padding: 62px 0 30px;
    }

    .iduid-hero-content {
        grid-template-columns: 1fr 1fr;
    }

    .iduid-hero-text {
        order: 1;
    }

    .iduid-hero-img {
        order: 2;
    }

    .iduid-main-function {
        padding: var(--iduid--spacer--md);
    }

    .iduid-main-faq {
        padding: var(--iduid--spacer--md);
    }

    .iduid-function-content,
    .iduid-faq-conten {
        border-radius: var(--iduid--spacer--md);
        padding: var(--iduid--spacer--4xl);
    }

    .iduid-contact-content {
        justify-content: center;
    }
}

/** View for screens larger than 64em (= 1024px) **/
@media screen and (min-width: 64em) {
    .iduid-main p {
        font-size: var(--iduid--FontSize--md);
        line-height: var(--iduid--LineHeight--3xl);
    }

    .iduid-main h2 {
        font-size: var(--iduid--FontSize--2xl);
    }

    .iduid-hero-content {
        grid-template-columns: 452px 1fr;
    }

    .iduid-hero-text {
        & > h2 {
            font-size: var(--iduid--FontSize--4xl);
        }
        & > h3 {
            font-size: var(--iduid--FontSize--3xl);
            & > strong {
                position: relative;

                &::after {
                    background-size: 202px 11px;
                    bottom: -0.525rem;
                    left: -0.5rem;
                    right: -0.5rem;

                }
            }
        }
    }

    .iduid-pros-icon {
        & > h4 {
            font-size: calc(var(--iduid--FontSize--lg) + 2px);
            font-weight: var(--iduid--FontWeight--semi-bold);
        }
    }

    .iduid-accordion {
        row-gap: var(--iduid--spacer--4xl);
    }
}