/* Stellt sicher, dass native Formularelemente (z. B. Select-Dropdowns) im dunklen Farbschema lesbar sind. */
:root {
    color-scheme: dark;
    --ui-scale: 0.85;
    --responsive-surface-min-height: clamp(16rem, 44dvh, 30rem);
    --responsive-scroll-min-height: clamp(12rem, 34dvh, 24rem);
    /* Spacing tokens (base 16px) */
    --space-neg-2: -0.125rem;
    --space-2: 0.125rem;
    --space-3: 0.1875rem;
    --space-4: 0.25rem;
    --space-5: 0.3125rem;
    --space-6: 0.375rem;
    --space-8: 0.5rem;
    --space-10: 0.625rem;
    --space-12: 0.75rem;
    --space-14: 0.875rem;
    --space-15: 0.9375rem;
    --space-16: 1rem;
    --space-18: 1.125rem;
    --space-20: 1.25rem;
    --space-22: 1.375rem;
    --space-24: 1.5rem;
    --space-30: 1.875rem;
    --space-80: 5rem;
    --space-workarea-edge: var(--space-16);
    /* Font-size tokens (base 16px) */
    --fs-11: 0.6875rem;
    --fs-12: 0.75rem;
    --fs-13: 0.8125rem;
    --fs-14: 0.875rem;
    --fs-16: 1rem;
    --fs-18: 1.125rem;
    --fs-20: 1.25rem;
    --fs-24: 1.5rem;
    /* Radius tokens (base 16px) */
    --radius-3: 0.1875rem;
    --radius-4: 0.25rem;
    --radius-6: 0.375rem;
    --radius-8: 0.5rem;
    --radius-10: 0.625rem;
    --radius-12: 0.75rem;
    /* Font tokens */
    --font-family-sans: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --font-family-mono-ui: Consolas, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    --font-family-mono-courier: Consolas, "Courier New", monospace;
    --font-family-inherit: inherit;
    --font-weight-500: 500;
    --font-weight-600: 600;
    --font-weight-700: 700;
    --font-weight-800: 800;
    --font-inherit: inherit;
    /* Color tokens */
    --color-brand: #CE004F;
    --color-white-overlay-08: rgba(255, 255, 255, 0.08);
    --color-white-overlay-04: rgba(255, 255, 255, 0.04);
    --color-white-overlay-12: rgba(255, 255, 255, 0.12);
    --color-black-overlay-35: rgba(0, 0, 0, 0.35);
    --color-white: #ffffff;
    --color-text-primary: #363A3A;
    --color-neutral-overlay-04: rgba(54, 58, 58, 0.04);
    --color-neutral-overlay-18: rgba(54, 58, 58, 0.18);
    --color-brand-overlay-65: rgba(206, 0, 79, 0.65);
    --color-brand-overlay-18: rgba(206, 0, 79, 0.18);
    --color-neutral-overlay-08: rgba(54, 58, 58, 0.08);
    --color-surface-muted: #f5f5f5;
    --color-neutral-overlay-06: rgba(54, 58, 58, 0.06);
    --color-black-overlay-25: rgba(0, 0, 0, 0.25);
    --color-text-muted: #666C6C;
    --color-danger-overlay-35: rgba(248, 113, 113, 0.35);
    --color-danger-overlay-12: rgba(248, 113, 113, 0.12);
    --color-warning-overlay-35: rgba(251, 191, 36, 0.35);
    --color-warning-overlay-12: rgba(251, 191, 36, 0.12);
    --color-border-soft: #d1d5db;
    --color-border-neutral: #ACB0B0;
    --color-bg-page: #E1E6E6;
    --color-danger-border-soft: #fca5a5;
    --color-danger-bg-soft: #fee2e2;
    --color-danger-text-deep: #7f1d1d;
    --color-neutral-overlay-12: rgba(54, 58, 58, 0.12);
    --color-danger-overlay-45: rgba(248, 113, 113, 0.45);
    --color-deep-navy-overlay-90: rgba(15, 26, 47, 0.9);
    --color-white-overlay-16: rgba(255, 255, 255, 0.16);
    --color-neutral-overlay-16: rgba(54, 58, 58, 0.16);
    --color-neutral-overlay-09: rgba(17, 24, 39, 0.09);
    --color-black-overlay-18: rgba(0, 0, 0, 0.18);
    --color-danger-text: #b91c1c;
    --color-black-overlay-12: rgba(0, 0, 0, 0.12);
    --color-surface-hover-alt: #e5e7eb;
    --color-black-overlay-55: rgba(0, 0, 0, 0.55);
    --color-danger-text-strong: #991b1b;
    --color-warning-bg-soft: #fef3c7;
    --color-warning-text: #92400e;
    --color-info-bg-soft: #e0f2fe;
    --color-info-text: #0c4a6e;
    --color-success-text: #16a34a;
    --color-neutral-overlay-80: rgba(17, 24, 39, 0.8);
    --color-surface-hover-light: #eeeeee;
    --color-neutral-overlay-20: rgba(54, 58, 58, 0.2);
    --color-danger-bg: #d32f2f;
    --color-danger-border-strong: #b71c1c;
    --color-action-blue-bg: #1976d2;
    --color-action-blue-border: #0d47a1;
    --color-surface-hover: #efefef;
    --color-selection-bg: #dbeafe;
    --color-selection-border: #93c5fd;
    --color-warning-accent-bg: #ffe88a;
    --color-warning-accent-border: #e0c96a;
    --color-row-hover: #f3f4f6;
    --color-text-disabled: #9ca3af;
}

.auth-error-page {
    min-height: calc(100vh - 120px);
    display: grid;
    place-items: center;
    padding: var(--space-8);
}

.auth-error-card {
    width: min(680px, 100%);
    padding: var(--space-8);
    border-radius: var(--radius-4);
    border: 1px solid rgba(120, 130, 150, .4);
    background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(244, 246, 250, .96));
    box-shadow: 0 10px 30px rgba(18, 30, 53, .16);
}

.auth-error-title {
    margin: 0 0 var(--space-3);
}

.auth-error-code {
    margin: 0 0 var(--space-5);
    font-family: var(--font-mono);
    color: var(--text-subtle);
}

.auth-error-message {
    margin: 0;
    line-height: 1.5;
}

.auth-error-actions {
    margin-top: var(--space-7);
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

*, *::before, *::after {
    box-sizing: border-box;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

html {
    font-size: calc(16px * var(--ui-scale));
}

html, body {
    height: 100%;
    margin: 0;
    font-family: var(--font-family-sans);
    background: var(--color-bg-page);
    color: var(--color-white);
}

.layout {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.topbar {
    background: var(--color-brand);
    border-right: 1px solid var(--color-white-overlay-12);
    padding: var(--space-12) var(--space-10);
    flex: 0 0 auto;
    z-index: 10;
    box-shadow: 0.625rem 0 1.5rem var(--color-black-overlay-18);
}

.main {
    padding: var(--space-24);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    color-scheme: light;
}

.nav {
    display: flex;
    flex-direction: column;
    width: 17.5rem;
    height: 100%;
    gap: var(--space-12);
    transition: width 140ms ease;
}

.nav.collapsed {
    width: 4.75rem;
}

.nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.nav-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    border: 1px solid var(--color-white-overlay-16);
    border-radius: var(--radius-8);
    overflow: hidden;
    background: #b00045;
}

.nav-logo {
    display: block;
    width: 10rem;
    max-width: 100%;
    height: auto;
}

.nav-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--color-white-overlay-12);
    border-radius: var(--radius-8);
    background: var(--color-white-overlay-04);
    color: var(--color-white);
    cursor: pointer;
}

.nav-collapse-btn:hover {
    background: var(--color-white-overlay-08);
}

.nav-collapse-icon {
    font-size: var(--fs-14);
    line-height: 1;
    transform: rotate(0deg);
    transition: transform 140ms ease;
}

.nav.collapsed .nav-collapse-icon {
    transform: rotate(180deg);
}

.nav-links {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.nav-links-scroll {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: var(--space-4);
    flex: 1 1 auto;
}

.nav-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--fs-16);
    color: var(--color-white);
    text-decoration: none;
    height: auto;
    padding: 8px var(--space-10) 10px;
    border-radius: var(--radius-8);
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: transparent;
    line-height: 1.3;
    white-space: nowrap;
    justify-content: flex-start;
    min-height: 38px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* Ensure button-based nav entries use the same custom styling as links. */
.nav button.nav-link {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
    background-color: transparent;
    background-image: none;
}

.nav-link-text {
    display: block;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
}

.nav-link-text-inner {
    display: block;
    line-height: 20px;
    padding: 0 0 4px;
}

.nav-link-short {
    display: none;
    font-weight: var(--font-weight-500);
    letter-spacing: 0.04em;
    line-height: 20px;
    padding: 0 0 4px;
}

.nav-div-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    margin-top: auto;
    padding-top: var(--space-10);
    border-top: 1px solid var(--color-white-overlay-12);
}

.nav-user {
    position: relative;
    display: flex;
    align-items: stretch;
}

.nav-user-trigger {
    width: 100%;
    min-width: 0;
    font-weight: var(--font-weight-600);
}

.nav-user-menu {
    position: absolute;
    right: 0;
    top: auto;
    bottom: calc(100% + 6px);
    background: var(--color-brand);
    border: 1px solid var(--color-white-overlay-12);
    border-radius: var(--radius-10);
    padding: var(--space-6);
    min-width: 140px;
    box-shadow: 0 12px 30px var(--color-black-overlay-35);
    z-index: 50;
}
.nav-user-item {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--color-white);
    text-align: left;
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-8);
    cursor: pointer;
}
.nav-user-item:hover {
    background: var(--color-white-overlay-08);
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
}

.nav button.nav-link:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
}

.nav-link.active {
    background: var(--color-white);
    color: var(--color-brand);
    border-color: var(--color-white);
    box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.2);
}

.nav-link.nav-link-icon {
    padding: var(--space-8) var(--space-10);
}

.nav-link .icon {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
    flex: 0 0 auto;
}

.nav.collapsed .nav-logo {
    width: 2.875rem;
}

.nav.collapsed .nav-link {
    justify-content: center;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
    min-height: 2.5rem;
    border-color: rgba(255, 255, 255, 0.35);
    background: transparent;
}

.nav.collapsed .nav-link:not(.active):hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
}

.nav.collapsed .nav-link.active {
    background: var(--color-white);
    color: var(--color-brand);
    border-color: var(--color-white);
    box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.2);
}

.nav.collapsed .nav-link-text {
    display: none;
}

.nav.collapsed .nav-link-short {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    font-size: var(--fs-11);
    font-weight: var(--font-weight-500);
    text-transform: uppercase;
}

.nav.collapsed .nav-links-scroll {
    padding-right: 0;
}

.nav.collapsed .nav-link .icon {
    display: none;
}

.nav.collapsed .nav-user-menu {
    left: calc(100% + 0.5rem);
    right: auto;
    top: 0;
}

.nav-mobile-toggle,
.nav-mobile-backdrop {
    display: none;
}

.nav-mobile-toggle {
    border: 1px solid var(--color-white-overlay-12);
    background: var(--color-brand);
    color: var(--color-white);
    border-radius: var(--radius-8);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.nav-mobile-toggle:hover {
    background: #b00045;
}

.nav-mobile-toggle-icon {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

.card {
    background: var(--color-white-overlay-04);
    border: 1px solid var(--color-white-overlay-08);
    border-radius: var(--radius-12);
    padding: var(--space-16);
    margin: var(--space-16) 0;
}

.find-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: var(--space-10);
}

.find-card {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.find-workarea {
    background: var(--color-white);
    color: var(--color-text-primary);
    border-radius: var(--radius-12);
    padding: var(--space-workarea-edge);
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.find-criteria {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.find-row {
    display: flex;
    gap: var(--space-12);
    align-items: center;
    flex-wrap: nowrap;
}

.find-row.find-actions {
    flex-wrap: wrap;
}

.find-label {
    flex: 0 0 200px;
    min-width: 200px;
    font-size: var(--fs-12);
    opacity: 0.85;
}

.find-actions .checks {
    flex: 1 1 auto;
}

.find-toolbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-10);
    flex-wrap: wrap;
}

.find-footer-wrap {
    flex: 0 0 auto;
}

.find-footer {
    background: var(--color-white);
    border: 1px solid var(--color-border-neutral);
    color: var(--color-text-primary);
    margin: 0;
    padding: var(--space-12);
    box-shadow: 0 -0.375rem 0.75rem var(--color-neutral-overlay-08);
}

.find-workarea input.input {
    background: var(--color-neutral-overlay-04);
    border: 1px solid var(--color-neutral-overlay-18);
    border-radius: var(--radius-10);
    padding: var(--space-6) var(--space-8);
    color: var(--color-text-primary);
    outline: none;
}

.find-workarea input.input:focus {
    border-color: var(--color-brand-overlay-65);
    box-shadow: 0 0 0 0.1875rem var(--color-brand-overlay-18);
}

.find-workarea select.input {
    color-scheme: light;
}

.find-workarea .table th,
.find-workarea .table td {
    border-bottom: 1px solid var(--color-neutral-overlay-08);
}

.find-workarea .table thead th {
    background: var(--color-surface-muted);
    color: var(--color-text-primary);
    backdrop-filter: none;
    z-index: 2;
}

.find-workarea .row:hover {
    background: var(--color-neutral-overlay-06);
}

.find-workarea .row.selected {
    background: var(--color-neutral-overlay-12);
}

.find-workarea .row.separated td {
    border-top: 1px solid var(--color-neutral-overlay-18);
}

.btn.with-icon {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
}

.btn.with-icon .btn-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
}

.btn img.btn-icon {
    filter: none;
}

.btn.light img.btn-icon,
.btn.light.primary img.btn-icon {
    filter: none;
}

.input {
    width: 100%;
    background: var(--color-black-overlay-25);
    border: 1px solid var(--color-white-overlay-12);
    border-radius: var(--radius-10);
    padding: var(--space-5) var(--space-12);
    color: var(--color-white);
    outline: none;
}

select.input,
select.calc-input,
select.cv-select {
    background: var(--color-white);
    border: 1px solid var(--color-border-neutral);
    border-radius: var(--radius-3);
    padding: var(--space-3) var(--space-6);
    min-height: calc(1em * 1.4 + (2 * var(--space-3)) + 2px);
    color: var(--color-text-primary);
    line-height: 1.4;
    outline: none;
    color-scheme: light;
}

select.input option,
select.calc-input option,
select.cv-select option,
select.input optgroup,
select.calc-input optgroup,
select.cv-select optgroup {
    background-color: var(--color-white);
    color: var(--color-text-primary);
}

select.input option:disabled,
select.calc-input option:disabled,
select.cv-select option:disabled {
    color: var(--color-text-muted);
}

input[type="checkbox"],
input[type="radio"] {
    color-scheme: light;
    inline-size: 1rem;
    block-size: 1rem;
    flex: 0 0 auto;
}

.find-row .input.find-value {
    width: 6.25rem;
    flex: 0 0 6.25rem;
}

.checks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-10) var(--space-14);
    align-items: center;
}

.checks label {
    display: inline-flex;
    gap: var(--space-8);
    align-items: center;
    margin: 0;
}

.btn {
    border: 1px solid var(--color-neutral-overlay-16);
    background: var(--color-neutral-overlay-06);
    color: var(--color-text-primary);
    padding: var(--space-5) var(--space-12);
    border-radius: var(--radius-10);
    cursor: pointer;
}

.btn:hover {
    background: var(--color-neutral-overlay-09);
}

.btn.primary {
    background: var(--color-neutral-overlay-12);
    border-color: var(--color-neutral-overlay-16);
    color: var(--color-text-primary);
}

.btn.primary:hover {
    background: var(--color-neutral-overlay-16);
}

.btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.alert {
    padding: var(--space-12) var(--space-14);
    border-radius: var(--radius-12);
    margin: var(--space-12) 0 0 0;
}

.alert.error {
    border: 1px solid var(--color-danger-overlay-35);
    background: var(--color-danger-overlay-12);
}

.alert.warning {
    border: 1px solid var(--color-warning-overlay-35);
    background: var(--color-warning-overlay-12);
}

.empty {
    opacity: 0.8;
    margin-top: var(--space-12);
}

.table-wrap {
    overflow-x: auto;
    overflow-y: visible;
}

.table {
    width: 100%;
    border-collapse: collapse;
    min-width: 820px;
}

.auth-admin-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    color: var(--color-text-primary);
}

.auth-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--space-12);
    align-items: start;
}

.auth-admin-grid-wide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22.5rem, 1fr));
    gap: var(--space-12);
    margin-top: var(--space-12);
}

.auth-admin-card {
    margin: 0;
}

.auth-admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
}

.auth-admin-title {
    margin: 0;
}

.auth-admin-hint {
    opacity: 0.7;
    font-size: var(--fs-12);
}

.auth-admin-subtitle {
    margin-top: var(--space-14);
    font-weight: var(--font-weight-700);
}

.auth-admin-toggle {
    margin-top: var(--space-8);
}

.auth-admin-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    align-items: center;
}

.auth-admin-form .input {
    min-width: 11.25rem;
}

.auth-admin-form.compact .input {
    min-width: 8.75rem;
    max-width: 13.75rem;
}

.auth-admin-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.auth-admin-params .input {
    min-width: 7.5rem;
}

.auth-admin-mini-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-top: var(--space-10);
}

.auth-admin-mini-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-12);
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-10);
    background: var(--color-white);
    border: 1px solid var(--color-border-soft);
}

.auth-admin-mini-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.auth-admin-mini-name {
    font-weight: var(--font-weight-600);
}

.auth-admin-mini-meta {
    opacity: 0.7;
    font-size: var(--fs-12);
}

.auth-admin-mini-actions {
    display: flex;
    align-items: center;
    gap: var(--space-10);
}

.auth-admin-mini-state {
    font-size: var(--fs-12);
    opacity: 0.7;
}

.auth-admin-scroll {
    max-height: 20rem;
    overflow-y: auto;
}

.auth-admin-page .card {
    background: var(--color-bg-page);
    border: 1px solid var(--color-border-neutral);
    color: var(--color-text-primary);
}

.auth-admin-page .input {
    background: var(--color-white);
    border: 1px solid var(--color-border-neutral);
    color: var(--color-text-primary);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-4);
}

.auth-admin-page select.input {
    background: var(--color-white);
    border: 1px solid var(--color-border-neutral);
    color: var(--color-text-primary);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-3);
    color-scheme: light;
}

.auth-admin-page .btn {
    background: var(--color-bg-page);
    border: 1px solid var(--color-border-neutral);
    color: var(--color-text-primary);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-4);
}

.auth-admin-page .btn.primary {
    background: var(--color-surface-hover-alt);
    border-color: var(--color-border-neutral);
    color: var(--color-text-primary);
}

.auth-admin-page .btn.primary:hover {
    background: var(--color-border-neutral);
}

.auth-admin-page .btn.danger {
    border-color: var(--color-danger-border-soft);
    background: var(--color-danger-bg-soft);
    color: var(--color-danger-text-deep);
}

.auth-admin-row-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
}

.auth-admin-icon-btn {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    padding: 0;
    justify-content: center;
}

.auth-admin-page .table th,
.auth-admin-page .table td {
    border-bottom: 1px solid var(--color-neutral-overlay-12);
}

.auth-admin-page .table thead th {
    background: var(--color-bg-page);
    color: var(--color-text-primary);
    backdrop-filter: none;
}

.auth-admin-page .row:hover {
    background: var(--color-neutral-overlay-06);
}

.auth-admin-page .row.selected {
    background: var(--color-neutral-overlay-12);
}

.auth-admin-page .row.separated td {
    border-top: 1px solid var(--color-neutral-overlay-18);
}

.auth-admin-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
    gap: var(--space-12);
    margin-top: var(--space-12);
}

.table th,
.table td {
    border-bottom: 1px solid var(--color-white-overlay-08);
    padding: var(--space-6) var(--space-10);
    text-align: left;
    white-space: nowrap;
    line-height: 1.2;
}

.table.compact {
    min-width: 560px;
}

.input.input-number {
    min-width: 7.5rem;
}

.btn.danger {
    border-color: var(--color-danger-overlay-45);
    background: var(--color-danger-overlay-12);
}

.table thead th {
    position: sticky;
    top: 0;
    background: var(--color-deep-navy-overlay-90);
    backdrop-filter: blur(6px);
    z-index: 1;
}

.row:hover {
    background: var(--color-white-overlay-04);
}

.row.selected {
    background: var(--color-neutral-overlay-12);
}

.row.separated td {
    border-top: 1px solid var(--color-white-overlay-16);
    padding-top: var(--space-16);
}

.dim-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: var(--space-10);
}

.dim-card {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.dim-workarea {
    background: var(--color-white);
    color: var(--color-text-primary);
    border-radius: var(--radius-12);
    padding: var(--space-workarea-edge);
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.dim-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    margin: 0 auto;
}

.dim-zoom {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
}

.dim-zoom-value {
    min-width: 48px;
    text-align: center;
    opacity: 0.8;
}

.dim-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    flex-wrap: wrap;
}

.dim-footer-wrap {
    flex: 0 0 auto;
}

.dim-footer {
    background: var(--color-white);
    border: 1px solid var(--color-border-neutral);
    color: var(--color-text-primary);
    margin: 0;
    padding: var(--space-12);
    box-shadow: 0 -0.375rem 0.75rem var(--color-neutral-overlay-08);
}

.dim-toolbar .btn.with-icon {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
}

.dim-toolbar .btn.with-icon.is-loading {
    cursor: progress;
}

.dim-toolbar .btn.with-icon .btn-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
}

.dim-download-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    margin-top: var(--space-10);
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--color-border-neutral);
    border-radius: var(--radius-10);
    background: var(--color-surface-muted);
    color: var(--color-text-primary);
}

.dim-download-spinner {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    border: 2px solid var(--color-border-neutral);
    border-right-color: transparent;
    border-radius: 50%;
    animation: dim-download-spin 0.75s linear infinite;
}

@keyframes dim-download-spin {
    to {
        transform: rotate(360deg);
    }
}

.dim-usertext {
    flex: 1 1 240px;
    min-width: 150px;
    max-width: 520px;
}

.mot-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: var(--space-10);
}

.mot-card {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.mot-workarea {
    background: var(--color-white);
    color: var(--color-text-primary);
    border-radius: var(--radius-12);
    padding: var(--space-workarea-edge);
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.mot-info {
    margin: 0;
    white-space: pre-wrap;
}

.mot-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: var(--space-10);
}

.mot-toolbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-10);
    flex-wrap: wrap;
}

.mot-footer-wrap {
    flex: 0 0 auto;
}

.mot-footer {
    background: var(--color-white);
    border: 1px solid var(--color-border-neutral);
    color: var(--color-text-primary);
    margin: 0;
    padding: var(--space-12);
    box-shadow: 0 -0.375rem 0.75rem var(--color-neutral-overlay-08);
}

.get-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.get-card {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.get-workarea {
    background: var(--color-white);
    color: var(--color-text-primary);
    border-radius: var(--radius-12);
    padding: var(--space-workarea-edge);
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.get-info {
    margin: 0;
    font-family: var(--font-family-mono-ui);
    white-space: pre;
}

.get-actions {
    display: flex;
    gap: var(--space-10);
    flex-wrap: wrap;
    margin-top: var(--space-10);
}

.get-aktion {
    display: flex;
    gap: var(--space-10);
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: var(--space-12);
}

.get-aktion-select {
    min-width: 13.75rem;
    max-width: 22.5rem;
}

.get-aktion-text {
    font-weight: var(--font-weight-600);
    letter-spacing: 0.06em;
}

.get-row {
    display: flex;
    gap: var(--space-10);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--space-16);
}

.get-row.mono {
    font-family: var(--font-family-mono-ui);
}

.get-row.get-row-top {
    align-items: flex-start;
}

.get-label {
    white-space: pre;
}

.get-result {
    margin: 0;
}

.get-hint {
    opacity: 0.85;
}

.get-spiel {
    margin-top: var(--space-10);
}

.get-input {
    background: var(--color-neutral-overlay-04);
    border: 1px solid var(--color-neutral-overlay-18);
    border-radius: var(--radius-10);
    padding: var(--space-6) var(--space-8);
    color: var(--color-text-primary);
    font-family: var(--font-family-mono-ui);
    outline: none;
}

.get-input:focus {
    border-color: var(--color-brand-overlay-65);
    box-shadow: 0 0 0 0.1875rem var(--color-brand-overlay-18);
}

.get-input-small {
    width: 5.625rem;
}

.get-input-n2 {
    width: 6.875rem;
}

.btn.light {
    background: var(--color-neutral-overlay-06);
    border-color: var(--color-neutral-overlay-16);
    color: var(--color-text-primary);
}

.btn.light:hover {
    background: var(--color-neutral-overlay-09);
}

.txt-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: var(--space-10);
}

.txt-card {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.txt-workarea {
    background: var(--color-white);
    color: var(--color-text-primary);
    border-radius: var(--radius-12);
    padding: var(--space-workarea-edge);
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.txt-block {
    margin: 0;
    white-space: pre-wrap;
}

.txt-block.txt-spaced {
    margin-top: var(--space-20);
}

.txt-image {
    display: block;
    width: 18.75rem;
    max-width: 100%;
    height: auto;
    margin: var(--space-10);
}

.txt-toolbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-10);
    flex-wrap: wrap;
}

.txt-footer-wrap {
    flex: 0 0 auto;
}

.txt-footer {
    background: var(--color-white);
    border: 1px solid var(--color-border-neutral);
    color: var(--color-text-primary);
    margin: 0;
    padding: var(--space-12);
    box-shadow: 0 -0.375rem 0.75rem var(--color-neutral-overlay-08);
}

.txt-lang-wrap {
    position: relative;
    display: inline-flex;
}

.txt-lang-popup {
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.375rem);
    min-width: 7.5rem;
    background: var(--color-white);
    border: 1px solid var(--color-border-neutral);
    border-radius: var(--radius-6);
    box-shadow: 0 0.625rem 1.5rem var(--color-black-overlay-18);
    padding: var(--space-4);
    z-index: 900;
}

.txt-lang-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--space-4) var(--space-8);
    border: 0;
    border-radius: var(--radius-4);
    background: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
}

.txt-lang-option:hover {
    background: var(--color-bg-page);
}

.calc-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: var(--space-10);
}

.calc-card {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.calc-workarea {
    background: var(--color-white);
    color: var(--color-text-primary);
    border-radius: var(--radius-12);
    padding: var(--space-workarea-edge);
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.calc-header {
    display: flex;
    gap: var(--space-10);
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: var(--space-10);
}

.calc-sketches {
    display: flex;
    gap: var(--space-16);
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: var(--space-10);
}

.calc-sketch {
    display: block;
    max-width: 100%;
    height: auto;
}

.calc-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
}

.calc-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.calc-title-row td {
    font-weight: var(--font-weight-700);
    padding-top: var(--space-14);
    padding-bottom: var(--space-6);
}

.calc-row td {
    border-bottom: 1px solid var(--color-neutral-overlay-08);
    padding: var(--space-6) var(--space-10);
    vertical-align: top;
}

.calc-col-label {
    min-width: 320px;
}

.calc-col-fo {
    width: 90px;
    white-space: nowrap;
    opacity: 0.85;
}

.calc-col-unit {
    width: 90px;
    white-space: nowrap;
    opacity: 0.85;
}

.calc-col-val {
    width: 320px;
}

.calc-col-help {
    color: var(--color-danger-text);
    white-space: pre-wrap;
}

.calc-col-multiline {
    padding-left: var(--space-10);
}

.calc-output {
    margin: 0;
    white-space: pre-wrap;
    background: var(--color-neutral-overlay-04);
    border: 1px solid var(--color-neutral-overlay-18);
    border-radius: var(--radius-10);
    padding: var(--space-8) var(--space-10);
    color: var(--color-text-primary);
    font-family: var(--font-family-inherit);
}

.calc-input {
    width: 100%;
    min-width: 0;
    background: var(--color-neutral-overlay-04);
    border: 1px solid var(--color-neutral-overlay-18);
    border-radius: var(--radius-10);
    padding: var(--space-6) var(--space-8);
    color: var(--color-text-primary);
    outline: none;
}

.calc-page select.calc-input {
    color-scheme: light;
}

.calc-page select.calc-input option,
.calc-page select.calc-input optgroup {
    background-color: var(--color-white);
    color: var(--color-text-primary);
}

.calc-page select.calc-input option:disabled {
    color: var(--color-text-muted);
}

.calc-input[readonly] {
    background: transparent;
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

input.calc-input:focus,
textarea.calc-input:focus {
    border-color: var(--color-brand-overlay-65);
    box-shadow: 0 0 0 0.1875rem var(--color-brand-overlay-18);
}

.calc-select {
    flex: 1 1 32.5rem;
    min-width: 13.75rem;
}

.btn .icon {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.btn-icon { width: 1.125rem; height: 1.125rem; display: inline-block; }

.fracht-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    align-items: flex-start;
    margin-bottom: var(--space-12);
    width: 100%;
}

.fracht-form .calc-input {
    color-scheme: light;
    background: var(--color-white);
    border-color: var(--color-border-neutral);
    color: var(--color-text-primary);
    width: min(20rem, 100%);
}

.fracht-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
    width: 100%;
}

.fracht-label {
    font-size: var(--fs-12);
    opacity: 0.85;
}

.calc-input.fracht-plz {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.typeahead {
    position: relative;
    width: min(20rem, 100%);
}

.typeahead-hidden {
    display: none;
}

.typeahead-inputwrap {
    position: relative;
    display: flex;
    gap: var(--space-6);
    align-items: center;
    width: 100%;
}

.typeahead-inputwrap .calc-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding-right: var(--space-30);
}

.typeahead-button {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 var(--space-6);
    line-height: 1.375rem;
}

.typeahead-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.25rem);
    z-index: 20;
    max-height: 13.75rem;
    overflow-y: auto;
    background: var(--color-white);
    border: 1px solid var(--color-border-neutral);
    border-radius: var(--radius-6);
    box-shadow: 0 0.5rem 1.5rem var(--color-black-overlay-12);
    list-style: none;
    padding: var(--space-4) 0;
    margin: 0;
}

.typeahead-item {
    padding: var(--space-6) var(--space-10);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.typeahead-item.active,
.typeahead-item:hover {
    background: var(--color-surface-hover-alt);
}

.teile-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    width: min(540px, 100%);
}

.teile-row {
    display: flex;
    gap: var(--space-8);
    align-items: center;
}

.teile-search {
    flex: 1 1 auto;
    min-width: 0;
}

.teile-row .typeahead {
    flex: 1 1 auto;
    width: min(37.5rem, 100%);
}

.teile-search-btn {
    padding: var(--space-6) var(--space-8);
}

.teile-text {
    padding: var(--space-8) var(--space-10);
    background: var(--color-neutral-overlay-04);
    border: 1px solid var(--color-neutral-overlay-18);
    border-radius: var(--radius-10);
}

.teile-toolbar-text {
    max-width: 42.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.85;
}

.teile-attachments {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.teile-attachment-row {
    display: flex;
    gap: var(--space-6);
    align-items: center;
}

.teile-attachment {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1 1 auto;
    width: 100%;
    padding: var(--space-4) var(--space-6);
    border: 1px solid transparent;
    border-radius: var(--radius-10);
    background: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
    text-align: left;
}

.teile-attachment-copy {
    padding: var(--space-6) var(--space-8);
}

.teile-attachment:hover {
    background: var(--color-neutral-overlay-06);
    border-color: var(--color-neutral-overlay-16);
}

.doku-workarea {
    border-radius: var(--radius-12);
}

.doku-groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    margin-bottom: var(--space-12);
}

.doku-group summary {
    cursor: pointer;
    font-weight: var(--font-weight-600);
    padding: var(--space-4) var(--space-2);
}

.doku-group summary::marker {
    color: var(--color-text-primary);
}

.doku-group summary::-webkit-details-marker {
    color: var(--color-text-primary);
}

.doku-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-6) 0 0;
    padding-left: var(--space-14);
}

.doku-item {
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    padding: var(--space-6) var(--space-8);
    border: 1px solid transparent;
    border-radius: var(--radius-10);
    background: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
    text-align: left;
}

.doku-item:hover {
    background: var(--color-neutral-overlay-06);
    border-color: var(--color-neutral-overlay-16);
}

.doku-item:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.doku-item-text {
    white-space: pre-wrap;
}

.doku-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-6) 0 0;
    padding-left: var(--space-14);
}

.doku-link {
    display: block;
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-10);
    color: var(--color-text-primary);
    text-decoration: none;
}

.doku-link:hover {
    background: var(--color-neutral-overlay-06);
}

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

.calc-textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    background: var(--color-neutral-overlay-04);
    border: 1px solid var(--color-neutral-overlay-18);
    border-radius: var(--radius-10);
    padding: var(--space-8) var(--space-10);
    color: var(--color-text-primary);
    outline: none;
    font-family: var(--font-family-mono-ui);
}

.calc-textarea:focus {
    border-color: var(--color-brand-overlay-65);
    box-shadow: 0 0 0 0.1875rem var(--color-brand-overlay-18);
}

.calc-toolbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-10);
    flex-wrap: wrap;
}

.calc-footer-wrap {
    flex: 0 0 auto;
}

.calc-footer {
    background: var(--color-white);
    border: 1px solid var(--color-border-neutral);
    color: var(--color-text-primary);
    margin: 0;
    padding: var(--space-12);
    box-shadow: 0 -0.375rem 0.75rem var(--color-neutral-overlay-08);
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--color-black-overlay-55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-24);
    z-index: 1000;
}

.modal {
    width: min(920px, 100%);
    background: var(--color-white);
    color: var(--color-text-primary);
    border-radius: var(--radius-12);
    overflow: hidden;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px var(--color-black-overlay-35);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    padding: var(--space-12) var(--space-14);
    border-bottom: 1px solid var(--color-neutral-overlay-12);
}

.modal-title {
    font-weight: var(--font-weight-700);
}

.modal-close-btn {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    padding: 0;
    justify-content: center;
}

.modal-body {
    padding: var(--space-14);
    overflow: auto;
}

.modal-footer {
    display: flex;
    justify-content: flex-start;
    gap: var(--space-10);
    padding: var(--space-12) var(--space-14);
    border-top: 1px solid var(--color-neutral-overlay-12);
}

.notification-modal {
    width: min(560px, 100%);
}

.notification-message {
    white-space: pre-wrap;
}

.notification-hint {
    margin-top: var(--space-6);
    font-size: var(--fs-12);
    opacity: 0.7;
}

.notification-input {
    margin-top: var(--space-10);
    width: 100%;
}

.notification-modal.notification-error .modal-header {
    background: var(--color-danger-bg-soft);
    color: var(--color-danger-text-strong);
}

.notification-modal.notification-warning .modal-header {
    background: var(--color-warning-bg-soft);
    color: var(--color-warning-text);
}

.notification-modal.notification-info .modal-header {
    background: var(--color-info-bg-soft);
    color: var(--color-info-text);
}

.rtf-options-layout {
    display: flex;
    gap: var(--space-16);
    align-items: flex-start;
    flex-wrap: nowrap;
    width: 100%;
}

.rtf-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    flex: 0 0 15rem;
}

.rtf-option {
    display: inline-flex;
    gap: var(--space-8);
    align-items: center;
    margin: 0;
}

.rtf-usertext-area {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.rtf-usertext {
    width: auto;
    min-height: 5.625rem;
    margin-top: 0;
    resize: vertical;
    background: var(--color-neutral-overlay-04);
    border: 1px solid var(--color-neutral-overlay-18);
    border-radius: var(--radius-10);
    padding: var(--space-10) var(--space-12);
    color: var(--color-text-primary);
    outline: none;
    font-family: var(--font-family-sans);
}

.rtf-usertext:focus {
    border-color: var(--color-brand-overlay-65);
    box-shadow: 0 0 0 0.1875rem var(--color-brand-overlay-18);
}

.rtf-hint {
    opacity: 0.8;
    font-size: var(--fs-12);
}

.rtf-usertext-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-10);
    margin-top: var(--space-10);
    flex-wrap: wrap;
}

.rtf-usertext-hint-row {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    flex-wrap: wrap;
}

.rtf-preview-stale {
    font-size: var(--fs-12);
    opacity: 0.7;
}

.rtf-preview {
    margin-top: var(--space-10);
    border: 1px solid var(--color-neutral-overlay-12);
    border-radius: var(--radius-10);
    background: var(--color-white);
    min-height: 16.25rem;
    overflow: hidden;
    display: flex;
}

.rtf-preview-frame {
    width: 100%;
    min-height: 22.5rem;
    border: 0;
}

.btn.light.primary {
    background: var(--color-neutral-overlay-12);
    border-color: var(--color-neutral-overlay-16);
    color: var(--color-text-primary);
}

.btn.light.primary:hover {
    background: var(--color-neutral-overlay-16);
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.form-row label {
    font-size: var(--fs-12);
    opacity: 0.75;
}

.cv-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: var(--space-10);
}

.cv-card {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.cv-workarea {
    background: var(--color-white);
    color: var(--color-text-primary);
    border-radius: var(--radius-12);
    padding: var(--space-workarea-edge);
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.workarea-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overflow-anchor: none;
}

.find-workarea .workarea-scroll {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.cv-type-btn {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    text-align: left;
    width: 100%;
    max-width: 45rem;
}

.cv-type-title {
    font-size: var(--fs-20);
    font-weight: var(--font-weight-800);
    line-height: 1;
    white-space: nowrap;
}

.cv-type-sub {
    white-space: pre-line;
    opacity: 0.9;
}

.cv-scroll {
    margin-top: var(--space-10);
}

.cv-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    align-items: flex-start;
}

.cv-option-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.cv-select {
    width: 100%;
    max-width: 45rem;
}

.cv-option {
    display: flex;
    gap: var(--space-8);
    align-items: flex-start;
    margin: 0;
}

.cv-option input {
    margin-top: var(--space-2);
}

.cv-option-text {
    white-space: pre-wrap;
}

.cv-text {
    margin: 0;
    white-space: pre-wrap;
}

.cv-text-small {
    min-width: 18.75rem;
}

.cv-row {
    display: flex;
    gap: var(--space-10);
    align-items: flex-start;
    flex-wrap: wrap;
}

.cv-file-buttons {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
}

.cv-spaced {
    margin-top: var(--space-12);
}

.cv-motor {
    border-top: 1px solid var(--color-neutral-overlay-08);
    padding-top: var(--space-10);
}

.cv-kabel-row {
    align-items: center;
}

.cv-label {
    font-weight: var(--font-weight-600);
    opacity: 0.9;
}

.cv-kabel-input {
    width: 5.625rem;
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-10);
    background: var(--color-neutral-overlay-04);
    border: 1px solid var(--color-neutral-overlay-18);
    color: var(--color-text-primary);
    outline: none;
}

.cv-kabel-input:focus {
    border-color: var(--color-brand-overlay-65);
    box-shadow: 0 0 0 0.1875rem var(--color-brand-overlay-18);
}

.cv-toolbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-10);
    flex-wrap: wrap;
}

.cv-footer-wrap {
    flex: 0 0 auto;
}

.cv-footer {
    background: var(--color-white);
    border: 1px solid var(--color-border-neutral);
    color: var(--color-text-primary);
    margin: 0;
    padding: var(--space-12);
    box-shadow: 0 -0.375rem 0.75rem var(--color-neutral-overlay-08);
}

.cv-factor {
    display: flex;
    gap: var(--space-10);
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
}

.cv-factor-label {
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 35rem;
}

.cv-factor-input {
    width: 5rem;
    flex: 0 0 5rem;
}

.cv-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-10);
    flex-wrap: wrap;
}

.cv-type-modal {
    width: min(61.25rem, 100%);
}

.cv-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-18);
}

.cv-type-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.cv-type-header {
    font-weight: var(--font-weight-700);
    margin: 0 0 var(--space-6);
    white-space: pre-line;
}

.cv-type-option {
    display: flex;
    gap: var(--space-8);
    align-items: baseline;
    width: 100%;
    padding: var(--space-4) var(--space-6);
    border: 1px solid transparent;
    border-radius: var(--radius-10);
    background: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
    text-align: left;
}

.cv-type-option:hover {
    background: var(--color-neutral-overlay-06);
    border-color: var(--color-neutral-overlay-16);
}

.cv-type-option.selected {
    background: var(--color-neutral-overlay-12);
    border-color: var(--color-neutral-overlay-16);
}

.cv-type-power {
    min-width: 3.75rem;
    opacity: 0.85;
    white-space: nowrap;
}

.cv-type-label {
    white-space: pre-line;
}

.cv-type-passt {
    margin-left: auto;
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    min-width: 0.625rem;
    min-height: 0.625rem;
    border-radius: 999px;
    background-color: var(--color-success-text);
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: center;
    vertical-align: middle;
}

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

/* PPS2 / Service */
.modal.pps2-ok-modal {
    width: clamp(20rem, 58vw, 42rem);
    max-width: 100%;
}

.pps2-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-10);
    justify-content: flex-start;
    align-items: flex-end;
    margin-bottom: var(--space-10);
}

.pps2-toolbar .pps2-field {
    flex: 0 0 auto;
}

.pps2-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 220px;
    flex: 1 1 220px;
}

.pps2-label {
    font-size: var(--fs-12);
    opacity: 0.8;
}

.pps2-anr {
    max-width: 240px;
}

.pps2-header-row {
    display: flex;
    gap: var(--space-16);
    flex-wrap: wrap;
    align-items: flex-start;
    margin: var(--space-10) 0;
}

.pps2-header {
    margin: 0;
    font-family: var(--font-family-mono-courier);
    font-size: var(--fs-14);
    white-space: pre;
}

.pps2-header-row > .pps2-header:first-child {
    margin-left: 10rem;
}

.pps2-header-row.pps2-stock-stale {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-overlay-35);
}

.pps2-stock-header {
    margin: 0;
    font-family: var(--font-family-mono-courier);
    font-size: var(--fs-14);
    white-space: pre;
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-10);
    background: var(--color-neutral-overlay-04);
    border: 1px solid var(--color-neutral-overlay-18);
}

.pps2-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-family: var(--font-family-mono-courier);
    font-size: var(--fs-14);
}

.pps2-list.pps2-list-with-edit {
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--color-neutral-overlay-12);
}

.pps2-item {
    display: flex;
    gap: var(--space-8);
    align-items: flex-start;
}

.pps2-checkcell {
    width: 80px;
    flex: 0 0 80px;
}

.pps2-check {
    display: flex;
    gap: var(--space-6);
    align-items: center;
    margin: 0;
}

.pps2-doccell {
    width: 52px;
    flex: 0 0 52px;
}

.pps2-doc {
    padding: var(--space-4) var(--space-6);
    font-size: var(--fs-12);
}

.pps2-line {
    white-space: pre;
}

.pps2-stock {
    white-space: pre-wrap;
    color: var(--color-neutral-overlay-80);
}

.pps2-comment {
    font-size: var(--fs-20);
    font-weight: var(--font-weight-800);
    margin: var(--space-8) 0;
    font-family: var(--font-family-sans);
}

.pps2-separator {
    border-top: 1px solid var(--color-neutral-overlay-18);
    margin: var(--space-6) 0;
}

.pps2-edit {
    margin-top: var(--space-14);
    border-top: 1px solid var(--color-neutral-overlay-12);
    padding-top: var(--space-10);
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.pps2-edit-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-10);
    align-items: center;
    margin-bottom: var(--space-10);
    padding-left: var(--space-80);
}

.pps2-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.pps2-form .calc-input {
    max-width: 50rem;
}

.pps2-form-row {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-10);
    align-items: center;
}

.pps2-form-row-area {
    align-items: flex-start;
}

.pps2-row-label {
    width: 5rem;
    min-width: 5rem;
}

.pps2-form-row-area .pps2-row-label {
    padding-top: var(--space-6);
}

.pps2-mini {
    display: inline-flex;
    gap: var(--space-6);
    align-items: center;
    margin: 0;
}

.pps2-mini-select {
    width: 13.75rem;
    max-width: 20rem;
}

.pps2-row3 {
    display: flex;
    gap: var(--space-10);
    flex-wrap: wrap;
}

.pps2-small {
    width: 6.25rem;
    min-width: 6.25rem;
    max-width: 6.25rem;
}

.pps2-type {
    width: 18.75rem;
    min-width: 18.75rem;
}

.pps2-textarea {
    min-height: 2.75rem;
    width: 100%;
    min-width: 0;
    flex: 1 1 0;
    font-family: var(--font-family-mono-courier);
    font-size: var(--fs-16);
    line-height: 1.3;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    resize: none;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-anchor: auto;
}

.pps2-textarea-wrap {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: 1 1 0;
    white-space: pre-wrap;
}

.pps2-modal-text {
    margin: 0;
    white-space: pre-wrap;
    font-family: var(--font-family-mono-courier);
}

.select-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.select-main,
.select-footer {
    background: var(--color-white);
    border: 1px solid var(--color-border-neutral);
    color: var(--color-text-primary);
    margin: 0;
}

.select-main {
    padding: var(--space-workarea-edge);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.select-footer {
    padding: var(--space-6) var(--space-10);
}

.select-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.select-top-button {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-height: calc(1em * 1.4 + (2 * var(--space-3)) + 2px);
    padding: var(--space-3) var(--space-6);
    border: 1px solid var(--color-border-neutral);
    border-radius: var(--radius-4);
    background: var(--color-white);
    box-shadow: inset 0 -1px 0 var(--color-neutral-overlay-12);
    color: inherit;
    cursor: pointer;
}

.select-top-button:hover {
    background: var(--color-surface-hover-light);
    border-color: var(--color-border-neutral);
}

.select-top-button.active {
    background: color-mix(in srgb, var(--color-brand-primary) 8%, white);
    border-color: color-mix(in srgb, var(--color-brand-primary) 22%, var(--color-border-neutral));
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.select-top-button.active:hover {
    background: color-mix(in srgb, var(--color-brand-primary) 11%, white);
}

.select-top-title {
    font-size: var(--fs-20);
    font-weight: var(--font-weight-700);
    line-height: normal;
    padding-bottom: 0.12em;
    white-space: nowrap;
}

.select-top-sub {
    font-size: var(--fs-12);
    line-height: normal;
    padding-bottom: 0.12em;
    opacity: 0.8;
    white-space: nowrap;
}

.select-top-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    align-items: center;
    margin-left: 0;
}

.select-info-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    width: 2rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-4);
    background: transparent;
    cursor: pointer;
}

.select-info-button:hover {
    background: var(--color-surface-hover-light);
    border-color: var(--color-border-neutral);
}

.select-info-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.select-info-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-16);
}

.select-info-text-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.select-info-text-line {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.select-info-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-6);
    flex: 0 0 auto;
}

.select-info-logo {
    height: 2.5rem;
    width: auto;
}

.select-info-mini-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.625rem;
    width: 1.625rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-4);
    background: transparent;
    cursor: pointer;
}

.select-info-mini-button:hover {
    background: var(--color-surface-hover-light);
    border-color: var(--color-border-neutral);
}

.select-info-mini-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.select-info-text {
    margin: 0;
    white-space: pre-wrap;
    font-family: var(--font-family-mono-courier);
}

.select-info-footer {
    justify-content: flex-start;
}

.select-info-footer-left,
.select-info-footer-right {
    display: flex;
    align-items: center;
    gap: var(--space-10);
}

.select-info-modal .input {
    background: var(--color-white);
    border: 1px solid var(--color-neutral-overlay-20);
    color: var(--color-text-primary);
}

.select-info-modal select.input {
    color-scheme: light;
}

.select-info-version-placeholder {
    white-space: pre-wrap;
}

.select-version-modal {
    width: min(70rem, 100%);
}

.select-version-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    overflow: hidden;
}

.select-version-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    border-bottom: 1px solid var(--color-border-neutral);
    padding-bottom: var(--space-4);
}

.select-version-tab {
    border: 1px solid var(--color-border-neutral);
    background: var(--color-bg-page);
    color: var(--color-text-primary);
    padding: var(--space-2) var(--space-8);
    border-radius: var(--radius-4) var(--radius-4) 0 0;
    cursor: pointer;
}

.select-version-tab.active {
    background: var(--color-white);
    border-bottom-color: var(--color-white);
    font-weight: var(--font-weight-700);
}

.select-version-error,
.select-version-text {
    margin: 0;
    padding: var(--space-10) var(--space-12);
    background: var(--color-neutral-overlay-04);
    border: 1px solid var(--color-neutral-overlay-18);
    border-radius: var(--radius-10);
    font-family: var(--font-family-mono-courier);
    font-size: var(--fs-13);
    overflow: auto;
    max-height: 70vh;
    white-space: pre;
}

.select-info-customer-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: 22.5rem;
}

.select-info-customer-label {
    font-weight: var(--font-weight-600);
}

.select-warning {
    white-space: pre-wrap;
}

.select-main .input,
.select-footer .input,
.select-panel .input {
    background: var(--color-white);
    border: 1px solid var(--color-border-neutral);
    color: var(--color-text-primary);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-3);
}

.select-main select.input,
.select-panel select.input,
.select-footer select.input {
    color-scheme: light;
}

.select-main .btn {
    background: var(--color-bg-page);
    border: 1px solid var(--color-border-neutral);
    color: var(--color-text-primary);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-4);
}

.select-main .btn.select-modus-button {
    background: var(--color-surface-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    min-width: 2.25rem;
    height: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    flex: 0 0 2.25rem;
}

.select-main .btn.select-modus-button .select-modus-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 0;
    line-height: 0;
}

.select-main .btn.select-modus-button.select-modus-neutral {
    background: var(--color-surface-muted);
    border-color: var(--color-border-neutral);
    color: var(--color-text-primary);
}

.select-main .btn.select-modus-button.select-modus-active,
.select-main .btn.select-modus-button.select-modus-red {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border-strong);
    color: var(--color-white);
}

.select-main .btn.select-modus-button.select-modus-blue {
    background: var(--color-action-blue-bg);
    border-color: var(--color-action-blue-border);
    color: var(--color-white);
}

.select-input {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
}

.select-panel {
    background: var(--color-white);
    border: 1px solid var(--color-border-neutral);
    border-radius: var(--radius-4);
    padding: var(--space-6);
    margin: var(--space-4) 0 var(--space-8);
    color: var(--color-text-primary);
}

.select-panel-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    align-items: center;
    padding: var(--space-2) 0;
}

.select-panel-group-wide {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: stretch;
}

.select-panel-label {
    font-weight: var(--font-weight-700);
    min-width: 5rem;
}

.select-gbox-panel {
    max-height: 20rem;
    overflow: auto;
}

.select-gbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    align-items: center;
    padding: var(--space-2) 0;
}

.select-gbox-group[aria-disabled="true"] {
    opacity: 0.55;
}

.select-gbox-group-title {
    display: flex;
    align-items: center;
    min-width: 9.375rem;
    min-height: calc(1em * 1.25 + (2 * var(--space-4)));
    padding: var(--space-4) 0;
    font-weight: var(--font-weight-700);
    line-height: normal;
}

.select-gbox-option {
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    min-height: calc(1em * 1.25 + (2 * var(--space-4)));
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-4);
    cursor: pointer;
    font-size: var(--fs-12);
    line-height: normal;
}

.select-gbox-option:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-border-neutral);
}

.select-gbox-option:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.select-gbox-group-title-action {
    cursor: pointer;
}

.select-gbox-group-title-action[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
}

.select-motor-panel {
    overflow: auto;
    max-height: 60vh;
}

.select-motor-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border-neutral);
    padding-bottom: var(--space-4);
}

.select-motor-tab {
    border: 1px solid var(--color-border-neutral);
    background: var(--color-bg-page);
    color: var(--color-text-primary);
    padding: var(--space-2) var(--space-8);
    border-radius: var(--radius-4) var(--radius-4) 0 0;
    cursor: pointer;
}

.select-motor-tab.active {
    background: var(--color-white);
    border-bottom-color: var(--color-white);
    font-weight: var(--font-weight-700);
}

.select-motor-grid {
    display: flex;
    gap: var(--space-16);
    align-items: flex-start;
    flex-wrap: wrap;
}

.select-motor-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    min-width: 10.625rem;
}

.select-motor-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.select-motor-group-title {
    font-weight: var(--font-weight-700);
    white-space: pre-line;
    margin-bottom: var(--space-2);
}

.select-motor-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.select-motor-item {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-2) var(--space-4);
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.select-motor-item:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-border-neutral);
}

.select-motor-item.active {
    background: var(--color-selection-bg);
    border-color: var(--color-selection-border);
}

.select-motor-power {
    min-width: 3.75rem;
    font-size: var(--fs-12);
    opacity: 0.85;
    white-space: nowrap;
}

.select-motor-power.polum {
    min-width: 5rem;
}

.select-motor-name {
    white-space: nowrap;
}

.select-motor-note {
    font-weight: var(--font-weight-700);
    font-size: var(--fs-12);
    padding-left: var(--space-6);
}

.select-motor-flag {
    color: var(--color-danger-text);
    font-weight: var(--font-weight-700);
    margin-right: var(--space-2);
    min-width: 0.75rem;
    display: inline-flex;
    justify-content: center;
    margin-top: var(--space-neg-2);
}

.select-servo-table {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.select-servo-header,
.select-servo-row {
    display: grid;
    grid-template-columns: 2.8125rem 3.75rem repeat(5, 3.25rem);
    gap: var(--space-4);
    align-items: center;
}

.select-servo-header {
    font-weight: var(--font-weight-700);
    font-size: var(--fs-12);
}

.select-servo-name,
.select-servo-torque,
.select-servo-speed {
    font-size: var(--fs-12);
}

.select-servo-speed {
    text-align: center;
}

.select-servo-btn {
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-3);
    cursor: pointer;
}

.select-servo-btn:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-border-neutral);
}

.select-servo-btn.active {
    background: var(--color-selection-bg);
    border-color: var(--color-selection-border);
}

.select-servo-empty {
    height: 0.0625rem;
}

.select-servo-row.gap {
    margin-bottom: var(--space-8);
}

.select-prototype {
    margin-top: var(--space-6);
    padding: var(--space-4) var(--space-6);
    background: var(--color-warning-accent-bg);
    border: 1px solid var(--color-warning-accent-border);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-600);
}

.select-empty {
    margin-top: var(--space-15);
    font-size: var(--fs-24);
    font-weight: var(--font-weight-700);
}

.select-list {
    margin-top: var(--space-12);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.select-auswahl {
    position: relative;
    width: max-content;
}

.select-auswahl-headers,
.select-auswahl-toggle,
.select-auswahl-row {
    display: grid;
    grid-template-columns: minmax(6.25rem, max-content) minmax(5rem, max-content) minmax(5rem, max-content) minmax(5rem, max-content) minmax(5rem, max-content) minmax(5rem, max-content) minmax(7.5rem, max-content);
    align-items: center;
}

.select-auswahl-headers {
    padding: 0 var(--space-6) var(--space-2) var(--space-6);
    font-weight: var(--font-weight-700);
    color: var(--color-text-primary);
    font-size: var(--fs-12);
}

.select-auswahl-cell {
    padding: 0 var(--space-6) 0 0;
    white-space: nowrap;
}

.select-auswahl-cell.extra-bold {
    font-weight: var(--font-weight-700);
}

.select-auswahl-toggle {
    font: var(--font-inherit);
    width: max-content;
    text-align: left;
    position: relative;
    padding-right: var(--space-22);
    cursor: pointer;
}

.select-auswahl-toggle::after {
    content: "▾";
    position: absolute;
    right: 0.375rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.75;
}

.select-auswahl-dropdown {
    position: absolute;
    left: 0;
    top: calc(100% + 0.125rem);
    border: 1px solid var(--color-border-neutral);
    border-radius: var(--radius-3);
    background: var(--color-white);
    max-height: 16.25rem;
    overflow: auto;
    box-shadow: 0 0.625rem 1.5rem var(--color-black-overlay-18);
    z-index: 901;
    min-width: 100%;
}

.select-auswahl-row {
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    color: inherit;
    font: var(--font-inherit);
    padding: var(--space-2) var(--space-6);
    cursor: pointer;
}

.select-auswahl-row.group-break {
    border-top: 2px solid var(--color-text-muted);
    margin-top: 0;
    padding-top: var(--space-2);
}

.select-auswahl-row:hover {
    background: var(--color-row-hover);
}

.select-auswahl-row.selected {
    background: var(--color-selection-bg);
}

.select-auswahl-row.disabled {
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

.select-auswahl-row.disabled:hover {
    background: transparent;
}

.select-options {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-20) 0;
    overflow-x: auto;
}

.select-option-row {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-6);
    align-items: center;
}

.select-option-image {
    height: auto;
    width: auto;
    align-self: center;
    margin: var(--space-2) 0 var(--space-2) var(--space-10);
}

.select-headless-row {
    gap: var(--space-6);
}

.select-headless-label {
    font-size: var(--fs-12);
    opacity: 0.85;
}

.select-headless-label.emphasis {
    font-weight: var(--font-weight-700);
    margin-top: var(--space-10);
    opacity: 1;
}

.select-inline-label {
    margin-right: var(--space-10);
    opacity: 0.9;
    white-space: nowrap;
}

.select-inline-label.tight {
    margin: 0 var(--space-5);
}

.select-inline-label.mid {
    margin: 0 var(--space-10);
}

.select-option-row-bre-offset {
    margin-top: var(--space-15);
}

.select-option-row-lub {
    margin-bottom: var(--space-15);
}

.select-option-row-srv {
    margin-top: var(--space-10);
}

.select-check {
    display: inline-flex;
    gap: var(--space-8);
    align-items: center;
    margin: 0;
}

.select-hint {
    font-size: var(--fs-12);
    opacity: 0.75;
}

.select-footer-wrap {
    position: relative;
    flex: 0 0 auto;
    overflow: visible;
}

.select-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-12);
    flex-wrap: wrap;
    box-shadow: 0 -0.375rem 0.75rem var(--color-neutral-overlay-08);
    position: relative;
    overflow: visible;
}

.select-information {
    display: flex;
    gap: var(--space-10);
    align-items: center;
    flex: 0 0 100%;
    min-width: 0;
}

.select-factor {
    display: flex;
    gap: var(--space-10);
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.select-factor-label {
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 32.5rem;
}

.select-factor-input {
    width: 5rem;
    flex: 0 0 5rem;
}

.select-warning-icon {
    height: 4rem;
    width: auto;
    flex: 0 0 auto;
}

.select-warning-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: pre-wrap;
}

@media (max-width: 900px) {
    .select-input {
        min-width: 0;
    }

    .select-top-actions {
        margin-left: 0;
    }

    .rtf-options-layout {
        flex-wrap: wrap;
    }

    .rtf-options {
        flex: 1 1 100%;
    }

    .rtf-usertext-area {
        min-width: 0;
        flex: 1 1 100%;
    }

    .select-gbox-group-title {
        min-width: 7.5rem;
    }

    .select-motor-grid {
        flex-direction: column;
    }

    .select-motor-col {
        min-width: 0;
    }
}

@media (max-width: 1023px) {
    .layout {
        min-height: 100dvh;
        height: auto;
        overflow: visible;
    }

    .main {
        padding: var(--space-16);
        padding-top: calc(var(--space-16) + 2.75rem);
        min-height: 100dvh;
        overflow: visible;
    }

    .topbar {
        flex: 0 0 0;
        width: 0;
        min-width: 0;
        padding: 0;
        border-right: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
        z-index: 1200;
    }

    .nav-mobile-toggle {
        display: inline-flex;
        position: fixed;
        top: var(--space-10);
        left: var(--space-10);
        width: 2.5rem;
        height: 2.5rem;
        z-index: 1400;
        box-shadow: 0 0.25rem 0.875rem var(--color-black-overlay-35);
    }

    .nav-mobile-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        border: 0;
        margin: 0;
        padding: 0;
        background: var(--color-black-overlay-55);
        z-index: 1250;
        cursor: pointer;
    }

    .nav,
    .nav.collapsed {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(18rem, 86vw);
        height: 100dvh;
        padding: var(--space-12) var(--space-10);
        background: var(--color-brand);
        border-right: 1px solid var(--color-white-overlay-12);
        transform: translateX(calc(-100% - var(--space-12)));
        transition: transform 180ms ease;
        box-shadow: 0.625rem 0 1.5rem var(--color-black-overlay-35);
        z-index: 1300;
    }

    .nav.mobile-open,
    .nav.collapsed.mobile-open {
        transform: translateX(0);
    }

    .nav-header,
    .nav.collapsed .nav-header {
        justify-content: space-between;
    }

    .nav-logo {
        width: 10rem;
    }

    .nav.collapsed .nav-logo {
        width: 10rem;
    }

    .nav-collapse-btn,
    .nav.collapsed .nav-collapse-btn {
        display: none;
    }

    .nav-link,
    .nav.collapsed .nav-link {
        justify-content: flex-start;
        padding: var(--space-8) var(--space-10);
        min-height: 2.25rem;
        border-color: rgba(255, 255, 255, 0.28);
    }

    .nav button.nav-link {
        background-color: transparent;
        background-image: none;
        border-color: rgba(255, 255, 255, 0.28);
    }

    .nav-link.active,
    .nav.collapsed .nav-link.active {
        background: var(--color-white);
        color: var(--color-brand);
        border-color: var(--color-white);
        box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.2);
    }

    .nav-link-text,
    .nav.collapsed .nav-link-text {
        display: block;
    }

    .nav-link-short,
    .nav.collapsed .nav-link-short {
        display: none;
    }

    .nav.collapsed .nav-link .icon {
        display: inline-flex;
    }

    .find-page,
    .dim-page,
    .mot-page,
    .get-page,
    .txt-page,
    .calc-page,
    .cv-page,
    .select-page {
        overflow: visible;
    }

    .find-card,
    .dim-card,
    .mot-card,
    .get-card,
    .txt-card,
    .calc-card,
    .cv-card,
    .select-main {
        flex: 1 0 auto;
    }

    .find-workarea,
    .dim-workarea,
    .mot-workarea,
    .get-workarea,
    .txt-workarea,
    .calc-workarea,
    .cv-workarea,
    .select-main {
        min-height: var(--responsive-surface-min-height);
    }

    .workarea-scroll {
        min-height: var(--responsive-scroll-min-height);
    }

    .select-main {
        overflow: visible;
    }

    .select-gbox-panel,
    .select-motor-panel {
        min-height: var(--responsive-scroll-min-height);
        max-height: min(55dvh, 30rem);
    }

    .nav-links-scroll {
        padding-right: var(--space-4);
    }

    .nav.collapsed .nav-links-scroll {
        padding-right: var(--space-4);
    }

    .nav-user-menu {
        left: 0;
        right: 0;
        top: calc(100% + 0.25rem);
        bottom: auto;
    }

    .find-row,
    .find-toolbar,
    .dim-toolbar,
    .mot-toolbar,
    .txt-toolbar,
    .get-row,
    .get-actions,
    .calc-header,
    .cv-toolbar,
    .cv-row,
    .cv-file-buttons,
    .cv-actions,
    .pps2-toolbar,
    .pps2-edit-row,
    .teile-row,
    .teile-attachment-row,
    .select-topbar,
    .select-panel-group,
    .select-gbox-group,
    .select-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .find-toolbar,
    .dim-toolbar,
    .mot-toolbar,
    .txt-toolbar,
    .pps2-toolbar,
    .pps2-edit-row,
    .cv-toolbar,
    .cv-actions,
    .select-footer {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .pps2-toolbar {
        align-items: flex-end;
    }

    .pps2-toolbar .pps2-field {
        flex: 1 1 min(18rem, 100%);
        min-width: min(18rem, 100%);
    }

    .pps2-toolbar .btn,
    .pps2-edit-row .pps2-mini,
    .pps2-edit-row .pps2-mini-select {
        flex: 0 0 auto;
    }

    .cv-row,
    .cv-file-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .select-top-actions,
    .select-option-row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .btn {
        width: auto;
        max-width: 100%;
        align-self: flex-start;
    }

    .find-label,
    .select-panel-label,
    .cv-label {
        min-width: 0;
        width: auto;
        flex: 1 1 auto;
    }

    .find-row .input.find-value,
    .get-input-small,
    .get-input-n2,
    .pps2-anr,
    .pps2-mini-select,
    .pps2-small,
    .pps2-type,
    .cv-kabel-input,
    .cv-text-small,
    .cv-factor-input,
    .select-factor-input {
        width: 100%;
        max-width: none;
        min-width: 0;
        flex: 1 1 auto;
    }

    .dim-usertext,
    .calc-select,
    .cv-type-btn,
    .cv-select {
        width: 100%;
        max-width: none;
    }

    .calc-col-label,
    .calc-col-val {
        min-width: 0;
        width: auto;
    }

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

    .pps2-field {
        min-width: 0;
    }

    .pps2-edit-row {
        padding-left: 0;
    }

    .pps2-form-row,
    .pps2-form-row-area {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .pps2-row-label {
        width: 5rem;
        min-width: 5rem;
        flex: 0 0 5rem;
    }

    .pps2-form-row .calc-input,
    .pps2-form-row .pps2-textarea-wrap {
        width: auto;
        max-width: none;
        min-width: 0;
        flex: 1 1 auto;
    }

    .pps2-edit-row .pps2-mini-select {
        width: auto;
        max-width: 100%;
        min-width: 0;
        flex: 0 1 13.75rem;
    }

    .pps2-form-row .pps2-type {
        width: 18.75rem;
        max-width: 100%;
        min-width: 0;
        flex: 0 1 18.75rem;
    }

    .pps2-form-row .pps2-small {
        width: 6.25rem;
        max-width: 100%;
        min-width: 0;
        flex: 0 1 6.25rem;
    }

    .pps2-form-row-area .pps2-row-label {
        padding-top: var(--space-6);
    }

    .select-input {
        width: 100%;
        flex: 1 1 auto;
    }

    .select-top-select {
        width: auto;
        max-width: 100%;
        flex: 0 0 auto;
    }

    .select-top-title {
        white-space: normal;
    }

    .select-gbox-group-title {
        min-width: 0;
    }

    .select-motor-grid {
        flex-direction: column;
    }

    .select-motor-col {
        min-width: 0;
    }

    .select-list {
        overflow: visible;
    }

    .select-list.select-list-scrollable {
        overflow-x: auto;
        overflow-y: visible;
    }

    .select-auswahl {
        width: max-content;
        min-width: max-content;
        max-width: none;
        overflow: visible;
    }

    .select-auswahl-headers {
        display: grid;
    }

    .select-auswahl-toggle,
    .select-auswahl-row {
        grid-template-columns: minmax(6.25rem, max-content) minmax(5rem, max-content) minmax(5rem, max-content) minmax(5rem, max-content) minmax(5rem, max-content) minmax(5rem, max-content) minmax(7.5rem, max-content);
    }

    .select-auswahl-toggle {
        width: max-content;
        padding-right: var(--space-24);
    }

    .select-auswahl-toggle::after {
        right: var(--space-8);
        top: var(--space-10);
        transform: none;
    }

    .select-auswahl-dropdown {
        position: static;
        margin-top: var(--space-4);
        max-height: min(55dvh, 22rem);
        min-width: max-content;
    }

    .select-auswahl-cell {
        padding: 0 var(--space-6) 0 0;
        white-space: nowrap;
        overflow-wrap: normal;
    }

    .get-label {
        white-space: normal;
    }
}

@media (max-width: 767px) {
    .main {
        padding: var(--space-12);
        padding-top: calc(var(--space-12) + 2.75rem);
    }

    .card {
        padding: var(--space-12);
    }
}

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

    .nav-link {
        padding: var(--space-6) var(--space-10);
    }

    .calc-header {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }

    .calc-select {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
    }

    .get-aktion-select {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 479px) {
    .card {
        padding: var(--space-10);
    }

    .btn {
        padding: var(--space-5) var(--space-8);
        font-size: var(--fs-14);
    }

    .input,
    .calc-input,
    .get-input,
    .select-main .input,
    .select-footer .input,
    .select-panel .input {
        padding: var(--space-5) var(--space-8);
        font-size: var(--fs-14);
    }

    .calc-header {
        gap: var(--space-6);
    }

    .calc-select {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .calc-table {
        min-width: 720px;
    }

    .select-top-title {
        font-size: var(--fs-16);
    }

    .select-top-sub {
        font-size: var(--fs-11);
    }

    .select-empty {
        font-size: var(--fs-18);
    }

    .select-options,
    .select-list {
        gap: var(--space-6);
    }

    .select-option-row {
        gap: var(--space-4);
    }

    .select-auswahl-toggle,
    .select-auswahl-row {
        grid-template-columns: minmax(6.25rem, max-content) minmax(5rem, max-content) minmax(5rem, max-content) minmax(5rem, max-content) minmax(5rem, max-content) minmax(5rem, max-content) minmax(7.5rem, max-content);
    }

    .select-auswahl-cell {
        white-space: nowrap;
        overflow-wrap: normal;
    }

    .select-option-image {
        max-width: 100%;
        margin-left: 0;
    }

    .select-inline-label,
    .select-factor-label,
    .select-motor-name {
        white-space: normal;
    }

    .pps2-comment {
        font-size: var(--fs-16);
    }

    .pps2-list {
        font-size: var(--fs-13);
    }

    .pps2-line,
    .pps2-stock {
        white-space: pre-wrap;
        word-break: break-word;
    }

    .pps2-textarea {
        min-height: 4.5rem;
        font-size: var(--fs-14);
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        word-break: break-word;
        overflow-x: hidden;
        overflow-y: auto;
        overflow-anchor: auto;
    }

    .calc-textarea {
        min-height: 80px;
        font-size: var(--fs-14);
    }

    .cv-type-title {
        font-size: var(--fs-18);
        white-space: normal;
    }

    .cv-type-sub,
    .cv-text-small {
        font-size: var(--fs-12);
    }

    .table,
    .calc-table {
        font-size: var(--fs-12);
    }

    .find-workarea .table thead th {
        z-index: 3;
    }
}