@import '_content/MultiworkUi/MultiworkUi.6rmj80bngt.bundle.scp.css';

/* /Components/Layout/GeneralElements/Scheduler.razor.rz.scp.css */
/* Wrapper */
.cal-wrapper[b-1x1vw56d7h] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: none;
}

/* Header */
.cal-header[b-1x1vw56d7h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: transparent;
    border-bottom: none;
    position: sticky;
    top: 0;
}

.cal-title[b-1x1vw56d7h] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    text-transform: capitalize;
}

.cal-header-right[b-1x1vw56d7h] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cal-btn[b-1x1vw56d7h] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px;
    font-size: 0.85rem;
    transition: background 0.15s, border-color 0.15s;
    border: none;
    border-radius: var(--corner-radius-xl, 16px);
    background: #FFFFFF;
}

.cal-btn:hover[b-1x1vw56d7h] {
    background: #f0f0f5;
    border-color: #b0b0c0;
}

.cal-btn.active[b-1x1vw56d7h] {
    background: #1a73e8;
    color: #FFFFFF;
    border-color: #1a73e8;
}

.cal-btn-today[b-1x1vw56d7h] {
    font-weight: 500;
}

.cal-view-toggle[b-1x1vw56d7h] {
    display: flex;
    gap: 4px;
    margin-left: 10px;
    border-left: 1px solid #e0e0e5;
    padding-left: 10px;
}

/* Grid Wrapper */
.cal-grid-wrapper[b-1x1vw56d7h] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    background-color: transparent;
}

/* Day headers */
.cal-day-headers[b-1x1vw56d7h] {
    display: flex;
    background: transparent;
    border-bottom: 1px solid #e0e0e5;
    flex-shrink: 0;
}

.cal-time-gutter[b-1x1vw56d7h] {
    width: 52px;
    flex-shrink: 0;
    border-right: none;
}

.cal-day-header[b-1x1vw56d7h] {
    flex: 1;
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    cursor: pointer;
    border-right: 1px solid #f0f0f5;
    transition: background 0.15s;
}

.cal-day-header:hover[b-1x1vw56d7h] {
    background: #f5f5fa;
}

.cal-day-header.today[b-1x1vw56d7h] {
    color: #0630FF;
}

.today-badge[b-1x1vw56d7h] {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--corner-radius-round, 256px);
    background: #0630FF;
    color: #FFFFFF;
}

/* Scroll Bereich */
.cal-scroll-area[b-1x1vw56d7h] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Time grid */
.cal-time-grid[b-1x1vw56d7h] {
    display: flex;
    position: relative;
    min-height: 100%;
}

.cal-time-grid-day .cal-day-col[b-1x1vw56d7h] {
    flex: 1;
}

/* Time labels */
.cal-time-labels[b-1x1vw56d7h] {
    width: 52px;
    flex-shrink: 0;
    border-right: none;
}

.cal-time-label[b-1x1vw56d7h] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-right: 8px;
    padding-top: 4px;
    box-sizing: border-box;
    border-bottom: 1px solid #f0f0f5;
}

.cal-time-label span[b-1x1vw56d7h] {
    font-size: 0.7rem;
    color: #999;
    font-weight: 500;
}

.cal-day-col[b-1x1vw56d7h] {
    flex: 1;
    position: relative;
    border-right: 1px solid #f0f0f5;
}

.cal-day-col.today-col[b-1x1vw56d7h] {
}

.cal-hour-slot[b-1x1vw56d7h] {
    box-sizing: border-box;
    border-bottom: 1px solid #ebebf0;
    width: 100%;
}

/* Events */
.cal-event[b-1x1vw56d7h] {
    position: absolute;
    left: 3px;
    right: 3px;
    border-radius: 6px;
    padding: 4px 7px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    transition: filter 0.15s, transform 0.1s;
    z-index: 1;
    box-sizing: border-box;
    border: solid 1px #ebebf0;
}

.cal-event:hover[b-1x1vw56d7h] {
    filter: brightness(0.95);
    transform: scale(1.01);
    z-index: 2;
}

.cal-event-title[b-1x1vw56d7h] {
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.cal-event-time[b-1x1vw56d7h] {
    font-size: 0.7rem;
    opacity: 0.8;
    margin-top: 1px;
    line-height: 1.2;
}

/* Farben */
.cal-event-green[b-1x1vw56d7h] {
    background-color: #4AD89680;
    color: #0a3d28;
    border-left: 3px solid #2ecc87;
}
.cal-event-beige[b-1x1vw56d7h] {
    background-color: #D88C4A80;
    color: #4a2e0a;
    border-left: 3px solid #c89050;
}
.cal-event-red[b-1x1vw56d7h] {
    background-color: #FF9999;
    color: #4a0a0a;
    border-left: 3px solid #e03030;
}

/* Now Linie */
.cal-now-line[b-1x1vw56d7h] {
    position: absolute;
    left: 0px;
    right: 0;
    height: 2px;
    width: 100vw;
    background: #0630FF;
    z-index: 3;
    pointer-events: none;
}

.cal-now-dot[b-1x1vw56d7h] {
    display: flex;
    align-items: center;
    position: absolute;
    left: -38px;
    top: -7px;
    width: fit-content;
    height: 16px;
    background: #0630FF;
    border-radius: 256px;
    padding: 4px;
}
.cal-now-dot span[b-1x1vw56d7h] {
    font-size: 0.7rem;
    color: white;
}

/* Scrollbar styling */
.cal-scroll-area[b-1x1vw56d7h]::-webkit-scrollbar {
    width: 6px;
}
.cal-scroll-area[b-1x1vw56d7h]::-webkit-scrollbar-track {
    background: #f5f5f7;
}
.cal-scroll-area[b-1x1vw56d7h]::-webkit-scrollbar-thumb {
    background: #d0d0d8;
    border-radius: 3px;
}



@media (max-width: 768px) {
    .dayName[b-1x1vw56d7h]{
        display: none;
    }

    .cal-time-gutter[b-1x1vw56d7h]{
        width: 40px;
    }

    .cal-time-labels[b-1x1vw56d7h]{
        width: 40px;
    }
}
/* /Components/Layout/LoginLayout.razor.rz.scp.css */

main[b-mkiuoh4dhx]{
    height: 100%;
}

#blazor-error-ui[b-mkiuoh4dhx] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);

    z-index: 99999;
}

#blazor-error-ui #blazor-error-ui-inner[b-mkiuoh4dhx] {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 250px;
    margin-left: -250px;
    margin-top: -125px;
    background-color: #FFFFFF;
    text-align: center;

    box-shadow: 0 0 4px #000000;
    -moz-box-shadow: 0 0 4px #000000;
    -webkit-box-shadow: 0 0 4px #000000;

    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;

    z-index: 99999;

    /*background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;*/
}

#blazor-error-ui #blazor-error-ui-inner #blazor-error-ui-inner-text[b-mkiuoh4dhx] {
    padding-top: 40px;
    font-size: 20px;
}
#blazor-error-ui #blazor-error-ui-inner #blazor-error-ui-inner-icon[b-mkiuoh4dhx] {
    padding-top: 20px;
    font-size: 30px;
    line-height: 30px;
}
#blazor-error-ui #blazor-error-ui-inner #blazor-error-ui-inner-btn[b-mkiuoh4dhx] {
    padding-top: 30px;
}
#blazor-error-ui #blazor-error-ui-inner #blazor-error-ui-inner-btn a[b-mkiuoh4dhx] {
    display: inline-block;
    background-color: #63C4FC;
    color: #000;
    text-decoration: none;
    padding: 6px 20px;

    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

#blazor-error-ui .dismiss[b-mkiuoh4dhx] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-8alwsafofm] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);

    z-index: 99999;
}

#blazor-error-ui #blazor-error-ui-inner[b-8alwsafofm] {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 250px;
    margin-left: -250px;
    margin-top: -125px;
    background-color: #FFFFFF;
    text-align: center;

    box-shadow: 0 0 4px #000000;
    -moz-box-shadow: 0 0 4px #000000;
    -webkit-box-shadow: 0 0 4px #000000;

    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;

    z-index: 99999;

    /*background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;*/
}

#blazor-error-ui #blazor-error-ui-inner #blazor-error-ui-inner-text[b-8alwsafofm] {
    padding-top: 40px;
    font-size: 20px;
}
#blazor-error-ui #blazor-error-ui-inner #blazor-error-ui-inner-icon[b-8alwsafofm] {
    padding-top: 20px;
    font-size: 30px;
    line-height: 30px;
}

#blazor-error-ui .dismiss[b-8alwsafofm] {     
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.app-layout[b-8alwsafofm]{
    height: 100%;
    width: 100vw;
}

.page-content[b-8alwsafofm]{
    display: grid;
    grid-template-columns: 240px auto 1fr;
    height: calc(100vh - 50px);
    /**height: 100%;*/
    transition: grid-template-columns 0.3s ease;
}
.page-content.expanded[b-8alwsafofm] {
    grid-template-columns: 240px 310px 1fr;
}
.page-content.expanded.expanded-mobile[b-8alwsafofm] {
    grid-template-columns: 80px 1fr;
}

.page-content.smallerMenu[b-8alwsafofm]{
    grid-template-columns: 0px auto 1fr;
}

.sysPixLeftMenuBar[b-8alwsafofm]{
    /**display: none;*/
    width: 0;
    overflow: hidden;
    transition: width 0.4s ease;
}

.page-content.expanded .sysPixLeftMenuBar[b-8alwsafofm]{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 310px;
}

.main-content[b-8alwsafofm]{
    display: grid;
    grid-auto-rows: 90px auto;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    box-sizing: border-box;
    margin: 0;
}


.mobile-overlay-backdrop[b-8alwsafofm] {
    position: fixed;
    inset: 0;
    top: 50px;
    height: calc(100vh - 50px);
    background: rgba(0, 0, 0, 0.45);
    z-index: 1190;
}

.mobile-overlay-nav[b-8alwsafofm] {
    position: fixed;
    top: 50px;
    left: 0;
    width: min(80vw, 300px);
    height: calc(100vh - 50px);
    color: black;
    z-index: 1200;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    overflow-y: auto;
}


@media (max-width: 768px) {
    .page-content[b-8alwsafofm]{
        overflow: hidden;
        grid-template-columns: 1fr;
    }
    
    .main-content[b-8alwsafofm]{
        min-width: 0;
        min-height: 0;
        overflow-y: auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .desktop-nav[b-8alwsafofm]{
        display: none;
    }
    .sysPixLeftMenuBar[b-8alwsafofm]{
        display: none;
    }

    .page-content.expanded .sysPixLeftMenuBar[b-8alwsafofm]{
        width: unset;
    }
    .page-content.expanded[b-8alwsafofm]{
        grid-template-columns: 120px 1fr;
    }
}

@media (min-width: 768px) {
    .menu-button[b-8alwsafofm] {
        display: none;
    }

    .mobile-overlay-backdrop[b-8alwsafofm],
    .mobile-overlay-nav[b-8alwsafofm] {
        display: none;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .main-content[b-8alwsafofm] {
        width: 100%;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.nav-wrapper[b-a5wwolkya7] {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    align-items: flex-start;
    align-self: stretch;
}

.sideNav-item[b-a5wwolkya7]{
    display: flex;
    padding: 0 12px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    border-radius: 18px;
}
/* /Components/Layout/PublicLayout/PublicTopBar.razor.rz.scp.css */
/* ===== Elements ===== */ 
.buttonBlack[b-m1wmrgzqt0]{
    display: flex;
    padding: 6px 12px;
    justify-content: center;
    gap: 4px;
    border: none;
    color: white;
    border-radius: var(--corner-radius-round, 256px);
    background: var(--surface-default-inverse-default, #1A1A1A);
}

.backAndCloseButtons[b-m1wmrgzqt0]{
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--spacing-jumper-padding-margin, 24px);
    width: 1024px;
    height: 60px;
}
.backButton[b-m1wmrgzqt0]{
    display: none;
}
.closeButton[b-m1wmrgzqt0]{
    display: flex;
    justify-content: flex-end;
    width: 100%;
    cursor: pointer;    
}



.publicTopbarOuter[b-m1wmrgzqt0]{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}
.publicTopbarOuter.greyBg[b-m1wmrgzqt0]{
    background: rgba(242, 242, 242);
}
.publicTopbarOuter.whiteBg[b-m1wmrgzqt0]{
    background: white;
}

.publicTopbar[b-m1wmrgzqt0]{
    height: 60px;
    padding: 0 var(--spacing-jumper-padding-margin, 48px);
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    align-content: space-between;
}




.extended-publicTopbar[b-m1wmrgzqt0]{
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.5s ease, opacity 0.5s ease;
    width: 100%;
}
.extended-publicTopbar > *[b-m1wmrgzqt0] 
{ 
    overflow: hidden; 
}
.extended-publicTopbar.open[b-m1wmrgzqt0]{
    grid-template-rows: 1fr;
    opacity: 1;
}


.nav-wrapper[b-m1wmrgzqt0]{
    display: flex;
    align-items: center;
    gap: 32px;
}

.cta-wrapper[b-m1wmrgzqt0]{
    display: flex;
    align-items: center;
    gap: 12px;
}

.navbar-item[b-m1wmrgzqt0]{
    display: flex;
    height: 60px;
    padding: 0 8px;
    justify-content: center;
    align-items: center;
}
.nav-item > a[b-m1wmrgzqt0]{
    text-decoration: none;
    cursor: pointer;
    color: black;
}



/* ===== Nav Menu ===== */

.nav-menu-wrapper[b-m1wmrgzqt0]{
    display: flex;
    width: 100%;
    height: max-content;
    padding: var(--spacing-jumper-padding-margin, 48px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: rgba(242, 242, 242);
    opacity: 0;
    transition: all 1s ease;
}

.nav-menu-wrapper.closed[b-m1wmrgzqt0]{
    display: none;
}
.nav-menu-wrapper.open[b-m1wmrgzqt0]{
    opacity: 1;
}

.nav-menu[b-m1wmrgzqt0]{
    display: grid;
    width: 1024px;
    row-gap: 64px;
    column-gap: 64px;
    grid-template-columns: repeat(2, 1fr);
}

.nav-menu-item[b-m1wmrgzqt0]{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    justify-self: stretch;
    cursor: pointer;
}

.nav-menu-item-text[b-m1wmrgzqt0]{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
}
.nav-menu-item-text > a[b-m1wmrgzqt0]{
    text-decoration: none;
    cursor: pointer;
}

.searchArea[b-m1wmrgzqt0]{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 32px;
}
.searchInputField[b-m1wmrgzqt0]{
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}
.searchInput[b-m1wmrgzqt0]{
    width: 100%;
    border: none;
    background: transparent;
}
.searchInput:focus[b-m1wmrgzqt0]{
    border: none;
    outline: none;
    box-shadow: none;
}
.search-results[b-m1wmrgzqt0]{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.search-results-item[b-m1wmrgzqt0]{
    display: flex;
    align-items: center;
    gap: 8px;
}
.search-results-item > a[b-m1wmrgzqt0]{
    text-decoration: none;
    color: var(--text-default-secondary, #4D4D4D);
}



/* ******* Responsive ******* */
.hamburger[b-m1wmrgzqt0]{
    display: none;
}
.mobileOpen[b-m1wmrgzqt0]{
    display: flex;
    height: max-content;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    background: rgba(242, 242, 242);
    transition: all 1s ease;
    align-self: stretch;
}
.mobileClosed[b-m1wmrgzqt0]{
    display: none;
}
.nav-items-mobile[b-m1wmrgzqt0]{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    padding: 0 var(--spacing-jumper-padding-margin, 24px)
}

.not-active[b-m1wmrgzqt0], .not-active > *[b-m1wmrgzqt0] {
    color: gray !important;
    cursor: auto !important;
    pointer-events: none;
}

@media (max-width: 1250px) {
    .nav-menu[b-m1wmrgzqt0]{
        width: 100%;
    }
}

/** Tablet **/
@media (max-width: 840px) {
    .backAndCloseButtons[b-m1wmrgzqt0]{
        display: flex;
        width: 100%;
    }
    .backButton[b-m1wmrgzqt0]{
        display: flex;
        justify-content: flex-start;
        width: 100%;
        cursor: pointer;
    }
    .hide-tablet[b-m1wmrgzqt0]{
        display: none;
    }
       
    .hamburger[b-m1wmrgzqt0]{
        display: block;
        background: transparent;
        border: none;
    }
    

    .extended-publicTopbar[b-m1wmrgzqt0] {
        position: fixed;
        inset: 0;
        display: block;
        transform: translateX(100%);
        opacity: 1;
        transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .extended-publicTopbar.open[b-m1wmrgzqt0] {
        transform: translateX(0);
    }
    .mobileOpen[b-m1wmrgzqt0]{
        height: 100%;
    }
    .nav-menu-wrapper[b-m1wmrgzqt0]{
        height: 100%;
        justify-content: flex-start;
    }
    .nav-menu-wrapper.open[b-m1wmrgzqt0] {
        padding: 0;
    }
    .nav-menu[b-m1wmrgzqt0]{
        grid-template-columns: repeat(1,1fr);
        padding: var(--spacing-jumper-padding-margin, 24px);
        width: 100%;
        gap: 32px;
    }
}

/** Mobile **/
@media (max-width: 480px) {
    .hide-mobile[b-m1wmrgzqt0]{
        display: none;
    }
    .nav-menu[b-m1wmrgzqt0]{ 
        gap: 14px;
    }
}
/* /Components/Layout/TopBar.razor.rz.scp.css */
.top-bar[b-t1fhbt0cd0]{
    width: 100vw;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
} 
.topbar-left[b-t1fhbt0cd0]{
    display: flex;
    align-items: center;
    gap: 20px;
}

.topbar-right[b-t1fhbt0cd0]{
    display: flex;
    gap: 12px;
}

.sysPixHeader > .top-bar .dropdown[b-t1fhbt0cd0]{
    display: flex;
    align-items: center;
    font-size: 24px;
    cursor: pointer;
}
.sysPixHeader > .top-bar .dropdown > span.dropdown-toggle[b-t1fhbt0cd0]::after {
    content: none !important;
}

.systemSelfHeadCompanyInfo[b-t1fhbt0cd0] {
    display: flex;
    padding: 2px;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    background-color: var(--mwFarbeHintergrundWeiss);
    border-radius: 256px;
    -moz-border-radius: 256px;
    -webkit-border-radius: 256px;
}
.systemSelfHeadCompanyInfoName[b-t1fhbt0cd0] {
    padding: 4px 10px;
}
.systemSelfHeadCompanyInfoShortName[b-t1fhbt0cd0] {
    background-color: var(--mwFarbeBlau);
    color: var(--mwFarbeTextAllways);
    display: flex;
    width: 32px;
    height: 32px;
    padding: 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    aspect-ratio: 1/1;

    border-radius: 256px;
    -moz-border-radius: 256px;
    -webkit-border-radius: 256px;
}

.menu-button[b-t1fhbt0cd0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 8px;
    background: rgba(255,255,255,0.12);
    color: white;
    font-size: 1.3rem;
    cursor: pointer;
}

@media (min-width: 769px) {
    .menu-button[b-t1fhbt0cd0] {
        display: none;
    }
}

@media (max-width: 768px) {
    .top-bar[b-t1fhbt0cd0]{
        justify-content: space-between;
    }
    .multiworkCloudLogoNew[b-t1fhbt0cd0] { display: none; }
    .hideMobile[b-t1fhbt0cd0]{ display: none; }
}

@media (max-width: 426px) {
    .systemSelfHeadCompanyInfoName[b-t1fhbt0cd0]{display: none}
} 
/* /Components/Pages/PublicPages/Home.razor.rz.scp.css */
/* ========== Start / Video Section ========== */
.startInfoBannerElementVideo[b-gyzohkorrp] {
    display: flex;
    height: 720px;
    margin: 20px 40px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    position: relative;
    overflow: hidden; /* fallback */
    background: linear-gradient(180deg, rgba(72, 72, 72, 0) 10%, rgba(72, 72, 72, 0.75) 82.21%);
    background-blend-mode: darken;
    border-radius: 40px;
    overflow: clip; /* if supported */
}
.startInfoBannerElementVideo .visual-container[b-gyzohkorrp] {
    position: absolute;
    inset: 0;
    z-index: -1; /* Video hinter den Text */
    border-radius: 40px;
}
#videoMultiworkCloud[b-gyzohkorrp] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 40px;
}
.MultiworkCloudStart[b-gyzohkorrp] {
    display: flex;
    width: 795px;
    padding: 0 48px 48px 48px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.MultiworkCloudLogoStart[b-gyzohkorrp] {
    fill: #fff;
    width: 245px;
    height: 85px;
    aspect-ratio: 49 / 17;
}
.MultiworkCloudDescriptionStart[b-gyzohkorrp] {
    align-self: stretch;
    color: #fff;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.videoBtnVolumeOff[b-gyzohkorrp], .videoBtnVolumeOn[b-gyzohkorrp],
.videoBtnStopNow[b-gyzohkorrp], .videoBtnPlayNow[b-gyzohkorrp],
.videoBtnFullscreen[b-gyzohkorrp] {
    position: absolute;
    top: 20px;
    right: 20px;
    line-height: 36px;
    text-align: center;
    background-color: #FFFFFF99;
    font-size: 18px;
    cursor: pointer;

    width: 40px;
    height: 40px;

    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.videoBtnStopNow[b-gyzohkorrp], .videoBtnPlayNow[b-gyzohkorrp] {
    right: 70px;
}

.videoBtnFullscreen[b-gyzohkorrp] {
    right: 120px;
}


/* ========== Projektmanagement ========== */
.projectManagement[b-gyzohkorrp] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

.projectManagement_first[b-gyzohkorrp] {
    display: flex;
    height: 720px;
    padding: 80px 0 0 0;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 52px;
    align-self: stretch;
    background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
    overflow: hidden; /* fallback */
    overflow: clip;  /* if supported */
}
.projectManagement_first_heading[b-gyzohkorrp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 144px;
}

.projectManagement_first_image[b-gyzohkorrp] {
    display: flex;
    height: 924px; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    aspect-ratio: 452 / 924.31;
}
.projectManagement_first_image img[b-gyzohkorrp] {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.projectManagement_second[b-gyzohkorrp] {
    padding-block: 64px 58px;
    background: #fff;
    width: 100vw;
}
.projectManagement_second__title[b-gyzohkorrp] {
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 600;
    margin-bottom: 24px;
}

/* --- Carousel --- */
.carousel[b-gyzohkorrp] {
    position: relative;
    display: flex;
    padding: 0 128px;
    align-items: flex-start;
    gap: 128px;
    overflow: hidden;
}

.task-steps[b-gyzohkorrp] {
    overscroll-behavior-x: contain; /* blockt Scrollweitergabe */
    user-select: none;              /* verhindert Textauswahl beim Swipen */
    display: flex;
    gap: 128px;
    margin: 0;
    padding: 0;
    list-style: none;
    transform: translateX(0);
    transition: transform 0.4s ease;
    touch-action: none;
    pointer-events: none;
    justify-content: flex-start;
}

/* Einzelnes Slide */
.task-step[b-gyzohkorrp] {
    flex: 0 0 auto;
    width: clamp(240px, 25vw, 280px);
    display: flex;
    flex-direction: column;
    align-items: center;
    scroll-snap-align: start;
}

.task-step__figure[b-gyzohkorrp] {
    margin: 0;
}
.task-step__figure img[b-gyzohkorrp] {
    width: 100%;
    height: auto;
    display: block;
}

.task-step__caption[b-gyzohkorrp] {
    margin-top: 12px;
    display: grid;
    gap: 8px;
    align-items: flex-start;
    font-size: 15px;
    line-height: 1.4;
    text-align: left;
}

/* Carousel Buttons */
.carousel-controls[b-gyzohkorrp] {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 12px;
    width: 100vw;
}
.carousel-btn[b-gyzohkorrp] {
    background: transparent;
    border: none;
    padding: 16px;
    cursor: pointer;
    opacity: .8;
}
.carousel-btn[disabled][b-gyzohkorrp] {
    opacity: .3;
    cursor: default;
}

/* Nummerierung */
.numbering[b-gyzohkorrp] {
    display: flex;
    width: 24px;
    height: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    background: #1A1A1A;
    color: #fff;
}

/* ========== Scan Tag ========== */
.scanTag[b-gyzohkorrp] {
    display: flex;
    padding: 112px 158px;
    align-items: center;
    gap: 148px;
}
.scanTagText[b-gyzohkorrp] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    flex: 1 0 0;
}
.scanTagRectangle[b-gyzohkorrp] {
    width: 230px;
    height: 230px;
    flex-shrink: 0;
    border-radius: var(--radius);
    background: #d9d9d9;
    display: flex;
    justify-content: center;
    align-items: center;
}
.scanTagRectangle object[b-gyzohkorrp]{
    width: 70%;
    height: 70%;
}
.benefits[b-gyzohkorrp]{
    text-align: left;
}

/* ========== Alleinarbeit / InfoBox ========== */
.infoBox[b-gyzohkorrp] {
    display: flex;
    height: 720px;
    padding: 0 146px;
    align-items: center;
    gap: 144px;
    background: #f2f2f2;
}
.aloneWorkplace[b-gyzohkorrp]{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}
.infoBoxPhone[b-gyzohkorrp] {
    display: flex;
    width: 227px;
    height: 465px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    aspect-ratio: 227 / 465;
}
.infoBoxPhone img[b-gyzohkorrp] {
    width: 100%;
    height: 100%;
}
.infoBoxText[b-gyzohkorrp] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    flex: 1 0 0;
}
#winterService[b-gyzohkorrp] {
    background: #fff;
}

/* ========== Fahrtenbuch ========== */
.logbook[b-gyzohkorrp] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    /* background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%); */
}

.logbook_first[b-gyzohkorrp] {
    display: flex;
    height: 720px;
    padding: 80px 0 0 0;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 52px;
    align-self: stretch;
    background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
    overflow: hidden; /* fallback */
    overflow: clip;  /* if supported */
}
.logbook_first_heading[b-gyzohkorrp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 144px;
}

.logbook_first_image[b-gyzohkorrp] {
    display: flex;
    height: 924.31px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    aspect-ratio: 452 / 924.31;
}
.logbook_first_image img[b-gyzohkorrp] {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.logbook_slide[b-gyzohkorrp] {
    padding-block: 64px 58px;
    background: #fff;
    width: 100vw;
}
.logbook_slide__title[b-gyzohkorrp] {
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 600;
    margin-bottom: 24px;
}


/* ========== Media Queries ========== */
/* ========= Tablet bis kleine Laptops ========= */
@media (min-width: 768px) and (max-width: 1200px) {
    /* Headings etwas kompakter */
    .headingH1[b-gyzohkorrp] {
        font-size: 44px;
        line-height: 56px;
    }
    .headingH2[b-gyzohkorrp] {
        font-size: 32px;
        line-height: 40px;
    }
    .headingH5[b-gyzohkorrp] {
        font-size: 20px;
        line-height: 26px;
    }
    
    /* Start / Video */
    .startInfoBannerElementVideo[b-gyzohkorrp] {
        height: 600px;
        border-radius: 32px;
    }
    .startInfoBannerElementVideo .visual-container[b-gyzohkorrp],
    #videoMultiworkCloud[b-gyzohkorrp] {
        border-radius: 32px;
    }
    .MultiworkCloudStart[b-gyzohkorrp] {
        width: 680px;
        padding: 0 32px 36px 36px;
        gap: 8px;
    }
    .MultiworkCloudLogoStart[b-gyzohkorrp] {
        width: 200px;
        height: auto;
    }
    .MultiworkCloudDescriptionStart[b-gyzohkorrp] {
        font-size: 24px;
    }

    /* Projektmanagement */
    .projectManagement_first[b-gyzohkorrp] {
        height: 560px;
        gap: 32px;
    }
    .projectManagement_first_heading[b-gyzohkorrp] {
        width: auto;
    }
    .projectManagement_first_heading p[b-gyzohkorrp] {
        font-size: 44px;
        line-height: 56px;
    }
    .projectManagement_first_image[b-gyzohkorrp] {
        height: 700px;
        aspect-ratio: 452 / 700;
    }

    /* Projektmanagement */
    .projectManagement_second[b-gyzohkorrp] {
        padding-block: 48px 44px;
    }
    .projectManagement_second__title[b-gyzohkorrp] {
        font-size: clamp(18px, 2vw, 24px);
        margin-bottom: 18px;
    }
    .carousel[b-gyzohkorrp] {
        padding: 0 48px;
        gap: 32px;
    }
    .task-steps[b-gyzohkorrp] {
        gap: 32px;
    }
    .task-step[b-gyzohkorrp] {
        width: clamp(220px, 28vw, 260px);
    }
    .task-step__caption[b-gyzohkorrp] {
        font-size: 14px;
    }

    /* Scan Tag kompakter */
    .scanTag[b-gyzohkorrp] {
        padding: 64px 96px;
        gap: 72px;
    }
    .scanTagRectangle[b-gyzohkorrp] {
        width: 180px;
        height: 180px;
    }

    /* InfoBox kompakter */
    .infoBox[b-gyzohkorrp] {
        height: 620px;
        padding: 0 64px;
        gap: 64px;
    }
    .infoBoxPhone[b-gyzohkorrp] {
        width: 200px;
        height: 410px;
    }

    /* Fahrtenbuch */
    .logbook_first[b-gyzohkorrp] {
        height: 560px;
        gap: 32px;
    }
    .logbook_first_heading p[b-gyzohkorrp] {
        font-size: 44px;
        line-height: 56px;
    }
    .logbook_first_image[b-gyzohkorrp] {
        height: 700px;
        aspect-ratio: 452 / 700;
    }
    .logbook_slide[b-gyzohkorrp] {
        padding-block: 48px 44px;
    }
    .logbook_slide__title[b-gyzohkorrp] {
        font-size: clamp(18px, 2vw, 24px);
        margin-bottom: 18px;
    }

    /* Buttons im Carousel minimal kleiner Padding */
    .carousel-btn[b-gyzohkorrp] {
        padding: 12px;
    }

    .container[b-gyzohkorrp]{
        max-width: 1000px;
    }
}


/* ========= Tablet ========= */
@media (max-width: 768px) {
    /* Start / Video */
    .startInfoBannerElementVideo[b-gyzohkorrp] {
        height: 600px;
        border-radius: 32px;
    }
    .startInfoBannerElementVideo .visual-container[b-gyzohkorrp],
    #videoMultiworkCloud[b-gyzohkorrp] {
        border-radius: 32px;
    }
    .MultiworkCloudStart[b-gyzohkorrp] {
        width: 680px;
        padding: 0 32px 36px 36px;
        gap: 8px;
    }
    .MultiworkCloudLogoStart[b-gyzohkorrp] {
        width: 200px;
        height: auto;
    }
    .MultiworkCloudDescriptionStart[b-gyzohkorrp] {
        font-size: 24px;
    }
    
    .txt-center[b-gyzohkorrp]{text-align: center}

    /* Video */
    .MultiworkCloudStart[b-gyzohkorrp] { padding: 0 0 20px 20px; gap: 0; }
    .MultiworkCloudLogoStart[b-gyzohkorrp] { width: 140px; height: auto; }
    .MultiworkCloudLogoStart object[b-gyzohkorrp] { width: 100%; }
    .MultiworkCloudDescriptionStart[b-gyzohkorrp] { font-size: 16px; }

    /* Projektmanagement */
    .projectManagement_first[b-gyzohkorrp] {
        height: 200px;
        padding: 0 10px;
        justify-content: center;
    }
    
    .projectManagement_first_image[b-gyzohkorrp] { display: none; }

    .projectManagement_second[b-gyzohkorrp] { padding: 10px; }
    .task-steps[b-gyzohkorrp] { gap: 30px; }
    .task-step[b-gyzohkorrp] { width: clamp(180px, 40vw, 240px); gap: 0; }
    .task-step__caption[b-gyzohkorrp] { font-size: 14px; }
    .carousel[b-gyzohkorrp] { padding: 0 clamp(16px, 5vw, 24px); }
    .carousel-controls[b-gyzohkorrp] { justify-content: unset; }

    /* Scan Tag */
    .scanTag[b-gyzohkorrp] {
        padding: 30px;
        gap: 20px;
        flex-direction: column;
        text-align: center;
    }
    .scanTagText[b-gyzohkorrp] { align-items: center; }
    .scanTagRectangle[b-gyzohkorrp] { width: 50px; height: 50px; }

    /* InfoBox */
    .infoBox[b-gyzohkorrp] {
        flex-direction: column;
        text-align: center;
        padding: 30px;
        gap: 20px;
        height: auto;
    }
    .infoBoxText[b-gyzohkorrp] { align-items: center; order: 1; }
    .infoBoxPhone[b-gyzohkorrp] { order: 2; }

    /* Fahrtenbuch */
    .logbook[b-gyzohkorrp] {padding: 30px 0 0 0; gap: 0; }
    .logbook_first[b-gyzohkorrp] {
        height: fit-content;
        padding: 0 10px;
        justify-content: center;
    }
    .logbook_first_heading p[b-gyzohkorrp] {
        display: none;
    }
    .logbook_first_image[b-gyzohkorrp] { display: none; }
    .logbook_slide[b-gyzohkorrp] { padding: 10px; }

    .container[b-gyzohkorrp]{
        max-width: 1000px;
    }
}



/* Mobile */
@media (max-width: 440px) {

    /* Video */
    .startInfoBannerElementVideo[b-gyzohkorrp] { 
        height: 500px; 
        padding: 0px;
        margin: 20px 20px 0 20px;
        gap: 0; 
    }
    
}

/* /Components/Pages/PublicPages/Zeiterfassung.razor.rz.scp.css */
/* ========== Elements ========== */
.timeTrackingButton[b-fb77rkuj40]{
    display: flex;
    padding: 12px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    background: var(--surface-default-secondary);
    border: none;
    border-radius: 24px;
}
.timeTrackingButton > img[b-fb77rkuj40]{
    animation: flarePulse-b-fb77rkuj40 3s infinite ease-in-out;
}
@keyframes flarePulse-b-fb77rkuj40 {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    80% {
        transform: scale(1);
        opacity: 1;
    }
    90% {
        transform: scale(1.15);
        opacity: 0.6;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.round[b-fb77rkuj40]{
    border-radius: 24px;
}
.round > img[b-fb77rkuj40]{
    transition: transform 0.5s ease;
    transform: rotate(-90deg);
}
.square[b-fb77rkuj40]{
    border-radius: 12px;
}
.square > img[b-fb77rkuj40]{
    transition: transform 0.5s ease;
    transform: rotate(0deg);
}

/** Website Buttons*/
.blackButtonWeb[b-fb77rkuj40]{
    display: flex;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    background-color: black;
    color: white;
    border-radius: var(--corner-radius-round);
    border: var(--stroke-weight-m) solid var(--border-default-default);
}
.outlinedButtonWeb[b-fb77rkuj40]{
    display: flex;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border-radius: var(--corner-radius-round);
    border: var(--stroke-weight-m) solid var(--border-default-default);
    color: var(--text-default-default);
}
.outlinedButtonWeb:hover[b-fb77rkuj40]{
    background-color: black;
    color: white;
}

/** Multiwork Cloud Buttons*/
.blackButton[b-fb77rkuj40]{
    height: 34px;
    width: auto;
    padding: 0 20px;
    border-radius: var(--corner-radius-round);
    -moz-border-radius: var(--corner-radius-round);
    -webkit-border-radius: var(--corner-radius-round);
    border: none;
    background-color: black;
    color: white;
    cursor: pointer;
}
.redButton[b-fb77rkuj40]{
    height: 34px;
    width: auto;
    padding: 0 20px;
    border-radius: var(--corner-radius-round);
    -moz-border-radius: var(--corner-radius-round);
    -webkit-border-radius: var(--corner-radius-round);
    border: none;
    background-color: #FF0000;
    color: white;
    cursor: pointer;
}

.hover[b-fb77rkuj40]{
    transition: transform 0.2s ease;
}
.hover:hover[b-fb77rkuj40]{
    transform: scale(1.02);
}

/* *** Iphone 17 Gerüst *** */
.iphone17Mockup[b-fb77rkuj40]{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.iphone17Frame[b-fb77rkuj40]{
    width: 450px;
    height: 920px;
    flex-shrink: 0;
    aspect-ratio: 45/92;
    background: url('img/publicPages/Zeiterfassung/Iphone17Frame.png') transparent 100% / cover no-repeat;
}
.screen[b-fb77rkuj40]{
    display: flex;
    height: 95%;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 62px;
    background: var(--page-default);
    margin: 24px 24px 0 24px;
}
#blur-section[b-fb77rkuj40]{
    width: 100%;
    height: 100%;
}
.blur[b-fb77rkuj40] {
    filter: blur(5px);
    width: 100%;
    height: 100%;
}
.show[b-fb77rkuj40] {
    filter: none !important;
}

.mobile-header[b-fb77rkuj40]{
    display: flex;
    width: 402px;
    height: 60px;
    padding: 0 24px;
    align-items: center;
}
.mobile-statusBar[b-fb77rkuj40]{
    display: flex;
    width: 402px;
    padding: 21px 16px 19px 16px;
    justify-content: center;
    align-items: center;
    align-self: center;
    gap: 154px;
}
.time[b-fb77rkuj40]{
    display: flex;
    height: 22px;
    padding-top: 2px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    color: var(--Labels-Primary);
    text-align: center;
    font-size: 17px;
    font-style: normal;
    font-weight: 590;
    line-height: 22px; /* 129.412% */
}
.levels[b-fb77rkuj40]{
    display: flex;
    height: 22px;
    padding-top: 1px;
    justify-content: center;
    align-items: center;
    gap: 7px;
    flex: 1 0 0;
}

/* ========== Animations ========== */
.slideUp[b-fb77rkuj40]{
    overflow: hidden;
    animation: slideUp-b-fb77rkuj40 2s ease;
}
@keyframes slideUp-b-fb77rkuj40 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slideDown[b-fb77rkuj40]{
    overflow: hidden;
    animation: slideUp-b-fb77rkuj40 2s ease;
}
@keyframes slideUp-b-fb77rkuj40 {
    from {
        opacity: 0;
        transform: translateY(0);
    }
    to {
        opacity: 1;
        transform: translateY(2px);
    }
}




/* ========== Section 1 ========== */
/* ==== Entry ==== */
.section-one[b-fb77rkuj40]{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}
.container-se1[b-fb77rkuj40]{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 100px;
    align-self: stretch;
}

/* Heading */
.textarea-se1[b-fb77rkuj40]{
    display: flex;
    padding: 24px var(--spacing-jumper-padding-margin) 0 var(--spacing-jumper-padding-margin);
    justify-content: center;
    align-items: center;
    gap: 36px;
    align-self: stretch;
}

/* Macbook */
.container-se1-con1[b-fb77rkuj40]{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.container-se1-con1 img[b-fb77rkuj40]{
    width: 80%;
}

/* Bunter Container */
.container-se1-con2[b-fb77rkuj40]{
    display: flex;
    height: 683px;
    padding: 96px var(--spacing-jumper-padding-margin, 48px);
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    background: lightgray url('img/publicPages/Zeiterfassung/container.png') center / cover no-repeat;
} 
.textarea-se1-con2[b-fb77rkuj40]{
    display: flex;
    width: 885px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
}
.textarea-se1-con2-text[b-fb77rkuj40]{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
}
.textarea-se1-con2-buttons[b-fb77rkuj40]{
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* ========== Section 2 ========== */
/* ======== Infotext ======== */
.section-two[b-fb77rkuj40]{
    display: flex;
    height: 683px;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
}
.container-se2[b-fb77rkuj40]{
    display: flex;
    height: 683px;
    padding: 64px var(--spacing-jumper-padding-margin, 48px);
    justify-content: center;
    align-items: center;
    gap: 64px;
    flex: 1 0 0;
}
.textarea-se2[b-fb77rkuj40]{
    display: flex;
    padding: 0 320px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1 0 0;
}


/* ========== Section 3 ========== */
/* == Kommen und Gehen == */
.section-three[b-fb77rkuj40]{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}
.container-se3[b-fb77rkuj40]{
    display: flex;
    padding: 0 var(--spacing-jumper-padding-margin, 48px);
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    align-self: stretch;
}
.textarea-se3[b-fb77rkuj40]{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
/* Container für App und Desktop*/
.booking-se3[b-fb77rkuj40]{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 64px;
    align-self: stretch;
}

/* App Bereich*/
.bookingApp-se3[b-fb77rkuj40]{
    display: flex;
    padding-top: 96px;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    align-self: stretch;
    border-radius: var(--corner-radius-xxl);
    background: var(--background-default);
    overflow-y: hidden;
}
.phoneView-se3[b-fb77rkuj40]{
    display: flex;
    height: 320px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: var(--corner-radius-xxl);
}
.mobile-booking[b-fb77rkuj40]{
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: var(--corner-radius-xl, 16px);
    background: var(--background-default);
    margin: 0 16px;
}
.lastBooking[b-fb77rkuj40]{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}


/* Desktop Bereich */
.bookingDesktop-se3[b-fb77rkuj40]{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 64px;
    align-self: stretch;
}

/* Tabelle (wird wiederverwendet) */
.timesheet-wrapper[b-fb77rkuj40] {
    border-radius: var(--corner-radius-xxl);
    background: rgba(224, 224, 224, 0.50);
    box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.05);
    padding: 32px;
    width: 100%;
    box-sizing: border-box;
}
.timesheet-card[b-fb77rkuj40] {
    padding: var(--spacing-jumper-padding-margin, 48px);
    border-radius: var(--corner-radius-xl, 16px);
    border: 1px solid var(--border-default-quaternary);
    background: var(--surface-default-default);
    box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.05);
}
.timesheet-table[b-fb77rkuj40] {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
}
.timesheet-table thead th[b-fb77rkuj40] {
    text-align: left;
    font-weight: 600;
}
.timesheet-table tbody td[b-fb77rkuj40] {
    padding: 16px 0;
    vertical-align: middle;
}
.timesheet-table tbody tr.sub td[b-fb77rkuj40] {
    padding-top: 0;
}
.col-day[b-fb77rkuj40], .col-from[b-fb77rkuj40], .col-to[b-fb77rkuj40], .col-singles[b-fb77rkuj40], .col-is[b-fb77rkuj40], .col-should[b-fb77rkuj40], .col-difference[b-fb77rkuj40]{
    width:8.33333333%
}
.col-date[b-fb77rkuj40]{
    width:16.66666667%
}
.col-project[b-fb77rkuj40]{
    width:25%
}


/* ========== Section 4 ========== */
/* Zeiten manuell nachtragen */
.section-four[b-fb77rkuj40]{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
}
.container-se4[b-fb77rkuj40]{
    display: flex;
    padding: 64px var(--spacing-jumper-padding-margin);
    flex-direction: column;
    align-items: center;
    gap: 64px;
    flex: 1 0 0;
}
.textarea-se4[b-fb77rkuj40]{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: center;
    text-align: center;
    gap: 24px;
    width: 70%;
}


/* ========== Section 5 ========== */
/* ======== Zeitmodelle ======== */
.section-five[b-fb77rkuj40]{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
}
.container-se5[b-fb77rkuj40]{
    display: flex;
    padding: 64px var(--spacing-jumper-padding-margin, 48px);
    justify-content: flex-end;
    align-items: center;
    gap: 64px;
    flex: 1 0 0;
}
.textarea-se5[b-fb77rkuj40]{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 40%;
    gap: 24px;
}
.timeModels-se5[b-fb77rkuj40]{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1 0 0;
}

.timeModel-wrapper[b-fb77rkuj40] {
    display: flex;
    padding: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    border-radius: var(--corner-radius-xxl);
    background: rgba(224, 224, 224, 0.50);
    box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.05);
}

.timeModel-card[b-fb77rkuj40] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 8px;
    padding: var(--spacing-jumper-padding-margin, 48px);
    border-radius: var(--corner-radius-xl, 16px);
    border: 1px solid var(--border-default-quaternary);
    background: var(--surface-default-default);
    box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.05);
}
.timeModel-content[b-fb77rkuj40]{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
}

.timeModel-date[b-fb77rkuj40] {
    display: flex;
    padding: 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: var(--corner-radius-xl, 16px);
    border: 1px solid var(--border-default-quaternary);
}

.timeModel-week[b-fb77rkuj40] {
    padding: 12px;
    align-self: stretch;
    border-radius: var(--corner-radius-xl, 16px);
    border: 1px solid var(--border-default-quaternary);
}
.week-grid[b-fb77rkuj40] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    text-align: center;
    row-gap: 26px;
    color: #222;
}

.timeModel-summary[b-fb77rkuj40] {
    display: flex;
    padding: 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: var(--corner-radius-xl, 16px);
    border: 1px solid var(--border-default-quaternary);
}


/* ========== Section 6 ========== */
/* ======== Anträge ======== */
.section-six[b-fb77rkuj40]{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}
.container-se6[b-fb77rkuj40]{
    display: flex;
    padding: 0 var(--spacing-jumper-padding-margin, 48px);
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    align-self: stretch;
}

/* Container für App (passt für Desktop nicht, benutzt container aus se3) */
.requests-se6[b-fb77rkuj40]{
    display: flex;
    padding: 0 48px;
    align-items: center;
    align-self: stretch;
    border-radius: var(--corner-radius-xxl, 40px);
    background: var(--background-default, #F2F2F2);
}
.textarea-se6[b-fb77rkuj40]{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 40%;
    gap: 24px;
}
.requests-se6 .textarea-se6 .timeTrackingButton[b-fb77rkuj40]{
    align-self: flex-start;
}

    /* App Bereich */
.requestsApp-se6[b-fb77rkuj40]{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 48px 0;
    gap: 10px;
    align-self: stretch;
    border-radius: var(--corner-radius-xxl, 40px);
    width: 100%;
    height: 618px;
    overflow: hidden;
    transition: transform 2s ease;
}
.requestsAppSent[b-fb77rkuj40]{
    justify-content: flex-end !important;
}
.mobile-request[b-fb77rkuj40]{
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 32px;
    padding: 0 16px;
}
.mobile-request-input[b-fb77rkuj40] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mobile-request-dates[b-fb77rkuj40] {
    display: flex;
    gap: 8px;
}
.mobile-request-dates .mobile-request-input[b-fb77rkuj40] {
    flex: 1;
}
.mobile-request-label-optional[b-fb77rkuj40] {
    color: #999;
    font-weight: 400;
}
.mobile-request-field[b-fb77rkuj40] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px;
    border-radius: var(--corner-radius-round, 256px);
    background: var(--surface-default-secondary, #E6E6E6);
    border: none;
}
.mobile-request-field--select[b-fb77rkuj40] {
    justify-content: space-between;
}
.mobile-request-icon[b-fb77rkuj40] {
    line-height: 1;
    align-self: flex-start;
    cursor: pointer;
}
.mobile-request-buttons[b-fb77rkuj40]{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.screen-overlay[b-fb77rkuj40]{
    display: none;
    width: 100%;
    height: 50%;
    flex-direction: column;
    align-items: center;
    border-radius: 0 0 62px 62px;
    background: var(--page-default, #FFF);
    opacity: 0;
    transform: translateY(10px);
    transition: all 1.5s ease;
    pointer-events: none;
}
.show[b-fb77rkuj40]{
    display: flex !important;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.screen-popup[b-fb77rkuj40]{
    display: flex;
    flex-direction: column;
    align-self: stretch;
    padding: 0 16px;
    height: 100%;
    border-radius: 48px 48px 64px 64px;
    background-color: whitesmoke;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
.screen-popup img[b-fb77rkuj40]{
    width: 96px;
    height: 96px;
    aspect-ratio: 1/1;
}
.screen-popup-text[b-fb77rkuj40]{
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}


/* Desktop Bereich */
.requestsDesktop-se6[b-fb77rkuj40]{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 64px;
    align-self: stretch;
}

.requestsDesktop[b-fb77rkuj40]{
    display: flex;
    padding: 48px var(--spacing-jumper-padding-margin, 48px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: var(--corner-radius-xxl, 40px);
    background: lightgray url('img/publicPages/Zeiterfassung/container.png') center / cover no-repeat;
}
.requestDesktop-wrapper[b-fb77rkuj40]{
    display: flex;
    padding: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
    border-radius: var(--corner-radius-xxl, 40px);
    background: rgba(224, 224, 224, 0.50);
    box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.05);
}
.requestDesktop-outer[b-fb77rkuj40]{
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: var(--spacing-jumper-padding-margin, 48px);
    align-items: flex-start;
    align-self: stretch;
    border-radius: var(--corner-radius-xl, 16px);
    border: 1px solid var(--border-default-quaternary);
    background: var(--surface-default-default, #FFF);
    box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.05);
}
.requestDesktop[b-fb77rkuj40]{
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: var(--corner-radius-l);
    border: var(--stroke-weight-s) solid var(--border-default-quaternary);
    width: 100%;
}
.requestDesktop-text-urlaub[b-fb77rkuj40]{
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 0 0;
}
.requestDesktop-buttons[b-fb77rkuj40]{
    display: flex;
    align-items: flex-end;
    gap: 8px;
    align-self: stretch;
}




/* ========== Section 7 ========== */
.section-seven[b-fb77rkuj40]{
    display: flex;
    height: 683px;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}
.container-se7[b-fb77rkuj40]{
    display: flex;
    padding: 64px var(--spacing-jumper-padding-margin, 48px);
    justify-content: center;
    align-items: center;
    gap: 64px;
    flex-shrink: 0;
}

/* Left */
.textarea-se7[b-fb77rkuj40]{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}
.textarea-se7-text[b-fb77rkuj40]{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
}
.textarea-se7-buttons[b-fb77rkuj40]{
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* Right */
.image-se7[b-fb77rkuj40]{
    height: 555px;
    border-radius: var(--corner-radius-xxl, 40px);
    /*background: url(img/publicPages/Zeiterfassung/Zeiterfassung.png) lightgray 50% / cover no-repeat;*/
}
.image-se7 img[b-fb77rkuj40]{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--corner-radius-xxl, 40px);
}






/* ======= Responsive ======= */

/* *** Ultrawide *** */
@media (min-width: 1440px) {
   .container-se1-con1[b-fb77rkuj40]{
       width: 1440px;
   }
    
   .container-se2[b-fb77rkuj40]{
       max-width: 1440px;
       height: 683px;
   }
   
   .container-se3[b-fb77rkuj40]{
       max-width: 1440px;
       align-self: center;
   }
   
   .container-se4[b-fb77rkuj40]{
       max-width: 1440px;
   }
    .textarea-se4[b-fb77rkuj40]{
        width: 1359px;
    }
    
   .container-se5[b-fb77rkuj40]{
       max-width: 1440px;
       align-self: center;
   }
   
   .container-se6[b-fb77rkuj40]{
       width: 1440px;
       align-self: center;
   }
   
   .container-se7[b-fb77rkuj40]{
       width: 1440px;
       align-self: center;
   }
}


@media (max-width: 1000px) {
    .textarea-se2[b-fb77rkuj40]{
        padding: 0 40px;
    }
    .blackButtonWeb[b-fb77rkuj40], .outlinedButtonWeb[b-fb77rkuj40]{
        padding: 6px 8px;
    }
    .requests-se6[b-fb77rkuj40]{
        flex-direction: column;
    }
    .textarea-se6[b-fb77rkuj40]{
        display: flex;
        padding: 20px 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        width: unset;
    }
    .requests-se6 .textarea-se6 .timeTrackingButton[b-fb77rkuj40]{
        align-self: center;
    }
    .requestsApp-se6[b-fb77rkuj40]{
        mask-image: linear-gradient(to bottom, transparent 0, black 30px, black 100%);
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 30px, black 100%);
        margin: 20px 0 0 0;
    }
}


/* *** Tablet *** */
@media (max-width: 768px) {
    /* Section 1 */
    .container-se1[b-fb77rkuj40]{
        align-self: unset;
        gap: 50px;
    }
    .container-se1-con1[b-fb77rkuj40] {
        display: flex;
        padding: 4px 0;
        justify-content: center;
        align-items: center;
        gap: 10px;
        align-self: stretch;
    }
    .container-se1-con2[b-fb77rkuj40]{
        height: unset;
    }
    .textarea-se1-con2[b-fb77rkuj40]{
        padding: 0 var(--spacing-jumper-padding-margin, 24px);
        width: 100%;
    }

    /* Section 3 und 4 */
    .textarea-se4[b-fb77rkuj40]{
        width: 100%;
    }
    /* Für Tabellen */
    .hide-tablet[b-fb77rkuj40] {
        display: none;
    }
    #addCircle[b-fb77rkuj40]{
        display: none;
    }

    /* Section 5 */
    .timeModels-se5[b-fb77rkuj40]{
        flex-direction: column;
        gap: 20px;
    }
    .textarea-se5[b-fb77rkuj40], .timeModel-wrapper[b-fb77rkuj40]{
        width: 100%;
        padding: 32px;
    }

    /* Section 6 */
    .textarea-se6[b-fb77rkuj40]{
        width: 100%;
        padding: 32px;
    }
    .requests-se6[b-fb77rkuj40]{
        padding: 0px;
    }
    
    /* Section 7 */
    .container-se7[b-fb77rkuj40]{
        flex-direction: column;
    }
    .textarea-se7 > *[b-fb77rkuj40] , .textarea-se3 > *[b-fb77rkuj40] , .textarea-se6 > *[b-fb77rkuj40]{
        align-items: center;
        align-self: center;
        text-align: center;
    }
}


/* *** Mobile *** */
@media (max-width: 480px) {
    
    /* Buttons*/
    .blackButtonWeb[b-fb77rkuj40], .outlinedButtonWeb[b-fb77rkuj40]{
        padding: 2px;
        width: 100%;
    }

    /* iPhone */
    .iphone17Frame[b-fb77rkuj40]{
        width: 280px;
        height: auto;
    }
    .screen[b-fb77rkuj40]{
        border-radius: 40px;
        margin: 14px 14px 0 14px;
        overflow: hidden;
        gap: 0;
    }
    .mobile-statusBar[b-fb77rkuj40]{
        width: 100%;
        padding: 12px 5px 12px 5px;
        gap: 50px;
    }
    .mobile-header[b-fb77rkuj40]{
        width: 100%;
        height: 40px;
    }
    .mobile-header.headingH4[b-fb77rkuj40]{
        font-size: 18px !important;
    }

    /* Section 1 */
    .container-se1-con1[b-fb77rkuj40] {
        padding: 40px 0;
    }
    .container-se1-con1 img[b-fb77rkuj40]{
        width: 85%;
    }
    .textarea-se1-con2-buttons[b-fb77rkuj40]{
        flex-direction: column;
        width: 100%;
    }
    
    
    /* Section 3, 4 und 5*/
    .bookingApp-se3[b-fb77rkuj40]{
        
    }
    /* Für Tabellen */
    .timesheet-wrapper[b-fb77rkuj40], .timeModel-wrapper[b-fb77rkuj40]{
        padding: 16px;
    }
    .timesheet-card[b-fb77rkuj40], .timeModel-card[b-fb77rkuj40]{
        border-radius: 24px;
    }
    .hide-mobile[b-fb77rkuj40] {
        display: none;
    }
    .timesheet-table thead tr > th[b-fb77rkuj40]{
        padding: 0 0 14px 0;
    }
    .timesheet-table tbody td[b-fb77rkuj40]{
        padding: 8px 0;
    }
    
    

    /* Section 6 */
    .requestsApp-se6[b-fb77rkuj40]{
        padding: 24px 0;
        height: 350px;
        overflow: hidden;
    }
    .mobile-request[b-fb77rkuj40]{
        gap: 10px;
    }
    .mobile-request-input[b-fb77rkuj40]{
        gap: 4px;
    }
    .mobile-request-field[b-fb77rkuj40]{
        padding: 0 8px;
    }
    .mobile-request-dates[b-fb77rkuj40]{
        flex-direction: column;
    }
    .mobile-request-buttons[b-fb77rkuj40]{
        gap: 6px;
    }
    .screen >* button[b-fb77rkuj40]{
        height: 25px;
    }
    .screen-popup[b-fb77rkuj40]{
        border-radius: 48px 48px 0 0;
        gap: 10px;
    }
    .screen-popup-text[b-fb77rkuj40]{
        gap: 10px;
    }
    .screen-popup-text img[b-fb77rkuj40]{
        width: 40px;
        height: 40px;
    }
    
    .requestsDesktop[b-fb77rkuj40]{
        padding: 12px;
    }
    .requestDesktop-wrapper[b-fb77rkuj40]{
        padding: 16px;
    }
    .requestDesktop-buttons[b-fb77rkuj40]{
        flex-direction: column;
    }
    .requestDesktop-buttons > button[b-fb77rkuj40]{
        width: 100%;
        padding: 0;
    }


    /* Section 7 */
    .textarea-se7-buttons[b-fb77rkuj40]{
        flex-direction: column;
        width: 100%;
    }
    .image-se7[b-fb77rkuj40]{
        height: 300px;
    }
}
/* /Module/EmployeeManagement/Elements/GroupPermissionsGrid.razor.rz.scp.css */
.groups[b-7pq12lcvxe]{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    margin: 25px 10px;
    gap: 40px;
    padding: 30px;
    border-radius: var(--mwBorderRadiusSmall);
}

.group-card[b-7pq12lcvxe]{
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: white;
    border-radius: 25px;
    box-shadow: 2px 10px 15px rgba(0, 0, 0, 0.2);
    border: 1px rgba(0, 0, 0, 0.12) solid;
}

.groupLine[b-7pq12lcvxe]{
    height: 1px;
    transform: translateZ(0);
    margin: 0px 0;
    background: linear-gradient(
            to right,
            transparent,
            rgba(0, 0, 0, 0.12),
            transparent
    );
}

.group-card-header[b-7pq12lcvxe]{
    display: flex;
    flex-direction: column;
    border-radius: 25px 25px 0 0;
    padding: 8px 16px ;
    gap: 15px;
    background-color: black;
    color: white;
}
.groupNameShort[b-7pq12lcvxe]{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
    color: black;
    width: 30px;
    height: 30px;
    border-radius: 1000px;
    background-color: var(--mwFarbeHintergrund);
}
.groupNameShort > p[b-7pq12lcvxe]{
    margin: 0;
    height: fit-content;
}



.group-card-body[b-7pq12lcvxe]{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 16px ;
    gap: 14px;
}
.group-description[b-7pq12lcvxe]{
    height: fit-content;
}
.fade-text[b-7pq12lcvxe] {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; 
}
.personNamesShort[b-7pq12lcvxe]{
    display: flex;
    gap: 5px;
}
.personNameShort[b-7pq12lcvxe]{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--mwFarbeHintergrund);
    color: black;
    width: 40px;
    height: 40px;
    border: 1px;
    border-radius: 1000px;
    cursor: pointer;
}
.no-persons[b-7pq12lcvxe]{
    height: 40px;
}



.group-card-footer[b-7pq12lcvxe]{
    display: flex;
    flex-direction: column;
    padding: 8px 16px ;
    border-radius: 0 0 25px 25px;
    background-color: white;
}
.group-card-footer > p[b-7pq12lcvxe]{
    margin: 0;
}

@media (max-width: 768px) {
    .groups[b-7pq12lcvxe]{
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        margin: 10px;
        padding: 10px;
        gap: 20px;
        background-color: transparent;
    }

    .group-card[b-7pq12lcvxe]{
        box-shadow: none;
    }
}
/* /Module/ProjectManagement/Elements/LiveStatus.razor.rz.scp.css */
.liveStatus[b-367dvxv4f5]{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0 0;
    align-self: stretch;
    padding: 30px var(--spacing-jumper-padding-margin, 48px);
    gap: 48px;
}

.secondHeadingSticky[b-367dvxv4f5]{
    position: sticky;
    top: 0;
    padding: 14px;
    z-index: 999;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    background-color: var(--mwFarbeHintergrund);
}
.selectedDay[b-367dvxv4f5]{
    display: flex;
    align-items: center;
}

.switchWeeks[b-367dvxv4f5]{
    display: flex;
    gap: 8px;
}
.cal-btn[b-367dvxv4f5] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px;
    font-size: 0.85rem;
    transition: background 0.15s, border-color 0.15s;
    border: none;
    border-radius: var(--corner-radius-xl, 16px);
    background: #FFFFFF;
}

.cal-btn:hover[b-367dvxv4f5] {
    background: #f0f0f5;
    border-color: #b0b0c0;
}

.cal-btn.active[b-367dvxv4f5] {
    background: #1a73e8;
    color: #FFFFFF;
    border-color: #1a73e8;
}

.switchButtons[b-367dvxv4f5]{
    display: flex;
    width: 171px;
    padding: 4px;
    align-items: center;
    border-radius: var(--corner-radius-round, 256px);
    background: #FFFFFF;
}
.switchButton[b-367dvxv4f5] {
    display: flex;
    padding: 6px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex: 1 0 0;
    border: none;
    border-radius: var(--corner-radius-round, 256px);
    background: #FFFFFF;
}
.active[b-367dvxv4f5]{
    background: #E6E6E6;
}

.overwiew[b-367dvxv4f5]{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
}

.timeAndProgress[b-367dvxv4f5]{
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}
.timeBooking[b-367dvxv4f5]{
    display: flex;
    padding: 24px;
    gap: 16px;
    flex-direction: column;
    border-radius: var(--corner-radius-xl, 16px);
}
.comeBooking[b-367dvxv4f5]{
    display: flex;
    justify-content: start;
    align-items: center;
}

.taskProgress[b-367dvxv4f5]{
    display: flex;
    padding: 24px;
    gap: 16px;
    flex-direction: column;
    background-color: #EBC5A4;
    border-radius: var(--corner-radius-xl, 16px);
}
.timeBooking[b-367dvxv4f5], .taskProgress[b-367dvxv4f5]{
    width: 50%;
    min-width: 0;
    justify-content: flex-start;
}

.inProgress[b-367dvxv4f5]{
    display: flex;
    justify-content: space-between;
}

.openAndClosedTasks[b-367dvxv4f5]{
    display: flex;
    width: 100%;
    gap: 10px;
}

.tasks[b-367dvxv4f5]{
    display: flex;
    min-width: 0;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: var(--corner-radius-xl, 16px);
    background-color: white;
}

.listTasks[b-367dvxv4f5]{
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    overflow: hidden;
}
.projectExecution[b-367dvxv4f5]{
    text-decoration: underline 2px #2a9d8f;
}
.doneOrOpenProjectExecutions[b-367dvxv4f5]{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border: 1px solid darkgrey;
    border-radius: 16px;
    margin: 15px 0 15px 0;
}

.maintainableObjectExecution[b-367dvxv4f5]{
    text-decoration: underline 2px #d62828;
}

.maintainableObjectTasks[b-367dvxv4f5]{
    margin: 4px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.oneTask[b-367dvxv4f5]{
    display: flex;
    align-items: center;
}

.assignedPersons[b-367dvxv4f5]{
    display: flex;
    align-items: center;
}

.greenField[b-367dvxv4f5]{
    width: 8px;
    height: 8px;
    aspect-ratio: 1/1;
    background-color: #4AD896;
}
.orangeField[b-367dvxv4f5]{
    width: 8px;
    height: 8px;
    aspect-ratio: 1/1;
    background-color: #ED7B01;
    justify-self: center;
}


.view[b-367dvxv4f5]{
    display: flex;
    width: 100%;
    height: 500px;
}
.objectInfos[b-367dvxv4f5]{
    display: flex;
    flex-direction: column;
    width: 50%;
    gap: 42px;
    border-top: 1px solid #ebebf0;
    border-left: 1px solid #ebebf0;
    border-right: 1px solid #ebebf0;
    border-bottom: 1px solid #ebebf0;
    margin: 0;
    padding: 20px;
    overflow: scroll;
}

.objectImage[b-367dvxv4f5]{
    width: 100%;
    height: 50%;
    overflow: visible;
}
.objectImage img[b-367dvxv4f5]{
    object-fit: contain;
    width: 100%;
    height: 100%;
    border-radius: var(--corner-radius-xl, 16px);
}

/** Pfeil ausblenden */
summary[b-367dvxv4f5] {
    list-style: none;
}
summary[b-367dvxv4f5]::-webkit-details-marker {
    display: none;
}
summary[b-367dvxv4f5]::marker {
    content: "";
}


@media (max-width: 950px) {
    .liveStatus[b-367dvxv4f5]{
        padding: 0;
    }
    .inProgress[b-367dvxv4f5]{
        flex-direction: column;
    }
}


@media (max-width: 768px) {
    .liveStatus[b-367dvxv4f5]{
        padding: 0;
    }

    .openAndClosedTasks[b-367dvxv4f5]{
        flex-direction: column;
    }

    .view[b-367dvxv4f5]{
        flex-direction: column;
        height: fit-content;
    }
    .calendar[b-367dvxv4f5]{
        width: 100% !important;
        order: 2;
    }
    .objectInfos[b-367dvxv4f5]{
        width: 100% !important;
        order: 1;
    }
}



@media (prefers-color-scheme: dark) {
    .cal-btn[b-367dvxv4f5], .cal-btn-today[b-367dvxv4f5] {
        background-color: #333;  /* Dunkler Hintergrund */
        color: white;
        border: none;
    }
    .switchButtons[b-367dvxv4f5]{
        background-color: #333;
    }
    .switchButton[b-367dvxv4f5]{
        background-color: #333;
        color: white;
    }
    .switchButton.active[b-367dvxv4f5]{
        background-color: #444;
        color: white;
    }
    .switchWeeks[b-367dvxv4f5]{}
}
/* /Module/TimeTracking/Elements/SortableListEmployee.razor.rz.scp.css */
/* 
  you need the ::deep identifier if you are using scoped styles like this
  because scoped styles are only applied to markup in the component, not
  to the markup inside the render fragment.
*/
/*.sortable-ghost {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}*/
[b-x5awf0jkv2] .sortable-ghost {
  visibility: visible;
}

[b-x5awf0jkv2] .sortable-fallback {
  opacity: 1 !important;
}
/* /Module/TimeTracking/Elements/SortableListProject.razor.rz.scp.css */
/* 
  you need the ::deep identifier if you are using scoped styles like this
  because scoped styles are only applied to markup in the component, not
  to the markup inside the render fragment.
*/
/*.sortable-ghost {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}*/
[b-rxy49xyyue] .sortable-ghost {
  visibility: visible;
}

[b-rxy49xyyue] .sortable-fallback {
  opacity: 1 !important;
}
/* /Module/TimeTracking/Elements/SortableListTimeAccounts.razor.rz.scp.css */
/* 
  you need the ::deep identifier if you are using scoped styles like this
  because scoped styles are only applied to markup in the component, not
  to the markup inside the render fragment.
*/
/*.sortable-ghost {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}*/
[b-xyr867wic1] .sortable-ghost {
  visibility: visible;
}

[b-xyr867wic1] .sortable-fallback {
  opacity: 1 !important;
}