:root {
    --bg: #f5f7fb;
    --panel: #ffffff;
    --panel-soft: #f8fafc;
    --text: #101828;
    --muted: #667085;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --border: #e5e7eb;
    --danger: #dc2626;
    --success-bg: #dcfce7;
    --success-text: #15803d;
    --shadow: 0 16px 38px rgba(15, 23, 42, .08);
    --radius: 18px;
}

html[data-theme="dark"] {
    --bg: #0b1120;
    --panel: #111827;
    --panel-soft: #1f2937;
    --text: #f9fafb;
    --muted: #9ca3af;
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --border: #273244;
    --danger: #f87171;
    --success-bg: #052e16;
    --success-text: #86efac;
    --shadow: 0 18px 44px rgba(0, 0, 0, .35);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
.button-primary,
.button-secondary {
    border: 0;
    border-radius: 12px;
    padding: 9px 13px;
    font-weight: 700;
    cursor: pointer;
    font-size: 14px;
}

button,
.button-primary {
    background: var(--primary);
    color: white;
}

button:hover,
.button-primary:hover {
    background: var(--primary-dark);
}

.button-secondary {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
}

.topbar {
    height: 68px;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(14px);
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
}

.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--primary);
    color: white;
    display: grid;
    place-items: center;
    font-weight: 900;
}

.topbar-brand small {
    display: block;
    color: var(--muted);
    margin-top: 1px;
    font-size: 13px;
}

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

.logged-in-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.settings-menu,
.module-add-menu {
    position: relative;
}

.settings-menu summary,
.module-add-menu summary {
    list-style: none;
    cursor: pointer;
}

.settings-menu summary::-webkit-details-marker,
.module-add-menu summary::-webkit-details-marker {
    display: none;
}

.settings-menu summary {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--panel-soft);
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 800;
}

.settings-dropdown {
    position: absolute;
    right: 0;
    top: 52px;
    width: 240px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 8px;
    display: grid;
    gap: 4px;
}

.settings-dropdown a,
.settings-dropdown button {
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--text);
    padding: 11px 12px;
    border-radius: 10px;
    font-weight: 700;
}

.settings-dropdown a:hover,
.settings-dropdown button:hover {
    background: var(--panel-soft);
}

.settings-dropdown form {
    border-top: 1px solid var(--border);
    margin-top: 6px;
    padding-top: 6px;
}

.settings-dropdown .danger {
    color: var(--danger);
}

.main-content {
    padding: 26px 30px 46px;
}

.main-login {
    min-height: 100vh;
}

.page-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    margin-bottom: 14px;
}

.page-header h1 {
    margin: 0;
    font-size: 30px;
    letter-spacing: -0.03em;
}

.page-header p {
    margin: 3px 0 0;
    color: var(--muted);
}

.card,
.login-card,
.customer-table-card,
.detail-card,
.module-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.collapsed-settings {
    margin-bottom: 12px;
    padding: 0;
    overflow: hidden;
}

.collapsed-settings > details > summary {
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 800;
    color: var(--muted);
    list-style: none;
}

.collapsed-settings > details > summary::-webkit-details-marker {
    display: none;
}

.collapsed-settings > details[open] > summary {
    border-bottom: 1px solid var(--border);
}

.settings-form {
    display: grid;
    grid-template-columns: minmax(180px, .8fr) minmax(170px, 220px) minmax(170px, 220px) auto;
    gap: 12px;
    align-items: end;
    padding: 12px;
}

.settings-form label {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
    font-weight: 800;
}

.checkbox-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    color: var(--text) !important;
}

.checkbox-row input {
    width: auto;
}

select,
input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 9px 11px;
    font: inherit;
    background: var(--panel);
    color: var(--text);
}

.customer-table-card {
    overflow: hidden;
}

.customer-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.customer-table th {
    text-align: left;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    border-bottom: 1px solid var(--border);
    padding: 9px 10px;
    white-space: nowrap;
}

.customer-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    vertical-align: middle;
}

.customer-table tbody tr {
    cursor: pointer;
}

.customer-table tbody tr:hover {
    background: var(--panel-soft);
}

.marker-col {
    width: 42px;
    text-align: center;
}

.number-col {
    width: 90px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.name-col {
    width: 220px;
}

.name-col strong {
    display: block;
    line-height: 1.2;
}

.name-col small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}

.alias-col {
    width: 150px;
    color: var(--muted);
}

.status-col {
    width: 100px;
}

.open-col {
    width: 42px;
    text-align: center;
    font-size: 24px !important;
    color: var(--muted);
}

.list-marker {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    font-weight: 900;
    font-size: 13px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 800;
}

.status-pill.muted {
    background: var(--panel-soft);
    color: var(--muted);
}

.status-pill.success {
    background: var(--success-bg);
    color: var(--success-text);
}

.table-footer {
    padding: 9px 18px;
    color: var(--muted);
    font-size: 13px;
    background: var(--panel);
}

.empty {
    color: var(--muted);
    padding: 18px;
}

.customer-detail-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
}

.customer-detail-title h1 {
    margin: 0;
    font-size: 30px;
    letter-spacing: -0.03em;
}

.customer-detail-title p {
    margin: 4px 0 0;
    color: var(--muted);
}

.customer-detail-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.module-add-menu summary {
    background: var(--primary);
    color: white;
    border-radius: 12px;
    padding: 9px 13px;
    font-weight: 800;
}

.module-add-menu div {
    position: absolute;
    right: 0;
    top: 46px;
    width: 260px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 8px;
    display: grid;
    gap: 4px;
    z-index: 10;
}

.module-add-menu button {
    background: transparent;
    color: var(--text);
    text-align: left;
}

.module-add-menu button:hover {
    background: var(--panel-soft);
}

.customer-detail-grid {
    display: grid;
    grid-template-columns: minmax(360px, .9fr) 1.1fr;
    gap: 18px;
}

.detail-card {
    padding: 22px;
}

.card-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.card-title-row h2 {
    margin: 0;
}

.icon-box {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.modern-details {
    display: grid;
    grid-template-columns: 150px 1fr;
    margin: 0;
}

.modern-details dt,
.modern-details dd {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.modern-details dt {
    color: var(--muted);
    font-weight: 800;
}

.modern-details dd {
    margin: 0;
}

.module-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.module-card {
    padding: 14px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    text-align: left;
    color: var(--text);
}

.module-card:hover {
    background: var(--panel-soft);
}

.module-card strong {
    display: block;
}

.module-card small {
    display: block;
    color: var(--muted);
    margin-top: 3px;
}

.module-card b {
    color: var(--muted);
    font-size: 22px;
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 420px;
    padding: 32px;
}

.login-card h1 {
    margin: 0 0 8px;
}

.login-card p {
    margin-top: 0;
    color: var(--muted);
}

label {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    font-weight: 700;
}

.login-card button {
    width: 100%;
    margin-top: 22px;
}

.alert {
    background: #fef2f2;
    color: var(--danger);
    border: 1px solid #fecaca;
    padding: 12px;
    border-radius: 12px;
    margin: 16px 0;
}

@media (max-width: 1100px) {
    .main-content {
        padding: 18px;
    }

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

    .customer-table {
        min-width: 1050px;
    }

    .customer-table-card {
        overflow-x: auto;
    }

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

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

    .topbar-brand small,
    .logged-in-user span {
        display: none;
    }

    .logged-in-user strong {
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .main-content {
        padding: 14px;
    }

    .page-header,
    .customer-detail-header {
        grid-template-columns: 1fr;
        display: grid;
    }

    .settings-form,
    .module-card-grid {
        grid-template-columns: 1fr;
    }

    .page-header h1,
    .customer-detail-title h1 {
        font-size: 26px;
    }

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

    .modern-details dt {
        border-bottom: 0;
        padding-bottom: 2px;
    }

    .modern-details dd {
        padding-top: 0;
    }
}

.customer-sections-grid {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.customer-module-section {
    scroll-margin-top: 90px;
}

.section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.section-head h2 {
    margin: 0;
}

.section-head p {
    margin: 4px 0 0;
    color: var(--muted);
}

.inline-create-form {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--panel-soft);
    margin-bottom: 14px;
}

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

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

.compact-list {
    display: grid;
    gap: 8px;
}

.compact-list-row {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr .8fr .8fr auto;
    gap: 12px;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 12px;
    background: var(--panel);
}

.phone-row {
    grid-template-columns: 1fr 1fr 1.5fr auto;
}

.compact-list-row strong {
    display: block;
}

.compact-list-row small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
}

.compact-list-row a,
.modern-details a {
    color: var(--primary);
    font-weight: 700;
}

.danger-button {
    background: transparent;
    color: var(--danger);
    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
}

.danger-button:hover {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.row-note {
    margin: -2px 12px 4px;
    color: var(--muted);
    font-size: 13px;
}

.compact-empty {
    padding: 0;
    margin: 0;
}

.module-add-menu a {
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 9px 13px;
    border-radius: 12px;
    font-weight: 700;
}

.module-add-menu a:hover {
    background: var(--panel-soft);
}

@media (max-width: 1200px) {
    .contact-form,
    .phone-form,
    .compact-list-row,
    .phone-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .contact-form,
    .phone-form,
    .compact-list-row,
    .phone-row {
        grid-template-columns: 1fr;
    }
}

.title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.two-columns {
    grid-template-columns: 1fr 1fr;
}

.section-title-with-icon {
    display: flex;
    align-items: center;
    gap: 12px;
}

.inline-add-panel {
    position: relative;
}

.inline-add-panel > summary {
    list-style: none;
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 12px;
    font-weight: 800;
    background: var(--panel);
    color: var(--text);
}

.inline-add-panel > summary::-webkit-details-marker {
    display: none;
}

.inline-add-panel[open] > summary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.inline-add-panel .inline-create-form {
    position: absolute;
    right: 0;
    top: 46px;
    width: min(720px, calc(100vw - 60px));
    z-index: 15;
    box-shadow: var(--shadow);
}

.mini-data-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.mini-data-table th {
    text-align: left;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    padding: 9px 8px;
    border-bottom: 1px solid var(--border);
}

.mini-data-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    vertical-align: middle;
}

.mini-data-table tr:last-child td {
    border-bottom: 0;
}

.mini-data-table a {
    color: var(--primary);
    font-weight: 700;
}

.note-row td {
    color: var(--muted);
    font-size: 12px;
    padding-top: 0;
}

.icon-danger-button {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
}

.icon-danger-button:hover {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
}

.type-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 800;
    background: var(--panel-soft);
    color: var(--muted);
}

.type-zentrale {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
}

.type-technik {
    background: color-mix(in srgb, #22c55e 16%, transparent);
    color: #22c55e;
}

.type-buchhaltung {
    background: color-mix(in srgb, #f59e0b 16%, transparent);
    color: #f59e0b;
}

.type-notfall {
    background: color-mix(in srgb, #ef4444 16%, transparent);
    color: #ef4444;
}

.type-mobil {
    background: color-mix(in srgb, #8b5cf6 16%, transparent);
    color: #8b5cf6;
}

@media (max-width: 1200px) {
    .two-columns {
        grid-template-columns: 1fr;
    }

    .inline-add-panel .inline-create-form {
        position: static;
        width: 100%;
        margin-top: 12px;
    }
}

.modern-details dd small,
.mini-data-table td small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}

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

.contact-method-form {
    grid-template-columns: 1fr 150px 1fr 160px 1.2fr 220px 1fr auto;
}

@media (max-width: 1400px) {
    .contact-method-form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .compact-form,
    .contact-method-form {
        grid-template-columns: 1fr;
    }
}

.form-actions {
    display: flex;
    gap: 8px;
}

.row-actions-menu {
    position: relative;
}

.row-actions-menu summary {
    list-style: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--muted);
}

.row-actions-menu summary::-webkit-details-marker {
    display: none;
}

.row-actions-menu summary:hover {
    background: var(--panel-soft);
}

.row-actions-menu > div {
    position: absolute;
    right: 0;
    top: 36px;
    min-width: 180px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 8px;
    z-index: 20;
    display: grid;
    gap: 4px;
}

.row-actions-menu button {
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--text);
}

.row-actions-menu button:hover {
    background: var(--panel-soft);
}

.hidden-edit-row {
    display: none;
}

.hidden-edit-row.visible {
    display: table-row;
}

.edit-inline-form {
    display: grid;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    background: var(--panel-soft);
    border: 1px solid var(--border);
}

.edit-inline-form .form-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.edit-inline-form .danger-button {
    margin-left: auto;
}

.remote-access-form {
    grid-template-columns: 1fr 150px 1fr 1fr 1fr 1fr 1fr 120px auto;
}

.secret-value {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 8px;
    background: var(--panel-soft);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
}

@media (max-width: 1500px) {
    .remote-access-form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .remote-access-form {
        grid-template-columns: 1fr;
    }
}

.remote-link {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

.remote-link:hover {
    text-decoration: underline;
}

.secret-toggle {
    border: 1px solid var(--border);
    background: var(--panel-soft);
    color: var(--muted);
    border-radius: 9px;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.secret-toggle.visible {
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .02em;
}
.login-user-block {
    display: flex;
    align-items: center;
    gap: 8px;
}

.secret-toggle.small {
    padding: 2px 6px;
    min-height: unset;
    font-size: 11px;
}

.document-form {
    grid-template-columns: 1fr 180px 1.2fr 1.2fr auto;
}

.document-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.document-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--panel);
}

.document-preview {
    background: var(--panel-soft);
    display: grid;
    place-items: center;
    border-bottom: 1px solid var(--border);
}

.document-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.file-icon {
    width: 66px;
    height: 66px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    color: var(--primary);
    font-weight: 900;
}

.document-body {
    padding: 12px;
}

.document-body strong {
    display: block;
}

.document-body small {
    display: block;
    color: var(--muted);
    margin-top: 3px;
    word-break: break-all;
}

.document-body p {
    color: var(--muted);
    font-size: 13px;
    margin: 8px 0 0;
}

.document-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 9px;
}

.document-meta span {
    border-radius: 999px;
    padding: 3px 8px;
    background: var(--panel-soft);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.document-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

.document-actions > a {
    color: var(--primary);
    font-weight: 800;
}

.document-edit-panel {
    display: none;
}

.document-edit-panel.visible {
    display: block;
}

.document-edit-form {
    margin-top: -6px;
    margin-bottom: 8px;
    grid-template-columns: 1fr 180px 1.2fr auto;
}

@media (max-width: 1100px) {
    .document-form,
    .document-edit-form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .document-form,
    .document-edit-form {
        grid-template-columns: 1fr;
    }
}
.customer-detail-grid {
    grid-template-columns: 1fr;
}

.customer-sections-grid {
    gap: 28px;
    margin-top: 28px;
}

.customer-module-section {
    margin-bottom: 0;
}

.dropzone-form {
    border: 2px dashed var(--border);
    border-radius: 18px;
    background: var(--panel-soft);
    padding: 22px;
    display: grid;
    gap: 14px;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.dropzone-form.drag-over {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--panel-soft));
    transform: scale(1.01);
}

.hidden-file-input {
    display: none;
}

.dropzone-label {
    margin: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    text-align: center;
    gap: 6px;
    min-height: 120px;
    color: var(--text);
}

.dropzone-label strong {
    font-size: 20px;
}

.dropzone-label span {
    color: var(--muted);
}

.dropzone-label small {
    color: var(--muted);
}

.dropzone-selected {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    border-top: 1px solid var(--border);
    padding-top: 14px;
}

.dropzone-selected span {
    font-weight: 800;
    word-break: break-all;
}

@media (max-width: 700px) {
    .dropzone-selected {
        align-items: stretch;
        flex-direction: column;
    }
}

/* harte Abschnittsabstände in der Kundenakte */
.customer-module-section {
    margin-top: 28px !important;
}

.customer-module-section + .customer-module-section {
    margin-top: 28px !important;
}

.customer-detail-grid + .customer-module-section,
.customer-detail-grid + .customer-sections-grid,
.customer-sections-grid {
    margin-top: 32px !important;
}

.customer-sections-grid {
    display: grid !important;
    gap: 32px !important;
}

/* innerhalb der Cards etwas mehr Luft */
.customer-module-section {
    padding: 26px 24px !important;
}

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

.user-edit-form {
    grid-template-columns: 1fr 1fr 1fr 180px 140px auto;
}

@media (max-width: 1200px) {
    .user-form,
    .user-edit-form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .user-form,
    .user-edit-form {
        grid-template-columns: 1fr;
    }
}

.notice {
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-weight: 800;
}

.success-notice {
    background: color-mix(in srgb, #22c55e 14%, var(--panel));
    color: #22c55e;
    border: 1px solid color-mix(in srgb, #22c55e 35%, var(--border));
}

.error-notice {
    background: color-mix(in srgb, #ef4444 14%, var(--panel));
    color: #ef4444;
    border: 1px solid color-mix(in srgb, #ef4444 35%, var(--border));
}

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

.lexware-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.lexware-stats > div {
    border: 1px solid var(--border);
    background: var(--panel-soft);
    border-radius: 16px;
    padding: 14px;
}

.lexware-stats span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.lexware-stats strong {
    display: block;
    margin-top: 6px;
    font-size: 22px;
}

.top-space {
    margin-top: 16px;
}

button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

@media (max-width: 800px) {
    .lexware-key-form,
    .lexware-stats {
        grid-template-columns: 1fr;
    }
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.brand-image {
    height: 44px;
    width: auto;
    object-fit: contain;
    display: block;
}

.brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brand-text strong {
    color: var(--text);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.03em;
}

.brand-text small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

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

@media (max-width: 1300px) {
    .credential-form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .credential-form {
        grid-template-columns: 1fr;
    }
}

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

.remote-access-form .form-actions {
    grid-column: 1 / -1;
}

.copy-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.copyable {
    cursor: copy;
    border-radius: 6px;
    padding: 2px 4px;
}

.copyable:hover {
    background: var(--panel-soft);
}

.copyable.copied,
.copy-button.copied,
.remote-connect-button.copied {
    outline: 2px solid var(--primary);
    background: color-mix(in srgb, var(--primary) 18%, var(--panel-soft));
}

.copy-button {
    padding: 3px 6px;
    border-radius: 8px;
    background: var(--panel-soft);
    color: var(--muted);
    border: 1px solid var(--border);
    font-size: 12px;
}

.remote-connect-button {
    padding: 5px 9px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 700px) {
    .remote-access-form {
        grid-template-columns: 1fr;
    }
}
.document-preview iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--panel-soft);
}

.selected-file-list {
    margin: 8px 0 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: 13px;
    max-height: 130px;
    overflow: auto;
}

.selected-file-list li {
    margin: 3px 0;
}

.document-edit-panel {
    margin-top: 10px;
    grid-column: 1 / -1;
}

.document-edit-form {
    grid-template-columns: 1fr 180px 1.5fr auto;
    width: 100%;
}

.document-edit-form .form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.document-card {
    display: flex;
    flex-direction: column;
    min-height: 390px;
}

.document-preview {
    height: 280px;
    overflow: hidden;
}

.document-preview iframe {
    width: 100%;
    height: 100%;
    border: 0;
    transform: scale(1.08);
    transform-origin: top center;
    pointer-events: none;
}

.document-body {
    flex: 1;
    padding: 12px;
}

.document-body strong {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
}

.document-body small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    word-break: break-word;
}

.document-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--border);
    padding: 10px 12px;
    margin-top: auto;
}

.document-actions > a {
    color: var(--primary);
    font-weight: 900;
}

.document-edit-button {
    padding: 6px 10px;
    font-size: 13px;
}


/* Remotezugänge: mobile-first Kartenlayout */
.remote-section-head {
    align-items: center;
}

.remote-add-panel > summary {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.remote-card-list {
    display: grid;
    gap: 12px;
}

.remote-card-v2 {
    --remote-accent: var(--primary);
    --remote-soft: color-mix(in srgb, var(--primary) 8%, transparent);
    position: relative;
    border: 1px solid color-mix(in srgb, var(--remote-accent) 20%, var(--border));
    border-left: 4px solid var(--remote-accent);
    border-radius: 18px;
    background:
        radial-gradient(circle at top left, var(--remote-soft), transparent 44%),
        color-mix(in srgb, var(--panel) 88%, var(--panel-soft));
    padding: 12px;
    overflow: hidden;
}

.remote-card-v2.is-favorite {
    border-top-color: color-mix(in srgb, #facc15 42%, var(--border));
    border-right-color: color-mix(in srgb, #facc15 32%, var(--border));
    border-bottom-color: color-mix(in srgb, #facc15 32%, var(--border));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #facc15 14%, transparent),
        0 0 0 1px color-mix(in srgb, var(--remote-accent) 8%, transparent);
}

.remote-kind-anydesk {
    --remote-accent: #3b82f6;
    --remote-soft: rgba(59, 130, 246, .13);
}

.remote-kind-teamviewer {
    --remote-accent: #0ea5e9;
    --remote-soft: rgba(14, 165, 233, .13);
}

.remote-kind-rdp {
    --remote-accent: #8b5cf6;
    --remote-soft: rgba(139, 92, 246, .13);
}

.remote-kind-ssh {
    --remote-accent: #22c55e;
    --remote-soft: rgba(34, 197, 94, .12);
}

.remote-kind-vpn {
    --remote-accent: #f59e0b;
    --remote-soft: rgba(245, 158, 11, .13);
}

.remote-kind-web {
    --remote-accent: #ec4899;
    --remote-soft: rgba(236, 72, 153, .12);
}

.remote-kind-other {
    --remote-accent: #94a3b8;
    --remote-soft: rgba(148, 163, 184, .10);
}

.remote-card-topline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.remote-card-title-block {
    min-width: 0;
}

.remote-card-title-block h3 {
    margin: 0;
    color: var(--text);
    font-size: 16px;
    line-height: 1.25;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.remote-card-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.remote-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    min-height: 24px;
    padding: 3px 9px 3px 6px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--remote-accent) 35%, transparent);
    background: color-mix(in srgb, var(--remote-accent) 16%, var(--panel-soft));
    color: color-mix(in srgb, var(--remote-accent) 82%, var(--text));
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .045em;
    line-height: 1;
}

.remote-type-icon {
    width: 16px;
    height: 16px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--remote-accent);
    color: white;
    font-size: 10px;
    line-height: 1;
}

.remote-favorite-star {
    color: #facc15;
    font-size: 14px;
    line-height: 1;
}

.remote-actions-menu {
    flex: 0 0 auto;
}

.remote-actions-menu summary {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    background: var(--panel-soft);
    border-radius: 11px;
    font-size: 18px;
}

.remote-card-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.remote-field-box {
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--remote-accent) 12%, var(--border));
    background: color-mix(in srgb, var(--remote-accent) 4%, var(--panel-soft));
    border-radius: 14px;
    padding: 10px;
}

.remote-field-label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.remote-value-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.remote-main-value,
.remote-empty-value {
    min-width: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.remote-empty-value {
    color: var(--muted);
}

.remote-quick-actions {
    display: flex;
    align-items: stretch;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.remote-connect-primary,
.remote-action-button,
.remote-mini-copy {
    border: 1px solid var(--border);
    border-radius: 11px;
    min-height: 36px;
    padding: 6px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.remote-connect-primary {
    background: var(--remote-accent);
    color: white;
    border-color: var(--remote-accent);
    flex: 1 1 120px;
}

.remote-connect-primary:hover {
    background: color-mix(in srgb, var(--remote-accent) 82%, black);
}

.remote-action-button,
.remote-mini-copy {
    background: var(--panel-soft);
    color: var(--text);
}

.remote-action-button:hover,
.remote-mini-copy:hover {
    background: color-mix(in srgb, var(--primary) 12%, var(--panel-soft));
}

.remote-action-button small {
    font-size: 11px;
    font-weight: 900;
    color: inherit;
}

.remote-action-button.visible {
    outline: 2px solid color-mix(in srgb, var(--primary) 60%, transparent);
    background: color-mix(in srgb, var(--primary) 16%, var(--panel-soft));
}

.remote-secret-list {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.remote-secret-row {
    display: grid;
    grid-template-columns: 1fr minmax(0, 1.2fr) auto;
    align-items: center;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
    background: color-mix(in srgb, var(--primary) 8%, var(--panel-soft));
    border-radius: 13px;
    padding: 8px;
}

.remote-secret-row[hidden] {
    display: none !important;
}

.remote-secret-row span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.remote-secret-row code {
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.remote-note {
    margin: 10px 0 0;
    border-left: 3px solid var(--border);
    padding: 6px 0 6px 10px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
}

.remote-edit-panel.hidden-edit-row {
    display: none;
    margin-top: 12px;
}

.remote-edit-panel.hidden-edit-row.visible {
    display: block;
}

.remote-edit-panel .remote-access-form {
    margin-bottom: 0;
}

.copy-button.copied,
.remote-connect-button.copied,
.remote-action-button.copied,
.remote-mini-copy.copied,
.copyable.copied {
    outline: 2px solid color-mix(in srgb, var(--primary) 70%, transparent);
    background: color-mix(in srgb, var(--primary) 18%, var(--panel-soft));
}

@media (max-width: 700px) {
    .customer-module-section {
        padding: 16px 12px !important;
    }

    .remote-section-head {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .remote-add-panel > summary {
        width: 100%;
    }

    .remote-card-v2 {
        padding: 12px;
        border-radius: 17px;
    }

    .remote-quick-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .remote-connect-primary {
        grid-column: 1 / -1;
        min-height: 40px;
    }

    .remote-action-button {
        min-width: 0;
        width: 100%;
    }

    .remote-secret-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .remote-secret-row code {
        display: block;
        padding: 8px;
        border-radius: 9px;
        background: var(--panel);
        border: 1px solid var(--border);
    }
}

@media (min-width: 560px) {
    .remote-card-fields {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (min-width: 980px) {
    .remote-card-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1380px) {
    .remote-card-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Dokumente: finaler Mobile-First-Feinschliff */
.documents-section {
    overflow: visible;
}

.documents-head {
    align-items: center;
}

.document-upload-panel > summary {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.document-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.document-card {
    --document-accent: var(--primary);
    --document-soft: color-mix(in srgb, var(--document-accent) 9%, transparent);
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--document-accent) 20%, var(--border));
    border-left: 4px solid var(--document-accent);
    border-radius: 18px;
    background:
        linear-gradient(135deg, var(--document-soft), transparent 46%),
        var(--panel);
    box-shadow: none;
}

.document-kind-image {
    --document-accent: #22c55e;
}

.document-kind-pdf {
    --document-accent: #ef4444;
}

.document-kind-file {
    --document-accent: #8b5cf6;
}

.document-preview {
    position: relative;
    height: 280px;
    width: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--document-accent) 18%, transparent), transparent 36%),
        var(--panel-soft);
}

.document-preview:hover img,
.document-preview:hover iframe {
    transform: scale(1.025);
}

.document-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .16s ease;
}

.document-preview iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--panel-soft);
    pointer-events: none;
    transform: scale(1.03);
    transform-origin: top center;
    transition: transform .16s ease;
}

.file-icon {
    min-width: 76px;
    height: 76px;
    padding: 0 12px;
    border-radius: 22px;
    display: inline-grid;
    place-items: center;
    background: color-mix(in srgb, var(--document-accent) 16%, transparent);
    color: color-mix(in srgb, var(--document-accent) 82%, white);
    border: 1px solid color-mix(in srgb, var(--document-accent) 25%, transparent);
    font-weight: 950;
    letter-spacing: .04em;
}

.document-body {
    flex: 1;
    padding: 12px;
    min-width: 0;
}

.document-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.document-title-text {
    min-width: 0;
}

.document-title-text strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text);
    line-height: 1.25;
    font-size: 15px;
    font-weight: 900;
}

.document-title-text small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.document-kind-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 26px;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--document-accent) 14%, var(--panel-soft));
    color: color-mix(in srgb, var(--document-accent) 80%, white);
    border: 1px solid color-mix(in srgb, var(--document-accent) 24%, transparent);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.document-meta {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.document-meta span {
    border-radius: 999px;
    padding: 3px 8px;
    background: var(--panel-soft);
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
}

.document-body p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
    margin: 9px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.document-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding: 10px 12px;
    margin-top: auto;
}

.document-open-button {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    padding: 0 12px;
    background: var(--document-accent);
    color: white !important;
    font-weight: 950;
    text-decoration: none;
}

.document-open-button:hover {
    filter: brightness(.96);
}

.document-edit-button {
    min-height: 36px;
    padding: 0 11px;
    font-size: 13px;
    border-radius: 11px;
}

.document-edit-panel {
    display: none;
    grid-column: 1 / -1;
    margin: 0;
    padding: 12px;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--panel-soft) 70%, transparent);
}

.document-edit-panel.visible {
    display: block;
}

.document-edit-form {
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 170px 1.2fr auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border-radius: 14px;
    background: var(--panel);
    border: 1px solid var(--border);
}

.document-edit-form label {
    margin-top: 0;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.document-edit-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.document-edit-actions .danger-button {
    margin-left: 0;
}

@media (max-width: 1100px) {
    .document-edit-form {
        grid-template-columns: 1fr 1fr;
    }

    .document-edit-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .documents-head {
        align-items: stretch;
    }

    .document-upload-panel > summary {
        width: 100%;
    }

    .document-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .document-card {
        border-radius: 16px;
    }

    .document-preview {
        height: 220px;
    }

    .document-actions {
        grid-template-columns: 1fr 1fr;
    }

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

    .document-edit-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .document-edit-actions .danger-button {
        grid-column: 1 / -1;
    }
}

@media (max-width: 390px) {
    .document-preview {
        height: 190px;
    }

    .document-title-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Dokumente: echte platzsparende Mobile-/Tablet-Darstellung */
.documents-section .section-head {
    margin-bottom: 16px;
}

.document-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

.document-card {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 128px minmax(0, 1fr) !important;
    grid-template-areas:
        "preview body"
        "preview actions"
        "edit edit" !important;
    align-items: stretch !important;
    border-left-width: 5px !important;
}

.document-preview {
    grid-area: preview !important;
    height: auto !important;
    min-height: 132px !important;
    border-right: 1px solid var(--border) !important;
    border-bottom: 0 !important;
}

.document-preview img {
    object-fit: cover !important;
}

.document-preview iframe {
    transform: scale(1.12) !important;
    transform-origin: top center !important;
}

.document-body {
    grid-area: body !important;
    padding: 12px 12px 8px !important;
}

.document-title-row {
    gap: 8px !important;
}

.document-title-text strong {
    -webkit-line-clamp: 2 !important;
    font-size: 15px !important;
}

.document-kind-pill {
    min-height: 24px !important;
    padding: 3px 7px !important;
}

.document-meta {
    margin-top: 8px !important;
}

.document-body p {
    -webkit-line-clamp: 2 !important;
    margin-top: 7px !important;
}

.document-actions {
    grid-area: actions !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    border-top: 0 !important;
    padding: 0 12px 12px !important;
    margin-top: 0 !important;
}

.document-open-button,
.document-edit-button {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
}

.document-open-button {
    min-width: 96px !important;
}

.document-edit-panel {
    grid-area: edit !important;
}

@media (min-width: 760px) {
    .document-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .document-card {
        grid-template-columns: 140px minmax(0, 1fr) !important;
    }
}

@media (min-width: 1280px) {
    .document-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 520px) {
    .document-card {
        grid-template-columns: 96px minmax(0, 1fr) !important;
        grid-template-areas:
            "preview body"
            "actions actions"
            "edit edit" !important;
    }

    .document-preview {
        min-height: 108px !important;
    }

    .document-body {
        padding: 10px !important;
    }

    .document-title-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .document-title-text strong {
        font-size: 14px !important;
    }

    .document-meta span {
        font-size: 10px !important;
    }

    .document-actions {
        padding: 10px !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    .document-open-button,
    .document-edit-button {
        width: 100% !important;
    }
}

/* Dokumente: große Vorschau wiederherstellen */
.document-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 16px !important;
}

.document-card {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    grid-template-areas: unset !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-left-width: 5px !important;
}

.document-preview {
    display: grid !important;
    grid-area: unset !important;
    width: 100% !important;
    height: clamp(240px, 28vw, 340px) !important;
    min-height: unset !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border) !important;
}

.document-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.document-preview iframe {
    width: 100% !important;
    height: 100% !important;
    transform: scale(1.04) !important;
    transform-origin: top center !important;
}

.document-body {
    grid-area: unset !important;
    padding: 12px !important;
}

.document-title-row {
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.document-title-text strong {
    -webkit-line-clamp: 2 !important;
    font-size: 15px !important;
}

.document-body p {
    -webkit-line-clamp: 3 !important;
}

.document-actions {
    grid-area: unset !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 8px !important;
    border-top: 1px solid var(--border) !important;
    padding: 10px 12px !important;
    margin-top: auto !important;
}

.document-open-button,
.document-edit-button {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
}

.document-open-button {
    min-width: 0 !important;
}

.document-edit-panel {
    grid-area: unset !important;
}

@media (min-width: 1180px) {
    .document-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .document-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .document-preview {
        height: clamp(260px, 68vw, 360px) !important;
    }
}

@media (max-width: 390px) {
    .document-preview {
        height: 240px !important;
    }

    .document-title-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .document-actions {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* Kontakte-App: Ansprechpartner + Kontaktwege zusammengeführt */
.contacts-app-head {
    align-items: flex-start;
}

.contacts-app-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.contacts-app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 14px;
}

.contact-person-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 10%, transparent), transparent 36%),
        color-mix(in srgb, var(--panel) 92%, transparent);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}

.contact-person-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--primary);
    opacity: .9;
}

.general-contact-card::before {
    background: #f59e0b;
}

.contact-person-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px 14px 12px 18px;
    border-bottom: 1px solid var(--border);
}

.contact-avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--primary) 16%, var(--panel-soft));
    color: color-mix(in srgb, var(--primary) 82%, white);
    font-weight: 950;
    font-size: 16px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent);
}

.general-contact-card .contact-avatar {
    background: color-mix(in srgb, #f59e0b 18%, var(--panel-soft));
    color: #fbbf24;
}

.contact-person-title {
    min-width: 0;
}

.contact-person-title h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.15;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

.contact-person-title p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.contact-card-menu summary {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    background: var(--panel-soft);
}

.contact-note {
    margin: 0;
    padding: 10px 14px 0 18px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
}

.contact-method-list {
    display: grid;
    gap: 10px;
    padding: 12px 14px 14px 18px;
}

.contact-method-empty {
    border: 1px dashed var(--border);
    border-radius: 14px;
    padding: 12px;
    color: var(--muted);
    font-size: 13px;
    background: color-mix(in srgb, var(--panel-soft) 70%, transparent);
}

.contact-method-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 11px;
    align-items: center;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--panel-soft);
}

.contact-method-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--panel);
    border: 1px solid var(--border);
    font-size: 16px;
}

.contact-kind-phone .contact-method-icon {
    background: color-mix(in srgb, #22c55e 14%, var(--panel));
    border-color: color-mix(in srgb, #22c55e 24%, var(--border));
}

.contact-kind-mobile .contact-method-icon {
    background: color-mix(in srgb, #8b5cf6 14%, var(--panel));
    border-color: color-mix(in srgb, #8b5cf6 24%, var(--border));
}

.contact-kind-email .contact-method-icon {
    background: color-mix(in srgb, #0ea5e9 14%, var(--panel));
    border-color: color-mix(in srgb, #0ea5e9 24%, var(--border));
}

.contact-method-main {
    min-width: 0;
}

.contact-method-topline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.contact-method-topline strong {
    font-size: 13px;
    line-height: 1.2;
}

.primary-chip {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, #22c55e 18%, var(--panel));
    color: #22c55e;
    border: 1px solid color-mix(in srgb, #22c55e 32%, transparent);
    font-size: 11px;
    font-weight: 900;
}

.contact-method-main a {
    display: inline-block;
    margin-top: 3px;
    color: var(--text);
    font-size: 15px;
    line-height: 1.25;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.contact-method-main a:hover {
    color: var(--primary);
}

.contact-method-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.contact-method-main small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.contact-method-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.contact-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}

.contact-action-button:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.contact-edit-panel.hidden-edit-row,
.contact-edit-panel.hidden-edit-row.visible {
    margin: 0 14px 14px 18px;
}

.contact-edit-panel.hidden-edit-row {
    display: none;
}

.contact-edit-panel.hidden-edit-row.visible {
    display: block;
}

.contact-edit-panel .edit-inline-form {
    margin-top: 0;
}

@media (max-width: 900px) {
    .contacts-app-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .contacts-app-head {
        display: grid;
        grid-template-columns: 1fr;
    }

    .contacts-app-actions {
        justify-content: stretch;
    }

    .contacts-app-actions .inline-add-panel,
    .contacts-app-actions .inline-add-panel > summary {
        width: 100%;
    }

    .contacts-app-actions .inline-add-panel > summary {
        text-align: center;
    }

    .contact-person-head {
        padding: 13px 12px 11px 16px;
    }

    .contact-method-list {
        padding: 11px 12px 13px 16px;
    }

    .contact-method-item {
        grid-template-columns: auto 1fr;
        align-items: flex-start;
    }

    .contact-method-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .contact-action-button {
        flex: 1 1 0;
    }

    .contact-edit-panel.hidden-edit-row,
    .contact-edit-panel.hidden-edit-row.visible {
        margin: 0 12px 13px 16px;
    }
}

@media (max-width: 430px) {
    .contact-person-head {
        grid-template-columns: auto 1fr;
    }

    .contact-card-menu {
        grid-column: 2;
        justify-self: start;
    }

    .contact-method-item {
        grid-template-columns: 1fr;
    }

    .contact-method-icon {
        display: none;
    }
}

/* Kontakte: ein Hinzufügen-Button, Favoriten statt Hauptkontakt */
.contact-add-panel {
    position: relative;
}

.contact-add-panel > summary {
    min-width: 150px;
    text-align: center;
}

.contact-add-panel .contact-add-composer {
    position: absolute;
    right: 0;
    top: 46px;
    z-index: 30;
    width: min(900px, calc(100vw - 60px));
    display: grid;
    grid-template-columns: minmax(260px, .8fr) minmax(320px, 1.2fr);
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.contact-add-box {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--panel-soft);
}

.contact-add-box h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.contact-add-box p {
    margin: -4px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.contact-add-form {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

.contact-add-form.compact-form,
.contact-add-form.contact-method-form {
    grid-template-columns: 1fr;
}

.contact-add-actions {
    display: grid;
    grid-template-columns: 1fr auto;
}

.favorite-row {
    min-height: 42px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    margin: 0;
}

.favorite-chip {
    background: color-mix(in srgb, #facc15 18%, var(--panel));
    color: #facc15;
    border-color: color-mix(in srgb, #facc15 35%, transparent);
}

@media (max-width: 900px) {
    .contact-add-panel .contact-add-composer {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .contact-add-panel > summary {
        width: 100%;
    }

    .contact-add-panel .contact-add-composer {
        position: static;
        width: 100%;
        margin-top: 12px;
        padding: 10px;
    }

    .contact-add-actions {
        grid-template-columns: 1fr;
    }
}

/* Kontakte-App Final: Name + viele Nummern/E-Mails, ohne sichtbare Bezeichnungs-Pflicht */
.contacts-app-section {
    overflow: visible;
}

.contacts-app-head {
    align-items: center;
}

.contact-create-panel > summary {
    min-width: 132px;
    text-align: center;
}

.contact-person-create-form {
    grid-template-columns: 1fr 1fr 1.3fr auto;
    align-items: end;
    width: min(980px, calc(100vw - 60px));
}

.contact-form-title {
    grid-column: 1 / -1;
    display: grid;
    gap: 3px;
    padding: 2px 2px 4px;
}

.contact-form-title strong,
.contact-edit-title {
    color: var(--text);
    font-weight: 950;
    letter-spacing: -.02em;
}

.contact-form-title span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
}

.contacts-app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 14px;
}

.contact-app-card {
    position: relative;
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 11%, transparent), transparent 42%),
        var(--panel);
}

.contact-app-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--primary);
}

.contact-app-card-head {
    padding: 18px 18px 14px 22px;
    border-bottom: 1px solid var(--border);
}

.contact-avatar {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: color-mix(in srgb, var(--primary) 22%, var(--panel-soft));
    border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border));
    color: #bfdbfe;
    font-size: 18px;
    font-weight: 950;
}

.contact-person-title h3 {
    font-size: 18px;
    line-height: 1.1;
}

.contact-person-title p {
    margin-top: 4px;
}

.contact-note {
    margin: 0;
    padding: 12px 18px 0 22px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.contact-app-method-list {
    padding: 14px 18px 4px 22px;
    gap: 10px;
}

.contact-app-method {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--panel-soft) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
}

.contact-app-method .contact-method-icon {
    margin-top: 1px;
}

.contact-method-value {
    display: inline-block;
    color: var(--text) !important;
    font-size: 17px;
    font-weight: 950;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.contact-method-meta {
    margin-top: 6px;
}

.contact-method-actions {
    align-self: center;
}

.contact-action-button {
    min-height: 36px;
    border-radius: 12px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.contact-method-add-panel {
    margin: 8px 18px 18px 22px;
}

.contact-method-add-panel > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 13px;
    border-radius: 12px;
    border: 1px dashed color-mix(in srgb, var(--primary) 42%, var(--border));
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    font-weight: 900;
}

.contact-method-add-panel > summary::-webkit-details-marker {
    display: none;
}

.contact-method-add-panel[open] > summary {
    border-style: solid;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.contact-method-add-form,
.contact-method-edit-form,
.contact-person-edit-form {
    margin-top: 10px;
    display: grid;
    gap: 10px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--panel-soft) 82%, transparent);
    padding: 12px;
    box-shadow: none;
}

.contact-method-add-form,
.contact-method-edit-form {
    grid-template-columns: 145px minmax(180px, 1fr) 150px auto minmax(180px, .8fr) auto;
    align-items: center;
}

.contact-method-edit-form .contact-edit-title,
.contact-person-edit-form .contact-edit-title {
    grid-column: 1 / -1;
}

.contact-person-edit-panel {
    padding: 0 18px 18px 22px;
}

.contact-person-edit-form {
    grid-template-columns: 1fr 1fr 1.2fr auto;
    align-items: center;
}

.contact-method-edit-panel {
    padding: 0;
}

.contact-method-edit-panel.hidden-edit-row.visible {
    display: block;
}

.compact-favorite-row {
    margin: 0;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--panel);
    white-space: nowrap;
}

.compact-favorite-row input {
    width: auto;
}

.contact-edit-actions,
.contact-add-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

.general-contact-card::before {
    background: #64748b;
}

.general-contact-card {
    border-color: color-mix(in srgb, #64748b 28%, var(--border));
    background:
        radial-gradient(circle at top left, color-mix(in srgb, #64748b 12%, transparent), transparent 42%),
        var(--panel);
}

@media (max-width: 1250px) {
    .contact-person-create-form,
    .contact-method-add-form,
    .contact-method-edit-form,
    .contact-person-edit-form {
        grid-template-columns: 1fr 1fr;
    }

    .contact-edit-actions,
    .contact-add-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .contacts-app-head {
        align-items: stretch;
    }

    .contacts-app-grid {
        grid-template-columns: 1fr;
    }

    .contact-create-panel > summary,
    .contact-create-panel,
    .contact-person-create-form {
        width: 100%;
    }

    .contact-person-create-form,
    .contact-method-add-form,
    .contact-method-edit-form,
    .contact-person-edit-form {
        grid-template-columns: 1fr;
    }

    .contact-app-card-head {
        padding: 15px 14px 12px 18px;
    }

    .contact-app-method-list {
        padding: 12px 14px 4px 18px;
    }

    .contact-app-method {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .contact-method-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .contact-action-button {
        width: 100%;
    }

    .contact-method-add-panel,
    .contact-person-edit-panel {
        margin-left: 18px;
        margin-right: 14px;
        padding-left: 0;
        padding-right: 0;
    }

    .contact-method-add-panel > summary {
        width: 100%;
    }

    .contact-edit-actions,
    .contact-add-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .contact-edit-actions .danger-button {
        grid-column: 1 / -1;
    }
}

/* Kontakte: Kopf kompakt, Zeilen eingeklappt und animiert */
.contact-card-collapsed .contact-app-card-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
}

.contact-person-toggle {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.contact-person-toggle:hover {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.contact-person-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
}

.contact-person-toggle .contact-person-title {
    display: grid;
    gap: 4px;
    padding: 4px 6px;
}

.contact-name-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.contact-name-text {
    min-width: 0;
    color: var(--text);
    font-size: 18px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

.contact-role-text {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.contact-expand-indicator {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 11%, transparent);
    color: var(--primary);
    font-size: 15px;
    font-weight: 950;
    transform: rotate(-90deg);
    transition: transform .22s ease, background .22s ease;
}

.contact-app-card.is-open .contact-expand-indicator {
    transform: rotate(0deg);
    background: color-mix(in srgb, var(--primary) 18%, transparent);
}

.contact-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.contact-quick-action {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: var(--panel-soft);
    color: var(--text);
    font-size: 17px;
    font-weight: 950;
    line-height: 1;
    transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}

.contact-quick-action:hover {
    transform: translateY(-1px);
}

.contact-quick-phone {
    background: color-mix(in srgb, #22c55e 13%, var(--panel-soft));
    border-color: color-mix(in srgb, #22c55e 28%, var(--border));
    color: #86efac;
}

.contact-quick-email {
    background: color-mix(in srgb, #0ea5e9 13%, var(--panel-soft));
    border-color: color-mix(in srgb, #0ea5e9 28%, var(--border));
    color: #7dd3fc;
}

.contact-card-body.contact-collapsible {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height .28s ease, opacity .2s ease, transform .2s ease;
    will-change: max-height, opacity, transform;
}

.contact-app-card.is-open .contact-card-body.contact-collapsible {
    opacity: 1;
    transform: translateY(0);
}

.contact-card-collapsed .contact-app-card-head {
    border-bottom: 0;
}

.contact-card-collapsed.is-open .contact-app-card-head {
    border-bottom: 1px solid var(--border);
}

@media (max-width: 700px) {
    .contact-card-collapsed .contact-app-card-head {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .contact-head-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-left: 58px;
    }

    .contact-card-menu {
        margin-left: auto;
    }
}

@media (max-width: 430px) {
    .contact-head-actions {
        padding-left: 0;
    }

    .contact-quick-action,
    .contact-card-menu summary {
        width: 36px;
        height: 36px;
    }
}

/* Hardware + Benutzerkonten */
.fold-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
}

.fold-card {
    --fold-accent: var(--primary);
    --fold-soft: color-mix(in srgb, var(--fold-accent) 10%, transparent);
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--fold-accent) 22%, var(--border));
    border-left: 4px solid var(--fold-accent);
    border-radius: 18px;
    background:
        linear-gradient(135deg, var(--fold-soft), transparent 46%),
        var(--panel);
}

.fold-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 14px;
}

.fold-title-button {
    min-width: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.fold-title-button:hover {
    background: transparent;
}

.fold-title-text {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.fold-title-text strong {
    display: block;
    font-size: 16px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fold-title-text small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fold-head-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.fold-card-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-5px);
    transition: max-height .24s ease, opacity .18s ease, transform .18s ease;
    border-top: 1px solid transparent;
}

.fold-card.is-open .fold-card-body {
    opacity: 1;
    transform: translateY(0);
    border-top-color: var(--border);
}

.hardware-kind-icon,
.user-account-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--fold-accent) 18%, var(--panel-soft));
    color: color-mix(in srgb, var(--fold-accent) 82%, white);
    border: 1px solid color-mix(in srgb, var(--fold-accent) 30%, transparent);
    font-size: 14px;
    font-weight: 950;
}

.quick-copy-button,
.quick-link-button {
    height: 36px;
    min-width: 42px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--panel-soft);
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.quick-copy-button:hover,
.quick-link-button:hover {
    background: color-mix(in srgb, var(--fold-accent) 16%, var(--panel-soft));
}

.hardware-summary-row,
.user-account-summary-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 14px 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.hardware-type-pill,
.account-type-pill {
    border-radius: 999px;
    padding: 4px 9px;
    background: color-mix(in srgb, var(--fold-accent) 16%, var(--panel-soft));
    color: color-mix(in srgb, var(--fold-accent) 82%, white);
    border: 1px solid color-mix(in srgb, var(--fold-accent) 26%, transparent);
    font-weight: 950;
}

.kv-list {
    display: grid;
    gap: 8px;
    padding: 12px 14px 14px;
}

.kv-row {
    display: grid;
    grid-template-columns: minmax(110px, .45fr) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--panel-soft);
    padding: 10px 12px;
}

.kv-row > span:first-child {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.kv-row strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 14px;
}

.kv-row a {
    color: var(--primary);
}

.hardware-note,
.user-account-note {
    margin: 10px 14px 0;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--panel-soft);
    color: var(--muted);
    font-size: 13px;
}

.hardware-inline-panel,
.user-account-inline-panel {
    margin: 0 14px 14px;
}

.hardware-form,
.hardware-edit-form,
.user-account-form,
.user-account-edit-form {
    grid-template-columns: 1fr 1fr;
}

.hardware-field-form {
    grid-template-columns: 1fr 1.4fr 180px auto;
}

.hardware-kind-server { --fold-accent: #3b82f6; }
.hardware-kind-pc { --fold-accent: #22c55e; }
.hardware-kind-laptop { --fold-accent: #06b6d4; }
.hardware-kind-nas { --fold-accent: #8b5cf6; }
.hardware-kind-router { --fold-accent: #f59e0b; }
.hardware-kind-firewall { --fold-accent: #ef4444; }
.hardware-kind-switch { --fold-accent: #14b8a6; }
.hardware-kind-printer { --fold-accent: #64748b; }
.hardware-kind-other { --fold-accent: #94a3b8; }

.account-kind-ad { --fold-accent: #3b82f6; }
.account-kind-m365 { --fold-accent: #0ea5e9; }
.account-kind-local { --fold-accent: #22c55e; }
.account-kind-nas { --fold-accent: #8b5cf6; }
.account-kind-router { --fold-accent: #f97316; }
.account-kind-general { --fold-accent: #94a3b8; }

@media (max-width: 900px) {
    .fold-card-grid {
        grid-template-columns: 1fr;
    }

    .hardware-form,
    .hardware-edit-form,
    .user-account-form,
    .user-account-edit-form,
    .hardware-field-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .fold-card-head {
        grid-template-columns: 1fr;
    }

    .fold-head-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-left: 54px;
    }

    .kv-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* Hardware-Felder: Bearbeiten/Löschen direkt am Key/Value-Eintrag */
.hardware-field-row {
    grid-template-columns: minmax(120px, .35fr) minmax(0, 1fr);
}

.kv-row-content {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.kv-row-content > strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.kv-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex: 0 0 auto;
}

.kv-row-actions form {
    margin: 0;
}

.mini-action-button {
    min-height: 32px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.mini-action-button:hover {
    background: color-mix(in srgb, var(--fold-accent) 14%, var(--panel-soft));
}

.danger-mini-button {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
}

.danger-mini-button:hover {
    background: color-mix(in srgb, var(--danger) 12%, var(--panel));
}

.hardware-field-edit-panel {
    margin-top: -6px;
}

.hardware-field-edit-form {
    grid-template-columns: 1fr 1.4fr 180px auto;
}

.hardware-delete-form {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .hardware-field-edit-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .hardware-field-row {
        grid-template-columns: 1fr;
    }

    .kv-row-content {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .kv-row-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}


/* Hardware Feinschliff: kompakte Feldaktionen + echte Secret-Ausblendung */
.secret-value[hidden],
[hidden].secret-value {
    display: none !important;
}

.hardware-field-row {
    grid-template-columns: minmax(120px, .34fr) minmax(0, 1fr) !important;
    padding-right: 8px;
}

.kv-row-content {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.kv-row-content > strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.kv-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}

.kv-row-actions form {
    margin: 0;
}

.row-icon-action {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--panel) 76%, var(--panel-soft));
    color: var(--text);
    display: inline-grid;
    place-items: center;
    font-size: 14px;
    font-weight: 950;
    line-height: 1;
}

.row-icon-action:hover {
    background: color-mix(in srgb, var(--fold-accent) 16%, var(--panel-soft));
    border-color: color-mix(in srgb, var(--fold-accent) 34%, var(--border));
}

.row-icon-danger {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
}

.row-icon-danger:hover {
    background: color-mix(in srgb, var(--danger) 12%, var(--panel));
    border-color: color-mix(in srgb, var(--danger) 48%, var(--border));
}

.is-secret-row .secret-toggle {
    min-height: 34px;
    border-radius: 11px;
    padding: 0 11px;
}

.is-secret-row .secret-value {
    margin-left: 8px;
    vertical-align: middle;
}

/* Einheitliche linke Akzentkante: wie Card-Rand, nicht als innenliegender Balken */
.contact-app-card,
.remote-card-v2,
.document-card,
.fold-card {
    position: relative;
    overflow: hidden;
}

.contact-app-card {
    border-left: 5px solid var(--primary) !important;
}

.remote-card-v2 {
    border-left: 5px solid var(--remote-accent) !important;
}

.document-card {
    border-left: 5px solid var(--document-accent) !important;
}

.fold-card {
    border-left: 5px solid var(--fold-accent) !important;
}

.contact-app-card::before,
.remote-card-v2::before,
.document-card::before,
.fold-card::before {
    display: none !important;
    content: none !important;
}

@media (max-width: 560px) {
    .hardware-field-row {
        grid-template-columns: 1fr !important;
    }

    .kv-row-content {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .kv-row-actions {
        justify-content: flex-end;
    }
}

/* Hardware final: Feldzeilen innen vertikal stapeln */
.hardware-card .kv-row {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
        "key actions"
        "value actions" !important;
    align-items: center !important;
    gap: 6px 10px !important;
}

.hardware-card .kv-row > span:first-child {
    grid-area: key !important;
}

.hardware-card .kv-row > strong,
.hardware-card .kv-row > .secret-value,
.hardware-card .kv-row > a {
    grid-area: value !important;
    justify-self: start !important;
}

.hardware-card .kv-row .hardware-field-actions {
    grid-area: actions !important;
    align-self: center !important;
    justify-self: end !important;
}

.hardware-card .secret-value[hidden],
.hardware-card [hidden] {
    display: none !important;
}

@media (max-width: 520px) {
    .hardware-card .kv-row {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "key"
            "value"
            "actions" !important;
    }

    .hardware-card .kv-row .hardware-field-actions {
        justify-self: start !important;
    }
}


/* Hardware final: Feldzeilen als saubere 3-Spalten-Zeile
   Label links, Wert/Button mittig, Aktionen rechts */
.hardware-card .kv-row {
    grid-template-columns: minmax(150px, 0.28fr) minmax(0, 1fr) auto !important;
    grid-template-areas: "key value actions" !important;
    align-items: center !important;
    gap: 10px 14px !important;
}

.hardware-card .kv-row > span:first-child {
    grid-area: key !important;
    align-self: center !important;
}

.hardware-card .kv-row > strong,
.hardware-card .kv-row > .secret-value,
.hardware-card .kv-row > a,
.hardware-card .kv-row > button.secret-toggle {
    grid-area: value !important;
    justify-self: start !important;
    align-self: center !important;
}

.hardware-card .kv-row .hardware-field-actions {
    grid-area: actions !important;
    justify-self: end !important;
    align-self: center !important;
    display: inline-flex !important;
    gap: 6px !important;
}

.hardware-card .secret-value[hidden],
.hardware-card [hidden] {
    display: none !important;
}

/* Auf sehr schmalen Geräten erst dann umbrechen, wenn es wirklich nötig ist */
@media (max-width: 430px) {
    .hardware-card .kv-row {
        grid-template-columns: 1fr auto !important;
        grid-template-areas:
            "key actions"
            "value actions" !important;
        align-items: center !important;
    }

    .hardware-card .kv-row .hardware-field-actions {
        align-self: center !important;
    }
}


/* Remotezugang <-> Hardware Verknüpfung */
.remote-hardware-pill {
    background: color-mix(in srgb, var(--remote-accent) 10%, var(--panel-soft));
    color: var(--muted);
    border-color: color-mix(in srgb, var(--remote-accent) 22%, var(--border));
    text-transform: none;
    letter-spacing: 0;
}

.hardware-linked-remote-list {
    display: grid;
    gap: 8px;
    margin: 12px 14px 0;
}

.hardware-linked-remote-list h3 {
    margin: 0 0 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hardware-linked-remote {
    --remote-accent: var(--primary);
    display: grid;
    grid-template-columns: auto minmax(150px, .5fr) minmax(130px, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--remote-accent) 22%, var(--border));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--remote-accent) 8%, transparent), transparent 45%),
        var(--panel-soft);
}

.hardware-linked-remote > strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.hardware-linked-remote-value {
    color: var(--text);
    font-weight: 850;
    overflow-wrap: anywhere;
}

.hardware-linked-remote-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.hardware-linked-remote .remote-connect-primary {
    min-height: 32px;
    flex: 0 0 auto;
    padding: 0 10px;
}

.hardware-linked-remote .row-icon-action {
    min-width: 34px;
}

@media (max-width: 760px) {
    .hardware-linked-remote {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "type actions"
            "title actions"
            "value actions";
    }

    .hardware-linked-remote-type {
        grid-area: type;
    }

    .hardware-linked-remote > strong {
        grid-area: title;
    }

    .hardware-linked-remote-value {
        grid-area: value;
    }

    .hardware-linked-remote-actions {
        grid-area: actions;
        align-self: center;
    }
}


/* Remotezugänge gruppieren */
.remote-group {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

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

.remote-group > h3 {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Hardware -> Remotezugang direkt im Gerät anlegen */
.hardware-remote-add-panel {
    margin-top: 12px;
}

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

.hardware-linked-remote-list + .hardware-remote-add-panel {
    margin-top: 12px;
}

@media (max-width: 700px) {
    .hardware-remote-form {
        grid-template-columns: 1fr;
    }
}


/* Kontakte: optisch und vom Aufklappen wie Hardware/Benutzerkonten */
.contacts-fold-grid {
    grid-template-columns: 1fr !important;
}

.contact-fold-card {
    --fold-accent: var(--primary);
    --fold-soft: color-mix(in srgb, var(--fold-accent) 10%, transparent);
}

.contact-fold-card {
    border-left: 5px solid var(--fold-accent) !important;
}

.contact-fold-card::before {
    display: none !important;
    content: none !important;
}

.general-contact-fold-card {
    --fold-accent: #64748b;
}

.contact-fold-head {
    min-height: 72px;
}

.contact-fold-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--fold-accent) 18%, var(--panel-soft));
    color: color-mix(in srgb, var(--fold-accent) 82%, white);
    border: 1px solid color-mix(in srgb, var(--fold-accent) 30%, transparent);
    font-size: 15px;
    font-weight: 950;
}

.contact-head-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.contact-head-actions .quick-link-button {
    height: 36px;
    width: 42px;
    min-width: 42px;
    padding: 0;
    font-size: 16px;
}

.contact-quick-phone {
    background: color-mix(in srgb, #22c55e 18%, var(--panel-soft));
    border-color: color-mix(in srgb, #22c55e 34%, var(--border));
    color: #86efac;
}

.contact-quick-email {
    background: color-mix(in srgb, #0ea5e9 18%, var(--panel-soft));
    border-color: color-mix(in srgb, #0ea5e9 34%, var(--border));
    color: #7dd3fc;
}

.contact-fold-note {
    margin: 12px 14px 0;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--panel-soft);
    color: var(--muted);
    font-size: 13px;
}

.contact-method-list {
    display: grid;
    gap: 8px;
    padding: 12px 14px 14px;
}

.contact-method-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--panel-soft);
    padding: 10px 12px;
}

.contact-method-type-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 13%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
    color: var(--text);
    font-size: 15px;
}

.contact-method-kind-email .contact-method-type-icon {
    background: color-mix(in srgb, #0ea5e9 14%, var(--panel));
    border-color: color-mix(in srgb, #0ea5e9 26%, var(--border));
}

.contact-method-kind-phone .contact-method-type-icon,
.contact-method-kind-mobile .contact-method-type-icon {
    background: color-mix(in srgb, #22c55e 14%, var(--panel));
    border-color: color-mix(in srgb, #22c55e 26%, var(--border));
}

.contact-method-main {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.contact-method-value {
    width: fit-content;
    color: var(--text);
    font-size: 15px;
    font-weight: 950;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.contact-method-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.contact-method-note {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.contact-method-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.contact-method-row-actions form {
    margin: 0;
}

.contact-inline-panel {
    margin: 0 14px 14px;
}

.contact-method-add-form,
.contact-method-edit-form {
    grid-template-columns: 145px minmax(170px, 1fr) 150px auto minmax(160px, .8fr) auto;
}

.contact-person-create-form,
.contact-person-edit-form {
    grid-template-columns: 1fr 1fr 1.2fr auto;
}

.contact-delete-form {
    margin: -6px 14px 14px;
    display: flex;
    justify-content: flex-end;
}

.contact-empty-inside {
    margin: 12px 14px;
}

@media (max-width: 1100px) {
    .contact-method-add-form,
    .contact-method-edit-form,
    .contact-person-create-form,
    .contact-person-edit-form {
        grid-template-columns: 1fr 1fr;
    }

    .contact-add-actions,
    .contact-edit-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .contact-fold-head {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .contact-head-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-left: 54px;
    }

    .contact-method-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .contact-method-row-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-left: 44px;
    }

    .contact-method-add-form,
    .contact-method-edit-form,
    .contact-person-create-form,
    .contact-person-edit-form {
        grid-template-columns: 1fr;
    }

    .contact-head-actions {
        padding-left: 0;
    }
}

@media (max-width: 430px) {
    .contact-head-actions .quick-link-button,
    .contact-fold-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }
}


/* Dokumente: Ordner + Unterordner */
.document-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.document-folder-tree {
    display: grid;
    gap: 12px;
}

.document-folder-card {
    --folder-accent: #f59e0b;
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--folder-accent) 24%, var(--border));
    border-left: 5px solid var(--folder-accent);
    border-radius: 18px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--folder-accent) 8%, transparent), transparent 46%),
        var(--panel);
}

.document-folder-card::before {
    display: none !important;
    content: none !important;
}

.document-folder-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-bottom: 1px solid var(--border);
}

.document-folder-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.document-folder-title h3 {
    margin: 0;
    color: var(--text);
    font-size: 17px;
    font-weight: 950;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.document-folder-title small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.document-folder-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--folder-accent) 18%, var(--panel-soft));
    color: color-mix(in srgb, var(--folder-accent) 82%, white);
    border: 1px solid color-mix(in srgb, var(--folder-accent) 30%, transparent);
    font-size: 18px;
}

.document-folder-children {
    display: grid;
    gap: 10px;
    padding: 12px 14px 0 20px;
}

.document-folder-children .document-folder-card {
    margin-left: min(calc(var(--folder-level, 0) * 10px), 30px);
}

.document-folder-document-grid {
    padding: 12px 14px 14px;
}

.document-root-files {
    margin-top: 16px;
}

.document-root-files > h3 {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.document-folder-inline-panel {
    margin: 0 14px 14px;
}

.document-folder-form {
    grid-template-columns: 1fr 1fr 120px auto;
}

.document-card .document-edit-panel {
    margin: 0 12px 12px;
}

.document-card .document-edit-panel.visible {
    display: block;
}

.document-card .document-edit-form {
    grid-template-columns: 1fr 150px 1fr 1.2fr auto;
    margin: 0;
}

@media (max-width: 1100px) {
    .document-folder-form,
    .document-card .document-edit-form {
        grid-template-columns: 1fr 1fr;
    }

    .document-card .document-edit-form .form-actions,
    .document-folder-form .form-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .document-head-actions {
        align-items: stretch;
        width: 100%;
    }

    .document-head-actions > details,
    .document-head-actions > details > summary {
        width: 100%;
    }

    .document-folder-form,
    .document-card .document-edit-form {
        grid-template-columns: 1fr;
    }

    .document-folder-children {
        padding-left: 12px;
        padding-right: 10px;
    }

    .document-folder-children .document-folder-card {
        margin-left: 0;
    }
}


/* Dokumente: schöneres Bearbeiten + Drag & Drop in Ordner */
.document-card {
    cursor: grab;
}

.document-card:active {
    cursor: grabbing;
}

.document-card.is-dragging {
    opacity: .45;
    transform: scale(.985);
}

.document-drop-target {
    transition:
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

.document-drop-target.is-drop-hover {
    border-color: color-mix(in srgb, var(--primary) 68%, var(--border)) !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, transparent), transparent 46%),
        var(--panel) !important;
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--primary) 28%, transparent),
        var(--shadow);
    transform: translateY(-1px);
}

.document-root-files.is-drop-hover {
    border-radius: 18px;
    outline: 2px dashed color-mix(in srgb, var(--primary) 60%, transparent);
    outline-offset: 6px;
}

.document-root-files > h3 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.document-root-files > h3 small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.document-edit-panel {
    padding: 0 12px 12px;
}

.document-card .document-edit-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 16px !important;
    border: 1px solid color-mix(in srgb, var(--document-accent) 22%, var(--border)) !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--document-accent) 8%, transparent), transparent 42%),
        var(--panel-soft) !important;
}

.document-edit-title {
    grid-column: 1 / -1;
    display: grid;
    gap: 2px;
    padding-bottom: 2px;
}

.document-edit-title strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 950;
}

.document-edit-title small {
    color: var(--muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.document-card .document-edit-form label {
    display: grid;
    gap: 6px;
    margin: 0;
}

.document-card .document-edit-form label span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.document-card .document-edit-form input,
.document-card .document-edit-form select {
    width: 100%;
    min-width: 0;
}

.document-edit-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 700px) {
    .document-card .document-edit-form {
        grid-template-columns: 1fr !important;
    }

    .document-edit-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: stretch;
    }

    .document-edit-actions .danger-button {
        grid-column: 1 / -1;
    }
}


/* Dokumentordner: einklappbar wie Hardware/Kontakte */
.document-folder-card.fold-card {
    --fold-accent: #f59e0b;
    --folder-accent: var(--fold-accent);
    border-left: 5px solid var(--fold-accent) !important;
}

.document-folder-card.fold-card::before {
    display: none !important;
    content: none !important;
}

.document-folder-head {
    border-bottom: 0 !important;
}

.document-folder-title {
    cursor: pointer;
}

.document-folder-title:hover {
    background: transparent;
}

.document-folder-title .fold-title-text strong {
    font-size: 17px;
}

.document-folder-body {
    border-top: 1px solid transparent;
}

.document-folder-card.is-open .document-folder-body {
    border-top-color: var(--border);
}

.document-folder-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.document-folder-count {
    color: color-mix(in srgb, var(--fold-accent) 82%, white);
    border-color: color-mix(in srgb, var(--fold-accent) 28%, var(--border));
    background: color-mix(in srgb, var(--fold-accent) 14%, var(--panel-soft));
}

.document-folder-inline-panel {
    margin-top: 12px;
}

/* Im geschlossenen Zustand bleibt die Ordnerkarte kompakt; Drop bleibt trotzdem möglich */
.document-folder-card.is-drop-hover .document-folder-body {
    border-top-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}


/* Kundenübersicht: Suche + Alias bearbeiten, Status entfernt */
.customer-overview-tools {
    margin: 0 0 12px;
}

.customer-search-field {
    display: grid;
    gap: 6px;
}

.customer-search-field span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.customer-search-field input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--panel);
    color: var(--text);
    padding: 13px 15px;
    font-size: 15px;
    font-weight: 750;
    outline: none;
}

.customer-search-field input:focus {
    border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.customer-row {
    cursor: pointer;
}

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

.alias-col {
    min-width: 220px;
}

.alias-inline-form {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 34px;
    gap: 7px;
    align-items: center;
}

.alias-inline-form input {
    width: 100%;
    min-width: 0;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--panel-soft);
    color: var(--text);
    padding: 0 10px;
    font-size: 13px;
    font-weight: 750;
}

.alias-inline-form input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 16%, transparent);
}

.alias-inline-form button {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-weight: 950;
}

.customer-search-empty {
    margin: 14px;
}

@media (max-width: 900px) {
    .customer-table {
        min-width: 900px;
    }
}


/* Alias wird in der Kundenakte gepflegt, Übersicht bleibt sauber */
.customer-detail-alias-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    gap: 8px;
    align-items: center;
    max-width: 520px;
}

.customer-detail-alias-form input {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-soft);
    color: var(--text);
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 750;
}

.customer-detail-alias-form input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 16%, transparent);
}

.customer-detail-alias-form button {
    white-space: nowrap;
}

.alias-col {
    min-width: 140px;
}

@media (max-width: 600px) {
    .customer-detail-alias-form {
        grid-template-columns: 1fr;
    }
}


/* Übersicht: Alias bleibt reine Anzeige. Gesucht wird trotzdem über alle Mitarbeiter-Aliase. */
.alias-col {
    color: var(--muted);
    font-weight: 800;
}