/* /Components/Account/Pages/ConfirmEmail.razor.rz.scp.css */

/* =========================================================
   FORGOT PASSWORD - MyBauManagement
   Gleicher Stil wie Login
   ========================================================= */

.login-page[b-szwznrkg6s] {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: radial-gradient( circle at 50% 20%, rgba(var(--ui-brand-rgb), 0.08), transparent 35% ), var(--ui-bg);
    overflow: hidden;
}

.login-background[b-szwznrkg6s] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.login-container[b-szwznrkg6s] {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 470px;
}

.login-top[b-szwznrkg6s] {
    margin-bottom: 18px;
}

.brand-back[b-szwznrkg6s] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ui-text);
    text-decoration: none;
    font-size: .9rem;
    transition: color .2s ease;
}

    .brand-back:hover[b-szwznrkg6s] {
        color: var(--ui-ink);
    }

.back-arrow[b-szwznrkg6s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    color: var(--ui-brand);
    transition: all .2s ease;
}

.brand-back:hover .back-arrow[b-szwznrkg6s] {
    background: var(--ui-brand);
    border-color: var(--ui-brand);
    color: #fff;
}

.brand-name[b-szwznrkg6s] {
    color: var(--ui-ink);
    font-weight: 700;
    letter-spacing: -.03em;
}

.brand-orange[b-szwznrkg6s] {
    color: var(--ui-brand);
}

/* Card */

.login-card[b-szwznrkg6s] {
    position: relative;
    background: rgba(255, 255, 255, .86);
    border: 1px solid var(--ui-line);
    border-radius: 22px;
    padding: 38px;
    box-shadow: 0 30px 80px rgba(16, 24, 40, 0.14), 0 0 0 1px rgba(var(--ui-ink-rgb), 0.015);
    backdrop-filter: blur(20px);
}

    .login-card[b-szwznrkg6s]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 12%;
        right: 12%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(var(--ui-brand-rgb), .8), transparent );
    }

/* Logo */

.login-logo[b-szwznrkg6s] {
    display: flex;
    justify-content: center;
    margin-bottom: 22px;
}

.logo-inner[b-szwznrkg6s] {
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(145deg, var(--ui-surface-2), var(--ui-surface));
    border: 1px solid rgba(var(--ui-brand-rgb), .45);
    box-shadow: 0 0 30px rgba(var(--ui-brand-rgb), .12), inset 0 0 20px rgba(var(--ui-brand-rgb), .04);
}

.logo-icon[b-szwznrkg6s] {
    color: var(--ui-brand);
    font-size: 30px;
}

/* Header */

.login-header[b-szwznrkg6s] {
    text-align: center;
    margin-bottom: 30px;
}

    .login-header h1[b-szwznrkg6s] {
        margin: 0;
        color: var(--ui-ink);
        font-size: 2rem;
        font-weight: 750;
        letter-spacing: -.045em;
        line-height: 1.15;
    }

        .login-header h1 span[b-szwznrkg6s] {
            display: block;
            color: var(--ui-brand);
        }

    .login-header p[b-szwznrkg6s] {
        margin: 10px auto 0;
        max-width: 340px;
        color: var(--ui-muted);
        font-size: .92rem;
        line-height: 1.6;
    }

/* Errors and validation */

.login-error[b-szwznrkg6s] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: rgba(220, 53, 69, .08);
    border: 1px solid rgba(220, 53, 69, .25);
    color: var(--ui-danger-700);
    font-size: .86rem;
}

.error-icon[b-szwznrkg6s] {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(220, 53, 69, .15);
    color: #ff7b87;
    font-size: .75rem;
    font-weight: 800;
}

.validation-summary[b-szwznrkg6s] {
    margin-bottom: 18px;
    padding: 10px 14px;
    border-radius: 9px;
    background: rgba(220, 53, 69, .07);
    border: 1px solid rgba(220, 53, 69, .2);
    color: var(--ui-danger-700);
    font-size: .85rem;
}

    .validation-summary:empty[b-szwznrkg6s] {
        display: none;
    }

.field-validation[b-szwznrkg6s] {
    display: block;
    margin: 0 0 14px 4px;
    color: #ff8d98 !important;
    font-size: .78rem;
}

/* Email field */

.login-field[b-szwznrkg6s] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 8px 14px;
    margin-bottom: 8px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

    .login-field:focus-within[b-szwznrkg6s] {
        background: var(--ui-surface);
        border-color: var(--ui-brand);
        box-shadow: 0 0 0 3px rgba(var(--ui-brand-rgb), .09);
    }

.field-icon[b-szwznrkg6s] {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(var(--ui-brand-rgb), .08);
    color: var(--ui-brand);
    font-size: 17px;
}

.field-content[b-szwznrkg6s] {
    min-width: 0;
    flex: 1;
}

    .field-content label[b-szwznrkg6s] {
        display: block;
        margin-bottom: 1px;
        color: var(--ui-muted);
        font-size: .72rem;
        font-weight: 600;
    }

    .field-content .form-control[b-szwznrkg6s] {
        width: 100%;
        height: 27px;
        padding: 0;
        background: transparent !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        color: var(--ui-ink) !important;
        font-size: .93rem;
    }

        .field-content .form-control[b-szwznrkg6s]::placeholder {
            color: var(--ui-text) !important;
        }

        .field-content .form-control:-webkit-autofill[b-szwznrkg6s],
        .field-content .form-control:-webkit-autofill:hover[b-szwznrkg6s],
        .field-content .form-control:-webkit-autofill:focus[b-szwznrkg6s] {
            -webkit-text-fill-color: var(--ui-ink) !important;
            -webkit-box-shadow: 0 0 0 1000px #111 inset !important;
            transition: background-color 5000s ease-in-out 0s;
        }

/* Button */

.login-button[b-szwznrkg6s] {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    border: 1px solid var(--ui-brand);
    border-radius: 11px;
    background: var(--ui-brand);
    color: #fff;
    font-size: .94rem;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(var(--ui-brand-rgb), .16);
    transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

    .login-button:hover[b-szwznrkg6s] {
        background: var(--ui-brand);
        border-color: var(--ui-brand);
        box-shadow: 0 12px 30px rgba(var(--ui-brand-rgb), .24);
        transform: translateY(-1px);
    }

    .login-button:active[b-szwznrkg6s] {
        background: var(--ui-brand-600);
        border-color: var(--ui-brand-600);
        transform: translateY(0);
    }

.button-arrow[b-szwznrkg6s] {
    font-size: 1.1rem;
    transition: transform .18s ease;
}

.login-button:hover .button-arrow[b-szwznrkg6s] {
    transform: translateX(4px);
}

/* Divider */

.login-divider[b-szwznrkg6s] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 27px 0 18px;
}

    .login-divider span[b-szwznrkg6s] {
        flex: 1;
        height: 1px;
        background: var(--ui-surface-2);
    }

    .login-divider small[b-szwznrkg6s] {
        color: var(--ui-text);
        font-size: .73rem;
    }

/* Back to login */

.login-links[b-szwznrkg6s] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-link[b-szwznrkg6s] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--ui-text);
    text-decoration: none;
    font-size: .84rem;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

    .login-link:hover[b-szwznrkg6s] {
        background: var(--ui-surface-2);
        border-color: var(--ui-line);
        color: var(--ui-ink);
    }

.link-icon[b-szwznrkg6s] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--ui-surface-2);
    color: var(--ui-brand);
    font-size: .8rem;
}

.login-link:hover .link-icon[b-szwznrkg6s] {
    background: rgba(var(--ui-brand-rgb), .1);
}

.link-arrow[b-szwznrkg6s] {
    margin-left: auto;
    color: var(--ui-text);
    font-size: 1rem;
    transition: color .18s ease, transform .18s ease;
}

.login-link:hover .link-arrow[b-szwznrkg6s] {
    color: var(--ui-brand);
    transform: translateX(3px);
}

/* Footer */

.login-footer[b-szwznrkg6s] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--ui-subtle);
    font-size: .72rem;
}

    .login-footer span:nth-child(2)[b-szwznrkg6s] {
        color: var(--ui-brand);
    }

/* Responsive */

@media (max-width: 600px) {
    .login-page[b-szwznrkg6s] {
        align-items: flex-start;
        padding: 20px 14px;
    }

    .login-container[b-szwznrkg6s] {
        max-width: 100%;
    }

    .login-card[b-szwznrkg6s] {
        padding: 28px 20px;
        border-radius: 18px;
    }

    .login-header[b-szwznrkg6s] {
        margin-bottom: 25px;
    }

        .login-header h1[b-szwznrkg6s] {
            font-size: 1.75rem;
        }

    .login-logo[b-szwznrkg6s] {
        margin-bottom: 18px;
    }

    .logo-inner[b-szwznrkg6s] {
        width: 58px;
        height: 58px;
        border-radius: 15px;
    }

    .logo-icon[b-szwznrkg6s] {
        font-size: 26px;
    }

    .shape-left[b-szwznrkg6s],
    .shape-right[b-szwznrkg6s] {
        display: none;
    }

    .grid-lines[b-szwznrkg6s] {
        background-size: 50px 50px;
    }
}

@media (max-width: 380px) {
    .login-page[b-szwznrkg6s] {
        padding: 14px 10px;
    }

    .login-card[b-szwznrkg6s] {
        padding: 24px 16px;
    }

    .login-header h1[b-szwznrkg6s] {
        font-size: 1.6rem;
    }

    .login-field[b-szwznrkg6s] {
        min-height: 62px;
    }
}


/* =========================================================
   BESTÄTIGUNGSMELDUNG (Erfolg / Fehler / Warten)
   ========================================================= */

.confirmation-message[b-szwznrkg6s] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 22px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid var(--ui-line);
    background: var(--ui-surface-2, #f9fafb);
    color: var(--ui-text);
    text-align: left;
}

    .confirmation-message strong[b-szwznrkg6s] {
        display: block;
        margin-bottom: 4px;
        color: var(--ui-ink);
        font-size: .98rem;
    }

    .confirmation-message p[b-szwznrkg6s] {
        margin: 0 0 6px;
        font-size: .9rem;
        line-height: 1.55;
    }

        .confirmation-message p:last-child[b-szwznrkg6s] {
            margin-bottom: 0;
        }

        .confirmation-message p strong[b-szwznrkg6s] {
            display: inline;
            font-size: inherit;
            word-break: break-all;
        }

.confirmation-message-icon[b-szwznrkg6s] {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: var(--ui-surface-3, #f2f4f7);
    color: var(--ui-muted);
    font-size: 1.15rem;
}

.success-message[b-szwznrkg6s] {
    background: var(--ui-success-50);
    border-color: rgba(18, 183, 106, .28);
}

    .success-message .confirmation-message-icon[b-szwznrkg6s] {
        background: rgba(18, 183, 106, .14);
        color: var(--ui-success-700);
    }

.error-message[b-szwznrkg6s] {
    background: #fef3f2;
    border-color: rgba(240, 68, 56, .25);
}

    .error-message .confirmation-message-icon[b-szwznrkg6s] {
        background: rgba(240, 68, 56, .12);
        color: var(--ui-danger-700);
    }

.confirmation-actions[b-szwznrkg6s] {
    margin-bottom: 4px;
}

.confirmation-button[b-szwznrkg6s] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    text-decoration: none;
    margin-bottom: 4px;
}

    .confirmation-button:hover[b-szwznrkg6s] {
        color: #fff;
    }

@media (max-width: 480px) {
    .confirmation-message[b-szwznrkg6s] {
        padding: 14px;
        gap: 12px;
    }
}
/* /Components/Account/Pages/ForgotPassword.razor.rz.scp.css */

/* =========================================================
   FORGOT PASSWORD - MyBauManagement
   Gleicher Stil wie Login
   ========================================================= */

.login-page[b-rqvui2gw89] {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: radial-gradient( circle at 50% 20%, rgba(var(--ui-brand-rgb), 0.08), transparent 35% ), var(--ui-bg);
    overflow: hidden;
}

.login-background[b-rqvui2gw89] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.login-container[b-rqvui2gw89] {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 470px;
}

.login-top[b-rqvui2gw89] {
    margin-bottom: 18px;
}

.brand-back[b-rqvui2gw89] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ui-text);
    text-decoration: none;
    font-size: .9rem;
    transition: color .2s ease;
}

    .brand-back:hover[b-rqvui2gw89] {
        color: var(--ui-ink);
    }

.back-arrow[b-rqvui2gw89] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    color: var(--ui-brand);
    transition: all .2s ease;
}

.brand-back:hover .back-arrow[b-rqvui2gw89] {
    background: var(--ui-brand);
    border-color: var(--ui-brand);
    color: #fff;
}

.brand-name[b-rqvui2gw89] {
    color: var(--ui-ink);
    font-weight: 700;
    letter-spacing: -.03em;
}

.brand-orange[b-rqvui2gw89] {
    color: var(--ui-brand);
}

/* Card */

.login-card[b-rqvui2gw89] {
    position: relative;
    background: rgba(255, 255, 255, .86);
    border: 1px solid var(--ui-line);
    border-radius: 22px;
    padding: 38px;
    box-shadow: 0 30px 80px rgba(16, 24, 40, 0.14), 0 0 0 1px rgba(var(--ui-ink-rgb), 0.015);
    backdrop-filter: blur(20px);
}

    .login-card[b-rqvui2gw89]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 12%;
        right: 12%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(var(--ui-brand-rgb), .8), transparent );
    }

/* Logo */

.login-logo[b-rqvui2gw89] {
    display: flex;
    justify-content: center;
    margin-bottom: 22px;
}

.logo-inner[b-rqvui2gw89] {
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(145deg, var(--ui-surface-2), var(--ui-surface));
    border: 1px solid rgba(var(--ui-brand-rgb), .45);
    box-shadow: 0 0 30px rgba(var(--ui-brand-rgb), .12), inset 0 0 20px rgba(var(--ui-brand-rgb), .04);
}

.logo-icon[b-rqvui2gw89] {
    color: var(--ui-brand);
    font-size: 30px;
}

/* Header */

.login-header[b-rqvui2gw89] {
    text-align: center;
    margin-bottom: 30px;
}

    .login-header h1[b-rqvui2gw89] {
        margin: 0;
        color: var(--ui-ink);
        font-size: 2rem;
        font-weight: 750;
        letter-spacing: -.045em;
        line-height: 1.15;
    }

        .login-header h1 span[b-rqvui2gw89] {
            display: block;
            color: var(--ui-brand);
        }

    .login-header p[b-rqvui2gw89] {
        margin: 10px auto 0;
        max-width: 340px;
        color: var(--ui-muted);
        font-size: .92rem;
        line-height: 1.6;
    }

/* Errors and validation */

.login-error[b-rqvui2gw89] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: rgba(220, 53, 69, .08);
    border: 1px solid rgba(220, 53, 69, .25);
    color: var(--ui-danger-700);
    font-size: .86rem;
}

.error-icon[b-rqvui2gw89] {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(220, 53, 69, .15);
    color: #ff7b87;
    font-size: .75rem;
    font-weight: 800;
}

.validation-summary[b-rqvui2gw89] {
    margin-bottom: 18px;
    padding: 10px 14px;
    border-radius: 9px;
    background: rgba(220, 53, 69, .07);
    border: 1px solid rgba(220, 53, 69, .2);
    color: var(--ui-danger-700);
    font-size: .85rem;
}

    .validation-summary:empty[b-rqvui2gw89] {
        display: none;
    }

.field-validation[b-rqvui2gw89] {
    display: block;
    margin: 0 0 14px 4px;
    color: #ff8d98 !important;
    font-size: .78rem;
}

/* Email field */

.login-field[b-rqvui2gw89] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 8px 14px;
    margin-bottom: 8px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

    .login-field:focus-within[b-rqvui2gw89] {
        background: var(--ui-surface);
        border-color: var(--ui-brand);
        box-shadow: 0 0 0 3px rgba(var(--ui-brand-rgb), .09);
    }

.field-icon[b-rqvui2gw89] {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(var(--ui-brand-rgb), .08);
    color: var(--ui-brand);
    font-size: 17px;
}

.field-content[b-rqvui2gw89] {
    min-width: 0;
    flex: 1;
}

    .field-content label[b-rqvui2gw89] {
        display: block;
        margin-bottom: 1px;
        color: var(--ui-muted);
        font-size: .72rem;
        font-weight: 600;
    }

    .field-content .form-control[b-rqvui2gw89] {
        width: 100%;
        height: 27px;
        padding: 0;
        background: transparent !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        color: var(--ui-ink) !important;
        font-size: .93rem;
    }

        .field-content .form-control[b-rqvui2gw89]::placeholder {
            color: var(--ui-text) !important;
        }

        .field-content .form-control:-webkit-autofill[b-rqvui2gw89],
        .field-content .form-control:-webkit-autofill:hover[b-rqvui2gw89],
        .field-content .form-control:-webkit-autofill:focus[b-rqvui2gw89] {
            -webkit-text-fill-color: var(--ui-ink) !important;
            -webkit-box-shadow: 0 0 0 1000px #111 inset !important;
            transition: background-color 5000s ease-in-out 0s;
        }

/* Button */

.login-button[b-rqvui2gw89] {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    border: 1px solid var(--ui-brand);
    border-radius: 11px;
    background: var(--ui-brand);
    color: #fff;
    font-size: .94rem;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(var(--ui-brand-rgb), .16);
    transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

    .login-button:hover[b-rqvui2gw89] {
        background: var(--ui-brand);
        border-color: var(--ui-brand);
        box-shadow: 0 12px 30px rgba(var(--ui-brand-rgb), .24);
        transform: translateY(-1px);
    }

    .login-button:active[b-rqvui2gw89] {
        background: var(--ui-brand-600);
        border-color: var(--ui-brand-600);
        transform: translateY(0);
    }

.button-arrow[b-rqvui2gw89] {
    font-size: 1.1rem;
    transition: transform .18s ease;
}

.login-button:hover .button-arrow[b-rqvui2gw89] {
    transform: translateX(4px);
}

/* Divider */

.login-divider[b-rqvui2gw89] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 27px 0 18px;
}

    .login-divider span[b-rqvui2gw89] {
        flex: 1;
        height: 1px;
        background: var(--ui-surface-2);
    }

    .login-divider small[b-rqvui2gw89] {
        color: var(--ui-text);
        font-size: .73rem;
    }

/* Back to login */

.login-links[b-rqvui2gw89] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-link[b-rqvui2gw89] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--ui-text);
    text-decoration: none;
    font-size: .84rem;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

    .login-link:hover[b-rqvui2gw89] {
        background: var(--ui-surface-2);
        border-color: var(--ui-line);
        color: var(--ui-ink);
    }

.link-icon[b-rqvui2gw89] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--ui-surface-2);
    color: var(--ui-brand);
    font-size: .8rem;
}

.login-link:hover .link-icon[b-rqvui2gw89] {
    background: rgba(var(--ui-brand-rgb), .1);
}

.link-arrow[b-rqvui2gw89] {
    margin-left: auto;
    color: var(--ui-text);
    font-size: 1rem;
    transition: color .18s ease, transform .18s ease;
}

.login-link:hover .link-arrow[b-rqvui2gw89] {
    color: var(--ui-brand);
    transform: translateX(3px);
}

/* Footer */

.login-footer[b-rqvui2gw89] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--ui-subtle);
    font-size: .72rem;
}

    .login-footer span:nth-child(2)[b-rqvui2gw89] {
        color: var(--ui-brand);
    }

/* Responsive */

@media (max-width: 600px) {
    .login-page[b-rqvui2gw89] {
        align-items: flex-start;
        padding: 20px 14px;
    }

    .login-container[b-rqvui2gw89] {
        max-width: 100%;
    }

    .login-card[b-rqvui2gw89] {
        padding: 28px 20px;
        border-radius: 18px;
    }

    .login-header[b-rqvui2gw89] {
        margin-bottom: 25px;
    }

        .login-header h1[b-rqvui2gw89] {
            font-size: 1.75rem;
        }

    .login-logo[b-rqvui2gw89] {
        margin-bottom: 18px;
    }

    .logo-inner[b-rqvui2gw89] {
        width: 58px;
        height: 58px;
        border-radius: 15px;
    }

    .logo-icon[b-rqvui2gw89] {
        font-size: 26px;
    }

    .shape-left[b-rqvui2gw89],
    .shape-right[b-rqvui2gw89] {
        display: none;
    }

    .grid-lines[b-rqvui2gw89] {
        background-size: 50px 50px;
    }
}

@media (max-width: 380px) {
    .login-page[b-rqvui2gw89] {
        padding: 14px 10px;
    }

    .login-card[b-rqvui2gw89] {
        padding: 24px 16px;
    }

    .login-header h1[b-rqvui2gw89] {
        font-size: 1.6rem;
    }

    .login-field[b-rqvui2gw89] {
        min-height: 62px;
    }
}
/* /Components/Account/Pages/ForgotPasswordConfirmation.razor.rz.scp.css */

/* =========================================================
   FORGOT PASSWORD - MyBauManagement
   Gleicher Stil wie Login
   ========================================================= */

.login-page[b-5wgat5j6h7] {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: radial-gradient( circle at 50% 20%, rgba(var(--ui-brand-rgb), 0.08), transparent 35% ), var(--ui-bg);
    overflow: hidden;
}

.login-background[b-5wgat5j6h7] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.login-container[b-5wgat5j6h7] {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 470px;
}

.login-top[b-5wgat5j6h7] {
    margin-bottom: 18px;
}

.brand-back[b-5wgat5j6h7] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ui-text);
    text-decoration: none;
    font-size: .9rem;
    transition: color .2s ease;
}

    .brand-back:hover[b-5wgat5j6h7] {
        color: var(--ui-ink);
    }

.back-arrow[b-5wgat5j6h7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    color: var(--ui-brand);
    transition: all .2s ease;
}

.brand-back:hover .back-arrow[b-5wgat5j6h7] {
    background: var(--ui-brand);
    border-color: var(--ui-brand);
    color: #fff;
}

.brand-name[b-5wgat5j6h7] {
    color: var(--ui-ink);
    font-weight: 700;
    letter-spacing: -.03em;
}

.brand-orange[b-5wgat5j6h7] {
    color: var(--ui-brand);
}

/* Card */

.login-card[b-5wgat5j6h7] {
    position: relative;
    background: rgba(255, 255, 255, .86);
    border: 1px solid var(--ui-line);
    border-radius: 22px;
    padding: 38px;
    box-shadow: 0 30px 80px rgba(16, 24, 40, 0.14), 0 0 0 1px rgba(var(--ui-ink-rgb), 0.015);
    backdrop-filter: blur(20px);
}

    .login-card[b-5wgat5j6h7]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 12%;
        right: 12%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(var(--ui-brand-rgb), .8), transparent );
    }

/* Logo */

.login-logo[b-5wgat5j6h7] {
    display: flex;
    justify-content: center;
    margin-bottom: 22px;
}

.logo-inner[b-5wgat5j6h7] {
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(145deg, var(--ui-surface-2), var(--ui-surface));
    border: 1px solid rgba(var(--ui-brand-rgb), .45);
    box-shadow: 0 0 30px rgba(var(--ui-brand-rgb), .12), inset 0 0 20px rgba(var(--ui-brand-rgb), .04);
}

.logo-icon[b-5wgat5j6h7] {
    color: var(--ui-brand);
    font-size: 30px;
}

/* Header */

.login-header[b-5wgat5j6h7] {
    text-align: center;
    margin-bottom: 30px;
}

    .login-header h1[b-5wgat5j6h7] {
        margin: 0;
        color: var(--ui-ink);
        font-size: 2rem;
        font-weight: 750;
        letter-spacing: -.045em;
        line-height: 1.15;
    }

        .login-header h1 span[b-5wgat5j6h7] {
            display: block;
            color: var(--ui-brand);
        }

    .login-header p[b-5wgat5j6h7] {
        margin: 10px auto 0;
        max-width: 340px;
        color: var(--ui-muted);
        font-size: .92rem;
        line-height: 1.6;
    }

/* Errors and validation */

.login-error[b-5wgat5j6h7] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: rgba(220, 53, 69, .08);
    border: 1px solid rgba(220, 53, 69, .25);
    color: var(--ui-danger-700);
    font-size: .86rem;
}

.error-icon[b-5wgat5j6h7] {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(220, 53, 69, .15);
    color: #ff7b87;
    font-size: .75rem;
    font-weight: 800;
}

.validation-summary[b-5wgat5j6h7] {
    margin-bottom: 18px;
    padding: 10px 14px;
    border-radius: 9px;
    background: rgba(220, 53, 69, .07);
    border: 1px solid rgba(220, 53, 69, .2);
    color: var(--ui-danger-700);
    font-size: .85rem;
}

    .validation-summary:empty[b-5wgat5j6h7] {
        display: none;
    }

.field-validation[b-5wgat5j6h7] {
    display: block;
    margin: 0 0 14px 4px;
    color: #ff8d98 !important;
    font-size: .78rem;
}

/* Email field */

.login-field[b-5wgat5j6h7] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 8px 14px;
    margin-bottom: 8px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

    .login-field:focus-within[b-5wgat5j6h7] {
        background: var(--ui-surface);
        border-color: var(--ui-brand);
        box-shadow: 0 0 0 3px rgba(var(--ui-brand-rgb), .09);
    }

.field-icon[b-5wgat5j6h7] {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(var(--ui-brand-rgb), .08);
    color: var(--ui-brand);
    font-size: 17px;
}

.field-content[b-5wgat5j6h7] {
    min-width: 0;
    flex: 1;
}

    .field-content label[b-5wgat5j6h7] {
        display: block;
        margin-bottom: 1px;
        color: var(--ui-muted);
        font-size: .72rem;
        font-weight: 600;
    }

    .field-content .form-control[b-5wgat5j6h7] {
        width: 100%;
        height: 27px;
        padding: 0;
        background: transparent !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        color: var(--ui-ink) !important;
        font-size: .93rem;
    }

        .field-content .form-control[b-5wgat5j6h7]::placeholder {
            color: var(--ui-text) !important;
        }

        .field-content .form-control:-webkit-autofill[b-5wgat5j6h7],
        .field-content .form-control:-webkit-autofill:hover[b-5wgat5j6h7],
        .field-content .form-control:-webkit-autofill:focus[b-5wgat5j6h7] {
            -webkit-text-fill-color: var(--ui-ink) !important;
            -webkit-box-shadow: 0 0 0 1000px #111 inset !important;
            transition: background-color 5000s ease-in-out 0s;
        }

/* Button */

.login-button[b-5wgat5j6h7] {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    border: 1px solid var(--ui-brand);
    border-radius: 11px;
    background: var(--ui-brand);
    color: #fff;
    font-size: .94rem;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(var(--ui-brand-rgb), .16);
    transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

    .login-button:hover[b-5wgat5j6h7] {
        background: var(--ui-brand);
        border-color: var(--ui-brand);
        box-shadow: 0 12px 30px rgba(var(--ui-brand-rgb), .24);
        transform: translateY(-1px);
    }

    .login-button:active[b-5wgat5j6h7] {
        background: var(--ui-brand-600);
        border-color: var(--ui-brand-600);
        transform: translateY(0);
    }

.button-arrow[b-5wgat5j6h7] {
    font-size: 1.1rem;
    transition: transform .18s ease;
}

.login-button:hover .button-arrow[b-5wgat5j6h7] {
    transform: translateX(4px);
}

/* Divider */

.login-divider[b-5wgat5j6h7] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 27px 0 18px;
}

    .login-divider span[b-5wgat5j6h7] {
        flex: 1;
        height: 1px;
        background: var(--ui-surface-2);
    }

    .login-divider small[b-5wgat5j6h7] {
        color: var(--ui-text);
        font-size: .73rem;
    }

/* Back to login */

.login-links[b-5wgat5j6h7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-link[b-5wgat5j6h7] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--ui-text);
    text-decoration: none;
    font-size: .84rem;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

    .login-link:hover[b-5wgat5j6h7] {
        background: var(--ui-surface-2);
        border-color: var(--ui-line);
        color: var(--ui-ink);
    }

.link-icon[b-5wgat5j6h7] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--ui-surface-2);
    color: var(--ui-brand);
    font-size: .8rem;
}

.login-link:hover .link-icon[b-5wgat5j6h7] {
    background: rgba(var(--ui-brand-rgb), .1);
}

.link-arrow[b-5wgat5j6h7] {
    margin-left: auto;
    color: var(--ui-text);
    font-size: 1rem;
    transition: color .18s ease, transform .18s ease;
}

.login-link:hover .link-arrow[b-5wgat5j6h7] {
    color: var(--ui-brand);
    transform: translateX(3px);
}

/* Footer */

.login-footer[b-5wgat5j6h7] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--ui-subtle);
    font-size: .72rem;
}

    .login-footer span:nth-child(2)[b-5wgat5j6h7] {
        color: var(--ui-brand);
    }

/* Responsive */

@media (max-width: 600px) {
    .login-page[b-5wgat5j6h7] {
        align-items: flex-start;
        padding: 20px 14px;
    }

    .login-container[b-5wgat5j6h7] {
        max-width: 100%;
    }

    .login-card[b-5wgat5j6h7] {
        padding: 28px 20px;
        border-radius: 18px;
    }

    .login-header[b-5wgat5j6h7] {
        margin-bottom: 25px;
    }

        .login-header h1[b-5wgat5j6h7] {
            font-size: 1.75rem;
        }

    .login-logo[b-5wgat5j6h7] {
        margin-bottom: 18px;
    }

    .logo-inner[b-5wgat5j6h7] {
        width: 58px;
        height: 58px;
        border-radius: 15px;
    }

    .logo-icon[b-5wgat5j6h7] {
        font-size: 26px;
    }

    .shape-left[b-5wgat5j6h7],
    .shape-right[b-5wgat5j6h7] {
        display: none;
    }

    .grid-lines[b-5wgat5j6h7] {
        background-size: 50px 50px;
    }
}

@media (max-width: 380px) {
    .login-page[b-5wgat5j6h7] {
        padding: 14px 10px;
    }

    .login-card[b-5wgat5j6h7] {
        padding: 24px 16px;
    }

    .login-header h1[b-5wgat5j6h7] {
        font-size: 1.6rem;
    }

    .login-field[b-5wgat5j6h7] {
        min-height: 62px;
    }
}
/* /Components/Account/Pages/Login.razor.rz.scp.css */
/* =========================================================
   LOGIN PAGE - MyBauManagement
   ========================================================= */

.login-page[b-jlmq2xrpwt] {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: radial-gradient(circle at 50% 20%, rgba(var(--ui-brand-rgb), 0.08), transparent 35%), var(--ui-bg);
    overflow: hidden;
}


/* =========================================================
   BACKGROUND
   ========================================================= */

.login-background[b-jlmq2xrpwt] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.glow[b-jlmq2xrpwt] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .35;
}

.glow-1[b-jlmq2xrpwt] {
    width: 420px;
    height: 420px;
    top: -180px;
    left: -120px;
    background: rgba(var(--ui-brand-rgb), .12);
}

.glow-2[b-jlmq2xrpwt] {
    width: 500px;
    height: 500px;
    bottom: -250px;
    right: -150px;
    background: rgba(var(--ui-brand-rgb), .09);
}

.grid-lines[b-jlmq2xrpwt] {
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image: linear-gradient(rgba(var(--ui-ink-rgb), .025) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ui-ink-rgb), .025) 1px, transparent 1px);
    background-size: 70px 70px;
}


/* =========================================================
   CONSTRUCTION BACKGROUND SHAPES
   ========================================================= */

.construction-shape[b-jlmq2xrpwt] {
    position: absolute;
    opacity: .08;
}

.shape-left[b-jlmq2xrpwt] {
    left: 3%;
    bottom: 5%;
    width: 280px;
    height: 420px;
}

.crane-tower[b-jlmq2xrpwt] {
    position: absolute;
    bottom: 0;
    left: 70px;
    width: 5px;
    height: 330px;
    background: var(--ui-brand);
    box-shadow: 25px 0 0 rgba(var(--ui-brand-rgb), .5), 50px 0 0 rgba(var(--ui-brand-rgb), .25);
}

    .crane-tower[b-jlmq2xrpwt]::before,
    .crane-tower[b-jlmq2xrpwt]::after {
        content: "";
        position: absolute;
        left: 0;
        width: 75px;
        height: 2px;
        background: var(--ui-brand);
        transform-origin: left center;
    }

    .crane-tower[b-jlmq2xrpwt]::before {
        top: 45px;
        transform: rotate(28deg);
    }

    .crane-tower[b-jlmq2xrpwt]::after {
        top: 105px;
        transform: rotate(-28deg);
    }

.crane-arm[b-jlmq2xrpwt] {
    position: absolute;
    left: 72px;
    top: 45px;
    width: 190px;
    height: 4px;
    background: var(--ui-brand);
}

    .crane-arm[b-jlmq2xrpwt]::after {
        content: "";
        position: absolute;
        right: 20px;
        top: 4px;
        width: 2px;
        height: 90px;
        background: var(--ui-brand);
    }


/* Right buildings */

.shape-right[b-jlmq2xrpwt] {
    right: 2%;
    bottom: 0;
    width: 380px;
    height: 300px;
}

.building[b-jlmq2xrpwt] {
    position: absolute;
    bottom: 0;
    background: rgba(var(--ui-brand-rgb), .12);
    border: 1px solid rgba(var(--ui-brand-rgb), .25);
}

.building-1[b-jlmq2xrpwt] {
    right: 0;
    width: 90px;
    height: 210px;
}

.building-2[b-jlmq2xrpwt] {
    right: 100px;
    width: 120px;
    height: 160px;
}

.building-3[b-jlmq2xrpwt] {
    right: 230px;
    width: 90px;
    height: 115px;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.login-container[b-jlmq2xrpwt] {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 470px;
}


/* =========================================================
   TOP BRAND
   ========================================================= */

.login-top[b-jlmq2xrpwt] {
    margin-bottom: 18px;
}

.brand-back[b-jlmq2xrpwt] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ui-text);
    text-decoration: none;
    font-size: .9rem;
    transition: color .2s ease;
}

    .brand-back:hover[b-jlmq2xrpwt] {
        color: var(--ui-ink);
    }

.back-arrow[b-jlmq2xrpwt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    color: var(--ui-brand);
    transition: all .2s ease;
}

.brand-back:hover .back-arrow[b-jlmq2xrpwt] {
    background: var(--ui-brand);
    border-color: var(--ui-brand);
    color: #fff;
}

.brand-name[b-jlmq2xrpwt] {
    color: var(--ui-ink);
    font-weight: 700;
    letter-spacing: -.03em;
}

.brand-orange[b-jlmq2xrpwt] {
    color: var(--ui-brand);
}


/* =========================================================
   LOGIN CARD
   ========================================================= */

.login-card[b-jlmq2xrpwt] {
    position: relative;
    background: rgba(255, 255, 255, .86);
    border: 1px solid var(--ui-line);
    border-radius: 22px;
    padding: 38px;
    box-shadow: 0 30px 80px rgba(16, 24, 40, 0.14), 0 0 0 1px rgba(var(--ui-ink-rgb), 0.015);
    backdrop-filter: blur(20px);
}

    .login-card[b-jlmq2xrpwt]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 12%;
        right: 12%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(var(--ui-brand-rgb), .8), transparent );
    }


/* =========================================================
   LOGO
   ========================================================= */

.login-logo[b-jlmq2xrpwt] {
    display: flex;
    justify-content: center;
    margin-bottom: 22px;
}

.logo-inner[b-jlmq2xrpwt] {
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(145deg, var(--ui-surface-2), var(--ui-surface));
    border: 1px solid rgba(var(--ui-brand-rgb), .45);
    box-shadow: 0 0 30px rgba(var(--ui-brand-rgb), .12), inset 0 0 20px rgba(var(--ui-brand-rgb), .04);
}

.logo-icon[b-jlmq2xrpwt] {
    font-size: 30px;
    filter: grayscale(.2);
}


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

.login-header[b-jlmq2xrpwt] {
    text-align: center;
    margin-bottom: 30px;
}

    .login-header h1[b-jlmq2xrpwt] {
        margin: 0;
        color: var(--ui-ink);
        font-size: 2rem;
        font-weight: 750;
        letter-spacing: -.045em;
        line-height: 1.15;
    }

        .login-header h1 span[b-jlmq2xrpwt] {
            color: var(--ui-brand);
        }

    .login-header p[b-jlmq2xrpwt] {
        margin: 10px auto 0;
        max-width: 340px;
        color: var(--ui-muted);
        font-size: .92rem;
        line-height: 1.55;
    }


/* =========================================================
   ERROR
   ========================================================= */

.login-error[b-jlmq2xrpwt] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: rgba(220, 53, 69, .08);
    border: 1px solid rgba(220, 53, 69, .25);
    color: var(--ui-danger-700);
    font-size: .86rem;
}

.error-icon[b-jlmq2xrpwt] {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(220,53,69,.15);
    color: #ff7b87;
    font-size: .75rem;
    font-weight: 800;
}


/* =========================================================
   VALIDATION
   ========================================================= */

.validation-summary[b-jlmq2xrpwt] {
    margin-bottom: 18px;
    padding: 10px 14px;
    border-radius: 9px;
    background: rgba(220, 53, 69, .07);
    border: 1px solid rgba(220, 53, 69, .2);
    color: var(--ui-danger-700);
    font-size: .85rem;
}

    .validation-summary:empty[b-jlmq2xrpwt] {
        display: none;
    }

.field-validation[b-jlmq2xrpwt] {
    display: block;
    margin-top: -12px;
    margin-bottom: 14px;
    padding-left: 4px;
    color: #ff8d98 !important;
    font-size: .78rem;
}


/* =========================================================
   INPUT FIELDS
   ========================================================= */

.login-field[b-jlmq2xrpwt] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 8px 14px;
    margin-bottom: 8px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

    .login-field:focus-within[b-jlmq2xrpwt] {
        background: var(--ui-surface);
        border-color: var(--ui-brand);
        box-shadow: 0 0 0 3px rgba(var(--ui-brand-rgb), .09);
    }

.field-icon[b-jlmq2xrpwt] {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(var(--ui-brand-rgb), .08);
    color: var(--ui-brand);
    font-size: 17px;
}

.field-content[b-jlmq2xrpwt] {
    min-width: 0;
    flex: 1;
}

    .field-content label[b-jlmq2xrpwt] {
        display: block;
        margin-bottom: 1px;
        color: var(--ui-muted);
        font-size: .72rem;
        font-weight: 600;
    }

    .field-content .form-control[b-jlmq2xrpwt] {
        width: 100%;
        height: 27px;
        padding: 0;
        background: transparent !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        color: var(--ui-ink) !important;
        font-size: .93rem;
    }

        .field-content .form-control[b-jlmq2xrpwt]::placeholder {
            color: var(--ui-subtle) !important;
        }

        .field-content .form-control:-webkit-autofill[b-jlmq2xrpwt],
        .field-content .form-control:-webkit-autofill:hover[b-jlmq2xrpwt],
        .field-content .form-control:-webkit-autofill:focus[b-jlmq2xrpwt] {
            -webkit-text-fill-color: var(--ui-ink) !important;
            -webkit-box-shadow: 0 0 0 1000px #111 inset !important;
            transition: background-color 5000s ease-in-out 0s;
        }


/* =========================================================
   REMEMBER ME
   ========================================================= */

.remember-row[b-jlmq2xrpwt] {
    margin: 17px 2px 20px;
}

.remember-label[b-jlmq2xrpwt] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--ui-text);
    font-size: .84rem;
    cursor: pointer;
    user-select: none;
}

.remember-checkbox[b-jlmq2xrpwt] {
    width: 17px;
    height: 17px;
    margin: 0 !important;
    background-color: var(--ui-surface) !important;
    border: 1px solid var(--ui-line-strong) !important;
    box-shadow: none !important;
    cursor: pointer;
}

    .remember-checkbox:checked[b-jlmq2xrpwt] {
        background-color: var(--ui-brand) !important;
        border-color: var(--ui-brand) !important;
    }


/* =========================================================
   LOGIN BUTTON
   ========================================================= */

.login-button[b-jlmq2xrpwt] {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid var(--ui-brand);
    border-radius: 11px;
    background: var(--ui-brand);
    color: #fff;
    font-size: .94rem;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(var(--ui-brand-rgb), .16);
    transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

    .login-button:hover[b-jlmq2xrpwt] {
        background: var(--ui-brand);
        border-color: var(--ui-brand);
        box-shadow: 0 12px 30px rgba(var(--ui-brand-rgb), .24);
        transform: translateY(-1px);
    }

    .login-button:active[b-jlmq2xrpwt] {
        background: var(--ui-brand-600);
        border-color: var(--ui-brand-600);
        transform: translateY(0);
        box-shadow: 0 5px 15px rgba(var(--ui-brand-rgb), .14);
    }

.button-arrow[b-jlmq2xrpwt] {
    font-size: 1.1rem;
    transition: transform .18s ease;
}

.login-button:hover .button-arrow[b-jlmq2xrpwt] {
    transform: translateX(4px);
}


/* =========================================================
   DIVIDER
   ========================================================= */

.login-divider[b-jlmq2xrpwt] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 27px 0 18px;
}

    .login-divider span[b-jlmq2xrpwt] {
        flex: 1;
        height: 1px;
        background: var(--ui-surface-2);
    }

    .login-divider small[b-jlmq2xrpwt] {
        color: var(--ui-text);
        font-size: .73rem;
    }


/* =========================================================
   LINKS
   ========================================================= */

.login-links[b-jlmq2xrpwt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-link[b-jlmq2xrpwt] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--ui-text);
    text-decoration: none;
    font-size: .84rem;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

    .login-link:hover[b-jlmq2xrpwt] {
        background: var(--ui-surface-2);
        border-color: var(--ui-line);
        color: var(--ui-ink);
    }

.link-icon[b-jlmq2xrpwt] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--ui-surface-2);
    color: var(--ui-brand);
    font-size: .8rem;
}

.login-link:hover .link-icon[b-jlmq2xrpwt] {
    background: rgba(var(--ui-brand-rgb), .1);
}

.link-arrow[b-jlmq2xrpwt] {
    margin-left: auto;
    color: var(--ui-text);
    font-size: 1rem;
    transition: color .18s ease, transform .18s ease;
}

.login-link:hover .link-arrow[b-jlmq2xrpwt] {
    color: var(--ui-brand);
    transform: translateX(3px);
}


/* =========================================================
   FOOTER
   ========================================================= */

.login-footer[b-jlmq2xrpwt] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--ui-subtle);
    font-size: .72rem;
}

    .login-footer span:nth-child(2)[b-jlmq2xrpwt] {
        color: var(--ui-brand);
    }


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 600px) {

    .login-page[b-jlmq2xrpwt] {
        align-items: flex-start;
        padding: 20px 14px;
    }

    .login-container[b-jlmq2xrpwt] {
        max-width: 100%;
    }

    .login-card[b-jlmq2xrpwt] {
        padding: 28px 20px;
        border-radius: 18px;
    }

    .login-header[b-jlmq2xrpwt] {
        margin-bottom: 25px;
    }

        .login-header h1[b-jlmq2xrpwt] {
            font-size: 1.75rem;
        }

    .login-logo[b-jlmq2xrpwt] {
        margin-bottom: 18px;
    }

    .logo-inner[b-jlmq2xrpwt] {
        width: 58px;
        height: 58px;
        border-radius: 15px;
    }

    .logo-icon[b-jlmq2xrpwt] {
        font-size: 26px;
    }

    .shape-left[b-jlmq2xrpwt],
    .shape-right[b-jlmq2xrpwt] {
        display: none;
    }

    .grid-lines[b-jlmq2xrpwt] {
        background-size: 50px 50px;
    }
}


@media (max-width: 380px) {

    .login-page[b-jlmq2xrpwt] {
        padding: 14px 10px;
    }

    .login-card[b-jlmq2xrpwt] {
        padding: 24px 16px;
    }

    .login-header h1[b-jlmq2xrpwt] {
        font-size: 1.6rem;
    }

    .login-field[b-jlmq2xrpwt] {
        min-height: 62px;
    }
}
/* /Components/Account/Pages/Register.razor.rz.scp.css */
/* =========================================================
   REGISTER PAGE - MyBauManagement
   ========================================================= */

.register-page[b-m7nkpl4cu3] {
    position: relative;
    min-height: 100vh;
    width: 100%;
    padding: 35px 20px 45px;
    background: radial-gradient(circle at 50% 5%, rgba(var(--ui-brand-rgb), .08), transparent 32%), var(--ui-bg);
    color: var(--ui-ink);
    overflow-x: hidden;
}


/* =========================================================
   BACKGROUND
   ========================================================= */

.register-background[b-m7nkpl4cu3] {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.register-glow[b-m7nkpl4cu3] {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .35;
}

.register-glow-1[b-m7nkpl4cu3] {
    width: 500px;
    height: 500px;
    top: -250px;
    left: -180px;
    background: rgba(var(--ui-brand-rgb), .10);
}

.register-glow-2[b-m7nkpl4cu3] {
    width: 550px;
    height: 550px;
    right: -250px;
    bottom: -280px;
    background: rgba(var(--ui-brand-rgb), .08);
}

.register-grid[b-m7nkpl4cu3] {
    position: absolute;
    inset: 0;
    opacity: .16;
    background-image: linear-gradient(rgba(var(--ui-ink-rgb), .025) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ui-ink-rgb), .025) 1px, transparent 1px);
    background-size: 70px 70px;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.register-container[b-m7nkpl4cu3] {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.register-top[b-m7nkpl4cu3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 45px;
}

.register-brand[b-m7nkpl4cu3] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ui-ink);
    text-decoration: none;
}

.register-brand-back[b-m7nkpl4cu3] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    color: var(--ui-brand);
    transition: all .2s ease;
}

.register-brand:hover .register-brand-back[b-m7nkpl4cu3] {
    background: var(--ui-brand);
    border-color: var(--ui-brand);
    color: #fff;
}

.register-brand strong[b-m7nkpl4cu3] {
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: -.035em;
}

    .register-brand strong span[b-m7nkpl4cu3] {
        color: var(--ui-brand);
    }

.register-login-top[b-m7nkpl4cu3] {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--ui-muted);
    font-size: .82rem;
}

    .register-login-top a[b-m7nkpl4cu3] {
        color: var(--ui-brand);
        text-decoration: none;
        font-weight: 600;
        transition: color .18s ease;
    }

        .register-login-top a:hover[b-m7nkpl4cu3] {
            color: var(--ui-brand-600);
        }


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

.register-heading[b-m7nkpl4cu3] {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 38px;
}

.register-heading-badge[b-m7nkpl4cu3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    margin-bottom: 17px;
    border: 1px solid rgba(var(--ui-brand-rgb), .22);
    border-radius: 30px;
    background: rgba(var(--ui-brand-rgb), .06);
    color: #ff9a45;
    font-size: .74rem;
    font-weight: 700;
}

.badge-dot[b-m7nkpl4cu3] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ui-brand);
    box-shadow: 0 0 10px rgba(var(--ui-brand-rgb), .7);
}

.register-heading h1[b-m7nkpl4cu3] {
    margin: 0;
    color: var(--ui-ink);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.055em;
}

    .register-heading h1 span[b-m7nkpl4cu3] {
        color: var(--ui-brand);
        display: block;
    }

.register-heading p[b-m7nkpl4cu3] {
    max-width: 590px;
    margin: 15px auto 0;
    color: var(--ui-muted);
    font-size: .95rem;
    line-height: 1.6;
}


/* =========================================================
   MESSAGE / VALIDATION
   ========================================================= */

.register-message[b-m7nkpl4cu3] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 13px 15px;
    border-radius: 11px;
    background: rgba(220,53,69,.08);
    border: 1px solid rgba(220,53,69,.25);
    color: #ff9ba4;
    font-size: .85rem;
}

    .register-message i[b-m7nkpl4cu3] {
        color: #ff7884;
    }

.register-validation[b-m7nkpl4cu3] {
    margin-bottom: 18px;
}

    .register-validation:empty[b-m7nkpl4cu3] {
        display: none;
    }

    .register-validation .validation-summary[b-m7nkpl4cu3] {
        margin: 0;
        padding: 13px 15px;
        border-radius: 11px;
        background: rgba(220,53,69,.08);
        border: 1px solid rgba(220,53,69,.25);
        color: #ff9ba4;
        font-size: .84rem;
    }

        .register-validation .validation-summary:empty[b-m7nkpl4cu3] {
            display: none;
        }


/* =========================================================
   REGISTER CARD
   ========================================================= */

.register-card[b-m7nkpl4cu3] {
    position: relative;
    margin-bottom: 18px;
    padding: 30px;
    background: rgba(255, 255, 255, .86);
    border: 1px solid var(--ui-line);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(16, 24, 40, 0.08), 0 0 0 1px rgba(var(--ui-ink-rgb), 0.012);
    backdrop-filter: blur(18px);
}

    .register-card[b-m7nkpl4cu3]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 8%;
        right: 8%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(var(--ui-brand-rgb), .35), transparent );
    }


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

.register-section-header[b-m7nkpl4cu3] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 25px;
}

.section-number[b-m7nkpl4cu3] {
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(var(--ui-brand-rgb), .08);
    border: 1px solid rgba(var(--ui-brand-rgb), .28);
    color: var(--ui-brand);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .03em;
}

.register-section-header h2[b-m7nkpl4cu3] {
    margin: 0;
    color: var(--ui-ink);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.025em;
}

.register-section-header p[b-m7nkpl4cu3] {
    margin: 4px 0 0;
    color: var(--ui-muted);
    font-size: .78rem;
}


/* =========================================================
   FORM GRID
   ========================================================= */

.register-fields[b-m7nkpl4cu3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 15px;
}

.register-field[b-m7nkpl4cu3] {
    min-width: 0;
}

    .register-field.full[b-m7nkpl4cu3] {
        grid-column: 1 / -1;
    }

    .register-field.address[b-m7nkpl4cu3] {
        grid-column: span 1;
    }

    .register-field.postal[b-m7nkpl4cu3] {
        grid-column: span 1;
    }

    .register-field.city[b-m7nkpl4cu3] {
        grid-column: span 1;
    }


    /* =========================================================
   LABELS
   ========================================================= */

    .register-field > label[b-m7nkpl4cu3] {
        display: block;
        margin-bottom: 7px;
        padding-left: 2px;
        color: var(--ui-text);
        font-size: .77rem;
        font-weight: 600;
    }

        .register-field > label span[b-m7nkpl4cu3] {
            color: var(--ui-brand);
        }


/* =========================================================
   INPUTS
   ========================================================= */

.register-input-wrapper[b-m7nkpl4cu3] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 13px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

    .register-input-wrapper:focus-within[b-m7nkpl4cu3] {
        background: var(--ui-surface);
        border-color: var(--ui-brand);
        box-shadow: 0 0 0 3px rgba(var(--ui-brand-rgb), .08);
    }

    .register-input-wrapper > i[b-m7nkpl4cu3] {
        flex: 0 0 auto;
        color: var(--ui-muted);
        font-size: .95rem;
        transition: color .18s ease;
    }

    .register-input-wrapper:focus-within > i[b-m7nkpl4cu3] {
        color: var(--ui-brand);
    }

.register-input[b-m7nkpl4cu3] {
    min-width: 0;
    width: 100%;
    height: 45px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    color: var(--ui-ink) !important;
    font-size: .88rem;
}

    .register-input[b-m7nkpl4cu3]::placeholder {
        color: var(--ui-subtle) !important;
    }

    .register-input:-webkit-autofill[b-m7nkpl4cu3],
    .register-input:-webkit-autofill:hover[b-m7nkpl4cu3],
    .register-input:-webkit-autofill:focus[b-m7nkpl4cu3] {
        -webkit-text-fill-color: var(--ui-ink) !important;
        -webkit-box-shadow: 0 0 0 1000px #111 inset !important;
        transition: background-color 5000s ease-in-out 0s;
    }

.register-field > div + div[b-m7nkpl4cu3],
.register-field > .text-danger[b-m7nkpl4cu3] {
    display: block;
    margin-top: 6px;
    color: #ff8993 !important;
    font-size: .74rem;
}


/* =========================================================
   PLAN GRID / PACKAGE CARDS
   ========================================================= */

.plan-grid[b-m7nkpl4cu3] {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 16px;
    width: 100%;
    margin-top: 22px;
}

.plan-card[b-m7nkpl4cu3] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 205px;
    padding: 22px 20px 20px;
    border: 1px solid rgba(var(--ui-ink-rgb), 0.11);
    border-radius: 16px;
    background: linear-gradient(145deg,rgba(var(--ui-ink-rgb), .065),rgba(var(--ui-ink-rgb), .025));
    box-shadow: 0 12px 30px rgba(16, 24, 40, 0.06),inset 0 1px 0 rgba(var(--ui-ink-rgb), 0.040);
    cursor: pointer;
    overflow: hidden;
    transition: transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

    .plan-card[b-m7nkpl4cu3]::before {
        content: "";
        position: absolute;
        top: -70px;
        right: -70px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: rgba(var(--ui-brand-rgb), .10);
        filter: blur(35px);
        opacity: 0;
        transition: opacity .25s ease;
        pointer-events: none;
    }

    .plan-card:hover[b-m7nkpl4cu3] {
        transform: translateY(-4px);
        border-color: rgba(var(--ui-brand-rgb), .50);
        background: linear-gradient(145deg,rgba(var(--ui-brand-rgb), .08),rgba(var(--ui-ink-rgb), .035));
        box-shadow: 0 18px 40px rgba(16, 24, 40, 0.09),0 0 0 1px rgba(var(--ui-brand-rgb), .08);
    }

        .plan-card:hover[b-m7nkpl4cu3]::before {
            opacity: 1;
        }

    .plan-card.selected[b-m7nkpl4cu3] {
        border-color: var(--ui-brand);
        background: linear-gradient(145deg,rgba(var(--ui-brand-rgb), .15),var(--ui-surface-2) 72%);
        box-shadow: 0 16px 40px rgba(16, 24, 40, 0.09),0 0 0 1px rgba(var(--ui-brand-rgb), .18),0 0 28px rgba(var(--ui-brand-rgb), .10);
    }

.plan-radio[b-m7nkpl4cu3] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.plan-top[b-m7nkpl4cu3] {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    padding-right: 38px;
}

.plan-name[b-m7nkpl4cu3] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: var(--ui-ink);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
}

    .plan-name > span[b-m7nkpl4cu3] {
        color: var(--ui-subtle);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0;
    }

.plan-check[b-m7nkpl4cu3] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-brand);
    color: #fff;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(var(--ui-brand-rgb), 0.25);
}

    .plan-check[b-m7nkpl4cu3]::before {
        content: "✓";
    }

.plan-check[b-m7nkpl4cu3] {
    font-size: 0;
}

    .plan-check[b-m7nkpl4cu3]::before {
        font-size: 14px;
    }

@keyframes planCheckIn-b-m7nkpl4cu3 {
    from {
        opacity: 0;
        transform: scale(.75)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.plan-price[b-m7nkpl4cu3] {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 25px;
    color: var(--ui-ink);
    font-size: 34px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -.045em;
}

    .plan-price span[b-m7nkpl4cu3] {
        color: var(--ui-text);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0;
    }

.plan-employees[b-m7nkpl4cu3] {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 20px;
    color: var(--ui-subtle);
    font-size: 12px;
    font-weight: 600;
}

    .plan-employees i[b-m7nkpl4cu3] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: rgba(var(--ui-brand-rgb), .10);
        color: var(--ui-brand);
        font-size: 14px;
    }

.plan-card.selected .plan-name > span[b-m7nkpl4cu3], .plan-card.selected .plan-employees[b-m7nkpl4cu3] {
    color: var(--ui-text);
}

    .plan-card.selected .plan-employees i[b-m7nkpl4cu3] {
        background: rgba(var(--ui-brand-rgb), .16);
    }

.plan-card:focus-within[b-m7nkpl4cu3] {
    outline: 2px solid rgba(var(--ui-brand-rgb), .65);
    outline-offset: 3px;
}

@media (max-width:1000px) {
    .plan-grid[b-m7nkpl4cu3] {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 14px
    }

    .plan-card[b-m7nkpl4cu3] {
        min-height: 195px
    }

    .plan-price[b-m7nkpl4cu3] {
        font-size: 32px
    }
}

@media (max-width:600px) {
    .plan-grid[b-m7nkpl4cu3] {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 18px
    }

    .plan-card[b-m7nkpl4cu3] {
        min-height: 0;
        padding: 19px 18px;
        border-radius: 14px
    }

    .plan-top[b-m7nkpl4cu3] {
        min-height: 34px
    }

    .plan-name[b-m7nkpl4cu3] {
        font-size: 17px
    }

        .plan-name > span[b-m7nkpl4cu3] {
            font-size: 11px
        }

    .plan-price[b-m7nkpl4cu3] {
        margin-top: 18px;
        font-size: 31px
    }

    .plan-employees[b-m7nkpl4cu3] {
        padding-top: 17px;
        font-size: 11px
    }

    .plan-check[b-m7nkpl4cu3] {
        width: 25px;
        height: 25px;
        font-size: 13px
    }

    .plan-card:hover[b-m7nkpl4cu3] {
        transform: none
    }
}

@media (max-width:380px) {
    .plan-card[b-m7nkpl4cu3] {
        padding: 17px 15px
    }

    .plan-price[b-m7nkpl4cu3] {
        font-size: 29px
    }

    .plan-employees i[b-m7nkpl4cu3] {
        width: 26px;
        height: 26px
    }
}

/* =========================================================
   STRIPE
   ========================================================= */

.stripe-box[b-m7nkpl4cu3] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px;
    background: linear-gradient( 135deg, var(--ui-surface-2), var(--ui-surface) );
    border: 1px solid var(--ui-line);
    border-radius: 12px;
}

.stripe-lock[b-m7nkpl4cu3] {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(var(--ui-brand-rgb), .08);
    border: 1px solid rgba(var(--ui-brand-rgb), .18);
    color: var(--ui-brand);
}

.stripe-content[b-m7nkpl4cu3] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

    .stripe-content strong[b-m7nkpl4cu3] {
        color: var(--ui-ink);
        font-size: .84rem;
        font-weight: 700;
    }

    .stripe-content span[b-m7nkpl4cu3] {
        margin-top: 4px;
        color: var(--ui-muted);
        font-size: .73rem;
        line-height: 1.45;
    }

.stripe-word[b-m7nkpl4cu3] {
    color: var(--ui-muted);
    font-size: 1.1rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: -.05em;
}

/* =========================================================
   SUBMIT
   ========================================================= */

.register-submit-area[b-m7nkpl4cu3] {
    margin-top: 25px;
}

.register-submit[b-m7nkpl4cu3] {
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid var(--ui-brand);
    border-radius: 11px;
    background: var(--ui-brand);
    color: #fff;
    font-size: .92rem;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(var(--ui-brand-rgb), .15);
    transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

    .register-submit:hover[b-m7nkpl4cu3] {
        background: var(--ui-brand);
        border-color: var(--ui-brand);
        box-shadow: 0 14px 35px rgba(var(--ui-brand-rgb), .23);
        transform: translateY(-1px);
    }

    .register-submit:active[b-m7nkpl4cu3] {
        background: var(--ui-brand-600);
        border-color: var(--ui-brand-600);
        transform: translateY(0);
    }

.submit-arrow[b-m7nkpl4cu3] {
    font-size: 1.15rem;
    transition: transform .18s ease;
}

.register-submit:hover .submit-arrow[b-m7nkpl4cu3] {
    transform: translateX(4px);
}


/* =========================================================
   TRIAL INFO
   ========================================================= */

.trial-info[b-m7nkpl4cu3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 13px;
    padding: 11px 15px;
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    background: var(--ui-surface);
}

.trial-icon[b-m7nkpl4cu3] {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(var(--ui-brand-rgb), .08);
    color: var(--ui-brand);
    font-size: .8rem;
}

.trial-info > div:last-child[b-m7nkpl4cu3] {
    display: flex;
    flex-direction: column;
}

.trial-info strong[b-m7nkpl4cu3] {
    color: var(--ui-text);
    font-size: .75rem;
}

.trial-info span[b-m7nkpl4cu3] {
    margin-top: 2px;
    color: var(--ui-text);
    font-size: .68rem;
}


/* =========================================================
   LEGAL
   ========================================================= */

.register-legal[b-m7nkpl4cu3] {
    max-width: 650px;
    margin: 18px auto 0;
    color: var(--ui-subtle);
    font-size: .7rem;
    line-height: 1.6;
}

    .register-legal a[b-m7nkpl4cu3] {
        color: var(--ui-muted);
        text-decoration: underline;
        text-decoration-color: #444;
        text-underline-offset: 2px;
        transition: color .18s ease;
    }

        .register-legal a:hover[b-m7nkpl4cu3] {
            color: var(--ui-brand);
        }


/* =========================================================
   LOGIN BOTTOM
   ========================================================= */

.register-login[b-m7nkpl4cu3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 18px;
    color: var(--ui-text);
    font-size: .78rem;
}

    .register-login a[b-m7nkpl4cu3] {
        color: var(--ui-brand);
        font-weight: 650;
        text-decoration: none;
        transition: color .18s ease;
    }

        .register-login a:hover[b-m7nkpl4cu3] {
            color: var(--ui-brand-600);
        }


/* =========================================================
   FOOTER
   ========================================================= */

.register-footer[b-m7nkpl4cu3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 25px;
    color: var(--ui-subtle);
    font-size: .68rem;
}

    .register-footer span:nth-child(2)[b-m7nkpl4cu3] {
        color: var(--ui-brand);
    }


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 850px) {

    .register-container[b-m7nkpl4cu3] {
        max-width: 700px;
    }

    .plan-grid[b-m7nkpl4cu3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 650px) {

    .register-page[b-m7nkpl4cu3] {
        padding: 20px 12px 35px;
    }

    .register-top[b-m7nkpl4cu3] {
        margin-bottom: 32px;
    }

    .register-login-top span[b-m7nkpl4cu3] {
        display: none;
    }

    .register-heading[b-m7nkpl4cu3] {
        margin-bottom: 28px;
    }

        .register-heading h1[b-m7nkpl4cu3] {
            font-size: 2rem;
        }

        .register-heading p[b-m7nkpl4cu3] {
            font-size: .86rem;
        }

    .register-card[b-m7nkpl4cu3] {
        padding: 22px 18px;
        border-radius: 15px;
    }

    .register-fields[b-m7nkpl4cu3] {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .register-field[b-m7nkpl4cu3],
    .register-field.full[b-m7nkpl4cu3],
    .register-field.address[b-m7nkpl4cu3],
    .register-field.postal[b-m7nkpl4cu3],
    .register-field.city[b-m7nkpl4cu3] {
        grid-column: 1 / -1;
    }

    .plan-grid[b-m7nkpl4cu3] {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }

    .plan-card[b-m7nkpl4cu3] {
        min-height: 145px;
        padding: 14px;
    }

    .plan-price[b-m7nkpl4cu3] {
        margin-top: 20px;
        font-size: 1.3rem;
    }

    .stripe-box[b-m7nkpl4cu3] {
        align-items: flex-start;
    }

    .stripe-word[b-m7nkpl4cu3] {
        display: none;
    }
}


@media (max-width: 430px) {

    .register-page[b-m7nkpl4cu3] {
        padding: 14px 9px 30px;
    }

    .register-top[b-m7nkpl4cu3] {
        margin-bottom: 25px;
    }

    .register-brand strong[b-m7nkpl4cu3] {
        font-size: .95rem;
    }

    .register-heading-badge[b-m7nkpl4cu3] {
        font-size: .68rem;
    }

    .register-heading h1[b-m7nkpl4cu3] {
        font-size: 1.75rem;
    }

    .register-card[b-m7nkpl4cu3] {
        padding: 20px 14px;
    }

    .register-section-header[b-m7nkpl4cu3] {
        gap: 10px;
    }

    .section-number[b-m7nkpl4cu3] {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
    }

    .register-section-header h2[b-m7nkpl4cu3] {
        font-size: .96rem;
    }

    .register-section-header p[b-m7nkpl4cu3] {
        font-size: .7rem;
    }

    .plan-grid[b-m7nkpl4cu3] {
        grid-template-columns: 1fr;
    }

    .plan-card[b-m7nkpl4cu3] {
        min-height: 125px;
    }

    .plan-price[b-m7nkpl4cu3] {
        margin-top: 17px;
    }

    .trial-info[b-m7nkpl4cu3] {
        justify-content: flex-start;
    }

    .register-login[b-m7nkpl4cu3] {
        flex-direction: column;
        gap: 4px;
    }
}

/* =========================================================
   LIGHTER DARK THEME
   ========================================================= */

.register-page[b-m7nkpl4cu3] {
    background: radial-gradient( circle at 50% 0%, rgba(var(--ui-brand-rgb), .12), transparent 38% ), linear-gradient( 135deg, var(--ui-surface) 0%, var(--ui-surface) 45%, var(--ui-surface) 100% );
}


/* Cards - lighter than background */
.register-card[b-m7nkpl4cu3] {
    background: var(--ui-surface-2);
    border-color: var(--ui-line);
    box-shadow: 0 18px 45px rgba(16, 24, 40, 0.08), inset 0 1px 0 rgba(var(--ui-ink-rgb), 0.025);
}


/* Inputs - clearly separated */
.register-input-wrapper[b-m7nkpl4cu3] {
    background: var(--ui-surface-2);
    border-color: var(--ui-line-strong);
}

    .register-input-wrapper:focus-within[b-m7nkpl4cu3] {
        background: var(--ui-surface-2);
        border-color: var(--ui-brand);
        box-shadow: 0 0 0 3px rgba(var(--ui-brand-rgb), .10);
    }


/* Input text */
.register-input[b-m7nkpl4cu3] {
    color: var(--ui-ink) !important;
}

    .register-input[b-m7nkpl4cu3]::placeholder {
        color: var(--ui-muted) !important;
    }


/* Plan cards */
.plan-card[b-m7nkpl4cu3] {
    background: var(--ui-surface-2);
    border-color: var(--ui-line-strong);
}

    .plan-card:hover[b-m7nkpl4cu3] {
        background: var(--ui-surface-2);
        border-color: var(--ui-text);
    }

    .plan-card.selected[b-m7nkpl4cu3] {
        background: linear-gradient( 145deg, rgba(var(--ui-brand-rgb), .15), var(--ui-surface-2) );
        border-color: var(--ui-brand);
    }


/* Stripe */
.stripe-box[b-m7nkpl4cu3] {
    background: var(--ui-surface-2);
    border-color: var(--ui-line-strong);
}


/* Trial */
.trial-info[b-m7nkpl4cu3] {
    background: var(--ui-surface-2);
    border-color: var(--ui-line-strong);
}


/* Top brand button */
.register-brand-back[b-m7nkpl4cu3] {
    background: var(--ui-surface-2);
    border-color: var(--ui-line-strong);
}


/* Login top */
.register-login-top[b-m7nkpl4cu3] {
    color: var(--ui-muted);
}


/* Header description */
.register-heading p[b-m7nkpl4cu3] {
    color: var(--ui-text);
}


/* Section descriptions */
.register-section-header p[b-m7nkpl4cu3] {
    color: var(--ui-muted);
}


/* Labels */
.register-field > label[b-m7nkpl4cu3] {
    color: var(--ui-text);
}


/* Icons */
.register-input-wrapper > i[b-m7nkpl4cu3] {
    color: var(--ui-muted);
}

.register-input-wrapper:focus-within > i[b-m7nkpl4cu3] {
    color: var(--ui-brand);
}


/* Number boxes */
.section-number[b-m7nkpl4cu3] {
    background: rgba(var(--ui-brand-rgb), .10);
    border-color: rgba(var(--ui-brand-rgb), .30);
}


/* Footer / legal */
.register-legal[b-m7nkpl4cu3] {
    color: var(--ui-muted);
}

.register-footer[b-m7nkpl4cu3] {
    color: var(--ui-text);
}


/* Better grid visibility */
.register-grid[b-m7nkpl4cu3] {
    opacity: .25;
}


/* Background glow */
.register-glow-1[b-m7nkpl4cu3] {
    opacity: .45;
}

.register-glow-2[b-m7nkpl4cu3] {
    opacity: .40;
}

/* AVV Checkbox und Text größer */
.register-legal .form-check[b-m7nkpl4cu3] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px !important;
}

.register-legal .form-check-input[b-m7nkpl4cu3] {
    width: 30px;
    height: 30px;
    margin-top: 3px;
    margin-left: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.register-legal .form-check-label[b-m7nkpl4cu3] {
    font-size: 17px;
    line-height: 1.7;
    cursor: pointer;
}

    .register-legal .form-check-label a[b-m7nkpl4cu3] {
        font-weight: 600;
        text-decoration: underline;
    }
/* /Components/Account/Pages/RegisterConfirmation.razor.rz.scp.css */

/* =========================================================
   FORGOT PASSWORD - MyBauManagement
   Gleicher Stil wie Login
   ========================================================= */

.login-page[b-v97ibffot3] {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: radial-gradient( circle at 50% 20%, rgba(var(--ui-brand-rgb), 0.08), transparent 35% ), var(--ui-bg);
    overflow: hidden;
}

.login-background[b-v97ibffot3] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.login-container[b-v97ibffot3] {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 470px;
}

.login-top[b-v97ibffot3] {
    margin-bottom: 18px;
}

.brand-back[b-v97ibffot3] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ui-text);
    text-decoration: none;
    font-size: .9rem;
    transition: color .2s ease;
}

    .brand-back:hover[b-v97ibffot3] {
        color: var(--ui-ink);
    }

.back-arrow[b-v97ibffot3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    color: var(--ui-brand);
    transition: all .2s ease;
}

.brand-back:hover .back-arrow[b-v97ibffot3] {
    background: var(--ui-brand);
    border-color: var(--ui-brand);
    color: #fff;
}

.brand-name[b-v97ibffot3] {
    color: var(--ui-ink);
    font-weight: 700;
    letter-spacing: -.03em;
}

.brand-orange[b-v97ibffot3] {
    color: var(--ui-brand);
}

/* Card */

.login-card[b-v97ibffot3] {
    position: relative;
    background: rgba(255, 255, 255, .86);
    border: 1px solid var(--ui-line);
    border-radius: 22px;
    padding: 38px;
    box-shadow: 0 30px 80px rgba(16, 24, 40, 0.14), 0 0 0 1px rgba(var(--ui-ink-rgb), 0.015);
    backdrop-filter: blur(20px);
}

    .login-card[b-v97ibffot3]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 12%;
        right: 12%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(var(--ui-brand-rgb), .8), transparent );
    }

/* Logo */

.login-logo[b-v97ibffot3] {
    display: flex;
    justify-content: center;
    margin-bottom: 22px;
}

.logo-inner[b-v97ibffot3] {
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(145deg, var(--ui-surface-2), var(--ui-surface));
    border: 1px solid rgba(var(--ui-brand-rgb), .45);
    box-shadow: 0 0 30px rgba(var(--ui-brand-rgb), .12), inset 0 0 20px rgba(var(--ui-brand-rgb), .04);
}

.logo-icon[b-v97ibffot3] {
    color: var(--ui-brand);
    font-size: 30px;
}

/* Header */

.login-header[b-v97ibffot3] {
    text-align: center;
    margin-bottom: 30px;
}

    .login-header h1[b-v97ibffot3] {
        margin: 0;
        color: var(--ui-ink);
        font-size: 2rem;
        font-weight: 750;
        letter-spacing: -.045em;
        line-height: 1.15;
    }

        .login-header h1 span[b-v97ibffot3] {
            display: block;
            color: var(--ui-brand);
        }

    .login-header p[b-v97ibffot3] {
        margin: 10px auto 0;
        max-width: 340px;
        color: var(--ui-muted);
        font-size: .92rem;
        line-height: 1.6;
    }

/* Errors and validation */

.login-error[b-v97ibffot3] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: rgba(220, 53, 69, .08);
    border: 1px solid rgba(220, 53, 69, .25);
    color: var(--ui-danger-700);
    font-size: .86rem;
}

.error-icon[b-v97ibffot3] {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(220, 53, 69, .15);
    color: #ff7b87;
    font-size: .75rem;
    font-weight: 800;
}

.validation-summary[b-v97ibffot3] {
    margin-bottom: 18px;
    padding: 10px 14px;
    border-radius: 9px;
    background: rgba(220, 53, 69, .07);
    border: 1px solid rgba(220, 53, 69, .2);
    color: var(--ui-danger-700);
    font-size: .85rem;
}

    .validation-summary:empty[b-v97ibffot3] {
        display: none;
    }

.field-validation[b-v97ibffot3] {
    display: block;
    margin: 0 0 14px 4px;
    color: #ff8d98 !important;
    font-size: .78rem;
}

/* Email field */

.login-field[b-v97ibffot3] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 8px 14px;
    margin-bottom: 8px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

    .login-field:focus-within[b-v97ibffot3] {
        background: var(--ui-surface);
        border-color: var(--ui-brand);
        box-shadow: 0 0 0 3px rgba(var(--ui-brand-rgb), .09);
    }

.field-icon[b-v97ibffot3] {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(var(--ui-brand-rgb), .08);
    color: var(--ui-brand);
    font-size: 17px;
}

.field-content[b-v97ibffot3] {
    min-width: 0;
    flex: 1;
}

    .field-content label[b-v97ibffot3] {
        display: block;
        margin-bottom: 1px;
        color: var(--ui-muted);
        font-size: .72rem;
        font-weight: 600;
    }

    .field-content .form-control[b-v97ibffot3] {
        width: 100%;
        height: 27px;
        padding: 0;
        background: transparent !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        color: var(--ui-ink) !important;
        font-size: .93rem;
    }

        .field-content .form-control[b-v97ibffot3]::placeholder {
            color: var(--ui-text) !important;
        }

        .field-content .form-control:-webkit-autofill[b-v97ibffot3],
        .field-content .form-control:-webkit-autofill:hover[b-v97ibffot3],
        .field-content .form-control:-webkit-autofill:focus[b-v97ibffot3] {
            -webkit-text-fill-color: var(--ui-ink) !important;
            -webkit-box-shadow: 0 0 0 1000px #111 inset !important;
            transition: background-color 5000s ease-in-out 0s;
        }

/* Button */

.login-button[b-v97ibffot3] {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    border: 1px solid var(--ui-brand);
    border-radius: 11px;
    background: var(--ui-brand);
    color: #fff;
    font-size: .94rem;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(var(--ui-brand-rgb), .16);
    transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

    .login-button:hover[b-v97ibffot3] {
        background: var(--ui-brand);
        border-color: var(--ui-brand);
        box-shadow: 0 12px 30px rgba(var(--ui-brand-rgb), .24);
        transform: translateY(-1px);
    }

    .login-button:active[b-v97ibffot3] {
        background: var(--ui-brand-600);
        border-color: var(--ui-brand-600);
        transform: translateY(0);
    }

.button-arrow[b-v97ibffot3] {
    font-size: 1.1rem;
    transition: transform .18s ease;
}

.login-button:hover .button-arrow[b-v97ibffot3] {
    transform: translateX(4px);
}

/* Divider */

.login-divider[b-v97ibffot3] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 27px 0 18px;
}

    .login-divider span[b-v97ibffot3] {
        flex: 1;
        height: 1px;
        background: var(--ui-surface-2);
    }

    .login-divider small[b-v97ibffot3] {
        color: var(--ui-text);
        font-size: .73rem;
    }

/* Back to login */

.login-links[b-v97ibffot3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-link[b-v97ibffot3] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--ui-text);
    text-decoration: none;
    font-size: .84rem;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

    .login-link:hover[b-v97ibffot3] {
        background: var(--ui-surface-2);
        border-color: var(--ui-line);
        color: var(--ui-ink);
    }

.link-icon[b-v97ibffot3] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--ui-surface-2);
    color: var(--ui-brand);
    font-size: .8rem;
}

.login-link:hover .link-icon[b-v97ibffot3] {
    background: rgba(var(--ui-brand-rgb), .1);
}

.link-arrow[b-v97ibffot3] {
    margin-left: auto;
    color: var(--ui-text);
    font-size: 1rem;
    transition: color .18s ease, transform .18s ease;
}

.login-link:hover .link-arrow[b-v97ibffot3] {
    color: var(--ui-brand);
    transform: translateX(3px);
}

/* Footer */

.login-footer[b-v97ibffot3] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--ui-subtle);
    font-size: .72rem;
}

    .login-footer span:nth-child(2)[b-v97ibffot3] {
        color: var(--ui-brand);
    }

/* Responsive */

@media (max-width: 600px) {
    .login-page[b-v97ibffot3] {
        align-items: flex-start;
        padding: 20px 14px;
    }

    .login-container[b-v97ibffot3] {
        max-width: 100%;
    }

    .login-card[b-v97ibffot3] {
        padding: 28px 20px;
        border-radius: 18px;
    }

    .login-header[b-v97ibffot3] {
        margin-bottom: 25px;
    }

        .login-header h1[b-v97ibffot3] {
            font-size: 1.75rem;
        }

    .login-logo[b-v97ibffot3] {
        margin-bottom: 18px;
    }

    .logo-inner[b-v97ibffot3] {
        width: 58px;
        height: 58px;
        border-radius: 15px;
    }

    .logo-icon[b-v97ibffot3] {
        font-size: 26px;
    }

    .shape-left[b-v97ibffot3],
    .shape-right[b-v97ibffot3] {
        display: none;
    }

    .grid-lines[b-v97ibffot3] {
        background-size: 50px 50px;
    }
}

@media (max-width: 380px) {
    .login-page[b-v97ibffot3] {
        padding: 14px 10px;
    }

    .login-card[b-v97ibffot3] {
        padding: 24px 16px;
    }

    .login-header h1[b-v97ibffot3] {
        font-size: 1.6rem;
    }

    .login-field[b-v97ibffot3] {
        min-height: 62px;
    }
}


/* =========================================================
   BESTÄTIGUNGSMELDUNG (Erfolg / Fehler / Warten)
   ========================================================= */

.confirmation-message[b-v97ibffot3] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 22px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid var(--ui-line);
    background: var(--ui-surface-2, #f9fafb);
    color: var(--ui-text);
    text-align: left;
}

    .confirmation-message strong[b-v97ibffot3] {
        display: block;
        margin-bottom: 4px;
        color: var(--ui-ink);
        font-size: .98rem;
    }

    .confirmation-message p[b-v97ibffot3] {
        margin: 0 0 6px;
        font-size: .9rem;
        line-height: 1.55;
    }

        .confirmation-message p:last-child[b-v97ibffot3] {
            margin-bottom: 0;
        }

        .confirmation-message p strong[b-v97ibffot3] {
            display: inline;
            font-size: inherit;
            word-break: break-all;
        }

.confirmation-message-icon[b-v97ibffot3] {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: var(--ui-surface-3, #f2f4f7);
    color: var(--ui-muted);
    font-size: 1.15rem;
}

.success-message[b-v97ibffot3] {
    background: var(--ui-success-50);
    border-color: rgba(18, 183, 106, .28);
}

    .success-message .confirmation-message-icon[b-v97ibffot3] {
        background: rgba(18, 183, 106, .14);
        color: var(--ui-success-700);
    }

.error-message[b-v97ibffot3] {
    background: #fef3f2;
    border-color: rgba(240, 68, 56, .25);
}

    .error-message .confirmation-message-icon[b-v97ibffot3] {
        background: rgba(240, 68, 56, .12);
        color: var(--ui-danger-700);
    }

.confirmation-actions[b-v97ibffot3] {
    margin-bottom: 4px;
}

.confirmation-button[b-v97ibffot3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    text-decoration: none;
    margin-bottom: 4px;
}

    .confirmation-button:hover[b-v97ibffot3] {
        color: #fff;
    }

@media (max-width: 480px) {
    .confirmation-message[b-v97ibffot3] {
        padding: 14px;
        gap: 12px;
    }
}
/* /Components/Account/Pages/ResetPassword.razor.rz.scp.css */

/* =========================================================
   FORGOT PASSWORD - MyBauManagement
   Gleicher Stil wie Login
   ========================================================= */

.login-page[b-oauv0ve72h] {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: radial-gradient( circle at 50% 20%, rgba(var(--ui-brand-rgb), 0.08), transparent 35% ), var(--ui-bg);
    overflow: hidden;
}

.login-background[b-oauv0ve72h] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.login-container[b-oauv0ve72h] {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 470px;
}

.login-top[b-oauv0ve72h] {
    margin-bottom: 18px;
}

.brand-back[b-oauv0ve72h] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ui-text);
    text-decoration: none;
    font-size: .9rem;
    transition: color .2s ease;
}

    .brand-back:hover[b-oauv0ve72h] {
        color: var(--ui-ink);
    }

.back-arrow[b-oauv0ve72h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    color: var(--ui-brand);
    transition: all .2s ease;
}

.brand-back:hover .back-arrow[b-oauv0ve72h] {
    background: var(--ui-brand);
    border-color: var(--ui-brand);
    color: #fff;
}

.brand-name[b-oauv0ve72h] {
    color: var(--ui-ink);
    font-weight: 700;
    letter-spacing: -.03em;
}

.brand-orange[b-oauv0ve72h] {
    color: var(--ui-brand);
}

/* Card */

.login-card[b-oauv0ve72h] {
    position: relative;
    background: rgba(255, 255, 255, .86);
    border: 1px solid var(--ui-line);
    border-radius: 22px;
    padding: 38px;
    box-shadow: 0 30px 80px rgba(16, 24, 40, 0.14), 0 0 0 1px rgba(var(--ui-ink-rgb), 0.015);
    backdrop-filter: blur(20px);
}

    .login-card[b-oauv0ve72h]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 12%;
        right: 12%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(var(--ui-brand-rgb), .8), transparent );
    }

/* Logo */

.login-logo[b-oauv0ve72h] {
    display: flex;
    justify-content: center;
    margin-bottom: 22px;
}

.logo-inner[b-oauv0ve72h] {
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(145deg, var(--ui-surface-2), var(--ui-surface));
    border: 1px solid rgba(var(--ui-brand-rgb), .45);
    box-shadow: 0 0 30px rgba(var(--ui-brand-rgb), .12), inset 0 0 20px rgba(var(--ui-brand-rgb), .04);
}

.logo-icon[b-oauv0ve72h] {
    color: var(--ui-brand);
    font-size: 30px;
}

/* Header */

.login-header[b-oauv0ve72h] {
    text-align: center;
    margin-bottom: 30px;
}

    .login-header h1[b-oauv0ve72h] {
        margin: 0;
        color: var(--ui-ink);
        font-size: 2rem;
        font-weight: 750;
        letter-spacing: -.045em;
        line-height: 1.15;
    }

        .login-header h1 span[b-oauv0ve72h] {
            display: block;
            color: var(--ui-brand);
        }

    .login-header p[b-oauv0ve72h] {
        margin: 10px auto 0;
        max-width: 340px;
        color: var(--ui-muted);
        font-size: .92rem;
        line-height: 1.6;
    }

/* Errors and validation */

.login-error[b-oauv0ve72h] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: rgba(220, 53, 69, .08);
    border: 1px solid rgba(220, 53, 69, .25);
    color: var(--ui-danger-700);
    font-size: .86rem;
}

.error-icon[b-oauv0ve72h] {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(220, 53, 69, .15);
    color: #ff7b87;
    font-size: .75rem;
    font-weight: 800;
}

.validation-summary[b-oauv0ve72h] {
    margin-bottom: 18px;
    padding: 10px 14px;
    border-radius: 9px;
    background: rgba(220, 53, 69, .07);
    border: 1px solid rgba(220, 53, 69, .2);
    color: var(--ui-danger-700);
    font-size: .85rem;
}

    .validation-summary:empty[b-oauv0ve72h] {
        display: none;
    }

.field-validation[b-oauv0ve72h] {
    display: block;
    margin: 0 0 14px 4px;
    color: #ff8d98 !important;
    font-size: .78rem;
}

/* Email field */

.login-field[b-oauv0ve72h] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 8px 14px;
    margin-bottom: 8px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

    .login-field:focus-within[b-oauv0ve72h] {
        background: var(--ui-surface);
        border-color: var(--ui-brand);
        box-shadow: 0 0 0 3px rgba(var(--ui-brand-rgb), .09);
    }

.field-icon[b-oauv0ve72h] {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(var(--ui-brand-rgb), .08);
    color: var(--ui-brand);
    font-size: 17px;
}

.field-content[b-oauv0ve72h] {
    min-width: 0;
    flex: 1;
}

    .field-content label[b-oauv0ve72h] {
        display: block;
        margin-bottom: 1px;
        color: var(--ui-muted);
        font-size: .72rem;
        font-weight: 600;
    }

    .field-content .form-control[b-oauv0ve72h] {
        width: 100%;
        height: 27px;
        padding: 0;
        background: transparent !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        color: var(--ui-ink) !important;
        font-size: .93rem;
    }

        .field-content .form-control[b-oauv0ve72h]::placeholder {
            color: var(--ui-text) !important;
        }

        .field-content .form-control:-webkit-autofill[b-oauv0ve72h],
        .field-content .form-control:-webkit-autofill:hover[b-oauv0ve72h],
        .field-content .form-control:-webkit-autofill:focus[b-oauv0ve72h] {
            -webkit-text-fill-color: var(--ui-ink) !important;
            -webkit-box-shadow: 0 0 0 1000px #111 inset !important;
            transition: background-color 5000s ease-in-out 0s;
        }

/* Button */

.login-button[b-oauv0ve72h] {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    border: 1px solid var(--ui-brand);
    border-radius: 11px;
    background: var(--ui-brand);
    color: #fff;
    font-size: .94rem;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(var(--ui-brand-rgb), .16);
    transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

    .login-button:hover[b-oauv0ve72h] {
        background: var(--ui-brand);
        border-color: var(--ui-brand);
        box-shadow: 0 12px 30px rgba(var(--ui-brand-rgb), .24);
        transform: translateY(-1px);
    }

    .login-button:active[b-oauv0ve72h] {
        background: var(--ui-brand-600);
        border-color: var(--ui-brand-600);
        transform: translateY(0);
    }

.button-arrow[b-oauv0ve72h] {
    font-size: 1.1rem;
    transition: transform .18s ease;
}

.login-button:hover .button-arrow[b-oauv0ve72h] {
    transform: translateX(4px);
}

/* Divider */

.login-divider[b-oauv0ve72h] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 27px 0 18px;
}

    .login-divider span[b-oauv0ve72h] {
        flex: 1;
        height: 1px;
        background: var(--ui-surface-2);
    }

    .login-divider small[b-oauv0ve72h] {
        color: var(--ui-text);
        font-size: .73rem;
    }

/* Back to login */

.login-links[b-oauv0ve72h] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-link[b-oauv0ve72h] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--ui-text);
    text-decoration: none;
    font-size: .84rem;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

    .login-link:hover[b-oauv0ve72h] {
        background: var(--ui-surface-2);
        border-color: var(--ui-line);
        color: var(--ui-ink);
    }

.link-icon[b-oauv0ve72h] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--ui-surface-2);
    color: var(--ui-brand);
    font-size: .8rem;
}

.login-link:hover .link-icon[b-oauv0ve72h] {
    background: rgba(var(--ui-brand-rgb), .1);
}

.link-arrow[b-oauv0ve72h] {
    margin-left: auto;
    color: var(--ui-text);
    font-size: 1rem;
    transition: color .18s ease, transform .18s ease;
}

.login-link:hover .link-arrow[b-oauv0ve72h] {
    color: var(--ui-brand);
    transform: translateX(3px);
}

/* Footer */

.login-footer[b-oauv0ve72h] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--ui-subtle);
    font-size: .72rem;
}

    .login-footer span:nth-child(2)[b-oauv0ve72h] {
        color: var(--ui-brand);
    }

/* Responsive */

@media (max-width: 600px) {
    .login-page[b-oauv0ve72h] {
        align-items: flex-start;
        padding: 20px 14px;
    }

    .login-container[b-oauv0ve72h] {
        max-width: 100%;
    }

    .login-card[b-oauv0ve72h] {
        padding: 28px 20px;
        border-radius: 18px;
    }

    .login-header[b-oauv0ve72h] {
        margin-bottom: 25px;
    }

        .login-header h1[b-oauv0ve72h] {
            font-size: 1.75rem;
        }

    .login-logo[b-oauv0ve72h] {
        margin-bottom: 18px;
    }

    .logo-inner[b-oauv0ve72h] {
        width: 58px;
        height: 58px;
        border-radius: 15px;
    }

    .logo-icon[b-oauv0ve72h] {
        font-size: 26px;
    }

    .shape-left[b-oauv0ve72h],
    .shape-right[b-oauv0ve72h] {
        display: none;
    }

    .grid-lines[b-oauv0ve72h] {
        background-size: 50px 50px;
    }
}

@media (max-width: 380px) {
    .login-page[b-oauv0ve72h] {
        padding: 14px 10px;
    }

    .login-card[b-oauv0ve72h] {
        padding: 24px 16px;
    }

    .login-header h1[b-oauv0ve72h] {
        font-size: 1.6rem;
    }

    .login-field[b-oauv0ve72h] {
        min-height: 62px;
    }
}
/* /Components/Account/Pages/ResetPasswordConfirmation.razor.rz.scp.css */

/* =========================================================
   FORGOT PASSWORD - MyBauManagement
   Gleicher Stil wie Login
   ========================================================= */

.login-page[b-03w5kj4wec] {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: radial-gradient( circle at 50% 20%, rgba(var(--ui-brand-rgb), 0.08), transparent 35% ), var(--ui-bg);
    overflow: hidden;
}

.login-background[b-03w5kj4wec] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.login-container[b-03w5kj4wec] {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 470px;
}

.login-top[b-03w5kj4wec] {
    margin-bottom: 18px;
}

.brand-back[b-03w5kj4wec] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ui-text);
    text-decoration: none;
    font-size: .9rem;
    transition: color .2s ease;
}

    .brand-back:hover[b-03w5kj4wec] {
        color: var(--ui-ink);
    }

.back-arrow[b-03w5kj4wec] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    color: var(--ui-brand);
    transition: all .2s ease;
}

.brand-back:hover .back-arrow[b-03w5kj4wec] {
    background: var(--ui-brand);
    border-color: var(--ui-brand);
    color: #fff;
}

.brand-name[b-03w5kj4wec] {
    color: var(--ui-ink);
    font-weight: 700;
    letter-spacing: -.03em;
}

.brand-orange[b-03w5kj4wec] {
    color: var(--ui-brand);
}

/* Card */

.login-card[b-03w5kj4wec] {
    position: relative;
    background: rgba(255, 255, 255, .86);
    border: 1px solid var(--ui-line);
    border-radius: 22px;
    padding: 38px;
    box-shadow: 0 30px 80px rgba(16, 24, 40, 0.14), 0 0 0 1px rgba(var(--ui-ink-rgb), 0.015);
    backdrop-filter: blur(20px);
}

    .login-card[b-03w5kj4wec]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 12%;
        right: 12%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(var(--ui-brand-rgb), .8), transparent );
    }

/* Logo */

.login-logo[b-03w5kj4wec] {
    display: flex;
    justify-content: center;
    margin-bottom: 22px;
}

.logo-inner[b-03w5kj4wec] {
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(145deg, var(--ui-surface-2), var(--ui-surface));
    border: 1px solid rgba(var(--ui-brand-rgb), .45);
    box-shadow: 0 0 30px rgba(var(--ui-brand-rgb), .12), inset 0 0 20px rgba(var(--ui-brand-rgb), .04);
}

.logo-icon[b-03w5kj4wec] {
    color: var(--ui-brand);
    font-size: 30px;
}

/* Header */

.login-header[b-03w5kj4wec] {
    text-align: center;
    margin-bottom: 30px;
}

    .login-header h1[b-03w5kj4wec] {
        margin: 0;
        color: var(--ui-ink);
        font-size: 2rem;
        font-weight: 750;
        letter-spacing: -.045em;
        line-height: 1.15;
    }

        .login-header h1 span[b-03w5kj4wec] {
            display: block;
            color: var(--ui-brand);
        }

    .login-header p[b-03w5kj4wec] {
        margin: 10px auto 0;
        max-width: 340px;
        color: var(--ui-muted);
        font-size: .92rem;
        line-height: 1.6;
    }

/* Errors and validation */

.login-error[b-03w5kj4wec] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: rgba(220, 53, 69, .08);
    border: 1px solid rgba(220, 53, 69, .25);
    color: var(--ui-danger-700);
    font-size: .86rem;
}

.error-icon[b-03w5kj4wec] {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(220, 53, 69, .15);
    color: #ff7b87;
    font-size: .75rem;
    font-weight: 800;
}

.validation-summary[b-03w5kj4wec] {
    margin-bottom: 18px;
    padding: 10px 14px;
    border-radius: 9px;
    background: rgba(220, 53, 69, .07);
    border: 1px solid rgba(220, 53, 69, .2);
    color: var(--ui-danger-700);
    font-size: .85rem;
}

    .validation-summary:empty[b-03w5kj4wec] {
        display: none;
    }

.field-validation[b-03w5kj4wec] {
    display: block;
    margin: 0 0 14px 4px;
    color: #ff8d98 !important;
    font-size: .78rem;
}

/* Email field */

.login-field[b-03w5kj4wec] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 8px 14px;
    margin-bottom: 8px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

    .login-field:focus-within[b-03w5kj4wec] {
        background: var(--ui-surface);
        border-color: var(--ui-brand);
        box-shadow: 0 0 0 3px rgba(var(--ui-brand-rgb), .09);
    }

.field-icon[b-03w5kj4wec] {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(var(--ui-brand-rgb), .08);
    color: var(--ui-brand);
    font-size: 17px;
}

.field-content[b-03w5kj4wec] {
    min-width: 0;
    flex: 1;
}

    .field-content label[b-03w5kj4wec] {
        display: block;
        margin-bottom: 1px;
        color: var(--ui-muted);
        font-size: .72rem;
        font-weight: 600;
    }

    .field-content .form-control[b-03w5kj4wec] {
        width: 100%;
        height: 27px;
        padding: 0;
        background: transparent !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        color: var(--ui-ink) !important;
        font-size: .93rem;
    }

        .field-content .form-control[b-03w5kj4wec]::placeholder {
            color: var(--ui-text) !important;
        }

        .field-content .form-control:-webkit-autofill[b-03w5kj4wec],
        .field-content .form-control:-webkit-autofill:hover[b-03w5kj4wec],
        .field-content .form-control:-webkit-autofill:focus[b-03w5kj4wec] {
            -webkit-text-fill-color: var(--ui-ink) !important;
            -webkit-box-shadow: 0 0 0 1000px #111 inset !important;
            transition: background-color 5000s ease-in-out 0s;
        }

/* Button */

.login-button[b-03w5kj4wec] {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    border: 1px solid var(--ui-brand);
    border-radius: 11px;
    background: var(--ui-brand);
    color: #fff;
    font-size: .94rem;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(var(--ui-brand-rgb), .16);
    transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

    .login-button:hover[b-03w5kj4wec] {
        background: var(--ui-brand);
        border-color: var(--ui-brand);
        box-shadow: 0 12px 30px rgba(var(--ui-brand-rgb), .24);
        transform: translateY(-1px);
    }

    .login-button:active[b-03w5kj4wec] {
        background: var(--ui-brand-600);
        border-color: var(--ui-brand-600);
        transform: translateY(0);
    }

.button-arrow[b-03w5kj4wec] {
    font-size: 1.1rem;
    transition: transform .18s ease;
}

.login-button:hover .button-arrow[b-03w5kj4wec] {
    transform: translateX(4px);
}

/* Divider */

.login-divider[b-03w5kj4wec] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 27px 0 18px;
}

    .login-divider span[b-03w5kj4wec] {
        flex: 1;
        height: 1px;
        background: var(--ui-surface-2);
    }

    .login-divider small[b-03w5kj4wec] {
        color: var(--ui-text);
        font-size: .73rem;
    }

/* Back to login */

.login-links[b-03w5kj4wec] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-link[b-03w5kj4wec] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--ui-text);
    text-decoration: none;
    font-size: .84rem;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

    .login-link:hover[b-03w5kj4wec] {
        background: var(--ui-surface-2);
        border-color: var(--ui-line);
        color: var(--ui-ink);
    }

.link-icon[b-03w5kj4wec] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--ui-surface-2);
    color: var(--ui-brand);
    font-size: .8rem;
}

.login-link:hover .link-icon[b-03w5kj4wec] {
    background: rgba(var(--ui-brand-rgb), .1);
}

.link-arrow[b-03w5kj4wec] {
    margin-left: auto;
    color: var(--ui-text);
    font-size: 1rem;
    transition: color .18s ease, transform .18s ease;
}

.login-link:hover .link-arrow[b-03w5kj4wec] {
    color: var(--ui-brand);
    transform: translateX(3px);
}

/* Footer */

.login-footer[b-03w5kj4wec] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--ui-subtle);
    font-size: .72rem;
}

    .login-footer span:nth-child(2)[b-03w5kj4wec] {
        color: var(--ui-brand);
    }

/* Responsive */

@media (max-width: 600px) {
    .login-page[b-03w5kj4wec] {
        align-items: flex-start;
        padding: 20px 14px;
    }

    .login-container[b-03w5kj4wec] {
        max-width: 100%;
    }

    .login-card[b-03w5kj4wec] {
        padding: 28px 20px;
        border-radius: 18px;
    }

    .login-header[b-03w5kj4wec] {
        margin-bottom: 25px;
    }

        .login-header h1[b-03w5kj4wec] {
            font-size: 1.75rem;
        }

    .login-logo[b-03w5kj4wec] {
        margin-bottom: 18px;
    }

    .logo-inner[b-03w5kj4wec] {
        width: 58px;
        height: 58px;
        border-radius: 15px;
    }

    .logo-icon[b-03w5kj4wec] {
        font-size: 26px;
    }

    .shape-left[b-03w5kj4wec],
    .shape-right[b-03w5kj4wec] {
        display: none;
    }

    .grid-lines[b-03w5kj4wec] {
        background-size: 50px 50px;
    }
}

@media (max-width: 380px) {
    .login-page[b-03w5kj4wec] {
        padding: 14px 10px;
    }

    .login-card[b-03w5kj4wec] {
        padding: 24px 16px;
    }

    .login-header h1[b-03w5kj4wec] {
        font-size: 1.6rem;
    }

    .login-field[b-03w5kj4wec] {
        min-height: 62px;
    }
}
/* /Components/Account/Pages/Stripe/Success.razor.rz.scp.css */
.stripe-result-page[b-t9kyufr1i0] {
    min-height: 100vh;
    background: radial-gradient( circle at 50% 20%, rgba(var(--ui-brand-rgb), .10), transparent 35% ), var(--ui-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    color: var(--ui-ink);
}

.stripe-result-card[b-t9kyufr1i0] {
    width: 100%;
    max-width: 560px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    padding: 50px 40px;
    text-align: center;
    box-shadow: 0 25px 70px rgba(16, 24, 40, 0.14), 0 0 60px rgba(var(--ui-brand-rgb), .05);
}

.stripe-result-icon[b-t9kyufr1i0] {
    width: 76px;
    height: 76px;
    margin: 0 auto 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

    .stripe-result-icon.success[b-t9kyufr1i0] {
        background: rgba(34, 197, 94, .12);
        border: 1px solid rgba(34, 197, 94, .35);
        color: #4ade80;
    }

    .stripe-result-icon.cancel[b-t9kyufr1i0] {
        background: rgba(var(--ui-brand-rgb), .10);
        border: 1px solid rgba(var(--ui-brand-rgb), .30);
        color: var(--ui-brand);
    }

.stripe-result-card h1[b-t9kyufr1i0] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.stripe-result-text[b-t9kyufr1i0] {
    color: var(--ui-text);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 30px;
}

.stripe-trial-box[b-t9kyufr1i0],
.stripe-cancel-box[b-t9kyufr1i0] {
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    margin-bottom: 28px;
}

.stripe-trial-box[b-t9kyufr1i0] {
    padding: 5px 18px;
}

.stripe-trial-row[b-t9kyufr1i0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--ui-line);
}

    .stripe-trial-row:last-child[b-t9kyufr1i0] {
        border-bottom: 0;
    }

    .stripe-trial-row span[b-t9kyufr1i0] {
        color: var(--ui-muted);
    }

    .stripe-trial-row strong[b-t9kyufr1i0] {
        color: var(--ui-ink);
    }

.stripe-cancel-box[b-t9kyufr1i0] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 16px;
    color: var(--ui-text);
}

    .stripe-cancel-box i[b-t9kyufr1i0] {
        color: var(--ui-brand);
        font-size: 1.2rem;
    }

.stripe-result-button[b-t9kyufr1i0] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--ui-brand);
    border: 1px solid var(--ui-brand);
    color: #fff;
    border-radius: 10px;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    transition: all .2s ease;
}

    .stripe-result-button:hover[b-t9kyufr1i0] {
        background: var(--ui-brand-600);
        border-color: var(--ui-brand-600);
        transform: translateY(-1px);
    }

.stripe-result-note[b-t9kyufr1i0] {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ui-muted);
    font-size: .78rem;
}

    .stripe-result-note i[b-t9kyufr1i0] {
        color: var(--ui-brand);
    }

@media (max-width: 576px) {

    .stripe-result-card[b-t9kyufr1i0] {
        padding: 35px 22px;
        border-radius: 16px;
    }

        .stripe-result-card h1[b-t9kyufr1i0] {
            font-size: 1.6rem;
        }

    .stripe-trial-row[b-t9kyufr1i0] {
        font-size: .9rem;
    }
}
/* /Components/Arbeitszeiten.razor.rz.scp.css */
/*
   Assignments.razor.css
   Light design-system styles (tokens in wwwroot/app.css)
*/

:host[b-jglo7xsgrl] {
    display: block;
    color: var(--as-ink);
}

    /* Page foundation */
    :host > div[b-jglo7xsgrl] {
        max-width: 1440px;
        margin-inline: auto;
    }

.employee-header[b-jglo7xsgrl] {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 2.25rem;
    margin-bottom: 1.5rem !important;
    overflow: hidden;
    color: var(--ui-ink);
    background: radial-gradient(120% 140% at 100% 0%, rgba(var(--ui-brand-rgb), .16) 0%, rgba(var(--ui-brand-rgb), .05) 32%, transparent 58%), radial-gradient(90% 120% at 0% 100%, rgba(99, 102, 241, .06), transparent 55%), var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    box-shadow: var(--ui-shadow);
}

    .employee-header[b-jglo7xsgrl]::after {
        position: absolute;
        right: -55px;
        bottom: -90px;
        width: 220px;
        height: 220px;
        content: "";
        border: 38px solid rgba(var(--ui-brand-rgb), .07);
        border-radius: 50%;
    }

    .employee-header > div[b-jglo7xsgrl],
    .employee-header > button[b-jglo7xsgrl] {
        position: relative;
        z-index: 1;
    }

    .employee-header h3[b-jglo7xsgrl] {
        margin: 0 0 .45rem;
        font-size: clamp(1.65rem, 2.4vw, 2.2rem);
        font-weight: 800;
        letter-spacing: -.04em;
    }

    .employee-header p[b-jglo7xsgrl] {
        color: var(--ui-muted) !important;
        font-size: .95rem;
    }

/* Cards */
.modern-card[b-jglo7xsgrl] {
    overflow: visible;
    background: var(--as-surface);
    border: 1px solid var(--as-line) !important;
    border-radius: var(--as-radius) !important;
    box-shadow: var(--as-shadow);
}

    .modern-card.overflow-hidden[b-jglo7xsgrl] {
        overflow: hidden;
    }

    .modern-card .card-body[b-jglo7xsgrl] {
        background: transparent;
    }

/* Buttons */
.btn[b-jglo7xsgrl] {
    min-height: 42px;
    padding: .65rem 1rem;
    border-radius: 10px;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .01em;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

    .btn:hover:not(:disabled)[b-jglo7xsgrl] {
        transform: translateY(-2px);
    }

    .btn:active:not(:disabled)[b-jglo7xsgrl] {
        transform: translateY(0);
    }

.btn-primary[b-jglo7xsgrl] {
    color: #fff !important;
    background: var(--as-orange) !important;
    border-color: var(--as-orange) !important;
    box-shadow: 0 8px 18px rgba(var(--ui-brand-rgb), .22);
}

    .btn-primary:hover:not(:disabled)[b-jglo7xsgrl],
    .btn-primary:focus-visible[b-jglo7xsgrl] {
        background: var(--as-orange-dark) !important;
        border-color: var(--as-orange-dark) !important;
        box-shadow: 0 10px 24px rgba(var(--ui-brand-rgb), .28);
    }

/* Hard override for themes that redefine Bootstrap .btn-primary */
button.btn.btn-primary[b-jglo7xsgrl],
a.btn.btn-primary[b-jglo7xsgrl] {
    color: #fff !important;
    background-color: var(--ui-brand) !important;
    background-image: none !important;
    border-color: var(--ui-brand) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}

    button.btn.btn-primary:hover:not(:disabled)[b-jglo7xsgrl],
    button.btn.btn-primary:focus-visible[b-jglo7xsgrl],
    a.btn.btn-primary:hover[b-jglo7xsgrl],
    a.btn.btn-primary:focus-visible[b-jglo7xsgrl] {
        color: #fff !important;
        background-color: var(--ui-brand-600) !important;
        border-color: var(--ui-brand-600) !important;
    }

.btn-secondary[b-jglo7xsgrl] {
    color: var(--as-ink) !important;
    background: var(--ui-surface-3) !important;
    border-color: var(--ui-surface-3) !important;
}

    .btn-secondary:hover:not(:disabled)[b-jglo7xsgrl] {
        background: var(--ui-line) !important;
        border-color: var(--ui-line) !important;
    }

.btn-outline-danger[b-jglo7xsgrl] {
    color: var(--as-danger) !important;
    border-color: #fecdca !important;
    background: #fff !important;
}

    .btn-outline-danger:hover:not(:disabled)[b-jglo7xsgrl] {
        color: #fff !important;
        background: var(--as-danger) !important;
        border-color: var(--as-danger) !important;
    }

.btn-sm[b-jglo7xsgrl] {
    min-height: 34px;
    padding: .42rem .72rem;
    border-radius: 8px;
    font-size: .76rem;
}

.btn:disabled[b-jglo7xsgrl] {
    cursor: not-allowed;
    opacity: .45;
    box-shadow: none;
}

/* Search */
.search-box[b-jglo7xsgrl] {
    overflow: hidden;
    border: 1px solid var(--as-line);
    border-radius: 12px;
    background: var(--ui-surface-2);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .search-box:focus-within[b-jglo7xsgrl] {
        background: #fff;
        border-color: var(--as-orange);
        box-shadow: 0 0 0 4px rgba(var(--ui-brand-rgb), .12);
    }

    .search-box .input-group-text[b-jglo7xsgrl] {
        padding-inline: 1rem;
        color: var(--as-orange);
        background: transparent;
        border: 0;
        font-size: 1.35rem;
    }

    .search-box .form-control[b-jglo7xsgrl] {
        border: 0;
        background: transparent;
        box-shadow: none;
    }

/* Forms */
.form-label[b-jglo7xsgrl] {
    display: block;
    margin-bottom: .5rem;
    color: var(--as-ink);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.form-control[b-jglo7xsgrl] {
    min-height: 46px;
    padding: .7rem .85rem;
    color: var(--as-ink);
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    font-size: .9rem;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .form-control[b-jglo7xsgrl]::placeholder {
        color: var(--ui-subtle);
    }

    .form-control:focus[b-jglo7xsgrl] {
        color: var(--as-ink);
        background: #fff;
        border-color: var(--as-orange);
        box-shadow: 0 0 0 4px rgba(var(--ui-brand-rgb), .12);
    }

textarea.form-control[b-jglo7xsgrl] {
    min-height: 104px;
    resize: vertical;
}

/* Live search dropdowns */
.live-search-wrapper[b-jglo7xsgrl] {
    position: relative;
}

.live-search-results[b-jglo7xsgrl] {
    position: absolute;
    z-index: 20;
    top: calc(100% + .5rem);
    right: 0;
    left: 0;
    overflow: hidden;
    padding: .4rem;
    background: #fff;
    border: 1px solid var(--as-line);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(16, 24, 40, .16);
}

.live-search-result[b-jglo7xsgrl] {
    display: flex;
    align-items: center;
    width: 100%;
    gap: .75rem;
    padding: .7rem .75rem;
    color: var(--as-ink);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 9px;
    transition: background .15s ease;
}

    .live-search-result:hover[b-jglo7xsgrl],
    .live-search-result:focus-visible[b-jglo7xsgrl] {
        background: var(--as-orange-soft);
        outline: none;
    }

.live-search-avatar[b-jglo7xsgrl],
.employee-avatar[b-jglo7xsgrl] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #fff;
    background: var(--as-dark);
    border-radius: 12px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .03em;
}

    .live-search-avatar.site-avatar[b-jglo7xsgrl] {
        color: var(--as-dark);
        background: var(--as-orange-soft);
        border: 1px solid var(--ui-brand-200);
    }

.live-search-content[b-jglo7xsgrl] {
    min-width: 0;
}

.live-search-title[b-jglo7xsgrl] {
    overflow: hidden;
    font-size: .88rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-search-subtitle[b-jglo7xsgrl] {
    margin-top: .18rem;
    color: var(--as-muted);
    font-size: .75rem;
}

.live-search-empty[b-jglo7xsgrl] {
    padding: 1rem;
    color: var(--as-muted);
    font-size: .82rem;
    text-align: center;
}

.selected-info[b-jglo7xsgrl] {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .65rem;
    padding: .55rem .7rem;
    color: var(--as-dark);
    background: var(--as-orange-soft);
    border: 1px solid var(--ui-brand-200);
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 700;
}

.selected-check[b-jglo7xsgrl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    color: #fff;
    background: var(--as-orange);
    border-radius: 50%;
    font-size: .72rem;
}

.selected-remove[b-jglo7xsgrl] {
    width: 26px;
    height: 26px;
    margin-left: auto;
    color: var(--as-orange-dark);
    background: transparent;
    border: 0;
    border-radius: 50%;
    font-size: 1.15rem;
    line-height: 1;
}

    .selected-remove:hover[b-jglo7xsgrl] {
        background: rgba(var(--ui-brand-rgb), .14);
    }

/* Alerts */
.alert[b-jglo7xsgrl] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border: 0;
    border-left: 4px solid var(--as-orange);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(16, 24, 40, .06);
}

.alert-warning[b-jglo7xsgrl] {
    color: var(--ui-warning-700);
    background: var(--ui-warning-50);
}

.alert-danger[b-jglo7xsgrl] {
    color: var(--ui-danger-700);
    background: var(--ui-danger-50);
    border-left-color: var(--as-danger);
}

.alert-success[b-jglo7xsgrl] {
    color: var(--ui-success-700);
    background: var(--ui-success-50);
    border-left-color: var(--ui-success);
}

/* Table */
.table-modern[b-jglo7xsgrl] {
    margin: 0;
    --bs-table-bg: transparent;
}

    .table-modern thead th[b-jglo7xsgrl] {
        padding: 1rem 1.25rem;
        color: var(--ui-muted);
        background: var(--ui-surface-2);
        border-bottom: 1px solid var(--as-line);
        font-size: .7rem;
        font-weight: 850;
        letter-spacing: .09em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .table-modern tbody td[b-jglo7xsgrl] {
        padding: 1.1rem 1.25rem;
        color: var(--as-ink);
        border-bottom: 1px solid var(--ui-surface-3);
        font-size: .87rem;
        vertical-align: middle;
    }

    .table-modern tbody tr[b-jglo7xsgrl] {
        transition: background .18s ease;
    }

        .table-modern tbody tr:hover[b-jglo7xsgrl] {
            background: var(--ui-brand-50);
        }

        .table-modern tbody tr:last-child td[b-jglo7xsgrl] {
            border-bottom: 0;
        }

.assignment-date[b-jglo7xsgrl] {
    color: var(--as-ink);
    font-weight: 800;
    white-space: nowrap;
}

.assignment-time[b-jglo7xsgrl] {
    margin-top: .3rem;
    color: var(--as-orange-dark);
    font-size: .75rem;
    font-weight: 750;
    white-space: nowrap;
}

.employee-avatar[b-jglo7xsgrl] {
    width: 42px;
    height: 42px;
    color: #fff !important;
    background: linear-gradient(145deg, var(--ui-brand-400), var(--ui-brand-600)) !important;
    background-image: linear-gradient(145deg, var(--ui-brand-400), var(--ui-brand-600)) !important;
    border: 2px solid #fff;
    box-shadow: 0 6px 13px rgba(var(--ui-brand-rgb), .18);
}

.table-modern .fw-semibold[b-jglo7xsgrl] {
    font-weight: 750 !important;
}

.table-modern small[b-jglo7xsgrl] {
    display: inline-block;
    margin-top: .22rem;
    font-size: .74rem;
}

/* Empty state and pagination */
.empty-state[b-jglo7xsgrl] {
    padding: 1.75rem 1rem;
}

.empty-state-icon[b-jglo7xsgrl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: .9rem;
    color: var(--as-orange);
    background: var(--as-orange-soft);
    border-radius: 18px;
    font-size: 1.7rem;
}

.empty-state h6[b-jglo7xsgrl] {
    margin-bottom: .3rem;
    font-weight: 800;
}

.pagination-container[b-jglo7xsgrl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--ui-surface-2);
    border-top: 1px solid var(--as-line);
}

    .pagination-container .btn[b-jglo7xsgrl] {
        min-width: 35px;
    }

/* Bootstrap utility refinement inside this component */
.text-muted[b-jglo7xsgrl] {
    color: var(--as-muted) !important;
}

/* Keyboard accessibility */
button:focus-visible[b-jglo7xsgrl],
a:focus-visible[b-jglo7xsgrl],
input:focus-visible[b-jglo7xsgrl],
textarea:focus-visible[b-jglo7xsgrl] {
    outline: 3px solid rgba(var(--ui-brand-rgb), .28);
    outline-offset: 2px;
}

/* Responsive layout */
@media (max-width: 991.98px) {
    .employee-header[b-jglo7xsgrl] {
        padding: 1.6rem;
    }

    .table-modern thead th[b-jglo7xsgrl],
    .table-modern tbody td[b-jglo7xsgrl] {
        padding-inline: .9rem;
    }
}

@media (max-width: 767.98px) {
    .employee-header[b-jglo7xsgrl] {
        align-items: flex-start;
        flex-direction: column;
        padding: 1.35rem;
    }

        .employee-header .btn[b-jglo7xsgrl] {
            width: 100%;
        }

    .modern-card .card-body[b-jglo7xsgrl] {
        padding: 1rem !important;
    }

    .pagination-container[b-jglo7xsgrl] {
        align-items: flex-start;
        flex-direction: column;
    }

        .pagination-container > div:last-child[b-jglo7xsgrl] {
            width: 100%;
            justify-content: flex-end;
        }

    .table-modern[b-jglo7xsgrl] {
        min-width: 900px;
    }
}

@media (max-width: 479.98px) {
    .employee-header h3[b-jglo7xsgrl] {
        font-size: 1.5rem;
    }

    .d-flex.gap-2.mt-4[b-jglo7xsgrl] {
        flex-direction: column;
    }

        .d-flex.gap-2.mt-4 .btn[b-jglo7xsgrl] {
            width: 100%;
        }
}

@media (prefers-reduced-motion: reduce) {
    *[b-jglo7xsgrl],
    *[b-jglo7xsgrl]::before,
    *[b-jglo7xsgrl]::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* =========================================================
   ARBEITSZEITEN PAGE
   ========================================================= */

.working-times-page[b-jglo7xsgrl] {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    color: var(--as-ink);
    border-radius: 20px;
    box-sizing: border-box;
}

.working-times-header[b-jglo7xsgrl] {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 2rem 2.25rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
    color: var(--ui-ink);
    background: radial-gradient(120% 140% at 100% 0%, rgba(var(--ui-brand-rgb), .16) 0%, rgba(var(--ui-brand-rgb), .05) 32%, transparent 58%), radial-gradient(90% 120% at 0% 100%, rgba(99, 102, 241, .06), transparent 55%), var(--ui-surface);
    border-radius: 20px;
    box-shadow: var(--ui-shadow);
    border: 1px solid var(--ui-line);
}

    .working-times-header[b-jglo7xsgrl]::after {
        position: absolute;
        right: -55px;
        bottom: -95px;
        width: 225px;
        height: 225px;
        content: "";
        border: 38px solid rgba(var(--ui-brand-rgb), .07);
        border-radius: 50%;
    }

    .working-times-header > *[b-jglo7xsgrl] {
        position: relative;
        z-index: 1;
    }

    .working-times-header h3[b-jglo7xsgrl] {
        margin: 0 0 .45rem;
        font-size: clamp(1.65rem, 2.4vw, 2.2rem);
        font-weight: 800;
        letter-spacing: -.04em;
    }

    .working-times-header p[b-jglo7xsgrl] {
        margin: 0;
        color: var(--ui-muted);
        font-size: .95rem;
    }

.export-button[b-jglo7xsgrl],
.today-button[b-jglo7xsgrl],
.details-button[b-jglo7xsgrl],
.month-button[b-jglo7xsgrl],
.icon-details-button[b-jglo7xsgrl],
.daily-page-button[b-jglo7xsgrl] {
    cursor: pointer;
    border: 0;
    font-weight: 750;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.export-button[b-jglo7xsgrl] {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 42px;
    padding: .65rem 1rem;
    color: #fff;
    background: var(--as-orange);
    border: 1px solid var(--as-orange);
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(var(--ui-brand-rgb), .22);
}

    .export-button:hover[b-jglo7xsgrl] {
        background: var(--as-orange-dark);
        border-color: var(--as-orange-dark);
        transform: translateY(-2px);
    }

.working-times-filter-card[b-jglo7xsgrl] {
    display: flex;
    align-items: flex-end;
    gap: 1.25rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: #fff;
    border: 1px solid var(--as-line);
    border-radius: var(--as-radius);
    box-shadow: var(--as-shadow);
}

.filter-group[b-jglo7xsgrl] {
    display: grid;
    gap: .4rem;
}

    .filter-group label[b-jglo7xsgrl] {
        color: var(--as-muted);
        font-size: .7rem;
        font-weight: 850;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

.month-selector[b-jglo7xsgrl] {
    display: flex;
    align-items: center;
    overflow: hidden;
    min-height: 42px;
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-line);
    border-radius: 10px;
}

.month-button[b-jglo7xsgrl] {
    width: 40px;
    height: 40px;
    color: var(--as-ink);
    background: var(--ui-surface-3);
}

    .month-button:hover[b-jglo7xsgrl] {
        color: #fff;
        background: var(--as-orange);
    }

.month-value[b-jglo7xsgrl] {
    min-width: 150px;
    padding-inline: .9rem;
    color: var(--as-ink);
    font-size: .86rem;
    font-weight: 800;
    text-align: center;
}

.search-group[b-jglo7xsgrl] {
    flex: 1;
    max-width: 430px;
}

.search-input-wrapper[b-jglo7xsgrl],
.daily-search-wrapper[b-jglo7xsgrl] {
    position: relative;
}

    .search-input-wrapper > i[b-jglo7xsgrl],
    .daily-search-wrapper > i[b-jglo7xsgrl] {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: .85rem;
        color: var(--as-orange);
        transform: translateY(-50%);
    }

    .search-input-wrapper .form-control[b-jglo7xsgrl],
    .daily-search-wrapper .form-control[b-jglo7xsgrl] {
        padding-left: 2.35rem;
    }

.today-button[b-jglo7xsgrl] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 42px;
    padding: .65rem 1rem;
    color: var(--as-orange-dark);
    background: #fff;
    border: 1px solid var(--ui-brand-200);
    border-radius: 10px;
}

    .today-button:hover[b-jglo7xsgrl] {
        color: #fff;
        background: var(--as-orange);
        border-color: var(--as-orange);
        transform: translateY(-2px);
    }

.working-times-summary-grid[b-jglo7xsgrl] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.summary-card[b-jglo7xsgrl] {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1.15rem;
    background: #fff;
    border: 1px solid var(--as-line);
    border-radius: 15px;
    box-shadow: var(--as-shadow);
}

    .summary-card > div:last-child[b-jglo7xsgrl] {
        min-width: 0;
    }

    .summary-card span[b-jglo7xsgrl] {
        display: block;
        color: var(--as-muted);
        font-size: .72rem;
        font-weight: 750;
    }

    .summary-card strong[b-jglo7xsgrl] {
        display: block;
        margin-top: .25rem;
        color: var(--as-ink);
        font-size: 1.25rem;
        font-weight: 850;
    }

.summary-icon[b-jglo7xsgrl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    font-size: 1.1rem;
}

    .summary-icon.orange[b-jglo7xsgrl] {
        color: var(--as-orange-dark);
        background: var(--as-orange-soft);
    }

    .summary-icon.gray[b-jglo7xsgrl] {
        color: #616871;
        background: #eef0f2;
    }

    .summary-icon.blue[b-jglo7xsgrl] {
        color: #286b9c;
        background: #e8f3fb;
    }

    .summary-icon.green[b-jglo7xsgrl] {
        color: #217b50;
        background: #e8f7ef;
    }

.section-header[b-jglo7xsgrl] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 1.8rem 0 .8rem;
}

    .section-header h2[b-jglo7xsgrl] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 850;
    }

    .section-header span[b-jglo7xsgrl] {
        display: block;
        margin-top: .25rem;
        color: var(--as-muted);
        font-size: .8rem;
    }

.employee-summary-card[b-jglo7xsgrl] {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--as-line);
    border-radius: var(--as-radius);
    box-shadow: var(--as-shadow);
}

.working-times-table[b-jglo7xsgrl] {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

    .working-times-table th[b-jglo7xsgrl] {
        padding: 1rem 1.15rem;
        color: var(--ui-muted);
        background: var(--ui-surface-2);
        border-bottom: 1px solid var(--as-line);
        font-size: .69rem;
        font-weight: 850;
        letter-spacing: .08em;
        text-align: left;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .working-times-table td[b-jglo7xsgrl] {
        padding: 1rem 1.15rem;
        border-bottom: 1px solid var(--ui-surface-3);
        font-size: .84rem;
        vertical-align: middle;
    }

    .working-times-table tbody tr[b-jglo7xsgrl] {
        transition: background .18s ease;
    }

        .working-times-table tbody tr:hover[b-jglo7xsgrl] {
            background: var(--ui-brand-50);
        }

        .working-times-table tbody tr:last-child td[b-jglo7xsgrl] {
            border-bottom: 0;
        }

.employee-cell[b-jglo7xsgrl] {
    display: flex;
    align-items: center;
    gap: .7rem;
}

    .employee-cell > div:last-child[b-jglo7xsgrl] {
        min-width: 0;
    }

    .employee-cell strong[b-jglo7xsgrl] {
        display: block;
        font-weight: 800;
    }

    .employee-cell span[b-jglo7xsgrl] {
        display: block;
        margin-top: .2rem;
        color: var(--as-muted);
        font-size: .72rem;
    }

.employee-avatar[b-jglo7xsgrl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    color: #fff !important;
    background: linear-gradient(145deg, var(--ui-brand-400), var(--ui-brand-600)) !important;
    border: 2px solid #fff;
    border-radius: 12px;
    box-shadow: 0 6px 13px rgba(var(--ui-brand-rgb), .2);
    font-size: .7rem;
    font-weight: 850;
}

    .employee-avatar.small[b-jglo7xsgrl] {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: .62rem;
    }

.days-value[b-jglo7xsgrl],
.work-time-value[b-jglo7xsgrl],
.break-value[b-jglo7xsgrl],
.average-value[b-jglo7xsgrl] {
    font-weight: 800;
}

.work-time-value[b-jglo7xsgrl] {
    color: var(--as-orange-dark);
}

.break-value[b-jglo7xsgrl],
.average-value[b-jglo7xsgrl] {
    color: #5e6670;
}

.details-button[b-jglo7xsgrl],
.icon-details-button[b-jglo7xsgrl] {
    color: var(--as-orange-dark);
    background: #fff;
    border: 1px solid var(--ui-brand-200);
    border-radius: 8px;
}

.details-button[b-jglo7xsgrl] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 34px;
    padding: .45rem .7rem;
    font-size: .75rem;
}

.icon-details-button[b-jglo7xsgrl] {
    width: 34px;
    height: 34px;
}

    .details-button:hover[b-jglo7xsgrl],
    .icon-details-button:hover[b-jglo7xsgrl] {
        background: var(--as-orange);
        border-color: var(--as-orange);
        transform: translateY(-2px);
    }

.site-cell[b-jglo7xsgrl] {
    display: flex;
    align-items: center;
    gap: .45rem;
}

    .site-cell i[b-jglo7xsgrl] {
        color: var(--as-orange);
    }

.date-cell strong[b-jglo7xsgrl],
.date-cell span[b-jglo7xsgrl] {
    display: block;
}

.date-cell span[b-jglo7xsgrl] {
    margin-top: .2rem;
    color: var(--as-muted);
    font-size: .7rem;
}

.muted-value[b-jglo7xsgrl] {
    color: var(--ui-subtle);
}

.daily-search-card[b-jglo7xsgrl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    margin-bottom: .8rem;
    background: #fff;
    border: 1px solid var(--as-line);
    border-radius: 12px;
}

.daily-search-wrapper[b-jglo7xsgrl] {
    flex: 1;
    max-width: 480px;
}

.daily-search-clear[b-jglo7xsgrl] {
    position: absolute;
    top: 50%;
    right: .7rem;
    width: 28px;
    height: 28px;
    color: var(--as-muted);
    background: transparent;
    border: 0;
    transform: translateY(-50%);
}

.daily-search-info[b-jglo7xsgrl],
.daily-pagination-info[b-jglo7xsgrl] {
    color: var(--as-muted);
    font-size: .76rem;
    font-weight: 700;
}

.daily-pagination[b-jglo7xsgrl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background: var(--ui-surface-2);
    border-top: 1px solid var(--as-line);
}

.daily-pagination-buttons[b-jglo7xsgrl] {
    display: flex;
    gap: .3rem;
}

.daily-page-button[b-jglo7xsgrl] {
    min-width: 34px;
    height: 34px;
    color: var(--as-ink);
    background: var(--ui-surface-3);
    border: 1px solid var(--ui-line);
    border-radius: 8px;
}

    .daily-page-button.active[b-jglo7xsgrl],
    .daily-page-button:hover:not(:disabled)[b-jglo7xsgrl] {
        color: #fff;
        background: var(--as-orange);
        border-color: var(--as-orange);
    }

    .daily-page-button:disabled[b-jglo7xsgrl] {
        cursor: not-allowed;
        opacity: .45;
    }

.empty-state[b-jglo7xsgrl] {
    display: grid;
    justify-items: center;
    gap: .35rem;
    padding: 2rem 1rem;
    color: var(--as-muted);
}

    .empty-state strong[b-jglo7xsgrl] {
        color: var(--as-ink);
    }

.empty-icon[b-jglo7xsgrl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: .45rem;
    color: var(--as-orange);
    background: var(--as-orange-soft);
    border-radius: 16px;
    font-size: 1.25rem;
}

.working-times-loading[b-jglo7xsgrl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: 230px;
    color: var(--as-muted);
}

.working-times-spinner[b-jglo7xsgrl] {
    width: 24px;
    height: 24px;
    border: 3px solid var(--ui-brand-200);
    border-top-color: var(--as-orange);
    border-radius: 50%;
    animation: wt-spin-b-jglo7xsgrl .8s linear infinite;
}

@keyframes wt-spin-b-jglo7xsgrl {
    to {
        transform: rotate(360deg);
    }
}

/* Details modals */
.modal-backdrop-custom[b-jglo7xsgrl] {
    position: fixed;
    z-index: 1050;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(13, 18, 28, .4);
    backdrop-filter: blur(5px);
}

.working-times-modal[b-jglo7xsgrl],
.entry-modal[b-jglo7xsgrl] {
    width: min(100%, 850px);
    max-height: 90vh;
    overflow: auto;
    background: #fff;
    border-radius: var(--as-radius);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
}

.entry-modal[b-jglo7xsgrl] {
    width: min(100%, 620px);
}

.modal-header-custom[b-jglo7xsgrl] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.3rem 1.45rem;
    color: var(--ui-ink);
    background: var(--ui-surface-2);
    border-bottom: 1px solid var(--ui-line);
}

    .modal-header-custom h3[b-jglo7xsgrl] {
        margin: .25rem 0 0;
        color: var(--ui-ink);
        font-size: 1.25rem;
        font-weight: 800;
    }

.modal-eyebrow[b-jglo7xsgrl] {
    color: var(--ui-brand-600);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .12em;
}

.modal-close-button[b-jglo7xsgrl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: rgba(255, 255, 255, .75);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 8px;
}

    .modal-close-button:hover[b-jglo7xsgrl] {
        color: #fff;
        background: var(--as-orange);
    }

.modal-date[b-jglo7xsgrl] {
    display: block;
    margin-top: .35rem;
    color: rgba(255, 255, 255, .62);
    font-size: .78rem;
}

.modal-summary[b-jglo7xsgrl],
.entry-detail-grid[b-jglo7xsgrl] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    padding: 1.25rem 1.45rem;
}

.modal-summary-item[b-jglo7xsgrl],
.entry-detail-box[b-jglo7xsgrl] {
    padding: .85rem;
    background: var(--ui-surface-2);
    border: 1px solid var(--as-line);
    border-radius: 10px;
}

    .modal-summary-item span[b-jglo7xsgrl],
    .entry-detail-box span[b-jglo7xsgrl] {
        display: block;
        color: var(--as-muted);
        font-size: .68rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .modal-summary-item strong[b-jglo7xsgrl],
    .entry-detail-box strong[b-jglo7xsgrl] {
        display: block;
        margin-top: .25rem;
        color: var(--as-orange-dark);
        font-size: 1rem;
    }

.entry-detail-grid[b-jglo7xsgrl] {
    grid-template-columns: repeat(4, 1fr);
}

.entry-detail-box.highlight[b-jglo7xsgrl] {
    background: var(--as-orange-soft);
    border-color: #ffd0b1;
}

.modal-table-wrapper[b-jglo7xsgrl] {
    overflow-x: auto;
    padding: 0 1.45rem 1.45rem;
}

.modal-table[b-jglo7xsgrl] {
    width: 100%;
    border-collapse: collapse;
}

    .modal-table th[b-jglo7xsgrl] {
        color: var(--as-muted);
        font-size: .68rem;
        letter-spacing: .06em;
        text-align: left;
        text-transform: uppercase;
    }

    .modal-table th[b-jglo7xsgrl],
    .modal-table td[b-jglo7xsgrl] {
        padding: .7rem;
        border-bottom: 1px solid var(--as-line);
        white-space: nowrap;
    }

.entry-detail-site[b-jglo7xsgrl] {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0 1.45rem 1.45rem;
    padding: .85rem 1rem;
    color: var(--as-orange-dark);
    background: var(--as-orange-soft);
    border: 1px solid #ffd0b1;
    border-radius: 10px;
}

@media (max-width: 1000px) {
    .working-times-summary-grid[b-jglo7xsgrl] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .working-times-header[b-jglo7xsgrl] {
        align-items: flex-start;
        flex-direction: column;
        padding: 1.35rem;
    }

    .working-times-header-actions[b-jglo7xsgrl],
    .export-button[b-jglo7xsgrl] {
        width: 100%;
    }

    .export-button[b-jglo7xsgrl] {
        justify-content: center;
    }

    .working-times-filter-card[b-jglo7xsgrl] {
        align-items: stretch;
        flex-direction: column;
    }

    .search-group[b-jglo7xsgrl] {
        max-width: none;
    }

    .today-button[b-jglo7xsgrl] {
        justify-content: center;
    }

    .working-times-summary-grid[b-jglo7xsgrl] {
        grid-template-columns: 1fr;
    }

    .daily-search-card[b-jglo7xsgrl] {
        align-items: stretch;
        flex-direction: column;
    }

    .daily-search-wrapper[b-jglo7xsgrl] {
        max-width: none;
        width: 100%;
    }

    .modal-summary[b-jglo7xsgrl],
    .entry-detail-grid[b-jglo7xsgrl] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .modal-summary[b-jglo7xsgrl],
    .entry-detail-grid[b-jglo7xsgrl] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
.auth-shell[b-0otrq2cr7o] {
    min-height: 100vh;
    width: 100%;
    background: var(--ui-bg);
    color: var(--ui-ink);
    overflow-x: hidden;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-5wqc8lw8sk] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-5wqc8lw8sk] {
    flex: 1;
    min-width: 0;
}

/* Glass sidebar */
.sidebar[b-5wqc8lw8sk] {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--ui-glass);
    border-bottom: 1px solid var(--ui-line);
    backdrop-filter: var(--ui-blur);
    -webkit-backdrop-filter: var(--ui-blur);
}

.content[b-5wqc8lw8sk] {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    animation: page-in-b-5wqc8lw8sk .35s var(--ui-ease);
}

@keyframes page-in-b-5wqc8lw8sk {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .content[b-5wqc8lw8sk] {
        animation: none;
    }
}

@media (max-width: 640.98px) {
    .content[b-5wqc8lw8sk] {
        padding-top: 1.1rem;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

@media (min-width: 641px) {
    .page[b-5wqc8lw8sk] {
        flex-direction: row;
    }

    .sidebar[b-5wqc8lw8sk] {
        width: var(--ui-sidebar-w);
        min-width: var(--ui-sidebar-w);
        height: 100vh;
        background: rgba(255, 255, 255, .6);
        border-bottom: 0;
        border-right: 1px solid var(--ui-line);
    }

    article[b-5wqc8lw8sk] {
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }
}

#blazor-error-ui[b-5wqc8lw8sk] {
    color-scheme: light only;
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    z-index: 1000;
    display: none;
    width: min(560px, calc(100% - 2rem));
    padding: .9rem 2.75rem .9rem 1.1rem;
    box-sizing: border-box;
    color: var(--ui-ink);
    background: var(--ui-surface);
    border: 1px solid #fecdca;
    border-left: 4px solid var(--ui-danger);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-lg);
    font-size: .875rem;
    transform: translateX(-50%);
}

    #blazor-error-ui .reload[b-5wqc8lw8sk] {
        margin-left: .4rem;
        color: var(--ui-brand-600);
        font-weight: 600;
    }

    #blazor-error-ui .dismiss[b-5wqc8lw8sk] {
        position: absolute;
        right: .9rem;
        top: .8rem;
        color: var(--ui-muted);
        cursor: pointer;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* =========================================================
   TOP ROW / BRAND
   ========================================================= */

.top-row[b-eefxbnssn2] {
    display: flex;
    align-items: center;
    min-height: 4.25rem;
    padding: 0 1.25rem;
}

.navbar-brand[b-eefxbnssn2] {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: var(--ui-ink);
    text-decoration: none;
}

.brand-mark[b-eefxbnssn2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-width: 38px;
    height: 38px;
    color: #fff;
    background: var(--ui-brand-gradient);
    border-radius: 12px;
    box-shadow: var(--ui-shadow-brand);
    font-size: 1.05rem;
}

.brand-text[b-eefxbnssn2] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

    .brand-text strong[b-eefxbnssn2] {
        color: var(--ui-ink);
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: -.03em;
    }

    .brand-text small[b-eefxbnssn2] {
        color: var(--ui-muted);
        font-size: .72rem;
        font-weight: 500;
    }

/* =========================================================
   MOBILE TOGGLER
   ========================================================= */

.navbar-toggler[b-eefxbnssn2] {
    appearance: none;
    cursor: pointer;
    position: absolute;
    top: .8rem;
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230d121c' stroke-linecap='round' stroke-width='2' d='M6 10h18M6 15h18M6 20h12'/%3e%3c/svg%3e") no-repeat center / 1.5rem;
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    box-shadow: var(--ui-shadow-xs);
    transition: background-color var(--ui-fast), border-color var(--ui-fast), box-shadow var(--ui-fast);
}

    .navbar-toggler:hover[b-eefxbnssn2] {
        border-color: var(--ui-line-strong);
    }

    .navbar-toggler:checked[b-eefxbnssn2] {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23f25a07' stroke-linecap='round' stroke-width='2' d='M9 9l12 12M21 9L9 21'/%3e%3c/svg%3e");
        border-color: var(--ui-brand-200);
        box-shadow: var(--ui-ring);
    }

/* =========================================================
   SECTIONS & ITEMS
   ========================================================= */

.nav[b-eefxbnssn2] {
    padding: .25rem .75rem 1rem;
}

.nav-section[b-eefxbnssn2] {
    padding: 1.15rem .75rem .45rem;
    color: var(--ui-subtle);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

    .nav-section:first-child[b-eefxbnssn2] {
        padding-top: .5rem;
    }

.nav-item[b-eefxbnssn2] {
    padding: 1px 0;
    font-size: .875rem;
    font-weight: 500;
}

    .nav-item[b-eefxbnssn2]  .nav-link {
        position: relative;
        display: flex;
        align-items: center;
        gap: .7rem;
        width: 100%;
        height: 2.5rem;
        padding: 0 .75rem;
        color: var(--ui-text);
        background: transparent;
        border: 1px solid transparent;
        border-radius: var(--ui-radius-sm);
        font-family: var(--ui-font);
        font-size: .875rem;
        font-weight: 500;
        letter-spacing: -.005em;
        line-height: 1.2;
        text-decoration: none;
        transition: background-color var(--ui-fast), border-color var(--ui-fast), color var(--ui-fast), box-shadow var(--ui-fast);
    }

    .nav-item[b-eefxbnssn2]  .nav-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        min-width: 20px;
        height: 20px;
        margin: 0;
        color: var(--ui-subtle);
        font-size: 1.05rem;
        line-height: 1;
        transition: color var(--ui-fast);
    }

    .nav-item[b-eefxbnssn2]  .nav-link > span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .nav-item[b-eefxbnssn2]  .nav-link:hover {
        color: var(--ui-ink);
        background: rgba(var(--ui-ink-rgb), .04);
    }

        .nav-item[b-eefxbnssn2]  .nav-link:hover .nav-icon {
            color: var(--ui-ink-2);
        }

    .nav-item[b-eefxbnssn2]  a.active {
        color: var(--ui-ink);
        background: var(--ui-surface);
        border-color: var(--ui-line);
        box-shadow: var(--ui-shadow-sm);
    }

        .nav-item[b-eefxbnssn2]  a.active::before {
            position: absolute;
            left: -.75rem;
            top: 50%;
            width: 3px;
            height: 18px;
            content: "";
            background: var(--ui-brand);
            border-radius: 0 3px 3px 0;
            transform: translateY(-50%);
        }

        .nav-item[b-eefxbnssn2]  a.active .nav-icon {
            color: var(--ui-brand);
        }

    .nav-item[b-eefxbnssn2]  button.nav-link {
        font: inherit;
        font-family: var(--ui-font);
        font-size: .875rem;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
    }

    .nav-item[b-eefxbnssn2]  .app-install-button .nav-icon {
        color: var(--ui-brand);
    }

/* =========================================================
   USER CARD
   ========================================================= */

.nav-user[b-eefxbnssn2] {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-top: .5rem;
    padding: .4rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-xs);
}

    .nav-user[b-eefxbnssn2]  .nav-user-link {
        display: flex;
        align-items: center;
        gap: .65rem;
        flex: 1;
        min-width: 0;
        padding: .3rem .4rem;
        color: var(--ui-ink);
        border-radius: var(--ui-radius-sm);
        text-decoration: none;
        transition: background-color var(--ui-fast);
    }

        .nav-user[b-eefxbnssn2]  .nav-user-link:hover,
        .nav-user[b-eefxbnssn2]  .nav-user-link.active {
            background: var(--ui-surface-3);
        }

.nav-avatar[b-eefxbnssn2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-width: 34px;
    height: 34px;
    color: var(--ui-brand-700);
    background: linear-gradient(135deg, var(--ui-brand-100), var(--ui-brand-50));
    border: 1px solid var(--ui-brand-200);
    border-radius: 50%;
    font-size: .85rem;
    font-weight: 700;
}

.nav-user-text[b-eefxbnssn2] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

    .nav-user-text strong[b-eefxbnssn2] {
        overflow: hidden;
        font-size: .875rem;
        font-weight: 500;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .nav-user-text small[b-eefxbnssn2] {
        color: var(--ui-muted);
        font-size: .7rem;
    }

.nav-user form[b-eefxbnssn2] {
    margin: 0;
}

.nav-logout[b-eefxbnssn2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--ui-muted);
    background: transparent;
    border: 0;
    border-radius: var(--ui-radius-xs);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background-color var(--ui-fast), color var(--ui-fast);
}

    .nav-logout:hover[b-eefxbnssn2] {
        color: var(--ui-danger-700);
        background: var(--ui-danger-50);
    }

/* =========================================================
   SCROLL AREA
   ========================================================= */

.nav-scrollable[b-eefxbnssn2] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-eefxbnssn2] {
    display: block;
    max-height: calc(100vh - 4.25rem);
    overflow-y: auto;
    border-top: 1px solid var(--ui-line);
    animation: nav-drop-b-eefxbnssn2 .2s var(--ui-ease);
}

@keyframes nav-drop-b-eefxbnssn2 {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}

/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 641px) {

    .top-row[b-eefxbnssn2] {
        min-height: 4.75rem;
        padding: 0 1.5rem;
    }

    .navbar-toggler[b-eefxbnssn2] {
        display: none;
    }

    .nav-scrollable[b-eefxbnssn2] {
        display: block;
        height: calc(100vh - 4.75rem);
        overflow-y: auto;
    }

    .nav[b-eefxbnssn2] {
        min-height: 100%;
    }

    .nav-user[b-eefxbnssn2] {
        margin-top: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-rqdor67tbp],
.components-reconnect-repeated-attempt-visible[b-rqdor67tbp],
.components-reconnect-failed-visible[b-rqdor67tbp],
.components-pause-visible[b-rqdor67tbp],
.components-resume-failed-visible[b-rqdor67tbp],
.components-rejoining-animation[b-rqdor67tbp] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-rqdor67tbp],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-rqdor67tbp],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-rqdor67tbp],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-rqdor67tbp],
#components-reconnect-modal.components-reconnect-retrying[b-rqdor67tbp],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-rqdor67tbp],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-rqdor67tbp],
#components-reconnect-modal.components-reconnect-failed[b-rqdor67tbp],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-rqdor67tbp] {
    display: block;
}


#components-reconnect-modal[b-rqdor67tbp] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-lg);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-rqdor67tbp 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-rqdor67tbp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-rqdor67tbp 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-rqdor67tbp]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-rqdor67tbp 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-rqdor67tbp {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-rqdor67tbp {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-rqdor67tbp {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-rqdor67tbp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-rqdor67tbp] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-rqdor67tbp] {
    border: 1px solid var(--ui-brand-600);
    background: var(--ui-brand-gradient);
    color: white;
    padding: 8px 24px;
    border-radius: var(--ui-radius-sm);
    font-weight: 600;
    box-shadow: var(--ui-shadow-brand);
}

    #components-reconnect-modal button:hover[b-rqdor67tbp] {
        background: var(--ui-brand-600);
    }

    #components-reconnect-modal button:active[b-rqdor67tbp] {
        background: var(--ui-brand-700);
    }

.components-rejoining-animation[b-rqdor67tbp] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-rqdor67tbp] {
        position: absolute;
        border: 3px solid var(--ui-brand);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-rqdor67tbp 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-rqdor67tbp] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-rqdor67tbp {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SiteFooter.razor.rz.scp.css */
.site-footer[b-lecwm6w8qt] {
    background: var(--ui-ink);
    color: rgba(255, 255, 255, .72);
    font-size: .9rem;
}

.site-footer-inner[b-lecwm6w8qt] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 56px 20px 36px;
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: 32px;
}

.site-footer-logo[b-lecwm6w8qt] {
    display: inline-block;
    margin-bottom: 12px;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.03em;
    text-decoration: none;
}

.site-footer-my[b-lecwm6w8qt] {
    color: rgba(255, 255, 255, .55);
    font-weight: 600;
}

.site-footer-accent[b-lecwm6w8qt] {
    color: var(--ui-brand);
}

.site-footer-brand p[b-lecwm6w8qt] {
    margin: 0 0 18px;
    max-width: 320px;
    line-height: 1.6;
}

.site-footer-cta[b-lecwm6w8qt] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    background: var(--ui-brand);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

    .site-footer-cta:hover[b-lecwm6w8qt] {
        color: #fff;
        background: var(--ui-brand-600);
    }

.site-footer-col[b-lecwm6w8qt] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}

    .site-footer-col h2[b-lecwm6w8qt] {
        margin: 0 0 6px;
        color: #fff;
        font-size: .82rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .site-footer-col a[b-lecwm6w8qt],
    .site-footer-linkbtn[b-lecwm6w8qt] {
        color: rgba(255, 255, 255, .72);
        text-decoration: none;
        transition: color .15s ease;
    }

        .site-footer-col a:hover[b-lecwm6w8qt],
        .site-footer-linkbtn:hover[b-lecwm6w8qt] {
            color: #fff;
        }

.site-footer-linkbtn[b-lecwm6w8qt] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.site-footer-bottom[b-lecwm6w8qt] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 20px 26px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .82rem;
    color: rgba(255, 255, 255, .5);
}

@media (max-width: 980px) {
    .site-footer-inner[b-lecwm6w8qt] {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-footer-brand[b-lecwm6w8qt] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .site-footer-inner[b-lecwm6w8qt] {
        grid-template-columns: 1fr;
        padding-top: 44px;
    }
}
/* /Components/Layout/SiteNav.razor.rz.scp.css */
.site-nav[b-epvizr0s1y] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--ui-line);
}

.site-nav-inner[b-epvizr0s1y] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.site-brand[b-epvizr0s1y] {
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--ui-ink);
    text-decoration: none;
    white-space: nowrap;
}

.site-brand-my[b-epvizr0s1y] {
    color: var(--ui-muted);
    font-weight: 600;
}

.site-brand-management[b-epvizr0s1y] {
    color: var(--ui-brand);
}

.site-nav-toggle[b-epvizr0s1y] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.site-nav-burger[b-epvizr0s1y] {
    display: none;
}

.site-nav-menu[b-epvizr0s1y] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 22px;
}

    .site-nav-menu > a[b-epvizr0s1y] {
        color: var(--ui-text);
        font-size: .93rem;
        font-weight: 500;
        text-decoration: none;
        padding: 6px 0;
        border-bottom: 2px solid transparent;
        transition: color .15s ease, border-color .15s ease;
    }

        .site-nav-menu > a:hover[b-epvizr0s1y],
        .site-nav-menu > a.is-active[b-epvizr0s1y] {
            color: var(--ui-ink);
            border-color: var(--ui-brand);
        }

.site-nav-actions[b-epvizr0s1y] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-nav-login[b-epvizr0s1y] {
    color: var(--ui-ink);
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    padding: 9px 14px;
    border-radius: 10px;
}

    .site-nav-login:hover[b-epvizr0s1y] {
        background: var(--ui-surface-3);
    }

.site-nav-cta[b-epvizr0s1y] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 12px;
    background: var(--ui-brand-gradient);
    color: #fff;
    font-weight: 700;
    font-size: .92rem;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(var(--ui-brand-rgb), .28);
    transition: transform .15s ease, box-shadow .15s ease;
}

    .site-nav-cta:hover[b-epvizr0s1y] {
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 12px 24px rgba(var(--ui-brand-rgb), .34);
    }

@media (max-width: 900px) {
    .site-nav-inner[b-epvizr0s1y] {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .site-nav-burger[b-epvizr0s1y] {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 42px;
        height: 42px;
        padding: 10px;
        border-radius: 10px;
        cursor: pointer;
    }

        .site-nav-burger span[b-epvizr0s1y] {
            display: block;
            height: 2px;
            border-radius: 2px;
            background: var(--ui-ink);
            transition: transform .2s ease, opacity .2s ease;
        }

    .site-nav-menu[b-epvizr0s1y] {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 8px 0 18px;
    }

        .site-nav-menu > a[b-epvizr0s1y] {
            padding: 12px 4px;
            border-bottom: 1px solid var(--ui-line);
        }

    .site-nav-toggle:checked ~ .site-nav-menu[b-epvizr0s1y] {
        display: flex;
    }

    .site-nav-toggle:checked + .site-nav-burger span:nth-child(1)[b-epvizr0s1y] {
        transform: translateY(7px) rotate(45deg);
    }

    .site-nav-toggle:checked + .site-nav-burger span:nth-child(2)[b-epvizr0s1y] {
        opacity: 0;
    }

    .site-nav-toggle:checked + .site-nav-burger span:nth-child(3)[b-epvizr0s1y] {
        transform: translateY(-7px) rotate(-45deg);
    }

    .site-nav-toggle:focus-visible + .site-nav-burger[b-epvizr0s1y] {
        outline: 3px solid var(--ui-brand-300);
    }

    .site-nav-actions[b-epvizr0s1y] {
        margin: 12px 0 0;
        flex-direction: column;
        align-items: stretch;
    }

    .site-nav-login[b-epvizr0s1y],
    .site-nav-cta[b-epvizr0s1y] {
        justify-content: center;
        text-align: center;
    }
}
/* /Components/Pages/AGB.razor.rz.scp.css */
/* =========================================================
   BAUMANAGEMENT - AGB
   ========================================================= */

.legal-page[b-aw5yq4q10x] {
    min-height: 100vh;
    width: 100%;
    background: #f6f7f9;
    color: var(--ui-ink);
    padding: 42px 20px 80px;
}

.legal-container[b-aw5yq4q10x] {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}


/* =========================================================
   BACK
   ========================================================= */

.legal-back[b-aw5yq4q10x] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 32px;
    color: var(--ui-muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all .2s ease;
}

    .legal-back:hover[b-aw5yq4q10x] {
        color: var(--ui-brand);
    }

    .legal-back i[b-aw5yq4q10x] {
        font-size: 14px;
    }


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

.legal-header[b-aw5yq4q10x] {
    margin-bottom: 34px;
}

.legal-eyebrow[b-aw5yq4q10x] {
    display: inline-block;
    margin-bottom: 9px;
    color: var(--ui-brand);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.legal-header h1[b-aw5yq4q10x] {
    margin: 0;
    color: #171717;
    font-size: 42px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -1.4px;
}

.legal-header p[b-aw5yq4q10x] {
    max-width: 720px;
    margin: 14px 0 0;
    color: #737980;
    font-size: 15px;
    line-height: 1.65;
}


/* =========================================================
   VERSION
   ========================================================= */

.legal-version[b-aw5yq4q10x] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    padding: 7px 11px;
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    color: #737980;
    font-size: 11px;
    font-weight: 500;
}

    .legal-version i[b-aw5yq4q10x] {
        color: var(--ui-brand);
    }


/* =========================================================
   CARD
   ========================================================= */

.legal-card[b-aw5yq4q10x] {
    margin-bottom: 16px;
    padding: 28px;
    background: #fff;
    border: 1px solid #e7e9ec;
    border-radius: 16px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .025);
}

    .legal-card p[b-aw5yq4q10x] {
        margin: 0 0 14px;
        color: var(--ui-text);
        font-size: 14px;
        line-height: 1.75;
    }

        .legal-card p:last-child[b-aw5yq4q10x] {
            margin-bottom: 0;
        }


/* =========================================================
   SECTION TITLE
   ========================================================= */

.legal-section-title[b-aw5yq4q10x] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 21px;
}

.legal-icon[b-aw5yq4q10x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    background: var(--ui-brand-50);
    border-radius: 11px;
    color: var(--ui-brand);
    font-size: 18px;
}

.legal-section-title > div:last-child[b-aw5yq4q10x] {
    min-width: 0;
}

.legal-section-title span[b-aw5yq4q10x] {
    display: block;
    margin-bottom: 2px;
    color: var(--ui-brand);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.legal-section-title h2[b-aw5yq4q10x] {
    margin: 0;
    color: #1f2328;
    font-size: 19px;
    line-height: 1.25;
    font-weight: 700;
}


/* =========================================================
   COMPANY
   ========================================================= */

.legal-company[b-aw5yq4q10x] {
    padding: 19px;
    background: var(--ui-surface-2);
    border: 1px solid #eceef0;
    border-radius: 12px;
}

    .legal-company > strong[b-aw5yq4q10x] {
        display: block;
        margin-bottom: 12px;
        color: #202428;
        font-size: 17px;
        font-weight: 700;
    }

.legal-company-row[b-aw5yq4q10x] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 9px;
    color: var(--ui-text);
    font-size: 13px;
    line-height: 1.55;
}

    .legal-company-row i[b-aw5yq4q10x] {
        width: 18px;
        min-width: 18px;
        margin-top: 2px;
        color: var(--ui-brand);
    }

    .legal-company-row a[b-aw5yq4q10x] {
        color: var(--ui-text);
        text-decoration: none;
    }

        .legal-company-row a:hover[b-aw5yq4q10x] {
            color: var(--ui-brand);
        }


/* =========================================================
   HIGHLIGHT
   ========================================================= */

.legal-highlight[b-aw5yq4q10x] {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 18px;
    padding: 15px;
    background: var(--ui-brand-50);
    border: 1px solid #ffe2cf;
    border-radius: 11px;
}

    .legal-highlight > i[b-aw5yq4q10x] {
        margin-top: 2px;
        color: var(--ui-brand);
        font-size: 17px;
    }

    .legal-highlight strong[b-aw5yq4q10x] {
        display: block;
        margin-bottom: 4px;
        color: var(--ui-ink-2);
        font-size: 13px;
    }

    .legal-highlight p[b-aw5yq4q10x] {
        margin-bottom: 0;
        font-size: 13px;
    }


/* =========================================================
   LIST
   ========================================================= */

.legal-list[b-aw5yq4q10x] {
    margin: 8px 0 0;
    padding-left: 21px;
}

    .legal-list li[b-aw5yq4q10x] {
        margin-bottom: 8px;
        color: var(--ui-text);
        font-size: 14px;
        line-height: 1.65;
    }

        .legal-list li[b-aw5yq4q10x]::marker {
            color: var(--ui-brand);
        }


/* =========================================================
   INLINE LINKS
   ========================================================= */

.legal-inline-link[b-aw5yq4q10x] {
    color: var(--ui-brand);
    font-weight: 600;
    text-decoration: none;
}

    .legal-inline-link:hover[b-aw5yq4q10x] {
        text-decoration: underline;
    }


/* =========================================================
   PRICE TABLE
   ========================================================= */

.price-table[b-aw5yq4q10x] {
    width: 100%;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid #e7e9ec;
    border-radius: 12px;
}

.price-row[b-aw5yq4q10x] {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--ui-line);
    font-size: 13px;
}

    .price-row:first-child[b-aw5yq4q10x] {
        border-top: none;
    }

.price-head[b-aw5yq4q10x] {
    background: var(--ui-surface-2);
    color: #8a9097;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.price-row strong[b-aw5yq4q10x] {
    color: var(--ui-ink-2);
    font-weight: 650;
}

.price-row span[b-aw5yq4q10x] {
    color: var(--ui-text);
}

.legal-small-note[b-aw5yq4q10x] {
    margin-top: 12px !important;
    color: #8a9097 !important;
    font-size: 11px !important;
}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

.legal-placeholder[b-aw5yq4q10x] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    padding: 14px 15px;
    background: var(--ui-brand-50);
    border: 1px solid #ffe2cf;
    border-radius: 10px;
    color: #697078;
    font-size: 12px;
    line-height: 1.55;
}

    .legal-placeholder > i[b-aw5yq4q10x] {
        margin-top: 1px;
        color: var(--ui-brand);
        font-size: 16px;
    }

    .legal-placeholder strong[b-aw5yq4q10x] {
        color: var(--ui-ink-2);
    }


/* =========================================================
   PROVIDER CARD
   ========================================================= */

.legal-provider-card[b-aw5yq4q10x] {
    background: linear-gradient(135deg, var(--ui-brand-50), var(--ui-surface));
    border-color: var(--ui-brand-100);
    box-shadow: none;
}

.legal-provider-content[b-aw5yq4q10x] {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.legal-provider-icon[b-aw5yq4q10x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-width: 48px;
    height: 48px;
    background: var(--ui-brand);
    border-radius: 12px;
    color: #fff;
    font-size: 20px;
}

.legal-provider-content h2[b-aw5yq4q10x] {
    margin: 3px 0 8px;
    color: var(--ui-ink);
    font-size: 20px;
    font-weight: 700;
}

.legal-provider-content p[b-aw5yq4q10x] {
    color: var(--ui-text);
}

.legal-provider-contact[b-aw5yq4q10x] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

    .legal-provider-contact a[b-aw5yq4q10x] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--ui-ink);
        font-size: 12px;
        text-decoration: none;
    }

        .legal-provider-contact a:hover[b-aw5yq4q10x] {
            color: var(--ui-brand);
        }


/* =========================================================
   FOOTER
   ========================================================= */

.legal-footer[b-aw5yq4q10x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 4px 0;
    color: #8a9097;
    font-size: 11px;
}

    .legal-footer > div[b-aw5yq4q10x] {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

        .legal-footer > div:last-child[b-aw5yq4q10x] {
            text-align: right;
        }

    .legal-footer strong[b-aw5yq4q10x] {
        color: var(--ui-ink-2);
        font-size: 13px;
    }


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .legal-page[b-aw5yq4q10x] {
        padding: 25px 12px 50px;
    }

    .legal-container[b-aw5yq4q10x] {
        max-width: 100%;
    }

    .legal-back[b-aw5yq4q10x] {
        margin-bottom: 23px;
    }

    .legal-header[b-aw5yq4q10x] {
        margin-bottom: 25px;
    }

        .legal-header h1[b-aw5yq4q10x] {
            font-size: 31px;
            line-height: 1.1;
            letter-spacing: -.8px;
        }

        .legal-header p[b-aw5yq4q10x] {
            margin-top: 10px;
            font-size: 13px;
        }

    .legal-card[b-aw5yq4q10x] {
        padding: 20px 17px;
        margin-bottom: 12px;
        border-radius: 13px;
    }

    .legal-section-title[b-aw5yq4q10x] {
        gap: 11px;
        margin-bottom: 17px;
    }

    .legal-icon[b-aw5yq4q10x] {
        width: 39px;
        min-width: 39px;
        height: 39px;
        border-radius: 10px;
        font-size: 16px;
    }

    .legal-section-title h2[b-aw5yq4q10x] {
        font-size: 16px;
    }

    .legal-card p[b-aw5yq4q10x] {
        font-size: 13px;
        line-height: 1.7;
    }

    .legal-list li[b-aw5yq4q10x] {
        font-size: 13px;
    }

    .legal-company[b-aw5yq4q10x] {
        padding: 15px;
    }

    .price-row[b-aw5yq4q10x] {
        grid-template-columns: 1.2fr .8fr .8fr;
        gap: 6px;
        padding: 12px 10px;
        font-size: 12px;
    }

    .price-head[b-aw5yq4q10x] {
        font-size: 8px;
    }

    .legal-provider-content[b-aw5yq4q10x] {
        gap: 12px;
    }

    .legal-provider-icon[b-aw5yq4q10x] {
        width: 42px;
        min-width: 42px;
        height: 42px;
        font-size: 17px;
    }

    .legal-provider-content h2[b-aw5yq4q10x] {
        font-size: 18px;
    }

    .legal-provider-contact[b-aw5yq4q10x] {
        flex-direction: column;
        gap: 7px;
    }

    .legal-footer[b-aw5yq4q10x] {
        flex-direction: column;
        align-items: flex-start;
    }

        .legal-footer > div:last-child[b-aw5yq4q10x] {
            text-align: left;
        }
}
/* /Components/Pages/Assignments.razor.rz.scp.css */
/*
   Assignments.razor.css
   Light design-system styles (tokens in wwwroot/app.css)
*/

:host[b-wrdfw20sar] {
    display: block;
    color: var(--as-ink);
}

    /* Page foundation */
    :host > div[b-wrdfw20sar] {
        max-width: 1440px;
        margin-inline: auto;
    }

.employee-header[b-wrdfw20sar] {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 2.25rem;
    margin-bottom: 1.5rem !important;
    overflow: hidden;
    color: var(--ui-ink);
    background: radial-gradient(120% 140% at 100% 0%, rgba(var(--ui-brand-rgb), .16) 0%, rgba(var(--ui-brand-rgb), .05) 32%, transparent 58%), radial-gradient(90% 120% at 0% 100%, rgba(99, 102, 241, .06), transparent 55%), var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    box-shadow: var(--ui-shadow);
}

    .employee-header[b-wrdfw20sar]::after {
        position: absolute;
        right: -55px;
        bottom: -90px;
        width: 220px;
        height: 220px;
        content: "";
        border: 38px solid rgba(var(--ui-brand-rgb), .07);
        border-radius: 50%;
    }

    .employee-header > div[b-wrdfw20sar],
    .employee-header > button[b-wrdfw20sar] {
        position: relative;
        z-index: 1;
    }

    .employee-header h3[b-wrdfw20sar] {
        margin: 0 0 .45rem;
        font-size: clamp(1.65rem, 2.4vw, 2.2rem);
        font-weight: 800;
        letter-spacing: -.04em;
    }

    .employee-header p[b-wrdfw20sar] {
        color: var(--ui-muted) !important;
        font-size: .95rem;
    }

/* Cards */
.modern-card[b-wrdfw20sar] {
    overflow: visible;
    background: var(--as-surface);
    border: 1px solid var(--as-line) !important;
    border-radius: var(--as-radius) !important;
    box-shadow: var(--as-shadow);
}

    .modern-card.overflow-hidden[b-wrdfw20sar] {
        overflow: hidden;
    }

    .modern-card .card-body[b-wrdfw20sar] {
        background: transparent;
    }

/* Buttons */
.btn[b-wrdfw20sar] {
    min-height: 42px;
    padding: .65rem 1rem;
    border-radius: 10px;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .01em;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

    .btn:hover:not(:disabled)[b-wrdfw20sar] {
        transform: translateY(-2px);
    }

    .btn:active:not(:disabled)[b-wrdfw20sar] {
        transform: translateY(0);
    }

.btn-primary[b-wrdfw20sar] {
    color: #fff !important;
    background: var(--as-orange) !important;
    border-color: var(--as-orange) !important;
    box-shadow: 0 8px 18px rgba(var(--ui-brand-rgb), .22);
}

    .btn-primary:hover:not(:disabled)[b-wrdfw20sar],
    .btn-primary:focus-visible[b-wrdfw20sar] {
        background: var(--as-orange-dark) !important;
        border-color: var(--as-orange-dark) !important;
        box-shadow: 0 10px 24px rgba(var(--ui-brand-rgb), .28);
    }

/* Hard override for themes that redefine Bootstrap .btn-primary */
button.btn.btn-primary[b-wrdfw20sar],
a.btn.btn-primary[b-wrdfw20sar] {
    color: #fff !important;
    background-color: var(--ui-brand) !important;
    background-image: none !important;
    border-color: var(--ui-brand) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}

    button.btn.btn-primary:hover:not(:disabled)[b-wrdfw20sar],
    button.btn.btn-primary:focus-visible[b-wrdfw20sar],
    a.btn.btn-primary:hover[b-wrdfw20sar],
    a.btn.btn-primary:focus-visible[b-wrdfw20sar] {
        color: #fff !important;
        background-color: var(--ui-brand-600) !important;
        border-color: var(--ui-brand-600) !important;
    }

.btn-secondary[b-wrdfw20sar] {
    color: var(--as-ink) !important;
    background: var(--ui-surface-3) !important;
    border-color: var(--ui-surface-3) !important;
}

    .btn-secondary:hover:not(:disabled)[b-wrdfw20sar] {
        background: var(--ui-line) !important;
        border-color: var(--ui-line) !important;
    }

.btn-outline-danger[b-wrdfw20sar] {
    color: var(--as-danger) !important;
    border-color: #fecdca !important;
    background: #fff !important;
}

    .btn-outline-danger:hover:not(:disabled)[b-wrdfw20sar] {
        color: #fff !important;
        background: var(--as-danger) !important;
        border-color: var(--as-danger) !important;
    }

.btn-sm[b-wrdfw20sar] {
    min-height: 34px;
    padding: .42rem .72rem;
    border-radius: 8px;
    font-size: .76rem;
}

.btn:disabled[b-wrdfw20sar] {
    cursor: not-allowed;
    opacity: .45;
    box-shadow: none;
}

/* Search */
.search-box[b-wrdfw20sar] {
    overflow: hidden;
    border: 1px solid var(--as-line);
    border-radius: 12px;
    background: var(--ui-surface-2);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .search-box:focus-within[b-wrdfw20sar] {
        background: #fff;
        border-color: var(--as-orange);
        box-shadow: 0 0 0 4px rgba(var(--ui-brand-rgb), .12);
    }

    .search-box .input-group-text[b-wrdfw20sar] {
        padding-inline: 1rem;
        color: var(--as-orange);
        background: transparent;
        border: 0;
        font-size: 1.35rem;
    }

    .search-box .form-control[b-wrdfw20sar] {
        border: 0;
        background: transparent;
        box-shadow: none;
    }

/* Forms */
.form-label[b-wrdfw20sar] {
    display: block;
    margin-bottom: .5rem;
    color: var(--as-ink);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.form-control[b-wrdfw20sar] {
    min-height: 46px;
    padding: .7rem .85rem;
    color: var(--as-ink);
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    font-size: .9rem;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .form-control[b-wrdfw20sar]::placeholder {
        color: var(--ui-subtle);
    }

    .form-control:focus[b-wrdfw20sar] {
        color: var(--as-ink);
        background: #fff;
        border-color: var(--as-orange);
        box-shadow: 0 0 0 4px rgba(var(--ui-brand-rgb), .12);
    }

textarea.form-control[b-wrdfw20sar] {
    min-height: 104px;
    resize: vertical;
}

/* Live search dropdowns */
.live-search-wrapper[b-wrdfw20sar] {
    position: relative;
}

.live-search-results[b-wrdfw20sar] {
    position: absolute;
    z-index: 20;
    top: calc(100% + .5rem);
    right: 0;
    left: 0;
    overflow: hidden;
    padding: .4rem;
    background: #fff;
    border: 1px solid var(--as-line);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(16, 24, 40, .16);
}

.live-search-result[b-wrdfw20sar] {
    display: flex;
    align-items: center;
    width: 100%;
    gap: .75rem;
    padding: .7rem .75rem;
    color: var(--as-ink);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 9px;
    transition: background .15s ease;
}

    .live-search-result:hover[b-wrdfw20sar],
    .live-search-result:focus-visible[b-wrdfw20sar] {
        background: var(--as-orange-soft);
        outline: none;
    }

.live-search-avatar[b-wrdfw20sar],
.employee-avatar[b-wrdfw20sar] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #fff;
    background: var(--as-dark);
    border-radius: 12px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .03em;
}

    .live-search-avatar.site-avatar[b-wrdfw20sar] {
        color: var(--as-dark);
        background: var(--as-orange-soft);
        border: 1px solid var(--ui-brand-200);
    }

.live-search-content[b-wrdfw20sar] {
    min-width: 0;
}

.live-search-title[b-wrdfw20sar] {
    overflow: hidden;
    font-size: .88rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-search-subtitle[b-wrdfw20sar] {
    margin-top: .18rem;
    color: var(--as-muted);
    font-size: .75rem;
}

.live-search-empty[b-wrdfw20sar] {
    padding: 1rem;
    color: var(--as-muted);
    font-size: .82rem;
    text-align: center;
}

.selected-info[b-wrdfw20sar] {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .65rem;
    padding: .55rem .7rem;
    color: var(--as-dark);
    background: var(--as-orange-soft);
    border: 1px solid var(--ui-brand-200);
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 700;
}

.selected-check[b-wrdfw20sar] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    color: #fff;
    background: var(--as-orange);
    border-radius: 50%;
    font-size: .72rem;
}

.selected-remove[b-wrdfw20sar] {
    width: 26px;
    height: 26px;
    margin-left: auto;
    color: var(--as-orange-dark);
    background: transparent;
    border: 0;
    border-radius: 50%;
    font-size: 1.15rem;
    line-height: 1;
}

    .selected-remove:hover[b-wrdfw20sar] {
        background: rgba(var(--ui-brand-rgb), .14);
    }

/* Alerts */
.alert[b-wrdfw20sar] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border: 0;
    border-left: 4px solid var(--as-orange);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(16, 24, 40, .06);
}

.alert-warning[b-wrdfw20sar] {
    color: var(--ui-warning-700);
    background: var(--ui-warning-50);
}

.alert-danger[b-wrdfw20sar] {
    color: var(--ui-danger-700);
    background: var(--ui-danger-50);
    border-left-color: var(--as-danger);
}

.alert-success[b-wrdfw20sar] {
    color: var(--ui-success-700);
    background: var(--ui-success-50);
    border-left-color: var(--ui-success);
}

/* Table */
.table-modern[b-wrdfw20sar] {
    margin: 0;
    --bs-table-bg: transparent;
}

    .table-modern thead th[b-wrdfw20sar] {
        padding: 1rem 1.25rem;
        color: var(--ui-muted);
        background: var(--ui-surface-2);
        border-bottom: 1px solid var(--as-line);
        font-size: .7rem;
        font-weight: 850;
        letter-spacing: .09em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .table-modern tbody td[b-wrdfw20sar] {
        padding: 1.1rem 1.25rem;
        color: var(--as-ink);
        border-bottom: 1px solid var(--ui-surface-3);
        font-size: .87rem;
        vertical-align: middle;
    }

    .table-modern tbody tr[b-wrdfw20sar] {
        transition: background .18s ease;
    }

        .table-modern tbody tr:hover[b-wrdfw20sar] {
            background: var(--ui-brand-50);
        }

        .table-modern tbody tr:last-child td[b-wrdfw20sar] {
            border-bottom: 0;
        }

.assignment-date[b-wrdfw20sar] {
    color: var(--as-ink);
    font-weight: 800;
    white-space: nowrap;
}

.assignment-time[b-wrdfw20sar] {
    margin-top: .3rem;
    color: var(--as-orange-dark);
    font-size: .75rem;
    font-weight: 750;
    white-space: nowrap;
}

.employee-avatar[b-wrdfw20sar] {
    width: 42px;
    height: 42px;
    color: #fff !important;
    background: linear-gradient(145deg, var(--ui-brand-400), var(--ui-brand-600)) !important;
    background-image: linear-gradient(145deg, var(--ui-brand-400), var(--ui-brand-600)) !important;
    border: 2px solid #fff;
    box-shadow: 0 6px 13px rgba(var(--ui-brand-rgb), .18);
}

.table-modern .fw-semibold[b-wrdfw20sar] {
    font-weight: 750 !important;
}

.table-modern small[b-wrdfw20sar] {
    display: inline-block;
    margin-top: .22rem;
    font-size: .74rem;
}

/* Empty state and pagination */
.empty-state[b-wrdfw20sar] {
    padding: 1.75rem 1rem;
}

.empty-state-icon[b-wrdfw20sar] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: .9rem;
    color: var(--as-orange);
    background: var(--as-orange-soft);
    border-radius: 18px;
    font-size: 1.7rem;
}

.empty-state h6[b-wrdfw20sar] {
    margin-bottom: .3rem;
    font-weight: 800;
}

.pagination-container[b-wrdfw20sar] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--ui-surface-2);
    border-top: 1px solid var(--as-line);
}

    .pagination-container .btn[b-wrdfw20sar] {
        min-width: 35px;
    }

/* Bootstrap utility refinement inside this component */
.text-muted[b-wrdfw20sar] {
    color: var(--as-muted) !important;
}

/* Keyboard accessibility */
button:focus-visible[b-wrdfw20sar],
a:focus-visible[b-wrdfw20sar],
input:focus-visible[b-wrdfw20sar],
textarea:focus-visible[b-wrdfw20sar] {
    outline: 3px solid rgba(var(--ui-brand-rgb), .28);
    outline-offset: 2px;
}

/* Responsive layout */
@media (max-width: 991.98px) {
    .employee-header[b-wrdfw20sar] {
        padding: 1.6rem;
    }

    .table-modern thead th[b-wrdfw20sar],
    .table-modern tbody td[b-wrdfw20sar] {
        padding-inline: .9rem;
    }
}

@media (max-width: 767.98px) {
    .employee-header[b-wrdfw20sar] {
        align-items: flex-start;
        flex-direction: column;
        padding: 1.35rem;
    }

        .employee-header .btn[b-wrdfw20sar] {
            width: 100%;
        }

    .modern-card .card-body[b-wrdfw20sar] {
        padding: 1rem !important;
    }

    .pagination-container[b-wrdfw20sar] {
        align-items: flex-start;
        flex-direction: column;
    }

        .pagination-container > div:last-child[b-wrdfw20sar] {
            width: 100%;
            justify-content: flex-end;
        }

    .table-modern[b-wrdfw20sar] {
        min-width: 900px;
    }
}

@media (max-width: 479.98px) {
    .employee-header h3[b-wrdfw20sar] {
        font-size: 1.5rem;
    }

    .d-flex.gap-2.mt-4[b-wrdfw20sar] {
        flex-direction: column;
    }

        .d-flex.gap-2.mt-4 .btn[b-wrdfw20sar] {
            width: 100%;
        }
}

@media (prefers-reduced-motion: reduce) {
    *[b-wrdfw20sar],
    *[b-wrdfw20sar]::before,
    *[b-wrdfw20sar]::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* =========================================================
   ARBEITSZEITEN PAGE
   ========================================================= */

:host[b-wrdfw20sar] {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
}

.working-times-page[b-wrdfw20sar] {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: var(--as-ink);
    box-sizing: border-box;
}

.working-times-header[b-wrdfw20sar] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 2rem 2.25rem;
    margin: 0 0 1.5rem 0;
    overflow: hidden;
    color: var(--ui-ink);
    background: radial-gradient(120% 140% at 100% 0%, rgba(var(--ui-brand-rgb), .16) 0%, rgba(var(--ui-brand-rgb), .05) 32%, transparent 58%), radial-gradient(90% 120% at 0% 100%, rgba(99, 102, 241, .06), transparent 55%), var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    box-shadow: var(--ui-shadow);
    box-sizing: border-box;
}

    .working-times-header[b-wrdfw20sar]::after {
        position: absolute;
        right: -55px;
        bottom: -95px;
        width: 225px;
        height: 225px;
        content: "";
        border: 38px solid rgba(var(--ui-brand-rgb), .07);
        border-radius: 50%;
    }

    .working-times-header > *[b-wrdfw20sar] {
        position: relative;
        z-index: 1;
    }

    .working-times-header h3[b-wrdfw20sar] {
        margin: 0 0 .45rem;
        font-size: clamp(1.65rem, 2.4vw, 2.2rem);
        font-weight: 800;
        letter-spacing: -.04em;
    }

    .working-times-header p[b-wrdfw20sar] {
        margin: 0;
        color: var(--ui-muted);
        font-size: .95rem;
    }

.export-button[b-wrdfw20sar],
.today-button[b-wrdfw20sar],
.details-button[b-wrdfw20sar],
.month-button[b-wrdfw20sar],
.icon-details-button[b-wrdfw20sar],
.daily-page-button[b-wrdfw20sar] {
    cursor: pointer;
    border: 0;
    font-weight: 750;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.export-button[b-wrdfw20sar] {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 42px;
    padding: .65rem 1rem;
    color: #fff;
    background: var(--as-orange);
    border: 1px solid var(--as-orange);
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(var(--ui-brand-rgb), .22);
}

    .export-button:hover[b-wrdfw20sar] {
        background: var(--as-orange-dark);
        border-color: var(--as-orange-dark);
        transform: translateY(-2px);
    }

.working-times-filter-card[b-wrdfw20sar] {
    display: flex;
    align-items: flex-end;
    gap: 1.25rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: #fff;
    border: 1px solid var(--as-line);
    border-radius: var(--as-radius);
    box-shadow: var(--as-shadow);
}

.filter-group[b-wrdfw20sar] {
    display: grid;
    gap: .4rem;
}

    .filter-group label[b-wrdfw20sar] {
        color: var(--as-muted);
        font-size: .7rem;
        font-weight: 850;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

.month-selector[b-wrdfw20sar] {
    display: flex;
    align-items: center;
    overflow: hidden;
    min-height: 42px;
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-line);
    border-radius: 10px;
}

.month-button[b-wrdfw20sar] {
    width: 40px;
    height: 40px;
    color: var(--as-ink);
    background: var(--ui-surface-3);
}

    .month-button:hover[b-wrdfw20sar] {
        color: #fff;
        background: var(--as-orange);
    }

.month-value[b-wrdfw20sar] {
    min-width: 150px;
    padding-inline: .9rem;
    color: var(--as-ink);
    font-size: .86rem;
    font-weight: 800;
    text-align: center;
}

.search-group[b-wrdfw20sar] {
    flex: 1;
    max-width: 430px;
}

.search-input-wrapper[b-wrdfw20sar],
.daily-search-wrapper[b-wrdfw20sar] {
    position: relative;
}

    .search-input-wrapper > i[b-wrdfw20sar],
    .daily-search-wrapper > i[b-wrdfw20sar] {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: .85rem;
        color: var(--as-orange);
        transform: translateY(-50%);
    }

    .search-input-wrapper .form-control[b-wrdfw20sar],
    .daily-search-wrapper .form-control[b-wrdfw20sar] {
        padding-left: 2.35rem;
    }

.today-button[b-wrdfw20sar] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 42px;
    padding: .65rem 1rem;
    color: var(--as-orange-dark);
    background: #fff;
    border: 1px solid var(--ui-brand-200);
    border-radius: 10px;
}

    .today-button:hover[b-wrdfw20sar] {
        color: #fff;
        background: var(--as-orange);
        border-color: var(--as-orange);
        transform: translateY(-2px);
    }

.working-times-summary-grid[b-wrdfw20sar] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.summary-card[b-wrdfw20sar] {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1.15rem;
    background: #fff;
    border: 1px solid var(--as-line);
    border-radius: 15px;
    box-shadow: var(--as-shadow);
}

    .summary-card > div:last-child[b-wrdfw20sar] {
        min-width: 0;
    }

    .summary-card span[b-wrdfw20sar] {
        display: block;
        color: var(--as-muted);
        font-size: .72rem;
        font-weight: 750;
    }

    .summary-card strong[b-wrdfw20sar] {
        display: block;
        margin-top: .25rem;
        color: var(--as-ink);
        font-size: 1.25rem;
        font-weight: 850;
    }

.summary-icon[b-wrdfw20sar] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    font-size: 1.1rem;
}

    .summary-icon.orange[b-wrdfw20sar] {
        color: var(--as-orange-dark);
        background: var(--as-orange-soft);
    }

    .summary-icon.gray[b-wrdfw20sar] {
        color: #616871;
        background: #eef0f2;
    }

    .summary-icon.blue[b-wrdfw20sar] {
        color: #286b9c;
        background: #e8f3fb;
    }

    .summary-icon.green[b-wrdfw20sar] {
        color: #217b50;
        background: #e8f7ef;
    }

.section-header[b-wrdfw20sar] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 1.8rem 0 .8rem;
}

    .section-header h2[b-wrdfw20sar] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 850;
    }

    .section-header span[b-wrdfw20sar] {
        display: block;
        margin-top: .25rem;
        color: var(--as-muted);
        font-size: .8rem;
    }

.employee-summary-card[b-wrdfw20sar] {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--as-line);
    border-radius: var(--as-radius);
    box-shadow: var(--as-shadow);
}

.working-times-table[b-wrdfw20sar] {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

    .working-times-table th[b-wrdfw20sar] {
        padding: 1rem 1.15rem;
        color: var(--ui-muted);
        background: var(--ui-surface-2);
        border-bottom: 1px solid var(--as-line);
        font-size: .69rem;
        font-weight: 850;
        letter-spacing: .08em;
        text-align: left;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .working-times-table td[b-wrdfw20sar] {
        padding: 1rem 1.15rem;
        border-bottom: 1px solid var(--ui-surface-3);
        font-size: .84rem;
        vertical-align: middle;
    }

    .working-times-table tbody tr[b-wrdfw20sar] {
        transition: background .18s ease;
    }

        .working-times-table tbody tr:hover[b-wrdfw20sar] {
            background: var(--ui-brand-50);
        }

        .working-times-table tbody tr:last-child td[b-wrdfw20sar] {
            border-bottom: 0;
        }

.employee-cell[b-wrdfw20sar] {
    display: flex;
    align-items: center;
    gap: .7rem;
}

    .employee-cell > div:last-child[b-wrdfw20sar] {
        min-width: 0;
    }

    .employee-cell strong[b-wrdfw20sar] {
        display: block;
        font-weight: 800;
    }

    .employee-cell span[b-wrdfw20sar] {
        display: block;
        margin-top: .2rem;
        color: var(--as-muted);
        font-size: .72rem;
    }

.employee-avatar[b-wrdfw20sar] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    color: #fff !important;
    background: linear-gradient(145deg, var(--ui-brand-400), var(--ui-brand-600)) !important;
    border: 2px solid #fff;
    border-radius: 12px;
    box-shadow: 0 6px 13px rgba(var(--ui-brand-rgb), .2);
    font-size: .7rem;
    font-weight: 850;
}

    .employee-avatar.small[b-wrdfw20sar] {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: .62rem;
    }

.days-value[b-wrdfw20sar],
.work-time-value[b-wrdfw20sar],
.break-value[b-wrdfw20sar],
.average-value[b-wrdfw20sar] {
    font-weight: 800;
}

.work-time-value[b-wrdfw20sar] {
    color: var(--as-orange-dark);
}

.break-value[b-wrdfw20sar],
.average-value[b-wrdfw20sar] {
    color: #5e6670;
}

.details-button[b-wrdfw20sar],
.icon-details-button[b-wrdfw20sar] {
    color: var(--as-orange-dark);
    background: #fff;
    border: 1px solid var(--ui-brand-200);
    border-radius: 8px;
}

.details-button[b-wrdfw20sar] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 34px;
    padding: .45rem .7rem;
    font-size: .75rem;
}

.icon-details-button[b-wrdfw20sar] {
    width: 34px;
    height: 34px;
}

    .details-button:hover[b-wrdfw20sar],
    .icon-details-button:hover[b-wrdfw20sar] {
        background: var(--as-orange);
        border-color: var(--as-orange);
        transform: translateY(-2px);
    }

.site-cell[b-wrdfw20sar] {
    display: flex;
    align-items: center;
    gap: .45rem;
}

    .site-cell i[b-wrdfw20sar] {
        color: var(--as-orange);
    }

.date-cell strong[b-wrdfw20sar],
.date-cell span[b-wrdfw20sar] {
    display: block;
}

.date-cell span[b-wrdfw20sar] {
    margin-top: .2rem;
    color: var(--as-muted);
    font-size: .7rem;
}

.muted-value[b-wrdfw20sar] {
    color: var(--ui-subtle);
}

.daily-search-card[b-wrdfw20sar] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    margin-bottom: .8rem;
    background: #fff;
    border: 1px solid var(--as-line);
    border-radius: 12px;
}

.daily-search-wrapper[b-wrdfw20sar] {
    flex: 1;
    max-width: 480px;
}

.daily-search-clear[b-wrdfw20sar] {
    position: absolute;
    top: 50%;
    right: .7rem;
    width: 28px;
    height: 28px;
    color: var(--as-muted);
    background: transparent;
    border: 0;
    transform: translateY(-50%);
}

.daily-search-info[b-wrdfw20sar],
.daily-pagination-info[b-wrdfw20sar] {
    color: var(--as-muted);
    font-size: .76rem;
    font-weight: 700;
}

.daily-pagination[b-wrdfw20sar] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background: var(--ui-surface-2);
    border-top: 1px solid var(--as-line);
}

.daily-pagination-buttons[b-wrdfw20sar] {
    display: flex;
    gap: .3rem;
}

.daily-page-button[b-wrdfw20sar] {
    min-width: 34px;
    height: 34px;
    color: var(--as-ink);
    background: var(--ui-surface-3);
    border: 1px solid var(--ui-line);
    border-radius: 8px;
}

    .daily-page-button.active[b-wrdfw20sar],
    .daily-page-button:hover:not(:disabled)[b-wrdfw20sar] {
        color: #fff;
        background: var(--as-orange);
        border-color: var(--as-orange);
    }

    .daily-page-button:disabled[b-wrdfw20sar] {
        cursor: not-allowed;
        opacity: .45;
    }

.empty-state[b-wrdfw20sar] {
    display: grid;
    justify-items: center;
    gap: .35rem;
    padding: 2rem 1rem;
    color: var(--as-muted);
}

    .empty-state strong[b-wrdfw20sar] {
        color: var(--as-ink);
    }

.empty-icon[b-wrdfw20sar] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: .45rem;
    color: var(--as-orange);
    background: var(--as-orange-soft);
    border-radius: 16px;
    font-size: 1.25rem;
}

.working-times-loading[b-wrdfw20sar] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: 230px;
    color: var(--as-muted);
}

.working-times-spinner[b-wrdfw20sar] {
    width: 24px;
    height: 24px;
    border: 3px solid var(--ui-brand-200);
    border-top-color: var(--as-orange);
    border-radius: 50%;
    animation: wt-spin-b-wrdfw20sar .8s linear infinite;
}

@keyframes wt-spin-b-wrdfw20sar {
    to {
        transform: rotate(360deg);
    }
}

/* Details modals */
.modal-backdrop-custom[b-wrdfw20sar] {
    position: fixed;
    z-index: 1050;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(13, 18, 28, .4);
    backdrop-filter: blur(5px);
}

.working-times-modal[b-wrdfw20sar],
.entry-modal[b-wrdfw20sar] {
    width: min(100%, 850px);
    max-height: 90vh;
    overflow: auto;
    background: #fff;
    border-radius: var(--as-radius);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
}

.entry-modal[b-wrdfw20sar] {
    width: min(100%, 620px);
}

.modal-header-custom[b-wrdfw20sar] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.3rem 1.45rem;
    color: var(--ui-ink);
    background: var(--ui-surface-2);
    border-bottom: 1px solid var(--ui-line);
}

    .modal-header-custom h3[b-wrdfw20sar] {
        margin: .25rem 0 0;
        color: var(--ui-ink);
        font-size: 1.25rem;
        font-weight: 800;
    }

.modal-eyebrow[b-wrdfw20sar] {
    color: var(--ui-brand-600);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .12em;
}

.modal-close-button[b-wrdfw20sar] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: rgba(255, 255, 255, .75);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 8px;
}

    .modal-close-button:hover[b-wrdfw20sar] {
        color: #fff;
        background: var(--as-orange);
    }

.modal-date[b-wrdfw20sar] {
    display: block;
    margin-top: .35rem;
    color: rgba(255, 255, 255, .62);
    font-size: .78rem;
}

.modal-summary[b-wrdfw20sar],
.entry-detail-grid[b-wrdfw20sar] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    padding: 1.25rem 1.45rem;
}

.modal-summary-item[b-wrdfw20sar],
.entry-detail-box[b-wrdfw20sar] {
    padding: .85rem;
    background: var(--ui-surface-2);
    border: 1px solid var(--as-line);
    border-radius: 10px;
}

    .modal-summary-item span[b-wrdfw20sar],
    .entry-detail-box span[b-wrdfw20sar] {
        display: block;
        color: var(--as-muted);
        font-size: .68rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .modal-summary-item strong[b-wrdfw20sar],
    .entry-detail-box strong[b-wrdfw20sar] {
        display: block;
        margin-top: .25rem;
        color: var(--as-orange-dark);
        font-size: 1rem;
    }

.entry-detail-grid[b-wrdfw20sar] {
    grid-template-columns: repeat(4, 1fr);
}

.entry-detail-box.highlight[b-wrdfw20sar] {
    background: var(--as-orange-soft);
    border-color: #ffd0b1;
}

.modal-table-wrapper[b-wrdfw20sar] {
    overflow-x: auto;
    padding: 0 1.45rem 1.45rem;
}

.modal-table[b-wrdfw20sar] {
    width: 100%;
    border-collapse: collapse;
}

    .modal-table th[b-wrdfw20sar] {
        color: var(--as-muted);
        font-size: .68rem;
        letter-spacing: .06em;
        text-align: left;
        text-transform: uppercase;
    }

    .modal-table th[b-wrdfw20sar],
    .modal-table td[b-wrdfw20sar] {
        padding: .7rem;
        border-bottom: 1px solid var(--as-line);
        white-space: nowrap;
    }

.entry-detail-site[b-wrdfw20sar] {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0 1.45rem 1.45rem;
    padding: .85rem 1rem;
    color: var(--as-orange-dark);
    background: var(--as-orange-soft);
    border: 1px solid #ffd0b1;
    border-radius: 10px;
}

@media (max-width: 1000px) {
    .working-times-summary-grid[b-wrdfw20sar] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .working-times-header[b-wrdfw20sar] {
        align-items: flex-start;
        flex-direction: column;
        padding: 1.35rem;
    }

    .working-times-header-actions[b-wrdfw20sar],
    .export-button[b-wrdfw20sar] {
        width: 100%;
    }

    .export-button[b-wrdfw20sar] {
        justify-content: center;
    }

    .working-times-filter-card[b-wrdfw20sar] {
        align-items: stretch;
        flex-direction: column;
    }

    .search-group[b-wrdfw20sar] {
        max-width: none;
    }

    .today-button[b-wrdfw20sar] {
        justify-content: center;
    }

    .working-times-summary-grid[b-wrdfw20sar] {
        grid-template-columns: 1fr;
    }

    .daily-search-card[b-wrdfw20sar] {
        align-items: stretch;
        flex-direction: column;
    }

    .daily-search-wrapper[b-wrdfw20sar] {
        max-width: none;
        width: 100%;
    }

    .modal-summary[b-wrdfw20sar],
    .entry-detail-grid[b-wrdfw20sar] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .modal-summary[b-wrdfw20sar],
    .entry-detail-grid[b-wrdfw20sar] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Baustellen.razor.rz.scp.css */
/*
   Assignments.razor.css
   Light design-system styles (tokens in wwwroot/app.css)
*/

:host[b-puqp2o4njf] {
    display: block;
    color: var(--as-ink);
}

    /* Page foundation */
    :host > div[b-puqp2o4njf] {
        max-width: 1440px;
        margin-inline: auto;
    }

.employee-header[b-puqp2o4njf] {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 2.25rem;
    margin-bottom: 1.5rem !important;
    overflow: hidden;
    color: var(--ui-ink);
    background: radial-gradient(120% 140% at 100% 0%, rgba(var(--ui-brand-rgb), .16) 0%, rgba(var(--ui-brand-rgb), .05) 32%, transparent 58%), radial-gradient(90% 120% at 0% 100%, rgba(99, 102, 241, .06), transparent 55%), var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    box-shadow: var(--ui-shadow);
}

    .employee-header[b-puqp2o4njf]::after {
        position: absolute;
        right: -55px;
        bottom: -90px;
        width: 220px;
        height: 220px;
        content: "";
        border: 38px solid rgba(var(--ui-brand-rgb), .07);
        border-radius: 50%;
    }

    .employee-header > div[b-puqp2o4njf],
    .employee-header > button[b-puqp2o4njf] {
        position: relative;
        z-index: 1;
    }

    .employee-header h3[b-puqp2o4njf] {
        margin: 0 0 .45rem;
        font-size: clamp(1.65rem, 2.4vw, 2.2rem);
        font-weight: 800;
        letter-spacing: -.04em;
    }

    .employee-header p[b-puqp2o4njf] {
        color: var(--ui-muted) !important;
        font-size: .95rem;
    }

/* Cards */
.modern-card[b-puqp2o4njf] {
    overflow: visible;
    background: var(--as-surface);
    border: 1px solid var(--as-line) !important;
    border-radius: var(--as-radius) !important;
    box-shadow: var(--as-shadow);
}

    .modern-card.overflow-hidden[b-puqp2o4njf] {
        overflow: hidden;
    }

    .modern-card .card-body[b-puqp2o4njf] {
        background: transparent;
    }

/* Buttons */
.btn[b-puqp2o4njf] {
    min-height: 42px;
    padding: .65rem 1rem;
    border-radius: 10px;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .01em;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

    .btn:hover:not(:disabled)[b-puqp2o4njf] {
        transform: translateY(-2px);
    }

    .btn:active:not(:disabled)[b-puqp2o4njf] {
        transform: translateY(0);
    }

.btn-primary[b-puqp2o4njf] {
    color: #fff !important;
    background: var(--as-orange) !important;
    border-color: var(--as-orange) !important;
    box-shadow: 0 8px 18px rgba(var(--ui-brand-rgb), .22);
}

    .btn-primary:hover:not(:disabled)[b-puqp2o4njf],
    .btn-primary:focus-visible[b-puqp2o4njf] {
        background: var(--as-orange-dark) !important;
        border-color: var(--as-orange-dark) !important;
        box-shadow: 0 10px 24px rgba(var(--ui-brand-rgb), .28);
    }

/* Hard override for themes that redefine Bootstrap .btn-primary */
button.btn.btn-primary[b-puqp2o4njf],
a.btn.btn-primary[b-puqp2o4njf] {
    color: #fff !important;
    background-color: var(--ui-brand) !important;
    background-image: none !important;
    border-color: var(--ui-brand) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}

    button.btn.btn-primary:hover:not(:disabled)[b-puqp2o4njf],
    button.btn.btn-primary:focus-visible[b-puqp2o4njf],
    a.btn.btn-primary:hover[b-puqp2o4njf],
    a.btn.btn-primary:focus-visible[b-puqp2o4njf] {
        color: #fff !important;
        background-color: var(--ui-brand-600) !important;
        border-color: var(--ui-brand-600) !important;
    }

.btn-secondary[b-puqp2o4njf] {
    color: var(--as-ink) !important;
    background: var(--ui-surface-3) !important;
    border-color: var(--ui-surface-3) !important;
}

    .btn-secondary:hover:not(:disabled)[b-puqp2o4njf] {
        background: var(--ui-line) !important;
        border-color: var(--ui-line) !important;
    }

.btn-outline-danger[b-puqp2o4njf] {
    color: var(--as-danger) !important;
    border-color: #fecdca !important;
    background: #fff !important;
}

    .btn-outline-danger:hover:not(:disabled)[b-puqp2o4njf] {
        background: var(--as-danger) !important;
        border-color: var(--as-danger) !important;
    }

.btn-sm[b-puqp2o4njf] {
    min-height: 34px;
    padding: .42rem .72rem;
    border-radius: 8px;
    font-size: .76rem;
}

.btn:disabled[b-puqp2o4njf] {
    cursor: not-allowed;
    opacity: .45;
    box-shadow: none;
}

/* Search */
.search-box[b-puqp2o4njf] {
    overflow: hidden;
    border: 1px solid var(--as-line);
    border-radius: 12px;
    background: var(--ui-surface-2);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .search-box:focus-within[b-puqp2o4njf] {
        background: #fff;
        border-color: var(--as-orange);
        box-shadow: 0 0 0 4px rgba(var(--ui-brand-rgb), .12);
    }

    .search-box .input-group-text[b-puqp2o4njf] {
        padding-inline: 1rem;
        color: var(--as-orange);
        background: transparent;
        border: 0;
        font-size: 1.35rem;
    }

    .search-box .form-control[b-puqp2o4njf] {
        border: 0;
        background: transparent;
        box-shadow: none;
    }

/* Forms */
.form-label[b-puqp2o4njf] {
    display: block;
    margin-bottom: .5rem;
    color: var(--as-ink);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.form-control[b-puqp2o4njf] {
    min-height: 46px;
    padding: .7rem .85rem;
    color: var(--as-ink);
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    font-size: .9rem;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .form-control[b-puqp2o4njf]::placeholder {
        color: var(--ui-subtle);
    }

    .form-control:focus[b-puqp2o4njf] {
        color: var(--as-ink);
        background: #fff;
        border-color: var(--as-orange);
        box-shadow: 0 0 0 4px rgba(var(--ui-brand-rgb), .12);
    }

textarea.form-control[b-puqp2o4njf] {
    min-height: 104px;
    resize: vertical;
}

/* Live search dropdowns */
.live-search-wrapper[b-puqp2o4njf] {
    position: relative;
}

.live-search-results[b-puqp2o4njf] {
    position: absolute;
    z-index: 20;
    top: calc(100% + .5rem);
    right: 0;
    left: 0;
    overflow: hidden;
    padding: .4rem;
    background: #fff;
    border: 1px solid var(--as-line);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(16, 24, 40, .16);
}

.live-search-result[b-puqp2o4njf] {
    display: flex;
    align-items: center;
    width: 100%;
    gap: .75rem;
    padding: .7rem .75rem;
    color: var(--as-ink);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 9px;
    transition: background .15s ease;
}

    .live-search-result:hover[b-puqp2o4njf],
    .live-search-result:focus-visible[b-puqp2o4njf] {
        background: var(--as-orange-soft);
        outline: none;
    }

.live-search-avatar[b-puqp2o4njf],
.employee-avatar[b-puqp2o4njf] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #fff;
    background: var(--as-dark);
    border-radius: 12px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .03em;
}

    .live-search-avatar.site-avatar[b-puqp2o4njf] {
        color: var(--as-dark);
        background: var(--as-orange-soft);
        border: 1px solid var(--ui-brand-200);
    }

.live-search-content[b-puqp2o4njf] {
    min-width: 0;
}

.live-search-title[b-puqp2o4njf] {
    overflow: hidden;
    font-size: .88rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-search-subtitle[b-puqp2o4njf] {
    margin-top: .18rem;
    color: var(--as-muted);
    font-size: .75rem;
}

.live-search-empty[b-puqp2o4njf] {
    padding: 1rem;
    color: var(--as-muted);
    font-size: .82rem;
    text-align: center;
}

.selected-info[b-puqp2o4njf] {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .65rem;
    padding: .55rem .7rem;
    color: var(--as-dark);
    background: var(--as-orange-soft);
    border: 1px solid var(--ui-brand-200);
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 700;
}

.selected-check[b-puqp2o4njf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    color: #fff;
    background: var(--as-orange);
    border-radius: 50%;
    font-size: .72rem;
}

.selected-remove[b-puqp2o4njf] {
    width: 26px;
    height: 26px;
    margin-left: auto;
    color: var(--as-orange-dark);
    background: transparent;
    border: 0;
    border-radius: 50%;
    font-size: 1.15rem;
    line-height: 1;
}

    .selected-remove:hover[b-puqp2o4njf] {
        background: rgba(var(--ui-brand-rgb), .14);
    }

/* Alerts */
.alert[b-puqp2o4njf] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border: 0;
    border-left: 4px solid var(--as-orange);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(16, 24, 40, .06);
}

.alert-warning[b-puqp2o4njf] {
    color: var(--ui-warning-700);
    background: var(--ui-warning-50);
}

.alert-danger[b-puqp2o4njf] {
    color: var(--ui-danger-700);
    background: var(--ui-danger-50);
    border-left-color: var(--as-danger);
}

.alert-success[b-puqp2o4njf] {
    color: var(--ui-success-700);
    background: var(--ui-success-50);
    border-left-color: var(--ui-success);
}

/* Table */
.table-modern[b-puqp2o4njf] {
    margin: 0;
    --bs-table-bg: transparent;
}

    .table-modern thead th[b-puqp2o4njf] {
        padding: 1rem 1.25rem;
        color: var(--ui-muted);
        background: var(--ui-surface-2);
        border-bottom: 1px solid var(--as-line);
        font-size: .7rem;
        font-weight: 850;
        letter-spacing: .09em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .table-modern tbody td[b-puqp2o4njf] {
        padding: 1.1rem 1.25rem;
        color: var(--as-ink);
        border-bottom: 1px solid var(--ui-surface-3);
        font-size: .87rem;
        vertical-align: middle;
    }

    .table-modern tbody tr[b-puqp2o4njf] {
        transition: background .18s ease;
    }

        .table-modern tbody tr:hover[b-puqp2o4njf] {
            background: var(--ui-brand-50);
        }

        .table-modern tbody tr:last-child td[b-puqp2o4njf] {
            border-bottom: 0;
        }

.assignment-date[b-puqp2o4njf] {
    color: var(--as-ink);
    font-weight: 800;
    white-space: nowrap;
}

.assignment-time[b-puqp2o4njf] {
    margin-top: .3rem;
    color: var(--as-orange-dark);
    font-size: .75rem;
    font-weight: 750;
    white-space: nowrap;
}

.employee-avatar[b-puqp2o4njf] {
    width: 42px;
    height: 42px;
    color: #fff !important;
    background: linear-gradient(145deg, var(--ui-brand-400), var(--ui-brand-600)) !important;
    background-image: linear-gradient(145deg, var(--ui-brand-400), var(--ui-brand-600)) !important;
    border: 2px solid #fff;
    box-shadow: 0 6px 13px rgba(var(--ui-brand-rgb), .18);
}

.table-modern .fw-semibold[b-puqp2o4njf] {
    font-weight: 750 !important;
}

.table-modern small[b-puqp2o4njf] {
    display: inline-block;
    margin-top: .22rem;
    font-size: .74rem;
}

/* Empty state and pagination */
.empty-state[b-puqp2o4njf] {
    padding: 1.75rem 1rem;
}

.empty-state-icon[b-puqp2o4njf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: .9rem;
    color: var(--as-orange);
    background: var(--as-orange-soft);
    border-radius: 18px;
    font-size: 1.7rem;
}

.empty-state h6[b-puqp2o4njf] {
    margin-bottom: .3rem;
    font-weight: 800;
}

.pagination-container[b-puqp2o4njf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--ui-surface-2);
    border-top: 1px solid var(--as-line);
}

    .pagination-container .btn[b-puqp2o4njf] {
        min-width: 35px;
    }

/* Bootstrap utility refinement inside this component */
.text-muted[b-puqp2o4njf] {
    color: var(--as-muted) !important;
}

/* Keyboard accessibility */
button:focus-visible[b-puqp2o4njf],
a:focus-visible[b-puqp2o4njf],
input:focus-visible[b-puqp2o4njf],
textarea:focus-visible[b-puqp2o4njf] {
    outline: 3px solid rgba(var(--ui-brand-rgb), .28);
    outline-offset: 2px;
}

/* Responsive layout */
@media (max-width: 991.98px) {
    .employee-header[b-puqp2o4njf] {
        padding: 1.6rem;
    }

    .table-modern thead th[b-puqp2o4njf],
    .table-modern tbody td[b-puqp2o4njf] {
        padding-inline: .9rem;
    }
}

@media (max-width: 767.98px) {
    .employee-header[b-puqp2o4njf] {
        align-items: flex-start;
        flex-direction: column;
        padding: 1.35rem;
    }

        .employee-header .btn[b-puqp2o4njf] {
            width: 100%;
        }

    .modern-card .card-body[b-puqp2o4njf] {
        padding: 1rem !important;
    }

    .pagination-container[b-puqp2o4njf] {
        align-items: flex-start;
        flex-direction: column;
    }

        .pagination-container > div:last-child[b-puqp2o4njf] {
            width: 100%;
            justify-content: flex-end;
        }

    .table-modern[b-puqp2o4njf] {
        min-width: 900px;
    }
}

@media (max-width: 479.98px) {
    .employee-header h3[b-puqp2o4njf] {
        font-size: 1.5rem;
    }

    .d-flex.gap-2.mt-4[b-puqp2o4njf] {
        flex-direction: column;
    }

        .d-flex.gap-2.mt-4 .btn[b-puqp2o4njf] {
            width: 100%;
        }
}

@media (prefers-reduced-motion: reduce) {
    *[b-puqp2o4njf],
    *[b-puqp2o4njf]::before,
    *[b-puqp2o4njf]::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* =========================================================
   BAUSTELLEN PAGE EXTENSIONS
   ========================================================= */

.eyebrow[b-puqp2o4njf] {
    display: inline-block;
    margin-bottom: .45rem;
    color: var(--as-orange) !important;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .12em;
}

button.btn.btn-light[b-puqp2o4njf],
a.btn.btn-light[b-puqp2o4njf] {
    color: var(--as-ink) !important;
    background: var(--ui-surface-3) !important;
    background-image: none !important;
    border: 1px solid var(--ui-line) !important;
}


.modern-card input[readonly][b-puqp2o4njf],
.modern-card textarea[readonly][b-puqp2o4njf] {
    color: #454a51;
    background: var(--ui-bg);
    border-color: #e5e7ea;
}

    .modern-card input[readonly]:focus[b-puqp2o4njf],
    .modern-card textarea[readonly]:focus[b-puqp2o4njf] {
        box-shadow: none;
    }

.modern-card .border.rounded[b-puqp2o4njf] {
    min-height: 76px;
    background: #fff;
    border-color: var(--as-line) !important;
    border-radius: 12px !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

    .modern-card .border.rounded:hover[b-puqp2o4njf] {
        border-color: var(--ui-brand-200) !important;
        box-shadow: 0 10px 24px rgba(16, 24, 40, .07);
        transform: translateY(-2px);
    }

.employee-avatar[b-puqp2o4njf] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: #fff !important;
    background: linear-gradient(145deg, var(--ui-brand-400), var(--ui-brand-600)) !important;
    background-image: linear-gradient(145deg, var(--ui-brand-400), var(--ui-brand-600)) !important;
    border: 2px solid #fff;
    border-radius: 12px;
    box-shadow: 0 6px 13px rgba(var(--ui-brand-rgb), .2);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .03em;
}

.status-dot[b-puqp2o4njf] {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: .4rem;
    vertical-align: 1px;
    border-radius: 50%;
}

    .status-dot.active[b-puqp2o4njf] {
        background: var(--ui-success);
        box-shadow: 0 0 0 4px rgba(44, 166, 106, .14);
    }

    .status-dot.inactive[b-puqp2o4njf] {
        background: #9aa0a8;
        box-shadow: 0 0 0 4px rgba(154, 160, 168, .14);
    }

button.btn.btn-outline-primary[b-puqp2o4njf],
a.btn.btn-outline-primary[b-puqp2o4njf] {
    color: var(--as-orange-dark) !important;
    background: #fff !important;
    background-image: none !important;
    border-color: var(--ui-brand-200) !important;
}

    button.btn.btn-outline-primary:hover:not(:disabled)[b-puqp2o4njf],
    button.btn.btn-outline-primary:focus-visible[b-puqp2o4njf],
    a.btn.btn-outline-primary:hover[b-puqp2o4njf],
    a.btn.btn-outline-primary:focus-visible[b-puqp2o4njf] {
        background: var(--as-orange) !important;
        border-color: var(--as-orange) !important;
    }

.table-modern tbody td > strong[b-puqp2o4njf],
.table-modern tbody td > div > strong[b-puqp2o4njf] {
    font-weight: 750;
}

.table-modern tbody td:nth-child(4)[b-puqp2o4njf] {
    color: var(--as-orange-dark);
    font-weight: 700;
    white-space: nowrap;
}

.baustellen-pagination[b-puqp2o4njf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--ui-surface-2);
    border-top: 1px solid var(--as-line);
}

    .baustellen-pagination .btn[b-puqp2o4njf] {
        min-width: 38px;
    }

    .baustellen-pagination .btn-primary[b-puqp2o4njf] {
        color: #fff !important;
        background: var(--ui-brand) !important;
        background-image: none !important;
        border-color: var(--ui-brand) !important;
    }

        .baustellen-pagination .btn-primary:hover:not(:disabled)[b-puqp2o4njf] {
            background: var(--ui-brand-600) !important;
            border-color: var(--ui-brand-600) !important;
        }

.alert-light[b-puqp2o4njf] {
    color: var(--as-muted) !important;
    background: var(--ui-surface-2) !important;
    border: 1px solid var(--as-line) !important;
    border-left: 4px solid var(--as-orange) !important;
}

.form-check-input[b-puqp2o4njf] {
    width: 2.6em;
    height: 1.35em;
    cursor: pointer;
}

    .form-check-input:checked[b-puqp2o4njf] {
        background-color: var(--as-orange) !important;
        border-color: var(--as-orange) !important;
    }

    .form-check-input:focus[b-puqp2o4njf] {
        border-color: var(--as-orange);
        box-shadow: 0 0 0 4px rgba(var(--ui-brand-rgb), .12);
    }

@media (max-width: 767.98px) {
    .baustellen-pagination[b-puqp2o4njf] {
        align-items: flex-start;
        flex-direction: column;
    }

        .baustellen-pagination > div:last-child[b-puqp2o4njf] {
            width: 100%;
            justify-content: flex-end;
            flex-wrap: wrap;
        }

    .table-modern[b-puqp2o4njf] {
        min-width: 980px;
    }
}
/* /Components/Pages/ChefCalendar.razor.rz.scp.css */
/*
   ChefKalender.razor.css
   Light design-system styles (tokens in wwwroot/app.css)
*/

.calendar-page[b-fc6cotg4p3] {
    --ck-ink: var(--ui-ink);
    --ck-muted: var(--ui-muted);
    --ck-line: var(--ui-line);
    --ck-orange: var(--ui-brand);
    --ck-orange-dark: var(--ui-brand-600);
    --ck-orange-soft: var(--ui-brand-50);
    --ck-dark: var(--ui-ink);
    max-width: 1600px;
    margin-inline: auto;
    color: var(--ck-ink);
}

.calendar-header[b-fc6cotg4p3] {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 2.25rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
    color: var(--ui-ink);
    background: radial-gradient(120% 140% at 100% 0%, rgba(var(--ui-brand-rgb), .16) 0%, rgba(var(--ui-brand-rgb), .05) 32%, transparent 58%), radial-gradient(90% 120% at 0% 100%, rgba(99, 102, 241, .06), transparent 55%), var(--ui-surface);
    border-radius: 18px;
    box-shadow: var(--ui-shadow);
    border: 1px solid var(--ui-line);
}

    .calendar-header[b-fc6cotg4p3]::after {
        position: absolute;
        right: -55px;
        bottom: -95px;
        width: 225px;
        height: 225px;
        content: "";
        border: 38px solid rgba(var(--ui-brand-rgb), .07);
        border-radius: 50%;
    }

    .calendar-header > *[b-fc6cotg4p3] {
        position: relative;
        z-index: 1;
    }

    .calendar-header h2[b-fc6cotg4p3] {
        margin: 0 0 .45rem;
        color: var(--ui-ink);
        font-size: clamp(1.65rem, 2.4vw, 2.2rem);
        font-weight: 850;
        letter-spacing: -.04em;
    }

.calendar-subtitle[b-fc6cotg4p3] {
    color: rgba(255, 255, 255, .68);
    font-size: .95rem;
}

.date-navigation[b-fc6cotg4p3] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.nav-button[b-fc6cotg4p3],
.today-button[b-fc6cotg4p3],
.close-button[b-fc6cotg4p3],
.btn-secondary[b-fc6cotg4p3] {
    cursor: pointer;
    font-weight: 750;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.nav-button[b-fc6cotg4p3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--ck-ink);
    background: var(--ui-surface-3);
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    font-size: 1.35rem;
}

    .nav-button:hover[b-fc6cotg4p3] {
        color: #fff;
        background: var(--ck-orange);
        border-color: var(--ck-orange);
        transform: translateY(-2px);
    }

.date-input[b-fc6cotg4p3] {
    min-height: 40px;
    padding: .55rem .7rem;
    color: var(--ck-ink);
    background: #fff;
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    font-weight: 700;
}

    .date-input:focus[b-fc6cotg4p3] {
        border-color: var(--ck-orange);
        outline: 0;
        box-shadow: 0 0 0 4px rgba(var(--ui-brand-rgb), .14);
    }

.calendar-page .today-button[b-fc6cotg4p3] {
    min-height: 40px;
    padding: .55rem .9rem;
    color: var(--ck-orange-dark);
    background: #fff;
    border: 1px solid var(--ui-brand-200);
    border-radius: 10px;
}

    .calendar-page .today-button:hover[b-fc6cotg4p3] {
        color: #fff;
        background: var(--ck-orange);
        border-color: var(--ck-orange);
        transform: translateY(-2px);
    }

.calendar-wrapper[b-fc6cotg4p3] {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--ck-line);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(16, 24, 40, .07);
}

.calendar-grid-header[b-fc6cotg4p3],
.employee-row[b-fc6cotg4p3] {
    display: grid;
    grid-template-columns: 230px minmax(1200px, 1fr);
    min-width: 1430px;
}

.calendar-grid-header[b-fc6cotg4p3] {
    position: sticky;
    z-index: 5;
    top: 0;
    background: var(--ui-surface-2);
    border-bottom: 1px solid var(--ck-line);
}

.employee-header[b-fc6cotg4p3],
.employee-cell[b-fc6cotg4p3] {
    border-right: 1px solid var(--ck-line);
}

.employee-header[b-fc6cotg4p3] {
    display: flex;
    align-items: center;
    padding: 1rem 1.1rem;
    color: var(--ui-muted);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.time-header[b-fc6cotg4p3] {
    display: grid;
    grid-template-columns: repeat(24, minmax(50px, 1fr));
    min-height: 58px;
}

.hour-header[b-fc6cotg4p3] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-muted);
    border-right: 1px solid var(--ui-surface-3);
    font-size: .66rem;
    font-weight: 800;
}

.employee-row[b-fc6cotg4p3] {
    min-height: 86px;
    border-bottom: 1px solid black;
    transition: background .18s ease;
}

    .employee-row:hover[b-fc6cotg4p3] {
        background: black;
    }

.employee-cell[b-fc6cotg4p3] {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: .85rem 1.1rem;
    background: #fff;
}

.employee-name[b-fc6cotg4p3] {
    font-size: .85rem;
    font-weight: 800;
}

.calendar-page[b-fc6cotg4p3] {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.calendar-header[b-fc6cotg4p3] {
    width: 100%;
    max-width: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.calendar-wrapper[b-fc6cotg4p3] {
    width: 100%;
    max-width: none;
    min-width: 0;
    overflow-x: auto;
    box-sizing: border-box;
}

.employee-position[b-fc6cotg4p3] {
    margin-top: .25rem;
    color: var(--ck-muted);
    font-size: .73rem;
}

.timeline[b-fc6cotg4p3] {
    position: relative;
    min-height: 86px;
    overflow: visible;
    background-color: #fff;
    background-image: linear-gradient(to right, var(--ui-surface-3) 1px, transparent 1px);
    background-size: calc(100% / 24) 100%;
}

.hour-line[b-fc6cotg4p3] {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    width: 1px;
    pointer-events: none;
    background: rgba(231, 233, 237, .9);
}

.assignment[b-fc6cotg4p3] {
    position: absolute;
    z-index: 3;
    top: 14px;
    min-width: 32px;
    height: 58px;
    overflow: hidden;
    color: #fff;
    cursor: grab;
    background: linear-gradient(135deg, #ff8a3b, var(--ui-brand-600));
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 10px;
    box-shadow: 0 7px 15px rgba(var(--ui-brand-rgb), .2);
    user-select: none;
    transition: filter .15s ease, box-shadow .15s ease;
}

    .assignment:active[b-fc6cotg4p3] {
        cursor: grabbing;
    }

    .assignment:hover[b-fc6cotg4p3] {
        z-index: 8;
        filter: brightness(.95);
        box-shadow: 0 10px 23px rgba(var(--ui-brand-rgb), .3);
    }

.assignment-content[b-fc6cotg4p3] {
    min-width: 0;
    padding: .52rem .65rem;
    pointer-events: none;
}

.assignment-title[b-fc6cotg4p3],
.assignment-time[b-fc6cotg4p3],
.assignment-duration[b-fc6cotg4p3],
.assignment-notes[b-fc6cotg4p3] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assignment-title[b-fc6cotg4p3] {
    font-size: .76rem;
    font-weight: 850;
}

.assignment-time[b-fc6cotg4p3] {
    margin-top: .17rem;
    color: rgba(255, 255, 255, .9);
    font-size: .67rem;
    font-weight: 700;
}

.assignment-duration[b-fc6cotg4p3] {
    margin-top: .12rem;
    color: rgba(255, 255, 255, .72);
    font-size: .62rem;
}

.assignment-notes[b-fc6cotg4p3] {
    margin-top: .1rem;
    color: rgba(255, 255, 255, .72);
    font-size: .59rem;
}

.resize-handle[b-fc6cotg4p3] {
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    width: 9px;
    cursor: ew-resize;
    background: rgba(255, 255, 255, .12);
    transition: background .15s ease;
}

    .resize-handle:hover[b-fc6cotg4p3] {
        background: rgba(255, 255, 255, .5);
    }

.resize-left[b-fc6cotg4p3] {
    left: 0;
    border-radius: 9px 0 0 9px;
}

.resize-right[b-fc6cotg4p3] {
    right: 0;
    border-radius: 0 9px 9px 0;
}

.modal-backdrop[b-fc6cotg4p3] {
    position: fixed;
    z-index: 1050;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(13, 18, 28, .4);
    backdrop-filter: blur(5px);
}

.details-modal[b-fc6cotg4p3] {
    width: min(100%, 570px);
    overflow: hidden;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
}

.modal-header[b-fc6cotg4p3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.35rem 1.45rem;
    color: var(--ui-ink);
    background: var(--ui-surface-2);
    border-bottom: 1px solid var(--ui-line);
}

.modal-subtitle[b-fc6cotg4p3] {
    color: var(--ui-brand-600);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.close-button[b-fc6cotg4p3] {
    width: 34px;
    height: 34px;
    color: rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 8px;
    font-size: 1.35rem;
    line-height: 1;
}

    .close-button:hover[b-fc6cotg4p3] {
        color: #fff;
        background: var(--ck-orange);
    }

.details-body[b-fc6cotg4p3] {
    padding: 1.35rem 1.45rem;
}

.detail-row[b-fc6cotg4p3] {
    display: grid;
    grid-template-columns: 125px 1fr;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--ck-line);
}

    .detail-row:last-child[b-fc6cotg4p3] {
        border-bottom: 0;
    }

.detail-label[b-fc6cotg4p3] {
    color: var(--ck-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.detail-value[b-fc6cotg4p3] {
    color: var(--ck-ink);
    font-size: .86rem;
    font-weight: 750;
}

.notes-value[b-fc6cotg4p3] {
    white-space: pre-wrap;
}

.modal-footer[b-fc6cotg4p3] {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.45rem;
    background: var(--ui-surface-2);
    border-top: 1px solid var(--ck-line);
}

.btn-secondary[b-fc6cotg4p3] {
    min-height: 40px;
    padding: .6rem 1rem;
    color: var(--ck-ink);
    background: var(--ui-surface-3);
    border: 1px solid var(--ui-line);
    border-radius: 9px;
}


.error-message[b-fc6cotg4p3] {
    position: fixed;
    z-index: 1100;
    right: 1.25rem;
    bottom: 1.25rem;
    max-width: min(420px, calc(100vw - 2.5rem));
    padding: .85rem 1rem;
    color: var(--ui-danger-700);
    background: var(--ui-danger-50);
    border: 1px solid #f1baba;
    border-left: 4px solid var(--ui-danger);
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(16, 24, 40, .16);
}

@media (max-width: 900px) {
    .calendar-header[b-fc6cotg4p3] {
        align-items: flex-start;
        flex-direction: column;
        padding: 1.35rem;
    }

    .date-navigation[b-fc6cotg4p3] {
        width: 100%;
    }

    .date-input[b-fc6cotg4p3] {
        flex: 1;
    }
}

@media (max-width: 560px) {
    .date-navigation[b-fc6cotg4p3] {
        flex-wrap: wrap;
    }

    .date-input[b-fc6cotg4p3] {
        min-width: 0;
        width: calc(100% - 96px);
    }

    .calendar-header .today-button[b-fc6cotg4p3] {
        width: 100%;
        order: 5;
    }

    .detail-row[b-fc6cotg4p3] {
        grid-template-columns: 1fr;
        gap: .35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-fc6cotg4p3],
    *[b-fc6cotg4p3]::before,
    *[b-fc6cotg4p3]::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}
/* /Components/Pages/CompanyPage.razor.rz.scp.css */
/*
   Company.razor.css
   Premium company settings and subscription management UI
*/

.company-page[b-14xl9bnpe1],
.page-hero[b-14xl9bnpe1],
.company-monogram[b-14xl9bnpe1],
.subscription-status[b-14xl9bnpe1],
.cancellation-confirm[b-14xl9bnpe1] {
    --co-ink: var(--ui-ink);
    --co-muted: var(--ui-muted);
    --co-line: var(--ui-line);
    --co-orange: var(--ui-brand);
    --co-orange-dark: var(--ui-brand-600);
    --co-orange-soft: var(--ui-brand-50);
}

/* This page is wrapped by the shared layout; target its unique blocks safely. */
.page-hero[b-14xl9bnpe1] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.7rem 2rem;
    overflow: hidden;
    color: var(--ui-ink);
    background: radial-gradient(120% 140% at 100% 0%, rgba(var(--ui-brand-rgb), .16) 0%, rgba(var(--ui-brand-rgb), .05) 32%, transparent 58%), radial-gradient(90% 120% at 0% 100%, rgba(99, 102, 241, .06), transparent 55%), var(--ui-surface);
    border-radius: 18px;
    box-shadow: var(--ui-shadow);
    border: 1px solid var(--ui-line);
}

    .page-hero[b-14xl9bnpe1]::after {
        position: absolute;
        right: -55px;
        bottom: -100px;
        width: 220px;
        height: 220px;
        content: "";
        border: 36px solid rgba(var(--ui-brand-rgb), .07);
        border-radius: 50%;
    }

    .page-hero > *[b-14xl9bnpe1] {
        position: relative;
        z-index: 1;
    }

    .page-hero h3[b-14xl9bnpe1] {
        margin: 0 0 .4rem;
        color: var(--ui-ink);
        font-size: clamp(1.55rem, 3vw, 2.25rem);
        font-weight: 850;
        letter-spacing: -.045em;
    }

    .page-hero p[b-14xl9bnpe1] {
        color: var(--ui-muted) !important;
    }

.company-monogram[b-14xl9bnpe1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    color: #fff;
    background: linear-gradient(145deg, #ff963f, var(--ui-brand-600));
    border: 2px solid rgba(255, 255, 255, .55);
    border-radius: 18px;
    box-shadow: 0 12px 25px rgba(0, 0, 0, .2);
    font-size: 1.55rem;
    font-weight: 900;
}

/* Cards and form */
.modern-card[b-14xl9bnpe1] {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--co-line) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .055) !important;
}

    .modern-card .card-body[b-14xl9bnpe1] {
        color: var(--co-ink);
    }

    .modern-card h2[b-14xl9bnpe1] {
        color: var(--co-ink);
        font-weight: 850;
        letter-spacing: -.035em;
    }

.form-label[b-14xl9bnpe1] {
    margin-bottom: .4rem;
    color: var(--co-ink);
    font-size: .74rem;
    font-weight: 800;
}

.form-control[b-14xl9bnpe1],
.form-select[b-14xl9bnpe1] {
    min-height: 44px;
    color: var(--co-ink) !important;
    background-color: #fff !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

    .form-control:focus[b-14xl9bnpe1],
    .form-select:focus[b-14xl9bnpe1] {
        border-color: var(--co-orange) !important;
        outline: 0;
        box-shadow: 0 0 0 4px rgba(var(--ui-brand-rgb), .12) !important;
    }

.btn-primary[b-14xl9bnpe1] {
    background: var(--co-orange) !important;
    background-image: none !important;
    border-color: var(--co-orange) !important;
    box-shadow: 0 7px 16px rgba(var(--ui-brand-rgb), .16);
}

    .btn-primary:hover[b-14xl9bnpe1] {
        border-color: var(--co-orange-dark) !important;
        transform: translateY(-1px);
    }

.btn-outline-primary[b-14xl9bnpe1] {
    color: var(--co-orange-dark) !important;
    border-color: #ffb184 !important;
}

    .btn-outline-primary:hover[b-14xl9bnpe1] {
        color: #fff !important;
        background: var(--co-orange) !important;
        border-color: var(--co-orange) !important;
    }

.alert[b-14xl9bnpe1] {
    border: 0;
    border-left: 4px solid var(--co-orange);
    border-radius: 10px;
}

.alert-success[b-14xl9bnpe1] {
    color: #17633c;
    background: #e8f7ee;
    border-left-color: var(--ui-success);
}

.alert-warning[b-14xl9bnpe1] {
    color: var(--ui-warning-700);
    background: var(--ui-warning-50);
}

.alert-danger[b-14xl9bnpe1] {
    color: var(--ui-danger-700);
    background: var(--ui-danger-50);
    border-left-color: var(--ui-danger);
}

/* Subscription */
.eyebrow[b-14xl9bnpe1] {
    color: var(--co-orange-dark) !important;
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .12em;
}

.subscription-status[b-14xl9bnpe1] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid;
    border-radius: 12px;
}

    .subscription-status.trial[b-14xl9bnpe1] {
        color: #9a4700;
        background: var(--ui-warning-50);
        border-color: #ffd692;
    }

    .subscription-status.active[b-14xl9bnpe1] {
        color: #17633c;
        background: #e8f7ee;
        border-color: #bde8cc;
    }

    .subscription-status.danger[b-14xl9bnpe1] {
        color: #8c2d36;
        background: #ffeaec;
        border-color: #ffc6ca;
    }

.subscription-status-icon[b-14xl9bnpe1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    color: #fff;
    background: var(--co-orange);
    border-radius: 11px;
}

.subscription-status.active .subscription-status-icon[b-14xl9bnpe1] {
    background: var(--ui-success);
}

.subscription-status.danger .subscription-status-icon[b-14xl9bnpe1] {
    background: var(--ui-danger);
}

.subscription-status strong[b-14xl9bnpe1] {
    display: block;
    color: inherit;
    font-size: .82rem;
    font-weight: 850;
}

.subscription-status .small[b-14xl9bnpe1] {
    margin-top: .18rem;
    color: inherit !important;
    opacity: .75;
    font-size: .7rem;
    line-height: 1.45;
}

/* Cancellation */
.danger-card[b-14xl9bnpe1] {
    overflow: hidden;
    background: #fff;
    border: 1px solid #ffc6ca !important;
    border-left: 4px solid var(--ui-danger) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 28px rgba(216, 58, 58, .06);
}

    .danger-card h2[b-14xl9bnpe1] {
        color: #8c2d36;
        font-weight: 850;
    }

    .danger-card .text-muted[b-14xl9bnpe1] {
        color: var(--co-muted) !important;
        line-height: 1.65;
    }

.btn-outline-danger[b-14xl9bnpe1] {
    color: #b52e38 !important;
    border-color: #ef9aa1 !important;
}

    .btn-outline-danger:hover[b-14xl9bnpe1] {
        color: #fff !important;
        background: var(--ui-danger) !important;
        border-color: var(--ui-danger) !important;
    }

.btn-danger[b-14xl9bnpe1] {
    color: #fff !important;
    background: var(--ui-danger) !important;
    border-color: var(--ui-danger) !important;
}

    .btn-danger:hover[b-14xl9bnpe1] {
        color: #fff !important;
        background: var(--ui-danger-700) !important;
        border-color: var(--ui-danger-700) !important;
    }

.cancellation-confirm[b-14xl9bnpe1] {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem;
    color: #8c2d36;
    background: #fff0f1;
    border: 1px solid #ffc6ca;
    border-radius: 11px;
}

.cancellation-confirm-icon[b-14xl9bnpe1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    color: #fff;
    background: var(--ui-danger);
    border-radius: 10px;
}

.cancellation-confirm strong[b-14xl9bnpe1] {
    display: block;
    font-size: .82rem;
}

.cancellation-confirm p[b-14xl9bnpe1] {
    margin-top: .25rem;
    color: #9b5960;
    font-size: .74rem;
    line-height: 1.5;
}

/* Keep helper copy readable inside cards */
.modern-card .text-muted[b-14xl9bnpe1],
.danger-card .text-muted[b-14xl9bnpe1] {
    color: var(--co-muted) !important;
}

@media (max-width: 767.98px) {
    .page-hero[b-14xl9bnpe1] {
        align-items: flex-start;
        padding: 1.35rem;
    }

    .company-monogram[b-14xl9bnpe1] {
        width: 50px;
        height: 50px;
        border-radius: 14px;
        font-size: 1.2rem;
    }
}
/* /Components/Pages/Datenschutz.razor.rz.scp.css */
/* =========================================================
   WEBOLAR - LEGAL PAGE
   ========================================================= */

.legal-page[b-f2d2lhbpzy] {
    width: 100%;
    min-height: 100vh;
    background: var(--ui-bg);
    padding: 40px 20px 70px;
    color: var(--ui-ink);
}

.legal-container[b-f2d2lhbpzy] {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
}


/* =========================================================
   BACK
   ========================================================= */

.legal-back[b-f2d2lhbpzy] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ui-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 28px;
    transition: color .2s ease;
}

    .legal-back:hover[b-f2d2lhbpzy] {
        color: var(--ui-brand);
    }


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

.legal-header[b-f2d2lhbpzy] {
    margin-bottom: 32px;
}

.legal-eyebrow[b-f2d2lhbpzy] {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--ui-brand);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.legal-header h1[b-f2d2lhbpzy] {
    margin: 0;
    font-size: 38px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -1px;
}

.legal-header p[b-f2d2lhbpzy] {
    max-width: 650px;
    margin: 14px 0 0;
    color: var(--ui-muted);
    font-size: 15px;
    line-height: 1.65;
}


/* =========================================================
   CARD
   ========================================================= */

.legal-card[b-f2d2lhbpzy] {
    background: #fff;
    border: 1px solid var(--ui-line);
    border-radius: 16px;
    padding: 26px 28px;
    margin-bottom: 16px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .035);
}

    .legal-card p[b-f2d2lhbpzy] {
        margin: 0 0 13px;
        color: var(--ui-text);
        font-size: 14px;
        line-height: 1.75;
    }

        .legal-card p:last-child[b-f2d2lhbpzy] {
            margin-bottom: 0;
        }


/* =========================================================
   SECTION TITLE
   ========================================================= */

.legal-section-title[b-f2d2lhbpzy] {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 20px;
}

.legal-icon[b-f2d2lhbpzy] {
    width: 42px;
    min-width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--ui-brand-50);
    color: var(--ui-brand);
    font-size: 18px;
}

.legal-section-title > div:last-child[b-f2d2lhbpzy] {
    min-width: 0;
}

.legal-section-title span[b-f2d2lhbpzy] {
    display: block;
    margin-bottom: 2px;
    color: var(--ui-brand);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.legal-section-title h2[b-f2d2lhbpzy] {
    margin: 0;
    color: var(--ui-ink);
    font-size: 18px;
    font-weight: 700;
}


/* =========================================================
   COMPANY
   ========================================================= */

.legal-company[b-f2d2lhbpzy] {
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    padding: 18px;
}

    .legal-company > strong[b-f2d2lhbpzy] {
        display: block;
        margin-bottom: 12px;
        font-size: 17px;
        color: var(--ui-ink);
    }

.legal-company-row[b-f2d2lhbpzy] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
    color: var(--ui-text);
    font-size: 13px;
    line-height: 1.55;
}

    .legal-company-row i[b-f2d2lhbpzy] {
        width: 18px;
        min-width: 18px;
        color: var(--ui-brand);
        margin-top: 2px;
    }

    .legal-company-row a[b-f2d2lhbpzy] {
        color: var(--ui-text);
        text-decoration: none;
    }

        .legal-company-row a:hover[b-f2d2lhbpzy] {
            color: var(--ui-brand);
        }


/* =========================================================
   HIGHLIGHT
   ========================================================= */

.legal-highlight[b-f2d2lhbpzy] {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 18px;
    padding: 15px;
    border-radius: 11px;
    background: var(--ui-brand-50);
    border: 1px solid var(--ui-brand-200);
}

    .legal-highlight > i[b-f2d2lhbpzy] {
        color: var(--ui-brand);
        font-size: 18px;
        margin-top: 2px;
    }

    .legal-highlight strong[b-f2d2lhbpzy] {
        display: block;
        margin-bottom: 4px;
        color: var(--ui-ink-2);
        font-size: 13px;
    }

    .legal-highlight p[b-f2d2lhbpzy] {
        font-size: 13px;
    }


/* =========================================================
   CONTACT
   ========================================================= */

.legal-contact-box[b-f2d2lhbpzy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
}

    .legal-contact-box > div[b-f2d2lhbpzy] {
        padding: 14px 16px;
        border: 1px solid var(--ui-line);
        border-radius: 10px;
        background: var(--ui-surface-2);
    }

    .legal-contact-box span[b-f2d2lhbpzy] {
        display: block;
        margin-bottom: 4px;
        color: var(--ui-muted);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .6px;
    }

    .legal-contact-box a[b-f2d2lhbpzy] {
        color: var(--ui-ink-2);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
    }

        .legal-contact-box a:hover[b-f2d2lhbpzy] {
            color: var(--ui-brand);
        }


/* =========================================================
   LEGAL LINKS
   ========================================================= */

.legal-links[b-f2d2lhbpzy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legal-link[b-f2d2lhbpzy] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 14px;
    border: 1px solid var(--ui-line);
    border-radius: 11px;
    color: var(--ui-ink);
    text-decoration: none;
    transition: all .2s ease;
}

    .legal-link:hover[b-f2d2lhbpzy] {
        border-color: var(--ui-brand-200);
        background: var(--ui-brand-50);
        transform: translateY(-1px);
    }

.legal-link-icon[b-f2d2lhbpzy] {
    width: 38px;
    min-width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--ui-brand-50);
    color: var(--ui-brand);
}

.legal-link > div:nth-child(2)[b-f2d2lhbpzy] {
    flex: 1;
}

.legal-link strong[b-f2d2lhbpzy] {
    display: block;
    font-size: 13px;
    font-weight: 650;
}

.legal-link span[b-f2d2lhbpzy] {
    display: block;
    margin-top: 2px;
    color: var(--ui-muted);
    font-size: 11px;
}

.legal-link > i:last-child[b-f2d2lhbpzy] {
    color: var(--ui-subtle);
    font-size: 13px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.legal-footer[b-f2d2lhbpzy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 4px 0;
    color: var(--ui-muted);
    font-size: 11px;
}

    .legal-footer > div[b-f2d2lhbpzy] {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

        .legal-footer > div:last-child[b-f2d2lhbpzy] {
            text-align: right;
        }

    .legal-footer strong[b-f2d2lhbpzy] {
        color: var(--ui-ink-2);
        font-size: 13px;
    }


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .legal-page[b-f2d2lhbpzy] {
        padding: 24px 12px 45px;
    }

    .legal-back[b-f2d2lhbpzy] {
        margin-bottom: 22px;
    }

    .legal-header[b-f2d2lhbpzy] {
        margin-bottom: 24px;
    }

        .legal-header h1[b-f2d2lhbpzy] {
            font-size: 29px;
            letter-spacing: -.6px;
        }

        .legal-header p[b-f2d2lhbpzy] {
            font-size: 13px;
            margin-top: 10px;
        }

    .legal-card[b-f2d2lhbpzy] {
        padding: 20px 17px;
        border-radius: 13px;
        margin-bottom: 12px;
    }

    .legal-section-title[b-f2d2lhbpzy] {
        margin-bottom: 16px;
    }

        .legal-section-title h2[b-f2d2lhbpzy] {
            font-size: 16px;
        }

    .legal-icon[b-f2d2lhbpzy] {
        width: 38px;
        min-width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .legal-card p[b-f2d2lhbpzy] {
        font-size: 13px;
        line-height: 1.7;
    }

    .legal-company[b-f2d2lhbpzy] {
        padding: 14px;
    }

    .legal-contact-box[b-f2d2lhbpzy] {
        grid-template-columns: 1fr;
    }

    .legal-footer[b-f2d2lhbpzy] {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 15px;
    }

        .legal-footer > div:last-child[b-f2d2lhbpzy] {
            text-align: left;
        }
}


/* =========================================================
   GOOGLE ANALYTICS / COOKIE-EINSTELLUNGEN
   ========================================================= */

.legal-card h3[b-f2d2lhbpzy] {
    margin: 22px 0 10px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ui-ink);
}

.legal-inline-link[b-f2d2lhbpzy] {
    color: var(--ui-brand-600);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-settings-link[b-f2d2lhbpzy] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}
/* /Components/Pages/EmployeeCalendar.razor.rz.scp.css */
/*
   ChefKalender.razor.css
   Light design-system styles (tokens in wwwroot/app.css)
*/

.calendar-page[b-fuqnkmjhaz] {
    --ck-ink: var(--ui-ink);
    --ck-muted: var(--ui-muted);
    --ck-line: var(--ui-line);
    --ck-orange: var(--ui-brand);
    --ck-orange-dark: var(--ui-brand-600);
    --ck-orange-soft: var(--ui-brand-50);
    --ck-dark: var(--ui-ink);
    max-width: 1600px;
    margin-inline: auto;
    color: var(--ck-ink);
}

.calendar-header[b-fuqnkmjhaz] {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 2.25rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
    color: var(--ui-ink);
    min-height: 225px;
    background: radial-gradient(120% 140% at 100% 0%, rgba(var(--ui-brand-rgb), .16) 0%, rgba(var(--ui-brand-rgb), .05) 32%, transparent 58%), radial-gradient(90% 120% at 0% 100%, rgba(99, 102, 241, .06), transparent 55%), var(--ui-surface);
    border-radius: 18px;
    box-shadow: var(--ui-shadow);
    border: 1px solid var(--ui-line);
}

    .calendar-header[b-fuqnkmjhaz]::after {
        position: absolute;
        right: -55px;
        bottom: -95px;
        width: 225px;
        height: 325px;
        content: "";
        border: 38px solid rgba(var(--ui-brand-rgb), .07);
        border-radius: 50%;
    }

    .calendar-header > *[b-fuqnkmjhaz] {
        position: relative;
        z-index: 1;
    }

    .calendar-header h2[b-fuqnkmjhaz] {
        margin: 0 0 .45rem;
        color: var(--ui-ink);
        font-size: clamp(1.65rem, 2.4vw, 2.2rem);
        font-weight: 850;
        letter-spacing: -.04em;
    }

.calendar-subtitle[b-fuqnkmjhaz] {
    color: rgba(255, 255, 255, .68);
    font-size: .95rem;
}

.date-navigation[b-fuqnkmjhaz] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.nav-button[b-fuqnkmjhaz],
.today-button[b-fuqnkmjhaz],
.close-button[b-fuqnkmjhaz],
.btn-secondary[b-fuqnkmjhaz] {
    cursor: pointer;
    font-weight: 750;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.nav-button[b-fuqnkmjhaz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--ck-ink);
    background: var(--ui-surface-3);
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    font-size: 1.35rem;
}

    .nav-button:hover[b-fuqnkmjhaz] {
        color: #fff;
        background: var(--ck-orange);
        border-color: var(--ck-orange);
        transform: translateY(-2px);
    }

.date-input[b-fuqnkmjhaz] {
    min-height: 40px;
    padding: .55rem .7rem;
    color: var(--ck-ink);
    background: #fff;
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    font-weight: 700;
}

    .date-input:focus[b-fuqnkmjhaz] {
        border-color: var(--ck-orange);
        outline: 0;
        box-shadow: 0 0 0 4px rgba(var(--ui-brand-rgb), .14);
    }

.calendar-page .today-button[b-fuqnkmjhaz] {
    min-height: 40px;
    padding: .55rem .9rem;
    color: var(--ck-orange-dark);
    background: #fff;
    border: 1px solid var(--ui-brand-200);
    border-radius: 10px;
}

    .calendar-page .today-button:hover[b-fuqnkmjhaz] {
        color: #fff;
        background: var(--ck-orange);
        border-color: var(--ck-orange);
        transform: translateY(-2px);
    }

.calendar-wrapper[b-fuqnkmjhaz] {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--ck-line);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(16, 24, 40, .07);
}

.calendar-grid-header[b-fuqnkmjhaz],
.employee-row[b-fuqnkmjhaz] {
    display: grid;
    grid-template-columns: 230px minmax(1200px, 1fr);
    min-width: 1430px;
}

.calendar-grid-header[b-fuqnkmjhaz] {
    position: sticky;
    z-index: 5;
    top: 0;
    background: var(--ui-surface-2);
    border-bottom: 1px solid var(--ck-line);
}

.employee-header[b-fuqnkmjhaz],
.employee-cell[b-fuqnkmjhaz] {
    border-right: 1px solid var(--ck-line);
}

.employee-header[b-fuqnkmjhaz] {
    display: flex;
    align-items: center;
    padding: 1rem 1.1rem;
    color: var(--ui-muted);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.time-header[b-fuqnkmjhaz] {
    display: grid;
    grid-template-columns: repeat(24, minmax(50px, 1fr));
    min-height: 58px;
}

.hour-header[b-fuqnkmjhaz] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-muted);
    border-right: 1px solid var(--ui-surface-3);
    font-size: .66rem;
    font-weight: 800;
}

.employee-row[b-fuqnkmjhaz] {
    min-height: 86px;
    border-bottom: 1px solid var(--ui-surface-3);
    transition: background .18s ease;
}

    .employee-row:hover[b-fuqnkmjhaz] {
        background: var(--ui-brand-50);
    }

.employee-cell[b-fuqnkmjhaz] {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: .85rem 1.1rem;
    background: #fff;
}

.employee-name[b-fuqnkmjhaz] {
    font-size: .85rem;
    font-weight: 800;
}

.employee-position[b-fuqnkmjhaz] {
    margin-top: .25rem;
    color: var(--ck-muted);
    font-size: .73rem;
}

.timeline[b-fuqnkmjhaz] {
    position: relative;
    min-height: 86px;
    overflow: visible;
    background-color: #fff;
    background-image: linear-gradient(to right, var(--ui-surface-3) 1px, transparent 1px);
    background-size: calc(100% / 24) 100%;
}

.hour-line[b-fuqnkmjhaz] {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    width: 1px;
    pointer-events: none;
    background: rgba(231, 233, 237, .9);
}

.assignment[b-fuqnkmjhaz] {
    position: absolute;
    z-index: 3;
    top: 14px;
    min-width: 32px;
    height: 58px;
    overflow: hidden;
    color: #fff;
    cursor: grab;
    background: linear-gradient(135deg, #ff8a3b, var(--ui-brand-600));
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 10px;
    box-shadow: 0 7px 15px rgba(var(--ui-brand-rgb), .2);
    user-select: none;
    transition: filter .15s ease, box-shadow .15s ease;
}

    .assignment:active[b-fuqnkmjhaz] {
        cursor: grabbing;
    }

    .assignment:hover[b-fuqnkmjhaz] {
        z-index: 8;
        filter: brightness(.95);
        box-shadow: 0 10px 23px rgba(var(--ui-brand-rgb), .3);
    }

.assignment-content[b-fuqnkmjhaz] {
    min-width: 0;
    padding: .52rem .65rem;
    pointer-events: none;
}

.assignment-title[b-fuqnkmjhaz],
.assignment-time[b-fuqnkmjhaz],
.assignment-duration[b-fuqnkmjhaz],
.assignment-notes[b-fuqnkmjhaz] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assignment-title[b-fuqnkmjhaz] {
    font-size: .76rem;
    font-weight: 850;
}

.assignment-time[b-fuqnkmjhaz] {
    margin-top: .17rem;
    color: rgba(255, 255, 255, .9);
    font-size: .67rem;
    font-weight: 700;
}

.assignment-duration[b-fuqnkmjhaz] {
    margin-top: .12rem;
    color: rgba(255, 255, 255, .72);
    font-size: .62rem;
}

.assignment-notes[b-fuqnkmjhaz] {
    margin-top: .1rem;
    color: rgba(255, 255, 255, .72);
    font-size: .59rem;
}

.resize-handle[b-fuqnkmjhaz] {
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    width: 9px;
    cursor: ew-resize;
    background: rgba(255, 255, 255, .12);
    transition: background .15s ease;
}

    .resize-handle:hover[b-fuqnkmjhaz] {
        background: rgba(255, 255, 255, .5);
    }

.resize-left[b-fuqnkmjhaz] {
    left: 0;
    border-radius: 9px 0 0 9px;
}

.resize-right[b-fuqnkmjhaz] {
    right: 0;
    border-radius: 0 9px 9px 0;
}

.modal-backdrop[b-fuqnkmjhaz] {
    position: fixed;
    z-index: 1050;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(13, 18, 28, .4);
    backdrop-filter: blur(5px);
}

.details-modal[b-fuqnkmjhaz] {
    width: min(100%, 570px);
    overflow: hidden;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
}

.modal-header[b-fuqnkmjhaz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.35rem 1.45rem;
    color: var(--ui-ink);
    background: var(--ui-surface-2);
    border-bottom: 1px solid var(--ui-line);
}

.modal-subtitle[b-fuqnkmjhaz] {
    color: var(--ui-brand-600);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.close-button[b-fuqnkmjhaz] {
    width: 34px;
    height: 34px;
    color: rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 8px;
    font-size: 1.35rem;
    line-height: 1;
}

    .close-button:hover[b-fuqnkmjhaz] {
        color: #fff;
        background: var(--ck-orange);
    }

.details-body[b-fuqnkmjhaz] {
    padding: 1.35rem 1.45rem;
}

.detail-row[b-fuqnkmjhaz] {
    display: grid;
    grid-template-columns: 125px 1fr;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--ck-line);
}

    .detail-row:last-child[b-fuqnkmjhaz] {
        border-bottom: 0;
    }

.detail-label[b-fuqnkmjhaz] {
    color: var(--ck-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.detail-value[b-fuqnkmjhaz] {
    color: var(--ck-ink);
    font-size: .86rem;
    font-weight: 750;
}

.notes-value[b-fuqnkmjhaz] {
    white-space: pre-wrap;
}

.modal-footer[b-fuqnkmjhaz] {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.45rem;
    background: var(--ui-surface-2);
    border-top: 1px solid var(--ck-line);
}

.btn-secondary[b-fuqnkmjhaz] {
    min-height: 40px;
    padding: .6rem 1rem;
    color: var(--ck-ink);
    background: var(--ui-surface-3);
    border: 1px solid var(--ui-line);
    border-radius: 9px;
}

.error-message[b-fuqnkmjhaz] {
    position: fixed;
    z-index: 1100;
    right: 1.25rem;
    bottom: 1.25rem;
    max-width: min(420px, calc(100vw - 2.5rem));
    padding: .85rem 1rem;
    color: var(--ui-danger-700);
    background: var(--ui-danger-50);
    border: 1px solid #f1baba;
    border-left: 4px solid var(--ui-danger);
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(16, 24, 40, .16);
}

@media (max-width: 900px) {
    .calendar-header[b-fuqnkmjhaz] {
        align-items: flex-start;
        flex-direction: column;
        padding: 1.35rem;
    }

    .date-navigation[b-fuqnkmjhaz] {
        width: 100%;
    }

    .date-input[b-fuqnkmjhaz] {
        flex: 1;
    }
}

@media (max-width: 560px) {
    .date-navigation[b-fuqnkmjhaz] {
        flex-wrap: wrap;
    }

    .date-input[b-fuqnkmjhaz] {
        min-width: 0;
        width: calc(100% - 96px);
    }

    .calendar-header .today-button[b-fuqnkmjhaz] {
        width: 100%;
        order: 5;
    }

    .detail-row[b-fuqnkmjhaz] {
        grid-template-columns: 1fr;
        gap: .35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-fuqnkmjhaz],
    *[b-fuqnkmjhaz]::before,
    *[b-fuqnkmjhaz]::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================
   MITARBEITER KALENDER EXTENSIONS
   ========================================================= */

.header-controls[b-fuqnkmjhaz] {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.employee-search-container[b-fuqnkmjhaz] {
    position: relative;
    width: 240px;
}

.search-input[b-fuqnkmjhaz] {
    width: 100%;
    min-height: 40px;
    padding: .6rem .8rem;
    color: var(--ck-ink);
    background: #fff;
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    font-size: .82rem;
}

    .search-input:focus[b-fuqnkmjhaz] {
        border-color: var(--ck-orange);
        outline: 0;
        box-shadow: 0 0 0 4px rgba(var(--ui-brand-rgb), .14);
    }

.search-dropdown-menu[b-fuqnkmjhaz] {
    position: absolute;
    z-index: 30;
    top: calc(100% + .45rem);
    right: 0;
    left: 0;
    overflow: hidden;
    padding: .35rem;
    background: #fff;
    border: 1px solid var(--ck-line);
    border-radius: 11px;
    box-shadow: 0 18px 40px rgba(16, 24, 40, .18);
}

.dropdown-item[b-fuqnkmjhaz] {
    padding: .65rem .7rem;
    color: var(--ck-ink);
    border-radius: 8px;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 700;
}

    .dropdown-item:hover[b-fuqnkmjhaz],
    .dropdown-item.selected[b-fuqnkmjhaz] {
        color: var(--ck-orange-dark);
        background: var(--ck-orange-soft);
    }

    .dropdown-item.text-muted[b-fuqnkmjhaz] {
        color: var(--ck-muted) !important;
        cursor: default;
    }

.info-banner[b-fuqnkmjhaz] {
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
    color: var(--ui-warning-700);
    background: var(--ui-warning-50);
    border: 1px solid #ffd692;
    border-left: 4px solid var(--ck-orange);
    border-radius: 10px;
    font-size: .86rem;
    font-weight: 700;
}

.calendar-page > .alert[b-fuqnkmjhaz] {
    margin-bottom: 1rem;
    color: var(--ui-warning-700);
    background: var(--ui-warning-50);
    border: 0;
    border-left: 4px solid var(--ck-orange);
    border-radius: 10px;
}

@media (max-width: 900px) {
    .header-controls[b-fuqnkmjhaz] {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .employee-search-container[b-fuqnkmjhaz] {
        width: 100%;
    }

    .header-controls .date-navigation[b-fuqnkmjhaz] {
        width: 100%;
    }
}
/* =========================================================
   COMPACT HEADER
   ========================================================= */

.calendar-page .calendar-header[b-fuqnkmjhaz] {
    min-height: 175px;
    padding: 1.35rem 2.25rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

    /* Насловот малку погоре */
    .calendar-page .calendar-header > div:first-child[b-fuqnkmjhaz] {
        padding-top: 0.35rem;
    }

    /* Search + date controls погоре */
    .calendar-page .calendar-header .header-controls[b-fuqnkmjhaz] {
        padding-top: 0.15rem;
    }

/* Search */
.calendar-page .employee-search-container[b-fuqnkmjhaz] {
    width: 240px;
}

    .calendar-page .employee-search-container .search-input[b-fuqnkmjhaz] {
        min-height: 44px;
        height: 44px;
    }

/* Date controls */
.calendar-page .date-navigation[b-fuqnkmjhaz] {
    margin-top: 0;
}

.calendar-page .nav-button[b-fuqnkmjhaz],
.calendar-page .today-button[b-fuqnkmjhaz],
.calendar-page .date-input[b-fuqnkmjhaz] {
    height: 44px;
    min-height: 44px;
}

.calendar-page[b-fuqnkmjhaz] {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.calendar-wrapper[b-fuqnkmjhaz] {
    width: 100%;
    max-width: none;
    overflow-x: auto;
    box-sizing: border-box;
}

.calendar-grid-header[b-fuqnkmjhaz],
.employee-row[b-fuqnkmjhaz] {
    width: 100%;
    min-width: 0;
}
/* /Components/Pages/Employees.razor.rz.scp.css */
/*
   Assignments.razor.css
   Light design-system styles (tokens in wwwroot/app.css)
*/

:host[b-pf1omc2cke] {
    display: block;
    color: var(--as-ink);
}

    /* Page foundation */
    :host > div[b-pf1omc2cke] {
        max-width: 1440px;
        margin-inline: auto;
    }

.employee-header[b-pf1omc2cke] {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 2.25rem;
    margin-bottom: 1.5rem !important;
    overflow: hidden;
    color: var(--ui-ink);
    background: radial-gradient(120% 140% at 100% 0%, rgba(var(--ui-brand-rgb), .16) 0%, rgba(var(--ui-brand-rgb), .05) 32%, transparent 58%), radial-gradient(90% 120% at 0% 100%, rgba(99, 102, 241, .06), transparent 55%), var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    box-shadow: var(--ui-shadow);
}

    .employee-header[b-pf1omc2cke]::after {
        position: absolute;
        right: -55px;
        bottom: -90px;
        width: 220px;
        height: 220px;
        content: "";
        border: 38px solid rgba(var(--ui-brand-rgb), .07);
        border-radius: 50%;
    }

    .employee-header > div[b-pf1omc2cke],
    .employee-header > button[b-pf1omc2cke] {
        position: relative;
        z-index: 1;
    }

    .employee-header h3[b-pf1omc2cke] {
        margin: 0 0 .45rem;
        font-size: clamp(1.65rem, 2.4vw, 2.2rem);
        font-weight: 800;
        letter-spacing: -.04em;
    }

    .employee-header p[b-pf1omc2cke] {
        color: var(--ui-muted) !important;
        font-size: .95rem;
    }

/* Cards */
.modern-card[b-pf1omc2cke] {
    overflow: visible;
    background: var(--as-surface);
    border: 1px solid var(--as-line) !important;
    border-radius: var(--as-radius) !important;
    box-shadow: var(--as-shadow);
}

    .modern-card.overflow-hidden[b-pf1omc2cke] {
        overflow: hidden;
    }

    .modern-card .card-body[b-pf1omc2cke] {
        background: transparent;
    }

/* Buttons */
.btn[b-pf1omc2cke] {
    min-height: 42px;
    padding: .65rem 1rem;
    border-radius: 10px;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .01em;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

    .btn:hover:not(:disabled)[b-pf1omc2cke] {
        transform: translateY(-2px);
    }

    .btn:active:not(:disabled)[b-pf1omc2cke] {
        transform: translateY(0);
    }

.btn-primary[b-pf1omc2cke] {
    color: #fff !important;
    background: var(--as-orange) !important;
    border-color: var(--as-orange) !important;
    box-shadow: 0 8px 18px rgba(var(--ui-brand-rgb), .22);
}

    .btn-primary:hover:not(:disabled)[b-pf1omc2cke],
    .btn-primary:focus-visible[b-pf1omc2cke] {
        background: var(--as-orange-dark) !important;
        border-color: var(--as-orange-dark) !important;
        box-shadow: 0 10px 24px rgba(var(--ui-brand-rgb), .28);
    }

/* Hard override for themes that redefine Bootstrap .btn-primary */
button.btn.btn-primary[b-pf1omc2cke],
a.btn.btn-primary[b-pf1omc2cke] {
    color: #fff !important;
    background-color: var(--ui-brand) !important;
    background-image: none !important;
    border-color: var(--ui-brand) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}

    button.btn.btn-primary:hover:not(:disabled)[b-pf1omc2cke],
    button.btn.btn-primary:focus-visible[b-pf1omc2cke],
    a.btn.btn-primary:hover[b-pf1omc2cke],
    a.btn.btn-primary:focus-visible[b-pf1omc2cke] {
        color: #fff !important;
        background-color: var(--ui-brand-600) !important;
        border-color: var(--ui-brand-600) !important;
    }

.btn-secondary[b-pf1omc2cke] {
    color: var(--as-ink) !important;
    background: var(--ui-surface-3) !important;
    border-color: var(--ui-surface-3) !important;
}

    .btn-secondary:hover:not(:disabled)[b-pf1omc2cke] {
        background: var(--ui-line) !important;
        border-color: var(--ui-line) !important;
    }

.btn-outline-danger[b-pf1omc2cke] {
    color: var(--as-danger) !important;
    border-color: #fecdca !important;
    background: #fff !important;
}

    .btn-outline-danger:hover:not(:disabled)[b-pf1omc2cke] {
        background: var(--as-danger) !important;
        border-color: var(--as-danger) !important;
    }

.btn-sm[b-pf1omc2cke] {
    min-height: 34px;
    padding: .42rem .72rem;
    border-radius: 8px;
    font-size: .76rem;
}

.btn:disabled[b-pf1omc2cke] {
    cursor: not-allowed;
    opacity: .45;
    box-shadow: none;
}

/* Search */
.search-box[b-pf1omc2cke] {
    overflow: hidden;
    border: 1px solid var(--as-line);
    border-radius: 12px;
    background: var(--ui-surface-2);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .search-box:focus-within[b-pf1omc2cke] {
        background: #fff;
        border-color: var(--as-orange);
        box-shadow: 0 0 0 4px rgba(var(--ui-brand-rgb), .12);
    }

    .search-box .input-group-text[b-pf1omc2cke] {
        padding-inline: 1rem;
        color: var(--as-orange);
        background: transparent;
        border: 0;
        font-size: 1.35rem;
    }

    .search-box .form-control[b-pf1omc2cke] {
        border: 0;
        background: transparent;
        box-shadow: none;
    }

/* Forms */
.form-label[b-pf1omc2cke] {
    display: block;
    margin-bottom: .5rem;
    color: var(--as-ink);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.form-control[b-pf1omc2cke] {
    min-height: 46px;
    padding: .7rem .85rem;
    color: var(--as-ink);
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    font-size: .9rem;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .form-control[b-pf1omc2cke]::placeholder {
        color: var(--ui-subtle);
    }

    .form-control:focus[b-pf1omc2cke] {
        color: var(--as-ink);
        background: #fff;
        border-color: var(--as-orange);
        box-shadow: 0 0 0 4px rgba(var(--ui-brand-rgb), .12);
    }

textarea.form-control[b-pf1omc2cke] {
    min-height: 104px;
    resize: vertical;
}

/* Live search dropdowns */
.live-search-wrapper[b-pf1omc2cke] {
    position: relative;
}

.live-search-results[b-pf1omc2cke] {
    position: absolute;
    z-index: 20;
    top: calc(100% + .5rem);
    right: 0;
    left: 0;
    overflow: hidden;
    padding: .4rem;
    background: #fff;
    border: 1px solid var(--as-line);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(16, 24, 40, .16);
}

.live-search-result[b-pf1omc2cke] {
    display: flex;
    align-items: center;
    width: 100%;
    gap: .75rem;
    padding: .7rem .75rem;
    color: var(--as-ink);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 9px;
    transition: background .15s ease;
}

    .live-search-result:hover[b-pf1omc2cke],
    .live-search-result:focus-visible[b-pf1omc2cke] {
        background: var(--as-orange-soft);
        outline: none;
    }

.live-search-avatar[b-pf1omc2cke],
.employee-avatar[b-pf1omc2cke] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #fff;
    background: var(--as-dark);
    border-radius: 12px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .03em;
}

    .live-search-avatar.site-avatar[b-pf1omc2cke] {
        color: var(--as-dark);
        background: var(--as-orange-soft);
        border: 1px solid var(--ui-brand-200);
    }

.live-search-content[b-pf1omc2cke] {
    min-width: 0;
}

.live-search-title[b-pf1omc2cke] {
    overflow: hidden;
    font-size: .88rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-search-subtitle[b-pf1omc2cke] {
    margin-top: .18rem;
    color: var(--as-muted);
    font-size: .75rem;
}

.live-search-empty[b-pf1omc2cke] {
    padding: 1rem;
    color: var(--as-muted);
    font-size: .82rem;
    text-align: center;
}

.selected-info[b-pf1omc2cke] {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .65rem;
    padding: .55rem .7rem;
    color: var(--as-dark);
    background: var(--as-orange-soft);
    border: 1px solid var(--ui-brand-200);
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 700;
}

.selected-check[b-pf1omc2cke] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    color: #fff;
    background: var(--as-orange);
    border-radius: 50%;
    font-size: .72rem;
}

.selected-remove[b-pf1omc2cke] {
    width: 26px;
    height: 26px;
    margin-left: auto;
    color: var(--as-orange-dark);
    background: transparent;
    border: 0;
    border-radius: 50%;
    font-size: 1.15rem;
    line-height: 1;
}

    .selected-remove:hover[b-pf1omc2cke] {
        background: rgba(var(--ui-brand-rgb), .14);
    }

/* Alerts */
.alert[b-pf1omc2cke] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border: 0;
    border-left: 4px solid var(--as-orange);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(16, 24, 40, .06);
}

.alert-warning[b-pf1omc2cke] {
    color: var(--ui-warning-700);
    background: var(--ui-warning-50);
}

.alert-danger[b-pf1omc2cke] {
    color: var(--ui-danger-700);
    background: var(--ui-danger-50);
    border-left-color: var(--as-danger);
}

.alert-success[b-pf1omc2cke] {
    color: var(--ui-success-700);
    background: var(--ui-success-50);
    border-left-color: var(--ui-success);
}

/* Table */
.table-modern[b-pf1omc2cke] {
    margin: 0;
    --bs-table-bg: transparent;
}

    .table-modern thead th[b-pf1omc2cke] {
        padding: 1rem 1.25rem;
        color: var(--ui-muted);
        background: var(--ui-surface-2);
        border-bottom: 1px solid var(--as-line);
        font-size: .7rem;
        font-weight: 850;
        letter-spacing: .09em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .table-modern tbody td[b-pf1omc2cke] {
        padding: 1.1rem 1.25rem;
        color: var(--as-ink);
        border-bottom: 1px solid var(--ui-surface-3);
        font-size: .87rem;
        vertical-align: middle;
    }

    .table-modern tbody tr[b-pf1omc2cke] {
        transition: background .18s ease;
    }

        .table-modern tbody tr:hover[b-pf1omc2cke] {
            background: var(--ui-brand-50);
        }

        .table-modern tbody tr:last-child td[b-pf1omc2cke] {
            border-bottom: 0;
        }

.assignment-date[b-pf1omc2cke] {
    color: var(--as-ink);
    font-weight: 800;
    white-space: nowrap;
}

.assignment-time[b-pf1omc2cke] {
    margin-top: .3rem;
    color: var(--as-orange-dark);
    font-size: .75rem;
    font-weight: 750;
    white-space: nowrap;
}

.employee-avatar[b-pf1omc2cke] {
    width: 42px;
    height: 42px;
    color: #fff !important;
    background: linear-gradient(145deg, var(--ui-brand-400), var(--ui-brand-600)) !important;
    background-image: linear-gradient(145deg, var(--ui-brand-400), var(--ui-brand-600)) !important;
    border: 2px solid #fff;
    box-shadow: 0 6px 13px rgba(var(--ui-brand-rgb), .18);
}

.table-modern .fw-semibold[b-pf1omc2cke] {
    font-weight: 750 !important;
}

.table-modern small[b-pf1omc2cke] {
    display: inline-block;
    margin-top: .22rem;
    font-size: .74rem;
}

/* Empty state and pagination */
.empty-state[b-pf1omc2cke] {
    padding: 1.75rem 1rem;
}

.empty-state-icon[b-pf1omc2cke] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: .9rem;
    color: var(--as-orange);
    background: var(--as-orange-soft);
    border-radius: 18px;
    font-size: 1.7rem;
}

.empty-state h6[b-pf1omc2cke] {
    margin-bottom: .3rem;
    font-weight: 800;
}

.pagination-container[b-pf1omc2cke] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--ui-surface-2);
    border-top: 1px solid var(--as-line);
}

    .pagination-container .btn[b-pf1omc2cke] {
        min-width: 35px;
    }

/* Bootstrap utility refinement inside this component */
.text-muted[b-pf1omc2cke] {
    color: var(--as-muted) !important;
}

/* Keyboard accessibility */
button:focus-visible[b-pf1omc2cke],
a:focus-visible[b-pf1omc2cke],
input:focus-visible[b-pf1omc2cke],
textarea:focus-visible[b-pf1omc2cke] {
    outline: 3px solid rgba(var(--ui-brand-rgb), .28);
    outline-offset: 2px;
}

/* Responsive layout */
@media (max-width: 991.98px) {
    .employee-header[b-pf1omc2cke] {
        padding: 1.6rem;
    }

    .table-modern thead th[b-pf1omc2cke],
    .table-modern tbody td[b-pf1omc2cke] {
        padding-inline: .9rem;
    }
}

@media (max-width: 767.98px) {
    .employee-header[b-pf1omc2cke] {
        align-items: flex-start;
        flex-direction: column;
        padding: 1.35rem;
    }

        .employee-header .btn[b-pf1omc2cke] {
            width: 100%;
        }

    .modern-card .card-body[b-pf1omc2cke] {
        padding: 1rem !important;
    }

    .pagination-container[b-pf1omc2cke] {
        align-items: flex-start;
        flex-direction: column;
    }

        .pagination-container > div:last-child[b-pf1omc2cke] {
            width: 100%;
            justify-content: flex-end;
        }

    .table-modern[b-pf1omc2cke] {
        min-width: 900px;
    }
}

@media (max-width: 479.98px) {
    .employee-header h3[b-pf1omc2cke] {
        font-size: 1.5rem;
    }

    .d-flex.gap-2.mt-4[b-pf1omc2cke] {
        flex-direction: column;
    }

        .d-flex.gap-2.mt-4 .btn[b-pf1omc2cke] {
            width: 100%;
        }
}

@media (prefers-reduced-motion: reduce) {
    *[b-pf1omc2cke],
    *[b-pf1omc2cke]::before,
    *[b-pf1omc2cke]::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* =========================================================
   MITARBEITER PAGE EXTENSIONS
   ========================================================= */

.employee-header .btn-primary:disabled[b-pf1omc2cke] {
    color: #8c9299 !important;
    background: #e7e9ec !important;
    border-color: #e7e9ec !important;
    box-shadow: none;
    cursor: not-allowed;
}

.employee-header .btn-primary:not(:disabled)[b-pf1omc2cke] {
    color: #fff !important;
    background: var(--ui-brand) !important;
    background-image: none !important;
    border-color: var(--ui-brand) !important;
}

.employee-header .btn-primary:hover:not(:disabled)[b-pf1omc2cke] {
    background: var(--ui-brand-600) !important;
    border-color: var(--ui-brand-600) !important;
}

.employee-avatar[b-pf1omc2cke] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    color: #fff !important;
    background: linear-gradient(145deg, var(--ui-brand-400), var(--ui-brand-600)) !important;
    background-image: linear-gradient(145deg, var(--ui-brand-400), var(--ui-brand-600)) !important;
    border: 2px solid #fff;
    border-radius: 12px;
    box-shadow: 0 6px 13px rgba(var(--ui-brand-rgb), .2);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .03em;
}

.status-dot[b-pf1omc2cke] {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: .4rem;
    vertical-align: 1px;
    border-radius: 50%;
}

    .status-dot.active[b-pf1omc2cke] {
        background: var(--ui-success);
        box-shadow: 0 0 0 4px rgba(44, 166, 106, .14);
    }

    .status-dot.inactive[b-pf1omc2cke] {
        background: #9aa0a8;
        box-shadow: 0 0 0 4px rgba(154, 160, 168, .14);
    }

.badge.text-bg-success-subtle[b-pf1omc2cke] {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: .3rem .55rem;
    color: #17633c !important;
    background: #e8f7ee !important;
    border: 1px solid #bde8cc;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
}

.form-text[b-pf1omc2cke] {
    margin-top: .4rem;
    color: var(--as-muted);
    font-size: .74rem;
}

.form-check[b-pf1omc2cke] {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 0;
    margin: 0;
    padding-left: 0;
}

    /* ::deep → важи и за <input> што го рендерира InputCheckbox */
    .form-check[b-pf1omc2cke]  .form-check-input {
        float: none;
        flex: 0 0 auto;
        width: 1.2rem;
        height: 1.2rem;
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--ui-line);
        border-radius: 5px;
    }

        .form-check[b-pf1omc2cke]  .form-check-input:checked {
            background-color: var(--as-orange) !important;
            border-color: var(--as-orange) !important;
        }

        .form-check[b-pf1omc2cke]  .form-check-input:focus {
            border-color: var(--as-orange);
            box-shadow: 0 0 0 4px rgba(var(--ui-brand-rgb), .12);
        }

.form-check-label[b-pf1omc2cke] {
    margin: 0;
    color: var(--as-ink);
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
}

.daily-pagination[b-pf1omc2cke] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--ui-surface-2);
    border-top: 1px solid var(--as-line);
}

.daily-pagination-info[b-pf1omc2cke] {
    color: var(--as-muted);
    font-size: .76rem;
    font-weight: 700;
}

.daily-pagination .btn-light[b-pf1omc2cke] {
    color: var(--as-ink) !important;
    background: var(--ui-surface-3) !important;
    background-image: none !important;
    border: 1px solid var(--ui-line) !important;
}

button.btn.btn-light[b-pf1omc2cke] {
    color: var(--as-ink) !important;
    background: var(--ui-surface-3) !important;
    background-image: none !important;
    border: 1px solid var(--ui-line) !important;
}

.daily-pagination .btn-primary[b-pf1omc2cke] {
    color: #fff !important;
    background: var(--ui-brand) !important;
    border-color: var(--ui-brand) !important;
}

.table-modern tbody td:nth-child(3)[b-pf1omc2cke] {
    color: #4f565e;
}

@media (max-width: 767.98px) {
    .daily-pagination[b-pf1omc2cke] {
        align-items: flex-start;
        flex-direction: column;
    }

        .daily-pagination > div:last-child[b-pf1omc2cke] {
            width: 100%;
            justify-content: flex-end;
            flex-wrap: wrap;
        }

    .table-modern[b-pf1omc2cke] {
        min-width: 980px;
    }
}
/* =========================================================
   DELETE CONFIRMATION DIALOG
   → ans Ende von Mitarbeiter.razor.css anhängen
   ========================================================= */

.confirm-backdrop[b-pf1omc2cke] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(16, 24, 40, .45);
    backdrop-filter: blur(2px);
    animation: confirm-fade-b-pf1omc2cke .15s ease-out;
}

.confirm-dialog[b-pf1omc2cke] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1051;
    width: min(460px, calc(100vw - 32px));
    padding: 1.75rem;
    background: var(--as-surface, #fff);
    border: 1px solid var(--as-line, #e5e7eb);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(16, 24, 40, .25);
    transform: translate(-50%, -50%);
    animation: confirm-pop-b-pf1omc2cke .18s ease-out;
}

    .confirm-dialog h2[b-pf1omc2cke] {
        font-weight: 800;
        letter-spacing: -.02em;
    }

    .confirm-dialog p[b-pf1omc2cke] {
        font-size: .9rem;
        line-height: 1.5;
    }

.confirm-icon[b-pf1omc2cke] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    color: var(--as-danger, #d92d20);
    background: var(--ui-danger-50, #fef3f2);
    border: 1px solid #fecdca;
    border-radius: 14px;
    font-size: 1.4rem;
    font-weight: 900;
}

.confirm-list[b-pf1omc2cke] {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--as-ink);
    font-size: .84rem;
}

    .confirm-list li + li[b-pf1omc2cke] {
        margin-top: .3rem;
    }

    .confirm-list:empty[b-pf1omc2cke] {
        display: none;
    }

.confirm-hint[b-pf1omc2cke] {
    margin-top: 1rem;
    padding: .7rem .85rem;
    color: var(--ui-warning-700, #b54708);
    background: var(--ui-warning-50, #fffaeb);
    border-left: 4px solid var(--as-orange);
    border-radius: 10px;
    font-size: .8rem;
}

.btn-danger[b-pf1omc2cke] {
    color: #fff !important;
    background: var(--as-danger, #d92d20) !important;
    border-color: var(--as-danger, #d92d20) !important;
    box-shadow: 0 8px 18px rgba(217, 45, 32, .22);
}

    .btn-danger:hover:not(:disabled)[b-pf1omc2cke] {
        background: #b42318 !important;
        border-color: #b42318 !important;
    }

@keyframes confirm-fade-b-pf1omc2cke {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes confirm-pop-b-pf1omc2cke {
    from {
        opacity: 0;
        transform: translate(-50%, -46%) scale(.97);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@media (max-width: 479.98px) {
    .confirm-dialog .d-flex[b-pf1omc2cke] {
        flex-direction: column-reverse;
    }

        .confirm-dialog .d-flex .btn[b-pf1omc2cke] {
            width: 100%;
        }
}
/* /Components/Pages/Fuer-Bau-Handwerksbetriebe.razor.rz.scp.css */

/* =========================================================
   NAVIGATION – SAME STYLE AS PREISE / FUNKTIONEN
   ========================================================= */
/* Keep the B2B navigation visually identical to Preise / Funktionen.
   The nav itself must stay transparent so the page background continues behind it. */
.bh-page .landing-nav[b-wswc9i3vik],
.bh-page .landing-nav.container[b-wswc9i3vik] {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

    .bh-page .landing-nav .brand-bau[b-wswc9i3vik] {
        color: var(--ui-ink) !important;
    }

    .bh-page .landing-nav .brand-management[b-wswc9i3vik] {
        color: var(--ui-brand) !important;
    }

@media (min-width:901px) {
    .bh-page .landing-nav[b-wswc9i3vik] {
        max-width: 1180px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

.bh-page[b-wswc9i3vik] {
    min-width: 0;
    overflow-x: clip;
    background: var(--ui-bg) !important;
    color: var(--ui-ink);
}

    .bh-page .landing-nav[b-wswc9i3vik] {
        position: relative !important;
        z-index: 100 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 74px !important;
        padding: 10px 0 !important;
        gap: 28px !important;
        box-sizing: border-box !important;
    }

        .bh-page .landing-nav .brand[b-wswc9i3vik] {
            display: inline-flex !important;
            align-items: center !important;
            flex: 0 0 auto !important;
            margin: 0 !important;
            padding: 0 !important;
            color: var(--ui-ink) !important;
            font-size: 17px !important;
            font-weight: 800 !important;
            letter-spacing: -.04em !important;
            line-height: 1 !important;
            text-decoration: none !important;
            white-space: nowrap !important;
        }

        .bh-page .landing-nav .brand-bau[b-wswc9i3vik] {
            color: var(--ui-ink) !important;
            font-weight: 800 !important;
        }

        .bh-page .landing-nav .brand-management[b-wswc9i3vik] {
            color: var(--ui-brand) !important;
            font-weight: 800 !important;
        }

    .bh-page .landing-nav-menu[b-wswc9i3vik] {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        margin-left: auto !important;
        flex: 0 0 auto !important;
    }

        .bh-page .landing-nav-menu > a[b-wswc9i3vik] {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            min-height: 40px !important;
            padding: 10px 13px !important;
            color: var(--ui-subtle) !important;
            background: transparent !important;
            border: 1px solid transparent !important;
            border-radius: 9px !important;
            font-size: 13px !important;
            font-weight: 650 !important;
            line-height: 1 !important;
            text-decoration: none !important;
            white-space: nowrap !important;
            transition: color .2s ease,background .2s ease,border-color .2s ease !important;
        }

            .bh-page .landing-nav-menu > a:hover[b-wswc9i3vik],
            .bh-page .landing-nav-menu > a:focus-visible[b-wswc9i3vik] {
                color: var(--ui-ink) !important;
                background: rgba(var(--ui-ink-rgb), .055) !important;
                border-color: rgba(var(--ui-ink-rgb), 0.07) !important;
            }

            .bh-page .landing-nav-menu > a.nav-active[b-wswc9i3vik] {
                color: var(--ui-brand) !important;
                background: transparent !important;
                border-color: transparent !important;
            }

                .bh-page .landing-nav-menu > a.nav-active:hover[b-wswc9i3vik],
                .bh-page .landing-nav-menu > a.nav-active:focus-visible[b-wswc9i3vik] {
                    color: var(--ui-ink) !important;
                    background: rgba(var(--ui-ink-rgb), .055) !important;
                    border-color: rgba(var(--ui-ink-rgb), 0.07) !important;
                }

            .bh-page .landing-nav-menu > a.nav-b2b[b-wswc9i3vik] {
                gap: 7px !important;
                padding-left: 13px !important;
                padding-right: 13px !important;
                border: 1px solid rgba(var(--ui-brand-rgb), .35) !important;
                color: var(--ui-subtle) !important;
            }

                .bh-page .landing-nav-menu > a.nav-b2b i[b-wswc9i3vik] {
                    color: var(--ui-brand) !important;
                    font-size: 13px !important;
                }

                .bh-page .landing-nav-menu > a.nav-b2b.nav-active[b-wswc9i3vik] {
                    color: var(--ui-brand) !important;
                    border-color: rgba(var(--ui-brand-rgb), .55) !important;
                    background: rgba(var(--ui-brand-rgb), .06) !important;
                }

                .bh-page .landing-nav-menu > a.nav-b2b:hover[b-wswc9i3vik],
                .bh-page .landing-nav-menu > a.nav-b2b:focus-visible[b-wswc9i3vik] {
                    color: var(--ui-ink) !important;
                    background: rgba(var(--ui-ink-rgb), .055) !important;
                    border-color: var(--ui-brand) !important;
                }

    .bh-page .landing-nav-actions[b-wswc9i3vik] {
        display: flex !important;
        align-items: center !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        margin-left: 8px !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .bh-page .landing-nav .nav-login[b-wswc9i3vik],
    .bh-page .landing-nav .nav-action[b-wswc9i3vik] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        min-height: 38px !important;
        height: 38px !important;
        padding: 0 18px !important;
        color: var(--ui-brand) !important;
        background: transparent !important;
        border: 1px solid var(--ui-brand) !important;
        border-radius: 9px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        transition: color .2s ease,background .2s ease,transform .2s ease !important;
    }

        .bh-page .landing-nav .nav-login:hover[b-wswc9i3vik],
        .bh-page .landing-nav .nav-action:hover[b-wswc9i3vik] {
            color: #fff !important;
            background: var(--ui-brand) !important;
            border-color: var(--ui-brand) !important;
            transform: translateY(-1px);
        }

    .bh-page .bm-mobile-menu-toggle[b-wswc9i3vik] {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
        opacity: 0 !important;
    }

    .bh-page .bm-mobile-menu-button[b-wswc9i3vik] {
        display: none !important;
    }

    .bh-page .bm-mobile-actions[b-wswc9i3vik] {
        display: none;
    }

@media (max-width:900px) {
    .bh-page .landing-nav[b-wswc9i3vik] {
        min-height: 68px !important;
        padding: 14px !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
        overflow: visible !important;
    }

        .bh-page .landing-nav .brand[b-wswc9i3vik] {
            font-size: 16px !important;
        }

    .bh-page .bm-mobile-menu-button[b-wswc9i3vik] {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 5px !important;
        width: 40px !important;
        height: 40px !important;
        margin-left: auto !important;
        padding: 9px !important;
        cursor: pointer !important;
        border: 1px solid rgba(var(--ui-brand-rgb), .75) !important;
        border-radius: 9px !important;
        background: rgba(var(--ui-brand-rgb), .08) !important;
        z-index: 110 !important;
    }

        .bh-page .bm-mobile-menu-button span[b-wswc9i3vik] {
            display: block !important;
            width: 100% !important;
            height: 2px !important;
            border-radius: 99px !important;
            background: var(--ui-brand) !important;
            transition: transform .2s ease,opacity .2s ease !important;
        }

    .bh-page .landing-nav-menu[b-wswc9i3vik] {
        order: 10 !important;
        display: none !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        margin: 10px 0 0 !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 3px !important;
        border: 1px solid rgba(var(--ui-brand-rgb), .3) !important;
        border-radius: 12px !important;
        background: var(--ui-surface-2) !important;
        box-shadow: 0 20px 45px rgba(16, 24, 40, 0.14) !important;
    }

    .bh-page .bm-mobile-menu-toggle:checked ~ .landing-nav-menu[b-wswc9i3vik] {
        display: flex !important;
    }

    .bh-page .landing-nav-menu > a[b-wswc9i3vik] {
        width: 100% !important;
        min-height: 42px !important;
        justify-content: flex-start !important;
        padding: 10px 12px !important;
        box-sizing: border-box !important;
    }

    .bh-page .landing-nav-actions[b-wswc9i3vik] {
        display: none !important;
    }

    .bh-page .landing-nav-menu .bm-mobile-actions[b-wswc9i3vik] {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
        padding-top: 5px !important;
        margin-top: 5px !important;
        border-top: 1px solid rgba(var(--ui-ink-rgb), 0.11) !important;
    }

    .bh-page .bm-mobile-actions .bm-mobile-login[b-wswc9i3vik],
    .bh-page .bm-mobile-actions .bm-mobile-register[b-wswc9i3vik] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 40px !important;
        padding: 0 18px !important;
        border-radius: 9px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        color: var(--ui-brand) !important;
        border: 1px solid var(--ui-brand) !important;
        background: transparent !important;
    }

        .bh-page .bm-mobile-actions .bm-mobile-login:hover[b-wswc9i3vik],
        .bh-page .bm-mobile-actions .bm-mobile-register:hover[b-wswc9i3vik] {
            color: #fff !important;
            background: var(--ui-brand) !important;
        }

    .bh-page .bm-mobile-menu-toggle:checked + .bm-mobile-menu-button span:nth-child(1)[b-wswc9i3vik] {
        transform: translateY(7px) rotate(45deg);
    }

    .bh-page .bm-mobile-menu-toggle:checked + .bm-mobile-menu-button span:nth-child(2)[b-wswc9i3vik] {
        opacity: 0;
    }

    .bh-page .bm-mobile-menu-toggle:checked + .bm-mobile-menu-button span:nth-child(3)[b-wswc9i3vik] {
        transform: translateY(-7px) rotate(-45deg);
    }
}

@media (max-width:520px) {
    .bh-page .landing-nav[b-wswc9i3vik] {
        padding: 13px 12px !important;
    }

        .bh-page .landing-nav .brand[b-wswc9i3vik] {
            font-size: 15px !important;
        }
}

/* =========================================================
   BauManagement – Für Bau- & Handwerksbetriebe
   Scoped page styles
   ========================================================= */

.bh-hero[b-wswc9i3vik],
.bh-problem[b-wswc9i3vik],
.bh-solution[b-wswc9i3vik],
.bh-features[b-wswc9i3vik],
.bh-who[b-wswc9i3vik],
.bh-workflow[b-wswc9i3vik],
.bh-cta[b-wswc9i3vik] {
    position: relative;
    overflow: hidden;
}

.bh-hero[b-wswc9i3vik] {
    padding: 26px 0 90px;
    background: radial-gradient(circle at 80% 20%, rgba(var(--ui-brand-rgb), .16), transparent 34%), radial-gradient(circle at 20% 70%, rgba(255,77,0,.08), transparent 30%), var(--ui-bg);
    color: var(--ui-ink);
}

.bh-container[b-wswc9i3vik] {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.bh-breadcrumb[b-wswc9i3vik] {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: .86rem;
    color: var(--ui-muted);
    margin-bottom: 60px;
}

    .bh-breadcrumb a[b-wswc9i3vik] {
        color: var(--ui-text);
        text-decoration: none;
    }

        .bh-breadcrumb a:hover[b-wswc9i3vik] {
            color: var(--ui-brand);
        }

.bh-hero-grid[b-wswc9i3vik] {
    display: grid;
    grid-template-columns: 1.03fr .97fr;
    gap: 70px;
    align-items: center;
}

.bh-eyebrow[b-wswc9i3vik] {
    display: inline-block;
    color: #ff8a1f;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.bh-hero h1[b-wswc9i3vik] {
    margin: 18px 0 24px;
    font-size: clamp(2.7rem, 5vw, 5rem);
    line-height: 1.02;
    letter-spacing: -.055em;
    font-weight: 850;
}

    .bh-hero h1 span[b-wswc9i3vik] {
        color: var(--ui-brand);
    }

.bh-lead[b-wswc9i3vik] {
    max-width: 680px;
    color: var(--ui-text);
    font-size: 1.12rem;
    line-height: 1.8;
}

.bh-actions[b-wswc9i3vik] {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 30px;
}

.bh-btn[b-wswc9i3vik] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 11px;
    text-decoration: none;
    font-weight: 750;
    transition: .25s ease;
}

.bh-btn-primary[b-wswc9i3vik] {
    background: linear-gradient(135deg,#ff8a1f,#ff5a00);
    color: #fff;
    box-shadow: 0 12px 30px rgba(255,100,0,.22);
}

    .bh-btn-primary:hover[b-wswc9i3vik] {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 17px 38px rgba(255,100,0,.3);
    }

.bh-btn-secondary[b-wswc9i3vik] {
    color: var(--ui-ink);
    border: 1px solid var(--ui-line);
    background: var(--ui-surface-2);
}

    .bh-btn-secondary:hover[b-wswc9i3vik] {
        color: var(--ui-ink);
        border-color: var(--ui-text);
        transform: translateY(-2px);
    }

.bh-trust[b-wswc9i3vik] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 28px;
    color: var(--ui-text);
    font-size: .84rem;
}

    .bh-trust i[b-wswc9i3vik],
    .bh-checks i[b-wswc9i3vik],
    .bh-trade-list i[b-wswc9i3vik] {
        color: var(--ui-brand);
        margin-right: 6px;
    }

.bh-hero-visual[b-wswc9i3vik] {
    position: relative;
}

.bh-glow[b-wswc9i3vik] {
    position: absolute;
    width: 340px;
    height: 340px;
    background: #ff6900;
    opacity: .13;
    filter: blur(90px);
    right: 10%;
    top: 5%;
}

.bh-dashboard[b-wswc9i3vik] {
    position: relative;
    padding: 23px;
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    background: linear-gradient(145deg,var(--ui-surface-2),var(--ui-surface));
    box-shadow: 0 30px 80px rgba(16, 24, 40, 0.14);
}

.bh-dashboard-top[b-wswc9i3vik],
.bh-schedule-title[b-wswc9i3vik],
.bh-dashboard-footer[b-wswc9i3vik] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .bh-dashboard-top small[b-wswc9i3vik] {
        display: block;
        color: var(--ui-muted);
        font-size: .65rem;
        letter-spacing: .14em;
    }

    .bh-dashboard-top strong[b-wswc9i3vik] {
        display: block;
        margin-top: 4px;
        font-size: 1rem;
    }

.bh-live[b-wswc9i3vik] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6ddf91;
    font-size: .7rem;
    font-weight: 800;
}

    .bh-live i[b-wswc9i3vik] {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #6ddf91;
        box-shadow: 0 0 12px #6ddf91;
    }

.bh-dashboard-stats[b-wswc9i3vik] {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin: 22px 0;
}

    .bh-dashboard-stats div[b-wswc9i3vik] {
        padding: 15px;
        border: 1px solid var(--ui-line);
        border-radius: 12px;
        background: var(--ui-surface);
    }

    .bh-dashboard-stats strong[b-wswc9i3vik] {
        display: block;
        font-size: 1.55rem;
    }

    .bh-dashboard-stats span[b-wswc9i3vik] {
        color: var(--ui-muted);
        font-size: .7rem;
    }

.bh-schedule-title[b-wswc9i3vik] {
    padding: 10px 2px;
    color: var(--ui-ink);
    font-size: .78rem;
}

    .bh-schedule-title span:last-child[b-wswc9i3vik] {
        color: var(--ui-muted);
    }

.bh-job[b-wswc9i3vik] {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 11px;
    align-items: center;
    padding: 13px 0;
    border-top: 1px solid var(--ui-line);
}

.bh-avatar[b-wswc9i3vik] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--ui-surface-2);
    color: var(--ui-ink);
    font-size: .72rem;
    font-weight: 800;
}

    .bh-avatar.orange[b-wswc9i3vik] {
        color: var(--ui-brand-700);
        background: var(--ui-brand-100);
    }

    .bh-avatar.green[b-wswc9i3vik] {
        color: var(--ui-success-700);
        background: var(--ui-success-50);
    }

.bh-job-info strong[b-wswc9i3vik] {
    display: block;
    font-size: .84rem;
}

.bh-job-info span[b-wswc9i3vik] {
    display: block;
    margin-top: 3px;
    color: var(--ui-muted);
    font-size: .68rem;
}

.bh-job-info i[b-wswc9i3vik] {
    color: var(--ui-brand);
}

.bh-job > b[b-wswc9i3vik] {
    text-align: right;
    font-size: .78rem;
}

    .bh-job > b small[b-wswc9i3vik] {
        display: block;
        margin-top: 3px;
        color: var(--ui-muted);
        font-weight: 400;
    }

.bh-dashboard-footer[b-wswc9i3vik] {
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--ui-line);
    color: var(--ui-text);
    font-size: .72rem;
}

    .bh-dashboard-footer i[b-wswc9i3vik] {
        color: var(--ui-brand);
    }

.bh-problem[b-wswc9i3vik] {
    padding: 100px 0;
    background: #fff;
    color: #101010;
}

.bh-section-head[b-wswc9i3vik] {
    max-width: 760px;
    margin-bottom: 45px;
}

    .bh-section-head.center[b-wswc9i3vik] {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .bh-section-head h2[b-wswc9i3vik],
    .bh-solution h2[b-wswc9i3vik],
    .bh-cta h2[b-wswc9i3vik] {
        margin: 12px 0 15px;
        font-size: clamp(2rem,4vw,3.4rem);
        line-height: 1.08;
        letter-spacing: -.04em;
        font-weight: 850;
    }

    .bh-section-head p[b-wswc9i3vik],
    .bh-solution p[b-wswc9i3vik] {
        color: var(--ui-muted);
        line-height: 1.75;
        font-size: 1.03rem;
    }

.bh-problem-grid[b-wswc9i3vik] {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}

.bh-problem-card[b-wswc9i3vik] {
    padding: 30px;
    border: 1px solid #e8e8e8;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(16, 24, 40, 0.01);
}

    .bh-problem-card i[b-wswc9i3vik] {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        margin-bottom: 22px;
        border-radius: 13px;
        background: #fff1e7;
        color: var(--ui-brand);
        font-size: 1.3rem;
    }

    .bh-problem-card h3[b-wswc9i3vik] {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .bh-problem-card p[b-wswc9i3vik] {
        margin: 0;
        color: var(--ui-muted);
        line-height: 1.65;
    }

.bh-solution[b-wswc9i3vik] {
    padding: 105px 0;
    background: #f7f7f7;
}

.bh-solution-grid[b-wswc9i3vik] {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 80px;
    align-items: center;
}

.bh-checks[b-wswc9i3vik] {
    display: grid;
    gap: 14px;
    margin-top: 28px;
    color: #252525;
    font-weight: 650;
}

.bh-feature-panel[b-wswc9i3vik] {
    padding: 45px;
    border-radius: 22px;
    background: var(--ui-surface);
    color: var(--ui-ink);
    box-shadow: 0 25px 65px rgba(16, 24, 40, 0.05);
}

.bh-feature-panel-icon[b-wswc9i3vik] {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 28px;
    border-radius: 15px;
    background: linear-gradient(135deg,#ff8a1f,#ff5800);
    font-size: 1.45rem;
}

.bh-feature-panel small[b-wswc9i3vik] {
    display: block;
    color: var(--ui-muted);
    letter-spacing: .14em;
    font-size: .68rem;
}

.bh-feature-panel strong[b-wswc9i3vik] {
    display: block;
    margin: 10px 0;
    font-size: 1.75rem;
}

.bh-feature-panel p[b-wswc9i3vik] {
    color: var(--ui-text);
    margin: 0;
}

.bh-features[b-wswc9i3vik] {
    padding: 105px 0;
    background: #fff;
}

.bh-feature-grid[b-wswc9i3vik] {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
}

    .bh-feature-grid article[b-wswc9i3vik] {
        padding: 28px;
        border: 1px solid #e9e9e9;
        border-radius: 17px;
        background: #fff;
        transition: .25s ease;
    }

        .bh-feature-grid article:hover[b-wswc9i3vik] {
            transform: translateY(-4px);
            box-shadow: 0 18px 40px rgba(16, 24, 40, 0.02);
            border-color: #ddd;
        }

.bh-icon[b-wswc9i3vik] {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 12px;
    font-size: 1.15rem;
}

    .bh-icon.orange[b-wswc9i3vik] {
        background: #fff0e5;
        color: #ff6a00;
    }

    .bh-icon.blue[b-wswc9i3vik] {
        background: #edf4ff;
        color: #3977d5;
    }

    .bh-icon.purple[b-wswc9i3vik] {
        background: #f2edff;
        color: #7653d6;
    }

    .bh-icon.green[b-wswc9i3vik] {
        background: #eaf9f0;
        color: #23945a;
    }

    .bh-icon.red[b-wswc9i3vik] {
        background: var(--ui-danger-50);
        color: #dc5151;
    }

.bh-feature-grid h3[b-wswc9i3vik] {
    font-size: 1.05rem;
    margin-bottom: 9px;
}

.bh-feature-grid p[b-wswc9i3vik] {
    margin: 0;
    color: var(--ui-muted);
    line-height: 1.6;
    font-size: .9rem;
}

.bh-who[b-wswc9i3vik] {
    padding: 105px 0;
    background: var(--ui-surface);
    color: var(--ui-ink);
}

    .bh-who .bh-section-head p[b-wswc9i3vik] {
        color: var(--ui-text);
    }

.bh-trade-list[b-wswc9i3vik] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

    .bh-trade-list span[b-wswc9i3vik] {
        padding: 12px 17px;
        border: 1px solid var(--ui-line);
        border-radius: 999px;
        background: var(--ui-surface-2);
        color: var(--ui-text);
        font-size: .88rem;
    }

.bh-workflow[b-wswc9i3vik] {
    padding: 105px 0;
    background: #fff;
}

.bh-steps[b-wswc9i3vik] {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
}

.bh-step[b-wswc9i3vik] {
    position: relative;
    padding: 30px;
    border-top: 3px solid var(--ui-brand);
    background: #f7f7f7;
    border-radius: 0 0 15px 15px;
}

    .bh-step > span[b-wswc9i3vik] {
        color: var(--ui-brand);
        font-size: .75rem;
        font-weight: 900;
        letter-spacing: .1em;
    }

    .bh-step h3[b-wswc9i3vik] {
        margin: 14px 0 9px;
        font-size: 1.08rem;
    }

    .bh-step p[b-wswc9i3vik] {
        margin: 0;
        color: var(--ui-muted);
        line-height: 1.6;
        font-size: .9rem;
    }

.bh-cta[b-wswc9i3vik] {
    padding: 80px 0 100px;
    background: #fff;
}

.bh-cta-card[b-wswc9i3vik] {
    position: relative;
    overflow: hidden;
    padding: 75px 30px;
    text-align: center;
    border-radius: 25px;
    background: radial-gradient(circle at 50% 0,rgba(var(--ui-brand-rgb), .2),transparent 45%), var(--ui-surface);
    color: var(--ui-ink);
}

    .bh-cta-card h2[b-wswc9i3vik] {
        max-width: 780px;
        margin-left: auto;
        margin-right: auto;
    }

    .bh-cta-card p[b-wswc9i3vik] {
        max-width: 650px;
        margin: 0 auto;
        color: var(--ui-text);
        line-height: 1.7;
    }

    .bh-cta-card .bh-actions[b-wswc9i3vik] {
        justify-content: center;
    }

@media (max-width: 1050px) {
    .bh-hero-grid[b-wswc9i3vik],
    .bh-solution-grid[b-wswc9i3vik] {
        gap: 45px;
    }

    .bh-feature-grid[b-wswc9i3vik] {
        grid-template-columns: repeat(2,1fr);
    }

    .bh-steps[b-wswc9i3vik] {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 800px) {
    .bh-container[b-wswc9i3vik] {
        width: min(100% - 28px,1180px);
    }

    .bh-hero[b-wswc9i3vik] {
        padding-bottom: 65px;
    }

    .bh-breadcrumb[b-wswc9i3vik] {
        margin-bottom: 40px;
    }

    .bh-hero-grid[b-wswc9i3vik],
    .bh-solution-grid[b-wswc9i3vik],
    .bh-problem-grid[b-wswc9i3vik] {
        grid-template-columns: 1fr;
    }

    .bh-hero h1[b-wswc9i3vik] {
        font-size: clamp(2.5rem,12vw,4rem);
    }

    .bh-hero-visual[b-wswc9i3vik] {
        margin-top: 20px;
    }

    .bh-problem[b-wswc9i3vik],
    .bh-solution[b-wswc9i3vik],
    .bh-features[b-wswc9i3vik],
    .bh-who[b-wswc9i3vik],
    .bh-workflow[b-wswc9i3vik] {
        padding: 75px 0;
    }

    .bh-feature-panel[b-wswc9i3vik] {
        padding: 32px;
    }
}

@media (max-width: 560px) {
    .bh-dashboard[b-wswc9i3vik] {
        padding: 16px;
        border-radius: 16px;
    }

    .bh-dashboard-stats div[b-wswc9i3vik] {
        padding: 11px;
    }

    .bh-dashboard-stats strong[b-wswc9i3vik] {
        font-size: 1.25rem;
    }

    .bh-job[b-wswc9i3vik] {
        grid-template-columns: 36px 1fr auto;
    }

    .bh-avatar[b-wswc9i3vik] {
        width: 36px;
        height: 36px;
    }

    .bh-trust[b-wswc9i3vik] {
        display: grid;
        gap: 10px;
    }

    .bh-feature-grid[b-wswc9i3vik],
    .bh-steps[b-wswc9i3vik] {
        grid-template-columns: 1fr;
    }

    .bh-actions[b-wswc9i3vik] {
        flex-direction: column;
    }

    .bh-btn[b-wswc9i3vik] {
        width: 100%;
    }

    .bh-cta-card[b-wswc9i3vik] {
        padding: 55px 20px;
    }
}

/* FINAL NAV OVERRIDE — transparent like Preise / Funktionen */
.bh-page .landing-nav[b-wswc9i3vik] {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

    .bh-page .landing-nav.container[b-wswc9i3vik] {
        background: transparent !important;
        background-color: transparent !important;
    }

    .bh-page .landing-nav .brand-bau[b-wswc9i3vik] {
        color: var(--ui-ink) !important;
    }

    .bh-page .landing-nav .brand-management[b-wswc9i3vik] {
        color: var(--ui-brand) !important;
    }

/* =========================================================
   LIGHT SECTIONS – TEXT VISIBILITY FIX
   ========================================================= */

/* The page root is white-text by design for the dark hero.
   Reset inherited text colors inside the light sections. */
.bh-problem[b-wswc9i3vik],
.bh-features[b-wswc9i3vik],
.bh-workflow[b-wswc9i3vik],
.bh-cta[b-wswc9i3vik] {
    color: #171717 !important;
}

    .bh-problem h2[b-wswc9i3vik],
    .bh-problem h3[b-wswc9i3vik],
    .bh-features h2[b-wswc9i3vik],
    .bh-features h3[b-wswc9i3vik],
    .bh-workflow h2[b-wswc9i3vik],
    .bh-workflow h3[b-wswc9i3vik] {
        color: #171717 !important;
    }

    .bh-problem p[b-wswc9i3vik],
    .bh-features p[b-wswc9i3vik],
    .bh-workflow p[b-wswc9i3vik] {
        color: var(--ui-muted) !important;
    }

.bh-section-head p[b-wswc9i3vik],
.bh-section-head.center p[b-wswc9i3vik] {
    color: var(--ui-muted) !important;
}

.bh-features .bh-section-head h2[b-wswc9i3vik],
.bh-workflow .bh-section-head h2[b-wswc9i3vik],
.bh-problem .bh-section-head h2[b-wswc9i3vik] {
    color: #171717 !important;
}

.bh-feature-grid article[b-wswc9i3vik] {
    color: #171717 !important;
}

    .bh-feature-grid article h3[b-wswc9i3vik] {
        color: #171717 !important;
    }

    .bh-feature-grid article p[b-wswc9i3vik] {
        color: var(--ui-muted) !important;
    }

.bh-step[b-wswc9i3vik] {
    color: #171717 !important;
}

    .bh-step h3[b-wswc9i3vik] {
        color: #171717 !important;
    }

    .bh-step p[b-wswc9i3vik] {
        color: var(--ui-muted) !important;
    }

/* Keep the dark CTA card white. */
.bh-cta-card[b-wswc9i3vik],
.bh-cta-card h2[b-wswc9i3vik],
.bh-cta-card p[b-wswc9i3vik] {
    color: var(--ui-ink) !important;
}

    .bh-cta-card p[b-wswc9i3vik] {
        color: var(--ui-text) !important;
    }


/* =========================================================
   DESIGN SYSTEM – NAVIGATION ACTIONS
   ========================================================= */

.bh-page nav.landing-nav .landing-nav-menu > a[b-wswc9i3vik] {
    color: var(--ui-muted) !important;
}

    .bh-page nav.landing-nav .landing-nav-menu > a:hover[b-wswc9i3vik] {
        color: var(--ui-ink) !important;
    }

.bh-page nav.landing-nav .nav-login[b-wswc9i3vik] {
    color: var(--ui-ink) !important;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-line-strong) !important;
    box-shadow: var(--ui-shadow-xs) !important;
}

    .bh-page nav.landing-nav .nav-login:hover[b-wswc9i3vik] {
        color: var(--ui-ink) !important;
        background: var(--ui-surface-2) !important;
        border-color: #b9c0cc !important;
    }

.bh-page nav.landing-nav .nav-action[b-wswc9i3vik] {
    color: #fff !important;
    background: var(--ui-brand-gradient) !important;
    border: 1px solid var(--ui-brand-600) !important;
    box-shadow: var(--ui-shadow-brand) !important;
}

    .bh-page nav.landing-nav .nav-action:hover[b-wswc9i3vik] {
        color: #fff !important;
        background: linear-gradient(135deg, #ff7a2e 0%, #f25a07 55%, #d9430a 100%) !important;
        border-color: var(--ui-brand-700) !important;
    }
/* /Components/Pages/Funktionen.razor.rz.scp.css */
/* =========================================================
   BAUMANAGEMENT - FUNKTIONEN PAGE
========================================================= */

.bm-features-page[b-9ntevq6e3g] {
    --bm-orange: var(--ui-brand);
    --bm-orange-light: var(--ui-brand-400);
    --bm-dark: var(--ui-bg);
    --bm-dark-2: var(--ui-surface);
    --bm-card: var(--ui-surface-2);
    --bm-card-2: var(--ui-surface-2);
    --bm-border: rgba(var(--ui-ink-rgb), 0.11);
    --bm-white: var(--ui-ink);
    --bm-text: var(--ui-text);
    --bm-muted: var(--ui-subtle);
    background: radial-gradient(circle at 50% 0%, rgba(var(--ui-brand-rgb), .06), transparent 28%), linear-gradient(180deg,var(--ui-bg) 0%,var(--ui-surface) 100%);
    color: var(--ui-ink);
    overflow: hidden;
}


/* NAV */

.bm-features-nav[b-9ntevq6e3g] {
    position: relative;
    z-index: 20;
    background: var(--ui-surface);
    border-bottom: 1px solid rgba(var(--ui-ink-rgb), 0.09);
}

.bm-nav[b-9ntevq6e3g] {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.bm-brand[b-9ntevq6e3g] {
    color: var(--ui-ink) !important;
    text-decoration: none;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.7px;
    white-space: nowrap;
}

    .bm-brand span[b-9ntevq6e3g] {
        color: var(--bm-orange);
    }

.bm-nav-links[b-9ntevq6e3g] {
    display: flex;
    align-items: center;
    gap: 26px;
}

    .bm-nav-links a[b-9ntevq6e3g] {
        color: var(--ui-text) !important;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        transition: .2s ease;
    }

        .bm-nav-links a:hover[b-9ntevq6e3g],
        .bm-nav-links a.active[b-9ntevq6e3g] {
            color: var(--ui-ink) !important;
        }

        .bm-nav-links a.active[b-9ntevq6e3g] {
            position: relative;
        }

            .bm-nav-links a.active[b-9ntevq6e3g]::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: -29px;
                height: 2px;
                background: var(--bm-orange);
            }

.bm-nav-actions[b-9ntevq6e3g] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bm-login[b-9ntevq6e3g] {
    color: var(--ui-ink) !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

    .bm-login:hover[b-9ntevq6e3g] {
        color: var(--ui-ink) !important;
    }

.bm-nav-cta[b-9ntevq6e3g] {
    white-space: nowrap;
}


/* HERO */

.bm-feature-hero[b-9ntevq6e3g] {
    position: relative;
    min-height: 660px;
    display: flex;
    align-items: center;
    background: radial-gradient(circle at 78% 35%, rgba(var(--ui-brand-rgb), .12), transparent 28%), radial-gradient(circle at 20% 80%, rgba(var(--ui-brand-rgb), .06), transparent 30%), var(--bm-dark);
    color: var(--ui-ink);
}

.bm-hero-content[b-9ntevq6e3g] {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 90px 0 100px;
}

.bm-eyebrow[b-9ntevq6e3g] {
    display: inline-block;
    color: var(--bm-orange) !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.2px;
    line-height: 1.4;
}

.bm-hero-content h1[b-9ntevq6e3g] {
    margin: 18px auto 0;
    max-width: 900px;
    color: var(--ui-ink) !important;
    font-size: clamp(46px, 6vw, 78px);
    line-height: .98;
    letter-spacing: -3px;
    font-weight: 850;
}

    .bm-hero-content h1 span[b-9ntevq6e3g],
    .bm-section-heading h2 span[b-9ntevq6e3g],
    .bm-mobile-copy h2 span[b-9ntevq6e3g],
    .bm-final-card h2 span[b-9ntevq6e3g] {
        color: var(--bm-orange);
    }

.bm-hero-content > p[b-9ntevq6e3g] {
    max-width: 700px;
    margin: 28px auto 0;
    color: var(--ui-text) !important;
    font-size: 18px;
    line-height: 1.75;
}

.bm-hero-actions[b-9ntevq6e3g] {
    margin-top: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.bm-outline-button[b-9ntevq6e3g] {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid rgba(var(--ui-ink-rgb), 0.16);
    border-radius: 8px;
    color: var(--ui-ink) !important;
    text-decoration: none;
    font-weight: 700;
    transition: .2s ease;
}

    .bm-outline-button:hover[b-9ntevq6e3g] {
        border-color: rgba(var(--ui-brand-rgb), .6);
        background: rgba(var(--ui-brand-rgb), .08);
    }

.bm-trust-row[b-9ntevq6e3g] {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 22px;
    color: var(--ui-subtle);
    font-size: 13px;
}

    .bm-trust-row span[b-9ntevq6e3g] {
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .bm-trust-row i[b-9ntevq6e3g] {
        color: #22c55e;
    }

.bm-hero-glow[b-9ntevq6e3g] {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}

.bm-glow-one[b-9ntevq6e3g] {
    width: 360px;
    height: 360px;
    right: -100px;
    top: 100px;
    background: rgba(var(--ui-brand-rgb), .09);
}

.bm-glow-two[b-9ntevq6e3g] {
    width: 260px;
    height: 260px;
    left: -100px;
    bottom: 20px;
    background: rgba(var(--ui-brand-rgb), .05);
}


/* INTRO */

.bm-intro[b-9ntevq6e3g] {
    padding: 110px 0;
    background: linear-gradient(145deg,var(--ui-surface-2),var(--ui-surface));
}

.bm-intro-grid[b-9ntevq6e3g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.bm-intro h2[b-9ntevq6e3g] {
    margin: 15px 0 0;
    color: var(--ui-ink) !important;
    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.05;
    letter-spacing: -2px;
    font-weight: 800;
}

.bm-intro-copy[b-9ntevq6e3g] {
    border-left: 3px solid var(--bm-orange);
    padding-left: 30px;
}

    .bm-intro-copy p[b-9ntevq6e3g] {
        margin: 0;
        color: var(--ui-text) !important;
        font-size: 18px;
        line-height: 1.85;
    }


/* FUNCTIONS */

.bm-functions[b-9ntevq6e3g] {
    padding: 110px 0 120px;
    background: var(--ui-surface);
}

.bm-section-heading[b-9ntevq6e3g] {
    max-width: 850px;
    margin: 0 auto 58px;
    text-align: center;
}

    .bm-section-heading h2[b-9ntevq6e3g] {
        margin: 15px 0 0;
        color: var(--ui-ink) !important;
        font-size: clamp(38px, 4.5vw, 62px);
        line-height: 1.04;
        letter-spacing: -2.5px;
        font-weight: 800;
    }

    .bm-section-heading > p[b-9ntevq6e3g] {
        max-width: 700px;
        margin: 22px auto 0;
        color: var(--ui-text) !important;
        font-size: 17px;
        line-height: 1.75;
    }

.bm-feature-card[b-9ntevq6e3g] {
    position: relative;
    height: 100%;
    min-height: 365px;
    padding: 34px;
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: 18px;
    background: linear-gradient(145deg,var(--ui-surface-2),var(--ui-surface));
    box-shadow: 0 20px 60px rgba(16, 24, 40, 0.07);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .bm-feature-card:hover[b-9ntevq6e3g] {
        transform: translateY(-6px);
        border-color: rgba(var(--ui-brand-rgb), .38);
        box-shadow: 0 20px 50px rgba(15,23,42,.10);
    }

.bm-feature-number[b-9ntevq6e3g] {
    position: absolute;
    right: 25px;
    top: 24px;
    color: var(--ui-text);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
}

.bm-feature-icon[b-9ntevq6e3g] {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    margin-bottom: 28px;
    font-size: 23px;
}

.bm-orange .bm-feature-icon[b-9ntevq6e3g] {
    background: rgba(var(--ui-brand-rgb), .11);
    color: var(--ui-brand);
}

.bm-blue .bm-feature-icon[b-9ntevq6e3g] {
    background: rgba(79,131,255,.12);
    color: #4f83ff;
}

.bm-purple .bm-feature-icon[b-9ntevq6e3g] {
    background: rgba(149,88,239,.12);
    color: #9558ef;
}

.bm-green .bm-feature-icon[b-9ntevq6e3g] {
    background: rgba(37,196,106,.12);
    color: #25c46a;
}

.bm-cyan .bm-feature-icon[b-9ntevq6e3g] {
    background: rgba(19,168,189,.12);
    color: #13a8bd;
}

.bm-red .bm-feature-icon[b-9ntevq6e3g] {
    background: rgba(239,89,100,.12);
    color: #ef5964;
}

.bm-feature-card h3[b-9ntevq6e3g] {
    margin: 0;
    color: var(--ui-ink) !important;
    font-size: 23px;
    line-height: 1.2;
    font-weight: 750;
}

.bm-feature-card p[b-9ntevq6e3g] {
    margin: 17px 0 0;
    color: var(--ui-text) !important;
    font-size: 15px;
    line-height: 1.75;
}

.bm-feature-bottom[b-9ntevq6e3g] {
    position: absolute;
    left: 34px;
    right: 34px;
    bottom: 28px;
    padding-top: 17px;
    border-top: 1px solid rgba(var(--ui-ink-rgb), 0.09);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--ui-text);
    font-size: 13px;
    font-weight: 700;
}

    .bm-feature-bottom i[b-9ntevq6e3g] {
        color: var(--bm-orange);
        font-size: 16px;
    }


/* DARK WORKFLOW */

.bm-workflow[b-9ntevq6e3g] {
    padding: 120px 0;
    background: radial-gradient(circle at 80% 50%, rgba(var(--ui-brand-rgb), .08), transparent 30%), var(--bm-dark);
    color: var(--ui-ink);
}

.bm-heading-light h2[b-9ntevq6e3g] {
    color: var(--ui-ink) !important;
}

.bm-heading-light > p[b-9ntevq6e3g] {
    color: var(--ui-subtle) !important;
}

.bm-workflow-grid[b-9ntevq6e3g] {
    max-width: 1050px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.bm-workflow-item[b-9ntevq6e3g] {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 130px;
    padding: 24px 28px;
    border: 1px solid rgba(var(--ui-ink-rgb), 0.10);
    border-radius: 15px;
    background: rgba(var(--ui-ink-rgb), .025);
    transition: .2s ease;
}

    .bm-workflow-item:hover[b-9ntevq6e3g] {
        border-color: rgba(var(--ui-brand-rgb), .45);
        background: rgba(var(--ui-brand-rgb), .04);
    }

    .bm-workflow-item:last-child[b-9ntevq6e3g] {
        grid-column: 1 / -1;
    }

.bm-workflow-icon[b-9ntevq6e3g] {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--ui-surface-2);
    border: 1px solid rgba(var(--ui-brand-rgb), .22);
    color: var(--bm-orange);
}

    .bm-workflow-icon span[b-9ntevq6e3g] {
        font-size: 9px;
        font-weight: 800;
        opacity: .8;
    }

    .bm-workflow-icon i[b-9ntevq6e3g] {
        font-size: 19px;
        margin-top: 2px;
    }

.bm-workflow-item h3[b-9ntevq6e3g] {
    margin: 0;
    color: var(--ui-ink) !important;
    font-size: 18px;
    font-weight: 750;
}

.bm-workflow-item p[b-9ntevq6e3g] {
    margin: 7px 0 0;
    color: var(--ui-subtle) !important;
    font-size: 14px;
    line-height: 1.6;
}


/* ROLES */

.bm-role-section[b-9ntevq6e3g] {
    padding: 120px 0;
    background: var(--ui-surface);
    color: var(--ui-ink);
}

    .bm-role-section .bm-section-heading h2[b-9ntevq6e3g] {
        color: var(--ui-ink) !important;
    }

    .bm-role-section .bm-section-heading > p[b-9ntevq6e3g] {
        color: var(--ui-subtle) !important;
    }

.bm-role-card[b-9ntevq6e3g] {
    height: 100%;
    min-height: 300px;
    padding: 36px;
    border: 1px solid rgba(var(--ui-ink-rgb), 0.11);
    border-radius: 18px;
    background: var(--ui-surface-2);
}

.bm-role-featured[b-9ntevq6e3g] {
    border-color: rgba(var(--ui-brand-rgb), .42);
    background: radial-gradient(circle at 90% 10%, rgba(var(--ui-brand-rgb), .12), transparent 35%), var(--ui-surface-2);
}

.bm-role-icon[b-9ntevq6e3g] {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(var(--ui-brand-rgb), .10);
    color: var(--bm-orange);
    font-size: 23px;
    margin-bottom: 25px;
}

.bm-role-card > span[b-9ntevq6e3g] {
    color: var(--ui-subtle) !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.bm-role-card h3[b-9ntevq6e3g] {
    margin: 12px 0 0;
    color: var(--ui-ink) !important;
    font-size: 26px;
    font-weight: 750;
}

.bm-role-card p[b-9ntevq6e3g] {
    margin: 15px 0 0;
    color: var(--ui-subtle) !important;
    line-height: 1.75;
}


/* MOBILE */

.bm-mobile-section[b-9ntevq6e3g] {
    padding: 120px 0;
    background: linear-gradient(145deg,var(--ui-surface-2),var(--ui-surface));
}

.bm-mobile-grid[b-9ntevq6e3g] {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    gap: 100px;
}

.bm-device[b-9ntevq6e3g] {
    position: relative;
    display: flex;
    justify-content: center;
}

.bm-device-glow[b-9ntevq6e3g] {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(var(--ui-brand-rgb), .10);
    filter: blur(70px);
}

.bm-phone[b-9ntevq6e3g] {
    position: relative;
    z-index: 2;
    width: 355px;
    min-height: 550px;
    overflow: hidden;
    border: 8px solid var(--ui-line);
    border-radius: 34px;
    background: linear-gradient(145deg,var(--ui-surface-2),var(--ui-surface));
    box-shadow: 0 35px 90px rgba(15,23,42,.20);
}

.bm-phone-top[b-9ntevq6e3g] {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    background: var(--ui-surface);
    color: var(--ui-ink);
}

    .bm-phone-top strong[b-9ntevq6e3g] {
        font-size: 14px;
    }

    .bm-phone-top i[b-9ntevq6e3g] {
        color: var(--bm-orange);
        font-size: 21px;
    }

.bm-phone-content[b-9ntevq6e3g] {
    padding: 35px 20px;
    color: var(--ui-muted);
}

    .bm-phone-content > small[b-9ntevq6e3g] {
        font-size: 11px;
    }

.bm-phone-date[b-9ntevq6e3g] {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 35px 1fr 35px 62px;
    gap: 5px;
}

    .bm-phone-date button[b-9ntevq6e3g],
    .bm-phone-date b[b-9ntevq6e3g],
    .bm-phone-date strong[b-9ntevq6e3g] {
        min-height: 35px;
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
    }

    .bm-phone-date button[b-9ntevq6e3g],
    .bm-phone-date b[b-9ntevq6e3g] {
        background: var(--ui-surface);
        color: var(--ui-ink);
    }

    .bm-phone-date strong[b-9ntevq6e3g] {
        padding: 0 8px;
        background: var(--ui-surface-2);
        color: var(--ui-ink);
        font-size: 10px;
    }

    .bm-phone-date b[b-9ntevq6e3g] {
        font-size: 10px;
    }

.bm-phone-job[b-9ntevq6e3g] {
    margin-top: 22px;
    border-radius: 13px;
    overflow: hidden;
    background: var(--ui-surface-2);
    color: var(--ui-ink);
    box-shadow: 0 12px 25px rgba(16, 24, 40, 0.04);
}

.bm-phone-job-title[b-9ntevq6e3g] {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(var(--ui-ink-rgb), 0.11);
}

    .bm-phone-job-title strong[b-9ntevq6e3g] {
        font-size: 13px;
        line-height: 1.45;
    }

        .bm-phone-job-title strong i[b-9ntevq6e3g] {
            color: var(--bm-orange);
        }

    .bm-phone-job-title span[b-9ntevq6e3g] {
        padding: 7px 9px;
        border: 1px solid rgba(var(--ui-brand-rgb), .3);
        border-radius: 20px;
        color: var(--bm-orange);
        font-size: 9px;
    }

.bm-phone-times[b-9ntevq6e3g] {
    padding: 20px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

    .bm-phone-times small[b-9ntevq6e3g],
    .bm-phone-note small[b-9ntevq6e3g] {
        display: block;
        color: var(--ui-text);
        font-size: 8px;
        letter-spacing: 1px;
    }

    .bm-phone-times strong[b-9ntevq6e3g] {
        display: block;
        margin-top: 4px;
        font-size: 15px;
    }

    .bm-phone-times i[b-9ntevq6e3g] {
        color: var(--bm-orange);
    }

.bm-phone-note[b-9ntevq6e3g] {
    padding: 0 16px 18px;
    color: var(--ui-text);
    font-size: 10px;
    line-height: 1.6;
}

.bm-mobile-copy .bm-eyebrow[b-9ntevq6e3g] {
    color: var(--bm-orange) !important;
}

.bm-mobile-copy h2[b-9ntevq6e3g] {
    margin-top: 16px;
    color: var(--ui-ink) !important;
    font-size: clamp(38px, 4.5vw, 58px);
    line-height: 1.05;
    letter-spacing: -2px;
    font-weight: 800;
}

    .bm-mobile-copy h2 span[b-9ntevq6e3g] {
        display: block;
    }

.bm-mobile-copy > p[b-9ntevq6e3g] {
    margin-top: 22px;
    color: var(--ui-text) !important;
    font-size: 17px;
    line-height: 1.8;
}

.bm-mobile-copy ul[b-9ntevq6e3g] {
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
}

.bm-mobile-copy li[b-9ntevq6e3g] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 13px 0;
    color: var(--ui-subtle) !important;
    font-size: 15px;
}

    .bm-mobile-copy li i[b-9ntevq6e3g] {
        color: #22c55e;
    }


/* CTA */

.bm-final-cta[b-9ntevq6e3g] {
    padding: 90px 0;
    background: var(--ui-surface);
}

.bm-final-card[b-9ntevq6e3g] {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 80px 30px;
    border-radius: 24px;
    background: radial-gradient(circle at 50% 0%, rgba(var(--ui-brand-rgb), .12), transparent 38%), var(--ui-surface);
    color: var(--ui-ink);
}

.bm-final-icon[b-9ntevq6e3g] {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    border-radius: 16px;
    background: rgba(var(--ui-brand-rgb), .12);
    color: var(--bm-orange);
    font-size: 25px;
}

.bm-final-card h2[b-9ntevq6e3g] {
    max-width: 800px;
    margin: 16px auto 0;
    color: var(--ui-ink) !important;
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.04;
    letter-spacing: -2px;
    font-weight: 800;
}

.bm-final-card p[b-9ntevq6e3g] {
    max-width: 650px;
    margin: 22px auto 30px;
    color: var(--ui-text) !important;
    font-size: 17px;
    line-height: 1.75;
}

.bm-final-card small[b-9ntevq6e3g] {
    display: block;
    margin-top: 17px;
    color: var(--ui-muted) !important;
}


/* FOOTER */

.bm-footer[b-9ntevq6e3g] {
    padding: 30px 0;
    background: var(--ui-bg);
    border-top: 1px solid rgba(var(--ui-ink-rgb), 0.09);
}

.bm-footer-inner[b-9ntevq6e3g] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 30px;
}

    .bm-footer-inner strong[b-9ntevq6e3g] {
        display: block;
        color: var(--ui-ink) !important;
        font-size: 17px;
    }

        .bm-footer-inner strong span[b-9ntevq6e3g] {
            color: var(--bm-orange);
        }

    .bm-footer-inner small[b-9ntevq6e3g] {
        display: block;
        margin-top: 5px;
        color: var(--ui-muted) !important;
    }

.bm-footer-links[b-9ntevq6e3g] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

    .bm-footer-links a[b-9ntevq6e3g] {
        color: var(--ui-subtle) !important;
        text-decoration: none;
        font-size: 13px;
    }

        .bm-footer-links a:hover[b-9ntevq6e3g] {
            color: var(--ui-ink) !important;
        }

.bm-footer-copy[b-9ntevq6e3g] {
    color: var(--ui-muted) !important;
    font-size: 12px;
    white-space: nowrap;
}


/* RESPONSIVE */

@media (max-width: 991.98px) {

    .bm-nav-links[b-9ntevq6e3g] {
        display: none;
    }

    .bm-intro-grid[b-9ntevq6e3g] {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .bm-mobile-grid[b-9ntevq6e3g] {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .bm-mobile-copy[b-9ntevq6e3g] {
        max-width: 700px;
        margin: 0 auto;
    }

    .bm-footer-inner[b-9ntevq6e3g] {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .bm-footer-copy[b-9ntevq6e3g] {
        white-space: normal;
    }
}

@media (max-width: 767.98px) {

    .bm-nav[b-9ntevq6e3g] {
        min-height: 68px;
    }

    .bm-login[b-9ntevq6e3g] {
        display: none;
    }

    .bm-feature-hero[b-9ntevq6e3g] {
        min-height: auto;
    }

    .bm-hero-content[b-9ntevq6e3g] {
        padding: 75px 0 80px;
    }

        .bm-hero-content h1[b-9ntevq6e3g] {
            font-size: clamp(42px, 12vw, 60px);
            letter-spacing: -2px;
        }

        .bm-hero-content > p[b-9ntevq6e3g] {
            font-size: 16px;
        }

    .bm-trust-row[b-9ntevq6e3g] {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .bm-intro[b-9ntevq6e3g],
    .bm-functions[b-9ntevq6e3g],
    .bm-workflow[b-9ntevq6e3g],
    .bm-role-section[b-9ntevq6e3g],
    .bm-mobile-section[b-9ntevq6e3g] {
        padding: 80px 0;
    }

    .bm-section-heading[b-9ntevq6e3g] {
        margin-bottom: 42px;
    }

        .bm-section-heading h2[b-9ntevq6e3g] {
            font-size: 40px;
            letter-spacing: -1.5px;
        }

    .bm-feature-card[b-9ntevq6e3g] {
        min-height: 340px;
        padding: 28px;
    }

    .bm-feature-bottom[b-9ntevq6e3g] {
        left: 28px;
        right: 28px;
    }

    .bm-workflow-grid[b-9ntevq6e3g] {
        grid-template-columns: 1fr;
    }

    .bm-workflow-item:last-child[b-9ntevq6e3g] {
        grid-column: auto;
    }

    .bm-workflow-item[b-9ntevq6e3g] {
        min-height: auto;
        padding: 22px;
    }

    .bm-phone[b-9ntevq6e3g] {
        width: min(355px, 90vw);
    }

    .bm-final-card[b-9ntevq6e3g] {
        padding: 60px 20px;
    }

        .bm-final-card h2[b-9ntevq6e3g] {
            font-size: 40px;
        }

    .bm-footer-links[b-9ntevq6e3g] {
        gap: 12px 18px;
    }
}

@media (max-width: 430px) {

    .bm-nav-cta[b-9ntevq6e3g] {
        padding-left: 13px !important;
        padding-right: 13px !important;
        font-size: 13px;
    }

    .bm-brand[b-9ntevq6e3g] {
        font-size: 19px;
    }

    .bm-hero-actions[b-9ntevq6e3g] {
        flex-direction: column;
        width: 100%;
    }

        .bm-hero-actions > *[b-9ntevq6e3g] {
            width: 100%;
            justify-content: center;
        }

    .bm-phone-date[b-9ntevq6e3g] {
        grid-template-columns: 30px 1fr 30px;
    }

        .bm-phone-date b[b-9ntevq6e3g] {
            display: none;
        }
}


/* =========================================================
   NAVIGATION — EXACT PREISE STYLE, FUNKTIONEN ACTIVE
   ========================================================= */
.bm-features-page .landing-nav[b-9ntevq6e3g] {
    position: relative !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 1280px !important;
    min-height: 74px !important;
    margin: 0 auto !important;
    padding: 10px 0 !important;
    gap: 28px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: 0 !important;
}

    .bm-features-page .landing-nav .brand[b-9ntevq6e3g] {
        display: inline-flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--ui-ink) !important;
        font-size: 17px !important;
        font-weight: 800 !important;
        letter-spacing: -.04em !important;
        line-height: 1 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    .bm-features-page .landing-nav .brand-bau[b-9ntevq6e3g] {
        color: var(--ui-ink) !important;
        font-weight: 800 !important;
    }

    .bm-features-page .landing-nav .brand-management[b-9ntevq6e3g] {
        color: var(--ui-brand) !important;
        font-weight: 800 !important;
    }

.bm-features-page .landing-nav-menu[b-9ntevq6e3g] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
}

    .bm-features-page .landing-nav-menu > a[b-9ntevq6e3g] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 40px !important;
        padding: 10px 13px !important;
        color: var(--ui-subtle) !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: 9px !important;
        font-size: 13px !important;
        font-weight: 650 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        transition: color .2s ease,background .2s ease,border-color .2s ease !important;
    }

        .bm-features-page .landing-nav-menu > a:hover[b-9ntevq6e3g],
        .bm-features-page .landing-nav-menu > a:focus-visible[b-9ntevq6e3g] {
            color: var(--ui-ink) !important;
            background: rgba(var(--ui-ink-rgb), .055) !important;
            border-color: rgba(var(--ui-ink-rgb), 0.07) !important;
        }

        .bm-features-page .landing-nav-menu > a.nav-active[b-9ntevq6e3g] {
            color: var(--ui-brand) !important;
            background: transparent !important;
            border-color: transparent !important;
        }

            .bm-features-page .landing-nav-menu > a.nav-active:hover[b-9ntevq6e3g],
            .bm-features-page .landing-nav-menu > a.nav-active:focus-visible[b-9ntevq6e3g] {
                color: var(--ui-ink) !important;
                background: rgba(var(--ui-ink-rgb), .055) !important;
                border-color: rgba(var(--ui-ink-rgb), 0.07) !important;
            }

        .bm-features-page .landing-nav-menu > a.nav-b2b[b-9ntevq6e3g] {
            gap: 7px !important;
            padding-left: 13px !important;
            padding-right: 13px !important;
            border: 1px solid rgba(var(--ui-brand-rgb), .35) !important;
            color: var(--ui-subtle) !important;
        }

            .bm-features-page .landing-nav-menu > a.nav-b2b i[b-9ntevq6e3g] {
                color: var(--ui-brand) !important;
                font-size: 13px !important;
            }

            .bm-features-page .landing-nav-menu > a.nav-b2b:hover[b-9ntevq6e3g],
            .bm-features-page .landing-nav-menu > a.nav-b2b:focus-visible[b-9ntevq6e3g] {
                color: var(--ui-ink) !important;
                background: rgba(var(--ui-ink-rgb), .055) !important;
                border-color: var(--ui-brand) !important;
            }

.bm-features-page .landing-nav-actions[b-9ntevq6e3g] {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-left: 8px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

.bm-features-page .landing-nav .nav-login[b-9ntevq6e3g],
.bm-features-page .landing-nav .nav-action[b-9ntevq6e3g] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 18px !important;
    color: var(--ui-brand) !important;
    background: transparent !important;
    border: 1px solid var(--ui-brand) !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: color .2s ease,background .2s ease,transform .2s ease !important;
}

    .bm-features-page .landing-nav .nav-login:hover[b-9ntevq6e3g],
    .bm-features-page .landing-nav .nav-action:hover[b-9ntevq6e3g] {
        color: #fff !important;
        background: var(--ui-brand) !important;
        border-color: var(--ui-brand) !important;
        transform: translateY(-1px) !important;
    }

.bm-features-page .bm-mobile-menu-toggle[b-9ntevq6e3g] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
}

.bm-features-page .bm-mobile-menu-button[b-9ntevq6e3g] {
    display: none !important;
}

.bm-features-page .bm-mobile-actions[b-9ntevq6e3g] {
    display: none !important;
}

/* Compact content like Preise: centered, not edge-to-edge */
.bm-features-page .container[b-9ntevq6e3g] {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

.bm-features-page .bm-hero-content[b-9ntevq6e3g] {
    max-width: 900px;
}

.bm-features-page .bm-intro-grid[b-9ntevq6e3g],
.bm-features-page .bm-workflow-grid[b-9ntevq6e3g],
.bm-features-page .bm-mobile-grid[b-9ntevq6e3g] {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}

.bm-features-page .bm-feature-hero[b-9ntevq6e3g] {
    min-height: 600px;
}

@media (max-width:900px) {
    .bm-features-page .landing-nav[b-9ntevq6e3g] {
        min-height: 68px !important;
        padding: 14px !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
        overflow: visible !important;
    }

        .bm-features-page .landing-nav .brand[b-9ntevq6e3g] {
            font-size: 16px !important;
        }

    .bm-features-page .bm-mobile-menu-button[b-9ntevq6e3g] {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 5px !important;
        width: 40px !important;
        height: 40px !important;
        margin-left: auto !important;
        padding: 9px !important;
        cursor: pointer !important;
        border: 1px solid rgba(var(--ui-brand-rgb), .75) !important;
        border-radius: 9px !important;
        background: rgba(var(--ui-brand-rgb), .08) !important;
        z-index: 110 !important;
    }

        .bm-features-page .bm-mobile-menu-button span[b-9ntevq6e3g] {
            display: block !important;
            width: 100% !important;
            height: 2px !important;
            border-radius: 99px !important;
            background: var(--ui-brand) !important;
            transition: transform .2s ease,opacity .2s ease !important;
        }

    .bm-features-page .landing-nav-menu[b-9ntevq6e3g] {
        order: 10 !important;
        display: none !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        margin: 10px 0 0 !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 3px !important;
        border: 1px solid rgba(var(--ui-brand-rgb), .3) !important;
        border-radius: 12px !important;
        background: var(--ui-surface-2) !important;
        box-shadow: 0 20px 45px rgba(16, 24, 40, 0.14) !important;
    }

    .bm-features-page .bm-mobile-menu-toggle:checked ~ .landing-nav-menu[b-9ntevq6e3g] {
        display: flex !important;
    }

    .bm-features-page .landing-nav-menu > a[b-9ntevq6e3g] {
        width: 100% !important;
        min-height: 42px !important;
        justify-content: flex-start !important;
        padding: 10px 12px !important;
        box-sizing: border-box !important;
    }

    .bm-features-page .landing-nav-actions[b-9ntevq6e3g] {
        display: none !important;
    }

    .bm-features-page .landing-nav-menu .bm-mobile-actions[b-9ntevq6e3g] {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
        padding-top: 5px !important;
        margin-top: 5px !important;
        border-top: 1px solid rgba(var(--ui-ink-rgb), 0.11) !important;
    }

    .bm-features-page .bm-mobile-actions .bm-mobile-login[b-9ntevq6e3g],
    .bm-features-page .bm-mobile-actions .bm-mobile-register[b-9ntevq6e3g] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 40px !important;
        padding: 0 18px !important;
        border-radius: 9px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    .bm-features-page .bm-mobile-actions .bm-mobile-login[b-9ntevq6e3g],
    .bm-features-page .bm-mobile-actions .bm-mobile-register[b-9ntevq6e3g] {
        color: var(--ui-brand) !important;
        border: 1px solid var(--ui-brand) !important;
        background: transparent !important;
    }

        .bm-features-page .bm-mobile-actions .bm-mobile-login:hover[b-9ntevq6e3g],
        .bm-features-page .bm-mobile-actions .bm-mobile-register:hover[b-9ntevq6e3g] {
            color: #fff !important;
            background: var(--ui-brand) !important;
        }

    .bm-features-page .bm-mobile-menu-toggle:checked + .bm-mobile-menu-button span:nth-child(1)[b-9ntevq6e3g] {
        transform: translateY(7px) rotate(45deg);
    }

    .bm-features-page .bm-mobile-menu-toggle:checked + .bm-mobile-menu-button span:nth-child(2)[b-9ntevq6e3g] {
        opacity: 0;
    }

    .bm-features-page .bm-mobile-menu-toggle:checked + .bm-mobile-menu-button span:nth-child(3)[b-9ntevq6e3g] {
        transform: translateY(-7px) rotate(-45deg);
    }

    .bm-features-page .container[b-9ntevq6e3g] {
        padding-left: 16px;
        padding-right: 16px;
    }

    .bm-features-page .bm-feature-hero[b-9ntevq6e3g] {
        min-height: 0;
    }
}

@media (max-width:520px) {
    .bm-features-page .landing-nav[b-9ntevq6e3g] {
        padding: 13px 12px !important;
    }

        .bm-features-page .landing-nav .brand[b-9ntevq6e3g] {
            font-size: 15px !important;
        }
}


/* =========================================================
   DESIGN SYSTEM – NAVIGATION ACTIONS
   ========================================================= */

.bm-features-page nav.landing-nav .landing-nav-menu > a[b-9ntevq6e3g] {
    color: var(--ui-muted) !important;
}

    .bm-features-page nav.landing-nav .landing-nav-menu > a:hover[b-9ntevq6e3g] {
        color: var(--ui-ink) !important;
    }

.bm-features-page nav.landing-nav .nav-login[b-9ntevq6e3g] {
    color: var(--ui-ink) !important;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-line-strong) !important;
    box-shadow: var(--ui-shadow-xs) !important;
}

    .bm-features-page nav.landing-nav .nav-login:hover[b-9ntevq6e3g] {
        color: var(--ui-ink) !important;
        background: var(--ui-surface-2) !important;
        border-color: #b9c0cc !important;
    }

.bm-features-page nav.landing-nav .nav-action[b-9ntevq6e3g] {
    color: #fff !important;
    background: var(--ui-brand-gradient) !important;
    border: 1px solid var(--ui-brand-600) !important;
    box-shadow: var(--ui-shadow-brand) !important;
}

    .bm-features-page nav.landing-nav .nav-action:hover[b-9ntevq6e3g] {
        color: #fff !important;
        background: linear-gradient(135deg, #ff7a2e 0%, #f25a07 55%, #d9430a 100%) !important;
        border-color: var(--ui-brand-700) !important;
    }
/* /Components/Pages/Home.razor.rz.scp.css */

/* =========================================================
   BAUMANAGEMENT - LANDING PAGE
   Exact CSS for the supplied Home.razor
   ========================================================= */

/* =========================================================
   BASE
   ========================================================= */

.landing-hero[b-lye5rvn55s],
.intro-section[b-lye5rvn55s],
.features-section[b-lye5rvn55s],
.workflow-section[b-lye5rvn55s],
.time-section[b-lye5rvn55s],
.roles-section[b-lye5rvn55s],
.mobile-section[b-lye5rvn55s],
.pricing-section[b-lye5rvn55s],
.final-cta[b-lye5rvn55s],
.landing-footer[b-lye5rvn55s] {
    color: var(--bm-text);
}

.landing-hero[b-lye5rvn55s],
.intro-section[b-lye5rvn55s],
.features-section[b-lye5rvn55s],
.workflow-section[b-lye5rvn55s],
.time-section[b-lye5rvn55s],
.roles-section[b-lye5rvn55s],
.mobile-section[b-lye5rvn55s],
.pricing-section[b-lye5rvn55s],
.final-cta[b-lye5rvn55s] {
    background: var(--bm-bg);
}

    .landing-hero *[b-lye5rvn55s],
    .intro-section *[b-lye5rvn55s],
    .features-section *[b-lye5rvn55s],
    .workflow-section *[b-lye5rvn55s],
    .time-section *[b-lye5rvn55s],
    .roles-section *[b-lye5rvn55s],
    .mobile-section *[b-lye5rvn55s],
    .pricing-section *[b-lye5rvn55s],
    .final-cta *[b-lye5rvn55s],
    .landing-footer *[b-lye5rvn55s] {
        box-sizing: border-box;
    }

    .landing-hero a[b-lye5rvn55s],
    .intro-section a[b-lye5rvn55s],
    .features-section a[b-lye5rvn55s],
    .workflow-section a[b-lye5rvn55s],
    .time-section a[b-lye5rvn55s],
    .roles-section a[b-lye5rvn55s],
    .mobile-section a[b-lye5rvn55s],
    .pricing-section a[b-lye5rvn55s],
    .final-cta a[b-lye5rvn55s],
    .landing-footer a[b-lye5rvn55s] {
        text-decoration: none;
    }

.text-muted[b-lye5rvn55s] {
    color: var(--bm-muted) !important;
}

/* =========================================================
   NAVBAR
   ========================================================= */

.landing-hero[b-lye5rvn55s] {
    position: relative;
    min-height: 850px;
    overflow: hidden;
    background: radial-gradient(circle at 78% 20%, rgba(var(--ui-brand-rgb), .15), transparent 28%), radial-gradient(circle at 20% 50%, rgba(var(--ui-brand-rgb), .055), transparent 30%), var(--ui-bg);
}

    .landing-hero[b-lye5rvn55s]::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(var(--ui-ink-rgb), .025) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ui-ink-rgb), .025) 1px, transparent 1px);
        background-size: 55px 55px;
        mask-image: linear-gradient(to bottom, black, transparent 80%);
        pointer-events: none;
    }

.landing-nav[b-lye5rvn55s] {
    position: relative;
    z-index: 20;
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    border-bottom: 1px solid rgba(var(--ui-ink-rgb), 0.08);
}

.brand[b-lye5rvn55s] {
    display: inline-flex;
    align-items: center;
    color: var(--ui-ink) !important;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.04em;
    white-space: nowrap;
}

.brand-bau[b-lye5rvn55s] {
    color: var(--ui-ink);
}

.brand-management[b-lye5rvn55s] {
    color: var(--bm-orange);
}

.landing-nav-menu[b-lye5rvn55s] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-left: auto;
}

    .landing-nav-menu a[b-lye5rvn55s] {
        color: var(--ui-text);
        font-size: 13px;
        font-weight: 600;
        transition: color .2s ease;
    }

        .landing-nav-menu a:hover[b-lye5rvn55s] {
            color: var(--ui-ink);
        }

.landing-nav-actions[b-lye5rvn55s] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-login[b-lye5rvn55s] {
    border-color: rgba(var(--ui-ink-rgb), 0.16) !important;
    color: var(--ui-ink) !important;
}

    .nav-login:hover[b-lye5rvn55s] {
        background: rgba(var(--ui-ink-rgb), .07) !important;
    }

.nav-action[b-lye5rvn55s],
.landing-nav .btn-warning[b-lye5rvn55s] {
    background: linear-gradient(135deg, var(--bm-orange), var(--bm-orange-dark)) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 8px 25px rgba(var(--ui-brand-rgb), .22);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

    .nav-action:hover[b-lye5rvn55s],
    .landing-nav .btn-warning:hover[b-lye5rvn55s] {
        transform: translateY(-2px);
        filter: brightness(1.07);
        box-shadow: 0 13px 32px rgba(var(--ui-brand-rgb), .32);
    }

/* =========================================================
   HERO CONTENT
   ========================================================= */

.landing-hero > .container[b-lye5rvn55s] {
    position: relative;
    z-index: 2;
}

.hero-eyebrow[b-lye5rvn55s],
.section-eyebrow[b-lye5rvn55s] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--bm-orange);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

    .hero-eyebrow[b-lye5rvn55s]::before,
    .section-eyebrow[b-lye5rvn55s]::before {
        content: "";
        width: 27px;
        height: 2px;
        background: linear-gradient(90deg, var(--bm-orange), var(--bm-orange-light));
        border-radius: 99px;
    }

.hero-title[b-lye5rvn55s] {
    margin: 0;
    color: var(--ui-ink);
    font-size: clamp(46px, 5.4vw, 76px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 850;
}

    .hero-title span[b-lye5rvn55s] {
        display: inline-block;
        margin-top: 12px;
        background: linear-gradient( 90deg, var(--ui-brand) 0%, #ff9f45 55%, #ffc078 100% );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.hero-description[b-lye5rvn55s] {
    max-width: 690px;
    color: var(--ui-text);
    font-size: 17px;
    line-height: 1.75;
}

.landing-hero .btn-warning[b-lye5rvn55s],
.final-cta .btn-warning[b-lye5rvn55s] {
    background: linear-gradient(135deg, var(--bm-orange), var(--bm-orange-dark)) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 12px 30px rgba(var(--ui-brand-rgb), .23);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

    .landing-hero .btn-warning:hover[b-lye5rvn55s],
    .final-cta .btn-warning:hover[b-lye5rvn55s] {
        transform: translateY(-2px);
        filter: brightness(1.08);
        box-shadow: 0 17px 40px rgba(var(--ui-brand-rgb), .33);
    }

.btn-hero-link[b-lye5rvn55s] {
    color: var(--ui-ink) !important;
    background: transparent !important;
    border: 0 !important;
    font-weight: 650;
}

    .btn-hero-link:hover[b-lye5rvn55s] {
        color: var(--bm-orange) !important;
    }

.hero-trust[b-lye5rvn55s] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 25px;
}

    .hero-trust span[b-lye5rvn55s] {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: var(--ui-text);
        font-size: 12px;
        font-weight: 600;
    }

    .hero-trust i[b-lye5rvn55s] {
        color: var(--bm-orange);
        font-size: 14px;
    }

/* =========================================================
   DASHBOARD PREVIEW
   ========================================================= */

.dashboard-preview[b-lye5rvn55s] {
    position: relative;
    padding: 22px;
    border: 1px solid rgba(var(--ui-ink-rgb), 0.13);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(var(--ui-ink-rgb), .065), rgba(var(--ui-ink-rgb), .025)), var(--ui-surface);
    box-shadow: 0 35px 100px rgba(16, 24, 40, 0.14), 0 0 80px rgba(var(--ui-brand-rgb), .08);
    backdrop-filter: blur(18px);
    overflow: hidden;
    transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
    transition: transform .35s ease;
}

    .dashboard-preview:hover[b-lye5rvn55s] {
        transform: perspective(1200px) rotateY(0) rotateX(0) translateY(-4px);
    }

    .dashboard-preview[b-lye5rvn55s]::before {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        top: -160px;
        right: -100px;
        border-radius: 50%;
        background: rgba(var(--ui-brand-rgb), .15);
        filter: blur(55px);
        pointer-events: none;
    }

.preview-top[b-lye5rvn55s] {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(var(--ui-ink-rgb), 0.08);
}

    .preview-top small[b-lye5rvn55s] {
        display: block;
        margin-bottom: 4px;
        color: var(--ui-muted);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .14em;
    }

    .preview-top strong[b-lye5rvn55s] {
        color: var(--ui-ink);
        font-size: 15px;
    }

.live-badge[b-lye5rvn55s] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border: 1px solid rgba(74,222,128,.18);
    border-radius: 999px;
    background: rgba(74,222,128,.07);
    color: #72df91;
    font-size: 10px;
    font-weight: 700;
}

    .live-badge > span[b-lye5rvn55s] {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #4ade80;
        box-shadow: 0 0 10px rgba(74,222,128,.7);
    }

.preview-stats[b-lye5rvn55s] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.preview-stat[b-lye5rvn55s] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px;
    border: 1px solid rgba(var(--ui-ink-rgb), 0.08);
    border-radius: 13px;
    background: rgba(var(--ui-ink-rgb), .025);
}

.preview-stat-icon[b-lye5rvn55s] {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 9px;
    font-size: 14px;
}

    .preview-stat-icon.orange[b-lye5rvn55s] {
        background: rgba(var(--ui-brand-rgb), .12);
        color: #ff8a1c;
    }

    .preview-stat-icon.blue[b-lye5rvn55s] {
        background: rgba(59,130,246,.12);
        color: #60a5fa;
    }

    .preview-stat-icon.green[b-lye5rvn55s] {
        background: rgba(34,197,94,.12);
        color: #4ade80;
    }

.preview-stat strong[b-lye5rvn55s] {
    display: block;
    color: var(--ui-ink);
    font-size: 18px;
    line-height: 1;
}

.preview-stat small[b-lye5rvn55s] {
    display: block;
    margin-top: 3px;
    color: var(--ui-muted);
    font-size: 9px;
}

.preview-section-title[b-lye5rvn55s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 23px 0 10px;
    color: var(--ui-text);
    font-size: 11px;
    font-weight: 700;
}

    .preview-section-title span:last-child[b-lye5rvn55s] {
        color: var(--ui-muted);
        font-weight: 500;
    }

.preview-assignment[b-lye5rvn55s] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    margin-top: 8px;
    border: 1px solid rgba(var(--ui-ink-rgb), 0.07);
    border-radius: 13px;
    background: rgba(var(--ui-ink-rgb), .022);
    transition: background .2s ease, border-color .2s ease;
}

    .preview-assignment:hover[b-lye5rvn55s] {
        background: rgba(var(--ui-ink-rgb), .045);
        border-color: rgba(var(--ui-brand-rgb), .15);
    }

.preview-avatar[b-lye5rvn55s] {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 10px;
    background: rgba(96,165,250,.13);
    color: #7db7ff;
    font-size: 10px;
    font-weight: 800;
}

    .preview-avatar.orange[b-lye5rvn55s] {
        background: rgba(var(--ui-brand-rgb), .13);
        color: var(--ui-brand-600);
    }

    .preview-avatar.green[b-lye5rvn55s] {
        background: rgba(34,197,94,.13);
        color: #65dc8b;
    }

.preview-assignment-content[b-lye5rvn55s] {
    min-width: 0;
    flex: 1;
}

    .preview-assignment-content strong[b-lye5rvn55s] {
        display: block;
        color: var(--ui-ink);
        font-size: 12px;
    }

    .preview-assignment-content span[b-lye5rvn55s] {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-top: 3px;
        color: var(--ui-muted);
        font-size: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .preview-assignment-content i[b-lye5rvn55s] {
        color: var(--bm-orange);
    }

.preview-time[b-lye5rvn55s] {
    text-align: right;
    color: var(--ui-ink);
    font-size: 11px;
    font-weight: 700;
}

    .preview-time small[b-lye5rvn55s] {
        display: block;
        margin-top: 2px;
        color: var(--ui-muted);
        font-size: 9px;
        font-weight: 500;
    }

.preview-time-row[b-lye5rvn55s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding: 13px;
    border-radius: 12px;
    background: rgba(var(--ui-brand-rgb), .055);
    border: 1px solid rgba(var(--ui-brand-rgb), .10);
}

    .preview-time-row > div[b-lye5rvn55s] {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--ui-text);
        font-size: 10px;
    }

    .preview-time-row i[b-lye5rvn55s] {
        color: var(--bm-orange);
    }

    .preview-time-row strong[b-lye5rvn55s] {
        color: var(--ui-ink);
        font-size: 13px;
    }

.preview-footer[b-lye5rvn55s] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(var(--ui-ink-rgb), 0.07);
    color: var(--ui-muted);
    font-size: 10px;
}

    .preview-footer i[b-lye5rvn55s] {
        color: var(--bm-orange);
    }

/* =========================================================
   GENERAL SECTION HEADINGS
   ========================================================= */

.section-heading[b-lye5rvn55s] {
    max-width: 760px;
}

    .section-heading h2[b-lye5rvn55s] {
        margin-top: 14px;
        color: var(--ui-ink);
        font-size: clamp(34px, 4vw, 54px);
        line-height: 1.06;
        letter-spacing: -.045em;
        font-weight: 800;
    }

    .section-heading p[b-lye5rvn55s] {
        max-width: 650px;
        margin: 20px auto 0;
        color: var(--bm-muted);
        font-size: 16px;
        line-height: 1.75;
    }

/* =========================================================
   INTRO
   ========================================================= */

.intro-section[b-lye5rvn55s] {
    position: relative;
    padding-top: 100px !important;
    padding-bottom: 100px !important;
    border-bottom: 1px solid rgba(var(--ui-ink-rgb), 0.07);
    background: radial-gradient(circle at 50% 0, rgba(var(--ui-brand-rgb), .06), transparent 45%), var(--bm-bg);
}

/* =========================================================
   FEATURES
   ========================================================= */

.features-section[b-lye5rvn55s] {
    padding-top: 105px !important;
    padding-bottom: 110px !important;
}

    .features-section .row[b-lye5rvn55s] {
        position: relative;
    }

.feature-card[b-lye5rvn55s] {
    position: relative;
    height: 100%;
    min-height: 270px;
    padding: 28px;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius);
    background: linear-gradient(145deg, rgba(var(--ui-ink-rgb), .045), rgba(var(--ui-ink-rgb), .018)), var(--bm-card);
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

    .feature-card[b-lye5rvn55s]::after {
        content: "";
        position: absolute;
        width: 170px;
        height: 170px;
        right: -100px;
        bottom: -100px;
        border-radius: 50%;
        background: rgba(var(--ui-brand-rgb), .08);
        filter: blur(35px);
        transition: .25s ease;
    }

    .feature-card:hover[b-lye5rvn55s] {
        transform: translateY(-6px);
        border-color: rgba(var(--ui-brand-rgb), .25);
        background: linear-gradient(145deg, rgba(var(--ui-brand-rgb), .065), rgba(var(--ui-ink-rgb), .02)), var(--bm-card);
        box-shadow: 0 20px 50px rgba(16, 24, 40, 0.07);
    }

        .feature-card:hover[b-lye5rvn55s]::after {
            background: rgba(var(--ui-brand-rgb), .15);
        }

.feature-icon[b-lye5rvn55s] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 13px;
    font-size: 18px;
}

    .feature-icon.orange[b-lye5rvn55s] {
        background: rgba(var(--ui-brand-rgb), .12);
        color: #ff8b22;
    }

    .feature-icon.blue[b-lye5rvn55s] {
        background: rgba(59,130,246,.12);
        color: #60a5fa;
    }

    .feature-icon.purple[b-lye5rvn55s] {
        background: rgba(168,85,247,.12);
        color: #c084fc;
    }

    .feature-icon.green[b-lye5rvn55s] {
        background: rgba(34,197,94,.12);
        color: #4ade80;
    }

    .feature-icon.red[b-lye5rvn55s] {
        background: rgba(239,68,68,.12);
        color: #fb7185;
    }

.feature-card h3[b-lye5rvn55s] {
    margin: 0 0 11px;
    color: var(--ui-ink);
    font-size: 18px;
    font-weight: 750;
}

.feature-card p[b-lye5rvn55s] {
    margin: 0;
    color: var(--ui-text);
    font-size: 13px;
    line-height: 1.75;
}

.feature-link[b-lye5rvn55s] {
    position: absolute;
    left: 28px;
    bottom: 25px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ui-text);
    font-size: 11px;
    font-weight: 700;
    transition: color .2s ease, gap .2s ease;
}

.feature-card:hover .feature-link[b-lye5rvn55s] {
    color: var(--bm-orange);
    gap: 10px;
}

.feature-link i[b-lye5rvn55s] {
    font-size: 11px;
}

/* =========================================================
   WORKFLOW
   ========================================================= */

.workflow-section[b-lye5rvn55s] {
    padding-top: 105px !important;
    padding-bottom: 105px !important;
    background: linear-gradient(180deg, var(--ui-surface), var(--ui-bg));
}

    .workflow-section h2[b-lye5rvn55s] {
        color: var(--ui-ink);
        font-size: clamp(35px, 4vw, 53px);
        line-height: 1.06;
        letter-spacing: -.045em;
        font-weight: 800;
    }

    .workflow-section p[b-lye5rvn55s] {
        color: var(--bm-muted) !important;
        line-height: 1.75;
    }

.workflow-list[b-lye5rvn55s] {
    position: relative;
    padding-left: 30px;
}

    .workflow-list[b-lye5rvn55s]::before {
        content: "";
        position: absolute;
        left: 19px;
        top: 25px;
        bottom: 25px;
        width: 1px;
        background: linear-gradient( to bottom, rgba(var(--ui-brand-rgb), .55), rgba(var(--ui-brand-rgb), .08) );
    }

.workflow-item[b-lye5rvn55s] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 18px 20px;
    margin-bottom: 10px;
    border: 1px solid rgba(var(--ui-ink-rgb), 0.08);
    border-radius: 15px;
    background: rgba(var(--ui-ink-rgb), .025);
    transition: .22s ease;
}

    .workflow-item:hover[b-lye5rvn55s] {
        border-color: rgba(var(--ui-brand-rgb), .20);
        background: rgba(var(--ui-brand-rgb), .045);
        transform: translateX(4px);
    }

.workflow-number[b-lye5rvn55s] {
    position: relative;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--bm-orange), var(--bm-orange-dark));
    color: #fff;
    font-size: 11px;
    font-weight: 850;
    box-shadow: 0 8px 22px rgba(var(--ui-brand-rgb), .20);
}

.workflow-item h3[b-lye5rvn55s] {
    margin: 1px 0 6px;
    color: var(--ui-ink);
    font-size: 15px;
    font-weight: 750;
}

.workflow-item p[b-lye5rvn55s] {
    margin: 0;
    color: var(--ui-muted) !important;
    font-size: 12px;
    line-height: 1.65;
}

/* =========================================================
   TIME TRACKING
   ========================================================= */

.time-section[b-lye5rvn55s] {
    padding-top: 105px !important;
    padding-bottom: 105px !important;
    background: radial-gradient(circle at 20% 50%, rgba(var(--ui-brand-rgb), .06), transparent 32%), var(--bm-bg);
}

    .time-section h2[b-lye5rvn55s] {
        color: var(--ui-ink);
        font-size: clamp(36px, 4vw, 54px);
        line-height: 1.06;
        letter-spacing: -.045em;
        font-weight: 800;
    }

.time-features[b-lye5rvn55s] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.time-feature[b-lye5rvn55s] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 15px;
    border: 1px solid rgba(var(--ui-ink-rgb), 0.07);
    border-radius: 13px;
    background: rgba(var(--ui-ink-rgb), .022);
}

.time-feature-icon[b-lye5rvn55s] {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 10px;
    background: rgba(var(--ui-brand-rgb), .11);
    color: var(--bm-orange);
}

.time-feature strong[b-lye5rvn55s] {
    display: block;
    color: var(--ui-ink);
    font-size: 12px;
}

.time-feature span[b-lye5rvn55s] {
    display: block;
    margin-top: 3px;
    color: var(--ui-muted);
    font-size: 10px;
}

.time-dashboard[b-lye5rvn55s] {
    padding: 24px;
    border: 1px solid rgba(var(--ui-ink-rgb), 0.12);
    border-radius: 23px;
    background: linear-gradient(145deg, rgba(var(--ui-ink-rgb), .055), rgba(var(--ui-ink-rgb), .018)), var(--ui-surface);
    box-shadow: var(--bm-shadow);
}

.time-dashboard-header[b-lye5rvn55s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(var(--ui-ink-rgb), 0.08);
}

    .time-dashboard-header small[b-lye5rvn55s] {
        display: block;
        color: var(--ui-muted);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .13em;
    }

    .time-dashboard-header strong[b-lye5rvn55s] {
        display: block;
        margin-top: 3px;
        color: var(--ui-ink);
        font-size: 15px;
    }

.time-status[b-lye5rvn55s] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border: 1px solid rgba(74,222,128,.16);
    border-radius: 999px;
    color: #63d889;
    background: rgba(74,222,128,.06);
    font-size: 10px;
    font-weight: 700;
}

    .time-status span[b-lye5rvn55s] {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #4ade80;
    }

.time-main[b-lye5rvn55s] {
    padding: 30px 5px 25px;
    text-align: center;
}

.time-label[b-lye5rvn55s] {
    display: block;
    color: var(--ui-muted);
    font-size: 11px;
}

.time-value[b-lye5rvn55s] {
    display: block;
    margin-top: 8px;
    color: var(--ui-ink);
    font-size: 55px;
    line-height: 1;
    letter-spacing: -.05em;
    font-weight: 800;
}

.time-location[b-lye5rvn55s] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    color: var(--ui-text);
    font-size: 11px;
}

    .time-location i[b-lye5rvn55s] {
        color: var(--bm-orange);
    }

.time-progress[b-lye5rvn55s] {
    padding: 15px;
    border-radius: 13px;
    background: rgba(var(--ui-ink-rgb), .025);
    border: 1px solid rgba(var(--ui-ink-rgb), 0.07);
}

.time-progress-top[b-lye5rvn55s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: var(--ui-muted);
    font-size: 10px;
}

    .time-progress-top strong[b-lye5rvn55s] {
        color: var(--ui-text);
    }

.time-progress-bar[b-lye5rvn55s] {
    width: 100%;
    height: 7px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(var(--ui-ink-rgb), .07);
}

    .time-progress-bar span[b-lye5rvn55s] {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--bm-orange), #ffae58);
        box-shadow: 0 0 14px rgba(var(--ui-brand-rgb), .4);
    }

.time-summary[b-lye5rvn55s] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}

    .time-summary > div[b-lye5rvn55s] {
        padding: 12px;
        text-align: center;
        border-radius: 11px;
        background: rgba(var(--ui-ink-rgb), .025);
    }

    .time-summary small[b-lye5rvn55s] {
        display: block;
        color: var(--ui-muted);
        font-size: 9px;
    }

    .time-summary strong[b-lye5rvn55s] {
        display: block;
        margin-top: 4px;
        color: var(--ui-ink);
        font-size: 13px;
    }

.time-action[b-lye5rvn55s] {
    margin-top: 14px;
}

    .time-action .btn-warning[b-lye5rvn55s] {
        background: linear-gradient(135deg, var(--bm-orange), var(--bm-orange-dark)) !important;
        border: 0 !important;
    }

/* =========================================================
   ROLES
   ========================================================= */

.roles-section[b-lye5rvn55s] {
    padding-top: 105px !important;
    padding-bottom: 105px !important;
    background: var(--ui-surface);
}

.role-card[b-lye5rvn55s] {
    position: relative;
    height: 100%;
    padding: 35px;
    border: 1px solid rgba(var(--ui-ink-rgb), 0.09);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(var(--ui-ink-rgb), .045), rgba(var(--ui-ink-rgb), .015)), var(--ui-surface-2);
    transition: .25s ease;
    overflow: hidden;
}

    .role-card:hover[b-lye5rvn55s] {
        transform: translateY(-5px);
        border-color: rgba(var(--ui-brand-rgb), .22);
    }

.featured-role[b-lye5rvn55s] {
    border-color: rgba(var(--ui-brand-rgb), .24);
    background: radial-gradient(circle at 85% 20%, rgba(var(--ui-brand-rgb), .12), transparent 35%), var(--ui-surface-2);
}

.role-icon[b-lye5rvn55s] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 14px;
    background: rgba(var(--ui-brand-rgb), .11);
    color: var(--bm-orange);
    font-size: 20px;
}

.role-card > span[b-lye5rvn55s] {
    color: var(--bm-orange);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .13em;
}

.role-card h3[b-lye5rvn55s] {
    margin: 9px 0 12px;
    color: var(--ui-ink);
    font-size: 25px;
    letter-spacing: -.02em;
}

.role-card p[b-lye5rvn55s] {
    margin: 0;
    color: var(--ui-text);
    font-size: 14px;
    line-height: 1.75;
}

/* =========================================================
   MOBILE
   ========================================================= */

.mobile-section[b-lye5rvn55s] {
    padding-top: 105px !important;
    padding-bottom: 105px !important;
    background: radial-gradient(circle at 15% 50%, rgba(var(--ui-brand-rgb), .08), transparent 32%), var(--bm-bg);
}

.mobile-image-preview[b-lye5rvn55s] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 530px;
    padding: 30px;
}

.mobile-image-glow[b-lye5rvn55s] {
    position: absolute;
    width: 310px;
    height: 310px;
    border-radius: 50%;
    background: rgba(var(--ui-brand-rgb), .13);
    filter: blur(75px);
}

.mobile-preview-image[b-lye5rvn55s] {
    position: relative;
    z-index: 2;
    display: block;
    max-width: min(100%, 390px);
    max-height: 580px;
    object-fit: contain;
    border-radius: 28px;
    filter: drop-shadow(0 30px 60px rgba(16, 24, 40, 0.14)) drop-shadow(0 0 35px rgba(var(--ui-brand-rgb), .08));
}

.mobile-section h2[b-lye5rvn55s] {
    color: var(--ui-ink);
    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.06;
    letter-spacing: -.045em;
    font-weight: 800;
}

.check-list[b-lye5rvn55s] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .check-list > div[b-lye5rvn55s] {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--ui-text);
        font-size: 13px;
    }

    .check-list i[b-lye5rvn55s] {
        color: var(--bm-orange);
        font-size: 15px;
    }

/* =========================================================
   PRICING
   ========================================================= */

.pricing-section[b-lye5rvn55s] {
    padding-top: 110px !important;
    padding-bottom: 115px !important;
    background: linear-gradient(180deg, var(--ui-surface), var(--ui-bg));
}

    .pricing-section .section-heading p[b-lye5rvn55s] {
        color: var(--ui-text);
    }

.plan-card[b-lye5rvn55s] {
    position: relative;
    height: 100%;
    min-height: 300px;
    padding: 27px;
    border: 1px solid rgba(var(--ui-ink-rgb), 0.09);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(var(--ui-ink-rgb), .045), rgba(var(--ui-ink-rgb), .015)), var(--ui-surface-2);
    transition: .25s ease;
    overflow: hidden;
}

    .plan-card:hover[b-lye5rvn55s] {
        transform: translateY(-5px);
        border-color: rgba(var(--ui-brand-rgb), .22);
        box-shadow: 0 20px 55px rgba(16, 24, 40, 0.07);
    }

.featured-plan[b-lye5rvn55s] {
    border-color: rgba(var(--ui-brand-rgb), .55);
    background: radial-gradient(circle at 85% 0, rgba(var(--ui-brand-rgb), .12), transparent 35%), var(--ui-surface-2);
    box-shadow: 0 20px 65px rgba(var(--ui-brand-rgb), .08);
}

.popular-badge[b-lye5rvn55s] {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(var(--ui-brand-rgb), .13);
    border: 1px solid rgba(var(--ui-brand-rgb), .20);
    color: var(--bm-orange);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .1em;
}

.plan-top[b-lye5rvn55s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.plan-name[b-lye5rvn55s] {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(var(--ui-brand-rgb), .10);
    color: var(--bm-orange);
    font-size: 11px;
    font-weight: 850;
}

.plan-card h3[b-lye5rvn55s] {
    margin: 18px 0 13px;
    color: var(--ui-ink);
    font-size: 21px;
    font-weight: 750;
}

.plan-price[b-lye5rvn55s] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

    .plan-price strong[b-lye5rvn55s] {
        color: var(--ui-ink);
        font-size: 40px;
        line-height: 1;
        letter-spacing: -.045em;
        font-weight: 800;
    }

    .plan-price span[b-lye5rvn55s] {
        color: var(--ui-muted);
        font-size: 11px;
    }

.plan-limit[b-lye5rvn55s] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    color: var(--ui-text);
    font-size: 12px;
}

    .plan-limit i[b-lye5rvn55s] {
        color: var(--bm-orange);
    }

.plan-card .btn-outline-dark[b-lye5rvn55s] {
    color: var(--ui-ink) !important;
    border-color: rgba(var(--ui-ink-rgb), 0.15) !important;
    background: rgba(var(--ui-ink-rgb), .025) !important;
}

    .plan-card .btn-outline-dark:hover[b-lye5rvn55s] {
        color: var(--ui-ink) !important;
        border-color: var(--bm-orange) !important;
        background: rgba(var(--ui-brand-rgb), .08) !important;
    }

.plan-card .btn-primary[b-lye5rvn55s] {
    background: linear-gradient(135deg, var(--bm-orange), var(--bm-orange-dark)) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 10px 28px rgba(var(--ui-brand-rgb), .22);
}

/* =========================================================
   FINAL CTA
   ========================================================= */

.final-cta[b-lye5rvn55s] {
    padding-top: 90px !important;
    padding-bottom: 110px !important;
    background: radial-gradient(circle at 50% 50%, rgba(var(--ui-brand-rgb), .13), transparent 45%), var(--ui-bg);
}

.final-cta-card[b-lye5rvn55s] {
    position: relative;
    max-width: 930px;
    margin: 0 auto;
    padding: 70px 45px;
    border: 1px solid rgba(var(--ui-brand-rgb), .16);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(var(--ui-brand-rgb), .07), rgba(var(--ui-ink-rgb), .025)), var(--ui-surface);
    box-shadow: 0 30px 90px rgba(16, 24, 40, 0.11), 0 0 80px rgba(var(--ui-brand-rgb), .06);
    overflow: hidden;
}

    .final-cta-card[b-lye5rvn55s]::before {
        content: "";
        position: absolute;
        width: 300px;
        height: 300px;
        left: 50%;
        top: -220px;
        transform: translateX(-50%);
        border-radius: 50%;
        background: rgba(var(--ui-brand-rgb), .14);
        filter: blur(70px);
    }

.final-cta-icon[b-lye5rvn55s] {
    position: relative;
    z-index: 2;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    border-radius: 16px;
    background: rgba(var(--ui-brand-rgb), .12);
    color: var(--bm-orange);
    font-size: 23px;
}

.final-cta-card .section-eyebrow[b-lye5rvn55s] {
    position: relative;
    z-index: 2;
    justify-content: center;
}

.final-cta-card h2[b-lye5rvn55s] {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 16px auto 0;
    color: var(--ui-ink);
    font-size: clamp(38px, 4.5vw, 60px);
    line-height: 1.04;
    letter-spacing: -.05em;
    font-weight: 800;
}

.final-cta-card p[b-lye5rvn55s] {
    position: relative;
    z-index: 2;
    max-width: 620px;
    margin: 20px auto 0;
    color: var(--ui-text);
    font-size: 15px;
    line-height: 1.75;
}

.final-cta-card > .btn[b-lye5rvn55s] {
    position: relative;
    z-index: 2;
    margin-top: 28px;
}

.final-cta-card > small[b-lye5rvn55s] {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 15px;
    color: var(--ui-muted);
    font-size: 10px;
}

/* =========================================================
   FOOTER
   ========================================================= */

.landing-footer[b-lye5rvn55s] {
    padding-top: 35px !important;
    padding-bottom: 25px !important;
    background: var(--ui-bg);
    border-top: 1px solid rgba(var(--ui-ink-rgb), 0.08);
}

.footer-inner[b-lye5rvn55s] {
    display: grid;
    grid-template-columns: 1.5fr 2fr auto;
    align-items: center;
    gap: 35px;
}

    .footer-inner > div:first-child strong[b-lye5rvn55s] {
        display: block;
        color: var(--ui-ink);
        font-size: 17px;
        letter-spacing: -.03em;
    }

        .footer-inner > div:first-child strong span[b-lye5rvn55s] {
            color: var(--bm-orange);
        }

    .footer-inner > div:first-child small[b-lye5rvn55s] {
        display: block;
        margin-top: 5px;
        color: var(--ui-muted);
        font-size: 10px;
    }

.footer-links[b-lye5rvn55s] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
}

    .footer-links a[b-lye5rvn55s] {
        color: var(--ui-muted);
        font-size: 11px;
        font-weight: 600;
        transition: color .2s ease;
    }

        .footer-links a:hover[b-lye5rvn55s] {
            color: var(--bm-orange);
        }

.footer-copy[b-lye5rvn55s] {
    color: var(--ui-muted);
    font-size: 10px;
    white-space: nowrap;
}

/* =========================================================
   BUTTON FIXES
   ========================================================= */

.landing-hero .btn[b-lye5rvn55s],
.workflow-section .btn[b-lye5rvn55s],
.time-section .btn[b-lye5rvn55s],
.pricing-section .btn[b-lye5rvn55s],
.final-cta .btn[b-lye5rvn55s] {
    border-radius: 11px;
    font-weight: 700;
}

.landing-hero .btn-lg[b-lye5rvn55s],
.workflow-section .btn-lg[b-lye5rvn55s],
.final-cta .btn-lg[b-lye5rvn55s] {
    padding-top: 12px;
    padding-bottom: 12px;
}

/* =========================================================
   RESPONSIVE - <= 1199
   ========================================================= */

@media (max-width: 1199.98px) {

    .landing-nav-menu[b-lye5rvn55s] {
        gap: 18px;
    }

    .hero-title[b-lye5rvn55s] {
        font-size: clamp(43px, 5.2vw, 65px);
    }

    .dashboard-preview[b-lye5rvn55s] {
        transform: none;
    }

        .dashboard-preview:hover[b-lye5rvn55s] {
            transform: translateY(-4px);
        }

    .footer-inner[b-lye5rvn55s] {
        grid-template-columns: 1fr 1fr;
    }

    .footer-copy[b-lye5rvn55s] {
        grid-column: 1 / -1;
    }
}

/* =========================================================
   RESPONSIVE - <= 991
   ========================================================= */

@media (max-width: 991.98px) {

    .landing-hero[b-lye5rvn55s] {
        min-height: auto;
    }

    .landing-nav[b-lye5rvn55s] {
        min-height: 72px;
    }

    .landing-nav-menu[b-lye5rvn55s] {
        display: none;
    }

    .landing-nav-actions[b-lye5rvn55s] {
        margin-left: auto;
    }

    .hero-title[b-lye5rvn55s] {
        max-width: 850px;
        font-size: clamp(45px, 8vw, 68px);
    }

    .dashboard-preview[b-lye5rvn55s] {
        max-width: 650px;
        margin: 10px auto 0;
    }

    .features-section[b-lye5rvn55s],
    .workflow-section[b-lye5rvn55s],
    .time-section[b-lye5rvn55s],
    .roles-section[b-lye5rvn55s],
    .mobile-section[b-lye5rvn55s],
    .pricing-section[b-lye5rvn55s] {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }

    .mobile-image-preview[b-lye5rvn55s] {
        min-height: 430px;
    }

    .footer-inner[b-lye5rvn55s] {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-links[b-lye5rvn55s] {
        justify-content: center;
    }

    .footer-copy[b-lye5rvn55s] {
        grid-column: auto;
    }
}

/* =========================================================
   RESPONSIVE - <= 767
   ========================================================= */

@media (max-width: 767.98px) {

    .landing-nav[b-lye5rvn55s] {
        padding-left: 8px;
        padding-right: 8px;
    }

    .brand[b-lye5rvn55s] {
        font-size: 20px;
    }

    .nav-login[b-lye5rvn55s] {
        display: none !important;
    }

    .nav-action[b-lye5rvn55s] {
        padding-left: 15px !important;
        padding-right: 15px !important;
        font-size: 12px;
    }

    .landing-hero .container[b-lye5rvn55s] {
        padding-left: 14px;
        padding-right: 14px;
    }

    .hero-title[b-lye5rvn55s] {
        font-size: clamp(39px, 11vw, 56px);
        line-height: 1;
    }

    .hero-description[b-lye5rvn55s] {
        font-size: 15px;
        line-height: 1.7;
    }

    .hero-trust[b-lye5rvn55s] {
        gap: 11px 17px;
    }

        .hero-trust span[b-lye5rvn55s] {
            font-size: 11px;
        }

    .preview-stats[b-lye5rvn55s] {
        gap: 6px;
    }

    .preview-stat[b-lye5rvn55s] {
        padding: 9px;
    }

    .preview-stat-icon[b-lye5rvn55s] {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .preview-stat strong[b-lye5rvn55s] {
        font-size: 15px;
    }

    .preview-stat small[b-lye5rvn55s] {
        font-size: 8px;
    }

    .dashboard-preview[b-lye5rvn55s] {
        padding: 15px;
        border-radius: 19px;
    }

    .section-heading h2[b-lye5rvn55s],
    .workflow-section h2[b-lye5rvn55s],
    .time-section h2[b-lye5rvn55s],
    .mobile-section h2[b-lye5rvn55s] {
        font-size: 36px;
    }

    .section-heading p[b-lye5rvn55s] {
        font-size: 14px;
    }

    .feature-card[b-lye5rvn55s] {
        min-height: 255px;
        padding: 24px;
    }

    .workflow-list[b-lye5rvn55s] {
        padding-left: 0;
    }

        .workflow-list[b-lye5rvn55s]::before {
            display: none;
        }

    .workflow-item[b-lye5rvn55s] {
        padding: 16px;
    }

    .time-dashboard[b-lye5rvn55s] {
        padding: 18px;
    }

    .time-value[b-lye5rvn55s] {
        font-size: 47px;
    }

    .role-card[b-lye5rvn55s] {
        padding: 28px;
    }

    .mobile-image-preview[b-lye5rvn55s] {
        min-height: 370px;
        padding: 15px;
    }

    .mobile-preview-image[b-lye5rvn55s] {
        max-width: 300px;
    }

    .plan-card[b-lye5rvn55s] {
        min-height: 285px;
    }

    .final-cta[b-lye5rvn55s] {
        padding-top: 65px !important;
        padding-bottom: 75px !important;
    }

    .final-cta-card[b-lye5rvn55s] {
        padding: 48px 22px;
        border-radius: 22px;
    }

        .final-cta-card h2[b-lye5rvn55s] {
            font-size: 38px;
        }
}

/* =========================================================
   RESPONSIVE - <= 480
   ========================================================= */

@media (max-width: 480px) {

    .landing-nav[b-lye5rvn55s] {
        gap: 10px;
    }

    .brand[b-lye5rvn55s] {
        font-size: 18px;
    }

    .nav-action[b-lye5rvn55s] {
        font-size: 11px;
    }

    .hero-eyebrow[b-lye5rvn55s],
    .section-eyebrow[b-lye5rvn55s] {
        font-size: 9px;
        letter-spacing: .12em;
    }

    .hero-title[b-lye5rvn55s] {
        font-size: 39px;
    }

    .hero-description[b-lye5rvn55s] {
        font-size: 14px;
    }

    .landing-hero .btn-lg[b-lye5rvn55s] {
        width: 100%;
    }

    .btn-hero-link[b-lye5rvn55s] {
        width: 100%;
    }

    .hero-trust[b-lye5rvn55s] {
        flex-direction: column;
        gap: 9px;
    }

    .preview-stats[b-lye5rvn55s] {
        grid-template-columns: 1fr;
    }

    .preview-stat[b-lye5rvn55s] {
        padding: 10px;
    }

    .preview-assignment[b-lye5rvn55s] {
        padding: 10px;
    }

    .preview-time[b-lye5rvn55s] {
        font-size: 10px;
    }

    .preview-section-title[b-lye5rvn55s] {
        font-size: 10px;
    }

    .section-heading h2[b-lye5rvn55s],
    .workflow-section h2[b-lye5rvn55s],
    .time-section h2[b-lye5rvn55s],
    .mobile-section h2[b-lye5rvn55s] {
        font-size: 33px;
    }

    .feature-card[b-lye5rvn55s] {
        min-height: 265px;
    }

    .time-summary[b-lye5rvn55s] {
        grid-template-columns: 1fr;
    }

        .time-summary > div[b-lye5rvn55s] {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

    .final-cta-card h2[b-lye5rvn55s] {
        font-size: 34px;
    }

    .final-cta-card .btn[b-lye5rvn55s] {
        width: 100%;
    }

    .footer-links[b-lye5rvn55s] {
        gap: 12px;
    }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .feature-card[b-lye5rvn55s],
    .plan-card[b-lye5rvn55s],
    .role-card[b-lye5rvn55s],
    .workflow-item[b-lye5rvn55s],
    .dashboard-preview[b-lye5rvn55s],
    .landing-hero .btn[b-lye5rvn55s],
    .final-cta .btn[b-lye5rvn55s],
    .nav-action[b-lye5rvn55s] {
        transition: none !important;
        transform: none !important;
    }
}

[b-lye5rvn55s]::selection {
    background: rgba(var(--ui-brand-rgb), .35);
    color: var(--ui-ink);
}

/* =========================================================
   FEATURE SECTION - FIX CONTRAST
   ========================================================= */

/* Glaven tekst vo feature kartite */
.feature-card p[b-lye5rvn55s] {
    color: var(--ui-subtle) !important;
    opacity: 1 !important;
    font-size: 15px;
    line-height: 1.75;
}

/* Naslovite na feature kartite */
.feature-card h3[b-lye5rvn55s],
.feature-card h4[b-lye5rvn55s] {
    color: var(--ui-ink) !important;
    opacity: 1 !important;
}

/* Linkot pod opisot */
.feature-link[b-lye5rvn55s] {
    color: var(--ui-subtle) !important;
    opacity: 1 !important;
    font-weight: 600;
}

    .feature-link:hover[b-lye5rvn55s] {
        color: var(--ui-brand) !important;
    }

/* Glavniot opis pod naslovot na sekcijata */
.section-heading p[b-lye5rvn55s] {
    color: var(--ui-subtle) !important;
    opacity: 1 !important;
}

/* =========================================================
   GLOBAL CONTRAST FIX
   BauManagement Landing Page
========================================================= */


/* =========================================================
   1. GENERAL SECTION TEXT
========================================================= */

.section-heading h2[b-lye5rvn55s] {
    color: var(--ui-ink) !important;
    opacity: 1 !important;
}

.section-heading p[b-lye5rvn55s] {
    color: var(--ui-muted) !important;
    opacity: 1 !important;
}

.section-eyebrow[b-lye5rvn55s] {
    color: var(--ui-brand) !important;
    opacity: 1 !important;
    font-weight: 800;
}


/* =========================================================
   2. FEATURES - WHITE BACKGROUND
========================================================= */

.features-section[b-lye5rvn55s] {
    background: #ffffff;
}

.feature-card[b-lye5rvn55s] {
    color: var(--ui-ink) !important;
    opacity: 1 !important;
}

    .feature-card h3[b-lye5rvn55s] {
        color: var(--ui-ink) !important;
        opacity: 1 !important;
        font-weight: 700;
    }

    .feature-card p[b-lye5rvn55s] {
        color: var(--ui-muted) !important;
        opacity: 1 !important;
        font-weight: 400;
        line-height: 1.75;
    }

.feature-link[b-lye5rvn55s] {
    color: var(--ui-subtle) !important;
    opacity: 1 !important;
    font-weight: 600;
}

    .feature-link:hover[b-lye5rvn55s] {
        color: var(--ui-brand) !important;
    }


/* =========================================================
   3. INTRO
========================================================= */

.intro-section[b-lye5rvn55s] {
    background: #ffffff;
}

    .intro-section h2[b-lye5rvn55s] {
        color: var(--ui-ink) !important;
        opacity: 1 !important;
    }

    .intro-section p[b-lye5rvn55s] {
        color: var(--ui-muted) !important;
        opacity: 1 !important;
    }


/* =========================================================
   4. ROLES - DARK BACKGROUND
========================================================= */

.roles-section[b-lye5rvn55s] {
    color: var(--ui-ink);
}

    .roles-section .section-heading h2[b-lye5rvn55s] {
        color: var(--ui-ink) !important;
    }

    .roles-section .section-heading p[b-lye5rvn55s] {
        color: var(--ui-subtle) !important;
    }

.role-card[b-lye5rvn55s] {
    color: var(--ui-ink) !important;
}

    .role-card span[b-lye5rvn55s] {
        color: var(--ui-subtle) !important;
        opacity: 1 !important;
    }

    .role-card h3[b-lye5rvn55s] {
        color: var(--ui-ink) !important;
        opacity: 1 !important;
        font-weight: 700;
    }

    .role-card p[b-lye5rvn55s] {
        color: var(--ui-subtle) !important;
        opacity: 1 !important;
        line-height: 1.7;
    }

.role-icon[b-lye5rvn55s] {
    opacity: 1 !important;
}


/* =========================================================
   5. WORKFLOW - DARK BACKGROUND
========================================================= */

.workflow-section[b-lye5rvn55s] {
    color: var(--ui-ink);
}

    .workflow-section h2[b-lye5rvn55s] {
        color: var(--ui-ink) !important;
        opacity: 1 !important;
    }

    .workflow-section .text-muted[b-lye5rvn55s] {
        color: var(--ui-subtle) !important;
        opacity: 1 !important;
    }

.workflow-item h3[b-lye5rvn55s] {
    color: var(--ui-ink) !important;
    opacity: 1 !important;
    font-weight: 700;
}

.workflow-item p[b-lye5rvn55s] {
    color: var(--ui-subtle) !important;
    opacity: 1 !important;
}

.workflow-number[b-lye5rvn55s] {
    color: var(--ui-ink) !important;
    opacity: 1 !important;
}


/* =========================================================
   6. MOBILE SECTION - WHITE BACKGROUND
========================================================= */

.mobile-section[b-lye5rvn55s] {
    background: #ffffff;
}

    .mobile-section h2[b-lye5rvn55s] {
        color: var(--ui-ink) !important;
        opacity: 1 !important;
    }

    .mobile-section .text-muted[b-lye5rvn55s] {
        color: var(--ui-muted) !important;
        opacity: 1 !important;
    }

.check-list[b-lye5rvn55s] {
    color: var(--ui-subtle) !important;
}

    .check-list > div[b-lye5rvn55s] {
        color: var(--ui-subtle) !important;
        opacity: 1 !important;
    }

    .check-list i[b-lye5rvn55s] {
        color: #22c55e !important;
        opacity: 1 !important;
    }


/* =========================================================
   7. PRICING - DARK BACKGROUND
========================================================= */

.pricing-section[b-lye5rvn55s] {
    color: var(--ui-ink);
}

    .pricing-section .section-heading h2[b-lye5rvn55s] {
        color: var(--ui-ink) !important;
    }

    .pricing-section .section-heading p[b-lye5rvn55s] {
        color: var(--ui-subtle) !important;
    }

.plan-card[b-lye5rvn55s] {
    color: var(--ui-ink) !important;
    opacity: 1 !important;
}

.plan-name[b-lye5rvn55s] {
    color: var(--ui-brand) !important;
    opacity: 1 !important;
}

.plan-card h3[b-lye5rvn55s] {
    opacity: 1 !important;
}

.plan-price strong[b-lye5rvn55s] {
    color: var(--ui-ink) !important;
    opacity: 1 !important;
}

.plan-price span[b-lye5rvn55s] {
    color: var(--ui-subtle) !important;
    opacity: 1 !important;
}

.plan-limit[b-lye5rvn55s] {
    color: var(--ui-text) !important;
    opacity: 1 !important;
}

    .plan-limit i[b-lye5rvn55s] {
        color: var(--ui-subtle) !important;
        opacity: 1 !important;
    }

.popular-badge[b-lye5rvn55s] {
    color: var(--ui-brand) !important;
    opacity: 1 !important;
}


/* =========================================================
   8. DASHBOARD PREVIEW - DARK
========================================================= */

.dashboard-preview[b-lye5rvn55s] {
    color: var(--ui-ink);
}

    .dashboard-preview strong[b-lye5rvn55s] {
        color: var(--ui-ink) !important;
    }

    .dashboard-preview span[b-lye5rvn55s] {
        color: var(--ui-subtle) !important;
    }

.preview-assignment-content strong[b-lye5rvn55s] {
    color: var(--ui-ink) !important;
}

.preview-assignment-content span[b-lye5rvn55s] {
    color: var(--ui-subtle) !important;
}

.preview-time[b-lye5rvn55s] {
    color: var(--ui-ink) !important;
}

    .preview-time small[b-lye5rvn55s] {
        color: var(--ui-subtle) !important;
    }

.preview-time-row[b-lye5rvn55s] {
    color: var(--ui-ink) !important;
}

    .preview-time-row span[b-lye5rvn55s] {
        color: var(--ui-subtle) !important;
    }

.preview-footer[b-lye5rvn55s] {
    color: var(--ui-subtle) !important;
}


/* =========================================================
   9. FINAL CTA
========================================================= */

.final-cta[b-lye5rvn55s] {
    color: var(--ui-ink);
}

    .final-cta h2[b-lye5rvn55s] {
        color: var(--ui-ink) !important;
        opacity: 1 !important;
    }

    .final-cta p[b-lye5rvn55s] {
        color: var(--ui-text) !important;
        opacity: 1 !important;
    }

.final-cta-icon[b-lye5rvn55s] {
    opacity: 1 !important;
}


/* =========================================================
   10. FOOTER
========================================================= */

.footer-inner[b-lye5rvn55s] {
    color: var(--ui-ink);
}

.footer-copy[b-lye5rvn55s] {
    color: var(--ui-subtle) !important;
    opacity: 1 !important;
}

.footer-links a[b-lye5rvn55s] {
    color: var(--ui-subtle) !important;
    opacity: 1 !important;
}

    .footer-links a:hover[b-lye5rvn55s] {
        color: var(--ui-brand) !important;
    }


/* =========================================================
   11. BOOTSTRAP text-muted FIX
========================================================= */

/* Bootstrap .text-muted e premnogu slab vo ovoj dizajn */
.text-muted[b-lye5rvn55s] {
    color: var(--ui-muted) !important;
    opacity: 1 !important;
}


/* Na dark sections mora da bide svetol */
.roles-section .text-muted[b-lye5rvn55s],
.workflow-section .text-muted[b-lye5rvn55s],
.pricing-section .text-muted[b-lye5rvn55s],
.final-cta .text-muted[b-lye5rvn55s] {
    color: var(--ui-subtle) !important;
}


/* =========================================================
   12. PREVENT LOW OPACITY TEXT
========================================================= */

.feature-card *[b-lye5rvn55s],
.role-card *[b-lye5rvn55s],
.workflow-item *[b-lye5rvn55s],
.plan-card *[b-lye5rvn55s],
.section-heading *[b-lye5rvn55s] {
    /* ne dozvoluvaj tekstot da bide skoro nevidliv */
}

.feature-card p[b-lye5rvn55s],
.feature-card h3[b-lye5rvn55s],
.feature-link[b-lye5rvn55s],
.role-card p[b-lye5rvn55s],
.role-card h3[b-lye5rvn55s],
.role-card span[b-lye5rvn55s],
.workflow-item p[b-lye5rvn55s],
.workflow-item h3[b-lye5rvn55s],
.plan-card h3[b-lye5rvn55s],
.plan-price[b-lye5rvn55s],
.plan-limit[b-lye5rvn55s] {
    opacity: 1 !important;
}

/* =========================================================
   FINAL NAV OVERRIDE
   Gleicher Stil wie Preise.razor
   - Hover: dunkle abgerundete Fläche
   - Active: orange
   - Anmelden + Kostenlos starten: kompakt, nebeneinander
   - Mobile: nur Toggle für Navigation
   ========================================================= */

.landing-nav[b-lye5rvn55s] {
    position: relative !important;
    z-index: 50 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    width: 100% !important;
    min-height: 76px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid rgba(var(--ui-ink-rgb), 0.08) !important;
}

    .landing-nav .brand[b-lye5rvn55s] {
        display: inline-flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        color: var(--ui-ink) !important;
        font-size: 1.25rem !important;
        font-weight: 800 !important;
        letter-spacing: -.045em !important;
        line-height: 1 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    .landing-nav .brand-bau[b-lye5rvn55s] {
        color: var(--ui-ink) !important;
        font-weight: 800 !important;
    }

    .landing-nav .brand-management[b-lye5rvn55s] {
        color: var(--ui-brand) !important;
        font-weight: 800 !important;
    }

.landing-nav-menu[b-lye5rvn55s] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-left: auto !important;
    margin-right: 4px !important;
}

    .landing-nav-menu a[b-lye5rvn55s] {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 40px !important;
        padding: 0 13px !important;
        color: var(--ui-subtle) !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: 9px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        transition: color .2s ease, background .2s ease, border-color .2s ease !important;
    }

        .landing-nav-menu a:hover[b-lye5rvn55s],
        .landing-nav-menu a:focus-visible[b-lye5rvn55s] {
            color: var(--ui-ink) !important;
            background: var(--ui-surface-2) !important;
            border-color: var(--ui-line) !important;
            outline: none !important;
        }

        .landing-nav-menu a.nav-active[b-lye5rvn55s] {
            color: var(--ui-brand) !important;
            background: transparent !important;
            border-color: transparent !important;
        }

            .landing-nav-menu a.nav-active:hover[b-lye5rvn55s],
            .landing-nav-menu a.nav-active:focus-visible[b-lye5rvn55s] {
                color: var(--ui-ink) !important;
                background: var(--ui-surface-2) !important;
                border-color: var(--ui-line) !important;
            }

    .landing-nav-menu .nav-b2b[b-lye5rvn55s] {
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        padding-left: 13px !important;
        padding-right: 13px !important;
        border: 1px solid rgba(var(--ui-brand-rgb), .35) !important;
        color: var(--ui-subtle) !important;
        background: transparent !important;
    }

        .landing-nav-menu .nav-b2b i[b-lye5rvn55s] {
            color: var(--ui-brand) !important;
            font-size: 13px !important;
        }

        .landing-nav-menu .nav-b2b:hover[b-lye5rvn55s],
        .landing-nav-menu .nav-b2b:focus-visible[b-lye5rvn55s] {
            color: var(--ui-ink) !important;
            background: var(--ui-surface-2) !important;
            border-color: var(--ui-brand) !important;
        }

.landing-nav-actions[b-lye5rvn55s] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-left: 0 !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

    .landing-nav-actions .nav-login[b-lye5rvn55s],
    .landing-nav-actions .nav-action[b-lye5rvn55s],
    .landing-nav > .nav-action[b-lye5rvn55s] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-height: 38px !important;
        height: 38px !important;
        padding: 0 20px !important;
        color: var(--ui-brand) !important;
        background: transparent !important;
        border: 1px solid var(--ui-brand) !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease !important;
    }

        .landing-nav-actions .nav-login:hover[b-lye5rvn55s],
        .landing-nav-actions .nav-action:hover[b-lye5rvn55s],
        .landing-nav > .nav-action:hover[b-lye5rvn55s] {
            color: #fff !important;
            background: var(--ui-brand) !important;
            border-color: var(--ui-brand) !important;
            transform: translateY(-1px) !important;
            box-shadow: none !important;
        }

/* Mobile toggle – hidden on desktop */
.bm-mobile-menu-toggle[b-lye5rvn55s] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
}

.bm-mobile-menu-button[b-lye5rvn55s] {
    display: none !important;
}

@media (max-width: 1199.98px) and (min-width: 901px) {
    .landing-nav-menu[b-lye5rvn55s] {
        gap: 6px !important;
    }

        .landing-nav-menu a[b-lye5rvn55s] {
            padding-left: 10px !important;
            padding-right: 10px !important;
        }

    .landing-nav-actions[b-lye5rvn55s] {
        gap: 6px !important;
    }

        .landing-nav-actions .nav-login[b-lye5rvn55s],
        .landing-nav-actions .nav-action[b-lye5rvn55s],
        .landing-nav > .nav-action[b-lye5rvn55s] {
            padding-left: 15px !important;
            padding-right: 15px !important;
            font-size: 11px !important;
        }
}

@media (max-width: 900px) {
    .landing-nav[b-lye5rvn55s] {
        min-height: 68px !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
    }

    .landing-nav-menu[b-lye5rvn55s] {
        display: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 10px !important;
        border: 1px solid rgba(var(--ui-brand-rgb), .25) !important;
        border-radius: 12px !important;
        background: var(--ui-surface-2) !important;
    }

    .landing-nav-actions[b-lye5rvn55s] {
        display: none !important;
    }

    .landing-nav .brand[b-lye5rvn55s] {
        font-size: 1.08rem !important;
    }

    .bm-mobile-menu-button[b-lye5rvn55s] {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 5px !important;
        width: 40px !important;
        height: 40px !important;
        margin-left: auto !important;
        padding: 9px !important;
        cursor: pointer !important;
        border: 1px solid rgba(var(--ui-brand-rgb), .65) !important;
        border-radius: 9px !important;
        background: rgba(var(--ui-brand-rgb), .08) !important;
    }

        .bm-mobile-menu-button span[b-lye5rvn55s] {
            display: block !important;
            width: 100% !important;
            height: 2px !important;
            border-radius: 99px !important;
            background: var(--ui-brand) !important;
            transition: transform .2s ease, opacity .2s ease !important;
        }

    .bm-mobile-menu-toggle:checked + .bm-mobile-menu-button + .landing-nav-menu[b-lye5rvn55s] {
        display: flex !important;
    }

    .bm-mobile-menu-toggle:checked + .bm-mobile-menu-button span:nth-child(1)[b-lye5rvn55s] {
        transform: translateY(7px) rotate(45deg) !important;
    }

    .bm-mobile-menu-toggle:checked + .bm-mobile-menu-button span:nth-child(2)[b-lye5rvn55s] {
        opacity: 0 !important;
    }

    .bm-mobile-menu-toggle:checked + .bm-mobile-menu-button span:nth-child(3)[b-lye5rvn55s] {
        transform: translateY(-7px) rotate(-45deg) !important;
    }
}
/* =========================================================
   FINAL MOBILE NAVIGATION FIX
   ========================================================= */

@media (max-width: 900px) {

    .landing-hero .landing-nav[b-lye5rvn55s] {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 18px 14px !important;
        gap: 0 !important;
        overflow: visible !important;
    }

        /* LOGO */
        .landing-hero .landing-nav .brand[b-lye5rvn55s] {
            display: inline-flex !important;
            flex: 0 0 auto !important;
            margin: 0 !important;
            padding: 0 !important;
            font-size: 1.05rem !important;
            line-height: 1 !important;
        }

    /* TOGGLE */
    .landing-hero .bm-mobile-menu-button[b-lye5rvn55s] {
        position: relative !important;
        display: flex !important;
        flex: 0 0 auto !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 0 0 auto !important;
        padding: 9px !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 5px !important;
        border: 1px solid rgba(var(--ui-brand-rgb), .75) !important;
        border-radius: 9px !important;
        background: rgba(var(--ui-brand-rgb), .08) !important;
        z-index: 100 !important;
    }

        .landing-hero .bm-mobile-menu-button span[b-lye5rvn55s] {
            display: block !important;
            width: 100% !important;
            height: 2px !important;
            margin: 0 !important;
            border-radius: 99px !important;
            background: var(--ui-brand) !important;
        }

    /* HIDDEN CHECKBOX */
    .landing-hero .bm-mobile-menu-toggle[b-lye5rvn55s] {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
        opacity: 0 !important;
    }

    /* MOBILE MENU */
    .landing-hero .landing-nav-menu[b-lye5rvn55s] {
        position: static !important;
        order: 10 !important;
        display: none !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 12px 0 0 0 !important;
        padding: 10px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 3px !important;
        box-sizing: border-box !important;
        border: 1px solid rgba(var(--ui-brand-rgb), .32) !important;
        border-radius: 14px !important;
        background: var(--ui-surface-2) !important;
        box-shadow: 0 20px 45px rgba(16, 24, 40, 0.14) !important;
        overflow: hidden !important;
    }

    /* OPEN */
    .landing-hero .bm-mobile-menu-toggle:checked ~ .landing-nav-menu[b-lye5rvn55s] {
        display: flex !important;
    }

    /* MENU LINKS */
    .landing-hero .landing-nav-menu > a[b-lye5rvn55s] {
        display: flex !important;
        width: 100% !important;
        min-height: 42px !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        border: 1px solid transparent !important;
        border-radius: 8px !important;
        color: var(--ui-subtle) !important;
        background: transparent !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

        .landing-hero .landing-nav-menu > a:hover[b-lye5rvn55s],
        .landing-hero .landing-nav-menu > a:focus-visible[b-lye5rvn55s] {
            color: var(--ui-ink) !important;
            background: var(--ui-surface-2) !important;
            border-color: var(--ui-line) !important;
        }

    /* B2B */
    .landing-hero .landing-nav-menu .nav-b2b[b-lye5rvn55s] {
        display: flex !important;
        width: 100% !important;
        border: 1px solid rgba(var(--ui-brand-rgb), .35) !important;
        color: var(--ui-subtle) !important;
        background: transparent !important;
    }

        .landing-hero .landing-nav-menu .nav-b2b i[b-lye5rvn55s] {
            color: var(--ui-brand) !important;
        }

    /* LOGIN / REGISTER INSIDE MOBILE MENU */
    .landing-hero .landing-nav-actions[b-lye5rvn55s] {
        order: 11 !important;
        display: none !important;
    }

    /* Toggle animation */
    .landing-hero .bm-mobile-menu-toggle:checked + .bm-mobile-menu-button
    span:nth-child(1)[b-lye5rvn55s] {
        transform: translateY(7px) rotate(45deg);
    }

    .landing-hero .bm-mobile-menu-toggle:checked + .bm-mobile-menu-button
    span:nth-child(2)[b-lye5rvn55s] {
        opacity: 0;
    }

    .landing-hero .bm-mobile-menu-toggle:checked + .bm-mobile-menu-button
    span:nth-child(3)[b-lye5rvn55s] {
        transform: translateY(-7px) rotate(-45deg);
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 520px) {

    .landing-hero .landing-nav[b-lye5rvn55s] {
        padding: 16px 14px !important;
    }

        .landing-hero .landing-nav .brand[b-lye5rvn55s] {
            font-size: 1rem !important;
        }

    .landing-hero .bm-mobile-menu-button[b-lye5rvn55s] {
        width: 38px !important;
        height: 38px !important;
    }

    .landing-hero .landing-nav-menu[b-lye5rvn55s] {
        margin-top: 10px !important;
        padding: 8px !important;
    }

        .landing-hero .landing-nav-menu > a[b-lye5rvn55s] {
            min-height: 40px !important;
            font-size: 12px !important;
        }
}

/* home.razor.css
   Extracted from the landing page Razor component.
   This file is intended for Blazor CSS isolation.
*/

/* Existing page styles before this block are intentionally preserved. */

/* ===== Premium 3D product experience ===== */
.landing-hero[b-lye5rvn55s] {
    overflow-x: hidden;
    position: relative;
}

.hero-title[b-lye5rvn55s] {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

    .hero-title span[b-lye5rvn55s] {
        display: inline;
    }


/* Huge typography that travels in from outside the screen */


    


    

    

    


    

        


    
    /* depth layers inside the dashboard */
    

    

    

    

    

    

    

    

    

    

    


    

    

    

        


@media (max-width: 575.98px) {
    .landing-hero .container[b-lye5rvn55s] {
        padding-left: 15px;
        padding-right: 15px;
    }

    .hero-title[b-lye5rvn55s] {
        font-size: clamp(1.95rem,8.4vw,2.8rem) !important;
        line-height: .99 !important;
        letter-spacing: -.045em !important;
        overflow-wrap: anywhere !important;
    }

        .hero-title span[b-lye5rvn55s] {
            display: block;
            max-width: 100%;
            font-size: .84em;
            overflow-wrap: anywhere;
        }

    .hero-description[b-lye5rvn55s] {
        font-size: .92rem;
        line-height: 1.65;
    }


    

        

        

    

    

    

        

    

    

    

    

    
}


.bm-photo-3d[b-lye5rvn55s] {
    transform-style: preserve-3d;
    perspective: 1200px;
}

    .bm-photo-3d .mobile-preview-image[b-lye5rvn55s] {
        transform: rotateY(-9deg) rotateX(3deg) translateZ(25px);
        transition: transform .5s ease,filter .5s ease;
        filter: drop-shadow(0 35px 45px rgba(16, 24, 40, 0.10));
    }

    .bm-photo-3d:hover .mobile-preview-image[b-lye5rvn55s] {
        transform: rotateY(4deg) rotateX(-2deg) translateZ(55px) scale(1.025);
    }

/* ===== 3D refinement layer ===== */


    

    


    


    


@keyframes bm-orb-float-b-lye5rvn55s {
    0%,100% {
        margin-top: 0;
    }

    50% {
        margin-top: -8px;
    }
}


/* ===== Final 3D layout polish ===== */
/* Keep the scroll scene cinematic, but remove the oversized empty black tail. */


    

    

.hero-title[b-lye5rvn55s],
.hero-description[b-lye5rvn55s],
h1[b-lye5rvn55s],
h2[b-lye5rvn55s],
h3[b-lye5rvn55s],
p[b-lye5rvn55s] {
    overflow: visible;
}

.hero-title[b-lye5rvn55s] {
    white-space: normal;
}

    .hero-title span[b-lye5rvn55s] {
        white-space: normal;
    }

/* Shared depth language for the rest of the landing page. */
.time-dashboard[b-lye5rvn55s],
.mobile-image-preview[b-lye5rvn55s],
.final-cta-card[b-lye5rvn55s],
.intro-section .section-heading[b-lye5rvn55s],
.roles-section .p-4[b-lye5rvn55s],
.faq-section .p-4[b-lye5rvn55s],
.time-feature[b-lye5rvn55s],
.dashboard-preview[b-lye5rvn55s] {
    transform-style: preserve-3d;
    perspective: 1200px;
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease;
}

.time-dashboard[b-lye5rvn55s],
.mobile-image-preview[b-lye5rvn55s],
.final-cta-card[b-lye5rvn55s],
.intro-section .section-heading[b-lye5rvn55s],
.roles-section .p-4[b-lye5rvn55s],
.faq-section .p-4[b-lye5rvn55s],
.dashboard-preview[b-lye5rvn55s] {
    position: relative;
    border: 1px solid rgba(20, 20, 20, .08);
    box-shadow: 0 24px 45px rgba(16, 18, 24, .12), 0 3px 0 rgba(255,255,255,.7) inset;
}

    .time-dashboard[b-lye5rvn55s]::before,
    .mobile-image-preview[b-lye5rvn55s]::before,
    .final-cta-card[b-lye5rvn55s]::before,
    .intro-section .section-heading[b-lye5rvn55s]::before,
    .roles-section .p-4[b-lye5rvn55s]::before,
    .faq-section .p-4[b-lye5rvn55s]::before,
    .dashboard-preview[b-lye5rvn55s]::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(125deg, rgba(var(--ui-ink-rgb), .24), transparent 25%, transparent 70%, rgba(var(--ui-brand-rgb), .10));
        opacity: .55;
        mix-blend-mode: soft-light;
    }

    .time-dashboard:hover[b-lye5rvn55s],
    .mobile-image-preview:hover[b-lye5rvn55s],
    .final-cta-card:hover[b-lye5rvn55s],
    .intro-section .section-heading:hover[b-lye5rvn55s],
    .roles-section .p-4:hover[b-lye5rvn55s],
    .faq-section .p-4:hover[b-lye5rvn55s],
    .dashboard-preview:hover[b-lye5rvn55s] {
        transform: translateY(-9px) rotateX(2deg) rotateY(-2deg);
        border-color: rgba(var(--ui-brand-rgb), .28);
        box-shadow: 0 32px 60px rgba(16, 18, 24, .18), 0 3px 0 rgba(255,255,255,.8) inset;
    }

.time-feature[b-lye5rvn55s] {
    position: relative;
    transform: translateZ(0);
    border-radius: 18px;
    padding: 13px 15px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,248,250,.78));
    box-shadow: 0 12px 24px rgba(20, 23, 30, .08), 0 1px 0 rgba(255,255,255,.9) inset;
}

    .time-feature:hover[b-lye5rvn55s] {
        transform: translate3d(8px, -4px, 24px) rotateY(-4deg);
        box-shadow: 14px 20px 35px rgba(20, 23, 30, .14);
    }

.time-feature-icon[b-lye5rvn55s] {
    transform: translateZ(22px);
    box-shadow: 0 8px 16px rgba(var(--ui-brand-rgb), .18);
}

.time-dashboard[b-lye5rvn55s] {
    transform: rotateY(-3deg) rotateX(2deg);
}

    .time-dashboard:hover[b-lye5rvn55s] {
        transform: translateY(-10px) rotateY(2deg) rotateX(-1deg);
    }

.mobile-image-preview[b-lye5rvn55s] {
    transform: rotateY(5deg) rotateX(2deg);
}

.final-cta-card[b-lye5rvn55s] {
    transform: rotateX(1deg);
}

.roles-section .p-4[b-lye5rvn55s],
.faq-section .p-4[b-lye5rvn55s] {
    transform: rotateY(-1deg);
}

@media (max-width: 991.98px) {


    

        

        

    .time-dashboard[b-lye5rvn55s],
    .mobile-image-preview[b-lye5rvn55s] {
        transform: none;
    }

        .time-dashboard:hover[b-lye5rvn55s],
        .mobile-image-preview:hover[b-lye5rvn55s] {
            transform: translateY(-6px);
        }
}

@media (max-width: 575.98px) {


    

        

        

    .time-feature[b-lye5rvn55s] {
        padding: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .time-dashboard[b-lye5rvn55s],
    .mobile-image-preview[b-lye5rvn55s],
    .final-cta-card[b-lye5rvn55s],
    .intro-section .section-heading[b-lye5rvn55s],
    .roles-section .p-4[b-lye5rvn55s],
    .faq-section .p-4[b-lye5rvn55s],
    .time-feature[b-lye5rvn55s],
    .dashboard-preview[b-lye5rvn55s] {
        transition: none;
        transform: none;
    }
}

/* ===== Mobile horizontal overflow fix ===== */
:global(html)[b-lye5rvn55s],
:global(body)[b-lye5rvn55s] {
    max-width: 100%;
    overflow-x: hidden;
}

:global(body)[b-lye5rvn55s] {
    position: relative;
}

.landing-hero[b-lye5rvn55s],
.intro-section[b-lye5rvn55s],
.time-section[b-lye5rvn55s],
.roles-section[b-lye5rvn55s],
.mobile-section[b-lye5rvn55s],
.final-cta[b-lye5rvn55s],
.landing-footer[b-lye5rvn55s] {
    max-width: 100vw;
    overflow-x: clip;
}

@media (max-width: 991.98px) {
    .landing-nav[b-lye5rvn55s],
    .landing-hero > .container[b-lye5rvn55s],
    .intro-section > .container[b-lye5rvn55s],
    .time-section > .container[b-lye5rvn55s],
    .roles-section > .container[b-lye5rvn55s],
    .mobile-section > .container[b-lye5rvn55s],
    .final-cta > .container[b-lye5rvn55s] {
        max-width: 100%;
    }


    

    

    

    

    

    

    .mobile-image-preview[b-lye5rvn55s],
    .time-dashboard[b-lye5rvn55s],
    .final-cta-card[b-lye5rvn55s],
    .roles-section .p-4[b-lye5rvn55s],
    .faq-section .p-4[b-lye5rvn55s] {
        max-width: 100%;
    }

    .mobile-preview-image[b-lye5rvn55s] {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 575.98px) {
    .landing-hero .container[b-lye5rvn55s] {
        width: 100%;
        max-width: 100%;
    }

    .hero-title[b-lye5rvn55s],
.hero-description[b-lye5rvn55s],
.section-heading[b-lye5rvn55s] {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    

    

    

    .hero-trust[b-lye5rvn55s] {
        max-width: 100%;
    }

        .hero-trust span[b-lye5rvn55s] {
            max-width: calc(100vw - 40px);
        }
}

/* =========================================================
   FINAL MOBILE 3D SCROLL FIX
   4 clear scenes: 1 → 2 → 3 → 4
========================================================= */


/* Desktop - keep the cinematic scroll */


/* Mobile - give every scene enough scroll space */


/* =========================================================
   BAUMANAGEMENT - LANDING PAGE & 3D OPTIMIZATIONS
   ========================================================= */

/* =========================================================
   BASE & LAYOUT
   ========================================================= */

.landing-hero[b-lye5rvn55s],
.intro-section[b-lye5rvn55s],
.features-section[b-lye5rvn55s],
.workflow-section[b-lye5rvn55s],
.time-section[b-lye5rvn55s],
.roles-section[b-lye5rvn55s],
.mobile-section[b-lye5rvn55s],
.pricing-section[b-lye5rvn55s],
.final-cta[b-lye5rvn55s],
.landing-footer[b-lye5rvn55s] {
    color: var(--bm-text);
}

.landing-hero[b-lye5rvn55s],
.intro-section[b-lye5rvn55s],
.features-section[b-lye5rvn55s],
.workflow-section[b-lye5rvn55s],
.time-section[b-lye5rvn55s],
.roles-section[b-lye5rvn55s],
.mobile-section[b-lye5rvn55s],
.pricing-section[b-lye5rvn55s],
.final-cta[b-lye5rvn55s] {
    background: var(--bm-bg);
}

*[b-lye5rvn55s] {
    box-sizing: border-box;
}

a[b-lye5rvn55s] {
    text-decoration: none;
}

.text-muted[b-lye5rvn55s] {
    color: var(--bm-muted) !important;
}

/* =========================================================
   3D STAGE & SCROLL EXPERIENCE
   ========================================================= */


    

    

    


    

        


    

    

    

        

/* Responsive 3D view for Mobile & Tablet */


/* =========================================================
   NAVBAR
   ========================================================= */

.landing-hero[b-lye5rvn55s] {
    position: relative;
    min-height: 850px;
    overflow: hidden;
    background: radial-gradient(circle at 78% 20%, rgba(var(--ui-brand-rgb), .15), transparent 28%), radial-gradient(circle at 20% 50%, rgba(var(--ui-brand-rgb), .055), transparent 30%), var(--ui-bg);
}

.landing-nav[b-lye5rvn55s] {
    position: relative;
    z-index: 50;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid rgba(var(--ui-ink-rgb), 0.08);
}

.brand[b-lye5rvn55s] {
    display: inline-flex;
    align-items: center;
    color: var(--ui-ink) !important;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.04em;
    white-space: nowrap;
}

.brand-bau[b-lye5rvn55s] {
    color: var(--ui-ink);
}

.brand-management[b-lye5rvn55s] {
    color: var(--bm-orange);
}

.landing-nav-menu[b-lye5rvn55s] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-left: auto;
}

    .landing-nav-menu a[b-lye5rvn55s] {
        color: var(--ui-subtle);
        font-size: 13px;
        font-weight: 600;
        padding: 8px 12px;
        border-radius: 8px;
        transition: all 0.2s ease;
    }

        .landing-nav-menu a:hover[b-lye5rvn55s] {
            color: var(--ui-ink);
            background: rgba(var(--ui-ink-rgb), 0.06);
        }

.nav-login[b-lye5rvn55s] {
    border: 1px solid rgba(var(--ui-ink-rgb), 0.16) !important;
    color: var(--ui-ink) !important;
    background: transparent !important;
}

.nav-action[b-lye5rvn55s] {
    background: linear-gradient(135deg, var(--bm-orange), var(--bm-orange-dark)) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 8px 25px rgba(var(--ui-brand-rgb), .22);
}

/* =========================================================
   DASHBOARD PREVIEW CARD
   ========================================================= */

.dashboard-preview[b-lye5rvn55s] {
    position: relative;
    padding: 22px;
    border: 1px solid rgba(var(--ui-ink-rgb), 0.13);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(var(--ui-ink-rgb), .065), rgba(var(--ui-ink-rgb), .025)), var(--ui-surface);
    box-shadow: 0 35px 100px rgba(16, 24, 40, 0.14), 0 0 80px rgba(var(--ui-brand-rgb), .08);
    backdrop-filter: blur(18px);
    overflow: hidden;
}

.preview-top[b-lye5rvn55s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(var(--ui-ink-rgb), 0.08);
}

    .preview-top small[b-lye5rvn55s] {
        display: block;
        color: var(--ui-muted);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .14em;
    }

    .preview-top strong[b-lye5rvn55s] {
        color: var(--ui-ink);
        font-size: 15px;
    }

.live-badge[b-lye5rvn55s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid rgba(74,222,128,.18);
    border-radius: 999px;
    background: rgba(74,222,128,.07);
    color: #72df91;
    font-size: 10px;
    font-weight: 700;
}

    .live-badge > span[b-lye5rvn55s] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #4ade80;
    }

.preview-stats[b-lye5rvn55s] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
}

.preview-stat[b-lye5rvn55s] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(var(--ui-ink-rgb), 0.08);
    border-radius: 12px;
    background: rgba(var(--ui-ink-rgb), .025);
}

.preview-stat-icon[b-lye5rvn55s] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 13px;
}

    .preview-stat-icon.orange[b-lye5rvn55s] {
        background: rgba(var(--ui-brand-rgb), .12);
        color: #ff8a1c;
    }

    .preview-stat-icon.blue[b-lye5rvn55s] {
        background: rgba(59,130,246,.12);
        color: #60a5fa;
    }

    .preview-stat-icon.green[b-lye5rvn55s] {
        background: rgba(34,197,94,.12);
        color: #4ade80;
    }

.preview-stat strong[b-lye5rvn55s] {
    display: block;
    color: var(--ui-ink);
    font-size: 16px;
    line-height: 1;
}

.preview-stat small[b-lye5rvn55s] {
    display: block;
    margin-top: 2px;
    color: var(--ui-muted);
    font-size: 9px;
}

.preview-section-title[b-lye5rvn55s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 18px 0 8px;
    color: var(--ui-text);
    font-size: 11px;
    font-weight: 700;
}

.preview-assignment[b-lye5rvn55s] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-top: 6px;
    border: 1px solid rgba(var(--ui-ink-rgb), 0.07);
    border-radius: 12px;
    background: rgba(var(--ui-ink-rgb), .022);
}

.preview-avatar[b-lye5rvn55s] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(96,165,250,.13);
    color: #7db7ff;
    font-size: 10px;
    font-weight: 800;
}

    .preview-avatar.orange[b-lye5rvn55s] {
        background: rgba(var(--ui-brand-rgb), .13);
        color: var(--ui-brand-600);
    }

    .preview-avatar.green[b-lye5rvn55s] {
        background: rgba(34,197,94,.13);
        color: #65dc8b;
    }

.preview-assignment-content[b-lye5rvn55s] {
    flex: 1;
    min-width: 0;
}

    .preview-assignment-content strong[b-lye5rvn55s] {
        display: block;
        color: var(--ui-ink);
        font-size: 12px;
    }

    .preview-assignment-content span[b-lye5rvn55s] {
        display: flex;
        align-items: center;
        gap: 4px;
        color: var(--ui-muted);
        font-size: 10px;
    }

.preview-time[b-lye5rvn55s] {
    text-align: right;
    color: var(--ui-ink);
    font-size: 11px;
    font-weight: 700;
}

    .preview-time small[b-lye5rvn55s] {
        display: block;
        color: var(--ui-muted);
        font-size: 9px;
    }

.preview-time-row[b-lye5rvn55s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(var(--ui-brand-rgb), .055);
    border: 1px solid rgba(var(--ui-brand-rgb), .10);
}

    .preview-time-row > div[b-lye5rvn55s] {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--ui-text);
        font-size: 10px;
    }

    .preview-time-row strong[b-lye5rvn55s] {
        color: var(--ui-ink);
        font-size: 12px;
    }

.preview-footer[b-lye5rvn55s] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(var(--ui-ink-rgb), 0.07);
    color: var(--ui-muted);
    font-size: 10px;
}

/* =========================================================
   SECTIONS & CONTRAST FIXES
   ========================================================= */

.intro-section[b-lye5rvn55s],
.features-section[b-lye5rvn55s],
.mobile-section[b-lye5rvn55s],
.seo-content-section[b-lye5rvn55s] {
    background: #ffffff;
    color: var(--ui-ink);
}

    .intro-section h2[b-lye5rvn55s],
    .features-section h2[b-lye5rvn55s],
    .mobile-section h2[b-lye5rvn55s],
    .seo-content-section h2[b-lye5rvn55s] {
        color: var(--ui-ink) !important;
    }

    .intro-section p[b-lye5rvn55s],
    .features-section p[b-lye5rvn55s],
    .mobile-section p[b-lye5rvn55s],
    .seo-content-section p[b-lye5rvn55s] {
        color: var(--ui-subtle) !important;
    }

.roles-section[b-lye5rvn55s],
.workflow-section[b-lye5rvn55s],
.pricing-section[b-lye5rvn55s],
.final-cta[b-lye5rvn55s] {
    background: var(--ui-bg);
    color: var(--ui-ink);
}

    .roles-section h2[b-lye5rvn55s],
    .workflow-section h2[b-lye5rvn55s],
    .pricing-section h2[b-lye5rvn55s],
    .final-cta h2[b-lye5rvn55s] {
        color: var(--ui-ink) !important;
    }

/* =========================================================
   ACCESSIBILITY & RESPONSIVE
   ========================================================= */


[b-lye5rvn55s]::selection {
    background: rgba(var(--ui-brand-rgb), .35);
    color: var(--ui-ink);
}

/* =========================================================
   FINAL 3D SCROLL FIX - MOBILE + DESKTOP
   4 scenes, smooth progression, no oversized black tail
   ========================================================= */


/* =========================================================
   MYBAUMANAGEMENT 3D SCROLL SYSTEM
   Single source of truth for the 4-scene experience.
   Scene progress is calculated in Home.razor.
   ========================================================= */


    

    

    


/* Large words deliberately enter from outside the viewport. */


/* =========================================================
   DESIGN SYSTEM – NAVIGATION ACTIONS
   ========================================================= */

nav.landing-nav .landing-nav-menu > a[b-lye5rvn55s] {
    color: var(--ui-muted) !important;
}

    nav.landing-nav .landing-nav-menu > a:hover[b-lye5rvn55s] {
        color: var(--ui-ink) !important;
    }

nav.landing-nav .nav-login[b-lye5rvn55s] {
    color: var(--ui-ink) !important;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-line-strong) !important;
    box-shadow: var(--ui-shadow-xs) !important;
}

    nav.landing-nav .nav-login:hover[b-lye5rvn55s] {
        color: var(--ui-ink) !important;
        background: var(--ui-surface-2) !important;
        border-color: #b9c0cc !important;
    }

nav.landing-nav .nav-action[b-lye5rvn55s] {
    color: #fff !important;
    background: var(--ui-brand-gradient) !important;
    border: 1px solid var(--ui-brand-600) !important;
    box-shadow: var(--ui-shadow-brand) !important;
}

    nav.landing-nav .nav-action:hover[b-lye5rvn55s] {
        color: #fff !important;
        background: linear-gradient(135deg, #ff7a2e 0%, #f25a07 55%, #d9430a 100%) !important;
        border-color: var(--ui-brand-700) !important;
    }


/* =========================================================
   FEATURE BENTO
   ========================================================= */

.bento-section[b-lye5rvn55s] {
    position: relative;
    padding: clamp(72px, 9vw, 128px) 0;
    overflow: hidden;
    color: var(--ui-text);
    background:
        radial-gradient(700px 360px at 85% 10%, rgba(var(--ui-brand-rgb), .08), transparent 70%),
        radial-gradient(600px 360px at 10% 90%, rgba(99, 102, 241, .05), transparent 70%);
}

    .bento-section[b-lye5rvn55s]::before {
        position: absolute;
        inset: 0;
        z-index: 0;
        content: "";
        pointer-events: none;
        background-image: radial-gradient(rgba(var(--ui-ink-rgb), .07) 1px, transparent 1px);
        background-size: 22px 22px;
        mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
        -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
    }

    .bento-section > .container[b-lye5rvn55s] {
        position: relative;
        z-index: 1;
    }

.bento-heading[b-lye5rvn55s] {
    max-width: 720px;
    margin: 0 auto clamp(40px, 5vw, 64px);
    text-align: center;
}

    .bento-heading h2[b-lye5rvn55s] {
        margin: 16px 0 0;
        color: var(--ui-ink);
        font-size: clamp(34px, 4.4vw, 56px);
        font-weight: 750;
        line-height: 1.04;
        letter-spacing: -.045em;
    }

        .bento-heading h2 span[b-lye5rvn55s] {
            display: block;
            background: linear-gradient(90deg, var(--ui-brand-600), var(--ui-brand-400));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

    .bento-heading p[b-lye5rvn55s] {
        max-width: 560px;
        margin: 18px auto 0;
        color: var(--ui-muted);
        font-size: 1.05rem;
        line-height: 1.65;
    }

/* Grid */

.bento-grid[b-lye5rvn55s] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
}

.bento-overview[b-lye5rvn55s] { grid-column: span 4; }
.bento-who[b-lye5rvn55s] { grid-column: span 2; }
.bento-time[b-lye5rvn55s] { grid-column: span 2; }
.bento-calendar[b-lye5rvn55s] { grid-column: span 2; }
.bento-digital[b-lye5rvn55s] { grid-column: span 2; }

/* Card */

.bento-card[b-lye5rvn55s] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
    padding: 26px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .78));
    border: 1px solid var(--ui-line);
    border-radius: 24px;
    box-shadow: var(--ui-shadow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform .35s var(--ui-ease), box-shadow .35s var(--ui-ease), border-color .35s var(--ui-ease);
}

    .bento-card[b-lye5rvn55s]::after {
        position: absolute;
        inset: 0;
        content: "";
        pointer-events: none;
        border-radius: inherit;
        background: radial-gradient(420px 220px at 100% 0%, rgba(var(--ui-brand-rgb), .09), transparent 70%);
        opacity: 0;
        transition: opacity .35s var(--ui-ease);
    }

    .bento-card:hover[b-lye5rvn55s] {
        transform: translateY(-4px);
        border-color: var(--ui-brand-200);
        box-shadow: var(--ui-shadow-lg);
    }

        .bento-card:hover[b-lye5rvn55s]::after {
            opacity: 1;
        }

.bento-copy[b-lye5rvn55s] {
    position: relative;
    z-index: 1;
}

    .bento-copy h3[b-lye5rvn55s] {
        margin: 16px 0 6px;
        color: var(--ui-ink);
        font-size: 1.2rem;
        font-weight: 700;
        letter-spacing: -.025em;
    }

    .bento-copy p[b-lye5rvn55s] {
        max-width: 420px;
        margin: 0;
        color: var(--ui-muted);
        font-size: .92rem;
        line-height: 1.6;
    }

.bento-icon[b-lye5rvn55s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--ui-brand-600);
    background: linear-gradient(135deg, var(--ui-brand-50), #fff);
    border: 1px solid var(--ui-brand-100);
    border-radius: 12px;
    box-shadow: var(--ui-shadow-xs);
    font-size: 1.1rem;
}

/* Overview card */

.bento-overview[b-lye5rvn55s] {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 28px;
}

.bento-dashboard[b-lye5rvn55s] {
    position: relative;
    z-index: 1;
    padding: 14px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 18px;
    box-shadow: var(--ui-shadow-md);
    transform: perspective(1200px) rotateY(-6deg) rotateX(3deg);
    transition: transform .5s var(--ui-ease);
}

.bento-card:hover .bento-dashboard[b-lye5rvn55s] {
    transform: perspective(1200px) rotateY(0) rotateX(0);
}

.bento-window-bar[b-lye5rvn55s] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 2px 12px;
    border-bottom: 1px solid var(--ui-line);
}

    .bento-window-bar > span[b-lye5rvn55s] {
        width: 9px;
        height: 9px;
        background: var(--ui-line-strong);
        border-radius: 50%;
    }

    .bento-window-bar em[b-lye5rvn55s] {
        margin-left: 8px;
        color: var(--ui-ink);
        font-size: .78rem;
        font-style: normal;
        font-weight: 600;
    }

.bento-live[b-lye5rvn55s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 3px 9px;
    color: var(--ui-success-700);
    background: var(--ui-success-50);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
}

    .bento-live i[b-lye5rvn55s] {
        width: 6px;
        height: 6px;
        background: var(--ui-success);
        border-radius: 50%;
        box-shadow: 0 0 0 3px rgba(18, 183, 106, .2);
        animation: bento-pulse-b-lye5rvn55s 1.8s ease-in-out infinite;
    }

.bento-stats[b-lye5rvn55s] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0;
}

    .bento-stats > div[b-lye5rvn55s] {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 10px 12px;
        background: var(--ui-surface-2);
        border: 1px solid var(--ui-line);
        border-radius: 12px;
    }

    .bento-stats small[b-lye5rvn55s] {
        color: var(--ui-muted);
        font-size: .68rem;
        font-weight: 500;
    }

    .bento-stats strong[b-lye5rvn55s] {
        color: var(--ui-ink);
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: -.03em;
        line-height: 1.1;
    }

    .bento-stats span[b-lye5rvn55s] {
        color: var(--ui-subtle);
        font-size: .66rem;
        font-weight: 600;
    }

        .bento-stats span.up[b-lye5rvn55s] {
            color: var(--ui-success-700);
        }

.bento-chart[b-lye5rvn55s] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 96px;
    padding: 10px 12px 0;
    background:
        linear-gradient(var(--ui-line) 1px, transparent 1px) 0 0 / 100% 32px;
    border-radius: 12px;
}

    .bento-chart i[b-lye5rvn55s] {
        flex: 1;
        height: var(--h);
        background: linear-gradient(180deg, var(--ui-brand-200), var(--ui-brand-100));
        border-radius: 6px 6px 2px 2px;
        transform-origin: bottom;
        transition: transform .5s var(--ui-ease);
    }

        .bento-chart i.is-today[b-lye5rvn55s] {
            background: var(--ui-brand-gradient);
            box-shadow: 0 6px 14px -6px rgba(var(--ui-brand-rgb), .7);
        }

.bento-card:hover .bento-chart i[b-lye5rvn55s] {
    transform: scaleY(1.06);
}

/* Who card */

.bento-list[b-lye5rvn55s] {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    margin: auto 0 0;
    padding: 0;
    list-style: none;
}

    .bento-list li[b-lye5rvn55s] {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 10px;
        background: var(--ui-surface);
        border: 1px solid var(--ui-line);
        border-radius: 14px;
        box-shadow: var(--ui-shadow-xs);
        transition: transform .3s var(--ui-ease);
    }

        .bento-list li:nth-child(2)[b-lye5rvn55s] { margin-left: 14px; }
        .bento-list li:nth-child(3)[b-lye5rvn55s] { margin-left: 28px; }

    .bento-card:hover .bento-list li[b-lye5rvn55s] { transform: translateX(-6px); }
    .bento-card:hover .bento-list li:nth-child(2)[b-lye5rvn55s] { transform: translateX(-20px); }
    .bento-card:hover .bento-list li:nth-child(3)[b-lye5rvn55s] { transform: translateX(-34px); }

    .bento-list li > div[b-lye5rvn55s] {
        display: flex;
        flex-direction: column;
        min-width: 0;
        line-height: 1.25;
    }

    .bento-list strong[b-lye5rvn55s] {
        color: var(--ui-ink);
        font-size: .82rem;
        font-weight: 600;
    }

    .bento-list small[b-lye5rvn55s] {
        overflow: hidden;
        color: var(--ui-muted);
        font-size: .72rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .bento-list b[b-lye5rvn55s] {
        margin-left: auto;
        color: var(--ui-ink-2);
        font-family: var(--ui-font-mono);
        font-size: .74rem;
        font-weight: 500;
    }

.bento-avatar[b-lye5rvn55s] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--ui-info-700);
    background: var(--ui-info-50);
    border-radius: 10px;
    font-size: .66rem;
    font-weight: 700;
}

    .bento-avatar.is-orange[b-lye5rvn55s] {
        color: var(--ui-brand-700);
        background: var(--ui-brand-100);
    }

    .bento-avatar.is-green[b-lye5rvn55s] {
        color: var(--ui-success-700);
        background: var(--ui-success-50);
    }

/* Time card */

.bento-ring[b-lye5rvn55s] {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 156px;
    height: 156px;
    margin: auto auto 0;
    background: conic-gradient(var(--ui-brand) calc(var(--p) * 1%), var(--ui-surface-3) 0);
    border-radius: 50%;
    transition: transform .4s var(--ui-ease);
}

    .bento-ring > div[b-lye5rvn55s] {
        display: grid;
        place-items: center;
        align-content: center;
        width: calc(100% - 22px);
        height: calc(100% - 22px);
        background: var(--ui-surface);
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px var(--ui-line);
    }

    .bento-ring strong[b-lye5rvn55s] {
        color: var(--ui-ink);
        font-family: var(--ui-font-mono);
        font-size: 1.6rem;
        font-weight: 600;
        letter-spacing: -.04em;
    }

    .bento-ring small[b-lye5rvn55s] {
        color: var(--ui-muted);
        font-size: .72rem;
    }

.bento-card:hover .bento-ring[b-lye5rvn55s] {
    transform: rotate(-6deg) scale(1.03);
}

/* Calendar card */

.bento-timeline[b-lye5rvn55s] {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    margin-top: auto;
}

.bento-days[b-lye5rvn55s],
.bento-track[b-lye5rvn55s] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

    .bento-days span[b-lye5rvn55s] {
        color: var(--ui-subtle);
        font-size: .7rem;
        font-weight: 600;
        text-align: center;
    }

.bento-track[b-lye5rvn55s] {
    height: 32px;
    background:
        repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), var(--ui-line) calc(20% - 1px) 20%);
    border-radius: 10px;
}

    .bento-track i[b-lye5rvn55s] {
        grid-column: calc(var(--s) + 1) / calc(var(--e) + 1);
        display: flex;
        align-items: center;
        margin: 3px;
        padding: 0 10px;
        overflow: hidden;
        color: var(--ui-ink-2);
        border-radius: 8px;
        font-size: .7rem;
        font-style: normal;
        font-weight: 600;
        white-space: nowrap;
        text-overflow: ellipsis;
        transition: transform .4s var(--ui-ease);
    }

        .bento-track i.is-orange[b-lye5rvn55s] {
            color: var(--ui-brand-700);
            background: var(--ui-brand-100);
            box-shadow: inset 3px 0 0 var(--ui-brand);
        }

        .bento-track i.is-blue[b-lye5rvn55s] {
            color: var(--ui-info-700);
            background: var(--ui-info-50);
            box-shadow: inset 3px 0 0 var(--ui-info);
        }

        .bento-track i.is-green[b-lye5rvn55s] {
            color: var(--ui-success-700);
            background: var(--ui-success-50);
            box-shadow: inset 3px 0 0 var(--ui-success);
        }

.bento-card:hover .bento-track i[b-lye5rvn55s] {
    transform: translateX(4px);
}

/* Digital card */

.bento-digital[b-lye5rvn55s] {
    background:
        radial-gradient(300px 200px at 100% 100%, rgba(var(--ui-brand-rgb), .14), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 246, 239, .85));
}

.bento-chips[b-lye5rvn55s] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

    .bento-chips span[b-lye5rvn55s] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 12px;
        color: var(--ui-ink-2);
        background: var(--ui-surface);
        border: 1px solid var(--ui-line);
        border-radius: 999px;
        box-shadow: var(--ui-shadow-xs);
        font-size: .78rem;
        font-weight: 500;
        transition: border-color .25s var(--ui-ease), color .25s var(--ui-ease);
    }

        .bento-chips span i[b-lye5rvn55s] {
            color: var(--ui-brand);
        }

        .bento-chips span:hover[b-lye5rvn55s] {
            color: var(--ui-brand-700);
            border-color: var(--ui-brand-200);
        }

@keyframes bento-pulse-b-lye5rvn55s {
    50% {
        box-shadow: 0 0 0 6px rgba(18, 183, 106, 0);
    }
}

/* Scroll reveal where supported */

@supports (animation-timeline: view()) {
    .bento-card[b-lye5rvn55s] {
        animation: bento-reveal-b-lye5rvn55s linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
    }
}

@keyframes bento-reveal-b-lye5rvn55s {
    from {
        opacity: 0;
        transform: translateY(28px) scale(.98);
    }
}

/* Responsive */

@media (max-width: 1199.98px) {
    .bento-overview[b-lye5rvn55s] { grid-column: span 6; }
    .bento-who[b-lye5rvn55s], .bento-time[b-lye5rvn55s], .bento-calendar[b-lye5rvn55s] { grid-column: span 3; }
    .bento-digital[b-lye5rvn55s] { grid-column: span 3; }
}

@media (max-width: 767.98px) {
    .bento-grid[b-lye5rvn55s] {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .bento-overview[b-lye5rvn55s], .bento-who[b-lye5rvn55s], .bento-time[b-lye5rvn55s], .bento-calendar[b-lye5rvn55s], .bento-digital[b-lye5rvn55s] {
        grid-column: auto;
    }

    .bento-overview[b-lye5rvn55s] {
        grid-template-columns: minmax(0, 1fr);
    }

    .bento-card[b-lye5rvn55s] {
        padding: 20px;
        border-radius: 20px;
    }

    .bento-dashboard[b-lye5rvn55s] {
        transform: none;
    }

    .bento-list li:nth-child(2)[b-lye5rvn55s],
    .bento-list li:nth-child(3)[b-lye5rvn55s] {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bento-card[b-lye5rvn55s],
    .bento-card *[b-lye5rvn55s] {
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================================
   HERO – kompaktere Überschrift (überschreibt ältere Regeln)
   ========================================================= */

.hero-title[b-lye5rvn55s] {
    max-width: 760px;
    font-size: clamp(36px, 4vw, 56px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.04em !important;
}

    .hero-title span[b-lye5rvn55s] {
        display: block !important;
        margin-top: 6px;
        font-size: 1em !important;
    }

.hero-subline[b-lye5rvn55s] {
    margin-bottom: 0;
    max-width: 640px;
    color: var(--ui-ink-2);
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -.01em;
}

@media (max-width: 767.98px) {
    .hero-title[b-lye5rvn55s] {
        font-size: clamp(30px, 7.6vw, 40px) !important;
        line-height: 1.08 !important;
    }

    .hero-subline[b-lye5rvn55s] {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .hero-title[b-lye5rvn55s] {
        font-size: 28px !important;
        letter-spacing: -.035em !important;
        hyphens: manual;
    }

    .hero-subline[b-lye5rvn55s] {
        font-size: 15px;
    }
}

/* Navigation liegt jetzt im Layout (SiteNav) – Hero etwas kompakter */
.landing-hero[b-lye5rvn55s] {
    min-height: 0 !important;
}
/* /Components/Pages/Impressum.razor.rz.scp.css */
/* =========================================================
   WEBOLAR - LEGAL PAGE
   ========================================================= */

.legal-page[b-06z3o2phh5] {
    width: 100%;
    min-height: 100vh;
    background: var(--ui-bg);
    padding: 40px 20px 70px;
    color: var(--ui-ink);
}

.legal-container[b-06z3o2phh5] {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
}


/* =========================================================
   BACK
   ========================================================= */

.legal-back[b-06z3o2phh5] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ui-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 28px;
    transition: color .2s ease;
}

    .legal-back:hover[b-06z3o2phh5] {
        color: var(--ui-brand);
    }


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

.legal-header[b-06z3o2phh5] {
    margin-bottom: 32px;
}

.legal-eyebrow[b-06z3o2phh5] {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--ui-brand);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.legal-header h1[b-06z3o2phh5] {
    margin: 0;
    font-size: 38px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -1px;
}

.legal-header p[b-06z3o2phh5] {
    max-width: 650px;
    margin: 14px 0 0;
    color: var(--ui-muted);
    font-size: 15px;
    line-height: 1.65;
}


/* =========================================================
   CARD
   ========================================================= */

.legal-card[b-06z3o2phh5] {
    background: #fff;
    border: 1px solid var(--ui-line);
    border-radius: 16px;
    padding: 26px 28px;
    margin-bottom: 16px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .035);
}

    .legal-card p[b-06z3o2phh5] {
        margin: 0 0 13px;
        color: var(--ui-text);
        font-size: 14px;
        line-height: 1.75;
    }

        .legal-card p:last-child[b-06z3o2phh5] {
            margin-bottom: 0;
        }


/* =========================================================
   SECTION TITLE
   ========================================================= */

.legal-section-title[b-06z3o2phh5] {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 20px;
}

.legal-icon[b-06z3o2phh5] {
    width: 42px;
    min-width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--ui-brand-50);
    color: var(--ui-brand);
    font-size: 18px;
}

.legal-section-title > div:last-child[b-06z3o2phh5] {
    min-width: 0;
}

.legal-section-title span[b-06z3o2phh5] {
    display: block;
    margin-bottom: 2px;
    color: var(--ui-brand);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.legal-section-title h2[b-06z3o2phh5] {
    margin: 0;
    color: var(--ui-ink);
    font-size: 18px;
    font-weight: 700;
}


/* =========================================================
   COMPANY
   ========================================================= */

.legal-company[b-06z3o2phh5] {
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    padding: 18px;
}

    .legal-company > strong[b-06z3o2phh5] {
        display: block;
        margin-bottom: 12px;
        font-size: 17px;
        color: var(--ui-ink);
    }

.legal-company-row[b-06z3o2phh5] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
    color: var(--ui-text);
    font-size: 13px;
    line-height: 1.55;
}

    .legal-company-row i[b-06z3o2phh5] {
        width: 18px;
        min-width: 18px;
        color: var(--ui-brand);
        margin-top: 2px;
    }

    .legal-company-row a[b-06z3o2phh5] {
        color: var(--ui-text);
        text-decoration: none;
    }

        .legal-company-row a:hover[b-06z3o2phh5] {
            color: var(--ui-brand);
        }


/* =========================================================
   HIGHLIGHT
   ========================================================= */

.legal-highlight[b-06z3o2phh5] {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 18px;
    padding: 15px;
    border-radius: 11px;
    background: var(--ui-brand-50);
    border: 1px solid var(--ui-brand-200);
}

    .legal-highlight > i[b-06z3o2phh5] {
        color: var(--ui-brand);
        font-size: 18px;
        margin-top: 2px;
    }

    .legal-highlight strong[b-06z3o2phh5] {
        display: block;
        margin-bottom: 4px;
        color: var(--ui-ink-2);
        font-size: 13px;
    }

    .legal-highlight p[b-06z3o2phh5] {
        font-size: 13px;
    }


/* =========================================================
   CONTACT
   ========================================================= */

.legal-contact-box[b-06z3o2phh5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
}

    .legal-contact-box > div[b-06z3o2phh5] {
        padding: 14px 16px;
        border: 1px solid var(--ui-line);
        border-radius: 10px;
        background: var(--ui-surface-2);
    }

    .legal-contact-box span[b-06z3o2phh5] {
        display: block;
        margin-bottom: 4px;
        color: var(--ui-muted);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .6px;
    }

    .legal-contact-box a[b-06z3o2phh5] {
        color: var(--ui-ink-2);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
    }

        .legal-contact-box a:hover[b-06z3o2phh5] {
            color: var(--ui-brand);
        }


/* =========================================================
   LEGAL LINKS
   ========================================================= */

.legal-links[b-06z3o2phh5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legal-link[b-06z3o2phh5] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 14px;
    border: 1px solid var(--ui-line);
    border-radius: 11px;
    color: var(--ui-ink);
    text-decoration: none;
    transition: all .2s ease;
}

    .legal-link:hover[b-06z3o2phh5] {
        border-color: var(--ui-brand-200);
        background: var(--ui-brand-50);
        transform: translateY(-1px);
    }

.legal-link-icon[b-06z3o2phh5] {
    width: 38px;
    min-width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--ui-brand-50);
    color: var(--ui-brand);
}

.legal-link > div:nth-child(2)[b-06z3o2phh5] {
    flex: 1;
}

.legal-link strong[b-06z3o2phh5] {
    display: block;
    font-size: 13px;
    font-weight: 650;
}

.legal-link span[b-06z3o2phh5] {
    display: block;
    margin-top: 2px;
    color: var(--ui-muted);
    font-size: 11px;
}

.legal-link > i:last-child[b-06z3o2phh5] {
    color: var(--ui-subtle);
    font-size: 13px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.legal-footer[b-06z3o2phh5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 4px 0;
    color: var(--ui-muted);
    font-size: 11px;
}

    .legal-footer > div[b-06z3o2phh5] {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

        .legal-footer > div:last-child[b-06z3o2phh5] {
            text-align: right;
        }

    .legal-footer strong[b-06z3o2phh5] {
        color: var(--ui-ink-2);
        font-size: 13px;
    }


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .legal-page[b-06z3o2phh5] {
        padding: 24px 12px 45px;
    }

    .legal-back[b-06z3o2phh5] {
        margin-bottom: 22px;
    }

    .legal-header[b-06z3o2phh5] {
        margin-bottom: 24px;
    }

        .legal-header h1[b-06z3o2phh5] {
            font-size: 29px;
            letter-spacing: -.6px;
        }

        .legal-header p[b-06z3o2phh5] {
            font-size: 13px;
            margin-top: 10px;
        }

    .legal-card[b-06z3o2phh5] {
        padding: 20px 17px;
        border-radius: 13px;
        margin-bottom: 12px;
    }

    .legal-section-title[b-06z3o2phh5] {
        margin-bottom: 16px;
    }

        .legal-section-title h2[b-06z3o2phh5] {
            font-size: 16px;
        }

    .legal-icon[b-06z3o2phh5] {
        width: 38px;
        min-width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .legal-card p[b-06z3o2phh5] {
        font-size: 13px;
        line-height: 1.7;
    }

    .legal-company[b-06z3o2phh5] {
        padding: 14px;
    }

    .legal-contact-box[b-06z3o2phh5] {
        grid-template-columns: 1fr;
    }

    .legal-footer[b-06z3o2phh5] {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 15px;
    }

        .legal-footer > div:last-child[b-06z3o2phh5] {
            text-align: left;
        }
}

/* =========================================================
   IMPRESSUM FOOTER LINKS
   ========================================================= */

.legal-footer-links[b-06z3o2phh5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: 1.25rem .25rem 0;
    color: var(--ui-subtle);
    font-size: 12px;
}

.legal-footer-links a[b-06z3o2phh5] {
    color: var(--ui-muted);
    text-decoration: none;
    transition: color .2s ease;
}

.legal-footer-links a:hover[b-06z3o2phh5],
.legal-footer-links a:focus-visible[b-06z3o2phh5] {
    color: var(--ui-brand);
}

.legal-version[b-06z3o2phh5] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1rem;
    color: var(--ui-muted);
    font-size: 11px;
}

.legal-version i[b-06z3o2phh5] {
    color: var(--ui-brand);
}

@media (max-width: 767.98px) {
    .legal-footer-links[b-06z3o2phh5] {
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-top: 1rem;
    }
}
/* /Components/Pages/MeineEinsaetze.razor.rz.scp.css */
/*
   MeineEinsaetze.razor.css
   Premium black / orange / white employee assignment view
*/

.my-assignments-page[b-l8izymfotc] {
    --me-ink: var(--ui-ink);
    --me-muted: var(--ui-muted);
    --me-line: var(--ui-line);
    --me-orange: var(--ui-brand);
    --me-orange-dark: var(--ui-brand-600);
    --me-orange-soft: var(--ui-brand-50);
    max-width: 100%;
    margin-inline: auto;
    color: var(--me-ink);
}

.page-header[b-l8izymfotc] {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 2.25rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
    color: var(--ui-ink);
    background: radial-gradient(120% 140% at 100% 0%, rgba(var(--ui-brand-rgb), .16) 0%, rgba(var(--ui-brand-rgb), .05) 32%, transparent 58%), radial-gradient(90% 120% at 0% 100%, rgba(99, 102, 241, .06), transparent 55%), var(--ui-surface);
    border-radius: 20px;
    box-shadow: var(--ui-shadow);
    border: 1px solid var(--ui-line);
}

    .page-header[b-l8izymfotc]::after {
        position: absolute;
        right: -55px;
        bottom: -95px;
        width: 225px;
        height: 225px;
        content: "";
        border: 38px solid rgba(var(--ui-brand-rgb), .07);
        border-radius: 50%;
    }

    .page-header > *[b-l8izymfotc] {
        position: relative;
        z-index: 1;
    }

    .page-header h2[b-l8izymfotc] {
        margin: 0 0 .45rem;
        color: var(--ui-ink);
        font-size: clamp(1.7rem, 3vw, 2.35rem);
        font-weight: 850;
        letter-spacing: -.045em;
    }

.subtitle[b-l8izymfotc] {
    color: rgba(255, 255, 255, .68);
    font-size: .95rem;
}

.date-filter[b-l8izymfotc] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.btn-nav[b-l8izymfotc],
.btn-today[b-l8izymfotc] {
    cursor: pointer;
    min-height: 40px;
    font-weight: 750;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.btn-nav[b-l8izymfotc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    color: var(--me-ink);
    background: var(--ui-surface-3);
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    font-size: 1.3rem;
}

    .btn-nav:hover[b-l8izymfotc] {
        color: #fff;
        background: var(--me-orange);
        border-color: var(--me-orange);
        transform: translateY(-2px);
    }

.date-input[b-l8izymfotc] {
    min-height: 40px;
    padding: .55rem .7rem;
    color: var(--me-ink);
    background: #fff;
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    font-weight: 700;
}

    .date-input:focus[b-l8izymfotc] {
        border-color: var(--me-orange);
        outline: 0;
        box-shadow: 0 0 0 4px rgba(var(--ui-brand-rgb), .14);
    }

.btn-today[b-l8izymfotc] {
    padding: .55rem .9rem;
    color: var(--me-orange-dark);
    background: #fff;
    border: 1px solid var(--ui-brand-200);
    border-radius: 10px;
}

    .btn-today:hover[b-l8izymfotc] {
        color: #fff;
        background: var(--me-orange);
        border-color: var(--me-orange);
        transform: translateY(-2px);
    }

.my-assignments-page > .alert[b-l8izymfotc] {
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    color: var(--ui-danger-700);
    background: var(--ui-danger-50);
    border: 0;
    border-left: 4px solid var(--ui-danger);
    border-radius: 10px;
}

.assignments-list[b-l8izymfotc] {
    display: grid;
    gap: 1rem;
}

.assignment-card[b-l8izymfotc] {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--me-line);
    border-radius: 16px;
    box-shadow: 0 14px 35px rgba(16, 24, 40, .07);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .assignment-card:hover[b-l8izymfotc] {
        transform: translateY(-3px);
        box-shadow: 0 18px 42px rgba(16, 24, 40, .13);
    }

.card-header-bar[b-l8izymfotc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.1rem;
    color: var(--ui-ink);
    background: var(--ui-surface-2);
    border-bottom: 1px solid var(--ui-line);
}

.baustelle-tag[b-l8izymfotc] {
    min-width: 0;
    overflow: hidden;
    color: var(--ui-ink);
    font-size: .82rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .baustelle-tag i[b-l8izymfotc] {
        margin-right: .35rem;
        color: var(--ui-brand-600);
    }

.duration-badge[b-l8izymfotc] {
    flex: 0 0 auto;
    padding: .35rem .6rem;
    color: #fff;
    background: var(--me-orange);
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 850;
    white-space: nowrap;
}

.card-body-content[b-l8izymfotc] {
    padding: 1.25rem 1.1rem;
}

.time-range[b-l8izymfotc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
}

.time-block[b-l8izymfotc] {
    min-width: 125px;
    padding: .8rem .9rem;
    text-align: center;
    background: var(--ui-surface-2);
    border: 1px solid var(--me-line);
    border-radius: 11px;
}

    .time-block small[b-l8izymfotc] {
        display: block;
        color: var(--me-muted);
        font-size: .68rem;
        font-weight: 850;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .time-block strong[b-l8izymfotc] {
        display: block;
        margin-top: .25rem;
        color: var(--me-orange-dark);
        font-size: 1.18rem;
        font-weight: 850;
    }

.time-arrow[b-l8izymfotc] {
    color: var(--me-orange);
    font-size: 1.35rem;
    font-weight: 850;
}

.card-notes[b-l8izymfotc] {
    margin-top: 1rem;
    padding: .75rem .85rem;
    color: #4f565e;
    background: var(--me-orange-soft);
    border: 1px solid #ffd7bd;
    border-left: 4px solid var(--me-orange);
    border-radius: 9px;
    font-size: .8rem;
}

    .card-notes strong[b-l8izymfotc] {
        color: var(--me-orange-dark);
        font-size: .72rem;
        text-transform: uppercase;
    }

    .card-notes p[b-l8izymfotc] {
        margin: .3rem 0 0;
        white-space: pre-wrap;
    }

.loading-state[b-l8izymfotc],
.empty-card[b-l8izymfotc] {
    padding: 3rem 1rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--me-line);
    border-radius: 16px;
    box-shadow: 0 14px 35px rgba(16, 24, 40, .06);
}

.loading-state[b-l8izymfotc] {
    color: var(--me-muted);
}

.empty-icon[b-l8izymfotc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: .8rem;
    color: var(--me-orange);
    background: var(--me-orange-soft);
    border-radius: 20px;
    font-size: 1.6rem;
}

.empty-card h4[b-l8izymfotc] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 850;
}

.empty-card p[b-l8izymfotc] {
    margin: .4rem 0 0;
    color: var(--me-muted);
    font-size: .82rem;
}

@media (max-width: 760px) {
    .page-header[b-l8izymfotc] {
        align-items: flex-start;
        flex-direction: column;
        padding: 1.35rem;
    }

    .date-filter[b-l8izymfotc] {
        width: 100%;
        flex-wrap: wrap;
    }

    .date-input[b-l8izymfotc] {
        flex: 1;
        min-width: 0;
    }

    .btn-today[b-l8izymfotc] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .card-header-bar[b-l8izymfotc] {
        align-items: flex-start;
        flex-direction: column;
        gap: .55rem;
    }

    .duration-badge[b-l8izymfotc] {
        align-self: flex-start;
    }

    .time-range[b-l8izymfotc] {
        gap: .45rem;
    }

    .time-block[b-l8izymfotc] {
        min-width: 0;
        flex: 1;
        padding-inline: .45rem;
    }

        .time-block strong[b-l8izymfotc] {
            font-size: .95rem;
        }

    .time-arrow[b-l8izymfotc] {
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-l8izymfotc],
    *[b-l8izymfotc]::before,
    *[b-l8izymfotc]::after {
        transition-duration: .01ms !important;
    }
}
/* /Components/Pages/MeinUrlaub.razor.rz.scp.css */
/*
   Assignments.razor.css
   Light design-system styles (tokens in wwwroot/app.css)
*/

:host[b-msswqtk3pb] {
    display: block;
    max-width: 100%;
    color: var(--as-ink);
}

    /* Page foundation */
    :host > div[b-msswqtk3pb] {
        max-width: 1440px;
        margin-inline: auto;
    }

.employee-header[b-msswqtk3pb] {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 2.25rem;
    margin-bottom: 1.5rem !important;
    overflow: hidden;
    color: var(--ui-ink);
    background: radial-gradient(120% 140% at 100% 0%, rgba(var(--ui-brand-rgb), .16) 0%, rgba(var(--ui-brand-rgb), .05) 32%, transparent 58%), radial-gradient(90% 120% at 0% 100%, rgba(99, 102, 241, .06), transparent 55%), var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    box-shadow: var(--ui-shadow);
}

    .employee-header[b-msswqtk3pb]::after {
        position: absolute;
        right: -55px;
        bottom: -90px;
        width: 220px;
        height: 220px;
        content: "";
        border: 38px solid rgba(var(--ui-brand-rgb), .07);
        border-radius: 50%;
    }

    .employee-header > div[b-msswqtk3pb],
    .employee-header > button[b-msswqtk3pb] {
        position: relative;
        z-index: 1;
    }

    .employee-header h3[b-msswqtk3pb] {
        margin: 0 0 .45rem;
        font-size: clamp(1.65rem, 2.4vw, 2.2rem);
        font-weight: 800;
        letter-spacing: -.04em;
    }

    .employee-header p[b-msswqtk3pb] {
        color: var(--ui-muted) !important;
        font-size: .95rem;
    }

/* Cards */
.modern-card[b-msswqtk3pb] {
    overflow: visible;
    background: var(--as-surface);
    border: 1px solid var(--as-line) !important;
    border-radius: var(--as-radius) !important;
    box-shadow: var(--as-shadow);
}

    .modern-card.overflow-hidden[b-msswqtk3pb] {
        overflow: hidden;
    }

    .modern-card .card-body[b-msswqtk3pb] {
        background: transparent;
    }

/* Buttons */
.btn[b-msswqtk3pb] {
    min-height: 42px;
    padding: .65rem 1rem;
    border-radius: 10px;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .01em;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

    .btn:hover:not(:disabled)[b-msswqtk3pb] {
        transform: translateY(-2px);
    }

    .btn:active:not(:disabled)[b-msswqtk3pb] {
        transform: translateY(0);
    }

.btn-primary[b-msswqtk3pb] {
    color: #fff !important;
    background: var(--as-orange) !important;
    border-color: var(--as-orange) !important;
    box-shadow: 0 8px 18px rgba(var(--ui-brand-rgb), .22);
}

    .btn-primary:hover:not(:disabled)[b-msswqtk3pb],
    .btn-primary:focus-visible[b-msswqtk3pb] {
        background: var(--as-orange-dark) !important;
        border-color: var(--as-orange-dark) !important;
        box-shadow: 0 10px 24px rgba(var(--ui-brand-rgb), .28);
    }

/* Hard override for themes that redefine Bootstrap .btn-primary */
button.btn.btn-primary[b-msswqtk3pb],
a.btn.btn-primary[b-msswqtk3pb] {
    color: #fff !important;
    background-color: var(--ui-brand) !important;
    background-image: none !important;
    border-color: var(--ui-brand) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}

    button.btn.btn-primary:hover:not(:disabled)[b-msswqtk3pb],
    button.btn.btn-primary:focus-visible[b-msswqtk3pb],
    a.btn.btn-primary:hover[b-msswqtk3pb],
    a.btn.btn-primary:focus-visible[b-msswqtk3pb] {
        color: #fff !important;
        background-color: var(--ui-brand-600) !important;
        border-color: var(--ui-brand-600) !important;
    }

.btn-secondary[b-msswqtk3pb] {
    color: var(--as-ink) !important;
    background: var(--ui-surface-3) !important;
    border-color: var(--ui-surface-3) !important;
}

    .btn-secondary:hover:not(:disabled)[b-msswqtk3pb] {
        background: var(--ui-line) !important;
        border-color: var(--ui-line) !important;
    }

.btn-outline-danger[b-msswqtk3pb] {
    color: var(--as-danger) !important;
    border-color: #fecdca !important;
    background: red !important;
}

    .btn-outline-danger:hover:not(:disabled)[b-msswqtk3pb] {
        color: red !important;
        background: var(--as-danger) !important;
        border-color: var(--as-danger) !important;
    }

.btn-sm[b-msswqtk3pb] {
    min-height: 34px;
    padding: .42rem .72rem;
    border-radius: 8px;
    font-size: .76rem;
}

.btn:disabled[b-msswqtk3pb] {
    cursor: not-allowed;
    opacity: .45;
    box-shadow: none;
}

/* Search */
.search-box[b-msswqtk3pb] {
    overflow: hidden;
    border: 1px solid var(--as-line);
    border-radius: 12px;
    background: var(--ui-surface-2);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .search-box:focus-within[b-msswqtk3pb] {
        background: #fff;
        border-color: var(--as-orange);
        box-shadow: 0 0 0 4px rgba(var(--ui-brand-rgb), .12);
    }

    .search-box .input-group-text[b-msswqtk3pb] {
        padding-inline: 1rem;
        color: var(--as-orange);
        background: transparent;
        border: 0;
        font-size: 1.35rem;
    }

    .search-box .form-control[b-msswqtk3pb] {
        border: 0;
        background: transparent;
        box-shadow: none;
    }

/* Forms */
.form-label[b-msswqtk3pb] {
    display: block;
    margin-bottom: .5rem;
    color: var(--as-ink);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.form-control[b-msswqtk3pb] {
    min-height: 46px;
    padding: .7rem .85rem;
    color: var(--as-ink);
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    font-size: .9rem;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .form-control[b-msswqtk3pb]::placeholder {
        color: var(--ui-subtle);
    }

    .form-control:focus[b-msswqtk3pb] {
        color: var(--as-ink);
        background: #fff;
        border-color: var(--as-orange);
        box-shadow: 0 0 0 4px rgba(var(--ui-brand-rgb), .12);
    }

textarea.form-control[b-msswqtk3pb] {
    min-height: 104px;
    resize: vertical;
}

/* Live search dropdowns */
.live-search-wrapper[b-msswqtk3pb] {
    position: relative;
}

.live-search-results[b-msswqtk3pb] {
    position: absolute;
    z-index: 20;
    top: calc(100% + .5rem);
    right: 0;
    left: 0;
    overflow: hidden;
    padding: .4rem;
    background: #fff;
    border: 1px solid var(--as-line);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(16, 24, 40, .16);
}

.live-search-result[b-msswqtk3pb] {
    display: flex;
    align-items: center;
    width: 100%;
    gap: .75rem;
    padding: .7rem .75rem;
    color: var(--as-ink);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 9px;
    transition: background .15s ease;
}

    .live-search-result:hover[b-msswqtk3pb],
    .live-search-result:focus-visible[b-msswqtk3pb] {
        background: var(--as-orange-soft);
        outline: none;
    }

.live-search-avatar[b-msswqtk3pb],
.employee-avatar[b-msswqtk3pb] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #fff;
    background: var(--as-dark);
    border-radius: 12px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .03em;
}

    .live-search-avatar.site-avatar[b-msswqtk3pb] {
        color: var(--as-dark);
        background: var(--as-orange-soft);
        border: 1px solid var(--ui-brand-200);
    }

.live-search-content[b-msswqtk3pb] {
    min-width: 0;
}

.live-search-title[b-msswqtk3pb] {
    overflow: hidden;
    font-size: .88rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-search-subtitle[b-msswqtk3pb] {
    margin-top: .18rem;
    color: var(--as-muted);
    font-size: .75rem;
}

.live-search-empty[b-msswqtk3pb] {
    padding: 1rem;
    color: var(--as-muted);
    font-size: .82rem;
    text-align: center;
}

.selected-info[b-msswqtk3pb] {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .65rem;
    padding: .55rem .7rem;
    color: var(--as-dark);
    background: var(--as-orange-soft);
    border: 1px solid var(--ui-brand-200);
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 700;
}

.selected-check[b-msswqtk3pb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    color: #fff;
    background: var(--as-orange);
    border-radius: 50%;
    font-size: .72rem;
}

.selected-remove[b-msswqtk3pb] {
    width: 26px;
    height: 26px;
    margin-left: auto;
    color: var(--as-orange-dark);
    background: transparent;
    border: 0;
    border-radius: 50%;
    font-size: 1.15rem;
    line-height: 1;
}

    .selected-remove:hover[b-msswqtk3pb] {
        background: rgba(var(--ui-brand-rgb), .14);
    }

/* Alerts */
.alert[b-msswqtk3pb] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border: 0;
    border-left: 4px solid var(--as-orange);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(16, 24, 40, .06);
}

.alert-warning[b-msswqtk3pb] {
    color: var(--ui-warning-700);
    background: var(--ui-warning-50);
}

.alert-danger[b-msswqtk3pb] {
    color: var(--ui-danger-700);
    background: var(--ui-danger-50);
    border-left-color: var(--as-danger);
}

.alert-success[b-msswqtk3pb] {
    color: var(--ui-success-700);
    background: var(--ui-success-50);
    border-left-color: var(--ui-success);
}

/* Table */
.table-modern[b-msswqtk3pb] {
    margin: 0;
    --bs-table-bg: transparent;
}

    .table-modern thead th[b-msswqtk3pb] {
        padding: 1rem 1.25rem;
        color: var(--ui-muted);
        background: var(--ui-surface-2);
        border-bottom: 1px solid var(--as-line);
        font-size: .7rem;
        font-weight: 850;
        letter-spacing: .09em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .table-modern tbody td[b-msswqtk3pb] {
        padding: 1.1rem 1.25rem;
        color: var(--as-ink);
        border-bottom: 1px solid var(--ui-surface-3);
        font-size: .87rem;
        vertical-align: middle;
    }

    .table-modern tbody tr[b-msswqtk3pb] {
        transition: background .18s ease;
    }

        .table-modern tbody tr:hover[b-msswqtk3pb] {
            background: var(--ui-brand-50);
        }

        .table-modern tbody tr:last-child td[b-msswqtk3pb] {
            border-bottom: 0;
        }

.assignment-date[b-msswqtk3pb] {
    color: var(--as-ink);
    font-weight: 800;
    white-space: nowrap;
}

.assignment-time[b-msswqtk3pb] {
    margin-top: .3rem;
    color: var(--as-orange-dark);
    font-size: .75rem;
    font-weight: 750;
    white-space: nowrap;
}

.employee-avatar[b-msswqtk3pb] {
    width: 42px;
    height: 42px;
    color: #fff !important;
    background: linear-gradient(145deg, var(--ui-brand-400), var(--ui-brand-600)) !important;
    background-image: linear-gradient(145deg, var(--ui-brand-400), var(--ui-brand-600)) !important;
    border: 2px solid #fff;
    box-shadow: 0 6px 13px rgba(var(--ui-brand-rgb), .18);
}

.table-modern .fw-semibold[b-msswqtk3pb] {
    font-weight: 750 !important;
}

.table-modern small[b-msswqtk3pb] {
    display: inline-block;
    margin-top: .22rem;
    font-size: .74rem;
}

/* Empty state and pagination */
.empty-state[b-msswqtk3pb] {
    padding: 1.75rem 1rem;
}

.empty-state-icon[b-msswqtk3pb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: .9rem;
    color: var(--as-orange);
    background: var(--as-orange-soft);
    border-radius: 18px;
    font-size: 1.7rem;
}

.empty-state h6[b-msswqtk3pb] {
    margin-bottom: .3rem;
    font-weight: 800;
}

.pagination-container[b-msswqtk3pb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--ui-surface-2);
    border-top: 1px solid var(--as-line);
}

    .pagination-container .btn[b-msswqtk3pb] {
        min-width: 35px;
    }

/* Bootstrap utility refinement inside this component */
.text-muted[b-msswqtk3pb] {
    color: var(--as-muted) !important;
}

/* Keyboard accessibility */
button:focus-visible[b-msswqtk3pb],
a:focus-visible[b-msswqtk3pb],
input:focus-visible[b-msswqtk3pb],
textarea:focus-visible[b-msswqtk3pb] {
    outline: 3px solid rgba(var(--ui-brand-rgb), .28);
    outline-offset: 2px;
}

/* Responsive layout */
@media (max-width: 991.98px) {
    .employee-header[b-msswqtk3pb] {
        padding: 1.6rem;
    }

    .table-modern thead th[b-msswqtk3pb],
    .table-modern tbody td[b-msswqtk3pb] {
        padding-inline: .9rem;
    }
}

@media (max-width: 767.98px) {
    .employee-header[b-msswqtk3pb] {
        align-items: flex-start;
        flex-direction: column;
        padding: 1.35rem;
    }

        .employee-header .btn[b-msswqtk3pb] {
            width: 100%;
        }

    .modern-card .card-body[b-msswqtk3pb] {
        padding: 1rem !important;
    }

    .pagination-container[b-msswqtk3pb] {
        align-items: flex-start;
        flex-direction: column;
    }

        .pagination-container > div:last-child[b-msswqtk3pb] {
            width: 100%;
            justify-content: flex-end;
        }

    .table-modern[b-msswqtk3pb] {
        min-width: 900px;
    }
}

@media (max-width: 479.98px) {
    .employee-header h3[b-msswqtk3pb] {
        font-size: 1.5rem;
    }

    .d-flex.gap-2.mt-4[b-msswqtk3pb] {
        flex-direction: column;
    }

        .d-flex.gap-2.mt-4 .btn[b-msswqtk3pb] {
            width: 100%;
        }
}

@media (prefers-reduced-motion: reduce) {
    *[b-msswqtk3pb],
    *[b-msswqtk3pb]::before,
    *[b-msswqtk3pb]::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* =========================================================
   MITARBEITER URLAUB PAGE
   ========================================================= */

.vacation-page[b-msswqtk3pb] {
    max-width: 100%;
    margin-inline: auto;
}

.vacation-header[b-msswqtk3pb] {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 2rem 2.25rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
    color: var(--ui-ink);
    background: radial-gradient(120% 140% at 100% 0%, rgba(var(--ui-brand-rgb), .16) 0%, rgba(var(--ui-brand-rgb), .05) 32%, transparent 58%), radial-gradient(90% 120% at 0% 100%, rgba(99, 102, 241, .06), transparent 55%), var(--ui-surface);
    border-radius: 20px;
    box-shadow: var(--ui-shadow);
    border: 1px solid var(--ui-line);
}

    .vacation-header[b-msswqtk3pb]::after {
        position: absolute;
        right: -55px;
        bottom: -95px;
        width: 225px;
        height: 225px;
        content: "";
        border: 38px solid rgba(var(--ui-brand-rgb), .07);
        border-radius: 50%;
    }

    .vacation-header > *[b-msswqtk3pb] {
        position: relative;
        z-index: 1;
    }

    .vacation-header h3[b-msswqtk3pb] {
        margin: 0 0 .45rem;
        font-size: clamp(1.65rem, 2.4vw, 2.2rem);
        font-weight: 800;
        letter-spacing: -.04em;
    }

    .vacation-header p[b-msswqtk3pb] {
        color: var(--ui-muted) !important;
    }

    .vacation-header .btn-primary[b-msswqtk3pb],
    .vacation-page button.btn.btn-primary[b-msswqtk3pb] {
        color: #fff !important;
        background: var(--ui-brand) !important;
        background-image: none !important;
        border-color: var(--ui-brand) !important;
    }

        .vacation-header .btn-primary:hover[b-msswqtk3pb],
        .vacation-page button.btn.btn-primary:hover[b-msswqtk3pb] {
            background: var(--ui-brand-600) !important;
            border-color: var(--ui-brand-600) !important;
        }

.pending-vacation-button[b-msswqtk3pb] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .75rem;
    color: #713b00;
    text-align: left;
    background: #fff4dd;
    border: 1px solid #ffd38d;
    border-radius: 11px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
    transition: transform .2s ease, background .2s ease;
}

    .pending-vacation-button:hover[b-msswqtk3pb] {
        background: #ffeac1;
        transform: translateY(-2px);
    }

    .pending-vacation-button strong[b-msswqtk3pb],
    .pending-vacation-button small[b-msswqtk3pb] {
        display: block;
    }

    .pending-vacation-button strong[b-msswqtk3pb] {
        font-size: .76rem;
    }

    .pending-vacation-button small[b-msswqtk3pb] {
        margin-top: .12rem;
        font-size: .68rem;
    }

.pending-vacation-icon[b-msswqtk3pb],
.pending-vacation-count[b-msswqtk3pb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
    color: #fff;
    background: var(--as-orange);
    border-radius: 50%;
    font-weight: 850;
}

.pending-vacation-count[b-msswqtk3pb] {
    width: 25px;
    height: 25px;
    margin-left: .15rem;
    color: #8a4200;
    background: #ffd28d;
    font-size: .75rem;
}

/* Calendar navigation */
.vacation-toolbar[b-msswqtk3pb] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}

    .vacation-toolbar > .d-flex[b-msswqtk3pb] {
        justify-self: start;
    }

.vacation-date-selector[b-msswqtk3pb] {
    display: flex;
    gap: .55rem;
}

    .vacation-date-selector .form-select[b-msswqtk3pb] {
        min-width: 145px;
        min-height: 42px;
    }

.vacation-month-title[b-msswqtk3pb] {
    justify-self: end;
    color: var(--as-ink);
    font-size: 1.1rem;
    font-weight: 800;
}

.vacation-page .btn-light[b-msswqtk3pb] {
    color: var(--as-ink) !important;
    background: var(--ui-surface-3) !important;
    background-image: none !important;
    border-color: var(--ui-line) !important;
}

.btn-light[b-msswqtk3pb] {
    background-color: grey !important;
}

.vacation-page .btn-outline-primary[b-msswqtk3pb] {
    color: var(--as-orange-dark) !important;
    background: #fff !important;
    border-color: var(--ui-brand-200) !important;
}

    .vacation-page .btn-outline-primary:hover[b-msswqtk3pb] {
        background: var(--as-orange) !important;
        border-color: var(--as-orange) !important;
    }
/* Legend */
.vacation-legend[b-msswqtk3pb] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.15rem;
    padding-inline: .25rem;
}

.legend-item[b-msswqtk3pb] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--as-muted);
    font-size: .78rem;
    font-weight: 700;
}

.legend-color[b-msswqtk3pb] {
    width: 13px;
    height: 13px;
    border-radius: 4px;
}

.legend-pending[b-msswqtk3pb],
.vacation-pending[b-msswqtk3pb],
.vacation-status-pending[b-msswqtk3pb] {
    background: #ffb54a !important;
}

.legend-approved[b-msswqtk3pb],
.vacation-approved[b-msswqtk3pb],
.vacation-status-approved[b-msswqtk3pb] {
    background: #39b879 !important;
}

.legend-rejected[b-msswqtk3pb],
.vacation-rejected[b-msswqtk3pb],
.vacation-status-rejected[b-msswqtk3pb] {
    background: #e05a62 !important;
}
/* Calendar grid */
.vacation-calendar-wrapper[b-msswqtk3pb] {
    overflow-x: auto;
    background: #fff;
}

.vacation-calendar[b-msswqtk3pb] {
    min-width: 1280px;
    background: #fff;
}

.vacation-grid[b-msswqtk3pb] {
    display: grid;
    grid-template-columns: 235px minmax(1045px, 1fr);
}

.vacation-grid-header[b-msswqtk3pb] {
    position: sticky;
    z-index: 3;
    top: 0;
    background: var(--ui-surface-2);
    border-bottom: 1px solid var(--as-line);
}

.vacation-employee-header[b-msswqtk3pb],
.vacation-employee-cell[b-msswqtk3pb] {
    border-right: 1px solid var(--as-line);
}

.vacation-employee-header[b-msswqtk3pb] {
    display: flex;
    align-items: center;
    padding: .9rem 1rem;
    color: var(--ui-muted);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.vacation-days-header[b-msswqtk3pb],
.vacation-days[b-msswqtk3pb] {
    display: grid;
    grid-template-columns: repeat(31, minmax(34px, 1fr));
}

.vacation-day-header[b-msswqtk3pb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    border-right: 1px solid var(--ui-surface-3);
}

    .vacation-day-header.weekend[b-msswqtk3pb] {
        background: #f5f5f6;
    }

    .vacation-day-header.today[b-msswqtk3pb] {
        color: var(--as-orange-dark);
        background: var(--as-orange-soft);
    }

.day-number[b-msswqtk3pb] {
    font-size: .82rem;
    font-weight: 850;
}

.day-name[b-msswqtk3pb] {
    margin-top: .18rem;
    color: var(--as-muted);
    font-size: .63rem;
    text-transform: uppercase;
}

.employee-vacation-row[b-msswqtk3pb] {
    min-height: 68px;
    border-bottom: 1px solid var(--ui-surface-3);
    transition: background .18s ease;
}

    .employee-vacation-row:hover[b-msswqtk3pb] {
        background: var(--ui-brand-50);
    }

.vacation-employee-cell[b-msswqtk3pb] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1rem;
    background: #fff;
}

    .vacation-employee-cell strong[b-msswqtk3pb] {
        display: block;
        font-size: .82rem;
        font-weight: 800;
    }

    .vacation-employee-cell small[b-msswqtk3pb] {
        margin-top: .2rem;
        font-size: .7rem;
    }

.vacation-avatar[b-msswqtk3pb] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #fff !important;
    background: linear-gradient(145deg, var(--ui-brand-400), var(--ui-brand-600)) !important;
    border: 2px solid #fff;
    border-radius: 11px;
    box-shadow: 0 5px 12px rgba(var(--ui-brand-rgb), .2);
    font-size: .68rem;
    font-weight: 850;
}

.vacation-day[b-msswqtk3pb] {
    min-height: 68px;
    padding: .35rem .15rem;
    background: #fff;
    border-right: 1px solid var(--ui-surface-3);
}

    .vacation-day.weekend[b-msswqtk3pb] {
        background: var(--ui-surface-2);
    }

    .vacation-day.today[b-msswqtk3pb] {
        background: var(--ui-brand-50);
    }

    .vacation-day > button[b-msswqtk3pb] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 40px;
        padding: .25rem .12rem;
        overflow: hidden;
        color: #fff;
        border: 0;
        border-radius: 8px;
        font-size: .59rem;
        font-weight: 850;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: transform .15s ease, filter .15s ease;
    }

        .vacation-day > button:hover[b-msswqtk3pb] {
            filter: brightness(.92);
            transform: scale(1.04);
        }

.vacation-start[b-msswqtk3pb],
.vacation-end[b-msswqtk3pb] {
    position: relative;
}
/* Pending modal and edit modal */
.vacation-modal-backdrop[b-msswqtk3pb] {
    position: fixed;
    z-index: 1050;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(13, 18, 28, .4);
    backdrop-filter: blur(5px);
}

.vacation-modal[b-msswqtk3pb] {
    width: min(100%, 680px);
    max-height: min(90vh, 820px);
    overflow: auto;
    background: #fff;
    border-radius: var(--as-radius);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
}

.pending-modal[b-msswqtk3pb] {
    width: min(100%, 760px);
}

.vacation-modal-header[b-msswqtk3pb] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.3rem 1.45rem;
    color: var(--ui-ink);
    background: var(--ui-surface-2);
    border-bottom: 1px solid var(--ui-line);
}

    .vacation-modal-header h2[b-msswqtk3pb] {
        color: var(--ui-ink);
    }

    .vacation-modal-header .text-muted[b-msswqtk3pb] {
        color: var(--ui-muted) !important;
    }

    .vacation-modal-header .eyebrow[b-msswqtk3pb] {
        color: var(--ui-brand-600) !important;
    }

.vacation-modal-body[b-msswqtk3pb] {
    padding: 1.4rem;
}

.vacation-modal-footer[b-msswqtk3pb] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem;
    padding: 1rem 1.4rem;
    background: var(--ui-surface-2);
    border-top: 1px solid var(--as-line);
}

.pending-list[b-msswqtk3pb] {
    display: grid;
    gap: .7rem;
}

.pending-item[b-msswqtk3pb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem;
    border: 1px solid var(--as-line);
    border-radius: 12px;
}

    .pending-item:hover[b-msswqtk3pb] {
        background: var(--ui-brand-50);
        border-color: var(--ui-brand-200);
    }

.pending-item-main[b-msswqtk3pb] {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

    .pending-item-main strong[b-msswqtk3pb] {
        display: block;
        font-size: .86rem;
    }

.pending-date[b-msswqtk3pb] {
    margin-top: .2rem;
    color: var(--as-orange-dark);
    font-size: .75rem;
    font-weight: 750;
}

.pending-item-actions[b-msswqtk3pb] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
}

.vacation-status-box[b-msswqtk3pb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1rem;
    background: var(--ui-surface-2);
    border: 1px solid var(--as-line);
    border-left: 4px solid var(--as-orange);
    border-radius: 10px;
}

    .vacation-status-box strong[b-msswqtk3pb] {
        display: block;
        margin-top: .2rem;
    }

    .vacation-status-box .text-muted[b-msswqtk3pb] {
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

.vacation-page .btn-success[b-msswqtk3pb] {
    color: #fff !important;
    background: var(--ui-success) !important;
    border-color: var(--ui-success) !important;
}

    .vacation-page .btn-success:hover[b-msswqtk3pb] {
        background: #208653 !important;
        border-color: #208653 !important;
    }

.vacation-page .btn-danger[b-msswqtk3pb] {
    color: #fff !important;
    background: var(--ui-danger) !important;
    border-color: var(--ui-danger) !important;
}

    .vacation-page .btn-danger:hover[b-msswqtk3pb] {
        background: var(--ui-danger-700) !important;
        border-color: var(--ui-danger-700) !important;
    }

.vacation-page .btn-outline-warning[b-msswqtk3pb] {
    color: #9a5700 !important;
    background: #fff !important;
    border-color: #ffc56e !important;
}

    .vacation-page .btn-outline-warning:hover[b-msswqtk3pb] {
        color: #fff !important;
        background: #e99516 !important;
        border-color: #e99516 !important;
    }

@media (max-width: 900px) {
    .vacation-header[b-msswqtk3pb] {
        align-items: flex-start;
        flex-direction: column;
        padding: 1.35rem;
    }

        .vacation-header > .d-flex[b-msswqtk3pb] {
            width: 100%;
            align-items: stretch !important;
            flex-direction: column;
        }

        .pending-vacation-button[b-msswqtk3pb],
        .vacation-header .btn-primary[b-msswqtk3pb] {
            width: 100%;
            justify-content: center;
        }

    .vacation-toolbar[b-msswqtk3pb] {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

        .vacation-toolbar > .d-flex[b-msswqtk3pb],
        .vacation-month-title[b-msswqtk3pb] {
            justify-self: stretch;
        }

    .vacation-month-title[b-msswqtk3pb] {
        text-align: center;
    }

    .vacation-date-selector .form-select[b-msswqtk3pb] {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .pending-item[b-msswqtk3pb] {
        align-items: stretch;
        flex-direction: column;
    }

    .pending-item-actions[b-msswqtk3pb] {
        justify-content: stretch;
    }

        .pending-item-actions .btn[b-msswqtk3pb] {
            flex: 1;
        }

    .vacation-modal-footer[b-msswqtk3pb] {
        flex-wrap: wrap;
    }
}
/* =========================================================
   MEIN URLAUB EXTENSIONS
   ========================================================= */

.vacation-page .vacation-header[b-msswqtk3pb] {
    align-items: center;
}

    .vacation-page .vacation-header .btn-primary[b-msswqtk3pb] {
        color: #fff !important;
        background: var(--ui-brand) !important;
        background-image: none !important;
        border-color: var(--ui-brand) !important;
    }

        .vacation-page .vacation-header .btn-primary:hover[b-msswqtk3pb] {
            background: var(--ui-brand-600) !important;
            border-color: var(--ui-brand-600) !important;
        }
/* Personal request table */
.vacation-page .table:not(.table-modern)[b-msswqtk3pb] {
    width: 100%;
    color: var(--as-ink);
    border-collapse: collapse;
}

    .vacation-page .table:not(.table-modern) thead th[b-msswqtk3pb] {
        padding: .9rem .75rem;
        color: var(--ui-muted);
        background: var(--ui-surface-2);
        border-bottom: 1px solid var(--as-line);
        font-size: .68rem;
        font-weight: 850;
        letter-spacing: .08em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .vacation-page .table:not(.table-modern) tbody td[b-msswqtk3pb] {
        padding: .95rem .75rem;
        border-bottom: 1px solid var(--ui-surface-3);
        font-size: .82rem;
        vertical-align: middle;
    }

    .vacation-page .table:not(.table-modern) tbody tr:hover[b-msswqtk3pb] {
        background: var(--ui-brand-50);
    }

    .vacation-page .table:not(.table-modern) tbody tr:last-child td[b-msswqtk3pb] {
        border-bottom: 0;
    }
/* Status badge classes returned by GetStatusBadgeClass */
.status-badge[b-msswqtk3pb],
.badge-status[b-msswqtk3pb],
.vacation-status[b-msswqtk3pb],
.status-pending[b-msswqtk3pb],
.status-approved[b-msswqtk3pb],
.status-rejected[b-msswqtk3pb] {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: .3rem .6rem;
    border-radius: 999px;
    font-size: .69rem;
    font-weight: 850;
    white-space: nowrap;
}

.status-pending[b-msswqtk3pb],
.vacation-status-pending[b-msswqtk3pb],
.status-badge-pending[b-msswqtk3pb] {
    color: #9a4700 !important;
    background: #fff0e5 !important;
}

.status-approved[b-msswqtk3pb],
.vacation-status-approved[b-msswqtk3pb],
.status-badge-approved[b-msswqtk3pb] {
    color: #17633c !important;
    background: #e8f7ee !important;
}

.status-rejected[b-msswqtk3pb],
.vacation-status-rejected[b-msswqtk3pb],
.status-badge-rejected[b-msswqtk3pb] {
    color: #8c2d36 !important;
    background: #ffeaec !important;
}
/* Modal overrides for the employee-facing form */
.vacation-page .vacation-modal-header h2[b-msswqtk3pb] {
    color: var(--ui-ink);
}

.vacation-page .vacation-modal-header p[b-msswqtk3pb] {
    color: var(--ui-muted) !important;
}

.vacation-page .vacation-modal-header .eyebrow[b-msswqtk3pb] {
    color: var(--ui-brand-600) !important;
}

.vacation-page .vacation-modal .form-label[b-msswqtk3pb] {
    color: var(--as-ink);
}

.vacation-page .vacation-modal .form-control[b-msswqtk3pb] {
    min-height: 46px;
}

.vacation-page .vacation-modal textarea.form-control[b-msswqtk3pb] {
    min-height: 105px;
}

.vacation-page .vacation-modal-footer .btn-primary[b-msswqtk3pb] {
    color: #fff !important;
    background: var(--ui-brand) !important;
    border-color: var(--ui-brand) !important;
}

    .vacation-page .vacation-modal-footer .btn-primary:hover[b-msswqtk3pb] {
        background: var(--ui-brand-600) !important;
        border-color: var(--ui-brand-600) !important;
    }

.vacation-page .vacation-modal-footer .btn-light[b-msswqtk3pb] {
    color: var(--as-ink) !important;
    background: var(--ui-surface-3) !important;
    border-color: var(--ui-line) !important;
}

    .vacation-page .vacation-modal-footer .btn-light:hover[b-msswqtk3pb] {
        background: var(--as-orange) !important;
        border-color: var(--as-orange) !important;
    }

@media (max-width: 767.98px) {
    .vacation-page .vacation-header[b-msswqtk3pb] {
        align-items: flex-start;
    }

        .vacation-page .vacation-header > .btn-primary[b-msswqtk3pb] {
            width: 100%;
        }

    .vacation-page .table:not(.table-modern)[b-msswqtk3pb] {
        min-width: 680px;
    }
}
/* =========================================================
   FIX: URLAUBANTRAG-BEARBEITEN – BUTTON LAYOUT
   Delete stays on the left; Cancel and Save stay together on the right.
   ========================================================= */

.vacation-page .vacation-modal-footer[b-msswqtk3pb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
}

    .vacation-page .vacation-modal-footer > .btn[b-msswqtk3pb],
    .vacation-page .vacation-modal-footer > button[b-msswqtk3pb] {
        flex: 0 0 auto;
        white-space: nowrap;
        margin: 0;
    }
    /* Keep the destructive action on the left when all three buttons
   are direct children of the footer. */
    .vacation-page .vacation-modal-footer > :first-child[b-msswqtk3pb] {
        margin-right: auto;
    }

    .vacation-page .vacation-modal-footer .btn-primary[b-msswqtk3pb] {
        min-width: 0;
    }
/* On narrow screens, use two clean rows instead of awkward wrapping:
   delete first, then Cancel + Save side by side. */
@media (max-width: 480px) {
    .vacation-page .vacation-modal-footer[b-msswqtk3pb] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.65rem;
        padding: 1rem;
    }

        .vacation-page .vacation-modal-footer > :first-child[b-msswqtk3pb] {
            grid-column: 1 / -1;
            justify-self: start;
            margin-right: 0;
        }

        .vacation-page .vacation-modal-footer > :nth-child(2)[b-msswqtk3pb] {
            grid-column: 1;
            justify-self: end;
        }

        .vacation-page .vacation-modal-footer > :nth-child(3)[b-msswqtk3pb] {
            grid-column: 2;
            justify-self: end;
        }

        .vacation-page .vacation-modal-footer .btn[b-msswqtk3pb] {
            max-width: 100%;
            padding: 0.65rem 0.85rem;
            font-size: 0.82rem;
        }
}
/* If the footer contains a wrapper around Cancel/Save, keep that pair
   in one row as well. */
.vacation-page .vacation-modal-footer > .d-flex[b-msswqtk3pb] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 0.65rem;
    min-width: 0;
}

@media (max-width: 480px) {
    .vacation-page .vacation-modal-footer > .d-flex[b-msswqtk3pb] {
        grid-column: 1 / -1;
        justify-content: flex-end;
        width: 100%;
    }
}
/* FINAL FIX: vacation edit modal footer */
.vacation-modal-footer[b-msswqtk3pb] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: 100%;
    box-sizing: border-box;
}

    .vacation-modal-footer > .vacation-delete-button[b-msswqtk3pb] {
        flex: 0 0 auto !important;
        margin-right: auto !important;
    }

    .vacation-modal-footer > .vacation-modal-footer-actions[b-msswqtk3pb] {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        margin-left: auto;
        min-width: 0;
    }

.vacation-modal-footer-actions .btn[b-msswqtk3pb] {
    white-space: nowrap;
    margin: 0;
}

@media (max-width: 480px) {
    .vacation-modal-footer[b-msswqtk3pb] {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 16px !important;
    }

        .vacation-modal-footer > .vacation-delete-button[b-msswqtk3pb] {
            align-self: flex-start !important;
            margin: 0 auto 0 0 !important;
            width: auto !important;
        }

        .vacation-modal-footer > .vacation-modal-footer-actions[b-msswqtk3pb] {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) !important;
            width: 100% !important;
            margin: 0 !important;
            gap: 10px !important;
        }

    .vacation-modal-footer-actions .btn[b-msswqtk3pb] {
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px 8px !important;
        font-size: .82rem !important;
    }
}
/* High-contrast Cancel button in the vacation edit modal */
.vacation-page .vacation-modal-footer .vacation-modal-footer-actions .btn.btn-light[b-msswqtk3pb],
.vacation-page .vacation-modal-footer .btn.btn-light[b-msswqtk3pb] {
    color: #252a30 !important;
    background-color: #e9edf1 !important;
    background-image: none !important;
    border: 1px solid #cbd2d9 !important;
    box-shadow: 0 2px 5px rgba(16, 24, 40, .08) !important;
    opacity: 1 !important;
    font-weight: 750 !important;
}

    .vacation-page .vacation-modal-footer .vacation-modal-footer-actions .btn.btn-light:hover[b-msswqtk3pb],
    .vacation-page .vacation-modal-footer .btn.btn-light:hover[b-msswqtk3pb] {
        color: var(--ui-ink) !important;
        background-color: #dce2e8 !important;
        border-color: #b8c1ca !important;
    }

    .vacation-page .vacation-modal-footer .vacation-modal-footer-actions .btn.btn-light:focus-visible[b-msswqtk3pb],
    .vacation-page .vacation-modal-footer .btn.btn-light:focus-visible[b-msswqtk3pb] {
        outline: 3px solid rgba(var(--ui-brand-rgb), .35) !important;
        outline-offset: 2px;
    }
/* Consistent button widths in the personal vacation modal */
.vacation-page .vacation-modal-footer .vacation-delete-button[b-msswqtk3pb],
.vacation-page .vacation-modal-footer-actions .btn[b-msswqtk3pb] {
    box-sizing: border-box !important;
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    justify-content: center !important;
    text-align: center !important;
}

.vacation-page .vacation-modal-footer .vacation-modal-footer-actions[b-msswqtk3pb] {
    display: flex !important;
    gap: 10px !important;
}

@media (max-width: 480px) {
    .vacation-page .vacation-modal-footer > .vacation-delete-button[b-msswqtk3pb] {
        width: calc((100% - 10px) / 2) !important;
        min-width: 0 !important;
        max-width: calc((100% - 10px) / 2) !important;
        align-self: flex-start !important;
    }

    .vacation-page .vacation-modal-footer > .vacation-modal-footer-actions[b-msswqtk3pb] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .vacation-page .vacation-modal-footer-actions .btn[b-msswqtk3pb] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}
/* FINAL OVERRIDE: all vacation modal buttons same size */
.vacation-page .vacation-modal-footer[b-msswqtk3pb] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

    .vacation-page .vacation-modal-footer .vacation-delete-button[b-msswqtk3pb],
    .vacation-page .vacation-modal-footer .vacation-modal-footer-actions .btn[b-msswqtk3pb] {
        box-sizing: border-box !important;
        flex: 0 0 160px !important;
        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 8px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .vacation-page .vacation-modal-footer .vacation-modal-footer-actions[b-msswqtk3pb] {
        display: flex !important;
        align-items: stretch !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        margin-left: auto !important;
        min-width: 0 !important;
    }
    /* Yellow, clearly visible Abbrechen button */
    .vacation-page .vacation-modal-footer .btn.btn-light[b-msswqtk3pb] {
        color: #302400 !important;
        background: #ffd34f !important;
        background-color: #ffd34f !important;
        background-image: none !important;
        border: 1px solid #e6b92e !important;
        box-shadow: 0 3px 8px rgba(145, 105, 0, .14) !important;
        opacity: 1 !important;
        font-weight: 800 !important;
    }

        .vacation-page .vacation-modal-footer .btn.btn-light:hover[b-msswqtk3pb] {
            color: #241b00 !important;
            background: #f5c52e !important;
            border-color: #d8aa1d !important;
        }

@media (max-width: 640px) {
    .vacation-page .vacation-modal-footer[b-msswqtk3pb] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        gap: 10px !important;
        padding: 16px !important;
    }

        .vacation-page .vacation-modal-footer > .vacation-delete-button[b-msswqtk3pb] {
            grid-column: 1 / -1 !important;
            justify-self: start !important;
            flex: 0 0 calc((100% - 10px) / 2) !important;
            width: calc((100% - 10px) / 2) !important;
            min-width: 0 !important;
            max-width: calc((100% - 10px) / 2) !important;
            margin: 0 !important;
        }

        .vacation-page .vacation-modal-footer > .vacation-modal-footer-actions[b-msswqtk3pb] {
            grid-column: 1 / -1 !important;
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
            gap: 10px !important;
            width: 100% !important;
            margin: 0 !important;
        }

        .vacation-page .vacation-modal-footer .vacation-modal-footer-actions .btn[b-msswqtk3pb] {
            width: 100% !important;
            min-width: 0 !important;
            max-width: none !important;
            flex: initial !important;
        }
}
/* MOBILE FINAL FIX: all three modal footer buttons exactly equal width */
@media (max-width: 640px) {
    .vacation-page .vacation-modal-footer[b-msswqtk3pb] {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 16px !important;
    }

        .vacation-page .vacation-modal-footer > .vacation-delete-button[b-msswqtk3pb],
        .vacation-page .vacation-modal-footer > .vacation-modal-footer-actions[b-msswqtk3pb],
        .vacation-page .vacation-modal-footer .vacation-modal-footer-actions .btn[b-msswqtk3pb] {
            box-sizing: border-box !important;
            display: flex !important;
            flex: 0 0 auto !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            min-height: 44px !important;
            margin: 0 !important;
        }

        .vacation-page .vacation-modal-footer > .vacation-modal-footer-actions[b-msswqtk3pb] {
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 10px !important;
        }

        .vacation-page .vacation-modal-footer .vacation-modal-footer-actions .btn[b-msswqtk3pb] {
            justify-content: center !important;
            padding: 10px 12px !important;
            white-space: normal !important;
        }
}
/* =========================================================
   FINAL FIX: Mein Urlaub modal footer buttons
   Desktop: keep the existing horizontal layout and equal sizes.
   Mobile: all three buttons use the same full width.
   Abbrechen stays yellow on every screen size.
   ========================================================= */
/* Yellow Abbrechen button on desktop and mobile */
.vacation-page .vacation-modal-footer .vacation-modal-footer-actions > button.btn.btn-light[b-msswqtk3pb] {
    color: #302400 !important;
    background-color: #ffd34f !important;
    background-image: none !important;
    border: 1px solid #e6b92e !important;
    box-shadow: 0 3px 8px rgba(145, 105, 0, .14) !important;
    opacity: 1 !important;
    font-weight: 800 !important;
}

    .vacation-page .vacation-modal-footer .vacation-modal-footer-actions > button.btn.btn-light:hover[b-msswqtk3pb] {
        color: #241b00 !important;
        background-color: #f5c52e !important;
        border-color: #d8aa1d !important;
    }
/* Mobile: equal full-width buttons stacked vertically */
@media (max-width: 640px) {
    .vacation-page .vacation-modal .vacation-modal-footer[b-msswqtk3pb] {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }

        .vacation-page .vacation-modal .vacation-modal-footer > button.vacation-delete-button[b-msswqtk3pb],
        .vacation-page .vacation-modal .vacation-modal-footer > .vacation-modal-footer-actions[b-msswqtk3pb],
        .vacation-page .vacation-modal .vacation-modal-footer > .vacation-modal-footer-actions > button[b-msswqtk3pb] {
            box-sizing: border-box !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            flex: 0 0 auto !important;
            margin: 0 !important;
        }

            .vacation-page .vacation-modal .vacation-modal-footer > button.vacation-delete-button[b-msswqtk3pb],
            .vacation-page .vacation-modal .vacation-modal-footer > .vacation-modal-footer-actions > button[b-msswqtk3pb] {
                min-height: 44px !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                padding: 10px 12px !important;
                white-space: normal !important;
            }

        .vacation-page .vacation-modal .vacation-modal-footer > .vacation-modal-footer-actions[b-msswqtk3pb] {
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 10px !important;
        }
}
/* FINAL: employee vacation modal footer buttons */
.vacation-page .vacation-modal-footer .vacation-modal-footer-actions > button.btn-light[b-msswqtk3pb] {
    color: #302400 !important;
    background: #ffd34f !important;
    background-image: none !important;
    border: 1px solid #e6b92e !important;
    box-shadow: 0 3px 8px rgba(145, 105, 0, .14) !important;
    opacity: 1 !important;
    font-weight: 800 !important;
}

@media (max-width: 640px) {
    .vacation-page .vacation-modal .vacation-modal-footer[b-msswqtk3pb] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        justify-items: stretch !important;
        gap: 10px !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }

        .vacation-page .vacation-modal .vacation-modal-footer > .vacation-delete-button[b-msswqtk3pb],
        .vacation-page .vacation-modal .vacation-modal-footer > .vacation-modal-footer-actions[b-msswqtk3pb],
        .vacation-page .vacation-modal .vacation-modal-footer > .vacation-modal-footer-actions > .btn[b-msswqtk3pb] {
            box-sizing: border-box !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            margin: 0 !important;
        }

            .vacation-page .vacation-modal .vacation-modal-footer > .vacation-delete-button[b-msswqtk3pb],
            .vacation-page .vacation-modal .vacation-modal-footer > .vacation-modal-footer-actions > .btn[b-msswqtk3pb] {
                display: flex !important;
                min-height: 44px !important;
                align-items: center !important;
                justify-content: center !important;
                padding: 10px 12px !important;
            }

        .vacation-page .vacation-modal .vacation-modal-footer > .vacation-modal-footer-actions[b-msswqtk3pb] {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) !important;
            gap: 10px !important;
        }
}
/* /Components/Pages/MitarbeiterUrlaub.razor.rz.scp.css */
/*
   Assignments.razor.css
   Light design-system styles (tokens in wwwroot/app.css)
*/

:host[b-ho3wn074em] {
    display: block;
    max-width: 100%;
    color: var(--as-ink);
}

    /* Page foundation */
    :host > div[b-ho3wn074em] {
        max-width: 1440px;
        margin-inline: auto;
    }

.employee-header[b-ho3wn074em] {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 2.25rem;
    margin-bottom: 1.5rem !important;
    overflow: hidden;
    color: var(--ui-ink);
    background: radial-gradient(120% 140% at 100% 0%, rgba(var(--ui-brand-rgb), .16) 0%, rgba(var(--ui-brand-rgb), .05) 32%, transparent 58%), radial-gradient(90% 120% at 0% 100%, rgba(99, 102, 241, .06), transparent 55%), var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    box-shadow: var(--ui-shadow);
}

    .employee-header[b-ho3wn074em]::after {
        position: absolute;
        right: -55px;
        bottom: -90px;
        width: 220px;
        height: 220px;
        content: "";
        border: 38px solid rgba(var(--ui-brand-rgb), .07);
        border-radius: 50%;
    }

    .employee-header > div[b-ho3wn074em],
    .employee-header > button[b-ho3wn074em] {
        position: relative;
        z-index: 1;
    }

    .employee-header h3[b-ho3wn074em] {
        margin: 0 0 .45rem;
        font-size: clamp(1.65rem, 2.4vw, 2.2rem);
        font-weight: 800;
        letter-spacing: -.04em;
    }

    .employee-header p[b-ho3wn074em] {
        color: var(--ui-muted) !important;
        font-size: .95rem;
    }

/* Cards */
.modern-card[b-ho3wn074em] {
    overflow: visible;
    background: var(--as-surface);
    border: 1px solid var(--as-line) !important;
    border-radius: var(--as-radius) !important;
    box-shadow: var(--as-shadow);
}

    .modern-card.overflow-hidden[b-ho3wn074em] {
        overflow: hidden;
    }

    .modern-card .card-body[b-ho3wn074em] {
        background: transparent;
    }

/* Buttons */
.btn[b-ho3wn074em] {
    min-height: 42px;
    padding: .65rem 1rem;
    border-radius: 10px;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .01em;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

    .btn:hover:not(:disabled)[b-ho3wn074em] {
        transform: translateY(-2px);
    }

    .btn:active:not(:disabled)[b-ho3wn074em] {
        transform: translateY(0);
    }

.btn-primary[b-ho3wn074em] {
    color: #fff !important;
    background: var(--as-orange) !important;
    border-color: var(--as-orange) !important;
    box-shadow: 0 8px 18px rgba(var(--ui-brand-rgb), .22);
}

    .btn-primary:hover:not(:disabled)[b-ho3wn074em],
    .btn-primary:focus-visible[b-ho3wn074em] {
        background: var(--as-orange-dark) !important;
        border-color: var(--as-orange-dark) !important;
        box-shadow: 0 10px 24px rgba(var(--ui-brand-rgb), .28);
    }

/* Hard override for themes that redefine Bootstrap .btn-primary */
button.btn.btn-primary[b-ho3wn074em],
a.btn.btn-primary[b-ho3wn074em] {
    color: #fff !important;
    background-color: var(--ui-brand) !important;
    background-image: none !important;
    border-color: var(--ui-brand) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}

    button.btn.btn-primary:hover:not(:disabled)[b-ho3wn074em],
    button.btn.btn-primary:focus-visible[b-ho3wn074em],
    a.btn.btn-primary:hover[b-ho3wn074em],
    a.btn.btn-primary:focus-visible[b-ho3wn074em] {
        color: #fff !important;
        background-color: var(--ui-brand-600) !important;
        border-color: var(--ui-brand-600) !important;
    }

.btn-secondary[b-ho3wn074em] {
    color: var(--as-ink) !important;
    background: var(--ui-surface-3) !important;
    border-color: var(--ui-surface-3) !important;
}

    .btn-secondary:hover:not(:disabled)[b-ho3wn074em] {
        background: var(--ui-line) !important;
        border-color: var(--ui-line) !important;
    }

.btn-outline-danger[b-ho3wn074em] {
    color: white !important;
    border-color: #fecdca !important;
    background: red !important;
}


.btn-sm[b-ho3wn074em] {
    min-height: 34px;
    padding: .42rem .72rem;
    border-radius: 8px;
    font-size: .76rem;
}

.btn:disabled[b-ho3wn074em] {
    cursor: not-allowed;
    opacity: .45;
    box-shadow: none;
}

/* Search */
.search-box[b-ho3wn074em] {
    overflow: hidden;
    border: 1px solid var(--as-line);
    border-radius: 12px;
    background: var(--ui-surface-2);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .search-box:focus-within[b-ho3wn074em] {
        background: #fff;
        border-color: var(--as-orange);
        box-shadow: 0 0 0 4px rgba(var(--ui-brand-rgb), .12);
    }

    .search-box .input-group-text[b-ho3wn074em] {
        padding-inline: 1rem;
        color: var(--as-orange);
        background: transparent;
        border: 0;
        font-size: 1.35rem;
    }

    .search-box .form-control[b-ho3wn074em] {
        border: 0;
        background: transparent;
        box-shadow: none;
    }

/* Forms */
.form-label[b-ho3wn074em] {
    display: block;
    margin-bottom: .5rem;
    color: var(--as-ink);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.form-control[b-ho3wn074em] {
    min-height: 46px;
    padding: .7rem .85rem;
    color: var(--as-ink);
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    font-size: .9rem;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .form-control[b-ho3wn074em]::placeholder {
        color: var(--ui-subtle);
    }

    .form-control:focus[b-ho3wn074em] {
        color: var(--as-ink);
        background: #fff;
        border-color: var(--as-orange);
        box-shadow: 0 0 0 4px rgba(var(--ui-brand-rgb), .12);
    }

textarea.form-control[b-ho3wn074em] {
    min-height: 104px;
    resize: vertical;
}

/* Live search dropdowns */
.live-search-wrapper[b-ho3wn074em] {
    position: relative;
}

.live-search-results[b-ho3wn074em] {
    position: absolute;
    z-index: 20;
    top: calc(100% + .5rem);
    right: 0;
    left: 0;
    overflow: hidden;
    padding: .4rem;
    background: #fff;
    border: 1px solid var(--as-line);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(16, 24, 40, .16);
}

.live-search-result[b-ho3wn074em] {
    display: flex;
    align-items: center;
    width: 100%;
    gap: .75rem;
    padding: .7rem .75rem;
    color: var(--as-ink);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 9px;
    transition: background .15s ease;
}

    .live-search-result:hover[b-ho3wn074em],
    .live-search-result:focus-visible[b-ho3wn074em] {
        background: var(--as-orange-soft);
        outline: none;
    }

.live-search-avatar[b-ho3wn074em],
.employee-avatar[b-ho3wn074em] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #fff;
    background: var(--as-dark);
    border-radius: 12px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .03em;
}

    .live-search-avatar.site-avatar[b-ho3wn074em] {
        color: var(--as-dark);
        background: var(--as-orange-soft);
        border: 1px solid var(--ui-brand-200);
    }

.live-search-content[b-ho3wn074em] {
    min-width: 0;
}

.live-search-title[b-ho3wn074em] {
    overflow: hidden;
    font-size: .88rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-search-subtitle[b-ho3wn074em] {
    margin-top: .18rem;
    color: var(--as-muted);
    font-size: .75rem;
}

.live-search-empty[b-ho3wn074em] {
    padding: 1rem;
    color: var(--as-muted);
    font-size: .82rem;
    text-align: center;
}

.selected-info[b-ho3wn074em] {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .65rem;
    padding: .55rem .7rem;
    color: var(--as-dark);
    background: var(--as-orange-soft);
    border: 1px solid var(--ui-brand-200);
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 700;
}

.selected-check[b-ho3wn074em] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    color: #fff;
    background: var(--as-orange);
    border-radius: 50%;
    font-size: .72rem;
}

.selected-remove[b-ho3wn074em] {
    width: 26px;
    height: 26px;
    margin-left: auto;
    color: var(--as-orange-dark);
    background: transparent;
    border: 0;
    border-radius: 50%;
    font-size: 1.15rem;
    line-height: 1;
}

    .selected-remove:hover[b-ho3wn074em] {
        background: rgba(var(--ui-brand-rgb), .14);
    }

/* Alerts */
.alert[b-ho3wn074em] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border: 0;
    border-left: 4px solid var(--as-orange);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(16, 24, 40, .06);
}

.alert-warning[b-ho3wn074em] {
    color: var(--ui-warning-700);
    background: var(--ui-warning-50);
}

.alert-danger[b-ho3wn074em] {
    color: var(--ui-danger-700);
    background: var(--ui-danger-50);
    border-left-color: var(--as-danger);
}

.alert-success[b-ho3wn074em] {
    color: var(--ui-success-700);
    background: var(--ui-success-50);
    border-left-color: var(--ui-success);
}

/* Table */
.table-modern[b-ho3wn074em] {
    margin: 0;
    --bs-table-bg: transparent;
}

    .table-modern thead th[b-ho3wn074em] {
        padding: 1rem 1.25rem;
        color: var(--ui-muted);
        background: var(--ui-surface-2);
        border-bottom: 1px solid var(--as-line);
        font-size: .7rem;
        font-weight: 850;
        letter-spacing: .09em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .table-modern tbody td[b-ho3wn074em] {
        padding: 1.1rem 1.25rem;
        color: var(--as-ink);
        border-bottom: 1px solid var(--ui-surface-3);
        font-size: .87rem;
        vertical-align: middle;
    }

    .table-modern tbody tr[b-ho3wn074em] {
        transition: background .18s ease;
    }

        .table-modern tbody tr:hover[b-ho3wn074em] {
            background: var(--ui-brand-50);
        }

        .table-modern tbody tr:last-child td[b-ho3wn074em] {
            border-bottom: 0;
        }

.assignment-date[b-ho3wn074em] {
    color: var(--as-ink);
    font-weight: 800;
    white-space: nowrap;
}

.assignment-time[b-ho3wn074em] {
    margin-top: .3rem;
    color: var(--as-orange-dark);
    font-size: .75rem;
    font-weight: 750;
    white-space: nowrap;
}

.employee-avatar[b-ho3wn074em] {
    width: 42px;
    height: 42px;
    color: #fff !important;
    background: linear-gradient(145deg, var(--ui-brand-400), var(--ui-brand-600)) !important;
    background-image: linear-gradient(145deg, var(--ui-brand-400), var(--ui-brand-600)) !important;
    border: 2px solid #fff;
    box-shadow: 0 6px 13px rgba(var(--ui-brand-rgb), .18);
}

.table-modern .fw-semibold[b-ho3wn074em] {
    font-weight: 750 !important;
}

.table-modern small[b-ho3wn074em] {
    display: inline-block;
    margin-top: .22rem;
    font-size: .74rem;
}

/* Empty state and pagination */
.empty-state[b-ho3wn074em] {
    padding: 1.75rem 1rem;
}

.empty-state-icon[b-ho3wn074em] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: .9rem;
    color: var(--as-orange);
    background: var(--as-orange-soft);
    border-radius: 18px;
    font-size: 1.7rem;
}

.empty-state h6[b-ho3wn074em] {
    margin-bottom: .3rem;
    font-weight: 800;
}

.pagination-container[b-ho3wn074em] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--ui-surface-2);
    border-top: 1px solid var(--as-line);
}

    .pagination-container .btn[b-ho3wn074em] {
        min-width: 35px;
    }

/* Bootstrap utility refinement inside this component */
.text-muted[b-ho3wn074em] {
    color: var(--as-muted) !important;
}

/* Keyboard accessibility */
button:focus-visible[b-ho3wn074em],
a:focus-visible[b-ho3wn074em],
input:focus-visible[b-ho3wn074em],
textarea:focus-visible[b-ho3wn074em] {
    outline: 3px solid rgba(var(--ui-brand-rgb), .28);
    outline-offset: 2px;
}

/* Responsive layout */
@media (max-width: 991.98px) {
    .employee-header[b-ho3wn074em] {
        padding: 1.6rem;
    }

    .table-modern thead th[b-ho3wn074em],
    .table-modern tbody td[b-ho3wn074em] {
        padding-inline: .9rem;
    }
}

@media (max-width: 767.98px) {
    .employee-header[b-ho3wn074em] {
        align-items: flex-start;
        flex-direction: column;
        padding: 1.35rem;
    }

        .employee-header .btn[b-ho3wn074em] {
            width: 100%;
        }

    .modern-card .card-body[b-ho3wn074em] {
        padding: 1rem !important;
    }

    .pagination-container[b-ho3wn074em] {
        align-items: flex-start;
        flex-direction: column;
    }

        .pagination-container > div:last-child[b-ho3wn074em] {
            width: 100%;
            justify-content: flex-end;
        }

    .table-modern[b-ho3wn074em] {
        min-width: 900px;
    }
}

@media (max-width: 479.98px) {
    .employee-header h3[b-ho3wn074em] {
        font-size: 1.5rem;
    }

    .d-flex.gap-2.mt-4[b-ho3wn074em] {
        flex-direction: column;
    }

        .d-flex.gap-2.mt-4 .btn[b-ho3wn074em] {
            width: 100%;
        }
}

@media (prefers-reduced-motion: reduce) {
    *[b-ho3wn074em],
    *[b-ho3wn074em]::before,
    *[b-ho3wn074em]::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* =========================================================
   MITARBEITER URLAUB PAGE
   ========================================================= */

.vacation-page[b-ho3wn074em] {
    max-width: 1600px;
    margin-inline: auto;
}

.vacation-header[b-ho3wn074em] {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 2rem 2.25rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
    color: var(--ui-ink);
    background: radial-gradient(120% 140% at 100% 0%, rgba(var(--ui-brand-rgb), .16) 0%, rgba(var(--ui-brand-rgb), .05) 32%, transparent 58%), radial-gradient(90% 120% at 0% 100%, rgba(99, 102, 241, .06), transparent 55%), var(--ui-surface);
    border-radius: var(--as-radius);
    box-shadow: var(--ui-shadow);
    border: 1px solid var(--ui-line);
}

    .vacation-header[b-ho3wn074em]::after {
        position: absolute;
        right: -55px;
        bottom: -95px;
        width: 225px;
        height: 225px;
        content: "";
        border: 38px solid rgba(var(--ui-brand-rgb), .07);
        border-radius: 50%;
    }

    .vacation-header > *[b-ho3wn074em] {
        position: relative;
        z-index: 1;
    }

    .vacation-header h3[b-ho3wn074em] {
        margin: 0 0 .45rem;
        font-size: clamp(1.65rem, 2.4vw, 2.2rem);
        font-weight: 800;
        letter-spacing: -.04em;
    }

    .vacation-header p[b-ho3wn074em] {
        color: var(--ui-muted) !important;
    }

    .vacation-header .btn-primary[b-ho3wn074em],
    .vacation-page button.btn.btn-primary[b-ho3wn074em] {
        color: #fff !important;
        background: var(--ui-brand) !important;
        background-image: none !important;
        border-color: var(--ui-brand) !important;
    }

        .vacation-header .btn-primary:hover[b-ho3wn074em],
        .vacation-page button.btn.btn-primary:hover[b-ho3wn074em] {
            background: var(--ui-brand-600) !important;
            border-color: var(--ui-brand-600) !important;
        }

.pending-vacation-button[b-ho3wn074em] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .75rem;
    color: #713b00;
    text-align: left;
    background: #fff4dd;
    border: 1px solid #ffd38d;
    border-radius: 11px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
    transition: transform .2s ease, background .2s ease;
}

    .pending-vacation-button:hover[b-ho3wn074em] {
        background: #ffeac1;
        transform: translateY(-2px);
    }

    .pending-vacation-button strong[b-ho3wn074em],
    .pending-vacation-button small[b-ho3wn074em] {
        display: block;
    }

    .pending-vacation-button strong[b-ho3wn074em] {
        font-size: .76rem;
    }

    .pending-vacation-button small[b-ho3wn074em] {
        margin-top: .12rem;
        font-size: .68rem;
    }

.pending-vacation-icon[b-ho3wn074em],
.pending-vacation-count[b-ho3wn074em] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
    color: #fff;
    background: var(--as-orange);
    border-radius: 50%;
    font-weight: 850;
}

.pending-vacation-count[b-ho3wn074em] {
    width: 25px;
    height: 25px;
    margin-left: .15rem;
    color: #8a4200;
    background: #ffd28d;
    font-size: .75rem;
}

/* Calendar navigation */
.vacation-toolbar[b-ho3wn074em] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}

    .vacation-toolbar > .d-flex[b-ho3wn074em] {
        justify-self: start;
    }

.vacation-date-selector[b-ho3wn074em] {
    display: flex;
    gap: .55rem;
}

    .vacation-date-selector .form-select[b-ho3wn074em] {
        min-width: 145px;
        min-height: 42px;
    }

.vacation-month-title[b-ho3wn074em] {
    justify-self: end;
    color: var(--as-ink);
    font-size: 1.1rem;
    font-weight: 800;
}

.vacation-page .btn-light[b-ho3wn074em] {
    color: white !important;
    background: grey !important;
    background-image: none !important;
    border-color: var(--ui-line) !important;
}


.btn-light[b-ho3wn074em] {
    background-color: grey;
    color: white;
}

.vacation-page .btn-outline-primary[b-ho3wn074em] {
    color: var(--as-orange-dark) !important;
    background: #fff !important;
    border-color: var(--ui-brand-200) !important;
}

    .vacation-page .btn-outline-primary:hover[b-ho3wn074em] {
        background: var(--as-orange) !important;
        border-color: var(--as-orange) !important;
    }

/* Legend */
.vacation-legend[b-ho3wn074em] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.15rem;
    padding-inline: .25rem;
}

.legend-item[b-ho3wn074em] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--as-muted);
    font-size: .78rem;
    font-weight: 700;
}

.legend-color[b-ho3wn074em] {
    width: 13px;
    height: 13px;
    border-radius: 4px;
}

.legend-pending[b-ho3wn074em],
.vacation-pending[b-ho3wn074em],
.vacation-status-pending[b-ho3wn074em] {
    background: #ffb54a !important;
}

.legend-approved[b-ho3wn074em],
.vacation-approved[b-ho3wn074em],
.vacation-status-approved[b-ho3wn074em] {
    background: #39b879 !important;
}

.legend-rejected[b-ho3wn074em],
.vacation-rejected[b-ho3wn074em],
.vacation-status-rejected[b-ho3wn074em] {
    background: #e05a62 !important;
}

/* Calendar grid */
.vacation-calendar-wrapper[b-ho3wn074em] {
    overflow-x: auto;
    background: #fff;
}

.vacation-calendar[b-ho3wn074em] {
    min-width: 1280px;
    background: #fff;
}

.vacation-grid[b-ho3wn074em] {
    display: grid;
    grid-template-columns: 235px minmax(1045px, 1fr);
}

.vacation-grid-header[b-ho3wn074em] {
    position: sticky;
    z-index: 3;
    top: 0;
    background: var(--ui-surface-2);
    border-bottom: 1px solid var(--as-line);
}

.vacation-employee-header[b-ho3wn074em],
.vacation-employee-cell[b-ho3wn074em] {
    border-right: 1px solid var(--as-line);
}

.vacation-employee-header[b-ho3wn074em] {
    display: flex;
    align-items: center;
    padding: .9rem 1rem;
    color: var(--ui-muted);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.vacation-days-header[b-ho3wn074em],
.vacation-days[b-ho3wn074em] {
    display: grid;
    grid-template-columns: repeat(31, minmax(34px, 1fr));
}

.vacation-day-header[b-ho3wn074em] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    border-right: 1px solid var(--ui-surface-3);
}

    .vacation-day-header.weekend[b-ho3wn074em] {
        background: #f5f5f6;
    }

    .vacation-day-header.today[b-ho3wn074em] {
        color: var(--as-orange-dark);
        background: var(--as-orange-soft);
    }

.day-number[b-ho3wn074em] {
    font-size: .82rem;
    font-weight: 850;
}

.day-name[b-ho3wn074em] {
    margin-top: .18rem;
    color: var(--as-muted);
    font-size: .63rem;
    text-transform: uppercase;
}

.employee-vacation-row[b-ho3wn074em] {
    min-height: 68px;
    border-bottom: 1px solid var(--ui-surface-3);
    transition: background .18s ease;
}

    .employee-vacation-row:hover[b-ho3wn074em] {
        background: var(--ui-brand-50);
    }

.vacation-employee-cell[b-ho3wn074em] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1rem;
    background: #fff;
}

    .vacation-employee-cell strong[b-ho3wn074em] {
        display: block;
        font-size: .82rem;
        font-weight: 800;
    }

    .vacation-employee-cell small[b-ho3wn074em] {
        margin-top: .2rem;
        font-size: .7rem;
    }

.vacation-avatar[b-ho3wn074em] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #fff !important;
    background: linear-gradient(145deg, var(--ui-brand-400), var(--ui-brand-600)) !important;
    border: 2px solid #fff;
    border-radius: 11px;
    box-shadow: 0 5px 12px rgba(var(--ui-brand-rgb), .2);
    font-size: .68rem;
    font-weight: 850;
}

.vacation-day[b-ho3wn074em] {
    min-height: 68px;
    padding: .35rem .15rem;
    background: #fff;
    border-right: 1px solid var(--ui-surface-3);
}

    .vacation-day.weekend[b-ho3wn074em] {
        background: var(--ui-surface-2);
    }

    .vacation-day.today[b-ho3wn074em] {
        background: var(--ui-brand-50);
    }

    .vacation-day > button[b-ho3wn074em] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 40px;
        padding: .25rem .12rem;
        overflow: hidden;
        color: #fff;
        border: 0;
        border-radius: 8px;
        font-size: .59rem;
        font-weight: 850;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: transform .15s ease, filter .15s ease;
    }

        .vacation-day > button:hover[b-ho3wn074em] {
            filter: brightness(.92);
            transform: scale(1.04);
        }

.vacation-start[b-ho3wn074em],
.vacation-end[b-ho3wn074em] {
    position: relative;
}

/* Pending modal and edit modal */
.vacation-modal-backdrop[b-ho3wn074em] {
    position: fixed;
    z-index: 1050;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(13, 18, 28, .4);
    backdrop-filter: blur(5px);
}

.vacation-modal[b-ho3wn074em] {
    width: min(100%, 680px);
    max-height: min(90vh, 820px);
    overflow: auto;
    background: #fff;
    border-radius: var(--as-radius);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
}

.pending-modal[b-ho3wn074em] {
    width: min(100%, 760px);
}

.vacation-modal-header[b-ho3wn074em] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.3rem 1.45rem;
    color: var(--ui-ink);
    background: var(--ui-surface-2);
    border-bottom: 1px solid var(--ui-line);
}

    .vacation-modal-header h2[b-ho3wn074em] {
        color: var(--ui-ink);
    }

    .vacation-modal-header .text-muted[b-ho3wn074em] {
        color: var(--ui-muted) !important;
    }

    .vacation-modal-header .eyebrow[b-ho3wn074em] {
        color: var(--ui-brand-600) !important;
    }

.vacation-modal-body[b-ho3wn074em] {
    padding: 1.4rem;
}

/* =========================================================
   VACATION MODAL FOOTER - EINHEITLICHE BUTTONS
   Desktop: 3 Spalten, Tablet: 2 Spalten, Mobile: untereinander
   ========================================================= */
.vacation-modal-footer[b-ho3wn074em] {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 10px;
    padding: 16px 24px;
    background: var(--ui-surface-2);
    border-top: 1px solid var(--as-line);
}

    .vacation-modal-footer > button[b-ho3wn074em] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        min-width: 0;
        min-height: 56px;
        height: 56px;
        margin: 0 !important;
        padding: 10px 12px;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.3;
        font-size: .84rem;
        font-weight: 750;
        border-radius: 11px;
        box-sizing: border-box;
    }

        .vacation-modal-footer > button i[b-ho3wn074em],
        .vacation-modal-footer > button svg[b-ho3wn074em] {
            flex-shrink: 0;
        }

.pending-list[b-ho3wn074em] {
    display: grid;
    gap: .7rem;
}

.pending-item[b-ho3wn074em] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem;
    border: 1px solid var(--as-line);
    border-radius: 12px;
}

    .pending-item:hover[b-ho3wn074em] {
        background: var(--ui-brand-50);
        border-color: var(--ui-brand-200);
    }

.pending-item-main[b-ho3wn074em] {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

    .pending-item-main strong[b-ho3wn074em] {
        display: block;
        font-size: .86rem;
    }

.pending-date[b-ho3wn074em] {
    margin-top: .2rem;
    color: var(--as-orange-dark);
    font-size: .75rem;
    font-weight: 750;
}

.pending-item-actions[b-ho3wn074em] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
}

.vacation-status-box[b-ho3wn074em] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1rem;
    background: var(--ui-surface-2);
    border: 1px solid var(--as-line);
    border-left: 4px solid var(--as-orange);
    border-radius: 10px;
}

    .vacation-status-box strong[b-ho3wn074em] {
        display: block;
        margin-top: .2rem;
    }

    .vacation-status-box .text-muted[b-ho3wn074em] {
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

.vacation-page .btn-success[b-ho3wn074em] {
    color: #fff !important;
    background: var(--ui-success) !important;
    border-color: var(--ui-success) !important;
}

    .vacation-page .btn-success:hover[b-ho3wn074em] {
        background: #208653 !important;
        border-color: #208653 !important;
    }

.vacation-page .btn-danger[b-ho3wn074em] {
    color: #fff !important;
    background: var(--ui-danger) !important;
    border-color: var(--ui-danger) !important;
}

    .vacation-page .btn-danger:hover[b-ho3wn074em] {
        background: var(--ui-danger-700) !important;
        border-color: var(--ui-danger-700) !important;
    }

.vacation-page .btn-outline-warnings[b-ho3wn074em] {
    color: white !important;
    background: yellow !important;
    border-color: #ffc56e !important;
}

.btn-outline-warnings[b-ho3wn074em] {
    color: #ffffff !important;
    background-color: #A87900 !important;
    border-color: #A87900 !important;
}

@media (max-width: 900px) {
    .vacation-header[b-ho3wn074em] {
        align-items: flex-start;
        flex-direction: column;
        padding: 1.35rem;
    }

        .vacation-header > .d-flex[b-ho3wn074em] {
            width: 100%;
            align-items: stretch !important;
            flex-direction: column;
        }

        .pending-vacation-button[b-ho3wn074em],
        .vacation-header .btn-primary[b-ho3wn074em] {
            width: 100%;
            justify-content: center;
        }

    .vacation-toolbar[b-ho3wn074em] {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

        .vacation-toolbar > .d-flex[b-ho3wn074em],
        .vacation-month-title[b-ho3wn074em] {
            justify-self: stretch;
        }

    .vacation-month-title[b-ho3wn074em] {
        text-align: center;
    }

    .vacation-date-selector .form-select[b-ho3wn074em] {
        flex: 1;
        min-width: 0;
    }

    .vacation-modal-footer[b-ho3wn074em] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 14px 18px;
        gap: 10px;
    }

        .vacation-modal-footer > button[b-ho3wn074em] {
            min-height: 54px;
            height: 54px;
        }
}

@media (max-width: 640px) {
    .pending-item[b-ho3wn074em] {
        align-items: stretch;
        flex-direction: column;
    }

    .pending-item-actions[b-ho3wn074em] {
        justify-content: stretch;
    }

        .pending-item-actions .btn[b-ho3wn074em] {
            flex: 1;
        }

    .vacation-modal-footer[b-ho3wn074em] {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px 16px;
    }

        .vacation-modal-footer > button[b-ho3wn074em] {
            display: flex;
            width: 100% !important;
            min-width: 0;
            min-height: 50px;
            height: auto;
            margin: 0 !important;
            padding: 12px 14px;
        }
}
/* /Components/Pages/Preise.razor.rz.scp.css */
/* BauManagement – Preise
   Put this file next to Preise.razor as Preise.razor.css
*/

.bm-pricing-page[b-zv70ypx1xk] {
    --orange: var(--ui-brand);
    --orange-2: var(--ui-brand-400);
    --bg: var(--ui-bg);
    --card: var(--ui-surface-2);
    --card-2: var(--ui-surface-2);
    --border: var(--ui-line);
    --text: var(--ui-ink);
    --muted: var(--ui-text);
    --soft: var(--ui-text);
    min-height: 100vh;
    background: radial-gradient(circle at 50% 0%,rgba(var(--ui-brand-rgb), .11),transparent 28%), linear-gradient(180deg,var(--ui-bg) 0%,var(--ui-surface) 100%);
    color: var(--text);
    font-family: var(--ui-font);
}

/* Back navigation – same style as Login */
.bm-price-top[b-zv70ypx1xk] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 24px 0;
}

.bm-price-back[b-zv70ypx1xk] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ui-text);
    text-decoration: none;
    font-size: .9rem;
    transition: color .2s ease;
}

    .bm-price-back:hover[b-zv70ypx1xk] {
        color: var(--ui-ink);
    }

.bm-price-back-arrow[b-zv70ypx1xk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    color: var(--ui-brand);
    font-size: 18px;
    line-height: 1;
    transition: all .2s ease;
}

.bm-price-back:hover .bm-price-back-arrow[b-zv70ypx1xk] {
    background: var(--ui-brand);
    border-color: var(--ui-brand);
    color: #fff;
}

.bm-price-brand[b-zv70ypx1xk] {
    color: var(--ui-ink);
    font-weight: 700;
    letter-spacing: -.03em;
}

.bm-price-brand-orange[b-zv70ypx1xk] {
    color: var(--ui-brand);
}

.bm-price-hero[b-zv70ypx1xk] {
    max-width: 900px;
    margin: 0 auto;
    padding: 70px 24px 55px;
    text-align: center;
}

.bm-price-eyebrow[b-zv70ypx1xk],
.bm-section-eyebrow[b-zv70ypx1xk] {
    display: inline-block;
    color: var(--orange);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.2px;
    margin-bottom: 18px;
}

.bm-price-hero h1[b-zv70ypx1xk],
.bm-compare h2[b-zv70ypx1xk],
.bm-price-cta h2[b-zv70ypx1xk] {
    margin: 0;
    font-weight: 850;
    letter-spacing: -2px;
    line-height: 1.02;
}

.bm-price-hero h1[b-zv70ypx1xk] {
    font-size: clamp(42px,5.2vw,72px);
}

    .bm-price-hero h1 span[b-zv70ypx1xk],
    .bm-compare h2 span[b-zv70ypx1xk],
    .bm-price-cta h2 span[b-zv70ypx1xk] {
        color: var(--orange);
    }

.bm-price-hero > p[b-zv70ypx1xk] {
    max-width: 650px;
    margin: 24px auto 0;
    color: var(--ui-text);
    font-size: 17px;
    line-height: 1.7;
}

.bm-price-note[b-zv70ypx1xk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex-wrap: wrap;
    margin: 28px auto 0;
    color: var(--ui-text);
    font-size: 13px;
}

    .bm-price-note span:first-child[b-zv70ypx1xk] {
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: rgba(var(--ui-brand-rgb), .14);
        color: var(--orange);
        font-weight: 900;
    }

    .bm-price-note strong[b-zv70ypx1xk] {
        color: var(--ui-ink);
    }

.bm-plans[b-zv70ypx1xk] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 25px 24px 110px;
}

.bm-plan-grid[b-zv70ypx1xk] {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
    align-items: stretch;
}

.bm-plan[b-zv70ypx1xk] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 555px;
    padding: 30px 26px 25px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: radial-gradient(circle at 100% 0%,rgba(var(--ui-ink-rgb), .035),transparent 35%), linear-gradient(145deg,var(--ui-surface-2),var(--ui-surface));
    box-shadow: 0 20px 60px rgba(16, 24, 40, 0.07);
    transition: .25s ease;
}

    .bm-plan:hover[b-zv70ypx1xk] {
        transform: translateY(-7px);
        border-color: var(--ui-line-strong);
        box-shadow: 0 28px 70px rgba(16, 24, 40, 0.11);
    }

.bm-plan-featured[b-zv70ypx1xk] {
    border-color: rgba(var(--ui-brand-rgb), .75);
    background: radial-gradient(circle at 50% 0%,rgba(var(--ui-brand-rgb), .13),transparent 38%), linear-gradient(145deg,var(--ui-surface-2),var(--ui-surface-2));
    box-shadow: 0 25px 75px rgba(var(--ui-brand-rgb), .10);
}

.bm-popular[b-zv70ypx1xk] {
    position: absolute;
    top: 17px;
    right: 17px;
    padding: 7px 11px;
    border: 1px solid rgba(var(--ui-brand-rgb), .35);
    border-radius: 999px;
    background: rgba(var(--ui-brand-rgb), .12);
    color: #ffad69;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.bm-plan-head[b-zv70ypx1xk] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bm-plan-badge[b-zv70ypx1xk] {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: rgba(var(--ui-brand-rgb), .11);
    border: 1px solid rgba(var(--ui-brand-rgb), .13);
    color: var(--orange);
    font-size: 12px;
    font-weight: 900;
}

.bm-plan-name[b-zv70ypx1xk] {
    font-size: 22px;
    font-weight: 850;
}

.bm-plan-team[b-zv70ypx1xk] {
    margin-top: 4px;
    color: var(--ui-text);
    font-size: 12px;
}

.bm-price[b-zv70ypx1xk] {
    margin-top: 30px;
    white-space: nowrap;
    color: var(--ui-ink);
    font-size: 18px;
    font-weight: 700;
}

    .bm-price span[b-zv70ypx1xk] {
        font-size: 50px;
        font-weight: 900;
        letter-spacing: -2px;
    }

    .bm-price small[b-zv70ypx1xk] {
        color: var(--ui-text);
        font-size: 12px;
        font-weight: 500;
    }

.bm-plan-limit[b-zv70ypx1xk] {
    margin-top: 6px;
    color: var(--ui-text);
    font-size: 13px;
}

.bm-plan ul[b-zv70ypx1xk] {
    list-style: none;
    margin: 25px 0 25px;
    padding: 0;
    display: grid;
    gap: 12px;
    flex: 1;
}

.bm-plan li[b-zv70ypx1xk] {
    position: relative;
    padding-left: 24px;
    color: var(--ui-text);
    font-size: 13px;
    line-height: 1.45;
}

    .bm-plan li[b-zv70ypx1xk]::before {
        content: "✓";
        position: absolute;
        left: 0;
        top: -1px;
        color: var(--orange);
        font-weight: 900;
    }

.bm-plan-btn[b-zv70ypx1xk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    border: 1px solid var(--ui-line-strong);
    border-radius: 11px;
    color: var(--ui-ink);
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    background: var(--ui-surface-2);
    transition: .2s ease;
}

    .bm-plan-btn:hover[b-zv70ypx1xk] {
        border-color: var(--orange);
        color: var(--ui-ink);
        background: rgba(var(--ui-brand-rgb), .10);
    }

    .bm-plan-btn span[b-zv70ypx1xk] {
        color: var(--orange);
        font-size: 18px;
    }

.bm-plan-btn-primary[b-zv70ypx1xk] {
    border-color: var(--orange);
    color: #090b0f;
    background: var(--orange);
    box-shadow: 0 10px 30px rgba(var(--ui-brand-rgb), .18);
}

    .bm-plan-btn-primary:hover[b-zv70ypx1xk] {
        background: #ff922b;
        color: #090b0f;
    }

.bm-compare[b-zv70ypx1xk] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 105px 24px 120px;
    text-align: center;
}

    .bm-compare h2[b-zv70ypx1xk] {
        font-size: clamp(34px,4.5vw,56px);
    }

.bm-feature-table[b-zv70ypx1xk] {
    margin-top: 45px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    text-align: left;
    background: var(--ui-surface);
}

.bm-table-head[b-zv70ypx1xk],
.bm-table-row[b-zv70ypx1xk] {
    display: grid;
    grid-template-columns: 2fr repeat(4,1fr);
    align-items: center;
}

.bm-table-head[b-zv70ypx1xk] {
    min-height: 58px;
    background: var(--ui-surface-2);
    color: var(--ui-ink);
    font-size: 12px;
    font-weight: 850;
}

    .bm-table-head div:not(:first-child)[b-zv70ypx1xk],
    .bm-table-row div:not(:first-child)[b-zv70ypx1xk] {
        text-align: center;
    }

    .bm-table-head div[b-zv70ypx1xk],
    .bm-table-row div[b-zv70ypx1xk] {
        padding: 15px 18px;
    }

.bm-table-row[b-zv70ypx1xk] {
    min-height: 58px;
    border-top: 1px solid var(--ui-line);
    color: var(--ui-text);
    font-size: 13px;
}

    .bm-table-row div:first-child[b-zv70ypx1xk] {
        color: var(--ui-ink);
        font-weight: 650;
    }

    .bm-table-row div:not(:first-child)[b-zv70ypx1xk] {
        color: var(--orange);
        font-size: 16px;
        font-weight: 800;
    }

    .bm-table-row div:nth-child(2)[b-zv70ypx1xk],
    .bm-table-row div:nth-child(3)[b-zv70ypx1xk],
    .bm-table-row div:nth-child(4)[b-zv70ypx1xk],
    .bm-table-row div:nth-child(5)[b-zv70ypx1xk] {
        border-left: 1px solid var(--ui-line);
    }

.bm-price-cta[b-zv70ypx1xk] {
    position: relative;
    max-width: 1100px;
    margin: 0 auto 100px;
    padding: 75px 30px;
    overflow: hidden;
    border: 1px solid rgba(var(--ui-brand-rgb), .28);
    border-radius: 28px;
    background: radial-gradient(circle at 50% 0%,rgba(var(--ui-brand-rgb), .18),transparent 45%), var(--ui-surface-2);
    text-align: center;
}

.bm-cta-glow[b-zv70ypx1xk] {
    position: absolute;
    width: 380px;
    height: 180px;
    left: 50%;
    top: -100px;
    transform: translateX(-50%);
    background: rgba(var(--ui-brand-rgb), .16);
    filter: blur(75px);
    pointer-events: none;
}

.bm-cta-icon[b-zv70ypx1xk] {
    position: relative;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(var(--ui-brand-rgb), .13);
    border: 1px solid rgba(var(--ui-brand-rgb), .28);
    color: var(--orange);
    font-size: 20px;
    font-weight: 900;
}

.bm-price-cta h2[b-zv70ypx1xk] {
    position: relative;
    font-size: clamp(34px,4.2vw,54px);
}

.bm-price-cta p[b-zv70ypx1xk] {
    position: relative;
    margin: 20px auto 28px;
    color: var(--ui-text);
}

.bm-cta-btn[b-zv70ypx1xk] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 25px;
    border-radius: 11px;
    background: var(--orange);
    color: #090b0e;
    text-decoration: none;
    font-weight: 850;
    box-shadow: 0 15px 40px rgba(var(--ui-brand-rgb), .20);
    transition: .2s ease;
}

    .bm-cta-btn:hover[b-zv70ypx1xk] {
        transform: translateY(-2px);
        background: #ff922b;
        color: #090b0e;
    }

    .bm-cta-btn span[b-zv70ypx1xk] {
        font-size: 20px;
    }

.bm-price-footer[b-zv70ypx1xk] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 24px 35px;
    border-top: 1px solid var(--ui-line);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: var(--ui-muted);
    font-size: 12px;
}

.bm-footer-links[b-zv70ypx1xk] {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

    .bm-footer-links a[b-zv70ypx1xk] {
        color: var(--ui-text);
        text-decoration: none;
    }

        .bm-footer-links a:hover[b-zv70ypx1xk] {
            color: var(--orange);
        }

@media(max-width:1050px) {
    .bm-plan-grid[b-zv70ypx1xk] {
        grid-template-columns: repeat(2,1fr);
    }
}


@media(max-width:700px) {
    .bm-price-top[b-zv70ypx1xk] {
        padding: 20px 18px 0;
    }

    .bm-price-hero[b-zv70ypx1xk] {
        padding: 75px 18px 40px;
    }

        .bm-price-hero h1[b-zv70ypx1xk] {
            letter-spacing: -1.5px;
        }

        .bm-price-hero > p[b-zv70ypx1xk] {
            font-size: 15px;
        }

    .bm-plans[b-zv70ypx1xk] {
        padding: 10px 15px 75px;
    }

    .bm-plan-grid[b-zv70ypx1xk] {
        grid-template-columns: 1fr;
    }

    .bm-plan[b-zv70ypx1xk] {
        min-height: auto;
    }

    .bm-compare[b-zv70ypx1xk] {
        padding: 70px 15px 80px;
    }

    .bm-feature-table[b-zv70ypx1xk] {
        overflow-x: auto;
    }

    .bm-table-head[b-zv70ypx1xk],
    .bm-table-row[b-zv70ypx1xk] {
        min-width: 720px;
    }

    .bm-price-cta[b-zv70ypx1xk] {
        margin: 0 15px 70px;
        padding: 55px 20px;
    }

    .bm-price-footer[b-zv70ypx1xk] {
        flex-direction: column;
        padding: 25px 18px;
    }
}
/* =========================================
   NAVIGATION
   ========================================= */
.landing-hero .landing-nav .brand-bau[b-zv70ypx1xk] {
    color: var(--ui-ink) !important;
}

.landing-hero .landing-nav .brand-management[b-zv70ypx1xk] {
    color: var(--ui-brand) !important;
}

.bm-pricing-page .landing-nav[b-zv70ypx1xk] {
    position: relative;
    z-index: 100;
    display: flex;
    align-items: center;
    min-height: 76px;
    padding-top: 14px;
    padding-bottom: 14px;
}

    .bm-pricing-page .landing-nav .brand[b-zv70ypx1xk] {
        text-decoration: none;
        white-space: nowrap;
    }

.bm-pricing-page .brand-bau[b-zv70ypx1xk] {
    color: var(--ui-ink);
}

.bm-pricing-page .brand-management[b-zv70ypx1xk] {
    color: #ff9f45;
}

.bm-pricing-page .landing-nav-menu[b-zv70ypx1xk] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

    .bm-pricing-page .landing-nav-menu a[b-zv70ypx1xk] {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 10px 13px;
        border-radius: 9px;
        color: var(--ui-subtle);
        text-decoration: none;
        font-size: 13px;
        font-weight: 650;
        transition: all .2s ease;
    }

        .bm-pricing-page .landing-nav-menu a:hover[b-zv70ypx1xk],
        .bm-pricing-page .landing-nav-menu a.active[b-zv70ypx1xk] {
            color: var(--ui-ink);
            background: rgba(var(--ui-ink-rgb), .055);
        }

        .bm-pricing-page .landing-nav-menu a.active[b-zv70ypx1xk] {
            color: #ff9f45;
        }

.bm-pricing-page .nav-b2b[b-zv70ypx1xk] {
    border: 1px solid rgba(var(--ui-brand-rgb), .18);
}

.bm-pricing-page .landing-nav-actions[b-zv70ypx1xk] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 18px;
}

.bm-pricing-page .nav-login[b-zv70ypx1xk] {
    color: var(--ui-ink);
    background: transparent;
    border: 1px solid var(--ui-line-strong);
}

    .bm-pricing-page .nav-login:hover[b-zv70ypx1xk] {
        border-color: var(--ui-brand);
        background: rgba(var(--ui-brand-rgb), .08);
    }

.bm-pricing-page .nav-action[b-zv70ypx1xk] {
    border: 0;
    background: var(--ui-brand);
    color: #090b0e;
}

    .bm-pricing-page .nav-action:hover[b-zv70ypx1xk] {
        background: #ff922b;
        color: #090b0e;
    }


/* MOBILE */

@media (max-width: 991.98px) {

    .bm-pricing-page .landing-nav-menu[b-zv70ypx1xk] {
        display: none;
    }

    .bm-pricing-page .landing-nav-actions[b-zv70ypx1xk] {
        margin-left: auto;
    }
}

@media (max-width: 767px) {

    .bm-pricing-page .landing-nav[b-zv70ypx1xk] {
        padding-left: 18px;
        padding-right: 18px;
    }

    .bm-pricing-page .nav-login[b-zv70ypx1xk] {
        display: none !important;
    }

    .bm-pricing-page .nav-action[b-zv70ypx1xk] {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

@media (max-width: 480px) {

    .bm-pricing-page .nav-action[b-zv70ypx1xk] {
        font-size: 12px;
        padding-left: 13px !important;
        padding-right: 13px !important;
    }
}


/* =========================================================
   NAV – SAME AS FUNKTIONEN
   ========================================================= */

.bm-pricing-page .landing-nav[b-zv70ypx1xk] {
    position: relative !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 74px !important;
    padding: 10px 0 !important;
    gap: 28px !important;
    box-sizing: border-box !important;
}

    .bm-pricing-page .landing-nav .brand[b-zv70ypx1xk] {
        display: inline-flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--ui-ink) !important;
        font-size: 17px !important;
        font-weight: 800 !important;
        letter-spacing: -.04em !important;
        line-height: 1 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    .bm-pricing-page .landing-nav .brand-bau[b-zv70ypx1xk] {
        color: var(--ui-ink) !important;
        font-weight: 800 !important;
    }

    .bm-pricing-page .landing-nav .brand-management[b-zv70ypx1xk] {
        color: var(--ui-brand) !important;
        font-weight: 800 !important;
    }

.bm-pricing-page .landing-nav-menu[b-zv70ypx1xk] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
}

    .bm-pricing-page .landing-nav-menu > a[b-zv70ypx1xk] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 40px !important;
        padding: 10px 13px !important;
        color: var(--ui-subtle) !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: 9px !important;
        font-size: 13px !important;
        font-weight: 650 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        transition: color .2s ease, background .2s ease, border-color .2s ease !important;
    }

        .bm-pricing-page .landing-nav-menu > a:hover[b-zv70ypx1xk],
        .bm-pricing-page .landing-nav-menu > a:focus-visible[b-zv70ypx1xk] {
            color: var(--ui-ink) !important;
            background: rgba(var(--ui-ink-rgb), .055) !important;
            border-color: rgba(var(--ui-ink-rgb), 0.07) !important;
        }

        /* Preise is active */
        .bm-pricing-page .landing-nav-menu > a.nav-active[b-zv70ypx1xk] {
            color: var(--ui-brand) !important;
            background: transparent !important;
            border-color: transparent !important;
        }

            .bm-pricing-page .landing-nav-menu > a.nav-active:hover[b-zv70ypx1xk],
            .bm-pricing-page .landing-nav-menu > a.nav-active:focus-visible[b-zv70ypx1xk] {
                color: var(--ui-ink) !important;
                background: rgba(var(--ui-ink-rgb), .055) !important;
                border-color: rgba(var(--ui-ink-rgb), 0.07) !important;
            }

        .bm-pricing-page .landing-nav-menu > a.nav-b2b[b-zv70ypx1xk] {
            gap: 7px !important;
            padding-left: 13px !important;
            padding-right: 13px !important;
            border: 1px solid rgba(var(--ui-brand-rgb), .35) !important;
            color: var(--ui-subtle) !important;
        }

            .bm-pricing-page .landing-nav-menu > a.nav-b2b i[b-zv70ypx1xk] {
                color: var(--ui-brand) !important;
                font-size: 13px !important;
            }

            .bm-pricing-page .landing-nav-menu > a.nav-b2b:hover[b-zv70ypx1xk],
            .bm-pricing-page .landing-nav-menu > a.nav-b2b:focus-visible[b-zv70ypx1xk] {
                color: var(--ui-ink) !important;
                background: rgba(var(--ui-ink-rgb), .055) !important;
                border-color: var(--ui-brand) !important;
            }

/* Desktop actions – EXACT same orange outline style as Funktionen */
.bm-pricing-page .landing-nav-actions[b-zv70ypx1xk] {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-left: 8px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

.bm-pricing-page .landing-nav .nav-login[b-zv70ypx1xk],
.bm-pricing-page .landing-nav .nav-action[b-zv70ypx1xk] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 18px !important;
    color: var(--ui-brand) !important;
    background: transparent !important;
    border: 1px solid var(--ui-brand) !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: color .2s ease, background .2s ease, transform .2s ease !important;
}

    .bm-pricing-page .landing-nav .nav-login:hover[b-zv70ypx1xk],
    .bm-pricing-page .landing-nav .nav-action:hover[b-zv70ypx1xk] {
        color: #fff !important;
        background: var(--ui-brand) !important;
        border-color: var(--ui-brand) !important;
        transform: translateY(-1px);
    }

/* Mobile toggle */
.bm-pricing-page .bm-mobile-menu-toggle[b-zv70ypx1xk] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
}

.bm-pricing-page .bm-mobile-menu-button[b-zv70ypx1xk] {
    display: none !important;
}

@media (max-width: 900px) {
    .bm-pricing-page .landing-nav[b-zv70ypx1xk] {
        min-height: 68px !important;
        padding: 14px !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
        overflow: visible !important;
    }

        .bm-pricing-page .landing-nav .brand[b-zv70ypx1xk] {
            font-size: 16px !important;
        }

    .bm-pricing-page .bm-mobile-menu-button[b-zv70ypx1xk] {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 5px !important;
        width: 40px !important;
        height: 40px !important;
        margin-left: auto !important;
        padding: 9px !important;
        cursor: pointer !important;
        border: 1px solid rgba(var(--ui-brand-rgb), .75) !important;
        border-radius: 9px !important;
        background: rgba(var(--ui-brand-rgb), .08) !important;
        z-index: 110 !important;
    }

        .bm-pricing-page .bm-mobile-menu-button span[b-zv70ypx1xk] {
            display: block !important;
            width: 100% !important;
            height: 2px !important;
            border-radius: 99px !important;
            background: var(--ui-brand) !important;
            transition: transform .2s ease, opacity .2s ease !important;
        }

    .bm-pricing-page .landing-nav-menu[b-zv70ypx1xk] {
        order: 10 !important;
        display: none !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        margin: 10px 0 0 !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 3px !important;
        border: 1px solid rgba(var(--ui-brand-rgb), .3) !important;
        border-radius: 12px !important;
        background: var(--ui-surface-2) !important;
        box-shadow: 0 20px 45px rgba(16, 24, 40, 0.14) !important;
    }

    .bm-pricing-page .bm-mobile-menu-toggle:checked ~ .landing-nav-menu[b-zv70ypx1xk] {
        display: flex !important;
    }

    .bm-pricing-page .landing-nav-menu > a[b-zv70ypx1xk] {
        width: 100% !important;
        min-height: 42px !important;
        justify-content: flex-start !important;
        padding: 10px 12px !important;
        box-sizing: border-box !important;
    }

    .bm-pricing-page .landing-nav-actions[b-zv70ypx1xk] {
        display: none !important;
    }

    .bm-pricing-page .landing-nav-menu .bm-mobile-actions[b-zv70ypx1xk] {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
        padding-top: 5px !important;
        margin-top: 5px !important;
        border-top: 1px solid rgba(var(--ui-ink-rgb), 0.11) !important;
    }

    .bm-pricing-page .bm-mobile-actions .bm-mobile-login[b-zv70ypx1xk],
    .bm-pricing-page .bm-mobile-actions .bm-mobile-register[b-zv70ypx1xk] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 40px !important;
        padding: 0 18px !important;
        border-radius: 9px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    .bm-pricing-page .bm-mobile-actions .bm-mobile-login[b-zv70ypx1xk] {
        color: var(--ui-brand) !important;
        border: 1px solid var(--ui-brand) !important;
        background: transparent !important;
    }

    .bm-pricing-page .bm-mobile-actions .bm-mobile-register[b-zv70ypx1xk] {
        color: var(--ui-brand) !important;
        border: 1px solid var(--ui-brand) !important;
        background: transparent !important;
    }

        .bm-pricing-page .bm-mobile-actions .bm-mobile-login:hover[b-zv70ypx1xk],
        .bm-pricing-page .bm-mobile-actions .bm-mobile-register:hover[b-zv70ypx1xk] {
            color: #fff !important;
            background: var(--ui-brand) !important;
        }

    .bm-pricing-page .bm-mobile-menu-toggle:checked + .bm-mobile-menu-button span:nth-child(1)[b-zv70ypx1xk] {
        transform: translateY(7px) rotate(45deg);
    }

    .bm-pricing-page .bm-mobile-menu-toggle:checked + .bm-mobile-menu-button span:nth-child(2)[b-zv70ypx1xk] {
        opacity: 0;
    }

    .bm-pricing-page .bm-mobile-menu-toggle:checked + .bm-mobile-menu-button span:nth-child(3)[b-zv70ypx1xk] {
        transform: translateY(-7px) rotate(-45deg);
    }
}

@media (max-width: 520px) {
    .bm-pricing-page .landing-nav[b-zv70ypx1xk] {
        padding: 13px 12px !important;
    }

        .bm-pricing-page .landing-nav .brand[b-zv70ypx1xk] {
            font-size: 15px !important;
        }
}

/* FIX: mobile authentication actions must not appear in the desktop navbar */
@media (min-width: 992px) {
    .bm-pricing-page .landing-nav-menu .bm-mobile-actions[b-zv70ypx1xk] {
        display: none !important;
    }
}


/* =========================================================
   DESIGN SYSTEM – NAVIGATION ACTIONS
   ========================================================= */

.bm-pricing-page nav.landing-nav .landing-nav-menu > a[b-zv70ypx1xk] {
    color: var(--ui-muted) !important;
}

    .bm-pricing-page nav.landing-nav .landing-nav-menu > a:hover[b-zv70ypx1xk] {
        color: var(--ui-ink) !important;
    }

.bm-pricing-page nav.landing-nav .nav-login[b-zv70ypx1xk] {
    color: var(--ui-ink) !important;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-line-strong) !important;
    box-shadow: var(--ui-shadow-xs) !important;
}

    .bm-pricing-page nav.landing-nav .nav-login:hover[b-zv70ypx1xk] {
        color: var(--ui-ink) !important;
        background: var(--ui-surface-2) !important;
        border-color: #b9c0cc !important;
    }

.bm-pricing-page nav.landing-nav .nav-action[b-zv70ypx1xk] {
    color: #fff !important;
    background: var(--ui-brand-gradient) !important;
    border: 1px solid var(--ui-brand-600) !important;
    box-shadow: var(--ui-shadow-brand) !important;
}

    .bm-pricing-page nav.landing-nav .nav-action:hover[b-zv70ypx1xk] {
        color: #fff !important;
        background: linear-gradient(135deg, #ff7a2e 0%, #f25a07 55%, #d9430a 100%) !important;
        border-color: var(--ui-brand-700) !important;
    }
/* /Components/Pages/Rechnungen.razor.rz.scp.css */
.my-invoices-page[b-s4b5ivp1rq] {
    max-width: 1500px;
    margin-inline: auto;
}

.invoice-summary-card[b-s4b5ivp1rq] {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e8ebf0);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(20, 35, 60, .04);
}

.invoice-summary-icon[b-s4b5ivp1rq] {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #0d6efd;
    background: rgba(13, 110, 253, .10);
    font-size: 1.25rem;
}

.invoice-summary-icon-success[b-s4b5ivp1rq] {
    color: #198754;
    background: rgba(25, 135, 84, .11);
}

.invoice-summary-icon-neutral[b-s4b5ivp1rq] {
    color: #64748b;
    background: rgba(100, 116, 139, .12);
}

.invoice-list-card[b-s4b5ivp1rq] {
    border-radius: 18px;
    overflow: hidden;
}

.invoice-search[b-s4b5ivp1rq] {
    max-width: 420px;
}

.invoice-table thead th[b-s4b5ivp1rq] {
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: .72rem;
    letter-spacing: .055em;
    color: #778196;
    background: #f8fafc;
    white-space: nowrap;
    border-top: 1px solid #eef1f5;
}

.invoice-table tbody td[b-s4b5ivp1rq] {
    padding-top: 17px;
    padding-bottom: 17px;
    border-color: #eef1f5;
}

.invoice-file-icon[b-s4b5ivp1rq] {
    width: 42px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #dc3545;
    background: rgba(220, 53, 69, .08);
    font-size: 1.25rem;
}

.invoice-empty-icon[b-s4b5ivp1rq] {
    width: 64px;
    height: 64px;
    display: inline-grid;
    place-items: center;
    border-radius: 18px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 1.7rem;
}

@media (max-width: 767.98px) {
    .invoice-summary-card[b-s4b5ivp1rq] {
        padding: 16px;
    }

    .invoice-table[b-s4b5ivp1rq] {
        min-width: 760px;
    }
}
/* /Components/Pages/Tasks.razor.rz.scp.css */
/*
   Assignments.razor.css
   Light design-system styles (tokens in wwwroot/app.css)
*/

:host[b-jengydjii6] {
    display: block;
    color: var(--as-ink);
}

    /* Page foundation */
    :host > div[b-jengydjii6] {
        max-width: 1440px;
        margin-inline: auto;
    }

.employee-header[b-jengydjii6] {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 2rem 2.25rem;
    margin: 0 0 1.5rem;
    overflow: hidden;
    box-sizing: border-box;
    color: var(--ui-ink);
    background: radial-gradient(120% 140% at 100% 0%, rgba(var(--ui-brand-rgb), .16) 0%, rgba(var(--ui-brand-rgb), .05) 32%, transparent 58%), radial-gradient(90% 120% at 0% 100%, rgba(99, 102, 241, .06), transparent 55%), var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    box-shadow: var(--ui-shadow);
}

    .employee-header[b-jengydjii6]::after {
        position: absolute;
        right: -55px;
        bottom: -90px;
        width: 220px;
        height: 220px;
        content: "";
        border: 38px solid rgba(var(--ui-brand-rgb), .07);
        border-radius: 50%;
    }

    .employee-header > div[b-jengydjii6],
    .employee-header > button[b-jengydjii6] {
        position: relative;
        z-index: 1;
    }

    .employee-header h3[b-jengydjii6] {
        margin: 0 0 .45rem;
        font-size: clamp(1.65rem, 2.4vw, 2.2rem);
        font-weight: 800;
        letter-spacing: -.04em;
    }

    .employee-header p[b-jengydjii6] {
        color: var(--ui-muted) !important;
        font-size: .95rem;
    }

/* Cards */
.modern-card[b-jengydjii6] {
    overflow: visible;
    background: var(--as-surface);
    border: 1px solid var(--as-line) !important;
    border-radius: var(--as-radius) !important;
    box-shadow: var(--as-shadow);
}

    .modern-card.overflow-hidden[b-jengydjii6] {
        overflow: hidden;
    }

    .modern-card .card-body[b-jengydjii6] {
        background: transparent;
    }

/* Buttons */
.btn[b-jengydjii6] {
    min-height: 42px;
    padding: .65rem 1rem;
    border-radius: 10px;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .01em;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

    .btn:hover:not(:disabled)[b-jengydjii6] {
        transform: translateY(-2px);
    }

    .btn:active:not(:disabled)[b-jengydjii6] {
        transform: translateY(0);
    }

.btn-primary[b-jengydjii6] {
    color: #fff !important;
    background: var(--as-orange) !important;
    border-color: var(--as-orange) !important;
    box-shadow: 0 8px 18px rgba(var(--ui-brand-rgb), .22);
}

    .btn-primary:hover:not(:disabled)[b-jengydjii6],
    .btn-primary:focus-visible[b-jengydjii6] {
        background: var(--as-orange-dark) !important;
        border-color: var(--as-orange-dark) !important;
        box-shadow: 0 10px 24px rgba(var(--ui-brand-rgb), .28);
    }

/* Hard override for themes that redefine Bootstrap .btn-primary */
button.btn.btn-primary[b-jengydjii6],
a.btn.btn-primary[b-jengydjii6] {
    color: #fff !important;
    background-color: var(--ui-brand) !important;
    background-image: none !important;
    border-color: var(--ui-brand) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}

    button.btn.btn-primary:hover:not(:disabled)[b-jengydjii6],
    button.btn.btn-primary:focus-visible[b-jengydjii6],
    a.btn.btn-primary:hover[b-jengydjii6],
    a.btn.btn-primary:focus-visible[b-jengydjii6] {
        color: #fff !important;
        background-color: var(--ui-brand-600) !important;
        border-color: var(--ui-brand-600) !important;
    }

.btn-secondary[b-jengydjii6] {
    color: var(--as-ink) !important;
    background: var(--ui-surface-3) !important;
    border-color: var(--ui-surface-3) !important;
}

    .btn-secondary:hover:not(:disabled)[b-jengydjii6] {
        background: var(--ui-line) !important;
        border-color: var(--ui-line) !important;
    }

.btn-outline-danger[b-jengydjii6] {
    color: var(--as-danger) !important;
    border-color: #fecdca !important;
    background: #fff !important;
}

    .btn-outline-danger:hover:not(:disabled)[b-jengydjii6] {
        background: var(--as-danger) !important;
        border-color: var(--as-danger) !important;
    }

.btn-sm[b-jengydjii6] {
    min-height: 34px;
    padding: .42rem .72rem;
    border-radius: 8px;
    font-size: .76rem;
}

.btn:disabled[b-jengydjii6] {
    cursor: not-allowed;
    opacity: .45;
    box-shadow: none;
}

/* Search */
.search-box[b-jengydjii6] {
    overflow: hidden;
    border: 1px solid var(--as-line);
    border-radius: 12px;
    background: var(--ui-surface-2);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .search-box:focus-within[b-jengydjii6] {
        background: #fff;
        border-color: var(--as-orange);
        box-shadow: 0 0 0 4px rgba(var(--ui-brand-rgb), .12);
    }

    .search-box .input-group-text[b-jengydjii6] {
        padding-inline: 1rem;
        color: var(--as-orange);
        background: transparent;
        border: 0;
        font-size: 1.35rem;
    }

    .search-box .form-control[b-jengydjii6] {
        border: 0;
        background: transparent;
        box-shadow: none;
    }

/* Forms */
.form-label[b-jengydjii6] {
    display: block;
    margin-bottom: .5rem;
    color: var(--as-ink);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.form-control[b-jengydjii6] {
    min-height: 46px;
    padding: .7rem .85rem;
    color: var(--as-ink);
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    font-size: .9rem;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .form-control[b-jengydjii6]::placeholder {
        color: var(--ui-subtle);
    }

    .form-control:focus[b-jengydjii6] {
        color: var(--as-ink);
        background: #fff;
        border-color: var(--as-orange);
        box-shadow: 0 0 0 4px rgba(var(--ui-brand-rgb), .12);
    }

textarea.form-control[b-jengydjii6] {
    min-height: 104px;
    resize: vertical;
}

/* Live search dropdowns */
.live-search-wrapper[b-jengydjii6] {
    position: relative;
}

.live-search-results[b-jengydjii6] {
    position: absolute;
    z-index: 20;
    top: calc(100% + .5rem);
    right: 0;
    left: 0;
    overflow: hidden;
    padding: .4rem;
    background: #fff;
    border: 1px solid var(--as-line);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(16, 24, 40, .16);
}

.live-search-result[b-jengydjii6] {
    display: flex;
    align-items: center;
    width: 100%;
    gap: .75rem;
    padding: .7rem .75rem;
    color: var(--as-ink);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 9px;
    transition: background .15s ease;
}

    .live-search-result:hover[b-jengydjii6],
    .live-search-result:focus-visible[b-jengydjii6] {
        background: var(--as-orange-soft);
        outline: none;
    }

.live-search-avatar[b-jengydjii6],
.employee-avatar[b-jengydjii6] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #fff;
    background: var(--as-dark);
    border-radius: 12px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .03em;
}

    .live-search-avatar.site-avatar[b-jengydjii6] {
        color: var(--as-dark);
        background: var(--as-orange-soft);
        border: 1px solid var(--ui-brand-200);
    }

.live-search-content[b-jengydjii6] {
    min-width: 0;
}

.live-search-title[b-jengydjii6] {
    overflow: hidden;
    font-size: .88rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-search-subtitle[b-jengydjii6] {
    margin-top: .18rem;
    color: var(--as-muted);
    font-size: .75rem;
}

.live-search-empty[b-jengydjii6] {
    padding: 1rem;
    color: var(--as-muted);
    font-size: .82rem;
    text-align: center;
}

.selected-info[b-jengydjii6] {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .65rem;
    padding: .55rem .7rem;
    color: var(--as-dark);
    background: var(--as-orange-soft);
    border: 1px solid var(--ui-brand-200);
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 700;
}

.selected-check[b-jengydjii6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    color: #fff;
    background: var(--as-orange);
    border-radius: 50%;
    font-size: .72rem;
}

.selected-remove[b-jengydjii6] {
    width: 26px;
    height: 26px;
    margin-left: auto;
    color: var(--as-orange-dark);
    background: transparent;
    border: 0;
    border-radius: 50%;
    font-size: 1.15rem;
    line-height: 1;
}

    .selected-remove:hover[b-jengydjii6] {
        background: rgba(var(--ui-brand-rgb), .14);
    }

/* Alerts */
.alert[b-jengydjii6] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border: 0;
    border-left: 4px solid var(--as-orange);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(16, 24, 40, .06);
}

.alert-warning[b-jengydjii6] {
    color: var(--ui-warning-700);
    background: var(--ui-warning-50);
}

.alert-danger[b-jengydjii6] {
    color: var(--ui-danger-700);
    background: var(--ui-danger-50);
    border-left-color: var(--as-danger);
}

.alert-success[b-jengydjii6] {
    color: var(--ui-success-700);
    background: var(--ui-success-50);
    border-left-color: var(--ui-success);
}

/* Table */
.table-modern[b-jengydjii6] {
    margin: 0;
    --bs-table-bg: transparent;
}

    .table-modern thead th[b-jengydjii6] {
        padding: 1rem 1.25rem;
        color: var(--ui-muted);
        background: var(--ui-surface-2);
        border-bottom: 1px solid var(--as-line);
        font-size: .7rem;
        font-weight: 850;
        letter-spacing: .09em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .table-modern tbody td[b-jengydjii6] {
        padding: 1.1rem 1.25rem;
        color: var(--as-ink);
        border-bottom: 1px solid var(--ui-surface-3);
        font-size: .87rem;
        vertical-align: middle;
    }

    .table-modern tbody tr[b-jengydjii6] {
        transition: background .18s ease;
    }

        .table-modern tbody tr:hover[b-jengydjii6] {
            background: var(--ui-brand-50);
        }

        .table-modern tbody tr:last-child td[b-jengydjii6] {
            border-bottom: 0;
        }

.assignment-date[b-jengydjii6] {
    color: var(--as-ink);
    font-weight: 800;
    white-space: nowrap;
}

.assignment-time[b-jengydjii6] {
    margin-top: .3rem;
    color: var(--as-orange-dark);
    font-size: .75rem;
    font-weight: 750;
    white-space: nowrap;
}

.employee-avatar[b-jengydjii6] {
    width: 42px;
    height: 42px;
    color: #fff !important;
    background: linear-gradient(145deg, var(--ui-brand-400), var(--ui-brand-600)) !important;
    background-image: linear-gradient(145deg, var(--ui-brand-400), var(--ui-brand-600)) !important;
    border: 2px solid #fff;
    box-shadow: 0 6px 13px rgba(var(--ui-brand-rgb), .18);
}

.table-modern .fw-semibold[b-jengydjii6] {
    font-weight: 750 !important;
}

.table-modern small[b-jengydjii6] {
    display: inline-block;
    margin-top: .22rem;
    font-size: .74rem;
}

/* Empty state and pagination */
.empty-state[b-jengydjii6] {
    padding: 1.75rem 1rem;
}

.empty-state-icon[b-jengydjii6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: .9rem;
    color: var(--as-orange);
    background: var(--as-orange-soft);
    border-radius: 18px;
    font-size: 1.7rem;
}

.empty-state h6[b-jengydjii6] {
    margin-bottom: .3rem;
    font-weight: 800;
}

.pagination-container[b-jengydjii6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--ui-surface-2);
    border-top: 1px solid var(--as-line);
}

    .pagination-container .btn[b-jengydjii6] {
        min-width: 35px;
    }

/* Bootstrap utility refinement inside this component */
.text-muted[b-jengydjii6] {
    color: var(--as-muted) !important;
}

/* Keyboard accessibility */
button:focus-visible[b-jengydjii6],
a:focus-visible[b-jengydjii6],
input:focus-visible[b-jengydjii6],
textarea:focus-visible[b-jengydjii6] {
    outline: 3px solid rgba(var(--ui-brand-rgb), .28);
    outline-offset: 2px;
}

/* Responsive layout */
@media (max-width: 991.98px) {
    .employee-header[b-jengydjii6] {
        padding: 1.6rem;
    }

    .table-modern thead th[b-jengydjii6],
    .table-modern tbody td[b-jengydjii6] {
        padding-inline: .9rem;
    }
}

@media (max-width: 767.98px) {
    .employee-header[b-jengydjii6] {
        align-items: flex-start;
        flex-direction: column;
        padding: 1.35rem;
    }

        .employee-header .btn[b-jengydjii6] {
            width: 100%;
        }

    .modern-card .card-body[b-jengydjii6] {
        padding: 1rem !important;
    }

    .pagination-container[b-jengydjii6] {
        align-items: flex-start;
        flex-direction: column;
    }

        .pagination-container > div:last-child[b-jengydjii6] {
            width: 100%;
            justify-content: flex-end;
        }

    .table-modern[b-jengydjii6] {
        min-width: 900px;
    }
}

@media (max-width: 479.98px) {
    .employee-header h3[b-jengydjii6] {
        font-size: 1.5rem;
    }

    .d-flex.gap-2.mt-4[b-jengydjii6] {
        flex-direction: column;
    }

        .d-flex.gap-2.mt-4 .btn[b-jengydjii6] {
            width: 100%;
        }
}

@media (prefers-reduced-motion: reduce) {
    *[b-jengydjii6],
    *[b-jengydjii6]::before,
    *[b-jengydjii6]::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}


/* =========================================================
   TASKS PAGE EXTENSIONS
   ========================================================= */

.tasks-page[b-jengydjii6] {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

    /* The Tasks markup uses btn-light for edit and pagination controls. */
    .tasks-page button.btn.btn-light[b-jengydjii6],
    .tasks-page a.btn.btn-light[b-jengydjii6] {
        color: var(--as-ink) !important;
        background: var(--ui-surface-3) !important;
        background-image: none !important;
        border: 1px solid var(--ui-line) !important;
    }


    .tasks-page .task-title-cell[b-jengydjii6] {
        max-width: 280px;
    }

        .tasks-page .task-title-cell .fw-semibold[b-jengydjii6] {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .tasks-page .task-description[b-jengydjii6] {
        display: -webkit-box;
        overflow: hidden;
        max-width: 280px;
        margin-top: .3rem;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

.employee-task-cards[b-jengydjii6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.employee-task-card[b-jengydjii6] {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--as-line);
    border-radius: var(--as-radius);
    box-shadow: var(--as-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .employee-task-card:hover[b-jengydjii6] {
        transform: translateY(-3px);
        box-shadow: var(--as-shadow-hover);
    }

.employee-task-card-header[b-jengydjii6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--ui-surface-2);
    border-bottom: 1px solid var(--ui-line);
}

.employee-task-main[b-jengydjii6] {
    min-width: 0;
}

.employee-task-label[b-jengydjii6] {
    margin-bottom: .4rem;
    color: var(--ui-brand);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .1em;
}

.employee-task-card h4[b-jengydjii6] {
    overflow: hidden;
    margin: 0;
    color: var(--ui-ink);
    font-size: 1.05rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-task-card-header p[b-jengydjii6] {
    display: -webkit-box;
    overflow: hidden;
    margin: .45rem 0 0;
    color: var(--ui-muted);
    font-size: .8rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.employee-task-details[b-jengydjii6] {
    display: grid;
    gap: .9rem;
    padding: 1.15rem 1.25rem;
}

.employee-task-detail[b-jengydjii6] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.employee-task-icon[b-jengydjii6] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--as-orange-dark);
    background: var(--as-orange-soft);
    border-radius: 10px;
}

.employee-task-detail span[b-jengydjii6],
.employee-task-detail strong[b-jengydjii6],
.employee-task-detail small[b-jengydjii6] {
    display: block;
}

.employee-task-detail span[b-jengydjii6] {
    color: var(--as-muted);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.employee-task-detail strong[b-jengydjii6] {
    margin-top: .18rem;
    color: var(--as-ink);
    font-size: .84rem;
}

.employee-task-detail small[b-jengydjii6] {
    margin-top: .12rem;
    color: var(--as-muted);
    font-size: .75rem;
}

.employee-task-footer[b-jengydjii6] {
    padding: 0 1.25rem 1.25rem;
}

.employee-task-pagination[b-jengydjii6] {
    display: flex;
    justify-content: center;
    grid-column: 1 / -1;
    gap: .35rem;
    padding-top: .25rem;
}

/* Status badges */
.status-badge[b-jengydjii6],
.badge-status[b-jengydjii6],
.task-status[b-jengydjii6],
.status-open[b-jengydjii6],
.status-in-progress[b-jengydjii6],
.status-completed[b-jengydjii6],
.status-cancelled[b-jengydjii6] {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: .3rem .6rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
}

.status-badge[b-jengydjii6],
.badge-status[b-jengydjii6],
.status-open[b-jengydjii6] {
    color: #9a4700;
    background: #fff0e5;
}

.status-in-progress[b-jengydjii6] {
    color: #785900;
    background: #fff6d6;
}

.status-completed[b-jengydjii6] {
    color: #17633c;
    background: #e8f7ee;
}

.status-cancelled[b-jengydjii6] {
    color: #8c2d36;
    background: #ffeaec;
}

.due-overdue[b-jengydjii6],
.due-danger[b-jengydjii6],
.overdue[b-jengydjii6] {
    color: #c52e35 !important;
    font-weight: 800;
}

.due-today[b-jengydjii6],
.due-warning[b-jengydjii6] {
    color: var(--as-orange-dark) !important;
    font-weight: 800;
}

/* Status modal */
.task-modal-backdrop[b-jengydjii6],
.task-modal-overlay[b-jengydjii6] {
    position: fixed;
    z-index: 1050;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(13, 18, 28, .4);
    backdrop-filter: blur(5px);
}

.task-modal[b-jengydjii6],
.task-modal-content[b-jengydjii6] {
    width: min(100%, 500px);
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--as-radius);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
}

.task-modal-header[b-jengydjii6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.25rem 1.35rem;
    color: var(--ui-ink);
    background: var(--ui-surface-2);
    border-bottom: 1px solid var(--ui-line);
}

    .task-modal-header h5[b-jengydjii6],
    .task-modal-header h4[b-jengydjii6] {
        margin: 0;
        font-weight: 800;
    }

.task-modal-body[b-jengydjii6] {
    padding: 1.35rem;
}

.task-modal-footer[b-jengydjii6] {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding: 1rem 1.35rem;
    background: var(--ui-surface-2);
    border-top: 1px solid var(--as-line);
}

.tasks-page .form-select[b-jengydjii6] {
    min-height: 46px;
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    box-shadow: none;
}

    .tasks-page .form-select:focus[b-jengydjii6] {
        border-color: var(--as-orange);
        box-shadow: 0 0 0 4px rgba(var(--ui-brand-rgb), .12);
    }

@media (max-width: 767.98px) {
    .tasks-page .tasks-desktop[b-jengydjii6] {
        overflow-x: auto;
    }

    .tasks-page .employee-task-card-header[b-jengydjii6] {
        flex-direction: column;
    }

    .employee-task-cards[b-jengydjii6] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Zeiterfassung.razor.rz.scp.css */
/*
   Zeiterfassung.razor.css
   Premium black / orange / white time tracking UI
*/

.time-page[b-6lko4pnezn] {
    --zt-ink: var(--ui-ink);
    --zt-muted: var(--ui-muted);
    --zt-line: var(--ui-line);
    --zt-orange: var(--ui-brand);
    --zt-orange-dark: var(--ui-brand-600);
    --zt-orange-soft: var(--ui-brand-50);
    --zt-dark: var(--ui-ink);
    max-width: 100%;
    margin: 0 auto;
    color: var(--zt-ink);
}

.time-page-header[b-6lko4pnezn] {
    position: relative;
    padding: 2rem 2.25rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
    color: var(--ui-ink);
    background: radial-gradient(120% 140% at 100% 0%, rgba(var(--ui-brand-rgb), .16) 0%, rgba(var(--ui-brand-rgb), .05) 32%, transparent 58%), radial-gradient(90% 120% at 0% 100%, rgba(99, 102, 241, .06), transparent 55%), var(--ui-surface);
    border-radius: 20px;
    box-shadow: var(--ui-shadow);
    border: 1px solid var(--ui-line);
}

    .time-page-header[b-6lko4pnezn]::after {
        position: absolute;
        right: -50px;
        bottom: -95px;
        width: 220px;
        height: 220px;
        content: "";
        border: 38px solid rgba(var(--ui-brand-rgb), .07);
        border-radius: 50%;
    }

    .time-page-header > *[b-6lko4pnezn] {
        position: relative;
        z-index: 1;
    }

    .time-page-header .eyebrow[b-6lko4pnezn] {
        display: inline-block;
        margin-bottom: .5rem;
        color: var(--ui-brand-600) !important;
        font-size: .68rem;
        font-weight: 850;
        letter-spacing: .12em;
    }

    .time-page-header h1[b-6lko4pnezn] {
        margin: 0 0 .4rem;
        color: var(--ui-ink);
        font-size: clamp(1.8rem, 3vw, 2.5rem);
        font-weight: 850;
        letter-spacing: -.045em;
    }

    .time-page-header p[b-6lko4pnezn] {
        color: var(--ui-muted) !important;
    }

.time-message[b-6lko4pnezn] {
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-left: 4px solid var(--zt-orange);
    border-radius: 10px;
}

    .time-message.alert-danger[b-6lko4pnezn] {
        color: var(--ui-danger-700);
        background: var(--ui-danger-50);
        border-left-color: var(--ui-danger);
    }

    .time-message.alert-warning[b-6lko4pnezn] {
        color: var(--ui-warning-700);
        background: var(--ui-warning-50);
    }

.time-loading-card[b-6lko4pnezn],
.time-empty-card[b-6lko4pnezn] {
    display: grid;
    justify-items: center;
    gap: .75rem;
    padding: 3rem 1rem;
    text-align: center;
}

.time-loading-card[b-6lko4pnezn] {
    color: var(--zt-muted);
}

.time-loading-spinner[b-6lko4pnezn] {
    width: 34px;
    height: 34px;
    border: 4px solid var(--ui-brand-200);
    border-top-color: var(--zt-orange);
    border-radius: 50%;
    animation: zt-spin-b-6lko4pnezn .8s linear infinite;
}

@keyframes zt-spin-b-6lko4pnezn {
    to {
        transform: rotate(360deg);
    }
}

.time-empty-icon[b-6lko4pnezn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    color: var(--zt-orange);
    background: var(--zt-orange-soft);
    border-radius: 20px;
    font-size: 1.6rem;
}

.time-empty-card h3[b-6lko4pnezn] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 850;
}

.time-empty-card p[b-6lko4pnezn] {
    margin: 0;
    color: var(--zt-muted);
    font-size: .86rem;
}

.time-card[b-6lko4pnezn] {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--zt-line);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(16, 24, 40, .08);
}

.time-card-top[b-6lko4pnezn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.45rem;
    color: var(--ui-ink);
    background: linear-gradient(180deg, var(--ui-brand-50), var(--ui-surface));
    border-bottom: 1px solid var(--ui-line);
}

.time-card-eyebrow[b-6lko4pnezn] {
    color: var(--ui-brand-600);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .12em;
}

.time-card-top h2[b-6lko4pnezn] {
    margin: .3rem 0 0;
    color: var(--ui-ink);
    font-size: 1.35rem;
    font-weight: 800;
}

.time-status[b-6lko4pnezn] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .7rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
}

    .time-status.active[b-6lko4pnezn] {
        color: #a9f0c8;
        background: rgba(44, 166, 106, .18);
        border: 1px solid rgba(104, 217, 148, .28);
    }

    .time-status.completed[b-6lko4pnezn] {
        color: #b9f3cf;
        background: rgba(44, 166, 106, .18);
    }

    .time-status.waiting[b-6lko4pnezn] {
        color: #ffd18f;
        background: rgba(255, 181, 74, .15);
    }

    .time-status .status-dot[b-6lko4pnezn] {
        width: 8px;
        height: 8px;
        background: #55d889;
        border-radius: 50%;
        box-shadow: 0 0 0 4px rgba(85, 216, 137, .14);
    }

    .time-status.waiting .status-dot[b-6lko4pnezn] {
        background: #ffb54a;
        box-shadow: 0 0 0 4px rgba(255, 181, 74, .14);
    }

.time-start-area[b-6lko4pnezn] {
    display: grid;
    justify-items: center;
    padding: 2.25rem 1.45rem;
    text-align: center;
}

.time-start-icon[b-6lko4pnezn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin-bottom: 1rem;
    color: var(--zt-orange);
    background: var(--zt-orange-soft);
    border-radius: 22px;
    font-size: 1.8rem;
}

.time-start-area h3[b-6lko4pnezn] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 850;
}

.time-start-area > p[b-6lko4pnezn] {
    max-width: 450px;
    margin: .45rem 0 1.25rem;
    color: var(--zt-muted);
    font-size: .85rem;
}

.time-site-select[b-6lko4pnezn] {
    width: min(100%, 460px);
    margin-bottom: 1rem;
    text-align: left;
}

    .time-site-select label[b-6lko4pnezn] {
        display: block;
        margin-bottom: .45rem;
        color: var(--zt-ink);
        font-size: .72rem;
        font-weight: 850;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .time-site-select .form-select[b-6lko4pnezn],
    .time-page .form-select[b-6lko4pnezn] {
        min-height: 46px;
        color: var(--zt-ink);
        border: 1px solid var(--ui-line);
        border-radius: 10px;
        box-shadow: none;
    }

        .time-site-select .form-select:focus[b-6lko4pnezn],
        .time-page .form-select:focus[b-6lko4pnezn] {
            border-color: var(--zt-orange);
            box-shadow: 0 0 0 4px rgba(var(--ui-brand-rgb), .12);
        }

.time-warning[b-6lko4pnezn] {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: min(100%, 460px);
    padding: .75rem .85rem;
    margin-bottom: 1rem;
    color: var(--ui-warning-700);
    text-align: left;
    background: var(--ui-warning-50);
    border: 1px solid #ffd692;
    border-left: 4px solid var(--zt-orange);
    border-radius: 9px;
    font-size: .78rem;
}

.time-main-button[b-6lko4pnezn],
.time-secondary-button[b-6lko4pnezn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    cursor: pointer;
    font-weight: 800;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.time-main-button[b-6lko4pnezn] {
    width: min(100%, 460px);
    min-height: 48px;
    padding: .75rem 1rem;
    color: #fff;
    background: var(--zt-orange);
    border: 1px solid var(--zt-orange);
    border-radius: 11px;
    box-shadow: 0 9px 20px rgba(var(--ui-brand-rgb), .22);
}

    .time-main-button:hover:not(:disabled)[b-6lko4pnezn] {
        background: var(--zt-orange-dark);
        border-color: var(--zt-orange-dark);
        transform: translateY(-2px);
    }

    .time-main-button.stop[b-6lko4pnezn] {
        margin: 0 1.45rem 1.4rem;
        width: calc(100% - 2.9rem);
        background: var(--ui-danger);
        border-color: var(--ui-danger);
        box-shadow: 0 9px 20px rgba(216, 58, 58, .18);
    }

        .time-main-button.stop:hover:not(:disabled)[b-6lko4pnezn] {
            background: var(--ui-danger-700);
            border-color: var(--ui-danger-700);
        }

    .time-main-button:disabled[b-6lko4pnezn],
    .time-secondary-button:disabled[b-6lko4pnezn] {
        cursor: not-allowed;
        opacity: .48;
        box-shadow: none;
    }

.current-time-area[b-6lko4pnezn] {
    padding: 1.7rem 1.45rem 1.35rem;
    text-align: center;
}

.current-time-label[b-6lko4pnezn] {
    display: block;
    color: var(--zt-muted);
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.current-time-value[b-6lko4pnezn] {
    margin-top: .25rem;
    color: var(--zt-orange-dark);
    font-size: clamp(2.4rem, 7vw, 4rem);
    font-weight: 850;
    letter-spacing: -.06em;
}

.current-site[b-6lko4pnezn] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: .55rem;
    padding: .4rem .7rem;
    color: var(--zt-orange-dark);
    background: var(--zt-orange-soft);
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 750;
}

.time-summary-box[b-6lko4pnezn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 1.45rem 1rem;
    padding: 1rem 1.1rem;
    background: var(--ui-brand-50);
    border: 1px solid #ffd7bd;
    border-left: 4px solid var(--zt-orange);
    border-radius: 11px;
}

.time-summary-label[b-6lko4pnezn] {
    display: block;
    color: var(--zt-muted);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.time-summary-value[b-6lko4pnezn] {
    display: block;
    margin-top: .25rem;
    color: var(--zt-orange-dark);
    font-size: 1.4rem;
}

.time-summary-description[b-6lko4pnezn] {
    color: var(--zt-muted);
    font-size: .75rem;
    text-align: right;
}

.time-info-grid[b-6lko4pnezn] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    padding: 0 1.45rem 1.2rem;
}

.time-info-box[b-6lko4pnezn] {
    padding: .85rem;
    background: var(--ui-surface-2);
    border: 1px solid var(--zt-line);
    border-radius: 10px;
}

    .time-info-box > span[b-6lko4pnezn] {
        display: block;
        color: var(--zt-muted);
        font-size: .68rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .time-info-box > strong[b-6lko4pnezn] {
        display: block;
        margin-top: .25rem;
        color: var(--zt-ink);
        font-size: 1rem;
    }

.pause-input-row[b-6lko4pnezn] {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .25rem;
}

.pause-input[b-6lko4pnezn] {
    min-height: 35px;
    padding: .4rem .55rem;
}

.pause-unit[b-6lko4pnezn] {
    color: var(--zt-muted);
    font-size: .73rem;
}

.pause-save-area[b-6lko4pnezn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.45rem 1.2rem;
}

.pause-help[b-6lko4pnezn] {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--zt-muted);
    font-size: .75rem;
}

    .pause-help i[b-6lko4pnezn] {
        color: var(--zt-orange);
    }

.time-secondary-button[b-6lko4pnezn] {
    min-height: 40px;
    padding: .6rem .85rem;
    color: var(--zt-orange-dark);
    background: #fff;
    border: 1px solid var(--ui-brand-200);
    border-radius: 9px;
}

    .time-secondary-button:hover:not(:disabled)[b-6lko4pnezn] {
        color: #fff;
        background: var(--zt-orange);
        border-color: var(--zt-orange);
        transform: translateY(-2px);
    }

.time-completed-box[b-6lko4pnezn] {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 0 1.45rem 1.4rem;
    padding: 1rem;
    color: #17633c;
    background: var(--ui-success-50);
    border: 1px solid #bde8cc;
    border-left: 4px solid var(--ui-success);
    border-radius: 11px;
}

.completed-icon[b-6lko4pnezn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    color: #fff;
    background: var(--ui-success);
    border-radius: 50%;
}

.time-completed-box strong[b-6lko4pnezn],
.time-completed-box span[b-6lko4pnezn] {
    display: block;
}

.time-completed-box strong[b-6lko4pnezn] {
    font-size: .86rem;
}

.time-completed-box span[b-6lko4pnezn] {
    margin-top: .2rem;
    color: #3b7f5c;
    font-size: .75rem;
}

.time-info-note[b-6lko4pnezn] {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: 1rem 1.45rem;
    background: var(--ui-surface-2);
    border-top: 1px solid var(--zt-line);
}

.time-note-icon[b-6lko4pnezn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    color: var(--zt-orange);
    background: var(--zt-orange-soft);
    border-radius: 9px;
}

.time-info-note strong[b-6lko4pnezn],
.time-info-note p[b-6lko4pnezn] {
    display: block;
}

.time-info-note strong[b-6lko4pnezn] {
    font-size: .78rem;
}

.time-info-note p[b-6lko4pnezn] {
    margin: .2rem 0 0;
    color: var(--zt-muted);
    font-size: .74rem;
}

@media (max-width: 650px) {
    .time-page-header[b-6lko4pnezn] {
        padding: 1.35rem;
    }

    .time-card-top[b-6lko4pnezn],
    .time-summary-box[b-6lko4pnezn],
    .pause-save-area[b-6lko4pnezn] {
        align-items: flex-start;
        flex-direction: column;
    }

    .time-summary-description[b-6lko4pnezn] {
        text-align: left;
    }

    .time-secondary-button[b-6lko4pnezn] {
        width: 100%;
    }

    .time-info-grid[b-6lko4pnezn] {
        grid-template-columns: 1fr;
    }

    .time-main-button.stop[b-6lko4pnezn] {
        margin-inline: 1rem;
        width: calc(100% - 2rem);
    }

    .time-summary-box[b-6lko4pnezn],
    .time-info-grid[b-6lko4pnezn],
    .pause-save-area[b-6lko4pnezn],
    .time-completed-box[b-6lko4pnezn] {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .time-info-grid[b-6lko4pnezn] {
        padding-inline: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-6lko4pnezn],
    *[b-6lko4pnezn]::before,
    *[b-6lko4pnezn]::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}