/* Global Styles */
:root {
    /* Colors */
    --bg-main: #f5f7fa;
    --bg-white: #ffffff;
    --border-color: #dadce0;
    --border-dark: #b0b0b0;

    /* Brand Colors */
    --brand-blue-start: #4a90d9;
    --brand-blue-end: #2a5f9e;
    --brand-orange-start: #ffe0b2;
    --brand-orange-end: #ffcc80;
    --brand-orange-border: #ffb74d;

    /* UI Gradients - Flatter/Cleaner */
    --grad-toolbar: linear-gradient(180deg, #fdfdfd 0%, #f0f0f0 100%);
    --grad-menu: linear-gradient(180deg, #ffffff 0%, #f4f4f4 100%);
    --grad-tab: linear-gradient(180deg, #f0f0f0 0%, #e0e0e0 100%);
    --grad-sidebar-header: linear-gradient(180deg, var(--brand-orange-start) 0%, var(--brand-orange-end) 100%);
    --grad-sidebar-header-companies: linear-gradient(180deg, #e0f2f1 0%, #b2dfdb 100%);
    /* Soft Teal */
    --brand-companies-border: #80cbc4;

    /* Text */
    --text-main: #333333;
    --text-light: #666666;
}

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 11px;
    background: var(--bg-main);
    color: var(--text-main);
    overflow: hidden;
}

/* Skip-Link: sichtbar nur beim Fokus (Barrierefreiheit) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 10px;
    padding: 8px 16px;
    background: var(--brand-blue-end);
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    z-index: 10001;
    transition: top 0.2s;
}
.skip-link:focus {
    top: 10px;
}

/* Lade-Indikator beim App-Start */
.app-loading-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    align-items: center;
    justify-content: center;
    z-index: 9998;
}
.app-loading-overlay.app-loading-overlay--visible {
    display: flex;
}
.app-loading-text {
    font-size: 14px;
    color: var(--text-light);
}

/* Fehlerzustand beim Datenladen (mit Retry-Button) */
.app-loading-overlay.app-loading-overlay--error .app-loading-error {
    text-align: center;
    max-width: 420px;
    padding: 24px;
}
.app-loading-error-title {
    margin: 0 0 12px;
    font-size: 18px;
    color: #c0392b;
}
.app-loading-error-message {
    margin: 0 0 20px;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}
.app-loading-error .ct-btn {
    padding: 10px 20px;
}

/* ========== Einheitliche View-Klasse (alle Seiten/Module) ========== */
.app-view {
    display: none;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

.app-view--active {
    display: flex;
}

.app-view--scroll {
    overflow: auto;
}

/* View-Container (parent aller Views) */
#view-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Tab-Contents-Container (für Tab-basierte Inhalte wie Kunden-Details) */
#tab-contents-container {
    display: none;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

#tab-contents-container.active {
    display: flex;
}

/* Tab-Inhalte (Kunden, Gesellschaften, Verträge) */
.tab-content {
    display: none;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

.tab-content.active,
.tab-content[style*="display: flex"],
.tab-content[style*="display: block"] {
    display: flex;
}

/* Title Bar - Kept original for identity */
.title-bar {
    background: linear-gradient(180deg, var(--brand-blue-start) 0%, var(--brand-blue-end) 100%);
    color: white;
    padding: 2px 8px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 24px;
    border-bottom: 1px solid #1a4f8e;
}

.title-bar-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.title-bar-icon {
    width: 16px;
    height: 16px;
    background: #ff4444;
    border-radius: 2px;
}

.title-bar-text {
    font-size: 11px;
    opacity: 0.9;
}

.title-bar-right {
    font-weight: bold;
    font-size: 12px;
}

.window-controls {
    display: flex;
    gap: 3px;
}

.window-btn {
    width: 22px;
    height: 18px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    border-radius: 2px;
}

.window-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Menu Bar */
/* Menu Bar */
.menu-bar {
    background: linear-gradient(180deg, #2a5f9e 0%, #1a4f8e 100%);
    border-bottom: 1px solid var(--border-dark);
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    height: 50px;
    align-items: center;
}

.menu-bar-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.brand-logo {
    color: white;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.header-search-container {
    position: relative;
}

.header-search-container input {
    width: 250px;
    padding: 6px 12px;
    border-radius: 20px;
    border: none;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    outline: none;
    transition: all 0.2s;
}

.header-search-container input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.header-search-container input:focus {
    background: white;
    color: #333;
    width: 300px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-search-container input:focus::placeholder {
    color: #999;
}

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

.menu-item {
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 4px;
    color: white;
    font-size: 12px;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.15);
}

.menu-item--btn {
    background: none;
    border: none;
    font: inherit;
    color: white;
}

.menu-item--btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Anlage-Dropdown im Header */
.menu-anlage-wrap {
    position: relative;
}

.menu-anlage-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.menu-anlage-chevron {
    font-size: 8px;
    opacity: 0.9;
}

.menu-anlage-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 160px;
    background: #fff;
    border: 1px solid var(--border-dark, #ccc);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
    z-index: 1000;
    display: none;
    flex-direction: column;
}

.menu-anlage-dropdown.is-open {
    display: flex;
}

.menu-anlage-item {
    display: block;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    font-size: 12px;
    color: #333;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.menu-anlage-item:hover {
    background: #e8f4fc;
    color: #1a4f8e;
}

.menu-anlage-separator {
    height: 1px;
    background: #dee2e6;
    margin: 4px 10px;
}

/* Vorgang-Anlage-Popup (Anlage → Vorgang) – kompakt */
.vorgang-anlage-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.vorgang-anlage-art-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.vorgang-anlage-art-item {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
}
.vorgang-anlage-art-item:hover {
    background: #f0f9ff;
    border-color: #7dd3fc;
}
.vorgang-anlage-art-item:focus {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}
.vorgang-anlage-art-item--selected {
    background: #f0f9ff;
    border-color: #0ea5e9;
    font-weight: 600;
}
.vorgang-anlage-vordefiniert {
    margin-bottom: 10px;
}
.vorgang-anlage-vordefiniert .vorgang-anlage-gevo-search {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 11px;
    box-sizing: border-box;
}
.vorgang-anlage-gevo-toggle {
    margin-top: 4px;
    padding: 0;
    border: none;
    background: none;
    color: #2563eb;
    font-size: 11px;
    cursor: pointer;
    text-decoration: underline;
}
.vorgang-anlage-gevo-toggle:hover {
    color: #1d4ed8;
}
.vorgang-anlage-gevo-list-wrap .vorgang-anlage-gevo-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 4px 8px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 11px;
    border-radius: 2px;
}
.vorgang-anlage-gevo-item:hover,
.vorgang-anlage-gevo-dropdown-item:hover {
    background: #f0f9ff;
}
.vorgang-anlage-gevo-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 5px 8px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 11px;
}
.vorgang-anlage-gevo-dropdown-empty {
    padding: 8px;
    font-size: 11px;
    color: #6b7280;
}
.vorgang-anlage-field {
    margin-bottom: 8px;
}
.vorgang-anlage-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 2px;
}
.vorgang-anlage-required {
    color: #dc2626;
}
.vorgang-anlage-field .vorgang-anlage-kunde,
.vorgang-anlage-field .vorgang-anlage-vertrag,
.vorgang-anlage-field .vorgang-anlage-betreff,
.vorgang-anlage-field .vorgang-anlage-beschreibung,
.vorgang-anlage-field .vorgang-anlage-faelligkeit {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 11px;
    box-sizing: border-box;
}
.vorgang-anlage-field .vorgang-anlage-beschreibung {
    min-height: 44px;
    resize: vertical;
}
.vorgang-anlage-customer-wrap {
    position: relative;
}
.vorgang-anlage-customer-dropdown {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 2px;
    max-height: 120px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 50;
}
.vorgang-anlage-drop-zone {
    border: 2px dashed #bdc3c7;
    border-radius: 4px;
    padding: 8px 10px;
    text-align: center;
    background: #fafafa;
}
.vorgang-anlage-drop-zone:hover {
    border-color: #94a3b8;
    background: #f1f5f9;
}
.vorgang-anlage-drop-text {
    font-size: 11px;
    color: #6b7280;
}
.vorgang-anlage-file-btn {
    background: none;
    border: none;
    color: #2563eb;
    font-weight: 600;
    cursor: pointer;
    font-size: 11px;
}
.vorgang-anlage-file-list {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: 11px;
    color: #374151;
}

/* Benutzerkonto-Dropdown im Header */
.user-menu-wrap {
    position: relative;
}

.user-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: bold;
}

.user-menu-chevron {
    font-size: 8px;
    opacity: 0.9;
}

.user-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--border-dark, #ccc);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
    z-index: 1000;
    display: none;
    flex-direction: column;
}

.user-menu-dropdown.is-open {
    display: flex;
}

.user-menu-name {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.user-menu-separator {
    height: 1px;
    background: #dee2e6;
    margin: 4px 10px;
}

.user-menu-item {
    display: block;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    font-size: 12px;
    color: #333;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.user-menu-item:hover {
    background: #e8f4fc;
    color: #1a4f8e;
}

/* Benutzerkonto-Tab: Reiter (Maklerprofil, Benutzerdaten, Darstellung, …) */
.benutzerkonto-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: #f5f6f8;
}

.benutzerkonto-tabs {
    display: flex;
    gap: 2px;
    padding: 0 20px;
    background: #34495e;
    border-bottom: 2px solid #2c3e50;
    flex-shrink: 0;
}

.benutzerkonto-tab-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: #ecf0f1;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-family: inherit;
}

.benutzerkonto-tab-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.benutzerkonto-tab-btn.active {
    background: #fff;
    color: #2d6cdf;
    border-bottom-color: #2d6cdf;
}

.benutzerkonto-panels {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: #fff;
    margin: 20px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.benutzerkonto-tab-content {
    display: none;
    padding: 24px 28px;
    height: 100%;
    min-height: 200px;
}

.benutzerkonto-tab-content.benutzerkonto-tab-content--active {
    display: block;
}

.benutzerkonto-reiter-inner {
    max-width: 800px;
}

.benutzerkonto-reiter-title {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
}

.benutzerkonto-reiter-placeholder {
    margin: 0;
    color: #666;
    font-size: 13px;
}

.benutzerkonto-makler-hint {
    margin: 0 0 20px 0;
    padding: 12px 14px;
    background: #e8f4fc;
    border-left: 4px solid #2d6cdf;
    font-size: 12px;
    color: #333;
    line-height: 1.45;
}

.benutzerkonto-form .ka-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    margin-bottom: 20px;
}

.benutzerkonto-form .ka-section-title {
    margin: 0 0 12px 0;
}

.ka-required {
    color: #c00;
}

.benutzerkonto-pflicht-hinweis {
    margin: 12px 0 0 0;
    font-size: 11px;
    color: #666;
}

.benutzerkonto-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.benutzerkonto-btn {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: inherit;
}

.benutzerkonto-btn--primary {
    background: #2d6cdf;
    color: #fff;
    border-color: #2d6cdf;
}

.benutzerkonto-btn--primary:hover {
    background: #1a4f8e;
    border-color: #1a4f8e;
}

.benutzerkonto-btn--secondary {
    background: #e9ecef;
    color: #495057;
    border-color: #dee2e6;
}

.benutzerkonto-btn--secondary:hover {
    background: #dee2e6;
}

/* Benutzerdaten: Label über Feld, grauer Eingabehintergrund */
.benutzerkonto-form--stacked .benutzerkonto-field {
    margin-bottom: 16px;
}

.benutzerkonto-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

.benutzerkonto-input {
    display: block;
    width: 100%;
    max-width: 400px;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #f1f3f5;
    font-family: inherit;
    box-sizing: border-box;
}

.benutzerkonto-input:focus {
    outline: none;
    border-color: #2d6cdf;
    background: #fff;
}

.benutzerkonto-benutzerdaten-desc {
    margin: 0 0 20px 0;
    font-size: 13px;
    color: #555;
    line-height: 1.45;
}

.benutzerkonto-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.benutzerkonto-form-footer .benutzerkonto-pflicht-hinweis {
    margin: 0;
}

.benutzerkonto-form-footer .benutzerkonto-form-actions {
    margin-top: 0;
}

/* Passwort: Regeln-Liste */
.benutzerkonto-passwort-regeln {
    margin-top: 24px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #e9ecef;
}

.benutzerkonto-passwort-regeln-title {
    margin: 0 0 10px 0;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.benutzerkonto-passwort-regeln-list {
    margin: 0;
    padding-left: 20px;
    font-size: 12px;
    color: #555;
    line-height: 1.7;
}

/* Benutzerkonto – Reiter Darstellung */
.benutzerkonto-darstellung .benutzerkonto-darstellung-desc {
    font-size: 12px;
    color: #7f8c8d;
    margin-bottom: 20px;
}

.bu-darstellung-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.bu-darstellung-section:last-of-type {
    border-bottom: none;
}

.bu-darstellung-section-title {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.bu-darstellung-hint {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 12px 0;
}

.bu-darstellung-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    cursor: pointer;
}

.bu-darstellung-row--disabled {
    color: #9ca3af;
    cursor: default;
}

.bu-darstellung-row input[type="checkbox"] {
    flex-shrink: 0;
}

.bu-darstellung-unavailable {
    font-size: 11px;
    color: #9ca3af;
    font-style: italic;
}

.bu-darstellung-radio {
    margin-right: 16px;
    cursor: pointer;
    font-size: 13px;
}

.bu-darstellung-list-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.bu-darstellung-list-btn {
    font-size: 12px;
}

/* Listen-Blöcke: pro Liste Spalten konfigurieren */
.bu-darstellung-section--listen .bu-list-block {
    margin-bottom: 20px;
    padding: 14px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
}

.bu-darstellung-section--listen .bu-list-block:last-child {
    margin-bottom: 0;
}

.bu-list-block-title {
    margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.bu-list-hint {
    margin-bottom: 12px !important;
}

.bu-list-columns {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bu-list-col-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 12px;
}

.bu-list-col-check {
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
}

.bu-list-col-check input {
    margin-right: 6px;
}

.bu-list-col-label {
    flex: 1;
    font-weight: 500;
    color: #495057;
}

.bu-list-col-width-label {
    flex-shrink: 0;
    font-size: 11px;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 4px;
}

.bu-list-col-width-label input {
    padding: 2px 4px;
    font-size: 11px;
}

.bu-list-col-actions {
    flex-shrink: 0;
    display: flex;
    gap: 4px;
}

.bu-list-col-move {
    width: 28px;
    height: 26px;
    padding: 0;
    border: 1px solid #ced4da;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    color: #495057;
}

.bu-list-col-move:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.bu-darstellung-actions {
    margin-top: 24px;
    padding-top: 16px;
}

/* Kundenanlage-Formular (Tab-Inhalt) – kompakt, strukturiert */
.kundenanlage {
    padding: 24px 32px 32px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: 100%;
}

.kundenanlage-title {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #1a202c;
    background: linear-gradient(135deg, var(--brand-blue-start) 0%, var(--brand-blue-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.kundenanlage-subtitle {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 24px;
    line-height: 1.6;
}

.kundenanlage-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Typ-Auswahl oben: eine Zeile, klar hervorgehoben */
.ka-typ-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 10px 10px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #e2e5e9;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.ka-typ-label {
    font-size: 13px;
    font-weight: 700;
    color: #1a202c;
    letter-spacing: 0.01em;
}
.ka-typ-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 6px;
    border: 2px solid #e2e8f0;
    background: #fff;
    transition: all 0.2s ease;
    font-weight: 500;
}
.ka-typ-option:hover {
    border-color: #cbd5e0;
    background: #f7fafc;
}
.ka-typ-option:has(input:checked) {
    border-color: var(--brand-blue-end);
    background: linear-gradient(135deg, rgba(45, 108, 223, 0.05) 0%, rgba(42, 95, 158, 0.05) 100%);
    box-shadow: 0 0 0 3px rgba(45, 108, 223, 0.1);
    font-weight: 600;
}
.ka-typ-option input {
    margin: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Grid: schmale Boxen (Basis, Kontakt, Bank) ~1/3, breite Sektionen (Person/Firma, Adressen, Weitere) flexibel */
.ka-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px 10px;
    margin-bottom: 8px;
}

.ka-section {
    margin-bottom: 0;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    align-self: start;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    position: relative;
}

.ka-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-blue-start) 0%, var(--brand-blue-end) 100%);
    border-radius: 8px 8px 0 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ka-section:hover {
    border-color: #cbd5e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ka-section:hover::before {
    opacity: 1;
}

/* Schmale Boxen: nur so breit wie nötig (Basisangaben, Kontakt, Bank) – je 2 Spalten von 6 ≈ 1/3 */
.ka-section-narrow {
    grid-column: span 2;
    max-width: 420px;
}

.ka-section-wide {
    grid-column: span 4;
}

/* Person/Firma-Sektion: 2 Spalten; Adressen/Weitere: volle Breite */
.ka-section-privat,
.ka-section-firma {
    grid-column: span 2;
}

.ka-section-wide#ka-section-weitere {
    grid-column: 1 / -1;
    max-width: none;
}

.ka-weitere-block {
    margin-top: 4px;
}

@media (max-width: 1100px) {
    .ka-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ka-section-narrow {
        grid-column: span 1;
        max-width: none;
    }
    .ka-section-wide {
        grid-column: span 2;
    }
    .ka-section-privat,
    .ka-section-firma {
        grid-column: span 2;
    }
}

@media (max-width: 700px) {
    .ka-grid {
        grid-template-columns: 1fr;
    }
    .ka-section-narrow,
    .ka-section-wide,
    .ka-section-privat,
    .ka-section-firma {
        grid-column: span 1;
    }
}

.ka-section-full {
    grid-column: 1 / -1;
}

.ka-section-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #1a202c;
    margin: 0 0 16px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #e1e8ed;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ka-section-title::before {
    content: '';
    width: 4px;
    height: 20px;
    background: linear-gradient(180deg, var(--brand-blue-start) 0%, var(--brand-blue-end) 100%);
    border-radius: 2px;
    flex-shrink: 0;
}

.ka-section-desc {
    font-size: 10px;
    color: #6b7280;
    margin: -2px 0 6px 0;
}

.ka-conditional-row {
    transition: opacity 0.15s ease;
}

/* Einklappbare Sektion (z. B. Weitere Angaben) */
.ka-section-collapsible .ka-section-header {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    border-radius: 4px;
    transition: color 0.15s ease;
}

.ka-section-collapsible .ka-section-header:hover {
    color: #144a8a;
}

.ka-section-chevron {
    font-size: 9px;
    opacity: 0.85;
    margin-left: 6px;
}

.ka-section-collapsible.ka-section-collapsed .ka-section-body {
    display: none;
}

.ka-section-collapsible .ka-section-body {
    padding-top: 4px;
}

.ka-subtitle {
    font-size: 10px;
    font-weight: 600;
    color: #5c6370;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ka-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}

.ka-section .ka-row:last-of-type {
    margin-bottom: 0;
}

.ka-section .ka-hint+.ka-row {
    margin-top: 4px;
}

/* Mehrere Felder in einer Zeile (z. B. Vorname + Nachname) */
.ka-row-multi {
    display: grid;
    gap: 0 10px;
    margin-bottom: 4px;
    align-items: end;
}

.ka-row-multi.ka-row-2 { grid-template-columns: 1fr 1fr; }
.ka-row-multi.ka-row-3 { grid-template-columns: 1fr 1fr 1fr; }

.ka-row-multi .ka-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ka-row-multi .ka-field .ka-label {
    flex: none;
    min-width: 0;
}

.ka-row-multi .ka-field .ka-input,
.ka-row-multi .ka-field .ka-select {
    width: 100%;
    min-width: 0;
}

.ka-label {
    flex: 0 0 100px;
    font-size: 12px;
    color: #4a5568;
    min-width: 90px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.ka-input,
.ka-textarea {
    flex: 1;
    min-width: 0;
    max-width: none;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    transition: all 0.2s ease;
}

.ka-input:hover,
.ka-textarea:hover {
    border-color: #cbd5e0;
}

.ka-input:focus,
.ka-textarea:focus {
    outline: none;
    border-color: var(--brand-blue-end);
    box-shadow: 0 0 0 3px rgba(45, 108, 223, 0.1);
    background: #fff;
}

.ka-input::placeholder,
.ka-textarea::placeholder {
    color: #a0aec0;
    font-size: 12px;
}

.ka-input-small {
    max-width: 80px;
}

.ka-input-narrow {
    max-width: 64px;
}

.ka-textarea {
    resize: vertical;
    min-height: 48px;
}

.ka-field-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ka-field-group-wrap {
    gap: 8px 14px;
}

.ka-konzern-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}
.ka-konzern-wrap .ka-input {
    max-width: 280px;
}
.ka-konzern-results {
    max-height: 120px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fafafa;
    max-width: 280px;
}
.ka-konzern-result-row {
    display: block;
    width: 100%;
    padding: 4px 8px;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 12px;
}
.ka-konzern-result-row:hover {
    background: #e8f4fc;
}
.ka-konzern-result-id {
    font-size: 10px;
    color: #666;
    margin-left: 4px;
}
.ka-konzern-no-results {
    padding: 6px 8px;
    font-size: 11px;
    color: #666;
}
.ka-konzern-selected {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ka-konzern-selected-name {
    font-size: 12px;
    font-weight: 500;
    color: #2a5f9e;
}
.ka-konzern-remove {
    font-size: 11px;
    padding: 2px 8px;
}

.ka-inline-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ka-inline-group .ka-input {
    flex: 1;
    min-width: 120px;
}

.ka-inline-label {
    font-size: 11px;
    color: #6b7280;
    flex: 0 0 auto;
}

.ka-radio,
.ka-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #374151;
    cursor: pointer;
}

.ka-radio input,
.ka-checkbox input {
    margin: 0;
}

.ka-hint {
    font-size: 10px;
    color: #6b7280;
    margin: 4px 0 0 90px;
}

/* Kontaktdaten: erweiterbare Zeilen mit Typ-Dropdown */
.ka-contact-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
}

.ka-contact-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ka-contact-row .ka-select {
    flex: 0 0 auto;
    min-width: 88px;
    padding: 4px 8px;
    border: 1px solid #d0d4d9;
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
    background: #fff;
    transition: border-color 0.15s ease;
}

.ka-contact-row .ka-select:focus {
    outline: none;
    border-color: #2a5f9e;
}

.ka-contact-row .ka-contact-value {
    flex: 1;
    min-width: 100px;
}

.ka-contact-row .ka-contact-verwendung {
    flex: 0 0 auto;
    width: 72px;
}

.ka-contact-remove {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #d0d4d9;
    border-radius: 4px;
    background: #fff;
    color: #6b7280;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ka-contact-remove:hover {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.ka-add-contact-wrap {
    position: relative;
    margin-top: 2px;
}

.ka-add-contact-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 160px;
    background: #fff;
    border: 1px solid #e2e5e9;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    padding: 4px 0;
    z-index: 100;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.ka-add-contact-dropdown.is-open {
    display: flex;
}

.ka-add-contact-item {
    display: block;
    width: 100%;
    padding: 6px 12px;
    border: none;
    background: none;
    font-size: 12px;
    color: #374151;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.1s ease;
}

.ka-add-contact-item:hover {
    background: #eff6ff;
    color: #1a4f8e;
}

/* ========== Kundenanlage Auswahl-Popup (Person / Firma) ========== */
.ka-auswahl-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.ka-auswahl-modal {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 480px;
    overflow: hidden;
}

.ka-auswahl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e5e9;
    background: linear-gradient(135deg, #1a4f8e 0%, #2a5f9e 100%);
}

.ka-auswahl-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.ka-auswahl-close {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.ka-auswahl-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.ka-auswahl-body {
    padding: 24px 20px;
}

.ka-auswahl-text {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: #5c6370;
    text-align: center;
}

.ka-auswahl-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ka-auswahl-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px 20px;
    border: 2px solid #e2e5e9;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.ka-auswahl-btn:hover {
    border-color: #2a5f9e;
    background: #f0f7ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(42, 95, 158, 0.15);
}

.ka-auswahl-btn-icon {
    font-size: 48px;
    line-height: 1;
}

.ka-auswahl-btn-label {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

.ka-auswahl-btn:hover .ka-auswahl-btn-label {
    color: #1a4f8e;
}

/* ========== Vereinfachte Personenanlage ========== */
.kundenanlage--person {
    background: #f8f9fa;
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 8px 16px 24px;
    box-sizing: border-box;
}

.person-anlage-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Grid: Boxen logisch nebeneinander, nutzen Seitenbreite, bleiben inhaltsschmal */
.pa-sections-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

.pa-section {
    background: #fff;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 20px 24px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    width: fit-content;
    min-width: 320px;
    max-width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    transition: all 0.2s ease;
    position: relative;
}

.pa-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-blue-start) 0%, var(--brand-blue-end) 100%);
    border-radius: 8px 8px 0 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pa-section:hover {
    border-color: #cbd5e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pa-section:hover::before {
    opacity: 1;
}

.pa-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 16px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #e1e8ed;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pa-section-title::before {
    content: '';
    width: 4px;
    height: 20px;
    background: linear-gradient(180deg, var(--brand-blue-start) 0%, var(--brand-blue-end) 100%);
    border-radius: 2px;
    flex-shrink: 0;
}

.pa-subtitle {
    font-size: 10px;
    font-weight: 600;
    color: #5c6370;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pa-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.pa-row:last-child {
    margin-bottom: 0;
}

.pa-row-multi {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
    align-items: end;
}

.pa-row-multi:last-child {
    margin-bottom: 0;
}

.pa-row-multi.pa-row-2 { 
    grid-template-columns: repeat(2, minmax(0, max-content));
}
.pa-row-multi.pa-row-3 { 
    grid-template-columns: repeat(3, minmax(0, max-content));
}

@media (max-width: 768px) {
    .pa-row-multi.pa-row-2,
    .pa-row-multi.pa-row-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .pa-sections-grid {
        flex-direction: column;
    }
    .pa-section {
        min-width: 0;
        width: 100%;
    }
}

.pa-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    width: fit-content;
}

.pa-label {
    flex: 0 0 120px;
    font-size: 11px;
    color: #5c6370;
    font-weight: 500;
}

.pa-field .pa-label {
    flex: none;
    font-size: 11px;
}

.pa-input,
.pa-select,
.pa-textarea {
    flex: 1;
    min-width: 0;
    width: auto;
    padding: 6px 10px;
    border: 1px solid #d0d4d9;
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Spezifische Breiten für verschiedene Feldtypen */
.pa-input[name="vorname"],
.pa-input[name="nachname"] {
    min-width: 160px;
}

.pa-input[name="titel"] {
    min-width: 80px;
}

.pa-input[name="geburtsdatum"] {
    min-width: 120px;
}

.pa-input[name="email"],
.pa-input[name="emailGeschaeftlich"] {
    min-width: 220px;
}

.pa-input[name="telefonPrivat"],
.pa-input[name="telefon"],
.pa-input[name="telefonGeschaeftlich"] {
    min-width: 160px;
}

.pa-input[name="strasse"] {
    min-width: 200px;
}

.pa-input[name="adresszusatz"] {
    min-width: 140px;
}

.pa-input[name="plz"] {
    min-width: 80px;
}

.pa-input[name="ort"] {
    min-width: 140px;
}

.pa-input[name="land"] {
    min-width: 120px;
}

.pa-input[name="arbeitgeber"] {
    min-width: 200px;
}

.pa-select[name="familienstand"] {
    min-width: 160px;
}

.pa-input:focus,
.pa-select:focus,
.pa-textarea:focus {
    outline: none;
    border-color: #2a5f9e;
    box-shadow: 0 0 0 3px rgba(42, 95, 158, 0.1);
}

.pa-textarea {
    resize: vertical;
    min-height: 60px;
}

.pa-field-group {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.pa-radio,
.pa-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #374151;
    cursor: pointer;
}

.pa-radio input,
.pa-checkbox input {
    margin: 0;
    cursor: pointer;
}

.pa-required {
    border-left: 3px solid #2a5f9e;
}

/* Notizen-Bereich */
#pa-notizen-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
    max-width: 600px;
}

.pa-notiz-row {
    display: flex;
    gap: 8px;
    align-items: start;
}

.pa-notiz-row .pa-textarea {
    flex: 1;
    min-width: 0;
}

.pa-notiz-remove {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #d0d4d9;
    border-radius: 4px;
    background: #fff;
    color: #6b7280;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.pa-notiz-remove:hover {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.pa-btn-add-notiz {
    align-self: flex-start;
}

/* Aktionsleiste */
.pa-actions {
    margin-top: 32px;
    padding: 24px;
    border-top: 2px solid #e1e8ed;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 0 0 8px 8px;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

.pa-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.01em;
}

.pa-btn-primary {
    background: linear-gradient(135deg, var(--brand-blue-start) 0%, var(--brand-blue-end) 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(45, 108, 223, 0.25);
}

.pa-btn-primary:hover {
    background: linear-gradient(135deg, #1a4f8e 0%, #2a5f9e 100%);
    box-shadow: 0 6px 16px rgba(45, 108, 223, 0.35);
    transform: translateY(-2px);
}

.pa-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(45, 108, 223, 0.2);
}

.pa-btn-primary:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    opacity: 0.6;
}

.pa-btn-secondary {
    background: #fff;
    color: #5c6370;
    border: 1px solid #d0d4d9;
}

.pa-btn-secondary:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

/* Aktionsleiste (Speichern / Abbrechen) */
.ka-actions {
    margin-top: 12px;
    padding: 10px 0 0;
    border-top: 1px solid #e2e5e9;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ka-btn {
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ka-btn-primary {
    background: #2a5f9e;
    color: #fff;
    border-color: #1a4f8e;
}

.ka-btn-primary:hover {
    background: #1e4a82;
    border-color: #164276;
}

.ka-btn-secondary {
    background: #fff;
    color: #374151;
    border: 1px solid #d0d4d9;
}

.ka-btn-secondary:hover {
    background: #f5f6f8;
    border-color: #9ca3af;
}

/* Gesellschaftsanlage-Tab (Anlage → Gesellschaft) */
.gesellschaftsanlage {
    padding: 10px 16px 20px;
    width: 100%;
    max-width: 520px;
    box-sizing: border-box;
    background: #f5f6f8;
    min-height: 100%;
}
.gesellschaftsanlage-title {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 1px solid #e2e5e9;
    padding-bottom: 8px;
}
.gesellschaftsanlage-form { display: flex; flex-direction: column; gap: 0; }
.gesellschaftsanlage-field { margin-bottom: 12px; }
.gesellschaftsanlage-field label { display: block; font-size: 11px; font-weight: 600; margin-bottom: 4px; color: #374151; }
.gesellschaftsanlage-field input { width: 100%; padding: 8px; font-size: 12px; border: 1px solid #d1d5db; border-radius: 4px; box-sizing: border-box; }
.gesellschaftsanlage-row { display: flex; gap: 8px; margin-bottom: 12px; }
.gesellschaftsanlage-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* Toolbar */
.toolbar {
    background: var(--grad-toolbar);
    border-bottom: 1px solid var(--border-dark);
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
}

.toolbar-btn {
    padding: 4px 10px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-main);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.toolbar-btn:hover {
    background: linear-gradient(180deg, #fcfcfc 0%, #f0f0f0 100%);
    border-color: #b0cbe8;
}

.toolbar-btn--primary {
    background: linear-gradient(180deg, #2d6cdf 0%, #1f55b5 100%);
    border-color: #1f55b5;
    color: #fff;
}

.toolbar-btn--primary:hover {
    background: linear-gradient(180deg, #3576ee 0%, #244faa 100%);
    border-color: #1a4696;
}

.toolbar-separator {
    width: 1px;
    height: 22px;
    background: var(--border-color);
    margin: 0 4px;
}

.contracts-notice {
    position: fixed;
    bottom: 16px;
    right: 16px;
    background: #2d6cdf;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 11px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1002;
}

.contracts-columns-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1000;
}

.contracts-columns-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    width: 320px;
    z-index: 1001;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

.contracts-columns-modal__header {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f5f5f5;
}

.contracts-columns-modal__close {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
}

.contracts-columns-modal__body {
    padding: 12px;
    font-size: 11px;
    color: var(--text-main);
}

.contracts-columns-modal__hint {
    margin: 0 0 10px;
    color: #666;
}

.contracts-columns-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.contracts-columns-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border-color);
}

.contracts-columns-row:last-child {
    border-bottom: none;
}

.contracts-columns-option {
    display: flex;
    align-items: center;
    gap: 6px;
}

.col-move-up,
.col-move-down {
    background: #e8e8e8;
    border: 1px solid var(--border-dark);
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 10px;
    cursor: pointer;
    line-height: 1;
}

.col-move-up:hover,
.col-move-down:hover {
    background: #ddd;
}

.contracts-columns-modal__footer {
    padding: 10px 12px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

/* Tab Bar: Tabs linksbündig, neue Tabs von links nach rechts (appendChild = am Ende = rechts vom letzten) */
.tab-bar {
    height: 28px;
    background: #e5e5e5;
    border-bottom: 1px solid var(--border-dark);
    display: flex;
    flex-direction: row;
    direction: ltr;
    align-items: flex-end;
    justify-content: flex-start;
    padding-left: 4px;
    padding-right: 4px;
    gap: 2px;
}

.tab {
    height: 24px;
    background: #f4f4f4;
    border: 1px solid var(--border-dark);
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 11px;
    color: var(--text-light);
    min-width: 120px;
    max-width: 200px;
    justify-content: space-between;
}

.tab:hover {
    background: #fafafa;
}

/* Nur der aktuell gewählte Tab in der Tableiste erhält die Markierung; es gibt stets höchstens einen .active Tab */
.tab.active {
    background: #f0d4b8;
    border-bottom: 1px solid #f0d4b8;
    margin-bottom: -1px;
    font-weight: 600;
    color: var(--text-main);
    height: 25px;
    z-index: 10;
}

.tab-close {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #999;
}

.tab-close:hover {
    background: #ff4444;
    color: white;
}

/* Main Content */
/* Main Content */
.main-content {
    display: flex;
    flex: 1;
    /* Take remaining space */
    height: 100%;
    overflow: hidden;
}

/* Content Area: min-height:0 damit Flex-Kinder scrollen können (z. B. Verträge-Tabelle) */
.content-area {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-white);
    position: relative;
}

/* Customer Sub-Tabs (Übersicht, Verträge, Dokumente, …): nur der aktive Panel sichtbar */
.customer-tab-content {
    display: none !important;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    overflow: auto;
}

.customer-tab-content.customer-tab-content--active {
    display: flex !important;
}

.time-display {
    font-weight: 600;
    color: var(--text-main);
}

/* Live-Zeit im Header (zwischen Gesprächsnotiz und Benutzerkonto) */
.menu-bar .time-display {
    color: white;
    font-size: 12px;
    padding: 0 4px;
}


/* Dropdown Arrow */
.dropdown-arrow {
    width: 16px;
    height: 20px;
    background: #f0f0f0;
    border: 1px solid #c0c0c0;
    border-radius: 0 2px 2px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 8px;
    left: 8px;
}

.dropdown-arrow::after {
    content: '▼';
    font-size: 8px;
    color: #666;
}

/* Sidebar Action Buttons */
.btn-customer-action {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    padding: 0;
}

.btn-customer-action:hover {
    background: #eee;
    border-color: #999;
}

/* Popup Window */
.popup-window {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    background: #fff;
    border: 1px solid #999;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.popup-header {
    background: linear-gradient(180deg, #5b9de0 0%, #3a6fae 100%);
    color: white;
    padding: 6px 10px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: grab;
    border-radius: 3px 3px 0 0;
}

.popup-header:active {
    cursor: grabbing;
}

.popup-close {
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}

.popup-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.popup-content {
    padding: 15px;
    max-height: 400px;
    overflow-y: auto;
    font-size: 12px;
    background: #fdfdfd;
}

/* Context Menu */
.context-menu {
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    min-width: 150px;
    z-index: 2000;
    padding: 2px;
}

.context-menu-item {
    padding: 4px 12px;
    cursor: pointer;
    font-size: 11px;
    color: #333;
}

.context-menu-item:hover {
    background: #4a90d9;
    color: white;
}

.context-menu-separator {
    height: 1px;
    background: #e0e0e0;
    margin: 2px 0;
}

/* Dashboard specific styles (Dark Mode – Details in dashboard.css) */
.dashboard-container {
    padding: 20px;
    height: 100%;
    overflow-y: auto;
    background: #1e2d3a;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.dashboard-card {
    background: #2c3e50;
    border: 1px solid #3d5166;
    border-radius: 4px;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dashboard-card h3 {
    font-size: 12px;
    color: #8fa4b8;
    margin-bottom: 5px;
    font-weight: 600;
    text-transform: uppercase;
}

.dashboard-card .stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 5px;
}

.dashboard-card .stat-desc {
    font-size: 10px;
    color: #6a8a9a;
}

/* Charts Area */
.dashboard-charts-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.chart-box {
    background: #2c3e50;
    border: 1px solid #3d5166;
    border-radius: 4px;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.chart-box h3 {
    font-size: 13px;
    color: #fff;
    margin-bottom: 15px;
    border-bottom: 1px solid #3d5166;
    padding-bottom: 8px;
}

/* Simple CSS Bar Chart */
.simple-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chart-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
}

.chart-label {
    width: 80px;
    text-align: right;
    color: #8fa4b8;
}

.chart-bar-bg {
    flex: 1;
    background: #3d5166;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
}

.chart-bar-fill {
    height: 100%;
    background: #4fc3f7;
    border-radius: 6px;
}

.chart-value {
    width: 30px;
    color: #fff;
    font-weight: bold;
}

/* Quick Actions */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.action-card {
    background: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.action-card:hover {
    border-color: #4a90d9;
    background: #f0f8ff;
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.action-icon {
    font-size: 20px;
    color: #4a90d9;
}

.action-text {
    font-size: 11px;
    font-weight: 600;
    color: #444;
}

/* Customer Types Distribution (Mini Pie approximation using gradient or just bars) */
.type-distribution {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.type-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.type-progress {
    height: 6px;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
}

.type-progress-bar {
    height: 100%;
    background: #66bb6a;
}

/* Document Popup Styles */
.doc-tool-btn {
    width: 24px;
    height: 24px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.doc-tool-btn:hover {
    background: #eef;
    border-color: #aaf;
}

.doc-action-btn {
    width: 20px;
    height: 20px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

.doc-tree-item {
    cursor: pointer;
    padding: 4px 6px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 2px;
}

.doc-tree-item:hover {
    background: #eef8ff;
}

.doc-tree-item.selected {
    background: #0078d7;
    color: white;
}

.doc-tree-folder {
    font-weight: bold;
    color: #555;
}

.doc-tree-toolbar-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
}

.doc-tree-toolbar-btn:hover {
    background: #f0f0f0;
    border-color: #999;
}

/* Document Popup Tab Styles */
.doc-tab {
    transition: all 0.2s ease;
}

.doc-tab:hover {
    background: #f0f0f0 !important;
}

.doc-tab.active {
    background: white !important;
    color: #333 !important;
    border-bottom: 2px solid #4a90d9;
}

.doc-tab-content {
    display: none;
}

.doc-tab-content.active {
    display: flex !important;
}

.doc-section {
    display: flex;
    flex-direction: column;
}

/* Quick Action Buttons */
.doc-quick-action-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 6px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
}

.doc-quick-action-btn:hover {
    background: #f0f8ff;
    border-color: #4a90d9;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.doc-quick-action-btn:active {
    transform: translateY(0);
}

/* BiPRO Buttons */
.doc-bipro-btn {
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s;
}

.doc-bipro-btn:hover {
    background: #f0f0f0;
    border-color: #999;
}

.doc-bipro-clear-btn {
    padding: 6px 10px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
}

.doc-bipro-clear-btn:hover {
    background: #ffebee;
    border-color: #d32f2f;
}

/* Enhanced Toolbar */
.doc-tool-btn-text {
    background: linear-gradient(180deg, #f8f8f8 0%, #e8e8e8 100%);
}

.doc-tool-btn-text:hover {
    background: linear-gradient(180deg, #e8f4fd 0%, #d0e8f7 100%);
}

/* Save Button Hover */
.doc-btn-save:hover {
    background: #3a7bc8;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.doc-btn-close:hover {
    background: #f0f0f0;
    border-color: #999;
}

/* Drop Zone Enhanced */
.drop-zone:hover {
    background: #f0f8ff !important;
    border-color: #4a90d9 !important;
}

/* Document Popup Footer Enhancement */
.popup-footer {
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
}

/* Resizable Popup */
.popup-resizable {
    position: absolute;
}

.popup-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 0%, transparent 50%, #999 50%, #999 100%);
    opacity: 0.5;
    transition: opacity 0.2s;
}

.popup-resize-handle:hover {
    opacity: 1;
}

/* Kontaktnotiz erfassen (Gesprächsnotiz) Modal */
.contact-note-popup .popup-content {
    padding: 16px 20px;
    max-height: none;
}

.contact-note-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contact-note-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-note-label {
    font-size: 11px;
    font-weight: 600;
    color: #333;
}

.contact-note-input,
.contact-note-select {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
    width: 100%;
    box-sizing: border-box;
}

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

.contact-note-datetime .contact-note-input {
    width: 100px;
}

.contact-note-date-icon {
    font-size: 14px;
    opacity: 0.8;
}

.contact-note-time {
    display: flex;
    align-items: center;
    gap: 2px;
}

.contact-note-time-input {
    width: 44px;
    padding: 6px 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
}

.contact-note-time-sep {
    font-weight: 600;
    color: #555;
}

.contact-note-textarea {
    width: 100%;
    min-height: 80px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}

.contact-note-ablegen {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-note-tabs {
    display: flex;
    gap: 4px;
}

.contact-note-tab {
    padding: 6px 12px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    color: #555;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
}

.contact-note-tab:hover {
    background: #eee;
}

.contact-note-tab--active {
    background: #2d6cdf;
    color: #fff;
    border-color: #2d6cdf;
}

.contact-note-assign {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-note-assign .contact-note-input {
    flex: 1;
}

.contact-note-assign-clear {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    color: #666;
    flex-shrink: 0;
}

.contact-note-assign-clear:hover {
    background: #f5f5f5;
    color: #333;
}

.contact-note-file-hint {
    font-size: 10px;
    color: #666;
    margin: 0 0 8px 0;
}

.contact-note-file-label {
    display: inline-block;
    cursor: pointer;
    border: 1px dashed #999;
    border-radius: 4px;
    padding: 10px 16px;
    background: #fafafa;
}

.contact-note-file-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.contact-note-file-link {
    font-size: 12px;
    color: #2d6cdf;
    text-decoration: underline;
}

.contact-note-file-link:hover {
    color: #1a5bb8;
}

.contact-note-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
}

.contact-note-btn {
    padding: 8px 18px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.contact-note-btn--cancel {
    background: #fff;
    border: 1px solid #2d6cdf;
    color: #2d6cdf;
}

.contact-note-btn--cancel:hover {
    background: #f0f7ff;
}

.contact-note-btn--submit {
    background: #28a745;
    border: none;
    color: #fff;
}

.contact-note-btn--submit:hover {
    background: #218838;
}

/* Optimize tab content heights to reduce empty space */
.doc-tab-content {
    min-height: 0;
}

.doc-tab-content>* {
    flex-shrink: 0;
}

/* ========================================================================
   VERTRÄGE-TAB (ct-*) – Komplett neu aufgebaut
   Sauberes Flexbox-Layout ohne Scroll-Bugs
   ======================================================================== */

/* Container – füllt den gesamten verfügbaren Platz */
.ct-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 12px;
    background: #f5f6f7;
    overflow: hidden;
}

/* Volle Breite (Kundenmaske Verträge): kein visueller Kasten, wie Suchergebnisse */
.ct-container--fullwidth {
    padding: 0;
    background: transparent;
}
.ct-container--fullwidth .ct-header {
    border-radius: 0;
}
.ct-container--fullwidth .ct-table-wrapper {
    border: none;
    border-radius: 0;
    border-top: 1px solid #e2e8f0;
}
.ct-container--fullwidth .ct-footer-info {
    border-left: none;
    border-right: none;
    border-radius: 0;
}
.ct-container--fullwidth .hist-timeline {
    padding-left: 20px;
    padding-right: 20px;
}

/* Header mit Titel, Filtern und Toolbar */
.ct-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    background: linear-gradient(180deg, #4a5568 0%, #2d3748 100%);
    border-radius: 6px 6px 0 0;
    flex-shrink: 0;
}

.ct-header-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.ct-header-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.ct-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 400;
    color: #e2e8f0;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.ct-filter-label:hover {
    color: #fff;
}

.ct-filter-cb {
    width: 13px;
    height: 13px;
    cursor: pointer;
    accent-color: #4299e1;
}

.ct-toolbar {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Header mit Trennlinie: Titelzeile, dann Linie, dann Auswahl/Toolbar (Vertragsmaske Ablage & Vorgänge) */
.ct-header.ct-header--title-sep {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
.ct-header--title-sep .ct-header-title-row {
    flex-shrink: 0;
}
.ct-header-sep-line {
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
    margin: 8px 0 10px 0;
    flex-shrink: 0;
}
.ct-header--title-sep .ct-header-options {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.ct-header--title-sep .ct-header-options .ct-header-filters {
    margin-left: 0;
}

/* Vertragsmaske: Vorgänge-Panel (Darstellung wie Kundenmaske) */
.contract-vorgaenge-row:hover {
    background: #f1f5f9;
}
.contract-vorgaenge-id-link {
    color: #2d6cdf;
    text-decoration: underline;
    cursor: pointer;
}
.contract-vorgaenge-id-link:hover {
    color: #1e4a8f;
}

/* Verträge-Header: Filter und Toolbar nur bei Sub-Reiter „Verträge“ anzeigen */
.ct-header:not(.ct-header--show-vertraege-ui) .ct-header-filters--vertraege,
.ct-header:not(.ct-header--show-vertraege-ui) .ct-toolbar--vertraege {
    display: none !important;
}

/* Trennlinie zwischen Titel und Sub-Reiter-Auswahl (in derselben Zeile) */
.ct-header-sub-tab-sep {
    display: inline-block;
    width: 1px;
    height: 20px;
    margin: 0 10px;
    background: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

/* Sub-Reiter: Verträge | Gruppenverträge (inline im Header, keine eigene Zeile) */
.ct-sub-tab-bar {
    display: inline-flex;
    gap: 0;
    align-items: center;
    flex-shrink: 0;
}
.ct-sub-tab {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.ct-sub-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}
.ct-sub-tab.ct-sub-tab--active {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
}

/* Content-Panels: nur das aktive anzeigen */
.ct-content-panel {
    display: none;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}
.ct-content-panel.ct-content-panel--active {
    display: flex;
}
.ct-content-panel--vertraege.ct-content-panel--active .ct-table-wrapper {
    flex: 1;
    min-height: 0;
    overflow: auto;
}
.ct-content-panel--firma-gv.ct-content-panel--active,
.ct-content-panel--gewerbe.ct-content-panel--active {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}
.ct-container .kd-root.kd-root--with-subtabs {
    flex: 1;
    min-height: 0;
}
.kd-sub-tab-panel .ct-firma-gv-inner {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}
.ct-content-panel--firma-gv .ct-firma-gv-inner {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}
.ct-header--gv-embedded {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #2c3e50;
    color: #ecf0f1;
}
.ct-placeholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #718096;
}
.ct-placeholder-text {
    margin: 0;
    font-size: 14px;
}

.gv-boxes-wrapper {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 14px;
    background: #f7fafc;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-content: start;
}
.gv-boxes-wrapper--empty {
    display: flex;
    align-items: center;
    justify-content: center;
}
.gv-empty {
    font-size: 13px;
    color: #718096;
}
.gv-box {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    min-width: 0;
}
.gv-box:last-child {
    margin-bottom: 0;
}
.gv-box-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #2d3748;
    background: #f7fafc;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 6px 6px 0 0;
}
.gv-box-toggle {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 6px solid #718096;
    flex-shrink: 0;
}
.gv-box-title {
    flex: 1;
    min-width: 0;
}
.gv-box-body {
    padding: 0;
}
.gv-data-row {
    display: flex;
    align-items: baseline;
    padding: 6px 14px;
    font-size: 12px;
    border-bottom: 1px solid #f0f0f0;
}
.gv-data-row:last-child {
    border-bottom: none;
}
.gv-data-row--alt {
    background: #f8fafc;
}
.gv-data-label {
    flex: 0 0 180px;
    font-weight: 500;
    color: #4a5568;
}
.gv-data-value {
    flex: 1;
    min-width: 0;
    color: #2d3748;
}
.gv-data-value--block {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Kombinierte Zeile: zwei Label-Wert-Paare nebeneinander mit Trennlinie (z. B. Eintritt | Austritt, Brutto | Netto) */
.gv-data-row--combined {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 4px;
}
.gv-data-row--combined .gv-data-label {
    flex: 0 0 90px;
    min-width: 0;
    font-weight: 500;
    color: #4a5568;
}
.gv-data-row--combined .gv-data-value {
    flex: 1;
    min-width: 50px;
    max-width: 120px;
    color: #2d3748;
}
.gv-data-row--combined .gv-data-value:first-of-type {
    margin-right: 4px;
}
.gv-data-sep {
    flex: 0 0 1px;
    width: 1px;
    height: 1em;
    background: #cbd5e0;
    margin: 0 10px;
    align-self: center;
}

/* Reiter Arbeit/Beruf: Datenfelder einspaltig; Umbruch erlauben, kein horizontales Scrollen */
/* Arbeitsverhältnis-Box: Body zweispaltig für kompakte Höhe (~50 % weniger) */
.ab-arbeitsverhaeltnis-box .gv-box-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
    padding: 8px 12px 10px;
    overflow-x: visible;
    overflow-y: visible;
}
.ab-arbeitsverhaeltnis-box .gv-data-row {
    flex-wrap: wrap;
    white-space: normal;
    min-width: 0;
}
.ab-arbeitsverhaeltnis-box .gv-data-label {
    white-space: normal;
    word-break: break-word;
}
.ab-arbeitsverhaeltnis-box .gv-data-value {
    white-space: normal;
    word-break: break-word;
}

/* Reiter Allgemein: drei Boxen (Stammdaten, Weitere Angaben, Individuelle Infofelder) in Grid */
.gv-mask-allgemein--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.gv-mask-allgemein--grid .gv-mask-allgemein-box:first-child {
    grid-column: 1 / -1;
}
@media (max-width: 700px) {
    .gv-mask-allgemein--grid {
        grid-template-columns: 1fr;
    }
    .gv-mask-allgemein--grid .gv-mask-allgemein-box:first-child {
        grid-column: 1;
    }
}
.gv-link {
    color: #2b6cb0;
    text-decoration: underline;
    cursor: pointer;
}
.gv-link:hover {
    color: #1a365d;
}

/* Reiter Arbeit/Beruf: Scroll-Container für Boxen (wie ct-table-wrapper bei Verträge/Ablage) */
.customer-detail-tab-panel.active:has(.ct-container) .ct-container .ab-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

/* Reiter Arbeit/Beruf: Zeitstrahl über den Boxen – hervorgehobenes Panel, scrollt mit Inhalt */
.ab-timeline-wrap {
    margin: 0 14px 16px;
    padding: 14px 16px 16px;
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 50%, #2b6cb0 100%);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(27, 108, 176, 0.25), 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
    flex-shrink: 0;
}
.ab-timeline-wrap::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 8px 0 0 8px;
    background: linear-gradient(180deg, #63b3ed 0%, #4299e1 50%, #3182ce 100%);
}
.ab-timeline {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ab-timeline-scale {
    position: relative;
    height: 20px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.02em;
}
.ab-timeline-year {
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.ab-timeline-track {
    position: relative;
    min-height: 36px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.ab-timeline-lane {
    position: relative;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    margin: 0 4px 0 4px;
}
.ab-timeline-segments {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
}
.ab-timeline-segment {
    position: absolute;
    top: 0;
    height: 100%;
    min-width: 6px;
    background: linear-gradient(180deg, #f6e05e 0%, #ecc94b 50%, #d69e2e 100%);
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    display: flex;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.ab-timeline-segment:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(214, 158, 46, 0.4);
    filter: brightness(1.08);
}
.ab-timeline-segment-label {
    font-size: 10px;
    font-weight: 600;
    color: #1a202c;
    padding: 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
.ab-arbeitsverhaeltnis-box.ab-box-highlight {
    box-shadow: 0 0 0 2px #2b6cb0;
    animation: ab-box-highlight-pulse 0.5s ease;
}
@keyframes ab-box-highlight-pulse {
    0%, 100% { box-shadow: 0 0 0 2px #2b6cb0; }
    50% { box-shadow: 0 0 0 4px #2b6cb0; }
}

/* Karriere-Layout: links Zeitstrahl oben + Arbeitsverhältnisse darunter (gleiche Breite), rechts frei */
.ab-body--karriere {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
    min-height: 0;
    flex: 1;
    padding: 16px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
}
.customer-detail-tab-panel.active:has(.ab-container--karriere) .ab-container .ab-body--karriere,
.kd-sub-tab-panel.active:has(.ab-container--karriere) .ab-container .ab-body--karriere {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
    overflow-x: hidden;
    overflow-y: auto;
}
/* Links: Zeitstrahl oben, darunter Liste (vertikal gestapelt) */
.ab-left-column {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.ab-left-column .ab-timeline-wrap,
.ab-left-column .ab-timeline-placeholder {
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.ab-left-column .ab-left-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.ab-left-column .ab-left-empty {
    flex: 0 0 auto;
}
/* Rechts: frei für spätere Inhalte */
.ab-right-column {
    min-height: 0;
    min-width: 0;
}
.ab-right-column--empty {
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 8px;
}
.ab-left-empty,
.ab-timeline-placeholder {
    font-size: 13px;
    color: #718096;
    padding: 12px 0;
}
.ab-left-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ab-aktive-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ab-aktive-list .ab-arbeitsverhaeltnis-box,
.ab-beendete-content .ab-arbeitsverhaeltnis-box {
    width: 100%;
    max-width: none;
}
.ab-beendete-section {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}
.ab-beendete-section .ab-beendete-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}
.ab-beendete-section.ab-beendete-section--collapsed .ab-beendete-content {
    display: none;
}
.ab-beendete-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #4a5568;
    background: #edf2f7;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.ab-beendete-toggle:hover {
    background: #e2e8f0;
    color: #2d3748;
}
.ab-beendete-toggle-icon {
    font-size: 10px;
    transition: transform 0.2s ease;
}
.ab-arbeitsverhaeltnis-box--collapsed .gv-box-body {
    display: none;
}
.ab-arbeitsverhaeltnis-box .ab-box-header-clickable {
    cursor: pointer;
}
.ab-arbeitsverhaeltnis-box .ab-box-header-clickable:hover {
    background: rgba(0, 0, 0, 0.03);
}
.ab-arbeitsverhaeltnis-box--beendet.ab-arbeitsverhaeltnis-box--collapsed .gv-box-header {
    border-radius: 4px;
}
.ab-box-toggle {
    width: 22px;
    height: 22px;
    border: 1px solid #d6dde6;
    border-radius: 4px;
    background: #ffffff;
    color: #4a5568;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ab-box-toggle:hover {
    background: #f7fafc;
    border-color: #c9d3df;
    color: #2d3748;
}
.ab-arbeitsverhaeltnis-box--beendet .ab-box-toggle {
    border-color: #f4b7b7;
    background: #fff5f5;
    color: #9b2c2c;
}

/* Zeitstrahl rechts (visuell verbessert) */
.ab-timeline-wrap--right {
    margin: 0;
    padding: 10px 12px 12px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    border: 1px solid #d6dde6;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.ab-timeline-wrap--right::before {
    content: none;
}
.ab-timeline-wrap--right .ab-timeline {
    gap: 8px;
}
.ab-timeline-wrap--right .ab-timeline-scale {
    height: 18px;
    font-size: 10px;
    font-weight: 600;
    color: #526275;
    letter-spacing: 0.01em;
}
.ab-timeline-wrap--right .ab-timeline-track {
    min-height: 26px;
    padding: 4px;
    background: #f8fbff;
    border-radius: 6px;
    border: 1px solid #e3e9f0;
    box-shadow: none;
}
.ab-timeline-wrap--right .ab-timeline-lane {
    min-height: 22px;
    border-radius: 4px;
    background: #edf2f7;
    margin: 0 2px;
}
.ab-timeline-wrap--right .ab-timeline-segment {
    border-radius: 999px;
    min-height: 14px;
    box-shadow: none;
    background: linear-gradient(180deg, #3b82c4 0%, #2b6cb0 100%);
}
.ab-timeline-wrap--right .ab-timeline-segment:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(43, 108, 176, 0.28);
    filter: brightness(1.05);
}
.ab-timeline-wrap--right .ab-timeline-segment-label {
    font-size: 10px;
    color: #ffffff;
    padding: 0 6px;
    text-shadow: none;
}

/* ========== Kundendaten – Subreiter Fahrzeuge (fv-*) ========== */
.fv-root {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.fv-root--fullwidth {
    width: 100%;
}
.fv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #e5e7eb;
    background: #fafbfc;
}
.fv-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    letter-spacing: -0.01em;
}
.fv-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fv-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 20px;
}
.fv-empty {
    text-align: center;
    padding: 48px 24px;
    max-width: 420px;
    margin: 0 auto;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px dashed #e5e7eb;
}
.fv-empty-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: #374151;
}
.fv-empty-text {
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.5;
    color: #6b7280;
}
.fv-btn-empty {
    margin-top: 4px;
}
.fv-btn {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.fv-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}
.fv-btn-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
.fv-btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}
.fv-btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 5px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #4b5563;
    cursor: pointer;
    transition: background 0.15s;
}
.fv-btn-sm:hover {
    background: #f3f4f6;
}
.fv-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}
.fv-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.fv-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.fv-card-header {
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}
.fv-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}
.fv-card-body {
    padding: 16px;
}
.fv-vehicle-data {
    margin-bottom: 14px;
}
.fv-data-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    font-size: 13px;
    border-bottom: 1px solid #f3f4f6;
}
.fv-data-row:last-child {
    border-bottom: none;
}
.fv-data-label {
    color: #6b7280;
    flex-shrink: 0;
}
.fv-data-value {
    color: #374151;
    text-align: right;
    word-break: break-word;
}
.fv-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
}
.fv-section-title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.fv-contract-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    font-size: 13px;
}
.fv-contract-list li {
    padding: 0;
    border-bottom: none;
}
.fv-contract-item {
    margin-bottom: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}
.fv-contract-item:last-child {
    margin-bottom: 0;
}
/* Aktueller Vertrag – hervorgehoben */
.fv-contract-current {
    padding: 12px 14px;
    background: #eff6ff;
    border-bottom: 1px solid #bfdbfe;
    font-size: 13px;
}
.fv-contract-current-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #1d4ed8;
    margin-bottom: 4px;
}
.fv-contract-link--current {
    font-weight: 600;
    color: #1d4ed8;
}
.fv-contract-meta {
    color: #374151;
}
/* Vorvertrag / Vorversicherung – optisch untergeordnet */
.fv-contract-previous {
    padding: 10px 14px;
    background: #f8fafc;
    font-size: 12px;
    border-left: 3px solid #94a3b8;
}
.fv-contract-previous-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 4px;
}
.fv-contract-link--prev {
    color: #475569;
}
.fv-contract-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}
.fv-contract-link:hover {
    text-decoration: underline;
}
.fv-vorversicherung {
    font-size: 12px;
    color: #6b7280;
}
.fv-no-data {
    margin: 0 0 10px;
    font-size: 13px;
    color: #6b7280;
}
.fv-assign {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 13px;
}
.fv-assign label {
    color: #4b5563;
    font-weight: 500;
}
.fv-assign-select {
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    min-width: 200px;
}
.fv-table-wrap {
    overflow-x: auto;
    margin-top: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}
.fv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.fv-table th,
.fv-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
}
.fv-table th {
    font-weight: 600;
    color: #4b5563;
    background: #f9fafb;
    white-space: nowrap;
}
.fv-table tbody tr:hover {
    background: #fafbfc;
}
.fv-card-actions {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* Fahrzeuge Modals */
.fv-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}
.fv-modal {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    max-width: 440px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.fv-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #fafbfc;
}
.fv-modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}
.fv-modal-close {
    padding: 4px 8px;
    font-size: 20px;
    line-height: 1;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    border-radius: 4px;
}
.fv-modal-close:hover {
    color: #374151;
    background: #f3f4f6;
}
.fv-modal-body {
    padding: 20px;
    overflow: auto;
}
.fv-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #e5e7eb;
    background: #fafbfc;
}
.fv-form-row {
    margin-bottom: 14px;
}
.fv-form-row:last-of-type {
    margin-bottom: 0;
}
.fv-form-row label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
    color: #374151;
}
.fv-form-row input,
.fv-form-row select,
.fv-form-row textarea {
    width: 100%;
    max-width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
}
.fv-form-row input:focus,
.fv-form-row select:focus,
.fv-form-row textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Reiter Arbeit/Beruf: gleiche Breite wie Zeitstrahl – 4 gleich breite Boxen, volle nutzbare Breite */
.ab-container .gv-boxes-wrapper.gv-boxes-wrapper--ab,
.ab-container .gv-boxes-wrapper {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 12px 14px;
    width: 100%;
    box-sizing: border-box;
}
.ab-arbeitsverhaeltnis-box {
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    min-width: 0;
    max-width: none;
}
/* Beendete Arbeitsverhältnisse: leichter roter Schimmer */
.ab-arbeitsverhaeltnis-box--beendet {
    background: #fef2f2;
    border-color: #fecaca;
}
.ab-arbeitsverhaeltnis-box--beendet .gv-box-header {
    background: #fee2e2;
    border-bottom-color: #fecaca;
}
/* Nummerierung 1–x neben Bearbeiten-Button */
.ab-box-nummer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: #4a5568;
    background: #e2e8f0;
    border-radius: 4px;
    flex-shrink: 0;
}
.ab-arbeitsverhaeltnis-box--beendet .ab-box-nummer {
    background: #fecaca;
    color: #991b1b;
}
.ab-arbeitsverhaeltnis-box .gv-box-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
}
.ab-arbeitsverhaeltnis-box .gv-box-title {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}
.ab-arbeitsverhaeltnis-box .gv-box-body .gv-data-row {
    padding: 3px 0;
    font-size: 11px;
    border-bottom: none;
}
.ab-arbeitsverhaeltnis-box .gv-data-label {
    flex: 0 0 115px;
    min-width: 0;
    font-size: 11px;
    color: #4a5568;
}
.ab-arbeitsverhaeltnis-box .gv-data-value {
    font-size: 11px;
}
.ab-arbeitsverhaeltnis-box .gv-data-row--combined .gv-data-label {
    flex: 0 0 72px;
}
.ab-box-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.ab-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    margin-left: 6px;
    flex-shrink: 0;
}
.ab-status-badge--aktiv {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #86efac;
}
.ab-status-badge--beendet {
    color: #166534;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
}
.ab-btn-edit {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #fff;
    color: #2d3748;
    cursor: pointer;
}
.ab-btn-edit:hover {
    background: #f7fafc;
    border-color: #cbd5e0;
    color: #2d3748;
}
/* Modal Arbeit/Beruf */
.ab-modal .ct-modal-body {
    padding: 16px 18px;
    overflow-y: auto;
}
.ab-form-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    gap: 10px;
}
.ab-form-row label {
    flex: 0 0 200px;
    font-size: 12px;
    font-weight: 500;
    color: #4a5568;
}
.ab-form-row input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}
.ab-form-block {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}
.ab-form-block-label {
    font-size: 12px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 8px;
}
.ab-vorher-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ab-vorher-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ab-vorher-label {
    flex: 0 0 200px;
    font-size: 12px;
    color: #4a5568;
}
.ab-vorher-input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}
.ab-vorher-add {
    margin-top: 8px;
    padding: 6px 14px;
    font-size: 12px;
}
.ab-vorher-remove {
    flex-shrink: 0;
    padding: 4px 10px;
    font-size: 14px;
    line-height: 1;
}

.ab-radio-group,
.ab-check-group,
.ab-check-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
}
.ab-radio-group label,
.ab-check-group label,
.ab-check-wrap label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    cursor: pointer;
    font-size: 12px;
    color: #4a5568;
}
.ab-bev-list,
.ab-vv-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ab-bev-row,
.ab-vv-row {
    padding: 10px 12px;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    position: relative;
}
.ab-bev-row .ab-form-row,
.ab-vv-row .ab-form-row {
    margin-bottom: 8px;
}
.ab-bev-row .ab-form-row:last-child,
.ab-vv-row .ab-form-row:last-child {
    margin-bottom: 0;
}
.ab-bev-ebv-fields {
    margin-top: 8px;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}
.ab-bev-remove,
.ab-vv-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1;
}
.ab-bev-add,
.ab-vv-add {
    margin-top: 8px;
    padding: 6px 14px;
    font-size: 12px;
}
.ab-vv-row select,
.ab-bev-row select {
    min-width: 140px;
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}

/* Buttons */
.ct-btn {
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.ct-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.ct-btn--primary {
    background: #4299e1;
    border-color: #3182ce;
}

.ct-btn--primary:hover {
    background: #3182ce;
}

.ct-btn--secondary {
    background: #48bb78;
    border-color: #38a169;
}

.ct-btn--secondary:hover {
    background: #38a169;
}

/* Tabellen-Wrapper – das ist der Scroll-Container */
.ct-table-wrapper {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: #fff;
    border: 1px solid #d1d5db;
    border-top: none;
    border-radius: 0 0 6px 6px;
}

/* Footer-Zeile unter der Tabelle (z. B. Ablage: „X Einträge“) */
.ct-footer-info {
    flex-shrink: 0;
    padding: 6px 14px;
    font-size: 11px;
    color: #718096;
    background: #f7fafc;
    border: 1px solid #d1d5db;
    border-top: none;
    border-radius: 0 0 6px 6px;
}

/* Select/ Dropdown im dunklen ct-Header (z. B. Ablage Filter) */
.ct-header-select {
    padding: 4px 8px;
    font-size: 11px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    cursor: pointer;
    min-width: 100px;
}
.ct-header-select:hover {
    background: rgba(255, 255, 255, 0.25);
}
.ct-header-select option {
    background: #2d3748;
    color: #fff;
}

.ct-header-filters input[type="radio"] {
    width: 13px;
    height: 13px;
    cursor: pointer;
    accent-color: #4299e1;
}

/* Ablage: Betreff/ Beschreibung in Tabellenzelle */
.ct-td-subject {
    font-weight: 600;
    color: #2d6cdf;
}
.ct-td-desc {
    font-size: 10px;
    color: #718096;
    margin-top: 2px;
}
/* Ablage: Von/An-Spalte gut lesbar (z. B. VN-VM, VM-VU) */
.ct-td-von-an {
    min-width: 90px;
    white-space: nowrap;
    font-weight: 500;
    color: #2d3748;
}
tr.ablage-row {
    cursor: pointer;
}

/* Tabelle */
.ct-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 11px;
}

/* Sticky Header */
.ct-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Header-Zellen */
.ct-th {
    padding: 8px 10px;
    background: linear-gradient(180deg, #f7fafc 0%, #edf2f7 100%);
    border-bottom: 2px solid #cbd5e0;
    border-right: 1px solid #e2e8f0;
    font-weight: 600;
    font-size: 11px;
    color: #4a5568;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    user-select: none;
}

.ct-th:last-child {
    border-right: none;
}

.ct-th--center {
    text-align: center;
}

.ct-th--right {
    text-align: right;
}

.ct-th--resizable {
    cursor: default;
}

.ct-th-label {
    display: block;
    padding-right: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Resize Handle */
.ct-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s ease;
}

.ct-resize-handle:hover,
.ct-resize-handle:active {
    background: rgba(66, 153, 225, 0.4);
}

/* Body-Zellen */
.ct-td {
    padding: 6px 10px;
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #f0f0f0;
    background: #fff;
    color: #2d3748;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-td:last-child {
    border-right: none;
}

.ct-td--center {
    text-align: center;
}

.ct-td--right {
    text-align: right;
}

/* Zeilen */
.ct-row {
    transition: background-color 0.1s ease;
}

.ct-row:hover .ct-td {
    background: #f7fafc;
}

.ct-row:focus {
    outline: 2px solid #2d6cdf;
    outline-offset: -2px;
    background-color: #ebf8ff;
}

.ct-row--selected .ct-td {
    background: #ebf8ff !important;
    border-bottom-color: #bee3f8;
}

.ct-row--cancelled .ct-td {
    background: #fff5f5;
    color: #c53030;
}

.ct-row--cancelled:hover .ct-td {
    background: #fed7d7;
}

.ct-row--consultation .ct-td {
    background: #fffff0;
}

.ct-row--consultation:hover .ct-td {
    background: #fefcbf;
}

/* Leere Zeile */
.damages-tab-row {
    cursor: pointer;
}
.damages-tab-schadensnummer-link {
    color: #3182ce;
    text-decoration: none;
    cursor: pointer;
}
.damages-tab-schadensnummer-link:hover {
    text-decoration: underline;
}

.ct-row--empty .ct-td,
.ct-empty-cell {
    padding: 40px 20px;
    text-align: center;
    color: #a0aec0;
    font-style: italic;
    background: #fafafa;
}

/* Links in der Tabelle */
.ct-link {
    color: #3182ce;
    text-decoration: none;
    font-weight: 600;
}

.ct-link:hover {
    color: #2b6cb0;
    text-decoration: underline;
}

/* Schäden-Spalte: Link + Dropdown-Pfeil für Schadennummern */
.ct-damages-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ct-damages-dropdown-trigger {
    padding: 0 4px;
    min-width: 20px;
    height: 18px;
    border: none;
    background: transparent;
    color: #3182ce;
    font-size: 10px;
    cursor: pointer;
    line-height: 1;
    border-radius: 2px;
}

.ct-damages-dropdown-trigger:hover {
    background: rgba(49, 130, 206, 0.12);
    color: #2b6cb0;
}

.ct-damages-dropdown {
    display: none;
    position: fixed;
    min-width: 120px;
    max-height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 10000;
    padding: 4px 0;
}

.ct-damages-cell.ct-damages-dropdown--open .ct-damages-dropdown {
    display: block;
}

.ct-damages-dropdown-item {
    display: block;
    padding: 6px 10px;
    font-size: 12px;
    color: #3182ce;
    text-decoration: none;
    white-space: nowrap;
}

.ct-damages-dropdown-item:hover {
    background: #edf2f7;
    color: #2b6cb0;
}

/* Notice/Hinweis */
.ct-notice {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    background: #48bb78;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

/* ========== Spalten-Modal ========== */

.ct-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ct-modal-overlay--visible {
    opacity: 1;
    visibility: visible;
}

.ct-modal {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    width: 360px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ct-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(180deg, #4a5568 0%, #2d3748 100%);
    color: #fff;
}

.ct-modal-title {
    font-size: 14px;
    font-weight: 600;
}

.ct-modal-close {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ct-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.ct-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
}

.ct-form-row {
    margin-bottom: 12px;
}
.ct-form-row label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 4px;
}
.ct-form-row input[type="text"],
.ct-form-row select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 13px;
}
.contract-vp-modal .ct-modal {
    min-width: 360px;
}

.ct-modal-hint {
    font-size: 11px;
    color: #718096;
    margin: 0 0 12px 0;
}

.ct-col-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ct-col-row {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    transition: background 0.1s ease;
}

.ct-col-row:hover {
    background: #edf2f7;
}

.ct-col-option {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    font-size: 12px;
    color: #2d3748;
    cursor: pointer;
}

.ct-col-cb {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: #4299e1;
}

.ct-col-arrows {
    display: flex;
    gap: 4px;
}

.ct-col-move {
    width: 26px;
    height: 26px;
    border: 1px solid #cbd5e0;
    background: #fff;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    color: #4a5568;
    transition: all 0.1s ease;
}

.ct-col-move:hover {
    background: #edf2f7;
    border-color: #a0aec0;
}

.ct-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 18px;
    background: #f7fafc;
    border-top: 1px solid #e2e8f0;
}

.ct-modal-footer .ct-btn {
    background: #fff;
    color: #4a5568;
    border: 1px solid #cbd5e0;
}

.ct-modal-footer .ct-btn:hover {
    background: #edf2f7;
}

.ct-modal-footer .ct-btn--primary {
    background: #4299e1;
    color: #fff;
    border-color: #3182ce;
}

.ct-modal-footer .ct-btn--primary:hover {
    background: #3182ce;
}

/* ========== Vorgänge-Center: Modal "Aufgabe erfassen" ========== */

.tc-erfassen-overlay.ct-modal-overlay {
    align-items: center;
    justify-content: center;
}

.tc-erfassen-modal.ct-modal {
    width: 520px;
    max-width: 92vw;
}

.tc-erfassen-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tc-erfassen-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tc-erfassen-label {
    font-size: 12px;
    font-weight: 600;
    color: #4a5568;
}

.tc-erfassen-input,
.tc-erfassen-select,
.tc-erfassen-textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: 13px;
    color: #2d3748;
    box-sizing: border-box;
}

.tc-erfassen-input:focus,
.tc-erfassen-select:focus,
.tc-erfassen-textarea:focus {
    outline: none;
    border-color: #4299e1;
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.2);
}

.tc-erfassen-textarea {
    resize: vertical;
    min-height: 80px;
}

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

.tc-erfassen-faellig .tc-erfassen-label {
    margin-bottom: 2px;
}

.tc-erfassen-faellig-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tc-erfassen-date {
    width: 110px;
}

.tc-erfassen-date-icon {
    font-size: 16px;
    color: #718096;
    cursor: default;
}

.tc-erfassen-time {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tc-erfassen-time-inp {
    width: 48px;
    padding: 6px 4px;
    text-align: center;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: 13px;
}

.tc-erfassen-time-sep {
    color: #718096;
    font-weight: 600;
}

.tc-erfassen-check-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #2d3748;
    cursor: pointer;
}

.tc-erfassen-check {
    width: 16px;
    height: 16px;
    accent-color: #4299e1;
}

.tc-erfassen-mir-zuweisen {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: #4299e1;
    text-decoration: none;
}

.tc-erfassen-mir-zuweisen:hover {
    text-decoration: underline;
}

.tc-erfassen-section {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}

.tc-erfassen-section-title {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 10px;
}

.tc-erfassen-ablegen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.tc-erfassen-ablegen-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid #cbd5e0;
    background: #fff;
    border-radius: 6px;
    font-size: 12px;
    color: #4a5568;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tc-erfassen-ablegen-btn:hover {
    background: #f7fafc;
    border-color: #a0aec0;
}

.tc-erfassen-ablegen-btn.active {
    border-color: #4299e1;
    background: #ebf8ff;
    color: #2b6cb0;
}

.tc-erfassen-ablegen-select-wrap {
    margin-top: 4px;
}

.tc-erfassen-ablegen-select-wrap .tc-erfassen-select {
    width: 100%;
}

/* ========== Schäden-Tab: Vertragsauswahl & Schadenanlage-Maske ========== */

.damages-contract-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.damages-contract-row {
    padding: 12px 14px;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    font-size: 12px;
    color: #2d3748;
}

.damages-contract-row:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
}

.damages-contract-label {
    display: block;
}

/* Vorgänge-Tab: Modal „Vorgang anlegen“ – Typ-Auswahl */
.vorgaenge-typ-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vorgaenge-typ-option {
    padding: 12px 14px;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    font-size: 13px;
    color: #2d3748;
}
.vorgaenge-typ-option:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
}

/* Vorgänge-Tab: anklickbare ID-Spalte */
.ct-td-id-link {
    font-weight: 500;
}
.vorgaenge-id-link {
    color: #2563eb;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.vorgaenge-id-link:hover {
    color: #1d4ed8;
    border-bottom-color: #1d4ed8;
}
.vorgaenge-row:hover .vorgaenge-id-link {
    text-decoration: underline;
}

.damages-form-section {
    margin: 20px 0 10px 0;
    padding-bottom: 6px;
    font-size: 12px;
    color: #4a5568;
    border-bottom: 1px solid #e2e8f0;
}

.damages-form-section:first-child {
    margin-top: 0;
}

.damages-form-row {
    margin-bottom: 12px;
}

.damages-form-row--inline {
    display: inline-block;
    vertical-align: top;
    margin-right: 12px;
    margin-bottom: 12px;
}

.damages-form-body {
    max-height: 65vh;
    overflow-y: auto;
}

.damages-form-checkbox-label {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11px;
    color: #718096;
    cursor: pointer;
}

.damages-form-checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

.ct-modal.damages-modal--form {
    width: 520px;
    max-width: 90vw;
}

/* ========== Schadenanlage-Tab (eigene Seite) ========== */
.schadenanlage-page {
    padding: 20px 24px;
    max-width: 720px;
    margin: 0 auto;
}

.schadenanlage-header {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.schadenanlage-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 10px;
}

.schadenanlage-context-line {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    font-size: 12px;
    color: var(--text-light);
}

.schadenanlage-context-line span+span::before {
    content: ' · ';
    margin-right: 4px;
    color: #cbd5e0;
}

.schadenanlage-form-body {
    margin-bottom: 20px;
}

.schadenanlage-hint,
.schadenanlage-pflicht {
    font-size: 11px;
    color: var(--text-light);
    margin: 0 0 10px 0;
}

.schadenanlage-footer {
    display: flex;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

/* Schaden-Detail-Tab (eigener Tab pro Schaden, Aufbau wie Screenshot) */
.damage-detail-page {
    padding: 0 24px 32px;
    max-width: 100%;
    margin: 0;
}

/* Gesamter Header in dunkelblau (Titel + Badge + Typ/Gesellschaft/Vertragsnummer) */
.damage-detail-header-wrap {
    background: #1e3a5f;
    color: #e2e8f0;
    padding: 20px 24px;
    margin: 0 -24px 20px -24px;
    border-radius: 0;
}

.damage-detail-header-wrap .damage-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 0;
}

.damage-detail-header-wrap .damage-detail-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.damage-detail-header-wrap .damage-detail-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.damage-detail-header-wrap .damage-detail-badge--offen {
    background: #fef08a;
    color: #854d0e;
}

.damage-detail-header-wrap .damage-detail-badge--bearbeitung {
    background: #bfdbfe;
    color: #1e40af;
}

.damage-detail-header-wrap .damage-detail-badge--reguliert {
    background: #d1fae5;
    color: #065f46;
}

.damage-detail-header-wrap .damage-detail-policy {
    background: transparent;
    color: #e2e8f0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 24px 32px;
    font-size: 13px;
}

.damage-detail-header-wrap .damage-detail-policy-item {
    display: inline-block;
}

.damage-detail-header-wrap .damage-detail-policy-item strong {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #94a3b8;
    margin-bottom: 2px;
}

.damage-detail-header-wrap .damage-detail-policy-link {
    opacity: 0.9;
    font-size: 12px;
}

.damage-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 0;
}

.damage-detail-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.damage-detail-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.damage-detail-badge--offen {
    background: #fef08a;
    color: #854d0e;
}

.damage-detail-badge--bearbeitung {
    background: #bfdbfe;
    color: #1e40af;
}

.damage-detail-badge--reguliert {
    background: #d1fae5;
    color: #065f46;
}

.damage-detail-policy {
    background: #4a5568;
    color: #fff;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    font-size: 13px;
}

.damage-detail-policy-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.damage-detail-policy-link {
    opacity: 0.9;
    font-size: 12px;
}

.damage-detail-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0;
}

.damage-detail-tab {
    padding: 10px 16px;
    font-size: 13px;
    border: none;
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    margin-bottom: -1px;
}

.damage-detail-tab:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-main);
}

.damage-detail-tab.active {
    background: #e5e7eb;
    color: var(--text-main);
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-bottom-color: #e5e7eb;
}

.damage-detail-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.damage-detail-col--left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.damage-detail-col--right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (max-width: 900px) {
    .damage-detail-body {
        grid-template-columns: 1fr;
    }
}

.damage-detail-box {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 14px 16px;
}

.damage-detail-box-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--text-main);
}

.damage-detail-box-subtitle {
    font-size: 12px;
    font-weight: 600;
    margin: 12px 0 8px;
    color: var(--text-light);
}

.damage-detail-grid {
    display: grid;
    gap: 8px 16px;
}

.damage-detail-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 12px;
    font-size: 12px;
}

.damage-detail-row--full {
    grid-template-columns: 1fr;
}

.damage-detail-label {
    color: var(--text-light);
}

.damage-detail-value {
    color: var(--text-main);
}

.damage-detail-status {
    font-weight: 600;
}

.damage-detail-placeholder {
    padding: 24px;
    color: var(--text-light);
    font-size: 14px;
}

.damage-detail-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.vorgang-ablage-drop {
    min-width: 200px;
    padding: 8px 24px;
    font-size: 12px;
    border: 2px dashed rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.15);
    color: #e2e8f0;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
    box-sizing: border-box;
}

.vorgang-ablage-drop:hover,
.vorgang-ablage-drop:focus {
    border-color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.25);
    outline: none;
}

.vorgang-ablage-drop.vorgang-ablage-drop--over {
    border-color: #34d399;
    background: rgba(52, 211, 153, 0.2);
    color: #fff;
}

/* ========== Vorgangs-Maske (Aufgabe, GeVo, Antrag – einheitliches Layout) ========== */
.vorgang-detail-page {
    padding: 0 24px 32px;
    max-width: 100%;
    margin: 0;
}

.vorgang-detail-header-wrap {
    background: #1e3a5f;
    color: #e2e8f0;
    padding: 20px 24px;
    margin: 0 -24px 20px -24px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.vorgang-detail-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.vorgang-detail-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.vorgang-detail-badge--open {
    background: #fef08a;
    color: #854d0e;
}

.vorgang-detail-badge--done {
    background: #d1fae5;
    color: #065f46;
}

.vorgang-detail-body {
    padding: 0;
}

.vorgang-detail-box {
    background: #fff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.vorgang-detail-box-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main, #1f2937);
    margin: 0 0 12px 0;
}

.vorgang-detail-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px 20px;
    align-items: start;
}

.vorgang-detail-row {
    display: contents;
}

.vorgang-detail-label {
    font-size: 13px;
    color: var(--text-light, #6b7280);
}

.vorgang-detail-value {
    font-size: 13px;
    color: var(--text-main, #1f2937);
}

.vorgang-detail-actions {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.vorgang-detail-btn-open-contract {
    padding: 8px 16px;
    font-size: 13px;
    background: #2980b9;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.vorgang-detail-btn-open-contract:hover {
    background: #1e6dad;
}

/* Innentabs (Übersicht, andere Vorgänge, Ablage, Historie) – einheitlich für alle Vorgangsarten */
.vorgang-inner-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 -24px 16px -24px;
    padding: 0 24px 12px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.vorgang-inner-tab {
    padding: 10px 16px;
    font-size: 13px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-light, #6b7280);
    cursor: pointer;
}

.vorgang-inner-tab:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-main, #1f2937);
}

.vorgang-inner-tab.active {
    background: #1e3a5f;
    color: #fff;
}

/* ========== Legacy-Klassen für Kompatibilität ========== */
/* Diese Klassen bleiben für andere Komponenten erhalten */

.contract-row,
.contracts-tab-row {
    transition: all 0.15s ease-in-out;
}

.contract-row:hover,
.contracts-tab-row:hover {
    filter: brightness(0.95);
    transform: translateX(2px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.contract-row.selected,
.contracts-tab-row.selected {
    outline: 2px solid #2d6cdf !important;
    outline-offset: -2px;
    background-color: #e3f2fd !important;
    position: relative;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(45, 108, 223, 0.2);
}

.contract-row.selected td,
.contracts-tab-row.selected td {
    border-color: #90caf9 !important;
}

/* ========== view-main (Kunden-Tabs) ========== */
#view-main {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
    display: none;
    padding: 0;
    background: #f9f9f9;
}

/* ========== Postfach / Mailbox (kompakt) ========== */
.mailbox-page {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: #f9f9f9;
}

.mailbox-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Header: eine Zeile, kompakt */
.mailbox-header {
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #fafafa;
}

.mailbox-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.mailbox-header-sep {
    color: var(--border-color);
    font-weight: 300;
    user-select: none;
}

.mailbox-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
    flex-shrink: 0;
}

.mailbox-header-postfach-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mailbox-postfach-selector-label {
    font-size: 11px;
    color: var(--text-light);
    white-space: nowrap;
}

.mailbox-postfach-checkboxes {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mailbox-postfach-option {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-main);
    cursor: pointer;
    white-space: nowrap;
}

.mailbox-postfach-option input.mailbox-postfach-cb {
    margin: 0;
    cursor: pointer;
}

.mailbox-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.mailbox-stat {
    font-size: 10px;
    color: var(--text-light);
    padding: 3px 8px;
    background: #eee;
    border-radius: 10px;
}

.mailbox-btn-dokumentation {
    padding: 4px 10px;
    font-size: 10px;
    background: #f0f0f0;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    cursor: pointer;
    color: var(--text-main);
}

.mailbox-btn-dokumentation:hover {
    background: #e8e8e8;
}

/* Main Tabs */
.mailbox-main-tabs {
    display: flex;
    background: #f5f5f5;
    border-bottom: 1px solid var(--border-color);
    padding: 0 14px;
    gap: 2px;
}

.mailbox-main-tab {
    background: transparent;
    border: none;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-light);
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mailbox-main-tab:hover {
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.03);
}

.mailbox-main-tab.active {
    color: var(--brand-blue-end);
    font-weight: 600;
    background: #fff;
    border-radius: 3px 3px 0 0;
    margin-bottom: -1px;
    border: 1px solid var(--border-color);
    border-bottom: 1px solid #fff;
}

.mailbox-tab-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 5px;
    background: #e8e8e8;
    border-radius: 8px;
    color: var(--text-light);
}

.mailbox-main-tab.active .mailbox-tab-badge {
    background: var(--brand-blue-end);
    color: #fff;
}

/* ========== Postfach: vm-page mit Dashboard + Tabs wie Geschäftsvorfälle ========== */
/* #view-mailbox: app-view mit display:flex gesetzt in JS, damit Inhalt volle Höhe nutzt */
#view-mailbox.app-view {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.vm-page--mailbox.mailbox-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #1e2d3a;
    width: 100%;
}
.vm-page--mailbox .mb-header {
    flex-shrink: 0;
    min-height: 52px;
    padding: 14px 20px;
    background: #1e2d3a;
    border-bottom: 1px solid #3d5166;
}
.vm-page--mailbox .mb-header .vm-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}
.vm-page--mailbox .mailbox-stat {
    font-size: 11px;
    color: #8fa4b8;
    padding: 4px 10px;
    background: #2c3e50;
    border: 1px solid #3d5166;
    border-radius: 4px;
}
.vm-page--mailbox .vm-btn-dokumentation,
.vm-page--mailbox .mailbox-btn-dokumentation.vm-btn-dokumentation {
    padding: 6px 12px;
    font-size: 12px;
    background: #34495e;
    border: 1px solid #3d5166;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
}
.vm-page--mailbox .vm-btn-dokumentation:hover,
.vm-page--mailbox .mailbox-btn-dokumentation.vm-btn-dokumentation:hover {
    background: #3d5166;
}
.vm-page--mailbox #mailbox-stats-section {
    flex-shrink: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    max-height: 500px;
    opacity: 1;
}
.vm-page--mailbox #mailbox-stats-section.collapsed {
    max-height: 0;
    opacity: 0;
    padding: 0;
}
.vm-page--mailbox .vm-stats-row--mailbox {
    padding: 0 20px 16px;
    background: #1e2d3a;
}
.vm-page--mailbox .mb-tabs-wrapper.gvc-tabs-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
}
.vm-page--mailbox .gvc-tabs-header {
    flex-shrink: 0;
    display: flex;
    gap: 4px;
    padding: 0 20px;
    background: #2c3e50;
    border-bottom: 1px solid #3d5166;
}
.vm-page--mailbox .mb-tab-btn.gvc-tab-btn {
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #8fa4b8;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.vm-page--mailbox .mb-tab-btn.gvc-tab-btn:hover {
    color: #fff;
}
.vm-page--mailbox .mb-tab-btn.gvc-tab-btn.gvc-tab-btn--active {
    color: #fff;
    border-bottom-color: #4a90d9;
    font-weight: 600;
}
.vm-page--mailbox .mb-tab-btn .mailbox-tab-badge {
    font-size: 10px;
    padding: 2px 6px;
    background: rgba(255,255,255,0.2);
    border-radius: 8px;
    color: #8fa4b8;
}
.vm-page--mailbox .mb-tab-btn.gvc-tab-btn--active .mailbox-tab-badge {
    background: #4a90d9;
    color: #fff;
}
.vm-page--mailbox .gvc-tabs-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.vm-page--mailbox .gvc-tab-panel[data-mb-panel] {
    display: none;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
.vm-page--mailbox .gvc-tab-panel[data-mb-panel].gvc-tab-panel--active {
    display: flex;
}
.vm-page--mailbox .gvc-tab-panel[data-mb-panel="postfach"] .mailbox-content-area {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.vm-page--mailbox .gvc-tab-panel[data-mb-panel="postfach"] .mailbox-emails-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.vm-page--mailbox .gvc-tab-panel[data-mb-panel="postfach"] .mailbox-sub-tabs {
    flex-shrink: 0;
    padding: 8px 14px;
    background: #f5f5f5;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 4px;
}
.vm-page--mailbox .gvc-tab-panel[data-mb-panel="vorlagen-emails"] {
    flex: 1;
    min-height: 0;
    padding: 16px 20px;
    overflow: auto;
}

/* Main Content (legacy: falls noch verwendet) */
.mailbox-main-content {
    flex: 1;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.mailbox-main-content.active {
    display: flex;
}

.mailbox-personal-smtp-banner {
    padding: 10px 14px;
    background: #e3f2fd;
    border-bottom: 1px solid #90caf9;
    font-size: 12px;
    color: #1565c0;
}

.mailbox-email-vorlagen {
    padding: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mailbox-email-vorlagen .vorlagen-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.mailbox-email-vorlagen .vorlagen-add-btn {
    padding: 6px 14px;
    background: var(--brand-blue-end);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.mailbox-email-vorlagen .vorlagen-add-btn:hover {
    background: #1a4d8f;
}

.mailbox-email-vorlagen .vorlagen-table-scroll {
    flex: 1;
    overflow: auto;
}

.mailbox-email-vorlagen .mailbox-email-vorlagen-dropdown {
    position: fixed;
    z-index: 10000;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 4px 0;
    min-width: 120px;
    display: none;
}

.mailbox-email-vorlagen .mailbox-email-vorlagen-dropdown.is-open {
    display: block;
}

.mailbox-email-vorlagen .vorlagen-dropdown-item {
    display: block;
    width: 100%;
    padding: 6px 12px;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 12px;
}

.mailbox-email-vorlagen .vorlagen-dropdown-item:hover {
    background: #f0f0f0;
}

/* Sub Tabs (Ordner) */
.mailbox-sub-tabs {
    display: flex;
    gap: 3px;
    padding: 5px 14px;
    background: #fafafa;
    border-bottom: 1px solid var(--border-color);
}

.mailbox-sub-tab {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 4px 10px;
    font-size: 10px;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mailbox-sub-tab:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

.mailbox-sub-tab.active {
    background: var(--brand-blue-end);
    border-color: var(--brand-blue-end);
    color: #fff;
}

.mailbox-sub-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 4px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 6px;
}

.mailbox-sub-tab.active .mailbox-sub-badge {
    background: rgba(255, 255, 255, 0.25);
}

/* Content Area */
.mailbox-content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 10px 14px;
    background: #f9f9f9;
}

.mailbox-content-area--emails {
    padding: 0;
    background: #fff;
}

.mailbox-emails-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.mailbox-sub-badge-inline {
    font-weight: normal;
    opacity: 0.9;
    font-size: 9px;
}

/* E-Mails: Zwei-Spalten (Liste | Detail) */
.mailbox-emails-split {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.mailbox-emails-list-panel {
    flex: 0 0 50%;
    min-width: 280px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    overflow: hidden;
}

.mailbox-emails-detail-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
    background: #fafafa;
}

.mailbox-list-header--emails {
    display: grid;
    grid-template-columns: 24px 1fr 120px 90px 28px;
    gap: 8px;
    padding: 6px 10px;
    background: #4a5568;
    color: #e2e8f0;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
}

.mailbox-list-th:first-child {
    grid-column: 1;
}

.mailbox-list-th--sortable {
    cursor: pointer;
}

.mailbox-list-body {
    flex: 1;
    overflow: auto;
}

.mailbox-email-row {
    display: grid;
    grid-template-columns: 24px 1fr 120px 90px 28px;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    align-items: flex-start;
    font-size: 11px;
    background: #fff;
}

.mailbox-email-row:hover {
    background: #f5f5f5;
}

.mailbox-email-row--selected {
    background: #e8f4fc;
}

.mailbox-email-row--unread .mailbox-email-subject {
    font-weight: 600;
}

.mailbox-email-row-check {
    padding-top: 2px;
}

.mailbox-email-row-check input {
    margin: 0;
}

.mailbox-email-row-stammdaten {
    min-width: 0;
}

.mailbox-email-from,
.mailbox-email-to {
    font-size: 10px;
    color: var(--text-light);
}

.mailbox-email-subject {
    margin-top: 1px;
    color: var(--text-main);
    line-height: 1.3;
}

.mailbox-email-row-zuordnung {
    font-size: 10px;
    color: var(--text-main);
}

.mailbox-zuordnung-customer {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mailbox-zuordnung-icon {
    font-size: 12px;
}

.mailbox-zuordnung-link {
    margin-left: 4px;
    color: var(--brand-blue-end);
    cursor: pointer;
}

.mailbox-zuordnung-actions {
    margin-top: 4px;
}

.mailbox-zuordnung-action {
    display: block;
    color: var(--text-light);
    cursor: pointer;
}

.mailbox-zuordnung-action:hover {
    color: var(--brand-blue-end);
}

.mailbox-zuordnung-empty {
    color: var(--text-light);
}

.mailbox-zuordnung-edit {
    color: var(--brand-blue-end);
    cursor: pointer;
    margin-left: 4px;
    font-size: 9px;
}

.mailbox-zuordnung-edit:hover {
    text-decoration: underline;
}

/* Detail: Zuordnung-Block */
.mailbox-detail-zuordnung {
    padding: 8px 10px;
    margin: 8px 0;
    background: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 3px;
}

.mailbox-detail-zuordnung-title {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-main);
}

.mailbox-detail-zuordnung-line {
    font-size: 10px;
    padding: 2px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mailbox-zuordnung-remove {
    font-size: 10px;
    padding: 2px 8px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    cursor: pointer;
    color: var(--text-light);
}

.mailbox-zuordnung-remove:hover {
    color: #c62828;
    border-color: #c62828;
}

.mailbox-detail-zuordnung-empty {
    font-size: 11px;
    color: var(--text-light);
    font-style: italic;
}

.mailbox-detail-zuordnung-actions {
    margin-top: 10px;
}

.mailbox-zuordnung-edit-btn {
    font-size: 11px;
    padding: 6px 12px;
    background: var(--brand-blue-end);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.mailbox-zuordnung-edit-btn:hover {
    background: var(--brand-blue-start);
}

.mailbox-email-row-datum {
    font-size: 11px;
    color: var(--text-light);
    white-space: nowrap;
}

.mailbox-email-row-menu {
    text-align: right;
    position: relative;
}

.mailbox-row-menu-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-light);
    font-size: 22px;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.mailbox-row-menu-dots:hover {
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.06);
}

/* Dropdown Menü (3-Punkte) */
.mailbox-row-dropdown {
    position: fixed;
    z-index: 1000;
    min-width: 220px;
    padding: 6px 0;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 13px;
    display: none;
}

.mailbox-row-dropdown.is-open {
    display: block;
}

.mailbox-row-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    color: var(--text-main);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-size: 13px;
    transition: background 0.1s;
}

.mailbox-row-dropdown-item:hover {
    background: #f0f7ff;
}

.mailbox-row-dropdown-item-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-blue-end);
    font-size: 14px;
}

/* Mailbox Modals (Zuordnung, Dokumentation) */
.mailbox-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}

.mailbox-modal.is-open {
    display: flex;
}

.mailbox-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.mailbox-modal-box {
    position: relative;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    max-width: 480px;
    width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.mailbox-modal-box--doc {
    max-width: 720px;
    max-height: 90vh;
}

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

.mailbox-modal-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.mailbox-modal-close {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: var(--text-light);
    border-radius: 4px;
}

.mailbox-modal-close:hover {
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.06);
}

.mailbox-modal-body {
    padding: 18px;
    overflow-y: auto;
}

.mailbox-zuordnung-field {
    margin-bottom: 14px;
}

.mailbox-zuordnung-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-main);
}

.mailbox-zuordnung-field select,
.mailbox-zuordnung-field input[type="text"] {
    width: 100%;
    padding: 8px 10px;
    font-size: 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.mailbox-modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 12px 18px;
    border-top: 1px solid var(--border-color);
    background: #fafafa;
}

.mailbox-modal-btn {
    padding: 8px 16px;
    font-size: 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}

.mailbox-modal-btn--primary {
    background: var(--brand-blue-end);
    color: #fff;
    border-color: var(--brand-blue-end);
}

.mailbox-modal-btn--secondary {
    color: #c62828;
    border-color: #c62828;
}

.mailbox-modal-btn--secondary:hover {
    background: #ffebee;
}

.mailbox-doc-content {
    font-size: 11px;
    line-height: 1.5;
}

.mailbox-doc-pre {
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    font-family: inherit;
}

.mailbox-doc-loading,
.mailbox-doc-error {
    color: var(--text-light);
}

.mailbox-toolbar-count {
    font-size: 11px;
    color: var(--text-light);
    margin-left: auto;
    padding-left: 12px;
}

.mailbox-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.mailbox-detail-placeholder,
.mailbox-detail-content {
    padding: 12px 14px;
}

.mailbox-detail-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    color: var(--text-light);
    font-size: 12px;
}

.mailbox-detail-header {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.mailbox-detail-subject {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 6px;
}

.mailbox-detail-meta {
    font-size: 11px;
    color: var(--text-light);
    line-height: 1.45;
}

.mailbox-detail-date {
    display: block;
    margin-top: 4px;
}

.mailbox-detail-body {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-main);
    white-space: pre-wrap;
}

.mailbox-filter-btn--primary {
    background: var(--brand-blue-end);
    color: #fff;
    border: none;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mailbox-filter-btn--primary:hover {
    background: var(--brand-blue-start);
}

/* Filter Bar (Toolbar) */
.mailbox-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 6px 10px;
    background: #fafafa;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
}

.mailbox-filter-bar-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    flex: 1;
    min-width: 0;
}

.mailbox-filter-bar-left .mailbox-select-all {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-main);
    cursor: pointer;
    flex-shrink: 0;
}

.mailbox-filter-bar-left .mailbox-select-all input {
    margin: 0;
}

.mailbox-filter-bar-left .mailbox-selected-count {
    font-size: 11px;
    color: var(--text-light);
    flex-shrink: 0;
}

.mailbox-toolbar-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.mailbox-filter-bar-left .mailbox-toolbar-count {
    font-size: 11px;
    color: var(--text-light);
    margin-left: 0;
    padding-left: 0;
    flex-shrink: 0;
}

.mailbox-filter-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mailbox-filter-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mailbox-filter-dropdown-wrap {
    position: relative;
}

.mailbox-filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: 11px;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.15s;
}

.mailbox-filter-btn:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

.mailbox-filter-arrow {
    font-size: 8px;
    color: var(--text-light);
}

.mailbox-filter-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 180px;
    z-index: 100;
}

.mailbox-filter-dropdown.open {
    display: block;
}

.mailbox-filter-dropdown-title {
    padding: 8px 12px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-color);
    background: #fafafa;
}

.mailbox-filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.1s;
}

.mailbox-filter-option:hover {
    background: #f5f5f5;
}

.mailbox-filter-option input {
    margin: 0;
}

.mailbox-filter-info {
    font-size: 11px;
    color: var(--text-light);
}

.mailbox-filter-reset {
    background: transparent;
    border: none;
    font-size: 10px;
    color: var(--brand-blue-end);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    transition: all 0.15s;
}

.mailbox-filter-reset:hover {
    background: #f0f8ff;
}

/* Table Container */
.mailbox-table-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

/* Toolbar */
.mailbox-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #f5f5f5;
    border-bottom: 1px solid var(--border-color);
}

.mailbox-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mailbox-select-all {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-main);
    cursor: pointer;
}

.mailbox-select-all input {
    margin: 0;
}

.mailbox-toolbar-divider {
    width: 1px;
    height: 12px;
    background: var(--border-color);
}

.mailbox-selected-count {
    font-size: 11px;
    color: var(--text-light);
}

.mailbox-toolbar-right {
    display: flex;
    gap: 6px;
}

.mailbox-action-btn {
    padding: 5px 12px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: 11px;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.15s;
}

.mailbox-action-btn:hover {
    background: #f0f0f0;
    border-color: #bbb;
}

.mailbox-action-btn--primary {
    background: var(--brand-blue-end);
    border-color: var(--brand-blue-end);
    color: #fff;
}

.mailbox-action-btn--primary:hover {
    background: var(--brand-blue-start);
    border-color: var(--brand-blue-start);
}

.mailbox-action-btn--danger:hover {
    background: #fff5f5;
    border-color: #e74c3c;
    color: #e74c3c;
}

/* Toolbar Text-Buttons */
.mailbox-toolbar-text-btn {
    padding: 3px 8px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: 10px;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.mailbox-toolbar-text-btn:hover {
    background: #f0f0f0;
    border-color: #bbb;
}

.mailbox-toolbar-text-btn--danger {
    color: #c0392b;
}

.mailbox-toolbar-text-btn--danger:hover {
    background: #fff5f5;
    border-color: #e74c3c;
    color: #e74c3c;
}

/* Table Header */
.mailbox-table-header {
    display: grid;
    gap: 10px;
    padding: 10px 14px;
    background: #fafafa;
    border-bottom: 1px solid var(--border-color);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
}

.mailbox-table-header--business {
    grid-template-columns: 2fr 1fr 1fr 1fr;
}

.mailbox-table-header--emails {
    grid-template-columns: 28px 1.2fr 1.5fr 2fr 80px;
}

.mailbox-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.mailbox-table th,
.mailbox-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.mailbox-table tbody tr.mailbox-row {
    cursor: pointer;
}

.mailbox-table tbody tr.mailbox-row:hover {
    background: #f5f5f5;
}

.mailbox-table tbody tr.mailbox-row--unread .mailbox-td--subject {
    font-weight: 600;
}

.mailbox-td--snippet {
    color: var(--text-light);
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mailbox-td--date {
    white-space: nowrap;
    color: var(--text-light);
}

.mailbox-th {
    user-select: none;
}

.mailbox-th--sortable {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mailbox-th--sortable:hover {
    color: var(--text-main);
}

.mailbox-sort-arrow {
    font-size: 8px;
    opacity: 0.5;
}

/* Sub Content */
.mailbox-sub-content {
    display: none;
    flex: 1;
    overflow: auto;
    padding: 20px;
}

.mailbox-sub-content.active {
    display: block;
}

/* Empty State */
.mailbox-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    text-align: center;
}

.mailbox-empty-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-main);
    margin-bottom: 4px;
}

.mailbox-empty-hint {
    font-size: 10px;
    color: var(--text-light);
}

/* ========== Vorgänge-Center (visuell überarbeitet + Kalender) ========== */
.vm-page--tasks.tc-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-main);
}

.vm-page--tasks .tc-header {
    flex-shrink: 0;
    min-height: 52px;
    padding: 14px 20px;
    background: #1e2d3a;
    border-bottom: 1px solid #2d3f4f;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.vm-page--tasks .tc-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vm-page--tasks .tc-header .vm-title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
}

/* „Neue Aufgabe“-Button: eigener Stil (kein vm-add-btn Rund-Button) */
.vm-page--tasks .tc-header .tc-add-task {
    width: auto;
    min-width: 0;
    height: 36px;
    padding: 0 16px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.95);
    color: #1e2d3a;
    font-size: 13px;
    font-weight: 600;
    line-height: 36px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}

.vm-page--tasks .tc-header .tc-add-task:hover {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.vm-page--tasks .tc-header .tc-add-task:active {
    background: #e8ecf0;
}

.vm-page--tasks .tc-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Filter-Dropdown in Sidebar */
.tc-filter-dropdown-wrap {
    position: relative;
}

.tc-sidebar .tc-filter-dropdown-wrap .tc-filter-dropdown-panel {
    display: none;
    position: fixed;
    top: auto;
    left: auto;
    margin-top: 0;
    min-width: 320px;
    max-width: 400px;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1000;
}

.tc-sidebar .tc-filter-dropdown-wrap.open .tc-filter-dropdown-panel {
    display: block;
}

.tc-filter-dropdown-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.tc-filter-apply-btn {
    padding: 8px 16px;
    background: var(--brand-blue-end);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.tc-filter-apply-btn:hover {
    background: var(--brand-blue-start);
}

/* Toggle „Kalender einblenden“ (rechtsbündig im Header) */
.tc-calendar-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.tc-calendar-toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.tc-calendar-toggle-slider {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    background: #dde1e6;
    border-radius: 20px;
    transition: background 0.2s;
}

.tc-calendar-toggle-slider::before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.tc-calendar-toggle-input:checked+.tc-calendar-toggle-slider {
    background: var(--brand-blue-end);
}

.tc-calendar-toggle-input:checked+.tc-calendar-toggle-slider::before {
    transform: translateX(20px);
}

.tc-calendar-toggle-label {
    font-size: 11px;
    color: var(--text-main);
    font-weight: 500;
}

.tc-calendar-side--hidden {
    display: none !important;
}

/* Haupt-Tabs: Liste | Kalender */
.tc-main-tabs {
    flex-shrink: 0;
    display: flex;
    gap: 4px;
    padding: 12px 20px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.tc-main-tab {
    padding: 10px 20px;
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: var(--grad-tab);
    color: var(--text-light);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 0.15s, background 0.15s;
}

.tc-main-tab:hover {
    color: var(--text-main);
    background: linear-gradient(180deg, #f5f5f5 0%, #e8e8e8 100%);
}

.tc-main-tab.active {
    color: var(--brand-blue-end);
    font-weight: 600;
    background: var(--bg-white);
    border-bottom: 1px solid var(--bg-white);
}

.tc-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-white);
}

.tc-content--split {
    flex-direction: row;
}

/* Linke Sidebar: Neue Aufgabe, Filter, Status-Tabs */
.tc-sidebar {
    flex: 0 0 220px;
    min-width: 200px;
    max-width: 250px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    background: linear-gradient(180deg, #fafbfc 0%, #f0f2f5 100%);
    border-right: 1px solid var(--border-color);
}

.tc-sidebar-section {
    flex-shrink: 0;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.tc-sidebar-section:last-child {
    border-bottom: none;
}

.tc-sidebar-btn {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #fff;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tc-sidebar-btn:hover {
    background: #f8f9fa;
    border-color: var(--brand-blue-end);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.tc-sidebar-btn:active {
    background: #e8ecf0;
}

/* Status-Tabs in Sidebar (vertikal) */
.tc-sidebar-tabs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
}

/* Mittlere Hauptspalte: Tabelle */
.tc-main-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tc-calendar-side {
    flex: 0 0 320px;
    min-width: 280px;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(180deg, #f8fafc 0%, #f0f4f8 100%);
}

/* Status-Tabs (in Sidebar) */
.tc-sidebar-tabs .tc-tab {
    background: transparent;
    border: none;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-radius: 6px;
    text-align: left;
}

.tc-sidebar-tabs .tc-tab:hover {
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.04);
}

.tc-sidebar-tabs .tc-tab.active {
    color: var(--brand-blue-end);
    font-weight: 600;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tc-tab-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    background: #e8e8e8;
    border-radius: 10px;
    color: var(--text-light);
}

.tc-tab.active .tc-tab-badge {
    background: var(--brand-blue-end);
    color: #fff;
}

.tc-main-content .tc-toolbar {
    flex-shrink: 0;
    padding: 10px 20px;
    background: #fafbfc;
    border-bottom: 1px solid var(--border-color);
}

.tc-total-count {
    font-size: 12px;
    color: var(--text-light);
    font-weight: 500;
}

.tc-main-content .tc-table-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.tc-table-header {
    display: grid;
    grid-template-columns: 1fr 2fr 100px 90px 1fr 120px;
    gap: 12px;
    padding: 12px 20px;
    background: linear-gradient(180deg, #f5f6f8 0%, #ebedf0 100%);
    border-bottom: 1px solid var(--border-color);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.tc-task-row {
    display: grid;
    grid-template-columns: 1fr 2fr 100px 90px 1fr 120px;
    gap: 12px;
    padding: 12px 20px;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
    transition: background 0.12s;
    cursor: pointer;
}

.tc-task-row:hover {
    background: #f5f8fc;
}

.tc-task-row:focus {
    outline: none;
}

.tc-task-row:focus-visible {
    background: #e8eef5;
    box-shadow: inset 0 0 0 2px #4a90d9;
}

.tc-td {
    min-width: 0;
}

.tc-task-title {
    font-weight: 500;
    color: var(--text-main);
}

.tc-status-open {
    color: #e67e22;
    font-weight: 500;
}

.tc-status-done {
    color: #27ae60;
    font-weight: 500;
}

.tc-status-progress {
    color: #d35400;
    font-weight: 500;
}

.tc-status-trash {
    color: #7f8c8d;
    font-weight: 500;
}

.tc-td--actions {
    display: flex;
    gap: 6px;
}

.tc-action-btn {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.12s, border-color 0.12s;
}

.tc-action-btn:hover {
    background: #e8eef5;
    border-color: var(--brand-blue-end);
}

.tc-action-btn:focus {
    outline: none;
}

.tc-action-btn:focus-visible {
    outline: 2px solid #4a90d9;
    outline-offset: 2px;
}

.tc-empty-state {
    padding: 48px 20px;
    text-align: center;
    color: var(--text-light);
}

.tc-empty-text {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
}

.tc-empty-hint {
    font-size: 12px;
}

.tc-empty-icon {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.tc-empty-action {
    margin-top: 14px;
}

/* Kalender */
.tc-calendar-inner {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 20px;
}

.tc-calendar-side .tc-calendar-inner--compact {
    padding: 12px;
}

.tc-calendar-side .tc-calendar-inner--compact .tc-calendar-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 0;
    margin-bottom: 8px;
}

.tc-calendar-side .tc-calendar-inner--compact .tc-calendar-nav-group {
    justify-content: center;
}

.tc-calendar-side .tc-calendar-inner--compact .tc-calendar-title {
    font-size: 14px;
    min-width: 0;
}

.tc-calendar-side .tc-calendar-inner--compact .tc-calendar-nav {
    width: 32px;
    height: 32px;
    font-size: 16px;
}

.tc-calendar-side .tc-calendar-inner--compact .tc-calendar-view-switcher {
    flex-wrap: wrap;
    justify-content: center;
}

.tc-calendar-side .tc-calendar-inner--compact .tc-calendar-view-btn {
    padding: 6px 10px;
    font-size: 11px;
}

.tc-calendar-side .tc-calendar-inner--compact .tc-calendar-weekdays {
    font-size: 10px;
    padding: 4px 0;
}

.tc-calendar-side .tc-calendar-inner--compact .tc-calendar-weekday {
    padding: 4px 2px;
}

.tc-calendar-side .tc-calendar-inner--compact .tc-calendar-grid {
    min-height: 0;
}

.tc-calendar-side .tc-calendar-inner--compact .tc-calendar-day {
    min-height: 56px;
    padding: 4px;
}

.tc-calendar-side .tc-calendar-inner--compact .tc-calendar-day-num {
    font-size: 10px;
    margin-bottom: 2px;
}

.tc-calendar-side .tc-calendar-inner--compact .tc-calendar-task-item {
    padding: 4px 6px;
    font-size: 10px;
}

.tc-calendar-side .tc-calendar-inner--compact .tc-calendar-grid--week .tc-calendar-week-day {
    min-height: 80px;
}

.tc-calendar-side .tc-calendar-inner--compact .tc-calendar-body--daily {
    padding: 12px;
    max-width: 100%;
}

.tc-calendar-side .tc-calendar-inner--compact .tc-calendar-day-content {
    padding: 12px;
}

.tc-calendar-side .tc-calendar-inner--compact .tc-calendar-year-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 12px 0;
}

.tc-calendar-side .tc-calendar-inner--compact .tc-calendar-year-month {
    min-height: 56px;
    padding: 10px;
}

.tc-calendar-side .tc-calendar-inner--compact .tc-calendar-year-month-name {
    font-size: 12px;
}

.tc-calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.tc-calendar-nav-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tc-calendar-view-switcher {
    display: flex;
    gap: 4px;
}

.tc-calendar-view-btn {
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #fff;
    color: var(--text-light);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.tc-calendar-view-btn:hover {
    color: var(--text-main);
    background: #f5f5f5;
}

.tc-calendar-view-btn.active {
    background: var(--brand-blue-end);
    border-color: var(--brand-blue-end);
    color: #fff;
}

.tc-calendar-nav {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #fff;
    color: var(--text-main);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, border-color 0.12s;
}

.tc-calendar-nav:hover {
    background: #e8eef5;
    border-color: var(--brand-blue-end);
    color: var(--brand-blue-end);
}

.tc-calendar-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
    min-width: 180px;
    text-align: center;
}

.tc-calendar-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.tc-calendar-body--daily {
    padding: 20px;
    max-width: 560px;
    margin: 0 auto;
}

.tc-calendar-day-content {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
}

.tc-calendar-day-content--today {
    border-color: var(--brand-blue-start);
    background: #f8fbff;
}

.tc-calendar-day-empty {
    margin: 0 0 12px;
    color: var(--text-light);
    font-size: 13px;
}

.tc-calendar-day-task-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tc-calendar-task-item--block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 14px;
    white-space: normal;
    text-align: left;
}

.tc-calendar-task-item-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.tc-calendar-task-item-desc {
    font-size: 11px;
    color: var(--text-light);
    line-height: 1.4;
}

.tc-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    padding: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
}

.tc-calendar-weekday {
    text-align: center;
    padding: 8px 4px;
}

.tc-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.tc-calendar-day {
    min-height: 100px;
    background: #fff;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tc-calendar-day--other {
    background: #f5f6f8;
    color: var(--text-light);
}

.tc-calendar-day--today {
    background: #e8f0fe;
    outline: 2px solid var(--brand-blue-start);
    outline-offset: -2px;
}

.tc-calendar-day-num {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    flex-shrink: 0;
}

.tc-calendar-day-tasks {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tc-calendar-task-item {
    display: block;
    width: 100%;
    padding: 6px 8px;
    border: none;
    border-radius: 4px;
    background: #e8eef5;
    color: var(--text-main);
    font-size: 11px;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.12s;
}

.tc-calendar-task-item:hover {
    background: var(--brand-blue-start);
    color: #fff;
}

.tc-calendar-task-item--done {
    background: #e8f5e9;
    color: #2e7d32;
}

/* Kalender-Tab (eigener Reiter): kompakt */
.tc-kalender-tab {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.tc-kalender-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: #f5f6f8;
    border-bottom: 1px solid var(--border-color);
}
.tc-kalender-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tc-kalender-filter-boxes {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.tc-kalender-filter-box {
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: #fff;
    color: var(--text-main);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.tc-kalender-filter-box:hover {
    background: #e8eef5;
    border-color: var(--brand-blue-start);
}
.tc-kalender-filter-box--active {
    background: var(--brand-blue-start);
    border-color: var(--brand-blue-start);
    color: #fff;
}
.tc-kalender-benutzer-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tc-kalender-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-main);
}
.tc-kalender-select {
    min-width: 140px;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 12px;
    background: #fff;
}
.tc-kalender-inner {
    flex: 1;
    overflow: auto;
    padding: 10px 12px;
}
.tc-kalender-toolbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.tc-kalender-toolbar-inner .tc-calendar-nav-group {
    display: flex;
    align-items: center;
    gap: 4px;
}
.tc-kalender-toolbar-inner .tc-calendar-nav {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
}
.tc-kalender-title {
    font-size: 14px;
    font-weight: 600;
    min-width: 180px;
    text-align: center;
}
.tc-kalender-view-btn {
    padding: 4px 10px;
    font-size: 11px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}
.tc-kalender-view-btn:hover {
    background: #e8eef5;
}
.tc-kalender-view-btn.active {
    background: var(--brand-blue-end);
    border-color: var(--brand-blue-end);
    color: #fff;
}
.tc-kalender-body-compact .tc-calendar-weekdays {
    padding: 4px 0;
    font-size: 10px;
}
.tc-kalender-body-compact .tc-calendar-weekday {
    padding: 2px 0;
}
.tc-kalender-grid.tc-calendar-grid--full {
    min-height: 280px;
}
.tc-kalender-day.tc-calendar-day {
    min-height: 72px;
    padding: 4px;
}
.tc-kalender-day .tc-calendar-day-num {
    font-size: 10px;
    margin-bottom: 2px;
}
.tc-kalender-day .tc-calendar-day-tasks {
    gap: 2px;
}
.tc-kalender-item.tc-calendar-task-item {
    padding: 3px 6px;
    font-size: 10px;
}
.tc-kalender-week-day.tc-calendar-day {
    min-height: 80px;
    padding: 4px;
}
.tc-calendar-grid--week-7 {
    grid-template-columns: repeat(7, 1fr);
}
.tc-kalender-day-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tc-kalender-day-list .tc-kalender-item {
    text-align: left;
}
.tc-kalender-empty {
    margin: 0;
    font-size: 12px;
    color: var(--text-light);
}
.tc-kalender-body-compact.tc-calendar-body--daily {
    padding: 12px;
    max-width: 100%;
}
.tc-kalender-year-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 12px 0;
}
.tc-kalender-year-month {
    min-height: 56px;
    padding: 8px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.tc-kalender-year-month .tc-calendar-year-month-name {
    font-size: 12px;
}
.tc-kalender-year-month .tc-calendar-year-month-count {
    font-size: 11px;
    margin-top: 2px;
}
.tc-kalender-inner .tc-calendar-body--monthly .tc-calendar-grid--full {
    min-height: 280px;
}
.tc-calendar-item--task { border-left: 3px solid #2196f3; }
.tc-calendar-item--gv { border-left: 3px solid #ab47bc; }
.tc-calendar-item--antrag { border-left: 3px solid #ffa726; }
.tc-calendar-item--schaden { border-left: 3px solid #ef5350; }

.tc-calendar-grid--week .tc-calendar-week-day {
    min-height: 140px;
}

.tc-calendar-year-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 20px 0;
}

.tc-calendar-year-month {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.tc-calendar-year-month:hover {
    background: #f5f8fc;
    border-color: var(--brand-blue-start);
}

.tc-calendar-year-month--has-tasks {
    background: #f0f7ff;
    border-color: #c5daf5;
}

.tc-calendar-year-month--has-tasks:hover {
    background: #e8f0fe;
}

.tc-calendar-year-month-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-main);
    margin-bottom: 4px;
}

.tc-calendar-year-month-count {
    font-size: 12px;
    color: var(--text-light);
}

/* Administration – Reiter (Benutzer, Rechte, E-Mail-Schnittstellen, x, y, z) */
.admin-page .vm-header {
    margin-bottom: 0;
}

.admin-tabs {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    background: #f5f5f5;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 4px 4px;
}

.admin-tab {
    background: transparent;
    border: none;
    padding: 12px 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-light);
    cursor: pointer;
}

.admin-tab:hover {
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.03);
}

.admin-tab.active {
    color: var(--brand-blue-end);
    font-weight: 600;
    background: #fff;
    border-radius: 4px 4px 0 0;
    margin-bottom: -1px;
    border: 1px solid var(--border-color);
    border-bottom: 1px solid #fff;
}

.admin-content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--border-color);
    border-top: none;
    padding: 20px;
}

.admin-content-panel {
    display: none;
}

.admin-content-panel.active {
    display: block;
}

.admin-panel-title {
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--text-main);
}

.admin-panel-placeholder {
    color: var(--text-light);
    font-size: 12px;
}

.admin-benutzertypen-info {
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--text-main);
}

.admin-users-table-wrap {
    overflow: auto;
    max-width: 100%;
}

.admin-users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.admin-users-table th,
.admin-users-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.admin-users-table th {
    background: #fafafa;
    font-weight: 600;
    color: var(--text-main);
}

.admin-user-name {
    font-weight: 500;
}

/* Vorlagen-Manager: Reiter-Panels (aktiv/inaktiv) */
.vorlagen-sub-panel {
    display: none !important;
}

.vorlagen-sub-panel.active {
    display: block !important;
}

.vorlagen-panel-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 14px;
    color: var(--text-main);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--brand-blue-end);
    display: inline-block;
}

.vorlagen-panel-placeholder {
    font-size: 12px;
    color: var(--text-light);
}

/* Zwei-Spalten-Layout: links Vorlagen-Tabelle, rechts Anleitung + Platzhalter */
.vorlagen-sub-content {
    padding: 0;
    overflow: hidden;
}

.vorlagen-sub-panel {
    height: 100%;
    overflow: auto;
}

.vorlagen-split {
    display: flex;
    height: 100%;
    min-height: 0;
}

.vorlagen-links {
    flex: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    background: var(--bg-white);
}

.vorlagen-rechts {
    flex: 1;
    min-width: 280px;
    max-width: 420px;
    overflow: auto;
    padding: 24px;
    background: linear-gradient(180deg, #f8fafc 0%, #f0f4f8 100%);
    border-left: 1px solid var(--border-color);
}

/* Toolbar links: Einträge + Plus-Button */
.vorlagen-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    background: linear-gradient(180deg, #fafbfc 0%, #f0f2f5 100%);
    border-bottom: 1px solid var(--border-color);
}

.vorlagen-count {
    font-size: 12px;
    color: var(--text-light);
    font-weight: 600;
}

.vorlagen-add-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(180deg, var(--brand-blue-start) 0%, var(--brand-blue-end) 100%);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(42, 95, 158, 0.35);
    transition: box-shadow 0.15s, transform 0.1s;
}

.vorlagen-add-btn:hover {
    box-shadow: 0 3px 10px rgba(42, 95, 158, 0.4);
}

/* Tabelle Vorlagen (Beschreibung, Standardempfänger, Datum) */
.vorlagen-table-scroll {
    flex: 1;
    overflow: auto;
}

.vorlagen-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.vorlagen-list-table th,
.vorlagen-list-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.vorlagen-list-table th {
    background: linear-gradient(180deg, #f5f6f8 0%, #ebedf0 100%);
    font-weight: 600;
    color: var(--text-main);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.vorlagen-list-row {
    transition: background 0.12s;
}

.vorlagen-list-row:hover {
    background: #f5f8fc;
}

.vorlagen-th-beschreibung,
.vorlagen-td-beschreibung {
    min-width: 160px;
}

.vorlagen-th-id,
.vorlagen-td-id {
    width: 110px;
}

.vorlagen-th-empfaenger,
.vorlagen-td-empfaenger {
    width: 130px;
}

.vorlagen-th-datum,
.vorlagen-td-datum {
    width: 95px;
}

.vorlagen-th-dateiname,
.vorlagen-td-dateiname {
    width: 140px;
}

.vorlagen-th-actions,
.vorlagen-td-actions {
    width: 80px;
    text-align: right;
}

.vorlagen-beschreibung {
    font-weight: 500;
}

.vorlagen-row-tag {
    display: block;
    font-size: 11px;
    color: var(--brand-blue-end);
    margin-top: 2px;
}

.vorlagen-leer {
    color: var(--text-light);
    font-style: italic;
    padding: 32px 24px !important;
    text-align: center;
}

/* ========== Dokumentenmanager Reiter Vorlagen (Dokumentvorlagen) ========== */
.dm-vorlagen-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: #fff;
}

.dm-vorlagen-anleitung-wrap {
    flex-shrink: 0;
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

.dm-vorlagen-anleitung {
    flex: 1;
    min-width: 260px;
}

.dm-vorlagen-anleitung-title {
    margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
}

.dm-vorlagen-anleitung-list {
    margin: 0 0 8px 0;
    padding-left: 20px;
    font-size: 12px;
    color: #495057;
    line-height: 1.5;
}

.dm-vorlagen-anleitung-list li {
    margin-bottom: 4px;
}

.dm-vorlagen-anleitung-list code {
    background: #e9ecef;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 11px;
}

.dm-vorlagen-anleitung-hinweis {
    margin: 0;
    font-size: 11px;
    color: #6c757d;
    font-style: italic;
}

.dm-vorlagen-platzhalter-wrap {
    flex: 1;
    min-width: 280px;
    max-width: 420px;
}

.dm-vorlagen-platzhalter-title {
    margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
}

.dm-vorlagen-platzhalter-scroll {
    max-height: 200px;
    overflow: auto;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #fff;
}

.dm-vorlagen-platzhalter-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.dm-vorlagen-platzhalter-table th,
.dm-vorlagen-platzhalter-table td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid #ecf0f1;
}

.dm-vorlagen-platzhalter-table th {
    background: #495057;
    color: #fff;
    font-weight: 600;
    position: sticky;
    top: 0;
}

.dm-vorlagen-ph-cell {
    font-family: monospace;
    font-size: 11px;
    color: #1a73e8;
}

.dm-vorlagen-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.dm-vorlagen-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dm-vorlagen-count {
    font-size: 12px;
    color: #6c757d;
    font-weight: 600;
}

.dm-vorlagen-download-anleitung-btn {
    padding: 6px 14px;
    font-size: 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #fff;
    color: #495057;
    cursor: pointer;
}

.dm-vorlagen-download-anleitung-btn:hover {
    background: #f1f3f5;
    border-color: #adb5bd;
}

.dm-vorlagen-add-btn {
    padding: 6px 14px;
    font-size: 12px;
    border: none;
    border-radius: 4px;
    background: #2d6cdf;
    color: #fff;
    cursor: pointer;
}

.dm-vorlagen-add-btn:hover {
    background: #1a5bc7;
}

.dm-vorlagen-table-scroll {
    flex: 1;
    overflow: auto;
    padding: 12px;
}

.dm-vorlagen-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.dm-vorlagen-table th,
.dm-vorlagen-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #ecf0f1;
}

.dm-vorlagen-table th {
    background: #495057;
    color: #fff;
    font-weight: 600;
    font-size: 11px;
}

.dm-vorlagen-list-row:hover {
    background: #f5f8fc;
}

.dm-vorlagen-td-beschreibung { min-width: 160px; }
.dm-vorlagen-td-id { width: 110px; }
.dm-vorlagen-td-empfaenger { width: 120px; }
.dm-vorlagen-td-datum { width: 90px; }
.dm-vorlagen-td-dateiname { width: 140px; }
.dm-vorlagen-td-actions { width: 140px; text-align: right; }

.dm-vorlagen-action-view,
.dm-vorlagen-action-menu,
.dm-vorlagen-action-wiederherstellen {
    background: none;
    border: none;
    padding: 4px 8px;
    font-size: 11px;
    color: #2d6cdf;
    cursor: pointer;
    margin-left: 4px;
}

.dm-vorlagen-action-view:hover,
.dm-vorlagen-action-menu:hover,
.dm-vorlagen-action-wiederherstellen:hover {
    text-decoration: underline;
}

.dm-vorlagen-leer {
    color: #6c757d;
    font-style: italic;
    padding: 24px;
    text-align: center;
}

.dm-vorlagen-row-tag {
    display: block;
    font-size: 11px;
    color: #6c757d;
    margin-top: 2px;
}

.dm-vorlagen-papierkorb {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #dee2e6;
}

.dm-vorlagen-pk-title {
    font-size: 13px;
    margin: 0 0 12px 0;
    color: #495057;
}

.dm-vorlagen-pk-row {
    opacity: 0.85;
}

.dm-vorlagen-row-dropdown {
    position: fixed;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 4px 0;
    min-width: 140px;
    z-index: 10001;
    display: none;
}

.dm-vorlagen-row-dropdown.is-open {
    display: block;
}

.dm-vorlagen-dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    text-align: left;
    border: none;
    background: none;
    font-size: 12px;
    cursor: pointer;
    color: #2c3e50;
}

.dm-vorlagen-dropdown-item:hover {
    background: #f8f9fa;
}

.dm-vorlagen-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vorlagen-action-btn {
    background: none;
    border: none;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-light);
    border-radius: 4px;
    transition: color 0.12s, background 0.12s;
}

.vorlagen-action-btn:hover {
    color: var(--brand-blue-end);
    background: rgba(74, 144, 217, 0.08);
}

/* Pagination */
.vorlagen-pagination {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    background: linear-gradient(180deg, #fafbfc 0%, #f0f2f5 100%);
    border-top: 1px solid var(--border-color);
    font-size: 12px;
}

.vorlagen-pagination select {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 12px;
}

.vorlagen-range {
    color: var(--text-light);
}

.vorlagen-nav {
    margin-left: auto;
    display: flex;
    gap: 4px;
}

.vorlagen-nav-btn {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-main);
    border-radius: 4px;
    transition: background 0.12s, border-color 0.12s;
}

.vorlagen-nav-btn:hover:not(:disabled) {
    background: #e8ecf0;
    border-color: var(--border-dark);
}

.vorlagen-nav-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Rechte Seite: Ausklappbar "> Platzhalter" */
.vorlagen-collapse-wrap {
    margin-top: 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-white);
}

.vorlagen-collapse-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    background: linear-gradient(180deg, #fafbfc 0%, #f0f2f5 100%);
    border: none;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s;
}

.vorlagen-collapse-btn:hover {
    background: linear-gradient(180deg, #f0f4f8 0%, #e8ecf0 100%);
    color: var(--brand-blue-end);
}

.vorlagen-collapse-btn[aria-expanded="true"] {
    background: #e8eef5;
    color: var(--brand-blue-end);
}

.vorlagen-collapse-icon {
    font-size: 10px;
    transition: transform 0.15s;
}

.vorlagen-collapse-content {
    padding: 14px;
    background: var(--bg-white);
}

.vorlagen-anleitung {
    font-size: 12px;
    color: var(--text-main);
    margin-bottom: 18px;
    line-height: 1.6;
}

.vorlagen-table-wrap {
    overflow: auto;
    max-width: 100%;
    margin-top: 12px;
}

.vorlagen-platzhalter-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.vorlagen-platzhalter-table th,
.vorlagen-platzhalter-table td {
    padding: 8px 12px;
    text-align: left;
    border: 1px solid var(--border-color);
}

.vorlagen-platzhalter-table th {
    background: linear-gradient(180deg, #f0f2f5 0%, #e8eaef 100%);
    font-weight: 600;
    color: var(--text-main);
    font-size: 11px;
}

.vorlagen-platzhalter-cell {
    font-family: Consolas, Monaco, monospace;
    font-size: 11px;
    color: var(--brand-blue-end);
}

.vorlagen-platzhalter-table tbody tr:hover {
    background: #f5f8fc;
}

/* 3-Punkte-Menü Dropdown */
.vorlagen-row-dropdown {
    position: fixed;
    z-index: 1000;
    min-width: 180px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    padding: 6px 0;
    display: none;
}

.vorlagen-row-dropdown.is-open {
    display: block;
}

.vorlagen-dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    color: var(--text-main);
    transition: background 0.12s;
}

.vorlagen-dropdown-item:hover {
    background: #e8eef5;
}

/* Papierkorb: Entwickler-Hinweis */
.vorlagen-papierkorb-dev-hinweis {
    margin: 0;
    padding: 10px 20px;
    font-size: 11px;
    color: #a00;
    background: linear-gradient(180deg, #fff8f8 0%, #ffefef 100%);
    border-bottom: 1px solid #f0d0d0;
}

/* Papierkorb-Tabelle: Spalte Typ */
.vorlagen-th-typ,
.vorlagen-td-typ {
    width: 90px;
}

/* Platzhalter-Dropdown in der Headerleiste */
.vorlagen-header-platzhalter-wrap {
    position: relative;
}

.vorlagen-platzhalter-dropdown-btn {
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.vorlagen-platzhalter-dropdown-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.35);
}

.vorlagen-platzhalter-dropdown-panel {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 6px;
    min-width: 420px;
    max-width: 90vw;
    max-height: 70vh;
    overflow: auto;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.vorlagen-platzhalter-dropdown-panel[hidden] {
    display: none !important;
}

.vorlagen-platzhalter-dropdown-inner {
    padding: 16px 20px;
}

.vorlagen-platzhalter-dropdown-section-title {
    margin: 16px 0 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.vorlagen-platzhalter-dropdown-section-title:first-child {
    margin-top: 0;
}

/* Einspaltiges Layout (Reiter ohne rechte Spalte) */
.vorlagen-split--single .vorlagen-links {
    flex: 1 1 100%;
    max-width: none;
    border-right: none;
}

/* Sub-Tabs: Vorlagen: Dokumente | E-Mails | Papierkorb */
.vorlagen-sub-tabs {
    flex-shrink: 0;
    display: flex;
    gap: 4px;
    padding: 12px 20px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.vorlagen-sub-tab {
    padding: 10px 18px;
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: var(--grad-tab);
    color: var(--text-light);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.vorlagen-sub-tab:hover {
    color: var(--text-main);
    background: linear-gradient(180deg, #f5f5f5 0%, #e8e8e8 100%);
}

.vorlagen-sub-tab.active {
    color: var(--brand-blue-end);
    font-weight: 600;
    background: var(--bg-white);
    border-color: var(--border-color);
    border-bottom: 1px solid var(--bg-white);
    margin-bottom: -1px;
}

.vorlagen-sub-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-white);
}

/* ========== Vorlagen-Manager: E-Mail „Vorlage erstellen“-Popup ========== */
.vm-email-create-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vm-email-create-box {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    max-width: 900px;
    width: 95%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.vm-email-create-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #e0e0e0;
    background: #f5f5f5;
    border-radius: 8px 8px 0 0;
}

.vm-email-create-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.vm-email-create-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #666;
    padding: 0 4px;
    line-height: 1;
}

.vm-email-create-close:hover {
    color: #333;
}

.vm-email-create-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.vm-email-create-form {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    min-width: 0;
}

.vm-email-field {
    margin-bottom: 14px;
}

.vm-email-label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
}

.vm-email-input,
.vm-email-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.vm-email-betreff-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.vm-email-betreff-row .vm-email-input {
    flex: 1;
}

.vm-email-platzhalter-btn {
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.vm-email-platzhalter-btn:hover {
    background: #f0f0f0;
}

.vm-email-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 0;
    border: 1px solid #e0e0e0;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    background: #fafafa;
}

.vm-email-toolbar .vm-email-font-size,
.vm-email-toolbar .vm-email-font-style {
    width: auto;
    min-width: 70px;
    padding: 4px 6px;
}

.vm-email-tb-btn {
    min-width: 28px;
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
}

.vm-email-tb-btn:hover {
    background: #eee;
}

.vm-email-editor {
    min-height: 160px;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 0 0 4px 4px;
    font-size: 13px;
    line-height: 1.5;
    overflow-y: auto;
    background: #fff;
}

.vm-email-editor:empty::before {
    content: attr(data-placeholder);
    color: #999;
}

.vm-email-upload-zone {
    border: 2px dashed #2e7d32;
    border-radius: 6px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    background: #f8fff8;
}

.vm-email-upload-zone:hover {
    background: #effaef;
}

.vm-email-file-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
}

.vm-email-upload-text {
    color: #2e7d32;
    font-size: 14px;
    text-decoration: underline;
}

.vm-email-anhaenge-list {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vm-email-anhang-tag {
    display: inline-block;
    padding: 4px 10px;
    background: #e8f5e9;
    border-radius: 4px;
    font-size: 12px;
    color: #1b5e20;
}

.vm-email-platzhalter-panel {
    width: 260px;
    flex-shrink: 0;
    border-left: 1px solid #e0e0e0;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vm-email-platzhalter-panel.is-open {
    display: flex;
}

.vm-email-platzhalter-panel-header {
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    border-bottom: 1px solid #e0e0e0;
}

.vm-email-platzhalter-search {
    margin: 10px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    width: calc(100% - 20px);
    box-sizing: border-box;
}

.vm-email-platzhalter-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 12px;
}

.vm-email-platzhalter-item {
    display: block;
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 4px;
    border: none;
    border-radius: 4px;
    background: #fff;
    border: 1px solid #e8e8e8;
    text-align: left;
    cursor: pointer;
    font-size: 12px;
}

.vm-email-platzhalter-item:hover {
    background: #e8f5e9;
    border-color: #c8e6c9;
}

.vm-email-platzhalter-token {
    display: block;
    font-family: monospace;
    color: #1b5e20;
    margin-bottom: 2px;
}

.vm-email-platzhalter-desc {
    display: block;
    color: #666;
    font-size: 11px;
}

.vm-email-create-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-top: 1px solid #e0e0e0;
    background: #f9f9f9;
    border-radius: 0 0 8px 8px;
}

.vm-email-pflicht-hinweis {
    font-size: 12px;
    color: #666;
}

.vm-email-footer-buttons {
    display: flex;
    gap: 10px;
}

.vm-email-btn-cancel {
    padding: 8px 20px;
    border: 1px solid #2e7d32;
    border-radius: 4px;
    background: #fff;
    color: #2e7d32;
    font-size: 14px;
    cursor: pointer;
}

.vm-email-btn-cancel:hover {
    background: #f1f8e9;
}

.vm-email-btn-create {
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    background: #2e7d32;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.vm-email-btn-create:hover {
    background: #1b5e20;
}

/* ========== Vertragsmanager ========== */
.vm-page {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #1e2d3a;
}

/* Header: einheitlicher Aufbau und Skalierung für Antragsmanager, Schadenmanager, Vertragsmanager */
.vm-header {
    flex-shrink: 0;
    min-height: 52px;
    padding: 14px 20px;
    box-sizing: border-box;
    background: #1e2d3a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.vm-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
    margin: 0;
    flex-shrink: 0;
}

.vm-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* Filter-Dropdown in Header (alle drei Manager) */
.vm-filter-dropdown-wrap {
    position: relative;
}

.vm-filter-dropdown-btn {
    height: 32px;
    min-width: 120px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    background: #34495e;
    border: 1px solid #3d5166;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.vm-filter-dropdown-btn:hover {
    background: #3d5166;
}

.vm-filter-dropdown-arrow {
    font-size: 10px;
    opacity: 0.9;
}

.vm-filter-dropdown-panel {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    min-width: 280px;
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.vm-filter-dropdown-wrap.open .vm-filter-dropdown-panel {
    display: block;
}

.vm-filter-dropdown-inner {
    padding: 14px;
}

.vm-filter-dropdown-inner .vm-filter-group {
    margin-bottom: 12px;
}

.vm-filter-dropdown-inner .vm-filter-reset-btn {
    margin-top: 8px;
    margin-bottom: 0;
    width: 100%;
}

/* Toggle Switch für Statistik (einheitliche Größe in allen drei Managern) */
.vm-stats-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vm-toggle-label {
    font-size: 12px;
    line-height: 1.2;
    color: #8fa4b8;
}

.vm-toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    flex-shrink: 0;
}

.vm-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.vm-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #4a5a6a;
    transition: 0.3s;
    border-radius: 20px;
}

.vm-toggle-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    transition: 0.3s;
    border-radius: 50%;
}

.vm-toggle-switch input:checked+.vm-toggle-slider {
    background-color: #3498db;
}

.vm-toggle-switch input:checked+.vm-toggle-slider:before {
    transform: translateX(20px);
}

/* Kunden-Detail: Layout – Header fixiert, Rest scrollt */
.customer-detail {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #ecf0f1;
    overflow: hidden;
}

/* Kundenmaske Header: Personenmaske ohne Logo, mehr Platz und bessere Proportionen */
.customer-detail-header-sticky {
    flex-shrink: 0;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    padding: 16px 24px 28px;
    border-bottom: 2px solid #1a252f;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.customer-detail-header-inner {
    display: flex;
    align-items: center;
    gap: 16px 24px;
    color: #ecf0f1;
    font-size: 12px;
    flex-wrap: wrap;
    max-width: 100%;
}

.customer-detail-header-block {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px 12px;
}

.customer-detail-header-block-contact {
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    flex: 1 1 0;
    max-width: 360px;
}

.customer-detail-header-name {
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 4px 0;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.customer-detail-header-contact-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #bdc3c7;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.customer-detail-header-contact-line .customer-detail-header-phone {
    display: inline;
    font-weight: 500;
}

.customer-detail-header-address-line {
    font-size: 11px;
    color: #95a5a6;
    line-height: 1.4;
    font-style: italic;
}

.customer-detail-header-no-contact {
    font-style: italic;
    color: #7f8c8d;
    font-size: 11px;
}

.customer-detail-header-sep {
    color: #7f8c8d;
    font-weight: 300;
    user-select: none;
}

.customer-detail-header-email-link {
    color: #5dade2;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.customer-detail-header-email-link:hover {
    text-decoration: underline;
    color: #85c1e9;
}

.customer-detail-header-divider {
    width: 1px;
    height: 70px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.15) 20%, rgba(255, 255, 255, 0.15) 80%, transparent);
    flex-shrink: 0;
    align-self: center;
}

/* Logo im Header: nur für Firmenkundenmaske (firma-customer-detail.js) */
.customer-detail-header-block-logo {
    flex-shrink: 0;
}

.customer-detail-header-block-logo .customer-detail-logo-card {
    padding: 6px;
    min-width: 96px;
}

.customer-detail-header-block-logo .customer-detail-logo-dropzone {
    min-height: 52px;
    min-width: 84px;
    padding: 6px;
}

.customer-detail-header-block-logo .customer-detail-logo-preview {
    max-height: 52px;
    max-width: 84px;
    object-fit: contain;
}

.customer-detail-header-block-logo .customer-detail-logo-placeholder {
    font-size: 11px;
}

/* Stammdaten-Block im Header: 4×2-Grid (8 Pills), Pills klickbar zum Bearbeiten */
.customer-detail-header-block-stammdaten {
    display: block;
    flex: 0 1 auto;
}

.customer-detail-stammdaten-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 14px;
    align-items: center;
}

.customer-detail-header-block-stammdaten .customer-detail-stammdaten-pill {
    cursor: pointer;
    padding: 4px 8px;
    font-size: 10px;
    transition: all 0.2s;
}

.customer-detail-header-block-stammdaten .customer-detail-stammdaten-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.customer-detail-header-block-stammdaten .customer-detail-stammdaten-label {
    font-size: 9px;
    font-weight: 600;
}

/* Stats-Block: direkt neben der Trennlinie (Header abrunden) */
.customer-detail-header-block-stats {
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    flex-shrink: 0;
    gap: 8px;
}

.customer-detail-header-stats-vorgaenge {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}

.customer-detail-header-stats-vorgaenge-num {
    color: #3498db;
    margin-right: 3px;
    font-size: 15px;
}

.customer-detail-header-stats-row {
    font-size: 11px;
    color: #bdc3c7;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.customer-detail-header-stats-row > span {
    font-weight: 500;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    transition: background 0.2s;
}

.customer-detail-header-stats-row > span:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* SEPA/Erstinformation/Datenschutz: ✓ oder „fehlt“ in Stammdaten-Pills */
.customer-detail-stammdaten-pill .customer-detail-summary-ok {
    color: #27ae60;
}

.customer-detail-stammdaten-pill .customer-detail-summary-missing {
    color: #e74c3c;
}

/* Stammdaten: Pills in 4×2-Grid (Typ, Art, Mandat, Konzern | SL, SEPA-Mandat, Erstinformation, Datenschutz) – Klick öffnet Bearbeiten-Modal */
.customer-detail-header-stammdaten {
    flex-shrink: 0;
}

.customer-detail-stammdaten-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 11px;
    color: #ecf0f1;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.customer-detail-stammdaten-pill:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.customer-detail-stammdaten-pill:active {
    transform: translateY(0);
}

.customer-detail-stammdaten-label {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.customer-detail-stammdaten-value {
    font-weight: 600;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
}

.customer-detail-stammdaten-pill--konzern .customer-detail-header-konzern-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.customer-detail-stammdaten-pill--konzern .customer-detail-konzern-link {
    font-size: 12px;
    font-weight: 500;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-detail-stammdaten-pill--konzern .customer-detail-header-btn {
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    color: #bdc3c7;
    cursor: pointer;
}

.customer-detail-stammdaten-pill--konzern .customer-detail-header-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ecf0f1;
}

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

.customer-detail-header-btn {
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    border: none;
}

.customer-detail-header-btn-primary {
    background: #3498db;
    color: white;
}

.customer-detail-header-btn-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #bdc3c7;
}

/* Art-Auswahl Overlay (Mehrfachauswahl) */
.customer-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
}
.customer-detail-overlay-inner {
    background: #fff;
    border-radius: 8px;
    padding: 16px 20px;
    min-width: 260px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.customer-detail-overlay-title {
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 13px;
}
.customer-detail-overlay-body {
    margin-bottom: 14px;
}
.customer-detail-overlay-input {
    width: 100%;
    max-width: 320px;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Header-Meta-Popup: Typ, Art, Mandate – klar & anwenderfreundlich */
.customer-detail-meta-popup-inner {
    min-width: 320px;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
}
.customer-detail-meta-popup-inner--wide {
    min-width: 520px;
    max-width: 640px;
}
.customer-detail-meta-popup-title {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
}
.customer-detail-meta-popup-subtitle {
    margin: 0 0 20px 0;
    font-size: 13px;
    color: #7f8c8d;
    line-height: 1.4;
}
.customer-detail-meta-popup-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.customer-detail-meta-popup-top-row {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}
.customer-detail-meta-popup-top-row .customer-detail-meta-popup-section {
    min-width: 160px;
}
.customer-detail-meta-popup-radio-group,
.customer-detail-meta-popup-check-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.customer-detail-meta-popup-section--mandat {
    margin-top: 4px;
}
.customer-detail-meta-popup-doc-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 500;
    margin: 0;
}
.customer-detail-meta-popup-doc-label input {
    margin: 0;
}
.customer-detail-meta-popup-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid #e8ecef;
}
.customer-detail-meta-popup-konzern-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.customer-detail-meta-popup-servicelevel-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.customer-detail-meta-popup-label-inline {
    font-size: 12px;
    font-weight: 600;
    color: #5a6c7d;
}
.customer-detail-meta-popup-nachweise-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.customer-detail-meta-popup-nachweise-wrap .customer-detail-meta-popup-label {
    font-size: 12px;
    font-weight: 600;
    color: #5a6c7d;
    margin-bottom: 2px;
}
.customer-detail-meta-popup-nachweise-wrap .customer-detail-meta-popup-row {
    margin: 0;
}
.customer-detail-meta-popup-doc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.customer-detail-meta-popup-doc-table th,
.customer-detail-meta-popup-doc-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid #e8ecef;
}
.customer-detail-meta-popup-doc-table th {
    font-weight: 600;
    color: #5a6c7d;
    background: #f4f6f8;
}
.customer-detail-meta-popup-doc-row:hover {
    background: #fafbfc;
}
.customer-detail-meta-popup-doc-name {
    font-weight: 500;
    color: #2c3e50;
}
.customer-detail-meta-popup-doc-count {
    color: #6c7a89;
}
.customer-detail-meta-popup-doc-actions {
    white-space: nowrap;
}
.customer-detail-meta-popup-doc-actions .customer-detail-meta-popup-action-btn:last-child {
    margin-right: 0;
}
.customer-detail-meta-popup-action-btn {
    padding: 4px 8px;
    margin-right: 8px;
    font-size: 11px;
    border: 1px solid #95a5a6;
    border-radius: 4px;
    background: #f8f9fa;
    color: #2c3e50;
    cursor: pointer;
}
.customer-detail-meta-popup-action-btn:hover {
    background: #ecf0f1;
    border-color: #7f8c8d;
}
.customer-detail-meta-popup-action-btn[data-action="renew"] {
    border-color: #3498db;
    color: #3498db;
    background: #fff;
}
.customer-detail-meta-popup-action-btn[data-action="renew"]:hover {
    background: #ebf5fb;
}
.customer-detail-meta-popup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
}
.customer-detail-meta-popup-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.customer-detail-meta-popup-label {
    font-size: 11px;
    font-weight: 600;
    color: #5a6c7d;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.customer-detail-meta-popup-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}
.customer-detail-meta-popup-row input[type="checkbox"],
.customer-detail-meta-popup-row input[type="radio"] {
    margin: 0;
}
.customer-detail-meta-popup-mandat-cb {
    margin-bottom: 2px;
}
.customer-detail-meta-popup-konzern-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.customer-detail-meta-popup-konzern-value {
    font-size: 13px;
    color: #2c3e50;
}
.customer-detail-meta-popup-konzern-btn {
    padding: 4px 10px;
    font-size: 11px;
    border: 1px solid #3498db;
    border-radius: 4px;
    background: #fff;
    color: #3498db;
    cursor: pointer;
}
.customer-detail-meta-popup-konzern-btn:hover {
    background: #ebf5fb;
}
.customer-detail-meta-popup-select {
    width: 80px;
    padding: 6px 8px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Ansehen-Modal: Dokument(e) in der Anwendung anzeigen */
.customer-detail-doc-view-inner {
    min-width: 360px;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
}
.customer-detail-doc-view-list {
    margin-bottom: 16px;
    max-height: 280px;
    overflow-y: auto;
}
.customer-detail-doc-view-item {
    padding: 10px 12px;
    border: 1px solid #e8ecef;
    border-radius: 4px;
    margin-bottom: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.customer-detail-doc-view-item:hover {
    background: #f4f6f8;
    border-color: #bdc3c7;
}
.customer-detail-doc-view-name {
    font-weight: 500;
    color: #2c3e50;
    font-size: 13px;
}
.customer-detail-doc-view-meta {
    font-size: 11px;
    color: #6c7a89;
}
.customer-detail-doc-view-detail {
    padding: 12px 0;
    border-top: 1px solid #e8ecef;
}
.customer-detail-doc-view-detail-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 12px;
    color: #2c3e50;
}
.customer-detail-doc-view-detail-row {
    font-size: 12px;
    margin-bottom: 8px;
}
.customer-detail-doc-view-detail-label {
    display: inline-block;
    min-width: 90px;
    color: #6c7a89;
}
.customer-detail-doc-view-detail-note {
    font-size: 11px;
    color: #95a5a6;
    margin-top: 12px;
    font-style: italic;
}
.customer-detail-meta-popup-doc-back {
    margin-top: 12px;
    padding: 6px 12px;
    font-size: 11px;
    border: 1px solid #95a5a6;
    border-radius: 4px;
    background: #fff;
    color: #2c3e50;
    cursor: pointer;
}
.customer-detail-meta-popup-doc-back:hover {
    background: #ecf0f1;
}

.customer-detail-header-konzern-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.customer-detail-konzern-link {
    color: #3498db;
    text-decoration: none;
    font-weight: 500;
}
.customer-detail-konzern-link:hover {
    text-decoration: underline;
}
.customer-detail-konzern-overlay-inner {
    min-width: 320px;
    max-width: 420px;
}
.customer-detail-konzern-results {
    max-height: 220px;
    overflow-y: auto;
    margin-top: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fafafa;
}
.customer-detail-konzern-result-row {
    display: block;
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
}
.customer-detail-konzern-result-row:hover {
    background: #e8f4fc;
}
.customer-detail-konzern-result-id {
    font-size: 11px;
    color: #666;
    margin-left: 8px;
}
.customer-detail-konzern-no-results,
.customer-detail-konzern-hint {
    padding: 12px;
    font-size: 12px;
    color: #666;
}
.customer-detail-konzern-actions {
    margin-top: 12px;
}
.customer-detail-art-option {
    display: block;
    margin-bottom: 6px;
    cursor: pointer;
    font-size: 12px;
}
.customer-detail-art-option input {
    margin-right: 8px;
}
.customer-detail-overlay-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.customer-detail-overlay-btn {
    padding: 6px 14px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid #ccc;
    background: #f7f7f7;
}
.customer-detail-overlay-save {
    background: #2980b9;
    color: #fff;
    border: 1px solid #2471a3;
    font-weight: 500;
}
.customer-detail-overlay-save:hover {
    background: #2471a3;
}

/* Scroll-Bereich: Dashboard-Karten + Tab-Leiste + Tab-Inhalt (nicht scrollen – Tab-Panels scrollen) */
.customer-detail-scroll-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Dashboard Kundenmaske: kompakt, wenig vertikaler Platz */
.customer-detail-dashboard-wrap {
    background: #3d4f5c;
    padding: 8px 16px 28px;
    transition: all 0.3s;
    flex-shrink: 0;
}

.customer-detail-dashboard-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 10px;
    align-items: stretch;
}

.customer-detail-dashboard-card {
    background: #2c3e50;
    border: 1px solid #1a252f;
    border-radius: 4px;
    padding: 6px 10px 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.customer-detail-dashboard-card-title {
    font-size: 11px;
    font-weight: 600;
    color: #ecf0f1;
    flex: 0 0 auto;
}

.customer-detail-dashboard-card-body {
    text-align: center;
}

.customer-detail-dashboard-card-value {
    font-size: 22px;
    font-weight: bold;
    color: #3498db;
    line-height: 1;
}

.customer-detail-dashboard-card-desc {
    font-size: 10px;
    color: #95a5a6;
}

/* Kombinierte Karte: Vorgänge + Zusammenfassung */
.customer-detail-dashboard-card-vorgaenge-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-wrap: nowrap;
}

.customer-detail-dashboard-vorgaenge-block {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.customer-detail-dashboard-vorgaenge-block .customer-detail-dashboard-card-value {
    margin-right: 2px;
}

.customer-detail-dashboard-summary-block {
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.customer-detail-dashboard-vorgaenge-stats {
    width: 100%;
    flex: 0 0 100%;
    font-size: 10px;
    color: #95a5a6;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.customer-detail-dashboard-vorgaenge-stats span {
    white-space: nowrap;
}

/* Logo-Karte: nur Dropzone, ohne Überschrift */
.customer-detail-logo-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.customer-detail-logo-dropzone {
    flex: 1;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #7f8c8d;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    overflow: hidden;
}

.customer-detail-logo-dropzone:hover,
.customer-detail-logo-dropzone.customer-detail-logo-dropzone--active {
    border-color: #3498db;
    background: rgba(52, 152, 219, 0.1);
}

.customer-detail-logo-placeholder {
    font-size: 11px;
    color: #95a5a6;
    text-align: center;
    padding: 0 6px;
}

.customer-detail-logo-preview {
    max-width: 100%;
    max-height: 100px;
    object-fit: contain;
}

/* Gesamte Kundenmaske: Drag-Over-Hinweis beim Ziehen von Dateien */
.customer-detail.customer-detail--drag-over .customer-detail-scroll-body {
    outline: 2px dashed #3498db;
    outline-offset: -2px;
    background: rgba(52, 152, 219, 0.05);
}

/* Upload-Overlay: erscheint beim Ziehen von Dateien, sichtbare Drop-Zone (ehem. Upload-Service) */
.customer-detail-upload-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(44, 62, 80, 0.85);
    pointer-events: none;
}

.customer-detail-upload-overlay.customer-detail-upload-overlay--visible {
    display: flex;
    pointer-events: auto;
}

.customer-detail-upload-drop-box {
    border: 3px dashed #3498db;
    border-radius: 8px;
    padding: 28px 40px;
    background: rgba(52, 152, 219, 0.15);
    text-align: center;
    min-width: 260px;
}

.customer-detail-upload-drop-icon {
    display: block;
    font-size: 36px;
    margin-bottom: 10px;
}

.customer-detail-upload-drop-text {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #ecf0f1;
    margin-bottom: 6px;
}

.customer-detail-upload-drop-hint {
    display: block;
    font-size: 11px;
    color: #95a5a6;
}

.customer-detail-dropzone {
    border: 2px dashed #7f8c8d;
    border-radius: 4px;
    padding: 12px;
    text-align: center;
    margin-bottom: 8px;
    cursor: pointer;
    color: #fff;
    font-size: 11px;
}

.customer-detail-dashboard-card .customer-detail-dropzone:last-child {
    margin-bottom: 0;
}

/* Zusammenfassung: 2 Spalten, kompakte Zeilen */
.customer-detail-dashboard-card-summary {
    align-items: flex-start;
}

.customer-detail-dashboard-card-summary .customer-detail-dashboard-card-title {
    width: 100%;
    flex: 0 0 100%;
}

.customer-detail-dashboard-summary {
    font-size: 10px;
    color: #ecf0f1;
    line-height: 1.35;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 10px;
    width: 100%;
}

.customer-detail-dashboard-summary span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-detail-summary-ok {
    color: #27ae60;
}

.customer-detail-summary-missing {
    color: #e74c3c;
}

.customer-detail-tab-bar {
    background: #34495e;
    border-bottom: 2px solid #2c3e50;
    display: flex;
    gap: 2px;
    padding: 0 20px;
    flex-shrink: 0;
}

.customer-detail-tab-bar .customer-detail-tab-btn {
    background: #e0e0e0;
    border: none;
    padding: 8px 16px;
    font-size: 11px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    color: #666;
}

.customer-detail-tab-bar .customer-detail-tab-btn:hover {
    background: #d0d0d0;
    color: #333;
}

.customer-detail-tab-bar .customer-detail-tab-btn.active {
    background: #fff;
    font-weight: 600;
    border-bottom-color: #e67e22;
    color: #c0392b;
}

/* Tab-Inhalt im Scroll-Bereich: Flex-Layout für korrektes Scrollen */
/* (Alte Regeln mit flex:none entfernt - verursachten Scroll-Probleme) */

/* Kunden-Detail: Dashboard-Toggle (ein/ausklappbar) */
.customer-detail-dashboard-toggle {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 16px;
    cursor: pointer;
}

.customer-detail-dashboard-toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.customer-detail-dashboard-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #7f8c8d;
    border-radius: 16px;
    transition: background-color 0.3s;
}

.customer-detail-dashboard-toggle-dot {
    position: absolute;
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.customer-detail-dashboard-toggle-input:checked+.customer-detail-dashboard-toggle-slider {
    background-color: #3498db;
}

.customer-detail-dashboard-toggle-input:checked+.customer-detail-dashboard-toggle-slider+.customer-detail-dashboard-toggle-dot {
    transform: translateX(14px);
}


/* Statistik-Sektion (kollabierbar) */
.vm-stats-section {
    flex-shrink: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    max-height: 500px;
    opacity: 1;
}

.vm-stats-section.collapsed {
    max-height: 0;
    opacity: 0;
    padding: 0;
}

/* Statistik-Karten */
.vm-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 0 20px 16px;
    background: #1e2d3a;
}

.vm-stat-card {
    background: #2c3e50;
    border: 1px solid #3d5166;
    border-radius: 4px;
    padding: 14px;
}

.vm-stat-card--primary {
    background: #1a3a4a;
    border-color: #2a5a6a;
}

.vm-stat-card-title {
    font-size: 11px;
    color: #8fa4b8;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vm-stat-card-value {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.vm-stat-card-label {
    font-size: 10px;
    color: #6a8a9a;
    margin-bottom: 12px;
}

.vm-stat-card-details {
    display: flex;
    gap: 16px;
    padding-top: 10px;
    border-top: 1px solid #3a5a6a;
}

.vm-stat-detail {
    display: flex;
    flex-direction: column;
}

.vm-stat-detail-value {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.vm-stat-detail-label {
    font-size: 9px;
    color: #6a8a9a;
    line-height: 1.3;
}

/* Chart-Karten */
.vm-stat-card--chart {
    display: flex;
    flex-direction: column;
}

.vm-stat-card-chart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: 8px;
}

.vm-chart-nav {
    background: transparent;
    border: none;
    color: #6a8a9a;
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.15s;
}

.vm-chart-nav:hover {
    color: #fff;
}

.vm-chart-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    justify-content: center;
}

.vm-donut-chart {
    flex-shrink: 0;
}

.vm-chart-info {
    text-align: left;
}

.vm-chart-info-label {
    font-size: 11px;
    color: #8fa4b8;
    margin-bottom: 4px;
}

.vm-chart-info-label--small {
    font-size: 10px;
    line-height: 1.3;
}

.vm-chart-info-value {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

/* Haupt-Body – nimmt Resthöhe, damit Tabelle darunter scrollen kann */
.vm-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #f5f7fa;
}

/* Filter-Sidebar */
.vm-filters {
    width: 220px;
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vm-filters-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: #2980b9;
    color: #fff;
}

.vm-filters-icon {
    font-size: 14px;
}

.vm-filters-title {
    font-size: 12px;
    font-weight: 600;
    flex: 1;
}

.vm-filters-toggle {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 10px;
    cursor: pointer;
}

.vm-filter-reset-btn {
    margin: 10px 14px;
    padding: 6px 10px;
    background: #f5f5f5;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: 11px;
    color: var(--text-main);
    cursor: pointer;
    text-align: center;
}

.vm-filter-reset-btn:hover {
    background: #e8e8e8;
}

.vm-filters-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 14px 14px;
}

.vm-filters-body.collapsed {
    display: none;
}

.vm-filter-group {
    margin-bottom: 14px;
}

.vm-filter-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 6px;
}

.vm-filter-input,
.vm-filter-select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: 11px;
    color: var(--text-main);
}

.vm-filter-input:focus,
.vm-filter-select:focus {
    outline: none;
    border-color: #2980b9;
}

.vm-filter-input--small {
    width: 70px;
}

.vm-filter-subgroup {
    margin-bottom: 8px;
}

.vm-filter-sublabel {
    display: block;
    font-size: 10px;
    color: var(--text-light);
    margin-bottom: 4px;
    font-weight: 600;
}

.vm-filter-range {
    display: flex;
    gap: 8px;
    align-items: center;
}

.vm-filter-range-field {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--text-light);
}

.vm-filter-hint {
    font-size: 10px;
    color: #999;
    font-style: italic;
}

/* Tabellen-Bereich – Scroll-Container für Tabelle */
.vm-table-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.vm-toolbar {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.vm-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vm-select-all {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-main);
    cursor: pointer;
}

.vm-select-all input {
    margin: 0;
}

.vm-toolbar-divider {
    width: 1px;
    height: 16px;
    background: var(--border-color);
}

.vm-selected-count {
    font-size: 11px;
    color: var(--text-light);
}

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

.vm-export-btn {
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: 11px;
    color: var(--text-main);
    cursor: pointer;
}

.vm-export-btn:hover {
    background: #f5f5f5;
}

.vm-total-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-main);
    padding: 4px 10px;
    background: #e8f4fc;
    border-radius: 12px;
}

.vm-refresh-btn {
    background: #2980b9;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vm-refresh-btn:hover {
    background: #2473a8;
}

/* Tabelle – Container mit fixem Header und scrollbarem Body */
.vm-table-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
}

.vm-table-header {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 36px 110px 1.5fr 1fr 90px 100px 100px 80px 1fr;
    gap: 8px;
    padding: 10px 20px;
    background: #34495e;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    align-items: end;
}

/* Vertragsmanager: Empty-State wenn keine Verträge / keine Treffer */
.vm-empty-state {
    padding: 32px 20px;
    text-align: center;
    font-size: 13px;
    color: #5a6c7d;
    background: #f8f9fa;
}
.vm-empty-hint {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    color: #8fa4b8;
}

.vm-th {
    line-height: 1.3;
}

.vm-th--check {
    display: flex;
    align-items: center;
}

.vm-th input {
    margin: 0;
}

.vm-sort {
    font-size: 8px;
    opacity: 0.6;
    margin-left: 2px;
}

.vm-table-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
}

.vm-table-row {
    display: grid;
    grid-template-columns: 36px 110px 1.5fr 1fr 90px 100px 100px 80px 1fr;
    gap: 8px;
    padding: 10px 20px;
    border-bottom: 1px solid #eee;
    font-size: 11px;
    align-items: center;
    transition: background 0.1s;
}

.vm-table-row:hover {
    background: #f8f9fa;
}

.vm-td--check {
    display: flex;
    align-items: center;
}

.vm-td--check input {
    margin: 0;
}

.vm-contract-link,
.vm-customer-link,
.sm-schadensnummer-link {
    color: #2980b9;
    text-decoration: none;
    cursor: pointer;
}

.vm-contract-link:hover,
.vm-customer-link:hover,
.sm-schadensnummer-link:hover {
    text-decoration: underline;
}

.vm-td--insurer {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vm-insurer-icon {
    width: 18px;
    height: 18px;
    background: #2980b9;
    color: #fff;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}

.vm-status {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
}

.vm-status--active {
    background: #d4edda;
    color: #155724;
}

.vm-status--cancelled {
    background: #f8d7da;
    color: #721c24;
}

.vm-td--amount {
    text-align: right;
    font-family: 'Consolas', 'Monaco', monospace;
}

/* ========== Schadenmanager (sm-*) ========== */
.sm-page {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #e8eef3;
    padding: 20px;
}

.sm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.sm-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
}

.sm-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sm-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.sm-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.sm-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    border-radius: 20px;
    transition: 0.2s;
}

.sm-toggle-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.2s;
}

.sm-toggle input:checked+.sm-toggle-slider {
    background: #2d6cdf;
}

.sm-toggle input:checked+.sm-toggle-slider:before {
    transform: translateX(20px);
}

.sm-toggle-label {
    font-size: 11px;
    color: #555;
}

.sm-stats-section {
    flex-shrink: 0;
    margin-bottom: 16px;
}

.sm-stats-section.sm-stats-section--hidden {
    display: none;
}

.sm-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.sm-stat-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.sm-stat-card-title {
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 12px;
}

.sm-stat-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sm-stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
}

.sm-stat-value {
    font-weight: 700;
    min-width: 24px;
    color: #2c3e50;
}

.sm-stat-label {
    color: #555;
}

.sm-stat-card--chart {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sm-year-big {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 4px;
}

.sm-year-big-label {
    font-size: 11px;
    color: #555;
    margin-bottom: 12px;
}

.sm-year-chart {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sm-year-row {
    display: grid;
    grid-template-columns: 50px 1fr 36px;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.sm-year-label {
    color: #555;
}

.sm-year-bar-bg {
    height: 14px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.sm-year-bar-fill {
    height: 100%;
    background: #4a90d9;
    border-radius: 4px;
    transition: width 0.2s;
}

.sm-year-value {
    font-weight: 600;
    text-align: right;
    color: #2c3e50;
}

.sm-filter-bar {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.sm-filter-dropdown-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sm-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #2d6cdf;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.sm-filter-btn:hover {
    background: #2563c7;
}

.sm-filter-info {
    font-size: 11px;
    color: #555;
}

.sm-filter-reset {
    font-size: 11px;
    color: #2d6cdf;
    text-decoration: none;
}

.sm-filter-reset:hover {
    text-decoration: underline;
}

.sm-table-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.sm-table-toolbar {
    padding: 10px 16px;
    border-bottom: 1px solid #dee2e6;
    font-size: 11px;
    font-weight: 600;
    color: #555;
}

.sm-table-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.sm-table-header {
    display: grid;
    grid-template-columns: 120px 90px 1fr 1.5fr 110px 100px 110px 1fr 1.2fr;
    gap: 8px 12px;
    padding: 10px 16px;
    background: #3d4f5c;
    color: #ecf0f1;
    font-size: 11px;
    font-weight: 600;
}

.sm-th {
    display: flex;
    align-items: center;
}

.sm-sort {
    opacity: 0.8;
    margin-left: 4px;
}

.sm-table-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.sm-table-row {
    display: grid;
    grid-template-columns: 120px 90px 1fr 1.5fr 110px 100px 110px 1fr 1.2fr;
    gap: 8px 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #eee;
    font-size: 11px;
    color: #2c3e50;
    align-items: center;
}

.sm-table-row:hover {
    background: #f8f9fa;
}

.sm-td--amount {
    text-align: right;
}

.sm-link {
    color: #2d6cdf;
    text-decoration: none;
    font-weight: 600;
}

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

.sm-empty-row {
    padding: 24px 16px;
    text-align: center;
    color: #7f8c8d;
    font-size: 12px;
}

.sm-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    font-size: 11px;
}

.sm-pagination-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sm-page-size-select {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 11px;
}

.sm-pagination-center {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sm-pagination-btn {
    padding: 4px 10px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.sm-pagination-btn:hover:not(:disabled) {
    background: #f0f0f0;
}

.sm-pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========== Antragsmanager: gleiche Struktur wie Vertragsmanager (vm-page--applications) ========== */
.vm-page--applications .vm-stats-row {
    grid-template-columns: repeat(2, 1fr);
}

.vm-page--applications .vm-stat-card-note {
    font-size: 10px;
    color: #6a8a9a;
    margin-top: 4px;
}

.vm-stat-month-bar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.vm-stat-month-row {
    display: grid;
    grid-template-columns: 36px 1fr 24px;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: #8fa4b8;
}

.vm-stat-month-label {
    flex-shrink: 0;
}

.vm-stat-month-bar-bg {
    height: 10px;
    background: #3d5166;
    border-radius: 3px;
    overflow: hidden;
}

.vm-stat-month-bar-fill {
    display: block;
    height: 100%;
    background: #3498db;
    border-radius: 3px;
    min-width: 2px;
}

.vm-stat-month-value {
    font-weight: 600;
    color: #fff;
    text-align: right;
}

.vm-page--applications .vm-table-header,
.vm-page--applications .vm-table-row {
    grid-template-columns: 36px 90px 1.2fr 1.5fr 1fr 85px 95px 95px 100px 95px;
}

/* Schadenmanager: 10 Spalten (Check, Schadennr., Schadenhöhe, Sparte, Versicherer, Vertrag, Status, Datum, Notiz, Kunde) */
.vm-page--schaeden .vm-table-header,
.vm-page--schaeden .vm-table-row {
    grid-template-columns: 36px 95px 85px 1fr 1.2fr 90px 85px 88px 1.2fr 1fr;
}

.vm-th--contract,
.vm-td--contract {
    min-width: 0;
}

.vm-th--note,
.vm-td--note {
    min-width: 0;
    font-size: 10px;
    color: #555;
}

.vm-td--date {
    font-size: 11px;
}

/* Toolbar-Buttons: einheitlich für alle Manager (Antragsmanager, Schadenmanager, Vertragsmanager) */
.vm-page .vm-toolbar-left .vm-icon-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border-color);
    background: #fff;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vm-page .vm-toolbar-left .vm-icon-btn:hover {
    background: #f5f5f5;
}

.vm-page .vm-add-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    background: #2980b9;
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vm-page .vm-add-btn:hover {
    background: #2473a8;
}

.vm-empty-row {
    padding: 24px 20px;
    text-align: center;
    color: var(--text-light);
    font-size: 12px;
    grid-column: 1 / -1;
}

/* Contract Detail – linke Sidebar (Vertragsübersicht) */
.cd-detail-sidebar {
    width: 380px;
    min-width: 380px;
    background: var(--bg-white);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    padding: 10px 12px;
    font-size: 12px;
}

.cd-sidebar-section {
    margin-bottom: 10px;
}

.cd-sidebar-edit-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.cd-sidebar-edit-btn {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-white);
    color: var(--text-light);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cd-sidebar-edit-btn:hover {
    border-color: var(--brand-blue-start);
    color: var(--brand-blue-start);
}

.cd-sidebar-edit-btn--active {
    background: var(--brand-blue-start);
    border-color: var(--brand-blue-start);
    color: white;
}

/* Gesamte linke Spalte: disabled Felder wirken wie reiner Text */
.cd-detail-sidebar input:disabled,
.cd-detail-sidebar select:disabled,
.cd-detail-sidebar textarea:disabled {
    border-color: transparent;
    background: transparent;
    color: var(--text-main);
    cursor: default;
}

.cd-detail-sidebar select:disabled {
    appearance: none;
}

.cd-detail-sidebar button.cd-sidebar-link-btn:disabled {
    cursor: default;
    color: var(--text-light);
}

.cd-sidebar-section-title {
    margin: 0 0 6px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
}

.cd-sidebar-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    align-items: center;
    margin-bottom: 4px;
}

.cd-sidebar-row--textarea {
    grid-template-columns: 1fr;
    align-items: start;
    margin-bottom: 4px;
}

.cd-sidebar-label {
    font-weight: 600;
    color: #2c3e50;
    font-size: 11px;
}

.cd-sidebar-value {
    color: var(--text-main);
}

.cd-sidebar-input,
.cd-sidebar-select {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 11px;
    font-family: inherit;
}

.cd-sidebar-input:focus,
.cd-sidebar-select:focus {
    outline: none;
    border-color: var(--brand-blue-start);
}

.cd-sidebar-textarea {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 11px;
    font-family: inherit;
    resize: vertical;
    min-height: 48px;
}

.cd-sidebar-link-btn {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    text-decoration: underline;
}

.cd-sidebar-link-btn:hover {
    color: var(--brand-blue-start);
}

.cd-header-btn {
    background: transparent;
    border: 1px dashed #bdc3c7;
    color: white;
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.cd-header-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Vertrags-Header: einheitlich, linksbündig, eine Reihe */
.cd-contract-header {
    background: #2c3e50;
    padding: 14px 20px;
    color: white;
    flex-shrink: 0;
}

.cd-contract-header-row-top {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
}

.cd-contract-header-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 20px;
}

.cd-contract-header-icon {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: white;
    color: #2c3e50;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

.cd-contract-header-title {
    min-width: 0;
}

.cd-contract-header-h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.cd-contract-header-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 2px;
}

.cd-contract-header-sep {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    margin: 0 20px;
}

.cd-contract-header-type-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
    padding-right: 16px;
}

.cd-contract-header-info {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.cd-contract-header-block {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 10px 14px;
    min-width: 0;
}

.cd-contract-header-block-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
}

.cd-contract-header-row {
    display: flex;
    gap: 10px;
    font-size: 12px;
    line-height: 1.6;
}

.cd-contract-header-row .cd-contract-header-label {
    flex-shrink: 0;
}

.cd-contract-header-label {
    color: rgba(255, 255, 255, 0.8);
}

.cd-contract-header-value {
    color: #fff;
    font-weight: 500;
}

.cd-contract-header-status {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    margin-left: auto;
    flex-shrink: 0;
}

.cd-contract-header-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Tab-Leiste (Vertragsdetails, Schäden, …): neutral, ohne Farbänderung */
.cd-contract-tab-list {
    background: white;
    border-bottom: 1px solid #dee2e6;
}

.cd-contract-tab-list-inner {
    display: flex;
    gap: 4px;
    padding: 0 20px;
}

.cd-contract-tab-list-inner .contract-sub-tab-btn {
    padding: 12px 16px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: #666;
    font-size: 13px;
    cursor: pointer;
}

.cd-contract-tab-list-inner .contract-sub-tab-btn:hover {
    color: #2c3e50;
}

.cd-contract-tab-list-inner .contract-sub-tab-btn.active {
    font-weight: 600;
    color: #2c3e50;
    border-bottom-color: #2c3e50;
}

/* Vertragsdetails-Reiter: mind. 4 Boxen in einer Reihe, kompakt */
.cd-vertragsdetails-page {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 100%;
    flex-wrap: wrap;
}

/* Reiter Allgemein: Stammdaten oben als übergeordnete Einheit, darunter Risiko-Wagnis-Boxen */
.cd-vertragsdetails-page--allgemein {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.cd-vertragsdetails-stammdaten-block {
    width: 100%;
    margin-bottom: 20px;
    padding: 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.cd-vertragsdetails-stammdaten-block .cd-vertragsdetails-page {
    margin: 0;
}

.cd-vertragsdetails-risiko-wagnis-block {
    width: 100%;
    flex: 1;
    min-height: 0;
}

.cd-vertragsdetails-box {
    background: white;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 12px 14px;
    width: fit-content;
    max-width: 100%;
    flex: 0 0 auto;
}

.cd-vertragsdetails-box--wagnis {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.cd-vertragsdetails-section {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    align-items: center;
    font-size: 11px;
}

.cd-vertragsdetails-section-title {
    grid-column: 1 / -1;
    margin: 0 0 4px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
    font-weight: 600;
    color: #2c3e50;
}

.cd-vertragsdetails-section .cd-detail-mask-row>.cd-detail-mask-value {
    font-weight: 400;
}

.contract-sub-tab-panel[data-contract-sub-panel="allgemein"] {
    padding: 12px 16px;
}

/* Reiter Allgemein (Vertragsmaske): eine gemeinsame Seite, nur Boxen, kompakt */
.ct-allgemein-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.ct-allgemein-toolbar-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    color: #2c3e50;
    user-select: none;
}

.ct-allgemein-toolbar-label input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.ct-allgemein-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}

.ct-allgemein-wrap--hide-empty .ct-allgemein-box:not(.ct-allgemein-box--has-data) {
    display: none;
}

.ct-allgemein-box {
    width: fit-content;
    min-width: 160px;
    max-width: 320px;
    background: #fff;
    border: 1px solid #e5e9ed;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.ct-allgemein-box:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.ct-allgemein-box-header {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #2c3e50;
    background: #f5f7f9;
    border-bottom: 1px solid #eef1f4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.ct-allgemein-box--has-data .ct-allgemein-box-header {
    background: #eef3f8;
    border-bottom-color: #e5e9ed;
}

.ct-allgemein-box-title {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: #2c3e50;
}

.ct-allgemein-box-body {
    padding: 6px 12px 10px;
}

.ct-allgemein-box-body .cd-data-row,
.ct-allgemein-box-body .cd-detail-mask-row {
    padding: 4px 0;
    border-bottom: none;
}

.ct-allgemein-box-body .cd-data-row:last-child,
.ct-allgemein-box-body .cd-detail-mask-row:last-child {
    border-bottom: none;
}

.ct-allgemein-box-body .cd-data-label,
.ct-allgemein-box-body .cd-detail-mask-label {
    min-width: 100px;
    font-size: 11px;
}

.ct-allgemein-box-body .cd-data-value,
.ct-allgemein-box-body .cd-detail-mask-value {
    font-size: 11px;
}

.ct-allgemein-box-body .cd-detail-mask-input {
    font-size: 11px;
    padding: 2px 6px;
    min-width: 0;
}

/* Vertragsdetails-Reiter: spartenspezifische Masken (KFZ, PHV, …), kompakt */
.cd-detail-mask-card {
    padding: 0;
}

.cd-detail-mask-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-color, #dee2e6);
}

.cd-detail-mask-card-title {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #2c3e50;
}

.cd-detail-mask-card-header .cd-detail-mask-edit-btn {
    min-width: auto;
    width: auto;
    height: auto;
    padding: 4px 10px;
    font-size: 12px;
}

.cd-detail-mask-card .cd-detail-mask-body {
    position: relative;
    padding-top: 4px;
}

.cd-detail-mask {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    align-items: center;
    font-size: 11px;
}

.cd-detail-mask-subtitle {
    grid-column: 1 / -1;
    margin: 8px 0 2px 0;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--border-color);
    font-size: 11px;
    font-weight: 600;
    color: #2c3e50;
}

.cd-detail-mask-subtitle:first-child {
    margin-top: 0;
}

.cd-detail-mask-row {
    display: contents;
}

.cd-detail-mask-row>.cd-detail-mask-label {
    font-weight: 600;
    color: #2c3e50;
}

.cd-detail-mask-row>.cd-detail-mask-value {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cd-detail-mask-label {
    font-size: 10px;
}

.cd-detail-mask-input,
.cd-detail-mask-select {
    padding: 2px 6px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: 10px;
    font-family: inherit;
    min-width: 100px;
}

.cd-detail-mask-remove {
    color: #999;
    cursor: pointer;
    font-size: 14px;
}

.cd-detail-mask-remove:hover {
    color: #e74c3c;
}

.cd-detail-mask--placeholder {
    grid-column: 1 / -1;
    color: #7f8c8d;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* Bearbeiten-Button für PHV-Vertragsdetails-Maske */
.cd-detail-mask-edit-btn {
    flex-shrink: 0;
    min-width: auto;
    height: auto;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-white);
    color: var(--text-light);
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cd-detail-mask-edit-btn:hover {
    border-color: var(--brand-blue-start);
    color: var(--brand-blue-start);
}

.cd-detail-mask-edit-btn--active {
    background: var(--brand-blue-start);
    border-color: var(--brand-blue-start);
    color: white;
}

/* PHV-Maske: disabled Felder wirken wie reiner Text */
.cd-detail-mask[data-detail-mask="PHV"] input:disabled,
.cd-detail-mask[data-detail-mask="PHV"] select:disabled {
    border-color: transparent;
    background: transparent;
    color: var(--text-main);
    cursor: default;
}

.cd-detail-mask[data-detail-mask="PHV"] select:disabled {
    appearance: none;
}

/* HRV-Maske (Hausrat): disabled Felder wirken wie reiner Text */
.cd-detail-mask[data-detail-mask="HRV"] input:disabled,
.cd-detail-mask[data-detail-mask="HRV"] select:disabled {
    border-color: transparent;
    background: transparent;
    color: var(--text-main);
    cursor: default;
}

.cd-detail-mask[data-detail-mask="HRV"] select:disabled {
    appearance: none;
}

/* VWG-Maske (Wohngebäude): disabled Felder wirken wie reiner Text */
.cd-detail-mask[data-detail-mask="VWG"] input:disabled,
.cd-detail-mask[data-detail-mask="VWG"] select:disabled {
    border-color: transparent;
    background: transparent;
    color: var(--text-main);
    cursor: default;
}

.cd-detail-mask[data-detail-mask="VWG"] select:disabled {
    appearance: none;
}

/* ========== Universelle Risiko-Wagnis Maske ========== */
.cd-risiko-wagnis-toolbar {
    margin-bottom: 12px;
    padding: 8px 0;
}

.cd-risiko-wagnis-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-main, #2c3e50);
    user-select: none;
}

.cd-risiko-wagnis-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Nur gefüllte Boxen anzeigen: leere Boxen ausblenden */
.cd-universal-mask-container--hide-empty .cd-universal-box:not(.cd-universal-box--has-data) {
    display: none;
}

.cd-universal-mask {
    display: block !important;
    grid-template-columns: none;
}

.cd-universal-mask-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--brand-blue-start);
}

.cd-universal-mask-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 32px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, var(--brand-blue-start) 0%, var(--brand-blue-end) 100%);
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.cd-universal-mask-type-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
}

.cd-universal-boxes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 1400px) {
    .cd-universal-boxes-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1100px) {
    .cd-universal-boxes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cd-universal-box {
    background: var(--bg-white);
    border: 2px solid #e1e8ed;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
}

.cd-universal-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-blue-start) 0%, var(--brand-blue-end) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cd-universal-box:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.cd-universal-box:hover::before {
    opacity: 1;
}

.cd-universal-box--editing {
    border-color: var(--brand-blue-end);
    box-shadow: 0 0 0 4px rgba(45, 108, 223, 0.15);
}

/* Klickbare Boxen */
.cd-box-clickable {
    cursor: pointer;
}

.cd-box-clickable:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    border-color: var(--brand-blue-end);
    transform: translateY(-3px);
}

.cd-box-clickable:active {
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

.cd-universal-box-header {
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 2px solid #e1e8ed;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cd-universal-box-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1a202c;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cd-universal-box-title::before {
    content: '';
    width: 4px;
    height: 20px;
    background: linear-gradient(180deg, var(--brand-blue-start) 0%, var(--brand-blue-end) 100%);
    border-radius: 2px;
    flex-shrink: 0;
}

.cd-universal-box-body {
    padding: 20px;
    background: #fff;
}

.cd-universal-box-body:empty {
    padding: 16px 20px;
}

.cd-universal-box-body:empty::after {
    content: 'Keine Daten vorhanden';
    display: block;
    text-align: center;
    color: #a0aec0;
    font-size: 12px;
    font-style: italic;
}

/* Indikator für Boxen mit Daten */
.cd-universal-box-indicator {
    font-size: 8px;
    color: #27ae60;
}

/* Boxen MIT Daten: farbiger Header und volle Textfarbe */
.cd-universal-box--has-data .cd-universal-box-title {
    color: var(--text-main);
}

.cd-universal-box--has-data .cd-universal-box-header {
    border-bottom: 1px solid var(--border-color);
}

.cd-universal-box-content {
    padding: 10px 14px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 10px;
    font-size: 11px;
}

.cd-universal-box-content .cd-detail-mask-row {
    display: contents;
}

.cd-universal-box-content .cd-detail-mask-label {
    font-size: 10px;
    font-weight: 600;
    color: #5a6a7d;
    white-space: nowrap;
    padding: 4px 0;
}

.cd-universal-box-content .cd-detail-mask-value {
    display: flex;
    align-items: center;
}

.cd-universal-box-content .cd-detail-mask-input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    font-size: 11px;
    color: var(--text-main);
    transition: border-color 0.2s, background 0.2s;
}

.cd-universal-box-content .cd-detail-mask-input:disabled {
    border-color: transparent;
    background: transparent;
    cursor: default;
}

.cd-universal-box-content .cd-detail-mask-input:not(:disabled) {
    border-color: var(--border-color);
    background: var(--bg-white);
}

.cd-universal-box-content .cd-detail-mask-input:not(:disabled):focus {
    outline: none;
    border-color: var(--brand-blue-start);
    box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.15);
}

.cd-universal-box-content .cd-detail-mask-input::placeholder {
    color: #adb5bd;
    font-style: italic;
}

/* Kategorie-spezifische Farben für Box-Header - NUR wenn Daten vorhanden */
.cd-universal-box--has-data[data-category="basis-risiko"] .cd-universal-box-header {
    background: linear-gradient(135deg, #e8f4fc 0%, #d4ecf9 100%);
    border-bottom-color: #b8daf0;
}

.cd-universal-box--has-data[data-category="versicherungssummen"] .cd-universal-box-header {
    background: linear-gradient(135deg, #e8f9e8 0%, #d4f0d4 100%);
    border-bottom-color: #a8dba8;
}

.cd-universal-box--has-data[data-category="selbstbeteiligung"] .cd-universal-box-header {
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    border-bottom-color: #ffd54f;
}

.cd-universal-box--has-data[data-category="risiko-adresse"] .cd-universal-box-header {
    background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
    border-bottom-color: #f48fb1;
}

.cd-universal-box--has-data[data-category="fahrzeug"] .cd-universal-box-header {
    background: linear-gradient(135deg, #e1f5fe 0%, #b3e5fc 100%);
    border-bottom-color: #4fc3f7;
}

.cd-universal-box--has-data[data-category="gebaeude"] .cd-universal-box-header {
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    border-bottom-color: #ba68c8;
}

.cd-universal-box--has-data[data-category="wertermittlung"] .cd-universal-box-header {
    background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%);
    border-bottom-color: #4db6ac;
}

.cd-universal-box--has-data[data-category="zusatzdeckungen"] .cd-universal-box-header {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border-bottom-color: #ffb74d;
}

.cd-universal-box--has-data[data-category="weitere-angaben"] .cd-universal-box-header {
    background: linear-gradient(135deg, #eceff1 0%, #cfd8dc 100%);
    border-bottom-color: #90a4ae;
}

/* Kundendaten-Reiter (Kunden): gleiche Box-Optik wie Risiko-Wagnis, Kategorie-Header-Farben */
.cd-universal-box--has-data[data-category="firmendaten"] .cd-universal-box-header,
.cd-universal-box--has-data[data-category="personendaten"] .cd-universal-box-header {
    background: linear-gradient(135deg, #e8f4fc 0%, #d4ecf9 100%);
    border-bottom-color: #b8daf0;
}

.cd-universal-box--has-data[data-category="adressen"] .cd-universal-box-header {
    background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
    border-bottom-color: #f48fb1;
}

.cd-universal-box--has-data[data-category="kontaktdaten"] .cd-universal-box-header {
    background: linear-gradient(135deg, #e8f9e8 0%, #d4f0d4 100%);
    border-bottom-color: #a8dba8;
}

.cd-universal-box--has-data[data-category="bankverbindungen"] .cd-universal-box-header {
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    border-bottom-color: #ffd54f;
}

/* ========== Kundendaten-Tab: Scroll-Layout (wie Verträge-Tab, keine Bugs am unteren Rand) ========== */

.customer-detail-tab-content-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.customer-detail-tab-panel {
    display: none;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

/* Aktives Panel: Scroll-Container (wie Vertragsmaske Risiko-Wagnis) – Inhalt scrollt, sauberer Abschluss unten */
.customer-detail-tab-panel.active {
    display: block;
    overflow: auto;
    padding-bottom: 24px;
}

/* Reiter mit ct-container (Ablage, Verträge): Panel als Flex-Container, damit ct-table-wrapper scrollt */
.customer-detail-tab-panel.active:has(.ct-container) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0;
}
.customer-detail-tab-panel.active:has(.ct-container) .ct-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Reiter Kundendaten: fester Header, eigener Scroll-Container für Boxen */
.cd-kundendaten-root {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 20px 20px 0 20px;
}

.cd-kundendaten-headline-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 20px 0;
    flex-shrink: 0;
    padding: 0 4px;
}

.cd-kundendaten-headline {
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    letter-spacing: 0.01em;
}

/* Headline-Box: Verträge / Jahresgesamtbeitrag (nicht anklickbar, nur Info) */
.cd-kundendaten-headline-box {
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    letter-spacing: 0.01em;
}

.cd-kundendaten-divider {
    width: 1px;
    height: 24px;
    background: linear-gradient(to bottom, transparent, #dee2e6 20%, #dee2e6 80%, transparent);
    flex-shrink: 0;
}

.cd-kundendaten-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding-bottom: 32px;
}

.cd-kundendaten-container {
    max-width: 1600px;
}

/* Kundendaten-Container: 4-Spalten-Grid, Boxen nur so hoch wie ihr Inhalt (kein Stretch) */
.cd-kundendaten-container .cd-universal-boxes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: start;
}

.cd-kundendaten-container .cd-universal-box {
    opacity: 1;
}

.cd-kundendaten-container .cd-universal-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
}

.cd-box-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.cd-box-edit-icon {
    flex-shrink: 0;
    color: #7f8c8d;
    transition: color 0.2s;
}

.cd-box-clickable:hover .cd-box-edit-icon {
    color: #2d6cdf;
}

.cd-kundendaten-container .cd-universal-box-content {
    display: block;
    padding: 10px 12px;
}

/* Data-Row Layout (Label + Wert) – kompakt */
.cd-data-row {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid #e1e8ed;
    transition: all 0.2s ease;
    border-radius: 6px;
}

.cd-data-row:last-child {
    border-bottom: none;
}

.cd-data-row:hover {
    background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f5 100%);
    transform: translateX(4px);
}

.cd-data-label {
    font-size: 12px;
    font-weight: 700;
    color: #4a5568;
    min-width: 160px;
    flex-shrink: 0;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

.cd-data-value {
    font-size: 13px;
    color: #1a202c;
    flex: 1;
    line-height: 1.6;
    font-weight: 500;
    word-break: break-word;
}

.cd-data-value--highlight {
    font-weight: 600;
    color: #1a1a1a;
}

/* Adressen-Box: eine Zeile pro Adresse (Art  Straße Hausnr - PLZ - Ort) */
.cd-adressen-list {
    display: flex;
    flex-direction: column;
}
.cd-adressen-list .cd-data-row {
    padding: 8px 0;
}
.cd-adressen-list .cd-data-label {
    min-width: 100px;
}

/* Bankverbindungen: kompakte Karte pro Verbindung, BIC/Verwendung auf Klick */
.cd-bank-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cd-bank-item {
    border: 1px solid #e5e9ed;
    border-radius: 6px;
    padding: 8px 10px;
    background: #fafbfc;
}
.cd-bank-item-title {
    font-size: 10px;
    font-weight: 700;
    color: #5a6a7d;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #eef1f4;
}
.cd-bank-item-main .cd-data-row {
    padding: 2px 0;
}
.cd-bank-item-main .cd-data-row:last-of-type {
    border-bottom: none;
}
.cd-bank-item-main .cd-data-label {
    min-width: 52px;
}
.cd-bank-item-vertraege {
    font-size: 10px;
    color: #5a6a7d;
    margin-top: 4px;
}
.cd-bank-vertraege-label {
    font-weight: 600;
}
.cd-bank-toggle-details {
    margin-top: 6px;
    padding: 2px 8px;
    font-size: 10px;
    color: var(--brand-blue-start, #4a90d9);
    background: transparent;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    cursor: pointer;
}
.cd-bank-toggle-details:hover {
    background: #f0f4f8;
    border-color: var(--brand-blue-start, #4a90d9);
}
.cd-bank-item-details {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #e5e9ed;
}
.cd-bank-item-details .cd-data-row {
    padding: 2px 0;
}
.cd-bank-verwendung-link {
    color: var(--brand-blue-start, #4a90d9);
    text-decoration: none;
    cursor: pointer;
}
.cd-bank-verwendung-link:hover {
    text-decoration: underline;
}

/* Bearbeiten-Modal Bankverbindungen: Feldsätze + Verträge zuordnen */
.cd-bank-edit-section {
    margin-bottom: 16px;
    padding: 10px 12px;
    border: 1px solid #e5e9ed;
    border-radius: 6px;
    background: #fafbfc;
}
.cd-bank-edit-section:last-child {
    margin-bottom: 0;
}
.cd-bank-edit-legend {
    font-size: 12px;
    font-weight: 700;
    color: #2c3e50;
    padding: 0 6px;
}
.cd-bank-edit-vertraege {
    margin-top: 8px;
}
.cd-bank-edit-vertraege .cd-bank-vertraege-input {
    width: 100%;
}
.cd-bank-vertraege-search-wrap {
    position: relative;
}
.cd-bank-vertraege-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 2px;
    max-height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    display: none;
}
.cd-bank-vertraege-dropdown-item {
    padding: 8px 12px;
    font-size: 12px;
    cursor: pointer;
}
.cd-bank-vertraege-dropdown-item:hover,
.cd-bank-vertraege-dropdown-item:focus {
    background: #f0f4f8;
    outline: none;
}
.cd-bank-vertraege-dropdown-empty {
    padding: 8px 12px;
    font-size: 11px;
    color: #7f8c8d;
    font-style: italic;
}
.cd-bank-edit-add {
    margin-top: 8px;
}
.cd-bank-add-more {
    font-size: 11px;
    color: var(--brand-blue-start, #4a90d9);
    background: transparent;
    border: 1px dashed #d0d7de;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
}
.cd-bank-add-more:hover {
    background: #f0f4f8;
    border-color: var(--brand-blue-start, #4a90d9);
}

/* Leere Werte dezenter */
.cd-data-value:not(.cd-data-value--highlight) {
    color: #7f8c8d;
}

/* ========== Reiter Kundendaten (Modul kundendaten-tab.js) – kd-* ========== */
.kd-root {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 20px 20px 0 20px;
}
.kd-summary {
    flex-shrink: 0;
    margin-bottom: 18px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}
.kd-summary-text {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}
/* Unter-Reiter unter Kundendaten */
.kd-root--with-subtabs {
    padding-top: 8px;
}
.kd-root--with-subtabs .kd-sub-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    flex-shrink: 0;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 16px 0 0;
    margin: 0 -20px 0 -20px;
    padding-left: 20px;
}
/* Firmenmaske Verträge: Sub-Reiter und Aktionen (Filter, Toolbar) in einer Zeile */
.kd-sub-tab-bar--with-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.kd-sub-tab-bar--with-actions .kd-sub-tab-bar-tabs {
    display: flex;
    gap: 0;
    flex-shrink: 0;
}
.kd-sub-tab-bar--with-actions .kd-sub-tab-bar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-left: auto;
}
.kd-sub-tab-bar--with-actions .kd-sub-tab-bar-actions .ct-header-filters--vertraege {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}
.kd-sub-tab-bar--with-actions .kd-sub-tab-bar-actions .ct-toolbar--vertraege {
    margin: 0;
    padding: 0;
}
.kd-sub-tab-btn {
    padding: 10px 18px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, background 0.15s;
}
.kd-sub-tab-btn:hover {
    color: #334155;
    background: rgba(255, 255, 255, 0.8);
}
.kd-sub-tab-btn.active {
    font-weight: 600;
    color: #1e40af;
    background: #fff;
    border-bottom-color: #2563eb;
}
.kd-root--with-subtabs .kd-sub-tab-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.kd-sub-tab-panel {
    display: none;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
}
.kd-sub-tab-panel.active {
    display: flex;
}
.kd-sub-tab-panel.active .ct-table-wrapper {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* ========== Reiter Partnerdaten (Personenmaske) – 3-Spalten, eigenständiges Modul pd-* ========== */
.pd-root {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 16px 20px 24px;
}
.pd-root--three-col {
    max-width: none;
}
.pd-page-title {
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}
.pd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    flex: 1;
    min-height: 0;
    overflow: auto;
    align-content: start;
}
@media (max-width: 1200px) {
    .pd-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 768px) {
    .pd-grid {
        grid-template-columns: 1fr;
    }
}
.pd-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.pd-col-title {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 8px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
}
.pd-block {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}
.pd-block-title {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    padding: 8px 12px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    margin: 0;
}
.pd-block-body {
    padding: 12px;
    font-size: 13px;
}
.pd-address-list .pd-row {
    margin-bottom: 6px;
}
.pd-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
}
.pd-label {
    min-width: 110px;
    flex-shrink: 0;
    font-size: 12px;
    color: #64748b;
}
.pd-value {
    font-size: 13px;
    color: #1f2937;
    word-break: break-word;
}
.pd-bez-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pd-bez-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}
.pd-bez-typ {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    min-width: 80px;
}
.pd-bez-name {
    font-size: 13px;
    color: #1f2937;
}

/* Partnerdaten: ein-/ausklappbare Bankverbindungen-Karte (standardmäßig eingeklappt) */
.pd-block--collapsible .pd-block-title--toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    user-select: none;
}
.pd-block--collapsible .pd-block-title--toggle:hover {
    background: #e2e8f0;
}
.pd-block-toggle-icon {
    flex-shrink: 0;
    font-size: 10px;
    color: #64748b;
}
.pd-block--collapsible.pd-block--collapsed > .pd-block-body {
    display: none;
}
.pd-bank-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pd-bank-item {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.pd-bank-item-title {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    padding: 6px 10px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}
.pd-bank-item .pd-block-body {
    padding: 10px 12px;
    background: #fff;
}
.pd-bank-vertraege {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eee;
}
.pd-bank-contract-link {
    color: #2563eb;
    text-decoration: none;
}
.pd-bank-contract-link:hover {
    text-decoration: underline;
}
.pd-empty-inline {
    margin: 0;
    font-size: 13px;
    color: #94a3b8;
}
/* Karriere: Zeitstrahl */
.pd-timeline {
    margin-bottom: 16px;
    overflow-x: auto;
}
.pd-timeline-track {
    min-width: 400px;
}
.pd-timeline-lane {
    height: 28px;
    position: relative;
    margin-bottom: 4px;
}
.pd-timeline-segments {
    position: relative;
    height: 100%;
    width: 100%;
}
.pd-timeline-segment {
    position: absolute;
    top: 0;
    height: 100%;
    min-width: 4px;
    background: #3b82f6;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 6px;
    box-sizing: border-box;
}
.pd-timeline-segment-label {
    font-size: 10px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Karriere: Boxen */
.pd-karriere-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pd-karriere-box {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}
.pd-karriere-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}
.pd-karriere-box-title {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
}
.pd-karriere-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: #dbeafe;
    color: #1d4ed8;
}
.pd-karriere-box-body {
    padding: 10px 12px;
}
.pd-karriere-row {
    display: flex;
    gap: 10px;
    margin-bottom: 4px;
    font-size: 12px;
}
.pd-karriere-label {
    min-width: 90px;
    color: #64748b;
}
.pd-karriere-value {
    color: #1f2937;
}
/* Übersicht Verträge & Versorgungen */
.pd-uebersicht-section {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}
.pd-uebersicht-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.pd-uebersicht-title {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 4px 0;
}
.pd-uebersicht-subtitle {
    font-size: 11px;
    color: #64748b;
    margin: 0 0 8px 0;
}
.pd-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 16px;
}
.pd-kpi {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
}
.pd-kpi-label {
    color: #64748b;
}
.pd-kpi-value {
    font-weight: 500;
    color: #1f2937;
}
.pd-kpi--strong .pd-kpi-value {
    font-weight: 700;
    font-size: 13px;
}
.pd-uebersicht-empty {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 6px;
}

/* Reiter Gebäude (Personenmaske) – ge-* */
.ge-root {
    padding: 20px 20px 24px;
    max-width: 560px;
}
.ge-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}
.ge-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ge-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.ge-label {
    min-width: 160px;
    font-size: 13px;
    color: #64748b;
}
.ge-value {
    font-size: 14px;
    color: #1f2937;
}
.ge-empty {
    padding: 24px 0;
}
.ge-empty-text {
    margin: 0;
    font-size: 14px;
    color: #64748b;
}
/* Gebäude-Reiter: Toolbar, Karten, Modal (Anlegen/Bearbeiten) */
.ge-root--fullwidth {
    width: 100%;
    max-width: none;
}
.ge-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.ge-toolbar {
    display: flex;
    gap: 8px;
}
.ge-btn {
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
}
.ge-btn:hover {
    background: #f1f5f9;
}
.ge-btn-primary {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}
.ge-btn-primary:hover {
    background: #1d4ed8;
}
.ge-btn-sm {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    cursor: pointer;
}
.ge-btn-sm:hover {
    background: #e2e8f0;
}
.ge-body {
    padding: 0;
}
.ge-empty {
    padding: 32px 24px;
    text-align: center;
    background: #f8fafc;
    border-radius: 10px;
}
.ge-empty-title {
    margin: 0 0 8px 0;
    font-size: 15px;
    font-weight: 600;
    color: #334155;
}
.ge-btn-empty {
    margin-top: 16px;
}
.ge-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}
.ge-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.ge-card-header {
    padding: 12px 16px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}
.ge-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}
.ge-card-body {
    padding: 16px;
}
.ge-gebaeude-data {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.ge-data-row {
    display: flex;
    gap: 12px;
    font-size: 13px;
}
.ge-data-label {
    color: #64748b;
    min-width: 140px;
}
.ge-data-value {
    color: #1e293b;
}
.ge-card-actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}
.ge-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}
.ge-modal {
    background: #fff;
    border-radius: 10px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.15);
}
.ge-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
}
.ge-modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.ge-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #64748b;
    padding: 0 4px;
    line-height: 1;
}
.ge-modal-close:hover {
    color: #1e293b;
}
.ge-modal-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ge-form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ge-form-row label {
    font-size: 12px;
    font-weight: 500;
    color: #475569;
}
.ge-form-row input,
.ge-form-row select,
.ge-form-row textarea {
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
}
.ge-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid #e2e8f0;
}
.ge-modal-cancel {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

/* Reiter Absicherung (Personenmaske) – Sub-Reiter Übersicht, private Absicherung, betriebliche Vorsorge */
.absicherung-root {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.absicherung-root--fullwidth {
    width: 100%;
}
/* Durchgezogene Leiste: Wrapper volle Breite, innen die Buttons bündig unter Hauptreiter */
.absicherung-sub-tab-bar-wrap {
    flex-shrink: 0;
    width: 100%;
    background: #e8ecf0;
    border-bottom: 1px solid #c5d0d9;
}
.absicherung-sub-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    flex-shrink: 0;
    background: transparent;
    padding: 0 12px 0 12px;
    margin-left: 0;
    margin-right: 0;
}
.absicherung-sub-tab-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    font-size: 11px;
    color: #5a6c7d;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.absicherung-sub-tab-btn:hover {
    color: #2c3e50;
    background: rgba(255,255,255,0.6);
}
.absicherung-sub-tab-btn.active {
    font-weight: 600;
    color: #c0392b;
    background: #fff;
    border-bottom-color: #e67e22;
}
.absicherung-sub-tab-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.absicherung-sub-tab-panel {
    display: none;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
}
.absicherung-sub-tab-panel.active {
    display: flex;
}
.absicherung-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 20px;
}
.absicherung-placeholder {
    padding: 32px 24px;
    text-align: center;
    color: #7f8c8d;
    background: #f8fafb;
    border-radius: 8px;
}
.absicherung-placeholder-text {
    margin: 0;
    font-size: 13px;
}
/* Private Absicherung: Tabellen */
.absicherung-private-wrap {
    padding: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}
.absicherung-private-section {
    margin-bottom: 0;
}
/* Verträge als VN: ca. 70% Breite (~30% Reduktion), damit Mitversichert rechts daneben passt */
.absicherung-private-section--vn {
    flex: 0 0 70%;
    min-width: 280px;
    max-width: 70%;
}
.absicherung-private-section--mitversichert {
    flex: 1;
    min-width: 260px;
}
/* Betriebliche Vorsorge: links aktiv, rechts Beitragsfrei/Storniert */
.absicherung-private-section--bv-aktiv {
    flex: 0 0 70%;
    min-width: 280px;
    max-width: 70%;
}
.absicherung-private-section--bv-inaktiv {
    flex: 1;
    min-width: 260px;
}
@media (max-width: 900px) {
    .absicherung-private-section--vn,
    .absicherung-private-section--mitversichert,
    .absicherung-private-section--bv-aktiv,
    .absicherung-private-section--bv-inaktiv {
        flex: 1 1 100%;
        max-width: none;
    }
}
.absicherung-private-section:last-child {
    margin-bottom: 0;
}
.absicherung-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 12px 0;
}
.absicherung-hint {
    font-size: 12px;
    color: #7f8c8d;
    margin: 0 0 12px 0;
}
.absicherung-table-wrap {
    overflow-x: auto;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
}
.absicherung-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.absicherung-th {
    text-align: left;
    padding: 10px 12px;
    background: #f0f2f5;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 1px solid #e0e0e0;
}
.absicherung-td {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
}
.absicherung-td--role {
    font-style: italic;
    color: #5a6c7d;
}
.absicherung-contract-row:hover {
    background: #f8f9fa;
}
.absicherung-open-contract {
    cursor: pointer;
}
.absicherung-empty {
    color: #95a5a6;
    font-style: italic;
}
.kd-sub-placeholder {
    padding: 40px 24px;
    text-align: center;
    color: #64748b;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px dashed #e2e8f0;
    margin: 20px;
}
.kd-sub-placeholder-text {
    margin: 0;
    font-size: 14px;
}
.kd-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding-bottom: 32px;
}
/* Sub-Reiter Allgemein (Personenmaske): cleanes, kompaktes Zwei-Bereichs-Layout */
.kd-scroll.kd-allgemein-with-karriere {
    overflow: auto;
    padding: 14px 0 22px;
}
.kd-allgemein-layout {
    display: grid;
    grid-template-columns: minmax(360px, 460px) fit-content(560px) minmax(300px, 420px);
    gap: 14px;
    align-items: start;
    justify-content: start;
    min-height: 100%;
    padding: 0 4px;
}
.kd-allgemein-panel {
    border: 1px solid #dbe4ec;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    min-height: 0;
    overflow: hidden;
}
.kd-allgemein-panel-head {
    font-size: 12px;
    font-weight: 700;
    color: #2f3f52;
    padding: 10px 12px;
    border-bottom: 1px solid #e5edf4;
    background: linear-gradient(180deg, #f9fbfd 0%, #f3f7fb 100%);
    letter-spacing: 0.01em;
}
.kd-allgemein-left,
.kd-allgemein-right {
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.kd-allgemein-right {
    justify-self: start;
    width: fit-content;
    min-width: 360px;
    max-width: 560px;
}
.kd-allgemein-extra {
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.kd-allgemein-left .kd-grid--allgemein {
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: none;
    padding: 10px;
}
.kd-allgemein-right[data-kd-karriere-embed="true"] {
    overflow: hidden;
    width: auto;
    min-width: 0;
    justify-self: stretch;
}
.kd-allgemein-karriere-wrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-top: 1px solid #e5edf4;
    background: #f8fafc;
}
.kd-allgemein-summary-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 10px;
    background: #f8fafc;
    border-top: 1px solid #e5edf4;
}
.kd-overview-root {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.kd-overview-topline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.kd-overview-section {
    border: 1px solid #dee6ee;
    border-radius: 8px;
    background: #ffffff;
    padding: 8px;
}
.kd-overview-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.kd-overview-section-title {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    color: #2f3f52;
    line-height: 1.3;
}
.kd-overview-section-subtitle {
    margin: 0 0 8px;
    font-size: 10px;
    color: #5f7185;
    line-height: 1.35;
}
.kd-overview-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}
.kd-overview-kpi {
    border: 1px solid #dbe3ec;
    border-radius: 6px;
    background: #ffffff;
    padding: 6px 7px;
    min-height: 46px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.kd-overview-kpi-label {
    font-size: 10px;
    color: #617285;
    line-height: 1.2;
}
.kd-overview-kpi-value {
    font-size: 14px;
    font-weight: 700;
    color: #223449;
    line-height: 1;
}
.kd-overview-kpi--strong {
    background: #f7fbff;
    border-color: #c9d9ea;
}
.kd-overview-kpi--strong .kd-overview-kpi-value {
    color: #1f4e86;
}
.kd-overview-kpi--meta {
    background: #f9fafc;
}
.kd-overview-kpi--top {
    background: #f3f7fb;
    border-color: #d4dfeb;
    min-height: 52px;
}
.kd-overview-kpi--top .kd-overview-kpi-label {
    font-size: 10px;
    font-weight: 600;
}
.kd-overview-empty {
    font-size: 10px;
    color: #6f8195;
    line-height: 1.4;
    padding: 6px 2px 2px;
}
.kd-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: start;
    max-width: 1600px;
}
.kd-card {
    background: #fff;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.kd-card:hover {
    border-color: #c5d0d9;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.kd-card--fill .kd-card-header {
    border-bottom-color: #d0dce6;
    background: linear-gradient(180deg, #f8fafb 0%, #fff 100%);
}
.kd-card-clickable {
    cursor: pointer;
}
.kd-card-clickable:active {
    transform: translateY(1px);
}
.kd-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #eef1f4;
    background: #fafbfc;
}
.kd-card-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    flex: 1;
}
.kd-card-dot {
    color: #2d6cdf;
    font-size: 10px;
    margin-right: 8px;
}
.kd-card-edit {
    flex-shrink: 0;
    color: #7f8c8d;
    transition: color 0.2s;
}
.kd-card-clickable:hover .kd-card-edit {
    color: #2d6cdf;
}
.kd-card-body {
    padding: 10px 14px;
}
.kd-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px solid #eef1f4;
    font-size: 12px;
}
.kd-row:last-child {
    border-bottom: none;
}
.kd-label {
    font-weight: 600;
    color: #5a6a7d;
    min-width: 140px;
    flex-shrink: 0;
}
.kd-value {
    color: #1a202c;
    flex: 1;
    word-break: break-word;
}
.kd-value--fill {
    font-weight: 600;
    color: #1a202c;
}
.kd-address-list .kd-row {
    padding: 6px 0;
}
.kd-bank-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.kd-bank-card {
    border: 1px solid #e5e9ed;
    border-radius: 6px;
    padding: 10px 12px;
    background: #fafbfc;
}
.kd-bank-card-title {
    font-size: 11px;
    font-weight: 700;
    color: #5a6a7d;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #eef1f4;
}
.kd-bank-link {
    color: #2d6cdf;
    text-decoration: none;
    cursor: pointer;
}
.kd-bank-link:hover {
    text-decoration: underline;
}
.kd-section-title {
    font-size: 12px;
    font-weight: 600;
    color: #5a6a7d;
    margin: 14px 0 6px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid #e8ecf0;
}
.kd-section-title:first-of-type {
    margin-top: 0;
}
.kd-bank-table-wrap {
    overflow-x: auto;
}
.kd-bank-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.kd-bank-table th,
.kd-bank-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid #eef1f4;
}
.kd-bank-table th {
    font-weight: 600;
    color: #5a6a7d;
    background: #f5f7fa;
}
.kd-bank-table tbody tr:hover {
    background: #f8fafc;
}
.kd-bank-table-iban {
    font-family: monospace;
    font-size: 11px;
}
.kd-bank-table-usage a {
    color: #2d6cdf;
    text-decoration: none;
}
.kd-bank-table-usage a:hover {
    text-decoration: underline;
}
.kd-bez-section {
    padding: 0;
}
.kd-bez-hint {
    font-size: 11px;
    color: #6a7a8d;
    margin: 0 0 10px 0;
}
.kd-bez-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #eef1f4;
    font-size: 12px;
}
.kd-bez-type {
    font-weight: 600;
    color: #5a6a7d;
    min-width: 90px;
}
.kd-bez-name {
    flex: 1;
    color: #1a202c;
}
/* Beziehungen-Karte: feste Kategorien mit Suchleiste + Anlegen */
.kd-bez-kategorie {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef1f4;
}
.kd-bez-kategorie:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.kd-bez-kategorie-label {
    font-size: 12px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 6px;
}
.kd-bez-kategorie-input-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.kd-bez-suche-input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid #e1e8ed;
    border-radius: 6px;
}
.kd-bez-suche-input:focus {
    outline: none;
    border-color: #2d6cdf;
}
.kd-bez-anlegen-btn {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #2d6cdf;
    background: #fff;
    border: 1px solid #2d6cdf;
    border-radius: 6px;
    cursor: pointer;
}
.kd-bez-anlegen-btn:hover {
    background: #f0f5ff;
}
.kd-bez-kategorie .customer-detail-bez-list {
    min-height: 0;
}
/* Sub-Reiter Allgemein: kompakte, einheitliche Kartenoptik links */
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-allgemein-left .kd-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-color: #e0e7ef;
    border-radius: 8px;
    box-shadow: none;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-allgemein-left .kd-card:hover {
    border-color: #cfd9e4;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-allgemein-left .kd-card-header {
    padding: 8px 10px;
    border-bottom-color: #e9eff5;
    background: #f9fbfd;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-allgemein-left .kd-card-title {
    font-size: 12px;
    font-weight: 600;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-allgemein-left .kd-card-dot {
    font-size: 9px;
    margin-right: 6px;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-allgemein-left .kd-card-edit {
    width: 12px;
    height: 12px;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-allgemein-left .kd-card-body {
    flex: 1;
    padding: 7px 10px 8px;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-row {
    padding: 4px 0;
    gap: 10px;
    font-size: 11px;
    border-bottom-color: #e8ecf0;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-label {
    min-width: 96px;
    font-size: 11px;
    color: #526171;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-value {
    font-size: 11px;
    color: #1f2937;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-section-title {
    font-size: 11px;
    font-weight: 600;
    margin: 8px 0 5px 0;
    padding-bottom: 3px;
    border-bottom-color: #e8ecf0;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-section-title:first-of-type {
    margin-top: 0;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-address-list .kd-row {
    padding: 3px 0;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-hint {
    padding: 6px 8px;
    margin-top: 6px;
    font-size: 10px;
    border-radius: 4px;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-hint-icon {
    font-size: 10px;
}
/* Beziehungen-Karte im Allgemein-Panel: kompakt */
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-bez-section {
    padding: 0;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-bez-hint {
    font-size: 10px;
    margin: 0 0 7px 0;
    line-height: 1.35;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-bez-kategorie {
    margin-bottom: 9px;
    padding-bottom: 7px;
    border-bottom-color: #e8ecf0;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-bez-kategorie:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-bez-kategorie-label {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-bez-kategorie-input-row {
    gap: 6px;
    margin-bottom: 5px;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-bez-suche-input {
    padding: 5px 8px;
    font-size: 11px;
    border-radius: 4px;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-bez-anlegen-btn {
    padding: 5px 8px;
    font-size: 10px;
    border-radius: 4px;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-bez-row {
    padding: 3px 0;
    gap: 6px;
    font-size: 11px;
    border-bottom-color: #e8ecf0;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-bez-type {
    min-width: 72px;
    font-size: 10px;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-bez-name {
    font-size: 11px;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-bez-kategorie .customer-detail-bez-list {
    margin-bottom: 2px;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .customer-detail-bez-graph-row {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #e8ecf0;
}
.kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .customer-detail-bez-graph-btn {
    font-size: 11px;
    padding: 4px 8px;
}
/* =====================================================================
   Karriere-Embed im Subreiter Allgemein (kd-allgemein-right)
   Alle Kinder sollen die volle Panelbreite nutzen.
   ===================================================================== */
[data-kd-karriere-embed="true"] .ab-container {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    width: 100%;
    box-sizing: border-box;
}
[data-kd-karriere-embed="true"] .ab-body--karriere {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px 12px;
    overflow: auto;
    width: 100%;
    box-sizing: border-box;
}
[data-kd-karriere-embed="true"] .ab-right-column {
    display: none;
}
[data-kd-karriere-embed="true"] .ab-left-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
[data-kd-karriere-embed="true"] .ab-left-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
[data-kd-karriere-embed="true"] .ab-timeline-wrap--right {
    padding: 8px 10px 10px;
    border-color: #e1e8f0;
    border-radius: 8px;
    box-shadow: none;
    width: 100%;
    box-sizing: border-box;
}
[data-kd-karriere-embed="true"] .ab-timeline-wrap--right .ab-timeline-track {
    border-color: #dfe6ee;
}
[data-kd-karriere-embed="true"] .ab-arbeitsverhaeltnis-box {
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}
[data-kd-karriere-embed="true"] .ab-arbeitsverhaeltnis-box .gv-box-header {
    padding: 7px 10px;
}
[data-kd-karriere-embed="true"] .ab-arbeitsverhaeltnis-box .gv-box-title {
    font-size: 12px;
}
[data-kd-karriere-embed="true"] .ab-arbeitsverhaeltnis-box .gv-box-body {
    display: flex;
    flex-direction: column;
    padding: 8px 12px 9px;
    width: 100%;
    box-sizing: border-box;
}
[data-kd-karriere-embed="true"] .ab-arbeitsverhaeltnis-box .gv-box-body .gv-data-row {
    display: flex;
    align-items: baseline;
    width: 100%;
    box-sizing: border-box;
    padding: 3px 0;
    margin: 0;
    font-size: 11px;
    border-bottom: none;
}
[data-kd-karriere-embed="true"] .ab-arbeitsverhaeltnis-box .gv-box-body .gv-data-label {
    flex: 0 0 160px;
    min-width: 0;
    font-size: 11px;
    font-weight: 500;
    color: #4a5568;
    white-space: normal;
    word-break: break-word;
}
[data-kd-karriere-embed="true"] .ab-arbeitsverhaeltnis-box .gv-box-body .gv-data-value {
    flex: 1 1 0%;
    min-width: 0;
    font-size: 11px;
    color: #2d3748;
    white-space: normal;
    word-break: break-word;
}
@media (max-width: 1320px) {
    .kd-allgemein-layout {
        grid-template-columns: minmax(320px, 420px) fit-content(520px);
    }
    .kd-allgemein-extra {
        grid-column: 1 / -1;
    }
}
@media (max-width: 1100px) {
    .kd-allgemein-layout {
        grid-template-columns: 1fr;
    }
    .kd-allgemein-right {
        width: auto;
        min-width: 0;
        max-width: none;
    }
    .kd-allgemein-extra {
        grid-column: auto;
    }
}
@media (max-width: 768px) {
    .kd-scroll.kd-allgemein-with-karriere {
        padding-top: 10px;
    }
    .kd-allgemein-layout {
        gap: 10px;
        padding: 0;
    }
    .kd-allgemein-panel-head {
        padding: 8px 10px;
        font-size: 11px;
    }
    .kd-allgemein-left .kd-grid--allgemein {
        padding: 8px;
        gap: 8px;
    }
    .kd-allgemein-summary-wrap {
        padding: 8px;
    }
    .kd-overview-section {
        padding: 7px;
    }
    .kd-overview-topline {
        grid-template-columns: 1fr;
    }
    .kd-overview-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .kd-sub-tab-panel[data-kd-subtab-panel="allgemein"] .kd-label {
        min-width: 84px;
    }
    [data-kd-karriere-embed="true"] .ab-body--karriere {
        padding: 8px;
    }
}

.kd-bez-empty {
    font-size: 12px;
    color: #8a9aaa;
    padding: 10px 0;
}
.kd-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    margin-top: 10px;
    background: #f0f4f8;
    border-radius: 6px;
    font-size: 11px;
    color: #5a6a7d;
}
.kd-hint-icon {
    flex-shrink: 0;
}
@media (max-width: 1200px) {
    .kd-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .kd-grid {
        grid-template-columns: 1fr;
    }
}

/* Legacy table support (falls noch irgendwo genutzt) */
.cd-kundendaten-container .cd-universal-box-content table {
    border-collapse: collapse;
    font-size: 11px;
    width: 100%;
}

.cd-kundendaten-container .cd-universal-box-content .cd-detail-mask-label,
.cd-kundendaten-container .cd-universal-box-content td:first-child {
    font-size: 10px;
    font-weight: 600;
    color: #5a6a7d;
    padding: 4px 8px 4px 0;
    vertical-align: top;
}

.cd-kundendaten-container .cd-universal-box-content .cd-detail-mask-value,
.cd-kundendaten-container .cd-universal-box-content td:last-child {
    color: var(--text-main);
}

/* Leere Boxen: dezente Darstellung */
.cd-universal-box:not(.cd-universal-box--has-data) {
    opacity: 0.65;
}

.cd-universal-box:not(.cd-universal-box--has-data):hover {
    opacity: 1;
}

.cd-box-empty .cd-universal-box-header {
    background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%);
}

.cd-box-empty .cd-universal-box-title {
    color: #95a5a6;
}

/* Bearbeiten-Button mit Icon */
.customer-detail-edit-kundendaten-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    color: #7f8c8d;
    transition: all 0.2s;
}

.customer-detail-edit-kundendaten-btn:hover {
    background: rgba(45, 108, 223, 0.08);
    border-color: rgba(45, 108, 223, 0.2);
    color: #2d6cdf;
}

.customer-detail-edit-kundendaten-btn svg {
    width: 14px;
    height: 14px;
}

/* Kontaktdaten Grid */
.cd-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 1200px) {
    .cd-contact-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.cd-contact-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cd-contact-section-title {
    font-size: 10px;
    font-weight: 700;
    color: #2c3e50;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid #e9ecef;
}

/* Bankverbindungen */
.cd-bank-item {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e9ecef;
}

.cd-bank-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.cd-bank-title {
    font-size: 11px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
    padding: 6px 10px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 4px;
    border-left: 3px solid #3498db;
}

.cd-bank-details {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Beziehungen-Sektion */
.customer-detail-bez-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cd-bez-hint {
    font-size: 11px;
    color: #7f8c8d;
    margin: 0;
    line-height: 1.5;
}

.customer-detail-bez-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.customer-detail-bez-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #fafbfc;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    font-size: 11px;
    transition: all 0.15s;
}

.customer-detail-bez-row:hover {
    background: #f0f7ff;
    border-color: #b3d7ff;
}

.cd-bez-type {
    min-width: 100px;
    font-weight: 600;
    color: #2c3e50;
    flex-shrink: 0;
}

.cd-bez-name {
    flex: 1;
    color: #495057;
}

.customer-detail-bez-verknuepfung {
    font-size: 10px;
    padding: 4px 8px;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 4px;
    border: 1px solid #c8e6c9;
    cursor: default;
}

.customer-detail-bez-verknuepfen-btn {
    font-size: 10px;
    padding: 4px 10px;
    background: transparent;
    color: #3498db;
    border: 1px solid #3498db;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.customer-detail-bez-verknuepfen-btn:hover {
    background: #3498db;
    color: #fff;
}

.customer-detail-bez-remove-btn {
    background: none;
    border: none;
    color: #95a5a6;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 18px;
    line-height: 1;
    transition: color 0.15s;
    flex-shrink: 0;
}

.customer-detail-bez-remove-btn:hover {
    color: #e74c3c;
}

.cd-bez-empty {
    padding: 20px;
    text-align: center;
    color: #adb5bd;
    font-size: 11px;
    font-style: italic;
}

.customer-detail-bez-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid #e9ecef;
}

.customer-detail-bez-typ-input,
.customer-detail-bez-name-input {
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    font-size: 11px;
    transition: border-color 0.15s;
}

.customer-detail-bez-typ-input {
    min-width: 140px;
}

.customer-detail-bez-name-input {
    flex: 1;
    min-width: 180px;
}

.customer-detail-bez-typ-input:focus,
.customer-detail-bez-name-input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
}

.customer-detail-bez-add-btn {
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 600;
    background: #3498db;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.customer-detail-bez-add-btn:hover {
    background: #2980b9;
}

/* Hint-Box für Hinweise */
.cd-hint-box {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: #f0f7ff;
    border: 1px solid #bee1ff;
    border-radius: 6px;
    margin-top: 12px;
    font-size: 10px;
    color: #495057;
    line-height: 1.5;
}

.cd-hint-box svg {
    flex-shrink: 0;
    color: #3498db;
    margin-top: 1px;
}

.cd-hint-box span {
    flex: 1;
}

/* Responsive Anpassungen */
@media (max-width: 1400px) {
    .cd-kundendaten-container .cd-universal-boxes-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1100px) {
    .cd-kundendaten-container .cd-universal-boxes-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cd-data-label {
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .cd-kundendaten-container .cd-universal-boxes-grid {
        grid-template-columns: 1fr;
    }

    .cd-data-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .cd-data-label {
        min-width: auto;
    }

    .customer-detail-bez-row {
        flex-wrap: wrap;
    }

    .cd-bez-type {
        min-width: auto;
    }
}

/* Toolbar Kundendaten */
.customer-detail-kundendaten-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.cd-risiko-wagnis-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #495057;
    cursor: pointer;
    user-select: none;
}

.cd-risiko-wagnis-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #3498db;
}

.customer-detail-kundendaten-edit-btn {
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 600;
    background: #fff;
    color: #495057;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.customer-detail-kundendaten-edit-btn:hover {
    background: #f8f9fa;
    border-color: #adb5bd;
}

.customer-detail-kundendaten-edit-btn.cd-detail-mask-edit-btn--active {
    background: #3498db;
    color: #fff;
    border-color: #2980b9;
}

.customer-detail-kundendaten-edit-btn.cd-detail-mask-edit-btn--active:hover {
    background: #2980b9;
}

/* Kontaktdaten Grid */
.cd-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 1200px) {
    .cd-contact-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.cd-contact-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cd-contact-section-title {
    font-size: 10px;
    font-weight: 700;
    color: #2c3e50;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid #e9ecef;
}

/* Bankverbindungen */
.cd-bank-item {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e9ecef;
}

.cd-bank-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.cd-bank-title {
    font-size: 11px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
    padding: 6px 10px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 4px;
    border-left: 3px solid #3498db;
}

.cd-bank-details {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Vertragsanlage-Tab: Boxen im 4-Spalten-Grid (nutzt cd-universal-boxes-grid) */
.va-container .cd-universal-box {
    opacity: 1;
}

/* Risikomerkmale-Bereich: initial eingeklappt, nach Klick „Weiter zu Risikomerkmalen“ ausgeklappt */
.va-risiko-section.va-risiko-section--collapsed {
    display: none;
}

.va-risiko-section:not(.va-risiko-section--collapsed) {
    display: block;
}

.va-container .va-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    cursor: pointer;
}

.va-container .cd-universal-box-content textarea.cd-detail-mask-input {
    min-height: 60px;
    resize: vertical;
}

/* ========== Anlage: Gruppenvertrag – Layout & Boxen (volle Breite, Kacheln nebeneinander) ========== */
.gva-container {
    padding: 20px 24px;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}
.gva-header {
    margin-bottom: 20px;
}
.gva-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 4px 0;
}
.gva-context {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}
.gva-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.gva-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 1000px) {
    .gva-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .gva-grid {
        grid-template-columns: 1fr;
    }
}
/* Zeile 1: Stammdaten über volle Breite */
.gva-container .gva-box-stamm { grid-column: 1 / -1; }
/* Zeile 2: Weitere Angaben, Individuelle Infofelder, Dokumente nebeneinander */
.gva-container .gva-box-weitere { }
.gva-container .gva-box-infofelder { }
.gva-container .gva-box-dokumente { }
.gva-container .cd-universal-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.gva-btn-add-infofeld {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    border-radius: 4px;
    cursor: pointer;
}
.gva-btn-add-infofeld:hover {
    background: #bbf7d0;
}
.gva-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}
.gva-btn-submit {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #2563eb;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.gva-btn-submit:hover:not(:disabled) {
    background: #1d4ed8;
}
.gva-btn-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.gva-btn-cancel {
    padding: 10px 20px;
    font-size: 13px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    color: #374151;
}
.gva-btn-cancel:hover {
    background: #e5e7eb;
}

/* Individuelle Infofelder */
.gva-infofelder-hint {
    font-size: 11px;
    color: #6b7280;
    margin: 0 0 12px 0;
}
.gva-custom-fields-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gva-infofeld-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    align-items: center;
}
.gva-infofeld-row .cd-detail-mask-input {
    min-width: 0;
}
.gva-infofeld-remove {
    padding: 6px 10px;
    font-size: 16px;
    line-height: 1;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
    color: #b91c1c;
    cursor: pointer;
}
.gva-infofeld-remove:hover {
    background: #fecaca;
}

/* Dokumente Drag & Drop */
.gva-doc-hint {
    font-size: 11px;
    color: #6b7280;
    margin: 0 0 10px 0;
}
.gva-doc-drop {
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    padding: 24px 16px;
    text-align: center;
    background: #f9fafb;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.gva-doc-drop:hover,
.gva-doc-drop:focus {
    background: #f3f4f6;
    border-color: #9ca3af;
    outline: none;
}
.gva-doc-drop.gva-doc-drop--active {
    background: #eff6ff;
    border-color: #3b82f6;
}
.gva-doc-drop-text {
    font-size: 13px;
    color: #6b7280;
}
.gva-doc-list {
    margin: 12px 0 0 0;
    padding: 0;
    list-style: none;
}
.gva-doc-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    font-size: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    margin-bottom: 4px;
}
.gva-doc-list-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gva-doc-list-remove {
    padding: 2px 8px;
    font-size: 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
    color: #b91c1c;
    cursor: pointer;
    flex-shrink: 0;
}
.gva-doc-list-remove:hover {
    background: #fecaca;
}

/* ========== Anlage: Gruppenvertrag – Vertragsgruppe & Typ ========== */
.gva-type-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gva-type-search-row {
    position: relative;
}
.gva-type-search-row .cd-detail-mask-input {
    width: 100%;
    box-sizing: border-box;
}
.gva-type-dropdown {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 2px;
    max-height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 50;
}
.gva-type-dropdown-item {
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
}
.gva-type-dropdown-item:hover {
    background: #f9fafb;
}
.gva-type-label-row {
    font-size: 11px;
    font-weight: 600;
    color: #374151;
}
.gva-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.gva-category-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 10px 12px;
    font-size: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.gva-category-card:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}
.gva-category-card-title {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 2px;
}
.gva-category-card-desc {
    font-size: 10px;
    color: #6b7280;
    line-height: 1.3;
}
.gva-types-wrap {
    padding: 8px 0;
    border-top: 1px solid #e5e7eb;
}
.gva-types-back {
    font-size: 11px;
    color: #4a90d9;
    cursor: pointer;
    margin-bottom: 8px;
    text-decoration: underline;
}
.gva-types-back:hover {
    color: #2563eb;
}
.gva-types-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.gva-type-btn {
    padding: 6px 12px;
    font-size: 11px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    color: #374151;
}
.gva-type-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}
.gva-type-selection {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 4px;
    font-size: 12px;
    color: #166534;
}
.gva-type-selection .gva-type-clear {
    margin-left: auto;
    padding: 2px 8px;
    font-size: 14px;
    background: #dcfce7;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #166534;
}
.gva-type-selection .gva-type-clear:hover {
    background: #bbf7d0;
}

/* ========== Anträge / Schäden (kombinierte Seite) ========== */
.as-page {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-main);
}

.as-header {
    flex-shrink: 0;
    padding: 12px 20px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.as-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 12px 0;
}

.as-dashboard {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.as-kpi {
    min-width: 140px;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.as-kpi--antraege {
    border-left: 4px solid var(--brand-blue-start);
    background: linear-gradient(135deg, #f8fbff 0%, #fff 100%);
}

.as-kpi--schaeden {
    border-left: 4px solid #e67e22;
    background: linear-gradient(135deg, #fffbf5 0%, #fff 100%);
}

.as-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
}

.as-kpi--antraege .as-kpi-value {
    color: #2a5f9e;
}

.as-kpi--schaeden .as-kpi-value {
    color: #c45a11;
}

.as-kpi-label {
    font-size: 11px;
    color: var(--text-light);
    margin-top: 2px;
}

.as-tabs {
    flex-shrink: 0;
    display: flex;
    gap: 0;
    padding: 0 20px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
}

.as-tab {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-light);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    margin-bottom: -1px;
}

.as-tab:hover {
    color: var(--text-main);
}

.as-tab.active {
    color: var(--brand-blue-end);
    border-bottom-color: var(--brand-blue-start);
}

.as-tab-panels {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.as-tab-panel {
    display: none;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
}

.as-tab-panel.active {
    display: flex;
}

.as-tab-panel-inner {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: var(--bg-main);
}

/* Eingebettete Ansichten: Seitentitel ausblenden (Überschrift steht im Header) */
.as-tab-panel-inner .vm-header .vm-title,
.as-tab-panel-inner .sm-header .sm-title {
    display: none;
}

/* ========== Daten-Verwaltung (daten-verwaltung-tab.js) ========== */
.dv-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: linear-gradient(135deg, #1e2d3a 0%, #2c3e50 100%);
    overflow: hidden;
}

/* Header */
.dv-header {
    flex-shrink: 0;
    padding: 24px 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.dv-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px 0;
    letter-spacing: -0.3px;
}

.dv-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    line-height: 1.5;
}

/* Tab Content (kein Tab-System mehr) */
.dv-tab-content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 24px;
}

/* Main Grid – 2 Spalten Layout */
.dv-main-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

/* Section Cards */
.dv-section {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
}

.dv-section-create {
    grid-column: 1 / 2;
}

.dv-section-history {
    grid-column: 2 / 3;
}

.dv-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e2d3a;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dv-subsection-title {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 12px 0;
}

.dv-info-text {
    font-size: 12px;
    color: #5a6c7d;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

/* Storage Location */
.dv-storage-location {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e8ecf0;
}

.dv-storage-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dv-storage-status {
    flex: 1;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dv-storage-active {
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
    border: 1px solid #81c784;
}

.dv-storage-inactive {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border: 1px solid #ffb74d;
}

.dv-storage-icon {
    font-size: 16px;
}

.dv-storage-label {
    color: #5a6c7d;
}

/* Data Overview Grid */
.dv-data-overview {
    margin-bottom: 24px;
}

.dv-data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.dv-data-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #e0e6ed;
    border-radius: 6px;
    transition: all 0.2s;
}

.dv-data-item:hover {
    border-color: #3498db;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.15);
    transform: translateY(-1px);
}

.dv-data-label {
    flex: 1;
    font-size: 11px;
    font-weight: 500;
    color: #5a6c7d;
}

.dv-data-count {
    font-size: 15px;
    font-weight: 700;
    color: #2c3e50;
}

/* Options */
.dv-options {
    margin-bottom: 24px;
}

.dv-option-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dv-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: #f8f9fa;
    border: 2px solid #e0e6ed;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.dv-option:hover {
    background: #ffffff;
    border-color: #3498db;
}

.dv-option-checkbox {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.dv-option-info {
    flex: 1;
}

.dv-option-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 4px;
}

.dv-option-desc {
    display: block;
    font-size: 11px;
    color: #5a6c7d;
    line-height: 1.5;
}

.dv-option-desc em {
    font-style: normal;
    color: #e67e22;
    font-weight: 500;
}

/* Buttons */
.dv-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.dv-btn {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

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

.dv-btn-primary {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

.dv-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #2980b9 0%, #21618c 100%);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
    transform: translateY(-1px);
}

.dv-btn-secondary {
    background: #ecf0f1;
    color: #2c3e50;
    border: 1px solid #bdc3c7;
}

.dv-btn-secondary:hover:not(:disabled) {
    background: #d5dbdb;
    border-color: #95a5a6;
}

.dv-btn-outline {
    background: transparent;
    color: #2c3e50;
    border: 1px solid #bdc3c7;
}

.dv-btn-outline:hover:not(:disabled) {
    background: #ecf0f1;
    border-color: #95a5a6;
}

.dv-btn-outline-danger {
    border-color: #e74c3c;
    color: #e74c3c;
}

.dv-btn-outline-danger:hover:not(:disabled) {
    background: #ffe4e1;
    border-color: #c0392b;
}

.dv-btn-restore {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.3);
}

.dv-btn-restore:hover:not(:disabled) {
    background: linear-gradient(135deg, #229954 0%, #1e7e41 100%);
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
    transform: translateY(-1px);
}

/* Result Messages */
.dv-result {
    margin-top: 20px;
    padding: 16px;
    border-radius: 8px;
    display: flex;
    gap: 12px;
}

.dv-result-success {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.dv-result-error {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.dv-result-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.dv-result-success .dv-result-icon {
    color: #27ae60;
}

.dv-result-error .dv-result-icon {
    color: #e74c3c;
}

.dv-result-text {
    flex: 1;
}

.dv-result-title {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 8px 0;
}

.dv-result-text p {
    font-size: 12px;
    color: #5a6c7d;
    margin: 0 0 6px 0;
}

.dv-result-text p:last-child {
    margin-bottom: 0;
}

.dv-result-hint {
    font-size: 11px;
    color: #95a5a6 !important;
    font-style: italic;
    margin-top: 8px !important;
}

/* Backup History */
.dv-history-empty {
    padding: 40px 20px;
    text-align: center;
    color: #95a5a6;
    font-size: 13px;
    font-style: italic;
}

.dv-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.dv-history-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #f8f9fa;
    border: 1px solid #e0e6ed;
    border-radius: 6px;
    transition: all 0.2s;
}

.dv-history-item:hover {
    background: #ffffff;
    border-color: #3498db;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.1);
}

.dv-history-item-info {
    flex: 1;
    min-width: 0;
}

.dv-history-item-name {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dv-history-item-date {
    display: block;
    font-size: 10px;
    color: #95a5a6;
    margin-top: 2px;
}

.dv-history-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.dv-history-item-size {
    font-size: 10px;
    color: #5a6c7d;
    font-weight: 500;
}

.dv-history-item-actions {
    flex-shrink: 0;
}

.dv-history-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.dv-history-btn-restore {
    background: #27ae60;
    color: #fff;
}

.dv-history-btn-restore:hover:not(:disabled) {
    background: #229954;
    transform: translateY(-1px);
}

.dv-history-btn-restore:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Badges */
.dv-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.dv-badge-dir {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #81c784;
}

.dv-badge-dl {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffb74d;
}

.dv-badge-doc {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #64b5f6;
}

.dv-badge-mail {
    background: #fce4ec;
    color: #c2185b;
    border: 1px solid #f48fb1;
}

.dv-badge-vorl {
    background: #f3e5f5;
    color: #7b1fa2;
    border: 1px solid #ce93d8;
}

/* Info Boxes */
.dv-info-box {
    margin-top: 16px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid #e0e6ed;
    border-radius: 6px;
    font-size: 11px;
    color: #5a6c7d;
}

.dv-info-box-tip {
    border-left: 3px solid #27ae60;
}

.dv-info-box-warn {
    border-left: 3px solid #f39c12;
}

/* Restore Box */
.dv-restore-box {
    margin-top: 20px;
    padding: 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 2px solid #e0e6ed;
    border-radius: 8px;
}

.dv-restore-title {
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 12px 0;
}

.dv-restore-warning {
    margin-top: 10px;
    padding: 8px 10px;
    background: #fff5f5;
    border: 1px solid #ffcdd2;
    border-radius: 4px;
    font-size: 10px;
    color: #c62828;
}

.dv-restore-actions {
    margin: 0;
}

/* Transfer Tab wurde entfernt */

/* Responsive */
@media (max-width: 1400px) {
    .dv-main-grid {
        grid-template-columns: 1fr;
    }

    .dv-section-create,
    .dv-section-history {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .dv-data-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/* ========== Such-Tab (search-tab.js) ========== */
.search-tab-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: #f5f7fa;
    overflow: hidden;
}

.search-tab-header {
    flex-shrink: 0;
    background: linear-gradient(180deg, #3d4f5c 0%, #2c3e50 100%);
    padding: 16px 20px;
    border-bottom: 2px solid #1a252f;
}

.search-tab-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.search-tab-title-header {
    color: #ecf0f1;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.search-tab-header-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    font-size: 12px;
    color: #bdc3c7;
}

.search-tab-header-counts {
    font-weight: 600;
    color: #ecf0f1;
}

.search-tab-header-total {
    color: #95a5a6;
    margin-top: 2px;
}

.search-tab-input-row {
    display: flex;
    gap: 10px;
}

.search-tab-input-wrap {
    flex: 1;
    position: relative;
    max-width: 500px;
}

.search-tab-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.6;
}

.search-tab-input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid #5a6a7a;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
}

.search-tab-input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.search-tab-btn {
    padding: 10px 20px;
    background: #3498db;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.search-tab-btn:hover {
    background: #2980b9;
}

/* Eine gemeinsame Zeile: Statistik, Gesamtzahl, Auswahl, Aktionen horizontal nebeneinander */
.search-tab-info-row {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    padding: 8px 16px;
    background: #f0f4f8;
    border-bottom: 2px solid #3498db;
    font-size: 12px;
}


.search-tab-info-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.search-tab-select-customers-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: #2c3e50;
    white-space: nowrap;
}

.search-tab-select-customers-label input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.search-tab-info-row .search-tab-selection-text {
    color: #2c3e50;
}

.search-tab-merge-btn {
    padding: 6px 14px;
    border: 1px solid #2e7d32;
    border-radius: 4px;
    background: #fff;
    color: #2e7d32;
    font-size: 12px;
    cursor: pointer;
}

.search-tab-merge-btn:hover:not(:disabled) {
    background: #e8f5e9;
}

.search-tab-merge-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Popup: Kunden zusammenführen */
.merge-customers-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.merge-customers-box {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    max-width: 640px;
    width: 95%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.merge-customers-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #e0e0e0;
    background: #f5f5f5;
    border-radius: 8px 8px 0 0;
}

.merge-customers-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.merge-customers-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #666;
    padding: 0 4px;
    line-height: 1;
}

.merge-customers-close:hover {
    color: #333;
}

.merge-customers-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.merge-customers-hint {
    margin: 0 0 16px;
    padding: 12px 14px;
    background: #f5f8fa;
    border-radius: 6px;
    font-size: 13px;
    color: #2c3e50;
    line-height: 1.45;
}

.merge-customers-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.merge-customers-table thead tr {
    background: #1e2d3a;
    color: #fff;
}

.merge-customers-table th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
}

.merge-customers-table th.merge-customers-col-check {
    width: 36px;
    text-align: center;
}

.merge-customers-table th.merge-customers-col-name {
    min-width: 160px;
}

.merge-customers-table th.merge-customers-col-date {
    min-width: 140px;
    text-align: center;
}

.merge-customers-table th.merge-customers-col-address {
    min-width: 180px;
    text-align: right;
}

.merge-customers-table tbody tr {
    border-bottom: 1px solid #eee;
}

.merge-customers-table tbody tr:hover {
    background: #f8fafc;
}

.merge-customers-table td {
    padding: 10px 12px;
}

.merge-customers-col-check {
    width: 36px;
    text-align: center;
    vertical-align: middle;
}

.merge-customers-col-name {
    min-width: 160px;
}

.merge-customers-col-name label {
    cursor: pointer;
    margin-right: 6px;
}

.merge-customers-link-icon {
    display: inline-block;
    font-size: 12px;
    color: #2d6cdf;
    cursor: pointer;
}

.merge-customers-link-icon:hover {
    text-decoration: underline;
}

.merge-customers-col-date {
    min-width: 140px;
    text-align: center;
}

.merge-customers-col-address {
    min-width: 180px;
    text-align: right;
    color: #555;
}

.merge-customers-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #e0e0e0;
    background: #f9f9f9;
    border-radius: 0 0 8px 8px;
}

.merge-customers-btn-cancel {
    padding: 8px 20px;
    border: 1px solid #2196f3;
    border-radius: 4px;
    background: #fff;
    color: #2196f3;
    font-size: 14px;
    cursor: pointer;
}

.merge-customers-btn-cancel:hover {
    background: #e3f2fd;
}

.merge-customers-btn-merge {
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    background: #2e7d32;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.merge-customers-btn-merge:hover {
    background: #1b5e20;
}


.search-tab-table-scroll {
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

.search-tab-table-inner {
    width: max-content;
    min-width: 100%;
    display: flex;
    flex-direction: column;
}

.search-tab-btn-columns {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #4a5568;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}

.search-tab-btn-columns:hover {
    background: #edf2f7;
}

/* Vertikale Rahmenlinien zwischen den Spalten (Standard) */
.search-tab-table-header .search-tab-col,
.search-tab-row .search-tab-col {
    border-right: 1px solid #e8eaed;
}

.search-tab-table-header {
    flex-shrink: 0;
    display: grid;
    gap: 10px 14px;
    padding: 6px 16px;
    background: #f9f9f9;
    border-bottom: 1px solid #e0e0e0;
    font-size: 10px;
    font-weight: 600;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    align-items: center;
}

.search-tab-col-header {
    position: relative;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-tab-col-resizable {
    cursor: default;
}

.search-tab-th-label {
    display: block;
    padding-right: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-tab-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s ease;
}

.search-tab-resize-handle:hover,
.search-tab-resize-handle:active {
    background: rgba(66, 153, 225, 0.4);
}

/* Such-Tab Spalten-Modal */
.search-tab-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.search-tab-modal-visible {
    opacity: 1;
    visibility: visible;
}

.search-tab-modal {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    width: 360px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.search-tab-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(180deg, #4a5568 0%, #2d3748 100%);
    color: #fff;
}

.search-tab-modal-title {
    font-size: 14px;
    font-weight: 600;
}

.search-tab-modal-close {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.search-tab-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.search-tab-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
}

.search-tab-modal-hint {
    font-size: 11px;
    color: #718096;
    margin: 0 0 12px 0;
}

.search-tab-col-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.search-tab-col-row {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    transition: background 0.1s ease;
}

.search-tab-col-row:hover {
    background: #edf2f7;
}

.search-tab-col-option {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    font-size: 12px;
    color: #2d3748;
    cursor: pointer;
}

.search-tab-col-cb {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: #4299e1;
}

.search-tab-col-arrows {
    display: flex;
    gap: 4px;
}

.search-tab-col-move {
    width: 26px;
    height: 26px;
    border: 1px solid #cbd5e0;
    background: #fff;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    color: #4a5568;
    transition: all 0.1s ease;
}

.search-tab-col-move:hover {
    background: #edf2f7;
    border-color: #a0aec0;
}

.search-tab-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid #e2e8f0;
    background: #fafafa;
}

.search-tab-modal-btn {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}

.search-tab-modal-cancel {
    background: #fff;
    border: 1px solid #cbd5e0;
    color: #4a5568;
}

.search-tab-modal-cancel:hover {
    background: #edf2f7;
}

.search-tab-modal-save {
    background: #4299e1;
    border: none;
    color: #fff;
}

.search-tab-modal-save:hover {
    background: #3182ce;
}

.search-tab-results {
    flex: 1;
    min-height: 0;
    overflow-x: visible;
    overflow-y: auto;
    background: #fff;
}

.search-tab-row {
    display: grid;
    gap: 10px 14px;
    padding: 6px 16px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 11px;
    align-items: center;
    transition: background 0.1s;
}

.search-tab-row:hover {
    background: #f8fafc;
}

/* Spaltenzellen: feste Breite (vom Grid), kein Zeilenumbruch – Inhalt in einer Zeile; bei Überlauf abgeschnitten */
.search-tab-row .search-tab-col {
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.search-tab-col-check {
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-tab-col-check input {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.search-tab-type-icon {
    font-size: 16px;
    text-align: center;
    display: block;
}

.search-tab-name-link {
    font-weight: 600;
    color: #2d6cdf;
    cursor: pointer;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-tab-name-link:hover {
    text-decoration: underline;
}

.search-tab-konzern-link {
    font-weight: 500;
    color: #2d6cdf;
    cursor: pointer;
}
.search-tab-konzern-link:hover {
    text-decoration: underline;
}

.search-tab-subtext {
    font-size: 10px;
    color: #95a5a6;
}

.search-tab-cell-line {
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.search-tab-customer-link {
    color: #2d6cdf;
    cursor: pointer;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-tab-customer-link:hover {
    text-decoration: underline;
}

.search-tab-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.search-tab-badge-customer {
    background: #e3f2fd;
    color: #1976d2;
}

.search-tab-badge-art {
    background: #ffe0b2;
    color: #e65100;
}

.search-tab-badge-mandat {
    background: #c8e6c9;
    color: #2e7d32;
}

.search-tab-mandat-wrap,
.search-tab-art-wrap {
    white-space: nowrap;
    display: inline-block;
}

.search-tab-mandat-wrap .search-tab-badge-mandat {
    margin-right: 4px;
}

.search-tab-mandat-wrap .search-tab-badge-mandat:last-child {
    margin-right: 0;
}

.search-tab-art-wrap .search-tab-badge-art {
    margin-right: 4px;
}

.search-tab-art-wrap .search-tab-badge-art:last-child {
    margin-right: 0;
}

.search-tab-badge-aktiv {
    background: #e8f5e9;
    color: #388e3c;
}

.search-tab-badge-storniert {
    background: #ffebee;
    color: #d32f2f;
}

.search-tab-highlight {
    background: #fff3cd;
    padding: 0 2px;
    border-radius: 2px;
}

.search-tab-empty {
    padding: 40px 20px;
    text-align: center;
    color: #95a5a6;
    font-size: 13px;
}

.search-tab-pagination {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    font-size: 12px;
}

.search-tab-pagination-left {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7f8c8d;
}

.search-tab-pagination-left select {
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
}

.search-tab-pagination-info {
    color: #7f8c8d;
}

.search-tab-pagination-right {
    display: flex;
    gap: 4px;
}

.search-tab-pagination-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #555;
    transition: background 0.1s;
}

.search-tab-pagination-btn:hover {
    background: #f5f5f5;
}

/* ============================================================================
   GESPRÄCHSNOTIZEN-TAB (gn-)
   ============================================================================ */

.gn-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gn-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
}

.gn-type-telefonat {
    background: #3498db;
}

.gn-type-termin {
    background: #2ecc71;
}

.gn-type-anruf {
    background: #e67e22;
}

.gn-type-beratung {
    background: #9b59b6;
}

.gn-type-sonstiges {
    background: #95a5a6;
}

.gn-row {
    cursor: pointer;
}

.gn-row:hover {
    background: #f5f8fc !important;
}

.gn-row-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #7f8c8d;
    padding: 2px 6px;
    border-radius: 3px;
}

.gn-row-menu-btn:hover {
    background: #eee;
    color: #2c3e50;
}

.gn-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    margin-bottom: 3px;
}

.gn-input {
    display: block;
    width: 100%;
    padding: 7px 10px;
    font-size: 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: inherit;
}

.gn-input:focus {
    border-color: #4a90d9;
    outline: none;
    box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.15);
}

.gn-input-select {
    appearance: auto;
}

.gn-textarea {
    resize: vertical;
    min-height: 80px;
}

.gn-add-btn {
    background: #2ecc71 !important;
    color: #fff !important;
    border: none !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.gn-add-btn:hover {
    background: #27ae60 !important;
}

.gn-row-clickable {
    cursor: pointer;
}

.gn-detail-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.gn-detail-modal {
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.gn-detail-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.gn-detail-row {
    margin-bottom: 12px;
}

.gn-detail-row:last-child {
    margin-bottom: 0;
}

.gn-detail-label {
    display: block;
    font-size: 11px;
    color: #64748b;
    margin-bottom: 2px;
}

.gn-detail-value {
    display: block;
    font-size: 13px;
    color: #1e293b;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ============================================================================
   AUFGABEN-TAB (at-)
   ============================================================================ */

.at-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.at-row {
    cursor: pointer;
}

.at-row:hover {
    background: #f5f8fc !important;
}

.at-row-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #7f8c8d;
    padding: 2px 6px;
    border-radius: 3px;
}

.at-row-menu-btn:hover {
    background: #eee;
    color: #2c3e50;
}

.at-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
}

.at-status-offen {
    background: #e67e22;
}

.at-status-bearbeitung {
    background: #3498db;
}

.at-status-erledigt {
    background: #2ecc71;
}

.at-badge-group {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-right: 12px;
}

.at-badge {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 10px;
    font-weight: 600;
}

.at-badge-open {
    background: #fef3e2;
    color: #e67e22;
}

.at-badge-done {
    background: #e8f8f0;
    color: #27ae60;
}

.at-add-btn {
    background: #3498db !important;
    color: #fff !important;
    border: none !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.at-add-btn:hover {
    background: #2980b9 !important;
}

/* ============================================================================
   HISTORIE-TAB (hist-)
   ============================================================================ */

.hist-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hist-timeline {
    flex: 1;
    overflow: auto;
    padding: 16px 20px 40px;
}

.hist-empty {
    text-align: center;
    color: #95a5a6;
    padding: 40px;
    font-size: 12px;
}

.hist-count {
    font-size: 11px;
    color: #95a5a6;
}

.hist-event {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.hist-event:last-child {
    border-bottom: none;
}

.hist-event-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    background: #f8f9fa;
    border-radius: 50%;
}

.hist-event-body {
    flex: 1;
}

.hist-event-text {
    font-size: 12px;
    color: #2c3e50;
    line-height: 1.4;
}

.hist-event-meta {
    display: flex;
    gap: 12px;
    margin-top: 3px;
    font-size: 10px;
    color: #95a5a6;
}

.hist-event-type {
    font-weight: 600;
    color: #7f8c8d;
}

.hist-event-ago {
    font-style: italic;
}

/* Farbcodierung der Kategorien */
.hist-cat-kunde .hist-event-icon {
    background: #ebf5fb;
}

.hist-cat-vertrag .hist-event-icon {
    background: #e8f8f0;
}

.hist-cat-schaden .hist-event-icon {
    background: #fdedec;
}

.hist-cat-aufgabe .hist-event-icon {
    background: #fef9e7;
}

.hist-cat-notiz .hist-event-icon {
    background: #f4ecf7;
}

/* ============================================================================
   DASHBOARD ADDITIONAL STYLES
   ============================================================================ */

.dash-stat-card.purple {
    border-left: 4px solid #9b59b6;
}

.dash-stat-card.teal {
    border-left: 4px solid #1abc9c;
}

/* ============================================================================
   SEARCH-TAB BADGE ERWEITERUNGEN
   ============================================================================ */

.search-tab-badge-carrier {
    background: #f39c12;
    color: #fff;
}

.search-tab-badge-damage {
    background: #e74c3c;
    color: #fff;
}

.search-tab-badge-task {
    background: #9b59b6;
    color: #fff;
}

.search-tab-badge-contract {
    background: #3498db;
    color: #fff;
}

.search-tab-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

/* ============================================================================
   ADMINISTRATION ADDITIONAL STYLES
   ============================================================================ */

.admin-btn {
    display: inline-block;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #f8f9fa;
    color: #2c3e50;
    cursor: pointer;
    transition: background 0.15s;
}

.admin-btn:hover {
    background: #e9ecef;
}

.admin-btn-danger {
    background: #e74c3c;
    color: #fff;
    border-color: #c0392b;
}

.admin-btn-danger:hover {
    background: #c0392b;
}

.admin-config-box {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 16px;
}

.admin-config-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.admin-config-row label {
    min-width: 110px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
}

.admin-config-row .gn-input {
    max-width: 320px;
}

.admin-email-config {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ============================================================================
   ADMIN-CENTER (Struktur: Übersicht, Schnellaktionen, Bereiche gruppiert)
   ============================================================================ */

.ac-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 24px 32px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.ac-header {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e9ecef;
}

.ac-title {
    margin: 0 0 4px 0;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a2e;
}

.ac-subtitle {
    margin: 0;
    font-size: 13px;
    color: #6c757d;
}

/* Übersicht (Statistik + Schnellaktionen) */
.ac-overview {
    margin-bottom: 28px;
    padding: 16px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.ac-overview-title {
    margin: 0 0 12px 0;
    font-size: 11px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ac-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 14px;
}

.ac-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 100px;
    padding: 10px 14px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e5e9ed;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ac-stat-icon {
    font-size: 18px;
    opacity: 0.85;
}

.ac-stat-value {
    font-size: 17px;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.2;
}

.ac-stat-label {
    margin-left: 4px;
    font-size: 11px;
    color: #6c757d;
    font-weight: 500;
}

.ac-quick-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.ac-quick-actions-label {
    font-size: 12px;
    color: #6c757d;
}

.ac-quick-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #3498db;
    background: #fff;
    border: 1px solid #3498db;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.ac-quick-btn:hover {
    background: #3498db;
    color: #fff;
}

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

/* Bereiche (gruppierte Sektionen) */
.ac-areas {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ac-section {
    margin: 0;
}

.ac-section-title {
    margin: 0 0 10px 0;
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

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

.ac-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e5e9ed;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
}

.ac-card:hover {
    border-color: #3498db;
    background: #f8fbff;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.12);
}

.ac-card:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.ac-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: #e8f4fc;
    border-radius: 8px;
    color: #2980b9;
}

.ac-card-text {
    flex: 1;
    min-width: 0;
}

.ac-card-title {
    margin: 0 0 2px 0;
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

.ac-card-desc {
    margin: 0;
    font-size: 12px;
    color: #6c757d;
    line-height: 1.35;
}

.ac-card-arrow {
    flex-shrink: 0;
    font-size: 16px;
    color: #adb5bd;
    transition: color 0.2s, transform 0.2s;
}

.ac-card:hover .ac-card-arrow {
    color: #3498db;
    transform: translateX(2px);
}

/* Admin-Unterbereiche als Tab (Platzhalter-Seiten) */
.admin-subpage-placeholder {
    padding: 2rem;
    max-width: 560px;
}

.admin-subpage-placeholder-title {
    font-size: 1.25rem;
    margin: 0 0 0.5rem 0;
    color: #333;
}

.admin-subpage-placeholder-desc {
    margin: 0;
    color: #666;
    line-height: 1.5;
}

/* ============================================================================
   DATENSICHERUNG (Backup-Seite)
   ============================================================================ */

.ds-wrapper {
    padding: 20px 24px 32px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 1400px;
    margin: 0 auto;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Header */
.ds-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e9ed;
}

.ds-title {
    margin: 0 0 4px 0;
    font-size: 20px;
    font-weight: 600;
    color: #2c3e50;
}

.ds-subtitle {
    margin: 0;
    font-size: 13px;
    color: #6c757d;
    max-width: 700px;
    line-height: 1.5;
}

/* Hauptbereich: 2-Spalten-Layout */
.ds-main-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 960px) {
    .ds-main-grid {
        grid-template-columns: 1fr;
    }
}

/* Sektionen */
.ds-section {
    background: #fff;
    border: 1px solid #e5e9ed;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ds-section-title {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    padding-bottom: 8px;
    border-bottom: 2px solid #3498db;
}

.ds-subsection-title {
    margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
}

.ds-info-text {
    margin: 0 0 12px 0;
    font-size: 12px;
    color: #6c757d;
    line-height: 1.5;
}

/* Datenübersicht Grid */
.ds-data-overview {
    margin-bottom: 24px;
}

.ds-data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 8px;
}

.ds-data-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    transition: background 0.15s;
}

.ds-data-item:hover {
    background: #e9f5ff;
    border-color: #bee1ff;
}

.ds-data-icon {
    font-size: 18px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.ds-data-label {
    flex: 1;
    font-size: 12px;
    color: #495057;
    font-weight: 500;
}

.ds-data-count {
    font-size: 14px;
    font-weight: 700;
    color: #2c3e50;
    background: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    min-width: 28px;
    text-align: center;
}

/* Optionale Daten */
.ds-options {
    margin-bottom: 24px;
}

.ds-option-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ds-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fafbfc;
    border: 1px solid #e5e9ed;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.ds-option:hover {
    background: #f0f7ff;
    border-color: #b3d7ff;
}

.ds-option-checkbox {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #3498db;
}

.ds-option-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ds-option-title {
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
}

.ds-option-desc {
    font-size: 11px;
    color: #6c757d;
    line-height: 1.3;
}

/* Aktions-Buttons */
.ds-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.ds-btn {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}

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

.ds-btn-primary {
    background: #3498db;
    color: #fff;
    border-color: #2980b9;
}

.ds-btn-primary:hover:not(:disabled) {
    background: #2980b9;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

.ds-btn-secondary {
    background: #f8f9fa;
    color: #495057;
    border-color: #dee2e6;
}

.ds-btn-secondary:hover:not(:disabled) {
    background: #e9ecef;
}

/* Ergebnis */
.ds-result-success {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 8px;
}

.ds-result-icon {
    font-size: 28px;
    color: #28a745;
    flex-shrink: 0;
    line-height: 1;
}

.ds-result-text {
    flex: 1;
}

.ds-result-title {
    margin: 0 0 6px 0;
    font-size: 14px;
    font-weight: 600;
    color: #155724;
}

.ds-result-text p {
    margin: 0 0 4px 0;
    font-size: 12px;
    color: #155724;
}

.ds-result-hint {
    margin-top: 8px !important;
    font-style: italic;
    color: #1b5e20 !important;
}

.ds-result-hint code {
    background: #c3e6cb;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
}

/* Backup-Historie */
.ds-history-empty {
    padding: 24px;
    text-align: center;
    color: #adb5bd;
    font-size: 13px;
    font-style: italic;
}

.ds-history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 16px;
}

.ds-history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #fafbfc;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    transition: background 0.15s;
}

.ds-history-item:hover {
    background: #f0f7ff;
}

.ds-history-item-icon {
    font-size: 16px;
    flex-shrink: 0;
    color: #6c757d;
}

.ds-history-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ds-history-item-name {
    font-size: 11px;
    font-weight: 600;
    color: #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-history-item-date {
    font-size: 10px;
    color: #868e96;
}

.ds-history-item-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.ds-history-item-size {
    font-size: 10px;
    color: #495057;
    font-weight: 600;
}

.ds-history-item-options {
    display: flex;
    gap: 3px;
}

/* Badges */
.ds-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ds-badge-core {
    background: #e8f4fd;
    color: #3498db;
}

.ds-badge-doc {
    background: #e8f5e9;
    color: #2e7d32;
}

.ds-badge-mail {
    background: #fff3e0;
    color: #ef6c00;
}

.ds-badge-vorl {
    background: #f3e5f5;
    color: #7b1fa2;
}

/* Info-Boxen */
.ds-info-box {
    padding: 14px;
    background: #f0f7ff;
    border: 1px solid #bee1ff;
    border-radius: 6px;
    margin-bottom: 12px;
}

.ds-info-box-restore {
    background: #fff8e1;
    border-color: #ffecb3;
}

.ds-restore-actions {
    margin: 12px 0;
}

.ds-btn-restore {
    width: 100%;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 5px;
    border: 2px solid #ff9800;
    background: #fff;
    color: #ff9800;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ds-btn-restore:hover:not(:disabled) {
    background: #ff9800;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(255, 152, 0, 0.25);
}

.ds-btn-restore:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ds-restore-warning {
    margin-top: 12px;
    font-size: 11px;
    color: #d84315;
    padding: 8px 10px;
    background: #ffebee;
    border-radius: 4px;
    border-left: 3px solid #d84315;
}

.ds-info-box-title {
    margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
}

.ds-info-list {
    margin: 0;
    padding-left: 18px;
    font-size: 11px;
    color: #495057;
    line-height: 1.7;
}

.ds-info-list li {
    margin-bottom: 2px;
}

.ds-info-list code {
    background: #e4effa;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 10px;
}

.ds-info-list strong {
    font-weight: 600;
}

/* Speicherort-Bereich */
.ds-storage-location {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e9ecef;
}

.ds-storage-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ds-storage-status {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 12px;
    color: #495057;
    line-height: 1.4;
}

.ds-storage-active {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.ds-storage-inactive {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
}

.ds-storage-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.ds-storage-label {
    font-size: 12px;
}

/* Outline-Button-Varianten */
.ds-btn-outline {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 5px;
    border: 1px solid #3498db;
    background: #fff;
    color: #3498db;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.ds-btn-outline:hover {
    background: #3498db;
    color: #fff;
}

.ds-btn-outline-danger {
    border-color: #dc3545;
    color: #dc3545;
    padding: 8px 10px;
}

.ds-btn-outline-danger:hover {
    background: #dc3545;
    color: #fff;
}

/* Zusätzliche Info-Box-Varianten */
.ds-info-box-dir {
    background: #e8f5e9;
    border-color: #c8e6c9;
}

.ds-info-box-warn {
    background: #fff3e0;
    border-color: #ffe0b2;
}

/* Zusätzliche Badge-Varianten */
.ds-badge-dir {
    background: #d4edda;
    color: #155724;
}

.ds-badge-dl {
    background: #e3f2fd;
    color: #1565c0;
}

/* ================================================================
   PRODUKTE-MANAGER (Neu aufgebaut 2026-02-12)
   ================================================================ */

.produkte-manager-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f8f9fa;
}

/* Header */
.produkte-manager-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    background: white;
    border-bottom: 1px solid #e5e7eb;
}

.produkte-manager-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #1f2937;
}

.produkte-manager-subtitle {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: #6b7280;
}

.produkte-manager-stats {
    display: flex;
    gap: 16px;
}

.stat-box {
    text-align: center;
    padding: 12px 24px;
    background: #f3f4f6;
    border-radius: 8px;
    min-width: 100px;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #3b82f6;
}

.stat-label {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

/* Tabs */
.produkte-manager-tabs {
    display: flex;
    gap: 0;
    background: white;
    border-bottom: 2px solid #e5e7eb;
    padding: 0 32px;
}

.produkte-tab {
    padding: 14px 24px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.produkte-tab:hover {
    color: #1f2937;
    background: #f9fafb;
}

.produkte-tab.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}

/* Content */
.produkte-manager-content {
    flex: 1;
    overflow: auto;
    padding: 24px 32px;
}

/* Toolbar */
.produkte-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 16px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.produkte-toolbar-left,
.produkte-toolbar-right {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Buttons */
.btn-primary {
    padding: 10px 20px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary:hover {
    background: #2563eb;
}

.btn-secondary {
    padding: 10px 20px;
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.btn-small {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-small:hover {
    background: #f3f4f6;
}

.btn-edit {
    color: #3b82f6;
    border-color: #3b82f6;
}

.btn-edit:hover {
    background: #eff6ff;
}

.btn-delete {
    color: #ef4444;
    border-color: #ef4444;
}

.btn-delete:hover {
    background: #fef2f2;
}

/* Table */
.produkte-table-wrapper {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.produkte-table {
    width: 100%;
    border-collapse: collapse;
}

.produkte-table thead {
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
}

.produkte-table th {
    padding: 14px 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.produkte-table tbody tr {
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s;
}

.produkte-table tbody tr:hover {
    background: #f9fafb;
}

.produkte-table td {
    padding: 14px 16px;
    font-size: 14px;
    color: #1f2937;
}

/* Status Badge */
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.active {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.inactive {
    background: #fee2e2;
    color: #991b1b;
}

/* Gesellschaften-Tab */
.gesellschaften-toolbar {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
}

.gesellschaften-search {
    max-width: 600px;
    width: 100%;
}

.gesellschaften-search-input {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.2s;
    background: white;
}

.gesellschaften-search-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.gesellschaften-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 4px;
}

/* Gesellschaft-Card (ohne Logo) */
.gesellschaft-card {
    background: white;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.2s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 100px;
}

.gesellschaft-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
    background: #f9fafb;
}

.gesellschaft-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.gesellschaft-name {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 6px;
    line-height: 1.4;
    word-break: break-word;
}

.gesellschaft-code {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
    background: #f3f4f6;
    padding: 4px 12px;
    border-radius: 6px;
    display: inline-block;
}

/* Responsive */
@media (max-width: 768px) {
    .gesellschaften-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 16px;
    }

    .gesellschaft-card {
        padding: 16px 20px;
        min-height: 90px;
    }
}

/* ========================================================================
   Validierungs-Styles für Kundenmaske und Formulare
   ======================================================================== */

/* Validierungs-Fehler Container */
.validation-error {
    color: #dc2626;
    font-size: 11px;
    margin-top: 4px;
    display: none;
    font-weight: 500;
    line-height: 1.3;
}

.validation-error.visible {
    display: block;
}

/* Input mit Fehler */
.validation-error-input {
    border-color: #dc2626 !important;
    background-color: #fef2f2 !important;
}

.validation-error-input:focus {
    outline: none !important;
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

/* Input mit Success (optional, für zukünftige Verwendung) */
.validation-success-input {
    border-color: #16a34a !important;
    background-color: #f0fdf4 !important;
}

/* Validierungs-Icon (optional) */
.validation-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
}

.validation-icon.error {
    color: #dc2626;
}

.validation-icon.success {
    color: #16a34a;
}

/* Gruppierte Fehler-Anzeige */
.validation-errors-summary {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.validation-errors-summary-title {
    font-size: 13px;
    font-weight: 600;
    color: #991b1b;
    margin-bottom: 8px;
}

.validation-errors-summary-list {
    margin: 0;
    padding-left: 20px;
    font-size: 12px;
    color: #b91c1c;
}

.validation-errors-summary-list li {
    margin-bottom: 4px;
}

/* Spezifische Styles für Kundendaten-Edit-Modals */
.customer-detail-kundendaten-edit-form .validation-error {
    margin-top: 4px;
}

/* Erfolgs-Feedback (für zukünftige Verwendung) */
.validation-success-message {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 12px 16px;
    color: #166534;
    font-size: 13px;
    margin-bottom: 16px;
}

/* Tooltip für Validierungs-Hinweise */
.validation-tooltip {
    position: absolute;
    background: #1f2937;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    z-index: 10001;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

.validation-tooltip.visible {
    opacity: 1;
}

/* Required-Indikator (roter Stern) */
.required-indicator {
    color: #dc2626;
    margin-left: 3px;
    font-weight: bold;
}

/* Deaktivierter Button bei Validierungs-Fehlern */
button.disabled-by-validation {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================================================
   Beziehungen-Graph
   ======================================================================== */

.customer-detail-bez-graph-row {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: center;
}

.customer-detail-bez-graph-btn {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.customer-detail-bez-graph-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.customer-detail-bez-graph-btn:active {
    transform: translateY(0);
}

.relationship-graph-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================================================
   Vorgänge-Center: Dashboard und Tabs (Farbverwendung wie Vertragsmanager)
   ======================================================================== */

/* Dashboard – gleiche Farbwelt wie Vertragsmanager (vm-stats-row / vm-stat-card) */
.tc-dashboard {
    flex-shrink: 0;
    padding: 20px 20px 24px;
    background: #1e2d3a;
    border-bottom: 1px solid #2c3e50;
    position: relative;
}

.tc-dashboard-inner {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

.tc-dashboard-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 900px) {
    .tc-dashboard-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .tc-dashboard-cards {
        grid-template-columns: 1fr;
    }
}

.tc-dashboard-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 16px;
    text-align: left;
    cursor: pointer;
    border: 1px solid #3d5166;
    border-radius: 4px;
    background: #2c3e50;
    transition: background 0.2s ease, border-color 0.2s ease;
    font-family: inherit;
}

.tc-dashboard-card:hover {
    background: #34495e;
    border-color: #4a6a82;
}

.tc-dashboard-card:focus {
    outline: none;
}

.tc-dashboard-card:focus-visible {
    border-color: #4a90d9;
    box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.3);
}

/* Dezente farbige Akzente pro Karte (ohne Layout-Sprung) */
.tc-dashboard-card--tasks:hover { box-shadow: inset 3px 0 0 0 #4fc3f7; }
.tc-dashboard-card--applications:hover { box-shadow: inset 3px 0 0 0 #ffa726; }
.tc-dashboard-card--damages:hover { box-shadow: inset 3px 0 0 0 #ef5350; }
.tc-dashboard-card--transactions:hover { box-shadow: inset 3px 0 0 0 #ab47bc; }

.tc-dashboard-card-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    background: #3d5166;
    border-radius: 4px;
    color: #8fa4b8;
}

.tc-dashboard-card--tasks .tc-dashboard-card-icon { background: rgba(79, 195, 247, 0.25); color: #4fc3f7; }
.tc-dashboard-card--applications .tc-dashboard-card-icon { background: rgba(255, 167, 38, 0.25); color: #ffa726; }
.tc-dashboard-card--damages .tc-dashboard-card-icon { background: rgba(239, 83, 80, 0.25); color: #ef5350; }
.tc-dashboard-card--transactions .tc-dashboard-card-icon { background: rgba(171, 71, 188, 0.25); color: #ab47bc; }

.tc-dashboard-card-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tc-dashboard-card-value {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
}

.tc-dashboard-card-label {
    font-size: 11px;
    font-weight: 600;
    color: #8fa4b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tc-dashboard-card-sublabel {
    font-size: 10px;
    color: #6a8a9a;
    font-weight: 400;
    line-height: 1.3;
}

/* Dashboard Toggle – an vm-stats-toggle angeglichen */
.tc-dashboard-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.tc-dashboard-toggle-input {
    position: relative;
    width: 32px;
    height: 16px;
    appearance: none;
    background: #3d5166;
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    transition: background 0.2s;
    border: 1px solid #4a6a82;
}

.tc-dashboard-toggle-input:checked {
    background: #2980b9;
}

.tc-dashboard-toggle-input::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.tc-dashboard-toggle-input:checked::before {
    transform: translateX(16px);
}

.tc-dashboard-toggle-input:focus {
    outline: none;
}

.tc-dashboard-toggle-input:focus-visible {
    box-shadow: 0 0 0 2px #4a90d9;
}

.tc-dashboard-toggle-label {
    font-size: 12px;
    color: #8fa4b8;
    font-weight: 500;
    white-space: nowrap;
}

/* Tabs-Wrapper */
.tc-tabs-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Tabs Header */
.tc-tabs-header {
    flex-shrink: 0;
    display: flex;
    gap: 2px;
    padding: 0 20px;
    background: #e8ecf0;
    border-bottom: 2px solid #d0d7de;
}

.tc-tab-btn {
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s;
    position: relative;
    top: 2px;
}

.tc-tab-btn:hover {
    background: rgba(255, 255, 255, 0.5);
    color: #1a1a2e;
}

.tc-tab-btn.tc-tab-btn--active {
    background: #fff;
    color: #1a1a2e;
    border-bottom-color: #4a90d9;
    font-weight: 600;
}

.tc-tab-btn:focus {
    outline: none;
}

.tc-tab-btn:focus-visible {
    outline: 2px solid #4a90d9;
    outline-offset: 2px;
}

.tc-tab-icon {
    font-size: 16px;
}

.tc-tab-label {
    white-space: nowrap;
}

/* Tabs Content */
.tc-tabs-content {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.tc-tab-panel {
    display: none;
    height: 100%;
    overflow: auto;
}

.tc-tab-panel.tc-tab-panel--active {
    display: block;
}

/* ========================================================================
   Geschäftsvorfälle-Center (eigene Seite /geschaeftsvorfaelle)
   ======================================================================== */
.gvc-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-main);
}
.gvc-header {
    flex-shrink: 0;
    min-height: 52px;
    padding: 14px 20px;
    background: #1e2d3a;
    color: #fff;
    border-bottom: 1px solid #3d5166;
}
.gvc-header .vm-title {
    font-size: 18px;
    font-weight: 600;
}
.gvc-tabs-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
}
.gvc-tabs-header {
    flex-shrink: 0;
    display: flex;
    gap: 4px;
    padding: 0 20px;
    background: #2c3e50;
    border-bottom: 1px solid #3d5166;
}
.gvc-tab-btn {
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #8fa4b8;
    font-size: 13px;
    cursor: pointer;
}
.gvc-tab-btn:hover {
    color: #fff;
}
.gvc-tab-btn.gvc-tab-btn--active {
    color: #fff;
    border-bottom-color: #4a90d9;
    font-weight: 600;
}
.gvc-tabs-content {
    flex: 1;
    min-height: 0;
    overflow: auto;
}
.gvc-tab-panel {
    display: none;
    height: 100%;
    padding: 16px 20px;
    overflow: auto;
}
.gvc-tab-panel.gvc-tab-panel--active {
    display: block;
}
.gvc-uebersicht-wrap {
    padding: 0;
}
.gvc-konfiguration-toolbar,
.gvc-controlling-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.gvc-konfiguration-hinweis,
.gvc-controlling-hinweis {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 12px;
}
.gvc-control-row .gvc-assignee-select {
    min-width: 140px;
    padding: 4px 8px;
}
.gvc-control-more {
    font-style: italic;
    color: var(--text-light);
}

/* Dashboard-Karte als Link (Geschäftsvorfälle) */
a.tc-dashboard-card {
    cursor: pointer;
    display: flex;
}

/* Aufgaben-Tab: eigener Container für Split-Layout */
.tc-aufgaben-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.tc-aufgaben-header {
    flex-shrink: 0;
    padding: 16px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* ========================================================================
   Carrier Tarife Tab (Gesellschaften - Tarife nach Sparten)
   ======================================================================== */

/* Container */
.carrier-tarife-container {
    padding: 20px;
    background: #f5f7fa;
}

/* Header mit Statistik */
.carrier-tarife-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.carrier-tarife-stats {
    display: flex;
    gap: 24px;
}

.carrier-tarife-stat-card {
    text-align: center;
}

.carrier-tarife-stat-value {
    font-size: 32px;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1;
    margin-bottom: 6px;
}

.carrier-tarife-stat-label {
    font-size: 12px;
    color: #7f8c8d;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.carrier-tarife-actions {
    display: flex;
    gap: 12px;
}

.carrier-tarife-btn-primary {
    padding: 12px 24px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(52, 152, 219, 0.2);
}

.carrier-tarife-btn-primary:hover {
    background: #2980b9;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}

.carrier-tarife-btn-primary span {
    font-size: 18px;
    line-height: 1;
}

/* Kategorien (Sach, Leben, Gewerbe) */
.carrier-tarife-categories {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.carrier-tarife-kategorie-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s;
}

.carrier-tarife-kategorie-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.carrier-tarife-kategorie-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
    cursor: pointer;
    transition: background 0.2s;
}

.carrier-tarife-kategorie-header:hover {
    background: #e9ecef;
}

.carrier-tarife-kategorie-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.carrier-tarife-kategorie-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    flex-shrink: 0;
}

.carrier-tarife-kategorie-title h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
}

.carrier-tarife-kategorie-count {
    font-size: 12px;
    color: #7f8c8d;
    font-weight: 500;
}

.carrier-tarife-kategorie-toggle {
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    font-size: 12px;
    color: #7f8c8d;
    transition: color 0.2s;
}

.carrier-tarife-kategorie-toggle:hover {
    color: #2c3e50;
}

.carrier-tarife-chevron {
    transition: transform 0.2s;
}

.carrier-tarife-kategorie-content {
    padding: 12px;
}

/* Sparten innerhalb der Kategorien */
.carrier-tarife-sparte-row {
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 8px;
    overflow: hidden;
}

.carrier-tarife-sparte-empty {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
    opacity: 0.6;
}

.carrier-tarife-sparte-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.carrier-tarife-sparte-header:hover {
    background: #e9ecef;
}

.carrier-tarife-sparte-icon {
    font-size: 24px;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.carrier-tarife-sparte-info {
    flex: 1;
}

.carrier-tarife-sparte-name {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 2px;
}

.carrier-tarife-sparte-meta {
    font-size: 12px;
    color: #7f8c8d;
}

.carrier-tarife-sparte-toggle {
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    font-size: 10px;
    color: #7f8c8d;
    transition: color 0.2s;
}

.carrier-tarife-sparte-toggle:hover {
    color: #2c3e50;
}

.carrier-tarife-chevron-small {
    transition: transform 0.2s;
}

.carrier-tarife-btn-add-small {
    background: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
}

.carrier-tarife-btn-add-small:hover {
    background: #2980b9;
    transform: scale(1.1);
}

.carrier-tarife-sparte-products {
    padding: 12px;
    background: white;
}

/* Produkt-Karten */
.carrier-tarife-product-card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 12px;
}

.carrier-tarife-product-card:last-child {
    margin-bottom: 0;
}

.carrier-tarife-product-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.carrier-tarife-product-info {
    flex: 1;
}

.carrier-tarife-product-name {
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.carrier-tarife-product-desc {
    font-size: 13px;
    color: #7f8c8d;
    margin-top: 4px;
}

.carrier-tarife-product-actions {
    display: flex;
    gap: 8px;
}

.carrier-tarife-btn-icon {
    background: transparent;
    border: none;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    transition: background 0.2s;
}

.carrier-tarife-btn-icon:hover {
    background: #f8f9fa;
}

/* Badges */
.carrier-tarife-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.carrier-tarife-badge-active {
    background: #d1fae5;
    color: #065f46;
}

.carrier-tarife-badge-inactive {
    background: #fee2e2;
    color: #991b1b;
}

.carrier-tarife-badge-mini {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
}

/* Tarif-Liste */
.carrier-tarife-tariff-list {
    border-top: 1px solid #e9ecef;
    padding-top: 12px;
}

.carrier-tarife-tariff-header {
    font-size: 12px;
    font-weight: 600;
    color: #7f8c8d;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.carrier-tarife-tariff-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: 4px;
    margin-bottom: 6px;
}

.carrier-tarife-tariff-item:last-child {
    margin-bottom: 0;
}

.carrier-tarife-tariff-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 8px;
}

.carrier-tarife-tariff-details {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #7f8c8d;
}

.carrier-tarife-tariff-amount {
    font-weight: 600;
    color: #2c3e50;
}

.carrier-tarife-tariff-actions {
    display: flex;
    gap: 4px;
}

.carrier-tarife-btn-icon-small {
    background: transparent;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 3px;
    transition: background 0.2s;
}

.carrier-tarife-btn-icon-small:hover {
    background: #e9ecef;
}

/* Keine Tarife vorhanden */
.carrier-tarife-no-tariffs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 4px;
    border-top: 1px solid #e9ecef;
    margin-top: 12px;
}

.carrier-tarife-no-tariffs span {
    font-size: 12px;
    color: #7f8c8d;
    font-style: italic;
}

.carrier-tarife-btn-add-tariff {
    background: #27ae60;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.carrier-tarife-btn-add-tariff:hover {
    background: #229954;
    transform: translateY(-1px);
}

/* ========================================================================
   DATENTRANSFER (dt-*)
   ======================================================================== */

.dt-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.dt-header {
    margin-bottom: 24px;
}

.dt-title {
    font-size: 24px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 8px 0;
}

.dt-subtitle {
    font-size: 13px;
    color: #7f8c8d;
    margin: 0;
    line-height: 1.5;
}

.dt-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 1024px) {
    .dt-main-grid {
        grid-template-columns: 1fr;
    }
}

.dt-section {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
}

.dt-section-title {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 12px 0;
}

.dt-subsection-title {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin: 16px 0 8px 0;
}

.dt-info-text {
    font-size: 12px;
    color: #7f8c8d;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

/* Entitäten-Liste */
.dt-entities-list {
    border: 1px solid #e9ecef;
    border-radius: 6px;
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 16px;
}

.dt-entity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #f8f9fa;
    cursor: pointer;
    transition: background 0.15s;
}

.dt-entity-item:last-child {
    border-bottom: none;
}

.dt-entity-item:hover {
    background: #f8f9fa;
}

.dt-entity-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.dt-entity-icon {
    font-size: 20px;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

.dt-entity-info {
    flex: 1;
    min-width: 0;
}

.dt-entity-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 2px;
}

.dt-entity-desc {
    display: block;
    font-size: 11px;
    color: #95a5a6;
    line-height: 1.4;
}

.dt-entity-count {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    flex-shrink: 0;
}

.dt-entity-count--filled {
    background: #d1fae5;
    color: #065f46;
}

.dt-entity-count--empty {
    background: #f8f9fa;
    color: #95a5a6;
}

/* Import-Bereich */
.dt-import-area {
    margin-bottom: 16px;
}

.dt-import-box {
    border: 2px dashed #cbd5e0;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    background: #f8f9fa;
    transition: all 0.2s;
}

.dt-import-box:hover {
    border-color: #3498db;
    background: #f0f7ff;
}

.dt-import-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
    color: #7f8c8d;
}

.dt-import-text {
    font-size: 13px;
    color: #7f8c8d;
    margin: 0 0 16px 0;
}

.dt-import-options {
    border-top: 1px solid #e9ecef;
    padding-top: 16px;
    margin-top: 16px;
}

/* Radio-Group */
.dt-radio-group {
    margin: 16px 0;
}

.dt-radio-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.15s;
}

.dt-radio-label:last-child {
    margin-bottom: 0;
}

.dt-radio-label:hover {
    background: #f8f9fa;
    border-color: #cbd5e0;
}

.dt-radio-label input[type="radio"] {
    margin-top: 2px;
    cursor: pointer;
    flex-shrink: 0;
}

.dt-radio-info {
    flex: 1;
}

.dt-radio-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 4px;
}

.dt-radio-desc {
    display: block;
    font-size: 11px;
    color: #7f8c8d;
    line-height: 1.5;
}

/* Aktions-Buttons */
.dt-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.dt-btn {
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

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

.dt-btn-primary {
    background: #3498db;
    color: white;
}

.dt-btn-primary:hover:not(:disabled) {
    background: #2980b9;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(52, 152, 219, 0.3);
}

.dt-btn-secondary {
    background: #ecf0f1;
    color: #2c3e50;
}

.dt-btn-secondary:hover:not(:disabled) {
    background: #d5dbdb;
}

.dt-btn-outline {
    background: white;
    color: #3498db;
    border: 1px solid #3498db;
}

.dt-btn-outline:hover:not(:disabled) {
    background: #3498db;
    color: white;
}

/* Ergebnis-Bereiche */
.dt-result {
    margin-top: 16px;
    padding: 16px;
    border-radius: 6px;
}

.dt-result-success {
    background: #d1fae5;
    border: 1px solid #a7f3d0;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.dt-result-error {
    background: #ffebee;
    border: 1px solid #ffcdd2;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.dt-result-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.dt-result-success .dt-result-icon {
    color: #065f46;
}

.dt-result-error .dt-result-icon {
    color: #d84315;
}

.dt-result-text {
    flex: 1;
}

.dt-result-title {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 8px 0;
}

.dt-result-text p {
    font-size: 12px;
    color: #495057;
    margin: 4px 0;
    line-height: 1.5;
}

.dt-result-hint {
    font-size: 11px;
    color: #7f8c8d;
    font-style: italic;
    margin-top: 8px !important;
}

.dt-import-stats {
    margin: 8px 0;
    padding-left: 18px;
    font-size: 12px;
    color: #495057;
    line-height: 1.7;
}

.dt-import-stats li {
    margin-bottom: 4px;
}

/* Info-Box */
.dt-info-box {
    background: #f0f7ff;
    border: 1px solid #bee1ff;
    border-radius: 6px;
    padding: 14px;
    margin-top: 16px;
}

.dt-info-box-title {
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 8px 0;
}

.dt-info-list {
    margin: 0;
    padding-left: 18px;
    font-size: 11px;
    color: #495057;
    line-height: 1.7;
}

.dt-info-list li {
    margin-bottom: 4px;
}

.dt-info-list strong {
    font-weight: 600;
}

/* Calendar Toggle Switch */
.tc-calendar-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #4a5568;
    cursor: pointer;
    font-weight: 500;
}

.tc-calendar-toggle-input {
    position: relative;
    width: 36px;
    height: 18px;
    appearance: none;
    -webkit-appearance: none;
    background: #cbd5e0;
    border-radius: 9px;
    outline: none;
    cursor: pointer;
    transition: background 0.2s;
    border: 1px solid #a0aec0;
}

.tc-calendar-toggle-input:checked {
    background: #48bb78;
    border-color: #38a169;
}

.tc-calendar-toggle-input::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.tc-calendar-toggle-input:checked::before {
    transform: translateX(18px);
}

/* Tasks Center Filter Dropdown */
.tc-filter-dropdown-wrap {
    position: relative;
}

.tc-filter-dropdown-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    padding: 12px;
    width: 300px;
}

.tc-filter-dropdown-wrap.open .tc-filter-dropdown-panel {
    display: block !important;
}

.vm-filter-dropdown-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vm-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vm-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: #4a5568;
}

.vm-filter-input {
    padding: 6px 8px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: 12px;
    width: 100%;
    box-sizing: border-box;
}

.vm-filter-range {
    display: flex;
    gap: 8px;
}

.vm-filter-range-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vm-filter-range-field span {
    font-size: 10px;
    color: #718096;
}

.tc-filter-dropdown-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    border-top: 1px solid #e2e8f0;
    padding-top: 10px;
}

.tc-filter-apply-btn {
    padding: 6px 14px;
    background: #4299e1;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 500;
}

.tc-filter-apply-btn:hover {
    background: #3182ce;
}

.vm-filter-reset-btn {
    padding: 6px 12px;
    background: transparent;
    color: #718096;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.vm-filter-reset-btn:hover {
    background: #f7fafc;
    color: #4a5568;
    border-color: #a0aec0;
}

/* Toolbar Tabs for Filters (Alternative to Sidebar Tabs) */
.tc-toolbar-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 12px;
}

.tc-toolbar-tabs .tc-tab {
    background: transparent;
    border: none;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-light);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 4px;
    transition: all 0.15s;
    font-family: inherit;
}

.tc-toolbar-tabs .tc-tab:hover {
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.04);
}

.tc-toolbar-tabs .tc-tab.active {
    color: var(--brand-blue-start);
    font-weight: 600;
    background: #e8f0fe;
}

.tc-toolbar-tabs .tc-tab .tc-tab-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.08);
    /* slight grey */
    border-radius: 8px;
    color: var(--text-light);
    min-width: 14px;
    text-align: center;
}

.tc-toolbar-tabs .tc-tab.active .tc-tab-badge {
    background: var(--brand-blue-start);
    color: #fff;
}

/* Toast Notification System */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    min-width: 300px;
    max-width: 400px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateX(120%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: auto;
    border-left: 4px solid #ccc;
    font-size: 13px;
    color: #333;
}

.toast.toast--visible {
    transform: translateX(0);
}

.toast--info {
    border-left-color: #2196F3;
}

.toast--success {
    border-left-color: #4CAF50;
}

.toast--warning {
    border-left-color: #FFC107;
}

.toast--error {
    border-left-color: #F44336;
}

.toast-icon {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast--info .toast-icon {
    color: #2196F3;
}

.toast--success .toast-icon {
    color: #4CAF50;
}

.toast--warning .toast-icon {
    color: #FFC107;
}

.toast--error .toast-icon {
    color: #F44336;
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    margin-bottom: 2px;
}

.toast-message {
    line-height: 1.4;
    color: #666;
}

.toast-close {
    cursor: pointer;
    color: #999;
    font-size: 16px;
    padding: 2px;
    border: none;
    background: none;
    line-height: 1;
}

.toast-close:hover {
    color: #333;
}

/* ========== Dev-Übersicht (interne Entwicklerseite) ========== */
.dev-wrapper {
    padding: 20px 24px;
    max-width: 960px;
    background: var(--bg-main);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.dev-wrapper .dev-tab-panel[data-dev-tab="erm"] {
    flex: 1;
    min-height: 0;
    display: none;
}

.dev-wrapper .dev-tab-panel[data-dev-tab="erm"].dev-tab-panel--active {
    display: flex;
    flex-direction: column;
    min-height: 400px;
}

.dev-wrapper.dev-wrapper--erm-active {
    max-width: none;
}

.dev-title {
    font-size: 20px;
    margin-bottom: 20px;
    color: var(--text-main);
    font-weight: 600;
}

.dev-section {
    margin-bottom: 28px;
}

.dev-section-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-main);
}

.dev-intro,
.dev-desc {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-light);
    margin-bottom: 10px;
}

.dev-purpose-list {
    margin: 0 0 0 18px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-main);
}

.dev-purpose-list li {
    margin-bottom: 6px;
}

.dev-table-wrap {
    overflow-x: auto;
    margin-top: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-white);
}

.dev-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.dev-table th,
.dev-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.dev-table th {
    background: #f0f0f0;
    font-weight: 600;
}

.dev-table tbody tr:hover {
    background: #fafafa;
}

.dev-code {
    font-family: Consolas, monospace;
    font-size: 11px;
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 3px;
}

.dev-link {
    color: var(--brand-blue-start);
    text-decoration: none;
}

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

.dev-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.dev-quick-link {
    display: inline-block;
    padding: 6px 12px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-main);
    text-decoration: none;
}

.dev-quick-link:hover {
    background: #f0f0f0;
    border-color: var(--brand-blue-start);
    color: var(--brand-blue-start);
}

.dev-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 600;
}

.dev-badge--ui {
    background: #e3f2fd;
    color: #1565c0;
}

.dev-badge--domain {
    background: #e8f5e9;
    color: #2e7d32;
}

.dev-badge--infrastructure {
    background: #fff3e0;
    color: #e65100;
}

.dev-badge--shared {
    background: #f3e5f5;
    color: #6a1b9a;
}

.dev-badge--person {
    background: #e8f5e9;
    color: #2e7d32;
}

.dev-badge--firma {
    background: #e3f2fd;
    color: #1565c0;
}

/* Kundenmasken-Karten in der Dev-Übersicht */
.dev-mask-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}

.dev-mask-card {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 16px;
    background: #fff;
}

.dev-mask-card--person {
    border-left: 4px solid #43a047;
}

.dev-mask-card--firma {
    border-left: 4px solid #1e88e5;
}

.dev-mask-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.dev-mask-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
}

.dev-mask-card-desc {
    font-size: 11px;
    color: var(--text-light);
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.dev-mask-card-meta {
    font-size: 11px;
    color: var(--text-light);
    margin-bottom: 4px;
}

.dev-mask-meta-label {
    font-weight: 600;
}

.dev-mask-card-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.dev-mask-open-btn {
    display: inline-block;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    background: #2d6cdf;
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.dev-mask-open-btn:hover {
    background: #1a57c8;
}

.dev-mask-open-btn--disabled {
    background: #ccc;
    color: #666;
    cursor: default;
}

.dev-subsection-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 6px 0;
}

.dev-erm-section {
    margin-top: 24px;
}

.dev-tabs-header {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.dev-tab-btn {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}

.dev-tab-btn:hover {
    color: var(--text-main);
    background: #f0f0f0;
}

.dev-tab-btn.dev-tab-btn--active {
    color: var(--brand-blue-end);
    background: #e3f2fd;
    border-color: var(--border-color);
}

.dev-tab-panel {
    display: none;
}

.dev-tab-panel.dev-tab-panel--active {
    display: block;
}

.dev-tab-panel-inner {
    max-width: 960px;
}

.dev-erm-tab-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    max-width: none;
}

.dev-erm-tab-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding: 10px 12px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 12px;
}

.dev-erm-zoom-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
    color: var(--text-main);
    background: #f0f0f0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
}

.dev-erm-zoom-btn:hover {
    background: #e0e0e0;
    border-color: var(--brand-blue-start);
    color: var(--brand-blue-end);
}

.dev-erm-zoom-reset {
    width: auto;
    padding: 0 12px;
    font-size: 12px;
    margin-left: 8px;
}

.dev-erm-zoom-label {
    font-size: 12px;
    font-weight: 600;
    min-width: 44px;
    text-align: center;
}

.dev-erm-zoom-wrap {
    flex: 1;
    min-height: 420px;
    overflow: auto;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dev-erm-zoom-inner {
    transform-origin: center center;
    transition: transform 0.15s ease-out;
}

.dev-erm-zoom-inner .mermaid {
    display: block;
}

.dev-erm-zoom-inner svg {
    max-width: none;
    height: auto;
}

.dev-erm-hint {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 8px;
}

.dev-erm-wrap {
    margin-top: 12px;
    padding: 16px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    min-height: 320px;
    overflow-x: auto;
}

.dev-erm-wrap .mermaid {
    display: flex;
    justify-content: center;
}

.dev-erm-wrap svg {
    max-width: 100%;
    height: auto;
}

/* ========== Aktionen-Button (Standard im Footer; herausziehbar, zurückziehbar zum Andocken) ========== */
.aktionen-button-host {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 9000;
}

.aktionen-button-host .aktionen-fab-wrap {
    pointer-events: auto;
    position: absolute;
    right: 24px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

/* Gedockt im Footer: in der Zeile, keine feste Position */
.aktionen-fab-wrap--docked {
    position: relative;
    right: auto;
    bottom: auto;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

/* Panel öffnet über dem Footer, ohne Footer-Höhe zu verändern */
.aktionen-fab-wrap--docked .aktionen-fab-actions {
    position: absolute;
    bottom: 100%;
    left: auto;
    right: 0;
    margin-bottom: 4px;
}

.aktionen-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 48px;
    height: 48px;
    padding: 0 14px;
    background: linear-gradient(180deg, var(--brand-blue-start) 0%, var(--brand-blue-end) 100%);
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 24px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: box-shadow 0.2s, transform 0.15s;
}

.aktionen-fab:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.aktionen-fab:active {
    transform: scale(0.98);
}

/* Kompakt im Footer (28px Höhe), ohne Footer zu vergrößern */
.aktionen-fab--docked {
    min-width: 0;
    height: 24px;
    padding: 0 10px;
    border-radius: 12px;
    font-size: 11px;
    gap: 4px;
}

.aktionen-fab--docked .aktionen-fab-chevron {
    font-size: 8px;
}

.aktionen-fab-text {
    letter-spacing: 0.02em;
}

.aktionen-fab-chevron {
    font-size: 10px;
    opacity: 0.95;
    transition: transform 0.2s;
}

.aktionen-fab-wrap--open .aktionen-fab-chevron {
    transform: rotate(180deg);
}

.aktionen-fab-actions {
    display: none;
    flex-direction: column;
    align-items: stretch;
    min-width: 200px;
    max-width: 280px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    margin-bottom: 8px;
}

.aktionen-fab-wrap--open .aktionen-fab-actions {
    display: flex;
}

.aktionen-fab-action-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-main);
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.aktionen-fab-action-item:hover {
    background: #f0f4f8;
}

.aktionen-fab-action-item:focus {
    outline: 2px solid var(--brand-blue-start);
    outline-offset: -2px;
}

.aktionen-fab-action-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.aktionen-fab-action-label {
    flex: 1;
}

.aktionen-fab-back {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
    padding-bottom: 8px;
    color: var(--text-light);
}

.aktionen-fab-back:hover {
    background: #e8eef2;
}