body.page-id-4.meinbuero-online  {
    position:relative;
    background-image: linear-gradient(to bottom, #023E84, #63C2CD);
    background-color: #63C2CD;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    height: 100%;
    min-height: 900px;

     &::after {
        background-image: url('https://www.buhl.de/buero/wp-content/themes/meinbuero2021/meinbuero_buhlkonto_bg_dots.png');
        background-position: center;
        background-size: cover;
        content: '';
        display: block;
        inset: 0;
        opacity: .3;
        position: absolute;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover, 
    input:-webkit-autofill:focus {
        -webkit-text-fill-color: #fff;
        -webkit-box-shadow: 0 0 0px 40rem #023E84  inset;
    }

    .infobox-container {
        backdrop-filter: blur(2px);
        background-color: rgba(255,255,255, 0.5);

        .infobox-content {
            border-radius: 22px;
            letter-spacing: normal;
            line-height: 1.6;
        }

        .infoBoxLinks{
            display: flex;
            flex-direction: row-reverse;
            justify-content: space-between;
            margin-top: 24px;

            > #close-infobox {
                color: rgba(0,0,0, 0.4);
                font-weight: 600;
                text-decoration: underline;
                text-transform: none;
                letter-spacing: normal;
                text-decoration-thickness: 2px;
                text-underline-offset: 4px;
                transition: all ease .3s;

                &:hover {
                    color: rgba(0,0,0, 0.8);
                }
            }

            > form > #close-infobox-goto {
                background-color: #F29213;
                border-radius: 16px;
                color: #fff;
                font-weight: 600;
                letter-spacing: normal;
                padding: 8px 22px;
                text-transform: none;
                transition: all ease .3s;

                &:hover {
                    background-color: #d0510d;
                }
            }
        }

        .buhlkontoinfo {
            display: flex;
            justify-content: start;
            margin-block: 28px 12px;

            > #close-infobox {
                color: rgba(0,0,0, 0.4);
                font-weight: 600;
                text-decoration: underline;
                text-transform: none;
                letter-spacing: normal;
                text-decoration-thickness: 1px;
                text-underline-offset: 4px;
                transition: all ease .3s;

                &:hover {
                    color: rgba(0,0,0, 0.8);
                }
            }
        }
    }
}

body.page-id-4.meinbuero-online #main-content-formular {
    box-shadow:none;
    background-color: transparent;
    background-image: none;
    color: #fff;
    grid-column: 1;
    height: auto;
    min-height: 900px;
    position: relative;
    z-index: 45;

    @media (min-width: 1024px) {
        grid-column: 2;
        justify-self: center;
    }

    .inner-form-box {
        position: absolute;
        top: 128px;
        padding-inline: 18px;
    }

    #loginForm-Box,
    #twoFactorCheckForm-Box,
    #forgotPswForm-Box,
    #registerForm-Box {
        padding: 2rem;
        background-color: rgba(255,255,255, 0.05);
        background-image: linear-gradient(170deg, #023E84, transparent 60%);
        border: 1px solid #fff;
        border-radius: 22px;

        @media(max-width: 500px) {
            border: none;
        }

        @media(min-width: 500px) {
            max-width: 420px;
        } 
    }

    #registerForm-Box {
        
        .field-container {
            height: 356px;
        }

        .field-container:has(#confirmcode-field.hidden) {
            height: 220px;
        }
        
        #change-email-register {
            color: #fff;
            margin-top: -14px;
            margin-bottom: 8px;
            padding-inline: 14px;
        }

        #send-new-code {
            color: #fff;
            font-size: 16px;
            margin-top: 0;
            padding-inline: 14px;
        }
    }

    #loginForm-Box,
    #registerForm-Box {
        .auge-offen, .auge-geschlossen {
            filter: invert(100%) sepia(100%) saturate(6%) hue-rotate(200deg) brightness(107%) contrast(100%);
            opacity: .7;

            &:hover {
                opacity: 1;
            }
        }
    }

    #forgotPswForm-Box {

        .input-field {
            height: 99px;
        }

        #goto-login {
             color: #fff;
        }
    }


    #twoFactorCheckForm-Box {

        .input-field {
            display: flex;
            flex-direction: column;
            gap: 8px;

            button {
                margin-block-start: auto;
                margin-block-end: 8px;
            }
        }

        .head-deactivate {
            h3 {
                margin-block-start: 0;
                margin-block-end: 32px;
            }

            .info-circle {
                top: 0;
                right: 48px;
                left: auto;   
            }
        }

        #two-factor-aktivieren-form .input-field {
            height: 247px;
        }

        #two-factor-deaktivieren-form .input-field {
            height: 252px;
        }

        h3,
        #goto-lost-device,
        #goto-lost-device-abort {
            color: #fff;
        }
    }

    .header-anrede-inner {
        background-image: none;
    }

    .header-anrede-inner img {
        width: 100%;
        max-width: 286px;
        max-height: 36px !important;
    }

    .buhl-accessibility-contrast {
        border-radius: 12px;
        position: fixed;
        top: 25px;
        left: 12px;
        right: auto;
        height: auto;
        z-index: 50;
        outline: 2px solid #fff;
        outline-offset: 2px;

        @media(min-width: 500px) {
            top: 22px;
            left: 2rem;
        } 
    }

    .info-circle {
        aspect-ratio: 1;
    }

    .input-field input {
        border-radius: 16px;
        background-color: rgba(255,255,255, 0.02) !important;
        color: #fff;
    }

    .input-field input.disabled {
        background-color: rgba(0,0,0, 0.15);
    }

    .input-field.error input {
        border-color: #b93246 !important;
    }

    

    .input-field input.isBlocked.disabled + label {
        background-color: transparent;
    }

    .input-field .info-inputfield.error,
    .input-field.error input:focus + label,
    .input-field.error input:valid + label {
        color: #b93246 !important;
    }

    .input-field .preloader {
        background-color: transparent;
    }

    .input-field input:focus {
        border-color: #F29213;
    }

    .input-field .info-inputfield,
    .input-field .info-psw-kriterien,
    .input-field .info-psw-kriterien > p {
        color: rgba(255,255,255, 0.75);
    }

    .input-field label {
        color:#fff;
    }

    .form-images {
        display: none;
    }

    .mbk-button {
        border-radius: 28px;
        border-color: #F29213;
        background-color: #F29213;
        transition: all ease .3s;

        &.disabled {
            border-color: rgba(0,0,0, 0.2);
            background-color: rgba(0,0,0, 0.2);
            box-shadow: inset 0 0px 4px rgba(0,0,0, 0.2) ;
        }
    }

    .mbk-button:hover {
        border-color: rgba(208,81,13, 1);
        background-color: rgba(208,81,13, 1);
    }

    #goto-forgot-psw,
    #go-to-settings-two,
    #gotoRegister input[type="submit"]{
        color: #fff;

        &:focus-visible {
            border-radius: 22px;
            outline-offset: 6px;
        }
    }

    #gotoRegister input[type="submit"]{
        margin-bottom: 16px;
    }

    #gotoLogin {
        color: #fff;

        input[type="submit"] {
             color: #fff;
        }
    }

    #advertiseinfo {
        color: rgba(255,255,255, 0.75);
        margin-top: 0;

        a {
            color: rgba(255,255,255, 1);
        }
    }

    .footer {
        display: flex;
        position: fixed;
        inset: auto 0 0 0;
        justify-items: center;
        margin-top: 0;
        background-color: #023E84;
        background-image: linear-gradient(to right,#FFDE12 13.2%,#CCEAF1 22.8%,#63C2CD 29.6%,#CCEAF1 37.4%,#023e84 52.3%,#63C2CD 58.3%,#E9435C 69.8%,#a2c62e 81.3%,#FFDE12 85.4%,#95D2DD 89.5%,#F29213 100%);
        background-size: 100% 3px;
        background-repeat: no-repeat;
        background-position: 0 top;
        z-index: 55;

        @media (min-width: 1024px) {
            justify-content: flex-end;
        }

        .form-setting input[type=submit] {
            color: #fff;

            &:focus-visible {
                border-radius: 22px;
                outline-offset: 6px;
            }
        }

        .footer-logo {
            display: none;
        }

        .footer-navigation {
            padding: 0;
        
            
            @media (min-width: 1024px) {
                max-width: fit-content;
                margin: 0 2rem;
            }
        }

        .footer-navigation a:focus-visible {
            border-radius: 22px;
            outline-offset: 4px;
        }

        .footer-navigation ul#menu-footer-menue li {
            @media (min-width: 1024px) {
                margin-left: 10px;
                margin-right: 10px;
            }
        }

        .footer-navigation ul#menu-footer-menue li a {
            color: #fff;

            a:focus-visible {
                border-radius: 22px;
                outline-offset: 4px;
            }
        }

        .footer-navigation .footer-logo {
            padding-inline-start: 0;
            padding-inline-end: 5px;

            &:focus-visible {
                border-radius: 22px;
                outline-offset: -6px;
            }
            
            svg path {
                fill: #fff !important;
            }
        }
    }

}

body.page-id-4.meinbuero-online .bke.container {
    display: grid;
    grid-template-columns: 1fr;
    background-image: linear-gradient(to bottom, #023E84 30%, transparent);
    padding: 0;
    position: relative;
    min-height: 900px;
    height: 100%;
    width: 100%;
    z-index: 5;

    @media (min-width: 1024px) {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
    }

    &::before {
        background-image: radial-gradient(circle at 7% 10%, #023E84, transparent 30%);
        content: '';
        display: block;
        inset: 0;
        position: absolute;
        z-index: 1;
    }

    &::after {
        background-image: radial-gradient(circle at 95% 95%, #63C2CD, transparent 40%);
        content: '';
        display: block;
        inset: 0;
        position: absolute;
        z-index: 1;
    }

    .teaser {
        display: none;
    }
    
    .footer {
        border: none;
    }
}

body.page-id-4.meinbuero-online #main-content-formular h1  {
    color: #fff;
    margin-block: 0 18px;
}


body.page-id-4.meinbuero-online.contrast-active  {
    background-image: none;

    .formular {
        border: none !important;
    }

    .formular a {
        color: black !important;
    }

    &::after {
        display: none;
    }
}


body.page-id-4.meinbuero-online.contrast-active {
    input:-webkit-autofill,
    input:-webkit-autofill:hover, 
    input:-webkit-autofill:focus {
        -webkit-text-fill-color: #000;
        -webkit-box-shadow: 0 0 0px 40rem #fff inset;
    }

    .infobox-container .infobox-content {
        border: 1px solid #000;
    }

    .infobox-container .buhlkontoinfo > #close-infobox,
    .infobox-container .infoBoxLinks > #close-infobox
    {
        color: #000;
    }

    .infobox-container .infoBoxLinks > form > #close-infobox-goto {
        background-color: #000;
        color: #fff !important;
    }
}
 

body.page-id-4.meinbuero-online.contrast-active #main-content-formular {

    h1 {
        color: #000;
    }

    #loginForm-Box,
    #twoFactorCheckForm-Box,
    #forgotPswForm-Box,
    #registerForm-Box {
        background-color: #fff;
        background-image: none;
        color: #000;
        border: 2px solid black;

        input[type="submit"],
        #goto-forgot-psw,
        #go-to-settings-two,
        #gotoRegister,
        #goto-login,
        #goto-lost-device,
        .input-field input,
        .input-field .info-psw-kriterien
        {
            color: #000;
        }

        .input-field input {
            border: solid 2px #000;
        }
        
        .auge-offen,
        .auge-geschlossen {
            filter: none;
        }

        .mbk-button {
            border-color: #000;
            background-color: #000;
            color: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0, 0.4);

            &.disabled {
                border: 2px solid #000;
                background-color: #fff;
                color: #000;
                box-shadow: none;
            }
        }

        #gotoLogin,
        #advertiseinfo,
        .input-field label,
        .input-field .info-inputfield,
        .input-field .info-psw-kriterien > p  
        {
            color: #555;
        }

        .info-circle {
            border: 2px solid #555;
            color: #555;
            background-color: #fff;
        }
    }
}


body.page-id-4.meinbuero-online.contrast-active #main-content-formular .footer {
    background-color: #fff;

    .footer-navigation ul#menu-footer-menue li a,
    .form-setting input[type=submit] {
        color: #000;
    }
}