/* /Components/Account/Pages/Manage/Subscription.razor.rz.scp.css */
/* CSS for Subscription component */
/* Nur die schreibgeschützte Vertragsübersicht innerhalb von Mein Konto. */
.subscription-account[b-kpy5onz8np] {
    width: 100%;
    max-width: 100%;
    color: #172033;
}

.subscription-account-heading[b-kpy5onz8np] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.subscription-account-eyebrow[b-kpy5onz8np] {
    color: #326ef2;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    margin-bottom: .4rem;
}

.subscription-account-heading h3[b-kpy5onz8np] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
}

.subscription-account-heading p[b-kpy5onz8np] {
    margin: .35rem 0 0;
    color: #64748b;
    font-size: .9rem;
}

.subscription-account-status[b-kpy5onz8np] {
    display: inline-flex;
    flex-shrink: 0;
    padding: .45rem .75rem;
    border-radius: 999px;
    background: #e9f4ef;
    border: 1px solid #c9e6d6;
    color: #18744a;
    font-size: .78rem;
    font-weight: 800;
}

.subscription-account-highlight[b-kpy5onz8np] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: 15px;
    background: linear-gradient(115deg, #152442, #2b4f94);
    color: white;
}

.subscription-account-highlight-label[b-kpy5onz8np] {
    display: block;
    color: #b9d1f7;
    font-size: .7rem;
    letter-spacing: .09em;
    font-weight: 800;
}

.subscription-account-plan[b-kpy5onz8np] {
    margin: .35rem 0;
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    line-height: 1.1;
    font-weight: 850;
}

.subscription-account-company[b-kpy5onz8np] {
    color: #d6e5fb;
    font-size: .87rem;
}

.subscription-account-access[b-kpy5onz8np] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .8rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.1);
    text-align: right;
}

    .subscription-account-access span[b-kpy5onz8np] {
        color: #cfe0f9;
        font-size: .77rem;
    }

    .subscription-account-access strong[b-kpy5onz8np] {
        font-size: .98rem;
    }

.subscription-account-facts[b-kpy5onz8np] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    margin: 1rem 0;
}

.subscription-account-fact[b-kpy5onz8np] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 1.05rem 1.15rem;
    border-radius: 12px;
    border: 1px solid #dce5ef;
    background: #fbfcff;
}

    .subscription-account-fact span[b-kpy5onz8np] {
        color: #64748b;
        font-size: .8rem;
    }

    .subscription-account-fact strong[b-kpy5onz8np] {
        font-size: .98rem;
        color: #172033;
    }

.subscription-account-notice[b-kpy5onz8np] {
    padding: 1rem 1.15rem;
    margin: 1rem 0;
    background: #f0f6ff;
    border: 1px solid #d5e5ff;
    border-radius: 12px;
    color: #415773;
    font-size: .88rem;
    line-height: 1.6;
}

.subscription-account-footer[b-kpy5onz8np] {
    padding-top: 1.1rem;
    margin-top: 1.2rem;
    border-top: 1px solid #e4eaf3;
}

    .subscription-account-footer h4[b-kpy5onz8np] {
        font-size: 1rem;
        margin: 0 0 .35rem;
        font-weight: 800;
    }

    .subscription-account-footer p[b-kpy5onz8np] {
        color: #64748b;
        font-size: .88rem;
        line-height: 1.6;
        margin: 0;
    }

@media (max-width: 640px) {
    .subscription-account-heading[b-kpy5onz8np], .subscription-account-highlight[b-kpy5onz8np] {
        flex-direction: column;
        align-items: stretch;
    }

    .subscription-account-access[b-kpy5onz8np] {
        text-align: left;
    }

    .subscription-account-facts[b-kpy5onz8np] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Account/Shared/ManageLayout.razor.rz.scp.css */
/* =========================================================
   CleanDation – Mein Konto
   Gilt für Profil, E-Mail und Passwort
   ========================================================= */


.account-manage-page[b-61khq96pza] {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem 0 3rem;
    color: #172033;
    box-sizing: border-box;
}


/* =========================================================
   Seitenkopf
   ========================================================= */

.account-manage-header[b-61khq96pza] {
    margin-bottom: 1.6rem;
}

.account-manage-eyebrow[b-61khq96pza] {
    margin-bottom: 0.45rem;
    color: #0d6efd;
    font-size: 0.77rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.account-manage-header h1[b-61khq96pza] {
    margin: 0;
    color: #172033;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 750;
    line-height: 1.2;
}

.account-manage-header p[b-61khq96pza] {
    margin: 0.55rem 0 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* =========================================================
   Gemeinsame Kontokarte
   ========================================================= */


.account-manage-workspace[b-61khq96pza] {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}


.account-manage-card[b-61khq96pza] {
    width: 100%;
    min-width: 0;
    padding: 1.6rem;
    background: linear-gradient( 115deg, #ffffff 0%, #f1f6ff 30%, #dfeaff 65%, #cddfff 100% );
    border: 1px solid #c4d8f8;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.055);
}

.account-manage-card-heading[b-61khq96pza] {
    margin-bottom: 1.25rem;
}

    .account-manage-card-heading h2[b-61khq96pza] {
        margin: 0;
        color: #172033;
        font-size: 1.3rem;
        font-weight: 750;
    }

    .account-manage-card-heading p[b-61khq96pza] {
        margin: 0.4rem 0 0;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.55;
    }

/* =========================================================
   Navigation – Profil / E-Mail / Passwort
   ========================================================= */

.account-manage-tabs[b-61khq96pza] {
    margin-bottom: 1.5rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.3);
}

    /* Verschiedene Bootstrap-Navigationslayouts unterstützen */

    .account-manage-tabs[b-61khq96pza]  .nav {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.7rem;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
    }

    .account-manage-tabs[b-61khq96pza]  .nav-item {
        margin: 0;
    }

    .account-manage-tabs[b-61khq96pza]  .nav-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 45px;
        padding: 0.65rem 1.1rem;
        color: #475569;
        background: rgba(255, 255, 255, 0.82);
        border: 1px solid #cddcf0;
        border-radius: 10px;
        font-size: 0.88rem;
        font-weight: 750;
        line-height: 1.35;
        text-align: center;
        text-decoration: none;
        transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }

        .account-manage-tabs[b-61khq96pza]  .nav-link:hover {
            color: #0d6efd;
            background: #edf5ff;
            border-color: #0d6efd;
            text-decoration: none;
        }

        .account-manage-tabs[b-61khq96pza]  .nav-link.active,
        .account-manage-tabs[b-61khq96pza]  .nav-link[aria-current="page"] {
            color: #ffffff;
            background: #0d6efd;
            border-color: #0d6efd;
            box-shadow: 0 4px 12px rgba(13, 110, 253, 0.16);
        }

            .account-manage-tabs[b-61khq96pza]  .nav-link.active:hover,
            .account-manage-tabs[b-61khq96pza]  .nav-link[aria-current="page"]:hover {
                color: #ffffff;
                background: #0957c3;
                border-color: #0957c3;
            }

/* =========================================================
   Inhaltsbereich
   ========================================================= */

.account-manage-content[b-61khq96pza] {
    width: 100%;
    min-width: 0;
}

    /* Überschriften aus den Identity-Unterseiten */

    .account-manage-content[b-61khq96pza]  h1,
    .account-manage-content[b-61khq96pza]  h2,
    .account-manage-content[b-61khq96pza]  h3,
    .account-manage-content[b-61khq96pza]  h4 {
        color: #172033;
        font-weight: 750;
        line-height: 1.3;
    }

    .account-manage-content[b-61khq96pza]  h1 {
        margin: 0 0 0.5rem;
        font-size: 1.55rem;
    }

    .account-manage-content[b-61khq96pza]  h2 {
        margin: 0 0 0.5rem;
        font-size: 1.3rem;
    }

    .account-manage-content[b-61khq96pza]  h3 {
        margin: 0 0 0.5rem;
        font-size: 1.18rem;
    }

    .account-manage-content[b-61khq96pza]  h4 {
        margin: 0 0 0.5rem;
        font-size: 1.05rem;
    }

    .account-manage-content[b-61khq96pza]  p {
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.6;
    }

    /* =========================================================
   Formulare
   ========================================================= */

    .account-manage-content[b-61khq96pza]  form {
        width: 100%;
        max-width: 100%;
    }

    .account-manage-content[b-61khq96pza]  .form-label,
    .account-manage-content[b-61khq96pza]  label {
        color: #334155;
        font-size: 0.88rem;
        font-weight: 700;
    }

    .account-manage-content[b-61khq96pza]  .form-control,
    .account-manage-content[b-61khq96pza]  .form-select {
        width: 100%;
        min-height: 49px;
        padding: 0.7rem 0.85rem;
        color: #172033;
        background-color: #ffffff;
        border: 1px solid #c7d5e6;
        border-radius: 10px;
        font-size: 0.94rem;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

        .account-manage-content[b-61khq96pza]  .form-control:focus,
        .account-manage-content[b-61khq96pza]  .form-select:focus {
            color: #172033;
            background: #ffffff;
            border-color: #0d6efd;
            outline: none;
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.13);
        }

        .account-manage-content[b-61khq96pza]  .form-control::placeholder {
            color: #94a3b8;
        }

        .account-manage-content[b-61khq96pza]  .form-control:disabled,
        .account-manage-content[b-61khq96pza]  .form-control[readonly] {
            color: #64748b;
            background: #e9eef5;
            border-color: #d4dce7;
            opacity: 1;
        }

    /* =========================================================
   Bootstrap Floating Labels
   ========================================================= */

    .account-manage-content[b-61khq96pza]  .form-floating {
        position: relative;
        width: 100%;
        margin-bottom: 1rem;
    }

        .account-manage-content[b-61khq96pza]  .form-floating > .form-control,
        .account-manage-content[b-61khq96pza]  .form-floating > .form-select {
            min-height: 58px;
            height: 58px;
            padding: 1.55rem 0.85rem 0.45rem;
            background-color: #ffffff;
        }

        .account-manage-content[b-61khq96pza]  .form-floating > label {
            padding: 0.95rem 0.85rem;
            color: #64748b;
            font-size: 0.91rem;
            font-weight: 500;
        }

            .account-manage-content[b-61khq96pza]  .form-floating > label::after {
                background: transparent;
            }

        .account-manage-content[b-61khq96pza]  .form-floating > .form-control:focus ~ label,
        .account-manage-content[b-61khq96pza]  .form-floating > .form-control:not(:placeholder-shown) ~ label {
            color: #536b8c;
            opacity: 0.85;
        }

    /* =========================================================
   Feldabstände
   ========================================================= */

    .account-manage-content[b-61khq96pza]  .mb-3 {
        margin-bottom: 1.15rem !important;
    }

    .account-manage-content[b-61khq96pza]  .input-group {
        width: 100%;
    }

        .account-manage-content[b-61khq96pza]  .input-group .form-control {
            min-width: 0;
        }

    .account-manage-content[b-61khq96pza]  .input-group-text {
        color: #198754;
        background: #effaf3;
        border: 1px solid #c7d5e6;
        border-radius: 10px;
        font-weight: 800;
    }

    /* =========================================================
   Buttons
   ========================================================= */

    .account-manage-content[b-61khq96pza]  .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 47px;
        padding: 0.7rem 1.15rem;
        border-radius: 10px;
        font-family: inherit;
        font-size: 0.9rem;
        font-weight: 750;
        line-height: 1.35;
        text-align: center;
        transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }

    .account-manage-content[b-61khq96pza]  .btn-primary {
        color: #ffffff;
        background: #0d6efd;
        border-color: #0d6efd;
    }

        .account-manage-content[b-61khq96pza]  .btn-primary:hover:not(:disabled) {
            color: #ffffff;
            background: #0957c3;
            border-color: #0957c3;
        }

    .account-manage-content[b-61khq96pza]  .btn-secondary {
        color: #475569;
        background: #ffffff;
        border-color: #94a3b8;
    }

        .account-manage-content[b-61khq96pza]  .btn-secondary:hover:not(:disabled) {
            color: #ffffff;
            background: #475569;
        }

    .account-manage-content[b-61khq96pza]  .btn-success {
        color: #ffffff;
        background: #198754;
        border-color: #198754;
    }

        .account-manage-content[b-61khq96pza]  .btn-success:hover:not(:disabled) {
            color: #ffffff;
            background: #136c43;
            border-color: #136c43;
        }

    .account-manage-content[b-61khq96pza]  .btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

    /* Breite Buttons der bestehenden Kontoseiten */

    .account-manage-content[b-61khq96pza]  button.w-100,
    .account-manage-content[b-61khq96pza]  .btn.w-100 {
        width: 100%;
    }

    /* =========================================================
   Validierung
   ========================================================= */

    .account-manage-content[b-61khq96pza]  .validation-message {
        display: block;
        margin-top: 0.35rem;
        color: #b42335;
        font-size: 0.83rem;
        font-weight: 650;
    }

    .account-manage-content[b-61khq96pza]  .validation-summary-errors {
        margin-bottom: 1rem;
        padding: 0.9rem;
        color: #a22232;
        background: #fff0f1;
        border: 1px solid #f1bdc4;
        border-radius: 10px;
        font-size: 0.88rem;
    }

    .account-manage-content[b-61khq96pza]  .input-validation-error,
    .account-manage-content[b-61khq96pza]  .form-control.invalid {
        border-color: #dc3545;
    }

        .account-manage-content[b-61khq96pza]  .input-validation-error:focus,
        .account-manage-content[b-61khq96pza]  .form-control.invalid:focus {
            box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12);
        }

    /* =========================================================
   Statusmeldungen
   ========================================================= */

    .account-manage-content[b-61khq96pza]  .alert {
        margin-bottom: 1.1rem;
        padding: 0.95rem 1rem;
        border-radius: 11px;
        font-size: 0.88rem;
        line-height: 1.55;
    }

    .account-manage-content[b-61khq96pza]  .alert-success {
        color: #166534;
        background: #e9f8ee;
        border: 1px solid #b9e0c6;
    }

    .account-manage-content[b-61khq96pza]  .alert-danger {
        color: #a22232;
        background: #fff0f1;
        border: 1px solid #f1bdc4;
    }

    .account-manage-content[b-61khq96pza]  .alert-warning {
        color: #805900;
        background: #fff3cf;
        border: 1px solid #efd28b;
    }

    .account-manage-content[b-61khq96pza]  .text-danger {
        color: #b42335 !important;
    }

    .account-manage-content[b-61khq96pza]  .text-success {
        color: #198754 !important;
    }

    .account-manage-content[b-61khq96pza]  .text-muted {
        color: #64748b !important;
    }

    /* =========================================================
   Links und Trennlinien
   ========================================================= */

    .account-manage-content[b-61khq96pza]  a:not(.btn) {
        color: #0d6efd;
        text-decoration: none;
    }

        .account-manage-content[b-61khq96pza]  a:not(.btn):hover {
            color: #0957c3;
            text-decoration: underline;
        }

    .account-manage-content[b-61khq96pza]  hr {
        margin: 1.5rem 0;
        border: 0;
        border-top: 1px solid #d0ddec;
        opacity: 1;
    }

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {

    .account-manage-page[b-61khq96pza] {
        max-width: 100%;
    }

    .account-manage-workspace[b-61khq96pza] {
        max-width: 850px;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .account-manage-page[b-61khq96pza] {
        padding: 0.5rem 0 1.5rem;
    }

    .account-manage-header[b-61khq96pza] {
        margin-bottom: 1.2rem;
    }

        .account-manage-header h1[b-61khq96pza] {
            font-size: 1.9rem;
        }

        .account-manage-header p[b-61khq96pza] {
            font-size: 0.88rem;
        }

    .account-manage-card[b-61khq96pza] {
        padding: 1rem;
        border-radius: 14px;
    }

    .account-manage-card-heading h2[b-61khq96pza] {
        font-size: 1.2rem;
    }

    .account-manage-tabs[b-61khq96pza] {
        margin-bottom: 1.2rem;
        padding-bottom: 1rem;
    }

        .account-manage-tabs[b-61khq96pza]  .nav {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.4rem;
        }

        .account-manage-tabs[b-61khq96pza]  .nav-item {
            min-width: 0;
        }

        .account-manage-tabs[b-61khq96pza]  .nav-link {
            width: 100%;
            min-width: 0;
            min-height: 45px;
            padding: 0.6rem 0.35rem;
            font-size: 0.79rem;
            white-space: normal;
            overflow-wrap: anywhere;
        }

    .account-manage-content[b-61khq96pza]  h1 {
        font-size: 1.35rem;
    }

    .account-manage-content[b-61khq96pza]  h2 {
        font-size: 1.18rem;
    }

    .account-manage-content[b-61khq96pza]  h3 {
        font-size: 1.08rem;
    }

    .account-manage-content[b-61khq96pza]  .form-control,
    .account-manage-content[b-61khq96pza]  .form-select {
        font-size: 1rem;
    }

    .account-manage-content[b-61khq96pza]  .btn {
        min-height: 48px;
    }
}

/* =========================================================
   Sehr kleine Smartphones
   ========================================================= */

@media (max-width: 390px) {

    .account-manage-card[b-61khq96pza] {
        padding: 0.85rem;
    }

    .account-manage-tabs[b-61khq96pza]  .nav-link {
        font-size: 0.73rem;
        padding: 0.55rem 0.2rem;
    }
}



/* =========================================================
   E-Mail – Bestätigungshaken rechts am Feld
   ========================================================= */

/* Eingabefeld und Haken nebeneinander */
.account-manage-content[b-61khq96pza]  .input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}

    /* E-Mail-Feld */
    .account-manage-content[b-61khq96pza]  .input-group > .form-floating {
        flex: 1 1 auto;
        min-width: 0;
        width: 1%;
        margin-bottom: 0;
    }

    /* Haken direkt rechts */
    .account-manage-content[b-61khq96pza]  .input-group > .input-group-text {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 48px;
        width: 48px;
        min-height: 58px;
        margin: 0;
        padding: 0;
        color: #198754;
        background: #e9f8ee;
        border: 1px solid #c7d5e6;
        border-left: 0;
        border-radius: 0 10px 10px 0;
        font-size: 1.2rem;
        font-weight: 850;
    }

    /* Passende Rundung am Eingabefeld */
    .account-manage-content[b-61khq96pza]  .input-group > .form-floating > .form-control {
        border-radius: 10px 0 0 10px;
    }


/* =========================================================
   Neues zweispaltiges Kontolayout – nur diese Kontoseiten
   ========================================================= */
.account-manage-page[b-61khq96pza] {
    max-width: 1220px;
    margin: 0 auto;
}

.account-manage-workspace[b-61khq96pza] {
    display: grid;
    grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
    max-width: none;
    margin: 0;
}

.account-manage-sidebar[b-61khq96pza] {
    min-width: 0;
    padding: 1.15rem 0.7rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15,23,42,0.04);
}

.account-manage-sidebar-heading[b-61khq96pza] {
    padding: 0.25rem 0.75rem 0.7rem;
    font-size: 0.75rem;
    letter-spacing: 0.075em;
    color: #64748b;
    font-weight: 850;
}

.account-manage-card[b-61khq96pza] {
    padding: 1.7rem;
}

.account-manage-card-heading[b-61khq96pza] {
    padding-bottom: 1.1rem;
    border-bottom: 1px solid #d8e3f1;
}

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .account-manage-sidebar[b-61khq96pza]  .account-manage-nav-group + .account-manage-nav-group {
        padding-top: 0.85rem;
        border-top: 1px solid #e8edf4;
    }

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-heading {
    padding: 0 0.75rem 0.4rem;
    color: #8b98aa;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    font-weight: 800;
}

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-link,
.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-pending {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 44px;
    padding: 0.7rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #334155;
    background: transparent;
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.35;
    text-decoration: none;
}

    .account-manage-sidebar[b-61khq96pza]  .account-manage-nav-link:hover {
        background: #edf5ff;
        color: #0d6efd;
        text-decoration: none;
    }

    .account-manage-sidebar[b-61khq96pza]  .account-manage-nav-link.active {
        background: #e8f1ff;
        color: #0957c3;
        border-color: #c8defb;
        font-weight: 800;
    }

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-symbol {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 23px;
    min-width: 23px;
    color: #64748b;
    font-size: 1.05rem;
    font-weight: 800;
}

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-link.active .account-manage-nav-symbol {
    color: #0d6efd;
}

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-pending {
    flex-wrap: wrap;
    color: #8b98aa;
    cursor: not-allowed;
}

    .account-manage-sidebar[b-61khq96pza]  .account-manage-nav-pending small {
        margin-left: auto;
        font-size: 0.66rem;
        color: #94a3b8;
        white-space: nowrap;
    }

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-danger {
    color: #b45360;
}

.account-manage-content[b-61khq96pza]  .row > .col-xl-6 {
    width: 100%;
    max-width: 610px;
}

@media (max-width: 950px) {
    .account-manage-workspace[b-61khq96pza] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .account-manage-sidebar[b-61khq96pza] {
        padding: 0.95rem;
    }

        .account-manage-sidebar[b-61khq96pza]  .account-manage-nav {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.75rem;
        }
}

@media (max-width: 767.98px) {
    .account-manage-sidebar[b-61khq96pza]  .account-manage-nav {
        display: flex;
    }

    .account-manage-card[b-61khq96pza] {
        padding: 1rem;
    }

    .account-manage-sidebar[b-61khq96pza]  .account-manage-nav-link,
    .account-manage-sidebar[b-61khq96pza]  .account-manage-nav-pending {
        min-height: 44px;
    }
}

/* =========================================================
   PREMIUM-KONTOLAYOUT – gezielte visuelle Aufwertung
   Die bestehenden Identity-Formulare und ihre Styles bleiben erhalten.
   ========================================================= */

.account-manage-page[b-61khq96pza] {
    max-width: 1320px;
    padding: 1.2rem 0 3.5rem;
}

.account-manage-header[b-61khq96pza] {
    margin-bottom: 1.65rem;
}

.account-manage-header-label[b-61khq96pza] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.65rem;
    color: #2563eb;
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.1em;
}

.account-manage-header-dot[b-61khq96pza] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #20bda7;
    box-shadow: 0 0 0 4px rgba(32, 189, 167, 0.12);
}

.account-manage-header h1[b-61khq96pza] {
    font-size: clamp(2.15rem, 3.1vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.035em;
}

.account-manage-header p[b-61khq96pza] {
    margin-top: 0.45rem;
    font-size: 0.98rem;
}

.account-manage-workspace[b-61khq96pza] {
    grid-template-columns: minmax(265px, 300px) minmax(0, 1fr);
    gap: 1.45rem;
    align-items: start;
}

.account-manage-sidebar[b-61khq96pza] {
    overflow: hidden;
    padding: 0 0 1rem;
    background: #ffffff;
    border: 1px solid #dbe4f0;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(19, 39, 73, 0.055);
}

.account-manage-sidebar-intro[b-61khq96pza] {
    display: flex;
    align-items: center;
    border-radius: 18px 18px 0 0;
    gap: 0.8rem;
    padding: 1.3rem 1.3rem 1.15rem;
    background: linear-gradient(120deg, #152442 0%, #243d72 100%);
}

.account-manage-sidebar-icon[b-61khq96pza] {
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: #e6f2ff;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 13px;
    font-size: 1.3rem;
}

.account-manage-sidebar-intro strong[b-61khq96pza],
.account-manage-sidebar-intro span:last-child[b-61khq96pza] {
    display: block;
}

.account-manage-sidebar-intro strong[b-61khq96pza] {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 800;
}

.account-manage-sidebar-intro div > span[b-61khq96pza] {
    margin-top: 0.2rem;
    color: #bacbec;
    font-size: 0.79rem;
}

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav {
    gap: 0;
    padding: 0.35rem 0.75rem 0;
}

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-group {
    gap: 0.22rem;
    padding: 0.85rem 0.25rem;
}

    .account-manage-sidebar[b-61khq96pza]  .account-manage-nav-group + .account-manage-nav-group {
        padding-top: 1rem;
        border-top: 1px solid #edf1f7;
    }

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-heading {
    padding: 0 0.65rem 0.5rem;
    color: #8594aa;
    font-size: 0.69rem;
    letter-spacing: 0.105em;
}

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-link,
.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-pending {
    gap: 0.75rem;
    min-height: 48px;
    padding: 0.7rem 0.7rem;
    border-radius: 11px;
    font-size: 0.87rem;
}

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-symbol {
    display: inline-flex;
    flex: 0 0 33px;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    color: #577095;
    background: #f0f5fc;
    border-radius: 10px;
    font-size: 1.05rem;
}

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-link {
    transition: background 0.15s ease, color 0.15s ease;
}

    .account-manage-sidebar[b-61khq96pza]  .account-manage-nav-link:hover {
        color: #154ec4;
        background: #f0f6ff;
    }

    .account-manage-sidebar[b-61khq96pza]  .account-manage-nav-link.active {
        color: #114db8;
        background: linear-gradient(105deg, #e8f1ff 0%, #eef5ff 100%);
        border-color: #c8dcfa;
        box-shadow: inset 3px 0 0 #316ef3;
    }

        .account-manage-sidebar[b-61khq96pza]  .account-manage-nav-link.active .account-manage-nav-symbol {
            color: #ffffff;
            background: #326ef2;
        }

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-text {
    flex: 1 1 auto;
    min-width: 0;
}

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-pending {
    flex-wrap: nowrap;
    color: #8290a5;
}

    .account-manage-sidebar[b-61khq96pza]  .account-manage-nav-pending .account-manage-nav-symbol {
        color: #9ba9bd;
        background: #f4f6fa;
    }

    .account-manage-sidebar[b-61khq96pza]  .account-manage-nav-pending small {
        flex: 0 0 auto;
        margin-left: 0;
        padding: 0.22rem 0.42rem;
        color: #7a8ba5;
        background: #f0f3f8;
        border-radius: 6px;
        font-size: 0.61rem;
        font-weight: 700;
        white-space: normal;
        text-align: center;
    }

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-group-danger {
    margin-top: 0.1rem;
}

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-danger {
    color: #b44a56;
    background: #fff8f8;
}

    .account-manage-sidebar[b-61khq96pza]  .account-manage-nav-danger .account-manage-nav-symbol {
        color: #be5964;
        background: #fce9ec;
    }

.account-manage-card[b-61khq96pza] {
    padding: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dbe4f0;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(19, 39, 73, 0.055);
}

.account-manage-card-heading[b-61khq96pza] {
    margin-bottom: 0;
    padding: 1.65rem 1.9rem 1.5rem;
    background: linear-gradient(115deg, #f9fbff 0%, #edf4ff 65%, #e5eeff 100%);
    border-bottom: 1px solid #dce7f7;
}

.account-manage-card-heading-top[b-61khq96pza] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.account-manage-card-heading-icon[b-61khq96pza] {
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #2563eb;
    background: #e1ecff;
    border: 1px solid #cbdfff;
    border-radius: 13px;
    font-size: 1.35rem;
}

.account-manage-card-heading .account-manage-eyebrow[b-61khq96pza] {
    margin-bottom: 0.25rem;
    font-size: 0.71rem;
}

.account-manage-card-heading h2[b-61khq96pza] {
    font-size: 1.5rem;
    letter-spacing: -0.02em;
}

.account-manage-card-heading p[b-61khq96pza] {
    margin: 0.85rem 0 0;
    max-width: 580px;
}

.account-manage-content[b-61khq96pza] {
    padding: 1.75rem 1.9rem 2rem;
}

    .account-manage-content[b-61khq96pza]  .form-control:focus,
    .account-manage-content[b-61khq96pza]  .form-select:focus {
        box-shadow: 0 0 0 3px rgba(49, 110, 243, 0.12);
    }

    .account-manage-content[b-61khq96pza]  .btn-primary {
        background: #326ef2;
        border-color: #326ef2;
        box-shadow: 0 3px 9px rgba(49, 110, 243, 0.13);
    }

@media (max-width: 950px) {
    .account-manage-workspace[b-61khq96pza] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .account-manage-sidebar[b-61khq96pza] {
        padding: 0 0 0.5rem;
    }

        .account-manage-sidebar[b-61khq96pza]  .account-manage-nav {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.4rem 0.65rem;
        }
}

@media (max-width: 767.98px) {
    .account-manage-page[b-61khq96pza] {
        padding-top: 0.5rem;
    }

    .account-manage-sidebar[b-61khq96pza]  .account-manage-nav {
        display: flex;
        flex-direction: column;
    }

    .account-manage-card-heading[b-61khq96pza] {
        padding: 1.15rem 1.15rem 1.1rem;
    }

        .account-manage-card-heading h2[b-61khq96pza] {
            font-size: 1.28rem;
        }

    .account-manage-content[b-61khq96pza] {
        padding: 1.2rem 1rem 1.5rem;
    }
}


/* =========================================================
   Kontonavigation ohne Icons – einheitliche Textausrichtung
   ========================================================= */
.account-manage-sidebar-intro[b-61khq96pza] {
    gap: 0;
}

.account-manage-card-heading-top[b-61khq96pza] {
    gap: 0;
}

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-link,
.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-pending {
    gap: 0;
    padding-left: 0.85rem;
    padding-right: 0.65rem;
}

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-text {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-pending {
    flex-wrap: wrap;
    column-gap: 0.4rem;
    row-gap: 0.35rem;
}

    .account-manage-sidebar[b-61khq96pza]  .account-manage-nav-pending small {
        margin-left: auto;
    }


/* =========================================================
   KONTONAVIGATION – konsistente linke Ausrichtung
   Überschreibt die ältere globale Navigation mit
   align-items: flex-end und flex: 0 0 auto.
   ========================================================= */
.account-manage-sidebar[b-61khq96pza]  .account-manage-nav {
    align-items: stretch;
}

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-group {
    width: 100%;
    min-width: 0;
    align-items: stretch;
}

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-link,
.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-pending {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    box-sizing: border-box;
    text-align: left;
}

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-link {
    flex: 0 1 auto;
    margin-bottom: 0;
    white-space: normal;
}

.account-manage-sidebar[b-61khq96pza]  .account-manage-nav-heading {
    text-align: left;
}


/* =========================================================
   MEIN KONTO – normales Seitenscrolling
   Die Karte wächst vollständig mit ihrem Inhalt.
   Keine feste Höhe und kein innerer Scrollcontainer.
   ========================================================= */
.account-manage-page[b-61khq96pza] {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    display: block;
}

.account-manage-workspace[b-61khq96pza] {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    align-items: start;
}

.account-manage-sidebar[b-61khq96pza] {
    position: static;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    align-self: start;
}

.account-manage-card[b-61khq96pza] {
    height: auto;
    min-height: 0;
    max-height: none;
    display: block;
    align-self: start;
    overflow: hidden; /* nur abgerundete Kartenecken, kein Scrolling */
}

.account-manage-content[b-61khq96pza] {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
}
/* /Components/Layout/AuthLayout.razor.rz.scp.css */

/* =========================================================
   CleanDation – Auth Layout
   ========================================================= */

.auth-layout[b-3a12pr3x3k] {
    --auth-navy: #111827;
    --auth-light: #F7F9FC;
    --auth-blue: #0050E8;
    --auth-accent: #80C7FF;
    display: grid;
    grid-template-columns: minmax(340px, 44%) minmax(0, 56%);
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--auth-light);
}

    .auth-layout[b-3a12pr3x3k],
    .auth-layout *[b-3a12pr3x3k] {
        box-sizing: border-box;
    }

/* =========================================================
   Linker Markenbereich
   ========================================================= */

.auth-layout-brand-panel[b-3a12pr3x3k] {
    position: relative;
    min-width: 0;
    color: #FFFFFF;
    background: var(--auth-navy);
    overflow: hidden;
}

    .auth-layout-brand-panel[b-3a12pr3x3k]::before {
        content: "";
        position: absolute;
        top: 15%;
        right: -180px;
        width: 460px;
        height: 460px;
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient( circle, rgba(0, 80, 232, 0.17) 0%, transparent 70% );
    }

.auth-layout-brand-inner[b-3a12pr3x3k] {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3rem;
    width: 100%;
    max-width: 610px;
    min-height: 100vh;
    min-height: 100dvh;
    margin-left: auto;
    padding: 3.25rem clamp(2rem, 5vw, 5.5rem);
}

.auth-layout-brand-logo-link[b-3a12pr3x3k] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    text-decoration: none;
}

.auth-layout-brand-logo[b-3a12pr3x3k] {
    display: block;
    width: auto;
    max-width: 220px;
    height: 40px;
    object-fit: contain;
}

.auth-layout-brand-content[b-3a12pr3x3k] {
    position: relative;
    z-index: 1;
    max-width: 440px;
}

    .auth-layout-brand-content h2[b-3a12pr3x3k] {
        margin: 0 0 1.5rem;
        color: #FFFFFF;
        font-size: clamp(2.1rem, 3.2vw, 3.6rem);
        font-weight: 800;
        line-height: 1.17;
        letter-spacing: -0.035em;
    }

        .auth-layout-brand-content h2 span[b-3a12pr3x3k] {
            display: block;
            color: var(--auth-accent);
        }

.auth-layout-brand-description[b-3a12pr3x3k] {
    max-width: 420px;
    margin: 0 0 2.5rem;
    color: #CCD5E3;
    font-size: 1.05rem;
    line-height: 1.85;
}

.auth-layout-benefits[b-3a12pr3x3k] {
    display: grid;
    gap: 1.4rem;
}

.auth-layout-benefit[b-3a12pr3x3k] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

    .auth-layout-benefit > span[b-3a12pr3x3k] {
        display: flex;
        flex: 0 0 27px;
        align-items: center;
        justify-content: center;
        width: 27px;
        height: 27px;
        color: #FFFFFF;
        background: var(--auth-blue);
        border-radius: 50%;
        font-size: 0.85rem;
        font-weight: 800;
    }

    .auth-layout-benefit p[b-3a12pr3x3k] {
        margin: 0;
        color: #E5EAF3;
        font-size: 0.98rem;
        font-weight: 550;
        line-height: 1.6;
    }

.auth-layout-brand-footer[b-3a12pr3x3k] {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #8F9DB2;
    font-size: 0.85rem;
    line-height: 1.6;
}

/* =========================================================
   Rechter Formularbereich
   ========================================================= */

.auth-layout-form-panel[b-3a12pr3x3k] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--auth-light);
}

/* Header */

.auth-layout-header[b-3a12pr3x3k] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    width: 100%;
    min-height: 90px;
    padding: 1.25rem clamp(1.5rem, 4vw, 4.5rem);
}

/* Das zweite Logo erscheint nur auf Mobilgeräten. */

.auth-layout-mobile-logo-link[b-3a12pr3x3k] {
    display: none;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.auth-layout-mobile-logo[b-3a12pr3x3k] {
    display: block;
    width: auto;
    max-width: 170px;
    height: 28px;
    object-fit: contain;
}

.auth-layout-back[b-3a12pr3x3k] {
    color: #52617A;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.2s ease;
}

    .auth-layout-back:hover[b-3a12pr3x3k] {
        color: var(--auth-blue);
        text-decoration: none;
    }

/* Inhalt */

.auth-layout-main[b-3a12pr3x3k] {
    display: flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding: 2rem clamp(1.5rem, 4vw, 4.5rem);
}

/* Footer */

.auth-layout-form-footer[b-3a12pr3x3k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    padding: 1.5rem clamp(1.5rem, 4vw, 4.5rem);
    color: #64748B;
    font-size: 0.82rem;
}

    .auth-layout-form-footer nav[b-3a12pr3x3k] {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 1.25rem;
    }

    .auth-layout-form-footer a[b-3a12pr3x3k] {
        color: #52617A;
        text-decoration: none;
    }

        .auth-layout-form-footer a:hover[b-3a12pr3x3k] {
            color: var(--auth-blue);
            text-decoration: underline;
        }

.auth-layout a:focus-visible[b-3a12pr3x3k] {
    outline: 3px solid var(--auth-blue);
    outline-offset: 4px;
    border-radius: 3px;
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {

    .auth-layout[b-3a12pr3x3k] {
        grid-template-columns: minmax(290px, 39%) minmax(0, 61%);
    }

    .auth-layout-brand-inner[b-3a12pr3x3k] {
        padding: 2.5rem 2rem;
    }

    .auth-layout-brand-content h2[b-3a12pr3x3k] {
        font-size: 2.25rem;
    }

    .auth-layout-header[b-3a12pr3x3k] {
        min-height: 76px;
        padding: 1.25rem 2rem;
    }

    .auth-layout-main[b-3a12pr3x3k] {
        padding: 2rem;
    }

    .auth-layout-form-footer[b-3a12pr3x3k] {
        padding: 1.5rem 2rem;
    }
}

/* =========================================================
   Smartphone und schmale Tablets
   ========================================================= */

@media (max-width: 850px) {

    .auth-layout[b-3a12pr3x3k] {
        display: block;
    }

    .auth-layout-brand-panel[b-3a12pr3x3k] {
        display: none;
    }

    .auth-layout-form-panel[b-3a12pr3x3k] {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .auth-layout-header[b-3a12pr3x3k] {
        justify-content: space-between;
        min-height: 76px;
        padding: 1.25rem 1.5rem;
    }

    .auth-layout-mobile-logo-link[b-3a12pr3x3k] {
        display: inline-flex;
    }

    .auth-layout-main[b-3a12pr3x3k] {
        align-items: flex-start;
        padding: 2rem 1.5rem 3rem;
    }

    .auth-layout-form-footer[b-3a12pr3x3k] {
        padding: 1.5rem;
    }
}

/* =========================================================
   Kleine Smartphones
   ========================================================= */

@media (max-width: 575.98px) {

    .auth-layout-header[b-3a12pr3x3k] {
        gap: 0.75rem;
        min-height: 68px;
        padding: 1rem;
    }

    .auth-layout-mobile-logo[b-3a12pr3x3k] {
        max-width: 130px;
        height: 25px;
    }

    .auth-layout-back[b-3a12pr3x3k] {
        font-size: 0.78rem;
        text-align: right;
    }

    .auth-layout-main[b-3a12pr3x3k] {
        padding: 1.5rem 1rem 2rem;
    }

    .auth-layout-form-footer[b-3a12pr3x3k] {
        gap: 0.75rem;
        padding: 1.25rem 1rem;
    }
}

/* =========================================================
   Reduzierte Animationen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .auth-layout-back[b-3a12pr3x3k] {
        transition: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* =========================================================
   CleanDation – Hauptlayout
   ========================================================= */

.page[b-8ghl1gz30n] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
}

.main-content[b-8ghl1gz30n] {
    flex: 1;
    width: 100%;
    min-width: 0;
    background-color: var(--cleandation-background);
}

.page-content[b-8ghl1gz30n] {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}


/* =========================================================
   Angemeldeter Bereich – Sidebar
   ========================================================= */

.sidebar[b-8ghl1gz30n] {
    background-color: #111827;
}


/* =========================================================
   Öffentlicher Bereich
   ========================================================= */

.page-public[b-8ghl1gz30n] {
    width: 100%;
}

.public-main-content[b-8ghl1gz30n] {
    width: 100%;
}

.public-page-content[b-8ghl1gz30n] {
    width: 100%;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 640.98px) {

    .page-content[b-8ghl1gz30n] {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /*
       Öffentliche Seiten bestimmen ihren Abstand selbst.
       Dadurch bekommt insbesondere die Startseite
       keinen unnötigen seitlichen Rand.
    */

    .public-page-content[b-8ghl1gz30n] {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
}


/* =========================================================
   Desktop
   ========================================================= */

@media (min-width: 641px) {

    .page-authenticated[b-8ghl1gz30n] {
        flex-direction: row;
    }

    .sidebar[b-8ghl1gz30n] {
        position: sticky;
        top: 0;
        width: 240px;
        min-width: 240px;
        height: 100vh;
        overflow: hidden;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        box-shadow: 10px 0 24px rgba(15, 23, 42, 0.16);
    }

    .page-authenticated .page-content[b-8ghl1gz30n] {
        padding-left: 2rem;
        padding-right: 2rem;
    }


    /*
       Ohne Anmeldung gibt es keine Sidebar und keine
       künstliche Inhaltsbegrenzung durch das Layout.
    */

    .page-public[b-8ghl1gz30n] {
        display: block;
    }

    .public-main-content[b-8ghl1gz30n] {
        width: 100%;
    }

    .public-page-content[b-8ghl1gz30n] {
        width: 100%;
        max-width: none;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }
}


/* =========================================================
   Blazor Fehlerleiste
   ========================================================= */

#blazor-error-ui[b-8ghl1gz30n] {
    color-scheme: light only;
    display: none;
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    padding: 0.85rem 3rem 0.85rem 1rem;
    color: #842029;
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
    box-sizing: border-box;
    z-index: 1000;
}

    #blazor-error-ui .reload[b-8ghl1gz30n] {
        margin-left: 0.5rem;
        color: #842029;
        font-weight: 700;
    }

    #blazor-error-ui .dismiss[b-8ghl1gz30n] {
        position: absolute;
        top: 0.7rem;
        right: 1rem;
        cursor: pointer;
        font-size: 1.1rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */

/* =========================================================
   CleanDation – Sidebar
   Kompakte, professionelle Navigation
   ========================================================= */

/* =========================================================
   Logo-Bereich
   ========================================================= */

.brand-row[b-co9nihliok] {
    min-height: 72px;
    display: flex;
    align-items: center;
    padding: 0 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-link[b-co9nihliok] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

    .brand-link:hover[b-co9nihliok] {
        color: inherit;
        text-decoration: none;
    }

.brand-logo[b-co9nihliok] {
    display: block;
    width: 155px;
    max-width: 100%;
    height: auto;
    flex-shrink: 1;
    object-fit: contain;
}

/* =========================================================
   Mobile Menübutton
   ========================================================= */

.navbar-toggler[b-co9nihliok] {
    appearance: none;
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center / 1.5rem;
    background-color: rgba(255, 255, 255, 0.08);
}

    .navbar-toggler:hover[b-co9nihliok] {
        background-color: rgba(255, 255, 255, 0.14);
    }

    .navbar-toggler:checked[b-co9nihliok] {
        background-color: rgba(255, 255, 255, 0.18);
    }

/* =========================================================
   Navigationsbereich
   ========================================================= */

.nav-scrollable[b-co9nihliok] {
    display: none;
    padding: 0.45rem 0.65rem 0.75rem;
    box-sizing: border-box;
}

/* =========================================================
   Kategorien
   VERWALTUNG / DOKUMENTATION / REINIGUNG / KONTO
   ========================================================= */

.nav-section-title[b-co9nihliok] {
    margin: 0.5rem 0.7rem 0.3rem;
    color: rgba(255, 255, 255, 0.46);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.075em;
    line-height: 1.35;
}

.nav-section-spacing[b-co9nihliok] {
    margin-top: 1.2rem;
}

/* =========================================================
   Navigationspunkte
   ========================================================= */

.nav-item[b-co9nihliok] {
    margin-bottom: 4px;
    font-size: 13px;
}

    .nav-item[b-co9nihliok]  .nav-link {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 40px;
        padding: 0.70rem 0.75rem;
        color: rgba(255, 255, 255, 0.8);
        background: transparent;
        border: none;
        border-radius: 9px;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.3;
        text-decoration: none;
        transition: color 0.15s ease, background-color 0.15s ease;
    }

        /* Hover */

        .nav-item[b-co9nihliok]  .nav-link:hover {
            color: #ffffff;
            background-color: rgba(255, 255, 255, 0.08);
            text-decoration: none;
        }

        /* Aktiver Menüpunkt */

        .nav-item[b-co9nihliok]  .nav-link.active {
            color: #ffffff;
            background-color: rgba(255, 255, 255, 0.15);
            font-weight: 700;
        }

        /* Tastatur-Navigation */

        .nav-item[b-co9nihliok]  .nav-link:focus-visible {
            outline: 2px solid #60a5fa;
            outline-offset: -2px;
        }

/* =========================================================
   Links mit Zähler
   ========================================================= */

.nav-link-with-badge[b-co9nihliok] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem;
}

.nav-link-label[b-co9nihliok] {
    min-width: 0;
    flex: 1;
}

/* =========================================================
   Zähler-Badges
   ========================================================= */

.nav-count-badge[b-co9nihliok] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    margin-left: auto;
    padding: 0 !important;
    box-sizing: border-box;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 750;
    line-height: 1;
    text-align: center;
}

/* Laufende Reinigungen */

.nav-running-cleaning-badge[b-co9nihliok] {
    color: #ffffff;
    background-color: #0d6efd;
}

/* Offene Reinigungen */

.nav-open-cleaning-badge[b-co9nihliok] {
    color: #3d2a00;
    background-color: #f0b429;
}

/* Probleme */

.nav-issue-badge[b-co9nihliok] {
    color: #ffffff;
    background-color: #ef4454;
}

/* =========================================================
   Kontobereich
   ========================================================= */

.account-section[b-co9nihliok] {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

    .account-section .nav-section-title[b-co9nihliok] {
        margin-top: 0.3rem;
        margin-bottom: 0.35rem;
    }

/* Abmelden */

.logout-item form[b-co9nihliok] {
    width: 100%;
    margin: 0;
}

.logout-item[b-co9nihliok]  .logout-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 38px;
    padding: 0.48rem 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    background: transparent;
    border: none;
    border-radius: 9px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

    .logout-item[b-co9nihliok]  .logout-button:hover {
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.08);
    }

/* =========================================================
   Menü öffnen
   ========================================================= */

.navbar-toggler:checked ~ .nav-scrollable[b-co9nihliok] {
    display: block;
}

/* =========================================================
   Desktop
   ========================================================= */

@media (min-width: 641px) {

    .navbar-toggler[b-co9nihliok] {
        display: none;
    }

    .nav-scrollable[b-co9nihliok] {
        display: block;
        height: calc(100vh - 72px);
        height: calc(100dvh - 72px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
    }

        /* Chrome und Edge */

        .nav-scrollable[b-co9nihliok]::-webkit-scrollbar {
            width: 5px;
        }

        .nav-scrollable[b-co9nihliok]::-webkit-scrollbar-track {
            background: transparent;
        }

        .nav-scrollable[b-co9nihliok]::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.18);
            border-radius: 10px;
        }

            .nav-scrollable[b-co9nihliok]::-webkit-scrollbar-thumb:hover {
                background: rgba(255, 255, 255, 0.32);
            }
}

/* =========================================================
   Kleine Laptop-Bildschirme
   Kompaktere Abstände bei wenig Höhe
   ========================================================= */

@media (min-width: 641px) and (max-height: 800px) {

    .brand-row[b-co9nihliok] {
        min-height: 64px;
    }

    .brand-logo[b-co9nihliok] {
        width: 148px;
    }

    .nav-scrollable[b-co9nihliok] {
        height: calc(100vh - 64px);
        height: calc(100dvh - 64px);
        padding-top: 0.3rem;
        padding-bottom: 0.45rem;
    }

    .nav-item[b-co9nihliok] {
        margin-bottom: 2px;
    }

        .nav-item[b-co9nihliok]  .nav-link {
            min-height: 35px;
            padding: 0.60rem 0.7rem;
            font-size: 13.5px;
        }

    .nav-section-spacing[b-co9nihliok] {
        margin-top: 0.65rem;
    }

    .nav-section-title[b-co9nihliok] {
        margin-top: 0.35rem;
        margin-bottom: 0.25rem;
        font-size: 9.5px;
    }

    .account-section[b-co9nihliok] {
        margin-top: 0.5rem;
        padding-top: 0.4rem;
    }

    .logout-item[b-co9nihliok]  .logout-button {
        min-height: 35px;
        padding: 0.4rem 0.7rem;
        font-size: 12.5px;
    }
}

/* =========================================================
   Smartphone
   Große Touch-Flächen beibehalten
   ========================================================= */

@media (max-width: 640.98px) {

    .brand-row[b-co9nihliok] {
        min-height: 72px;
        padding-left: 0.85rem;
        padding-right: 4.5rem;
    }

    .brand-logo[b-co9nihliok] {
        width: 155px;
        max-width: 100%;
        height: auto;
    }

    .nav-scrollable[b-co9nihliok] {
        padding: 0.5rem 0.75rem 1rem;
        max-height: calc(100vh - 72px);
        max-height: calc(100dvh - 72px);
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
    }

    .nav-item[b-co9nihliok]  .nav-link {
        min-height: 48px;
        padding: 0.7rem 0.8rem;
        font-size: 14px;
    }

    .logout-item[b-co9nihliok]  .logout-button {
        min-height: 48px;
        padding: 0.7rem 0.8rem;
        font-size: 14px;
    }

    .nav-section-spacing[b-co9nihliok] {
        margin-top: 1rem;
    }

    .account-section[b-co9nihliok] {
        margin-top: 1rem;
        padding-top: 0.65rem;
    }

    .nav-count-badge[b-co9nihliok] {
        flex-basis: 22px;
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
    }
}
/* /Components/Layout/PlatformLayout.razor.rz.scp.css */

/* =========================================================
   CLEANDATION – PLATFORM ADMIN LAYOUT
   ========================================================= */

.platform-layout[b-go5tsqm1pz] {
    display: flex;
    width: 100%;
    min-height: 100vh;
    background: #f4f7fb;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.platform-sidebar[b-go5tsqm1pz] {
    display: flex;
    flex-direction: column;
    flex: 0 0 258px;
    width: 258px;
    min-width: 258px;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.4rem 0.8rem 1rem;
    color: #ffffff;
    background: #101827;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}

/* =========================================================
   BRANDING
   ========================================================= */

.platform-brand[b-go5tsqm1pz] {
    padding: 0.3rem 0.7rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}

.platform-logo-link[b-go5tsqm1pz],
.platform-mobile-brand[b-go5tsqm1pz] {
    display: inline-flex;
    align-items: baseline;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    font-size: 1.75rem;
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: -0.065em;
}

    .platform-logo-link:hover[b-go5tsqm1pz],
    .platform-mobile-brand:hover[b-go5tsqm1pz] {
        text-decoration: none;
    }

.platform-logo[b-go5tsqm1pz] {
    display: block;
    width: 180px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.platform-mobile-header .platform-logo[b-go5tsqm1pz] {
    width: 145px;
}

.platform-badge[b-go5tsqm1pz] {
    display: inline-flex;
    align-items: center;
    margin-top: 0.95rem;
    padding: 0.38rem 0.65rem;
    color: #b6dfff;
    background: rgba(37, 125, 219, 0.14);
    border: 1px solid rgba(91, 170, 245, 0.23);
    border-radius: 7px;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.09em;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

.platform-nav[b-go5tsqm1pz] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 1.15rem;
}

.platform-nav-group-label[b-go5tsqm1pz] {
    padding: 0.75rem 0.85rem 0.45rem;
    color: #8590a3;
    font-size: 0.64rem;
    font-weight: 850;
    letter-spacing: 0.09em;
}

.platform-nav-group-spacing[b-go5tsqm1pz] {
    margin-top: 0.85rem;
}

/*
   ::deep wird benötigt, damit die per NavLink
   erzeugten a-Elemente auch mit CSS-Isolation
   zuverlässig gestylt werden.
*/

.platform-nav[b-go5tsqm1pz]  .platform-nav-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 47px;
    padding: 0.78rem 0.85rem;
    color: #c6cedb;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.89rem;
    font-weight: 650;
    line-height: 1.35;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

    .platform-nav[b-go5tsqm1pz]  .platform-nav-link:hover {
        color: #ffffff;
        background: #242f41;
    }

    .platform-nav[b-go5tsqm1pz]  .platform-nav-link.active {
        color: #ffffff;
        background: #333d4f;
        border-color: rgba(255, 255, 255, 0.055);
        font-weight: 750;
    }

        .platform-nav[b-go5tsqm1pz]  .platform-nav-link.active:hover {
            background: #3b475b;
        }

.platform-nav-icon[b-go5tsqm1pz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: #899db8;
    font-size: 1.1rem;
    line-height: 1;
}

.platform-nav[b-go5tsqm1pz]  .platform-nav-link:hover .platform-nav-icon,
.platform-nav[b-go5tsqm1pz]  .platform-nav-link.active .platform-nav-icon {
    color: #8dc8ff;
}

/* =========================================================
   KONTO
   ========================================================= */

.platform-account[b-go5tsqm1pz] {
    margin-top: auto;
    padding: 1.25rem 0.25rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.platform-account-label[b-go5tsqm1pz] {
    margin-bottom: 0.85rem;
    padding: 0 0.6rem;
    color: #8490a4;
    font-size: 0.64rem;
    font-weight: 850;
    letter-spacing: 0.09em;
}

.platform-user[b-go5tsqm1pz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    margin-bottom: 0.8rem;
    padding: 0.65rem;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 11px;
}

.platform-user-avatar[b-go5tsqm1pz] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 37px;
    height: 37px;
    color: #d8ecff;
    background: #1f4265;
    border-radius: 10px;
    font-size: 0.77rem;
    font-weight: 850;
}

.platform-user-info[b-go5tsqm1pz] {
    min-width: 0;
    flex: 1;
}

.platform-user-role[b-go5tsqm1pz] {
    color: #b7c3d4;
    font-size: 0.69rem;
    font-weight: 750;
}

.platform-user-name[b-go5tsqm1pz] {
    margin-top: 0.2rem;
    overflow: hidden;
    color: #ffffff;
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.platform-logout[b-go5tsqm1pz] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    min-height: 46px;
    padding: 0.75rem 0.85rem;
    color: #c7d1df;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    text-align: left;
    font-size: 0.87rem;
    font-weight: 700;
    cursor: pointer;
}

    .platform-logout:hover[b-go5tsqm1pz] {
        color: #ffffff;
        background: #273244;
    }

.platform-logout-icon[b-go5tsqm1pz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    font-size: 1.15rem;
}

/* =========================================================
   HAUPTINHALT
   ========================================================= */

.platform-main[b-go5tsqm1pz] {
    flex: 1;
    min-width: 0;
}

.platform-content[b-go5tsqm1pz] {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem 2.25rem 3rem;
}

/* =========================================================
   MOBILER KOPFBEREICH
   ========================================================= */

.platform-mobile-header[b-go5tsqm1pz] {
    display: none;
}

.platform-menu-toggle[b-go5tsqm1pz] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

/* =========================================================
   FEHLERLEISTE
   ========================================================= */

#blazor-error-ui[b-go5tsqm1pz] {
    color-scheme: light only;
    display: none;
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1000;
    box-sizing: border-box;
    padding: 0.85rem 3rem 0.85rem 1rem;
    color: #842029;
    background: #f8d7da;
    border: 1px solid #f5c2c7;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
}

    #blazor-error-ui .reload[b-go5tsqm1pz] {
        margin-left: 0.5rem;
        color: #842029;
        font-weight: 750;
    }

    #blazor-error-ui .dismiss[b-go5tsqm1pz] {
        position: absolute;
        top: 0.7rem;
        right: 1rem;
        font-size: 1.1rem;
        cursor: pointer;
    }

/* =========================================================
   ZUGÄNGLICHKEIT
   ========================================================= */

.platform-layout a:focus-visible[b-go5tsqm1pz],
.platform-layout button:focus-visible[b-go5tsqm1pz],
.platform-layout label:focus-visible[b-go5tsqm1pz] {
    outline: 3px solid #72b8ff;
    outline-offset: 3px;
}

.platform-menu-toggle:focus-visible ~ .platform-mobile-header
.platform-mobile-menu-button[b-go5tsqm1pz] {
    outline: 3px solid #72b8ff;
    outline-offset: 3px;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1199.98px) {

    .platform-sidebar[b-go5tsqm1pz] {
        flex-basis: 238px;
        width: 238px;
        min-width: 238px;
    }

    .platform-content[b-go5tsqm1pz] {
        padding: 1.5rem;
    }
}

/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 767.98px) {

    .platform-layout[b-go5tsqm1pz] {
        flex-direction: column;
        min-height: 100vh;
    }

    .platform-mobile-header[b-go5tsqm1pz] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        width: 100%;
        min-height: 68px;
        padding: 0.9rem 1.1rem;
        background: #101827;
        border-bottom: 1px solid rgba(255, 255, 255, 0.11);
    }

    .platform-mobile-brand[b-go5tsqm1pz] {
        font-size: 1.4rem;
    }

    .platform-mobile-menu-button[b-go5tsqm1pz] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 42px;
        padding: 0.55rem 0.8rem;
        color: #ffffff;
        background: #283449;
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 9px;
        font-size: 0.82rem;
        font-weight: 750;
        cursor: pointer;
        user-select: none;
    }

        .platform-mobile-menu-button > span[b-go5tsqm1pz] {
            font-size: 1.15rem;
        }

    .platform-sidebar[b-go5tsqm1pz] {
        width: 100%;
        min-width: 0;
        height: auto;
        max-height: 0;
        position: static;
        flex: 0 0 auto;
        overflow: hidden;
        padding: 0 1rem;
        border-right: 0;
        border-radius: 0;
        visibility: hidden;
        transition: max-height 0.2s ease, visibility 0.2s ease;
    }

        .platform-sidebar .platform-brand[b-go5tsqm1pz] {
            display: none;
        }

    .platform-menu-toggle:checked ~ .platform-sidebar[b-go5tsqm1pz] {
        max-height: 85vh;
        overflow-y: auto;
        visibility: visible;
        padding: 0.75rem 1rem 1rem;
    }

    .platform-nav[b-go5tsqm1pz] {
        margin-top: 0;
    }

    .platform-nav-group-spacing[b-go5tsqm1pz] {
        margin-top: 0.35rem;
    }

    .platform-account[b-go5tsqm1pz] {
        margin-top: 1rem;
    }

    .platform-main[b-go5tsqm1pz] {
        width: 100%;
        flex: 1 1 auto;
    }

    .platform-content[b-go5tsqm1pz] {
        padding: 1.25rem 1rem 2rem;
    }
}

/* =========================================================
   KLEINE BILDSCHIRME
   ========================================================= */

@media (max-width: 380px) {

    .platform-mobile-header[b-go5tsqm1pz] {
        padding: 0.8rem;
    }

    .platform-mobile-brand[b-go5tsqm1pz] {
        font-size: 1.25rem;
    }

    .platform-content[b-go5tsqm1pz] {
        padding: 1rem 0.75rem 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .platform-sidebar[b-go5tsqm1pz],
    .platform-nav[b-go5tsqm1pz]  .platform-nav-link,
    .platform-logout[b-go5tsqm1pz] {
        transition: none;
    }
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
.public-layout[b-78cxduclxv] {
    min-height: 100dvh;
    background: #ffffff;
}


.public-layout-main[b-78cxduclxv] {
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-4leruuv7tp],
.components-reconnect-repeated-attempt-visible[b-4leruuv7tp],
.components-reconnect-failed-visible[b-4leruuv7tp],
.components-pause-visible[b-4leruuv7tp],
.components-resume-failed-visible[b-4leruuv7tp],
.components-rejoining-animation[b-4leruuv7tp] {
    display: none;
}

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


#components-reconnect-modal[b-4leruuv7tp] {
    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-4leruuv7tp 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-4leruuv7tp {
    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/Pages/Admin/Areas/AreaCreate.razor.rz.scp.css */

/* =========================================================
   CleanDation – Neuer Bereich
   ========================================================= */

.area-create-page[b-09cph58vxl] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* Seitenkopf */

.area-create-header[b-09cph58vxl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.6rem;
}

.area-create-eyebrow[b-09cph58vxl] {
    margin-bottom: 0.4rem;
    color: #0d6efd;
    font-size: 0.77rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.area-create-eyebrow-green[b-09cph58vxl] {
    color: #198754;
}

.area-create-header h1[b-09cph58vxl] {
    margin: 0;
    color: #172033;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 750;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.area-create-header p[b-09cph58vxl] {
    margin: 0.55rem 0 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
}

    .area-create-header p strong[b-09cph58vxl] {
        color: #334155;
    }

.area-create-separator[b-09cph58vxl] {
    margin: 0 0.5rem;
    color: #94a3b8;
}

.area-create-setup[b-09cph58vxl] {
    margin-bottom: 1.5rem;
}

/* Layout */

.area-create-workspace[b-09cph58vxl] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
    gap: 1.5rem;
}

.area-create-side[b-09cph58vxl] {
    display: grid;
    gap: 1.5rem;
    min-width: 0;
}

.area-create-section[b-09cph58vxl] {
    min-width: 0;
    padding: 1.5rem;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.055);
}

/* Kräftige blaue Formularkarte */

.area-create-details[b-09cph58vxl] {
    background: linear-gradient( 115deg, #ffffff 0%, #f1f6ff 30%, #dfeaff 65%, #cddfff 100% );
    border-color: #c4d8f8;
}

/* Objektzuordnung */

.area-create-context[b-09cph58vxl] {
    background: linear-gradient( 115deg, #ffffff 0%, #f2f8ff 30%, #e4efff 65%, #d3e4ff 100% );
    border-color: #c9dcf7;
}

/* Nächster Schritt */

.area-create-next[b-09cph58vxl] {
    background: linear-gradient( 115deg, #ffffff 0%, #f1faf4 30%, #dff2e5 65%, #c6e8d2 100% );
    border-color: #bde2cb;
}

/* Kartenüberschriften */

.area-create-section-heading[b-09cph58vxl] {
    margin-bottom: 1.3rem;
}

    .area-create-section-heading h2[b-09cph58vxl] {
        margin: 0;
        color: #172033;
        font-size: 1.3rem;
        font-weight: 750;
    }

    .area-create-section-heading p[b-09cph58vxl] {
        margin: 0.45rem 0 0;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.55;
    }

/* Formularfelder */

.area-create-field[b-09cph58vxl] {
    min-width: 0;
    margin-bottom: 1.2rem;
}

    .area-create-field label[b-09cph58vxl] {
        display: block;
        margin-bottom: 0.5rem;
        color: #334155;
        font-size: 0.9rem;
        font-weight: 750;
    }

    .area-create-field .form-control[b-09cph58vxl],
    .area-create-field .form-select[b-09cph58vxl] {
        width: 100%;
        min-height: 48px;
        padding: 0.65rem 0.85rem;
        color: #172033;
        background: #ffffff;
        border: 1px solid #c7d5e6;
        border-radius: 10px;
        font-size: 0.94rem;
    }

        .area-create-field .form-control:focus[b-09cph58vxl],
        .area-create-field .form-select:focus[b-09cph58vxl] {
            border-color: #0d6efd;
            box-shadow: 0 0 0 3px rgba(13,110,253,0.13);
        }

.area-create-field-help[b-09cph58vxl] {
    margin: 0.45rem 0 0;
    color: #64748b;
    font-size: 0.83rem;
    line-height: 1.5;
}

.area-create-validation[b-09cph58vxl] {
    display: block;
    margin: 0.5rem 0;
    color: #b42335;
    font-size: 0.88rem;
}

.area-create-divider[b-09cph58vxl] {
    height: 1px;
    margin: 1.7rem 0;
    background: rgba(148,163,184,0.35);
}

/* Rhythmus */

.area-create-schedule-panel[b-09cph58vxl] {
    margin-top: 1.1rem;
    padding: 1.15rem;
    background: rgba(255,255,255,0.7);
    border: 1px solid #cbdcf3;
    border-radius: 12px;
}

    .area-create-schedule-panel h3[b-09cph58vxl] {
        margin: 0;
        color: #172033;
        font-size: 1rem;
        font-weight: 800;
    }

    .area-create-schedule-panel > p[b-09cph58vxl] {
        margin: 0.4rem 0 1rem;
        color: #64748b;
        font-size: 0.86rem;
        line-height: 1.55;
    }

.area-create-field-grid[b-09cph58vxl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

/* Reinigungstage */

.area-create-days-grid[b-09cph58vxl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.area-create-day[b-09cph58vxl] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 48px;
    margin: 0;
    padding: 0.75rem 0.9rem;
    color: #334155;
    background: #ffffff;
    border: 1px solid #d0ddec;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

    .area-create-day:hover[b-09cph58vxl] {
        background: #f2f7ff;
        border-color: #90b8f4;
    }

    .area-create-day input[type="checkbox"][b-09cph58vxl] {
        flex-shrink: 0;
        width: 19px;
        height: 19px;
        margin: 0;
        accent-color: #0d6efd;
        cursor: pointer;
    }

    .area-create-day:has(input:checked)[b-09cph58vxl] {
        background: #e8f1ff;
        border-color: #85b4fa;
        color: #0b57c5;
    }

/* Hinweise */

.area-create-info-note[b-09cph58vxl] {
    margin-bottom: 1.2rem;
    padding: 0.95rem;
    background: #edf5ff;
    border: 1px solid #c8defc;
    border-radius: 10px;
    color: #334155;
    font-size: 0.88rem;
    line-height: 1.5;
}

    .area-create-info-note strong[b-09cph58vxl] {
        color: #245fc7;
        font-weight: 800;
    }

    .area-create-info-note p[b-09cph58vxl] {
        margin: 0.4rem 0 0;
        color: #53657d;
        font-size: 0.85rem;
    }

.area-create-month-preview[b-09cph58vxl] {
    margin: 0;
}

.area-create-warning[b-09cph58vxl] {
    padding: 0.95rem;
    color: #805900;
    background: #fff3cf;
    border: 1px solid #efd28b;
    border-radius: 10px;
    font-size: 0.88rem;
}

.area-create-error[b-09cph58vxl] {
    margin: 1rem 0;
    padding: 0.95rem;
    color: #a22232;
    background: #fff0f1;
    border: 1px solid #f1bdc4;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 650;
}

/* Buttons */

.area-create-actions[b-09cph58vxl] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.area-create-button[b-09cph58vxl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 46px;
    padding: 0.7rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

    .area-create-button:disabled[b-09cph58vxl] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.area-create-button-primary[b-09cph58vxl] {
    color: #ffffff;
    background: #0d6efd;
    border-color: #0d6efd;
}

    .area-create-button-primary:hover:not(:disabled)[b-09cph58vxl] {
        color: #ffffff;
        background: #0957c3;
    }

.area-create-button-secondary[b-09cph58vxl] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .area-create-button-secondary:hover[b-09cph58vxl] {
        color: #ffffff;
        background: #475569;
        text-decoration: none;
    }

/* Objekt- und Kundeninformationen */

.area-create-context-item[b-09cph58vxl] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    padding: 1rem;
    background: rgba(255,255,255,0.82);
    border: 1px solid #cfddf0;
    border-radius: 10px;
}

    .area-create-context-item > span[b-09cph58vxl] {
        color: #64748b;
        font-size: 0.73rem;
        font-weight: 800;
        letter-spacing: 0.045em;
    }

    .area-create-context-item strong[b-09cph58vxl] {
        color: #172033;
        font-size: 0.95rem;
        font-weight: 750;
        overflow-wrap: anywhere;
    }

/* Nächster Schritt */

.area-create-next-box[b-09cph58vxl] {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem;
    background: rgba(255,255,255,0.78);
    border: 1px solid #cde5d5;
    border-radius: 11px;
}

.area-create-next-icon[b-09cph58vxl] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    color: #ffffff;
    background: #198754;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: 800;
}

.area-create-next-box strong[b-09cph58vxl] {
    display: block;
    color: #172033;
    font-size: 0.95rem;
    font-weight: 800;
}

.area-create-next-box p[b-09cph58vxl] {
    margin: 0.4rem 0 0;
    color: #53657d;
    font-size: 0.85rem;
    line-height: 1.55;
}

.area-create-next-note[b-09cph58vxl] {
    margin: 1rem 0 0;
    color: #53657d;
    font-size: 0.86rem;
    line-height: 1.6;
}

/* Lade- und Fehlerzustand */

.area-create-loading[b-09cph58vxl] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

.area-create-not-found[b-09cph58vxl] {
    max-width: 760px;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
}

    .area-create-not-found h2[b-09cph58vxl] {
        margin: 0;
        color: #172033;
        font-size: 1.2rem;
        font-weight: 800;
    }

    .area-create-not-found p[b-09cph58vxl] {
        margin: 0.5rem 0 1rem;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.6;
    }

/* Tablet */

@media (max-width: 1100px) {
    .area-create-workspace[b-09cph58vxl] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .area-create-side[b-09cph58vxl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

/* Smartphone */

@media (max-width: 767.98px) {
    .area-create-page[b-09cph58vxl] {
        padding-bottom: 1rem;
    }

    .area-create-header[b-09cph58vxl] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

        .area-create-header h1[b-09cph58vxl] {
            font-size: 1.85rem;
        }

    .area-create-workspace[b-09cph58vxl],
    .area-create-side[b-09cph58vxl] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .area-create-section[b-09cph58vxl] {
        padding: 1rem;
        border-radius: 14px;
    }

    .area-create-section-heading h2[b-09cph58vxl] {
        font-size: 1.2rem;
    }

    .area-create-schedule-panel[b-09cph58vxl] {
        padding: 0.9rem;
    }

    .area-create-field-grid[b-09cph58vxl] {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .area-create-days-grid[b-09cph58vxl] {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .area-create-actions[b-09cph58vxl] {
        flex-direction: column;
        align-items: stretch;
    }

        .area-create-actions .area-create-button[b-09cph58vxl],
        .area-create-header .area-create-button[b-09cph58vxl] {
            width: 100%;
        }
}
/* /Components/Pages/Admin/Areas/AreaEdit.razor.rz.scp.css */

/* =========================================================
   CleanDation – Bereich bearbeiten
   ========================================================= */

.area-edit-page[b-g61nf7bqe4] {
    width: 100%;
    max-width: 1500px;
    padding-bottom: 2rem;
}

/* =========================================================
   Seitenkopf
   ========================================================= */

.area-edit-header[b-g61nf7bqe4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.6rem;
}

.area-edit-eyebrow[b-g61nf7bqe4] {
    margin-bottom: 0.4rem;
    color: #0d6efd;
    font-size: 0.77rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.area-edit-header h1[b-g61nf7bqe4] {
    margin: 0;
    color: #172033;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 750;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.area-edit-header p[b-g61nf7bqe4] {
    margin: 0.55rem 0 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.55;
}

    .area-edit-header p strong[b-g61nf7bqe4] {
        color: #334155;
    }

.area-edit-header-separator[b-g61nf7bqe4] {
    margin: 0 0.5rem;
    color: #94a3b8;
}

.area-edit-header-status[b-g61nf7bqe4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 32px;
    padding: 0.4rem 0.9rem;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
}

.area-edit-header-active[b-g61nf7bqe4],
.area-edit-header-completed[b-g61nf7bqe4] {
    background: #198754;
}

.area-edit-header-inactive[b-g61nf7bqe4] {
    background: #64748b;
}

/* =========================================================
   Seitenlayout
   ========================================================= */

.area-edit-workspace[b-g61nf7bqe4] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
    gap: 1.5rem;
}

.area-edit-side[b-g61nf7bqe4] {
    display: grid;
    gap: 1.5rem;
    min-width: 0;
}

.area-edit-section[b-g61nf7bqe4] {
    min-width: 0;
    padding: 1.5rem;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15,23,42,0.055);
}

/* Hauptkarte: kräftiges Blau */

.area-edit-details[b-g61nf7bqe4] {
    background: linear-gradient( 115deg, #ffffff 0%, #f1f6ff 30%, #dfeaff 65%, #cddfff 100% );
    border-color: #c4d8f8;
}

/* Status: aktiver Bereich */

.area-edit-status-section-active[b-g61nf7bqe4] {
    background: linear-gradient( 115deg, #ffffff 0%, #f1faf4 30%, #dff2e5 65%, #c6e8d2 100% );
    border-color: #bde2cb;
}

/* Status: inaktiver Bereich */

.area-edit-status-section-inactive[b-g61nf7bqe4] {
    background: linear-gradient( 115deg, #ffffff 0%, #f5f6f8 30%, #e8edf2 65%, #d9e1ea 100% );
    border-color: #d1dce6;
}

/* Zuordnungskarte */

.area-edit-context[b-g61nf7bqe4] {
    background: linear-gradient( 115deg, #ffffff 0%, #f2f8ff 30%, #e4efff 65%, #d3e4ff 100% );
    border-color: #c9dcf7;
}

/* =========================================================
   Kartenüberschriften
   ========================================================= */

.area-edit-section-heading[b-g61nf7bqe4] {
    margin-bottom: 1.35rem;
}

    .area-edit-section-heading h2[b-g61nf7bqe4] {
        margin: 0;
        color: #172033;
        font-size: 1.3rem;
        font-weight: 750;
    }

    .area-edit-section-heading p[b-g61nf7bqe4] {
        margin: 0.45rem 0 0;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.55;
    }

.area-edit-status-eyebrow[b-g61nf7bqe4],
.area-edit-eyebrow-green[b-g61nf7bqe4] {
    color: #198754;
}

.area-edit-status-section-inactive
.area-edit-status-eyebrow[b-g61nf7bqe4] {
    color: #64748b;
}

.area-edit-context-eyebrow[b-g61nf7bqe4] {
    color: #0d6efd;
}

/* =========================================================
   Formular
   ========================================================= */

.area-edit-field[b-g61nf7bqe4] {
    min-width: 0;
    margin-bottom: 1.2rem;
}

    .area-edit-field label[b-g61nf7bqe4] {
        display: block;
        margin-bottom: 0.5rem;
        color: #334155;
        font-size: 0.9rem;
        font-weight: 750;
    }

    .area-edit-field .form-control[b-g61nf7bqe4],
    .area-edit-field .form-select[b-g61nf7bqe4] {
        width: 100%;
        min-height: 48px;
        padding: 0.65rem 0.85rem;
        color: #172033;
        background: #ffffff;
        border: 1px solid #c7d5e6;
        border-radius: 10px;
        font-size: 0.94rem;
    }

        .area-edit-field .form-control:focus[b-g61nf7bqe4],
        .area-edit-field .form-select:focus[b-g61nf7bqe4] {
            border-color: #0d6efd;
            box-shadow: 0 0 0 3px rgba(13,110,253,0.13);
        }

        .area-edit-field .form-control:disabled[b-g61nf7bqe4],
        .area-edit-field .form-select:disabled[b-g61nf7bqe4] {
            color: #64748b;
            background: #f1f5f9;
            opacity: 0.85;
        }

.area-edit-field-help[b-g61nf7bqe4] {
    margin: 0.45rem 0 0;
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.5;
}

.area-edit-validation[b-g61nf7bqe4] {
    display: block;
    margin: 0.6rem 0;
    color: #b42335;
    font-size: 0.88rem;
}

.area-edit-form-divider[b-g61nf7bqe4] {
    height: 1px;
    margin: 1.7rem 0;
    background: rgba(148,163,184,0.35);
}

.area-edit-schedule-heading[b-g61nf7bqe4] {
    margin-bottom: 1.2rem;
}

/* =========================================================
   Reinigungsrhythmus
   ========================================================= */

.area-edit-schedule-panel[b-g61nf7bqe4] {
    margin-top: 1.25rem;
    padding: 1.15rem;
    background: rgba(255,255,255,0.7);
    border: 1px solid #cbdcf3;
    border-radius: 12px;
}

    .area-edit-schedule-panel h3[b-g61nf7bqe4] {
        margin: 0;
        color: #172033;
        font-size: 1rem;
        font-weight: 800;
    }

    .area-edit-schedule-panel > p[b-g61nf7bqe4] {
        margin: 0.4rem 0 1rem;
        color: #64748b;
        font-size: 0.86rem;
        line-height: 1.5;
    }

.area-edit-field-grid[b-g61nf7bqe4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

/* =========================================================
   Reinigungstage
   ========================================================= */

.area-edit-days-grid[b-g61nf7bqe4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.area-edit-day[b-g61nf7bqe4] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 48px;
    margin: 0;
    padding: 0.75rem 0.9rem;
    color: #334155;
    background: #ffffff;
    border: 1px solid #d0ddec;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .area-edit-day:hover[b-g61nf7bqe4] {
        background: #f2f7ff;
        border-color: #90b8f4;
    }

    .area-edit-day input[type="checkbox"][b-g61nf7bqe4] {
        flex-shrink: 0;
        width: 19px;
        height: 19px;
        margin: 0;
        accent-color: #0d6efd;
        cursor: pointer;
    }

    .area-edit-day:has(input:checked)[b-g61nf7bqe4] {
        background: #e8f1ff;
        border-color: #85b4fa;
        color: #0b57c5;
    }

/* =========================================================
   Hinweise
   ========================================================= */

.area-edit-info-note[b-g61nf7bqe4] {
    margin-bottom: 1.2rem;
    padding: 0.95rem;
    background: #edf5ff;
    border: 1px solid #c8defc;
    border-radius: 10px;
    color: #334155;
    font-size: 0.88rem;
    line-height: 1.5;
}

    .area-edit-info-note strong[b-g61nf7bqe4] {
        color: #245fc7;
        font-weight: 800;
    }

    .area-edit-info-note p[b-g61nf7bqe4] {
        margin: 0.4rem 0 0;
        color: #53657d;
        font-size: 0.85rem;
    }

.area-edit-month-preview[b-g61nf7bqe4] {
    margin-bottom: 0;
}

.area-edit-lock-note[b-g61nf7bqe4] {
    color: #7a5500;
    background: #fff3cf;
    border-color: #efd28b;
}

    .area-edit-lock-note strong[b-g61nf7bqe4] {
        color: #956500;
    }

.area-edit-warning-note[b-g61nf7bqe4] {
    color: #885e00;
    background: #fff3cf;
    border-color: #efd28b;
}

.area-edit-migration-note[b-g61nf7bqe4] {
    margin-top: 0.8rem;
}

.area-edit-error[b-g61nf7bqe4] {
    margin: 1rem 0;
    padding: 0.95rem;
    color: #a22232;
    background: #fff0f1;
    border: 1px solid #f1bdc4;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 650;
}

/* =========================================================
   Aktionen und Buttons
   ========================================================= */

.area-edit-actions[b-g61nf7bqe4] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.area-edit-button[b-g61nf7bqe4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 46px;
    padding: 0.7rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

    .area-edit-button:disabled[b-g61nf7bqe4] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.area-edit-button-primary[b-g61nf7bqe4] {
    color: #ffffff;
    background: #0d6efd;
    border-color: #0d6efd;
}

    .area-edit-button-primary:hover:not(:disabled)[b-g61nf7bqe4] {
        color: #ffffff;
        background: #0957c3;
    }

.area-edit-button-secondary[b-g61nf7bqe4] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .area-edit-button-secondary:hover[b-g61nf7bqe4] {
        color: #ffffff;
        background: #475569;
        text-decoration: none;
    }

.area-edit-button-danger[b-g61nf7bqe4] {
    color: #ffffff;
    background: #dc3545;
    border-color: #dc3545;
}

    .area-edit-button-danger:hover:not(:disabled)[b-g61nf7bqe4] {
        color: #ffffff;
        background: #b92838;
    }

.area-edit-button-success[b-g61nf7bqe4] {
    color: #ffffff;
    background: #198754;
    border-color: #198754;
}

    .area-edit-button-success:hover:not(:disabled)[b-g61nf7bqe4] {
        color: #ffffff;
        background: #136c43;
        text-decoration: none;
    }

.area-edit-button-outline[b-g61nf7bqe4] {
    color: #0d6efd;
    background: #ffffff;
    border-color: #0d6efd;
}

    .area-edit-button-outline:hover[b-g61nf7bqe4] {
        color: #ffffff;
        background: #0d6efd;
        text-decoration: none;
    }

/* =========================================================
   Bereichsstatus
   ========================================================= */

.area-edit-status-box[b-g61nf7bqe4] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.05rem;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(203,213,225,0.85);
    border-radius: 11px;
}

    .area-edit-status-box > span[b-g61nf7bqe4] {
        color: #64748b;
        font-size: 0.73rem;
        font-weight: 800;
        letter-spacing: 0.045em;
    }

    .area-edit-status-box strong[b-g61nf7bqe4] {
        color: #172033;
        font-size: 1.05rem;
        font-weight: 800;
    }

.area-edit-status-description[b-g61nf7bqe4] {
    margin: 1.25rem 0 1rem;
}

    .area-edit-status-description strong[b-g61nf7bqe4] {
        display: block;
        color: #172033;
        font-size: 0.98rem;
        font-weight: 800;
    }

    .area-edit-status-description p[b-g61nf7bqe4] {
        margin: 0.45rem 0 0;
        color: #53657d;
        font-size: 0.89rem;
        line-height: 1.6;
    }

/* =========================================================
   Objekt- und Kundenzuordnung
   ========================================================= */

.area-edit-context-item[b-g61nf7bqe4] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    padding: 0.95rem;
    background: rgba(255,255,255,0.82);
    border: 1px solid #cfddf0;
    border-radius: 10px;
}

    .area-edit-context-item > span[b-g61nf7bqe4] {
        color: #64748b;
        font-size: 0.73rem;
        font-weight: 800;
        letter-spacing: 0.045em;
    }

    .area-edit-context-item strong[b-g61nf7bqe4] {
        color: #172033;
        font-size: 0.95rem;
        overflow-wrap: anywhere;
    }

.area-edit-context .area-edit-button[b-g61nf7bqe4] {
    margin-top: 0.5rem;
}

/* =========================================================
   Abgeschlossene Einmalreinigung
   ========================================================= */

.area-edit-completed[b-g61nf7bqe4] {
    max-width: 1000px;
    background: linear-gradient( 115deg, #ffffff 0%, #f0faf4 30%, #dff2e5 65%, #c6e8d2 100% );
    border-color: #bde2cb;
}

.area-edit-completed-heading[b-g61nf7bqe4] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.area-edit-completed-icon[b-g61nf7bqe4] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    color: #ffffff;
    background: #198754;
    border-radius: 14px;
    font-size: 1.6rem;
    font-weight: 800;
}

.area-edit-completed-heading h2[b-g61nf7bqe4] {
    margin: 0;
    color: #172033;
    font-size: 1.4rem;
    font-weight: 800;
}

.area-edit-completed-heading p[b-g61nf7bqe4] {
    margin: 0.45rem 0 0;
    color: #53657d;
    font-size: 0.9rem;
    line-height: 1.55;
}

.area-edit-completed-grid[b-g61nf7bqe4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.area-edit-info-box[b-g61nf7bqe4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    min-height: 90px;
    padding: 1rem;
    background: rgba(255,255,255,0.82);
    border: 1px solid #cde5d5;
    border-radius: 11px;
}

    .area-edit-info-box > span[b-g61nf7bqe4] {
        color: #64748b;
        font-size: 0.76rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.035em;
    }

    .area-edit-info-box strong[b-g61nf7bqe4] {
        color: #172033;
        font-size: 0.98rem;
        font-weight: 750;
        overflow-wrap: anywhere;
    }

/* =========================================================
   Ladezustand / Nicht gefunden
   ========================================================= */

.area-edit-loading[b-g61nf7bqe4] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

.area-edit-not-found[b-g61nf7bqe4] {
    max-width: 750px;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
}

    .area-edit-not-found h2[b-g61nf7bqe4] {
        margin: 0;
        color: #172033;
        font-size: 1.2rem;
        font-weight: 800;
    }

    .area-edit-not-found p[b-g61nf7bqe4] {
        margin: 0.5rem 0 1rem;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.6;
    }

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {

    .area-edit-workspace[b-g61nf7bqe4] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .area-edit-side[b-g61nf7bqe4] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .area-edit-page[b-g61nf7bqe4] {
        padding-bottom: 1rem;
    }

    .area-edit-header[b-g61nf7bqe4] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

        .area-edit-header h1[b-g61nf7bqe4] {
            font-size: 2rem;
        }

    .area-edit-header-separator[b-g61nf7bqe4] {
        margin: 0 0.2rem;
    }

    .area-edit-workspace[b-g61nf7bqe4],
    .area-edit-side[b-g61nf7bqe4] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .area-edit-section[b-g61nf7bqe4] {
        padding: 1rem;
        border-radius: 14px;
    }

    .area-edit-section-heading h2[b-g61nf7bqe4] {
        font-size: 1.2rem;
    }

    .area-edit-schedule-panel[b-g61nf7bqe4] {
        padding: 0.9rem;
    }

    .area-edit-field-grid[b-g61nf7bqe4] {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .area-edit-days-grid[b-g61nf7bqe4] {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .area-edit-actions[b-g61nf7bqe4] {
        flex-direction: column;
        align-items: stretch;
    }

        .area-edit-actions .area-edit-button[b-g61nf7bqe4] {
            width: 100%;
        }

    .area-edit-status-section .area-edit-button[b-g61nf7bqe4] {
        width: 100%;
    }

    .area-edit-context .area-edit-button[b-g61nf7bqe4] {
        width: 100%;
    }

    .area-edit-completed-grid[b-g61nf7bqe4] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .area-edit-completed-heading[b-g61nf7bqe4] {
        gap: 0.75rem;
    }

        .area-edit-completed-heading h2[b-g61nf7bqe4] {
            font-size: 1.2rem;
        }
}
/* /Components/Pages/Admin/Areas/AreaQrCode.razor.rz.scp.css */

/* =========================================================
   CleanDation – Einzelner QR-Code
   ========================================================= */

.single-qr-page[b-5dbzoxywrz] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
    color: #172033;
}

/* =========================================================
   Seitenkopf
   ========================================================= */

.single-qr-header[b-5dbzoxywrz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.single-qr-eyebrow[b-5dbzoxywrz] {
    margin-bottom: 0.4rem;
    color: #0d6efd;
    font-size: 0.77rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.single-qr-heading h1[b-5dbzoxywrz] {
    margin: 0;
    color: #172033;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 750;
    line-height: 1.2;
}

.single-qr-heading p[b-5dbzoxywrz] {
    margin: 0.55rem 0 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
}

    .single-qr-heading p strong[b-5dbzoxywrz] {
        color: #334155;
    }

.single-qr-separator[b-5dbzoxywrz] {
    margin: 0 0.5rem;
    color: #94a3b8;
}

/* =========================================================
   Layout
   ========================================================= */

.single-qr-workspace[b-5dbzoxywrz] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
    gap: 1.5rem;
}

.single-qr-side[b-5dbzoxywrz] {
    display: grid;
    gap: 1.5rem;
    min-width: 0;
}

.single-qr-section[b-5dbzoxywrz] {
    min-width: 0;
    padding: 1.5rem;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.055);
}

/* Blaue QR-Code-Karte */

.single-qr-main-section[b-5dbzoxywrz] {
    background: linear-gradient( 115deg, #ffffff 0%, #f1f6ff 30%, #dfeaff 65%, #cddfff 100% );
    border-color: #c4d8f8;
}

/* Informationskarte */

.single-qr-info-section[b-5dbzoxywrz] {
    background: linear-gradient( 115deg, #ffffff 0%, #f2f8ff 30%, #e4efff 65%, #d3e4ff 100% );
    border-color: #c9dcf7;
}

/* Anleitungskarte */

.single-qr-help-section[b-5dbzoxywrz] {
    background: linear-gradient( 115deg, #ffffff 0%, #f1faf4 30%, #dff2e5 65%, #c6e8d2 100% );
    border-color: #bde2cb;
}

/* =========================================================
   Abschnittsüberschriften
   ========================================================= */

.single-qr-section-heading[b-5dbzoxywrz] {
    margin-bottom: 1.3rem;
}

    .single-qr-section-heading h2[b-5dbzoxywrz] {
        margin: 0;
        color: #172033;
        font-size: 1.3rem;
        font-weight: 750;
    }

    .single-qr-section-heading p[b-5dbzoxywrz] {
        margin: 0.45rem 0 0;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.55;
    }

.single-qr-eyebrow-green[b-5dbzoxywrz] {
    color: #198754;
}

/* =========================================================
   QR-Code-Druckkarte
   ========================================================= */

.single-qr-card[b-5dbzoxywrz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 510px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    background: #ffffff;
    border: 1px solid #d4dce8;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.06);
    text-align: center;
}

/* Firmenlogo */

.single-qr-brand[b-5dbzoxywrz] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 55px;
    margin-bottom: 1.3rem;
}

.single-qr-company-logo[b-5dbzoxywrz] {
    display: block;
    max-width: 190px;
    max-height: 75px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.single-qr-brand > span[b-5dbzoxywrz] {
    color: #0d6efd;
    font-size: 1.45rem;
    font-weight: 850;
    letter-spacing: -0.04em;
}

/* Kunde und Objekt */

.single-qr-customer[b-5dbzoxywrz] {
    color: #172033;
    font-size: 0.98rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.single-qr-object[b-5dbzoxywrz] {
    margin-top: 0.35rem;
    color: #64748b;
    font-size: 0.91rem;
    overflow-wrap: anywhere;
}

/* Bereichsname */

.single-qr-area[b-5dbzoxywrz] {
    margin: 1.2rem 0 1.4rem;
    color: #172033;
    font-size: 1.4rem;
    font-weight: 850;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* QR-Code selbst */

.single-qr-image-container[b-5dbzoxywrz] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0.4rem;
    background: #ffffff;
}

.single-qr-image[b-5dbzoxywrz] {
    display: block;
    width: 100%;
    max-width: 270px;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    image-rendering: auto;
}

/* Beschreibung */

.single-qr-instruction[b-5dbzoxywrz] {
    margin-top: 1.3rem;
    color: #475569;
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.5;
}

.single-qr-url[b-5dbzoxywrz] {
    width: 100%;
    margin-top: 0.7rem;
    color: #64748b;
    font-size: 0.74rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* =========================================================
   QR-Code-Aktionen
   ========================================================= */

.single-qr-bottom-actions[b-5dbzoxywrz] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.3rem;
}

/* =========================================================
   Buttons
   ========================================================= */

.single-qr-button[b-5dbzoxywrz] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    min-height: 46px;
    padding: 0.7rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .single-qr-button:hover[b-5dbzoxywrz] {
        text-decoration: none;
    }

.single-qr-button-primary[b-5dbzoxywrz] {
    color: #ffffff;
    background: #0d6efd;
    border-color: #0d6efd;
}

    .single-qr-button-primary:hover[b-5dbzoxywrz] {
        color: #ffffff;
        background: #0957c3;
    }

.single-qr-button-secondary[b-5dbzoxywrz] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .single-qr-button-secondary:hover[b-5dbzoxywrz] {
        color: #ffffff;
        background: #475569;
    }

.single-qr-button-outline[b-5dbzoxywrz] {
    color: #198754;
    background: #ffffff;
    border-color: #198754;
}

    .single-qr-button-outline:hover[b-5dbzoxywrz] {
        color: #ffffff;
        background: #198754;
    }

/* =========================================================
   Zuordnungsinformationen
   ========================================================= */

.single-qr-info-item[b-5dbzoxywrz] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid #cfddf0;
    border-radius: 10px;
}

    .single-qr-info-item > span[b-5dbzoxywrz] {
        color: #64748b;
        font-size: 0.73rem;
        font-weight: 800;
        letter-spacing: 0.045em;
    }

    .single-qr-info-item strong[b-5dbzoxywrz] {
        color: #172033;
        font-size: 0.96rem;
        font-weight: 750;
        overflow-wrap: anywhere;
    }

/* Einsatzbereitschaft */

.single-qr-status[b-5dbzoxywrz] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.1rem;
    padding: 0.85rem 1rem;
    color: #157347;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid #bde2cb;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 800;
}

.single-qr-status-dot[b-5dbzoxywrz] {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    background: #198754;
    border-radius: 50%;
}

/* =========================================================
   Schritt-für-Schritt-Anleitung
   ========================================================= */

.single-qr-steps[b-5dbzoxywrz] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.single-qr-step[b-5dbzoxywrz] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid #cde5d5;
    border-radius: 11px;
}

.single-qr-step-number[b-5dbzoxywrz] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    color: #ffffff;
    background: #198754;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 800;
}

.single-qr-step strong[b-5dbzoxywrz] {
    display: block;
    color: #172033;
    font-size: 0.93rem;
    font-weight: 800;
}

.single-qr-step p[b-5dbzoxywrz] {
    margin: 0.35rem 0 0;
    color: #53657d;
    font-size: 0.85rem;
    line-height: 1.55;
}

/* =========================================================
   Drucküberschrift
   Standardmäßig nicht sichtbar
   ========================================================= */

.single-qr-print-title[b-5dbzoxywrz] {
    display: none;
}

.single-qr-print-brand[b-5dbzoxywrz] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-qr-print-logo[b-5dbzoxywrz] {
    max-width: 150px;
    max-height: 55px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* =========================================================
   Ladezustand / Nicht gefunden
   ========================================================= */

.single-qr-loading[b-5dbzoxywrz] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

.single-qr-not-found[b-5dbzoxywrz] {
    max-width: 760px;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
}

    .single-qr-not-found h2[b-5dbzoxywrz] {
        margin: 0;
        color: #172033;
        font-size: 1.2rem;
        font-weight: 800;
    }

    .single-qr-not-found p[b-5dbzoxywrz] {
        margin: 0.5rem 0 1rem;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.6;
    }

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {

    .single-qr-workspace[b-5dbzoxywrz] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .single-qr-side[b-5dbzoxywrz] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .single-qr-page[b-5dbzoxywrz] {
        padding-bottom: 1rem;
    }

    .single-qr-header[b-5dbzoxywrz] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .single-qr-heading h1[b-5dbzoxywrz] {
        font-size: 2rem;
    }

    .single-qr-workspace[b-5dbzoxywrz],
    .single-qr-side[b-5dbzoxywrz] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .single-qr-section[b-5dbzoxywrz] {
        padding: 1rem;
        border-radius: 14px;
    }

    .single-qr-card[b-5dbzoxywrz] {
        padding: 1.5rem 0.85rem;
    }

    .single-qr-area[b-5dbzoxywrz] {
        font-size: 1.2rem;
    }

    .single-qr-image[b-5dbzoxywrz] {
        max-width: 240px;
    }

    .single-qr-bottom-actions[b-5dbzoxywrz] {
        flex-direction: column;
    }

        .single-qr-bottom-actions .single-qr-button[b-5dbzoxywrz],
        .single-qr-header .single-qr-button[b-5dbzoxywrz] {
            width: 100%;
        }
}

/* =========================================================
   Druckansicht
   ========================================================= */

@media print {

    @page {
        size: A4 portrait;
        margin: 12mm;
    }

    .single-qr-page[b-5dbzoxywrz] {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        color: #000000;
        background: #ffffff;
    }

        .single-qr-page .no-print[b-5dbzoxywrz] {
            display: none !important;
        }

    .single-qr-workspace[b-5dbzoxywrz] {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .single-qr-main-section[b-5dbzoxywrz] {
        width: 100%;
        margin: 0;
        padding: 0;
        background: #ffffff !important;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .single-qr-card[b-5dbzoxywrz] {
        width: 100%;
        max-width: 120mm;
        margin: 0 auto;
        padding: 12mm 8mm;
        background: #ffffff !important;
        border: 1px solid #d1d5db;
        border-radius: 0;
        box-shadow: none;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .single-qr-brand[b-5dbzoxywrz] {
        margin-bottom: 10mm;
    }

    .single-qr-company-logo[b-5dbzoxywrz] {
        max-width: 50mm;
        max-height: 18mm;
    }

    .single-qr-customer[b-5dbzoxywrz] {
        color: #000000;
        font-size: 12pt;
    }

    .single-qr-object[b-5dbzoxywrz] {
        color: #444444;
        font-size: 10pt;
    }

    .single-qr-area[b-5dbzoxywrz] {
        margin: 7mm 0;
        color: #000000;
        font-size: 17pt;
    }

    .single-qr-image-container[b-5dbzoxywrz] {
        padding: 0;
        background: #ffffff !important;
    }

    .single-qr-image[b-5dbzoxywrz] {
        width: 65mm;
        max-width: 65mm;
        height: 65mm;
        object-fit: contain;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .single-qr-instruction[b-5dbzoxywrz] {
        margin-top: 7mm;
        color: #333333;
        font-size: 10pt;
    }

    .single-qr-side[b-5dbzoxywrz] {
        display: none !important;
    }
}
/* /Components/Pages/Admin/Areas/AreaTasks.razor.rz.scp.css */

/* =========================================================
   CleanDation – Aufgabenverwaltung
   ========================================================= */

.area-tasks-page[b-lg297hsos1] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* =========================================================
   Seitenkopf
   ========================================================= */

.area-tasks-header[b-lg297hsos1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.3rem;
}

.area-tasks-eyebrow[b-lg297hsos1] {
    margin-bottom: 0.4rem;
    color: #0d6efd;
    font-size: 0.77rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.area-tasks-header h1[b-lg297hsos1] {
    margin: 0;
    color: #172033;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 750;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.area-tasks-header p[b-lg297hsos1] {
    margin: 0.55rem 0 0;
    color: #64748b;
    font-size: 0.95rem;
}

    .area-tasks-header p strong[b-lg297hsos1] {
        color: #334155;
    }

.area-tasks-separator[b-lg297hsos1] {
    margin: 0 0.45rem;
    color: #94a3b8;
}

.area-tasks-header-badge[b-lg297hsos1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 32px;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.79rem;
    font-weight: 800;
}

.area-tasks-badge-regular[b-lg297hsos1] {
    color: #0d6efd;
    background: #e3efff;
    border: 1px solid #c4d9fb;
}

.area-tasks-badge-onetime[b-lg297hsos1] {
    color: #0f766e;
    background: #d9f4ee;
    border: 1px solid #a8ded2;
}

/* =========================================================
   Navigation
   ========================================================= */

.area-tasks-navigation[b-lg297hsos1] {
    display: flex;
    margin-bottom: 1.5rem;
}

.area-tasks-setup[b-lg297hsos1] {
    margin-bottom: 1.5rem;
}

/* =========================================================
   Allgemeine Buttons
   ========================================================= */

.area-tasks-button[b-lg297hsos1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .area-tasks-button:hover[b-lg297hsos1] {
        text-decoration: none;
    }

.area-tasks-button-secondary[b-lg297hsos1] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .area-tasks-button-secondary:hover[b-lg297hsos1] {
        color: #ffffff;
        background: #475569;
    }

.area-tasks-button-primary[b-lg297hsos1] {
    color: #ffffff;
    background: #0d6efd;
    border-color: #0d6efd;
}

    .area-tasks-button-primary:hover[b-lg297hsos1] {
        color: #ffffff;
        background: #0957c3;
    }

.area-tasks-button-primary-outline[b-lg297hsos1],
.area-tasks-button-edit[b-lg297hsos1] {
    color: #0d6efd;
    background: #ffffff;
    border-color: #0d6efd;
}

    .area-tasks-button-primary-outline:hover[b-lg297hsos1],
    .area-tasks-button-edit:hover[b-lg297hsos1] {
        color: #ffffff;
        background: #0d6efd;
    }

.area-tasks-button-delete[b-lg297hsos1] {
    color: #dc3545;
    background: #ffffff;
    border-color: #dc3545;
}

    .area-tasks-button-delete:hover[b-lg297hsos1] {
        color: #ffffff;
        background: #dc3545;
    }

.area-tasks-button-success[b-lg297hsos1] {
    color: #ffffff;
    background: #198754;
    border-color: #198754;
}

    .area-tasks-button-success:hover[b-lg297hsos1] {
        color: #ffffff;
        background: #136c43;
    }

/* =========================================================
   Einmalige Reinigung – Auftragsübersicht
   ========================================================= */

.one-time-summary[b-lg297hsos1] {
    margin-bottom: 1.5rem;
    padding: 1.4rem;
    background: linear-gradient( 110deg, #ffffff 0%, #effaf7 30%, #dff5f0 65%, #bfece3 100% );
    border: 1px solid #bce1da;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15,23,42,0.05);
}

.one-time-summary-header[b-lg297hsos1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.area-tasks-eyebrow-teal[b-lg297hsos1] {
    color: #0b887e;
}

.one-time-summary-header h2[b-lg297hsos1] {
    margin: 0;
    color: #172033;
    font-size: 1.3rem;
    font-weight: 750;
}

.one-time-summary-header p[b-lg297hsos1] {
    margin: 0.45rem 0 0;
    color: #53657d;
    font-size: 0.9rem;
    line-height: 1.5;
}

.one-time-summary-grid[b-lg297hsos1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1rem;
}

.one-time-summary-item[b-lg297hsos1] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    padding: 1rem;
    background: rgba(255,255,255,0.82);
    border: 1px solid #bfdfd7;
    border-radius: 11px;
}

.summary-label[b-lg297hsos1] {
    color: #64748b;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.045em;
}

.summary-value[b-lg297hsos1] {
    color: #172033;
    font-size: 0.95rem;
    font-weight: 750;
    overflow-wrap: anywhere;
}

/* =========================================================
   Aufgabenübersicht
   ========================================================= */

.tasks-section[b-lg297hsos1] {
    width: 100%;
}

.tasks-section-header[b-lg297hsos1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    margin-bottom: 1.2rem;
}

    .tasks-section-header h2[b-lg297hsos1] {
        margin: 0;
        color: #172033;
        font-size: 1.4rem;
        font-weight: 750;
    }

    .tasks-section-header p[b-lg297hsos1] {
        margin: 0.45rem 0 0;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.5;
    }

.tasks-count[b-lg297hsos1] {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-shrink: 0;
}

    .tasks-count strong[b-lg297hsos1] {
        color: #0d6efd;
        font-size: 1.5rem;
        font-weight: 850;
    }

    .tasks-count span[b-lg297hsos1] {
        color: #64748b;
        font-size: 0.83rem;
    }

/* =========================================================
   Aufgabenkarten
   ========================================================= */

.task-list[b-lg297hsos1] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.clean-task-card[b-lg297hsos1] {
    width: 100%;
    min-width: 0;
    padding: 1.25rem 1.4rem;
    background: linear-gradient( 105deg, #ffffff 0%, #f1f6ff 30%, #dfebff 65%, #cee0ff 100% );
    border: 1px solid #c5d9f7;
    border-radius: 15px;
    box-shadow: 0 7px 24px rgba(15,23,42,0.055);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .clean-task-card:hover[b-lg297hsos1] {
        border-color: #aac8f2;
        box-shadow: 0 9px 28px rgba(15,23,42,0.085);
    }

.clean-task-main[b-lg297hsos1] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(148,163,184,0.27);
}

.clean-task-number[b-lg297hsos1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    color: #0d6efd;
    background: rgba(255,255,255,0.85);
    border: 1px solid #c6daf8;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 850;
}

.clean-task-name[b-lg297hsos1] {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: #172033;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.clean-task-status[b-lg297hsos1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 29px;
    padding: 0.35rem 0.8rem;
    color: #ffffff;
    background: #198754;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
}

/* Aktionen unter der Aufgabe */

.clean-task-actions[b-lg297hsos1] {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1rem;
}

    .clean-task-actions .area-tasks-button[b-lg297hsos1] {
        min-width: 120px;
    }

/* =========================================================
   Bereich bereit
   ========================================================= */

.ready-card[b-lg297hsos1] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1.3rem;
    padding: 1.15rem 1.3rem;
    background: linear-gradient( 110deg, #ffffff 0%, #effaf3 30%, #dff3e5 65%, #c8e9d4 100% );
    border: 1px solid #bce2ca;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(15,23,42,0.04);
}

.ready-icon[b-lg297hsos1] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    color: #ffffff;
    background: #198754;
    border-radius: 12px;
    font-size: 1.5rem;
    font-weight: 800;
}

.ready-title[b-lg297hsos1] {
    color: #172033;
    font-size: 1rem;
    font-weight: 800;
}

.ready-text[b-lg297hsos1] {
    margin: 0.35rem 0 0;
    color: #475569;
    font-size: 0.89rem;
    line-height: 1.55;
}

/* =========================================================
   Footer-Aktionen
   ========================================================= */

.task-footer-actions[b-lg297hsos1] {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.2rem;
}

/* =========================================================
   Keine Aufgaben
   ========================================================= */

.tasks-empty-state[b-lg297hsos1] {
    padding: 2.5rem 1.5rem;
    background: linear-gradient( 110deg, #ffffff 0%, #f2f7ff 45%, #e1ecff 100% );
    border: 1px solid #cfdef7;
    border-radius: 16px;
    text-align: center;
}

.tasks-empty-icon[b-lg297hsos1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    color: #0d6efd;
    background: #e5efff;
    border-radius: 14px;
    font-size: 1.7rem;
    font-weight: 700;
}

.tasks-empty-state h3[b-lg297hsos1] {
    margin: 0;
    color: #172033;
    font-size: 1.2rem;
    font-weight: 800;
}

.tasks-empty-state p[b-lg297hsos1] {
    max-width: 500px;
    margin: 0.6rem auto 1.2rem;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* =========================================================
   Laden und Fehler
   ========================================================= */

.area-tasks-loading[b-lg297hsos1] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

.area-tasks-not-found[b-lg297hsos1] {
    max-width: 760px;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
}

    .area-tasks-not-found h2[b-lg297hsos1] {
        margin: 0;
        color: #172033;
        font-size: 1.2rem;
        font-weight: 800;
    }

    .area-tasks-not-found p[b-lg297hsos1] {
        margin: 0.5rem 0 1rem;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.6;
    }

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {

    .tasks-section-header[b-lg297hsos1] {
        align-items: flex-start;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .area-tasks-page[b-lg297hsos1] {
        padding-bottom: 1rem;
    }

    .area-tasks-header[b-lg297hsos1] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.9rem;
    }

        .area-tasks-header h1[b-lg297hsos1] {
            font-size: 2rem;
        }

    .area-tasks-navigation .area-tasks-button[b-lg297hsos1] {
        width: 100%;
    }

    .one-time-summary[b-lg297hsos1] {
        padding: 1rem;
        border-radius: 14px;
    }

    .one-time-summary-header[b-lg297hsos1] {
        flex-direction: column;
        gap: 0.8rem;
    }

    .one-time-summary-grid[b-lg297hsos1] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .tasks-section-header[b-lg297hsos1] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.7rem;
    }

        .tasks-section-header h2[b-lg297hsos1] {
            font-size: 1.25rem;
        }

    .clean-task-card[b-lg297hsos1] {
        padding: 1rem;
        border-radius: 13px;
    }

    .clean-task-main[b-lg297hsos1] {
        flex-wrap: wrap;
        gap: 0.65rem;
    }

    .clean-task-name[b-lg297hsos1] {
        flex: 1 1 calc(100% - 110px);
    }

    .clean-task-actions[b-lg297hsos1] {
        flex-direction: column;
    }

        .clean-task-actions .area-tasks-button[b-lg297hsos1] {
            width: 100%;
        }

    .ready-card[b-lg297hsos1] {
        padding: 1rem;
        gap: 0.75rem;
    }

    .task-footer-actions[b-lg297hsos1] {
        flex-direction: column;
    }

        .task-footer-actions .area-tasks-button[b-lg297hsos1] {
            width: 100%;
        }

    .tasks-empty-state[b-lg297hsos1] {
        padding: 2rem 1rem;
    }
}
/* /Components/Pages/Admin/Areas/CleaningTaskCreate.razor.rz.scp.css */

/* =========================================================
   CleanDation – Neue Reinigungsaufgaben
   ========================================================= */

.task-create-page[b-k2ejdyuh6h] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* =========================================================
   Seitenkopf
   ========================================================= */

.task-create-header[b-k2ejdyuh6h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.6rem;
}

.task-create-eyebrow[b-k2ejdyuh6h] {
    margin-bottom: 0.4rem;
    color: #0d6efd;
    font-size: 0.77rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.task-create-header h1[b-k2ejdyuh6h] {
    margin: 0;
    color: #172033;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 750;
    line-height: 1.2;
}

.task-create-header p[b-k2ejdyuh6h] {
    margin: 0.55rem 0 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
}

    .task-create-header p strong[b-k2ejdyuh6h] {
        color: #334155;
    }

.task-create-separator[b-k2ejdyuh6h] {
    margin: 0 0.5rem;
    color: #94a3b8;
}

/* =========================================================
   Layout
   ========================================================= */

.task-create-workspace[b-k2ejdyuh6h] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
    gap: 1.5rem;
}

.task-create-side[b-k2ejdyuh6h] {
    display: grid;
    gap: 1.5rem;
    min-width: 0;
}

.task-create-section[b-k2ejdyuh6h] {
    min-width: 0;
    padding: 1.5rem;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.055);
}

.task-create-details[b-k2ejdyuh6h] {
    background: linear-gradient( 115deg, #ffffff 0%, #f1f6ff 30%, #dfeaff 65%, #cddfff 100% );
    border-color: #c4d8f8;
}

.task-create-context[b-k2ejdyuh6h] {
    background: linear-gradient( 115deg, #ffffff 0%, #f2f8ff 30%, #e4efff 65%, #d3e4ff 100% );
    border-color: #c9dcf7;
}

.task-create-help[b-k2ejdyuh6h] {
    background: linear-gradient( 115deg, #ffffff 0%, #f1faf4 30%, #dff2e5 65%, #c6e8d2 100% );
    border-color: #bde2cb;
}

/* =========================================================
   Überschriften
   ========================================================= */

.task-create-section-header[b-k2ejdyuh6h] {
    margin-bottom: 1.35rem;
}

    .task-create-section-header h2[b-k2ejdyuh6h] {
        margin: 0;
        color: #172033;
        font-size: 1.3rem;
        font-weight: 750;
    }

    .task-create-section-header p[b-k2ejdyuh6h] {
        margin: 0.45rem 0 0;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.55;
    }

.task-create-context-eyebrow[b-k2ejdyuh6h] {
    color: #0d6efd;
}

.task-create-help-eyebrow[b-k2ejdyuh6h] {
    color: #198754;
}

/* =========================================================
   Mehrfacherfassung
   ========================================================= */

.task-create-fields[b-k2ejdyuh6h] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.task-create-entry[b-k2ejdyuh6h] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    min-width: 0;
}

.task-create-entry-number[b-k2ejdyuh6h] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 48px;
    color: #0d6efd;
    font-size: 0.9rem;
    font-weight: 800;
}

.task-create-entry-input[b-k2ejdyuh6h] {
    flex: 1;
    min-width: 0;
}

    .task-create-entry-input label[b-k2ejdyuh6h] {
        display: block;
        margin-bottom: 0.5rem;
        color: #334155;
        font-size: 0.9rem;
        font-weight: 750;
    }

    .task-create-entry-input .form-control[b-k2ejdyuh6h] {
        width: 100%;
        min-height: 48px;
        padding: 0.65rem 0.85rem;
        color: #172033;
        background: #ffffff;
        border: 1px solid #c7d5e6;
        border-radius: 10px;
        font-family: inherit;
        font-size: 0.95rem;
    }

        .task-create-entry-input .form-control:focus[b-k2ejdyuh6h] {
            border-color: #0d6efd;
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.13);
        }

        .task-create-entry-input .form-control[b-k2ejdyuh6h]::placeholder {
            color: #94a3b8;
        }

.task-create-remove[b-k2ejdyuh6h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 48px;
    padding: 0;
    color: #dc3545;
    background: #ffffff;
    border: 1px solid #f0b5bd;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .task-create-remove:hover:not(:disabled)[b-k2ejdyuh6h] {
        color: #ffffff;
        background: #dc3545;
    }

    .task-create-remove:disabled[b-k2ejdyuh6h] {
        opacity: 0.4;
        cursor: not-allowed;
    }

/* =========================================================
   Weitere Aufgabe
   ========================================================= */

.task-create-add-button[b-k2ejdyuh6h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 46px;
    margin-top: 1.2rem;
    padding: 0.65rem 1rem;
    color: #0d6efd;
    background: #ffffff;
    border: 1px dashed #0d6efd;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .task-create-add-button:hover:not(:disabled)[b-k2ejdyuh6h] {
        background: #e8f1ff;
    }

    .task-create-add-button:disabled[b-k2ejdyuh6h] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .task-create-add-button span[b-k2ejdyuh6h] {
        font-size: 1.25rem;
        font-weight: 700;
    }

/* =========================================================
   Reihenfolge / Anzahl
   ========================================================= */

.task-create-order-note[b-k2ejdyuh6h] {
    margin-top: 1.25rem;
    padding: 1rem;
    color: #475569;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #cbdcf5;
    border-radius: 10px;
    font-size: 0.9rem;
}

    .task-create-order-note strong[b-k2ejdyuh6h] {
        color: #0d6efd;
        font-weight: 800;
    }

    .task-create-order-note p[b-k2ejdyuh6h] {
        margin: 0.4rem 0 0;
        color: #64748b;
        font-size: 0.83rem;
        line-height: 1.5;
    }

/* =========================================================
   Fehlermeldungen
   ========================================================= */

.task-create-error[b-k2ejdyuh6h] {
    margin-bottom: 1.25rem;
    padding: 0.9rem 1rem;
    color: #a61b29;
    background: #fff1f2;
    border: 1px solid #f5b6bf;
    border-radius: 10px;
    font-size: 0.88rem;
    line-height: 1.5;
}

.task-create-validation-summary[b-k2ejdyuh6h] {
    margin-bottom: 1rem;
    color: #b42335;
    font-size: 0.9rem;
}

.task-create-validation[b-k2ejdyuh6h] {
    display: block;
    margin-top: 0.4rem;
    color: #b42335;
    font-size: 0.84rem;
}

/* =========================================================
   Buttons
   ========================================================= */

.task-create-actions[b-k2ejdyuh6h] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.task-create-button[b-k2ejdyuh6h] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    min-height: 46px;
    padding: 0.7rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .task-create-button:disabled[b-k2ejdyuh6h] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.task-create-button-primary[b-k2ejdyuh6h] {
    color: #ffffff;
    background: #0d6efd;
    border-color: #0d6efd;
}

    .task-create-button-primary:hover:not(:disabled)[b-k2ejdyuh6h] {
        color: #ffffff;
        background: #0957c3;
    }

.task-create-button-secondary[b-k2ejdyuh6h] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .task-create-button-secondary:hover[b-k2ejdyuh6h] {
        color: #ffffff;
        background: #475569;
        text-decoration: none;
    }

/* =========================================================
   Zuordnungsinformationen
   ========================================================= */

.task-create-info-item[b-k2ejdyuh6h] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid #cfddf0;
    border-radius: 10px;
}

    .task-create-info-item > span[b-k2ejdyuh6h] {
        color: #64748b;
        font-size: 0.73rem;
        font-weight: 800;
        letter-spacing: 0.045em;
    }

    .task-create-info-item strong[b-k2ejdyuh6h] {
        color: #172033;
        font-size: 0.95rem;
        font-weight: 750;
        overflow-wrap: anywhere;
    }

/* =========================================================
   Checklisten-Hilfe
   ========================================================= */

.task-create-help-box[b-k2ejdyuh6h] {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid #cde5d5;
    border-radius: 11px;
}

.task-create-help-icon[b-k2ejdyuh6h] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    color: #ffffff;
    background: #198754;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: 800;
}

.task-create-help-box strong[b-k2ejdyuh6h] {
    display: block;
    color: #172033;
    font-size: 0.95rem;
    font-weight: 800;
}

.task-create-help-box p[b-k2ejdyuh6h] {
    margin: 0.4rem 0 0;
    color: #53657d;
    font-size: 0.85rem;
    line-height: 1.55;
}

.task-create-example[b-k2ejdyuh6h] {
    margin-top: 1rem;
    color: #53657d;
    font-size: 0.86rem;
    line-height: 1.55;
}

/* =========================================================
   Laden / Nicht gefunden
   ========================================================= */

.task-create-loading[b-k2ejdyuh6h] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

.task-create-not-found[b-k2ejdyuh6h] {
    max-width: 760px;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
}

    .task-create-not-found h2[b-k2ejdyuh6h] {
        margin: 0;
        color: #172033;
        font-size: 1.2rem;
        font-weight: 800;
    }

    .task-create-not-found p[b-k2ejdyuh6h] {
        margin: 0.5rem 0 1rem;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.6;
    }

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {

    .task-create-workspace[b-k2ejdyuh6h] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .task-create-side[b-k2ejdyuh6h] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .task-create-page[b-k2ejdyuh6h] {
        padding-bottom: 1rem;
    }

    .task-create-header[b-k2ejdyuh6h] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

        .task-create-header h1[b-k2ejdyuh6h] {
            font-size: 2rem;
        }

    .task-create-separator[b-k2ejdyuh6h] {
        margin: 0 0.2rem;
    }

    .task-create-workspace[b-k2ejdyuh6h],
    .task-create-side[b-k2ejdyuh6h] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .task-create-section[b-k2ejdyuh6h] {
        padding: 1rem;
        border-radius: 14px;
    }

    .task-create-section-header h2[b-k2ejdyuh6h] {
        font-size: 1.2rem;
    }

    .task-create-entry[b-k2ejdyuh6h] {
        gap: 0.4rem;
    }

    .task-create-entry-number[b-k2ejdyuh6h] {
        width: 25px;
    }

    .task-create-remove[b-k2ejdyuh6h] {
        width: 44px;
    }

    .task-create-add-button[b-k2ejdyuh6h] {
        width: 100%;
    }

    .task-create-actions[b-k2ejdyuh6h] {
        flex-direction: column;
        align-items: stretch;
    }

        .task-create-actions .task-create-button[b-k2ejdyuh6h] {
            width: 100%;
        }
}
/* /Components/Pages/Admin/Areas/CleaningTaskDelete.razor.rz.scp.css */

/* =========================================================
   CleanDation – Aufgabe löschen
   ========================================================= */

.task-delete-page[b-rohvdib2l0] {
    width: 100%;
    max-width: 1500px;
    padding-bottom: 2rem;
}

/* =========================================================
   Seitenkopf
   ========================================================= */

.task-delete-header[b-rohvdib2l0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.6rem;
}

.task-delete-eyebrow[b-rohvdib2l0] {
    margin-bottom: 0.4rem;
    color: #0d6efd;
    font-size: 0.77rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.task-delete-eyebrow-danger[b-rohvdib2l0] {
    color: #dc3545;
}

.task-delete-eyebrow-green[b-rohvdib2l0] {
    color: #198754;
}

.task-delete-header h1[b-rohvdib2l0] {
    margin: 0;
    color: #172033;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 750;
    line-height: 1.2;
}

.task-delete-header p[b-rohvdib2l0] {
    margin: 0.55rem 0 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* =========================================================
   Layout
   ========================================================= */

.task-delete-workspace[b-rohvdib2l0] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
    gap: 1.5rem;
}

.task-delete-side[b-rohvdib2l0] {
    display: grid;
    gap: 1.5rem;
    min-width: 0;
}

.task-delete-section[b-rohvdib2l0] {
    min-width: 0;
    padding: 1.5rem;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15,23,42,0.055);
}

/* Löschbestätigung – hellrot */

.task-delete-confirmation[b-rohvdib2l0] {
    background: linear-gradient( 115deg, #ffffff 0%, #fff5f5 30%, #ffe5e7 65%, #ffd3d8 100% );
    border-color: #f4c5cb;
}

/* Zuordnung – blau */

.task-delete-context[b-rohvdib2l0] {
    background: linear-gradient( 115deg, #ffffff 0%, #f2f8ff 30%, #e4efff 65%, #d3e4ff 100% );
    border-color: #c9dcf7;
}

/* Dokumentation – grün */

.task-delete-help[b-rohvdib2l0] {
    background: linear-gradient( 115deg, #ffffff 0%, #f1faf4 30%, #dff2e5 65%, #c6e8d2 100% );
    border-color: #bde2cb;
}

/* =========================================================
   Abschnittsüberschriften
   ========================================================= */

.task-delete-section-header[b-rohvdib2l0] {
    margin-bottom: 1.35rem;
}

    .task-delete-section-header h2[b-rohvdib2l0] {
        margin: 0;
        color: #172033;
        font-size: 1.3rem;
        font-weight: 750;
    }

    .task-delete-section-header p[b-rohvdib2l0] {
        margin: 0.45rem 0 0;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.55;
    }

/* =========================================================
   Aufgabeninformationen
   ========================================================= */

.task-delete-task-box[b-rohvdib2l0] {
    padding: 1.1rem;
    background: rgba(255,255,255,0.85);
    border: 1px solid #efc5ca;
    border-radius: 11px;
}

.task-delete-task-heading[b-rohvdib2l0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.task-delete-task-label[b-rohvdib2l0] {
    display: block;
    margin-bottom: 0.35rem;
    color: #64748b;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.045em;
}

.task-delete-task-heading h3[b-rohvdib2l0] {
    margin: 0;
    color: #172033;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.task-delete-status[b-rohvdib2l0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 29px;
    padding: 0.35rem 0.8rem;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
}

.task-delete-status-active[b-rohvdib2l0] {
    background: #198754;
}

.task-delete-status-inactive[b-rohvdib2l0] {
    background: #64748b;
}

.task-delete-task-meta[b-rohvdib2l0] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding-top: 1rem;
}

.task-delete-meta-item[b-rohvdib2l0] {
    min-width: 0;
}

    .task-delete-meta-item > span[b-rohvdib2l0] {
        display: block;
        margin-bottom: 0.35rem;
        color: #64748b;
        font-size: 0.73rem;
        font-weight: 800;
        letter-spacing: 0.045em;
    }

    .task-delete-meta-item strong[b-rohvdib2l0] {
        display: block;
        color: #172033;
        font-size: 0.93rem;
        font-weight: 750;
        overflow-wrap: anywhere;
    }

/* =========================================================
   Warnhinweis
   ========================================================= */

.task-delete-warning[b-rohvdib2l0] {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-top: 1.2rem;
    padding: 1.05rem;
    background: #fff2ce;
    border: 1px solid #efd28b;
    border-radius: 11px;
}

.task-delete-warning-icon[b-rohvdib2l0] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    color: #ffffff;
    background: #d99b14;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: 900;
}

.task-delete-warning strong[b-rohvdib2l0] {
    display: block;
    color: #805900;
    font-size: 0.94rem;
    font-weight: 800;
}

.task-delete-warning p[b-rohvdib2l0] {
    margin: 0.45rem 0 0;
    color: #805f1e;
    font-size: 0.86rem;
    line-height: 1.6;
}

.task-delete-already-inactive[b-rohvdib2l0] {
    margin-top: 1rem;
    padding: 0.95rem;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 750;
}

/* =========================================================
   Buttons
   ========================================================= */

.task-delete-actions[b-rohvdib2l0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.task-delete-button[b-rohvdib2l0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 46px;
    padding: 0.7rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .task-delete-button:disabled[b-rohvdib2l0] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.task-delete-button-danger[b-rohvdib2l0] {
    color: #ffffff;
    background: #dc3545;
    border-color: #dc3545;
}

    .task-delete-button-danger:hover:not(:disabled)[b-rohvdib2l0] {
        color: #ffffff;
        background: #b92838;
    }

.task-delete-button-secondary[b-rohvdib2l0] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .task-delete-button-secondary:hover[b-rohvdib2l0] {
        color: #ffffff;
        background: #475569;
        text-decoration: none;
    }

/* =========================================================
   Zuordnungsinformationen
   ========================================================= */

.task-delete-info-item[b-rohvdib2l0] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    padding: 1rem;
    background: rgba(255,255,255,0.82);
    border: 1px solid #cfddf0;
    border-radius: 10px;
}

    .task-delete-info-item > span[b-rohvdib2l0] {
        color: #64748b;
        font-size: 0.73rem;
        font-weight: 800;
        letter-spacing: 0.045em;
    }

    .task-delete-info-item strong[b-rohvdib2l0] {
        color: #172033;
        font-size: 0.95rem;
        font-weight: 750;
        overflow-wrap: anywhere;
    }

/* =========================================================
   Dokumentationskarte
   ========================================================= */

.task-delete-help-box[b-rohvdib2l0] {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem;
    background: rgba(255,255,255,0.8);
    border: 1px solid #cde5d5;
    border-radius: 11px;
}

.task-delete-help-icon[b-rohvdib2l0] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    color: #ffffff;
    background: #198754;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: 800;
}

.task-delete-help-box strong[b-rohvdib2l0] {
    display: block;
    color: #172033;
    font-size: 0.95rem;
    font-weight: 800;
}

.task-delete-help-box p[b-rohvdib2l0] {
    margin: 0.4rem 0 0;
    color: #53657d;
    font-size: 0.85rem;
    line-height: 1.55;
}

/* =========================================================
   Laden / Nicht gefunden
   ========================================================= */

.task-delete-loading[b-rohvdib2l0] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

.task-delete-not-found[b-rohvdib2l0] {
    max-width: 760px;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
}

    .task-delete-not-found h2[b-rohvdib2l0] {
        margin: 0;
        color: #172033;
        font-size: 1.2rem;
        font-weight: 800;
    }

    .task-delete-not-found p[b-rohvdib2l0] {
        margin: 0.5rem 0 1rem;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.6;
    }

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {

    .task-delete-workspace[b-rohvdib2l0] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .task-delete-side[b-rohvdib2l0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .task-delete-page[b-rohvdib2l0] {
        padding-bottom: 1rem;
    }

    .task-delete-header[b-rohvdib2l0] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

        .task-delete-header h1[b-rohvdib2l0] {
            font-size: 2rem;
        }

    .task-delete-workspace[b-rohvdib2l0],
    .task-delete-side[b-rohvdib2l0] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .task-delete-section[b-rohvdib2l0] {
        padding: 1rem;
        border-radius: 14px;
    }

    .task-delete-section-header h2[b-rohvdib2l0] {
        font-size: 1.2rem;
    }

    .task-delete-task-meta[b-rohvdib2l0] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .task-delete-task-heading[b-rohvdib2l0] {
        flex-wrap: wrap;
    }

    .task-delete-warning[b-rohvdib2l0] {
        gap: 0.65rem;
        padding: 0.85rem;
    }

    .task-delete-actions[b-rohvdib2l0] {
        flex-direction: column;
        align-items: stretch;
    }

        .task-delete-actions .task-delete-button[b-rohvdib2l0],
        .task-delete-header .task-delete-button[b-rohvdib2l0] {
            width: 100%;
        }
}
/* /Components/Pages/Admin/Areas/CleaningTaskEdit.razor.rz.scp.css */

/* =========================================================
   CleanDation – Aufgabe bearbeiten
   ========================================================= */

.task-edit-page[b-reu9x24yag] {
    width: 100%;
    max-width: 1500px;
    padding-bottom: 2rem;
}

/* =========================================================
   Seitenkopf
   ========================================================= */

.task-edit-header[b-reu9x24yag] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.6rem;
}

.task-edit-eyebrow[b-reu9x24yag] {
    margin-bottom: 0.4rem;
    color: #0d6efd;
    font-size: 0.77rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.task-edit-header h1[b-reu9x24yag] {
    margin: 0;
    color: #172033;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 750;
    line-height: 1.2;
}

.task-edit-header p[b-reu9x24yag] {
    margin: 0.55rem 0 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
}

    .task-edit-header p strong[b-reu9x24yag] {
        color: #334155;
    }

.task-edit-separator[b-reu9x24yag] {
    margin: 0 0.5rem;
    color: #94a3b8;
}

/* =========================================================
   Layout
   ========================================================= */

.task-edit-workspace[b-reu9x24yag] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
    gap: 1.5rem;
}

.task-edit-side[b-reu9x24yag] {
    display: grid;
    gap: 1.5rem;
    min-width: 0;
}

.task-edit-section[b-reu9x24yag] {
    min-width: 0;
    padding: 1.5rem;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15,23,42,0.055);
}

/* Blaue Bearbeitungskarte */

.task-edit-details[b-reu9x24yag] {
    background: linear-gradient( 115deg, #ffffff 0%, #f1f6ff 30%, #dfeaff 65%, #cddfff 100% );
    border-color: #c4d8f8;
}

/* Zuordnungskarte */

.task-edit-context[b-reu9x24yag] {
    background: linear-gradient( 115deg, #ffffff 0%, #f2f8ff 30%, #e4efff 65%, #d3e4ff 100% );
    border-color: #c9dcf7;
}

/* Statuskarte */

.task-edit-status[b-reu9x24yag] {
    background: linear-gradient( 115deg, #ffffff 0%, #f1faf4 30%, #dff2e5 65%, #c6e8d2 100% );
    border-color: #bde2cb;
}

/* =========================================================
   Abschnittsüberschriften
   ========================================================= */

.task-edit-section-header[b-reu9x24yag] {
    margin-bottom: 1.35rem;
}

    .task-edit-section-header h2[b-reu9x24yag] {
        margin: 0;
        color: #172033;
        font-size: 1.3rem;
        font-weight: 750;
    }

    .task-edit-section-header p[b-reu9x24yag] {
        margin: 0.45rem 0 0;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.55;
    }

.task-edit-status-eyebrow[b-reu9x24yag] {
    color: #198754;
}

/* =========================================================
   Formular
   ========================================================= */

.task-edit-fields[b-reu9x24yag] {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.task-edit-field[b-reu9x24yag] {
    min-width: 0;
}

    .task-edit-field label[b-reu9x24yag] {
        display: block;
        margin-bottom: 0.5rem;
        color: #334155;
        font-size: 0.9rem;
        font-weight: 750;
    }

    .task-edit-field .form-control[b-reu9x24yag] {
        width: 100%;
        min-height: 48px;
        padding: 0.65rem 0.85rem;
        color: #172033;
        background: #ffffff;
        border: 1px solid #c7d5e6;
        border-radius: 10px;
        font-size: 0.95rem;
    }

        .task-edit-field .form-control:focus[b-reu9x24yag] {
            border-color: #0d6efd;
            box-shadow: 0 0 0 3px rgba(13,110,253,0.13);
        }

.task-edit-field-hint[b-reu9x24yag] {
    margin-top: 0.45rem;
    color: #64748b;
    font-size: 0.83rem;
    line-height: 1.5;
}

.task-edit-validation-summary[b-reu9x24yag] {
    margin-bottom: 1rem;
    color: #b42335;
    font-size: 0.9rem;
}

.task-edit-validation[b-reu9x24yag] {
    display: block;
    margin-top: 0.4rem;
    color: #b42335;
    font-size: 0.84rem;
}

/* =========================================================
   Buttons
   ========================================================= */

.task-edit-actions[b-reu9x24yag] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.task-edit-button[b-reu9x24yag] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    min-height: 46px;
    padding: 0.7rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .task-edit-button:disabled[b-reu9x24yag] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.task-edit-button-primary[b-reu9x24yag] {
    color: #ffffff;
    background: #0d6efd;
    border-color: #0d6efd;
}

    .task-edit-button-primary:hover:not(:disabled)[b-reu9x24yag] {
        color: #ffffff;
        background: #0957c3;
    }

.task-edit-button-secondary[b-reu9x24yag] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .task-edit-button-secondary:hover[b-reu9x24yag] {
        color: #ffffff;
        background: #475569;
        text-decoration: none;
    }

/* =========================================================
   Zuordnungsinformationen
   ========================================================= */

.task-edit-info-item[b-reu9x24yag] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    padding: 1rem;
    background: rgba(255,255,255,0.82);
    border: 1px solid #cfddf0;
    border-radius: 10px;
}

    .task-edit-info-item > span[b-reu9x24yag] {
        color: #64748b;
        font-size: 0.73rem;
        font-weight: 800;
        letter-spacing: 0.045em;
    }

    .task-edit-info-item strong[b-reu9x24yag] {
        color: #172033;
        font-size: 0.95rem;
        font-weight: 750;
        overflow-wrap: anywhere;
    }

/* =========================================================
   Aufgabenstatus
   ========================================================= */

.task-edit-status-box[b-reu9x24yag] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1rem;
    background: rgba(255,255,255,0.82);
    border: 1px solid #cde5d5;
    border-radius: 11px;
}

    .task-edit-status-box > span[b-reu9x24yag] {
        color: #64748b;
        font-size: 0.73rem;
        font-weight: 800;
        letter-spacing: 0.045em;
    }

    .task-edit-status-box strong[b-reu9x24yag] {
        color: #172033;
        font-size: 1.05rem;
        font-weight: 800;
    }

.task-edit-status-description[b-reu9x24yag] {
    margin: 1rem 0 0;
    color: #53657d;
    font-size: 0.88rem;
    line-height: 1.6;
}

/* =========================================================
   Ladezustand / Nicht gefunden
   ========================================================= */

.task-edit-loading[b-reu9x24yag] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

.task-edit-not-found[b-reu9x24yag] {
    max-width: 760px;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
}

    .task-edit-not-found h2[b-reu9x24yag] {
        margin: 0;
        color: #172033;
        font-size: 1.2rem;
        font-weight: 800;
    }

    .task-edit-not-found p[b-reu9x24yag] {
        margin: 0.5rem 0 1rem;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.6;
    }

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {

    .task-edit-workspace[b-reu9x24yag] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .task-edit-side[b-reu9x24yag] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .task-edit-page[b-reu9x24yag] {
        padding-bottom: 1rem;
    }

    .task-edit-header[b-reu9x24yag] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

        .task-edit-header h1[b-reu9x24yag] {
            font-size: 2rem;
        }

    .task-edit-workspace[b-reu9x24yag],
    .task-edit-side[b-reu9x24yag] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .task-edit-section[b-reu9x24yag] {
        padding: 1rem;
        border-radius: 14px;
    }

    .task-edit-section-header h2[b-reu9x24yag] {
        font-size: 1.2rem;
    }

    .task-edit-actions[b-reu9x24yag] {
        flex-direction: column;
        align-items: stretch;
    }

        .task-edit-actions .task-edit-button[b-reu9x24yag],
        .task-edit-header .task-edit-button[b-reu9x24yag] {
            width: 100%;
        }
}
/* /Components/Pages/Admin/Areas/CleaningTypeCreate.razor.rz.scp.css */

/* =========================================================
   CleanDation – Reinigung anlegen
   ========================================================= */

.cleaning-type-page[b-8i2u8df5mf] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
    color: #172033;
}

/* Einrichtungsfortschritt */

.cleaning-type-setup[b-8i2u8df5mf] {
    margin-bottom: 1.5rem;
}

/* Seitenkopf */

.cleaning-type-header[b-8i2u8df5mf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.8rem;
}

.cleaning-type-eyebrow[b-8i2u8df5mf] {
    margin-bottom: 0.4rem;
    color: #0d6efd;
    font-size: 0.77rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.cleaning-type-header h1[b-8i2u8df5mf] {
    margin: 0;
    color: #172033;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 750;
    line-height: 1.2;
}

.cleaning-type-header p[b-8i2u8df5mf] {
    margin: 0.55rem 0 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
}

    .cleaning-type-header p strong[b-8i2u8df5mf] {
        color: #334155;
    }

.cleaning-type-separator[b-8i2u8df5mf] {
    margin: 0 0.5rem;
    color: #94a3b8;
}

/* Überschrift der Auswahl */

.cleaning-type-intro[b-8i2u8df5mf] {
    margin-bottom: 1.3rem;
}

    .cleaning-type-intro h2[b-8i2u8df5mf] {
        margin: 0;
        color: #172033;
        font-size: 1.35rem;
        font-weight: 750;
    }

    .cleaning-type-intro p[b-8i2u8df5mf] {
        margin: 0.45rem 0 0;
        max-width: 750px;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.6;
    }

/* Auswahlkarten */

.cleaning-type-grid[b-8i2u8df5mf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem;
    align-items: stretch;
}

.cleaning-type-choice[b-8i2u8df5mf] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    min-height: 330px;
    padding: 1.6rem;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.055);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

    .cleaning-type-choice:hover[b-8i2u8df5mf] {
        color: inherit;
        text-decoration: none;
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
    }

    .cleaning-type-choice:focus-visible[b-8i2u8df5mf] {
        outline: 3px solid #0d6efd;
        outline-offset: 4px;
    }

/* Regelmäßige Reinigung – Blau */

.cleaning-type-choice-regular[b-8i2u8df5mf] {
    background: linear-gradient( 115deg, #ffffff 0%, #f1f6ff 30%, #dfeaff 65%, #cddfff 100% );
    border-color: #c4d8f8;
}

    .cleaning-type-choice-regular:hover[b-8i2u8df5mf] {
        border-color: #0d6efd;
    }

/* Einzelauftrag – Türkis */

.cleaning-type-choice-onetime[b-8i2u8df5mf] {
    background: linear-gradient( 115deg, #ffffff 0%, #effaf8 30%, #def5f0 65%, #bfece3 100% );
    border-color: #bce2db;
}

    .cleaning-type-choice-onetime:hover[b-8i2u8df5mf] {
        border-color: #0f9f91;
    }

/* Icons */

.cleaning-type-icon[b-8i2u8df5mf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 1.3rem;
    border-radius: 13px;
    font-size: 1.45rem;
    font-weight: 850;
}

.cleaning-type-icon-blue[b-8i2u8df5mf] {
    color: #0d6efd;
    background: #e5efff;
}

.cleaning-type-icon-teal[b-8i2u8df5mf] {
    color: #0f9488;
    background: #d8f4ed;
}

/* Kartentext */

.cleaning-type-choice-label[b-8i2u8df5mf] {
    margin-bottom: 0.4rem;
    color: #0d6efd;
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.cleaning-type-choice-label-teal[b-8i2u8df5mf] {
    color: #0f9488;
}

.cleaning-type-choice h3[b-8i2u8df5mf] {
    margin: 0;
    color: #172033;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.3;
}

.cleaning-type-choice-content > p[b-8i2u8df5mf] {
    margin: 0.7rem 0 1rem;
    color: #53657d;
    font-size: 0.92rem;
    line-height: 1.65;
}

/* Rhythmus- und Typ-Badges */

.cleaning-type-examples[b-8i2u8df5mf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.4rem;
}

    .cleaning-type-examples span[b-8i2u8df5mf] {
        display: inline-flex;
        align-items: center;
        min-height: 29px;
        padding: 0.3rem 0.65rem;
        color: #245fc7;
        background: rgba(255,255,255,0.8);
        border: 1px solid #cbdcf5;
        border-radius: 999px;
        font-size: 0.78rem;
        font-weight: 750;
    }

.cleaning-type-examples-teal span[b-8i2u8df5mf] {
    color: #0f766e;
    border-color: #bce3db;
}

/* Kartenaktionen */

.cleaning-type-choice-footer[b-8i2u8df5mf] {
    margin-top: auto;
}

.cleaning-type-action[b-8i2u8df5mf] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.7rem;
    min-height: 46px;
    max-width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.4;
    text-align: center;
}

.cleaning-type-action-blue[b-8i2u8df5mf] {
    color: #ffffff;
    background: #0d6efd;
    border-color: #0d6efd;
}

.cleaning-type-action-teal[b-8i2u8df5mf] {
    color: #ffffff;
    background: #0f9488;
    border-color: #0f9488;
}

.cleaning-type-choice-regular:hover
.cleaning-type-action-blue[b-8i2u8df5mf] {
    background: #0957c3;
}

.cleaning-type-choice-onetime:hover
.cleaning-type-action-teal[b-8i2u8df5mf] {
    background: #0a756c;
}

/* Zurück und Abbrechen */

.cleaning-type-bottom[b-8i2u8df5mf] {
    display: flex;
    justify-content: flex-start;
    margin-top: 1.5rem;
}

.cleaning-type-button[b-8i2u8df5mf] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    min-height: 46px;
    padding: 0.7rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.cleaning-type-button-secondary[b-8i2u8df5mf] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .cleaning-type-button-secondary:hover[b-8i2u8df5mf] {
        color: #ffffff;
        background: #475569;
        text-decoration: none;
    }

/* Lade- und Fehlerzustand */

.cleaning-type-loading[b-8i2u8df5mf] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

.cleaning-type-not-found[b-8i2u8df5mf] {
    max-width: 760px;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
}

    .cleaning-type-not-found h2[b-8i2u8df5mf] {
        margin: 0 0 0.5rem;
        color: #172033;
        font-size: 1.2rem;
        font-weight: 800;
    }

    .cleaning-type-not-found p[b-8i2u8df5mf] {
        margin-bottom: 1rem;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.6;
    }

/* Tablet */

@media (max-width: 1000px) {
    .cleaning-type-grid[b-8i2u8df5mf] {
        gap: 1rem;
    }

    .cleaning-type-choice[b-8i2u8df5mf] {
        padding: 1.2rem;
    }
}

/* Smartphone */

@media (max-width: 767.98px) {
    .cleaning-type-page[b-8i2u8df5mf] {
        padding-bottom: 1rem;
    }

    .cleaning-type-header[b-8i2u8df5mf] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

        .cleaning-type-header h1[b-8i2u8df5mf] {
            font-size: 1.9rem;
        }

    .cleaning-type-grid[b-8i2u8df5mf] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .cleaning-type-choice[b-8i2u8df5mf] {
        min-height: 0;
        padding: 1.2rem;
        border-radius: 14px;
    }

        .cleaning-type-choice h3[b-8i2u8df5mf] {
            font-size: 1.2rem;
        }

    .cleaning-type-action[b-8i2u8df5mf] {
        width: 100%;
    }

    .cleaning-type-header .cleaning-type-button[b-8i2u8df5mf],
    .cleaning-type-bottom .cleaning-type-button[b-8i2u8df5mf] {
        width: 100%;
    }
}
/* /Components/Pages/Admin/Cleanings/CleaningRecordDetails.razor.rz.scp.css */
.cleaning-record-page[b-zyoai2zv6g] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
}


/* =========================================================
   Laden
   ========================================================= */

.cleaning-record-loading[b-zyoai2zv6g] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 180px;
    color: #64748b;
    font-size: 0.95rem;
}


/* =========================================================
   Nicht gefunden
   ========================================================= */

.cleaning-record-not-found[b-zyoai2zv6g] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    max-width: 720px;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #fecaca;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}


.cleaning-record-not-found-icon[b-zyoai2zv6g] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    color: #ffffff;
    background: #dc3545;
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: 800;
}


.cleaning-record-not-found h1[b-zyoai2zv6g] {
    margin: 0 0 0.4rem;
    font-size: 1.3rem;
}


.cleaning-record-not-found p[b-zyoai2zv6g] {
    margin-bottom: 1rem;
    color: #64748b;
}


/* =========================================================
   Header
   ========================================================= */

.cleaning-record-header[b-zyoai2zv6g] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 1.5rem;
}


.cleaning-record-eyebrow[b-zyoai2zv6g] {
    margin-bottom: 0.35rem;
    color: #0d6efd;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}


.cleaning-record-header h1[b-zyoai2zv6g] {
    margin: 0;
    color: #172033;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 750;
    line-height: 1.15;
}


.cleaning-record-header-location[b-zyoai2zv6g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.55rem;
    color: #64748b;
    font-size: 0.95rem;
}


.cleaning-record-separator[b-zyoai2zv6g] {
    color: #cbd5e1;
}


.cleaning-record-header-status[b-zyoai2zv6g] {
    padding-top: 0.25rem;
}


/* =========================================================
   Status
   ========================================================= */

.cleaning-record-status[b-zyoai2zv6g] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 34px;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
}


.cleaning-record-status-dot[b-zyoai2zv6g] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}


.cleaning-record-status-completed[b-zyoai2zv6g] {
    color: #166534;
    background: #e8f7ed;
    border: 1px solid #b7e4c5;
}


    .cleaning-record-status-completed .cleaning-record-status-dot[b-zyoai2zv6g] {
        background: #198754;
    }


.cleaning-record-status-running[b-zyoai2zv6g] {
    color: #075985;
    background: #e8f3ff;
    border: 1px solid #bad9ff;
}


    .cleaning-record-status-running .cleaning-record-status-dot[b-zyoai2zv6g] {
        background: #0d6efd;
    }


.cleaning-record-status-neutral[b-zyoai2zv6g] {
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #dbe3ec;
}


    .cleaning-record-status-neutral .cleaning-record-status-dot[b-zyoai2zv6g] {
        background: #64748b;
    }


/* =========================================================
   Karten
   ========================================================= */

.cleaning-record-card[b-zyoai2zv6g],
.cleaning-record-section[b-zyoai2zv6g] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.045);
}


.cleaning-record-summary-card[b-zyoai2zv6g] {
    margin-bottom: 1.5rem;
    overflow: hidden;
}


/* =========================================================
   Zusammenfassung
   ========================================================= */

.cleaning-record-summary-main[b-zyoai2zv6g] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 1.5rem;
    background: linear-gradient( 110deg, #ffffff 0%, #ffffff 55%, #f5f9ff 100% );
    border-bottom: 1px solid #e8edf3;
}


.cleaning-record-summary-icon[b-zyoai2zv6g] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    color: #ffffff;
    background: linear-gradient( 145deg, #0d6efd, #4d91f7 );
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(13, 110, 253, 0.2);
    font-size: 1.25rem;
    font-weight: 800;
}


.cleaning-record-summary-label[b-zyoai2zv6g] {
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.065em;
}


.cleaning-record-summary-title[b-zyoai2zv6g] {
    margin-top: 0.15rem;
    color: #172033;
    font-size: 1.25rem;
    font-weight: 750;
}


.cleaning-record-summary-path[b-zyoai2zv6g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.88rem;
}


    .cleaning-record-summary-path span[b-zyoai2zv6g] {
        color: #cbd5e1;
    }


.cleaning-record-summary-grid[b-zyoai2zv6g] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}


.cleaning-record-info-item[b-zyoai2zv6g] {
    min-width: 0;
    padding: 1.15rem 1.35rem;
    border-right: 1px solid #edf1f5;
}


    .cleaning-record-info-item:last-child[b-zyoai2zv6g] {
        border-right: 0;
    }


.cleaning-record-info-label[b-zyoai2zv6g] {
    margin-bottom: 0.3rem;
    color: #7b8799;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}


.cleaning-record-info-value[b-zyoai2zv6g] {
    overflow-wrap: anywhere;
    color: #1e293b;
    font-size: 0.92rem;
    font-weight: 650;
}


/* =========================================================
   Abschnitte
   ========================================================= */

.cleaning-record-section[b-zyoai2zv6g] {
    margin-bottom: 1.5rem;
    padding: 1.4rem 1.5rem;
}


.cleaning-record-section-header[b-zyoai2zv6g] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.2rem;
}


    .cleaning-record-section-header h2[b-zyoai2zv6g] {
        margin: 0;
        color: #172033;
        font-size: 1.2rem;
        font-weight: 750;
    }


    .cleaning-record-section-header p[b-zyoai2zv6g] {
        margin: 0.25rem 0 0;
        color: #64748b;
        font-size: 0.87rem;
    }


.cleaning-record-task-summary[b-zyoai2zv6g] {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    color: #64748b;
    white-space: nowrap;
}


    .cleaning-record-task-summary strong[b-zyoai2zv6g] {
        color: #198754;
        font-size: 1.35rem;
    }


    .cleaning-record-task-summary span[b-zyoai2zv6g] {
        font-size: 0.78rem;
    }


/* =========================================================
   Fortschritt
   ========================================================= */

.cleaning-record-progress[b-zyoai2zv6g] {
    margin-bottom: 1.2rem;
}


.cleaning-record-progress-top[b-zyoai2zv6g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.45rem;
    color: #64748b;
    font-size: 0.78rem;
}


    .cleaning-record-progress-top strong[b-zyoai2zv6g] {
        color: #198754;
    }


.cleaning-record-progress-track[b-zyoai2zv6g] {
    height: 8px;
    overflow: hidden;
    background: #edf2f7;
    border-radius: 999px;
}


.cleaning-record-progress-bar[b-zyoai2zv6g] {
    height: 100%;
    background: linear-gradient( 90deg, #198754, #43b77a );
    border-radius: inherit;
    transition: width 0.25s ease;
}


/* =========================================================
   Aufgaben
   ========================================================= */

.cleaning-record-task-list[b-zyoai2zv6g] {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 12px;
}


.cleaning-record-task-row[b-zyoai2zv6g] {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    min-height: 62px;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid #edf1f5;
}


    .cleaning-record-task-row:last-child[b-zyoai2zv6g] {
        border-bottom: 0;
    }


.cleaning-record-task-row-completed[b-zyoai2zv6g] {
    background: linear-gradient( 110deg, #ffffff 0%, #ffffff 58%, #f4fbf6 100% );
}


.cleaning-record-task-row-open[b-zyoai2zv6g] {
    background: linear-gradient( 110deg, #ffffff 0%, #ffffff 58%, #fff7f7 100% );
}


.cleaning-record-task-icon[b-zyoai2zv6g] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.95rem;
    font-weight: 800;
}


.cleaning-record-task-icon-completed[b-zyoai2zv6g] {
    color: #ffffff;
    background: #198754;
}


.cleaning-record-task-icon-open[b-zyoai2zv6g] {
    color: #ffffff;
    background: #dc3545;
}


.cleaning-record-task-name[b-zyoai2zv6g] {
    color: #243044;
    font-size: 0.94rem;
    font-weight: 600;
}


.cleaning-record-task-state[b-zyoai2zv6g] {
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
}


.cleaning-record-task-state-completed[b-zyoai2zv6g] {
    color: #166534;
    background: #e9f7ee;
}


.cleaning-record-task-state-open[b-zyoai2zv6g] {
    color: #991b1b;
    background: #feecec;
}


/* =========================================================
   Leerzustand
   ========================================================= */

.cleaning-record-empty[b-zyoai2zv6g] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}


.cleaning-record-empty-icon[b-zyoai2zv6g] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    color: #64748b;
    background: #e8edf3;
    border-radius: 50%;
    font-weight: 800;
}


.cleaning-record-empty strong[b-zyoai2zv6g] {
    display: block;
    color: #243044;
}


.cleaning-record-empty span[b-zyoai2zv6g] {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.85rem;
}


/* =========================================================
   Kommentar
   ========================================================= */

.cleaning-record-comment[b-zyoai2zv6g] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.7rem;
    padding: 1rem 1.1rem;
    color: #334155;
    background: #f8fafc;
    border-left: 4px solid #0d6efd;
    border-radius: 0 10px 10px 0;
    line-height: 1.55;
}


.cleaning-record-comment-mark[b-zyoai2zv6g] {
    color: #0d6efd;
    font-family: Georgia, serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 0.8;
}


/* =========================================================
   Aktionen
   ========================================================= */

.cleaning-record-actions[b-zyoai2zv6g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 0.25rem;
}


.cleaning-record-back-button[b-zyoai2zv6g],
.cleaning-record-pdf-button[b-zyoai2zv6g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}


.cleaning-record-back-button[b-zyoai2zv6g] {
    color: #334155;
    background: #ffffff;
    border: 1px solid #cbd5e1;
}


    .cleaning-record-back-button:hover[b-zyoai2zv6g] {
        color: #172033;
        background: #f8fafc;
    }


.cleaning-record-pdf-button[b-zyoai2zv6g] {
    color: #ffffff;
    background: #198754;
    border: 1px solid #198754;
    box-shadow: 0 5px 14px rgba(25, 135, 84, 0.16);
}


    .cleaning-record-pdf-button:hover[b-zyoai2zv6g] {
        color: #ffffff;
        background: #157347;
        border-color: #157347;
        text-decoration: none;
        transform: translateY(-1px);
    }


.cleaning-record-pdf-icon[b-zyoai2zv6g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 24px;
    padding: 0 0.3rem;
    color: #198754;
    background: #ffffff;
    border-radius: 5px;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 900px) {

    .cleaning-record-summary-grid[b-zyoai2zv6g] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .cleaning-record-info-item:nth-child(2)[b-zyoai2zv6g] {
        border-right: 0;
    }


    .cleaning-record-info-item:nth-child(-n + 2)[b-zyoai2zv6g] {
        border-bottom: 1px solid #edf1f5;
    }
}


/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 600px) {

    .cleaning-record-page[b-zyoai2zv6g] {
        padding-bottom: 1rem;
    }


    .cleaning-record-header[b-zyoai2zv6g] {
        flex-direction: column;
        gap: 0.9rem;
        margin-bottom: 1rem;
    }


    .cleaning-record-header-status[b-zyoai2zv6g] {
        padding-top: 0;
    }


    .cleaning-record-summary-main[b-zyoai2zv6g] {
        align-items: flex-start;
        padding: 1rem;
    }


    .cleaning-record-summary-icon[b-zyoai2zv6g] {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 12px;
    }


    .cleaning-record-summary-grid[b-zyoai2zv6g] {
        grid-template-columns: 1fr;
    }


    .cleaning-record-info-item[b-zyoai2zv6g] {
        padding: 0.9rem 1rem;
        border-right: 0;
        border-bottom: 1px solid #edf1f5;
    }


        .cleaning-record-info-item:last-child[b-zyoai2zv6g] {
            border-bottom: 0;
        }


    .cleaning-record-section[b-zyoai2zv6g] {
        padding: 1rem;
    }


    .cleaning-record-section-header[b-zyoai2zv6g] {
        flex-direction: column;
        gap: 0.5rem;
    }


    .cleaning-record-task-row[b-zyoai2zv6g] {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 0.7rem;
        padding: 0.8rem;
    }


    .cleaning-record-task-state[b-zyoai2zv6g] {
        grid-column: 2;
        justify-self: start;
    }


    .cleaning-record-actions[b-zyoai2zv6g] {
        flex-direction: column-reverse;
        align-items: stretch;
    }


    .cleaning-record-back-button[b-zyoai2zv6g],
    .cleaning-record-pdf-button[b-zyoai2zv6g] {
        width: 100%;
        min-height: 48px;
    }
}
/* /Components/Pages/Admin/Cleanings/CleaningRecords.razor.rz.scp.css */

/* =========================================================
   CleanDation – Reinigungsnachweise
   ========================================================= */

.records-page[b-876bhjnsdu] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* =========================================================
   Seitenüberschrift
   ========================================================= */

.records-header[b-876bhjnsdu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.6rem;
}

    .records-header h1[b-876bhjnsdu] {
        margin: 0;
        color: #172033;
        font-size: clamp(2rem, 3vw, 2.6rem);
        font-weight: 750;
        line-height: 1.15;
    }

    .records-header p[b-876bhjnsdu] {
        margin: 0.5rem 0 0;
        color: #64748b;
        font-size: 1rem;
    }

.records-header-count[b-876bhjnsdu] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 170px;
    padding: 0.8rem 1.1rem;
    background: linear-gradient( 115deg, #ffffff 0%, #f2faf5 35%, #c9e9d6 100% );
    border: 1px solid #cce7d6;
    border-radius: 13px;
}

    .records-header-count strong[b-876bhjnsdu] {
        color: #198754;
        font-size: 1.9rem;
        font-weight: 800;
        line-height: 1.1;
    }

    .records-header-count span[b-876bhjnsdu] {
        margin-top: 0.2rem;
        color: #475569;
        font-size: 0.82rem;
        font-weight: 650;
        white-space: nowrap;
    }

.records-loading[b-876bhjnsdu] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

/* =========================================================
   Filterbereich
   ========================================================= */

.records-filter-panel[b-876bhjnsdu] {
    margin-bottom: 1.5rem;
    padding: 1.35rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.045);
}

.records-eyebrow[b-876bhjnsdu] {
    margin-bottom: 0.35rem;
    color: #0d6efd;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.records-eyebrow-success[b-876bhjnsdu] {
    color: #198754;
}

.records-filter-heading h2[b-876bhjnsdu] {
    margin: 0;
    color: #172033;
    font-size: 1.2rem;
    font-weight: 750;
}

.records-filter-heading p[b-876bhjnsdu] {
    margin: 0.35rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
}

.records-filter-grid[b-876bhjnsdu] {
    display: grid;
    grid-template-columns: minmax(190px, 1.3fr) minmax(170px, 0.9fr) minmax(190px, 1fr) auto;
    align-items: end;
    gap: 1rem;
    margin-top: 1.25rem;
}

.records-filter-field[b-876bhjnsdu] {
    min-width: 0;
}

    .records-filter-field label[b-876bhjnsdu] {
        display: block;
        margin-bottom: 0.45rem;
        color: #334155;
        font-size: 0.86rem;
        font-weight: 750;
    }

    .records-filter-field .form-select[b-876bhjnsdu],
    .records-filter-field .form-control[b-876bhjnsdu] {
        display: block;
        width: 100%;
        min-height: 46px;
        padding: 0.6rem 0.8rem;
        color: #172033;
        background-color: #ffffff;
        border: 1px solid #cdd8e6;
        border-radius: 10px;
        font-size: 0.92rem;
    }

        .records-filter-field .form-select:focus[b-876bhjnsdu],
        .records-filter-field .form-control:focus[b-876bhjnsdu] {
            border-color: #0d6efd;
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
        }

.records-date-controls[b-876bhjnsdu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

    .records-date-controls .form-control[b-876bhjnsdu] {
        min-width: 0;
    }

.records-date-clear[b-876bhjnsdu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    padding: 0;
    color: #64748b;
    background: #ffffff;
    border: 1px solid #cdd8e6;
    border-radius: 10px;
    font-size: 1.5rem;
    cursor: pointer;
}

    .records-date-clear:hover[b-876bhjnsdu] {
        color: #dc3545;
        border-color: #dc3545;
    }

.records-filter-reset[b-876bhjnsdu] {
    min-width: 0;
}

.records-reset-button[b-876bhjnsdu] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 46px;
    padding: 0.6rem 1rem;
    color: #475569;
    background: #ffffff;
    border: 1px solid #aebdcc;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 750;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

    .records-reset-button:hover[b-876bhjnsdu] {
        color: #0d6efd;
        background: #f1f6ff;
        border-color: #0d6efd;
    }

/* =========================================================
   Ergebnisüberschrift
   ========================================================= */

.records-results[b-876bhjnsdu] {
    width: 100%;
}

.records-results-header[b-876bhjnsdu] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}

    .records-results-header h2[b-876bhjnsdu] {
        margin: 0;
        color: #172033;
        font-size: 1.3rem;
        font-weight: 750;
    }

    .records-results-header p[b-876bhjnsdu] {
        margin: 0.35rem 0 0;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.5;
    }

.records-results-count[b-876bhjnsdu] {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    color: #64748b;
    font-size: 0.86rem;
    white-space: nowrap;
}

    .records-results-count strong[b-876bhjnsdu] {
        color: #198754;
        font-size: 1.2rem;
        font-weight: 800;
    }

.records-page-info[b-876bhjnsdu] {
    margin-bottom: 0.75rem;
    color: #64748b;
    font-size: 0.85rem;
    text-align: right;
}

/* =========================================================
   Nachweisliste
   ========================================================= */

.records-list[b-876bhjnsdu] {
    display: grid;
    gap: 0.7rem;
}

/* =========================================================
   Nachweiskarten – platzsparend
   ========================================================= */

.record-card[b-876bhjnsdu] {
    min-width: 0;
    padding: 0.85rem 1.1rem;
    border: 1px solid #cce7d6;
    border-radius: 13px;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.045);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .record-card:hover[b-876bhjnsdu] {
        transform: translateY(-1px);
        box-shadow: 0 7px 20px rgba(15, 23, 42, 0.07);
    }

.cleaning-record-card-completed[b-876bhjnsdu] {
    background: linear-gradient( 110deg, #ffffff 0%, #f2faf5 30%, #e1f2e7 65%, #c9e9d6 100% );
    border-color: #cce7d6;
}

    .cleaning-record-card-completed:hover[b-876bhjnsdu] {
        background: linear-gradient( 110deg, #ffffff 0%, #edf9f1 30%, #bce4cc 100% );
    }

/* Einmalreinigungen */

.cleaning-record-card-onetime[b-876bhjnsdu] {
    border: 1px solid #bfe3db;
    border-left: 4px solid #14b8a6;
    background: linear-gradient( 110deg, #ffffff 0%, #f0faf8 30%, #def5f0 65%, #c6ebdf 100% );
}

    .cleaning-record-card-onetime:hover[b-876bhjnsdu] {
        background: linear-gradient( 110deg, #ffffff 0%, #eaf8f5 30%, #b5e5da 100% );
    }

/* =========================================================
   Kartenkopf – weniger Leerraum
   ========================================================= */

.record-top[b-876bhjnsdu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    margin: 0;
    padding: 0 0 0.55rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.18);
}

.record-title-group[b-876bhjnsdu] {
    min-width: 0;
}

.record-title-line[b-876bhjnsdu],
.record-onetime-title-box[b-876bhjnsdu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.record-title[b-876bhjnsdu] {
    margin: 0;
    color: #172033;
    font-size: 1.1rem;
    font-weight: 650;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.record-location[b-876bhjnsdu] {
    margin-top: 0.18rem;
    color: #53657d;
    font-size: 0.83rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.record-separator[b-876bhjnsdu] {
    margin: 0 0.2rem;
    color: #94a3b8;
}

.record-onetime-label[b-876bhjnsdu] {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.2rem 0.55rem;
    color: #0c766d;
    background: #d8f4ed;
    border: 1px solid #b4e3d8;
    border-radius: 8px;
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.record-status[b-876bhjnsdu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 26px;
    padding: 0.28rem 0.65rem;
    color: #ffffff;
    background: #198754;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

/* =========================================================
   Mitarbeiter, Zeitpunkte und Aktion
   Gemeinsame kompakte Informationszeile
   ========================================================= */

.record-meta[b-876bhjnsdu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    margin: 0;
    padding: 0.55rem 0 0;
    border: 0;
}

.record-meta-item[b-876bhjnsdu] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.2rem;
}

.record-meta-label[b-876bhjnsdu] {
    color: #6d7e95;
    font-size: 0.69rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.record-meta-value[b-876bhjnsdu] {
    color: #26374c;
    font-size: 0.86rem;
    font-weight: 400;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* =========================================================
   Detailsbutton
   ========================================================= */

.record-actions[b-876bhjnsdu] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-self: center;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.record-details-button[b-876bhjnsdu] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    min-height: 40px;
    padding: 0.5rem 0.85rem;
    color: #0d6efd;
    background: #ffffff;
    border: 1px solid #0d6efd;
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease;
}

    .record-details-button span[b-876bhjnsdu] {
        font-size: 1rem;
        font-weight: 800;
        line-height: 1;
    }

    .record-details-button:hover[b-876bhjnsdu] {
        color: #ffffff;
        background: #0d6efd;
        text-decoration: none;
    }

/* =========================================================
   Leerzustand
   ========================================================= */

.records-empty[b-876bhjnsdu] {
    padding: 1.5rem;
    background: linear-gradient( 115deg, #ffffff 0%, #f4faf6 45%, #e2f3e8 100% );
    border: 1px solid #cbe6d4;
    border-radius: 14px;
}

    .records-empty strong[b-876bhjnsdu] {
        display: block;
        color: #198754;
        font-size: 1.05rem;
        font-weight: 800;
    }

    .records-empty p[b-876bhjnsdu] {
        margin: 0.4rem 0 0;
        color: #526579;
        font-size: 0.9rem;
        line-height: 1.5;
    }

/* =========================================================
   Pagination
   ========================================================= */

.records-pagination[b-876bhjnsdu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 12px;
}

.records-pagination-info[b-876bhjnsdu] {
    color: #64748b;
    font-size: 0.9rem;
}

    .records-pagination-info strong[b-876bhjnsdu] {
        color: #172033;
    }

.records-page-button[b-876bhjnsdu] {
    min-height: 42px;
    padding: 0.6rem 1rem;
    color: #0d6efd;
    background: #ffffff;
    border: 1px solid #cddff9;
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 750;
    cursor: pointer;
}

    .records-page-button:hover:not(:disabled)[b-876bhjnsdu] {
        color: #ffffff;
        background: #0d6efd;
        border-color: #0d6efd;
    }

    .records-page-button:disabled[b-876bhjnsdu] {
        color: #9aa8b9;
        background: #f8fafc;
        border-color: #e2e8f0;
        cursor: not-allowed;
    }

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {

    .records-filter-grid[b-876bhjnsdu] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .record-meta[b-876bhjnsdu] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .record-actions[b-876bhjnsdu] {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .records-page[b-876bhjnsdu] {
        padding-bottom: 1rem;
    }

    .records-header[b-876bhjnsdu] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

        .records-header h1[b-876bhjnsdu] {
            font-size: 2rem;
        }

    .records-header-count[b-876bhjnsdu] {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0.6rem;
        min-width: 0;
    }

        .records-header-count strong[b-876bhjnsdu] {
            font-size: 1.6rem;
        }

        .records-header-count span[b-876bhjnsdu] {
            margin-top: 0;
        }

    .records-filter-panel[b-876bhjnsdu] {
        padding: 1rem;
    }

    .records-filter-grid[b-876bhjnsdu] {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .records-filter-reset[b-876bhjnsdu] {
        margin-top: 0.3rem;
    }

    .records-results-header[b-876bhjnsdu] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }

        .records-results-header h2[b-876bhjnsdu] {
            font-size: 1.18rem;
        }

    .record-card[b-876bhjnsdu] {
        padding: 0.9rem;
        border-radius: 13px;
    }

    .record-top[b-876bhjnsdu] {
        align-items: flex-start;
        gap: 0.6rem;
    }

    .record-title[b-876bhjnsdu] {
        font-size: 1.05rem;
    }

    .record-meta[b-876bhjnsdu] {
        grid-template-columns: 1fr 1fr;
        gap: 0.7rem;
        padding-top: 0.65rem;
    }

    .record-meta-item:first-child[b-876bhjnsdu] {
        grid-column: 1 / -1;
    }

    .record-actions[b-876bhjnsdu] {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .record-details-button[b-876bhjnsdu] {
        width: 100%;
        min-height: 48px;
    }

    .records-pagination[b-876bhjnsdu] {
        flex-wrap: wrap;
    }

    .records-pagination-info[b-876bhjnsdu] {
        order: -1;
        width: 100%;
        text-align: center;
    }

    .records-page-button[b-876bhjnsdu] {
        flex: 1;
    }
}

/* =========================================================
   Sehr kleine Smartphones
   ========================================================= */

@media (max-width: 430px) {

    .record-meta[b-876bhjnsdu] {
        grid-template-columns: 1fr;
    }

    .record-meta-item:first-child[b-876bhjnsdu] {
        grid-column: auto;
    }

    .records-header-count span[b-876bhjnsdu] {
        font-size: 0.76rem;
    }
}

/* =========================================================
   Tastaturbedienung
   ========================================================= */

.records-page a:focus-visible[b-876bhjnsdu],
.records-page button:focus-visible[b-876bhjnsdu],
.records-page input:focus-visible[b-876bhjnsdu],
.records-page select:focus-visible[b-876bhjnsdu] {
    outline: 3px solid #80b8ff;
    outline-offset: 3px;
}

/* =========================================================
   Reduzierte Animationen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .record-card[b-876bhjnsdu],
    .record-details-button[b-876bhjnsdu],
    .records-reset-button[b-876bhjnsdu] {
        transition: none;
    }
}
/* /Components/Pages/Admin/Cleanings/OpenCleanings.razor.rz.scp.css */

/* =========================================================
   CleanDation – Offene Reinigungen
   ========================================================= */

.open-page[b-pfo3wq14it] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* Seitenüberschrift */

.open-page-header[b-pfo3wq14it] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.6rem;
}

    .open-page-header h1[b-pfo3wq14it] {
        margin: 0;
        color: #172033;
        font-size: clamp(2rem, 3vw, 2.6rem);
        font-weight: 750;
        line-height: 1.15;
    }

    .open-page-header p[b-pfo3wq14it] {
        margin: 0.5rem 0 0;
        color: #64748b;
        font-size: 1rem;
    }

.open-header-count[b-pfo3wq14it] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 170px;
    padding: 0.8rem 1.1rem;
    background: linear-gradient(115deg, #ffffff 0%, #fff8e9 55%, #ffedc7 100%);
    border: 1px solid #eed8a8;
    border-radius: 13px;
}

    .open-header-count strong[b-pfo3wq14it] {
        color: #a96900;
        font-size: 1.9rem;
        font-weight: 800;
        line-height: 1.1;
    }

    .open-header-count span[b-pfo3wq14it] {
        margin-top: 0.2rem;
        color: #475569;
        font-size: 0.82rem;
        font-weight: 650;
        white-space: nowrap;
    }

/* Laden */

.open-loading[b-pfo3wq14it] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

/* =========================================================
   Filter
   ========================================================= */

.open-filter-panel[b-pfo3wq14it] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 1.25rem;
    padding: 1.35rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.045);
}

.open-eyebrow[b-pfo3wq14it] {
    margin-bottom: 0.35rem;
    color: #0d6efd;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.open-filter-intro h2[b-pfo3wq14it] {
    margin: 0;
    color: #172033;
    font-size: 1.15rem;
    font-weight: 750;
}

.open-filter-intro p[b-pfo3wq14it] {
    margin: 0.4rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
}

.open-filter-controls[b-pfo3wq14it] {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) minmax(160px, 0.8fr);
    gap: 0.85rem;
    width: 100%;
    max-width: 600px;
}

.open-filter-field label[b-pfo3wq14it],
.open-select-field label[b-pfo3wq14it] {
    display: block;
    margin-bottom: 0.45rem;
    color: #334155;
    font-size: 0.86rem;
    font-weight: 750;
}

.open-filter-field .form-control[b-pfo3wq14it],
.open-filter-field .form-select[b-pfo3wq14it],
.open-select-field .form-select[b-pfo3wq14it] {
    min-height: 45px;
    padding: 0.6rem 0.8rem;
    color: #172033;
    border: 1px solid #cdd8e6;
    border-radius: 10px;
    font-size: 0.92rem;
}

    .open-filter-field .form-control:focus[b-pfo3wq14it],
    .open-filter-field .form-select:focus[b-pfo3wq14it],
    .open-select-field .form-select:focus[b-pfo3wq14it] {
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
    }

/* =========================================================
   Tagesübersicht
   ========================================================= */

.open-summary[b-pfo3wq14it] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.3rem;
    padding: 1rem 1.2rem;
    background: linear-gradient(115deg, #ffffff 0%, #ffffff 55%, #fff7e6 100%);
    border: 1px solid #e8e0cc;
    border-radius: 13px;
}

.open-summary-date[b-pfo3wq14it],
.open-summary-count[b-pfo3wq14it] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

    .open-summary-date span[b-pfo3wq14it] {
        color: #a96900;
        font-size: 0.73rem;
        font-weight: 850;
        letter-spacing: 0.06em;
    }

    .open-summary-date strong[b-pfo3wq14it] {
        color: #243044;
        font-size: 1rem;
    }

.open-summary-count[b-pfo3wq14it] {
    align-items: flex-end;
}

    .open-summary-count strong[b-pfo3wq14it] {
        color: #a96900;
        font-size: 1.35rem;
        line-height: 1;
    }

    .open-summary-count span[b-pfo3wq14it] {
        color: #64748b;
        font-size: 0.82rem;
    }

/* =========================================================
   Überfällige Aufträge
   ========================================================= */

.open-overdue-notice[b-pfo3wq14it] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
    align-items: center;
    margin-bottom: 1.3rem;
    padding: 0.95rem 1.1rem;
    color: #9d2436;
    background: linear-gradient(105deg, #fffafa 0%, #fff0f2 50%, #f8d8dd 100%);
    border: 1px solid #edc1c9;
    border-radius: 12px;
    font-size: 0.9rem;
}

    .open-overdue-notice span[b-pfo3wq14it] {
        color: #75515a;
    }

/* =========================================================
   Ergebnisüberschrift
   ========================================================= */

.open-results[b-pfo3wq14it] {
    width: 100%;
}

.open-results-header[b-pfo3wq14it] {
    margin-bottom: 0.9rem;
}

    .open-results-header h2[b-pfo3wq14it] {
        margin: 0;
        color: #172033;
        font-size: 1.3rem;
        font-weight: 750;
    }

    .open-results-header p[b-pfo3wq14it] {
        margin: 0.35rem 0 0;
        color: #64748b;
        font-size: 0.9rem;
    }

/* =========================================================
   Reinigungskarten – kompakt
   ========================================================= */

.open-record-list[b-pfo3wq14it] {
    display: grid;
    gap: 0.7rem;
}

.open-record-card[b-pfo3wq14it] {
    min-width: 0;
    overflow: hidden;
    padding: 0.85rem 1.1rem;
    border: 1px solid #e7d9b8;
    border-radius: 13px;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.045);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .open-record-card:hover[b-pfo3wq14it] {
        transform: translateY(-1px);
        box-shadow: 0 7px 20px rgba(15, 23, 42, 0.07);
    }

.open-record-pending[b-pfo3wq14it] {
    background: linear-gradient(110deg, #ffffff 0%, #fffaf0 30%, #fff1d2 65%, #ffe5aa 100%);
    border-color: #ebd6a8;
}

.open-record-running[b-pfo3wq14it] {
    background: linear-gradient(110deg, #ffffff 0%, #f3f7ff 30%, #e3edff 65%, #cddfff 100%);
    border-color: #ccdcf6;
}

.open-record-onetime[b-pfo3wq14it] {
    background: linear-gradient(110deg, #ffffff 0%, #effaf8 30%, #dff5f0 65%, #bfece3 100%);
    border-color: #c0e4dd;
}

.open-record-overdue[b-pfo3wq14it] {
    background: linear-gradient(110deg, #ffffff 0%, #fff4f5 30%, #fce4e8 65%, #f5cbd3 100%);
    border-color: #efc9cf;
}

/* =========================================================
   Kartenkopf
   ========================================================= */

.open-record-header[b-pfo3wq14it] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    margin: 0;
    padding: 0 0 0.55rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.18);
}

.open-record-heading[b-pfo3wq14it] {
    min-width: 0;
}

.open-record-title-line[b-pfo3wq14it] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

    .open-record-title-line h3[b-pfo3wq14it] {
        margin: 0;
        color: #172033;
        font-size: 1.1rem;
        font-weight: 650;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

.open-record-location[b-pfo3wq14it] {
    margin-top: 0.18rem;
    color: #53657d;
    font-size: 0.83rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

    .open-record-location span[b-pfo3wq14it] {
        margin: 0 0.2rem;
        color: #94a3b8;
    }

.open-onetime-label[b-pfo3wq14it] {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.2rem 0.55rem;
    color: #0c766d;
    background: #d8f4ed;
    border: 1px solid #b4e3d8;
    border-radius: 7px;
    font-size: 0.73rem;
    font-weight: 800;
}

.open-status[b-pfo3wq14it] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 26px;
    padding: 0.28rem 0.65rem;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.open-status-running[b-pfo3wq14it] {
    background: #0d6efd;
}

.open-status-overdue[b-pfo3wq14it] {
    background: #dc3545;
}

.open-status-pending[b-pfo3wq14it] {
    color: #604300;
    background: #f3c34e;
}

/* =========================================================
   Metadaten – weniger vertikaler Abstand
   ========================================================= */

.open-record-meta[b-pfo3wq14it] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0.65rem 0 0;
}

.open-meta-item[b-pfo3wq14it] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.open-meta-label[b-pfo3wq14it],
.open-assignment-label[b-pfo3wq14it] {
    color: #6d7e95;
    font-size: 0.69rem;
    font-weight: 650;
    letter-spacing: 0.035em;
}

.open-meta-value[b-pfo3wq14it] {
    color: #26374c;
    font-size: 0.86rem;
    font-weight: 400;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.open-value-running[b-pfo3wq14it] {
    color: #0d6efd;
}

.open-value-overdue[b-pfo3wq14it] {
    color: #dc3545;
}

/* =========================================================
   Zugewiesene Personen
   ========================================================= */

.open-assignment[b-pfo3wq14it] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.65rem;
    margin-top: 0.55rem;
    padding: 0.55rem 0 0;
    border-top: 1px solid rgba(100, 116, 139, 0.17);
    font-size: 0.84rem;
}

    .open-assignment strong[b-pfo3wq14it] {
        color: #26374c;
        font-size: 0.86rem;
        font-weight: 400;
    }

.open-assignment-date[b-pfo3wq14it] {
    color: #53657d;
    font-size: 0.82rem;
}

.open-employee-chip[b-pfo3wq14it] {
    display: inline-flex;
    padding: 0.3rem 0.55rem;
    color: #334155;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid #dce5ef;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 650;
}

/* =========================================================
   Manuelles Abschlussformular
   ========================================================= */

.open-manual-panel[b-pfo3wq14it] {
    margin-top: 0.8rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(203, 213, 225, 0.8);
    border-radius: 12px;
}

.open-action-intro h4[b-pfo3wq14it] {
    margin: 0;
    color: #172033;
    font-size: 1.02rem;
    font-weight: 750;
}

.open-action-intro p[b-pfo3wq14it] {
    margin: 0.35rem 0 0;
    color: #64748b;
    font-size: 0.87rem;
    line-height: 1.5;
}

.open-action-controls[b-pfo3wq14it] {
    margin-top: 1rem;
}

.open-select-field[b-pfo3wq14it] {
    width: 100%;
    max-width: 540px;
}

.open-original-assignment[b-pfo3wq14it] {
    margin-top: 0.65rem;
    color: #64748b;
    font-size: 0.84rem;
}

    .open-original-assignment strong[b-pfo3wq14it] {
        color: #334155;
    }

.open-no-assignees[b-pfo3wq14it] {
    margin-top: 0.85rem;
    padding: 0.8rem;
    color: #8a5900;
    background: #fff1d4;
    border: 1px solid #eed8a8;
    border-radius: 9px;
    font-size: 0.84rem;
    line-height: 1.5;
}

/* =========================================================
   Buttons – näher an den Informationen
   ========================================================= */

.open-actions[b-pfo3wq14it] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.65rem;
}

.open-button[b-pfo3wq14it] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 42px;
    padding: 0.55rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.83rem;
    font-weight: 750;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.open-button-outline[b-pfo3wq14it] {
    color: #0d6efd;
    background: #ffffff;
    border-color: #0d6efd;
}

    .open-button-outline:hover[b-pfo3wq14it] {
        color: #ffffff;
        background: #0d6efd;
    }

.open-button-success[b-pfo3wq14it] {
    color: #ffffff;
    background: #198754;
    border-color: #198754;
}

    .open-button-success:hover:not(:disabled)[b-pfo3wq14it] {
        color: #ffffff;
        background: #136c43;
        border-color: #136c43;
    }

.open-button:disabled[b-pfo3wq14it] {
    opacity: 0.5;
    cursor: not-allowed;
}

.open-button span[b-pfo3wq14it] {
    font-size: 1.05rem;
    font-weight: 800;
}

.open-card-actions[b-pfo3wq14it] {
    justify-content: space-between;
}

.open-record-details-action[b-pfo3wq14it] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: auto;
}

.open-record-details-button[b-pfo3wq14it] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 42px;
    padding: 0.55rem 0.85rem;
    color: #0d6efd;
    background: #ffffff;
    border: 1px solid #0d6efd;
    border-radius: 9px;
    font-size: 0.83rem;
    font-weight: 750;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

    .open-record-details-button:hover[b-pfo3wq14it] {
        color: #ffffff;
        background: #0d6efd;
        text-decoration: none;
    }

/* =========================================================
   Detailansicht – unverändertes Design
   ========================================================= */

.open-detail-header[b-pfo3wq14it] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

    .open-detail-header h1[b-pfo3wq14it] {
        margin: 0;
        color: #172033;
        font-size: clamp(2rem, 3vw, 2.6rem);
        font-weight: 750;
        line-height: 1.2;
    }

    .open-detail-header p[b-pfo3wq14it] {
        margin: 0.5rem 0 0;
        color: #64748b;
        font-size: 0.95rem;
    }

.open-detail-back[b-pfo3wq14it] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.65rem 1rem;
    color: #334155;
    background: #ffffff;
    border: 1px solid #aebdcc;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

    .open-detail-back:hover[b-pfo3wq14it] {
        color: #0d6efd;
        border-color: #0d6efd;
        text-decoration: none;
    }

.open-detail-title-card[b-pfo3wq14it] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    padding: 1.5rem;
    background: linear-gradient(115deg, #ffffff 0%, #f1f6ff 35%, #d5e4ff 100%);
    border: 1px solid #c9dbf7;
    border-radius: 16px;
}

    .open-detail-title-card h2[b-pfo3wq14it] {
        margin: 0;
        color: #172033;
        font-size: 1.7rem;
        font-weight: 800;
    }

    .open-detail-title-card p[b-pfo3wq14it] {
        margin: 0.4rem 0 0;
        color: #53657d;
        font-size: 0.93rem;
    }

.open-detail-separator[b-pfo3wq14it] {
    margin: 0 0.35rem;
    color: #94a3b8;
}

.open-detail-recurring-label[b-pfo3wq14it] {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.8rem;
    color: #0d6efd;
    background: #e7f0ff;
    border: 1px solid #b7d1ff;
    border-radius: 9px;
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
}

.open-detail-grid[b-pfo3wq14it] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.open-detail-section[b-pfo3wq14it] {
    min-width: 0;
    padding: 1.5rem;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.05);
}

    .open-detail-section h2[b-pfo3wq14it] {
        margin: 0;
        color: #172033;
        font-size: 1.3rem;
        font-weight: 750;
    }

    .open-detail-section > p[b-pfo3wq14it] {
        margin: 0.5rem 0 1.2rem;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.5;
    }

.open-detail-info[b-pfo3wq14it] {
    background: linear-gradient(115deg, #ffffff 0%, #f1f6ff 35%, #d5e4ff 100%);
    border-color: #c9dbf7;
}

.open-detail-tasks[b-pfo3wq14it] {
    background: linear-gradient(115deg, #ffffff 0%, #f1faf4 35%, #d5efdf 100%);
    border-color: #bde2cb;
}

.open-detail-green[b-pfo3wq14it] {
    color: #198754;
}

.open-detail-info-list[b-pfo3wq14it] {
    margin-top: 1.2rem;
}

.open-detail-info-row[b-pfo3wq14it] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(100, 116, 139, 0.15);
}

    .open-detail-info-row:last-child[b-pfo3wq14it] {
        border-bottom: none;
    }

    .open-detail-info-row > span[b-pfo3wq14it] {
        color: #6d7e95;
        font-size: 0.73rem;
        font-weight: 800;
        letter-spacing: 0.045em;
    }

    .open-detail-info-row > strong[b-pfo3wq14it] {
        color: #26374c;
        font-size: 0.9rem;
        font-weight: 750;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .open-detail-info-row .open-value-running[b-pfo3wq14it] {
        color: #0d6efd;
    }

    .open-detail-info-row .open-value-overdue[b-pfo3wq14it] {
        color: #dc3545;
    }

.open-detail-task-list[b-pfo3wq14it] {
    display: grid;
    gap: 0.7rem;
}

.open-detail-task[b-pfo3wq14it] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 52px;
    padding: 0.8rem 1rem;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid #cde5d5;
    border-radius: 10px;
}

.open-detail-task-number[b-pfo3wq14it] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    color: #198754;
    background: #e2f4e9;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 800;
}

.open-detail-task strong[b-pfo3wq14it] {
    color: #26374c;
    font-size: 0.91rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.open-detail-task-count[b-pfo3wq14it] {
    margin-top: 1rem;
    color: #198754;
    font-size: 0.84rem;
    font-weight: 750;
}

.open-detail-no-tasks[b-pfo3wq14it] {
    margin-top: 1rem;
    padding: 1rem;
    color: #64748b;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 10px;
    font-size: 0.9rem;
}

.open-detail-running[b-pfo3wq14it] {
    margin-top: 1.25rem;
    background: linear-gradient(115deg, #ffffff 0%, #f1f6ff 45%, #dae8ff 100%);
    border-color: #c9dbf7;
}

.open-detail-running-row[b-pfo3wq14it] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(100, 116, 139, 0.16);
}

    .open-detail-running-row:last-child[b-pfo3wq14it] {
        border-bottom: none;
    }

    .open-detail-running-row > div[b-pfo3wq14it] {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .open-detail-running-row strong[b-pfo3wq14it] {
        color: #26374c;
        font-size: 0.95rem;
    }

    .open-detail-running-row div span[b-pfo3wq14it] {
        color: #64748b;
        font-size: 0.85rem;
    }

.open-detail-footer[b-pfo3wq14it] {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

/* =========================================================
   Erfolgs- und Fehlermeldungen
   ========================================================= */

.open-success-toast[b-pfo3wq14it],
.open-error-toast[b-pfo3wq14it] {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    width: calc(100% - 32px);
    max-width: 440px;
    padding: 17px;
    color: #172033;
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.18);
}

.open-success-toast[b-pfo3wq14it] {
    background: linear-gradient(115deg, #ffffff 0%, #f1faf4 40%, #d4efdf 100%);
    border: 1px solid #a7dabc;
    border-left: 5px solid #198754;
}

.open-success-toast-icon[b-pfo3wq14it],
.open-error-toast-icon[b-pfo3wq14it] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    color: #ffffff;
    border-radius: 50%;
    font-size: 19px;
    font-weight: 850;
}

.open-success-toast-icon[b-pfo3wq14it] {
    background: #198754;
}

.open-success-toast-content[b-pfo3wq14it] {
    flex: 1;
    min-width: 0;
}

    .open-success-toast-content strong[b-pfo3wq14it] {
        display: block;
        margin-bottom: 5px;
        color: #166534;
        font-size: 0.96rem;
        font-weight: 800;
    }

    .open-success-toast-content p[b-pfo3wq14it] {
        margin: 0;
        color: #475569;
        font-size: 0.88rem;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

.open-error-toast[b-pfo3wq14it] {
    background: linear-gradient(115deg, #ffffff 0%, #fff3f4 40%, #f9dce1 100%);
    border: 1px solid #efbfc7;
    border-left: 5px solid #dc3545;
}

.open-error-toast-icon[b-pfo3wq14it] {
    background: #dc3545;
}

.open-error-toast .open-success-toast-content strong[b-pfo3wq14it] {
    color: #a82838;
}

.open-success-toast-close[b-pfo3wq14it] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    color: #64748b;
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

    .open-success-toast-close:hover[b-pfo3wq14it] {
        color: #172033;
        background: rgba(15, 23, 42, 0.08);
    }

    .open-success-toast-close:focus-visible[b-pfo3wq14it] {
        outline: 2px solid #0d6efd;
        outline-offset: 2px;
    }

/* =========================================================
   Leerzustände
   ========================================================= */

.open-empty[b-pfo3wq14it] {
    padding: 1.5rem;
    background: linear-gradient(115deg, #ffffff 0%, #f1faf4 50%, #def2e5 100%);
    border: 1px solid #c8e7d2;
    border-radius: 14px;
}

    .open-empty strong[b-pfo3wq14it] {
        color: #198754;
        font-size: 1.08rem;
    }

    .open-empty p[b-pfo3wq14it] {
        margin: 0.4rem 0 0;
        color: #526579;
        font-size: 0.9rem;
    }

.open-empty-neutral[b-pfo3wq14it] {
    background: #f8fafc;
    border-color: #dce5ef;
}

    .open-empty-neutral strong[b-pfo3wq14it] {
        color: #334155;
    }

/* =========================================================
   Seitennavigation
   ========================================================= */

.open-pagination[b-pfo3wq14it] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 12px;
}

    .open-pagination > span[b-pfo3wq14it] {
        color: #64748b;
        font-size: 0.9rem;
    }

        .open-pagination > span strong[b-pfo3wq14it] {
            color: #172033;
        }

.open-page-button[b-pfo3wq14it] {
    min-height: 42px;
    padding: 0.6rem 1rem;
    color: #0d6efd;
    background: #ffffff;
    border: 1px solid #cddff9;
    border-radius: 9px;
    font-size: 0.86rem;
    font-weight: 750;
    cursor: pointer;
}

    .open-page-button:hover:not(:disabled)[b-pfo3wq14it] {
        color: #ffffff;
        background: #0d6efd;
        border-color: #0d6efd;
    }

    .open-page-button:disabled[b-pfo3wq14it] {
        color: #9aa8b9;
        background: #f8fafc;
        border-color: #e2e8f0;
        cursor: not-allowed;
    }

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {

    .open-filter-panel[b-pfo3wq14it] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .open-filter-controls[b-pfo3wq14it] {
        max-width: 100%;
    }

    .open-record-meta[b-pfo3wq14it] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .open-page[b-pfo3wq14it] {
        padding-bottom: 1rem;
    }

    .open-page-header[b-pfo3wq14it],
    .open-detail-header[b-pfo3wq14it] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

        .open-page-header h1[b-pfo3wq14it],
        .open-detail-header h1[b-pfo3wq14it] {
            font-size: 2rem;
        }

    .open-header-count[b-pfo3wq14it] {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0.6rem;
        min-width: 0;
    }

        .open-header-count strong[b-pfo3wq14it] {
            font-size: 1.6rem;
        }

        .open-header-count span[b-pfo3wq14it] {
            margin-top: 0;
        }

    .open-filter-panel[b-pfo3wq14it] {
        padding: 1rem;
    }

    .open-filter-controls[b-pfo3wq14it] {
        grid-template-columns: 1fr;
    }

    .open-summary[b-pfo3wq14it] {
        padding: 0.9rem;
    }

    .open-record-card[b-pfo3wq14it] {
        padding: 0.9rem;
    }

    .open-record-header[b-pfo3wq14it] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }

    .open-record-title-line h3[b-pfo3wq14it] {
        font-size: 1.05rem;
    }

    .open-record-meta[b-pfo3wq14it] {
        gap: 0.7rem;
    }

    .open-manual-panel[b-pfo3wq14it] {
        padding: 0.9rem;
    }

    .open-actions[b-pfo3wq14it] {
        flex-direction: column;
        align-items: stretch;
    }

    .open-button[b-pfo3wq14it] {
        width: 100%;
        min-height: 48px;
    }

    .open-card-actions .open-record-details-action[b-pfo3wq14it] {
        width: 100%;
        margin-left: 0;
    }

    .open-card-actions .open-record-details-button[b-pfo3wq14it] {
        width: 100%;
        min-height: 48px;
    }

    .open-detail-title-card[b-pfo3wq14it] {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.1rem;
    }

        .open-detail-title-card h2[b-pfo3wq14it] {
            font-size: 1.45rem;
        }

    .open-detail-grid[b-pfo3wq14it] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .open-detail-section[b-pfo3wq14it] {
        padding: 1rem;
    }

    .open-detail-back[b-pfo3wq14it] {
        width: 100%;
        white-space: normal;
    }

    .open-detail-info-row[b-pfo3wq14it] {
        flex-direction: column;
        gap: 0.35rem;
    }

        .open-detail-info-row > strong[b-pfo3wq14it] {
            text-align: left;
        }

    .open-detail-running-row[b-pfo3wq14it] {
        flex-direction: column;
        align-items: stretch;
    }

        .open-detail-running-row .open-record-details-button[b-pfo3wq14it] {
            width: 100%;
            white-space: normal;
        }

    .open-detail-footer .open-detail-back[b-pfo3wq14it] {
        width: 100%;
    }

    .open-pagination[b-pfo3wq14it] {
        flex-wrap: wrap;
    }

        .open-pagination > span[b-pfo3wq14it] {
            order: -1;
            width: 100%;
            text-align: center;
        }

    .open-page-button[b-pfo3wq14it] {
        flex: 1;
    }

    .open-success-toast[b-pfo3wq14it],
    .open-error-toast[b-pfo3wq14it] {
        right: 16px;
        bottom: 16px;
        left: 16px;
        width: auto;
        max-width: none;
        padding: 14px;
        gap: 11px;
    }

    .open-success-toast-icon[b-pfo3wq14it],
    .open-error-toast-icon[b-pfo3wq14it] {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }

    .open-success-toast-content strong[b-pfo3wq14it] {
        font-size: 0.9rem;
    }

    .open-success-toast-content p[b-pfo3wq14it] {
        font-size: 0.83rem;
    }
}

/* =========================================================
   Kleine Smartphones
   ========================================================= */

@media (max-width: 430px) {

    .open-record-meta[b-pfo3wq14it] {
        grid-template-columns: 1fr;
    }

    .open-summary-count span[b-pfo3wq14it] {
        font-size: 0.75rem;
    }

    .open-detail-task[b-pfo3wq14it] {
        padding: 0.75rem;
    }
}

/* =========================================================
   Tastaturbedienung
   ========================================================= */

.open-page a:focus-visible[b-pfo3wq14it],
.open-page button:focus-visible[b-pfo3wq14it],
.open-page input:focus-visible[b-pfo3wq14it],
.open-page select:focus-visible[b-pfo3wq14it] {
    outline: 3px solid #80b8ff;
    outline-offset: 3px;
}

/* =========================================================
   Reduzierte Animationen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .open-record-card[b-pfo3wq14it],
    .open-button[b-pfo3wq14it],
    .open-record-details-button[b-pfo3wq14it] {
        transition: none;
    }
}
/* /Components/Pages/Admin/Cleanings/RunningCleanings.razor.rz.scp.css */

/* =========================================================
   CleanDation – Laufende Reinigungen
   ========================================================= */

.running-page[b-yci4cdgfnc] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* =========================================================
   Seitenüberschrift
   ========================================================= */

.running-header[b-yci4cdgfnc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.6rem;
}

    .running-header h1[b-yci4cdgfnc] {
        margin: 0;
        color: #172033;
        font-size: clamp(2rem, 3vw, 2.6rem);
        font-weight: 750;
        line-height: 1.15;
    }

    .running-header p[b-yci4cdgfnc] {
        margin: 0.5rem 0 0;
        color: #64748b;
        font-size: 1rem;
    }

.running-header-count[b-yci4cdgfnc] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 160px;
    padding: 0.8rem 1.1rem;
    background: linear-gradient( 115deg, #ffffff 0%, #edf4ff 55%, #dce9ff 100% );
    border: 1px solid #cddff9;
    border-radius: 13px;
}

    .running-header-count strong[b-yci4cdgfnc] {
        color: #0d6efd;
        font-size: 1.9rem;
        font-weight: 800;
        line-height: 1.1;
    }

    .running-header-count span[b-yci4cdgfnc] {
        margin-top: 0.2rem;
        color: #475569;
        font-size: 0.82rem;
        font-weight: 650;
        white-space: nowrap;
    }

.running-loading[b-yci4cdgfnc] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 160px;
    color: #64748b;
}

/* =========================================================
   Mitarbeiterfilter
   ========================================================= */

.running-filter-panel[b-yci4cdgfnc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 1.7rem;
    padding: 1.35rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.045);
}

.running-section-eyebrow[b-yci4cdgfnc] {
    margin-bottom: 0.35rem;
    color: #0d6efd;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.running-filter-description h2[b-yci4cdgfnc] {
    margin: 0;
    color: #172033;
    font-size: 1.15rem;
    font-weight: 750;
}

.running-filter-description p[b-yci4cdgfnc] {
    margin: 0.4rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
}

.running-filter-control[b-yci4cdgfnc] {
    width: 100%;
    max-width: 350px;
    flex-shrink: 0;
}

    .running-filter-control label[b-yci4cdgfnc] {
        display: block;
        margin-bottom: 0.45rem;
        color: #334155;
        font-size: 0.86rem;
        font-weight: 750;
    }

.running-select[b-yci4cdgfnc] {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 0.65rem 2.4rem 0.65rem 0.85rem;
    color: #172033;
    background-color: #ffffff;
    border: 1px solid #cdd8e6;
    border-radius: 10px;
    font: inherit;
    font-size: 0.92rem;
    cursor: pointer;
}

    .running-select:focus[b-yci4cdgfnc] {
        border-color: #0d6efd;
        outline: 3px solid rgba(13, 110, 253, 0.12);
    }

/* =========================================================
   Ergebnisüberschrift
   ========================================================= */

.running-content[b-yci4cdgfnc] {
    width: 100%;
}

.running-section-header[b-yci4cdgfnc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}

    .running-section-header h2[b-yci4cdgfnc] {
        margin: 0;
        color: #172033;
        font-size: 1.3rem;
        font-weight: 750;
    }

    .running-section-header p[b-yci4cdgfnc] {
        margin: 0.35rem 0 0;
        color: #64748b;
        font-size: 0.9rem;
    }

.running-results-count[b-yci4cdgfnc] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: #64748b;
    font-size: 0.86rem;
    white-space: nowrap;
}

    .running-results-count strong[b-yci4cdgfnc] {
        color: #0d6efd;
        font-size: 1.2rem;
        font-weight: 800;
    }

.running-page-counter[b-yci4cdgfnc] {
    margin-left: 0.3rem;
    color: #94a3b8;
}

/* =========================================================
   Reinigungskarten
   ========================================================= */

.running-records-list[b-yci4cdgfnc] {
    display: grid;
    gap: 0.9rem;
}

.running-record-card[b-yci4cdgfnc] {
    overflow: hidden;
    padding: 1rem 1.25rem;
    background: linear-gradient( 115deg, #ffffff 0%, #f3f7ff 30%, #e6efff 65%, #d4e4ff 100% );
    border: 1px solid #cddff9;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.055);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .running-record-card:hover[b-yci4cdgfnc] {
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    }

/* =========================================================
   Kartenkopf
   ========================================================= */

.running-record-top[b-yci4cdgfnc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(75, 110, 160, 0.17);
}

.running-record-heading[b-yci4cdgfnc] {
    min-width: 0;
}

    .running-record-heading h3[b-yci4cdgfnc] {
        margin: 0;
        color: #172033;
        font-size: 1.1rem;
        font-weight: 650;
        line-height: 1.3;
    }

.running-record-location[b-yci4cdgfnc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    color: #53657d;
    font-size: 0.83rem;
    line-height: 1.45;
}

.running-separator[b-yci4cdgfnc] {
    color: #94a3b8;
}

/* =========================================================
   Status
   ========================================================= */

.running-status-group[b-yci4cdgfnc] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex-shrink: 0;
}

.running-status[b-yci4cdgfnc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 0.3rem 0.75rem;
    color: #ffffff;
    background: #0d6efd;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
}

.running-overdue-status[b-yci4cdgfnc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 0.3rem 0.7rem;
    color: #7c4a00;
    background: #ffedc2;
    border: 1px solid #f1d18a;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
}

/* =========================================================
   Mitarbeiter / Telefon / Gestartet / Details
   ========================================================= */

.running-record-meta[b-yci4cdgfnc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 0 0.15rem;
}

.running-meta-item[b-yci4cdgfnc] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: 0.3rem;
}

.running-meta-label[b-yci4cdgfnc] {
    color: #6d7e95;
    font-size: 0.69rem;
    font-weight: 650;
    letter-spacing: 0.035em;
}

.running-meta-value[b-yci4cdgfnc] {
    color: #26374c;
    font-size: 0.86rem;
    font-weight: 400;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.running-meta-empty[b-yci4cdgfnc] {
    color: #8492a6;
    font-size: 0.9rem;
}

.running-phone[b-yci4cdgfnc] {
    color: #0d6efd;
    font-size: 0.86rem;
    font-weight: 400;
    text-decoration: none;
    overflow-wrap: anywhere;
}

    .running-phone:hover[b-yci4cdgfnc] {
        color: #0957c3;
        text-decoration: underline;
    }

/* =========================================================
   Details-Button als vierte Spalte
   ========================================================= */

.running-record-actions[b-yci4cdgfnc] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-self: center;
    min-width: 0;
}

.running-details-button[b-yci4cdgfnc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    min-height: 42px;
    padding: 0.6rem 1rem;
    color: #0d6efd;
    background: #ffffff;
    border: 1px solid #0d6efd;
    border-radius: 9px;
    font-size: 0.88rem;
    font-weight: 750;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

    .running-details-button span[b-yci4cdgfnc] {
        font-size: 1.05rem;
        font-weight: 800;
        line-height: 1;
    }

    .running-details-button:hover[b-yci4cdgfnc] {
        color: #ffffff;
        background: #0d6efd;
        text-decoration: none;
    }

/* =========================================================
   Warnung bei älteren Reinigungen
   ========================================================= */

.running-warning[b-yci4cdgfnc] {
    margin-top: 0.85rem;
    padding: 0.75rem 0.9rem;
    color: #855000;
    background: #fff2d6;
    border: 1px solid #efd69f;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 650;
    line-height: 1.5;
}

/* =========================================================
   Neuer manueller Abschluss
   ========================================================= */

.running-admin-actions[b-yci4cdgfnc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-top: 0.85rem;
}

.running-manual-button[b-yci4cdgfnc] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.65rem 1rem;
    color: #ffffff;
    background: #198754;
    border: 1px solid #198754;
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 750;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .running-manual-button:hover:not(:disabled)[b-yci4cdgfnc] {
        color: #ffffff;
        background: #136c43;
        border-color: #136c43;
    }

    .running-manual-button:disabled[b-yci4cdgfnc] {
        opacity: 0.55;
        cursor: not-allowed;
    }

    .running-manual-button span:first-child[b-yci4cdgfnc] {
        line-height: 1;
    }

.running-admin-hint[b-yci4cdgfnc] {
    color: #65758c;
    font-size: 0.79rem;
    line-height: 1.5;
}

/* =========================================================
   Rückmeldungen – Toast unten rechts
   ========================================================= */

.running-success-toast[b-yci4cdgfnc],
.running-error-toast[b-yci4cdgfnc] {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    width: calc(100% - 32px);
    max-width: 440px;
    padding: 17px;
    color: #172033;
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.18);
}

.running-success-toast[b-yci4cdgfnc] {
    background: linear-gradient(115deg, #ffffff 0%, #f1faf4 40%, #d4efdf 100%);
    border: 1px solid #a7dabc;
    border-left: 5px solid #198754;
}

.running-error-toast[b-yci4cdgfnc] {
    background: linear-gradient(115deg, #ffffff 0%, #fff3f4 40%, #f9dce1 100%);
    border: 1px solid #efbfc7;
    border-left: 5px solid #dc3545;
}

.running-toast-icon[b-yci4cdgfnc] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    color: #ffffff;
    background: #198754;
    border-radius: 50%;
    font-size: 19px;
    font-weight: 850;
}

.running-error-toast .running-toast-icon[b-yci4cdgfnc] {
    background: #dc3545;
}

.running-toast-content[b-yci4cdgfnc] {
    flex: 1;
    min-width: 0;
}

    .running-toast-content strong[b-yci4cdgfnc] {
        display: block;
        margin-bottom: 5px;
        color: #166534;
        font-size: 0.96rem;
        font-weight: 800;
    }

.running-error-toast .running-toast-content strong[b-yci4cdgfnc] {
    color: #a82838;
}

.running-toast-content p[b-yci4cdgfnc] {
    margin: 0;
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.running-toast-close[b-yci4cdgfnc] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    color: #64748b;
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

    .running-toast-close:hover[b-yci4cdgfnc] {
        color: #172033;
        background: rgba(15, 23, 42, 0.08);
    }

    .running-toast-close:focus-visible[b-yci4cdgfnc] {
        outline: 2px solid #0d6efd;
        outline-offset: 2px;
    }

/* =========================================================
   Keine Reinigungen
   ========================================================= */

.running-empty[b-yci4cdgfnc] {
    padding: 1.6rem;
    background: linear-gradient( 115deg, #ffffff 0%, #f4faf6 50%, #e4f5eb 100% );
    border: 1px solid #cfe9d8;
    border-radius: 15px;
}

.running-empty-title[b-yci4cdgfnc] {
    color: #198754;
    font-size: 1.05rem;
    font-weight: 800;
}

.running-empty p[b-yci4cdgfnc] {
    margin: 0.4rem 0 0;
    color: #526579;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* =========================================================
   Seitennavigation
   ========================================================= */

.running-pagination[b-yci4cdgfnc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 12px;
}

.running-page-button[b-yci4cdgfnc] {
    min-height: 42px;
    padding: 0.6rem 0.95rem;
    color: #0d6efd;
    background: #ffffff;
    border: 1px solid #cddff9;
    border-radius: 9px;
    font-size: 0.86rem;
    font-weight: 750;
    cursor: pointer;
}

    .running-page-button:hover:not(:disabled)[b-yci4cdgfnc] {
        color: #ffffff;
        background: #0d6efd;
        border-color: #0d6efd;
    }

    .running-page-button:disabled[b-yci4cdgfnc] {
        color: #9aa8b9;
        background: #f8fafc;
        border-color: #e2e8f0;
        cursor: not-allowed;
    }

.running-pagination-info[b-yci4cdgfnc] {
    color: #64748b;
    font-size: 0.9rem;
}

    .running-pagination-info strong[b-yci4cdgfnc] {
        color: #172033;
    }

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {

    .running-filter-panel[b-yci4cdgfnc] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .running-filter-control[b-yci4cdgfnc] {
        max-width: 100%;
    }

    .running-record-meta[b-yci4cdgfnc] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .running-record-actions[b-yci4cdgfnc] {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .running-success-toast[b-yci4cdgfnc],
    .running-error-toast[b-yci4cdgfnc] {
        right: 16px;
        bottom: 16px;
        left: 16px;
        width: auto;
        max-width: none;
        padding: 14px;
        gap: 11px;
    }

    .running-toast-icon[b-yci4cdgfnc] {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }

    .running-toast-content strong[b-yci4cdgfnc] {
        font-size: 0.9rem;
    }

    .running-toast-content p[b-yci4cdgfnc] {
        font-size: 0.83rem;
    }


    .running-page[b-yci4cdgfnc] {
        padding-bottom: 1rem;
    }

    .running-header[b-yci4cdgfnc] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

        .running-header h1[b-yci4cdgfnc] {
            font-size: 2rem;
        }

    .running-header-count[b-yci4cdgfnc] {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0.6rem;
        min-width: 0;
    }

        .running-header-count strong[b-yci4cdgfnc] {
            font-size: 1.6rem;
        }

        .running-header-count span[b-yci4cdgfnc] {
            margin-top: 0;
        }

    .running-filter-panel[b-yci4cdgfnc] {
        padding: 1rem;
    }

    .running-section-header[b-yci4cdgfnc] {
        align-items: flex-start;
        gap: 0.75rem;
    }

        .running-section-header h2[b-yci4cdgfnc] {
            font-size: 1.15rem;
        }

        .running-section-header p[b-yci4cdgfnc] {
            font-size: 0.85rem;
        }

    .running-record-card[b-yci4cdgfnc] {
        padding: 1rem;
        border-radius: 14px;
    }

    .running-record-top[b-yci4cdgfnc] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .running-record-heading h3[b-yci4cdgfnc] {
        font-size: 1.05rem;
    }

    .running-status-group[b-yci4cdgfnc] {
        justify-content: flex-start;
    }

    .running-record-meta[b-yci4cdgfnc] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem;
    }

    .running-record-actions[b-yci4cdgfnc] {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .running-details-button[b-yci4cdgfnc] {
        width: 100%;
        min-height: 46px;
    }

    .running-admin-actions[b-yci4cdgfnc] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .running-manual-button[b-yci4cdgfnc] {
        width: 100%;
        min-height: 48px;
    }

    .running-admin-hint[b-yci4cdgfnc] {
        text-align: center;
    }

    .running-pagination[b-yci4cdgfnc] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .running-pagination-info[b-yci4cdgfnc] {
        order: -1;
        width: 100%;
        text-align: center;
    }

    .running-page-button[b-yci4cdgfnc] {
        flex: 1;
    }
}

/* =========================================================
   Sehr kleine Smartphones
   ========================================================= */

@media (max-width: 430px) {

    .running-record-meta[b-yci4cdgfnc] {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .running-results-count[b-yci4cdgfnc] {
        font-size: 0.78rem;
    }

    .running-page-counter[b-yci4cdgfnc] {
        display: none;
    }
}
/* /Components/Pages/Admin/Company/CompanyPage.razor.rz.scp.css */

/* =========================================================
   CleanDation – Meine Firma
   ========================================================= */

.company-page[b-4jt57hsud9] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* Seitenüberschrift */

.company-header[b-4jt57hsud9] {
    margin-bottom: 1.6rem;
}

    .company-header h1[b-4jt57hsud9] {
        margin: 0;
        color: #172033;
        font-size: clamp(2rem, 3vw, 2.6rem);
        font-weight: 750;
        line-height: 1.15;
    }

    .company-header p[b-4jt57hsud9] {
        margin: 0.5rem 0 0;
        color: #64748b;
        font-size: 1rem;
        line-height: 1.5;
    }

.company-loading[b-4jt57hsud9] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

/* Layout */

.company-workspace[b-4jt57hsud9] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
}

.company-section[b-4jt57hsud9] {
    min-width: 0;
    margin-bottom: 1rem;
    padding: 1.4rem;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.05);
}

.company-details-section[b-4jt57hsud9] {
    background: linear-gradient( 115deg, #ffffff 0%, #f3f7ff 40%, #dce9ff 100% );
    border-color: #ccdcf6;
}

.company-logo-section[b-4jt57hsud9] {
    background: linear-gradient( 115deg, #ffffff 0%, #f5fbf7 40%, #e0f2e7 100% );
    border-color: #cce7d6;
}

/* Abschnittsüberschriften */

.company-section-header[b-4jt57hsud9] {
    margin-bottom: 1.4rem;
}

.company-eyebrow[b-4jt57hsud9] {
    margin-bottom: 0.4rem;
    color: #0d6efd;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.company-eyebrow-success[b-4jt57hsud9] {
    color: #198754;
}

.company-section-header h2[b-4jt57hsud9] {
    margin: 0;
    color: #172033;
    font-size: 1.3rem;
    font-weight: 750;
}

.company-section-header p[b-4jt57hsud9] {
    margin: 0.4rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.55;
}

/* Firmenname */

.company-form-field[b-4jt57hsud9] {
    margin-bottom: 1.1rem;
}

    .company-form-field label[b-4jt57hsud9] {
        display: block;
        margin-bottom: 0.5rem;
        color: #334155;
        font-size: 0.9rem;
        font-weight: 750;
    }

    .company-form-field .form-control[b-4jt57hsud9] {
        width: 100%;
        min-height: 48px;
        padding: 0.65rem 0.85rem;
        color: #172033;
        background: #ffffff;
        border: 1px solid #cdd8e6;
        border-radius: 10px;
        font-size: 0.95rem;
    }

        .company-form-field .form-control:focus[b-4jt57hsud9] {
            border-color: #0d6efd;
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
        }

.company-validation[b-4jt57hsud9] {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.84rem;
}

.company-details-note[b-4jt57hsud9] {
    margin-top: 1.6rem;
    padding: 0.95rem 1rem;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid #cadbf3;
    border-radius: 11px;
}

    .company-details-note strong[b-4jt57hsud9] {
        color: #245fc7;
        font-size: 0.88rem;
        font-weight: 800;
    }

    .company-details-note p[b-4jt57hsud9] {
        margin: 0.3rem 0 0;
        color: #53657d;
        font-size: 0.85rem;
        line-height: 1.55;
    }

/* Buttons */

.company-button[b-4jt57hsud9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 46px;
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .company-button span[b-4jt57hsud9] {
        font-size: 1.1rem;
        font-weight: 800;
    }

    .company-button:disabled[b-4jt57hsud9] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.company-button-primary[b-4jt57hsud9] {
    color: #ffffff;
    background: #0d6efd;
    border-color: #0d6efd;
}

    .company-button-primary:hover:not(:disabled)[b-4jt57hsud9] {
        color: #ffffff;
        background: #0957c3;
    }

.company-button-success[b-4jt57hsud9] {
    color: #ffffff;
    background: #198754;
    border-color: #198754;
}

    .company-button-success:hover:not(:disabled)[b-4jt57hsud9] {
        color: #ffffff;
        background: #136c43;
    }

.company-button-outline[b-4jt57hsud9] {
    color: #0d6efd;
    background: #ffffff;
    border-color: #0d6efd;
}

    .company-button-outline:hover[b-4jt57hsud9] {
        color: #ffffff;
        background: #0d6efd;
    }

.company-button-secondary[b-4jt57hsud9] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .company-button-secondary:hover:not(:disabled)[b-4jt57hsud9] {
        color: #ffffff;
        background: #475569;
    }

.company-button-danger[b-4jt57hsud9] {
    color: #dc3545;
    background: #ffffff;
    border-color: #dc3545;
}

    .company-button-danger:hover:not(:disabled)[b-4jt57hsud9] {
        color: #ffffff;
        background: #dc3545;
    }

/* Logo-Vorschaukarte */

.company-logo-preview-card[b-4jt57hsud9] {
    overflow: hidden;
    margin-bottom: 1.25rem;
    background: #ffffff;
    border: 1px solid #cce4d5;
    border-radius: 13px;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04);
}

.company-logo-preview-selected[b-4jt57hsud9] {
    border-color: #a9c9fa;
}

.company-logo-preview-header[b-4jt57hsud9] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.95rem 1rem;
    background: #f6fbf8;
    border-bottom: 1px solid #dce5ef;
}

.company-logo-preview-selected .company-logo-preview-header[b-4jt57hsud9] {
    background: #f1f6ff;
}

.company-logo-preview-title[b-4jt57hsud9] {
    color: #172033;
    font-size: 0.93rem;
    font-weight: 800;
}

.company-logo-preview-subtitle[b-4jt57hsud9] {
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.82rem;
}

.company-logo-preview-badge[b-4jt57hsud9],
.company-logo-saved-badge[b-4jt57hsud9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
}

.company-logo-preview-badge[b-4jt57hsud9] {
    color: #0d6efd;
    background: #eaf3ff;
    border: 1px solid #bed7fb;
}

.company-logo-saved-badge[b-4jt57hsud9] {
    color: #198754;
    background: #e8f5ed;
    border: 1px solid #bcdac9;
}

/* Schachbrett-Hintergrund für transparente Logos */

.company-logo-canvas[b-4jt57hsud9] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 230px;
    padding: 2rem;
    background-color: #ffffff;
    background-image: linear-gradient(45deg, #edf0f4 25%, transparent 25%), linear-gradient(-45deg, #edf0f4 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #edf0f4 75%), linear-gradient(-45deg, transparent 75%, #edf0f4 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

.company-logo-image[b-4jt57hsud9] {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
}

/* Wenn noch kein Logo vorhanden ist */

.company-logo-empty[b-4jt57hsud9] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.3rem;
    padding: 1.3rem;
    background: rgba(255, 255, 255, 0.75);
    border: 1px dashed #b7d8c2;
    border-radius: 12px;
}

.company-logo-empty-icon[b-4jt57hsud9] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: #198754;
    background: #e5f5eb;
    border: 1px solid #c4e5d0;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 700;
}

.company-logo-empty-title[b-4jt57hsud9] {
    color: #172033;
    font-size: 0.96rem;
    font-weight: 800;
}

.company-logo-empty-text[b-4jt57hsud9] {
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.85rem;
}

/* Logo auswählen und hochladen */

.company-logo-upload[b-4jt57hsud9] {
    padding-top: 0.2rem;
}

.company-logo-upload-label[b-4jt57hsud9] {
    margin-bottom: 0.65rem;
    color: #334155;
    font-size: 0.9rem;
    font-weight: 750;
}

.company-logo-file-row[b-4jt57hsud9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
}



/* Blazor InputFile zuverlässig ausblenden */

.company-page[b-4jt57hsud9]  input.company-logo-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}



.company-logo-select-button[b-4jt57hsud9] {
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
}

.company-logo-file-name[b-4jt57hsud9] {
    min-width: 0;
    color: #334155;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.company-muted[b-4jt57hsud9] {
    color: #64748b;
}

.company-logo-upload-hint[b-4jt57hsud9] {
    margin-top: 0.65rem;
    color: #64748b;
    font-size: 0.83rem;
}

.company-logo-selection-actions[b-4jt57hsud9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.2rem;
}

/* Tablet */

@media (max-width: 1100px) {
    .company-workspace[b-4jt57hsud9] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .company-details-section[b-4jt57hsud9],
    .company-logo-section[b-4jt57hsud9] {
        width: 100%;
    }
}

/* Smartphone */

@media (max-width: 767.98px) {
    .company-page[b-4jt57hsud9] {
        padding-bottom: 1rem;
    }

    .company-header h1[b-4jt57hsud9] {
        font-size: 2rem;
    }

    .company-section[b-4jt57hsud9] {
        padding: 1rem;
        border-radius: 14px;
    }

    .company-section-header h2[b-4jt57hsud9] {
        font-size: 1.18rem;
    }

    .company-logo-canvas[b-4jt57hsud9] {
        min-height: 180px;
        padding: 1.2rem;
    }

    .company-logo-image[b-4jt57hsud9] {
        max-height: 130px;
    }

    .company-logo-file-row[b-4jt57hsud9] {
        align-items: stretch;
        flex-direction: column;
    }

    .company-logo-select-button[b-4jt57hsud9] {
        width: 100%;
    }

    .company-logo-file-name[b-4jt57hsud9] {
        padding: 0.25rem 0;
    }

    .company-logo-selection-actions[b-4jt57hsud9] {
        flex-direction: column;
        align-items: stretch;
    }

        .company-logo-selection-actions .company-button[b-4jt57hsud9],
        .company-button-primary[b-4jt57hsud9] {
            width: 100%;
            min-height: 48px;
        }
}

/* Sehr kleine Smartphones */

@media (max-width: 430px) {
    .company-logo-preview-header[b-4jt57hsud9] {
        gap: 0.6rem;
        padding: 0.85rem;
    }

    .company-logo-preview-subtitle[b-4jt57hsud9] {
        font-size: 0.76rem;
    }

    .company-logo-empty[b-4jt57hsud9] {
        align-items: flex-start;
        padding: 1rem;
    }
}
/* /Components/Pages/Admin/Customers/CustomerAccess.razor.rz.scp.css */

/* =========================================================
   CleanDation – Kundenzugang
   ========================================================= */

.customer-access-page[b-qvgh5r3f2d] {
    width: 100%;
    max-width: 1500px;
    padding-bottom: 2rem;
}

/* =========================================================
   Seitenkopf
   ========================================================= */

.customer-access-header[b-qvgh5r3f2d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.6rem;
}

.customer-access-eyebrow[b-qvgh5r3f2d] {
    margin-bottom: 0.4rem;
    color: #0d6efd;
    font-size: 0.77rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.customer-access-eyebrow-green[b-qvgh5r3f2d] {
    color: #198754;
}

.customer-access-header h1[b-qvgh5r3f2d] {
    margin: 0;
    color: #172033;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 750;
    line-height: 1.2;
}

.customer-access-header p[b-qvgh5r3f2d] {
    margin: 0.55rem 0 0;
    color: #64748b;
    font-size: 0.95rem;
}

    .customer-access-header p strong[b-qvgh5r3f2d] {
        color: #334155;
    }

/* =========================================================
   Layout
   ========================================================= */

.customer-access-workspace[b-qvgh5r3f2d] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
    gap: 1.5rem;
}

.customer-access-side[b-qvgh5r3f2d] {
    display: grid;
    gap: 1.5rem;
    min-width: 0;
}

.customer-access-section[b-qvgh5r3f2d] {
    min-width: 0;
    padding: 1.5rem;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15,23,42,0.055);
}

/* Zugang erstellen – Blau */

.customer-access-details[b-qvgh5r3f2d] {
    background: linear-gradient( 115deg, #ffffff 0%, #f1f6ff 30%, #dfeaff 65%, #cddfff 100% );
    border-color: #c4d8f8;
}

/* Bereits vorhandener Zugang – Grün */

.customer-access-existing[b-qvgh5r3f2d] {
    background: linear-gradient( 115deg, #ffffff 0%, #f1faf4 30%, #dff2e5 65%, #c6e8d2 100% );
    border-color: #bde2cb;
}

/* Kundeninformationen – Blau */

.customer-access-context[b-qvgh5r3f2d] {
    background: linear-gradient( 115deg, #ffffff 0%, #f2f8ff 30%, #e4efff 65%, #d3e4ff 100% );
    border-color: #c9dcf7;
}

/* Nächster Schritt / Sicherheit – Grün */

.customer-access-next[b-qvgh5r3f2d],
.customer-access-help[b-qvgh5r3f2d] {
    background: linear-gradient( 115deg, #ffffff 0%, #f1faf4 30%, #dff2e5 65%, #c6e8d2 100% );
    border-color: #bde2cb;
}

/* =========================================================
   Abschnittsüberschriften
   ========================================================= */

.customer-access-section-heading[b-qvgh5r3f2d] {
    margin-bottom: 1.35rem;
}

    .customer-access-section-heading h2[b-qvgh5r3f2d] {
        margin: 0;
        color: #172033;
        font-size: 1.3rem;
        font-weight: 750;
    }

    .customer-access-section-heading p[b-qvgh5r3f2d] {
        margin: 0.45rem 0 0;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.55;
    }

/* =========================================================
   Eingabefelder
   ========================================================= */

.customer-access-field[b-qvgh5r3f2d] {
    min-width: 0;
    margin-bottom: 1.25rem;
}

    .customer-access-field label[b-qvgh5r3f2d] {
        display: block;
        margin-bottom: 0.5rem;
        color: #334155;
        font-size: 0.9rem;
        font-weight: 750;
    }

.customer-access-required[b-qvgh5r3f2d] {
    color: #dc3545;
    font-weight: 800;
}

.customer-access-field .form-control[b-qvgh5r3f2d] {
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 0.85rem;
    color: #172033;
    background: #ffffff;
    border: 1px solid #c7d5e6;
    border-radius: 10px;
    font-size: 0.95rem;
}

    .customer-access-field .form-control:focus[b-qvgh5r3f2d] {
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13,110,253,0.13);
    }

    .customer-access-field .form-control[b-qvgh5r3f2d]::placeholder {
        color: #94a3b8;
    }

    .customer-access-field .form-control:disabled[b-qvgh5r3f2d] {
        background: #f1f5f9;
        opacity: 0.8;
    }

.customer-access-field-help[b-qvgh5r3f2d] {
    margin: 0.45rem 0 0;
    color: #64748b;
    font-size: 0.83rem;
    line-height: 1.5;
}

.customer-access-divider[b-qvgh5r3f2d] {
    height: 1px;
    margin: 1.6rem 0;
    background: rgba(148,163,184,0.35);
}

/* =========================================================
   Passwortfeld
   ========================================================= */

.customer-access-password-control[b-qvgh5r3f2d] {
    display: flex;
    align-items: stretch;
    gap: 0.55rem;
}

    .customer-access-password-control .form-control[b-qvgh5r3f2d] {
        flex: 1;
        min-width: 0;
    }

.customer-access-password-toggle[b-qvgh5r3f2d] {
    flex-shrink: 0;
    min-height: 48px;
    padding: 0.6rem 0.95rem;
    color: #0d6efd;
    background: #ffffff;
    border: 1px solid #b9cff0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 750;
    cursor: pointer;
}

    .customer-access-password-toggle:hover:not(:disabled)[b-qvgh5r3f2d] {
        background: #eaf3ff;
        border-color: #0d6efd;
    }

    .customer-access-password-toggle:disabled[b-qvgh5r3f2d] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.customer-access-generate-actions[b-qvgh5r3f2d] {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

/* =========================================================
   Passwort-Hinweis
   ========================================================= */

.customer-access-password-note[b-qvgh5r3f2d] {
    padding: 1rem;
    color: #805900;
    background: #fff3cf;
    border: 1px solid #efd28b;
    border-radius: 11px;
}

    .customer-access-password-note strong[b-qvgh5r3f2d] {
        display: block;
        font-size: 0.91rem;
        font-weight: 800;
    }

    .customer-access-password-note p[b-qvgh5r3f2d] {
        margin: 0.4rem 0 0;
        font-size: 0.85rem;
        line-height: 1.6;
    }

/* =========================================================
   Validierung und Fehler
   ========================================================= */

.customer-access-validation-summary[b-qvgh5r3f2d] {
    margin-bottom: 1rem;
    color: #b42335;
    font-size: 0.88rem;
}

.customer-access-validation[b-qvgh5r3f2d] {
    display: block;
    margin-top: 0.4rem;
    color: #b42335;
    font-size: 0.84rem;
}

.customer-access-error[b-qvgh5r3f2d] {
    margin-top: 1rem;
    padding: 0.95rem;
    color: #a22232;
    background: #fff0f1;
    border: 1px solid #f1bdc4;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.5;
}

/* =========================================================
   Buttons
   ========================================================= */

.customer-access-actions[b-qvgh5r3f2d] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.customer-access-button[b-qvgh5r3f2d] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    min-height: 46px;
    padding: 0.7rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .customer-access-button:hover[b-qvgh5r3f2d] {
        text-decoration: none;
    }

    .customer-access-button:disabled[b-qvgh5r3f2d] {
        opacity: 0.55;
        cursor: not-allowed;
    }

/* Primär – Blau */

.customer-access-button-primary[b-qvgh5r3f2d] {
    color: #ffffff;
    background: #0d6efd;
    border-color: #0d6efd;
}

    .customer-access-button-primary:hover:not(:disabled)[b-qvgh5r3f2d] {
        color: #ffffff;
        background: #0957c3;
        border-color: #0957c3;
    }

/* Zurück / Abbrechen */

.customer-access-button-secondary[b-qvgh5r3f2d] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .customer-access-button-secondary:hover:not(:disabled)[b-qvgh5r3f2d] {
        color: #ffffff;
        background: #475569;
        border-color: #475569;
    }

/* Passwort generieren */

.customer-access-button-outline[b-qvgh5r3f2d] {
    color: #0d6efd;
    background: #ffffff;
    border-color: #0d6efd;
}

    .customer-access-button-outline:hover:not(:disabled)[b-qvgh5r3f2d] {
        color: #ffffff;
        background: #0d6efd;
    }

/* =========================================================
   Kundeninformationen
   ========================================================= */

.customer-access-info-item[b-qvgh5r3f2d],
.customer-access-account-info[b-qvgh5r3f2d] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    margin-bottom: 0.75rem;
    padding: 1rem;
    background: rgba(255,255,255,0.82);
    border: 1px solid #cfddf0;
    border-radius: 10px;
}

    .customer-access-info-item > span[b-qvgh5r3f2d],
    .customer-access-account-info > span[b-qvgh5r3f2d] {
        color: #64748b;
        font-size: 0.73rem;
        font-weight: 800;
        letter-spacing: 0.045em;
    }

    .customer-access-info-item strong[b-qvgh5r3f2d],
    .customer-access-account-info strong[b-qvgh5r3f2d] {
        color: #172033;
        font-size: 0.95rem;
        font-weight: 750;
        overflow-wrap: anywhere;
    }

/* =========================================================
   Nächster Schritt / Sicherheit
   ========================================================= */

.customer-access-next-box[b-qvgh5r3f2d],
.customer-access-help-box[b-qvgh5r3f2d] {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem;
    background: rgba(255,255,255,0.78);
    border: 1px solid #cde5d5;
    border-radius: 11px;
}

.customer-access-next-icon[b-qvgh5r3f2d],
.customer-access-help-icon[b-qvgh5r3f2d],
.customer-access-status-icon[b-qvgh5r3f2d] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    color: #ffffff;
    background: #198754;
    border-radius: 11px;
    font-size: 1.2rem;
    font-weight: 800;
}

.customer-access-next-box strong[b-qvgh5r3f2d],
.customer-access-help-box strong[b-qvgh5r3f2d],
.customer-access-status-box strong[b-qvgh5r3f2d] {
    display: block;
    color: #172033;
    font-size: 0.95rem;
    font-weight: 800;
}

.customer-access-next-box p[b-qvgh5r3f2d],
.customer-access-help-box p[b-qvgh5r3f2d],
.customer-access-status-box p[b-qvgh5r3f2d] {
    margin: 0.4rem 0 0;
    color: #53657d;
    font-size: 0.85rem;
    line-height: 1.55;
}

.customer-access-next-note[b-qvgh5r3f2d] {
    margin: 1rem 0 0;
    color: #53657d;
    font-size: 0.86rem;
    line-height: 1.6;
}

/* =========================================================
   Bereits eingerichteter Zugang
   ========================================================= */

.customer-access-status-box[b-qvgh5r3f2d] {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: rgba(255,255,255,0.82);
    border: 1px solid #bde2cb;
    border-radius: 11px;
}

/* =========================================================
   Erfolgsdialog
   ========================================================= */

.customer-credentials-backdrop[b-qvgh5r3f2d] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15,23,42,0.6);
    backdrop-filter: blur(3px);
}

.customer-credentials-dialog[b-qvgh5r3f2d] {
    width: 100%;
    max-width: 570px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 1.75rem;
    background: linear-gradient( 140deg, #ffffff 0%, #f4f9ff 55%, #e4efff 100% );
    border: 1px solid #c4d8f8;
    border-radius: 18px;
    box-shadow: 0 20px 65px rgba(15,23,42,0.28);
}

.customer-credentials-icon[b-qvgh5r3f2d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1rem;
    color: #ffffff;
    background: #198754;
    border-radius: 14px;
    font-size: 1.5rem;
    font-weight: 800;
}

.customer-credentials-dialog h2[b-qvgh5r3f2d] {
    margin: 0;
    color: #172033;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.3;
}

.customer-credentials-description[b-qvgh5r3f2d] {
    margin: 0.65rem 0 0;
    color: #53657d;
    font-size: 0.92rem;
    line-height: 1.6;
}

/* Kundendaten im Dialog */

.customer-credentials-summary[b-qvgh5r3f2d] {
    display: grid;
    gap: 0.8rem;
    margin-top: 1.3rem;
    padding: 1rem;
    background: rgba(255,255,255,0.85);
    border: 1px solid #ceddf1;
    border-radius: 12px;
}

    .customer-credentials-summary > div[b-qvgh5r3f2d] {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        min-width: 0;
    }

.customer-credentials-label[b-qvgh5r3f2d] {
    color: #64748b;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.045em;
}

.customer-credentials-summary strong[b-qvgh5r3f2d] {
    color: #172033;
    font-size: 0.95rem;
    font-weight: 750;
    overflow-wrap: anywhere;
}

/* Warnung im Dialog */

.customer-credentials-warning[b-qvgh5r3f2d] {
    margin-top: 1rem;
    padding: 1rem;
    color: #805900;
    background: #fff3cf;
    border: 1px solid #efd28b;
    border-radius: 11px;
}

    .customer-credentials-warning strong[b-qvgh5r3f2d] {
        display: block;
        font-size: 0.92rem;
        font-weight: 800;
    }

    .customer-credentials-warning p[b-qvgh5r3f2d] {
        margin: 0.35rem 0 0;
        font-size: 0.85rem;
        line-height: 1.55;
    }

/* Dialogaktionen */

.customer-credentials-actions[b-qvgh5r3f2d] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

    .customer-credentials-actions
    .customer-access-button[b-qvgh5r3f2d] {
        flex: 1;
    }

/* =========================================================
   Laden / Nicht gefunden
   ========================================================= */

.customer-access-loading[b-qvgh5r3f2d] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

.customer-access-not-found[b-qvgh5r3f2d] {
    max-width: 760px;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
}

    .customer-access-not-found h2[b-qvgh5r3f2d] {
        margin: 0;
        color: #172033;
        font-size: 1.2rem;
        font-weight: 800;
    }

    .customer-access-not-found p[b-qvgh5r3f2d] {
        margin: 0.5rem 0 1rem;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.6;
    }

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {

    .customer-access-workspace[b-qvgh5r3f2d] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .customer-access-side[b-qvgh5r3f2d] {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 1rem;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .customer-access-page[b-qvgh5r3f2d] {
        padding-bottom: 1rem;
    }

    .customer-access-header[b-qvgh5r3f2d] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

        .customer-access-header h1[b-qvgh5r3f2d] {
            font-size: 1.9rem;
        }

    .customer-access-workspace[b-qvgh5r3f2d],
    .customer-access-side[b-qvgh5r3f2d] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .customer-access-section[b-qvgh5r3f2d] {
        padding: 1rem;
        border-radius: 14px;
    }

    .customer-access-section-heading h2[b-qvgh5r3f2d] {
        font-size: 1.2rem;
    }

    .customer-access-password-control[b-qvgh5r3f2d] {
        flex-direction: column;
    }

    .customer-access-password-toggle[b-qvgh5r3f2d] {
        width: 100%;
    }

    .customer-access-generate-actions
    .customer-access-button[b-qvgh5r3f2d] {
        width: 100%;
    }

    .customer-access-actions[b-qvgh5r3f2d] {
        flex-direction: column;
        align-items: stretch;
    }

        .customer-access-actions
        .customer-access-button[b-qvgh5r3f2d],
        .customer-access-header
        .customer-access-button[b-qvgh5r3f2d] {
            width: 100%;
        }

    .customer-credentials-dialog[b-qvgh5r3f2d] {
        padding: 1.2rem;
        border-radius: 14px;
    }

        .customer-credentials-dialog h2[b-qvgh5r3f2d] {
            font-size: 1.25rem;
        }

    .customer-credentials-actions[b-qvgh5r3f2d] {
        flex-direction: column;
    }

        .customer-credentials-actions
        .customer-access-button[b-qvgh5r3f2d] {
            width: 100%;
            flex: auto;
        }
}
/* /Components/Pages/Admin/Customers/CustomerCreate.razor.rz.scp.css */

/* =========================================================
   CleanDation – Neuen Kunden anlegen
   ========================================================= */

.customer-create-page[b-ttxa3t8bvd] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* =========================================================
   Einrichtungsassistent
   ========================================================= */

.customer-create-setup[b-ttxa3t8bvd] {
    margin-bottom: 1.5rem;
}

/* =========================================================
   Seitenkopf
   ========================================================= */

.customer-create-header[b-ttxa3t8bvd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.6rem;
}

.customer-create-eyebrow[b-ttxa3t8bvd] {
    margin-bottom: 0.4rem;
    color: #0d6efd;
    font-size: 0.77rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.customer-create-eyebrow-green[b-ttxa3t8bvd] {
    color: #198754;
}

.customer-create-header h1[b-ttxa3t8bvd] {
    margin: 0;
    color: #172033;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 750;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.customer-create-header p[b-ttxa3t8bvd] {
    margin: 0.55rem 0 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.55;
}

/* =========================================================
   Kartenlayout
   ========================================================= */

.customer-create-workspace[b-ttxa3t8bvd] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
    gap: 1.5rem;
}

.customer-create-side[b-ttxa3t8bvd] {
    display: grid;
    gap: 1.5rem;
    min-width: 0;
}

.customer-create-section[b-ttxa3t8bvd] {
    min-width: 0;
    padding: 1.5rem;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15,23,42,0.055);
}

/* =========================================================
   Blaue Formularkarte
   ========================================================= */

.customer-create-details[b-ttxa3t8bvd] {
    background: linear-gradient( 115deg, #ffffff 0%, #f1f6ff 30%, #dfeaff 65%, #cddfff 100% );
    border-color: #c4d8f8;
}

/* =========================================================
   Kundeninformationen
   ========================================================= */

.customer-create-context[b-ttxa3t8bvd] {
    background: linear-gradient( 115deg, #ffffff 0%, #f2f8ff 30%, #e4efff 65%, #d3e4ff 100% );
    border-color: #c9dcf7;
}

/* =========================================================
   Nächster Schritt – grüne Karte
   ========================================================= */

.customer-create-next[b-ttxa3t8bvd] {
    background: linear-gradient( 115deg, #ffffff 0%, #f1faf4 30%, #dff2e5 65%, #c6e8d2 100% );
    border-color: #bde2cb;
}

/* =========================================================
   Kartenüberschriften
   ========================================================= */

.customer-create-section-heading[b-ttxa3t8bvd] {
    margin-bottom: 1.3rem;
}

    .customer-create-section-heading h2[b-ttxa3t8bvd] {
        margin: 0;
        color: #172033;
        font-size: 1.3rem;
        font-weight: 750;
    }

    .customer-create-section-heading p[b-ttxa3t8bvd] {
        margin: 0.45rem 0 0;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.55;
    }

/* =========================================================
   Formularfelder
   ========================================================= */

.customer-create-field[b-ttxa3t8bvd] {
    min-width: 0;
    margin-bottom: 1.2rem;
}

    .customer-create-field label[b-ttxa3t8bvd] {
        display: block;
        margin-bottom: 0.5rem;
        color: #334155;
        font-size: 0.9rem;
        font-weight: 750;
    }

.customer-create-required[b-ttxa3t8bvd] {
    color: #dc3545;
    font-weight: 800;
}

.customer-create-field .form-control[b-ttxa3t8bvd] {
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 0.85rem;
    color: #172033;
    background: #ffffff;
    border: 1px solid #c7d5e6;
    border-radius: 10px;
    font-size: 0.95rem;
}

    .customer-create-field .form-control:focus[b-ttxa3t8bvd] {
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13,110,253,0.13);
    }

    .customer-create-field .form-control[b-ttxa3t8bvd]::placeholder {
        color: #94a3b8;
    }

.customer-create-field-help[b-ttxa3t8bvd] {
    margin: 0.45rem 0 0;
    color: #64748b;
    font-size: 0.83rem;
    line-height: 1.5;
}

.customer-create-divider[b-ttxa3t8bvd] {
    height: 1px;
    margin: 1.6rem 0;
    background: rgba(148,163,184,0.35);
}

/* =========================================================
   Validierung
   ========================================================= */

.customer-create-validation-summary[b-ttxa3t8bvd] {
    margin-bottom: 1rem;
    color: #b42335;
    font-size: 0.9rem;
}

.customer-create-validation[b-ttxa3t8bvd] {
    display: block;
    margin-top: 0.4rem;
    color: #b42335;
    font-size: 0.84rem;
}

.customer-create-error[b-ttxa3t8bvd] {
    margin: 1rem 0;
    padding: 0.95rem;
    color: #a22232;
    background: #fff0f1;
    border: 1px solid #f1bdc4;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 650;
}

/* =========================================================
   Buttons
   ========================================================= */

.customer-create-actions[b-ttxa3t8bvd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.customer-create-button[b-ttxa3t8bvd] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    min-height: 46px;
    padding: 0.7rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .customer-create-button:disabled[b-ttxa3t8bvd] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.customer-create-button-primary[b-ttxa3t8bvd] {
    color: #ffffff;
    background: #0d6efd;
    border-color: #0d6efd;
}

    .customer-create-button-primary:hover:not(:disabled)[b-ttxa3t8bvd] {
        color: #ffffff;
        background: #0957c3;
        border-color: #0957c3;
        text-decoration: none;
    }

.customer-create-button-secondary[b-ttxa3t8bvd] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .customer-create-button-secondary:hover[b-ttxa3t8bvd] {
        color: #ffffff;
        background: #475569;
        text-decoration: none;
    }

/* =========================================================
   Kundeninformationen
   ========================================================= */

.customer-create-info-item[b-ttxa3t8bvd] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    padding: 1rem;
    background: rgba(255,255,255,0.82);
    border: 1px solid #cfddf0;
    border-radius: 10px;
}

    .customer-create-info-item > span[b-ttxa3t8bvd] {
        color: #64748b;
        font-size: 0.73rem;
        font-weight: 800;
        letter-spacing: 0.045em;
    }

    .customer-create-info-item strong[b-ttxa3t8bvd] {
        color: #172033;
        font-size: 0.96rem;
        font-weight: 750;
        overflow-wrap: anywhere;
    }

.customer-create-context-note[b-ttxa3t8bvd] {
    margin: 0.8rem 0 0;
    color: #53657d;
    font-size: 0.86rem;
    line-height: 1.6;
}

/* =========================================================
   Nächster Schritt
   ========================================================= */

.customer-create-next-box[b-ttxa3t8bvd] {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem;
    background: rgba(255,255,255,0.78);
    border: 1px solid #cde5d5;
    border-radius: 11px;
}

.customer-create-next-icon[b-ttxa3t8bvd] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    color: #ffffff;
    background: #198754;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: 800;
}

.customer-create-next-box strong[b-ttxa3t8bvd] {
    display: block;
    color: #172033;
    font-size: 0.95rem;
    font-weight: 800;
}

.customer-create-next-box p[b-ttxa3t8bvd] {
    margin: 0.4rem 0 0;
    color: #53657d;
    font-size: 0.85rem;
    line-height: 1.55;
}

.customer-create-next-note[b-ttxa3t8bvd] {
    margin: 1rem 0 0;
    color: #53657d;
    font-size: 0.86rem;
    line-height: 1.6;
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {

    .customer-create-workspace[b-ttxa3t8bvd] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .customer-create-side[b-ttxa3t8bvd] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .customer-create-page[b-ttxa3t8bvd] {
        padding-bottom: 1rem;
    }

    .customer-create-header[b-ttxa3t8bvd] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

        .customer-create-header h1[b-ttxa3t8bvd] {
            font-size: 1.9rem;
        }

    .customer-create-workspace[b-ttxa3t8bvd],
    .customer-create-side[b-ttxa3t8bvd] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .customer-create-section[b-ttxa3t8bvd] {
        padding: 1rem;
        border-radius: 14px;
    }

    .customer-create-section-heading h2[b-ttxa3t8bvd] {
        font-size: 1.2rem;
    }

    .customer-create-actions[b-ttxa3t8bvd] {
        flex-direction: column;
        align-items: stretch;
    }

        .customer-create-actions .customer-create-button[b-ttxa3t8bvd],
        .customer-create-header .customer-create-button[b-ttxa3t8bvd] {
            width: 100%;
        }
}
/* /Components/Pages/Admin/Customers/CustomerEdit.razor.rz.scp.css */

/* =========================================================
   CleanDation – Kunde bearbeiten
   ========================================================= */

.customer-edit-page[b-br9zdl2ydj] {
    width: 100%;
    max-width: 1500px;
    padding-bottom: 2rem;
}

/* =========================================================
   Seitenkopf
   ========================================================= */

.customer-edit-header[b-br9zdl2ydj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.6rem;
}

    .customer-edit-header h1[b-br9zdl2ydj] {
        margin: 0;
        color: #172033;
        font-size: clamp(2rem, 3vw, 2.6rem);
        font-weight: 750;
        line-height: 1.15;
    }

    .customer-edit-header p[b-br9zdl2ydj] {
        margin: 0.5rem 0 0;
        color: #64748b;
        font-size: 1rem;
        line-height: 1.5;
    }

.customer-edit-loading[b-br9zdl2ydj] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

/* Status im Seitenkopf */

.customer-edit-status[b-br9zdl2ydj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 32px;
    padding: 0.4rem 0.85rem;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
}

.customer-edit-status-active[b-br9zdl2ydj] {
    background: #198754;
}

.customer-edit-status-inactive[b-br9zdl2ydj] {
    background: #64748b;
}

/* =========================================================
   Layout
   ========================================================= */

.customer-edit-workspace[b-br9zdl2ydj] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
    gap: 1.5rem;
}

.customer-edit-side[b-br9zdl2ydj] {
    display: grid;
    gap: 1.5rem;
    min-width: 0;
}

.customer-edit-section[b-br9zdl2ydj] {
    min-width: 0;
    padding: 1.4rem;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.05);
}

/* Kundendaten – Blau */

.customer-edit-details[b-br9zdl2ydj] {
    background: linear-gradient( 115deg, #ffffff 0%, #f3f7ff 35%, #e3edff 70%, #d3e2ff 100% );
    border-color: #ccdcf6;
}

/* Aktiver Kunde – Grün */

.customer-edit-status-active-section[b-br9zdl2ydj] {
    background: linear-gradient( 115deg, #ffffff 0%, #f2faf5 30%, #e1f2e7 65%, #c9e9d6 100% );
    border-color: #cce7d6;
}

/* Inaktiver Kunde – Grau */

.customer-edit-status-inactive-section[b-br9zdl2ydj] {
    background: linear-gradient( 115deg, #ffffff 0%, #f5f6f8 30%, #eaeef2 65%, #dbe2e9 100% );
    border-color: #dce3ea;
}

/* Kundenzugang – Türkis */

.customer-edit-access[b-br9zdl2ydj] {
    background: linear-gradient( 115deg, #ffffff 0%, #effaf8 30%, #dff5f0 65%, #bfece3 100% );
    border-color: #bce1da;
}

/* =========================================================
   Abschnittsüberschriften
   ========================================================= */

.customer-edit-section-header[b-br9zdl2ydj] {
    margin-bottom: 1.35rem;
}

.customer-edit-eyebrow[b-br9zdl2ydj] {
    margin-bottom: 0.35rem;
    color: #0d6efd;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.customer-edit-eyebrow-status[b-br9zdl2ydj] {
    color: #198754;
}

.customer-edit-status-inactive-section .customer-edit-eyebrow-status[b-br9zdl2ydj] {
    color: #64748b;
}

.customer-edit-eyebrow-access[b-br9zdl2ydj] {
    color: #0b887e;
}

.customer-edit-section-header h2[b-br9zdl2ydj] {
    margin: 0;
    color: #172033;
    font-size: 1.3rem;
    font-weight: 750;
}

.customer-edit-section-header p[b-br9zdl2ydj] {
    margin: 0.4rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.55;
}

/* =========================================================
   Formular
   ========================================================= */

.customer-edit-fields[b-br9zdl2ydj] {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.customer-edit-field[b-br9zdl2ydj] {
    min-width: 0;
}

    .customer-edit-field label[b-br9zdl2ydj] {
        display: block;
        margin-bottom: 0.5rem;
        color: #334155;
        font-size: 0.9rem;
        font-weight: 750;
    }

    .customer-edit-field .form-control[b-br9zdl2ydj] {
        width: 100%;
        min-height: 48px;
        padding: 0.65rem 0.85rem;
        color: #172033;
        background: #ffffff;
        border: 1px solid #cdd8e6;
        border-radius: 10px;
        font-size: 0.95rem;
    }

        .customer-edit-field .form-control:focus[b-br9zdl2ydj] {
            border-color: #0d6efd;
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
        }

.customer-edit-validation-summary[b-br9zdl2ydj] {
    margin-bottom: 1rem;
    color: #b42335;
    font-size: 0.9rem;
}

.customer-edit-validation[b-br9zdl2ydj] {
    display: block;
    margin-top: 0.4rem;
    color: #b42335;
    font-size: 0.83rem;
}

/* =========================================================
   Aktueller Status
   ========================================================= */

.customer-edit-status-box[b-br9zdl2ydj] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(203, 213, 225, 0.85);
    border-radius: 11px;
}

.customer-edit-status-box-label[b-br9zdl2ydj] {
    color: #6d7e95;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.045em;
}

.customer-edit-status-box strong[b-br9zdl2ydj] {
    color: #172033;
    font-size: 1.05rem;
    font-weight: 800;
}

.customer-edit-status-description[b-br9zdl2ydj] {
    margin: 1.25rem 0 1rem;
}

    .customer-edit-status-description strong[b-br9zdl2ydj] {
        display: block;
        color: #172033;
        font-size: 0.98rem;
        font-weight: 800;
    }

    .customer-edit-status-description p[b-br9zdl2ydj] {
        margin: 0.4rem 0 0;
        color: #53657d;
        font-size: 0.9rem;
        line-height: 1.6;
    }

/* =========================================================
   Kundenzugang
   ========================================================= */

.customer-edit-access-description[b-br9zdl2ydj] {
    margin-bottom: 1.15rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #bce1da;
    border-radius: 11px;
}

    .customer-edit-access-description strong[b-br9zdl2ydj] {
        display: block;
        color: #087f73;
        font-size: 0.94rem;
        font-weight: 800;
    }

    .customer-edit-access-description p[b-br9zdl2ydj] {
        margin: 0.35rem 0 0;
        color: #53657d;
        font-size: 0.87rem;
        line-height: 1.55;
    }

/* =========================================================
   Buttons
   ========================================================= */

.customer-edit-actions[b-br9zdl2ydj] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.4rem;
}

.customer-edit-button[b-br9zdl2ydj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 46px;
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .customer-edit-button span[b-br9zdl2ydj] {
        font-size: 1.1rem;
        font-weight: 800;
    }

    .customer-edit-button:disabled[b-br9zdl2ydj] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.customer-edit-button-primary[b-br9zdl2ydj] {
    color: #ffffff;
    background: #0d6efd;
    border-color: #0d6efd;
}

    .customer-edit-button-primary:hover:not(:disabled)[b-br9zdl2ydj] {
        color: #ffffff;
        background: #0957c3;
    }

.customer-edit-button-secondary[b-br9zdl2ydj] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .customer-edit-button-secondary:hover[b-br9zdl2ydj] {
        color: #ffffff;
        background: #475569;
        text-decoration: none;
    }

.customer-edit-button-danger[b-br9zdl2ydj] {
    color: #ffffff;
    background: #dc3545;
    border-color: #dc3545;
}

    .customer-edit-button-danger:hover:not(:disabled)[b-br9zdl2ydj] {
        color: #ffffff;
        background: #b92838;
    }

.customer-edit-button-success[b-br9zdl2ydj] {
    color: #ffffff;
    background: #198754;
    border-color: #198754;
}

    .customer-edit-button-success:hover:not(:disabled)[b-br9zdl2ydj] {
        color: #ffffff;
        background: #136c43;
    }

.customer-edit-button-outline[b-br9zdl2ydj] {
    color: #0b887e;
    background: #ffffff;
    border-color: #0b887e;
}

    .customer-edit-button-outline:hover[b-br9zdl2ydj] {
        color: #ffffff;
        background: #0b887e;
        text-decoration: none;
    }

/* =========================================================
   Nicht gefunden
   ========================================================= */

.customer-edit-not-found[b-br9zdl2ydj] {
    max-width: 760px;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
}

    .customer-edit-not-found h2[b-br9zdl2ydj] {
        margin: 0;
        color: #172033;
        font-size: 1.2rem;
        font-weight: 800;
    }

    .customer-edit-not-found p[b-br9zdl2ydj] {
        margin: 0.5rem 0 1rem;
        color: #64748b;
        font-size: 0.9rem;
    }

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {
    .customer-edit-workspace[b-br9zdl2ydj] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .customer-edit-side[b-br9zdl2ydj] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {
    .customer-edit-page[b-br9zdl2ydj] {
        padding-bottom: 1rem;
    }

    .customer-edit-header[b-br9zdl2ydj] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.9rem;
    }

        .customer-edit-header h1[b-br9zdl2ydj] {
            font-size: 2rem;
        }

    .customer-edit-workspace[b-br9zdl2ydj],
    .customer-edit-side[b-br9zdl2ydj] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .customer-edit-section[b-br9zdl2ydj] {
        padding: 1rem;
        border-radius: 14px;
    }

    .customer-edit-section-header h2[b-br9zdl2ydj] {
        font-size: 1.18rem;
    }

    .customer-edit-actions[b-br9zdl2ydj] {
        flex-direction: column;
        align-items: stretch;
    }

    .customer-edit-button[b-br9zdl2ydj] {
        width: 100%;
        min-height: 48px;
    }
}
/* /Components/Pages/Admin/Customers/CustomerObjects.razor.rz.scp.css */

/* =========================================================
   CleanDation – Kundenobjekte
   Kompakte Karten | Responsive
   ========================================================= */

.customer-objects-page[b-a5ts1cogid] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* =========================================================
   Seitenkopf
   ========================================================= */

.customer-objects-header[b-a5ts1cogid] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.6rem;
}

.customer-objects-header-content[b-a5ts1cogid] {
    min-width: 0;
}

.customer-objects-eyebrow[b-a5ts1cogid] {
    margin-bottom: 0.35rem;
    color: #0d6efd;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.customer-objects-header h1[b-a5ts1cogid] {
    margin: 0;
    color: #172033;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 750;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.customer-objects-header p[b-a5ts1cogid] {
    margin: 0.5rem 0 0;
    color: #64748b;
    font-size: 1rem;
    line-height: 1.5;
}

.customer-objects-header-actions[b-a5ts1cogid] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* =========================================================
   Filterbereich
   ========================================================= */

.customer-objects-filter-panel[b-a5ts1cogid] {
    margin-bottom: 1.5rem;
    padding: 1.35rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.045);
}

.customer-objects-filter-heading h2[b-a5ts1cogid] {
    margin: 0;
    color: #172033;
    font-size: 1.2rem;
    font-weight: 750;
}

.customer-objects-filter-heading p[b-a5ts1cogid] {
    margin: 0.4rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* =========================================================
   Registerkarten
   ========================================================= */

.object-status-tabs[b-a5ts1cogid] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.3rem;
}

.object-status-tab[b-a5ts1cogid] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    padding: 0.65rem 1rem;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #dce5ef;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

    .object-status-tab:hover:not(:disabled)[b-a5ts1cogid] {
        color: #0d6efd;
        background: #edf4ff;
        border-color: #bed7fb;
    }

.object-status-tab-active[b-a5ts1cogid] {
    color: #0d6efd;
    background: #edf4ff;
    border-color: #93baff;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.06);
}

.object-status-tab:disabled[b-a5ts1cogid] {
    opacity: 0.6;
    cursor: not-allowed;
}

.object-status-tab:focus-visible[b-a5ts1cogid] {
    outline: 3px solid rgba(13, 110, 253, 0.22);
    outline-offset: 2px;
}

/* =========================================================
   Ergebnisübersicht
   ========================================================= */

.customer-objects-results[b-a5ts1cogid] {
    width: 100%;
}

.customer-objects-results-heading[b-a5ts1cogid] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}

    .customer-objects-results-heading h2[b-a5ts1cogid] {
        margin: 0;
        color: #172033;
        font-size: 1.3rem;
        font-weight: 750;
    }

    .customer-objects-results-heading p[b-a5ts1cogid] {
        margin: 0.35rem 0 0;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.5;
    }

.customer-objects-results-count[b-a5ts1cogid] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-shrink: 0;
    color: #64748b;
    font-size: 0.86rem;
    white-space: nowrap;
}

    .customer-objects-results-count strong[b-a5ts1cogid] {
        color: #0d6efd;
        font-size: 1.4rem;
        font-weight: 800;
    }

.customer-objects-result-info[b-a5ts1cogid] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    color: #64748b;
    font-size: 0.86rem;
}

.customer-objects-loading[b-a5ts1cogid] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

/* =========================================================
   Objektkarten – kompaktes Layout
   ========================================================= */

.object-cards[b-a5ts1cogid] {
    display: grid;
    gap: 0.75rem;
}

.object-card[b-a5ts1cogid] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1.2rem;
    min-width: 0;
    padding: 1rem 1.15rem;
    border: 1px solid #dce5ef;
    border-radius: 14px;
    box-shadow: 0 5px 17px rgba(15, 23, 42, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .object-card:hover[b-a5ts1cogid] {
        transform: translateY(-1px);
        box-shadow: 0 8px 23px rgba(15, 23, 42, 0.07);
    }

/* Aktive Objekte */

.object-card-active[b-a5ts1cogid] {
    background: linear-gradient( 110deg, #ffffff 0%, #f3f7ff 30%, #e3edff 65%, #cddfff 100% );
    border-color: #ccdcf6;
}

    .object-card-active:hover[b-a5ts1cogid] {
        background: linear-gradient( 110deg, #ffffff 0%, #edf4ff 30%, #bfd6ff 100% );
    }

/* Inaktive Objekte */

.object-card-inactive[b-a5ts1cogid] {
    background: linear-gradient( 110deg, #ffffff 0%, #f5f6f8 30%, #eaeef2 65%, #dbe2e9 100% );
    border-color: #dce3ea;
}

    .object-card-inactive:hover[b-a5ts1cogid] {
        background: linear-gradient( 110deg, #ffffff 0%, #f1f3f6 30%, #cfd9e3 100% );
    }

/* =========================================================
   Objektkopf mit durchgehender Trennlinie
   ========================================================= */

.object-card-top[b-a5ts1cogid] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 1rem;
    min-width: 0;
}

/*
   Der Name und die Adresse werden über CSS Grid
   angeordnet, ohne das Razor-Markup zu ändern.

   Die Trennlinie liegt zwischen Objektname und Adresse
   und reicht über die volle Breite der Karte.
*/

.object-title-group[b-a5ts1cogid] {
    display: contents;
}

.object-title[b-a5ts1cogid] {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    color: #172033;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.object-location-info[b-a5ts1cogid] {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(100, 116, 139, 0.24);
}

.object-location[b-a5ts1cogid] {
    color: #334155;
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.object-location-detail[b-a5ts1cogid] {
    margin-top: 0.1rem;
    color: #53657d;
    font-size: 0.86rem;
    font-weight: 400;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.object-location-empty[b-a5ts1cogid] {
    color: #7c8ba0;
    font-size: 0.86rem;
    font-style: italic;
}

/* =========================================================
   Status
   ========================================================= */

.object-status[b-a5ts1cogid] {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    flex-shrink: 0;
    min-height: 26px;
    padding: 0.3rem 0.65rem;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.object-status-active[b-a5ts1cogid] {
    background: #198754;
}

.object-status-inactive[b-a5ts1cogid] {
    background: #64748b;
}

/* =========================================================
   Aktionen rechts, neben den Objektinformationen
   ========================================================= */

.object-actions[b-a5ts1cogid] {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: -2.2rem 0 0;
    padding: 0;
    border: 0;
}

.object-button[b-a5ts1cogid] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.55rem;
    min-height: 42px;
    padding: 0.55rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

    .object-button span[b-a5ts1cogid] {
        font-size: 1rem;
        font-weight: 800;
    }

.object-button-primary[b-a5ts1cogid] {
    color: #ffffff;
    background: #0d6efd;
    border-color: #0d6efd;
}

    .object-button-primary:hover[b-a5ts1cogid] {
        color: #ffffff;
        background: #0957c3;
    }

.object-button-outline[b-a5ts1cogid] {
    color: #0d6efd;
    background: #ffffff;
    border-color: #0d6efd;
}

    .object-button-outline:hover[b-a5ts1cogid] {
        color: #ffffff;
        background: #0d6efd;
    }

.object-button-secondary[b-a5ts1cogid] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .object-button-secondary:hover[b-a5ts1cogid] {
        color: #ffffff;
        background: #475569;
    }

/* =========================================================
   Leere Ansicht
   ========================================================= */

.customer-objects-empty[b-a5ts1cogid] {
    padding: 1.5rem;
    background: linear-gradient( 115deg, #ffffff 0%, #f4f8ff 45%, #e1ecff 100% );
    border: 1px solid #cddff9;
    border-radius: 14px;
}

    .customer-objects-empty strong[b-a5ts1cogid] {
        display: block;
        color: #172033;
        font-size: 1.05rem;
        font-weight: 800;
    }

    .customer-objects-empty p[b-a5ts1cogid] {
        margin: 0.45rem 0 0;
        color: #526579;
        font-size: 0.9rem;
        line-height: 1.5;
    }

.customer-objects-empty-link[b-a5ts1cogid] {
    display: inline-block;
    margin-top: 0.9rem;
    color: #0d6efd;
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
}

    .customer-objects-empty-link:hover[b-a5ts1cogid] {
        text-decoration: underline;
    }

/* =========================================================
   Nicht gefunden
   ========================================================= */

.customer-objects-not-found[b-a5ts1cogid] {
    max-width: 760px;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
}

    .customer-objects-not-found h2[b-a5ts1cogid] {
        margin: 0;
        color: #172033;
        font-size: 1.2rem;
        font-weight: 800;
    }

    .customer-objects-not-found p[b-a5ts1cogid] {
        margin: 0.5rem 0 1rem;
        color: #64748b;
        font-size: 0.9rem;
    }

/* =========================================================
   Seitennavigation
   ========================================================= */

.customer-objects-pagination[b-a5ts1cogid] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 1rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 12px;
}

.customer-objects-pagination-info[b-a5ts1cogid] {
    color: #64748b;
    font-size: 0.9rem;
}

    .customer-objects-pagination-info strong[b-a5ts1cogid] {
        color: #172033;
    }

.object-page-button[b-a5ts1cogid] {
    min-height: 42px;
    padding: 0.6rem 1rem;
    color: #0d6efd;
    background: #ffffff;
    border: 1px solid #cddff9;
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 750;
    cursor: pointer;
}

    .object-page-button:hover:not(:disabled)[b-a5ts1cogid] {
        color: #ffffff;
        background: #0d6efd;
        border-color: #0d6efd;
    }

    .object-page-button:disabled[b-a5ts1cogid] {
        color: #9aa8b9;
        background: #f8fafc;
        border-color: #e2e8f0;
        cursor: not-allowed;
    }

/* =========================================================
   Tablet und kleinere Desktop-Fenster
   ========================================================= */

@media (max-width: 1199.98px) {

    .object-card[b-a5ts1cogid] {
        grid-template-columns: minmax(0, 1fr);
    }

    .object-card-top[b-a5ts1cogid],
    .object-actions[b-a5ts1cogid] {
        grid-column: 1;
    }

    .object-actions[b-a5ts1cogid] {
        justify-content: flex-start;
        margin-top: 0.7rem;
    }

    .customer-objects-header[b-a5ts1cogid] {
        align-items: flex-start;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .customer-objects-page[b-a5ts1cogid] {
        padding-bottom: 1rem;
    }

    .customer-objects-header[b-a5ts1cogid] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

        .customer-objects-header h1[b-a5ts1cogid] {
            font-size: 2rem;
        }

    .customer-objects-header-actions[b-a5ts1cogid] {
        flex-direction: column;
        align-items: stretch;
    }

        .customer-objects-header-actions .object-button[b-a5ts1cogid] {
            width: 100%;
            min-height: 48px;
        }

    .customer-objects-filter-panel[b-a5ts1cogid] {
        padding: 1rem;
    }

    .customer-objects-filter-heading h2[b-a5ts1cogid] {
        font-size: 1.15rem;
    }

    .object-status-tabs[b-a5ts1cogid] {
        flex-direction: column;
        align-items: stretch;
    }

    .object-status-tab[b-a5ts1cogid] {
        width: 100%;
        min-height: 46px;
    }

    .customer-objects-results-heading[b-a5ts1cogid] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }

        .customer-objects-results-heading h2[b-a5ts1cogid] {
            font-size: 1.18rem;
        }

    .object-card[b-a5ts1cogid] {
        padding: 1rem;
        border-radius: 14px;
    }

    .object-title[b-a5ts1cogid] {
        font-size: 1.1rem;
    }

    .object-actions[b-a5ts1cogid] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
        width: 100%;
    }

        .object-actions .object-button[b-a5ts1cogid] {
            width: 100%;
            min-height: 48px;
            white-space: normal;
        }

    .customer-objects-pagination[b-a5ts1cogid] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .customer-objects-pagination-info[b-a5ts1cogid] {
        order: -1;
        width: 100%;
        text-align: center;
    }

    .object-page-button[b-a5ts1cogid] {
        flex: 1;
    }
}

/* =========================================================
   Kleine Smartphones
   ========================================================= */

@media (max-width: 430px) {

    .object-card-top[b-a5ts1cogid] {
        column-gap: 0.7rem;
    }

    .object-status[b-a5ts1cogid] {
        padding: 0.3rem 0.55rem;
    }
}

/* =========================================================
   Tastaturbedienung
   ========================================================= */

.customer-objects-page a:focus-visible[b-a5ts1cogid],
.customer-objects-page button:focus-visible[b-a5ts1cogid] {
    outline: 3px solid #80b8ff;
    outline-offset: 3px;
}

/* =========================================================
   Reduzierte Animationen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .object-card[b-a5ts1cogid],
    .object-button[b-a5ts1cogid],
    .object-status-tab[b-a5ts1cogid] {
        transition: none;
    }
}
/* /Components/Pages/Admin/Customers/Customers.razor.rz.scp.css */

/* =========================================================
   CleanDation – Kunden & Objekte
   Kompakte Einmalkunden-Karten | Responsive
   ========================================================= */

.customers-page[b-qqxqg9a78g] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* =========================================================
   Seitenkopf
   ========================================================= */

.customers-header[b-qqxqg9a78g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.6rem;
}

    .customers-header h1[b-qqxqg9a78g] {
        margin: 0;
        color: #172033;
        font-size: clamp(2rem, 3vw, 2.6rem);
        font-weight: 750;
        line-height: 1.15;
    }

    .customers-header p[b-qqxqg9a78g] {
        margin: 0.5rem 0 0;
        color: #64748b;
        font-size: 1rem;
    }

.customers-create-button[b-qqxqg9a78g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-shrink: 0;
    min-height: 46px;
    padding: 0.7rem 1.05rem;
    color: #ffffff;
    background: #0d6efd;
    border: 1px solid #0d6efd;
    border-radius: 10px;
    font-size: 0.91rem;
    font-weight: 750;
    text-decoration: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

    .customers-create-button:hover[b-qqxqg9a78g] {
        color: #ffffff;
        background: #0957c3;
        box-shadow: 0 5px 16px rgba(13, 110, 253, 0.18);
    }

    .customers-create-button span[b-qqxqg9a78g] {
        font-size: 1.1rem;
        font-weight: 800;
    }

/* =========================================================
   Suche und Statusfilter
   ========================================================= */

.customers-filter-panel[b-qqxqg9a78g] {
    margin-bottom: 1.5rem;
    padding: 1.35rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.045);
}

.customers-eyebrow[b-qqxqg9a78g] {
    margin-bottom: 0.35rem;
    color: #0d6efd;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.customers-filter-heading h2[b-qqxqg9a78g] {
    margin: 0;
    color: #172033;
    font-size: 1.2rem;
    font-weight: 750;
}

.customers-filter-heading p[b-qqxqg9a78g] {
    margin: 0.35rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
}

.customers-filter-content[b-qqxqg9a78g] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.customer-search[b-qqxqg9a78g] {
    width: 100%;
    max-width: 430px;
    min-width: 240px;
}

    .customer-search label[b-qqxqg9a78g] {
        display: block;
        margin-bottom: 0.45rem;
        color: #334155;
        font-size: 0.86rem;
        font-weight: 750;
    }

    .customer-search .form-control[b-qqxqg9a78g] {
        width: 100%;
        min-height: 46px;
        padding: 0.65rem 0.85rem;
        color: #172033;
        background: #ffffff;
        border: 1px solid #cdd8e6;
        border-radius: 10px;
        font-size: 0.94rem;
    }

        .customer-search .form-control:focus[b-qqxqg9a78g] {
            border-color: #0d6efd;
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
        }

/* =========================================================
   Registerkarten
   ========================================================= */

.customer-status-tabs[b-qqxqg9a78g] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.customer-status-tab[b-qqxqg9a78g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.65rem 1rem;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #dce5ef;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .customer-status-tab:hover[b-qqxqg9a78g] {
        color: #0d6efd;
        background: #edf4ff;
        border-color: #bed7fb;
    }

.customer-status-tab-active[b-qqxqg9a78g] {
    color: #0d6efd;
    background: #edf4ff;
    border-color: #93baff;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.06);
}

.customer-status-tab-onetime-active[b-qqxqg9a78g] {
    color: #0b887e;
    background: #e4f8f3;
    border-color: #6bcbbb;
    box-shadow: 0 0 0 2px rgba(15, 159, 145, 0.06);
}

    .customer-status-tab-onetime-active:hover[b-qqxqg9a78g] {
        color: #087f73;
        background: #d4f2eb;
        border-color: #4ebdab;
    }

/* =========================================================
   Ergebnisüberschrift
   ========================================================= */

.customers-results[b-qqxqg9a78g] {
    width: 100%;
}

.customers-results-heading[b-qqxqg9a78g] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}

    .customers-results-heading h2[b-qqxqg9a78g] {
        margin: 0;
        color: #172033;
        font-size: 1.3rem;
        font-weight: 750;
    }

    .customers-results-heading p[b-qqxqg9a78g] {
        margin: 0.35rem 0 0;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.5;
    }

.customers-results-count[b-qqxqg9a78g] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    color: #64748b;
    font-size: 0.86rem;
    white-space: nowrap;
}

    .customers-results-count strong[b-qqxqg9a78g] {
        color: #0d6efd;
        font-size: 1.35rem;
        font-weight: 800;
    }

.customers-result-header[b-qqxqg9a78g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    color: #64748b;
    font-size: 0.86rem;
}

.customers-loading[b-qqxqg9a78g] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

/* =========================================================
   Allgemeine Kundenkarten
   ========================================================= */

.customer-cards[b-qqxqg9a78g] {
    display: grid;
    gap: 1rem;
}

.customer-card[b-qqxqg9a78g] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1.5rem;
    align-items: center;
    min-width: 0;
    padding: 1.25rem 1.35rem;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.055);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .customer-card:hover[b-qqxqg9a78g] {
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    }

.customer-card-top[b-qqxqg9a78g],
.customer-setup-notice[b-qqxqg9a78g],
.customer-onetime-info[b-qqxqg9a78g] {
    grid-column: 1 / -1;
}

/* =========================================================
   Aktive Kunden
   ========================================================= */

.customer-card-active[b-qqxqg9a78g] {
    background: linear-gradient( 110deg, #ffffff 0%, #f3f7ff 30%, #e3edff 65%, #cddfff 100% );
    border-color: #ccdcf6;
}

    .customer-card-active:hover[b-qqxqg9a78g] {
        background: linear-gradient( 110deg, #ffffff 0%, #edf4ff 30%, #bfd6ff 100% );
    }

/* =========================================================
   Inaktive Kunden
   ========================================================= */

.customer-card-inactive[b-qqxqg9a78g] {
    background: linear-gradient( 110deg, #ffffff 0%, #f5f6f8 30%, #eaeef2 65%, #dbe2e9 100% );
    border-color: #dce3ea;
}

    .customer-card-inactive:hover[b-qqxqg9a78g] {
        background: linear-gradient( 110deg, #ffffff 0%, #f1f3f6 30%, #cfd9e3 100% );
    }

/* =========================================================
   Einmalkunden – Hintergrund
   ========================================================= */

.customer-card-onetime[b-qqxqg9a78g] {
    background: linear-gradient( 110deg, #ffffff 0%, #effaf8 30%, #dff5f0 65%, #bfece3 100% );
    border-color: #bce1da;
}

    .customer-card-onetime:hover[b-qqxqg9a78g] {
        background: linear-gradient( 110deg, #ffffff 0%, #eaf8f5 30%, #b3e4da 100% );
    }

/* =========================================================
   Kopf der Kundenkarte
   ========================================================= */

.customer-card-top[b-qqxqg9a78g] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.customer-title-group[b-qqxqg9a78g] {
    min-width: 0;
}

.customer-title[b-qqxqg9a78g] {
    margin: 0;
    color: #172033;
    font-size: 1.25rem;
    font-weight: 650;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.customer-count-badges[b-qqxqg9a78g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.customer-count-badge[b-qqxqg9a78g] {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0.3rem 0.65rem;
    color: #334155;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #d4deea;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

/* =========================================================
   Status-Badges
   ========================================================= */

.customer-status[b-qqxqg9a78g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 28px;
    padding: 0.3rem 0.75rem;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.customer-status-active[b-qqxqg9a78g] {
    background: #198754;
}

.customer-status-inactive[b-qqxqg9a78g] {
    background: #64748b;
}

.customer-status-onetime[b-qqxqg9a78g] {
    background: #0f9f91;
}

/* =========================================================
   Einrichtungshinweis aktiver Kunden
   ========================================================= */

.customer-setup-notice[b-qqxqg9a78g] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-top: 1.1rem;
    padding: 0.95rem 1.05rem;
    background: linear-gradient( 110deg, #fffdfa 0%, #fff2d8 65%, #ffe6b0 100% );
    border: 1px solid #eacb88;
    border-radius: 11px;
}

.customer-setup-symbol[b-qqxqg9a78g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    color: #ffffff;
    background: #bd7900;
    border-radius: 50%;
    font-size: 0.88rem;
    font-weight: 850;
}

.customer-setup-content[b-qqxqg9a78g] {
    min-width: 0;
}

    .customer-setup-content strong[b-qqxqg9a78g] {
        display: block;
        color: #825000;
        font-size: 0.92rem;
        font-weight: 800;
    }

    .customer-setup-content p[b-qqxqg9a78g] {
        margin: 0.3rem 0 0;
        color: #765b35;
        font-size: 0.85rem;
        line-height: 1.5;
    }

/* =========================================================
   Kontaktdaten
   ========================================================= */

.customer-meta[b-qqxqg9a78g] {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-self: stretch;
    align-content: center;
    min-width: 0;
    margin-top: 1rem;
    padding-top: 0.95rem;
    border-top: 1px solid rgba(100, 116, 139, 0.2);
}

.customer-meta-item[b-qqxqg9a78g] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.customer-meta-label[b-qqxqg9a78g] {
    display: block;
    color: #6d7e95;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.customer-meta-value[b-qqxqg9a78g] {
    color: #26374c;
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.customer-meta-empty[b-qqxqg9a78g] {
    color: #8492a6;
    font-weight: 500;
}

.customer-phone-link[b-qqxqg9a78g] {
    color: #0d6efd;
    font-size: 0.88rem;
    font-weight: 400;
    text-decoration: none;
}

    .customer-phone-link:hover[b-qqxqg9a78g] {
        color: #0957c3;
        text-decoration: underline;
    }

/* =========================================================
   Einmalkunden – Statushinweis
   ========================================================= */

.customer-onetime-info[b-qqxqg9a78g] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
    padding: 0.8rem 0.95rem;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid #a9dbd2;
    border-left: 4px solid #0f9f91;
    border-radius: 9px;
}

.customer-onetime-info-label[b-qqxqg9a78g] {
    color: #087f73;
    font-size: 0.73rem;
    font-weight: 850;
    letter-spacing: 0.045em;
}

.customer-onetime-info-value[b-qqxqg9a78g] {
    color: #334155;
    font-size: 0.86rem;
    font-weight: 650;
}

/* =========================================================
   Aktionsbuttons
   ========================================================= */

.customer-actions[b-qqxqg9a78g] {
    grid-column: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.6rem;
    align-self: center;
    width: auto;
    margin-top: 1rem;
    padding-top: 0.95rem;
    border-top: 1px solid rgba(100, 116, 139, 0.2);
}

.customer-action-button[b-qqxqg9a78g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 43px;
    padding: 0.6rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 750;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

    .customer-action-button span[b-qqxqg9a78g] {
        font-size: 1.05rem;
        font-weight: 800;
    }

.customer-action-outline[b-qqxqg9a78g] {
    color: #0d6efd;
    background: #ffffff;
    border-color: #0d6efd;
}

    .customer-action-outline:hover[b-qqxqg9a78g] {
        color: #ffffff;
        background: #0d6efd;
    }

.customer-action-secondary[b-qqxqg9a78g] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .customer-action-secondary:hover[b-qqxqg9a78g] {
        color: #ffffff;
        background: #475569;
    }

.customer-action-primary[b-qqxqg9a78g] {
    color: #ffffff;
    background: #0d6efd;
    border-color: #0d6efd;
}

    .customer-action-primary:hover[b-qqxqg9a78g] {
        color: #ffffff;
        background: #0957c3;
    }

/* =========================================================
   NEU: KOMPAKTE EINMALKUNDEN-KARTEN

   Die folgenden Regeln gelten ausschließlich für
   .customer-card-onetime.

   Desktop:
   1. Name, Anzahl und Kundenstatus
   2. Kontaktdaten
   3. Kurzer Statushinweis links und Buttons rechts

   Es werden keine Informationen ausgeblendet.
   ========================================================= */

.customer-card-onetime[b-qqxqg9a78g] {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1.25rem;
    row-gap: 0;
    align-items: center;
    padding: 0.85rem 1.05rem;
}

    .customer-card-onetime .customer-card-top[b-qqxqg9a78g] {
        grid-column: 1 / -1;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .customer-card-onetime .customer-title[b-qqxqg9a78g] {
        font-size: 1.13rem;
        line-height: 1.25;
    }

    .customer-card-onetime .customer-count-badges[b-qqxqg9a78g] {
        margin-top: 0.4rem;
        gap: 0.35rem;
    }

    .customer-card-onetime .customer-count-badge[b-qqxqg9a78g] {
        min-height: 24px;
        padding: 0.25rem 0.55rem;
        font-size: 0.73rem;
    }

    .customer-card-onetime .customer-status[b-qqxqg9a78g] {
        min-height: 25px;
        padding: 0.3rem 0.65rem;
        font-size: 0.71rem;
    }

    /* Kontaktdaten nehmen die gesamte Breite ein. */

    .customer-card-onetime .customer-meta[b-qqxqg9a78g] {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.7rem;
        margin-top: 0.65rem;
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
        border-top: 1px solid rgba(15, 118, 110, 0.14);
        border-bottom: 1px solid rgba(15, 118, 110, 0.14);
    }

    .customer-card-onetime .customer-meta-item[b-qqxqg9a78g] {
        gap: 0.2rem;
    }

    .customer-card-onetime .customer-meta-label[b-qqxqg9a78g] {
        color: #52766c;
        font-size: 0.65rem;
    }

    .customer-card-onetime .customer-meta-value[b-qqxqg9a78g] {
        font-size: 0.83rem;
        line-height: 1.35;
    }

    .customer-card-onetime .customer-phone-link[b-qqxqg9a78g] {
        font-size: 0.83rem;
    }

    /* Status und Buttons befinden sich in einer Zeile. */

    .customer-card-onetime .customer-onetime-info[b-qqxqg9a78g] {
        grid-column: 1;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
        margin-top: 0.6rem;
        padding: 0.55rem 0.7rem;
        border: 0;
        border-left: 3px solid #0f9f91;
        border-radius: 7px;
        background: rgba(255, 255, 255, 0.46);
    }

    .customer-card-onetime .customer-onetime-info-label[b-qqxqg9a78g] {
        font-size: 0.66rem;
        white-space: nowrap;
    }

    .customer-card-onetime .customer-onetime-info-value[b-qqxqg9a78g] {
        font-size: 0.81rem;
        line-height: 1.35;
    }

    .customer-card-onetime .customer-actions[b-qqxqg9a78g] {
        grid-column: 2;
        justify-content: flex-end;
        flex-wrap: nowrap;
        align-self: center;
        gap: 0.45rem;
        margin-top: 0.6rem;
        padding-top: 0;
        border-top: 0;
    }

    .customer-card-onetime .customer-action-button[b-qqxqg9a78g] {
        min-height: 39px;
        padding: 0.48rem 0.7rem;
        font-size: 0.77rem;
    }

/* =========================================================
   Leere Kundenansicht
   ========================================================= */

.customer-empty-state[b-qqxqg9a78g] {
    padding: 1.5rem;
    background: linear-gradient( 115deg, #ffffff 0%, #f4f8ff 50%, #e1ecff 100% );
    border: 1px solid #cddff9;
    border-radius: 14px;
}

.customer-empty-title[b-qqxqg9a78g] {
    color: #172033;
    font-size: 1.05rem;
    font-weight: 800;
}

.customer-empty-text[b-qqxqg9a78g] {
    margin-top: 0.4rem;
    color: #526579;
    font-size: 0.9rem;
    line-height: 1.5;
}

.customer-empty-link[b-qqxqg9a78g] {
    display: inline-block;
    margin-top: 0.9rem;
    color: #0d6efd;
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
}

    .customer-empty-link:hover[b-qqxqg9a78g] {
        text-decoration: underline;
    }

/* =========================================================
   Seitennavigation
   ========================================================= */

.customers-pagination[b-qqxqg9a78g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 1rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 12px;
}

.customers-pagination-info[b-qqxqg9a78g] {
    color: #64748b;
    font-size: 0.9rem;
}

    .customers-pagination-info strong[b-qqxqg9a78g] {
        color: #172033;
    }

.customers-page-button[b-qqxqg9a78g] {
    min-height: 42px;
    padding: 0.6rem 1rem;
    color: #0d6efd;
    background: #ffffff;
    border: 1px solid #cddff9;
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 750;
    cursor: pointer;
}

    .customers-page-button:hover:not(:disabled)[b-qqxqg9a78g] {
        color: #ffffff;
        background: #0d6efd;
        border-color: #0d6efd;
    }

    .customers-page-button:disabled[b-qqxqg9a78g] {
        color: #9aa8b9;
        background: #f8fafc;
        border-color: #e2e8f0;
        cursor: not-allowed;
    }

/* =========================================================
   Mittlere Desktop-Fenster und Tablets
   ========================================================= */

@media (max-width: 1199.98px) {

    .customers-filter-content[b-qqxqg9a78g] {
        flex-direction: column;
        align-items: stretch;
    }

    .customer-search[b-qqxqg9a78g] {
        max-width: 100%;
        min-width: 0;
    }

    .customer-card[b-qqxqg9a78g] {
        grid-template-columns: minmax(0, 1fr);
    }

    .customer-meta[b-qqxqg9a78g],
    .customer-actions[b-qqxqg9a78g] {
        grid-column: 1;
    }

    .customer-actions[b-qqxqg9a78g] {
        justify-content: flex-start;
        flex-wrap: wrap;
        align-self: auto;
        margin-top: 0.8rem;
        padding-top: 0;
        border-top: 0;
    }

    /* Kompakte Einmalkunden bleiben zweispaltig,
       solange ausreichend Platz vorhanden ist. */

    .customer-card-onetime[b-qqxqg9a78g] {
        grid-template-columns: minmax(0, 1fr);
    }

        .customer-card-onetime .customer-meta[b-qqxqg9a78g],
        .customer-card-onetime .customer-onetime-info[b-qqxqg9a78g],
        .customer-card-onetime .customer-actions[b-qqxqg9a78g] {
            grid-column: 1;
        }

        .customer-card-onetime .customer-actions[b-qqxqg9a78g] {
            justify-content: flex-start;
            margin-top: 0.5rem;
        }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .customers-page[b-qqxqg9a78g] {
        padding-bottom: 1rem;
    }

    .customers-header[b-qqxqg9a78g] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

        .customers-header h1[b-qqxqg9a78g] {
            font-size: 2rem;
        }

    .customers-create-button[b-qqxqg9a78g] {
        width: 100%;
        min-height: 48px;
    }

    .customers-filter-panel[b-qqxqg9a78g] {
        padding: 1rem;
    }

    .customers-filter-heading h2[b-qqxqg9a78g] {
        font-size: 1.15rem;
    }

    .customer-status-tabs[b-qqxqg9a78g] {
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 0.3rem;
    }

    .customer-status-tab[b-qqxqg9a78g] {
        flex: 0 0 auto;
        min-height: 46px;
    }

    .customers-results-heading[b-qqxqg9a78g] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }

        .customers-results-heading h2[b-qqxqg9a78g] {
            font-size: 1.18rem;
        }

    .customer-card[b-qqxqg9a78g] {
        padding: 1rem;
        border-radius: 14px;
    }

    .customer-title[b-qqxqg9a78g] {
        font-size: 1.15rem;
    }

    .customer-meta[b-qqxqg9a78g] {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

    .customer-actions[b-qqxqg9a78g] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.65rem;
    }

    .customer-action-button[b-qqxqg9a78g] {
        width: 100%;
        min-height: 48px;
        white-space: normal;
    }

    .customers-pagination[b-qqxqg9a78g] {
        flex-wrap: wrap;
    }

    .customers-pagination-info[b-qqxqg9a78g] {
        order: -1;
        width: 100%;
        text-align: center;
    }

    .customers-page-button[b-qqxqg9a78g] {
        flex: 1;
    }

    /* Einmalkunden: kompakte mobile Ansicht */

    .customer-card-onetime[b-qqxqg9a78g] {
        grid-template-columns: minmax(0, 1fr);
        padding: 0.85rem;
    }

        .customer-card-onetime .customer-card-top[b-qqxqg9a78g] {
            gap: 0.5rem;
        }

        .customer-card-onetime .customer-meta[b-qqxqg9a78g] {
            grid-column: 1;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.65rem;
        }

        .customer-card-onetime .customer-onetime-info[b-qqxqg9a78g] {
            grid-column: 1;
            margin-top: 0.55rem;
        }

        .customer-card-onetime .customer-actions[b-qqxqg9a78g] {
            grid-column: 1;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: stretch;
            width: 100%;
            gap: 0.5rem;
            margin-top: 0.55rem;
        }

        .customer-card-onetime .customer-action-button[b-qqxqg9a78g] {
            flex: 1 1 135px;
            width: auto;
            min-height: 44px;
            white-space: normal;
        }
}

/* =========================================================
   Sehr kleine Smartphones
   ========================================================= */

@media (max-width: 430px) {

    .customer-card-top[b-qqxqg9a78g] {
        gap: 0.65rem;
    }

    .customer-status[b-qqxqg9a78g] {
        padding: 0.3rem 0.55rem;
    }

    .customer-count-badge[b-qqxqg9a78g] {
        font-size: 0.74rem;
    }

    .customer-card-onetime .customer-meta[b-qqxqg9a78g] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.55rem;
    }

    .customer-card-onetime .customer-actions[b-qqxqg9a78g] {
        flex-direction: column;
    }

    .customer-card-onetime .customer-action-button[b-qqxqg9a78g] {
        flex: 0 0 auto;
        width: 100%;
        min-height: 46px;
    }
}

/* =========================================================
   Tastaturbedienung
   ========================================================= */

.customers-page a:focus-visible[b-qqxqg9a78g],
.customers-page button:focus-visible[b-qqxqg9a78g],
.customers-page input:focus-visible[b-qqxqg9a78g] {
    outline: 3px solid #80b8ff;
    outline-offset: 3px;
}

/* =========================================================
   Reduzierte Animationen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .customer-card[b-qqxqg9a78g],
    .customer-action-button[b-qqxqg9a78g],
    .customer-create-button[b-qqxqg9a78g],
    .customer-status-tab[b-qqxqg9a78g] {
        transition: none;
    }
}
/* /Components/Pages/Admin/Dashboard/Dashboard.razor.rz.scp.css */
/* =========================================================
   CleanDation – Dashboard
   ========================================================= */

.dashboard-page[b-yqutdeu8s3] {
    width: 100%;
    max-width: 1500px;
    padding-bottom: 2rem;
    color: #172033;
}

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

.dashboard-header[b-yqutdeu8s3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 1.6rem;
}

.dashboard-eyebrow[b-yqutdeu8s3] {
    margin-bottom: 0.3rem;
    color: #0d6efd;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.09em;
}

.dashboard-header h1[b-yqutdeu8s3] {
    margin: 0;
    color: #172033;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 750;
    line-height: 1.1;
}

.dashboard-header p[b-yqutdeu8s3] {
    margin: 0.5rem 0 0;
    color: #64748b;
    font-size: 1rem;
}

.dashboard-date[b-yqutdeu8s3] {
    min-width: 230px;
    padding: 0.8rem 1rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(15,23,42,0.035);
    text-align: right;
}

.dashboard-date-label[b-yqutdeu8s3] {
    color: #8492a6;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dashboard-date-value[b-yqutdeu8s3] {
    margin-top: 0.15rem;
    color: #334155;
    font-size: 0.94rem;
    font-weight: 700;
}

.dashboard-loading[b-yqutdeu8s3] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 180px;
    color: #64748b;
}

/* =========================================================
   ALLGEMEINE KARTEN
   ========================================================= */

.dashboard-panel[b-yqutdeu8s3],
.dashboard-onboarding[b-yqutdeu8s3] {
    margin-bottom: 1.5rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15,23,42,0.045);
}

.dashboard-panel[b-yqutdeu8s3] {
    min-width: 0;
    padding: 1.35rem;
}

.dashboard-section-eyebrow[b-yqutdeu8s3] {
    margin-bottom: 0.35rem;
    color: #0d6efd;
    font-size: 0.79rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.dashboard-section-eyebrow-danger[b-yqutdeu8s3] {
    color: #dc3545;
}

.dashboard-section-eyebrow-teal[b-yqutdeu8s3] {
    color: #0f9f91;
}

.dashboard-section-header[b-yqutdeu8s3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1.15rem;
}

    .dashboard-section-header h2[b-yqutdeu8s3] {
        margin: 0;
        color: #172033;
        font-size: 1.28rem;
        font-weight: 750;
    }

    .dashboard-section-header p[b-yqutdeu8s3] {
        margin: 0.3rem 0 0;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.5;
    }

.dashboard-heading-with-count[b-yqutdeu8s3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.dashboard-section-button[b-yqutdeu8s3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 0.5rem;
    min-height: 40px;
    padding: 0.5rem 0.85rem;
    color: #0d6efd;
    background: #ffffff;
    border: 1px solid #bed7fb;
    border-radius: 9px;
    font-size: 0.86rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

    .dashboard-section-button:hover[b-yqutdeu8s3] {
        color: #ffffff;
        background: #0d6efd;
        border-color: #0d6efd;
        text-decoration: none;
    }

.dashboard-section-button-danger[b-yqutdeu8s3] {
    color: #dc3545;
    border-color: #f2b8be;
}

    .dashboard-section-button-danger:hover[b-yqutdeu8s3] {
        color: #ffffff;
        background: #dc3545;
        border-color: #dc3545;
    }

.dashboard-section-button span[b-yqutdeu8s3] {
    font-size: 1.05rem;
    font-weight: 800;
}

/* =========================================================
   EINRICHTUNGSASSISTENT
   ========================================================= */

.dashboard-onboarding[b-yqutdeu8s3] {
    overflow: hidden;
    padding: 1.35rem;
    background: linear-gradient( 125deg, #ffffff 0%, #ffffff 50%, #e8f2ff 100% );
    border-color: #cbdff7;
}

.dashboard-onboarding-top[b-yqutdeu8s3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.dashboard-onboarding-eyebrow[b-yqutdeu8s3] {
    margin-bottom: 0.25rem;
    color: #0d6efd;
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.dashboard-onboarding h2[b-yqutdeu8s3] {
    margin: 0;
    color: #172033;
    font-size: 1.25rem;
    font-weight: 750;
}

.dashboard-onboarding p[b-yqutdeu8s3] {
    margin: 0.3rem 0 0;
    color: #64748b;
    font-size: 0.92rem;
}

.dashboard-onboarding-progress-number[b-yqutdeu8s3] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

    .dashboard-onboarding-progress-number strong[b-yqutdeu8s3] {
        color: #0d6efd;
        font-size: 1.5rem;
        line-height: 1;
    }

    .dashboard-onboarding-progress-number span[b-yqutdeu8s3] {
        margin-top: 0.25rem;
        color: #64748b;
        font-size: 0.8rem;
    }

.dashboard-onboarding-progress[b-yqutdeu8s3] {
    height: 8px;
    margin: 1.15rem 0;
    overflow: hidden;
    background: #e0eaf6;
    border-radius: 999px;
}

.dashboard-onboarding-progress-bar[b-yqutdeu8s3] {
    height: 100%;
    background: linear-gradient(90deg, #0d6efd, #55a0ff);
    border-radius: inherit;
    transition: width 0.25s ease;
}

.dashboard-onboarding-steps[b-yqutdeu8s3] {
    overflow: hidden;
    background: rgba(255,255,255,0.88);
    border: 1px solid #dce6f2;
    border-radius: 12px;
}

.dashboard-onboarding-step[b-yqutdeu8s3] {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) auto;
    align-items: center;
    gap: 0.9rem;
    min-height: 74px;
    padding: 0.85rem 0.95rem;
    border-bottom: 1px solid #e8edf3;
}

    .dashboard-onboarding-step:last-child[b-yqutdeu8s3] {
        border-bottom: 0;
    }

.dashboard-onboarding-step-completed[b-yqutdeu8s3] {
    background: linear-gradient( 100deg, #ffffff 0%, #ffffff 55%, #eaf7ee 100% );
}

.dashboard-onboarding-number[b-yqutdeu8s3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #0d6efd;
    background: #eaf2ff;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 850;
}

.dashboard-onboarding-number-completed[b-yqutdeu8s3] {
    color: #ffffff;
    background: #198754;
}

.dashboard-onboarding-step-title[b-yqutdeu8s3] {
    color: #243044;
    font-size: 0.96rem;
    font-weight: 750;
}

.dashboard-onboarding-step-description[b-yqutdeu8s3] {
    margin-top: 0.15rem;
    color: #64748b;
    font-size: 0.85rem;
    line-height: 1.4;
}

.dashboard-onboarding-done[b-yqutdeu8s3] {
    padding: 0.3rem 0.55rem;
    color: #166534;
    background: #e0f3e7;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
}

.dashboard-onboarding-button[b-yqutdeu8s3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 38px;
    padding: 0.45rem 0.75rem;
    color: #0d6efd;
    background: #ffffff;
    border: 1px solid #0d6efd;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

    .dashboard-onboarding-button:hover[b-yqutdeu8s3] {
        color: #ffffff;
        background: #0d6efd;
        text-decoration: none;
    }

/* =========================================================
   STATISTIKKARTEN
   ========================================================= */

.dashboard-stats[b-yqutdeu8s3] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dashboard-stat-card[b-yqutdeu8s3] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 154px;
    padding: 1.15rem;
    color: inherit;
    border: 1px solid #dce5ef;
    border-radius: 15px;
    box-shadow: 0 6px 20px rgba(15,23,42,0.05);
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}

    .dashboard-stat-card:hover[b-yqutdeu8s3] {
        color: inherit;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 10px 26px rgba(15,23,42,0.085);
    }

.dashboard-stat-value[b-yqutdeu8s3] {
    color: #172033;
    font-size: 2.35rem;
    font-weight: 800;
    line-height: 1.1;
}

.dashboard-stat-label[b-yqutdeu8s3] {
    order: -1;
    margin-bottom: 0.55rem;
    color: #334155;
    font-size: 1rem;
    font-weight: 750;
}

.dashboard-stat-footer[b-yqutdeu8s3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.7rem;
    margin-top: auto;
    padding-top: 0.75rem;
    color: #64748b;
    font-size: 0.86rem;
}

.dashboard-stat-arrow[b-yqutdeu8s3] {
    flex-shrink: 0;
    color: #64748b;
    font-size: 1.1rem;
    font-weight: 800;
}

.dashboard-stat-success[b-yqutdeu8s3] {
    background: linear-gradient( 115deg, #ffffff 0%, #f2faf5 30%, #e1f2e7 65%, #c9e9d6 100% );
    border-color: #cce7d6;
}

    .dashboard-stat-success .dashboard-stat-value[b-yqutdeu8s3],
    .dashboard-stat-success .dashboard-stat-arrow[b-yqutdeu8s3] {
        color: #198754;
    }

.dashboard-stat-running[b-yqutdeu8s3] {
    background: linear-gradient( 115deg, #ffffff 0%, #f2f7ff 30%, #e3eeff 65%, #cddfff 100% );
    border-color: #d1e0f8;
}

    .dashboard-stat-running .dashboard-stat-value[b-yqutdeu8s3],
    .dashboard-stat-running .dashboard-stat-arrow[b-yqutdeu8s3] {
        color: #0d6efd;
    }

.dashboard-stat-danger[b-yqutdeu8s3] {
    background: linear-gradient( 115deg, #ffffff 0%, #fff4f5 30%, #fce7ea 65%, #f6d2d8 100% );
    border-color: #f0d5da;
}

    .dashboard-stat-danger .dashboard-stat-value[b-yqutdeu8s3],
    .dashboard-stat-danger .dashboard-stat-arrow[b-yqutdeu8s3] {
        color: #dc3545;
    }

.dashboard-stat-employees[b-yqutdeu8s3] {
    background: linear-gradient( 115deg, #ffffff 0%, #f5f6f8 30%, #eaeef2 65%, #dbe2e9 100% );
    border-color: #dce3ea;
}

    .dashboard-stat-employees .dashboard-stat-value[b-yqutdeu8s3] {
        color: #212529;
    }

/* =========================================================
   TAGESÜBERSICHT
   ========================================================= */

.dashboard-day-panel[b-yqutdeu8s3] {
    padding: 1.4rem 1.5rem;
    background: linear-gradient( 115deg, #ffffff 0%, #ffffff 55%, #eaf6ee 100% );
}

.dashboard-day-header[b-yqutdeu8s3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

    .dashboard-day-header h2[b-yqutdeu8s3] {
        margin: 0;
        color: #172033;
        font-size: 1.25rem;
        font-weight: 750;
    }

    .dashboard-day-header p[b-yqutdeu8s3] {
        margin: 0.35rem 0 0;
        color: #64748b;
        font-size: 0.94rem;
    }

.dashboard-day-percentage[b-yqutdeu8s3] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

    .dashboard-day-percentage strong[b-yqutdeu8s3] {
        color: #198754;
        font-size: 1.75rem;
        line-height: 1;
    }

    .dashboard-day-percentage span[b-yqutdeu8s3] {
        margin-top: 0.25rem;
        color: #64748b;
        font-size: 0.8rem;
    }

.dashboard-day-progress[b-yqutdeu8s3] {
    height: 13px;
    margin: 1.2rem 0 0.8rem;
    overflow: hidden;
    background: #e3e9ef;
    border-radius: 999px;
}

.dashboard-day-progress-bar[b-yqutdeu8s3] {
    height: 100%;
    background: linear-gradient(90deg, #198754, #43b77a);
    border-radius: inherit;
    transition: width 0.25s ease;
}

.dashboard-day-footer[b-yqutdeu8s3] {
    display: flex;
    justify-content: flex-end;
}

.dashboard-day-complete[b-yqutdeu8s3] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #198754;
    font-size: 0.9rem;
    font-weight: 750;
}

.dashboard-day-open[b-yqutdeu8s3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #64748b;
    font-size: 0.88rem;
}

    .dashboard-day-open strong[b-yqutdeu8s3] {
        color: #9a6700;
    }

    .dashboard-day-open a[b-yqutdeu8s3],
    .dashboard-subtle-link[b-yqutdeu8s3] {
        color: #9a6700;
        font-weight: 750;
        text-decoration: none;
    }

        .dashboard-day-open a:hover[b-yqutdeu8s3],
        .dashboard-subtle-link:hover[b-yqutdeu8s3] {
            text-decoration: underline;
        }

/* =========================================================
   KARTENLAYOUT
   ========================================================= */

.dashboard-two-column[b-yqutdeu8s3],
.dashboard-bottom-grid[b-yqutdeu8s3] {
    display: grid;
    gap: 1.5rem;
    align-items: stretch;
}

/* Reinigungen heute / Bevorstehend: 50 / 50 */

.dashboard-two-column[b-yqutdeu8s3] {
    grid-template-columns: repeat(2, minmax(0,1fr));
    margin-bottom: 1.5rem;
}

/*
 * Offene Probleme / Reinigungsaktivität:
 * Links 40 %, rechts 60 %.
 */

.dashboard-bottom-grid[b-yqutdeu8s3] {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

    .dashboard-two-column .dashboard-panel[b-yqutdeu8s3],
    .dashboard-bottom-grid .dashboard-panel[b-yqutdeu8s3] {
        min-width: 0;
        margin-bottom: 0;
    }

/* Zeigt innerhalb der Karten keine abgeschnittenen Titel */

.dashboard-row-arrow[b-yqutdeu8s3] {
    color: #8492a6;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
    transition: color 0.15s, transform 0.15s;
}

/* =========================================================
   SCROLLBARE LISTEN
   ========================================================= */

/*
 * 5 Einträge sichtbar.
 *
 * Jede Zeile hat mindestens 70px Höhe.
 * Fünf Zeilen entsprechen 350px.
 *
 * Bei weiteren Einträgen erscheint
 * innerhalb der jeweiligen Liste ein Scrollbalken.
 *
 * Weder die äußere Karte noch das Dashboard
 * wachsen dadurch unbegrenzt.
 */

.dashboard-cleaning-list[b-yqutdeu8s3],
.dashboard-upcoming-list[b-yqutdeu8s3],
.dashboard-issue-list[b-yqutdeu8s3] {
    max-height: 350px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: #b4c5dc transparent;
}

    /* Scrollbalken für Chrome / Edge */

    .dashboard-cleaning-list[b-yqutdeu8s3]::-webkit-scrollbar,
    .dashboard-upcoming-list[b-yqutdeu8s3]::-webkit-scrollbar,
    .dashboard-issue-list[b-yqutdeu8s3]::-webkit-scrollbar {
        width: 7px;
    }


    .dashboard-cleaning-list[b-yqutdeu8s3]::-webkit-scrollbar-track,
    .dashboard-upcoming-list[b-yqutdeu8s3]::-webkit-scrollbar-track,
    .dashboard-issue-list[b-yqutdeu8s3]::-webkit-scrollbar-track {
        background: transparent;
    }


    .dashboard-cleaning-list[b-yqutdeu8s3]::-webkit-scrollbar-thumb,
    .dashboard-upcoming-list[b-yqutdeu8s3]::-webkit-scrollbar-thumb,
    .dashboard-issue-list[b-yqutdeu8s3]::-webkit-scrollbar-thumb {
        background: #b4c5dc;
        border-radius: 10px;
    }

        .dashboard-cleaning-list[b-yqutdeu8s3]::-webkit-scrollbar-thumb:hover,
        .dashboard-upcoming-list[b-yqutdeu8s3]::-webkit-scrollbar-thumb:hover,
        .dashboard-issue-list[b-yqutdeu8s3]::-webkit-scrollbar-thumb:hover {
            background: #819ab9;
        }

/* =========================================================
   REINIGUNGEN HEUTE
   ========================================================= */

.dashboard-cleaning-list[b-yqutdeu8s3] {
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 12px;
}

.dashboard-cleaning-row[b-yqutdeu8s3] {
    display: grid;
    grid-template-columns: minmax(0,1fr) 145px auto;
    align-items: center;
    gap: 0.8rem;
    height: 70px;
    min-height: 70px;
    padding: 0.8rem 0.95rem;
    color: inherit;
    border-bottom: 1px solid #e5eaf0;
    text-decoration: none;
    transition: background 0.15s;
}

    .dashboard-cleaning-row:last-child[b-yqutdeu8s3] {
        border-bottom: 0;
    }

    .dashboard-cleaning-row:hover[b-yqutdeu8s3] {
        color: inherit;
        text-decoration: none;
    }

        .dashboard-cleaning-row:hover .dashboard-row-arrow[b-yqutdeu8s3] {
            color: #0d6efd;
            transform: translateX(2px);
        }

.dashboard-cleaning-row-completed[b-yqutdeu8s3] {
    background: linear-gradient( 105deg, #ffffff 0%, #f5fbf7 30%, #e5f5ea 65%, #ccebd8 100% );
}

    .dashboard-cleaning-row-completed:hover[b-yqutdeu8s3] {
        background: linear-gradient( 105deg, #ffffff 0%, #edf9f1 30%, #bce4cc 100% );
    }

.dashboard-cleaning-row-running[b-yqutdeu8s3] {
    background: linear-gradient( 105deg, #ffffff 0%, #f4f8ff 30%, #e5efff 65%, #cfddfa 100% );
}

    .dashboard-cleaning-row-running:hover[b-yqutdeu8s3] {
        background: linear-gradient( 105deg, #ffffff 0%, #edf4ff 30%, #bfd4f7 100% );
    }

.dashboard-cleaning-row-neutral[b-yqutdeu8s3] {
    background: #ffffff;
}

/* =========================================================
   GEMEINSAME LISTENTEXTE
   ========================================================= */

.dashboard-cleaning-main[b-yqutdeu8s3],
.dashboard-upcoming-main[b-yqutdeu8s3],
.dashboard-overdue-main[b-yqutdeu8s3],
.dashboard-issue-main[b-yqutdeu8s3] {
    min-width: 0;
}

.dashboard-cleaning-area[b-yqutdeu8s3],
.dashboard-upcoming-area[b-yqutdeu8s3],
.dashboard-overdue-title[b-yqutdeu8s3],
.dashboard-issue-title[b-yqutdeu8s3] {
    overflow: hidden;
    color: #243044;
    font-size: 0.98rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-cleaning-location[b-yqutdeu8s3],
.dashboard-upcoming-location[b-yqutdeu8s3],
.dashboard-overdue-location[b-yqutdeu8s3],
.dashboard-issue-location[b-yqutdeu8s3] {
    overflow: hidden;
    margin-top: 0.18rem;
    color: #62748a;
    font-size: 0.87rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .dashboard-cleaning-location span[b-yqutdeu8s3],
    .dashboard-upcoming-location span[b-yqutdeu8s3],
    .dashboard-overdue-location span[b-yqutdeu8s3],
    .dashboard-issue-location span[b-yqutdeu8s3] {
        margin: 0 0.18rem;
    }

.dashboard-cleaning-info[b-yqutdeu8s3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.dashboard-cleaning-label[b-yqutdeu8s3] {
    margin-bottom: 0.2rem;
    font-size: 0.74rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.dashboard-cleaning-label-completed[b-yqutdeu8s3] {
    color: #198754;
}

.dashboard-cleaning-label-running[b-yqutdeu8s3] {
    color: #0d6efd;
}

.dashboard-cleaning-label-neutral[b-yqutdeu8s3] {
    color: #64748b;
}

.dashboard-cleaning-date[b-yqutdeu8s3] {
    color: #64748b;
    font-size: 0.82rem;
    white-space: nowrap;
}

/* =========================================================
   ÜBERFÄLLIGE EINMALREINIGUNGEN
   ========================================================= */

.dashboard-overdue-panel[b-yqutdeu8s3] {
    border-color: #eecbd0;
    background: linear-gradient( 120deg, #ffffff 0%, #ffffff 65%, #ffedef 100% );
}

.dashboard-overdue-count[b-yqutdeu8s3],
.dashboard-upcoming-count[b-yqutdeu8s3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 0.45rem;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 850;
}

.dashboard-overdue-count[b-yqutdeu8s3] {
    background: #dc3545;
}

.dashboard-upcoming-count[b-yqutdeu8s3] {
    background: #14b8a6;
}

.dashboard-overdue-list[b-yqutdeu8s3] {
    overflow: hidden;
    border: 1px solid #f1dadd;
    border-radius: 12px;
}

.dashboard-overdue-row[b-yqutdeu8s3] {
    display: grid;
    grid-template-columns: 110px minmax(180px,1fr) minmax(150px,210px) auto;
    align-items: center;
    gap: 1rem;
    min-height: 72px;
    padding: 0.8rem 0.95rem;
    color: inherit;
    background: linear-gradient( 105deg, #ffffff 0%, #fff5f5 40%, #f9dfe3 100% );
    border-bottom: 1px solid #f1dadd;
    text-decoration: none;
}

    .dashboard-overdue-row:last-child[b-yqutdeu8s3] {
        border-bottom: 0;
    }

    .dashboard-overdue-row:hover[b-yqutdeu8s3] {
        color: inherit;
        background: #ffeff1;
        text-decoration: none;
    }

/* =========================================================
   BEVORSTEHENDE EINMALREINIGUNGEN
   ========================================================= */

.dashboard-upcoming-list[b-yqutdeu8s3] {
    border: 1px solid #bde4de;
    border-radius: 12px;
}

.dashboard-upcoming-row[b-yqutdeu8s3] {
    display: grid;
    grid-template-columns: 85px minmax(0,1fr) 145px auto;
    align-items: center;
    gap: 0.8rem;
    height: 70px;
    min-height: 70px;
    padding: 0.8rem 0.95rem;
    color: inherit;
    background: linear-gradient( 105deg, #ffffff 0%, #f1fbf9 25%, #def5f1 60%, #bfece5 100% );
    border-bottom: 1px solid #d0ebe6;
    text-decoration: none;
    transition: background 0.15s;
}

    .dashboard-upcoming-row:last-child[b-yqutdeu8s3] {
        border-bottom: 0;
    }

    .dashboard-upcoming-row:hover[b-yqutdeu8s3] {
        color: inherit;
        background: linear-gradient( 105deg, #ffffff 0%, #e8f8f5 30%, #ade4db 100% );
        text-decoration: none;
    }

.dashboard-upcoming-date[b-yqutdeu8s3],
.dashboard-overdue-date[b-yqutdeu8s3] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.dashboard-upcoming-date-label[b-yqutdeu8s3] {
    color: #0f9488;
    font-size: 0.75rem;
    font-weight: 850;
    text-transform: uppercase;
}

.dashboard-upcoming-date-value[b-yqutdeu8s3] {
    color: #475569;
    font-size: 0.82rem;
    font-weight: 650;
}

.dashboard-overdue-date-label[b-yqutdeu8s3] {
    color: #dc3545;
    font-size: 0.75rem;
    font-weight: 850;
    text-transform: uppercase;
}

.dashboard-overdue-date-value[b-yqutdeu8s3] {
    color: #7f1d1d;
    font-size: 0.83rem;
    font-weight: 650;
}

.dashboard-upcoming-employee[b-yqutdeu8s3],
.dashboard-overdue-employee[b-yqutdeu8s3] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .dashboard-upcoming-employee span[b-yqutdeu8s3],
    .dashboard-overdue-employee span[b-yqutdeu8s3] {
        color: #75849a;
        font-size: 0.72rem;
        font-weight: 750;
        text-transform: uppercase;
    }

    .dashboard-upcoming-employee strong[b-yqutdeu8s3],
    .dashboard-overdue-employee strong[b-yqutdeu8s3] {
        overflow: hidden;
        margin-top: 0.15rem;
        color: #475569;
        font-size: 0.82rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* =========================================================
   OFFENE PROBLEME
   ========================================================= */

.dashboard-issue-list[b-yqutdeu8s3] {
    border: 1px solid #edcbd0;
    border-radius: 12px;
}

.dashboard-issue-row[b-yqutdeu8s3] {
    display: grid;
    grid-template-columns: minmax(0,1fr) 105px auto;
    align-items: center;
    gap: 0.65rem;
    height: 70px;
    min-height: 70px;
    padding: 0.8rem 0.8rem;
    color: inherit;
    background: linear-gradient( 105deg, #ffffff 0%, #fff4f5 25%, #fce7ea 60%, #f5cbd2 100% );
    border-bottom: 1px solid #f1dadd;
    text-decoration: none;
    transition: background 0.15s;
}

    .dashboard-issue-row:last-child[b-yqutdeu8s3] {
        border-bottom: 0;
    }

    .dashboard-issue-row:hover[b-yqutdeu8s3] {
        color: inherit;
        background: linear-gradient( 105deg, #ffffff 0%, #fff0f2 30%, #efb9c2 100% );
        text-decoration: none;
    }

    .dashboard-issue-row .dashboard-row-arrow[b-yqutdeu8s3] {
        color: #dc3545;
    }

.dashboard-issue-info[b-yqutdeu8s3] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dashboard-issue-state[b-yqutdeu8s3] {
    color: #dc3545;
    font-size: 0.75rem;
    font-weight: 850;
    text-transform: uppercase;
}

.dashboard-issue-date-value[b-yqutdeu8s3] {
    overflow: hidden;
    margin-top: 0.16rem;
    color: #64748b;
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   REINIGUNGSAKTIVITÄT
   ========================================================= */

.dashboard-activity-panel[b-yqutdeu8s3] {
    min-width: 0;
}

.dashboard-activity-totals[b-yqutdeu8s3] {
    display: flex;
    gap: 1.25rem;
}

    .dashboard-activity-totals > div[b-yqutdeu8s3] {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .dashboard-activity-totals strong[b-yqutdeu8s3] {
        font-size: 1.25rem;
        line-height: 1;
    }

    .dashboard-activity-totals span[b-yqutdeu8s3] {
        margin-top: 0.25rem;
        color: #718096;
        font-size: 0.74rem;
    }

.dashboard-activity-total-success[b-yqutdeu8s3] {
    color: #198754;
}

.dashboard-activity-total-danger[b-yqutdeu8s3] {
    color: #dc3545;
}

.dashboard-chart-legend[b-yqutdeu8s3] {
    display: flex;
    gap: 1.2rem;
    margin-bottom: 0.7rem;
    color: #64748b;
    font-size: 0.82rem;
}

    .dashboard-chart-legend span[b-yqutdeu8s3] {
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    .dashboard-chart-legend i[b-yqutdeu8s3] {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 3px;
    }

.dashboard-legend-cleaning[b-yqutdeu8s3] {
    background: #198754;
}

.dashboard-legend-issue[b-yqutdeu8s3] {
    background: #dc3545;
}


.dashboard-activity-chart[b-yqutdeu8s3] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.7rem;
    /* Diagramm vertikal vergrößern */
    height: 350px;
    padding: 1rem 0.8rem 0.5rem;
    background: linear-gradient( 180deg, #fbfcfd 0%, #f3f7fa 100% );
    border: 1px solid #dce5ef;
    border-radius: 12px;
}


.dashboard-activity-column[b-yqutdeu8s3] {
    display: grid;
    grid-template-rows: 22px minmax(0,1fr) auto auto;
    gap: 0.25rem;
    min-width: 0;
    height: 100%;
    padding: 0.2rem;
    border-radius: 8px;
    text-align: center;
}

.dashboard-activity-column-today[b-yqutdeu8s3] {
    background: rgba(13,110,253,0.07);
}

.dashboard-activity-values[b-yqutdeu8s3] {
    display: flex;
    justify-content: center;
    gap: 0.55rem;
    font-size: 0.75rem;
    font-weight: 800;
}

.dashboard-activity-cleaning-value[b-yqutdeu8s3] {
    color: #198754;
}

.dashboard-activity-issue-value[b-yqutdeu8s3] {
    color: #dc3545;
}

.dashboard-activity-bar-area[b-yqutdeu8s3] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 0;
    border-bottom: 1px solid #dbe4ea;
}

.dashboard-activity-bars[b-yqutdeu8s3] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    width: 100%;
    height: 100%;
}

.dashboard-activity-cleaning-bar[b-yqutdeu8s3],
.dashboard-activity-issue-bar[b-yqutdeu8s3] {
    width: 17px;
    max-width: 35%;
    border-radius: 5px 5px 2px 2px;
    transition: height 0.25s ease;
}

.dashboard-activity-cleaning-bar[b-yqutdeu8s3] {
    background: linear-gradient(180deg, #4ac783, #198754);
}

.dashboard-activity-issue-bar[b-yqutdeu8s3] {
    background: linear-gradient(180deg, #ef6b76, #dc3545);
}

.dashboard-activity-day[b-yqutdeu8s3] {
    color: #334155;
    font-size: 0.83rem;
    font-weight: 750;
}

.dashboard-activity-column-today .dashboard-activity-day[b-yqutdeu8s3] {
    color: #0d6efd;
}

.dashboard-activity-date[b-yqutdeu8s3] {
    color: #718096;
    font-size: 0.74rem;
}

/* =========================================================
   LEERZUSTÄNDE
   ========================================================= */

.dashboard-empty-state[b-yqutdeu8s3] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 100px;
    padding: 1rem;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #dce5ef;
    border-radius: 12px;
}

.dashboard-empty-icon[b-yqutdeu8s3] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    color: #0d6efd;
    background: #e7f0ff;
    border-radius: 11px;
    font-weight: 850;
}

.dashboard-empty-icon-success[b-yqutdeu8s3] {
    color: #ffffff;
    background: #198754;
}

.dashboard-empty-state strong[b-yqutdeu8s3] {
    display: block;
    color: #334155;
    font-size: 0.94rem;
}

.dashboard-empty-state span[b-yqutdeu8s3] {
    display: block;
    margin-top: 0.18rem;
    color: #64748b;
    font-size: 0.85rem;
    line-height: 1.45;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

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

    .dashboard-bottom-grid[b-yqutdeu8s3] {
        grid-template-columns: 1fr;
    }

    .dashboard-issue-row[b-yqutdeu8s3] {
        grid-template-columns: minmax(0,1fr) 140px auto;
    }
}

/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 767.98px) {

    .dashboard-page[b-yqutdeu8s3] {
        padding-bottom: 1rem;
    }

    .dashboard-header[b-yqutdeu8s3] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.9rem;
        margin-bottom: 1.2rem;
    }

        .dashboard-header h1[b-yqutdeu8s3] {
            font-size: 2rem;
        }

    .dashboard-date[b-yqutdeu8s3] {
        min-width: 0;
        text-align: left;
    }

    .dashboard-onboarding[b-yqutdeu8s3] {
        padding: 1rem;
    }

    .dashboard-onboarding-top[b-yqutdeu8s3] {
        gap: 1rem;
    }

    .dashboard-onboarding-progress-number strong[b-yqutdeu8s3] {
        font-size: 1.3rem;
    }

    .dashboard-onboarding-step[b-yqutdeu8s3] {
        grid-template-columns: 36px minmax(0,1fr);
        grid-template-areas:
            "number content"
            "number action";
        gap: 0.35rem 0.75rem;
        padding: 0.85rem;
    }

    .dashboard-onboarding-number[b-yqutdeu8s3] {
        grid-area: number;
        align-self: start;
    }

    .dashboard-onboarding-step-content[b-yqutdeu8s3] {
        grid-area: content;
    }

    .dashboard-onboarding-done[b-yqutdeu8s3],
    .dashboard-onboarding-button[b-yqutdeu8s3] {
        grid-area: action;
        justify-self: start;
        margin-top: 0.25rem;
    }

    .dashboard-stats[b-yqutdeu8s3] {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 0.75rem;
    }

    .dashboard-stat-card[b-yqutdeu8s3] {
        min-height: 145px;
        padding: 0.95rem;
    }

    .dashboard-stat-value[b-yqutdeu8s3] {
        font-size: 2rem;
    }

    .dashboard-stat-label[b-yqutdeu8s3] {
        font-size: 0.9rem;
    }

    .dashboard-stat-footer[b-yqutdeu8s3] {
        font-size: 0.78rem;
    }

    .dashboard-panel[b-yqutdeu8s3],
    .dashboard-day-panel[b-yqutdeu8s3] {
        padding: 1rem;
    }

    .dashboard-day-header[b-yqutdeu8s3] {
        gap: 1rem;
    }

    .dashboard-day-percentage strong[b-yqutdeu8s3] {
        font-size: 1.45rem;
    }

    .dashboard-day-open[b-yqutdeu8s3] {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .dashboard-two-column[b-yqutdeu8s3],
    .dashboard-bottom-grid[b-yqutdeu8s3] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .dashboard-two-column[b-yqutdeu8s3] {
        margin-bottom: 1rem;
    }

    .dashboard-section-header[b-yqutdeu8s3] {
        gap: 0.8rem;
    }

        .dashboard-section-header h2[b-yqutdeu8s3] {
            font-size: 1.12rem;
        }

    .dashboard-overdue-row[b-yqutdeu8s3] {
        grid-template-columns: 85px minmax(0,1fr) auto;
        grid-template-areas:
            "date main arrow"
            "date employee arrow";
        gap: 0.3rem 0.7rem;
        padding: 0.8rem;
    }

    .dashboard-overdue-date[b-yqutdeu8s3] {
        grid-area: date;
    }

    .dashboard-overdue-main[b-yqutdeu8s3] {
        grid-area: main;
    }

    .dashboard-overdue-employee[b-yqutdeu8s3] {
        grid-area: employee;
    }

    .dashboard-overdue-row .dashboard-row-arrow[b-yqutdeu8s3] {
        grid-area: arrow;
    }

    .dashboard-cleaning-row[b-yqutdeu8s3] {
        grid-template-columns: minmax(0,1fr) auto;
        grid-template-areas:
            "main arrow"
            "info arrow";
        gap: 0.3rem 0.65rem;
        height: 82px;
        min-height: 82px;
        padding: 0.8rem;
    }

    .dashboard-cleaning-main[b-yqutdeu8s3] {
        grid-area: main;
    }

    .dashboard-cleaning-info[b-yqutdeu8s3] {
        grid-area: info;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .dashboard-cleaning-row .dashboard-row-arrow[b-yqutdeu8s3] {
        grid-area: arrow;
    }

    .dashboard-cleaning-location[b-yqutdeu8s3] {
        white-space: normal;
    }

    .dashboard-upcoming-row[b-yqutdeu8s3] {
        grid-template-columns: 82px minmax(0,1fr) auto;
        grid-template-areas:
            "date main arrow"
            "date employee arrow";
        gap: 0.3rem 0.65rem;
        height: 82px;
        min-height: 82px;
        padding: 0.8rem;
    }

    .dashboard-upcoming-date[b-yqutdeu8s3] {
        grid-area: date;
    }

    .dashboard-upcoming-main[b-yqutdeu8s3] {
        grid-area: main;
    }

    .dashboard-upcoming-employee[b-yqutdeu8s3] {
        grid-area: employee;
    }

    .dashboard-upcoming-row .dashboard-row-arrow[b-yqutdeu8s3] {
        grid-area: arrow;
    }

    .dashboard-issue-row[b-yqutdeu8s3] {
        grid-template-columns: minmax(0,1fr) auto;
        grid-template-areas:
            "main arrow"
            "info arrow";
        gap: 0.3rem 0.65rem;
        height: 82px;
        min-height: 82px;
        padding: 0.8rem;
    }

    .dashboard-issue-main[b-yqutdeu8s3] {
        grid-area: main;
    }

    .dashboard-issue-info[b-yqutdeu8s3] {
        grid-area: info;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .dashboard-issue-row .dashboard-row-arrow[b-yqutdeu8s3] {
        grid-area: arrow;
    }

    .dashboard-issue-date-value[b-yqutdeu8s3] {
        margin-top: 0;
    }

    .dashboard-cleaning-list[b-yqutdeu8s3],
    .dashboard-upcoming-list[b-yqutdeu8s3],
    .dashboard-issue-list[b-yqutdeu8s3] {
        max-height: 410px;
    }

    .dashboard-activity-chart[b-yqutdeu8s3] {
        gap: 0.3rem;
        height: 210px;
        padding: 0.75rem 0.4rem 0.4rem;
    }

    .dashboard-activity-totals[b-yqutdeu8s3] {
        gap: 0.75rem;
    }

    .dashboard-activity-values[b-yqutdeu8s3] {
        gap: 0.3rem;
        font-size: 0.7rem;
    }

    .dashboard-activity-bars[b-yqutdeu8s3] {
        gap: 3px;
    }

    .dashboard-activity-cleaning-bar[b-yqutdeu8s3],
    .dashboard-activity-issue-bar[b-yqutdeu8s3] {
        width: 12px;
    }

    .dashboard-activity-day[b-yqutdeu8s3] {
        font-size: 0.75rem;
    }

    .dashboard-activity-date[b-yqutdeu8s3] {
        font-size: 0.66rem;
    }
}

/* =========================================================
   SEHR KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 390px) {

    .dashboard-section-header[b-yqutdeu8s3] {
        flex-wrap: wrap;
    }

    .dashboard-section-button[b-yqutdeu8s3] {
        min-height: 38px;
        font-size: 0.79rem;
    }

    .dashboard-activity-chart[b-yqutdeu8s3] {
        gap: 0.15rem;
    }

    .dashboard-activity-bars[b-yqutdeu8s3] {
        gap: 2px;
    }

    .dashboard-activity-cleaning-bar[b-yqutdeu8s3],
    .dashboard-activity-issue-bar[b-yqutdeu8s3] {
        width: 9px;
    }
}

/* =========================================================
   TESTPHASE – PREMIUM-STATUSKARTE
   ========================================================= */

.dashboard-trial-card[b-yqutdeu8s3] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 172px;
    align-items: center;
    gap: 2rem;
    isolation: isolate;
    overflow: hidden;
    margin-bottom: 1.5rem;
    padding: 1.75rem 2rem;
    color: #ffffff;
    background: linear-gradient(115deg, #101c38 0%, #172d59 58%, #1758a9 100%);
    border: 1px solid #264d86;
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(17, 40, 80, 0.14);
}

    .dashboard-trial-card[b-yqutdeu8s3]::before {
        position: absolute;
        z-index: -1;
        top: -145px;
        right: 50px;
        width: 370px;
        height: 370px;
        content: "";
        background: radial-gradient(circle, rgba(88, 166, 255, 0.24), transparent 68%);
        pointer-events: none;
    }

.dashboard-trial-copy[b-yqutdeu8s3] {
    min-width: 0;
}

.dashboard-trial-eyebrow[b-yqutdeu8s3] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.8rem;
    color: #b9dcff;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.dashboard-trial-status-dot[b-yqutdeu8s3] {
    width: 8px;
    height: 8px;
    background: #6fe0c3;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(111, 224, 195, 0.13);
}

.dashboard-trial-copy h2[b-yqutdeu8s3] {
    margin: 0 0 0.65rem;
    color: #ffffff;
    font-size: clamp(1.35rem, 2.1vw, 1.75rem);
    font-weight: 800;
    line-height: 1.2;
}

.dashboard-trial-copy p[b-yqutdeu8s3] {
    max-width: 660px;
    margin: 0;
    color: #d1e0f5;
    font-size: 0.94rem;
    line-height: 1.6;
}

.dashboard-trial-enddate[b-yqutdeu8s3] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-top: 1.15rem;
    color: #c8ddf7;
    font-size: 0.86rem;
}

    .dashboard-trial-enddate > span:first-child[b-yqutdeu8s3] {
        color: #86c9ff;
        font-size: 1.25rem;
        line-height: 1;
    }

    .dashboard-trial-enddate strong[b-yqutdeu8s3] {
        color: #ffffff;
    }

.dashboard-trial-counter[b-yqutdeu8s3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 152px;
    padding: 1.1rem 0.75rem;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(205,231,255,0.25);
    border-radius: 15px;
    text-align: center;
}

.dashboard-trial-counter-number[b-yqutdeu8s3] {
    color: #ffffff;
    font-size: clamp(2.75rem, 4vw, 3.75rem);
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.055em;
    font-variant-numeric: tabular-nums;
}

.dashboard-trial-counter-symbol[b-yqutdeu8s3] {
    color: #ffffff;
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
}

.dashboard-trial-counter-title[b-yqutdeu8s3] {
    margin-top: 0.4rem;
    color: #ffffff;
    font-size: 0.96rem;
    font-weight: 800;
}

.dashboard-trial-counter-caption[b-yqutdeu8s3] {
    margin-top: 0.25rem;
    color: #c7d9f0;
    font-size: 0.76rem;
}

.dashboard-trial-card-expired[b-yqutdeu8s3] {
    background: linear-gradient(115deg, #253247 0%, #33435b 100%);
    border-color: #536176;
}

    .dashboard-trial-card-expired .dashboard-trial-status-dot[b-yqutdeu8s3] {
        background: #d3dae5;
        box-shadow: 0 0 0 4px rgba(211, 218, 229, 0.13);
    }

@media (max-width: 767.98px) {
    .dashboard-trial-card[b-yqutdeu8s3] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.2rem;
        padding: 1.35rem;
    }

    .dashboard-trial-counter[b-yqutdeu8s3] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.35rem 0.6rem;
        justify-content: flex-start;
        min-height: 0;
        padding: 0.8rem 1rem;
        text-align: left;
    }

    .dashboard-trial-counter-number[b-yqutdeu8s3] {
        font-size: 2.25rem;
    }

    .dashboard-trial-counter-caption[b-yqutdeu8s3] {
        width: 100%;
        margin-top: 0;
    }
}

/* Testphasen-Karte: dezenter Schließen-Button in der rechten oberen Ecke. */
.dashboard-trial-dismiss[b-yqutdeu8s3] {
    position: absolute;
    z-index: 2;
    top: 0.6rem;
    right: 0.7rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: #ffffff;
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
}

    .dashboard-trial-dismiss:hover[b-yqutdeu8s3],
    .dashboard-trial-dismiss:focus-visible[b-yqutdeu8s3] {
        background: rgba(255, 255, 255, 0.16);
    }

    .dashboard-trial-dismiss:focus-visible[b-yqutdeu8s3] {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
    }
/* /Components/Pages/Admin/Employees/EmployeeCreate.razor.rz.scp.css */

/* =========================================================
   CleanDation – Neuen Mitarbeiter anlegen
   ========================================================= */

.employee-create-page[b-5nju7h2y6i] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

.employee-create-header[b-5nju7h2y6i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.6rem;
}

    .employee-create-header h1[b-5nju7h2y6i] {
        margin: 0;
        color: #172033;
        font-size: clamp(2rem, 3vw, 2.6rem);
        font-weight: 750;
        line-height: 1.15;
    }

    .employee-create-header p[b-5nju7h2y6i] {
        margin: 0.5rem 0 0;
        color: #64748b;
        font-size: 1rem;
        line-height: 1.5;
    }

.employee-create-back[b-5nju7h2y6i] {
    flex-shrink: 0;
    color: #0d6efd;
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
}

    .employee-create-back:hover[b-5nju7h2y6i] {
        text-decoration: underline;
    }

/* Zweispaltiges Layout */

.employee-create-workspace[b-5nju7h2y6i] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: start;
    gap: 1.5rem;
}

.employee-create-section[b-5nju7h2y6i] {
    min-width: 0;
    padding: 1.4rem;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.05);
}

/* Persönliche Daten – Blau */

.employee-create-details[b-5nju7h2y6i] {
    background: linear-gradient( 115deg, #ffffff 0%, #f3f7ff 35%, #e3edff 70%, #d3e2ff 100% );
    border-color: #ccdcf6;
}

/* Zugangsdaten – Grün */

.employee-create-access[b-5nju7h2y6i] {
    background: linear-gradient( 115deg, #ffffff 0%, #f2faf5 30%, #e1f2e7 65%, #c9e9d6 100% );
    border-color: #cce7d6;
}

.employee-create-section-header[b-5nju7h2y6i] {
    margin-bottom: 1.4rem;
}

.employee-create-eyebrow[b-5nju7h2y6i] {
    margin-bottom: 0.35rem;
    color: #0d6efd;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.employee-create-eyebrow-green[b-5nju7h2y6i] {
    color: #198754;
}

.employee-create-section-header h2[b-5nju7h2y6i] {
    margin: 0;
    color: #172033;
    font-size: 1.3rem;
    font-weight: 750;
}

.employee-create-section-header p[b-5nju7h2y6i] {
    margin: 0.4rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.55;
}

/* Formulare */

.employee-create-fields[b-5nju7h2y6i] {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.employee-create-name-grid[b-5nju7h2y6i] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.employee-create-field[b-5nju7h2y6i] {
    min-width: 0;
}

    .employee-create-field label[b-5nju7h2y6i] {
        display: block;
        margin-bottom: 0.5rem;
        color: #334155;
        font-size: 0.9rem;
        font-weight: 750;
    }

.employee-create-optional[b-5nju7h2y6i] {
    color: #718096;
    font-weight: 500;
}

.employee-create-field .form-control[b-5nju7h2y6i] {
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 0.85rem;
    color: #172033;
    background: #ffffff;
    border: 1px solid #cdd8e6;
    border-radius: 10px;
    font-size: 0.95rem;
}

    .employee-create-field .form-control:focus[b-5nju7h2y6i] {
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
    }

.employee-create-help[b-5nju7h2y6i] {
    margin-top: 0.45rem;
    color: #64748b;
    font-size: 0.83rem;
    line-height: 1.5;
}

.employee-create-validation-summary[b-5nju7h2y6i] {
    margin-bottom: 1rem;
    color: #b42335;
    font-size: 0.9rem;
}

.employee-create-validation[b-5nju7h2y6i] {
    display: block;
    margin-top: 0.4rem;
    color: #b42335;
    font-size: 0.83rem;
}

/* Passwort */

.employee-create-password-row[b-5nju7h2y6i] {
    display: flex;
    gap: 0;
}

    .employee-create-password-row .form-control[b-5nju7h2y6i] {
        min-width: 0;
        border-radius: 10px 0 0 10px;
    }

    .employee-create-password-row .employee-create-button[b-5nju7h2y6i] {
        flex-shrink: 0;
        border-radius: 0 10px 10px 0;
    }

.employee-create-password-info[b-5nju7h2y6i] {
    margin-top: 1.25rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #cce7d6;
    border-radius: 11px;
}

    .employee-create-password-info strong[b-5nju7h2y6i] {
        color: #198754;
        font-size: 0.92rem;
        font-weight: 800;
    }

    .employee-create-password-info p[b-5nju7h2y6i] {
        margin: 0.35rem 0 0;
        color: #53657d;
        font-size: 0.86rem;
        line-height: 1.55;
    }

/* Buttons */

.employee-create-button[b-5nju7h2y6i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 46px;
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .employee-create-button:disabled[b-5nju7h2y6i] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.employee-create-button-primary[b-5nju7h2y6i] {
    color: #ffffff;
    background: #0d6efd;
    border-color: #0d6efd;
}

    .employee-create-button-primary:hover:not(:disabled)[b-5nju7h2y6i] {
        color: #ffffff;
        background: #0957c3;
    }

    .employee-create-button-primary span[b-5nju7h2y6i] {
        font-size: 1.1rem;
    }

.employee-create-button-secondary[b-5nju7h2y6i] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .employee-create-button-secondary:hover[b-5nju7h2y6i] {
        color: #ffffff;
        background: #475569;
    }

.employee-create-button-outline[b-5nju7h2y6i] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .employee-create-button-outline:hover:not(:disabled)[b-5nju7h2y6i] {
        color: #0d6efd;
        border-color: #0d6efd;
    }

.employee-create-button-generate[b-5nju7h2y6i] {
    margin-top: 0.9rem;
    color: #198754;
    background: #ffffff;
    border-color: #198754;
}

    .employee-create-button-generate:hover:not(:disabled)[b-5nju7h2y6i] {
        color: #ffffff;
        background: #198754;
    }

.employee-create-form-actions[b-5nju7h2y6i] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* =========================================================
   Zugangsdaten-Dialog
   ========================================================= */

.employee-credentials-backdrop[b-5nju7h2y6i] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(3px);
}

.employee-credentials-dialog[b-5nju7h2y6i] {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.75rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
}

.employee-credentials-icon[b-5nju7h2y6i] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 1rem;
    color: #ffffff;
    background: #198754;
    border-radius: 50%;
    font-size: 1.4rem;
    font-weight: 800;
}

.employee-credentials-eyebrow[b-5nju7h2y6i] {
    margin-bottom: 0.35rem;
    color: #198754;
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.employee-credentials-dialog h2[b-5nju7h2y6i] {
    margin: 0;
    color: #172033;
    font-size: 1.45rem;
    font-weight: 800;
}

.employee-credentials-intro[b-5nju7h2y6i] {
    margin: 0.7rem 0 0;
    color: #64748b;
    font-size: 0.94rem;
    line-height: 1.55;
}

.employee-credentials-summary[b-5nju7h2y6i] {
    display: grid;
    gap: 0.9rem;
    margin-top: 1.25rem;
    padding: 1.1rem;
    background: linear-gradient( 115deg, #ffffff 0%, #f2faf5 45%, #e1f2e7 100% );
    border: 1px solid #cce7d6;
    border-radius: 11px;
}

    .employee-credentials-summary > div[b-5nju7h2y6i] {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        min-width: 0;
    }

.employee-credentials-label[b-5nju7h2y6i] {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.employee-credentials-summary strong[b-5nju7h2y6i] {
    color: #172033;
    font-size: 0.96rem;
    overflow-wrap: anywhere;
}

.employee-credentials-warning[b-5nju7h2y6i] {
    margin-top: 1.25rem;
    padding: 1rem;
    background: #fff7e8;
    border: 1px solid #ecd3a0;
    border-radius: 10px;
}

    .employee-credentials-warning strong[b-5nju7h2y6i] {
        color: #986100;
        font-size: 0.91rem;
        font-weight: 800;
    }

    .employee-credentials-warning p[b-5nju7h2y6i] {
        margin: 0.4rem 0 0;
        color: #765b35;
        font-size: 0.88rem;
        line-height: 1.55;
    }

.employee-credentials-actions[b-5nju7h2y6i] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Tablet */

@media (max-width: 1100px) {
    .employee-create-workspace[b-5nju7h2y6i] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Smartphone */

@media (max-width: 767.98px) {
    .employee-create-page[b-5nju7h2y6i] {
        padding-bottom: 1rem;
    }

    .employee-create-header[b-5nju7h2y6i] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.9rem;
    }

        .employee-create-header h1[b-5nju7h2y6i] {
            font-size: 2rem;
        }

    .employee-create-section[b-5nju7h2y6i] {
        padding: 1rem;
        border-radius: 14px;
    }

    .employee-create-section-header h2[b-5nju7h2y6i] {
        font-size: 1.18rem;
    }

    .employee-create-name-grid[b-5nju7h2y6i] {
        grid-template-columns: 1fr;
    }

    .employee-create-form-actions[b-5nju7h2y6i],
    .employee-credentials-actions[b-5nju7h2y6i] {
        flex-direction: column;
        align-items: stretch;
    }

        .employee-create-form-actions .employee-create-button[b-5nju7h2y6i],
        .employee-credentials-actions .employee-create-button[b-5nju7h2y6i] {
            width: 100%;
            min-height: 48px;
        }

    .employee-credentials-dialog[b-5nju7h2y6i] {
        padding: 1.25rem;
    }
}

@media (max-width: 430px) {
    .employee-create-password-row .employee-create-button[b-5nju7h2y6i] {
        padding: 0.6rem 0.7rem;
        font-size: 0.82rem;
    }

    .employee-create-button-generate[b-5nju7h2y6i] {
        width: 100%;
    }
}
/* /Components/Pages/Admin/Employees/EmployeeEdit.razor.rz.scp.css */

/* =========================================================
   CleanDation – Mitarbeiter bearbeiten
   ========================================================= */

.employee-edit-page[b-vok88pbs4w] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* Seitenkopf */

.employee-edit-header[b-vok88pbs4w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.6rem;
}

    .employee-edit-header h1[b-vok88pbs4w] {
        margin: 0;
        color: #172033;
        font-size: clamp(2rem, 3vw, 2.6rem);
        font-weight: 750;
        line-height: 1.15;
    }

    .employee-edit-header p[b-vok88pbs4w] {
        margin: 0.5rem 0 0;
        color: #64748b;
        font-size: 1rem;
        line-height: 1.5;
    }

.employee-edit-loading[b-vok88pbs4w] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

/* Status oben */

.employee-edit-status[b-vok88pbs4w] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    min-height: 32px;
    padding: 0.4rem 0.85rem;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
}

.employee-edit-status-active[b-vok88pbs4w] {
    background: #198754;
}

.employee-edit-status-inactive[b-vok88pbs4w] {
    background: #64748b;
}

/* Zweispaltiges Layout */

.employee-edit-workspace[b-vok88pbs4w] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: start;
    gap: 1.5rem;
}

.employee-edit-section[b-vok88pbs4w] {
    min-width: 0;
    padding: 1.4rem;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.05);
}

/* Mitarbeiterdaten: Blau */

.employee-edit-details[b-vok88pbs4w] {
    background: linear-gradient( 115deg, #ffffff 0%, #f3f7ff 35%, #e3edff 70%, #d3e2ff 100% );
    border-color: #ccdcf6;
}

/* Statuskarte: Grün */

.employee-edit-status-active-section[b-vok88pbs4w] {
    background: linear-gradient( 115deg, #ffffff 0%, #f2faf5 30%, #e1f2e7 65%, #c9e9d6 100% );
    border-color: #cce7d6;
}

/* Statuskarte: Grau */

.employee-edit-status-inactive-section[b-vok88pbs4w] {
    background: linear-gradient( 115deg, #ffffff 0%, #f5f6f8 30%, #eaeef2 65%, #dbe2e9 100% );
    border-color: #dce3ea;
}

/* Abschnittsüberschriften */

.employee-edit-section-header[b-vok88pbs4w] {
    margin-bottom: 1.4rem;
}

.employee-edit-eyebrow[b-vok88pbs4w] {
    margin-bottom: 0.35rem;
    color: #0d6efd;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.employee-edit-eyebrow-status[b-vok88pbs4w] {
    color: #198754;
}

.employee-edit-status-inactive-section .employee-edit-eyebrow-status[b-vok88pbs4w] {
    color: #64748b;
}

.employee-edit-section-header h2[b-vok88pbs4w] {
    margin: 0;
    color: #172033;
    font-size: 1.3rem;
    font-weight: 750;
}

.employee-edit-section-header p[b-vok88pbs4w] {
    margin: 0.4rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.55;
}

/* Formular */

.employee-edit-form[b-vok88pbs4w] {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.employee-edit-name-grid[b-vok88pbs4w] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.employee-edit-field[b-vok88pbs4w] {
    min-width: 0;
}

    .employee-edit-field label[b-vok88pbs4w] {
        display: block;
        margin-bottom: 0.5rem;
        color: #334155;
        font-size: 0.9rem;
        font-weight: 750;
    }

.employee-edit-optional[b-vok88pbs4w] {
    color: #718096;
    font-weight: 500;
}

.employee-edit-field .form-control[b-vok88pbs4w] {
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 0.85rem;
    color: #172033;
    background: #ffffff;
    border: 1px solid #cdd8e6;
    border-radius: 10px;
    font-size: 0.95rem;
}

    .employee-edit-field .form-control:focus[b-vok88pbs4w] {
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
    }

.employee-edit-field-help[b-vok88pbs4w] {
    margin-top: 0.45rem;
    color: #64748b;
    font-size: 0.83rem;
    line-height: 1.5;
}

/* Validierung */

.employee-edit-validation-summary[b-vok88pbs4w] {
    margin-bottom: 1rem;
    color: #b42335;
    font-size: 0.9rem;
}

.employee-edit-validation[b-vok88pbs4w] {
    display: block;
    margin-top: 0.4rem;
    color: #b42335;
    font-size: 0.83rem;
}

/* Buttons */

.employee-edit-form-actions[b-vok88pbs4w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.4rem;
}

.employee-edit-button[b-vok88pbs4w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 46px;
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .employee-edit-button span[b-vok88pbs4w] {
        font-size: 1.1rem;
        font-weight: 800;
    }

    .employee-edit-button:disabled[b-vok88pbs4w] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.employee-edit-button-primary[b-vok88pbs4w] {
    color: #ffffff;
    background: #0d6efd;
    border-color: #0d6efd;
}

    .employee-edit-button-primary:hover:not(:disabled)[b-vok88pbs4w] {
        color: #ffffff;
        background: #0957c3;
    }

.employee-edit-button-secondary[b-vok88pbs4w] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .employee-edit-button-secondary:hover[b-vok88pbs4w] {
        color: #ffffff;
        background: #475569;
        text-decoration: none;
    }

.employee-edit-button-danger[b-vok88pbs4w] {
    color: #ffffff;
    background: #dc3545;
    border-color: #dc3545;
}

    .employee-edit-button-danger:hover:not(:disabled)[b-vok88pbs4w] {
        color: #ffffff;
        background: #b92838;
    }

.employee-edit-button-success[b-vok88pbs4w] {
    color: #ffffff;
    background: #198754;
    border-color: #198754;
}

    .employee-edit-button-success:hover:not(:disabled)[b-vok88pbs4w] {
        color: #ffffff;
        background: #136c43;
    }

/* Mitarbeiterstatus */

.employee-edit-status-info[b-vok88pbs4w] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(203, 213, 225, 0.85);
    border-radius: 11px;
}

.employee-edit-status-info-label[b-vok88pbs4w] {
    color: #6d7e95;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.045em;
}

.employee-edit-status-info strong[b-vok88pbs4w] {
    color: #172033;
    font-size: 1.05rem;
    font-weight: 800;
}

.employee-edit-status-description[b-vok88pbs4w] {
    margin: 1.3rem 0 1rem;
}

    .employee-edit-status-description strong[b-vok88pbs4w] {
        display: block;
        color: #172033;
        font-size: 1rem;
        font-weight: 800;
    }

    .employee-edit-status-description p[b-vok88pbs4w] {
        margin: 0.4rem 0 0;
        color: #53657d;
        font-size: 0.9rem;
        line-height: 1.6;
    }

/* Mitarbeiter nicht gefunden */

.employee-edit-not-found[b-vok88pbs4w] {
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
}

    .employee-edit-not-found h2[b-vok88pbs4w] {
        margin: 0;
        color: #172033;
        font-size: 1.2rem;
    }

    .employee-edit-not-found p[b-vok88pbs4w] {
        margin: 0.5rem 0 1rem;
        color: #64748b;
        font-size: 0.9rem;
    }

/* Tablet */

@media (max-width: 1100px) {
    .employee-edit-workspace[b-vok88pbs4w] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Smartphone */

@media (max-width: 767.98px) {
    .employee-edit-page[b-vok88pbs4w] {
        padding-bottom: 1rem;
    }

    .employee-edit-header[b-vok88pbs4w] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.9rem;
    }

        .employee-edit-header h1[b-vok88pbs4w] {
            font-size: 2rem;
        }

    .employee-edit-section[b-vok88pbs4w] {
        padding: 1rem;
        border-radius: 14px;
    }

    .employee-edit-section-header h2[b-vok88pbs4w] {
        font-size: 1.18rem;
    }

    .employee-edit-name-grid[b-vok88pbs4w] {
        grid-template-columns: 1fr;
    }

    .employee-edit-form-actions[b-vok88pbs4w] {
        flex-direction: column;
        align-items: stretch;
    }

    .employee-edit-button[b-vok88pbs4w] {
        width: 100%;
        min-height: 48px;
    }
}
/* /Components/Pages/Admin/Employees/Employees.razor.rz.scp.css */

/* =========================================================
   CleanDation – Mitarbeiter
   ========================================================= */

.employees-page[b-8a9b91owia] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* =========================================================
   Seitenüberschrift
   ========================================================= */

.employees-header[b-8a9b91owia] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.6rem;
}

.employees-header-content[b-8a9b91owia] {
    min-width: 0;
}

.employees-header h1[b-8a9b91owia] {
    margin: 0;
    color: #172033;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 750;
    line-height: 1.15;
}

.employees-header p[b-8a9b91owia] {
    margin: 0.5rem 0 0;
    color: #64748b;
    font-size: 1rem;
    line-height: 1.5;
}

.employees-create-button[b-8a9b91owia] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-shrink: 0;
    min-height: 46px;
    padding: 0.75rem 1.05rem;
    color: #ffffff;
    background: #0d6efd;
    border: 1px solid #0d6efd;
    border-radius: 10px;
    font-size: 0.91rem;
    font-weight: 750;
    text-decoration: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

    .employees-create-button:hover[b-8a9b91owia] {
        color: #ffffff;
        background: #0957c3;
        box-shadow: 0 5px 16px rgba(13, 110, 253, 0.18);
        text-decoration: none;
    }

    .employees-create-button span[b-8a9b91owia] {
        font-size: 1.1rem;
        font-weight: 800;
    }

/* =========================================================
   Filterbereich
   ========================================================= */

.employees-filter-panel[b-8a9b91owia] {
    margin-bottom: 1.5rem;
    padding: 1.35rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.045);
}

.employees-eyebrow[b-8a9b91owia] {
    margin-bottom: 0.35rem;
    color: #0d6efd;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.employees-filter-heading h2[b-8a9b91owia] {
    margin: 0;
    color: #172033;
    font-size: 1.2rem;
    font-weight: 750;
}

.employees-filter-heading p[b-8a9b91owia] {
    margin: 0.35rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
}

.employees-filter-content[b-8a9b91owia] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.employee-search[b-8a9b91owia] {
    width: 100%;
    max-width: 430px;
    min-width: 240px;
}

    .employee-search label[b-8a9b91owia] {
        display: block;
        margin-bottom: 0.45rem;
        color: #334155;
        font-size: 0.86rem;
        font-weight: 750;
    }

    .employee-search .form-control[b-8a9b91owia] {
        width: 100%;
        min-height: 46px;
        padding: 0.65rem 0.85rem;
        color: #172033;
        background: #ffffff;
        border: 1px solid #cdd8e6;
        border-radius: 10px;
        font-size: 0.94rem;
    }

        .employee-search .form-control:focus[b-8a9b91owia] {
            border-color: #0d6efd;
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
        }

/* =========================================================
   Statusregisterkarten
   ========================================================= */

.employee-status-tabs[b-8a9b91owia] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.employee-status-tab[b-8a9b91owia] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.65rem 1rem;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #dce5ef;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .employee-status-tab:hover:not(:disabled)[b-8a9b91owia] {
        color: #0d6efd;
        background: #edf4ff;
        border-color: #bed7fb;
    }

.employee-status-tab-active[b-8a9b91owia] {
    color: #0d6efd;
    background: #edf4ff;
    border-color: #93baff;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.06);
}

.employee-status-tab:focus-visible[b-8a9b91owia] {
    outline: 3px solid rgba(13, 110, 253, 0.22);
    outline-offset: 2px;
}

/* =========================================================
   Ergebnisüberschrift
   ========================================================= */

.employees-results[b-8a9b91owia] {
    width: 100%;
}

.employees-results-heading[b-8a9b91owia] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

    .employees-results-heading h2[b-8a9b91owia] {
        margin: 0;
        color: #172033;
        font-size: 1.3rem;
        font-weight: 750;
    }

    .employees-results-heading p[b-8a9b91owia] {
        margin: 0.35rem 0 0;
        color: #64748b;
        font-size: 0.9rem;
    }

.employees-results-count[b-8a9b91owia] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    color: #64748b;
    font-size: 0.86rem;
    white-space: nowrap;
}

    .employees-results-count strong[b-8a9b91owia] {
        color: #198754;
        font-size: 1.35rem;
        font-weight: 800;
    }

.employees-result-header[b-8a9b91owia] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    color: #64748b;
    font-size: 0.86rem;
}

.employees-page-info[b-8a9b91owia] {
    color: #64748b;
    font-size: 0.85rem;
}

.employees-loading[b-8a9b91owia] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

/* =========================================================
   Mitarbeiterkarten – kompaktes Layout
   ========================================================= */

.employee-cards[b-8a9b91owia] {
    display: grid;
    gap: 0.75rem;
}

.employee-card[b-8a9b91owia] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1.25rem;
    align-items: center;
    min-width: 0;
    padding: 0.95rem 1.15rem;
    border: 1px solid #dce5ef;
    border-radius: 14px;
    box-shadow: 0 5px 17px rgba(15, 23, 42, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

    .employee-card:hover[b-8a9b91owia] {
        transform: translateY(-1px);
        box-shadow: 0 8px 23px rgba(15, 23, 42, 0.07);
    }

/* Aktive Mitarbeiter */

.employee-card-active[b-8a9b91owia] {
    background: linear-gradient( 110deg, #ffffff 0%, #f2faf5 30%, #e1f2e7 65%, #c9e9d6 100% );
    border-color: #cce7d6;
}

    .employee-card-active:hover[b-8a9b91owia] {
        background: linear-gradient( 110deg, #ffffff 0%, #edf9f1 30%, #bce4cc 100% );
    }

/* Inaktive Mitarbeiter */

.employee-card-inactive[b-8a9b91owia] {
    background: linear-gradient( 110deg, #ffffff 0%, #f5f6f8 30%, #eaeef2 65%, #dbe2e9 100% );
    border-color: #dce3ea;
}

    .employee-card-inactive:hover[b-8a9b91owia] {
        background: linear-gradient( 110deg, #ffffff 0%, #f1f3f6 30%, #cfd9e3 100% );
    }

/* =========================================================
   Kartenkopf über die volle Breite
   ========================================================= */

.employee-card-top[b-8a9b91owia] {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.employee-title-group[b-8a9b91owia] {
    min-width: 0;
}

.employee-title[b-8a9b91owia] {
    margin: 0;
    color: #172033;
    font-size: 1.15rem;
    font-weight: 650;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.employee-status[b-8a9b91owia] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 26px;
    padding: 0.28rem 0.65rem;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.employee-status-active[b-8a9b91owia] {
    background: #198754;
}

.employee-status-inactive[b-8a9b91owia] {
    background: #64748b;
}

/* =========================================================
   Trennlinie
   ========================================================= */

.employee-card-divider[b-8a9b91owia] {
    grid-column: 1 / -1;
    width: 100%;
    height: 1px;
    margin: 0.65rem 0;
    background: rgba(100, 116, 139, 0.2);
}

/* =========================================================
   Kontaktdaten links
   ========================================================= */

.employee-meta[b-8a9b91owia] {
    grid-column: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.employee-meta-item[b-8a9b91owia] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.employee-meta-label[b-8a9b91owia] {
    display: block;
    color: #6d7e95;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.employee-meta-value[b-8a9b91owia] {
    color: #26374c;
    font-size: 0.87rem;
    font-weight: 400;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.employee-meta-empty[b-8a9b91owia] {
    color: #8492a6;
    font-weight: 500;
}

.employee-phone-link[b-8a9b91owia] {
    color: #0d6efd;
    font-size: 0.87rem;
    font-weight: 400;
    text-decoration: none;
}

    .employee-phone-link:hover[b-8a9b91owia] {
        color: #0957c3;
        text-decoration: underline;
    }

/* =========================================================
   Bearbeiten rechts, auf Höhe der Kontaktdaten
   ========================================================= */

.employee-actions[b-8a9b91owia] {
    grid-column: 2;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    align-self: center;
    gap: 0.6rem;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.employee-edit-button[b-8a9b91owia] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 42px;
    padding: 0.55rem 0.85rem;
    color: #0d6efd;
    background: #ffffff;
    border: 1px solid #0d6efd;
    border-radius: 9px;
    font-size: 0.83rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

    .employee-edit-button span[b-8a9b91owia] {
        font-size: 1rem;
        font-weight: 800;
        line-height: 1;
    }

    .employee-edit-button:hover[b-8a9b91owia] {
        color: #ffffff;
        background: #0d6efd;
        text-decoration: none;
    }

/* =========================================================
   Keine Mitarbeiter
   ========================================================= */

.employees-empty[b-8a9b91owia] {
    padding: 1.5rem;
    background: linear-gradient( 115deg, #ffffff 0%, #f2faf5 45%, #d9f0e1 100% );
    border: 1px solid #c8e7d2;
    border-radius: 14px;
}

    .employees-empty strong[b-8a9b91owia] {
        display: block;
        color: #198754;
        font-size: 1.05rem;
        font-weight: 800;
    }

    .employees-empty p[b-8a9b91owia] {
        margin: 0.45rem 0 0;
        color: #526579;
        font-size: 0.9rem;
        line-height: 1.5;
    }

.employees-empty-link[b-8a9b91owia] {
    display: inline-flex;
    align-items: center;
    margin-top: 0.9rem;
    color: #0d6efd;
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
}

    .employees-empty-link:hover[b-8a9b91owia] {
        text-decoration: underline;
    }

.employees-empty-neutral[b-8a9b91owia] {
    background: #f8fafc;
    border-color: #dce5ef;
}

    .employees-empty-neutral strong[b-8a9b91owia] {
        color: #334155;
    }

/* =========================================================
   Seitennavigation
   ========================================================= */

.employees-pagination[b-8a9b91owia] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 1rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 12px;
}

.employees-pagination-info[b-8a9b91owia] {
    color: #64748b;
    font-size: 0.9rem;
}

    .employees-pagination-info strong[b-8a9b91owia] {
        color: #172033;
    }

.employees-page-button[b-8a9b91owia] {
    min-height: 42px;
    padding: 0.6rem 1rem;
    color: #0d6efd;
    background: #ffffff;
    border: 1px solid #cddff9;
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 750;
    cursor: pointer;
}

    .employees-page-button:hover:not(:disabled)[b-8a9b91owia] {
        color: #ffffff;
        background: #0d6efd;
        border-color: #0d6efd;
    }

    .employees-page-button:disabled[b-8a9b91owia] {
        color: #9aa8b9;
        background: #f8fafc;
        border-color: #e2e8f0;
        cursor: not-allowed;
    }

/* =========================================================
   Mittlere Desktop-Fenster / Tablet
   ========================================================= */

@media (max-width: 1199.98px) {

    .employees-filter-content[b-8a9b91owia] {
        flex-direction: column;
        align-items: stretch;
    }

    .employee-search[b-8a9b91owia] {
        max-width: 100%;
        min-width: 0;
    }

    /*
       Bei weniger Platz stehen die Aktionen
       wieder unter den Kontaktdaten.
    */

    .employee-card[b-8a9b91owia] {
        grid-template-columns: minmax(0, 1fr);
    }

    .employee-card-top[b-8a9b91owia],
    .employee-card-divider[b-8a9b91owia],
    .employee-meta[b-8a9b91owia],
    .employee-actions[b-8a9b91owia] {
        grid-column: 1;
    }

    .employee-actions[b-8a9b91owia] {
        justify-content: flex-start;
        margin-top: 0.65rem;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .employees-page[b-8a9b91owia] {
        padding-bottom: 1rem;
    }

    .employees-header[b-8a9b91owia] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

        .employees-header h1[b-8a9b91owia] {
            font-size: 2rem;
        }

    .employees-create-button[b-8a9b91owia] {
        width: 100%;
        min-height: 48px;
    }

    .employees-filter-panel[b-8a9b91owia] {
        padding: 1rem;
    }

    .employees-filter-heading h2[b-8a9b91owia] {
        font-size: 1.15rem;
    }

    .employee-status-tabs[b-8a9b91owia] {
        flex-direction: column;
        align-items: stretch;
    }

    .employee-status-tab[b-8a9b91owia] {
        width: 100%;
        min-height: 46px;
    }

    .employees-results-heading[b-8a9b91owia] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }

        .employees-results-heading h2[b-8a9b91owia] {
            font-size: 1.18rem;
        }

    .employee-card[b-8a9b91owia] {
        padding: 0.95rem;
        border-radius: 13px;
    }

    .employee-title[b-8a9b91owia] {
        font-size: 1.08rem;
    }

    .employee-meta[b-8a9b91owia] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .employee-meta-item:first-child[b-8a9b91owia] {
        grid-column: 1 / -1;
    }

    .employee-actions[b-8a9b91owia] {
        justify-content: stretch;
        width: 100%;
        margin-top: 0.75rem;
    }

    .employee-edit-button[b-8a9b91owia] {
        width: 100%;
        min-height: 48px;
    }

    .employees-pagination[b-8a9b91owia] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .employees-pagination-info[b-8a9b91owia] {
        order: -1;
        width: 100%;
        text-align: center;
    }

    .employees-page-button[b-8a9b91owia] {
        flex: 1;
    }
}

/* =========================================================
   Sehr kleine Smartphones
   ========================================================= */

@media (max-width: 430px) {

    .employee-card-top[b-8a9b91owia] {
        align-items: flex-start;
    }

    .employee-meta[b-8a9b91owia] {
        grid-template-columns: 1fr;
    }

    .employee-meta-item:first-child[b-8a9b91owia] {
        grid-column: auto;
    }

    .employee-status[b-8a9b91owia] {
        padding: 0.3rem 0.55rem;
    }
}

/* =========================================================
   Tastaturbedienung
   ========================================================= */

.employees-page a:focus-visible[b-8a9b91owia],
.employees-page button:focus-visible[b-8a9b91owia],
.employees-page input:focus-visible[b-8a9b91owia] {
    outline: 3px solid #80b8ff;
    outline-offset: 3px;
}

/* =========================================================
   Reduzierte Animationen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .employee-card[b-8a9b91owia],
    .employee-edit-button[b-8a9b91owia],
    .employee-status-tab[b-8a9b91owia],
    .employees-create-button[b-8a9b91owia] {
        transition: none;
    }
}
/* /Components/Pages/Admin/Issues/IssueDetails.razor.rz.scp.css */
.issue-details-page[b-9wfgmv89v8] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
}


/* =========================================================
   Laden
   ========================================================= */

.issue-loading[b-9wfgmv89v8] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 180px;
    color: #64748b;
    font-size: 0.95rem;
}


/* =========================================================
   Nicht gefunden
   ========================================================= */

.issue-not-found[b-9wfgmv89v8] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    max-width: 720px;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #fecaca;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}


.issue-not-found-icon[b-9wfgmv89v8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    color: #ffffff;
    background: #dc3545;
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: 800;
}


.issue-not-found h1[b-9wfgmv89v8] {
    margin: 0 0 0.4rem;
    font-size: 1.3rem;
}


.issue-not-found p[b-9wfgmv89v8] {
    margin-bottom: 1rem;
    color: #64748b;
}


/* =========================================================
   Kopf
   ========================================================= */

.issue-header[b-9wfgmv89v8] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 1.5rem;
}


.issue-eyebrow[b-9wfgmv89v8] {
    margin-bottom: 0.35rem;
    color: #dc3545;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}


.issue-header h1[b-9wfgmv89v8] {
    margin: 0;
    color: #172033;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 750;
    line-height: 1.15;
}


.issue-header-location[b-9wfgmv89v8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.55rem;
    color: #64748b;
    font-size: 0.95rem;
}


.issue-separator[b-9wfgmv89v8] {
    color: #cbd5e1;
}


.issue-header-status[b-9wfgmv89v8] {
    padding-top: 0.25rem;
}


/* =========================================================
   Status
   ========================================================= */

.issue-status[b-9wfgmv89v8] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 34px;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
}


.issue-status-dot[b-9wfgmv89v8] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}


.issue-status-open[b-9wfgmv89v8] {
    color: #991b1b;
    background: #feecec;
    border: 1px solid #fecaca;
}


    .issue-status-open .issue-status-dot[b-9wfgmv89v8] {
        background: #dc3545;
    }


.issue-status-resolved[b-9wfgmv89v8] {
    color: #166534;
    background: #e9f7ee;
    border: 1px solid #b7e4c5;
}


    .issue-status-resolved .issue-status-dot[b-9wfgmv89v8] {
        background: #198754;
    }


.issue-status-neutral[b-9wfgmv89v8] {
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #dbe3ec;
}


    .issue-status-neutral .issue-status-dot[b-9wfgmv89v8] {
        background: #64748b;
    }


/* =========================================================
   Karten
   ========================================================= */

.issue-card[b-9wfgmv89v8],
.issue-section[b-9wfgmv89v8] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.045);
}


.issue-summary-card[b-9wfgmv89v8] {
    margin-bottom: 1.5rem;
    overflow: hidden;
}


/* =========================================================
   Zusammenfassung
   ========================================================= */

.issue-summary-main[b-9wfgmv89v8] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 1.5rem;
    background: linear-gradient( 110deg, #ffffff 0%, #ffffff 55%, #fff6f6 100% );
    border-bottom: 1px solid #f0e1e3;
}


.issue-summary-icon[b-9wfgmv89v8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    color: #ffffff;
    background: linear-gradient( 145deg, #dc3545, #ef6672 );
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(220, 53, 69, 0.2);
    font-size: 1.35rem;
    font-weight: 900;
}


.issue-summary-label[b-9wfgmv89v8] {
    color: #7b8799;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.065em;
}


.issue-summary-title[b-9wfgmv89v8] {
    margin-top: 0.15rem;
    color: #172033;
    font-size: 1.25rem;
    font-weight: 750;
}


.issue-summary-path[b-9wfgmv89v8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.88rem;
}


    .issue-summary-path span[b-9wfgmv89v8] {
        color: #cbd5e1;
    }


.issue-summary-grid[b-9wfgmv89v8] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


.issue-info-item[b-9wfgmv89v8] {
    min-width: 0;
    padding: 1.15rem 1.35rem;
    border-right: 1px solid #edf1f5;
    border-bottom: 1px solid #edf1f5;
}


    .issue-info-item:nth-child(3n)[b-9wfgmv89v8] {
        border-right: 0;
    }


    .issue-info-item:nth-last-child(-n + 3)[b-9wfgmv89v8] {
        border-bottom: 0;
    }


.issue-info-label[b-9wfgmv89v8] {
    margin-bottom: 0.3rem;
    color: #7b8799;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}


.issue-info-value[b-9wfgmv89v8] {
    overflow-wrap: anywhere;
    color: #1e293b;
    font-size: 0.92rem;
    font-weight: 650;
}


/* =========================================================
   Abschnitte
   ========================================================= */

.issue-section[b-9wfgmv89v8] {
    margin-bottom: 1.5rem;
    padding: 1.4rem 1.5rem;
}


.issue-section-header[b-9wfgmv89v8] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.2rem;
}


    .issue-section-header h2[b-9wfgmv89v8] {
        margin: 0;
        color: #172033;
        font-size: 1.2rem;
        font-weight: 750;
    }


    .issue-section-header p[b-9wfgmv89v8] {
        margin: 0.25rem 0 0;
        color: #64748b;
        font-size: 0.87rem;
    }


/* =========================================================
   Beschreibung
   ========================================================= */

.issue-description[b-9wfgmv89v8] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    padding: 1rem 1.1rem;
    color: #334155;
    background: #fffafa;
    border-left: 4px solid #dc3545;
    border-radius: 0 10px 10px 0;
    line-height: 1.6;
}


.issue-description-mark[b-9wfgmv89v8] {
    color: #dc3545;
    font-family: Georgia, serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 0.8;
}


/* =========================================================
   Leere Zustände
   ========================================================= */

.issue-empty-state[b-9wfgmv89v8] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}


.issue-empty-icon[b-9wfgmv89v8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    color: #64748b;
    background: #e8edf3;
    border-radius: 50%;
    font-weight: 800;
}


.issue-empty-state strong[b-9wfgmv89v8] {
    display: block;
    color: #243044;
}


.issue-empty-state span[b-9wfgmv89v8] {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.85rem;
}


/* =========================================================
   Foto
   ========================================================= */

.issue-photo-card[b-9wfgmv89v8] {
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}


.issue-photo-preview-button[b-9wfgmv89v8] {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    cursor: zoom-in;
    background: #eef2f6;
    border: 0;
}


    .issue-photo-preview-button:focus-visible[b-9wfgmv89v8] {
        outline: 3px solid rgba(27, 110, 194, 0.4);
        outline-offset: -3px;
    }


.issue-photo-preview[b-9wfgmv89v8] {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 560px;
    object-fit: contain;
    background: #eef2f6;
}


.issue-photo-overlay[b-9wfgmv89v8] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: #ffffff;
    background: rgba(15, 23, 42, 0);
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}


.issue-photo-preview-button:hover .issue-photo-overlay[b-9wfgmv89v8],
.issue-photo-preview-button:focus-visible .issue-photo-overlay[b-9wfgmv89v8] {
    background: rgba(15, 23, 42, 0.38);
    opacity: 1;
}


.issue-photo-overlay-icon[b-9wfgmv89v8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 700;
}


.issue-photo-caption[b-9wfgmv89v8] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    color: #64748b;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    font-size: 0.78rem;
}


/* =========================================================
   Reinigungsnachweis
   ========================================================= */

.issue-record-section[b-9wfgmv89v8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}


.issue-record-main[b-9wfgmv89v8] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}


.issue-record-icon[b-9wfgmv89v8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    color: #ffffff;
    background: #198754;
    border-radius: 12px;
    font-weight: 800;
}


.issue-record-label[b-9wfgmv89v8] {
    color: #7b8799;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


.issue-record-title[b-9wfgmv89v8] {
    margin-top: 0.1rem;
    color: #172033;
    font-size: 1rem;
    font-weight: 700;
}


.issue-record-subtitle[b-9wfgmv89v8] {
    margin-top: 0.1rem;
    color: #64748b;
    font-size: 0.8rem;
}


.issue-record-button[b-9wfgmv89v8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 42px;
    padding: 0.55rem 0.9rem;
    color: #0d6efd;
    background: #ffffff;
    border: 1px solid #0d6efd;
    border-radius: 9px;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}


    .issue-record-button:hover[b-9wfgmv89v8] {
        color: #ffffff;
        background: #0d6efd;
        text-decoration: none;
    }


/* =========================================================
   Aktionen
   ========================================================= */

.issue-actions[b-9wfgmv89v8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 0.25rem;
}


.issue-back-button[b-9wfgmv89v8],
.issue-resolve-button[b-9wfgmv89v8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}


.issue-back-button[b-9wfgmv89v8] {
    color: #334155;
    background: #ffffff;
    border: 1px solid #cbd5e1;
}


    .issue-back-button:hover[b-9wfgmv89v8] {
        color: #172033;
        background: #f8fafc;
    }


.issue-resolve-button[b-9wfgmv89v8] {
    color: #ffffff;
    background: #198754;
    border: 1px solid #198754;
    box-shadow: 0 5px 14px rgba(25, 135, 84, 0.16);
}


    .issue-resolve-button:hover:not(:disabled)[b-9wfgmv89v8] {
        background: #157347;
        border-color: #157347;
        transform: translateY(-1px);
    }


    .issue-resolve-button:disabled[b-9wfgmv89v8] {
        opacity: 0.65;
    }


/* =========================================================
   Lightbox
   ========================================================= */

.issue-photo-lightbox[b-9wfgmv89v8] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.92);
}


.issue-photo-lightbox-toolbar[b-9wfgmv89v8] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
    margin-bottom: 1rem;
}


.issue-photo-lightbox-button[b-9wfgmv89v8],
.issue-photo-lightbox-reset[b-9wfgmv89v8],
.issue-photo-lightbox-close[b-9wfgmv89v8] {
    min-width: 48px;
    min-height: 48px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    font-weight: 700;
}


    .issue-photo-lightbox-button:hover[b-9wfgmv89v8],
    .issue-photo-lightbox-reset:hover[b-9wfgmv89v8],
    .issue-photo-lightbox-close:hover[b-9wfgmv89v8] {
        background: rgba(255, 255, 255, 0.24);
    }


    .issue-photo-lightbox-button:disabled[b-9wfgmv89v8] {
        opacity: 0.4;
    }


.issue-photo-lightbox-zoom[b-9wfgmv89v8] {
    min-width: 58px;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
}


.issue-photo-lightbox-reset[b-9wfgmv89v8] {
    padding: 0.5rem 0.9rem;
}


.issue-photo-lightbox-close[b-9wfgmv89v8] {
    margin-left: 0.5rem;
    font-size: 1.6rem;
    line-height: 1;
}


.issue-photo-lightbox-viewport[b-9wfgmv89v8] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}


.issue-photo-lightbox-image[b-9wfgmv89v8] {
    display: block;
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    transform-origin: center center;
    transition: transform 0.15s ease;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 900px) {

    .issue-summary-grid[b-9wfgmv89v8] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .issue-info-item:nth-child(3n)[b-9wfgmv89v8] {
        border-right: 1px solid #edf1f5;
    }


    .issue-info-item:nth-child(2n)[b-9wfgmv89v8] {
        border-right: 0;
    }


    .issue-info-item:nth-last-child(-n + 3)[b-9wfgmv89v8] {
        border-bottom: 1px solid #edf1f5;
    }


    .issue-info-item:nth-last-child(-n + 2)[b-9wfgmv89v8] {
        border-bottom: 0;
    }
}


/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 600px) {

    .issue-details-page[b-9wfgmv89v8] {
        padding-bottom: 1rem;
    }


    .issue-header[b-9wfgmv89v8] {
        flex-direction: column;
        gap: 0.9rem;
        margin-bottom: 1rem;
    }


    .issue-header-status[b-9wfgmv89v8] {
        padding-top: 0;
    }


    .issue-summary-main[b-9wfgmv89v8] {
        align-items: flex-start;
        padding: 1rem;
    }


    .issue-summary-icon[b-9wfgmv89v8] {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 12px;
    }


    .issue-summary-grid[b-9wfgmv89v8] {
        grid-template-columns: 1fr;
    }


    .issue-info-item[b-9wfgmv89v8],
    .issue-info-item:nth-child(2n)[b-9wfgmv89v8],
    .issue-info-item:nth-child(3n)[b-9wfgmv89v8] {
        padding: 0.9rem 1rem;
        border-right: 0;
        border-bottom: 1px solid #edf1f5;
    }


        .issue-info-item:last-child[b-9wfgmv89v8] {
            border-bottom: 0;
        }


    .issue-section[b-9wfgmv89v8] {
        padding: 1rem;
    }


    .issue-section-header[b-9wfgmv89v8] {
        flex-direction: column;
        gap: 0.5rem;
    }


    .issue-photo-caption[b-9wfgmv89v8] {
        flex-direction: column;
        gap: 0.2rem;
    }


    .issue-record-section[b-9wfgmv89v8] {
        flex-direction: column;
        align-items: stretch;
    }


    .issue-record-button[b-9wfgmv89v8] {
        width: 100%;
        min-height: 46px;
    }


    .issue-actions[b-9wfgmv89v8] {
        flex-direction: column-reverse;
        align-items: stretch;
    }


    .issue-back-button[b-9wfgmv89v8],
    .issue-resolve-button[b-9wfgmv89v8] {
        width: 100%;
        min-height: 48px;
    }


    .issue-photo-lightbox[b-9wfgmv89v8] {
        padding: 0.75rem;
    }


    .issue-photo-lightbox-toolbar[b-9wfgmv89v8] {
        gap: 0.45rem;
        margin-bottom: 0.75rem;
    }


    .issue-photo-lightbox-reset[b-9wfgmv89v8] {
        font-size: 0.85rem;
    }


    .issue-photo-lightbox-close[b-9wfgmv89v8] {
        margin-left: 0;
    }


    .issue-photo-lightbox-image[b-9wfgmv89v8] {
        max-width: 94vw;
        max-height: 76vh;
    }
}
/* /Components/Pages/Admin/Issues/Issues.razor.rz.scp.css */

/* =========================================================
   CleanDation – Probleme
   ========================================================= */

.issues-page[b-rnpnm66z4x] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* =========================================================
   Seitenüberschrift
   ========================================================= */

.issues-header[b-rnpnm66z4x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.6rem;
}

    .issues-header h1[b-rnpnm66z4x] {
        margin: 0;
        color: #172033;
        font-size: clamp(2rem, 3vw, 2.6rem);
        font-weight: 750;
        line-height: 1.15;
    }

    .issues-header p[b-rnpnm66z4x] {
        margin: 0.5rem 0 0;
        color: #64748b;
        font-size: 1rem;
    }

.issues-header-count[b-rnpnm66z4x] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 170px;
    padding: 0.8rem 1.1rem;
    background: linear-gradient( 115deg, #ffffff 0%, #fff4f5 35%, #f6d2d8 100% );
    border: 1px solid #efcbd1;
    border-radius: 13px;
}

    .issues-header-count strong[b-rnpnm66z4x] {
        color: #dc3545;
        font-size: 1.9rem;
        font-weight: 800;
        line-height: 1.1;
    }

    .issues-header-count span[b-rnpnm66z4x] {
        margin-top: 0.2rem;
        color: #475569;
        font-size: 0.82rem;
        font-weight: 650;
        white-space: nowrap;
    }

.issues-loading[b-rnpnm66z4x] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

/* =========================================================
   Filter und Statusauswahl
   ========================================================= */

.issues-filter-panel[b-rnpnm66z4x] {
    margin-bottom: 1.5rem;
    padding: 1.35rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.045);
}

.issues-eyebrow[b-rnpnm66z4x] {
    margin-bottom: 0.35rem;
    color: #0d6efd;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.issues-filter-header h2[b-rnpnm66z4x] {
    margin: 0;
    color: #172033;
    font-size: 1.2rem;
    font-weight: 750;
}

.issues-filter-header p[b-rnpnm66z4x] {
    margin: 0.35rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* =========================================================
   Farbige Statusbuttons
   ========================================================= */

.issue-status-tabs[b-rnpnm66z4x] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.25rem;
}

.issue-status-tab[b-rnpnm66z4x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    min-height: 48px;
    padding: 0.7rem 1.15rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

    .issue-status-tab:hover:not(:disabled)[b-rnpnm66z4x] {
        transform: translateY(-1px);
    }

/* Offene Probleme */

.issue-status-tab-open[b-rnpnm66z4x] {
    color: #a82838;
    background: #fff0f2;
    border-color: #efbec6;
}

    .issue-status-tab-open:hover:not(:disabled)[b-rnpnm66z4x] {
        color: #9c1e30;
        background: #ffe1e6;
        border-color: #dc3545;
    }

    .issue-status-tab-open.issue-status-tab-active[b-rnpnm66z4x] {
        color: #ffffff;
        background: #dc3545;
        border-color: #dc3545;
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.18);
    }

/* Erledigte Probleme */

.issue-status-tab-resolved[b-rnpnm66z4x] {
    color: #157347;
    background: #eaf8ef;
    border-color: #b4dec3;
}

    .issue-status-tab-resolved:hover:not(:disabled)[b-rnpnm66z4x] {
        color: #11653c;
        background: #d9f0e1;
        border-color: #198754;
    }

    .issue-status-tab-resolved.issue-status-tab-active[b-rnpnm66z4x] {
        color: #ffffff;
        background: #198754;
        border-color: #198754;
        box-shadow: 0 4px 12px rgba(25, 135, 84, 0.18);
    }

.issue-status-tab:disabled[b-rnpnm66z4x] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Zähler innerhalb der Buttons */

.issue-tab-count[b-rnpnm66z4x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 0.5rem;
    background: #ffffff;
    border-radius: 999px;
    font-size: 0.79rem;
    font-weight: 850;
}

.issue-status-tab-open .issue-tab-count[b-rnpnm66z4x] {
    color: #dc3545;
    background: #ffe1e6;
}

.issue-status-tab-resolved .issue-tab-count[b-rnpnm66z4x] {
    color: #198754;
    background: #d6efdf;
}

.issue-status-tab-active .issue-tab-count[b-rnpnm66z4x] {
    background: #ffffff;
}

/* =========================================================
   Datumsfilter
   ========================================================= */

.issues-date-filter[b-rnpnm66z4x] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e5eaf0;
}

    .issues-date-filter .form-label[b-rnpnm66z4x] {
        margin: 0;
        color: #334155;
        font-size: 0.86rem;
        font-weight: 750;
    }

.issues-date-filter-controls[b-rnpnm66z4x] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    max-width: 350px;
}

.issues-date-filter .form-control[b-rnpnm66z4x] {
    min-width: 0;
    min-height: 45px;
    padding: 0.6rem 0.8rem;
    color: #172033;
    border: 1px solid #cdd8e6;
    border-radius: 10px;
    font-size: 0.92rem;
}

    .issues-date-filter .form-control:focus[b-rnpnm66z4x] {
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
    }

.issues-clear-date[b-rnpnm66z4x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    color: #64748b;
    background: #ffffff;
    border: 1px solid #cdd8e6;
    border-radius: 10px;
    font-size: 1.5rem;
    cursor: pointer;
}

    .issues-clear-date:hover:not(:disabled)[b-rnpnm66z4x] {
        color: #dc3545;
        border-color: #dc3545;
    }

/* =========================================================
   Ergebnisüberschrift
   ========================================================= */

.issues-results[b-rnpnm66z4x] {
    width: 100%;
}

.issues-results-header[b-rnpnm66z4x] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

    .issues-results-header h2[b-rnpnm66z4x] {
        margin: 0;
        color: #172033;
        font-size: 1.3rem;
        font-weight: 750;
    }

    .issues-results-header p[b-rnpnm66z4x] {
        margin: 0.35rem 0 0;
        color: #64748b;
        font-size: 0.9rem;
    }

.issues-results-count[b-rnpnm66z4x] {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    color: #64748b;
    font-size: 0.86rem;
    white-space: nowrap;
}

    .issues-results-count strong[b-rnpnm66z4x] {
        color: #172033;
        font-size: 1.2rem;
        font-weight: 800;
    }

.issues-page-info[b-rnpnm66z4x] {
    margin-bottom: 0.75rem;
    color: #64748b;
    font-size: 0.85rem;
    text-align: right;
}

/* =========================================================
   Problemliste
   ========================================================= */

.issues-list[b-rnpnm66z4x] {
    display: grid;
    gap: 0.75rem;
}

/* =========================================================
   Problemkarten – kompaktes Desktop-Layout
   ========================================================= */

.issue-card[b-rnpnm66z4x] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1.25rem;
    align-items: center;
    min-width: 0;
    padding: 1rem 1.15rem;
    border: 1px solid #dce5ef;
    border-radius: 14px;
    box-shadow: 0 5px 17px rgba(15, 23, 42, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .issue-card:hover[b-rnpnm66z4x] {
        transform: translateY(-1px);
        box-shadow: 0 8px 23px rgba(15, 23, 42, 0.07);
    }

/* Offene Probleme */

.issue-card-open[b-rnpnm66z4x] {
    background: linear-gradient( 110deg, #ffffff 0%, #fff4f5 30%, #fce4e8 65%, #f5cbd3 100% );
    border-color: #efc9cf;
}

    .issue-card-open:hover[b-rnpnm66z4x] {
        background: linear-gradient( 110deg, #ffffff 0%, #ffeff1 30%, #f2bfc8 100% );
    }

/* Erledigte Probleme */

.issue-card-resolved[b-rnpnm66z4x] {
    background: linear-gradient( 110deg, #ffffff 0%, #f2faf5 30%, #e1f2e7 65%, #c9e9d6 100% );
    border-color: #cce7d6;
}

    .issue-card-resolved:hover[b-rnpnm66z4x] {
        background: linear-gradient( 110deg, #ffffff 0%, #edf9f1 30%, #bce4cc 100% );
    }

/* =========================================================
   Kartenkopf – über beide Spalten
   ========================================================= */

.issue-card-top[b-rnpnm66z4x] {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.2);
}

.issue-title-group[b-rnpnm66z4x] {
    min-width: 0;
}

.issue-title[b-rnpnm66z4x] {
    margin: 0;
    color: #172033;
    font-size: 1.1rem;
    font-weight: 650;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.issue-location[b-rnpnm66z4x] {
    margin-top: 0.22rem;
    color: #475569;
    font-size: 0.83rem;
    font-weight: 400;
}

.issue-location-detail[b-rnpnm66z4x] {
    margin-top: 0.13rem;
    color: #62748a;
    font-size: 0.81rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

    .issue-location-detail span[b-rnpnm66z4x] {
        margin: 0 0.2rem;
    }

.issue-status-badge[b-rnpnm66z4x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 26px;
    padding: 0.28rem 0.65rem;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.issue-status-open[b-rnpnm66z4x] {
    background: #dc3545;
}

.issue-status-resolved[b-rnpnm66z4x] {
    background: #198754;
}

.issue-status-other[b-rnpnm66z4x] {
    background: #64748b;
}

/* =========================================================
   Metadaten – linke Spalte
   ========================================================= */

.issue-meta[b-rnpnm66z4x] {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    min-width: 0;
    margin: 0;
    padding: 0.75rem 0 0;
    border: 0;
}

.issue-meta-item[b-rnpnm66z4x] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.issue-meta-label[b-rnpnm66z4x] {
    display: block;
    color: #6d7e95;
    font-size: 0.69rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.issue-meta-value[b-rnpnm66z4x] {
    color: #26374c;
    font-size: 0.86rem;
    font-weight: 400;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* =========================================================
   Aktionen – rechte Spalte, neben den Metadaten
   ========================================================= */

.issue-actions[b-rnpnm66z4x] {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    align-self: center;
    gap: 0.55rem;
    min-width: 0;
    margin: 0;
    padding: 0.75rem 0 0;
}

.issue-action-button[b-rnpnm66z4x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 42px;
    padding: 0.55rem 0.78rem;
    border: 1px solid transparent;
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.81rem;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

    .issue-action-button span[b-rnpnm66z4x] {
        font-size: 1rem;
        font-weight: 800;
        line-height: 1;
    }

.issue-action-outline[b-rnpnm66z4x] {
    color: #0d6efd;
    background: #ffffff;
    border-color: #0d6efd;
}

    .issue-action-outline:hover[b-rnpnm66z4x] {
        color: #ffffff;
        background: #0d6efd;
        text-decoration: none;
    }

.issue-action-success[b-rnpnm66z4x] {
    color: #ffffff;
    background: #198754;
    border-color: #198754;
}

    .issue-action-success:hover:not(:disabled)[b-rnpnm66z4x] {
        color: #ffffff;
        background: #136c43;
        border-color: #136c43;
    }

.issue-action-button:disabled[b-rnpnm66z4x] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =========================================================
   Leerzustände
   ========================================================= */

.issues-empty[b-rnpnm66z4x] {
    padding: 1.5rem;
    border: 1px solid #dce5ef;
    border-radius: 14px;
}

    .issues-empty strong[b-rnpnm66z4x] {
        display: block;
        color: #334155;
        font-size: 1.05rem;
        font-weight: 800;
    }

    .issues-empty p[b-rnpnm66z4x] {
        margin: 0.4rem 0 0;
        color: #526579;
        font-size: 0.9rem;
        line-height: 1.5;
    }

.issues-empty-success[b-rnpnm66z4x] {
    background: linear-gradient( 115deg, #ffffff 0%, #f2faf5 45%, #d9f0e1 100% );
    border-color: #c8e7d2;
}

    .issues-empty-success strong[b-rnpnm66z4x] {
        color: #198754;
    }

.issues-empty-neutral[b-rnpnm66z4x] {
    background: #f8fafc;
}

/* =========================================================
   Seitennavigation
   ========================================================= */

.issues-pagination[b-rnpnm66z4x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 12px;
}

.issues-pagination-info[b-rnpnm66z4x] {
    color: #64748b;
    font-size: 0.9rem;
}

    .issues-pagination-info strong[b-rnpnm66z4x] {
        color: #172033;
    }

.issues-page-button[b-rnpnm66z4x] {
    min-height: 42px;
    padding: 0.6rem 1rem;
    color: #0d6efd;
    background: #ffffff;
    border: 1px solid #cddff9;
    border-radius: 9px;
    font-size: 0.86rem;
    font-weight: 750;
    cursor: pointer;
}

    .issues-page-button:hover:not(:disabled)[b-rnpnm66z4x] {
        color: #ffffff;
        background: #0d6efd;
        border-color: #0d6efd;
    }

    .issues-page-button:disabled[b-rnpnm66z4x] {
        color: #9aa8b9;
        background: #f8fafc;
        border-color: #e2e8f0;
        cursor: not-allowed;
    }

/* =========================================================
   Detailinhalte
   ========================================================= */

.issue-description-block[b-rnpnm66z4x] {
    padding: 1rem 0;
}

.issue-description-text[b-rnpnm66z4x] {
    margin-top: 0.35rem;
    color: #1c2b3a;
    font-size: 1rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.issue-photo[b-rnpnm66z4x] {
    margin-top: 1rem;
}

    .issue-photo img[b-rnpnm66z4x] {
        display: block;
        width: auto;
        max-width: 100%;
        max-height: 320px;
        border: 1px solid #dce5ef;
        border-radius: 10px;
    }

/* =========================================================
   Mittlere Desktop-Fenster und Tablets
   ========================================================= */

@media (max-width: 1199.98px) {

    /*
       Bei weniger Platz erhalten die Buttons
       wieder eine eigene Zeile.
    */

    .issue-card[b-rnpnm66z4x] {
        grid-template-columns: minmax(0, 1fr);
    }

    .issue-card-top[b-rnpnm66z4x],
    .issue-meta[b-rnpnm66z4x],
    .issue-actions[b-rnpnm66z4x] {
        grid-column: 1;
    }

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

    .issue-actions[b-rnpnm66z4x] {
        justify-content: flex-start;
        margin-top: 0.65rem;
        padding-top: 0;
    }

    .issues-header-count[b-rnpnm66z4x] {
        min-width: 150px;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .issues-page[b-rnpnm66z4x] {
        padding-bottom: 1rem;
    }

    .issues-header[b-rnpnm66z4x] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

        .issues-header h1[b-rnpnm66z4x] {
            font-size: 2rem;
        }

    .issues-header-count[b-rnpnm66z4x] {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0.6rem;
        min-width: 0;
    }

        .issues-header-count strong[b-rnpnm66z4x] {
            font-size: 1.6rem;
        }

        .issues-header-count span[b-rnpnm66z4x] {
            margin-top: 0;
        }

    .issues-filter-panel[b-rnpnm66z4x] {
        padding: 1rem;
    }

    .issue-status-tabs[b-rnpnm66z4x] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    .issue-status-tab[b-rnpnm66z4x] {
        width: 100%;
        justify-content: space-between;
        min-height: 48px;
    }

    .issues-results-header[b-rnpnm66z4x] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }

        .issues-results-header h2[b-rnpnm66z4x] {
            font-size: 1.18rem;
        }

    .issue-card[b-rnpnm66z4x] {
        padding: 0.95rem;
        border-radius: 13px;
    }

    .issue-card-top[b-rnpnm66z4x] {
        align-items: flex-start;
        gap: 0.65rem;
    }

    .issue-title[b-rnpnm66z4x] {
        font-size: 1.05rem;
    }

    .issue-location[b-rnpnm66z4x] {
        font-size: 0.83rem;
    }

    .issue-meta[b-rnpnm66z4x] {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .issue-actions[b-rnpnm66z4x] {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.6rem;
        margin-top: 0.75rem;
    }

    .issue-action-button[b-rnpnm66z4x] {
        width: 100%;
        min-height: 48px;
        white-space: normal;
    }

    .issues-pagination[b-rnpnm66z4x] {
        flex-wrap: wrap;
    }

    .issues-pagination-info[b-rnpnm66z4x] {
        order: -1;
        width: 100%;
        text-align: center;
    }

    .issues-page-button[b-rnpnm66z4x] {
        flex: 1;
    }
}

/* =========================================================
   Kleine Smartphones
   ========================================================= */

@media (max-width: 430px) {

    .issue-meta[b-rnpnm66z4x] {
        grid-template-columns: 1fr;
    }

    .issue-card-top[b-rnpnm66z4x] {
        flex-wrap: wrap;
    }
}

/* =========================================================
   Tastaturbedienung
   ========================================================= */

.issues-page a:focus-visible[b-rnpnm66z4x],
.issues-page button:focus-visible[b-rnpnm66z4x],
.issues-page input:focus-visible[b-rnpnm66z4x] {
    outline: 3px solid #80b8ff;
    outline-offset: 3px;
}

/* =========================================================
   Reduzierte Animationen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .issue-card[b-rnpnm66z4x],
    .issue-action-button[b-rnpnm66z4x],
    .issue-status-tab[b-rnpnm66z4x] {
        transition: none;
    }
}


/* =========================================================
   Erfolgsmeldung nach erledigtem Problem
   Gleiche Darstellung wie bei Offene Reinigungen
   ========================================================= */

.issues-success-toast[b-rnpnm66z4x] {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    width: calc(100% - 32px);
    max-width: 440px;
    padding: 17px;
    color: #172033;
    background: linear-gradient(115deg, #ffffff 0%, #f1faf4 40%, #d4efdf 100%);
    border: 1px solid #a7dabc;
    border-left: 5px solid #198754;
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.18);
}

.issues-success-toast-icon[b-rnpnm66z4x] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    color: #ffffff;
    background: #198754;
    border-radius: 50%;
    font-size: 19px;
    font-weight: 850;
}

.issues-success-toast-content[b-rnpnm66z4x] {
    flex: 1;
    min-width: 0;
}

    .issues-success-toast-content strong[b-rnpnm66z4x] {
        display: block;
        margin-bottom: 5px;
        color: #166534;
        font-size: 0.96rem;
        font-weight: 800;
    }

    .issues-success-toast-content p[b-rnpnm66z4x] {
        margin: 0;
        color: #475569;
        font-size: 0.88rem;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

.issues-success-toast-close[b-rnpnm66z4x] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    color: #64748b;
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

    .issues-success-toast-close:hover[b-rnpnm66z4x] {
        color: #172033;
        background: rgba(15, 23, 42, 0.08);
    }

    .issues-success-toast-close:focus-visible[b-rnpnm66z4x] {
        outline: 2px solid #0d6efd;
        outline-offset: 2px;
    }

@media (max-width: 767.98px) {
    .issues-success-toast[b-rnpnm66z4x] {
        right: 16px;
        bottom: 16px;
        left: 16px;
        width: auto;
        max-width: none;
        padding: 14px;
        gap: 11px;
    }

    .issues-success-toast-icon[b-rnpnm66z4x] {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }

    .issues-success-toast-content strong[b-rnpnm66z4x] {
        font-size: 0.9rem;
    }

    .issues-success-toast-content p[b-rnpnm66z4x] {
        font-size: 0.83rem;
    }
}
/* /Components/Pages/Admin/Objects/CleaningObjectCreate.razor.rz.scp.css */

/* =========================================================
   CleanDation – Neues Objekt anlegen
   ========================================================= */

.object-create-page[b-1x3l8jg9dz] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* =========================================================
   Seitenkopf
   ========================================================= */

.object-create-header[b-1x3l8jg9dz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.6rem;
}

.object-create-eyebrow[b-1x3l8jg9dz] {
    margin-bottom: 0.4rem;
    color: #0d6efd;
    font-size: 0.77rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.object-create-eyebrow-green[b-1x3l8jg9dz] {
    color: #198754;
}

.object-create-header h1[b-1x3l8jg9dz] {
    margin: 0;
    color: #172033;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 750;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.object-create-header p[b-1x3l8jg9dz] {
    margin: 0.55rem 0 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
}

    .object-create-header p strong[b-1x3l8jg9dz] {
        color: #334155;
    }

.object-create-setup[b-1x3l8jg9dz] {
    margin-bottom: 1.5rem;
}

/* =========================================================
   Kartenlayout
   ========================================================= */

.object-create-workspace[b-1x3l8jg9dz] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
    gap: 1.5rem;
}

.object-create-side[b-1x3l8jg9dz] {
    display: grid;
    gap: 1.5rem;
    min-width: 0;
}

.object-create-section[b-1x3l8jg9dz] {
    min-width: 0;
    padding: 1.5rem;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15,23,42,0.055);
}

/* Blaue Formularkarte */

.object-create-details[b-1x3l8jg9dz] {
    background: linear-gradient( 115deg, #ffffff 0%, #f1f6ff 30%, #dfeaff 65%, #cddfff 100% );
    border-color: #c4d8f8;
}

/* Kundeninformationen */

.object-create-context[b-1x3l8jg9dz] {
    background: linear-gradient( 115deg, #ffffff 0%, #f2f8ff 30%, #e4efff 65%, #d3e4ff 100% );
    border-color: #c9dcf7;
}

/* Nächster Schritt */

.object-create-next[b-1x3l8jg9dz] {
    background: linear-gradient( 115deg, #ffffff 0%, #f1faf4 30%, #dff2e5 65%, #c6e8d2 100% );
    border-color: #bde2cb;
}

/* =========================================================
   Kartenüberschriften
   ========================================================= */

.object-create-section-heading[b-1x3l8jg9dz] {
    margin-bottom: 1.3rem;
}

    .object-create-section-heading h2[b-1x3l8jg9dz] {
        margin: 0;
        color: #172033;
        font-size: 1.3rem;
        font-weight: 750;
    }

    .object-create-section-heading p[b-1x3l8jg9dz] {
        margin: 0.45rem 0 0;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.55;
    }

/* =========================================================
   Formularfelder
   ========================================================= */

.object-create-field[b-1x3l8jg9dz] {
    min-width: 0;
    margin-bottom: 1.2rem;
}

    .object-create-field label[b-1x3l8jg9dz] {
        display: block;
        margin-bottom: 0.5rem;
        color: #334155;
        font-size: 0.9rem;
        font-weight: 750;
    }

.object-create-required[b-1x3l8jg9dz] {
    color: #dc3545;
    font-weight: 800;
}

.object-create-field .form-control[b-1x3l8jg9dz] {
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 0.85rem;
    color: #172033;
    background: #ffffff;
    border: 1px solid #c7d5e6;
    border-radius: 10px;
    font-size: 0.95rem;
}

    .object-create-field .form-control:focus[b-1x3l8jg9dz] {
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13,110,253,0.13);
    }

    .object-create-field .form-control[b-1x3l8jg9dz]::placeholder {
        color: #94a3b8;
    }

.object-create-field-help[b-1x3l8jg9dz] {
    margin: 0.45rem 0 0;
    color: #64748b;
    font-size: 0.83rem;
    line-height: 1.5;
}

.object-create-field-grid[b-1x3l8jg9dz] {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: 1rem;
}

.object-create-validation-summary[b-1x3l8jg9dz] {
    margin-bottom: 1rem;
    color: #b42335;
    font-size: 0.9rem;
}

.object-create-validation[b-1x3l8jg9dz] {
    display: block;
    margin-top: 0.4rem;
    color: #b42335;
    font-size: 0.84rem;
}

.object-create-divider[b-1x3l8jg9dz] {
    height: 1px;
    margin: 1.6rem 0;
    background: rgba(148,163,184,0.35);
}

/* =========================================================
   Buttons
   ========================================================= */

.object-create-actions[b-1x3l8jg9dz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.object-create-button[b-1x3l8jg9dz] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    min-height: 46px;
    padding: 0.7rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .object-create-button:disabled[b-1x3l8jg9dz] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.object-create-button-primary[b-1x3l8jg9dz] {
    color: #ffffff;
    background: #0d6efd;
    border-color: #0d6efd;
}

    .object-create-button-primary:hover:not(:disabled)[b-1x3l8jg9dz] {
        color: #ffffff;
        background: #0957c3;
    }

.object-create-button-secondary[b-1x3l8jg9dz] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .object-create-button-secondary:hover[b-1x3l8jg9dz] {
        color: #ffffff;
        background: #475569;
        text-decoration: none;
    }

/* =========================================================
   Kundeninformationen
   ========================================================= */

.object-create-info-item[b-1x3l8jg9dz] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    padding: 1rem;
    background: rgba(255,255,255,0.82);
    border: 1px solid #cfddf0;
    border-radius: 10px;
}

    .object-create-info-item > span[b-1x3l8jg9dz] {
        color: #64748b;
        font-size: 0.73rem;
        font-weight: 800;
        letter-spacing: 0.045em;
    }

    .object-create-info-item strong[b-1x3l8jg9dz] {
        color: #172033;
        font-size: 0.96rem;
        font-weight: 750;
        overflow-wrap: anywhere;
    }

.object-create-context-note[b-1x3l8jg9dz] {
    color: #53657d;
    font-size: 0.86rem;
    line-height: 1.6;
}

/* =========================================================
   Nächster Schritt
   ========================================================= */

.object-create-next-box[b-1x3l8jg9dz] {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem;
    background: rgba(255,255,255,0.78);
    border: 1px solid #cde5d5;
    border-radius: 11px;
}

.object-create-next-icon[b-1x3l8jg9dz] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    color: #ffffff;
    background: #198754;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: 800;
}

.object-create-next-box strong[b-1x3l8jg9dz] {
    display: block;
    color: #172033;
    font-size: 0.95rem;
    font-weight: 800;
}

.object-create-next-box p[b-1x3l8jg9dz] {
    margin: 0.4rem 0 0;
    color: #53657d;
    font-size: 0.85rem;
    line-height: 1.55;
}

.object-create-next-note[b-1x3l8jg9dz] {
    margin: 1rem 0 0;
    color: #53657d;
    font-size: 0.86rem;
    line-height: 1.6;
}

/* =========================================================
   Lade- und Fehlerzustand
   ========================================================= */

.object-create-loading[b-1x3l8jg9dz] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

.object-create-not-found[b-1x3l8jg9dz] {
    max-width: 760px;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
}

    .object-create-not-found h2[b-1x3l8jg9dz] {
        margin: 0;
        color: #172033;
        font-size: 1.2rem;
        font-weight: 800;
    }

    .object-create-not-found p[b-1x3l8jg9dz] {
        margin: 0.5rem 0 1rem;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.6;
    }

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {

    .object-create-workspace[b-1x3l8jg9dz] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .object-create-side[b-1x3l8jg9dz] {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 1rem;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .object-create-page[b-1x3l8jg9dz] {
        padding-bottom: 1rem;
    }

    .object-create-header[b-1x3l8jg9dz] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

        .object-create-header h1[b-1x3l8jg9dz] {
            font-size: 1.9rem;
        }

    .object-create-workspace[b-1x3l8jg9dz],
    .object-create-side[b-1x3l8jg9dz] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .object-create-section[b-1x3l8jg9dz] {
        padding: 1rem;
        border-radius: 14px;
    }

    .object-create-section-heading h2[b-1x3l8jg9dz] {
        font-size: 1.2rem;
    }

    .object-create-field-grid[b-1x3l8jg9dz] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .object-create-actions[b-1x3l8jg9dz] {
        flex-direction: column;
        align-items: stretch;
    }

        .object-create-actions .object-create-button[b-1x3l8jg9dz],
        .object-create-header .object-create-button[b-1x3l8jg9dz] {
            width: 100%;
        }
}
/* /Components/Pages/Admin/Objects/CleaningObjectEdit.razor.rz.scp.css */

/* =========================================================
   CleanDation – Objekt bearbeiten
   ========================================================= */

.object-edit-page[b-gbxzr6b6gn] {
    width: 100%;
    max-width: 1500px;
    padding-bottom: 2rem;
}

/* =========================================================
   Seitenkopf
   ========================================================= */

.object-edit-header[b-gbxzr6b6gn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.6rem;
}

    .object-edit-header h1[b-gbxzr6b6gn] {
        margin: 0;
        color: #172033;
        font-size: clamp(2rem, 3vw, 2.6rem);
        font-weight: 750;
        line-height: 1.15;
    }

    .object-edit-header p[b-gbxzr6b6gn] {
        margin: 0.55rem 0 0;
        color: #64748b;
        font-size: 1rem;
        line-height: 1.5;
    }

        .object-edit-header p strong[b-gbxzr6b6gn] {
            color: #172033;
            font-weight: 800;
        }

.object-edit-loading[b-gbxzr6b6gn] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

/* =========================================================
   Statusanzeige oben
   ========================================================= */

.object-edit-status[b-gbxzr6b6gn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 32px;
    padding: 0.4rem 0.85rem;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
}

.object-edit-status-active[b-gbxzr6b6gn] {
    background: #198754;
}

.object-edit-status-inactive[b-gbxzr6b6gn] {
    background: #64748b;
}

/* =========================================================
   Zweispaltiges Layout
   ========================================================= */

.object-edit-workspace[b-gbxzr6b6gn] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
    gap: 1.5rem;
}

.object-edit-section[b-gbxzr6b6gn] {
    min-width: 0;
    padding: 1.4rem;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.05);
}

/* Objektdaten – Blau */

.object-edit-details[b-gbxzr6b6gn] {
    background: linear-gradient( 115deg, #ffffff 0%, #f3f7ff 35%, #e3edff 70%, #d3e2ff 100% );
    border-color: #ccdcf6;
}

/* Aktives Objekt – Grün */

.object-edit-status-active-section[b-gbxzr6b6gn] {
    background: linear-gradient( 115deg, #ffffff 0%, #f2faf5 30%, #e1f2e7 65%, #c9e9d6 100% );
    border-color: #cce7d6;
}

/* Inaktives Objekt – Grau */

.object-edit-status-inactive-section[b-gbxzr6b6gn] {
    background: linear-gradient( 115deg, #ffffff 0%, #f5f6f8 30%, #eaeef2 65%, #dbe2e9 100% );
    border-color: #dce3ea;
}

/* =========================================================
   Abschnittsüberschriften
   ========================================================= */

.object-edit-section-header[b-gbxzr6b6gn] {
    margin-bottom: 1.4rem;
}

.object-edit-eyebrow[b-gbxzr6b6gn] {
    margin-bottom: 0.35rem;
    color: #0d6efd;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.object-edit-eyebrow-status[b-gbxzr6b6gn] {
    color: #198754;
}

.object-edit-status-inactive-section .object-edit-eyebrow-status[b-gbxzr6b6gn] {
    color: #64748b;
}

.object-edit-section-header h2[b-gbxzr6b6gn] {
    margin: 0;
    color: #172033;
    font-size: 1.3rem;
    font-weight: 750;
}

.object-edit-section-header p[b-gbxzr6b6gn] {
    margin: 0.4rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.55;
}

/* =========================================================
   Formularfelder
   ========================================================= */

.object-edit-fields[b-gbxzr6b6gn] {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.object-edit-field[b-gbxzr6b6gn] {
    min-width: 0;
}

    .object-edit-field label[b-gbxzr6b6gn] {
        display: block;
        margin-bottom: 0.5rem;
        color: #334155;
        font-size: 0.9rem;
        font-weight: 750;
    }

    .object-edit-field .form-control[b-gbxzr6b6gn] {
        width: 100%;
        min-height: 48px;
        padding: 0.65rem 0.85rem;
        color: #172033;
        background: #ffffff;
        border: 1px solid #cdd8e6;
        border-radius: 10px;
        font-size: 0.95rem;
    }

        .object-edit-field .form-control:focus[b-gbxzr6b6gn] {
            border-color: #0d6efd;
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
        }

.object-edit-address-grid[b-gbxzr6b6gn] {
    display: grid;
    grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1.3fr);
    gap: 1rem;
}

/* =========================================================
   Validierung
   ========================================================= */

.object-edit-validation-summary[b-gbxzr6b6gn] {
    margin-bottom: 1rem;
    color: #b42335;
    font-size: 0.9rem;
}

.object-edit-validation[b-gbxzr6b6gn] {
    display: block;
    margin-top: 0.4rem;
    color: #b42335;
    font-size: 0.83rem;
}

/* =========================================================
   Statuskarte
   ========================================================= */

.object-edit-status-box[b-gbxzr6b6gn] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(203, 213, 225, 0.85);
    border-radius: 11px;
}

.object-edit-status-box-label[b-gbxzr6b6gn] {
    color: #6d7e95;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.045em;
}

.object-edit-status-box strong[b-gbxzr6b6gn] {
    color: #172033;
    font-size: 1.05rem;
    font-weight: 800;
}

.object-edit-status-description[b-gbxzr6b6gn] {
    margin: 1.3rem 0 1rem;
}

    .object-edit-status-description strong[b-gbxzr6b6gn] {
        display: block;
        color: #172033;
        font-size: 0.98rem;
        font-weight: 800;
    }

    .object-edit-status-description p[b-gbxzr6b6gn] {
        margin: 0.4rem 0 0;
        color: #53657d;
        font-size: 0.9rem;
        line-height: 1.6;
    }

/* =========================================================
   Buttons
   ========================================================= */

.object-edit-actions[b-gbxzr6b6gn] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.4rem;
}

.object-edit-button[b-gbxzr6b6gn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 46px;
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .object-edit-button span[b-gbxzr6b6gn] {
        font-size: 1.1rem;
        font-weight: 800;
    }

    .object-edit-button:disabled[b-gbxzr6b6gn] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.object-edit-button-primary[b-gbxzr6b6gn] {
    color: #ffffff;
    background: #0d6efd;
    border-color: #0d6efd;
}

    .object-edit-button-primary:hover:not(:disabled)[b-gbxzr6b6gn] {
        color: #ffffff;
        background: #0957c3;
    }

.object-edit-button-secondary[b-gbxzr6b6gn] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .object-edit-button-secondary:hover[b-gbxzr6b6gn] {
        color: #ffffff;
        background: #475569;
        text-decoration: none;
    }

.object-edit-button-danger[b-gbxzr6b6gn] {
    color: #ffffff;
    background: #dc3545;
    border-color: #dc3545;
}

    .object-edit-button-danger:hover:not(:disabled)[b-gbxzr6b6gn] {
        color: #ffffff;
        background: #b92838;
    }

.object-edit-button-success[b-gbxzr6b6gn] {
    color: #ffffff;
    background: #198754;
    border-color: #198754;
}

    .object-edit-button-success:hover:not(:disabled)[b-gbxzr6b6gn] {
        color: #ffffff;
        background: #136c43;
    }

/* =========================================================
   Nicht gefunden
   ========================================================= */

.object-edit-not-found[b-gbxzr6b6gn] {
    max-width: 760px;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
}

    .object-edit-not-found h2[b-gbxzr6b6gn] {
        margin: 0;
        color: #172033;
        font-size: 1.2rem;
        font-weight: 800;
    }

    .object-edit-not-found p[b-gbxzr6b6gn] {
        margin: 0.5rem 0 1rem;
        color: #64748b;
        font-size: 0.9rem;
    }

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {
    .object-edit-workspace[b-gbxzr6b6gn] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {
    .object-edit-page[b-gbxzr6b6gn] {
        padding-bottom: 1rem;
    }

    .object-edit-header[b-gbxzr6b6gn] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.9rem;
    }

        .object-edit-header h1[b-gbxzr6b6gn] {
            font-size: 2rem;
        }

    .object-edit-section[b-gbxzr6b6gn] {
        padding: 1rem;
        border-radius: 14px;
    }

    .object-edit-section-header h2[b-gbxzr6b6gn] {
        font-size: 1.18rem;
    }

    .object-edit-address-grid[b-gbxzr6b6gn] {
        grid-template-columns: 1fr;
        gap: 1.15rem;
    }

    .object-edit-actions[b-gbxzr6b6gn] {
        flex-direction: column;
        align-items: stretch;
    }

    .object-edit-button[b-gbxzr6b6gn] {
        width: 100%;
        min-height: 48px;
    }
}
/* /Components/Pages/Admin/Objects/ObjectAreas.razor.rz.scp.css */

/* =========================================================
   CleanDation – Bereicheverwaltung
   Kompakte Karten | Responsive | Aufgabenvorschau
   ========================================================= */

.object-areas-page[b-9g247uw5ri] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* =========================================================
   Seitenkopf
   ========================================================= */

.object-areas-header[b-9g247uw5ri] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.4rem;
}

.object-areas-eyebrow[b-9g247uw5ri] {
    margin-bottom: 0.35rem;
    color: #0d6efd;
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.object-areas-heading[b-9g247uw5ri] {
    min-width: 0;
}

    .object-areas-heading h1[b-9g247uw5ri] {
        margin: 0;
        color: #172033;
        font-size: clamp(1.9rem, 3vw, 2.5rem);
        font-weight: 750;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .object-areas-heading p[b-9g247uw5ri] {
        margin: 0.45rem 0 0;
        color: #64748b;
        font-size: 0.94rem;
        line-height: 1.5;
    }

        .object-areas-heading p strong[b-9g247uw5ri] {
            color: #334155;
        }

/* =========================================================
   Allgemeine Buttons
   ========================================================= */

.object-areas-button[b-9g247uw5ri] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .object-areas-button:disabled[b-9g247uw5ri] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.object-areas-button-secondary[b-9g247uw5ri] {
    color: #475569;
    background: #ffffff;
    border-color: #cbd5e1;
}

    .object-areas-button-secondary:hover:not(:disabled)[b-9g247uw5ri] {
        color: #ffffff;
        background: #475569;
        text-decoration: none;
    }

.object-areas-button-primary[b-9g247uw5ri] {
    color: #ffffff;
    background: #0d6efd;
    border-color: #0d6efd;
}

    .object-areas-button-primary:hover[b-9g247uw5ri] {
        color: #ffffff;
        background: #0957c3;
        text-decoration: none;
    }

.object-areas-button-teal[b-9g247uw5ri] {
    color: #ffffff;
    background: #0f9488;
    border-color: #0f9488;
}

    .object-areas-button-teal:hover[b-9g247uw5ri] {
        color: #ffffff;
        background: #0b746b;
        text-decoration: none;
    }

.object-areas-button-outline[b-9g247uw5ri] {
    color: #198754;
    background: #ffffff;
    border-color: #198754;
}

    .object-areas-button-outline:hover[b-9g247uw5ri] {
        color: #ffffff;
        background: #198754;
        text-decoration: none;
    }

/* =========================================================
   Verwaltung
   ========================================================= */

.object-areas-management[b-9g247uw5ri] {
    margin-bottom: 1.4rem;
    padding: 1.15rem 1.3rem;
    background: linear-gradient( 110deg, #ffffff 0%, #eef5ff 35%, #dce9ff 75%, #cbdfff 100% );
    border: 1px solid #c5d9f7;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.055);
}

.object-areas-management-heading[b-9g247uw5ri] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

    .object-areas-management-heading h2[b-9g247uw5ri] {
        margin: 0;
        color: #172033;
        font-size: 1.2rem;
        font-weight: 750;
    }

    .object-areas-management-heading p[b-9g247uw5ri] {
        margin: 0;
        color: #53657d;
        font-size: 0.85rem;
        line-height: 1.5;
        text-align: right;
    }

.object-areas-toolbar[b-9g247uw5ri] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

    .object-areas-toolbar .object-areas-button[b-9g247uw5ri] {
        min-height: 44px;
        padding: 0.65rem 1rem;
    }

/* =========================================================
   Bereichsübersicht
   ========================================================= */

.object-areas-list-header[b-9g247uw5ri] {
    margin-bottom: 1rem;
}

    .object-areas-list-header h2[b-9g247uw5ri] {
        margin: 0;
        color: #172033;
        font-size: 1.35rem;
        font-weight: 750;
    }

    .object-areas-list-header p[b-9g247uw5ri] {
        margin: 0.4rem 0 0;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.5;
    }

/* =========================================================
   Status-Tabs
   ========================================================= */

.area-status-tabs[b-9g247uw5ri] {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
    margin-bottom: 1rem;
    padding: 0.35rem;
    background: #eef2f7;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
}

.area-status-tab[b-9g247uw5ri] {
    flex: 1;
    min-height: 44px;
    padding: 0.7rem 0.85rem;
    color: #64748b;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 750;
    line-height: 1.35;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .area-status-tab:hover:not(:disabled)[b-9g247uw5ri] {
        color: #0d6efd;
        background: rgba(255, 255, 255, 0.65);
    }

.area-status-tab-active[b-9g247uw5ri] {
    color: #0d6efd;
    background: #ffffff;
    border-color: #dce5f1;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.area-status-tab:disabled[b-9g247uw5ri] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =========================================================
   Ergebnisse
   ========================================================= */

.object-areas-results-header[b-9g247uw5ri] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.8rem;
    color: #64748b;
    font-size: 0.88rem;
}

    .object-areas-results-header strong[b-9g247uw5ri] {
        color: #0d6efd;
        font-weight: 800;
    }

/* =========================================================
   Allgemeine Bereichskarten
   ========================================================= */

.area-cards[b-9g247uw5ri] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.area-card[b-9g247uw5ri] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1.25rem;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: 0.95rem 1.15rem;
    border: 1px solid #cbdcf5;
    border-radius: 14px;
    box-shadow: 0 5px 17px rgba(15, 23, 42, 0.05);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

    .area-card:hover[b-9g247uw5ri] {
        box-shadow: 0 8px 23px rgba(15, 23, 42, 0.075);
    }

.area-card-active[b-9g247uw5ri] {
    background: linear-gradient( 105deg, #ffffff 0%, #f2f7ff 28%, #e1ecff 62%, #cfe0ff 100% );
    border-color: #c8dbfa;
}

.area-card-inactive[b-9g247uw5ri] {
    background: linear-gradient( 105deg, #ffffff 0%, #f6f7f9 30%, #e9edf3 65%, #dce3eb 100% );
    border-color: #d4dce7;
}

.area-card-completed[b-9g247uw5ri] {
    background: linear-gradient( 105deg, #ffffff 0%, #f0faf3 30%, #dff3e5 65%, #c7e9d3 100% );
    border-color: #bde3cb;
}

.area-card-onetime[b-9g247uw5ri] {
    border-left: 4px solid #2dbfaf;
}

.area-card-warning[b-9g247uw5ri] {
    border-top-color: #c8dbfa;
    border-right-color: #c8dbfa;
    border-bottom-color: #c8dbfa;
}

/* =========================================================
   Kartenkopf
   ========================================================= */

.area-card-top[b-9g247uw5ri] {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.area-title-group[b-9g247uw5ri] {
    flex: 1;
    min-width: 0;
}

.area-title[b-9g247uw5ri] {
    margin: 0;
    color: #172033;
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.area-start-date[b-9g247uw5ri] {
    display: block;
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.82rem;
}

/* =========================================================
   Status
   ========================================================= */

.area-status[b-9g247uw5ri] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 26px;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.area-status-active[b-9g247uw5ri] {
    color: #ffffff;
    background: #198754;
}

.area-status-inactive[b-9g247uw5ri] {
    color: #ffffff;
    background: #64748b;
}

.area-status-completed[b-9g247uw5ri] {
    color: #ffffff;
    background: #198754;
}

/* =========================================================
   Karteninhalt
   ========================================================= */

.area-card-content[b-9g247uw5ri] {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.65rem;
    min-width: 0;
    padding-top: 0.7rem;
}

.area-meta[b-9g247uw5ri] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    min-width: 0;
}

.area-meta-item[b-9g247uw5ri] {
    min-width: 0;
}

.area-meta-label[b-9g247uw5ri] {
    display: block;
    margin-bottom: 0.2rem;
    color: #607798;
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.area-meta-value[b-9g247uw5ri] {
    display: block;
    color: #172d4a;
    font-size: 0.86rem;
    font-weight: 400;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* =========================================================
   Reinigungsrhythmus
   ========================================================= */

.area-schedule-section[b-9g247uw5ri] {
    margin: 0;
}

.area-schedule-badges[b-9g247uw5ri] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.area-schedule-badge[b-9g247uw5ri] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 0.25rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 750;
    line-height: 1.25;
    white-space: nowrap;
}

.area-schedule-type-weekly[b-9g247uw5ri] {
    color: #0d6efd;
    background: #e5efff;
    border-color: #bcd4ff;
}

.area-schedule-type-biweekly[b-9g247uw5ri] {
    color: #6f42c1;
    background: #efe6ff;
    border-color: #d8c4fa;
}

.area-schedule-type-monthly[b-9g247uw5ri] {
    color: #956500;
    background: #fff3c4;
    border-color: #f6d979;
}

.area-schedule-type-onetime[b-9g247uw5ri] {
    color: #0f766e;
    background: #d5f3ed;
    border-color: #a0ded2;
}

.area-schedule-day-badge[b-9g247uw5ri],
.area-schedule-date-badge[b-9g247uw5ri] {
    color: #334155;
    background: rgba(255, 255, 255, 0.85);
    border-color: #d2dce9;
}

/* =========================================================
   Mitarbeiterzuweisung
   ========================================================= */

.area-assignment-section[b-9g247uw5ri] {
    padding: 0.7rem 0.8rem;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 10px;
}

.area-assignment-name[b-9g247uw5ri] {
    color: #172033;
    font-size: 0.86rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.area-assignment-missing[b-9g247uw5ri] {
    color: #b42318;
}

/* =========================================================
   Abschlussdatum
   ========================================================= */

.area-completed-section[b-9g247uw5ri] {
    padding: 0.7rem 0.8rem;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid #bde3cb;
    border-radius: 10px;
}

.area-completed-value[b-9g247uw5ri] {
    display: block;
    color: #157347;
    font-size: 0.86rem;
    font-weight: 600;
}

/* =========================================================
   Warnhinweise
   ========================================================= */

.area-warning[b-9g247uw5ri] {
    padding: 0.7rem 0.8rem;
    background: #fff1cc;
    border: 1px solid #f4d27c;
    border-radius: 10px;
}

    .area-warning strong[b-9g247uw5ri] {
        display: block;
        color: #966000;
        font-size: 0.86rem;
        font-weight: 800;
    }

    .area-warning p[b-9g247uw5ri] {
        margin: 0.3rem 0 0;
        color: #805b12;
        font-size: 0.82rem;
        line-height: 1.5;
    }

/* =========================================================
   Aufklappbare Aufgabenvorschau
   ========================================================= */

.area-task-preview[b-9g247uw5ri] {
    grid-column: 1 / -1;
    min-width: 0;
    margin-top: 0.75rem;
    padding: 0.8rem 1rem;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid #d4e1f2;
    border-radius: 10px;
}

.area-task-preview-header[b-9g247uw5ri] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.area-task-summary[b-9g247uw5ri] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

    .area-task-summary strong[b-9g247uw5ri] {
        color: #172033;
        font-size: 0.88rem;
        font-weight: 750;
    }

.area-task-summary-icon[b-9g247uw5ri] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 27px;
    height: 27px;
    color: #198754;
    background: #e6f6ed;
    border: 1px solid #b9e5cb;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 850;
}

.area-task-toggle[b-9g247uw5ri] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.55rem 0.85rem;
    color: #0d6efd;
    background: #ffffff;
    border: 1px solid #bcd4ff;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.83rem;
    font-weight: 750;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .area-task-toggle:hover[b-9g247uw5ri] {
        background: #eaf2ff;
        border-color: #80b8ff;
    }

.area-task-preview-content[b-9g247uw5ri] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid #dce5f1;
}

.area-task-preview-list[b-9g247uw5ri] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .area-task-preview-list li[b-9g247uw5ri] {
        display: flex;
        align-items: flex-start;
        gap: 0.65rem;
        min-width: 0;
        padding: 0.6rem 0.75rem;
        color: #334155;
        background: #f4f8ff;
        border: 1px solid #e0eaf8;
        border-radius: 8px;
        font-size: 0.85rem;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

.area-task-list-icon[b-9g247uw5ri] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: #198754;
    background: #e6f6ed;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 800;
}

.area-task-manage-link[b-9g247uw5ri] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.6rem 1rem;
    color: #ffffff;
    background: #0d6efd;
    border: 1px solid #0d6efd;
    border-radius: 9px;
    font-size: 0.83rem;
    font-weight: 750;
    text-align: center;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .area-task-manage-link:hover[b-9g247uw5ri] {
        color: #ffffff;
        background: #0957c3;
        border-color: #0957c3;
        text-decoration: none;
    }

/* =========================================================
   Aktionsbuttons
   ========================================================= */

.area-actions[b-9g247uw5ri] {
    grid-column: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-self: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    min-width: 0;
    margin: 0;
    padding: 0.7rem 0 0;
    border: 0;
}

.area-action-button[b-9g247uw5ri] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 42px;
    min-width: 0;
    padding: 0.55rem 0.8rem;
    border: 1px solid transparent;
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.81rem;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.area-action-primary[b-9g247uw5ri] {
    color: #0d6efd;
    background: #ffffff;
    border-color: #0d6efd;
}

    .area-action-primary:hover[b-9g247uw5ri] {
        color: #ffffff;
        background: #0d6efd;
        text-decoration: none;
    }

.area-action-secondary[b-9g247uw5ri] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .area-action-secondary:hover[b-9g247uw5ri] {
        color: #ffffff;
        background: #475569;
        text-decoration: none;
    }

.area-action-warning[b-9g247uw5ri] {
    color: #805b00;
    background: #ffdf83;
    border-color: #ebbe49;
}

    .area-action-warning:hover[b-9g247uw5ri] {
        color: #634500;
        background: #f4ce65;
        text-decoration: none;
    }

.area-action-success[b-9g247uw5ri] {
    color: #ffffff;
    background: #198754;
    border-color: #198754;
}

    .area-action-success:hover[b-9g247uw5ri] {
        color: #ffffff;
        background: #136c43;
        text-decoration: none;
    }

.area-action-qr[b-9g247uw5ri] {
    color: #198754;
    background: #ffffff;
    border-color: #198754;
}

    .area-action-qr:hover:not(:disabled)[b-9g247uw5ri] {
        color: #ffffff;
        background: #198754;
        text-decoration: none;
    }

.area-action-button:disabled[b-9g247uw5ri] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* =========================================================
   Kompakte abgeschlossene Einmalreinigungen

   Nur Karten mit .area-card-completed werden angepasst.
   Alle anderen Kartentypen bleiben unverändert.
   ========================================================= */

.area-card-completed[b-9g247uw5ri] {
    padding: 0.8rem 1rem;
    column-gap: 1rem;
    row-gap: 0;
}

    .area-card-completed .area-card-top[b-9g247uw5ri] {
        padding-bottom: 0.5rem;
        border-bottom-color: rgba(22, 101, 52, 0.13);
    }

    .area-card-completed .area-title[b-9g247uw5ri] {
        font-size: 1.04rem;
    }

    .area-card-completed .area-card-content[b-9g247uw5ri] {
        display: grid;
        grid-template-columns: minmax(90px, 0.7fr) minmax(130px, 1fr) minmax(140px, 1.1fr) minmax(160px, 1.2fr);
        align-items: center;
        column-gap: 1rem;
        row-gap: 0.5rem;
        padding-top: 0.6rem;
    }

    .area-card-completed .area-meta[b-9g247uw5ri] {
        display: block;
        min-width: 0;
    }

    .area-card-completed .area-schedule-section[b-9g247uw5ri] {
        min-width: 0;
    }

    .area-card-completed .area-assignment-section[b-9g247uw5ri] {
        min-width: 0;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
    }

    .area-card-completed .area-completed-section[b-9g247uw5ri] {
        min-width: 0;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
    }

    .area-card-completed .area-meta-label[b-9g247uw5ri] {
        margin-bottom: 0.28rem;
        color: #52766c;
        font-size: 0.65rem;
    }

    .area-card-completed .area-assignment-name[b-9g247uw5ri] {
        color: #172d4a;
        font-size: 0.83rem;
        font-weight: 600;
    }

    .area-card-completed .area-completed-value[b-9g247uw5ri] {
        font-size: 0.82rem;
        font-weight: 750;
        line-height: 1.4;
    }

    .area-card-completed .area-actions[b-9g247uw5ri] {
        gap: 0.45rem;
        padding-top: 0.6rem;
    }

    .area-card-completed .area-action-button[b-9g247uw5ri] {
        min-height: 38px;
        padding: 0.5rem 0.7rem;
        font-size: 0.76rem;
    }

/* =========================================================
   Pagination
   ========================================================= */

.object-areas-pagination[b-9g247uw5ri] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    color: #64748b;
    font-size: 0.9rem;
}

    .object-areas-pagination strong[b-9g247uw5ri] {
        color: #172033;
    }

/* =========================================================
   Laden und Leerzustände
   ========================================================= */

.object-areas-loading[b-9g247uw5ri] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

.object-areas-empty[b-9g247uw5ri],
.object-areas-no-results[b-9g247uw5ri] {
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
}

    .object-areas-empty h2[b-9g247uw5ri],
    .object-areas-no-results h3[b-9g247uw5ri] {
        margin: 0;
        color: #172033;
        font-size: 1.15rem;
        font-weight: 800;
    }

    .object-areas-empty p[b-9g247uw5ri],
    .object-areas-no-results p[b-9g247uw5ri] {
        margin: 0.5rem 0 1rem;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.6;
    }

.object-areas-no-results[b-9g247uw5ri] {
    padding: 2rem 1.5rem;
    text-align: center;
}

    .object-areas-no-results p[b-9g247uw5ri] {
        margin-bottom: 0;
    }

/* =========================================================
   Mittlere Desktop-Fenster und Tablets
   ========================================================= */

@media (max-width: 1250px) {

    .area-card[b-9g247uw5ri] {
        grid-template-columns: minmax(0, 1fr);
    }

    .area-card-top[b-9g247uw5ri],
    .area-card-content[b-9g247uw5ri],
    .area-actions[b-9g247uw5ri] {
        grid-column: 1;
    }

    .area-task-preview[b-9g247uw5ri] {
        grid-column: 1;
    }

    .area-actions[b-9g247uw5ri] {
        justify-content: flex-start;
        padding-top: 0;
        margin-top: 0.15rem;
    }

    .area-meta[b-9g247uw5ri] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .area-card-completed .area-card-content[b-9g247uw5ri] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 0.75rem;
    }

    .area-card-completed .area-actions[b-9g247uw5ri] {
        justify-content: flex-end;
        margin-top: 0.4rem;
        padding-top: 0.2rem;
    }
}

@media (max-width: 1100px) {

    .object-areas-management-heading[b-9g247uw5ri] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

        .object-areas-management-heading p[b-9g247uw5ri] {
            text-align: left;
        }

    .area-card-completed .area-card-content[b-9g247uw5ri] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 0.75rem;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .object-areas-page[b-9g247uw5ri] {
        padding-bottom: 1rem;
    }

    .object-areas-header[b-9g247uw5ri] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .object-areas-heading h1[b-9g247uw5ri] {
        font-size: 1.9rem;
    }

    .object-areas-management[b-9g247uw5ri] {
        padding: 1rem;
    }

    .object-areas-toolbar[b-9g247uw5ri] {
        flex-direction: column;
    }

        .object-areas-toolbar .object-areas-button[b-9g247uw5ri] {
            width: 100%;
            min-height: 48px;
        }

    .area-status-tabs[b-9g247uw5ri] {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .area-status-tab[b-9g247uw5ri] {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .area-card[b-9g247uw5ri] {
        padding: 0.9rem;
        border-radius: 12px;
    }

    .area-card-top[b-9g247uw5ri] {
        align-items: flex-start;
        gap: 0.75rem;
    }

    .area-title[b-9g247uw5ri] {
        font-size: 1.08rem;
    }

    .area-card-content[b-9g247uw5ri] {
        gap: 0.6rem;
    }

    .area-meta[b-9g247uw5ri] {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .area-task-preview[b-9g247uw5ri] {
        margin-top: 0.65rem;
        padding: 0.75rem;
    }

    .area-task-preview-header[b-9g247uw5ri] {
        align-items: stretch;
        flex-direction: column;
    }

    .area-task-toggle[b-9g247uw5ri] {
        width: 100%;
        min-height: 48px;
    }

    .area-task-manage-link[b-9g247uw5ri] {
        align-self: stretch;
        width: 100%;
        min-height: 48px;
    }

    .area-actions[b-9g247uw5ri] {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.6rem;
        margin-top: 0.4rem;
    }

    .area-action-button[b-9g247uw5ri] {
        width: 100%;
        min-height: 48px;
        white-space: normal;
    }

    .object-areas-pagination[b-9g247uw5ri] {
        flex-wrap: wrap;
        justify-content: center;
    }

        .object-areas-pagination .object-areas-button[b-9g247uw5ri] {
            flex: 1;
        }

    .area-card-completed[b-9g247uw5ri] {
        padding: 0.85rem;
    }

        .area-card-completed .area-card-content[b-9g247uw5ri] {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.8rem;
            padding-top: 0.7rem;
        }

        .area-card-completed .area-actions[b-9g247uw5ri] {
            flex-direction: row;
            flex-wrap: wrap;
            align-items: stretch;
            gap: 0.5rem;
            margin-top: 0.65rem;
        }

        .area-card-completed .area-action-button[b-9g247uw5ri] {
            flex: 1 1 130px;
            width: auto;
            min-height: 44px;
            font-size: 0.79rem;
            white-space: normal;
        }
}

/* =========================================================
   Kleine Smartphones
   ========================================================= */

@media (max-width: 430px) {

    .area-card-top[b-9g247uw5ri] {
        flex-wrap: wrap;
    }

    .area-schedule-badges[b-9g247uw5ri] {
        gap: 0.3rem;
    }

    .area-schedule-badge[b-9g247uw5ri] {
        min-height: 28px;
        padding: 0.3rem 0.55rem;
    }

    .area-task-preview-list li[b-9g247uw5ri] {
        padding: 0.65rem;
    }

    .area-card-completed .area-card-content[b-9g247uw5ri] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.7rem;
    }

    .area-card-completed .area-actions[b-9g247uw5ri] {
        flex-direction: column;
    }

    .area-card-completed .area-action-button[b-9g247uw5ri] {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* =========================================================
   Tastaturbedienung
   ========================================================= */

.object-areas-page a:focus-visible[b-9g247uw5ri],
.object-areas-page button:focus-visible[b-9g247uw5ri] {
    outline: 3px solid #80b8ff;
    outline-offset: 3px;
}

/* =========================================================
   Reduzierte Animationen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .area-card[b-9g247uw5ri],
    .area-action-button[b-9g247uw5ri],
    .area-status-tab[b-9g247uw5ri],
    .object-areas-button[b-9g247uw5ri],
    .area-task-toggle[b-9g247uw5ri],
    .area-task-manage-link[b-9g247uw5ri] {
        transition: none;
    }
}
/* /Components/Pages/Admin/Objects/ObjectQrCodes.razor.rz.scp.css */

/* =========================================================
   CleanDation – QR-Code-Sammelübersicht
   ========================================================= */

.object-qr-page[b-ilmwgxyiqn] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
    color: #172033;
}

/* =========================================================
   Seitenkopf
   ========================================================= */

.object-qr-header[b-ilmwgxyiqn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.object-qr-eyebrow[b-ilmwgxyiqn] {
    margin-bottom: 0.4rem;
    color: #0d6efd;
    font-size: 0.77rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.object-qr-header h1[b-ilmwgxyiqn] {
    margin: 0;
    color: #172033;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 750;
    line-height: 1.2;
}

.object-qr-header p[b-ilmwgxyiqn] {
    margin: 0.55rem 0 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
}

    .object-qr-header p strong[b-ilmwgxyiqn] {
        color: #334155;
    }

.object-qr-separator[b-ilmwgxyiqn] {
    margin: 0 0.5rem;
    color: #94a3b8;
}

/* =========================================================
   Buttons
   ========================================================= */

.object-qr-button[b-ilmwgxyiqn] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    min-height: 46px;
    padding: 0.7rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .object-qr-button:hover[b-ilmwgxyiqn] {
        text-decoration: none;
    }

.object-qr-button-primary[b-ilmwgxyiqn] {
    color: #ffffff;
    background: #0d6efd;
    border-color: #0d6efd;
}

    .object-qr-button-primary:hover[b-ilmwgxyiqn] {
        color: #ffffff;
        background: #0957c3;
    }

.object-qr-button-secondary[b-ilmwgxyiqn] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .object-qr-button-secondary:hover[b-ilmwgxyiqn] {
        color: #ffffff;
        background: #475569;
    }

.object-qr-button-outline[b-ilmwgxyiqn] {
    color: #198754;
    background: #ffffff;
    border-color: #198754;
}

    .object-qr-button-outline:hover[b-ilmwgxyiqn] {
        color: #ffffff;
        background: #198754;
    }

/* =========================================================
   Übersicht
   ========================================================= */

.object-qr-overview[b-ilmwgxyiqn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}

    .object-qr-overview h2[b-ilmwgxyiqn] {
        margin: 0;
        color: #172033;
        font-size: 1.4rem;
        font-weight: 750;
    }

    .object-qr-overview p[b-ilmwgxyiqn] {
        margin: 0.45rem 0 0;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.55;
    }

.object-qr-count[b-ilmwgxyiqn] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-shrink: 0;
}

    .object-qr-count strong[b-ilmwgxyiqn] {
        color: #0d6efd;
        font-size: 1.5rem;
        font-weight: 850;
    }

    .object-qr-count span[b-ilmwgxyiqn] {
        color: #64748b;
        font-size: 0.85rem;
    }

/* =========================================================
   Hinweis für einmalige Reinigungen
   ========================================================= */

.object-qr-information[b-ilmwgxyiqn] {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.3rem;
    padding: 1rem 1.2rem;
    background: linear-gradient( 105deg, #ffffff 0%, #eaf6ff 40%, #c9e9ff 100% );
    border: 1px solid #b2d7fa;
    border-radius: 12px;
}

.object-qr-information-icon[b-ilmwgxyiqn] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    color: #ffffff;
    background: #0d6efd;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 800;
}

.object-qr-information strong[b-ilmwgxyiqn] {
    display: block;
    color: #172033;
    font-size: 0.94rem;
    font-weight: 800;
}

.object-qr-information p[b-ilmwgxyiqn] {
    margin: 0.35rem 0 0;
    color: #475569;
    font-size: 0.87rem;
    line-height: 1.55;
}

/* =========================================================
   Blaues Sammelkarten-Layout
   ========================================================= */

.object-qr-collection[b-ilmwgxyiqn] {
    padding: 1.3rem;
    background: linear-gradient( 115deg, #ffffff 0%, #f0f6ff 25%, #ddeaff 65%, #cbdfff 100% );
    border: 1px solid #c4d8f8;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.055);
}

.object-qr-grid[b-ilmwgxyiqn] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.25rem;
}

.object-qr-collection-single[b-ilmwgxyiqn] {
    padding: 1.2rem;
}

.object-qr-grid-single[b-ilmwgxyiqn] {
    grid-template-columns: minmax(0, 1fr);
}

/* =========================================================
   QR-Druckkarten
   Bleiben bewusst weiß für hohe Scanqualität
   ========================================================= */

.object-qr-card[b-ilmwgxyiqn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 2rem 1.25rem 1.4rem;
    background: #ffffff;
    border: 1px solid #d3ddec;
    border-radius: 13px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    text-align: center;
    break-inside: avoid;
}

.object-qr-brand[b-ilmwgxyiqn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 65px;
    margin-bottom: 1.15rem;
}

.object-qr-company-logo[b-ilmwgxyiqn] {
    display: block;
    max-width: 185px;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.object-qr-brand > span[b-ilmwgxyiqn] {
    color: #0d6efd;
    font-size: 1.5rem;
    font-weight: 850;
    letter-spacing: -0.04em;
}

.object-qr-customer[b-ilmwgxyiqn] {
    color: #172033;
    font-size: 0.95rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.object-qr-object[b-ilmwgxyiqn] {
    margin-top: 0.35rem;
    color: #64748b;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.object-qr-area[b-ilmwgxyiqn] {
    margin: 1.2rem 0 1.4rem;
    color: #172033;
    font-size: 1.3rem;
    font-weight: 850;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.object-qr-image-container[b-ilmwgxyiqn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5rem;
    background: #ffffff;
}

.object-qr-image[b-ilmwgxyiqn] {
    display: block;
    width: 100%;
    max-width: 230px;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
}

.object-qr-instruction[b-ilmwgxyiqn] {
    margin-top: 1.35rem;
    color: #475569;
    font-size: 0.87rem;
    font-weight: 650;
    line-height: 1.5;
}

.object-qr-url[b-ilmwgxyiqn] {
    width: 100%;
    margin-top: 0.65rem;
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* =========================================================
   Aktionen der normalen Übersicht
   ========================================================= */

.normal-qr-actions[b-ilmwgxyiqn] {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.3rem;
}

/* =========================================================
   Einrichtungsmodus
   ========================================================= */

.setup-qr-layout[b-ilmwgxyiqn] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
    gap: 1.5rem;
}

.setup-qr-main[b-ilmwgxyiqn] {
    min-width: 0;
}

/* Erfolgsmeldung */

.setup-complete-card[b-ilmwgxyiqn] {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.2rem;
    padding: 1.15rem 1.3rem;
    background: linear-gradient( 115deg, #ffffff 0%, #edfaf2 30%, #dcf2e4 65%, #c6e8d2 100% );
    border: 1px solid #bde2cb;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(15,23,42,0.04);
}

.setup-complete-icon[b-ilmwgxyiqn] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    color: #ffffff;
    background: #198754;
    border-radius: 12px;
    font-size: 1.4rem;
    font-weight: 800;
}

.setup-complete-title[b-ilmwgxyiqn] {
    display: block;
    color: #172033;
    font-size: 1rem;
    font-weight: 800;
}

.setup-complete-text[b-ilmwgxyiqn] {
    margin: 0.4rem 0 0;
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.6;
}

.setup-qr-print-action[b-ilmwgxyiqn] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.2rem;
}

/* Nächste Schritte */

.setup-next-card[b-ilmwgxyiqn] {
    padding: 1.5rem;
    background: linear-gradient( 115deg, #ffffff 0%, #f2f8ff 30%, #e4efff 65%, #d3e4ff 100% );
    border: 1px solid #c9dcf7;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15,23,42,0.055);
}

    .setup-next-card h2[b-ilmwgxyiqn] {
        margin: 0;
        color: #172033;
        font-size: 1.3rem;
        font-weight: 750;
    }

    .setup-next-card p[b-ilmwgxyiqn] {
        margin: 0.55rem 0 1.2rem;
        color: #53657d;
        font-size: 0.9rem;
        line-height: 1.6;
    }

.setup-next-actions[b-ilmwgxyiqn] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

    .setup-next-actions .object-qr-button[b-ilmwgxyiqn] {
        width: 100%;
    }

/* =========================================================
   Drucküberschrift
   ========================================================= */

.qr-print-title[b-ilmwgxyiqn] {
    display: none;
}

.qr-print-brand[b-ilmwgxyiqn] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.qr-print-logo[b-ilmwgxyiqn] {
    display: block;
    max-width: 150px;
    max-height: 55px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* =========================================================
   Leerzustand und Laden
   ========================================================= */

.object-qr-loading[b-ilmwgxyiqn] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

.object-qr-empty[b-ilmwgxyiqn] {
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
}

    .object-qr-empty h2[b-ilmwgxyiqn] {
        margin: 0;
        color: #172033;
        font-size: 1.2rem;
        font-weight: 800;
    }

    .object-qr-empty p[b-ilmwgxyiqn] {
        margin: 0.55rem 0 1rem;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.6;
    }

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {

    .setup-qr-layout[b-ilmwgxyiqn] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .object-qr-grid[b-ilmwgxyiqn] {
        gap: 1rem;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .object-qr-page[b-ilmwgxyiqn] {
        padding-bottom: 1rem;
    }

    .object-qr-header[b-ilmwgxyiqn] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

        .object-qr-header h1[b-ilmwgxyiqn] {
            font-size: 2rem;
        }

    .object-qr-overview[b-ilmwgxyiqn] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.7rem;
    }

    .object-qr-collection[b-ilmwgxyiqn] {
        padding: 0.8rem;
        border-radius: 14px;
    }

    .object-qr-grid[b-ilmwgxyiqn] {
        grid-template-columns: 1fr;
    }

    .object-qr-card[b-ilmwgxyiqn] {
        padding: 1.5rem 0.85rem;
    }

    .object-qr-image[b-ilmwgxyiqn] {
        max-width: 240px;
    }

    .object-qr-information[b-ilmwgxyiqn] {
        padding: 0.9rem;
    }

    .setup-complete-card[b-ilmwgxyiqn] {
        padding: 1rem;
    }

    .setup-next-card[b-ilmwgxyiqn] {
        padding: 1rem;
    }

    .normal-qr-actions[b-ilmwgxyiqn],
    .setup-qr-print-action[b-ilmwgxyiqn] {
        flex-direction: column;
    }

        .normal-qr-actions .object-qr-button[b-ilmwgxyiqn],
        .setup-qr-print-action .object-qr-button[b-ilmwgxyiqn],
        .object-qr-header .object-qr-button[b-ilmwgxyiqn] {
            width: 100%;
        }
}

/* =========================================================
   Druckansicht
   Weiße, gut scanbare QR-Codes
   ========================================================= */

@media print {

    @page {
        size: A4 portrait;
        margin: 12mm;
    }

    .object-qr-page[b-ilmwgxyiqn] {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        color: #000000;
        background: #ffffff !important;
    }

    .no-print[b-ilmwgxyiqn] {
        display: none !important;
    }

    .object-qr-overview[b-ilmwgxyiqn],
    .object-qr-header[b-ilmwgxyiqn],
    .object-qr-information[b-ilmwgxyiqn],
    .normal-qr-actions[b-ilmwgxyiqn],
    .setup-complete-card[b-ilmwgxyiqn],
    .setup-next-card[b-ilmwgxyiqn],
    .setup-qr-print-action[b-ilmwgxyiqn] {
        display: none !important;
    }

    .setup-qr-layout[b-ilmwgxyiqn] {
        display: block;
    }

    .setup-qr-main[b-ilmwgxyiqn] {
        width: 100%;
    }

    .object-qr-collection[b-ilmwgxyiqn] {
        margin: 0;
        padding: 0;
        background: #ffffff !important;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .object-qr-grid[b-ilmwgxyiqn] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8mm;
        align-items: start;
    }

    .object-qr-grid-single[b-ilmwgxyiqn] {
        display: flex;
        justify-content: center;
    }

    .object-qr-card[b-ilmwgxyiqn] {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 8mm 5mm;
        background: #ffffff !important;
        border: 1px solid #d1d5db;
        border-radius: 0;
        box-shadow: none;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .object-qr-grid-single .object-qr-card[b-ilmwgxyiqn] {
        max-width: 120mm;
    }

    .object-qr-brand[b-ilmwgxyiqn] {
        min-height: 0;
        margin-bottom: 5mm;
    }

    .object-qr-company-logo[b-ilmwgxyiqn] {
        max-width: 45mm;
        max-height: 16mm;
    }

    .object-qr-customer[b-ilmwgxyiqn] {
        color: #000000;
        font-size: 10pt;
    }

    .object-qr-object[b-ilmwgxyiqn] {
        color: #444444;
        font-size: 9pt;
    }

    .object-qr-area[b-ilmwgxyiqn] {
        margin: 5mm 0;
        color: #000000;
        font-size: 14pt;
    }

    .object-qr-image-container[b-ilmwgxyiqn] {
        padding: 0;
        background: #ffffff !important;
    }

    .object-qr-image[b-ilmwgxyiqn] {
        width: 48mm;
        max-width: 48mm;
        height: 48mm;
        object-fit: contain;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .object-qr-instruction[b-ilmwgxyiqn] {
        margin-top: 5mm;
        color: #333333;
        font-size: 8pt;
    }

    .object-qr-url[b-ilmwgxyiqn] {
        display: none !important;
    }
}
/* /Components/Pages/Admin/Reports/Reports.razor.rz.scp.css */

/* =========================================================
   CleanDation – Berichte
   ========================================================= */

.reports-page[b-7fexitdsqr] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* =========================================================
   Seitenüberschrift
   ========================================================= */

.reports-header[b-7fexitdsqr] {
    margin-bottom: 1.6rem;
}

    .reports-header h1[b-7fexitdsqr] {
        margin: 0;
        color: #172033;
        font-size: clamp(2rem, 3vw, 2.6rem);
        font-weight: 750;
        line-height: 1.15;
    }

    .reports-header p[b-7fexitdsqr] {
        margin: 0.5rem 0 0;
        color: #64748b;
        font-size: 1rem;
        line-height: 1.5;
    }

.reports-loading[b-7fexitdsqr] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

/* =========================================================
   Zweispaltiger Arbeitsbereich
   ========================================================= */

.reports-workspace[b-7fexitdsqr] {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: start;
    gap: 1.5rem;
}

.reports-settings-panel[b-7fexitdsqr],
.reports-downloads-panel[b-7fexitdsqr] {
    min-width: 0;
    padding: 1.4rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.045);
}

/* =========================================================
   Panelüberschriften
   ========================================================= */

.reports-eyebrow[b-7fexitdsqr] {
    margin-bottom: 0.35rem;
    color: #0d6efd;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.reports-eyebrow-success[b-7fexitdsqr] {
    color: #198754;
}

.reports-panel-heading[b-7fexitdsqr] {
    margin-bottom: 1.35rem;
}

    .reports-panel-heading h2[b-7fexitdsqr] {
        margin: 0;
        color: #172033;
        font-size: 1.3rem;
        font-weight: 750;
    }

    .reports-panel-heading p[b-7fexitdsqr] {
        margin: 0.4rem 0 0;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.5;
    }

/* =========================================================
   Formularfelder
   ========================================================= */

.reports-form-fields[b-7fexitdsqr] {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.reports-field[b-7fexitdsqr] {
    min-width: 0;
}

    .reports-field > label[b-7fexitdsqr] {
        display: block;
        margin-bottom: 0.5rem;
        color: #334155;
        font-size: 0.9rem;
        font-weight: 750;
    }

    .reports-field > .form-control[b-7fexitdsqr],
    .reports-field > .form-select[b-7fexitdsqr],
    .customer-search-wrapper .form-control[b-7fexitdsqr] {
        width: 100%;
        min-height: 47px;
        padding: 0.65rem 0.85rem;
        color: #172033;
        background-color: #ffffff;
        border: 1px solid #cdd8e6;
        border-radius: 10px;
        font-size: 0.94rem;
    }

    .reports-field .form-control:focus[b-7fexitdsqr],
    .reports-field .form-select:focus[b-7fexitdsqr] {
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
    }

.reports-field-help[b-7fexitdsqr] {
    margin-top: 0.4rem;
    color: #718096;
    font-size: 0.82rem;
    line-height: 1.45;
}

.reports-date-grid[b-7fexitdsqr] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

    .reports-date-grid .form-control[b-7fexitdsqr] {
        width: 100%;
        min-width: 0;
        min-height: 47px;
        padding: 0.65rem 0.85rem;
        border: 1px solid #cdd8e6;
        border-radius: 10px;
        font-size: 0.94rem;
    }

/* =========================================================
   Kundensuche
   ========================================================= */

.customer-search-wrapper[b-7fexitdsqr] {
    position: relative;
    width: 100%;
}

.customer-search-dropdown[b-7fexitdsqr] {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 0.35rem);
    right: 0;
    left: 0;
    max-height: 340px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #cdd8e6;
    border-radius: 11px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15);
}

.customer-search-item[b-7fexitdsqr] {
    display: block;
    width: 100%;
    min-height: 47px;
    padding: 0.75rem 0.9rem;
    color: #172033;
    text-align: left;
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid #edf1f5;
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 650;
    cursor: pointer;
}

    .customer-search-item:last-of-type[b-7fexitdsqr] {
        border-bottom: 0;
    }

    .customer-search-item:hover[b-7fexitdsqr],
    .customer-search-item:focus[b-7fexitdsqr] {
        color: #0d6efd;
        background: #edf4ff;
        outline: none;
    }

.customer-search-empty[b-7fexitdsqr] {
    padding: 0.95rem;
    color: #64748b;
    font-size: 0.9rem;
}

.customer-search-more[b-7fexitdsqr] {
    padding: 0.8rem 0.9rem;
    color: #64748b;
    background: #f8fafc;
    border-top: 1px solid #e5eaf0;
    font-size: 0.83rem;
    line-height: 1.5;
}

/* =========================================================
   Ausgewählter Kunde
   ========================================================= */

.selected-customer[b-7fexitdsqr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient( 110deg, #ffffff 0%, #f0f6ff 40%, #dceaff 100% );
    border: 1px solid #c8dbf7;
    border-radius: 12px;
}

.selected-customer-content[b-7fexitdsqr] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.selected-customer-label[b-7fexitdsqr] {
    color: #526f98;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.selected-customer-name[b-7fexitdsqr] {
    margin-top: 0.3rem;
    color: #172033;
    font-size: 1rem;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.reports-change-button[b-7fexitdsqr] {
    flex-shrink: 0;
    min-height: 40px;
    padding: 0.5rem 0.8rem;
    color: #0d6efd;
    background: #ffffff;
    border: 1px solid #0d6efd;
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 750;
    cursor: pointer;
}

    .reports-change-button:hover[b-7fexitdsqr] {
        color: #ffffff;
        background: #0d6efd;
    }

/* =========================================================
   Bereichsauswahl
   ========================================================= */

.reports-areas-box[b-7fexitdsqr] {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 12px;
}

.reports-area-all[b-7fexitdsqr],
.reports-area-item[b-7fexitdsqr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
}

.reports-area-all[b-7fexitdsqr] {
    background: linear-gradient( 110deg, #f8fbff 0%, #e6f0ff 100% );
    border-bottom: 1px solid #dce5ef;
}

    .reports-area-all label[b-7fexitdsqr] {
        color: #243044;
        font-size: 0.9rem;
        font-weight: 750;
        cursor: pointer;
    }

.reports-area-count[b-7fexitdsqr] {
    margin-left: auto;
    padding: 0.2rem 0.5rem;
    color: #0d6efd;
    background: #ffffff;
    border: 1px solid #caddf7;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
}

.reports-area-list[b-7fexitdsqr] {
    max-height: 260px;
    overflow-y: auto;
}

.reports-area-item[b-7fexitdsqr] {
    min-height: 48px;
    border-bottom: 1px solid #edf1f5;
}

    .reports-area-item:last-child[b-7fexitdsqr] {
        border-bottom: 0;
    }

    .reports-area-item:hover[b-7fexitdsqr] {
        background: #f8fbff;
    }

    .reports-area-item label[b-7fexitdsqr] {
        color: #334155;
        font-size: 0.9rem;
        cursor: pointer;
    }

.reports-areas-box .form-check-input[b-7fexitdsqr] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

.reports-field-notice[b-7fexitdsqr] {
    padding: 0.85rem 1rem;
    color: #53657d;
    background: #f8fafc;
    border: 1px solid #dce5ef;
    border-radius: 10px;
    font-size: 0.87rem;
}

/* =========================================================
   Validierung
   ========================================================= */

.reports-error[b-7fexitdsqr] {
    margin-top: 1.2rem;
    padding: 0.9rem 1rem;
    color: #a32736;
    background: #fff0f2;
    border: 1px solid #f0c4cc;
    border-radius: 10px;
    font-size: 0.88rem;
    line-height: 1.5;
}

/* =========================================================
   Downloadkarten
   ========================================================= */

.reports-download-options[b-7fexitdsqr] {
    display: grid;
    gap: 1rem;
}

.report-download-option[b-7fexitdsqr] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-height: 238px;
    padding: 1.25rem;
    border: 1px solid #dce5ef;
    border-radius: 14px;
}

.report-download-combined[b-7fexitdsqr] {
    background: linear-gradient( 115deg, #ffffff 0%, #f2faf5 30%, #e1f2e7 65%, #c9e9d6 100% );
    border-color: #cce7d6;
}

.report-download-individual[b-7fexitdsqr] {
    background: linear-gradient( 115deg, #ffffff 0%, #f1fbf9 30%, #dff5f0 65%, #bfece3 100% );
    border-color: #c3e5df;
}

.report-download-type[b-7fexitdsqr] {
    color: #198754;
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.07em;
}

.report-download-type-teal[b-7fexitdsqr] {
    color: #0b887e;
}

.report-download-title[b-7fexitdsqr] {
    margin: 0;
    color: #172033;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.3;
}

.report-download-description[b-7fexitdsqr] {
    margin: 0;
    color: #53657d;
    font-size: 0.92rem;
    line-height: 1.55;
}

.report-download-footer[b-7fexitdsqr] {
    margin-top: auto;
    padding-top: 0.5rem;
}

.report-download-button[b-7fexitdsqr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 0.9rem;
    color: #ffffff;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.87rem;
    font-weight: 800;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

    .report-download-button span[b-7fexitdsqr] {
        flex-shrink: 0;
        font-size: 1.15rem;
    }

.report-download-button-success[b-7fexitdsqr] {
    background: #198754;
    border-color: #198754;
}

    .report-download-button-success:hover:not(:disabled)[b-7fexitdsqr] {
        background: #136c43;
        box-shadow: 0 5px 16px rgba(25, 135, 84, 0.18);
    }

.report-download-button-teal[b-7fexitdsqr] {
    background: #0f9f91;
    border-color: #0f9f91;
}

    .report-download-button-teal:hover:not(:disabled)[b-7fexitdsqr] {
        background: #0b8276;
        box-shadow: 0 5px 16px rgba(15, 159, 145, 0.18);
    }

.report-download-button:disabled[b-7fexitdsqr] {
    color: #718096;
    background: #edf1f5;
    border-color: #dce5ef;
    box-shadow: none;
    cursor: not-allowed;
}

.report-download-hint[b-7fexitdsqr] {
    padding: 0.8rem 0.9rem;
    color: #526579;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(175, 210, 205, 0.8);
    border-radius: 9px;
    font-size: 0.83rem;
    line-height: 1.45;
}

/* =========================================================
   Keine Kunden
   ========================================================= */

.reports-empty[b-7fexitdsqr] {
    padding: 1.5rem;
    background: linear-gradient( 115deg, #ffffff 0%, #f4f8ff 50%, #e1ecff 100% );
    border: 1px solid #cddff9;
    border-radius: 14px;
}

    .reports-empty strong[b-7fexitdsqr] {
        display: block;
        color: #172033;
        font-size: 1.05rem;
        font-weight: 800;
    }

    .reports-empty p[b-7fexitdsqr] {
        margin: 0.5rem 0 0.9rem;
        color: #53657d;
        font-size: 0.92rem;
    }

.reports-empty-link[b-7fexitdsqr] {
    color: #0d6efd;
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
}

    .reports-empty-link:hover[b-7fexitdsqr] {
        text-decoration: underline;
    }

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {
    .reports-workspace[b-7fexitdsqr] {
        grid-template-columns: 1fr;
    }

    .reports-download-options[b-7fexitdsqr] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {
    .reports-page[b-7fexitdsqr] {
        padding-bottom: 1rem;
    }

    .reports-header h1[b-7fexitdsqr] {
        font-size: 2rem;
    }

    .reports-workspace[b-7fexitdsqr] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .reports-settings-panel[b-7fexitdsqr],
    .reports-downloads-panel[b-7fexitdsqr] {
        padding: 1rem;
    }

    .reports-panel-heading h2[b-7fexitdsqr] {
        font-size: 1.18rem;
    }

    .reports-date-grid[b-7fexitdsqr] {
        grid-template-columns: 1fr;
    }

    .reports-download-options[b-7fexitdsqr] {
        grid-template-columns: 1fr;
    }

    .report-download-option[b-7fexitdsqr] {
        min-height: 0;
        padding: 1rem;
    }

    .report-download-button[b-7fexitdsqr] {
        min-height: 50px;
    }

    .customer-search-dropdown[b-7fexitdsqr] {
        max-height: 300px;
    }

    .customer-search-item[b-7fexitdsqr] {
        min-height: 50px;
    }

    .selected-customer[b-7fexitdsqr] {
        align-items: stretch;
        flex-direction: column;
    }

    .reports-change-button[b-7fexitdsqr] {
        width: 100%;
        min-height: 44px;
    }
}

/* =========================================================
   Kleine Smartphones
   ========================================================= */

@media (max-width: 430px) {
    .report-download-title[b-7fexitdsqr] {
        font-size: 1.1rem;
    }

    .report-download-button[b-7fexitdsqr] {
        font-size: 0.82rem;
    }

    .reports-area-all[b-7fexitdsqr],
    .reports-area-item[b-7fexitdsqr] {
        padding: 0.8rem;
    }
}
/* /Components/Pages/Admin/Users/UserCreate.razor.rz.scp.css */

/* =========================================================
   CleanDation – Neuen Admin-Benutzer anlegen
   ========================================================= */

.user-create-page[b-dxto3a3b5l] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* =========================================================
   Seitenkopf
   ========================================================= */

.user-create-header[b-dxto3a3b5l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

    .user-create-header h1[b-dxto3a3b5l] {
        margin: 0;
        color: #172033;
        font-size: clamp(2rem, 3vw, 2.6rem);
        font-weight: 750;
        line-height: 1.15;
    }

    .user-create-header p[b-dxto3a3b5l] {
        margin: 0.5rem 0 0;
        color: #64748b;
        font-size: 1rem;
        line-height: 1.5;
    }

.user-create-back[b-dxto3a3b5l] {
    flex-shrink: 0;
    color: #0d6efd;
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
}

    .user-create-back:hover[b-dxto3a3b5l] {
        text-decoration: underline;
    }

/* =========================================================
   Berechtigungshinweis
   ========================================================= */

.user-create-info[b-dxto3a3b5l] {
    margin-bottom: 1.5rem;
    padding: 1.1rem 1.3rem;
    background: linear-gradient( 110deg, #ffffff 0%, #ecfaf8 35%, #d2f4ee 70%, #bcece3 100% );
    border: 1px solid #9edbd0;
    border-left: 4px solid #0f9f91;
    border-radius: 13px;
}

.user-create-info-title[b-dxto3a3b5l] {
    color: #087f73;
    font-size: 0.95rem;
    font-weight: 800;
}

.user-create-info p[b-dxto3a3b5l] {
    margin: 0.4rem 0 0;
    color: #395c60;
    font-size: 0.91rem;
    line-height: 1.55;
}

/* =========================================================
   Layout
   ========================================================= */

.user-create-workspace[b-dxto3a3b5l] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
    gap: 1.5rem;
}

.user-create-card[b-dxto3a3b5l] {
    min-width: 0;
    padding: 1.4rem;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.05);
}

/* Kontodaten – Blau */

.user-create-details[b-dxto3a3b5l] {
    background: linear-gradient( 115deg, #ffffff 0%, #f3f7ff 35%, #e3edff 70%, #d3e2ff 100% );
    border-color: #ccdcf6;
}

/* Startpasswort – Grün */

.user-create-access[b-dxto3a3b5l] {
    background: linear-gradient( 115deg, #ffffff 0%, #f2faf5 30%, #e1f2e7 65%, #c9e9d6 100% );
    border-color: #cce7d6;
}

/* =========================================================
   Abschnittsüberschriften
   ========================================================= */

.user-create-section-header[b-dxto3a3b5l] {
    margin-bottom: 1.4rem;
}

.user-create-eyebrow[b-dxto3a3b5l] {
    margin-bottom: 0.35rem;
    color: #0d6efd;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.user-create-eyebrow-green[b-dxto3a3b5l] {
    color: #198754;
}

.user-create-section-header h2[b-dxto3a3b5l] {
    margin: 0;
    color: #172033;
    font-size: 1.3rem;
    font-weight: 750;
}

.user-create-section-header p[b-dxto3a3b5l] {
    margin: 0.4rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.55;
}

/* =========================================================
   Formularfelder
   ========================================================= */

.user-create-fields[b-dxto3a3b5l] {
    display: grid;
    gap: 1.2rem;
}

.user-create-field[b-dxto3a3b5l] {
    min-width: 0;
}

    .user-create-field label[b-dxto3a3b5l] {
        display: block;
        margin-bottom: 0.5rem;
        color: #334155;
        font-size: 0.9rem;
        font-weight: 750;
    }

.user-create-optional[b-dxto3a3b5l] {
    color: #718096;
    font-weight: 500;
}

.user-create-field .form-control[b-dxto3a3b5l] {
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 0.85rem;
    color: #172033;
    background: #ffffff;
    border: 1px solid #cdd8e6;
    border-radius: 10px;
    font-size: 0.95rem;
}

    .user-create-field .form-control:focus[b-dxto3a3b5l] {
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
    }

.user-create-validation-summary[b-dxto3a3b5l] {
    margin-bottom: 1.3rem;
    color: #b42335;
    font-size: 0.9rem;
}

.user-create-validation[b-dxto3a3b5l] {
    display: block;
    margin-top: 0.4rem;
    color: #b42335;
    font-size: 0.83rem;
}

/* =========================================================
   Passwort
   ========================================================= */

.user-create-password-row[b-dxto3a3b5l] {
    display: flex;
    align-items: stretch;
    width: 100%;
}

    .user-create-password-row .form-control[b-dxto3a3b5l] {
        min-width: 0;
        border-radius: 10px 0 0 10px;
    }

    .user-create-password-row .user-create-button[b-dxto3a3b5l] {
        flex-shrink: 0;
        border-radius: 0 10px 10px 0;
    }

.user-create-password-info[b-dxto3a3b5l] {
    margin-top: 1.25rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid #cce7d6;
    border-radius: 11px;
}

    .user-create-password-info strong[b-dxto3a3b5l] {
        color: #198754;
        font-size: 0.92rem;
        font-weight: 800;
    }

    .user-create-password-info p[b-dxto3a3b5l] {
        margin: 0.35rem 0 0;
        color: #53657d;
        font-size: 0.86rem;
        line-height: 1.55;
    }

.user-create-access-note[b-dxto3a3b5l] {
    margin-top: 0.9rem;
    padding: 0.95rem 1rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid #cce7d6;
    border-radius: 11px;
}

    .user-create-access-note strong[b-dxto3a3b5l] {
        color: #198754;
        font-size: 0.9rem;
        font-weight: 800;
    }

    .user-create-access-note p[b-dxto3a3b5l] {
        margin: 0.3rem 0 0;
        color: #53657d;
        font-size: 0.84rem;
        line-height: 1.55;
    }

/* =========================================================
   Buttons
   ========================================================= */

.user-create-button[b-dxto3a3b5l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    min-height: 46px;
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .user-create-button:disabled[b-dxto3a3b5l] {
        opacity: 0.55;
        cursor: not-allowed;
    }

    .user-create-button span[b-dxto3a3b5l] {
        font-size: 1.1rem;
        font-weight: 800;
    }

.user-create-button-primary[b-dxto3a3b5l] {
    color: #ffffff;
    background: #0d6efd;
    border-color: #0d6efd;
}

    .user-create-button-primary:hover:not(:disabled)[b-dxto3a3b5l] {
        color: #ffffff;
        background: #0957c3;
    }

.user-create-button-secondary[b-dxto3a3b5l] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .user-create-button-secondary:hover[b-dxto3a3b5l] {
        color: #ffffff;
        background: #475569;
    }

.user-create-button-outline[b-dxto3a3b5l] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .user-create-button-outline:hover[b-dxto3a3b5l] {
        color: #0d6efd;
        background: #f5f9ff;
        border-color: #0d6efd;
    }

.user-create-button-generate[b-dxto3a3b5l] {
    margin-top: 0.9rem;
    color: #198754;
    background: #ffffff;
    border-color: #198754;
}

    .user-create-button-generate:hover[b-dxto3a3b5l] {
        color: #ffffff;
        background: #198754;
    }

.user-create-actions[b-dxto3a3b5l] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* =========================================================
   Erfolgreich angelegter Benutzer
   ========================================================= */

.user-created-card[b-dxto3a3b5l] {
    width: 100%;
    max-width: 780px;
    padding: 1.6rem;
    background: linear-gradient( 115deg, #ffffff 0%, #f2faf5 35%, #e1f2e7 70%, #c9e9d6 100% );
    border: 1px solid #cce7d6;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.06);
}

.user-created-icon[b-dxto3a3b5l] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1rem;
    color: #ffffff;
    background: #198754;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 800;
}

.user-created-eyebrow[b-dxto3a3b5l] {
    margin-bottom: 0.35rem;
    color: #198754;
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.user-created-card h2[b-dxto3a3b5l] {
    margin: 0;
    color: #172033;
    font-size: 1.5rem;
    font-weight: 800;
}

.user-created-intro[b-dxto3a3b5l] {
    margin: 0.65rem 0 0;
    color: #526579;
    font-size: 0.94rem;
    line-height: 1.55;
}

/* Zugangsdaten */

.user-created-credentials[b-dxto3a3b5l] {
    display: grid;
    gap: 1rem;
    margin: 1.3rem 0;
    padding: 1.2rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #cce7d6;
    border-radius: 12px;
}

.user-created-credential[b-dxto3a3b5l] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

    .user-created-credential span[b-dxto3a3b5l] {
        color: #64748b;
        font-size: 0.75rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.045em;
    }

    .user-created-credential strong[b-dxto3a3b5l] {
        color: #172033;
        font-size: 0.98rem;
        overflow-wrap: anywhere;
    }

.user-created-password[b-dxto3a3b5l] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 1.2rem !important;
    letter-spacing: 0.035em;
}

/* Warnung zum Passwort */

.user-created-warning[b-dxto3a3b5l] {
    padding: 1rem;
    background: #fff8e9;
    border: 1px solid #ead8af;
    border-radius: 11px;
}

    .user-created-warning strong[b-dxto3a3b5l] {
        color: #986100;
        font-size: 0.9rem;
        font-weight: 800;
    }

    .user-created-warning p[b-dxto3a3b5l] {
        margin: 0.4rem 0 0;
        color: #765b35;
        font-size: 0.87rem;
        line-height: 1.55;
    }

.user-created-actions[b-dxto3a3b5l] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.4rem;
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {
    .user-create-workspace[b-dxto3a3b5l] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {
    .user-create-page[b-dxto3a3b5l] {
        padding-bottom: 1rem;
    }

    .user-create-header[b-dxto3a3b5l] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.9rem;
    }

        .user-create-header h1[b-dxto3a3b5l] {
            font-size: 2rem;
        }

    .user-create-info[b-dxto3a3b5l] {
        padding: 1rem;
    }

    .user-create-card[b-dxto3a3b5l],
    .user-created-card[b-dxto3a3b5l] {
        padding: 1rem;
        border-radius: 14px;
    }

    .user-create-section-header h2[b-dxto3a3b5l] {
        font-size: 1.18rem;
    }

    .user-create-actions[b-dxto3a3b5l],
    .user-created-actions[b-dxto3a3b5l] {
        flex-direction: column;
        align-items: stretch;
    }

        .user-create-actions .user-create-button[b-dxto3a3b5l],
        .user-created-actions .user-create-button[b-dxto3a3b5l] {
            width: 100%;
            min-height: 48px;
        }

    .user-created-card h2[b-dxto3a3b5l] {
        font-size: 1.25rem;
    }
}

/* =========================================================
   Sehr kleine Smartphones
   ========================================================= */

@media (max-width: 430px) {
    .user-create-password-row .user-create-button[b-dxto3a3b5l] {
        padding: 0.6rem 0.7rem;
        font-size: 0.82rem;
    }

    .user-create-button-generate[b-dxto3a3b5l] {
        width: 100%;
    }

    .user-created-password[b-dxto3a3b5l] {
        font-size: 1.05rem !important;
    }
}
/* /Components/Pages/Admin/Users/UserEdit.razor.rz.scp.css */

/* =========================================================
   CleanDation – Admin-Benutzer bearbeiten
   ========================================================= */

.user-edit-page[b-o75hej4vll] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* Seitenkopf */

.user-edit-header[b-o75hej4vll] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.6rem;
}

    .user-edit-header h1[b-o75hej4vll] {
        margin: 0;
        color: #172033;
        font-size: clamp(2rem, 3vw, 2.6rem);
        font-weight: 750;
        line-height: 1.15;
    }

    .user-edit-header p[b-o75hej4vll] {
        margin: 0.5rem 0 0;
        color: #64748b;
        font-size: 1rem;
        line-height: 1.5;
    }

.user-edit-back[b-o75hej4vll] {
    flex-shrink: 0;
    color: #0d6efd;
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
}

    .user-edit-back:hover[b-o75hej4vll] {
        text-decoration: underline;
    }

.user-edit-loading[b-o75hej4vll] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

/* =========================================================
   Layout
   ========================================================= */

.user-edit-workspace[b-o75hej4vll] {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
    gap: 1.5rem;
}

.user-edit-side[b-o75hej4vll] {
    display: grid;
    gap: 1.5rem;
    min-width: 0;
}

.user-edit-card[b-o75hej4vll] {
    min-width: 0;
    padding: 1.4rem;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.05);
}

/* Kontodaten – Blau */

.user-edit-details[b-o75hej4vll] {
    background: linear-gradient( 115deg, #ffffff 0%, #f3f7ff 35%, #e3edff 70%, #d3e2ff 100% );
    border-color: #ccdcf6;
}

/* Aktiver Zugang – Grün */

.user-edit-access-active[b-o75hej4vll] {
    background: linear-gradient( 115deg, #ffffff 0%, #f2faf5 30%, #e1f2e7 65%, #c9e9d6 100% );
    border-color: #cce7d6;
}

/* Inaktiver Zugang – Grau */

.user-edit-access-inactive[b-o75hej4vll] {
    background: linear-gradient( 115deg, #ffffff 0%, #f5f6f8 30%, #eaeef2 65%, #dbe2e9 100% );
    border-color: #dce3ea;
}

/* Passwort – Gelb */

.user-edit-password-section[b-o75hej4vll] {
    background: linear-gradient( 115deg, #ffffff 0%, #fffcf5 35%, #fff1d3 70%, #ffe4aa 100% );
    border-color: #ecd8a7;
}

/* =========================================================
   Überschriften
   ========================================================= */

.user-edit-section-header[b-o75hej4vll] {
    margin-bottom: 1.35rem;
}

.user-edit-eyebrow[b-o75hej4vll] {
    margin-bottom: 0.35rem;
    color: #0d6efd;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.user-edit-eyebrow-access[b-o75hej4vll] {
    color: #198754;
}

.user-edit-access-inactive .user-edit-eyebrow-access[b-o75hej4vll] {
    color: #64748b;
}

.user-edit-eyebrow-password[b-o75hej4vll] {
    color: #a46b00;
}

.user-edit-section-header h2[b-o75hej4vll] {
    margin: 0;
    color: #172033;
    font-size: 1.3rem;
    font-weight: 750;
}

.user-edit-section-header p[b-o75hej4vll] {
    margin: 0.4rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.55;
}

/* =========================================================
   Kontodaten
   ========================================================= */

.user-edit-fields[b-o75hej4vll] {
    display: grid;
    gap: 1.2rem;
}

.user-edit-field[b-o75hej4vll] {
    min-width: 0;
}

    .user-edit-field label[b-o75hej4vll] {
        display: block;
        margin-bottom: 0.5rem;
        color: #334155;
        font-size: 0.9rem;
        font-weight: 750;
    }

.user-edit-optional[b-o75hej4vll] {
    color: #718096;
    font-weight: 500;
}

.user-edit-field .form-control[b-o75hej4vll] {
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 0.85rem;
    color: #172033;
    background: #ffffff;
    border: 1px solid #cdd8e6;
    border-radius: 10px;
    font-size: 0.95rem;
}

    .user-edit-field .form-control:focus[b-o75hej4vll] {
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
    }

    .user-edit-field .form-control:disabled[b-o75hej4vll] {
        color: #53657d;
        background: #e9eef4;
        opacity: 1;
    }

.user-edit-field-help[b-o75hej4vll] {
    margin-top: 0.45rem;
    color: #64748b;
    font-size: 0.83rem;
    line-height: 1.5;
}

.user-edit-validation-summary[b-o75hej4vll] {
    margin-bottom: 1.2rem;
    color: #b42335;
    font-size: 0.9rem;
}

.user-edit-validation[b-o75hej4vll] {
    display: block;
    margin-top: 0.4rem;
    color: #b42335;
    font-size: 0.83rem;
}

/* =========================================================
   Zugang
   ========================================================= */

.user-access-box[b-o75hej4vll] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(203, 213, 225, 0.85);
    border-radius: 11px;
}

.user-access-title[b-o75hej4vll] {
    color: #172033;
    font-size: 0.95rem;
    font-weight: 800;
}

.user-access-description[b-o75hej4vll] {
    margin-top: 0.4rem;
    color: #53657d;
    font-size: 0.85rem;
    line-height: 1.55;
}

.user-access-switch[b-o75hej4vll] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
    margin: 0;
}

    .user-access-switch .form-check-input[b-o75hej4vll] {
        width: 2.6rem;
        height: 1.4rem;
        margin: 0;
        cursor: pointer;
    }

    .user-access-switch .form-check-label[b-o75hej4vll] {
        min-width: 78px;
        color: #334155;
        font-size: 0.86rem;
        font-weight: 800;
        cursor: pointer;
    }

.user-access-note[b-o75hej4vll] {
    margin-top: 0.85rem;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.5;
}

/* =========================================================
   Passwortverwaltung
   ========================================================= */

.user-password-box[b-o75hej4vll] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid #ead8af;
    border-radius: 11px;
}

.user-password-title[b-o75hej4vll] {
    color: #172033;
    font-size: 0.95rem;
    font-weight: 800;
}

.user-password-description[b-o75hej4vll] {
    margin-top: 0.4rem;
    color: #53657d;
    font-size: 0.85rem;
    line-height: 1.55;
}

.user-password-disabled-note[b-o75hej4vll] {
    margin-top: 0.85rem;
    padding: 0.8rem 0.95rem;
    color: #765b35;
    background: #fff8e9;
    border: 1px solid #ead8af;
    border-radius: 9px;
    font-size: 0.85rem;
}

/* =========================================================
   Neues Startpasswort
   ========================================================= */

.user-password-result[b-o75hej4vll] {
    margin-bottom: 1.5rem;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #eacb88;
    border-radius: 15px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.07);
}

.user-password-result-header[b-o75hej4vll] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: linear-gradient( 110deg, #ffffff 0%, #fff4da 65%, #ffe4aa 100% );
    border-bottom: 1px solid #ead8af;
}

.user-password-result-title[b-o75hej4vll] {
    color: #172033;
    font-size: 1.1rem;
    font-weight: 800;
}

.user-password-result-description[b-o75hej4vll] {
    margin-top: 0.35rem;
    color: #64748b;
    font-size: 0.87rem;
    line-height: 1.5;
}

.user-password-result-badge[b-o75hej4vll] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0.3rem 0.7rem;
    color: #805300;
    background: #ffe3a1;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
}

.user-password-value[b-o75hej4vll] {
    padding: 1.3rem;
    color: #172033;
    background: #ffffff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    overflow-wrap: anywhere;
}

.user-password-warning[b-o75hej4vll] {
    margin: 0 1.1rem 1.1rem;
    padding: 0.95rem;
    color: #765b35;
    background: #fff8e9;
    border: 1px solid #ead8af;
    border-radius: 9px;
}

    .user-password-warning strong[b-o75hej4vll] {
        display: block;
        font-size: 0.88rem;
        font-weight: 800;
    }

    .user-password-warning p[b-o75hej4vll] {
        margin: 0.3rem 0 0;
        font-size: 0.86rem;
        line-height: 1.5;
    }

/* =========================================================
   Buttons
   ========================================================= */

.user-edit-actions[b-o75hej4vll] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.user-edit-button[b-o75hej4vll] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    min-height: 46px;
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .user-edit-button span[b-o75hej4vll] {
        font-size: 1.1rem;
        font-weight: 800;
    }

    .user-edit-button:disabled[b-o75hej4vll] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.user-edit-button-primary[b-o75hej4vll] {
    color: #ffffff;
    background: #0d6efd;
    border-color: #0d6efd;
}

    .user-edit-button-primary:hover:not(:disabled)[b-o75hej4vll] {
        color: #ffffff;
        background: #0957c3;
    }

.user-edit-button-secondary[b-o75hej4vll] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .user-edit-button-secondary:hover[b-o75hej4vll] {
        color: #ffffff;
        background: #475569;
        text-decoration: none;
    }

.user-edit-button-warning[b-o75hej4vll] {
    color: #805300;
    background: #ffffff;
    border-color: #d69b27;
}

    .user-edit-button-warning:hover:not(:disabled)[b-o75hej4vll] {
        color: #ffffff;
        background: #b87800;
        border-color: #b87800;
    }

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {
    .user-edit-workspace[b-o75hej4vll] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .user-edit-side[b-o75hej4vll] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {
    .user-edit-page[b-o75hej4vll] {
        padding-bottom: 1rem;
    }

    .user-edit-header[b-o75hej4vll] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.9rem;
    }

        .user-edit-header h1[b-o75hej4vll] {
            font-size: 2rem;
        }

    .user-edit-workspace[b-o75hej4vll],
    .user-edit-side[b-o75hej4vll] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .user-edit-card[b-o75hej4vll] {
        padding: 1rem;
        border-radius: 14px;
    }

    .user-edit-section-header h2[b-o75hej4vll] {
        font-size: 1.18rem;
    }

    .user-access-box[b-o75hej4vll] {
        flex-direction: column;
        align-items: flex-start;
    }

    .user-access-switch[b-o75hej4vll] {
        justify-content: flex-start;
        padding-top: 0.2rem;
    }

    .user-password-box .user-edit-button[b-o75hej4vll] {
        width: 100%;
        min-height: 48px;
    }

    .user-edit-actions[b-o75hej4vll] {
        flex-direction: column;
        align-items: stretch;
    }

        .user-edit-actions .user-edit-button[b-o75hej4vll] {
            width: 100%;
            min-height: 48px;
        }

    .user-password-value[b-o75hej4vll] {
        padding: 1rem;
        font-size: 1.15rem;
    }
}
/* /Components/Pages/Admin/Users/Users.razor.rz.scp.css */

/* =========================================================
   CleanDation – Benutzerverwaltung
   ========================================================= */

.users-page[b-2uh0c6k5iv] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* =========================================================
   Seitenkopf
   ========================================================= */

.users-header[b-2uh0c6k5iv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.8rem;
}

.users-header-content[b-2uh0c6k5iv] {
    min-width: 0;
}

.users-header h1[b-2uh0c6k5iv] {
    margin: 0;
    color: #172033;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 750;
    line-height: 1.15;
}

.users-header p[b-2uh0c6k5iv] {
    margin: 0.5rem 0 0;
    max-width: 720px;
    color: #64748b;
    font-size: 1rem;
    line-height: 1.5;
}

.users-create-button[b-2uh0c6k5iv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    flex-shrink: 0;
    min-height: 46px;
    padding: 0.7rem 1rem;
    color: #ffffff;
    background: #0d6efd;
    border: 1px solid #0d6efd;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

    .users-create-button:hover[b-2uh0c6k5iv] {
        color: #ffffff;
        background: #0957c3;
        box-shadow: 0 5px 16px rgba(13, 110, 253, 0.18);
        text-decoration: none;
    }

    .users-create-button span[b-2uh0c6k5iv] {
        font-size: 1.1rem;
        font-weight: 800;
    }

.users-loading[b-2uh0c6k5iv] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 150px;
    color: #64748b;
}

/* =========================================================
   Abschnittsüberschriften
   ========================================================= */

.users-owner-section[b-2uh0c6k5iv] {
    margin-bottom: 2rem;
}

.users-section-heading[b-2uh0c6k5iv] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.users-eyebrow[b-2uh0c6k5iv] {
    margin-bottom: 0.35rem;
    color: #0d6efd;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.075em;
}

.users-eyebrow-success[b-2uh0c6k5iv] {
    color: #198754;
}

.users-section-heading h2[b-2uh0c6k5iv] {
    margin: 0;
    color: #172033;
    font-size: 1.3rem;
    font-weight: 750;
}

.users-section-heading p[b-2uh0c6k5iv] {
    margin: 0.35rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
}

.users-admin-count[b-2uh0c6k5iv] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    color: #64748b;
    font-size: 0.86rem;
    white-space: nowrap;
}

    .users-admin-count strong[b-2uh0c6k5iv] {
        color: #198754;
        font-size: 1.4rem;
        font-weight: 800;
    }

/* =========================================================
   Firmeninhaber – kompakte Karte
   ========================================================= */

.owner-card[b-2uh0c6k5iv] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1.5rem;
    row-gap: 0.85rem;
    align-items: center;
    padding: 1.1rem 1.3rem;
    background: linear-gradient( 110deg, #ffffff 0%, #f3f7ff 30%, #e3edff 65%, #cddfff 100% );
    border: 1px solid #c9dafa;
    border-left: 4px solid #0d6efd;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.055);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .owner-card:hover[b-2uh0c6k5iv] {
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    }

.owner-card-top[b-2uh0c6k5iv] {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.owner-main[b-2uh0c6k5iv] {
    min-width: 0;
}

.owner-name-row[b-2uh0c6k5iv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.owner-name[b-2uh0c6k5iv] {
    margin: 0;
    color: #172033;
    font-size: 1.3rem;
    font-weight: 650;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.owner-badge[b-2uh0c6k5iv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0.28rem 0.65rem;
    color: #ffffff;
    background: #245fc7;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1;
}

.owner-email[b-2uh0c6k5iv] {
    margin-top: 0.35rem;
    color: #53657d;
    font-size: 0.93rem;
    overflow-wrap: anywhere;
}

.owner-details[b-2uh0c6k5iv] {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
    min-width: 0;
    margin: 0;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(100, 116, 139, 0.2);
}

.owner-actions[b-2uh0c6k5iv] {
    grid-column: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-self: end;
    margin: 0;
    padding-top: 0.85rem;
}

/* =========================================================
   Administratoren
   ========================================================= */

.users-admin-section[b-2uh0c6k5iv] {
    padding-top: 1.65rem;
    border-top: 1px solid #dce5ef;
}

.users-list[b-2uh0c6k5iv] {
    display: grid;
    gap: 1rem;
}

.user-card[b-2uh0c6k5iv] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1.5rem;
    row-gap: 0.85rem;
    align-items: center;
    padding: 1.1rem 1.3rem;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.055);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .user-card:hover[b-2uh0c6k5iv] {
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    }

/* Aktive Administratoren: grüner Verlauf */

.user-card-active[b-2uh0c6k5iv] {
    background: linear-gradient( 110deg, #ffffff 0%, #f2faf5 30%, #e1f2e7 65%, #c9e9d6 100% );
    border-color: #cce7d6;
}

    .user-card-active:hover[b-2uh0c6k5iv] {
        background: linear-gradient( 110deg, #ffffff 0%, #edf9f1 30%, #bce4cc 100% );
    }

/* Deaktivierte Administratoren: grau */

.user-card-inactive[b-2uh0c6k5iv] {
    background: linear-gradient( 110deg, #ffffff 0%, #f5f6f8 30%, #eaeef2 65%, #dbe2e9 100% );
    border-color: #dce3ea;
}

    .user-card-inactive:hover[b-2uh0c6k5iv] {
        background: linear-gradient( 110deg, #ffffff 0%, #f1f3f6 30%, #cfd9e3 100% );
    }

/* =========================================================
   Kartenkopf und Benutzerinformationen
   ========================================================= */

.user-card-top[b-2uh0c6k5iv] {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.user-main[b-2uh0c6k5iv] {
    min-width: 0;
}

.user-name[b-2uh0c6k5iv] {
    margin: 0;
    color: #172033;
    font-size: 1.25rem;
    font-weight: 650;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.user-email[b-2uh0c6k5iv] {
    margin-top: 0.35rem;
    color: #53657d;
    font-size: 0.93rem;
    overflow-wrap: anywhere;
}

/* =========================================================
   Status
   ========================================================= */

.user-status[b-2uh0c6k5iv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 28px;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.user-status-active[b-2uh0c6k5iv] {
    color: #ffffff;
    background: #198754;
}

.user-status-inactive[b-2uh0c6k5iv] {
    color: #ffffff;
    background: #64748b;
}

/* =========================================================
   Rolle und Kontaktdaten
   ========================================================= */

.user-details[b-2uh0c6k5iv] {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
    min-width: 0;
    margin: 0;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(100, 116, 139, 0.2);
}

.user-detail[b-2uh0c6k5iv] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.user-detail-label[b-2uh0c6k5iv] {
    color: #6d7e95;
    font-size: 0.73rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.user-detail-value[b-2uh0c6k5iv] {
    color: #26374c;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.user-detail-empty[b-2uh0c6k5iv] {
    color: #8492a6;
    font-weight: 500;
}

.user-phone-link[b-2uh0c6k5iv] {
    color: #0d6efd;
    font-weight: 750;
    text-decoration: none;
}

    .user-phone-link:hover[b-2uh0c6k5iv] {
        color: #0957c3;
        text-decoration: underline;
    }

/* =========================================================
   Aktionen – rechts neben den Textinformationen
   ========================================================= */

.user-actions[b-2uh0c6k5iv] {
    grid-column: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-self: end;
    margin: 0;
    padding-top: 0.85rem;
}

.users-action-button[b-2uh0c6k5iv] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.7rem;
    min-height: 42px;
    padding: 0.55rem 0.95rem;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 0.88rem;
    font-weight: 750;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

    .users-action-button span[b-2uh0c6k5iv] {
        font-size: 1.05rem;
        font-weight: 800;
    }

.users-action-outline[b-2uh0c6k5iv] {
    color: #0d6efd;
    background: #ffffff;
    border-color: #0d6efd;
}

    .users-action-outline:hover[b-2uh0c6k5iv] {
        color: #ffffff;
        background: #0d6efd;
    }

.users-action-secondary[b-2uh0c6k5iv] {
    color: #475569;
    background: #ffffff;
    border-color: #94a3b8;
}

    .users-action-secondary:hover[b-2uh0c6k5iv] {
        color: #ffffff;
        background: #475569;
    }

/* =========================================================
   Leere Zustände
   ========================================================= */

.users-empty[b-2uh0c6k5iv] {
    padding: 1.5rem;
    border: 1px solid #dce5ef;
    border-radius: 14px;
}

    .users-empty strong[b-2uh0c6k5iv] {
        display: block;
        font-size: 1.05rem;
        font-weight: 800;
    }

    .users-empty p[b-2uh0c6k5iv] {
        margin: 0.4rem 0 0;
        color: #53657d;
        font-size: 0.9rem;
        line-height: 1.5;
    }

.users-empty-success[b-2uh0c6k5iv] {
    background: linear-gradient( 115deg, #ffffff 0%, #f2faf5 45%, #d9f0e1 100% );
    border-color: #c8e7d2;
}

    .users-empty-success strong[b-2uh0c6k5iv] {
        color: #198754;
    }

.users-empty-warning[b-2uh0c6k5iv] {
    background: #fff8e9;
    border-color: #eed8a8;
}

    .users-empty-warning strong[b-2uh0c6k5iv] {
        color: #986100;
    }

.users-empty-link[b-2uh0c6k5iv] {
    display: inline-flex;
    margin-top: 1rem;
    color: #0d6efd;
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
}

    .users-empty-link:hover[b-2uh0c6k5iv] {
        text-decoration: underline;
    }

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {
    .users-header[b-2uh0c6k5iv] {
        align-items: flex-start;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .users-page[b-2uh0c6k5iv] {
        padding-bottom: 1rem;
    }

    .users-header[b-2uh0c6k5iv] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

        .users-header h1[b-2uh0c6k5iv] {
            font-size: 2rem;
        }

    .users-create-button[b-2uh0c6k5iv] {
        width: 100%;
        min-height: 48px;
    }

    .users-owner-section[b-2uh0c6k5iv] {
        margin-bottom: 1.5rem;
    }

    .users-section-heading[b-2uh0c6k5iv] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }

        .users-section-heading h2[b-2uh0c6k5iv] {
            font-size: 1.18rem;
        }

    .owner-card[b-2uh0c6k5iv],
    .user-card[b-2uh0c6k5iv] {
        grid-template-columns: minmax(0, 1fr);
        padding: 1rem;
        row-gap: 0.8rem;
        border-radius: 14px;
    }

    .owner-card-top[b-2uh0c6k5iv],
    .user-card-top[b-2uh0c6k5iv],
    .owner-details[b-2uh0c6k5iv],
    .user-details[b-2uh0c6k5iv],
    .owner-actions[b-2uh0c6k5iv],
    .user-actions[b-2uh0c6k5iv] {
        grid-column: 1;
    }

    .owner-name[b-2uh0c6k5iv],
    .user-name[b-2uh0c6k5iv] {
        font-size: 1.15rem;
    }

    .owner-details[b-2uh0c6k5iv],
    .user-details[b-2uh0c6k5iv] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.9rem;
        padding-top: 0.85rem;
    }

    .owner-actions[b-2uh0c6k5iv],
    .user-actions[b-2uh0c6k5iv] {
        justify-content: stretch;
        padding-top: 0;
    }

    .users-action-button[b-2uh0c6k5iv] {
        width: 100%;
        min-height: 48px;
    }
}

/* =========================================================
   Sehr kleine Smartphones
   ========================================================= */

@media (max-width: 430px) {

    .owner-details[b-2uh0c6k5iv],
    .user-details[b-2uh0c6k5iv] {
        grid-template-columns: 1fr;
    }

    .owner-card-top[b-2uh0c6k5iv],
    .user-card-top[b-2uh0c6k5iv] {
        gap: 0.7rem;
    }

    .owner-badge[b-2uh0c6k5iv] {
        font-size: 0.7rem;
    }
}
/* /Components/Pages/Cleaner/CleanerHome.razor.rz.scp.css */

/* =========================================================
   CleanProof – CleanerHome
   Mobile First
   ========================================================= */

.cleaner-page[b-aqzu2hb0gk] {
    width: 100%;
    max-width: 720px;
    min-width: 0;
    margin: 0 auto;
    padding: 1rem 0.75rem 3rem;
    color: #0f172a;
    overflow-wrap: break-word;
}

    .cleaner-page *[b-aqzu2hb0gk],
    .cleaner-page *[b-aqzu2hb0gk]::before,
    .cleaner-page *[b-aqzu2hb0gk]::after {
        box-sizing: border-box;
    }

/* Seitenkopf */

.cleaner-page-header[b-aqzu2hb0gk] {
    margin-bottom: 1.5rem;
}

    .cleaner-page-header h1[b-aqzu2hb0gk] {
        margin: 0;
        font-size: clamp(1.65rem, 4vw, 2rem);
        font-weight: 750;
        line-height: 1.2;
        color: #0f172a;
    }

    .cleaner-page-header p[b-aqzu2hb0gk] {
        margin: 0.5rem 0 0;
        color: #475569;
        font-size: 1rem;
        line-height: 1.5;
    }

.cleaner-loading[b-aqzu2hb0gk] {
    padding: 2rem 0;
    color: #475569;
    text-align: center;
}

/* QR-Scanner */

.cleaner-scanner-card[b-aqzu2hb0gk] {
    min-width: 0;
    padding: 1.5rem;
    border: 1px solid #cbdcf2;
    border-radius: 18px;
    background: linear-gradient( 135deg, #ffffff 0%, #f0f6ff 100% );
    box-shadow: 0 5px 20px rgba(15, 23, 42, 0.05);
}

.cleaner-scanner-icon[b-aqzu2hb0gk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    border-radius: 16px;
    background: #dbeafe;
    color: #155eef;
    font-size: 2rem;
}

.cleaner-scanner-content[b-aqzu2hb0gk] {
    text-align: center;
}

    .cleaner-scanner-content h2[b-aqzu2hb0gk],
    .cleaner-scanner-open-header h2[b-aqzu2hb0gk] {
        margin: 0;
        color: #0f172a;
        font-size: 1.35rem;
        font-weight: 750;
        line-height: 1.3;
    }

    .cleaner-scanner-content p[b-aqzu2hb0gk],
    .cleaner-scanner-open-header p[b-aqzu2hb0gk] {
        margin: 0.5rem auto 0;
        max-width: 460px;
        color: #475569;
        font-size: 0.98rem;
        line-height: 1.55;
    }

.cleaner-page .cleaner-scan-button[b-aqzu2hb0gk] {
    width: 100%;
    min-height: 56px;
    margin-top: 1.25rem;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    white-space: normal;
}

.cleaner-page .cleaner-camera-note[b-aqzu2hb0gk] {
    margin-top: 0.9rem;
    color: #475569;
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: center;
}

.cleaner-scanner-open-header[b-aqzu2hb0gk] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

    .cleaner-scanner-open-header > div[b-aqzu2hb0gk] {
        flex: 1 1 200px;
        min-width: 0;
    }

.scanner-video-wrapper[b-aqzu2hb0gk] {
    position: relative;
    width: 100%;
    max-height: 65vh;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    background: #111827;
}

.scanner-video[b-aqzu2hb0gk] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scanner-frame[b-aqzu2hb0gk] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68%;
    max-width: 280px;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 3px solid white;
    border-radius: 16px;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

/* Abschnitte */

.cleaner-assignment-section[b-aqzu2hb0gk],
.cleaner-running-section[b-aqzu2hb0gk],
.cleaner-today-section[b-aqzu2hb0gk] {
    margin-top: 2rem;
}

.cleaner-section-header[b-aqzu2hb0gk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

    .cleaner-section-header > div[b-aqzu2hb0gk] {
        min-width: 0;
        flex: 1;
    }

    .cleaner-section-header h2[b-aqzu2hb0gk] {
        margin: 0;
        color: #0f172a;
        font-size: 1.35rem;
        font-weight: 750;
        line-height: 1.3;
    }

    .cleaner-section-header p[b-aqzu2hb0gk] {
        margin: 0.3rem 0 0;
        color: #475569;
        font-size: 0.95rem;
        line-height: 1.45;
    }

.cleaner-running-count[b-aqzu2hb0gk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 32px;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 0.9rem;
    font-weight: 750;
    flex-shrink: 0;
}

/* Listen */

.cleaner-assignment-list[b-aqzu2hb0gk],
.cleaner-running-list[b-aqzu2hb0gk],
.cleaner-today-list[b-aqzu2hb0gk] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Gemeinsame Karten */

.cleaner-assignment-card[b-aqzu2hb0gk],
.cleaner-running-card[b-aqzu2hb0gk],
.cleaner-today-card[b-aqzu2hb0gk] {
    display: block;
    min-width: 0;
    padding: 1.15rem;
    border: 1px solid #dbe3ee;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.045);
}

.cleaner-assignment-card-top[b-aqzu2hb0gk],
.cleaner-running-card-top[b-aqzu2hb0gk],
.cleaner-today-card-top[b-aqzu2hb0gk] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.cleaner-assignment-main[b-aqzu2hb0gk],
.cleaner-running-main[b-aqzu2hb0gk],
.cleaner-today-main[b-aqzu2hb0gk] {
    min-width: 0;
    flex: 1;
}

.cleaner-assignment-area[b-aqzu2hb0gk],
.cleaner-running-area[b-aqzu2hb0gk],
.cleaner-today-area[b-aqzu2hb0gk] {
    color: #0f172a;
    font-size: 1.1rem;
    font-weight: 750;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.cleaner-assignment-location[b-aqzu2hb0gk],
.cleaner-running-location[b-aqzu2hb0gk],
.cleaner-today-location[b-aqzu2hb0gk] {
    margin-top: 0.3rem;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
}

    .cleaner-assignment-location span[b-aqzu2hb0gk],
    .cleaner-running-location span[b-aqzu2hb0gk],
    .cleaner-today-location span[b-aqzu2hb0gk] {
        margin: 0 0.2rem;
        color: #94a3b8;
    }

.cleaner-assignment-divider[b-aqzu2hb0gk],
.cleaner-running-divider[b-aqzu2hb0gk],
.cleaner-today-divider[b-aqzu2hb0gk] {
    height: 1px;
    margin: 0.95rem 0;
    background: #e2e8f0;
}

.cleaner-page .badge[b-aqzu2hb0gk] {
    flex-shrink: 0;
    padding: 0.4rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Zugewiesene Aufträge */

.cleaner-assignment-card[b-aqzu2hb0gk] {
    border-color: #d8e4f5;
    background: linear-gradient( 115deg, #ffffff 0%, #f3f8ff 100% );
}

.cleaner-assignment-card-overdue[b-aqzu2hb0gk] {
    border-color: #f0b9b9;
    background: linear-gradient( 115deg, #ffffff 0%, #fff1f1 100% );
}

.cleaner-assignment-meta[b-aqzu2hb0gk] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

    .cleaner-assignment-meta > div:first-child[b-aqzu2hb0gk] {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
    }

.cleaner-assignment-meta-label[b-aqzu2hb0gk],
.cleaner-running-meta-label[b-aqzu2hb0gk] {
    display: block;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 700;
}

.cleaner-assignment-meta-value[b-aqzu2hb0gk],
.cleaner-running-meta-value[b-aqzu2hb0gk] {
    display: block;
    color: #0f172a;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.4;
}

.cleaner-assignment-actions[b-aqzu2hb0gk] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.cleaner-assignment-type[b-aqzu2hb0gk] {
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.4;
}

.cleaner-page .cleaner-assignment-start-button[b-aqzu2hb0gk] {
    min-height: 48px;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    font-size: 0.98rem;
    font-weight: 700;
    white-space: normal;
}

/* Laufende Reinigungen */

.cleaner-running-card[b-aqzu2hb0gk] {
    color: inherit;
    text-decoration: none;
    border-color: #cbdcf2;
    background: linear-gradient( 115deg, #ffffff 0%, #edf5ff 100% );
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .cleaner-running-card:hover[b-aqzu2hb0gk] {
        color: inherit;
        text-decoration: none;
        border-color: #93b4e6;
        box-shadow: 0 5px 16px rgba(15, 23, 42, 0.08);
    }

.cleaner-running-card-warning[b-aqzu2hb0gk] {
    border-color: #e6bd62;
}

.cleaner-running-badges[b-aqzu2hb0gk] {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.cleaner-running-meta[b-aqzu2hb0gk] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.8rem;
}

.cleaner-running-meta-item[b-aqzu2hb0gk] {
    min-width: 0;
}

.cleaner-running-meta-value[b-aqzu2hb0gk] {
    margin-top: 0.2rem;
}

.cleaner-running-open[b-aqzu2hb0gk] {
    flex-shrink: 0;
    color: #1d4ed8;
    font-size: 0.98rem;
    font-weight: 750;
    white-space: nowrap;
}

/* Heute offene Bereiche */

.cleaner-today-card[b-aqzu2hb0gk] {
    border-color: #ead49a;
    background: linear-gradient( 115deg, #ffffff 0%, #fff9e9 100% );
}

.cleaner-today-footer[b-aqzu2hb0gk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cleaner-today-hint[b-aqzu2hb0gk] {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.45;
}

.cleaner-today-complete[b-aqzu2hb0gk] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    padding: 1.15rem;
    border: 1px solid #b4dfc4;
    border-radius: 16px;
    background: #f0faf3;
}

.cleaner-today-complete-icon[b-aqzu2hb0gk] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #198754;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
}

.cleaner-today-complete-title[b-aqzu2hb0gk] {
    color: #166534;
    font-size: 1rem;
    font-weight: 750;
}

.cleaner-today-complete-text[b-aqzu2hb0gk] {
    margin-top: 0.3rem;
    color: #365b43;
    font-size: 0.95rem;
    line-height: 1.45;
}

/* Leere Zustände */

.cleaner-empty-card[b-aqzu2hb0gk] {
    padding: 1.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
}

.cleaner-empty-title[b-aqzu2hb0gk] {
    color: #334155;
    font-size: 1rem;
    font-weight: 750;
}

.cleaner-empty-text[b-aqzu2hb0gk] {
    margin-top: 0.35rem;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Tastaturbedienung */

.cleaner-page a:focus-visible[b-aqzu2hb0gk],
.cleaner-page button:focus-visible[b-aqzu2hb0gk] {
    outline: 3px solid #2563eb;
    outline-offset: 3px;
}

/* Smartphone */

@media (max-width: 575.98px) {

    .cleaner-page[b-aqzu2hb0gk] {
        padding: 0.75rem 0.5rem 2.5rem;
    }

    .cleaner-page-header[b-aqzu2hb0gk] {
        margin-bottom: 1.15rem;
    }

        .cleaner-page-header h1[b-aqzu2hb0gk] {
            font-size: 1.65rem;
        }

    .cleaner-scanner-card[b-aqzu2hb0gk] {
        padding: 1.1rem;
        border-radius: 16px;
    }

    .cleaner-scanner-content h2[b-aqzu2hb0gk] {
        font-size: 1.25rem;
    }

    .cleaner-section-header h2[b-aqzu2hb0gk] {
        font-size: 1.2rem;
    }

    .cleaner-assignment-section[b-aqzu2hb0gk],
    .cleaner-running-section[b-aqzu2hb0gk],
    .cleaner-today-section[b-aqzu2hb0gk] {
        margin-top: 1.6rem;
    }

    .cleaner-assignment-card[b-aqzu2hb0gk],
    .cleaner-running-card[b-aqzu2hb0gk],
    .cleaner-today-card[b-aqzu2hb0gk] {
        padding: 1rem;
    }

    .cleaner-assignment-card-top[b-aqzu2hb0gk],
    .cleaner-running-card-top[b-aqzu2hb0gk],
    .cleaner-today-card-top[b-aqzu2hb0gk] {
        flex-wrap: wrap;
    }

    .cleaner-assignment-actions[b-aqzu2hb0gk],
    .cleaner-assignment-meta[b-aqzu2hb0gk] {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
        gap: 0.65rem;
    }

    .cleaner-assignment-actions[b-aqzu2hb0gk] {
        align-items: stretch;
    }

    .cleaner-page .cleaner-assignment-start-button[b-aqzu2hb0gk] {
        width: 100%;
        min-height: 52px;
    }

    .cleaner-running-meta[b-aqzu2hb0gk] {
        align-items: flex-end;
    }

    .cleaner-running-open[b-aqzu2hb0gk] {
        font-size: 0.95rem;
    }

    .cleaner-page .cleaner-scan-button[b-aqzu2hb0gk] {
        min-height: 58px;
    }

    .cleaner-today-complete[b-aqzu2hb0gk] {
        align-items: flex-start;
    }
}

/* Sehr schmale Smartphones */

@media (max-width: 360px) {

    .cleaner-assignment-card-top[b-aqzu2hb0gk],
    .cleaner-running-card-top[b-aqzu2hb0gk],
    .cleaner-today-card-top[b-aqzu2hb0gk] {
        flex-direction: column;
        align-items: flex-start;
    }

    .cleaner-running-badges[b-aqzu2hb0gk] {
        justify-content: flex-start;
    }

    .cleaner-running-meta[b-aqzu2hb0gk] {
        flex-wrap: wrap;
    }

    .cleaner-page-header h1[b-aqzu2hb0gk] {
        font-size: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cleaner-running-card[b-aqzu2hb0gk] {
        transition: none;
    }
}
/* /Components/Pages/Cleaner/CleaningSession.razor.rz.scp.css */

/* =========================================================
   CleanDation – Reinigung durchführen
   Mobile First | Einheitliches QR-Design
   ========================================================= */

.cleaning-session-page[b-tx42rnacbf] {
    width: 100%;
    max-width: 760px;
    min-width: 0;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
    color: #172033;
    overflow-wrap: break-word;
}

    .cleaning-session-page *[b-tx42rnacbf],
    .cleaning-session-page *[b-tx42rnacbf]::before,
    .cleaning-session-page *[b-tx42rnacbf]::after {
        box-sizing: border-box;
    }

/* =========================================================
   Laden
   ========================================================= */

.cleaning-session-loading[b-tx42rnacbf] {
    padding: 2rem 1rem;
    color: #64748b;
    font-size: 0.95rem;
    text-align: center;
}

/* =========================================================
   Zurück
   ========================================================= */

.cleaning-session-back[b-tx42rnacbf] {
    display: flex;
    align-items: center;
    margin-bottom: 1.1rem;
}

    .cleaning-session-back .btn[b-tx42rnacbf],
    .cleaning-session-page > .btn-outline-secondary[b-tx42rnacbf] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 44px;
        padding: 0.55rem 0.9rem;
        color: #334155;
        background: #ffffff;
        border: 1px solid #d6e1ee;
        border-radius: 10px;
        font-size: 0.88rem;
        font-weight: 700;
        text-decoration: none;
        box-shadow: none;
    }

        .cleaning-session-back .btn:hover[b-tx42rnacbf],
        .cleaning-session-page > .btn-outline-secondary:hover[b-tx42rnacbf] {
            color: #0d6efd;
            background: #eef5ff;
            border-color: #accdff;
        }

/* =========================================================
   Bereichskarte
   ========================================================= */

.cleaning-session-header-card[b-tx42rnacbf] {
    min-width: 0;
    padding: 1.25rem;
    background: linear-gradient( 125deg, #ffffff 0%, #f0f6ff 48%, #dbeaff 100% );
    border: 1px solid #cbdcf4;
    border-radius: 18px;
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.045);
}

.cleaning-session-header-top[b-tx42rnacbf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.cleaning-session-header-main[b-tx42rnacbf] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.cleaning-session-customer[b-tx42rnacbf] {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.cleaning-session-object[b-tx42rnacbf] {
    margin-top: 0.15rem;
    color: #475569;
    font-size: 0.91rem;
    font-weight: 400;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.cleaning-session-area[b-tx42rnacbf] {
    margin: 0.55rem 0 0;
    color: #12233c;
    font-size: clamp(1.65rem, 5vw, 2.15rem);
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* Status: Läuft / Abgeschlossen */

.cleaning-session-status[b-tx42rnacbf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 28px;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

    .cleaning-session-status.bg-primary[b-tx42rnacbf] {
        color: #ffffff;
        background: #0d6efd !important;
    }

    .cleaning-session-status.bg-success[b-tx42rnacbf] {
        color: #ffffff;
        background: #198754 !important;
    }

/* =========================================================
   Start- und Abschlusszeit
   ========================================================= */

.cleaning-session-meta[b-tx42rnacbf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(100, 116, 139, 0.2);
}

.cleaning-session-meta-item[b-tx42rnacbf] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.cleaning-session-meta-label[b-tx42rnacbf] {
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.cleaning-session-meta-value[b-tx42rnacbf] {
    color: #26374c;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.45;
}

/* =========================================================
   Fortschrittskarte
   ========================================================= */

.cleaning-session-progress-card[b-tx42rnacbf] {
    margin-top: 1rem;
    padding: 1.1rem 1.2rem;
    background: linear-gradient( 115deg, #ffffff 0%, #f3fbf5 55%, #e5f5e9 100% );
    border: 1px solid #bce3ca;
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.035);
}

.cleaning-session-progress-header[b-tx42rnacbf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cleaning-session-section-title[b-tx42rnacbf] {
    color: #172033;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.3;
}

.cleaning-session-section-subtitle[b-tx42rnacbf] {
    margin-top: 0.3rem;
    color: #64748b;
    font-size: 0.87rem;
    font-weight: 400;
    line-height: 1.45;
}

.cleaning-session-progress-count[b-tx42rnacbf] {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    flex-shrink: 0;
    color: #64748b;
    font-size: 0.88rem;
}

    .cleaning-session-progress-count strong[b-tx42rnacbf] {
        color: #198754;
        font-size: 1.3rem;
        font-weight: 800;
    }

/* Fortschrittsbalken */

.cleaning-session-progress[b-tx42rnacbf] {
    height: 10px;
    margin-top: 1rem;
    overflow: hidden;
    background: #dcece1;
    border-radius: 999px;
}

    .cleaning-session-progress .progress-bar[b-tx42rnacbf] {
        background-color: #198754 !important;
        border-radius: 999px;
        transition: width 0.2s ease;
    }

.cleaning-session-progress-percent[b-tx42rnacbf] {
    margin-top: 0.45rem;
    color: #198754;
    font-size: 0.82rem;
    font-weight: 750;
    text-align: right;
}

/* =========================================================
   Abschnittsüberschriften
   ========================================================= */

.cleaning-session-section[b-tx42rnacbf] {
    margin-top: 1.35rem;
}

.cleaning-session-section-heading[b-tx42rnacbf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 0.75rem;
}

    .cleaning-session-section-heading > div[b-tx42rnacbf] {
        flex: 1;
        min-width: 0;
    }

    .cleaning-session-section-heading h2[b-tx42rnacbf] {
        margin: 0;
        color: #172033;
        font-size: 1.23rem;
        font-weight: 800;
        line-height: 1.3;
    }

    .cleaning-session-section-heading .cleaning-session-section-subtitle[b-tx42rnacbf] {
        margin-top: 0.3rem;
    }

.cleaning-session-section-count[b-tx42rnacbf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 42px;
    min-height: 30px;
    padding: 0.35rem 0.7rem;
    color: #0d6efd;
    background: #edf4ff;
    border: 1px solid #d1e3ff;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

/* =========================================================
   Aufgabenliste
   ========================================================= */

.cleaning-session-task-list[b-tx42rnacbf] {
    display: grid;
    gap: 0.65rem;
}

/* Gesamte Aufgabenzeile ist anklickbar */

.cleaning-session-task-card[b-tx42rnacbf] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
    min-height: 68px;
    margin: 0;
    padding: 0.85rem 1rem;
    color: #26374c;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 13px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

    .cleaning-session-task-card:hover[b-tx42rnacbf] {
        background: #f5f9ff;
        border-color: #abcafa;
    }

    .cleaning-session-task-card:focus-within[b-tx42rnacbf] {
        outline: 3px solid #93c5fd;
        outline-offset: 2px;
    }

/* =========================================================
   Checkbox
   ========================================================= */

.cleaning-session-task-checkbox[b-tx42rnacbf] {
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    border: 2px solid #b7c6d7;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: none;
}

    .cleaning-session-task-checkbox:focus[b-tx42rnacbf] {
        border-color: #198754;
        box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.16);
    }

    .cleaning-session-task-checkbox:checked[b-tx42rnacbf] {
        background-color: #198754;
        border-color: #198754;
    }

    .cleaning-session-task-checkbox:disabled[b-tx42rnacbf] {
        opacity: 0.8;
        cursor: default;
    }

/* =========================================================
   Aufgabeninhalt
   ========================================================= */

.cleaning-session-task-content[b-tx42rnacbf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}

.cleaning-session-task-name[b-tx42rnacbf] {
    min-width: 0;
    color: #172033;
    font-size: 0.96rem;
    font-weight: 650;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.cleaning-session-task-state[b-tx42rnacbf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 25px;
    padding: 0.25rem 0.55rem;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.2;
}

.cleaning-session-task-state-completed[b-tx42rnacbf] {
    color: #166534;
}

/* Erledigte Aufgabe */

.cleaning-session-task-card-completed[b-tx42rnacbf] {
    background: linear-gradient( 110deg, #ffffff 0%, #f3fbf5 60%, #e4f5e9 100% );
    border-color: #b7dfc5;
}

    .cleaning-session-task-card-completed:hover[b-tx42rnacbf] {
        background: #eaf8ef;
        border-color: #91cfa8;
    }

    .cleaning-session-task-card-completed .cleaning-session-task-state[b-tx42rnacbf] {
        color: #166534;
        background: #ddf2e5;
    }

/* =========================================================
   Keine Probleme
   ========================================================= */

.cleaning-session-no-issues[b-tx42rnacbf] {
    padding: 1rem 1.1rem;
    background: #f8fafc;
    border: 1px solid #dce5ef;
    border-radius: 13px;
}

.cleaning-session-no-issues-title[b-tx42rnacbf] {
    color: #334155;
    font-size: 0.94rem;
    font-weight: 750;
}

.cleaning-session-no-issues-text[b-tx42rnacbf] {
    margin-top: 0.3rem;
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.5;
}

/* =========================================================
   Problemliste
   ========================================================= */

.cleaning-session-issue-list[b-tx42rnacbf] {
    display: grid;
    gap: 0.7rem;
}

.cleaning-session-issue-card[b-tx42rnacbf] {
    min-width: 0;
    padding: 1rem 1.1rem;
    border: 1px solid #dce5ef;
    border-radius: 13px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.035);
}

.cleaning-session-issue-card-open[b-tx42rnacbf] {
    background: linear-gradient( 110deg, #ffffff 0%, #fff5f5 45%, #fbe2e7 100% );
    border-color: #efc9cf;
}

.cleaning-session-issue-card-resolved[b-tx42rnacbf] {
    background: linear-gradient( 110deg, #ffffff 0%, #f2faf5 45%, #dff2e6 100% );
    border-color: #cce7d6;
}

.cleaning-session-issue-top[b-tx42rnacbf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.cleaning-session-issue-main[b-tx42rnacbf] {
    flex: 1;
    min-width: 0;
}

.cleaning-session-issue-title[b-tx42rnacbf] {
    color: #172033;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.cleaning-session-issue-description[b-tx42rnacbf] {
    margin-top: 0.35rem;
    color: #475569;
    font-size: 0.87rem;
    font-weight: 400;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.cleaning-session-issue-date[b-tx42rnacbf] {
    margin-top: 0.7rem;
    color: #64748b;
    font-size: 0.81rem;
    font-weight: 400;
}

/* =========================================================
   Problem melden
   ========================================================= */

.cleaning-session-issue-button[b-tx42rnacbf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    margin-top: 0.85rem;
    padding: 0.75rem 1rem;
    color: #dc3545;
    background: #ffffff;
    border: 1px solid #dc3545;
    border-radius: 11px;
    font-size: 0.94rem;
    font-weight: 750;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    white-space: normal;
}

    .cleaning-session-issue-button:hover[b-tx42rnacbf] {
        color: #ffffff;
        background: #dc3545;
        border-color: #dc3545;
    }

/* =========================================================
   Abschluss
   ========================================================= */

.cleaning-session-finish-section[b-tx42rnacbf] {
    margin-top: 1.4rem;
    margin-bottom: 1.5rem;
}

/* Noch nicht alle Aufgaben erledigt */

.cleaning-session-warning[b-tx42rnacbf] {
    padding: 1rem 1.1rem;
    color: #835400;
    background: #fff8e9;
    border: 1px solid #edd39c;
    border-radius: 13px;
}

.cleaning-session-warning-title[b-tx42rnacbf] {
    color: #825300;
    font-size: 0.96rem;
    font-weight: 800;
}

.cleaning-session-warning-text[b-tx42rnacbf] {
    margin-top: 0.3rem;
    color: #795e31;
    font-size: 0.87rem;
    line-height: 1.5;
}

/* Alle Aufgaben erledigt */

.cleaning-session-ready[b-tx42rnacbf] {
    padding: 1rem 1.1rem;
    color: #16613c;
    background: #effaf3;
    border: 1px solid #bce3ca;
    border-radius: 13px;
}

.cleaning-session-ready-title[b-tx42rnacbf] {
    color: #166534;
    font-size: 0.96rem;
    font-weight: 800;
}

.cleaning-session-ready-text[b-tx42rnacbf] {
    margin-top: 0.3rem;
    color: #365b43;
    font-size: 0.87rem;
    line-height: 1.5;
}

/* Hauptaktion */

.cleaning-session-complete-button[b-tx42rnacbf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    margin-top: 0.8rem;
    padding: 0.8rem 1rem;
    color: #ffffff;
    background: #198754;
    border: 1px solid #198754;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
}

    .cleaning-session-complete-button:hover:not(:disabled)[b-tx42rnacbf] {
        color: #ffffff;
        background: #146c43;
        border-color: #146c43;
    }

    .cleaning-session-complete-button:disabled[b-tx42rnacbf] {
        color: #64748b;
        background: #eef2f6;
        border-color: #dce5ef;
        opacity: 1;
        cursor: not-allowed;
    }

/* =========================================================
   Bereits abgeschlossen
   ========================================================= */

.cleaning-session-completed-card[b-tx42rnacbf] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.1rem;
    color: #166534;
    background: #effaf3;
    border: 1px solid #bce3ca;
    border-radius: 14px;
}

.cleaning-session-completed-icon[b-tx42rnacbf] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    color: #ffffff;
    background: #198754;
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: 800;
}

.cleaning-session-completed-title[b-tx42rnacbf] {
    color: #166534;
    font-size: 1rem;
    font-weight: 800;
}

.cleaning-session-completed-text[b-tx42rnacbf] {
    margin-top: 0.25rem;
    color: #365b43;
    font-size: 0.86rem;
    line-height: 1.45;
}

/* =========================================================
   Speichermeldung
   ========================================================= */

.cleaning-session-saving[b-tx42rnacbf] {
    margin-top: 0.75rem;
    color: #64748b;
    font-size: 0.85rem;
    text-align: center;
}

/* =========================================================
   Tastaturbedienung
   ========================================================= */

.cleaning-session-page a:focus-visible[b-tx42rnacbf],
.cleaning-session-page button:focus-visible[b-tx42rnacbf],
.cleaning-session-page input:focus-visible[b-tx42rnacbf] {
    outline: 3px solid #80b8ff;
    outline-offset: 3px;
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 575.98px) {

    .cleaning-session-page[b-tx42rnacbf] {
        padding: 0.75rem 0.6rem 2.5rem;
    }

    .cleaning-session-back .btn[b-tx42rnacbf] {
        max-width: 100%;
        white-space: normal;
    }

    .cleaning-session-header-card[b-tx42rnacbf] {
        padding: 1rem;
        border-radius: 15px;
    }

    .cleaning-session-header-top[b-tx42rnacbf] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .cleaning-session-area[b-tx42rnacbf] {
        font-size: 1.65rem;
    }

    .cleaning-session-meta[b-tx42rnacbf] {
        gap: 0.75rem;
    }

    .cleaning-session-progress-card[b-tx42rnacbf] {
        padding: 1rem;
        border-radius: 14px;
    }

    .cleaning-session-section[b-tx42rnacbf] {
        margin-top: 1.2rem;
    }

    .cleaning-session-section-heading h2[b-tx42rnacbf] {
        font-size: 1.15rem;
    }

    .cleaning-session-task-card[b-tx42rnacbf] {
        min-height: 64px;
        padding: 0.8rem;
        gap: 0.8rem;
    }

    .cleaning-session-task-name[b-tx42rnacbf] {
        font-size: 0.94rem;
    }

    .cleaning-session-task-state[b-tx42rnacbf] {
        font-size: 0.74rem;
    }

    .cleaning-session-issue-card[b-tx42rnacbf] {
        padding: 0.9rem;
    }

    .cleaning-session-issue-button[b-tx42rnacbf] {
        min-height: 52px;
    }
}

/* =========================================================
   Kleine Smartphones
   ========================================================= */

@media (max-width: 360px) {

    .cleaning-session-header-top[b-tx42rnacbf],
    .cleaning-session-issue-top[b-tx42rnacbf] {
        flex-wrap: wrap;
    }

    .cleaning-session-task-content[b-tx42rnacbf] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .cleaning-session-meta[b-tx42rnacbf] {
        grid-template-columns: 1fr;
    }

    .cleaning-session-progress-header[b-tx42rnacbf] {
        align-items: flex-start;
    }
}

/* =========================================================
   Reduzierte Animationen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .cleaning-session-task-card[b-tx42rnacbf],
    .cleaning-session-progress .progress-bar[b-tx42rnacbf] {
        transition: none;
    }
}
/* /Components/Pages/Cleaner/IssueCreate.razor.rz.scp.css */

/* =========================================================
   CleanDation – Problem während Reinigung melden
   Mobile First
   ========================================================= */

.cleaning-issue-page[b-121sjc7dev] {
    width: 100%;
    max-width: 760px;
    min-width: 0;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
    color: #172033;
}

    .cleaning-issue-page *[b-121sjc7dev],
    .cleaning-issue-page *[b-121sjc7dev]::before,
    .cleaning-issue-page *[b-121sjc7dev]::after {
        box-sizing: border-box;
    }

/* Navigation */

.cleaning-issue-toolbar[b-121sjc7dev] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

.cleaning-issue-back[b-121sjc7dev] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.55rem 0.9rem;
    color: #334155;
    background: #ffffff;
    border: 1px solid #d6e1ee;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

    .cleaning-issue-back:hover[b-121sjc7dev] {
        color: #0d6efd;
        background: #eef5ff;
        border-color: #accdff;
        text-decoration: none;
    }

    .cleaning-issue-back > span[b-121sjc7dev] {
        font-size: 1.25rem;
        line-height: 1;
    }

.cleaning-issue-eyebrow[b-121sjc7dev] {
    color: #0d6efd;
    font-size: 0.67rem;
    font-weight: 850;
    letter-spacing: 0.09em;
}

/* Bereichskarte */

.cleaning-issue-hero[b-121sjc7dev] {
    padding: 1.25rem;
    background: linear-gradient( 125deg, #ffffff 0%, #f0f6ff 48%, #dbeaff 100% );
    border: 1px solid #cbdcf4;
    border-radius: 18px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.045);
}

.cleaning-issue-hero-top[b-121sjc7dev] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-bottom: 0.75rem;
}

.cleaning-issue-label[b-121sjc7dev] {
    color: #0d6efd;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.085em;
}

.cleaning-issue-hero-badge[b-121sjc7dev] {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.32rem 0.7rem;
    color: #075db3;
    background: #e1efff;
    border: 1px solid #b4d4ff;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
}

.cleaning-issue-hero h1[b-121sjc7dev] {
    margin: 0;
    color: #12233c;
    font-size: clamp(1.65rem, 5vw, 2.15rem);
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.cleaning-issue-hero > p[b-121sjc7dev] {
    margin: 0.55rem 0 0;
    color: #526579;
    font-size: 0.89rem;
    line-height: 1.55;
}

.cleaning-issue-location[b-121sjc7dev] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 1.1rem;
    padding-top: 0.95rem;
    border-top: 1px solid rgba(100, 116, 139, 0.2);
}

    .cleaning-issue-location > div[b-121sjc7dev] {
        display: flex;
        flex-direction: column;
        gap: 0.28rem;
        min-width: 0;
    }

    .cleaning-issue-location span[b-121sjc7dev] {
        color: #64748b;
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.05em;
    }

    .cleaning-issue-location strong[b-121sjc7dev] {
        color: #26374c;
        font-size: 0.91rem;
        font-weight: 500;
        overflow-wrap: anywhere;
    }

/* Formular-Karte */

.cleaning-issue-form-card[b-121sjc7dev] {
    margin-top: 1rem;
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 18px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.045);
}

.cleaning-issue-form-heading[b-121sjc7dev] {
    margin-bottom: 1.35rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e4ebf4;
}

    .cleaning-issue-form-heading h2[b-121sjc7dev] {
        margin: 0.35rem 0 0;
        color: #172033;
        font-size: 1.3rem;
        font-weight: 800;
    }

    .cleaning-issue-form-heading p[b-121sjc7dev] {
        margin: 0.4rem 0 0;
        color: #64748b;
        font-size: 0.88rem;
        line-height: 1.55;
    }

.cleaning-issue-form[b-121sjc7dev] {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

/* Eingabefelder */

.cleaning-issue-field[b-121sjc7dev] {
    min-width: 0;
}

    .cleaning-issue-field > label[b-121sjc7dev],
    .cleaning-issue-label-row label[b-121sjc7dev] {
        display: block;
        margin-bottom: 0.45rem;
        color: #334155;
        font-size: 0.88rem;
        font-weight: 750;
    }

.cleaning-issue-label-row[b-121sjc7dev] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.cleaning-issue-required[b-121sjc7dev] {
    color: #dc3545;
}

.cleaning-issue-optional[b-121sjc7dev] {
    color: #8492a6;
    font-size: 0.76rem;
    font-weight: 500;
}

.cleaning-issue-input[b-121sjc7dev],
.cleaning-issue-textarea[b-121sjc7dev] {
    width: 100%;
    min-width: 0;
    padding: 0.8rem 0.9rem;
    color: #172033;
    background: #ffffff;
    border: 1px solid #cdd8e6;
    border-radius: 11px;
    font-size: 1rem;
    line-height: 1.5;
    box-shadow: none;
}

.cleaning-issue-input[b-121sjc7dev] {
    min-height: 52px;
}

.cleaning-issue-textarea[b-121sjc7dev] {
    min-height: 116px;
    resize: vertical;
}

    .cleaning-issue-input[b-121sjc7dev]::placeholder,
    .cleaning-issue-textarea[b-121sjc7dev]::placeholder {
        color: #94a3b8;
    }

    .cleaning-issue-input:focus[b-121sjc7dev],
    .cleaning-issue-textarea:focus[b-121sjc7dev] {
        color: #172033;
        background: #ffffff;
        border-color: #0d6efd;
        outline: none;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
    }

.cleaning-issue-help[b-121sjc7dev] {
    margin: 0.45rem 0 0;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.45;
}

.cleaning-issue-validation[b-121sjc7dev] {
    display: block;
    margin-top: 0.4rem;
    color: #b42332;
    font-size: 0.82rem;
}

/* Fotoauswahl */

.cleaning-issue-upload[b-121sjc7dev] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 0.9rem;
    background: #f8fafc;
    border: 1px dashed #b7cbe2;
    border-radius: 12px;
}

.cleaning-issue-upload-icon[b-121sjc7dev] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: #0d6efd;
    background: #e7f0ff;
    border-radius: 11px;
    font-size: 1.6rem;
    line-height: 1;
}

.cleaning-issue-upload-text[b-121sjc7dev] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

    .cleaning-issue-upload-text strong[b-121sjc7dev] {
        color: #26374c;
        font-size: 0.92rem;
        font-weight: 750;
    }

    .cleaning-issue-upload-text span[b-121sjc7dev] {
        color: #64748b;
        font-size: 0.78rem;
        line-height: 1.4;
    }

.cleaning-issue-file[b-121sjc7dev] {
    width: 100%;
    min-width: 0;
    margin-top: 0.1rem;
    color: #475569;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 9px;
    font-size: 0.86rem;
}

    .cleaning-issue-file[b-121sjc7dev]::file-selector-button {
        margin-right: 0.8rem;
        padding: 0.55rem 0.8rem;
        color: #0d6efd;
        background: #edf4ff;
        border: 0;
        border-right: 1px solid #dce5ef;
        font-weight: 700;
        cursor: pointer;
    }

.cleaning-issue-selected-photo[b-121sjc7dev] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-top: 0.65rem;
    padding: 0.75rem 0.9rem;
    color: #166534;
    background: #effaf3;
    border: 1px solid #bce3ca;
    border-radius: 10px;
}

    .cleaning-issue-selected-photo > span[b-121sjc7dev] {
        font-weight: 800;
    }

    .cleaning-issue-selected-photo > div[b-121sjc7dev] {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        min-width: 0;
    }

    .cleaning-issue-selected-photo strong[b-121sjc7dev] {
        font-size: 0.85rem;
    }

    .cleaning-issue-selected-photo div span[b-121sjc7dev] {
        font-size: 0.8rem;
        overflow-wrap: anywhere;
    }

/* Fehler */

.cleaning-issue-error[b-121sjc7dev] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 1rem;
    padding: 0.9rem;
    color: #a12635;
    background: #fff1f3;
    border: 1px solid #efbdc5;
    border-radius: 11px;
    font-size: 0.89rem;
    line-height: 1.5;
}

    .cleaning-issue-error > span[b-121sjc7dev] {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        color: #ffffff;
        background: #dc3545;
        border-radius: 50%;
        font-weight: 800;
    }

/* Aktionen */

.cleaning-issue-actions[b-121sjc7dev] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 0.2rem;
    padding-top: 1rem;
    border-top: 1px solid #e4ebf4;
}

.cleaning-issue-submit[b-121sjc7dev] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    width: 100%;
    min-height: 56px;
    padding: 0.85rem 1rem;
    color: #ffffff;
    background: #dc3545;
    border: 1px solid #dc3545;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
}

    .cleaning-issue-submit:hover:not(:disabled)[b-121sjc7dev] {
        color: #ffffff;
        background: #b92c3b;
        border-color: #b92c3b;
    }

    .cleaning-issue-submit:disabled[b-121sjc7dev] {
        opacity: 0.65;
        cursor: not-allowed;
    }

    .cleaning-issue-submit > span:last-child[b-121sjc7dev] {
        font-size: 1.15rem;
    }

.cleaning-issue-cancel[b-121sjc7dev] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 1rem;
    color: #475569;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 11px;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

    .cleaning-issue-cancel:hover[b-121sjc7dev] {
        color: #172033;
        background: #f1f5f9;
        text-decoration: none;
    }

/* Hinweis unter Formular */

.cleaning-issue-info[b-121sjc7dev] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-top: 0.9rem;
    padding: 0.85rem 0.9rem;
    color: #64748b;
}

.cleaning-issue-info-icon[b-121sjc7dev] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    color: #0d6efd;
    background: #e7f0ff;
    border-radius: 7px;
    font-size: 0.85rem;
    font-weight: 800;
}

.cleaning-issue-info p[b-121sjc7dev] {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.55;
}

/* Laden und fehlende Reinigung */

.cleaning-issue-state[b-121sjc7dev] {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1.25rem;
    color: #53657d;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
}

.cleaning-issue-state-error[b-121sjc7dev] {
    color: #9b2736;
    background: #fff1f3;
    border-color: #efbdc5;
}

.cleaning-issue-state-symbol[b-121sjc7dev] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    color: #ffffff;
    background: #dc3545;
    border-radius: 50%;
    font-weight: 800;
}

.cleaning-issue-state h1[b-121sjc7dev] {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 800;
}

.cleaning-issue-state p[b-121sjc7dev] {
    margin: 0.4rem 0 0;
    font-size: 0.88rem;
    line-height: 1.5;
}

.cleaning-issue-state-link[b-121sjc7dev] {
    display: inline-block;
    margin-top: 0.85rem;
    color: #0d6efd;
    font-size: 0.86rem;
    font-weight: 750;
    text-decoration: none;
}

/* Bedienbarkeit */

.cleaning-issue-page a:focus-visible[b-121sjc7dev],
.cleaning-issue-page button:focus-visible[b-121sjc7dev],
.cleaning-issue-page input:focus-visible[b-121sjc7dev],
.cleaning-issue-page textarea:focus-visible[b-121sjc7dev] {
    outline: 3px solid #80b8ff;
    outline-offset: 3px;
}

/* Smartphone */

@media (max-width: 575.98px) {
    .cleaning-issue-page[b-121sjc7dev] {
        padding: 0.75rem 0.6rem 2rem;
    }

    .cleaning-issue-toolbar[b-121sjc7dev] {
        align-items: flex-start;
    }

    .cleaning-issue-eyebrow[b-121sjc7dev] {
        font-size: 0.6rem;
    }

    .cleaning-issue-hero[b-121sjc7dev],
    .cleaning-issue-form-card[b-121sjc7dev] {
        padding: 1rem;
        border-radius: 15px;
    }

    .cleaning-issue-location[b-121sjc7dev] {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    .cleaning-issue-form-heading h2[b-121sjc7dev] {
        font-size: 1.2rem;
    }

    .cleaning-issue-upload[b-121sjc7dev] {
        padding: 0.8rem;
    }

    .cleaning-issue-input[b-121sjc7dev],
    .cleaning-issue-textarea[b-121sjc7dev] {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cleaning-issue-page *[b-121sjc7dev],
    .cleaning-issue-page *[b-121sjc7dev]::before,
    .cleaning-issue-page *[b-121sjc7dev]::after {
        scroll-behavior: auto;
    }
}
/* /Components/Pages/Cleaner/QrArea.razor.rz.scp.css */

/* =========================================================
   CleanDation – QR-Reinigungsbereich
   Mobile First
   ========================================================= */

.qr-page[b-tvuys0us2s] {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 1rem 1rem 2rem;
    color: #172033;
}

/* Navigation */

.qr-page-toolbar[b-tvuys0us2s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.15rem;
}

.qr-back-button[b-tvuys0us2s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.55rem 0.9rem;
    color: #334155;
    background: #ffffff;
    border: 1px solid #d6e1ee;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

    .qr-back-button:hover[b-tvuys0us2s] {
        color: #0d6efd;
        background: #eef5ff;
        border-color: #accdff;
        text-decoration: none;
    }

    .qr-back-button span[b-tvuys0us2s] {
        font-size: 1.25rem;
        line-height: 1;
    }

.qr-page-brand[b-tvuys0us2s] {
    color: #0d6efd;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.1em;
}

/* Bereichskarte */

.qr-hero[b-tvuys0us2s] {
    padding: 1.25rem;
    background: linear-gradient( 125deg, #ffffff 0%, #f0f6ff 48%, #dbeaff 100% );
    border: 1px solid #cbdcf4;
    border-radius: 18px;
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.045);
}

.qr-hero-top[b-tvuys0us2s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-bottom: 0.8rem;
}

.qr-eyebrow[b-tvuys0us2s] {
    color: #0d6efd;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.09em;
}

.qr-hero h1[b-tvuys0us2s] {
    margin: 0;
    color: #12233c;
    font-size: clamp(1.65rem, 5vw, 2.2rem);
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.qr-location-grid[b-tvuys0us2s] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(100, 116, 139, 0.2);
}

.qr-location-item[b-tvuys0us2s] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.qr-location-label[b-tvuys0us2s] {
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.qr-location-item strong[b-tvuys0us2s] {
    color: #26374c;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* Status-Badges */

.qr-status-pill[b-tvuys0us2s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.qr-status-ready[b-tvuys0us2s],
.qr-status-success[b-tvuys0us2s] {
    color: #11663b;
    background: #def3e5;
    border: 1px solid #b7e2c7;
}

.qr-status-info[b-tvuys0us2s] {
    color: #075db3;
    background: #e1efff;
    border: 1px solid #b4d4ff;
}

.qr-status-warning[b-tvuys0us2s] {
    color: #8c5900;
    background: #fff0cf;
    border: 1px solid #efd59b;
}

.qr-status-neutral[b-tvuys0us2s] {
    color: #475569;
    background: #eef2f6;
    border: 1px solid #d9e1e9;
}

/* Hinweise und Statusmeldungen */

.qr-notice[b-tvuys0us2s] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid transparent;
    border-radius: 14px;
}

.qr-notice-symbol[b-tvuys0us2s],
.qr-state-icon[b-tvuys0us2s] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 850;
}

.qr-notice-content[b-tvuys0us2s] {
    min-width: 0;
    flex: 1;
}

    .qr-notice-content h2[b-tvuys0us2s] {
        margin: 0;
        font-size: 0.96rem;
        font-weight: 800;
        line-height: 1.4;
    }

    .qr-notice-content p[b-tvuys0us2s] {
        margin: 0.35rem 0 0;
        font-size: 0.87rem;
        line-height: 1.55;
    }

.qr-notice-info[b-tvuys0us2s] {
    color: #164b87;
    background: #edf5ff;
    border-color: #c9dfff;
}

    .qr-notice-info .qr-notice-symbol[b-tvuys0us2s] {
        color: #ffffff;
        background: #287bd0;
    }

.qr-notice-warning[b-tvuys0us2s] {
    color: #815400;
    background: #fff8e9;
    border-color: #edd39c;
}

    .qr-notice-warning .qr-notice-symbol[b-tvuys0us2s] {
        color: #ffffff;
        background: #bd820b;
    }

.qr-notice-success[b-tvuys0us2s] {
    color: #16613c;
    background: #effaf3;
    border-color: #bce3ca;
}

    .qr-notice-success .qr-notice-symbol[b-tvuys0us2s] {
        color: #ffffff;
        background: #198754;
    }

.qr-notice-error[b-tvuys0us2s] {
    color: #9b2736;
    background: #fff1f3;
    border-color: #efbdc5;
}

    .qr-notice-error .qr-notice-symbol[b-tvuys0us2s] {
        color: #ffffff;
        background: #dc3545;
    }

.qr-notice-button[b-tvuys0us2s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 0.9rem;
    padding: 0.6rem 0.9rem;
    color: #ffffff;
    background: #0d6efd;
    border: 1px solid #0d6efd;
    border-radius: 9px;
    font-size: 0.86rem;
    font-weight: 750;
    text-decoration: none;
}

    .qr-notice-button:hover[b-tvuys0us2s] {
        color: #ffffff;
        background: #0957c3;
        text-decoration: none;
    }

/* Aufgabenkarte */

.qr-task-card[b-tvuys0us2s] {
    margin-top: 1rem;
    padding: 1.15rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
}

.qr-task-header[b-tvuys0us2s] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

    .qr-task-header h2[b-tvuys0us2s] {
        margin: 0.3rem 0 0;
        color: #172033;
        font-size: 1.18rem;
        font-weight: 800;
    }

    .qr-task-header p[b-tvuys0us2s] {
        margin: 0.3rem 0 0;
        color: #64748b;
        font-size: 0.85rem;
        line-height: 1.45;
    }

.qr-task-count[b-tvuys0us2s] {
    flex-shrink: 0;
    padding: 0.35rem 0.65rem;
    color: #0d6efd;
    background: #edf4ff;
    border: 1px solid #d1e3ff;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
}

.qr-task-list[b-tvuys0us2s] {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qr-task-item[b-tvuys0us2s] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 52px;
    padding: 0.75rem 0.85rem;
    color: #26374c;
    background: #f8fafc;
    border: 1px solid #e1e9f2;
    border-radius: 11px;
    font-size: 0.92rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}


.qr-task-symbol[b-tvuys0us2s] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    color: #475569;
    background: #e8edf4;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 700;
}


.qr-empty-tasks[b-tvuys0us2s] {
    padding: 1rem;
    color: #825900;
    background: #fff8e9;
    border: 1px solid #f0d9aa;
    border-radius: 10px;
    font-size: 0.88rem;
    line-height: 1.55;
}

/* Startbereich */

.qr-start-panel[b-tvuys0us2s] {
    margin-top: 1rem;
    padding: 1.1rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
}

.qr-start-panel-text[b-tvuys0us2s] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.9rem;
}

    .qr-start-panel-text strong[b-tvuys0us2s] {
        color: #172033;
        font-size: 0.95rem;
        font-weight: 800;
    }

    .qr-start-panel-text span[b-tvuys0us2s] {
        color: #64748b;
        font-size: 0.85rem;
        line-height: 1.45;
    }

.qr-start-button[b-tvuys0us2s] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 56px;
    padding: 0.8rem 1rem;
    color: #ffffff;
    background: #198754;
    border: 1px solid #198754;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
}

    .qr-start-button:hover:not(:disabled)[b-tvuys0us2s] {
        color: #ffffff;
        background: #146c43;
        border-color: #146c43;
    }

    .qr-start-button:disabled[b-tvuys0us2s] {
        color: #64748b;
        background: #eef2f6;
        border-color: #dce5ef;
        cursor: not-allowed;
    }

    .qr-start-button span:last-child[b-tvuys0us2s] {
        font-size: 1.2rem;
        line-height: 1;
    }

/* Laden und Fehlerzustand */

.qr-state-card[b-tvuys0us2s] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.25rem;
    color: #53657d;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
}

.qr-state-error[b-tvuys0us2s] {
    align-items: flex-start;
    color: #9b2736;
    background: #fff1f3;
    border-color: #efbdc5;
}

    .qr-state-error .qr-state-icon[b-tvuys0us2s] {
        color: #ffffff;
        background: #dc3545;
    }

    .qr-state-error h1[b-tvuys0us2s] {
        margin: 0;
        font-size: 1.15rem;
        font-weight: 800;
    }

    .qr-state-error p[b-tvuys0us2s] {
        margin: 0.4rem 0 0;
        font-size: 0.9rem;
        line-height: 1.55;
    }

.qr-inline-link[b-tvuys0us2s] {
    display: inline-block;
    margin-top: 0.75rem;
    color: #0d6efd;
    font-size: 0.87rem;
    font-weight: 750;
    text-decoration: none;
}

/* Tastaturbedienung */

.qr-page a:focus-visible[b-tvuys0us2s],
.qr-page button:focus-visible[b-tvuys0us2s] {
    outline: 3px solid #80b8ff;
    outline-offset: 3px;
}

/* Mobile Anpassungen */

@media (max-width: 575.98px) {
    .qr-page[b-tvuys0us2s] {
        padding: 0.8rem 0.75rem 1.5rem;
    }

    .qr-hero[b-tvuys0us2s] {
        padding: 1rem;
        border-radius: 15px;
    }

    .qr-location-grid[b-tvuys0us2s] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .qr-task-card[b-tvuys0us2s],
    .qr-start-panel[b-tvuys0us2s] {
        padding: 1rem;
        border-radius: 14px;
    }

    .qr-task-header[b-tvuys0us2s] {
        gap: 0.5rem;
    }

    .qr-task-item[b-tvuys0us2s] {
        min-height: 54px;
    }

    .qr-page-brand[b-tvuys0us2s] {
        font-size: 0.61rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qr-page *[b-tvuys0us2s],
    .qr-page *[b-tvuys0us2s]::before,
    .qr-page *[b-tvuys0us2s]::after {
        scroll-behavior: auto;
    }
}
/* /Components/Pages/Customer/CustomerHome.razor.rz.scp.css */
/* =========================================================
   CleanDation – Kundenportal
   Einheitliches Card-Design, scoped auf CustomerHome
   ========================================================= */

.customer-portal-page[b-p5wzu6a4y3] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 2rem;
    color: #172033;
}

/* Seitenkopf */
.customer-portal-header[b-p5wzu6a4y3] {
    margin-bottom: 1.55rem;
}

.customer-portal-eyebrow[b-p5wzu6a4y3] {
    margin-bottom: 0.35rem;
    color: #0d6efd;
    font-size: 0.74rem;
    font-weight: 750;
    letter-spacing: 0.075em;
}

.customer-portal-header h1[b-p5wzu6a4y3] {
    margin: 0;
    color: #172033;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 750;
    line-height: 1.15;
}

.customer-portal-header p[b-p5wzu6a4y3] {
    margin: 0.5rem 0 0;
    color: #64748b;
    font-size: 1rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Filterpanel wie in den Admin-Übersichten */
.customer-filter-panel[b-p5wzu6a4y3] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.55rem;
    padding: 1.35rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.045);
}

.customer-filter-intro[b-p5wzu6a4y3] {
    min-width: 0;
}

    .customer-filter-intro h2[b-p5wzu6a4y3] {
        margin: 0;
        color: #172033;
        font-size: 1.15rem;
        font-weight: 700;
    }

    .customer-filter-intro p[b-p5wzu6a4y3] {
        margin: 0.4rem 0 0;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.5;
    }

.customer-record-filters[b-p5wzu6a4y3] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.75rem;
}

.customer-record-filter[b-p5wzu6a4y3] {
    width: 195px;
    min-width: 0;
}

    .customer-record-filter .form-label[b-p5wzu6a4y3] {
        display: block;
        margin-bottom: 0.45rem;
        color: #334155;
        font-size: 0.86rem;
        font-weight: 650;
    }

    .customer-record-filter .form-select[b-p5wzu6a4y3],
    .customer-record-filter .form-control[b-p5wzu6a4y3] {
        width: 100%;
        min-height: 46px;
        padding: 0.65rem 0.85rem;
        color: #172033;
        background-color: #ffffff;
        border: 1px solid #cdd8e6;
        border-radius: 10px;
        font-size: 0.92rem;
    }

    .customer-record-filter .form-select[b-p5wzu6a4y3] {
        padding-right: 2.4rem;
    }

        .customer-record-filter .form-select:focus[b-p5wzu6a4y3],
        .customer-record-filter .form-control:focus[b-p5wzu6a4y3] {
            border-color: #0d6efd;
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
        }

.customer-record-filter-clear[b-p5wzu6a4y3] {
    display: flex;
    align-items: flex-end;
}

    .customer-record-filter-clear .btn[b-p5wzu6a4y3] {
        min-height: 46px;
        padding: 0.6rem 0.9rem;
        border-radius: 9px;
        font-size: 0.86rem;
        font-weight: 650;
        white-space: nowrap;
    }

/* Monatsübersicht */
.customer-month-overview[b-p5wzu6a4y3] {
    margin-bottom: 1.75rem;
}

.customer-month-overview-card[b-p5wzu6a4y3] {
    padding: 1.4rem;
    background: linear-gradient(115deg, #ffffff 0%, #f3f7ff 43%, #e0ebff 100%);
    border: 1px solid #ccdcf6;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, 0.045);
}

.customer-month-overview-top[b-p5wzu6a4y3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.customer-month-overview-label[b-p5wzu6a4y3] {
    margin-bottom: 0.35rem;
    color: #0d6efd;
    font-size: 0.74rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.075em;
}

.customer-month-overview-title[b-p5wzu6a4y3] {
    margin: 0;
    color: #172033;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.35;
}

.customer-month-stats[b-p5wzu6a4y3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.customer-month-stat[b-p5wzu6a4y3] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
    min-width: 0;
    padding: 1rem 1.15rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #dbe5f4;
    border-radius: 12px;
}

.customer-month-stat-value[b-p5wzu6a4y3] {
    color: #172033;
    font-size: 1.8rem;
    font-weight: 750;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.customer-month-stat-date[b-p5wzu6a4y3] {
    font-size: 1rem;
    font-weight: 650;
}

.customer-month-stat-label[b-p5wzu6a4y3] {
    color: #64748b;
    font-size: 0.83rem;
    line-height: 1.45;
}

.customer-month-status-bar[b-p5wzu6a4y3] {
    height: 5px;
    margin-top: 1.15rem;
    overflow: hidden;
    background: #dcece5;
    border-radius: 999px;
}

.customer-month-status-bar-fill[b-p5wzu6a4y3] {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #198754, #36b37e);
    border-radius: inherit;
}

/* Ergebnisüberschrift */
.customer-latest-section[b-p5wzu6a4y3] {
    margin-bottom: 2rem;
}

.customer-records-section[b-p5wzu6a4y3] {
    margin-top: 0;
}

.customer-records-section-header[b-p5wzu6a4y3] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.customer-section-title[b-p5wzu6a4y3] {
    margin: 0;
    color: #172033;
    font-size: 1.3rem;
    font-weight: 750;
}

.customer-records-section-header .text-muted[b-p5wzu6a4y3] {
    color: #64748b !important;
    font-size: 0.86rem;
}

/* Nachweiskarten: ruhige Typografie wie Offene Reinigungen */
.customer-record-cards[b-p5wzu6a4y3] {
    display: grid;
    gap: 0.9rem;
}

.customer-record-card[b-p5wzu6a4y3] {
    min-width: 0;
    padding: 1.1rem 1.25rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.045);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .customer-record-card:hover[b-p5wzu6a4y3] {
        transform: translateY(-1px);
        box-shadow: 0 9px 26px rgba(15, 23, 42, 0.07);
    }

.customer-record-card-completed[b-p5wzu6a4y3] {
    background: linear-gradient(110deg, #ffffff 0%, #f5fbf7 38%, #e2f4e9 100%);
    border-color: #cce7d6;
}

.customer-record-card-running[b-p5wzu6a4y3] {
    background: linear-gradient(110deg, #ffffff 0%, #f3f7ff 38%, #dce9ff 100%);
    border-color: #cddff9;
}

.customer-record-card-top[b-p5wzu6a4y3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.18);
}

    .customer-record-card-top > div[b-p5wzu6a4y3] {
        min-width: 0;
    }

.customer-record-title[b-p5wzu6a4y3] {
    margin: 0;
    color: #172033;
    font-size: 1.1rem;
    font-weight: 650;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.customer-record-location[b-p5wzu6a4y3] {
    margin-top: 0.25rem;
    color: #53657d;
    font-size: 0.83rem;
    font-weight: 400;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.customer-record-status[b-p5wzu6a4y3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 27px;
    padding: 0.3rem 0.7rem;
    color: #ffffff;
    background: #198754 !important;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.customer-record-meta[b-p5wzu6a4y3] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 0;
    padding-top: 0.8rem;
    border-top: 0;
}

.customer-record-meta-item[b-p5wzu6a4y3] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.customer-record-meta-label[b-p5wzu6a4y3] {
    color: #6d7e95;
    font-size: 0.69rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.customer-record-meta-value[b-p5wzu6a4y3] {
    color: #26374c;
    font-size: 0.86rem;
    font-weight: 400;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.customer-record-actions[b-p5wzu6a4y3] {
    margin-top: 1.25rem;
}

/* Seitennavigation */
.customer-records-pagination[b-p5wzu6a4y3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0 1rem;
    padding: 1rem;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 12px;
}

    .customer-records-pagination .btn[b-p5wzu6a4y3] {
        min-height: 42px;
        border-radius: 9px;
        font-size: 0.86rem;
        font-weight: 650;
    }

/* Tablets und engere Desktop-Fenster */
@media (max-width: 1100px) {
    .customer-filter-panel[b-p5wzu6a4y3] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .customer-record-filters[b-p5wzu6a4y3] {
        justify-content: flex-start;
    }
}

/* Smartphone */
@media (max-width: 767.98px) {
    .customer-portal-page[b-p5wzu6a4y3] {
        padding-bottom: 1rem;
    }

    .customer-portal-header h1[b-p5wzu6a4y3] {
        font-size: 2rem;
    }

    .customer-filter-panel[b-p5wzu6a4y3],
    .customer-month-overview-card[b-p5wzu6a4y3] {
        padding: 1rem;
        border-radius: 14px;
    }

    .customer-record-filters[b-p5wzu6a4y3] {
        width: 100%;
        justify-content: stretch;
    }

    .customer-record-filter[b-p5wzu6a4y3] {
        flex: 1 1 180px;
    }

    .customer-record-card[b-p5wzu6a4y3] {
        padding: 1rem;
        border-radius: 14px;
    }

    .customer-record-title[b-p5wzu6a4y3] {
        font-size: 1.05rem;
    }

    .customer-record-meta[b-p5wzu6a4y3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem;
    }

    .customer-records-pagination[b-p5wzu6a4y3] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

        .customer-records-pagination > .text-muted[b-p5wzu6a4y3] {
            order: -1;
            width: 100%;
        }

        .customer-records-pagination .btn[b-p5wzu6a4y3] {
            flex: 1;
        }
}

/* Kleine Smartphones */
@media (max-width: 520px) {
    .customer-record-filters[b-p5wzu6a4y3] {
        flex-direction: column;
        align-items: stretch;
    }

    .customer-record-filter[b-p5wzu6a4y3],
    .customer-record-filter-clear[b-p5wzu6a4y3],
    .customer-record-filter-clear .btn[b-p5wzu6a4y3] {
        width: 100%;
    }

    .customer-month-stats[b-p5wzu6a4y3],
    .customer-record-meta[b-p5wzu6a4y3] {
        grid-template-columns: 1fr;
    }

    .customer-record-card-top[b-p5wzu6a4y3] {
        flex-wrap: wrap;
    }
}

.customer-portal-page a:focus-visible[b-p5wzu6a4y3],
.customer-portal-page button:focus-visible[b-p5wzu6a4y3],
.customer-portal-page select:focus-visible[b-p5wzu6a4y3],
.customer-portal-page input:focus-visible[b-p5wzu6a4y3] {
    outline: 3px solid #80b8ff;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .customer-record-card[b-p5wzu6a4y3] {
        transition: none;
    }
}
/* /Components/Pages/Error.razor.rz.scp.css */
/* =========================================================
   Fehlerseite
   ========================================================= */

.error-page[b-8gxhp1gkzk] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 2rem 1rem;
}


.error-card[b-8gxhp1gkzk] {
    width: 100%;
    max-width: 520px;
    padding: 2rem;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}


.error-icon[b-8gxhp1gkzk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: #fff3cd;
    color: #856404;
    font-size: 1.75rem;
    font-weight: 700;
}


.error-card h1[b-8gxhp1gkzk] {
    margin-bottom: 0.75rem;
    font-size: 1.75rem;
}


.error-actions[b-8gxhp1gkzk] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
/* /Components/Pages/Platform/PlatformAudit.razor.rz.scp.css */

/* CleanDation Platform – Audit-Protokoll */

.audit-page[b-7qnrtx793p] {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0.25rem 0 3rem;
    color: #1b2a40;
}

    .audit-page *[b-7qnrtx793p],
    .audit-page *[b-7qnrtx793p]::before,
    .audit-page *[b-7qnrtx793p]::after {
        box-sizing: border-box;
    }

/* Seitenkopf */

.audit-header[b-7qnrtx793p] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.audit-eyebrow[b-7qnrtx793p] {
    margin-bottom: 0.45rem;
    color: #287dd2;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.11em;
}

.audit-header h1[b-7qnrtx793p] {
    margin: 0;
    color: #18283e;
    font-size: clamp(1.75rem, 2.5vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.035em;
}

.audit-header p[b-7qnrtx793p] {
    margin: 0.55rem 0 0;
    color: #718096;
    font-size: 0.9rem;
    line-height: 1.55;
}

.audit-refresh[b-7qnrtx793p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    font-weight: 700;
}

/* Statistik */

.audit-stat-grid[b-7qnrtx793p] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.audit-stat[b-7qnrtx793p] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #e1e8f1;
    border-top: 3px solid #3988d8;
    border-radius: 15px;
    box-shadow: 0 5px 18px rgba(27, 50, 80, 0.035);
}

    .audit-stat:nth-child(2)[b-7qnrtx793p] {
        border-top-color: #6c82d8;
    }

    .audit-stat:nth-child(3)[b-7qnrtx793p] {
        border-top-color: #dc6471;
    }

    .audit-stat:nth-child(4)[b-7qnrtx793p] {
        border-top-color: #28a571;
    }

    .audit-stat > span[b-7qnrtx793p] {
        color: #697a90;
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.035em;
    }

    .audit-stat > strong[b-7qnrtx793p] {
        margin: 0.25rem 0;
        color: #17283f;
        font-size: 2.15rem;
        font-weight: 850;
        line-height: 1;
    }

    .audit-stat > small[b-7qnrtx793p] {
        color: #8995a5;
        font-size: 0.75rem;
        line-height: 1.4;
    }

/* Filter */

.audit-filter-panel[b-7qnrtx793p] {
    margin-bottom: 1.5rem;
    padding: 1.35rem 1.45rem;
    background: #fff;
    border: 1px solid #e1e8f1;
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(27, 50, 80, 0.035);
}

.audit-filter-heading[b-7qnrtx793p] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}

    .audit-filter-heading h2[b-7qnrtx793p] {
        margin: 0;
        color: #23354c;
        font-size: 1rem;
        font-weight: 800;
    }

    .audit-filter-heading p[b-7qnrtx793p] {
        margin: 0.3rem 0 0;
        color: #8491a3;
        font-size: 0.79rem;
    }

.audit-clear-link[b-7qnrtx793p] {
    padding: 0;
    color: #206fc0;
    border: none;
    background: none;
    font-size: 0.79rem;
    font-weight: 750;
    cursor: pointer;
}

    .audit-clear-link:hover[b-7qnrtx793p] {
        text-decoration: underline;
    }

.audit-filter-grid[b-7qnrtx793p] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
    gap: 1rem;
}

.audit-field[b-7qnrtx793p] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

    .audit-field label[b-7qnrtx793p] {
        color: #44556c;
        font-size: 0.79rem;
        font-weight: 750;
    }

    .audit-field .form-control[b-7qnrtx793p],
    .audit-field .form-select[b-7qnrtx793p] {
        min-height: 46px;
        border: 1px solid #d7e0eb;
        border-radius: 10px;
        font-size: 0.86rem;
    }

        .audit-field .form-control:focus[b-7qnrtx793p],
        .audit-field .form-select:focus[b-7qnrtx793p] {
            border-color: #438add;
            box-shadow: 0 0 0 3px rgba(55, 134, 220, 0.12);
        }

/* Ergebnisse */

.audit-result-bar[b-7qnrtx793p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
    color: #64748b;
    font-size: 0.87rem;
}

    .audit-result-bar strong[b-7qnrtx793p] {
        color: #20344e;
        font-weight: 800;
    }

.audit-filter-indicator[b-7qnrtx793p] {
    display: inline-flex;
    margin-left: 0.6rem;
    padding: 0.22rem 0.55rem;
    color: #2363a9;
    background: #eaf4ff;
    border-radius: 999px;
    font-size: 0.69rem;
    font-weight: 750;
}

.audit-updated[b-7qnrtx793p] {
    color: #909bab;
    font-size: 0.75rem;
}

/* Ereignisliste */

.audit-event-list[b-7qnrtx793p] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.audit-event[b-7qnrtx793p] {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e1e8f1;
    border-radius: 15px;
    box-shadow: 0 4px 16px rgba(27, 50, 80, 0.035);
}

.audit-event-head[b-7qnrtx793p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 1rem 1.2rem;
    background: #f8fafd;
    border-bottom: 1px solid #e9eef5;
}

.audit-event-title-area[b-7qnrtx793p] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.audit-event-id[b-7qnrtx793p] {
    color: #96a0af;
    font-size: 0.72rem;
}

.audit-event-time[b-7qnrtx793p] {
    color: #697c93;
    font-size: 0.8rem;
    font-weight: 650;
    white-space: nowrap;
}

.audit-event-content[b-7qnrtx793p] {
    padding: 1.2rem;
}

.audit-event-information[b-7qnrtx793p] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.audit-info-group[b-7qnrtx793p] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: 0.35rem;
}

.audit-info-label[b-7qnrtx793p] {
    color: #8996a7;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.audit-company-link[b-7qnrtx793p] {
    color: #176ec5;
    font-size: 0.91rem;
    font-weight: 800;
    line-height: 1.4;
    text-decoration: none;
    overflow-wrap: anywhere;
}

    .audit-company-link:hover[b-7qnrtx793p] {
        color: #0c4d90;
        text-decoration: underline;
    }

    .audit-company-link span[b-7qnrtx793p] {
        margin-left: 0.2rem;
        font-size: 0.8rem;
    }

.audit-admin-name[b-7qnrtx793p] {
    color: #293b51;
    font-size: 0.88rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.audit-info-secondary[b-7qnrtx793p] {
    color: #8b98a9;
    font-size: 0.75rem;
}

.audit-email[b-7qnrtx793p] {
    overflow-wrap: anywhere;
}

/* Aktionen */

.audit-action[b-7qnrtx793p] {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.7rem;
    border-radius: 8px;
    font-size: 0.73rem;
    font-weight: 800;
}

.audit-action-danger[b-7qnrtx793p] {
    color: #af3748;
    background: #fdecef;
}

.audit-action-success[b-7qnrtx793p] {
    color: #157b4d;
    background: #e7f8ef;
}

.audit-action-info[b-7qnrtx793p] {
    color: #19699d;
    background: #e8f5fc;
}

.audit-action-primary[b-7qnrtx793p] {
    color: #225eab;
    background: #eaf2fe;
}

.audit-action-muted[b-7qnrtx793p] {
    color: #657488;
    background: #eef2f6;
}

/* Vertragsänderungen */

.audit-event-actions[b-7qnrtx793p] {
    display: flex;
    justify-content: flex-start;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid #edf1f5;
}

.audit-details-toggle[b-7qnrtx793p] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 38px;
    padding: 0.5rem 0.85rem;
    color: #1c67b3;
    background: #f0f7ff;
    border: 1px solid #d3e4f8;
    border-radius: 9px;
    font-size: 0.79rem;
    font-weight: 750;
    cursor: pointer;
}

    .audit-details-toggle:hover[b-7qnrtx793p] {
        background: #e5f1fe;
    }

    .audit-details-toggle span[b-7qnrtx793p] {
        font-size: 1rem;
        font-weight: 850;
    }

.audit-change-grid[b-7qnrtx793p] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 1rem;
}

.audit-change-card[b-7qnrtx793p] {
    min-width: 0;
    padding: 1.15rem;
    background: #f8fafd;
    border: 1px solid #e3eaf2;
    border-radius: 12px;
}

.audit-change-card-after[b-7qnrtx793p] {
    background: #f4f9ff;
    border-color: #d6e7fa;
}

.audit-change-heading[b-7qnrtx793p] {
    margin-bottom: 0.75rem;
    color: #77879c;
    font-size: 0.69rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.065em;
}

.audit-change-plan[b-7qnrtx793p] {
    color: #1c3049;
    font-size: 1.2rem;
    font-weight: 850;
}

.audit-change-status[b-7qnrtx793p] {
    margin-top: 0.35rem;
    color: #52677f;
    font-size: 0.85rem;
}

.audit-change-card dl[b-7qnrtx793p] {
    margin: 1rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid #e2e8ef;
}

    .audit-change-card dl > div[b-7qnrtx793p] {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.35rem 0;
    }

.audit-change-card dt[b-7qnrtx793p] {
    color: #8491a3;
    font-size: 0.76rem;
    font-weight: 600;
}

.audit-change-card dd[b-7qnrtx793p] {
    margin: 0;
    color: #364a62;
    font-size: 0.76rem;
    font-weight: 750;
}

.audit-legacy-note[b-7qnrtx793p] {
    margin: 1rem 0 0;
    padding: 0.8rem;
    color: #7a8797;
    background: #f8fafd;
    border: 1px solid #e7edf4;
    border-radius: 9px;
    font-size: 0.77rem;
    line-height: 1.5;
}

/* Pagination */

.audit-footer[b-7qnrtx793p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.2rem;
}

.audit-range[b-7qnrtx793p] {
    color: #7b8a9c;
    font-size: 0.8rem;
}

.audit-pagination[b-7qnrtx793p] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;
}

    .audit-pagination .btn[b-7qnrtx793p] {
        min-height: 38px;
        border-radius: 9px;
        font-size: 0.79rem;
        font-weight: 700;
    }

    .audit-pagination span[b-7qnrtx793p] {
        color: #52667d;
        font-size: 0.8rem;
        font-weight: 750;
        white-space: nowrap;
    }

.audit-limit-note[b-7qnrtx793p] {
    margin: 1.2rem 0 0;
    color: #8491a3;
    font-size: 0.75rem;
    line-height: 1.6;
}

/* Leer- und Ladezustand */

.audit-state[b-7qnrtx793p] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 120px;
    padding: 1.5rem;
    color: #61758c;
    background: #fff;
    border: 1px solid #e1e8f1;
    border-radius: 15px;
}

.audit-empty[b-7qnrtx793p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding: 3rem 1.5rem;
    text-align: center;
    background: #fff;
    border: 1px solid #e1e8f1;
    border-radius: 15px;
}

.audit-empty-symbol[b-7qnrtx793p] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: #297bc9;
    background: #edf5fe;
    border-radius: 13px;
    font-size: 1.8rem;
}

.audit-empty h2[b-7qnrtx793p] {
    margin: 0;
    color: #25364e;
    font-size: 1.05rem;
    font-weight: 800;
}

.audit-empty p[b-7qnrtx793p] {
    max-width: 400px;
    margin: 0 0 0.5rem;
    color: #7c8b9e;
    font-size: 0.84rem;
    line-height: 1.55;
}

/* Bedienbarkeit */

.audit-page a:focus-visible[b-7qnrtx793p],
.audit-page button:focus-visible[b-7qnrtx793p],
.audit-page input:focus-visible[b-7qnrtx793p],
.audit-page select:focus-visible[b-7qnrtx793p] {
    outline: 3px solid #74aaf0;
    outline-offset: 3px;
}

/* Responsives Design */

@media (max-width: 1100px) {
    .audit-stat-grid[b-7qnrtx793p] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .audit-filter-grid[b-7qnrtx793p] {
        grid-template-columns: 1fr;
    }

    .audit-change-grid[b-7qnrtx793p] {
        grid-template-columns: 1fr;
    }

    .audit-event-information[b-7qnrtx793p] {
        grid-template-columns: 1fr;
        gap: 1.15rem;
    }

    .audit-event-head[b-7qnrtx793p] {
        align-items: flex-start;
    }
}

@media (max-width: 575.98px) {
    .audit-header[b-7qnrtx793p] {
        flex-direction: column;
        align-items: stretch;
    }

    .audit-refresh[b-7qnrtx793p] {
        width: 100%;
    }

    .audit-stat-grid[b-7qnrtx793p] {
        gap: 0.65rem;
    }

    .audit-stat[b-7qnrtx793p] {
        padding: 0.95rem;
    }

        .audit-stat > strong[b-7qnrtx793p] {
            font-size: 1.7rem;
        }

        .audit-stat > span[b-7qnrtx793p] {
            font-size: 0.65rem;
        }

    .audit-filter-panel[b-7qnrtx793p] {
        padding: 1rem;
    }

    .audit-event-head[b-7qnrtx793p],
    .audit-event-content[b-7qnrtx793p] {
        padding: 1rem;
    }

    .audit-footer[b-7qnrtx793p] {
        flex-direction: column;
        align-items: stretch;
    }

    .audit-pagination[b-7qnrtx793p] {
        justify-content: space-between;
    }

        .audit-pagination span[b-7qnrtx793p] {
            font-size: 0.72rem;
        }
}

@media (max-width: 380px) {
    .audit-stat-grid[b-7qnrtx793p] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .audit-page *[b-7qnrtx793p] {
        scroll-behavior: auto;
        transition: none;
    }
}
/* /Components/Pages/Platform/PlatformBackup.razor.rz.scp.css */

/* =========================================================
   CLEANDATION – PLATFORM BACKUP & RECOVERY
   ========================================================= */

.backup-page[b-sczoxpgt6p] {
    width: 100%;
    padding-bottom: 3rem;
    color: #172033;
}

    .backup-page *[b-sczoxpgt6p],
    .backup-page *[b-sczoxpgt6p]::before,
    .backup-page *[b-sczoxpgt6p]::after {
        box-sizing: border-box;
    }

/* =========================================================
   SEITENKOPF
   ========================================================= */

.backup-header[b-sczoxpgt6p] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.backup-eyebrow[b-sczoxpgt6p] {
    margin-bottom: 0.55rem;
    color: #2575cc;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.backup-header h1[b-sczoxpgt6p] {
    margin: 0;
    color: #142238;
    font-size: clamp(1.65rem, 2.5vw, 2.35rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.backup-header p[b-sczoxpgt6p] {
    margin: 0.65rem 0 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
}

.backup-back-link[b-sczoxpgt6p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.6rem 1rem;
    color: #42536a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .backup-back-link:hover[b-sczoxpgt6p] {
        color: #176ac1;
        background: #f6faff;
        border-color: #a7c7eb;
    }

/* =========================================================
   HINWEIS
   ========================================================= */

.backup-notice[b-sczoxpgt6p] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
    color: #245d91;
    background: #f0f7ff;
    border: 1px solid #cbdff7;
    border-radius: 13px;
}

.backup-notice-icon[b-sczoxpgt6p] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    color: #176ac1;
    background: #dcecff;
    border-radius: 9px;
    font-size: 1rem;
    font-weight: 800;
}

.backup-notice strong[b-sczoxpgt6p] {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.88rem;
}

.backup-notice p[b-sczoxpgt6p] {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.6;
}

/* =========================================================
   STATUSKARTEN
   ========================================================= */

.backup-stats[b-sczoxpgt6p] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.95rem;
    margin-bottom: 2rem;
}

.backup-stat-card[b-sczoxpgt6p] {
    min-width: 0;
    padding: 1.3rem;
    background: #ffffff;
    border: 1px solid #e1e8f1;
    border-top: 3px solid #dfe6ef;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(20, 40, 70, 0.035);
}

.backup-stat-card-info[b-sczoxpgt6p] {
    border-top-color: #2979d5;
}

.backup-stat-card-success[b-sczoxpgt6p] {
    border-top-color: #26a36b;
}

.backup-stat-card-warning[b-sczoxpgt6p] {
    border-top-color: #e7aa35;
}

.backup-stat-card-neutral[b-sczoxpgt6p] {
    border-top-color: #94a3b8;
}

.backup-stat-top[b-sczoxpgt6p] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}

.backup-stat-label[b-sczoxpgt6p] {
    color: #67778d;
    font-size: 0.71rem;
    font-weight: 800;
    line-height: 1.45;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.backup-stat-icon[b-sczoxpgt6p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    color: #4078b7;
    background: #edf5ff;
    border-radius: 9px;
    font-size: 1rem;
    font-weight: 800;
}

.backup-stat-value[b-sczoxpgt6p] {
    margin-top: 1.15rem;
    color: #17283e;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

.backup-stat-description[b-sczoxpgt6p] {
    margin-top: 0.65rem;
    color: #8491a1;
    font-size: 0.76rem;
    line-height: 1.5;
}

/* =========================================================
   ÜBERWACHUNGSFUNKTIONEN
   ========================================================= */

.backup-section[b-sczoxpgt6p] {
    margin-bottom: 2rem;
}

.backup-section-header[b-sczoxpgt6p] {
    margin-bottom: 1.05rem;
}

.backup-section-kicker[b-sczoxpgt6p] {
    margin-bottom: 0.3rem;
    color: #6688b0;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.11em;
}

.backup-section-header h2[b-sczoxpgt6p] {
    margin: 0;
    color: #19283e;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.018em;
}

.backup-section-header p[b-sczoxpgt6p] {
    margin: 0.35rem 0 0;
    color: #718096;
    font-size: 0.84rem;
    line-height: 1.5;
}

.backup-panel[b-sczoxpgt6p] {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e1e8f1;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(20, 40, 70, 0.035);
}

.backup-feature-row[b-sczoxpgt6p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.3rem;
    border-bottom: 1px solid #edf1f5;
}

    .backup-feature-row:last-child[b-sczoxpgt6p] {
        border-bottom: none;
    }

.backup-feature-name[b-sczoxpgt6p] {
    color: #26374c;
    font-size: 0.86rem;
    font-weight: 750;
}

.backup-feature-description[b-sczoxpgt6p] {
    margin-top: 0.3rem;
    color: #8692a2;
    font-size: 0.76rem;
    line-height: 1.5;
}

.backup-status-badge[b-sczoxpgt6p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0.4rem 0.7rem;
    color: #63748a;
    background: #f1f5f9;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 750;
    white-space: nowrap;
}

.backup-status-badge-success[b-sczoxpgt6p] {
    color: #16794b;
    background: #e8f7ef;
}

.backup-status-badge-warning[b-sczoxpgt6p] {
    color: #956517;
    background: #fff4d9;
}

.backup-status-badge-danger[b-sczoxpgt6p] {
    color: #ae3340;
    background: #fdecef;
}

.backup-panel-footer[b-sczoxpgt6p] {
    padding: 1rem 1.3rem;
    color: #8592a3;
    background: #fbfcfe;
    border-top: 1px solid #edf1f5;
    font-size: 0.75rem;
    line-height: 1.55;
}

/* =========================================================
   ZUGÄNGLICHKEIT
   ========================================================= */

.backup-page a:focus-visible[b-sczoxpgt6p],
.backup-page button:focus-visible[b-sczoxpgt6p] {
    outline: 3px solid #6ba8f0;
    outline-offset: 3px;
}

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

@media (max-width: 1399.98px) {
    .backup-stats[b-sczoxpgt6p] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .backup-header[b-sczoxpgt6p] {
        flex-direction: column;
        align-items: stretch;
    }

    .backup-back-link[b-sczoxpgt6p] {
        align-self: flex-start;
    }

    .backup-feature-row[b-sczoxpgt6p] {
        align-items: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 575.98px) {
    .backup-page[b-sczoxpgt6p] {
        padding-bottom: 2rem;
    }

    .backup-stats[b-sczoxpgt6p] {
        gap: 0.7rem;
    }

    .backup-stat-card[b-sczoxpgt6p] {
        padding: 1rem;
        border-radius: 13px;
    }

    .backup-stat-label[b-sczoxpgt6p] {
        font-size: 0.65rem;
    }

    .backup-stat-value[b-sczoxpgt6p] {
        font-size: 1.05rem;
    }

    .backup-stat-description[b-sczoxpgt6p] {
        font-size: 0.7rem;
    }
}

@media (max-width: 380px) {
    .backup-stats[b-sczoxpgt6p] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .backup-back-link[b-sczoxpgt6p] {
        transition: none;
    }
}
/* /Components/Pages/Platform/PlatformBackupAlert.razor.rz.scp.css */

/* =========================================================
   CLEANDATION – PLATFORM BACKUP ALERT
   ========================================================= */

.backup-alert[b-6vqjj5guo1] {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.75rem;
    border: 1px solid;
    border-radius: 13px;
    box-shadow: 0 4px 16px rgba(20, 40, 70, 0.035);
}

/* =========================================================
   FEHLER
   ========================================================= */

.backup-alert-danger[b-6vqjj5guo1] {
    color: #962e3b;
    background: #fff5f5;
    border-color: #f1c8ce;
}

/* =========================================================
   WARNUNG
   ========================================================= */

.backup-alert-warning[b-6vqjj5guo1] {
    color: #8c631e;
    background: #fffaf0;
    border-color: #f0d9a7;
}

/* =========================================================
   NICHT VERFÜGBAR
   ========================================================= */

.backup-alert-neutral[b-6vqjj5guo1] {
    color: #42536a;
    background: #f8fafc;
    border-color: #dbe4ee;
}

/* =========================================================
   ICON
   ========================================================= */

.backup-alert-icon[b-6vqjj5guo1] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 850;
}

.backup-alert-danger .backup-alert-icon[b-6vqjj5guo1] {
    background: #fde3e5;
}

.backup-alert-warning .backup-alert-icon[b-6vqjj5guo1] {
    background: #fff0cb;
}

.backup-alert-neutral .backup-alert-icon[b-6vqjj5guo1] {
    background: #e8eef6;
}

/* =========================================================
   INHALT
   ========================================================= */

.backup-alert-content[b-6vqjj5guo1] {
    flex: 1;
    min-width: 0;
}

    .backup-alert-content strong[b-6vqjj5guo1] {
        display: block;
        font-size: 0.88rem;
        font-weight: 800;
        line-height: 1.45;
    }

    .backup-alert-content p[b-6vqjj5guo1] {
        margin: 0.3rem 0 0;
        font-size: 0.8rem;
        line-height: 1.5;
    }

.backup-alert-meta[b-6vqjj5guo1] {
    margin-top: 0.35rem;
    font-size: 0.74rem;
    opacity: 0.85;
}

/* =========================================================
   DETAILLINK
   ========================================================= */

.backup-alert-link[b-6vqjj5guo1] {
    flex-shrink: 0;
    color: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

    .backup-alert-link:hover[b-6vqjj5guo1] {
        color: inherit;
        text-decoration: underline;
    }

    .backup-alert-link:focus-visible[b-6vqjj5guo1] {
        outline: 3px solid #6ba8f0;
        outline-offset: 4px;
    }

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

@media (max-width: 767.98px) {

    .backup-alert[b-6vqjj5guo1] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .backup-alert-link[b-6vqjj5guo1] {
        margin-left: 50px;
    }
}

@media (max-width: 380px) {

    .backup-alert-link[b-6vqjj5guo1] {
        width: 100%;
        margin-left: 0;
    }
}
/* /Components/Pages/Platform/PlatformCompanies.razor.rz.scp.css */

/* ========================================================
   CleanDation – Platform Firmenübersicht
   ======================================================== */

.platform-companies-page[b-cg6x1z051v] {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding-bottom: 3rem;
    color: #172033;
}

    .platform-companies-page *[b-cg6x1z051v],
    .platform-companies-page *[b-cg6x1z051v]::before,
    .platform-companies-page *[b-cg6x1z051v]::after {
        box-sizing: border-box;
    }

/* Seitenkopf */

.platform-companies-header[b-cg6x1z051v] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-bottom: 1.75rem;
}

.platform-companies-page .platform-eyebrow[b-cg6x1z051v] {
    margin-bottom: 0.45rem;
    color: #247bd1;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.platform-companies-header h1[b-cg6x1z051v] {
    margin: 0;
    font-size: clamp(1.65rem, 2.5vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    color: #16263c;
}

.platform-companies-header p[b-cg6x1z051v] {
    margin: 0.45rem 0 0;
    font-size: 0.92rem;
    color: #64748b;
    line-height: 1.5;
}

.platform-refresh-btn[b-cg6x1z051v] {
    min-height: 42px;
    padding: 0.6rem 1rem;
    font-weight: 650;
    border-radius: 10px;
}

/* Übersichtskarten */

.platform-company-overview[b-cg6x1z051v] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.65rem;
}

.platform-company-overview-card[b-cg6x1z051v] {
    min-width: 0;
    padding: 1.25rem 1.35rem;
    background: #ffffff;
    border: 1px solid #e0e7ef;
    border-top: 3px solid #2d83d8;
    border-radius: 15px;
    box-shadow: 0 5px 18px rgba(25, 49, 81, 0.035);
}

.platform-company-overview-card-success[b-cg6x1z051v] {
    border-top-color: #20a16a;
}

.platform-company-overview-card-danger[b-cg6x1z051v] {
    border-top-color: #df5661;
}

.platform-company-overview-label[b-cg6x1z051v] {
    color: #697b91;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.platform-company-overview-value[b-cg6x1z051v] {
    margin-top: 0.55rem;
    color: #182940;
    font-size: 2.15rem;
    font-weight: 850;
    letter-spacing: -0.05em;
    line-height: 1.1;
}

.platform-company-overview-hint[b-cg6x1z051v] {
    margin-top: 0.5rem;
    color: #8995a5;
    font-size: 0.76rem;
}

/* Filterbereich */

.platform-company-filter-panel[b-cg6x1z051v] {
    padding: 1.4rem;
    margin-bottom: 1.4rem;
    background: #ffffff;
    border: 1px solid #e0e7ef;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(25, 49, 81, 0.035);
}

.platform-company-filter-header[b-cg6x1z051v] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
}

    .platform-company-filter-header h2[b-cg6x1z051v] {
        margin: 0;
        color: #223249;
        font-size: 1rem;
        font-weight: 800;
    }

    .platform-company-filter-header p[b-cg6x1z051v] {
        margin: 0.25rem 0 0;
        color: #8290a2;
        font-size: 0.8rem;
    }

.platform-filter-reset-link[b-cg6x1z051v] {
    padding: 0;
    background: transparent;
    border: 0;
    color: #176ac1;
    font-size: 0.8rem;
    font-weight: 750;
    cursor: pointer;
    white-space: nowrap;
}

    .platform-filter-reset-link:hover[b-cg6x1z051v] {
        text-decoration: underline;
    }

.platform-company-filters[b-cg6x1z051v] {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.platform-company-filter-field[b-cg6x1z051v] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.45rem;
}

    .platform-company-filter-field label[b-cg6x1z051v] {
        color: #41536b;
        font-size: 0.78rem;
        font-weight: 750;
    }

    .platform-company-filter-field .form-control[b-cg6x1z051v],
    .platform-company-filter-field .form-select[b-cg6x1z051v] {
        width: 100%;
        min-height: 45px;
        border: 1px solid #d5dfeb;
        border-radius: 10px;
        color: #24364c;
        background-color: #ffffff;
        font-size: 0.87rem;
    }

        .platform-company-filter-field .form-control:focus[b-cg6x1z051v],
        .platform-company-filter-field .form-select:focus[b-cg6x1z051v] {
            border-color: #438ddd;
            box-shadow: 0 0 0 3px rgba(49, 130, 215, 0.12);
        }

/* Suchergebnis */

.platform-company-results[b-cg6x1z051v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 0.85rem;
}

.platform-company-results-main[b-cg6x1z051v] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    color: #61738a;
    font-size: 0.88rem;
}

    .platform-company-results-main strong[b-cg6x1z051v] {
        color: #22354e;
        font-weight: 800;
    }

.platform-filter-active-label[b-cg6x1z051v] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.55rem;
    padding: 0.25rem 0.55rem;
    color: #225c9f;
    background: #eaf4ff;
    border-radius: 999px;
    font-size: 0.69rem;
    font-weight: 750;
}

.platform-company-updated[b-cg6x1z051v] {
    color: #8995a5;
    font-size: 0.76rem;
}

/* Tabelle */

.platform-company-table-wrapper[b-cg6x1z051v] {
    width: 100%;
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid #e0e7ef;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(25, 49, 81, 0.035);
}

.platform-company-table[b-cg6x1z051v] {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    table-layout: auto;
}

    .platform-company-table thead[b-cg6x1z051v] {
        background: #f7f9fc;
    }

    .platform-company-table th[b-cg6x1z051v] {
        padding: 1rem 1.2rem;
        color: #7a8ba0;
        border-bottom: 1px solid #e4eaf2;
        font-size: 0.68rem;
        font-weight: 850;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.065em;
        white-space: nowrap;
    }

    .platform-company-table td[b-cg6x1z051v] {
        padding: 1.15rem 1.2rem;
        border-bottom: 1px solid #edf1f5;
        color: #2c3c51;
        font-size: 0.84rem;
        vertical-align: middle;
    }

    .platform-company-table tbody tr:last-child td[b-cg6x1z051v] {
        border-bottom: 0;
    }

    .platform-company-table tbody tr[b-cg6x1z051v] {
        transition: background-color 0.15s ease;
    }

        .platform-company-table tbody tr:hover[b-cg6x1z051v] {
            background: #f8fbff;
        }

    .platform-company-table .platform-company-row-inactive[b-cg6x1z051v] {
        background: #fffafa;
    }

        .platform-company-table .platform-company-row-inactive:hover[b-cg6x1z051v] {
            background: #fff4f5;
        }

.platform-company-primary[b-cg6x1z051v] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    min-width: 155px;
}

.platform-company-name-link[b-cg6x1z051v] {
    max-width: 280px;
    color: #172b44;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.4;
    text-decoration: none;
    overflow-wrap: anywhere;
}

    .platform-company-name-link:hover[b-cg6x1z051v] {
        color: #176bc1;
        text-decoration: underline;
    }

.platform-company-id[b-cg6x1z051v],
.platform-company-created[b-cg6x1z051v] {
    color: #8a97a8;
    font-size: 0.72rem;
}

/* Statusanzeige */

.platform-company-status[b-cg6x1z051v] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.platform-company-status-active[b-cg6x1z051v] {
    color: #167747;
    background: #e9f7ef;
    border: 1px solid #ccebd9;
}

.platform-company-status-inactive[b-cg6x1z051v] {
    color: #b13a48;
    background: #fff0f1;
    border: 1px solid #f3cdd3;
}

.platform-status-dot[b-cg6x1z051v] {
    display: inline-block;
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: currentColor;
}

/* Tarif und Vertragsstatus */

.platform-contract-cell[b-cg6x1z051v] {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 130px;
}

.platform-plan-name[b-cg6x1z051v] {
    color: #253951;
    font-size: 0.85rem;
    font-weight: 800;
}

.platform-contract-status[b-cg6x1z051v] {
    display: inline-flex;
    align-items: center;
    padding: 0.33rem 0.6rem;
    border-radius: 7px;
    font-size: 0.71rem;
    font-weight: 750;
    white-space: nowrap;
}

.platform-contract-status-trial[b-cg6x1z051v] {
    color: #185e9a;
    background: #e9f4ff;
}

.platform-contract-status-active[b-cg6x1z051v] {
    color: #157349;
    background: #e9f7ef;
}

.platform-contract-status-warning[b-cg6x1z051v] {
    color: #946213;
    background: #fff3d9;
}

.platform-contract-status-muted[b-cg6x1z051v] {
    color: #697689;
    background: #eef1f5;
}

.platform-contract-status-default[b-cg6x1z051v] {
    color: #64748b;
    background: #f1f4f8;
}

.platform-trial-date[b-cg6x1z051v] {
    color: #8290a1;
    font-size: 0.71rem;
    line-height: 1.45;
}

/* Login */

.platform-login-cell[b-cg6x1z051v] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.platform-login-date[b-cg6x1z051v] {
    color: #354960;
    font-size: 0.82rem;
    white-space: nowrap;
}

.platform-login-activity[b-cg6x1z051v] {
    font-size: 0.72rem;
    font-weight: 750;
}

.platform-login-activity-active[b-cg6x1z051v] {
    color: #17864f;
}

.platform-login-activity-warning[b-cg6x1z051v] {
    color: #a77919;
}

.platform-login-activity-inactive[b-cg6x1z051v] {
    color: #c84a55;
}

.platform-login-activity-none[b-cg6x1z051v],
.platform-no-activity[b-cg6x1z051v] {
    color: #8b98a8;
    font-size: 0.77rem;
}

/* Aktionen */

.platform-actions-heading[b-cg6x1z051v],
.platform-actions-cell[b-cg6x1z051v] {
    text-align: right !important;
}

.platform-details-button[b-cg6x1z051v] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.65rem;
    min-height: 39px;
    padding: 0.5rem 0.8rem;
    border-radius: 9px;
    font-size: 0.8rem;
    font-weight: 750;
    white-space: nowrap;
}

/* Pagination */

.platform-company-list-footer[b-cg6x1z051v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.1rem;
}

.platform-company-page-range[b-cg6x1z051v] {
    color: #7d8b9c;
    font-size: 0.8rem;
}

.platform-pagination[b-cg6x1z051v] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
}

    .platform-pagination .btn[b-cg6x1z051v] {
        min-height: 39px;
        padding: 0.45rem 0.9rem;
        border-radius: 9px;
        font-weight: 700;
        font-size: 0.8rem;
    }

.platform-pagination-label[b-cg6x1z051v] {
    color: #53647a;
    font-size: 0.8rem;
    font-weight: 750;
    white-space: nowrap;
}

/* Ladezustand und keine Ergebnisse */

.platform-company-state[b-cg6x1z051v] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 120px;
    padding: 1.5rem;
    background: white;
    border: 1px solid #e0e7ef;
    border-radius: 15px;
    color: #63748b;
}

.platform-company-empty[b-cg6x1z051v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.65rem;
    padding: 3rem 1.5rem;
    background: #ffffff;
    border: 1px solid #e0e7ef;
    border-radius: 16px;
}

.platform-company-empty-icon[b-cg6x1z051v] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #eef5fd;
    color: #2877c6;
    font-size: 1.8rem;
}

.platform-company-empty h2[b-cg6x1z051v] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #24374e;
}

.platform-company-empty p[b-cg6x1z051v] {
    margin: 0 0 0.55rem;
    max-width: 420px;
    color: #7b899b;
    font-size: 0.87rem;
    line-height: 1.5;
}

/* Tastaturbedienung */

.platform-companies-page a:focus-visible[b-cg6x1z051v],
.platform-companies-page button:focus-visible[b-cg6x1z051v],
.platform-companies-page input:focus-visible[b-cg6x1z051v],
.platform-companies-page select:focus-visible[b-cg6x1z051v] {
    outline: 3px solid #75aaf0;
    outline-offset: 2px;
}

/* Responsive */

@media (max-width: 1100px) {
    .platform-company-filters[b-cg6x1z051v] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .platform-company-search[b-cg6x1z051v] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .platform-company-overview[b-cg6x1z051v] {
        gap: 0.7rem;
    }

    .platform-company-overview-card[b-cg6x1z051v] {
        padding: 1rem;
    }

    .platform-company-overview-value[b-cg6x1z051v] {
        font-size: 1.75rem;
    }

    .platform-company-overview-hint[b-cg6x1z051v] {
        display: none;
    }

    .platform-company-filter-panel[b-cg6x1z051v] {
        padding: 1.1rem;
    }

    .platform-company-filters[b-cg6x1z051v] {
        grid-template-columns: 1fr;
    }

    .platform-company-search[b-cg6x1z051v] {
        grid-column: auto;
    }

    .platform-company-table[b-cg6x1z051v] {
        min-width: 700px;
    }

        .platform-company-table th[b-cg6x1z051v],
        .platform-company-table td[b-cg6x1z051v] {
            padding: 0.95rem;
        }
}

@media (max-width: 575.98px) {
    .platform-companies-header[b-cg6x1z051v] {
        flex-direction: column;
        align-items: stretch;
    }

    .platform-refresh-btn[b-cg6x1z051v] {
        width: 100%;
    }

    .platform-company-overview[b-cg6x1z051v] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .platform-company-overview-card[b-cg6x1z051v] {
        padding: 0.75rem;
        border-radius: 11px;
    }

    .platform-company-overview-label[b-cg6x1z051v] {
        font-size: 0.58rem;
        line-height: 1.35;
    }

    .platform-company-overview-value[b-cg6x1z051v] {
        font-size: 1.5rem;
    }

    .platform-company-filter-header[b-cg6x1z051v] {
        flex-direction: column;
        align-items: stretch;
    }

    .platform-filter-reset-link[b-cg6x1z051v] {
        align-self: flex-start;
    }

    .platform-company-list-footer[b-cg6x1z051v] {
        flex-direction: column;
        align-items: stretch;
    }

    .platform-pagination[b-cg6x1z051v] {
        justify-content: space-between;
    }

    .platform-pagination-label[b-cg6x1z051v] {
        font-size: 0.73rem;
    }
}

@media (max-width: 380px) {
    .platform-company-overview[b-cg6x1z051v] {
        grid-template-columns: 1fr;
    }

    .platform-company-overview-hint[b-cg6x1z051v] {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .platform-company-table tbody tr[b-cg6x1z051v] {
        transition: none;
    }
}
/* /Components/Pages/Platform/PlatformCompanyAudit.razor.rz.scp.css */

/* =========================================================
   CleanDation Platform – Firmenhistorie
   ========================================================= */

.company-audit-page[b-9ftgishybp] {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0.25rem 0 3rem;
    color: #1b2a40;
}

    .company-audit-page *[b-9ftgishybp],
    .company-audit-page *[b-9ftgishybp]::before,
    .company-audit-page *[b-9ftgishybp]::after {
        box-sizing: border-box;
    }

/* Navigation */

.company-audit-back[b-9ftgishybp] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 42px;
    margin-bottom: 1.4rem;
    padding: 0.55rem 0.85rem;
    color: #4e637d;
    background: #ffffff;
    border: 1px solid #dfe7f0;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 750;
    text-decoration: none;
}

    .company-audit-back:hover[b-9ftgishybp] {
        color: #176bc0;
        border-color: #b3d0ed;
    }

    .company-audit-back span[b-9ftgishybp] {
        font-size: 1.1rem;
    }

/* Seitenkopf */

.company-audit-header[b-9ftgishybp] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-bottom: 1.65rem;
}

.company-audit-eyebrow[b-9ftgishybp] {
    margin-bottom: 0.45rem;
    color: #287dd0;
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.12em;
}

.company-audit-header h1[b-9ftgishybp] {
    margin: 0;
    color: #192a40;
    font-size: clamp(1.75rem, 2.5vw, 2.3rem);
    font-weight: 850;
    letter-spacing: -0.035em;
}

.company-audit-header p[b-9ftgishybp] {
    max-width: 700px;
    margin: 0.5rem 0 0;
    color: #748399;
    font-size: 0.9rem;
    line-height: 1.6;
}

.company-audit-refresh[b-9ftgishybp] {
    min-height: 42px;
    padding: 0.55rem 1rem;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 750;
}

/* Firmenbanner */

.company-audit-company-banner[b-9ftgishybp] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.4rem;
    background: linear-gradient( 115deg, #ffffff 0%, #f2f8ff 100% );
    border: 1px solid #dce8f5;
    border-radius: 16px;
}

.company-audit-company-avatar[b-9ftgishybp] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    color: #226cba;
    background: #dfedfd;
    border-radius: 15px;
    font-size: 1.2rem;
    font-weight: 850;
}

.company-audit-company-info[b-9ftgishybp] {
    flex: 1;
    min-width: 0;
}

.company-audit-mini-label[b-9ftgishybp] {
    display: block;
    margin-bottom: 0.3rem;
    color: #7c8ca0;
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.1em;
}

.company-audit-company-info h2[b-9ftgishybp] {
    margin: 0 0 0.25rem;
    color: #23364e;
    font-size: 1.15rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.company-audit-company-info > span:last-child[b-9ftgishybp] {
    color: #8795a6;
    font-size: 0.76rem;
}

.company-audit-contract-link[b-9ftgishybp] {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 0.81rem;
    font-weight: 750;
    white-space: nowrap;
}

/* Kennzahlen */

.company-audit-stats[b-9ftgishybp] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.5rem;
}

.company-audit-stat[b-9ftgishybp] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    padding: 1.2rem;
    background: #ffffff;
    border: 1px solid #e1e8f1;
    border-top: 3px solid #3988d8;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(27, 50, 80, 0.035);
}

    .company-audit-stat:nth-child(2)[b-9ftgishybp] {
        border-top-color: #6b82d8;
    }

    .company-audit-stat:nth-child(3)[b-9ftgishybp] {
        border-top-color: #e06470;
    }

    .company-audit-stat:nth-child(4)[b-9ftgishybp] {
        border-top-color: #28a574;
    }

    .company-audit-stat > span[b-9ftgishybp] {
        color: #6b7c91;
        font-size: 0.71rem;
        font-weight: 800;
        line-height: 1.4;
        text-transform: uppercase;
        letter-spacing: 0.035em;
    }

    .company-audit-stat > strong[b-9ftgishybp] {
        margin: 0.2rem 0;
        color: #172a42;
        font-size: 2rem;
        font-weight: 850;
        line-height: 1.1;
    }

    .company-audit-stat > small[b-9ftgishybp] {
        color: #8e9aaa;
        font-size: 0.72rem;
        line-height: 1.45;
    }

/* Filter */

.company-audit-filters[b-9ftgishybp] {
    margin-bottom: 1.4rem;
    padding: 1.3rem 1.4rem;
    background: #ffffff;
    border: 1px solid #e1e8f1;
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(27, 50, 80, 0.035);
}

.company-audit-filter-header[b-9ftgishybp] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1.15rem;
}

    .company-audit-filter-header h2[b-9ftgishybp] {
        margin: 0;
        color: #25384e;
        font-size: 1rem;
        font-weight: 850;
    }

    .company-audit-filter-header p[b-9ftgishybp] {
        margin: 0.3rem 0 0;
        color: #8492a3;
        font-size: 0.79rem;
    }

.company-audit-clear[b-9ftgishybp] {
    padding: 0;
    color: #206fc0;
    background: none;
    border: none;
    font-size: 0.8rem;
    font-weight: 750;
    cursor: pointer;
}

    .company-audit-clear:hover[b-9ftgishybp] {
        text-decoration: underline;
    }

.company-audit-filter-grid[b-9ftgishybp] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
    gap: 1rem;
}

.company-audit-field[b-9ftgishybp] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

    .company-audit-field label[b-9ftgishybp] {
        color: #43566d;
        font-size: 0.79rem;
        font-weight: 750;
    }

    .company-audit-field .form-control[b-9ftgishybp],
    .company-audit-field .form-select[b-9ftgishybp] {
        width: 100%;
        min-height: 46px;
        border: 1px solid #d6dfeb;
        border-radius: 10px;
        font-size: 0.86rem;
    }

        .company-audit-field .form-control:focus[b-9ftgishybp],
        .company-audit-field .form-select:focus[b-9ftgishybp] {
            border-color: #438cdd;
            box-shadow: 0 0 0 3px rgba(55, 134, 220, 0.12);
        }

/* Ergebniszeile */

.company-audit-results[b-9ftgishybp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    color: #65778d;
    font-size: 0.86rem;
}

    .company-audit-results strong[b-9ftgishybp] {
        color: #223750;
        font-weight: 850;
    }

.company-audit-filter-badge[b-9ftgishybp] {
    display: inline-flex;
    margin-left: 0.5rem;
    padding: 0.22rem 0.55rem;
    color: #2363a9;
    background: #eaf4ff;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 750;
}

.company-audit-updated[b-9ftgishybp] {
    color: #8f9bac;
    font-size: 0.75rem;
}

/* Ereignisliste */

.company-audit-event-list[b-9ftgishybp] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.company-audit-event[b-9ftgishybp] {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e1e8f1;
    border-radius: 15px;
    box-shadow: 0 4px 16px rgba(27, 50, 80, 0.035);
}

.company-audit-event-head[b-9ftgishybp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 1rem 1.2rem;
    background: #f8fafd;
    border-bottom: 1px solid #e9eef5;
}

.company-audit-event-title[b-9ftgishybp] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.company-audit-event-id[b-9ftgishybp] {
    color: #97a2b0;
    font-size: 0.73rem;
}

.company-audit-event-time[b-9ftgishybp] {
    color: #6a7e95;
    font-size: 0.79rem;
    font-weight: 700;
    white-space: nowrap;
}

.company-audit-event-body[b-9ftgishybp] {
    padding: 1.2rem;
}

.company-audit-event-meta[b-9ftgishybp] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

    .company-audit-event-meta > div[b-9ftgishybp] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        min-width: 0;
        gap: 0.3rem;
    }

.company-audit-meta-label[b-9ftgishybp] {
    color: #8a97a8;
    font-size: 0.67rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.company-audit-event-meta strong[b-9ftgishybp] {
    color: #2b3c53;
    font-size: 0.89rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.company-audit-event-meta small[b-9ftgishybp] {
    color: #8796a8;
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

/* Aktions-Badges */

.company-audit-action[b-9ftgishybp] {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.7rem;
    border-radius: 8px;
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1.4;
}

.company-audit-action-danger[b-9ftgishybp] {
    color: #ae3446;
    background: #fdecef;
}

.company-audit-action-success[b-9ftgishybp] {
    color: #167b4e;
    background: #e7f8ef;
}

.company-audit-action-info[b-9ftgishybp] {
    color: #19699d;
    background: #e8f5fc;
}

.company-audit-action-primary[b-9ftgishybp] {
    color: #225eab;
    background: #eaf2fe;
}

.company-audit-action-muted[b-9ftgishybp] {
    color: #657488;
    background: #eef2f6;
}

/* Vertragsdetails */

.company-audit-details-actions[b-9ftgishybp] {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid #edf1f5;
}

.company-audit-toggle[b-9ftgishybp] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 40px;
    padding: 0.5rem 0.85rem;
    color: #1c68b4;
    background: #eff7ff;
    border: 1px solid #d1e4f8;
    border-radius: 9px;
    font-size: 0.8rem;
    font-weight: 750;
    cursor: pointer;
}

    .company-audit-toggle:hover[b-9ftgishybp] {
        color: #14528f;
        background: #e4f1ff;
    }

    .company-audit-toggle span[b-9ftgishybp] {
        font-size: 1.05rem;
        font-weight: 850;
    }

.company-audit-change-grid[b-9ftgishybp] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 1rem;
}

.company-audit-change-card[b-9ftgishybp] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    min-width: 0;
    padding: 1.15rem;
    background: #f8fafd;
    border: 1px solid #e3eaf2;
    border-radius: 12px;
}

.company-audit-change-card-new[b-9ftgishybp] {
    background: #f2f8ff;
    border-color: #d3e5fa;
}

.company-audit-change-label[b-9ftgishybp] {
    margin-bottom: 0.4rem;
    color: #7b8da2;
    font-size: 0.67rem;
    font-weight: 850;
    letter-spacing: 0.07em;
}

.company-audit-change-card > strong[b-9ftgishybp] {
    color: #1e3048;
    font-size: 1.25rem;
    font-weight: 850;
}

.company-audit-change-card > span:not(.company-audit-change-label)[b-9ftgishybp] {
    color: #54687f;
    font-size: 0.86rem;
}

.company-audit-change-dates[b-9ftgishybp] {
    width: 100%;
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    border-top: 1px solid #e0e7f0;
}

    .company-audit-change-dates > div[b-9ftgishybp] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.4rem 0;
    }

    .company-audit-change-dates span[b-9ftgishybp] {
        color: #8492a4;
        font-size: 0.76rem;
    }

    .company-audit-change-dates b[b-9ftgishybp] {
        color: #374b63;
        font-size: 0.76rem;
        font-weight: 750;
    }

.company-audit-legacy[b-9ftgishybp] {
    margin: 1rem 0 0;
    padding: 0.9rem;
    color: #748399;
    background: #f8fafd;
    border: 1px solid #e6edf5;
    border-radius: 10px;
    font-size: 0.79rem;
    line-height: 1.6;
}

/* Pagination */

.company-audit-footer[b-9ftgishybp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.2rem;
}

    .company-audit-footer > span[b-9ftgishybp] {
        color: #7e8da1;
        font-size: 0.8rem;
    }

.company-audit-pagination[b-9ftgishybp] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

    .company-audit-pagination .btn[b-9ftgishybp] {
        min-height: 39px;
        padding: 0.5rem 0.9rem;
        border-radius: 9px;
        font-size: 0.79rem;
        font-weight: 750;
    }

    .company-audit-pagination > span[b-9ftgishybp] {
        color: #52677e;
        font-size: 0.8rem;
        font-weight: 750;
        white-space: nowrap;
    }

.company-audit-limit-note[b-9ftgishybp] {
    margin: 1.25rem 0 0;
    color: #8896a6;
    font-size: 0.75rem;
    line-height: 1.6;
}

/* Ladezustand und leere Historie */

.company-audit-state[b-9ftgishybp] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 125px;
    padding: 1.5rem;
    color: #65768b;
    background: #ffffff;
    border: 1px solid #e1e8f1;
    border-radius: 15px;
}

.company-audit-empty[b-9ftgishybp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 3rem 1.5rem;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e1e8f1;
    border-radius: 15px;
}

.company-audit-empty-icon[b-9ftgishybp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    color: #2a7ac7;
    background: #edf5fe;
    border-radius: 14px;
    font-size: 1.8rem;
}

.company-audit-empty h2[b-9ftgishybp] {
    margin: 0;
    color: #283a50;
    font-size: 1.05rem;
    font-weight: 850;
}

.company-audit-empty p[b-9ftgishybp] {
    max-width: 450px;
    margin: 0 0 0.5rem;
    color: #7d8da0;
    font-size: 0.85rem;
    line-height: 1.6;
}

/* Zugänglichkeit */

.company-audit-page a:focus-visible[b-9ftgishybp],
.company-audit-page button:focus-visible[b-9ftgishybp],
.company-audit-page input:focus-visible[b-9ftgishybp],
.company-audit-page select:focus-visible[b-9ftgishybp] {
    outline: 3px solid #76acf0;
    outline-offset: 3px;
}

/* Tablet */

@media (max-width: 1100px) {
    .company-audit-stats[b-9ftgishybp] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Smartphone */

@media (max-width: 767.98px) {
    .company-audit-filter-grid[b-9ftgishybp],
    .company-audit-event-meta[b-9ftgishybp],
    .company-audit-change-grid[b-9ftgishybp] {
        grid-template-columns: 1fr;
    }

    .company-audit-company-banner[b-9ftgishybp] {
        flex-wrap: wrap;
    }

    .company-audit-contract-link[b-9ftgishybp] {
        width: 100%;
    }

    .company-audit-event-head[b-9ftgishybp] {
        align-items: flex-start;
    }
}

@media (max-width: 575.98px) {
    .company-audit-header[b-9ftgishybp] {
        flex-direction: column;
        align-items: stretch;
    }

    .company-audit-refresh[b-9ftgishybp] {
        width: 100%;
    }

    .company-audit-stats[b-9ftgishybp] {
        gap: 0.65rem;
    }

    .company-audit-stat[b-9ftgishybp] {
        padding: 0.95rem;
    }

        .company-audit-stat > strong[b-9ftgishybp] {
            font-size: 1.7rem;
        }

        .company-audit-stat > span[b-9ftgishybp] {
            font-size: 0.65rem;
        }

    .company-audit-filters[b-9ftgishybp] {
        padding: 1rem;
    }

    .company-audit-event-head[b-9ftgishybp],
    .company-audit-event-body[b-9ftgishybp] {
        padding: 1rem;
    }

    .company-audit-footer[b-9ftgishybp] {
        flex-direction: column;
        align-items: stretch;
    }

    .company-audit-pagination[b-9ftgishybp] {
        justify-content: space-between;
    }

        .company-audit-pagination > span[b-9ftgishybp] {
            font-size: 0.73rem;
        }
}

@media (max-width: 380px) {
    .company-audit-stats[b-9ftgishybp] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .company-audit-page *[b-9ftgishybp] {
        transition: none;
    }
}
/* /Components/Pages/Platform/PlatformCompanyDetails.razor.rz.scp.css */

/* =========================================================
   CleanDation Platform – Firmendetails
   ========================================================= */

.company-details-page[b-wwkvlv2i1m] {
    width: 100%;
    max-width: 1540px;
    margin: 0 auto;
    padding: 0.3rem 0 3rem;
    color: #1b2a40;
}

    .company-details-page *[b-wwkvlv2i1m],
    .company-details-page *[b-wwkvlv2i1m]::before,
    .company-details-page *[b-wwkvlv2i1m]::after {
        box-sizing: border-box;
    }

/* Navigation und Seitenkopf */

.details-back-link[b-wwkvlv2i1m] {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 42px;
    margin-bottom: 1.5rem;
    padding: 0.55rem 0.9rem;
    color: #506780;
    background: #fff;
    border: 1px solid #dce5ef;
    border-radius: 10px;
    font-size: 0.83rem;
    font-weight: 750;
    text-decoration: none;
}

    .details-back-link:hover[b-wwkvlv2i1m] {
        color: #176abe;
        border-color: #aecdeb;
    }

    .details-back-link span[b-wwkvlv2i1m] {
        font-size: 1.05rem;
    }

.details-header[b-wwkvlv2i1m] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.details-heading[b-wwkvlv2i1m] {
    min-width: 0;
}

.details-eyebrow[b-wwkvlv2i1m],
.details-section-kicker[b-wwkvlv2i1m] {
    display: block;
    margin-bottom: 0.45rem;
    color: #287bce;
    font-size: 0.69rem;
    font-weight: 850;
    letter-spacing: 0.11em;
}

.details-title-line[b-wwkvlv2i1m] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
}

    .details-title-line h1[b-wwkvlv2i1m] {
        margin: 0;
        color: #182a41;
        font-size: clamp(1.65rem, 2.5vw, 2.35rem);
        font-weight: 850;
        letter-spacing: -0.035em;
        overflow-wrap: anywhere;
    }

.details-meta[b-wwkvlv2i1m] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 1.1rem;
    margin-top: 0.65rem;
    color: #7d8c9f;
    font-size: 0.81rem;
}

.details-refresh[b-wwkvlv2i1m] {
    min-height: 42px;
    border-radius: 10px;
    font-size: 0.83rem;
    font-weight: 750;
}

/* Firmenstatus */

.details-company-status[b-wwkvlv2i1m],
.details-contract-badge[b-wwkvlv2i1m] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.43rem 0.7rem;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 800;
    white-space: nowrap;
}

.details-company-status-active[b-wwkvlv2i1m],
.details-contract-active[b-wwkvlv2i1m] {
    color: #167949;
    background: #e8f7ee;
    border: 1px solid #ccebd9;
}

.details-company-status-locked[b-wwkvlv2i1m] {
    color: #ad3443;
    background: #fdecef;
    border: 1px solid #f1c7d0;
}

.details-status-dot[b-wwkvlv2i1m] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.details-contract-trial[b-wwkvlv2i1m] {
    color: #216da8;
    background: #e9f4ff;
}

.details-contract-warning[b-wwkvlv2i1m] {
    color: #986913;
    background: #fff3d8;
}

.details-contract-muted[b-wwkvlv2i1m] {
    color: #67768a;
    background: #edf1f5;
}

.details-contract-default[b-wwkvlv2i1m] {
    color: #64748b;
    background: #f1f4f8;
}

/* Vertragsübersicht */

.details-contract-strip[b-wwkvlv2i1m] {
    display: grid;
    grid-template-columns: 1fr 1fr 1.25fr;
    gap: 1rem;
    margin-bottom: 1.1rem;
    padding: 1.3rem;
    background: linear-gradient(110deg, #fff, #f6faff);
    border: 1px solid #dce7f3;
    border-radius: 16px;
}

.details-contract-item[b-wwkvlv2i1m] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    min-width: 0;
}

.details-mini-label[b-wwkvlv2i1m] {
    color: #7c8ca1;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.details-contract-item > strong[b-wwkvlv2i1m] {
    color: #243b55;
    font-size: 1.07rem;
    font-weight: 850;
}

.details-contract-secondary[b-wwkvlv2i1m] {
    font-size: 0.85rem !important;
    line-height: 1.5;
}

/* Schnellaktionen */

.details-action-bar[b-wwkvlv2i1m] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.8rem;
}

.details-action-link[b-wwkvlv2i1m] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
    min-height: 62px;
    padding: 0.85rem 1rem;
    color: #2e537a;
    background: #fff;
    border: 1px solid #dbe5f0;
    border-radius: 13px;
    font-size: 0.85rem;
    font-weight: 800;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

    .details-action-link:hover[b-wwkvlv2i1m] {
        color: #1767b7;
        background: #f7fbff;
        border-color: #b6d5f1;
        transform: translateY(-2px);
    }

.details-action-link-primary[b-wwkvlv2i1m] {
    color: #1d5c9b;
    background: #f1f7ff;
    border-color: #cfe2f7;
}

.details-action-link > span:nth-child(2)[b-wwkvlv2i1m] {
    flex: 1;
    min-width: 0;
}

.details-action-icon[b-wwkvlv2i1m] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    color: #226fbe;
    background: #e8f3ff;
    border-radius: 9px;
    font-size: 1.05rem;
}

.details-feedback[b-wwkvlv2i1m] {
    margin-bottom: 1.3rem;
    border-radius: 11px;
}

/* Abschnittsüberschriften */

.details-section[b-wwkvlv2i1m] {
    margin-top: 1.55rem;
    margin-bottom: 1.6rem;
}

.details-section-heading[b-wwkvlv2i1m] {
    margin-bottom: 1rem;
}

    .details-section-heading h2[b-wwkvlv2i1m] {
        margin: 0;
        color: #22364e;
        font-size: 1.15rem;
        font-weight: 850;
    }

    .details-section-heading p[b-wwkvlv2i1m] {
        margin: 0.35rem 0 0;
        color: #8391a3;
        font-size: 0.83rem;
    }

/* Kennzahlen */

.details-stats-grid[b-wwkvlv2i1m] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.details-stat-card[b-wwkvlv2i1m] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.55rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #e1e8f1;
    border-top: 3px solid #4d98dd;
    border-radius: 15px;
    box-shadow: 0 4px 18px rgba(20, 40, 70, 0.035);
}

    .details-stat-card:nth-child(2)[b-wwkvlv2i1m] {
        border-top-color: #6d86dc;
    }

    .details-stat-card:nth-child(3)[b-wwkvlv2i1m] {
        border-top-color: #31a579;
    }

.details-stat-card-warning[b-wwkvlv2i1m] {
    border-top-color: #e0a142;
}

.details-stat-card > span[b-wwkvlv2i1m] {
    color: #687c92;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.details-stat-card > strong[b-wwkvlv2i1m] {
    color: #182b43;
    font-size: 2.15rem;
    font-weight: 850;
    letter-spacing: -0.04em;
    line-height: 1;
}

.details-stat-card > small[b-wwkvlv2i1m] {
    color: #8f9bab;
    font-size: 0.74rem;
    line-height: 1.4;
}

/* Weitere Zahlen */

.details-more-stats[b-wwkvlv2i1m] {
    margin-top: 0.85rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e1e8f1;
    border-radius: 13px;
}

    .details-more-stats > summary[b-wwkvlv2i1m] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        min-height: 48px;
        padding: 0.75rem 1.1rem;
        color: #42617f;
        font-size: 0.82rem;
        font-weight: 800;
        cursor: pointer;
        list-style: none;
    }



        .details-more-stats > summary:hover[b-wwkvlv2i1m] {
            background: #f8fbff;
        }

        .details-more-stats > summary span[b-wwkvlv2i1m] {
            font-size: 1.1rem;
        }

    .details-more-stats[open] > summary[b-wwkvlv2i1m] {
        border-bottom: 1px solid #edf1f5;
    }

.details-extra-stats[b-wwkvlv2i1m] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.8rem;
    padding: 1rem;
}

    .details-extra-stats > div[b-wwkvlv2i1m] {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        padding: 0.85rem;
        background: #f6f9fc;
        border-radius: 10px;
    }

    .details-extra-stats span[b-wwkvlv2i1m] {
        color: #78899c;
        font-size: 0.74rem;
    }

    .details-extra-stats strong[b-wwkvlv2i1m] {
        color: #233951;
        font-size: 1.2rem;
        font-weight: 850;
    }

/* Panels */

.details-two-columns[b-wwkvlv2i1m] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.details-panel[b-wwkvlv2i1m] {
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e1e8f1;
    border-radius: 16px;
    box-shadow: 0 4px 17px rgba(20, 40, 70, 0.035);
}

.details-panel-heading[b-wwkvlv2i1m] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.9rem;
    padding: 1.2rem 1.3rem;
    background: #f9fbfe;
    border-bottom: 1px solid #e9eef5;
}

    .details-panel-heading h2[b-wwkvlv2i1m] {
        margin: 0;
        color: #24374e;
        font-size: 1.02rem;
        font-weight: 850;
    }

    .details-panel-heading p[b-wwkvlv2i1m] {
        margin: 0.35rem 0 0;
        color: #8593a4;
        font-size: 0.79rem;
        line-height: 1.5;
    }

.details-panel-body[b-wwkvlv2i1m] {
    padding: 1.2rem 1.3rem;
}

.details-section-count[b-wwkvlv2i1m] {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.6rem;
    color: #536b86;
    background: #eaf1f8;
    border-radius: 8px;
    font-size: 0.73rem;
    font-weight: 800;
}

.details-section-count-warning[b-wwkvlv2i1m] {
    color: #956318;
    background: #fff2d6;
}

.details-inline-link[b-wwkvlv2i1m] {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: #216cb8;
    font-size: 0.79rem;
    font-weight: 800;
    text-decoration: none;
}

    .details-inline-link:hover[b-wwkvlv2i1m] {
        text-decoration: underline;
    }

/* Freigabe */

.details-access-box[b-wwkvlv2i1m] {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid;
    border-radius: 11px;
}

.details-access-active[b-wwkvlv2i1m] {
    color: #216d48;
    background: #f1faf4;
    border-color: #d0ead9;
}

.details-access-blocked[b-wwkvlv2i1m] {
    color: #a43c49;
    background: #fff3f4;
    border-color: #f1cdd2;
}

.details-access-box strong[b-wwkvlv2i1m] {
    font-size: 0.91rem;
}

.details-access-box p[b-wwkvlv2i1m] {
    margin: 0.4rem 0 0;
    font-size: 0.79rem;
    line-height: 1.6;
}

.details-status-button[b-wwkvlv2i1m] {
    min-height: 43px;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    font-size: 0.81rem;
    font-weight: 800;
}

.details-access-note[b-wwkvlv2i1m] {
    margin: 1rem 0 0;
    color: #8593a4;
    font-size: 0.75rem;
    line-height: 1.6;
}

.details-confirm-box[b-wwkvlv2i1m] {
    padding: 1rem;
    background: #fffaf2;
    border: 1px solid #f0ddb9;
    border-radius: 12px;
}

    .details-confirm-box h3[b-wwkvlv2i1m] {
        margin: 0 0 0.45rem;
        color: #5e4b2f;
        font-size: 0.94rem;
        font-weight: 850;
    }

    .details-confirm-box p[b-wwkvlv2i1m] {
        color: #89775c;
        font-size: 0.8rem;
        line-height: 1.55;
    }

.details-confirm-actions[b-wwkvlv2i1m] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

    .details-confirm-actions .btn[b-wwkvlv2i1m] {
        min-height: 42px;
        border-radius: 9px;
        font-size: 0.8rem;
        font-weight: 750;
    }

/* Aktivität */

.details-info-list[b-wwkvlv2i1m],
.details-list[b-wwkvlv2i1m],
.details-user-list[b-wwkvlv2i1m],
.details-cleaning-list[b-wwkvlv2i1m] {
    display: flex;
    flex-direction: column;
}

.details-info-row[b-wwkvlv2i1m] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.3rem;
    border-bottom: 1px solid #edf1f6;
}

    .details-info-row:last-child[b-wwkvlv2i1m],
    .details-list-row:last-child[b-wwkvlv2i1m],
    .details-user-row:last-child[b-wwkvlv2i1m],
    .details-cleaning-row:last-child[b-wwkvlv2i1m] {
        border-bottom: none;
    }

    .details-info-row span[b-wwkvlv2i1m] {
        color: #75869b;
        font-size: 0.8rem;
    }

    .details-info-row strong[b-wwkvlv2i1m] {
        color: #293e56;
        font-size: 0.81rem;
        font-weight: 800;
        text-align: right;
    }

/* Benutzer */

.details-user-row[b-wwkvlv2i1m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.1rem 1.3rem;
    border-bottom: 1px solid #edf1f6;
}

.details-user-identity[b-wwkvlv2i1m] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

    .details-user-identity > div:last-child[b-wwkvlv2i1m] {
        min-width: 0;
    }

.details-avatar[b-wwkvlv2i1m] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    color: #276dae;
    background: #eaf4ff;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 850;
}

.details-user-identity strong[b-wwkvlv2i1m] {
    color: #273a51;
    font-size: 0.86rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.details-muted[b-wwkvlv2i1m] {
    margin-top: 0.3rem;
    color: #8997a7;
    font-size: 0.76rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.details-user-badges[b-wwkvlv2i1m] {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.details-role-badge[b-wwkvlv2i1m],
.details-user-state[b-wwkvlv2i1m] {
    display: inline-flex;
    align-items: center;
    padding: 0.36rem 0.65rem;
    border-radius: 999px;
    font-size: 0.71rem;
    font-weight: 800;
    white-space: nowrap;
}

.details-role-owner[b-wwkvlv2i1m] {
    color: #88601c;
    background: #fff3d8;
}

.details-role-admin[b-wwkvlv2i1m] {
    color: #2466a5;
    background: #e9f3ff;
}

.details-user-state-active[b-wwkvlv2i1m] {
    color: #167949;
    background: #e9f7ee;
}

.details-user-state-locked[b-wwkvlv2i1m] {
    color: #af3e4a;
    background: #fff0f1;
}

/* Audit und Probleme */

.details-list-row[b-wwkvlv2i1m] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.1rem;
    padding: 1rem 1.3rem;
    border-bottom: 1px solid #edf1f6;
}

    .details-list-row > div[b-wwkvlv2i1m] {
        min-width: 0;
    }

    .details-list-row strong[b-wwkvlv2i1m] {
        color: #2a3d54;
        font-size: 0.84rem;
        font-weight: 800;
        overflow-wrap: anywhere;
    }

.details-row-time[b-wwkvlv2i1m] {
    flex-shrink: 0;
    color: #8392a5;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* Reinigungen */

.details-cleaning-row[b-wwkvlv2i1m] {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.9fr) auto auto;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    border-bottom: 1px solid #edf1f6;
}

.details-cleaning-main[b-wwkvlv2i1m] {
    min-width: 0;
}

    .details-cleaning-main strong[b-wwkvlv2i1m] {
        color: #293d54;
        font-size: 0.85rem;
        font-weight: 800;
        overflow-wrap: anywhere;
    }

.details-cleaning-employee[b-wwkvlv2i1m] {
    color: #60748b;
    font-size: 0.8rem;
}

.details-cleaning-time[b-wwkvlv2i1m] {
    color: #8392a5;
    font-size: 0.76rem;
    white-space: nowrap;
}

.details-cleaning-badge[b-wwkvlv2i1m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.38rem 0.65rem;
    border-radius: 8px;
    font-size: 0.73rem;
    font-weight: 800;
    white-space: nowrap;
}

.details-cleaning-completed[b-wwkvlv2i1m] {
    color: #197448;
    background: #e8f7ed;
}

.details-cleaning-running[b-wwkvlv2i1m] {
    color: #1f6aa9;
    background: #eaf4ff;
}

/* Leer- und Ladezustände */

.details-empty[b-wwkvlv2i1m] {
    padding: 1.5rem 1.3rem;
    color: #7b8ba0;
    font-size: 0.84rem;
    line-height: 1.6;
}

.details-empty-success[b-wwkvlv2i1m] {
    color: #22784e;
    background: #f4fbf6;
}

.details-loading[b-wwkvlv2i1m],
.details-empty-state[b-wwkvlv2i1m] {
    padding: 1.6rem;
    background: #fff;
    border: 1px solid #dfe7f0;
    border-radius: 15px;
}

.details-loading[b-wwkvlv2i1m] {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #667b91;
}

.details-empty-state h2[b-wwkvlv2i1m] {
    color: #243a53;
    font-size: 1.15rem;
}

.details-empty-state p[b-wwkvlv2i1m] {
    color: #7b8ba0;
}

/* Zugänglichkeit */

.company-details-page a:focus-visible[b-wwkvlv2i1m],
.company-details-page button:focus-visible[b-wwkvlv2i1m],
.company-details-page summary:focus-visible[b-wwkvlv2i1m] {
    outline: 3px solid #74aaf0;
    outline-offset: 3px;
}

/* Responsive */

@media (max-width: 1199.98px) {
    .details-stats-grid[b-wwkvlv2i1m] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .details-extra-stats[b-wwkvlv2i1m] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .details-two-columns[b-wwkvlv2i1m] {
        grid-template-columns: 1fr;
    }

    .details-cleaning-row[b-wwkvlv2i1m] {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
    }

    .details-cleaning-time[b-wwkvlv2i1m] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .details-contract-strip[b-wwkvlv2i1m] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .details-contract-item:last-child[b-wwkvlv2i1m] {
        grid-column: 1 / -1;
    }

    .details-action-bar[b-wwkvlv2i1m] {
        grid-template-columns: 1fr;
    }

    .details-extra-stats[b-wwkvlv2i1m] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .details-user-row[b-wwkvlv2i1m],
    .details-list-row[b-wwkvlv2i1m] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.65rem;
    }

    .details-user-badges[b-wwkvlv2i1m] {
        justify-content: flex-start;
    }

    .details-cleaning-row[b-wwkvlv2i1m] {
        grid-template-columns: 1fr 1fr;
    }

    .details-cleaning-main[b-wwkvlv2i1m] {
        grid-column: 1 / -1;
    }

    .details-cleaning-time[b-wwkvlv2i1m] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .details-header[b-wwkvlv2i1m] {
        flex-direction: column;
        align-items: stretch;
    }

    .details-refresh[b-wwkvlv2i1m] {
        width: 100%;
    }

    .details-contract-strip[b-wwkvlv2i1m] {
        padding: 1rem;
    }

    .details-stats-grid[b-wwkvlv2i1m] {
        gap: 0.7rem;
    }

    .details-stat-card[b-wwkvlv2i1m] {
        padding: 1rem;
    }

        .details-stat-card > strong[b-wwkvlv2i1m] {
            font-size: 1.8rem;
        }

    .details-extra-stats[b-wwkvlv2i1m] {
        grid-template-columns: 1fr;
    }

    .details-panel-heading[b-wwkvlv2i1m],
    .details-panel-body[b-wwkvlv2i1m] {
        padding: 1rem;
    }

    .details-info-row[b-wwkvlv2i1m],
    .details-user-row[b-wwkvlv2i1m],
    .details-list-row[b-wwkvlv2i1m],
    .details-cleaning-row[b-wwkvlv2i1m] {
        padding: 1rem;
    }

    .details-info-row[b-wwkvlv2i1m] {
        flex-direction: column;
        gap: 0.4rem;
    }

        .details-info-row strong[b-wwkvlv2i1m] {
            text-align: left;
        }

    .details-confirm-actions[b-wwkvlv2i1m] {
        flex-direction: column;
    }

        .details-confirm-actions .btn[b-wwkvlv2i1m] {
            width: 100%;
        }
}

@media (max-width: 380px) {
    .details-stats-grid[b-wwkvlv2i1m],
    .details-contract-strip[b-wwkvlv2i1m] {
        grid-template-columns: 1fr;
    }

    .details-contract-item:last-child[b-wwkvlv2i1m] {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .details-action-link[b-wwkvlv2i1m] {
        transition: none;
    }
}
/* /Components/Pages/Platform/PlatformCompanyNotes.razor.rz.scp.css */

/* =========================================================
   CleanDation Platform – Interne Firmennotizen
   ========================================================= */

.notes-page[b-opc3kmskft] {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0.25rem 0 3rem;
    color: #1b2a40;
}

    .notes-page *[b-opc3kmskft],
    .notes-page *[b-opc3kmskft]::before,
    .notes-page *[b-opc3kmskft]::after {
        box-sizing: border-box;
    }

/* Navigation */

.notes-back[b-opc3kmskft] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 42px;
    margin-bottom: 1.45rem;
    padding: 0.55rem 0.85rem;
    color: #4d637c;
    background: #fff;
    border: 1px solid #dfe7f0;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 750;
    text-decoration: none;
}

    .notes-back:hover[b-opc3kmskft] {
        color: #176bc0;
        border-color: #b3d0ed;
    }

    .notes-back span[b-opc3kmskft] {
        font-size: 1.1rem;
    }

/* Seitenkopf */

.notes-header[b-opc3kmskft] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.notes-eyebrow[b-opc3kmskft],
.notes-section-kicker[b-opc3kmskft] {
    display: block;
    margin-bottom: 0.4rem;
    color: #287bcd;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.11em;
}

.notes-header h1[b-opc3kmskft] {
    margin: 0;
    color: #192b41;
    font-size: clamp(1.75rem, 2.5vw, 2.3rem);
    font-weight: 850;
    letter-spacing: -0.035em;
}

.notes-header p[b-opc3kmskft] {
    max-width: 640px;
    margin: 0.5rem 0 0;
    color: #738399;
    font-size: 0.9rem;
    line-height: 1.6;
}

.notes-refresh[b-opc3kmskft] {
    min-height: 42px;
    padding: 0.55rem 1rem;
    border-radius: 10px;
    font-weight: 750;
    font-size: 0.82rem;
}

/* Firmenbanner */

.notes-company-banner[b-opc3kmskft] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.2rem 1.4rem;
    background: linear-gradient( 115deg, #ffffff, #f3f8ff );
    border: 1px solid #dce8f5;
    border-radius: 16px;
}

.notes-company-avatar[b-opc3kmskft] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    color: #226cba;
    background: #dfedfd;
    border-radius: 15px;
    font-size: 1.18rem;
    font-weight: 850;
}

.notes-company-info[b-opc3kmskft] {
    flex: 1;
    min-width: 0;
}

.notes-mini-label[b-opc3kmskft] {
    display: block;
    margin-bottom: 0.3rem;
    color: #8090a2;
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.09em;
}

.notes-company-info h2[b-opc3kmskft] {
    margin: 0 0 0.25rem;
    color: #23364e;
    font-size: 1.14rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.notes-company-info > span:last-child[b-opc3kmskft] {
    color: #8795a7;
    font-size: 0.76rem;
}

.notes-company-badge[b-opc3kmskft] {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.7rem;
    color: #2265ac;
    background: #e6f2ff;
    border-radius: 8px;
    font-size: 0.73rem;
    font-weight: 800;
    white-space: nowrap;
}

/* Hauptlayout */

.notes-layout[b-opc3kmskft] {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.85fr);
    gap: 1.25rem;
    align-items: start;
    margin-bottom: 2.2rem;
}

.notes-editor[b-opc3kmskft] {
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e0e8f0;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(25, 49, 81, 0.04);
}

.notes-panel-heading[b-opc3kmskft] {
    padding: 1.35rem 1.5rem;
    background: #f9fbfe;
    border-bottom: 1px solid #e7edf4;
}

    .notes-panel-heading h2[b-opc3kmskft] {
        margin: 0;
        color: #22374f;
        font-size: 1.05rem;
        font-weight: 850;
    }

    .notes-panel-heading p[b-opc3kmskft] {
        margin: 0.35rem 0 0;
        color: #8492a3;
        font-size: 0.8rem;
        line-height: 1.5;
    }

.notes-editor-body[b-opc3kmskft] {
    padding: 1.5rem;
}

.notes-input-label[b-opc3kmskft] {
    display: block;
    margin-bottom: 0.6rem;
    color: #394c63;
    font-size: 0.83rem;
    font-weight: 800;
}

.notes-textarea[b-opc3kmskft] {
    width: 100%;
    min-height: 175px;
    resize: vertical;
    padding: 0.95rem;
    border: 1px solid #d3deeb;
    border-radius: 11px;
    color: #293b52;
    font-size: 0.89rem;
    line-height: 1.65;
}

    .notes-textarea:focus[b-opc3kmskft] {
        border-color: #438cdd;
        box-shadow: 0 0 0 3px rgba(55, 134, 220, 0.12);
    }

    .notes-textarea[b-opc3kmskft]::placeholder {
        color: #9aa7b6;
    }

.notes-editor-meta[b-opc3kmskft] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 0.8rem;
}

.notes-privacy-hint[b-opc3kmskft] {
    max-width: 450px;
    color: #8a98a8;
    font-size: 0.75rem;
    line-height: 1.6;
}

.notes-character-count[b-opc3kmskft] {
    color: #74869a;
    font-size: 0.76rem;
    font-weight: 750;
    white-space: nowrap;
}

.notes-character-count-warning[b-opc3kmskft] {
    color: #ac741e;
}

/* Aktionen und Rückmeldungen */

.notes-editor-actions[b-opc3kmskft] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.3rem;
    padding-top: 1.15rem;
    border-top: 1px solid #edf1f5;
}

    .notes-editor-actions .btn[b-opc3kmskft] {
        min-height: 44px;
        padding: 0.6rem 1rem;
        border-radius: 10px;
        font-size: 0.82rem;
        font-weight: 800;
    }

.notes-feedback[b-opc3kmskft] {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid;
    border-radius: 10px;
    font-size: 0.83rem;
    line-height: 1.55;
}

.notes-feedback-error[b-opc3kmskft] {
    color: #9c3643;
    background: #fff3f4;
    border-color: #f1cbd0;
}

.notes-feedback-success[b-opc3kmskft] {
    color: #206b49;
    background: #effaf3;
    border-color: #c7e8d4;
}

/* Hinweiskarte */

.notes-info-panel[b-opc3kmskft] {
    min-width: 0;
    padding: 1.4rem;
    background: #fff;
    border: 1px solid #e0e8f0;
    border-radius: 15px;
    box-shadow: 0 4px 16px rgba(25, 49, 81, 0.035);
}

.notes-info-icon[b-opc3kmskft] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    margin-bottom: 0.95rem;
    color: #226bb5;
    background: #eaf4ff;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 850;
}

.notes-info-panel h2[b-opc3kmskft] {
    margin: 0 0 0.65rem;
    color: #27394f;
    font-size: 0.95rem;
    font-weight: 850;
}

.notes-info-panel p[b-opc3kmskft] {
    color: #75869a;
    font-size: 0.8rem;
    line-height: 1.65;
}

.notes-info-divider[b-opc3kmskft] {
    height: 1px;
    margin: 1rem 0;
    background: #e9eef5;
}

.notes-info-point[b-opc3kmskft] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 0.8rem;
    color: #64768c;
    font-size: 0.78rem;
    line-height: 1.55;
}

.notes-info-dot[b-opc3kmskft] {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    margin-top: 0.45rem;
    background: #3b86d1;
    border-radius: 50%;
}

.notes-history-link[b-opc3kmskft] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 44px;
    margin-top: 0.65rem;
    padding: 0.65rem 0.85rem;
    color: #2268b2;
    background: #f0f7ff;
    border: 1px solid #d8e8f9;
    border-radius: 9px;
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
}

    .notes-history-link:hover[b-opc3kmskft] {
        color: #134e8d;
        background: #e6f2ff;
    }

/* Historie */

.notes-history[b-opc3kmskft] {
    margin-top: 0.5rem;
}

.notes-history-header[b-opc3kmskft] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.05rem;
}

    .notes-history-header h2[b-opc3kmskft] {
        margin: 0;
        color: #24374e;
        font-size: 1.15rem;
        font-weight: 850;
    }

    .notes-history-header p[b-opc3kmskft] {
        margin: 0.35rem 0 0;
        color: #8190a3;
        font-size: 0.81rem;
    }

.notes-count-badge[b-opc3kmskft] {
    padding: 0.38rem 0.7rem;
    color: #64778d;
    background: #eaf0f6;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 800;
}

/* Suche */

.notes-search-panel[b-opc3kmskft] {
    display: flex;
    align-items: flex-end;
    gap: 0.8rem;
    margin-bottom: 1rem;
    padding: 1.1rem;
    background: #fff;
    border: 1px solid #e0e8f0;
    border-radius: 13px;
}

.notes-search-field[b-opc3kmskft] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
    min-width: 0;
}

    .notes-search-field label[b-opc3kmskft] {
        color: #43566d;
        font-size: 0.79rem;
        font-weight: 750;
    }

    .notes-search-field .form-control[b-opc3kmskft] {
        min-height: 44px;
        border: 1px solid #d6dfeb;
        border-radius: 10px;
        font-size: 0.85rem;
    }

.notes-search-panel > .btn[b-opc3kmskft] {
    min-height: 44px;
    border-radius: 9px;
    font-size: 0.8rem;
    font-weight: 750;
}

.notes-results[b-opc3kmskft] {
    margin-bottom: 0.85rem;
    color: #687b91;
    font-size: 0.84rem;
}

    .notes-results strong[b-opc3kmskft] {
        color: #263951;
        font-weight: 850;
    }

/* Notizliste */

.notes-list[b-opc3kmskft] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.notes-item[b-opc3kmskft] {
    padding: 1.2rem 1.3rem;
    background: #fff;
    border: 1px solid #e0e8f0;
    border-radius: 14px;
    box-shadow: 0 4px 15px rgba(25, 49, 81, 0.035);
}

.notes-item-header[b-opc3kmskft] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.notes-author[b-opc3kmskft] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}

.notes-author-avatar[b-opc3kmskft] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: #2768a8;
    background: #eaf3ff;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 850;
}

.notes-author > div[b-opc3kmskft] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.notes-author strong[b-opc3kmskft] {
    color: #2a3d54;
    font-size: 0.84rem;
    overflow-wrap: anywhere;
}

.notes-author > div > span[b-opc3kmskft] {
    color: #93a0af;
    font-size: 0.71rem;
}

.notes-date[b-opc3kmskft] {
    color: #8291a3;
    font-size: 0.77rem;
    font-weight: 650;
    white-space: nowrap;
}

.notes-content[b-opc3kmskft] {
    margin: 0;
    color: #384d65;
    font-size: 0.87rem;
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Pagination */

.notes-pagination-footer[b-opc3kmskft] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 1.2rem;
}

    .notes-pagination-footer > span[b-opc3kmskft] {
        color: #7b8da1;
        font-size: 0.8rem;
    }

.notes-pagination[b-opc3kmskft] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;
}

    .notes-pagination .btn[b-opc3kmskft] {
        min-height: 39px;
        padding: 0.5rem 0.9rem;
        border-radius: 9px;
        font-size: 0.78rem;
        font-weight: 750;
    }

    .notes-pagination > span[b-opc3kmskft] {
        color: #53677f;
        font-size: 0.8rem;
        font-weight: 750;
        white-space: nowrap;
    }

.notes-limit-hint[b-opc3kmskft] {
    margin: 1.15rem 0 0;
    color: #8b99a9;
    font-size: 0.75rem;
    line-height: 1.6;
}

/* Ladezustand und leere Liste */

.notes-state[b-opc3kmskft] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 125px;
    padding: 1.5rem;
    color: #65778d;
    background: #fff;
    border: 1px solid #e0e8f0;
    border-radius: 15px;
}

.notes-state-warning[b-opc3kmskft] {
    background: #fffaf2;
    border-color: #f0dfb7;
}

.notes-state strong[b-opc3kmskft] {
    color: #6e5425;
    font-size: 0.9rem;
}

.notes-state p[b-opc3kmskft] {
    margin: 0.4rem 0 0;
    color: #8d7c61;
    font-size: 0.81rem;
}

.notes-empty[b-opc3kmskft] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding: 2.8rem 1.5rem;
    text-align: center;
    background: #fff;
    border: 1px solid #e0e8f0;
    border-radius: 15px;
}

.notes-empty-icon[b-opc3kmskft] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: #2a78c5;
    background: #edf5ff;
    border-radius: 14px;
    font-size: 1.65rem;
}

.notes-empty h3[b-opc3kmskft] {
    margin: 0;
    color: #263950;
    font-size: 1.05rem;
    font-weight: 850;
}

.notes-empty p[b-opc3kmskft] {
    max-width: 420px;
    margin: 0;
    color: #8090a2;
    font-size: 0.84rem;
    line-height: 1.6;
}

/* Tastaturbedienung */

.notes-page a:focus-visible[b-opc3kmskft],
.notes-page button:focus-visible[b-opc3kmskft],
.notes-page input:focus-visible[b-opc3kmskft],
.notes-page textarea:focus-visible[b-opc3kmskft] {
    outline: 3px solid #75aaf0;
    outline-offset: 3px;
}

/* Tablet */

@media (max-width: 1199.98px) {
    .notes-layout[b-opc3kmskft] {
        grid-template-columns: 1fr;
    }
}

/* Smartphone */

@media (max-width: 767.98px) {
    .notes-company-banner[b-opc3kmskft] {
        flex-wrap: wrap;
    }

    .notes-company-badge[b-opc3kmskft] {
        margin-left: 0;
    }

    .notes-search-panel[b-opc3kmskft] {
        flex-direction: column;
        align-items: stretch;
    }

        .notes-search-panel > .btn[b-opc3kmskft] {
            width: 100%;
        }

    .notes-item-header[b-opc3kmskft] {
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {
    .notes-header[b-opc3kmskft] {
        flex-direction: column;
        align-items: stretch;
    }

    .notes-refresh[b-opc3kmskft] {
        width: 100%;
    }

    .notes-company-banner[b-opc3kmskft] {
        padding: 1rem;
    }

    .notes-company-avatar[b-opc3kmskft] {
        width: 48px;
        height: 48px;
    }

    .notes-editor-body[b-opc3kmskft],
    .notes-panel-heading[b-opc3kmskft] {
        padding: 1.1rem;
    }

    .notes-editor-actions[b-opc3kmskft] {
        flex-direction: column;
        align-items: stretch;
    }

        .notes-editor-actions .btn[b-opc3kmskft] {
            width: 100%;
        }

    .notes-info-panel[b-opc3kmskft] {
        padding: 1.1rem;
    }

    .notes-item[b-opc3kmskft] {
        padding: 1rem;
    }

    .notes-pagination-footer[b-opc3kmskft] {
        flex-direction: column;
        align-items: stretch;
    }

    .notes-pagination[b-opc3kmskft] {
        justify-content: space-between;
    }

        .notes-pagination > span[b-opc3kmskft] {
            font-size: 0.72rem;
        }
}

@media (prefers-reduced-motion: reduce) {
    .notes-page *[b-opc3kmskft] {
        transition: none;
    }
}
/* /Components/Pages/Platform/PlatformCompanySubscription.razor.rz.scp.css */

/* CleanDation – Platform Tarif & Vertrag */

.subscription-page[b-g0krfkquwo] {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0.3rem 0 3rem;
    color: #1b2a40;
}

    .subscription-page *[b-g0krfkquwo],
    .subscription-page *[b-g0krfkquwo]::before,
    .subscription-page *[b-g0krfkquwo]::after {
        box-sizing: border-box;
    }

/* Navigation und Seitenkopf */

.subscription-back[b-g0krfkquwo] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 40px;
    margin-bottom: 1.5rem;
    padding: 0.45rem 0.8rem;
    color: #4e657f;
    background: #fff;
    border: 1px solid #dfe7ef;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 750;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

    .subscription-back:hover[b-g0krfkquwo] {
        color: #1768bb;
        border-color: #a9c9ee;
    }

    .subscription-back span[b-g0krfkquwo] {
        font-size: 1.1rem;
    }

.subscription-header[b-g0krfkquwo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.subscription-eyebrow[b-g0krfkquwo],
.subscription-section-kicker[b-g0krfkquwo] {
    display: block;
    margin-bottom: 0.4rem;
    color: #287bcd;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.11em;
}

.subscription-header h1[b-g0krfkquwo] {
    margin: 0;
    color: #192a41;
    font-size: clamp(1.7rem, 2.5vw, 2.3rem);
    font-weight: 850;
    letter-spacing: -0.035em;
}

.subscription-header p[b-g0krfkquwo] {
    margin: 0.5rem 0 0;
    color: #728095;
    font-size: 0.9rem;
    line-height: 1.6;
}

.subscription-company-id[b-g0krfkquwo] {
    padding: 0.45rem 0.7rem;
    color: #5b6d82;
    background: #eaf0f6;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 750;
}

/* Laden und Fehlzustand */

.subscription-state[b-g0krfkquwo] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 130px;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #dfe7ef;
    border-radius: 15px;
    color: #62748b;
}

.subscription-state-warning[b-g0krfkquwo] {
    background: #fffcf5;
    border-color: #f0dfb7;
}

.subscription-state strong[b-g0krfkquwo] {
    display: block;
    color: #604b24;
    font-size: 0.95rem;
}

.subscription-state p[b-g0krfkquwo] {
    margin: 0.4rem 0 0;
    color: #887b65;
    font-size: 0.82rem;
}

/* Ausgewähltes Unternehmen */

.subscription-company-banner[b-g0krfkquwo] {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 2rem;
    padding: 1.3rem 1.5rem;
    background: linear-gradient(115deg, #ffffff, #f3f8ff);
    border: 1px solid #dce8f5;
    border-radius: 16px;
}

.subscription-company-avatar[b-g0krfkquwo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    color: #226cba;
    background: #deedfd;
    border-radius: 16px;
    font-size: 1.3rem;
    font-weight: 850;
}

.subscription-company-identity[b-g0krfkquwo] {
    min-width: 0;
}

.subscription-meta-label[b-g0krfkquwo] {
    color: #7c8b9d;
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.08em;
}

.subscription-company-identity h2[b-g0krfkquwo] {
    margin: 0.3rem 0;
    color: #20344d;
    font-size: 1.18rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.subscription-company-identity > span:last-child[b-g0krfkquwo] {
    color: #8090a4;
    font-size: 0.77rem;
}

/* Vertragsübersicht */

.subscription-current-section[b-g0krfkquwo] {
    margin-bottom: 2.1rem;
}

.subscription-section-heading[b-g0krfkquwo] {
    margin-bottom: 1rem;
}

    .subscription-section-heading h2[b-g0krfkquwo] {
        margin: 0;
        color: #22344a;
        font-size: 1.13rem;
        font-weight: 850;
    }

    .subscription-section-heading p[b-g0krfkquwo] {
        margin: 0.3rem 0 0;
        color: #8390a1;
        font-size: 0.82rem;
    }

.subscription-summary-grid[b-g0krfkquwo] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.subscription-summary-card[b-g0krfkquwo] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
    padding: 1.2rem;
    background: #fff;
    border: 1px solid #e1e8f0;
    border-top: 3px solid #6da7e3;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(25, 49, 81, 0.035);
}

    .subscription-summary-card:nth-child(2)[b-g0krfkquwo] {
        border-top-color: #48a883;
    }

    .subscription-summary-card:nth-child(3)[b-g0krfkquwo] {
        border-top-color: #e2a944;
    }

    .subscription-summary-card:nth-child(4)[b-g0krfkquwo] {
        border-top-color: #8a99b2;
    }

    .subscription-summary-card > span[b-g0krfkquwo] {
        color: #718197;
        font-size: 0.73rem;
        font-weight: 750;
    }

    .subscription-summary-card strong[b-g0krfkquwo] {
        color: #1d3048;
        font-size: clamp(0.98rem, 1.4vw, 1.3rem);
        font-weight: 850;
        overflow-wrap: anywhere;
    }

    .subscription-summary-card small[b-g0krfkquwo] {
        color: #93a0af;
        font-size: 0.71rem;
        line-height: 1.45;
    }

/* Hauptlayout */

.subscription-content-layout[b-g0krfkquwo] {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.85fr);
    gap: 1.35rem;
    align-items: start;
}

.subscription-editor[b-g0krfkquwo] {
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e0e8f0;
    border-radius: 17px;
    box-shadow: 0 5px 20px rgba(25, 49, 81, 0.04);
}

.subscription-editor-header[b-g0krfkquwo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.9rem;
    padding: 1.4rem 1.5rem;
    background: #f9fbfe;
    border-bottom: 1px solid #e7edf4;
}

    .subscription-editor-header h2[b-g0krfkquwo] {
        margin: 0;
        color: #22344b;
        font-size: 1.08rem;
        font-weight: 850;
    }

    .subscription-editor-header p[b-g0krfkquwo] {
        margin: 0.35rem 0 0;
        color: #8491a3;
        font-size: 0.8rem;
    }

.subscription-unsaved-badge[b-g0krfkquwo],
.subscription-saved-badge[b-g0krfkquwo] {
    display: inline-flex;
    padding: 0.4rem 0.65rem;
    border-radius: 8px;
    font-size: 0.71rem;
    font-weight: 800;
}

.subscription-unsaved-badge[b-g0krfkquwo] {
    color: #94651d;
    background: #fff3d9;
}

.subscription-saved-badge[b-g0krfkquwo] {
    color: #23754e;
    background: #e9f7ee;
}

.subscription-editor-body[b-g0krfkquwo] {
    padding: 1.5rem;
}

.subscription-form-grid[b-g0krfkquwo] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem;
}

.subscription-form-field[b-g0krfkquwo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

    .subscription-form-field label[b-g0krfkquwo] {
        color: #34465c;
        font-size: 0.83rem;
        font-weight: 800;
    }

    .subscription-form-field .form-select[b-g0krfkquwo],
    .subscription-form-field .form-control[b-g0krfkquwo] {
        width: 100%;
        min-height: 46px;
        color: #23364d;
        border: 1px solid #d3deeb;
        border-radius: 10px;
        background-color: #fff;
        font-size: 0.88rem;
    }

        .subscription-form-field .form-select:focus[b-g0krfkquwo],
        .subscription-form-field .form-control:focus[b-g0krfkquwo] {
            border-color: #3e8ada;
            box-shadow: 0 0 0 3px rgba(62, 138, 218, 0.12);
        }

        .subscription-form-field .form-control:disabled[b-g0krfkquwo] {
            color: #9aa6b5;
            background: #f4f6f9;
        }

    .subscription-form-field small[b-g0krfkquwo] {
        color: #8c99a9;
        font-size: 0.75rem;
        line-height: 1.5;
    }

/* Änderungsübersicht */

.subscription-change-preview[b-g0krfkquwo] {
    margin-top: 1.5rem;
    padding: 1.2rem;
    border: 1px solid #cfe2f8;
    background: #f7fbff;
    border-radius: 13px;
}

.subscription-preview-heading[b-g0krfkquwo] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

    .subscription-preview-heading strong[b-g0krfkquwo] {
        color: #214b79;
        font-size: 0.88rem;
    }

    .subscription-preview-heading > span[b-g0krfkquwo] {
        color: #718da9;
        font-size: 0.75rem;
    }

.subscription-preview-grid[b-g0krfkquwo] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.subscription-preview-card[b-g0krfkquwo] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    padding: 1rem;
    background: #fff;
    border: 1px solid #e1e8f0;
    border-radius: 11px;
}

.subscription-preview-card-new[b-g0krfkquwo] {
    border-color: #a9ccec;
    background: #f0f8ff;
}

.subscription-preview-label[b-g0krfkquwo] {
    color: #8593a4;
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.09em;
}

.subscription-preview-card strong[b-g0krfkquwo] {
    color: #263951;
    font-size: 1.08rem;
}

.subscription-preview-card > span:not(.subscription-preview-label)[b-g0krfkquwo] {
    color: #566a82;
    font-size: 0.82rem;
}

.subscription-preview-card small[b-g0krfkquwo] {
    color: #8091a3;
    font-size: 0.73rem;
    line-height: 1.4;
}

/* Meldungen und Aktionen */

.subscription-feedback[b-g0krfkquwo] {
    margin-top: 1.2rem;
    padding: 0.95rem 1.1rem;
    border: 1px solid;
    border-radius: 10px;
    font-size: 0.83rem;
    line-height: 1.5;
}

.subscription-feedback-success[b-g0krfkquwo] {
    color: #206b49;
    background: #effaf3;
    border-color: #c7e8d4;
}

.subscription-feedback-error[b-g0krfkquwo] {
    color: #9c3643;
    background: #fff3f4;
    border-color: #f1cbd0;
}

.subscription-actions[b-g0krfkquwo] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.6rem;
    padding-top: 1.3rem;
    border-top: 1px solid #edf1f6;
}

    .subscription-actions .btn[b-g0krfkquwo] {
        min-height: 45px;
        border-radius: 10px;
        font-size: 0.83rem;
        font-weight: 800;
    }

.subscription-save-button[b-g0krfkquwo] {
    padding: 0.65rem 1.2rem;
}

.subscription-reset-button[b-g0krfkquwo] {
    padding: 0.65rem 1rem;
}

/* Rechte Informationsspalte */

.subscription-aside[b-g0krfkquwo] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.subscription-info-card[b-g0krfkquwo],
.subscription-help-card[b-g0krfkquwo] {
    padding: 1.4rem;
    background: #fff;
    border: 1px solid #e1e8f0;
    border-radius: 15px;
    box-shadow: 0 4px 16px rgba(25, 49, 81, 0.03);
}

.subscription-info-icon[b-g0krfkquwo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 0.95rem;
    color: #226cb8;
    background: #eaf4ff;
    border-radius: 10px;
    font-size: 1.15rem;
    font-weight: 850;
}

.subscription-info-card h2[b-g0krfkquwo],
.subscription-help-card h2[b-g0krfkquwo] {
    margin: 0 0 0.65rem;
    color: #283950;
    font-size: 0.95rem;
    font-weight: 850;
}

.subscription-info-card p[b-g0krfkquwo],
.subscription-help-card p[b-g0krfkquwo] {
    color: #76869a;
    font-size: 0.8rem;
    line-height: 1.65;
}

    .subscription-help-card p:last-child[b-g0krfkquwo] {
        margin-bottom: 0;
    }

.subscription-info-divider[b-g0krfkquwo] {
    height: 1px;
    margin: 1rem 0;
    background: #e9eef5;
}

.subscription-info-point[b-g0krfkquwo] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
    color: #63758a;
    font-size: 0.78rem;
    line-height: 1.55;
}

.subscription-info-dot[b-g0krfkquwo] {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    margin-top: 0.4rem;
    background: #3e88d5;
    border-radius: 50%;
}

.subscription-history-link[b-g0krfkquwo] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 43px;
    margin-top: 0.5rem;
    padding: 0.65rem 0.85rem;
    color: #246bad;
    background: #f0f7ff;
    border: 1px solid #d8e8f9;
    border-radius: 9px;
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
}

    .subscription-history-link:hover[b-g0krfkquwo] {
        color: #144f8a;
        background: #e6f2ff;
    }

/* Tastaturbedienung */

.subscription-page a:focus-visible[b-g0krfkquwo],
.subscription-page button:focus-visible[b-g0krfkquwo],
.subscription-page select:focus-visible[b-g0krfkquwo],
.subscription-page input:focus-visible[b-g0krfkquwo] {
    outline: 3px solid #75aaf0;
    outline-offset: 3px;
}

/* Tablet */

@media (max-width: 1199.98px) {
    .subscription-summary-grid[b-g0krfkquwo] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .subscription-content-layout[b-g0krfkquwo] {
        grid-template-columns: minmax(0, 1fr);
    }

    .subscription-aside[b-g0krfkquwo] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Smartphone */

@media (max-width: 767.98px) {
    .subscription-form-grid[b-g0krfkquwo],
    .subscription-preview-grid[b-g0krfkquwo],
    .subscription-aside[b-g0krfkquwo] {
        grid-template-columns: minmax(0, 1fr);
    }

    .subscription-company-banner[b-g0krfkquwo] {
        padding: 1rem;
    }

    .subscription-editor-header[b-g0krfkquwo],
    .subscription-editor-body[b-g0krfkquwo] {
        padding: 1.15rem;
    }

    .subscription-info-card[b-g0krfkquwo],
    .subscription-help-card[b-g0krfkquwo] {
        padding: 1.1rem;
    }
}

@media (max-width: 575.98px) {
    .subscription-header[b-g0krfkquwo] {
        flex-direction: column;
        align-items: flex-start;
    }

    .subscription-company-avatar[b-g0krfkquwo] {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        font-size: 1.05rem;
    }

    .subscription-company-identity h2[b-g0krfkquwo] {
        font-size: 1rem;
    }

    .subscription-summary-grid[b-g0krfkquwo] {
        gap: 0.7rem;
    }

    .subscription-summary-card[b-g0krfkquwo] {
        padding: 0.95rem;
    }

        .subscription-summary-card strong[b-g0krfkquwo] {
            font-size: 1rem;
        }

    .subscription-actions[b-g0krfkquwo] {
        flex-direction: column;
        align-items: stretch;
    }

        .subscription-actions .btn[b-g0krfkquwo] {
            width: 100%;
        }
}

@media (max-width: 380px) {
    .subscription-summary-grid[b-g0krfkquwo] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .subscription-page *[b-g0krfkquwo] {
        transition: none;
    }
}
/* /Components/Pages/Platform/PlatformHome.razor.rz.scp.css */

/* =========================================================
   CLEANDATION PLATFORM DASHBOARD
   ========================================================= */

.platform-page[b-ygps1q2alx] {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding-bottom: 3rem;
    color: #172033;
}

    .platform-page *[b-ygps1q2alx],
    .platform-page *[b-ygps1q2alx]::before,
    .platform-page *[b-ygps1q2alx]::after {
        box-sizing: border-box;
    }

    /* =========================================================
   SEITENKOPF
   ========================================================= */

    .platform-page .platform-page-header[b-ygps1q2alx] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .platform-page .platform-eyebrow[b-ygps1q2alx] {
        margin-bottom: 0.55rem;
        color: #2575cc;
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.13em;
    }

    .platform-page .platform-page-header h1[b-ygps1q2alx] {
        margin: 0;
        color: #142238;
        font-size: clamp(1.65rem, 2.5vw, 2.35rem);
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -0.035em;
    }

    .platform-page .platform-page-header p[b-ygps1q2alx] {
        margin: 0.65rem 0 0;
        color: #64748b;
        font-size: 0.95rem;
        line-height: 1.5;
    }

.platform-update-time[b-ygps1q2alx] {
    margin-top: 0.85rem;
    color: #8793a4;
    font-size: 0.77rem;
}

.platform-header-actions[b-ygps1q2alx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;
}

    .platform-header-actions .btn[b-ygps1q2alx] {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.6rem 1rem;
        border-radius: 10px;
        font-size: 0.86rem;
        font-weight: 700;
    }

/* =========================================================
   LADEN / FEHLER
   ========================================================= */

.platform-loading[b-ygps1q2alx] {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    min-height: 130px;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #e3eaf2;
    border-radius: 16px;
}

    .platform-loading strong[b-ygps1q2alx] {
        display: block;
        font-size: 1rem;
    }

    .platform-loading p[b-ygps1q2alx] {
        margin: 0.3rem 0 0;
        color: #718096;
        font-size: 0.85rem;
    }

/* =========================================================
   ABSCHNITTE
   ========================================================= */

.platform-page .platform-overview-section[b-ygps1q2alx] {
    margin-bottom: 2.25rem;
}

.platform-page .platform-section[b-ygps1q2alx] {
    margin-top: 0;
    margin-bottom: 2.25rem;
    min-width: 0;
}

.platform-page .platform-section-header[b-ygps1q2alx] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.05rem;
}

.platform-page .platform-section-kicker[b-ygps1q2alx] {
    margin-bottom: 0.3rem;
    color: #6688b0;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.11em;
}

.platform-page .platform-section-header h2[b-ygps1q2alx] {
    margin: 0;
    color: #19283e;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.018em;
}

.platform-page .platform-section-header p[b-ygps1q2alx] {
    margin: 0.35rem 0 0;
    color: #718096;
    font-size: 0.84rem;
    line-height: 1.5;
}

.platform-text-link[b-ygps1q2alx] {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: #176ac1;
    font-size: 0.82rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

    .platform-text-link:hover[b-ygps1q2alx] {
        color: #0c4e96;
        text-decoration: underline;
    }

.platform-dashboard-columns[b-ygps1q2alx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
}

/* =========================================================
   ALLGEMEINE KENNZAHLEN
   ========================================================= */

.platform-page .platform-stats[b-ygps1q2alx] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.95rem;
    margin: 0;
}

.platform-page .platform-stat-card[b-ygps1q2alx] {
    display: block;
    min-width: 0;
    padding: 1.3rem;
    background: #fff;
    border: 1px solid #e1e8f1;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(20, 40, 70, 0.035);
    border-top: 3px solid #dfe6ef;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.platform-page .platform-stat-card-link[b-ygps1q2alx] {
    color: inherit;
    text-decoration: none;
}

    .platform-page .platform-stat-card-link:hover[b-ygps1q2alx] {
        transform: translateY(-3px);
        color: inherit;
        border-color: #c7d9f2;
        box-shadow: 0 12px 26px rgba(20, 55, 100, 0.09);
    }

.platform-page .platform-stat-card-success[b-ygps1q2alx] {
    border-top-color: #26a36b;
}

.platform-page .platform-stat-card-danger[b-ygps1q2alx] {
    border-top-color: #e35d64;
}

.platform-page .platform-stat-card-warning[b-ygps1q2alx] {
    border-top-color: #e7aa35;
}

.platform-page .platform-stat-card-running[b-ygps1q2alx] {
    border-top-color: #2979d5;
}

.platform-stat-top[b-ygps1q2alx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.platform-page .platform-stat-label[b-ygps1q2alx] {
    color: #67778d;
    font-size: 0.71rem;
    font-weight: 800;
    line-height: 1.45;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.platform-stat-icon[b-ygps1q2alx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    color: #4078b7;
    background: #edf5ff;
    border-radius: 9px;
    font-size: 1rem;
    font-weight: 800;
}

.platform-page .platform-stat-card-success .platform-stat-icon[b-ygps1q2alx] {
    color: #178757;
    background: #e9f8f0;
}

.platform-page .platform-stat-card-danger .platform-stat-icon[b-ygps1q2alx] {
    color: #c4414d;
    background: #fff0f0;
}

.platform-page .platform-stat-card-warning .platform-stat-icon[b-ygps1q2alx] {
    color: #a16b14;
    background: #fff6df;
}

.platform-page .platform-stat-value[b-ygps1q2alx] {
    margin-top: 1.15rem;
    color: #17283e;
    font-size: clamp(1.9rem, 2.3vw, 2.45rem);
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.045em;
}

.platform-page .platform-stat-description[b-ygps1q2alx] {
    margin-top: 0.65rem;
    color: #8491a1;
    font-size: 0.76rem;
    line-height: 1.45;
}

/* =========================================================
   VERTRAGSKENNZAHLEN
   ========================================================= */

.platform-contract-stats[b-ygps1q2alx] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.95rem;
}

.platform-contract-card[b-ygps1q2alx] {
    min-width: 0;
    padding: 1.45rem;
    background: #fff;
    border: 1px solid #e1e8f1;
    border-radius: 16px;
    border-left: 4px solid #b8c6d9;
    box-shadow: 0 4px 16px rgba(20, 40, 70, 0.035);
}

.platform-contract-card-success[b-ygps1q2alx] {
    border-left-color: #20a16c;
    background: linear-gradient(145deg, #fff, #f5fcf8);
}

.platform-contract-card-info[b-ygps1q2alx] {
    border-left-color: #2c83d7;
    background: linear-gradient(145deg, #fff, #f4f9ff);
}

.platform-contract-card-warning[b-ygps1q2alx] {
    border-left-color: #e6a32a;
    background: linear-gradient(145deg, #fff, #fffaf0);
}

.platform-contract-card-neutral[b-ygps1q2alx] {
    border-left-color: #8f99aa;
    background: linear-gradient(145deg, #fff, #f8f9fb);
}

.platform-contract-label[b-ygps1q2alx] {
    color: #66758a;
    font-size: 0.82rem;
    font-weight: 750;
}

.platform-contract-number[b-ygps1q2alx] {
    margin-top: 0.95rem;
    color: #18283e;
    font-size: 2.45rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.045em;
}

.platform-contract-hint[b-ygps1q2alx] {
    margin-top: 0.65rem;
    color: #8793a4;
    font-size: 0.75rem;
    line-height: 1.4;
}

.platform-contract-note[b-ygps1q2alx] {
    margin-top: 0.9rem;
    color: #758397;
    font-size: 0.77rem;
    line-height: 1.55;
}

.platform-trial-alerts[b-ygps1q2alx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1rem;
}

.platform-trial-alert[b-ygps1q2alx] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.1rem;
    border: 1px solid;
    border-radius: 12px;
}

    .platform-trial-alert strong[b-ygps1q2alx] {
        font-size: 0.87rem;
    }

    .platform-trial-alert span[b-ygps1q2alx] {
        font-size: 0.78rem;
        line-height: 1.5;
    }

.platform-trial-alert-danger[b-ygps1q2alx] {
    color: #962e3b;
    background: #fff5f5;
    border-color: #f1c8ce;
}

.platform-trial-alert-info[b-ygps1q2alx] {
    color: #245d91;
    background: #f0f7ff;
    border-color: #cbdff7;
}

/* =========================================================
   PANEL UND TARIFVERTEILUNG
   ========================================================= */

.platform-panel[b-ygps1q2alx] {
    min-width: 0;
    background: #fff;
    border: 1px solid #e1e8f1;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(20, 40, 70, 0.035);
}

.platform-plan-panel[b-ygps1q2alx] {
    padding: 1.45rem;
}

.platform-plan-item[b-ygps1q2alx] {
    margin-bottom: 1.35rem;
}

    .platform-plan-item:last-of-type[b-ygps1q2alx] {
        margin-bottom: 0;
    }

.platform-plan-heading[b-ygps1q2alx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.55rem;
}

    .platform-plan-heading span[b-ygps1q2alx] {
        color: #42536a;
        font-size: 0.86rem;
        font-weight: 700;
    }

    .platform-plan-heading strong[b-ygps1q2alx] {
        color: #19283d;
        font-size: 0.93rem;
        font-weight: 800;
    }

.platform-plan-track[b-ygps1q2alx] {
    width: 100%;
    height: 9px;
    overflow: hidden;
    background: #edf2f8;
    border-radius: 99px;
}

.platform-plan-fill[b-ygps1q2alx] {
    height: 100%;
    min-width: 0;
    background: linear-gradient(90deg, #2784df, #67b4f6);
    border-radius: inherit;
    transition: width 0.3s ease;
}

.platform-plan-share[b-ygps1q2alx] {
    margin-top: 0.4rem;
    color: #8894a3;
    font-size: 0.73rem;
}

.platform-panel-footer[b-ygps1q2alx] {
    margin-top: 1.2rem;
    padding-top: 1rem;
    color: #8592a3;
    border-top: 1px solid #edf1f5;
    font-size: 0.74rem;
    line-height: 1.5;
}

/* =========================================================
   SYSTEMAKTIVITÄT
   ========================================================= */

.platform-activity-grid[b-ygps1q2alx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.platform-activity-card[b-ygps1q2alx] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 119px;
    padding: 1.15rem;
    background: #fff;
    border: 1px solid #e1e8f1;
    border-radius: 14px;
}

    .platform-activity-card span[b-ygps1q2alx] {
        color: #718096;
        font-size: 0.81rem;
        font-weight: 650;
        line-height: 1.4;
    }

    .platform-activity-card strong[b-ygps1q2alx] {
        color: #18283e;
        font-size: 2rem;
        font-weight: 850;
        line-height: 1;
    }

.platform-activity-card-warning[b-ygps1q2alx] {
    background: #fffcf6;
    border-color: #f0e3c7;
}

/* =========================================================
   FIRMEN OHNE REINIGUNGSAKTIVITÄT
   ========================================================= */

.platform-page .platform-inactive-list[b-ygps1q2alx] {
    overflow: hidden;
    background: #fff;
    border: 1px solid #eadbb9;
    border-radius: 16px;
}

.platform-page .platform-inactive-row[b-ygps1q2alx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid #f3ebda;
    transition: background-color 0.15s ease;
}

    .platform-page .platform-inactive-row:last-child[b-ygps1q2alx] {
        border-bottom: none;
    }

    .platform-page .platform-inactive-row:hover[b-ygps1q2alx] {
        color: inherit;
        background: #fffaf2;
    }

.platform-row-main[b-ygps1q2alx] {
    min-width: 0;
}

.platform-page .platform-inactive-name[b-ygps1q2alx] {
    overflow-wrap: anywhere;
    color: #223148;
    font-size: 0.9rem;
    font-weight: 750;
}

.platform-page .platform-inactive-description[b-ygps1q2alx] {
    margin-top: 0.35rem;
    color: #8390a1;
    font-size: 0.78rem;
    line-height: 1.5;
}

.platform-page .platform-inactive-meta[b-ygps1q2alx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.platform-page .platform-inactive-days[b-ygps1q2alx] {
    padding: 0.45rem 0.7rem;
    color: #8c631e;
    background: #fff4d9;
    border-radius: 8px;
    font-size: 0.74rem;
    font-weight: 750;
    white-space: nowrap;
}

.platform-page .platform-inactive-arrow[b-ygps1q2alx] {
    color: #a1aab8;
    font-size: 1.2rem;
}

.platform-list-hint[b-ygps1q2alx] {
    margin-top: 0.65rem;
    color: #8793a4;
    font-size: 0.75rem;
}

/* =========================================================
   NEUE FIRMEN
   ========================================================= */

.platform-page .platform-company-list[b-ygps1q2alx] {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e1e8f1;
    border-radius: 16px;
}

.platform-page .platform-company-row[b-ygps1q2alx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid #edf1f5;
    transition: background-color 0.15s ease;
}

    .platform-page .platform-company-row:last-child[b-ygps1q2alx] {
        border-bottom: none;
    }

    .platform-page .platform-company-row:hover[b-ygps1q2alx] {
        color: inherit;
        background: #f6faff;
    }

.platform-page .platform-company-row-inactive[b-ygps1q2alx] {
    background: #fffafa;
}

    .platform-page .platform-company-row-inactive:hover[b-ygps1q2alx] {
        background: #fff4f5;
    }

.platform-page .platform-company-name-row[b-ygps1q2alx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.platform-page .platform-company-name[b-ygps1q2alx] {
    overflow-wrap: anywhere;
    color: #233249;
    font-size: 0.88rem;
    font-weight: 750;
}

.platform-page .platform-company-date[b-ygps1q2alx] {
    margin-top: 0.35rem;
    color: #8793a4;
    font-size: 0.75rem;
}

.platform-page .platform-company-status[b-ygps1q2alx] {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
}

.platform-page .platform-company-status-active[b-ygps1q2alx] {
    color: #177447;
    background: #e6f6ed;
}

.platform-page .platform-company-status-inactive[b-ygps1q2alx] {
    color: #ae3340;
    background: #fdecef;
}

.platform-page .platform-company-meta[b-ygps1q2alx] {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.55rem;
}

    .platform-page .platform-company-meta span[b-ygps1q2alx] {
        display: inline-flex;
        padding: 0.3rem 0.55rem;
        color: #4f637a;
        background: #f1f5fa;
        border-radius: 7px;
        font-size: 0.71rem;
        font-weight: 650;
    }

.platform-row-arrow[b-ygps1q2alx] {
    color: #9ba9b9;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* =========================================================
   SYSTEMSTATUS
   ========================================================= */

.platform-page .platform-health-card[b-ygps1q2alx] {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e1e8f1;
    border-radius: 16px;
}

.platform-page .platform-health-row[b-ygps1q2alx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid #edf1f5;
}

    .platform-page .platform-health-row:last-child[b-ygps1q2alx] {
        border-bottom: none;
    }

.platform-page .platform-health-name[b-ygps1q2alx] {
    color: #26374c;
    font-size: 0.86rem;
    font-weight: 750;
}

.platform-page .platform-health-description[b-ygps1q2alx] {
    margin-top: 0.3rem;
    color: #8692a2;
    font-size: 0.76rem;
    line-height: 1.5;
}

.platform-page .platform-health-status[b-ygps1q2alx] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.4rem 0.65rem;
    color: #16794b;
    background: #e8f7ef;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 750;
}

.platform-system-note[b-ygps1q2alx] {
    margin-top: 0.7rem;
    color: #8793a3;
    font-size: 0.74rem;
    line-height: 1.55;
}

/* =========================================================
   LEERZUSTÄNDE
   ========================================================= */

.platform-page .platform-empty[b-ygps1q2alx] {
    padding: 1.5rem;
    color: #68788e;
    background: #fff;
    border: 1px solid #e1e8f1;
    border-radius: 14px;
    font-size: 0.85rem;
}

    .platform-page .platform-empty p[b-ygps1q2alx] {
        margin: 0.4rem 0 0;
        font-size: 0.8rem;
        line-height: 1.5;
    }

.platform-page .platform-empty-success[b-ygps1q2alx] {
    color: #246947;
    background: #f3fbf6;
    border-color: #d2eadc;
}

/* =========================================================
   INTERAKTION UND ZUGÄNGLICHKEIT
   ========================================================= */

.platform-page a:focus-visible[b-ygps1q2alx],
.platform-page button:focus-visible[b-ygps1q2alx] {
    outline: 3px solid #6ba8f0;
    outline-offset: 3px;
}

.platform-page a[b-ygps1q2alx] {
    -webkit-tap-highlight-color: transparent;
}

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

@media (max-width: 1399.98px) {

    .platform-page .platform-stats[b-ygps1q2alx] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1199.98px) {

    .platform-contract-stats[b-ygps1q2alx] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .platform-dashboard-columns[b-ygps1q2alx] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {

    .platform-page .platform-page-header[b-ygps1q2alx] {
        flex-direction: column;
        align-items: stretch;
    }

    .platform-header-actions[b-ygps1q2alx] {
        width: 100%;
    }

    .platform-page .platform-stats[b-ygps1q2alx] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .platform-trial-alerts[b-ygps1q2alx] {
        grid-template-columns: 1fr;
    }

    .platform-page .platform-inactive-row[b-ygps1q2alx] {
        align-items: flex-start;
    }

    .platform-page .platform-inactive-meta[b-ygps1q2alx] {
        flex-direction: column;
        align-items: flex-end;
    }
}

@media (max-width: 575.98px) {

    .platform-page[b-ygps1q2alx] {
        padding-bottom: 2rem;
    }

    .platform-header-actions .btn[b-ygps1q2alx] {
        flex: 1 1 auto;
    }

    .platform-page .platform-stats[b-ygps1q2alx] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem;
    }

    .platform-page .platform-stat-card[b-ygps1q2alx] {
        padding: 1rem;
        border-radius: 13px;
    }

    .platform-page .platform-stat-label[b-ygps1q2alx] {
        font-size: 0.65rem;
    }

    .platform-page .platform-stat-value[b-ygps1q2alx] {
        font-size: 1.85rem;
    }

    .platform-page .platform-stat-description[b-ygps1q2alx] {
        font-size: 0.7rem;
    }

    .platform-contract-stats[b-ygps1q2alx] {
        gap: 0.7rem;
    }

    .platform-contract-card[b-ygps1q2alx] {
        padding: 1.05rem;
        border-radius: 13px;
    }

    .platform-contract-label[b-ygps1q2alx] {
        font-size: 0.75rem;
    }

    .platform-contract-number[b-ygps1q2alx] {
        font-size: 2rem;
    }

    .platform-contract-hint[b-ygps1q2alx] {
        font-size: 0.7rem;
    }

    .platform-page .platform-inactive-row[b-ygps1q2alx] {
        flex-direction: column;
        align-items: flex-start;
    }

    .platform-page .platform-inactive-meta[b-ygps1q2alx] {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .platform-page .platform-company-row[b-ygps1q2alx] {
        align-items: flex-start;
    }

    .platform-page .platform-section-header[b-ygps1q2alx] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.45rem;
    }

    .platform-page .platform-health-row[b-ygps1q2alx] {
        flex-wrap: wrap;
    }
}

@media (max-width: 380px) {

    .platform-page .platform-stats[b-ygps1q2alx],
    .platform-contract-stats[b-ygps1q2alx],
    .platform-activity-grid[b-ygps1q2alx] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {

    .platform-page .platform-stat-card[b-ygps1q2alx],
    .platform-page .platform-company-row[b-ygps1q2alx],
    .platform-page .platform-inactive-row[b-ygps1q2alx],
    .platform-page .platform-plan-fill[b-ygps1q2alx] {
        transition: none;
    }
}
/* /Components/Pages/Platform/PlatformSystem.razor.rz.scp.css */

/* CleanDation Platform – Systemstatus */

.system-page[b-iq9e9ypmf8] {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0.25rem 0 3rem;
    color: #1c2d43;
}

    .system-page *[b-iq9e9ypmf8],
    .system-page *[b-iq9e9ypmf8]::before,
    .system-page *[b-iq9e9ypmf8]::after {
        box-sizing: border-box;
    }

/* Header */

.system-header[b-iq9e9ypmf8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 1.9rem;
}

.system-eyebrow[b-iq9e9ypmf8],
.system-section-kicker[b-iq9e9ypmf8] {
    display: block;
    margin-bottom: 0.4rem;
    color: #287dce;
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.11em;
}

.system-header h1[b-iq9e9ypmf8] {
    margin: 0;
    color: #182a41;
    font-size: clamp(1.75rem, 2.5vw, 2.3rem);
    font-weight: 850;
    letter-spacing: -0.035em;
}

.system-header p[b-iq9e9ypmf8] {
    margin: 0.55rem 0 0;
    color: #718198;
    font-size: 0.9rem;
    line-height: 1.55;
}

.system-checked-at[b-iq9e9ypmf8] {
    display: block;
    margin-top: 0.8rem;
    color: #8a97a8;
    font-size: 0.76rem;
}

.system-refresh-button[b-iq9e9ypmf8] {
    min-height: 43px;
    padding: 0.6rem 1.05rem;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 750;
}

/* Ladezustand */

.system-loading[b-iq9e9ypmf8] {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    min-height: 135px;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #e1e8f1;
    border-radius: 15px;
}

    .system-loading strong[b-iq9e9ypmf8] {
        color: #2b3d53;
        font-size: 0.95rem;
    }

    .system-loading p[b-iq9e9ypmf8] {
        margin: 0.35rem 0 0;
        color: #8390a2;
        font-size: 0.81rem;
    }

.system-progress[b-iq9e9ypmf8] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.2rem;
    padding: 0.8rem 1rem;
    color: #2465a4;
    background: #eff7ff;
    border: 1px solid #d5e7fa;
    border-radius: 10px;
    font-size: 0.81rem;
    font-weight: 700;
}

/* Abschnitte */

.system-section[b-iq9e9ypmf8] {
    margin-bottom: 2rem;
}

.system-section-heading[b-iq9e9ypmf8] {
    margin-bottom: 1.05rem;
}

    .system-section-heading h2[b-iq9e9ypmf8] {
        margin: 0;
        color: #23364d;
        font-size: 1.14rem;
        font-weight: 850;
    }

    .system-section-heading p[b-iq9e9ypmf8] {
        margin: 0.35rem 0 0;
        color: #8190a3;
        font-size: 0.82rem;
        line-height: 1.55;
    }

/* Statuskarten */

.system-health-grid[b-iq9e9ypmf8] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.9rem;
}

.system-health-card[b-iq9e9ypmf8] {
    min-width: 0;
    padding: 1.2rem;
    background: #fff;
    border: 1px solid #e0e8f1;
    border-top: 3px solid #9aa8bb;
    border-radius: 15px;
    box-shadow: 0 4px 17px rgba(20, 45, 78, 0.035);
}

.system-health-success[b-iq9e9ypmf8] {
    border-top-color: #24a36c;
}

.system-health-warning[b-iq9e9ypmf8] {
    border-top-color: #e3a739;
}

.system-health-danger[b-iq9e9ypmf8] {
    border-top-color: #df5c69;
}

.system-health-head[b-iq9e9ypmf8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

    .system-health-head > span:first-child[b-iq9e9ypmf8] {
        color: #718298;
        font-size: 0.72rem;
        font-weight: 800;
        line-height: 1.4;
        text-transform: uppercase;
        letter-spacing: 0.035em;
    }

.system-health-icon[b-iq9e9ypmf8] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 29px;
    height: 29px;
    border-radius: 9px;
    font-size: 0.97rem;
    font-weight: 850;
}

.system-health-success .system-health-icon[b-iq9e9ypmf8] {
    color: #167a4b;
    background: #e8f7ef;
}

.system-health-warning .system-health-icon[b-iq9e9ypmf8] {
    color: #986819;
    background: #fff3d9;
}

.system-health-danger .system-health-icon[b-iq9e9ypmf8] {
    color: #b83d4a;
    background: #fdecef;
}

.system-health-card > strong[b-iq9e9ypmf8] {
    display: block;
    color: #1b2f47;
    font-size: clamp(1.05rem, 1.35vw, 1.4rem);
    font-weight: 850;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.system-health-card > p[b-iq9e9ypmf8] {
    margin: 0.55rem 0 0;
    color: #8795a5;
    font-size: 0.75rem;
    line-height: 1.55;
}

/* Aufmerksamkeit */

.system-attention[b-iq9e9ypmf8] {
    margin: 1.2rem 0 2rem;
    padding: 1rem 1.2rem;
    color: #805e25;
    background: #fff9ea;
    border: 1px solid #f0dfb4;
    border-radius: 12px;
}

    .system-attention strong[b-iq9e9ypmf8] {
        font-size: 0.87rem;
    }

    .system-attention p[b-iq9e9ypmf8] {
        margin: 0.35rem 0 0;
        font-size: 0.79rem;
        line-height: 1.6;
    }

/* Panels */

.system-two-columns[b-iq9e9ypmf8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
}

.system-panel[b-iq9e9ypmf8] {
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e0e8f1;
    border-radius: 15px;
    box-shadow: 0 4px 17px rgba(20, 45, 78, 0.035);
}

.system-panel-header[b-iq9e9ypmf8] {
    padding: 1.15rem 1.3rem;
    background: #f9fbfe;
    border-bottom: 1px solid #e9eef5;
}

    .system-panel-header h3[b-iq9e9ypmf8] {
        margin: 0;
        color: #263951;
        font-size: 1rem;
        font-weight: 850;
    }

    .system-panel-header p[b-iq9e9ypmf8] {
        margin: 0.3rem 0 0;
        color: #8794a5;
        font-size: 0.79rem;
        line-height: 1.5;
    }

/* Datenzeilen */

.system-data-list[b-iq9e9ypmf8] {
    margin: 0;
}

    .system-data-list > div[b-iq9e9ypmf8] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1.2rem;
        padding: 0.95rem 1.3rem;
        border-bottom: 1px solid #edf1f6;
    }

        .system-data-list > div:last-child[b-iq9e9ypmf8] {
            border-bottom: none;
        }

    .system-data-list dt[b-iq9e9ypmf8] {
        flex-shrink: 0;
        color: #718399;
        font-size: 0.8rem;
        font-weight: 600;
    }

    .system-data-list dd[b-iq9e9ypmf8] {
        min-width: 0;
        max-width: 65%;
        margin: 0;
        color: #283c54;
        font-size: 0.81rem;
        font-weight: 800;
        text-align: right;
        overflow-wrap: anywhere;
    }

.system-path[b-iq9e9ypmf8] {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.76rem !important;
}

.system-value-success[b-iq9e9ypmf8] {
    color: #198052 !important;
}

.system-value-warning[b-iq9e9ypmf8] {
    color: #a3741d !important;
}

.system-value-danger[b-iq9e9ypmf8] {
    color: #bf4350 !important;
}

/* Speicher */

.system-storage-grid[b-iq9e9ypmf8] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.system-storage-card[b-iq9e9ypmf8] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
    padding: 1.2rem;
    background: #fff;
    border: 1px solid #e0e8f1;
    border-radius: 14px;
}

    .system-storage-card > span[b-iq9e9ypmf8] {
        color: #708198;
        font-size: 0.75rem;
        font-weight: 800;
    }

    .system-storage-card > strong[b-iq9e9ypmf8] {
        color: #1d3047;
        font-size: 1.9rem;
        font-weight: 850;
        line-height: 1.1;
    }

    .system-storage-card > small[b-iq9e9ypmf8] {
        color: #8d9aab;
        font-size: 0.76rem;
    }

.system-hint[b-iq9e9ypmf8],
.system-footer-hint[b-iq9e9ypmf8] {
    margin: 0.9rem 0 0;
    color: #8b98a9;
    font-size: 0.76rem;
    line-height: 1.6;
}

/* Zeit */

.system-time-card[b-iq9e9ypmf8] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.15rem 1.3rem;
    background: #fff;
    border: 1px solid #e0e8f1;
    border-radius: 14px;
}

    .system-time-card span[b-iq9e9ypmf8] {
        color: #788ba0;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.04em;
    }

    .system-time-card strong[b-iq9e9ypmf8] {
        color: #263b54;
        font-size: 0.99rem;
        font-weight: 850;
    }

/* Diagnose */

.system-diagnostics[b-iq9e9ypmf8] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.system-diagnostic[b-iq9e9ypmf8] {
    padding: 1rem 1.15rem;
    color: #963b47;
    background: #fff4f5;
    border: 1px solid #f0ced3;
    border-radius: 11px;
}

    .system-diagnostic strong[b-iq9e9ypmf8] {
        font-size: 0.84rem;
    }

    .system-diagnostic p[b-iq9e9ypmf8] {
        margin: 0.35rem 0 0;
        font-size: 0.79rem;
        line-height: 1.55;
    }

/* Bedienbarkeit */

.system-page a:focus-visible[b-iq9e9ypmf8],
.system-page button:focus-visible[b-iq9e9ypmf8] {
    outline: 3px solid #76acf0;
    outline-offset: 3px;
}

/* Responsive */

@media (max-width: 1350px) {
    .system-health-grid[b-iq9e9ypmf8] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1050px) {
    .system-two-columns[b-iq9e9ypmf8] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .system-health-grid[b-iq9e9ypmf8] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .system-storage-grid[b-iq9e9ypmf8] {
        grid-template-columns: 1fr;
    }

    .system-data-list > div[b-iq9e9ypmf8] {
        flex-direction: column;
        gap: 0.4rem;
    }

    .system-data-list dd[b-iq9e9ypmf8] {
        max-width: none;
        text-align: left;
    }
}

@media (max-width: 575.98px) {
    .system-header[b-iq9e9ypmf8] {
        flex-direction: column;
        align-items: stretch;
    }

    .system-refresh-button[b-iq9e9ypmf8] {
        width: 100%;
    }

    .system-health-grid[b-iq9e9ypmf8] {
        gap: 0.7rem;
    }

    .system-health-card[b-iq9e9ypmf8] {
        padding: 1rem;
    }

        .system-health-card > strong[b-iq9e9ypmf8] {
            font-size: 1.05rem;
        }

    .system-panel-header[b-iq9e9ypmf8],
    .system-data-list > div[b-iq9e9ypmf8] {
        padding: 1rem;
    }
}

@media (max-width: 380px) {
    .system-health-grid[b-iq9e9ypmf8] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .system-page *[b-iq9e9ypmf8] {
        transition: none;
    }
}
/* /Components/Pages/Public/Funktionen.razor.rz.scp.css */

/* =========================================================
   CleanDation – Funktionen-Seite
   ========================================================= */

.features-page[b-jf7b69edun] {
    --features-navy: #111827;
    --features-light: #F7F9FC;
    --features-blue: #0050E8;
    --features-blue-hover: #003FC0;
    --features-accent: #80C7FF;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    overflow-x: clip;
    background: var(--features-light);
}

    .features-page[b-jf7b69edun],
    .features-page *[b-jf7b69edun] {
        box-sizing: border-box;
    }

/* =========================================================
   Gemeinsamer Container
   ========================================================= */

.features-container[b-jf7b69edun] {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding-right: 2.5rem;
    padding-left: 2.5rem;
}

/* =========================================================
   Hero
   ========================================================= */

.features-hero[b-jf7b69edun] {
    position: relative;
    overflow: hidden;
    padding: 6rem 0 6.5rem;
    color: #FFFFFF;
    background-color: var(--features-navy);
}

    .features-hero[b-jf7b69edun]::before {
        content: "";
        position: absolute;
        top: -230px;
        right: -180px;
        width: 700px;
        height: 700px;
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient( circle, rgba(0, 80, 232, 0.22) 0%, rgba(0, 80, 232, 0.06) 40%, transparent 70% );
    }

.features-hero-content[b-jf7b69edun] {
    position: relative;
    z-index: 1;
    max-width: 960px;
}

.features-eyebrow[b-jf7b69edun] {
    display: block;
    margin-bottom: 1.3rem;
    color: var(--features-accent);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.15em;
}

.features-title[b-jf7b69edun] {
    margin: 0 0 1.8rem;
    color: #FFFFFF;
    font-size: clamp(2.5rem, 4.3vw, 4.3rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.035em;
}

    .features-title span[b-jf7b69edun] {
        color: var(--features-accent);
    }

.features-hero-description[b-jf7b69edun] {
    max-width: 760px;
    margin: 0 0 2.3rem;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.25rem;
    line-height: 1.75;
}

/* =========================================================
   Buttons
   ========================================================= */

.features-hero-actions[b-jf7b69edun],
.features-final-actions[b-jf7b69edun] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.features-button-primary[b-jf7b69edun],
.features-button-outline[b-jf7b69edun],
.features-button-secondary[b-jf7b69edun] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 54px;
    padding: 0.95rem 1.7rem;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.features-button-primary[b-jf7b69edun] {
    color: #FFFFFF;
    background: var(--features-blue);
    border: 1px solid var(--features-blue);
    box-shadow: 0 8px 25px rgba(0, 80, 232, 0.18);
}

    .features-button-primary:hover[b-jf7b69edun] {
        color: #FFFFFF;
        background: var(--features-blue-hover);
        border-color: var(--features-blue-hover);
        transform: translateY(-2px);
    }

.features-button-outline[b-jf7b69edun] {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.75);
}

    .features-button-outline:hover[b-jf7b69edun] {
        color: var(--features-navy);
        background: #FFFFFF;
        border-color: #FFFFFF;
        transform: translateY(-2px);
    }

.features-button-secondary[b-jf7b69edun] {
    color: var(--features-navy);
    background: transparent;
    border: 1px solid #CAD4E1;
}

    .features-button-secondary:hover[b-jf7b69edun] {
        color: var(--features-blue);
        background: #FFFFFF;
        border-color: var(--features-blue);
        transform: translateY(-2px);
    }

    .features-button-primary:focus-visible[b-jf7b69edun],
    .features-button-outline:focus-visible[b-jf7b69edun],
    .features-button-secondary:focus-visible[b-jf7b69edun] {
        outline: 3px solid var(--features-accent);
        outline-offset: 4px;
    }

/* =========================================================
   Funktionsübersicht
   ========================================================= */

.features-overview[b-jf7b69edun] {
    padding: 6rem 0;
    background-color: var(--features-light);
}

.features-section-heading[b-jf7b69edun] {
    max-width: 800px;
    margin: 0 auto 3.5rem;
    text-align: center;
}

.features-section-eyebrow[b-jf7b69edun] {
    display: block;
    margin-bottom: 1rem;
    color: var(--features-blue);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.5;
}

.features-section-heading h2[b-jf7b69edun] {
    margin: 0 0 1.5rem;
    color: var(--features-navy);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.features-section-heading p[b-jf7b69edun] {
    max-width: 660px;
    margin: 0 auto;
    color: #52617A;
    font-size: 1.12rem;
    line-height: 1.8;
}

/* =========================================================
   Funktionskarten
   ========================================================= */

.features-grid[b-jf7b69edun] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.features-card[b-jf7b69edun] {
    min-width: 0;
    height: 100%;
    padding: 2.2rem;
    background: #FFFFFF;
    border: 1px solid #E4EAF2;
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(17, 24, 39, 0.035);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .features-card:hover[b-jf7b69edun] {
        transform: translateY(-4px);
        border-color: rgba(0, 80, 232, 0.24);
        box-shadow: 0 18px 40px rgba(17, 24, 39, 0.08);
    }

.features-card-icon[b-jf7b69edun] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    height: 60px;
    padding: 0 0.5rem;
    margin-bottom: 1.8rem;
    color: var(--features-blue);
    background: #EDF3FF;
    border-radius: 15px;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
}

.features-card h3[b-jf7b69edun] {
    margin: 0 0 1rem;
    color: var(--features-navy);
    font-size: 1.3rem;
    font-weight: 750;
    line-height: 1.35;
}

.features-card p[b-jf7b69edun] {
    margin: 0;
    color: #52617A;
    font-size: 1rem;
    line-height: 1.8;
}

/* =========================================================
   NEU: PDF-Nachweise und Reinigungsberichte
   ========================================================= */

.features-pdf-preview[b-jf7b69edun] {
    padding: 5.5rem 0;
    background: #FFFFFF;
    scroll-margin-top: 2rem;
}

.features-pdf-layout[b-jf7b69edun] {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 3.5rem;
}

.features-pdf-content[b-jf7b69edun] {
    min-width: 0;
}

    .features-pdf-content h2[b-jf7b69edun] {
        margin: 0 0 1.5rem;
        color: var(--features-navy);
        font-size: clamp(2rem, 3vw, 3.1rem);
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -0.03em;
    }

        .features-pdf-content h2 span[b-jf7b69edun] {
            display: block;
            color: var(--features-blue);
        }

    .features-pdf-content p[b-jf7b69edun] {
        margin: 0 0 1.25rem;
        color: #52617A;
        font-size: 1.07rem;
        line-height: 1.8;
    }

        .features-pdf-content p:last-of-type[b-jf7b69edun] {
            margin-bottom: 0;
        }

.features-pdf-points[b-jf7b69edun] {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}

.features-pdf-point[b-jf7b69edun] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    color: #26374C;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.55;
}

    .features-pdf-point > span:first-child[b-jf7b69edun] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        color: #198754;
        background: #E3F5EB;
        border-radius: 50%;
        font-size: 0.9rem;
        font-weight: 800;
    }

.features-pdf-visual[b-jf7b69edun] {
    width: 100%;
    min-width: 0;
}

    .features-pdf-visual img[b-jf7b69edun] {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

/* =========================================================
   Vorteile – dunkler Bereich
   ========================================================= */

.features-benefits[b-jf7b69edun] {
    padding: 6rem 0;
    color: #FFFFFF;
    background: var(--features-navy);
}

.features-benefits-layout[b-jf7b69edun] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 5rem;
}

.features-benefits-text h2[b-jf7b69edun] {
    margin: 0 0 1.8rem;
    color: #FFFFFF;
    font-size: clamp(2rem, 3vw, 3.1rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

    .features-benefits-text h2 span[b-jf7b69edun] {
        display: block;
        color: var(--features-accent);
    }

.features-benefits-text > p[b-jf7b69edun] {
    margin: 0 0 1.3rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.08rem;
    line-height: 1.85;
}

    .features-benefits-text > p:last-child[b-jf7b69edun] {
        margin-bottom: 0;
    }

/* Vorteile rechts */

.features-benefits-list[b-jf7b69edun] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.features-benefit-item[b-jf7b69edun] {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    background: #1D293D;
}

    .features-benefit-item > span[b-jf7b69edun] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        color: #FFFFFF;
        background: var(--features-blue);
        border-radius: 50%;
        font-weight: 800;
        font-size: 0.85rem;
    }

    .features-benefit-item strong[b-jf7b69edun] {
        display: block;
        margin-bottom: 0.3rem;
        color: #FFFFFF;
        font-size: 1.05rem;
        line-height: 1.4;
    }

    .features-benefit-item p[b-jf7b69edun] {
        margin: 0;
        color: rgba(255, 255, 255, 0.74);
        font-size: 0.96rem;
        line-height: 1.65;
    }

/* =========================================================
   Abschlussbereich
   ========================================================= */

.features-final-cta[b-jf7b69edun] {
    padding: 6rem 0;
    background: var(--features-light);
}

.features-final-content[b-jf7b69edun] {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

    .features-final-content h2[b-jf7b69edun] {
        margin: 0 0 1.5rem;
        color: var(--features-navy);
        font-size: clamp(2.1rem, 3.5vw, 3.3rem);
        font-weight: 800;
        line-height: 1.18;
        letter-spacing: -0.03em;
    }

    .features-final-content > p:not(.features-final-note)[b-jf7b69edun] {
        max-width: 660px;
        margin: 0 auto 2.25rem;
        color: #52617A;
        font-size: 1.13rem;
        line-height: 1.8;
    }

.features-final-actions[b-jf7b69edun] {
    justify-content: center;
    margin-bottom: 1.5rem;
}

.features-final-note[b-jf7b69edun] {
    margin: 0;
    color: #64748B;
    font-size: 0.93rem;
    line-height: 1.6;
}

/* =========================================================
   Footer
   ========================================================= */

.features-footer[b-jf7b69edun] {
    padding: 2.5rem 0;
    color: #FFFFFF;
    background: var(--features-navy);
}

.features-footer-inner[b-jf7b69edun] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.features-footer-brand[b-jf7b69edun] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.features-footer-logo[b-jf7b69edun] {
    display: block;
    width: auto;
    max-width: 190px;
    height: 32px;
    object-fit: contain;
}

.features-footer-brand > span[b-jf7b69edun] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.92rem;
}

.features-footer-links[b-jf7b69edun] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.3rem;
}

    .features-footer-links a[b-jf7b69edun] {
        color: rgba(255, 255, 255, 0.82);
        font-size: 0.92rem;
        font-weight: 500;
        text-decoration: none;
    }

        .features-footer-links a:hover[b-jf7b69edun] {
            color: var(--features-accent);
        }

        .features-footer-links a:focus-visible[b-jf7b69edun] {
            outline: 2px solid var(--features-accent);
            outline-offset: 4px;
        }

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {

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

    .features-benefits-layout[b-jf7b69edun] {
        gap: 3rem;
    }

    .features-pdf-layout[b-jf7b69edun] {
        gap: 2rem;
    }
}

@media (max-width: 991.98px) {

    .features-container[b-jf7b69edun] {
        padding-right: 2rem;
        padding-left: 2rem;
    }

    .features-hero[b-jf7b69edun] {
        padding: 4.5rem 0 5rem;
    }

    .features-overview[b-jf7b69edun],
    .features-benefits[b-jf7b69edun],
    .features-final-cta[b-jf7b69edun] {
        padding: 4.5rem 0;
    }

    .features-benefits-layout[b-jf7b69edun] {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .features-pdf-preview[b-jf7b69edun] {
        padding: 4.5rem 0;
    }

    .features-pdf-layout[b-jf7b69edun] {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .features-pdf-content[b-jf7b69edun] {
        max-width: 720px;
    }

    .features-pdf-visual[b-jf7b69edun] {
        max-width: 850px;
        margin: 0 auto;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .features-container[b-jf7b69edun] {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .features-hero[b-jf7b69edun] {
        padding: 3.5rem 0 4rem;
    }

    .features-eyebrow[b-jf7b69edun],
    .features-section-eyebrow[b-jf7b69edun] {
        font-size: 0.72rem;
        letter-spacing: 0.11em;
    }

    .features-title[b-jf7b69edun] {
        font-size: clamp(2rem, 7vw, 2.6rem);
        line-height: 1.16;
    }

    .features-hero-description[b-jf7b69edun] {
        font-size: 1rem;
        line-height: 1.7;
    }

    .features-hero-actions[b-jf7b69edun],
    .features-final-actions[b-jf7b69edun] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }

    .features-button-primary[b-jf7b69edun],
    .features-button-outline[b-jf7b69edun],
    .features-button-secondary[b-jf7b69edun] {
        width: 100%;
        min-height: 52px;
    }

    .features-overview[b-jf7b69edun],
    .features-benefits[b-jf7b69edun],
    .features-final-cta[b-jf7b69edun] {
        padding: 4rem 0;
    }

    .features-section-heading[b-jf7b69edun] {
        margin-bottom: 2.5rem;
    }

        .features-section-heading h2[b-jf7b69edun] {
            font-size: 2rem;
        }

        .features-section-heading p[b-jf7b69edun] {
            font-size: 1rem;
        }

    .features-grid[b-jf7b69edun] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .features-card[b-jf7b69edun] {
        padding: 1.75rem;
        border-radius: 15px;
    }

    .features-card-icon[b-jf7b69edun] {
        min-width: 54px;
        height: 54px;
        margin-bottom: 1.4rem;
        border-radius: 13px;
    }

    .features-card h3[b-jf7b69edun] {
        font-size: 1.22rem;
    }

    .features-card p[b-jf7b69edun] {
        font-size: 0.98rem;
        line-height: 1.7;
    }

    /* PDF-Vorschau */

    .features-pdf-preview[b-jf7b69edun] {
        padding: 3.5rem 0;
    }

    .features-pdf-layout[b-jf7b69edun] {
        gap: 2rem;
    }

    .features-pdf-content h2[b-jf7b69edun] {
        font-size: 2rem;
    }

    .features-pdf-content p[b-jf7b69edun] {
        font-size: 1rem;
        line-height: 1.75;
    }

    .features-pdf-points[b-jf7b69edun] {
        margin-top: 1.5rem;
        gap: 0.9rem;
    }

    .features-pdf-point[b-jf7b69edun] {
        font-size: 0.96rem;
    }

    /* Bestehende Vorteile */

    .features-benefits-text h2[b-jf7b69edun] {
        font-size: 2rem;
    }

    .features-benefits-text > p[b-jf7b69edun] {
        font-size: 1rem;
        line-height: 1.75;
    }

    .features-benefit-item[b-jf7b69edun] {
        padding: 1.25rem;
    }

    .features-final-content h2[b-jf7b69edun] {
        font-size: 2.05rem;
    }

    .features-final-content > p:not(.features-final-note)[b-jf7b69edun] {
        font-size: 1rem;
    }

    .features-footer[b-jf7b69edun] {
        padding: 2.5rem 0;
    }

    .features-footer-inner[b-jf7b69edun] {
        flex-direction: column;
        align-items: flex-start;
    }

    .features-footer-brand[b-jf7b69edun] {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }

    .features-footer-links[b-jf7b69edun] {
        gap: 1rem 1.3rem;
    }
}

/* =========================================================
   Sehr kleine Smartphones
   ========================================================= */

@media (max-width: 380px) {

    .features-container[b-jf7b69edun] {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .features-title[b-jf7b69edun] {
        font-size: 1.9rem;
    }

    .features-section-heading h2[b-jf7b69edun],
    .features-benefits-text h2[b-jf7b69edun],
    .features-pdf-content h2[b-jf7b69edun] {
        font-size: 1.85rem;
    }
}

/* =========================================================
   Reduzierte Animationen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .features-card[b-jf7b69edun],
    .features-button-primary[b-jf7b69edun],
    .features-button-outline[b-jf7b69edun],
    .features-button-secondary[b-jf7b69edun] {
        transition: none;
    }

        .features-card:hover[b-jf7b69edun],
        .features-button-primary:hover[b-jf7b69edun],
        .features-button-outline:hover[b-jf7b69edun],
        .features-button-secondary:hover[b-jf7b69edun] {
            transform: none;
        }
}
/* /Components/Pages/Public/Home.razor.rz.scp.css */

/* =========================================================
   CleanDation – Startseite
   ========================================================= */

/* Markenfarben */

.home-page[b-3idrwc2cgx] {
    --home-navy: #111827;
    --home-light: #F7F9FC;
    --home-blue: #0050E8;
    --home-blue-hover: #003FC0;
    --home-accent: #80C7FF;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: clip;
    background-color: var(--home-light);
}

/* =========================================================
   Hero – dunkler Bildhintergrund
   ========================================================= */

.home-hero[b-3idrwc2cgx] {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 660px;
    overflow: hidden;
    background-color: var(--home-navy);
    background-image: url('/images/cdimage.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

    .home-hero[b-3idrwc2cgx]::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient( to right, rgba(17, 24, 39, 0.96) 0%, rgba(17, 24, 39, 0.92) 22%, rgba(17, 24, 39, 0.84) 42%, rgba(17, 24, 39, 0.64) 60%, rgba(17, 24, 39, 0.26) 78%, rgba(17, 24, 39, 0.08) 100% ), linear-gradient( to top, rgba(17, 24, 39, 0.65) 0%, rgba(17, 24, 39, 0.35) 35%, rgba(17, 24, 39, 0.05) 100% );
    }

/* Inhalt */

.home-hero-content[b-3idrwc2cgx] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 4.5rem 2.5rem 6rem;
    box-sizing: border-box;
}

/* Kleine Überschrift */

.home-eyebrow[b-3idrwc2cgx] {
    margin: 0 0 1.25rem;
    color: var(--home-accent);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* Hauptüberschrift */

.home-title[b-3idrwc2cgx] {
    max-width: 980px;
    margin: 0 0 1.75rem;
    font-size: clamp(2.4rem, 4.1vw, 4rem);
    font-weight: 750;
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.home-title-main[b-3idrwc2cgx],
.home-title-accent[b-3idrwc2cgx] {
    display: block;
}

.home-title-main[b-3idrwc2cgx] {
    color: #FFFFFF;
}

.home-title-accent[b-3idrwc2cgx] {
    color: var(--home-accent);
}

/* Beschreibung */

.home-lead[b-3idrwc2cgx] {
    max-width: 760px;
    margin: 0 0 2rem;
    color: rgba(255, 255, 255, 0.90);
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    font-weight: 450;
    line-height: 1.65;
}

/* =========================================================
   Vorteile
   ========================================================= */

.home-benefit-list[b-3idrwc2cgx] {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    width: 100%;
    max-width: 780px;
    margin: 0 0 2.5rem;
}

.home-benefit-item[b-3idrwc2cgx] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    color: rgba(255, 255, 255, 0.96);
    font-size: 1.04rem;
    font-weight: 600;
    line-height: 1.55;
}

.home-benefit-check[b-3idrwc2cgx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin-top: 0.05rem;
    color: #FFFFFF;
    background-color: var(--home-blue);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(0, 80, 232, 0.22);
}

/* =========================================================
   Hero-Buttons
   ========================================================= */

.home-actions[b-3idrwc2cgx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
}

    .home-actions .btn[b-3idrwc2cgx] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        padding: 0.85rem 1.6rem;
        border-radius: 10px;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.3;
        text-align: center;
        text-decoration: none;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }

    .home-actions .btn-primary[b-3idrwc2cgx] {
        color: #FFFFFF;
        background-color: var(--home-blue);
        border-color: var(--home-blue);
        box-shadow: 0 8px 24px rgba(0, 80, 232, 0.20);
    }

        .home-actions .btn-primary:hover[b-3idrwc2cgx] {
            color: #FFFFFF;
            background-color: var(--home-blue-hover);
            border-color: var(--home-blue-hover);
            transform: translateY(-2px);
        }

    .home-actions .btn-outline-primary[b-3idrwc2cgx] {
        color: #FFFFFF;
        background-color: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.80);
    }

        .home-actions .btn-outline-primary:hover[b-3idrwc2cgx] {
            color: var(--home-navy);
            background-color: #FFFFFF;
            border-color: #FFFFFF;
            transform: translateY(-2px);
        }

    .home-actions .btn:focus-visible[b-3idrwc2cgx] {
        outline: 3px solid var(--home-accent);
        outline-offset: 3px;
    }

    .home-actions .btn:active[b-3idrwc2cgx] {
        transform: translateY(0);
    }

/* =========================================================
   Showcase – heller Hintergrund
   ========================================================= */

.home-showcase[b-3idrwc2cgx] {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--home-light);
}

.home-showcase-inner[b-3idrwc2cgx] {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    align-items: center;
    gap: 3.5rem;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 6rem 2.5rem;
    box-sizing: border-box;
}

.home-showcase-text[b-3idrwc2cgx] {
    min-width: 0;
}

.home-showcase-title[b-3idrwc2cgx] {
    margin: 0 0 1.5rem;
    color: var(--home-navy);
    font-size: clamp(2rem, 2.6vw, 2.8rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.home-showcase-description[b-3idrwc2cgx] {
    max-width: 760px;
    margin: 0 0 1.35rem;
    color: #475569;
    font-size: 1.1rem;
    line-height: 1.85;
}

    .home-showcase-description:last-child[b-3idrwc2cgx] {
        margin-bottom: 0;
    }

/* Produktvorschau */

.home-showcase-media[b-3idrwc2cgx] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.home-showcase-image[b-3idrwc2cgx] {
    display: block;
    width: 100%;
    max-width: 760px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow( 0 22px 35px rgba(17, 24, 39, 0.12) );
}

/* =========================================================
   NEU: QR-Code-Vorschau
   ========================================================= */

.home-qr-preview[b-3idrwc2cgx] {
    width: 100%;
    padding: 5rem 0;
    background-color: #FFFFFF;
}

.home-qr-preview-inner[b-3idrwc2cgx] {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 3.5rem;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 2.5rem;
    box-sizing: border-box;
}

.home-qr-preview-text[b-3idrwc2cgx] {
    min-width: 0;
}

.home-qr-preview-eyebrow[b-3idrwc2cgx] {
    display: block;
    margin-bottom: 1rem;
    color: var(--home-blue);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.home-qr-preview-text h2[b-3idrwc2cgx] {
    margin: 0 0 1.5rem;
    color: var(--home-navy);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.home-qr-preview-text p[b-3idrwc2cgx] {
    margin: 0 0 1.2rem;
    color: #52617A;
    font-size: 1.08rem;
    line-height: 1.8;
}

.home-qr-preview-benefits[b-3idrwc2cgx] {
    display: grid;
    gap: 0.95rem;
    margin-top: 1.8rem;
}

.home-qr-preview-benefit[b-3idrwc2cgx] {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    color: #26374C;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.55;
}

    .home-qr-preview-benefit > span:first-child[b-3idrwc2cgx] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        color: #198754;
        background: #E3F5EB;
        border-radius: 50%;
        font-size: 0.9rem;
        font-weight: 800;
    }

.home-qr-preview-media[b-3idrwc2cgx] {
    display: flex;
    justify-content: center;
    min-width: 0;
}

.home-qr-preview-card[b-3idrwc2cgx] {
    width: 100%;
    max-width: 420px;
    padding: 1.25rem;
    background: #FFFFFF;
    border: 1px solid #DBE5F1;
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(17, 24, 39, 0.08);
}

.home-qr-preview-image[b-3idrwc2cgx] {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* =========================================================
   Link zur PDF-Vorschau
   ========================================================= */

.home-proof-link-section[b-3idrwc2cgx] {
    width: 100%;
    padding: 2.5rem 1.25rem;
    background-color: var(--home-light);
    text-align: center;
}

.home-proof-link-inner[b-3idrwc2cgx] {
    max-width: 820px;
    margin: 0 auto;
}

    .home-proof-link-inner p[b-3idrwc2cgx] {
        margin: 0 0 0.9rem;
        color: #52617A;
        font-size: 1rem;
        line-height: 1.6;
    }

.home-proof-link[b-3idrwc2cgx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    color: var(--home-blue);
    font-size: 1.05rem;
    font-weight: 750;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
}

    .home-proof-link:hover[b-3idrwc2cgx] {
        color: var(--home-blue-hover);
        text-decoration: underline;
    }

    .home-proof-link:focus-visible[b-3idrwc2cgx] {
        outline: 3px solid var(--home-accent);
        outline-offset: 5px;
        border-radius: 4px;
    }

    .home-proof-link > span[b-3idrwc2cgx] {
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }

    .home-proof-link:hover > span[b-3idrwc2cgx] {
        transform: translateX(4px);
    }

/* =========================================================
   Footer – dunkles Navy
   ========================================================= */

.home-footer[b-3idrwc2cgx] {
    width: 100%;
    margin: 0;
    padding: 0;
    color: #FFFFFF;
    background-color: var(--home-navy);
}

.home-footer-inner[b-3idrwc2cgx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 2.5rem;
    box-sizing: border-box;
}

.home-footer-brand[b-3idrwc2cgx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.home-footer-logo[b-3idrwc2cgx] {
    display: block;
    width: auto;
    max-width: 190px;
    height: 32px;
    object-fit: contain;
}

.home-footer-divider[b-3idrwc2cgx] {
    width: 1px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.30);
}

.home-footer-claim[b-3idrwc2cgx] {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.92rem;
    line-height: 1.5;
}

.home-footer-links[b-3idrwc2cgx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

    .home-footer-links a[b-3idrwc2cgx] {
        color: rgba(255, 255, 255, 0.88);
        font-size: 0.92rem;
        font-weight: 500;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .home-footer-links a:hover[b-3idrwc2cgx] {
            color: var(--home-accent);
        }

        .home-footer-links a:focus-visible[b-3idrwc2cgx] {
            outline: 2px solid var(--home-accent);
            outline-offset: 4px;
        }

.home-footer-separator[b-3idrwc2cgx] {
    color: rgba(255, 255, 255, 0.35);
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {

    .home-showcase-inner[b-3idrwc2cgx] {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .home-showcase-media[b-3idrwc2cgx] {
        justify-content: flex-start;
    }

    .home-showcase-image[b-3idrwc2cgx] {
        max-width: 620px;
    }
}

@media (max-width: 991.98px) {

    .home-hero-content[b-3idrwc2cgx] {
        padding: 3.5rem 2rem 5rem;
    }

    .home-title[b-3idrwc2cgx] {
        font-size: clamp(2.3rem, 5vw, 3.4rem);
    }

    .home-showcase-inner[b-3idrwc2cgx] {
        padding: 4.5rem 2rem;
    }

    .home-showcase-text[b-3idrwc2cgx] {
        max-width: none;
    }

    .home-showcase-image[b-3idrwc2cgx] {
        max-width: 100%;
    }

    .home-qr-preview[b-3idrwc2cgx] {
        padding: 4.5rem 0;
    }

    .home-qr-preview-inner[b-3idrwc2cgx] {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding-right: 2rem;
        padding-left: 2rem;
    }

    .home-qr-preview-media[b-3idrwc2cgx] {
        justify-content: flex-start;
    }

    .home-footer-inner[b-3idrwc2cgx] {
        padding: 2.25rem 2rem;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .home-hero[b-3idrwc2cgx] {
        min-height: auto;
        background-position: 58% center;
    }

        .home-hero[b-3idrwc2cgx]::before {
            background: linear-gradient( to bottom, rgba(17, 24, 39, 0.94) 0%, rgba(17, 24, 39, 0.90) 45%, rgba(17, 24, 39, 0.85) 100% );
        }

    .home-hero-content[b-3idrwc2cgx] {
        padding: 3rem 1.25rem 4.5rem;
    }

    .home-eyebrow[b-3idrwc2cgx] {
        margin-bottom: 1rem;
        font-size: 0.72rem;
        letter-spacing: 0.11em;
    }

    .home-title[b-3idrwc2cgx] {
        margin-bottom: 1.4rem;
        font-size: clamp(2rem, 7vw, 2.5rem);
        line-height: 1.15;
    }

    .home-lead[b-3idrwc2cgx] {
        margin-bottom: 1.6rem;
        font-size: 1rem;
        line-height: 1.65;
    }

    .home-benefit-list[b-3idrwc2cgx] {
        gap: 1rem;
        max-width: none;
        margin-bottom: 2rem;
    }

    .home-benefit-item[b-3idrwc2cgx] {
        gap: 0.75rem;
        font-size: 0.96rem;
        line-height: 1.5;
    }

    .home-benefit-check[b-3idrwc2cgx] {
        flex-basis: 25px;
        width: 25px;
        height: 25px;
        font-size: 0.82rem;
    }

    .home-actions[b-3idrwc2cgx] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }

        .home-actions .btn[b-3idrwc2cgx] {
            width: 100%;
            min-height: 52px;
            padding: 0.9rem 1.1rem;
        }

    /* Showcase Mobile */

    .home-showcase-inner[b-3idrwc2cgx] {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 3.5rem 1.25rem;
    }

    .home-showcase-title[b-3idrwc2cgx] {
        font-size: 1.85rem;
        line-height: 1.25;
    }

    .home-showcase-description[b-3idrwc2cgx] {
        font-size: 1rem;
        line-height: 1.75;
    }

    .home-showcase-image[b-3idrwc2cgx] {
        max-width: 100%;
    }

    /* QR-Vorschau Mobile */

    .home-qr-preview[b-3idrwc2cgx] {
        padding: 3.5rem 0;
    }

    .home-qr-preview-inner[b-3idrwc2cgx] {
        gap: 2rem;
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .home-qr-preview-text h2[b-3idrwc2cgx] {
        font-size: 2rem;
    }

    .home-qr-preview-text p[b-3idrwc2cgx] {
        font-size: 1rem;
        line-height: 1.7;
    }

    .home-qr-preview-media[b-3idrwc2cgx] {
        justify-content: center;
    }

    .home-qr-preview-card[b-3idrwc2cgx] {
        max-width: 100%;
        padding: 0.9rem;
        border-radius: 16px;
    }

    /* Link zur PDF-Vorschau Mobile */

    .home-proof-link-section[b-3idrwc2cgx] {
        padding: 2rem 1.25rem;
    }

    .home-proof-link[b-3idrwc2cgx] {
        font-size: 1rem;
    }

    /* Footer Mobile */

    .home-footer-inner[b-3idrwc2cgx] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.75rem;
        padding: 2.5rem 1.25rem;
    }

    .home-footer-brand[b-3idrwc2cgx] {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }

    .home-footer-divider[b-3idrwc2cgx] {
        display: none;
    }

    .home-footer-links[b-3idrwc2cgx] {
        gap: 0.65rem;
    }

        .home-footer-links a[b-3idrwc2cgx] {
            font-size: 0.88rem;
        }
}

/* =========================================================
   Sehr kleine Smartphones
   ========================================================= */

@media (max-width: 380px) {

    .home-hero-content[b-3idrwc2cgx] {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .home-title[b-3idrwc2cgx] {
        font-size: 1.9rem;
    }

    .home-benefit-item[b-3idrwc2cgx] {
        font-size: 0.92rem;
    }

    .home-showcase-inner[b-3idrwc2cgx] {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .home-qr-preview-inner[b-3idrwc2cgx] {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .home-proof-link-section[b-3idrwc2cgx] {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .home-footer-inner[b-3idrwc2cgx] {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

/* =========================================================
   Reduzierte Animationen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .home-actions .btn[b-3idrwc2cgx],
    .home-footer-links a[b-3idrwc2cgx],
    .home-proof-link > span[b-3idrwc2cgx] {
        transition: none;
    }

        .home-actions .btn:hover[b-3idrwc2cgx],
        .home-proof-link:hover > span[b-3idrwc2cgx] {
            transform: none;
        }
}
/* /Components/Pages/Public/HomeFinalCta.razor.rz.scp.css */

/* =========================================================
   CleanDation – Finaler Landingpage-CTA
   ========================================================= */

.home-final-cta[b-e1dlg86ehg] {
    --cta-navy: #111827;
    --cta-light: #F7F9FC;
    --cta-blue: #0050E8;
    --cta-blue-hover: #003FC0;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--cta-light);
}

/* =========================================================
   Hauptcontainer
   ========================================================= */

.home-final-cta-inner[b-e1dlg86ehg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 6.5rem 2.5rem;
    box-sizing: border-box;
}

.home-final-cta-content[b-e1dlg86ehg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 850px;
    text-align: center;
}

/* =========================================================
   Kleine Überschrift
   ========================================================= */

.home-final-cta-eyebrow[b-e1dlg86ehg] {
    display: block;
    margin-bottom: 1.25rem;
    color: var(--cta-blue);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.15em;
}

/* =========================================================
   Hauptüberschrift
   ========================================================= */

.home-final-cta-title[b-e1dlg86ehg] {
    max-width: 780px;
    margin: 0 0 1.5rem;
    color: var(--cta-navy);
    font-size: clamp(2.1rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

/* =========================================================
   Beschreibung
   ========================================================= */

.home-final-cta-description[b-e1dlg86ehg] {
    max-width: 680px;
    margin: 0 0 2.25rem;
    color: #52617A;
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.8;
}

/* =========================================================
   Buttons
   ========================================================= */

.home-final-cta-actions[b-e1dlg86ehg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    margin: 0 0 1.75rem;
}

.home-final-cta-button[b-e1dlg86ehg],
.home-final-cta-secondary[b-e1dlg86ehg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    min-height: 54px;
    padding: 0.95rem 1.8rem;
    border-radius: 11px;
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Primärer Button */

.home-final-cta-button[b-e1dlg86ehg] {
    color: #FFFFFF;
    background-color: var(--cta-blue);
    border: 1px solid var(--cta-blue);
    box-shadow: 0 10px 26px rgba(0, 80, 232, 0.16);
}

    .home-final-cta-button:hover[b-e1dlg86ehg] {
        color: #FFFFFF;
        background-color: var(--cta-blue-hover);
        border-color: var(--cta-blue-hover);
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(0, 80, 232, 0.22);
    }

/* Sekundärer Button */

.home-final-cta-secondary[b-e1dlg86ehg] {
    color: var(--cta-navy);
    background-color: transparent;
    border: 1px solid #C7D1DE;
}

    .home-final-cta-secondary:hover[b-e1dlg86ehg] {
        color: var(--cta-blue);
        background-color: #FFFFFF;
        border-color: var(--cta-blue);
        text-decoration: none;
        transform: translateY(-2px);
    }

    /* Tastaturbedienung */

    .home-final-cta-button:focus-visible[b-e1dlg86ehg],
    .home-final-cta-secondary:focus-visible[b-e1dlg86ehg] {
        outline: 3px solid #80C7FF;
        outline-offset: 4px;
    }

/* =========================================================
   Zusatzinformation
   ========================================================= */

.home-final-cta-hint[b-e1dlg86ehg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    max-width: 500px;
    margin: 0 auto;
    color: #52617A;
    font-size: 0.95rem;
    line-height: 1.6;
}

.home-final-cta-check[b-e1dlg86ehg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    color: #FFFFFF;
    background-color: var(--cta-blue);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 991.98px) {

    .home-final-cta-inner[b-e1dlg86ehg] {
        padding: 5rem 2rem;
    }

    .home-final-cta-description[b-e1dlg86ehg] {
        font-size: 1.08rem;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .home-final-cta-inner[b-e1dlg86ehg] {
        padding: 4.5rem 1.25rem;
    }

    .home-final-cta-eyebrow[b-e1dlg86ehg] {
        margin-bottom: 1rem;
        font-size: 0.72rem;
        letter-spacing: 0.11em;
    }

    .home-final-cta-title[b-e1dlg86ehg] {
        margin-bottom: 1.4rem;
        font-size: 2.05rem;
        line-height: 1.2;
    }

    .home-final-cta-description[b-e1dlg86ehg] {
        margin-bottom: 2rem;
        font-size: 1rem;
        line-height: 1.75;
    }

    .home-final-cta-actions[b-e1dlg86ehg] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
        margin-bottom: 1.5rem;
    }

    .home-final-cta-button[b-e1dlg86ehg],
    .home-final-cta-secondary[b-e1dlg86ehg] {
        width: 100%;
        min-height: 52px;
        padding: 0.9rem 1.1rem;
    }

    .home-final-cta-hint[b-e1dlg86ehg] {
        align-items: flex-start;
        text-align: left;
        font-size: 0.88rem;
    }

    .home-final-cta-check[b-e1dlg86ehg] {
        margin-top: 0.1rem;
    }
}

/* =========================================================
   Kleine Smartphones
   ========================================================= */

@media (max-width: 380px) {

    .home-final-cta-inner[b-e1dlg86ehg] {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .home-final-cta-title[b-e1dlg86ehg] {
        font-size: 1.85rem;
    }
}

/* =========================================================
   Reduzierte Animationen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .home-final-cta-button[b-e1dlg86ehg],
    .home-final-cta-secondary[b-e1dlg86ehg] {
        transition: none;
    }

        .home-final-cta-button:hover[b-e1dlg86ehg],
        .home-final-cta-secondary:hover[b-e1dlg86ehg] {
            transform: none;
        }
}
/* /Components/Pages/Public/HomeSteps.razor.rz.scp.css */

/* =========================================================
   CleanDation – So funktioniert's / Startseite
   ========================================================= */

.home-steps[b-u4ymyyt3jq] {
    --steps-navy: #111827;
    --steps-blue: #0050E8;
    --steps-accent: #80C7FF;
    width: 100%;
    padding: 0;
    margin: 0;
    color: #FFFFFF;
    background-color: var(--steps-navy);
}

/* Hauptcontainer */

.home-steps-inner[b-u4ymyyt3jq] {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 6rem 2.5rem;
    box-sizing: border-box;
}

/* =========================================================
   Überschriften
   ========================================================= */

.home-steps-heading[b-u4ymyyt3jq] {
    max-width: 820px;
    margin: 0 auto 3.5rem;
    text-align: center;
}

.home-steps-eyebrow[b-u4ymyyt3jq] {
    display: block;
    margin-bottom: 1.2rem;
    color: var(--steps-accent);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.home-steps-title[b-u4ymyyt3jq] {
    margin: 0 0 1.5rem;
    color: #FFFFFF;
    font-size: clamp(2rem, 3.5vw, 3.2rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.home-steps-lead[b-u4ymyyt3jq] {
    max-width: 650px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.76);
    font-size: 1.15rem;
    line-height: 1.7;
}

/* =========================================================
   Drei Karten
   ========================================================= */

.home-steps-grid[b-u4ymyyt3jq] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.home-step-card[b-u4ymyyt3jq] {
    min-width: 0;
    padding: 2.25rem;
    background-color: #1D293D;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

    .home-step-card:hover[b-u4ymyyt3jq] {
        transform: translateY(-4px);
        border-color: rgba(128, 199, 255, 0.45);
    }

/* Schrittnummer */

.home-step-number[b-u4ymyyt3jq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 2rem;
    color: #FFFFFF;
    background-color: var(--steps-blue);
    border-radius: 16px;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
}



    /* QR-Code im ersten Schritt */

    .home-step-number.home-step-qr[b-u4ymyyt3jq] {
        width: 80px;
        height: 80px;
        padding: 5px;
        background-color: #ffffff;
        border: none;
        border-radius: 12px;
        overflow: hidden;
    }

.home-step-qr-image[b-u4ymyyt3jq] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}



/* Kartentitel */

.home-step-title[b-u4ymyyt3jq] {
    margin: 0 0 1rem;
    color: #FFFFFF;
    font-size: 1.35rem;
    font-weight: 750;
    line-height: 1.3;
}

/* Kartentext */

.home-step-description[b-u4ymyyt3jq] {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1rem;
    line-height: 1.8;
}

/* =========================================================
   Unterer Bereich
   ========================================================= */

.home-steps-bottom[b-u4ymyyt3jq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin-top: 3.5rem;
    text-align: center;
}

.home-steps-bottom-text[b-u4ymyyt3jq] {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.5;
}

.home-steps-link[b-u4ymyyt3jq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    color: #FFFFFF;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 10px;
    font-size: 0.98rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

    .home-steps-link:hover[b-u4ymyyt3jq] {
        color: var(--steps-navy);
        background-color: #FFFFFF;
        border-color: #FFFFFF;
        text-decoration: none;
    }

    .home-steps-link:focus-visible[b-u4ymyyt3jq] {
        outline: 3px solid var(--steps-accent);
        outline-offset: 3px;
    }

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 991.98px) {

    .home-steps-inner[b-u4ymyyt3jq] {
        padding: 4.5rem 2rem;
    }

    .home-steps-grid[b-u4ymyyt3jq] {
        gap: 1rem;
    }

    .home-step-card[b-u4ymyyt3jq] {
        padding: 1.5rem;
    }

    .home-step-title[b-u4ymyyt3jq] {
        font-size: 1.2rem;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .home-steps-inner[b-u4ymyyt3jq] {
        padding: 4rem 1.25rem;
    }

    .home-steps-heading[b-u4ymyyt3jq] {
        margin-bottom: 2.5rem;
    }

    .home-steps-eyebrow[b-u4ymyyt3jq] {
        font-size: 0.72rem;
        letter-spacing: 0.11em;
    }

    .home-steps-title[b-u4ymyyt3jq] {
        font-size: 2rem;
        line-height: 1.2;
    }

    .home-steps-lead[b-u4ymyyt3jq] {
        font-size: 1rem;
        line-height: 1.65;
    }

    .home-steps-grid[b-u4ymyyt3jq] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .home-step-card[b-u4ymyyt3jq] {
        padding: 1.75rem;
        border-radius: 15px;
    }

    .home-step-number[b-u4ymyyt3jq] {
        width: 54px;
        height: 54px;
        margin-bottom: 1.5rem;
        font-size: 1.2rem;
        border-radius: 13px;
    }

    .home-step-title[b-u4ymyyt3jq] {
        font-size: 1.25rem;
    }

    .home-step-description[b-u4ymyyt3jq] {
        font-size: 0.98rem;
        line-height: 1.7;
    }

    .home-steps-bottom[b-u4ymyyt3jq] {
        margin-top: 2.75rem;
    }

    .home-steps-bottom-text[b-u4ymyyt3jq] {
        font-size: 1rem;
    }

    .home-steps-link[b-u4ymyyt3jq] {
        width: 100%;
        max-width: 360px;
    }
}

/* =========================================================
   Kleine Smartphones
   ========================================================= */

@media (max-width: 380px) {

    .home-steps-inner[b-u4ymyyt3jq] {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .home-steps-title[b-u4ymyyt3jq] {
        font-size: 1.8rem;
    }
}

/* =========================================================
   Reduzierte Animationen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .home-step-card[b-u4ymyyt3jq],
    .home-steps-link[b-u4ymyyt3jq] {
        transition: none;
    }

        .home-step-card:hover[b-u4ymyyt3jq] {
            transform: none;
        }
}
/* /Components/Pages/Public/Preise.razor.rz.scp.css */

/* =========================================================
   CleanDation – Preisseite
   ========================================================= */

.pricing-page[b-pecdxettmt] {
    --price-navy: #111827;
    --price-light: #F7F9FC;
    --price-blue: #0050E8;
    --price-blue-hover: #003FC0;
    --price-accent: #80C7FF;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    overflow-x: clip;
    background: var(--price-light);
}

    .pricing-page[b-pecdxettmt],
    .pricing-page *[b-pecdxettmt] {
        box-sizing: border-box;
    }

/* Container */

.price-container[b-pecdxettmt] {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 2.5rem;
}

/* =========================================================
   Hero
   ========================================================= */

.price-hero[b-pecdxettmt] {
    position: relative;
    overflow: hidden;
    padding: 6rem 0 6.5rem;
    color: #FFFFFF;
    background: var(--price-navy);
}

    .price-hero[b-pecdxettmt]::before {
        content: "";
        position: absolute;
        top: -250px;
        right: -170px;
        width: 700px;
        height: 700px;
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient( circle, rgba(0, 80, 232, 0.20), transparent 70% );
    }

.price-hero-content[b-pecdxettmt] {
    position: relative;
    z-index: 1;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

.price-eyebrow[b-pecdxettmt] {
    display: block;
    margin-bottom: 1.25rem;
    color: var(--price-accent);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.5;
}

.price-hero h1[b-pecdxettmt] {
    margin: 0 0 1.75rem;
    color: #FFFFFF;
    font-size: clamp(2.4rem, 4vw, 4rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

    .price-hero h1 span[b-pecdxettmt] {
        display: block;
        color: var(--price-accent);
    }

.price-hero-content > p[b-pecdxettmt] {
    max-width: 700px;
    margin: 0 auto 1.5rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.2rem;
    line-height: 1.75;
}

.price-hero-content > .price-hero-note[b-pecdxettmt] {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.92rem;
}

/* =========================================================
   Tarifbereich
   ========================================================= */

.price-plans[b-pecdxettmt] {
    padding: 6rem 0;
    background: var(--price-light);
}

.price-section-heading[b-pecdxettmt] {
    max-width: 820px;
    margin: 0 auto 3.5rem;
    text-align: center;
}

.price-section-eyebrow[b-pecdxettmt] {
    display: block;
    margin-bottom: 1rem;
    color: var(--price-blue);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.5;
}

.price-section-heading h2[b-pecdxettmt] {
    margin: 0 0 1.5rem;
    color: var(--price-navy);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.price-section-heading p[b-pecdxettmt] {
    max-width: 680px;
    margin: 0 auto;
    color: #52617A;
    font-size: 1.1rem;
    line-height: 1.8;
}

/* =========================================================
   Preiskarten
   ========================================================= */

.price-grid[b-pecdxettmt] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.price-card[b-pecdxettmt] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 2rem;
    background: #FFFFFF;
    border: 1px solid #E4EAF2;
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(17, 24, 39, 0.04);
}

.price-card-featured[b-pecdxettmt] {
    border: 2px solid var(--price-blue);
    box-shadow: 0 14px 36px rgba(0, 80, 232, 0.12);
}

.price-recommended[b-pecdxettmt] {
    position: absolute;
    top: -17px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.45rem 1rem;
    color: #FFFFFF;
    background: var(--price-blue);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.price-card-heading[b-pecdxettmt] {
    min-height: 140px;
}

    .price-card-heading h3[b-pecdxettmt] {
        margin: 0 0 0.75rem;
        color: var(--price-navy);
        font-size: 1.6rem;
        font-weight: 800;
    }

    .price-card-heading p[b-pecdxettmt] {
        margin: 0;
        color: #52617A;
        font-size: 0.98rem;
        line-height: 1.7;
    }

.price-amount-wrapper[b-pecdxettmt] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 1.5rem 0 0.4rem;
}

.price-amount[b-pecdxettmt] {
    color: var(--price-navy);
    font-size: clamp(2.2rem, 3vw, 2.9rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.price-period[b-pecdxettmt] {
    color: #64748B;
    font-size: 0.95rem;
}

.price-status[b-pecdxettmt] {
    margin: 0 0 1.5rem;
    color: #64748B;
    font-size: 0.84rem;
}

.price-card-divider[b-pecdxettmt] {
    height: 1px;
    margin-bottom: 1.5rem;
    background: #E5EAF1;
}

.price-includes[b-pecdxettmt] {
    margin: 0 0 1.2rem;
    color: var(--price-navy);
    font-size: 0.95rem;
    font-weight: 750;
}

.price-feature-list[b-pecdxettmt] {
    display: grid;
    gap: 1rem;
    margin: 0 0 2.5rem;
    padding: 0;
    list-style: none;
}

    .price-feature-list li[b-pecdxettmt] {
        position: relative;
        padding-left: 1.7rem;
        color: #475569;
        font-size: 0.98rem;
        line-height: 1.65;
    }

        .price-feature-list li[b-pecdxettmt]::before {
            content: "✓";
            position: absolute;
            top: 0;
            left: 0;
            color: var(--price-blue);
            font-weight: 900;
        }

/* Kartenbuttons */

.price-card-button[b-pecdxettmt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 52px;
    margin-top: auto;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    font-size: 0.98rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.price-card-button-outline[b-pecdxettmt] {
    color: var(--price-blue);
    background: #FFFFFF;
    border: 1px solid var(--price-blue);
}

    .price-card-button-outline:hover[b-pecdxettmt] {
        color: #FFFFFF;
        background: var(--price-blue);
    }

.price-card-button-primary[b-pecdxettmt] {
    color: #FFFFFF;
    background: var(--price-blue);
    border: 1px solid var(--price-blue);
}

    .price-card-button-primary:hover[b-pecdxettmt] {
        color: #FFFFFF;
        background: var(--price-blue-hover);
        border-color: var(--price-blue-hover);
    }

.price-disclaimer[b-pecdxettmt] {
    max-width: 980px;
    margin: 2.5rem auto 0;
    color: #64748B;
    font-size: 0.92rem;
    line-height: 1.8;
    text-align: center;
}

/* =========================================================
   Tariforientierung
   ========================================================= */

.price-guidance[b-pecdxettmt] {
    padding: 6rem 0;
    color: #FFFFFF;
    background: var(--price-navy);
}

.price-guidance-layout[b-pecdxettmt] {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 4rem;
}

.price-guidance-text h2[b-pecdxettmt] {
    margin: 0 0 1.5rem;
    color: #FFFFFF;
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 800;
    line-height: 1.2;
}

.price-guidance-text p[b-pecdxettmt] {
    margin: 0 0 1.2rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.05rem;
    line-height: 1.8;
}

    .price-guidance-text p:last-child[b-pecdxettmt] {
        margin-bottom: 0;
    }

.price-guidance-box[b-pecdxettmt] {
    padding: 2.5rem;
    background: #1D293D;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
}

.price-guidance-box-icon[b-pecdxettmt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 1.5rem;
    color: #FFFFFF;
    background: var(--price-blue);
    border-radius: 14px;
    font-size: 1.5rem;
    font-weight: 800;
}

.price-guidance-box h3[b-pecdxettmt] {
    margin: 0 0 1rem;
    color: #FFFFFF;
    font-size: 1.35rem;
    font-weight: 800;
}

.price-guidance-box p[b-pecdxettmt] {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1rem;
    line-height: 1.8;
}

/* =========================================================
   Abschlussbereich
   ========================================================= */

.price-final-cta[b-pecdxettmt] {
    padding: 6rem 0;
    background: var(--price-light);
}

.price-final-content[b-pecdxettmt] {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

    .price-final-content h2[b-pecdxettmt] {
        margin: 0 0 1.5rem;
        color: var(--price-navy);
        font-size: clamp(2.1rem, 3.5vw, 3.3rem);
        font-weight: 800;
        line-height: 1.2;
    }

    .price-final-content > p:not(.price-final-note)[b-pecdxettmt] {
        max-width: 660px;
        margin: 0 auto 2rem;
        color: #52617A;
        font-size: 1.12rem;
        line-height: 1.8;
    }

.price-final-actions[b-pecdxettmt] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.price-button-primary[b-pecdxettmt],
.price-button-secondary[b-pecdxettmt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 54px;
    padding: 0.9rem 1.6rem;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.price-button-primary[b-pecdxettmt] {
    color: #FFFFFF;
    background: var(--price-blue);
    border: 1px solid var(--price-blue);
}

    .price-button-primary:hover[b-pecdxettmt] {
        color: #FFFFFF;
        background: var(--price-blue-hover);
        border-color: var(--price-blue-hover);
    }

.price-button-secondary[b-pecdxettmt] {
    color: var(--price-navy);
    background: transparent;
    border: 1px solid #CAD4E1;
}

    .price-button-secondary:hover[b-pecdxettmt] {
        color: var(--price-blue);
        background: #FFFFFF;
        border-color: var(--price-blue);
    }

.price-final-note[b-pecdxettmt] {
    margin: 0;
    color: #64748B;
    font-size: 0.93rem;
    line-height: 1.6;
}

/* =========================================================
   Footer
   ========================================================= */

.price-footer[b-pecdxettmt] {
    padding: 2.5rem 0;
    color: #FFFFFF;
    background: var(--price-navy);
}

.price-footer-inner[b-pecdxettmt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.price-footer-brand[b-pecdxettmt] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.price-footer-logo[b-pecdxettmt] {
    display: block;
    width: auto;
    max-width: 190px;
    height: 32px;
    object-fit: contain;
}

.price-footer-brand > span[b-pecdxettmt] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.92rem;
}

.price-footer-links[b-pecdxettmt] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.3rem;
}

    .price-footer-links a[b-pecdxettmt] {
        color: rgba(255, 255, 255, 0.82);
        font-size: 0.92rem;
        text-decoration: none;
    }

        .price-footer-links a:hover[b-pecdxettmt] {
            color: var(--price-accent);
        }

        .price-card-button:focus-visible[b-pecdxettmt],
        .price-button-primary:focus-visible[b-pecdxettmt],
        .price-button-secondary:focus-visible[b-pecdxettmt],
        .price-footer-links a:focus-visible[b-pecdxettmt] {
            outline: 3px solid var(--price-accent);
            outline-offset: 3px;
        }

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {
    .price-grid[b-pecdxettmt] {
        gap: 1rem;
    }

    .price-card[b-pecdxettmt] {
        padding: 1.6rem;
    }

    .price-guidance-layout[b-pecdxettmt] {
        gap: 2.5rem;
    }
}

@media (max-width: 991.98px) {
    .price-container[b-pecdxettmt] {
        padding: 0 2rem;
    }

    .price-hero[b-pecdxettmt],
    .price-plans[b-pecdxettmt],
    .price-guidance[b-pecdxettmt],
    .price-final-cta[b-pecdxettmt] {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }

    .price-grid[b-pecdxettmt] {
        grid-template-columns: 1fr;
        max-width: 620px;
        gap: 2rem;
        margin: 0 auto;
    }

    .price-card[b-pecdxettmt] {
        padding: 2rem;
    }

    .price-card-heading[b-pecdxettmt] {
        min-height: auto;
    }

    .price-guidance-layout[b-pecdxettmt] {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {
    .price-container[b-pecdxettmt] {
        padding: 0 1.25rem;
    }

    .price-hero[b-pecdxettmt] {
        padding-top: 3.5rem;
        padding-bottom: 4rem;
    }

        .price-hero h1[b-pecdxettmt] {
            font-size: 2.1rem;
        }

    .price-hero-content > p[b-pecdxettmt] {
        font-size: 1rem;
    }

    .price-plans[b-pecdxettmt],
    .price-guidance[b-pecdxettmt],
    .price-final-cta[b-pecdxettmt] {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .price-section-heading[b-pecdxettmt] {
        margin-bottom: 3rem;
    }

        .price-section-heading h2[b-pecdxettmt] {
            font-size: 2rem;
        }

        .price-section-heading p[b-pecdxettmt] {
            font-size: 1rem;
        }

    .price-card[b-pecdxettmt] {
        padding: 1.6rem;
    }

    .price-grid[b-pecdxettmt] {
        gap: 2rem;
    }

    .price-amount[b-pecdxettmt] {
        font-size: 2.5rem;
    }

    .price-guidance-box[b-pecdxettmt] {
        padding: 1.75rem;
    }

    .price-final-content h2[b-pecdxettmt] {
        font-size: 2.05rem;
    }

    .price-final-content > p:not(.price-final-note)[b-pecdxettmt] {
        font-size: 1rem;
    }

    .price-final-actions[b-pecdxettmt] {
        flex-direction: column;
        align-items: stretch;
    }

    .price-button-primary[b-pecdxettmt],
    .price-button-secondary[b-pecdxettmt] {
        width: 100%;
    }

    .price-footer-inner[b-pecdxettmt] {
        flex-direction: column;
        align-items: flex-start;
    }

    .price-footer-brand[b-pecdxettmt] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .price-footer-links[b-pecdxettmt] {
        gap: 1rem 1.3rem;
    }
}

@media (max-width: 380px) {
    .price-container[b-pecdxettmt] {
        padding: 0 1rem;
    }

    .price-hero h1[b-pecdxettmt] {
        font-size: 1.9rem;
    }
}

/* =========================================================
   Reduzierte Animationen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .price-card-button[b-pecdxettmt],
    .price-button-primary[b-pecdxettmt],
    .price-button-secondary[b-pecdxettmt] {
        transition: none;
    }
}
/* /Components/Pages/Public/PublicFooter.razor.rz.scp.css */

/* =========================================================
   CleanDation – Public Footer
   ========================================================= */

.cp-public-footer[b-gj00a9jt2r] {
    --footer-navy: #111827;
    --footer-blue: #0050E8;
    --footer-accent: #80C7FF;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #FFFFFF;
    background-color: var(--footer-navy);
}

    .cp-public-footer[b-gj00a9jt2r],
    .cp-public-footer *[b-gj00a9jt2r] {
        box-sizing: border-box;
    }

/* =========================================================
   Container
   ========================================================= */

.cp-public-footer-container[b-gj00a9jt2r] {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 2.5rem;
}

/* =========================================================
   Oberer Footer
   ========================================================= */

.cp-public-footer-top[b-gj00a9jt2r] {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
    gap: 4.5rem;
    align-items: start;
    padding: 4.5rem 0 4rem;
}

/* =========================================================
   Markenbereich
   ========================================================= */

.cp-public-footer-brand[b-gj00a9jt2r] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.cp-public-footer-logo-link[b-gj00a9jt2r] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1.5rem;
    text-decoration: none;
}

.cp-public-footer-logo[b-gj00a9jt2r] {
    display: block;
    width: auto;
    max-width: 230px;
    height: 42px;
    object-fit: contain;
}

.cp-public-footer-description[b-gj00a9jt2r] {
    max-width: 360px;
    margin: 0 0 1.2rem;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.98rem;
    font-weight: 400;
    line-height: 1.8;
}

.cp-public-footer-claim[b-gj00a9jt2r] {
    margin: 0;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* =========================================================
   Navigation
   ========================================================= */

.cp-public-footer-navigation[b-gj00a9jt2r] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
}

.cp-public-footer-heading[b-gj00a9jt2r] {
    margin: 0 0 0.65rem;
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.5;
}

.cp-public-footer-navigation a[b-gj00a9jt2r] {
    display: inline-block;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.6;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

    .cp-public-footer-navigation a:hover[b-gj00a9jt2r] {
        color: #FFFFFF;
        transform: translateX(3px);
    }

/* =========================================================
   Unterer Footer
   ========================================================= */

.cp-public-footer-bottom[b-gj00a9jt2r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.75rem 0 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
}

/* Copyright */

.cp-public-footer-copyright[b-gj00a9jt2r] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.85rem;
    line-height: 1.6;
}

.cp-public-footer-copyright-divider[b-gj00a9jt2r] {
    color: rgba(255, 255, 255, 0.3);
}

/* Rechtliche Links */

.cp-public-footer-legal[b-gj00a9jt2r] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.75rem;
}

    .cp-public-footer-legal a[b-gj00a9jt2r] {
        color: rgba(255, 255, 255, 0.68);
        font-size: 0.87rem;
        line-height: 1.6;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .cp-public-footer-legal a:hover[b-gj00a9jt2r] {
            color: #FFFFFF;
        }

/* =========================================================
   Tastaturbedienung
   ========================================================= */

.cp-public-footer a:focus-visible[b-gj00a9jt2r] {
    outline: 3px solid var(--footer-accent);
    outline-offset: 5px;
    border-radius: 3px;
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 991.98px) {

    .cp-public-footer-container[b-gj00a9jt2r] {
        padding: 0 2rem;
    }

    .cp-public-footer-top[b-gj00a9jt2r] {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        gap: 3rem;
        padding: 3.5rem 0;
    }

    .cp-public-footer-brand[b-gj00a9jt2r] {
        grid-column: 1 / -1;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .cp-public-footer-container[b-gj00a9jt2r] {
        padding: 0 1.25rem;
    }

    .cp-public-footer-top[b-gj00a9jt2r] {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 3rem 0;
    }

    .cp-public-footer-brand[b-gj00a9jt2r] {
        grid-column: auto;
    }

    .cp-public-footer-logo[b-gj00a9jt2r] {
        max-width: 200px;
        height: 36px;
    }

    .cp-public-footer-description[b-gj00a9jt2r] {
        max-width: 100%;
        font-size: 0.95rem;
        line-height: 1.75;
    }

    .cp-public-footer-heading[b-gj00a9jt2r] {
        margin-bottom: 0.35rem;
    }

    .cp-public-footer-navigation[b-gj00a9jt2r] {
        gap: 0.85rem;
    }

        .cp-public-footer-navigation a[b-gj00a9jt2r] {
            min-height: 28px;
            font-size: 0.95rem;
        }

    .cp-public-footer-bottom[b-gj00a9jt2r] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.5rem 0 2rem;
    }

    .cp-public-footer-legal[b-gj00a9jt2r] {
        gap: 1.5rem;
    }
}

/* =========================================================
   Kleine Smartphones
   ========================================================= */

@media (max-width: 380px) {

    .cp-public-footer-container[b-gj00a9jt2r] {
        padding: 0 1rem;
    }

    .cp-public-footer-copyright[b-gj00a9jt2r] {
        gap: 0.4rem;
        font-size: 0.8rem;
    }

    .cp-public-footer-legal[b-gj00a9jt2r] {
        gap: 1.1rem;
    }
}

/* =========================================================
   Reduzierte Animationen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .cp-public-footer-navigation a[b-gj00a9jt2r],
    .cp-public-footer-legal a[b-gj00a9jt2r] {
        transition: none;
    }

        .cp-public-footer-navigation a:hover[b-gj00a9jt2r] {
            transform: none;
        }
}
/* /Components/Pages/Public/SoFunktionierts.razor.rz.scp.css */

/* =========================================================
   CleanDation – So funktioniert's
   ========================================================= */

.how-page[b-mij5v3j1c3] {
    --how-navy: #111827;
    --how-light: #F7F9FC;
    --how-blue: #0050E8;
    --how-blue-hover: #003FC0;
    --how-accent: #80C7FF;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    overflow-x: clip;
    background-color: var(--how-light);
}

    .how-page[b-mij5v3j1c3],
    .how-page *[b-mij5v3j1c3] {
        box-sizing: border-box;
    }

/* =========================================================
   Container
   ========================================================= */

.how-container[b-mij5v3j1c3] {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding-right: 2.5rem;
    padding-left: 2.5rem;
}

/* =========================================================
   Hero
   ========================================================= */

.how-hero[b-mij5v3j1c3] {
    position: relative;
    overflow: hidden;
    padding: 6rem 0 6.5rem;
    color: #FFFFFF;
    background-color: var(--how-navy);
}

    .how-hero[b-mij5v3j1c3]::before {
        content: "";
        position: absolute;
        top: -220px;
        right: -180px;
        width: 700px;
        height: 700px;
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient( circle, rgba(0, 80, 232, 0.22) 0%, rgba(0, 80, 232, 0.06) 40%, transparent 70% );
    }

.how-hero-content[b-mij5v3j1c3] {
    position: relative;
    z-index: 1;
    max-width: 960px;
}

.how-eyebrow[b-mij5v3j1c3] {
    display: block;
    margin-bottom: 1.3rem;
    color: var(--how-accent);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.15em;
}

.how-hero-title[b-mij5v3j1c3] {
    margin: 0 0 1.8rem;
    color: #FFFFFF;
    font-size: clamp(2.5rem, 4.3vw, 4.3rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.035em;
}

    .how-hero-title span[b-mij5v3j1c3] {
        color: var(--how-accent);
    }

.how-hero-description[b-mij5v3j1c3] {
    max-width: 760px;
    margin: 0 0 2.3rem;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.25rem;
    line-height: 1.75;
}

/* =========================================================
   Buttons
   ========================================================= */

.how-hero-actions[b-mij5v3j1c3],
.how-final-actions[b-mij5v3j1c3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.how-button-primary[b-mij5v3j1c3],
.how-button-outline[b-mij5v3j1c3],
.how-button-secondary[b-mij5v3j1c3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 54px;
    padding: 0.95rem 1.7rem;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.how-button-primary[b-mij5v3j1c3] {
    color: #FFFFFF;
    background: var(--how-blue);
    border: 1px solid var(--how-blue);
    box-shadow: 0 8px 25px rgba(0, 80, 232, 0.18);
}

    .how-button-primary:hover[b-mij5v3j1c3] {
        color: #FFFFFF;
        background: var(--how-blue-hover);
        border-color: var(--how-blue-hover);
        transform: translateY(-2px);
    }

.how-button-outline[b-mij5v3j1c3] {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.75);
}

    .how-button-outline:hover[b-mij5v3j1c3] {
        color: var(--how-navy);
        background: #FFFFFF;
        border-color: #FFFFFF;
        transform: translateY(-2px);
    }

.how-button-secondary[b-mij5v3j1c3] {
    color: var(--how-navy);
    background: transparent;
    border: 1px solid #CAD4E1;
}

    .how-button-secondary:hover[b-mij5v3j1c3] {
        color: var(--how-blue);
        background: #FFFFFF;
        border-color: var(--how-blue);
        transform: translateY(-2px);
    }

    .how-button-primary:focus-visible[b-mij5v3j1c3],
    .how-button-outline:focus-visible[b-mij5v3j1c3],
    .how-button-secondary:focus-visible[b-mij5v3j1c3] {
        outline: 3px solid var(--how-accent);
        outline-offset: 4px;
    }

/* =========================================================
   Ablauf – heller Bereich
   ========================================================= */

.how-process[b-mij5v3j1c3] {
    padding: 6rem 0;
    background-color: var(--how-light);
}

.how-section-heading[b-mij5v3j1c3] {
    max-width: 820px;
    margin: 0 auto 3.5rem;
    text-align: center;
}

.how-section-eyebrow[b-mij5v3j1c3] {
    display: block;
    margin-bottom: 1rem;
    color: var(--how-blue);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.14em;
}

.how-section-heading h2[b-mij5v3j1c3] {
    margin: 0 0 1.5rem;
    color: var(--how-navy);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.how-section-heading p[b-mij5v3j1c3] {
    max-width: 670px;
    margin: 0 auto;
    color: #52617A;
    font-size: 1.12rem;
    line-height: 1.8;
}

/* =========================================================
   Sechs Schritte
   ========================================================= */

.how-steps[b-mij5v3j1c3] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    max-width: 1050px;
    margin: 0 auto;
}

.how-step[b-mij5v3j1c3] {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 1.6rem;
    align-items: flex-start;
    padding: 2rem 2.2rem;
    background: #FFFFFF;
    border: 1px solid #E4EAF2;
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(17, 24, 39, 0.035);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .how-step:hover[b-mij5v3j1c3] {
        transform: translateY(-2px);
        border-color: rgba(0, 80, 232, 0.24);
        box-shadow: 0 14px 32px rgba(17, 24, 39, 0.07);
    }

.how-step-number[b-mij5v3j1c3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    color: #FFFFFF;
    background-color: var(--how-blue);
    border-radius: 15px;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
}

.how-step-content[b-mij5v3j1c3] {
    min-width: 0;
}

    .how-step-content h3[b-mij5v3j1c3] {
        margin: 0 0 0.75rem;
        color: var(--how-navy);
        font-size: 1.4rem;
        font-weight: 800;
        line-height: 1.35;
    }

    .how-step-content p[b-mij5v3j1c3] {
        max-width: 850px;
        margin: 0;
        color: #52617A;
        font-size: 1.05rem;
        line-height: 1.8;
    }

/* =========================================================
   Produktvorschau – dunkler Bereich
   ========================================================= */

.how-preview[b-mij5v3j1c3] {
    padding: 6rem 0;
    color: #FFFFFF;
    background-color: var(--how-navy);
}

.how-preview-layout[b-mij5v3j1c3] {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 4rem;
}

.how-preview-text[b-mij5v3j1c3] {
    min-width: 0;
}

    .how-preview-text h2[b-mij5v3j1c3] {
        margin: 0 0 1.75rem;
        color: #FFFFFF;
        font-size: clamp(2rem, 3vw, 3.1rem);
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -0.03em;
    }

        .how-preview-text h2 span[b-mij5v3j1c3] {
            display: block;
            color: var(--how-accent);
        }

    .how-preview-text p[b-mij5v3j1c3] {
        margin: 0 0 1.3rem;
        color: rgba(255, 255, 255, 0.82);
        font-size: 1.08rem;
        line-height: 1.85;
    }

        .how-preview-text p:last-child[b-mij5v3j1c3] {
            margin-bottom: 0;
        }

.how-preview-media[b-mij5v3j1c3] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.how-preview-image[b-mij5v3j1c3] {
    display: block;
    width: 100%;
    max-width: 720px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow( 0 22px 35px rgba(0, 0, 0, 0.18) );
}

/* =========================================================
   Finaler CTA
   ========================================================= */

.how-final-cta[b-mij5v3j1c3] {
    padding: 6rem 0;
    background-color: var(--how-light);
}

.how-final-content[b-mij5v3j1c3] {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

    .how-final-content h2[b-mij5v3j1c3] {
        margin: 0 0 1.5rem;
        color: var(--how-navy);
        font-size: clamp(2.1rem, 3.5vw, 3.3rem);
        font-weight: 800;
        line-height: 1.18;
        letter-spacing: -0.03em;
    }

    .how-final-content > p:not(.how-final-note)[b-mij5v3j1c3] {
        max-width: 660px;
        margin: 0 auto 2.25rem;
        color: #52617A;
        font-size: 1.13rem;
        line-height: 1.8;
    }

.how-final-actions[b-mij5v3j1c3] {
    justify-content: center;
    margin-bottom: 1.5rem;
}

.how-final-note[b-mij5v3j1c3] {
    margin: 0;
    color: #64748B;
    font-size: 0.93rem;
    line-height: 1.6;
}

/* =========================================================
   Footer
   ========================================================= */

.how-footer[b-mij5v3j1c3] {
    padding: 2.5rem 0;
    color: #FFFFFF;
    background: var(--how-navy);
}

.how-footer-inner[b-mij5v3j1c3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
}

.how-footer-brand[b-mij5v3j1c3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.how-footer-logo[b-mij5v3j1c3] {
    display: block;
    width: auto;
    max-width: 190px;
    height: 32px;
    object-fit: contain;
}

.how-footer-brand > span[b-mij5v3j1c3] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.92rem;
}

.how-footer-links[b-mij5v3j1c3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.3rem;
}

    .how-footer-links a[b-mij5v3j1c3] {
        color: rgba(255, 255, 255, 0.82);
        font-size: 0.92rem;
        font-weight: 500;
        text-decoration: none;
    }

        .how-footer-links a:hover[b-mij5v3j1c3] {
            color: var(--how-accent);
        }

        .how-footer-links a:focus-visible[b-mij5v3j1c3] {
            outline: 2px solid var(--how-accent);
            outline-offset: 4px;
        }

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 991.98px) {

    .how-container[b-mij5v3j1c3] {
        padding-right: 2rem;
        padding-left: 2rem;
    }

    .how-hero[b-mij5v3j1c3] {
        padding: 4.5rem 0 5rem;
    }

    .how-process[b-mij5v3j1c3],
    .how-preview[b-mij5v3j1c3],
    .how-final-cta[b-mij5v3j1c3] {
        padding: 4.5rem 0;
    }

    .how-preview-layout[b-mij5v3j1c3] {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .how-preview-image[b-mij5v3j1c3] {
        max-width: 620px;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {

    .how-container[b-mij5v3j1c3] {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .how-hero[b-mij5v3j1c3] {
        padding: 3.5rem 0 4rem;
    }

    .how-eyebrow[b-mij5v3j1c3],
    .how-section-eyebrow[b-mij5v3j1c3] {
        font-size: 0.72rem;
        letter-spacing: 0.11em;
    }

    .how-hero-title[b-mij5v3j1c3] {
        font-size: clamp(2rem, 7vw, 2.6rem);
        line-height: 1.16;
    }

    .how-hero-description[b-mij5v3j1c3] {
        font-size: 1rem;
        line-height: 1.7;
    }

    .how-hero-actions[b-mij5v3j1c3],
    .how-final-actions[b-mij5v3j1c3] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }

    .how-button-primary[b-mij5v3j1c3],
    .how-button-outline[b-mij5v3j1c3],
    .how-button-secondary[b-mij5v3j1c3] {
        width: 100%;
        min-height: 52px;
    }

    .how-process[b-mij5v3j1c3],
    .how-preview[b-mij5v3j1c3],
    .how-final-cta[b-mij5v3j1c3] {
        padding: 4rem 0;
    }

    .how-section-heading[b-mij5v3j1c3] {
        margin-bottom: 2.5rem;
    }

        .how-section-heading h2[b-mij5v3j1c3] {
            font-size: 2rem;
        }

        .how-section-heading p[b-mij5v3j1c3] {
            font-size: 1rem;
        }

    .how-steps[b-mij5v3j1c3] {
        gap: 1rem;
    }

    .how-step[b-mij5v3j1c3] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.75rem;
        border-radius: 15px;
    }

    .how-step-number[b-mij5v3j1c3] {
        width: 54px;
        height: 54px;
        font-size: 1.15rem;
        border-radius: 13px;
    }

    .how-step-content h3[b-mij5v3j1c3] {
        font-size: 1.22rem;
    }

    .how-step-content p[b-mij5v3j1c3] {
        font-size: 0.98rem;
        line-height: 1.7;
    }

    .how-preview-text h2[b-mij5v3j1c3] {
        font-size: 2rem;
    }

    .how-preview-text p[b-mij5v3j1c3] {
        font-size: 1rem;
        line-height: 1.75;
    }

    .how-preview-image[b-mij5v3j1c3] {
        max-width: 100%;
    }

    .how-final-content h2[b-mij5v3j1c3] {
        font-size: 2.05rem;
    }

    .how-final-content > p:not(.how-final-note)[b-mij5v3j1c3] {
        font-size: 1rem;
    }

    .how-footer-inner[b-mij5v3j1c3] {
        flex-direction: column;
        align-items: flex-start;
    }

    .how-footer-brand[b-mij5v3j1c3] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .how-footer-links[b-mij5v3j1c3] {
        gap: 1rem 1.3rem;
    }
}

/* =========================================================
   Sehr kleine Smartphones
   ========================================================= */

@media (max-width: 380px) {

    .how-container[b-mij5v3j1c3] {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .how-hero-title[b-mij5v3j1c3] {
        font-size: 1.9rem;
    }

    .how-section-heading h2[b-mij5v3j1c3],
    .how-preview-text h2[b-mij5v3j1c3] {
        font-size: 1.85rem;
    }
}

/* =========================================================
   Reduzierte Animationen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .how-step[b-mij5v3j1c3],
    .how-button-primary[b-mij5v3j1c3],
    .how-button-outline[b-mij5v3j1c3],
    .how-button-secondary[b-mij5v3j1c3] {
        transition: none;
    }

        .how-step:hover[b-mij5v3j1c3],
        .how-button-primary:hover[b-mij5v3j1c3],
        .how-button-outline:hover[b-mij5v3j1c3],
        .how-button-secondary:hover[b-mij5v3j1c3] {
            transform: none;
        }
}