/* =========================================================
   contractmanager - site.css
   Ziel: maximale Übersicht, einfache Flächen, kompakte Mobile-Ansicht
   Hinweis: Diese Datei ersetzt das bisherige Stylesheet vollständig.
   ========================================================= */


/* =========================================================
   1. Design-Variablen
   ========================================================= */

:root {
    --app-bg: #101010;
    --app-surface: #171717;
    --app-surface-2: #1f1f1f;
    --app-surface-3: #252525;
    --app-border: #323232;
    --app-border-strong: #4a4a4a;
    --app-text: #f4f4f4;
    --app-muted: #b5b5b5;
    --app-muted-2: #8c8c8c;
    --app-danger: #dc3545;
    --app-success: #198754;
    --app-warning: #ffc107;
    --app-radius: 10px;
    --app-radius-sm: 8px;
    --app-gap: .55rem;
    --app-pad: .65rem;
    --app-pad-sm: .45rem;
    --app-shadow: none;
}


/* =========================================================
   2. Reset / Basis
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    font-size: 14.5px;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--app-bg);
    color: var(--app-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.3;
}

a {
    color: inherit;
}

    a:hover {
        color: inherit;
    }

img,
svg {
    max-width: 100%;
}

h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}

h1 {
    font-size: 1.28rem;
    line-height: 1.12;
    margin-bottom: .18rem;
}

h2 {
    font-size: 1.02rem;
    line-height: 1.15;
    margin-bottom: .18rem;
}

h3 {
    font-size: .9rem;
    line-height: 1.15;
    margin-bottom: .16rem;
}

p {
    margin-bottom: .35rem;
}

small {
    color: var(--app-muted);
}


/* =========================================================
   3. App-Shell
   ========================================================= */

.app-shell {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: 100vh;
}

.app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: .7rem;
    background: #0b0b0b;
    border-right: 1px solid var(--app-border);
    display: flex;
    flex-direction: column;
}

.app-main {
    min-width: 0;
}

.app-content {
    padding: .8rem;
}

.public-content {
    min-height: 100vh;
}


/* =========================================================
   4. Logo und Navigation
   ========================================================= */

.app-logo {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--app-text);
    text-decoration: none;
    margin-bottom: .9rem;
}

    .app-logo:hover {
        color: var(--app-text);
    }

.app-logo-mark {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--app-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    background: var(--app-surface);
}

.app-logo-text {
    font-weight: 700;
    letter-spacing: .01em;
}

.app-nav {
    display: flex;
    flex-direction: column;
    gap: .18rem;
}

    .app-nav a {
        color: var(--app-text);
        text-decoration: none;
        padding: .5rem .58rem;
        border-radius: var(--app-radius-sm);
        border: 1px solid transparent;
        font-size: .86rem;
    }

        .app-nav a:hover {
            background: var(--app-surface);
            border-color: var(--app-border);
        }

.app-sidebar-footer {
    margin-top: auto;
    padding-top: .65rem;
}

.app-logout-button {
    width: 100%;
    border: 1px solid var(--app-border);
    background: transparent;
    color: var(--app-text);
    border-radius: var(--app-radius-sm);
    padding: .5rem .58rem;
    text-align: left;
}

    .app-logout-button:hover {
        background: var(--app-surface);
    }


/* =========================================================
   5. Topbar
   ========================================================= */

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: 48px;
    background: #0e0e0e;
    border-bottom: 1px solid var(--app-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 .8rem;
}

.app-topbar-title {
    font-weight: 700;
}

.app-topbar-user {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--app-muted);
    font-size: .8rem;
}


/* =========================================================
   6. Mobile Bottom Navigation
   ========================================================= */

.mobile-bottom-nav {
    display: none;
}


/* =========================================================
   7. Karten, Text, Status
   ========================================================= */

.app-card,
.order-section,
.backup-list-section,
.backup-readme-section {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: var(--app-pad);
}

    .app-card h1,
    .app-card h2,
    .app-card h3 {
        margin-top: 0;
    }

.app-muted {
    color: var(--app-muted);
}

.alert {
    padding: .5rem .6rem;
    border-radius: var(--app-radius-sm);
    margin-bottom: .55rem;
    font-size: .82rem;
}

.empty-state {
    border: 1px dashed var(--app-border);
    border-radius: var(--app-radius-sm);
    padding: .55rem;
    color: var(--app-muted);
    background: var(--app-surface-2);
    font-size: .82rem;
}


/* =========================================================
   8. Buttons
   ========================================================= */

.app-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    border-radius: var(--app-radius-sm);
    border: 1px solid var(--app-border);
    background: var(--app-text);
    color: #111111;
    text-decoration: none;
    padding: .42rem .58rem;
    font-weight: 650;
    font-size: .82rem;
    line-height: 1.1;
    min-height: 32px;
    cursor: pointer;
}

    .app-button:hover {
        color: #111111;
        filter: brightness(.93);
    }

.app-button-secondary {
    background: transparent;
    color: var(--app-text);
}

    .app-button-secondary:hover {
        color: var(--app-text);
        background: var(--app-surface-2);
    }

.app-button-danger {
    background: var(--app-danger);
    color: #ffffff;
    border-color: var(--app-danger);
}

    .app-button-danger:hover {
        color: #ffffff;
        filter: brightness(.93);
    }

.btn {
    border-radius: var(--app-radius-sm);
}

.btn-sm {
    padding: .26rem .45rem;
    font-size: .76rem;
}


/* =========================================================
   9. Seitenkopf
   ========================================================= */

.page-header,
.dashboard-card-header,
.detail-block-header,
.order-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .55rem;
}

    .page-header p,
    .dashboard-card-header p,
    .order-section-header p,
    .wizard-panel > p.app-muted {
        margin: .08rem 0 0 0;
        font-size: .78rem;
    }


/* =========================================================
   10. Tabellen
   ========================================================= */

.responsive-table {
    width: 100%;
    overflow-x: auto;
}

.table {
    margin-bottom: 0;
}

.table-dark {
    --bs-table-bg: var(--app-surface);
    --bs-table-striped-bg: var(--app-surface-2);
    --bs-table-hover-bg: var(--app-surface-2);
    --bs-table-border-color: var(--app-border);
    color: var(--app-text);
}

.table th {
    color: var(--app-muted);
    font-size: .72rem;
    font-weight: 650;
    white-space: nowrap;
}

.table td {
    font-size: .82rem;
    vertical-align: middle;
}

.badge {
    font-weight: 650;
    border-radius: 999px;
}


/* =========================================================
   11. Formulare
   ========================================================= */

.app-form {
    margin-top: .6rem;
}

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

.form-grid-full {
    grid-column: 1 / -1;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .65rem;
}

.form-hint {
    color: var(--app-muted);
    font-size: .74rem;
    margin-top: .22rem;
}

.form-label {
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: .18rem;
}

.form-control,
.form-select {
    min-height: 34px;
    border-radius: var(--app-radius-sm);
    font-size: .84rem;
}

textarea.form-control {
    min-height: 88px;
}

.text-danger {
    color: #ff8a8a !important;
    font-size: .74rem;
}


/* =========================================================
   12. Listen
   ========================================================= */

.app-list,
.dashboard-message-list,
.message-list,
.ticket-list,
.calendar-order-list,
.backup-list,
.attachment-list,
.assignment-list,
.compact-employee-list,
.position-timeline {
    display: flex;
    flex-direction: column;
    gap: .38rem;
}

.app-list {
    margin-top: .6rem;
}

.app-list-row,
.dashboard-message-row,
.message-card,
.ticket-card,
.calendar-order-card,
.backup-card,
.attachment-card,
.assignment-card,
.compact-employee-card,
.position-card {
    background: var(--app-surface-2);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    padding: .5rem;
    color: var(--app-text);
    text-decoration: none;
}

.app-list-row,
.dashboard-message-row,
.message-card,
.ticket-card,
.calendar-order-card,
.backup-card,
.attachment-card,
.assignment-card,
.compact-employee-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}

    .dashboard-message-row:hover,
    .message-card:hover,
    .ticket-card:hover,
    .calendar-order-card:hover,
    .attachment-card:hover {
        color: var(--app-text);
        border-color: var(--app-border-strong);
    }


/* =========================================================
   13. Login
   ========================================================= */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .8rem;
}

.login-card {
    width: 100%;
    max-width: 400px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: .9rem;
    background: var(--app-surface);
    color: var(--app-text);
}

    .login-card h1 {
        margin-bottom: .85rem;
        font-size: 1.28rem;
        font-weight: 700;
    }

    .login-card .form-label {
        color: var(--app-text);
    }

    .login-card .form-control {
        background: #ffffff;
        color: #111111;
    }

    .login-card .form-check-label {
        color: var(--app-text);
    }


/* =========================================================
   14. Detail-Grids
   ========================================================= */

.details-grid,
.review-grid,
.message-summary-grid,
.message-status-grid,
.ticket-detail-grid,
.calendar-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .4rem;
    margin: .55rem 0;
}

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

    .details-grid > div,
    .review-grid > div,
    .message-summary-grid > div,
    .message-status-grid > div,
    .ticket-detail-grid > div,
    .calendar-summary-grid > div {
        background: var(--app-surface-2);
        border: 1px solid var(--app-border);
        border-radius: var(--app-radius-sm);
        padding: .48rem;
    }

.review-grid-full {
    grid-column: 1 / -1;
}

.detail-label {
    display: block;
    color: var(--app-muted);
    font-size: .66rem;
    margin-bottom: .08rem;
}

.detail-block {
    margin-top: .75rem;
    border-top: 1px solid var(--app-border);
    padding-top: .55rem;
}

    .detail-block h2 {
        font-size: .92rem;
        margin-bottom: .38rem;
    }


/* =========================================================
   15. Dashboard und Kalenderleisten
   ========================================================= */

.dashboard-grid,
.dashboard-grid-focused,
.calendar-page,
.backup-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: .55rem;
}

.dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .6rem;
}

.dashboard-message-row-unread,
.message-card-unread {
    border-color: var(--app-border-strong);
}

.dashboard-message-title {
    font-weight: 700;
    margin-bottom: .08rem;
}

.dashboard-message-preview,
.message-preview {
    color: var(--app-text);
    margin: .08rem 0;
    line-height: 1.18;
}

.dashboard-message-status,
.message-card-status,
.ticket-card-status,
.backup-card-actions,
.compact-employee-actions,
.position-card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .28rem;
}

.dashboard-calendar-card {
    grid-column: 1 / -1;
}

.dashboard-calendar-legend,
.calendar-legend {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    color: var(--app-muted);
    font-size: .66rem;
    margin-bottom: .25rem;
    padding-left: 72px;
}

    .dashboard-calendar-legend span,
    .calendar-legend span {
        text-align: center;
    }

        .dashboard-calendar-legend span:first-child,
        .calendar-legend span:first-child {
            text-align: left;
        }

        .dashboard-calendar-legend span:last-child,
        .calendar-legend span:last-child {
            text-align: right;
        }

.dashboard-calendar-list,
.calendar-week {
    display: flex;
    flex-direction: column;
    gap: .32rem;
}

.dashboard-calendar-day,
.calendar-day-row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: .45rem;
    align-items: center;
}

.dashboard-calendar-date,
.calendar-day-label {
    color: var(--app-text);
    font-size: .74rem;
}

    .dashboard-calendar-date span,
    .calendar-day-label span {
        display: block;
        color: var(--app-muted);
    }

.dashboard-calendar-bar,
.calendar-day-bar {
    position: relative;
    min-height: 36px;
    background: var(--app-surface-2);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    overflow: hidden;
}

.calendar-day-bar {
    min-height: 42px;
}

.dashboard-calendar-gridline,
.calendar-gridline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, .06);
    z-index: 1;
}

.gridline-25,
.calendar-gridline-25 {
    left: 25%;
}

.gridline-50,
.calendar-gridline-50 {
    left: 50%;
}

.gridline-75,
.calendar-gridline-75 {
    left: 75%;
}

.dashboard-calendar-empty,
.calendar-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-muted);
    font-size: .74rem;
    z-index: 2;
}

.dashboard-calendar-segment,
.calendar-segment {
    position: absolute;
    top: 5px;
    bottom: 5px;
    z-index: 3;
    min-width: 40px;
    border-radius: 7px;
    border: 1px solid #3b5b42;
    background: #263a2b;
    color: var(--app-text);
    text-decoration: none;
    padding: .16rem .32rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .66rem;
    white-space: nowrap;
}

.calendar-segment {
    min-width: 62px;
    padding: .2rem .38rem;
}

    .dashboard-calendar-segment:hover,
    .calendar-segment:hover {
        color: var(--app-text);
        border-color: var(--app-border-strong);
    }

    .dashboard-calendar-segment span,
    .calendar-segment span,
    .calendar-segment em {
        color: var(--app-muted);
        font-style: normal;
        overflow: hidden;
        text-overflow: ellipsis;
    }


/* =========================================================
   16. Auftrag Wizard
   ========================================================= */

.wizard-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .38rem;
    margin: .55rem 0 .7rem 0;
}

.wizard-step {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    padding: .42rem;
    background: var(--app-surface-2);
    color: var(--app-muted);
    display: flex;
    align-items: center;
    gap: .34rem;
    min-width: 0;
}

    .wizard-step span {
        width: 21px;
        height: 21px;
        flex: 0 0 21px;
        border-radius: 999px;
        border: 1px solid var(--app-border);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: .68rem;
    }

    .wizard-step strong {
        min-width: 0;
        font-size: .74rem;
        line-height: 1.08;
    }

.wizard-step-active {
    color: var(--app-text);
    border-color: var(--app-border-strong);
}

    .wizard-step-active span {
        background: #ffffff;
        color: #111111;
        border-color: #ffffff;
    }

.wizard-panel h2 {
    font-size: .96rem;
    margin-bottom: .18rem;
}


/* =========================================================
   17. Aufträge: Details, Mitarbeiter, Positionen
   ========================================================= */

.order-detail-page {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.order-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: var(--app-pad);
}

    .order-hero h1 {
        margin: .06rem 0 .22rem 0;
        font-size: 1.18rem;
    }

.order-number {
    color: var(--app-muted);
    font-size: .64rem;
    font-weight: 750;
    letter-spacing: .04em;
}

.order-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .28rem;
}

    .order-hero-meta span,
    .availability-badge {
        display: inline-flex;
        align-items: center;
        border: 1px solid var(--app-border);
        border-radius: 999px;
        padding: .14rem .4rem;
        color: var(--app-muted);
        font-size: .66rem;
    }

.order-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .38rem;
}

.order-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .36rem;
}

.order-summary-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    padding: .42rem;
}

    .order-summary-card span {
        display: block;
        color: var(--app-muted);
        font-size: .62rem;
        margin-bottom: .08rem;
    }

    .order-summary-card strong {
        display: block;
        font-size: .78rem;
    }

.order-section {
    padding: var(--app-pad);
}

.order-note-wide {
    width: 100%;
}

.order-note {
    background: var(--app-surface-2);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    padding: .5rem;
    white-space: pre-wrap;
    font-size: .82rem;
}

.order-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr);
    gap: .45rem;
    align-items: flex-start;
}

.order-positions-column,
.order-people-column {
    min-width: 0;
}

.order-people-column {
    position: sticky;
    top: 60px;
}

.order-people-group {
    margin-top: .55rem;
}

    .order-people-group:first-of-type {
        margin-top: 0;
    }

    .order-people-group h3 {
        font-size: .78rem;
        margin: 0 0 .3rem 0;
        color: var(--app-muted);
    }

.assignment-card,
.compact-employee-card {
    align-items: flex-start;
}

.compact-assignment-list,
.compact-employee-list {
    gap: .32rem;
}

.compact-assignment-card,
.compact-employee-card {
    padding: .42rem;
}

    .compact-assignment-card strong,
    .compact-employee-card strong {
        display: block;
        margin-bottom: .02rem;
        font-size: .8rem;
    }

    .compact-assignment-card .app-muted,
    .compact-employee-card .app-muted {
        font-size: .7rem;
    }

.compact-employee-card-disabled {
    opacity: .48;
}

.availability-conflict {
    margin-top: .14rem;
    color: var(--app-muted);
    font-size: .72rem;
}

.position-card {
    padding: .48rem;
}

.position-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .55rem;
}

.position-card h3 {
    font-size: .86rem;
    margin: 0 0 .08rem 0;
}

.position-description {
    margin: .34rem 0 0 0;
    white-space: pre-wrap;
    font-size: .78rem;
}

.position-attachments {
    margin-top: .38rem !important;
}

.attachment-item {
    display: flex;
    justify-content: space-between;
    gap: .45rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    padding: .32rem .4rem;
}

    .attachment-item a {
        word-break: break-word;
    }


/* =========================================================
   18. Modal und Auto-Form
   ========================================================= */

.app-modal {
    background: var(--app-surface);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
}

    .app-modal .modal-header,
    .app-modal .modal-footer {
        border-color: var(--app-border);
        padding: .58rem;
    }

    .app-modal .modal-body {
        padding: .58rem;
    }

    .app-modal .form-control {
        background: #ffffff;
        color: #111111;
    }

.auto-form-grid {
    display: grid;
    gap: .55rem;
}

.auto-form-grid-1 {
    grid-template-columns: 1fr;
}

.auto-form-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auto-form-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.auto-form-full {
    grid-column: 1 / -1;
}

.auto-form-grid .form-check {
    padding-top: .25rem;
}


/* =========================================================
   19. Nachrichten / Chat
   ========================================================= */

.message-card h3,
.ticket-card h2 {
    font-size: .86rem;
    margin: 0 0 .08rem 0;
}

.message-body {
    background: var(--app-surface-2);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    padding: .55rem;
    white-space: pre-wrap;
}

.conversation-thread {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin-top: .55rem;
    padding: .55rem;
    background: #141414;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
}

.conversation-message {
    position: relative;
    width: fit-content;
    max-width: min(68%, 640px);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    padding: .45rem .55rem;
    background: var(--app-surface-2);
}

.conversation-message-own {
    align-self: flex-start;
    margin-right: auto;
    margin-left: 0;
    background: #263a2b;
    border-color: #3b5b42;
}

.conversation-message-other {
    align-self: flex-end;
    margin-left: auto;
    margin-right: 0;
    background: var(--app-surface-2);
    border-color: var(--app-border);
}

.conversation-message-meta {
    display: flex;
    justify-content: space-between;
    gap: .45rem;
    color: var(--app-muted);
    font-size: .66rem;
    margin-bottom: .2rem;
}

    .conversation-message-meta strong {
        color: var(--app-text);
        font-size: .7rem;
    }

.conversation-message-body {
    white-space: pre-wrap;
    line-height: 1.28;
    word-break: break-word;
}

.conversation-message-status {
    display: flex;
    gap: .28rem;
    justify-content: flex-end;
    color: var(--app-muted);
    font-size: .62rem;
    margin-top: .2rem;
}

.conversation-attachments {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-top: .35rem;
}

.conversation-attachment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .45rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--app-radius-sm);
    padding: .32rem .42rem;
    color: var(--app-text);
    text-decoration: none;
    background: rgba(255, 255, 255, .06);
}

    .conversation-attachment:hover {
        color: var(--app-text);
        border-color: var(--app-border-strong);
    }

    .conversation-attachment small {
        color: var(--app-muted);
    }


/* =========================================================
   20. Backups
   ========================================================= */

.backup-layout {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
    gap: .55rem;
    align-items: flex-start;
}

.backup-list-section h2,
.backup-readme-section h2 {
    font-size: .9rem;
    margin: 0 0 .38rem 0;
}

.backup-card-selected {
    border-color: var(--app-border-strong);
}

.backup-readme-box {
    background: var(--app-surface-2);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    padding: .55rem;
    max-height: 680px;
    overflow: auto;
}

    .backup-readme-box pre {
        margin: 0;
        color: var(--app-text);
        white-space: pre-wrap;
        word-break: break-word;
        font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
        font-size: .76rem;
    }


/* =========================================================
   21. Breakpoints Desktop / Tablet
   ========================================================= */

@media (max-width: 1200px) {
    .order-workspace,
    .backup-layout {
        grid-template-columns: 1fr;
    }

    .order-people-column {
        position: static;
    }
}

@media (max-width: 960px) {
    .details-grid,
    .message-summary-grid,
    .message-status-grid,
    .ticket-detail-grid,
    .calendar-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .order-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .app-shell {
        grid-template-columns: 200px minmax(0, 1fr);
    }
}


/* =========================================================
   22. Mobile: maximale Übersicht, wenig Scrollen
   ========================================================= */

@media (max-width: 768px) {
    :root {
        --app-radius: 9px;
        --app-radius-sm: 7px;
        --app-gap: .38rem;
        --app-pad: .48rem;
        --app-pad-sm: .36rem;
    }

    html {
        font-size: 14px;
    }

    body {
        line-height: 1.25;
    }

    h1 {
        font-size: 1.08rem;
        margin-bottom: .08rem;
    }

    h2 {
        font-size: .92rem;
        margin-bottom: .08rem;
    }

    h3 {
        font-size: .84rem;
    }

    p {
        margin-bottom: .28rem;
    }

    .app-shell {
        display: block;
        padding-bottom: 56px;
    }

    .app-sidebar {
        display: none;
    }

    .app-topbar {
        min-height: 44px;
        padding: 0 .55rem;
    }

    .app-topbar-title {
        font-size: .88rem;
    }

    .app-topbar-user {
        font-size: .72rem;
    }

        .app-topbar-user span {
            display: none;
        }

    .app-content {
        padding: .45rem;
    }

    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        height: 54px;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        background: #0b0b0b;
        border-top: 1px solid var(--app-border);
    }

        .mobile-bottom-nav a {
            color: var(--app-text);
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .68rem;
            padding: .16rem;
            text-align: center;
        }

    .app-card,
    .order-section,
    .backup-list-section,
    .backup-readme-section {
        padding: .48rem;
        border-radius: 9px;
    }

    .page-header,
    .dashboard-card-header,
    .detail-block-header,
    .order-section-header {
        flex-direction: column;
        gap: .32rem;
        margin-bottom: .38rem;
    }

        .page-header p,
        .dashboard-card-header p,
        .order-section-header p,
        .wizard-panel > p.app-muted {
            display: none;
        }

        .page-header .app-button,
        .dashboard-card-header .app-button,
        .order-section-header .app-button,
        .order-section-header button {
            width: 100%;
        }

    .app-button {
        min-height: 31px;
        padding: .38rem .48rem;
        font-size: .78rem;
    }

    .btn-sm {
        padding: .24rem .38rem;
        font-size: .72rem;
    }

    .alert {
        padding: .38rem .45rem;
        margin-bottom: .38rem;
        font-size: .76rem;
    }

    .empty-state {
        padding: .42rem;
        font-size: .76rem;
    }

    .form-grid,
    .auto-form-grid-2,
    .auto-form-grid-3 {
        grid-template-columns: 1fr;
        gap: .34rem;
    }

    .form-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: .28rem;
        margin-top: .45rem;
    }

        .form-actions .app-button,
        .form-actions button,
        .form-actions a {
            width: 100%;
        }

    .form-label {
        font-size: .72rem;
        margin-bottom: .1rem;
    }

    .form-control,
    .form-select {
        min-height: 32px;
        padding: .3rem .38rem;
        font-size: .8rem;
    }

    textarea.form-control {
        min-height: 68px;
    }

    .mb-3 {
        margin-bottom: .34rem !important;
    }

    .details-grid,
    .review-grid,
    .message-summary-grid,
    .message-status-grid,
    .ticket-detail-grid,
    .calendar-summary-grid {
        grid-template-columns: 1fr;
        gap: .28rem;
        margin: .38rem 0;
    }

        .details-grid > div,
        .review-grid > div,
        .message-summary-grid > div,
        .message-status-grid > div,
        .ticket-detail-grid > div,
        .calendar-summary-grid > div {
            padding: .36rem;
        }

    .detail-label {
        font-size: .6rem;
        margin-bottom: .04rem;
    }

    .detail-block {
        margin-top: .5rem;
        padding-top: .45rem;
    }

    .wizard-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .22rem;
        margin: .38rem 0 .45rem;
    }

    .wizard-step {
        flex-direction: column;
        justify-content: center;
        gap: .1rem;
        padding: .3rem .16rem;
        text-align: center;
    }

        .wizard-step span {
            width: 18px;
            height: 18px;
            flex-basis: 18px;
            font-size: .6rem;
        }

        .wizard-step strong {
            font-size: .56rem;
        }

    .wizard-panel h2 {
        font-size: .9rem;
        margin-bottom: .28rem;
    }

    .order-detail-page {
        gap: .36rem;
    }

    .order-hero {
        flex-direction: column;
        gap: .34rem;
        padding: .48rem;
    }

        .order-hero h1 {
            font-size: 1rem;
            margin: .03rem 0 .16rem 0;
        }

    .order-number {
        font-size: .58rem;
    }

    .order-hero-meta {
        display: grid;
        gap: .18rem;
    }

        .order-hero-meta span {
            width: fit-content;
            padding: .1rem .34rem;
            font-size: .6rem;
        }

    .order-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: .24rem;
    }

        .order-hero-actions .app-button {
            width: 100%;
        }

    .order-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .28rem;
    }

    .order-summary-card {
        padding: .34rem;
    }

        .order-summary-card span {
            font-size: .58rem;
            margin-bottom: .03rem;
        }

        .order-summary-card strong {
            font-size: .72rem;
        }

    .order-workspace {
        grid-template-columns: 1fr;
        gap: .36rem;
    }

    .order-people-column {
        position: static;
    }

    .order-note {
        padding: .38rem;
        font-size: .76rem;
    }

    .position-timeline,
    .assignment-list,
    .compact-employee-list,
    .dashboard-message-list,
    .message-list,
    .ticket-list,
    .calendar-order-list,
    .backup-list,
    .attachment-list {
        gap: .28rem;
    }

    .position-card,
    .assignment-card,
    .compact-employee-card,
    .dashboard-message-row,
    .message-card,
    .ticket-card,
    .calendar-order-card,
    .backup-card,
    .attachment-card {
        padding: .4rem;
    }

    .position-card-header,
    .assignment-card,
    .compact-assignment-card,
    .compact-employee-card,
    .dashboard-message-row,
    .message-card,
    .ticket-card,
    .calendar-order-card,
    .backup-card,
    .attachment-card {
        flex-direction: column;
        gap: .28rem;
    }

    .position-card h3 {
        font-size: .82rem;
        margin-bottom: .06rem;
    }

    .position-card .app-muted,
    .compact-assignment-card .app-muted,
    .compact-employee-card .app-muted {
        font-size: .66rem;
    }

    .position-description {
        margin-top: .28rem;
        font-size: .74rem;
    }

    .position-card-actions,
    .position-card-actions form,
    .position-card-actions a,
    .position-card-actions button,
    .compact-employee-actions,
    .compact-employee-actions form,
    .compact-employee-actions button,
    .compact-assignment-card form,
    .compact-assignment-card button,
    .backup-card-actions,
    .backup-card-actions a {
        width: 100%;
    }

    .position-card-actions,
    .compact-employee-actions,
    .backup-card-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: .24rem;
    }

    .attachment-item {
        flex-direction: column;
        gap: .08rem;
        padding: .28rem .34rem;
    }

        .attachment-item a {
            font-size: .74rem;
        }

    .availability-badge {
        justify-content: center;
        font-size: .62rem;
        padding: .12rem .3rem;
    }

    .modal-dialog {
        margin: .3rem;
    }

    .modal-header,
    .modal-body,
    .modal-footer,
    .app-modal .modal-header,
    .app-modal .modal-body,
    .app-modal .modal-footer {
        padding: .48rem;
    }

    .modal-title {
        font-size: .88rem !important;
    }

    .modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: .28rem;
    }

        .modal-footer .app-button {
            width: 100%;
        }

    .form-hint {
        padding: .32rem;
        font-size: .68rem;
        margin-bottom: .32rem !important;
    }

    .dashboard-calendar-legend,
    .calendar-legend {
        display: none;
    }

    .dashboard-calendar-day,
    .calendar-day-row {
        grid-template-columns: 1fr;
        gap: .2rem;
    }

    .dashboard-calendar-bar,
    .calendar-day-bar {
        min-height: 38px;
    }

    .dashboard-calendar-segment,
    .calendar-segment {
        top: 5px;
        bottom: 5px;
        font-size: .62rem;
    }

    .conversation-thread {
        gap: .32rem;
        padding: .42rem;
        margin-top: .42rem;
    }

    .conversation-message {
        max-width: 90%;
        padding: .38rem .45rem;
    }

    .conversation-message-meta {
        flex-direction: column;
        gap: .04rem;
        font-size: .62rem;
    }

    .conversation-message-body {
        font-size: .78rem;
    }

    .conversation-attachment {
        flex-direction: column;
        align-items: flex-start;
        padding: .28rem .34rem;
    }

    .backup-readme-box {
        padding: .42rem;
        max-height: 500px;
    }

        .backup-readme-box pre {
            font-size: .7rem;
        }

    /* Tabellen mobil als Karten, damit keine horizontale Scrollerei nötig ist */
    .responsive-table {
        overflow: visible;
    }

        .responsive-table .table {
            display: block;
            margin: 0;
        }

            .responsive-table .table thead {
                display: none;
            }

            .responsive-table .table tbody {
                display: grid;
                gap: .32rem;
            }

            .responsive-table .table tr {
                display: grid;
                grid-template-columns: 1fr auto;
                gap: .14rem .36rem;
                padding: .4rem;
                border-radius: var(--app-radius-sm);
                border: 1px solid var(--app-border);
                background: var(--app-surface-2);
            }

            .responsive-table .table td {
                display: block;
                border: 0 !important;
                padding: 0 !important;
                font-size: .74rem;
                line-height: 1.15;
            }

                .responsive-table .table td:nth-child(1) {
                    font-size: .6rem;
                    color: var(--app-muted);
                }

                .responsive-table .table td:nth-child(2) {
                    grid-column: 1 / -1;
                    font-size: .84rem;
                    font-weight: 700;
                }

                .responsive-table .table td:nth-child(3) {
                    grid-column: 1 / -1;
                    color: var(--app-muted);
                }

                .responsive-table .table td:last-child {
                    grid-column: 2;
                    grid-row: 1 / span 2;
                    text-align: right !important;
                    align-self: start;
                }

            .responsive-table .table .btn {
                white-space: nowrap;
                font-size: .72rem;
            }

            .responsive-table .table .badge {
                font-size: .6rem;
                padding: .16rem .3rem;
            }
}


/* =========================================================
   23. Sehr kleine Displays
   ========================================================= */

@media (max-width: 420px) {
    .app-content {
        padding: .38rem;
    }

    .order-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wizard-step strong {
        font-size: .54rem;
    }

    .conversation-message {
        max-width: 94%;
    }

    .app-button {
        font-size: .74rem;
    }
}


/* =========================================================
   24. Modern UI polish
   CSS-only Feinschliff: hellere App-Flaechen, klare Hierarchie,
   bessere Touch-Ziele und Chat-/Social-App-Anmutung.
   ========================================================= */

:root {
    --app-bg: #f0f2f5;
    --app-surface: #ffffff;
    --app-surface-2: #f7f8fa;
    --app-surface-3: #eef2f7;
    --app-border: #dce1e8;
    --app-border-strong: #b9c2cf;
    --app-text: #1f2937;
    --app-muted: #667085;
    --app-muted-2: #8a94a6;
    --app-primary: #1877f2;
    --app-primary-hover: #166fe5;
    --app-accent: #25d366;
    --app-accent-soft: #dcfce7;
    --app-danger: #dc3545;
    --app-success: #16a34a;
    --app-warning: #f59e0b;
    --app-radius: 12px;
    --app-radius-sm: 10px;
    --app-gap: .75rem;
    --app-pad: .9rem;
    --app-pad-sm: .65rem;
    --app-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 10px 24px rgba(16, 24, 40, .06);
    --app-shadow-soft: 0 1px 2px rgba(16, 24, 40, .05);
}

html {
    font-size: 15px;
    background: var(--app-bg);
}

body {
    background:
        radial-gradient(circle at top left, rgba(37, 211, 102, .10), transparent 32rem),
        linear-gradient(180deg, #f7f8fb 0%, var(--app-bg) 18rem);
    color: var(--app-text);
    line-height: 1.45;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--app-primary);
    text-decoration-thickness: .08em;
    text-underline-offset: .16em;
}

a:hover {
    color: var(--app-primary-hover);
}

h1,
h2,
h3 {
    color: var(--app-text);
    letter-spacing: 0;
}

h1 {
    font-size: 1.45rem;
    font-weight: 760;
}

h2 {
    font-size: 1.08rem;
    font-weight: 730;
}

h3 {
    font-size: .96rem;
    font-weight: 720;
}

small,
.app-muted {
    color: var(--app-muted);
}

:focus-visible {
    outline: 3px solid rgba(24, 119, 242, .22);
    outline-offset: 2px;
    border-radius: 8px;
}

::selection {
    background: rgba(24, 119, 242, .18);
}

.app-shell {
    grid-template-columns: 248px minmax(0, 1fr);
    background: transparent;
}

.app-sidebar {
    padding: .9rem .8rem;
    background: rgba(255, 255, 255, .92);
    border-right: 1px solid rgba(220, 225, 232, .9);
    box-shadow: 1px 0 18px rgba(16, 24, 40, .04);
    backdrop-filter: blur(16px);
}

.app-main {
    background: transparent;
}

.app-content {
    width: min(100%, 1460px);
    margin: 0 auto;
    padding: 1.1rem;
}

.app-logo {
    padding: .35rem .35rem .75rem;
    margin-bottom: .35rem;
}

.app-logo-mark {
    width: 38px;
    height: 38px;
    color: #ffffff;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--app-accent), #128c7e);
    box-shadow: 0 8px 18px rgba(37, 211, 102, .22);
}

.app-logo-text {
    color: var(--app-text);
    font-size: .98rem;
    font-weight: 780;
}

.app-nav {
    gap: .26rem;
}

.app-nav a {
    color: #344054;
    border: 0;
    border-radius: 999px;
    padding: .66rem .76rem;
    font-size: .91rem;
    font-weight: 650;
    transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

.app-nav a:hover {
    color: var(--app-primary);
    background: #eef5ff;
    border-color: transparent;
    transform: translateX(2px);
}

.app-sidebar-footer {
    padding-top: .8rem;
}

.app-logout-button {
    color: #475467;
    border: 0;
    border-radius: 999px;
    background: #f2f4f7;
    padding: .62rem .76rem;
    font-weight: 650;
}

.app-logout-button:hover {
    color: var(--app-danger);
    background: #fff1f3;
}

.app-topbar {
    min-height: 58px;
    background: rgba(255, 255, 255, .86);
    border-bottom: 1px solid rgba(220, 225, 232, .9);
    box-shadow: 0 1px 10px rgba(16, 24, 40, .035);
    backdrop-filter: blur(16px);
    padding: 0 1.1rem;
}

.app-topbar-title {
    color: var(--app-text);
    font-size: 1rem;
    font-weight: 760;
}

.app-topbar-user {
    color: var(--app-muted);
    font-size: .84rem;
}

.app-card,
.order-section,
.backup-list-section,
.backup-readme-section,
.login-card,
.order-hero,
.order-summary-card {
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(220, 225, 232, .95);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-soft);
}

.app-card:hover,
.order-section:hover,
.backup-list-section:hover,
.backup-readme-section:hover {
    box-shadow: var(--app-shadow);
}

.page-header,
.dashboard-card-header,
.detail-block-header,
.order-section-header {
    align-items: center;
    margin-bottom: .8rem;
}

.page-header p,
.dashboard-card-header p,
.order-section-header p,
.wizard-panel > p.app-muted {
    color: var(--app-muted);
    font-size: .84rem;
}

.empty-state {
    color: #667085;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: var(--app-radius-sm);
    padding: .8rem;
}

.alert {
    border: 0;
    border-radius: var(--app-radius-sm);
    padding: .72rem .85rem;
}

.app-button,
.btn-primary {
    min-height: 38px;
    color: #ffffff;
    border: 0;
    border-radius: 999px;
    background: var(--app-primary);
    box-shadow: 0 8px 18px rgba(24, 119, 242, .18);
    font-weight: 720;
    padding: .55rem .82rem;
    transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.app-button:hover,
.btn-primary:hover {
    color: #ffffff;
    background: var(--app-primary-hover);
    box-shadow: 0 10px 22px rgba(24, 119, 242, .22);
    filter: none;
    transform: translateY(-1px);
}

.app-button-secondary,
.btn-outline-light {
    color: #344054;
    border: 1px solid var(--app-border);
    background: #ffffff;
    box-shadow: none;
}

.app-button-secondary:hover,
.btn-outline-light:hover {
    color: var(--app-primary);
    border-color: #bfd7ff;
    background: #eef5ff;
    box-shadow: none;
}

.app-button-danger,
.btn-danger {
    color: #ffffff;
    border-color: var(--app-danger);
    background: var(--app-danger);
}

.btn,
.btn-sm {
    border-radius: 999px;
    font-weight: 680;
}

.form-control,
.form-select {
    min-height: 40px;
    color: var(--app-text);
    border: 1px solid #cfd6e2;
    border-radius: 11px;
    background-color: #ffffff;
    box-shadow: inset 0 1px 1px rgba(16, 24, 40, .025);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: #91c3ff;
    box-shadow: 0 0 0 .22rem rgba(24, 119, 242, .13);
}

.form-label {
    color: #344054;
    font-size: .84rem;
    font-weight: 700;
}

.form-hint {
    color: var(--app-muted);
    background: #f8fafc;
    border-radius: var(--app-radius-sm);
}

.text-danger {
    color: #d92d20 !important;
}

.responsive-table {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background: #ffffff;
}

.table {
    --bs-table-color: var(--app-text);
    --bs-table-bg: #ffffff;
    --bs-table-striped-bg: #f8fafc;
    --bs-table-hover-bg: #eef5ff;
    --bs-table-border-color: var(--app-border);
}

.table-dark {
    --bs-table-color: var(--app-text);
    --bs-table-bg: #ffffff;
    --bs-table-striped-bg: #f8fafc;
    --bs-table-hover-bg: #eef5ff;
    --bs-table-border-color: var(--app-border);
    color: var(--app-text);
}

.table th {
    color: #667085;
    background: #f8fafc;
    font-size: .75rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.table td {
    color: var(--app-text);
    border-color: var(--app-border);
}

.badge {
    border-radius: 999px;
    padding: .34em .58em;
    font-weight: 720;
}

.text-bg-secondary {
    color: #344054 !important;
    background-color: #eef2f7 !important;
}

.text-bg-light {
    color: #05603a !important;
    background-color: var(--app-accent-soft) !important;
}

.text-bg-success {
    background-color: var(--app-success) !important;
}

.app-list-row,
.dashboard-message-row,
.message-card,
.ticket-card,
.calendar-order-card,
.backup-card,
.attachment-card,
.assignment-card,
.compact-employee-card,
.position-card,
.details-grid > div,
.review-grid > div,
.message-summary-grid > div,
.message-status-grid > div,
.ticket-detail-grid > div,
.calendar-summary-grid > div,
.backup-readme-box,
.message-body {
    color: var(--app-text);
    background: #ffffff;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    box-shadow: var(--app-shadow-soft);
}

.dashboard-message-row,
.message-card,
.ticket-card,
.calendar-order-card,
.attachment-card {
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.dashboard-message-row:hover,
.message-card:hover,
.ticket-card:hover,
.calendar-order-card:hover,
.attachment-card:hover {
    color: var(--app-text);
    border-color: #bfd7ff;
    box-shadow: var(--app-shadow);
    transform: translateY(-1px);
}

.dashboard-message-row-unread,
.message-card-unread,
.backup-card-selected {
    border-color: rgba(37, 211, 102, .55);
    box-shadow: 0 0 0 3px rgba(37, 211, 102, .10), var(--app-shadow-soft);
}

.dashboard-message-preview,
.message-preview {
    color: #344054;
    line-height: 1.35;
}

.detail-label,
.order-summary-card span,
.order-number {
    color: #667085;
    font-weight: 760;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.detail-block {
    border-top-color: var(--app-border);
}

.dashboard-calendar-bar,
.calendar-day-bar {
    background: #f8fafc;
    border-color: var(--app-border);
    border-radius: 999px;
}

.dashboard-calendar-gridline,
.calendar-gridline {
    background: rgba(16, 24, 40, .06);
}

.dashboard-calendar-empty,
.calendar-empty {
    color: #98a2b3;
}

.dashboard-calendar-segment,
.calendar-segment {
    color: #064e3b;
    border-color: rgba(37, 211, 102, .5);
    background: linear-gradient(135deg, #bbf7d0, #dcfce7);
    box-shadow: 0 6px 12px rgba(22, 163, 74, .14);
}

.dashboard-calendar-segment:hover,
.calendar-segment:hover {
    color: #064e3b;
    border-color: rgba(22, 163, 74, .65);
}

.dashboard-calendar-segment span,
.calendar-segment span,
.calendar-segment em {
    color: #047857;
}

.wizard-step {
    color: var(--app-muted);
    background: #ffffff;
    border-color: var(--app-border);
    box-shadow: var(--app-shadow-soft);
}

.wizard-step span {
    color: #667085;
    background: #f2f4f7;
    border-color: #e4e7ec;
}

.wizard-step-active {
    color: var(--app-primary);
    border-color: #bfd7ff;
    background: #eef5ff;
}

.wizard-step-active span {
    color: #ffffff;
    background: var(--app-primary);
    border-color: var(--app-primary);
}

.order-hero {
    background:
        linear-gradient(135deg, rgba(24, 119, 242, .08), rgba(37, 211, 102, .08)),
        #ffffff;
}

.order-hero-meta span,
.availability-badge {
    color: #344054;
    background: #f8fafc;
    border-color: var(--app-border);
}

.order-note,
.attachment-item,
.conversation-attachment {
    background: #f8fafc;
    border-color: var(--app-border);
}

.conversation-thread {
    background:
        linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)),
        #efeae2;
    border-color: #e6ddd4;
    border-radius: var(--app-radius);
}

.conversation-message {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

.conversation-message-own {
    color: #102a1d;
    background: #d9fdd3;
}

.conversation-message-other {
    color: var(--app-text);
    background: #ffffff;
}

.conversation-message-meta,
.conversation-message-status {
    color: #667085;
}

.conversation-message-meta strong {
    color: var(--app-text);
}

.login-page {
    background:
        radial-gradient(circle at 18% 15%, rgba(37, 211, 102, .22), transparent 28rem),
        radial-gradient(circle at 82% 18%, rgba(24, 119, 242, .18), transparent 30rem),
        var(--app-bg);
}

.login-card {
    max-width: 430px;
    padding: 1.25rem;
    box-shadow: var(--app-shadow);
}

.login-card h1 {
    font-size: 1.5rem;
}

.login-card .form-label,
.login-card .form-check-label {
    color: var(--app-text);
}

.login-card .form-control,
.app-modal .form-control {
    color: var(--app-text);
    background: #ffffff;
}

.app-modal {
    color: var(--app-text);
    background: #ffffff;
    border-color: var(--app-border);
    box-shadow: var(--app-shadow);
}

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

.mobile-bottom-nav {
    box-shadow: 0 -10px 26px rgba(16, 24, 40, .10);
}

@media (max-width: 960px) {
    .app-shell {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .app-content {
        padding: .9rem;
    }
}

@media (max-width: 768px) {
    :root {
        --app-radius: 11px;
        --app-radius-sm: 9px;
        --app-gap: .5rem;
        --app-pad: .65rem;
        --app-pad-sm: .48rem;
    }

    html {
        font-size: 14.5px;
    }

    body {
        background: var(--app-bg);
    }

    .app-shell {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    .app-topbar {
        min-height: 52px;
        padding: 0 .75rem;
    }

    .app-topbar-title {
        font-size: .96rem;
    }

    .app-content {
        width: 100%;
        padding: .62rem;
    }

    .mobile-bottom-nav {
        height: calc(60px + env(safe-area-inset-bottom));
        display: flex;
        gap: .24rem;
        align-items: stretch;
        overflow-x: auto;
        padding: .32rem .42rem calc(.32rem + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .96);
        border-top: 1px solid var(--app-border);
        backdrop-filter: blur(16px);
        scrollbar-width: none;
    }

    .mobile-bottom-nav::-webkit-scrollbar {
        display: none;
    }

    .mobile-bottom-nav a {
        min-width: 82px;
        color: #475467;
        border-radius: 999px;
        font-size: .72rem;
        font-weight: 720;
        padding: .42rem .5rem;
    }

    .mobile-bottom-nav a:hover,
    .mobile-bottom-nav a:focus-visible {
        color: var(--app-primary);
        background: #eef5ff;
    }

    .app-card,
    .order-section,
    .backup-list-section,
    .backup-readme-section {
        padding: .68rem;
        border-radius: var(--app-radius);
    }

    .page-header,
    .dashboard-card-header,
    .detail-block-header,
    .order-section-header {
        align-items: stretch;
        gap: .45rem;
    }

    .app-button,
    .btn-primary {
        min-height: 40px;
        padding: .54rem .75rem;
        font-size: .82rem;
    }

    .form-control,
    .form-select {
        min-height: 42px;
        font-size: .88rem;
    }

    .position-card,
    .assignment-card,
    .compact-employee-card,
    .dashboard-message-row,
    .message-card,
    .ticket-card,
    .calendar-order-card,
    .backup-card,
    .attachment-card {
        padding: .62rem;
    }

    .responsive-table {
        border: 0;
        background: transparent;
    }

    .responsive-table .table tr {
        padding: .62rem;
        background: #ffffff;
        box-shadow: var(--app-shadow-soft);
    }

    .conversation-thread {
        padding: .55rem;
    }

    .conversation-message {
        max-width: 92%;
        padding: .48rem .58rem;
    }
}

@media (max-width: 420px) {
    .app-content {
        padding: .5rem;
    }

    .mobile-bottom-nav a {
        min-width: 76px;
        font-size: .68rem;
    }

    .login-card {
        padding: 1rem;
    }
}


/* =========================================================
   25. Compact mobile refinement
   Mehr Uebersicht auf kleinen Displays: kleinere Karten,
   linksbuendige Inhalte und ein deutlich kompakterer Kalender.
   ========================================================= */

@media (min-width: 769px) {
    .app-content {
        width: 100%;
        max-width: 1460px;
        margin-left: 0;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    :root {
        --app-radius: 9px;
        --app-radius-sm: 8px;
        --app-gap: .36rem;
        --app-pad: .48rem;
        --app-pad-sm: .36rem;
    }

    html {
        font-size: 13px;
    }

    body {
        line-height: 1.28;
    }

    h1 {
        font-size: 1.02rem;
        line-height: 1.12;
        margin-bottom: .08rem;
    }

    h2 {
        font-size: .9rem;
    }

    h3 {
        font-size: .82rem;
    }

    p {
        margin-bottom: .24rem;
    }

    .app-shell {
        padding-bottom: calc(56px + env(safe-area-inset-bottom));
    }

    .app-topbar {
        min-height: 44px;
        padding: 0 .55rem;
    }

    .app-topbar-title {
        font-size: .86rem;
    }

    .app-content {
        padding: .38rem;
    }

    .app-card,
    .order-section,
    .backup-list-section,
    .backup-readme-section,
    .login-card,
    .order-hero {
        padding: .48rem;
        border-radius: var(--app-radius);
        box-shadow: none;
    }

    .app-card:hover,
    .order-section:hover,
    .backup-list-section:hover,
    .backup-readme-section:hover {
        box-shadow: none;
    }

    .page-header,
    .dashboard-card-header,
    .detail-block-header,
    .order-section-header {
        align-items: stretch;
        gap: .28rem;
        margin-bottom: .42rem;
        text-align: left;
    }

    .page-header p,
    .dashboard-card-header p,
    .order-section-header p,
    .wizard-panel > p.app-muted {
        display: block;
        font-size: .68rem;
        line-height: 1.2;
        margin-top: .03rem;
    }

    .app-button,
    .btn-primary {
        min-height: 32px;
        padding: .36rem .52rem;
        font-size: .72rem;
        box-shadow: none;
    }

    .btn-sm {
        min-height: 28px;
        padding: .24rem .42rem;
        font-size: .68rem;
    }

    .page-header .app-button,
    .dashboard-card-header .app-button,
    .order-section-header .app-button,
    .order-section-header button {
        width: auto;
    }

    .form-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .22rem;
        margin-top: .36rem;
    }

    .form-actions .app-button,
    .form-actions button,
    .form-actions a {
        width: auto;
        flex: 1 1 auto;
    }

    .form-control,
    .form-select {
        min-height: 34px;
        padding: .28rem .4rem;
        font-size: .78rem;
        border-radius: 8px;
    }

    textarea.form-control {
        min-height: 74px;
    }

    .form-label {
        font-size: .68rem;
        margin-bottom: .08rem;
    }

    .empty-state,
    .alert {
        padding: .38rem .45rem;
        font-size: .72rem;
        margin-bottom: .34rem;
    }

    .dashboard-grid,
    .dashboard-grid-focused,
    .calendar-page,
    .backup-page {
        gap: .38rem;
    }

    .dashboard-message-list,
    .message-list,
    .ticket-list,
    .calendar-order-list,
    .backup-list,
    .attachment-list,
    .assignment-list,
    .compact-employee-list,
    .position-timeline {
        gap: .22rem;
    }

    .dashboard-message-row,
    .message-card,
    .ticket-card,
    .calendar-order-card,
    .backup-card,
    .attachment-card,
    .assignment-card,
    .compact-employee-card,
    .position-card,
    .details-grid > div,
    .review-grid > div,
    .message-summary-grid > div,
    .message-status-grid > div,
    .ticket-detail-grid > div,
    .calendar-summary-grid > div {
        padding: .42rem;
        border-radius: var(--app-radius-sm);
        box-shadow: none;
    }

    .dashboard-message-row,
    .message-card,
    .ticket-card,
    .calendar-order-card,
    .backup-card,
    .attachment-card {
        flex-direction: row;
        align-items: flex-start;
        gap: .38rem;
    }

    .dashboard-message-title,
    .message-card h3,
    .ticket-card h2 {
        font-size: .78rem;
        line-height: 1.15;
    }

    .dashboard-message-preview,
    .message-preview {
        margin: .08rem 0;
        font-size: .72rem;
        line-height: 1.22;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .dashboard-message-row .app-muted,
    .message-card .app-muted,
    .calendar-order-card .app-muted {
        font-size: .64rem;
    }

    .dashboard-message-status,
    .message-card-status,
    .ticket-card-status,
    .backup-card-actions,
    .compact-employee-actions,
    .position-card-actions {
        justify-content: flex-end;
        gap: .18rem;
        min-width: max-content;
    }

    .badge {
        padding: .18rem .34rem;
        font-size: .58rem;
    }

    .message-summary-grid,
    .message-status-grid,
    .calendar-summary-grid,
    .ticket-detail-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .24rem;
        margin: .34rem 0;
    }

    .message-summary-grid strong,
    .calendar-summary-grid strong {
        font-size: .8rem;
    }

    .detail-label {
        font-size: .56rem;
    }

    .detail-block {
        margin-top: .42rem;
        padding-top: .38rem;
    }

    .detail-block h2 {
        font-size: .82rem;
        margin-bottom: .3rem;
    }

    .mobile-bottom-nav {
        height: calc(52px + env(safe-area-inset-bottom));
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: .12rem;
        overflow: hidden;
        padding: .26rem .28rem calc(.26rem + env(safe-area-inset-bottom));
    }

    .mobile-bottom-nav a {
        min-width: 0;
        width: 100%;
        border-radius: 10px;
        padding: .28rem .12rem;
        font-size: .62rem;
        line-height: 1.05;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .calendar-page {
        display: block;
    }

    .calendar-page .page-header .form-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .2rem;
        margin-top: .18rem;
    }

    .calendar-page .page-header .form-actions .app-button {
        width: 100%;
        min-width: 0;
        padding-left: .2rem;
        padding-right: .2rem;
        font-size: .62rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .calendar-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .calendar-legend {
        display: none;
    }

    .calendar-week {
        gap: .22rem;
    }

    .calendar-day-row,
    .dashboard-calendar-day {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: .28rem;
        align-items: center;
    }

    .calendar-day-label,
    .dashboard-calendar-date {
        font-size: .66rem;
        line-height: 1.05;
        text-align: left;
    }

    .calendar-day-label strong,
    .dashboard-calendar-date strong {
        display: block;
        font-size: .66rem;
    }

    .calendar-day-label span,
    .dashboard-calendar-date span {
        font-size: .6rem;
    }

    .calendar-day-bar,
    .dashboard-calendar-bar {
        min-height: 28px;
        border-radius: 8px;
        overflow: hidden;
    }

    .calendar-gridline,
    .dashboard-calendar-gridline {
        display: none;
    }

    .calendar-empty,
    .dashboard-calendar-empty {
        justify-content: flex-start;
        padding-left: .42rem;
        font-size: .62rem;
    }

    .calendar-segment,
    .dashboard-calendar-segment {
        top: 3px;
        bottom: 3px;
        min-width: 30px;
        border-radius: 6px;
        gap: .14rem;
        padding: .08rem .22rem;
        font-size: .56rem;
        line-height: 1;
    }

    .calendar-segment span,
    .dashboard-calendar-segment span {
        font-size: .54rem;
    }

    .calendar-segment em {
        display: none;
    }

    .calendar-segment strong,
    .dashboard-calendar-segment strong {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .calendar-order-card {
        flex-direction: row;
        align-items: center;
    }

    .calendar-order-card > div {
        min-width: 0;
    }

    .calendar-order-card strong,
    .calendar-order-card div {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .availability-badge {
        flex: 0 0 auto;
        padding: .1rem .3rem;
        font-size: .58rem;
    }

    .conversation-thread {
        gap: .24rem;
        padding: .34rem;
        margin-top: .34rem;
        border-radius: 9px;
    }

    .conversation-message {
        max-width: 88%;
        padding: .34rem .42rem;
        border-radius: 12px;
    }

    .conversation-message-meta {
        gap: .02rem;
        font-size: .56rem;
        margin-bottom: .12rem;
    }

    .conversation-message-meta strong {
        font-size: .62rem;
    }

    .conversation-message-body {
        font-size: .72rem;
        line-height: 1.24;
    }

    .conversation-message-status {
        font-size: .55rem;
        margin-top: .12rem;
    }
}

@media (max-width: 420px) {
    .app-content {
        padding: .32rem;
    }

    .mobile-bottom-nav a {
        font-size: .58rem;
    }

    .calendar-day-row,
    .dashboard-calendar-day {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: .22rem;
    }

    .message-summary-grid,
    .message-status-grid,
    .calendar-summary-grid,
    .ticket-detail-grid {
        gap: .18rem;
    }
}


/* =========================================================
   26. Razor structure refinements
   Neue Markup-Hooks fuer kompakte Mobile-Listen und Agenda-Kalender.
   ========================================================= */

.calendar-mobile-agenda,
.dashboard-calendar-agenda {
    display: none;
}

.message-card-main,
.dashboard-message-main,
.conversation-title-block,
.calendar-order-card > div {
    min-width: 0;
}

.message-card-main h3,
.dashboard-message-title,
.calendar-agenda-main strong,
.calendar-agenda-main em {
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-card-date,
.dashboard-message-date {
    margin-top: .12rem;
}

.conversation-page-header {
    align-items: center;
}


/* =========================================================
   27. Tickets
   ========================================================= */

.ticket-state-icon {
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: .28rem;
    border-radius: .32rem;
    font-size: .78rem;
    font-weight: 850;
    line-height: 1;
    vertical-align: .1rem;
}

.ticket-state-icon-open {
    background: var(--app-warning);
    color: #111111;
}

.ticket-state-icon-completed {
    background: var(--app-success);
    color: #ffffff;
}

.ticket-description-text {
    white-space: pre-wrap;
    margin-bottom: 0;
}


/* =========================================================
   28. Systemlogs
   ========================================================= */

.dashboard-system-card {
    margin-bottom: .55rem;
}

.system-log-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .38rem;
}

.system-log-list {
    display: flex;
    flex-direction: column;
    gap: .42rem;
}

.system-log-entry {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-2);
    padding: .48rem;
}

.system-log-entry-warning {
    border-color: rgba(255, 193, 7, .7);
}

.system-log-entry-error {
    border-color: rgba(220, 53, 69, .75);
}

.system-log-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .28rem;
    align-items: center;
    color: var(--app-muted);
    font-size: .68rem;
    margin-bottom: .34rem;
}

.system-log-entry pre {
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    color: var(--app-text);
    font-size: .72rem;
}

.system-log-exception {
    margin-top: .35rem !important;
    color: #ffb3b3 !important;
}

@media (max-width: 768px) {
    .system-log-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .system-log-actions .app-button {
        flex: 1 1 100%;
    }
}

@media (max-width: 768px) {
    .dashboard-message-main,
    .message-card-main {
        flex: 1 1 auto;
    }

    .dashboard-message-status,
    .message-card-status {
        flex: 0 0 auto;
        max-width: 38%;
    }

    .message-card-status .badge,
    .dashboard-message-status .badge {
        display: block;
        width: fit-content;
        margin-left: auto;
    }

    .message-card-participant,
    .dashboard-message-participant {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .message-card-date,
    .dashboard-message-date {
        margin-top: .06rem;
    }

    .calendar-week-bars,
    .dashboard-calendar-bars,
    .dashboard-calendar-legend {
        display: none;
    }

    .calendar-mobile-agenda,
    .dashboard-calendar-agenda {
        display: grid;
        gap: .24rem;
    }

    .dashboard-calendar-agenda {
        margin-top: .1rem;
    }

    .calendar-agenda-day {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: .28rem;
        align-items: start;
        padding: .32rem;
        border: 1px solid var(--app-border);
        border-radius: var(--app-radius-sm);
        background: #ffffff;
    }

    .calendar-agenda-date {
        color: var(--app-text);
        line-height: 1.05;
        text-align: left;
    }

    .calendar-agenda-date strong {
        display: block;
        font-size: .66rem;
    }

    .calendar-agenda-date span {
        display: block;
        color: var(--app-muted);
        font-size: .58rem;
        margin-top: .06rem;
    }

    .calendar-agenda-items {
        display: grid;
        gap: .16rem;
        min-width: 0;
    }

    .calendar-agenda-item,
    .calendar-agenda-empty {
        min-height: 28px;
        border-radius: 7px;
        padding: .22rem .3rem;
        font-size: .66rem;
    }

    .calendar-agenda-item {
        display: grid;
        grid-template-columns: 70px minmax(0, 1fr);
        gap: .32rem;
        align-items: center;
        color: var(--app-text);
        text-decoration: none;
        background: #f8fafc;
        border: 1px solid var(--app-border);
    }

    .calendar-agenda-item:hover {
        color: var(--app-text);
        border-color: #bfd7ff;
        background: #eef5ff;
    }

    .calendar-agenda-time {
        color: var(--app-muted);
        font-size: .58rem;
        white-space: nowrap;
    }

    .calendar-agenda-main {
        display: flex;
        align-items: baseline;
        gap: .25rem;
        min-width: 0;
    }

    .calendar-agenda-main strong {
        flex: 0 0 auto;
        color: var(--app-text);
        font-size: .66rem;
    }

    .calendar-agenda-main em {
        min-width: 0;
        color: var(--app-muted);
        font-size: .62rem;
        font-style: normal;
        white-space: nowrap;
    }

    .calendar-agenda-empty {
        display: flex;
        align-items: center;
        color: var(--app-muted);
        background: #f8fafc;
        border: 1px dashed #cbd5e1;
    }

    .calendar-page .detail-block {
        margin-top: .5rem;
    }

    .calendar-order-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .32rem;
        align-items: center;
    }

    .calendar-order-card > div > div:not(.app-muted) {
        font-size: .7rem;
        white-space: nowrap;
    }

    .conversation-page-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .conversation-page-header .app-button {
        width: auto;
        min-width: 64px;
    }

    .conversation-title-block h1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .conversation-title-block p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .conversation-reply {
        margin-top: .44rem;
    }

    .conversation-reply .mb-3 {
        margin-bottom: .32rem !important;
    }

    .conversation-reply-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .conversation-reply-actions .app-button {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .calendar-agenda-day {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: .22rem;
        padding: .28rem;
    }

    .calendar-agenda-item {
        grid-template-columns: 62px minmax(0, 1fr);
        gap: .24rem;
    }

    .calendar-agenda-main em {
        display: none;
    }
}

.privacy-content {
    max-width: 920px;
}

.privacy-content h2 {
    margin-top: 1.6rem;
}

.privacy-content h2:first-child {
    margin-top: 0;
}

.privacy-content h3 {
    margin-top: 1.2rem;
}

.privacy-content p,
.privacy-content li {
    line-height: 1.55;
}

.privacy-editor {
    min-height: 560px;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: .86rem;
    line-height: 1.5;
}