/* Shared contractor card, approved variant 5: labels beside fields. */

html body .vario-contractor-card-v5-layer,
html body .vario-contractor-card-v5-child-layer {
    --vario-contractor-card-label-width: 112px;
    --vario-contractor-card-field-gap: 7px;
    --vario-contractor-card-column-gap: 20px;
    --vario-contractor-card-row-gap: 6px;
    --vario-contractor-card-classification-width: 202px;
    --vario-contractor-card-header-height: 56px;
    --vario-contractor-card-tabs-height: 32px;
    --vario-contractor-card-metric-height: 29px;
    --vario-contractor-card-footer-height: var(--vario-size-compact-dialog-footer-height, 44px);
    --vario-contractor-card-layer: 21110;
    --vario-contractor-card-child-layer: 21130;
}

html body .vario-contractor-card-v5-layer {
    position: fixed !important;
    inset: var(--vario-size-topbar-height, 58px) 0 var(--vario-size-statusbar-height, 22px) var(--vario-active-sidebar-width, 232px) !important;
    z-index: var(--vario-contractor-card-layer);
    display: grid !important;
    width: auto !important;
    height: auto !important;
    padding: 12px 14px;
    place-items: center;
    background: var(--vario-window-overlay);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html body .vario-contractor-card-v5-dialog {
    display: block;
    width: min(1340px, calc(100% - 28px));
    max-width: 1340px;
    min-height: 0 !important;
    height: min(760px, calc(100% - 24px)) !important;
    max-height: 760px !important;
    margin: 0;
}

html body .vario-contractor-card-v5 {
    display: grid;
    grid-template-rows:
        var(--vario-contractor-card-header-height)
        var(--vario-contractor-card-tabs-height)
        minmax(0, 1fr)
        var(--vario-contractor-card-metric-height)
        var(--vario-contractor-card-footer-height);
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--vario-window-frame-border);
    border-radius: 8px;
    background: var(--vario-component-card-bg, var(--vario-modal-bg));
    color: var(--vario-text);
    box-shadow: var(--vario-shadow-popover);
}

html body .vario-contractor-card-v5 > [data-vario-component="VarioDocumentDialogHeader"] {
    min-height: var(--vario-contractor-card-header-height) !important;
    height: var(--vario-contractor-card-header-height) !important;
    padding: 7px 12px !important;
    border-radius: 7px 7px 0 0;
    background: var(--vario-window-header-bg) !important;
}

html body .vario-contractor-card-v5 > [data-vario-component="VarioDocumentDialogHeader"] .vario-erp-document-card-title {
    flex-direction: row !important;
}

html body .vario-contractor-card-v5 > [data-vario-component="VarioDocumentDialogHeader"] .vario-erp-document-card-icon {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 6px !important;
    color: var(--vario-color-text-on-primary) !important;
    background: color-mix(in srgb, var(--vario-color-text-on-primary) 10%, transparent) !important;
    box-shadow: none !important;
}

html body .vario-contractor-card-v5 > [data-vario-component="VarioDocumentDialogHeader"] .modal-title {
    color: var(--vario-color-text-on-primary) !important;
    font: 700 15px/18px var(--vario-font-family-ui) !important;
}

html body .vario-contractor-card-v5 > [data-vario-component="VarioDocumentDialogHeader"] .vario-erp-document-card-title small {
    color: color-mix(in srgb, var(--vario-color-text-on-primary) 82%, transparent) !important;
    font: 500 10px/13px var(--vario-font-family-ui) !important;
}

html body .vario-contractor-card-v5-tabs.vario-win-document-tabs {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: var(--vario-contractor-card-tabs-height) !important;
    min-height: var(--vario-contractor-card-tabs-height) !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

#vario-app-root[data-vario-theme] body .vario-contractor-card-v5-body,
html body .vario-contractor-card-v5-body {
    min-width: 0;
    min-height: 0;
    padding: 8px 12px 10px;
    overflow: auto;
    background: var(--vario-component-card-bg, var(--vario-surface)) !important;
    scrollbar-gutter: stable;
    container: contractor-card-body / inline-size;
}

html body .vario-contractor-card-v5-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--vario-contractor-card-classification-width);
    grid-template-areas:
        "identity address classification"
        "additional additional classification"
        "notes notes notes";
    gap: 4px var(--vario-contractor-card-column-gap);
    align-items: start;
}

html body .vario-contractor-card-v5-section.identity { grid-area: identity; }
html body .vario-contractor-card-v5-section.address { grid-area: address; }
html body .vario-contractor-card-v5-classification { grid-area: classification; }
html body .vario-contractor-card-v5-section.additional { grid-area: additional; }
html body .vario-contractor-card-v5-section.notes { grid-area: notes; }

html body .vario-contractor-card-v5-section,
html body .vario-contractor-card-v5-classification {
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html body .vario-contractor-card-v5-classification {
    align-self: stretch;
    padding-left: 16px;
    border-left: 1px solid var(--vario-border);
}

html body .vario-contractor-card-v5-section-header {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 24px;
    gap: 6px;
    margin: 0 0 3px;
    padding: 0 0 3px;
    border-bottom: 1px solid var(--vario-border);
}

html body .vario-contractor-card-v5-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--vario-color-primary-600);
}

html body .vario-contractor-card-v5-section-icon .nav-icon {
    width: 13px;
    height: 13px;
}

html body .vario-contractor-card-v5-section-header h6 {
    margin: 0;
    color: var(--vario-text-strong);
    font: 700 11px/14px var(--vario-font-family-ui);
    letter-spacing: 0;
}

html body .vario-contractor-card-v5-section-header small {
    display: block;
    color: var(--vario-text-muted);
    font: 400 9px/11px var(--vario-font-family-ui);
}

html body .vario-contractor-card-v5-field {
    display: grid;
    grid-template-columns: minmax(0, var(--vario-contractor-card-label-width)) minmax(0, 1fr);
    align-items: center;
    gap: var(--vario-contractor-card-field-gap);
    min-width: 0;
    min-height: 29px;
    padding: 2px 0;
    border-bottom: 1px solid var(--vario-border-soft);
}

html body .vario-contractor-card-v5-field > label {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--vario-text-muted);
    font: var(--vario-font-form-label);
    letter-spacing: 0;
}

html body .vario-contractor-card-v5-field.required > label::after {
    content: " *";
    color: var(--vario-status-danger-text);
}

html body .vario-contractor-card-v5-field :where(.form-control, .form-select, .vario-numeric-input) {
    min-width: 0;
    width: 100%;
}

html body .vario-contractor-card-v5-control-with-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

html body .vario-contractor-card-v5-control-with-actions > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

html body .vario-contractor-card-v5 .vario-contractor-card-v5-gus-button {
    flex: 0 0 auto;
    min-width: 0;
}

html body .vario-contractor-card-v5 :is(.vario-contractor-card-v5-gus-button, .vario-contractor-card-v5-vat-button) {
    padding-inline: 7px !important;
    white-space: nowrap;
}

html body .vario-contractor-card-v5-additional-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 14px;
}

html body .vario-contractor-card-v5-additional-grid .vario-contractor-card-v5-field {
    grid-template-columns: minmax(0, 96px) minmax(0, 1fr);
}

html body .vario-contractor-card-v5 .vario-contractor-card-v5-gus-button .nav-icon {
    width: 12px;
    height: 12px;
}

html body .vario-contractor-card-v5-check-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    padding: 4px 0 5px;
    border-bottom: 1px solid var(--vario-border-soft);
}

html body .vario-contractor-card-v5-check-group:last-child { border-bottom: 0; }

html body .vario-contractor-card-v5-check-group > strong {
    margin-bottom: 1px;
    color: var(--vario-text-muted);
    font: 600 9px/11px var(--vario-font-family-ui);
}

html body .vario-contractor-card-v5-two-columns,
html body .vario-contractor-card-v5-split,
html body .vario-contractor-card-v5-three-columns,
html body .vario-contractor-card-v5-feature-grid,
html body .vario-contractor-card-v5-history-notes {
    display: grid;
    min-width: 0;
    gap: 6px 20px;
}

html body .vario-contractor-card-v5-two-columns,
html body .vario-contractor-card-v5-split,
html body .vario-contractor-card-v5-feature-grid,
html body .vario-contractor-card-v5-history-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body .vario-contractor-card-v5-three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }

html body .vario-contractor-card-v5-notes-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 102px minmax(0, 1fr);
    align-items: end;
    gap: 12px;
}

html body .vario-contractor-card-v5-note,
html body .vario-contractor-card-v5-notes-grid > label {
    display: grid;
    gap: 3px;
    margin: 0;
    color: var(--vario-text-muted);
    font: var(--vario-font-form-label);
}

html body .vario-contractor-card-v5-note-options {
    display: grid;
    align-content: end;
    gap: 2px;
    min-height: 63px;
    padding-bottom: 2px;
}

html body .vario-contractor-card-v5-inline-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 16px;
    padding-top: 4px;
}

html body .vario-contractor-card-v5-tab-stack {
    display: grid;
    align-content: start;
    min-height: 100%;
    gap: 9px;
}

html body .vario-contractor-card-v5-section-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
    gap: 10px;
}

html body .vario-contractor-card-v5-section-toolbar > .vario-contractor-card-v5-section-header {
    flex: 1 1 auto;
    margin: 0;
}

html body .vario-contractor-card-v5-grid {
    display: grid;
    grid-template-rows: minmax(0, 1fr) 28px;
    min-width: 0;
    min-height: 78px;
    max-height: 264px;
    overflow: hidden;
    border: 1px solid var(--vario-border);
    border-radius: 0;
    background: var(--vario-grid-bg);
}

html body .vario-contractor-card-v5-table-wrap {
    min-width: 0;
    min-height: 0;
    overflow: auto;
}

html body .vario-contractor-card-v5-grid .vario-standard-data-grid {
    min-width: 760px;
    margin: 0;
}

html body .vario-contractor-card-v5-grid .vario-grid-footer {
    position: sticky;
    right: 0;
    bottom: 0;
    left: 0;
}

html body .vario-contractor-card-v5-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    white-space: nowrap;
}

html body .vario-contractor-card-v5-empty,
html body .vario-contractor-card-v5-loading,
html body .vario-contractor-card-v5 .vario-empty-table-cell {
    padding: 14px 10px;
    border: 0;
    background: transparent;
    color: var(--vario-text-muted);
    font: 500 11px/16px var(--vario-font-family-ui);
    text-align: center;
}

html body .vario-contractor-card-v5-contact-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr);
    min-height: 100%;
    gap: 18px;
}

html body .vario-contractor-card-v5-contact-columns > .vario-contractor-card-v5-section {
    padding: 0 0 0 17px;
    border-left: 1px solid var(--vario-border);
}

html body .vario-contractor-card-v5-contact-columns > .vario-contractor-card-v5-section:first-child {
    padding-left: 0;
    border-left: 0;
}

html body .vario-contractor-card-v5-channel-item,
html body .vario-contractor-card-v5-address-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    gap: 6px 8px;
    min-height: 76px;
    padding: 10px 0;
    border-bottom: 1px solid var(--vario-border-soft);
}

html body .vario-contractor-card-v5-entry-icon {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid var(--vario-border);
    border-radius: 4px;
    background: var(--vario-surface-muted);
    color: var(--vario-color-primary-600);
}

html body .vario-contractor-card-v5-entry-icon .nav-icon {
    width: 13px;
    height: 13px;
}

html body .vario-contractor-card-v5-entry-main {
    display: grid;
    min-width: 0;
    gap: 4px;
}

html body .vario-contractor-card-v5-entry-main > strong {
    color: var(--vario-text-strong);
    font: 700 10px/13px var(--vario-font-family-ui);
}

html body .vario-contractor-card-v5-entry-value {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 4px;
}

html body .vario-contractor-card-v5-entry-value > :first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body .vario-contractor-card-v5-entry-value > span {
    color: var(--vario-text);
    font: var(--vario-font-form-control);
}

html body .vario-contractor-card-v5-entry-meta {
    overflow: hidden;
    color: var(--vario-text-muted);
    font: 500 10px/13px var(--vario-font-family-ui);
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body .vario-contractor-card-v5-entry-bottom {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 8px;
}

html body .vario-contractor-card-v5-channel-state {
    color: var(--vario-status-success-text);
    font: 600 10px/13px var(--vario-font-family-ui);
    white-space: nowrap;
}

html body .vario-contractor-card-v5-consents-layout {
    display: grid;
    grid-template-columns: minmax(340px, .82fr) minmax(360px, 1.18fr);
    gap: 24px;
}

html body .vario-contractor-card-v5-consent-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

html body .vario-contractor-card-v5-consent-group {
    display: grid;
    align-content: start;
    gap: 2px;
}

html body .vario-contractor-card-v5-consent-group > strong {
    padding: 4px 0 5px;
    border-bottom: 1px solid var(--vario-border);
    color: var(--vario-text-strong);
    font: 700 10px/13px var(--vario-font-family-ui);
}

html body .vario-contractor-card-v5-consent-choice {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    min-height: 38px;
    gap: 7px;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-bottom-color: var(--vario-border-soft);
    border-radius: 4px;
    cursor: pointer;
}

html body .vario-contractor-card-v5-consent-choice.selected {
    border-color: var(--vario-component-document-window-tab-active-border);
    background: var(--vario-component-document-window-tab-active-bg);
}

html body .vario-contractor-card-v5-consent-choice input { margin: 0; accent-color: var(--vario-accent); }
html body .vario-contractor-card-v5-consent-choice > span { display: grid; gap: 1px; min-width: 0; }
html body .vario-contractor-card-v5-consent-choice strong { color: var(--vario-text-strong); font: 600 10px/13px var(--vario-font-family-ui); }
html body .vario-contractor-card-v5-consent-choice small { color: var(--vario-text-muted); font: 500 9px/11px var(--vario-font-family-ui); }

html body .vario-contractor-card-v5-consent-details {
    min-width: 0;
    padding-left: 20px;
    border-left: 1px solid var(--vario-border);
}

html body .vario-contractor-card-v5-consent-details-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 30px;
    gap: 8px;
    border-bottom: 1px solid var(--vario-border);
}

html body .vario-contractor-card-v5-consent-details-heading strong { color: var(--vario-text-strong); font: 700 11px/14px var(--vario-font-family-ui); }
html body .vario-contractor-card-v5-consent-details-heading span { font: 600 9px/12px var(--vario-font-family-ui); }
html body .vario-contractor-card-v5-consent-details-heading .is-granted { color: var(--vario-status-success-text); }
html body .vario-contractor-card-v5-consent-details-heading .is-revoked { color: var(--vario-text-muted); }

html body .vario-contractor-card-v5-metric {
    display: flex;
    align-items: center;
    min-width: 0;
    height: var(--vario-contractor-card-metric-height);
    gap: 8px 18px;
    padding: 0 12px;
    overflow: hidden;
    border-top: 1px solid var(--vario-border);
    background: var(--vario-surface-muted);
    color: var(--vario-text-muted);
    font: 500 10px/14px var(--vario-font-family-ui);
    white-space: nowrap;
}

html body .vario-contractor-card-v5-metric strong { color: var(--vario-text-strong); }

html body .vario-contractor-card-v5-footer {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: var(--vario-contractor-card-footer-height) !important;
    height: var(--vario-contractor-card-footer-height) !important;
    margin: 0 !important;
    box-sizing: border-box;
    padding: 7px 12px !important;
    border-top: 1px solid var(--vario-border) !important;
    border-radius: 0 0 7px 7px;
    background: var(--vario-toolbar-bg) !important;
}

html body .vario-contractor-card-v5-footer > .btn:first-child {
    color: var(--vario-status-danger-text) !important;
    border-color: var(--vario-status-danger-border) !important;
    background: var(--vario-status-danger-bg) !important;
}

html body .vario-contractor-card-v5-child-layer {
    z-index: var(--vario-contractor-card-child-layer);
    background: var(--vario-window-overlay);
}

html body .vario-contractor-card-v5-child-dialog {
    width: min(620px, calc(100vw - 24px));
    max-width: 620px;
}

html body .vario-contractor-card-v5-child-dialog.compact {
    width: min(430px, calc(100vw - 24px));
    max-width: 430px;
}

html body .vario-contractor-card-v5-child-dialog .modal-content {
    overflow: hidden;
    border: 1px solid var(--vario-window-frame-border);
    border-radius: 8px;
    background: var(--vario-component-card-bg, var(--vario-modal-bg));
}

#vario-app-root[data-vario-theme] body .vario-contractor-card-v5-child-body,
html body .vario-contractor-card-v5-child-body {
    display: grid;
    max-height: min(620px, calc(100vh - 160px));
    gap: 2px;
    padding: 10px 12px;
    overflow: auto;
    background: var(--vario-component-card-bg, var(--vario-surface)) !important;
}

html body .vario-contractor-card-v5-model-note {
    color: var(--vario-text-muted);
    font: 500 9px/12px var(--vario-font-family-ui);
}

@container contractor-card-body (max-width: 930px) {
    html body .vario-contractor-card-v5-main-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "identity address"
            "classification classification"
            "additional additional"
            "notes notes";
    }

    html body .vario-contractor-card-v5-classification {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0 14px;
        padding: 6px 0 0;
        border-top: 1px solid var(--vario-border);
        border-left: 0;
    }

    html body .vario-contractor-card-v5-classification > .vario-contractor-card-v5-section-toolbar {
        grid-column: 1 / -1;
    }

    html body .vario-contractor-card-v5-contact-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body .vario-contractor-card-v5-contact-columns > :last-child { grid-column: 1 / -1; padding: 8px 0 0; border-top: 1px solid var(--vario-border); border-left: 0; }
    html body .vario-contractor-card-v5-consents-layout { grid-template-columns: 1fr; }
    html body .vario-contractor-card-v5-consent-details { padding: 8px 0 0; border-top: 1px solid var(--vario-border); border-left: 0; }
}

@container contractor-card-body (max-width: 720px) {
    html body .vario-contractor-card-v5-main-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "identity" "address" "classification" "additional" "notes";
    }

    html body .vario-contractor-card-v5-classification,
    html body .vario-contractor-card-v5-two-columns,
    html body .vario-contractor-card-v5-split,
    html body .vario-contractor-card-v5-three-columns,
    html body .vario-contractor-card-v5-feature-grid,
    html body .vario-contractor-card-v5-history-notes,
    html body .vario-contractor-card-v5-contact-columns,
    html body .vario-contractor-card-v5-consent-groups {
        grid-template-columns: minmax(0, 1fr);
    }

    html body .vario-contractor-card-v5-notes-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    html body .vario-contractor-card-v5-note-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: 0;
    }

    html body .vario-contractor-card-v5-contact-columns > .vario-contractor-card-v5-section {
        padding: 8px 0;
        border-top: 1px solid var(--vario-border);
        border-left: 0;
    }
}

html body .vario-contractor-pkd-dialog {
    width: min(960px, calc(100vw - 32px));
    max-width: 960px;
}

html body .vario-contractor-pkd-body {
    display: grid;
    grid-template-rows: auto auto minmax(150px, 1fr) auto;
    min-height: 360px;
    max-height: min(64vh, 590px);
    gap: 7px;
    padding: 10px 12px;
    overflow: hidden;
}

html body .vario-contractor-pkd-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 24px;
    gap: 6px 14px;
    color: var(--vario-text-muted);
    font: 600 10px/14px var(--vario-font-family-ui);
}

html body .vario-contractor-pkd-editor {
    display: grid;
    grid-template-columns: 120px minmax(220px, 1fr) 90px auto;
    align-items: end;
    gap: 7px;
    padding: 7px;
    border: 1px solid var(--vario-border);
    border-radius: 6px;
    background: var(--vario-surface-muted);
}

html body .vario-contractor-pkd-editor label {
    display: grid;
    gap: 2px;
    margin: 0;
    color: var(--vario-text-muted);
    font: var(--vario-font-form-label);
}

html body .vario-contractor-pkd-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

html body .vario-contractor-pkd-actions .btn {
    min-height: 22px !important;
    height: 22px !important;
    padding-inline: 7px !important;
    font-size: 10px !important;
}

html body .vario-contractor-pkd-grid tr.is-primary > td {
    background: color-mix(in srgb, var(--vario-color-primary-100) 68%, var(--vario-surface)) !important;
}

html body .vario-contractor-pkd-grid {
    height: 100%;
    min-height: 160px;
}

html body .vario-contractor-pkd-grid td:first-child {
    white-space: nowrap;
}

html body .vario-contractor-pkd-grid tbody tr[role="button"] {
    cursor: pointer;
}

html body .vario-contractor-pkd-grid tbody tr[role="button"]:focus-visible {
    outline: 2px solid var(--vario-color-focus-ring);
    outline-offset: -2px;
}

html body .vario-contractor-pkd-preview {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: stretch;
    min-height: 76px;
    border: 1px solid var(--vario-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--vario-surface);
}

html body .vario-contractor-pkd-preview-code {
    display: grid;
    place-items: center;
    padding: 8px;
    border-right: 1px solid var(--vario-border);
    background: var(--vario-surface-muted);
    color: var(--vario-color-primary-600);
    font: 800 15px/20px var(--vario-font-family-ui);
}

html body .vario-contractor-pkd-preview-content {
    display: grid;
    align-content: center;
    gap: 3px;
    min-width: 0;
    padding: 8px 10px;
}

html body .vario-contractor-pkd-preview-content > span,
html body .vario-contractor-pkd-preview-content > small {
    color: var(--vario-text-muted);
    font: 600 10px/14px var(--vario-font-family-ui);
}

html body .vario-contractor-pkd-preview-content > strong {
    color: var(--vario-text);
    font: 750 11px/16px var(--vario-font-family-ui);
    white-space: normal;
    overflow-wrap: anywhere;
}

html body .vario-contractor-pkd-preview-empty {
    grid-column: 1 / -1;
    display: grid;
    place-items: center start;
    padding: 10px 12px;
    color: var(--vario-text-muted);
    font: 600 10px/14px var(--vario-font-family-ui);
}

@media (max-width: 860px) {
    html body .vario-contractor-pkd-preview {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    html body .vario-contractor-card-v5-layer {
        inset: var(--vario-size-topbar-height, 58px) 0 var(--vario-size-statusbar-height, 22px) 0 !important;
        padding: 6px;
    }

    html body .vario-contractor-card-v5-dialog {
        width: 100%;
        max-width: 100%;
        height: 100% !important;
        max-height: 100% !important;
    }

    html body .vario-contractor-card-v5 {
        grid-template-rows: 49px 32px minmax(0, 1fr) auto var(--vario-contractor-card-footer-height);
    }

    html body .vario-contractor-card-v5 > [data-vario-component="VarioDocumentDialogHeader"] {
        height: 49px !important;
        min-height: 49px !important;
        padding: 5px 8px !important;
    }

    html body .vario-contractor-card-v5 > [data-vario-component="VarioDocumentDialogHeader"] .vario-erp-document-card-icon {
        flex-basis: 28px !important;
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
    }

    html body .vario-contractor-card-v5-metric {
        flex-wrap: wrap;
        height: auto;
        min-height: 29px;
        padding-block: 4px;
    }
}

@media (max-width: 720px) {
    html body .vario-contractor-pkd-editor {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 420px) {
    html body .vario-contractor-card-v5-layer,
    html body .vario-contractor-card-v5-child-layer { --vario-contractor-card-label-width: 95px; }
    html body .vario-contractor-card-v5-body { padding-inline: 8px; }
    html body .vario-contractor-card-v5-field { grid-template-columns: minmax(0, 95px) minmax(0, 1fr); }
    html body .vario-contractor-card-v5-section-toolbar { align-items: center; }
    html body .vario-contractor-card-v5-section-toolbar > .btn { flex: 0 0 auto; }
    html body .vario-contractor-card-v5-channel-item,
    html body .vario-contractor-card-v5-address-item { grid-template-columns: 24px minmax(0, 1fr); }
}