@import '_content/SmartArbeitsschutz.Modules.EquipmentRegister.Web/SmartArbeitsschutz.Modules.EquipmentRegister.Web.2r3newsbzr.bundle.scp.css';
@import '_content/SmartArbeitsschutz.Modules.FirstAidLog.Web/SmartArbeitsschutz.Modules.FirstAidLog.Web.hk277dpa4k.bundle.scp.css';
@import '_content/SmartArbeitsschutz.Modules.Hazards.Web/SmartArbeitsschutz.Modules.Hazards.Web.pav8fsu8ve.bundle.scp.css';
@import '_content/SmartArbeitsschutz.Modules.MasterData.Web/SmartArbeitsschutz.Modules.MasterData.Web.8n7003c0xe.bundle.scp.css';
@import '_content/SmartArbeitsschutz.Modules.Nachweisakte.Web/SmartArbeitsschutz.Modules.Nachweisakte.Web.j0q23w7m6q.bundle.scp.css';
@import '_content/SmartArbeitsschutz.Modules.OperatingInstructions.Web/SmartArbeitsschutz.Modules.OperatingInstructions.Web.2flitko3zl.bundle.scp.css';
@import '_content/SmartArbeitsschutz.Modules.RiskAssessments.Web/SmartArbeitsschutz.Modules.RiskAssessments.Web.q2kii302bh.bundle.scp.css';
@import '_content/SmartArbeitsschutz.Modules.Users.Web/SmartArbeitsschutz.Modules.Users.Web.0n2ngcbfp2.bundle.scp.css';
@import '_content/SmartArbeitsschutz.Shared/SmartArbeitsschutz.Shared.zg2gw51qln.bundle.scp.css';

/* /Components/Layout/IdleTimer.razor.rz.scp.css */
.idle-overlay[b-fomflawrcc] {
    position: fixed;
    inset: 0;
    background: rgba(31, 40, 50, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 24px;
}

.idle-dialog[b-fomflawrcc] {
    background: #ffffff;
    border-radius: 12px;
    padding: 32px 28px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.idle-icon[b-fomflawrcc] {
    margin-bottom: 16px;
}

.idle-title[b-fomflawrcc] {
    font-family: 'Manrope', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1F2832;
    margin: 0 0 10px;
}

.idle-message[b-fomflawrcc] {
    font-size: 0.9375rem;
    color: #5B6573;
    line-height: 1.6;
    margin: 0 0 24px;
}

.idle-message strong[b-fomflawrcc] {
    color: #C4633F;
    font-weight: 600;
}

.idle-actions[b-fomflawrcc] {
    display: flex;
    justify-content: center;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ── Shell layout ──────────────────────────────────────────────────────────── */
.app-shell[b-i49v43mu6m] {
    display: flex;
    min-height: 100vh;
    background-color: var(--color-slate);
}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
/* #1027: dvh after vh, twice. 100vh is the viewport with the browser chrome hidden, so on a phone
   with the address bar showing, the bottom of this box sits below what the user can see - and on
   iOS 15+ that bar sits at the bottom, right over the sidebar footer with the Impressum and
   Datenschutz links. Confirmed on a real iPhone: the links only appear after scrolling the page
   behind the drawer, which shrinks the bar. Scrolling the drawer itself does not help, because its
   content is exactly as tall as the box and so it never gets a scrollbar of its own. 100dvh tracks
   the visible height instead. Browsers without dvh ignore the second declaration and keep the vh
   value, which is what they render today. */
.sidebar[b-i49v43mu6m] {
    width: 240px;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--color-slate);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
}

.sidebar-logo[b-i49v43mu6m] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-wordmark[b-i49v43mu6m] {
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 15px;
    letter-spacing: -0.1px;
    color: #ffffff;
    line-height: 1;
}

/* ── Main area ─────────────────────────────────────────────────────────────── */
.main-area[b-i49v43mu6m] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--color-background);
}

/* ── Top bar ───────────────────────────────────────────────────────────────── */
.top-bar[b-i49v43mu6m] {
    height: 56px;
    background-color: #ffffff;
    border-bottom: 1px solid var(--color-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}

.top-bar-left[b-i49v43mu6m] {
    flex: 1;
}

.top-bar-right[b-i49v43mu6m] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ── Hamburger button ──────────────────────────────────────────────────────── */
.hamburger-btn[b-i49v43mu6m] {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text);
}

.hamburger-btn:hover[b-i49v43mu6m] {
    background-color: var(--color-divider);
}

.hamburger-bar[b-i49v43mu6m] {
    display: block;
    width: 20px;
    height: 2px;
    background-color: currentColor;
    border-radius: 2px;
    transition: opacity 0.15s ease;
}

/* ── Content area ──────────────────────────────────────────────────────────── */
.content-area[b-i49v43mu6m] {
    flex: 1;
    padding: 28px 32px;
}

@media (max-width: 640px) {
    .content-area[b-i49v43mu6m] {
        padding: 16px;
    }

    .top-bar[b-i49v43mu6m] {
        padding: 0 16px;
    }
}

/* ── Sidebar footer (Impressum / Datenschutz links) ────────────────────────── */
.sidebar-footer[b-i49v43mu6m] {
    display: flex;
    gap: 16px;
    padding: 12px 20px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.sidebar-footer__link[b-i49v43mu6m] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: color 0.15s ease;
}

.sidebar-footer__link:hover[b-i49v43mu6m] {
    color: rgba(255, 255, 255, 0.7);
}

/* ── Error UI ──────────────────────────────────────────────────────────────── */
#blazor-error-ui[b-i49v43mu6m] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

/* ── Responsive: hamburger overlay below 1024px ────────────────────────────── */
@media (max-width: 1023px) {
    .hamburger-btn[b-i49v43mu6m] {
        display: flex;
        /* #1028: 36x36 at the base rule, below the 44px finger minimum. Only enlarged where the
           button actually exists - it is display:none from 1024px up, where a mouse is in play. */
        width: 44px;
        height: 44px;
    }

    .sidebar[b-i49v43mu6m] {
        /* Slide in from left as fixed overlay; hidden by default */
        position: fixed;
        top: 0;
        left: 0;
        /* #1027: same vh/dvh pair as the base rule - this is the variant the phone actually renders. */
        height: 100vh;
        height: 100dvh;
        z-index: 300;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        /* Keep width so content is not squished */
        min-height: 100vh;
        min-height: 100dvh;
    }

    .sidebar--open[b-i49v43mu6m] {
        transform: translateX(0);
        /* Ensure sidebar is above backdrop */
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    }

    /* Dim backdrop shown behind the overlay */
    .nav-backdrop[b-i49v43mu6m] {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 200;
        animation: backdrop-fade-in-b-i49v43mu6m 0.18s ease;
    }

    @keyframes backdrop-fade-in-b-i49v43mu6m {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}

/* On desktop the backdrop and hamburger are never shown */
@media (min-width: 1024px) {
    .hamburger-btn[b-i49v43mu6m] {
        display: none;
    }

    .nav-backdrop[b-i49v43mu6m] {
        display: none;
    }
}
/* /Components/Layout/NavGroup.razor.rz.scp.css */
/* Styled like a module link (14px/500), as in the mockup; the whole row is the button. */
.nav-group[b-822js75z07] {
    margin: 5px 0;
}

.nav-group-head[b-822js75z07] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: none;
    border-radius: 8px;
    background: none;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.75);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-group-head:hover[b-822js75z07] {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.nav-group-head[aria-expanded="true"][b-822js75z07] {
    color: #ffffff;
}

/* flex: 1 + min-width: 0 so "Gefährdungs-beurteilung" wraps at its <wbr /> instead of pushing
   the chevron out of the 240px sidebar. */
.nav-group-label[b-822js75z07] {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.nav-group-here[b-822js75z07] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-terracotta);
    flex-shrink: 0;
}

.nav-chevron[b-822js75z07] {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.35);
    transition: transform 0.2s ease;
}

.nav-chevron.open[b-822js75z07] {
    transform: rotate(180deg);
}

.nav-group-items[b-822js75z07] {
    margin-top: 2px;
    margin-bottom: 4px;
}

/* #1028: 44px targets in the touch drawer; the desktop sidebar stays compact. */
@media (max-width: 1023px) {
    .nav-group-head[b-822js75z07] {
        min-height: 44px;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.nav-menu[b-oeshyokn1p] {
    padding: 12px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── Sections ──────────────────────────────────────────────────────────────── */
/* ::deep lets these selectors reach into child components (MasterDataNavGroup) */
.nav-menu[b-oeshyokn1p]  .nav-section {
    padding: 4px 12px;
}

.nav-menu[b-oeshyokn1p]  .nav-section + .nav-section {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Einrichtung (Stammdaten) at the bottom: divider + small caption (#1526). Declared after the
   generic section rule above so it wins at equal specificity. */
.nav-menu[b-oeshyokn1p]  .nav-section.nav-section--setup {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.nav-menu[b-oeshyokn1p]  .nav-caption {
    padding: 0 10px 4px;
    font-size: 10.5px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
}

/* Takes the free height so Einrichtung sits at the bottom of a short menu. */
.nav-menu[b-oeshyokn1p]  .nav-spacer {
    flex: 1;
    min-height: 12px;
}

/* ── Individual nav items ──────────────────────────────────────────────────── */
.nav-menu[b-oeshyokn1p]  .nav-item {
    margin: 5px 0;
}

.nav-menu[b-oeshyokn1p]  .nav-item .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.nav-menu[b-oeshyokn1p]  .nav-item .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.nav-menu[b-oeshyokn1p]  .nav-item .nav-link.active {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* Sub-items (under Stammdaten) */
.nav-menu[b-oeshyokn1p]  .nav-item--sub .nav-link {
    padding: 6px 10px 6px 20px;
    font-size: 13px;
    font-weight: var(--font-weight-regular);
    color: rgba(255, 255, 255, 0.6);
}

.nav-menu[b-oeshyokn1p]  .nav-item--sub .nav-link:hover {
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(255, 255, 255, 0.08);
}

.nav-menu[b-oeshyokn1p]  .nav-item--sub .nav-link.active {
    background-color: rgba(196, 99, 63, 0.25);
    color: #ffffff;
}

/* ── Icons ─────────────────────────────────────────────────────────────────── */
.nav-menu[b-oeshyokn1p]  .nav-icon {
    flex-shrink: 0;
    opacity: 0.8;
}

/* Tabler icons of the module entries; the top links keep their SVGs. */
.nav-menu[b-oeshyokn1p]  .ti.nav-icon {
    font-size: 18px;
    width: 16px;
    text-align: center;
    line-height: 1;
}

/* Focus ring (#1526): the browser default is barely visible on slate. Inset so the sidebar's
   overflow does not clip it. */
.nav-menu[b-oeshyokn1p]  a:focus-visible,
.nav-menu[b-oeshyokn1p]  button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -2px;
}

/* #1028: 44px targets in the touch drawer. */
@media (max-width: 1023px) {
    .nav-menu[b-oeshyokn1p]  .nav-item .nav-link {
        min-height: 44px;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-yudqcg4lb3],
.components-reconnect-repeated-attempt-visible[b-yudqcg4lb3],
.components-reconnect-failed-visible[b-yudqcg4lb3],
.components-pause-visible[b-yudqcg4lb3],
.components-resume-failed-visible[b-yudqcg4lb3],
.components-rejoining-animation[b-yudqcg4lb3] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-yudqcg4lb3],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-yudqcg4lb3],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-yudqcg4lb3],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-yudqcg4lb3],
#components-reconnect-modal.components-reconnect-retrying[b-yudqcg4lb3],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-yudqcg4lb3],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-yudqcg4lb3],
#components-reconnect-modal.components-reconnect-failed[b-yudqcg4lb3],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-yudqcg4lb3] {
    display: block;
}


#components-reconnect-modal[b-yudqcg4lb3] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-yudqcg4lb3 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-yudqcg4lb3 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-yudqcg4lb3 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-yudqcg4lb3]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-yudqcg4lb3 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-yudqcg4lb3 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-yudqcg4lb3 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-yudqcg4lb3 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-yudqcg4lb3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-yudqcg4lb3] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-yudqcg4lb3] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-yudqcg4lb3] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-yudqcg4lb3] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-yudqcg4lb3] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-yudqcg4lb3] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-yudqcg4lb3 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-yudqcg4lb3] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-yudqcg4lb3 {
    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/UserMenu.razor.rz.scp.css */
/* User menu trigger */
.user-menu[b-kdl1t0utnv] {
    position: relative;
}

.user-menu-trigger[b-kdl1t0utnv] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--color-anthracite);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    transition: background-color 0.15s ease;
}

.user-menu-trigger:hover[b-kdl1t0utnv] {
    background-color: var(--color-background);
}

.user-avatar[b-kdl1t0utnv] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--color-slate);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}

.user-name[b-kdl1t0utnv] {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chevron[b-kdl1t0utnv] {
    color: var(--color-text-light);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.chevron.open[b-kdl1t0utnv] {
    transform: rotate(180deg);
}

/* Transparent full-screen backdrop rendered behind the dropdown.
   Captures clicks outside the menu and closes it without JS interop. */
.dropdown-backdrop[b-kdl1t0utnv] {
    position: fixed;
    inset: 0;
    z-index: 199; /* one below .user-menu-dropdown (z-index: 200) */
}

/* User menu dropdown */
.user-menu-dropdown[b-kdl1t0utnv] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background-color: #ffffff;
    border: 1px solid var(--color-divider);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    min-width: 200px;
    padding: 6px;
    z-index: 200;
}

/* Section label for customer switcher inside dropdown */
.user-menu-section-label[b-kdl1t0utnv] {
    padding: 4px 10px 6px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.user-menu-item[b-kdl1t0utnv] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--font-weight-regular);
    color: var(--color-anthracite);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.1s ease;
}

.user-menu-item:hover[b-kdl1t0utnv] {
    background-color: var(--color-background);
}

.user-menu-item--disabled[b-kdl1t0utnv] {
    color: var(--color-text-light);
    cursor: default;
}

.user-menu-item--disabled:hover[b-kdl1t0utnv] {
    background: none;
}

.user-menu-item--logout[b-kdl1t0utnv] {
    color: var(--color-text-secondary);
}

/* Customer items inside the dropdown */
.user-menu-item--customer[b-kdl1t0utnv] {
    font-size: 13px;
    gap: 8px;
}

.user-menu-item--customer-active[b-kdl1t0utnv] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-slate);
    cursor: default;
}

.user-menu-divider[b-kdl1t0utnv] {
    height: 1px;
    background-color: var(--color-divider);
    margin: 4px 0;
}

.user-menu-form[b-kdl1t0utnv] {
    display: contents;
}

/* Responsive */
@media (max-width: 767px) {
    .user-name[b-kdl1t0utnv] {
        display: none;
    }
}
/* /Components/Pages/AdminCustomers.razor.rz.scp.css */
.sl-breadcrumb[b-dwxlg2kyrp] {
    margin-bottom: var(--spacing-4);
}

.sl-title[b-dwxlg2kyrp] {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-1);
}

.sl-subtitle[b-dwxlg2kyrp] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin: 0;
}

.sl-search-row[b-dwxlg2kyrp] {
    margin-bottom: var(--spacing-4);
    max-width: 400px;
}

.sl-search[b-dwxlg2kyrp] {
    width: 100%;
}

.sl-no-results[b-dwxlg2kyrp] {
    color: var(--color-text-secondary);
    font-style: italic;
    margin-top: var(--spacing-4);
}

/* ── Table wrapper and rows (matches StorageLocationsPage.razor.css pattern) ── */

.sl-table-wrap[b-dwxlg2kyrp] {
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: var(--spacing-4);
}

.sl-row[b-dwxlg2kyrp] {
    background-color: #ffffff;
}

.sl-row:hover[b-dwxlg2kyrp] {
    background-color: #F9FAFB;
}

.sl-row td[b-dwxlg2kyrp] {
    vertical-align: middle;
    border-bottom: 1px solid #F3F4F6;
}

/* ── Tabs (shared pattern with Profile.razor, scoped CSS is not shared across files) ── */

.profile-tabs[b-dwxlg2kyrp] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #E5E7EB;
    margin-bottom: 1.75rem;
}

.profile-tab[b-dwxlg2kyrp] {
    padding: 0.6rem 1.1rem;
    font-family: var(--font-headline);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.profile-tab:hover[b-dwxlg2kyrp] {
    color: var(--color-anthracite);
}

.profile-tab.active[b-dwxlg2kyrp] {
    color: var(--color-terracotta);
    border-bottom-color: var(--color-terracotta);
}

/* ── Inline form (create customer) ───────────────────────────────────────── */

.sl-inline-form[b-dwxlg2kyrp] {
    background: #ffffff;
    border: 0.5px solid #E5E7EB;
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
}

.sl-form-header[b-dwxlg2kyrp] {
    background: #3A4A5C;
    color: #ffffff;
    padding: 8px 16px;
}

.sl-form-title[b-dwxlg2kyrp] {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.sl-form-body[b-dwxlg2kyrp] {
    padding: 16px;
}

.sl-form-label[b-dwxlg2kyrp] {
    font-size: 13px;
    color: #6B7280;
}

/* ── Verlauf table (matches um-history-table / oi-history-table pattern) ─── */

.ac-verlauf-table[b-dwxlg2kyrp] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ac-verlauf-th[b-dwxlg2kyrp] {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 12px 8px 0;
    border-bottom: 1.5px solid var(--color-divider);
    text-align: left;
}

.ac-verlauf-td[b-dwxlg2kyrp] {
    padding: 10px 12px 10px 0;
    vertical-align: top;
    color: var(--color-anthracite);
    font-size: 13px;
    border-bottom: 1px solid var(--color-divider);
}

.ac-verlauf-row:last-child .ac-verlauf-td[b-dwxlg2kyrp] {
    border-bottom: none;
}
/* /Components/Pages/Cockpit.razor.rz.scp.css */
.cp-loading[b-oln5n77hw6] {
    color: #6B7280;
}

.cp-hero-row[b-oln5n77hw6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.cp-hero[b-oln5n77hw6] {
    margin-bottom: 0;
}

.cp-filter[b-oln5n77hw6] {
    flex-shrink: 0;
}

.cp-filter-label[b-oln5n77hw6] {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8B95A3;
    font-weight: 600;
    margin-bottom: 4px;
}

.cp-filter-select[b-oln5n77hw6] {
    min-width: 180px;
    width: auto;
    box-sizing: border-box;
    font-size: 0.85rem;
    font-family: Inter, sans-serif;
    font-weight: 500;
    padding: 5px 28px 5px 10px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    border: 1px solid var(--color-slate);
    border-radius: 6px;
    color: var(--color-slate);
    cursor: pointer;
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
}

.cp-filter-select:focus[b-oln5n77hw6] {
    box-shadow: 0 0 0 2px rgba(58, 74, 92, 0.2);
}

.cp-title[b-oln5n77hw6] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1F2832;
    margin: 0 0 3px;
}

.cp-subtitle[b-oln5n77hw6] {
    color: #5B6573;
    font-size: 0.9rem;
    margin: 0;
}

.cp-zone-label[b-oln5n77hw6] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8B95A3;
    font-weight: 700;
    margin: 26px 0 13px;
}

/* ── Five-phase horizontal flow (#492) ────────────────────────────────────── */

/* #1110: Query-Container für den Phasenfluss. Die Stapel-Regel weiter unten fragt damit die
   Breite ab, die der Flow tatsächlich hat, statt der Fensterbreite — zwischen beiden liegen
   die Sidebar (240px) und das Padding der Content-Area (2×32px), weshalb ein 1280px-Fenster
   dem 1060px breiten Grid nur 976px übrig ließ und es trotz "breit genug wirkendem" Fenster
   seitwärts scrollte. Eigener Wrapper, weil eine Container-Query ihren Container nicht
   selbst stylen kann und .cp-phase-scroll in der Regel mitgeschaltet wird. */
.cp-phase-flow[b-oln5n77hw6] {
    container-type: inline-size;
}

.cp-phase-scroll[b-oln5n77hw6] {
    overflow-x: auto;
    padding-bottom: 4px;
}

/* CSS grid with 3 named row tracks so all phase columns share the same head/expl
   row heights via CSS subgrid. Arrow divs span all 3 rows to stay vertically centred.
   minmax(160px, 1fr) sets the minimum track width in the grid definition; the item
   must have min-width:0 so its content cannot inflate the track beyond 1fr. */
/* 195px column minimum is derived, not guessed: the longest compound-break fragment
   ("Gefährdungs") measures 82px, and a tile spends 105px on column padding, tile padding,
   icon, gap and the dot gutter before any text. Below this the fragment cannot fit, the
   soft hyphen is unreachable and the label degrades to a character break. */
.cp-phase-cols[b-oln5n77hw6] {
    display: grid;
    grid-template-columns: minmax(195px, 1fr) auto minmax(195px, 1fr) auto minmax(195px, 1fr) auto minmax(195px, 1fr) auto minmax(195px, 1fr);
    grid-template-rows: auto auto 1fr;
    min-width: 1060px;
}

.cp-phase-col[b-oln5n77hw6] {
    min-width: 0;
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
    padding: 11px 9px;
    border-radius: 12px;
    border: 1px solid #E2E6EB;
}

.cp-phase-col--current[b-oln5n77hw6] {
    background: var(--color-warm-light);
    border-color: #D9CBBE;
}

.cp-phase-head[b-oln5n77hw6] {
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: start;
    padding-bottom: 4px;
}

.cp-phase-num[b-oln5n77hw6] {
    display: inline-flex;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-slate);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    flex: none;
}

.cp-phase-col--current .cp-phase-num[b-oln5n77hw6] {
    background: var(--color-terracotta);
}

.cp-phase-name[b-oln5n77hw6] {
    font-size: 12.5px;
    font-weight: 700;
    color: #1F2832;
}

.cp-phase-check[b-oln5n77hw6] {
    color: #2E7D5B;
}

.cp-phase-expl[b-oln5n77hw6] {
    font-size: 11px;
    color: #5B6573;
    line-height: 1.45;
    margin: 0;
    padding-bottom: 6px;
    align-self: start;
}

/* Spans all 3 grid rows so the arrow SVG can flex-start below the phase number */
.cp-phase-arrow[b-oln5n77hw6] {
    grid-row: span 3;
    display: flex;
    align-items: flex-start;
    padding: 6px 2px 0;
    color: #8B95A3;
}

/* Stretches to fill the third grid row (no align-self: start) so the phase note's
   margin-top: auto has height to push against and lands at the column bottom.
   min-width: 0 stops long tile labels from inflating the flex container. */
.cp-phase-tiles[b-oln5n77hw6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.cp-phase-note[b-oln5n77hw6] {
    font-size: 10.5px;
    color: #5B6573;
    border-top: 1px solid #EEF1F4;
    padding-top: 8px;
    margin-top: auto;
    line-height: 1.45;
}

.cp-phase-note b[b-oln5n77hw6] {
    color: #1F2832;
    font-weight: 600;
}

/* ── Tiles ─────────────────────────────────────────────────────────────────── */

.cp-tile-wrap[b-oln5n77hw6] {
    scroll-margin-top: 16px;
    min-width: 0;
}

.cp-tile[b-oln5n77hw6] {
    background: #ffffff;
    border: 1px solid #E2E6EB;
    border-radius: 11px;
    padding: 12px 13px;
    display: flex;
    gap: 9px;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    font-family: inherit;
    box-sizing: border-box;
    position: relative;
}

button.cp-tile[b-oln5n77hw6] {
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
}

button.cp-tile:hover[b-oln5n77hw6] {
    border-color: var(--color-slate);
}

.cp-tile--open[b-oln5n77hw6] {
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 3px rgba(196, 99, 63, 0.15);
}

/* Light terracotta outline marks a tile as "zu bearbeiten" at a glance, without
   competing with the stronger solid border --open uses for the expanded tile. */
.cp-tile--active[b-oln5n77hw6] {
    border-color: #E3A98C;
}

/* Explicit darker dashed border: the default #E2E6EB is invisible against the
   warm-light background of the current phase column. */
.cp-tile--future[b-oln5n77hw6] {
    border-style: dashed;
    border-color: #B9C2CC;
    background: rgba(255, 255, 255, 0.5);
    cursor: default;
}

.cp-tile-icon[b-oln5n77hw6] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    flex: none;
    display: grid;
    place-items: center;
    background: #E7ECF1;
    color: var(--color-slate);
    font-size: 16px;
}

.cp-tile--done .cp-tile-icon[b-oln5n77hw6] { background: #DCEEE2; color: #2E7D5B; }
.cp-tile--active .cp-tile-icon[b-oln5n77hw6] { background: var(--color-warm-light); color: var(--color-terracotta); }
.cp-tile--wait .cp-tile-icon[b-oln5n77hw6] { background: #F7EFCE; color: #8A6D1A; }
.cp-tile--future .cp-tile-icon[b-oln5n77hw6],
.cp-tile--na .cp-tile-icon[b-oln5n77hw6] { background: #EEF1F4; color: #8B95A3; }

.cp-tile-body[b-oln5n77hw6] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Column, not row: the "Zu bearbeiten" chip on its own line leaves the title text the
   full tile width. In a row the chip competed for space and squeezed the text to a few
   characters, which made hyphens:auto break after every syllable. */
.cp-tile-title[b-oln5n77hw6] {
    font-size: 13px;
    font-weight: 600;
    color: #1F2832;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
    /* leave room for the absolutely-positioned dot */
    padding-right: 16px;
}

/* manual, not auto: breaks only at the curated compound-word soft hyphens in
   TileWrapName, so "Gefahrstoff-kataster" wins over the syllable point
   "Gefahrstoffka-taster" that auto hyphenation would otherwise prefer. */
.cp-tile-title-text[b-oln5n77hw6] {
    align-self: stretch;
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: manual;
    -webkit-hyphens: manual;
}

.cp-tile-line[b-oln5n77hw6] {
    font-size: 11.5px;
    color: #5B6573;
    margin-top: 2px;
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.cp-tile--wait .cp-tile-line[b-oln5n77hw6] { color: #8A6D1A; }
.cp-tile--future .cp-tile-line[b-oln5n77hw6],
.cp-tile--na .cp-tile-line[b-oln5n77hw6] { color: #8B95A3; }

.cp-tile-chip[b-oln5n77hw6] {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: var(--color-terracotta);
    color: #fff;
    padding: 2px 7px;
    border-radius: 5px;
}

.cp-tile-dot[b-oln5n77hw6] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    /* absolute so the dot never steals horizontal space from the title text */
    position: absolute;
    top: 14px;
    right: 12px;
}

/* Extends the Cockpit's existing ok/warn/critical status vocabulary with the
   done/active/wait/future/na states from the phase-flow mockup (#492). */
.cp-tile-dot--done[b-oln5n77hw6],
.cp-light--done[b-oln5n77hw6] { background: #3DA35D; }
.cp-tile-dot--active[b-oln5n77hw6],
.cp-light--active[b-oln5n77hw6] { background: var(--color-terracotta); }
.cp-tile-dot--wait[b-oln5n77hw6],
.cp-light--wait[b-oln5n77hw6] { background: #E0A800; }
.cp-tile-dot--future[b-oln5n77hw6],
.cp-light--future[b-oln5n77hw6] { background: #9AA6B2; }
.cp-tile-dot--na[b-oln5n77hw6],
.cp-light--na[b-oln5n77hw6] { background: #C9D0D8; }

/* Same white as .hd-card (HazardsCockpitSummary.razor.css) — the donut/KPI tiles inside.
   Hierarchy comes from the border + the page's own #F5F7FA showing around the box, not from
   a fill difference. One box, one treatment for every detail view (Gefahrstoffe and BA both
   render their KPI cards inside it). */
.cp-tile-detail-full[b-oln5n77hw6] {
    margin-top: 16px;
    background: #fff;
    border: 1.5px solid var(--color-divider);
    border-radius: 12px;
    padding: 18px 20px;
}

/* BA Prüfstand KPI row — mirrors the Gefahrstoffe dashboard's .hd-kpi cards
   (Hazards/Web/Components/HazardsCockpitSummary.razor.css) so both detail views read as
   one design: white cards, big value, uppercase label, optional status tint. */
.cp-kpi-row[b-oln5n77hw6] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.cp-kpi[b-oln5n77hw6] {
    flex: 1 1 140px;
    background: #fff;
    border: 1.5px solid var(--color-divider);
    border-radius: 10px;
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.cp-kpi:hover[b-oln5n77hw6] {
    border-color: var(--color-slate);
}

.cp-kpi-value[b-oln5n77hw6] {
    /* 21px matches the reduced .hd-kpi__value so the BA and Gefahrstoffe detail views
       stay one design, sized for the compact Cockpit context (see that rule's comment). */
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-slate);
}

.cp-kpi-label[b-oln5n77hw6] {
    font-size: 11.5px;
    font-weight: 500;
    color: #5B6573;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.cp-kpi-sub[b-oln5n77hw6] {
    font-size: 11px;
    color: #8B95A3;
    margin-top: 2px;
}

/* Status tints match the Hazards KPI vocabulary (danger red / warn terracotta / ok green). */
.cp-kpi--danger[b-oln5n77hw6] {
    background: #FCEBEB;
    border-color: #F3D2D2;
}
.cp-kpi--danger .cp-kpi-value[b-oln5n77hw6],
.cp-kpi--danger .cp-kpi-label[b-oln5n77hw6],
.cp-kpi--danger .cp-kpi-sub[b-oln5n77hw6] { color: #A32D2D; }

.cp-kpi--warn[b-oln5n77hw6] {
    background: #FAEEDA;
    border-color: #EBDCBE;
}
.cp-kpi--warn .cp-kpi-value[b-oln5n77hw6],
.cp-kpi--warn .cp-kpi-label[b-oln5n77hw6],
.cp-kpi--warn .cp-kpi-sub[b-oln5n77hw6] { color: #854F0B; }

.cp-kpi--ok .cp-kpi-value[b-oln5n77hw6] { color: #0F6E56; }

/* ── Weitere Bereiche ──────────────────────────────────────────────────────── */
.cp-locked-grid[b-oln5n77hw6] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.cp-locked-card[b-oln5n77hw6] {
    border: 1px dashed #E2E6EB;
    border-radius: 10px;
    padding: 13px 15px;
    background: transparent;
}

.cp-lc-name[b-oln5n77hw6] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #5B6573;
}

.cp-lc-sub[b-oln5n77hw6] {
    font-size: 0.7rem;
    color: #8B95A3;
}

@media (max-width: 760px) {
    .cp-locked-grid[b-oln5n77hw6] {
        grid-template-columns: 1fr;
    }
}

/* ── Phasen-Flow untereinander statt seitwärts (#622, Schwelle korrigiert in #1110) ──
   .cp-phase-cols ist ein 9-spaltiges Grid (5 Phasen + 4 Pfeile) mit min-width:1060px in
   einem overflow-x:auto-Wrapper. Sobald ihm weniger als diese 1060px zur Verfügung stehen,
   liegen Phasen hinter einem Seitwärts-Scroll; der Flow wird dann zur vertikalen Kette:
   eine Phase pro Zeile, Pfeile um 90° gedreht zeigen nach unten.
   Container- statt Media-Query (#1110): maßgeblich ist der Platz, den der Flow hat, nicht
   die Fensterbreite — sonst greift die Regel auf einem 1280px-Laptop nicht, obwohl dort
   nach Abzug von Sidebar und Padding nur 976px ankommen. Schwelle und Grid-min-width sind
   damit derselbe Wert und können nicht mehr auseinanderlaufen.
   subgrid und die span-3-Platzierungen müssen dabei zurückgesetzt werden — sie beziehen
   sich auf die drei Zeilen-Tracks des Desktop-Grids, die hier nicht mehr existieren. ── */
@container (max-width: 1059px) {
    .cp-phase-scroll[b-oln5n77hw6] { overflow-x: visible; }
    .cp-phase-cols[b-oln5n77hw6] {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        min-width: 0;
        gap: 0;
    }
    .cp-phase-col[b-oln5n77hw6] { grid-row: auto; grid-template-rows: auto auto auto; }
    .cp-phase-arrow[b-oln5n77hw6] {
        grid-row: auto;
        justify-content: center;
        align-items: center;
        padding: 4px 0;
    }
    /* Pfeil zeigt im vertikalen Fluss nach unten statt nach rechts. */
    .cp-phase-arrow svg[b-oln5n77hw6] { transform: rotate(90deg); }
}
/* /Components/Pages/Datenschutz.razor.rz.scp.css */
.ds-page[b-z5yrlo10o3] {
    max-width: 720px;
}

.ds-title[b-z5yrlo10o3] {
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: 2rem;
}

.ds-section[b-z5yrlo10o3] {
    margin-bottom: 2rem;
}

.ds-heading[b-z5yrlo10o3] {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: 0.5rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--color-divider);
}

.ds-address[b-z5yrlo10o3] {
    font-style: normal;
    line-height: 1.7;
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

.ds-page p[b-z5yrlo10o3] {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.ds-page p:last-child[b-z5yrlo10o3] {
    margin-bottom: 0;
}

.ds-list[b-z5yrlo10o3] {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 0.75rem;
    padding-left: 1.25rem;
}

.ds-page a[b-z5yrlo10o3] {
    color: var(--color-primary);
    text-decoration: none;
}

.ds-page a:hover[b-z5yrlo10o3] {
    text-decoration: underline;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ── Page header ────────────────────────────────────────────────────────────── */

.home-header[b-h9dtp3axqk] {
    margin-bottom: 2rem;
}

.home-greeting[b-h9dtp3axqk] {
    font-family: var(--font-headline);
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-anthracite);
    line-height: var(--line-height-tight);
    margin-bottom: 0.25rem;
}

.home-subtitle[b-h9dtp3axqk] {
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

/* ── Onboarding card (shown when tenant has 0 substances) ────────────────────── */

.onboarding-card[b-h9dtp3axqk] {
    max-width: 520px;
    border: 1.5px solid var(--color-divider);
    border-radius: 10px;
    background-color: #fff;
}

.onboarding-card__title[b-h9dtp3axqk] {
    font-family: var(--font-headline);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--color-anthracite);
    margin-bottom: 0.5rem;
}

.onboarding-card__body[b-h9dtp3axqk] {
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

/* ── Module tile grid ────────────────────────────────────────────────────────── */

.module-tiles[b-h9dtp3axqk] {
    max-width: 900px;
}

.module-tile[b-h9dtp3axqk] {
    border: 1.5px solid var(--color-divider);
    border-radius: 10px;
    background-color: #fff;
    color: var(--color-anthracite);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.module-tile:hover[b-h9dtp3axqk],
.module-tile:focus[b-h9dtp3axqk] {
    border-color: var(--color-terracotta);
    box-shadow: 0 4px 16px rgba(196, 99, 63, 0.12);
    color: var(--color-anthracite);
}

.module-tile__icon[b-h9dtp3axqk] {
    color: var(--color-terracotta);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--color-warm-light);
    border-radius: 8px;
}

.module-tile__name[b-h9dtp3axqk] {
    font-family: var(--font-headline);
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-anthracite);
}

/* ── Status hint under tile name ─────────────────────────────────────────────── */

.module-tile__hint[b-h9dtp3axqk] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-top: -0.5rem;
}

.module-tile__hint--warn[b-h9dtp3axqk] {
    color: var(--color-terracotta);
}

.module-tile__hint--ok[b-h9dtp3axqk] {
    color: #3a7d44; /* accessible green – no design-token exists yet for success colour */
}

/* ── Preview / "In Planung" tile ─────────────────────────────────────────────── */

.module-tile--preview[b-h9dtp3axqk] {
    border-style: dashed;
    background-color: transparent;
    cursor: default;
    pointer-events: none;
}

.module-tile--preview:hover[b-h9dtp3axqk],
.module-tile--preview:focus[b-h9dtp3axqk] {
    border-color: var(--color-divider);
    box-shadow: none;
}

.module-tile__icon--preview[b-h9dtp3axqk] {
    color: var(--color-text-light);
    background-color: var(--color-divider);
}

.module-tile__name--preview[b-h9dtp3axqk] {
    color: var(--color-text-secondary);
}
/* /Components/Pages/Impressum.razor.rz.scp.css */
.imp-page[b-llasg1sbjs] {
    max-width: 720px;
}

.imp-title[b-llasg1sbjs] {
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: 2rem;
}

.imp-section[b-llasg1sbjs] {
    margin-bottom: 2rem;
}

.imp-heading[b-llasg1sbjs] {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: 0.5rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--color-divider);
}

.imp-address[b-llasg1sbjs] {
    font-style: normal;
    line-height: 1.7;
    color: var(--color-text);
}

.imp-page p[b-llasg1sbjs] {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 0;
}

.imp-page a[b-llasg1sbjs] {
    color: var(--color-primary);
    text-decoration: none;
}

.imp-page a:hover[b-llasg1sbjs] {
    text-decoration: underline;
}
/* /Components/Pages/ModulePreview.razor.rz.scp.css */
.module-preview-card[b-oggks7p0yv] {
    max-width: 520px;
    border: 1.5px solid var(--color-divider);
    border-radius: 10px;
    background-color: #fff;
}

.module-tile__icon[b-oggks7p0yv] {
    color: var(--color-terracotta);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--color-warm-light);
    border-radius: 8px;
}

.module-preview-title[b-oggks7p0yv] {
    font-family: var(--font-headline);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--color-anthracite);
    margin: 0;
}

.module-preview-hint[b-oggks7p0yv] {
    color: var(--color-text-secondary);
    margin: 0;
}
/* /Components/Pages/Profile.razor.rz.scp.css */
.profile-title[b-wypz29ea36] {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-anthracite);
    margin: 0 0 1.5rem;
}

/* Forms stay narrow; the table in the Abrechnung tab can use full width. */
.profile-form-col[b-wypz29ea36] {
    max-width: 480px;
}

.profile-table-scroll[b-wypz29ea36] {
    overflow-x: auto;
}

/* ── Profile tabs ─────────────────────────────────────────────────────────── */
.profile-tabs[b-wypz29ea36] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #E5E7EB;
    margin-bottom: 1.75rem;
}

.profile-tab[b-wypz29ea36] {
    padding: 0.6rem 1.1rem;
    font-family: var(--font-headline);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.profile-tab:hover[b-wypz29ea36] {
    color: var(--color-anthracite);
}

.profile-tab.active[b-wypz29ea36] {
    color: var(--color-terracotta);
    border-bottom-color: var(--color-terracotta);
}

.profile-section[b-wypz29ea36] {
    margin-bottom: 0;
}

.profile-section-title[b-wypz29ea36] {
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.3rem;
}

.profile-section-hint[b-wypz29ea36] {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-bottom: 1.1rem;
}

.profile-divider[b-wypz29ea36] {
    border-top: 1px solid #E5E7EB;
    margin: 1.75rem 0;
}

.field-group[b-wypz29ea36] {
    margin-bottom: 1.1rem;
}

.field-group label[b-wypz29ea36] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 0.35rem;
}

.field-input[b-wypz29ea36] {
    width: 100%;
    padding: 0.6rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}

.field-input:focus[b-wypz29ea36] {
    border-color: var(--color-slate);
    box-shadow: 0 0 0 3px rgba(58, 74, 92, 0.12);
}

.field-error[b-wypz29ea36] {
    display: block;
    font-size: 0.8rem;
    color: #B91C1C;
    margin-top: 0.3rem;
}

.alert-success[b-wypz29ea36] {
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 6px;
    padding: 0.7rem 1rem;
    font-size: 0.875rem;
    color: #166534;
    margin-bottom: 1.25rem;
}

.alert-error[b-wypz29ea36] {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 6px;
    padding: 0.7rem 1rem;
    font-size: 0.875rem;
    color: #B91C1C;
    margin-bottom: 1.25rem;
}

@media (max-width: 640px) {
    .profile-page[b-wypz29ea36] { padding: 0; }
    .profile-card[b-wypz29ea36] { padding: 1.25rem; }
}
/* /Components/Pages/SifaView.razor.rz.scp.css */
/* hd-* classes copied from RiskAssessmentsCockpitSummary.razor.css / HazardsCockpitSummary.razor.css
   (Blazor scoped CSS does not cross component boundaries — see comment there). Reused here
   verbatim so the SiFa view's todo cards read as the same design system (#662). */

.sifa-loading[b-w1ehx2v12t] {
    color: var(--color-text-secondary);
}

.sifa-hero[b-w1ehx2v12t] {
    margin-bottom: 1.5rem;
}

.sifa-title[b-w1ehx2v12t] {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-anthracite);
    margin: 0 0 0.25rem;
}

.sifa-subtitle[b-w1ehx2v12t] {
    color: var(--color-text-secondary);
    margin: 0;
}

.sifa-sections[b-w1ehx2v12t] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sifa-section-header[b-w1ehx2v12t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.sifa-section-header .hd-card__title[b-w1ehx2v12t] {
    margin-bottom: 0;
}

.sifa-count-badge[b-w1ehx2v12t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #FAEEDA;
    color: #854F0B;
    font-size: 11.5px;
    font-weight: 700;
}

.hd-card[b-w1ehx2v12t] {
    background: #fff;
    border: 1.5px solid var(--color-divider);
    border-radius: 10px;
    padding: 1.15rem;
}

.hd-card__title[b-w1ehx2v12t] {
    font-family: var(--font-headline);
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1.25rem;
}

.hd-todo-list[b-w1ehx2v12t] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.hd-todo-item[b-w1ehx2v12t] {
    border-bottom: 1px solid var(--color-divider);
}

.hd-todo-item:last-child[b-w1ehx2v12t] {
    border-bottom: none;
}

.hd-todo-link[b-w1ehx2v12t] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    color: var(--color-anthracite);
    text-decoration: none;
    transition: background 0.12s ease;
}

.hd-todo-link:hover[b-w1ehx2v12t],
.hd-todo-link:focus[b-w1ehx2v12t] {
    background: rgba(58, 74, 92, 0.04);
    color: var(--color-anthracite);
}

.hd-todo-icon-box[b-w1ehx2v12t] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.hd-todo-text[b-w1ehx2v12t] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hd-todo-title[b-w1ehx2v12t] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-anthracite);
    line-height: 1.3;
}

.hd-todo-subtitle[b-w1ehx2v12t] {
    font-size: 12px;
    color: #6B7280;
    line-height: 1.3;
}

.hd-todo-arrow[b-w1ehx2v12t] {
    flex-shrink: 0;
    color: var(--color-text-light);
    opacity: 0;
    transition: opacity 0.12s ease;
}

.hd-todo-link:hover .hd-todo-arrow[b-w1ehx2v12t],
.hd-todo-link:focus .hd-todo-arrow[b-w1ehx2v12t] {
    opacity: 1;
}

/* ── REACH-Listentyp-Chips ───────────────────────────────────────────────── */

/* One row per substance carries every affected list type (#741), so the chips wrap
   instead of stretching the row. Colours mirror .rc-list-badge on the REACH page —
   that CSS is component-scoped and cannot be reused across pages. */
.sifa-chip-row[b-w1ehx2v12t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-top: 2px;
}

.sifa-list-chip[b-w1ehx2v12t] {
    display: inline-block;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 10px;
    line-height: 1.35;
}

.sifa-list-chip--svhc[b-w1ehx2v12t] {
    background: #FCEBEB;
    color: #791F1F;
}

.sifa-list-chip--annex[b-w1ehx2v12t] {
    background: #FAEEDA;
    color: #633806;
}
/* /Components/Shared/HelpChatWidget.razor.rz.scp.css */
.help-chat[b-m55hmfze7j] {
    position: fixed;
    right: 20px;
    bottom: 20px;
    /* Above InfoTooltip's z-index 1000 — a tooltip on the page behind the panel was
       painting over the open chat (Julia catch). */
    z-index: 1100;
}

.help-chat__fab[b-m55hmfze7j] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #C4633F;
    color: #ffffff;
    border: none;
    box-shadow: 0 6px 20px rgba(31, 40, 50, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.15s;
}

.help-chat__fab:hover[b-m55hmfze7j] {
    opacity: 0.9;
}

.help-chat__fab .ti[b-m55hmfze7j] {
    font-size: 1.4rem;
}

.help-chat__panel[b-m55hmfze7j] {
    position: absolute;
    right: 0;
    bottom: 64px;
    width: 340px;
    max-width: calc(100vw - 40px);
    max-height: min(520px, calc(100vh - 120px));
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #E7EBEF;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.help-chat__header[b-m55hmfze7j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background-color: #3A4A5C;
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 0.9375rem;
}

.help-chat__header .ti[b-m55hmfze7j] {
    margin-right: 6px;
}

.help-chat__close[b-m55hmfze7j] {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 2px;
}

.help-chat__messages[b-m55hmfze7j] {
    flex: 1;
    overflow-y: auto;
    padding: 14px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 160px;
}

.help-chat__intro[b-m55hmfze7j] {
    color: #5B6573;
    font-size: 0.875rem;
    margin: 0;
}

.help-chat__bubble[b-m55hmfze7j] {
    font-size: 0.875rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    color: #1F2832;
}

/* Only the question carries a bubble. Two coloured blocks alternating down a 340px
   column is what made the panel look busy; one tinted block per exchange is enough to
   tell question from answer, and the answer gets the full width to read in. */
.help-chat__bubble--user[b-m55hmfze7j] {
    align-self: flex-end;
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px 12px 4px 12px;
    background-color: #EFE3DC;
}

.help-chat__bubble--assistant[b-m55hmfze7j] {
    align-self: stretch;
}

.help-chat__bubble--pending[b-m55hmfze7j] {
    color: #8B95A3;
    font-style: italic;
}

.help-chat__hint[b-m55hmfze7j] {
    margin: 0;
    padding: 6px 14px;
    font-size: 0.8125rem;
    color: #A32D2D;
    background-color: #FCEBEB;
}

.help-chat__input-row[b-m55hmfze7j] {
    display: flex;
    gap: 8px;
    padding: 10px 14px 8px;
    border-top: 1px solid #EEF1F4;
    background-color: #FAFBFC;
}

.help-chat__input[b-m55hmfze7j] {
    flex: 1;
    border: 1px solid #EEF1F4;
    border-radius: 6px;
    padding: 8px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    color: #1F2832;
}

.help-chat__input:disabled[b-m55hmfze7j] {
    background-color: #F5F7FA;
}

.help-chat__send[b-m55hmfze7j] {
    padding: 6px 12px;
}

@media (max-width: 480px) {
    .help-chat__panel[b-m55hmfze7j] {
        width: calc(100vw - 24px);
        right: -8px;
    }
}

/* Haftungshinweis: derselbe Text wie überall, aber als leise Fußnote statt als Warnung.
   Auf den Modulseiten steht er über einem Ergebnis und darf auffallen; hier steht er unter
   jeder Antwort und wog optisch so schwer wie der Inhalt. Das Warndreieck entfällt (es liest
   sich als Alarm, gemeint ist ein Dauerhinweis), die Schrift wird kleiner und grauer, und
   align-items:flex-start setzt das ⓘ auf die erste Zeile statt es neben einem vierzeiligen
   Absatz mittig schweben zu lassen. Der Wortlaut aus #640 und das ⓘ mit dem vollen
   Rechtstext bleiben unverändert — leiser, nicht weniger. LiabilityDisclaimer.razor rendert
   ein <div class="ld-hint">, nicht ein <p> — der Selektor war deshalb nie wirksam (#1088),
   korrigiert auf .ld-hint. Das horizontale Padding (14px) fluchtet damit mit
   .help-chat__input-row darüber. */
[b-m55hmfze7j] .ld-hint {
    align-items: flex-start;
    margin: 0;
    padding: 0 14px 12px;
    background-color: #FAFBFC;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #8B95A3;
}

/* Der 240px breite InfoTooltip im Haftungshinweis ist am Icon zentriert und ragt im nur
   340px breiten Panel über dessen rechten Rand hinaus. Das macht das overflow:hidden-Panel
   horizontal scrollbar, und ein Fokuswechsel scrollt es sichtbar zur Seite (Header und
   Nachrichten stehen dann versetzt). Hier rechtsbündig verankern, damit kein Überhang
   entsteht. Höhere Spezifität als die Regel in InfoTooltip.razor.css, damit sie unabhängig
   von der Bundle-Reihenfolge gewinnt. */
[b-m55hmfze7j] .it-wrapper .it-text {
    left: auto;
    right: 0;
    transform: none;
}