*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial,Helvetica,sans-serif;
    background:#f1f5f9;
}

.layout{
    display:flex;
    min-height:100vh;
}

.sidebar{
    width:280px;
    background:#004b8f;
    color:white;
    overflow-y:auto;
}

.logo{
    padding:25px;
    border-bottom:1px solid rgba(255,255,255,.1);
}

.logo h2{
    margin-bottom:5px;
}

.nav-section{
    padding:15px;
}

.nav-title{
    font-size:11px;
    opacity:.7;
    margin-bottom:10px;
    text-transform:uppercase;
}

.nav-section a{
    display:flex;
    align-items:center;
    gap:10px;
    color:white;
    text-decoration:none;
    padding:5px;
    border-radius:6px;
    margin-bottom:3px;
}

.nav-section a:hover{
    background:rgba(255,255,255,.15);
}

.main{
    flex:1;
}


.content{
    padding:25px;
}

.card{
    background:white;
    border-radius:12px;
    padding:20px;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}


.user-box{
    background:#f1f5f9;
    padding:10px 15px;
    border-radius:8px;
}

.dark{
    background:#0f172a;
    color:white;
}


.dark .card{
    background:#1e293b;
}

/* Mobile Optimierung */

.mobile-menu-btn{
    display:none;
    background:#004b8f;
    color:white;
    border:none;
    padding:10px 15px;
    border-radius:8px;
    cursor:pointer;
}

@media (max-width: 992px){

    .sidebar{
        position:fixed;
        left:-280px;
        top:0;
        height:100vh;
        width:280px;
        z-index:9999;
        transition:.3s;
        box-shadow:0 0 20px rgba(0,0,0,.3);
    }

    .sidebar.show{
        left:0;
    }

    .main{
        width:100%;
    }

    .content{
        padding:15px;
    }

    .mobile-menu-btn{
        display:block;
    }


    .user-box{
        padding:8px 10px;
        font-size:14px;
    }
}

@media (max-width: 768px){


    .content{
        padding:10px;
    }

    .card{
        padding:15px;
        border-radius:10px;
    }

    .logo{
        padding:20px;
    }

    .logo h2{
        font-size:20px;
    }
}

@media (max-width: 480px){

    .sidebar{
        width:260px;
    }

    .logo h2{
        font-size:18px;
    }

    .nav-section a{
        padding:10px;
        font-size:14px;
    }

    .card{
        padding:12px;
    }

    .content{
        padding:8px;
    }

    .user-box{
        font-size:13px;
    }
}


/* Benutzerverwaltung */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:22px}.page-header h1{font-size:28px;color:#172033;margin:3px 0 6px}.page-eyebrow{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#2871b5}.page-description{color:#64748b;line-height:1.5}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:9px;padding:11px 16px;font-weight:700;font-size:14px;cursor:pointer;transition:.2s}.button-primary{background:#07599f;color:#fff;box-shadow:0 4px 12px rgba(7,89,159,.2)}.button-primary:hover{background:#004b8f;transform:translateY(-1px)}.button-secondary{background:#eef2f6;color:#334155}.button-secondary:hover{background:#e2e8f0}
.user-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:18px}.stat-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #e6ebf1;border-radius:12px;padding:18px;box-shadow:0 2px 8px rgba(15,23,42,.04)}.stat-card div{display:flex;flex-direction:column;gap:2px}.stat-card strong{font-size:24px;color:#172033}.stat-card div span{font-size:13px;color:#64748b}.stat-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;font-size:17px}.stat-icon-blue{color:#07599f;background:#e8f2fb}.stat-icon-green{color:#087e55;background:#e5f7ef}.stat-icon-violet{color:#114194;background:#e8eef8}
.user-card{padding:0;overflow:hidden}.user-toolbar{display:flex;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid #e7ebf0}.user-search{position:relative;display:block;flex:1;max-width:520px}.user-search i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#94a3b8}.user-search input,.user-filters select,.user-form input,.user-form select{width:100%;border:1px solid #d9e0e7;border-radius:8px;background:#fff;color:#243044;font:inherit;outline:none;transition:.2s}.user-search input{height:40px;padding:0 13px 0 39px}.user-search input:focus,.user-filters select:focus,.user-form input:focus,.user-form select:focus{border-color:#2871b5;box-shadow:0 0 0 3px rgba(40,113,181,.12)}.user-filters{display:flex;gap:10px}.user-filters select{height:40px;padding:0 34px 0 12px;min-width:140px}
.table-responsive{overflow-x:auto}.user-table{width:100%;border-collapse:collapse;white-space:nowrap}.user-table th{text-align:left;padding:12px 16px;background:#f8fafc;color:#64748b;font-size:11px;letter-spacing:.045em;text-transform:uppercase;border-bottom:1px solid #e5eaf0}.user-table td{padding:14px 16px;border-bottom:1px solid #edf0f3;color:#425066;font-size:13px;vertical-align:middle}.user-table tbody tr{transition:.15s}.user-table tbody tr:hover{background:#fafcff}.user-identity{display:flex;align-items:center;gap:11px}.user-avatar{display:grid;place-items:center;width:37px;height:37px;border-radius:50%;background:#e8f2fb;color:#07599f;font-size:12px;font-weight:800}.user-identity div{display:flex;flex-direction:column;gap:3px}.user-identity strong{color:#1e293b;font-size:13px}.user-identity div span{color:#768397;font-size:12px}.username{font-family:Consolas,monospace;color:#475569}.role-badge{display:inline-flex;padding:4px 9px;border-radius:20px;font-size:11px;font-weight:700}.role-admin{color:#713b13;background:#fff1d8}.role-mitarbeiter{color:#07599f;background:#e8f2fb}.role-kunde{color:#087e55;background:#e5f7ef}.role-besucher{color:#5f6b7a;background:#edf0f3}.two-factor{display:inline-flex;align-items:center;gap:5px;color:#94a3b8;font-size:12px}.two-factor.is-enabled{color:#114194}.status-toggle{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;font-weight:700;font-size:12px;cursor:pointer}.status-toggle span{width:7px;height:7px;border-radius:50%}.status-toggle.is-active{color:#087e55}.status-toggle.is-active span{background:#12a36e;box-shadow:0 0 0 3px #d9f5e9}.status-toggle.is-inactive{color:#7b8797}.status-toggle.is-inactive span{background:#94a3b8;box-shadow:0 0 0 3px #edf0f3}.row-actions{display:flex;justify-content:flex-end;gap:5px}.row-actions button,.modal-close,.password-field button{display:grid;place-items:center;border:0;background:transparent;color:#64748b;cursor:pointer}.row-actions button{width:30px;height:30px;border-radius:7px}.row-actions button:hover{background:#e8f2fb;color:#07599f}.row-actions .danger-action:hover{background:#feecec;color:#c83232}.muted{color:#a3adba}.table-footer{display:flex;justify-content:space-between;padding:13px 20px;color:#7b8797;font-size:12px;background:#fafbfc}.user-empty{padding:52px 20px;text-align:center;color:#8491a3}.user-empty i{display:block;font-size:28px;margin-bottom:10px}.user-empty strong,.user-empty span{display:block}.user-empty strong{color:#415066;margin-bottom:5px}
.user-modal[hidden]{display:none}.user-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px}.user-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.58);backdrop-filter:blur(2px)}.user-modal-dialog{position:relative;width:min(620px,100%);max-height:calc(100vh - 40px);overflow-y:auto;background:#fff;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.28)}.user-modal-dialog>header{display:flex;justify-content:space-between;align-items:flex-start;padding:21px 23px;border-bottom:1px solid #e7ebf0}.user-modal-dialog h2{font-size:20px;color:#172033;margin-top:3px}.modal-close{width:34px;height:34px;border-radius:8px;font-size:17px}.modal-close:hover{background:#eef2f6;color:#172033}.user-form{padding:22px 23px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.user-form label>span{display:block;margin-bottom:7px;color:#3d4a5d;font-size:13px;font-weight:700}.user-form input,.user-form select{height:42px;padding:0 12px;font-size:14px}.form-span-2{grid-column:span 2}.optional-text{display:inline!important;color:#94a3b8!important;font-weight:400!important}.password-field{display:flex;position:relative}.password-field input{padding-right:43px}.password-field button{position:absolute;right:1px;top:1px;width:40px;height:40px}.user-form small{display:block;color:#8b97a7;font-size:11px;margin-top:5px}.form-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:19px}.check-option{display:flex;gap:10px;padding:13px;border:1px solid #e0e5eb;border-radius:9px;cursor:pointer}.check-option input{width:17px;height:17px;margin-top:1px;accent-color:#07599f}.check-option span{margin:0!important}.check-option strong{display:block;font-size:12px;color:#334155}.check-option small{line-height:1.4}.user-form footer{display:flex;justify-content:flex-end;gap:10px;margin:22px -23px -22px;padding:16px 23px;background:#f8fafc;border-top:1px solid #e7ebf0}.form-message{min-height:18px;margin-top:12px;color:#087e55;font-size:12px;font-weight:700}.body-modal-open{overflow:hidden}
.dark .page-header h1,.dark .stat-card strong,.dark .user-identity strong,.dark .user-modal-dialog h2{color:#f1f5f9}.dark .page-description,.dark .stat-card div span{color:#a8b4c4}.dark .stat-card,.dark .user-modal-dialog{background:#1e293b;border-color:#334155}.dark .user-toolbar,.dark .user-table td,.dark .user-modal-dialog>header{border-color:#334155}.dark .user-search input,.dark .user-filters select,.dark .user-form input,.dark .user-form select{background:#162033;border-color:#405066;color:#eef2f7}.dark .user-table th,.dark .table-footer,.dark .user-form footer{background:#162033}.dark .user-table td{color:#c0cad7}.dark .user-table tbody tr:hover{background:#233149}.dark .check-option{border-color:#405066}.dark .check-option strong,.dark .user-form label>span{color:#dce4ee}
@media (max-width:900px){.user-stats{grid-template-columns:1fr}.user-toolbar{align-items:stretch;flex-direction:column}.user-search{max-width:none}.user-filters label{flex:1}.user-filters select{min-width:0}}
@media (max-width:600px){.page-header{flex-direction:column}.page-header .button{width:100%}.page-header h1{font-size:24px}.user-filters{flex-direction:column}.form-grid,.form-options{grid-template-columns:1fr}.form-span-2{grid-column:span 1}.user-modal{padding:8px}.user-modal-dialog{max-height:calc(100vh - 16px)}.user-form footer{flex-direction:column-reverse}.user-form footer .button{width:100%}.table-footer{gap:10px;flex-direction:column}}

/* Kundenverwaltung */
.notice{display:flex;align-items:flex-start;gap:9px;margin-bottom:16px;padding:12px 14px;border:1px solid;border-radius:9px;font-size:13px}.notice-success{border-color:#a9dfc8;background:#eaf8f2;color:#087e55}.notice-error{border-color:#f2b8b8;background:#fff0f0;color:#a52626}.notice ul{padding-left:18px}.customer-card{padding:0;overflow:hidden}.customer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;border-bottom:1px solid #e7ebf0;color:#7b8797;font-size:12px}.customer-contact{display:flex;flex-direction:column;gap:3px}.customer-contact small{color:#8b97a7}.customer-status{display:inline-flex;padding:4px 9px;border-radius:20px;font-size:11px;font-weight:700}.customer-status.is-active{background:#e5f7ef;color:#087e55}.customer-status.is-inactive{background:#edf0f3;color:#687486}.customer-active{margin-top:18px}.dark .customer-toolbar{border-color:#334155}
@media (max-width:600px){.customer-toolbar{align-items:stretch;flex-direction:column}.customer-toolbar .user-search{width:100%}}

/* Kundenliste: ohne horizontales Scrollen, mit klaren Umbrüchen */
.customer-management .table-responsive {
    overflow-x: hidden;
}

.customer-management .user-table {
    width: 100%;
    table-layout: fixed;
    white-space: normal;
}

.customer-management .user-table th:nth-child(1) { width: 9%; }
.customer-management .user-table th:nth-child(2) { width: 14%; }
.customer-management .user-table th:nth-child(3) { width: 18%; }
.customer-management .user-table th:nth-child(4) { width: 10%; }
.customer-management .user-table th:nth-child(5) { width: 16%; }
.customer-management .user-table th:nth-child(6) { width: 8%; }
.customer-management .user-table th:nth-child(7) { width: 10%; }
.customer-management .user-table th:nth-child(8) { width: 15%; }

.customer-management .user-table th,
.customer-management .user-table td {
    overflow-wrap: anywhere;
}

.customer-management .row-actions {
    flex-wrap: wrap;
}

.customer-management .row-actions form {
    margin: 0;
}

@media (max-width: 1100px) {
    .customer-management .table-responsive {
        padding: 14px;
    }

    .customer-management .user-table,
    .customer-management .user-table tbody {
        display: block;
    }

    .customer-management .user-table thead {
        display: none;
    }

    .customer-management .user-table tbody {
        display: grid;
        gap: 12px;
    }

    .customer-management .user-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 7px;
        border: 1px solid #e1e6ec;
        border-radius: 12px;
        background: #fff;
    }

    .customer-management .user-table tbody td {
        display: block;
        min-width: 0;
        padding: 9px 10px;
        border: 0;
    }

    .customer-management .user-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: #7a8798;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .055em;
        text-transform: uppercase;
    }

    .customer-management .user-table tbody td[data-label="Aktionen"] {
        grid-column: 1 / -1;
        border-top: 1px solid #edf0f3;
    }

    .customer-management .row-actions {
        justify-content: flex-start;
    }

    .dark .customer-management .user-table tbody tr {
        border-color: #3e4651;
        background: #292c31;
    }

    .dark .customer-management .user-table tbody td[data-label="Aktionen"] {
        border-top-color: #3e4651;
    }
}

@media (max-width: 620px) {
    .customer-management .user-table tbody tr {
        grid-template-columns: 1fr;
    }

    .customer-management .user-table tbody td[data-label="Aktionen"] {
        grid-column: auto;
    }
}

/* Kompakte, schreibgeschützte Kundenansicht */
.customer-view-modal[hidden] {
    display: none;
}

.customer-view-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(1120px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border: 1px solid #dce3eb;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .32);
}

.customer-view-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 26px;
    border-bottom: 1px solid #e5eaf0;
    background: linear-gradient(135deg, #f8fbff 0%, #eef6fd 100%);
}

.customer-view-heading,
.customer-view-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.customer-view-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: #0967b2;
    color: #fff;
    font-size: 20px;
}

.customer-view-heading h2 {
    margin: 2px 0 3px;
    color: #172033;
    font-size: 22px;
}

.customer-view-heading > div > p:last-child {
    margin: 0;
    color: #68768a;
    font-size: 12px;
}

.customer-view-status {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.customer-view-status.is-active {
    color: #087e55;
    background: #dff6eb;
}

.customer-view-status.is-inactive {
    color: #687486;
    background: #e8edf2;
}

.customer-view-content {
    display: grid;
    min-height: 0;
    overflow-y: auto;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 20px 24px 24px;
}

.customer-detail-group {
    min-width: 0;
    padding: 17px 18px;
    border: 1px solid #e3e8ee;
    border-radius: 13px;
    background: #fbfcfe;
}

.customer-detail-system {
    grid-column: 1 / -1;
}

.customer-detail-group h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: #243247;
    font-size: 13px;
}

.customer-detail-group h3 i {
    color: #1480d0;
}

.customer-detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 22px;
    margin: 0;
}

.customer-detail-system .customer-detail-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.customer-detail-list > div {
    min-width: 0;
}

.customer-detail-list .detail-wide {
    grid-column: 1 / -1;
}

.customer-detail-list dt {
    margin-bottom: 3px;
    color: #7b8797;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.customer-detail-list dd {
    margin: 0;
    color: #263449;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.customer-session-logout {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e3e8ee;
}

.customer-session-logout .twofa-device-logout-all {
    min-height: 38px;
    max-width: 100%;
    padding: 0 13px;
    border: 1px solid #e7aab0;
    border-radius: 10px;
    color: #9d2d39;
    background: #fff3f4;
    white-space: normal;
    text-align: center;
}

.customer-session-logout .twofa-device-logout-all:hover,
.customer-session-logout .twofa-device-logout-all:focus-visible {
    color: #fff;
    background: #ad2f3d;
    border-color: #ad2f3d;
}

body.dark .customer-view-dialog {
    border-color: var(--app-border-strong);
    background: var(--app-surface);
}

body.dark .customer-view-header {
    border-color: var(--app-border);
    background: linear-gradient(135deg, var(--app-surface-muted), var(--app-surface));
}

body.dark .customer-view-heading h2,
body.dark .customer-detail-group h3,
body.dark .customer-detail-list dd {
    color: var(--app-text);
}

body.dark .customer-view-heading > div > p:last-child,
body.dark .customer-detail-list dt {
    color: var(--app-text-muted);
}

body.dark .customer-detail-group {
    border-color: var(--app-border);
    background: var(--app-surface-muted);
}

body.dark .customer-session-logout {
    border-color: var(--app-border);
}

body.dark .customer-session-logout .twofa-device-logout-all {
    color: #f0a5ad;
    background: rgba(131, 39, 49, .18);
    border-color: rgba(225, 118, 129, .35);
}

body.dark .customer-session-logout .twofa-device-logout-all:hover,
body.dark .customer-session-logout .twofa-device-logout-all:focus-visible {
    color: #fff;
    background: #a8323e;
    border-color: #c1505b;
}

@media (max-width: 800px) {
    .customer-view-dialog {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }

    .customer-view-header,
    .customer-view-content {
        padding: 14px;
    }

    .customer-view-content {
        gap: 10px;
    }

    .customer-detail-group {
        padding: 12px;
    }

    .customer-detail-list,
    .customer-detail-system .customer-detail-list {
        gap: 8px 12px;
    }
}


/* Dashboard */

.customer-dashboard {
    max-width: 1100px;
    margin: 0 auto;
}

.dashboard-welcome {
    margin-bottom: 25px;
}

.dashboard-welcome h1 {
    margin: 4px 0 8px;
    font-size: 30px;
    color: #172033;
}

.dashboard-welcome > p:last-child {
    color: #64748b;
    font-size: 16px;
}

.page-eyebrow {
    margin: 0 0 5px;
    color: #004b8f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.company-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.company-card-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 25px;
    border-bottom: 1px solid #e2e8f0;
}

.company-card-heading {
    flex: 1;
    min-width: 0;
}

.company-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    padding: 11px 14px;
    color: #ffffff;
    background: #004b8f;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.company-contact-link:hover {
    color: #ffffff;
    background: #003d74;
    transform: translateY(-1px);
}

.company-contact-link .fa-arrow-up-right-from-square {
    font-size: 10px;
    opacity: 0.75;
}

.company-card-header h2 {
    margin: 0 0 6px;
    color: #172033;
    font-size: 23px;
}

.company-card-header span {
    color: #64748b;
    font-size: 14px;
}

.company-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    color: #ffffff;
    background: #004b8f;
    border-radius: 14px;
    font-size: 22px;
}

.company-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.company-detail {
    padding: 20px 25px;
    border-bottom: 1px solid #eef2f7;
}

.company-detail:not(.company-detail--wide):nth-child(even) {
    border-right: 1px solid #eef2f7;
}

.company-detail--wide {
    grid-column: 1 / -1;
    border-right: none !important;
}

.company-detail span {
    display: block;
    margin-bottom: 7px;
    color: #64748b;
    font-size: 13px;
}

.company-detail strong {
    color: #172033;
    font-size: 15px;
    line-height: 1.6;
}

.company-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 17px 25px;
    color: #475569;
    background: #f8fafc;
    font-size: 13px;
}

.company-card-footer i {
    color: #004b8f;
}

body.dark .dashboard-welcome h1,
body.dark .company-card-header h2,
body.dark .company-detail strong {
    color: var(--app-text);
}

body.dark .dashboard-welcome > p:last-child,
body.dark .company-card-header span,
body.dark .company-detail span {
    color: var(--app-text-muted);
}

body.dark .company-card {
    background: var(--app-surface);
    border-color: var(--app-border);
}

body.dark .company-card-header,
body.dark .company-detail {
    border-color: var(--app-border);
}

body.dark .company-card-footer {
    color: #dbdee1;
    background: var(--app-surface-muted);
}

body.dark .company-contact-link {
    color: #ffffff;
    background: #114194;
}

body.dark .company-contact-link:hover {
    background: #0d3477;
}

@media (max-width: 700px) {
    .dashboard-welcome h1 {
        font-size: 25px;
    }

    .company-details {
        grid-template-columns: 1fr;
    }

    .company-detail:not(.company-detail--wide):nth-child(even) {
        border-right: none;
    }

    .company-card-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .company-card-heading {
        flex-basis: calc(100% - 72px);
    }

    .company-contact-link {
        justify-content: center;
        width: 100%;
    }
}

/* Dashboard - Ende */


/* TOP _ BAR */
.app-page .topbar--with-data-status {
    flex-wrap: wrap;
    gap: 12px 20px;
}

.topbar--with-data-status .topbar-brand {
    flex: 1 1 240px;
}

.topbar--with-data-status .topbar-right {
    flex-wrap: wrap;
    margin-left: auto;
    max-width: 100%;
}

html body.app-page .topbar-data-status {
    flex: 0 1 auto;
    max-width: 100%;
    white-space: normal;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 78px;
    padding: 13px 24px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.topbar-logo {
    display: block;
    width: auto;
    height: 48px;
    max-width: 215px;
    object-fit: contain;
}

.topbar-title h1 {
    margin: 0;
    color: #172033;
    font-size: 20px;
    line-height: 1.2;
}

.topbar-title span {
    display: block;
    margin-bottom: 2px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-control {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 50px;
    padding: 7px 13px 7px 8px;
    color: #172033;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.topbar-control:hover {
    background: #ffffff;
    border-color: #b7cce0;
    box-shadow: 0 7px 20px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.topbar-control-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    color: #004b8f;
    background: #e7f1fa;
    border-radius: 10px;
    font-size: 15px;
}

.dark-mode-copy,
.user-box-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
}

.dark-mode-copy strong,
.user-box-copy strong {
    overflow: hidden;
    max-width: 220px;
    color: #172033;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark-mode-copy small,
.user-box-copy small {
    margin-top: 2px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.2;
}

.user-box-arrow {
    margin-left: 4px;
    color: #94a3b8;
    font-size: 10px;
}

.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: #004b8f;
    background: #e7f1fa;
    border: 0;
    border-radius: 11px;
    cursor: pointer;
}

/* Darkmode */

body.dark .topbar {
    background: var(--app-surface-muted);
    border-bottom-color: var(--app-border);
}

body.dark .topbar-title h1 {
    color: var(--app-text);
}

body.dark .topbar-title span {
    color: var(--app-text-muted);
}

body.dark .topbar-control {
    color: var(--app-text);
    background: var(--app-surface-solid);
    border-color: var(--app-border);
}

body.dark .topbar-control:hover {
    background: var(--app-hover);
    border-color: var(--app-border-strong);
}

body.dark .topbar-control-icon {
    color: #91a2ba;
    background: var(--app-accent-soft);
}

body.dark .dark-mode-copy strong,
body.dark .user-box-copy strong {
    color: var(--app-text);
}

body.dark .dark-mode-copy small,
body.dark .user-box-copy small {
    color: var(--app-text-muted);
}

/* Responsive */

@media (max-width: 800px) {
    .mobile-menu-btn {
        display: flex;
    }

    .dark-mode-copy {
        display: none;
    }

    .dark-mode-control {
        width: 50px;
        padding: 7px;
    }

    .user-box-copy strong {
        max-width: 150px;
    }
}

@media (max-width: 560px) {
    .topbar {
        padding: 11px 14px;
    }

    .topbar-title span {
        display: none;
    }

    .user-box-copy {
        display: none;
    }

    .user-box {
        width: 50px;
        padding: 7px;
    }

    .user-box-arrow {
        display: none;
    }
}
/* TOP _ BAR    ENDE */

/* CSS FÜR MODULAUSWAHL */

.module-permissions {
    display: grid;
    gap: 10px;
}

.module-permissions-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.module-permissions-title {
    display: block;
    margin-bottom: 4px;
    color: #172033;
    font-size: 14px;
    font-weight: 700;
}

.module-permissions-header small {
    display: block;
    color: #64748b;
    line-height: 1.5;
}

.module-permissions-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.module-permissions-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.module-permission-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 7px 9px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
}

.module-permission-option:has(input:checked) {
    background: #eef6fc;
    border-color: #8bb9dc;
}

.module-permission-option input {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
}

.module-permission-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    color: #004b8f;
    background: #e2edf7;
    border-radius: 7px;
    font-size: 12px;
}

.module-permission-copy {
    min-width: 0;
}

.module-permission-copy strong,
.module-permission-copy small {
    display: block;
}

.module-permission-copy strong {
    color: #172033;
    font-size: 12px;
}

.module-permission-copy small {
    margin-top: 1px;
    color: #64748b;
    font-size: 10px;
}

@media (max-width: 1000px) {
    .module-permissions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .module-permissions-header {
        flex-direction: column;
    }

    .module-permissions-grid {
        grid-template-columns: 1fr;
    }
}

/* CSS MODULNAME   ENDE */

/*
|--------------------------------------------------------------------------
| Loginseite – Apple-inspirierter, minimalistischer Stil
|--------------------------------------------------------------------------
*/

.login-page,
.login-page * {
    box-sizing: border-box;
}

html:has(body.login-page) {
    min-width: 320px;
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
}

body.login-page {
    min-width: 320px;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;

    color: #1d1d1f;
    background: linear-gradient(180deg, #f8f8fa 0%, #f1f2f4 100%);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        "Helvetica Neue",
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/*
|--------------------------------------------------------------------------
| Zentrierung
|--------------------------------------------------------------------------
*/

.login-stage {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    display: grid;
    place-items: center;

    padding: 32px 20px;
}

/*
|--------------------------------------------------------------------------
| Login-Karte
|--------------------------------------------------------------------------
*/

.login-card {
    width: min(100%, 500px);
    padding: clamp(30px, 5vw, 48px);

    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 30px;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, .03),
        0 18px 50px rgba(0, 0, 0, .08);

    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

/*
|--------------------------------------------------------------------------
| Kopfbereich
|--------------------------------------------------------------------------
*/

.login-kicker {
    margin-top: 50px;
}

.login-header {
    text-align: center;
}

.login-logo-panel {
    width: min(100%, 252px);
    min-height: 76px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 30px;
    padding: 17px 24px;

    background: #114194;
    border-radius: 20px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .15),
        0 10px 24px rgba(17, 65, 148, .22);
}



.login-eyebrow {
    margin: 0 0 9px;

    color: #6e6e73;
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .095em;
    text-transform: uppercase;
}

.login-header h1 {
    margin: 0;

    color: #1d1d1f;
    font-size: clamp(2rem, 7vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -.055em;
    line-height: 1.04;
}

.login-description {
    max-width: 380px;
    margin: 15px auto 0;

    color: #6e6e73;
    font-size: .94rem;
    line-height: 1.55;
}

/*
|--------------------------------------------------------------------------
| Fehlermeldung
|--------------------------------------------------------------------------
*/

.login-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin: 25px 0 0;
    padding: 13px 14px;

    color: #a11d27;
    background: #fff1f2;
    border: 1px solid #ffd5d8;
    border-radius: 14px;

    font-size: .82rem;
    line-height: 1.45;
}

.login-alert i {
    margin-top: 2px;
}

/*
|--------------------------------------------------------------------------
| Formular
|--------------------------------------------------------------------------
*/

.login-form {
    display: grid;
    gap: 17px;

    margin-top: 31px;
}

.login-field {
    display: grid;
    gap: 8px;
}

.login-field-label {
    padding-left: 2px;

    color: #3a3a3c;
    font-size: .78rem;
    font-weight: 600;
}

.login-input {
    position: relative;

    min-height: 56px;
    display: flex;
    align-items: center;

    background: #f5f5f7;
    border: 1px solid transparent;
    border-radius: 14px;

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.login-input:hover {
    background: #f0f0f2;
}

.login-input:focus-within {
    background: #ffffff;
    border-color: #114194;
    box-shadow: 0 0 0 4px rgba(17, 65, 148, .16);
}

.login-input input {
    width: 100%;
    min-width: 0;
    height: 54px;

    padding: 0 16px;

    color: #1d1d1f;
    background: transparent;
    border: 0;
    outline: 0;

    font: inherit;
    font-size: .95rem;
}

.login-input-password input {
    padding-right: 55px;
}

.login-input input::placeholder {
    color: #98989d;
    opacity: 1;
}

.login-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;

    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    color: #6e6e73;
    background: transparent;
    border: 0;
    border-radius: 10px;

    cursor: pointer;
    transform: translateY(-50%);

    transition:
        color .2s ease,
        background .2s ease;
}

.login-password-toggle:hover {
    color: #1d1d1f;
    background: rgba(0, 0, 0, .055);
}

.login-password-toggle:focus-visible {
    outline: 3px solid rgba(17, 65, 148, .22);
    outline-offset: 1px;
}

/*
|--------------------------------------------------------------------------
| Button
|--------------------------------------------------------------------------
*/

.login-submit {
    width: 100%;
    min-height: 55px;

    margin-top: 3px;
    padding: 0 20px;

    color: #ffffff;
    background: #114194;
    border: 0;
    border-radius: 14px;

    box-shadow: 0 8px 18px rgba(17, 65, 148, .22);

    font: inherit;
    font-size: .95rem;
    font-weight: 650;

    cursor: pointer;

    transition:
        background .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.login-submit:hover {
    background: #0d3477;
    box-shadow: 0 10px 22px rgba(17, 65, 148, .28);
    transform: translateY(-1px);
}

.login-submit:active {
    background: #0b2f6c;
    box-shadow: 0 5px 12px rgba(17, 65, 148, .20);
    transform: translateY(0);
}

.login-submit:focus-visible {
    outline: 4px solid rgba(17, 65, 148, .20);
    outline-offset: 3px;
}

/*
|--------------------------------------------------------------------------
| Fußbereich
|--------------------------------------------------------------------------
*/

.login-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-top: 28px;
    padding-top: 21px;

    color: #86868b;
    border-top: 1px solid rgba(0, 0, 0, .07);

    font-size: .69rem;
    line-height: 1.4;
}

.login-footer span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.login-security i {
    color: #114194;
    font-size: .66rem;
}

/*
|--------------------------------------------------------------------------
| Mobil
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {
    .login-stage {
        display: block;
        padding: 12px;
    }

    .login-card {
        width: 100%;
        min-height: calc(100dvh - 24px);

        display: flex;
        flex-direction: column;
        justify-content: center;

        padding: 28px 22px;
        border-radius: 24px;
    }

    .login-header h1 {
        font-size: clamp(2rem, 11vw, 2.55rem);
    }

    .login-description {
        font-size: .89rem;
    }

    .login-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-height: 720px) and (min-width: 601px) {
    .login-stage {
        padding: 18px;
    }

    .login-card {
        padding-top: 30px;
        padding-bottom: 27px;
    }

    .login-logo-panel {
        min-height: 66px;
        margin-bottom: 22px;
        padding-top: 13px;
        padding-bottom: 13px;
    }

    .login-header h1 {
        font-size: 2.2rem;
    }

    .login-description {
        margin-top: 10px;
    }

    .login-form {
        gap: 13px;
        margin-top: 23px;
    }

    .login-input,
    .login-submit {
        min-height: 51px;
    }

    .login-input input {
        height: 49px;
    }

    .login-footer {
        margin-top: 21px;
        padding-top: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-input,
    .login-password-toggle,
    .login-submit {
        transition: none;
    }
}

/* LOGO  */

.login-brand-logo {
    position: relative;
    isolation: isolate;

    width: min(100%, 260px);
    height: 170px;
    margin: -12px auto 8px;
    overflow: visible;

    cursor: default;
}

.login-brand-logo::before {
    content: "";

    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;

    width: 170px;
    height: 92px;

    background: rgba(17, 65, 148, .24);
    border-radius: 50%;
    filter: blur(38px);
    opacity: .78;
    transform: translate(-50%, -50%);

    pointer-events: none;
}

.login-brand-particles {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: block;
    width: 100%;
    height: 100%;
}

@media (max-width: 600px) {
    .login-brand-logo {
        width: min(100%, 226px);
        height: 148px;
        margin-top: -8px;
    }
}

/* LOGO */

/* LOGIN _ ENDE*/

/*
|--------------------------------------------------------------------------
| Application shell – refined, calm interface
|--------------------------------------------------------------------------
| All rules are scoped to .app-page so the login screen stays untouched.
*/

body.app-page {
    --app-accent: #114194;
    --app-accent-strong: #0d3477;
    --app-accent-fill: #114194;
    --app-accent-soft: #edf2fa;
    --app-canvas: #f5f6f8;
    --app-surface: rgba(255, 255, 255, .92);
    --app-surface-solid: #ffffff;
    --app-surface-muted: #f7f8fa;
    --app-border: rgba(15, 23, 42, .09);
    --app-border-strong: rgba(15, 23, 42, .14);
    --app-text: #172033;
    --app-text-muted: #687386;
    --app-sidebar: #082a60;
    --app-sidebar-soft: #114194;
    --app-positive: #16835a;
    --app-warning: #ad6a00;
    --app-danger: #c63f4a;
    --app-shadow-sm: 0 1px 2px rgba(15, 23, 42, .03), 0 8px 24px rgba(15, 23, 42, .045);
    --app-shadow-md: 0 18px 50px rgba(15, 23, 42, .10);
    min-width: 320px;
    color: var(--app-text);
    background:
        radial-gradient(circle at 72% -10%, rgba(8, 116, 209, .08), transparent 30rem),
        var(--app-canvas);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color-scheme: light;
}

body.app-page.dark {
    --app-accent: #7d8fa8;
    --app-accent-strong: #91a2ba;
    --app-accent-fill: #1a3659;
    --app-accent-soft: rgba(30, 55, 87, .72);
    --app-canvas: #1e1f22;
    --app-surface: #313338;
    --app-surface-solid: #2b2d31;
    --app-surface-muted: #232428;
    --app-border: #41434a;
    --app-border-strong: #5b5d65;
    --app-text: #f2f3f5;
    --app-text-muted: #b5bac1;
    --app-sidebar: #111214;
    --app-sidebar-soft: #1e1f22;
    --app-hover: #393c41;
    --app-selected: #404249;
    --app-positive: #57f287;
    --app-warning: #fee75c;
    --app-danger: #ff7a7c;
    --app-shadow-sm: 0 1px 0 rgba(0, 0, 0, .34), 0 8px 22px rgba(0, 0, 0, .18);
    --app-shadow-md: 0 22px 60px rgba(0, 0, 0, .38);
    background:
        radial-gradient(circle at 72% -10%, rgba(17, 65, 148, .10), transparent 32rem),
        var(--app-canvas);
    color-scheme: dark;
}

.app-page .layout {
    align-items: stretch;
    min-height: 100dvh;
}

.app-page .sidebar {
    position: sticky;
    top: 0;
    z-index: 100;
    flex: 0 0 264px;
    width: 264px;
    height: 100dvh;
    padding: 0 12px 24px;
    color: #fff;
    background:
        radial-gradient(circle at 50% 0, rgba(124, 170, 231, .22), transparent 22rem),
        linear-gradient(180deg, var(--app-sidebar-soft), var(--app-sidebar) 72%);
    border-right: 0;
    box-shadow: 12px 0 35px rgba(7, 31, 71, .14);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

.app-page .sidebar::-webkit-scrollbar {
    width: 6px;
}

.app-page .sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.app-page .sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
}

.app-page .logo {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 104px;
    display: flex;
    align-items: center;
    margin: 0 -12px;
    padding: 24px 26px 18px;
    background: linear-gradient(180deg, rgba(17, 65, 148, .99) 72%, rgba(17, 65, 148, 0));
    border: 0;
    box-shadow: none;
}

.app-page .topbar-logo-link {
    display: inline-flex;
    border-radius: 10px;
    outline: none;
}

.app-page .logo .topbar-logo {
    width: 190px;
    max-width: 100%;
    height: auto;
    max-height: 52px;
}

.app-page .nav-section {
    padding: 7px 5px 8px;
}

.app-page .nav-title {
    margin: 7px 11px 7px;
    color: rgba(215, 230, 251, .68);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .12em;
    opacity: 1;
}

.app-page .nav-section a {
    min-height: 39px;
    gap: 11px;
    margin: 2px 0;
    padding: 8px 11px;
    color: rgba(245, 249, 255, .84);
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 540;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.app-page .nav-section a i {
    width: 18px;
    color: rgba(190, 216, 250, .86);
    font-size: 13px;
    text-align: center;
    transition: color .18s ease, transform .18s ease;
}

.app-page .nav-link-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.app-page .nav-link-copy > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-page .nav-link-copy small {
    color: rgba(184, 215, 242, .62);
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .025em;
    line-height: 1.2;
}

.app-page .nav-section a.active .nav-link-copy small {
    color: rgba(255, 255, 255, .76);
}

.app-page .nav-section a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .10);
}

.app-page .nav-section a:hover i {
    color: #fff;
    transform: scale(1.05);
}

.app-page .nav-section a.active {
    color: #fff;
    background: linear-gradient(135deg, #2865bd, #0d3477);
    border-color: rgba(205, 225, 255, .26);
    box-shadow: 0 8px 22px rgba(4, 26, 65, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.app-page .nav-section a.active i {
    color: #fff;
}

.app-page .nav-section a .sidebar-module-alert {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    margin-left: auto;
    padding: 0 5px;
    color: #fff;
    background: var(--app-danger, #d52838);
    border: 2px solid var(--app-sidebar);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.app-page .nav-section a.active .sidebar-module-alert {
    border-color: color-mix(in srgb, var(--app-sidebar) 72%, #fff);
}

.app-page .nav-section .logout-link {
    color: rgba(255, 188, 188, .86);
}

.app-page .nav-section .logout-link:hover {
    color: #ffd3d3;
    background: rgba(212, 71, 71, .13);
}

.app-page .nav-section .logout-link.is-projection-disabled,
.app-page .nav-section .logout-link.is-projection-disabled:hover,
.app-page .nav-section .logout-link.is-projection-disabled:focus-visible {
    color: rgba(255, 188, 188, .62);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

.app-page .main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: calc(100% - 264px);
    min-height: 100dvh;
}

.app-page .topbar {
    position: sticky;
    top: 0;
    z-index: 80;
    min-height: 88px;
    padding: 14px clamp(20px, 2.8vw, 40px);
    background: rgba(255, 255, 255, .78);
    border-bottom: 1px solid var(--app-border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .68);
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
}

.app-page.dark .topbar {
    background: rgba(10, 17, 27, .78);
    border-color: var(--app-border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .02);
}

.app-page .topbar-title span {
    margin-bottom: 3px;
    color: var(--app-text-muted);
    font-size: 11px;
    font-weight: 720;
    letter-spacing: .105em;
}

.app-page .topbar-title h1 {
    color: var(--app-text);
    font-size: 24px;
    font-weight: 680;
    letter-spacing: -.02em;
}

.app-page .topbar-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.app-page .topbar-customer-context {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 4px 9px;
    color: var(--app-accent-strong);
    background: var(--app-accent-soft);
    border: 1px solid rgba(8, 116, 209, .13);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
}

.app-page .topbar-customer-context b {
    max-width: 220px;
    overflow: hidden;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-page .topbar-right {
    gap: 9px;
}

.app-page .topbar-control {
    min-height: 50px;
    padding: 5px 11px 5px 6px;
    color: var(--app-text);
    background: rgba(255, 255, 255, .58);
    border-color: var(--app-border);
    border-radius: 13px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
}

.app-page .topbar-control:hover {
    background: var(--app-surface-solid);
    border-color: var(--app-border-strong);
    box-shadow: var(--app-shadow-sm);
    transform: translateY(-1px);
}

.app-page.dark .topbar-control,
.app-page.dark .topbar-control:hover {
    color: var(--app-text);
    background: var(--app-surface);
    border-color: var(--app-border);
}

.app-page .topbar-control-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    color: var(--app-accent);
    background: var(--app-accent-soft);
    border-radius: 9px;
}

.app-page .topbar-chat-control {
    position: relative;
    justify-content: center;
    width: 50px;
    min-width: 50px;
    padding: 6px;
}

.app-page .topbar-chat-control .topbar-control-icon {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.app-page .topbar-chat-symbol {
    display: grid;
    place-items: center;
    color: #334155;
    font-size: 18px;
}

.app-page .topbar-chat-control .support-chat-unread-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    border-color: var(--app-surface-solid);
}

.app-page .topbar-chat-control.has-support-unread {
    border-color: color-mix(in srgb, var(--app-danger) 54%, var(--app-border));
}

.app-page .dark-mode-copy strong,
.app-page .user-box-copy strong,
.app-page.dark .dark-mode-copy strong,
.app-page.dark .user-box-copy strong {
    color: var(--app-text);
    font-size: 12px;
}

.app-page .dark-mode-copy small,
.app-page .user-box-copy small,
.app-page.dark .dark-mode-copy small,
.app-page.dark .user-box-copy small {
    color: var(--app-text-muted);
    font-size: 10px;
}

.command-control-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
}

.command-control[hidden] {
    display: none !important;
}

.app-page .user-info {
    min-width: 210px;
    min-height: 58px;
    padding: 7px 12px 7px 7px;
}

.app-page .user-info:hover {
    background: var(--app-surface-solid);
    border-color: var(--app-border-strong);
    box-shadow: var(--app-shadow-sm);
    transform: translateY(-1px);
}

.app-page.dark .user-info:hover {
    background: var(--app-surface);
    border-color: var(--app-border);
}

.app-page .user-info .topbar-control-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    font-size: 15px;
}

.app-page .user-info .user-box-copy strong {
    font-size: 13px;
}

.app-page .user-info .user-box-copy small {
    font-size: 11px;
}

.user-menu {
    position: relative;
}

.user-menu-chevron {
    margin-left: 4px;
    color: var(--app-text-muted);
    font-size: 9px;
    transition: transform .18s ease;
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 500;
    width: 250px;
    padding: 7px;
    visibility: hidden;
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border-strong);
    border-radius: 15px;
    box-shadow: 0 22px 55px rgba(15, 23, 42, .18);
    opacity: 0;
    transform: translateY(-7px) scale(.985);
    transform-origin: top right;
    transition: opacity .16s ease, transform .18s cubic-bezier(.22, 1, .36, 1), visibility .16s ease;
}

.user-menu::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 10px;
}

.user-menu:hover .user-menu-dropdown,
.user-menu:focus-within .user-menu-dropdown,
.user-menu.is-open .user-menu-dropdown {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.user-menu:hover .user-menu-chevron,
.user-menu:focus-within .user-menu-chevron,
.user-menu.is-open .user-menu-chevron {
    transform: rotate(180deg);
}

.user-menu-heading {
    padding: 9px 10px 10px;
    border-bottom: 1px solid var(--app-border);
}

.user-menu-heading span,
.user-menu-heading strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-heading span {
    color: var(--app-text-muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.user-menu-heading strong {
    margin-top: 2px;
    color: var(--app-text);
    font-size: 12px;
}

.user-menu-dropdown nav {
    display: grid;
    gap: 2px;
    padding-top: 6px;
}

.user-menu-dropdown nav a,
.user-menu-dropdown nav a:visited {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 10px;
    color: var(--app-text);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
}

.user-menu-dropdown nav a i {
    width: 17px;
    color: var(--app-accent-strong);
    text-align: center;
}

.user-menu-dropdown nav a:hover,
.user-menu-dropdown nav a:focus-visible {
    background: var(--app-accent-soft);
}

.user-menu-dropdown nav .user-menu-logout {
    margin-top: 4px;
    color: #b42323;
    border-top: 1px solid var(--app-border);
    border-radius: 0 0 9px 9px;
}

.user-menu-dropdown nav .user-menu-logout i {
    color: #c83232;
}

.user-menu-dropdown nav .user-menu-logout:hover,
.user-menu-dropdown nav .user-menu-logout:focus-visible {
    background: rgba(200, 50, 50, .08);
}

.user-menu-dropdown nav .user-menu-logout.is-projection-disabled,
.user-menu-dropdown nav .user-menu-logout.is-projection-disabled:hover,
.user-menu-dropdown nav .user-menu-logout.is-projection-disabled:focus-visible {
    color: rgba(180, 35, 35, .58);
    background: transparent;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

.user-menu-dropdown nav .user-menu-logout.is-projection-disabled i {
    color: currentColor;
}

.command-control-copy strong {
    color: var(--app-text);
    font-size: 12px;
    line-height: 1.3;
}

.command-control-copy small {
    margin-top: 2px;
    color: var(--app-text-muted);
    font-size: 10px;
    line-height: 1.2;
}

.command-control kbd,
.command-palette kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 22px;
    padding: 2px 6px;
    color: var(--app-text-muted);
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border);
    border-bottom-color: var(--app-border-strong);
    border-radius: 6px;
    box-shadow: 0 1px 0 var(--app-border-strong);
    font: 700 9px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    white-space: nowrap;
}

.command-palette[hidden] {
    display: none !important;
}

.command-palette {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: start center;
    padding: min(14vh, 120px) 18px 24px;
}

.command-palette-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background: rgba(3, 10, 18, .54);
    border: 0;
    border-radius: 0;
    cursor: default;
    backdrop-filter: blur(12px) saturate(115%);
    -webkit-backdrop-filter: blur(12px) saturate(115%);
}

.command-palette-dialog {
    position: relative;
    width: min(620px, 100%);
    overflow: hidden;
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border-strong);
    border-radius: 20px;
    box-shadow: 0 34px 100px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .12);
    opacity: 0;
    transform: translateY(-10px) scale(.985);
    transition: opacity .18s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
}

.command-palette.is-open .command-palette-dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.command-palette-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--app-border);
}

.command-palette-search > i {
    color: var(--app-accent-strong);
    font-size: 16px;
}

.app-page .command-palette-search input {
    width: 100%;
    height: 38px;
    padding: 0;
    color: var(--app-text);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    outline: 0;
    font-size: 16px;
}

.app-page .command-palette-search input:focus {
    border: 0;
    box-shadow: none;
}

.command-palette-search input::placeholder {
    color: var(--app-text-muted);
}

.command-palette-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px 7px;
    color: var(--app-text-muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.command-palette-caption span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.command-palette-caption i {
    color: var(--app-accent);
}

.command-palette-results {
    display: grid;
    gap: 3px;
    max-height: min(54vh, 430px);
    padding: 4px 8px 9px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--app-border-strong) transparent;
}

.command-palette-result,
.command-palette-result:visited {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-height: 54px;
    padding: 7px 10px;
    color: var(--app-text);
    border: 1px solid transparent;
    border-radius: 12px;
    text-decoration: none;
}

.command-palette-result:hover,
.command-palette-result.is-active {
    color: var(--app-text);
    background: var(--app-accent-soft);
    border-color: rgba(8, 116, 209, .13);
}

.command-palette-result-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--app-accent-strong);
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    box-shadow: 0 2px 7px rgba(15, 23, 42, .04);
}

.command-palette-result-copy {
    min-width: 0;
}

.command-palette-result-copy strong,
.command-palette-result-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.command-palette-result-copy strong {
    color: var(--app-text);
    font-size: 13px;
}

.command-palette-result-copy small {
    margin-top: 2px;
    color: var(--app-text-muted);
    font-size: 10px;
}

.command-palette-result-arrow {
    color: var(--app-text-muted);
    font-size: 10px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .16s ease, transform .16s ease;
}

.command-palette-result:hover .command-palette-result-arrow,
.command-palette-result.is-active .command-palette-result-arrow {
    color: var(--app-accent-strong);
    opacity: 1;
    transform: translateX(0);
}

.command-palette-empty {
    padding: 45px 20px;
    color: var(--app-text-muted);
    text-align: center;
}

.command-palette-empty i,
.command-palette-empty strong,
.command-palette-empty span {
    display: block;
}

.command-palette-empty i {
    margin-bottom: 10px;
    color: var(--app-accent);
    font-size: 22px;
}

.command-palette-empty strong {
    color: var(--app-text);
    font-size: 13px;
}

.command-palette-empty span {
    margin-top: 3px;
    font-size: 11px;
}

.command-palette-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    min-height: 42px;
    padding: 8px 14px;
    color: var(--app-text-muted);
    background: var(--app-surface-muted);
    border-top: 1px solid var(--app-border);
    font-size: 9px;
}

.command-palette-footer span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body.command-palette-open {
    overflow: hidden;
}

.app-page .content {
    flex: 1 0 auto;
    width: 100%;
    padding: clamp(20px, 3vw, 38px);
}

/* Persönliche Merkliste */
.watchlist-flash {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    margin: 0 0 14px;
    padding: 10px 13px;
    color: var(--app-text);
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    font-size: 12px;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .04);
}

.watchlist-flash.is-success i {
    color: #287a56;
}

.watchlist-flash.is-error i {
    color: #b45309;
}

.watchlist-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    margin: 0;
}

body.app-page .watchlist-toggle button {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: #6b7480;
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border-strong);
    border-radius: 9px;
    box-shadow: none;
    cursor: pointer;
    transition: color .16s ease, background .16s ease, border-color .16s ease, transform .12s ease;
}

body.app-page .watchlist-toggle button:hover,
body.app-page .watchlist-toggle button:focus-visible {
    color: #7a5411;
    background: #fff8e8;
    border-color: #d5aa53;
    filter: none;
    box-shadow: none;
    outline: none;
}

body.app-page .watchlist-toggle button:active {
    transform: scale(.97);
}

body.app-page .watchlist-toggle.is-active button {
    color: #8b5d0b;
    background: #fff4d6;
    border-color: #ddb85f;
}

body.app-page.dark .watchlist-toggle button {
    color: #aeb6c1;
    background: #292d33;
    border-color: #4b515a;
}

body.app-page.dark .watchlist-toggle button:hover,
body.app-page.dark .watchlist-toggle button:focus-visible,
body.app-page.dark .watchlist-toggle.is-active button {
    color: #f4cf7a;
    background: #393426;
    border-color: #8d7139;
}

.app-footer {
    flex: 0 0 auto;
    width: 100%;
    color: var(--app-text-muted);
    border-top: 1px solid var(--app-border);
    font-size: 11px;
}

.app-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: min(1600px, 100%);
    min-height: 52px;
    margin: 0 auto;
    padding: 9px clamp(20px, 3vw, 38px);
}

.app-footer-brand,
.app-footer-meta,
.app-footer-privacy,
.app-footer-links,
.app-footer-links a {
    display: flex;
    align-items: center;
}

.app-footer-brand {
    gap: 6px;
}

.app-footer-brand strong {
    color: var(--app-text);
    font-weight: 680;
}

.app-footer-mark {
    width: 5px;
    height: 5px;
    margin-right: 2px;
    background: var(--app-accent-strong);
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--app-accent-soft);
}

.app-footer-separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    opacity: .55;
}

.app-footer-meta {
    flex: 0 0 auto;
    gap: clamp(24px, 3vw, 46px);
}

.app-footer-privacy {
    gap: 8px;
    margin: 0;
    white-space: nowrap;
}

.app-footer-privacy a,
.app-footer-privacy button {
    padding: 0;
    color: inherit;
    background: none;
    border: 0;
    font: inherit;
    font-size: inherit;
    text-decoration: none;
    cursor: pointer;
}

.app-footer-privacy a:hover,
.app-footer-privacy button:hover,
.app-footer-privacy a:focus-visible,
.app-footer-privacy button:focus-visible {
    color: var(--app-accent-strong);
    text-decoration: underline;
}

.app-footer-version,
.app-footer-version:visited,
.app-footer-version:active {
    flex: 0 0 auto;
    padding: 4px 7px;
    color: inherit;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease;
}

.app-footer-version:hover {
    color: var(--app-accent-strong);
    background: color-mix(in srgb, var(--app-accent) 10%, transparent);
}

.app-footer-version:focus-visible {
    color: var(--app-accent-strong);
    background: color-mix(in srgb, var(--app-accent) 10%, transparent);
    outline: 2px solid var(--app-accent-strong);
    outline-offset: 3px;
}

.app-footer-links a,
.app-footer-links a:visited {
    gap: 6px;
    padding: 6px 8px;
    color: var(--app-text-muted);
    border-radius: 7px;
    text-decoration: none;
    transition: color .18s ease, background-color .18s ease;
}

.app-footer-links a:hover,
.app-footer-links a:focus-visible {
    color: var(--app-accent-strong);
    background: var(--app-accent-soft);
}

.app-footer-links i {
    font-size: 10px;
}

@media (max-width: 600px) {
    .app-footer-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
        padding-top: 13px;
        padding-bottom: 13px;
    }

    .app-footer-links a {
        margin-left: -8px;
    }

    .app-footer-brand {
        flex-wrap: wrap;
    }

    .app-footer-meta {
        justify-content: space-between;
        gap: 18px;
        width: 100%;
        margin-top: 4px;
    }

    .app-footer-privacy {
        flex-wrap: wrap;
        white-space: normal;
    }

    .app-footer-version {
        align-self: auto;
        margin: 0;
    }
}

.app-page .card,
.app-page .company-card,
.app-page .dashboard-stat-card,
.app-page .dashboard-action-card,
.app-page .dashboard-list-card,
.app-page .profile-card,
.app-page .profile-summary,
.app-page .profile-save-box,
.app-page .user-card,
.app-page .import-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 18px;
    box-shadow: var(--app-shadow-sm);
}

.app-page.dark .card,
.app-page.dark .company-card,
.app-page.dark .dashboard-stat-card,
.app-page.dark .dashboard-action-card,
.app-page.dark .dashboard-list-card,
.app-page.dark .profile-card,
.app-page.dark .profile-summary,
.app-page.dark .profile-save-box,
.app-page.dark .user-card,
.app-page.dark .import-card {
    background: var(--app-surface);
    border-color: var(--app-border);
}

.app-page .card > h1:first-child,
.app-page .page-header h1,
.app-page .dashboard-welcome h1,
.app-page .profile-page-header h1 {
    color: var(--app-text);
    font-weight: 700;
    letter-spacing: -.035em;
}

.app-page .page-description,
.app-page .dashboard-welcome p:last-child,
.app-page .profile-page-header .page-description {
    color: var(--app-text-muted);
}

.app-page .page-eyebrow {
    color: var(--app-accent);
    font-size: 11px;
    letter-spacing: .105em;
}

.app-page .button,
.app-page button,
.app-page input,
.app-page select,
.app-page textarea {
    font-family: inherit;
}

.app-page .button {
    min-height: 40px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 680;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.app-page .button-primary,
.app-page .profile-save-button {
    color: #fff;
    background: linear-gradient(180deg, #1785df, var(--app-accent-strong));
    border: 1px solid rgba(0, 74, 143, .24);
    box-shadow: 0 6px 16px rgba(0, 101, 189, .18), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.app-page .button-primary:hover,
.app-page .profile-save-button:hover {
    background: linear-gradient(180deg, #087bd6, #005bad);
    box-shadow: 0 9px 22px rgba(0, 101, 189, .22);
    transform: translateY(-1px);
}

.app-page .button-secondary,
.app-page .button-ghost {
    color: var(--app-text);
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border);
}

.app-page .button-secondary:hover,
.app-page .button-ghost:hover {
    background: var(--app-surface-solid);
    border-color: var(--app-border-strong);
}

.app-page :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
    color: var(--app-text);
    background: var(--app-surface-solid);
    border-color: var(--app-border-strong);
    border-radius: 10px;
}

.app-page :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 4px rgba(8, 116, 209, .12);
}

.app-page :is(button, a, input, select, textarea):focus-visible {
    outline: 3px solid rgba(8, 116, 209, .28);
    outline-offset: 2px;
}

.app-page :is(.user-table, .dashboard-table, .import-table) th {
    color: var(--app-text-muted);
    background: var(--app-surface-muted);
    border-color: var(--app-border);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .075em;
}

.app-page :is(.user-table, .dashboard-table, .import-table) td {
    color: var(--app-text);
    border-color: var(--app-border);
}

.app-page :is(.user-table, .dashboard-table, .import-table) tbody tr:hover {
    background: rgba(8, 116, 209, .035);
}

.app-page .notice {
    border-radius: 13px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
}

.app-page .user-modal-backdrop {
    background: rgba(4, 12, 22, .62);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
}

.app-page .user-modal-dialog {
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 20px;
    box-shadow: 0 34px 90px rgba(0, 0, 0, .32);
}

.app-page .modal-header,
.app-page .modal-footer,
.app-page .user-form h3 {
    border-color: var(--app-border);
}

.app-page .modal-header h2,
.app-page .user-form h3,
.app-page .form-grid label > span {
    color: var(--app-text);
}

.app-page .modal-footer {
    background: var(--app-surface-muted);
}

.app-page .modal-close {
    color: var(--app-text-muted);
    background: var(--app-surface-muted);
}

.app-page .modal-close:hover {
    color: var(--app-text);
    background: var(--app-accent-soft);
}

/* Compact permissions: more options visible with less scrolling. */
.app-page .module-permissions {
    gap: 9px;
    margin-top: 2px;
    padding: 13px;
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border);
    border-radius: 13px;
}

.app-page .module-permissions-header {
    align-items: center;
    gap: 12px;
}

.app-page .module-permissions-title {
    margin-bottom: 1px;
    color: var(--app-text);
    font-size: 13px;
}

.app-page .module-permissions-header small {
    max-width: 560px;
    margin: 0;
    color: var(--app-text-muted);
    font-size: 10px;
    line-height: 1.35;
}

.app-page .module-permissions-actions {
    flex-wrap: nowrap;
    gap: 5px;
}

.app-page .module-permissions-actions .button {
    min-height: 30px;
    padding: 5px 9px;
    font-size: 10px;
    white-space: nowrap;
}

.app-page .module-permissions-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
}

.app-page .module-permission-option {
    display: flex;
    min-height: 36px;
    gap: 6px;
    padding: 5px 7px;
    background: var(--app-surface-solid);
    border-color: var(--app-border);
    border-radius: 8px;
    box-shadow: none;
}

.app-page .module-permission-option:hover {
    border-color: rgba(8, 116, 209, .34);
    background: var(--app-accent-soft);
}

.app-page .module-permission-option:has(input:checked) {
    background: var(--app-accent-soft);
    border-color: rgba(8, 116, 209, .38);
}

.app-page .module-permission-option input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--app-accent);
}

.app-page .module-permission-icon {
    flex-basis: 23px;
    width: 23px;
    height: 23px;
    color: var(--app-accent);
    background: transparent;
    border-radius: 6px;
    font-size: 10px;
}

.app-page .module-permission-copy strong {
    overflow: hidden;
    color: var(--app-text);
    font-size: 10.5px;
    font-weight: 650;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-page .module-permission-copy small {
    display: none;
}

.sidebar-backdrop {
    display: none;
}

@media (max-width: 1100px) {
    .app-page .module-permissions-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    body.app-page.sidebar-open {
        overflow: hidden;
    }

    .app-page .sidebar {
        position: fixed;
        left: 0;
        width: min(284px, calc(100vw - 48px));
        transform: translateX(-105%);
        transition: transform .3s cubic-bezier(.22, 1, .36, 1);
    }

    .app-page .sidebar.show {
        left: 0;
        transform: translateX(0);
    }

    .app-page .main {
        width: 100%;
    }

    .app-page .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 90;
        display: block;
        visibility: hidden;
        padding: 0;
        background: rgba(4, 12, 22, .36);
        border: 0;
        opacity: 0;
        backdrop-filter: blur(3px);
        transition: opacity .25s ease, visibility .25s ease;
    }

    .app-page.sidebar-open .sidebar-backdrop {
        visibility: visible;
        opacity: 1;
    }

    .app-page .mobile-menu-btn {
        display: flex;
        color: var(--app-accent);
        background: var(--app-accent-soft);
        border: 1px solid rgba(8, 116, 209, .08);
    }
}

@media (max-width: 700px) {
    .app-page .content {
        padding: 18px 14px 26px;
    }

    .app-page .topbar {
        min-height: 72px;
        padding: 10px 14px;
    }

    .app-page .topbar-title h1 {
        font-size: 20px;
    }

    .app-page .topbar-customer-context b {
        display: none;
    }

    .app-page .card,
    .app-page .company-card,
    .app-page .dashboard-stat-card,
    .app-page .dashboard-action-card,
    .app-page .dashboard-list-card,
    .app-page .profile-card,
    .app-page .profile-summary,
    .app-page .profile-save-box,
    .app-page .user-card {
        border-radius: 15px;
    }

    .app-page .module-permissions {
        padding: 10px;
    }

    .app-page .module-permissions-header {
        align-items: stretch;
    }

    .app-page .module-permissions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .command-palette {
        padding: 72px 10px 10px;
    }

    .command-palette-dialog {
        border-radius: 16px;
    }

    .command-palette-footer {
        justify-content: center;
    }

    .app-page .user-info {
        justify-content: center;
        min-width: 50px;
        width: 50px;
        padding: 5px;
    }

    .app-page .user-info .topbar-control-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

    .app-page .user-info .user-box-copy,
    .user-menu-chevron {
        display: none;
    }

    .user-menu-dropdown {
        width: min(270px, calc(100vw - 28px));
    }
}

@media (max-width: 1100px) {
    .command-control {
        width: 46px;
        padding: 5px !important;
    }

    .command-control-copy,
    .command-control > kbd {
        display: none;
    }
}

@media (max-width: 430px) {
    .app-page .module-permissions-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-page *,
    .app-page *::before,
    .app-page *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Direktes, mechanisches Button-Feedback ohne Licht- oder Reveal-Effekte */
.app-page .content > * {
    animation: none !important;
}

body.app-page :is(
    button,
    summary.button,
    a.button,
    a[class*="button"],
    a[role="button"],
    .article-catalog-reset,
    .simulation-open
),
body.app-page :is(
    button,
    summary.button,
    a.button,
    a[class*="button"],
    a[role="button"],
    .article-catalog-reset,
    .simulation-open
):is(:hover, :focus, :focus-visible, :active, :visited) {
    text-decoration: none !important;
}

body.app-page :is(
    .button-primary,
    .button-secondary,
    .button-ghost,
    .profile-save-button,
    .article-catalog-button,
    .article-catalog-reset,
    .import-button,
    .simulation-open
)::before,
body.app-page :is(
    .button-primary,
    .button-secondary,
    .button-ghost,
    .profile-save-button,
    .article-catalog-button,
    .article-catalog-reset,
    .import-button,
    .simulation-open
)::after,
.button-feedback-ripple {
    display: none !important;
}

@media (hover: hover) and (pointer: fine) {
    body.app-page :is(
        .button-primary,
        .profile-save-button,
        .article-catalog-button,
        .import-button,
        .simulation-open
    ):hover:not(:disabled):not([aria-disabled="true"]) {
        filter: none;
        background: #0d3477;
        border-color: #0d3477;
        box-shadow: 0 7px 15px rgba(17, 65, 148, .2);
        transform: translateY(-1px);
    }

    body.app-page :is(
        .button-secondary,
        .button-ghost,
        .article-catalog-reset
    ):hover:not(:disabled):not([aria-disabled="true"]) {
        color: var(--app-text);
        background: var(--app-surface-solid);
        border-color: var(--app-border-strong);
        box-shadow: 0 5px 12px rgba(20, 42, 73, .1);
        transform: translateY(-1px);
    }

    body.app-page :is(
        .button-primary,
        .button-secondary,
        .button-ghost,
        .profile-save-button,
        .article-catalog-button,
        .article-catalog-reset,
        .import-button,
        .simulation-open
    ):hover :is(i, svg) {
        transform: none;
    }
}

/* Benutzerbild in der Kopfleiste */
.app-page .user-info .user-box-icon:has(.topbar-profile-image) {
    overflow: hidden;
    padding: 0;
    background: var(--app-surface-muted);
    border-color: var(--app-border);
}

.topbar-profile-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

body.app-page.dark :is(
    .button-primary,
    .profile-save-button,
    .article-catalog-button,
    .import-button,
    .simulation-open
):hover:not(:disabled):not([aria-disabled="true"]) {
    background: #0d3477;
    border-color: #365f9f;
    box-shadow: 0 7px 15px rgba(0, 0, 0, .24);
}

body.app-page.dark :is(
    .button-secondary,
    .button-ghost,
    .article-catalog-reset
):hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--app-text);
    background: #35373d;
    border-color: #666973;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .2);
}

body.app-page :is(
    button,
    summary.button,
    a.button,
    a[class*="button"],
    a[role="button"],
    .article-catalog-reset,
    .simulation-open
):not(:disabled):not([aria-disabled="true"]):active,
body.app-page :is(
    button,
    summary.button,
    a.button,
    a[class*="button"],
    a[role="button"],
    .article-catalog-reset,
    .simulation-open
).is-button-pressing {
    filter: none !important;
    box-shadow:
        inset 0 3px 7px rgba(0, 0, 0, .22),
        0 1px 2px rgba(0, 0, 0, .08) !important;
    transform: translateY(2px) scale(.965) !important;
    transition-duration: .07s !important;
}

/* Einheitliches Portal-Buttonsystem */
body.app-page :is(
    .button-primary,
    .button-secondary,
    .button-ghost,
    .profile-save-button,
    .article-catalog-button,
    .article-catalog-reset,
    .import-button,
    .simulation-open
) {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    line-height: 1;
    text-decoration: none !important;
}

body.app-page :is(
    .button-primary,
    .profile-save-button,
    .article-catalog-button,
    .import-button,
    .simulation-open
) {
    color: #fff !important;
    background: #114194 !important;
    border-color: #114194 !important;
    box-shadow: 0 5px 12px rgba(17, 65, 148, .18) !important;
}

body.app-page :is(
    .button-secondary,
    .button-ghost,
    .article-catalog-reset
) {
    color: var(--app-text) !important;
    background: var(--app-surface-solid) !important;
    border-color: var(--app-border-strong) !important;
    box-shadow: 0 2px 5px rgba(20, 42, 73, .06) !important;
}

@media (hover: hover) and (pointer: fine) {
    body.app-page :is(
        .button-primary,
        .profile-save-button,
        .article-catalog-button,
        .import-button,
        .simulation-open
    ):hover:not(:disabled):not([aria-disabled="true"]) {
        color: #114194 !important;
        background: var(--app-surface-solid) !important;
        border-color: #114194 !important;
        box-shadow: 0 6px 14px rgba(17, 65, 148, .14) !important;
        transform: translateY(-1px) !important;
    }

    body.app-page :is(
        .button-secondary,
        .button-ghost,
        .article-catalog-reset
    ):hover:not(:disabled):not([aria-disabled="true"]) {
        color: #114194 !important;
        background: var(--app-accent-soft) !important;
        border-color: #114194 !important;
        box-shadow: 0 5px 11px rgba(17, 65, 148, .1) !important;
        transform: translateY(-1px) !important;
    }
}

body.app-page.dark :is(
    .button-primary,
    .profile-save-button,
    .article-catalog-button,
    .import-button,
    .simulation-open
) {
    color: #fff !important;
    background: #114194 !important;
    border-color: #365f9f !important;
}

body.app-page.dark :is(
    .button-primary,
    .profile-save-button,
    .article-catalog-button,
    .import-button,
    .simulation-open
):hover:not(:disabled):not([aria-disabled="true"]) {
    color: #a9c2eb !important;
    background: #2b2d31 !important;
    border-color: #6686bd !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .2) !important;
}

body.app-page.dark :is(
    .button-secondary,
    .button-ghost,
    .article-catalog-reset
):hover:not(:disabled):not([aria-disabled="true"]) {
    color: #a9c2eb !important;
    background: #35373d !important;
    border-color: #6686bd !important;
}

body.app-page :is(
    button,
    summary.button,
    a.button,
    a[class*="button"],
    a[role="button"],
    .article-catalog-reset,
    .simulation-open
):not(:disabled):not([aria-disabled="true"]):active,
body.app-page :is(
    button,
    summary.button,
    a.button,
    a[class*="button"],
    a[role="button"],
    .article-catalog-reset,
    .simulation-open
).is-button-pressing {
    filter: none !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .14) !important;
    transform: translateY(1px) scale(.99) !important;
    transition-duration: .06s !important;
}

body.app-page.app-awaiting-load > :is(.layout, .customer-projection-bar) {
    visibility: hidden;
}

/*
|--------------------------------------------------------------------------
| Seitenwechsel – robuste Ladeleiste ohne Browser-View-Transition
|--------------------------------------------------------------------------
*/

.page-transition-loader {
    position: fixed;
    inset: 0;
    z-index: 120000;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity .12s ease,
        visibility 0s linear .12s;
}

body.app-page:is(.app-awaiting-load, .app-transitioning) .page-transition-loader {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

body.app-page.app-transitioning {
    overflow: hidden;
    cursor: progress;
}

.page-transition-progress {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    overflow: hidden;
    background: rgba(105, 183, 232, .22);
    box-shadow: 0 1px 5px rgba(83, 170, 224, .14);
}

.page-transition-progress::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 34%;
    background: linear-gradient(
        90deg,
        transparent,
        #9ed8fb 18%,
        #54b5ef 58%,
        #8ed1f8 82%,
        transparent
    );
    box-shadow: 0 0 9px rgba(70, 174, 237, .48);
    transform: translateX(-105%);
    animation: page-transition-bar 1.15s cubic-bezier(.45, 0, .25, 1) infinite;
}

body.app-page.dark .page-transition-loader {
    background: transparent;
}

body.app-page.dark .page-transition-progress {
    background: rgba(112, 193, 242, .17);
}

body.app-page.dark .page-transition-progress::after {
    background: linear-gradient(
        90deg,
        transparent,
        #a9ddfb 18%,
        #65c1f5 58%,
        #9ad9fb 82%,
        transparent
    );
    box-shadow: 0 0 9px rgba(101, 193, 245, .36);
}

@keyframes page-transition-bar {
    to {
        transform: translateX(400%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-transition-progress::after {
        width: 100%;
        opacity: .62;
        transform: none;
        animation: none;
    }
}

/*
|--------------------------------------------------------------------------
| Dark mode – Corporate-blue contrast system
|--------------------------------------------------------------------------
| Clear canvas, surface and raised-control levels keep dense pages legible.
*/

body.app-page.dark {
    scrollbar-color: #5b5d65 #1e1f22;
}

body.app-page.dark ::selection {
    color: #ffffff;
    background: rgba(17, 65, 148, .72);
}

body.app-page.dark *::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

body.app-page.dark *::-webkit-scrollbar-track {
    background: #1e1f22;
}

body.app-page.dark *::-webkit-scrollbar-thumb {
    background: #4e5058;
    border: 3px solid #1e1f22;
    border-radius: 999px;
}

body.app-page.dark *::-webkit-scrollbar-thumb:hover {
    background: #6d6f78;
}

body.app-page.dark .sidebar {
    background: linear-gradient(180deg, var(--app-sidebar-soft), var(--app-sidebar) 42%);
    border-right: 0;
    box-shadow: 12px 0 34px rgba(0, 0, 0, .24);
    scrollbar-color: #4e5058 transparent;
}

body.app-page.dark .sidebar::-webkit-scrollbar {
    width: 6px;
}

body.app-page.dark .sidebar::-webkit-scrollbar-track {
    background: transparent;
}

body.app-page.dark .sidebar::-webkit-scrollbar-thumb {
    background: #4e5058;
    border: 0;
    border-radius: 999px;
}

body.app-page.dark .sidebar::-webkit-scrollbar-thumb:hover {
    background: #6d6f78;
}

body.app-page.dark .logo {
    background: linear-gradient(180deg, rgba(30, 31, 34, .99) 76%, rgba(30, 31, 34, 0));
}

body.app-page.dark .nav-title {
    color: #949ba4;
}

body.app-page.dark .nav-section a {
    color: #b5bac1;
}

body.app-page.dark .nav-section a i,
body.app-page.dark .nav-link-copy small {
    color: #949ba4;
}

body.app-page.dark .nav-section a:hover {
    color: #f2f3f5;
    background: #35373c;
    border-color: #41434a;
}

body.app-page.dark .nav-section a.active {
    color: #ffffff;
    background: var(--app-selected);
    border-color: #5b5d65;
    box-shadow: inset 3px 0 0 #2f6fc8, 0 5px 15px rgba(0, 0, 0, .16);
}

body.app-page.dark .nav-section a.active i,
body.app-page.dark .nav-section a.active .nav-link-copy small {
    color: #dbdee1;
}

body.app-page.dark .nav-section .logout-link {
    color: rgba(255, 188, 188, .90);
}

body.app-page.dark .nav-section .logout-link:hover {
    color: #ffd3d3;
    background: rgba(212, 71, 71, .16);
    border-color: rgba(255, 151, 151, .14);
}

body.app-page.dark .nav-section .logout-link.is-projection-disabled,
body.app-page.dark .nav-section .logout-link.is-projection-disabled:hover,
body.app-page.dark .nav-section .logout-link.is-projection-disabled:focus-visible {
    color: rgba(255, 188, 188, .58);
    background: transparent;
    border-color: transparent;
}

body.app-page.dark .user-menu-dropdown nav .user-menu-logout.is-projection-disabled,
body.app-page.dark .user-menu-dropdown nav .user-menu-logout.is-projection-disabled:hover,
body.app-page.dark .user-menu-dropdown nav .user-menu-logout.is-projection-disabled:focus-visible {
    color: rgba(255, 164, 164, .62);
    background: transparent;
}

body.app-page.dark .topbar {
    background: rgba(35, 36, 40, .94);
    border-bottom-color: #41434a;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .34);
}

body.app-page.dark .topbar-control,
body.app-page.dark .user-info {
    background: #2b2d31;
    border-color: #4e5058;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .22);
}

body.app-page.dark .topbar-control:hover,
body.app-page.dark .user-info:hover {
    background: #383a40;
    border-color: #6d6f78;
}

body.app-page.dark .topbar-control-icon {
    color: #91a2ba;
    background: rgba(30, 55, 87, .72);
}

/* Im Darkmode ersetzt ein schlichtes Symbol den farbigen Chat-Avatar. */
body.app-page.dark .topbar-chat-control .topbar-control-icon {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    color: #f5f5f5;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.app-page.dark .topbar-chat-control .topbar-chat-symbol {
    display: grid;
    place-items: center;
    color: inherit;
    font-size: 18px;
    filter: none;
}

body.app-page.dark .topbar-chat-control:hover .topbar-control-icon {
    color: #fff;
    background: transparent;
}

body.app-page.dark .topbar-chat-control .support-chat-unread-badge {
    border-color: #2b2d31;
}

body.app-page.dark :is(.user-menu-dropdown, .command-palette-dialog, .user-modal-dialog, .customer-view-dialog, .audit-dialog) {
    background: #313338;
    border-color: #5b5d65;
    box-shadow: 0 24px 65px rgba(0, 0, 0, .48);
}

body.app-page.dark :is(.card, .company-card, .dashboard-stat-card, .dashboard-action-card, .dashboard-list-card, .profile-card, .profile-summary, .profile-save-box, .user-card, .import-card) {
    background: var(--app-surface);
    border-color: var(--app-border);
    box-shadow: var(--app-shadow-sm);
}

body.app-page.dark :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
body.app-page.dark .customer-detail-group,
body.app-page.dark .module-permission-option {
    color: var(--app-text);
    background: #1e1f22;
    border-color: #5b5d65;
}

body.app-page.dark :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):hover {
    border-color: #6d6f78;
}

body.app-page.dark :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):focus {
    background: #232428;
    border-color: #4f78bd;
    box-shadow: 0 0 0 3px rgba(17, 65, 148, .26);
}

body.app-page.dark :is(button, a, input, select, textarea):focus-visible {
    outline-color: rgba(134, 168, 224, .62);
}

body.app-page.dark :is(input, textarea)::placeholder {
    color: #949ba4;
    opacity: 1;
}

body.app-page.dark select option {
    color: var(--app-text);
    background: #2b2d31;
}

body.app-page.dark :is(input, select, textarea, button):disabled {
    opacity: .58;
}

body.app-page.dark input[type="checkbox"],
body.app-page.dark input[type="radio"] {
    accent-color: #114194;
}

body.app-page.dark .button-primary,
body.app-page.dark .profile-save-button {
    color: #ffffff;
    background: linear-gradient(180deg, #285bac, #114194);
    border-color: #4f78bd;
    box-shadow: 0 7px 18px rgba(7, 31, 76, .34), inset 0 1px 0 rgba(255, 255, 255, .16);
}

body.app-page.dark .button-primary:hover,
body.app-page.dark .profile-save-button:hover {
    background: linear-gradient(180deg, #114194, #0d3477);
    border-color: #6f92cf;
    box-shadow: 0 9px 24px rgba(7, 31, 76, .42);
}

body.app-page.dark :is(.button-secondary, .button-ghost) {
    color: var(--app-text);
    background: #2b2d31;
    border-color: #4e5058;
}

body.app-page.dark :is(.button-secondary, .button-ghost):hover {
    background: #404249;
    border-color: #6d6f78;
}

body.app-page.dark :is(table, .table-card, .audit-table-card) {
    border-color: var(--app-border);
}

body.app-page.dark table th {
    color: #b5bac1;
    background: #25262b;
    border-color: #41434a;
}

body.app-page.dark table td {
    color: #dbdee1;
    border-color: #41434a;
}

body.app-page.dark table tbody tr:hover {
    background: #35373c;
}

.notice-warning {
    color: #754600;
    background: #fff6dc;
    border-color: #efc56f;
}

.notice-warning :is(a, i) {
    color: #754600;
}

.notice-warning a {
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.app-page.dark :is(.notice-success, .alert-success) {
    color: #a9f5c8;
    background: rgba(35, 165, 90, .16);
    border-color: rgba(87, 242, 135, .42);
}

body.app-page.dark .notice-warning {
    color: #ffd68a;
    background: rgba(217, 137, 0, .14);
    border-color: rgba(232, 167, 46, .42);
}

body.app-page.dark .notice-warning :is(a, i) {
    color: #ffe1a8;
}

body.app-page.dark :is(.notice-error, .alert-error) {
    color: #ffb3b5;
    background: rgba(242, 63, 66, .16);
    border-color: rgba(255, 122, 124, .44);
}

body.app-page.dark .notice-info {
    color: #91a2ba;
    background: rgba(30, 55, 87, .54);
    border-color: rgba(112, 135, 166, .34);
}

body.app-page.dark .topbar-customer-context,
body.app-page.dark .module-permission-option:has(input:checked),
body.app-page.dark .module-permission-option:hover {
    border-color: rgba(134, 168, 224, .38);
}

body.app-page.dark :is(.dashboard-status, .customer-status).is-active {
    color: #a9f5c8;
    background: rgba(35, 165, 90, .18);
}

body.app-page.dark :is(.dashboard-status, .customer-status).is-inactive {
    color: #ffb3b5;
    background: rgba(242, 63, 66, .16);
}

body.app-page.dark .user-management {
    --users-primary: #7d8fa8;
    --users-primary-dark: #667b98;
    --users-success: #a9f5c8;
    --users-success-bg: rgba(35, 165, 90, .18);
    --users-danger: #ffb3b5;
    --users-danger-bg: rgba(242, 63, 66, .16);
    --users-warning: #fee75c;
}

body.app-page.dark :is(.role-admin, .danger-action) {
    color: #ffb3b5;
    background: rgba(242, 63, 66, .16);
    border-color: rgba(255, 122, 124, .36);
}

body.app-page.dark :is(.role-mitarbeiter, .role-sachbearbeiter) {
    color: #b5caf0;
    background: rgba(17, 65, 148, .18);
}

body.app-page.dark .role-vorgesetzter {
    color: #fee75c;
    background: rgba(254, 231, 92, .14);
}

body.app-page.dark .role-kunde {
    color: #a9f5c8;
    background: rgba(35, 165, 90, .18);
}

body.app-page.dark .role-besucher {
    color: #c3d5f5;
    background: rgba(17, 65, 148, .18);
}

body.app-page.dark .status-toggle.is-inactive {
    color: #b5bac1;
    background: #404249;
}

body.app-page.dark :is(.customer-toolbar, .user-toolbar, .user-modal-dialog > header, .table-footer, .user-form footer) {
    border-color: var(--app-border);
}

body.app-page.dark :is(.table-footer, .user-form footer) {
    background: var(--app-surface-muted);
}

body.app-page.dark .check-option {
    color: var(--app-text);
    background: var(--app-surface-muted);
    border-color: var(--app-border-strong);
}

body.app-page.dark .check-option strong,
body.app-page.dark .user-form label > span {
    color: var(--app-text);
}

body.app-page.dark hr {
    border-color: #41434a;
}

/* Kunden bearbeiten: breite, zentrale Desktop-Ansicht */
.customer-edit-modal {
    padding: clamp(12px, 2vw, 28px);
}

.customer-edit-dialog {
    width: min(1320px, calc(100vw - 48px));
    max-width: 100%;
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #dce4ee;
    border-radius: 20px;
}

.customer-edit-header {
    flex: 0 0 auto;
    align-items: center !important;
    padding: 18px 24px !important;
    background: linear-gradient(135deg, #ffffff 0%, #f6f9fd 100%);
}

.customer-edit-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
}

.customer-edit-heading-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #3f9b68;
    border-radius: 12px;
    font-size: 16px;
}

.customer-edit-heading-copy {
    min-width: 0;
}

.customer-edit-header h2 {
    margin: 2px 0 0;
    font-size: clamp(20px, 2vw, 25px);
}

.customer-edit-heading-copy > span {
    display: block;
    margin-top: 4px;
    color: #748196;
    font-size: 12px;
}

.customer-edit-form {
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 auto;
    padding: 18px 22px 0;
    overscroll-behavior: contain;
}

.customer-edit-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.customer-edit-card {
    min-width: 0;
    padding: 16px 18px 18px;
    background: #fff;
    border: 1px solid #dfe5ec;
    border-radius: 16px;
    box-shadow: 0 7px 20px rgba(29, 39, 53, .05);
}

.customer-edit-card[hidden] {
    display: none !important;
}

.customer-edit-card-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 16px;
}

.customer-edit-card .customer-wizard-step-heading {
    margin: 0 0 2px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e7ebf0;
}

.customer-edit-card-grid label {
    min-width: 0;
}

.customer-edit-grid input,
.customer-edit-grid select {
    min-width: 0;
    height: 44px;
}

.customer-span-2 {
    grid-column: span 2;
}

.customer-span-4 {
    grid-column: span 4;
}

.customer-active-inline {
    min-width: 0;
    min-height: 68px;
    margin: 0;
    align-self: end;
    align-items: center;
    background: #f8fafc;
}

.customer-active-inline > span {
    margin: 0 !important;
}

.customer-active-inline small {
    margin-top: 2px;
}

.customer-password-field > span {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
}

.customer-password-field > span small {
    margin: 0;
    color: #8793a4;
    font-weight: 500;
}

.customer-edit-form > footer {
    align-items: center;
    margin: 18px -22px 0;
    padding: 14px 22px;
}

.customer-modal-error {
    flex: 0 0 auto;
    margin: 0 0 14px;
}

.customer-modal-error > i {
    margin-top: 2px;
}

.customer-modal-error strong {
    display: block;
    margin-bottom: 3px;
}

.customer-modal-error ul {
    margin: 0;
    padding-left: 18px;
}

.customer-modal-error li + li {
    margin-top: 3px;
}

.customer-edit-hint {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: auto;
    color: #728096;
    font-size: 11px;
    font-weight: 700;
}

.customer-edit-hint i {
    color: #114194;
}

.customer-edit-form .form-wizard-progress[hidden],
.customer-edit-form .form-wizard-footer-status[hidden],
.customer-edit-form [data-customer-step][hidden],
.customer-edit-form [data-customer-step-heading][hidden],
.customer-edit-form .form-wizard-back[hidden],
.customer-edit-form .form-wizard-next[hidden],
.customer-edit-form [data-customer-save][hidden] {
    display: none !important;
}

.customer-wizard-progress {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: auto minmax(36px, 1fr) auto minmax(36px, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 0 0 16px;
}

.customer-wizard-progress > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #7b8798;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}

.customer-wizard-progress b {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: #6f7d90;
    background: #edf1f6;
    border: 1px solid #dce4ee;
    border-radius: 50%;
    font-size: 10px;
}

.customer-wizard-progress em {
    font-style: normal;
}

.customer-wizard-progress > i {
    height: 1px;
    background: #dce4ee;
}

.customer-wizard-progress > span.is-active {
    color: #172033;
}

.customer-wizard-progress > span.is-active b,
.customer-wizard-progress > span.is-complete b {
    color: #fff;
    background: #114194;
    border-color: #114194;
}

.customer-wizard-progress > span.is-complete + i {
    background: rgba(17, 65, 148, .45);
}

.customer-wizard-step-heading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 2px;
}

.customer-wizard-step-heading > span {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    color: #114194;
    background: #edf4fd;
    border-radius: 11px;
}

.customer-wizard-step-heading h3 {
    margin: 0;
    color: #172033;
    font-size: 15px;
}

.customer-wizard-step-heading p {
    margin: 3px 0 0;
    color: #748196;
    font-size: 11px;
}

.customer-edit-form[data-wizard-mode="create"] {
    overflow: hidden;
}

.customer-edit-form[data-wizard-mode="create"].has-form-errors {
    overflow-y: auto;
}

.customer-edit-form[data-wizard-mode="create"] .customer-edit-grid {
    align-content: start;
    flex: 1 1 auto;
    overflow: hidden;
}

.customer-edit-form[data-wizard-mode="create"] .customer-edit-card {
    padding: 16px 18px 18px;
}

.customer-edit-form[data-wizard-mode="create"] .customer-edit-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-edit-form[data-wizard-mode="create"] .customer-create-half {
    grid-column: span 1;
}

.customer-edit-form[data-wizard-mode="create"] .customer-create-full,
.customer-edit-form[data-wizard-mode="create"] .customer-password-field {
    grid-column: span 2;
}

.customer-edit-form[data-wizard-mode="edit"] .customer-wizard-step-heading {
    display: flex !important;
    margin: 1px 0 0;
}

.customer-edit-form[data-wizard-mode="edit"] :is(
    .customer-wizard-step-heading[data-customer-step-heading="2"],
    .customer-wizard-step-heading[data-customer-step-heading="3"]
) {
    margin-top: 1px;
}

.customer-edit-form[data-wizard-mode="edit"] .customer-wizard-step-heading > span {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 9px;
}

.customer-edit-form[data-wizard-mode="edit"] .customer-wizard-step-heading p {
    display: none;
}

.customer-footer-actions {
    display: flex;
    gap: 9px;
    margin-left: auto;
}

.customer-edit-form .form-wizard-footer-status {
    color: #728096;
    font-size: 11px;
    font-weight: 650;
}

.customer-edit-form .form-wizard-footer-status strong {
    color: #114194;
}

body.app-page.dark .customer-edit-header {
    background: var(--app-surface-muted);
}

body.app-page.dark .customer-edit-heading-copy > span,
body.app-page.dark .customer-edit-hint,
body.app-page.dark .customer-password-field > span small {
    color: var(--app-text-muted);
}

body.app-page.dark .customer-active-inline {
    background: var(--app-surface-muted);
}

body.app-page.dark .customer-edit-card {
    background: var(--app-surface);
    border-color: var(--app-border);
    box-shadow: none;
}

body.app-page.dark .customer-edit-card .customer-wizard-step-heading {
    border-bottom-color: var(--app-border);
}

body.app-page.dark .customer-wizard-progress > span,
body.app-page.dark .customer-wizard-step-heading p,
body.app-page.dark .customer-edit-form .form-wizard-footer-status {
    color: var(--app-text-muted);
}

body.app-page.dark .customer-wizard-progress > span.is-active,
body.app-page.dark .customer-wizard-step-heading h3 {
    color: var(--app-text);
}

body.app-page.dark .customer-wizard-progress b {
    color: var(--app-text-muted);
    background: var(--app-surface-muted);
    border-color: var(--app-border-strong);
}

body.app-page.dark .customer-wizard-progress > span.is-active b,
body.app-page.dark .customer-wizard-progress > span.is-complete b {
    color: #eef5ff;
    background: #244d83;
    border-color: #3e6496;
}

body.app-page.dark .customer-wizard-progress > i {
    background: var(--app-border-strong);
}

body.app-page.dark .customer-wizard-step-heading > span {
    color: #9aacc5;
    background: #1f385c;
}

body.app-page.dark .customer-edit-form .form-wizard-footer-status strong {
    color: #9aacc5;
}

@media (max-width: 820px) {
    .customer-edit-dialog {
        width: calc(100vw - 28px);
    }

    .customer-edit-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .customer-span-4 {
        grid-column: span 2;
    }
}

@media (max-width: 620px) {
    .customer-edit-modal {
        padding: 0;
    }

    .customer-edit-dialog {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    .customer-edit-header {
        padding: 14px 16px !important;
    }

    .customer-edit-heading-copy > span {
        display: none;
    }

    .customer-edit-form {
        padding: 14px 14px 0;
    }

    .customer-edit-form[data-wizard-mode="create"] {
        overflow-y: auto;
    }

    .customer-edit-card-grid {
        grid-template-columns: 1fr;
    }

    .customer-span-2,
    .customer-span-4 {
        grid-column: auto;
    }

    .customer-edit-form[data-wizard-mode="create"] .customer-create-half,
    .customer-edit-form[data-wizard-mode="create"] .customer-create-full,
    .customer-edit-form[data-wizard-mode="create"] .customer-password-field {
        grid-column: auto;
    }

    .customer-wizard-progress {
        gap: 7px;
    }

    .customer-wizard-progress em {
        display: none;
    }

    .customer-password-field > span {
        display: block !important;
    }

    .customer-password-field > span small {
        margin-top: 4px;
    }

    .customer-edit-form > footer {
        margin: 16px -14px 0;
        padding: 12px 14px;
    }

    .customer-edit-hint {
        display: none;
    }

    .customer-edit-form > footer {
        gap: 8px;
    }

    .customer-footer-actions {
        width: 100%;
        justify-content: flex-end;
    }
}


/* Corporate-Blau: Darkmode-Abstufungen */
.dark .stat-icon-violet,
body.app-page.dark .stat-icon-violet {
    color: #91a2ba;
    background: rgba(30, 55, 87, .72);
    border: 1px solid #385274;
}

.dark .two-factor.is-enabled,
body.app-page.dark .two-factor.is-enabled {
    color: #91a2ba;
}

.dark .role-besucher,
body.app-page.dark .role-besucher {
    color: #c3d5f5;
    background: rgba(17, 65, 148, .32);
}

/* Hochwertiges Feedback für zentrale Portalaktionen */
body.app-page :is(
    .button-primary,
    .button-secondary,
    .button-ghost,
    .profile-save-button,
    .article-catalog-button,
    .article-catalog-reset,
    .import-button,
    .simulation-open
) {
    --button-pointer-x: 50%;
    --button-pointer-y: 50%;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transform: translateZ(0);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .25s cubic-bezier(.22, 1, .36, 1),
        transform .25s cubic-bezier(.22, 1, .36, 1),
        filter .2s ease;
}

body.app-page :is(
    .button-primary,
    .profile-save-button,
    .article-catalog-button,
    .import-button,
    .simulation-open
)::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -60% -35%;
    background: linear-gradient(
        112deg,
        transparent 35%,
        rgba(255, 255, 255, .08) 43%,
        rgba(255, 255, 255, .48) 50%,
        rgba(255, 255, 255, .08) 57%,
        transparent 65%
    );
    transform: translateX(-115%) rotate(3deg);
    transition: transform .72s cubic-bezier(.16, 1, .3, 1);
    mix-blend-mode: soft-light;
    pointer-events: none;
}

body.app-page :is(
    .button-primary,
    .profile-save-button,
    .article-catalog-button,
    .import-button,
    .simulation-open
)::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    opacity: 0;
    background: radial-gradient(
        circle at var(--button-pointer-x) var(--button-pointer-y),
        rgba(255, 255, 255, .34) 0,
        rgba(255, 255, 255, .12) 24%,
        transparent 58%
    );
    transition: opacity .2s ease;
    pointer-events: none;
}

body.app-page :is(.button-secondary, .button-ghost, .article-catalog-reset)::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    opacity: 0;
    background: radial-gradient(
        circle at var(--button-pointer-x) var(--button-pointer-y),
        rgba(17, 65, 148, .15) 0,
        rgba(17, 65, 148, .06) 30%,
        transparent 62%
    );
    transition: opacity .2s ease;
    pointer-events: none;
}

body.app-page .article-catalog-reset {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    color: var(--app-text);
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
}

body.app-page :is(
    .button-primary,
    .button-secondary,
    .button-ghost,
    .profile-save-button,
    .article-catalog-button,
    .article-catalog-reset,
    .import-button,
    .simulation-open
):focus-visible {
    outline: 3px solid rgba(17, 65, 148, .3);
    outline-offset: 3px;
}

body.app-page :is(
    .button-primary,
    .button-secondary,
    .button-ghost,
    .profile-save-button,
    .article-catalog-button,
    .article-catalog-reset,
    .import-button,
    .simulation-open
):active:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(1px) scale(.975);
    transition-duration: .08s;
}

body.app-page :is(
    .button-primary,
    .button-secondary,
    .button-ghost,
    .profile-save-button,
    .article-catalog-button,
    .article-catalog-reset,
    .import-button,
    .simulation-open
) :is(i, svg) {
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}

.button-feedback-ripple {
    position: absolute;
    z-index: 0;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    pointer-events: none;
    animation: button-feedback-ripple .62s cubic-bezier(.16, 1, .3, 1) forwards;
}

body.app-page :is(.button-secondary, .button-ghost, .article-catalog-reset) .button-feedback-ripple {
    background: rgba(17, 65, 148, .2);
}

@keyframes button-feedback-ripple {
    from {
        opacity: .75;
        transform: scale(0);
    }

    to {
        opacity: 0;
        transform: scale(18);
    }
}

@media (hover: hover) and (pointer: fine) {
    body.app-page :is(
        .button-primary,
        .profile-save-button,
        .article-catalog-button,
        .import-button,
        .simulation-open
    ):hover:not(:disabled):not([aria-disabled="true"]) {
        filter: saturate(1.08) brightness(1.04);
        box-shadow:
            0 12px 26px rgba(17, 65, 148, .28),
            0 3px 8px rgba(17, 65, 148, .18),
            inset 0 1px 0 rgba(255, 255, 255, .28);
        transform: translateY(-3px) scale(1.015);
    }

    body.app-page :is(
        .button-secondary,
        .button-ghost,
        .article-catalog-reset
    ):hover:not(:disabled):not([aria-disabled="true"]) {
        color: var(--app-accent-strong);
        border-color: color-mix(in srgb, var(--app-accent-fill) 42%, var(--app-border-strong));
        box-shadow:
            0 9px 20px rgba(20, 42, 73, .12),
            inset 0 1px 0 rgba(255, 255, 255, .55);
        transform: translateY(-2px);
    }

    body.app-page :is(
        .button-primary,
        .profile-save-button,
        .article-catalog-button,
        .import-button,
        .simulation-open
    ):hover::before {
        transform: translateX(115%) rotate(3deg);
    }

    body.app-page :is(
        .button-primary,
        .button-secondary,
        .button-ghost,
        .profile-save-button,
        .article-catalog-button,
        .article-catalog-reset,
        .import-button,
        .simulation-open
    ):hover::after {
        opacity: 1;
    }

    body.app-page :is(
        .button-primary,
        .button-secondary,
        .button-ghost,
        .profile-save-button,
        .article-catalog-button,
        .article-catalog-reset,
        .import-button,
        .simulation-open
    ):hover :is(i, svg) {
        transform: translateX(2px) scale(1.08);
    }
}

body.app-page.dark :is(.button-secondary, .button-ghost, .article-catalog-reset)::after {
    background: radial-gradient(
        circle at var(--button-pointer-x) var(--button-pointer-y),
        rgba(145, 178, 232, .18) 0,
        rgba(145, 178, 232, .07) 32%,
        transparent 64%
    );
}

body.app-page.dark .article-catalog-reset {
    color: var(--app-text);
    background: #2b2d31;
    border-color: #4e5058;
}

@media (prefers-reduced-motion: reduce) {
    body.app-page :is(
        .button-primary,
        .button-secondary,
        .button-ghost,
        .profile-save-button,
        .article-catalog-button,
        .article-catalog-reset,
        .import-button,
        .simulation-open
    ) {
        transition: color .15s ease, background-color .15s ease, border-color .15s ease;
    }

    body.app-page :is(
        .button-primary,
        .button-secondary,
        .button-ghost,
        .profile-save-button,
        .article-catalog-button,
        .article-catalog-reset,
        .import-button,
        .simulation-open
    ):hover,
    body.app-page :is(
        .button-primary,
        .button-secondary,
        .button-ghost,
        .profile-save-button,
        .article-catalog-button,
        .article-catalog-reset,
        .import-button,
        .simulation-open
    ):active {
        transform: none;
    }

    body.app-page :is(
        .button-primary,
        .profile-save-button,
        .article-catalog-button,
        .import-button,
        .simulation-open
    )::before,
    .button-feedback-ripple {
        display: none;
    }
}

/* Finale Buttonregeln: kein Glanz, keine Unterstreichung, kein Seiten-Reveal */
.app-page .content > * {
    animation: none !important;
}

body.app-page :is(
    button,
    summary.button,
    a.button,
    a[class*="button"],
    a[role="button"],
    .article-catalog-reset,
    .simulation-open
),
body.app-page :is(
    button,
    summary.button,
    a.button,
    a[class*="button"],
    a[role="button"],
    .article-catalog-reset,
    .simulation-open
):is(:hover, :focus, :focus-visible, :active, :visited) {
    text-decoration: none !important;
}

body.app-page :is(
    .button-primary,
    .button-secondary,
    .button-ghost,
    .profile-save-button,
    .article-catalog-button,
    .article-catalog-reset,
    .import-button,
    .simulation-open
)::before,
body.app-page :is(
    .button-primary,
    .button-secondary,
    .button-ghost,
    .profile-save-button,
    .article-catalog-button,
    .article-catalog-reset,
    .import-button,
    .simulation-open
)::after,
.button-feedback-ripple {
    display: none !important;
}

@media (hover: hover) and (pointer: fine) {
    body.app-page :is(
        .button-primary,
        .profile-save-button,
        .article-catalog-button,
        .import-button,
        .simulation-open
    ):hover:not(:disabled):not([aria-disabled="true"]) {
        filter: none !important;
        background: #0d3477 !important;
        border-color: #0d3477 !important;
        box-shadow: 0 7px 15px rgba(17, 65, 148, .2) !important;
        transform: translateY(-1px) !important;
    }

    body.app-page :is(
        .button-secondary,
        .button-ghost,
        .article-catalog-reset
    ):hover:not(:disabled):not([aria-disabled="true"]) {
        color: var(--app-text) !important;
        background: var(--app-surface-solid) !important;
        border-color: var(--app-border-strong) !important;
        box-shadow: 0 5px 12px rgba(20, 42, 73, .1) !important;
        transform: translateY(-1px) !important;
    }

    body.app-page :is(
        .button-primary,
        .button-secondary,
        .button-ghost,
        .profile-save-button,
        .article-catalog-button,
        .article-catalog-reset,
        .import-button,
        .simulation-open
    ):hover :is(i, svg) {
        transform: none !important;
    }
}

body.app-page.dark :is(
    .button-primary,
    .profile-save-button,
    .article-catalog-button,
    .import-button,
    .simulation-open
):hover:not(:disabled):not([aria-disabled="true"]) {
    background: #0d3477 !important;
    border-color: #365f9f !important;
    box-shadow: 0 7px 15px rgba(0, 0, 0, .24) !important;
}

body.app-page.dark :is(
    .button-secondary,
    .button-ghost,
    .article-catalog-reset
):hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--app-text) !important;
    background: #35373d !important;
    border-color: #666973 !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .2) !important;
}

body.app-page :is(
    button,
    summary.button,
    a.button,
    a[class*="button"],
    a[role="button"],
    .article-catalog-reset,
    .simulation-open
):not(:disabled):not([aria-disabled="true"]):active,
body.app-page :is(
    button,
    summary.button,
    a.button,
    a[class*="button"],
    a[role="button"],
    .article-catalog-reset,
    .simulation-open
).is-button-pressing {
    filter: none !important;
    box-shadow:
        inset 0 3px 7px rgba(0, 0, 0, .22),
        0 1px 2px rgba(0, 0, 0, .08) !important;
    transform: translateY(2px) scale(.965) !important;
    transition-duration: .07s !important;
}

/* Abschließende Vereinheitlichung der zentralen Aktionsbuttons */
body.app-page :is(
    .button-primary,
    .button-secondary,
    .button-ghost,
    .profile-save-button,
    .article-catalog-button,
    .article-catalog-reset,
    .import-button,
    .simulation-open
) {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    line-height: 1;
    text-decoration: none !important;
}

body.app-page :is(
    .button-primary,
    .profile-save-button,
    .article-catalog-button,
    .import-button,
    .simulation-open
) {
    color: #fff !important;
    background: #114194 !important;
    border-color: #114194 !important;
    box-shadow: 0 5px 12px rgba(17, 65, 148, .18) !important;
}

body.app-page :is(.button-secondary, .button-ghost, .article-catalog-reset) {
    color: var(--app-text) !important;
    background: var(--app-surface-solid) !important;
    border-color: var(--app-border-strong) !important;
    box-shadow: 0 2px 5px rgba(20, 42, 73, .06) !important;
}

@media (hover: hover) and (pointer: fine) {
    body.app-page :is(
        .button-primary,
        .profile-save-button,
        .article-catalog-button,
        .import-button,
        .simulation-open
    ):hover:not(:disabled):not([aria-disabled="true"]) {
        color: #114194 !important;
        background: var(--app-surface-solid) !important;
        border-color: #114194 !important;
        box-shadow: 0 6px 14px rgba(17, 65, 148, .14) !important;
        transform: translateY(-1px) !important;
    }

    body.app-page :is(.button-secondary, .button-ghost, .article-catalog-reset):hover:not(:disabled):not([aria-disabled="true"]) {
        color: #114194 !important;
        background: var(--app-accent-soft) !important;
        border-color: #114194 !important;
        box-shadow: 0 5px 11px rgba(17, 65, 148, .1) !important;
        transform: translateY(-1px) !important;
    }
}

body.app-page.dark :is(
    .button-primary,
    .profile-save-button,
    .article-catalog-button,
    .import-button,
    .simulation-open
):hover:not(:disabled):not([aria-disabled="true"]) {
    color: #a9c2eb !important;
    background: #2b2d31 !important;
    border-color: #6686bd !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .2) !important;
}

body.app-page.dark :is(.button-secondary, .button-ghost, .article-catalog-reset):hover:not(:disabled):not([aria-disabled="true"]) {
    color: #a9c2eb !important;
    background: #35373d !important;
    border-color: #6686bd !important;
}

body.app-page :is(
    button,
    summary.button,
    a.button,
    a[class*="button"],
    a[role="button"],
    .article-catalog-reset,
    .simulation-open
):not(:disabled):not([aria-disabled="true"]):active,
body.app-page :is(
    button,
    summary.button,
    a.button,
    a[class*="button"],
    a[role="button"],
    .article-catalog-reset,
    .simulation-open
).is-button-pressing {
    filter: none !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .14) !important;
    transform: translateY(1px) scale(.99) !important;
    transition-duration: .06s !important;
}
body.app-page .row-copy {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    display: inline-grid;
    place-items: center;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--app-accent-strong);
    background: var(--app-accent-soft);
    border: 1px solid color-mix(in srgb, var(--app-accent-fill) 25%, var(--app-border));
    border-radius: 9px;
    box-shadow: none;
    font-size: 12px;
}

body.app-page .row-copy:hover {
    color: #fff;
    background: var(--app-accent-fill);
    border-color: var(--app-accent-fill);
}

body.app-page .row-copy.is-copied {
    color: #16825d;
    border-color: color-mix(in srgb, #16825d 35%, var(--app-border));
}

@media (hover: hover) and (pointer: fine) {
    body.app-page :is(.button-secondary, .button-ghost, .article-catalog-reset):hover:not(:disabled):not([aria-disabled="true"]) {
        color: var(--app-text) !important;
        background: var(--app-surface-solid) !important;
        border-color: color-mix(in srgb, var(--app-text) 42%, var(--app-border-strong)) !important;
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-text) 16%, transparent), 0 3px 8px rgba(20, 42, 73, .08) !important;
        transform: none !important;
    }
}

body.app-page.dark :is(.button-secondary, .button-ghost, .article-catalog-reset):hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--app-text) !important;
    background: var(--app-surface-solid) !important;
    border-color: #747982 !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) !important;
}

/* Einheitlicher, eindeutig erkennbarer Ausgang für schließbare Fenster. */
body.app-page :is(.window-close-button, .modal-close, [data-dialog-close]) {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    flex: 0 0 40px !important;
    display: inline-grid !important;
    place-items: center !important;
    padding: 0 !important;
    color: #fff !important;
    background: #e21f32 !important;
    border: 1px solid #e21f32 !important;
    border-radius: 11px !important;
    box-shadow: 0 5px 13px rgba(190, 22, 43, .2) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

@media (hover: hover) and (pointer: fine) {
    body.app-page :is(.window-close-button, .modal-close, [data-dialog-close]):hover {
        color: #e21f32 !important;
        background: var(--app-surface-solid) !important;
        border-color: #e21f32 !important;
        box-shadow: 0 0 0 3px rgba(226, 31, 50, .12) !important;
        transform: none !important;
    }
}

body.app-page :is(.window-close-button, .modal-close, [data-dialog-close]):active {
    color: #fff !important;
    background: #be162b !important;
    border-color: #be162b !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18) !important;
    transform: scale(.97) !important;
}

/* Sekundäre Farbakzente: Blau bleibt die Hauptfarbe, Mint markiert Abschlüsse. */
body.app-page .button-accent-success {
    color: #176447 !important;
    background: #dff4e8 !important;
    border-color: #a9ddc2 !important;
    box-shadow: 0 5px 12px rgba(35, 133, 92, .12) !important;
}

body.app-page .button-accent-passkey {
    color: #155f88 !important;
    background: #e1f3fc !important;
    border-color: #acd8eb !important;
    box-shadow: 0 5px 12px rgba(39, 127, 166, .11) !important;
}

body.app-page .button-accent-authenticator {
    color: #815415 !important;
    background: #fff0d5 !important;
    border-color: #e8c88b !important;
    box-shadow: 0 5px 12px rgba(163, 106, 28, .1) !important;
}

@media (hover: hover) and (pointer: fine) {
    body.app-page .button-accent-success:hover:not(:disabled) {
        color: #0f5a3c !important;
        background: #ccebd9 !important;
        border-color: #70c59e !important;
        box-shadow: 0 6px 14px rgba(35, 133, 92, .16) !important;
        transform: none !important;
    }

    body.app-page .button-accent-passkey:hover:not(:disabled) {
        color: #0e557d !important;
        background: #cceaf8 !important;
        border-color: #72b9da !important;
        box-shadow: 0 6px 14px rgba(39, 127, 166, .15) !important;
        transform: none !important;
    }

    body.app-page .button-accent-authenticator:hover:not(:disabled) {
        color: #71470d !important;
        background: #f9e3bc !important;
        border-color: #d9ad60 !important;
        box-shadow: 0 6px 14px rgba(163, 106, 28, .14) !important;
        transform: none !important;
    }
}

body.app-page.dark .button-accent-success {
    color: #bcebd3 !important;
    background: #223f35 !important;
    border-color: #3e715d !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .16) !important;
}

body.app-page.dark .button-accent-passkey {
    color: #b9e4f7 !important;
    background: #203d4d !important;
    border-color: #3f7188 !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .16) !important;
}

body.app-page.dark .button-accent-authenticator {
    color: #f3d39b !important;
    background: #44351f !important;
    border-color: #78603a !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .16) !important;
}

@media (hover: hover) and (pointer: fine) {
    body.app-page.dark .button-accent-success:hover:not(:disabled) {
        color: #d2f4e1 !important;
        background: #2a4e40 !important;
        border-color: #67a98e !important;
    }

    body.app-page.dark .button-accent-passkey:hover:not(:disabled) {
        color: #d6effb !important;
        background: #294b5d !important;
        border-color: #68a5c0 !important;
    }

body.app-page.dark .button-accent-authenticator:hover:not(:disabled) {
        color: #ffe5b6 !important;
        background: #534126 !important;
        border-color: #a68752 !important;
    }
}

/* Semantische Farbkacheln fuer Inhalts-Icons. Sidebar und Buttons bleiben bewusst unberuehrt. */
body.app-page {
    --content-icon-blue-a: #56b8ff;
    --content-icon-blue-b: #187fd4;
    --content-icon-cyan-a: #43c4d5;
    --content-icon-cyan-b: #168ca6;
    --content-icon-orange-a: #ffad5f;
    --content-icon-orange-b: #ed742d;
    --content-icon-violet-a: #9b7cf0;
    --content-icon-violet-b: #6849c7;
    --content-icon-rose-a: #ed7892;
    --content-icon-rose-b: #c94a69;
    --content-icon-green-a: #5cc58b;
    --content-icon-green-b: #288c5d;
    --content-icon-slate-a: #8ba0b8;
    --content-icon-slate-b: #52677f;
    --content-icon-shadow: 0 7px 16px rgba(30, 55, 90, .16), inset 0 1px 0 rgba(255, 255, 255, .28);
}

body.app-page.dark {
    --content-icon-blue-a: #397eb4;
    --content-icon-blue-b: #245781;
    --content-icon-cyan-a: #318797;
    --content-icon-cyan-b: #205f70;
    --content-icon-orange-a: #ae713d;
    --content-icon-orange-b: #754821;
    --content-icon-violet-a: #705da9;
    --content-icon-violet-b: #4b3b79;
    --content-icon-rose-a: #a45468;
    --content-icon-rose-b: #713748;
    --content-icon-green-a: #428661;
    --content-icon-green-b: #2c6045;
    --content-icon-slate-a: #65778b;
    --content-icon-slate-b: #435064;
    --content-icon-shadow: 0 7px 15px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .1);
}

body.app-page .stat-icon,
body.app-page .customer-view-icon,
body.app-page .module-permission-icon {
    color: #fff;
    border-color: transparent;
    box-shadow: var(--content-icon-shadow);
}

body.app-page .stat-icon-blue,
body.app-page .customer-view-icon {
    background: linear-gradient(145deg, var(--content-icon-blue-a), var(--content-icon-blue-b));
}

body.app-page .stat-icon-green {
    background: linear-gradient(145deg, var(--content-icon-green-a), var(--content-icon-green-b));
}

body.app-page .stat-icon-violet,
body.app-page .module-permission-icon {
    background: linear-gradient(145deg, var(--content-icon-violet-a), var(--content-icon-violet-b));
}

body.app-page .customer-wizard-step-heading > span {
    color: #fff;
    border-color: transparent;
    box-shadow: var(--content-icon-shadow);
}

body.app-page .customer-wizard-step-heading[data-customer-step-heading="1"] > span {
    background: linear-gradient(145deg, var(--content-icon-blue-a), var(--content-icon-blue-b));
}

body.app-page .customer-wizard-step-heading[data-customer-step-heading="2"] > span {
    background: linear-gradient(145deg, var(--content-icon-cyan-a), var(--content-icon-cyan-b));
}

body.app-page .customer-wizard-step-heading[data-customer-step-heading="3"] > span {
    background: linear-gradient(145deg, var(--content-icon-orange-a), var(--content-icon-orange-b));
}

body.app-page .customer-edit-heading-icon {
    color: #fff;
    background: linear-gradient(145deg, var(--content-icon-green-a), var(--content-icon-green-b));
    border-color: transparent;
    box-shadow: var(--content-icon-shadow);
}

/* Das Kontomenü bleibt neutral; nur Abmelden behält seine Warnfarbe. */
body.app-page .user-info .topbar-control-icon {
    color: #3f4854;
    background: #eef0f3;
    border: 1px solid #dfe3e8;
    box-shadow: none;
}

body.app-page .user-menu-dropdown nav a:not(.user-menu-logout) i {
    color: #59616c;
}

body.app-page .user-menu-dropdown nav a:not(.user-menu-logout):hover,
body.app-page .user-menu-dropdown nav a:not(.user-menu-logout):focus-visible {
    background: var(--app-surface-muted);
}

body.app-page.dark .user-info .topbar-control-icon {
    color: #d0d3d8;
    background: #3b3e44;
    border-color: #50545c;
}

body.app-page.dark .user-menu-dropdown nav a:not(.user-menu-logout) i {
    color: #b8bdc5;
}

/* Einheitliche Such- und Filteraktionen */
html body.app-page .content .app-query-action.app-query-action.app-query-action {
    min-width: 122px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    padding: 0 13px;
    color: #24547f !important;
    background: #e3f1fd !important;
    border: 1px solid #a9cbe8 !important;
    border-radius: 11px;
    box-shadow: 0 3px 9px rgba(59, 112, 157, .08) !important;
    font: inherit;
    font-size: 12px;
    font-weight: 780;
    line-height: 1;
    text-decoration: none !important;
    filter: none !important;
    transform: none !important;
    cursor: pointer;
    transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

html body.app-page .content .app-query-action.app-query-action.app-query-action > :is(strong, span) {
    color: inherit !important;
    font: inherit;
}

html body.app-page .content .app-query-action.app-query-action.app-query-action > :is(.app-query-leading, .article-catalog-filter-icon) {
    width: 15px;
    flex: 0 0 15px;
    color: #52799b !important;
    text-align: center;
}

html body.app-page .content .app-query-action.app-query-action.app-query-action > :is(.app-query-arrow, .article-catalog-filter-arrow) {
    margin-left: auto;
    color: #6f91ae !important;
    font-size: 10px;
}

html body.app-page .content .app-query-action.app-query-action.app-query-action.app-query-icon-only {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    justify-content: center;
    padding: 0;
}

@media (hover: hover) and (pointer: fine) {
    html body.app-page .content .app-query-action.app-query-action.app-query-action:hover:not(:disabled):not([aria-disabled="true"]) {
        color: #173f64 !important;
        background: #cfe5f8 !important;
        border-color: #79acd6 !important;
        box-shadow: 0 5px 12px rgba(59, 112, 157, .14) !important;
        filter: none !important;
        transform: none !important;
    }

    html body.app-page .content .app-query-action.app-query-action.app-query-action:hover > :is(.app-query-leading, .article-catalog-filter-icon) {
        color: #315f86 !important;
    }

    html body.app-page .content .app-query-action.app-query-action.app-query-action:hover > :is(.app-query-arrow, .article-catalog-filter-arrow) {
        color: #315f86 !important;
    }
}

html body.app-page .content .app-query-action.app-query-action.app-query-action:focus-visible {
    outline: 3px solid rgba(87, 148, 198, .28) !important;
    outline-offset: 2px;
}

html body.app-page.dark .content .app-query-action.app-query-action.app-query-action {
    color: #e2e5e9 !important;
    background: #34373d !important;
    border-color: #5a5f68 !important;
    box-shadow: none !important;
}

html body.app-page.dark .content .app-query-action.app-query-action.app-query-action > :is(
    .app-query-leading,
    .app-query-arrow,
    .article-catalog-filter-icon,
    .article-catalog-filter-arrow
) {
    color: #bfc4cb !important;
}

@media (hover: hover) and (pointer: fine) {
    html body.app-page.dark .content .app-query-action.app-query-action.app-query-action:hover:not(:disabled):not([aria-disabled="true"]) {
        color: #fff !important;
        background: #454950 !important;
        border-color: #7a808a !important;
        box-shadow: 0 5px 13px rgba(0, 0, 0, .18) !important;
    }
}

/* Einheitliches Schwarz-Weiß-System für Inhaltsicons. */
body.app-page {
    --content-icon-mono-fg: #424a54;
    --content-icon-mono-bare: #313842;
    --content-icon-mono-bg: #f6f7f8;
    --content-icon-mono-border: #e1e5e9;
    --content-icon-mono-shadow: 0 2px 5px rgba(28, 35, 44, .05);
}

body.app-page.dark {
    --content-icon-mono-fg: #d9dde2;
    --content-icon-mono-bare: #d2d6dc;
    --content-icon-mono-bg: #2b2e33;
    --content-icon-mono-border: #3f444b;
    --content-icon-mono-shadow: none;
}

body.app-page .stat-icon,
body.app-page .customer-view-icon,
body.app-page .module-permission-icon,
body.app-page .customer-wizard-step-heading > span,
body.app-page .customer-edit-heading-icon {
    color: var(--content-icon-mono-fg) !important;
    background: var(--content-icon-mono-bg) !important;
    border: 1px solid var(--content-icon-mono-border) !important;
    box-shadow: var(--content-icon-mono-shadow) !important;
}

/* Kundenliste: Profilbild in der Firmenzelle, Kontaktspalte entfällt. */
.customer-management .user-table th:nth-child(1) { width: 9%; }
.customer-management .user-table th:nth-child(2) { width: 20%; }
.customer-management .user-table th:nth-child(3) { width: 20%; }
.customer-management .user-table th:nth-child(4) { width: 20%; }
.customer-management .user-table th:nth-child(5) { width: 8%; }
.customer-management .user-table th:nth-child(6) { width: 10%; }
.customer-management .user-table th:nth-child(7) { width: 13%; }

.customer-list-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.customer-list-identity > strong {
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-list-avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    overflow: hidden;
    color: var(--content-icon-mono-fg, #424a54);
    background: var(--content-icon-mono-bg, #f6f7f8);
    border: 1px solid var(--content-icon-mono-border, #e1e5e9);
    border-radius: 11px;
    box-shadow: var(--content-icon-mono-shadow, 0 2px 5px rgba(28, 35, 44, .05));
    font-size: 12px;
    font-weight: 850;
}

.customer-list-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Kunden ohne Mengenbestand: Farben hier zentral anpassen. */
body.app-page .customer-management {
    --customer-empty-stock-color: #a84f00;
    --customer-empty-stock-bg: #fff7e8;
    --customer-empty-stock-bg-hover: #ffefd2;
    --customer-empty-stock-border: #e58a24;
    --customer-empty-stock-badge-bg: #ffe2ad;
}

body.app-page .customer-management .user-table tbody tr.customer-row-no-stock {
    background: var(--customer-empty-stock-bg);
    box-shadow: inset 4px 0 0 var(--customer-empty-stock-border);
}

body.app-page .customer-management .user-table tbody tr.customer-row-no-stock:hover {
    background: var(--customer-empty-stock-bg-hover);
}

.customer-number-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

.customer-no-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 4px 7px;
    color: var(--customer-empty-stock-color);
    background: var(--customer-empty-stock-badge-bg);
    border: 1px solid color-mix(in srgb, var(--customer-empty-stock-border) 58%, transparent);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.15;
    white-space: normal;
}

body.app-page.dark .customer-management {
    --customer-empty-stock-color: #ffc26b;
    --customer-empty-stock-bg: #3b3022;
    --customer-empty-stock-bg-hover: #493923;
    --customer-empty-stock-border: #d88424;
    --customer-empty-stock-badge-bg: #50391d;
}

/* Klare Such- und Filteraktionen: neutral, kontrastreich und invertierend. */
html body.app-page .content .app-query-action.app-query-action.app-query-action {
    color: #fff !important;
    background: #353c46 !important;
    border-color: #353c46 !important;
    box-shadow: 0 4px 10px rgba(26, 32, 40, .12) !important;
}

html body.app-page .content .app-query-action.app-query-action.app-query-action > :is(
    .app-query-leading,
    .app-query-arrow,
    .article-catalog-filter-icon,
    .article-catalog-filter-arrow
) {
    color: #fff !important;
}

@media (hover: hover) and (pointer: fine) {
    html body.app-page .content .app-query-action.app-query-action.app-query-action:hover:not(:disabled):not([aria-disabled="true"]) {
        color: #303741 !important;
        background: #fff !important;
        border-color: #303741 !important;
        box-shadow: 0 5px 13px rgba(26, 32, 40, .10) !important;
    }

    html body.app-page .content .app-query-action.app-query-action.app-query-action:hover > :is(
        .app-query-leading,
        .app-query-arrow,
        .article-catalog-filter-icon,
        .article-catalog-filter-arrow
    ) {
        color: #303741 !important;
    }

    html body.app-page .content .app-query-action.app-query-action.app-query-action:hover > :is(
        .app-query-arrow,
        .article-catalog-filter-arrow
    ) {
        transform: translateX(2px);
    }
}

html body.app-page .content .app-query-action.app-query-action.app-query-action:focus-visible {
    outline-color: rgba(53, 60, 70, .28) !important;
}

html body.app-page.dark .content .app-query-action.app-query-action.app-query-action {
    color: #24292f !important;
    background: #e3e6ea !important;
    border-color: #e3e6ea !important;
    box-shadow: none !important;
}

html body.app-page.dark .content .app-query-action.app-query-action.app-query-action > :is(
    .app-query-leading,
    .app-query-arrow,
    .article-catalog-filter-icon,
    .article-catalog-filter-arrow
) {
    color: #343a43 !important;
}

@media (hover: hover) and (pointer: fine) {
    html body.app-page.dark .content .app-query-action.app-query-action.app-query-action:hover:not(:disabled):not([aria-disabled="true"]) {
        color: #f4f5f6 !important;
        background: #292d33 !important;
        border-color: #8a9099 !important;
        box-shadow: none !important;
    }

    html body.app-page.dark .content .app-query-action.app-query-action.app-query-action:hover > :is(
        .app-query-leading,
        .app-query-arrow,
        .article-catalog-filter-icon,
        .article-catalog-filter-arrow
    ) {
        color: #f4f5f6 !important;
    }
}

/* Moderne Status-Badges in Kundenlisten und Detailansichten. */
body.app-page :is(.customer-status, .customer-view-status) {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 9px;
    color: #505a67;
    background: #fff;
    border: 1px solid #dfe4ea;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(30, 37, 46, .04);
    font-size: 11px;
    font-weight: 750;
}

body.app-page :is(.customer-status, .customer-view-status)::before {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    content: "";
    background: #98a1ad;
    border-radius: 50%;
}

body.app-page :is(.customer-status, .customer-view-status).is-active {
    color: #256744;
    background: #fbfefc;
    border-color: #bcdcc9;
}

body.app-page :is(.customer-status, .customer-view-status).is-active::before {
    background: #32a163;
}

body.app-page :is(.customer-status, .customer-view-status).is-inactive {
    color: #697380;
    background: #fafbfc;
    border-color: #dce1e7;
}

body.app-page.dark :is(.customer-status, .customer-view-status) {
    color: #c9ced5;
    background: #292c31;
    border-color: #474c54;
    box-shadow: none;
}

body.app-page.dark :is(.customer-status, .customer-view-status).is-active {
    color: #9bd7b3;
    background: #25332b;
    border-color: #3f6750;
}

/* Kundenstatus ohne Punkt und mit dezentem Glas-Look. */
body.app-page :is(.customer-status, .customer-view-status)::before {
    display: none !important;
    content: none !important;
}

body.app-page :is(.customer-status, .customer-view-status) {
    gap: 0;
    min-height: 28px;
    padding: 4px 11px;
    color: #4a5562;
    background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(237, 241, 246, .86));
    border-color: #cbd2da;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 3px 8px rgba(24, 32, 42, .07);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    font-weight: 800;
}

body.app-page :is(.customer-status, .customer-view-status).is-active {
    color: #21643f;
    background: linear-gradient(135deg, rgba(250, 255, 252, .97), rgba(215, 240, 224, .88));
    border-color: #acd2ba;
}

body.app-page :is(.customer-status, .customer-view-status).is-inactive {
    color: #596573;
    background: linear-gradient(135deg, rgba(253, 254, 255, .97), rgba(229, 233, 238, .88));
    border-color: #c9d0d8;
}

body.app-page.dark :is(.customer-status, .customer-view-status) {
    color: #e1e4e8;
    background: linear-gradient(135deg, rgba(60, 64, 71, .88), rgba(39, 42, 47, .82));
    border-color: #5b616a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

body.app-page.dark :is(.customer-status, .customer-view-status).is-active {
    color: #ace0bf;
    background: linear-gradient(135deg, rgba(43, 65, 52, .92), rgba(31, 48, 39, .88));
    border-color: #4f765d;
}

/* Animierter Hell-/Dunkel-Schalter in der Topbar */
.topbar-theme-switch {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 76px;
    height: 40px;
    padding: 0;
    overflow: hidden;
    color: #2b2d31;
    background: linear-gradient(180deg, #fff 0%, #f1f3f5 100%);
    border: 1px solid #d2d6db;
    border-radius: 999px;
    box-shadow:
        inset 0 2px 7px rgba(15, 23, 42, .12),
        inset 0 -1px 0 rgba(255, 255, 255, .9),
        0 3px 9px rgba(15, 23, 42, .10);
    cursor: pointer;
    isolation: isolate;
    transition: border-color .25s ease, box-shadow .25s ease, transform .18s ease;
}

.topbar-theme-switch i {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 30px;
    display: grid;
    place-items: center;
    font-size: 15px;
    transform: translateY(-50%);
    transition:
        color .24s ease,
        opacity .2s ease,
        transform .42s cubic-bezier(.2, .9, .25, 1.18);
}

.topbar-theme-sun {
    left: 4px;
}

.topbar-theme-moon {
    right: 4px;
}

.topbar-theme-thumb {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 1;
    width: 30px;
    height: 30px;
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 50%;
    box-shadow:
        0 3px 10px rgba(15, 23, 42, .18),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    transition:
        transform .48s cubic-bezier(.2, .9, .25, 1.18),
        background-color .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.topbar-theme-switch.is-light .topbar-theme-thumb {
    background: #fff;
    border-color: #e0e3e7;
    transform: translateX(0);
}

.topbar-theme-switch.is-light .topbar-theme-sun {
    color: #f5c542;
    opacity: 1;
    transform: translateY(-50%) rotate(0deg) scale(1);
}

.topbar-theme-switch.is-light .topbar-theme-moon {
    color: #8d949d;
    opacity: 0;
    transform: translateY(-50%) rotate(18deg) scale(.72);
}

.topbar-theme-switch.is-dark {
    background: linear-gradient(180deg, #f9fafb 0%, #e8ebef 100%);
    border-color: #c8cdd3;
    box-shadow:
        inset 0 2px 8px rgba(15, 23, 42, .17),
        inset 0 -1px 0 rgba(255, 255, 255, .85),
        0 3px 10px rgba(0, 0, 0, .22);
}

.topbar-theme-switch.is-dark .topbar-theme-thumb {
    background: #292a2d;
    border-color: #202125;
    box-shadow:
        0 3px 11px rgba(0, 0, 0, .32),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    transform: translateX(36px);
}

.topbar-theme-switch.is-dark .topbar-theme-sun {
    color: #9ca2aa;
    opacity: 0;
    transform: translateY(-50%) rotate(-18deg) scale(.72);
}

.topbar-theme-switch.is-dark .topbar-theme-moon {
    color: #fff;
    opacity: 1;
    transform: translateY(-50%) rotate(-7deg) scale(1);
}

.topbar-theme-switch:hover {
    border-color: #aeb4bc;
    box-shadow:
        inset 0 2px 7px rgba(15, 23, 42, .14),
        0 5px 14px rgba(15, 23, 42, .16);
    transform: translateY(-1px);
}

.topbar-theme-switch:focus-visible {
    outline: 3px solid rgba(109, 119, 132, .28);
    outline-offset: 3px;
}

.topbar-theme-switch:disabled {
    cursor: wait;
    opacity: .68;
    transform: none;
}

/* Kompakter Sprachwechsel, optional über die persönlichen Einstellungen angeheftet. */
.app-page .topbar-language-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 74px;
    min-width: 74px;
    height: 40px;
    padding: 4px 9px;
    border-radius: 12px;
}

.app-page .topbar-language-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    color: var(--app-text-muted);
    font-size: 13px;
}

.app-page .topbar-language-switch strong {
    color: var(--app-text);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .055em;
}

.app-page .topbar-language-switch:hover .topbar-language-icon {
    color: var(--app-accent-strong);
    background: var(--app-accent-soft);
    border-color: color-mix(in srgb, var(--app-accent) 32%, var(--app-border));
}

.app-page .topbar-language-switch:disabled {
    cursor: wait;
    opacity: .62;
}

.app-page.dark .topbar-language-icon {
    background: var(--app-surface-muted);
    border-color: var(--app-border);
}

/* Kundenstatus direkt neben der Suche */
.customer-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    align-items: center;
    gap: 12px;
}

.customer-toolbar .user-search {
    width: 100%;
    max-width: none;
}

.customer-toolbar [data-customer-count] {
    min-width: 68px;
    text-align: right;
    white-space: nowrap;
}

.customer-status-filter {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border: 1px solid #dce2e8;
    border-radius: 11px;
    background: #f3f5f7;
}

.customer-status-filter button {
    min-width: 72px;
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #677282;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.customer-status-filter button:hover:not(.is-active) {
    background: rgba(255, 255, 255, .72);
    color: #202833;
}

.customer-status-filter button.is-active {
    background: #343b44;
    color: #fff;
    box-shadow: 0 2px 6px rgba(25, 31, 39, .16);
}

.customer-status-filter button:focus-visible {
    outline: 2px solid #7994bb;
    outline-offset: 2px;
}

.dark .customer-status-filter,
body.app-page.dark .customer-status-filter {
    border-color: #484d55;
    background: #282b30;
}

.dark .customer-status-filter button,
body.app-page.dark .customer-status-filter button {
    color: #aeb4bd;
}

.dark .customer-status-filter button:hover:not(.is-active),
body.app-page.dark .customer-status-filter button:hover:not(.is-active) {
    background: #373b41;
    color: #f3f4f5;
}

.dark .customer-status-filter button.is-active,
body.app-page.dark .customer-status-filter button.is-active {
    background: #eceff2;
    color: #252a31;
    box-shadow: none;
}

@media (max-width: 720px) {
    .customer-toolbar {
        grid-template-columns: 1fr auto;
    }

    .customer-toolbar .user-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 430px) {
    .customer-toolbar {
        grid-template-columns: 1fr;
    }

    .customer-toolbar [data-customer-count] {
        text-align: left;
    }
}

/*
 * Dunkle Tabellen: Primärnummern neutral und kontrastreich statt hellblau.
 * Die Regel liegt zentral, damit Bestand, Artikel, SICK, Bestandsaufteilung
 * und weitere Tabellen dieselbe gut lesbare Darstellung verwenden.
 */
body.app-page.dark .content table tbody td > strong > a:not([class*="button"]),
body.app-page.dark .content table tbody .inventory-filter-link:not(.inventory-filter-link--secondary),
body.app-page.dark .content table tbody .article-number-link,
body.app-page.dark .content table tbody .article-catalog-article-number,
body.app-page.dark .content table tbody .article-number-stack a,
body.app-page.dark .content table tbody .sick-inventory-filter-link:not(.is-secondary) {
    color: #eef2f6 !important;
}

body.app-page.dark .content table tbody td > small .inventory-filter-link--secondary {
    color: #d8dde4 !important;
}

@media (hover: hover) and (pointer: fine) {
    body.app-page.dark .content table tbody td > strong > a:not([class*="button"]):hover,
    body.app-page.dark .content table tbody .inventory-filter-link:not(.inventory-filter-link--secondary):hover,
    body.app-page.dark .content table tbody .article-number-link:hover,
    body.app-page.dark .content table tbody .article-number-stack a:hover,
    body.app-page.dark .content table tbody .sick-inventory-filter-link:not(.is-secondary):hover {
        color: #fff !important;
    }
}

/*
 * Helles Aktionsglas: bisher graue Such-, Filter- und Nebenaktionen erhalten
 * websiteweit denselben ruhigen Hellblau-Look. Semantische Speichern-,
 * Bestätigen-, Warn- und Schließen-Aktionen behalten bewusst ihre Farben.
 */
body.app-page {
    --action-glass-text: #344d60;
    --action-glass-icon: #6b8496;
    --action-glass-bg: linear-gradient(180deg, rgba(247, 251, 253, .98), rgba(232, 241, 247, .94));
    --action-glass-bg-hover: linear-gradient(180deg, #f3f8fb, #e2edf3);
    --action-glass-border: #cbd8e1;
    --action-glass-border-hover: #9fb4c3;
    --action-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 2px 6px rgba(36, 56, 75, .06);
    --action-glass-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .98), 0 4px 10px rgba(36, 56, 75, .09);
    --action-neutral-text: #374554;
    --action-neutral-bg: rgba(255, 255, 255, .88);
    --action-neutral-bg-hover: #f4f7f9;
    --action-neutral-border: #d9e0e6;
    --action-neutral-border-hover: #aebdc9;
}

body.app-page.dark {
    --action-glass-text: #edf4f8;
    --action-glass-icon: #bdced9;
    --action-glass-bg: linear-gradient(180deg, rgba(58, 68, 77, .96), rgba(46, 54, 62, .96));
    --action-glass-bg-hover: linear-gradient(180deg, #46535d, #38434c);
    --action-glass-border: #596975;
    --action-glass-border-hover: #7c919f;
    --action-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 7px rgba(0, 0, 0, .14);
    --action-glass-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .11), 0 4px 10px rgba(0, 0, 0, .18);
    --action-neutral-text: #e8ebef;
    --action-neutral-bg: rgba(45, 48, 53, .94);
    --action-neutral-bg-hover: #383c42;
    --action-neutral-border: #494f57;
    --action-neutral-border-hover: #69727c;
}

html body.app-page .content .app-query-action.app-query-action.app-query-action {
    color: var(--action-neutral-text) !important;
    background: var(--action-neutral-bg) !important;
    border-color: var(--action-neutral-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 2px 6px rgba(36, 56, 75, .05) !important;
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    font-size: 13px !important;
    font-weight: 680 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    filter: none !important;
    transform: none !important;
}

body.app-page :is(.button-secondary, .button-ghost, .article-catalog-reset):not(.window-close-button):not(.modal-close):not([data-dialog-close]):not(.button-accent-success):not(.button-accent-authenticator):not(.button-accent-passkey):not(.is-danger):not(.danger-action):not(.button-danger):not(.twofa-danger) {
    color: var(--action-neutral-text) !important;
    background: var(--action-neutral-bg) !important;
    border-color: var(--action-neutral-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 2px 6px rgba(36, 56, 75, .05) !important;
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    text-decoration: none !important;
    filter: none !important;
    transform: none !important;
}

html body.app-page .content .app-query-action.app-query-action.app-query-action > :is(
    .app-query-leading,
    .app-query-arrow,
    .article-catalog-filter-icon,
    .article-catalog-filter-arrow
) {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

html body.app-page .content .app-query-action.app-query-action.app-query-action > :is(strong, span) {
    font-size: inherit !important;
    font-weight: inherit !important;
}

html body.app-page .content .app-query-action.app-query-action.app-query-action > .app-query-arrow {
    display: none !important;
}

@media (hover: hover) and (pointer: fine) {
    html body.app-page .content .app-query-action.app-query-action.app-query-action:hover:not(:disabled):not([aria-disabled="true"]) {
        color: var(--action-neutral-text) !important;
        background: var(--action-neutral-bg-hover) !important;
        border-color: var(--action-neutral-border-hover) !important;
        box-shadow: 0 3px 8px rgba(36, 56, 75, .07) !important;
        filter: none !important;
        transform: none !important;
    }

    body.app-page :is(.button-secondary, .button-ghost, .article-catalog-reset):not(.window-close-button):not(.modal-close):not([data-dialog-close]):not(.button-accent-success):not(.button-accent-authenticator):not(.button-accent-passkey):not(.is-danger):not(.danger-action):not(.button-danger):not(.twofa-danger):hover:not(:disabled):not([aria-disabled="true"]) {
        color: var(--action-neutral-text) !important;
        background: var(--action-neutral-bg-hover) !important;
        border-color: var(--action-neutral-border-hover) !important;
        box-shadow: 0 3px 8px rgba(36, 56, 75, .07) !important;
        filter: none !important;
        transform: none !important;
    }

    html body.app-page .content .app-query-action.app-query-action.app-query-action:hover > :is(
        .app-query-leading,
        .app-query-arrow,
        .article-catalog-filter-icon,
        .article-catalog-filter-arrow
    ) {
        color: inherit !important;
        -webkit-text-fill-color: inherit !important;
    }

    html body.app-page .content .app-query-action.app-query-action.app-query-action:hover > :is(
        .app-query-arrow,
        .article-catalog-filter-arrow
    ) {
        transform: translateX(2px);
    }
}

html body.app-page .content .app-query-action.app-query-action.app-query-action:focus-visible,
body.app-page :is(.button-secondary, .button-ghost, .article-catalog-reset):not(.window-close-button):not(.modal-close):not([data-dialog-close]):not(.button-accent-success):not(.button-accent-authenticator):not(.button-accent-passkey):not(.is-danger):not(.danger-action):not(.button-danger):not(.twofa-danger):focus-visible {
    outline: 3px solid rgba(91, 163, 207, .30) !important;
    outline-offset: 2px;
}

/* Der Status-Schalter der Kundenliste war ebenfalls dunkelgrau. */
body.app-page .customer-status-filter button.is-active {
    color: var(--action-glass-text);
    background: var(--action-glass-bg);
    border: 1px solid var(--action-glass-border);
    box-shadow: var(--action-glass-shadow);
}

@media (hover: hover) and (pointer: fine) {
    body.app-page .customer-status-filter button:hover {
        color: var(--action-glass-text);
        background: var(--action-glass-bg-hover);
    }
}

/* Hilfe & Support: im vorhandenen Sidebar-Design, dauerhaft am unteren Rand. */
body.app-page .sidebar {
    display: flex;
    flex-direction: column;
}

body.app-page .sidebar-support {
    position: sticky;
    bottom: 0;
    z-index: 6;
    flex: 0 0 auto;
    margin-top: auto;
    padding: 10px 10px 8px;
    background: var(--app-sidebar);
    border-top: 1px solid rgba(255, 255, 255, .09);
}

body.app-page .sidebar-support :is(a, button),
body.app-page .sidebar-support a:visited {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 40px;
    padding: 9px 11px;
    color: rgba(242, 247, 255, .86);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    text-decoration: none !important;
}

body.app-page .sidebar-support :is(a, button):hover,
body.app-page .sidebar-support :is(a, button):focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .12);
    text-decoration: none !important;
}

body.app-page .sidebar-support :is(a, button):focus-visible {
    outline: 2px solid rgba(191, 219, 254, .62);
    outline-offset: 2px;
}

body.app-page .sidebar-support i {
    width: 18px;
    flex: 0 0 18px;
    color: rgba(190, 216, 250, .88);
    font-size: 14px;
    text-align: center;
}

body.app-page .sidebar-support .sidebar-upgrade-link {
    margin-bottom: 2px;
    color: #f3e7c8;
    background: linear-gradient(135deg, rgba(218, 188, 116, .13), rgba(218, 188, 116, .06));
    border-color: rgba(225, 199, 137, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

body.app-page .sidebar-support .sidebar-upgrade-link > span {
    min-width: 0;
    flex: 1 1 auto;
}

body.app-page .sidebar-support .sidebar-upgrade-link .sidebar-upgrade-icon {
    color: #dfc57f;
}

body.app-page .sidebar-support .sidebar-upgrade-link .sidebar-upgrade-arrow {
    margin-left: auto;
    color: rgba(238, 219, 170, .72);
    font-size: 10px;
}

body.app-page .sidebar-support .sidebar-upgrade-link:hover,
body.app-page .sidebar-support .sidebar-upgrade-link:focus-visible {
    color: #fff8e7;
    background: linear-gradient(135deg, rgba(218, 188, 116, .20), rgba(218, 188, 116, .09));
    border-color: rgba(225, 199, 137, .31);
}

body.app-page .sidebar-support .sidebar-upgrade-link:hover .sidebar-upgrade-icon,
body.app-page .sidebar-support .sidebar-upgrade-link:focus-visible .sidebar-upgrade-icon {
    color: #f0d693;
}

/* Support-Fenster: gleiche ruhige Sprache wie die Passwort-Hilfe. */
body.app-page .sidebar-support-dialog {
    width: min(calc(100% - 32px), 560px);
    max-width: 560px;
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    color: var(--app-text);
    background: transparent;
    border: 0;
    border-radius: 26px;
    overflow: visible;
}

body.app-page .sidebar-support-dialog::backdrop {
    background: rgba(15, 23, 42, .58);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

body.app-page .sidebar-support-card {
    position: relative;
    overflow: hidden;
    padding: 42px 44px 34px;
    color: var(--app-text);
    background: color-mix(in srgb, var(--app-surface-solid) 96%, transparent);
    border: 1px solid var(--app-border);
    border-radius: 26px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .25);
}

body.app-page .sidebar-support-close {
    position: absolute;
    top: 18px;
    right: 18px;
}

body.app-page .sidebar-support-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 6px 48px 10px;
    color: var(--app-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

body.app-page .sidebar-support-card > h2 {
    margin: 0;
    color: var(--app-text);
    font-size: clamp(29px, 5vw, 38px);
    font-weight: 720;
    letter-spacing: -.045em;
    line-height: 1.08;
    text-align: center;
}

body.app-page .sidebar-support-intro {
    max-width: 390px;
    margin: 14px auto 26px;
    color: var(--app-text-muted);
    font-size: 15px;
    line-height: 1.55;
    text-align: center;
}

body.app-page .sidebar-support-actions {
    display: grid;
    gap: 12px;
}

body.app-page .sidebar-support-actions > :is(a, button),
body.app-page .sidebar-support-actions > a:visited {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 14px;
    min-height: 86px;
    padding: 14px 16px;
    color: var(--app-text);
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border);
    border-radius: 17px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    text-decoration: none !important;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body.app-page .sidebar-support-actions > :is(a, button):hover {
    color: var(--app-text);
    background: var(--app-surface-solid);
    border-color: var(--app-border-strong);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
    text-decoration: none !important;
}

body.app-page .sidebar-support-actions > :is(a, button):focus-visible {
    outline: 3px solid rgba(17, 65, 148, .20);
    outline-offset: 2px;
}

body.app-page .sidebar-support-action-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    color: var(--app-text);
    background: var(--app-surface-solid);
    border: 1px solid var(--app-border);
    border-radius: 14px;
    box-shadow: 0 5px 12px rgba(15, 23, 42, .06);
    font-size: 16px;
}

body.app-page .sidebar-support-action-copy {
    display: grid;
    min-width: 0;
    line-height: 1.25;
}

body.app-page .sidebar-support-action-copy small {
    margin-bottom: 3px;
    color: var(--app-text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.app-page .sidebar-support-action-copy strong {
    overflow-wrap: anywhere;
    color: var(--app-text);
    font-size: 14px;
    font-weight: 700;
}

body.app-page .sidebar-support-action-copy > span:last-child {
    margin-top: 4px;
    color: var(--app-text-muted);
    font-size: 11px;
}

body.app-page .sidebar-support-action-arrow {
    color: var(--app-text-muted);
    font-size: 12px;
    transition: transform .18s ease;
}

body.app-page .sidebar-support-actions > :is(a, button):hover .sidebar-support-action-arrow {
    color: var(--app-text);
    transform: translateX(2px);
}

body.app-page .sidebar-support-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 18px 0 0;
    color: var(--app-text-muted);
    font-size: 11px;
    line-height: 1.45;
    text-align: center;
}

@media (max-width: 560px) {
    body.app-page .sidebar-support-dialog {
        width: min(calc(100% - 20px), 560px);
        max-height: calc(100dvh - 20px);
    }

    body.app-page .sidebar-support-card {
        padding: 54px 20px 26px;
        border-radius: 20px;
    }

    body.app-page .sidebar-support-actions > :is(a, button),
    body.app-page .sidebar-support-actions > a:visited {
        grid-template-columns: 42px minmax(0, 1fr) 14px;
        gap: 11px;
        min-height: 80px;
        padding: 12px;
    }

    body.app-page .sidebar-support-action-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.app-page .sidebar-support-actions > :is(a, button),
    body.app-page .sidebar-support-action-arrow {
        transition: none;
    }
}

/*
 * Darkmode-Aktionen: Primäre blaue Portalbuttons verwenden websiteweit
 * denselben neutralen Glasstil wie „Filtern“ im Artikelstamm.
 * Semantische Erfolgs-, Warn- und Löschaktionen behalten ihre Farben.
 */
html body.app-page.dark :is(
    .button-primary:not(.button-accent-success):not(.button-accent-authenticator):not(.button-accent-passkey):not(.is-danger):not(.danger-action),
    .profile-save-button:not(.button-accent-success),
    .article-catalog-button:not(.is-secondary):not(.is-danger),
    .import-button:not(.is-danger),
    .simulation-open,
    button.is-primary:not(.is-danger),
    a.is-primary:not(.is-danger),
    .company-contact-link,
    .security-action
) {
    color: var(--action-glass-text) !important;
    background: var(--action-glass-bg) !important;
    border: 1px solid var(--action-glass-border) !important;
    box-shadow: var(--action-glass-shadow) !important;
    text-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

html body.app-page.dark :is(
    .button-primary:not(.button-accent-success):not(.button-accent-authenticator):not(.button-accent-passkey):not(.is-danger):not(.danger-action),
    .profile-save-button:not(.button-accent-success),
    .article-catalog-button:not(.is-secondary):not(.is-danger),
    .import-button:not(.is-danger),
    .simulation-open,
    button.is-primary:not(.is-danger),
    a.is-primary:not(.is-danger),
    .company-contact-link,
    .security-action
) > :is(i, span, strong) {
    color: inherit !important;
}

@media (hover: hover) and (pointer: fine) {
    html body.app-page.dark :is(
        .button-primary:not(.button-accent-success):not(.button-accent-authenticator):not(.button-accent-passkey):not(.is-danger):not(.danger-action),
        .profile-save-button:not(.button-accent-success),
        .article-catalog-button:not(.is-secondary):not(.is-danger),
        .import-button:not(.is-danger),
        .simulation-open,
        button.is-primary:not(.is-danger),
        a.is-primary:not(.is-danger),
        .company-contact-link,
        .security-action
    ):hover:not(:disabled):not([aria-disabled="true"]) {
        color: var(--action-glass-text) !important;
        background: var(--action-glass-bg-hover) !important;
        border-color: var(--action-glass-border-hover) !important;
        box-shadow: var(--action-glass-shadow-hover) !important;
        filter: none !important;
        transform: none !important;
    }
}

html body.app-page.dark :is(
    .button-primary:not(.button-accent-success):not(.button-accent-authenticator):not(.button-accent-passkey):not(.is-danger):not(.danger-action),
    .profile-save-button:not(.button-accent-success),
    .article-catalog-button:not(.is-secondary):not(.is-danger),
    .import-button:not(.is-danger),
    .simulation-open,
    button.is-primary:not(.is-danger),
    a.is-primary:not(.is-danger),
    .company-contact-link,
    .security-action
):focus-visible {
    outline: 3px solid rgba(124, 145, 159, .34) !important;
    outline-offset: 2px;
}

/*
 * Darkmode-Kontrast 2026: Die Navigation ist einfarbig blau abgesetzt.
 * Neutrale Grau-/Blauaktionen sind hell und invertieren beim Darüberfahren.
 * Semantische Erfolgs-, Geräte-, Warn- und Löschfarben bleiben unberührt.
 */
html body.app-page.dark .sidebar {
    background: #111d2d;
    border-right: 1px solid #294363;
    box-shadow: 12px 0 32px rgba(3, 10, 22, .28);
}

html body.app-page.dark .logo,
html body.app-page.dark .sidebar-support {
    background: #111d2d;
}

html body.app-page.dark .logo {
    border-bottom: 1px solid rgba(112, 157, 214, .14);
}

html body.app-page.dark .nav-title {
    color: #8faed4;
}

html body.app-page.dark .nav-section a {
    color: #c1cde0;
}

html body.app-page.dark .nav-section a i,
html body.app-page.dark .nav-link-copy small,
html body.app-page.dark .sidebar-support i {
    color: #91acd0;
}

html body.app-page.dark .nav-section a:hover {
    color: #ffffff;
    background: #192a42;
    border-color: #315275;
}

html body.app-page.dark .nav-section a.active {
    color: #ffffff;
    background: #203b5d;
    border-color: #3f6796;
    box-shadow: inset 3px 0 0 #6aa8f4, 0 5px 14px rgba(0, 0, 0, .18);
}

html body.app-page.dark .nav-section a.active i,
html body.app-page.dark .nav-section a.active .nav-link-copy small {
    color: #ffffff;
}

html body.app-page.dark .sidebar-support {
    border-top-color: rgba(112, 157, 214, .18);
}

html body.app-page.dark .sidebar-support :is(a, button):hover,
html body.app-page.dark .sidebar-support :is(a, button):focus-visible {
    background: #192a42;
    border-color: #315275;
}

html body.app-page.dark {
    --action-glass-text: #1c2735;
    --action-glass-icon: #34414f;
    --action-glass-bg: #d2d7de;
    --action-glass-bg-hover: #17191d;
    --action-glass-border: #aeb6c0;
    --action-glass-border-hover: #8a929d;
    --action-glass-shadow: 0 2px 8px rgba(0, 0, 0, .24);
    --action-glass-shadow-hover: 0 5px 14px rgba(0, 0, 0, .30);
    --action-neutral-text: #1c2735;
    --action-neutral-bg: #d2d7de;
    --action-neutral-bg-hover: #17191d;
    --action-neutral-border: #aeb6c0;
    --action-neutral-border-hover: #8a929d;
}

@media (hover: hover) and (pointer: fine) {
    html body.app-page.dark :is(
        .button-primary:not(.button-accent-success):not(.button-accent-authenticator):not(.button-accent-passkey):not(.is-danger):not(.danger-action),
        .button-secondary:not(.button-accent-success):not(.button-accent-authenticator):not(.button-accent-passkey):not(.is-danger):not(.danger-action):not(.button-danger):not(.twofa-danger),
        .button-ghost:not(.button-accent-success):not(.button-accent-authenticator):not(.button-accent-passkey):not(.is-danger):not(.danger-action):not(.button-danger):not(.twofa-danger),
        .article-catalog-reset,
        .profile-save-button:not(.button-accent-success),
        .article-catalog-button:not(.is-secondary):not(.is-danger),
        .import-button:not(.is-danger),
        .simulation-open,
        button.is-primary:not(.is-danger),
        a.is-primary:not(.is-danger),
        .company-contact-link,
        .security-action
    ):hover:not(:disabled):not([aria-disabled="true"]) {
        color: #ffffff !important;
        background: #17191d !important;
        border-color: #8a929d !important;
        box-shadow: 0 5px 14px rgba(0, 0, 0, .30) !important;
    }

    html body.app-page.dark :is(
        .button-primary:not(.button-accent-success):not(.button-accent-authenticator):not(.button-accent-passkey):not(.is-danger):not(.danger-action),
        .button-secondary:not(.button-accent-success):not(.button-accent-authenticator):not(.button-accent-passkey):not(.is-danger):not(.danger-action):not(.button-danger):not(.twofa-danger),
        .button-ghost:not(.button-accent-success):not(.button-accent-authenticator):not(.button-accent-passkey):not(.is-danger):not(.danger-action):not(.button-danger):not(.twofa-danger),
        .article-catalog-reset,
        .profile-save-button:not(.button-accent-success),
        .article-catalog-button:not(.is-secondary):not(.is-danger),
        .import-button:not(.is-danger),
        .simulation-open,
        button.is-primary:not(.is-danger),
        a.is-primary:not(.is-danger),
        .company-contact-link,
        .security-action
    ):hover:not(:disabled):not([aria-disabled="true"]) > :is(i, span, strong) {
        color: inherit !important;
    }
}

/*
 * Verbindlicher Darkmode-Kontrast fuer neutrale Portalbuttons.
 * Spaeter geladene Modul- und :visited-Regeln duerfen Text oder Icons nicht
 * erneut blau faerben. Semantisch farbige Aktionen bleiben ausgeschlossen.
 */
html body.app-page.app-page.dark.dark .button.button:not([class*="button-accent-"]):not([class*="twofa-device-logout"]):not(.is-success):not(.is-warning):not(.is-danger):not(.danger-action):not(.button-danger):not(.twofa-danger):not(.window-close-button):not(.modal-close):not([data-dialog-close]),
html body.app-page.app-page.dark.dark a.button.button:visited:not([class*="button-accent-"]):not([class*="twofa-device-logout"]):not(.is-success):not(.is-warning):not(.is-danger):not(.danger-action):not(.button-danger):not(.twofa-danger) {
    color: #1c2735 !important;
    -webkit-text-fill-color: #1c2735 !important;
    background: #d2d7de !important;
    border-color: #aeb6c0 !important;
    text-shadow: none !important;
}

html body.app-page.app-page.dark.dark .button.button:not([class*="button-accent-"]):not([class*="twofa-device-logout"]):not(.is-success):not(.is-warning):not(.is-danger):not(.danger-action):not(.button-danger):not(.twofa-danger):not(.window-close-button):not(.modal-close):not([data-dialog-close]) :is(i, span, strong, svg),
html body.app-page.app-page.dark.dark .button.button:not([class*="button-accent-"]):not([class*="twofa-device-logout"]):not(.is-success):not(.is-warning):not(.is-danger):not(.danger-action):not(.button-danger):not(.twofa-danger):not(.window-close-button):not(.modal-close):not([data-dialog-close]) :is(i, span, strong)::before {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

html body.app-page.app-page.dark.dark .button.button:not([class*="button-accent-"]):not([class*="twofa-device-logout"]):not(.is-success):not(.is-warning):not(.is-danger):not(.danger-action):not(.button-danger):not(.twofa-danger):not(.window-close-button):not(.modal-close):not([data-dialog-close]):is(:hover, :focus-visible, :active):not(:disabled):not([aria-disabled="true"]),
html body.app-page.app-page.dark.dark a.button.button:visited:is(:hover, :focus-visible, :active):not([class*="button-accent-"]):not([class*="twofa-device-logout"]):not(.is-success):not(.is-warning):not(.is-danger):not(.danger-action):not(.button-danger):not(.twofa-danger):not([aria-disabled="true"]) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #17191d !important;
    border-color: #8a929d !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .30) !important;
    text-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

/* Einheitliche Erstellen-Aktion für Reklamationen, Kunden und Benutzer. */
.app-page .topbar .topbar-create-action{
    min-width:max-content;
    padding-right:14px;
    color:#075d45;
    background:rgba(29,151,111,.09);
    border-color:rgba(29,151,111,.3);
}

.app-page .topbar .topbar-create-action:hover,
.app-page .topbar .topbar-create-action:focus-visible{
    color:#064c39;
    background:rgba(29,151,111,.15);
    border-color:rgba(29,151,111,.48);
}

.app-page .topbar .topbar-create-action .topbar-control-icon{
    color:#087453;
    background:rgba(29,151,111,.14);
}

.topbar-create-action-copy{
    font-size:11px;
    font-weight:780;
    line-height:1.2;
    white-space:nowrap;
}

body.app-page.dark .topbar .topbar-create-action,
body.app-page.dark .topbar .topbar-create-action:hover,
body.app-page.dark .topbar .topbar-create-action:focus-visible{
    color:#8be4c6;
    background:rgba(50,199,151,.12);
    border-color:rgba(91,214,175,.3);
}

body.app-page.dark .topbar .topbar-create-action .topbar-control-icon{
    color:#78e1bf;
    background:rgba(67,198,157,.16);
}

/* Gemeinsame Wizard-Navigation für alle mehrstufigen Formulare. */
html body.app-page .button.wizard-nav-button{
    min-width:142px;
    min-height:54px;
    padding:0 26px !important;
    border-radius:999px !important;
    font-size:15px;
    font-weight:780;
    letter-spacing:-.01em;
    box-shadow:none !important;
    transform:none !important;
    transition:color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease !important;
}

html body.app-page .button.wizard-nav-back{
    color:#26364d !important;
    -webkit-text-fill-color:#26364d !important;
    background:var(--app-surface-solid) !important;
    border:1px solid #aebdce !important;
}

html body.app-page .button:is(.wizard-nav-next,.wizard-nav-submit){
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    background:linear-gradient(135deg,#3dbe7d,#2caf73) !important;
    border:1px solid transparent !important;
    box-shadow:0 8px 20px rgba(38,168,107,.2) !important;
}

html body.app-page .button.wizard-nav-button :is(i,span,strong),
html body.app-page .button.wizard-nav-button :is(i,span,strong)::before{
    color:inherit !important;
    -webkit-text-fill-color:currentColor !important;
}

@media(hover:hover) and (pointer:fine){
    html body.app-page .button.wizard-nav-back:hover:not(:disabled){
        color:#114194 !important;
        -webkit-text-fill-color:#114194 !important;
        background:#f5f8fc !important;
        border-color:#7189a5 !important;
        box-shadow:0 7px 18px rgba(35,57,82,.1) !important;
        transform:translateY(-1px) !important;
    }

    html body.app-page .button:is(.wizard-nav-next,.wizard-nav-submit):hover:not(:disabled){
        color:#fff !important;
        -webkit-text-fill-color:#fff !important;
        background:linear-gradient(135deg,#35b876,#249f66) !important;
        border-color:transparent !important;
        box-shadow:0 10px 24px rgba(38,168,107,.28) !important;
        transform:translateY(-1px) !important;
    }
}

body.app-page.dark .button.wizard-nav-back{
    color:#dbe5f2 !important;
    -webkit-text-fill-color:#dbe5f2 !important;
    background:var(--app-surface) !important;
    border-color:#66778c !important;
}

@media(max-width:900px){
    .app-page .topbar .topbar-create-action{
        justify-content:center;
        width:50px;
        min-width:50px;
        padding:6px;
    }

    .topbar-create-action-copy{
        display:none;
    }

}

@media(max-width:560px){
    html body.app-page .button.wizard-nav-button{
        min-width:124px;
        min-height:50px;
        padding:0 20px !important;
        font-size:14px;
    }
}

/*
 * Automatische WQHD-Lesbarkeitsstufe für das gesamte eingeloggte Portal.
 * Ein maximierter WQHD-Bildschirm liegt bei 125 % Windows-Skalierung bei
 * ungefähr 2048 CSS-Pixeln. Full-HD, Tablets und Mobilgeräte bleiben daher
 * unverändert. Die Skalierung am Portal-Root erfasst auch feste Elemente,
 * modale Dialoge und den Support-Chat ohne modulweise Sonderregeln.
 */
@media (min-width:2000px) and (min-height:900px){
    body.app-page{
        zoom:1.25;
    }
}

/* Einheitlicher Datenstand für Dashboard und alle datenführenden Module. */
html body.app-page .portal-data-status {
    align-items:center !important;
    background:var(--app-surface-solid, #fff) !important;
    border:1px solid var(--app-border, #d9e1eb) !important;
    border-radius:12px !important;
    box-shadow:0 5px 16px rgba(25, 40, 64, .06) !important;
    color:var(--app-text-muted, #627086) !important;
    display:inline-flex !important;
    gap:10px !important;
    height:auto !important;
    min-height:48px !important;
    padding:7px 12px 7px 8px !important;
    white-space:nowrap;
}

html body.app-page .portal-data-status > i {
    align-items:center !important;
    background:#e5f5ee !important;
    border:1px solid #c5e6d7 !important;
    border-radius:9px !important;
    color:#147454 !important;
    display:flex !important;
    flex:0 0 30px !important;
    font-size:12px !important;
    height:30px !important;
    justify-content:center !important;
    margin:0 !important;
    width:30px !important;
}

html body.app-page .portal-data-status .portal-data-status-copy {
    display:grid !important;
    gap:1px !important;
    line-height:1.25 !important;
    min-width:0;
}

html body.app-page .portal-data-status .portal-data-status-copy > strong {
    color:var(--app-text, #172033) !important;
    font-size:12px !important;
    font-weight:600 !important;
    letter-spacing:0 !important;
    line-height:1.25 !important;
    text-transform:none !important;
}

html body.app-page .portal-data-status .portal-data-status-copy > small {
    color:var(--app-text-muted, #627086) !important;
    font-size:10px !important;
    font-weight:550 !important;
    line-height:1.3 !important;
    margin:0 !important;
}

html body.app-page .portal-data-status.is-stale > i {
    background:#fff2d9 !important;
    border-color:#efd39b !important;
    color:#a96608 !important;
}

html body.app-page .portal-data-status.is-unknown > i {
    background:#eef1f5 !important;
    border-color:#d9e0e8 !important;
    color:#637086 !important;
}

html body.app-page.dark .portal-data-status {
    background:var(--app-surface, #25282e) !important;
    box-shadow:0 7px 18px rgba(0, 0, 0, .18) !important;
}

html body.app-page.dark .portal-data-status > i {
    background:#203c34 !important;
    border-color:#315d50 !important;
    color:#76dbb8 !important;
}

html body.app-page.dark .portal-data-status.is-stale > i {
    background:#44351f !important;
    border-color:#6d542d !important;
    color:#f2bc5e !important;
}

html body.app-page.dark .portal-data-status.is-unknown > i {
    background:#30343b !important;
    border-color:#474d57 !important;
    color:#b7c0cc !important;
}

/* Einheitliche Exportauswahl ohne Seitennavigation. */
html body.app-page .portal-export-menu {
    position:relative;
    z-index:24;
}

html body.app-page .portal-export-menu > summary {
    box-sizing:border-box;
    min-height:48px;
    padding:0 14px;
    white-space:nowrap;
    list-style:none;
}

html body.app-page .portal-export-menu > summary::-webkit-details-marker {
    display:none;
}

html body.app-page .portal-export-menu .portal-export-chevron {
    margin-left:2px;
    font-size:9px;
    transition:transform .18s ease;
}

html body.app-page .portal-export-menu[open] .portal-export-chevron {
    transform:rotate(180deg);
}

html body.app-page .portal-export-options {
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    display:grid;
    width:230px;
    padding:7px;
    background:var(--app-surface-solid, #fff);
    border:1px solid var(--app-border, #d9e1eb);
    border-radius:13px;
    box-shadow:0 18px 45px rgba(15, 23, 42, .18);
}

html body.app-page .portal-export-options > :is(a, button) {
    display:grid;
    grid-template-columns:34px 1fr;
    gap:10px;
    align-items:center;
    width:100%;
    min-height:50px;
    padding:7px 9px;
    color:var(--app-text, #172033);
    text-align:left;
    background:transparent;
    border:0;
    border-radius:9px;
    cursor:pointer;
    text-decoration:none !important;
}

html body.app-page .portal-export-options > a:visited,
html body.app-page .portal-export-options > a:hover,
html body.app-page .portal-export-options > a:focus,
html body.app-page .portal-export-options > a strong {
    color:inherit;
    text-decoration:none !important;
}

html body.app-page .portal-export-options > :is(a, button):hover {
    background:var(--app-surface-muted, #f3f6f9);
}

html body.app-page .portal-export-options > :is(a, button):disabled {
    cursor:not-allowed;
    opacity:.48;
}

html body.app-page .portal-export-options > :is(a, button) > i {
    display:grid;
    width:34px;
    height:34px;
    place-items:center;
    color:var(--app-accent-strong, #07599f);
    background:var(--app-accent-soft, #e8f2fb);
    border-radius:8px;
}

html body.app-page .portal-export-options > :is(a, button) > span {
    display:grid;
    gap:1px;
}

html body.app-page .portal-export-options strong {
    color:inherit;
    font-size:12px;
}

html body.app-page .portal-export-options small {
    color:var(--app-text-muted, #627086);
    font-size:10px;
}

html body.app-page.dark .portal-export-options {
    background:var(--app-surface, #25282e);
    box-shadow:0 20px 50px rgba(0, 0, 0, .4);
}

html body.app-page .watchlist-bulk-actions .portal-export-menu > summary {
    width:auto;
    min-height:36px;
    padding:0 11px;
    font-size:10px;
}

@media (max-width:650px) {
    html body.app-page .portal-export-menu,
    html body.app-page .portal-export-menu > summary {
        width:100%;
    }

    html body.app-page .portal-export-options {
        right:auto;
        left:0;
        width:100%;
    }
}

/*
 * Verbindlicher Primärstil für alle Such-, Filter- und Anwenden-Aktionen.
 * Die ID-Spezifität verhindert, dass ältere Modulregeln den Button erneut
 * grau oder hell darstellen.
 */
#portal-app .content .app-query-action {
    align-items:center !important;
    background:linear-gradient(135deg, #2879df 0%, #1768d2 100%) !important;
    border:1px solid #1460c4 !important;
    border-radius:11px !important;
    box-shadow:0 6px 15px rgba(23, 104, 210, .22) !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    cursor:pointer;
    display:inline-flex !important;
    filter:none !important;
    font-family:inherit !important;
    font-size:13px !important;
    font-weight:760 !important;
    gap:9px !important;
    justify-content:center !important;
    line-height:1 !important;
    min-height:44px !important;
    min-width:122px !important;
    padding:0 15px !important;
    text-decoration:none !important;
    text-shadow:none !important;
    transform:none !important;
    transition:background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

#portal-app .content .app-query-action > :is(i, span, strong),
#portal-app .content .app-query-action > :is(i, span, strong)::before {
    color:inherit !important;
    -webkit-text-fill-color:currentColor !important;
    fill:currentColor !important;
    font-size:inherit !important;
    font-weight:inherit !important;
}

#portal-app .content .app-query-action > .app-query-leading {
    flex:0 0 auto !important;
    width:auto !important;
}

#portal-app .content .app-query-action > .app-query-arrow {
    display:none !important;
}

#portal-app .content .app-query-action:focus-visible {
    outline:3px solid rgba(43, 126, 226, .28) !important;
    outline-offset:2px !important;
}

@media (hover:hover) and (pointer:fine) {
    #portal-app .content .app-query-action:hover:not(:disabled):not([aria-disabled="true"]) {
        background:linear-gradient(135deg, #1f6fd4 0%, #1059bc 100%) !important;
        border-color:#0e55b4 !important;
        box-shadow:0 8px 18px rgba(16, 83, 177, .28) !important;
        color:#fff !important;
        -webkit-text-fill-color:#fff !important;
        transform:translateY(-1px) !important;
    }
}

#portal-app.dark .content .app-query-action {
    background:#d2d7de !important;
    border-color:#aeb6c0 !important;
    box-shadow:0 2px 8px rgba(0, 0, 0, .24) !important;
    color:#1c2735 !important;
    -webkit-text-fill-color:#1c2735 !important;
}

/* Zentraler LED-Hinweis fuer funktionsfaehige Module, die noch in Entwicklung sind. */
.module-development-notice {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: 42px minmax(0, 1fr);
    width: 100%;
    min-height: 44px;
    margin: 0 0 18px;
    overflow: hidden;
    color: #ff7a18;
    background: #0b0d0f;
    border: 1px solid #30343a;
    border-radius: 7px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025), 0 7px 18px rgba(15, 23, 42, .09);
}

.module-development-notice-icon {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    color: #ff7a18;
    background: #111418;
    border-right: 1px solid #30343a;
    font-size: 14px;
    text-shadow: 0 0 7px rgba(255, 122, 24, .72);
}

.module-development-notice-viewport {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .075) 1px, transparent 1.2px);
    background-size: 4px 4px;
}

.module-development-notice-viewport::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    box-shadow: inset 12px 0 14px #0b0d0f, inset -12px 0 14px #0b0d0f;
}

.module-development-notice-track {
    display: inline-block;
    min-width: max-content;
    padding-left: 100%;
    color: #ff7a18;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 0 4px rgba(255, 122, 24, .82), 0 0 10px rgba(255, 89, 0, .36);
    animation: module-development-marquee 14s linear infinite;
    animation-delay: -2s;
    will-change: transform;
}

@keyframes module-development-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    .module-development-notice-track {
        width: 100%;
        min-width: 0;
        padding: 0 14px;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        transform: none;
        animation: none;
    }
}

@media (max-width: 560px) {
    .module-development-notice {
        grid-template-columns: 38px minmax(0, 1fr);
        min-height: 40px;
        margin-bottom: 14px;
    }

    .module-development-notice-track {
        font-size: 11px;
    }
}

body.app-page.module-statistiken .content > .module-development-notice {
    width: auto;
    margin: calc(-1 * clamp(20px, 3vw, 38px)) calc(-1 * clamp(20px, 3vw, 38px)) 18px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
}

@media (max-width: 700px) {
    body.app-page.module-statistiken .content > .module-development-notice {
        margin: -18px -14px 18px;
    }
}

@media (hover:hover) and (pointer:fine) {
    #portal-app.dark .content .app-query-action:hover:not(:disabled):not([aria-disabled="true"]) {
        background:#e4e8ed !important;
        border-color:#c2c9d2 !important;
        box-shadow:0 4px 11px rgba(0, 0, 0, .26) !important;
        color:#172231 !important;
        -webkit-text-fill-color:#172231 !important;
        transform:translateY(-1px) !important;
    }
}